/* ==========================================================================
   Haven Stays & Hospitality — 02. COMPONENTS
   Header · Hero · Cards · Sliders · Forms · Footer · Page furniture
   ========================================================================== */

/* ==========================================================================
   1. BUTTONS
   ========================================================================== */
.btn {
    --btn-bg: var(--gold-500);
    --btn-fg: var(--navy-900);
    --btn-bd: var(--gold-500);
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    padding: .95rem 1.9rem;
    font-family: var(--f-body);
    font-size: var(--t-sm);
    font-weight: 600;
    letter-spacing: .04em;
    line-height: 1.2;
    text-align: center;
    color: var(--btn-fg);
    background: var(--btn-bg);
    border: 1px solid var(--btn-bd);
    border-radius: var(--r-pill);
    cursor: pointer;
    overflow: hidden;
    isolation: isolate;
    transition: transform var(--t-fast) var(--ease),
                box-shadow var(--t-mid) var(--ease),
                background-color var(--t-mid) var(--ease),
                color var(--t-mid) var(--ease),
                border-color var(--t-mid) var(--ease);
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn:hover { transform: translateY(-2px); color: var(--btn-fg); }
.btn:active { transform: translateY(0); }

.btn--gold { --btn-bg: var(--gold-500); --btn-fg: var(--navy-900); --btn-bd: var(--gold-500); }
.btn--gold:hover { --btn-bg: var(--gold-400); --btn-bd: var(--gold-400); box-shadow: var(--sh-gold); }

.btn--navy { --btn-bg: var(--navy-800); --btn-fg: #fff; --btn-bd: var(--navy-800); }
.btn--navy:hover { --btn-bg: var(--navy-700); --btn-bd: var(--navy-700); box-shadow: var(--sh); color: #fff; }

.btn--outline { --btn-bg: transparent; --btn-fg: var(--navy-800); --btn-bd: var(--navy-800); }
.btn--outline:hover { --btn-bg: var(--navy-800); --btn-fg: #fff; }

.btn--outline-gold { --btn-bg: transparent; --btn-fg: var(--gold-700); --btn-bd: var(--gold-500); }
.btn--outline-gold:hover { --btn-bg: var(--gold-500); --btn-fg: var(--navy-900); }

.btn--light { --btn-bg: #fff; --btn-fg: var(--navy-800); --btn-bd: #fff; }
.btn--light:hover { --btn-bg: var(--gold-500); --btn-bd: var(--gold-500); --btn-fg: var(--navy-900); }

.btn--outline-light { --btn-bg: transparent; --btn-fg: #fff; --btn-bd: rgba(255,255,255,.5); }
.btn--outline-light:hover { --btn-bg: #fff; --btn-fg: var(--navy-800); --btn-bd: #fff; }

.btn--wa { --btn-bg: #25D366; --btn-fg: #06331A; --btn-bd: #25D366; }
.btn--wa:hover { --btn-bg: #1FBE5B; --btn-bd: #1FBE5B; }

.btn--sm { padding: .68rem 1.35rem; font-size: var(--t-xs); }
.btn--lg { padding: 1.1rem 2.4rem; font-size: 1rem; }
.btn--block { display: flex; width: 100%; }

/* Quiet text link with arrow */
.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: var(--t-sm);
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--navy-800);
}
.link-arrow svg { width: 16px; height: 16px; transition: transform var(--t-mid) var(--ease); }
.link-arrow:hover { color: var(--gold-600); }
.link-arrow:hover svg { transform: translateX(5px); }

/* ==========================================================================
   2. TOPBAR + HEADER + NAVIGATION
   ========================================================================== */
.topbar {
    background: var(--navy-800);
    color: rgba(255, 255, 255, .78);
    font-size: var(--t-xs);
    letter-spacing: .02em;
}
.topbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 44px;
    padding-block: .35rem;
}
.topbar__group { display: flex; align-items: center; flex-wrap: wrap; gap: 1.35rem; }
.topbar__item {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    color: rgba(255, 255, 255, .78);
    white-space: nowrap;
}
.topbar__item svg { width: 14px; height: 14px; color: var(--gold-400); flex: none; }
.topbar__item:hover { color: var(--gold-400); }
.topbar__socials { display: flex; align-items: center; gap: .5rem; }
.topbar__socials a {
    display: grid;
    place-items: center;
    width: 28px; height: 28px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .18);
    color: rgba(255, 255, 255, .8);
    transition: all var(--t-fast) var(--ease);
}
.topbar__socials a svg { width: 13px; height: 13px; }
.topbar__socials a:hover {
    background: var(--gold-500);
    border-color: var(--gold-500);
    color: var(--navy-900);
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 900;
    background: rgba(253, 251, 247, .96);
    backdrop-filter: saturate(160%) blur(10px);
    border-bottom: 1px solid var(--line-2);
    transition: box-shadow var(--t-mid) var(--ease), background-color var(--t-mid) var(--ease);
}
.site-header.is-stuck { box-shadow: var(--sh-sm); background: rgba(253, 251, 247, .99); }

.header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    min-height: var(--header-h);
}

/* --- Brand ---------------------------------------------------------- */
.brand { display: inline-flex; align-items: center; gap: .8rem; }
.brand__mark { width: 44px; height: 44px; flex: none; color: var(--gold-500); }
.brand__text { display: flex; flex-direction: column; line-height: 1.05; }
.brand__name {
    font-family: var(--f-logo);
    font-size: 1.06rem;
    font-weight: 600;
    letter-spacing: .10em;
    text-transform: uppercase;
    color: var(--navy-800);
    white-space: nowrap;
}
.brand__name span { color: var(--gold-600); }
/* The full registered name. It sits inline beside the wordmark on wide screens,
   where the header has room for one long line; responsive.css drops it onto its
   own line below 768px, where twenty-five characters would either overflow a
   narrow handset or force the wordmark down to an unreadable size. Slightly
   smaller than the name so the lockup still reads "HAVEN STAYS" first. */
.brand__name .brand__amp { font-size: .84em; letter-spacing: .08em; }
.brand__name .brand__amp::before { content: "\00a0"; }
.brand__tag {
    font-size: .58rem;
    font-weight: 500;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--muted);
    margin-top: .25rem;
    white-space: nowrap;
}

/* --- Desktop nav ---------------------------------------------------- */
.nav { margin-inline: auto; }
.nav__list { display: flex; align-items: center; gap: clamp(.4rem, .1rem + .9vw, 1.35rem); }
.nav__item { position: relative; }
.nav__link {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .6rem .2rem;
    font-size: var(--t-sm);
    font-weight: 500;
    letter-spacing: .02em;
    color: var(--ink-soft);
    white-space: nowrap;
}
.nav__link::after {
    content: "";
    position: absolute;
    left: .2rem; right: .2rem; bottom: .25rem;
    height: 2px;
    background: var(--gold-500);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--t-mid) var(--ease);
}
.nav__link:hover, .nav__item.is-active > .nav__link { color: var(--navy-800); }
.nav__link:hover::after, .nav__item.is-active > .nav__link::after { transform: scaleX(1); }
.nav__link .caret { width: 11px; height: 11px; opacity: .55; transition: transform var(--t-fast) var(--ease); }
.nav__item:hover .caret { transform: rotate(180deg); }

.dropdown {
    position: absolute;
    top: calc(100% + 14px);
    left: 50%;
    translate: -50% 0;
    min-width: 260px;
    padding: .6rem;
    background: #fff;
    border: 1px solid var(--line-2);
    border-radius: var(--r);
    box-shadow: var(--sh-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all var(--t-mid) var(--ease);
    z-index: 20;
}
.dropdown::before {
    content: "";
    position: absolute;
    top: -14px; left: 0; right: 0;
    height: 14px;
}
.nav__item:hover > .dropdown,
.nav__item:focus-within > .dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.dropdown__link {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .68rem .85rem;
    font-size: var(--t-sm);
    color: var(--ink-soft);
    border-radius: var(--r-xs);
    transition: all var(--t-fast) var(--ease);
}
.dropdown__link::before {
    content: "";
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--gold-400);
    flex: none;
    opacity: 0;
    transition: opacity var(--t-fast) var(--ease);
}
.dropdown__link:hover, .dropdown__link.is-active {
    background: var(--sand-100);
    color: var(--navy-800);
}
.dropdown__link:hover::before, .dropdown__link.is-active::before { opacity: 1; }

.header-actions { display: flex; align-items: center; gap: .75rem; }

/* --- Mobile toggle -------------------------------------------------- */
.nav-toggle {
    display: none;
    position: relative;
    width: 48px; height: 48px;
    border-radius: 14px;
    border: 0;
    background: linear-gradient(150deg, var(--navy-700, #123a63), var(--navy-800));
    box-shadow: 0 6px 18px rgba(11, 37, 69, .28), inset 0 0 0 1px rgba(200, 164, 92, .38);
    place-items: center;
    flex: none;
    transition: box-shadow var(--t-mid) var(--ease), transform var(--t-fast) var(--ease);
}
.nav-toggle:hover { box-shadow: 0 8px 22px rgba(11, 37, 69, .36), inset 0 0 0 1px rgba(200, 164, 92, .7); }
.nav-toggle:active { transform: scale(.95); }
.nav-toggle:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 3px; }

/* The three bars are absolutely centred so they rotate about a true midpoint —
   the old margin-stacked version pivoted off-centre and looked crooked. */
.nav-toggle span {
    position: absolute;
    left: 50%;
    width: 19px; height: 2px;
    margin-left: -9.5px;
    background: var(--gold-400);
    border-radius: 2px;
    transition: transform var(--t-mid) var(--ease), opacity .18s linear, width var(--t-mid) var(--ease);
}
.nav-toggle span:nth-child(1) { top: 16px; }
.nav-toggle span:nth-child(2) { top: 23px; width: 13px; }
.nav-toggle span:nth-child(3) { top: 30px; }
.nav-toggle:hover span:nth-child(2) { width: 19px; }

.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; width: 19px; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --- Mobile drawer -------------------------------------------------- */
.drawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: 950;
    background: rgba(7, 27, 51, .45);
    backdrop-filter: blur(2px);
    opacity: 0;
    visibility: hidden;
    transition: all var(--t-mid) var(--ease);
}
.drawer-backdrop.is-open { opacity: 1; visibility: visible; }

.drawer {
    position: fixed;
    top: 0; right: 0;
    z-index: 960;
    width: min(370px, 88vw);
    height: 100dvh;
    background: var(--ivory);
    box-shadow: -20px 0 60px rgba(11, 37, 69, .18);
    transform: translateX(100%);
    transition: transform var(--t-mid) var(--ease-out);
    display: flex;
    flex-direction: column;
    overscroll-behavior: contain;
}
.drawer.is-open { transform: translateX(0); }
.drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.15rem var(--container-pad);
    background: linear-gradient(150deg, var(--navy-700), var(--navy-900));
    border-bottom: 2px solid var(--gold-500);
}
/* The brand lockup inverts inside the navy header. */
.drawer__head .brand__mark { color: var(--gold-400); }
.drawer__head .brand__name { color: #fff; }
.drawer__head .brand__name span { color: var(--gold-400); }

.drawer__close {
    display: grid;
    place-items: center;
    width: 40px; height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .26);
    background: rgba(255, 255, 255, .07);
    color: #fff;
    flex: none;
    transition: all var(--t-fast) var(--ease);
}
.drawer__close svg { width: 18px; height: 18px; }
.drawer__close:hover { background: var(--gold-500); color: var(--navy-900); border-color: var(--gold-500); }
.drawer__body { flex: 1; overflow-y: auto; padding: 1rem var(--container-pad) 2rem; }
.drawer__foot {
    padding: 1.15rem var(--container-pad);
    border-top: 1px solid var(--line);
    background: #fff;
    display: grid;
    gap: .6rem;
}

.m-nav__item { border-bottom: 1px solid var(--line-2); }
.m-nav__link {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    padding: 1.05rem .25rem 1.05rem .9rem;   /* room for the active bar */
    font-size: 1.02rem;
    font-weight: 500;
    letter-spacing: .01em;
    color: var(--ink-soft);
    text-align: left;
    transition: color var(--t-fast) var(--ease), padding-left var(--t-fast) var(--ease);
}
/* Gold bar marks the current section instead of a colour change alone. */
.m-nav__link::before {
    content: "";
    position: absolute;
    left: 0; top: 50%;
    width: 3px; height: 0;
    border-radius: 3px;
    background: var(--gold-500);
    transform: translateY(-50%);
    transition: height var(--t-mid) var(--ease);
}
.m-nav__link:hover { color: var(--gold-600); padding-left: 1.05rem; }
.m-nav__item.is-active > .m-nav__link { color: var(--gold-600); font-weight: 600; }
.m-nav__item.is-active > .m-nav__link::before { height: 22px; }
.m-nav__link svg { width: 16px; height: 16px; flex: none; transition: transform var(--t-mid) var(--ease); }
.m-nav__link[aria-expanded="true"] svg { transform: rotate(180deg); }
.m-sub {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--t-mid) var(--ease);
}
.m-sub a {
    display: block;
    margin-left: .9rem;
    padding: .62rem .25rem .62rem 1rem;
    font-size: var(--t-sm);
    color: var(--body);
    border-left: 2px solid var(--line);
    transition: all var(--t-fast) var(--ease);
}
.m-sub a:hover { color: var(--gold-600); border-left-color: var(--gold-500); background: var(--sand-100); }
.m-sub li:last-child a { padding-bottom: 1rem; }

.drawer__contact {
    margin-top: 1.75rem;
    padding-top: 1.35rem;
    border-top: 1px solid var(--line-2);
    display: grid;
    gap: .85rem;
}
.drawer__contact a {
    display: flex;
    align-items: center;
    gap: .7rem;
    font-size: var(--t-sm);
    color: var(--body);
}
.drawer__contact svg { width: 16px; height: 16px; color: var(--gold-600); flex: none; }

/* Social row in the mobile drawer. Reuses .footer-social for layout, but the
   footer version is styled for a dark ground — repaint it for the light panel. */
.drawer__social { margin-top: 1.5rem; padding-top: 1.35rem; border-top: 1px solid var(--line-2); }
.drawer__social-label {
    display: block;
    font-size: var(--t-xs);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
}
.drawer__social .footer-social { margin-top: .85rem; flex-wrap: wrap; }
.drawer__social .footer-social a {
    border-color: var(--line);
    color: var(--navy-800);
    background: var(--ivory);
}
.drawer__social .footer-social a:hover { background: var(--gold-500); border-color: var(--gold-500); color: var(--navy-900); }

/* ==========================================================================
   3. HERO
   ========================================================================== */
.hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: var(--sand-100);
}
.hero__stage {
    position: relative;
    min-height: clamp(560px, 78vh, 840px);
    display: grid;
}
.hero__slide {
    grid-area: 1 / 1;
    position: relative;
    opacity: 0;
    visibility: hidden;
    transition: opacity 1s var(--ease), visibility 1s var(--ease);
}
.hero__slide.is-active { opacity: 1; visibility: visible; }
.hero__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transform: scale(1.06);
    transition: transform 7s linear;
}
.hero__slide.is-active .hero__bg { transform: scale(1); }

/* Light scrim — keeps the page bright while holding contrast for navy text */
.hero__stage::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background:
        linear-gradient(100deg,
            rgba(253, 251, 247, .97) 0%,
            rgba(253, 251, 247, .93) 32%,
            rgba(253, 251, 247, .68) 52%,
            rgba(253, 251, 247, .12) 74%,
            rgba(253, 251, 247, 0) 100%),
        linear-gradient(180deg, rgba(253, 251, 247, .5) 0%, rgba(253, 251, 247, 0) 30%);
}

.hero__inner {
    position: relative;
    z-index: 3;
    grid-area: 1 / 1;
    display: flex;
    align-items: center;
    padding-block: clamp(3rem, 2rem + 5vw, 6rem);
}
.hero__content { max-width: 640px; }
.hero__title { margin-bottom: 1.25rem; }
.hero__title .line { display: block; }
.hero__motto {
    font-family: var(--f-display);
    font-weight: 700;
    color: var(--gold-600);
}
.hero__sub {
    font-size: clamp(1.05rem, .95rem + .5vw, 1.35rem);
    font-family: var(--f-display);
    color: var(--navy-700);
    margin-bottom: 1rem;
}
.hero__text { max-width: 52ch; margin-bottom: 1.9rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .85rem; }

.hero__points {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem .5rem;
    margin-bottom: 1.6rem;
}
.hero__points li {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .42rem .95rem;
    font-size: var(--t-xs);
    font-weight: 500;
    letter-spacing: .04em;
    color: var(--navy-700);
    background: rgba(255, 255, 255, .75);
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    backdrop-filter: blur(4px);
}
.hero__points svg { width: 14px; height: 14px; color: var(--gold-600); flex: none; }

/* Slider controls */
.hero__dots {
    position: absolute;
    z-index: 5;
    left: 50%;
    bottom: 6.5rem;                 /* clears the floating search bar */
    translate: -50% 0;
    display: flex;
    gap: .5rem;
}
.hero__dot {
    width: 34px; height: 3px;
    border-radius: 3px;
    background: rgba(11, 37, 69, .22);
    transition: all var(--t-mid) var(--ease);
}
.hero__dot.is-active { background: var(--gold-500); width: 52px; }

.hero__arrows {
    position: absolute;
    z-index: 5;
    right: var(--container-pad);
    bottom: 6.25rem;                /* sits above the floating search bar */
    display: flex;
    gap: .5rem;
}
.hero__arrow {
    display: grid;
    place-items: center;
    width: 44px; height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .85);
    border: 1px solid var(--line);
    color: var(--navy-800);
    backdrop-filter: blur(6px);
    transition: all var(--t-fast) var(--ease);
}
.hero__arrow svg { width: 18px; height: 18px; }
.hero__arrow:hover { background: var(--gold-500); border-color: var(--gold-500); color: var(--navy-900); }

/* ==========================================================================
   4. SEARCH / ENQUIRY BAR
   ========================================================================== */
.searchbar {
    position: relative;
    z-index: 12;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-lg);
    padding: 1.15rem;
}
.searchbar--float { margin-top: -58px; }
.searchbar__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-bottom: 1rem;
}
.searchbar__tab {
    padding: .5rem 1.1rem;
    font-size: var(--t-xs);
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--body);
    border-radius: var(--r-pill);
    border: 1px solid transparent;
    transition: all var(--t-fast) var(--ease);
}
.searchbar__tab:hover { color: var(--navy-800); background: var(--sand-100); }
.searchbar__tab.is-active {
    background: var(--navy-800);
    border-color: var(--navy-800);
    color: #fff;
}
.searchbar__form {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
    gap: .75rem;
    align-items: end;
}
.searchbar__panel { display: none; }
.searchbar__panel.is-active { display: block; }
.sb-field { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.sb-field > label {
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted);
    padding-left: .2rem;
}
.sb-field__control {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .1rem .9rem;
    background: var(--sand-100);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.sb-field__control:focus-within { border-color: var(--gold-500); background: #fff; }
.sb-field__control svg { width: 16px; height: 16px; color: var(--gold-600); flex: none; }
.sb-field input, .sb-field select {
    width: 100%;
    min-width: 0;
    border: 0;
    background: transparent;
    padding: .78rem 0;
    font-size: var(--t-sm);
    color: var(--ink);
    outline: none;
    appearance: none;
}
.sb-field select { cursor: pointer; }

/* ==========================================================================
   5. SERVICE CARDS
   ========================================================================== */
.svc-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
    transition: transform var(--t-mid) var(--ease), box-shadow var(--t-mid) var(--ease), border-color var(--t-mid) var(--ease);
}
.svc-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--sh-lg);
    border-color: var(--gold-300);
}
.svc-card__media {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
}
.svc-card__media img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 1s var(--ease);
}
.svc-card:hover .svc-card__media img { transform: scale(1.07); }
.svc-card__num {
    position: absolute;
    top: 1rem; left: 1rem;
    z-index: 2;
    display: grid;
    place-items: center;
    min-width: 42px;
    height: 42px;
    padding-inline: .5rem;
    font-family: var(--f-display);
    font-size: .95rem;
    font-weight: 600;
    color: var(--navy-900);
    background: var(--gold-500);
    border-radius: var(--r-xs);
}
.svc-card__icon {
    position: absolute;
    right: 1rem; bottom: -26px;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 56px; height: 56px;
    background: #fff;
    color: var(--gold-600);
    border-radius: 50%;
    box-shadow: var(--sh);
}
.svc-card__icon svg { width: 26px; height: 26px; }
.svc-card__body { padding: 1.6rem 1.5rem 1.7rem; display: flex; flex-direction: column; flex: 1; }
.svc-card__kicker {
    font-size: var(--t-xs);
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--gold-600);
    margin-bottom: .5rem;
}
.svc-card h3 { margin-bottom: .7rem; font-size: var(--t-h4); }
.svc-card p { font-size: var(--t-sm); margin-bottom: 1.1rem; }
.svc-card__list { display: grid; gap: .45rem; margin-bottom: 1.4rem; }
.svc-card__list li {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    font-size: var(--t-sm);
    color: var(--body);
}
.svc-card__list svg { width: 15px; height: 15px; color: var(--gold-600); flex: none; margin-top: .35rem; }
.svc-card .link-arrow { margin-top: auto; }

/* ==========================================================================
   6. TRUST / FEATURE ITEMS
   ========================================================================== */
.trust-item {
    display: flex;
    gap: 1.1rem;
    padding: 1.5rem;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r);
    height: 100%;
    transition: all var(--t-mid) var(--ease);
}
.trust-item:hover { border-color: var(--gold-300); box-shadow: var(--sh); transform: translateY(-4px); }
.trust-item__icon {
    display: grid;
    place-items: center;
    width: 52px; height: 52px;
    flex: none;
    border-radius: var(--r-sm);
    background: var(--gold-100);
    color: var(--gold-700);
    transition: all var(--t-mid) var(--ease);
}
.trust-item:hover .trust-item__icon { background: var(--gold-500); color: var(--navy-900); }
.trust-item__icon svg { width: 24px; height: 24px; }
.trust-item h4 { font-size: var(--t-h5); margin-bottom: .4rem; }
.trust-item p { font-size: var(--t-sm); }

/* Compact icon row (on navy band) */
.pillar-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: rgba(255, 255, 255, .14);
    border-radius: var(--r);
    overflow: hidden;
}
.pillar {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: 1.5rem 1.35rem;
    background: var(--navy-800);
}
.pillar svg { width: 26px; height: 26px; color: var(--gold-400); flex: none; }
.pillar span {
    font-size: var(--t-sm);
    font-weight: 500;
    color: rgba(255, 255, 255, .9);
    line-height: 1.4;
}

/* ==========================================================================
   7. IMAGE TILES (flyer's four moments)
   ========================================================================== */
.tile {
    position: relative;
    display: block;
    aspect-ratio: 3 / 4;
    border-radius: var(--r);
    overflow: hidden;
    isolation: isolate;
}
.tile img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 1.2s var(--ease);
}
.tile:hover img { transform: scale(1.08); }
.tile::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(7, 27, 51, 0) 42%, rgba(7, 27, 51, .82) 100%);
}
.tile__cap {
    position: absolute;
    inset: auto 0 0 0;
    z-index: 2;
    padding: 1.35rem 1.25rem;
    color: #fff;
}
.tile__cap h4 {
    color: #fff;
    font-size: var(--t-h5);
    margin-bottom: .15rem;
}
.tile__cap span {
    font-size: var(--t-xs);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--gold-400);
}

/* ==========================================================================
   8. STATS
   ========================================================================== */
.stat { text-align: center; padding: .5rem; }
.stat__num {
    font-family: var(--f-display);
    font-size: clamp(2.1rem, 1.5rem + 2.4vw, 3.4rem);
    font-weight: 600;
    line-height: 1;
    color: var(--navy-800);
    margin-bottom: .5rem;
}
.stat__num .suffix { color: var(--gold-600); }
.stat__label {
    font-size: var(--t-sm);
    color: var(--body);
    letter-spacing: .02em;
}
.on-dark .stat__num { color: #fff; }
.on-dark .stat__label { color: rgba(255, 255, 255, .75); }
.stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--gap);
}
.stats-row .stat + .stat { border-left: 1px solid var(--line); }
.on-dark .stats-row .stat + .stat { border-left-color: rgba(255, 255, 255, .16); }

/* ==========================================================================
   9. ABOUT / SPLIT MEDIA
   ========================================================================== */
.split {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(2rem, 1rem + 4vw, 4.5rem);
    align-items: center;
}
.split--wide-text { grid-template-columns: 1fr 1.15fr; }

.media-stack { position: relative; padding-bottom: 3.5rem; padding-right: 3rem; }
.media-stack__main {
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--sh-lg);
    aspect-ratio: 4 / 5;
}
.media-stack__main img { width: 100%; height: 100%; object-fit: cover; }
.media-stack__sub {
    position: absolute;
    right: 0; bottom: 0;
    width: 56%;
    border-radius: var(--r);
    overflow: hidden;
    border: 8px solid var(--ivory);
    box-shadow: var(--sh);
    aspect-ratio: 4 / 3;
}
.media-stack__sub img { width: 100%; height: 100%; object-fit: cover; }
.media-badge {
    position: absolute;
    top: 1.5rem; left: -1.25rem;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .95rem 1.25rem;
    background: #fff;
    border-radius: var(--r);
    box-shadow: var(--sh-lg);
    border: 1px solid var(--line-2);
}
.media-badge svg { width: 30px; height: 30px; color: var(--gold-600); flex: none; }
.media-badge strong {
    display: block;
    font-family: var(--f-display);
    font-size: 1.3rem;
    color: var(--navy-800);
    line-height: 1;
}
.media-badge span { font-size: var(--t-xs); color: var(--muted); letter-spacing: .06em; }

.check-list { display: grid; gap: .75rem; margin-block: 1.5rem; }
.check-list li {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    font-size: var(--t-sm);
    color: var(--ink-soft);
}
/* On a navy band the default ink colour is unreadable — invert both the
   label and the tick. */
.on-dark .check-list li { color: rgba(255, 255, 255, .8); }
.on-dark .check-list svg { color: var(--gold-400); }
.check-list svg {
    width: 20px; height: 20px;
    flex: none;
    margin-top: .25rem;
    color: var(--gold-600);
}
.check-list--2col { grid-template-columns: repeat(2, 1fr); }

.signature {
    display: flex;
    align-items: center;
    gap: 1.15rem;
    margin-top: 2rem;
    padding-top: 1.75rem;
    border-top: 1px solid var(--line);
}
.signature img { width: 62px; height: 62px; border-radius: 50%; object-fit: cover; flex: none; }
.signature strong { display: block; color: var(--navy-800); font-size: 1.05rem; }
.signature span { font-size: var(--t-xs); color: var(--muted); letter-spacing: .08em; text-transform: uppercase; }

/* ==========================================================================
   10. PROCESS TIMELINE
   ========================================================================== */
.process { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.25rem; }
.process__item { position: relative; padding-top: 3.35rem; }
.process__item::before {
    content: "";
    position: absolute;
    top: 24px; left: 0; right: 0;
    height: 1px;
    background: repeating-linear-gradient(90deg, var(--gold-300) 0 8px, transparent 8px 16px);
}
.process__item:last-child::before { display: none; }
.process__n {
    position: absolute;
    top: 0; left: 0;
    display: grid;
    place-items: center;
    width: 50px; height: 50px;
    font-family: var(--f-display);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--navy-800);
    background: #fff;
    border: 1px solid var(--gold-300);
    border-radius: 50%;
    transition: all var(--t-mid) var(--ease);
}
.process__item:hover .process__n { background: var(--gold-500); border-color: var(--gold-500); }
.process__item h4 { font-size: var(--t-h5); margin-bottom: .45rem; }
.process__item p { font-size: var(--t-sm); }

/* Column-count variants — the base grid assumes the five-stage guest journey.
   The dashed rule is drawn per item, so whichever item ends a row must not
   draw one, or the line runs off the edge of the grid. */
.process--4 { grid-template-columns: repeat(4, 1fr); }
.process--4 .process__item:nth-child(4n)::before { display: none; }
.process--3 { grid-template-columns: repeat(3, 1fr); }
.process--3 .process__item:nth-child(3n)::before { display: none; }

/* ==========================================================================
   11. PROPERTY + STAY CARDS
   ========================================================================== */
.p-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
    transition: transform var(--t-mid) var(--ease), box-shadow var(--t-mid) var(--ease), border-color var(--t-mid) var(--ease);
}
.p-card:hover { transform: translateY(-8px); box-shadow: var(--sh-lg); border-color: var(--gold-300); }
.p-card__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.p-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.p-card:hover .p-card__media img { transform: scale(1.07); }
.p-card__tags {
    position: absolute;
    top: .9rem; left: .9rem;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}
.badge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .34rem .8rem;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    border-radius: var(--r-pill);
    background: #fff;
    color: var(--navy-800);
    box-shadow: var(--sh-xs);
}
.badge--gold { background: var(--gold-500); color: var(--navy-900); }
.badge--navy { background: var(--navy-800); color: #fff; }
.badge--green { background: var(--green); color: #fff; }
.badge--soft { background: var(--sand-200); color: var(--navy-700); box-shadow: none; }

.p-card__price-float {
    position: absolute;
    left: .9rem; bottom: .9rem;
    z-index: 2;
    padding: .55rem 1rem;
    background: rgba(255, 255, 255, .95);
    backdrop-filter: blur(6px);
    border-radius: var(--r-sm);
    font-family: var(--f-display);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--navy-800);
    box-shadow: var(--sh-sm);
}
.p-card__price-float small {
    font-family: var(--f-body);
    font-size: .7rem;
    font-weight: 500;
    color: var(--muted);
    letter-spacing: .04em;
}
.p-card__body { padding: 1.35rem 1.35rem 1.5rem; display: flex; flex-direction: column; flex: 1; }
.p-card__area {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: var(--t-xs);
    color: var(--gold-600);
    letter-spacing: .06em;
    text-transform: uppercase;
    margin-bottom: .55rem;
}
.p-card__area svg { width: 14px; height: 14px; }
.p-card__body h3 { font-size: 1.18rem; margin-bottom: .55rem; line-height: 1.32; }
.p-card__body h3 a { color: inherit; }
.p-card__body h3 a:hover { color: var(--gold-600); }
.p-card__body > p { font-size: var(--t-sm); margin-bottom: 1.1rem; }

.p-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem 1.15rem;
    padding-block: .9rem;
    border-top: 1px solid var(--line-2);
    margin-top: auto;
}
.p-meta li {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: var(--t-xs);
    color: var(--body);
}
.p-meta svg { width: 15px; height: 15px; color: var(--gold-600); flex: none; }

.p-card__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    /* Pinned to the bottom of the card. The body is already a column flex box,
       so this keeps the footer — and the CTA under it — on the same line across
       a row of cards whose descriptions are different lengths. */
    margin-top: auto;
    padding-top: .9rem;
    border-top: 1px solid var(--line-2);
}
.p-card__yield {
    font-size: var(--t-xs);
    color: var(--body);
}
.p-card__yield strong { color: var(--green); font-size: var(--t-sm); }

/* Rating pill */
.rating {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: var(--t-xs);
    font-weight: 600;
    color: var(--navy-800);
}
.rating svg { width: 14px; height: 14px; color: var(--gold-500); }
.rating span { color: var(--muted); font-weight: 400; }
.stars { display: inline-flex; gap: 2px; color: var(--gold-500); }
.stars svg { width: 16px; height: 16px; }

/* Amenity chips */
.amen-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; }
.amen-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .3rem .7rem;
    font-size: .72rem;
    color: var(--body);
    background: var(--sand-100);
    border: 1px solid var(--line-2);
    border-radius: var(--r-pill);
}
.amen-chip svg { width: 13px; height: 13px; color: var(--gold-600); }

/* Plain label chips — country/keyword rows in prose blocks */
.chip-row { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1.5rem; }
.chip {
    display: inline-flex;
    align-items: center;
    padding: .38rem .85rem;
    font-size: var(--t-xs);
    letter-spacing: .04em;
    color: var(--navy-800);
    background: var(--gold-100);
    border: 1px solid var(--gold-300);
    border-radius: var(--r-pill);
}

/* ------------------------------------------------------ East Africa promo --
   Shared by the homepage and the Travel & Tourism page (includes/east-africa-
   promo.php). One framed image with a floating badge, so the strip still reads
   as intentional while the client's own photography is being supplied. */
.ea-promo__media { position: relative; }
.ea-promo__media img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--r-lg);
    box-shadow: var(--sh-lg);
}
.ea-promo__badge {
    position: absolute;
    left: 1.25rem; bottom: 1.25rem;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .6rem 1.1rem;
    background: rgba(255, 255, 255, .94);
    backdrop-filter: blur(6px);
    border-radius: var(--r-pill);
    box-shadow: var(--sh-sm);
    font-size: var(--t-xs);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--navy-800);
}
.ea-promo__badge svg { width: 15px; height: 15px; color: var(--gold-600); }

/* ==========================================================================
   12. FILTER BAR
   ========================================================================== */
.filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 2rem;
}
.filter-tabs { display: flex; flex-wrap: wrap; gap: .5rem; }
.filter-tab {
    padding: .55rem 1.25rem;
    font-size: var(--t-xs);
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--body);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    transition: all var(--t-fast) var(--ease);
}
.filter-tab:hover { border-color: var(--gold-400); color: var(--navy-800); }
.filter-tab.is-active { background: var(--navy-800); border-color: var(--navy-800); color: #fff; }

.result-count { font-size: var(--t-sm); color: var(--muted); }
.result-count strong { color: var(--navy-800); }

.empty-state {
    grid-column: 1 / -1;
    text-align: center;
    padding: 3.5rem 1.5rem;
    background: var(--sand-100);
    border: 1px dashed var(--line);
    border-radius: var(--r-lg);
}
.empty-state svg { width: 46px; height: 46px; color: var(--gold-500); margin: 0 auto 1rem; }

/* ==========================================================================
   13. TESTIMONIALS
   ========================================================================== */
.t-slider { position: relative; overflow: hidden; }
.t-track {
    display: flex;
    transition: transform .6s var(--ease-out);
    will-change: transform;
}
.t-slide { flex: 0 0 33.3333%; padding-inline: .65rem; }

.quote-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 2rem 1.85rem;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    position: relative;
    transition: all var(--t-mid) var(--ease);
}
.quote-card:hover { box-shadow: var(--sh); border-color: var(--gold-300); }
.quote-card__mark {
    position: absolute;
    top: 1.5rem; right: 1.75rem;
    font-family: var(--f-display);
    font-size: 4.5rem;
    line-height: 1;
    color: var(--sand-200);
    pointer-events: none;
}
.quote-card .stars { margin-bottom: 1rem; }
.quote-card p {
    font-size: var(--t-sm);
    line-height: 1.85;
    color: var(--ink-soft);
    margin-bottom: 1.5rem;
}
.quote-card__by {
    display: flex;
    align-items: center;
    gap: .9rem;
    margin-top: auto;
    padding-top: 1.25rem;
    border-top: 1px solid var(--line-2);
}
.quote-card__by img {
    width: 52px; height: 52px;
    border-radius: 50%;
    object-fit: cover;
    flex: none;
    border: 2px solid var(--gold-300);
}
.quote-card__by strong { display: block; color: var(--navy-800); font-size: var(--t-sm); }
.quote-card__by span { font-size: var(--t-xs); color: var(--muted); }

/* ------------------------------------------------- Verified Google reviews --
   A summary rail beside the review cards. The rail is what makes a small number
   of genuine reviews read as deliberate rather than thin, so it stays even when
   only one or two reviews have been copied across. */
.greview-wrap {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: var(--gap);
    align-items: start;
}
.greview-summary {
    /* Deliberately not sticky: the rail carries a data-reveal transform, and
       transform + position:sticky on the same element is a fight nobody wins. */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 2rem 1.6rem;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-sm);
}
.greview-summary__score {
    font-family: var(--f-display);
    font-size: 3.25rem;
    line-height: 1;
    color: var(--navy-800);
    margin: .85rem 0 .5rem;
}
.greview-summary .stars svg { width: 20px; height: 20px; }
.greview-summary__count {
    margin-top: .6rem;
    font-size: var(--t-xs);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
}
.greview-summary p {
    font-size: var(--t-sm);
    color: var(--body);
    margin: 1rem 0 1.35rem;
}

.google-g { width: 34px; height: 34px; flex: none; }
.google-g--sm { width: 20px; height: 20px; margin-left: auto; }

.greview-grid {
    display: grid;
    /* min() keeps the track from forcing a horizontal scrollbar on a 320px
       handset, where the container is narrower than the 300px floor. */
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: var(--gap);
}
.greview-card {
    display: flex;
    flex-direction: column;
    padding: 1.75rem 1.6rem;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    transition: all var(--t-mid) var(--ease);
}
.greview-card:hover { border-color: var(--gold-300); box-shadow: var(--sh); }
.greview-card__head {
    display: flex;
    align-items: center;
    gap: .9rem;
    margin-bottom: 1.1rem;
}
.greview-card__avatar {
    display: grid;
    place-items: center;
    width: 44px; height: 44px;
    flex: none;
    border-radius: 50%;
    background: var(--navy-800);
    color: var(--gold-400);
    font-family: var(--f-display);
    font-size: 1.15rem;
    line-height: 1;
}
.greview-card__head strong { display: block; color: var(--navy-800); font-size: var(--t-sm); }
.greview-card__date { font-size: var(--t-xs); color: var(--muted); }
.greview-card .stars { margin-bottom: .9rem; }
.greview-card p {
    font-size: var(--t-sm);
    line-height: 1.85;
    color: var(--ink-soft);
    margin-bottom: 1.1rem;
}
.greview-card .link-arrow { margin-top: auto; }

.slider-nav { display: flex; gap: .5rem; }
.slider-btn {
    display: grid;
    place-items: center;
    width: 46px; height: 46px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid var(--line);
    color: var(--navy-800);
    transition: all var(--t-fast) var(--ease);
}
.slider-btn svg { width: 18px; height: 18px; }
.slider-btn:hover:not(:disabled) { background: var(--gold-500); border-color: var(--gold-500); color: var(--navy-900); }
.slider-btn:disabled { opacity: .35; cursor: not-allowed; }

/* ==========================================================================
   14. AREAS / PARTNERS / CTA BAND
   ========================================================================== */
.area-grid {
    display: grid;
    gap: var(--gap);
    grid-template-columns: repeat(6, 1fr);
}
@media (max-width: 1100px) { .area-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 768px)  { .area-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 520px)  { .area-grid { grid-template-columns: repeat(2, 1fr); } }

.area-card {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    border-radius: var(--r);
    overflow: hidden;
    isolation: isolate;
}
.area-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.area-card:hover img { transform: scale(1.09); }
.area-card::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(7,27,51,0) 45%, rgba(7,27,51,.85) 100%);
}
.area-card__body {
    position: absolute;
    inset: auto 0 0 0;
    z-index: 2;
    padding: 1.1rem;
    color: #fff;
}
.area-card__body h4 { color: #fff; font-size: 1.02rem; margin-bottom: .1rem; }
.area-card__body span { font-size: var(--t-xs); color: var(--gold-400); }

.partners {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1rem 2.5rem;
}
.partner {
    font-family: var(--f-logo);
    font-size: clamp(.95rem, .85rem + .4vw, 1.25rem);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--muted);
    opacity: .75;
    transition: all var(--t-mid) var(--ease);
}
.partner:hover { color: var(--navy-800); opacity: 1; }

.cta-band {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-radius: var(--r-xl);
    padding: clamp(2.5rem, 1.6rem + 4vw, 5rem);
    background: var(--navy-800);
}
.cta-band__bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    object-fit: cover;
    width: 100%; height: 100%;
}
.cta-band::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(100deg, rgba(7, 27, 51, .95) 8%, rgba(11, 37, 69, .82) 52%, rgba(11, 37, 69, .55) 100%);
}
.cta-band__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}
.cta-band__text { max-width: 620px; }
.cta-band__text h2 { color: #fff; margin-bottom: .85rem; }
.cta-band__text p { color: rgba(255, 255, 255, .8); }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: .85rem; }

.contact-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: rgba(255, 255, 255, .16);
    border-radius: var(--r);
    overflow: hidden;
    margin-top: 2.5rem;
}
.contact-strip a, .contact-strip div {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: 1.35rem 1.5rem;
    background: rgba(255, 255, 255, .06);
    color: #fff;
    transition: background-color var(--t-fast) var(--ease);
}
.contact-strip a:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.contact-strip svg { width: 24px; height: 24px; color: var(--gold-400); flex: none; }
.contact-strip strong { display: block; font-size: var(--t-sm); font-weight: 600; }
.contact-strip span { font-size: var(--t-xs); color: rgba(255, 255, 255, .6); }

/* ==========================================================================
   15. BLOG
   ========================================================================== */
.post-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
    transition: all var(--t-mid) var(--ease);
}
.post-card:hover { transform: translateY(-6px); box-shadow: var(--sh-lg); border-color: var(--gold-300); }
.post-card__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.post-card:hover .post-card__media img { transform: scale(1.06); }
.post-card__cat {
    position: absolute;
    top: .9rem; left: .9rem;
    z-index: 2;
}
.post-card__body { padding: 1.4rem 1.4rem 1.6rem; display: flex; flex-direction: column; flex: 1; }
.post-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem 1rem;
    margin-bottom: .7rem;
    font-size: var(--t-xs);
    color: var(--muted);
}
.post-meta li { display: inline-flex; align-items: center; gap: .35rem; }
.post-meta svg { width: 13px; height: 13px; color: var(--gold-600); }
.post-card h3 { font-size: 1.15rem; line-height: 1.35; margin-bottom: .6rem; }
.post-card h3 a { color: inherit; }
.post-card h3 a:hover { color: var(--gold-600); }
.post-card p { font-size: var(--t-sm); margin-bottom: 1.2rem; }
.post-card .link-arrow { margin-top: auto; }

/* Article body */
.article-body { font-size: 1.03rem; line-height: 1.9; }
.article-body p { margin-bottom: 1.35rem; }
.article-body h2 { font-size: var(--t-h3); margin: 2.5rem 0 1rem; }
.article-body h3 { font-size: var(--t-h4); margin: 2rem 0 .85rem; }
.article-body > p:first-of-type {
    font-size: 1.15rem;
    color: var(--ink-soft);
    line-height: 1.8;
}
.article-figure { margin: 2rem 0; border-radius: var(--r-lg); overflow: hidden; }
.pull-quote {
    margin: 2.25rem 0;
    padding: 1.5rem 1.75rem;
    background: var(--sand-100);
    border-left: 3px solid var(--gold-500);
    border-radius: 0 var(--r) var(--r) 0;
    font-family: var(--f-display);
    font-size: 1.2rem;
    font-style: italic;
    color: var(--navy-800);
    line-height: 1.6;
}

.share-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .6rem;
    margin-top: 2.5rem;
    padding-top: 1.75rem;
    border-top: 1px solid var(--line);
}
.share-row span { font-size: var(--t-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-right: .4rem; }
.share-btn {
    display: grid;
    place-items: center;
    width: 40px; height: 40px;
    border-radius: 50%;
    border: 1px solid var(--line);
    color: var(--navy-800);
    transition: all var(--t-fast) var(--ease);
}
.share-btn svg { width: 16px; height: 16px; }
.share-btn:hover { background: var(--navy-800); border-color: var(--navy-800); color: #fff; }

/* Sidebar */
.sidebar { display: grid; gap: 1.5rem; align-content: start; }
.widget {
    padding: 1.6rem;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
}
.widget__title {
    font-size: var(--t-h5);
    margin-bottom: 1.15rem;
    padding-bottom: .8rem;
    border-bottom: 1px solid var(--line-2);
}
.widget--navy { background: var(--navy-800); border-color: var(--navy-800); }
.widget--navy .widget__title { color: #fff; border-bottom-color: rgba(255,255,255,.16); }
.widget--navy p { color: rgba(255,255,255,.78); font-size: var(--t-sm); }

.mini-post { display: flex; gap: .85rem; padding-block: .8rem; border-bottom: 1px solid var(--line-2); }
.mini-post:last-child { border-bottom: 0; padding-bottom: 0; }
.mini-post img { width: 78px; height: 64px; object-fit: cover; border-radius: var(--r-xs); flex: none; }
.mini-post h5 { font-size: .92rem; line-height: 1.4; margin-bottom: .25rem; }
.mini-post h5 a { color: var(--navy-800); }
.mini-post h5 a:hover { color: var(--gold-600); }
.mini-post span { font-size: var(--t-xs); color: var(--muted); }

.tag-cloud { display: flex; flex-wrap: wrap; gap: .45rem; }
.tag-cloud a {
    padding: .35rem .8rem;
    font-size: var(--t-xs);
    color: var(--body);
    background: var(--sand-100);
    border: 1px solid var(--line-2);
    border-radius: var(--r-pill);
}
.tag-cloud a:hover { background: var(--gold-500); border-color: var(--gold-500); color: var(--navy-900); }

.cat-list li + li { border-top: 1px solid var(--line-2); }
.cat-list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .75rem 0;
    font-size: var(--t-sm);
    color: var(--ink-soft);
}
.cat-list a:hover { color: var(--gold-600); }
.cat-list a span { font-size: var(--t-xs); color: var(--muted); }

/* ==========================================================================
   16. FORMS
   ========================================================================== */
.form-card {
    padding: clamp(1.5rem, 1rem + 2vw, 2.75rem);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-sm);
}
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.15rem; }
.field { display: flex; flex-direction: column; gap: .45rem; }
.field--full { grid-column: 1 / -1; }
.field label {
    font-size: var(--t-xs);
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-soft);
}
.field label .req { color: var(--gold-600); }
.field input, .field select, .field textarea {
    width: 100%;
    padding: .9rem 1.05rem;
    font-size: var(--t-sm);
    color: var(--ink);
    background: var(--sand-100);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
    outline: none;
}
.field textarea { min-height: 150px; resize: vertical; line-height: 1.7; }
.field select { appearance: none; cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2358687A' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 16px;
    padding-right: 2.75rem;
}
.field input::placeholder, .field textarea::placeholder { color: var(--muted); }
.field input:focus, .field select:focus, .field textarea:focus {
    border-color: var(--gold-500);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(200, 164, 92, .14);
}
.field.has-error input, .field.has-error select, .field.has-error textarea {
    border-color: var(--red);
    background: #FDF4F3;
}
.field__error {
    font-size: var(--t-xs);
    color: var(--red);
    display: none;
}
.field.has-error .field__error { display: block; }

.check-row { display: flex; align-items: flex-start; gap: .65rem; }
.check-row input { width: 18px; height: 18px; margin-top: .3rem; accent-color: var(--gold-600); flex: none; }
.check-row label {
    font-size: var(--t-xs);
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
    color: var(--body);
    line-height: 1.65;
}

.form-alert {
    display: none;
    align-items: flex-start;
    gap: .7rem;
    padding: .95rem 1.15rem;
    border-radius: var(--r-sm);
    font-size: var(--t-sm);
    margin-bottom: 1.25rem;
}
.form-alert.is-shown { display: flex; }
.form-alert svg { width: 20px; height: 20px; flex: none; margin-top: .15rem; }
.form-alert--ok { background: #EEF8F2; color: #14603F; border: 1px solid #BFE3D0; }
.form-alert--err { background: #FDF1F0; color: #8E2A20; border: 1px solid #F1C9C4; }

/* Contact info cards */
.info-card {
    display: flex;
    gap: 1.1rem;
    padding: 1.4rem;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r);
    transition: all var(--t-mid) var(--ease);
}
.info-card:hover { border-color: var(--gold-300); box-shadow: var(--sh-sm); }
.info-card__icon {
    display: grid;
    place-items: center;
    width: 48px; height: 48px;
    flex: none;
    border-radius: var(--r-sm);
    background: var(--gold-100);
    color: var(--gold-700);
}
.info-card__icon svg { width: 22px; height: 22px; }
.info-card h4 { font-size: var(--t-h5); margin-bottom: .3rem; }
.info-card a, .info-card p { font-size: var(--t-sm); color: var(--body); display: block; }
.info-card a:hover { color: var(--gold-600); }
/* A grid column's automatic minimum is min-content, and the longest single
   word in these cards is the email address. On a 320px handset that one word
   pushed the whole column wider than the container and dragged a horizontal
   scrollbar across the page. `anywhere` lets it break, which lowers the
   min-content width and lets the column shrink to fit like everything else. */
.info-card > div { min-width: 0; }
.info-card a, .info-card p { overflow-wrap: anywhere; }

/* --------------------------------------------------- Social channel band --
   Used by includes/social-band.php. Each card keeps the site's ivory/gold
   language and only borrows its channel's colour on hover, so a row of four
   still reads as one component rather than four brand logos. */
.social-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
    gap: var(--gap);
}
.social-card {
    display: flex;
    align-items: flex-start;
    gap: 1.1rem;
    padding: 1.6rem 1.4rem;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r);
    position: relative;
    transition: all var(--t-mid) var(--ease);
}
.social-card:hover { border-color: var(--gold-300); box-shadow: var(--sh); transform: translateY(-4px); }
.social-card__icon {
    display: grid;
    place-items: center;
    width: 48px; height: 48px;
    flex: none;
    border-radius: var(--r-sm);
    background: var(--gold-100);
    color: var(--gold-700);
    transition: all var(--t-mid) var(--ease);
}
.social-card__icon svg { width: 22px; height: 22px; }
.social-card__body { min-width: 0; }
.social-card h4 { font-size: var(--t-h5); margin-bottom: .15rem; color: var(--navy-800); }
.social-card__handle {
    display: block;
    font-size: var(--t-xs);
    color: var(--gold-600);
    word-break: break-word;
    margin-bottom: .5rem;
}
.social-card p { font-size: var(--t-sm); color: var(--body); }
.social-card__go {
    position: absolute;
    top: 1.15rem; right: 1.15rem;
    color: var(--muted);
    transition: all var(--t-fast) var(--ease);
    line-height: 0;
}
.social-card__go svg { width: 16px; height: 16px; }
.social-card:hover .social-card__go { color: var(--gold-600); transform: translate(2px, -2px); }

/* Channel tint, applied on hover only */
.social-card--instagram:hover .social-card__icon { background: #E1306C; color: #fff; }
.social-card--youtube:hover   .social-card__icon { background: #FF0000; color: #fff; }
.social-card--facebook:hover  .social-card__icon { background: #1877F2; color: #fff; }
.social-card--linkedin:hover  .social-card__icon { background: #0A66C2; color: #fff; }

.map-embed {
    border-radius: var(--r-lg);
    overflow: hidden;
    border: 1px solid var(--line);
    box-shadow: var(--sh-sm);
    line-height: 0;
    background: var(--sand-200);
}
.map-embed iframe { width: 100%; height: 420px; border: 0; display: block; }

/* Newsletter */
.newsletter-form {
    display: flex;
    gap: .6rem;
    flex-wrap: wrap;
}
.newsletter-form input {
    flex: 1 1 220px;
    min-width: 0;
    padding: .95rem 1.15rem;
    font-size: var(--t-sm);
    color: #fff;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: var(--r-pill);
    outline: none;
    transition: all var(--t-fast) var(--ease);
}
.newsletter-form input::placeholder { color: rgba(255, 255, 255, .5); }
.newsletter-form input:focus { border-color: var(--gold-400); background: rgba(255, 255, 255, .12); }

/* ==========================================================================
   17. ACCORDION (FAQ)
   ========================================================================== */
.accordion { display: grid; gap: .85rem; }
.acc-item {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r);
    overflow: hidden;
    transition: border-color var(--t-mid) var(--ease), box-shadow var(--t-mid) var(--ease);
}
.acc-item.is-open { border-color: var(--gold-300); box-shadow: var(--sh-sm); }
.acc-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    width: 100%;
    padding: 1.25rem 1.4rem;
    text-align: left;
    font-family: var(--f-display);
    font-size: 1.06rem;
    font-weight: 600;
    color: var(--navy-800);
    line-height: 1.45;
}
.acc-head__icon {
    display: grid;
    place-items: center;
    width: 32px; height: 32px;
    flex: none;
    border-radius: 50%;
    background: var(--sand-100);
    color: var(--gold-700);
    transition: all var(--t-mid) var(--ease);
}
.acc-head__icon svg { width: 16px; height: 16px; transition: transform var(--t-mid) var(--ease); }
.acc-item.is-open .acc-head__icon { background: var(--gold-500); color: var(--navy-900); }
.acc-item.is-open .acc-head__icon svg { transform: rotate(45deg); }
.acc-panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--t-mid) var(--ease);
}
.acc-panel__inner {
    padding: 0 1.4rem 1.4rem;
    font-size: var(--t-sm);
    color: var(--body);
    line-height: 1.85;
}

/* Sidebar variant — .accordion.accordion--flush inside a .widget.
   The default item is a white card, which is right in a full-width FAQ column
   and wrong inside a white widget: the card disappears into its own background
   and leaves a shadow floating around nothing. Seven pages worked around that
   with inline styles that zeroed the padding, so an opened answer sat flush
   against the edge of the invisible card with no room to breathe — the thing
   the client flagged on Travel & Tourism.

   Here the item is a plain row on a hairline, and the answer is its own tinted
   block with real padding on all four sides, so question and answer read as
   two different things. One rule, every sidebar FAQ on the site. */
.accordion--flush { gap: 0; }
.accordion--flush .acc-item,
.accordion--flush .acc-item.is-open {
    background: none;
    border: 0;
    border-bottom: 1px solid var(--line-2);
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
}
.accordion--flush .acc-item:last-child { border-bottom: 0; }
.accordion--flush .acc-head {
    padding: 1.05rem 0;
    font-size: .98rem;
    gap: 1rem;
}
.accordion--flush .acc-item:first-child .acc-head { padding-top: .2rem; }
.accordion--flush .acc-panel__inner {
    margin-bottom: 1.15rem;
    padding: 1rem 1.15rem;
    background: var(--sand-100);
    border-left: 2px solid var(--gold-300);
    border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.widget--navy .accordion--flush .acc-item,
.widget--navy .accordion--flush .acc-item.is-open { border-bottom-color: rgba(255,255,255,.14); }
.widget--navy .accordion--flush .acc-head { color: #fff; }
.widget--navy .accordion--flush .acc-panel__inner {
    background: rgba(255,255,255,.06);
    border-left-color: var(--gold-500);
    color: rgba(255,255,255,.82);
}

/* ==========================================================================
   18. GALLERY + LIGHTBOX
   ========================================================================== */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}
.gal-item {
    position: relative;
    display: block;
    border-radius: var(--r);
    overflow: hidden;
    aspect-ratio: 4 / 3;
    cursor: zoom-in;
    isolation: isolate;
}
.gal-item--tall { grid-row: span 2; aspect-ratio: 4 / 6.2; }
.gal-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.gal-item:hover img { transform: scale(1.08); }
.gal-item::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(7,27,51,0) 50%, rgba(7,27,51,.7) 100%);
    opacity: 0;
    transition: opacity var(--t-mid) var(--ease);
}
.gal-item:hover::after { opacity: 1; }
.gal-item__cap {
    position: absolute;
    inset: auto 0 0 0;
    z-index: 2;
    padding: 1rem;
    color: #fff;
    font-size: var(--t-sm);
    font-weight: 500;
    transform: translateY(8px);
    opacity: 0;
    transition: all var(--t-mid) var(--ease);
}
.gal-item:hover .gal-item__cap { transform: none; opacity: 1; }
.gal-item__zoom {
    position: absolute;
    top: 50%; left: 50%;
    z-index: 2;
    translate: -50% -50%;
    display: grid;
    place-items: center;
    width: 52px; height: 52px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    color: var(--navy-800);
    opacity: 0;
    scale: .8;
    transition: all var(--t-mid) var(--ease);
}
.gal-item__zoom svg { width: 20px; height: 20px; }
.gal-item:hover .gal-item__zoom { opacity: 1; scale: 1; }

.lightbox {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: grid;
    place-items: center;
    padding: 1.5rem;
    background: rgba(7, 27, 51, .93);
    opacity: 0;
    visibility: hidden;
    transition: all var(--t-mid) var(--ease);
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox img {
    max-width: min(1100px, 92vw);
    max-height: 82vh;
    border-radius: var(--r);
    box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
}
.lightbox__cap {
    margin-top: 1rem;
    text-align: center;
    color: rgba(255, 255, 255, .85);
    font-size: var(--t-sm);
}
.lightbox__btn {
    position: absolute;
    display: grid;
    place-items: center;
    width: 50px; height: 50px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .25);
    color: #fff;
    transition: all var(--t-fast) var(--ease);
}
.lightbox__btn:hover { background: var(--gold-500); border-color: var(--gold-500); color: var(--navy-900); }
.lightbox__btn svg { width: 20px; height: 20px; }
.lightbox__close { top: 1.5rem; right: 1.5rem; }
.lightbox__prev { left: 1.5rem; top: 50%; translate: 0 -50%; }
.lightbox__next { right: 1.5rem; top: 50%; translate: 0 -50%; }

/* ==========================================================================
   19. PAGE BANNER + BREADCRUMB
   ========================================================================== */
.page-banner {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding-block: clamp(3rem, 2rem + 5vw, 6rem);
    background: var(--sand-200);
}
.page-banner__bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%; height: 100%;
    object-fit: cover;
}
.page-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(96deg,
        rgba(253, 251, 247, .97) 0%,
        rgba(253, 251, 247, .9) 40%,
        rgba(253, 251, 247, .45) 78%,
        rgba(253, 251, 247, .15) 100%);
}
.page-banner h1 { margin-bottom: .75rem; }
.page-banner p { max-width: 60ch; }

.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin-top: 1.15rem;
    font-size: var(--t-xs);
    letter-spacing: .04em;
    color: var(--muted);
}
.breadcrumb a { color: var(--body); }
.breadcrumb a:hover { color: var(--gold-600); }
.breadcrumb li { display: inline-flex; align-items: center; gap: .5rem; }
.breadcrumb li + li::before {
    content: "";
    width: 4px; height: 4px;
    border-radius: 50%;
    background: var(--gold-500);
}
.breadcrumb [aria-current] { color: var(--navy-800); font-weight: 500; }

/* ==========================================================================
   20. DETAIL PAGES
   ========================================================================== */
.detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: clamp(1.75rem, 1rem + 2.5vw, 3rem);
    align-items: start;
}

.detail-gallery { display: grid; gap: .75rem; }
.detail-gallery__main {
    border-radius: var(--r-lg);
    overflow: hidden;
    aspect-ratio: 16 / 10;
    cursor: zoom-in;
    position: relative;
}
.detail-gallery__main img { width: 100%; height: 100%; object-fit: cover; }
.detail-gallery__thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: .75rem; }
.detail-gallery__thumb {
    border-radius: var(--r-sm);
    overflow: hidden;
    aspect-ratio: 4 / 3;
    border: 2px solid transparent;
    transition: border-color var(--t-fast) var(--ease);
    cursor: pointer;
}
.detail-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.detail-gallery__thumb.is-active { border-color: var(--gold-500); }

.detail-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.25rem;
    padding-bottom: 1.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--line);
}
.detail-head h1 { font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.5rem); margin-bottom: .5rem; }
.detail-price {
    font-family: var(--f-display);
    font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem);
    font-weight: 600;
    color: var(--navy-800);
    line-height: 1.1;
}
.detail-price small { display: block; font-family: var(--f-body); font-size: var(--t-xs); color: var(--muted); font-weight: 400; margin-top: .25rem; }

.spec-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: var(--r);
    overflow: hidden;
    margin-bottom: 2rem;
}
.spec {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 1.1rem 1.15rem;
    background: #fff;
}
.spec svg { width: 22px; height: 22px; color: var(--gold-600); flex: none; }
.spec strong { display: block; font-size: var(--t-sm); color: var(--navy-800); line-height: 1.2; }
.spec span { font-size: var(--t-xs); color: var(--muted); }

.detail-section { margin-bottom: 2.5rem; }
.detail-section h2 { font-size: var(--t-h3); margin-bottom: 1.1rem; }

.amenity-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: .85rem;
}
.amenity-grid li {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .8rem 1rem;
    background: var(--sand-100);
    border: 1px solid var(--line-2);
    border-radius: var(--r-sm);
    font-size: var(--t-sm);
    color: var(--ink-soft);
}
.amenity-grid svg { width: 18px; height: 18px; color: var(--gold-600); flex: none; }

.sticky-card { position: sticky; top: calc(var(--header-h) + 20px); display: grid; gap: 1.25rem; }
.booking-card {
    padding: 1.6rem;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--sh);
}
.booking-card__price {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 1.1rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid var(--line-2);
}
.booking-card__price strong {
    font-family: var(--f-display);
    font-size: 1.6rem;
    color: var(--navy-800);
}
.booking-card__price span { font-size: var(--t-xs); color: var(--muted); }
.booking-card .field label { font-size: .68rem; }
.booking-card__note {
    margin-top: 1rem;
    font-size: var(--t-xs);
    color: var(--muted);
    text-align: center;
    line-height: 1.6;
}
.advisor-card {
    padding: 1.6rem;
    background: var(--navy-800);
    border-radius: var(--r-lg);
    color: #fff;
    text-align: center;
}
.advisor-card img {
    width: 78px; height: 78px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto .9rem;
    border: 3px solid var(--gold-500);
}
.advisor-card strong { display: block; color: #fff; font-size: 1.05rem; }
.advisor-card span { font-size: var(--t-xs); color: var(--gold-400); letter-spacing: .08em; text-transform: uppercase; }
.advisor-card p { font-size: var(--t-sm); color: rgba(255,255,255,.72); margin: .9rem 0 1.25rem; }
.advisor-card .btn { width: 100%; }
.advisor-card .btn + .btn { margin-top: .6rem; }

/* Price / package tables */
.price-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 2rem 1.75rem;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    transition: all var(--t-mid) var(--ease);
}
.price-card:hover { transform: translateY(-6px); box-shadow: var(--sh-lg); }
.price-card.is-featured { border-color: var(--gold-500); box-shadow: var(--sh); position: relative; }
.price-card.is-featured::before {
    content: "Most Popular";
    position: absolute;
    top: -12px; left: 50%;
    translate: -50% 0;
    padding: .28rem .9rem;
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    background: var(--gold-500);
    color: var(--navy-900);
    border-radius: var(--r-pill);
    white-space: nowrap;
}
.price-card h3 { font-size: var(--t-h4); margin-bottom: .35rem; }
.price-card__price {
    font-family: var(--f-display);
    font-size: 2.1rem;
    font-weight: 600;
    color: var(--navy-800);
    margin-block: .75rem 1.25rem;
    line-height: 1;
}
.price-card__price small { font-family: var(--f-body); font-size: .8rem; color: var(--muted); font-weight: 400; }
.price-card ul { display: grid; gap: .65rem; margin-bottom: 1.75rem; }
.price-card li { display: flex; align-items: flex-start; gap: .6rem; font-size: var(--t-sm); }
.price-card li svg { width: 17px; height: 17px; color: var(--gold-600); flex: none; margin-top: .28rem; }
.price-card .btn { margin-top: auto; }

/* ==========================================================================
   21. PAGINATION
   ========================================================================== */
.pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .45rem;
    margin-top: 3rem;
}
.pagination a, .pagination span {
    display: grid;
    place-items: center;
    min-width: 44px;
    height: 44px;
    padding-inline: .75rem;
    font-size: var(--t-sm);
    font-weight: 500;
    color: var(--ink-soft);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    transition: all var(--t-fast) var(--ease);
}
.pagination a:hover { border-color: var(--gold-400); color: var(--navy-800); }
.pagination .is-current { background: var(--navy-800); border-color: var(--navy-800); color: #fff; }

/* ==========================================================================
   22. FOOTER
   ========================================================================== */
.site-footer {
    background: var(--navy-800);
    color: rgba(255, 255, 255, .72);
    position: relative;
    overflow: hidden;
}
.site-footer::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--gold-700), var(--gold-500), var(--gold-300), var(--gold-500), var(--gold-700));
}
.footer-cta {
    padding-block: clamp(2.5rem, 1.8rem + 3vw, 4rem);
    border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.footer-cta__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.75rem;
}
.footer-cta h3 { color: #fff; font-size: var(--t-h3); margin-bottom: .4rem; }
.footer-cta p { color: rgba(255, 255, 255, .7); font-size: var(--t-sm); }

.footer-main {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1.4fr;
    gap: clamp(1.75rem, 1rem + 3vw, 3.5rem);
    padding-block: clamp(2.75rem, 2rem + 3vw, 4.5rem);
}
.footer-brand .brand__name { color: #fff; }
.footer-brand .brand__tag { color: rgba(255, 255, 255, .5); }
.footer-brand > p {
    margin-top: 1.25rem;
    font-size: var(--t-sm);
    color: rgba(255, 255, 255, .68);
    max-width: 38ch;
}
.footer-quote {
    margin-top: 1.35rem;
    padding-left: 1rem;
    border-left: 2px solid var(--gold-500);
    font-family: var(--f-display);
    font-style: italic;
    font-size: var(--t-sm);
    color: var(--gold-300);
    line-height: 1.7;
}

.footer-title {
    font-family: var(--f-body);
    font-size: var(--t-xs);
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: 1.35rem;
    position: relative;
    padding-bottom: .75rem;
}
.footer-title::after {
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    width: 28px; height: 2px;
    background: var(--gold-500);
}
.footer-links { display: grid; gap: .7rem; }
.footer-links a {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: var(--t-sm);
    color: rgba(255, 255, 255, .7);
}
.footer-links a::before {
    content: "";
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--gold-500);
    opacity: .55;
    transition: all var(--t-fast) var(--ease);
    flex: none;
}
.footer-links a:hover { color: #fff; padding-left: 4px; }
.footer-links a:hover::before { opacity: 1; }

.footer-contact { display: grid; gap: 1rem; }
.footer-contact li { display: flex; gap: .8rem; font-size: var(--t-sm); }
.footer-contact svg { width: 17px; height: 17px; color: var(--gold-400); flex: none; margin-top: .3rem; }
.footer-contact a { color: rgba(255, 255, 255, .72); }
.footer-contact a:hover { color: var(--gold-400); }

.footer-social { display: flex; gap: .55rem; margin-top: 1.5rem; }
.footer-social a {
    display: grid;
    place-items: center;
    width: 40px; height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .2);
    color: rgba(255, 255, 255, .8);
    transition: all var(--t-fast) var(--ease);
}
.footer-social a svg { width: 17px; height: 17px; }
.footer-social a:hover {
    background: var(--gold-500);
    border-color: var(--gold-500);
    color: var(--navy-900);
    transform: translateY(-3px);
}

.footer-bottom {
    padding-block: 1.35rem;
    border-top: 1px solid rgba(255, 255, 255, .12);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .85rem;
    font-size: var(--t-xs);
    color: rgba(255, 255, 255, .55);
}
.footer-bottom nav { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.footer-bottom a { color: rgba(255, 255, 255, .55); }
.footer-bottom a:hover { color: var(--gold-400); }

/* ==========================================================================
   23. FLOATING ACTIONS
   ========================================================================== */
.floaters {
    position: fixed;
    right: clamp(.9rem, .5rem + 1vw, 1.5rem);
    bottom: clamp(.9rem, .5rem + 1vw, 1.5rem);
    z-index: 800;
    display: flex;
    flex-direction: column;
    gap: .6rem;
    align-items: center;
}
.fab {
    display: grid;
    place-items: center;
    width: 54px; height: 54px;
    border-radius: 50%;
    box-shadow: var(--sh-lg);
    transition: all var(--t-mid) var(--ease);
}
.fab svg { width: 24px; height: 24px; }
.fab--wa { background: #25D366; color: #fff; }
.fab--wa:hover { background: #1FBE5B; color: #fff; transform: scale(1.07); }
.fab--wa::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(37, 211, 102, .55);
    animation: waPulse 2.4s infinite;
}
@keyframes waPulse {
    70%  { box-shadow: 0 0 0 16px rgba(37, 211, 102, 0); }
    100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}
.fab--wa { position: relative; }
.fab--top {
    background: #fff;
    color: var(--navy-800);
    border: 1px solid var(--line);
    width: 46px; height: 46px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
}
.fab--top.is-shown { opacity: 1; visibility: visible; transform: none; }
.fab--top:hover { background: var(--navy-800); color: #fff; border-color: var(--navy-800); }
.fab--top svg { width: 18px; height: 18px; }

/* Mobile sticky call bar */
.mobile-bar {
    display: none;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 810;
    background: #fff;
    border-top: 1px solid var(--line);
    box-shadow: 0 -6px 24px rgba(11, 37, 69, .1);
    padding: .55rem .75rem calc(.55rem + env(safe-area-inset-bottom));
}
.mobile-bar__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.mobile-bar a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .2rem;
    padding: .45rem .3rem;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--navy-800);
    border-radius: var(--r-xs);
}
.mobile-bar a svg { width: 19px; height: 19px; color: var(--gold-600); }
.mobile-bar a:active { background: var(--sand-100); }

/* ==========================================================================
   === Blog/FAQ additions ===
   Layout + small components used by blog.php, blog-details.php, faq.php
   and testimonials.php. Appended only — nothing above is modified.
   ========================================================================== */

/* --- Blog / sidebar two-column layout --------------------------------- */
.blog-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: clamp(1.75rem, 1rem + 2.5vw, 3rem);
    align-items: start;
}

/* --- Sidebar search widget -------------------------------------------- */
.widget-search { display: flex; gap: .5rem; }
.widget-search input {
    flex: 1 1 auto;
    min-width: 0;
    padding: .85rem 1rem;
    font-size: var(--t-sm);
    color: var(--ink);
    background: var(--sand-100);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    outline: none;
    transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.widget-search input::placeholder { color: var(--muted); }
.widget-search input:focus { border-color: var(--gold-500); background: #fff; }
.widget-search button {
    display: grid;
    place-items: center;
    width: 48px;
    flex: none;
    border-radius: var(--r-sm);
    background: var(--navy-800);
    color: #fff;
    transition: all var(--t-fast) var(--ease);
}
.widget-search button svg { width: 18px; height: 18px; }
.widget-search button:hover { background: var(--gold-500); color: var(--navy-900); }

/* --- Article author box ----------------------------------------------- */
.author-box {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    margin-top: 2.25rem;
    padding: 1.75rem;
    background: var(--sand-100);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
}
.author-box img {
    width: 84px; height: 84px;
    flex: none;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--gold-300);
}
.author-box h4 { font-size: var(--t-h5); margin-bottom: .2rem; }
.author-box__role {
    display: block;
    font-size: var(--t-xs);
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--gold-600);
    margin-bottom: .6rem;
}
.author-box p { font-size: var(--t-sm); }

/* --- Article figure caption ------------------------------------------- */
.article-figure figcaption {
    padding: .8rem 1rem;
    background: var(--sand-100);
    border: 1px solid var(--line);
    border-top: 0;
    font-size: var(--t-xs);
    color: var(--muted);
    text-align: center;
    line-height: 1.6;
}

/* --- FAQ category groups ----------------------------------------------- */
.faq-group + .faq-group { margin-top: clamp(2.25rem, 1.5rem + 2vw, 3.5rem); }
.faq-group__head {
    display: flex;
    align-items: center;
    gap: .9rem;
    margin-bottom: 1.35rem;
}
.faq-group__head svg { width: 22px; height: 22px; color: var(--gold-600); flex: none; }
.faq-group__head h2 { font-size: var(--t-h3); }
.faq-group__head span {
    margin-left: auto;
    font-size: var(--t-xs);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
    white-space: nowrap;
}
.faq-jump { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2.5rem; }
.faq-jump a {
    padding: .5rem 1.15rem;
    font-size: var(--t-xs);
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--body);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    transition: all var(--t-fast) var(--ease);
}
.faq-jump a:hover { background: var(--navy-800); border-color: var(--navy-800); color: #fff; }

/* ==========================================================================
   === Gallery/legal additions ===
   Small components used by gallery.php, privacy-policy.php, terms.php,
   404.php and thank-you.php. Appended only — nothing above is modified.
   ========================================================================== */

/* --- Legal pages: last-updated pill ------------------------------------ */
.legal-meta {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem 1.1rem;
    font-size: var(--t-xs);
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--gold-700);
    background: var(--gold-100);
    border: 1px solid var(--gold-300);
    border-radius: var(--r-pill);
}
.legal-meta svg { width: 15px; height: 15px; flex: none; }

/* --- Legal pages: table of contents ------------------------------------ */
.legal-toc {
    margin: 1.75rem 0 2.75rem;
    padding: 1.6rem 1.75rem;
    background: var(--sand-100);
    border: 1px solid var(--line);
    border-left: 3px solid var(--gold-500);
    border-radius: 0 var(--r-lg) var(--r-lg) 0;
}
.legal-toc__title {
    font-size: var(--t-h5);
    margin-bottom: 1rem;
}
.legal-toc__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .55rem 1.5rem;
}
.legal-toc__list a {
    display: flex;
    align-items: baseline;
    gap: .6rem;
    font-size: var(--t-sm);
    color: var(--body);
    line-height: 1.5;
}
.legal-toc__list a span {
    font-family: var(--f-display);
    font-size: var(--t-xs);
    font-weight: 600;
    color: var(--gold-600);
    flex: none;
}
.legal-toc__list a:hover { color: var(--navy-800); }

/* --- Legal pages: readable lists inside .article-body ------------------ */
.article-body .legal-list {
    display: grid;
    gap: .7rem;
    margin: 0 0 1.5rem;
    padding-left: 1.35rem;
}
.article-body .legal-list li {
    position: relative;
    font-size: var(--t-sm);
    line-height: 1.8;
}
.article-body .legal-list li::before {
    content: "";
    position: absolute;
    left: -1.35rem;
    top: .78em;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--gold-500);
}
.article-body .legal-list strong { color: var(--navy-800); }
.article-body h2[id] { scroll-margin-top: calc(var(--header-h) + 24px); }

/* --- 404 ---------------------------------------------------------------- */
.err-page {
    max-width: 760px;
    margin-inline: auto;
    text-align: center;
}
.err-page__num {
    display: block;
    font-family: var(--f-display);
    font-size: clamp(6rem, 3rem + 16vw, 13rem);
    font-weight: 700;
    line-height: .95;
    letter-spacing: -0.03em;
    color: var(--gold-500);
    background: linear-gradient(180deg, var(--gold-500), var(--gold-700));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: .75rem;
}
.err-page h1 { margin-bottom: 1rem; }
.err-page .lead { margin-inline: auto; max-width: 60ch; margin-bottom: 1rem; }
.err-page > p { margin-inline: auto; max-width: 62ch; font-size: var(--t-sm); }
.err-page__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .75rem;
    margin-top: 2.25rem;
}
.err-page__help {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem;
    margin-top: 2rem;
    font-size: var(--t-sm);
    color: var(--muted);
}
.err-page__help svg { width: 18px; height: 18px; color: var(--gold-600); flex: none; }
.err-page__help a { color: var(--navy-800); font-weight: 500; }
.err-page__help a:hover { color: var(--gold-600); }

/* --- Thank you: success tick ------------------------------------------- */
.tick-badge {
    display: grid;
    place-items: center;
    width: 96px; height: 96px;
    margin: 0 auto 1.75rem;
    border-radius: 50%;
    background: var(--gold-100);
    border: 1px solid var(--gold-300);
    color: var(--gold-700);
    box-shadow: 0 0 0 12px rgba(200, 164, 92, .12);
}
.tick-badge svg { width: 42px; height: 42px; stroke-width: 1.5; }

/* --- Thank you: what happens next -------------------------------------- */
.next-steps { display: grid; gap: 1rem; }
.next-step {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    padding: 1.5rem 1.6rem;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    transition: all var(--t-mid) var(--ease);
}
.next-step:hover { border-color: var(--gold-300); box-shadow: var(--sh-sm); }
.next-step__n {
    display: grid;
    place-items: center;
    width: 48px; height: 48px;
    flex: none;
    border-radius: 50%;
    font-family: var(--f-display);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--navy-800);
    background: var(--sand-100);
    border: 1px solid var(--gold-300);
}
.next-step h4 { font-size: var(--t-h5); margin-bottom: .3rem; }
.next-step p { font-size: var(--t-sm); }

@media (max-width: 640px) {
    .legal-toc__list { grid-template-columns: 1fr; }
    .next-step { flex-direction: column; gap: .9rem; padding: 1.25rem; }
    .err-page__actions .btn { width: 100%; justify-content: center; }
}

/* ==========================================================================
   19. ICON DEFAULT
   Safety net for any icon() placed somewhere without its own sizing rule.
   Deliberately a single class (0,1,0) so every `.component svg` rule above
   (0,1,1) still overrides it — this only catches the orphans.
   ========================================================================== */
.ic { width: 1.15em; height: 1.15em; flex: none; }

/* ==========================================================================
   20. SECTION NOTE
   A small centred aside under a grid ("Something you don't see here?").
   The icon needs an explicit size: the global `svg { max-width:100% }` reset
   in base.css makes any unsized inline SVG expand to fill its container.
   ========================================================================== */
.note {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: .55rem;
    max-width: 760px;
    margin: 1.75rem auto 0;
    font-size: var(--t-sm);
    line-height: 1.6;
    color: var(--body);
    text-align: left;
}
.note svg {
    width: 17px;
    height: 17px;
    flex: none;
    margin-top: .18rem;
    color: var(--gold-600);
}
.on-dark .note { color: rgba(255, 255, 255, .72); }
.on-dark .note svg { color: var(--gold-400); }

@media (max-width: 560px) {
    .note { gap: .45rem; }
}