/* ==========================================================================
   Al-Zaina Tour and Travels — Landing Page
   Palette: light green + beige
   ========================================================================== */

:root {
    /* Beige / sand */
    --sand-50:  #FDFBF5;
    --sand-100: #F8F2E4;
    --sand-200: #F0E7D3;
    --sand-300: #E3D6BA;
    --sand-400: #D0BC94;
    --sand-500: #B99F70;

    /* Light green */
    --green-50:  #F0F6EC;
    --green-100: #DEEBD5;
    --green-200: #C2DAB4;
    --green-300: #A2C68F;
    --green-400: #85B26E;
    --green-500: #689652;
    --green-600: #537D40;
    --green-700: #3F6132;
    --green-900: #253D1E;

    --ink:    #26301F;
    --body:   #5C6854;
    --muted:  #7E8A76;
    --line:   #E6DFCD;
    --white:  #FFFFFF;

    --radius-sm: 10px;
    --radius:    16px;
    --radius-lg: 22px;

    --shadow-sm: 0 2px 10px rgba(37, 61, 30, .06);
    --shadow:    0 10px 30px rgba(37, 61, 30, .09);
    --shadow-lg: 0 22px 50px rgba(37, 61, 30, .14);

    --font-head: 'Fraunces', Georgia, 'Times New Roman', serif;
    --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    --header-h: 76px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }

body {
    font-family: var(--font-body);
    background: var(--sand-50);
    color: var(--body);
    font-size: 16px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
ul { list-style: none; }

h1, h2, h3, h4 {
    font-family: var(--font-head);
    color: var(--green-900);
    line-height: 1.15;
    font-weight: 600;
    letter-spacing: -.01em;
}

.container { width: min(1240px, 100% - 40px); margin-inline: auto; }

.section { padding: 92px 0; }
.section--tint { background: var(--sand-100); }
.section--green { background: var(--green-50); }

/* ---------- Section header ---------- */
.sec-head { text-align: center; max-width: 720px; margin: 0 auto 52px; }
.sec-head--left { text-align: left; margin-inline: 0; }

.eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--green-100);
    color: var(--green-700);
    font-size: 12.5px; font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase;
    padding: 7px 16px; border-radius: 999px;
    margin-bottom: 18px;
}
.eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--green-500); }

.sec-head h2 { font-size: clamp(30px, 4vw, 44px); margin-bottom: 14px; }
.sec-head p  { color: var(--muted); font-size: 16.5px; }

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    padding: 13px 26px; border-radius: 999px;
    font-size: 14.5px; font-weight: 700; letter-spacing: .01em;
    transition: transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
    white-space: nowrap;
}
.btn svg { width: 16px; height: 16px; flex-shrink: 0; }

.btn-primary { background: var(--green-500); color: #fff; box-shadow: 0 8px 20px rgba(104, 150, 82, .28); margin-right: 38px; }
.btn-primary:hover { background: var(--green-600); transform: translateY(-2px); box-shadow: 0 12px 26px rgba(104, 150, 82, .36); }

.btn-sand { background: var(--sand-300); color: var(--green-900); }
.btn-sand:hover { background: var(--sand-400); transform: translateY(-2px); }

.btn-ghost { border: 1.5px solid var(--green-200); color: var(--green-700); background: #fff; }
.btn-ghost:hover { border-color: var(--green-400); background: var(--green-50); transform: translateY(-2px); }

.btn-light { background: rgba(255,255,255,.16); color: #fff; border: 1.5px solid rgba(255,255,255,.4); backdrop-filter: blur(6px); }
.btn-light:hover { background: rgba(255,255,255,.28); transform: translateY(-2px); }

.btn-block { width: 100%; }
.btn-lg { padding: 16px 32px; font-size: 15.5px; }

/* ==========================================================================
   Header
   ========================================================================== */
.topbar {
    background: var(--green-700);
    color: var(--green-100);
    font-size: 13.5px;
}
.topbar .container { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 40px; flex-wrap: wrap; }
.topbar a { display: inline-flex; align-items: center; gap: 7px; transition: color .2s; }
.topbar a:hover { color: #fff; }
.topbar svg { width: 14px; height: 14px; opacity: .85; }
.topbar-left, .topbar-right { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.topbar-tag { color: var(--green-200); letter-spacing: .06em; }

.site-header {
    position: sticky; top: 0; z-index: 900;
    background: rgba(253, 251, 245, .88);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line);
    transition: box-shadow .3s ease, background .3s ease;
}
.site-header.scrolled { box-shadow: var(--shadow-sm); background: rgba(253, 251, 245, .97); }
.site-header .container { display: flex; align-items: center; gap: 26px; min-height: var(--header-h); }

/* flex-shrink: 0 — the brand is the only flexible item in the header row, so
   without this the logo is the thing that collapses when the nav gets tight. */
.brand { display: flex; align-items: center; margin-right: auto; flex-shrink: 0; }
/* The wordmark is part of the artwork, so the height is what's set and the
   width follows the logo's own 3.75:1 ratio. `object-fit: contain` matters:
   on a narrow phone the flex row squeezes this box, and without it the
   artwork would be stretched horizontally rather than scaled down. */
.brand-logo { height: 44px; width: auto; max-width: 100%; object-fit: contain; margin-left: 33px; }

.main-nav { display: flex; align-items: center; gap: 4px; }
.main-nav a {
    padding: 9px 15px; border-radius: 999px;
    font-size: 14.5px; font-weight: 600; color: var(--body);
    transition: background .2s, color .2s;
}
.main-nav a:hover, .main-nav a.active { background: var(--green-100); color: var(--green-700); }

.header-cta { display: flex; align-items: center; gap: 20px; }
.header-phone { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14.5px; color: var(--green-700); }
.header-phone svg { width: 17px; height: 17px; }

.nav-toggle { display: none; width: 44px; height: 44px; border-radius: 12px; background: var(--green-100); color: var(--green-700); }
.nav-toggle svg { width: 22px; height: 22px; margin: auto; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero { position: relative; overflow: hidden; padding: 86px 0 96px; isolation: isolate; }
.hero-bg { position: absolute; inset: 0; z-index: -2; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; }
.hero-bg::after {
    content: ""; position: absolute; inset: 0;
    background:
        linear-gradient(100deg, rgba(30, 52, 24, .90) 0%, rgba(37, 61, 30, .74) 42%, rgba(37, 61, 30, .34) 100%),
        linear-gradient(to top, rgba(37, 61, 30, .55), transparent 55%);
}

.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }

.hero-copy .eyebrow { background: rgba(255, 255, 255, .16); color: #EAF3E4; backdrop-filter: blur(6px); }
.hero-copy .eyebrow::before { background: var(--green-300); }
.hero-copy h1 {
    color: #fff; font-size: clamp(38px, 5.4vw, 62px);
    line-height: 1.06; margin-bottom: 20px; font-weight: 600;
}
.hero-copy h1 em { font-style: italic; color: var(--green-300); }
.hero-copy > p { color: rgba(255,255,255,.87); font-size: 17.5px; max-width: 520px; margin-bottom: 30px; }

.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 42px; }

.hero-stats {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px;
    padding-top: 26px; border-top: 1px solid rgba(255,255,255,.18);
}
.hero-stats div { min-width: 0; }
.hero-stats div strong { display: block; font-family: var(--font-head); font-size: 29px; color: #fff; line-height: 1; margin-bottom: 4px; }
.hero-stats div span { font-size: 11.5px; color: rgba(255,255,255,.72); letter-spacing: .07em; text-transform: uppercase; line-height: 1.35; display: block; }

/* Featured card slider */
.feature-slider { position: relative; height: 460px; }
.feature-card {
    position: absolute; inset: 0;
    background: var(--sand-50); border-radius: var(--radius-lg);
    overflow: hidden; box-shadow: var(--shadow-lg);
    opacity: 0; transform: translateY(26px) scale(.95); pointer-events: none;
    transition: opacity .55s ease, transform .55s ease;
}
.feature-card.active { opacity: 1; transform: none; pointer-events: auto; }
.feature-card-img { position: relative; height: 250px; }
.feature-card-img img { width: 100%; height: 100%; object-fit: cover; }
.feature-loc {
    position: absolute; top: 16px; left: 16px;
    background: rgba(253, 251, 245, .93); color: var(--green-800, var(--green-700));
    font-size: 12.5px; font-weight: 700; padding: 6px 14px; border-radius: 999px;
    display: inline-flex; align-items: center; gap: 6px;
}
.feature-loc svg { width: 13px; height: 13px; color: var(--green-500); }
.feature-card-body { padding: 22px 24px 24px; }
.feature-card-body h4 { font-size: 22px; margin-bottom: 12px; }
.feature-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.feature-tags span {
    background: var(--green-100); color: var(--green-700);
    font-size: 12px; font-weight: 700; padding: 5px 12px; border-radius: 999px;
}
.feature-tags span:nth-child(2) { background: var(--sand-200); color: var(--sand-500); }
.feature-card-body p { font-size: 14.5px; color: var(--muted); margin-bottom: 18px; }

.slider-dots { display: flex; gap: 9px; justify-content: center; margin-top: 22px; }
.slider-dots button { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.4); transition: all .3s; }
.slider-dots button.active { background: var(--green-300); width: 30px; border-radius: 999px; }

/* ==========================================================================
   Trust strip
   ========================================================================== */
.trust { background: var(--green-900); color: var(--green-100); padding: 26px 0; }
.trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
.trust-item { display: flex; align-items: center; gap: 13px; }
.trust-item svg { width: 24px; height: 24px; color: var(--green-300); flex-shrink: 0; }
.trust-item strong { display: block; color: #fff; font-size: 15px; }
.trust-item span { font-size: 13px; color: rgba(222, 235, 213, .7); }

/* ==========================================================================
   Package cards + carousel
   ========================================================================== */
.carousel { position: relative; }
.carousel-track {
    display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 3 * 26px) / 4);
    gap: 26px; overflow-x: auto; scroll-snap-type: x mandatory;
    padding: 6px 4px 22px; scrollbar-width: none;
}
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-track > * { scroll-snap-align: start; }

/* Tracks with only three cards fill the row instead of leaving a gap */
.carousel-track[data-count="3"] { grid-auto-columns: calc((100% - 2 * 26px) / 3); }

.carousel-nav {
    display: flex; gap: 16px; align-items: center; justify-content: center;
    margin-top: 8px;
}
.carousel-nav.is-hidden { display: none; }
.carousel-nav > button {
    width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0;
    background: #fff; border: 1.5px solid var(--line); color: var(--green-700);
    display: grid; place-items: center;
    transition: background .25s ease, border-color .25s ease, color .25s ease, transform .25s ease;
}
.carousel-nav > button:hover { background: var(--green-500); border-color: var(--green-500); color: #fff; transform: translateY(-2px); }
.carousel-nav > button:focus-visible { outline: 2px solid var(--green-500); outline-offset: 3px; }
.carousel-nav svg { width: 18px; height: 18px; }

.carousel-dots { display: flex; align-items: center; gap: 8px; }
.carousel-dot {
    width: 9px; height: 9px; border-radius: 50%; padding: 0;
    background: var(--sand-300); border: none;
    transition: background .25s ease, width .25s ease;
}
.carousel-dot:hover { background: var(--green-300); }
.carousel-dot.active { background: var(--green-500); width: 28px; border-radius: 999px; }
.carousel-dot:focus-visible { outline: 2px solid var(--green-500); outline-offset: 3px; }

.pkg-card {
    background: #fff; border-radius: var(--radius);
    overflow: hidden; box-shadow: var(--shadow-sm);
    border: 1px solid var(--line);
    display: flex; flex-direction: column;
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.pkg-card:hover { transform: translateY(-7px); box-shadow: var(--shadow); border-color: var(--green-200); }

.pkg-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.pkg-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.pkg-card:hover .pkg-media img { transform: scale(1.07); }
.pkg-media::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(to top,
        rgba(28, 47, 22, .94) 0%,
        rgba(28, 47, 22, .70) 26%,
        rgba(28, 47, 22, .12) 62%,
        rgba(28, 47, 22, .05) 100%);
}

.pkg-duration {
    position: absolute; top: 14px; right: 14px; z-index: 2;
    background: rgba(253, 251, 245, .92); color: var(--green-900);
    font-size: 12px; font-weight: 800; letter-spacing: .03em;
    padding: 7px 13px; border-radius: 999px; backdrop-filter: blur(4px);
}
.pkg-badge {
    position: absolute; top: 14px; left: 14px; z-index: 2;
    background: var(--green-500); color: #fff;
    font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
    padding: 6px 12px; border-radius: 999px;
}
.pkg-overlay { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 18px; }
.pkg-overlay p {
    color: rgba(255,255,255,.95); font-size: 13px; line-height: 1.5; font-weight: 500;
    display: flex; align-items: flex-start; gap: 7px;
    text-shadow: 0 1px 6px rgba(20, 34, 16, .6);
}
.pkg-overlay p svg { width: 14px; height: 14px; color: var(--green-300); flex-shrink: 0; margin-top: 3px; }

.pkg-body { padding: 20px 20px 22px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.pkg-body h3 { font-size: 18px; line-height: 1.3; }
.pkg-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; }
.pkg-price span { display: block; font-size: 11.5px; color: var(--muted); letter-spacing: .08em; text-transform: uppercase; }
.pkg-price strong { font-family: var(--font-head); font-size: 21px; color: var(--green-700); }
.pkg-book {
    display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
    background: var(--green-100); color: var(--green-700);
    font-size: 13.5px; font-weight: 700; padding: 10px 16px; border-radius: 999px;
    transition: all .25s;
}
.pkg-book:hover { background: var(--green-500); color: #fff; }
.pkg-book svg { width: 14px; height: 14px; }

/* ==========================================================================
   Hotels & houseboats
   ========================================================================== */
.stay-card {
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
    overflow: hidden; box-shadow: var(--shadow-sm);
    display: flex; flex-direction: column;
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.stay-card:hover { transform: translateY(-7px); box-shadow: var(--shadow); border-color: var(--green-200); }

.stay-media { position: relative; aspect-ratio: 16 / 11; overflow: hidden; }
.stay-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.stay-card:hover .stay-media img { transform: scale(1.07); }

.stay-tag {
    position: absolute; top: 13px; left: 13px;
    background: var(--green-500); color: #fff;
    font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
    padding: 6px 12px; border-radius: 999px;
}
.stay-rating {
    position: absolute; top: 13px; right: 13px;
    display: inline-flex; align-items: center; gap: 5px;
    background: rgba(253, 251, 245, .93); color: var(--green-900);
    font-size: 12.5px; font-weight: 800; padding: 6px 11px; border-radius: 999px;
    backdrop-filter: blur(4px);
}
.stay-rating svg { width: 12px; height: 12px; color: var(--sand-500); }

.stay-body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.stay-body h3 { font-size: 18.5px; line-height: 1.3; }
.stay-loc { display: flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--muted); margin-top: -6px; }
.stay-loc svg { width: 14px; height: 14px; color: var(--green-400); flex-shrink: 0; }

.stay-specs, .cab-specs {
    display: flex; flex-wrap: wrap; gap: 8px 16px;
    padding: 12px 0; border-block: 1px solid var(--line);
}
.stay-specs li, .cab-specs li {
    display: flex; align-items: center; gap: 6px;
    font-size: 13px; font-weight: 600; color: var(--body);
}
.stay-specs svg, .cab-specs svg { width: 15px; height: 15px; color: var(--green-500); flex-shrink: 0; }

.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chips span {
    background: var(--green-50); color: var(--green-700); border: 1px solid var(--green-100);
    font-size: 11.5px; font-weight: 600; padding: 5px 11px; border-radius: 999px;
}

.stay-foot, .cab-foot {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin-top: auto; padding-top: 4px;
}

/* "Distance · ₹30/km" is a few pixels wider than the share of the flex row
   the label would otherwise get, so it wrapped to a second line and made the
   cab cards taller than the rest. Give the label its natural width and let
   the button absorb the difference — the button carries ~20px of padding
   slack over its own text, so it shrinks without its label wrapping. */
.cab-foot .pkg-price span { white-space: nowrap; }
.cab-foot .pkg-price { flex: 0 0 auto; }
.cab-foot .pkg-book { flex: 0 1 auto; min-width: 0; }

/* ==========================================================================
   Cabs / car rental
   ========================================================================== */
.cab-card {
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
    overflow: hidden; box-shadow: var(--shadow-sm);
    display: flex; flex-direction: column;
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.cab-card:hover { transform: translateY(-7px); box-shadow: var(--shadow); border-color: var(--green-200); }

.cab-media {
    aspect-ratio: 16 / 10; overflow: hidden;
    background: linear-gradient(160deg, var(--sand-100), var(--green-50));
    display: grid; place-items: center;
}
.cab-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.cab-card:hover .cab-media img { transform: scale(1.06); }

.cab-body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 11px; flex: 1; }
.cab-type {
    align-self: flex-start;
    background: var(--sand-200); color: var(--sand-500);
    font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
    padding: 5px 11px; border-radius: 999px;
}
.cab-body h3 { font-size: 18.5px; line-height: 1.3; }
.cab-body > p { font-size: 13.5px; color: var(--muted); line-height: 1.55; margin-top: -4px; }

/* ==========================================================================
   Legal modals (privacy policy / terms)
   ========================================================================== */
.link-btn {
    text-align: left; padding: 0;
    font-size: inherit; font-weight: inherit; color: inherit;
    transition: color .2s;
}
.link-btn:hover { color: var(--green-300); }

.footer-legal { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.footer-legal span { opacity: .4; }

.modal .modal-box--wide { width: min(780px, 100%); padding: 0; }

.legal-head {
    display: flex; align-items: center; gap: 16px;
    padding: 26px 76px 20px 34px; border-bottom: 1px solid var(--line);
    position: sticky; top: 0; z-index: 3;
    background: var(--sand-50); border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.legal-head .modal-close { position: absolute; top: 24px; right: 24px; z-index: 4; }
.legal-icon {
    width: 48px; height: 48px; border-radius: 14px; flex-shrink: 0;
    background: var(--green-100); color: var(--green-600);
    display: grid; place-items: center;
}
.legal-icon svg { width: 23px; height: 23px; }
.legal-head h3 { font-size: 24px; margin-bottom: 2px; }
.legal-head p { font-size: 13px; color: var(--muted); }

.legal-body { padding: 24px 34px 34px; font-size: 14.5px; line-height: 1.72; }
.legal-body > p { margin-bottom: 14px; }
.legal-body h4 {
    font-size: 16px; margin: 26px 0 9px;
    padding-bottom: 7px; border-bottom: 1px solid var(--line);
}
.legal-body h4:first-of-type { margin-top: 20px; }
.legal-body ul { margin: 0 0 14px; padding-left: 4px; }
.legal-body li {
    position: relative; padding-left: 20px; margin-bottom: 8px;
}
.legal-body li::before {
    content: ""; position: absolute; left: 2px; top: 9px;
    width: 6px; height: 6px; border-radius: 50%; background: var(--green-300);
}
.legal-body strong { color: var(--green-900); }
.legal-body a { color: var(--green-600); text-decoration: underline; text-underline-offset: 2px; }
.legal-body a:hover { color: var(--green-700); }

.legal-note {
    margin-top: 28px; padding: 15px 18px;
    background: var(--sand-100); border-left: 3px solid var(--sand-400);
    border-radius: 0 10px 10px 0;
    font-size: 13.5px; color: var(--body);
}

/* ==========================================================================
   Destinations
   ========================================================================== */
.dest-card {
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
    padding: 12px; box-shadow: var(--shadow-sm);
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
    cursor: pointer;
}
.dest-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: var(--green-300); }
.dest-img { position: relative; border-radius: 12px; overflow: hidden; aspect-ratio: 16 / 11; margin-bottom: 14px; }
.dest-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s ease; }
.dest-card:hover .dest-img img { transform: scale(1.08); }

.dest-rating {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--green-500); color: #fff;
    font-size: 12.5px; font-weight: 700; padding: 5px 11px;
    border-radius: 8px; margin-bottom: 9px;
}
.dest-rating svg { width: 13px; height: 13px; }
.dest-rating small { font-weight: 500; opacity: .88; }

.dest-body { padding: 0 6px 6px; }
.dest-body h3 { font-size: 20px; margin-bottom: 3px; }
.dest-body > p { font-size: 14.5px; color: var(--muted); margin-bottom: 16px; }
.dest-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dest-price { display: flex; border-radius: 8px; overflow: hidden; font-size: 13px; font-weight: 700; }
.dest-price i { font-style: normal; background: var(--sand-200); color: var(--green-900); padding: 6px 11px; }
.dest-price b { background: var(--green-700); color: #fff; padding: 6px 11px; font-weight: 800; }
.dest-days { font-weight: 700; color: var(--green-700); font-size: 14.5px; }

/* ==========================================================================
   Why us
   ========================================================================== */
.why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.why-card {
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
    padding: 32px 26px; text-align: center;
    transition: all .3s ease;
}
.why-card:hover { transform: translateY(-7px); box-shadow: var(--shadow); border-color: var(--green-200); }
.why-icon {
    width: 62px; height: 62px; border-radius: 20px; margin: 0 auto 20px;
    background: linear-gradient(140deg, var(--green-100), var(--sand-200));
    color: var(--green-600); display: grid; place-items: center;
}
.why-icon svg { width: 28px; height: 28px; }
.why-card h4 { font-size: 18.5px; margin-bottom: 10px; }
.why-card p { font-size: 14.5px; color: var(--muted); line-height: 1.6; }

/* ==========================================================================
   FAQ + enquiry
   ========================================================================== */
.faq-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 40px; align-items: start; }

.faq-item {
    background: #fff; border: 1px solid var(--line); border-radius: 14px;
    margin-bottom: 14px; overflow: hidden; transition: border-color .25s, box-shadow .25s;
}
.faq-item.open { border-color: var(--green-300); box-shadow: var(--shadow-sm); }
.faq-q {
    width: 100%; display: flex; align-items: center; gap: 14px;
    padding: 19px 22px; text-align: left;
    font-size: 15.5px; font-weight: 700; color: var(--green-900); font-family: var(--font-head);
}
.faq-mark {
    width: 26px; height: 26px; border-radius: 8px; flex-shrink: 0;
    background: var(--green-100); color: var(--green-600);
    display: grid; place-items: center; transition: all .3s;
}
.faq-mark svg { width: 14px; height: 14px; transition: transform .3s; }
.faq-item.open .faq-mark { background: var(--green-500); color: #fff; }
.faq-item.open .faq-mark svg { transform: rotate(45deg); }
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .32s ease; }
.faq-item.open .faq-a { grid-template-rows: 1fr; }
.faq-a > div { overflow: hidden; }
.faq-a p { padding: 0 22px 20px 62px; font-size: 14.5px; color: var(--body); line-height: 1.65; }
.faq-a strong { color: var(--green-700); }

/* Enquiry section */
.enquiry { position: relative; overflow: hidden; isolation: isolate; padding: 88px 0; }
.enquiry-bg { position: absolute; inset: 0; z-index: -2; }
.enquiry-bg img { width: 100%; height: 100%; object-fit: cover; }
.enquiry-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(95deg, rgba(37,61,30,.93), rgba(37,61,30,.72)); }
.enquiry-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.enquiry-copy .eyebrow { background: rgba(255,255,255,.16); color: #EAF3E4; }
.enquiry-copy h2 { color: #fff; font-size: clamp(30px, 4vw, 42px); margin-bottom: 16px; }
.enquiry-copy > p { color: rgba(255,255,255,.82); font-size: 16.5px; margin-bottom: 28px; }
.enquiry-list { display: grid; gap: 14px; }
.enquiry-list li { display: flex; align-items: center; gap: 12px; color: rgba(255,255,255,.9); font-size: 15px; }
.enquiry-list svg { width: 20px; height: 20px; color: var(--green-300); flex-shrink: 0; }

/* Form */
.form-card { background: var(--sand-50); border-radius: var(--radius-lg); padding: 34px; box-shadow: var(--shadow-lg); }
.form-card h3 { font-size: 25px; margin-bottom: 6px; }
.form-card > p { font-size: 14.5px; color: var(--muted); margin-bottom: 24px; }
.field { margin-bottom: 15px; }
.field label { display: block; font-size: 12.5px; font-weight: 700; color: var(--green-700); margin-bottom: 6px; letter-spacing: .04em; }
.field input, .field select, .field textarea {
    width: 100%; padding: 13px 15px;
    border: 1.5px solid var(--line); border-radius: 11px;
    background: #fff; font-family: inherit; font-size: 14.5px; color: var(--ink);
    transition: border-color .2s, box-shadow .2s;
}
.field textarea { resize: vertical; min-height: 92px; }
.field input:focus, .field select:focus, .field textarea:focus {
    outline: none; border-color: var(--green-400); box-shadow: 0 0 0 3px var(--green-100);
}

/* ---------- Date field ----------
   Teal focus was asked for specifically; every other control in the form
   focuses in the brand green. Point --date-accent at var(--green-500) to
   bring it back in line. */
.field input[type="date"] {
    --date-accent: #14B8A6;
    --date-accent-deep: #0F766E;
    border-radius: 12px;
    cursor: pointer;
}
.field input[type="date"]:hover { border-color: var(--sand-400); }
.field input[type="date"]:focus {
    border-color: var(--date-accent);
    box-shadow: 0 0 0 3px rgba(20, 184, 166, .16);
}

/* Hold the mm/dd/yyyy hint back until a date is actually picked — the browser
   default renders it in a colour that fights the palette. */
.field input[type="date"]::-webkit-datetime-edit { color: var(--ink); }
.field input[type="date"]:invalid::-webkit-datetime-edit { color: var(--muted); }
.field input[type="date"]::-webkit-datetime-edit-text { padding: 0 3px; opacity: .55; }

/* Swap the stock indicator for a lighter outline calendar. It keeps its
   native click target, so the picker still opens. */
.field input[type="date"]::-webkit-calendar-picker-indicator {
    width: 18px; height: 18px; margin-left: 8px;
    cursor: pointer; opacity: .45;
    transition: opacity .2s;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F766E' stroke-width='1.9' stroke-linecap='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='3'/%3E%3Cpath d='M8 3v4M16 3v4M3 10h18'/%3E%3C/svg%3E") center / contain no-repeat;
}
.field input[type="date"]::-webkit-calendar-picker-indicator:hover,
.field input[type="date"]:focus::-webkit-calendar-picker-indicator { opacity: 1; }

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.form-note { font-size: 12.5px; color: var(--muted); text-align: center; margin-top: 14px; }

.form-success {
    display: none; align-items: flex-start; gap: 12px;
    background: var(--green-100); border: 1px solid var(--green-300);
    color: var(--green-700); border-radius: 12px; padding: 15px 17px;
    font-size: 14px; margin-bottom: 18px; line-height: 1.55;
}
.form-success.show { display: flex; }
.form-success svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px; }

.form-error {
    display: none; align-items: flex-start; gap: 12px;
    background: #FBEAE7; border: 1px solid #E9B7AE;
    color: #8C3A2B; border-radius: 12px; padding: 15px 17px;
    font-size: 14px; margin-bottom: 18px; line-height: 1.55;
}
.form-error.show { display: flex; }
.form-error svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
    background: var(--sand-50);
    color: var(--body);
    border-top: 1px solid var(--line);
    padding: 82px 0 0;
    margin: 0px 20px 0px 20px;
}

/* Five columns divided by hairlines: brand | links | support | contact | social. */
.footer-grid {
    display: grid;
    /* Widths follow the longest item in each column: "Hotels & Houseboats",
       "Terms & Conditions", the email address, and a 3-up gallery. */
    grid-template-columns: 1.33fr 1.15fr 1.05fr 1.62fr 1fr;
    gap: 0;
    padding-bottom: 62px;
}
.footer-col { padding-inline: 30px; }
.footer-col:first-child { padding-left: 0; }
.footer-col:last-child { padding-right: 0; }
.footer-col--brand { border-right: 1px solid var(--line); }
.footer-col--social { border-left: 1px solid var(--line); }

.site-footer h5 {
    color: var(--green-900); font-family: var(--font-head); font-size: 18.5px;
    font-weight: 600; margin-bottom: 28px;
}
.site-footer a { transition: color .2s; }
.site-footer a:hover,
.site-footer .link-btn:hover { color: var(--green-600); }

.footer-brand { display: flex; align-items: center; margin-bottom: 22px; }
.footer-logo { height: 44px; width: auto; max-width: 100%; object-fit: contain; }
.footer-about { font-size: 15px; line-height: 1.75; margin-bottom: 28px; max-width: 34ch; }
.footer-links li { margin-bottom: 17px; font-size: 15px; }

.footer-contact li { display: flex; gap: 14px; margin-bottom: 21px; font-size: 15px; line-height: 1.6; }
.footer-contact svg { width: 18px; height: 18px; color: var(--green-500); flex-shrink: 0; margin-top: 4px; }
.footer-contact a { word-break: break-word; }

/* Bare glyphs in a row, as in the reference — no chip behind them. */
.social { display: flex; gap: 18px; margin-bottom: 28px; }
.social a { color: var(--green-900); display: grid; place-items: center; transition: color .25s, transform .25s; }
.social a:hover { color: var(--green-600); transform: translateY(-3px); }
.social svg { width: 20px; height: 20px; }

.footer-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.footer-gallery img { aspect-ratio: 1; object-fit: cover; border-radius: 8px; transition: transform .3s, opacity .3s; }
.footer-gallery img:hover { transform: scale(1.06); opacity: .88; }

.footer-bottom {
    border-top: 1px solid var(--line); padding: 26px 0 30px;
    display: flex; flex-direction: column; align-items: center; gap: 9px;
    text-align: center; font-size: 14px; color: var(--muted);
}
/* The developer credit — the only anchor down here; the legal links are
   buttons that open the modals. */
.footer-bottom a { color: var(--green-700); font-weight: 600; }

/* ==========================================================================
   Modal + floating actions
   ========================================================================== */
.modal {
    position: fixed; inset: 0; z-index: 1000;
    background: rgba(23, 38, 18, .62); backdrop-filter: blur(4px);
    display: grid; place-items: center; padding: 24px;
    opacity: 0; visibility: hidden; transition: opacity .28s ease, visibility .28s;
    overflow-y: auto;
}
.modal.open { opacity: 1; visibility: visible; }
.modal-box {
    background: var(--sand-50); border-radius: var(--radius-lg);
    width: min(520px, 100%); padding: 32px; position: relative;
    transform: translateY(20px) scale(.97); transition: transform .3s ease;
    max-height: 92vh; overflow-y: auto;
}
.modal.open .modal-box { transform: none; }
.modal-close {
    position: absolute; top: 16px; right: 16px;
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--green-100); color: var(--green-700);
    border: 1px solid var(--green-200);
    display: grid; place-items: center;
    transition: background .2s ease, color .2s ease, transform .2s ease;
}
.modal-close:hover { background: var(--green-500); color: #fff; transform: rotate(90deg); }
.modal-close svg { width: 17px; height: 17px; }
.modal-pkg {
    display: none; background: var(--green-100); color: var(--green-700);
    font-size: 13px; font-weight: 700; padding: 9px 14px; border-radius: 10px; margin-bottom: 18px;
}
.modal-pkg.show { display: block; }

.float-actions { position: fixed; right: 20px; bottom: 20px; z-index: 800; display: grid; gap: 12px; }
.float-btn {
    width: 54px; height: 54px; border-radius: 50%;
    display: grid; place-items: center; color: #fff;
    box-shadow: 0 8px 22px rgba(37, 61, 30, .3);
    transition: transform .25s ease;
}
.float-btn:hover { transform: scale(1.09); }
.float-btn svg { width: 26px; height: 26px; }
.float-wa { background: #25D366; }
.float-call { background: var(--green-600); }

/* ==========================================================================
   Reveal animation
   ========================================================================== */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.reveal.visible { opacity: 1; transform: none; }

/* ==========================================================================
   Responsive
   ========================================================================== */
/* Between the mobile-nav breakpoint and this width the header carries the full
   nav plus the phone number plus the CTA, which leaves the logo no room. Trim
   the logo and the gaps, and drop the phone number a little earlier — it is
   already hidden below 960px, and the CTA still reaches the same enquiry. */
@media (max-width: 1200px) {
    .site-header .container { gap: 18px; }
    .brand-logo { height: 44px; }
    .header-phone { display: none; }
}

@media (max-width: 1100px) {
    .carousel-track,
    .carousel-track[data-count="3"] { grid-auto-columns: calc((100% - 2 * 24px) / 3); }
    .why-grid { grid-template-columns: repeat(2, 1fr); }
    /* Below the desktop width the five columns wrap, so the dividers and the
       column padding that separated them come off. */
    .footer-grid { grid-template-columns: repeat(3, 1fr); gap: 44px 38px; }
    .footer-col { padding-inline: 0; }
    .footer-col--brand { border-right: none; }
    .footer-col--social { border-left: none; }
    /* The social column is no longer the narrow one, so cap the thumbnails
       instead of letting them stretch to the full column. */
    .footer-gallery { max-width: 260px; }
}

/* The last 40px before the nav collapses into the hamburger: the seven nav
   links have a hard minimum width, so the logo takes the squeeze here. It
   goes back up at 960px, where the nav is replaced by the toggle. */
@media (max-width: 1000px) {
    .brand-logo { height: 34px; }
}

@media (max-width: 960px) {
    .site-header .container { gap: 14px; }
    .brand-logo { height: 46px; }
    .main-nav {
        position: absolute; top: 100%; left: 0; right: 0;
        flex-direction: column; align-items: stretch; gap: 2px;
        background: var(--sand-50); border-bottom: 1px solid var(--line);
        padding: 12px 20px 18px; box-shadow: var(--shadow);
        display: none;
    }
    .main-nav.open { display: flex; }
    .main-nav a { padding: 12px 14px; border-radius: 10px; }
    .nav-toggle { display: grid; }
    .header-phone { display: none; }

    .hero { padding: 62px 0 74px; }
    .hero-grid { grid-template-columns: 1fr; gap: 46px; }
    .feature-slider { height: 440px; max-width: 440px; margin-inline: auto; }
    .footer-grid { grid-template-columns: repeat(2, 1fr); }

    .trust-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
    .carousel-track,
    .carousel-track[data-count="3"] { grid-auto-columns: calc((100% - 22px) / 2); gap: 22px; }
    .faq-layout { grid-template-columns: 1fr; gap: 0; }
    .enquiry-grid { grid-template-columns: 1fr; gap: 44px; }
}

@media (max-width: 640px) {
    .section { padding: 64px 0; }
    .topbar .container { justify-content: center; min-height: auto; padding-block: 8px; gap: 8px 18px; }
    .topbar-tag { display: none; }
    .carousel-track,
    .carousel-track[data-count="3"] { grid-auto-columns: 84%; gap: 18px; }
    .why-grid { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr; gap: 34px; }
    .field-row { grid-template-columns: 1fr; }
    .form-card, .modal-box { padding: 24px 20px; }
    .hero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 16px; }
    .hero-stats div strong { font-size: 25px; }
    .trust-item { align-items: flex-start; }
    .feature-slider { height: auto; min-height: 430px; }
    .feature-card { position: relative; }
    .feature-card:not(.active) { position: absolute; }
    /* .footer-bottom is already a centered column at every width. */
    .header-cta .btn-primary { padding: 11px 17px; font-size: 13.5px; }
    .header-cta .btn-primary svg { display: none; }
    /* The logo is wide, so it shrinks first when the header gets tight. */
    .brand-logo { height: 42px; }
    .footer-logo { height: 50px; }
}