/* ==========================================================================
   Aarna Hospitality - main stylesheet
   ========================================================================== */

:root {
    --gold: #b47e12;
    --gold-dark: #9a6b0e;
    --gold-light: #d4a548;
    --gold-grad: linear-gradient(135deg, #c8932a 0%, #b47e12 50%, #9a6b0e 100%);
    --navy: #0f1428;
    --text: #1f2333;
    --muted: #6b6f7d;
    --line: #ececee;
    --cream: #f9f4f0;
    --white: #ffffff;

    --font-head: "Montserrat", "Segoe UI", sans-serif;
    --font-body: "Manrope", "Segoe UI", sans-serif;

    --radius: 18px;
    --radius-lg: 56px;
    --ease: cubic-bezier(.22, .8, .24, 1);
    --shadow-card: 0 10px 24px rgba(15, 20, 40, .14);
    --shadow-hover: 0 22px 44px rgba(15, 20, 40, .24);

    --header-h: clamp(76px, 7.2vw, 104px);
}

*, *::before, *::after { box-sizing: border-box; }

/* clip (not hidden) on both, so off-canvas nav / AOS offsets can't widen the
   mobile layout viewport and the sticky header still works */
html { scroll-behavior: smooth; overflow-x: clip; }

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
    color: var(--text);
    background: var(--white);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    overflow-x: clip;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-head); font-weight: 400; color: var(--navy); }
p { margin: 0; }

.container {
    width: min(1340px, 100% - 2 * clamp(16px, 6.6vw, 96px));
    margin-inline: auto;
}

.container-wide {
    width: min(1440px, 100% - 2 * clamp(16px, 3.2vw, 48px));
    margin-inline: auto;
}

/* lock scroll on <html>, not <body>: html has overflow-x: clip, so overflow on body
   would make body its own scroller and break the sticky header (and the drawer inside it) */
html.nav-open { overflow: hidden; }

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 0 30px;
    height: 50px;
    border-radius: 50px;
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    transition: color .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease);
}

.btn i { font-size: .95em; transition: transform .35s var(--ease); }
.btn:hover i.fa-arrow-right { transform: translateX(5px); }

/* sheen sweep */
.btn::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .45) 50%, transparent 70%);
    transform: translateX(-120%);
    transition: transform .7s var(--ease);
    z-index: -1;
}

.btn:hover::after { transform: translateX(120%); }

.btn-gold {
    border: 0; /* <button class="btn btn-gold"> otherwise keeps the UA border */
    color: var(--white);
    background: var(--gold-grad);
    box-shadow: 0 6px 16px rgba(180, 126, 18, .32);
}

.btn-gold:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(180, 126, 18, .42); }

.btn-ghost {
    color: var(--navy);
    background: rgba(255, 255, 255, .35);
    border: 1.5px solid var(--gold);
    backdrop-filter: blur(4px);
}

.btn-outline {
    color: var(--gold-dark);
    border: 1.5px solid var(--gold);
    background: transparent;
    height: 46px;
    padding: 0 28px;
    font-size: 15px;
}

/* fill-from-left on outline buttons */
.btn-ghost::before,
.btn-outline::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--gold-grad);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .45s var(--ease);
    z-index: -2;
}

.btn-ghost:hover,
.btn-outline:hover { color: var(--white); border-color: transparent; }
.btn-ghost:hover::before,
.btn-outline:hover::before { transform: scaleX(1); }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    height: var(--header-h);
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(10px);
    transition: height .4s var(--ease), box-shadow .4s var(--ease);
}

.site-header.is-scrolled {
    height: 78px;
    box-shadow: 0 6px 24px rgba(15, 20, 40, .08);
}

.header-inner {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.brand img {
    height: calc(var(--header-h) * .86);
    width: auto;
    transition: height .4s var(--ease);
}

.site-header.is-scrolled .brand img { height: 62px; }

.main-nav { display: flex; align-items: center; }

.nav-list { display: flex; align-items: center; gap: clamp(16px, 1.9vw, 40px); }

.nav-list > li { position: relative; }

.nav-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 0;
    font-size: 15px;
    font-weight: 500;
    color: var(--navy);
    transition: color .3s;
}

.nav-link i { font-size: 10px; transition: transform .3s; }

.nav-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 100%;
    height: 3px;
    border-radius: 3px;
    background: var(--gold);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .4s var(--ease);
}

.nav-link:hover,
.nav-link.active { color: var(--gold-dark); }

.nav-link:hover::after,
.nav-link.active::after { transform: scaleX(1); }

.has-dropdown:hover .nav-link i { transform: rotate(180deg); }

.dropdown {
    position: absolute;
    top: calc(100% + 18px);
    left: -20px;
    min-width: 230px;
    padding: 12px;
    background: var(--white);
    border-radius: 0;
    box-shadow: 0 18px 40px rgba(15, 20, 40, .14);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all .35s var(--ease);
}

.dropdown::before {
    content: "";
    position: absolute;
    top: -18px;
    left: 0;
    right: 0;
    height: 18px;
}

.has-dropdown:hover .dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 0;
    font-size: 14.5px;
    color: var(--text);
    transition: background .3s, color .3s, padding .3s;
}

.dropdown a i { width: 18px; color: var(--gold); }
.dropdown a:hover { background: var(--cream); color: var(--gold-dark); padding-left: 20px; }

.submenu-toggle { display: none; }

.nav-brand { display: none; }

.btn-book { height: 48px; padding: 0 28px; font-size: 15px; gap: 10px; }
.nav-book-mobile { display: none; }

.nav-toggle {
    display: none;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: var(--cream);
    cursor: pointer;
    position: relative;
}

.nav-toggle span {
    position: absolute;
    left: 12px;
    width: 20px;
    height: 2px;
    border-radius: 2px;
    background: var(--navy);
    transition: transform .35s var(--ease), opacity .3s;
}

.nav-toggle span:nth-child(1) { top: 15px; }
.nav-toggle span:nth-child(2) { top: 21px; }
.nav-toggle span:nth-child(3) { top: 27px; }

.nav-open .nav-toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.nav-backdrop {
    position: fixed;
    inset: 0;
    z-index: 98;
    background: rgba(15, 20, 40, .45);
    opacity: 0;
    visibility: hidden;
    transition: opacity .4s;
}

.nav-open .nav-backdrop { opacity: 1; visibility: visible; }

@media (min-width: 1200px) and (max-width: 1360px) {
    .nav-link { font-size: 14px; }
    .nav-list { gap: 15px; }
    .btn-book { padding: 0 20px; }
}

/* ---------- Header search (main.js) ---------- */
.header-actions { display: flex; align-items: center; gap: 14px; }

.search-toggle {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 1.5px solid var(--line);
    border-radius: 50%;
    background: var(--white);
    color: var(--navy);
    font-size: 17px;
    cursor: pointer;
    transition: color .3s, border-color .3s, background .3s;
}

.search-toggle:hover,
.search-open .search-toggle { color: var(--gold-dark); border-color: var(--gold-light); background: var(--cream); }
.search-toggle:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.site-search {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--white);
    border-top: 1px solid var(--line);
    box-shadow: 0 24px 48px rgba(15, 20, 40, .16);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity .3s var(--ease), transform .3s var(--ease), visibility 0s .3s;
}

.search-open .site-search {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity .3s var(--ease), transform .3s var(--ease), visibility 0s;
}

.site-search__form {
    display: flex;
    align-items: center;
    gap: 14px;
    height: 74px;
    border-bottom: 2px solid var(--gold);
}

.site-search__icon { font-size: 19px; color: var(--gold); }

.site-search__form input {
    flex: 1;
    min-width: 0;
    height: 100%;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    font: 500 clamp(16px, 1.5vw, 19px) var(--font-head);
    color: var(--navy);
}

.site-search__form input::placeholder { color: #9a9daa; font-weight: 400; }
.site-search__form input::-webkit-search-cancel-button { display: none; }

.site-search__close {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: var(--cream);
    color: var(--navy);
    font-size: 17px;
    cursor: pointer;
    transition: background .3s, color .3s;
}

.site-search__close:hover { background: var(--gold); color: var(--white); }

.site-search__results {
    max-height: min(62vh, 540px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 18px 0 24px;
}

.ss-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
    gap: 10px 36px;
    align-items: start;
}

.ss-group h3 {
    margin: 0 0 6px;
    padding: 0 10px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
}

.ss-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 9px 10px;
    color: var(--text);
    transition: background .2s;
}

.ss-item:hover,
.ss-item.is-active { background: var(--cream); }
.ss-item:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }

.ss-item__media {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    overflow: hidden;
    border-radius: 10px;
    background: var(--cream);
    color: var(--gold);
    font-size: 17px;
}

.ss-item.is-active .ss-item__media,
.ss-item:hover .ss-item__media { background: var(--white); }

.ss-item__media img { width: 100%; height: 100%; object-fit: cover; }

.ss-item__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }

.ss-item__text strong {
    font-family: var(--font-head);
    font-size: 15px;
    font-weight: 600;
    color: var(--navy);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ss-item__text small {
    font-size: 13px;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ss-item mark { background: none; color: var(--gold-dark); }

.ss-item__go { font-size: 12px; color: var(--gold); opacity: 0; transform: translateX(-6px); transition: opacity .2s, transform .2s; }
.ss-item:hover .ss-item__go,
.ss-item.is-active .ss-item__go { opacity: 1; transform: none; }

.ss-chips { display: flex; flex-wrap: wrap; gap: 10px; padding: 0 10px; }

.ss-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border: 1.5px solid var(--line);
    border-radius: 999px;
    font-size: 14px;
    font-weight: 500;
    color: var(--navy);
    transition: border-color .2s, background .2s, color .2s;
}

.ss-chip i { color: var(--gold); }
.ss-chip:hover,
.ss-chip.is-active { border-color: var(--gold-light); background: var(--cream); color: var(--gold-dark); }

.ss-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 20px;
    margin-top: 18px;
    padding: 16px 10px 0;
    border-top: 1px solid var(--line);
    font-size: 14px;
    color: var(--muted);
}

.ss-foot a { font-weight: 600; color: var(--gold-dark); }
.ss-foot a:hover { text-decoration: underline; }

.ss-empty { padding: 6px 10px 0; color: var(--muted); }
.ss-empty strong { display: block; margin-bottom: 4px; font-family: var(--font-head); font-size: 16px; color: var(--navy); }
.ss-empty a { font-weight: 600; color: var(--gold-dark); }

.search-backdrop {
    position: fixed;
    inset: 0;
    z-index: 99;
    background: rgba(15, 20, 40, .45);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s, visibility 0s .3s;
}

.search-open .search-backdrop { opacity: 1; visibility: visible; transition: opacity .3s, visibility 0s; }

@media (max-width: 1199px) {
    .header-actions { gap: 10px; }
    .search-toggle { width: 44px; height: 44px; border: 0; background: var(--cream); font-size: 16px; }
}

@media (max-width: 575px) {
    .site-search__form { height: 62px; gap: 10px; }
    .site-search__results { max-height: calc(100dvh - var(--header-h) - 80px); padding-top: 12px; }
    .ss-item__go { display: none; }
}

/* ==========================================================================
   Hero (video banner - no overlay, no visible text)
   ========================================================================== */
.hero {
    position: relative;
    overflow: hidden;
    background: var(--navy);
}

/* full 16:9 frame on wide screens, capped so it never runs past the fold */
.hero--video {
    height: min(56.25vw, calc(100svh - var(--header-h) - 42px)); /* 42px = top bar */
    min-height: 420px;
    isolation: isolate;
}

.hero-swiper,
.hero-swiper .swiper-slide { width: 100%; height: 100%; }

.hero-slide { position: relative; overflow: hidden; background: var(--navy); }

.hero-video,
.hero-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.hero-video {
    transform: scale(1.06);
    animation: heroVideoIn 2.4s var(--ease) forwards;
}

@keyframes heroVideoIn {
    to { transform: scale(1); }
}


/* image slides: slow Ken Burns drift while on screen */
.hero-img {
    transform: scale(1.1);
    transition: transform 7s linear;
}

.hero-slide.swiper-slide-active .hero-img { transform: scale(1); }

/* ---------- image slide text ---------- */
/* soft shade low on the left, only behind slides that carry text */
.hero-slide--text::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(0deg, rgba(10, 14, 30, .62) 0%, rgba(10, 14, 30, .2) 42%, rgba(10, 14, 30, 0) 68%),
        linear-gradient(90deg, rgba(10, 14, 30, .28) 0%, rgba(10, 14, 30, 0) 55%);
    pointer-events: none;
}

.hero-cap {
    position: absolute;
    left: 0;
    right: 0;
    bottom: clamp(74px, 7.4vw, 124px); /* clears the dots and sound button */
    z-index: 2;
    color: #fff;
}

.hero-cap__title {
    max-width: 16ch;
    text-wrap: balance; /* no single word left alone on line two */
    font-family: var(--font-head);
    font-size: clamp(30px, 3.6vw, 60px);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -.01em;
    text-shadow: 0 2px 18px rgba(10, 14, 30, .35);
}

/* short gold rule above the heading */
.hero-cap__title::before {
    content: "";
    display: block;
    width: clamp(44px, 4vw, 64px);
    height: 3px;
    margin-bottom: clamp(14px, 1.3vw, 20px);
    border-radius: 2px;
    background: var(--gold-grad);
}

.hero-cap__text {
    max-width: 48ch;
    margin-top: clamp(10px, 1vw, 16px);
    font-size: clamp(15px, 1.25vw, 20px);
    line-height: 1.5;
    color: rgba(255, 255, 255, .9);
    text-shadow: 0 1px 10px rgba(10, 14, 30, .4);
}

/* text rises in once its slide is showing */
.hero-cap__title,
.hero-cap__text {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .6s var(--ease), transform .6s var(--ease);
}

.hero-slide.swiper-slide-active .hero-cap__title,
.hero-slide.swiper-slide-active .hero-cap__text {
    opacity: 1;
    transform: none;
    transition-duration: 1s;
    transition-delay: .45s;
}

.hero-slide.swiper-slide-active .hero-cap__text { transition-delay: .65s; }

/* gold progress line: tracks the video, then each image's time on screen */
.hero-progress {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    height: 3px;
    background: rgba(255, 255, 255, .22);
}

.hero-progress i {
    position: absolute;
    inset: 0;
    background: var(--gold-grad);
    transform: scaleX(0);
    transform-origin: left;
}

/* ---------- slide dots ---------- */
.hero-pagination {
    position: absolute;
    left: 50% !important;
    bottom: clamp(18px, 2.4vw, 36px) !important;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 8px;
    width: auto !important;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(15, 20, 40, .28);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    transform: translateX(-50%);
}

.hero-pagination .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    margin: 0 !important;
    background: rgba(255, 255, 255, .8);
    opacity: 1;
    transition: width .4s var(--ease), background .4s var(--ease);
}

.hero-pagination .swiper-pagination-bullet-active {
    width: 26px;
    border-radius: 6px;
    background: var(--gold-light);
}

/* ---------- mute / unmute ---------- */
.hero-sound {
    position: absolute;
    left: clamp(16px, 3vw, 48px); /* left side: the floating WhatsApp / call buttons own the right */
    bottom: clamp(18px, 3vw, 46px);
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    height: 56px;
    padding: 0 20px 0 6px;
    border: 1px solid rgba(255, 255, 255, .45);
    border-radius: 999px;
    background: rgba(15, 20, 40, .38);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    backdrop-filter: blur(12px) saturate(140%);
    color: #fff;
    cursor: pointer;
    box-shadow: 0 10px 30px rgba(15, 20, 40, .28);
    opacity: 0;
    transform: translateY(14px);
    animation: heroSoundIn .8s 1s var(--ease) forwards;
    transition: background .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}

@keyframes heroSoundIn {
    to { opacity: 1; transform: none; }
}

/* only meaningful on the video slide */
.hero.is-image .hero-sound {
    animation: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(14px);
    transition: opacity .4s var(--ease), transform .4s var(--ease), visibility 0s .4s;
}

.hero-sound:hover {
    background: rgba(15, 20, 40, .55);
    border-color: var(--gold-light);
    box-shadow: 0 14px 36px rgba(15, 20, 40, .36);
}

.hero-sound:focus-visible {
    outline: 2px solid var(--gold-light);
    outline-offset: 4px;
}

.hero-sound__icon {
    position: relative;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--gold-grad);
    font-size: 17px;
    transition: transform .35s var(--ease);
}

.hero-sound:hover .hero-sound__icon { transform: scale(1.06); }

/* soft pulse while muted, inviting a tap */
.hero-sound__icon::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid var(--gold-light);
    animation: heroPulse 2s ease-out infinite;
}

@keyframes heroPulse {
    0%   { transform: scale(1); opacity: .9; }
    100% { transform: scale(1.7); opacity: 0; }
}

.hero-sound__on { display: none; }
.hero-sound[aria-pressed="true"] .hero-sound__on { display: inline; }
.hero-sound[aria-pressed="true"] .hero-sound__off { display: none; }
.hero-sound[aria-pressed="true"] .hero-sound__icon::before { animation: none; opacity: 0; }

/* equaliser: flat when muted, dancing when the sound is on */
.hero-sound__bars {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 18px;
}

.hero-sound__bars i {
    width: 3px;
    height: 4px;
    border-radius: 2px;
    background: #fff;
    opacity: .75;
    transition: height .3s var(--ease);
}

.hero-sound[aria-pressed="true"] .hero-sound__bars i {
    opacity: 1;
    animation: heroEq 1s ease-in-out infinite;
}

.hero-sound[aria-pressed="true"] .hero-sound__bars i:nth-child(2) { animation-delay: -.4s; animation-duration: .8s; }
.hero-sound[aria-pressed="true"] .hero-sound__bars i:nth-child(3) { animation-delay: -.2s; animation-duration: 1.1s; }
.hero-sound[aria-pressed="true"] .hero-sound__bars i:nth-child(4) { animation-delay: -.6s; animation-duration: .9s; }

@keyframes heroEq {
    0%, 100% { height: 4px; }
    50%      { height: 18px; }
}

/* ==========================================================================
   Service strip
   ========================================================================== */
.service-strip { padding: clamp(28px, 2.6vw, 40px) 0 clamp(20px, 2vw, 30px); }

.strip-list { display: grid; grid-template-columns: repeat(5, 1fr); }

.strip-list > li { position: relative; }

.strip-list > li + li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8%;
    height: 84%;
    width: 1px;
    background: var(--line);
}

.strip-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    text-align: center;
}

.strip-icon {
    width: clamp(46px, 4vw, 60px);
    height: clamp(38px, 3.3vw, 50px);
    color: var(--gold);
    transition: transform .5s var(--ease);
}

.strip-icon svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.strip-icon svg .dots { stroke-width: 3.4; }

.strip-label {
    font-size: clamp(14px, 1.3vw, 19px);
    font-weight: 500;
    color: var(--navy);
    transition: color .3s;
}

.strip-item:hover .strip-icon { animation: floatIcon 1.6s ease-in-out infinite; }
.strip-item:hover .strip-label { color: var(--gold-dark); }

@keyframes floatIcon {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-7px); }
}

/* ==========================================================================
   Highlights band
   ========================================================================== */
.highlights {
    padding: clamp(22px, 2.2vw, 34px) 0;
    background: var(--cream);
}

.hl-list { display: grid; grid-template-columns: repeat(7, 1fr); }

.hl-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 4px 10px;
    text-align: center;
}

.hl-item + .hl-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 22%;
    height: 56%;
    width: 1px;
    background: rgba(180, 126, 18, .45);
}

.hl-icon {
    display: grid;
    place-items: center;
    width: clamp(48px, 3.9vw, 58px);
    aspect-ratio: 1;
    border-radius: 50%;
    border: 2px solid var(--gold-light);
    box-shadow: inset 0 0 0 3px var(--white);
    background: var(--gold-grad);
    color: var(--white);
    font-size: clamp(18px, 1.5vw, 23px);
    transition: transform .5s var(--ease);
}

.hl-label {
    font-size: clamp(12px, .95vw, 14px);
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--navy);
}

.hl-label strong {
    display: block;
    font-family: var(--font-head);
    font-size: clamp(18px, 1.5vw, 22px);
    font-weight: 600;
    line-height: 1.1;
}

.hl-item:hover .hl-icon { animation: floatIcon 1.6s ease-in-out infinite; }

/* ==========================================================================
   Destinations (home)
   ========================================================================== */
.destinations {
    padding-top: clamp(50px, 5vw, 80px);
    background: linear-gradient(180deg, var(--white) 0%, var(--cream) 100%);
    overflow: hidden;
}

.dest-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(24px, 4vw, 60px);
    margin-bottom: clamp(30px, 3.4vw, 50px);
}

.dest-script {
    font-family: "Great Vibes", cursive;
    font-size: clamp(40px, 4.6vw, 72px);
    line-height: 1.05;
    color: #3d5a2a;
}

.dest-script span { display: inline-block; padding-left: .7em; }

.dest-ribbon {
    display: inline-block;
    margin-top: clamp(16px, 1.6vw, 24px);
    padding: clamp(12px, 1.1vw, 16px) clamp(40px, 5vw, 80px) clamp(12px, 1.1vw, 16px) clamp(22px, 3vw, 54px);
    background: linear-gradient(90deg, rgba(180, 126, 18, .85) 0%, rgba(212, 165, 72, .55) 55%, rgba(212, 165, 72, 0) 100%);
    font-size: clamp(13px, 1.3vw, 20px);
    font-weight: 500;
    line-height: 1.55;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--navy);
}

.dest-quote {
    flex-shrink: 0;
    margin: 0;
    text-align: center;
}

.dest-quote p {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-style: italic;
    font-weight: 500;
    font-size: clamp(28px, 2.9vw, 46px);
    line-height: 1.2;
    color: var(--navy);
}

.dest-quote::after {
    content: "";
    display: block;
    width: 80px;
    height: 4px;
    margin: clamp(18px, 1.8vw, 26px) auto 0;
    border-radius: 3px;
    background: var(--gold-grad);
}

.dest-row {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 6px;
}

.dest-card {
    position: relative;
    display: block;
    aspect-ratio: 5 / 6;
    overflow: hidden;
    background: var(--navy);
}

.dest-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .9s var(--ease);
}

.dest-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(15, 20, 40, 0) 45%, rgba(15, 20, 40, .55) 72%, rgba(15, 20, 40, .92) 100%);
}

.dest-card__body {
    position: absolute;
    inset: auto 0 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 0 12px clamp(16px, 1.6vw, 24px);
    text-align: center;
    color: var(--white);
    font-size: clamp(12px, 1vw, 15px);
    line-height: 1.3;
}

.dest-card__body strong {
    font-family: var(--font-head);
    font-size: clamp(14px, 1.25vw, 19px);
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    transition: color .3s;
}

.dest-card:hover img { transform: scale(1.08); }
.dest-card:hover .dest-card__body strong { color: var(--gold-light); }

@media (max-width: 991px) {
    .dest-head { flex-direction: column; align-items: flex-start; }
    .dest-quote { align-self: center; }
    .dest-row { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 575px) {
    .dest-script span { padding-left: .4em; }
    .dest-ribbon { letter-spacing: .12em; }
    .dest-row { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1199px) {
    .hl-list { display: flex; flex-wrap: wrap; justify-content: center; row-gap: 24px; }
    .hl-item { flex: 0 0 25%; }
    .hl-item:nth-child(5)::before { display: none; }
}

@media (max-width: 575px) {
    .hl-item { flex-basis: 50%; }
    .hl-item + .hl-item::before { display: none; }
    .hl-item:nth-child(even)::before { display: block; }
}

/* ==========================================================================
   Section helpers
   ========================================================================== */
.section-title {
    font-size: clamp(28px, 3.05vw, 50px);
    line-height: 1.18;
    font-weight: 400;
    color: var(--navy);
}

.eyebrow {
    display: block;
    margin-bottom: 14px;
    font-size: clamp(11px, .95vw, 14px);
    font-weight: 700;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--gold);
}

.gold-rule {
    display: block;
    width: 62px;
    height: 3px;
    border-radius: 3px;
    margin: clamp(18px, 1.8vw, 26px) 0 clamp(24px, 2.4vw, 36px);
    background: var(--gold);
}

/* ==========================================================================
   About
   ========================================================================== */
.about {
    position: relative;
    padding: clamp(26px, 2.6vw, 40px) 0 clamp(50px, 5vw, 80px);
    overflow: hidden;
}

.about-watermark {
    position: absolute;
    right: -6%;
    top: 22%;
    width: clamp(220px, 23vw, 380px);
    opacity: .13;
    pointer-events: none;
}

.about-grid {
    display: grid;
    grid-template-columns: 1.04fr 1fr;
    align-items: center;
    gap: clamp(30px, 5vw, 80px);
    position: relative;
}

.about-media {
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: 0 14px 34px rgba(15, 20, 40, .14);
    aspect-ratio: 448 / 234;
}

.about-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.2s var(--ease);
}

.about-media:hover img { transform: scale(1.06); }

.about-text .section-title { max-width: 560px; }

/* ==========================================================================
   Our Services
   ========================================================================== */
.services { padding: clamp(36px, 3.6vw, 56px) 0 clamp(54px, 5.4vw, 86px); }

.section-head {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(18px, 3vw, 44px);
    margin-bottom: clamp(26px, 3vw, 44px);
}

.head-line {
    width: clamp(50px, 7.5vw, 110px);
    height: 1.5px;
}

.head-line--left { background: linear-gradient(90deg, transparent, #7b7f8c); }
.head-line--right { background: linear-gradient(90deg, var(--gold), transparent); }

/* card swipers: let hover elevation / shadow breathe */
.card-swiper {
    padding: 22px 30px 44px;
    margin: -22px -30px -44px;
}

/* fallback layout if Swiper fails to load */
.card-swiper:not(.swiper-initialized) .swiper-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 14px;
}

/* ==========================================================================
   Service cards (home bento)
   ========================================================================== */
.services-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px 40px;
    margin-bottom: clamp(24px, 2.6vw, 40px);
}

.services-head .section-title { color: #121318; }

.services-head__side {
    display: flex;
    align-items: center;
    gap: 18px 28px;
}

.services-head__side p {
    max-width: 340px;
    font-size: clamp(15px, 1.1vw, 17px);
    line-height: 1.65;
    color: #3a3c45;
}

.services-head__side .btn { flex: 0 0 auto; }

/* one tall feature card + four in a 2x2 */
.svc-bento {
    display: grid;
    grid-template-columns: 1.25fr 1fr 1fr;
    grid-template-rows: repeat(2, clamp(230px, 20vw, 300px));
    gap: clamp(14px, 1.4vw, 22px);
}

.svc-bento__item--lg { grid-row: span 2; }

.s-card {
    position: relative;
    display: block;
    height: 100%;
    border-radius: 22px;
    overflow: hidden;
    isolation: isolate;
    color: var(--white);
    box-shadow: 0 16px 30px -16px rgba(15, 20, 40, .45);
    transition: transform .6s var(--ease), box-shadow .6s var(--ease);
}

.s-card:hover { transform: translateY(-6px); box-shadow: 0 28px 44px -20px rgba(15, 20, 40, .55); }
.s-card:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

.s-card__img {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.4s var(--ease);
}

.svc-bento__item--lg .s-card__img { object-position: 70% center; }
.s-card:hover .s-card__img { transform: scale(1.08); }

.s-card__shade,
.s-card__shade::after {
    position: absolute;
    inset: 0;
    z-index: -1;
}

.s-card__shade { background: linear-gradient(180deg, rgba(10, 12, 24, .28) 0%, rgba(10, 12, 24, 0) 30%, rgba(10, 12, 24, .1) 50%, rgba(10, 12, 24, .88) 100%); }

/* warm gold wash rises on hover */
.s-card__shade::after {
    content: "";
    background: linear-gradient(180deg, rgba(154, 107, 14, 0) 30%, rgba(154, 107, 14, .4) 68%, rgba(15, 20, 40, .6) 100%);
    opacity: 0;
    transition: opacity .6s var(--ease);
}

.s-card:hover .s-card__shade::after { opacity: 1; }

.s-card__num {
    position: absolute;
    top: 16px;
    right: 20px;
    font-family: var(--font-head);
    font-size: clamp(34px, 2.8vw, 46px);
    font-weight: 700;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1.2px rgba(255, 255, 255, .75);
    transition: color .5s var(--ease), -webkit-text-stroke-color .5s;
}

.s-card:hover .s-card__num { color: rgba(246, 223, 174, .9); -webkit-text-stroke-color: transparent; }

.s-card__body {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: clamp(18px, 1.8vw, 28px);
}

.s-card__icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    margin-bottom: 14px;
    border: 1px solid rgba(255, 255, 255, .4);
    border-radius: 50%;
    font-size: 18px;
    color: var(--gold-light);
    background: rgba(255, 255, 255, .14);
    backdrop-filter: blur(8px);
    transition: background .45s, color .45s, border-color .45s, transform .55s var(--ease);
}

.s-card:hover .s-card__icon {
    color: var(--white);
    border-color: transparent;
    background: var(--gold-grad);
    transform: rotate(-10deg) scale(1.06);
}

.s-card__title {
    font-size: clamp(19px, 1.6vw, 24px);
    font-weight: 600;
    line-height: 1.2;
    color: var(--white);
    text-shadow: 0 2px 12px rgba(0, 0, 0, .3);
}

.svc-bento__item--lg .s-card__title { font-size: clamp(26px, 2.4vw, 38px); font-weight: 500; }

.s-card__text {
    max-width: 380px;
    font-size: 14.5px;
    line-height: 1.55;
    color: rgba(255, 255, 255, .85);
}

.svc-bento__item--lg .s-card__text { margin-top: 10px; font-size: clamp(15px, 1.15vw, 17px); }

/* small cards: description + link slide in on hover */
.svc-bento__item:not(.svc-bento__item--lg) .s-card__text,
.s-card__more {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height .5s var(--ease), margin .5s var(--ease), opacity .45s var(--ease);
}

.svc-bento__item:not(.svc-bento__item--lg) .s-card:hover .s-card__text { max-height: 70px; margin-top: 6px; opacity: 1; }

.s-card__more {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding-right: 8px; /* room for the arrow nudge */
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #f6dfae;
}

.s-card__more i { transition: transform .35s var(--ease); }
.s-card:hover .s-card__more { max-height: 30px; margin-top: 14px; opacity: 1; }
.s-card:hover .s-card__more i { transform: translateX(5px); }

.svc-bento__item--lg .s-card__more { max-height: 30px; margin-top: 18px; opacity: 1; }

/* touch screens have no hover: show everything */
@media (hover: none) {
    .svc-bento__item:not(.svc-bento__item--lg) .s-card__text { max-height: 70px; margin-top: 6px; opacity: 1; }
    .s-card__more { max-height: 30px; margin-top: 12px; opacity: 1; }
}

@media (max-width: 1199px) {
    .services-head { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 991px) {
    .svc-bento {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: none;
        grid-auto-rows: 260px;
    }

    .svc-bento__item--lg { grid-column: span 2; grid-row: auto; }
}

/* phones: swipeable row that bleeds to the screen edge */
@media (max-width: 575px) {
    .services-head__side { flex-direction: column; align-items: flex-start; }

    .svc-bento {
        display: flex;
        gap: 12px;
        margin-inline: -16px;
        padding: 6px 16px 20px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: 16px;
        scrollbar-width: none;
    }

    .svc-bento::-webkit-scrollbar { display: none; }

    .svc-bento__item { flex: 0 0 82%; height: 380px; scroll-snap-align: start; }
}

@keyframes floatBadge {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

@keyframes arrowNudge {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(6px); }
}

/* ==========================================================================
   Featured hotels
   ========================================================================== */
.featured {
    position: relative;
    padding: clamp(50px, 5vw, 80px) 0 calc(clamp(44px, 4.4vw, 70px) + var(--radius-lg));
    background: linear-gradient(180deg, #f8f1eb 0%, var(--cream) 100%);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    box-shadow: 0 -10px 30px rgba(15, 20, 40, .03);
}

.featured-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px 40px;
    margin-bottom: clamp(22px, 2.4vw, 36px);
}

.featured-intro { max-width: 640px; }
.featured-intro .section-title { color: #121318; }

.featured-intro p {
    margin-top: clamp(10px, 1vw, 16px);
    font-size: clamp(15px, 1.15vw, 17px);
    line-height: 1.75;
    color: #3a3c45;
}

.featured-head .btn { flex: 0 0 auto; }

/* room above/below so the hover lift and shadow aren't clipped */
.featured-swiper { padding: 12px 0 30px; margin: -12px 0 -12px; }

/* fallback layout if Swiper fails to load */
.featured-swiper:not(.swiper-initialized) .swiper-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
}

/* ---------- Hotel card ---------- */
.h-card {
    position: relative;
    display: block;
    aspect-ratio: 4 / 5;
    border-radius: 22px;
    overflow: hidden;
    isolation: isolate;
    color: var(--white);
    box-shadow: 0 16px 30px -14px rgba(15, 20, 40, .45);
    transition: transform .6s var(--ease), box-shadow .6s var(--ease);
}

.h-card:hover { transform: translateY(-8px); box-shadow: 0 28px 40px -18px rgba(15, 20, 40, .55); }
.h-card:focus-visible { outline: 3px solid var(--gold); outline-offset: -3px; }

.h-card__media { position: absolute; inset: 0; z-index: -2; }

.h-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.02);
    transition: transform 1.4s var(--ease);
}

.h-card:hover .h-card__media img { transform: scale(1.1); }

.h-card__shade,
.h-card__shade::after {
    position: absolute;
    inset: 0;
    z-index: -1;
}

.h-card__shade {
    background: linear-gradient(180deg, rgba(10, 12, 24, .38) 0%, rgba(10, 12, 24, 0) 26%, rgba(10, 12, 24, 0) 42%, rgba(10, 12, 24, .9) 100%);
}

/* warm gold wash rises on hover */
.h-card__shade::after {
    content: "";
    background: linear-gradient(180deg, rgba(154, 107, 14, 0) 35%, rgba(154, 107, 14, .38) 70%, rgba(15, 20, 40, .55) 100%);
    opacity: 0;
    transition: opacity .6s var(--ease);
}

.h-card:hover .h-card__shade::after { opacity: 1; }

.h-card__top {
    position: absolute;
    top: 16px;
    left: 16px;
    right: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.h-card__dest {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 30px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    background: rgba(255, 255, 255, .16);
    backdrop-filter: blur(8px);
}

.h-card__dest i { color: var(--gold-light); }

.h-card__go {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    font-size: 15px;
    color: var(--navy);
    background: var(--white);
    transform: rotate(-45deg);
    transition: transform .5s var(--ease), background .4s, color .4s;
}

.h-card:hover .h-card__go { color: var(--white); background: var(--gold-grad); transform: rotate(0); }

.h-card__body {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: clamp(18px, 1.6vw, 24px);
}

.h-card__stars {
    display: flex;
    align-items: center;
    gap: 3px;
    margin-bottom: 8px;
    font-size: 12px;
    color: var(--gold-light);
}

.h-card__stars span:last-child {
    margin-left: 6px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .85);
}

.h-card__stars span:only-child { margin-left: 0; }

.h-card__title {
    font-size: clamp(19px, 1.5vw, 23px);
    font-weight: 600;
    line-height: 1.25;
    color: var(--white);
    text-shadow: 0 2px 12px rgba(0, 0, 0, .3);
    transition: transform .55s var(--ease);
}

.h-card__area {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    font-size: 14px;
    color: rgba(255, 255, 255, .85);
}

.h-card__area i { font-size: 12px; color: var(--gold-light); }

/* "View Property" slides in under the details */
.h-card__more {
    display: flex;
    align-items: center;
    gap: 12px;
    max-height: 0;
    margin-top: 0;
    overflow: hidden;
    opacity: 0;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #f6dfae;
    transition: max-height .5s var(--ease), margin .5s var(--ease), opacity .45s var(--ease);
}

.h-card__more::before {
    content: "";
    width: 0;
    height: 1.5px;
    background: var(--gold-light);
    transition: width .6s var(--ease) .1s;
}

.h-card:hover .h-card__more { max-height: 30px; margin-top: 14px; opacity: 1; }
.h-card:hover .h-card__more::before { width: 34px; }

/* touch screens have no hover: keep the call to action visible */
@media (hover: none) {
    .h-card__more { max-height: 30px; margin-top: 12px; opacity: 1; }
    .h-card__more::before { width: 34px; }
}

/* ---------- Progress + arrows ---------- */
.featured-foot {
    display: flex;
    align-items: center;
    gap: clamp(18px, 2.4vw, 36px);
    margin-top: clamp(8px, 1vw, 14px);
}

.featured .featured-progress {
    position: relative;
    flex: 1;
    width: auto;
    height: 3px;
    border-radius: 3px;
    background: rgba(180, 126, 18, .16);
    overflow: hidden;
}

.featured-progress .swiper-pagination-progressbar-fill { background: var(--gold-grad); border-radius: 3px; }

.featured-nav { display: flex; gap: 10px; }

.featured-nav button {
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    border: 1.5px solid var(--gold);
    border-radius: 50%;
    font-size: 15px;
    color: var(--gold-dark);
    background: transparent;
    cursor: pointer;
    transition: background .35s var(--ease), color .35s, border-color .35s;
}

.featured-nav button i { transition: transform .35s var(--ease); }
.featured-nav button:hover { color: var(--white); border-color: transparent; background: var(--gold-grad); }
.featured-prev:hover i { transform: translateX(-3px); }
.featured-next:hover i { transform: translateX(3px); }
.featured-nav button:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

@media (max-width: 767px) {
    .featured-head { flex-direction: column; align-items: flex-start; }
    .featured-nav button { width: 44px; height: 44px; font-size: 14px; }
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
    background: var(--navy);
    color: rgba(255, 255, 255, .72);
    font-size: 15px;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr 1.3fr;   /* brand | quick links | services | explore | contact */
    gap: clamp(28px, 3.4vw, 52px);
    padding: clamp(50px, 5vw, 76px) 0 clamp(36px, 4vw, 56px);
}

.footer-brand img {
    width: 140px;
    height: auto;
    margin: 0 0 20px;
}

.footer-about p { max-width: 320px; }

.footer-col h4 {
    position: relative;
    margin-bottom: 22px;
    padding-bottom: 12px;
    font-size: 18px;
    font-weight: 500;
    color: var(--white);
}

.footer-col h4::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 36px;
    height: 2px;
    background: var(--gold);
}

.footer-col ul li { margin-bottom: 10px; }

.footer-col ul a {
    position: relative;
    transition: color .3s, padding .35s var(--ease);
}

/* gold arrow before each footer menu link */
.footer-col:not(.footer-contact) ul a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.footer-col:not(.footer-contact) ul a::before {
    content: "\f105";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 13px;
    color: var(--gold-light);
    transition: transform .35s var(--ease);
}

.footer-col ul a:hover { color: var(--gold-light); }
.footer-col:not(.footer-contact) ul a:hover { padding-left: 6px; }
.footer-col:not(.footer-contact) ul a:hover::before { transform: translateX(3px); }

.footer-contact li {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    margin-bottom: 16px !important;
}

.footer-contact li > i {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--gold-light);
    background: rgba(212, 165, 72, .12);
    font-size: 14px;
}

.footer-social { display: flex; gap: 10px; margin-top: 22px; }

.footer-social a {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .2);
    color: var(--white);
    transition: all .35s var(--ease);
}

.footer-social a:hover {
    background: var(--gold);
    border-color: var(--gold);
    transform: translateY(-4px);
}

.footer-bottom { border-top: 1px solid rgba(255, 255, 255, .1); }

.footer-bottom .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px 16px;
    padding: 15px 0;
    font-size: 13.5px;
    line-height: 1.5;
}

.footer-bottom-right {
    display: flex;
    align-items: center;
    gap: 22px;
}

.footer-credit a {
    color: var(--gold-light);
    font-weight: 600;
    background: linear-gradient(currentColor, currentColor) left bottom / 0 1px no-repeat;
    transition: background-size .4s var(--ease), color .3s;
}

.footer-credit a:hover { color: var(--white); background-size: 100% 1px; }

.to-top {
    position: fixed;
    right: calc(clamp(16px, 2vw, 28px) + 4px);  /* centred under the 54px floating buttons */
    bottom: clamp(16px, 2vw, 28px);
    z-index: 90;
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--white);
    background: var(--gold-grad);
    box-shadow: 0 10px 24px rgba(180, 126, 18, .35);
    opacity: 0;
    visibility: hidden;
    transform: translateY(16px);
    transition: opacity .4s var(--ease), visibility .4s, transform .4s var(--ease);
}

.to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { transform: translateY(-4px); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1199px) {
    .header-book { display: none; }

    /* backdrop-filter would make the header the containing block of the fixed drawer */
    .site-header { backdrop-filter: none; }

    .nav-toggle { display: block; z-index: 101; }

    .main-nav {
        position: fixed;
        top: 0;
        right: 0;
        z-index: 100;
        width: min(340px, 86vw);
        height: 100dvh;
        flex-direction: column;
        align-items: stretch;
        padding: 18px 26px 30px;
        background: var(--white);
        box-shadow: -10px 0 40px rgba(15, 20, 40, .15);
        overflow-y: auto;
        transform: translateX(100%);
        visibility: hidden; /* off-canvas: keep it out of page width and tab order */
        transition: transform .5s var(--ease), visibility 0s .5s;
    }

    .nav-open .main-nav { transform: translateX(0); visibility: visible; transition: transform .5s var(--ease), visibility 0s; }

    /* logo at the top of the drawer; the close (X) button sits to its right */
    .nav-brand {
        display: block;
        align-self: flex-start;
        margin-bottom: 14px;
    }

    .nav-brand img { height: 78px; width: auto; }

    .nav-list { flex-direction: column; align-items: stretch; gap: 0; }

    .nav-list > li { border-bottom: 1px solid var(--line); }

    .nav-link { padding: 14px 0; font-size: 16px; width: 100%; }
    .nav-link::after { bottom: 8px; width: 28px; }
    .has-dropdown > .nav-link i { display: none; }

    .submenu-toggle {
        display: grid;
        place-items: center;
        position: absolute;
        right: 0;
        top: 6px;
        width: 38px;
        height: 38px;
        border: 0;
        border-radius: 50%;
        background: var(--cream);
        color: var(--gold-dark);
        cursor: pointer;
        transition: transform .3s;
    }

    .has-dropdown.open .submenu-toggle { transform: rotate(180deg); }

    .dropdown,
    .has-dropdown:hover .dropdown {
        position: static;
        min-width: 0;
        padding: 0 0 0 6px;
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        transform: none;
        max-height: 0;
        overflow: hidden;
        transition: max-height .45s var(--ease), padding .3s;
    }

    .has-dropdown.open .dropdown { max-height: 320px; padding-bottom: 10px; }

    .nav-book-mobile { display: inline-flex; margin-top: 26px; }

}

@media (max-width: 991px) {
    .hero--video { min-height: 0; height: auto; aspect-ratio: 16 / 9; }

    .strip-list { grid-template-columns: repeat(3, 1fr); row-gap: 22px; }
    .strip-list > li:nth-child(4)::before { display: none; }

    .about-grid { grid-template-columns: 1fr; }
    .about-media { width: min(100%, 640px); margin-inline: auto; }
    .about-text { text-align: center; }
    .about-text .section-title { margin-inline: auto; }
    .about-text .gold-rule { margin-inline: auto; }

    /* brand full width, then the three link lists side by side, contact full width */
    .footer-grid { grid-template-columns: repeat(3, 1fr); }
    .footer-about, .footer-contact { grid-column: 1 / -1; }
    .footer-bottom .container { flex-direction: column; justify-content: center; text-align: center; }
}

/* ---------- Home hero on phones: tall, full-screen reel ---------- */
@media (max-width: 767px) {
    /* near full screen below the header, like a reel */
    .hero--video {
        height: clamp(480px, calc(100svh - var(--header-h) - 38px), 780px);
        min-height: 0;
        aspect-ratio: auto;
    }

    /* image slides crop to the tall frame */
    .hero-img { object-position: center; }

    /* video slide: the vertical reel fills the frame; the 16:9 poster is
       framed on the same spot as the reel crop so nothing jumps when it starts */
    .hero-slide--video .hero-video { object-position: 66% center; }

    /* captions: room for heading + line above the dots */
    .hero-cap { bottom: 62px; }
    .hero-cap__title { max-width: 14ch; font-size: clamp(28px, 8vw, 38px); line-height: 1.12; }
    .hero-cap__title::before { width: 40px; height: 3px; margin-bottom: 12px; }
    .hero-cap__text { max-width: 30ch; margin-top: 10px; font-size: 15px; }

    .hero-slide--text::after {
        background: linear-gradient(0deg, rgba(10, 14, 30, .78) 0%, rgba(10, 14, 30, .35) 38%, rgba(10, 14, 30, 0) 62%);
    }
}

@media (max-width: 575px) {
    :root { --radius-lg: 30px; }

    .site-header.is-scrolled { height: 70px; }
    .site-header.is-scrolled .brand img { height: 54px; }

    /* full 16:9 frame on phones too: the video's own title sits at the left edge */
    .hero-sound { height: 42px; gap: 8px; padding: 0 12px 0 4px; left: 12px; bottom: 12px; }
    .hero-sound__icon { width: 34px; height: 34px; font-size: 13px; }
    .hero-sound__bars { height: 14px; }
    .hero-pagination { padding: 6px 9px; gap: 6px; bottom: 14px !important; }
    .hero-pagination .swiper-pagination-bullet { width: 6px; height: 6px; }
    .hero-pagination .swiper-pagination-bullet-active { width: 18px; }
    @keyframes heroEq { 0%, 100% { height: 4px; } 50% { height: 14px; } }

    .strip-list { grid-template-columns: repeat(2, 1fr); }
    .strip-list > li::before { display: none; }
    .strip-list > li:nth-child(even)::before { display: block; }
    .strip-list > li:last-child { grid-column: 1 / -1; }
    .strip-list > li:last-child::before { display: none; }

    .section-head .head-line { width: 36px; }

    .card-swiper { padding: 18px 16px 36px; margin: -18px -16px -36px; }

    /* links + services side by side, explore below, brand and contact full width */
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px 20px; }
    .footer-about, .footer-contact { grid-column: 1 / -1; }
    .footer-bottom .container { padding: 12px 0; font-size: 13px; }

    /* dots would dangle at line starts when the links wrap */
    .footer-bottom .footer-legal { gap: 4px 18px; }
    .footer-bottom .footer-legal li + li::before { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* ==========================================================================
   About page
   ========================================================================== */
.eyebrow--dark {
    color: #24262f;
    font-weight: 600;
    letter-spacing: .34em;
}

/* shared thin-line icon */
.line-icon { display: inline-block; color: var(--gold); }

.line-icon svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ---------- Page banner ---------- */
.page-hero {
    position: relative;
    height: clamp(300px, 27.2vw, 540px);
    overflow: hidden;
    background: #f1e2d6;
}

.page-hero__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: right center;
    transform: scale(1.06);
    animation: bannerZoom 2.4s var(--ease) forwards;
}

@keyframes bannerZoom { to { transform: scale(1); } }

/* light wash on the left so the heading reads over any photo */
.page-hero--photo::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg, rgba(253, 244, 238, .92) 0%, rgba(253, 244, 238, .72) 34%, rgba(253, 244, 238, 0) 66%);
}

.page-hero__content {
    z-index: 2;
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    padding-bottom: 1%;
}

.page-hero__eyebrow { margin-bottom: clamp(10px, 1vw, 16px); }

.page-hero__title {
    font-size: clamp(30px, 2.95vw, 54px);
    font-weight: 400;
    line-height: 1.2;
    color: #121318;
}

.page-hero__title .line { display: block; overflow: hidden; }
.page-hero__title .line > span { display: inline-block; }

.page-hero__rule { width: clamp(76px, 7.4vw, 120px); margin: clamp(12px, 1.2vw, 18px) 0 0; }

/* ---------- Who we are ---------- */
.who { padding: clamp(40px, 4.4vw, 70px) 0 clamp(34px, 3.6vw, 54px); }

.who-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: clamp(30px, 4vw, 64px);
}

.who-text .section-title { color: #121318; }

.who-text p {
    max-width: 590px;
    margin: clamp(16px, 1.7vw, 26px) 0 clamp(20px, 2vw, 30px);
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.75;
    color: #3a3c45;
}

.who-media {
    border-radius: var(--radius);
    overflow: hidden;
    aspect-ratio: 446 / 256;
    box-shadow: 0 16px 36px rgba(15, 20, 40, .14);
}

.who-media img,
.purpose-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.2s var(--ease);
}

.who-media:hover img,
.purpose-media:hover img { transform: scale(1.06); }

/* ---------- Stats ---------- */
.stats-band {
    display: grid;
    grid-template-columns: repeat(var(--stat-cols, 4), 1fr);
    padding: clamp(24px, 2.5vw, 36px) clamp(10px, 2vw, 30px);
    border-radius: 26px;
    background: #f8f4ef;
    box-shadow: 0 8px 26px rgba(120, 90, 40, .06);
}

.stat {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 4px 10px;
}

.stat + .stat::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 1px;
    background: #e3ddd4;
}

.stat-icon {
    width: clamp(40px, 3.8vw, 58px);
    height: clamp(36px, 3.4vw, 52px);
    margin-bottom: clamp(8px, .9vw, 14px);
    transition: transform .5s var(--ease);
}

.stat:hover .stat-icon { animation: floatIcon 1.6s ease-in-out infinite; }

.stat-num {
    font-family: var(--font-head);
    font-size: clamp(24px, 2.25vw, 36px);
    font-weight: 700;
    line-height: 1.1;
    color: #0b0b0e;
}

.stat-label {
    margin-top: 4px;
    font-size: clamp(14px, 1.3vw, 20px);
    color: #1d1f27;
}

/* ---------- Why choose ---------- */
.why { padding: clamp(46px, 4.8vw, 74px) 0 clamp(40px, 4.4vw, 66px); }

.why-head { text-align: center; margin-bottom: clamp(26px, 3vw, 44px); }
.why-head .eyebrow { margin-bottom: 6px; }
.why-head .section-title { color: #121318; }

.why-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: clamp(14px, 3vw, 46px);
}

.why-card {
    position: relative;
    height: 100%;
    min-height: clamp(130px, 10.2vw, 160px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(10px, 1vw, 14px);
    padding: 22px 14px;
    text-align: center;
    border-radius: 14px;
    background: #faf6f1;
    overflow: hidden;
    transition: transform .5s var(--ease), box-shadow .5s var(--ease), background .5s var(--ease);
}

/* gold underline that grows on hover */
.why-card::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 0;
    height: 3px;
    background: var(--gold-grad);
    transform: translateX(-50%);
    transition: width .5s var(--ease);
}

.why-card h3 {
    font-family: var(--font-body);
    font-size: clamp(14px, 1.3vw, 19px);
    font-weight: 500;
    line-height: 1.4;
    color: #1d1f27;
}

.why-icon {
    width: clamp(38px, 3.4vw, 52px);
    height: clamp(34px, 3vw, 46px);
    transition: transform .6s var(--ease);
}

.why-card:hover {
    background: var(--white);
    transform: translateY(-8px);
    box-shadow: 0 18px 36px rgba(120, 90, 40, .14);
}

.why-card:hover::after { width: 60%; }
.why-card:hover .why-icon { animation: floatIcon 1.6s ease-in-out infinite; }
.why-card:hover .why-icon--spin { animation: none; transform: rotate(90deg); }

/* ---------- Vision / Mission ---------- */
.purpose { padding: clamp(10px, 1.6vw, 26px) 0 clamp(36px, 3.6vw, 54px); }

.purpose-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: clamp(30px, 3.6vw, 56px);
}

.purpose-media {
    border-radius: var(--radius);
    overflow: hidden;
    aspect-ratio: 445 / 215;
    box-shadow: 0 16px 36px rgba(15, 20, 40, .14);
}

.purpose-text .eyebrow { margin-bottom: clamp(14px, 1.4vw, 22px); }

.purpose-item {
    display: flex;
    gap: clamp(14px, 1.6vw, 24px);
    align-items: flex-start;
}

.purpose-item + .purpose-item {
    margin-top: clamp(18px, 1.8vw, 26px);
    padding-top: clamp(18px, 1.8vw, 26px);
    border-top: 1px solid #e6e1d8;
}

.purpose-icon {
    flex: 0 0 auto;
    width: clamp(46px, 4.2vw, 64px);
    height: clamp(46px, 4.2vw, 64px);
    padding: clamp(7px, .6vw, 10px);
    border-radius: 50%;
    background: #fbf6ee;
    box-shadow: 0 4px 14px rgba(120, 90, 40, .08);
    transition: transform .5s var(--ease), background .4s, color .4s;
}

.purpose-item:hover .purpose-icon {
    color: var(--white);
    background: var(--gold-grad);
    transform: rotate(-8deg) scale(1.06);
}

.purpose-item h3 {
    font-family: var(--font-head);
    font-size: clamp(20px, 1.85vw, 28px);
    font-weight: 700;
    color: #0b0b0e;
    margin-bottom: 4px;
}

.purpose-item p {
    font-size: clamp(14px, 1.2vw, 17px);
    line-height: 1.7;
    color: #3a3c45;
}

/* ---------- CTA box ---------- */
.cta-box-wrap { padding: clamp(14px, 1.6vw, 24px) 0 clamp(50px, 5vw, 80px); }

.cta-box {
    position: relative;
    min-height: clamp(190px, 14.6vw, 250px);
    display: flex;
    align-items: center;
    border-radius: 26px;
    overflow: hidden;
    background: #f6f2ec;
    box-shadow: 0 10px 30px rgba(120, 90, 40, .08);
    isolation: isolate;
}

.cta-box__img {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 52%;
    height: 100%;
    object-fit: cover;
    object-position: right center;
    z-index: -1;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 22%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 22%);
    transition: transform 1.2s var(--ease);
}

.cta-box:hover .cta-box__img { transform: scale(1.05); }

.cta-box__text { padding: clamp(26px, 2.6vw, 38px) clamp(22px, 4vw, 58px); }

.cta-box__text h2 {
    font-size: clamp(24px, 2.35vw, 38px);
    font-weight: 400;
    line-height: 1.25;
    color: #121318;
}

.cta-box__text p {
    margin: clamp(6px, .7vw, 10px) 0 clamp(14px, 1.5vw, 22px);
    font-size: clamp(14px, 1.3vw, 19px);
    line-height: 1.5;
    color: #2a2c35;
}

.cta-box__text .btn { height: clamp(44px, 3.4vw, 52px); padding: 0 32px; }

/* ---------- About responsive ---------- */
@media (max-width: 991px) {
    /* five cards as a centred 3 + 2 instead of leaving two stranded on the left */
    .why-grid { grid-template-columns: repeat(6, 1fr); }
    .why-grid > li { grid-column: span 2; }
    .why-grid > li:nth-child(4) { grid-column: 2 / span 2; }

    /* stacked, so match the text gutter of the sections around it */
    .purpose-grid { width: min(1340px, 100% - 2 * clamp(16px, 6.6vw, 96px)); }

    .page-hero::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 1;
        background: linear-gradient(90deg, rgba(253, 244, 238, .85), rgba(253, 244, 238, .3) 70%, transparent);
    }

    .page-hero__content { z-index: 2; }
    .page-hero__img { object-position: 70% center; }

    .who-grid,
    .purpose-grid { grid-template-columns: 1fr; }

    .cta-box { flex-direction: column; align-items: stretch; }

    .cta-box__img {
        position: relative;
        width: 100%;
        height: 180px;
        order: -1;
        -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent);
        mask-image: linear-gradient(180deg, #000 60%, transparent);
    }

    .cta-box__text { padding-top: 6px; }
    .cta-box__text p br { display: none; }
}

@media (max-width: 767px) {
    .stats-band { grid-template-columns: repeat(2, 1fr); row-gap: 26px; }
    .stat:nth-child(3)::before { display: none; }
}

@media (max-width: 575px) {
    .page-hero { height: 300px; }
    /* let both title lines flow as one sentence so no word is left stranded */
    .page-hero__title .line,
    .page-hero__title .line > span { display: inline; }

    .why-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .why-grid > li,
    .why-grid > li:nth-child(4) { grid-column: auto; }
    .why-grid > li:last-child { grid-column: 1 / -1; }

    .stats-band { padding: 22px 6px; }
}

/* ==========================================================================
   About page - extended company profile
   ========================================================================== */
/* longer copy: tighter rhythm between paragraphs */
.who-text p { margin: 0 0 clamp(12px, 1.1vw, 16px); }
.who-text .section-title + p,
.who-text .ab-rich { margin-top: clamp(16px, 1.7vw, 26px); }
.who-text p:last-of-type { margin-bottom: clamp(20px, 2vw, 30px); }
.ab-who2 .who-text p:last-of-type { margin-bottom: 0; }

/* image column grows with the text beside it */
.ab-media-tall {
    align-self: stretch;
    aspect-ratio: auto;
    min-height: clamp(320px, 30vw, 520px);
}

.ab-who2 { padding-top: clamp(46px, 4.8vw, 74px); }

/* ---------- Belief quote ---------- */
.ab-belief { padding: 0 0 clamp(34px, 3.6vw, 54px); }

.ab-belief__quote {
    position: relative;
    margin: 0;
    padding: clamp(26px, 3vw, 44px) clamp(22px, 5vw, 80px);
    border-left: 3px solid var(--gold);
    border-radius: 0 var(--radius) var(--radius) 0;
    background: #faf6f1;
    overflow: hidden;
}

.ab-belief__mark {
    position: absolute;
    top: -.12em;
    right: clamp(14px, 3vw, 40px);
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(100px, 10vw, 170px);
    line-height: 1;
    color: rgba(180, 126, 18, .16);
    pointer-events: none;
}

.ab-belief__quote p {
    position: relative;
    max-width: 1020px;
    font-family: var(--font-head);
    font-size: clamp(18px, 1.75vw, 26px);
    font-weight: 300;
    line-height: 1.55;
    color: #121318;
}

.ab-belief__quote em,
.ab-belief__quote i,
.ab-belief__quote strong { font-style: normal; font-weight: 500; color: var(--gold-dark); }

/* ---------- Admin-written rich text (paragraphs, lists, links) ---------- */
.ab-rich > * + * { margin-top: 10px; }
.ab-rich ul { margin-top: 12px; }
.ab-rich ul li + li { margin-top: 10px; }

/* ---------- Shared tick list (also lists inside rich text) ---------- */
.ab-ticks li,
.ab-rich ul li {
    position: relative;
    padding-left: 26px;
    font-size: clamp(14px, 1.05vw, 16px);
    line-height: 1.6;
    color: #3a3c45;
    break-inside: avoid;
}

.ab-ticks li + li { margin-top: 8px; }

.ab-ticks li::before,
.ab-rich ul li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: .42em;
    width: 12px;
    height: 6px;
    border-left: 2px solid var(--gold);
    border-bottom: 2px solid var(--gold);
    transform: rotate(-45deg);
}

.ab-ticks strong,
.ab-rich strong { font-weight: 700; color: #121318; }

/* ---------- What we do ---------- */
.ab-wwd { padding: clamp(46px, 4.8vw, 74px) 0; background: #faf6f1; }
.ab-lead { margin-top: 12px; font-size: clamp(15px, 1.2vw, 18px); color: #3a3c45; }

.ab-wwd-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: clamp(18px, 2vw, 30px);
}

.ab-wwd-card {
    grid-column: span 2;
    display: flex;
    flex-direction: column;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--white);
    box-shadow: 0 8px 26px rgba(120, 90, 40, .08);
    transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}

.ab-wwd-card--wide { grid-column: span 3; }

.ab-wwd-card:hover { transform: translateY(-6px); box-shadow: 0 18px 36px rgba(120, 90, 40, .14); }

.ab-wwd-card__media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.ab-wwd-card--wide .ab-wwd-card__media { aspect-ratio: 16 / 7; }

.ab-wwd-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.2s var(--ease);
}

.ab-wwd-card:hover .ab-wwd-card__media img { transform: scale(1.06); }

.ab-wwd-card__num {
    position: absolute;
    top: 16px;
    left: 16px;
    padding: 5px 14px;
    border-radius: 30px;
    background: var(--gold-grad);
    font-family: var(--font-head);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--white);
}

.ab-wwd-card__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: clamp(20px, 2vw, 30px);
}

.ab-wwd-card__body h3 {
    font-size: clamp(18px, 1.45vw, 22px);
    font-weight: 600;
    line-height: 1.3;
    color: #0b0b0e;
}

.ab-wwd-card__body p { font-size: clamp(14px, 1.1vw, 16px); line-height: 1.7; color: #3a3c45; }

.ab-wwd-card__label {
    margin-top: 4px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--gold);
}

.ab-wwd-card--wide .ab-ticks { columns: 2; column-gap: 24px; }
.ab-wwd-card--wide .ab-ticks li { margin: 0 0 8px; }

/* ---------- Our approach ---------- */
.ab-approach { padding: clamp(46px, 4.8vw, 74px) 0; }

.ab-steps {
    position: relative;
    display: grid;
    grid-template-columns: repeat(var(--step-cols, 6), 1fr);
    gap: clamp(14px, 1.6vw, 24px);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* dashed thread through the step numbers */
.ab-steps::before {
    content: "";
    position: absolute;
    top: 28px;
    left: 8%;
    right: 8%;
    border-top: 1px dashed var(--gold-light);
}

.ab-step { position: relative; padding: 0 6px; text-align: center; }

.ab-step__num {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    margin: 0 auto 16px;
    border: 1px solid var(--gold-light);
    border-radius: 50%;
    background: var(--white);
    font-family: var(--font-head);
    font-size: 17px;
    font-weight: 700;
    color: var(--gold);
    transition: transform .5s var(--ease), background .4s, color .4s, border-color .4s;
}

.ab-step:hover .ab-step__num {
    border-color: transparent;
    background: var(--gold-grad);
    color: var(--white);
    transform: scale(1.08);
}

.ab-step h3 {
    margin-bottom: 6px;
    font-size: clamp(16px, 1.3vw, 20px);
    font-weight: 600;
    color: #0b0b0e;
}

.ab-step p { font-size: clamp(14px, 1vw, 15px); line-height: 1.6; color: #4a4c55; }

/* ---------- Why choose / what makes us different ---------- */
.ab-diff { padding: clamp(46px, 4.8vw, 74px) 0; background: #faf6f1; }

.ab-diff-grid {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    align-items: start;
    gap: clamp(30px, 4.4vw, 72px);
}

/* only pin the intro where the whole column fits on screen */
@media (min-width: 992px) and (min-height: 860px) {
    .ab-diff-intro { position: sticky; top: calc(var(--header-h) + 24px); }
}

.ab-diff-intro .section-title,
.ab-commit-text .section-title {
    font-size: clamp(26px, 2.5vw, 40px);
    color: #121318;
}

.ab-diff-intro .ab-rich p,
.ab-commit-text p {
    margin-top: clamp(14px, 1.4vw, 20px);
    font-size: clamp(15px, 1.15vw, 17px);
    line-height: 1.75;
    color: #3a3c45;
}

.ab-why-box {
    margin-top: clamp(22px, 2.4vw, 34px);
    padding: clamp(20px, 2vw, 28px);
    border-top: 3px solid var(--gold);
    border-radius: var(--radius);
    background: var(--white);
    box-shadow: 0 8px 26px rgba(120, 90, 40, .08);
}

.ab-why-box h3,
.ab-diff-list__title {
    margin-bottom: clamp(14px, 1.4vw, 20px);
    font-size: clamp(19px, 1.6vw, 24px);
    font-weight: 600;
    color: #121318;
}

.ab-diff-item {
    display: flex;
    align-items: flex-start;
    gap: clamp(14px, 1.4vw, 20px);
    padding: clamp(18px, 1.8vw, 24px) 0;
    border-bottom: 1px solid #e6e1d8;
}

.ab-diff-item:first-child { padding-top: 0; }

.ab-diff-item__img {
    flex: 0 0 auto;
    width: clamp(88px, 8.4vw, 130px);
    aspect-ratio: 1;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(15, 20, 40, .12);
}

.ab-diff-item__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1s var(--ease);
}

.ab-diff-item:hover .ab-diff-item__img img { transform: scale(1.08); }

.ab-diff-item h4 {
    margin-bottom: 6px;
    font-size: clamp(16px, 1.3vw, 19px);
    font-weight: 600;
    line-height: 1.35;
    color: #121318;
}

.ab-diff-item p { font-size: clamp(14px, 1.1vw, 16.5px); line-height: 1.7; color: #3a3c45; }

.ab-diff-commit {
    margin-top: clamp(22px, 2.4vw, 32px);
    padding: clamp(22px, 2.2vw, 30px);
    border-radius: var(--radius);
    background: var(--navy);
}

.ab-diff-commit h3 { font-size: clamp(19px, 1.6vw, 24px); font-weight: 600; color: var(--white); }

.ab-diff-commit p {
    margin: 8px 0 14px;
    font-size: clamp(14px, 1.1vw, 16.5px);
    line-height: 1.7;
    color: rgba(255, 255, 255, .82);
}

.ab-diff-commit strong {
    font-family: var(--font-head);
    font-size: clamp(14px, 1.1vw, 16px);
    font-weight: 500;
    color: var(--gold-light);
}

/* ---------- Vision / mission (longer copy) ---------- */
.ab-purpose { padding-top: clamp(46px, 4.8vw, 74px); }
.ab-purpose .purpose-grid { align-items: stretch; }
.ab-purpose .purpose-media { aspect-ratio: auto; min-height: 360px; }
.ab-purpose .purpose-item p + p { margin-top: 10px; }
.ab-purpose .ab-rich ul li { font-size: clamp(14px, 1.1vw, 16px); }

/* ---------- Core values (why cards with copy) ---------- */
.ab-values .why-card { justify-content: flex-start; padding: 28px 18px 26px; }
.ab-values .why-card h3 { font-weight: 600; }

.ab-values .why-card p {
    font-size: clamp(13.5px, 1vw, 15px);
    line-height: 1.6;
    color: #4a4c55;
}

/* any other number of values: a centred, wrapping row */
.ab-values--flex { display: flex; flex-wrap: wrap; justify-content: center; }
.ab-values--flex > li { flex: 0 1 calc((100% - 4 * clamp(14px, 3vw, 46px)) / 5); min-width: 200px; }

/* ---------- Commitment & philosophy ---------- */
.ab-commit { padding: clamp(10px, 1.6vw, 26px) 0 clamp(40px, 4.4vw, 66px); }

.ab-commit-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: clamp(30px, 4vw, 64px);
}

.ab-commit-grid--single { grid-template-columns: minmax(0, 860px); }

.ab-philosophy {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--navy);
    isolation: isolate;
    box-shadow: 0 16px 36px rgba(15, 20, 40, .18);
}

.ab-philosophy__bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.2s var(--ease);
}

.ab-philosophy:hover .ab-philosophy__bg { transform: scale(1.05); }

.ab-philosophy::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(160deg, rgba(15, 20, 40, .9), rgba(15, 20, 40, .74));
}

.ab-philosophy__inner { padding: clamp(28px, 3.4vw, 52px); }
.ab-philosophy .eyebrow { color: var(--gold-light); }

.ab-philosophy p {
    font-size: clamp(15px, 1.15vw, 17px);
    line-height: 1.75;
    color: rgba(255, 255, 255, .86);
}

.ab-philosophy__lines {
    margin: clamp(18px, 1.8vw, 26px) 0;
    padding-left: 18px;
    border-left: 2px solid var(--gold-light);
}

.ab-philosophy__lines li {
    font-family: var(--font-head);
    font-size: clamp(17px, 1.5vw, 22px);
    font-weight: 300;
    line-height: 1.5;
    color: var(--white);
}

.ab-philosophy__lines li + li { margin-top: 6px; }

/* ---------- Brand promise ---------- */
.ab-promise { padding: 0 0 clamp(30px, 3vw, 46px); }

.ab-promise__box {
    padding: clamp(36px, 4.4vw, 70px) clamp(20px, 5vw, 80px);
    border: 1px solid #efe6d8;
    border-radius: 26px;
    text-align: center;
    background:
        radial-gradient(circle at 8% 20%, rgba(212, 165, 72, .14), transparent 30%),
        radial-gradient(circle at 92% 80%, rgba(212, 165, 72, .14), transparent 30%),
        #f8f4ef;
}

.ab-promise__title {
    font-size: clamp(24px, 2.6vw, 42px);
    line-height: 1.3;
    color: #121318;
}

.ab-promise__title span { color: var(--gold); }
.ab-promise__rule { margin: clamp(16px, 1.6vw, 22px) auto clamp(18px, 1.8vw, 24px); }

.ab-promise__box p {
    max-width: 820px;
    margin-inline: auto;
    font-size: clamp(15px, 1.25vw, 18px);
    line-height: 1.75;
    color: #3a3c45;
}

.ab-promise__box .ab-promise__sub { margin-top: 12px; font-weight: 600; color: #121318; }

/* ---------- Extended about responsive ---------- */
@media (max-width: 1199px) {
    .ab-wwd-card--wide .ab-ticks { columns: 1; }
    .ab-steps { grid-template-columns: repeat(min(3, var(--step-cols, 6)), 1fr); row-gap: 34px; }
    .ab-steps::before { display: none; }
}

@media (max-width: 991px) {
    .ab-media-tall,
    .ab-purpose .purpose-media { min-height: 0; aspect-ratio: 16 / 10; }
    .ab-who2 .who-media { order: 1; }

    .ab-wwd-grid { grid-template-columns: 1fr 1fr; }
    .ab-wwd-card,
    .ab-wwd-card--wide { grid-column: span 1; }
    .ab-wwd-card--wide,
    .ab-wwd-card:last-child { grid-column: 1 / -1; }
    .ab-wwd-card:last-child .ab-wwd-card__media { aspect-ratio: 16 / 7; }

    .ab-diff-grid,
    .ab-commit-grid { grid-template-columns: 1fr; }

}

@media (max-width: 640px) {
    .ab-wwd-grid { grid-template-columns: 1fr; }
    .ab-wwd-card__media,
    .ab-wwd-card--wide .ab-wwd-card__media,
    .ab-wwd-card:last-child .ab-wwd-card__media { aspect-ratio: 16 / 9; }

    .ab-steps { grid-template-columns: 1fr; row-gap: 22px; }

    .ab-step {
        display: grid;
        grid-template-columns: 52px 1fr;
        column-gap: 16px;
        padding: 0;
        text-align: left;
    }

    .ab-step__num { grid-row: span 2; width: 52px; height: 52px; margin: 0; }
}

@media (max-width: 575px) {
    .ab-belief__quote { padding: 24px 20px; }
    .ab-diff-item__img { width: 84px; border-radius: 12px; }
    .ab-values--flex > li { flex-basis: calc(50% - 6px); min-width: 0; }
    .ab-promise__title span { display: block; }
}

/* ==========================================================================
   Home - Testimonials
   ========================================================================== */
.testimonials {
    position: relative;
    margin-top: calc(var(--radius-lg) * -1);
    padding: clamp(56px, 5.5vw, 86px) 0 calc(clamp(56px, 5.5vw, 86px) + var(--radius-lg));
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    overflow: hidden;
    background:
        radial-gradient(circle at 6% 18%, rgba(212, 165, 72, .12), transparent 28%),
        radial-gradient(circle at 94% 86%, rgba(212, 165, 72, .12), transparent 28%),
        var(--white);
}

.testi-deco {
    position: absolute;
    right: 5%;
    top: 26px;
    font-size: clamp(120px, 14vw, 230px);
    line-height: 1;
    color: rgba(180, 126, 18, .06);
    pointer-events: none;
}

.section-head__text { text-align: center; }
.section-head__text .eyebrow { margin-bottom: 6px; }

.testi-swiper { padding: 34px 0 72px; margin: -34px 0 -72px; }
.testi-swiper .swiper-slide { height: auto; }

.t-card {
    position: relative;
    height: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
    padding: 46px clamp(22px, 2.2vw, 34px) 28px;
    border-radius: 22px;
    background: var(--white);
    border: 1px solid #efe8de;
    box-shadow: 0 10px 30px rgba(120, 90, 40, .08);
    transition: transform .6s var(--ease), background .6s var(--ease), box-shadow .6s var(--ease), border-color .6s;
}

.t-card__quote {
    position: absolute;
    top: -24px;
    left: clamp(22px, 2.2vw, 34px);
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: 20px;
    color: var(--white);
    background: var(--gold-grad);
    box-shadow: 0 8px 20px rgba(180, 126, 18, .35);
}

.t-card__stars {
    display: flex;
    gap: 4px;
    margin-bottom: 14px;
    font-size: 14px;
    color: #e0a82e;
}

.t-card blockquote {
    flex: 1;
    margin: 0 0 24px;
    font-size: clamp(15px, 1.15vw, 17px);
    line-height: 1.75;
    color: #3a3c45;
    transition: color .6s;
}

.t-card__who {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-top: 20px;
    border-top: 1px solid #efe8de;
    transition: border-color .6s;
}

.t-card__avatar {
    flex: 0 0 auto;
    width: 50px;
    height: 50px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: 19px;
    color: var(--gold);
    background: #fbf3e4;
    transition: background .6s, color .6s;
}

.t-card__who strong {
    display: block;
    font-family: var(--font-head);
    font-size: 16px;
    font-weight: 600;
    color: var(--navy);
    transition: color .6s;
}

.t-card__who small {
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--gold-dark);
    transition: color .6s;
}

.t-card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(120, 90, 40, .16); }

/* centre (active) card turns navy */
.testi-swiper .swiper-slide-active .t-card {
    background: var(--navy);
    border-color: var(--navy);
    transform: translateY(-12px);
    box-shadow: 0 26px 50px rgba(15, 20, 40, .28);
}

.testi-swiper .swiper-slide-active .t-card blockquote { color: rgba(255, 255, 255, .86); }
.testi-swiper .swiper-slide-active .t-card__who { border-color: rgba(255, 255, 255, .14); }
.testi-swiper .swiper-slide-active .t-card__who strong { color: var(--white); }
.testi-swiper .swiper-slide-active .t-card__who small { color: var(--gold-light); }
.testi-swiper .swiper-slide-active .t-card__avatar { color: var(--gold-light); background: rgba(212, 165, 72, .16); }
.testi-swiper .swiper-slide-active .t-card__quote { animation: floatBadge 2.4s ease-in-out infinite; }

/* shared slider dots */
.testi-pagination,
.blog-pagination {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 36px;
}

.testi-pagination .swiper-pagination-bullet,
.blog-pagination .swiper-pagination-bullet {
    width: 9px;
    height: 9px;
    margin: 0 !important;
    border-radius: 9px;
    opacity: 1;
    background: #d9cdb9;
    transition: width .4s var(--ease), background .4s;
}

.testi-pagination .swiper-pagination-bullet-active,
.blog-pagination .swiper-pagination-bullet-active {
    width: 28px;
    background: var(--gold);
}

/* ==========================================================================
   Home - Blog
   ========================================================================== */
.blog {
    position: relative;
    margin-top: calc(var(--radius-lg) * -1);
    padding: clamp(56px, 5.5vw, 86px) 0 clamp(60px, 6vw, 96px);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    background: linear-gradient(180deg, #f8f1eb 0%, var(--cream) 100%);
}

.blog-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: clamp(26px, 3vw, 42px);
}

.blog-head .gold-rule { margin: 16px 0 0; }

.blog-nav { display: flex; gap: 12px; }

.blog-nav__btn {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 1.5px solid var(--gold);
    background: transparent;
    color: var(--gold-dark);
    font-size: 16px;
    cursor: pointer;
    transition: all .35s var(--ease);
}

.blog-nav__btn:hover {
    color: var(--white);
    border-color: transparent;
    background: var(--gold-grad);
    transform: translateY(-3px);
    box-shadow: 0 10px 22px rgba(180, 126, 18, .3);
}

/* looping slider: clip sideways so neighbouring cards don't peek in */
.blog .blog-swiper { margin-inline: 0; padding-inline: 0; }
.blog-swiper .swiper-slide { height: auto; }

.blog-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    border-radius: 20px;
    overflow: hidden;
    background: var(--white);
    box-shadow: 0 10px 28px rgba(120, 90, 40, .1);
    transition: transform .55s var(--ease), box-shadow .55s var(--ease);
}

.blog-card__media {
    position: relative;
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    isolation: isolate;
}

.blog-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.1s var(--ease);
}

/* dark base shade + gold shade that fades in on hover */
.blog-card__media::before,
.blog-card__media::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    transition: opacity .55s var(--ease);
}

.blog-card__media::after { background: linear-gradient(180deg, rgba(15, 20, 40, 0) 45%, rgba(15, 20, 40, .45) 100%); }

.blog-card__media::before {
    background: linear-gradient(200deg, rgba(180, 126, 18, 0) 25%, rgba(154, 107, 14, .55) 100%);
    opacity: 0;
}

.blog-card__cat {
    position: absolute;
    left: 16px;
    bottom: 16px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border-radius: 30px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--gold-dark);
    background: rgba(255, 255, 255, .94);
    transition: transform .5s var(--ease);
}

.blog-card__icon {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 2;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--white);
    background: rgba(255, 255, 255, .2);
    border: 1px solid rgba(255, 255, 255, .5);
    backdrop-filter: blur(6px);
    opacity: 0;
    transform: translateY(-12px) scale(.6);
    transition: opacity .45s var(--ease), transform .55s var(--ease);
}

.blog-card__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 22px 24px 26px;
}

.blog-card h3 {
    margin-bottom: 10px;
    font-size: clamp(17px, 1.35vw, 20px);
    font-weight: 500;
    line-height: 1.4;
}

.blog-card h3 a { transition: color .35s; }

.blog-card p {
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 18px;
    font-size: 15px;
    line-height: 1.7;
    color: var(--muted);
}

.blog-card__more {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--gold-dark);
}

.blog-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 24px 46px rgba(120, 90, 40, .2);
}

.blog-card:hover .blog-card__media img { transform: scale(1.1); }
.blog-card:hover .blog-card__media::before { opacity: 1; }
.blog-card:hover .blog-card__cat { transform: translateY(-4px); }
.blog-card:hover h3 a { color: var(--gold-dark); }
.blog-card:hover .blog-card__more i { animation: arrowNudge 1.1s ease-in-out infinite; }

.blog-card:hover .blog-card__icon {
    opacity: 1;
    transform: none;
    animation: floatBadge 2.2s ease-in-out .5s infinite;
}

@media (max-width: 575px) {
    .blog-head { align-items: flex-start; flex-direction: column; }
    .t-card { padding: 42px 20px 24px; }
}

/* ==========================================================================
   Top bar (common)
   ========================================================================== */
.topbar {
    background: var(--navy);
    color: rgba(255, 255, 255, .78);
    font-size: 13.5px;
}

.topbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 42px;
}

.topbar-info {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.topbar-info li {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0 18px;
}

.topbar-info li:first-child { padding-left: 0; }
.topbar-info li + li { border-left: 1px solid rgba(255, 255, 255, .14); }
.topbar-info i { color: var(--gold-light); font-size: 12.5px; }
.topbar-info a { transition: color .3s; }
.topbar-info a:hover { color: var(--gold-light); }

.topbar-social { display: flex; align-items: center; gap: 6px; }

.tb-follow {
    margin-right: 8px;
    font-size: 12px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .55);
}

.topbar-social a {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: 12px;
    color: var(--white);
    transition: background .3s, color .3s, transform .3s var(--ease);
}

.topbar-social a:hover {
    color: var(--navy);
    background: var(--gold-light);
    transform: translateY(-2px);
}

/* "Follow Us" pushes the address onto a second line below 1200px */
@media (max-width: 1199px) {
    .tb-follow { display: none; }
}

@media (max-width: 991px) {
    .topbar-info .tb-addr { display: none; }
}

@media (max-width: 575px) {
    .topbar-info .tb-email { display: none; }
    .topbar-inner { min-height: 38px; }
    .topbar { font-size: 13px; }
}

/* ==========================================================================
   Home - counters (reuses the About page stats band)
   ========================================================================== */
.stats--home { padding: 0 0 clamp(44px, 4.4vw, 70px); }
.about { padding-bottom: clamp(36px, 3.6vw, 56px); }

/* ==========================================================================
   FAQ page
   ========================================================================== */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* mobile first: base rules are for phones, min-width queries build up to desktop */
.faq {
    position: relative;
    padding: clamp(44px, 4.6vw, 76px) 0 clamp(40px, 4vw, 64px);
    background: linear-gradient(180deg, var(--white) 0%, #fcf9f6 46%, var(--white) 100%);
}

/* ---------- Intro + search ---------- */
.faq-intro {
    max-width: 760px;
    margin: 0 auto clamp(34px, 3.6vw, 56px);
    text-align: center;
}

.faq-intro > p {
    margin: 14px auto 0;
    max-width: 600px;
    color: var(--muted);
    font-size: clamp(15px, 1.1vw, 17px);
}

.faq-search {
    position: relative;
    margin: clamp(22px, 2.2vw, 32px) auto 0;
    max-width: 640px;
}

/* 16px stops iOS Safari zooming the page when the field is focused */
.faq-search input {
    width: 100%;
    height: 54px;
    padding: 0 54px 0 50px;
    border: 1.5px solid #e6dccf;
    border-radius: 60px;
    background: var(--white);
    font: inherit;
    font-size: 16px;
    color: var(--text);
    box-shadow: 0 10px 28px rgba(120, 90, 40, .08);
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}

.faq-search input::-webkit-search-cancel-button { display: none; }
.faq-search input::placeholder { color: #9a9ca6; text-overflow: ellipsis; }

.faq-search input:focus {
    border-color: var(--gold);
    box-shadow: 0 12px 30px rgba(180, 126, 18, .16), 0 0 0 4px rgba(180, 126, 18, .1);
}

.faq-search__icon {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--gold);
    font-size: 17px;
    pointer-events: none;
}

.faq-search__clear {
    position: absolute;
    right: 9px;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: var(--cream);
    color: var(--navy);
    cursor: pointer;
    transition: background .3s, color .3s;
}

.faq-search__clear:hover { background: var(--gold); color: var(--white); }
.faq-search__clear[hidden] { display: none; }

.faq-popular {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    font-size: 14px;
}

.faq-popular > span { width: 100%; color: var(--muted); font-weight: 600; }

.faq-popular button {
    min-height: 38px;
    padding: 6px 14px;
    border: 1px solid #eadfce;
    border-radius: 30px;
    background: var(--white);
    font: inherit;
    font-size: 13.5px;
    color: var(--gold-dark);
    cursor: pointer;
    transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}

.faq-popular button:hover {
    background: var(--gold-grad);
    border-color: transparent;
    color: var(--white);
}

/* ---------- Layout ---------- */
/* one column: the aside dissolves, topic chips sit above the answers, the help card below */
.faq-layout { display: grid; grid-template-columns: minmax(0, 1fr); }
.faq-aside { display: contents; }
.faq-main { order: 1; min-width: 0; }

/* sticky chip bar, bleeding to the screen edges (offsets match .container's gutter) */
.faq-browse {
    order: 0;
    min-width: 0;
    position: sticky;
    top: 70px;
    z-index: 5;
    margin: 0 calc(-1 * clamp(16px, 6.6vw, 96px)) 22px;
    padding: 10px clamp(16px, 6.6vw, 96px);
    background: rgba(252, 249, 246, .94);
    backdrop-filter: blur(8px);
}

.faq-aside__label {
    display: none;
    padding: 0 10px 12px;
    border-bottom: 1px solid var(--line);
    font-family: var(--font-head);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--muted);
}

/* ---------- Category nav ---------- */
.faq-cats {
    display: flex;
    gap: 8px;
    padding: 2px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
}

.faq-cats::-webkit-scrollbar { display: none; }

/* scrolling chips on small screens; an index list on desktop */
.faq-cat {
    flex: none;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 42px;
    padding: 8px 16px;
    border: 1px solid var(--line);
    border-radius: 40px;
    background: var(--white);
    font: inherit;
    font-family: var(--font-head);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    color: #4a4d58;
    text-align: left;
    white-space: nowrap;
    scroll-snap-align: start;
    cursor: pointer;
    transition: color .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease);
}

.faq-cat__icon {
    flex: none;
    display: grid;
    place-items: center;
    font-size: 13px;
    color: var(--gold);
    transition: color .35s var(--ease), transform .35s var(--ease);
}

.faq-cat__name { flex: 1; }

.faq-cat__count {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
    transition: color .35s var(--ease);
}

.faq-cat:hover { color: var(--gold); }
.faq-cat:hover .faq-cat__icon { color: var(--gold); }

.faq-cat.is-active { color: var(--gold); font-weight: 600; border-color: var(--gold); }
.faq-cat.is-active .faq-cat__icon { color: var(--gold); }
.faq-cat.is-active .faq-cat__count { color: var(--gold); }

.faq-cat:focus-visible,
.faq-q button:focus-visible,
.faq-expand:focus-visible,
.faq-popular button:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}

/* ---------- Help card ---------- */
.faq-help {
    order: 2;
    position: relative;
    overflow: hidden;
    margin-top: 34px;
    padding: 24px 20px;
    border-radius: var(--radius);
    background: var(--navy);
    color: rgba(255, 255, 255, .78);
    isolation: isolate;
}

.faq-help::before {
    content: "";
    position: absolute;
    right: -70px;
    top: -70px;
    width: 190px;
    height: 190px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(212, 165, 72, .32), transparent 70%);
    z-index: -1;
}

.faq-help__icon { display: block; width: 46px; height: 40px; color: var(--gold-light); margin-bottom: 12px; }
.faq-help h3 { font-size: 21px; color: var(--white); margin-bottom: 6px; }
.faq-help p { font-size: 14.5px; line-height: 1.55; }

.faq-help__links { display: grid; gap: 8px; margin: 16px 0 20px; font-size: 14.5px; }
.faq-help__links li { display: flex; align-items: center; gap: 10px; min-width: 0; }
.faq-help__links i { flex: none; width: 16px; color: var(--gold-light); }
.faq-help__links a { min-width: 0; color: var(--white); overflow-wrap: anywhere; transition: color .3s; }
.faq-help__links a:hover { color: var(--gold-light); }

.faq-help .btn { height: 46px; padding: 0 24px; font-size: 15px; }

/* ---------- Answers panel ---------- */
/* icon + title on one row, "Expand all" tucked under the title */
.faq-main__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding-bottom: 20px;
    margin-bottom: 22px;
    border-bottom: 1px solid var(--line);
}

.faq-main__icon {
    flex: none;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    background: var(--gold-grad);
    color: var(--white);
    font-size: 19px;
    box-shadow: 0 10px 22px rgba(180, 126, 18, .28);
}

.faq-main__title { flex: 1 1 calc(100% - 64px); min-width: 0; }
.faq-main__title h2 { font-size: clamp(22px, 2vw, 32px); line-height: 1.2; }
.faq-main__title p { margin-top: 4px; color: var(--muted); font-size: 15px; }

.faq-expand {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    margin-left: 60px;
    padding: 7px 14px;
    border: 1.5px solid #eadfce;
    border-radius: 30px;
    background: var(--white);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--gold-dark);
    cursor: pointer;
    transition: border-color .3s, background .3s, color .3s;
}

.faq-expand:hover { border-color: var(--gold); background: var(--cream); }
.faq-expand[hidden] { display: none; }

.faq-list { display: grid; gap: 12px; }

.faq-item {
    position: relative;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--white);
    overflow: hidden;
    animation: faqIn .55s var(--ease) both;
    animation-delay: calc(var(--i, 0) * 45ms);
    transition: border-color .35s var(--ease), box-shadow .35s var(--ease);
}

/* gold edge on the open question */
.faq-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--gold-grad);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform .45s var(--ease);
}

@keyframes faqIn {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: none; }
}

.faq-item:hover { border-color: #e6d6bb; }

.faq-item.is-open {
    border-color: #ead9b8;
    box-shadow: 0 14px 34px rgba(120, 90, 40, .1);
}

.faq-item.is-open::before { transform: scaleY(1); }

.faq-q { font-size: inherit; }

.faq-q button {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 56px;
    padding: 16px 14px 16px 16px;
    border: 0;
    background: transparent;
    font-family: var(--font-head);
    font-size: clamp(15px, 1.12vw, 17.5px);
    font-weight: 500;
    line-height: 1.45;
    color: var(--navy);
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.faq-num {
    display: none;
    flex: none;
    font-family: var(--font-head);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--gold);
    opacity: .75;
}

.faq-q__text { flex: 1; min-width: 0; overflow-wrap: anywhere; transition: color .3s; }
.faq-q button:hover .faq-q__text,
.faq-item.is-open .faq-q__text { color: var(--gold-dark); }

.faq-q__text mark {
    padding: 0 2px;
    border-radius: 3px;
    background: rgba(212, 165, 72, .28);
    color: inherit;
}

.faq-item__tag {
    display: flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    margin-bottom: 4px;
    font-family: var(--font-body);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
}

.faq-item__tag i { color: var(--gold); }

/* plus that turns into a minus */
.faq-toggle {
    position: relative;
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1.5px solid #e6d6bb;
    transition: background .35s var(--ease), border-color .35s var(--ease), transform .45s var(--ease);
}

.faq-toggle::before,
.faq-toggle::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 12px;
    height: 1.8px;
    margin: -.9px 0 0 -6px;
    border-radius: 2px;
    background: var(--gold);
    transition: transform .45s var(--ease), background .35s;
}

.faq-toggle::after { transform: rotate(90deg); }

.faq-q button:hover .faq-toggle { border-color: var(--gold); }

.faq-item.is-open .faq-toggle {
    background: var(--gold-grad);
    border-color: transparent;
    transform: rotate(180deg);
}

.faq-item.is-open .faq-toggle::before,
.faq-item.is-open .faq-toggle::after { background: var(--white); }
.faq-item.is-open .faq-toggle::after { transform: rotate(0deg); }

/* height animates via grid rows; closed answers drop out of the tab order */
.faq-a {
    display: grid;
    grid-template-rows: 0fr;
    visibility: hidden;
    transition: grid-template-rows .45s var(--ease), visibility 0s linear .45s;
}

.faq-item.is-open .faq-a {
    grid-template-rows: 1fr;
    visibility: visible;
    transition: grid-template-rows .45s var(--ease), visibility 0s;
}

.faq-a__inner { overflow: hidden; }

.faq-a__body {
    padding: 0 18px 18px 16px;
    font-size: 15px;
    line-height: 1.75;
    color: #4a4d5a;
    overflow-wrap: anywhere;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity .35s var(--ease), transform .45s var(--ease);
}

.faq-item.is-open .faq-a__body { opacity: 1; transform: none; transition-delay: .08s; }

.faq-a__body strong { color: var(--navy); font-weight: 700; }

.faq-a__body a {
    color: var(--gold-dark);
    font-weight: 600;
    border-bottom: 1px solid rgba(180, 126, 18, .35);
    transition: border-color .3s;
}

.faq-a__body a:hover { border-color: var(--gold); }

/* ---------- Empty state ---------- */
.faq-empty {
    padding: clamp(34px, 4vw, 56px) 20px;
    border: 1.5px dashed #e6d6bb;
    border-radius: var(--radius);
    background: var(--white);
    text-align: center;
}

.faq-empty[hidden] { display: none; }

.faq-empty__icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 14px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--cream);
    color: var(--gold);
    font-size: 26px;
}

.faq-empty h3 { font-size: 21px; }
.faq-empty p { margin: 6px auto 20px; max-width: 380px; color: var(--muted); }

/* the phone number button can be wider than a 320px screen */
.faq-empty .btn { max-width: 100%; height: auto; min-height: 50px; padding: 12px 22px; white-space: normal; }

.faq-noscript { color: var(--muted); }

/* ---------- FAQ: larger phones / tablets ---------- */
@media (min-width: 576px) {
    .faq-search input { height: 60px; padding: 0 56px 0 58px; }
    .faq-search__icon { left: 24px; }
    .faq-search__clear { right: 12px; }
    .faq-popular > span { width: auto; margin-right: 2px; }

    .faq-browse { top: 78px; }

    .faq-help { display: grid; grid-template-columns: auto 1fr; column-gap: 18px; align-items: start; padding: 26px 24px; }
    .faq-help__icon { grid-row: span 2; }
    .faq-help__links, .faq-help .btn { grid-column: 2; justify-self: start; }

    .faq-main__head { flex-wrap: nowrap; gap: 16px; }
    .faq-main__icon { width: 58px; height: 58px; font-size: 22px; border-radius: 16px; }
    .faq-main__title { flex: 1; }
    .faq-expand { margin-left: 0; padding: 9px 16px; font-size: 14px; }

    .faq-q button { gap: 16px; padding: 18px 20px 18px 22px; }
    .faq-num { display: block; }
    .faq-toggle { width: 34px; height: 34px; }
    .faq-a__body { padding: 0 70px 22px 56px; font-size: 15.5px; }
}

/* ---------- FAQ: desktop, sticky sidebar ---------- */
@media (min-width: 992px) {
    .faq-layout {
        grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
        align-items: start;
        gap: clamp(26px, 3.4vw, 56px);
    }

    .faq-aside {
        position: sticky;
        top: 100px;
        display: grid;
        gap: 22px;
    }

    /* topic index styled like the legal pages' "On This Page" card */
    .faq-browse {
        position: static;
        margin: 0;
        padding: 22px 12px 12px;
        border: 1px solid var(--line);
        border-radius: var(--radius);
        background: var(--white);
        backdrop-filter: none;
        box-shadow: 0 10px 30px rgba(15, 20, 40, .05);
    }

    .faq-aside__label { display: block; }

    .faq-cats { display: grid; gap: 0; padding: 0; overflow: visible; }

    /* plain index list: gold chevron + label, hairline between rows */
    .faq-cat {
        width: 100%;
        gap: 14px;
        min-height: 0;
        padding: 15px 10px;
        border: 0;
        border-bottom: 1px solid var(--line);
        border-radius: 0;
        background: transparent;
        font-size: 15px;
        white-space: normal;
    }

    .faq-cat:last-child { border-bottom: 0; }

    /* the topic icon is swapped for a chevron here; the chips keep it */
    .faq-cat__icon { width: 10px; color: var(--gold-light); }
    .faq-cat__icon i { display: none; }

    .faq-cat__icon::before {
        content: "\f054";
        font-family: "Font Awesome 6 Free";
        font-weight: 900;
        font-size: 12px;
    }

    .faq-cat.is-active { border-color: var(--line); }
    .faq-cat.is-active .faq-cat__icon { transform: translateX(2px); }

    .faq-help { display: block; margin-top: 0; }
}

/* lift / slide effects only where a real pointer hovers, so they don't stick after a tap */
@media (hover: hover) and (min-width: 992px) {
    .faq-cat:hover { transform: translateX(3px); }
    .faq-cat.is-active:hover { transform: none; }
}

@media (hover: hover) {
    .faq-popular button:hover { transform: translateY(-2px); }
}

@media (prefers-reduced-motion: reduce) {
    .faq-item { animation: none; }
}

/* ==========================================================================
   Blog pages (blogs.html + blog-details.html)
   Mobile first: base rules are the phone layout, min-width queries add columns.
   ========================================================================== */

/* nine top-level menu items: keep them on one line on smaller desktops */
@media (min-width: 1200px) and (max-width: 1360px) {
    .nav-list { gap: 12px; }
    .nav-link { font-size: 13.5px; }
}

@media (min-width: 1361px) and (max-width: 1500px) {
    .nav-list { gap: 20px; }
}

.blog-all { display: flex; justify-content: center; margin-top: 26px; }

/* shared meta row */
.post-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
    font-size: 14px;
    color: var(--muted);
}

.post-meta li { display: inline-flex; align-items: center; gap: 8px; }
.post-meta i { color: var(--gold); font-size: 13px; }

.post-meta--card { gap: 6px 16px; margin-bottom: 10px; font-size: 13px; }

.post-meta--light { gap: 6px 16px; color: rgba(255, 255, 255, .86); font-size: 13.5px; }
.post-meta--light i { color: var(--gold-light); }

/* ---------- Listing ---------- */
.blog-page { padding: clamp(40px, 4.4vw, 70px) 0 clamp(40px, 4vw, 64px); }

.blog-page__featured { margin-bottom: clamp(36px, 4vw, 60px); }

.feature-post {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    border-radius: 20px;
    overflow: hidden;
    background: var(--white);
    box-shadow: 0 16px 44px rgba(120, 90, 40, .12);
    transition: box-shadow .55s var(--ease), transform .55s var(--ease);
}

.feature-post__media {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.feature-post__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.2s var(--ease);
}

.feature-post__badge {
    position: absolute;
    top: 14px;
    left: 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border-radius: 30px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--white);
    background: var(--gold-grad);
    box-shadow: 0 8px 20px rgba(180, 126, 18, .35);
}

.feature-post__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: clamp(12px, 1.2vw, 18px);
    padding: clamp(22px, 3.4vw, 56px);
    background:
        radial-gradient(circle at 100% 0%, rgba(212, 165, 72, .12), transparent 40%),
        var(--white);
}

/* padded to a comfortable tap height, pulled back so the text stays put */
.feature-post__cat {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: -10px 0;
    padding: 10px 0;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--gold);
}

.feature-post h2 {
    font-size: clamp(22px, 2.4vw, 40px);
    line-height: 1.22;
}

.feature-post h2 a { transition: color .35s; }
.feature-post h2 a:hover { color: var(--gold-dark); }

.feature-post p {
    font-size: clamp(15px, 1.15vw, 17px);
    line-height: 1.75;
    color: #3a3c45;
}

.feature-post .post-meta { width: 100%; padding: 14px 0 6px; border-top: 1px solid var(--line); }

/* toolbar */
.blog-toolbar { margin-bottom: 18px; }

/* phones + tablets: one swipeable row bleeding to the screen edges
   (offsets match .container-wide's gutter); extra block padding keeps the active chip's shadow */
.blog-filters {
    display: flex;
    gap: 10px;
    margin: -6px calc(-1 * clamp(16px, 3.2vw, 48px)) -12px;
    padding: 6px clamp(16px, 3.2vw, 48px) 12px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scroll-padding-inline: clamp(16px, 3.2vw, 48px);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.blog-filters::-webkit-scrollbar { display: none; }

.chip {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 44px;
    padding: 0 18px;
    border: 1.5px solid #e7dccb;
    border-radius: 44px;
    background: var(--white);
    font-family: var(--font-body);
    font-size: 14.5px;
    font-weight: 600;
    color: var(--navy);
    cursor: pointer;
    scroll-snap-align: start;
    transition: color .35s, background .35s, border-color .35s, transform .35s var(--ease), box-shadow .35s;
}

.chip i { color: var(--gold); font-size: 13px; transition: color .35s; }

.chip span {
    min-width: 24px;
    height: 24px;
    padding: 0 7px;
    display: inline-grid;
    place-items: center;
    border-radius: 24px;
    font-size: 12px;
    color: var(--gold-dark);
    background: #fbf3e4;
    transition: background .35s, color .35s;
}

.chip.is-active {
    color: var(--white);
    border-color: transparent;
    background: var(--gold-grad);
    box-shadow: 0 8px 20px rgba(180, 126, 18, .3);
}

.chip.is-active i { color: var(--white); }
.chip.is-active span { color: var(--gold-dark); background: var(--white); }

.blog-search { position: relative; flex: none; }

.blog-search i {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--gold);
    pointer-events: none;
}

/* 16px minimum: anything smaller makes iOS Safari zoom in on focus */
.blog-search input {
    width: 100%;
    height: 48px;
    padding: 0 18px 0 46px;
    border: 1.5px solid #e7dccb;
    border-radius: 48px;
    background: var(--white);
    font-family: var(--font-body);
    font-size: 16px;
    color: var(--text);
    outline: none;
    transition: border-color .3s, box-shadow .3s;
}

.blog-search input:focus { border-color: var(--gold); box-shadow: 0 0 0 4px rgba(180, 126, 18, .12); }

.blog-subbar {
    display: flex;
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 14px 24px;
    margin-bottom: clamp(22px, 2.2vw, 32px);
    padding-top: 18px;
    border-top: 1px solid var(--line);
}

.blog-count { font-size: 14.5px; color: var(--muted); }

.blog-count strong { color: var(--navy); }

/* grid */
.blog-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(20px, 2vw, 30px);
}

.blog-card--grid {
    opacity: 0;
    animation: cardIn .7s var(--ease) forwards;
    animation-delay: calc(var(--i, 0) * 80ms);
}

@keyframes cardIn {
    from { opacity: 0; transform: translateY(26px); }
    to { opacity: 1; transform: translateY(0); }
}

.blog-empty {
    max-width: 460px;
    margin: 20px auto 0;
    padding: 40px 22px;
    text-align: center;
    border-radius: 22px;
    background: var(--cream);
}

.blog-empty[hidden] { display: none; }

.blog-empty__icon,
.post-missing__icon {
    width: 70px;
    height: 70px;
    display: inline-grid;
    place-items: center;
    margin-bottom: 16px;
    border-radius: 50%;
    font-size: 28px;
    color: var(--gold);
    background: var(--white);
    box-shadow: 0 8px 22px rgba(120, 90, 40, .12);
}

.blog-empty h3 { font-size: 22px; font-weight: 500; margin-bottom: 6px; }
.blog-empty p { color: var(--muted); margin-bottom: 20px; }

/* pager */
.blog-pager {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: clamp(34px, 3.6vw, 54px);
}

.blog-pager:empty { display: none; }

.pager-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1.5px solid #e7dccb;
    background: var(--white);
    font-family: var(--font-head);
    font-size: 15px;
    font-weight: 600;
    color: var(--navy);
    cursor: pointer;
    transition: all .35s var(--ease);
}

.pager-btn.is-active {
    color: var(--white);
    border-color: transparent;
    background: var(--gold-grad);
    box-shadow: 0 10px 22px rgba(180, 126, 18, .3);
}

.pager-btn:disabled { opacity: .4; cursor: default; }

/* ---------- Details: reading progress ---------- */
.read-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 120;
    height: 3px;
    background: var(--gold-grad);
    transform: scaleX(0);
    transform-origin: left;
}

/* ---------- Details: hero ---------- */
.post-hero {
    position: relative;
    min-height: 380px;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    background: var(--navy);
}

.post-hero__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.08);
    animation: bannerZoom 2.6s var(--ease) forwards;
}

.post-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(15, 20, 40, .25) 0%, rgba(15, 20, 40, .35) 40%, rgba(15, 20, 40, .9) 100%),
        linear-gradient(90deg, rgba(15, 20, 40, .55) 0%, rgba(15, 20, 40, 0) 70%);
}

.post-hero__content {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: clamp(40px, 5vw, 80px) 0 clamp(30px, 4vw, 64px);
    color: var(--white);
}

.post-hero__content .container > * {
    opacity: 0;
    animation: cardIn .9s var(--ease) forwards;
}

.post-hero__content .container > :nth-child(2) { animation-delay: .1s; }
.post-hero__content .container > :nth-child(3) { animation-delay: .2s; }
.post-hero__content .container > :nth-child(4) { animation-delay: .32s; }

/* links get a taller hit area; the negative margin keeps the visual spacing */
.crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 12px;
    margin: -10px 0 calc(clamp(18px, 2vw, 28px) - 10px);
    font-size: 14px;
    color: rgba(255, 255, 255, .7);
}

.crumbs i { font-size: 9px; color: var(--gold-light); }
.crumbs a { padding: 10px 0; transition: color .3s; }
.crumbs a:hover,
.crumbs a:last-child { color: var(--white); }

.post-hero__cat {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    padding: 8px 16px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--white);
    background: var(--gold-grad);
    box-shadow: 0 8px 20px rgba(180, 126, 18, .35);
}

.post-hero__title {
    max-width: 920px;
    margin-bottom: clamp(14px, 1.6vw, 24px);
    font-size: clamp(25px, 7vw, 30px);
    font-weight: 400;
    line-height: 1.2;
    color: var(--white);
    text-shadow: 0 4px 24px rgba(0, 0, 0, .25);
}

/* ---------- Details: layout ---------- */
.post-wrap { padding: clamp(36px, 4.6vw, 76px) 0 clamp(30px, 3vw, 50px); }

/* phones/tablets stack article > prev/next > sidebar (source order) */
.post-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(36px, 4.4vw, 56px);
}

.post-article { align-self: start; min-width: 0; }

/* ---------- Details: article ---------- */
.post-lead {
    margin-bottom: clamp(24px, 2.4vw, 34px);
    padding-bottom: clamp(24px, 2.4vw, 34px);
    border-bottom: 1px solid var(--line);
    font-family: var(--font-head);
    font-size: clamp(18px, 1.5vw, 23px);
    line-height: 1.6;
    color: var(--navy);
}

.post-lead::first-letter {
    float: left;
    margin: 6px 10px 0 0;
    font-size: 2.9em;
    font-weight: 600;
    line-height: .8;
    color: var(--gold);
}

.post-content > * + * { margin-top: 20px; }

.post-content p,
.post-content li {
    font-size: clamp(16px, 1.15vw, 17.5px);
    line-height: 1.8;
    color: #3a3c45;
    overflow-wrap: break-word;
}

.post-content a { color: var(--gold-dark); text-decoration: underline; text-underline-offset: 3px; }
.post-content strong { color: var(--navy); font-weight: 700; }

.post-content h2 {
    position: relative;
    margin-top: clamp(32px, 3.4vw, 50px);
    padding-left: 18px;
    font-size: clamp(21px, 1.9vw, 30px);
    font-weight: 500;
    line-height: 1.3;
    scroll-margin-top: 90px;
}

.post-content h2::before {
    content: "";
    position: absolute;
    left: 0;
    top: .2em;
    bottom: .2em;
    width: 4px;
    border-radius: 4px;
    background: var(--gold-grad);
}

.post-content h3 { margin-top: 28px; font-size: clamp(18px, 1.4vw, 22px); font-weight: 600; }

.post-list { display: grid; gap: 10px; }

.post-list li { position: relative; padding-left: 36px; }

.post-list li::before {
    content: "\f00c";
    position: absolute;
    left: 0;
    top: .3em;
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 11px;
    color: var(--gold-dark);
    background: #fbf3e4;
}

ol.post-list { counter-reset: step; }

ol.post-list li::before {
    counter-increment: step;
    content: counter(step);
    font-family: var(--font-head);
    font-size: 12px;
}

.post-content .post-quote {
    position: relative;
    margin: clamp(30px, 3vw, 42px) 0;
    padding: clamp(24px, 2.6vw, 38px) clamp(22px, 3vw, 44px);
    border-radius: 18px;
    background: var(--navy);
    overflow: hidden;
}

.post-quote > i {
    position: absolute;
    right: 16px;
    top: 12px;
    font-size: 44px;
    color: rgba(212, 165, 72, .16);
}

.post-content .post-quote p {
    position: relative;
    font-family: var(--font-head);
    font-size: clamp(17px, 1.55vw, 23px);
    font-style: italic;
    line-height: 1.6;
    color: var(--white);
}

.post-quote cite {
    display: block;
    margin-top: 16px;
    font-size: 13px;
    font-style: normal;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--gold-light);
}

.post-quote cite::before { content: "\2014\00a0"; }

.post-tip {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 20px clamp(18px, 2vw, 28px);
    border: 1px solid #efe2c8;
    border-left: 4px solid var(--gold);
    border-radius: 16px;
    background: linear-gradient(135deg, #fdf8ef, var(--cream));
}

.post-tip__icon {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: 17px;
    color: var(--white);
    background: var(--gold-grad);
}

.post-tip strong {
    display: block;
    margin-bottom: 4px;
    font-family: var(--font-head);
    font-size: 16px;
    color: var(--navy);
}

.post-content .post-tip p { font-size: 15.5px; line-height: 1.7; }

.post-content .post-figure { margin: clamp(30px, 3vw, 42px) 0; }

.post-figure img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 16px;
    box-shadow: 0 16px 36px rgba(15, 20, 40, .14);
}

.post-figure figcaption {
    margin-top: 12px;
    padding-left: 14px;
    border-left: 2px solid var(--gold);
    font-size: 14px;
    font-style: italic;
    color: var(--muted);
}

/* tags + share: stacked on phones, labels on their own line above the pills */
.post-foot {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px 30px;
    margin-top: clamp(36px, 3.4vw, 50px);
    padding: 22px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.post-tags,
.post-share { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

.post-tags > span,
.post-share > span {
    flex-basis: 100%;
    margin-right: 6px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--navy);
}

.post-tags a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 6px 16px;
    border-radius: 30px;
    font-size: 13.5px;
    color: #3a3c45;
    background: #f6f1ea;
    transition: color .3s, background .3s;
}

.post-share a,
.post-share button {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border: 1.5px solid #e7dccb;
    border-radius: 50%;
    background: var(--white);
    font-size: 14px;
    color: var(--navy);
    cursor: pointer;
    transition: all .35s var(--ease);
}

.post-share button.is-copied {
    color: var(--white);
    border-color: transparent;
    background: var(--gold-grad);
}

/* author */
.post-author {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
    margin-top: 30px;
    padding: clamp(22px, 2.2vw, 30px);
    border-radius: 20px;
    background: var(--cream);
}

.post-author__img {
    flex: 0 0 auto;
    width: 74px;
    height: 74px;
    padding: 12px;
    border-radius: 50%;
    object-fit: contain;
    background: var(--white);
    box-shadow: 0 6px 18px rgba(120, 90, 40, .12);
}

.post-author small {
    display: block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--gold);
}

.post-author strong { font-family: var(--font-head); font-size: 19px; font-weight: 600; color: var(--navy); }

.post-author em {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    font-style: normal;
    color: var(--muted);
}

.post-author p { font-size: 15px; line-height: 1.7; color: #3a3c45; }

/* ---------- Details: sidebar ---------- */
.post-aside { display: grid; gap: 18px; align-content: start; min-width: 0; }

.side-sticky { display: grid; gap: 22px; }

.side-card {
    padding: 22px 20px;
    border: 1px solid #efe8de;
    border-radius: 20px;
    background: var(--white);
    box-shadow: 0 10px 28px rgba(120, 90, 40, .07);
}

.side-card[hidden] { display: none; }

.side-card h4 {
    position: relative;
    margin-bottom: 18px;
    padding-bottom: 12px;
    font-size: 17px;
    font-weight: 600;
}

.side-card h4::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 32px;
    height: 2px;
    background: var(--gold);
}

.blog-search--side { flex: none; }

/* table of contents: only useful beside the article, so desktop only */
.side-toc { display: none; }

.side-toc ol { counter-reset: toc; display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }

.side-toc a {
    position: relative;
    display: block;
    padding: 8px 10px 8px 36px;
    border-radius: 10px;
    font-size: 14.5px;
    line-height: 1.45;
    color: #3a3c45;
    transition: color .3s, background .3s;
}

.side-toc a::before {
    counter-increment: toc;
    content: counter(toc, decimal-leading-zero);
    position: absolute;
    left: 9px;
    top: 9px;
    font-family: var(--font-head);
    font-size: 12px;
    font-weight: 700;
    color: #c9b48c;
    transition: color .3s;
}

.side-toc a:hover,
.side-toc a.is-active { color: var(--gold-dark); background: #fbf6ee; }
.side-toc a.is-active { font-weight: 600; }
.side-toc a.is-active::before { color: var(--gold); }

/* categories */
.side-cats li + li { border-top: 1px dashed #ebe3d6; }

.side-cats a {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 46px;
    padding: 11px 0;
    font-size: 15px;
    color: var(--text);
    transition: color .3s, padding .35s var(--ease);
}

.side-cats i { width: 18px; color: var(--gold); text-align: center; }

.side-cats span {
    margin-left: auto;
    min-width: 28px;
    height: 24px;
    display: grid;
    place-items: center;
    border-radius: 24px;
    font-size: 12px;
    font-weight: 700;
    color: var(--gold-dark);
    background: #fbf3e4;
    transition: background .3s, color .3s;
}

.side-cats a.is-current { color: var(--gold-dark); padding-left: 6px; }
.side-cats a.is-current span { color: var(--white); background: var(--gold); }

/* recent */
.side-recent { display: grid; gap: 16px; }

.side-recent a { display: flex; gap: 14px; align-items: center; }

.side-recent img {
    flex: 0 0 auto;
    width: 76px;
    height: 64px;
    border-radius: 12px;
    object-fit: cover;
    transition: transform .6s var(--ease);
}

.side-recent strong {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-family: var(--font-head);
    font-size: 14.5px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--navy);
    transition: color .3s;
}

.side-recent small { display: block; margin-top: 4px; font-size: 12.5px; color: var(--muted); }
.side-recent small i { margin-right: 4px; color: var(--gold); }

/* tags */
.side-tags { display: flex; flex-wrap: wrap; gap: 8px; }

.side-tags a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 40px;
    padding: 7px 14px;
    border: 1px solid #efe4d2;
    border-radius: 30px;
    font-size: 13.5px;
    color: #3a3c45;
    background: #faf6f0;
    transition: color .3s, background .3s, border-color .3s, transform .3s var(--ease);
}

.side-tags i { font-size: 10px; color: var(--gold); transition: color .3s; }

.side-tags a.is-current { color: var(--gold-dark); border-color: #e6cf9f; background: #fbf1dd; font-weight: 600; }

/* CTA */
.side-cta {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    isolation: isolate;
    color: var(--white);
}

.side-cta img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
    transition: transform 1.2s var(--ease);
}

.side-cta::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(15, 20, 40, .55), rgba(15, 20, 40, .92));
}

.side-cta__body { padding: 28px 22px; }
.side-cta__body .eyebrow { color: var(--gold-light); margin-bottom: 8px; font-size: 12px; }
.side-cta h4 { font-size: 21px; font-weight: 500; line-height: 1.35; color: var(--white); margin-bottom: 14px; }

.side-cta__phone {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    padding: 6px 0;
    font-weight: 600;
    color: var(--gold-light);
}

.side-cta .btn { width: 100%; height: 46px; font-size: 15px; }

/* ---------- Details: prev / next ---------- */
.post-nav {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
}

.post-nav:empty { display: none; }

.post-nav__item {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    padding: 12px;
    border: 1px solid #efe8de;
    border-radius: 18px;
    background: var(--white);
    transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s;
}

.post-nav__item.is-empty { display: none; border: 0; background: none; }

.post-nav__item--next { flex-direction: row-reverse; text-align: right; }

.post-nav__item img {
    flex: 0 0 auto;
    width: 76px;
    height: 64px;
    border-radius: 12px;
    object-fit: cover;
}

.post-nav__item > span { min-width: 0; }

.post-nav__item small {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--gold);
}

.post-nav__item strong {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-family: var(--font-head);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--navy);
}

/* ---------- Details: related ---------- */
.related {
    padding: clamp(56px, 5.5vw, 86px) 0 clamp(60px, 6vw, 96px);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    background: linear-gradient(180deg, #f8f1eb 0%, var(--cream) 100%);
}

/* not found */
.post-missing { padding: clamp(80px, 9vw, 140px) 0; text-align: center; }
.post-missing h1 { font-size: clamp(26px, 2.6vw, 40px); margin-bottom: 10px; }
.post-missing p { color: var(--muted); margin-bottom: 26px; }

/* ---------- Blog: hover effects (real pointers only, so taps don't leave cards stuck mid-lift) ---------- */
@media (hover: hover) {
    .feature-post:hover { transform: translateY(-6px); box-shadow: 0 26px 56px rgba(120, 90, 40, .2); }
    .feature-post:hover .feature-post__media img { transform: scale(1.07); }

    .chip:hover { border-color: var(--gold); transform: translateY(-2px); }
    .pager-btn:hover:not(:disabled) { border-color: var(--gold); color: var(--gold-dark); transform: translateY(-3px); }

    .post-tags a:hover { color: var(--white); background: var(--gold); }

    .post-share a:hover,
    .post-share button:hover {
        color: var(--white);
        border-color: transparent;
        background: var(--gold-grad);
        transform: translateY(-3px);
    }

    .side-cats a:hover { color: var(--gold-dark); padding-left: 6px; }
    .side-cats a:hover span { color: var(--white); background: var(--gold); }

    .side-recent a:hover img { transform: scale(1.06) rotate(-1deg); }
    .side-recent a:hover strong { color: var(--gold-dark); }

    .side-tags a:hover {
        color: var(--white);
        border-color: transparent;
        background: var(--gold-grad);
        transform: translateY(-2px);
    }

    .side-tags a:hover i { color: var(--white); }

    .side-cta:hover img { transform: scale(1.08); }

    a.post-nav__item:hover {
        border-color: transparent;
        transform: translateY(-5px);
        box-shadow: 0 18px 38px rgba(120, 90, 40, .16);
    }

    .post-nav__item:hover small i { animation: arrowNudge 1.1s ease-in-out infinite; }
    .post-nav__item--prev:hover small i { animation-direction: reverse; }
}

/* ---------- Blog: 600px+ (large phones landscape, tablets) ---------- */
@media (min-width: 600px) {
    .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .feature-post { border-radius: 26px; }

    .feature-post__badge {
        top: 20px;
        left: 20px;
        padding: 8px 16px;
        font-size: 12.5px;
    }

    .post-meta--light { gap: 8px 22px; font-size: 15px; }

    .post-hero { min-height: clamp(420px, 36vw, 620px); }
    .post-hero__cat { margin-bottom: 16px; font-size: 12.5px; }
    .post-hero__title { font-size: clamp(30px, 3.5vw, 58px); line-height: 1.16; }

    .post-lead::first-letter { margin-right: 14px; font-size: 3.4em; }

    .post-content p,
    .post-content li { line-height: 1.85; }

    .post-content h2 { padding-left: 20px; scroll-margin-top: 110px; }

    .post-content .post-quote { border-radius: 20px; }
    .post-quote > i { right: 26px; top: 18px; font-size: 70px; }
    .post-quote cite { font-size: 13.5px; }

    .post-tip { gap: 18px; padding-block: 22px; }
    .post-tip__icon { width: 46px; height: 46px; font-size: 19px; }

    .post-figure img { border-radius: 20px; }

    .post-foot {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 18px 30px;
    }

    .post-tags > span,
    .post-share > span { flex-basis: auto; }

    .post-tags a { min-height: 36px; padding: 6px 14px; }
    .post-share a,
    .post-share button { width: 40px; height: 40px; }

    .post-author { flex-direction: row; gap: 20px; }

    /* sidebar as a two-column tile set: short/flowing cards span the full row */
    .post-aside { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
    .side-card--wide,
    .side-sticky { grid-column: 1 / -1; }
    .side-card { padding: 24px; }
    .side-cta__body { padding: 30px 26px; }

    .post-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
    .post-nav__item { gap: 16px; padding: 14px; }
    .post-nav__item.is-empty { display: block; }
    .post-nav__item img { width: 96px; height: 76px; }
    .post-nav__item strong { font-size: 15.5px; }
}

/* two-up grid: a lone last card (3 related, odd search results) spans the row as a wide card */
@media (min-width: 600px) and (max-width: 1199px) {
    .blog-grid > .blog-card:last-child:nth-child(odd) {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .blog-grid > .blog-card:last-child:nth-child(odd) .blog-card__media { aspect-ratio: auto; min-height: 240px; }
    .blog-grid > .blog-card:last-child:nth-child(odd) .blog-card__body { justify-content: center; }
    .blog-grid > .blog-card:last-child:nth-child(odd) p { flex: none; -webkit-line-clamp: 3; }
}

/* full-width CTA tile on tablets: phone + button share a row instead of a stretched button */
@media (min-width: 600px) and (max-width: 991px) {
    .side-cta__body { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }
    .side-cta__body .eyebrow,
    .side-cta h4 { flex-basis: 100%; margin-bottom: 0; }
    .side-cta__phone { margin-bottom: 0; }
    .side-cta .btn { width: auto; padding: 0 32px; }
}

/* ---------- Blog: 768px+ ---------- */
@media (min-width: 768px) {
    .blog-subbar { flex-direction: row; align-items: center; justify-content: space-between; }
    .blog-search { flex: 0 1 340px; }
    .blog-search--side { flex: none; }
    .blog-search input { font-size: 15px; }

    .pager-btn { width: 48px; height: 48px; }
    .blog-pager { gap: 10px; }
}

/* ---------- Blog: 992px+ (desktop) ---------- */
@media (min-width: 992px) {
    .feature-post { grid-template-columns: 1.15fr 1fr; }
    .feature-post__media { aspect-ratio: auto; min-height: clamp(280px, 30vw, 460px); }

    /* everything fits, so chips wrap instead of scrolling */
    .blog-filters {
        flex-wrap: wrap;
        margin: 0;
        padding: 0;
        overflow: visible;
    }

    .feature-post__cat { margin: 0; padding: 0; }

    .post-hero__content { padding-bottom: clamp(36px, 4vw, 64px); }

    .crumbs { gap: 6px 12px; margin: 0 0 clamp(18px, 2vw, 28px); }
    .crumbs a { padding: 0; }

    /* article + sidebar, prev/next across both columns underneath */
    .post-layout {
        grid-template-columns: minmax(0, 1fr) 300px;
        grid-template-areas:
            "article aside"
            "nav nav";
        column-gap: 36px;
        row-gap: clamp(36px, 3.6vw, 56px);
    }

    .post-article { grid-area: article; }
    .post-aside { grid-area: aside; grid-template-columns: minmax(0, 1fr); height: 100%; }
    .post-nav { grid-area: nav; }

    .post-tags a { min-height: 0; }
    .side-cats a { min-height: 0; }
    .side-tags a { min-height: 0; }
    .side-cta__phone { padding: 0; }

    .side-toc { display: block; }
    .side-toc[hidden] { display: none; }
}

/* only the last group follows the reader, so every card stays reachable;
   short screens keep it static so it never runs off the bottom */
@media (min-width: 992px) and (min-height: 761px) {
    .side-sticky { position: sticky; top: 100px; }
}

/* ---------- Blog: 1200px+ ---------- */
@media (min-width: 1200px) {
    .blog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

    .post-layout {
        grid-template-columns: minmax(0, 1fr) clamp(300px, 26vw, 370px);
        column-gap: clamp(36px, 4.4vw, 72px);
    }
}

/* ==========================================================================
   Testimonials page
   ========================================================================== */
/* multicolour Google "G" */
.g-logo { display: inline-grid; place-items: center; flex: 0 0 auto; }
.g-logo svg { width: 100%; height: 100%; }
.g-logo--sm { width: 16px; height: 16px; }

.g-logo--chip {
    width: 40px;
    height: 40px;
    padding: 9px;
    border-radius: 50%;
    background: var(--white);
}

.g-logo--xl {
    width: 64px;
    height: 64px;
    padding: 14px;
    border-radius: 50%;
    background: var(--white);
    box-shadow: 0 10px 26px rgba(15, 20, 40, .12);
}

/* ---------- Banner rating badges ---------- */
/* mobile first: base rules are for phones, min-width queries build up to desktop */
.tm-hero { height: 420px; }

/* two equal badges that can't overflow a 320px screen */
.tm-hero-badges {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    max-width: 420px;
    margin-top: clamp(18px, 1.8vw, 28px);
}

.tm-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 6px 12px 6px 6px;
    border-radius: 60px;
    background: rgba(255, 255, 255, .78);
    border: 1px solid rgba(180, 126, 18, .25);
    backdrop-filter: blur(8px);
    box-shadow: 0 8px 22px rgba(15, 20, 40, .1);
    transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}

.tm-hero-badge > span:last-child { min-width: 0; }

.tm-hero-badge .g-logo,
.tm-hero-badge__emblem {
    flex: none;
    width: 32px;
    height: 32px;
    padding: 7px;
    border-radius: 50%;
    background: var(--white);
    object-fit: contain;
}

.tm-hero-badge strong { font-family: var(--font-head); font-size: 16px; font-weight: 600; color: var(--navy); }
.tm-hero-badge .fa-star { font-size: 14px; color: #f4b400; }

.tm-hero-badge small {
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted);
    line-height: 1.2;
}

/* ---------- Rating overview ---------- */
.tm-overview {
    position: relative;
    z-index: 3;
    padding-bottom: clamp(44px, 4.4vw, 70px);
}

.tm-panel {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    margin-top: -30px;
    border-radius: 24px;
    overflow: hidden;
    color: var(--white);
    background:
        radial-gradient(circle at 0% 0%, rgba(212, 165, 72, .22), transparent 36%),
        radial-gradient(circle at 100% 100%, rgba(212, 165, 72, .16), transparent 34%),
        var(--navy);
    box-shadow: 0 30px 60px rgba(15, 20, 40, .28);
    isolation: isolate;
}

/* slow gold light sweeping across the panel */
.tm-panel__glow {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(110deg, transparent 35%, rgba(212, 165, 72, .1) 50%, transparent 65%);
    background-size: 250% 100%;
    animation: panelGlow 7s linear infinite;
}

@keyframes panelGlow { from { background-position: 150% 0; } to { background-position: -100% 0; } }

.tm-score,
.tm-breakdown { padding: clamp(28px, 3vw, 46px) clamp(22px, 2.6vw, 42px); }

.tm-score {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.tm-score__brand {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .78);
}

.tm-score__emblem {
    width: 40px;
    height: 40px;
    padding: 6px;
    border-radius: 50%;
    background: var(--white);
    object-fit: contain;
}

.tm-score__num {
    margin: 16px 0 6px;
    font-family: var(--font-head);
    font-size: clamp(56px, 5.4vw, 84px);
    font-weight: 300;
    line-height: 1;
    color: var(--white);
    font-variant-numeric: tabular-nums;
}

/* partial star fill: gold stars clipped to --fill over faint ones */
.tm-stars {
    position: relative;
    display: inline-block;
    font-size: 20px;
    letter-spacing: 4px;
    line-height: 1;
    color: rgba(255, 255, 255, .2);
}

.tm-stars::before,
.tm-stars__fill::before {
    content: "\f005\f005\f005\f005\f005";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
}

.tm-stars__fill {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0;
    overflow: hidden;
    white-space: nowrap;
    color: #f4b400;
    transition: width 1.6s var(--ease) .2s;
}

.tm-panel.is-in .tm-stars__fill { width: var(--fill); }

.tm-score__total { margin-top: 12px; font-size: 15px; color: rgba(255, 255, 255, .7); }
.tm-score__total b { color: var(--white); }

.tm-score__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
    padding-bottom: 3px;
    font-size: 14px;
    font-weight: 600;
    color: var(--gold-light);
    border-bottom: 1px solid rgba(212, 165, 72, .4);
    transition: color .3s, border-color .3s;
}

.tm-score__link:hover { color: var(--white); border-color: var(--white); }

/* stacked below both scores until there is room for three columns */
.tm-score--google { border-bottom: 1px solid rgba(255, 255, 255, .1); }

.tm-breakdown {
    order: 3;
    border-top: 1px solid rgba(255, 255, 255, .1);
    background: rgba(255, 255, 255, .03);
}

.tm-breakdown__title { font-size: clamp(20px, 1.6vw, 26px); color: var(--white); }
.tm-breakdown__sub { margin: 4px 0 22px; font-size: 14.5px; color: rgba(255, 255, 255, .65); }
.tm-breakdown__sub b { color: var(--gold-light); }

.tm-bars { display: grid; gap: 14px; }

.tm-bar {
    display: grid;
    grid-template-columns: 42px 1fr 44px;
    align-items: center;
    gap: 14px;
    font-size: 14px;
    font-weight: 600;
}

.tm-bar__label i { font-size: 11px; color: #f4b400; }

.tm-bar__track {
    height: 10px;
    border-radius: 10px;
    overflow: hidden;
    background: rgba(255, 255, 255, .1);
}

.tm-bar__fill {
    display: block;
    height: 100%;
    width: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, #9a6b0e, #d4a548, #f4d48a);
    transition: width 1.4s var(--ease);
}

.tm-panel.is-in .tm-bar__fill { width: var(--w); }
.tm-bar:nth-child(2) .tm-bar__fill { transition-delay: .1s; }
.tm-bar:nth-child(3) .tm-bar__fill { transition-delay: .2s; }
.tm-bar:nth-child(4) .tm-bar__fill { transition-delay: .3s; }
.tm-bar:nth-child(5) .tm-bar__fill { transition-delay: .4s; }

.tm-bar__count { text-align: right; color: rgba(255, 255, 255, .65); font-variant-numeric: tabular-nums; }

/* what guests mention most */
.tm-love {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px 18px;
    margin-top: clamp(26px, 2.6vw, 38px);
}

.tm-love__label {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--muted);
}

.tm-love__list { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }

.tm-love__list li {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 8px 8px 16px;
    border-radius: 40px;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--navy);
    background: var(--white);
    border: 1px solid #efe8de;
    box-shadow: 0 6px 16px rgba(120, 90, 40, .06);
    transition: transform .4s var(--ease), border-color .4s;
}

.tm-love__list li:hover { border-color: var(--gold-light); }
.tm-love__list i { color: var(--gold); }

.tm-love__list b {
    min-width: 34px;
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 12.5px;
    text-align: center;
    color: var(--gold-dark);
    background: #fbf3e4;
}

/* ---------- Quote ribbon ---------- */
.tm-ribbon {
    display: grid;
    gap: 14px;
    padding: clamp(26px, 2.6vw, 40px) 0;
    overflow: hidden;
    background: var(--cream);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.tm-ribbon__track {
    display: flex;
    width: max-content;
    animation: ribbonScroll 60s linear infinite;
}

.tm-ribbon__row--reverse .tm-ribbon__track { animation-direction: reverse; animation-duration: 70s; }
.tm-ribbon:hover .tm-ribbon__track { animation-play-state: paused; }

.tm-ribbon__set { display: flex; gap: 14px; padding-right: 14px; }

@keyframes ribbonScroll { to { transform: translateX(-50%); } }

.tm-pill {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 12px 22px 12px 14px;
    border-radius: 60px;
    white-space: nowrap;
    background: var(--white);
    border: 1px solid #efe4d4;
    box-shadow: 0 6px 18px rgba(120, 90, 40, .07);
}

.tm-pill img { width: 22px; height: 22px; object-fit: contain; }
.tm-pill .g-logo { width: 20px; height: 20px; }
.tm-pill__stars { font-size: 11px; color: #f4b400; letter-spacing: 1px; }
.tm-pill q { font-family: var(--font-head); font-size: 14px; color: var(--navy); }
.tm-pill small { font-size: 13px; font-weight: 600; color: var(--gold-dark); }
.tm-pill small::before { content: "\2014\00a0"; }

/* ---------- Review wall ---------- */
.tm-wall {
    position: relative;
    padding: clamp(56px, 5.5vw, 90px) 0;
    background:
        radial-gradient(circle at 4% 30%, rgba(212, 165, 72, .1), transparent 26%),
        radial-gradient(circle at 96% 80%, rgba(212, 165, 72, .1), transparent 26%),
        var(--white);
}

.tm-filters {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    margin-bottom: clamp(28px, 3vw, 44px);
}

.tm-tabs {
    display: flex;
    width: 100%;
    gap: 6px;
    padding: 6px;
    border-radius: 60px;
    background: #f6f0e8;
}

.tm-tab {
    flex: 1 1 0;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 46px;
    padding: 0 8px;
    border: 0;
    border-radius: 50px;
    font-family: var(--font-body);
    font-size: 14px;
    white-space: nowrap;
    font-weight: 600;
    color: var(--text);
    background: transparent;
    cursor: pointer;
    transition: background .4s var(--ease), color .4s, box-shadow .4s;
}

.tm-tab:hover { background: rgba(255, 255, 255, .7); }
.tm-tab i { color: var(--gold); transition: color .4s; }
.tm-tab > i { display: none; }

/* counts join the labels once three tabs fit them (hidden on the narrowest phones) */
.tm-tab__count {
    display: none;
    min-width: 26px;
    padding: 1px 7px;
    border-radius: 20px;
    font-size: 12px;
    background: rgba(180, 126, 18, .12);
    color: var(--gold-dark);
    transition: background .4s, color .4s;
}

.tm-tab.is-active { color: var(--white); background: var(--navy); box-shadow: 0 8px 20px rgba(15, 20, 40, .22); }
.tm-tab.is-active i { color: var(--gold-light); }
.tm-tab.is-active .tm-tab__count { background: var(--gold-grad); color: var(--white); }
.tm-tab.is-active .g-logo { width: 20px; height: 20px; padding: 2px; border-radius: 50%; background: var(--white); }

/* one swipeable row bleeding to the screen edges (offsets match .container-wide's gutter) */
.tm-chips {
    align-self: stretch;
    display: flex;
    gap: 8px;
    margin: 0 calc(-1 * clamp(16px, 3.2vw, 48px));
    padding: 2px clamp(16px, 3.2vw, 48px) 4px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scroll-padding-inline: clamp(16px, 3.2vw, 48px);
    scrollbar-width: none;
}

.tm-chips::-webkit-scrollbar { display: none; }

.tm-chip {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    scroll-snap-align: start;
    padding: 0 16px;
    border-radius: 40px;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    color: var(--muted);
    background: var(--white);
    border: 1px solid #e8dfd2;
    cursor: pointer;
    transition: color .3s, border-color .3s, background .3s;
}

.tm-chip i { font-size: 13px; color: var(--gold); }
.tm-chip:hover { color: var(--gold-dark); border-color: var(--gold-light); }
.tm-chip.is-active { color: var(--gold-dark); border-color: var(--gold); background: #fbf3e4; }

.tm-grid { display: flex; align-items: flex-start; gap: clamp(18px, 1.8vw, 28px); }
.tm-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: clamp(18px, 1.8vw, 28px); }

/* review card */
.rv-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: clamp(22px, 2vw, 30px);
    border-radius: 22px;
    background: var(--white);
    border: 1px solid #efe8de;
    box-shadow: 0 10px 30px rgba(120, 90, 40, .07);
    transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s;
}

.rv-card:hover {
    border-color: rgba(212, 165, 72, .55);
    box-shadow: 0 22px 44px rgba(120, 90, 40, .15);
}

/* Google cards: thin four-colour cap */
.rv-card--google::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 28px;
    right: 28px;
    height: 3px;
    border-radius: 0 0 4px 4px;
    background: linear-gradient(90deg, #4285f4 0 25%, #ea4335 25% 50%, #fbbc05 50% 75%, #34a853 75%);
}

/* Website cards: warm cream with a large watermark quote */
.rv-card--website {
    background: linear-gradient(160deg, #fdf8f1 0%, #f8efe2 100%);
    border-color: #efe1cb;
    overflow: hidden;
}

.rv-card--website::after {
    content: "\201C";
    position: absolute;
    right: 18px;
    bottom: -46px;
    font-family: Georgia, serif;
    font-size: 180px;
    line-height: 1;
    color: rgba(180, 126, 18, .1);
    pointer-events: none;
    transition: transform .6s var(--ease);
}

.rv-card.is-new { animation: rvIn .7s var(--ease) var(--d, 0ms) both; }

@keyframes rvIn {
    from { opacity: 0; transform: translateY(26px) scale(.97); }
    to { opacity: 1; transform: none; }
}

.rv-card__head { display: flex; align-items: center; gap: 14px; }

.rv-avatar {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-family: var(--font-head);
    font-size: 19px;
    font-weight: 600;
    color: var(--white);
    background: var(--av, var(--gold));
}

.rv-avatar--gold { background: var(--gold-grad); box-shadow: 0 6px 14px rgba(180, 126, 18, .3); }

.rv-card__who { flex: 1; min-width: 0; }

.rv-card__who strong {
    display: block;
    font-family: var(--font-head);
    font-size: 16px;
    font-weight: 600;
    color: var(--navy);
}

.rv-card__who small { display: block; font-size: 13px; color: var(--muted); }

.rv-card__src { width: 24px; height: 24px; object-fit: contain; flex: 0 0 auto; }

.rv-card__rating {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 16px 0 10px;
}

.rv-stars { display: inline-flex; gap: 3px; font-size: 14px; color: #f4b400; }
.rv-stars .fa-regular { color: #d9cdb9; }
.rv-card__rating time { font-size: 13px; color: var(--muted); }

.rv-card__title { margin-bottom: 8px; font-size: 18px; font-weight: 600; line-height: 1.35; color: var(--navy); }

.rv-card__text {
    position: relative;
    max-height: 9.6em;
    overflow: hidden;
    font-size: 15.5px;
    line-height: 1.75;
    color: #3a3c45;
}

.rv-card__text::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 2.4em;
    background: linear-gradient(rgba(255, 255, 255, 0), var(--white));
}

.rv-card--website .rv-card__text::after { background: linear-gradient(rgba(249, 241, 230, 0), #f9f1e6); }

.rv-card__text.is-open { max-height: none; }
.rv-card__text.is-open::after { display: none; }

.rv-card__more {
    align-self: flex-start;
    margin-top: 6px;
    padding: 0;
    border: 0;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 700;
    color: var(--gold-dark);
    background: none;
    cursor: pointer;
}

.rv-card__more i { margin-left: 4px; font-size: 11px; }
.rv-card__more:hover { color: var(--navy); }

.rv-reply {
    display: flex;
    gap: 12px;
    margin-top: 16px;
    padding: 14px 16px;
    border-radius: 14px;
    border-left: 3px solid var(--gold);
    background: #f8f4ee;
}

.rv-reply img { width: 26px; height: 26px; object-fit: contain; flex: 0 0 auto; }
.rv-reply strong { display: block; margin-bottom: 2px; font-size: 13px; color: var(--navy); }
.rv-reply p { font-size: 14px; line-height: 1.6; color: var(--muted); }

.rv-card__foot {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid #efe8de;
}

.rv-card--website .rv-card__foot { border-color: #ead9bf; }

.rv-tag {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--gold-dark);
    background: rgba(180, 126, 18, .1);
}

.rv-origin { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.rv-origin i { color: #34a853; }

.tm-empty { padding: 40px 0; text-align: center; color: var(--muted); }
.tm-empty a { color: var(--gold-dark); font-weight: 700; }

.tm-more { margin-top: clamp(30px, 3vw, 46px); text-align: center; }
.tm-more[hidden] { display: none; }
.tm-more .btn:hover i { transform: translateY(3px); }

/* ---------- Guest story ---------- */
.tm-story { padding: clamp(30px, 3vw, 50px) 0 clamp(56px, 5.5vw, 90px); }

.tm-story__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    gap: clamp(30px, 5vw, 80px);
}

.tm-story__media { position: relative; max-width: 640px; }

.tm-story__media img {
    width: 100%;
    aspect-ratio: 5 / 4;
    object-fit: cover;
    border-radius: var(--radius-lg) 18px var(--radius-lg) 18px;
    box-shadow: var(--shadow-card);
}

/* rotating "Guest Story" seal */
.tm-seal {
    position: absolute;
    right: -8px;
    bottom: -18px;
    width: 92px;
    height: 92px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--navy);
    box-shadow: 0 16px 34px rgba(15, 20, 40, .3);
}

.tm-seal svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    animation: sealSpin 18s linear infinite;
}

.tm-seal text {
    font-family: var(--font-body);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 3.2px;
    fill: var(--gold-light);
}

.tm-seal i { font-size: clamp(22px, 1.8vw, 28px); color: var(--gold-light); animation: floatBadge 2.4s ease-in-out infinite; }

@keyframes sealSpin { to { transform: rotate(360deg); } }

.tm-story__mark {
    display: block;
    height: 48px;
    margin-top: 6px;
    font-family: Georgia, serif;
    font-size: 96px;
    line-height: 1;
    color: var(--gold);
}

.tm-story__quote {
    margin: 0;
    font-family: var(--font-head);
    font-size: clamp(21px, 1.85vw, 30px);
    font-weight: 400;
    line-height: 1.5;
    color: var(--navy);
}

.tm-story__who { margin-top: 22px; padding-left: 18px; border-left: 3px solid var(--gold); }
.tm-story__who strong { display: block; font-family: var(--font-head); font-size: 18px; font-weight: 600; color: var(--navy); }
.tm-story__who span { font-size: 14.5px; color: var(--muted); }

/* 2 x 2 on phones: "FUNCTIONS" is too wide for a quarter of a 320px screen */
.tm-story__facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: clamp(22px, 2.2vw, 32px) 0 clamp(24px, 2.4vw, 34px);
}

.tm-story__facts li {
    min-width: 0;
    padding: 10px 8px;
    border-radius: 16px;
    text-align: center;
    background: var(--cream);
    border: 1px solid #efe4d4;
}

.tm-story__facts strong { display: block; font-family: var(--font-head); font-size: 26px; font-weight: 500; line-height: 1.2; color: var(--gold-dark); }
.tm-story__facts span { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }

/* ---------- Write a review ---------- */
.tm-write {
    padding: clamp(56px, 5.5vw, 90px) 0;
    background: linear-gradient(180deg, var(--cream), var(--white) 85%);
}

.tm-write__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(20px, 2.4vw, 36px);
    align-items: stretch;
}

.tm-google-cta {
    position: relative;
    overflow: hidden;
    padding: 28px 22px;
    border-radius: 24px;
    color: var(--white);
    background:
        radial-gradient(circle at 100% 0%, rgba(212, 165, 72, .25), transparent 40%),
        var(--navy);
    isolation: isolate;
}

.tm-google-cta .g-logo--xl { margin-bottom: 26px; }
.tm-google-cta .eyebrow { color: var(--gold-light); }
.tm-google-cta h2 { font-size: clamp(26px, 2.3vw, 38px); line-height: 1.2; color: var(--white); }
.tm-google-cta > p { margin: 14px 0 24px; font-size: 16px; color: rgba(255, 255, 255, .72); }

.tm-steps { display: grid; gap: 12px; margin: 0 0 30px; padding: 0; list-style: none; }
.tm-steps li { display: flex; align-items: center; gap: 14px; font-size: 15px; color: rgba(255, 255, 255, .88); }

.tm-steps span {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 50%;
    font-size: 13px;
    font-weight: 700;
    color: var(--gold-light);
    border: 1.5px solid rgba(212, 165, 72, .5);
}

.tm-google-cta__deco {
    position: absolute;
    right: -30px;
    bottom: -40px;
    z-index: -1;
    font-size: 220px;
    line-height: 1;
    color: rgba(212, 165, 72, .08);
    transform: rotate(-14deg);
    transition: transform 1.2s var(--ease);
}

.tm-google-cta:hover .tm-google-cta__deco { transform: rotate(10deg) scale(1.06); }

/* full-width buttons on phones; the labels are wider than a 320px card */
.tm-google-cta .btn,
.tm-form > .btn { width: 100%; height: auto; min-height: 50px; padding: 12px 20px; white-space: normal; }

/* form */
.tm-form {
    position: relative;
    display: grid;
    gap: 18px;
    padding: 24px 18px;
    border-radius: 24px;
    background: var(--white);
    border: 1px solid #efe8de;
    box-shadow: 0 16px 40px rgba(120, 90, 40, .1);
}

.tm-form__head .eyebrow { margin-bottom: 8px; }
.tm-form__head h2 { font-size: clamp(24px, 2vw, 32px); }

.tm-rate {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin: 0;
    padding: 14px 18px;
    border: 1px dashed #e3d4bc;
    border-radius: 16px;
    background: #fdfaf5;
}

.tm-rate legend { float: left; margin-right: 6px; padding: 0; font-size: 14px; font-weight: 700; color: var(--navy); }

/* inputs run 5 -> 1, reversed visually so hovering a star lights the ones before it */
.tm-rate__stars { display: inline-flex; flex-direction: row-reverse; gap: 0; }
.tm-rate__stars input { position: absolute; opacity: 0; pointer-events: none; }

.tm-rate__stars label {
    padding: 6px 3px;
    font-size: 28px;
    line-height: 1;
    color: #e2d8c8;
    cursor: pointer;
    transition: color .2s, transform .3s var(--ease);
}

.tm-rate__stars label:hover,
.tm-rate__stars label:hover ~ label,
.tm-rate__stars input:checked ~ label { color: #f4b400; }

.tm-rate__stars label:hover { transform: scale(1.2) rotate(-8deg); }
.tm-rate__stars input:focus-visible + label { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }

.tm-rate__word { font-size: 14px; font-weight: 600; color: var(--muted); }
.tm-rate__word.is-set { color: var(--gold-dark); }

.tm-form__row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }

.tm-field { position: relative; display: grid; gap: 6px; }
.tm-field > span { font-size: 14px; font-weight: 700; color: var(--navy); }
.tm-field > span small { font-weight: 500; color: var(--muted); }

.tm-field input,
.tm-field select,
.tm-field textarea {
    width: 100%;
    padding: 13px 16px;
    border: 1px solid #e6ddd0;
    border-radius: 12px;
    font-family: var(--font-body);
    font-size: 16px; /* below 16px iOS Safari zooms in on focus */
    color: var(--text);
    background: #fdfbf8;
    transition: border-color .3s, box-shadow .3s, background .3s;
}

.tm-field textarea { resize: vertical; min-height: 120px; }

.tm-field input:focus,
.tm-field select:focus,
.tm-field textarea:focus {
    outline: none;
    border-color: var(--gold);
    background: var(--white);
    box-shadow: 0 0 0 4px rgba(212, 165, 72, .16);
}

.was-checked .tm-field :invalid { border-color: #d93025; }

.tm-field__count { justify-self: end; font-size: 12px; color: var(--muted); }

.tm-check { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--muted); cursor: pointer; }
.tm-check input { margin-top: 4px; width: 17px; height: 17px; accent-color: var(--gold); flex: 0 0 auto; }

.tm-form__error {
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 14px;
    color: #a3261c;
    background: #fdecea;
}

.tm-form__error[hidden] { display: none; }

.tm-form__done {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px;
    text-align: center;
    border-radius: inherit;
    background: var(--white);
    animation: rvIn .6s var(--ease) both;
}

.tm-form__done[hidden] { display: none; }

.tm-form__done-icon {
    width: 76px;
    height: 76px;
    display: grid;
    place-items: center;
    margin-bottom: 18px;
    border-radius: 50%;
    font-size: 30px;
    color: var(--white);
    background: var(--gold-grad);
    box-shadow: 0 12px 28px rgba(180, 126, 18, .35);
}

.tm-form__done h3 { font-size: 26px; }
.tm-form__done p { max-width: 360px; margin-top: 8px; color: var(--muted); }

/* ---------- Testimonials responsive (mobile first) ---------- */
/* the one max-width rule: phones get a stronger wash over the shared banner, since the
   photo sits right behind the heading at this width */
@media (max-width: 575px) {
    .tm-hero.page-hero::before { background: linear-gradient(180deg, rgba(253, 244, 238, .9) 0%, rgba(253, 244, 238, .78) 70%, rgba(253, 244, 238, .4)); }
}

@media (min-width: 420px) {
    .tm-tab__count { display: inline-block; }
}

@media (min-width: 480px) {
    .tm-story__facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 576px) {
    .tm-hero { height: clamp(360px, 30vw, 560px); }

    .tm-hero-badges { display: flex; flex-wrap: wrap; gap: 12px; max-width: none; }
    .tm-hero-badge { gap: 12px; padding: 8px 20px 8px 8px; }
    .tm-hero-badge .g-logo,
    .tm-hero-badge__emblem { width: 40px; height: 40px; padding: 9px; }
    .tm-hero-badge strong { font-size: 20px; }
    .tm-hero-badge small { font-size: 11.5px; letter-spacing: .12em; }

    .tm-panel { grid-template-columns: 1fr 1fr; margin-top: clamp(-80px, -5vw, -40px); border-radius: 30px; }
    .tm-breakdown { grid-column: 1 / -1; }
    .tm-score--google { border-bottom: 0; border-right: 1px solid rgba(255, 255, 255, .1); }

    .tm-pill q { font-size: 15.5px; }

    .tm-tabs { display: inline-flex; width: auto; }
    .tm-tab { flex: none; gap: 9px; padding: 0 22px; font-size: 15px; }
    .tm-tab > i { display: inline-block; }

    .tm-chips {
        align-self: auto;
        flex-wrap: wrap;
        justify-content: center;
        margin: 0;
        padding: 0;
        overflow: visible;
    }

    .tm-seal {
        right: clamp(-18px, -1.4vw, -10px);
        bottom: clamp(-30px, -2.2vw, -18px);
        width: clamp(110px, 9vw, 140px);
        height: clamp(110px, 9vw, 140px);
    }

    .tm-story__mark { height: 60px; font-size: 120px; }
    .tm-story__facts li { padding: 12px 16px; }

    .tm-google-cta { padding: clamp(30px, 3.2vw, 50px); border-radius: 28px; }
    .tm-form { padding: clamp(26px, 3vw, 46px); border-radius: 28px; }
    .tm-form__row { grid-template-columns: 1fr 1fr; }

    .tm-google-cta .btn,
    .tm-form > .btn { width: auto; height: 50px; min-height: 0; padding: 0 30px; white-space: nowrap; }
    .tm-form > .btn { justify-self: start; }
}

@media (min-width: 992px) {
    .tm-story__grid { grid-template-columns: 1.05fr 1fr; }
    .tm-story__media { max-width: none; }

    .tm-story__facts { display: flex; flex-wrap: wrap; }
    .tm-story__facts li { min-width: 92px; }

    .tm-write__grid { grid-template-columns: .85fr 1.15fr; }
}

@media (min-width: 1200px) {
    .tm-panel { grid-template-columns: 1fr 1.35fr 1fr; }
    .tm-breakdown { grid-column: auto; order: 0; border-top: 0; border-inline: 1px solid rgba(255, 255, 255, .1); }
    .tm-score--google { border-right: 0; }
}

/* lift effects only where a real pointer hovers, so they don't stick after a tap */
@media (hover: hover) {
    .tm-hero-badge:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(15, 20, 40, .16); }
    .tm-love__list li:hover { transform: translateY(-3px); }
    .rv-card:hover { transform: translateY(-6px); }
    .rv-card--website:hover::after { transform: translateY(-10px) rotate(-6deg); }
}

@media (prefers-reduced-motion: reduce) {
    .tm-ribbon__track,
    .tm-seal svg,
    .tm-panel__glow { animation: none; }
    .tm-ribbon { overflow-x: auto; }
}

/* ==========================================================================
   Floating WhatsApp + Call (common)
   ========================================================================== */
.float-contact {
    position: fixed;
    right: clamp(16px, 2vw, 28px);
    bottom: calc(clamp(16px, 2vw, 28px) + 62px);
    z-index: 95;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 14px;
}

.float-btn {
    position: relative;
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: 24px;
    color: var(--white);
    box-shadow: 0 10px 24px rgba(15, 20, 40, .22);
    transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}

.float-btn--wa { background: #25d366; font-size: 28px; }
.float-btn--call { background: var(--gold-grad); font-size: 20px; }

/* soft pulse ring */
.float-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: 50%;
    background: inherit;
    animation: floatPulse 2.2s ease-out infinite;
}

.float-btn--call::before { animation-delay: 1.1s; }

@keyframes floatPulse {
    0% { transform: scale(1); opacity: .55; }
    100% { transform: scale(1.7); opacity: 0; }
}

.float-btn--call i { animation: phoneRing 2.4s ease-in-out infinite; }

@keyframes phoneRing {
    0%, 60%, 100% { transform: rotate(0); }
    65%, 75%, 85% { transform: rotate(-14deg); }
    70%, 80%, 90% { transform: rotate(14deg); }
}

/* label slides out to the left on hover */
.float-btn__label {
    position: absolute;
    right: calc(100% + 12px);
    top: 50%;
    padding: 8px 14px;
    border-radius: 8px;
    white-space: nowrap;
    font-family: var(--font-body);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--white);
    background: var(--navy);
    box-shadow: 0 8px 20px rgba(15, 20, 40, .2);
    opacity: 0;
    visibility: hidden;
    transform: translate(10px, -50%);
    transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
}

.float-btn__label::after {
    content: "";
    position: absolute;
    right: -5px;
    top: 50%;
    width: 10px;
    height: 10px;
    background: inherit;
    transform: translateY(-50%) rotate(45deg);
}

.float-btn:hover { transform: translateY(-3px) scale(1.06); box-shadow: 0 16px 30px rgba(15, 20, 40, .3); }

.float-btn:hover .float-btn__label {
    opacity: 1;
    visibility: visible;
    transform: translate(0, -50%);
}

@media (max-width: 575px) {
    .float-contact { gap: 12px; bottom: calc(16px + 56px); }
    .to-top { right: 17px; width: 46px; height: 46px; }
    .float-btn { width: 48px; height: 48px; }
    .float-btn--wa { font-size: 25px; }
    .float-btn--call { font-size: 18px; }
    .float-btn__label { display: none; }
}

/* ==========================================================================
   Video gallery page
   ========================================================================== */
body.vg-locked { overflow: hidden; }

/* ---------- Banner (dark, with a film-strip edge) ---------- */
.vg-hero { height: clamp(380px, 31vw, 580px); background: var(--navy); }
.vg-hero .page-hero__img { object-position: center 62%; }

.vg-hero.page-hero--photo::before {
    background:
        linear-gradient(90deg, rgba(15, 20, 40, .92) 0%, rgba(15, 20, 40, .66) 38%, rgba(15, 20, 40, .08) 74%),
        linear-gradient(0deg, rgba(15, 20, 40, .55), transparent 40%);
}

.vg-hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    height: 22px;
    background-color: rgba(8, 10, 22, .9);
    background-image: linear-gradient(90deg, transparent 14px, rgba(255, 255, 255, .22) 14px, rgba(255, 255, 255, .22) 26px, transparent 26px);
    background-size: 40px 8px;
    background-position: 0 center;
    background-repeat: repeat-x;
}

.vg-hero .page-hero__eyebrow { color: var(--gold-light); }
.vg-hero .page-hero__title { color: var(--white); }

.vg-hero__stats {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 30px;
    margin-top: clamp(18px, 1.8vw, 26px);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .78);
}

.vg-hero__stats li { display: flex; align-items: baseline; gap: 8px; }

.vg-hero__stats strong {
    font-family: var(--font-head);
    font-size: clamp(22px, 2vw, 30px);
    font-weight: 600;
    letter-spacing: 0;
    color: var(--white);
}

/* ---------- Shared bits ---------- */
.vg-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px 60px;
    margin-bottom: clamp(26px, 3vw, 44px);
}

.vg-head p {
    max-width: 430px;
    font-size: clamp(15px, 1.1vw, 17px);
    line-height: 1.75;
    color: var(--muted);
}

.vg-head--center { flex-direction: column; align-items: center; gap: 0; text-align: center; }

.vg-tag {
    display: inline-flex;
    align-items: center;
    height: 28px;
    padding: 0 12px;
    border-radius: 28px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--white);
    background: var(--gold-grad);
    box-shadow: 0 6px 16px rgba(180, 126, 18, .3);
}

.vg-meta,
.vg-lightbox__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    font-size: 13.5px;
    color: rgba(255, 255, 255, .82);
}

.vg-meta span,
.vg-lightbox__meta span { display: inline-flex; align-items: center; gap: 7px; }

.vg-meta i,
.vg-lightbox__meta i { font-size: 12px; color: var(--gold-light); }

/* play button with pulsing rings */
.vg-play {
    position: relative;
    width: 64px;
    height: 64px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: 18px;
    color: var(--white);
    background: rgba(255, 255, 255, .16);
    border: 1.5px solid rgba(255, 255, 255, .7);
    backdrop-filter: blur(6px);
    transition: transform .45s var(--ease), background .45s, border-color .45s, box-shadow .45s;
}

.vg-play i { margin-left: 3px; }

.vg-play::before,
.vg-play::after {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    border: 1.5px solid rgba(212, 165, 72, .85);
    opacity: 0;
    pointer-events: none;
}

.vg-play--xl {
    width: clamp(72px, 6.4vw, 96px);
    height: clamp(72px, 6.4vw, 96px);
    font-size: clamp(20px, 1.8vw, 28px);
    background: var(--gold-grad);
    border-color: transparent;
    box-shadow: 0 14px 34px rgba(180, 126, 18, .45);
}

.vg-play--xl::before { animation: playPulse 2.4s var(--ease) infinite; }
.vg-play--xl::after { animation: playPulse 2.4s var(--ease) 1.2s infinite; }

@keyframes playPulse {
    0% { transform: scale(1); opacity: .9; }
    100% { transform: scale(1.9); opacity: 0; }
}

.vg-card__time {
    position: absolute;
    top: 16px;
    right: 16px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--white);
    background: rgba(10, 13, 28, .6);
    backdrop-filter: blur(6px);
}

.vg-arrow {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, .3);
    background: rgba(255, 255, 255, .06);
    font-size: 16px;
    color: var(--white);
    cursor: pointer;
    transition: background .35s, border-color .35s, transform .35s var(--ease), opacity .35s;
}

.vg-arrow:hover:not(:disabled) { background: var(--gold-grad); border-color: transparent; transform: translateY(-2px); }
.vg-arrow:disabled,
.vg-arrow.swiper-button-disabled { opacity: .35; cursor: default; }

/* players fill whatever box they are mounted in */
.vg-stage__screen iframe,
.vg-stage__screen video,
.vg-lightbox__frame iframe,
.vg-lightbox__frame video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    background: #000;
}

/* "premiering soon" panel shown when a video has no source yet */
.vg-soon {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    overflow: hidden;
    text-align: center;
    color: var(--white);
    background: var(--navy);
    isolation: isolate;
}

.vg-soon__bg {
    position: absolute;
    inset: -24px;
    width: calc(100% + 48px);
    height: calc(100% + 48px);
    max-width: none;
    object-fit: cover;
    filter: blur(14px) brightness(.42) saturate(1.1);
    z-index: -1;
}

.vg-soon__body {
    max-width: 440px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    animation: cardIn .6s var(--ease) both;
}

.vg-soon__icon {
    width: 64px;
    height: 64px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: 24px;
    color: var(--gold-light);
    background: rgba(255, 255, 255, .1);
    border: 1.5px solid rgba(212, 165, 72, .5);
}

.vg-soon h3 { font-size: clamp(20px, 2vw, 28px); font-weight: 500; color: var(--white); }
.vg-soon p { font-size: 15px; line-height: 1.7; color: rgba(255, 255, 255, .8); }
.vg-soon .btn { margin-top: 6px; height: 46px; padding: 0 24px; font-size: 15px; }

/* ---------- Now showing ---------- */
.vg-theatre {
    padding: clamp(54px, 5.4vw, 96px) 0;
    background:
        radial-gradient(circle at 100% 0%, rgba(212, 165, 72, .14), transparent 40%),
        var(--cream);
}

.vg-theatre__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: clamp(18px, 2vw, 30px);
}

.vg-stage {
    align-self: start;
    border-radius: 26px;
    overflow: hidden;
    background: var(--navy);
    box-shadow: 0 30px 60px rgba(15, 20, 40, .28);
}

.vg-stage__screen {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #000;
}

.vg-stage__poster {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 6s linear;
}

.vg-stage__screen:hover .vg-stage__poster { transform: scale(1.06); }

.vg-stage.is-swapping .vg-stage__poster { animation: stageIn 1.1s var(--ease) backwards; }
.vg-stage.is-swapping .vg-stage__caption > * { animation: cardIn .7s var(--ease) backwards; }
.vg-stage.is-swapping .vg-stage__caption > :nth-child(2) { animation-delay: .08s; }
.vg-stage.is-swapping .vg-stage__caption > :nth-child(3) { animation-delay: .16s; }
.vg-stage.is-swapping .vg-stage__caption > :nth-child(4) { animation-delay: .24s; }

@keyframes stageIn {
    from { opacity: 0; transform: scale(1.1); }
    to { opacity: 1; transform: scale(1); }
}

.vg-stage__shade {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(0deg, rgba(10, 13, 28, .92) 0%, rgba(10, 13, 28, .45) 38%, rgba(10, 13, 28, 0) 66%),
        linear-gradient(90deg, rgba(10, 13, 28, .4), transparent 55%);
}

.vg-stage__play {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: grid;
    place-items: center;
    padding: 0 0 12%;
    border: 0;
    background: none;
    cursor: pointer;
}

.vg-stage__play:hover .vg-play--xl,
.vg-stage__play:focus-visible .vg-play--xl { transform: scale(1.1); }
.vg-stage__play:focus-visible { outline: 3px solid var(--gold-light); outline-offset: -6px; }

.vg-stage__caption {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 3;
    max-width: 720px;
    padding: clamp(20px, 2.6vw, 40px);
    color: var(--white);
    pointer-events: none;
}

.vg-stage__caption h3 {
    margin: 12px 0 8px;
    font-size: clamp(22px, 2.2vw, 36px);
    font-weight: 500;
    line-height: 1.2;
    color: var(--white);
}

.vg-stage__caption p {
    max-width: 560px;
    margin-bottom: 14px;
    font-size: 15.5px;
    line-height: 1.65;
    color: rgba(255, 255, 255, .8);
}

/* queue */
.vg-queue {
    display: flex;
    flex-direction: column;
    padding: 22px 16px;
    border-radius: 26px;
    background: var(--white);
    box-shadow: 0 16px 44px rgba(120, 90, 40, .12);
}

.vg-queue__label {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 8px 10px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--navy);
}

.vg-queue__label i { color: var(--gold); }

.vg-queue__list { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }

.vg-queue__item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 10px;
    border: 0;
    border-radius: 16px;
    background: transparent;
    font-family: var(--font-body);
    text-align: left;
    cursor: pointer;
    transition: background .35s, transform .35s var(--ease);
}

.vg-queue__item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 18%;
    bottom: 18%;
    width: 3px;
    border-radius: 3px;
    background: var(--gold-grad);
    transform: scaleY(0);
    transition: transform .4s var(--ease);
}

.vg-queue__item:hover { background: #fbf6ee; transform: translateX(4px); }
.vg-queue__item:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.vg-queue__item.is-active { background: var(--cream); }
.vg-queue__item.is-active::before { transform: scaleY(1); }

.vg-queue__thumb {
    position: relative;
    flex: 0 0 116px;
    aspect-ratio: 16 / 10;
    border-radius: 12px;
    overflow: hidden;
}

.vg-queue__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.vg-queue__item:hover .vg-queue__thumb img { transform: scale(1.08); }

.vg-queue__time {
    position: absolute;
    right: 6px;
    bottom: 6px;
    padding: 2px 7px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    color: var(--white);
    background: rgba(10, 13, 28, .75);
}

.vg-queue__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }

.vg-queue__text small {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--gold);
}

.vg-queue__text strong {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-family: var(--font-head);
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--navy);
}

/* "now playing" equaliser on the active item */
.vg-eq { display: none; align-items: flex-end; gap: 2px; height: 12px; margin-top: 4px; }
.vg-queue__item.is-active .vg-eq { display: inline-flex; }

.vg-eq i {
    width: 3px;
    height: 30%;
    border-radius: 2px;
    background: var(--gold);
    animation: eqBar 1s ease-in-out infinite;
}

.vg-eq i:nth-child(2) { animation-delay: -.4s; }
.vg-eq i:nth-child(3) { animation-delay: -.7s; }

@keyframes eqBar { 0%, 100% { height: 30%; } 50% { height: 100%; } }

/* ---------- Film library ---------- */
.vg-library { padding: clamp(54px, 5.4vw, 96px) 0 clamp(44px, 4.4vw, 70px); }

.vg-toolbar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    margin-bottom: clamp(22px, 2.2vw, 32px);
    padding-bottom: 18px;
    border-bottom: 1px solid var(--line);
}

.vg-filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }

.vg-count { font-size: 14.5px; color: var(--muted); white-space: nowrap; }
.vg-count strong { color: var(--navy); }

.vg-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(16px, 1.8vw, 26px);
}

.vg-card {
    opacity: 0;
    animation: cardIn .7s var(--ease) forwards;
    animation-delay: calc(var(--i, 0) * 70ms);
}

.vg-card.is-lead { grid-column: span 2; grid-row: span 2; }

.vg-card__btn {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    padding: 0;
    border: 0;
    border-radius: 22px;
    overflow: hidden;
    background: var(--navy);
    font-family: var(--font-body);
    text-align: left;
    cursor: pointer;
    isolation: isolate;
    box-shadow: var(--shadow-card);
    transition: transform .55s var(--ease), box-shadow .55s var(--ease);
}

.vg-card.is-lead .vg-card__btn { height: 100%; aspect-ratio: auto; }

/* gold underline that draws in on hover */
.vg-card__btn::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 3px;
    background: var(--gold-grad);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .6s var(--ease);
}

.vg-card__btn:hover { transform: translateY(-6px); box-shadow: var(--shadow-hover); }
.vg-card__btn:hover::after { transform: scaleX(1); }
.vg-card__btn:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }

.vg-card__img {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.4s var(--ease);
}

.vg-card__btn:hover .vg-card__img { transform: scale(1.08); }

.vg-card__shade {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(0deg, rgba(10, 13, 28, .9) 0%, rgba(10, 13, 28, .35) 45%, rgba(10, 13, 28, .05) 72%);
}

.vg-card__cat { position: absolute; top: 16px; left: 16px; }

.vg-card__btn .vg-play {
    position: absolute;
    left: 50%;
    top: 42%;
    margin: -32px 0 0 -32px;
}

.vg-card.is-lead .vg-play {
    width: 84px;
    height: 84px;
    margin: -42px 0 0 -42px;
    font-size: 24px;
}

.vg-card__btn:hover .vg-play,
.vg-card__btn:focus-visible .vg-play,
.vg-reel__btn:hover .vg-play,
.vg-reel__btn:focus-visible .vg-play {
    transform: scale(1.12);
    background: var(--gold-grad);
    border-color: transparent;
    box-shadow: 0 10px 30px rgba(180, 126, 18, .5);
}

.vg-card__btn:hover .vg-play::before,
.vg-reel__btn:hover .vg-play::before { animation: playPulse 1.6s var(--ease) infinite; }

.vg-card__body {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 20px 22px;
}

.vg-card__title {
    font-family: var(--font-head);
    font-size: clamp(17px, 1.3vw, 20px);
    font-weight: 600;
    line-height: 1.3;
    color: var(--white);
}

.vg-card.is-lead .vg-card__body { padding: clamp(24px, 2.6vw, 40px); }
.vg-card.is-lead .vg-card__title { font-size: clamp(22px, 2.2vw, 34px); font-weight: 500; }

.vg-more { display: flex; justify-content: center; margin-top: clamp(30px, 3.4vw, 50px); }
.vg-more .btn[hidden] { display: none; }

.vg-empty {
    max-width: 460px;
    margin: 0 auto;
    padding: 46px 28px;
    text-align: center;
    border-radius: 22px;
    background: var(--cream);
}

.vg-empty[hidden] { display: none; }

.vg-empty__icon {
    width: 70px;
    height: 70px;
    display: inline-grid;
    place-items: center;
    margin-bottom: 16px;
    border-radius: 50%;
    font-size: 28px;
    color: var(--gold);
    background: var(--white);
    box-shadow: 0 8px 22px rgba(120, 90, 40, .12);
}

.vg-empty h3 { margin-bottom: 6px; font-size: 22px; font-weight: 500; }
.vg-empty p { color: var(--muted); }

.vg-noscript { padding: 20px; text-align: center; border-radius: 16px; background: var(--cream); }

/* ---------- Reels ---------- */
.vg-reels {
    position: relative;
    overflow: hidden;
    padding: clamp(56px, 5.4vw, 96px) 0;
    color: var(--white);
    background:
        radial-gradient(circle at 0% 0%, rgba(212, 165, 72, .2), transparent 38%),
        radial-gradient(circle at 100% 100%, rgba(212, 165, 72, .14), transparent 36%),
        var(--navy);
}

.vg-reels[hidden] { display: none; }

.vg-reels__glow {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(110deg, transparent 35%, rgba(212, 165, 72, .08) 50%, transparent 65%);
    background-size: 250% 100%;
    animation: panelGlow 9s linear infinite;
}

.vg-reels .section-title { color: var(--white); }

.vg-reels__head {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: clamp(26px, 3vw, 44px);
}

.vg-reels__nav { display: flex; gap: 12px; }

/* slides bleed off the right edge, clipped on the left */
.vg-reels-swiper { overflow: visible; clip-path: inset(-40px -100vw -40px 0); }

.vg-reel { width: clamp(220px, 21vw, 280px); }

.vg-reel__btn {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 9 / 16;
    padding: 0;
    border: 0;
    border-radius: 22px;
    overflow: hidden;
    background: #000;
    font-family: var(--font-body);
    text-align: left;
    cursor: pointer;
    isolation: isolate;
    box-shadow: 0 20px 40px rgba(0, 0, 0, .35);
    transition: transform .55s var(--ease);
}

.vg-reel__btn::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: inherit;
    border: 2px solid transparent;
    pointer-events: none;
    transition: border-color .4s;
}

.vg-reel__btn:hover { transform: translateY(-8px); }
.vg-reel__btn:hover::before,
.vg-reel__btn:focus-visible::before { border-color: var(--gold-light); }
.vg-reel__btn:focus-visible { outline: none; }

.vg-reel__btn img {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.4s var(--ease);
}

.vg-reel__btn:hover img { transform: scale(1.08); }

.vg-reel__shade {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(0deg, rgba(10, 13, 28, .9) 0%, rgba(10, 13, 28, .2) 45%, rgba(10, 13, 28, .35) 100%);
}

.vg-reel__badge {
    position: absolute;
    top: 14px;
    left: 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--white);
    background: rgba(255, 255, 255, .16);
    backdrop-filter: blur(8px);
}

.vg-reel__badge i { color: var(--gold-light); }

.vg-reel .vg-card__time { top: 14px; right: 14px; }

.vg-reel .vg-play {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 58px;
    height: 58px;
    margin: -29px 0 0 -29px;
    font-size: 16px;
}

.vg-reel__body {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 18px;
}

.vg-reel__body strong {
    font-family: var(--font-head);
    font-size: 17px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--white);
}

.vg-reel__body small { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: rgba(255, 255, 255, .8); }
.vg-reel__body small i { color: var(--gold-light); }

.vg-reels__follow {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px 16px;
    margin-top: clamp(32px, 3.4vw, 50px);
    font-size: 15px;
    color: rgba(255, 255, 255, .75);
}

.vg-social {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 42px;
    padding: 0 18px;
    border-radius: 42px;
    border: 1.5px solid rgba(255, 255, 255, .25);
    font-size: 14.5px;
    font-weight: 600;
    color: var(--white);
    transition: border-color .35s, background .35s, transform .35s var(--ease);
}

.vg-social:hover { border-color: var(--gold-light); background: rgba(212, 165, 72, .15); transform: translateY(-2px); }
.vg-social i { color: var(--gold-light); }

/* ---------- Lightbox ---------- */
.vg-lightbox {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: grid;
    place-items: center;
    padding: clamp(16px, 3vw, 40px);
}

.vg-lightbox[hidden] { display: none; }

.vg-lightbox__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(8, 10, 22, .9);
    backdrop-filter: blur(8px);
    opacity: 0;
    transition: opacity .4s;
}

.vg-lightbox__dialog {
    position: relative;
    width: min(1100px, 100%, calc((100vh - 230px) * 16 / 9));
    min-width: min(320px, 100%);
    opacity: 0;
    transform: translateY(24px) scale(.97);
    transition: opacity .45s var(--ease), transform .55s var(--ease);
}

.vg-lightbox.is-open .vg-lightbox__backdrop { opacity: 1; }
.vg-lightbox.is-open .vg-lightbox__dialog { opacity: 1; transform: none; }

.vg-lightbox.is-portrait .vg-lightbox__dialog { width: min(420px, 100%, calc((100vh - 250px) * 9 / 16)); }

.vg-lightbox__frame {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: 20px;
    overflow: hidden;
    background: #000;
    box-shadow: 0 40px 80px rgba(0, 0, 0, .5);
}

.vg-lightbox.is-portrait .vg-lightbox__frame { aspect-ratio: 9 / 16; }

.vg-lightbox__close {
    position: absolute;
    top: -58px;
    right: 0;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, .3);
    background: rgba(255, 255, 255, .08);
    font-size: 18px;
    color: var(--white);
    cursor: pointer;
    transition: background .35s, border-color .35s, transform .45s var(--ease);
}

.vg-lightbox__close:hover { background: var(--gold-grad); border-color: transparent; transform: rotate(90deg); }

.vg-lightbox__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px 24px;
    padding-top: 18px;
    color: var(--white);
}

.vg-lightbox__info { min-width: 0; flex: 1 1 260px; }

.vg-lightbox__cat {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--gold-light);
}

.vg-lightbox__title {
    margin: 4px 0 6px;
    font-size: clamp(18px, 1.6vw, 24px);
    font-weight: 500;
    line-height: 1.3;
    color: var(--white);
}

.vg-lightbox__nav { display: flex; align-items: center; gap: 14px; }

.vg-lightbox__counter {
    min-width: 52px;
    font-family: var(--font-head);
    font-size: 14px;
    text-align: center;
    color: rgba(255, 255, 255, .75);
}

/* ---------- Video gallery responsive ---------- */
@media (max-width: 1199px) {
    .vg-theatre__grid { grid-template-columns: minmax(0, 1fr) 300px; }
    .vg-queue__thumb { flex-basis: 96px; }
}

/* the queue is taller than a 16:9 stage here, so let the stage fill the row */
@media (min-width: 992px) and (max-width: 1199px) {
    .vg-stage { align-self: stretch; }
    .vg-stage__screen { height: 100%; aspect-ratio: auto; }
}

@media (max-width: 991px) {
    .vg-head { flex-direction: column; align-items: flex-start; }
    .vg-head--center { align-items: center; }
    .vg-head .section-title { text-wrap: balance; }

    .vg-theatre__grid { grid-template-columns: 1fr; }
    .vg-queue__list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

    .vg-toolbar { flex-direction: column-reverse; align-items: stretch; }
    .vg-filters { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; padding: 4px 4px 8px; margin: -4px -4px 0; scrollbar-width: none; }
    .vg-filters::-webkit-scrollbar { display: none; }
    .vg-filters .chip { flex: 0 0 auto; }

    .vg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .vg-card.is-lead { grid-row: span 1; }
    .vg-card.is-lead .vg-card__btn { height: auto; aspect-ratio: 16 / 9; }
}

/* two columns under a full-width lead: an even count leaves the last card alone, so widen it too */
@media (min-width: 641px) and (max-width: 991px) {
    .vg-card.is-lead ~ .vg-card:last-child:nth-child(even) { grid-column: 1 / -1; }
    .vg-card.is-lead ~ .vg-card:last-child:nth-child(even) .vg-card__btn { aspect-ratio: 16 / 9; }
}

@media (max-width: 640px) {
    .vg-queue__list { grid-template-columns: 1fr; }

    /* play button sits in the clear sky area, above the caption */
    .vg-stage__screen { aspect-ratio: 4 / 5; }
    .vg-stage__screen.is-playing { aspect-ratio: 16 / 9; }
    .vg-stage__play { place-items: start center; padding: 16% 0 0; }
    .vg-stage__caption p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

    .vg-grid { grid-template-columns: 1fr; }
    .vg-card.is-lead { grid-column: auto; }
    .vg-card.is-lead .vg-card__btn { aspect-ratio: 4 / 3; }

    /* smaller play button, raised, so it clears two-line titles */
    .vg-card__btn .vg-play,
    .vg-card.is-lead .vg-play { top: 36%; width: 54px; height: 54px; margin: -27px 0 0 -27px; font-size: 16px; }
    .vg-card__body,
    .vg-card.is-lead .vg-card__body { gap: 6px; padding: 16px 18px; }
    .vg-card.is-lead .vg-card__title { font-size: clamp(17px, 1.3vw, 20px); font-weight: 600; }

    .vg-reel { width: 62vw; }
    .vg-arrow { width: 44px; height: 44px; font-size: 14px; }

    .vg-lightbox__close { top: -54px; }
    .vg-lightbox.is-portrait .vg-lightbox__dialog { min-width: 0; width: min(420px, 100%, calc((100vh - 330px) * 9 / 16)); }
    .vg-lightbox.is-portrait .vg-lightbox__dialog { width: min(420px, 100%, calc((100dvh - 330px) * 9 / 16)); }
}

@media (max-width: 400px) {
    .vg-stage__caption p { display: none; }
}

/* phones held sideways: shrink the player to the screen height, close button beside it */
@media (max-height: 500px) and (orientation: landscape) {
    .vg-lightbox { padding: 12px 70px 12px 12px; }
    .vg-lightbox__dialog { width: min(1100px, 100%, calc((100vh - 90px) * 16 / 9)); min-width: 0; }
    .vg-lightbox__dialog { width: min(1100px, 100%, calc((100dvh - 90px) * 16 / 9)); }
    .vg-lightbox__close { top: 0; right: -56px; }
    .vg-lightbox__close:hover { transform: none; }

    .vg-lightbox__bar { flex-wrap: nowrap; gap: 12px; padding-top: 10px; }
    .vg-lightbox__info { flex: 1 1 auto; }
    .vg-lightbox__cat,
    .vg-lightbox__meta { display: none; }
    .vg-lightbox__title { margin: 0; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .vg-lightbox__nav { gap: 8px; }
    .vg-lightbox__nav .vg-arrow { width: 40px; height: 40px; font-size: 14px; }

    /* reels: tall frame on the left, details stacked beside it */
    .vg-lightbox.is-portrait .vg-lightbox__dialog { display: flex; align-items: flex-end; gap: 20px; width: auto; }
    .vg-lightbox.is-portrait .vg-lightbox__frame { flex: none; height: calc(100vh - 24px); height: calc(100dvh - 24px); }
    .vg-lightbox.is-portrait .vg-lightbox__bar { flex-direction: column; align-items: flex-start; width: 220px; }
    .vg-lightbox.is-portrait .vg-lightbox__info { flex: none; width: 100%; }
    .vg-lightbox.is-portrait .vg-lightbox__title { white-space: normal; }
    .vg-lightbox.is-portrait .vg-soon__body { padding: 14px; gap: 10px; }
    .vg-lightbox.is-portrait .vg-soon p { display: none; }
    .vg-lightbox.is-portrait .vg-soon .btn { height: auto; min-height: 40px; padding: 8px 14px; font-size: 13.5px; line-height: 1.3; white-space: normal; }
}

@media (max-width: 575px) {
    .vg-hero { height: 440px; }
    .vg-hero.page-hero--photo::before { background: linear-gradient(180deg, rgba(15, 20, 40, .55) 0%, rgba(15, 20, 40, .85) 100%); }
    .vg-hero__stats { gap: 8px 20px; font-size: 11.5px; }
    .vg-head .section-title br { display: none; }

    .vg-soon p { display: none; }
    .vg-soon__icon { width: 50px; height: 50px; font-size: 20px; }
}

@media (prefers-reduced-motion: reduce) {
    .vg-play::before,
    .vg-play::after,
    .vg-eq i,
    .vg-reels__glow { animation: none !important; }
}

/* ==========================================================================
   Contact page
   ========================================================================== */
.ct-hero .page-hero__img { object-position: 70% center; }

/* ---------- Ways to reach us ---------- */
.ct-ways {
    position: relative;
    z-index: 3;
    margin-top: clamp(-70px, -4.4vw, -40px);
}

.ct-ways__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(14px, 1.6vw, 24px);
}

.ct-way {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: clamp(24px, 2.2vw, 32px) clamp(20px, 1.8vw, 28px);
    border-radius: var(--radius);
    background: var(--white);
    border: 1px solid #f0e9df;
    box-shadow: 0 16px 40px rgba(120, 90, 40, .1);
    overflow: hidden;
    isolation: isolate;
    transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}

/* gold bar grows along the top on hover */
.ct-way::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 3px;
    background: var(--gold-grad);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .55s var(--ease);
}

.ct-way:hover { transform: translateY(-6px); box-shadow: 0 24px 50px rgba(120, 90, 40, .18); }
.ct-way:hover::before { transform: scaleX(1); }

.ct-way__icon {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    margin-bottom: 18px;
    border-radius: 16px;
    font-size: 23px;
    color: var(--gold);
    background: #fbf3e6;
    transition: color .45s var(--ease), background .45s var(--ease), transform .45s var(--ease);
}

.ct-way:hover .ct-way__icon { color: var(--white); background: var(--gold-grad); transform: rotate(-8deg); }

.ct-way--wa .ct-way__icon { color: #1fa855; background: #e8f8ee; font-size: 27px; }
.ct-way--wa:hover .ct-way__icon { background: #25d366; }

.ct-way__title { font-size: clamp(18px, 1.35vw, 21px); font-weight: 500; margin-bottom: 8px; }

.ct-way__value {
    display: grid;
    gap: 2px;
    flex: 1;
    align-content: start;
    font-size: 15px;
    line-height: 1.5;
    color: var(--muted);
}

.ct-way__value a { justify-self: start; font-weight: 600; color: var(--navy); overflow-wrap: anywhere; transition: color .3s; }
.ct-way__value a:hover { color: var(--gold); }
.ct-way__strong { font-weight: 600; color: var(--navy); }

.ct-way__link {
    display: inline-flex;
    align-self: flex-start;
    justify-self: start;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    padding-block: 4px;
    font-size: 14px;
    font-weight: 700;
    color: var(--gold-dark);
}

.ct-way__link i { transition: transform .35s var(--ease); }
.ct-way__link:hover i { transform: translateX(5px); }

/* ---------- Enquiry ---------- */
.ct-main {
    scroll-margin-top: calc(var(--header-h) - 30px);
    padding: clamp(50px, 5vw, 86px) 0 clamp(50px, 5vw, 80px);
    background: linear-gradient(180deg, var(--white) 0%, #fcf9f6 50%, var(--white) 100%);
}

.ct-main__grid {
    display: grid;
    grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
    gap: clamp(20px, 2.4vw, 36px);
    align-items: stretch;
}

.ct-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: clamp(28px, 3vw, 46px);
    border-radius: 28px;
    color: rgba(255, 255, 255, .75);
    background:
        radial-gradient(circle at 100% 0%, rgba(212, 165, 72, .26), transparent 42%),
        radial-gradient(circle at 0% 100%, rgba(212, 165, 72, .1), transparent 40%),
        var(--navy);
    overflow: hidden;
    isolation: isolate;
}

.ct-panel .eyebrow { color: var(--gold-light); }
.ct-panel h2 { font-size: clamp(26px, 2.3vw, 38px); line-height: 1.2; color: var(--white); }
.ct-panel h3 { font-size: 16px; font-weight: 600; color: var(--white); }
.ct-panel__lead { margin: 14px 0 26px; font-size: 16px; }

.ct-hours {
    container-type: inline-size;
    padding: 18px 20px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, .1);
    background: rgba(255, 255, 255, .04);
}

.ct-hours__head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px 10px;
    margin-bottom: 12px;
}

.ct-hours__head h3 i { margin-right: 6px; color: var(--gold-light); }

.ct-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
    padding: 4px 11px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
}

.ct-status[hidden] { display: none; }
.ct-status.is-open { color: #6ee7a0; background: rgba(37, 211, 102, .14); }
.ct-status.is-closed { color: #f3b6a8; background: rgba(217, 48, 37, .16); }

.ct-status__dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.ct-status.is-open .ct-status__dot { animation: ctBlink 1.6s ease-in-out infinite; }

@keyframes ctBlink { 50% { opacity: .25; } }

.ct-hours__list { display: grid; gap: 4px; font-size: 14.5px; }

.ct-hours__list li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 10px;
    margin: 0 -10px;
    border-radius: 9px;
}

.ct-hours__list li span { white-space: nowrap; }
.ct-hours__list li span:last-child { color: var(--white); font-weight: 600; text-align: right; }

/* narrow card (phones, and the slim panel at 992-1279): day over time instead of breaking mid-time */
@container (max-width: 360px) {
    .ct-hours__list li { flex-direction: column; gap: 0; }
    .ct-hours__list li span:last-child { text-align: left; }
}
.ct-hours__list li.is-today { background: rgba(212, 165, 72, .12); }
.ct-hours__list li.is-today span:first-child::after { content: " \00b7  Today"; color: var(--gold-light); font-weight: 600; }

.ct-next { margin: 26px 0; }
.ct-next h3 { margin-bottom: 14px; }

.ct-next__steps { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.ct-next__steps li { display: flex; gap: 14px; font-size: 14.5px; line-height: 1.5; }
.ct-next__steps strong { display: block; font-weight: 600; color: var(--white); }

.ct-next__steps li > span {
    position: relative;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 50%;
    font-size: 13px;
    font-weight: 700;
    color: var(--gold-light);
    border: 1.5px solid rgba(212, 165, 72, .5);
}

/* dotted thread between the step numbers */
.ct-next__steps li:not(:last-child) > span::after {
    content: "";
    position: absolute;
    top: calc(100% + 4px);
    left: 50%;
    height: 22px;
    border-left: 1.5px dashed rgba(212, 165, 72, .35);
}

.ct-panel__social {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, .1);
    font-size: 14px;
}

.ct-panel__social div { display: flex; gap: 8px; }

.ct-panel__social a {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--white);
    border: 1px solid rgba(255, 255, 255, .18);
    transition: background .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease);
}

.ct-panel__social a:hover { background: var(--gold-grad); border-color: transparent; transform: translateY(-3px); }

.ct-panel__deco {
    position: absolute;
    right: -24px;
    top: 34%;
    z-index: -1;
    font-size: 200px;
    line-height: 1;
    color: rgba(212, 165, 72, .06);
    transform: rotate(-12deg);
    transition: transform 1.4s var(--ease);
}

.ct-panel:hover .ct-panel__deco { transform: rotate(4deg) translate(-16px, -20px); }

/* form */
.ct-form {
    position: relative;
    display: grid;
    gap: 18px;
    align-content: start;
    padding: clamp(26px, 3vw, 46px);
    border-radius: 28px;
    background: var(--white);
    border: 1px solid #efe8de;
    box-shadow: 0 16px 40px rgba(120, 90, 40, .1);
}

.ct-form__head .eyebrow { margin-bottom: 8px; }
.ct-form__head h2 { font-size: clamp(24px, 2vw, 32px); line-height: 1.25; }

.ct-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

.ct-services { min-width: 0; margin: 0; padding: 0; border: 0; }
.ct-services legend { margin-bottom: 10px; padding: 0; font-size: 14px; font-weight: 700; color: var(--navy); }

.ct-services__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }

.ct-chip { position: relative; cursor: pointer; }
.ct-chip input { position: absolute; opacity: 0; pointer-events: none; }

.ct-chip span {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 100%;
    padding: 11px 14px;
    border: 1px solid #e6ddd0;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    background: #fdfbf8;
    transition: border-color .3s var(--ease), background .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease);
}

.ct-chip i { width: 18px; text-align: center; color: var(--gold); transition: color .3s; }
.ct-chip:hover span { border-color: var(--gold-light); transform: translateY(-2px); }

.ct-chip input:checked + span {
    color: var(--white);
    border-color: transparent;
    background: var(--gold-grad);
    box-shadow: 0 8px 18px rgba(180, 126, 18, .3);
}

.ct-chip input:checked + span i { color: var(--white); }
.ct-chip input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }

.was-checked .ct-services:has(input:invalid) .ct-chip span { border-color: #d93025; }

.ct-form__actions { display: flex; flex-wrap: wrap; gap: 12px; }

.ct-wa-btn { height: 50px; color: #1a8f48; border-color: #25d366; }
.ct-wa-btn::before { background: #25d366; }
.ct-wa-btn i { font-size: 1.25em; }

.ct-form .tm-form__done p a { color: var(--gold-dark); font-weight: 700; }
.ct-form .tm-form__done h3:focus { outline: none; }
.ct-again { margin-top: 22px; }

/* ---------- Map ---------- */
.ct-map { scroll-margin-top: calc(var(--header-h) + 16px); padding: 0 0 clamp(30px, 3vw, 50px); }

.ct-map__frame {
    position: relative;
    height: clamp(420px, 36vw, 560px);
    border-radius: 28px;
    overflow: hidden;
    background: #efe8de;
    box-shadow: 0 16px 40px rgba(120, 90, 40, .1);
}

.ct-map__frame iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    filter: grayscale(.35) sepia(.12);
    transition: filter .6s var(--ease);
}

.ct-map__frame:hover iframe { filter: none; }

.ct-map__card {
    position: absolute;
    left: clamp(16px, 3vw, 48px);
    top: 50%;
    transform: translateY(-50%);
    width: min(360px, calc(100% - 32px));
    padding: 30px 28px 28px;
    border-radius: 22px;
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(8px);
    box-shadow: 0 22px 50px rgba(15, 20, 40, .2);
}

.ct-map__pin {
    position: absolute;
    top: -22px;
    right: 26px;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: 20px;
    color: var(--white);
    background: var(--gold-grad);
    box-shadow: 0 10px 22px rgba(180, 126, 18, .4);
}

.ct-map__card .eyebrow { margin-bottom: 8px; }
.ct-map__card h2 { font-size: 24px; }

.ct-map__card address {
    margin: 10px 0 14px;
    font-style: normal;
    font-size: 15.5px;
    line-height: 1.6;
    color: var(--text);
}

.ct-map__meta { display: grid; gap: 6px; margin-bottom: 20px; font-size: 14px; color: var(--muted); }
.ct-map__meta li { display: flex; align-items: center; gap: 10px; }
.ct-map__meta i { width: 16px; color: var(--gold); }
.ct-map__meta a { color: var(--navy); font-weight: 600; }

.ct-map__card .btn { height: 46px; padding: 0 24px; font-size: 15px; }

/* ---------- Contact responsive ---------- */
@media (min-width: 1200px) and (max-width: 1360px) {
    /* four slim cards: keep the email address on one line */
    .ct-way { padding-inline: 18px; }
    .ct-way__value { font-size: 14px; }
}

@media (max-width: 1199px) {
    .ct-ways__grid { grid-template-columns: repeat(2, 1fr); }
    .ct-services__list { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 991px) {
    .ct-main__grid { grid-template-columns: 1fr; }
    .ct-form { order: -1; }
    .ct-panel__deco { top: auto; bottom: -30px; }
}

@media (max-width: 767px) {
    /* the floating card stays over the map on tablets; on phones it sits above it */
    .ct-map__frame { height: auto; display: flex; flex-direction: column; }
    .ct-map__frame iframe { height: 340px; order: 1; }

    .ct-map__card {
        position: relative;
        left: auto;
        top: auto;
        transform: none;
        width: auto;
        border-radius: 0;
        box-shadow: none;
    }

    .ct-map__pin { top: 24px; }
}

@media (max-width: 575px) {
    /* the title runs across the photo at this width, so wash it top to bottom */
    .ct-hero.page-hero::before { background: linear-gradient(180deg, rgba(253, 244, 238, .9) 0%, rgba(253, 244, 238, .8) 70%, rgba(253, 244, 238, .5)); }
    /* keep the heading clear of the cards that overlap the banner */
    .ct-hero .page-hero__content { padding-bottom: 30px; }

    .ct-ways { margin-top: -30px; }
    .ct-ways__grid { grid-template-columns: 1fr; gap: 12px; }

    .ct-way { display: grid; grid-template-columns: auto 1fr; column-gap: 16px; padding: 20px 18px; }
    .ct-way__icon { grid-row: span 3; width: 50px; height: 50px; margin: 0; font-size: 20px; border-radius: 14px; }
    .ct-way__link { margin-top: 10px; }

    .ct-form,
    .ct-panel { padding: 26px 18px; border-radius: 22px; }
    .ct-hours { padding: 16px; }

    .ct-form__row { grid-template-columns: 1fr; }
    .ct-services__list { gap: 8px; }
    .ct-chip span { padding: 10px; gap: 8px; font-size: 13px; }

    .ct-form__actions .btn { width: 100%; }

    .ct-map__frame { border-radius: 22px; }
    .ct-map__card { padding: 26px 20px 24px; }
    .ct-map__frame iframe { height: 300px; }
}

@media (prefers-reduced-motion: reduce) {
    .ct-status__dot { animation: none !important; }
}

/* ==========================================================================
   Home - Premium hotel collaborations
   ========================================================================== */
.partners {
    position: relative;
    margin-top: calc(var(--radius-lg) * -1);
    padding: clamp(56px, 5.5vw, 86px) 0 calc(clamp(50px, 5vw, 76px) + var(--radius-lg));
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    overflow: hidden;
    /* soft resort photo under a warm cream wash */
    background:
        linear-gradient(180deg, rgba(253, 249, 244, .9) 0%, rgba(250, 244, 236, .86) 100%),
        url("../images/home/hero-1.webp") center 60% / cover;
    box-shadow: 0 -12px 30px rgba(15, 20, 40, .05);
}

.partners-head {
    max-width: 720px;
    margin: 0 auto clamp(28px, 3vw, 44px);
    text-align: center;
}

.partners .section-title { color: #121318; }

.partners-intro {
    margin-top: clamp(10px, 1vw, 14px);
    font-size: clamp(15px, 1.1vw, 17px);
    line-height: 1.7;
    color: #3a3c45;
}

/* ---------- Logo cards ---------- */
.partners-row {
    --cols: 10;
    --gap: clamp(8px, .8vw, 14px);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--gap);
}

.partner-card {
    flex: 0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: clamp(12px, 1vw, 16px) 10px 10px;
    border: 1px solid #ecdcbf;
    border-radius: 12px;
    background: var(--white);
    box-shadow: 0 6px 16px rgba(120, 90, 40, .07);
    transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s;
}

.partner-card:hover {
    transform: translateY(-5px);
    border-color: var(--gold-light);
    box-shadow: 0 16px 30px rgba(120, 90, 40, .16);
}

.partner-card__logo {
    display: grid;
    place-items: center;
    width: 100%;
    height: clamp(48px, 4vw, 60px);
}

.partner-card__logo img {
    max-width: 90%;
    max-height: clamp(30px, 2.6vw, 40px);
    width: auto;
    height: auto;
    object-fit: contain;
    transition: transform .45s var(--ease);
}

/* compact or detailed marks get more room so all logos read at a similar size */
.partner-card--compact .partner-card__logo img { max-height: clamp(42px, 3.6vw, 56px); }

/* long wordmarks can use the full card width */
.partner-card--wide { padding-inline: 6px; }
.partner-card--wide .partner-card__logo img { max-width: 100%; }

.partner-card:hover .partner-card__logo img,
.partner-card:hover .partner-word { transform: scale(1.06); }

.partner-card__note {
    font-size: 12.5px;
    font-weight: 500;
    color: #2a2c35;
}

/* wordmark stand-in for brands without a logo file yet */
.partner-word {
    display: grid;
    justify-items: center;
    gap: 3px;
    font-family: var(--font-head);
    font-size: clamp(14px, 1.15vw, 18px);
    font-weight: 600;
    letter-spacing: .1em;
    line-height: 1;
    text-transform: uppercase;
    transition: transform .45s var(--ease);
}

.partner-word small {
    font-family: var(--font-body);
    font-size: 7.5px;
    font-weight: 600;
    letter-spacing: .18em;
    color: var(--muted);
}

.partner-word--sunday { color: #7a4b12; }
.partner-word--sarovar { color: #22509e; }

@media (max-width: 1199px) {
    .partners-row { --cols: 5; }
}

@media (max-width: 575px) {
    .partners-row { --cols: 2; }
    .partner-card__logo { height: 54px; }
}

/* ==========================================================================
   Services page
   ========================================================================== */

/* ---------- Intro ---------- */
.svc-intro {
    padding: clamp(50px, 5.4vw, 86px) 0 clamp(10px, 1.4vw, 20px);
    text-align: center;
}

.svc-intro .section-head { margin-bottom: clamp(14px, 1.4vw, 22px); }

.svc-intro__text {
    max-width: 760px;
    margin-inline: auto;
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.75;
    color: #3a3c45;
}

/* ---------- Service rows ---------- */
.svc-row {
    padding: clamp(50px, 5.6vw, 96px) 0;
    scroll-margin-top: 110px;
}

.svc-row--alt { background: linear-gradient(180deg, #fbf7f2, #f8f2ea); }

.svc-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: clamp(40px, 6vw, 100px);
}

.svc-row--alt .svc-media { order: 2; }

/* layered photos: main shot, inset shot, offset gold frame, floating badge */
.svc-media {
    --overhang-x: clamp(20px, 3vw, 46px);
    --overhang-y: clamp(30px, 3vw, 48px);
    position: relative;
    isolation: isolate;
    margin: 0 var(--overhang-x) var(--overhang-y) 0;
}

.svc-row--alt .svc-media { margin: 0 0 var(--overhang-y) var(--overhang-x); }

.svc-media::before {
    content: "";
    position: absolute;
    inset: -18px 18px 18px -18px;
    z-index: -1;
    border: 1.5px solid rgba(180, 126, 18, .35);
    border-radius: calc(var(--radius) + 6px);
}

.svc-row--alt .svc-media::before { inset: -18px -18px 18px 18px; }

.svc-media__main {
    border-radius: var(--radius);
    overflow: hidden;
    aspect-ratio: 6 / 5;
    box-shadow: 0 20px 44px rgba(15, 20, 40, .16);
}

.svc-media__main img,
.svc-media__inset img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.svc-media__main img { transition: transform 1.2s var(--ease); }
.svc-media:hover .svc-media__main img { transform: scale(1.06); }

.svc-media__inset {
    position: absolute;
    right: calc(-1 * var(--overhang-x));
    bottom: calc(-1 * var(--overhang-y));
    width: 44%;
    aspect-ratio: 4 / 3;
    border: 6px solid var(--white);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 18px 40px rgba(15, 20, 40, .22);
}

.svc-row--alt .svc-media__inset { right: auto; left: calc(-1 * var(--overhang-x)); }

.svc-badge {
    position: absolute;
    top: clamp(18px, 2.2vw, 34px);
    left: calc(-1 * clamp(10px, 2vw, 30px));
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px 12px 12px;
    border-radius: 16px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 14px 30px rgba(15, 20, 40, .16);
    animation: svcFloat 5s ease-in-out infinite;
}

.svc-row--alt .svc-badge { left: auto; right: calc(-1 * clamp(10px, 2vw, 30px)); }

.svc-badge__icon {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: var(--gold-grad);
    color: var(--white);
    font-size: 18px;
}

.svc-badge > span:last-child { font-size: 13px; line-height: 1.3; color: var(--muted); }

.svc-badge strong {
    display: block;
    font-family: var(--font-head);
    font-size: clamp(15px, 1.3vw, 19px);
    font-weight: 700;
    line-height: 1.2;
    color: var(--navy);
}

@keyframes svcFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

/* text column */
.svc-kicker {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: clamp(10px, 1vw, 16px);
}

.svc-num {
    font-family: var(--font-head);
    font-size: clamp(54px, 5.2vw, 84px);
    font-weight: 700;
    line-height: .9;
    letter-spacing: -.02em;
    color: transparent;
    -webkit-text-stroke: 1.5px var(--gold);
    opacity: .55;
}

.svc-kicker__label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: clamp(11px, .95vw, 14px);
    font-weight: 700;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--gold);
}

.svc-kicker__label::before {
    content: "";
    width: 34px;
    height: 1.5px;
    background: var(--gold);
}

.svc-text .section-title { color: #121318; }
.svc-text .gold-rule { margin: clamp(14px, 1.4vw, 20px) 0 clamp(16px, 1.6vw, 24px); }

.svc-lead {
    max-width: 580px;
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.75;
    color: #3a3c45;
}

.svc-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 24px;
    margin: clamp(20px, 2vw, 28px) 0;
}

.svc-features li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: clamp(14px, 1.1vw, 16px);
    font-weight: 500;
    line-height: 1.45;
    color: #1d1f27;
}

.svc-features i {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    margin-top: 1px;
    border-radius: 50%;
    background: #f6ecd9;
    color: var(--gold-dark);
    font-size: 10px;
    transition: background .35s, color .35s, transform .35s var(--ease);
}

.svc-features li:hover i { background: var(--gold-grad); color: var(--white); transform: scale(1.12); }

.svc-ideal {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    padding: 16px 0;
    margin-bottom: clamp(22px, 2.2vw, 30px);
    border-block: 1px dashed #e3d9c8;
}

.svc-ideal__label {
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted);
}

.svc-ideal ul { display: flex; flex-wrap: wrap; gap: 8px; }

.svc-ideal li {
    padding: 6px 14px;
    border: 1px solid #ecdfc8;
    border-radius: 30px;
    background: var(--white);
    font-size: 13.5px;
    color: #3a3c45;
    transition: border-color .3s, color .3s;
}

.svc-ideal li:hover { border-color: var(--gold); color: var(--gold-dark); }

.svc-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 26px;
}

.svc-wa {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 600;
    color: var(--navy);
}

.svc-wa i { font-size: 20px; color: #25d366; }

.svc-wa::after {
    content: "";
    position: absolute;
    left: 30px;
    right: 0;
    bottom: -4px;
    height: 1.5px;
    background: var(--gold);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .4s var(--ease);
}

.svc-wa:hover::after { transform: scaleX(1); }

/* ---------- Add-ons marquee ---------- */
.svc-extras { padding: clamp(44px, 4.6vw, 74px) 0 clamp(50px, 5vw, 84px); }

.svc-extras__label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-bottom: clamp(18px, 2vw, 28px);
    font-family: var(--font-head);
    font-size: clamp(17px, 1.5vw, 22px);
    color: var(--gold-dark);
}

.svc-extras__label::before,
.svc-extras__label::after {
    content: "";
    width: clamp(30px, 5vw, 70px);
    height: 1.5px;
}

.svc-extras__label::before { background: linear-gradient(90deg, transparent, var(--gold)); }
.svc-extras__label::after { background: linear-gradient(90deg, var(--gold), transparent); }

.svc-marquee {
    display: flex;
    overflow: hidden;
    border-block: 1px solid #ece3d6;
    background: #fdfaf6;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.svc-marquee__track {
    flex: 0 0 auto;
    display: flex;
    animation: svcMarquee 40s linear infinite;
}

.svc-marquee:hover .svc-marquee__track { animation-play-state: paused; }

.svc-marquee li {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 22px clamp(22px, 2.6vw, 40px);
    font-family: var(--font-head);
    font-size: clamp(15px, 1.3vw, 19px);
    white-space: nowrap;
    color: var(--navy);
}

.svc-marquee li i { color: var(--gold); }

.svc-marquee li::after {
    content: "";
    position: absolute;
    right: -4px;
    top: 50%;
    width: 7px;
    height: 7px;
    background: var(--gold);
    opacity: .6;
    transform: translateY(-50%) rotate(45deg);
}

@keyframes svcMarquee { to { transform: translateX(-100%); } }

/* ---------- How we work ---------- */
.svc-process {
    padding: clamp(60px, 6.4vw, 110px) 0;
    background:
        radial-gradient(circle at 12% 0%, rgba(180, 126, 18, .22), transparent 45%),
        radial-gradient(circle at 90% 100%, rgba(180, 126, 18, .16), transparent 45%),
        var(--navy);
    color: var(--white);
}

.svc-process__head { text-align: center; margin-bottom: clamp(36px, 4vw, 64px); }
.svc-process__head .eyebrow { color: var(--gold-light); }
.svc-process__head .section-title { color: var(--white); }

.svc-steps-wrap { position: relative; }

.svc-steps__line {
    position: absolute;
    top: 40px;
    left: 12.5%;
    right: 12.5%;
    height: 2px;
    background: repeating-linear-gradient(90deg, rgba(212, 165, 72, .35) 0 8px, transparent 8px 16px);
}

.svc-steps__fill {
    position: absolute;
    inset: 0;
    background: var(--gold-grad);
    transform-origin: left center;
}

.svc-steps {
    position: relative;
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(18px, 2.4vw, 36px);
}

.svc-step { padding: 0 8px; text-align: center; }

.svc-step__num {
    position: relative;
    display: grid;
    place-items: center;
    width: 80px;
    height: 80px;
    margin: 0 auto clamp(18px, 1.8vw, 26px);
    border: 1.5px solid rgba(212, 165, 72, .6);
    border-radius: 50%;
    background: #161c36;
    color: var(--gold-light);
    font-size: 26px;
    box-shadow: 0 0 0 8px var(--navy);
    transition: background .45s var(--ease), color .45s, transform .45s var(--ease);
}

.svc-step__num em {
    position: absolute;
    top: -4px;
    right: -4px;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--gold-grad);
    color: var(--white);
    font-family: var(--font-head);
    font-size: 13px;
    font-style: normal;
    font-weight: 700;
    transition: background .45s, color .45s;
}

.svc-step:hover .svc-step__num { background: var(--gold-grad); color: var(--white); transform: translateY(-6px); }
.svc-step:hover .svc-step__num em { background: var(--white); color: var(--gold-dark); }

.svc-step h3 {
    margin-bottom: 8px;
    font-size: clamp(17px, 1.4vw, 21px);
    font-weight: 600;
    color: var(--white);
}

.svc-step p {
    max-width: 260px;
    margin-inline: auto;
    font-size: clamp(14px, 1.05vw, 15.5px);
    line-height: 1.7;
    color: #b7bbcb;
}

.svc-cta { padding-top: clamp(50px, 5vw, 80px); }

/* ---------- Services responsive ---------- */
/* small laptops: the text column is too narrow for two feature columns */
@media (min-width: 992px) and (max-width: 1199px) {
    .svc-features { grid-template-columns: 1fr; gap: 10px; }
}

@media (max-width: 991px) {
    .svc-grid { grid-template-columns: 1fr; }
    .svc-media__main { aspect-ratio: 3 / 2; }

    /* the ring only masked the connector line, which is hidden here */
    .svc-step__num { box-shadow: none; }

    .svc-row--alt .svc-media { order: 0; }

    .svc-media,
    .svc-row--alt .svc-media {
        --overhang-x: 16px;
        --overhang-y: 30px;
        width: calc(100% - 24px);
        max-width: 600px;
        margin: 0 auto var(--overhang-y);
    }

    .svc-steps { grid-template-columns: repeat(2, 1fr); row-gap: 40px; }
    .svc-steps__line { display: none; }
}

@media (max-width: 575px) {
    .svc-intro .head-line { display: none; }

    .svc-media::before { display: none; }
    .svc-media__inset { width: 46%; border-width: 4px; }
    .svc-badge { padding: 8px 14px 8px 8px; gap: 10px; }
    .svc-badge__icon { width: 38px; height: 38px; font-size: 15px; }

    .svc-features { grid-template-columns: 1fr; }

    .svc-steps { grid-template-columns: 1fr; row-gap: 26px; }

    .svc-step {
        display: grid;
        grid-template-columns: auto 1fr;
        column-gap: 18px;
        padding: 0;
        text-align: left;
    }

    .svc-step__num { grid-row: span 2; width: 64px; height: 64px; margin: 0; font-size: 21px; }
    .svc-step p { max-width: none; margin: 0; }
}

/* ==========================================================================
   Service details page (/services/{slug})
   ========================================================================== */

/* ---------- Banner: taller than the standard page banner, sized to its content ---------- */
.sd-hero { height: auto; min-height: clamp(420px, 34vw, 640px); }

.sd-hero .page-hero__content {
    position: relative;
    inset: auto;
    min-height: inherit;
    padding: clamp(44px, 4.4vw, 76px) 0;
}

.sd-crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 12px;
    margin: -10px 0 calc(clamp(14px, 1.4vw, 22px) - 10px);
    font-size: 14px;
    color: #5a5d68;
}

.sd-crumbs i { font-size: 9px; color: var(--gold); }
.sd-crumbs a { padding: 10px 0; transition: color .3s; }
.sd-crumbs a:hover { color: var(--gold-dark); }
.sd-crumbs [aria-current] { color: #121318; font-weight: 600; }

.sd-hero .page-hero__eyebrow i { margin-right: 6px; color: var(--gold); letter-spacing: 0; }

.sd-hero__tagline {
    max-width: 520px;
    margin-top: clamp(16px, 1.6vw, 24px);
    font-size: clamp(15px, 1.15vw, 17.5px);
    line-height: 1.7;
    color: #3a3c45;
}

.sd-hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 26px;
    margin-top: clamp(20px, 2vw, 30px);
}

/* ---------- Overview ---------- */
.sd-overview { padding-top: clamp(60px, 6vw, 104px); }

.sd-copy {
    max-width: 580px;
    margin-top: 16px;
    font-size: clamp(15px, 1.1vw, 16.5px);
    line-height: 1.8;
    color: #50535e;
}

.sd-copy > * + * { margin-top: 16px; }
.sd-copy ul { padding-left: 20px; list-style: disc; }
.sd-copy ol { padding-left: 20px; }
.sd-copy h2, .sd-copy h3 { font-size: clamp(18px, 1.4vw, 21px); font-weight: 600; }

.sd-copy a {
    color: var(--gold-dark);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: rgba(180, 126, 18, .35);
    text-underline-offset: 3px;
    transition: text-decoration-color .3s;
}

.sd-copy a:hover { text-decoration-color: currentColor; }

/* centred section heading */
.sd-head { margin-bottom: clamp(30px, 3.4vw, 54px); text-align: center; }
.sd-head .gold-rule { margin: 16px auto 0; }

/* ---------- What we offer ---------- */
.sd-offer {
    padding: clamp(60px, 6vw, 100px) 0;
    background: linear-gradient(180deg, #fbf7f2, #f8f2ea);
}

.sd-offer__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(16px, 1.8vw, 26px);
}

.sd-card {
    position: relative;
    padding: clamp(24px, 2.4vw, 36px);
    border: 1px solid #efe5d6;
    border-radius: var(--radius);
    background: var(--white);
    overflow: hidden;
    transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .35s;
}

.sd-card__icon {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    margin-bottom: clamp(16px, 1.6vw, 22px);
    border-radius: 16px;
    background: #f6ecd9;
    color: var(--gold-dark);
    font-size: 22px;
    transition: background .4s, color .4s, transform .45s var(--ease);
}

.sd-card h3 {
    margin-bottom: 8px;
    font-size: clamp(17px, 1.35vw, 20px);
    font-weight: 600;
    line-height: 1.35;
}

.sd-card p { font-size: clamp(14px, 1.05vw, 15.5px); line-height: 1.7; color: var(--muted); }

.sd-card__num {
    position: absolute;
    top: 14px;
    right: 20px;
    font-family: var(--font-head);
    font-size: 44px;
    font-weight: 700;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1px rgba(180, 126, 18, .28);
}

@media (hover: hover) {
    .sd-card:hover { transform: translateY(-6px); border-color: transparent; box-shadow: 0 22px 44px rgba(120, 90, 40, .14); }
    .sd-card:hover .sd-card__icon { background: var(--gold-grad); color: var(--white); transform: rotate(-6deg); }
}

/* ---------- Ideal for + included ---------- */
.sd-fit { padding: clamp(60px, 6vw, 100px) 0; }

.sd-fit__grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: clamp(30px, 5vw, 80px);
    align-items: start;
}

/* only one of the two boxes filled in */
.sd-fit__grid--single { grid-template-columns: minmax(0, 820px); justify-content: center; }

.sd-fit__title {
    margin-bottom: clamp(20px, 2vw, 30px);
    font-size: clamp(24px, 2.2vw, 36px);
    color: #121318;
}

.sd-ideal {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.sd-ideal li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--white);
    transition: border-color .3s;
}

.sd-ideal li:hover { border-color: #e6d6bb; }

.sd-ideal__icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--gold-grad);
    color: var(--white);
    font-size: 16px;
}

.sd-ideal li > span:last-child { font-size: 14px; line-height: 1.55; color: var(--muted); }

.sd-ideal strong {
    display: block;
    margin-bottom: 2px;
    font-family: var(--font-head);
    font-size: 16px;
    font-weight: 600;
    color: var(--navy);
}

.sd-fit__included {
    padding: clamp(26px, 2.8vw, 42px);
    border-radius: calc(var(--radius) + 6px);
    background:
        radial-gradient(circle at 100% 0%, rgba(180, 126, 18, .14), transparent 55%),
        var(--cream);
}

.sd-included { grid-template-columns: 1fr; margin: 0 0 20px; }

.sd-fit__note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding-top: 18px;
    border-top: 1px dashed #e3d9c8;
    font-size: 14px;
    line-height: 1.6;
    color: #50535e;
}

.sd-fit__note i { margin-top: 3px; color: var(--gold); }

/* ---------- Destinations ---------- */
.sd-dest { padding: clamp(60px, 6vw, 100px) 0 clamp(40px, 4vw, 70px); }

.sd-dest__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(14px, 1.6vw, 24px);
}

.sd-dest__card {
    position: relative;
    display: block;
    aspect-ratio: 16 / 10;
    border-radius: var(--radius);
    overflow: hidden;
    isolation: isolate;
    background: var(--navy);
}

.sd-dest__card img {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.2s var(--ease);
}

.sd-dest__card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(15, 20, 40, 0) 35%, rgba(15, 20, 40, .82) 100%);
}

.sd-dest__body {
    position: absolute;
    left: 20px;
    right: 70px;
    bottom: 18px;
    color: var(--white);
}

.sd-dest__state {
    display: block;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--gold-light);
}

.sd-dest__state i { margin-right: 4px; }

.sd-dest__body strong {
    display: block;
    font-family: var(--font-head);
    font-size: clamp(20px, 1.7vw, 26px);
    font-weight: 500;
    line-height: 1.25;
}

.sd-dest__body small { font-size: 13.5px; color: rgba(255, 255, 255, .78); }

.sd-dest__go {
    position: absolute;
    right: 18px;
    bottom: 20px;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .16);
    backdrop-filter: blur(6px);
    color: var(--white);
    transition: background .35s, transform .45s var(--ease);
}

@media (hover: hover) {
    .sd-dest__card:hover img { transform: scale(1.07); }
    .sd-dest__card:hover .sd-dest__go { background: var(--gold-grad); transform: translateX(4px); }
}

/* ---------- Handpicked hotels ---------- */
.sd-hotels { padding: clamp(30px, 3vw, 50px) 0 clamp(60px, 6vw, 100px); }

/* three handpicked cards fill the row (hotels.css defaults to four) */
.sd-hotels .ht-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 991px) {
    .sd-hotels .ht-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
    .sd-hotels .ht-grid { grid-template-columns: 1fr; }
}

/* ---------- FAQ ---------- */
.sd-faq {
    padding: clamp(60px, 6vw, 100px) 0;
    background: linear-gradient(180deg, #fbf7f2, #f8f2ea);
}

.sd-faq__grid {
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr);
    gap: clamp(30px, 5vw, 80px);
    align-items: start;
}

.sd-faq__intro { position: sticky; top: calc(var(--header-h) + 20px); }
.sd-faq__intro .section-title { color: #121318; }
.sd-faq__intro .gold-rule { margin: 16px 0 20px; }
.sd-faq__intro p { margin-bottom: 26px; font-size: clamp(15px, 1.1vw, 16.5px); line-height: 1.75; color: #50535e; }

/* ---------- Other services ---------- */
.sd-others { padding: clamp(60px, 6vw, 100px) 0 clamp(30px, 3vw, 50px); }

.sd-others__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(14px, 1.6vw, 24px);
}

.sd-other {
    display: block;
    height: 100%;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--white);
    overflow: hidden;
    transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}

.sd-other__media { display: block; aspect-ratio: 4 / 3; overflow: hidden; }

.sd-other__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.2s var(--ease);
}

.sd-other__body { position: relative; display: block; padding: 34px 20px 20px; }

.sd-other__icon {
    position: absolute;
    top: -24px;
    left: 20px;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border: 3px solid var(--white);
    border-radius: 14px;
    background: var(--gold-grad);
    color: var(--white);
    font-size: 17px;
}

.sd-other__body strong {
    display: block;
    margin-bottom: 6px;
    font-family: var(--font-head);
    font-size: clamp(17px, 1.3vw, 19px);
    font-weight: 600;
    color: var(--navy);
}

.sd-other__body small { font-size: 14px; font-weight: 600; color: var(--gold-dark); }
.sd-other__body small i { margin-left: 4px; font-size: 12px; transition: transform .35s var(--ease); }

@media (hover: hover) {
    .sd-other:hover { transform: translateY(-6px); box-shadow: 0 22px 44px rgba(120, 90, 40, .14); }
    .sd-other:hover .sd-other__media img { transform: scale(1.07); }
    .sd-other:hover small i { transform: translateX(4px); }
}

/* /services rows link to their detail pages */
a.svc-media__main { display: block; }
.svc-text .section-title a { transition: color .3s; }
.svc-text .section-title a:hover { color: var(--gold-dark); }

/* "Full details" link on the /services rows */
.svc-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 600;
    color: var(--gold-dark);
}

.svc-more i { font-size: 12px; transition: transform .35s var(--ease); }
.svc-more:hover i { transform: translateX(4px); }

/* ---------- Service details responsive ---------- */
@media (max-width: 1199px) {
    .sd-others__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 991px) {
    .sd-hero::before { background: linear-gradient(90deg, rgba(253, 244, 238, .92), rgba(253, 244, 238, .6) 75%, rgba(253, 244, 238, .25)); }

    .sd-offer__grid,
    .sd-dest__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .sd-fit__grid,
    .sd-faq__grid { grid-template-columns: 1fr; }

    .sd-faq__intro { position: static; }
}

@media (max-width: 575px) {
    .sd-hero { height: auto; min-height: 0; }
    .sd-hero::before { background: linear-gradient(180deg, rgba(253, 244, 238, .92), rgba(253, 244, 238, .82)); }

    .sd-offer__grid,
    .sd-dest__grid,
    .sd-ideal { grid-template-columns: 1fr; }

    .sd-others__grid { gap: 12px; }
    .sd-other__body { padding: 30px 14px 16px; }
    .sd-other__icon { left: 14px; width: 42px; height: 42px; font-size: 15px; }
}

/* ---------- Enquiry popup ---------- */
html.enq-open,
html.enq-open body { overflow: hidden; }

.enq-modal {
    width: min(860px, 100% - 32px);
    height: fit-content; /* sized to the form; only scrolls on very short screens */
    max-width: none;
    max-height: calc(100dvh - 32px);
    margin: auto;
    padding: 0;
    border: 0;
    border-radius: 28px;
    background: var(--white);
    box-shadow: 0 40px 90px rgba(10, 14, 30, .35);
    overflow: hidden;
}

.enq-modal[open] { animation: enqIn .5s var(--ease) both; }
.enq-modal::backdrop { background: rgba(15, 20, 40, .62); backdrop-filter: blur(5px); }
.enq-modal[open]::backdrop { animation: enqFade .4s ease both; }

.enq-modal.is-closing { animation: enqOut .26s ease both; }
.enq-modal.is-closing::backdrop { animation: enqFade .26s ease reverse both; }

@keyframes enqIn {
    from { opacity: 0; transform: translateY(28px) scale(.97); }
    to { opacity: 1; transform: none; }
}

@keyframes enqOut { to { opacity: 0; transform: translateY(16px) scale(.98); } }
@keyframes enqFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes enqSlideIn { from { transform: translateX(-100%); } to { transform: none; } }
@keyframes enqSlideOut { to { transform: translateX(-100%); } }

.enq-modal__inner {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 290px) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    max-height: inherit;
}

/* photo side: swaps to the chosen service */
.enq-modal__aside {
    position: relative;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    isolation: isolate;
    color: var(--white);
}

.enq-modal__aside::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(15, 20, 40, .15) 0%, rgba(15, 20, 40, .55) 45%, rgba(15, 20, 40, .94) 100%);
}

.enq-modal__img {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    animation: bannerZoom 2.4s var(--ease) both;
}

.enq-modal__aside-text { padding: 26px; }
.enq-modal__aside .eyebrow { margin-bottom: 6px; color: var(--gold-light); }

.enq-modal__aside h2 {
    font-size: 24px;
    font-weight: 500;
    line-height: 1.15;
    color: var(--white);
}

.enq-steps {
    display: grid;
    gap: 12px;
    margin: 18px 0 20px;
    padding: 18px 0 0;
    list-style: none;
    border-top: 1px solid rgba(255, 255, 255, .18);
}

.enq-steps li { display: flex; gap: 12px; align-items: flex-start; font-size: 13px; line-height: 1.4; color: #c9ccd8; }
.enq-steps strong { display: block; font-size: 14px; font-weight: 600; color: var(--white); }

.enq-steps span {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border: 1.5px solid var(--gold-light);
    border-radius: 50%;
    font-family: var(--font-head);
    font-size: 12px;
    font-weight: 700;
    color: var(--gold-light);
}

.enq-call {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 9px 16px;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 40px;
    font-size: 14px;
    font-weight: 600;
    background: rgba(255, 255, 255, .08);
    backdrop-filter: blur(4px);
    transition: background .35s, border-color .35s;
}

.enq-call i { color: var(--gold-light); }
.enq-call:hover { background: var(--gold-grad); border-color: transparent; }
.enq-call:hover i { color: var(--white); }

/* compact form; on very short screens it still scrolls, without a visible scrollbar */
.enq-form {
    order: 0; /* contact page sets .ct-form order on tablets */
    min-height: 0;
    gap: 10px;
    padding: 22px 26px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
}

.enq-form::-webkit-scrollbar { display: none; }

.enq-form.is-done { overflow: hidden; }
.enq-form .ct-form__head { padding-right: 48px; }
.enq-form .ct-form__head .eyebrow { margin-bottom: 4px; }
.enq-form .ct-form__head h2 { font-size: 22px; }
.enq-form .ct-form__row { gap: 10px 12px; }

.enq-form .ct-services legend { margin-bottom: 6px; font-size: 13px; }
.enq-form .ct-services__list { gap: 6px; }
.enq-form .ct-chip span { gap: 8px; padding: 7px 10px; border-radius: 10px; font-size: 13px; }

.enq-form .tm-field { gap: 4px; }
.enq-form .tm-field > span { font-size: 13px; }

.enq-form .tm-field input,
.enq-form .tm-field select,
.enq-form .tm-field textarea { padding: 8px 12px; border-radius: 10px; font-size: 14px; }

.enq-form .tm-field textarea { min-height: 60px; height: 60px; }
.enq-form .tm-field__count { position: absolute; right: 24px; bottom: 6px; font-size: 11px; }
.enq-form .tm-check { gap: 8px; font-size: 12px; line-height: 1.45; }
.enq-form .tm-check input { margin-top: 2px; width: 15px; height: 15px; }
.enq-form .ct-form__actions { gap: 10px; }
.enq-form .ct-form__actions .btn { height: 42px; padding: 0 22px; font-size: 14px; }

.enq-modal__close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    font-size: 16px;
    color: var(--navy);
    background: var(--cream);
    cursor: pointer;
    transition: background .35s, color .35s, transform .45s var(--ease);
}

.enq-modal__close:hover { color: var(--white); background: var(--gold-grad); transform: rotate(90deg); }
.enq-modal__close:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

@media (max-width: 991px) {
    .enq-modal__inner { grid-template-columns: minmax(0, 240px) minmax(0, 1fr); }
    .enq-steps { display: none; }
}

@media (max-width: 767px) {
    /* full-screen sheet that slides in from the left */
    .enq-modal {
        width: 100%;
        height: 100dvh;
        max-height: 100dvh;
        margin: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .enq-modal[open] { animation: enqSlideIn .45s var(--ease) both; }
    .enq-modal.is-closing { animation: enqSlideOut .26s ease-in both; }

    .enq-modal__inner {
        height: 100%;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto minmax(0, 1fr);
    }

    .enq-modal__aside { min-height: 84px; }
    .enq-modal__aside-text { padding: 16px 20px; }
    .enq-modal__aside h2 { font-size: 20px; }
    .enq-form { padding: 18px 18px calc(20px + env(safe-area-inset-bottom)); }
    .enq-form .ct-form__row { grid-template-columns: 1fr 1fr; }
    .enq-call { display: none; }

    .enq-modal__close { top: 12px; right: 12px; width: 40px; height: 40px; background: rgba(255, 255, 255, .92); }
    .enq-form .ct-form__head { padding-right: 0; }
    .enq-form .ct-form__actions .btn { flex: 1 1 auto; }
}

/* ==========================================================================
   Footer - legal links (all pages)
   ========================================================================== */
.footer-legal {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 0;
}

.footer-legal li { display: flex; align-items: center; }

.footer-legal li + li::before {
    content: "";
    width: 4px;
    height: 4px;
    margin: 0 14px;
    border-radius: 50%;
    background: var(--gold-light);
    opacity: .6;
}

.footer-legal a { transition: color .3s; }
.footer-legal a:hover,
.footer-legal a[aria-current="page"] { color: var(--gold-light); }

/* ==========================================================================
   Policy pages (privacy-policy.html, terms-and-conditions.html, refund-policy.html)
   ========================================================================== */
.policy-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
    font-size: 14.5px;
    font-weight: 600;
    color: #3a3d4a;
}

.policy-meta li { display: inline-flex; align-items: center; gap: 8px; }
.policy-meta i { color: var(--gold); }

.policy {
    padding: clamp(44px, 5vw, 84px) 0 clamp(44px, 4.6vw, 76px);
    background: #fcf9f6;
}

/* ---------- Layout ---------- */
.policy-layout {
    display: grid;
    grid-template-columns: minmax(270px, 330px) minmax(0, 1fr);
    gap: clamp(28px, 3.4vw, 60px);
}

/* the aside spans the full row so the index stays pinned the whole way down */
.policy-aside { min-width: 0; }

.policy-toc {
    position: sticky;
    top: 100px;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 124px);
    padding: 22px 12px 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--white);
    box-shadow: 0 10px 30px rgba(15, 20, 40, .05);
}

.policy-toc__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 0 10px 12px;
}

.policy-toc__label {
    font-family: var(--font-head);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--muted);
}

.policy-toc__pct { font-size: 12.5px; font-weight: 700; color: var(--gold); font-variant-numeric: tabular-nums; }

.policy-progress {
    flex: none;
    height: 3px;
    margin: 0 10px 12px;
    border-radius: 3px;
    background: var(--line);
    overflow: hidden;
}

.policy-progress span {
    display: block;
    height: 100%;
    background: var(--gold-grad);
    transform: scaleX(0);
    transform-origin: left center;
}

.policy-toc__nav {
    position: relative;
    display: grid;
    overflow-x: hidden;
    overflow-y: auto;
}

/* plain index list: gold chevron + label, hairline between rows */
.policy-toc__link {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 15px 10px;
    border-bottom: 1px solid var(--line);
    font-family: var(--font-head);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
    color: #4a4d58;
    transition: color .35s var(--ease), transform .35s var(--ease);
}

.policy-toc__link:last-child { border-bottom: 0; }

/* the number is swapped for a chevron; the text stays in the markup */
.policy-toc__num {
    flex: none;
    width: 10px;
    display: grid;
    place-items: center;
    font-size: 0;
    color: var(--gold-light);
    transition: color .35s var(--ease), transform .35s var(--ease);
}

.policy-toc__num::before {
    content: "\f054";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 12px;
}

.policy-toc__link:hover { color: var(--gold); transform: translateX(3px); }
.policy-toc__link:hover .policy-toc__num { color: var(--gold); }

.policy-toc__link.is-active { color: var(--gold); font-weight: 600; transform: none; }
.policy-toc__link.is-active .policy-toc__num { color: var(--gold); transform: translateX(2px); }

/* links to the sibling legal pages, under the index */
.policy-legal {
    flex: none;
    display: grid;
    gap: 8px;
    margin-top: 10px;
    padding: 16px 10px 4px;
    border-top: 1px solid var(--line);
}

.policy-legal .policy-toc__label { margin-bottom: 4px; }

.policy-legal__link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px 10px 10px;
    border-radius: 12px;
    background: var(--cream);
    font-family: var(--font-head);
    font-size: 14.5px;
    font-weight: 600;
    color: var(--navy);
    transition: background .35s var(--ease), color .35s var(--ease);
}

.policy-legal__icon {
    flex: none;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: var(--white);
    font-size: 13px;
    color: var(--gold);
    transition: background .35s var(--ease), color .35s var(--ease);
}

.policy-legal__arrow {
    margin-left: auto;
    font-size: 12px;
    color: var(--gold);
    transition: transform .35s var(--ease), color .35s var(--ease);
}

.policy-legal__link:hover { background: var(--navy); color: var(--white); }
.policy-legal__link:hover .policy-legal__icon { background: var(--gold-grad); color: var(--white); }
.policy-legal__link:hover .policy-legal__arrow { color: var(--gold-light); transform: translateX(3px); }

.policy-toc__link:focus-visible,
.policy-legal__link:focus-visible,
.policy-sec__link:focus-visible,
.policy-print:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}

/* ---------- Article ---------- */
.policy-body { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; }

/* at-a-glance summary */
.policy-glance {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    padding: clamp(26px, 3vw, 44px);
    border-radius: var(--radius);
    background: var(--navy);
    color: rgba(255, 255, 255, .74);
}

.policy-glance::before {
    content: "";
    position: absolute;
    right: -120px;
    top: -140px;
    width: 380px;
    height: 380px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(212, 165, 72, .3), transparent 70%);
    z-index: -1;
}

.policy-glance__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px 24px;
    margin-bottom: 26px;
}

.policy-glance .eyebrow { margin-bottom: 8px; color: var(--gold-light); }
.policy-glance h2 { font-size: clamp(24px, 2.1vw, 34px); line-height: 1.2; color: var(--white); }

.policy-print {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 44px;
    padding: 0 20px;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 40px;
    background: transparent;
    font: inherit;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--white);
    cursor: pointer;
    transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}

.policy-print:hover { background: var(--white); border-color: var(--white); color: var(--navy); }

.policy-glance__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.policy-glance__grid li {
    padding: 20px 18px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 14px;
    background: rgba(255, 255, 255, .05);
    transition: background .35s var(--ease), transform .35s var(--ease);
}

.policy-glance__grid li:hover { background: rgba(255, 255, 255, .09); transform: translateY(-3px); }

.policy-glance__icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    margin-bottom: 14px;
    border-radius: 12px;
    background: var(--gold-grad);
    color: var(--white);
    font-size: 16px;
}

.policy-glance h3 { margin-bottom: 6px; font-size: 16px; font-weight: 600; color: var(--white); }
.policy-glance p { font-size: 14px; line-height: 1.6; }

/* numbered section cards */
.policy-sec {
    position: relative;
    scroll-margin-top: 110px;
    padding: clamp(24px, 3vw, 44px);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--white);
    transition: box-shadow .45s var(--ease);
}

.policy-sec::before {
    content: "";
    position: absolute;
    left: -1px;
    top: 30px;
    bottom: 30px;
    width: 3px;
    border-radius: 3px;
    background: var(--gold-grad);
    transform: scaleY(0);
    transition: transform .5s var(--ease);
}

.policy-sec.is-current { box-shadow: 0 18px 40px rgba(15, 20, 40, .07); }
.policy-sec.is-current::before { transform: scaleY(1); }

.policy-sec > * + * { margin-top: 18px; }

.policy-sec__head { display: flex; align-items: center; gap: 16px; }

.policy-sec__num {
    flex: none;
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: var(--cream);
    font-family: var(--font-head);
    font-size: 17px;
    font-weight: 600;
    color: var(--gold);
}

.policy-sec h2 { flex: 1; font-size: clamp(21px, 1.7vw, 28px); line-height: 1.25; font-weight: 500; }

.policy-sec__link {
    flex: none;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: transparent;
    font-size: 13px;
    color: var(--muted);
    cursor: pointer;
    opacity: 0;
    transition: opacity .35s var(--ease), color .35s var(--ease), background .35s var(--ease), border-color .35s var(--ease);
}

.policy-sec:hover .policy-sec__link,
.policy-sec__link:focus-visible { opacity: 1; }
.policy-sec__link:hover { border-color: transparent; background: var(--gold-grad); color: var(--white); }

@media (hover: none) {
    .policy-sec__link { opacity: 1; }
}

.policy-sec p { font-size: 16px; line-height: 1.75; color: #4a4e5c; }
.policy-sec strong { font-weight: 700; color: var(--navy); }

.policy-sec p a,
.policy-sec li a {
    font-weight: 600;
    color: var(--gold-dark);
    text-decoration: underline;
    text-decoration-color: rgba(180, 126, 18, .35);
    text-underline-offset: 3px;
    transition: text-decoration-color .3s;
}

.policy-sec p a:hover,
.policy-sec li a:hover { text-decoration-color: currentColor; }

/* check-mark list */
.policy-list { display: grid; gap: 10px; }

.policy-list li {
    position: relative;
    padding-left: 32px;
    line-height: 1.65;
    color: #4a4e5c;
}

.policy-list li::before {
    content: "\f00c";
    position: absolute;
    left: 0;
    top: 3px;
    width: 21px;
    height: 21px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--cream);
    font-family: "Font Awesome 6 Free";
    font-size: 10px;
    font-weight: 900;
    color: var(--gold);
}

.policy-list--cols { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 34px; }
.policy-list--x li::before { content: "\f00d"; background: #fbeceb; color: #b4452f; }

/* icon tiles */
.policy-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
}

.policy-tile {
    padding: 22px 20px;
    border: 1px solid #f1e9e1;
    border-radius: 14px;
    background: #fcf9f6;
    transition: transform .35s var(--ease), background .35s var(--ease), box-shadow .35s var(--ease);
}

.policy-tile:hover { transform: translateY(-4px); background: var(--white); box-shadow: 0 14px 30px rgba(15, 20, 40, .08); }

.policy-tile__icon {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    margin-bottom: 14px;
    border-radius: 12px;
    background: var(--white);
    color: var(--gold);
    font-size: 17px;
    box-shadow: 0 6px 14px rgba(15, 20, 40, .06);
}

.policy-tile h3 { margin-bottom: 6px; font-size: 16.5px; font-weight: 600; }
.policy-sec .policy-tile p { font-size: 14.5px; line-height: 1.6; }
.policy-tile a { word-break: break-word; }

/* callout */
.policy-note {
    display: flex;
    gap: 14px;
    padding: 18px 20px;
    border-left: 3px solid var(--gold);
    border-radius: 0 14px 14px 0;
    background: #fbf3e4;
}

.policy-note > i { margin-top: 4px; font-size: 18px; color: var(--gold); }
.policy-sec .policy-note p { font-size: 15px; line-height: 1.65; color: #4d4535; }

/* charges table */
.policy-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: 14px;
}

.policy-table {
    width: 100%;
    min-width: 560px;
    border-collapse: collapse;
    font-size: 15px;
}

.policy-table th {
    padding: 15px 20px;
    background: var(--navy);
    font-family: var(--font-head);
    font-size: 14px;
    font-weight: 600;
    color: var(--white);
    text-align: left;
}

.policy-table td { padding: 15px 20px; border-top: 1px solid var(--line); color: #4a4e5c; }
.policy-table tbody tr:nth-child(even) td { background: #fcf9f6; }
.policy-table td:first-child { font-weight: 600; color: var(--navy); }

.policy-charge {
    display: inline-block;
    min-width: 60px;
    padding: 3px 12px;
    border-radius: 20px;
    background: var(--cream);
    font-weight: 700;
    color: var(--gold-dark);
    text-align: center;
}

.policy-charge--full { background: #fbeceb; color: #b4452f; }

/* process steps */
.policy-steps {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px;
    counter-reset: step;
}

.policy-steps li {
    padding: 22px 20px 20px;
    border: 1px dashed #e4d3bd;
    border-radius: 14px;
    counter-increment: step;
}

.policy-steps li::before {
    content: counter(step, decimal-leading-zero);
    display: block;
    margin-bottom: 10px;
    font-family: var(--font-head);
    font-size: 28px;
    font-weight: 600;
    line-height: 1;
    color: var(--gold);
}

.policy-steps h3 { margin-bottom: 4px; font-size: 16px; font-weight: 600; }
.policy-sec .policy-steps p { font-size: 14.5px; line-height: 1.6; }

/* "link copied" toast */
.policy-toast {
    position: fixed;
    left: 50%;
    bottom: 28px;
    z-index: 300;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    border-radius: 40px;
    background: var(--navy);
    font-size: 14.5px;
    font-weight: 600;
    color: var(--white);
    white-space: nowrap;
    box-shadow: 0 14px 30px rgba(15, 20, 40, .25);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 20px);
    transition: opacity .35s var(--ease), transform .35s var(--ease);
}

.policy-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.policy-toast i { color: var(--gold-light); }

/* ---------- Policy responsive ---------- */
@media (max-width: 1199px) {
    .policy-glance__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 991px) {
    .policy { padding-top: 14px; }
    .policy-layout { grid-template-columns: minmax(0, 1fr); gap: 0; }

    /* the index becomes a sticky strip of chips above the article */
    .policy-aside {
        position: sticky;
        top: 78px;
        z-index: 5;
        margin: 0 calc(-1 * clamp(16px, 3.2vw, 48px)) 22px;
    }

    .policy-toc {
        position: static;
        max-height: none;
        padding: 10px clamp(16px, 3.2vw, 48px) 0;
        border: 0;
        border-radius: 0;
        background: rgba(252, 249, 246, .94);
        backdrop-filter: blur(8px);
        box-shadow: none;
    }

    .policy-toc__head,
    .policy-legal { display: none; }
    .policy-progress { order: 1; margin: 10px calc(-1 * clamp(16px, 3.2vw, 48px)) 0; border-radius: 0; }

    .policy-toc__nav {
        display: flex;
        gap: 8px;
        padding: 2px;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
    }

    .policy-toc__nav::-webkit-scrollbar { display: none; }

    .policy-toc__link {
        flex: none;
        gap: 10px;
        padding: 8px 16px;
        border: 1px solid var(--line);
        border-radius: 40px;
        background: var(--white);
        font-size: 14px;
        white-space: nowrap;
    }

    .policy-toc__link:last-child { border-bottom: 1px solid var(--line); }
    .policy-toc__link:hover { transform: none; }
    .policy-toc__link.is-active { border-color: var(--gold); }

    .policy-sec { scroll-margin-top: 160px; }
}

@media (max-width: 767px) {
    .policy-list--cols { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 575px) {
    /* stronger wash so the title stays readable over darker banner photos */
    .page-policy .page-hero::before {
        background: linear-gradient(90deg, rgba(253, 244, 238, .94) 0%, rgba(253, 244, 238, .78) 70%, rgba(253, 244, 238, .45) 100%);
    }

    .policy-meta { font-size: 13.5px; }

    .policy-aside { top: 70px; }

    .policy-glance__grid { grid-template-columns: minmax(0, 1fr); }
    .policy-print { width: 100%; justify-content: center; }

    .policy-sec__head { gap: 12px; }
    .policy-sec__num { width: 44px; height: 44px; font-size: 15px; border-radius: 12px; }
    .policy-sec p { font-size: 15.5px; }
}

@media print {
    .topbar, .site-header, .nav-backdrop, .page-hero__img, .policy-aside,
    .policy-print, .policy-sec__link, .policy-toast, .cta-box-wrap, .site-footer, .float-contact, .to-top { display: none !important; }

    [data-aos] { opacity: 1 !important; transform: none !important; }

    .page-hero { height: auto; background: none; }
    .page-hero::before { display: none; }
    .page-hero__content { position: static; padding: 0 0 20px; }
    .page-hero__content .container { transform: none !important; opacity: 1 !important; }

    .policy { padding: 0; background: none; }
    .policy-layout { display: block; }
    .policy-glance { color: #333; background: none; border: 1px solid #ccc; }
    .policy-glance h2, .policy-glance h3 { color: var(--navy); }
    .policy-sec { padding: 18px 0; border: 0; box-shadow: none; }
    .policy-sec::before { display: none; }
}

/* ==========================================================================
   Scrollbars - slim, site-wide
   ========================================================================== */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track,
::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-thumb { border-radius: 4px; background: rgba(180, 126, 18, .45); }
::-webkit-scrollbar-thumb:hover { background: var(--gold); }

/* Firefox only: in Chromium these properties would switch off the slimmer styles above */
@supports (-moz-appearance: none) {
    * { scrollbar-width: thin; scrollbar-color: rgba(180, 126, 18, .45) transparent; }
}
/* ---------- Rich text blocks (admin HTML editor): lists, quotes, tables, images inside a "Paragraph" block ---------- */
.post-rich > * + * { margin-top: 16px; }
.post-rich > :first-child { margin-top: 0; }
.post-rich h2, .post-rich h3, .post-rich h4 { margin-top: 28px; }
.post-rich h4 { font-size: clamp(16px, 1.2vw, 19px); font-weight: 600; }
.post-rich ul, .post-rich ol { display: grid; gap: 10px; padding: 0; list-style: none; }
.post-rich ul > li, .post-rich ol > li { position: relative; padding-left: 36px; }
.post-rich ul > li::before {
    content: "\f00c";
    position: absolute;
    left: 0;
    top: .3em;
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 11px;
    color: var(--gold-dark);
    background: #fbf3e4;
}
.post-rich ol { counter-reset: rich-step; }
.post-rich ol > li::before {
    counter-increment: rich-step;
    content: counter(rich-step);
    position: absolute;
    left: 0;
    top: .3em;
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-family: var(--font-head);
    font-size: 12px;
    color: var(--gold-dark);
    background: #fbf3e4;
}
.post-rich blockquote { padding: 16px 22px; border-left: 3px solid var(--gold); border-radius: 0 14px 14px 0; font-style: italic; background: #fbf6ec; }
.post-rich img { max-width: 100%; height: auto; border-radius: 16px; box-shadow: 0 16px 36px rgba(15, 20, 40, .14); }
.post-rich table { width: 100%; border-collapse: collapse; font-size: 15px; display: block; overflow-x: auto; }
.post-rich th, .post-rich td { padding: 10px 14px; border: 1px solid rgba(15, 20, 40, .1); text-align: left; vertical-align: top; }
.post-rich th { font-weight: 700; color: var(--navy); background: #fbf3e4; }
.post-rich hr { border: 0; border-top: 1px solid rgba(15, 20, 40, .12); }
/* tip boxes and photos kept from the old content blocks inside the HTML editor's article */
.post-rich .post-tip p { margin-top: 0; }
.post-rich .post-figure img { box-shadow: 0 16px 36px rgba(15, 20, 40, .14); }
.post-rich blockquote p + p { margin-top: 8px; }
.post-rich p:empty { display: none; }

/* FAQ answers can now have paragraphs and lists too */
.faq-a__body > * + * { margin-top: 10px; }
.faq-a__body ul, .faq-a__body ol { padding-left: 1.3em; }
.faq-a__body ul { list-style: disc; }
.faq-a__body ol { list-style: decimal; }
.faq-a__body li + li { margin-top: 4px; }

/* ==========================================================================
   Sitemap page (/sitemap)
   ========================================================================== */
.smap { padding: clamp(50px, 5vw, 80px) 0 clamp(60px, 6vw, 100px); background: linear-gradient(180deg, #fff 0%, var(--cream) 100%); }
.smap [hidden] { display: none !important; }

.smap-intro { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 40px; margin-bottom: clamp(26px, 3vw, 40px); }
.smap-intro > div { max-width: 640px; }
.smap-intro p { margin-top: 12px; font-size: clamp(15px, 1.15vw, 17px); line-height: 1.7; color: #3a3c45; }
.smap-search { position: relative; flex: 0 1 360px; width: 100%; }
.smap-search i { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: var(--gold); }
.smap-search input { width: 100%; height: 52px; padding: 0 18px 0 46px; border: 1px solid rgba(180, 126, 18, .3); border-radius: 30px; font: inherit; font-size: 15px; color: var(--navy); background: #fff; box-shadow: 0 10px 24px -16px rgba(15, 20, 40, .35); outline: none; transition: border-color .3s, box-shadow .3s; }
.smap-search input:focus { border-color: var(--gold); box-shadow: 0 0 0 4px rgba(212, 165, 72, .18); }
.smap-none { margin: 0 0 24px; font-size: 16px; color: var(--muted); }
.smap-none a { color: var(--gold-dark); font-weight: 700; }

.smap-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: clamp(16px, 2vw, 26px); }
.smap-card, .smap-block { border: 1px solid rgba(15, 20, 40, .07); border-radius: 22px; background: #fff; box-shadow: 0 18px 40px -28px rgba(15, 20, 40, .35); }
.smap-card { padding: clamp(20px, 2vw, 28px); }
.smap-card__title, .smap-block__head h3 { display: flex; align-items: center; gap: 12px; font-size: clamp(17px, 1.3vw, 20px); font-weight: 600; color: var(--navy); }
.smap-card__title i, .smap-block__head h3 i { display: grid; place-items: center; flex: 0 0 38px; width: 38px; height: 38px; border-radius: 12px; font-size: 15px; color: var(--gold-dark); background: #fbf3e4; }
.smap-card__title { margin-bottom: 14px; }

.smap-list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.smap-list a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; font-size: 15px; color: #2c2f3a; transition: background .25s, color .25s, padding .25s; }
.smap-list a i { width: 18px; font-size: 13px; text-align: center; color: var(--gold); }
.smap-list a small { margin-left: auto; padding: 1px 9px; border-radius: 20px; font-size: 12px; font-weight: 700; color: var(--gold-dark); background: #fbf3e4; }
.smap-list a:hover, .smap-list a:focus-visible { padding-left: 14px; color: var(--gold-dark); background: #fbf6ec; }

.smap-block { margin-top: clamp(22px, 2.6vw, 34px); padding: clamp(22px, 2.4vw, 34px); }
.smap-block__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; margin-bottom: 20px; }
.smap-more { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--gold-dark); }
.smap-more i { transition: transform .3s var(--ease); }
.smap-more:hover i { transform: translateX(4px); }

.smap-dests { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px 26px; }
.smap-dest { padding: 4px 0 6px; border-top: 1px solid rgba(15, 20, 40, .07); }
.smap-dest__name { display: flex; align-items: center; gap: 12px; padding: 12px 0 8px; color: var(--navy); }
.smap-dest__name > i { display: grid; place-items: center; flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%; font-size: 13px; color: #fff; background: var(--gold-grad); }
.smap-dest__name span { display: grid; font-family: var(--font-head); font-size: 16px; font-weight: 600; line-height: 1.3; }
.smap-dest__name small { font-family: inherit; font-size: 12.5px; font-weight: 500; color: var(--muted); }
.smap-dest__name:hover span { color: var(--gold-dark); }
.smap-list--sub { padding-left: 34px; }
.smap-list--sub a { padding: 6px 10px; font-size: 14.5px; }
.smap-stars { margin-left: auto; padding: 0 !important; font-size: 11px !important; letter-spacing: 1px; color: var(--gold) !important; background: none !important; }

.smap-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 22px; padding: 0; list-style: none; }
.smap-chips a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border: 1px solid rgba(180, 126, 18, .28); border-radius: 30px; font-size: 14px; font-weight: 600; color: var(--navy); background: #fffaf2; transition: background .25s, color .25s, border-color .25s; }
.smap-chips a i { font-size: 12px; color: var(--gold); }
.smap-chips a small { font-size: 12px; color: var(--muted); }
.smap-chips a:hover { color: #fff; border-color: transparent; background: var(--gold-grad); }
.smap-chips a:hover i, .smap-chips a:hover small { color: #fff; }

.smap-posts { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 4px 26px; margin: 0; padding: 0; list-style: none; }
.smap-posts a { display: grid; gap: 3px; padding: 12px 0 12px 16px; border-left: 2px solid rgba(180, 126, 18, .25); transition: border-color .3s, padding .3s; }
.smap-posts__title { font-size: 15px; font-weight: 600; line-height: 1.45; color: var(--navy); }
.smap-posts small { font-size: 12.5px; color: var(--muted); }
.smap-posts a:hover { padding-left: 20px; border-left-color: var(--gold); }
.smap-posts a:hover .smap-posts__title { color: var(--gold-dark); }

@media (max-width: 575px) {
    .smap-search { flex-basis: 100%; }
    .smap-posts { grid-template-columns: 1fr; }
}

/* ---------- SEO copy: home about paragraph, inline links in intro text, hotel planning guides ---------- */
.about-text .about-copy {
    max-width: 560px;
    margin: clamp(14px, 1.5vw, 22px) 0 clamp(20px, 2vw, 30px);
    font-size: clamp(15px, 1.1vw, 17px);
    line-height: 1.75;
    color: #3a3c45;
}
.about-copy a, .svc-intro__text a, .who-text p a, .ab-rich a {
    color: var(--gold-dark);
    text-decoration: underline;
    text-decoration-color: rgba(180, 126, 18, .35);
    text-underline-offset: 3px;
    transition: text-decoration-color .2s var(--ease);
}
.about-copy a:hover, .svc-intro__text a:hover, .who-text p a:hover, .ab-rich a:hover { text-decoration-color: currentColor; }
.ht-guides { padding-bottom: clamp(30px, 3vw, 50px); }
.ht-guides__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 12px;
    margin-top: clamp(18px, 2vw, 28px);
}
.ht-guides__list a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--white);
    font-size: 14px;
    font-weight: 600;
    color: var(--navy);
    transition: border-color .2s var(--ease), color .2s var(--ease);
}
.ht-guides__list a i { color: var(--gold); }
.ht-guides__list a:hover { border-color: var(--gold); color: var(--gold-dark); }
@media (max-width: 991px) {
    .about-text .about-copy { margin-inline: auto; }
}

/* ==========================================================================
   Mobile usability fixes (touch targets + floating-button clearance)
   ========================================================================== */
/* Touch screens: stand-alone text links in the top bar and footer were 18-21px tall (the two
   footer phone numbers sat back to back), under the 24px minimum target size. Padding grows the
   tap area without changing the look; desktop mouse users keep the original spacing. */
@media (pointer: coarse) {
    .topbar-info a,
    .footer-contact li a,
    .footer-legal a,
    .footer-credit a { display: inline-block; padding-block: 4px; }
    .blog-card__more { padding-block: 4px; }
}

/* Phones: the fixed WhatsApp / call / back-to-top stack (54px wide, 16px from the edge) sits over
   the bottom-right corner, so at the end of the page the centred copyright, legal links and credit
   ran underneath it with no way to scroll them clear. Inset the text so it stays left of that
   column (78px from the screen edge, minus the container's own gutter); centring is kept by
   insetting both sides. Tablets and up are wide enough that the centred text already clears it. */
@media (max-width: 575px) {
    .footer-bottom .container { padding-inline: calc(78px - clamp(16px, 6.6vw, 96px)); }
}


/* ==========================================================================
   Merged from gallery.css
   ========================================================================== */
/* ==========================================================================
   Gallery page (loaded after style.css; uses its tokens and helpers)
   ========================================================================== */
/* clip (not hidden) so the off-canvas mobile nav can't widen the layout
   viewport, which would push fixed elements like the lightbox off-screen */
html,
body { overflow-x: clip; }

body.gl-locked { overflow: hidden; }

/* ---------- Banner with scrolling photo collage ---------- */
.gl-hero {
    height: clamp(440px, 34vw, 640px);
    background:
        radial-gradient(circle at 18% 30%, rgba(212, 165, 72, .16), transparent 42%),
        linear-gradient(120deg, #fdf6f0 0%, #f6ebe0 100%);
}

.gl-collage {
    position: absolute;
    top: -18%;
    bottom: -18%;
    right: -3%;
    width: 54%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(10px, 1vw, 16px);
    transform: rotate(-7deg);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 26%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 26%);
    pointer-events: none;
}

.gl-collage__col { overflow: hidden; }
.gl-collage__col:nth-child(2) { margin-top: -18%; }

.gl-collage__track { animation: glColUp 60s linear infinite; }
.gl-collage__col--down .gl-collage__track { animation-name: glColDown; animation-duration: 70s; }

/* margin (not gap) keeps the cloned half exactly 50% tall, so the loop is seamless */
.gl-collage__track img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    margin-bottom: clamp(10px, 1vw, 16px);
    border-radius: 16px;
    box-shadow: 0 14px 30px rgba(60, 40, 10, .18);
}

@keyframes glColUp { to { transform: translateY(-50%); } }
@keyframes glColDown { from { transform: translateY(-50%); } to { transform: translateY(0); } }

.gl-hero-stats {
    display: flex;
    gap: clamp(18px, 2.2vw, 34px);
    margin-top: clamp(18px, 1.8vw, 26px);
}

.gl-hero-stats li { position: relative; display: flex; flex-direction: column; line-height: 1.15; }

.gl-hero-stats li + li::before {
    content: "";
    position: absolute;
    left: calc(clamp(18px, 2.2vw, 34px) / -2);
    top: 8%;
    bottom: 8%;
    width: 1px;
    background: rgba(180, 126, 18, .35);
}

.gl-hero-stats strong {
    font-family: var(--font-head);
    font-size: clamp(24px, 2.1vw, 34px);
    font-weight: 600;
    color: var(--gold-dark);
}

.gl-hero-stats span {
    margin-top: 4px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--muted);
}

.gl-hero-btn { margin-top: clamp(20px, 2vw, 30px); }
.gl-hero-btn:hover i { transform: translateY(3px); }

/* ---------- Gallery wall ---------- */
.gl-wall {
    position: relative;
    padding: clamp(56px, 5.5vw, 90px) 0;
    background:
        radial-gradient(circle at 4% 20%, rgba(212, 165, 72, .1), transparent 26%),
        radial-gradient(circle at 96% 75%, rgba(212, 165, 72, .1), transparent 26%),
        var(--white);
}

/* property rail */
.gl-rail-wrap { position: relative; margin-bottom: clamp(18px, 2vw, 28px); }

.gl-rail {
    display: flex;
    gap: clamp(10px, 1vw, 16px);
    padding: 10px 6px 16px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scroll-behavior: smooth;
    scrollbar-width: none;
}

.gl-rail::-webkit-scrollbar { display: none; }

/* soft edges only on the side that has more to scroll */
.gl-rail.has-more-right { -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
.gl-rail.has-more-left { -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%); mask-image: linear-gradient(90deg, transparent, #000 12%); }
.gl-rail.has-more-left.has-more-right { -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }

.gl-prop {
    position: relative;
    flex: 0 0 clamp(158px, 13.2vw, 206px);
    aspect-ratio: 5 / 4;
    padding: 0;
    border: 0;
    border-radius: 16px;
    overflow: hidden;
    scroll-snap-align: start;
    cursor: pointer;
    background: var(--navy);
    text-align: left;
    font-family: var(--font-body);
    box-shadow: 0 8px 20px rgba(15, 20, 40, .12);
    transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}

.gl-prop img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1s var(--ease);
}

.gl-prop::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(10, 12, 24, 0) 35%, rgba(10, 12, 24, .82) 100%);
}

.gl-prop:hover { transform: translateY(-4px); box-shadow: 0 16px 30px rgba(15, 20, 40, .2); }
.gl-prop:hover img { transform: scale(1.08); }

.gl-prop.is-active {
    transform: translateY(-4px);
    box-shadow: 0 0 0 3px var(--white), 0 0 0 5px var(--gold), 0 16px 30px rgba(180, 126, 18, .3);
}

.gl-prop:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

.gl-prop__body {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 12px;
    z-index: 1;
    color: var(--white);
}

.gl-prop__name {
    display: block;
    font-family: var(--font-head);
    font-size: clamp(14px, 1.05vw, 16px);
    font-weight: 600;
    line-height: 1.25;
}

.gl-prop__loc { display: block; margin-top: 2px; font-size: 12px; color: rgba(255, 255, 255, .78); }
.gl-prop__loc i { margin-right: 4px; font-size: 10.5px; color: var(--gold-light); }

.gl-prop__count {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 20px;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--white);
    background: rgba(15, 20, 40, .45);
    border: 1px solid rgba(255, 255, 255, .25);
    backdrop-filter: blur(6px);
}

.gl-prop.is-active .gl-prop__count { background: var(--gold-grad); border-color: transparent; }

/* "All properties" card: four covers under a navy wash */
.gl-prop--all .gl-prop__mosaic {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    opacity: .4;
}

.gl-prop--all .gl-prop__mosaic img { position: static; }

.gl-prop--all::after { background: linear-gradient(160deg, rgba(15, 20, 40, .55), rgba(15, 20, 40, .92)); }

.gl-prop__icon {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    font-size: 16px;
    color: var(--white);
    background: var(--gold-grad);
    box-shadow: 0 6px 16px rgba(180, 126, 18, .4);
}

.gl-rail-nav {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-top: -3px;
    border: 1px solid #eadfce;
    border-radius: 50%;
    color: var(--navy);
    background: var(--white);
    box-shadow: 0 8px 20px rgba(15, 20, 40, .16);
    cursor: pointer;
    transform: translateY(-50%);
    transition: opacity .3s, color .3s, background .3s, border-color .3s;
}

.gl-rail-nav--prev { left: -16px; }
.gl-rail-nav--next { right: -16px; }
.gl-rail-nav:hover { color: var(--white); background: var(--gold); border-color: var(--gold); }
.gl-rail-nav[disabled] { opacity: 0; pointer-events: none; }

/* space filter + status */
.gl-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px 24px;
    margin-bottom: clamp(20px, 2.2vw, 32px);
    padding-bottom: clamp(16px, 1.6vw, 22px);
    border-bottom: 1px solid #efe6da;
}

.gl-chips { display: flex; flex-wrap: wrap; gap: 8px; }

.gl-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 8px 0 16px;
    border-radius: 40px;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    background: var(--white);
    border: 1px solid #e8dfd2;
    cursor: pointer;
    transition: color .3s, border-color .3s, background .3s, box-shadow .3s, opacity .3s;
}

.gl-chip i { font-size: 13px; color: var(--gold); transition: color .3s; }

.gl-chip__count {
    min-width: 26px;
    padding: 2px 7px;
    border-radius: 20px;
    font-size: 11.5px;
    text-align: center;
    color: var(--gold-dark);
    background: rgba(180, 126, 18, .1);
    transition: background .3s, color .3s;
}

.gl-chip:hover { border-color: var(--gold-light); }
.gl-chip.is-active { color: var(--white); background: var(--navy); border-color: var(--navy); box-shadow: 0 8px 18px rgba(15, 20, 40, .2); }
.gl-chip.is-active i { color: var(--gold-light); }
.gl-chip.is-active .gl-chip__count { color: var(--white); background: var(--gold-grad); }
.gl-chip.is-empty { opacity: .45; }

.gl-status { font-size: 14px; color: var(--muted); }
.gl-status b { color: var(--navy); }
.gl-status em { font-style: normal; color: var(--gold-dark); font-weight: 600; }

/* ---------- Photo grid (bento) ---------- */
.gl-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: clamp(150px, 15.5vw, 250px);
    grid-auto-flow: dense;
    gap: clamp(10px, 1.1vw, 18px);
}

.gl-item {
    position: relative;
    padding: 0;
    border: 0;
    border-radius: 16px;
    overflow: hidden;
    cursor: zoom-in;
    background: #f1e8dc;
    font-family: var(--font-body);
    text-align: left;
    opacity: 0;
    animation: glIn .8s var(--ease) forwards;
    animation-delay: var(--d, 0s);
    isolation: isolate;
}

.gl-item--big { grid-column: span 2; grid-row: span 2; }
.gl-item--wide { grid-column: span 2; }

@keyframes glIn {
    from { opacity: 0; transform: translateY(28px) scale(.97); }
    to { opacity: 1; transform: none; }
}

/* shimmer while the photo loads */
.gl-item::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(110deg, #f1e8dc 30%, #fbf6ef 50%, #f1e8dc 70%);
    background-size: 220% 100%;
    animation: glShimmer 1.4s linear infinite;
}

.gl-item.is-loaded::before { display: none; }

@keyframes glShimmer { to { background-position: -220% 0; } }

.gl-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity .6s var(--ease), transform 1.2s var(--ease);
}

.gl-item.is-loaded img { opacity: 1; }
.gl-item:hover img { transform: scale(1.08); }

.gl-item__shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(10, 12, 24, 0) 40%, rgba(10, 12, 24, .78) 100%);
    opacity: 0;
    transition: opacity .5s var(--ease);
}

.gl-item__zoom {
    position: absolute;
    top: 14px;
    right: 14px;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    font-size: 15px;
    color: var(--white);
    background: rgba(255, 255, 255, .18);
    border: 1px solid rgba(255, 255, 255, .4);
    backdrop-filter: blur(6px);
    opacity: 0;
    transform: scale(.6) rotate(-45deg);
    transition: opacity .4s var(--ease), transform .5s var(--ease), background .3s;
}

.gl-item__cap {
    position: absolute;
    left: clamp(14px, 1.4vw, 22px);
    right: clamp(14px, 1.4vw, 22px);
    bottom: clamp(12px, 1.3vw, 20px);
    color: var(--white);
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .45s var(--ease), transform .55s var(--ease);
}

.gl-item__type {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--gold-light);
}

.gl-item__name {
    display: block;
    font-family: var(--font-head);
    font-size: clamp(15px, 1.15vw, 18px);
    font-weight: 600;
    line-height: 1.25;
}

.gl-item__loc { display: block; margin-top: 2px; font-size: 13px; color: rgba(255, 255, 255, .8); }
.gl-item__loc i { margin-right: 5px; font-size: 11px; color: var(--gold-light); }

.gl-item:hover .gl-item__shade,
.gl-item:focus-visible .gl-item__shade,
.gl-item--big .gl-item__shade { opacity: 1; }

.gl-item:hover .gl-item__cap,
.gl-item:focus-visible .gl-item__cap,
.gl-item--big .gl-item__cap { opacity: 1; transform: none; }

.gl-item:hover .gl-item__zoom,
.gl-item:focus-visible .gl-item__zoom { opacity: 1; transform: none; }

.gl-item__zoom:hover { background: var(--gold); }

.gl-item--big .gl-item__name { font-size: clamp(18px, 1.6vw, 26px); }
.gl-item:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

/* touch screens have no hover: keep captions visible */
@media (hover: none) {
    .gl-item__shade,
    .gl-item__cap { opacity: 1; transform: none; }
    .gl-item__type { display: none; }
}

.gl-empty {
    padding: 40px 0 10px;
    text-align: center;
    color: var(--muted);
}

.gl-empty button {
    padding: 0;
    border: 0;
    font: inherit;
    font-weight: 700;
    color: var(--gold-dark);
    background: none;
    text-decoration: underline;
    cursor: pointer;
}

.gl-more { margin-top: clamp(28px, 3vw, 44px); text-align: center; }
.gl-more[hidden] { display: none; }

/* ---------- Lightbox ---------- */
.gl-lb {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto auto;
    color: var(--white);
    background: #07080f;
    opacity: 0;
    transition: opacity .4s var(--ease);
}

.gl-lb[hidden] { display: none; }
.gl-lb.is-open { opacity: 1; }

/* blurred copy of the current photo tints the backdrop */
.gl-lb__bg {
    position: absolute;
    inset: -60px;
    z-index: -1;
    background-size: cover;
    background-position: center;
    filter: blur(50px) saturate(1.3) brightness(.32);
    transition: opacity .6s var(--ease);
}

.gl-lb__top {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 16px;
    padding: 16px clamp(14px, 2vw, 28px);
}

.gl-lb__info { min-width: 0; line-height: 1.3; }

.gl-lb__info strong {
    display: block;
    font-family: var(--font-head);
    font-size: clamp(15px, 1.2vw, 19px);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gl-lb__info span { font-size: 13px; color: rgba(255, 255, 255, .65); }
.gl-lb__info span i { margin: 0 5px 0 0; color: var(--gold-light); }

.gl-lb__count {
    font-family: var(--font-head);
    font-size: 14px;
    letter-spacing: .12em;
    color: rgba(255, 255, 255, .6);
}

.gl-lb__count b { font-size: 18px; font-weight: 600; color: var(--white); }

.gl-lb__tools { display: flex; justify-content: flex-end; gap: 8px; }

.gl-lb__btn,
.gl-lb__arrow {
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--white);
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .16);
    backdrop-filter: blur(8px);
    cursor: pointer;
    transition: background .3s, border-color .3s, transform .3s var(--ease);
}

.gl-lb__btn { width: 44px; height: 44px; font-size: 16px; }

.gl-lb__btn:hover,
.gl-lb__arrow:hover { background: var(--gold); border-color: var(--gold); }

.gl-lb__btn:focus-visible,
.gl-lb__arrow:focus-visible,
.gl-lb__thumb:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 3px; }

.gl-lb__stage {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 clamp(14px, 6.5vw, 110px);
    touch-action: pan-y;
}

.gl-lb__figure {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    margin: 0;
}

.gl-lb__figure img {
    max-width: 100%;
    max-height: 100%;
    border-radius: 12px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .55);
    transition: opacity .45s var(--ease), transform .55s var(--ease);
    user-select: none;
    -webkit-user-drag: none;
}

.gl-lb__spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    margin: -20px 0 0 -20px;
    border: 3px solid rgba(255, 255, 255, .15);
    border-top-color: var(--gold-light);
    border-radius: 50%;
    opacity: 0;
    animation: glSpin .8s linear infinite;
    transition: opacity .3s;
    pointer-events: none;
}

.gl-lb__figure.is-loading .gl-lb__spinner { opacity: 1; }

@keyframes glSpin { to { transform: rotate(360deg); } }

.gl-lb__arrow {
    position: absolute;
    top: 50%;
    z-index: 1;
    width: 56px;
    height: 56px;
    margin-top: -28px;
    font-size: 18px;
}

.gl-lb__arrow--prev { left: clamp(10px, 2vw, 32px); }
.gl-lb__arrow--next { right: clamp(10px, 2vw, 32px); }
.gl-lb__arrow--prev:hover { transform: translateX(-3px); }
.gl-lb__arrow--next:hover { transform: translateX(3px); }

.gl-lb__progress { height: 2px; margin: 14px clamp(14px, 2vw, 28px) 0; background: rgba(255, 255, 255, .08); }
.gl-lb__progress span { display: block; width: 0; height: 100%; background: var(--gold-grad); }
.gl-lb.is-playing .gl-lb__progress span { animation: glProgress var(--slide, 4.5s) linear forwards; }

@keyframes glProgress { to { width: 100%; } }

.gl-lb__thumbs {
    display: flex;
    gap: 8px;
    padding: 12px clamp(14px, 2vw, 28px) 18px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .2) transparent;
}

/* centre the strip when it is shorter than the screen */
.gl-lb__thumb:first-child { margin-left: auto; }
.gl-lb__thumb:last-child { margin-right: auto; }

.gl-lb__thumb {
    flex: 0 0 auto;
    width: 84px;
    height: 58px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    background: rgba(255, 255, 255, .06);
    opacity: .42;
    transition: opacity .3s, box-shadow .3s, transform .3s var(--ease);
}

.gl-lb__thumb img { width: 100%; height: 100%; object-fit: cover; }
.gl-lb__thumb:hover { opacity: .8; }
.gl-lb__thumb.is-active { opacity: 1; box-shadow: 0 0 0 2px var(--gold-light); transform: translateY(-2px); }

/* ---------- Gallery responsive ---------- */
@media (max-width: 1199px) {
    .gl-collage { width: 60%; }
}

@media (max-width: 991px) {
    .gl-hero { height: 500px; }
    .gl-hero.page-hero::before { background: linear-gradient(90deg, rgba(253, 244, 238, .94) 0%, rgba(253, 244, 238, .82) 45%, rgba(253, 244, 238, 0) 80%); }
    .gl-collage { width: 100%; right: -20%; opacity: .9; }

    .gl-grid { grid-template-columns: repeat(3, 1fr); grid-auto-rows: clamp(140px, 24vw, 220px); }
    .gl-item--wide { grid-column: span 1; }

    .gl-rail-nav { display: none; }
    .gl-bar { flex-direction: column; flex-wrap: nowrap; align-items: stretch; }

    /* one swipeable row instead of three wrapped rows of chips */
    .gl-chips { min-width: 0; flex-wrap: nowrap; overflow-x: auto; margin-inline: -4px; padding: 2px 4px 4px; scrollbar-width: none; }
    .gl-chips::-webkit-scrollbar { display: none; }
    .gl-chip { flex: 0 0 auto; }
}

@media (max-width: 575px) {
    .gl-hero { height: 470px; }
    .gl-hero.page-hero::before { background: linear-gradient(180deg, rgba(253, 244, 238, .92) 0%, rgba(253, 244, 238, .8) 70%, rgba(253, 244, 238, .45)); }
    .gl-hero .page-hero__title { text-wrap: balance; }
    .gl-collage { right: -40%; width: 140%; }

    /* two columns: the wide tile spans both so each block of 12 fills whole rows */
    .gl-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 42vw; gap: 8px; }
    .gl-item--wide { grid-column: span 2; }
    .gl-item { border-radius: 12px; }
    .gl-item__zoom { display: none; }
    .gl-item__name { font-size: 14px; }
    .gl-item__loc { font-size: 11.5px; }
    .gl-item--big .gl-item__name { font-size: 18px; }

    .gl-lb__top { grid-template-columns: 1fr auto; }
    .gl-lb__count { grid-row: 2; grid-column: 1 / -1; text-align: center; }
    .gl-lb__btn { width: 40px; height: 40px; font-size: 15px; }
    .gl-lb__arrow { width: 42px; height: 42px; margin-top: -21px; font-size: 15px; background: rgba(7, 8, 15, .45); }
    .gl-lb__thumb { width: 64px; height: 46px; }
}

/* phones held sideways: give the photo the height, drop the thumbnail strip */
@media (max-height: 500px) and (orientation: landscape) {
    .gl-lb__top { grid-template-columns: 1fr auto 1fr; padding-block: 8px; }
    .gl-lb__count { grid-row: auto; grid-column: auto; }
    .gl-lb__btn { width: 38px; height: 38px; font-size: 14px; }
    .gl-lb__arrow { width: 42px; height: 42px; margin-top: -21px; font-size: 15px; background: rgba(7, 8, 15, .45); }
    .gl-lb__progress { margin-block: 8px 12px; }
    .gl-lb__thumbs { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .gl-collage__track,
    .gl-item::before { animation: none; }
    .gl-item { animation: none; opacity: 1; }
    .gl-item img,
    .gl-lb__figure img { transition: none; }
}


/* ==========================================================================
   Merged from hotels.css
   ========================================================================== */
/* ==========================================================================
   Hotels & Resorts (hotels.html + hotel-details.html)
   Builds on the blog components in style.css (chips, search, side cards, post hero)
   ========================================================================== */

/* ---------- Banner stats ---------- */
.ht-stats-wrap { position: relative; z-index: 3; margin-top: clamp(-56px, -3.4vw, -36px); }

.ht-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-radius: 22px;
    background: var(--white);
    box-shadow: 0 18px 44px rgba(120, 90, 40, .14);
}

.ht-stats li {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: clamp(18px, 1.8vw, 26px) 16px;
}

.ht-stats li + li { border-left: 1px solid #f1e9dc; }

.ht-stats i {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 14px;
    font-size: 19px;
    color: var(--gold);
    background: #fbf3e4;
}

.ht-stats strong {
    display: block;
    font-family: var(--font-head);
    font-size: clamp(24px, 2vw, 32px);
    font-weight: 600;
    line-height: 1.1;
    color: var(--navy);
}

.ht-stats small { font-size: 13.5px; color: var(--muted); }

/* ---------- Listing ---------- */
.ht-list { padding: clamp(40px, 4.4vw, 70px) 0 clamp(40px, 4vw, 64px); }

.ht-subbar__left { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; }

/* star category: segmented control */
.ht-seg {
    display: inline-flex;
    padding: 4px;
    border: 1.5px solid #e7dccb;
    border-radius: 44px;
    background: var(--white);
}

.ht-seg__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 14px;
    border: 0;
    border-radius: 36px;
    background: transparent;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    color: var(--navy);
    cursor: pointer;
    transition: color .3s, background .3s, box-shadow .3s;
}

.ht-seg__btn i { font-size: 11px; color: var(--gold); transition: color .3s; }
.ht-seg__btn span { font-size: 12px; font-weight: 500; color: var(--muted); transition: color .3s; }
.ht-seg__btn:hover { color: var(--gold-dark); }

.ht-seg__btn.is-active {
    color: var(--white);
    background: var(--gold-grad);
    box-shadow: 0 6px 16px rgba(180, 126, 18, .3);
}

.ht-seg__btn.is-active i,
.ht-seg__btn.is-active span { color: var(--white); }

/* destination groups */
.ht-group + .ht-group { margin-top: clamp(44px, 4.6vw, 72px); }

.ht-group__head {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: clamp(20px, 2vw, 30px);
}

.ht-group__icon {
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 18px;
    font-size: 22px;
    color: var(--white);
    background: var(--gold-grad);
    box-shadow: 0 10px 22px rgba(180, 126, 18, .3);
}

.ht-group__head h2 {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 14px;
    font-size: clamp(24px, 2.2vw, 34px);
    line-height: 1.2;
}

.ht-group__head h2 span {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    color: var(--gold-dark);
}

.ht-group__head p { max-width: 760px; margin-top: 6px; font-size: 15.5px; color: var(--muted); }

/* ---------- Cards ---------- */
.ht-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(18px, 1.8vw, 28px);
}

.ht-card {
    display: flex;
    flex-direction: column;
    border-radius: 22px;
    overflow: hidden;
    background: var(--white);
    box-shadow: 0 10px 30px rgba(120, 90, 40, .1);
    opacity: 0;
    animation: cardIn .7s var(--ease) forwards;
    animation-delay: calc(var(--i, 0) * 70ms);
    transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}

.ht-card:hover { transform: translateY(-8px); box-shadow: 0 24px 46px rgba(120, 90, 40, .2); }

.ht-card__media {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #efe5d6;
}

.ht-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.1s var(--ease);
}

.ht-card:hover .ht-card__media img { transform: scale(1.08); }

/* properties without photos yet */
.ht-ph {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: rgba(255, 255, 255, .9);
    background:
        radial-gradient(circle at 80% 10%, rgba(212, 165, 72, .35), transparent 45%),
        linear-gradient(160deg, #1d2547 0%, var(--navy) 70%);
    overflow: hidden;
}

/* layered ridgelines */
.ht-ph::before,
.ht-ph::after {
    content: "";
    position: absolute;
    left: -10%;
    right: -10%;
    bottom: 0;
    height: 46%;
    background: rgba(212, 165, 72, .16);
    clip-path: polygon(0 70%, 14% 38%, 26% 58%, 42% 18%, 58% 52%, 72% 30%, 86% 56%, 100% 34%, 100% 100%, 0 100%);
}

.ht-ph::after {
    height: 30%;
    background: rgba(212, 165, 72, .26);
    clip-path: polygon(0 60%, 18% 30%, 34% 62%, 50% 26%, 66% 58%, 82% 22%, 100% 50%, 100% 100%, 0 100%);
}

.ht-ph i {
    position: relative;
    z-index: 1;
    width: 64px;
    height: 64px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(212, 165, 72, .5);
    border-radius: 50%;
    font-size: 24px;
    color: var(--gold-light);
    transition: transform .8s var(--ease);
}

.ht-card:hover .ht-ph i { transform: scale(1.1) rotate(-6deg); }

.ht-ph small {
    position: relative;
    z-index: 1;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
}

.ht-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--white);
    background: var(--gold-grad);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .18);
}

.ht-badge i { font-size: 10px; }

.ht-card__count {
    position: absolute;
    right: 14px;
    bottom: 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border-radius: 30px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--white);
    background: rgba(15, 20, 40, .62);
    backdrop-filter: blur(4px);
}

.ht-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 8px;
    padding: 18px 20px 20px;
}

.ht-card__dest {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    align-self: flex-start;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--gold);
}

.ht-card h3 { font-size: 18.5px; font-weight: 500; line-height: 1.35; }
.ht-card h3 a { transition: color .3s; }
.ht-card h3 a:hover { color: var(--gold-dark); }

.ht-card__area { display: flex; gap: 8px; font-size: 14px; line-height: 1.5; color: var(--muted); }
.ht-card__area i { margin-top: 4px; font-size: 12px; color: var(--gold); }

.ht-tags { display: flex; flex-wrap: wrap; gap: 6px; }

.ht-tags li {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    color: #5a5d68;
    background: #f5f1ea;
}

.ht-tags li.is-veg { color: #2f7a3b; background: #e9f5ea; }

.ht-card__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid var(--line);
}

.ht-card__map {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: 15px;
    color: var(--gold-dark);
    background: #fbf3e4;
    transition: color .3s, background .3s, transform .3s var(--ease);
}

.ht-card__map:hover { color: var(--white); background: var(--gold); transform: translateY(-2px); }

/* ---------- Details: hero ---------- */
.ht-hero__badges { display: flex; flex-wrap: wrap; gap: 10px; }
.ht-hero__badges .post-hero__cat { margin-bottom: 16px; }
.post-hero__cat.ht-veg { background: linear-gradient(135deg, #3f9a4c, #2b7a37); box-shadow: 0 8px 20px rgba(43, 122, 55, .35); }

.ht-stars { display: inline-flex; gap: 3px; }
.ht-stars i { margin: 0; font-size: 12px; color: var(--gold-light); }

.ht-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(20px, 2vw, 28px); }

.ht-btn-glass {
    border: 1px solid rgba(255, 255, 255, .4);
    font-family: var(--font-body);
    color: var(--white);
    background: rgba(255, 255, 255, .12);
    backdrop-filter: blur(6px);
    transition: background .35s, border-color .35s, transform .35s var(--ease);
}

.ht-btn-glass:hover { background: rgba(255, 255, 255, .24); border-color: rgba(255, 255, 255, .7); transform: translateY(-2px); }

/* ---------- Details: article ---------- */
.ht-sec + .ht-sec { margin-top: clamp(40px, 4vw, 60px); padding-top: clamp(36px, 3.6vw, 52px); border-top: 1px solid var(--line); }
.ht-sec { scroll-margin-top: 110px; }

.ht-sec .eyebrow { margin-bottom: 8px; }

.ht-sec__title {
    margin-bottom: clamp(18px, 1.8vw, 26px);
    font-size: clamp(24px, 2.1vw, 34px);
    line-height: 1.2;
}

.ht-sec > p { font-size: 16.5px; line-height: 1.8; color: #3a3c45; }

.ht-sec > .ht-lead {
    font-family: var(--font-head);
    font-size: clamp(17px, 1.4vw, 21px);
    line-height: 1.65;
    color: var(--navy);
}
.ht-sec > p + p { margin-top: 14px; }

.ht-facts {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 12px;
    margin-top: clamp(24px, 2.4vw, 32px);
}

.ht-facts li {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid #f0e7d8;
    border-radius: 16px;
    background: #fdfaf5;
}

.ht-facts__icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 12px;
    font-size: 16px;
    color: var(--gold);
    background: var(--white);
    box-shadow: 0 6px 14px rgba(120, 90, 40, .1);
}

.ht-facts small { display: block; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.ht-facts strong { display: block; font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--navy); }

/* photo mosaic */
.ht-photos {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: clamp(110px, 10vw, 160px);
    gap: 10px;
}

.ht-photo {
    position: relative;
    padding: 0;
    border: 0;
    border-radius: 14px;
    overflow: hidden;
    background: #efe5d6;
    cursor: zoom-in;
}

.ht-photo:first-child { grid-column: span 2; grid-row: span 2; }

.ht-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .9s var(--ease), filter .5s;
}

.ht-photo:hover img { transform: scale(1.07); }
.ht-photo:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

.ht-photo__more {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-family: var(--font-head);
    font-size: 26px;
    font-weight: 600;
    color: var(--white);
    background: rgba(15, 20, 40, .58);
    transition: background .4s;
}

.ht-photo__more small { font-family: var(--font-body); font-size: 12.5px; font-weight: 500; }
.ht-photo:hover .ht-photo__more { background: rgba(15, 20, 40, .42); }

/* fewer photos: keep the mosaic full */
.ht-photos--n1 { grid-template-columns: 1fr; grid-auto-rows: clamp(240px, 26vw, 380px); }
.ht-photos--n1 .ht-photo:first-child { grid-column: auto; grid-row: auto; }
.ht-photos--n2, .ht-photos--n3 { grid-template-columns: 2fr 1fr; }
.ht-photos--n2 .ht-photo:first-child { grid-column: auto; grid-row: span 2; }
.ht-photos--n2 .ht-photo:last-child { grid-row: span 2; }
.ht-photos--n3 .ht-photo:first-child { grid-column: auto; }
.ht-photos--n4 .ht-photo:last-child { grid-column: span 2; }

.ht-nophotos {
    display: flex;
    align-items: center;
    gap: 18px 22px;
    padding: 24px 26px;
    border: 1.5px dashed #e6d6b8;
    border-radius: 20px;
    background: #fdfaf5;
}

.ht-nophotos__icon {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 50%;
    font-size: 22px;
    color: var(--gold);
    background: var(--white);
    box-shadow: 0 8px 18px rgba(120, 90, 40, .12);
}

.ht-nophotos strong { display: block; font-family: var(--font-head); font-size: 18px; font-weight: 600; color: var(--navy); }
.ht-nophotos p { margin-top: 4px; font-size: 14.5px; color: var(--muted); }
.ht-nophotos .btn { flex: 0 0 auto; margin-left: auto; height: 46px; padding: 0 22px; font-size: 15px; }

/* services */
.ht-services { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

.ht-services li {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border-radius: 16px;
    font-size: 15px;
    font-weight: 500;
    color: var(--navy);
    background: var(--cream);
    transition: transform .4s var(--ease), box-shadow .4s;
}

.ht-services li:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(120, 90, 40, .12); }

.ht-services i {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 12px;
    font-size: 15px;
    color: var(--white);
    background: var(--gold-grad);
}

.ht-nearby { font-size: 16px; color: #3a3c45; }

/* map */
.ht-map {
    border-radius: 22px;
    overflow: hidden;
    background: #efe8de;
    box-shadow: 0 14px 34px rgba(120, 90, 40, .1);
}

.ht-map iframe {
    display: block;
    width: 100%;
    height: clamp(300px, 28vw, 420px);
    border: 0;
    filter: grayscale(.3) sepia(.1);
    transition: filter .6s var(--ease);
}

.ht-map:hover iframe { filter: none; }

.ht-map__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px 20px;
    padding: 18px 22px;
    background: var(--white);
}

.ht-map__bar > span { display: flex; align-items: center; gap: 14px; }
.ht-map__bar > span > i { font-size: 22px; color: var(--gold); }
.ht-map__bar strong { display: block; font-family: var(--font-head); font-size: 16px; font-weight: 600; color: var(--navy); }
.ht-map__bar small { font-size: 13.5px; color: var(--muted); }
.ht-map__bar .btn { height: 46px; padding: 0 22px; font-size: 15px; }

/* ---------- Details: sidebar ---------- */
.ht-enquiry {
    position: relative;
    scroll-margin-top: 110px;
    border-color: #ead9b8;
    background:
        radial-gradient(circle at 100% 0%, rgba(212, 165, 72, .14), transparent 45%),
        var(--white);
}

.ht-enquiry__tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 14px;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    color: #1d7a3e;
    background: #e8f6ec;
}

.ht-enquiry h4 { margin-bottom: 10px; }
.ht-enquiry__hotel { margin-bottom: 16px; font-size: 14px; font-weight: 600; color: var(--gold-dark); }

.ht-form { display: grid; gap: 12px; }
.ht-form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
/* date pickers need ~150px before "mm/dd/yyyy" clips, so stack them in narrow cards */
.ht-form__row:has(input[type="date"]) { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

.ht-form label {
    display: grid;
    gap: 5px;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--muted);
}

.ht-form input,
.ht-form select {
    width: 100%;
    min-width: 0;
    height: 44px;
    padding: 0 12px;
    border: 1.5px solid #e7dccb;
    border-radius: 12px;
    background: var(--white);
    font-family: var(--font-body);
    font-size: 14.5px;
    color: var(--text);
    outline: none;
    transition: border-color .3s, box-shadow .3s;
}

.ht-form input:focus,
.ht-form select:focus { border-color: var(--gold); box-shadow: 0 0 0 4px rgba(180, 126, 18, .12); }

.ht-form .btn { width: 100%; margin-top: 4px; }

.ht-enquiry__call {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 14px;
    font-size: 14px;
    font-weight: 600;
    color: var(--navy);
    transition: color .3s;
}

.ht-enquiry__call i { color: var(--gold); }
.ht-enquiry__call:hover { color: var(--gold-dark); }

.side-card[hidden] { display: none; }

.ht-mini-ph {
    width: 76px;
    height: 64px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 12px;
    font-size: 20px;
    color: var(--gold-light);
    background: linear-gradient(160deg, #1d2547, var(--navy));
}

.related .ht-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ---------- Photo viewer ---------- */
body.ht-lb-open { overflow: hidden; }

.ht-lb {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(8, 10, 22, .94);
    opacity: 0;
    transition: opacity .3s;
}

.ht-lb[hidden] { display: none; }
.ht-lb.is-open { opacity: 1; }

.ht-lb__stage {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 70px clamp(16px, 8vw, 110px) 40px;
}

.ht-lb figure { margin: 0; max-width: 100%; max-height: 100%; display: flex; flex-direction: column; align-items: center; }

.ht-lb img {
    max-width: 100%;
    max-height: calc(100vh - 150px);
    border-radius: 10px;
    object-fit: contain;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
    transition: opacity .25s;
}

.ht-lb img.is-loading { opacity: .3; }

.ht-lb figcaption {
    display: flex;
    gap: 18px;
    margin-top: 14px;
    font-size: 14px;
    color: rgba(255, 255, 255, .8);
}

.ht-lb figcaption span:last-child { color: var(--gold-light); font-weight: 600; }

.ht-lb__btn {
    position: absolute;
    z-index: 2;
    width: 50px;
    height: 50px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 50%;
    font-size: 18px;
    color: var(--white);
    background: rgba(255, 255, 255, .08);
    cursor: pointer;
    transition: background .3s, border-color .3s;
}

.ht-lb__btn:hover { background: var(--gold); border-color: var(--gold); }
.ht-lb__close { top: 18px; right: 18px; }
.ht-lb__prev { left: clamp(10px, 2vw, 30px); top: 50%; transform: translateY(-50%); }
.ht-lb__next { right: clamp(10px, 2vw, 30px); top: 50%; transform: translateY(-50%); }

/* ---------- Responsive ---------- */
@media (max-width: 1399px) {
    .ht-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 991px) {
    .ht-grid,
    .related .ht-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    /* icon above the number so four stats still fit across */
    .ht-stats li { flex-direction: column; gap: 10px; padding: 18px 10px; text-align: center; }

    /* destination chips scroll edge to edge instead of stopping at the gutter */
    .ht-list .blog-filters {
        margin: -4px calc(-1 * clamp(16px, 3.2vw, 48px)) 0;
        padding: 4px clamp(16px, 3.2vw, 48px) 8px;
        scroll-padding-inline: clamp(16px, 3.2vw, 48px);
    }

    .ht-subbar__left { flex-direction: column; align-items: flex-start; }

    /* details: enquiry card takes the full row above the two smaller side cards */
    .post-aside .ht-enquiry { grid-column: 1 / -1; }
}

@media (min-width: 641px) and (max-width: 991px) {
    .ht-enquiry .ht-form { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
    .ht-enquiry .ht-form__row:has(input[type="date"]) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ht-enquiry .ht-form .btn { grid-column: 1 / -1; }
}

@media (max-width: 767px) {
    .ht-stats { grid-template-columns: repeat(2, 1fr); }
    .ht-stats li:nth-child(3) { border-left: 0; }
    .ht-stats li:nth-child(n + 3) { border-top: 1px solid #f1e9dc; }
}

@media (max-width: 640px) {
    .ht-grid { grid-template-columns: 1fr; }

    .ht-stats li { padding: 16px 8px; gap: 8px; }
    .ht-stats i { width: 40px; height: 40px; font-size: 16px; border-radius: 12px; }
    .ht-stats small { display: block; font-size: 12.5px; line-height: 1.35; }

    .ht-seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
    .ht-seg::-webkit-scrollbar { display: none; }
    .ht-seg__btn { flex: 0 0 auto; padding: 0 12px; }

    /* 16px stops iOS zooming the page when a field is focused */
    .ht-list .blog-search input,
    .ht-form input,
    .ht-form select { font-size: 16px; }

    .ht-group__head { gap: 14px; }
    .ht-group__icon { width: 46px; height: 46px; font-size: 18px; border-radius: 14px; }
    .ht-group__head p { font-size: 14.5px; }

    .ht-card__media { aspect-ratio: 16 / 10; }
    .ht-card__body { padding: 16px 18px 18px; }

    .ht-hero__actions .btn { flex: 1 1 auto; padding: 0 18px; }

    .ht-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .ht-facts li { flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px; }
    .ht-facts li:last-child:nth-child(odd) { grid-column: 1 / -1; flex-direction: row; align-items: center; }
    .ht-facts__icon { width: 36px; height: 36px; font-size: 14px; }
    .ht-facts strong { font-size: 14px; }

    .ht-photos { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 120px; }
    .ht-photos--n1 { grid-template-columns: 1fr; grid-auto-rows: 240px; }

    .ht-nophotos { flex-direction: column; align-items: flex-start; }
    .ht-nophotos .btn { margin-left: 0; }

    .ht-services { grid-template-columns: 1fr; }
    .ht-services li { padding: 14px 16px; }

    .ht-map iframe { height: 260px; }
    .ht-map__bar { padding: 16px 18px; }
    .ht-map__bar .btn { width: 100%; }

    /* similar stays: swipeable row instead of three full-height cards */
    .related .ht-grid {
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: 82%;
        margin: 0 calc(-1 * clamp(16px, 3.2vw, 48px));
        padding: 4px clamp(16px, 3.2vw, 48px) 18px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: clamp(16px, 3.2vw, 48px);
        scrollbar-width: none;
    }

    .related .ht-grid::-webkit-scrollbar { display: none; }
    .related .ht-card { scroll-snap-align: start; }

    .ht-lb__prev, .ht-lb__next { top: auto; bottom: 18px; transform: none; }
    .ht-lb__stage { padding: 70px 12px 90px; }
}

@media (max-width: 380px) {
    .ht-facts { grid-template-columns: 1fr; }
    .ht-facts li,
    .ht-facts li:last-child:nth-child(odd) { flex-direction: row; align-items: center; }
}

/* touch screens: no stuck hover lift after a tap */
@media (hover: none) {
    .ht-card:hover { transform: none; }
    .ht-card:hover .ht-card__media img { transform: none; }
    .ht-services li:hover { transform: none; box-shadow: none; }
}

@media (prefers-reduced-motion: reduce) {
    .ht-card { animation: none; opacity: 1; }
}


/* ==========================================================================
   Merged from error.css
   ========================================================================== */
/* Aarna Hospitality - error pages (404, 500, ...) */

.err-hero {
    position: relative;
    display: grid;
    align-items: center;
    min-height: clamp(520px, 78vh, 760px);
    padding: clamp(130px, 16vh, 180px) 0 clamp(60px, 8vh, 100px);
    overflow: hidden;
    isolation: isolate;
    color: var(--white);
    background: var(--navy);
    text-align: center;
}

.err-hero__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; opacity: .35; }

.err-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(circle at 50% 30%, rgba(212, 165, 72, .22), transparent 55%),
        linear-gradient(180deg, rgba(15, 20, 40, .55), rgba(15, 20, 40, .92));
}

.err-hero__inner { display: grid; justify-items: center; gap: 14px; max-width: 760px; }

.err-code {
    font-family: var(--font-head);
    font-size: clamp(96px, 18vw, 190px);
    font-weight: 700;
    line-height: .9;
    letter-spacing: -.04em;
    color: transparent;
    background: linear-gradient(180deg, #f3d48b 0%, var(--gold) 90%);
    -webkit-background-clip: text;
    background-clip: text;
    filter: drop-shadow(0 18px 40px rgba(0, 0, 0, .35));
}

.err-eyebrow { color: #f3d48b; }

.err-hero h1 { font-size: clamp(26px, 3.6vw, 44px); line-height: 1.2; color: var(--white); }

.err-hero p { max-width: 580px; margin: 0; font-size: clamp(15px, 1.4vw, 17px); color: rgba(255, 255, 255, .82); }

.err-search {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    width: min(560px, 100%);
    margin-top: 10px;
    padding: 6px 6px 6px 48px;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 60px;
    background: rgba(255, 255, 255, .12);
    backdrop-filter: blur(10px);
}

.err-search > i { position: absolute; left: 20px; color: rgba(255, 255, 255, .7); }

.err-search input {
    flex: 1 1 auto;
    min-width: 0;
    height: 46px;
    border: 0;
    background: none;
    color: var(--white);
    font: inherit;
    outline: none;
}

.err-search input::placeholder { color: rgba(255, 255, 255, .65); }
.err-search .btn { flex: 0 0 auto; border-radius: 40px; }

.err-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 12px; }

.err-btn-glass {
    color: var(--white);
    border: 1px solid rgba(255, 255, 255, .35);
    background: rgba(255, 255, 255, .08);
}

.err-btn-glass:hover { color: var(--navy); background: var(--white); }

.err-links { padding: clamp(60px, 8vw, 100px) 0; text-align: center; background: var(--cream, #faf7f1); }
.err-links h2 { margin: 8px 0 32px; font-size: clamp(24px, 3vw, 36px); }

.err-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 18px; text-align: left; }

.err-card {
    display: grid;
    gap: 6px;
    padding: 24px;
    border: 1px solid rgba(15, 20, 40, .08);
    border-radius: 18px;
    color: var(--navy);
    background: var(--white);
    box-shadow: 0 10px 30px rgba(15, 20, 40, .06);
    transition: transform .3s, box-shadow .3s, border-color .3s;
}

.err-card i {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    margin-bottom: 8px;
    border-radius: 14px;
    font-size: 19px;
    color: var(--gold);
    background: rgba(180, 126, 18, .1);
}

.err-card strong { font-family: var(--font-head); font-size: 17px; font-weight: 600; }
.err-card small { font-size: 14px; color: #6b7085; }

.err-card:hover { transform: translateY(-4px); border-color: rgba(180, 126, 18, .4); box-shadow: 0 18px 40px rgba(15, 20, 40, .12); }

.err-dests { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; margin-top: 36px; }
.err-dests > span { font-weight: 600; color: var(--navy); }

@media (max-width: 575px) {
    .err-search { padding-left: 42px; }
    .err-search .btn { padding-inline: 16px; }
    .err-actions .btn { flex: 1 1 100%; }
}


/* ==========================================================================
   Merged from site.css
   ========================================================================== */
/* Aarna Hospitality - additions to the original design: empty states for content that has not been added yet */

/* Testimonials: until the Google rating figures are entered (dbo.ReviewSummary), the rating panel
   shows the overall breakdown and the website reviews only */
@media (min-width: 576px) {
    .tm-panel--no-google .tm-score--site { grid-column: 1 / -1; }
}

@media (min-width: 1200px) {
    .tm-panel--no-google { grid-template-columns: 1.35fr 1fr; }
    .tm-panel--no-google .tm-score--site { grid-column: auto; }
    .tm-panel--no-google .tm-breakdown { border-left: 0; }
}


/* ==========================================================================
   Merged from forms.css
   ========================================================================== */
/* Aarna Hospitality - security check (captcha), honeypot and sending states for the public forms.
   The markup is added by js/site-forms.js; fields reuse the existing .tm-field / .ht-form styles. */

/* image, refresh button and answer always share one row */
.cf-captcha__row {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.cf-captcha__img {
    position: relative;
    flex: 0 0 auto;
    display: inline-flex;
    width: 150px;
    height: 50px;
    overflow: hidden;
    border: 1px solid #e6ddd0;
    border-radius: 12px;
    background: #fbf7ef;
}

.cf-captcha__img img {
    display: block;
    width: 100%;
    height: 100%;
    transition: opacity .3s;
}

.cf-captcha__img.is-loading {
    background: linear-gradient(90deg, #f4ecdf 25%, #fbf7ef 50%, #f4ecdf 75%);
    background-size: 200% 100%;
    animation: cf-shimmer 1.1s linear infinite;
}

.cf-captcha__img.is-loading img { opacity: 0; }

/* could not load: the box says so and is tappable */
.cf-captcha__img.is-failed { cursor: pointer; border-color: #f0c2bd; background: #fdf3f2; }
.cf-captcha__img.is-failed img { display: none; }
.cf-captcha__img.is-failed::after {
    content: "Tap to retry";
    margin: auto;
    font-size: 12px;
    font-weight: 600;
    color: #b3261e;
}

.cf-captcha__refresh {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid #e6ddd0;
    border-radius: 50%;
    background: var(--white);
    color: var(--gold);
    font-size: 15px;
    cursor: pointer;
    transition: background .3s, color .3s, border-color .3s;
}

.cf-captcha__refresh:hover,
.cf-captcha__refresh:focus-visible {
    border-color: var(--gold);
    background: var(--gold);
    color: var(--white);
    outline: none;
}

.cf-captcha__refresh.is-spinning i { animation: cf-spin .6s var(--ease); }

/* the answer box takes the rest of the row */
.cf-captcha .cf-captcha__row input[name="captchaAnswer"] {
    flex: 1 1 90px;
    width: auto;
    min-width: 0;
    margin: 0;
    text-align: center;
    letter-spacing: .08em;
}

.was-checked .cf-captcha :invalid { border-color: #d93025; }

/* hotel availability card */
.ht-form .cf-captcha { display: grid; gap: 5px; }

.ht-form .cf-captcha > span {
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--muted);
}

.ht-form .cf-captcha > span small { font-weight: 500; }
.ht-form .cf-captcha__row { gap: 8px; }
.ht-form .cf-captcha__img { width: 120px; height: 44px; }

/* enquiry popup: compact */
.enq-form .cf-captcha__img { width: 120px; height: 40px; border-radius: 10px; }
.enq-form .cf-captcha__refresh { width: 36px; height: 36px; font-size: 14px; }

/* honeypot: present for bots, invisible to people and screen readers */
.cf-hp {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* sending */
.btn.is-sending {
    opacity: .75;
    cursor: progress;
    pointer-events: none;
}

.btn.is-sending i { animation: cf-pulse 1s ease-in-out infinite; }

/* hotel card: messages under the button */
.ht-form .tm-form__error { font-size: 13px; }

.cf-note {
    display: grid;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 12px;
    font-size: 13.5px;
    line-height: 1.5;
    color: #1e5e2c;
    background: #e9f6ec;
}

.cf-note[hidden] { display: none; }
.cf-note strong { color: #17491f; }
.cf-note .btn { width: 100%; }

/* after an enquiry: "Opening WhatsApp..." + button (thank-you panel and hotel card) */
.cf-wa { display: grid; justify-items: center; gap: 10px; margin: 14px 0 6px; }
.cf-wa[hidden] { display: none; }
.cf-wa__text { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0; font-size: 14px; font-weight: 600; color: #1e5e2c; text-align: center; }
.cf-wa__text i { font-size: 18px; color: #25d366; }
.cf-wa__btn { gap: 8px; }
.cf-note .cf-wa { justify-items: stretch; margin: 0; }
.cf-note .cf-wa__text { justify-content: flex-start; text-align: left; }

/* small phones: shrink the image and button instead of wrapping the answer to a new line */
@media (max-width: 420px) {
    .cf-captcha__row { gap: 8px; }
    .cf-captcha__img,
    .ht-form .cf-captcha__img,
    .enq-form .cf-captcha__img { width: 112px; height: 40px; border-radius: 10px; }
    .cf-captcha__refresh { width: 36px; height: 36px; font-size: 14px; }
    .cf-captcha .cf-captcha__row input[name="captchaAnswer"] { padding-left: 8px; padding-right: 8px; }
}

@media (max-width: 340px) {
    .cf-captcha__img,
    .ht-form .cf-captcha__img,
    .enq-form .cf-captcha__img { width: 96px; height: 36px; }
    .cf-captcha__refresh { width: 32px; height: 32px; }
}

/* Touch devices: iOS Safari zooms the whole page when a focused field's text is under 16px
   (the enquiry popup used 14px, the search boxes 15px). 16px everywhere on touch screens stops
   the jump; !important because page rules (e.g. .enq-form .tm-field input) are more specific.
   No field on the site is larger than 16px, so this only ever raises the size. */
@media (pointer: coarse) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="hidden"]),
    select,
    textarea { font-size: 16px !important; }
}

@keyframes cf-shimmer { to { background-position: -200% 0; } }
@keyframes cf-spin { to { transform: rotate(360deg); } }
@keyframes cf-pulse { 50% { opacity: .4; } }

@media (prefers-reduced-motion: reduce) {
    .cf-captcha__img.is-loading,
    .cf-captcha__refresh.is-spinning i,
    .btn.is-sending i { animation: none; }
}


/* ==========================================================================
   Merged from offer-popup.css
   ========================================================================== */
/* Aarna Hospitality - offer popup (Admin → Offer Popups) */
.offer-pop {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: grid;
    place-items: center;
    padding: 20px;
}

.offer-pop[hidden] { display: none; }

.offer-pop__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 20, 40, .72);
    backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity .35s ease;
}

.offer-pop__card {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 14px;
    width: min(var(--offer-w, 520px), 100%);
    max-height: calc(100vh - 40px);
    max-height: calc(100dvh - 40px);
    opacity: 0;
    transform: translateY(18px) scale(.96);
    transition: opacity .35s ease, transform .45s cubic-bezier(.2, .9, .3, 1.2);
}

.offer-pop--small { --offer-w: 380px; }
.offer-pop--medium { --offer-w: 520px; }
.offer-pop--large { --offer-w: 760px; }

.offer-pop.is-open .offer-pop__backdrop { opacity: 1; }
.offer-pop.is-open .offer-pop__card { opacity: 1; transform: none; }

.offer-pop__media {
    display: block;
    width: 100%;
    overflow: hidden;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 30px 70px rgba(0, 0, 0, .45);
}

.offer-pop__media img {
    display: block;
    width: 100%;
    height: auto;
    max-height: calc(100vh - 150px);
    max-height: calc(100dvh - 150px);
    object-fit: contain;
}

a.offer-pop__media { transition: transform .3s ease; }
a.offer-pop__media:hover { transform: translateY(-2px); }

.offer-pop__close {
    position: absolute;
    top: -14px;
    right: -14px;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    font-size: 18px;
    color: var(--navy, #0f1428);
    background: #fff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .3);
    cursor: pointer;
    transition: transform .25s ease, background .25s ease, color .25s ease;
}

.offer-pop__close:hover, .offer-pop__close:focus-visible { color: #fff; background: var(--gold, #b47e12); transform: rotate(90deg); outline: none; }

.offer-pop__cta { box-shadow: 0 12px 28px rgba(0, 0, 0, .35); }

html.offer-pop-open { overflow: hidden; }

@media (max-width: 575px) {
    .offer-pop { padding: 16px; }
    .offer-pop__close { top: -10px; right: -6px; width: 38px; height: 38px; }
}

/* =====================================================================
   Designs with text: split, card, corner (Admin → Offer Popups → Popup design)
   ===================================================================== */
.offer-pop--split .offer-pop__card,
.offer-pop--card .offer-pop__card,
.offer-pop--corner .offer-pop__card {
    gap: 0;
    justify-items: stretch;
    overflow: hidden;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 30px 70px rgba(0, 0, 0, .45);
}

.offer-pop--split .offer-pop__media,
.offer-pop--card .offer-pop__media,
.offer-pop--corner .offer-pop__media {
    border-radius: 0;
    box-shadow: none;
    background: var(--cream, #f9f4f0);
}

.offer-pop--split .offer-pop__media img,
.offer-pop--card .offer-pop__media img,
.offer-pop--corner .offer-pop__media img {
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: cover;
    transition: transform .6s ease;
}

.offer-pop--split a.offer-pop__media:hover,
.offer-pop--card a.offer-pop__media:hover,
.offer-pop--corner a.offer-pop__media:hover { transform: none; }

.offer-pop--split a.offer-pop__media:hover img,
.offer-pop--card a.offer-pop__media:hover img { transform: scale(1.04); }

/* close button sits inside the card */
.offer-pop--split .offer-pop__close,
.offer-pop--card .offer-pop__close,
.offer-pop--corner .offer-pop__close {
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    font-size: 16px;
    color: var(--navy, #0f1428);
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
}

.offer-pop--split .offer-pop__close:hover, .offer-pop--split .offer-pop__close:focus-visible,
.offer-pop--card .offer-pop__close:hover, .offer-pop--card .offer-pop__close:focus-visible,
.offer-pop--corner .offer-pop__close:hover, .offer-pop--corner .offer-pop__close:focus-visible {
    color: #fff;
    background: var(--gold, #b47e12);
}

.offer-pop__body {
    display: grid;
    align-content: center;
    justify-items: start;
    gap: 14px;
    min-width: 0;
    padding: 36px 34px;
    overflow-x: hidden;
    overflow-y: auto;
    color: var(--text, #1f2333);
}

.offer-pop__badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 13px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--gold-dark, #9a6b0e);
    background: #fbf1de;
}

.offer-pop__badge i { font-size: 11px; }

.offer-pop__title {
    margin: 0;
    font-family: var(--font-head, "Montserrat", sans-serif);
    font-size: clamp(22px, 2.4vw, 30px);
    font-weight: 600;
    line-height: 1.22;
    color: var(--navy, #0f1428);
}

.offer-pop__text {
    margin: 0;
    font-size: 15.5px;
    line-height: 1.6;
    color: var(--muted, #6b6f7d);
    white-space: pre-line;
}

/* coupon: dashed ticket with a copy button */
.offer-pop__coupon {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 8px 8px 16px;
    border: 1.5px dashed var(--gold-light, #d4a548);
    border-radius: 12px;
    background: #fffaf0;
}

.offer-pop__coupon-label { font-size: 12.5px; color: var(--muted, #6b6f7d); white-space: nowrap; }

.offer-pop__coupon-code {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: var(--font-head, "Montserrat", sans-serif);
    font-size: 17px;
    letter-spacing: .12em;
    color: var(--navy, #0f1428);
}

.offer-pop__copy {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 14px;
    border: 0;
    border-radius: 9px;
    font: 600 13px var(--font-body, "Manrope", sans-serif);
    color: #fff;
    background: var(--navy, #0f1428);
    cursor: pointer;
    transition: background .25s ease;
}

.offer-pop__copy:hover, .offer-pop__copy:focus-visible { background: var(--gold, #b47e12); outline: none; }
.offer-pop__copy.is-copied { background: #1e7a3a; }

.offer-pop__body .offer-pop__cta { margin-top: 4px; box-shadow: 0 6px 16px rgba(180, 126, 18, .32); }

/* ---------- split: image beside the text ---------- */
.offer-pop--split { --offer-w: 760px; }
.offer-pop--split.offer-pop--small { --offer-w: 600px; }
.offer-pop--split.offer-pop--large { --offer-w: 900px; }

.offer-pop--split .offer-pop__card {
    grid-template-columns: 46% 1fr;
    min-height: min(440px, calc(100dvh - 40px));
}

.offer-pop--split .offer-pop__media { height: 100%; min-height: 0; }

/* ---------- card: image above the text ---------- */
.offer-pop--card .offer-pop__card { grid-template-rows: auto minmax(0, 1fr); }
.offer-pop--card .offer-pop__media { aspect-ratio: 16 / 9; max-height: 42vh; max-height: 42dvh; }
.offer-pop--card .offer-pop__body { justify-items: center; text-align: center; padding: 26px 30px 30px; gap: 12px; }
.offer-pop--card .offer-pop__coupon { max-width: 360px; }

/* ---------- corner: slides in, no backdrop, page stays usable ----------
   bottom-left, so the WhatsApp / call buttons on the right stay visible */
.offer-pop--corner {
    inset: auto auto 24px 24px;
    display: block;
    padding: 0;
}

.offer-pop--corner .offer-pop__card {
    grid-template-columns: 112px 1fr;
    width: 380px;
    max-width: calc(100vw - 32px);
    border-radius: 18px;
    box-shadow: 0 18px 50px rgba(15, 20, 40, .3);
    transform: translateY(24px);
}

.offer-pop--corner .offer-pop__media { height: 100%; }
.offer-pop--corner .offer-pop__body { gap: 8px; padding: 18px 44px 18px 18px; }
.offer-pop--corner .offer-pop__badge { padding: 4px 10px; font-size: 10.5px; }
.offer-pop--corner .offer-pop__title { font-size: 17px; }
.offer-pop--corner .offer-pop__text { font-size: 13.5px; line-height: 1.5; }
.offer-pop--corner .offer-pop__coupon { padding: 5px 5px 5px 10px; gap: 6px; }
.offer-pop--corner .offer-pop__coupon-label { display: none; }
.offer-pop--corner .offer-pop__coupon-code { font-size: 14px; }
.offer-pop--corner .offer-pop__copy { height: 28px; padding: 0 10px; font-size: 12px; }
.offer-pop--corner .offer-pop__cta { height: 40px; padding: 0 20px; font-size: 14px; }
.offer-pop--corner .offer-pop__close { top: 8px; right: 8px; width: 30px; height: 30px; font-size: 14px; }

/* ---------- phones ---------- */
@media (max-width: 640px) {
    .offer-pop--split .offer-pop__card { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); min-height: 0; }
    .offer-pop--split .offer-pop__media { height: auto; aspect-ratio: 16 / 10; max-height: 34vh; max-height: 34dvh; }
    .offer-pop--split .offer-pop__body { padding: 24px 22px 26px; gap: 12px; }
    .offer-pop--card .offer-pop__body { padding: 22px 20px 24px; }
    .offer-pop--split .offer-pop__close,
    .offer-pop--card .offer-pop__close { top: 10px; right: 10px; }
    .offer-pop__body .offer-pop__cta { width: 100%; }

    /* corner becomes a bottom sheet above the floating buttons' row */
    .offer-pop--corner { inset: auto 12px 12px 12px; }
    .offer-pop--corner .offer-pop__card { width: 100%; max-width: none; grid-template-columns: 96px 1fr; }
    .offer-pop--corner .offer-pop__cta { width: auto; }
}

@media (prefers-reduced-motion: reduce) {
    .offer-pop__backdrop, .offer-pop__card { transition: none; }
}