/* ══ PEACE VALLEY RUMTEK — style.css ══
   #2C4A35 Green | #C9A056 Gold | #F5F0E3 Cream
═══════════════════════════════════════════ */

/* ── VARIABLES & RESPONSIVE TYPOGRAPHY ── */
:root {
    --green: #2C4A35; --gd: #1a2e22; --gm: #3d6b4f; --gl: #5a8a6a;
    --gold: #C9A056;  --go: #a87c30; --cream: #F5F0E3;
    --bg: #F5F0E3; --bg2: #fff; --bgc: #f0ebe0;
    --tx: #1e2e22; --txb: #3d4a3f; --txm: #7a8a7d;
    --card: #fff; --bdr: rgba(44,74,53,.13);
    --nav: rgba(255,255,255,.97); --sh: 0 2px 28px rgba(44,74,53,.12);
    --inbg: #fff; --fbg: #111e17; --ftx: #6b7c6e;
    --csz: 113.1; /* 2π×18 */

    /* ── Font Families ── */
    --font1: 'Jost', sans-serif;
    --font2: 'Cormorant Garamond', serif;

    /* ── Responsive Font Scale via clamp() ── */
    --fs-xs: clamp(0.55rem, 0.5rem + 0.25vw, 0.65rem);
    --fs-sm: clamp(0.68rem, 0.65rem + 0.15vw, 0.78rem);
    --fs-base: clamp(0.85rem, 0.8rem + 0.2vw, 0.95rem);
    --fs-md: clamp(1.0rem, 0.95rem + 0.25vw, 1.15rem);
    --fs-lg: clamp(1.2rem, 1.1rem + 0.4vw, 1.5rem);
    --fs-xl: clamp(1.5rem, 1.4rem + 0.6vw, 2.0rem);
    --fs-xxl: clamp(2.0rem, 1.8rem + 1.0vw, 3.2rem);
    --fs-hero: clamp(2.4rem, 2.0rem + 3.0vw, 4.8rem);

    /* Dynamic Display Targets for Logo Swap */
    --logo-light-display: block;
    --logo-dark-display: none;
}

[data-theme=dark] {
    --bg: #1a2e22; --bg2: #243B2C; --bgc: #1f3628;
    --tx: #F5F0E3; --txb: #c8d5c0; --txm: #8fa892;
    --card: #2a4233; --bdr: rgba(201,160,86,.18);
    --nav: rgba(26,46,34,.98); --sh: 0 2px 28px rgba(0,0,0,.3);
    --inbg: #2a4233; --fbg: #0c1610; --ftx: #506a58;

    --logo-light-display: none;
    --logo-dark-display: block;
}

/* ── RESET ── */
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--font1); background: var(--bg); color: var(--txb); font-size: var(--fs-base); overflow-x: hidden; transition: background .3s, color .3s; }
h1,h2,h3,h4,h5,h6 { font-family: var(--font2); color: var(--tx); transition: color .3s; }
a { text-decoration: none; color: inherit; }
img { display: block; max-width: 100%; }
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 3px; }

/* ── UTILITY & LAYOUT EXTRACTS ── */
.sec-tag { font-family: var(--font1); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 4px; text-transform: uppercase; color: var(--gold); display: block; }
.sec-title { font-size: var(--fs-xxl); font-weight: 500; line-height: 1.12; color: var(--tx); }
.divider { width: 52px; height: 2px; background: linear-gradient(90deg, var(--gold), transparent); margin: 10px 0 20px; }
.divider.cx { margin-left: auto; margin-right: auto; }
.gold { color: var(--gold)!important; }
.italic { font-style: italic; }
.body-text { font-size: var(--fs-base); line-height: 1.9; color: var(--txb); font-weight: 300; }

.btn-gold { display: inline-flex; align-items: center; gap: 6px; background: linear-gradient(135deg, var(--gold), var(--go)); color: #fff!important; border: none; font-family: var(--font1); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; padding: 13px 28px; cursor: pointer; transition: transform .3s, box-shadow .3s, filter .3s; }
.btn-gold:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(201,160,86,.38); filter: brightness(1.07); }
.btn-outline { display: inline-flex; align-items: center; gap: 6px; background: transparent; color: var(--gold)!important; border: 1.5px solid var(--gold); font-family: var(--font1); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; padding: 12px 26px; cursor: pointer; transition: background .3s, color .3s; }
.btn-outline:hover { background: var(--gold); color: #fff!important; }
.btn-ghost { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,.1); color: #fff!important; border: 1.5px solid rgba(255,255,255,.4); font-family: var(--font1); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; padding: 12px 26px; cursor: pointer; backdrop-filter: blur(4px); transition: background .3s, border-color .3s; }
.btn-ghost:hover { background: rgba(255,255,255,.2); border-color: rgba(255,255,255,.75); }

/* Extracted Layout Multipliers */
.p-about-box { padding: 0 20px 20px 0; }
.f-size-100 { font-size: 1rem !important; }
.f-size-130 { font-size: 1.3rem !important; }
.f-size-140 { font-size: 1.4rem !important; }
.f-white { color: #fff !important; }
.max-w-115 { max-width: 115px; }
.max-w-120 { max-width: 120px; }
.max-w-410 { max-width: 410px; }
.max-w-460 { max-width: 460px; }
.max-w-480 { max-width: 480px; }
.lh-1 { line-height: 1 !important; }
.nav-reserve-pad { padding: 9px 20px; }

/* ── WHATSAPP (LEFT) ── */
.wa-btn { position: fixed; bottom: 28px; left: 26px; z-index: 9999; width: 54px; height: 54px; border-radius: 50%; background: #25D366; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 22px rgba(37,211,102,.42); transition: transform .3s; }
.wa-btn:hover { transform: scale(1.1) rotate(-8deg); }
.wa-btn i { color: #fff; font-size: var(--fs-xl); }

/* ── SCROLL TO TOP + PROGRESS RING (RIGHT) ── */
.scroll-top { position: fixed; bottom: 28px; right: 26px; z-index: 9999; width: 54px; height: 54px; border: none; background: var(--card); border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 18px rgba(44,74,53,.18); opacity: 0; transform: translateY(14px); transition: opacity .35s, transform .35s; pointer-events: none; }
.scroll-top.show { opacity: 1; transform: none; pointer-events: auto; }
.scroll-top i { color: var(--gold); font-size: var(--fs-base); position: absolute; }
.progress-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.ring-track { fill: none; stroke: var(--bdr); stroke-width: 2.5; }
.ring-fill { fill: none; stroke: var(--gold); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: var(--csz); stroke-dashoffset: var(--csz); transition: stroke-dashoffset .15s linear; }

/* ── NAVBAR & SVG HANDLING ── */
#pvNav { position: fixed; inset: 0 0 auto 0; z-index: 80; background: var(--nav); box-shadow: var(--sh); height: 74px; display: flex; align-items: center; transition: height .3s, background .3s; backdrop-filter: blur(14px); }
#pvNav.scrolled { height: 62px; }
.nav-inner { width: 100%; max-width: 1400px; margin: 0 auto; padding: 0 36px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.pv-logo { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

.logo-wrapper { width: 200px; height: 62px; display: flex; align-items: center; }
.logo-wrapper img { width: 100%; height: 100%; object-fit: contain; }
.logo-wrapper .logo-light { display: var(--logo-light-display); }
.logo-wrapper .logo-dark { display: var(--logo-dark-display); }

.l-name { font-family: var(--font2); font-size: var(--fs-lg); font-weight: 600; color: var(--tx); line-height: 1; transition: color .3s; }
.l-sub { font-family: var(--font1); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 5.5px; text-transform: uppercase; color: var(--gold); margin-top: 2px; }
.desk-links { display: flex; align-items: center; list-style: none; margin: 0; padding: 0; gap: 0; }
.desk-links a { font-family: var(--font1); font-size: var(--fs-sm); font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--txb); padding: 8px 11px; position: relative; transition: color .3s; }
.desk-links a::after { content: ''; position: absolute; bottom: 2px; left: 11px; right: 11px; height: 1.5px; background: var(--gold); transform: scaleX(0); transition: transform .3s; }
.desk-links a:hover, .desk-links a.active { color: var(--gold); }
.desk-links a:hover::after, .desk-links a.active::after { transform: scaleX(1); }
.nav-ctrl { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.nav-phone { font-family: var(--font1); font-size: var(--fs-base); font-weight: 500; color: var(--txb); display: flex; align-items: center; gap: 5px; transition: color .3s; }
.nav-phone i { color: var(--gold); }
.nav-phone:hover { color: var(--gold); }
.icon-btn { width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid var(--bdr); background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--tx); font-size: var(--fs-base); transition: border-color .3s, color .3s; }
.icon-btn:hover { border-color: var(--gold); color: var(--gold); }
.nav-ham { width: 38px; height: 38px; border: 1.5px solid var(--bdr); background: transparent; cursor: pointer; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 0; border-radius: 4px; transition: border-color .3s; }
.nav-ham:hover { border-color: var(--gold); }
.nav-ham span { display: block; width: 18px; height: 1.5px; background: var(--tx); transition: background .3s; }
.nav-ham:hover span { background: var(--gold); }

/* Navigation specific element sizes */
.nav-icon-canvas-top { color: var(--gold); font-size: var(--fs-xl); }
.nav-icon-main-top { color: var(--gold); font-size: var(--fs-xxl); }

/* ── OFFCANVAS ── */
.pv-canvas { background: var(--gd)!important; width: 290px!important; z-index: 1070 !important; }
.pv-canvas .offcanvas-header { padding: 18px 22px; border-bottom: 1px solid rgba(255,255,255,.08); }
.pv-canvas .btn-close { filter: invert(1); opacity: .6; }
.pv-canvas .btn-close:hover { opacity: 1; }
.oc-name { font-family: var(--font2); font-size: var(--fs-md); font-weight: 600; color: #F5F0E3; line-height: 1; }
.oc-sub { font-family: var(--font1); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 5px; text-transform: uppercase; color: var(--gold); }
.oc-nav { list-style: none; padding: 0; margin: 0; }
.oc-nav li { border-bottom: 1px solid rgba(255,255,255,.06); }
.oc-nav a { display: flex; align-items: center; gap: 12px; padding: 14px 22px; font-family: var(--font1); font-size: var(--fs-sm); font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,.6); transition: color .3s, background .3s; }
.oc-nav a i { color: var(--gold); width: 18px; text-align: center; }
.oc-nav a:hover, .oc-nav a.active { color: #fff; background: rgba(255,255,255,.05); }
.oc-foot { padding: 20px 22px; border-top: 1px solid rgba(255,255,255,.07); }
.oc-info { display: flex; align-items: center; gap: 8px; font-family: var(--font1); font-size: var(--fs-base); margin-bottom: 7px; color: rgba(255,255,255,.45); }
.oc-info i { color: var(--gold); }
.oc-info a { color: rgba(255,255,255,.6); transition: color .3s; }
.oc-info a:hover { color: var(--gold); }
.oc-social { display: flex; gap: 8px; margin: 14px 0; }
.oc-social a { width: 32px; height: 32px; border: 1px solid rgba(255,255,255,.14); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.45); font-size: var(--fs-sm); transition: border-color .3s, color .3s; }
.oc-social a:hover { border-color: var(--gold); color: var(--gold); }

/* ── HERO SLIDER (HOMEPAGE) ── */
.hero-wrap { position: relative; z-index: 1; }
.hero-slide { height: calc(100vh - 74px); min-height: 560px; position: relative; display: flex!important; align-items: center; overflow: hidden; }
.slide-bg { position: absolute; inset: 0; transition: transform 8s ease; }
.hero-slider .slick-active .slide-bg { transform: scale(1.04); }
.slide-bg::after { content: ''; position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.04'/%3E%3C/svg%3E"); z-index: 1; pointer-events: none; }
.slide-ov { position: absolute; inset: 0; z-index: 2; background: linear-gradient(100deg, rgba(8,16,10,.9) 0%, rgba(8,16,10,.6) 48%, rgba(8,16,10,.15) 100%); }
.slide-ov::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.28) 0%, transparent 40%); }
.slide-cnt { position: relative; z-index: 3; padding-left: clamp(24px, 7vw, 110px); padding-right: 24px; max-width: min(680px, 90vw); }
.slide-eye { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font1); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 4.5px; text-transform: uppercase; color: var(--gold); margin-bottom: 16px; }
.slide-eye::before { content: ''; display: block; width: 28px; height: 1.5px; background: var(--gold); }
.slide-title { font-family: var(--font2); font-size: var(--fs-xxl); font-weight: 400; color: #fff; line-height: 1.08; margin-bottom: 18px; text-shadow: 0 2px 24px rgba(0,0,0,.25); }
.slide-title em { font-style: italic; color: #D4B472; }
.slide-desc { font-family: var(--font1); font-size: var(--fs-base); font-weight: 300; color: rgba(255,255,255,.75); line-height: 1.8; margin-bottom: 30px; max-width: 410px; }
.slide-btns { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-wrap .slick-prev, .hero-wrap .slick-next { width: 50px; height: 50px; z-index: 10; background: rgba(255,255,255,.09)!important; border: 1px solid rgba(255,255,255,.25)!important; border-radius: 0!important; backdrop-filter: blur(5px); transition: background .3s!important; display: flex!important; align-items: center; justify-content: center; }
.hero-wrap .slick-prev { left: 22px; }
.hero-wrap .slick-next { right: 22px; }
.hero-wrap .slick-prev:hover, .hero-wrap .slick-next:hover { background: rgba(201,160,86,.85)!important; border-color: transparent!important; }
.hero-wrap .slick-prev::before, .hero-wrap .slick-next::before { display: none!important; }
.hero-wrap .slick-prev .ai, .hero-wrap .slick-next .ai { color: #fff; font-size: var(--fs-md); }
.hero-wrap .slick-dots { bottom: 28px; left: clamp(24px, 7vw, 110px); text-align: left; width: auto; }
.hero-wrap .slick-dots li button::before { color: rgba(255,255,255,.35)!important; font-size: 7px!important; }
.hero-wrap .slick-dots li.slick-active button::before { color: var(--gold)!important; font-size: 9px!important; }
.hero-counter { position: absolute; bottom: 28px; right: 34px; z-index: 10; display: flex; align-items: center; gap: 10px; }
.hero-counter .hc { font-family: var(--font2); font-size: var(--fs-xl); font-weight: 500; color: var(--gold); line-height: 1; }
.hero-counter .hs { width: 36px; height: 1px; background: rgba(255,255,255,.28); }
.hero-counter .ht { font-family: var(--font1); font-size: var(--fs-xs); font-weight: 500; color: rgba(255,255,255,.35); }

.page-hero { margin-top: 74px; padding: 40px 0 40px; position: relative; overflow: hidden; }
.page-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    /* 1. base gradient (dark green to deep teal) */
    background:
        /* layer 3 – large sparse pentagons */
        url("data:image/svg+xml,%3Csvg width='120' height='120' viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M60 10 L110 40 L110 90 L60 120 L10 90 L10 40 Z' fill='none' stroke='rgba(255,255,255,0.04)' stroke-width='1.2'/%3E%3C/svg%3E") repeat,
            /* layer 2 – medium pentagons, slightly darker */
        url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M40 8 L75 30 L75 60 L40 82 L5 60 L5 30 Z' fill='none' stroke='rgba(255,255,255,0.06)' stroke-width='1'/%3E%3C/svg%3E") repeat,
            /* layer 1 – small pentagons, more visible */
        url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 5 L36 15 L36 30 L20 40 L4 30 L4 15 Z' fill='none' stroke='rgba(255,255,255,0.1)' stroke-width='0.8'/%3E%3C/svg%3E") repeat,
            /* bottom layer: the gradient */
        linear-gradient(135deg, var(--gd) 0%, var(--fbg, #111e17) 100%);

    background-size:
        120px 120px,   /* size for layer 3 */
        80px 80px,     /* size for layer 2 */
        40px 40px,     /* size for layer 1 */
        auto;          /* gradient covers whole area */

    opacity: 1;        /* keep full opacity, strokes control visibility */
}
.page-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,.3), rgba(0,0,0,.1)); }
.ph-content { position: relative; z-index: 2; }
.ph-eye { font-family: var(--font1); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 4px; text-transform: uppercase; color: var(--gold); margin-bottom: 10px; display: block; }
.ph-title { font-family: var(--font2); font-size: var(--fs-xxl); font-weight: 500; color: #fff; line-height: 1.1; margin-bottom: 14px; }
.ph-title em { font-style: italic; color: #D4B472; }
.ph-desc { font-family: var(--font1); font-size: var(--fs-base); font-weight: 300; color: rgba(255,255,255,.72); line-height: 1.75; }
.breadcrumb-pv { display: flex; gap: 8px; align-items: center; font-family: var(--font1); font-size: var(--fs-xs); font-weight: 500; letter-spacing: 1px; margin-top: 20px; }
.breadcrumb-pv a { color: rgba(255,255,255,.5); transition: color .3s; }
.breadcrumb-pv a:hover { color: var(--gold); }
.breadcrumb-pv .sep { color: rgba(255,255,255,.25); font-size: var(--fs-xs); }
.breadcrumb-pv .cur { color: var(--gold); }

/* ── BOOKING CONTAINER MODULE ── */
.booking-section { background: var(--bg2); position: relative; z-index: 10; max-width: 1140px; margin: -60px auto 60px auto !important; padding: 0; }
.book-bar { background: var(--card); border-top: 3px solid var(--gold); box-shadow: 0 15px 40px rgba(0,0,0,0.12); display: flex; align-items: stretch; min-height: 86px; border: 1px solid rgba(0,0,0,0.05); }
.bf { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 16px 20px; border-right: 1px solid var(--bdr); transition: background .25s; position: relative; cursor: pointer; }
.bf:hover { background: rgba(201,160,86,.04); }
.bf:last-of-type { border-right: none; }
.bl { font-family: var(--font1); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--fbg); margin-bottom: 5px; display: flex; align-items: center; gap: 5px; }
.bl i { color: var(--gold); font-size: var(--fs-sm); }
.bf input, .bf select { border: none; outline: none; background: transparent; font-family: var(--font1); font-size: var(--fs-base); font-weight: 500; color: var(--tx); width: 100%; appearance: none; cursor: pointer; transition: color .3s; }
.bk-wrap { display: flex; align-items: stretch; flex-shrink: 0; }
.bk-wrap .btn-gold { border-radius: 0; padding: 0 36px; font-size: var(--fs-xs); letter-spacing: 2px; display: flex; align-items: center; justify-content: center; gap: 8px; min-width: 165px; }
.book-mobile { display: none; padding: 20px; background: var(--card); box-shadow: 0 15px 40px rgba(0,0,0,0.12); border: 1px solid rgba(0,0,0,0.05); }
.book-mobile .form-control, .book-mobile .form-select { border: 1px solid var(--bdr); border-radius: 0; background: var(--inbg); color: var(--tx); font-family: var(--font1); font-size: var(--fs-base); padding: 10px 12px; transition: border-color .3s; }
.book-mobile .form-control:focus, .book-mobile .form-select:focus { border-color: var(--gold); box-shadow: none; background: var(--inbg); color: var(--tx); }
.lbl { font-family: var(--font1); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--txm); display: flex; align-items: center; gap: 5px; margin-bottom: 6px; }
.lbl i { color: var(--gold); }

/* ── LAYOUT SECTIONS STRUCTURAL ── */
.sec { padding: 90px 0; }
.sec-alt { padding: 90px 0; background: var(--bg2); }
.sec-dark { padding: 90px 0; background: var(--gd); }

/* Brand Panel Metrics */
.about-img-box { width: 100%; height: 460px; border-radius: 0 52px 0 0; overflow: hidden; position: relative; }
.about-img-fill { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.about-img-fill i { font-size: 6rem; color: rgba(255,255,255,.07); }
.about-corner { position: absolute; top: -16px; right: 4px; width: 70px; height: 70px; border: 2px solid var(--gold); border-radius: 0 48px 0 0; }
.about-badge { position: absolute; bottom: 0; left: 0; width: 132px; height: 132px; background: linear-gradient(135deg, var(--gold), var(--go)); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 14px; border-radius: 0 40px 0 0 }
.about-badge .bn { font-family: var(--font2); font-size: var(--fs-xxl); font-weight: 600; color: #fff; line-height: 1; }
.about-badge .bt { font-family: var(--font1); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255,255,255,.85); margin-top: 4px; }
.stat-block { padding: 18px 16px; background: var(--bgc); border-left: 3px solid var(--gold); transition: background .3s, transform .3s; cursor: default; }
.stat-block:hover { background: var(--green); transform: translateY(-4px); }
.stat-block:hover .sn, .stat-block:hover .sl { color: #fff!important; }
.sn { font-family: var(--font2); font-size: var(--fs-xl); font-weight: 600; color: var(--tx); line-height: 1; transition: color .3s; }
.sl { font-family: var(--font1); font-size: var(--fs-xs); font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--txm); margin-top: 4px; transition: color .3s; }

/* Value Blocks cards */
.val-card { padding: 28px; background: var(--card); border: 1px solid var(--bdr); border-bottom: 3px solid transparent; transition: all .3s; }
@media (max-width: 576px) {
    .val-card {
        padding: 15px;
    }
}
.val-card:hover { border-bottom-color: var(--gold); transform: translateY(-4px); box-shadow: 0 16px 40px rgba(44,74,53,.1); }
.val-icon { width: 54px; height: 54px; background: linear-gradient(135deg, var(--green), var(--gm)); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; border-radius: 100%;}
.val-icon i { color: var(--gold); font-size: var(--fs-md); }
.val-name { font-family: var(--font2); font-size: var(--fs-md); font-weight: 500; color: var(--tx); margin-bottom: 8px; }
.val-desc { font-size: var(--fs-sm); color: var(--txm); font-weight: 300; line-height: 1.65; }

/* ── ACCOMMODATION CARDS ── */
.room-card { background: var(--card); transition: transform .35s, box-shadow .35s; cursor: pointer; }
.room-card:hover { transform: translateY(-6px); box-shadow: 0 22px 55px rgba(44,74,53,.16); }
.room-thumb { height: 240px; overflow: hidden; position: relative; }
.room-fill { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; transition: transform .55s; }
.room-card:hover .room-fill { transform: scale(1.06); }
.room-fill i { font-size: 3rem; color: rgba(255,255,255,.09); }
.rtag { position: absolute; top: 14px; left: 14px; background: var(--gold); color: #fff; font-family: var(--font1); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 2px; text-transform: uppercase; padding: 4px 13px; }
.room-body { padding: 22px; background: var(--card); border-bottom: 3px solid transparent; transition: border-color .3s; }
.room-card:hover .room-body { border-color: var(--gold); }
.r-title { font-family: var(--font2); font-size: var(--fs-lg); font-weight: 500; color: var(--tx); margin-bottom: 3px; }
.r-sub { font-size: var(--fs-sm); color: var(--txm); font-weight: 300; margin-bottom: 12px; }
.r-amen { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 15px; }
.r-amen span { font-size: var(--fs-sm); color: var(--txm); display: flex; align-items: center; gap: 4px; }
.r-amen span i { color: var(--gold); font-size: var(--fs-sm); }
.r-foot { display: flex; justify-content: space-between; align-items: center; }
.r-price { font-family: var(--font2); font-size: var(--fs-md); color: var(--gold); }
.r-price small { font-family: var(--font1); font-size: var(--fs-xs); color: var(--txm); font-weight: 400; letter-spacing: 1px; }
.f-map-box {
    height: 90px; margin-top: 20px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: background 0.3s;
    text-align: center;
}
.f-map-box:hover { background: rgba(201,160,86,0.07); }
.f-map-box i { font-size: 1.4rem; color: var(--gold); }
.f-map-box span {
    display: block; font-size: 0.6rem;
    color: rgba(255,255,255,0.28); letter-spacing: 2px;
    text-transform: uppercase; margin-top: 5px;
}

/* Rooms slider arrows */
.rooms-section .slick-prev, .rooms-section .slick-next { width: 46px; height: 46px; z-index: 10; background: var(--card)!important; border: 1.5px solid var(--gold)!important; border-radius: 50%!important; box-shadow: 0 4px 16px rgba(44,74,53,.1); transition: background .3s!important; display: flex!important; align-items: center; justify-content: center; }
.rooms-section .slick-prev { left: -24px; }
.rooms-section .slick-next { right: -24px; }
.rooms-section .slick-prev:hover, .rooms-section .slick-next:hover { background: var(--gold)!important; }
.rooms-section .slick-prev::before, .rooms-section .slick-next::before { display: none!important; }
.rooms-section .slick-prev .ai, .rooms-section .slick-next .ai { color: var(--gold); font-size: 1rem; transition: color .3s; }
.rooms-section .slick-prev:hover .ai, .rooms-section .slick-next:hover .ai { color: #fff; }
.rooms-slider .slick-list { padding: 8px 0!important; }
.rooms-slider .slick-slide { padding: 0 10px; }
.rooms-slider .slick-track { display: flex!important; }

/* Room Grid Metrics Extracted from inline */
.room-gallery-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 200px 200px; gap: 8px; }
.rg-item { overflow: hidden; position: relative; }
.rg-item:first-child { grid-row: span 2; }
.rg-fill { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; transition: transform .55s; }
.rg-item:hover .rg-fill { transform: scale(1.04); }
.rg-fill i { font-size: 2rem; color: rgba(255,255,255,.1); }
.amen-chip { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; background: var(--bgc); border: 1px solid var(--bdr); font-family: var(--font1); font-size: var(--fs-sm); font-weight: 500; color: var(--txb); margin: 4px; }
.amen-chip i { color: var(--gold); }
.price-box { background: linear-gradient(135deg, var(--green), var(--gm)); padding: 28px; color: #fff; }
.price-box .pr-amount { font-family: var(--font2); font-size: var(--fs-xxl); font-weight: 500; color: var(--gold); line-height: 1; }
.price-box .pr-label { font-family: var(--font1); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: rgba(255,255,255,.55); }

/* Extracted detail specific structural boxes */
.room-gallery-link { display: block; width: 100%; height: 100%; }
.room-gallery-fill { width: 100%; height: 100%; }
.room-gallery-ov { position: absolute; inset: 0; background: rgba(0,0,0,0.65); display: flex; align-items: center; justify-content: center; flex-direction: column; color: #fff; cursor: pointer; }
.room-gallery-ov i { font-size: var(--fs-xl); margin-bottom: -10px; }
.room-gallery-ov span { font-family: var(--font1); font-size: var(--fs-lg); font-weight: 600; }
.spec-item-box { padding: 16px; background: var(--bgc); border-left: 3px solid var(--gold); border-radius: 4px; }
.spec-item-ico { color: var(--gold); font-size: var(--fs-md); margin-bottom: 6px; }
.spec-item-lbl { font-family: var(--font1); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--txm); margin-bottom: 4px; }
.spec-item-val { font-family: var(--font2); font-size: var(--fs-md); font-weight: 500; color: var(--tx); }
.highlight-line { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px dashed var(--bdr); }
.highlight-line i { color: var(--gold); font-size: var(--fs-base); flex-shrink: 0; }
.highlight-line span { font-size: var(--fs-base); color: var(--txb); font-weight: 300; }
.detail-sticky-pane { position: sticky; top: 88px; }
.detail-price-desc { font-family: var(--font1); font-size: var(--fs-xs); color: rgba(255,255,255,.5); margin-top: 4px; }
.detail-price-tag { margin-top: 12px; display: inline-block; background: var(--gold); color: #fff; font-family: var(--font1); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 2px; text-transform: uppercase; padding: 4px 12px; border-radius: 4px; }
.detail-booking-card { background: var(--card); border: 1px solid var(--bdr); padding: 24px; border-radius: 4px; }
.detail-booking-title { font-family: var(--font2); font-size: var(--fs-md); font-weight: 500; color: var(--tx); margin-bottom: 18px; }
.or-thumb-container { width: 100%; height: 100%; display: block; }

/* ── DINING & RESTAURANT ── */
.rest-visual { min-height: 500px; background: linear-gradient(155deg,#2a1a05 0%,#6b4614 40%,#C9A056 100%); display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.rest-visual .deco-bg { position: absolute; bottom: 10px; left: 16px; font-family: var(--font2); font-size: 7rem; font-weight: 600; color: rgba(255,255,255,.06); line-height: 1; pointer-events: none; }
.rest-visual-index .deco-bg { opacity: 0.8; text-shadow: 0 5px 15px rgba(0,0,0,0.5); }
.rest-content { padding: 70px 60px; background: var(--bg2); display: flex; flex-direction: column; justify-content: center; }
.rest-feat { display: flex; align-items: flex-start; gap: 15px; padding: 16px 0; border-bottom: 1px solid var(--bdr); }
.rest-feat:first-of-type { padding-top: 0; }
.rfi { width: 40px; height: 40px; flex-shrink: 0; background: rgba(201,160,86,.1); border: 1px solid rgba(201,160,86,.2); display: flex; align-items: center; justify-content: center; }
.rfi i { color: var(--gold); font-size: var(--fs-base); }
.rf-name { font-family: var(--font2); font-size: var(--fs-md); font-weight: 500; color: var(--tx); }
.rf-desc { font-size: var(--fs-sm); color: var(--txm); font-weight: 300; margin: 3px 0 0; }
.menu-cat { font-family: var(--font2); font-size: var(--fs-xl); font-weight: 500; color: var(--tx); border-bottom: 2px solid var(--gold); padding-bottom: 8px; margin-bottom: 16px; }
.menu-item { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px dashed var(--bdr); }
.mi-name { font-family: var(--font1); font-size: var(--fs-base); font-weight: 600; color: var(--tx); margin-bottom: 3px; }
.mi-desc { font-size: var(--fs-sm); color: var(--txm); font-weight: 300; }
.mi-price { font-family: var(--font2); font-size: var(--fs-md); color: var(--gold); flex-shrink: 0; }

/* ── REFACTORED STRUCTURAL METRICS STYLES ── */
.metric-box { padding: 16px; background: var(--bgc); border-left: 3px solid var(--gold); }
.metric-box-bottom { padding: 16px; background: var(--bgc); border-bottom: 3px solid var(--gold); }
.metric-title { font-family: var(--font1); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--txm); margin-bottom: 4px; }
.metric-value { font-family: var(--font2); font-size: var(--fs-md); font-weight: 500; color: var(--tx); }
.metric-value-lg { font-family: var(--font2); font-size: var(--fs-xl); font-weight: 500; color: #fff; line-height: 1.1; }

/* ── FACILITIES CARD ── */
.fac-card { background: var(--card); padding: 28px 18px; text-align: center; border: 1px solid var(--bdr); position: relative; overflow: hidden; transition: transform .35s, box-shadow .35s; }
.fac-card::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: var(--gold); transform: scaleX(0); transition: transform .35s; }
.fac-card:hover { transform: translateY(-5px); box-shadow: 0 16px 40px rgba(44,74,53,.1); }
.fac-card:hover::after { transform: scaleX(1); }
.fac-icon { width: 58px; height: 58px; background: linear-gradient(135deg, var(--green), var(--gm)); display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; transition: transform .35s; border-radius: 100%}
.fac-card:hover .fac-icon { transform: scale(1.1) rotate(6deg); }
.fac-icon i { color: var(--gold); font-size: var(--fs-md); }
.fac-name { font-family: var(--font2); font-size: var(--fs-md); font-weight: 500; color: var(--tx); margin-bottom: 6px; }
.fac-desc { font-size: var(--fs-sm); color: var(--txm); font-weight: 300; line-height: 1.6; }

/* ── GUEST REVIEWS ── */
/* Equal-height flex fix for testi slider */
.testi-slider .slick-track{display:flex!important;align-items:stretch}
.testi-slider .slick-slide{display:flex!important;height:auto!important;padding:20px;margin: 0 14px;}
.testi-slider .slick-slide>div{display:flex;width:100%}
.testi-slider .slick-list{padding:8px 0!important}
.testi-card{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.08);padding:28px 24px;transition:background .3s;flex:1;display:flex;flex-direction:column;min-height:220px}
.testi-card:hover{background:rgba(255,255,255,.075)}
.tq{font-family:var(--font2);font-size:2.3rem;color:var(--gold);line-height:1;margin-bottom:8px}
.ts{color:var(--gold);font-size:.68rem;letter-spacing:2px;margin-bottom:12px}
.tt{font-size:.85rem;color:rgba(255,255,255,.7);line-height:1.82;font-weight:300;font-style:italic;margin-bottom:20px;flex:1}
.tn{font-family:var(--font1);font-size:.82rem;font-weight:700;color:#fff}
.tf{font-size:.63rem;color:rgba(255,255,255,.32);letter-spacing:2px;text-transform:uppercase}
.testi-slider .slick-dots li button::before{color:rgba(255,255,255,.25)!important}
.testi-slider .slick-dots li.slick-active button::before{color:var(--gold)!important}

/* ── WELLNESS CENTER SPA ── */
.spa-left { min-height: 560px; background: linear-gradient(150deg,#0c1610 0%,#1a2e22 32%,#2C4A35 65%,#3d6b4f 100%); position: relative; display: flex; align-items: center; overflow: hidden; }
.spa-left::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 75% 50%,rgba(201,160,86,.1),transparent 60%); }
.spa-inner { position: relative; z-index: 2; padding: 56px 52px; }
.spa-inner-text { color: rgba(255,255,255,.68); font-size: var(--fs-base); font-weight: 300; line-height: 1.82; margin-bottom: 28px; }
.spa-feat { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 20px; }
.spa-ico { width: 42px; height: 42px; flex-shrink: 0; border: 1.5px solid rgba(201,160,86,.4); border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: background .3s; }
.spa-feat:hover .spa-ico { background: rgba(201,160,86,.14); }
.spa-ico i { color: var(--gold); font-size: var(--fs-base); }
.sp-title { font-family: var(--font2); font-size: var(--fs-md); color: #fff; font-weight: 500; }
.sp-txt { font-size: var(--fs-sm); color: rgba(255,255,255,.56); font-weight: 300; margin-top: 2px; }
.spa-right { min-height: 560px; background: linear-gradient(135deg,#C9A056 0%,#8a5e1e 45%,#2a1a05 100%); display: flex; align-items: center; justify-content: center; }
.spa-ring { width: 220px; height: 220px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.22); display: flex; align-items: center; justify-content: center; animation: spinRing 28s linear infinite; }
.spa-ring-in { width: 158px; height: 158px; border-radius: 50%; border: 1px solid rgba(255,255,255,.14); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }
.spa-ring-in i { font-size: var(--fs-xxl); color: rgba(255,255,255,.45); }
.spa-ring-in span { font-family: var(--font1); font-size: var(--fs-xs); letter-spacing: 3px; text-transform: uppercase; color: rgba(255,255,255,.33); text-align: center; }
@keyframes spinRing { to { transform: rotate(360deg); } }

/* ── ATTRACTIONS DESK EXPLORE ── */
.sight-card { overflow: hidden; cursor: pointer; }
.sight-thumb { height: 250px; overflow: hidden; position: relative; }
.sight-fill { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; transition: transform .6s; }
.sight-card:hover .sight-fill { transform: scale(1.08); }
.sight-fill i { font-size: 3rem; color: rgba(255,255,255,.08); }
.sight-ov { position: absolute; inset: 0; background: linear-gradient(to top, rgba(8,16,10,.92) 0%, rgba(8,16,10,.2) 55%, transparent 100%); display: flex; align-items: flex-end; padding: 20px; transition: background .4s; }
.sight-card:hover .sight-ov { background: linear-gradient(to top, rgba(8,16,10,.96) 0%, rgba(8,16,10,.45) 100%); }
.sd { font-family: var(--font1); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: var(--gold); margin-bottom: 4px; }
.sn2 { font-family: var(--font2); font-size: var(--fs-md); font-weight: 500; color: #fff; }
.si { font-size: var(--fs-sm); color: rgba(255,255,255,.62); font-weight: 300; line-height: 1.6; max-height: 0; overflow: hidden; transition: max-height .4s, margin .4s; }
.sight-card:hover .si { max-height: 80px; margin-top: 8px; }

/* Sight Detail Module Classes */
.sight-detail-hero-box { height: 380px; overflow: hidden; position: relative; margin-bottom: 32px; border-radius: 4px; background: var(--bgc); }
.sight-detail-hero-box img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sight-detail-metric-overlay { position: absolute; bottom: 20px; left: 20px; background: rgba(0,0,0,.55); backdrop-filter: blur(8px); border: 1px solid rgba(201,160,86,.4); padding: 10px 18px; border-radius: 4px; }
.sight-detail-metric-lbl { font-family: var(--font1); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--gold); }
.sight-tip-text-inner { font-size: var(--fs-base); color: var(--txb); margin: 0; }
.sight-guideline-box { padding: 16px; background: var(--bgc); text-align: center; border-radius: 4px; height: 100%; }
.sight-guideline-box i { font-size: var(--fs-xl); color: var(--gold); display: block; margin-bottom: 10px; }
.sight-guideline-title { font-family: var(--font2); font-size: var(--fs-base); font-weight: 500; color: var(--tx); margin-bottom: 6px; }
.sight-guideline-desc { font-size: var(--fs-sm); color: var(--txm); font-weight: 300; line-height: 1.65; }
.sight-thumb-area { height: 160px; position: relative; overflow: hidden; }
.sight-thumb-area img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sight-thumb-overlay-box { position: absolute; inset: 0; background: rgba(0,0,0,0.3); }
.sight-thumb-inner-text { position: absolute; bottom: 10px; left: 10px; }
.sight-sticky-wrap { position: sticky; top: 88px; }
.sight-sidebar-card { background: var(--card); border: 1px solid var(--bdr); padding: 24px; margin-bottom: 16px; border-radius: 4px; }
.sight-sidebar-title { font-family: var(--font2); font-size: var(--fs-md); font-weight: 500; color: var(--tx); margin-bottom: 6px; }
.sight-sidebar-desc { font-size: var(--fs-sm); color: var(--txm); font-weight: 300; margin-bottom: 18px; }
.sight-sidebar-row { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; border-bottom: 1px dashed var(--bdr); }
.sight-sidebar-row i { color: var(--gold); font-size: var(--fs-xs); margin-top: 2px; flex-shrink: 0; }
.sight-sidebar-row-title { font-family: var(--font1); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: var(--txm); }
.sight-sidebar-row-val { font-family: var(--font1); font-size: var(--fs-base); color: var(--tx); font-weight: 400; }
.sight-map-box { background: url('https://images.unsplash.com/photo-1524661135-423995f22d0b?w=800&q=80') center/cover; height: 400px; border-radius: 4px; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.sight-map-ov { position: absolute; inset: 0; background: rgba(0,0,0,0.3); }
.sight-map-node { position: absolute; background: rgba(0,0,0,.55); backdrop-filter: blur(6px); border: 1px solid rgba(201,160,86,.4); padding: 6px 12px; text-align: center; border-radius: 4px; }
.sight-map-node-dist { font-family: var(--font1); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); }
.sight-map-node-name { font-family: var(--font2); font-size: var(--fs-sm); font-weight: 500; color: #fff; white-space: nowrap; }
.sight-tips-card { display: flex; gap: 16px; padding: 22px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); border-radius: 4px; }
.sight-tips-ico-wrap { width: 46px; height: 46px; flex-shrink: 0; border: 1.5px solid rgba(201,160,86,.4); border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.sight-tips-title { font-family: var(--font2); font-size: var(--fs-md); font-weight: 500; color: #fff; margin-bottom: 7px; }
.sight-tips-desc { font-size: var(--fs-base); color: rgba(255,255,255,.55); font-weight: 300; line-height: 1.75; }

/* ── CONTACT FORMS & HUB CHANNELS ── */
.contact-card { background: var(--card); padding: 30px; border: 1px solid var(--bdr); text-align: center; transition: transform .3s, box-shadow .3s; }
.contact-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(44,74,53,.1); }
.cc-icon { width: 58px; height: 58px; border-radius: 50%; background: linear-gradient(135deg, var(--green), var(--gm)); display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; }
.cc-icon i { color: var(--gold); font-size: var(--fs-md); }
.cc-name { font-family: var(--font2); font-size: var(--fs-md); font-weight: 500; color: var(--tx); margin-bottom: 8px; }
.cc-val { font-size: var(--fs-sm); color: var(--txm); line-height: 1.7; font-weight: 300; }
.cc-val a { color: var(--txm); transition: color .3s; }
.cc-val a:hover { color: var(--gold); }
.form-field { margin-bottom: 18px; }
.form-field label { font-family: var(--font1); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--txm); display: block; margin-bottom: 6px; }
.form-field input, .form-field select, .form-field textarea { width: 100%; padding: 11px 14px; border: 1px solid var(--bdr); background: var(--inbg); color: var(--tx); font-family: var(--font1); font-size: var(--fs-base); border-radius: 0; outline: none; transition: border-color .3s; resize: vertical; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { border-color: var(--gold); }
.map-placeholder { height: 300px; background: linear-gradient(145deg, var(--green), var(--gm)); display: flex; align-items: center; justify-content: center; cursor: pointer; position: relative; overflow: hidden; }
.map-placeholder i { font-size: 3rem; color: rgba(255,255,255,.15); }
.map-placeholder span { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); font-family: var(--font1); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: rgba(255,255,255,.45); }
.map-placeholder-contact { background: url('https://images.unsplash.com/photo-1524661135-423995f22d0b?w=600&q=80') center/cover; }
.map-text-shadow { text-shadow: 0 2px 10px rgba(0,0,0,0.5); }

/* ── FOOTER MARKUP ── */
footer { background: var(--fbg); padding: 70px 0 0; }
.f-bname { font-family: var(--font2); font-size: var(--fs-md); font-weight: 600; color: var(--cream); line-height: 1; }
.f-bsub { font-family: var(--font1); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 5.5px; text-transform: uppercase; color: var(--gold); }
.f-about { font-family: var(--font1); font-size: var(--fs-base); color: var(--ftx); line-height: 1.85; font-weight: 300; margin: 14px 0 18px; }
.f-social { display: flex; gap: 8px; }
.f-social a { width: 33px; height: 33px; border: 1px solid rgba(255,255,255,.12); display: flex; align-items: center; justify-content: center; color: var(--ftx); font-size: var(--fs-sm); transition: border-color .3s, color .3s; }
.f-social a:hover { border-color: var(--gold); color: var(--gold); }
.f-head { font-family: var(--font2); font-size: var(--fs-md); font-weight: 500; color: #fff; margin-bottom: 18px; padding-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,.07); }
.f-links { list-style: none; padding: 0; margin: 0; }
.f-links li { margin-bottom: 9px; }
.f-links a { font-family: var(--font1); font-size: var(--fs-base); color: var(--ftx); transition: color .3s, padding-left .3s; }
.f-links a:hover { color: var(--gold); padding-left: 8px; }
.f-row { display: flex; gap: 11px; margin-bottom: 13px; }
.f-row i { color: var(--gold); font-size: var(--fs-base); margin-top: 3px; flex-shrink: 0; }
.f-row span, .f-row a { font-family: var(--font1); font-size: var(--fs-base); color: var(--ftx); line-height: 1.65; font-weight: 300; transition: color .3s; }
.f-row a:hover { color: var(--gold); }
.f-bar { background: rgba(0,0,0,.22); margin-top: 50px; padding: 16px 0; text-align: center; }
.f-bar p { font-family: var(--font1); font-size: var(--fs-xs); color: rgba(255,255,255,.2); margin: 0; letter-spacing: 1px; }
.f-bar span { color: var(--gold); }
.f-logo-size { width: 42px; height: 42px; }

/* ── CTA DECORATION STRIP ── */
.cta-strip { padding: 70px 0; background: linear-gradient(135deg, var(--green) 0%, var(--gm) 100%); position: relative; overflow: hidden; }
.cta-strip::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 80% 50%, rgba(201,160,86,.12), transparent 60%); }

/* ── ARCHITECTURAL COMPONENT ROUNDING ── */
.btn-gold, .btn-ghost, .btn-outline,
.room-card, .sight-card, .fac-card, .val-card, .testi-card,
.room-thumb, .sight-thumb, .about-img-box, .about-img-fill,
.rest-visual, .spa-right, .form-control, .form-select,
input, select, textarea, .book-bar, .book-mobile, .hero-slide,
.stat-block, .spa-inner, .spa-left, .rest-content, .metric-box, .metric-box-bottom,
.sight-detail-hero-box, .sight-detail-metric-overlay, .sight-guideline-box, .sight-sidebar-card,
.sight-map-box, .sight-tips-card, .detail-booking-card, .spec-item-box, .amen-chip {
    border-radius: 4px !important;
}
.room-thumb, .sight-thumb, .about-img-box { overflow: hidden; }

/* ── RESPONSIVE MEDIA BREAKPOINTS ── */
@media(max-width:1200px) { .desk-links { display: none } .nav-ham { display: flex } }
@media(max-width:992px) { .nav-inner { padding: 0 20px } .book-bar { display: none } .book-mobile { display: block } .rest-content { padding: 50px 30px } .spa-inner { padding: 42px 32px } .rooms-section .slick-prev { left: -8px } .rooms-section .slick-next { right: -8px } }
@media(max-width:768px) { .nav-phone { display: none !important } .about-img-box { height: 300px } .rest-visual { min-height: 240px } .spa-left { min-height: auto } .spa-right { min-height: 240px } .slide-desc { display: none } .hero-counter { display: none } .rest-content { padding: 36px 22px } }
@media(max-width:576px) { .hero-slide { height: calc(100svh - 74px) } .slide-btns { flex-direction: column; align-items: flex-start } .hero-wrap .slick-prev, .hero-wrap .slick-next { display: none!important } .page-hero { padding: 60px 0 45px } .room-gallery-grid { grid-template-columns: 1fr 1fr; grid-template-rows: 160px 160px 160px } .rg-item:first-child { grid-row: span 1; grid-column: span 2 } }

.sight-card:hover .sight-strip { border-top-color: var(--gold)!important; }

.field-error {
    display: none;
    color: #dc3545;
    font-size: 0.8rem;
    margin-top: 4px;
}
.field-error.visible {
    display: block;
}
input.error-border, select.error-border {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 0.2rem rgba(220,53,69,.15);
}