/* ==========================================================================
   BAKRI CHHAP — MASTER UNIFIED STYLESHEET (CLEAN STRUCTURED ARCHITECTURE)
   Brand Primary    : #899983 (Muted Sage)
   Secondary Palette: Deep Forest (#213B32) + Warm Ivory (#F5F0E6) + Soft Charcoal (#262826)
   Accent Colors    : Terracotta (#A85F42) + Mustard (#C59A45) + Stone (#B7AEA0)
   Typography       : Fraunces (Display Serif) + Plus Jakarta Sans (Clean Modern Sans)
   ========================================================================== */

/* ==========================================================================
   PART 1: GLOBAL & SHARED DESIGN SYSTEM (Common Across All Pages)
   - 1.1 CSS Variables / Design Tokens (:root)
   - 1.2 Reset & Base HTML Typography
   - 1.3 Global Section Padding (.section-padding)
   - 1.4 Global Eyebrows, Titles & Lead Text (.section-eyebrow, .section-title, .section-lead)
   - 1.5 Global Inner-Page Breadcrumb Banner (.page-breadcrumb-section)
   - 1.6 Global Inner-Page Hero Banner (.about-page-hero)
   - 1.7 Global Buttons & Action Pills (.btn, .btn-amber, .btn-forest, .pill-btn)
   - 1.8 Global Site Header & Top Navigation Bar
   - 1.9 Global Navigation Drawer (Left Slider - with 4px Sleek Scrollbar)
   - 1.10 Global Modals (Search, User, Partner)
   - 1.11 Global Cart Drawer (Right Slider - with 4px Sleek Scrollbar)
   - 1.12 Global Preloader, Toasts & Utility Floats
   - 1.13 Global Site Footer
   - 1.14 Core Responsive Grid & Media Queries
   ========================================================================== */

/* --- 1.1 TO 1.7 GLOBAL CORE & SHARED DESIGN SYSTEM --- */
/* ============================================================
   BAKRI CHHAP — MASTER UNIFIED STYLESHEET
   Brand Main Color : #899983 (Muted Sage)
   Secondary Palette: Deep Forest (#213B32) + Warm Ivory (#F5F0E6) + Soft Charcoal (#262826)
   Typography       : Fraunces (Editorial Display Serif) + Plus Jakarta Sans (Clean Modern Sans)
   ============================================================ */

/* ============================================================
   1. MASTER DESIGN SYSTEM, BASE STYLES & CORE LAYOUT
   File: css/style.css
   ============================================================ */

/* ============================================================
   BAKRI CHHAP — Master Design System
   Palette : Warm Ivory (#F5F0E6) + Deep Forest (#213B32) + Soft Charcoal (#262826)
             Accents: Muted Sage (#7E8F78) + Terracotta (#A85F42) + Mustard (#C59A45) + Stone (#B7AEA0)
   Fonts   : Fraunces (editorial display serif) + Plus Jakarta Sans (clean modern sans)
   ============================================================ */

:root {
    /* Fonts: Editorial Serif + Clean Modern Sans */
    --font-serif: "Fraunces", Georgia, "Times New Roman", serif;
    --font-sans:
        "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto,
        sans-serif;

    /* Official Bakri Chhap Palette — Client Main Color: #899983 */
    --sage: #899983;
    /* Main Brand Color (Muted Sage specified by client) */
    --sage-dark: #64755e;
    /* Deep Sage for hover / high contrast */
    --sage-deeper: #485643;
    /* Ultra Deep Sage for text readability */
    --sage-light: #f0f4ef;
    /* Soft Sage background for badges/pills */
    --sage-border: #bcc8b7;
    /* Sage subtle border */

    --forest: #213b32;
    /* Deep Forest (Dark contrast backgrounds) */
    --forest-dark: #162922;
    /* Dark Forest hover / depth */
    --forest-soft: #2b4e42;
    /* Medium Forest */

    --ivory: #f5f0e6;
    /* Warm Ivory (Main page background) */
    --ivory-light: #fdfbf7;
    /* Soft Clean Ivory Cards */
    --ivory-soft: #faf6ef;
    /* Light warm container */
    --ivory-deep: #ece4d6;
    /* Section band background */

    --charcoal: #262826;
    /* Soft Charcoal (Body text & dark UI) */
    --charcoal-soft: #423f3d;
    /* Secondary text */
    --charcoal-muted: #69635e;
    /* Muted captions */

    --terracotta: #a85f42;
    /* Earth / Terracotta (Accents & tags) */
    --terracotta-dark: #8f4c32;
    --terracotta-soft: #f7efe9;

    --mustard: #c59a45;
    /* Muted Mustard (Warmth, food, stars) */
    --mustard-soft: #fcf7ed;

    --stone: #b7aea0;
    /* Stone Grey (Borders & dividers) */
    --stone-light: #e3dcce;
    /* Subtle Hairline Dividers */

    /* Semantic Theme Mappings */
    --sand: var(--ivory);
    --sand-soft: var(--ivory-soft);
    --sand-deep: var(--ivory-deep);
    --ink: var(--charcoal);
    --plum: var(--forest);
    --plum-deep: var(--forest-dark);
    --amber: var(--sage);
    /* PRIMARY BRAND COLOR: #899983 */
    --amber-dark: var(--sage-dark);
    /* HOVER / CONTRAST: #64755E */
    --amber-soft: var(--sage);
    --taupe: var(--charcoal-muted);
    --line: var(--stone-light);
    --cream: var(--ivory-light);

    --radius-sm: 4px;
    --radius: 6px;
    --radius-lg: 12px;
    --radius-full: 9999px;
    --shadow-sm:
        0 1px 3px rgba(33, 59, 50, 0.05), 0 4px 12px rgba(33, 59, 50, 0.04);
    --shadow-md: 0 12px 32px rgba(33, 59, 50, 0.08);
    --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --maxw: 1200px;
}

/* ---------- reset / base ---------- */
* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        transition-duration: 0.001ms !important;
    }
}

body {
    margin: 0;
    font-family: var(--font-sans);
    font-weight: 400;
    font-size: 1.02rem;
    line-height: 1.72;
    color: var(--ink);
    /* background: var(--sand); */
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

img {
    max-width: 100%;
    display: block;
}

a {
    color: var(--amber-dark);
    text-decoration: none;
    transition: color 0.2s var(--ease);
}

a:hover {
    color: var(--amber);
}

h1,
h2,
h3,
h4 {
    font-family: var(--font-serif);
    font-weight: 600;
    color: var(--ink);
    line-height: 1.12;
    margin: 0;
    letter-spacing: -0.01em;
}

p {
    margin: 0 0 1rem;
}

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* 
.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: 22px;
} */
/* ============================================================
   RESPONSIVE SECTION PADDING SYSTEM (UNIFIED)
   Common section padding across all sections in index & about pages.
   Paddings scale down progressively as screen size decreases:
   - Extra Large Screens (≥1200px) : 4.5rem (72px)
   - Large Screens / Desktops (≥992px) : 3.75rem (60px)
   - Medium Screens / Tablets (≥768px) : 3rem (48px)
   - Small Screens / Mobile Landscape (≥576px) : 2.25rem (36px)
   - Extra Small Screens / Mobile Portrait (<576px) : 1.75rem (28px)
   ============================================================ */
/* section[id] {
  scroll-margin-top: 90px;
} */

.section-padding {
    padding-top: 35px !important;
    padding-bottom: 35px !important;
}

/* @media (min-width: 576px) {
  .section-padding {
    padding-top: 2.25rem !important;
    padding-bottom: 2.25rem !important;
  }
}

@media (min-width: 768px) {
  .section-padding {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }
} */

@media (min-width: 992px) {
    .section-padding {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
    }
}

@media (min-width: 1200px) {
    .section-padding {
        padding-top: 50px !important;
        padding-bottom: 50px !important;
    }
}

/* ============================================================
   REUSABLE INNER-PAGE BREADCRUMB / TITLE BANNER
   Designed for all internal pages (About, Stays, Store, Contact, etc.)
   ============================================================ */
/* .page-breadcrumb-section {
    background: #fbf8f2;
    border-bottom: 1px solid #ede5d8;
    padding: 1.1rem 0;
    position: relative;
}

.page-breadcrumb-section .breadcrumb-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.page-breadcrumb-section .breadcrumb-page-title {
    font-family: var(--font-serif, "Fraunces", serif);
    font-size: 1.25rem;
    font-weight: 600;
    color: #213b32;
    letter-spacing: -0.01em;
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.page-breadcrumb-section .breadcrumb-page-title::before {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: var(--amber, #899983);
}

@media (max-width: 575.98px) {
    .page-breadcrumb-section {
        padding: 0.85rem 0;
    }

    .page-breadcrumb-section .breadcrumb-page-title {
        font-size: 1.05rem;
    }
} */

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

.skip-link:focus {
    position: fixed;
    top: 12px;
    left: 12px;
    width: auto;
    height: auto;
    margin: 0;
    padding: 10px 18px;
    clip: auto;
    z-index: 2000;
    background: var(--plum);
    color: var(--cream);
    border-radius: var(--radius);
}

:focus-visible {
    outline: 2px solid var(--amber-dark);
    outline-offset: 3px;
    border-radius: 2px;
} */

/* ============================================================
   UNIFIED REUSABLE SECTION HEADINGS & EYEBROWS (DESIGN SYSTEM)
   ============================================================ */

/* 1. Eyebrow / Small Sub-heading (Upper Tag) */
.section-eyebrow,
.eyebrow {
    font-family: var(--font-sans, "Plus Jakarta Sans", sans-serif);
    font-weight: 700;
    font-size: 0.65rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #44593f;
    background: rgba(137, 153, 131, 0.16);
    border: 1px solid rgba(137, 153, 131, 0.28);
    padding: 4px 14px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 0.65rem;
    line-height: 1.4;
    width: fit-content;
}

/* Subtle dot indicator inside eyebrow */
.section-eyebrow::before,
.eyebrow::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #5d7557;
    flex-shrink: 0;
}

/* Line-style Eyebrow Variant */
.section-eyebrow--line,
.eyebrow--line {
    background: transparent;
    border: none;
    padding: 0;
    color: #556850;
    letter-spacing: 0.15em;
}

.section-eyebrow--line::before,
.eyebrow--line::before {
    width: 24px;
    height: 2px;
    border-radius: 2px;
    background-color: #899983;
}

/* Dark background Eyebrow */
.section-eyebrow--light,
.eyebrow--light,
.eyebrow-light {
    color: #d4e0d0;
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.2);
}

.section-eyebrow--light::before,
.eyebrow--light::before,
.eyebrow-light::before {
    background-color: #d4e0d0;
}

/* 2. Primary Section Title / Heading */
.section-title-hero {
    font-size: clamp(2rem, 3.8vw, 3.2rem) !important;
}

.section-title {
    font-family: var(--font-serif, "Lora", Georgia, serif);
    font-weight: 600;
    font-size: clamp(1.4rem, 1.8vw, 1.55rem);
    line-height: 1.25;
    color: #213b32;
    margin: 0 0 0.65rem 0;
    letter-spacing: -0.01em;
}

.section-title--light {
    color: #ffffff;
}

/* 3. Section Subtitle / Lead Paragraph */
.section-lead,
.section-subtitle,
.section-head-note {
    font-family: var(--font-sans, "Plus Jakarta Sans", sans-serif);
    font-size: clamp(0.92rem, 1vw, 1rem);
    line-height: 1.6;
    color: #526053;
    margin: 0 0 1rem 0;
    /* max-width: 680px; */
}

.section-lead--light {
    color: rgba(255, 255, 255, 0.82);
}

.section-lead--center {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

/* 4. Section Head Containers */
.section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 10px;
    /* margin-bottom: clamp(1.75rem, 3.5vw, 2.5rem); */
}

.section-head--center {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
    max-width: 780px;
}

/* ---------- buttons ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* gap: 0.5rem; */
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 0.92rem;
    letter-spacing: 0.04em;
    padding: 0.82rem 1.5rem;
    border: 1px solid transparent;
    border-radius: var(--radius);
    cursor: pointer;
    text-decoration: none;
    transition:
        transform 0.2s var(--ease),
        background 0.2s var(--ease),
        color 0.2s var(--ease),
        border-color 0.2s var(--ease),
        box-shadow 0.2s var(--ease);
    line-height: 1;
}

.btn-lg {
    padding: 1rem 1.9rem;
    font-size: 0.98rem;
}

.btn-amber {
    background: var(--sage, #899983);
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(137, 153, 131, 0.3);
    font-size: 13px;
}

.btn-amber:hover {
    background: var(--sage-dark, #64755e);
    border-color: var(--sage-dark, #64755e);
    color: #ffffff;
    box-shadow: 0 6px 18px rgba(100, 117, 94, 0.4);
}

.btn-cream {
    background: var(--cream);
    color: var(--plum);
    border-color: var(--cream);
}

.btn-cream:hover {
    background: #fff;
    color: var(--plum);
    transform: translateY(-2px);
}

.btn-ghost-light {
    background: transparent;
    color: var(--cream);
    border-color: rgba(246, 239, 227, 0.5);
}

.btn-ghost-light:hover {
    background: rgba(246, 239, 227, 0.12);
    color: #fff;
    border-color: var(--cream);
}

.btn-simple {
    text-decoration: none;
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--amber, #c88937);
}

.btn-simple:hover {
    text-decoration: none;
    border: none !important;
}

/* --- 1.8 TO 1.11 GLOBAL HEADER, NAV DRAWER, MODALS & CART --- */
/* ============================================================
   2. HEADER, TOP SOCIAL BAR, ACTION PILLS, NAV DRAWER & MODALS
   File: css/header.css
   ============================================================ */

/* ============================================================
   Bakri Chhap — Header, Navigation, Modals & Toast Styles
   ============================================================ */

/* Safe Horizontal Scroll Fix (Preserves smooth vertical scrolling) */
body {
    overflow-x: clip !important;
    width: 100% !important;
    padding: 0;
    margin: 0;
}

#main {
    overflow-x: clip;
    width: 100%;
}

.main-nav {
    max-height: 100vh !important;
    overflow-y: auto !important;
    -ms-overflow-style: none !important;
    scrollbar-width: none !important;
}

.main-nav::-webkit-scrollbar {
    display: none !important;
}

.nav-close {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    z-index: 1060 !important;
}

@media (min-width: 992px) {
    .nav-close {
        display: block !important;
    }
}

/* Scroll State */
body.scrolled .site-header {
    background: #ffffff !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06) !important;
}

/* --- TOP SOCIAL BAR --- */
.top-social-bar {
    background: #213b32;
    color: #e8e3d8;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 13px;
    position: relative;
    width: 100%;
    z-index: 999;
    height: 38px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.top-social-inner {
    box-sizing: border-box;
    max-width: 1320px;
    width: 100%;
    margin: 0 auto;
    padding: 0 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}

@media (min-width: 768px) {
    .top-social-inner {
        padding: 0 28px;
    }
}

.top-social-left {
    display: flex;
    gap: 16px;
    align-items: center;
}

.top-social-tagline {
    font-weight: 500;
    letter-spacing: 0.5px;
    display: none;
}

.top-social-divider {
    display: none;
    opacity: 0.4;
}

@media (min-width: 640px) {

    .top-social-tagline,
    .top-social-divider {
        display: inline-block;
    }
}

.top-social-email {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #e8e3d8;
    text-decoration: none;
    opacity: 0.9;
    transition:
        opacity 0.2s,
        color 0.2s;
    font-weight: 400;
}

.top-social-email:hover {
    opacity: 1;
    color: #ffffff;
}

.top-social-right {
    display: flex;
    gap: 16px;
    align-items: center;
}

.social-icon-link {
    color: #e8e3d8;
    display: flex;
    align-items: center;
    justify-content: center;
    transition:
        transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
        color 0.2s;
    opacity: 0.85;
}

.social-icon-link:hover {
    color: var(--hover-color, #fff);
    transform: scale(1.15) translateY(-1px);
    opacity: 1;
}

/* --- SCREENSHOT 1 HEADER SPECIFIC STYLES --- */
.site-header {
    position: sticky !important;
    top: 0 !important;
    inset: 0 0 auto 0 !important;
    height: 72px !important;
    background: #fdfbf7bd !important;
    /* Exact warm ivory from screenshot */
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border-bottom: 1px solid #e8e3d8 !important;
    box-shadow: 0 2px 10px rgba(35, 30, 25, 0.04) !important;
    z-index: 1080 !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 !important;
    transition:
        background 0.25s ease,
        box-shadow 0.25s ease !important;
}

.header-inner-custom {
    box-sizing: border-box;
    max-width: 1320px;
    width: 100%;
    margin: 0 auto;
    padding: 0 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    height: 100%;
}

@media (min-width: 768px) {
    .header-inner-custom {
        padding: 0 28px;
    }
}

/* Brand Logo (Left) */
.header-brand-link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    flex-shrink: 1;
    min-width: 0;
    padding: 2px 0;
}

.header-brand-logo {
    height: auto;
    max-height: 65px;
    /* width: 100%;
  max-width: 130px; */
    object-fit: contain;
    mix-blend-mode: multiply;
    display: block;
    /* transition: transform 0.2s ease; */
}

@media (max-width: 480px) {
    .header-brand-logo {
        max-height: 60px;
        /* max-width: 90px !important; */
    }
}

/* .header-brand-link:hover .header-brand-logo {
    transform: scale(1.03);
} */

/* Action Controls (Right) */
.header-actions-group {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

@media (min-width: 640px) {
    .header-actions-group {
        gap: 10px;
    }
}

/* 1. Pill container */
.header-pill-toggle {
    display: inline-flex;
    align-items: center;
    background: #ffffff;
    border: 1px solid var(--stone-light, #ded8cc);
    border-radius: 9999px;
    padding: 3px;
    gap: 3px;
    box-shadow: 0 1px 3px rgba(33, 59, 50, 0.05);
}

.pill-btn {
    border: none;
    background: transparent;
    padding: 0;
    margin: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    width: 33px;
    height: 33px;
    position: relative;
    transition:
        transform 0.15s ease,
        background-color 0.2s ease,
        color 0.2s ease,
        box-shadow 0.2s ease;
}

.pill-btn:active {
    transform: scale(0.95);
}

.pill-btn-cal {
    background-color: var(--sage, #899983);
    /* Main Brand Sage #899983 */
    color: #ffffff;
    box-shadow: 0 1px 4px rgba(137, 153, 131, 0.4);
}

.pill-btn-cal:hover {
    background-color: var(--sage-dark, #64755e);
    box-shadow: 0 2px 8px rgba(100, 117, 94, 0.45);
}

.pill-cal-svg {
    width: 16px;
    height: 16px;
}

.pill-btn-cart {
    color: var(--charcoal, #262826);
}

.pill-btn-cart:hover {
    color: var(--sage-deeper, #485643);
    background: var(--sage-light, #f0f4ef);
}

.pill-cart-svg {
    width: 16px;
    height: 16px;
}

.pill-partner-svg {
    width: 17px;
    height: 17px;
}

.pill-btn-partner {
    color: var(--charcoal, #262826);
}

.pill-btn-partner:hover {
    color: var(--sage-deeper, #485643);
    background: var(--sage-light, #f0f4ef);
}

.pill-cart-badge {
    position: absolute;
    top: -3px;
    right: -3px;
    min-width: 16px;
    height: 16px;
    background-color: var(--terracotta, #a85f42);
    /* Terracotta accent */
    color: #ffffff;
    border-radius: 9999px;
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    border: 2px solid #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    padding: 0 3px;
}

/* 2 & 3. Circular Buttons */
.header-circle-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #ffffff;
    border: 1px solid var(--stone-light, #ded8cc);
    color: var(--charcoal, #262826);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    margin: 0;
    text-decoration: none;
    box-shadow: 0 1px 3px rgba(33, 59, 50, 0.04);
    transition: all 0.2s ease;
}

.header-circle-btn:hover {
    border-color: var(--sage, #899983);
    color: var(--sage-deeper, #485643);
    background: var(--sage-light, #f0f4ef);
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(137, 153, 131, 0.25);
}

.header-circle-btn:active {
    transform: translateY(0) scale(0.95);
}

/* 4. Hamburger Button */
.header-hamburger-btn {
    /* width: 38px;
  height: 38px;
  border: none;
  background: transparent;
  color: var(--charcoal, #262826);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  margin: 0 0 0 2px;
  transition:
    color 0.2s ease,
    transform 0.15s ease; */

    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #ffffff;
    border: 1px solid var(--stone-light, #ded8cc);
    color: var(--charcoal, #262826);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    margin: 0;
    box-shadow: 0 1px 3px rgba(33, 59, 50, 0.04);
    /* transition: all 0.2s ease; */
}

.header-hamburger-btn:hover {
    color: var(--sage-dark, #64755e);
    /* transform: scale(1.06); */
}

.header-hamburger-btn:active {
    transform: scale(0.95);
}

/* --- SLIDING NAV DRAWER (LEFT-SIDE OFFCANVAS - MATCHING CART MODAL) --- */
.nav-drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(18, 26, 22, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 2200;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    display: flex;
    justify-content: flex-start;
}

.nav-drawer-backdrop.active {
    opacity: 1;
    pointer-events: auto;
}

.nav-drawer-panel {
    background: #213b32;
    width: min(86vw, 360px);
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    padding: 6.6rem 1.8rem 2rem;
    box-shadow: 10px 0 40px rgba(0, 0, 0, 0.4);
    transform: translateX(-100%);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow-y: auto;
    box-sizing: border-box;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
}

.nav-drawer-panel::-webkit-scrollbar {
    width: 4px;
}

.nav-drawer-panel::-webkit-scrollbar-track {
    background: transparent;
}

.nav-drawer-panel::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.25);
    border-radius: 4px;
}

.nav-drawer-panel::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.45);
}

.nav-drawer-backdrop.active .nav-drawer-panel {
    transform: translateX(0);
}

/* --- NAV DRAWER TOP BAR & WHITE LOGO --- */
.nav-drawer-top-bar {
    position: absolute;
    top: 18px;
    left: 1.8rem;
    right: 1.8rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 10;
}

.nav-drawer-brand-link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    max-width: 155px;
}

.nav-drawer-logo {
    height: auto;
    max-height: 54px;
    width: 100%;
    max-width: 148px;
    object-fit: contain;
    display: block;
    filter: brightness(0) invert(1) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25));
    opacity: 0.96;
}

/* Fallback if bakrilogo.jpeg (white background jpg) is loaded */
.nav-drawer-logo--fallback {
    filter: none;
    background: #ffffff;
    border-radius: 6px;
    padding: 3px 6px;
}

.nav-drawer-panel .nav-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: static;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #f6efe3;
    cursor: pointer;
    padding: 0;
    margin: 0;
    line-height: 1;
    transition: all 0.2s ease;
}

.nav-drawer-panel .nav-close:hover {
    background: rgba(255, 255, 255, 0.25);
    color: #ffffff;
    transform: rotate(90deg);
}

.nav-drawer-title {
    color: #d1b89d;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* Header Left Group */
.header-left-group {
    display: flex;
    align-items: center;
    gap: 12px;
}

.header-brand-fallback {
    display: none;
    font-family: "Fraunces", serif;
    font-size: 1.35rem;
    font-weight: 700;
    color: #213b32;
}

#headerUserBtn i {
    font-size: 15px;
}

.nav-drawer-panel .nav-list {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
    list-style: none;
    padding: 0;
    margin: 0 0 2rem 0;
}

.nav-drawer-panel .nav-list li {
    border-bottom: 1px solid rgba(246, 239, 227, 0.08);
}

.nav-drawer-panel .nav-list a {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 0.85rem 0.2rem;
    color: #f6efe3;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.2s ease;
}

.nav-drawer-panel .nav-list a svg {
    margin-top: 3px;
    flex-shrink: 0;
}

/* .nav-drawer-panel .nav-list a small {
    display: block;
    font-size: 0.72rem;
    color: #899983;
    font-weight: 400;
    line-height: 1.3;
    margin-top: 2px;
} */

.nav-drawer-panel .nav-list a:hover {
    color: #e09f4c;
}

.nav-drawer-panel .nav-list a:hover small {
    color: #cad8c6;
}

/* Nav Drawer Submenu Dropdown */
.nav-item-dropdown {
    position: relative;
}

.nav-dropdown-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    cursor: pointer;
}

.nav-dropdown-toggle .nav-dropdown-content {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
}

.nav-dropdown-toggle .submenu-chevron {
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important;
    color: #899983 !important;
    flex-shrink: 0 !important;
    margin-top: 0 !important;
}

.nav-item-dropdown.open .nav-dropdown-toggle .submenu-chevron {
    transform: rotate(180deg) !important;
    color: #e09f4c !important;
}

.nav-submenu {
    list-style: none !important;
    /* padding: 4px 0 8px 0 !important; */
    margin: 0 !important;
    width: 100% !important;
    display: none;
    background: rgba(0, 0, 0, 0.15);
    border-top: 1px solid rgba(246, 239, 227, 0.06);
}

.nav-item-dropdown.open .nav-submenu {
    display: block !important;
    animation: submenuFadeDown 0.22s ease forwards;
}

@keyframes submenuFadeDown {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.nav-submenu li {
    border-bottom: none !important;
    width: 100% !important;
}

.nav-submenu a {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    padding: 0.65rem 1rem !important;
    font-size: 0.86rem !important;
    color: #d1ded0 !important;
    width: 100% !important;
    transition: all 0.2s ease !important;
}

.nav-submenu a:hover {
    color: #e09f4c !important;
    background: rgba(255, 255, 255, 0.05);
}

.nav-submenu a svg {
    margin-top: 0 !important;
    width: 16px !important;
    height: 16px !important;
    flex-shrink: 0;
    color: #899983;
    transition: color 0.2s ease;
    margin-right: 5px;
}

.nav-submenu a:hover svg {
    color: #e09f4c;
}

.nav-drawer-footer {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.nav-drawer-quick-links {
    display: flex;
    gap: 8px;
    margin-top: 6px;
}

.drawer-action-btn {
    flex: 1;
    padding: 8px 10px;
    background: rgba(246, 239, 227, 0.08);
    border: 1px solid rgba(246, 239, 227, 0.15);
    border-radius: 8px;
    color: #f6efe3;
    font-size: 0.82rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.drawer-action-btn:hover {
    background: rgba(246, 239, 227, 0.16);
    color: #fff;
}

@media (max-width: 500px) {

    .nav-drawer-panel,
    .main-nav {
        padding: 5.5rem 0.9rem 2rem;
    }

    .nav-drawer-top-bar {
        top: 15px;
        left: 0.9rem;
        right: 0.9rem;
    }
}

/* --- BOOTSTRAP MODALS (Ensure modals render above sticky header: z-index 1080) --- */
.modal {
    z-index: 10600 !important;
}

.modal-backdrop {
    z-index: 10590 !important;
}

/* --- MODALS (Cart, Search, User) --- */
.haven-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(20, 16, 14, 0.65);
    backdrop-filter: blur(4px);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.haven-modal-backdrop.active {
    opacity: 1;
    pointer-events: auto;
}

.haven-modal-dialog {
    background: #ffffff;
    border-radius: 20px;
    width: 100%;
    max-width: 520px;
    box-shadow: 0 20px 45px rgba(25, 20, 16, 0.22);
    border: 1px solid #e7e2d7;
    overflow: hidden;
    position: relative;
    transform: translateY(12px) scale(0.98);
    transition: transform 0.25s cubic-bezier(0.2, 0.9, 0.3, 1);
}

.haven-modal-backdrop.active .haven-modal-dialog {
    transform: translateY(0) scale(1);
}

.haven-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid #ded8cc;
    background: #fbf9f5;
    color: #2b3a4a;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 10;
}

.haven-modal-close:hover {
    background: #213b32;
    border-color: #213b32;
    color: #ffffff;
}

.modal-head {
    padding: 24px 24px 16px;
    border-bottom: 1px solid #eee8df;
}

.modal-head h3 {
    font-family: "Lora", serif;
    font-size: 1.45rem;
    color: #231f1c;
    margin: 0 0 4px 0;
}

.modal-head p {
    font-size: 0.88rem;
    color: #72685e;
    margin: 0;
}

.modal-body {
    padding: 20px 24px;
    max-height: 68vh;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(33, 59, 50, 0.2) transparent;
}

.modal-body::-webkit-scrollbar {
    width: 4px;
}

.modal-body::-webkit-scrollbar-track {
    background: transparent;
}

.modal-body::-webkit-scrollbar-thumb {
    background: rgba(33, 59, 50, 0.2);
    border-radius: 4px;
}

.modal-body::-webkit-scrollbar-thumb:hover {
    background: rgba(33, 59, 50, 0.35);
}

.modal-foot {
    padding: 16px 24px 24px;
    border-top: 1px solid #eee8df;
    background: #faf8f5;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* --- SPOTLIGHT MULTI-ENTITY LIVE SEARCH MODAL --- */
.search-modal-dialog {
    max-width: 660px;
    border-radius: 20px;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    box-shadow: 0 24px 60px rgba(18, 26, 22, 0.28);
    border: 1px solid #e7e2d7;
    overflow: hidden;
}

.search-modal-header {
    padding: 14px;
    background: #ffffff;
    border-bottom: 1px solid #ebe5d8;
}

.search-modal-eyebrow {
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #c86d46;
    display: inline-block;
}

.search-modal-title {
    font-family: "Lora", Georgia, serif;
    font-size: 1.35rem;
    font-weight: 700;
    color: #1b3d2f;
    margin: 3px 0 0;
}

.search-box-wrap {
    display: flex;
    align-items: center;
    background: #fbf9f5;
    border: 1.5px solid #ded8cc;
    border-radius: 12px;
    padding: 0 14px;
    height: 48px;
    transition: all 0.2s ease;
    margin-bottom: 0;
}

.search-box-wrap:focus-within {
    border-color: #213b32;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(33, 59, 50, 0.1);
}

.search-box-icon {
    display: flex;
    align-items: center;
    margin-right: 10px;
    flex-shrink: 0;
}

.search-box-input {
    flex-grow: 1;
    border: none !important;
    background: transparent !important;
    font-size: 0.96rem;
    color: #213b32;
    outline: none !important;
    box-shadow: none !important;
    padding: 0;
    width: 100%;
}

.search-input-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.search-clear-btn {
    border: none;
    background: #e8e2d5;
    color: #55504a;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    cursor: pointer;
    transition: all 0.15s ease;
    padding: 0;
}

.search-clear-btn:hover {
    background: #213b32;
    color: #ffffff;
}

.search-trending-tags {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 0.8rem;
}

.search-tags-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: #8c8275;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-right: 4px;
}

.search-tag-chip {
    border: 1px solid #ded8cc;
    background: #f7f4ee;
    color: #3d3a37;
    border-radius: 9999px;
    padding: 3px 11px;
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.18s ease;
    display: inline-flex;
    align-items: center;
}

.search-tag-chip:hover {
    background: #213b32;
    border-color: #213b32;
    color: #ffffff;
}

.search-modal-body {
    padding: 12px;
    overflow-y: auto;
    max-height: 52vh;
    flex-grow: 1;
    background: #faf8f5;
    scrollbar-width: thin;
    scrollbar-color: rgba(33, 59, 50, 0.2) transparent;
}

.search-modal-body::-webkit-scrollbar {
    width: 4px;
}

.search-modal-body::-webkit-scrollbar-thumb {
    background: rgba(33, 59, 50, 0.2);
    border-radius: 4px;
}

.search-initial-placeholder {
    color: #72685e;
}

.search-placeholder-icon {
    font-size: 2.2rem;
    color: #a89f92;
    opacity: 0.75;
}

.search-placeholder-heading {
    font-family: "Lora", Georgia, serif;
    font-size: 1.15rem;
    color: #213b32;
    margin-bottom: 6px;
}

.search-placeholder-text {
    font-size: 0.85rem;
    color: #6d655d;
    max-width: 440px;
    margin: 0 auto;
    line-height: 1.5;
}

.search-group-title {
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #615951;
    margin: 12px 2px 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.search-result-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px;
    border-radius: 12px;
    background: #ffffff;
    border: 1px solid #ebe5d8;
    text-decoration: none;
    margin-bottom: 7px;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    color: inherit;
}

.search-result-card:hover {
    transform: translateX(4px);
    border-color: #213b32;
    box-shadow: 0 4px 16px rgba(33, 59, 50, 0.09);
    background: #ffffff;
    color: inherit;
}

.search-result-thumb {
    width: 60px;
    height: 70px;
    border-radius: 10px;
    object-fit: cover;
    flex-shrink: 0;
    background: #ede8dc;
    border: 1px solid #e2ddd3;
}

.search-result-details {
    flex-grow: 1;
    min-width: 0;
}

.search-result-name {
    font-family: "Lora", Georgia, serif;
    font-size: 0.96rem;
    font-weight: 700;
    color: #1b3d2f;
    margin: 0 0 2px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.search-result-meta {
    font-size: 0.79rem;
    color: #69625a;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-highlight {
    background: #ffeac7;
    color: #92400e;
    padding: 1px 3px;
    border-radius: 3px;
    font-weight: 700;
}

.search-badge-pill {
    font-size: 0.58rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    letter-spacing: 0.02em;
    display: inline-block;
}

.badge-homestay {
    background: #e7f2eb;
    color: #1b3d2f;
}

.badge-product {
    background: #fdf2e9;
    color: #c86d46;
}

.badge-destination {
    background: #eaf1f8;
    color: #23527c;
}

.badge-village {
    background: #f4ecf8;
    color: #6a2f80;
}

.search-result-arrow {
    color: #a89f92;
    font-size: 0.8rem;
    margin-right: 4px;
    transition: transform 0.2s ease, color 0.2s ease;
    flex-shrink: 0;
}

.search-result-card:hover .search-result-arrow {
    transform: translateX(3px);
    color: #213b32;
}

.search-modal-footer {
    padding: 10px;
    border-top: 1px solid #ebe5d8;
    background: #ffffff;
    font-size: 0.76rem;
    color: #8c8275;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.search-modal-footer kbd {
    background: #f0ece3;
    border: 1px solid #ded7ca;
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 0.68rem;
    font-family: inherit;
    color: #423f3d;
}

.search-count-badge {
    background: #eef4ee;
    color: #213b32;
    border-radius: 12px;
    padding: 2px 8px;
    font-size: 0.72rem;
    font-weight: 600;
}

/* --- SLIDING CART DRAWER (RIGHT-SIDE OFFCANVAS) --- */
.cart-drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(18, 26, 22, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 2200;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    display: flex;
    justify-content: flex-end;
}

.cart-drawer-backdrop.active {
    opacity: 1;
    pointer-events: auto;
}

.cart-drawer-panel {
    background: #ffffff;
    width: 100%;
    max-width: 440px;
    height: 100%;
    display: flex;
    flex-direction: column;
    box-shadow: -10px 0 40px rgba(18, 26, 22, 0.3);
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
}

.cart-drawer-backdrop.active .cart-drawer-panel {
    transform: translateX(0);
}

.cart-drawer-header {
    padding: 18px 22px;
    border-bottom: 1px solid #ede8df;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fcfbf9;
}

.cart-drawer-header h3 {
    font-family: "Fraunces", serif;
    font-size: 1.3rem;
    color: #213b32;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.cart-drawer-header .cart-badge-pill {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    background: #213b32;
    color: #ffffff;
    padding: 2px 8px;
    border-radius: 999px;
}

.cart-drawer-close {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid #ded8cc;
    background: #ffffff;
    color: #2b3a4a;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.cart-drawer-close:hover {
    background: #213b32;
    border-color: #213b32;
    color: #ffffff;
    transform: rotate(90deg);
}

.cart-drawer-body {
    flex: 1;
    padding: 18px 20px;
    overflow-y: auto;
    background: #fbf9f5;
    display: flex;
    flex-direction: column;
    gap: 12px;
    scrollbar-width: thin;
    scrollbar-color: rgba(33, 59, 50, 0.2) transparent;
}

.cart-drawer-body::-webkit-scrollbar {
    width: 4px;
}

.cart-drawer-body::-webkit-scrollbar-track {
    background: transparent;
}

.cart-drawer-body::-webkit-scrollbar-thumb {
    background: rgba(33, 59, 50, 0.2);
    border-radius: 4px;
}

.cart-drawer-body::-webkit-scrollbar-thumb:hover {
    background: rgba(33, 59, 50, 0.35);
}

.cart-item-card-v2 {
    display: flex;
    gap: 12px;
    padding: 14px;
    background: #ffffff;
    border: 1px solid #ebe5d8;
    border-radius: 14px;
    position: relative;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(33, 59, 50, 0.03);
}

.cart-item-card-v2:hover {
    border-color: #d6ccba;
    box-shadow: 0 4px 14px rgba(33, 59, 50, 0.06);
}

.cart-item-v2-img {
    width: 66px;
    height: 66px;
    border-radius: 10px;
    object-fit: cover;
    flex-shrink: 0;
    background: #f3efe6;
    border: 1px solid #ebe5d8;
}

.cart-item-v2-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.cart-item-v2-title {
    font-family: "Fraunces", serif;
    font-size: 0.96rem;
    font-weight: 600;
    color: #213b32;
    margin: 0 0 2px 0;
    line-height: 1.3;
    padding-right: 20px;
}

.cart-item-v2-sub {
    font-size: 0.76rem;
    color: #797166;
    margin: 0 0 8px 0;
}

.cart-item-v2-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.cart-qty-ctrl-v2 {
    display: inline-flex;
    align-items: center;
    background: #f5f2eb;
    border: 1px solid #dfd7c8;
    border-radius: 8px;
    padding: 2px;
}

.qty-btn-v2 {
    width: 24px;
    height: 24px;
    border-radius: 5px;
    border: none;
    background: transparent;
    color: #213b32;
    font-size: 0.85rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
}

.qty-btn-v2:hover {
    background: #ffffff;
    color: #a85f42;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.qty-count-v2 {
    font-size: 0.84rem;
    font-weight: 700;
    min-width: 22px;
    text-align: center;
    color: #213b32;
}

.cart-item-v2-price {
    font-weight: 700;
    font-size: 0.98rem;
    color: #213b32;
}

.cart-item-remove-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background: transparent;
    border: none;
    color: #aba092;
    font-size: 0.95rem;
    cursor: pointer;
    padding: 4px;
    line-height: 1;
    transition: color 0.15s ease;
}

.cart-item-remove-btn:hover {
    color: #c94a38;
}

.cart-green-notice {
    background: #f1f7f0;
    border: 1px solid #cee0cd;
    border-radius: 12px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    color: #213b32;
    margin-top: 4px;
}

.cart-drawer-footer {
    padding: 18px 22px;
    border-top: 1px solid #ede7dc;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.03);
}

.cart-drawer-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.86rem;
    color: #685f54;
}

.cart-drawer-total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 700;
    font-size: 1.15rem;
    color: #213b32;
    padding-top: 8px;
    border-top: 1px dashed #e5dfd2;
}

.cart-empty-state {
    text-align: center;
    padding: 40px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.cart-empty-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #eee8df;
    color: #8c8275;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    margin-bottom: 12px;
}

/* Mobile Responsive Adjustments for Cart Drawer (Optimized for 300px - 380px screens) */
@media (max-width: 480px) {
    .cart-drawer-panel {
        max-width: 300px;
        width: 100%;
    }

    .cart-drawer-header {
        padding: 12px 14px;
    }

    .cart-drawer-header h3 {
        font-size: 1.05rem;
        gap: 6px;
    }

    .cart-drawer-header small {
        font-size: 0.68rem !important;
        line-height: 1.2;
        display: block;
    }

    .cart-drawer-header .cart-badge-pill {
        font-size: 0.65rem;
        padding: 1px 6px;
    }

    .cart-drawer-close {
        width: 28px;
        height: 28px;
        min-width: 28px;
    }

    .cart-drawer-close svg {
        width: 13px;
        height: 13px;
    }

    .cart-drawer-body {
        padding: 10px 12px;
        gap: 8px;
    }

    .cart-item-card-v2 {
        padding: 10px 10px;
        gap: 10px;
        border-radius: 10px;
    }

    .cart-item-v2-img {
        width: 50px;
        height: 50px;
        border-radius: 8px;
    }

    .cart-item-v2-title {
        font-size: 0.82rem;
        line-height: 1.25;
        margin-bottom: 2px;
        padding-right: 16px;
    }

    .cart-item-v2-sub {
        font-size: 0.68rem;
        margin-bottom: 6px;
        line-height: 1.2;
    }

    .cart-qty-ctrl-v2 {
        padding: 1px;
        border-radius: 6px;
    }

    .qty-btn-v2 {
        width: 20px;
        height: 20px;
        font-size: 0.75rem;
    }

    .qty-count-v2 {
        min-width: 16px;
        font-size: 0.76rem;
    }

    .cart-item-v2-price {
        font-size: 0.85rem;
    }

    .cart-item-remove-btn {
        top: 6px;
        right: 6px;
        font-size: 0.78rem;
        padding: 2px;
    }

    .cart-green-notice {
        padding: 7px 9px;
        font-size: 0.68rem;
        gap: 6px;
        line-height: 1.3;
        border-radius: 8px;
    }

    .cart-green-notice i {
        font-size: 0.9rem !important;
    }

    .cart-drawer-footer {
        padding: 12px 14px;
        gap: 8px;
    }

    .cart-drawer-summary-row {
        font-size: 0.76rem;
    }

    .cart-drawer-total-row {
        font-size: 0.95rem;
        padding-top: 6px;
    }

    .cart-drawer-footer .btn-amber {
        padding: 9px 12px !important;
        font-size: 0.82rem !important;
        border-radius: 8px;
    }

    .cart-drawer-footer .btn-link {
        font-size: 0.74rem !important;
    }

    .cart-empty-state {
        padding: 25px 8px;
    }

    .cart-empty-icon {
        width: 46px;
        height: 46px;
        font-size: 1.1rem;
        margin-bottom: 8px;
    }
}

.form-group {
    margin-bottom: 14px;
}

.form-group label {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    color: #4a4138;
    margin-bottom: 6px;
}

.form-control-custom {
    width: 100%;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid #ded8cc;
    font-size: 0.92rem;
    color: #231f1c;
    outline: none;
    transition: border-color 0.2s ease;
}

.form-control-custom:focus {
    border-color: #213b32;
}

/* Toast alert */
.haven-toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    background: #213b32;
    color: #ffffff;
    padding: 12px 20px;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(35, 83, 64, 0.35);
    font-size: 0.92rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 3000;
    transform: translateY(60px);
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s cubic-bezier(0.2, 0.9, 0.3, 1);
}

.haven-toast.show {
    transform: translateY(0);
    pointer-events: auto;
}

/* --- Mobile Responsive Overrides for Header --- */
@media (max-width: 480px) {
    .header-inner-custom {
        padding: 0 10px !important;
        gap: 6px !important;
    }

    /* .header-brand-logo {
    max-width: 95px !important;
  } */

    .pill-btn {
        width: 30px !important;
        height: 30px !important;
    }

    .pill-cal-svg,
    .pill-cart-svg,
    .pill-partner-svg {
        width: 15px !important;
        height: 15px !important;
    }

    .header-hamburger-btn {
        width: 34px !important;
        height: 34px !important;
    }

    .header-actions-group {
        gap: 6px !important;
    }

    .header-pill-toggle {
        padding: 2px !important;
        gap: 2px !important;
    }
}

/* --- 1.12 GLOBAL FLOATING SCROLL & MOBILE FOOTER --- */
/* ============================================================
       VERTICAL TRANSPARENT SCROLL TO TOP BUTTON
       ============================================================ */
.vertical-scroll-top-btn {
    position: fixed;
    right: 22px;
    bottom: 32px;
    z-index: 99999;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    background: transparent !important;
    border: none !important;
    padding: 0;
    color: #213b32;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    outline: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(18px);
    transition:
        opacity 0.3s ease,
        visibility 0.3s ease,
        transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1),
        color 0.25s ease;
}

.vertical-scroll-top-btn.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* .v-scroll-arrow-box {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid rgba(33, 59, 50, 0.35);
    transition: all 0.25s ease;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(4px);
} */

.v-scroll-text {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    font-family:
        "Plus Jakarta Sans",
        system-ui,
        -apple-system,
        sans-serif;
    text-transform: uppercase;
    color: inherit;
    white-space: nowrap;
    transition: color 0.25s ease;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
}

.v-scroll-line {
    width: 1.5px;
    height: 28px;
    background: currentColor;
    opacity: 0.35;
    transition:
        height 0.25s ease,
        opacity 0.25s ease;
}

.vertical-scroll-top-btn:hover {
    color: #a85f42;
}

/* .vertical-scroll-top-btn:hover .v-scroll-arrow-box {
    border-color: #a85f42;
    transform: translateY(-4px);
    background: rgba(168, 95, 66, 0.1);
} */

.vertical-scroll-top-btn:hover .v-scroll-line {
    height: 38px;
    opacity: 1;
}

.vertical-scroll-top-btn:active {
    transform: translateY(2px);
}

@media (max-width: 768px) {
    .vertical-scroll-top-btn {
        right: 12px;
        bottom: 75px;
        /* Sits above mobile footer bar */
        gap: 6px;
    }

    .v-scroll-text {
        font-size: 0.6rem;
        letter-spacing: 0.12em;
    }

    .v-scroll-line {
        height: 18px;
    }
}

/* ============================================================
   7. ANDROID MOBILE FIXED BOTTOM NAVIGATION & TOAST NOTIFICATION
   File: css/android-footer.css
   ============================================================ */

/* ============================================================
   Bakri Chhap — Android Mobile Footer & Floating Navigation
   ============================================================ */

/* Hidden on desktop and tablet screens by default */
.android-mobile-footer {
    display: none !important;
}

/* Fixed Android App Bottom Navigation in Mobile View */
@media (max-width: 768px) {

    /* Add bottom clearance to body so fixed footer never covers page content */
    body {
        padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
        width: 100% !important;
    }

    /* Lift the toast notification so it floats nicely above the Android footer */
    .haven-toast {
        bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* Ensure nav overlay sits above the footer when the drawer opens */
    .nav-overlay {
        z-index: 1045 !important;
    }

    .android-mobile-footer {
        display: flex !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        height: calc(62px + env(safe-area-inset-bottom, 0px)) !important;
        background: rgba(255, 255, 255, 0.96) !important;
        backdrop-filter: blur(16px) !important;
        -webkit-backdrop-filter: blur(16px) !important;
        border-top: 1px solid rgba(222, 216, 204, 0.85) !important;
        box-shadow: 0 -3px 18px rgba(35, 30, 25, 0.08) !important;
        z-index: 1040 !important;
        align-items: center !important;
        justify-content: space-around !important;
        box-sizing: border-box !important;
        user-select: none !important;
        -webkit-tap-highlight-color: transparent !important;
    }

    .android-footer-item {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 1 1 0 !important;
        min-width: 0 !important;
        height: 100% !important;
        background: transparent !important;
        border: none !important;
        padding: 2px 0 !important;
        margin: 0 !important;
        text-decoration: none !important;
        color: #72685e !important;
        cursor: pointer !important;
        transition:
            transform 0.15s ease,
            color 0.2s ease !important;
        outline: none !important;
        position: relative !important;
    }

    .android-footer-item:active {
        transform: scale(0.92) !important;
    }

    /* Material 3 icon pill container */
    .android-icon-box {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 52px !important;
        height: 28px !important;
        border-radius: 16px !important;
        transition:
            background-color 0.22s cubic-bezier(0.4, 0, 0.2, 1),
            transform 0.15s ease !important;
        margin-bottom: 2px !important;
    }

    .android-footer-item svg {
        width: 20px !important;
        height: 20px !important;
        stroke-width: 2 !important;
        transition:
            transform 0.2s ease,
            stroke 0.2s ease,
            fill 0.2s ease !important;
    }

    .android-footer-label {
        font-family:
            "Plus Jakarta Sans",
            -apple-system,
            BlinkMacSystemFont,
            "Segoe UI",
            Roboto,
            sans-serif !important;
        font-size: 11px !important;
        font-weight: 500 !important;
        line-height: 1.15 !important;
        letter-spacing: 0.2px !important;
        color: #72685e !important;
        transition:
            color 0.2s ease,
            font-weight 0.2s ease !important;
        white-space: nowrap !important;
    }

    /* Active State - Material 3 Style with Brand Sage #899983 */
    .android-footer-item.active .android-icon-box {
        background-color: #f0f4ef !important;
        border: 1px solid rgba(137, 153, 131, 0.6) !important;
    }

    .android-footer-item.active {
        color: #485643 !important;
    }

    .android-footer-item.active .android-footer-label {
        color: #485643 !important;
        font-weight: 700 !important;
    }

    .android-footer-item.active svg {
        stroke: #64755e !important;
        transform: scale(1.06) !important;
    }

    /* Cart notification badge on Android footer */
    .android-cart-badge {
        position: absolute !important;
        top: -3px !important;
        right: 7px !important;
        min-width: 17px !important;
        height: 17px !important;
        background-color: #c85a32 !important;
        color: #ffffff !important;
        border-radius: 9999px !important;
        font-size: 10px !important;
        font-weight: 700 !important;
        line-height: 17px !important;
        text-align: center !important;
        border: 1.5px solid #ffffff !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) !important;
        padding: 0 3px !important;
        box-sizing: border-box !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
}

@media (max-width: 360px) {
    .android-icon-box {
        width: 44px !important;
    }

    .android-footer-label {
        font-size: 10px !important;
    }

    .android-footer-item svg {
        width: 18px !important;
        height: 18px !important;
    }
}

/* --- 1.13 GLOBAL PRELOADER --- */
/* ============================================================
   PREMIUM DECENT BRAND PRELOADER — BAKRI CHHAP (MINIMAL LIGHT)
   ============================================================ */
.site-preloader {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 99999999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 50% 45%,
            #ffffff 0%,
            #faf6ef 55%,
            #f2ebdf 100%);
    overflow: hidden;
    opacity: 1;
    visibility: visible;
    transition:
        opacity 0.55s cubic-bezier(0.4, 0, 0.2, 1),
        visibility 0.55s cubic-bezier(0.4, 0, 0.2, 1);
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}

.site-preloader.preloader-hidden {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

.preloader-backdrop {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(33, 59, 50, 0.04) 1px,
            transparent 1px);
    background-size: 24px 24px;
    opacity: 0.7;
    pointer-events: none;
}

.preloader-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 24px;
    transform: scale(1) translateY(0);
    opacity: 1;
    transition:
        transform 0.5s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.site-preloader.preloader-hidden .preloader-content {
    transform: scale(0.95) translateY(-10px);
    opacity: 0;
}

/* Ambient Radiant Glow */
.preloader-aura {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: radial-gradient(circle,
            rgba(137, 153, 131, 0.22) 0%,
            rgba(197, 154, 69, 0.09) 45%,
            transparent 70%);
    filter: blur(28px);
    pointer-events: none;
    animation: preloaderAuraPulse 3.5s ease-in-out infinite alternate;
}

/* Emblem with Rotating Rings */
.preloader-emblem-wrap {
    position: relative;
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

.preloader-ring {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.preloader-ring-outer {
    inset: 0;
    border: 1.5px dashed rgba(197, 154, 69, 0.5);
    animation: preloaderSpinClockwise 16s linear infinite;
}

.preloader-ring-inner {
    inset: 7px;
    border: 1.5px solid transparent;
    border-top-color: #899983;
    border-right-color: rgba(137, 153, 131, 0.5);
    border-bottom-color: rgba(197, 154, 69, 0.3);
    animation: preloaderSpinCounter 7.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.preloader-logo-circle {
    position: relative;
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: #ffffff;
    border: 1px solid rgba(137, 153, 131, 0.22);
    box-shadow:
        0 10px 28px rgba(33, 59, 50, 0.09),
        0 2px 6px rgba(33, 59, 50, 0.04);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    animation: preloaderLogoBreathe 2.8s ease-in-out infinite alternate;
}

.preloader-logo-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 2px 6px rgba(33, 59, 50, 0.12));
}

/* Keyframes */
@keyframes preloaderSpinClockwise {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes preloaderSpinCounter {
    0% {
        transform: rotate(360deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

@keyframes preloaderLogoBreathe {
    0% {
        transform: scale(1);
        box-shadow: 0 10px 28px rgba(33, 59, 50, 0.09);
    }

    100% {
        transform: scale(1.04);
        box-shadow: 0 14px 34px rgba(137, 153, 131, 0.2);
    }
}

@keyframes preloaderAuraPulse {
    0% {
        transform: translate(-50%, -50%) scale(0.92);
        opacity: 0.6;
    }

    100% {
        transform: translate(-50%, -50%) scale(1.15);
        opacity: 0.9;
    }
}

@media (max-width: 576px) {
    .preloader-emblem-wrap {
        width: 104px;
        height: 104px;
    }

    .preloader-logo-circle {
        width: 76px;
        height: 76px;
        padding: 8px;
    }
}

/* --- 1.14 GLOBAL FOOTER --- */
/* ============ SECTION 7: INSTITUTIONAL CONSULTING PORTAL & FOOTER (CLEAN & ATTRACTIVE) ============ */
.institutional-portal-footer {
    background: #140e13;
    background:
        radial-gradient(circle at 10% 20%,
            rgba(189, 122, 56, 0.12) 0%,
            transparent 45%),
        radial-gradient(circle at 90% 80%,
            rgba(118, 37, 2, 0.15) 0%,
            transparent 50%),
        linear-gradient(180deg, #181117 0%, #0f0a0e 100%);
    color: #ddd4c7;
    border-top: 1px solid rgba(221, 208, 186, 0.2);
    position: relative;
    padding: clamp(3.2rem, 5vw, 4.8rem) 0 2rem;
    font-family: "Plus Jakarta Sans", system-ui, sans-serif;
}

.institutional-inner-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 clamp(1.2rem, 3vw, 2rem);
}

/* Split Layout Container */
.footer-split-layout {
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    gap: clamp(2.5rem, 4.5vw, 4.5rem);
    align-items: start;
    padding-bottom: 2.8rem;
    border-bottom: 1px solid rgba(221, 208, 186, 0.12);
}

@media (max-width: 980px) {
    .footer-split-layout {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
}

/* Left Side: B2B Engagement & RFP Form */
.footer-b2b-block {
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
}

.footer-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.76rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #e5a855;
}

.footer-eyebrow .dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #e5a855;
    box-shadow: 0 0 8px rgba(229, 168, 85, 0.6);
}

.footer-b2b-title {
    font-family: "Lora", serif;
    font-size: clamp(1.65rem, 2.5vw, 2.2rem);
    line-height: 1.2;
    color: #fbf7f0;
    margin: 0;
    font-weight: 500;
}

.footer-b2b-desc {
    font-size: 0.92rem;
    line-height: 1.65;
    color: #b5a999;
    margin: 0;
}

/* Compact Stat Strip */
.footer-stats-strip {
    display: flex;
    gap: 16px;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(221, 208, 186, 0.1);
    border-radius: 6px;
    flex-wrap: wrap;
}

.footer-stat-item {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.footer-stat-item strong {
    font-family: "Lora", serif;
    font-size: 1.15rem;
    color: #fbf7f0;
}

.footer-stat-item span {
    font-size: 0.74rem;
    color: #9f9181;
}

.footer-stat-divider {
    color: rgba(221, 208, 186, 0.2);
}

/* Clean, Streamlined RFP Form */
.footer-rfp-form {
    background: rgba(28, 20, 26, 0.7);
    border: 1px solid rgba(221, 208, 186, 0.16);
    border-radius: 8px;
    padding: clamp(1.3rem, 2.2vw, 1.8rem);
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.footer-rfp-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(221, 208, 186, 0.1);
    padding-bottom: 8px;
    margin-bottom: 4px;
}

.footer-rfp-header h4 {
    font-family: "Lora", serif;
    font-size: 1.05rem;
    color: #fbf7f0;
    margin: 0;
    font-weight: 500;
}

.footer-rfp-header span {
    font-size: 0.7rem;
    color: #e5a855;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-weight: 600;
}

.rfp-input-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

@media (max-width: 520px) {
    .rfp-input-grid {
        grid-template-columns: 1fr;
    }
}

.footer-rfp-form input,
.footer-rfp-form select,
.footer-rfp-form textarea {
    background: #100b0f;
    border: 1px solid rgba(221, 208, 186, 0.2);
    border-radius: 4px;
    padding: 9px 12px;
    color: #fbf7f0;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 0.85rem;
    outline: none;
    width: 100%;
    box-sizing: border-box;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.footer-rfp-form select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%23d4c7b5' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 30px;
}

.footer-rfp-form select option {
    background: #1c141b;
    color: #fbf7f0;
}

.footer-rfp-form input:focus,
.footer-rfp-form select:focus,
.footer-rfp-form textarea:focus {
    border-color: #e5a855;
    box-shadow: 0 0 0 2px rgba(229, 168, 85, 0.16);
}

.footer-rfp-form textarea {
    resize: vertical;
    min-height: 58px;
    line-height: 1.45;
}

.footer-rfp-submit {
    background: linear-gradient(135deg, #213b32 0%, #213b32 100%);
    border: 1px solid rgba(246, 239, 227, 0.25);
    color: #ffffff;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    border-radius: 4px;
    padding: 10px 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.footer-rfp-submit:hover {
    background: linear-gradient(135deg, #ce8842 0%, #b26f30 100%);
    transform: translateY(-1px);
    color: #ffffff;
}

.footer-rfp-trust {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 0.72rem;
    color: #8f8273;
    text-align: center;
    margin-top: 2px;
}

/* Right Side: Standard Footer Links & Identity */
.footer-standard-block {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.footer-brand-header {
    display: flex;
    align-items: center;
    gap: 12px;
}

.footer-brand-logo {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    object-fit: cover;
    border: 1px solid rgba(221, 208, 186, 0.25);
}

.footer-brand-text h3 {
    font-family: "Lora", serif;
    font-size: 1.25rem;
    color: #fbf7f0;
    margin: 0;
    font-weight: 600;
}

.footer-brand-text p {
    font-size: 0.76rem;
    color: #a49787;
    margin: 2px 0 0;
}

/* Universal Links Grid */
.footer-links-columns {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem 1.2rem;
}

@media (max-width: 580px) {
    .footer-links-columns {
        grid-template-columns: 1fr 1fr;
    }
}

.footer-nav-col h5 {
    font-family: "Lora", serif;
    font-size: 0.95rem;
    color: #fbf7f0;
    margin: 0 0 0.8rem;
    font-weight: 500;
}

.footer-nav-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.footer-nav-col li a {
    color: #aba092;
    text-decoration: none;
    font-size: 0.82rem;
    transition:
        color 0.2s ease,
        transform 0.2s ease;
    display: inline-block;
}

.footer-nav-col li a:hover {
    color: #fdfaf5;
    transform: translateX(2px);
}

/* Certifications & Badges Ribbon */
.footer-trust-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    padding-top: 0.8rem;
    border-top: 1px solid rgba(221, 208, 186, 0.1);
}

.footer-trust-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(221, 208, 186, 0.12);
    border-radius: 4px;
    font-size: 0.72rem;
    color: #c9bea8;
}

/* Social Links */
.footer-social-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.footer-social-strip span {
    font-size: 0.76rem;
    color: #a49787;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.footer-social-icons {
    display: flex;
    gap: 8px;
}

.footer-social-btn {
    width: 34px;
    height: 34px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(221, 208, 186, 0.14);
    color: #d8cebf;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.2s ease;
}

.footer-social-btn:hover {
    background: var(--amber, #213b32);
    border-color: var(--amber, #213b32);
    color: #ffffff;
    transform: translateY(-2px);
}

/* Bottom Bar */
.footer-bottom-bar {
    padding-top: 1.8rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    font-size: 0.78rem;
    color: #8c8072;
}

.footer-bottom-links {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.footer-bottom-links a {
    color: #9f9181;
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-bottom-links a:hover {
    color: #fbf7f0;
}

.footer-back-top {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #b5a999;
    text-decoration: none;
    font-size: 0.74rem;
    transition: color 0.2s ease;
}

.footer-back-top:hover {
    color: #ffffff;
}

/* RFP Confirmation Modal */
#rfpSuccessModal.active {
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    visibility: visible;
}

.rfp-modal-content {
    background: #1a1219;
    border: 1px solid #213b32;
    border-radius: 12px;
    max-width: 520px;
    width: 92%;
    padding: 2rem;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7);
    color: #fbf7f0;
    position: relative;
    animation: rfpModalPop 0.25s ease-out;
}

@keyframes rfpModalPop {
    from {
        transform: scale(0.94);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

.rfp-modal-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(120, 194, 152, 0.2);
    color: #8ce4b0;
    border: 1px solid rgba(120, 194, 152, 0.4);
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 600;
    margin-bottom: 0.8rem;
}

.rfp-ref-code {
    font-family: monospace;
    font-size: 1.1rem;
    background: #110b10;
    border: 1px dashed rgba(229, 168, 85, 0.5);
    padding: 8px 12px;
    border-radius: 6px;
    color: #e5a855;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 1rem 0;
}

/* --- 1.15 GLOBAL RESPONSIVE MEDIA QUERIES --- */
/* ============================================================
   RESPONSIVE MEDIA QUERIES (TABLET & MOBILE HYBRID APP)
   ============================================================ */

/* Tablet & Medium Screen (max-width: 991px) */
@media (max-width: 991px) {
    .homestay-nav-btn {
        width: 38px;
        height: 38px;
    }

    .homestay-nav-btn svg {
        width: 16px;
        height: 16px;
    }

    .homestay-nav-btn i {
        font-size: 12px;
    }

    .homestay-card-body {
        padding: 0.75rem 0.7rem 0.65rem 0.7rem;
    }

    .homestay-location {
        font-size: 0.7rem;
        margin-bottom: 3px;
    }

    .homestay-name {
        font-size: 0.96rem;
        line-height: 1.28;
        margin-bottom: 5px;
    }

    .homestay-room-type {
        font-size: 0.68rem !important;
        padding: 2.5px 7px !important;
        margin-bottom: 6px !important;
        /* gap: 5px !important; */
    }

    .homestay-room-type svg,
    .homestay-room-type i {
        width: 11px !important;
        height: 11px !important;
        font-size: 0.68rem !important;
    }

    .homestay-card-footer {
        padding-top: 7px;
        gap: 6px;
    }

    .homestay-price-val {
        font-size: 1.05rem;
    }

    .homestay-price-unit {
        font-size: 0.68rem;
    }

    .btn-homestay-book {
        font-size: 0.72rem !important;
        padding: 5.5px 10px !important;
        gap: 4px !important;
        border-radius: 6px !important;
    }

    .btn-homestay-book svg {
        width: 11px !important;
        height: 11px !important;
    }
}

/* Tablet Portrait (max-width: 768px) */
@media (max-width: 768px) {
    .homestay-nav-btn {
        width: 36px;
        height: 36px;
    }

    .homestay-nav-btn svg {
        width: 15px;
        height: 15px;
    }

    .homestay-nav-btn i {
        font-size: 10px;
    }

    .homestay-nav-prev {
        left: -10px;
    }

    .homestay-nav-next {
        right: -10px;
    }
}

/* Compact Mobile 2-Card View (max-width: 640px) */
@media (max-width: 640px) {
    .homestay-nav-prev {
        left: -8px;
    }

    .homestay-nav-next {
        right: -8px;
    }

    /* Homestay Card */
    .homestay-card {
        border-radius: 12px !important;
    }

    .homestay-card-media {
        aspect-ratio: 4 / 3.2;
    }

    .homestay-badge {
        top: 5px;
        left: 5px;
        padding: 2px 6px;
        font-size: 0.58rem;
        gap: 3px;
    }

    .homestay-card-body {
        padding: 0.65rem 0.55rem 0.55rem 0.55rem;
    }

    .homestay-location {
        font-size: 0.64rem;
        margin-bottom: 2px;
    }

    .homestay-name {
        font-size: 0.88rem;
        line-height: 1.25;
        margin-bottom: 4px;
    }

    .homestay-room-type {
        font-size: 0.64rem !important;
        padding: 2.5px 6px !important;
        margin-bottom: 6px !important;
        border-radius: 4px !important;
        /* gap: 4px !important; */
        max-width: 100% !important;
        min-width: 0 !important;
        align-self: flex-start !important;
        line-height: 1.25 !important;
    }

    .homestay-room-type span {
        display: block;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .homestay-room-type i,
    .homestay-room-type svg {
        font-size: 0.64rem !important;
        width: 10px !important;
        height: 10px !important;
        flex-shrink: 0 !important;
    }

    .homestay-card-footer {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 5px !important;
        padding-top: 6px !important;
    }

    .homestay-price-wrap {
        width: 100% !important;
        display: flex !important;
        align-items: baseline !important;
        justify-content: flex-start !important;
        gap: 2px !important;
    }

    .homestay-price-val {
        font-size: 0.96rem;
    }

    .homestay-price-unit {
        font-size: 0.62rem;
    }

    .btn-homestay-book {
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 0.72rem !important;
        font-weight: 600 !important;
        padding: 5.5px 8px !important;
        border-radius: 6px !important;
        gap: 4px !important;
        text-align: center !important;
        white-space: nowrap !important;
        line-height: 1.2 !important;
    }

    .btn-homestay-book svg {
        width: 11px !important;
        height: 11px !important;
        flex-shrink: 0 !important;
    }

    /* People Card */
    .people-swiper {
        padding: 4px 2px 12px 2px;
    }

    .people-card {
        border-radius: 12px !important;
    }

    .people-card .badge {
        font-size: 0.6rem !important;
        padding: 2px 5px !important;
        margin: 4px !important;
    }

    .people-card .p-3 {
        padding: 0.65rem 0.55rem !important;
    }

    .people-card .small.text-muted {
        font-size: 0.65rem !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .people-card h3 {
        font-size: 0.88rem !important;
        margin-bottom: 0.25rem !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .people-card p.text-secondary {
        font-size: 0.72rem !important;
        line-height: 1.35 !important;
        margin-bottom: 0.35rem !important;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .people-card .border-top {
        padding-top: 0.35rem !important;
    }

    .btn-people-read-more {
        font-size: 0.72rem;
        padding: 5px 8px;
        border-radius: 6px;
        gap: 4px;
    }

    .btn-people-read-more svg {
        width: 11px;
        height: 11px;
    }

    /* Product Card */
    .retail-swiper {
        padding: 4px 2px 14px 2px;
    }

    .product-card {
        border-radius: 12px !important;
    }

    .product-card-media {
        aspect-ratio: 1 / 0.95;
    }

    /* 
  .product-badge {
    top: 5px;
    left: 5px;
    padding: 2px 6px;
    font-size: 0.56rem;
  }

  .product-badge .badge-dot {
    width: 4px;
    height: 4px;
  } */

    .btn-product-cart-top {
        top: 6px;
        right: 6px;
        width: 28px;
        height: 28px;
    }

    .btn-product-cart-top i,
    .btn-product-cart-top svg {
        font-size: 0.72rem !important;
        width: 13px !important;
        height: 13px !important;
    }

    .product-card-body {
        padding: 8px 7px 9px 7px;
    }

    .product-location {
        font-size: 0.62rem;
    }

    /* .product-weight-tag {
    font-size: 0.58rem;
    padding: 1px 4px;
  } */

    .product-name {
        font-size: 0.84rem;
        margin-bottom: 2px;
    }

    .product-spec {
        font-size: 0.66rem;
        margin-bottom: 4px;
        -webkit-line-clamp: 1;
    }

    .product-price-val {
        font-size: 0.95rem;
    }

    .product-price-mrp {
        font-size: 0.65rem;
    }

    .product-discount-pill {
        font-size: 0.56rem;
        padding: 1px 4px;
    }
}

/* Ultra-compact screens below 400px (iPhone SE, 360px Android devices) */
@media (max-width: 400px) {
    .homestay-nav-btn {
        width: 20px !important;
        height: 45px !important;
    }

    .homestay-nav-btn svg {
        width: 12px !important;
        height: 12px !important;
    }

    .homestay-nav-btn i {
        font-size: 10px;
    }

    .homestay-nav-prev {
        left: -5px !important;
    }

    .homestay-nav-next {
        right: -5px !important;
    }

    /* Homestay Card below 400px */
    .homestay-card {
        border-radius: 10px !important;
    }

    .homestay-card-media {
        aspect-ratio: 4 / 3.2;
    }

    .homestay-card-body {
        padding: 0.5rem 0.45rem !important;
    }

    .homestay-badge {
        top: 4px !important;
        left: 4px !important;
        font-size: 0.54rem !important;
        padding: 1.5px 5px !important;
    }

    .homestay-name {
        font-size: 0.84rem !important;
        margin-bottom: 3px !important;
    }

    .homestay-location {
        font-size: 0.62rem !important;
        margin-bottom: 2px !important;
    }

    .homestay-room-type {
        font-size: 0.6rem !important;
        padding: 2px 5px !important;
        margin-bottom: 5px !important;
        border-radius: 3.5px !important;
        /* gap: 3.5px !important; */
        max-width: 100% !important;
        min-width: 0 !important;
        align-self: flex-start !important;
        line-height: 1.2 !important;
    }

    .homestay-room-type span {
        display: block;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .homestay-room-type i,
    .homestay-room-type svg {
        font-size: 0.6rem !important;
        width: 9.5px !important;
        height: 9.5px !important;
        flex-shrink: 0 !important;
    }

    .homestay-card-footer {
        padding-top: 5px !important;
        gap: 4px !important;
    }

    .homestay-price-val {
        font-size: 0.9rem !important;
    }

    .homestay-price-unit {
        font-size: 0.6rem !important;
    }

    .btn-homestay-book {
        width: 100% !important;
        font-size: 0.68rem !important;
        padding: 5px 6px !important;
        border-radius: 5px !important;
        gap: 3px !important;
        justify-content: center !important;
    }

    .btn-homestay-book svg {
        width: 10px !important;
        height: 10px !important;
        flex-shrink: 0 !important;
    }

    /* People Card below 400px */
    .people-card {
        border-radius: 10px !important;
    }

    .people-card .p-3 {
        padding: 0.5rem 0.45rem !important;
    }

    .people-card .badge {
        font-size: 0.54rem !important;
        padding: 1px 4px !important;
        margin: 3px !important;
    }

    .people-card h3 {
        font-size: 0.82rem !important;
        margin-bottom: 0.2rem !important;
    }

    .people-card p.text-secondary {
        font-size: 0.68rem !important;
        line-height: 1.3 !important;
        -webkit-line-clamp: 2;
    }

    .people-card .border-top {
        padding-top: 0.25rem !important;
    }

    .btn-people-read-more {
        font-size: 0.66rem !important;
        padding: 4px 5px !important;
        border-radius: 5px !important;
        gap: 3px !important;
    }

    .btn-people-read-more svg {
        width: 10px !important;
        height: 10px !important;
    }

    /* Product Card below 400px */
    .product-card {
        border-radius: 10px !important;
    }

    .btn-product-cart-top {
        top: 5px;
        right: 5px;
        width: 25px;
        height: 25px;
    }

    .btn-product-cart-top i,
    .btn-product-cart-top svg {
        font-size: 0.65rem !important;
        width: 12px !important;
        height: 12px !important;
    }

    .product-card-body {
        padding: 6px 5px 7px 5px !important;
    }

    .product-location {
        font-size: 0.58rem !important;
    }

    /* .product-weight-tag {
    font-size: 0.52rem !important;
    padding: 0 3px !important;
  } */

    .product-name {
        font-size: 0.78rem !important;
        margin-bottom: 1px !important;
    }

    .product-spec {
        font-size: 0.6rem !important;
        margin-bottom: 3px !important;
    }

    .product-price-val {
        font-size: 0.88rem !important;
    }

    .product-price-mrp {
        font-size: 0.6rem !important;
    }

    .product-discount-pill {
        font-size: 0.52rem !important;
        padding: 0 3px !important;
    }
}

/* ==========================================================================
   PART 2: SCOPED PAGE-SPECIFIC MODULES (Independent, Zero-Collision)
   ========================================================================== */

/* --------------------------------------------------------------------------
   2.1 HOME PAGE MODULE (.home-page / #hero, #experiences, #platform, #manifesto)
   -------------------------------------------------------------------------- */
/* ============================================================
   3. SPLIT HERO ACCORDION, VIDEO BACKGROUND & STATISTICS
   File: css/hero.css
   ============================================================ */

/* ============================================================
   Bakri Chhap — Split Hero, Video Background & Statistics
   ============================================================ */

.split-hero {
    position: relative;
    width: 100%;
    height: 90vh;
    min-height: 600px;
    overflow: hidden;
    display: flex;
    font-family: "Plus Jakarta Sans", sans-serif;
}

.split-hero-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.split-hero-overlay {
    position: relative;
    z-index: 1;
    display: flex;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.15);
}

.hero-col {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 100px 15px 52px 15px;
    border-right: 1px solid rgba(255, 255, 255, 0.16);
    min-width: 0;
    width: 0;
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0%;
    transition:
        flex-grow 2.45s cubic-bezier(0.22, 1, 0.36, 1),
        background-color 1.1s ease;
    will-change: flex-grow;
    overflow: hidden;
    position: relative;
}

.hero-col::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
            rgba(15, 25, 20, 0.9) 0%,
            rgba(15, 25, 20, 0.52) 50%,
            rgba(0, 0, 0, 0.22) 100%);
    z-index: 0;
    pointer-events: none;
    transition: opacity 1.1s ease;
}

.hero-col-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 300px;
    max-width: 500px;
    transition: opacity 0.9s ease;
}

.hero-col-main {
    flex-grow: 2.5;
    background-color: rgba(0, 0, 0, 0.05);
}

.hero-col-merch {
    flex-grow: 1.5;
    background-color: rgba(0, 0, 0, 0.25);
    background-size: cover;
    background-position: center;
    background-blend-mode: multiply;
}

.hero-col-impact {
    flex-grow: 0.85;
    border-right: none;
    background-color: rgba(60, 24, 10, 0.7);
    background-size: cover;
    background-position: center;
    background-blend-mode: multiply;
}

.hero-col:hover {
    background-color: rgba(0, 0, 0, 0.45);
}

.split-hero-overlay:hover .hero-col,
.split-hero-overlay:has(.hero-col.active) .hero-col {
    flex-grow: 0.75;
}

.split-hero-overlay:hover .hero-col:not(:hover) .hero-col-content {
    opacity: 0.75;
}

.split-hero-overlay .hero-col:hover,
.split-hero-overlay .hero-col.active {
    flex-grow: 2.15;
}

.split-hero-overlay .hero-col:hover .hero-col-content,
.split-hero-overlay .hero-col.active .hero-col-content {
    opacity: 1;
}

/* --- HERO TYPOGRAPHY & BUTTONS --- */
.hero-eyebrow {
    display: inline-block;
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #d4e0d0;
    margin-bottom: 8px;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

.hero-title {
    font-family: var(--font-serif, "Lora", Georgia, serif);
    font-size: clamp(1.3rem, 1.75vw, 1.95rem);
    font-weight: 600;
    color: #ffffff;
    line-height: 1.2;
    margin: 0 0 10px 0;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
}

/* .hero-col-main .hero-title,
.hero-col-merch .hero-title,
.hero-col-impact .hero-title {
    font-size: clamp(1.3rem, 1.75vw, 1.95rem);
} */

.hero-lead {
    font-size: clamp(0.85rem, 0.95vw, 0.95rem);
    color: rgba(248, 245, 240, 0.92);
    margin: 0 0 20px 0;
    max-width: 440px;
    line-height: 1.5;
    font-weight: 400;
    text-shadow: 0 1px 5px rgba(0, 0, 0, 0.7);
}

.hero-cta-wrap {
    margin-top: auto;
}

.hero-col .btn {
    text-shadow: none;
    font-size: 0.86rem;
    font-weight: 600;
    padding: 9px 20px;
    border-radius: 8px;
    transition: all 0.22s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

.hero-col .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

@media (max-width: 991px) {
    .split-hero {
        height: auto;
        min-height: 0vh;
    }

    .split-hero-overlay {
        flex-direction: column;
    }

    .hero-col {
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.18);
        width: 100%;
        min-width: 0;
        padding: 44px 22px;
    }

    .hero-col-main {
        flex: auto;
        padding-top: 110px;
    }

    .hero-col-merch,
    .hero-col-impact {
        flex: auto;
    }

    .hero-title {
        font-size: 1.45rem !important;
    }

    .hero-lead {
        font-size: 0.88rem;
        max-width: 100%;
        margin-bottom: 16px;
    }

    .split-hero-overlay:hover .hero-col,
    .split-hero-overlay .hero-col:hover {
        flex: auto;
    }
}

/* ==========================================================================
   HOMEPAGE FLOW: SECTIONS 6 TO 10
   Clean, Editorial, Foreign-Inspired Minimalist Aesthetic
   ========================================================================== */

/* --------------------------------------------------------------------------
   SECTION 6: KISMAT KE LADDOO
   -------------------------------------------------------------------------- */
.laddoo-section {
    background: #fbf8f2;
    border-bottom: 1px solid #ede7dc;
    position: relative;
}

.laddoo-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    align-items: center;
}

@media (min-width: 992px) {
    .laddoo-grid {
        grid-template-columns: 1.05fr 1fr;
        gap: 3.5rem;
    }
}

/* Video Presentation Box */
.laddoo-video-container {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 12px 35px rgba(33, 59, 50, 0.08);
    border: 1px solid #e7e0d3;
    background: #213b32;
    aspect-ratio: 4 / 3.4;
}

.laddoo-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.laddoo-video-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
            rgba(33, 59, 50, 0.1) 0%,
            rgba(33, 59, 50, 0.65) 100%);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 0.7rem;
    color: #ffffff;
    pointer-events: none;
}

.laddoo-video-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(33, 59, 50, 0.82);
    backdrop-filter: blur(8px);
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #f7eedb;
    border: 1px solid rgba(247, 238, 219, 0.25);
    align-self: flex-start;
}

.laddoo-video-bottom {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
}

.laddoo-video-caption {
    font-family: "Fraunces", serif;
    font-size: 1.15rem;
    line-height: 1.3;
    color: #fdfbf7;
    max-width: 320px;
}

.laddoo-video-controls {
    pointer-events: auto;
}

.btn-video-toggle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-video-toggle:hover {
    background: #ffffff;
    color: #213b32;
    transform: scale(1.06);
}

/* Laddoo Story & Fortune Simulator Card */
.laddoo-story-card {
    display: flex;
    flex-direction: column;
    /* gap: 1.25rem; */
}

.laddoo-narrative {
    font-size: 0.94rem;
    line-height: 1.65;
    color: #4f473e;
}

/* Interactive Fortune Box */
/*.fortune-box {
  background: #ffffff;
  border: 1px solid #e5decb;
  border-radius: 14px;
  padding: 1.25rem;
  position: relative;
  box-shadow: 0 4px 15px rgba(33, 59, 50, 0.04);
}

.fortune-box-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

.fortune-box-label {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8c764e;
}

.fortune-slip {
  background: #fdfbf7;
  border: 1px dashed #d8cbb2;
  border-radius: 8px;
  padding: 1rem 1.2rem;
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: 'Fraunces', serif;
  font-size: 1.05rem;
  font-style: italic;
  color: #213b32;
  transition: all 0.3s ease;
}

.btn-crack-laddoo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #213b32;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  padding: 0.65rem 1.2rem;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-top: 0.75rem;
  width: 100%;
}

.btn-crack-laddoo:hover {
  background: #2d4f43;
  transform: translateY(-1px);
}

.btn-crack-laddoo:active {
  transform: scale(0.98);
} */

/* Occasions Pills */
.laddoo-occasions-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.laddoo-occasion-chip {
    background: #f0ebe1;
    color: #574e44;
    font-size: 0.75rem;
    font-weight: 500;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid #e2dac9;
}

.laddoo-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    padding-top: 0.5rem;
}

/* --------------------------------------------------------------------------
   SECTION 8: FROM PROJECTS TO PLATFORM
   -------------------------------------------------------------------------- */
.platform-section {
    background: #f7f4ec;
    border-bottom: 1px solid #ece5d8;
}

.platform-split-grid {
    /* display: grid;
  grid-template-columns: 1fr;
  gap: 1rem; */
    margin-bottom: 1rem;
}

/* @media (min-width: 992px) {
  .platform-split-grid {
    grid-template-columns: 1fr 1.15fr;
  }
} */

.platform-network-card {
    background: #ffffff;
    border: 1px solid #e6decb;
    border-radius: 16px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 18px rgba(33, 59, 50, 0.04);
}

/* .platform-network-card.featured-journey {
  padding: 0;
  overflow: hidden;
} */

/* .journey-media-container {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #213b32;
}

.journey-media-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
} */

/* .journey-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(33, 59, 50, 0.9);
  backdrop-filter: blur(4px);
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.2);
} */

/* .journey-body {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
} */

/* .platform-card-eyebrow {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #7e8f78;
} */

/* .platform-card-title {
  font-family: 'Fraunces', serif;
  font-size: 1.4rem;
  font-weight: 600;
  color: #213b32;
  margin: 0;
  line-height: 1.25;
} */

.platform-card-text {
    font-size: 0.88rem;
    line-height: 1.6;
    color: #554d43;
    margin: 0;
}

/* ============================================================
   PLATFORM PIPELINE STRIP (RESPONSIVE VALUE-CHAIN ROADMAP)
   ============================================================ */
.platform-pipeline-strip {
    background: #ffffff;
    border: 1px solid #e7e0d2;
    border-radius: 14px;
    padding: 1.25rem 1.5rem;
    box-shadow: 0 4px 16px rgba(33, 59, 50, 0.03);
}

/* Desktop (>= 992px): Smooth horizontal pipeline chain */
@media (min-width: 992px) {
    .platform-pipeline-strip {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem;
        flex-wrap: nowrap;
    }

    .pipeline-step {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-size: 0.84rem;
        font-weight: 600;
        color: #213b32;
        white-space: nowrap;
    }

    .pipeline-arrow {
        color: #a85f42;
        font-size: 0.88rem;
        display: inline-flex;
        align-items: center;
        opacity: 0.75;
    }
}

/* Tablet (768px - 991.98px): 3 columns x 2 rows grid of cards */
@media (min-width: 768px) and (max-width: 991.98px) {
    .platform-pipeline-strip {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 0.75rem;
        padding: 1.15rem;
    }

    .pipeline-arrow {
        display: none !important;
    }

    .pipeline-step {
        display: flex;
        align-items: center;
        gap: 10px;
        background: #fcfbf9;
        border: 1px solid #ede8de;
        border-radius: 10px;
        padding: 0.75rem 0.9rem;
        font-size: 0.82rem;
        font-weight: 600;
        color: #213b32;
    }

    .pipeline-step:last-child {
        background: #faf5ea;
        border-color: #e8dbbe;
    }
}

/* Mobile (< 768px): Symmetrical 2 columns x 3 rows grid of step cards */
@media (max-width: 767.98px) {
    .platform-pipeline-strip {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.6rem;
        padding: 0.85rem;
        border-radius: 12px;
    }

    .pipeline-arrow {
        display: none !important;
    }

    .pipeline-step {
        display: flex;
        align-items: center;
        gap: 8px;
        background: #fbf9f5;
        border: 1px solid #ede7dc;
        border-radius: 8px;
        padding: 0.65rem 0.75rem;
        font-size: 0.78rem;
        font-weight: 600;
        color: #213b32;
        line-height: 1.25;
    }

    .pipeline-step i {
        font-size: 0.9rem;
        flex-shrink: 0;
    }

    .pipeline-step:last-child {
        background: #f9f4ea;
        border-color: #ecdcc1;
    }
}

/* Extra Small Phones (< 400px): Adjusted sizing */
@media (max-width: 400px) {
    .platform-pipeline-strip {
        padding: 0.65rem;
        gap: 0.45rem;
    }

    .pipeline-step {
        padding: 0.55rem 0.55rem;
        font-size: 0.72rem;
        gap: 6px;
    }

    .pipeline-step i {
        font-size: 0.82rem;
    }
}

/* Gangs of Greenpur Banner */
.gangs-greenpur-banner {
    background: #f1f7f0;
    border: 1px solid #cde0cc;
    color: #213b32;
    border-radius: 16px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 18px rgba(33, 59, 50, 0.03);
}

@media (min-width: 991px) {
    .gangs-greenpur-banner {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

/* .gangs-content-left {
  max-width: 620px;
} */

/* .gangs-eyebrow {
  color: #436d41;
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  display: block;
  margin-bottom: 0.35rem;
} */

.gangs-title {
    font-family: "Fraunces", serif;
    font-size: 1.5rem;
    color: #213b32;
    margin: 0 0 0.5rem 0;
}

.gangs-desc {
    font-size: 0.86rem;
    line-height: 1.55;
    color: #3b5039;
    margin: 0;
}

/* --------------------------------------------------------------------------
   SECTION 10: FINAL BRAND STATEMENT & MANIFESTO + GLOBAL FOOTER
   -------------------------------------------------------------------------- */
.manifesto-section {
    background: #fcfbf9;
    border-bottom: 1px solid #ede7dc;
    /* text-align: center; */
}

.manifesto-quote-wrap {
    max-width: 860px;
    margin: 0 auto 3rem auto;
}

.manifesto-eyebrow {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #a85f42;
    margin-bottom: 1rem;
}

.manifesto-main-quote {
    font-family: "Fraunces", serif;
    font-size: 2.2rem;
    font-weight: 600;
    color: #213b32;
    line-height: 1.25;
    margin: 0 0 1.25rem 0;
}

@media (min-width: 768px) {
    .manifesto-main-quote {
        font-size: 2.8rem;
    }
}

.manifesto-subtext {
    font-size: 1.05rem;
    line-height: 1.7;
    color: #5d5347;
    margin: 0;
}

.manifesto-pillars-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    max-width: 1040px;
    margin: 0 auto 3rem auto;
    text-align: left;
}

@media (min-width: 768px) {
    .manifesto-pillars-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.manifesto-pillar-card {
    background: #ffffff;
    border: 1px solid #e8e2d4;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 10px rgba(33, 59, 50, 0.03);
}

.pillar-number {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #7e8f78;
    margin-bottom: 0.35rem;
}

.pillar-title {
    font-family: "Fraunces", serif;
    font-size: 1.25rem;
    font-weight: 600;
    color: #213b32;
    margin: 0 0 0.5rem 0;
}

.pillar-desc {
    font-size: 0.84rem;
    line-height: 1.55;
    color: #5b5247;
    margin: 0;
}

.manifesto-badges-row {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 2.5rem;
}

.manifesto-badge-pill {
    background: #f2eee6;
    border: 1px solid #ded6c6;
    color: #213b32;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 999px;
}

/* Global Modern Footer */
.global-main-footer {
    background: #182c25;
    color: #d1ded0;
    padding: 4rem 0 2rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-brand-info h4 {
    font-family: "Fraunces", serif;
    font-size: 1.4rem;
    color: #ffffff;
    margin: 0 0 0.5rem 0;
}

.footer-brand-info p {
    font-size: 0.84rem;
    line-height: 1.6;
    color: #aebfae;
    margin-bottom: 1rem;
}

.footer-col,
.footer-brand-info {
    margin-bottom: 15px;
}

.footer-col h5 {
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #c59a45;
    margin: 0 0 1rem 0;
}

.footer-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.footer-col ul a {
    color: #d1ded0;
    text-decoration: none;
    font-size: 0.84rem;
    transition: color 0.2s ease;
}

.footer-col ul a:hover {
    color: #ffffff;
}

.footer-bottom-bar-clean {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 1.5rem;
    gap: 1rem;
    font-size: 0.78rem;
    color: #8c9e8c;
    text-align: center;
}

/* @media (min-width: 768px) {
    .footer-bottom-bar-clean {
        flex-direction: row;
    }
}

.footer-bottom-bar-clean a {
    color: #8c9e8c;
    text-decoration: none;
}

.footer-bottom-bar-clean a:hover {
    color: #ffffff;
} */

.footer-contact-link {
    color: #c59a45 !important;
    text-decoration: none;
    transition:
        color 0.2s ease,
        text-decoration 0.2s ease;
}

.footer-contact-link:hover {
    color: #ffffff !important;
    text-decoration: underline;
}

.footer-social-links {
    margin-top: 1.15rem;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.footer-social-icon {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #d1ded0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.92rem;
    text-decoration: none;
    transition: all 0.25s ease;
}

.footer-social-icon:hover {
    background: var(--social-hover, #c59a45);
    border-color: var(--social-hover, #c59a45);
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

/* --------------------------------------------------------------------------
   2.2 HOMESTAYS & VILLAGE STAYS MODULE (.homestays-page, .homestay-detail-page)
   -------------------------------------------------------------------------- */
/* ============================================================
   4. BOOKING ENGINE FILTER BAR & ROOM AVAILABILITY SELECTORS
   File: css/booking.css
   ============================================================ */

/* ============================================================
   Bakri Chhap — Booking Engine Filter Bar & Room Selectors
   ============================================================ */

.booking-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    background: #ffffff;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #e7e2d7;
    box-shadow: 0 8px 24px rgba(35, 30, 25, 0.05);
    margin-bottom: 40px;
    align-items: flex-end;
}

.filter-group {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 150px;
}

.filter-group label {
    font-size: 0.85rem;
    font-weight: 600;
    color: #72685e;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.filter-group select,
.filter-group input {
    width: 100%;
    padding: 12px 14px;
    border-radius: 8px;
    border: 1px solid #ded8cc;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 1rem;
    color: #231f1c;
    background: #fbf9f5;
    outline: none;
    transition: border-color 0.2s ease;
}

.filter-group select:focus,
.filter-group input:focus {
    border-color: #899983;
    box-shadow: 0 0 0 3px rgba(137, 153, 131, 0.2);
}

.filter-submit {
    height: 48px;
    padding: 0 32px;
    white-space: nowrap;
    background: #899983 !important;
    border: 1px solid #899983 !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 14px rgba(137, 153, 131, 0.35) !important;
    transition: all 0.2s ease !important;
}

.filter-submit:hover {
    background: #64755e !important;
    border-color: #64755e !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(100, 117, 94, 0.4) !important;
}

.room-location {
    font-size: 0.62rem;
    color: #64755e;
    font-weight: 600;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.room-tag--live {
    background: #f0f4ef;
    color: #485643;
    border: 1px solid #bcc8b7;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.live-dot {
    width: 7px;
    height: 7px;
    background-color: #899983;
    border-radius: 50%;
    animation: pulse 2s infinite;
}

.room-tag--filling {
    background: #fff3e0;
    color: #e65100;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.filling-dot {
    width: 8px;
    height: 8px;
    background-color: #ff9800;
    border-radius: 50%;
    animation: pulse-fast 1s infinite;
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.4);
    }

    70% {
        box-shadow: 0 0 0 6px rgba(76, 175, 80, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(76, 175, 80, 0);
    }
}

@keyframes pulse-fast {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 152, 0, 0.4);
    }

    70% {
        box-shadow: 0 0 0 6px rgba(255, 152, 0, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(255, 152, 0, 0);
    }
}

@media (max-width: 768px) {
    .filter-submit {
        width: 100%;
        margin-top: 10px;
    }

    #headerUserBtn {
        display: none !important;
    }

    .top-social-email {
        font-size: 11px;
    }
}

@media (max-width: 480px) {
    /* .header-brand-logo {
    max-width: 120px !important;
  } */

    .pill-btn {
        width: 30px;
        height: 30px;
    }

    .pill-cal-svg,
    .pill-cart-svg {
        width: 15px;
        height: 15px;
    }

    .pill-partner-svg {
        width: 15px !important;
        height: 15px !important;
    }
}

/* ============================================================
   SECTION: SOBER & MINIMALIST HIMALAYAN HOMESTAY SLIDER
   Clean Foreign Luxury Card Design & Infinite Clockwise Slider
   With Left & Right Vertically Centered Slider Arrows
   ============================================================ */

/* --- HOMESTAY SLIDER WRAPPER & VERTICALLY CENTERED ARROWS --- */
.homestay-slider-wrapper {
    position: relative;
    width: 100%;
}

.homestay-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 25;
    width: 25px;
    height: 45px;
    border-radius: 5px;
    background: #ffffff;
    border: 1px solid #ded8cc;
    color: #213b32;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 14px rgba(35, 30, 25, 0.12);
    padding: 0;
    margin: 0;
}

.homestay-nav-prev {
    left: -10px;
}

.homestay-nav-next {
    right: -10px;
}

@media (min-width: 1200px) {
    .homestay-nav-prev {
        left: -10px;
    }

    .homestay-nav-next {
        right: -10px;
    }
}

.homestay-nav-btn:hover {
    background: #899983;
    border-color: #899983;
    color: #ffffff;
    /* transform: translateY(-50%) scale(1.08); */
    box-shadow: 0 6px 18px rgba(137, 153, 131, 0.4);
}

/* .homestay-nav-btn:active {
  transform: translateY(-50%) scale(0.95);
} */

/* --- SWIPER SLIDER STYLES --- */
.homestay-swiper {
    width: 100%;
    overflow: hidden;
    padding: 8px 4px 4px 4px;
}

.homestay-swiper .swiper-wrapper {
    display: flex;
    box-sizing: border-box;
}

.homestay-swiper .swiper-slide {
    height: auto;
    display: flex;
    box-sizing: border-box;
}

/* --- ELEGANT MINIMALIST HOMESTAY CARD --- */
.homestay-card {
    background: #ffffff !important;
    border-radius: 14px !important;
    border: 1px solid #e7e2d7 !important;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    box-shadow: 0 2px 8px rgba(35, 30, 25, 0.04);
    transition: box-shadow 0.28s ease;
}

.homestay-card:hover {
    /* transform: translateY(-4px); */
    box-shadow: 0 12px 26px rgba(35, 30, 25, 0.09) !important;
    /* border-color: #d8d2c4 !important; */
}

.homestay-card-media {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #e8e3d8;
}

/* Multi-Image Card Slider */
.homestay-card-slider {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.homestay-card-slides {
    position: relative;
    width: 100%;
    height: 100%;
}

.homestay-card-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transition:
        opacity 0.4s cubic-bezier(0.25, 1, 0.5, 1),
        visibility 0.4s;
    z-index: 1;
}

.homestay-card-slide.active {
    opacity: 1;
    visibility: visible;
    z-index: 2;
}

.homestay-card-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.homestay-card:hover .homestay-card-slide.active img {
    transform: scale(1.04);
}

/* Slider Mini Arrow Buttons */
.homestay-card-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 30px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.95);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    color: #213b32;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 6;
    opacity: 0;
    visibility: hidden;
    padding: 0;
}

.homestay-card-arrow:hover {
    background: #ffffff;
    color: #162922;
    /* transform: translateY(-50%) scale(1.1); */
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.28);
}

.homestay-card-prev {
    left: 5px;
}

.homestay-card-next {
    right: 5px;
}

.homestay-card:hover .homestay-card-arrow {
    opacity: 1;
    visibility: visible;
}

@media (max-width: 991px) {
    .homestay-card-arrow {
        opacity: 0.85;
        visibility: visible;
        width: 15px;
        height: 25px;
    }
}

/* Pagination Dots (Removed as requested) */
.homestay-card-dots {
    display: none !important;
}

/* Top Badges: Exclusive & Supportive */
.homestay-badge {
    position: absolute;
    top: 9px;
    left: 9px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
    z-index: 6;
}

.homestay-badge-exclusive {
    background: rgba(24, 38, 30, 0.9) !important;
    border: 1px solid rgba(197, 154, 69, 0.55) !important;
    color: #f7edd8 !important;
}

.homestay-badge-supportive {
    background: rgba(33, 59, 50, 0.92) !important;
    border: 1px solid rgba(137, 153, 131, 0.5) !important;
    color: #e5ede3 !important;
}

.badge-dot-gold {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #c59a45;
    box-shadow: 0 0 6px rgba(197, 154, 69, 0.85);
    display: inline-block;
}

.badge-dot-sage {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #4ade80;
    box-shadow: 0 0 6px rgba(74, 222, 128, 0.85);
    display: inline-block;
}

.live-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #4ade80;
    display: inline-block;
}

.filling-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #f59e0b;
    display: inline-block;
}

.homestay-card-body {
    padding: 0.85rem 0.85rem 0.75rem 0.85rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    min-width: 0;
}

.homestay-location {
    font-size: 0.74rem;
    font-weight: 600;
    color: #64755e;
    letter-spacing: 0.02em;
    margin-bottom: 3px;
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.homestay-location svg {
    flex-shrink: 0;
}

.homestay-name {
    font-family: "Lora", Georgia, serif;
    font-size: 1.05rem;
    font-weight: 600;
    color: #213b32;
    line-height: 1.3;
    margin-bottom: 5px;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-width: 0;
}

/* Room Type in Card Body - Polished, Resilient & Fully Responsive */
.homestay-room-type {
    font-size: 0.72rem;
    font-weight: 600;
    color: #3b5042;
    background: #f0f5ee;
    border: 1px solid #d3e2d0;
    border-radius: 5px;
    padding: 3px 8px;
    display: inline-flex;
    /* align-items: center; */
    align-self: flex-start;
    gap: 7px;
    margin-bottom: 8px;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    letter-spacing: 0.01em;
    line-height: 1.3;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
}

.homestay-room-type i,
.homestay-room-type svg {
    color: #4b6b54;
    font-size: 0.72rem;
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    margin-top: 4px;
}

.homestay-room-type span {
    display: block;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal !important;
    overflow-wrap: break-word;
    word-break: normal;
}

/* Homestay Specs (Removed as requested) */
.homestay-specs {
    display: none !important;
}

.homestay-card-footer {
    border-top: 1px solid #f0ebe1;
    padding-top: 8px;
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
}

.homestay-price-wrap {
    display: flex;
    align-items: baseline;
    gap: 3px;
    min-width: 0;
    flex-shrink: 1;
    white-space: nowrap;
}

.homestay-price-val {
    font-family: "Lora", Georgia, serif;
    font-size: 1.15rem;
    font-weight: 700;
    color: #213b32;
    line-height: 1;
    white-space: nowrap;
}

.homestay-price-unit {
    font-size: 0.72rem;
    color: #64755e;
    font-weight: 500;
    white-space: nowrap;
}

.btn-homestay-book {
    background: var(--sage, #899983) !important;
    color: #ffffff !important;
    font-size: 0.76rem !important;
    font-weight: 600 !important;
    padding: 6px 8px !important;
    border-radius: 7px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    line-height: 1.2 !important;
    transition: all 0.22s ease !important;
    cursor: pointer;
}

.btn-homestay-book:hover {
    background: #73846e !important;
    color: #ffffff !important;
    box-shadow: 0 4px 10px rgba(137, 153, 131, 0.3) !important;
    transform: translateY(-1px);
}

.btn-homestay-book svg {
    width: 12px !important;
    height: 12px !important;
    flex-shrink: 0 !important;
    transition: transform 0.2s ease !important;
}

.btn-homestay-book:hover svg {
    transform: translateX(2px) !important;
}

/* ==========================================================================
     HOMESTAY DETAILS CUSTOM PAGE POLISH & STYLING
     Bakri Chhap Design System: Fraunces + Plus Jakarta Sans + Deep Forest (#213B32)
     ========================================================================== */

.homestay-details-wrapper {
    background-color: #fdfbf7;
    color: #423f3d;
    font-family:
        "Plus Jakarta Sans",
        system-ui,
        -apple-system,
        sans-serif;
}

.homestay-serif {
    font-family: "Fraunces", Georgia, serif;
    letter-spacing: -0.015em;
}

/* Homestay Hero Banner Showcase */
.homestay-hero-card {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    min-height: 480px;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: flex-end;
    border: 1px solid rgba(221, 208, 186, 0.4);
    box-shadow: 0 16px 40px rgba(33, 59, 50, 0.12);
}

.homestay-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
            rgba(33, 59, 50, 0.2) 0%,
            rgba(33, 59, 50, 0.68) 50%,
            rgba(20, 38, 31, 0.95) 100%);
    pointer-events: none;
}

.homestay-hero-content {
    position: relative;
    z-index: 2;
    padding: 2.5rem;
    width: 100%;
}

@media (max-width: 768px) {
    .homestay-hero-card {
        min-height: 390px;
    }

    .homestay-hero-content {
        padding: 1.5rem;
    }
}

/* Telemetry Glass Badges */
.homestay-telemetry-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.28);
    color: #ffffff;
    padding: 6px 14px;
    border-radius: 30px;
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.02em;
}

/* Photo Gallery Showcase Grid */
.homestay-gallery-thumb {
    border-radius: 12px;
    overflow: hidden;
    height: 110px;
    border: 1px solid #ded8cc;
    transition: all 0.25s ease;
    cursor: pointer;
}

.homestay-gallery-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.35s ease;
}

.homestay-gallery-thumb:hover {
    border-color: #899983;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(33, 59, 50, 0.12);
}

.homestay-gallery-thumb:hover img {
    transform: scale(1.06);
}

/* Feature & Amenity Boxes */
.homestay-feature-box {
    background: #ffffff;
    border: 1px solid #e7e2d7;
    border-radius: 14px;
    padding: 1.25rem;
    height: 100%;
    transition: all 0.2s ease;
}

.homestay-feature-box:hover {
    border-color: #bcc8b7;
    box-shadow: 0 8px 20px rgba(33, 59, 50, 0.06);
    transform: translateY(-2px);
}

.homestay-feature-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #f0f4ef;
    color: #213b32;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.85rem;
}

/* Other Homestays Cards */
.other-homestay-card {
    border: 1px solid #ded8cc;
    border-radius: 16px;
    overflow: hidden;
    background: #ffffff;
    transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
    height: 100%;
    display: flex;
    flex-direction: column;
}

.other-homestay-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 14px 30px rgba(33, 59, 50, 0.12);
    border-color: #899983;
}

.other-homestay-img-wrap {
    position: relative;
    height: 190px;
    overflow: hidden;
}

.other-homestay-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.45s ease;
}

.other-homestay-card:hover .other-homestay-img {
    transform: scale(1.06);
}

.other-homestay-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: rgba(33, 59, 50, 0.88);
    backdrop-filter: blur(6px);
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 20px;
    letter-spacing: 0.04em;
}

/* Sticky Sidebar Box */
.sticky-booking-card {
    position: sticky;
    top: 90px;
    background: #ffffff;
    border: 1px solid #ded8cc;
    border-radius: 18px;
    padding: 1.75rem;
    box-shadow: 0 12px 32px rgba(33, 59, 50, 0.07);
}

/* Telemetry Rows */
.telemetry-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.65rem 0;
    border-bottom: 1px dashed #e7e2d7;
    font-size: 0.86rem;
}

.telemetry-row:last-child {
    border-bottom: none;
}

.telemetry-label {
    color: #64755e;
    font-weight: 500;
}

.telemetry-value {
    font-weight: 600;
    color: #213b32;
}

/* Accordion Custom */
.accordion-custom .accordion-item {
    border: 1px solid #e7e2d7;
    border-radius: 12px !important;
    margin-bottom: 0.75rem;
    overflow: hidden;
    background: #ffffff;
}

.accordion-custom .accordion-button {
    background: #fdfbf7;
    color: #213b32;
    font-weight: 600;
    font-size: 0.95rem;
    padding: 1rem 1.25rem;
}

.accordion-custom .accordion-button:not(.collapsed) {
    background: #f0f4ef;
    color: #213b32;
    box-shadow: none;
}

.accordion-custom .accordion-body {
    font-size: 0.9rem;
    line-height: 1.6;
    color: #423f3d;
    background: #ffffff;
}

.badge-soft-sage {
    background: #f0f4ef;
    color: #213b32;
    border: 1px solid #bcc8b7;
}

/* ==================== HOMESTAY DETAILS GALLERY & PAGE STYLES ==================== */
.homestay-main-stage {
    position: relative;
    width: 100%;
    height: 420px;
    max-height: 420px;
    border-radius: 16px;
    overflow: hidden;
    background: #192b23;
    box-shadow: 0 8px 24px rgba(33, 59, 50, 0.08);
}

@media (max-width: 767.98px) {
    .homestay-main-stage {
        height: 250px;
        max-height: 250px;
        border-radius: 12px;
    }
}

.homestay-main-stage img,
.homestay-main-stage video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.homestay-thumb-strip {
    display: flex;
    gap: 10px;
    margin-top: 12px;
    margin-bottom: 24px;
    overflow-x: auto;
    padding-bottom: 6px;
    scrollbar-width: thin;
}

.homestay-thumb-strip::-webkit-scrollbar {
    height: 4px;
}

.homestay-thumb-strip::-webkit-scrollbar-thumb {
    background: #ded8cc;
    border-radius: 4px;
}

.homestay-thumb-item {
    width: 100px;
    height: 70px;
    flex-shrink: 0;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    border: 2.5px solid transparent;
    background: #213b32;
    transition: all 0.2s ease;
}

@media (max-width: 767.98px) {
    .homestay-thumb-item {
        width: 78px;
        height: 56px;
    }
}

.homestay-thumb-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.85;
    transition:
        opacity 0.2s ease,
        transform 0.3s ease;
}

.homestay-thumb-item:hover img {
    opacity: 1;
    transform: scale(1.05);
}

.homestay-thumb-item.active {
    border-color: #d48b38;
    box-shadow: 0 4px 14px rgba(212, 139, 56, 0.35);
}

.homestay-thumb-item.active img {
    opacity: 1;
}

.homestay-thumb-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(22, 36, 31, 0.5);
    color: #ffffff;
    font-size: 0.85rem;
    transition: background 0.2s ease;
}

.homestay-thumb-item:hover .homestay-thumb-play {
    background: rgba(22, 36, 31, 0.3);
}

.homestay-thumb-play-icon {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #899983;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.detail-card {
    background: #ffffff;
    border: 1px solid #e7e2d7;
    border-radius: 16px;
    padding: 1rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 18px rgba(33, 59, 50, 0.03);
}

.detail-card-title {
    font-family: var(--font-serif, "Fraunces", serif);
    font-size: 1.35rem;
    font-weight: 600;
    color: #213b32;
    margin-bottom: 1rem;
}

/* ==================== TABS FOR ABOUT HOMESTAY ==================== */
.homestay-tabs-nav {
    display: flex;
    gap: 8px;
    border-bottom: 2px solid #ede7dc;
    padding-bottom: 0;
    margin-bottom: 1.25rem;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.homestay-tabs-nav::-webkit-scrollbar {
    display: none;
}

.homestay-tab-btn {
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    padding: 0.5rem 0.75rem;
    font-family: var(--font-sans, "Plus Jakarta Sans", sans-serif);
    font-size: 0.82rem;
    font-weight: 600;
    color: #64755e;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    border-radius: 8px 8px 0 0;
    margin-bottom: -2px;
    flex-shrink: 0;
}

.homestay-tab-btn:hover {
    color: #213b32;
    background: rgba(137, 153, 131, 0.08);
}

.homestay-tab-btn.active {
    color: #213b32;
    border-bottom-color: #d48b38;
    background: #fdfbf7;
}

.homestay-tab-pane {
    display: none;
}

.homestay-tab-pane.active {
    display: block;
    animation: fadeInHomestayTab 0.25s ease;
}

@keyframes fadeInHomestayTab {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==================== MINIMAL AMENITIES GRID ==================== */
.amenities-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

@media (min-width: 576px) {
    .amenities-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 14px;
    }
}

@media (min-width: 768px) {
    .amenities-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
    }
}

.amenity-item-card {
    background: #fdfbf7;
    border: 1px solid #ede7dc;
    border-radius: 12px;
    padding: 1.1rem 0.75rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 10px;
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        border-color 0.2s ease;
}

.amenity-item-card:hover {
    transform: translateY(-2px);
    border-color: #d48b38;
    box-shadow: 0 4px 12px rgba(33, 59, 50, 0.05);
}

.amenity-item-card i {
    font-size: 1.5rem;
    color: #213b32;
}

.amenity-item-card span {
    font-size: 0.84rem;
    font-weight: 600;
    color: #332f2c;
}

/* ==================== REVIEWS & RATINGS ==================== */
.review-card {
    background: #fdfbf7;
    border: 1px solid #ede7dc;
    border-radius: 12px;
    padding: 0.9rem;
    margin-bottom: 12px;
}

.star-rating-picker {
    display: inline-flex;
    flex-direction: row-reverse;
    gap: 6px;
    font-size: 1.5rem;
    cursor: pointer;
}

.star-rating-picker input {
    display: none;
}

.star-rating-picker label {
    color: #ded8cc;
    transition: color 0.15s ease;
    cursor: pointer;
    margin-bottom: 0;
}

.star-rating-picker label:hover,
.star-rating-picker label:hover~label,
.star-rating-picker input:checked~label {
    color: #f59e0b;
}

/* ==================== STICKY BOOKING CARD FIX ==================== */
.homestay-booking-card {
    background: #ffffff;
    border: 1px solid #e7e2d7 !important;
    border-radius: 16px;
    padding: 1rem;
    box-shadow: 0 4px 20px rgba(33, 59, 50, 0.04);
    transition:
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}

@media (min-width: 992px) {
    .homestay-booking-card {
        position: sticky;
        top: 85px;
        z-index: 10;
    }
}

@media (max-width: 991.98px) {
    .homestay-booking-card {
        position: static !important;
        scroll-margin-top: 20px;
    }
}

/* ==================== HOMESTAY MOBILE FIRST-VIEW & BOTTOM BAR ==================== */
.homestay-mobile-quick-card {
    background: #ffffff;
    border: 1px solid #e7e2d7;
    border-radius: 14px;
    padding: 1.1rem;
    box-shadow: 0 4px 16px rgba(33, 59, 50, 0.05);
}

.homestay-mobile-quick-card .badge-verified {
    background-color: #eef7ee;
    color: #213b32;
    font-size: 0.74rem;
}

.homestay-mobile-quick-card .badge-rating {
    background-color: #fdfbf7;
    border: 1px solid #ede7dc;
    color: #332f2c;
    font-size: 0.74rem;
}

.homestay-mobile-bottom-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1045;
    background: #ffffff;
    border-top: 1px solid #ede7dc;
    box-shadow: 0 -4px 20px rgba(33, 59, 50, 0.12);
    padding: 10px 16px;
    align-items: center;
    justify-content: space-between;
}

.homestay-mobile-bottom-price .price-num {
    font-family: var(--font-serif, "Fraunces", serif);
    font-size: 1.25rem;
    font-weight: 700;
    color: #213b32;
    line-height: 1.1;
}

.homestay-mobile-bottom-price .price-unit {
    font-size: 0.78rem;
    color: #64755e;
    font-family: var(--font-sans, "Plus Jakarta Sans", sans-serif);
    font-weight: normal;
}

/* .homestay-mobile-bottom-price .badge-meals {
    font-size: 0.68rem;
    background-color: #eef7ee;
    color: #213b32;
    border: 1px solid #cce5cc;
    display: inline-block;
    margin-top: 2px;
} */

.btn-whatsapp-circle {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid #25d366;
    color: #128c7e;
    background: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    transition: all 0.2s ease;
    text-decoration: none;
}

.btn-whatsapp-circle:hover {
    background: #25d366;
    color: #ffffff;
    border-color: #25d366;
}

.homestay-card-highlight {
    animation: pulseHomestayHighlight 1.5s ease;
}

@keyframes pulseHomestayHighlight {
    0% {
        box-shadow: 0 0 0 0 rgba(212, 139, 56, 0.7);
        border-color: #d48b38 !important;
    }

    70% {
        box-shadow: 0 0 0 10px rgba(212, 139, 56, 0);
        border-color: #d48b38 !important;
    }

    100% {
        box-shadow: 0 4px 20px rgba(33, 59, 50, 0.04);
        border-color: #e7e2d7 !important;
    }
}

@media (max-width: 991.98px) {
    .homestay-detail-section {
        padding-bottom: 85px;
    }
}

/* ==================== HOMESTAY DETAILS REUSABLE PAGE CLASSES ==================== */
.homestay-detail-section {
    background-color: #faf8f5;
}

.homestay-detail-header {
    border-bottom: 1px solid #ede7dc !important;
}

.homestay-detail-price {
    font-family: var(--font-serif, "Fraunces", serif);
    color: #213b32 !important;
}

.homestay-media-badge {
    background: rgba(33, 59, 50, 0.85);
    color: #ffffff;
    font-size: 0.74rem;
}

.homestay-tab-text {
    font-size: 0.95rem;
    line-height: 1.8;
    color: #423f3d;
}

.homestay-tab-text .village-image-wrapper {
    width: 140px;
    align-self: stretch;
}

.homestay-tab-text .village-image-wrapper img {
    display: block;
    min-height: 100%;
}

/* Mobile */
@media (max-width: 767.98px) {
    .homestay-tab-text .village-image-wrapper {
        width: 100%;
        height: 200px;
    }
}

.homestay-host-avatar {
    width: 76px;
    height: 76px;
    border: 2px solid #d48b38 !important;
}

.homestay-verified-badge {
    background-color: #eef7ee;
    color: #213b32;
    font-size: 0.74rem;
}

.homestay-quote-text {
    line-height: 1.6;
}

.homestay-review-summary {
    background: #fdfbf7;
    border: 1px solid #ede7dc;
}

.homestay-rating-score {
    font-family: var(--font-serif, "Fraunces", serif);
}

.review-date {
    font-size: 0.72rem;
}

.text-forest-muted {
    color: #64755e;
}

.homestay-price-breakdown {
    background: #fdfbf7;
    border: 1px dashed #ded8cc;
    font-size: 0.82rem;
}

.text-forest {
    color: #213b32;
}

.btn-whatsapp-liaison {
    font-size: 0.86rem;
    border-color: #25d366;
    color: #128c7e;
}

.btn-whatsapp-liaison:hover {
    background-color: #25d366;
    border-color: #25d366;
    color: #ffffff;
}

.homestay-trust-text {
    font-size: 0.74rem;
}

.section-homestays-carousel {
    background-color: #ffffff;
    border-top: 1px solid #ede7dc;
}

.section-products-carousel {
    background-color: #faf8f5;
    border-top: 1px solid #ede7dc;
}

.btn-view-all-pill {
    font-size: 0.82rem;
    border-color: #899983;
    color: #213b32;
}

.btn-view-all-pill:hover {
    background-color: #213b32;
    border-color: #213b32;
    color: #ffffff;
}

.homestay-details-page {
    background-color: #fbf9f5;
    color: #2d3748;
    font-family:
        "Plus Jakarta Sans",
        -apple-system,
        BlinkMacSystemFont,
        sans-serif;
}

/* Hero Swiper */
.homestay-hero-wrap {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    background: #eae6dd;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.05);
}

.homestay-hero-slide-img {
    width: 100%;
    height: 550px;
    object-fit: cover;
    display: block;
}

@media (max-width: 991px) {
    .homestay-hero-slide-img {
        height: 400px;
    }
}

@media (max-width: 768px) {
    .homestay-hero-slide-img {
        height: 250px;
    }

    .homestay-hero-wrap {
        border-radius: 12px;
    }
}

@media (max-width: 400px) {
    .homestay-hero-slide-img {
        height: 200px;
    }
}

/* Swiper Navigation Pills */
.hs-nav-arrow {
    width: 38px;
    height: 38px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #2d3748;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transition: all 0.2s ease;
}

.hs-nav-arrow:after {
    font-size: 14px;
    font-weight: 900;
}

.hs-nav-arrow:hover {
    background: #ffffff;
    transform: scale(1.08);
    color: #435b3d;
}

@media (max-width: 576px) {
    .hs-nav-arrow {
        width: 32px;
        height: 32px;
    }

    .hs-nav-arrow:after {
        font-size: 11px;
    }
}

.hs-counter-badge {
    position: absolute;
    bottom: 12px;
    right: 12px;
    background: rgba(0, 0, 0, 0.7);
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 20px;
    z-index: 5;
    backdrop-filter: blur(4px);
}

/* Thumbnails strip below hero */
.hs-thumbs-strip {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 6px 0 12px;
    scrollbar-width: thin;
}

.hs-thumb-btn {
    width: 72px;
    height: 52px;
    flex-shrink: 0;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    padding: 0;
    background: transparent;
    transition: border-color 0.2s ease;
}

.hs-thumb-btn img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hs-thumb-btn.active {
    border-color: #435b3d;
}

/* Cards & Details styling */
.hs-card {
    background: #ffffff;
    border: 1px solid #ebe6dd;
    border-radius: 14px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
}

.hs-stat-item {
    background: #fbf9f5;
    border: 1px solid #ede8de;
    border-radius: 10px;
    padding: 10px 14px;
}

/* Feature Pills */
.hs-feature-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #f4f6f3;
    color: #3b5035;
    border: 1px solid #e2e8e0;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.82rem;
    font-weight: 500;
}

/* Room Cards (Mobile-first) */
.room-card-box {
    background: #ffffff;
    border: 1px solid #ebe6dd;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.room-card-box:hover {
    box-shadow: 0 6px 20px rgba(67, 91, 61, 0.08);
    border-color: #d8d1c3;
}

/* Room Swiper */
.room-slider-wrap {
    position: relative;
    background: #eae6dd;
    overflow: hidden;
    height: 240px;
}

@media (min-width: 992px) {
    .room-slider-wrap {
        height: 100%;
        min-height: 280px;
    }
}

.room-slide-img {
    width: 100%;
    height: 350px;
    object-fit: cover;
    display: block;
}

/* Room Specs Pills */
.room-spec-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #f8f6f0;
    border: 1px solid #e8e2d5;
    color: #3a4738;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.78rem;
    font-weight: 500;
}

/* Action Buttons */
.btn-forest {
    background-color: #435b3d;
    color: #ffffff;
    border: none;
    font-weight: 600;
    transition: background 0.2s ease;
}

.btn-forest:hover {
    background-color: #32452e;
    color: #ffffff;
}

.btn-outline-forest {
    background-color: transparent;
    color: #435b3d;
    border: 1px solid #435b3d;
    font-weight: 600;
    transition: all 0.2s ease;
}

.btn-outline-forest:hover {
    background-color: #435b3d;
    color: #ffffff;
}

.btn-amber-stay {
    background-color: #899983;
    color: #ffffff;
    font-weight: 600;
    border: none;
    transition: background 0.2s ease;
}

.btn-amber-stay:hover {
    background-color: #899983;
    color: #ffffff;
}

/* ==================== HOMESTAY SEARCH & FILTER ENGINE ==================== */
.homestay-filter-card {
    background: #ffffff;
    border: 1px solid #e7e2d7 !important;
}

.homestay-filter-label {
    font-size: 0.72rem;
    letter-spacing: 0.05em;
    color: #64755e;
}

.homestay-filter-control {
    background-color: #fdfbf7;
    border-color: #ded8cc;
    font-size: 0.88rem;
}

.btn-find-stays {
    background-color: #899983;
    font-size: 0.9rem;
    color: #ffffff;
}

.btn-find-stays:hover {
    background-color: #64755e;
    color: #ffffff;
}

.products-catalog-section {
    background: #ffffff;
}

/* --------------------------------------------------------------------------
   2.3 PRODUCTS & PRODUCE MARKETPLACE MODULE (.products-page, .product-detail-page)
   -------------------------------------------------------------------------- */
/* ============================================================
   6. SECTION 4: STORY-DRIVEN RETAIL SHOWCASE, PRODUCERS & TRACEABILITY
   File: css/retail.css
   ============================================================ */

/* ============================================================
   Bakri Chhap — Retail Showcase, Producer Profiles & Traceability
   ============================================================ */

.retail-showcase-section {
    background: #ffffff;
    position: relative;
}

/* ============================================================
   SECTION 6: DIRECT PRODUCER MARKETPLACE (PRODUCT SLIDER & CARDS)
   ============================================================ */
.retail-swiper {
    width: 100%;
    overflow: hidden;
    padding: 6px 4px 4px 4px;
}

.retail-swiper .swiper-slide {
    height: auto;
    display: flex;
}

.product-card {
    background: #ffffff !important;
    border-radius: 14px !important;
    border: 1px solid #e8e2d5 !important;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    box-shadow: 0 2px 10px rgba(35, 30, 25, 0.04);
    transition: box-shadow 0.28s ease;
    position: relative;
}

.product-card:hover {
    /* transform: translateY(-4px); */
    box-shadow: 0 12px 28px rgba(35, 30, 25, 0.09) !important;
    /* border-color: #d2c8b8 !important; */
}

.product-card-media {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 0.95;
    overflow: hidden;
    background: #f5f1e9;
}

.product-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.product-card:hover .product-card-media img {
    transform: scale(1.05);
}

/* Badge on Image Top */
/* .product-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  background: rgba(28, 48, 40, 0.85) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 3px 8px;
  border-radius: 20px;
  font-size: 0.65rem;
  font-weight: 600;
  color: #e5ede3 !important;
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  z-index: 2;
}

.product-badge .badge-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #52b788;
  display: inline-block;
} */

/* Floating Cart Icon Button on Image Top-Right */
.btn-product-cart-top {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 34px;
    height: 34px;
    border-radius: 50% !important;
    background: rgba(26, 44, 37, 0.88) !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    color: #ffffff !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    cursor: pointer;
    z-index: 3;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
    transition: all 0.22s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

.btn-product-cart-top i {
    font-size: 0.82rem;
    color: #ffffff;
    line-height: 1;
    /* transition: transform 0.2s ease; */
}

.btn-product-cart-top:hover {
    background: #235438 !important;
    border-color: rgba(255, 255, 255, 0.45) !important;
    /* transform: scale(1.1); */
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.28);
}

/* .btn-product-cart-top:active {
  transform: scale(0.92);
}

.btn-product-cart-top.btn-added {
  background: #2b7a4b !important;
  border-color: #52b788 !important;
  color: #ffffff !important;
  transform: scale(1.12);
} */

/* Card Body below Image */
.product-card-body {
    padding: 10px 12px 12px 12px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.product-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    margin-bottom: 3px;
}

.product-location {
    font-size: 0.72rem;
    font-weight: 600;
    color: #63775f;
    letter-spacing: 0.01em;
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.product-location svg,
.product-location i {
    flex-shrink: 0;
    color: #687e65;
}

/* .product-weight-tag {
  font-size: 0.65rem;
  font-weight: 600;
  color: #556851;
  background: #f1ebe1;
  padding: 1px 6px;
  border-radius: 4px;
  white-space: nowrap;
} */

.product-name {
    font-family: "Lora", Georgia, serif;
    font-size: 0.98rem;
    font-weight: 600;
    color: #1a2821;
    line-height: 1.28;
    margin-bottom: 3px;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product-spec {
    font-size: 0.74rem;
    line-height: 1.35;
    color: #697867;
    margin-bottom: 6px;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product-price-row {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-top: auto;
}

.product-price-val {
    font-family: "Lora", Georgia, serif;
    font-size: 1.12rem;
    font-weight: 700;
    color: #1b382b;
    line-height: 1;
}

.product-price-mrp {
    font-size: 0.74rem;
    color: #929f90;
    text-decoration: line-through;
    font-weight: 500;
}

.product-discount-pill {
    font-size: 0.62rem;
    font-weight: 700;
    color: #2b7044;
    background: #edf6ee;
    border: 1px solid #d4ebd6;
    padding: 1px 5px;
    border-radius: 4px;
    line-height: 1.2;
}

.product-filter-bar {
    background: #fbf9f4;
    border: 1px solid #ebd9c2;
    border-radius: 12px;
    padding: 14px 18px;
    margin-bottom: 28px;
}

@media (max-width: 576px) {
    .product-card-body {
        padding: 0.65rem 0.6rem 0.6rem 0.6rem !important;
    }

    .product-name {
        font-size: 0.86rem !important;
        line-height: 1.25 !important;
        margin-bottom: 2px !important;
    }

    .product-location {
        font-size: 0.65rem !important;
        margin-bottom: 2px !important;
    }

    .product-spec {
        font-size: 0.68rem !important;
        line-height: 1.25 !important;
        margin-bottom: 4px !important;
    }

    .product-price-val {
        font-size: 0.95rem !important;
    }

    .product-price-mrp {
        font-size: 0.72rem !important;
    }

    .product-discount-pill {
        font-size: 0.6rem !important;
        padding: 1px 4px !important;
    }

    .btn-product-cart-top {
        width: 28px !important;
        height: 28px !important;
        font-size: 0.7rem !important;
    }
}

/* --------------------------------------------------------------------------
   2.4 EVENTS & CULTURAL FESTIVALS MODULE (.events-page, .event-detail-page)
   -------------------------------------------------------------------------- */
/* ============================================================
   5. SECTION 3: CURATED EVENTS MATRIX & CULTURAL FESTIVALS
   File: css/events.css
   ============================================================ */

/* ============================================================
   Bakri Chhap — Curated Events Matrix & Cultural Festivals
   ============================================================ */

/* Section 3: Space-Optimized Flagship Curated Events Matrix */
.curated-events-section {
    background: #fbf7f0;
    padding: clamp(2.5rem, 4vw, 3.8rem) 0;
    position: relative;
    border-top: 1px solid var(--line, #ddd0ba);
    border-bottom: 1px solid var(--line, #ddd0ba);
}

.curated-events-section .section-head {
    margin-bottom: 1.4rem;
}

.events-matrix-header-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #f0f4ef;
    color: #485643;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: 999px;
    border: 1px solid #bcc8b7;
    margin-bottom: 8px;
}

.events-matrix-header-badge .badge-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #899983;
    box-shadow: 0 0 0 2px rgba(137, 153, 131, 0.35);
    animation: pulseBeacon 2s infinite ease-in-out;
}

@keyframes pulseBeacon {

    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.3);
        opacity: 0.7;
    }
}

/* Curated Oval Pill Tabs Navigation */
.events-tab-nav-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 6px auto 16px;
    width: 100%;
    max-width: 980px;
}

.events-oval-tabs {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #f6efe4;
    padding: 5px 6px;
    border-radius: 999px;
    border: 1px solid rgba(221, 208, 186, 0.9);
    box-shadow: inset 0 1px 3px rgba(42, 36, 32, 0.05);
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
}

.events-oval-tabs::-webkit-scrollbar {
    display: none;
}

.event-oval-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 16px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 999px;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 0.84rem;
    font-weight: 500;
    color: #5c4e42;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    user-select: none;
}

.event-oval-pill:hover {
    color: #485643;
    background: #f0f4ef;
    border-color: #bcc8b7;
}

.event-oval-pill.active {
    background: #899983 !important;
    color: #ffffff !important;
    border-color: #899983 !important;
    font-weight: 600;
    box-shadow: 0 4px 14px rgba(137, 153, 131, 0.35);
    transform: translateY(-1px);
}

.event-oval-pill .pill-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #899983;
    transition: all 0.2s ease;
}

.event-oval-pill.active .pill-dot {
    background: #ffffff;
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.8);
}

.event-oval-pill .pill-count,
.event-oval-pill .pill-days {
    font-size: 0.72rem;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.06);
    color: #72685e;
    transition: all 0.2s ease;
}

.event-oval-pill.active .pill-count,
.event-oval-pill.active .pill-days {
    background: rgba(255, 255, 255, 0.22);
    color: #ffffff;
}

/* Featured Spotlight Banner (Shown when a specific festival is clicked) */
.events-spotlight-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #ffffff;
    border: 1px solid var(--line, #ddd0ba);
    border-left: 4px solid #213b32;
    border-radius: 10px;
    padding: 8px 16px;
    margin: 0 auto 16px;
    max-width: 820px;
    box-shadow: 0 2px 10px rgba(42, 36, 32, 0.04);
    animation: eventCardFadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    gap: 12px;
    flex-wrap: wrap;
}

.spotlight-bar-info {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    flex-wrap: wrap;
}

.spotlight-tag {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #213b32;
    background: #f6eee5;
    padding: 2px 8px;
    border-radius: 999px;
}

.spotlight-days {
    color: #72685e;
    font-weight: 500;
}

.spotlight-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.spotlight-btn-cycle,
.spotlight-btn-all {
    border: 1px solid var(--line, #ddd0ba);
    background: #faf6ef;
    color: #4a3e35;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.spotlight-btn-cycle:hover,
.spotlight-btn-all:hover {
    background: #213b32;
    color: #ffffff;
    border-color: #213b32;
}

.spotlight-btn-all {
    background: #213b32;
    color: #ffffff;
    border-color: #213b32;
}

/* Compact 2x2 Arranged Matrix Grid */
.events-compact-matrix {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

@media (max-width: 860px) {
    .events-compact-matrix {
        grid-template-columns: 1fr;
        gap: 14px;
    }
}

/* Event Card Component */
.event-card {
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid var(--line, #ddd0ba);
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(42, 36, 32, 0.04);
    display: flex;
    flex-direction: column;
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
    position: relative;
}

.event-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(42, 36, 32, 0.09);
}

.event-card.card-highlighted {
    outline: 2px solid #213b32;
    box-shadow: 0 8px 24px rgba(118, 37, 2, 0.16);
}

/* Media & Badges */
.event-card-media {
    position: relative;
    overflow: hidden;
    background: #2a2420;
    height: 145px;
}

@media (max-width: 500px) {
    .event-card-media {
        height: 135px;
    }
}

.event-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.event-card:hover .event-card-img {
    transform: scale(1.03);
}

.event-floating-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    background: rgba(25, 20, 16, 0.85);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: #f6efe3;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    z-index: 2;
}

.event-floating-badge.badge-flagship {
    background: rgba(118, 37, 2, 0.92);
    color: #ffffff;
}

.event-floating-season {
    position: absolute;
    bottom: 8px;
    left: 8px;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    color: #2a2420;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 4px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    z-index: 2;
}

/* Card Body */
.event-card-body {
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 6px;
}

.event-location-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 0.78rem;
    color: #72685e;
}

.event-loc-pin {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.event-card-title {
    font-family: var(--font-serif, "Fraunces", serif);
    font-size: 1.12rem;
    font-weight: 600;
    color: var(--ink, #262826);
    line-height: 1.25;
    margin: 2px 0 0 0;
}

/* Feature tags - Single-line horizontal scroll, never stacks vertically */
.event-tags-list {
    display: flex;
    align-items: center;
    gap: 5px;
    overflow-x: auto;
    white-space: nowrap;
    margin: 0;
    padding: 2px 0;
    scrollbar-width: none;
}

.event-tags-list::-webkit-scrollbar {
    display: none;
}

.event-tag-pill {
    background: #fbf7f0;
    border: 1px solid #ebdcc5;
    color: #213b32;
    font-size: 0.7rem;
    font-weight: 500;
    padding: 2px 7px;
    border-radius: 4px;
    flex-shrink: 0;
}

/* Clean Luxury Schedule & Capacity Capsule (Days-Only, No Seconds) */
.event-schedule-capsule {
    background: #fbf8f3;
    border: 1px solid rgba(221, 208, 186, 0.85);
    border-radius: 999px;
    padding: 6px 14px;
    margin: 5px 0 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.event-days-indicator {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: #4a3e35;
    white-space: nowrap;
}

.event-days-indicator strong {
    color: #213b32;
    font-weight: 700;
}

.event-seats-indicator {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.74rem;
    font-weight: 600;
    color: #b83216;
    white-space: nowrap;
}

.cap-mini-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #b83216;
    animation: pulseUrgent 1.8s infinite;
}

@keyframes pulseUrgent {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(184, 50, 22, 0.6);
    }

    70% {
        transform: scale(1.2);
        box-shadow: 0 0 0 5px rgba(184, 50, 22, 0);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(184, 50, 22, 0);
    }
}

.seats-progress-track {
    width: 44px;
    height: 5px;
    background: #e9e0d1;
    border-radius: 999px;
    overflow: hidden;
}

.seats-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #213b32, #d9532f);
    border-radius: 999px;
    transition: width 0.6s ease;
}

/* Card Footer with Price and Mandatory CTA */
.event-card-footer {
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid var(--line, #ddd0ba);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.event-price-box {
    display: flex;
    flex-direction: column;
}

.event-price-amount {
    font-family: var(--font-serif, "Fraunces", serif);
    font-size: 1.25rem;
    font-weight: 700;
    color: #64755e;
    line-height: 1.05;
}

.event-price-meta {
    font-size: 0.7rem;
    color: #72685e;
}

.event-dividend-pill {
    font-size: 0.64rem;
    color: #485643;
    font-weight: 600;
    background: #f0f4ef;
    border: 1px solid #bcc8b7;
    padding: 1px 6px;
    border-radius: 4px;
    display: inline-block;
    margin-top: 2px;
}

/* Mandatory CTA Rule: 'Reserve Experience Pass' */
.btn-reserve-pass {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 15px;
    background: #899983 !important;
    color: #ffffff !important;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 0.84rem;
    font-weight: 600;
    border-radius: 8px;
    border: 1px solid #899983;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 3px 10px rgba(137, 153, 131, 0.35);
    text-decoration: none;
    white-space: nowrap;
}

.btn-reserve-pass:hover {
    background: #64755e !important;
    border-color: #64755e !important;
    transform: translateY(-1px);
    box-shadow: 0 5px 16px rgba(100, 117, 94, 0.4);
    color: #ffffff !important;
}

.btn-reserve-pass svg {
    transition: transform 0.2s ease;
}

.btn-reserve-pass:hover svg {
    transform: translateX(3px);
}

/* Experience Checkout Modal Quantity Buttons */
.exp-qty-btn {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid #ded3c4;
    background: #ffffff;
    color: #213b32;
    font-weight: 700;
    font-size: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    line-height: 1;
}

.exp-qty-btn:hover {
    background: #213b32;
    color: #ffffff;
    border-color: #213b32;
}

/* Persistent Schedule Tracker Floating Bar - Compact & Unobtrusive */
.persistent-schedule-bar {
    position: fixed;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1045;
    background: rgba(35, 29, 25, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(189, 122, 56, 0.4);
    border-radius: 999px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
    padding: 5px 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: #ffffff;
    font-size: 0.82rem;
    max-width: 95vw;
    width: auto;
    transition: all 0.3s ease;
}

@media (max-width: 767px) {
    .persistent-schedule-bar {
        bottom: 64px;
        /* above android bottom bar */
        padding: 4px 10px;
        gap: 8px;
    }

    .persistent-schedule-bar .psb-center {
        display: none;
        /* Keep super compact on mobile so it never covers cards */
    }

    .persistent-schedule-bar .psb-title {
        font-size: 0.8rem;
        max-width: 120px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

.persistent-schedule-bar.minimized {
    padding: 6px 10px;
}

.persistent-schedule-bar.minimized .psb-center,
.persistent-schedule-bar.minimized .psb-cta,
.persistent-schedule-bar.minimized .psb-info {
    display: none !important;
}

.psb-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.psb-radar {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #213b32;
    box-shadow: 0 0 0 2px rgba(189, 122, 56, 0.4);
    animation: pulseBeacon 2s infinite ease-in-out;
    flex-shrink: 0;
}

.psb-badge {
    font-size: 0.62rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #213b32;
    font-weight: 700;
    display: block;
    line-height: 1;
}

.psb-title {
    font-family: "Lora", serif;
    font-size: 0.88rem;
    color: #ffffff;
    font-weight: 600;
    white-space: nowrap;
}

.psb-center {
    display: flex;
    align-items: center;
    gap: 12px;
    border-left: 1px solid rgba(255, 255, 255, 0.14);
    border-right: 1px solid rgba(255, 255, 255, 0.14);
    padding: 0 12px;
}

.psb-countdown {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: "Plus Jakarta Sans", monospace, sans-serif;
    font-size: 0.82rem;
    font-weight: 600;
    color: #f7dfbe;
    white-space: nowrap;
}

.psb-capacity-box {
    display: flex;
    align-items: center;
    gap: 6px;
}

.psb-mini-bar {
    width: 44px;
    height: 5px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 999px;
    overflow: hidden;
}

.psb-mini-fill {
    height: 100%;
    background: #213b32;
    border-radius: 999px;
    transition: width 0.4s ease;
}

.psb-seats-text {
    font-size: 0.72rem;
    color: #e0d5c5;
    white-space: nowrap;
}

.psb-cycle-btns {
    display: inline-flex;
    gap: 3px;
}

.psb-cycle-btn {
    background: rgba(255, 255, 255, 0.12);
    border: none;
    color: #ffffff;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.8rem;
    line-height: 1;
    transition: background 0.2s ease;
}

.psb-cycle-btn:hover {
    background: #213b32;
}

.psb-right {
    display: flex;
    align-items: center;
    gap: 6px;
}

.psb-cta {
    padding: 5px 12px !important;
    font-size: 0.78rem !important;
    white-space: nowrap;
    border-radius: 4px;
}

.psb-min-btn {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #c9bdae;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.85rem;
    line-height: 1;
    transition: all 0.2s ease;
}

.psb-min-btn:hover {
    color: #fff;
    border-color: #fff;
}

/* Optimized Checkout Modal Drawer Styling */
.haven-checkout-dialog {
    max-width: 580px !important;
    max-height: 90vh;
    overflow-y: auto;
    padding: 0;
    border-radius: 16px;
}

.checkout-modal-banner {
    background: #2a2420;
    color: #ffffff;
    padding: 16px 20px;
    position: relative;
    border-bottom: 2px solid #213b32;
}

.checkout-modal-eyebrow {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #213b32;
    font-weight: 600;
    display: block;
    margin-bottom: 2px;
}

.checkout-modal-title {
    font-family: "Lora", Georgia, "Times New Roman", serif;
    font-size: 1.35rem;
    color: #ffffff;
    margin: 0;
}

.checkout-modal-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 6px;
    font-size: 0.8rem;
    color: #ddd0ba;
}

.checkout-modal-body {
    padding: 18px 20px;
    background: #ffffff;
}

.checkout-step-title {
    font-family: "Lora", serif;
    font-size: 1.05rem;
    color: #2a2420;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.step-num-bubble {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #213b32;
    color: #ffffff;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.pass-tier-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 14px;
}

@media (max-width: 540px) {
    .pass-tier-cards {
        grid-template-columns: 1fr;
    }
}

.pass-tier-card {
    border: 1.5px solid var(--line, #ddd0ba);
    border-radius: 8px;
    padding: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    background: #fdfaf6;
    text-align: left;
}

.pass-tier-card:hover {
    border-color: #213b32;
    background: #ffffff;
}

.pass-tier-card.selected {
    border-color: #213b32;
    background: #ffffff;
    box-shadow: 0 2px 8px rgba(118, 37, 2, 0.12);
}

.tier-title {
    font-size: 0.82rem;
    font-weight: 600;
    color: #2a2420;
    margin-bottom: 2px;
}

.tier-price {
    font-family: "Lora", serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: #213b32;
}

.tier-desc {
    font-size: 0.68rem;
    color: #72685e;
    line-height: 1.3;
    margin-top: 2px;
}

.checkout-calculation-box {
    background: #fbf8f2;
    border: 1px solid var(--line, #ddd0ba);
    border-radius: 8px;
    padding: 12px 14px;
    margin-bottom: 16px;
}

.calc-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.82rem;
    color: #5e5246;
    margin-bottom: 6px;
}

.calc-row.total-row {
    border-top: 1px dashed var(--line, #ddd0ba);
    margin-top: 8px;
    padding-top: 8px;
    font-size: 0.95rem;
    font-weight: 700;
    color: #2a2420;
}

.calc-row.total-row span:last-child {
    font-family: "Lora", serif;
    font-size: 1.25rem;
    color: #213b32;
}

.checkout-fields-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 14px;
}

@media (max-width: 540px) {
    .checkout-fields-grid {
        grid-template-columns: 1fr;
    }
}

.checkout-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.checkout-field label {
    font-size: 0.76rem;
    font-weight: 600;
    color: #2a2420;
}

.checkout-field input,
.checkout-field select {
    padding: 8px 10px;
    border: 1px solid var(--line, #ddd0ba);
    border-radius: 6px;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 0.86rem;
    color: #2a2420;
    background: #ffffff;
    outline: none;
}

.checkout-field input:focus,
.checkout-field select:focus {
    border-color: #213b32;
    box-shadow: 0 0 0 2px rgba(118, 37, 2, 0.1);
}

.checkout-guarantee-strip {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #edf7ee;
    border: 1px solid #cce9ce;
    border-radius: 6px;
    padding: 8px 10px;
    font-size: 0.74rem;
    color: #235525;
    margin-bottom: 16px;
}

.checkout-success-view {
    text-align: center;
    padding: 24px 16px;
}

.success-check-ic {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #edf7ee;
    color: #2e6930;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    border: 2px solid #a3d9a7;
}

.checkout-voucher-card {
    background: #fbf8f2;
    border: 1px dashed #213b32;
    border-radius: 8px;
    padding: 14px;
    text-align: left;
    margin: 14px 0;
}

/* ============================================================
   EVENTS & FESTIVALS LISTING AND DETAIL SYSTEM
   ============================================================ */
.events-listing-page {
    background-color: var(--sand-bg, #faf8f5);
}

/* Upcoming Flagship Event Card (Full Width) */
.upcoming-event-card {
    background: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid #ede5d8;
    box-shadow: 0 8px 24px rgba(33, 59, 50, 0.06);
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
    margin-bottom: clamp(2rem, 4vw, 3rem);
}

.upcoming-event-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 36px rgba(33, 59, 50, 0.1);
}

.upcoming-img-wrap {
    position: relative;
    min-height: 280px;
    height: 100%;
    background-color: #213b32;
    overflow: hidden;
}

.upcoming-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.upcoming-event-card:hover .upcoming-img {
    transform: scale(1.03);
}

.upcoming-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    background: #a85f42;
    color: #ffffff;
    padding: 4px 12px;
    border-radius: 50px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
}

.upcoming-body {
    padding: clamp(1.5rem, 3vw, 2.5rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.upcoming-meta-tag {
    color: #a85f42;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 0.4rem;
}

.upcoming-title {
    font-family: var(--font-serif, "Fraunces", Georgia, serif);
    font-size: clamp(1.4rem, 2.4vw, 2rem);
    font-weight: 700;
    color: #213b32;
    margin-bottom: 0.75rem;
    line-height: 1.25;
}

.upcoming-desc {
    font-size: clamp(0.88rem, 1.1vw, 0.96rem);
    color: #555e58;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

/* Past & General Event Cards (4 col on Desktop, 3 col on Tablet, 2 col on Mobile) */
.event-card-item {
    background: #ffffff;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid #eee7dc;
    box-shadow: 0 4px 14px rgba(33, 59, 50, 0.04);
    transition: box-shadow 0.25s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.event-card-item:hover {
    box-shadow: 0 12px 24px rgba(33, 59, 50, 0.09);
}

.event-card-img-wrap {
    position: relative;
    width: 100%;
    height: 180px;
    background: #213b32;
    overflow: hidden;
}

.event-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.event-card-item:hover .event-card-img {
    transform: scale(1.06);
}

.event-card-body {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.event-card-title {
    font-family: var(--font-serif, "Fraunces", Georgia, serif);
    font-size: 1.05rem;
    font-weight: 700;
    color: #213b32;
    line-height: 1.3;
    margin-bottom: 0.45rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.event-card-desc {
    font-size: 0.82rem;
    color: #636b66;
    line-height: 1.5;
    margin-bottom: 0.9rem;
    flex-grow: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.event-card-cta {
    margin-top: auto;
}

/* Event Detail Styles */
.event-detail-section {
    background-color: #faf8f5;
}

.event-detail-header {
    border-bottom: 1px solid #ede7dc !important;
}

/* .event-detail-title {
    font-family: var(--font-serif, "Fraunces", Georgia, serif);
    font-size: clamp(1.8rem, 2.6vw, 2.4rem);
    font-weight: 700;
    line-height: 1.25;
    color: #213b32;
    margin-bottom: 0.4rem;
} */

.event-detail-price {
    font-family: var(--font-serif, "Fraunces", serif);
    color: #213b32 !important;
}

.event-meta-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: #ffffff;
    border: 1px solid #ede7dc;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 600;
    color: #454d48;
}

.event-main-stage {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    border-radius: 16px;
    overflow: hidden;
    background: #213b32;
    border: 1px solid #ede7dc;
}

.event-main-stage img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.35s ease;
}

.event-stage-caption {
    position: absolute;
    bottom: 16px;
    left: 16px;
    right: 16px;
    z-index: 2;
    pointer-events: none;
}

.event-media-badge {
    background: rgba(33, 59, 50, 0.85);
    color: #ffffff;
    font-size: 0.74rem;
}

.event-thumb-strip {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    margin-top: 10px;
    margin-bottom: 1.5rem;
}

.event-thumb-item {
    aspect-ratio: 4 / 3;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    border: 2.5px solid transparent;
    opacity: 0.65;
    transition: all 0.25s ease;
    background: #ece7de;
}

.event-thumb-item.active,
.event-thumb-item:hover {
    border-color: #899983;
    opacity: 1;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(33, 59, 50, 0.16);
}

.event-thumb-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.event-content-box {
    background: #ffffff;
    border-radius: 20px;
    padding: clamp(1.6rem, 3vw, 2.4rem);
    border: 1px solid #ede7dc;
    box-shadow: 0 10px 30px rgba(33, 59, 50, 0.04);
    margin-bottom: 2rem;
}

.event-section-heading {
    font-family: var(--font-serif, "Fraunces", Georgia, serif);
    font-size: 1.45rem;
    font-weight: 700;
    color: #213b32;
    margin-bottom: 1.2rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

.event-section-heading i {
    color: #c59a45;
    font-size: 1.25rem;
}

.itinerary-timeline {
    position: relative;
    padding-left: 28px;
}

.itinerary-timeline::before {
    content: "";
    position: absolute;
    top: 10px;
    bottom: 10px;
    left: 10px;
    width: 2px;
    background: #d1c5b0;
}

.itinerary-node {
    position: relative;
    margin-bottom: 2rem;
}

.itinerary-node:last-child {
    margin-bottom: 0;
}

.itinerary-dot {
    position: absolute;
    left: -28px;
    top: 4px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #c59a45;
    border: 4px solid #ffffff;
    box-shadow: 0 0 0 2px #213b32;
}

.itinerary-day-badge {
    display: inline-block;
    font-size: 0.76rem;
    font-weight: 700;
    color: #a85f42;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 0.25rem;
}

.event-booking-sidebar {
    position: sticky;
    top: 90px;
    background: #ffffff;
    border-radius: 20px;
    border: 1px solid #ede5d8;
    box-shadow: 0 16px 40px rgba(33, 59, 50, 0.08);
    overflow: hidden;
}

.event-booking-header {
    background: #213b32;
    color: #ffffff;
    padding: 1.8rem;
    text-align: center;
}

.event-booking-body {
    padding: 1.8rem;
}

.booking-feature-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.88rem;
    color: #454d48;
    margin-bottom: 0.85rem;
}

.booking-feature-row i {
    color: #356b3b;
    margin-top: 3px;
    flex-shrink: 0;
}

/* Unified Event Pass Booking Modal Styles */
.event-modal-head {
    background: #213b32;
    color: #ffffff;
    padding: 22px 24px;
}

.event-modal-badge {
    background: #c59a45;
    color: #1a2e26;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 999px;
    display: inline-block;
}

.event-modal-title {
    font-family: var(--font-serif, "Fraunces", Georgia, serif);
    font-size: 1.35rem;
    font-weight: 700;
    color: #ffffff;
    margin: 6px 0 2px 0;
}

.event-modal-subtitle {
    font-size: 0.85rem;
    color: #d1ded0;
    margin: 0;
}

.event-modal-body {
    background: #ffffff;
    padding: 24px;
}

.event-form-label {
    font-size: 0.76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #213b32;
    margin-bottom: 6px;
    display: block;
}

.event-form-control {
    width: 100%;
    border: 1px solid #d1ded0;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 0.92rem;
    color: #262826;
    background-color: #ffffff;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.event-form-control:focus {
    border-color: #213b32;
    box-shadow: 0 0 0 3px rgba(33, 59, 50, 0.12);
    outline: none;
}

/* ============================================================
   DESTINATION DIRECTORY MODULE (.destination-*)
   ============================================================ */
.destination-card-item {
    background: #ffffff;
    border: 1px solid #ede7dc;
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: box-shadow 0.28s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 4px 16px rgba(33, 59, 50, 0.04);
}

.destination-card-item:hover {
    box-shadow: 0 12px 30px rgba(33, 59, 50, 0.09);
}

.destination-card-img-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #213b32;
}

.destination-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.destination-card-item:hover .destination-card-img {
    transform: scale(1.05);
}

.destination-img-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
            rgba(0, 0, 0, 0.2) 0%,
            rgba(0, 0, 0, 0) 40%,
            rgba(0, 0, 0, 0.45) 100%);
    pointer-events: none;
}

/* .destination-badge-region {
    position: absolute;
    top: 12px;
    left: 12px;
    background: rgba(33, 59, 50, 0.85);
    backdrop-filter: blur(6px);
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    z-index: 2;
} */

.destination-card-body {
    padding: 1.15rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

/* .destination-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #636b66;
    margin-bottom: 0.35rem;
} */

.destination-name {
    font-family: var(--font-serif, "Fraunces", Georgia, serif);
    font-size: 1.25rem;
    font-weight: 700;
    color: #213b32;
    margin-bottom: 0.85rem;
    line-height: 1.25;
}

.destination-name a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

.destination-name a:hover {
    color: #c59a45;
}

.destination-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
    background: #faf8f4;
    border: 1px solid #eee6d8;
    border-radius: 12px;
    padding: 8px 4px;
    margin-bottom: 1rem;
    width: 100%;
    box-sizing: border-box;
}

.destination-stat-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2px 3px;
    min-width: 0;
    overflow: hidden;
}

.destination-stat-cell:not(:last-child) {
    border-right: 1px solid #e8decb;
}

.destination-stat-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
    min-width: 0;
    overflow: hidden;
}

.destination-stat-cell strong {
    font-family: var(--font-serif, "Fraunces", serif);
    font-size: 0.94rem;
    font-weight: 700;
    color: #213b32;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    max-width: 100%;
}

.destination-stat-cell span {
    font-size: 0.7rem;
    font-weight: 500;
    color: #6a746e;
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    max-width: 100%;
}

.destination-card-footer {
    margin-top: auto;
    padding-top: 0.2rem;
}

/* Mobile & Tablet Adjustments for 2-column view */
@media (max-width: 767.98px) {
    .destination-card-item {
        border-radius: 12px;
    }

    .destination-card-img-wrap {
        aspect-ratio: 16 / 11;
    }

    .destination-card-body {
        padding: 0.6rem 0.45rem;
    }

    .destination-name {
        font-size: 0.9rem;
        margin-bottom: 0.45rem;
        line-height: 1.2;
    }

    .destination-stats-grid {
        padding: 4px 1px;
        gap: 0;
        border-radius: 8px;
        margin-bottom: 0.6rem;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .destination-stat-cell {
        padding: 2px 1px;
        min-width: 0;
    }

    .destination-stat-cell:not(:last-child) {
        border-right: 1px solid #e8decb;
    }

    .destination-stat-cell strong {
        font-size: 0.74rem;
        line-height: 1;
        white-space: nowrap;
    }

    .destination-stat-cell span {
        font-size: 0.54rem;
        font-weight: 600;
        line-height: 1;
        margin-top: 2px;
        white-space: nowrap;
        letter-spacing: -0.02em;
    }

    .destination-card-footer {
        padding-top: 0;
    }

    .destination-card-footer .btn {
        font-size: 0.72rem;
        padding: 5px 8px;
        border-radius: 6px;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

@media (max-width: 380px) {
    .destination-card-body {
        padding: 0.5rem 0.35rem;
    }

    .destination-name {
        font-size: 0.82rem;
        margin-bottom: 0.35rem;
    }

    .destination-stat-cell strong {
        font-size: 0.68rem;
    }

    .destination-stat-cell span {
        font-size: 0.5rem;
    }

    .destination-card-footer .btn {
        font-size: 0.68rem;
        padding: 4px 6px;
    }
}

/* ============================================================
   TEAM & FOUNDER SHOWCASE SECTION (.founder-* & .team-*)
   ============================================================ */

.team-showcase-section {
    position: relative;
}

.founder-spotlight-card {
    background: #ffffff;
    border: 1px solid #e8e2d5;
    border-radius: 24px;
    padding: 20px;
    box-shadow: 0 10px 40px rgba(33, 59, 50, 0.06);
    position: relative;
    overflow: hidden;
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

/* .founder-spotlight-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: linear-gradient(90deg, #c86d46 0%, #e8924b 40%, #213b32 100%);
} */

.founder-img-wrapper {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 12px 32px rgba(33, 59, 50, 0.12);
    /* border: 4px solid #ffffff; */
    background: #eadecc;
    aspect-ratio: 1 / 1;
    /* max-height: 440px; */
}

.founder-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.founder-spotlight-card:hover .founder-img-wrapper img {
    transform: scale(1.03);
}

/* .founder-crown-badge {
    position: absolute;
    top: 16px;
    left: 16px;
    background: rgba(33, 59, 50, 0.94);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #ffffff;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 7px 14px;
    border-radius: 24px;
    border: 1px solid rgba(232, 146, 75, 0.5);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.founder-crown-badge i {
    color: #f6c042;
} */

.founder-role-eyebrow {
    font-size: 0.84rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #c86d46;
    display: inline-block;
    margin-bottom: 0.4rem;
}

.founder-name {
    font-family: "Lora", Georgia, serif;
    font-size: clamp(1.85rem, 3vw, 2.5rem);
    font-weight: 700;
    color: #1b3d2f;
    margin-bottom: 0.3rem;
    line-height: 1.15;
}

.founder-subheading {
    font-size: 1rem;
    font-weight: 600;
    color: #5c6f66;
    margin-bottom: 1.25rem;
}

.founder-bio-text {
    font-size: 0.96rem;
    line-height: 1.68;
    color: #4a453e;
    margin-bottom: 0.85rem;
}

.founder-quote-box {
    background: #faf7f2;
    border-left: 4px solid #c86d46;
    border-radius: 0 14px 14px 0;
    padding: 1rem 1.35rem;
    margin: 1.25rem 0;
    font-style: italic;
    color: #213b32;
    font-weight: 500;
    line-height: 1.6;
    font-size: 0.98rem;
    box-shadow: 0 2px 8px rgba(33, 59, 50, 0.03);
}

/* .founder-tags-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 1.25rem;
} */

/* .founder-tag-pill {
    background: #f3eee3;
    color: #213b32;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 20px;
    border: 1px solid #e0d7c5;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.founder-tag-pill i {
    color: #c86d46;
} */

/* Team Grid Header */
.team-section-heading {
    margin-bottom: 2.25rem;
}

.team-subheading {
    font-family: "Lora", Georgia, serif;
    font-size: clamp(1.4rem, 2.2vw, 1.85rem);
    font-weight: 700;
    color: #1b3d2f;
    margin-bottom: 0.4rem;
}

/* Team Member Cards */
.team-member-card {
    background: #ffffff;
    border: 1px solid #e8e2d5;
    border-radius: 18px;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 18px rgba(33, 59, 50, 0.04);
    transition: transform 0.3s ease, box-shadow 0.35s ease;
}

.team-member-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 34px rgba(33, 59, 50, 0.12);
}

.team-card-img-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #f0ebe1;
}

.team-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.team-member-card:hover .team-card-img {
    transform: scale(1.08);
}

.team-img-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
            transparent 50%,
            rgba(33, 59, 50, 0.65) 100%);
    pointer-events: none;
}

/* .team-designation-badge {
    position: absolute;
    bottom: 12px;
    left: 12px;
    right: 12px;
    background: rgba(33, 59, 50, 0.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #ffffff;
    font-size: 0.74rem;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    letter-spacing: 0.02em;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    z-index: 2;
} */

.team-card-body {
    padding: 1.25rem 1.15rem 1.35rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    background: #ffffff;
}

.team-member-name {
    font-family: "Lora", Georgia, serif;
    font-size: 1.2rem;
    font-weight: 700;
    color: #1b3d2f;
    margin-bottom: 0.2rem;
    line-height: 1.3;
}

.team-member-role-sub {
    font-size: 0.8rem;
    color: #c86d46;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.6rem;
}

.team-member-bio {
    font-size: 0.88rem;
    line-height: 1.6;
    color: #55504a;
    margin-bottom: 0.9rem;
    flex-grow: 1;
}

.team-member-quote-box {
    margin-top: auto;
    padding: 0.8rem 1rem;
    background: #faf7f2;
    border-left: 3px solid #c86d46;
    border-radius: 8px;
    font-family: "Lora", Georgia, serif;
    font-style: italic;
    font-size: 0.85rem;
    line-height: 1.5;
    color: #383431;
}

.team-member-quote-box i {
    color: #c86d46;
    font-size: 0.8rem;
}

/* Responsive Overrides */
@media (max-width: 991px) {
    .founder-spotlight-card {
        padding: 1.5rem;
        margin-bottom: 2.5rem;
    }

    .founder-img-wrapper {
        max-height: 360px;
    }
}

@media (max-width: 576px) {

    /* .founder-crown-badge {
        font-size: 0.7rem;
        padding: 5px 10px;
        top: 10px;
        left: 10px;
    } */
    .founder-name {
        font-size: 1.6rem;
    }

    .founder-quote-box {
        font-size: 0.88rem;
        padding: 0.8rem 1rem;
    }

    /* .founder-tag-pill {
        font-size: 0.72rem;
        padding: 4px 10px;
    } */
    .team-card-body {
        padding: 0.85rem 0.6rem 0.95rem;
    }

    .team-member-name {
        font-size: 0.94rem;
    }

    /* .team-designation-badge {
        font-size: 0.66rem;
        padding: 3px 6px;
        bottom: 8px;
        left: 8px;
        right: 8px;
    } */
    .team-member-role-sub {
        font-size: 0.76rem;
    }
}

/* ============================================================
   VILLAGE LISTING & DIRECTORY MODULE (.village-*)
   ============================================================ */
.village-filter-box {
    background: #ffffff;
    border: 1px solid #ede7dc;
    border-radius: 18px;
    padding: 1.25rem 1rem;
    box-shadow: 0 4px 20px rgba(33, 59, 50, 0.04);
    margin-bottom: 2rem;
}

.village-filter-label {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #213b32;
    margin-bottom: 0.4rem;
    display: flex;
    align-items: center;
    gap: 6px;
}

.village-filter-select {
    border-radius: 12px;
    border: 1px solid #d1ded0;
    padding: 10px 14px;
    font-size: 0.92rem;
    color: #262826;
    background-color: #faf8f5;
    transition: all 0.2s ease;
}

.village-filter-select:focus {
    border-color: #213b32;
    background-color: #ffffff;
    box-shadow: 0 0 0 3px rgba(33, 59, 50, 0.12);
    outline: none;
}

.village-card-item {
    background: #ffffff;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid #ebe5d8;
    box-shadow: 0 4px 18px rgba(33, 59, 50, 0.04);
    transition: box-shadow 0.28s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.village-card-item:hover {
    box-shadow: 0 14px 32px rgba(33, 59, 50, 0.1);
}

.village-card-img-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    background: #213b32;
    overflow: hidden;
}

.village-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.45s ease;
}

.village-card-item:hover .village-card-img {
    transform: scale(1.06);
}

.village-img-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
            rgba(0, 0, 0, 0.1) 0%,
            rgba(0, 0, 0, 0) 40%,
            rgba(33, 59, 50, 0.35) 100%);
    pointer-events: none;
}

/* .village-badge-alt {
    position: absolute;
    top: 10px;
    left: 10px;
    background: rgba(33, 59, 50, 0.85);
    backdrop-filter: blur(6px);
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 999px;
    letter-spacing: 0.02em;
    z-index: 2;
} */

.village-badge-state {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(245, 240, 230, 0.92);
    backdrop-filter: blur(6px);
    color: #213b32;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 999px;
    text-transform: capitalize;
    letter-spacing: 0.04em;
    z-index: 2;
}

.village-card-body {
    padding: 1rem 1.15rem 1.15rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.village-location {
    font-size: 0.76rem;
    font-weight: 600;
    color: #7a827d;
    margin-bottom: 0.25rem;
    display: flex;
    align-items: center;
    gap: 5px;
}

.village-location i {
    color: #a85f42;
    font-size: 0.72rem;
}

.village-name {
    font-family: var(--font-serif, "Fraunces", Georgia, serif);
    font-size: clamp(1.05rem, 1.4vw, 1.25rem);
    font-weight: 700;
    color: #213b32;
    line-height: 1.25;
    margin: 0 0 0.35rem 0;
}

.village-name a {
    color: #213b32;
    text-decoration: none;
    transition: color 0.2s ease;
}

.village-name a:hover {
    color: #899983;
}

.village-summary {
    font-size: 0.82rem;
    color: #555d57;
    line-height: 1.5;
    margin-bottom: 0.75rem;
    flex-grow: 1;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* .village-highlights {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 0.85rem;
} */

.village-highlight-tag {
    font-size: 0.7rem;
    font-weight: 600;
    color: #485643;
    background: #f0f4ef;
    border: 1px solid #dce5da;
    border-radius: 6px;
    padding: 2px 7px;
    white-space: nowrap;
}

.village-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 0.75rem;
    border-top: 1px solid #f2ede4;
    margin-top: auto;
    gap: 8px;
}

.village-stat {
    font-size: 0.76rem;
    color: #69736c;
}

.village-stat strong {
    color: #213b32;
}

.btn-village-explore {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: #213b32;
    color: #ffffff;
    font-size: 0.78rem;
    font-weight: 600;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.btn-village-explore:hover {
    background: #899983;
    color: #ffffff;
    transform: translateX(2px);
}

@media (max-width: 576px) {
    .village-card-body {
        padding: 0.5rem;
    }

    /* .village-highlights {
        display: none;
    } */
    .village-card-footer {
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
    }

    .btn-village-explore {
        justify-content: center;
        width: 100%;
        padding: 6px 10px;
    }
}

/* ============================================================
   VILLAGE DETAIL MODULE (.village-detail-*)
   ============================================================ */
.village-detail-wrap {
    background-color: #faf8f5;
}

/* Full Width Swiper Slider */
.village-slider-wrap {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid #ede5d8;
    box-shadow: 0 8px 30px rgba(33, 59, 50, 0.08);
    margin-bottom: 2rem;
}

.villageSwiper {
    width: 100%;
    aspect-ratio: 16 / 9;
    max-height: 480px;
    background: #213b32;
}

.village-slide-inner {
    position: relative;
    width: 100%;
    height: 100%;
}

.village-slide-inner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* .village-slide-caption {
    position: absolute;
    bottom: 24px;
    left: 20px;
    right: 20px;
    z-index: 2;
    pointer-events: none;
} */

/* .village-stage-badge {
    background: rgba(33, 59, 50, 0.88);
    backdrop-filter: blur(8px);
    color: #ffffff;
    font-size: 0.82rem;
    font-weight: 500;
    padding: 6px 14px;
    border-radius: 999px;
    display: inline-block;
} */

/* Swiper Navigation Buttons */
.village-swiper-prev,
.village-swiper-next {
    width: 20px;
    height: 42px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(6px);
    color: #899983;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: all 0.2s ease;
}

.village-swiper-prev:after,
.village-swiper-next:after {
    font-size: 13px;
    font-weight: bold;
}

.village-swiper-prev:hover,
.village-swiper-next:hover {
    background: #899983;
    color: #ffffff;
}

/* .village-swiper-pagination .swiper-pagination-bullet {
    background: #ffffff;
    opacity: 0.6;
    width: 9px;
    height: 9px;
    transition: all 0.25s ease;
}

.village-swiper-pagination .swiper-pagination-bullet-active {
    opacity: 1;
    background: #c59a45;
    width: 24px;
    border-radius: 6px;
} */

/* Light Color Stats & Overview Box */
/* .village-stats-box {
    background: #ffffff;
    border: 1px solid #ede7dc;
    border-radius: 20px;
    padding: clamp(1.25rem, 2.5vw, 1.75rem);
    box-shadow: 0 4px 20px rgba(33, 59, 50, 0.04);
    margin-bottom: 2rem;
} */

/* .village-stats-title {
    font-family: var(--font-serif, "Fraunces", serif);
    font-size: 1.25rem;
    font-weight: 700;
    color: #213b32;
    margin-bottom: 1.25rem;
    display: flex;
    align-items: center;
    gap: 10px;
} */

.village-stat-card {
    background: #fff;
    border: 1px solid #eee6d8;
    border-radius: 14px;
    padding: 0.8rem;
    transition: all 0.2s ease;
    height: 100%;
}

.village-stat-card:hover {
    /* background: #f3eee3; */
    /* border-color: #ded3bf; */
    transform: translateY(-2px);
}

.village-stat-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: #e9f1ee;
    color: #899983;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    margin-bottom: 0.75rem;
}

.village-stat-num {
    font-family: var(--font-serif, "Fraunces", serif);
    font-size: 1.55rem;
    font-weight: 700;
    color: #213b32;
    line-height: 1.1;
    margin-bottom: 0.2rem;
}

.village-stat-label {
    font-size: 0.8rem;
    color: #636b66;
    margin-bottom: 0;
    line-height: 1.4;
}

/* Detail Card (Title, Meta Pills & Description) */
.village-detail-card {
    background: #ffffff;
    border: 1px solid #ebe5d8;
    border-radius: 20px;
    padding: 1rem;
    box-shadow: 0 6px 24px rgba(33, 59, 50, 0.04);
    /* margin-bottom: 2rem; */
}

/* .village-detail-title {
    font-family: var(--font-serif, "Fraunces", Georgia, serif);
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    font-weight: 700;
    color: #213b32;
    line-height: 1.2;
    margin-bottom: 0.4rem;
} */

.village-meta-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 1.25rem;
}

.village-meta-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: #fbf9f5;
    border: 1px solid #ede7dc;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 600;
    color: #485643;
}

.village-meta-pill i {
    color: #899983;
}

/* Custom Brand Buttons */
/* .btn-amber {
    background-color: #c59a45;
    color: #ffffff;
    border: 1px solid #b38836;
}

.btn-amber:hover {
    background-color: #b38836;
    color: #ffffff;
} */

.btn-forest {
    background-color: #213b32;
    color: #ffffff;
    border: 1px solid #182b24;
}

.btn-forest:hover {
    background-color: #182b24;
    color: #ffffff;
}

/* Mobile responsive adjustments */
@media (max-width: 767.98px) {
    .upcoming-img-wrap {
        min-height: 200px;
    }

    .event-card-img-wrap {
        height: 130px;
    }

    .event-card-body {
        padding: 0.75rem;
    }

    .event-card-title {
        font-size: 0.9rem;
        margin-bottom: 0.35rem;
    }

    .event-card-desc {
        font-size: 0.76rem;
        margin-bottom: 0.75rem;
        -webkit-line-clamp: 2;
    }

    .event-card-cta .btn {
        font-size: 0.76rem;
        padding: 5px 8px;
    }
}

/* --------------------------------------------------------------------------
   2.5 DESTINATIONS & VILLAGES MODULE
   -------------------------------------------------------------------------- */

/* ============================================================
   DESTINATION DETAIL MODULE (.dest-detail-*)
   ============================================================ */

/* 1. Hero Split Showcase */
.dest-hero-section {
    background: #ffffff;
    border: 1px solid #ede7dc;
    border-radius: 20px;
    padding: clamp(1.25rem, 3vw, 2.25rem);
    box-shadow: 0 6px 24px rgba(33, 59, 50, 0.04);
}

/* .dest-hero-title {
    font-family: var(--font-serif, "Fraunces", Georgia, serif);
    font-size: clamp(1.8rem, 3.2vw, 2.6rem);
    font-weight: 700;
    color: #213b32;
    line-height: 1.18;
    margin-bottom: 0.75rem;
} */

.dest-hero-lead {
    color: #434c46;
    font-size: 0.98rem;
    line-height: 1.75;
    margin-bottom: 1.25rem;
}

.dest-hero-slider-wrap {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    background: #213b32;
    height: 100%;
    /* min-height: 320px; */
    border: 1px solid #ede5d8;
    box-shadow: 0 8px 24px rgba(33, 59, 50, 0.08);
}

.destHeroSwiper {
    width: 100%;
    height: 300px;
    /* min-height: 320px; */
}

.dest-hero-slide-inner {
    position: relative;
    width: 100%;
    height: 100%;
}

.dest-hero-slide-inner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dest-hero-swiper-prev,
.dest-hero-swiper-next {
    width: 20px;
    height: 35px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(6px);
    color: #213b32;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: all 0.2s ease;
}

.dest-hero-swiper-prev:after,
.dest-hero-swiper-next:after {
    font-size: 13px;
    font-weight: bold;
}

.dest-hero-swiper-prev:hover,
.dest-hero-swiper-next:hover {
    background: #213b32;
    color: #ffffff;
}

/* .dest-hero-swiper-pagination .swiper-pagination-bullet {
    background: #ffffff;
    opacity: 0.6;
    width: 8px;
    height: 8px;
    transition: all 0.25s ease;
}

.dest-hero-swiper-pagination .swiper-pagination-bullet-active {
    opacity: 1;
    background: #c59a45;
    width: 20px;
    border-radius: 6px;
} */

/* 2. Stats Grid */
/* .dest-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
} */

.dest-stat-card-v2 {
    background: #ffffff;
    border: 1px solid #ede7dc;
    border-radius: 16px;
    padding: 1.25rem 1.1rem;
    box-shadow: 0 4px 16px rgba(33, 59, 50, 0.04);
    transition: all 0.22s ease;
    height: 100%;
}

.dest-stat-card-v2:hover {
    background: #faf8f4;
    border-color: #ded3bf;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(33, 59, 50, 0.08);
}

.dest-stat-icon-v2 {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #eef4f1;
    color: #213b32;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    margin-bottom: 0.75rem;
}

.dest-stat-num-v2 {
    font-family: var(--font-serif, "Fraunces", serif);
    font-size: 1.6rem;
    font-weight: 700;
    color: #213b32;
    line-height: 1.1;
    margin-bottom: 0.25rem;
}

.dest-stat-label-v2 {
    font-size: 0.82rem;
    font-weight: 600;
    color: #213b32;
    margin-bottom: 0.2rem;
}

.dest-stat-sub-v2 {
    font-size: 0.74rem;
    color: #737c76;
    margin-bottom: 0;
    line-height: 1.35;
}

/* 3. Narrative & Sidebar Section */
/* .dest-story-card {
    background: #ffffff;
    border: 1px solid #ede7dc;
    border-radius: 20px;
    padding: clamp(1.25rem, 3vw, 2rem);
    box-shadow: 0 4px 20px rgba(33, 59, 50, 0.04);
    height: 100%;
} */

/* .dest-sidebar-card {
    background: #faf8f4;
    border: 1px solid #ede5d8;
    border-radius: 20px;
    padding: 1.5rem;
    box-shadow: 0 4px 20px rgba(33, 59, 50, 0.04);
    height: 100%;
}

.dest-info-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 0.85rem 0;
    border-bottom: 1px solid #ede2cf;
}

.dest-info-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.dest-info-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #ffffff;
    border: 1px solid #e5dcce;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #899983;
    font-size: 0.9rem;
    flex-shrink: 0;
}

.dest-info-content h4 {
    font-size: 0.84rem;
    font-weight: 700;
    color: #213b32;
    margin-bottom: 0.15rem;
}

.dest-info-content p {
    font-size: 0.78rem;
    color: #636b66;
    margin-bottom: 0;
    line-height: 1.4;
} */

/* 4. Villages Slider Section */
/* .dest-villages-slider-wrap {
    background: #ffffff;
    border: 1px solid #ede7dc;
    border-radius: 20px;
    padding: clamp(1.25rem, 3vw, 2rem);
    box-shadow: 0 4px 20px rgba(33, 59, 50, 0.04);
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.dest-villages-slider-wrap {
    position: relative;
    background: #ffffff;
    border: 1px solid #ede7dc;
    border-radius: 20px;
    padding: clamp(1.25rem, 3vw, 2rem);
    box-shadow: 0 4px 20px rgba(33, 59, 50, 0.04);
    margin-top: 2rem;
    margin-bottom: 2rem;
} */

.dest-slider-header {
    margin-bottom: 1.25rem;
}

.dest-slider-title {
    font-family: var(--font-serif, "Fraunces", serif);
    font-size: 1.35rem;
    font-weight: 700;
    color: #213b32;
    margin: 0 0 0.25rem;
}

.dest-villages-swiper {
    width: 100%;
    padding: 6px 2px 8px 2px !important;
    overflow: hidden;
}

.dest-villages-swiper .swiper-slide {
    height: auto;
}

.dest-villages-swiper .village-card-item {
    height: 100%;
}

/* Responsive adjustments */
@media (max-width: 991.98px) {
    .dest-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767.98px) {
    .dest-hero-section {
        border-radius: 16px;
        padding: 1.25rem 1rem;
    }

    .dest-hero-slider-wrap {
        min-height: 220px;
        margin-top: 1rem;
    }

    .destHeroSwiper {
        min-height: 220px;
        aspect-ratio: 16 / 10;
    }

    .dest-stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }

    .dest-stat-card-v2 {
        padding: 0.85rem 0.75rem;
        border-radius: 12px;
    }

    .dest-stat-num-v2 {
        font-size: 1.25rem;
    }

    .dest-stat-label-v2 {
        font-size: 0.76rem;
    }

    .dest-stat-sub-v2 {
        font-size: 0.68rem;
    }

    .dest-sidebar-card {
        border-radius: 16px;
        padding: 1.25rem 1rem;
    }
}

/* ==========================================================================
     VILLAGE DETAILS CUSTOM PAGE POLISH & STYLING
     Bakri Chhap Design System: Fraunces + Plus Jakarta Sans + Deep Forest (#213B32)
     ========================================================================== */

.village-details-wrapper {
    background-color: #fdfbf7;
    color: #423f3d;
    font-family:
        "Plus Jakarta Sans",
        system-ui,
        -apple-system,
        sans-serif;
}

.village-serif {
    font-family: "Fraunces", Georgia, serif;
    letter-spacing: -0.015em;
}

/* Village Hero Banner Showcase */
.village-hero-card {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    min-height: 480px;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: flex-end;
    border: 1px solid rgba(221, 208, 186, 0.4);
    box-shadow: 0 16px 40px rgba(33, 59, 50, 0.12);
}

.village-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
            rgba(33, 59, 50, 0.2) 0%,
            rgba(33, 59, 50, 0.68) 50%,
            rgba(20, 38, 31, 0.95) 100%);
    pointer-events: none;
}

.village-hero-content {
    position: relative;
    z-index: 2;
    padding: 2.5rem;
    width: 100%;
}

@media (max-width: 768px) {
    .village-hero-card {
        min-height: 390px;
    }

    .village-hero-content {
        padding: 1.5rem;
    }
}

/* Telemetry Glass Badges */
.village-telemetry-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.28);
    color: #ffffff;
    padding: 6px 14px;
    border-radius: 30px;
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.02em;
}

/* Horizontal Village Quick Switcher Nav */
.village-pill-nav {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 4px 0;
}

.village-pill-nav::-webkit-scrollbar {
    display: none;
}

.village-pill-btn {
    white-space: nowrap;
    padding: 7px 18px;
    border-radius: 30px;
    font-size: 0.84rem;
    font-weight: 600;
    border: 1px solid #ded8cc;
    background: #ffffff;
    color: #213b32;
    transition: all 0.22s cubic-bezier(0.22, 0.61, 0.36, 1);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.village-pill-btn:hover {
    background: #f0f4ef;
    border-color: #899983;
    color: #213b32;
    transform: translateY(-1px);
}

.village-pill-btn.active {
    background: #213b32;
    color: #ffffff;
    border-color: #213b32;
    box-shadow: 0 4px 12px rgba(33, 59, 50, 0.18);
}

/* Editorial & Highlight Cards */
.village-feature-box {
    background: #ffffff;
    border: 1px solid #e7e2d7;
    border-radius: 14px;
    padding: 1.25rem;
    height: 100%;
    transition: all 0.2s ease;
}

.village-feature-box:hover {
    border-color: #bcc8b7;
    box-shadow: 0 8px 20px rgba(33, 59, 50, 0.06);
    transform: translateY(-2px);
}

.village-feature-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #f0f4ef;
    color: #213b32;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.85rem;
}

/* Homestay & Room Showcase Cards */
.stay-card {
    border: 1px solid #e7e2d7;
    border-radius: 16px;
    overflow: hidden;
    background: #ffffff;
    transition: all 0.25s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.stay-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(33, 59, 50, 0.08);
    border-color: #bcc8b7;
}

.stay-card-img-wrap {
    position: relative;
    height: 200px;
    overflow: hidden;
}

.stay-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.stay-card:hover .stay-card-img {
    transform: scale(1.05);
}

/* Sibling / Other Villages Cards */
.sibling-village-card {
    border: 1px solid #ded8cc;
    border-radius: 16px;
    overflow: hidden;
    background: #ffffff;
    transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
    height: 100%;
    display: flex;
    flex-direction: column;
}

.sibling-village-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 14px 30px rgba(33, 59, 50, 0.12);
    border-color: #899983;
}

.sibling-village-img-wrap {
    position: relative;
    height: 190px;
    overflow: hidden;
}

.sibling-village-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.45s ease;
}

.sibling-village-card:hover .sibling-village-img {
    transform: scale(1.06);
}

.sibling-village-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: rgba(33, 59, 50, 0.88);
    backdrop-filter: blur(6px);
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 20px;
    letter-spacing: 0.04em;
}

/* Experience Box */
.experience-card {
    border: 1px solid #e7e2d7;
    border-radius: 14px;
    background: #ffffff;
    padding: 1.25rem;
    transition: all 0.2s;
    height: 100%;
}

.experience-card:hover {
    border-color: #899983;
    box-shadow: 0 6px 18px rgba(33, 59, 50, 0.06);
    transform: translateY(-2px);
}

/* Sticky Sidebar Box */
.sticky-booking-card {
    position: sticky;
    top: 90px;
    background: #ffffff;
    border: 1px solid #ded8cc;
    border-radius: 18px;
    padding: 1.75rem;
    box-shadow: 0 12px 32px rgba(33, 59, 50, 0.07);
}

/* Telemetry Rows */
.telemetry-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.65rem 0;
    border-bottom: 1px dashed #e7e2d7;
    font-size: 0.86rem;
}

.telemetry-row:last-child {
    border-bottom: none;
}

.telemetry-label {
    color: #64755e;
    font-weight: 500;
}

.telemetry-value {
    font-weight: 600;
    color: #213b32;
}

/* Accordion Custom */
.accordion-custom .accordion-item {
    border: 1px solid #e7e2d7;
    border-radius: 12px !important;
    margin-bottom: 0.75rem;
    overflow: hidden;
    background: #ffffff;
}

.accordion-custom .accordion-button {
    background: #fdfbf7;
    color: #213b32;
    font-weight: 600;
    font-size: 0.95rem;
    padding: 1rem 1.25rem;
}

.accordion-custom .accordion-button:not(.collapsed) {
    background: #f0f4ef;
    color: #213b32;
    box-shadow: none;
}

.accordion-custom .accordion-body {
    font-size: 0.9rem;
    line-height: 1.6;
    color: #423f3d;
    background: #ffffff;
}

.badge-soft-sage {
    background: #f0f4ef;
    color: #213b32;
    border: 1px solid #bcc8b7;
}

/* Village Details Dedicated Semantic Classes */
.village-hero-title {
    font-family: "Fraunces", Georgia, serif;
    letter-spacing: -0.02em;
}

.village-hero-desc {
    font-size: 1.05rem;
    max-width: 780px;
    line-height: 1.6;
}

.village-btn-primary {
    background-color: #899983;
    font-size: 0.92rem;
    color: #ffffff;
}

.village-btn-outline {
    font-size: 0.92rem;
    border-color: rgba(255, 255, 255, 0.45);
}

.village-card-box {
    background: #ffffff;
    border: 1px solid #e7e2d7 !important;
}

.village-card-box-alt {
    background: #ffffff;
    border: 1px solid #ded8cc !important;
}

.village-eyebrow {
    color: #64755e;
    letter-spacing: 0.08em;
    font-size: 0.75rem;
}

.village-intro-lead {
    font-size: 0.96rem;
    line-height: 1.75;
    color: #423f3d;
}

.village-stay-badge {
    background: #213b32;
    color: #ffffff;
    font-size: 0.74rem;
}

.breadcrumb-link-muted {
    color: #64755e;
}

.breadcrumb-link-forest {
    color: #213b32;
}

.breadcrumb-active-sage {
    color: #899983;
    max-width: 280px;
}

.live-dot-white {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #ffffff;
    display: inline-block;
}

.bg-cream-card {
    background: #fdfbf7;
}

.btn-dark-forest {
    background-color: #213b32;
    font-size: 0.92rem;
    color: #ffffff;
}

.btn-dark-forest:hover {
    background-color: #172b24;
    color: #ffffff;
}

.btn-whatsapp-liaison {
    font-size: 0.86rem;
    border-color: #25d366;
    color: #128c7e;
}

.btn-whatsapp-liaison:hover {
    background-color: #25d366;
    color: #ffffff;
    border-color: #25d366;
}

.text-sage {
    color: #899983;
}

.text-forest {
    color: #213b32 !important;
}

/* --------------------------------------------------------------------------
   2.6 ABOUT US, LEGACY, IMPACT & WORK WITH US MODULES (.about-page, .legacy-page, .impact-page, .work-page)
   -------------------------------------------------------------------------- */
/* ============ SECTION 5: THE LEGACY ARCHIVE GRID ============ */

.legacy-archive {
    background: var(--sand-soft);
    position: relative;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.legacy-archive .section-head {
    margin-bottom: clamp(2rem, 4vw, 3rem);
}

.legacy-archive .section-head-aside {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.legacy-global-stamp {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--sand);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 8px 14px;
    box-shadow: var(--shadow-sm);
}

.legacy-global-stamp .stamp-icon {
    font-size: 1.3rem;
}

.legacy-global-stamp .stamp-text-wrap {
    display: flex;
    flex-direction: column;
}

.legacy-global-stamp .stamp-title {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--plum);
}

.legacy-global-stamp .stamp-sub {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 0.74rem;
    color: var(--taupe);
}

/* Editorial Grid */
.legacy-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.8rem;
    margin-bottom: 2rem;
}

@media (max-width: 920px) {
    .legacy-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

/* Legacy Card */
.legacy-card {
    background: var(--sand);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition:
        transform 0.28s var(--ease),
        box-shadow 0.28s var(--ease),
        border-color 0.28s var(--ease);
    box-shadow: var(--shadow-sm);
    position: relative;
}

.legacy-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
    border-color: var(--amber);
}

/* Card Media & Badges */
.legacy-card-media {
    position: relative;
    width: 100%;
    height: 240px;
    overflow: hidden;
    background: var(--sand-deep);
}

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

.legacy-card:hover .legacy-card-img {
    transform: scale(1.05);
}

.legacy-card-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
            rgba(42, 36, 32, 0.45) 0%,
            rgba(42, 36, 32, 0.05) 45%,
            rgba(42, 36, 32, 0.65) 100%);
}

/* Strict UX Guardrail Badge (Required exact text) */
.legacy-lock-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    right: 14px;
    background: rgba(51, 35, 47, 0.94);
    /* template plum/aubergine */
    color: var(--cream);
    border: 1px solid rgba(246, 239, 227, 0.28);
    border-radius: var(--radius);
    padding: 6px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    backdrop-filter: blur(4px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    z-index: 2;
}

.legacy-lock-badge svg {
    color: var(--amber-soft);
    flex-shrink: 0;
}

/* Accolade Tag Ribbon */
.legacy-accolade-tag {
    position: absolute;
    bottom: 12px;
    left: 14px;
    right: 14px;
    background: rgba(246, 239, 227, 0.95);
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 5px 11px;
    display: flex;
    align-items: center;
    gap: 7px;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 0.76rem;
    font-weight: 500;
    backdrop-filter: blur(4px);
    box-shadow: 0 2px 8px rgba(42, 36, 32, 0.15);
    z-index: 2;
}

.legacy-accolade-tag .trophy {
    font-size: 0.88rem;
}

.legacy-accolade-tag span.accolade-text {
    color: var(--amber-dark);
    font-weight: 600;
}

/* Card Body */
.legacy-card-body {
    padding: 1.5rem 1.6rem 1.8rem;
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 0.85rem;
}

.legacy-meta-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid var(--line);
    padding-bottom: 0.65rem;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 0.72rem;
    color: var(--taupe);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.legacy-ref-id {
    color: var(--amber-dark);
    font-weight: 600;
}

.legacy-status-tag {
    background: #eef7ef;
    border: 1px solid #c9e8ca;
    color: #2e6930;
    padding: 2px 8px;
    border-radius: var(--radius);
    font-weight: 600;
    font-size: 0.68rem;
    letter-spacing: 0.02em;
}

/* Titles & Narrative */
.legacy-card-title-wrap {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.legacy-card-title {
    font-family: "Lora", Georgia, "Times New Roman", serif;
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--ink);
    margin: 0;
    line-height: 1.2;
}

.legacy-card-role {
    font-size: 0.85rem;
    color: var(--amber-dark);
    font-weight: 500;
    margin: 0;
}

.legacy-card-narrative {
    font-size: 0.94rem;
    line-height: 1.62;
    color: var(--taupe);
    margin: 0;
}

/* Proof Metrics Chips */
.legacy-metrics-row {
    display: flex;
    gap: 0.55rem;
    flex-wrap: wrap;
    margin-top: auto;
    padding-top: 0.4rem;
}

.legacy-metric-chip {
    background: var(--sand-soft);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 4px 10px;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 0.8rem;
    color: var(--ink);
}

.legacy-metric-chip strong {
    color: var(--plum);
    font-weight: 600;
}

/* Strategic Redirect Anchor (Template .btn Pattern) */
.legacy-redirect-btn {
    width: 100%;
    background: var(--plum);
    color: var(--cream);
    border: 1px solid var(--plum);
    border-radius: var(--radius);
    padding: 0.85rem 1.25rem;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 0.86rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;
    text-decoration: none;
    transition:
        transform 0.2s var(--ease),
        background 0.2s var(--ease),
        color 0.2s var(--ease),
        border-color 0.2s var(--ease);
    margin-top: 0.4rem;
}

.legacy-redirect-btn:hover {
    background: var(--amber-dark);
    border-color: var(--amber-dark);
    color: #fff;
    transform: translateY(-2px);
}

.legacy-redirect-btn span.btn-text {
    text-align: left;
    flex: 1;
}

.legacy-redirect-btn span.btn-arrow {
    font-size: 1.1rem;
    transition: transform 0.25s var(--ease);
}

.legacy-redirect-btn:hover span.btn-arrow {
    transform: translateX(4px);
}

/* Philosophy Banner */
.legacy-footer-banner {
    background: var(--sand-deep);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: clamp(1.4rem, 2.5vw, 2rem);
    margin-top: 2.2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.legacy-footer-quote {
    max-width: 820px;
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--ink);
    margin: 0;
}

.legacy-footer-quote strong {
    color: var(--plum);
    font-weight: 600;
}

.legacy-footer-action {
    white-space: nowrap;
}

/* ============================================================
   MEET THE PEOPLE / COMMUNITY SLIDER (REUSED NAVIGATION & SYSTEM)
   ============================================================ */
.people-swiper {
    width: 100%;
    padding: 8px 4px 4px 4px;
}

.people-card {
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.people-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(35, 30, 25, 0.09) !important;
}

.people-card-img {
    transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.people-card:hover .people-card-img {
    transform: scale(1.04);
}

/* Reusable Read More Button for People Cards */
.btn-people-read-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 6px 12px;
    font-family: var(--font-sans, "Plus Jakarta Sans", sans-serif);
    font-size: 0.78rem;
    font-weight: 600;
    color: #213b32;
    background-color: #f4f7f3;
    border: 1px solid #d5dfd3;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.22s ease;
    cursor: pointer;
}

.btn-people-read-more:hover {
    background-color: #899983;
    border-color: #899983;
    color: #ffffff;
    box-shadow: 0 4px 10px rgba(137, 153, 131, 0.25);
}

.btn-people-read-more svg {
    transition: transform 0.2s ease;
}

.btn-people-read-more:hover svg {
    transform: translateX(2px);
}

/* --------------------------------------------------------------------------
   SECTION 7: OUR PIONEERING LEGACY
   -------------------------------------------------------------------------- */
.legacy-archive-section {
    background: #ffffff;
    border-bottom: 1px solid #ede7dc;
}

/* .legacy-philosophy-lead {
  font-size: 1.05rem;
  color: #554d43;
  line-height: 1.65;
  max-width: 820px;
  margin: 0 0 2.5rem 0;
} */

.legacy-museum-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .legacy-museum-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1200px) {
    .legacy-museum-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* State Group Header in About */
/* .about-state-header {
    margin-bottom: 1.25rem;
    padding-bottom: 0.5rem;
    border-bottom: 1.5px solid #e7e1d4;
    display: flex;
    align-items: center;
    justify-content: space-between;
} */

/* .about-state-title {
    font-family: "Fraunces", serif;
    font-size: 1.35rem;
    font-weight: 600;
    color: #213b32;
    margin: 0;
    display: flex;
    align-items: center;
}

.about-state-title i {
    color: #5c755e;
    font-size: 1.15rem;
} */

/* Legacy & Village Project Cards */
.legacy-project-card {
    background: #ffffff;
    border: 1px solid #e7e1d4;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: box-shadow 0.25s ease;
    box-shadow: 0 4px 16px rgba(33, 59, 50, 0.03);
}

.legacy-project-card:hover {
    /* transform: translateY(-4px); */
    /* border-color: #c5ba9e; */
    box-shadow: 0 12px 28px rgba(33, 59, 50, 0.09);
}

.legacy-card-media-wrap {
    position: relative;
    aspect-ratio: 16 / 10;
    background: #e8e2d5;
    overflow: hidden;
    display: block;
}

.legacy-card-media-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
    display: block;
}

.legacy-project-card:hover .legacy-card-media-wrap img {
    transform: scale(1.05);
}

.legacy-status-stamp {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    background: rgba(33, 59, 50, 0.88);
    backdrop-filter: blur(4px);
    color: #f7eedb;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 4px 8px;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    white-space: nowrap;
}

.legacy-status-stamp.legacy-status-active {
    background: rgba(42, 82, 53, 0.92);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.25);
}

.legacy-card-content {
    padding: 1.15rem 1rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.legacy-card-geo {
    font-size: 0.72rem;
    font-weight: 600;
    color: #7e8f78;
    margin-bottom: 0.35rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.legacy-card-heading {
    font-family: "Fraunces", serif;
    font-size: 1.15rem;
    font-weight: 600;
    color: #213b32;
    margin: 0 0 0.5rem 0;
    line-height: 1.25;
}

.legacy-card-text {
    font-size: 0.82rem;
    line-height: 1.55;
    color: #574e44;
    margin-bottom: 1rem;
    flex-grow: 1;
}

.legacy-card-content .btn {
    margin-top: auto;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.82rem;
    letter-spacing: 0.02em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

@media (max-width: 767.98px) {
    /* .about-state-header {
        margin-bottom: 0.9rem;
        padding-bottom: 0.4rem;
    } */

    /* .about-state-title {
        font-size: 1.15rem;
    } */

    .legacy-project-card {
        border-radius: 10px;
    }

    .legacy-card-content {
        padding: 0.75rem 0.65rem;
    }

    .legacy-card-heading {
        font-size: 0.92rem;
        margin-bottom: 0.3rem;
        line-height: 1.25;
    }

    .legacy-card-geo {
        font-size: 0.62rem;
        margin-bottom: 0.2rem;
    }

    .legacy-card-text {
        font-size: 0.72rem;
        line-height: 1.4;
        margin-bottom: 0.6rem;
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .legacy-status-stamp {
        font-size: 0.52rem;
        padding: 2px 6px;
        top: 6px;
        left: 6px;
        border-radius: 3px;
    }

    .legacy-card-content .btn {
        font-size: 0.72rem;
        padding: 0.35rem 0.5rem;
    }
}

@media (max-width: 575.98px) {
    /* .about-state-header {
        margin-bottom: 0.75rem;
    } */

    /* .about-state-title {
        font-size: 1.05rem;
    } */

    .legacy-card-content {
        padding: 0.65rem 0.5rem;
    }

    .legacy-card-heading {
        font-size: 0.84rem;
        line-height: 1.22;
        margin-bottom: 0.25rem;
    }

    .legacy-card-geo {
        font-size: 0.56rem;
        margin-bottom: 0.15rem;
    }

    .legacy-card-text {
        font-size: 0.68rem;
        line-height: 1.35;
        margin-bottom: 0.5rem;
        -webkit-line-clamp: 3;
    }

    .legacy-status-stamp {
        font-size: 0.48rem;
        padding: 2px 4px;
        top: 4px;
        left: 4px;
    }

    .legacy-card-content .btn {
        font-size: 0.68rem;
        padding: 0.3rem 0.4rem;
    }
}

.legacy-banner-thesis {
    margin-top: 1.5rem;
    padding: 1rem 1.25rem;
    background: #edf3ec;
    border: 1px solid #d7e4d5;
    border-radius: 8px;
    font-size: 0.84rem;
    color: #2a4727;
    line-height: 1.5;
}

/* ============================================================
   OUR LEGACY — DETAILED ARCHIVAL CASE STUDY PAGE (.legacy-detail-page)
   ============================================================ */
/* Hero Title Section */
.legacy-detail-header {
    padding: 2.2rem 0 1.2rem;
}

/* .legacy-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-bottom: 0.75rem;
} */
.badge-archival {
    background: #fdf2ec;
    color: var(--terracotta, #a85f42);
    border: 1px solid #f6d8c8;
}

.badge-active-model {
    background: #eaf5eb;
    color: #276932;
    border: 1px solid #cce8ce;
}

.legacy-detail-heading {
    font-family: var(--font-serif, "Fraunces", Georgia, serif);
    font-size: 2.4rem;
    font-weight: 700;
    color: var(--forest, #213b32);
    line-height: 1.2;
    margin-bottom: 0.5rem;
}

/* .legacy-detail-subtitle {
    font-size: 1.05rem;
    color: var(--charcoal-muted, #6b756a);
    line-height: 1.6;
    max-width: 820px;
} */

/* Media Gallery Showcase */
.legacy-media-stage {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    background: #111;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
    height: 440px;
}

.legacy-media-stage img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition:
        opacity 0.35s ease,
        transform 0.4s ease;
}

/* .legacy-stage-caption-badge {
    position: absolute;
    bottom: 16px;
    left: 16px;
    right: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 16px;
    background: rgba(22, 41, 34, 0.85);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    color: #fff;
    font-size: 0.85rem;
} */
/* .legacy-thumbs-strip {
    display: flex;
    gap: 12px;
    margin-top: 14px;
    overflow-x: auto;
    padding-bottom: 6px;
    scrollbar-width: thin;
}
.legacy-thumb-item {
    width: 96px;
    height: 68px;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    flex-shrink: 0;
    opacity: 0.65;
    transition: all 0.2s ease;
}
.legacy-thumb-item:hover,
.legacy-thumb-item.active {
    opacity: 1;
    border-color: var(--forest, #213b32);
    box-shadow: 0 4px 12px rgba(33, 59, 50, 0.2);
    transform: translateY(-2px);
}
.legacy-thumb-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
} */

/* Key Stats Metric Grid */
/* .legacy-stats-card {
    background: #ffffff;
    border: 1px solid var(--stone-light, #ede7dc);
    border-radius: 16px;
    padding: 1.4rem;
    margin-bottom: 1.75rem;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.03);
}
.legacy-stat-box {
    padding: 0.75rem 1rem;
    border-radius: 12px;
    background: var(--sage-light, #f0f4ef);
    height: 100%;
}
.legacy-stat-val {
    font-family: var(--font-serif, "Fraunces", Georgia, serif);
    font-size: 1.45rem;
    font-weight: 800;
    color: var(--forest, #213b32);
    line-height: 1.1;
    margin-bottom: 2px;
}
.legacy-stat-label {
    font-size: 0.76rem;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--charcoal-muted, #6b756a);
    letter-spacing: 0.4px;
} */

/* Content Blocks */
.legacy-content-card {
    background: #ffffff;
    border: 1px solid var(--stone-light, #ede7dc);
    border-radius: 16px;
    padding: 2rem;
    margin-bottom: 1.75rem;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.03);
}

.legacy-card-title {
    font-family: var(--font-serif, "Fraunces", Georgia, serif);
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--forest, #213b32);
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #f2ece1;
}

/* .legacy-icon-round {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--sage-light, #f0f4ef);
    color: var(--forest, #213b32);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
} */

/* 
.legacy-timeline {
    position: relative;
    padding-left: 28px;
}
.legacy-timeline::before {
    content: '';
    position: absolute;
    left: 10px;
    top: 8px;
    bottom: 8px;
    width: 2px;
    background: #ded7c9;
}
.timeline-step {
    position: relative;
    margin-bottom: 1.5rem;
}
.timeline-step:last-child {
    margin-bottom: 0;
}
.timeline-dot {
    position: absolute;
    left: -28px;
    top: 4px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #ffffff;
    border: 3px solid var(--forest, #213b32);
    box-shadow: 0 0 0 3px rgba(33, 59, 50, 0.12);
}
.timeline-step.completed .timeline-dot {
    background: var(--terracotta, #a85f42);
    border-color: #fff;
    box-shadow: 0 0 0 3px rgba(168, 95, 66, 0.25);
}
.timeline-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--forest, #213b32);
    margin-bottom: 4px;
}
.timeline-badge {
    font-size: 0.72rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 6px;
    background: #f4eee3;
    color: #655442;
    display: inline-block;
    margin-bottom: 6px;
}
.timeline-desc {
    font-size: 0.9rem;
    color: #4a544b;
    line-height: 1.6;
    margin: 0;
} */

/* Pillars Grid */
/* .pillar-box {
    background: #faf8f4;
    border: 1px solid #ece4d6;
    border-radius: 12px;
    padding: 1.15rem;
    height: 100%;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.pillar-box:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.05);
}
.pillar-heading {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--forest, #213b32);
    margin-bottom: 0.4rem;
    display: flex;
    align-items: center;
    gap: 8px;
}
.pillar-text {
    font-size: 0.84rem;
    color: var(--charcoal-muted, #6b756a);
    line-height: 1.5;
    margin: 0;
} */

/* Sidebar & Action Desk */
.legacy-sidebar-sticky {
    position: sticky;
    top: 90px;
}

.sidebar-action-card {
    background: #ffffff;
    border: 1px solid var(--stone-light, #ede7dc);
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.04);
    margin-bottom: 1.5rem;
}

.action-card-header {
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid #f2eee6;
}

.action-tag {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--terracotta, #a85f42);
    background: #fdf2ec;
    padding: 4px 10px;
    border-radius: 20px;
    display: inline-block;
    margin-bottom: 8px;
}

/* Switcher List / Horizontal Legacy Cards */
.other-legacy-hcard {
    background: #ffffff;
    border: 1px solid #e7e1d4;
    border-radius: 14px;
    padding: 12px;
    display: flex;
    align-items: center;
    gap: 14px;
    transition: all 0.25s ease;
    box-shadow: 0 4px 14px rgba(33, 59, 50, 0.04);
    text-decoration: none;
}

.other-legacy-hcard:hover {
    transform: translateY(-2px);
    border-color: #c5ba9e;
    box-shadow: 0 8px 22px rgba(33, 59, 50, 0.09);
}

.other-legacy-hcard-thumb {
    width: 110px;
    height: 90px;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
    background: #e8e2d5;
}

.other-legacy-hcard-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.35s ease;
    display: block;
}

.other-legacy-hcard:hover .other-legacy-hcard-thumb img {
    transform: scale(1.06);
}

.other-legacy-hcard-content {
    flex-grow: 1;
    min-width: 0;
}

/* .other-legacy-hcard-geo {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--terracotta, #a85f42);
    margin-bottom: 2px;
    display: block;
} */
.other-legacy-hcard-title {
    font-family: var(--font-serif, "Fraunces", Georgia, serif);
    font-size: 0.96rem;
    font-weight: 700;
    color: var(--forest, #213b32);
    margin: 0 0 4px 0;
    line-height: 1.25;
}

.other-legacy-hcard-desc {
    font-size: 0.78rem;
    line-height: 1.4;
    color: #6b756a;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.model-switcher-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border-radius: 10px;
    cursor: pointer;
    border: 1.5px solid transparent;
    transition: all 0.2s ease;
    margin-bottom: 8px;
    background: #faf8f5;
    text-decoration: none;
}

.model-switcher-item:hover {
    background: #f2eee6;
    border-color: #dfd8cc;
}

.model-switcher-item.active {
    background: #f0f6ef;
    border-color: var(--sage-dark, #64755e);
}

.model-switcher-thumb {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
}

.model-switcher-title {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--forest, #213b32);
    margin-bottom: 2px;
    line-height: 1.25;
}

.model-switcher-loc {
    font-size: 0.74rem;
    color: var(--charcoal-muted, #6b756a);
}

/* Handover Quote Box */
.thesis-quote-box {
    background: linear-gradient(135deg,
            rgba(33, 59, 50, 0.06) 0%,
            rgba(137, 153, 131, 0.09) 100%);
    border-left: 4px solid var(--forest, #213b32);
    border-radius: 0 14px 14px 0;
    padding: 1.2rem 1.4rem;
    margin-top: 1.25rem;
}

.thesis-quote-text {
    font-family: var(--font-serif, "Fraunces", Georgia, serif);
    font-size: 1.02rem;
    font-style: italic;
    color: var(--forest-dark, #162922);
    line-height: 1.55;
    margin: 0;
}

@media (max-width: 991.98px) {
    .legacy-media-stage {
        height: 320px;
    }

    .legacy-detail-heading {
        font-size: 1.85rem;
    }

    .legacy-sidebar-sticky {
        position: static;
        margin-top: 2rem;
    }
}

@media (max-width: 575.98px) {
    .legacy-media-stage {
        height: 250px;
    }

    .legacy-detail-heading {
        font-size: 1.5rem;
    }

    .legacy-content-card {
        padding: 1.25rem;
    }
}

/* --------------------------------------------------------------------------
   SECTION 9: WORK WITH US (CONSULTING & B2B)
   -------------------------------------------------------------------------- */
.work-with-us-section {
    background: #fcfaf6;
    border-bottom: 1px solid #ede7dc;
    color: #213b32;
    position: relative;
}

.work-section-head .section-eyebrow {
    color: #a85f42;
}

/* .work-section-head .section-title {
    color: #213b32;
} */

.work-section-head .section-lead {
    color: #5d5347;
}

.consulting-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}

@media (min-width: 768px) {
    .consulting-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1200px) {
    .consulting-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.consulting-card {
    background: #ffffff;
    border: 1px solid #e7e0d3;
    border-radius: 12px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 8px rgba(33, 59, 50, 0.03);
    transition: all 0.25s ease;
}

.consulting-card:hover {
    background: #ffffff;
    border-color: #c7beaf;
    box-shadow: 0 8px 22px rgba(33, 59, 50, 0.07);
    transform: translateY(-2px);
}

.consulting-num {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #a85f42;
    margin-bottom: 0.5rem;
}

.consulting-name {
    font-family: "Fraunces", serif;
    font-size: 1.15rem;
    font-weight: 600;
    color: #213b32;
    margin: 0 0 0.5rem 0;
}

.consulting-desc {
    font-size: 0.84rem;
    line-height: 1.55;
    color: #5c5348;
    margin: 0;
}

/* Institutional Inquiry Form Panel */
.work-inquiry-panel {
    background: #ffffff;
    border: 1px solid #e5dfd2;
    border-radius: 16px;
    padding: 2.25rem;
    margin-top: 2rem;
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    box-shadow: 0 4px 20px rgba(33, 59, 50, 0.04);
}

@media (min-width: 992px) {
    .work-inquiry-panel {
        grid-template-columns: 1fr 1.2fr;
    }
}

.inquiry-info-col h3 {
    font-family: "Fraunces", serif;
    font-size: 1.6rem;
    color: #213b32;
    margin: 0 0 0.75rem 0;
}

.inquiry-info-col p {
    font-size: 0.88rem;
    line-height: 1.6;
    color: #574e44;
    margin-bottom: 1.25rem;
}

.inquiry-form-col form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.inquiry-input-group {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 576px) {
    .inquiry-input-group {
        grid-template-columns: 1fr 1fr;
    }
}

.inquiry-field {
    background: #fdfbf7;
    border: 1px solid #dcd4c3;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    color: #213b32;
    font-size: 0.88rem;
    outline: none;
    width: 100%;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.inquiry-field:focus {
    border-color: #899983;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(137, 153, 131, 0.2);
}

.inquiry-field::placeholder {
    color: #8f8577;
}

.inquiry-field option {
    background: #ffffff;
    color: #213b32;
}

.btn-work-submit {
    background: #213b32;
    color: #ffffff;
    font-weight: 600;
    border: none;
    border-radius: 8px;
    padding: 0.85rem 1.5rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s ease;
    font-size: 0.9rem;
}

.btn-work-submit:hover {
    background: #2d4f43;
    color: #ffffff;
    transform: translateY(-1px);
}

/* ==========================================================================
   ABOUT PAGE EDITORIAL DESIGN SYSTEM & STYLES (about.html)
   Clean, Editorial, Foreign-Minimalist Aesthetics
   ========================================================================== */

.about-page-hero {
    background: #fbf8f2;
    border-bottom: 1px solid #ede7dc;
    position: relative;
}

/* Page Hero & Editorial Semantic Classes */
.about-page-hero {
    border-bottom: 1px solid #ede7dc;
}

.about-hero-lead {
    font-size: 0.96rem;
    line-height: 1.7;
}

.about-hero-subtext {
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.about-quote-label {
    color: #a85f42;
    letter-spacing: 0.08em;
}

.licensing-box {
    background: #fbf8f2;
    border: 1px solid #e7e0d3;
}

/* .licensing-desc {
    font-size: 0.92rem;
    line-height: 1.6;
} */

.legacy-project-card.card-active {
    background: #f4f8f3;
    border-color: #d1e2cf;
}

.legacy-status-stamp.stamp-active {
    background: #2a5235;
}

.legacy-card-geo.geo-active {
    color: #48724d;
}

/* .manifesto-section {
    background: #fbf9f5;
    border-bottom: 1px solid #ede7dc;
} */

.manifesto-card {
    background: #ffffff;
    border: 1px solid #e7e0d3;
}

.btn-text-sm {
    font-size: 0.9rem;
}

.btn-outline-forest {
    font-size: 0.9rem;
    border: 1px solid #213b32;
    color: #213b32;
}

.btn-outline-forest:hover {
    background: #213b32;
    color: #ffffff;
}

.metric-box {
    background: #fcfaf6;
    border: 1px solid #eee7dc;
}

.metric-number {
    font-family: "Fraunces", Georgia, serif;
    font-size: 2.2rem;
    color: #213b32;
    line-height: 1;
}

.metric-number.highlight {
    color: #a85f42;
}

.metric-unit {
    font-size: 1.2rem;
}

.metric-label {
    font-size: 0.75rem;
    letter-spacing: 0.05em;
}

.impact-context-callout {
    background: #f4f8f3;
    border-left: 4px solid #497047;
}

.quote-box-white {
    background: #ffffff;
    border: 1px solid #e2dac9;
}

.quote-text-forest {
    color: #213b32;
    font-size: 0.88rem;
    font-style: italic;
}

.callout-sage-border {
    background: #ffffff;
    border-left: 4px solid #899983;
    box-shadow: 0 2px 10px rgba(33, 59, 50, 0.03);
}

.tribute-card {
    background: #ffffff;
    border: 1px solid #e7dfce;
    box-shadow: 0 4px 20px rgba(33, 59, 50, 0.04);
}

.tribute-quote-box {
    background: #fbf8f2;
    border: 1px solid #e5dfd2;
}

.manifesto-card-shadow {
    background: #ffffff;
    border: 1px solid #e7e0d3;
    box-shadow: 0 4px 20px rgba(33, 59, 50, 0.03);
}

.max-w-680 {
    max-width: 680px;
}

.btn-outline-muted {
    font-size: 0.9rem;
    border: 1px solid #c8beac;
    color: #5a5246;
}

.btn-outline-muted:hover {
    background: #5a5246;
    color: #ffffff;
}

/* .contact-helpdesk-card {
    background: #fbf8f2;
    border: 1px solid #e7dfce;
}

.contact-icon-dark {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: #213b32;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fbf7f0;
    font-size: 1.25rem;
}

.contact-hours-pill {
    background: #213b32;
    color: #fbf7f0;
    font-size: 0.88rem;
    line-height: 1.5;
} */

.contact-channels-section {
    background: #fcfbf9;
    border-bottom: 1px solid #ede7dc;
}

.contact-icon-voice {
    background: #eef5ee;
    color: #213b32;
}

.contact-phone-primary {
    color: #213b32;
    font-size: 1.02rem;
}

.contact-phone-secondary {
    color: #55514c;
    font-size: 0.9rem;
}

.contact-icon-mail {
    background: #fdf2ec;
    color: #a85f42;
}

.contact-email-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    font-weight: 600;
}

.contact-icon-building {
    background: #f3f1eb;
    color: #49453f;
}

.contact-address {
    font-style: normal;
    font-size: 0.85rem;
    line-height: 1.5;
}

.contact-icon-mountain {
    background: #eaf1ec;
    color: #3b6348;
}

.contact-base-text {
    font-size: 0.83rem;
    line-height: 1.45;
    color: #55514c;
}

.contact-appt-badge {
    background: #f4f8f3;
    border: 1px solid #d0e2ce;
    color: #213b32;
    font-size: 0.78rem;
}

.social-showcase-section {
    background: #f8f6f0;
    border-bottom: 1px solid #ede7dc;
}

/* .contact-faq-helpbox {
    background: #fbf9f5;
    border: 1px solid #ede7dc;
} */

.contact-faq-body {
    font-size: 0.94rem;
    line-height: 1.65;
}

.about-compact-badge {
    background: #f4f8f3;
    border: 1px solid #d0e2ce;
    color: #213b32;
    font-size: 0.9rem;
}

.badge-forest-pill {
    background: #213b32;
    color: #fbf7f0;
    font-size: 0.78rem;
    padding: 6px 12px;
    border-radius: 999px;
}

.callout-green-card {
    background: #f1f7f0;
    border: 1px solid #cde0cc;
}

.callout-green-label {
    color: #436d41;
    letter-spacing: 0.08em;
}

.ip-card-box {
    background: #fbf8f2;
    border: 1px solid #e7e0d3;
}

.pywl-card {
    background: #fcfbf9;
    border: 1px solid #e7e0d1;
}

.model-dashed-box {
    background: #fcfbf9;
    border: 1px dashed #d8cfbf;
}

.text-terracotta {
    color: #a85f42;
}

.text-forest-muted {
    color: #497047;
}

.about-hero-quote-box {
    background: #ffffff;
    border: 1px solid #e7e0d3;
    border-left: 4px solid #a85f42;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 4px 18px rgba(33, 59, 50, 0.04);
}

.about-hero-quote-box p {
    font-family: "Fraunces", serif;
    font-size: 1.25rem;
    line-height: 1.4;
    color: #213b32;
    margin: 0;
    font-style: italic;
}

.about-belief-card {
    background: #ffffff;
    border: 1px solid #e7e1d5;
    border-radius: 14px;
    padding: 1.75rem;
    box-shadow: 0 2px 10px rgba(33, 59, 50, 0.03);
    display: flex;
    flex-direction: column;
    height: 100%;
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.about-belief-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(33, 59, 50, 0.06);
}

.about-belief-num {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #a85f42;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
}

.about-belief-title {
    font-family: "Fraunces", serif;
    font-size: 1.35rem;
    color: #213b32;
    margin: 0 0 0.5rem 0;
}

.about-belief-desc {
    font-size: 0.9rem;
    line-height: 1.6;
    color: #554d43;
    margin: 0;
}

.about-vertical-card {
    background: #ffffff;
    border: 1px solid #e7e1d4;
    border-radius: 14px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 10px rgba(33, 59, 50, 0.03);
    transition: all 0.2s ease;
    height: 100%;
}

.about-vertical-card:hover {
    border-color: #c7beab;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(33, 59, 50, 0.06);
}

.about-vertical-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 0.85rem;
}

.about-vertical-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: #f1f7f0;
    color: #213b32;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

.about-vertical-title {
    font-family: "Fraunces", serif;
    font-size: 1.25rem;
    color: #213b32;
    margin: 0;
}

.about-vertical-text {
    font-size: 0.88rem;
    line-height: 1.6;
    color: #524a40;
    margin-bottom: 1rem;
}

.about-flow-strip {
    background: #fbf8f2;
    border: 1px solid #e5dfd0;
    border-radius: 10px;
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    flex-wrap: wrap;
    font-size: 0.76rem;
    font-weight: 600;
    color: #213b32;
    margin-top: auto;
}

.about-flow-step {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.about-flow-arrow {
    color: #a85f42;
    font-size: 0.75rem;
}

/* .about-state-header {
    border-bottom: 1px solid #e7e0d1;
    padding-bottom: 0.5rem;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
} */

/* .about-state-title {
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #7e8f78;
    margin: 0;
} */

.about-equation-card {
    background: #f4f8f3;
    border: 1px solid #d0e2ce;
    border-radius: 16px;
    padding: 2.25rem;
    text-align: center;
    box-shadow: 0 4px 20px rgba(33, 59, 50, 0.04);
}

.about-equation-formula {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
    justify-content: center;
    margin: 1.5rem 0;
}

@media (min-width: 768px) {
    .about-equation-formula {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.75rem;
    }
}

.about-formula-block {
    background: #ffffff;
    border: 1px solid #c9dec6;
    border-radius: 10px;
    padding: 0.75rem 1.25rem;
    font-size: 0.88rem;
    font-weight: 600;
    color: #213b32;
    line-height: 1.4;
}

.about-formula-op {
    font-family: "Fraunces", serif;
    font-size: 1.3rem;
    font-weight: 700;
    color: #a85f42;
}

.about-formula-block.formula-result {
    background: #213b32;
    color: #ffffff;
    border-color: #213b32;
}

.founder-img {
    aspect-ratio: 4 / 3.6;
}

.callout-forest-border {
    background: #fbf8f2;
    border-left: 4px solid #213b32;
}

.asset-summary-badge {
    background: #fbf8f2;
    font-size: 0.82rem;
    font-weight: 600;
    color: #213b32;
}

.max-w-720 {
    max-width: 720px;
}

.about-founder-card {
    background: #ffffff;
    border: 1px solid #e7e0d3;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(33, 59, 50, 0.05);
}

.about-founder-body {
    padding: 2.25rem;
}

.about-tribute-card {
    background: #fdfbf7;
    border: 1px solid #e7dfce;
    border-left: 4px solid #c59a45;
    border-radius: 12px;
    padding: 1.75rem;
    box-shadow: 0 2px 12px rgba(33, 59, 50, 0.03);
}

.about-manifesto-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}

@media (min-width: 768px) {
    .about-manifesto-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1200px) {
    .about-manifesto-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.about-manifesto-item {
    background: #ffffff;
    border: 1px solid #e8e2d4;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(33, 59, 50, 0.03);
}

.about-manifesto-item h4 {
    font-family: "Fraunces", serif;
    font-size: 1.15rem;
    color: #213b32;
    margin: 0 0 0.5rem 0;
}

.about-manifesto-item p {
    font-size: 0.86rem;
    line-height: 1.55;
    color: #554d43;
    margin: 0;
}

/* ============================================================
   HORIZONTAL JOURNEY TIMELINE (UNBROKEN CONTINUOUS AXIS & YEAR NODES)
   Year-wise Timeline with Single Unbroken Rail & Smooth Flow
   ============================================================ */
.horizontal-timeline-section {
    position: relative;
    overflow: hidden;
}

/* .horizontal-timeline-intro {
    max-width: 720px;
    margin: 0 auto 1rem auto;
    text-align: center;
} */

/* Outer Viewport with Soft Fade Gradient Edges */
.horizontal-timeline-viewport {
    position: relative;
    width: 100%;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right,
            transparent 0%,
            black 4%,
            black 96%,
            transparent 100%);
    mask-image: linear-gradient(to right,
            transparent 0%,
            black 4%,
            black 96%,
            transparent 100%);
}

/* Continuous Infinite Motion Track */
.horizontal-timeline-track {
    display: flex;
    width: max-content;
    position: relative;
    will-change: transform;
    animation: hTimelineScroll 55s linear infinite;
}

/* 100% UNBROKEN CONTINUOUS TIMELINE LINE ACROSS THE WHOLE TRACK */
.horizontal-timeline-track::before {
    content: "";
    position: absolute;
    top: 17px;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, #a85f42 0%, #213b32 50%, #a85f42 100%);
    z-index: 1;
}

.horizontal-timeline-track:hover {
    animation-play-state: paused;
}

@keyframes hTimelineScroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

/* Container containing 1 set of 8 milestones */
.h-timeline-set {
    display: flex;
    align-items: flex-start;
    gap: 2rem;
    padding: 0 1rem;
    position: relative;
}

/* Individual Milestone Item */
.h-timeline-item {
    width: 320px;
    min-width: 320px;
    max-width: 320px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

/* Top Spine & Year Node Area */
.h-timeline-top {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 0.5rem;
}

/* Year Badge sitting directly ON the line */
.h-timeline-year-node {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: #213b32;
    color: #ffffff;
    font-family: var(--font-serif, "Fraunces", Georgia, serif);
    font-size: 0.92rem;
    font-weight: 700;
    padding: 5px 18px;
    border-radius: 30px;
    border: 3px solid #fbf9f5;
    box-shadow: 0 4px 14px rgba(33, 59, 50, 0.14);
    letter-spacing: 0.02em;
    transition: all 0.25s ease;
    white-space: nowrap;
}

.h-timeline-item.featured-item .h-timeline-year-node {
    background: #a85f42;
    box-shadow: 0 4px 16px rgba(168, 95, 66, 0.25);
}

.h-timeline-item:hover .h-timeline-year-node {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 6px 18px rgba(33, 59, 50, 0.22);
}

.h-timeline-item.featured-item:hover .h-timeline-year-node {
    box-shadow: 0 6px 20px rgba(168, 95, 66, 0.35);
}

/* Vertical Connector Stem from Year Node to Card */
.h-timeline-stem {
    width: 2px;
    height: 18px;
    background: #213b32;
    opacity: 0.25;
    margin-top: 1px;
}

/* Milestone Card */
.h-timeline-card {
    background: #ffffff;
    border: 1px solid #e7dfce;
    border-radius: 16px;
    padding: 1.45rem 1.4rem;
    box-shadow: 0 4px 16px rgba(33, 59, 50, 0.04);
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
    width: 100%;
    display: flex;
    flex-direction: column;
    text-align: left;
    min-height: 275px;
}

.h-timeline-item:hover .h-timeline-card {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(33, 59, 50, 0.08);
    border-color: #bcc8b7;
}

.h-timeline-item.featured-item .h-timeline-card {
    border-top: 3px solid #a85f42;
    background: linear-gradient(180deg, #fffdfa 0%, #ffffff 100%);
}

/* Card Header with Category Tag */
.h-timeline-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.65rem;
    border-bottom: 1px dashed #ece4d8;
    flex-wrap: wrap;
}

.h-timeline-tag {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #637562;
    background: #f2f6f1;
    padding: 3px 9px;
    border-radius: 6px;
}

.h-timeline-item.featured-item .h-timeline-tag {
    color: #a85f42;
    background: #fdf2ec;
}

.h-timeline-milestone-indicator {
    font-size: 0.72rem;
    font-weight: 700;
    color: #899983;
}

.h-timeline-title {
    font-family: var(--font-serif, "Fraunces", Georgia, serif);
    font-size: 1.12rem;
    font-weight: 700;
    color: #213b32;
    line-height: 1.32;
    margin-bottom: 0.55rem;
}

.h-timeline-desc {
    font-size: 0.84rem;
    line-height: 1.58;
    color: #55514c;
    margin-bottom: 0.85rem;
    flex-grow: 1;
}

/* Chips / Tags */
.h-timeline-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: auto;
    padding-top: 0.4rem;
}

.h-timeline-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.7rem;
    font-weight: 500;
    color: #3b4c44;
    background: #f7f4ed;
    border: 1px solid #e5dcce;
    padding: 2px 7px;
    border-radius: 8px;
}

.h-timeline-chip i {
    font-size: 0.62rem;
    color: #899983;
}

/* Responsive adjustments */
@media (max-width: 767.98px) {
    .horizontal-timeline-section {
        padding: 2.75rem 0 3.25rem 0;
    }

    /* .horizontal-timeline-intro {
        margin-bottom: 1.85rem;
    } */

    .h-timeline-set {
        gap: 1.25rem;
    }

    .h-timeline-item {
        width: 275px;
        min-width: 275px;
        max-width: 275px;
    }

    .h-timeline-year-node {
        font-size: 0.84rem;
        padding: 4px 14px;
    }

    .h-timeline-card {
        padding: 1.2rem 1.1rem;
        min-height: 260px;
    }

    .h-timeline-title {
        font-size: 1.02rem;
    }

    .h-timeline-desc {
        font-size: 0.8rem;
    }
}

/* --------------------------------------------------------------------------
   2.7 CONTACT US & FAQS MODULE (.contact-page)
   -------------------------------------------------------------------------- */
/* ==========================================================================
   CONTACT US PAGE & SOCIAL MEDIA SCREENSHOT SHOWCASE STYLES
   ========================================================================== */

.btn-whatsapp-direct {
    background: #25d366;
    color: #ffffff !important;
    font-weight: 600;
    font-size: 0.88rem;
    padding: 8px 16px;
    border-radius: 8px;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
    box-shadow: 0 4px 12px rgba(37, 211, 102, 0.22);
    text-decoration: none;
}

.btn-whatsapp-direct:hover {
    background: #1ebc59;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(37, 211, 102, 0.35);
}

.btn-outline-forest {
    background: transparent;
    color: #213b32;
    border: 1.5px solid #213b32;
    font-weight: 600;
    font-size: 0.88rem;
    padding: 8px 16px;
    border-radius: 8px;
    transition: all 0.25s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-outline-forest:hover {
    background: #213b32;
    color: #ffffff;
}

.btn-outline-amber {
    background: transparent;
    color: #a85f42;
    border: 1.5px solid #a85f42;
    font-weight: 600;
    font-size: 0.88rem;
    padding: 8px 16px;
    border-radius: 8px;
    transition: all 0.25s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-outline-amber:hover {
    background: #a85f42;
    color: #ffffff;
}

/* ==========================================================================
   SOCIAL MEDIA SCREENSHOT CARDS & FRAMES
   ========================================================================== */
.social-ss-card {
    background: #ffffff;
    border: 1px solid #e7dfce;
    border-radius: 20px;
    padding: 0.8rem;
    box-shadow: 0 6px 24px rgba(33, 59, 50, 0.05);
    display: flex;
    flex-direction: column;
    transition:
        transform 0.28s ease,
        box-shadow 0.28s ease,
        border-color 0.28s ease;
}

.social-ss-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 34px rgba(33, 59, 50, 0.09);
    border-color: #bcc8b7;
}

/* Header bar */
.social-ss-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}

.social-ss-icon {
    width: 27px;
    height: 27px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 1rem;
    flex-shrink: 0;
}

.insta-bg {
    background: linear-gradient(45deg,
            #f09433 0%,
            #e6683c 25%,
            #dc2743 50%,
            #cc2366 75%,
            #bc1888 100%);
}

.yt-bg {
    background: #ff0000;
}

.fb-bg {
    background: #1877f2;
}

.social-ss-title {
    font-family: var(--font-serif, "Fraunces", serif);
    font-size: 1.12rem;
    font-weight: 700;
    color: #213b32;
    line-height: 1.2;
}

/* .social-ss-handle {
  font-size: 0.8rem;
  color: #899983;
  font-weight: 500;
} */

/* Action pill buttons */
.btn-insta-pill {
    background: #fdf2ec;
    color: #a85f42 !important;
    font-weight: 600;
    font-size: 0.82rem;
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid #f2dfd5;
    transition: all 0.2s ease;
    text-decoration: none;
}

.btn-insta-pill:hover {
    background: #a85f42;
    color: #ffffff !important;
}

.btn-yt-pill {
    background: #fdeeee;
    color: #cc0000 !important;
    font-weight: 600;
    font-size: 0.82rem;
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid #f7d5d5;
    transition: all 0.2s ease;
    text-decoration: none;
}

.btn-yt-pill:hover {
    background: #cc0000;
    color: #ffffff !important;
}

.btn-fb-pill {
    background: #eef5ff;
    color: #1877f2 !important;
    font-weight: 600;
    font-size: 0.82rem;
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid #d4e4fc;
    transition: all 0.2s ease;
    text-decoration: none;
}

.btn-fb-pill:hover {
    background: #1877f2;
    color: #ffffff !important;
}

@media (max-width: 500px) {
    .social-ss-icon {
        width: 18px;
        height: 18px;
        border-radius: 5px;
        font-size: 0.5rem;
    }

    .social-ss-title {
        font-size: 1rem;
    }

    .btn-insta-pill,
    .btn-fb-pill,
    .btn-yt-pill {
        font-size: 0.6rem;
        padding: 5px 8px;
    }
}

/* ==================== SCREENSHOT DISPLAY FRAMES ==================== */
.social-ss-frame {
    background: #ffffff;
    border: 1px solid #ded6c8;
    box-shadow: 0 8px 24px rgba(33, 59, 50, 0.06);
    overflow: hidden;
    position: relative;
}

/* Mobile Phone Frame */
.phone-frame {
    border-radius: 15px;
    border: 3px solid #2b2b2b;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.12);
    background: #000000;
    width: 55%;
}

.phone-camera-notch {
    width: 90px;
    height: 14px;
    background: #2b2b2b;
    border-radius: 0 0 10px 10px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

/* Desktop Browser Frame */
/* .browser-frame {
  border-radius: 14px;
  border: 1px solid #d6cebf;
}

.browser-top-bar {
  background: #f4f0e8;
  border-bottom: 1px solid #e2dbce;
  padding: 8px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.browser-dots {
  display: flex;
  align-items: center;
  gap: 6px;
}

.dot-red, .dot-yellow, .dot-green {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}

.dot-red { background: #ff5f56; }
.dot-yellow { background: #ffbd2e; }
.dot-green { background: #27c93f; }

.browser-url-pill {
  background: #ffffff;
  border: 1px solid #ded7ca;
  border-radius: 6px;
  padding: 2px 14px;
  font-size: 0.72rem;
  color: #7a756d;
  font-family: monospace;
  letter-spacing: 0.02em;
} */

/* Image inside frames */
.social-ss-img-wrap {
    position: relative;
    overflow: hidden;
    background: #fbf9f5;
}

.social-screenshot-img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    transition: transform 0.35s ease;
}

.social-ss-card:hover .social-screenshot-img {
    transform: scale(1.02);
}

@media(max-width:450px) {
    .phone-frame {
        width: 100%;
    }
}

/* ==================== FAQ ACCORDION & CTA BANNER ==================== */
.contact-accordion .accordion-item {
    border-color: #e5decf !important;
    background: #ffffff;
}

.contact-accordion .accordion-button {
    background: #ffffff;
    color: #213b32;
    font-size: 0.98rem;
    padding: 1.1rem 1.25rem;
    box-shadow: none !important;
}

.contact-accordion .accordion-button:not(.collapsed) {
    background: #fbf9f5;
    color: #a85f42;
    border-bottom: 1px solid #ede7dc;
}

.contact-cta-banner {
    background: linear-gradient(135deg, #213b32 0%, #152620 100%);
    color: #ffffff;
    padding: 4.5rem 0;
    position: relative;
    overflow: hidden;
}

.contact-cta-eyebrow {
    display: inline-block;
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #e2a87a;
    margin-bottom: 0.75rem;
}

.contact-cta-title {
    font-family: var(--font-serif, "Fraunces", serif);
    font-size: clamp(1.8rem, 3.5vw, 2.75rem);
    font-weight: 700;
    margin-bottom: 1rem;
}

.contact-cta-text {
    font-size: 1rem;
    line-height: 1.65;
    color: #cfdcd0;
    max-width: 620px;
    margin-bottom: 2rem;
}

@media (max-width: 767.98px) {
    .social-ss-card {
        padding: 0.8rem;
    }
}

/* --------------------------------------------------------------------------
   2.8 LEGAL & POLICIES MODULE (.policy-page / Privacy, Terms, Return & Refund)
   -------------------------------------------------------------------------- */
/* ============================================================
   LEGAL & POLICY PAGES (Privacy, Terms, Return & Refund)
   ============================================================ */
/* .policy-page-hero {
    background: #fbf8f2;
    border-bottom: 1px solid #ede5d8;
}

.policy-meta-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #ffffff;
    border: 1px solid #ded8cc;
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 0.78rem;
    font-weight: 600;
    color: #485643;
    letter-spacing: 0.02em;
}

.policy-meta-badge i {
    color: #899983;
} */

.policy-sidebar {
    position: sticky;
    top: 90px;
    background: #ffffff;
    border: 1px solid #ebe5d8;
    border-radius: 14px;
    padding: 20px;
    box-shadow: 0 4px 16px rgba(33, 59, 50, 0.04);
}

.policy-sidebar-title {
    font-family: var(--font-serif, "Fraunces", serif);
    font-size: 1.05rem;
    color: #213b32;
    font-weight: 700;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid #ede5d8;
    display: flex;
    align-items: center;
    gap: 8px;
}

.policy-sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.policy-sidebar-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 500;
    color: #423f3d;
    text-decoration: none;
    transition: all 0.2s ease;
}

.policy-sidebar-link:hover,
.policy-sidebar-link.active {
    background: #f0f4ef;
    color: #213b32;
    font-weight: 600;
}

.policy-sidebar-link span.num {
    font-size: 0.72rem;
    font-weight: 700;
    color: #899983;
    background: rgba(137, 153, 131, 0.15);
    padding: 2px 6px;
    border-radius: 4px;
    min-width: 22px;
    text-align: center;
}

.policy-content-card {
    background: #ffffff;
    border: 1px solid #ebe5d8;
    border-radius: 16px;
    padding: clamp(24px, 4vw, 40px);
    box-shadow: 0 4px 20px rgba(33, 59, 50, 0.04);
}

.policy-section {
    scroll-margin-top: 100px;
    padding-bottom: 28px;
    margin-bottom: 28px;
    border-bottom: 1px solid #f0ece3;
}

.policy-section:last-child {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
}

.policy-heading {
    font-family: var(--font-serif, "Fraunces", serif);
    font-size: clamp(1.2rem, 2vw, 1.45rem);
    color: #213b32;
    font-weight: 700;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.policy-heading-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #213b32;
    color: #ffffff;
    font-family: var(--font-sans, "Plus Jakarta Sans", sans-serif);
    font-size: 0.78rem;
    font-weight: 700;
    flex-shrink: 0;
}

.policy-subheading {
    font-family: var(--font-sans, "Plus Jakarta Sans", sans-serif);
    font-size: 1rem;
    font-weight: 700;
    color: #213b32;
    margin: 18px 0 8px;
}

.policy-text {
    font-size: 0.94rem;
    line-height: 1.75;
    color: #423f3d;
    margin-bottom: 14px;
}

.policy-list {
    list-style: none;
    padding: 0;
    margin: 0 0 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.policy-list li {
    position: relative;
    padding-left: 24px;
    font-size: 0.93rem;
    line-height: 1.65;
    color: #423f3d;
}

.policy-list li::before {
    content: "✦";
    position: absolute;
    left: 0;
    top: 0;
    color: #899983;
    font-size: 0.85rem;
}

.policy-notice-box {
    background: #f7f9f6;
    border: 1px solid #d4dfd2;
    border-left: 4px solid #213b32;
    border-radius: 10px;
    padding: 16px 20px;
    margin: 18px 0;
}

.policy-notice-box--warning {
    background: #fdfaf4;
    border-color: #ede2cf;
    border-left-color: #c59a45;
}

.policy-notice-box-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: #213b32;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.policy-table-wrap {
    overflow-x: auto;
    border: 1px solid #ebe5d8;
    border-radius: 12px;
    margin: 16px 0 20px;
}

.policy-table {
    width: 100%;
    margin-bottom: 0;
    font-size: 0.88rem;
    border-collapse: collapse;
}

.policy-table th {
    background: #f6f3eb;
    color: #213b32;
    font-weight: 700;
    padding: 12px 16px;
    border-bottom: 1px solid #ded8cc;
    white-space: nowrap;
}

.policy-table td {
    padding: 12px 16px;
    color: #423f3d;
    border-bottom: 1px solid #ede8df;
    vertical-align: middle;
}

.policy-table tr:last-child td {
    border-bottom: none;
}

.policy-contact-card {
    background: linear-gradient(135deg, #213b32 0%, #162922 100%);
    border-radius: 14px;
    padding: 24px;
    color: #ffffff;
    margin-top: 30px;
}

.policy-contact-card h4 {
    font-family: var(--font-serif, "Fraunces", serif);
    color: #ffffff;
    font-size: 1.25rem;
    margin-bottom: 8px;
}

.policy-contact-card p {
    font-size: 0.88rem;
    color: #d1ded0;
    margin-bottom: 16px;
}

.policy-contact-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.policy-contact-badge-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ffffff;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 0.84rem;
    text-decoration: none;
    transition: background 0.2s ease;
}

.policy-contact-badge-item:hover {
    background: rgba(255, 255, 255, 0.22);
    color: #ffffff;
}

@media (max-width: 991.98px) {
    .policy-sidebar {
        position: static;
        margin-bottom: 24px;
    }
}

/* ==========================================================================
   PART 3: ARCHIVED / UNUSED LEGACY STYLES (PRESERVED IN COMMENTS — DO NOT DELETE)
   ========================================================================== */
/*
// [archived-comment] ============================================================
   HEADER
   ============================================================ 
.site-header {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 900;
    transition:
        background 0.3s var(--ease),
        box-shadow 0.3s var(--ease),
        border-color 0.3s var(--ease);
    border-bottom: 1px solid transparent;
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    height: 78px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    color: var(--cream);
    font-family: var(--font-serif);
    font-weight: 600;
    font-size: 1.5rem;
    letter-spacing: 0.02em;
}

.brand:hover {
    color: #fff;
}

.brand-mark {
    flex: none;
}

.brand-word {
    line-height: 1;
}

// [archived-comment] header scrolled state 
.site-header.scrolled {
    background: var(--sand);
    border-bottom-color: var(--line);
    box-shadow: 0 6px 24px rgba(42, 36, 32, 0.07);
}

.site-header.scrolled .brand,
.site-header.scrolled .header-phone,
.site-header.scrolled .nav-toggle {
    color: var(--ink);
}

.site-header.scrolled .nav-list a {
    color: var(--ink);
}

.nav-toggle,
.nav-close {
    display: none;
    background: none;
    border: 0;
    padding: 4px;
    cursor: pointer;
    color: var(--cream);
}

// [archived-comment] ============================================================
   HERO
   ============================================================ 
.hero {
    position: relative;
    min-height: 96vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 78px;
}

.hero-media {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--plum-deep);
}

.hero-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-scrim {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg,
            rgba(51, 35, 47, 0.55) 0%,
            rgba(51, 35, 47, 0.15) 32%,
            rgba(42, 36, 32, 0.35) 68%,
            rgba(42, 36, 32, 0.72) 100%),
        linear-gradient(90deg,
            rgba(51, 35, 47, 0.5) 0%,
            rgba(51, 35, 47, 0) 60%);
}

.hero-content {
    position: relative;
    padding-block: clamp(3rem, 8vw, 6rem) clamp(7rem, 12vw, 10rem);
    max-width: 760px;
}

.hero-title {
    color: var(--cream);
    font-size: clamp(2.7rem, 7vw, 5rem);
    font-weight: 500;
    line-height: 1.02;
    letter-spacing: -0.02em;
    margin-bottom: 1.4rem;
    text-shadow: 0 2px 30px rgba(0, 0, 0, 0.25);
}

.hero-lead {
    color: rgba(246, 239, 227, 0.92);
    font-size: clamp(1.05rem, 2vw, 1.25rem);
    max-width: 46ch;
    margin-bottom: 2rem;
}

.hero-cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

// [archived-comment] booking widget 
.booking-anchor {
    position: relative;
    margin-top: auto;
    padding-bottom: clamp(1.5rem, 4vw, 2.5rem);
    scroll-margin-top: 100px;
}

.booking-widget {
    background: var(--sand-soft);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: 1.15rem 1.15rem;
    display: grid;
    grid-template-columns: repeat(3, 1fr) auto;
    gap: 0.9rem;
    align-items: end;
    position: relative;
}

.bw-field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
}

.bw-field label {
    font-size: 0.74rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--taupe);
    padding-left: 0.2rem;
}

.bw-input {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 0.1rem 0.8rem;
    color: var(--amber-dark);
    transition: border-color 0.2s var(--ease);
}

.bw-input:focus-within {
    border-color: var(--amber);
}

.bw-input svg {
    flex: none;
}

.bw-input input,
.bw-input select {
    border: 0;
    background: none;
    outline: none;
    width: 100%;
    font-family: var(--font-sans);
    font-size: 0.96rem;
    color: var(--ink);
    padding: 0.68rem 0;
    cursor: pointer;
}

.bw-input select {
    appearance: none;
    -webkit-appearance: none;
}

.bw-submit {
    height: 48px;
    align-self: end;
    white-space: nowrap;
}

.bw-note {
    grid-column: 1 / -1;
    margin: 0;
    font-size: 0.88rem;
    color: var(--amber-dark);
    min-height: 0;
    padding-left: 0.2rem;
}

.bw-note:not(:empty) {
    padding-top: 0.2rem;
}


// [archived-comment] ============================================================
   ABOUT / PHILOSOPHY SECTION (BOOTSTRAP INTEGRATED)
   ============================================================ 
.about-section {
    position: relative;
    background-color: #fbf9f5;
}

.about-section .card {
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.about-section .card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(33, 59, 50, 0.08) !important;
}

// [archived-comment] image frames (aspect-ratio safe) 
.frame {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background: var(--sand-deep);
}

.frame img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.frame-tall {
    aspect-ratio: 4/5;
}

// [archived-comment] ============================================================
   ROOMS
   ============================================================ 
.rooms {
    background: var(--sand-soft);
}

.room-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.room-card {
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition:
        transform 0.28s var(--ease),
        box-shadow 0.28s var(--ease);
}

.room-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
}

.room-media {
    aspect-ratio: 5/4;
}

.room-media img {
    transition: transform 0.6s var(--ease);
}

.room-card:hover .room-media img {
    transform: scale(1.05);
}

.room-tag {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    background: rgba(246, 239, 227, 0.92);
    color: var(--ink);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.35rem 0.7rem;
    border-radius: var(--radius);
    backdrop-filter: blur(2px);
}

.room-tag--gold {
    background: var(--amber);
    color: #fff;
}

.room-body {
    padding: 1.5rem 1.5rem 1.6rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.room-titleline {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.6rem;
}

.room-name {
    font-size: 1rem;
    position: relative;
}

.room-price {
    margin: 0;
    font-family: var(--font-serif);
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--amber-dark);
    white-space: nowrap;
}

.room-price span {
    font-family: var(--font-sans);
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--taupe);
    font-weight: 500;
    display: block;
    margin-bottom: -0.15rem;
}

.room-price small {
    font-size: 0.72rem;
    font-weight: 400;
    color: var(--taupe);
}

.room-desc {
    color: var(--taupe);
    font-size: 0.95rem;
    margin-bottom: 1.1rem;
}

.room-specs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.1rem;
    margin-bottom: 1.3rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--line);
}

.room-specs li {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.84rem;
    color: var(--ink);
}

.room-specs svg {
    color: var(--amber-dark);
    flex: none;
}

.room-link {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-family: var(--font-sans);
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: 0.8rem;
    color: var(--ink);
    align-self: flex-start;
}

.room-link svg {
    transition: transform 0.25s var(--ease);
}

.room-link:hover {
    color: var(--amber-dark);
}

.room-link:hover svg {
    transform: translateX(4px);
}

.room-card--feature {
    border-color: var(--amber);
    box-shadow: 0 0 0 1px var(--amber);
}

// [archived-comment] ============================================================
   AMENITIES
   ============================================================ 
.amenities {
    background: var(--sand-deep);
}

.amenity-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.amenity {
    background: var(--sand);
    padding: clamp(1.6rem, 3vw, 2.4rem);
    transition: background 0.25s var(--ease);
}

.amenity:hover {
    background: var(--sand-soft);
}

.amenity-ic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: var(--cream);
    color: var(--amber-dark);
    margin-bottom: 1.1rem;
    border: 1px solid var(--line);
}

.amenity h3 {
    font-size: 1.3rem;
    margin-bottom: 0.5rem;
}

.amenity p {
    color: var(--taupe);
    font-size: 0.92rem;
    margin: 0;
}

// [archived-comment] ============================================================
   GALLERY
   ============================================================ 
// [archived-comment] .gallery {
    background: var(--sand);
}

.gallery-grid {
    columns: 3;
    column-gap: 1.1rem;
}

.gallery-item {
    display: block;
    width: 100%;
    margin: 0 0 1.1rem;
    padding: 0;
    border: 0;
    cursor: pointer;
    break-inside: avoid;
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--sand-deep);
    line-height: 0;
}

.gallery-item img {
    width: 100%;
    height: auto;
    transition: transform 0.5s var(--ease);
}

.gallery-item:hover img {
    transform: scale(1.06);
}

.gallery-item::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(51, 35, 47, 0);
    transition: background 0.3s var(--ease);
}

.gallery-item:hover::after {
    background: rgba(51, 35, 47, 0.28);
}

.gallery-plus {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 46px;
    height: 46px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--cream);
    color: var(--plum);
    border-radius: 50%;
    opacity: 0;
    transform: scale(0.8);
    transition:
        opacity 0.3s var(--ease),
        transform 0.3s var(--ease);
}

.gallery-item:hover .gallery-plus {
    opacity: 1;
    transform: scale(1);
} 

// [archived-comment] ============================================================
   DINING
   ============================================================ 
.dining {
    background: var(--plum);
}

.dining-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2.5rem, 5vw, 5rem);
    align-items: center;
}

.dining-media {
    position: relative;
    padding-bottom: 3rem;
    padding-right: 3rem;
}

.frame-dining {
    aspect-ratio: 4/5;
    box-shadow: var(--shadow-md);
}

.frame-dining-inset {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 52%;
    aspect-ratio: 1/1;
    border: 5px solid var(--plum);
    box-shadow: var(--shadow-md);
}

.dining-copy .section-title {
    margin-bottom: 1.3rem;
}

.dining-copy>p {
    color: rgba(246, 239, 227, 0.82);
}

.dining-menu {
    margin: 1.8rem 0;
    border-top: 1px solid rgba(246, 239, 227, 0.15);
}

.dining-menu li {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    padding: 0.85rem 0;
    border-bottom: 1px solid rgba(246, 239, 227, 0.15);
}

.dm-name {
    color: var(--cream);
    font-size: 1rem;
}

.dm-dots {
    flex: 1;
    border-bottom: 1px dotted rgba(246, 239, 227, 0.35);
    transform: translateY(-3px);
}

.dm-price {
    font-family: var(--font-serif);
    font-weight: 600;
    color: var(--amber-soft);
    font-size: 1.05rem;
}

.dining-hours {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: rgba(246, 239, 227, 0.75);
    font-size: 0.88rem;
    margin-bottom: 1.7rem;
}

.dining-hours svg {
    color: var(--amber-soft);
    flex: none;
}

// [archived-comment] ============================================================
   REVIEWS
   ============================================================ 
.reviews {
    background: var(--sand-soft);
}

.review-carousel {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.rc-viewport {
    overflow: hidden;
    flex: 1;
}

.rc-track {
    display: flex;
    transition: transform 0.5s var(--ease);
    will-change: transform;
}

.review-card {
    flex: 0 0 calc((100% - 2.4rem) / 3);
    margin: 0 1.2rem 0 0;
    background: var(--sand);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
}

.review-card:last-child {
    margin-right: 0;
}

.stars {
    display: flex;
    gap: 0.2rem;
    color: var(--amber);
    margin-bottom: 1rem;
}

.review-card blockquote {
    margin: 0 0 1.4rem;
    font-family: var(--font-serif);
    font-size: 1.12rem;
    line-height: 1.5;
    color: var(--ink);
    font-weight: 400;
    flex: 1;
}

.reviewer {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.reviewer img {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
    flex: none;
    background: var(--sand-deep);
}

.reviewer span {
    display: flex;
    flex-direction: column;
}

.reviewer strong {
    font-weight: 500;
    font-size: 0.98rem;
}

.reviewer small {
    color: var(--taupe);
    font-size: 0.82rem;
}

.rc-arrow {
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: var(--sand);
    color: var(--ink);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition:
        background 0.2s var(--ease),
        color 0.2s var(--ease),
        border-color 0.2s var(--ease);
}

.rc-arrow:hover {
    background: var(--amber);
    color: #fff;
    border-color: var(--amber);
}

.rc-dots {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 2rem;
}

.rc-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: 0;
    background: var(--line);
    cursor: pointer;
    padding: 0;
    transition:
        background 0.2s var(--ease),
        width 0.2s var(--ease);
}

.rc-dot.active {
    background: var(--amber);
    width: 26px;
    border-radius: 5px;
}

// [archived-comment] ============================================================
   CTA BAND
   ============================================================ 
.cta-band {
    background: var(--plum-deep);
    color: var(--cream);
    padding: clamp(3rem, 6vw, 5rem) 0;
}

.cta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2.5rem;
    flex-wrap: wrap;
}

.cta-title {
    color: var(--cream);
    font-size: clamp(1.8rem, 3.6vw, 2.7rem);
    margin-bottom: 0.8rem;
    max-width: 20ch;
}

.cta-sub {
    color: rgba(246, 239, 227, 0.78);
    margin: 0;
    max-width: 46ch;
}

.cta-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
}

.cta-call {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    color: var(--amber-soft);
    font-size: 1.05rem;
    font-family: var(--font-serif);
}

.cta-call:hover {
    color: #fff;
}

// [archived-comment] ============================================================
   CONTACT
   ============================================================ 
.contact {
    background: var(--sand);
}

.contact-grid {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: clamp(2.5rem, 5vw, 4.5rem);
    align-items: start;
}

.contact-intro {
    color: var(--taupe);
    margin-bottom: 1.8rem;
    max-width: 46ch;
}

.contact-list {
    display: grid;
    gap: 1.1rem;
    margin-bottom: 2.2rem;
}

.contact-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
}

.ci {
    flex: none;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--sand-soft);
    border: 1px solid var(--line);
    color: var(--amber-dark);
    display: flex;
    align-items: center;
    justify-content: center;
}

.contact-list span:not(.ci) {
    display: flex;
    flex-direction: column;
    font-size: 0.96rem;
    line-height: 1.4;
    padding-top: 0.15rem;
}

.contact-list strong {
    font-weight: 500;
    font-family: var(--font-sans);
    font-size: 0.74rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--taupe);
    margin-bottom: 0.1rem;
}

.enquiry-form {
    background: var(--sand-soft);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 1.6rem;
}

.ef-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.ef-field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-bottom: 1rem;
}

.ef-field label {
    font-size: 0.74rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--taupe);
}

.enquiry-form input,
.enquiry-form textarea {
    font-family: var(--font-sans);
    font-size: 0.96rem;
    color: var(--ink);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 0.7rem 0.85rem;
    width: 100%;
    transition: border-color 0.2s var(--ease);
    resize: vertical;
}

.enquiry-form input:focus,
.enquiry-form textarea:focus {
    outline: none;
    border-color: var(--amber);
}

.enquiry-form textarea {
    min-height: 96px;
}

.ef-note {
    margin: 0.8rem 0 0;
    font-size: 0.88rem;
    color: var(--amber-dark);
}

.contact-map {
    position: relative;
}

.frame-map {
    aspect-ratio: 4/5;
    box-shadow: var(--shadow-sm);
}

.map-pin {
    position: absolute;
    left: 20px;
    bottom: 20px;
    background: var(--sand-soft);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 0.7rem 0.95rem;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    box-shadow: var(--shadow-md);
}

.map-pin-ic {
    color: var(--amber-dark);
    display: flex;
}

.map-pin span:not(.map-pin-ic) {
    display: flex;
    flex-direction: column;
    font-size: 0.82rem;
    line-height: 1.3;
}

.map-pin strong {
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 0.9rem;
}

// [archived-comment] ============================================================
   FOOTER
   ============================================================ 
.site-footer {
    background: var(--plum-deep);
    color: rgba(246, 239, 227, 0.72);
    padding-top: clamp(3rem, 6vw, 4.5rem);
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1.4fr;
    gap: 2.5rem;
    padding-bottom: 3rem;
}

.brand--footer {
    color: var(--cream);
    margin-bottom: 1rem;
}

.footer-brand p {
    color: rgba(246, 239, 227, 0.6);
    font-size: 0.94rem;
    max-width: 34ch;
}

.footer-social {
    display: flex;
    gap: 0.6rem;
    margin-top: 1.2rem;
}

.footer-social a {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(246, 239, 227, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(246, 239, 227, 0.8);
    transition:
        background 0.2s var(--ease),
        color 0.2s var(--ease),
        border-color 0.2s var(--ease);
}

.footer-social a:hover {
    background: var(--amber);
    color: #fff;
    border-color: var(--amber);
}

.footer-col h3 {
    color: var(--cream);
    font-size: 1.05rem;
    font-family: var(--font-sans);
    font-weight: 600;
    letter-spacing: 0.04em;
    margin-bottom: 1.1rem;
}

.footer-col ul {
    display: grid;
    gap: 0.6rem;
}

.footer-col a,
.footer-col li {
    color: rgba(246, 239, 227, 0.62);
    font-size: 0.92rem;
}

.footer-col a:hover {
    color: var(--amber-soft);
}

.footer-news p {
    color: rgba(246, 239, 227, 0.6);
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.news-form {
    display: flex;
    gap: 0.5rem;
}

.news-form input {
    flex: 1;
    min-width: 0;
    font-family: var(--font-sans);
    font-size: 0.92rem;
    color: var(--cream);
    background: rgba(246, 239, 227, 0.06);
    border: 1px solid rgba(246, 239, 227, 0.2);
    border-radius: var(--radius);
    padding: 0.65rem 0.8rem;
}

.news-form input::placeholder {
    color: rgba(246, 239, 227, 0.4);
}

.news-form input:focus {
    outline: none;
    border-color: var(--amber);
}

.news-form .btn {
    padding: 0.65rem 0.9rem;
    flex: none;
}

.news-note {
    color: var(--amber-soft);
    font-size: 0.84rem;
    margin: 0.7rem 0 0;
}

.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 1.6rem 0;
    border-top: 1px solid rgba(246, 239, 227, 0.12);
}

.footer-bottom p {
    margin: 0;
    font-size: 0.86rem;
    color: rgba(246, 239, 227, 0.5);
}

.footer-bottom a {
    color: var(--amber-soft);
}

// [archived-comment] ============================================================
   LIGHTBOX
   ============================================================ 
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 1100;
    background: rgba(30, 20, 26, 0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4vh 6vw;
    opacity: 0;
    transition: opacity 0.3s var(--ease);
}

.lightbox.open {
    opacity: 1;
}

.lb-figure {
    margin: 0;
    max-width: 100%;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
}

.lb-figure img {
    max-width: 100%;
    max-height: 82vh;
    width: auto;
    border-radius: var(--radius-lg);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.lb-figure figcaption {
    color: rgba(246, 239, 227, 0.85);
    font-family: var(--font-serif);
    font-size: 1.05rem;
    text-align: center;
}

.lb-close {
    position: fixed;
    top: 22px;
    right: 24px;
    background: none;
    border: 0;
    color: var(--cream);
    cursor: pointer;
    padding: 6px;
}

.lb-arrow {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(246, 239, 227, 0.1);
    border: 1px solid rgba(246, 239, 227, 0.25);
    color: var(--cream);
    width: 52px;
    height: 52px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s var(--ease);
}

.lb-arrow:hover {
    background: rgba(246, 239, 227, 0.22);
}

.lb-prev {
    left: 18px;
}

.lb-next {
    right: 18px;
}

// [archived-comment] ============================================================
   RESPONSIVE
   ============================================================ 
@media (max-width: 1040px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 2rem 2.5rem;
    }

    .footer-brand {
        grid-column: 1 / -1;
    }

    .review-card {
        flex: 0 0 calc((100% - 1.2rem) / 2);
    }
}

@media (max-width: 900px) {
    .header-book {
        display: none;
    }

    .header-phone {
        display: none;
    }

    .nav-toggle {
        display: inline-flex;
    }

    .main-nav {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        width: min(84vw, 340px);
        z-index: 950;
        background: var(--plum);
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        padding: 5rem 2rem 2rem;
        gap: 0;
        transform: translateX(105%);
        transition: transform 0.35s var(--ease);
        box-shadow: -20px 0 50px rgba(0, 0, 0, 0.3);
        overflow-y: auto;
    }

    .main-nav.open {
        transform: translateX(0);
    }

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

    .nav-list li {
        border-bottom: 1px solid rgba(246, 239, 227, 0.12);
    }

    .nav-list a {
        color: var(--cream);
        display: block;
        padding: 1rem 0;
        font-size: 1.1rem;
    }

    .nav-list a::after {
        display: none;
    }

    .site-header.scrolled .nav-list a {
        color: var(--cream);
    }

    .nav-cta {
        display: inline-flex;
        margin-top: 1.6rem;
    }

    .nav-close {
        display: inline-flex;
        position: absolute;
        top: 1.4rem;
        right: 1.4rem;
    }

    .dining-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .dining-media {
        max-width: 460px;
    }

    .contact-grid {
        grid-template-columns: 1fr;
    }

    .contact-map {
        max-width: 460px;
    }
}

@media (max-width: 780px) {
    .room-grid {
        grid-template-columns: 1fr 1fr;
    }

    .amenity-grid {
        grid-template-columns: 1fr 1fr;
    }

    .gallery-grid {
        columns: 2;
    }

    .booking-widget {
        grid-template-columns: 1fr 1fr;
    }

    .bw-submit {
        grid-column: 1 / -1;
    }

    .review-card {
        flex: 0 0 100%;
        margin-right: 0;
    }

    .rc-track {
        gap: 0;
    }
}

@media (max-width: 560px) {
    .header-inner {
        height: 66px;
    }

    .hero {
        min-height: 92vh;
    }

    .room-grid {
        grid-template-columns: 1fr;
    }

    .amenity-grid {
        grid-template-columns: 1fr;
    }

    .gallery-grid {
        columns: 1;
    }

    .booking-widget {
        grid-template-columns: 1fr;
    }

    .ef-row {
        grid-template-columns: 1fr;
    }

    .cta-actions {
        width: 100%;
    }

    // [archived-comment] .section-head {
    margin-bottom: 2rem;
  } 
}
*/

/* Universal Product Card Quick Cart & Action Buttons */
.product-card-media {
    position: relative;
    overflow: hidden;
}

.btn-product-cart-top {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #213b32;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    transition: all 0.25s ease;
    z-index: 5;
    cursor: pointer;
    font-size: 0.95rem;
}

.btn-product-cart-top:hover {
    background: #df7a19;
    color: #ffffff;
    border-color: #df7a19;
    transform: scale(1.1);
    box-shadow: 0 6px 16px rgba(223, 122, 25, 0.35);
}

.btn-product-cart-top.btn-added {
    background: #2e7d32;
    color: #ffffff;
    border-color: #2e7d32;
    transform: scale(1.05);
}

.btn-product-cart-bottom {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.45rem 0.85rem;
    border-radius: 999px;
    border: 1.5px solid #213b32;
    color: #213b32;
    background: transparent;
    transition: all 0.25s ease;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
}

.btn-product-cart-bottom:hover {
    background: #213b32;
    color: #ffffff;
    border-color: #213b32;
    box-shadow: 0 4px 12px rgba(33, 59, 50, 0.2);
}

.btn-product-cart-bottom.btn-added {
    background: #2e7d32;
    color: #ffffff;
    border-color: #2e7d32;
}