/* ============================================================
   Anorya Voyages — design system
   Implements the "Navigation design variations" handoff bundle
   (Claude Design). Palette: lagoon teal #0d6e78 · sunset orange
   #f2622e · deep ink #123338, on white / warm cream sections.
   Type: Poppins (UI) + Playfair Display (display headings).
   ============================================================ */
:root {
    /* Brand */
    --teal: #0d6e78;
    --teal-dark: #0b5c65;
    --teal-mid: #0f7d84;
    --teal-light: #12908f;
    --orange: #f2622e;
    /* Every button on the site is this teal and wipes to white on hover — the
       accent orange below is still used for eyebrows, badges and card kickers. */
    --btn: #2f898e;
    --btn-deep: #247176;
    --orange-dark: #e0561f;
    --orange-deep: #c9491f;
    --amber: #f59b3c;
    --amber-star: #f2a03c;
    --sand: #ffd9a8;

    /* Text */
    --ink: #123338;
    --ink-2: #33454a;
    --body: #5a6b6b;
    --body-2: #4a5b5b;
    --meta: #8a9595;
    --faint: #9aa5a5;
    --nav-ink: #33443f;
    --on-dark: #eef6f6;
    --on-dark-2: #d6ecec;
    --on-dark-3: #bcd2d2;

    /* Surfaces */
    --white: #ffffff;
    --grey-50: #f4f5f5;
    --cream: #f8f6ef;
    --cream-warm: #fdf6e9;
    --mint: #e6efec;
    --faq-bg: #f2f4f4;
    --dark: #0e2f34;
    --footer-dark: #0b2a2f;

    /* Lines */
    --line: #eef0f0;
    --line-2: #dfe6e5;
    --line-3: #e3e6e6;
    --line-4: #e7e9e6;
    --line-warm: #e6e2d8;
    --line-warm-2: #e4dcc8;
    --line-cool: #dfe2e2;

    /* Radii */
    --r-sm: 10px;
    --r-md: 12px;
    --r-lg: 18px;
    --r-xl: 22px;
    --r-2xl: 24px;

    /* Shadows */
    --sh-card: 0 14px 34px -22px rgba(20,40,40,.4);
    --sh-card-h: 0 24px 44px -22px rgba(20,40,40,.5);
    --sh-grid: 0 14px 34px -24px rgba(20,40,40,.5);
    --sh-grid-h: 0 26px 46px -26px rgba(20,40,40,.55);
    --sh-panel: 0 20px 50px -30px rgba(20,40,40,.4);
    --sh-deck: 0 34px 80px -36px rgba(20,40,40,.6);

    --green: #25D366;
    --green-700: #128C7E;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; background: #fff; }
body {
    font-family: 'Poppins', system-ui, -apple-system, sans-serif;
    color: var(--ink);
    background: #fff;
    -webkit-font-smoothing: antialiased;
    line-height: 1.55;
    overflow-x: hidden;
}
a { text-decoration: none; color: var(--teal); }
a:hover { color: var(--teal-dark); }
img { max-width: 100%; display: block; }
button, input, select, textarea { font-family: inherit; }
h1, h2, h3, h4 { color: var(--ink); }
.serif { font-family: 'Playfair Display', serif; }
/* Decorative loops are paused while they are off screen (see initAmbientMotion).
   A hero that keeps zooming after you have scrolled past it repaints every frame
   and buys nothing — and several of them together are what make a real animation
   further down the page drop frames. */
.anim-idle,
.anim-idle::before,
.anim-idle::after { animation-play-state: paused !important; }

.visually-hidden {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
a:focus, a:focus-visible, button:focus, button:focus-visible,
input:focus, input:focus-visible, select:focus, select:focus-visible,
textarea:focus, textarea:focus-visible, [tabindex]:focus, [tabindex]:focus-visible { outline: none; }

/* ============ Animations ============ */
@keyframes an-shimmer { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }
@keyframes an-rise { 0% { opacity: 0; transform: translateY(26px); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes an-kenburns { 0% { transform: scale(1); } 100% { transform: scale(1.12); } }
@keyframes an-bob { 0%, 100% { transform: translateY(0); opacity: .9; } 50% { transform: translateY(8px); opacity: .5; } }
@keyframes an-sun { 0%, 100% { opacity: .55; transform: scale(1); } 50% { opacity: .8; transform: scale(1.08); } }
@keyframes an-skeleton { to { background-position: -200% 0; } }
.an-stagger { opacity: 0; animation: an-rise .8s ease forwards; }

/* ============ Containers ============ */
.an-wrap { max-width: 1200px; margin: 0 auto; padding: 0 40px; }
.an-wrap-nav { max-width: 1280px; margin: 0 auto; padding: 22px 32px 0; position: relative; }
.an-wrap-narrow { max-width: 1160px; margin: 0 auto; padding: 0 40px; }
.an-wrap-faq { max-width: 920px; margin: 0 auto; padding: 0 40px; }
.an-wrap-mom { max-width: 940px; margin: 0 auto; padding: 0 40px; }
.an-wrap-article { max-width: 880px; margin: 0 auto; padding: 0 40px; }

/* Horizontal scroll rows */
/* No side padding: mandatory snapping pulls the first card flush with the
   scrollport's left edge anyway, so a left padding does nothing while the
   right one survives — which left the row 4px short on the right and made the
   two ‹ › buttons sit differently against the cards. */
/* A row is a viewport with a single track inside it. The track carries every
   card, so one transform moves the whole row and the spacing between cards can
   never change mid-slide. The cards are put into the track by initRows, which
   keeps the markup a plain list. */
.row-scroll {
    display: block; overflow: hidden; padding: 6px 0;
    scrollbar-width: none; -ms-overflow-style: none;
}
.row-scroll::-webkit-scrollbar { width: 0; height: 0; display: none; }
.row-track {
    display: flex; align-items: stretch; gap: 24px;
    will-change: transform; touch-action: pan-y;
}
/* Before initRows runs — and if scripting is off — the row still lays out and
   scrolls natively rather than showing a single card. */
.row-scroll:not([data-row-ready]) { display: flex; align-items: stretch; gap: 24px; overflow-x: auto; }

/* ============ Card photo sets ============
   Every photo of a card sits stacked in the same box and only opacity changes,
   so switching between them cannot move or resize the card, and the next photo
   is already decoded when it is called for. */
.card-shots { position: relative; }
.card-shots > .shot {
    position: absolute; inset: 0;
    width: 100%; height: 100%; object-fit: cover;
    /* !important because the site-wide lazy fade-in also targets images inside
       .an-media and would otherwise leave every photo in the stack visible. */
    opacity: 0 !important; transition: opacity 520ms ease;
}
.card-shots > .shot.on { opacity: 1 !important; }
/* The first frame is the one that holds the box open before the rest load. */
.card-shots > .shot:first-child { position: relative; }

/* Media placeholders (skeleton while photos load) */
.an-media {
    position: relative; overflow: hidden; display: block;
    background: linear-gradient(110deg, #eceff0 8%, #f7f9f9 18%, #eceff0 33%);
    background-size: 200% 100%; animation: an-skeleton 1.4s linear infinite;
}
.an-media.loaded { animation: none; background: #eceff0; }
.an-media > img { width: 100%; height: 100%; object-fit: cover; }
img.lazy-fade { opacity: 0; transition: opacity .45s ease; }
img.lazy-fade.img-loaded { opacity: 1; }
/* Cards never move on hover — only the photo inside them zooms. */
.an-zoom > img { transition: transform .6s ease; }
.trend-card:hover .an-zoom > img,
.act-card:hover .an-zoom > img,
.pkg-card:hover .an-zoom > img,
.pack-card:hover .an-zoom > img,
.blog-card:hover .an-zoom > img,
.dest-tile:hover .an-zoom > img,
.destx-card:hover .an-zoom > img { transform: scale(1.06); }

/* ============ Navigation (glass bar inside the page header) ============ */
.an-navshell {
    position: relative; border-radius: 16px; padding: 2px;
    background: linear-gradient(90deg, rgba(255,255,255,.75), rgba(255,255,255,.25));
}
.an-nav {
    display: flex; align-items: center; gap: 32px;
    background: rgba(255,255,255,.5); backdrop-filter: blur(14px);
    padding: 14px 28px; border-radius: 14px;
}
.an-nav .an-logo img { height: 36px; width: auto; }
.nav-links { display: flex; align-items: center; gap: 8px; margin-left: 8px; }
.nav-links a {
    font-size: 15px; font-weight: 500; color: var(--nav-ink);
    padding: 8px 15px; border-radius: 999px; background: transparent;
    transition: background .25s, color .25s, transform .25s; white-space: nowrap;
}
.nav-links a:hover { background: rgba(242,98,46,.16); color: var(--orange-deep); }
.nav-links a.active { background: rgba(13,110,120,.14); color: var(--teal); }
.an-nav-right { margin-left: auto; display: flex; align-items: center; gap: 14px; }
/* Language switcher — flag + code, with a small drop-down */
.an-lang { position: relative; }
.nav-fr {
    display: flex; align-items: center; gap: 6px;
    background: rgba(255,255,255,.75); border: 1px solid rgba(255,255,255,.9);
    border-radius: var(--r-sm); padding: 8px 12px;
    font-size: 14px; font-weight: 600; color: var(--nav-ink); cursor: pointer;
}
.lang-flag { width: 20px; height: 14px; border-radius: 2px; overflow: hidden; display: block; flex-shrink: 0; }
.lang-flag svg { width: 100%; height: 100%; display: block; }
.lang-menu {
    position: absolute; top: calc(100% + 8px); right: 0; min-width: 168px;
    background: #fff; border-radius: var(--r-md); padding: 6px; z-index: 60;
    box-shadow: 0 20px 44px -20px rgba(20,40,40,.55); display: none; flex-direction: column;
}
.lang-menu.open { display: flex; }
.lang-opt {
    display: flex; align-items: center; gap: 10px; width: 100%;
    background: none; border: none; cursor: pointer; text-align: left;
    padding: 10px 12px; border-radius: var(--r-sm);
    font-size: 14px; font-weight: 600; color: var(--ink);
}
.lang-opt:hover { background: var(--grey-50); color: var(--teal); }
.lang-opt.active { background: rgba(13,110,120,.1); color: var(--teal); }
.an-book-btn {
    background: linear-gradient(90deg, #2f898e, #46a8ad, #2f898e); background-size: 200% 100%;
    color: #fff; border: none; border-radius: var(--r-md); padding: 12px 22px;
    font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap;
    box-shadow: 0 8px 20px -8px rgba(47,137,142,.7);
    animation: an-shimmer 3s linear infinite; display: inline-flex; align-items: center; gap: 7px;
    transition: transform .25s;
}
.an-book-btn:hover { color: #fff; }
.nav-burger {
    display: none; width: 44px; height: 44px; align-items: center; justify-content: center;
    background: rgba(255,255,255,.8); border: 1px solid rgba(255,255,255,.9);
    border-radius: var(--r-sm); font-size: 20px; color: var(--teal); cursor: pointer;
}
/* Dropdown menu (mobile) */
.an-menu {
    position: absolute; left: 2px; right: 2px; top: 100%; margin-top: 8px;
    background: #fff; border-radius: 14px; box-shadow: 0 20px 44px -20px rgba(20,40,40,.55);
    padding: 12px; z-index: 50; display: none; flex-direction: column;
}
.an-menu.open { display: flex; }
.an-menu a {
    padding: 13px 16px; border-radius: var(--r-sm);
    font-size: 15px; font-weight: 600; color: var(--ink);
}
.an-menu a:hover { background: var(--grey-50); color: var(--teal); }
.an-menu .nav-fr-mobile {
    margin-top: 8px; background: var(--cream-warm); border: 1px solid var(--line-warm-2);
    border-radius: var(--r-sm); padding: 12px; font-size: 14px; font-weight: 600;
    color: var(--nav-ink); cursor: pointer; text-align: center;
}

/* There is no second nav skin: the light glass bar above is the nav on every
   page, home and inner alike, so the colours and hover never change as you
   move around the site. */

/* ============ HOME HERO ============ */
/* The hero must NOT clip: the mobile menu drops out of the nav and is taller
   than the hero on short screens. Only the moving background is clipped, by
   .an-hero-media below. */
.an-hero { position: relative; min-height: 94vh; }
.an-hero-media { position: absolute; inset: 0; overflow: hidden; }
.an-hero-bg {
    position: absolute; inset: 0;
    background: url('../images/hero-anorya.jpg') center/cover;
    animation: an-kenburns 18s ease-in-out infinite alternate;
}
.an-hero-veil {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(12,40,45,.34), rgba(12,40,45,.42) 55%, rgba(12,40,45,.58));
}
.an-hero-sun {
    position: absolute; top: -120px; left: 50%; transform: translateX(-50%);
    width: 520px; height: 520px; border-radius: 50%;
    background: radial-gradient(circle, rgba(255,196,120,.55), rgba(255,196,120,0) 70%);
    filter: blur(10px); animation: an-sun 7s ease-in-out infinite;
}
.an-hero-body {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    padding: 78px 20px 60px;
}
.an-hero-copy { max-width: 840px; }
.an-hero-badge {
    display: inline-block; font-size: 12px; letter-spacing: .22em; text-transform: uppercase;
    color: #fff; font-weight: 700; background: rgba(201,73,31,.9);
    padding: 6px 14px; border-radius: 999px; animation-delay: .05s;
}
.an-hero h1 {
    font-family: 'Playfair Display', serif; font-size: 68px; line-height: 1.03;
    margin: 22px 0 0; color: #fff; font-weight: 700;
    text-shadow: 0 3px 22px rgba(10,30,34,.5); animation-delay: .18s;
}
.an-hero h1 em { color: var(--sand); font-style: italic; }
/* Egypt flag in the headline — sized in em so it tracks the responsive h1.
   The artwork carries its own rounded corners and transparent margins, so the
   shadow follows the flag shape via a filter rather than the element box. */
.an-flag-eg {
    display: inline-block; width: .68em; height: auto; margin-left: .06em;
    vertical-align: -.1em;
    filter: drop-shadow(0 2px 10px rgba(10,30,34,.5));
}
.an-hero-lead {
    margin: 20px auto 30px; font-size: 18px; color: var(--on-dark); max-width: 540px;
    text-shadow: 0 2px 14px rgba(10,30,34,.55); animation-delay: .32s;
}
.an-hero-ctas { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; animation-delay: .46s; }
.an-btn-teal {
    background: var(--btn); color: #fff; border: none; border-radius: var(--r-md);
    padding: 16px 28px; font-size: 15px; font-weight: 600; cursor: pointer;
    box-shadow: 0 12px 26px -12px rgba(47,137,142,.8);
    display: inline-flex; align-items: center; gap: 8px;
    transition: background .25s, transform .25s, box-shadow .25s;
}
.an-btn-teal:hover {
    color: #fff;
    box-shadow: 0 18px 32px -12px rgba(47,137,142,.9);
}
/* Formerly a translucent white button. White on a photographic hero gave almost
   no contrast against a pale sky, so it now carries the deep brand teal — which
   also makes it a proper secondary next to the primary teal rather than a hole
   punched in the background. */
.an-btn-white {
    background: var(--btn-deep); color: #fff; border: none; border-radius: var(--r-md);
    padding: 16px 28px; font-size: 15px; font-weight: 600; cursor: pointer;
    display: inline-flex; align-items: center; gap: 8px;
    box-shadow: 0 12px 26px -12px rgba(36,113,118,.8);
    transition: background .25s, box-shadow .25s;
}
.an-btn-white:hover { color: #fff; box-shadow: 0 18px 32px -12px rgba(36,113,118,.9); }
.an-hero-rating {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    margin-top: 24px; animation-delay: .6s;
}
.an-hero-rating .stars { color: var(--sand); font-size: 16px; letter-spacing: 2px; }
.an-hero-rating .txt { font-size: 14px; color: var(--on-dark); text-shadow: 0 2px 12px rgba(10,30,34,.6); }
.an-hero-rating .txt strong { color: #fff; }
.an-hero-feats {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 14px;
    margin-top: 44px; animation-delay: .74s;
}
.an-feat {
    display: flex; align-items: center; gap: 10px;
    background: rgba(255,255,255,.55); backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,.6); padding: 12px 18px; border-radius: 999px;
}
.an-feat .ic { font-size: 17px; color: var(--teal); width: 20px; text-align: center; }
.an-feat .tt { font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.1; text-align: left; }
.an-feat .ss { font-size: 12px; color: #4a5f5f; text-align: left; }
.an-scroll-cue {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    margin-top: 46px; animation: an-bob 2.2s ease-in-out infinite;
}
.an-scroll-cue .lbl { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--on-dark); }
.an-scroll-cue .arw { color: #fff; font-size: 20px; }

/* ============ Section scaffolding ============ */
/* Two stacked sections contribute both their paddings to the gap between
   them, so this figure counts double — keep it tight. */
.an-sec { padding: 56px 0; }
.an-sec-grey { background: var(--grey-50); }
.an-sec-white { background: #fff; }
.an-sec-cream { background: var(--cream); }
.an-sec-warm { background: var(--cream-warm); }
.an-sec-mint { background: var(--mint); }

.an-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 26px; }
.an-head .copy { max-width: 560px; }
.an-head.center { display: block; text-align: center; }
.an-head.center .copy { margin: 0 auto; }
.an-eyebrow {
    font-size: 13px; font-weight: 700; letter-spacing: .14em;
    text-transform: uppercase; color: var(--orange); display: block;
}
.an-head h2 { font-size: 44px; font-weight: 800; margin: 10px 0 12px; color: var(--ink); line-height: 1.12; }
.an-head.center h2 { margin-bottom: 0; }
.an-head p { font-size: 16px; color: var(--body); margin: 0; }
/* "All excursions →" — an underlined text link at the foot of the heading
   block, with the carousel arrows moved out to flank the card row. */
.an-head-link {
    align-self: flex-end; display: inline-flex; align-items: center; gap: 10px;
    font-size: 15px; font-weight: 700; color: var(--teal); white-space: nowrap;
    padding-bottom: 6px; border-bottom: 2px solid var(--teal);
    transition: color .2s, border-color .2s, gap .2s;
}
.an-head-link:hover { color: var(--orange); border-color: var(--orange); gap: 14px; }

/* Rows run the full container width so the cards line up with the section
   heading; the ‹ › buttons float over the row edges instead of taking gutters. */
.an-row-flank { position: relative; padding: 0; }
.an-row-arrow {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line);
    background: #fff; color: var(--ink); font-size: 18px; cursor: pointer; z-index: 4;
    display: grid; place-items: center;
    box-shadow: 0 8px 22px -10px rgba(20,40,40,.45);
    transition: background .2s, color .2s, border-color .2s;
}
/* One arrow-width out parks each button wholly in the .an-wrap gutter, so
   both sit against the card edge the same way instead of the left one riding
   over the first card. */
.an-row-arrow.prev { left: -44px; }
.an-row-arrow.next { right: -44px; }
.an-row-arrow:hover { border-color: var(--btn); }
.an-empty { padding: 46px 0; text-align: center; color: var(--body); font-size: 15px; }

/* ============ Button hover wipe ============
   A panel wipes in from the left edge. Because that panel carries its own copy
   of the label in the contrasting colour, each letter flips colour exactly as
   the wiping edge crosses it — a single layer could only fade the whole label
   at once, which is the point of the effect.

   The two layers are built at runtime by initButtonWipe() in controls.js, so
   every button gets this without its label being written twice in the markup,
   and icons come along automatically. Without JavaScript the buttons simply
   keep their solid colour and lose the animation — nothing breaks.

   Each button only declares its two colours; the mechanics below are shared.
   Most wipe white with their own colour as ink; the pale buttons invert, since
   white on white would be invisible. */
.an-btn-orange, .an-btn-orange-lg, .an-btn-teal, .an-btn-teal-md,
.an-submit, .an-book-btn, .an-row-arrow, .deck-btn {
    --wipe-bg: #fff; --wipe-ink: var(--btn);
}
/* WhatsApp keeps its own green — that colour is the affordance. */
.btn-wa           { --wipe-bg: #fff;        --wipe-ink: var(--green-700); }
/* The pale buttons invert, or a white panel on white would be invisible. */
.an-btn-white     { --wipe-bg: var(--btn);  --wipe-ink: #fff; }
.an-btn-ghost     { --wipe-bg: var(--btn);  --wipe-ink: #fff; }

.an-btn-orange, .an-btn-orange-lg, .an-btn-teal, .an-btn-teal-md,
.an-book-btn, .btn-wa, .an-btn-ghost, .an-btn-white, .an-submit, .deck-btn {
    position: relative; overflow: hidden; isolation: isolate;
}
/* The row arrows are absolutely positioned with a z-index of their own, which
   is both stacking context and containing block enough — they must NOT be
   switched to position:relative here or they drop out of place at the row
   edges. They just need the clip. */
.an-row-arrow { overflow: hidden; }

/* Layer 1: the button's real content, moved into a wrapper so the overlay has
   something to sit on top of. It reproduces the button's own flex layout. */
.btn-wipe__base {
    position: relative; z-index: 1;
    display: inline-flex; align-items: center; justify-content: center;
    gap: inherit;
}
/* Layer 2: the wiping panel, holding a copy of the same content in the
   contrasting colour. `padding: inherit` makes its content box match the
   base's, so a label that wraps wraps identically on both layers. */
.btn-wipe__over {
    position: absolute; inset: 0; z-index: 2;
    display: flex; align-items: center; justify-content: center;
    gap: inherit; padding: inherit; text-align: center;
    border-radius: inherit;
    background: var(--wipe-bg, #fff);
    color: var(--wipe-ink, var(--teal));
    box-shadow: inset 0 0 0 1.5px var(--wipe-ink, var(--teal));
    /* Parked off the left edge. The parent already clips with overflow:hidden
       plus its own border-radius, so the clip needs no corner radius here and
       every button keeps whatever radius it was given. */
    clip-path: inset(0 100% 0 0);
    transition: clip-path 650ms cubic-bezier(.77, 0, .18, 1);
}
.btn-wipe:hover .btn-wipe__over,
.btn-wipe:focus-visible .btn-wipe__over { clip-path: inset(0 0 0 0); }

/* The wipe is the fill now, so the old instant background swaps are gone from
   the rules below — only borders and lifts still change. */

/* Shared small buttons */
.an-btn-orange {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--btn); color: #fff; border: none; border-radius: var(--r-sm);
    padding: 11px 18px; font-size: 14px; font-weight: 600; cursor: pointer;
    transition: background .2s;
}
.an-btn-orange:hover { color: #fff; }
.an-btn-orange-lg {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--btn); color: #fff; border: none; border-radius: var(--r-md);
    padding: 15px 24px; font-size: 15px; font-weight: 600; cursor: pointer; transition: background .2s;
}
.an-btn-orange-lg:hover { color: #fff; }
.an-btn-teal-md {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--btn); color: #fff; border: none; border-radius: var(--r-md);
    padding: 15px 26px; font-size: 15px; font-weight: 600; cursor: pointer; transition: background .2s;
}
.an-btn-teal-md:hover { color: #fff; }

/* Card titles pick up the deep lagoon teal while their card is hovered — with
   the drop shadows gone this and the photo zoom carry the whole hover state. */
.trend-card .tt, .act-card .tt, .pkg-card .tt, .blog-card .tt, .pack-card h3 {
    transition: color .2s;
}
.trend-card:hover .tt, .act-card:hover .tt, .pkg-card:hover .tt,
.blog-card:hover .tt, .pack-card:hover h3 { color: var(--teal-dark); }

/* ============ Trending card (home scroll row) ============ */
/* Four cards fill the row exactly — basis is the row width minus the 3 gaps. */
/* Flat cards — no drop shadow. The photo zoom is the hover cue instead. */
.trend-card {
    flex: 0 0 calc((100% - 72px) / 4); min-width: 0;
    background: #fff; border-radius: var(--r-lg); overflow: hidden;
    box-shadow: none; display: flex; flex-direction: column;
    color: inherit;
}
.trend-card:hover { color: inherit; }
.trend-card .media { position: relative; height: 200px; }
.trend-card .tag {
    position: absolute; top: 14px; left: 14px; background: var(--teal); color: #fff;
    font-size: 11px; font-weight: 700; letter-spacing: .08em; padding: 5px 10px; border-radius: 7px;
}
.trend-card .body { padding: 20px 20px 22px; display: flex; flex-direction: column; flex: 1; }
.trend-card .cat { font-size: 12px; font-weight: 700; letter-spacing: .06em; color: var(--orange); text-transform: uppercase; }
.trend-card .tt { font-size: 18px; font-weight: 700; color: var(--ink); margin: 8px 0 16px; line-height: 1.25; }
.trend-card .dur {
    display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--teal);
    font-weight: 600; border-bottom: 1px solid var(--line); padding-bottom: 16px; margin-top: auto;
}
.trend-card .foot { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; }
.trend-card .price { font-size: 24px; font-weight: 800; color: var(--ink); }

/* ============ Destination card (home scroll row) ============ */
/* Five tiles fill the row exactly — basis is the row width minus the 4 gaps. */
.dest-tile {
    flex: 0 0 calc((100% - 96px) / 5); min-width: 0;
    position: relative; height: 276px; border-radius: var(--r-md);
    overflow: hidden; cursor: pointer; display: block;
}
.dest-tile .an-media { position: absolute; inset: 0; }
.dest-tile .shade {
    position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(180deg, rgba(10,30,34,0) 40%, rgba(10,30,34,.78));
}
.dest-tile .cap { position: absolute; left: 18px; bottom: 18px; pointer-events: none; }
.dest-tile .nm { display: block; font-size: 20px; font-weight: 700; color: #fff; }
.dest-tile .ct { display: block; font-size: 13px; color: #dbe6e6; margin-top: 2px; }

/* ============ Photo credits ============ */
.an-credit-count { color: var(--meta); font-size: 13px; text-transform: uppercase; letter-spacing: .06em; margin: 26px 0 10px; }
.an-credits { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 40px; }
.an-credits li {
    break-inside: avoid; padding: 9px 0; border-bottom: 1px solid var(--line);
    font-size: 13px; line-height: 1.5;
}
.an-credits a { color: var(--ink); font-weight: 600; }
.an-credits a:hover { color: var(--teal); }
.an-credits .by { color: var(--body); }
.an-credits .lic { display: block; color: var(--meta); font-size: 11.5px; }
@media (max-width: 760px) { .an-credits { columns: 1; } }

/* ============ Trust in numbers ============
   A 3D coverflow of four pastel cards, each pairing a headline figure with an
   illustration. One card is centred and the neighbours sit back and to the
   side; the poses themselves are set from JS (initTrustCarousel in controls.js)
   because they depend on each card's distance from the centre. Used on the home
   page (with the header) and on About (cards only). */
.trust-section {
    padding: 90px 20px 70px;
    overflow: hidden;
    background:
        radial-gradient(circle at 10% 20%, rgba(74,190,202,.10), transparent 28%),
        radial-gradient(circle at 90% 80%, rgba(243,106,50,.10), transparent 28%),
        #fff;
}
.trust-container { width: min(1450px, 100%); margin: 0 auto; }
.trust-header { margin-bottom: 28px; text-align: center; }
.trust-label {
    margin: 0 0 15px; color: var(--orange);
    font-size: 14px; font-weight: 800; letter-spacing: 5px; text-transform: uppercase;
}
.trust-title {
    margin: 0; color: var(--ink);
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(42px, 5vw, 72px); line-height: 1.05;
}

/* The deck is the 3D coverflow from the client's reference file: a fixed stage
   with perspective, and cards absolutely positioned at its centre. Each card's
   place in the deck is a transform applied from JS (initTrustCarousel), because
   it depends on how far that card sits from the centred one — CSS has no way to
   express that. Geometry and timing are the reference's, unchanged. */
.stats-carousel {
    position: relative; width: 100%; height: 520px;
    display: grid; place-items: center;
    perspective: 1600px; isolation: isolate;
}
/* Soft glow pooled behind the centred card. */
.stats-carousel::before {
    content: ""; position: absolute;
    width: min(700px, 80vw); height: 390px; border-radius: 50%;
    background: radial-gradient(circle, rgba(63,187,195,.16) 0%, rgba(63,187,195,.06) 45%, transparent 72%);
    filter: blur(18px); pointer-events: none;
}
.stats-track { position: relative; width: 100%; height: 430px; transform-style: preserve-3d; }

.stat-card {
    position: absolute; left: 50%; top: 50%;
    width: min(680px, 78vw); min-height: 330px;
    display: grid; grid-template-columns: .8fr 1.2fr; align-items: center; gap: 20px;
    overflow: hidden; padding: 42px;
    border: 1px solid rgba(20,70,80,.07); border-radius: 26px;
    box-shadow: 0 24px 65px rgba(22,73,81,.14);
    transform-origin: center;
    will-change: transform, opacity, filter;
    backface-visibility: hidden;
}
/* Soft highlight bleeding off the top-right corner. */
.stat-card::after {
    content: ""; position: absolute; top: -100px; right: -100px;
    width: 290px; height: 290px; border-radius: 50%;
    background: rgba(255,255,255,.35); pointer-events: none;
}
.card-yacht     { background: linear-gradient(135deg, #e8fbff, #d4f3f6); }
.card-travelers { background: linear-gradient(135deg, #fff8ed, #ffeddb); }
.card-partners  { background: linear-gradient(135deg, #fff9ec, #f4e5cc); }
.card-guides    { background: linear-gradient(135deg, #edf9ff, #dcefff); }
.stat-content { position: relative; z-index: 2; }
.stat-number {
    margin: 0; font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(68px, 7vw, 108px); font-weight: 700; line-height: .9; letter-spacing: -4px;
}
.card-yacht     .stat-number { color: var(--teal); }
.card-travelers .stat-number { color: var(--orange); }
.card-partners  .stat-number { color: #68451f; }
.card-guides    .stat-number { color: #17649b; }
.stat-line { width: 42px; height: 4px; margin: 25px 0 18px; border-radius: 20px; background: var(--orange); }
.card-guides .stat-line { background: #17649b; }
.stat-description {
    max-width: 270px; margin: 0; color: var(--ink);
    font-size: clamp(16px, 1.3vw, 21px); line-height: 1.45;
}
.stat-image-wrapper {
    position: relative; z-index: 1; width: 100%; height: 250px;
    display: flex; align-items: center; justify-content: center;
}
.stat-image {
    display: block; width: 100%; height: 100%;
    object-fit: contain; object-position: center;
    filter: drop-shadow(0 18px 18px rgba(20,65,70,.14));
}

/* Controls */
.carousel-controls {
    display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 8px;
}
/* Brand teal rather than white: a white disc on the section's pale gradient
   was nearly invisible, and these are the controls the section depends on. */
.carousel-button {
    width: 48px; height: 48px;
    border: 1px solid var(--btn-deep); border-radius: 50%;
    background: var(--btn); color: #fff;
    font-size: 25px; line-height: 1; cursor: pointer;
    box-shadow: 0 10px 24px rgba(22,73,81,.18);
    transition: background 180ms ease, box-shadow 180ms ease;
}
.carousel-button:hover { background: var(--btn-deep); box-shadow: 0 14px 30px rgba(22,73,81,.26); }
.carousel-dots { display: flex; align-items: center; gap: 8px; }
.carousel-dot {
    width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px;
    background: #bfe6e8; cursor: pointer;
    transition: width 220ms ease, background 220ms ease;
}
.carousel-dot.active { width: 24px; background: var(--teal); }

@media (max-width: 800px) {
    .trust-section { padding: 65px 14px 55px; }
    .trust-header { margin-bottom: 20px; }
    .trust-label { letter-spacing: 3px; }
    .stat-card {
        width: min(330px, 82vw); min-height: 390px;
        grid-template-columns: 1fr; gap: 12px;
        padding: 28px 22px 22px; text-align: center;
    }
    .stat-number { font-size: 64px; }
    .stat-line { margin-left: auto; margin-right: auto; }
    .stat-description { margin-left: auto; margin-right: auto; font-size: 16px; }
    .stat-image-wrapper { height: 185px; }
}

/* ============ Wide package card (home scroll row) ============ */
/* One package shows at a time, centred at 80% of the container so there is
   matching empty space either side for the ‹ › buttons to sit in. Capping the
   row rather than the card is what stops the next package peeking in. */
.flank-pack { max-width: 80%; margin: 0 auto; }
.pack-card {
    flex: 0 0 100%; min-width: 0; display: grid; grid-template-columns: 1fr 1.38fr;
    border: 1px solid var(--line); border-radius: var(--r-xl);
    box-shadow: none; background: #fff; overflow: hidden; color: inherit;
}
.pack-card:hover { color: inherit; }
.pack-card .media { position: relative; min-height: 290px; }
.pack-card .media .an-media { position: absolute; inset: 0; }
.pack-card .save {
    position: absolute; top: 20px; left: 20px; z-index: 2; background: var(--orange); color: #fff;
    font-size: 13px; font-weight: 700; padding: 8px 14px; border-radius: 9px;
}
.pack-card .body { padding: 32px 30px; display: flex; flex-direction: column; }
.pack-card .act { font-size: 13px; font-weight: 700; letter-spacing: .08em; color: var(--orange); text-transform: uppercase; }
.pack-card h3 { font-size: 30px; font-weight: 800; color: var(--ink); margin: 10px 0 14px; line-height: 1.2; }
.pack-card p { font-size: 16px; color: var(--body); margin: 0 0 30px; line-height: 1.55; }
.pack-card .foot {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 20px; flex-wrap: wrap; margin-top: auto;
}
.pack-card .amts { display: flex; align-items: baseline; gap: 10px; }
.pack-card .old { font-size: 18px; color: var(--faint); text-decoration: line-through; }
.pack-card .now { font-size: 34px; font-weight: 800; color: var(--ink); }
.pack-card .per { font-size: 13px; color: var(--meta); }

/* ============ Moments swipe deck ============ */
.mom-sec h2 { font-size: 44px; font-weight: 800; color: var(--ink); text-align: center; margin: 0 0 8px; }
.mom-sec .sub { text-align: center; color: var(--body); font-size: 16px; margin: 0 0 40px; }
.mom-deck { position: relative; max-width: 860px; height: 470px; margin: 0 auto; touch-action: none; }
.mom-card {
    position: absolute; top: 0; left: 0; right: 0; height: 470px; border-radius: var(--r-2xl);
    overflow: hidden; box-shadow: var(--sh-deck); touch-action: none;
}
/* Without this the browser's native image drag hijacks the pointer stream and
   the swipe dies mid-gesture — the About deck has no <img>, which is why it
   always felt right and this one did not. */
.mom-card img, .val-card img { -webkit-user-drag: none; user-select: none; }
.mom-card .shade {
    position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(180deg, rgba(10,30,34,0) 45%, rgba(10,30,34,.74));
}
.mom-card .cap { position: absolute; left: 30px; bottom: 28px; pointer-events: none; }
.mom-card .lbl { display: block; font-family: 'Playfair Display', serif; font-size: 32px; font-weight: 700; color: #fff; }
.mom-card .txt { display: block; font-size: 15px; color: #dbe6e6; margin-top: 4px; }
.deck-ctrls { display: flex; align-items: center; justify-content: center; gap: 22px; margin-top: 28px; }
.deck-btn {
    width: 56px; height: 56px; border-radius: 50%; border: 1px solid var(--line-warm-2);
    background: #fff; color: var(--ink); font-size: 22px; cursor: pointer; display: grid; place-items: center;
    box-shadow: 0 12px 26px -18px rgba(20,40,40,.6); transition: all .2s;
}
.deck-btn:hover { border-color: var(--btn); background: var(--btn); color: #fff; }
.deck-dots { display: flex; gap: 8px; }
.deck-dots span { width: 9px; height: 9px; border-radius: 50%; background: #d9cbb0; transition: background .25s; }
.deck-dots span.on { background: var(--orange); }
/* Swipe affordance for the Moments deck, which has no ‹ › buttons — the arrow
   drifts sideways so the line reads as a gesture rather than a caption. */
.deck-hint {
    display: flex; align-items: center; justify-content: center; gap: 9px;
    margin: 14px 0 0; font-size: 14px; font-weight: 600; color: var(--body);
}
.deck-hint .arw { font-size: 17px; color: var(--orange); animation: an-swipe-hint 1.7s ease-in-out infinite; }
@keyframes an-swipe-hint {
    0%, 100% { transform: translateX(-3px); }
    50%      { transform: translateX(6px); }
}

/* ============ Grids ============ */
.g-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.g-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }

/* ============ Blog card ============ */
.blog-card {
    border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
    display: flex; flex-direction: column; cursor: pointer; background: #fff; color: inherit;
    transition: box-shadow .25s;
}
.blog-card:hover { box-shadow: 0 24px 44px -26px rgba(20,40,40,.5); color: inherit; }
.blog-card .an-media { height: 220px; }
.blog-card .body { padding: 24px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.blog-card .cat { display: block; font-size: 12px; font-weight: 700; letter-spacing: .06em; color: var(--orange); text-transform: uppercase; }
.blog-card .tt { display: block; font-size: 21px; font-weight: 700; color: var(--ink); margin: 10px 0 12px; line-height: 1.25; }
.blog-card p { font-size: 15px; color: var(--body); margin: 0 0 22px; line-height: 1.55; flex: 1; }
.blog-card .more { display: block; font-size: 15px; font-weight: 700; color: var(--teal); }
/* Compact variant — "keep reading" rail */
.blog-card.sm .an-media { height: 200px; }
.blog-card.sm { box-shadow: var(--sh-grid); }
.blog-card.sm:hover { box-shadow: var(--sh-grid-h); }
.blog-card.sm .body { padding: 22px 22px 24px; }
.blog-card.sm .tt { font-size: 18px; margin: 9px 0 12px; line-height: 1.3; }
.blog-card.sm .more { font-size: 14px; margin-top: auto; }
/* Catalog variant */
.blog-card.listed { background: #fff; box-shadow: var(--sh-grid); }
.blog-card.listed:hover { box-shadow: var(--sh-grid-h); }

/* ============ Testimonials ============ */
.testi-card {
    background: #fff; border-radius: var(--r-lg); padding: 32px 30px;
    box-shadow: 0 18px 44px -30px rgba(20,40,40,.5); display: flex; flex-direction: column;
}
.testi-card .stars { color: var(--amber-star); font-size: 16px; letter-spacing: 2px; margin-bottom: 18px; }
.testi-card p { font-size: 16px; color: var(--ink-2); line-height: 1.6; margin: 0 0 26px; flex: 1; }
.testi-who { display: flex; align-items: center; gap: 14px; }
.testi-who .av {
    width: 46px; height: 46px; border-radius: 50%; background: #d8e7e2; color: var(--teal);
    font-weight: 700; font-size: 15px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.testi-who .nm { font-size: 15px; font-weight: 700; color: var(--ink); }
.testi-who .mt { font-size: 13px; color: #7a8888; }

/* ============ Feedback card ============ */
.an-feedback { padding: 20px 0 88px; background: #fff; }
.feedback-card {
    background: var(--cream-warm); border-radius: var(--r-2xl); padding: 56px;
    display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center;
}
.feedback-card h2 { font-size: 40px; font-weight: 800; margin: 12px 0 16px; color: var(--ink); line-height: 1.1; }
.feedback-card .lead { font-size: 16px; color: var(--body); margin: 0; max-width: 400px; }
.feedback-form { background: #fff; border-radius: var(--r-lg); padding: 32px; box-shadow: var(--sh-panel); }
.feedback-form .lbl { font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 10px; }
.stars-input { display: flex; gap: 8px; margin-bottom: 22px; border: none; padding: 0; }
.stars-input .star-btn {
    background: none; border: none; cursor: pointer; font-size: 30px; line-height: 1; padding: 0;
    color: #d7dede; transition: color .15s;
}
.stars-input .star-btn.active { color: var(--amber-star); }
.an-input, .an-textarea, .an-select {
    width: 100%; border: 1px solid var(--line-3); border-radius: var(--r-md);
    padding: 15px 16px; font-size: 15px; color: var(--ink); background: #fff;
    margin-bottom: 16px; outline: none; transition: border-color .2s;
}
.an-textarea { resize: vertical; min-height: 116px; margin-bottom: 20px; }
.an-select {
    appearance: none; cursor: pointer; padding-right: 44px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%230d6e78' stroke-width='3'><path d='M6 9l6 6 6-6'/></svg>");
    background-repeat: no-repeat; background-position: right 16px center;
}
.an-input:focus, .an-textarea:focus, .an-select:focus { border-color: var(--teal); }
.an-input::placeholder, .an-textarea::placeholder { color: var(--faint); }
.an-submit {
    width: 100%; background: var(--btn); color: #fff; border: none; border-radius: var(--r-md);
    padding: 16px; font-size: 15px; font-weight: 700; cursor: pointer; transition: background .2s;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.an-submit:hover { color: #fff; }

/* ============ Inner-page header (photo band + wave) ============ */
/* Same rule as the hero: the band itself does not clip, so the mobile menu can
   hang below it; .an-pagehead-media clips the photo and the glow instead. */
.an-pagehead { position: relative; }
.an-pagehead-media { position: absolute; inset: 0; overflow: hidden; }
.an-pagehead .bg { position: absolute; inset: 0; }
.an-pagehead .bg img { width: 100%; height: 100%; object-fit: cover; }
/* No colour wash over the photo — the header shows the picture itself. All
   that is left is a neutral shade that fades in towards the bottom, where the
   white title sits; the top of the band, and the nav, stay clear. */
.an-pagehead .veil {
    position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(180deg, rgba(10,30,34,0), rgba(10,30,34,.28) 45%, rgba(10,30,34,.58));
}
.an-pagehead .glow {
    position: absolute; top: -120px; right: -40px; width: 460px; height: 460px; border-radius: 50%;
    background: radial-gradient(circle, rgba(255,196,120,.3), transparent 70%); pointer-events: none;
}
/* With the wash gone the copy sits straight on the photo, so it carries the
   same text shadow the home hero uses to stay readable over any picture. */
.an-pagehead-copy { padding: 56px 8px 84px; max-width: 720px; }
.an-pagehead-copy .an-eyebrow {
    color: var(--sand); letter-spacing: .2em; animation-delay: .05s;
    text-shadow: 0 2px 14px rgba(10,30,34,.65);
}
.an-pagehead-copy h1 {
    font-family: 'Playfair Display', serif; font-size: 64px; line-height: 1.04; font-weight: 700;
    margin: 14px 0 20px; color: #fff; animation-delay: .16s;
    text-shadow: 0 3px 22px rgba(10,30,34,.6);
}
.an-pagehead-copy p {
    font-size: 18px; color: var(--on-dark-2); margin: 0; max-width: 580px; line-height: 1.55;
    animation-delay: .28s; text-shadow: 0 2px 14px rgba(10,30,34,.6);
}
.an-wave { position: relative; z-index: 3; display: block; width: 100%; height: 62px; margin-bottom: -1px; }
.an-wave path { fill: var(--cream); }
.an-wave.to-white path { fill: #fff; }

/* ============ Catalog shell ============ */
.an-catalog { background: var(--cream); padding: 8px 0 90px; }
.an-count { font-size: 15px; color: var(--body); margin-bottom: 26px; }

/* Category tabs */
.act-tabs { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 32px; }
.act-tab {
    display: flex; align-items: center; gap: 13px; background: #fff;
    border: 1.5px solid var(--line-4); border-radius: 16px; padding: 11px 20px 11px 11px;
    cursor: pointer; transition: transform .2s, box-shadow .2s, border-color .2s;
    box-shadow: 0 8px 20px -16px rgba(20,40,40,.5); color: inherit;
}
.act-tab:hover { transform: translateY(-3px); box-shadow: 0 16px 30px -18px rgba(20,40,40,.55); color: inherit; }
.act-tab .tile {
    width: 42px; height: 42px; border-radius: var(--r-md);
    display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0;
}
.act-tab .txt { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; }
.act-tab .nm { font-size: 15px; font-weight: 700; color: var(--ink); }
.act-tab .ct { font-size: 12px; font-weight: 600; color: var(--meta); }
.act-tab.active { border-color: transparent; color: #fff; }
.act-tab.active .nm { color: #fff; }
.act-tab.active .ct { color: rgba(255,255,255,.82); }
.act-tab.active .tile { background: rgba(255,255,255,.22); }
.act-types-select { display: none; margin-bottom: 26px; }
.act-types-select label {
    display: block; font-size: 12px; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: var(--body); margin-bottom: 8px;
}
.act-types-select select {
    appearance: none; width: 100%; background: var(--teal); border: 1px solid var(--teal);
    border-radius: var(--r-md); padding: 14px 44px 14px 16px; font-size: 15px; font-weight: 600;
    color: #fff; cursor: pointer;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3'><path d='M6 9l6 6 6-6'/></svg>");
    background-repeat: no-repeat; background-position: right 16px center;
}

/* Toolbar */
.an-toolbar {
    display: flex; align-items: center; justify-content: space-between; gap: 20px;
    flex-wrap: wrap; margin-bottom: 26px;
}
.an-toolbar .an-count { margin-bottom: 0; }
.an-toolbar .controls { display: flex; gap: 14px; flex-wrap: wrap; }
.an-toolbar select {
    appearance: none; background: #fff; border: 1px solid var(--line-2); border-radius: var(--r-md);
    padding: 12px 40px 12px 16px; font-size: 14px; font-weight: 600; color: var(--ink); cursor: pointer;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%230d6e78' stroke-width='3'><path d='M6 9l6 6 6-6'/></svg>");
    background-repeat: no-repeat; background-position: right 14px center;
}

/* ============ Activity card (catalog grid) ============ */
.act-card {
    background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
    display: flex; flex-direction: column; box-shadow: var(--sh-grid);
    transition: box-shadow .25s; color: inherit;
}
.act-card:hover { box-shadow: var(--sh-grid-h); color: inherit; }
.act-card .media { position: relative; height: 220px; }
.act-card .pop {
    position: absolute; top: 14px; left: 14px; display: flex; align-items: center; gap: 5px;
    background: #fff; color: var(--orange-deep); font-size: 11px; font-weight: 700; letter-spacing: .06em;
    padding: 6px 11px; border-radius: 999px; box-shadow: 0 6px 16px -8px rgba(0,0,0,.4);
}
.act-card .dur {
    position: absolute; top: 14px; right: 14px; display: flex; align-items: center; gap: 5px;
    background: rgba(14,47,52,.82); color: #fff; font-size: 12px; font-weight: 600;
    padding: 6px 11px; border-radius: 999px; backdrop-filter: blur(4px);
}
/* Running days, bottom-left of the photo. Same pill as the duration chip in
   the opposite corner — both answer "when", so they read as a pair. */
.act-card .days {
    position: absolute; bottom: 14px; left: 14px; display: flex; align-items: center; gap: 5px;
    max-width: calc(100% - 28px);
    background: rgba(14,47,52,.82); color: #fff; font-size: 12px; font-weight: 600;
    padding: 6px 11px; border-radius: 999px; backdrop-filter: blur(4px);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.act-card .body { padding: 22px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.act-card .cat { display: block; font-size: 12px; font-weight: 700; letter-spacing: .06em; color: var(--orange); text-transform: uppercase; }
.act-card .tt { display: block; font-size: 19px; font-weight: 700; color: var(--ink); margin: 9px 0 10px; line-height: 1.25; }
.act-card p { font-size: 14px; color: var(--body); margin: 0 0 20px; line-height: 1.55; flex: 1; }
.act-card .foot {
    display: flex; align-items: flex-end; justify-content: space-between; gap: 12px;
    border-top: 1px solid var(--line); padding-top: 18px;
}
.act-card .from { display: block; font-size: 11px; color: var(--meta); text-transform: uppercase; letter-spacing: .05em; }
.act-card .price { display: block; font-size: 24px; font-weight: 800; color: var(--ink); }

/* ============ Package card (catalog grid) ============ */
.pkg-card {
    background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
    display: flex; flex-direction: column; box-shadow: var(--sh-grid);
    transition: box-shadow .25s; color: inherit;
}
.pkg-card:hover { box-shadow: var(--sh-grid-h); color: inherit; }
.pkg-card .media { position: relative; height: 210px; }
.pkg-card .save {
    position: absolute; top: 14px; left: 14px; background: var(--orange); color: #fff;
    font-size: 12px; font-weight: 700; padding: 6px 12px; border-radius: 8px;
}
.pkg-card .acts {
    position: absolute; top: 14px; right: 14px; background: rgba(14,47,52,.82); color: #fff;
    font-size: 12px; font-weight: 600; padding: 6px 11px; border-radius: 999px; backdrop-filter: blur(4px);
}
.pkg-card .body { padding: 22px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.pkg-card .tt { display: block; font-size: 20px; font-weight: 800; color: var(--ink); margin: 0 0 10px; line-height: 1.25; }
.pkg-card p { font-size: 14px; color: var(--body); margin: 0 0 16px; line-height: 1.55; }
.pkg-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.pkg-chip {
    display: flex; align-items: center; gap: 6px; background: #eef4f3; color: var(--teal);
    font-size: 12px; font-weight: 600; padding: 6px 11px; border-radius: 999px;
}
.pkg-card .foot {
    display: flex; align-items: flex-end; justify-content: space-between; gap: 12px;
    border-top: 1px solid var(--line); padding-top: 18px; margin-top: auto;
}
.pkg-card .amts { display: flex; align-items: baseline; gap: 8px; }
.pkg-card .old { font-size: 15px; color: var(--faint); text-decoration: line-through; }
.pkg-card .now { font-size: 24px; font-weight: 800; color: var(--ink); }
.pkg-card .per { display: block; font-size: 12px; color: var(--meta); }

/* ============ Destination card (catalog grid) ============ */
.destx-card {
    position: relative; height: 420px; border-radius: 20px; overflow: hidden;
    box-shadow: 0 16px 40px -26px rgba(20,40,40,.55); cursor: pointer; display: block;
}
.destx-card .an-media { position: absolute; inset: 0; }
.destx-card .shade {
    position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(180deg, rgba(10,30,34,0) 35%, rgba(10,30,34,.82));
}
.destx-card .count {
    position: absolute; top: 16px; left: 16px; background: rgba(255,255,255,.92); color: var(--teal);
    font-size: 12px; font-weight: 700; padding: 6px 12px; border-radius: 999px; pointer-events: none;
}
.destx-card .cap { position: absolute; left: 22px; right: 22px; bottom: 22px; pointer-events: none; }
.destx-card .nm { display: block; font-family: 'Playfair Display', serif; font-size: 28px; font-weight: 700; color: #fff; }
.destx-card p { font-size: 14px; color: #dbe6e6; margin: 6px 0 14px; line-height: 1.5; }
/* The Explore pill is a button like any other, so it carries the same teal and
   the same hover wipe. It needs the clip and its own stacking context for the
   wiping panel, exactly as the buttons above do. */
.destx-card .go {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--btn); color: #fff;
    font-size: 13px; font-weight: 600; padding: 9px 16px; border-radius: var(--r-sm);
    position: relative; overflow: hidden; isolation: isolate;
    --wipe-bg: #fff; --wipe-ink: var(--btn);
}
/* The caption block is pointer-events:none so the whole tile stays one link,
   which means the pill can never be hovered itself — the card drives it. */
.destx-card:hover .go.btn-wipe .btn-wipe__over,
.destx-card:focus-visible .go.btn-wipe .btn-wipe__over { clip-path: inset(0 0 0 0); }

/* ============ Pagination ============ */
/* ============ Paging bar ============
   Record range on the left, "items per page" in the middle, page links on the
   right. Wraps to stacked rows on a phone. Shared with the admin skin below —
   only the colours differ, the layout is the same. */
.an-paging {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 16px; margin-top: 52px;
}
.an-paging .paging-meta { font-size: 14px; color: var(--meta); }
.an-paging[aria-busy="true"] { opacity: .55; pointer-events: none; }
.paging-size { display: flex; align-items: center; gap: 9px; }
.paging-size label { font-size: 13px; color: var(--meta); white-space: nowrap; }
.paging-size select {
    border: 1.5px solid var(--line-2); border-radius: var(--r-sm);
    padding: 8px 12px; font-size: 14px; font-weight: 600; color: var(--ink);
    background: #fff; cursor: pointer;
}
.paging-size select:disabled { opacity: .6; cursor: progress; }
.an-paging .an-pager { margin-top: 0; }
@media (max-width: 700px) {
    .an-paging { justify-content: center; text-align: center; }
    .an-paging .paging-meta, .paging-size, .an-paging .an-pager { width: 100%; justify-content: center; }
}

.an-pager { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 52px; flex-wrap: wrap; }
.an-pager a, .an-pager span.gap, .an-pager span.dead {
    min-width: 44px; height: 44px; border-radius: var(--r-md); border: 1px solid var(--line-2);
    background: #fff; color: var(--ink); font-size: 15px; font-weight: 600; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; padding: 0 16px;
    transition: border-color .2s, color .2s;
}
.an-pager a:hover { border-color: var(--teal); color: var(--teal); }
/* The page you are on. This used to be an inline style on the element; it
   belongs here now that one component renders every pager on the site. */
.an-pager .num.on {
    background: var(--teal); border-color: var(--teal); color: #fff; opacity: 1;
}
.an-pager a.num, .an-pager span.dead.num { width: 44px; padding: 0; font-weight: 700; }
.an-pager a.num.on { background: var(--teal); border-color: var(--teal); color: #fff; }
.an-pager span.gap { min-width: 24px; border: none; background: none; color: var(--faint); font-weight: 700; padding: 0; }
.an-pager span.dead { opacity: .45; cursor: default; }

/* ============ Blog article ============ */
.an-article { background: #fff; padding: 60px 0 20px; }
.an-back { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--teal); margin-bottom: 28px; }
.an-byline { display: flex; align-items: center; gap: 14px; margin-bottom: 28px; }
.an-byline .av {
    width: 46px; height: 46px; border-radius: 50%; background: #d8e7e2; color: var(--teal);
    font-weight: 700; font-size: 14px; display: flex; align-items: center; justify-content: center;
}
.an-byline .mt { font-size: 14px; color: var(--body); }
.an-byline .mt strong { color: var(--ink); }
.an-cover { position: relative; height: 420px; border-radius: 20px; overflow: hidden; margin-bottom: 36px; }
.an-lead { font-size: 20px; line-height: 1.7; color: var(--ink-2); margin: 0 0 26px; font-weight: 500; }
.an-body p { font-size: 18.5px; line-height: 1.82; color: var(--body-2); margin: 0 0 26px; }
/* The opening paragraph carries the piece — give it a little more presence. */
.an-body > p:first-of-type { font-size: 21px; line-height: 1.7; color: var(--ink); }
.an-body h2, .an-body h3 { font-family: 'Playfair Display', serif; font-size: 28px; font-weight: 700; color: var(--ink); margin: 36px 0 14px; }
.an-body h2 { font-size: 32px; }
.an-body ul, .an-body ol { font-size: 17px; line-height: 1.8; color: var(--body-2); margin: 0 0 30px; padding-left: 22px; }
.an-body li { margin-bottom: 8px; }
.an-body img { border-radius: 16px; margin: 24px 0; }

/* ── Article media ──────────────────────────────────────────
   Figures break out past the text column so a photograph has room to breathe,
   and drop back in line once the viewport is too narrow for the overhang. */
.an-figure { margin: 34px 0; }
/* Height is bounded rather than left to the source file. `height: auto` on a
   tall photograph in a wide column produced a slab most of a screen high, which
   pushed the article apart; a fixed band with object-fit keeps every figure the
   same shape whatever the original proportions are. */
.an-figure img {
    display: block; width: 100%;
    height: clamp(240px, 34vw, 420px); object-fit: cover; object-position: center;
    border-radius: 18px; margin: 0;
}
.an-figure figcaption {
    margin-top: 10px; font-size: 14px; line-height: 1.5;
    color: var(--meta); text-align: center;
}
.an-figure.wide { width: calc(100% + 120px); margin-left: -60px; }
.an-figure-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 34px 0; }
.an-figure-pair img {
    display: block; width: 100%;
    height: clamp(180px, 24vw, 300px); object-fit: cover; object-position: center;
    border-radius: 16px; margin: 0;
}

/* A 16:9 box the embed fills, so the page does not jump when the iframe loads. */
.an-video { position: relative; margin: 34px 0; border-radius: 18px; overflow: hidden; background: #0e2f34; }
.an-video::before { content: ""; display: block; padding-top: 56.25%; }
.an-video iframe, .an-video video {
    position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}
.an-video + figcaption { margin-top: 10px; font-size: 14px; color: var(--meta); text-align: center; }

/* A pull quote to break up a long read. */
.an-pull {
    margin: 38px 0; padding: 0 0 0 22px;
    border-left: 4px solid var(--teal);
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 24px; line-height: 1.45; color: var(--ink);
}

@media (max-width: 900px) {
    .an-figure.wide { width: 100%; margin-left: 0; }
    .an-figure img { height: clamp(200px, 52vw, 300px); }
    /* Stacked, so each half gets the shallower band a single column wants. */
    .an-figure-pair { grid-template-columns: 1fr; }
    .an-figure-pair img { height: clamp(170px, 44vw, 240px); }
    .an-body > p:first-of-type { font-size: 19px; }
}
.an-body a { color: var(--teal); font-weight: 600; text-decoration: underline; }
.an-body blockquote {
    border-left: 4px solid var(--orange); background: var(--cream-warm);
    border-radius: 0 14px 14px 0; padding: 24px 28px; margin: 32px 0;
}
.an-body blockquote p { font-size: 19px; line-height: 1.6; color: var(--ink); font-style: italic; margin: 0; }
.an-share {
    display: flex; align-items: center; gap: 14px; border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line); padding: 20px 0; margin: 36px 0;
}
.an-share .lbl { font-size: 14px; font-weight: 600; color: var(--ink); }
.an-share a {
    width: 40px; height: 40px; border-radius: 50%; background: var(--faq-bg);
    display: flex; align-items: center; justify-content: center; font-size: 14px; color: var(--teal);
    transition: background .2s, color .2s;
}
.an-share a:hover { background: var(--orange); color: #fff; }
.an-related { background: var(--cream); padding: 60px 0 90px; }
.an-related h2 { font-size: 32px; font-weight: 800; color: var(--ink); margin: 0 0 30px; }
/* Recommendation grids fit their own content rather than a fixed column count:
   three activity cards read well on a laptop, and the same rule gives two on a
   tablet and one on a phone without another breakpoint. */
.an-rec-grid {
    display: grid; gap: 28px;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
@media (max-width: 700px) { .an-rec-grid { gap: 20px; } }

/* ============ About ============ */
.about-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.about-photo {
    position: relative; height: 440px; border-radius: var(--r-xl); overflow: hidden;
    box-shadow: 0 24px 60px -34px rgba(20,40,40,.5);
}
.about-copy h2 {
    font-family: 'Playfair Display', serif; font-size: 40px; font-weight: 700; color: var(--ink);
    margin: 12px 0 20px; line-height: 1.15;
}
.about-copy p { font-size: 16px; color: var(--body); line-height: 1.7; margin: 0 0 18px; }
.about-copy p.last { margin-bottom: 26px; }
.val-deck { position: relative; max-width: 400px; height: 360px; margin: 8px auto 0; touch-action: none; }
.val-card {
    position: absolute; top: 0; left: 0; right: 0; height: 360px; background: #fff;
    border: 1px solid var(--line); border-radius: var(--r-2xl); padding: 38px 34px;
    box-shadow: 0 30px 70px -34px rgba(20,40,40,.55); display: flex; flex-direction: column; touch-action: none;
}
.val-card .ic {
    width: 64px; height: 64px; border-radius: var(--r-lg); background: linear-gradient(135deg, #f2622e, #f59b3c);
    display: flex; align-items: center; justify-content: center; font-size: 30px; color: #fff; margin-bottom: 24px;
}
.val-card .tt { font-family: 'Playfair Display', serif; font-size: 26px; font-weight: 700; color: var(--ink); margin-bottom: 14px; }
.val-card p { font-size: 16px; color: var(--body); line-height: 1.65; margin: 0; }
.val-card .hint { margin-top: auto; font-size: 13px; color: var(--faint); letter-spacing: .04em; }
.val-card .stamp {
    position: absolute; top: 22px; font-size: 19px; font-weight: 800; letter-spacing: .08em;
    padding: 3px 12px; border-radius: var(--r-sm); opacity: 0;
}
.val-card .stamp.yes { left: 26px; border: 3px solid #2fae6a; color: #2fae6a; transform: rotate(-15deg); }
.val-card .stamp.no { right: 26px; border: 3px solid var(--orange-dark); color: var(--orange-dark); transform: rotate(15deg); }
.val-dots { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 30px; }
.val-dots span { width: 9px; height: 9px; border-radius: 50%; background: #d9d4c9; transition: background .25s; }
.val-dots span.on { background: var(--orange); }

/* ============ Contact ============ */
.contact-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.contact-copy h2 { font-size: 34px; font-weight: 800; color: var(--ink); margin: 10px 0 18px; line-height: 1.15; }
.contact-copy .lead { font-size: 16px; color: var(--body); line-height: 1.7; margin: 0 0 30px; }
.contact-rows { display: flex; flex-direction: column; gap: 16px; }
.contact-row {
    display: flex; align-items: center; gap: 16px; background: var(--cream);
    border: 1px solid var(--line); border-radius: 16px; padding: 18px 20px; color: inherit;
    transition: border-color .2s;
}
.contact-row:hover { border-color: var(--teal); color: inherit; }
.contact-row .ic {
    width: 48px; height: 48px; border-radius: 14px; background: linear-gradient(135deg, #0d6e78, #12908f);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: #fff; font-size: 18px;
}
.contact-row .lbl { display: block; font-size: 13px; color: var(--meta); font-weight: 600; }
.contact-row .val { display: block; font-size: 16px; font-weight: 700; color: var(--ink); }
.contact-form-card { background: var(--cream-warm); border-radius: var(--r-xl); padding: 40px; }
.contact-form-card .tt { font-size: 20px; font-weight: 800; color: var(--ink); margin-bottom: 22px; }
.contact-map {
    position: relative; height: 340px; border-radius: var(--r-xl); overflow: hidden;
    box-shadow: 0 20px 50px -34px rgba(20,40,40,.5);
}
.contact-map iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ============ FAQ (every page) ============ */
.an-faq { background: var(--faq-bg); padding: 56px 0; }
.an-faq-head { text-align: center; margin-bottom: 30px; }
.an-faq-head h2 { font-size: 44px; font-weight: 800; margin: 10px 0 0; color: var(--ink); }
.an-faq-list { display: flex; flex-direction: column; gap: 16px; }
.faq-item { background: #fff; border: 2px solid var(--line-warm); border-radius: 16px; overflow: hidden; transition: border-color .25s; }
.faq-item.open { border-color: var(--amber-star); }
.faq-q {
    width: 100%; display: flex; align-items: center; gap: 16px; background: none; border: none;
    cursor: pointer; padding: 22px 24px; text-align: left;
}
.faq-q .ic { font-size: 20px; flex-shrink: 0; }
.faq-q .txt {
    flex: 1; font-size: 16px; font-weight: 700; letter-spacing: .02em;
    color: var(--ink); text-transform: uppercase; line-height: 1.35;
}
.faq-item.open .faq-q .txt { color: var(--orange); }
.faq-q .chev { color: var(--amber-star); font-size: 20px; transition: transform .25s; flex-shrink: 0; }
.faq-item.open .faq-q .chev { transform: rotate(180deg); }
.faq-a { padding: 0 24px 24px 60px; font-size: 15px; color: var(--body-2); line-height: 1.65; display: none; }
.faq-item.open .faq-a { display: block; }

/* ============ Footer ============ */
.an-footer { position: relative; background: url('../images/hero-anorya.jpg') center/cover; color: #cfe0e0; }
.an-footer::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(180deg, rgba(11,42,47,.9), rgba(11,42,47,.97));
}
.an-footer-wave { position: relative; display: block; width: 100%; height: 88px; }
.an-footer-wave path { fill: var(--faq-bg); }
.an-footer-inner { position: relative; max-width: 1200px; margin: 0 auto; padding: 16px 40px 30px; }
.g-foot { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.1fr; gap: 40px; }
.an-footer .brand img { height: 44px; width: auto; margin-bottom: 20px; }
.an-footer .brand p { font-size: 15px; color: #93b3b3; line-height: 1.6; max-width: 320px; margin: 0 0 22px; }
/* wrap: the row grows as an admin fills in more networks, and must not
   overflow the brand column on a narrow screen */
.an-socials { display: flex; flex-wrap: wrap; gap: 12px; }
.an-socials a {
    width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,.08);
    display: flex; align-items: center; justify-content: center; font-size: 15px; color: #cfe0e0;
    transition: background .2s, color .2s;
}
.an-socials a:hover { background: var(--orange); color: #fff; }
.an-footer h4 { font-size: 13px; font-weight: 700; letter-spacing: .16em; color: #fff; margin: 0 0 20px; text-transform: uppercase; }
.an-footer .col a { display: block; font-size: 15px; color: #a9c4c4; margin-bottom: 14px; }
.an-footer .col a:hover { color: #fff; }
.an-footer-bottom {
    border-top: 1px solid rgba(255,255,255,.1); margin-top: 44px; padding-top: 24px;
    display: flex; justify-content: space-between; flex-wrap: wrap; gap: 14px;
    font-size: 14px; color: #8fabab; position: relative;
}
.an-footer-bottom a { color: #8fabab; }
.an-footer-bottom a:hover { color: #fff; }

/* ============ Detail pages (activity · package · booking) ============ */
.an-detail { background: var(--cream); padding: 8px 0 90px; }
.an-detail-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 36px; align-items: start; }
.an-panel { background: #fff; border: 1px solid var(--line); border-radius: var(--r-xl); padding: 34px 36px; margin-bottom: 26px; }
.an-panel h2 { font-size: 26px; font-weight: 800; margin: 0 0 16px; color: var(--ink); }
.an-panel h3 { font-size: 19px; font-weight: 700; margin: 0 0 10px; color: var(--ink); }
.an-panel p { font-size: 16px; color: var(--body); line-height: 1.7; margin: 0 0 14px; }
.an-panel p:last-child { margin-bottom: 0; }

/* Fixed row height so the thumbnail rail always matches the main photo
   instead of growing to its images' intrinsic heights. */
/* ============ Activity gallery ============
   One full-width viewer with a horizontal sliding track. There is no thumbnail
   rail: it took a third of the width from the photo itself and duplicated what
   the arrows already do. */
.an-gallery {
    position: relative; margin-bottom: 26px;
    border-radius: 20px; overflow: hidden;
    height: clamp(320px, 46vw, 560px);
}
.an-gallery .gal-viewport { position: absolute; inset: 0; overflow: hidden; }
.an-gallery .gal-track { display: flex; height: 100%; will-change: transform; }
.an-gallery .gal-track.gliding { transition: transform 620ms cubic-bezier(.4, 0, .2, 1); }
/* Each slide is exactly one viewport wide, so the track step is 100%. */
.an-gallery .gal-slide { flex: 0 0 100%; height: 100%; position: relative; }
.an-gallery .gal-slide > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.an-gallery:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }

.an-gallery .gal-nav {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
    width: 48px; height: 48px; display: flex; align-items: center; justify-content: center;
    border: 0; border-radius: 50%; background: var(--btn); color: #fff;
    font-size: 28px; line-height: 1; cursor: pointer;
    box-shadow: 0 6px 20px rgba(14,47,52,.32);
    transition: background .2s ease, box-shadow .2s ease;
}
.an-gallery .gal-nav.prev { left: 18px; }
.an-gallery .gal-nav.next { right: 18px; }
.an-gallery .gal-nav:hover { background: var(--btn-deep); box-shadow: 0 10px 26px rgba(14,47,52,.4); }
.an-gallery .gal-nav:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.an-gallery .gal-count {
    position: absolute; right: 18px; bottom: 18px; z-index: 3;
    padding: 6px 14px; border-radius: 999px;
    background: rgba(14,47,52,.78); color: #fff;
    font-size: 13px; font-weight: 600; backdrop-filter: blur(4px);
}

@media (max-width: 700px) {
    .an-gallery { height: clamp(240px, 56vw, 360px); border-radius: 16px; }
    .an-gallery .gal-nav { width: 40px; height: 40px; font-size: 24px; }
    .an-gallery .gal-nav.prev { left: 10px; }
    .an-gallery .gal-nav.next { right: 10px; }
}

.an-facts { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; }
.an-fact {
    display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--line);
    border-radius: 999px; padding: 9px 16px; font-size: 13px; font-weight: 600; color: var(--ink);
}
.an-fact i { color: var(--teal); }

.inc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 32px; }
.inc-list { list-style: none; margin: 0; padding: 0; }
.inc-list li { display: flex; gap: 10px; font-size: 15px; color: var(--body-2); margin-bottom: 12px; line-height: 1.5; }
.inc-list li i.in { color: #2fae6a; margin-top: 4px; }
.inc-list li i.out { color: var(--orange-dark); margin-top: 4px; }

.an-timeline { position: relative; padding-left: 26px; }
.an-timeline::before { content: ""; position: absolute; left: 6px; top: 6px; bottom: 6px; width: 2px; background: var(--line); }
.tl-item { position: relative; margin-bottom: 22px; }
.tl-item::before {
    content: ""; position: absolute; left: -26px; top: 6px; width: 12px; height: 12px;
    border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 4px rgba(242,98,46,.16);
}
.tl-item .t { font-size: 16px; font-weight: 700; color: var(--ink); }
.tl-item .d { font-size: 15px; color: var(--body); line-height: 1.6; }

.review-list .review { padding: 22px 0; border-bottom: 1px solid var(--line); }
.review-list .review:last-child { border-bottom: none; }
.review-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; gap: 12px; flex-wrap: wrap; }
.review-author { display: flex; align-items: center; gap: 12px; }
.review-author .av {
    width: 42px; height: 42px; border-radius: 50%; background: #d8e7e2; color: var(--teal);
    display: grid; place-items: center; font-weight: 700; flex-shrink: 0;
}
.review .stars { color: var(--amber-star); letter-spacing: 2px; }

.booking-card {
    background: #fff; border: 1px solid var(--line); border-radius: var(--r-xl);
    padding: 28px; box-shadow: var(--sh-panel); position: sticky; top: 24px;
}
.booking-card .price-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.booking-card .big { font-size: 32px; font-weight: 800; color: var(--ink); line-height: 1; }
.booking-card .big small { font-size: 13px; font-weight: 500; color: var(--meta); margin-left: 6px; }
.booking-card .urgency {
    background: var(--cream-warm); border-radius: var(--r-sm); padding: 10px 14px;
    font-size: 13px; color: var(--orange-deep); font-weight: 600; margin-bottom: 18px;
}
.an-field { margin-bottom: 16px; }
.an-field label { display: block; font-size: 13px; font-weight: 700; color: var(--ink); margin-bottom: 8px; }
.an-field input, .an-field select, .an-field textarea {
    width: 100%; border: 1px solid var(--line-3); border-radius: var(--r-md); padding: 13px 15px;
    font-size: 15px; color: var(--ink); background: #fff; outline: none; transition: border-color .2s;
}
.an-field input:focus, .an-field select:focus, .an-field textarea:focus { border-color: var(--teal); }
.stepper { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; }
.stepper .lbl { font-size: 14px; font-weight: 600; color: var(--ink); }
.stepper .lbl small { display: block; font-size: 12px; font-weight: 500; color: var(--meta); }
.stepper .ctrl { display: flex; align-items: center; gap: 12px; }
.step-btn {
    width: 34px; height: 34px; border-radius: var(--r-sm); border: 1px solid var(--line-2);
    background: #fff; color: var(--teal); font-size: 17px; font-weight: 700; cursor: pointer;
}
.step-btn:hover { border-color: var(--teal); }
.total-row {
    display: flex; align-items: center; justify-content: space-between;
    border-top: 1px solid var(--line); padding-top: 16px; margin: 8px 0 18px; font-weight: 600; color: var(--ink);
}
.btn-wa {
    background: var(--green); color: #fff; border: none; border-radius: var(--r-md);
    padding: 14px 18px; font-weight: 600; font-size: 15px;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; cursor: pointer; transition: background .2s, transform .2s;
}
.btn-wa:hover { color: #fff; }
.an-btn-ghost {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    background: #fff; border: 1px solid var(--line-2); border-radius: var(--r-md);
    padding: 13px 18px; font-size: 15px; font-weight: 600; color: var(--ink); cursor: pointer; width: 100%;
    transition: color .2s, border-color .2s;
}
.an-btn-ghost:hover { border-color: var(--btn); }
.an-note { font-size: 13px; color: var(--meta); margin-top: 12px; text-align: center; }

/* Alerts + validation */
.alert-success-he { background: #E7F4EA; border: 1px solid #BFE3C8; color: #1E6B37; border-radius: var(--r-md); padding: 14px 18px; margin-bottom: 18px; }
.alert-error-he { background: #FBEAE4; border: 1px solid #F0CDBE; color: #97401F; border-radius: var(--r-md); padding: 14px 18px; margin-bottom: 18px; }
.field-error { color: var(--orange-dark); font-size: 13px; margin-top: 4px; display: block; }
span.field-error[data-valmsg-for] { display: block; }
input.input-validation-error, select.input-validation-error, textarea.input-validation-error { border-color: var(--orange) !important; }

/* Scroll reveal */
.fade-in { opacity: 0; transform: translateY(16px); transition: opacity .6s cubic-bezier(.22,.61,.36,1), transform .6s cubic-bezier(.22,.61,.36,1); }
.fade-in.show { opacity: 1; transform: none; }

/* ============ WhatsApp chat widget ============ */
.wa-fab {
    position: fixed; right: 24px; bottom: 24px; z-index: 9999;
    width: 56px; height: 56px; border-radius: 50%; border: none; cursor: pointer;
    background: var(--green); color: #fff; font-size: 1.75rem;
    display: grid; place-items: center;
    box-shadow: 0 14px 30px -10px rgba(37,211,102,.65);
    transition: background .15s ease, box-shadow .15s ease;
    animation: waPulse 4s ease-in-out infinite;
}
.wa-fab:hover { background: var(--green-700); box-shadow: 0 16px 34px -10px rgba(37,211,102,.8); }
@keyframes waPulse { 0%, 15%, 100% { transform: scale(1); } 7.5% { transform: scale(1.08); } }
/* The halo used to animate box-shadow spread. That is a paint property: it
   repainted a growing area on the main thread every frame, forever, on a button
   that is fixed and therefore never off screen — so it could not be paused like
   the other ambient loops. Scaling and fading a disc is the same halo on the
   compositor instead, which costs the main thread nothing. */
.wa-fab::after {
    content: ""; position: absolute; inset: 0; z-index: -1;
    border-radius: 50%; pointer-events: none;
    background: rgba(37,211,102,.45); opacity: 0;
    animation: waGlow 4s ease-in-out infinite;
}
@keyframes waGlow {
    0%            { transform: scale(1);    opacity: .45; }
    15%           { transform: scale(1.55); opacity: 0; }
    15.01%, 100%  { transform: scale(1);    opacity: 0; }
}
.wa-popup {
    position: fixed; right: 24px; bottom: 94px; z-index: 9999;
    width: min(360px, calc(100vw - 32px));
    border-radius: var(--r-lg); overflow: hidden; background: #fff;
    box-shadow: 0 24px 60px -18px rgba(20,40,40,.45);
    opacity: 0; transform: translateY(14px) scale(.96); transform-origin: bottom right;
    visibility: hidden; pointer-events: none;
    transition: opacity .25s ease, transform .25s ease, visibility .25s;
}
.wa-popup.open { opacity: 1; transform: none; visibility: visible; pointer-events: auto; }
.wa-pop-head { display: flex; align-items: center; gap: 12px; background: var(--green); padding: 14px 16px; }
.wa-pop-logo { width: 36px; height: 36px; border-radius: 50%; background: #fff; color: var(--green); display: grid; place-items: center; font-size: 1.45rem; flex-shrink: 0; }
.wa-pop-title { color: #fff; font-weight: 700; font-size: 18px; }
.wa-pop-close {
    margin-left: auto; width: 30px; height: 30px; border-radius: 50%; border: none; cursor: pointer;
    background: #0B3D2E; color: #fff; display: grid; place-items: center; font-size: .85rem;
}
.wa-pop-close:hover { background: #06281E; }
.wa-pop-body { background: #ECF8F1; padding: 18px 16px 20px; }
.wa-bubble {
    position: relative; background: #fff; border-radius: 14px; border-bottom-left-radius: 4px;
    padding: 12px 14px; font-size: 14px; line-height: 1.6; color: var(--ink);
    box-shadow: 0 2px 6px rgba(20,40,40,.08); max-width: 94%;
}
.wa-bubble::after { content: ""; position: absolute; left: -5px; bottom: 0; width: 12px; height: 12px; background: #fff; clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.wa-pop-foot { padding: 14px 16px 16px; background: #fff; }
.wa-cta {
    display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%;
    background: linear-gradient(135deg, #25D366, #4AE08B); color: #fff;
    font-weight: 700; font-size: 14px; border-radius: 50px; padding: 12px 18px;
    box-shadow: 0 10px 22px -10px rgba(37,211,102,.7); text-align: center;
    transition: transform .15s ease, box-shadow .15s ease;
}
.wa-cta:hover { transform: translateY(-1px); color: #fff; box-shadow: 0 14px 26px -10px rgba(37,211,102,.85); }
.wa-cta-ic { width: 26px; height: 26px; border-radius: 50%; background: #fff; color: var(--green); display: grid; place-items: center; font-size: .8rem; flex-shrink: 0; }
@media (max-width: 480px) { .wa-popup { right: 16px; } }

/* Admin launcher */
.admin-launcher {
    position: fixed; left: 22px; bottom: 22px; z-index: 50;
    background: var(--teal); color: #fff; border: none;
    padding: 0 18px; height: 44px; border-radius: 999px;
    display: inline-flex; align-items: center; gap: 8px;
    font-weight: 600; font-size: .84rem; cursor: pointer;
    box-shadow: 0 8px 24px -6px rgba(0,0,0,.35); transition: background .15s;
}
.admin-launcher:hover { background: var(--teal-dark); color: #fff; }
.admin-launcher .dot { width: 8px; height: 8px; border-radius: 50%; background: #34d399; }
@media (max-width: 640px) { .admin-launcher span.txt { display: none; } .admin-launcher { padding: 0 14px; } }

/* Toast */
.toast-msg {
    position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px);
    background: var(--ink); color: #fff; padding: 12px 18px; border-radius: var(--r-md); opacity: 0;
    transition: all .3s ease; z-index: 80; font-size: .92rem; box-shadow: 0 20px 50px -20px rgba(20,40,40,.6);
    pointer-events: none; max-width: calc(100vw - 40px);
}
.toast-msg.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Cookie consent banner (Views/Shared/_Analytics.cshtml). Accept and Refuse
   are deliberately identical — the choice must not be nudged. */
.consent {
    position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 90;
    width: min(640px, calc(100vw - 32px));
    display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px;
    background: var(--ink); color: #fff; border-radius: var(--r-lg); padding: 18px 20px;
    font-size: .9rem; line-height: 1.5; box-shadow: 0 20px 50px -20px rgba(20,40,40,.6);
}
.consent[hidden] { display: none; }
.consent p { margin: 0; flex: 1 1 280px; color: #fff; }
.consent a { color: var(--sand); text-decoration: underline; }
.consent-actions { display: flex; gap: 10px; }
.consent-btn {
    min-width: 108px; height: 42px; padding: 0 18px; border-radius: var(--r-md);
    border: none; background: #fff; color: var(--ink);
    font: inherit; font-weight: 600; cursor: pointer;
}
.consent-btn:hover { background: var(--cream); }
.consent-btn:focus-visible { outline: 3px solid var(--sand); outline-offset: 2px; }
@media (max-width: 480px) {
    .consent { bottom: 12px; }
    .consent-actions { width: 100%; }
    .consent-btn { flex: 1; }
}

/* Tom Select + flatpickr themes */
.ts-wrapper { font-family: 'Poppins', sans-serif; }
.ts-control {
    border: 1px solid var(--line-3) !important; border-radius: var(--r-md) !important;
    background: #fff !important; padding: 12px 15px !important;
    font-size: 15px; color: var(--ink); min-height: 46px; box-shadow: none !important;
}
.ts-wrapper.focus .ts-control { border-color: var(--teal) !important; box-shadow: none !important; }
.ts-wrapper.single .ts-control {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%230d6e78' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important; background-position: right 14px center !important; padding-right: 2.4rem !important;
}
.ts-wrapper.single .ts-control::after { display: none !important; }
.ts-dropdown {
    border: 1px solid var(--line-3); border-radius: var(--r-md); box-shadow: 0 20px 44px -20px rgba(20,40,40,.45);
    font-family: 'Poppins', sans-serif; font-size: 14px; margin-top: 6px; overflow: hidden; z-index: 70;
}
.ts-dropdown .option { padding: 9px 14px; }
.ts-dropdown .option.active { background: var(--cream-warm); color: var(--ink); }
.ts-dropdown .option.selected { background: var(--teal); color: #fff; }
.flatpickr-calendar { border-radius: 14px !important; border: 1px solid var(--line-3) !important; font-family: 'Poppins', sans-serif !important; }
.flatpickr-months .flatpickr-month, .flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year { color: var(--ink) !important; fill: var(--ink) !important; font-weight: 700 !important; }
.flatpickr-months .flatpickr-prev-month, .flatpickr-months .flatpickr-next-month { color: var(--teal) !important; fill: var(--teal) !important; }
span.flatpickr-weekday { color: var(--meta) !important; font-weight: 700 !important; }
.flatpickr-day { border-radius: 9px !important; color: var(--ink); font-weight: 500; }
.flatpickr-day:hover { background: var(--cream-warm) !important; border-color: var(--cream-warm) !important; }
.flatpickr-day.today { border-color: var(--orange) !important; }
.flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange {
    background: var(--teal) !important; border-color: var(--teal) !important; color: #fff !important;
}

/* Page transitions + AJAX bar */
@view-transition { navigation: auto; }
@keyframes pageEnter { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
    .page-enter { animation: pageEnter .5s cubic-bezier(.22,.61,.36,1) both; }
}
@media (prefers-reduced-motion: reduce) {
    ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}
#ajaxBar {
    position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 10000;
    background: linear-gradient(90deg, #f2622e, #f59b3c); opacity: 0;
    box-shadow: 0 0 8px rgba(242,98,46,.55); pointer-events: none;
}
body.ajax-loading { cursor: progress; }

/* ============ Responsive ============ */
/* Below ~1240px the page gutter is a flat 40px, which is 4px short of a whole
   arrow — pull them back in by that much so neither is clipped at the edge. */
@media (max-width: 1240px) {
    .an-row-arrow.prev { left: -40px; }
    .an-row-arrow.next { right: -40px; }
}
/* French labels are longer than their English counterparts ("À propos de nous"
   vs "About us"), so between the burger breakpoint and full desktop the bar
   needs to give the links room or it pushes past the viewport. */
@media (max-width: 1160px) {
    .an-nav { gap: 16px; padding: 12px 18px; }
    .nav-links { gap: 2px; margin-left: 0; }
    .nav-links a { padding: 8px 10px; font-size: 14px; }
    .an-nav-right { gap: 10px; }
    .an-book-btn { padding: 11px 16px; }
    .an-nav .an-logo img { height: 32px; }
}
@media (max-width: 1100px) {
    section h1, .an-hero h1 { font-size: 52px !important; }
    .g-3 { grid-template-columns: 1fr 1fr; }
    .trend-card { flex-basis: calc((100% - 48px) / 3); }
    .dest-tile { flex-basis: calc((100% - 72px) / 4); }
    .an-detail-grid { grid-template-columns: 1fr; }
    .booking-card { position: static; }
}
/* Touch territory: the burger takes over here, so every link that was a
   comfortable mouse target needs to become a finger-sized one. */
@media (max-width: 960px) {
    .nav-links { display: none !important; }
    .nav-fr { display: none !important; }
    .nav-burger { display: flex !important; }
    .an-footer .col a { padding: 6px 0; margin-bottom: 5px; }
    .an-back { padding: 6px 0; margin-bottom: 22px; }
}
@media (max-width: 860px) {
    section h1, .an-hero h1, .an-pagehead-copy h1 { font-size: 40px !important; line-height: 1.08 !important; }
    section h2, .an-head h2, .an-faq-head h2, .an-stats-head h2, .mom-sec h2, .feedback-card h2 { font-size: 30px !important; }
    .g-3 { grid-template-columns: 1fr; }
    .g-2 { grid-template-columns: 1fr; }
    .g-foot { grid-template-columns: 1fr 1fr; }
    /* One whole package, no half-card peek — the arrows are the scroll cue. */
    .pack-card { grid-template-columns: 1fr; }
    .pack-card .body { padding: 26px 24px; }
    /* The 80% inset is desktop breathing room; on a phone the row needs the
       full width, so the arrows move inside and sit over the card edges. */
    .flank-pack { max-width: 100%; }
    .faq-a { padding-left: 24px; }
    .feedback-card { padding: 32px; }
    .act-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .act-tab { padding: 10px 12px 10px 10px; }
    .about-2 { grid-template-columns: 1fr; }
    .contact-2 { grid-template-columns: 1fr; }
    .mom-deck, .mom-card { height: 360px; }
    .an-head { flex-direction: column; align-items: flex-start; }
    .an-head-link { align-self: flex-start; }
    /* Arrows stay visible on phones, but there is no gutter left to sit in, so
       they move inside the row. Pinned near the top rather than centred: every
       card leads with a photo at least 200px tall, so this keeps them off the
       title and category text further down. */
    .an-row-arrow { width: 38px; height: 38px; font-size: 16px; top: 130px; }
    .an-row-arrow.prev { left: 6px; }
    .an-row-arrow.next { right: 6px; }
    .trend-card { flex-basis: calc((100% - 24px) / 2); }
    .dest-tile { flex-basis: calc((100% - 48px) / 3); }
    .an-panel { padding: 26px 22px; }
    .inc-grid { grid-template-columns: 1fr; }
    .an-cover { height: 260px; }
}
@media (max-width: 640px) {
    .an-hero-body { padding: 56px 8px 44px; }
    .an-pagehead-copy { padding: 40px 4px 64px; }
    .an-sec { padding: 44px 0; }
    .an-faq { padding: 44px 0; }
    .an-toolbar select { flex: 1; }
    .trend-card { flex-basis: 100%; }
    .dest-tile { flex-basis: calc((100% - 24px) / 2); }
    /* The last footer line sat under the floating WhatsApp and admin buttons. */
    .an-footer-inner { padding-bottom: 92px; }
    .an-footer-bottom { margin-top: 32px; }
}
@media (max-width: 480px) {
    .an-wrap, .an-wrap-narrow, .an-wrap-faq, .an-wrap-mom, .an-wrap-article { padding: 0 20px; }
    .an-wrap-nav { padding: 14px 16px 0; }
    .an-nav { padding: 12px 16px; gap: 14px; }
    /* Bottom padding still clears the two floating buttons — see the 640px
       block above; a shorthand here would reset it. */
    .an-footer-inner { padding: 16px 20px 92px; }
    .g-foot { grid-template-columns: 1fr; }
    .feedback-card { padding: 24px; }
    .contact-form-card { padding: 26px; }
    .an-book-btn { padding: 10px 14px; font-size: 13px; }
    .an-hero h1, .an-pagehead-copy h1 { font-size: 34px !important; }
    .an-sec { padding: 36px 0; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
    .an-stagger { opacity: 1; }
    .fade-in { opacity: 1; transform: none; }
    html { scroll-behavior: auto; }

    /* The card photo sets and the home rows are exempt for the same reason as
       the trust deck and the button wipe: they are deliberately-requested,
       contained effects, and collapsing them to nothing turns a cross-fade into
       a flicker and a 700ms row slide into a jump. The fade is shortened rather
       than removed, which is the honest middle ground. */
    .card-shots > .shot { transition-duration: 260ms !important; }
    .row-track { transition-duration: 520ms !important; }

    /* The trust deck is exempt for the same reason as the button wipe below:
       it is a direct port of a reference the client supplied and asked twice to
       have matched exactly, and the reference animates regardless of this
       setting. Leaving the dots and arrows frozen made the deck look broken on
       the one machine that mattered. */
    .carousel-dot { transition-duration: 220ms !important; }
    .carousel-button { transition-duration: 180ms !important; }

    /* The button wipe is deliberately exempt from the blanket rule above.
       Reduced motion is about sparing people large, involuntary or
       vestibular movement — full-screen parallax, autoplaying carousels,
       long travel across the viewport. This is a colour front sweeping a
       few hundred pixels inside a button, and only ever because the user
       pointed at it. Collapsing it to .01ms doesn't reduce motion so much
       as delete the affordance: the button just snaps to its hover colours
       with no indication of what happened. Keep the sweep. */
    .btn-wipe__over { transition-duration: 650ms !important; }
}