/* ============================================================
   AquaCore Adventures — Design System v2 (based on v7 mockup)
   Scope: NAV + CONTEXT BAR + MOBILE MENU + FOOTER
   Loaded AFTER style.css to override the legacy Bootstrap look.
   ============================================================ */

/* ══════ TOKENS ══════ */
:root {
    --ocean: #1a6fa0;
    --ocean-deep: #0e4a6f;
    --ocean-dark: #0a3553;
    --ocean-darker: #072940;
    --sky: #2a8fbd;
    --sky-light: #3da5d4;
    --wave: #7ec8e3;
    --wave-light: #b8e2f2;
    --sail: #ffffff;
    --av2-accent: var(--wave);
    --av2-accent-soft: rgba(126, 200, 227, 0.12);
    --av2-accent-mid: rgba(126, 200, 227, 0.25);
    --av2-sand: #f7f4ef;
    --av2-sand-dark: #e8e3d9;
    --av2-text-dim: #6a8da3;
    --av2-text-mid: #8fb5ca;
    --av2-text-bright: #c8dfe9;
    --av2-white: #fff;
    --nav-h: 60px;
    --ctx-h: 48px;

    /* ───── Canonical content width system ──────────────────
       Single source of truth for ALL centered containers:
       - nav inner
       - context bar inner
       - av2-page (body wrapper)
       - site footer inner
       - legacy Bootstrap .container (overridden below)
       Keeps menu, sub-menu and body aligned at every breakpoint. */
    --av2-content-max: 1200px;
    --av2-content-pad-x: 16px;   /* mobile default */
}
@media (min-width: 560px)  { :root { --av2-content-pad-x: 20px; } }
@media (min-width: 768px)  { :root { --av2-content-pad-x: 28px; } }
@media (min-width: 1024px) { :root { --av2-content-pad-x: 40px; } }

/* Outfit font on the new components */
.av2-nav,
.av2-nav *,
.av2-ctx,
.av2-ctx *,
.av2-mmenu,
.av2-mmenu *,
.av2-site-footer,
.av2-site-footer * {
    font-family: 'Outfit', sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* ══════ NAV ══════ */
.av2-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1050;
    height: var(--nav-h);
    background: var(--ocean-dark);
    transition: transform .35s cubic-bezier(.4, 0, .2, 1);
    will-change: transform;
    border-bottom: 1px solid rgba(126, 200, 227, .08);
}
.av2-nav.hidden { transform: translateY(-100%); }
.av2-nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    max-width: var(--av2-content-max);
    margin: 0 auto;
    padding-left: var(--av2-content-pad-x);
    padding-right: var(--av2-content-pad-x);
    width: 100%;
}

/* Logo */
.av2-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    z-index: 1101;
}
.av2-logo-mark {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--sky);
    display: grid;
    place-items: center;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}
.av2-logo-mark::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .15), transparent 60%);
    border-radius: inherit;
}
.av2-logo-mark svg {
    width: 22px;
    height: 22px;
    position: relative;
    z-index: 1;
}
.av2-logo-wordmark {
    font-size: 15px;
    font-weight: 700;
    color: var(--av2-white);
    letter-spacing: -.3px;
    line-height: 1;
}
.av2-logo-wordmark span {
    display: block;
    font-size: 9px;
    font-weight: 600;
    color: var(--wave);
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-top: 2px;
}

.av2-nav-right {
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 1101;
}

/* ══════ LANGUAGE DROPDOWN ══════ */
.av2-lang-dd { position: relative; }
.av2-lang-current {
    display: flex;
    align-items: center;
    gap: 5px;
    border: none;
    background: rgba(255, 255, 255, .06);
    color: var(--av2-text-bright);
    font-family: 'Outfit', sans-serif;
    font-size: 12px;
    font-weight: 600;
    padding: 6px 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: background .2s;
    letter-spacing: .3px;
}
.av2-lang-current:hover { background: rgba(255, 255, 255, .1); }
.av2-lang-current .av2-flag { font-size: 14px; line-height: 1; }
/* Legacy .av2-chv kept for backward compat; new markup uses .av2-chev-ico */
.av2-lang-current .av2-chv {
    display: inline-flex;
    color: var(--av2-text-dim);
    transition: transform .2s;
    margin-left: 2px;
}
.av2-lang-dd.open .av2-lang-current .av2-chv { transform: rotate(180deg); }
.av2-lang-list {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    background: var(--ocean-dark);
    border: 1px solid rgba(126, 200, 227, .1);
    border-radius: 12px;
    padding: 6px;
    min-width: 150px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .4);
    display: none;
    z-index: 10;
}
.av2-lang-dd.open .av2-lang-list { display: block; }
.av2-lang-opt {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    border: none;
    background: none;
    color: var(--av2-text-mid);
    font-family: 'Outfit', sans-serif;
    font-size: 13px;
    font-weight: 500;
    padding: 10px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: all .15s;
    text-align: left;
}
.av2-lang-opt:hover { background: rgba(255, 255, 255, .05); color: var(--av2-text-bright); }
.av2-lang-opt.on { color: var(--wave); background: var(--av2-accent-soft); }
.av2-lang-opt .av2-flag { font-size: 16px; }
.av2-lang-opt .av2-lang-name { flex: 1; }
.av2-lang-opt .av2-check { margin-left: auto; font-size: 12px; }
.av2-lang-opt.on .av2-check { opacity: 1; }
/* Coming-soon variant: muted, non-clickable, "soon" label on the right */
.av2-lang-opt.is-disabled {
    opacity: .45;
    cursor: not-allowed;
    pointer-events: none;
}
.av2-lang-opt.is-disabled:hover {
    background: transparent;
    color: var(--av2-text-mid);
}
.av2-lang-soon {
    margin-left: auto;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--av2-text-dim);
    background: rgba(255, 255, 255, .06);
    padding: 2px 6px;
    border-radius: 999px;
}

/* Burger */
.av2-burger {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    cursor: pointer;
    border: none;
    background: rgba(255, 255, 255, .06);
    border-radius: 11px;
    transition: background .2s;
}
.av2-burger:active { background: rgba(255, 255, 255, .1); }
.av2-burger-lines {
    width: 18px;
    height: 12px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.av2-burger-lines i {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--av2-white);
    border-radius: 2px;
    transition: all .35s cubic-bezier(.4, 0, .2, 1);
    transform-origin: center;
}
.av2-burger.open .av2-burger-lines i:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.av2-burger.open .av2-burger-lines i:nth-child(2) { opacity: 0; transform: scaleX(0); }
.av2-burger.open .av2-burger-lines i:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

.av2-desktop-links { display: none; }

/* ══════ CONTEXT BAR ══════ */
.av2-ctx {
    position: fixed;
    top: var(--nav-h);
    left: 0;
    right: 0;
    z-index: 1049;
    height: var(--ctx-h);
    background: var(--ocean-darker);
    border-bottom: 1px solid rgba(126, 200, 227, .06);
    transition: top .35s cubic-bezier(.4, 0, .2, 1);
    will-change: top;
}
.av2-nav.hidden ~ .av2-ctx,
.av2-ctx.solo { top: 0; }
.av2-ctx-scroll {
    display: flex;
    align-items: stretch;
    height: 100%;
    max-width: var(--av2-content-max);
    margin: 0 auto;
    padding-left: var(--av2-content-pad-x);
    padding-right: var(--av2-content-pad-x);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: rgba(126, 200, 227, .3) transparent;
}
.av2-ctx-scroll::-webkit-scrollbar { height: 3px; }
.av2-ctx-scroll::-webkit-scrollbar-track { background: transparent; }
.av2-ctx-scroll::-webkit-scrollbar-thumb { background: rgba(126, 200, 227, .35); border-radius: 3px; }
.av2-ctx-scroll::-webkit-scrollbar-thumb:hover { background: rgba(126, 200, 227, .55); }
.av2-ctx-loc {
    display: flex;
    align-items: center;
    gap: 5px;
    padding-right: 14px;
    margin-right: 6px;
    font-size: 12px;
    font-weight: 700;
    color: var(--wave);
    white-space: nowrap;
    flex-shrink: 0;
    border-right: 1px solid rgba(255, 255, 255, .08);
    text-decoration: none;
    transition: color .2s;
}
.av2-ctx-loc:hover { color: var(--wave-light); }
.av2-ctx-link {
    position: relative;
    display: flex;
    align-items: center;
    padding: 0 12px;
    font-size: 13px;
    font-weight: 500;
    color: var(--av2-text-dim);
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    transition: color .2s;
}
.av2-ctx-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 8px;
    right: 8px;
    height: 2.5px;
    border-radius: 2px;
    background: transparent;
    transition: background .2s;
}
.av2-ctx-link:hover { color: var(--av2-text-bright); }
.av2-ctx-link.on { color: var(--av2-white); font-weight: 600; }
.av2-ctx-link.on::after { background: var(--wave); }
.av2-ctx-fade-l,
.av2-ctx-fade-r {
    position: absolute;
    top: 0;
    bottom: 3px;
    width: 40px;
    z-index: 2;
    pointer-events: none;
    display: flex;
    align-items: center;
}
.av2-ctx-fade-l {
    left: 0;
    background: linear-gradient(to right, var(--ocean-darker) 30%, transparent);
    padding-left: 6px;
    opacity: 0;
    transition: opacity .2s;
}
.av2-ctx-fade-r {
    right: 0;
    background: linear-gradient(to left, var(--ocean-darker) 30%, transparent);
    padding-right: 6px;
}
.av2-ctx-fade-l.show { opacity: 1; }
.av2-ctx-fade-r.hide { opacity: 0; }
.av2-ctx-arrow {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .1);
    display: grid;
    place-items: center;
    pointer-events: auto;
    cursor: pointer;
}
.av2-ctx-arrow svg { width: 11px; height: 11px; fill: var(--av2-text-mid); }

.av2-spacer { height: calc(var(--nav-h) + var(--ctx-h)); }
/* Home page (and any page that hides the context bar) uses a shorter
   spacer so there is no dead strip where the ctx would have been. */
.av2-spacer--no-ctx { height: var(--nav-h); }

/* ══════ MOBILE MENU ══════ */
.av2-mmenu {
    position: fixed;
    inset: 0;
    z-index: 1100;
    background: var(--ocean-dark);
    overflow-y: auto;
    padding: 0 20px 32px;
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s, visibility .3s;
    display: flex;
    flex-direction: column;
}
.av2-mmenu.open { opacity: 1; visibility: visible; }
.av2-mmenu.open .av2-mi { animation: av2SlideIn .4s ease forwards; opacity: 0; }
@keyframes av2SlideIn {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
}

.av2-mm-header {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 16px 0 18px;
    border-bottom: 1px solid rgba(255, 255, 255, .04);
    margin-bottom: 16px;
    flex-shrink: 0;
}
.av2-mm-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-decoration: none;
}
.av2-mm-logo-mark {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--sky);
    display: grid;
    place-items: center;
    position: relative;
    overflow: hidden;
}
.av2-mm-logo-mark::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .15), transparent 60%);
    border-radius: inherit;
}
.av2-mm-logo-mark svg { width: 28px; height: 28px; position: relative; z-index: 1; }
.av2-mm-logo-text {
    font-size: 14px;
    font-weight: 700;
    color: var(--av2-white);
    text-align: center;
    line-height: 1;
}
.av2-mm-logo-text span {
    display: block;
    font-size: 8px;
    font-weight: 600;
    color: var(--wave);
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-top: 3px;
}
.av2-mm-close {
    position: absolute;
    right: 0;
    top: 16px;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border: none;
    background: rgba(255, 255, 255, .06);
    border-radius: 11px;
    cursor: pointer;
}
.av2-mm-close:active { background: rgba(255, 255, 255, .1); }
.av2-mm-close svg { width: 18px; height: 18px; stroke: var(--av2-white); stroke-width: 2; fill: none; }

.av2-mm-main { flex: 1; }
.av2-mlabel {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--av2-text-dim);
    padding: 0 4px;
    margin-bottom: 10px;
    margin-top: 20px;
}
.av2-mlabel:first-child { margin-top: 0; }

.av2-dhead {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    border: none;
    background: none;
    color: var(--av2-text-bright);
    font-family: 'Outfit', sans-serif;
    font-size: 16px;
    font-weight: 500;
    padding: 14px 16px;
    border-radius: 14px;
    cursor: pointer;
    transition: background .15s;
}
.av2-dhead:active { background: rgba(255, 255, 255, .04); }
.av2-dhead .av2-ico {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    font-size: 16px;
    flex-shrink: 0;
}
.av2-dhead .av2-dm { flex: 1; text-align: left; }
.av2-dhead .av2-dm small {
    display: block;
    color: var(--av2-text-dim);
    font-size: 11px;
    font-weight: 400;
    margin-top: 1px;
}
.av2-dhead .av2-ch {
    display: inline-flex;
    color: var(--av2-text-dim);
    transition: transform .3s cubic-bezier(.4, 0, .2, 1);
}
.av2-dhead.open .av2-ch { transform: rotate(180deg); }
.av2-dc .av2-ico { background: rgba(42, 143, 189, .15); }
.av2-dl .av2-ico { background: rgba(255, 170, 50, .1); }
.av2-dr .av2-ico { background: rgba(126, 200, 227, .12); }
.av2-dp .av2-ico { background: rgba(100, 140, 200, .1); }
.av2-db {
    max-height: 0;
    overflow: hidden;
    transition: max-height .4s cubic-bezier(.4, 0, .2, 1);
    margin-left: 28px;
    padding-left: 26px;
    border-left: 2px solid rgba(255, 255, 255, .06);
}
.av2-db.open { max-height: 600px; }
.av2-db a {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--av2-text-mid);
    text-decoration: none;
    font-size: 14px;
    font-weight: 400;
    padding: 10px 14px;
    border-radius: 10px;
    transition: all .15s;
}
.av2-db a:active,
.av2-db a:hover { background: var(--av2-accent-soft); color: var(--wave); }
.av2-db a::before {
    content: '';
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .1);
    flex-shrink: 0;
}
.av2-db a:active::before,
.av2-db a:hover::before { background: var(--wave); }

.av2-svc-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    padding: 4px 8px;
}
.av2-svc-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--av2-text-mid);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .04);
    transition: all .15s;
}
.av2-svc-chip:active,
.av2-svc-chip:hover { background: var(--av2-accent-soft); color: var(--wave); }
.av2-svc-chip .av2-svc-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--sky);
    opacity: .5;
    flex-shrink: 0;
}

.av2-mm-lang-row {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 0;
}
.av2-mm-lang-row .av2-lang-current {
    height: 38px;
    padding: 0 14px;
    font-size: 13px;
    border-radius: 10px;
}
.av2-mm-lang-row .av2-lang-list {
    top: auto;
    bottom: calc(100% + 6px);
    right: auto;
    left: 50%;
    transform: translateX(-50%);
}

.av2-mm-footer {
    border-top: 1px solid rgba(255, 255, 255, .04);
    padding-top: 16px;
    margin-top: 8px;
    flex-shrink: 0;
}
.av2-mm-footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0;
}
.av2-mm-footer-link {
    color: var(--av2-text-dim);
    text-decoration: none;
    font-size: 12px;
    font-weight: 500;
    padding: 8px 14px;
    border-radius: 8px;
    transition: color .15s;
}
.av2-mm-footer-link:active,
.av2-mm-footer-link:hover { color: var(--av2-text-bright); }

/* Mobile menu CTA — layout-only tweaks; visual style comes from
   the canonical button system (.av2-btn + --primary variant). */
.av2-mcta {
    margin-top: 14px;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
}
.av2-mcta::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, .2) 0%, transparent 50%);
    pointer-events: none;
    border-radius: inherit;
}
.av2-mcta span { position: relative; }

/* ══════ FOOTER ══════ */
.av2-site-footer {
    background: var(--ocean-dark);
    padding-top: 32px;
    padding-bottom: 32px;
    margin-top: auto;
    border-top: 1px solid rgba(126, 200, 227, .06);
}
.av2-footer-inner {
    max-width: var(--av2-content-max);
    margin: 0 auto;
    padding-left: var(--av2-content-pad-x);
    padding-right: var(--av2-content-pad-x);
}
.av2-footer-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 12px;
}
.av2-footer-logo {
    display: flex;
    align-items: center;
    gap: 8px;
}
.av2-footer-mark {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--sky);
    display: grid;
    place-items: center;
    position: relative;
    overflow: hidden;
}
.av2-footer-mark::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .15), transparent 60%);
}
.av2-footer-mark svg { width: 18px; height: 18px; position: relative; z-index: 1; }
.av2-footer-name { font-size: 14px; font-weight: 600; color: var(--av2-white); }
.av2-footer-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 24px;
}
.av2-footer-col-title {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--av2-text-dim);
    margin-bottom: 12px;
}
.av2-footer-col a {
    display: block;
    color: var(--av2-text-mid);
    text-decoration: none;
    font-size: 13px;
    padding: 4px 0;
    transition: color .15s;
}
.av2-footer-col a:hover { color: var(--wave); }
.av2-footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, .04);
    padding-top: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}
.av2-footer-copy { font-size: 11px; color: var(--av2-text-dim); }
.av2-footer-social { display: flex; gap: 8px; }
.av2-footer-social-ico {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: rgba(255, 255, 255, .06);
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: background .15s;
    color: var(--av2-text-mid);
    text-decoration: none;
}
.av2-footer-social-ico:hover { background: var(--av2-accent-soft); color: var(--wave); }
.av2-footer-social-ico svg { width: 14px; height: 14px; fill: currentColor; }

/* ══════ DESKTOP ══════ */
@media (min-width: 768px) {
    :root { --nav-h: 56px; }
    .av2-burger { display: none; }
    .av2-nav-right { display: none; }
    .av2-mmenu { display: none !important; }

    /* Full-bleed background + contained content:
       The v2 containers (nav-inner, ctx-scroll, av2-page,
       footer-inner) all share --av2-content-max so they stay
       perfectly aligned at every viewport. Only the fades need a
       bespoke position because they must track the content edge,
       not the viewport edge. */
    /* Fade overlays sit at the edges of the CENTERED content column,
       not the viewport edges. `calc(50% - content-max/2)` resolves
       to the horizontal gap between the viewport edge and the
       content column; max(0, ...) clamps to 0 on narrower viewports. */
    .av2-ctx-fade-l {
        left: max(0px, calc(50% - var(--av2-content-max) / 2));
    }
    .av2-ctx-fade-r {
        right: max(0px, calc(50% - var(--av2-content-max) / 2));
    }
    .av2-desktop-links {
        display: flex;
        align-items: center;
        gap: 4px;
        list-style: none;
        margin: 0;
        padding: 0;
    }
    .av2-desktop-links > li { position: relative; }
    .av2-desktop-links > li > a,
    .av2-desktop-links > li > button {
        font-family: 'Outfit', sans-serif;
        font-size: 13px;
        font-weight: 500;
        color: var(--av2-text-mid);
        text-decoration: none;
        padding: 7px 14px;
        border-radius: 9px;
        border: none;
        background: none;
        cursor: pointer;
        transition: all .2s;
        display: flex;
        align-items: center;
        gap: 5px;
    }
    .av2-desktop-links > li > a:hover,
    .av2-desktop-links > li > button:hover {
        color: var(--av2-white);
        background: rgba(255, 255, 255, .06);
    }
    .av2-desktop-links > li > a.on { color: var(--av2-white); }
    /* Compact pill variant of the primary button used in the top
       nav. Inherits colour/shadow/hover from the canonical system,
       only shrinks padding to fit the 56px nav bar. */
    .av2-desktop-links .av2-ncta {
        background: linear-gradient(135deg, var(--sky), var(--sky-light)) !important;
        color: var(--av2-white) !important;
        font-weight: 700 !important;
        padding: 8px 18px !important;
        border-radius: 999px !important;
        box-shadow: 0 4px 14px rgba(42, 143, 189, .35);
        transition: box-shadow .25s, transform .2s;
    }
    .av2-desktop-links .av2-ncta:hover {
        box-shadow: 0 8px 22px rgba(42, 143, 189, .45);
        transform: translateY(-1px);
    }
    .av2-desktop-links .av2-lang-dd .av2-lang-current {
        background: transparent;
        padding: 7px 10px;
    }
    .av2-desktop-links .av2-lang-dd .av2-lang-current:hover {
        background: rgba(255, 255, 255, .06);
    }
    .av2-mega {
        position: absolute;
        top: calc(100% + 10px);
        left: 50%;
        transform: translateX(-50%);
        background: var(--ocean-dark);
        border: 1px solid rgba(126, 200, 227, .08);
        border-radius: 18px;
        padding: 16px;
        min-width: 520px;
        display: none;
        box-shadow: 0 20px 60px rgba(0, 0, 0, .45);
    }
    /* Invisible bridge that covers the 10px gap between the trigger <li>
       and the mega menu, preventing the hover from dropping when the
       mouse crosses the gap. Only active when the mega is visible. */
    .av2-mega::before {
        content: '';
        position: absolute;
        top: -12px;
        left: 0;
        right: 0;
        height: 12px;
        background: transparent;
    }
    .av2-desktop-links > li:hover .av2-mega { display: block; }
    .av2-mgrid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 6px;
    }
    .av2-md {
        padding: 12px 14px;
        border-radius: 12px;
        transition: background .15s;
    }
    .av2-md:hover { background: rgba(255, 255, 255, .04); }
    .av2-md-top {
        display: flex;
        align-items: center;
        gap: 9px;
        margin-bottom: 8px;
    }
    .av2-md-ico {
        width: 34px;
        height: 34px;
        border-radius: 9px;
        display: grid;
        place-items: center;
        font-size: 15px;
    }
    .av2-md-name a {
        color: var(--av2-white);
        font-weight: 600;
        font-size: 13px;
        text-decoration: none;
    }
    .av2-md-count { font-size: 10px; color: var(--av2-text-dim); }
    .av2-md-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
    }
    .av2-md-tags a {
        font-size: 11px;
        color: var(--av2-text-dim);
        text-decoration: none;
        padding: 3px 9px;
        border-radius: 7px;
        background: rgba(255, 255, 255, .04);
        border: 1px solid transparent;
        transition: all .15s;
    }
    .av2-md-tags a:hover {
        color: var(--wave);
        background: var(--av2-accent-soft);
        border-color: rgba(126, 200, 227, .12);
    }
    .av2-site-footer { padding-top: 48px; padding-bottom: 48px; }
    .av2-footer-grid {
        grid-template-columns: 1fr 1fr 1fr 1fr;
        gap: 24px;
    }
}
@media (min-width: 1024px) {
    .av2-mega { min-width: 600px; }
}

/* ============================================================
   V7 BODY LAYOUT
   Sections meant to compose the main content of non-home pages.
   All prefixed with `av2-` so they never collide with the legacy
   style.css rules used by pages that haven't been migrated yet.
   ============================================================ */

/* Page wrapper — every migrated body-main.php opens a <div class="av2-page">
   at the top. Uses the canonical width tokens so the body always
   aligns with the nav and context bar above it, at any viewport. */
.av2-page {
    max-width: var(--av2-content-max);
    margin: 0 auto;
    padding-top: 32px;
    padding-bottom: 120px; /* 120px bottom leaves room for the sticky CTA */
    padding-left: var(--av2-content-pad-x);
    padding-right: var(--av2-content-pad-x);
    width: 100%;
    font-family: 'Outfit', sans-serif;
    color: #2d3a45;
    -webkit-font-smoothing: antialiased;
}

/* Generic section wrapper. Inside .av2-page sections already inherit the
   max-width from the parent, but defining it here keeps stand-alone use
   (outside .av2-page) working too. */
.av2-section {
    margin-bottom: 28px;
}
.av2-section:last-child {
    margin-bottom: 0;
}
.av2-section-header {
    margin-bottom: 16px;
}
.av2-section-kicker {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--sky);
    margin-bottom: 8px;
}
.av2-section-title {
    font-family: 'Playfair Display', serif;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--ocean-dark);
    line-height: 1.25;
    margin: 0 0 8px;
}
.av2-section-subtitle {
    font-size: 1rem;
    color: #546b7a;
    line-height: 1.6;
    margin: 0;
}

/* ── Intro / SEO text ───────────────────────────── */
.av2-intro-text {
    font-size: 1rem;
    line-height: 1.75;
    color: #3d4f5c;
}
.av2-intro-text p {
    margin: 0 0 12px;
}
.av2-intro-text p:last-child {
    margin-bottom: 0;
}

/* ── Cards grid ─────────────────────────────────── */
.av2-cards-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: 1fr 1fr; /* mobile default: 2 columns */
}
.av2-card {
    display: block;
    background: var(--av2-white);
    border-radius: 14px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 2px 12px rgba(10, 53, 83, .06);
    border: 1px solid rgba(10, 53, 83, .06);
    transition: transform .25s cubic-bezier(.4,0,.2,1), box-shadow .25s;
}
.av2-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(10, 53, 83, .12);
}
.av2-card-img {
    position: relative;
    height: 190px;
    background: var(--white, #fff);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 15px;
}
.av2-card-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
.av2-card-icon {
    font-size: 2.4rem;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,.15));
}
.av2-card-label {
    font-family: 'Playfair Display', serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--av2-white);
    text-shadow: 0 2px 8px rgba(0,0,0,.25);
    letter-spacing: -.3px;
    padding: 0 12px;
    text-align: center;
}
.av2-card-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(0, 0, 0, .45);
    backdrop-filter: blur(6px);
    color: var(--av2-white);
    font-size: 11px;
    font-weight: 600;
    padding: 5px 10px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: .5px;
}
.av2-card-body {
    padding: 14px 16px 16px;
}
.av2-card-subtitle {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--sky);
    margin-bottom: 4px;
}
.av2-card-title {
    font-family: 'Outfit', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: var(--ocean-dark);
    margin: 0 0 6px;
    line-height: 1.3;
}
.av2-card-text {
    font-size: .85rem;
    color: #65798a;
    line-height: 1.5;
    margin: 0 0 10px;
}
.av2-card-cta {
    display: inline-block;
    font-size: .8rem;
    font-weight: 600;
    color: var(--sky);
    letter-spacing: .2px;
}

/* ── Trust row ──────────────────────────────────── */
.av2-trust {
    background: var(--av2-sand);
    border-radius: 14px;
    padding: 18px 16px;
}
.av2-trust-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
.av2-trust-item {
    display: flex;
    align-items: center;
    gap: 10px;
}
.av2-trust-ico {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--av2-white);
    display: grid;
    place-items: center;
    font-size: 18px;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(10, 53, 83, .06);
}
.av2-trust-label {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}
.av2-trust-label strong {
    font-size: .85rem;
    font-weight: 700;
    color: var(--ocean-dark);
}
.av2-trust-label small {
    font-size: .72rem;
    color: #7a8d9b;
    margin-top: 2px;
}

/* ── FAQ accordion ──────────────────────────────── */
.av2-faq-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.av2-faq-item {
    background: var(--av2-white);
    border: 1px solid rgba(10, 53, 83, .1);
    border-radius: 12px;
    overflow: hidden;
    transition: box-shadow .2s, border-color .2s;
}
.av2-faq-item[open] {
    border-color: var(--sky);
    box-shadow: 0 4px 14px rgba(42, 143, 189, .1);
}
.av2-faq-q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 18px;
    font-weight: 600;
    font-size: .95rem;
    color: var(--ocean-dark);
    cursor: pointer;
    list-style: none;
    user-select: none;
}
.av2-faq-q::-webkit-details-marker { display: none; }
/* FAQ chevron — uses the unified .av2-chev-ico SVG (rendered by av2_chev())
   with its own size and the sky color for contrast inside the white card */
.av2-faq-q .av2-chev-ico {
    width: 14px;
    height: 14px;
    margin-left: 0;
    color: var(--sky);
    opacity: 1;
    flex-shrink: 0;
}
.av2-faq-item[open] .av2-faq-q .av2-chev-ico { transform: rotate(180deg); }
.av2-faq-a {
    padding: 0 18px 18px;
    font-size: .9rem;
    line-height: 1.65;
    color: #546b7a;
}
.av2-faq-a p { margin: 0 0 10px; }
.av2-faq-a p:last-child { margin-bottom: 0; }

/* ── Contact box ────────────────────────────────── */
.av2-contact-box {
    background: var(--ocean-dark);
    color: var(--av2-white);
    border-radius: 16px;
    padding: 26px 22px;
    text-align: center;
}
.av2-contact-box .av2-section-title {
    color: var(--av2-white);
    margin-bottom: 10px;
}
.av2-contact-subtitle {
    color: var(--av2-text-bright);
    font-size: .95rem;
    margin: 0 0 18px;
}
.av2-contact-buttons {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}
.av2-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    border-radius: 11px;
    font-weight: 700;
    font-size: .95rem;
    text-decoration: none;
    transition: transform .2s, box-shadow .2s;
}
.av2-btn:hover { transform: translateY(-2px); }
.av2-btn-wa {
    background: #25d366;
    color: var(--av2-white);
    box-shadow: 0 4px 14px rgba(37, 211, 102, .3);
}
.av2-btn-email {
    background: var(--av2-white);
    color: var(--ocean-dark);
    box-shadow: 0 4px 14px rgba(255, 255, 255, .15);
}
.av2-btn-ico {
    font-size: 1.1rem;
    line-height: 1;
}

/* ── Sticky bottom CTA bar (conversion pages only) ─ */
.av2-sticky-cta {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1040;
    background: var(--ocean-dark);
    border-top: 1px solid rgba(126, 200, 227, .15);
    box-shadow: 0 -10px 30px rgba(0, 0, 0, .25);
    transform: translateY(0);
    transition: transform .35s cubic-bezier(.4, 0, .2, 1);
    will-change: transform;
}
.av2-sticky-cta.hidden {
    transform: translateY(100%);
}
.av2-sticky-cta-inner {
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 12px 16px;
}
.av2-sticky-cta-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.av2-sticky-cta-label {
    color: var(--av2-white);
    font-size: .85rem;
    font-weight: 700;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.av2-sticky-cta-price {
    color: var(--av2-text-bright);
    font-size: .7rem;
    font-weight: 500;
    margin-top: 2px;
}
/* Sticky CTA button — layout tweaks; visual style comes from the
   canonical button system (.av2-btn--primary). */
.av2-sticky-cta-btn {
    flex-shrink: 0;
}
.av2-sticky-cta-arrow {
    display: inline-block;
    transition: transform .25s;
}
.av2-sticky-cta-btn:hover .av2-sticky-cta-arrow { transform: translateX(3px); }

/* Lift the floating contact widget above the sticky CTA on pages
   where both exist, so the chat bubble sits above the booking bar. */
.av2-sticky-cta ~ .contact-widget,
.av2-sticky-cta + .contact-widget,
body:has(.av2-sticky-cta) .contact-widget {
    bottom: 92px !important;
}

/* ============================================================
   V7 BODY — Desktop overrides
   ============================================================ */
@media (min-width: 768px) {
    .av2-page {
        padding-top: 48px;
        padding-bottom: 120px;
        /* padding-left/right come from --av2-content-pad-x */
    }
    .av2-section {
        margin-bottom: 40px;
    }
    .av2-section-title {
        font-size: 2rem;
    }

    /* Cards grid: support 2, 3 and 4 columns */
    .av2-cards-grid {
        gap: 20px;
    }
    .av2-cards-grid--2 { grid-template-columns: 1fr 1fr; }
    .av2-cards-grid--3 { grid-template-columns: 1fr 1fr 1fr; }
    .av2-cards-grid--4 { grid-template-columns: 1fr 1fr 1fr 1fr; }
    .av2-card-img { height: 190px; }

    /* Trust row: 4 columns on desktop */
    .av2-trust { padding: 22px 24px; }
    .av2-trust-row {
        grid-template-columns: repeat(4, 1fr);
        gap: 18px;
    }

    /* Contact box: larger padding */
    .av2-contact-box { padding: 40px; }
    .av2-section-title { }

    /* Sticky CTA: inner constrained to canonical width; full-width backdrop */
    .av2-sticky-cta-inner {
        padding-top: 14px;
        padding-bottom: 14px;
    }
    .av2-sticky-cta-label { font-size: 1rem; }
    .av2-sticky-cta-price { font-size: .8rem; }
}

/* ============================================================
   LEGACY CONTAINER WIDTH OVERRIDE
   Bootstrap's .container uses stepped max-widths (540/720/960/1140/1320).
   Override to our canonical width so pages built on the legacy grid
   (home, category inline content, etc.) line up with the v2 nav,
   context bar, footer and .av2-page at every viewport.
   ============================================================ */
.container,
.container-fluid,
.container-lg,
.container-md,
.container-sm,
.container-xl,
.container-xxl {
    max-width: var(--av2-content-max) !important;
    padding-left: var(--av2-content-pad-x) !important;
    padding-right: var(--av2-content-pad-x) !important;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

/* Sticky CTA inner uses the same horizontal padding so its contents
   align perfectly with the nav / ctx above when the bar is visible. */
.av2-sticky-cta-inner {
    max-width: var(--av2-content-max);
    padding-left: var(--av2-content-pad-x);
    padding-right: var(--av2-content-pad-x);
}

/* ============================================================
   CANONICAL BUTTON SYSTEM
   ----------------------------------------------------------------
   Every CTA on the site derives from .av2-btn. Variants are
   additive modifier classes. Legacy Bootstrap-era classes
   (.btn-accent, .btn-whatsapp, .btn-submit) are explicitly
   aliased so the 160+ existing call sites inherit the new look
   without any markup changes.
   ============================================================ */
.av2-btn,
.btn,
.btn-submit,
.av2-ncta,
.av2-mcta,
.av2-sticky-cta-btn,
.av2-btn-wa,
.av2-btn-email {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 13px 26px !important;   /* !important beats legacy inline padding */
    border-radius: 999px !important; /* pill — signature shape */
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: .92rem;
    line-height: 1.2;
    letter-spacing: .2px;
    text-decoration: none;
    cursor: pointer;
    border: 2px solid transparent;
    transition: transform .2s cubic-bezier(.4, 0, .2, 1),
                box-shadow .25s ease,
                background .2s ease,
                color .2s ease,
                border-color .2s ease;
    white-space: nowrap;
    user-select: none;
    text-align: center;
}
.av2-btn:focus-visible,
.btn:focus-visible,
.btn-submit:focus-visible {
    outline: 3px solid rgba(42, 143, 189, .35);
    outline-offset: 2px;
}
.av2-btn:hover,
.btn:hover,
.btn-submit:hover {
    transform: translateY(-2px);
}
.av2-btn:active,
.btn:active,
.btn-submit:active {
    transform: translateY(0);
}
.av2-btn[disabled],
.btn[disabled],
.btn-submit[disabled],
.av2-btn.is-loading,
.btn-submit.is-loading {
    opacity: .6;
    cursor: not-allowed;
    transform: none !important;
}
.av2-btn .av2-btn-ico,
.btn i,
.btn-submit i,
.btn-submit svg,
.btn i.bi {
    font-size: 1.05em;
    line-height: 1;
    display: inline-block;
}

/* ── Sizes ────────────────────────────────────────── */
.av2-btn--sm {
    padding: 9px 18px !important;
    font-size: .82rem;
    gap: 7px;
}
.av2-btn--lg {
    padding: 16px 34px !important;
    font-size: 1.05rem;
    gap: 12px;
}
/* Nav CTA has its own tight padding override handled in its
   media query block (.av2-desktop-links .av2-ncta). */
.av2-desktop-links .av2-ncta {
    padding: 8px 18px !important;
    font-size: 13px !important;
}
/* Sticky CTA button: compact on mobile, slightly larger on desktop */
.av2-sticky-cta-btn {
    padding: 10px 22px !important;
    font-size: .88rem !important;
}
@media (min-width: 768px) {
    .av2-sticky-cta-btn {
        padding: 13px 26px !important;
        font-size: .95rem !important;
    }
}

.av2-btn--block,
.form-submit .btn-submit {
    display: flex;
    width: 100%;
}

/* ──────────────────────────────────────────────────
   VARIANTS
   Each variant exports its own background/color/shadow.
   Legacy selectors are listed alongside the canonical
   variant so they inherit automatically.
   ────────────────────────────────────────────────── */

/* PRIMARY — sky blue gradient, used for nav "Reserve", sticky CTA,
   form submit. Second-most prominent after the yellow accent. */
.av2-btn--primary,
.av2-ncta,
.av2-mcta,
.av2-sticky-cta-btn,
.btn-submit,
.form-submit .btn-submit {
    background: linear-gradient(135deg, var(--sky), var(--sky-light));
    color: var(--av2-white) !important;
    box-shadow: 0 4px 14px rgba(42, 143, 189, .35);
}
.av2-btn--primary:hover,
.av2-ncta:hover,
.av2-mcta:hover,
.av2-sticky-cta-btn:hover,
.btn-submit:hover,
.form-submit .btn-submit:hover {
    box-shadow: 0 10px 28px rgba(42, 143, 189, .45);
    color: var(--av2-white);
}

/* ACCENT — brand yellow, used as the PRIMARY conversion CTA on
   legacy pages. Kept yellow because it's the brand's most
   recognisable colour and already present on 140+ call sites. */
.av2-btn--accent,
.btn.btn-accent,
.btn-accent {
    background: #feff00;
    color: #0a2540 !important;
    box-shadow: 0 4px 14px rgba(254, 255, 0, .35);
}
.av2-btn--accent:hover,
.btn.btn-accent:hover,
.btn-accent:hover {
    background: #f5f600;
    color: #0a2540;
    box-shadow: 0 10px 28px rgba(254, 255, 0, .5);
}

/* WHATSAPP — brand green #25d366 for quick-contact links. */
.av2-btn--whatsapp,
.btn.btn-whatsapp,
.btn-whatsapp,
.av2-btn-wa {
    background: #25d366;
    color: var(--av2-white) !important;
    box-shadow: 0 4px 14px rgba(37, 211, 102, .3);
}
.av2-btn--whatsapp:hover,
.btn.btn-whatsapp:hover,
.btn-whatsapp:hover,
.av2-btn-wa:hover {
    background: #1ebe57;
    color: var(--av2-white);
    box-shadow: 0 10px 28px rgba(37, 211, 102, .45);
}

/* LIGHT — white button used on dark backgrounds (contact box, etc) */
.av2-btn--light,
.av2-btn-email {
    background: var(--av2-white);
    color: var(--ocean-dark) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .1);
}
.av2-btn--light:hover,
.av2-btn-email:hover {
    background: #f4f9fc;
    color: var(--ocean-dark);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .15);
}

/* GHOST — transparent/outlined, used for secondary CTAs */
.av2-btn--ghost {
    background: transparent;
    color: var(--ocean-dark) !important;
    border-color: rgba(10, 53, 83, .2);
    box-shadow: none;
}
.av2-btn--ghost:hover {
    border-color: var(--sky);
    color: var(--sky) !important;
    background: rgba(42, 143, 189, .05);
}

/* DARK — deep navy, used occasionally as a third-tier CTA */
.av2-btn--dark {
    background: var(--ocean-dark);
    color: var(--av2-white) !important;
    box-shadow: 0 4px 14px rgba(10, 53, 83, .3);
}
.av2-btn--dark:hover {
    background: var(--ocean-deep);
    color: var(--av2-white);
    box-shadow: 0 10px 28px rgba(10, 53, 83, .4);
}

/* Mobile menu CTA keeps its block full-width behaviour */
.av2-mcta { display: flex !important; width: 100%; }

/* ============================================================
   LINK-ARROW CTA (inline link with arrow — used on cards)
   Standardises .service-card-link (legacy) + .av2-card-cta (v2)
   into a single visual.
   ============================================================ */
.av2-link-arrow,
.service-card-link,
.av2-card-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: .88rem;
    color: var(--sky);
    text-decoration: none;
    letter-spacing: .2px;
    transition: gap .2s ease, color .2s ease;
}
.av2-link-arrow::after,
.service-card-link::after,
.av2-card-cta::after {
    content: '→';
    font-size: 1.05em;
    line-height: 1;
    transition: transform .2s ease;
}
.av2-link-arrow:hover,
.service-card-link:hover,
.av2-card-cta:hover,
.av2-card:hover .av2-card-cta,
.service-card:hover .service-card-link {
    color: var(--ocean-dark);
    gap: 10px;
}
.av2-link-arrow:hover::after,
.service-card-link:hover::after,
.av2-card-cta:hover::after,
.av2-card:hover .av2-card-cta::after,
.service-card:hover .service-card-link::after {
    transform: translateX(3px);
}
/* Hide the legacy "<i> arrow-right" icon that used to live inside
   .service-card-link — our ::after pseudo-element now handles it. */
.service-card-link i.bi-arrow-right { display: none; }

/* ============================================================
   UNIFIED CHEVRON ICON (replaces Unicode ▼ everywhere)
   ----------------------------------------------------------------
   A single SVG chevron used by:
     - Desktop nav buttons that open mega-menus (Destinations, Activities)
     - Mobile menu dropdown headers (.av2-dhead)
     - Language switcher current button (.av2-lang-current)
   Inherits color via `currentColor`, rotates 180° when the parent
   is hovered/open, and matches the Outfit typeface weight with a
   calibrated 1.6px stroke.
   ============================================================ */
.av2-chev-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 11px;
    height: 11px;
    margin-left: 6px;
    color: currentColor;
    opacity: .72;
    flex-shrink: 0;
    vertical-align: middle;
    transition: transform .25s cubic-bezier(.4, 0, .2, 1), opacity .2s;
}
.av2-chev-ico svg {
    width: 100%;
    height: 100%;
    display: block;
}
/* Hover brightens the chevron on desktop nav */
.av2-desktop-links > li:hover .av2-chev-ico,
.av2-desktop-links > li > button:hover .av2-chev-ico {
    opacity: 1;
}
/* Rotate when the parent dropdown/mega/mobile-section is open */
.av2-desktop-links > li:hover .av2-chev-ico,
.av2-dhead.open .av2-chev-ico,
.av2-lang-dd.open .av2-chev-ico {
    transform: rotate(180deg);
}

/* Size overrides per context — tiny nav, medium mobile, tiny lang */
.av2-desktop-links > li > button .av2-chev-ico { width: 10px; height: 10px; margin-left: 5px; }
.av2-lang-current .av2-chev-ico { width: 9px; height: 9px; margin-left: 4px; opacity: .6; }
.av2-lang-dd.open .av2-lang-current .av2-chev-ico { opacity: 1; }
.av2-dhead .av2-chev-ico { width: 12px; height: 12px; margin-left: 0; color: var(--av2-text-dim); opacity: 1; }

/* ============================================================
   LEGACY ELEMENT UNIFICATION
   ----------------------------------------------------------------
   Align legacy classes (.section-header, .service-card, .booking-form,
   .form-group, etc.) with the v2 design tokens so the whole site
   feels like one system without rewriting 90+ body-main.php files.
   ============================================================ */

/* ── Section headers (legacy + v2) ────────────────── */
.section-header,
.av2-section-header {
    text-align: center;
    margin-bottom: 36px;
}
.section-header h2,
.av2-section-title {
    font-family: 'Playfair Display', serif !important;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--ocean-dark);
    line-height: 1.22;
    margin: 0 0 10px;
    letter-spacing: -.3px;
}
.section-header p,
.av2-section-subtitle {
    font-family: 'Outfit', sans-serif !important;
    font-size: 1rem;
    color: #546b7a;
    line-height: 1.6;
    max-width: 680px;
    margin: 0 auto;
}
.section-header .accent-line {
    width: 56px;
    height: 3px;
    background: linear-gradient(90deg, var(--sky), var(--wave)) !important;
    border-radius: 999px;
    margin: 14px auto 0;
}
@media (min-width: 768px) {
    .section-header,
    .av2-section-header { margin-bottom: 48px; }
    .section-header h2,
    .av2-section-title { font-size: 2.25rem; }
    .section-header p,
    .av2-section-subtitle { font-size: 1.05rem; }
}

/* Align v2 section headers that are left-aligned inside .av2-page
   (e.g. the intro) while keeping the legacy center alignment. */
.av2-intro .av2-section-title,
.av2-section > .av2-section-title:not(.av2-section-header .av2-section-title) {
    text-align: left;
}

/* ── Services grid (legacy) — responsive columns ────── */
.services-grid {
    display: grid;
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
}
@media (min-width: 640px) {
    .services-grid { grid-template-columns: 1fr 1fr !important; gap: 20px !important; }
}
@media (min-width: 900px) {
    .services-grid { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (min-width: 1200px) {
    .services-grid { grid-template-columns: repeat(4, 1fr) !important; gap: 24px !important; }
}

/* ── Service cards (legacy) — match v2 card look ────── */
.service-card {
    background: var(--av2-white);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(10, 53, 83, .06) !important;
    border: 1px solid rgba(10, 53, 83, .06);
    transition: transform .25s cubic-bezier(.4, 0, .2, 1), box-shadow .25s;
    text-decoration: none;
    display: block;
    color: inherit;
}
.service-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(10, 53, 83, .12) !important;
}
.service-card-body h3 {
    font-family: 'Outfit', sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ocean-dark);
    margin: 0 0 6px;
    line-height: 1.3;
}
.service-card-body p {
    font-family: 'Outfit', sans-serif;
    font-size: .88rem;
    color: #65798a;
    line-height: 1.55;
}
.service-card-link {
    margin-top: 12px;
    color: var(--sky) !important;
}

/* ── Booking form shell (legacy) — softer shadow, v2 radius ── */
.booking-form {
    border-radius: 18px !important;
    box-shadow: 0 10px 40px rgba(10, 53, 83, .1) !important;
    border: 1px solid rgba(10, 53, 83, .06);
    overflow: hidden;
}
.form-header {
    background: linear-gradient(135deg, var(--sky), var(--ocean-deep)) !important;
    padding: 28px 32px !important;
}
.form-header h3 {
    font-family: 'Playfair Display', serif !important;
    font-size: 1.4rem !important;
    font-weight: 700;
    letter-spacing: -.2px;
}
.form-header p {
    font-family: 'Outfit', sans-serif;
    font-size: .92rem !important;
    opacity: .9;
}
.form-header-icon {
    background: rgba(255, 255, 255, .18) !important;
    border-radius: 14px !important;
    backdrop-filter: blur(4px);
}
.form-body {
    font-family: 'Outfit', sans-serif;
    padding: 32px !important;
}
@media (min-width: 768px) {
    .form-body { padding: 40px !important; }
}
.form-section-label {
    font-family: 'Outfit', sans-serif !important;
    color: var(--sky) !important;
    border-bottom-color: rgba(42, 143, 189, .15) !important;
    font-weight: 700 !important;
    letter-spacing: 1.5px !important;
}
.form-group label {
    font-family: 'Outfit', sans-serif !important;
    color: var(--ocean-dark) !important;
    font-weight: 600;
}
.form-group input,
.form-group select,
.form-group textarea {
    font-family: 'Outfit', sans-serif !important;
    font-size: .95rem;
    color: var(--ocean-dark) !important;
    background: #f7fafc !important;
    border: 2px solid rgba(10, 53, 83, .08) !important;
    border-radius: 12px !important;
    padding: 13px 16px !important;
    transition: border-color .2s, background .2s, box-shadow .2s;
}
.form-group input:hover,
.form-group select:hover,
.form-group textarea:hover {
    border-color: rgba(42, 143, 189, .3) !important;
    background: var(--av2-white) !important;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--sky) !important;
    background: var(--av2-white) !important;
    box-shadow: 0 0 0 4px rgba(42, 143, 189, .1);
}

/* ── Page hero (legacy) — softer v2 gradient ─────────── */
.page-hero {
    position: relative;
    padding: 80px 20px 60px;
    text-align: center;
    color: var(--av2-white);
}
.page-hero h1 {
    font-family: 'Playfair Display', serif !important;
    font-size: clamp(2rem, 4.5vw, 3.2rem);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -.5px;
    margin: 0 0 14px;
}
.page-hero p {
    font-family: 'Outfit', sans-serif !important;
    font-size: clamp(1rem, 1.5vw, 1.15rem);
    max-width: 720px;
    margin: 0 auto;
    opacity: .9;
    line-height: 1.55;
}

/* ── Trust signals in legacy hero (hero-trust) ───────── */
.hero-trust {
    font-family: 'Outfit', sans-serif !important;
}

/* ── About CTA section (legacy dark CTA at end of pages) ── */
.about-cta {
    background: linear-gradient(135deg, var(--ocean-dark), var(--ocean-deep)) !important;
    color: var(--av2-white);
    padding: 80px 20px;
    text-align: center;
}
.about-cta h2 {
    font-family: 'Playfair Display', serif !important;
    color: var(--av2-white);
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 700;
    margin: 0 0 14px;
}
.about-cta p {
    font-family: 'Outfit', sans-serif !important;
    color: var(--av2-text-bright);
    font-size: 1.05rem;
    max-width: 720px;
    margin: 0 auto 26px;
    line-height: 1.6;
}

/* ── Legacy .container section backgrounds ─────────── */
/* Alternate section backgrounds use var(--light) / #f5f5f5 in legacy;
   unify to --av2-sand for a warmer, brand-consistent neutral. */
section[style*="background: #f5f5f5"],
section[style*="background: var(--light)"],
.services[style*="background"] {
    background: var(--av2-sand) !important;
}

/* ── Inline legacy CTA link colors ────────────────── */
/* Legacy body-main.php files use inline 'color: var(--primary)' or
   'color: var(--accent)' on various text CTAs. Re-point them to
   the v2 sky colour. */
[style*="color: var(--primary)"],
[style*="color:var(--primary)"] {
    color: var(--sky) !important;
}

/* ============================================================
   CANONICAL LABEL / BADGE / TAB / CHIP SYSTEM
   ----------------------------------------------------------------
   Four atoms, four roles. Every small metadata element on the
   site derives from one of these. Legacy and v2 classes are
   aliased so existing usages inherit the new look for free.

   1. .av2-label   — uppercase meta text (kickers, categories)
   2. .av2-badge   — visible pill for status ("Soon", "8 exp.")
   3. .av2-tab     — text tab with underline-on-active
   4. .av2-chip    — interactive rounded tag / filter
   ============================================================ */

/* ─── 1. LABELS ───────────────────────────────────── */
/* Tiny uppercase meta text that sits ABOVE a title or in the
   corner of a card. Not interactive. */
.av2-label,
.av2-section-kicker,
.av2-card-subtitle,
.form-section-label,
.av2-md-count {
    display: inline-block;
    font-family: 'Outfit', sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    color: var(--sky) !important;
    line-height: 1.4;
    margin: 0;
}
/* Dim variant (darker contexts: mobile menu, mega menu count) */
.av2-label--dim,
.av2-mlabel,
.av2-md-count {
    color: var(--av2-text-dim) !important;
    font-weight: 700 !important;
    letter-spacing: 2px !important;
}
/* Form section label has its own border-bottom divider role */
.form-section-label {
    display: block !important;
    border-bottom: 2px solid rgba(42, 143, 189, .15) !important;
    padding-bottom: 8px !important;
    margin-bottom: 16px !important;
}
/* Mobile menu section label keeps its spacing */
.av2-mlabel {
    display: block;
    padding: 0 4px;
    margin-bottom: 10px;
    margin-top: 20px;
}
.av2-mlabel:first-child { margin-top: 0; }

/* ─── 2. BADGES ───────────────────────────────────── */
/* Small pill with a visible background. Used for status
   indicators like "Coming soon", "64 yachts", "New", etc. */
.av2-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 11px;
    border-radius: 999px;
    font-family: 'Outfit', sans-serif;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: .5px;
    white-space: nowrap;
    border: 1px solid transparent;
}
/* Variants */
.av2-badge--soft {
    background: rgba(42, 143, 189, .12);
    color: var(--sky);
}
.av2-badge--solid {
    background: var(--sky);
    color: var(--av2-white);
}
.av2-badge--success {
    background: rgba(37, 211, 102, .15);
    color: #15803d;
}
.av2-badge--warn {
    background: rgba(254, 255, 0, .25);
    color: #7a6c00;
    border-color: rgba(254, 255, 0, .5);
}
.av2-badge--dark {
    background: var(--ocean-dark);
    color: var(--av2-white);
}
.av2-badge--accent {
    background: #feff00;
    color: #0a2540;
    box-shadow: 0 2px 6px rgba(254, 255, 0, .3);
}

/* Dark-glass variant used over images (card badges)
   Keeps existing .av2-card-badge class working, just
   standardises to pill 999px + consistent sizing. */
.av2-badge--glass,
.av2-card-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgba(0, 0, 0, .48) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: var(--av2-white) !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    padding: 5px 11px !important;
    border-radius: 999px !important;
    text-transform: uppercase !important;
    letter-spacing: .5px !important;
    border: 1px solid rgba(255, 255, 255, .15);
}

/* Override legacy inline badges used in yacht-charters & waverunner
   body-main.php (hardcoded square pills with primary color bg).
   Attribute selectors catch them exactly without touching PHP. */
div[style*="padding: 10px 15px; border-radius: 4px"],
div[style*="padding: 10px 15px;border-radius: 4px"] {
    display: inline-flex !important;
    align-items: center !important;
    padding: 6px 14px !important;
    border-radius: 999px !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: .78rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .5px !important;
    line-height: 1.3 !important;
    margin: 6px 0 !important;
    /* background stays whatever the inline style set, but we
       blend a soft inner shadow so solid colors look softer */
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15);
}
div[style*="padding: 10px 15px; border-radius: 4px"] strong,
div[style*="padding: 10px 15px;border-radius: 4px"] strong {
    font-weight: 700;
}

/* ─── 3. TABS (context bar items) ─────────────── */
/* Horizontal text tabs with an underline on the active one.
   Used exclusively in the location context bar. */
.av2-tab,
.av2-ctx-link {
    display: inline-flex;
    align-items: center;
    position: relative;
    padding: 0 14px;
    font-family: 'Outfit', sans-serif;
    font-size: .85rem;
    font-weight: 500;
    color: var(--av2-text-dim);
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    transition: color .2s;
    letter-spacing: .1px;
}
.av2-tab:hover,
.av2-ctx-link:hover {
    color: var(--av2-text-bright);
}
.av2-tab.on,
.av2-ctx-link.on {
    color: var(--av2-white);
    font-weight: 700;
}

/* ─── 4. CHIPS ────────────────────────────────── */
/* Interactive rounded tag. Used for filters, mega-menu tags,
   and the mobile menu "popular services" shortcut grid. */
.av2-chip,
.av2-md-tags a {
    display: inline-flex !important;
    align-items: center;
    gap: 5px;
    padding: 6px 12px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, .05) !important;
    color: var(--av2-text-dim) !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    border: 1px solid transparent !important;
    transition: all .15s;
    white-space: nowrap;
    line-height: 1.3;
}
.av2-chip:hover,
.av2-md-tags a:hover {
    background: var(--av2-accent-soft) !important;
    color: var(--wave) !important;
    border-color: rgba(126, 200, 227, .2) !important;
}
.av2-chip.on {
    background: var(--sky) !important;
    color: var(--av2-white) !important;
}

/* Large chip — mobile menu service shortcut grid */
.av2-chip--lg,
.av2-svc-chip {
    padding: 11px 14px !important;
    font-size: 13px !important;
    color: var(--av2-text-mid) !important;
}

/* ─── Hero trust chips (legacy .hero-trust span) ─── */
/* Small soft chips shown in the legacy hero below the CTA row.
   Give them a consistent pill look that matches .av2-chip. */
.hero-trust span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
    color: rgba(255, 255, 255, .9);
    font-family: 'Outfit', sans-serif !important;
    font-size: .82rem;
    font-weight: 500;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, .12);
}
.hero-trust {
    gap: 10px !important;
    flex-wrap: wrap;
}

/* ============================================================
   FLEET SELECTOR — Premium yacht size category cards
   Used on /cancun/cancun-yacht-charters/ for the 3 size groups.
   Full-width 3-column layout with image background, gradient
   overlay, and pricing info. No 4th-column gap.
   ============================================================ */
.av2-fleet,
.av2-events {
    max-width: var(--av2-content-max);
    margin: 0 auto;
    padding: 48px var(--av2-content-pad-x);
}
.av2-fleet__header,
.av2-events__header {
    text-align: center;
    margin-bottom: 36px;
}
.av2-fleet__title {
    font-family: 'Playfair Display', serif;
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    font-weight: 700;
    color: var(--ocean-dark);
    margin: 0 0 10px;
}
.av2-fleet__subtitle {
    font-family: 'Outfit', sans-serif;
    font-size: 1rem;
    color: #546b7a;
    line-height: 1.6;
    max-width: 680px;
    margin: 0 auto;
}

/* ── Fleet grid: exactly 3 columns, no more, no less ── */
.av2-fleet__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}
@media (min-width: 640px) {
    .av2-fleet__grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 960px) {
    .av2-fleet__grid { grid-template-columns: 1fr 1fr 1fr; }
}

/* ── Fleet card ── */
.av2-fleet__card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 420px;
    border-radius: 20px;
    overflow: hidden;
    text-decoration: none;
    color: var(--av2-white);
    transition: transform .3s cubic-bezier(.4, 0, .2, 1), box-shadow .3s;
}
.av2-fleet__card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 50px rgba(10, 53, 83, .25);
}
.av2-fleet__card-img {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.av2-fleet__card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s cubic-bezier(.4, 0, .2, 1);
}
.av2-fleet__card:hover .av2-fleet__card-img img {
    transform: scale(1.06);
}
.av2-fleet__card-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
        to top,
        rgba(7, 41, 64, .92) 0%,
        rgba(7, 41, 64, .65) 40%,
        rgba(7, 41, 64, .15) 70%,
        rgba(7, 41, 64, .05) 100%
    );
}
.av2-fleet__card-content {
    position: relative;
    z-index: 2;
    padding: 28px 24px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.av2-fleet__card-count {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--wave);
}
.av2-fleet__card-name {
    font-family: 'Playfair Display', serif;
    font-size: 1.8rem;
    font-weight: 700;
    margin: 0;
    line-height: 1.15;
    letter-spacing: -.3px;
}
.av2-fleet__card-desc {
    font-size: .88rem;
    color: rgba(255, 255, 255, .75);
    line-height: 1.5;
    margin: 4px 0 8px;
}
.av2-fleet__card-price {
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex-wrap: wrap;
    margin: 4px 0 10px;
}
.av2-fleet__card-from {
    font-size: .78rem;
    font-weight: 600;
    color: rgba(255, 255, 255, .6);
    text-transform: uppercase;
    letter-spacing: .5px;
}
.av2-fleet__card-amount {
    font-family: 'Playfair Display', serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--av2-white);
}
.av2-fleet__card-unit {
    font-size: .82rem;
    color: rgba(255, 255, 255, .55);
}
.av2-fleet__card-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .88rem;
    font-weight: 700;
    color: var(--wave);
    transition: gap .2s;
}
.av2-fleet__card:hover .av2-fleet__card-cta {
    gap: 12px;
    color: var(--av2-white);
}

/* ── Featured card (Most Popular) ── */
.av2-fleet__card--featured {
    border: 2px solid var(--wave);
    box-shadow: 0 0 0 4px rgba(126, 200, 227, .15);
}
.av2-fleet__card--featured:hover {
    box-shadow: 0 20px 50px rgba(42, 143, 189, .3), 0 0 0 4px rgba(126, 200, 227, .2);
}
.av2-fleet__card-badge {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 3;
    background: var(--wave);
    color: var(--ocean-dark);
    font-family: 'Outfit', sans-serif;
    font-size: .72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    padding: 6px 14px;
    border-radius: 999px;
}

/* ── Events grid ── */
.av2-events__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}
@media (min-width: 640px) {
    .av2-events__grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 960px) {
    .av2-events__grid { grid-template-columns: 1fr 1fr 1fr 1fr; }
}
.av2-events__item {
    background: var(--av2-white);
    border: 1px solid rgba(10, 53, 83, .08);
    border-radius: 16px;
    padding: 24px;
    transition: transform .25s, box-shadow .25s;
}
.av2-events__item:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(10, 53, 83, .08);
}
.av2-events__icon {
    font-size: 2rem;
    margin-bottom: 12px;
    line-height: 1;
}
.av2-events__name {
    font-family: 'Outfit', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: var(--ocean-dark);
    margin: 0 0 8px;
}
.av2-events__desc {
    font-family: 'Outfit', sans-serif;
    font-size: .85rem;
    color: #65798a;
    line-height: 1.55;
    margin: 0;
}

/* ============================================================
   ACTIVITY SELECTOR — /cancun/ custom design
   Premium card grid with SVG line-art icons, hover effects,
   and staggered reveal. Distinct from the generic .av2-cards-grid.
   ============================================================ */
.av2-activities {
    margin-bottom: 40px;
}
.av2-activities__header {
    text-align: center;
    margin-bottom: 40px;
}
.av2-activities__kicker {
    display: inline-block;
    font-family: 'Outfit', sans-serif;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    color: var(--sky);
    margin-bottom: 10px;
    position: relative;
}
.av2-activities__kicker::before,
.av2-activities__kicker::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 32px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--sky));
}
.av2-activities__kicker::before { right: calc(100% + 12px); background: linear-gradient(90deg, transparent, var(--sky)); }
.av2-activities__kicker::after  { left: calc(100% + 12px);  background: linear-gradient(270deg, transparent, var(--sky)); }
.av2-activities__title {
    font-family: 'Playfair Display', serif;
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    font-weight: 700;
    color: var(--ocean-dark);
    margin: 0 0 10px;
    letter-spacing: -.3px;
}
.av2-activities__subtitle {
    font-family: 'Outfit', sans-serif;
    font-size: .95rem;
    color: #65798a;
    max-width: 520px;
    margin: 0 auto;
    line-height: 1.55;
}

/* ── Activity grid: 2-col mobile → 4-col desktop ── */
.av2-activities__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
@media (min-width: 640px) {
    .av2-activities__grid { gap: 18px; }
}
@media (min-width: 768px) {
    .av2-activities__grid { grid-template-columns: repeat(3, 1fr); gap: 20px; }
}
@media (min-width: 1024px) {
    .av2-activities__grid { grid-template-columns: repeat(4, 1fr); gap: 22px; }
}

/* ── Activity card ── */
.av2-act-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    text-decoration: none;
    color: inherit;
    background: var(--av2-white);
    border: 1px solid rgba(10, 53, 83, .06);
    border-radius: 18px;
    padding: 28px 18px 22px;
    transition: transform .3s cubic-bezier(.22, 1, .36, 1),
                box-shadow .3s cubic-bezier(.22, 1, .36, 1),
                border-color .3s;
    position: relative;
    overflow: hidden;
}
.av2-act-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--sky), var(--wave));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s cubic-bezier(.22, 1, .36, 1);
}
.av2-act-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 48px rgba(10, 53, 83, .12);
    border-color: rgba(42, 143, 189, .2);
}
.av2-act-card:hover::before {
    transform: scaleX(1);
}

/* ── Icon container ── */
.av2-act-card__icon {
    width: 72px;
    height: 72px;
    margin-bottom: 16px;
    color: var(--sky);
    transition: transform .35s cubic-bezier(.22, 1, .36, 1), color .3s;
}
.av2-act-card:hover .av2-act-card__icon {
    transform: translateY(-4px) scale(1.06);
    color: var(--ocean);
}
.av2-act-card__icon svg {
    width: 100%;
    height: 100%;
}

/* ── Card body ── */
.av2-act-card__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.av2-act-card__name {
    font-family: 'Outfit', sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ocean-dark);
    margin: 0;
    line-height: 1.25;
}
.av2-act-card__desc {
    font-family: 'Outfit', sans-serif;
    font-size: .82rem;
    color: #6a8094;
    line-height: 1.5;
    margin: 0;
    max-width: 240px;
}
.av2-act-card__badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(42, 143, 189, .08);
    color: var(--sky);
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* ── CTA link ── */
.av2-act-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 14px;
    font-family: 'Outfit', sans-serif;
    font-size: .82rem;
    font-weight: 700;
    color: var(--sky);
    transition: gap .2s, color .2s;
}
.av2-act-card__cta::after {
    content: '→';
    transition: transform .2s;
}
.av2-act-card:hover .av2-act-card__cta {
    color: var(--ocean);
    gap: 10px;
}
.av2-act-card:hover .av2-act-card__cta::after {
    transform: translateX(3px);
}

/* ============================================================
   HERO TEMPLATES — "Coastal Luxury" aesthetic
   ----------------------------------------------------------------
   Direction: refined nautical luxury — Condé Nast Traveler meets
   Airbnb Luxe. Film grain texture, staggered reveal animations,
   glassmorphism on chips, Playfair Display italic subtitles.
   ----------------------------------------------------------------
   .av2-hero           — shared base (position, z-index, font)
   .av2-hero--showcase — home (100vh, video, dual CTA)
   .av2-hero--destination — locations/hubs (60-70vh, image, dual CTA)
   .av2-hero--category — L2/L3 (42-48vh, breadcrumb, left-aligned)
   .av2-hero--product  — L4 yacht (split layout, price card)
   .av2-hero--content  — blog/about (blurred image, editorial)
   .av2-hero--utility  — legal/404/thank-you (flat dark, minimal)
   ============================================================ */

/* ── Staggered reveal keyframes ─────────────────── */
@keyframes av2HeroFadeUp {
    from { opacity: 0; transform: translateY(22px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes av2HeroFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes av2HeroSlideRight {
    from { opacity: 0; transform: translateX(-16px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes av2Shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ── Shared base ──────────────────────────────── */
.av2-hero {
    position: relative;
    width: 100%;
    overflow: hidden;
    color: var(--av2-white);
    font-family: 'Outfit', sans-serif;
}
/* Film grain overlay — subtle photographic texture on all image-bg heros */
.av2-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    opacity: .035;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");
    background-repeat: repeat;
    mix-blend-mode: overlay;
}
.av2-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
}
/* ── Staggered animation utility classes ────────── */
.av2-hero .av2-anim-1 { animation: av2HeroFadeUp .6s cubic-bezier(.22,1,.36,1) .1s both; }
.av2-hero .av2-anim-2 { animation: av2HeroFadeUp .6s cubic-bezier(.22,1,.36,1) .2s both; }
.av2-hero .av2-anim-3 { animation: av2HeroFadeUp .6s cubic-bezier(.22,1,.36,1) .3s both; }
.av2-hero .av2-anim-4 { animation: av2HeroFadeUp .6s cubic-bezier(.22,1,.36,1) .4s both; }
.av2-hero .av2-anim-5 { animation: av2HeroFadeUp .6s cubic-bezier(.22,1,.36,1) .5s both; }
.av2-hero .av2-anim-6 { animation: av2HeroFadeUp .6s cubic-bezier(.22,1,.36,1) .6s both; }
.av2-hero .av2-anim-slide { animation: av2HeroSlideRight .5s cubic-bezier(.22,1,.36,1) .15s both; }

.av2-hero__content,
.av2-hero__inner {
    position: relative;
    z-index: 2;
    max-width: var(--av2-content-max);
    margin: 0 auto;
    padding-left: var(--av2-content-pad-x);
    padding-right: var(--av2-content-pad-x);
}
.av2-hero__title {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.5px;
    margin: 0 0 14px;
    color: var(--av2-white);
    text-shadow: 0 3px 30px rgba(0, 0, 0, .3);
}
.av2-hero__eyebrow {
    font-family: 'Playfair Display', serif;
    font-size: 1rem;
    font-weight: 400;
    font-style: italic;
    color: var(--wave-light);
    margin: 0 0 14px;
    letter-spacing: .5px;
}
.av2-hero__kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, .08);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, .18);
    padding: 8px 18px;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 20px;
    color: var(--av2-white);
    box-shadow: 0 4px 24px rgba(0, 0, 0, .15);
}
.av2-hero__subtitle {
    font-size: 1.05rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, .88);
    max-width: 680px;
    margin: 0 0 20px;
}
.av2-hero__desc {
    font-size: .95rem;
    line-height: 1.65;
    color: rgba(255, 255, 255, .78);
    max-width: 620px;
    margin: 0 auto 24px;
}
.av2-hero__ctas {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

/* ── Trust chips (shared by showcase + destination) ── */
.av2-hero__trust {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.av2-hero__trust-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 16px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .07);
    color: rgba(255, 255, 255, .92);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .3px;
    backdrop-filter: blur(14px) saturate(1.2);
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
    border: 1px solid rgba(255, 255, 255, .14);
    box-shadow: 0 2px 12px rgba(0, 0, 0, .1), inset 0 1px 0 rgba(255, 255, 255, .08);
    transition: background .25s, transform .25s;
}
.av2-hero__trust-chip:hover {
    background: rgba(255, 255, 255, .14);
    transform: translateY(-1px);
}
.av2-hero__trust-chip i { font-size: .9rem; }

/* ── Breadcrumb (shared by category + product + utility) ── */
.av2-hero__breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    font-size: .82rem;
    margin-bottom: 14px;
}
.av2-hero__breadcrumb a {
    color: rgba(255, 255, 255, .65);
    text-decoration: none;
    transition: color .2s;
}
.av2-hero__breadcrumb a:hover { color: var(--av2-white); }
.av2-hero__breadcrumb-sep { color: rgba(255, 255, 255, .35); font-size: .7rem; }
.av2-hero__breadcrumb-current { color: var(--av2-white); font-weight: 600; }

/* ── Trust badges inline (category hero) ── */
.av2-hero__badges {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}
.av2-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .1);
    font-size: .78rem;
    font-weight: 600;
    color: rgba(255, 255, 255, .85);
}

/* ════════════════════════════════════════════════
   1. SHOWCASE (home — 100vh, video bg)
   ════════════════════════════════════════════════ */
.av2-hero--showcase {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.av2-hero--showcase .av2-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.av2-hero--showcase .av2-hero__video {
    position: absolute;
    top: -5%; left: -2%;
    width: 104%; height: 110%;
    object-fit: cover;
    transform: scale(1.05);
    will-change: transform;
}
.av2-hero--showcase .av2-hero__overlay {
    background: linear-gradient(
        175deg,
        rgba(7, 41, 64, .45) 0%,
        rgba(7, 41, 64, .2) 35%,
        rgba(7, 41, 64, .15) 50%,
        rgba(7, 41, 64, .5) 80%,
        rgba(7, 41, 64, .7) 100%
    );
}
.av2-hero--showcase .av2-hero__title {
    font-size: clamp(2.4rem, 5.5vw, 4rem);
    text-shadow: 0 4px 50px rgba(0, 0, 0, .4);
}
.av2-hero--showcase .av2-hero__subtitle { margin: 0 auto 14px; }
.av2-hero--showcase .av2-hero__desc { margin: 0 auto 28px; }
.av2-hero--showcase .av2-hero__ctas { justify-content: center; }
.av2-hero--showcase .av2-hero__trust { justify-content: center; margin-top: 8px; }
.av2-hero--showcase .av2-hero__content { padding-top: 80px; padding-bottom: 80px; }

/* Waves transition */
.av2-hero__waves {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    z-index: 3;
    line-height: 0;
}
.av2-hero__waves svg { width: 100%; height: auto; display: block; }

/* ════════════════════════════════════════════════
   2. DESTINATION (locations/hubs — 60-70vh, image bg)
   ════════════════════════════════════════════════ */
.av2-hero--destination {
    min-height: 55vh;
    display: flex;
    align-items: flex-end;
    text-align: center;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: var(--ocean-dark);
}
.av2-hero--destination .av2-hero__overlay {
    background: linear-gradient(
        to top,
        rgba(7, 41, 64, .85) 0%,
        rgba(7, 41, 64, .5) 30%,
        rgba(7, 41, 64, .12) 55%,
        rgba(7, 41, 64, .25) 80%,
        rgba(7, 41, 64, .45) 100%
    );
}
@media (min-width: 768px) {
    .av2-hero--destination {
        background-attachment: fixed; /* parallax on desktop */
    }
}
.av2-hero--destination .av2-hero__content {
    padding-top: 100px;
    padding-bottom: 48px;
    width: 100%;
}
.av2-hero--destination .av2-hero__title { font-size: clamp(2rem, 4vw, 3.2rem); }
.av2-hero--destination .av2-hero__subtitle { margin: 0 auto 24px; }
.av2-hero--destination .av2-hero__ctas { justify-content: center; }
.av2-hero--destination .av2-hero__trust { justify-content: center; }
@media (min-width: 768px) {
    .av2-hero--destination { min-height: 65vh; }
    .av2-hero--destination .av2-hero__content { padding-bottom: 56px; }
}

/* ════════════════════════════════════════════════
   3. CATEGORY (L2/L3 — 42-48vh, breadcrumb, left-aligned)
   ════════════════════════════════════════════════ */
.av2-hero--category {
    min-height: 280px;
    display: flex;
    align-items: flex-end;
    background-size: cover;
    background-position: center;
    background-color: var(--ocean-dark);
}
.av2-hero--category .av2-hero__overlay {
    background: linear-gradient(
        to top,
        rgba(7, 41, 64, .9) 0%,
        rgba(7, 41, 64, .6) 35%,
        rgba(7, 41, 64, .3) 65%,
        rgba(7, 41, 64, .5) 100%
    );
}
.av2-hero--category .av2-hero__inner {
    padding-top: 90px;
    padding-bottom: 36px;
    width: 100%;
}
.av2-hero--category .av2-hero__title { font-size: clamp(1.6rem, 3.2vw, 2.6rem); }
@media (min-width: 768px) {
    .av2-hero--category { min-height: 340px; }
    .av2-hero--category .av2-hero__inner { padding-bottom: 44px; }
}

/* ════════════════════════════════════════════════
   4. PRODUCT (L4 yacht detail — split layout)
   ════════════════════════════════════════════════ */
.av2-hero--product {
    background: linear-gradient(180deg, var(--ocean-dark) 0%, var(--ocean-deep) 100%);
    padding-top: 16px;
    padding-bottom: 24px;
}
.av2-hero--product .av2-hero__split {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.av2-hero--product .av2-hero__media { flex: 1; }
.av2-hero--product .av2-hero__main-img {
    border-radius: 20px;
    overflow: hidden;
    aspect-ratio: 16/10;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .35), 0 4px 12px rgba(0, 0, 0, .2);
    border: 1px solid rgba(255, 255, 255, .08);
}
.av2-hero--product .av2-hero__main-img img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .5s cubic-bezier(.22, 1, .36, 1);
}
.av2-hero--product .av2-hero__main-img:hover img {
    transform: scale(1.04);
}
/* Thumbs removed from hero-product — the interactive gallery
   lives in the body-main.php where the yacht-gallery JS handles it.
   Hero shows a single hero image only. */
.av2-hero--product .av2-hero__info { flex: 1; }
.av2-hero--product .av2-hero__title { font-size: clamp(1.6rem, 3vw, 2.8rem); }

/* Specs micro-grid */
.av2-hero__specs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
}
.av2-hero__spec {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
    font-size: .8rem;
    font-weight: 500;
    color: rgba(255, 255, 255, .85);
}
.av2-hero__spec-icon { font-size: 1rem; }

/* Price card */
/* Price card — glassmorphism with subtle glow */
.av2-hero__price-card {
    background: rgba(255, 255, 255, .06);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, .15), inset 0 1px 0 rgba(255, 255, 255, .1);
}
.av2-hero__price-main {
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex-wrap: wrap;
}
.av2-hero__price-value {
    font-family: 'Playfair Display', serif;
    font-size: 2rem;
    font-weight: 700;
    color: var(--av2-white);
}
.av2-hero__price-unit {
    font-size: .92rem;
    font-weight: 500;
    color: rgba(255, 255, 255, .75);
}
.av2-hero__price-note {
    display: block;
    font-size: .78rem;
    color: rgba(255, 255, 255, .55);
    margin-top: 6px;
}

@media (min-width: 768px) {
    .av2-hero--product { padding-top: 24px; padding-bottom: 36px; }
    .av2-hero--product .av2-hero__split {
        flex-direction: row;
        align-items: flex-start;
    }
    .av2-hero--product .av2-hero__media { flex: 0 0 58%; }
    .av2-hero--product .av2-hero__info { flex: 0 0 38%; }
    .av2-hero--product .av2-hero__thumb { width: 72px; height: 52px; }
}

/* ════════════════════════════════════════════════
   5. CONTENT (blog/about — blurred image, editorial)
   ════════════════════════════════════════════════ */
.av2-hero--content {
    min-height: 260px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-size: cover;
    background-position: center;
    background-color: var(--ocean-dark);
}
.av2-hero--content::before {
    content: '';
    position: absolute;
    inset: 0;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 0;
}
.av2-hero--content .av2-hero__overlay {
    background: rgba(10, 53, 83, .65);
}
.av2-hero--content .av2-hero__content {
    padding-top: 80px;
    padding-bottom: 48px;
}
.av2-hero--content .av2-hero__title { font-size: clamp(1.6rem, 3.5vw, 2.8rem); }

/* Meta row */
.av2-hero__meta {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.av2-hero__meta-item {
    font-size: .8rem;
    font-weight: 500;
    color: rgba(255, 255, 255, .7);
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

/* Share row */
.av2-hero__share {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-top: 16px;
}
.av2-hero__share-btn {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .1);
    color: rgba(255, 255, 255, .8);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    font-size: .95rem;
    text-decoration: none;
    transition: background .2s;
}
.av2-hero__share-btn:hover { background: rgba(255, 255, 255, .2); }

@media (min-width: 768px) {
    .av2-hero--content { min-height: 340px; }
}

/* ════════════════════════════════════════════════
   6. UTILITY (legal/404/thank-you — flat dark, minimal)
   ════════════════════════════════════════════════ */
.av2-hero--utility {
    background: var(--ocean-dark);
    min-height: 180px;
    display: flex;
    align-items: flex-end;
}
.av2-hero--utility .av2-hero__inner {
    padding-top: 80px;
    padding-bottom: 32px;
    width: 100%;
}
.av2-hero--utility .av2-hero__title { font-size: clamp(1.4rem, 2.5vw, 2.2rem); }
.av2-hero--utility .av2-hero__meta-text {
    font-size: .85rem;
    color: rgba(255, 255, 255, .55);
    margin: 0 0 16px;
}
.av2-hero--utility .av2-hero__icon {
    font-size: 3rem;
    margin-bottom: 12px;
    line-height: 1;
}
/* Success variant (thank-you page) */
.av2-hero--success {
    background: linear-gradient(135deg, var(--ocean-dark), var(--sky));
    text-align: center;
}
.av2-hero--success .av2-hero__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
}
@media (min-width: 768px) {
    .av2-hero--utility .av2-hero__inner { padding-top: 100px; padding-bottom: 40px; }
}