/* ===================================================================
   RAMA ZANZIBAR — premium restyle
   Type: Avenir Light (body) + Libre Baskerville (display, italic accents)
   Palette: sand ivory · sunset terracotta · spice amber
   =================================================================== */

/* ===== FONTS (self-hosted) ===== */
@font-face {
    font-family: "Avenir";
    src: url("fonts/Avenir-Light.ttf") format("truetype");
    font-weight: 300 500;
    font-style: normal;
    font-display: swap;
}
/* Manrope — real multi-weight variable font for headings & UI */
@font-face {
    font-family: "Manrope";
    src: url("fonts/Manrope.ttf") format("truetype");
    font-weight: 200 800;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Libre Baskerville";
    src: url("fonts/LibreBaskerville.ttf") format("truetype");
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Libre Baskerville";
    src: url("fonts/LibreBaskerville-Italic.ttf") format("truetype");
    font-weight: 400 700;
    font-style: italic;
    font-display: swap;
}

/* ===== RESET & BASE ===== */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
    /* surfaces */
    --bg:          #f7f2ea;   /* warm sand page, matches the nav bar */
    --bg-alt:      #efe7d9;   /* alternating band */
    --surface:     #fffdf9;   /* warm white cards */

    /* ink */
    --ink:         #211c16;   /* warm near-black */
    --ink-soft:    #5a5147;   /* secondary text */
    --ink-faint:   #8a7f70;   /* meta / captions */

    /* brand — charcoal (text emphasis / misc accents) */
    --primary:      #2b2824;
    --primary-dark: #171412;
    --primary-pale: #ece7df;

    /* accent — charcoal (eyebrows, links, small highlights) */
    --accent:       #2b2824;
    --accent-soft:  #e8e2d8;

    /* button fills — charcoal grey with white text */
    --gold:      #2b2824;
    --gold-deep: #16130f;
    --cta-text:  #ffffff;

    /* utility */
    --line:    #e6dccb;
    --white:   #ffffff;
    --star:    #b07d33;

    /* Tunable accents (theme tester) */
    --zanzibar:     #f2d9a8;     /* "Zanzibar" accent in the hero + CTA */
    --zanzibar-nav: #a7d8ec;     /* "Zanzibar" in the header logo — baby blue */
    --contact-icon: #211c16;     /* phone icon inside the white contact button (black) */

    --radius:    18px;
    --radius-sm: 12px;
    --radius-xs: 6px;
    --shadow:      0 1px 2px rgba(33,28,22,.04), 0 10px 30px rgba(33,28,22,.06);
    --shadow-lg:   0 6px 18px rgba(33,28,22,.08), 0 24px 60px rgba(33,28,22,.12);
    --transition: .35s cubic-bezier(.4,0,.2,1);

    --maxw: 1200px;
    --font-body: "Avenir", "Segoe UI", system-ui, -apple-system, sans-serif;
    --font-head: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
}

/* Offset anchor jumps by roughly the scrolled-nav height so a section lands just
   below the bar (no sliver of the previous section peeking above the heading). */
/* Match the page background so iOS rubber-band overscroll doesn't flash white. */
html { scroll-behavior: smooth; scroll-padding-top: 60px; background: var(--bg); }

body {
    font-family: var(--font-body);
    font-weight: 300;
    color: var(--ink);
    line-height: 1.7;
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    /* Only one real Avenir weight (Light) is embedded — never synthesize fake bold/italic */
    font-synthesis: none;
}

img { display: block; max-width: 100%; height: auto; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
::selection { background: var(--primary); color: #fff; }

.container { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }

/* ===== TYPE ===== */
h1, h2, h3, h4 {
    font-family: var(--font-head);
    font-weight: 700;
    line-height: 1.14;
    letter-spacing: -0.025em;
    color: var(--ink);
}
h1 { font-size: clamp(2.6rem, 6vw, 4.6rem); font-weight: 800; }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); }
h3 { font-size: clamp(1.2rem, 1.8vw, 1.45rem); font-weight: 700; letter-spacing: -0.015em; }
em { font-style: normal; color: var(--primary); }
.about-content em {
    font-family: "Libre Baskerville", Georgia, serif;
    font-style: italic;
    color: var(--ink);
}

.section-header { text-align: center; max-width: 640px; margin: 0 auto 4rem; }
.section-tag {
    display: inline-block;
    font-family: var(--font-head);
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .22em;
    color: var(--accent);
    margin-bottom: 1rem;
}
.section-desc {
    color: var(--ink-soft);
    margin-top: 1.1rem;
    font-size: 1.08rem;
    line-height: 1.7;
}

/* ===== BUTTONS ===== */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: var(--font-head);
    font-weight: 600;
    font-size: .82rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 16px 34px;
    border-radius: 50px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: var(--transition);
}
.btn-primary {
    background: var(--gold);
    color: var(--cta-text);
    border-color: var(--gold);
}
.btn-primary:hover {
    background: var(--gold-deep);
    border-color: var(--gold-deep);
    color: var(--cta-text);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}
.btn-outline {
    background: transparent;
    color: #fff;
    border-color: transparent;
    -webkit-backdrop-filter: blur(8px) saturate(1.2);
    backdrop-filter: blur(8px) saturate(1.2);
    background: rgba(255,255,255,.2);   /* milkglass — whiter frosted fill */
}
.btn-outline:hover {
    background: rgba(255,255,255,.34);
    border-color: transparent;
    color: #fff;
    transform: translateY(-2px);
}
.btn-lg { padding: 19px 42px; font-size: .85rem; }

/* Hero "See Tours" — frosted dark-grey glass (same texture as the outline button, darker fill).
   Scoped to the hero so the solid brand button elsewhere (transfers, nav) is untouched. */
.hero-actions .btn-primary {
    background: rgba(22,18,15,.62);
    border-color: transparent;
    color: #fff;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    box-shadow: none;
}
.hero-actions .btn-primary:hover {
    background: rgba(22,18,15,.75);
    border-color: transparent;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: none;
}

/* Second hero button swaps About Rama (desktop) for a call button (mobile).
   The phone number uses the body font (Avenir) so it matches the contact-panel number. */
.hero-call {
    display: none;
    font-family: var(--font-body);
    font-weight: 400;
    text-transform: none;
    letter-spacing: .03em;
    font-size: 1rem;
}
.hero-call svg { width: 17px; height: 17px; flex-shrink: 0; }

/* White WhatsApp button with the brand-green logo */
.btn-whatsapp {
    gap: 11px;
    background: #fff;
    color: var(--ink);
    border-color: #fff;
    box-shadow: var(--shadow);
}
.btn-whatsapp:hover {
    background: #fff;
    color: var(--ink);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}
.wa-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.wa-badge svg { width: 23px; height: 23px; color: #25D366; }

/* Show-all (mobile: reveal remaining tour/gallery items) */
.show-all {
    display: none;
    margin: 2.2rem auto 0;
    padding: 13px 30px;
    font-family: var(--font-head);
    font-weight: 600;
    font-size: .78rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--gold-deep);
    background: transparent;
    border: 1.5px solid var(--gold);
    border-radius: 50px;
    cursor: pointer;
    transition: var(--transition);
}
.show-all:hover { background: var(--gold); color: var(--cta-text); }

/* ===== NAV ===== */
.nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    padding: 16px 0;
    /* transparent at the very top; bright frosted glass fades in on scroll */
    background: transparent;
    box-shadow: none;
    transition: var(--transition);
}
.nav.scrolled {
    padding: 9px 0;
    background: #f7f2ea;
    box-shadow: 0 2px 16px rgba(33,28,22,.08);
}
/* scrolled = dark text on the light bar */
.nav.scrolled .logo { color: var(--ink); }
.nav.scrolled .nav-links a { color: var(--ink-soft); }
.nav.scrolled .nav-links a:hover { color: var(--gold-deep); }
.nav.scrolled .nav-toggle span { background: var(--ink); }

.nav-inner { display: flex; align-items: center; justify-content: space-between; position: relative; }

.logo {
    font-family: var(--font-head);
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: #fff;
    margin-right: auto;   /* push nav actions to the right */
    transition: var(--transition);
}
.logo span { color: var(--zanzibar-nav); font-weight: 500; }

.nav-right { display: flex; align-items: center; gap: 34px; }

.nav-call {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: var(--gold);
    color: var(--cta-text);
    font-family: var(--font-body);   /* Avenir, to match the contact-panel number */
    font-weight: 400;
    font-size: .92rem;
    letter-spacing: .02em;
    padding: 10px 18px;
    border-radius: 50px;
    box-shadow: 0 4px 14px rgba(33,28,22,.16);
    transition: var(--transition);
    white-space: nowrap;
}
.nav-call svg { width: 16px; height: 16px; flex-shrink: 0; }

.nav-flag { display: inline-flex; align-items: center; margin-left: 16px; }
.nav-flag svg { width: 28px; height: auto; display: block; border-radius: 3px; box-shadow: 0 1px 4px rgba(0,0,0,.28); }
.nav-call:hover { background: var(--gold-deep); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(33,28,22,.5); }

.nav-links {
    display: flex;
    align-items: center;
    gap: 40px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
.nav-links a {
    color: rgba(255,255,255,.94);
    font-family: var(--font-head);
    font-size: .82rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    position: relative;
    transition: var(--transition);
}
.nav-links a::after {
    content: "";
    position: absolute;
    left: 0; bottom: -6px;
    width: 0; height: 2px;
    background: currentColor;
    transition: width var(--transition);
}
.nav-links a:hover { color: #fff; }
.nav-links a:hover::after,
.nav-links a.active::after { width: 100%; }
.nav.scrolled .nav-links a.active { color: var(--ink); }

.nav-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
}
.nav-toggle span {
    width: 26px; height: 2px;
    background: #fff;
    border-radius: 2px;
    transition: var(--transition);
}

/* ===== HERO ===== */
.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    overflow: hidden;
}
.hero-bg { position: absolute; inset: 0; overflow: hidden; }
.hero-bg img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1.2s ease-in-out;
    /* gentle continuous zoom — runs independent of the fade so it never snaps */
    animation: heroZoom 24s ease-in-out infinite alternate;
    will-change: opacity;
}
.hero-bg img.active { opacity: 1; }
@keyframes heroZoom {
    from { transform: scale(1); }
    to   { transform: scale(1.09); }
}
@media (prefers-reduced-motion: reduce) {
    .hero-bg img { animation: none; transition: opacity .3s ease; }
}
.hero-overlay {
    position: absolute; inset: 0;
    /* neutral dark — darkens for legibility without tinting the water orange */
    background:
        linear-gradient(180deg, rgba(14,22,26,.32) 0%, rgba(14,22,26,.10) 42%, rgba(14,22,26,.62) 100%);
}
.hero-content {
    position: relative;
    z-index: 2;
    text-align: left;
    color: #fff;
    margin: 0;
    max-width: 820px;
    padding: 0 28px 14vh clamp(2rem, 6vw, 7rem);
}
.hero h1 {
    color: #fff;
    font-weight: 800;
    margin-bottom: 1.5rem;
    text-shadow: 0 2px 30px rgba(0,0,0,.25);
}
.hero h1 em { font-style: normal; color: var(--zanzibar); }
/* Mobile-only line break so the headline stacks: Explore / Zanzibar / with a Local */
.br-m { display: none; }
.hero-sub {
    font-size: clamp(1.05rem, 2vw, 1.28rem);
    max-width: 520px;
    margin: 0 0 2.5rem;
    color: rgba(255,255,255,.9);
    font-weight: 300;
    line-height: 1.7;
}
.hero-actions { display: flex; gap: 16px; justify-content: flex-start; flex-wrap: wrap; }

.hero-scroll {
    position: absolute;
    bottom: 34px; left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    animation: bounce 2.4s infinite;
}
.hero-scroll a { color: rgba(255,255,255,.7); transition: var(--transition); }
.hero-scroll a:hover { color: #fff; }
@keyframes bounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50%      { transform: translateX(-50%) translateY(9px); }
}

/* ===== TOURS ===== */
.tours { padding: clamp(3.25rem, 5.5vw, 5rem) 0; }
.tours .container { max-width: 1060px; }

.tours-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 26px;
}

.tour-card {
    display: flex;
    gap: 34px;
    align-items: flex-start;
    transition: var(--transition);
}

.tour-img {
    position: relative;
    width: 48%;
    aspect-ratio: 3 / 4;
    flex-shrink: 0;
    border-radius: var(--radius);
    overflow: hidden;
    /* Composite the rounded box itself so its border-radius clip is enforced at the
       compositor level. Everything inside (all slides + the clip) then scales as one
       rounded unit — no square-corner flash on slide switch, and no sharp edges during
       an iOS pinch-zoom, because there are no separately-composited child layers to lag. */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    isolation: isolate;
}
.tour-img > img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center 35%;   /* favour the upper band so faces aren't cropped */
    border-radius: inherit;        /* round the image itself so corners never flash square mid-transition */
    transition: transform .8s cubic-bezier(.2,.7,.2,1);
}
.tour-card:hover .tour-img > img,
.tour-card:hover .tour-carousel img.active { transform: scale(1.06); }

.tour-badge {
    position: absolute;
    top: 16px; left: 16px;
    z-index: 4;
    background: rgba(255,253,249,.92);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: var(--primary-dark);
    font-family: var(--font-body);
    font-size: .66rem;
    font-weight: 600;
    padding: 7px 14px;
    border-radius: 50px;
    text-transform: uppercase;
    letter-spacing: .13em;
}
.tour-badge.hot { background: var(--accent); color: #fff; }

.tour-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding: 4px 0 0;
}
.tour-body h3 { margin-bottom: .7rem; }
.tour-body p {
    color: var(--ink-soft);
    font-size: .96rem;
    margin-bottom: 1.5rem;
    line-height: 1.7;
}

.tour-meta {
    display: flex;
    gap: 20px;
    margin-top: auto;
    color: var(--ink-faint);
    font-size: .82rem;
    letter-spacing: .02em;
    padding-top: 1.1rem;
    border-top: 1px solid var(--line);
}
.tour-meta span { display: flex; align-items: center; gap: 7px; }
.tour-meta svg { color: var(--accent); }

/* Tour Card Carousel */
.tour-carousel { position: relative; }
.tour-carousel img {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center 35%;
    border-radius: inherit;        /* round each slide directly to avoid square-corner flash on switch */
    opacity: 0;
    transition: opacity .5s ease, transform .8s cubic-bezier(.2,.7,.2,1);
}
.tour-carousel img.active { opacity: 1; }

.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 32px; height: 32px;
    border-radius: 50%;
    /* Same frosted milkglass material as the About Rama button */
    background: rgba(20,26,30,.14);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    border: 1px solid transparent;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    box-shadow: none;
    transition: opacity .3s ease, transform .25s cubic-bezier(.2,.7,.2,1), background .25s ease;
    z-index: 5;
}
.carousel-btn svg { width: 14px; height: 14px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.35)); }
.tour-carousel:hover .carousel-btn { opacity: 1; }
.carousel-btn:hover { background: rgba(255,255,255,.22); }
.carousel-btn:active { transform: translateY(-50%) scale(.9); }
.carousel-btn.prev { left: 10px; }
.carousel-btn.next { right: 10px; }
.carousel-btn.prev:hover { transform: translateY(-50%) translateX(-2px); }
.carousel-btn.next:hover { transform: translateY(-50%) translateX(2px); }
/* Touch devices have no hover, so keep the arrows gently visible and discoverable */
@media (hover: none) {
    .carousel-btn { opacity: .72; }
    .carousel-btn:active { opacity: 1; }
}

.carousel-dots {
    position: absolute;
    bottom: 12px; left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 7px;
    z-index: 5;
}
.carousel-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: rgba(255,255,255,.55);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: var(--transition);
}
.carousel-dot.active { background: #fff; transform: scale(1.35); }

/* Transfers Note */
/* ===== SERVICES / TRANSFERS (banner) ===== */
.services { padding: clamp(1.5rem, 3vw, 2.5rem) 0; }
.transfer-banner {
    display: flex;
    align-items: center;
    gap: 22px;
    max-width: 860px;
    margin: 0 auto;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 26px 32px;
    box-shadow: var(--shadow);
}
.transfer-banner-icons { display: flex; gap: 10px; flex-shrink: 0; }
.transfer-banner-icon {
    width: 56px; height: 56px;
    border-radius: 15px;
    background: var(--gold);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.transfer-banner-icon svg { width: 28px; height: 28px; color: #fff; }
.transfer-banner-text { flex: 1; }
.transfer-banner-text h2 { font-size: clamp(1.25rem, 2.2vw, 1.6rem); margin-bottom: .4rem; }
.transfer-banner-text p { color: var(--ink-soft); font-size: .98rem; line-height: 1.6; max-width: 680px; }
.transfer-banner .btn { flex-shrink: 0; }

/* ===== GALLERY ===== */
.gallery { padding: clamp(3.25rem, 5.5vw, 5rem) 0; }

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 210px;
    grid-auto-flow: dense;
    gap: 14px;
}
.gallery-item {
    border-radius: var(--radius-sm);
    overflow: hidden;
    box-shadow: var(--shadow);
}
.gallery-item img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .7s cubic-bezier(.2,.7,.2,1);
    cursor: pointer;
}
.gallery-item img:hover { transform: scale(1.07); }
.gallery-item.tall { grid-row: span 2; }
.gallery-item.wide { grid-column: span 2; }

/* ===== ABOUT ===== */
.about { padding: clamp(3.25rem, 5.5vw, 5rem) 0; }

.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 72px;
    align-items: center;
}
.about-img {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}
.about-img::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 1px solid rgba(255,255,255,.25);
    border-radius: var(--radius);
    pointer-events: none;
}
.about-img img { width: 100%; height: 560px; object-fit: cover; }
.about-content .section-tag { margin-bottom: .6rem; }
.about-content h2 { margin-bottom: 1.5rem; }
.about-content p {
    color: var(--ink-soft);
    margin-bottom: 1.1rem;
    line-height: 1.8;
}

.about-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 2rem 0 0;
}
.about-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 400;
    color: var(--ink);
}
.about-list svg { color: var(--primary); flex-shrink: 0; }

/* ===== CTA ===== */
.cta {
    position: relative;
    padding: clamp(2.5rem, 4.5vw, 4rem) 0;
    color: #fff;
    text-align: center;
    overflow: hidden;
}
.cta-bg { position: absolute; inset: 0; }
.cta-bg img { width: 100%; height: 100%; object-fit: cover; }
.cta-overlay {
    position: absolute; inset: 0;
    /* neutral dark — no orange tint */
    background: linear-gradient(180deg, rgba(14,22,26,.62), rgba(14,22,26,.8));
}
.cta-inner { position: relative; z-index: 2; max-width: 640px; margin: 0 auto; }
.cta h2 { color: #fff; margin-bottom: 1.2rem; }
.cta h2 em { color: var(--zanzibar); }
.cta p {
    color: rgba(255,255,255,.82);
    max-width: 520px;
    margin: 0 auto 2.5rem;
    font-size: 1.1rem;
    line-height: 1.7;
}

/* ===== FOOTER ===== */
.footer { background: #14110d; color: rgba(255,255,255,.6); }
/* Scoped as `.footer .footer-bottom` (0,2,0) so the vertical padding outranks the
   ≤480 `.container` rule, which otherwise (equal specificity, later source) zeroes it
   out on mobile. Longhand top/bottom keeps the container's responsive left/right padding. */
.footer .footer-bottom {
    padding-top: 1.6rem;
    padding-bottom: 1.6rem;
    text-align: center;
}
.footer-bottom p { font-size: .84rem; letter-spacing: .03em; }
.footer-bottom a { color: rgba(255,255,255,.85); text-decoration: underline; text-underline-offset: 2px; }
.footer-bottom a:hover { color: #fff; }

/* ===== LEGAL / PRIVACY PAGE ===== */
.legal-nav { background: var(--bg); border-bottom: 1px solid var(--line); }
.legal-nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 16px;
    padding-bottom: 16px;
}
/* Dark logo on the sand bar (the home nav logo is white over the hero image) */
.legal-logo { color: var(--ink); margin-right: 0; }
.legal-back {
    font-family: var(--font-head);
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--ink-soft);
    transition: var(--transition);
}
.legal-back:hover { color: var(--ink); }

.legal {
    max-width: 760px;
    padding-top: 4.5rem;
    padding-bottom: 6rem;
}
.legal-eyebrow {
    font-family: var(--font-head);
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .22em;
    color: var(--accent);
    margin-bottom: .9rem;
}
.legal h1 { font-size: clamp(2.2rem, 5vw, 3.2rem); margin-bottom: .6rem; }
.legal-updated { color: var(--ink-faint); font-size: .9rem; margin-bottom: 2.4rem; }
.legal-lead {
    font-size: 1.14rem;
    color: var(--ink-soft);
    line-height: 1.75;
    padding-bottom: 1.2rem;
    border-bottom: 1px solid var(--line);
    margin-bottom: 2.4rem;
}
.legal h2 {
    font-size: clamp(1.3rem, 2.4vw, 1.6rem);
    margin: 2.6rem 0 .9rem;
}
.legal p { color: var(--ink-soft); margin-bottom: 1.1rem; }
.legal strong { color: var(--ink); font-weight: 500; }
.legal a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.legal a:hover { color: var(--gold-deep); }
.legal-list { margin: 0 0 1.1rem; padding-left: 0; }
.legal-list li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: .6rem;
    color: var(--ink-soft);
}
.legal-list li::before {
    content: "";
    position: absolute;
    left: 0; top: .72em;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--star);
}
.legal-contact {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 20px 24px;
    line-height: 2;
    color: var(--ink);
}

/* ===== CONTACT PANEL ===== */
.contact-bubble {
    position: fixed;
    bottom: 30px; right: 30px;
    z-index: 999;
}
.contact-toggle {
    width: 62px; height: 62px;
    border-radius: 50%;
    background: #ffffff;              /* subtle white button */
    border: 1px solid rgba(33,28,22,.08);
    color: var(--contact-icon);                  /* baby blue phone icon (baseline) */
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 22px rgba(33,28,22,.2);
    transition: var(--transition);
    position: relative;
}
.contact-toggle:hover { transform: scale(1.07); box-shadow: 0 10px 28px rgba(33,28,22,.28); }
.contact-toggle svg { width: 26px; height: 26px; transition: var(--transition); position: absolute; }
.contact-toggle .icon-close { opacity: 0; transform: rotate(-90deg) scale(.5); }
.contact-bubble.open .contact-toggle .icon-contact { opacity: 0; transform: rotate(90deg) scale(.5); }
.contact-bubble.open .contact-toggle .icon-close { opacity: 1; transform: rotate(0) scale(1); }

.contact-panel {
    position: absolute;
    bottom: 78px; right: 0;
    width: 288px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    opacity: 0;
    transform: translateY(12px) scale(.96);
    pointer-events: none;
    transition: var(--transition);
}
.contact-bubble.open .contact-panel {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.contact-panel-header {
    background: var(--surface);
    color: var(--ink);
    padding: 18px 22px 14px;
    border-bottom: 1px solid var(--line);
}
.contact-panel-header h4 {
    font-family: var(--font-head);
    font-weight: 700;
    color: var(--ink);
    font-size: 1.1rem;
    margin-bottom: 3px;
}
.contact-panel-header p { font-size: .82rem; color: var(--ink-soft); white-space: nowrap; }

.contact-panel-body { padding: 16px 22px 18px; }
.contact-item {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 13px 0;
    border-bottom: 1px solid var(--line);
}
.contact-item:last-child { border-bottom: none; }
.contact-item-icon {
    width: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--gold-deep);
}
.contact-item-icon svg { width: 19px; height: 19px; color: var(--gold-deep); }
.contact-item-text { flex: 1; }
.contact-item-label {
    font-size: .68rem;
    color: var(--ink-faint);
    text-transform: uppercase;
    letter-spacing: .12em;
    font-weight: 600;
}
.contact-item-value { font-size: .96rem; font-weight: 400; color: var(--ink); margin-top: 3px; }
.contact-item-value a { color: var(--gold-deep); }
.contact-item-value a:hover { color: var(--gold); }

/* Desktop: auto-open */
@media (min-width: 769px) {
    .contact-bubble.auto-open .contact-panel {
        opacity: 1;
        transform: translateY(0) scale(1);
        pointer-events: auto;
    }
    .contact-bubble.auto-open .icon-contact { opacity: 0; transform: rotate(90deg) scale(.5); }
    .contact-bubble.auto-open .icon-close { opacity: 1; transform: rotate(0) scale(1); }
}

/* ===== LIGHTBOX ===== */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(8px, 2vw, 28px);
    padding: clamp(16px, 4vw, 48px);
    background: rgba(28,18,11,.9);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, visibility .3s ease;
}
.lightbox.open { opacity: 1; visibility: visible; }

.lightbox-figure {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    max-width: 100%;
    max-height: 100%;
    margin: 0;
}
.lightbox-figure img {
    /* contain-fit so ANY aspect ratio sits nicely, incl. mobile portrait */
    max-width: min(92vw, 1200px);
    max-height: 82vh;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: var(--radius-sm);
    box-shadow: 0 20px 70px rgba(0,0,0,.5);
    transform: scale(.96);
    transition: transform .35s cubic-bezier(.2,.7,.2,1);
}
.lightbox.open .lightbox-figure img { transform: scale(1); }
.lightbox-figure figcaption {
    color: rgba(255,255,255,.85);
    font-size: .88rem;
    letter-spacing: .02em;
    text-align: center;
    max-width: 90vw;
}

.lightbox-close,
.lightbox-nav {
    flex-shrink: 0;
    border: none;
    cursor: pointer;
    color: #fff;
    background: rgba(255,255,255,.12);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}
.lightbox-nav { width: 52px; height: 52px; }
.lightbox-nav svg { width: 26px; height: 26px; }
.lightbox-close {
    position: absolute;
    top: clamp(14px, 3vw, 28px);
    right: clamp(14px, 3vw, 28px);
    width: 46px; height: 46px;
    z-index: 2;
}
.lightbox-close svg { width: 22px; height: 22px; }
.lightbox-close:hover,
.lightbox-nav:hover { background: rgba(255,255,255,.25); transform: scale(1.08); }
.lightbox-nav:active { transform: scale(.96); }

.gallery-item img,
.tour-carousel img,
.tour-img > img { cursor: zoom-in; }

/* Prevent body scroll when lightbox open */
body.lb-lock { overflow: hidden; }

@media (max-width: 640px) {
    .lightbox { flex-direction: column; padding: 16px; gap: 12px; }
    .lightbox-figure { order: 1; }
    .lightbox-figure img { max-width: 94vw; max-height: 72vh; }
    /* nav buttons sit below the image on small screens */
    .lightbox-nav { order: 2; width: 46px; height: 46px; }
    .lightbox-nav.prev { position: absolute; bottom: 22px; left: 24px; }
    .lightbox-nav.next { position: absolute; bottom: 22px; right: 24px; }
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
    .tours-grid { grid-template-columns: repeat(2, 1fr); }
    .gallery-grid { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 190px; }
    .about-grid { gap: 48px; }
}

@media (max-width: 768px) {
    html { scroll-padding-top: 50px; }   /* shorter nav on mobile */
    .br-m { display: inline; }           /* stack the headline into 3 lines on phones */
    .nav { padding: 10px 0; }
    .nav-right { gap: 12px; }
    .nav-call { padding: 9px 15px; font-size: .78rem; }
    /* Mobile: compact dropdown menu in the top-right, hide the wide call pill */
    .nav-toggle { display: flex; position: relative; z-index: 110; }
    .nav-call, .nav-flag { display: none; }
    .nav-links {
        display: flex;
        position: absolute;
        top: calc(100% + 10px);
        right: 0; left: auto;
        transform: translateY(-8px);
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        width: 200px;
        background: var(--surface);
        border: 1px solid var(--line);
        border-radius: 14px;
        box-shadow: var(--shadow-lg);
        padding: 8px;
        opacity: 0;
        visibility: hidden;
        transition: opacity .22s ease, transform .22s ease, visibility .22s;
        z-index: 105;
    }
    .nav-links.open { opacity: 1; visibility: visible; transform: translateY(0); }
    .nav-links a {
        display: block;
        padding: 11px 14px;
        border-radius: 9px;
        color: var(--ink);
        font-size: .9rem;
        letter-spacing: .04em;
    }
    .nav-links a::after { display: none; }
    .nav-links a:hover { background: var(--accent-soft); color: var(--gold-deep); }

    /* Anchor the hero text in the lower third, over the image, with the scroll cue below.
       svh keeps it clear of iOS Safari's bottom bar so nothing hides behind browser chrome. */
    .hero { align-items: flex-end; min-height: 100vh; min-height: 100svh; }
    /* Extra bottom padding lifts the buttons clear of the scroll cue below them.
       Scoped as `.hero .hero-content` so it outranks the ≤480 `.container` padding,
       which otherwise (equal specificity, later source) zeroes out this bottom padding. */
    .hero .hero-content { padding: 0 24px 116px; max-width: 560px; }
    .hero-sub { margin-bottom: 1.9rem; }
    /* Stack the two CTAs full-width instead of side-by-side.
       Cap at 440px so the column still fills the content width on the widest phones
       (iPhone Pro Max ≈ 430px) — a lower cap left a gap on the right and the buttons
       looked stranded to the left on anything wider than a small phone. */
    .hero-actions { flex-direction: column; align-items: stretch; gap: 12px; width: 100%; max-width: 440px; }
    .hero-actions .btn { width: 100%; justify-content: center; }
    /* On mobile the nav phone pill is hidden, so the 2nd hero button becomes the call button */
    .hero-about { display: none; }
    .hero-call { display: inline-flex; }
    .hero-scroll { display: block; bottom: 22px; }

    .tours-grid { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; }
    .tour-card { flex-direction: column; }
    .tour-img { width: 100%; height: 220px; }
    /* Mobile crop is a short landscape band, so let each carousel image set its own
       vertical focal point via --posm (falls back to the default). Images that carry
       an inline object-position keep it (inline wins), so only opt-in images change. */
    .tour-carousel img { object-position: var(--posm, center 35%); }
    .tour-body { padding: 24px 22px 26px; }
    /* Hug the label and center the pill (base margin is `2.2rem auto 0`) */
    .show-all { display: block; width: -moz-fit-content; width: fit-content; }
    .tours-grid:not(.expanded) .tour-card:nth-child(n+4) { display: none; }
    .gallery-grid:not(.expanded) .gallery-item:nth-child(n+7) { display: none; }
    /* Compact, centered transfer card on mobile */
    .transfer-banner { flex-direction: column; align-items: center; text-align: center; gap: 14px; padding: 24px 20px; }
    .transfer-banner-icon { width: 44px; height: 44px; border-radius: 12px; }
    .transfer-banner-icon svg { width: 23px; height: 23px; }
    .transfer-banner-text h2 { margin-bottom: .3rem; }
    .transfer-banner-text p { font-size: .92rem; line-height: 1.5; }
    .transfer-banner .btn { width: 100%; justify-content: center; }
    .gallery-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 170px; }
    .gallery-item.wide { grid-column: span 1; }
    .gallery-item.tall { grid-row: span 1; }

    /* Extra breathing room so the About copy doesn't run edge-to-edge.
       Scoped to .about so it outranks the ≤480 `.container` padding. */
    .about .container { padding-left: 30px; padding-right: 30px; }
    .about-grid { grid-template-columns: 1fr; gap: 40px; }
    .about-img img { height: 340px; }
    .about-img { order: -1; }
    /* Align check icons to the first line so multi-line items (e.g. the "kidogo" one) don't look off-centre */
    .about-list li { align-items: flex-start; }
    .about-list svg { margin-top: 4px; }

    /* Tighten the CTA copy on mobile; let the button hug its label rather than stretch */
    .cta p { font-size: 1rem; margin-bottom: 2rem; }
    .cta .btn-lg { width: auto; max-width: 100%; justify-content: center; }

    .contact-panel { width: 300px; right: -6px; }
}

@media (max-width: 480px) {
    .container { padding: 0 18px; }
    .hero h1 { font-size: 2.5rem; }
    .nav-call { padding: 9px 14px; font-size: .74rem; }
    .btn { padding: 15px 28px; }
    .gallery-grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 150px; }
    .tour-body { padding: 24px 22px 26px; }

    .contact-bubble { right: 18px; bottom: 22px; }
    .contact-toggle { width: 54px; height: 54px; }
    .contact-toggle svg { width: 22px; height: 22px; }
    .contact-panel {
        position: fixed;
        bottom: 86px; right: 16px; left: auto;
        width: min(280px, calc(100vw - 32px));
        max-height: calc(100vh - 112px);
        overflow-y: auto;
    }
    .contact-panel-header { padding: 18px 22px; }
    .contact-panel-body { padding: 14px 22px; }
}