/* ==========================================================================
   Sirijunga Manghim Mangshila — Design Tokens
   Palette: Deep Forest / Brass Gold / Temple Ivory / Slate / Earth Rust
   ========================================================================== */

:root{
    /* ---- Colors ---- */
    --forest-950:#0E251C;
    --forest-950-rgb:14,37,28;

    --forest-800:#173D2C;
    --forest-800-rgb:23,61,44;

    --forest-700:#1F4D38;
    --forest-700-rgb:31,77,56;

    --forest-600:#2A6146;
    --forest-600-rgb:42,97,70;

    --gold-300:#E7CD7C;
    --gold-300-rgb:231,205,124;

    --gold-500:#C9A227;
    --gold-500-rgb:201,162,39;

    --gold-600:#A9871E;
    --gold-600-rgb:169,135,30;

    --rust-500:#A85C2E;
    --rust-500-rgb:168,92,46;

    --rust-400:#C17847;
    --rust-400-rgb:193,120,71;

    --slate-600:#48606D;
    --slate-600-rgb:72,96,109;

    --ivory-50:#F7F2E6;
    --ivory-50-rgb:247,242,230;

    --ivory-100:#F1EAD9;
    --ivory-100-rgb:241,234,217;

    --charcoal-900:#14171A;
    --charcoal-900-rgb:20,23,26;

    --charcoal-800:#1C2023;
    --charcoal-800-rgb:28,32,35;

    /* ---- Type ---- */
    --font-display:'Public Sans', sans-serif;
    --font-label:'Public Sans', sans-serif;
    --font-body:'Public Sans', sans-serif;

    --step--1: clamp(0.8rem, 0.78rem + 0.15vw, 0.9rem);
    --step-0:  clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
    --step-1:  clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem);
    --step-2:  clamp(1.75rem, 1.5rem + 1vw, 2.25rem);
    --step-3:  clamp(2.25rem, 1.85rem + 1.8vw, 3.25rem);
    --step-4:  clamp(3rem, 2.2rem + 3.2vw, 5rem);

    /* ---- Fixed type scale (px) ---- */
    --fs-xs: 11px;
    --fs-sm: 13px;
    --fs-base: 15px;
    --fs-md: 18px;
    --fs-lg: 24px;
    --fs-xl: 32px;
    --fs-2xl: 48px;
    --fs-3xl: 64px;
    --fs-4xl: 80px;

    /* ---- Motion / shape ---- */
    --ease-silk: cubic-bezier(.22,.68,.28,1);
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;
    --radius-xl: 24px;

    /* ---- Layout ---- */
    --container-w: min(1240px, 92vw);
    --divider-tone: var(--gold-500);

    color-scheme: light;
}

/* ---------------------------------------------------------------------
   LIGHT THEME (default)
   --------------------------------------------------------------------- */
:root,
[data-theme="light"]{
    --bg-body: var(--ivory-50);
    --bg-raised: #FFFFFF;
    --bg-sunken: var(--ivory-100);
    --bg-inverse: var(--forest-950);

    --text-primary: #1B2620;
    --text-secondary: #4A564D;
    --text-muted: #7A8479;
    --text-inverse: var(--ivory-50);

    --accent: var(--gold-500);
    --accent-strong: var(--gold-600);
    --accent-soft: #EFDFA9;

    --border-hairline: rgba(27,38,32,0.12);
    --border-gold: rgba(201,162,39,0.4);

    --nav-bg: rgba(247,242,230,0.95);
    --nav-text: var(--forest-950);

    --shadow-soft: 0 20px 60px -25px rgba(23,61,44,0.35);
    --shadow-card: 0 10px 30px -15px rgba(23,61,44,0.25);

    --hero-overlay: linear-gradient(180deg, rgba(14,37,28,0.15) 0%, rgba(14,37,28,0.55) 100%);
    --glass-bg: rgba(255,255,255,0.90);
    --glass-border: rgba(255,255,255,0.6);
}

/* ---------------------------------------------------------------------
   DARK THEME
   --------------------------------------------------------------------- */
[data-theme="dark"]{
    color-scheme: dark;
    --bg-body: var(--charcoal-900);
    --bg-raised: #1B2621;
    --bg-sunken: #10231B;
    --bg-inverse: var(--ivory-50);

    --text-primary: #EDE7D6;
    --text-secondary: #B7BEB2;
    --text-muted: #808A80;
    --text-inverse: var(--forest-950);

    --accent: var(--gold-300);
    --accent-strong: var(--gold-500);
    --accent-soft: #3A331B;

    --border-hairline: rgba(237,231,214,0.12);
    --border-gold: rgba(231,205,124,0.28);

    --nav-bg: rgba(20,23,26,0.72);
    --nav-text: var(--ivory-50);

    --shadow-soft: 0 25px 70px -25px rgba(0,0,0,0.6);
    --shadow-card: 0 12px 32px -16px rgba(0,0,0,0.55);

    --hero-overlay: linear-gradient(180deg, rgba(10,15,12,0.35) 0%, rgba(10,12,11,0.82) 100%);
    --glass-bg: rgba(27,38,33,0.55);
    --glass-border: rgba(237,231,214,0.1);
}

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



/* ==========================================================================
   Sirijunga Manghim Mangshila — Main Stylesheet
   ========================================================================== */

*,*::before,*::after{ box-sizing:border-box; }
html{
    scroll-behavior:smooth;
    background:var(--bg-body);
}
body{
    margin:0;
    font-family:var(--font-body);
    background:var(--bg-body);
    color:var(--text-primary);
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
    transition:background .4s var(--ease-silk), color .4s var(--ease-silk);
    line-height: 1.5;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
button{ font-family:inherit; cursor:pointer; }
h1,h2,h3,h4{ font-family:var(--font-display); margin:0; font-weight:600; line-height:1.1; }
p{ margin:0; }
::selection{ background:var(--accent); color:var(--forest-950); }

.container{ width:var(--container-w); margin-inline:auto; }
.visually-hidden{
    position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
a:focus-visible, button:focus-visible, [tabindex]:focus-visible{
    outline:2px solid var(--accent-strong);
    outline-offset:3px;
    border-radius:var(--radius-sm);
}

.text-one{
    color: var(--accent);
}
/* ---------- eyebrow / label style ---------- */
.eyebrow{
    font-family:var(--font-label);
    font-size:var(--step--1);
    letter-spacing:.28em;
    text-transform:uppercase;
    color:var(--accent-strong);
    display:inline-flex;
    align-items:center;
    gap:.6rem;
}
.eyebrow::before{
    content:"";
    width:8px; height:8px;
    background:var(--accent);
    transform:rotate(45deg);
    flex:none;
}

/* ---------- buttons ---------- */
.btn{
    display:inline-flex; align-items:center; gap:.6rem;
    padding:.9rem 1.9rem;
    font-family:var(--font-body);
    font-size:var(--step--1);
    font-weight:600;
    letter-spacing:.03em;
    border-radius:var(--radius-sm);
    border:1px solid transparent;
    transition:transform .35s var(--ease-silk), background .35s, color .35s, border-color .35s;
    white-space:nowrap;
}
.btn-primary{
    background:var(--forest-800);
    color:var(--ivory-50);
    border-color:var(--forest-800);
}
[data-theme="dark"] .btn-primary{ background:var(--gold-500); color:var(--forest-950); border-color:var(--gold-500); }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:var(--shadow-card); }
.btn-outline{
    background:transparent;
    color:var(--text-primary);
    border-color:var(--border-hairline);
}
.btn-outline:hover{ border-color:var(--accent-strong); color:var(--accent-strong); transform:translateY(-2px); }

.btn-ghost{  border-color:rgba(247,242,230,0.5); background: var(--gold-300) }
.btn-ghost:hover{ border-color:var(--gold-300); color: var(--forest-950); background: var(--gold-500) }

.btn-ghost-light{ color:var(--ivory-50); border-color:rgba(247,242,230,0.5); }
.btn-ghost-light:hover{ border-color:var(--gold-300); color:var(--gold-300); }

/* ---------- buttons (Mobile & Small Screen Enhancements) ---------- */
@media (max-width: 768px) {
    .btn {
        /* Optimize padding and ensure a minimum 44px touch target for accessibility */
        padding: .8rem 1.4rem;
        min-height: 44px;
        font-size: var(--fs-xs);
        gap: .5rem;
        justify-content: center;
    }

    /* Allow button text to wrap gracefully on very narrow screens instead of overflowing */
    .btn {
        white-space: normal;
        text-align: center;
    }

    /* Utility to make buttons stretch full-width on mobile when needed */
    .btn-block-mobile {
        display: flex;
        width: 100%;
    }

    /* Ensure button groups (like in the hero section) stack neatly on small screens */
    .hero-actions {
        flex-direction: column;
        align-items: stretch;
        gap: .8rem;
        width: 100%;
        max-width: 320px;
    }

    .hero-actions .btn {
        width: 100%;
    }

    /* Optimize buttons inside the mobile offcanvas menu */
    .mobile-menu-foot .btn {
        padding: 1rem 1.5rem;
        font-size: var(--fs-sm);
        border-radius: var(--radius-md);
    }
}

/* Extra optimization for very small devices (under 400px) */
@media (max-width: 400px) {
    .btn {
        padding: .7rem 1.1rem;
        font-size: var(--fs-xs);
        border-radius: var(--radius-sm);
    }
}

/* ==========================================================================
   PRELOADER
   ========================================================================== */
#preloader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: var(--forest-950);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity .6s var(--ease-silk), visibility .6s;
}

#preloader.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* New Image Preloader Styles */
.preloader-logo {
    width: 120px; /* Adjust size if needed */
    height: auto;
    object-fit: contain;
    /* Adds a subtle golden glow behind the logo */
    filter: drop-shadow(0 0 15px rgba(201, 162, 39, 0.4));
    animation: logoBreathing 1.8s ease-in-out infinite;
}

/* Smooth scaling and opacity pulse */
@keyframes logoBreathing {
    0%, 100% {
        transform: scale(0.95);
        opacity: 0.7;
    }
    50% {
        transform: scale(1.05);
        opacity: 1;
    }
}

/* ==========================================================================
   HEADER / NAVIGATION
   ========================================================================== */
.site-header{
    position:fixed; inset-inline:0; top:0; z-index:900; ;
    padding-block:.40rem; border-bottom: 1px solid var(--forest-700);
    transition:padding .4s var(--ease-silk), background .4s var(--ease-silk), box-shadow .4s;
    background: rgba(var(--forest-950-rgb), 0.3);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
}
.site-header .container{
    display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
}
.site-header.is-scrolled{
    padding-block:.2rem;
    background:var(--nav-bg);
    backdrop-filter:blur(14px) saturate(140%);
    -webkit-backdrop-filter:blur(14px) saturate(140%);
    box-shadow:0 1px 0 var(--border-hairline);
}
.brand{ display:flex; align-items:center; gap:.7rem; }
.brand-mark{
    width:38px; height:38px;
    border:1.4px solid var(--gold-500);
    transform:rotate(45deg);
    display:grid; place-items:center;
    flex:none;
}
.brand-mark span{
    transform:rotate(-45deg);
    width:10px; height:10px;
    background:var(--gold-500);
}
.brand-text {
    font-family: var(--font-display);
    /* Scales from 15px (0.95rem) on small mobile up to 20px (1.25rem) on desktop */
    font-size: clamp(0.95rem, 0.85rem + 0.5vw, 0.25rem);
    line-height: clamp(1.1, 1.05 + 0.2vw, 1.2);
    color: var(--nav-text, var(--text-primary));
}
.site-header:not(.is-scrolled) .brand-text,
.site-header:not(.is-scrolled) .nav-link,
.site-header:not(.is-scrolled) .theme-toggle,
.site-header:not(.is-scrolled) .icon-btn{ color:var(--ivory-50); }
.brand-text small {
    display: block;
    font-family: var(--font-label);
    /* Scales from 9.3px (0.58rem) on mobile up to 11.5px (~var(--fs-xs)) on desktop */
    font-size: clamp(0.58rem, 0.52rem + 0.3vw, 0.72rem);
    /* Tightens letter spacing slightly on mobile to prevent horizontal wrapping */
    letter-spacing: clamp(0.14em, 0.12em + 0.1vw, 0.22em);
    color: var(--gold-500);
    text-transform: uppercase;
    margin-top: 2px;
}
/* ---------- Brand Logo Responsive Scaling ---------- */
.brand img {
    width: 62px;
    height: 62px;
    object-fit: contain;
    transition: width 0.35s var(--ease-silk), height 0.35s var(--ease-silk);
}

/* Tablet & Mobile Navigation (under 768px) */
@media (max-width: 768px) {
    .brand img {
        width: 44px;
        height: 44px;
    }
    .site-header .container {
        gap: 0.5rem;
        justify-content: space-between;
    }
}


/* Small Mobile Screens (under 480px) */
@media (max-width: 480px) {
    .brand img {
        width: 38px;
        height: 38px;
    }
}

.nav-desktop{ display:none; }
@media (min-width:1100px){
    .nav-desktop{ display:flex; align-items:center; gap:1.6rem; }
}
.nav-link{
    position:relative;
    font-size:.92rem; font-weight:500; letter-spacing:.02em;
    color:var(--nav-text, var(--text-primary));
    padding:.4rem 0;
}
.nav-link::after{
    content:""; position:absolute; left:0; bottom:-2px;
    width:0; height:1px; background:var(--gold-500);
    transition:width .3s var(--ease-silk);
}
.nav-link:hover::after,
.nav-item.is-open .nav-link::after,
.nav-link.active::after {
    width: 100%;
}

/* --- About dropdown (desktop) --- */
.nav-item{ position:relative; }
.nav-item > .nav-link{ display:flex; align-items:center; gap:.35rem; }
.nav-caret{ width:9px; height:9px; border-right:1.4px solid currentColor; border-bottom:1.4px solid currentColor; transform:rotate(45deg); margin-top:-3px; transition:transform .3s; }
.nav-item.is-open .nav-caret{ transform:rotate(225deg); margin-top:3px; }

.nav-dropdown{
    position:absolute; top:calc(100% + 1.4rem); left:50%;
    transform:translateX(-50%) translateY(8px);
    width:560px; max-width:80vw;
    background:var(--bg-raised);
    border:1px solid var(--border-hairline);
    border-radius:var(--radius-md);
    box-shadow:var(--shadow-soft);
    padding:1.6rem;
    display:grid; grid-template-columns:1fr 1fr; gap:.3rem;
    opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity .3s var(--ease-silk), transform .3s var(--ease-silk), visibility .3s;
    z-index:40;
}
.nav-item.is-open .nav-dropdown{
    opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0);
}
.nav-dropdown::before{
    content:""; position:absolute; top:-7px; left:50%; transform:translateX(-50%) rotate(45deg);
    width:12px; height:12px; background:var(--bg-raised);
    border-left:1px solid var(--border-hairline); border-top:1px solid var(--border-hairline);
}
.nav-dropdown a{
    display:flex; flex-direction:column; gap:.15rem;
    padding:.75rem .8rem; border-radius:var(--radius-sm);
    color:var(--text-primary);
    transition:background .25s;
}
.nav-dropdown a:hover{ background:var(--bg-sunken); }
.nav-dropdown a strong{ font-family:var(--font-display); font-size:1.05rem; font-weight:600; }
.nav-dropdown a span{ font-size:.78rem; color:var(--text-muted); }
.nav-dropdown-feature{
    grid-column:1 / -1;
    display:flex; align-items:center; gap:1rem;
    padding:.9rem; margin-top:.3rem;
    border-top:1px solid var(--border-hairline);
}
.nav-dropdown-feature .diamond-mini{ width:26px; height:26px; border:1.2px solid var(--gold-500); transform:rotate(45deg); flex:none; }
.nav-dropdown-feature p{ font-size:.82rem; color:var(--text-secondary); }

.nav-cta{ display:flex; align-items:center; gap:1rem; }
.theme-toggle{
    width:42px; height:42px; border-radius:50%;
    border:1px solid var(--border-hairline);
    display:grid; place-items:center;
    background:transparent; color:var(--text-primary);
    transition:border-color .3s, transform .3s;
}
.theme-toggle:hover{ border-color:var(--accent-strong); transform:rotate(-12deg); }
.theme-toggle svg{ width:18px; height:18px; }
.icon-sun{ display:none; }
[data-theme="dark"] .icon-sun{ display:block; }
[data-theme="dark"] .icon-moon{ display:none; }

.nav-burger{
    display:flex; flex-direction:column; gap:5px;
    width:26px; background:none; border:none; padding:0;
}
.nav-burger span{ height:1.5px; background:currentColor; width:100%; transition:transform .35s var(--ease-silk), opacity .35s; }
.nav-burger{ color:var(--nav-text, var(--text-primary)); }
.site-header:not(.is-scrolled) .nav-burger{ color:var(--ivory-50); }
.waves {  z-index: 10; }
@media (min-width:1100px){ .nav-burger{ display:none; } }

/* --- Mobile offcanvas menu --- */
.mobile-menu{
    position:fixed; inset:0; z-index:950;
    visibility:hidden;
}
.mobile-menu.is-open{ visibility:visible; }
.mobile-menu-backdrop{
    position:absolute; inset:0; background:rgba(14,37,28,0.55);
    opacity:0; transition:opacity .4s var(--ease-silk);
}
.mobile-menu.is-open .mobile-menu-backdrop{ opacity:1; }
.mobile-menu-panel{
    position:absolute; top:0; right:0; bottom:0;
    width:min(360px, 86vw);
    background:var(--bg-raised);
    padding:1.6rem 1.6rem 2rem;
    transform:translateX(100%);
    transition:transform .45s var(--ease-silk);
    overflow-y:auto;
    display:flex; flex-direction:column;
}
.mobile-menu.is-open .mobile-menu-panel{ transform:translateX(0); }
.mobile-menu-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:1.6rem; }
.mobile-close{ width:38px; height:38px; border-radius:50%; border:1px solid var(--border-hairline); background:none; display:grid; place-items:center; color:var(--text-primary); }
.mobile-links{ display:flex; flex-direction:column; }
.mobile-links > li{ border-bottom:1px solid var(--border-hairline); }
.mobile-links > li > a, .mobile-accordion-trigger{
    display:flex; align-items:center; justify-content:space-between;
    padding:1rem .2rem; font-family:var(--font-display); font-size:1.15rem;
    width:100%; background:none; border:none; color:var(--text-primary); text-align:left;
}
.mobile-accordion-trigger .nav-caret{ transition:transform .3s; }
.mobile-accordion-trigger[aria-expanded="true"] .nav-caret{ transform:rotate(225deg); }
.mobile-submenu{
    max-height:0; overflow:hidden;
    transition:max-height .4s var(--ease-silk);
}
.mobile-submenu.is-open{ max-height:400px; }
.mobile-submenu a{
    display:block; padding:.6rem .2rem .6rem 1rem;
    font-size:.92rem; color:var(--text-secondary);
    border-left:1px solid var(--border-gold);
    margin-left:.2rem;
}
.mobile-menu-foot{ margin-top:auto; padding-top:1.5rem; display:flex; flex-direction:column; gap:1rem; }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
    position:relative; min-height:100svh;
    display:flex; align-items:center;
    background:radial-gradient(120% 90% at 15% 10%, #244C36 0%, var(--forest-950) 55%, #0A1912 100%);
    color:var(--ivory-50);
    overflow:hidden;
    padding-top:6rem;
}
.hero::after{ content:""; position:absolute; inset:0; background:var(--hero-overlay); pointer-events:none; }
.hero-fog{
    position:absolute; inset:auto 0 0 0; height:45%;
    background:linear-gradient(180deg, transparent, rgba(10,25,18,0.9));
    pointer-events:none;
}
#hero-particles{ position:absolute; inset:0; z-index:1; }
.hero-mountains{ position:absolute; left:0; right:0; bottom:0; z-index:2; opacity:.9; }
.hero-mountains svg{ width:100%; height:auto; display:block; }

.hero .container{ position:relative; z-index:4; }

/* Bootstrap row: side by side and equal height from lg up; stacked (natural height) below lg */
.hero-row{ row-gap:2.5rem; }

/* ---------- Copy column ---------- */
.hero-copy{ max-width:640px; width:100%; height:100%; }
.hero-copy .eyebrow{ color:var(--gold-300); margin-bottom:1.4rem; }
.hero-copy h1{
    font-size:var(--step-2);
    color:var(--ivory-50);
    margin-bottom:1.4rem;
}
.hero-copy h1 em{ font-style:italic; color:var(--gold-300); }
.hero-copy p{ font-size:var(--step-0); color:rgba(247,242,230,0.82); max-width:46ch; margin-bottom:2.2rem; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:1rem; margin-bottom:0; }

/* ---------- Illustration / slider column ---------- */
/* Visible at every width; Bootstrap's flex row stretches this column
   to match the copy column's height from lg up. */
.hero-illustration{ position:relative; width:100%; height:100%; }

.hero-slider-wrapper{
    position:relative;
    width:100%;
    height:100%;
    z-index:5;
}

.hero-image-swiper{
    width:100%;
    /* Mobile / tablet: fixed landscape ratio since the column isn't height-matched when stacked */
    aspect-ratio:16/9;
    border-radius:12px;
    overflow:hidden;
    /* Hardware acceleration forces the browser to render smoothly during cross-fades */
    transform:translateZ(0);
    -webkit-transform:translateZ(0);
    backface-visibility:hidden;
}

@media (min-width:992px){
    /* Desktop: drop the fixed ratio and fill the stretched column height instead,
       so the slider always matches the copy column's height and reads as landscape
       because the column is wider than it is tall. */
    .hero-image-swiper{ aspect-ratio:auto; height:100%; }
}

.hero-diamond-orbit{ position:relative; width:100%; height:100%; }
.hero-diamond-orbit img{
    width:100%;
    height:100%;
    object-fit:cover;
    border:8px solid var(--forest-800);
    border-radius:12px;
    display:block;
}
@media (min-width:992px){
    .hero-diamond-orbit img{ border-width:12px; }
}
.hero-diamond-orbit svg{ width:100%; height:100%; }
.orbit-ring{ animation:spinSlow 60s linear infinite; transform-origin:center; }
.orbit-ring.reverse{ animation-direction:reverse; animation-duration:80s; }
@keyframes spinSlow{ to{ transform:rotate(360deg); } }
.orbit-diamond{ animation:floatY 5s ease-in-out infinite; }
@keyframes floatY{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-10px);} }

.scroll-cue{
    position:absolute; left:50%; bottom:2.2rem; transform:translateX(-50%);
    z-index:4; display:flex; flex-direction:column; align-items:center; gap:.6rem;
    color:rgba(247,242,230,0.7); font-size:.7rem; letter-spacing:.25em; text-transform:uppercase;
}
.scroll-cue-line{ width:1px; height:36px; background:linear-gradient(var(--gold-300), transparent); position:relative; overflow:hidden; }
.scroll-cue-line::after{
    content:""; position:absolute; top:-100%; left:0; width:100%; height:100%;
    background:var(--gold-300); animation:scrollDrip 2.2s ease-in-out infinite;
}
@keyframes scrollDrip{ 0%{ top:-100%; } 60%{ top:100%; } 100%{ top:100%; } }

/* ---------- section divider (organic mountain-ridge) ---------- */
.section-divider{ display:block; width:100%; line-height:0; position:relative; z-index:3; }
.section-divider svg{ width:100%; height:60px; display:block; }
.section-divider.flip{ transform:rotate(180deg); }

/* ==========================================================================
   SECTION SHELL
   ========================================================================== */
section{ position:relative; }
.section-pad{ padding-block:clamp(4rem,3rem + 5vw,7.5rem); }
.section-head{ margin-bottom:3rem; }
.section-head .eyebrow{ margin-bottom:1rem; }
.section-head h2{ font-size:var(--step-2); }
.section-head p{ margin-top:1.1rem; color:var(--text-secondary); font-size:var(--step-0); }
.section-head.center{ margin-inline:auto; text-align:center; }

.bg-watermark{
    position:absolute; inset:0; pointer-events:none;
    background-image:url('../images/emblem-pattern.svg');
    background-size:200px; opacity:.15;
}
[data-theme="dark"] .bg-watermark{ opacity:.13; }

/* ---------- Authentic Sirijunga symbol placements ---------- */
.emblem-glow{
    position:absolute; pointer-events:none; z-index:1;
    color:var(--gold-300);
}
.emblem-glow svg{ width:100%; height:100%; display:block; }

.hero-emblem{
    top:50%; left:50%; width:min(620px,70vw); aspect-ratio:1/1;
    transform:translate(-50%,-50%); opacity:.09;
    animation:spinSlow 140s linear infinite;
}

.welcome-symbol{
    position:absolute; top:-3.5rem; right:-2rem; z-index:0;
    width:180px; opacity:.85; pointer-events:none;
    filter:drop-shadow(0 10px 20px rgba(14,37,28,0.15));
}
[data-theme="dark"] .welcome-symbol{ opacity:.7; }

.mahaguru-symbol{
    position:absolute; bottom:-4rem; right:-3rem; z-index:0;
    width:280px; opacity:.28; pointer-events:none;
    mix-blend-mode:screen;
}

.footer-symbol{
    position:absolute; right:-2rem; bottom:1rem; z-index:0;
    width:220px; color:var(--gold-500); opacity:.08; pointer-events:none;
}

.heritage-symbol-card .heritage-card-media{
    display:flex; align-items:center; justify-content:center;
    background:linear-gradient(155deg,var(--forest-700),var(--forest-950));
    padding:1.6rem;
}
.heritage-symbol-card .heritage-card-media img{ width:70%; height:auto; }

/* ---------- Welcome / Introduction ---------- */
.welcome{ background:var(--bg-body); }
.welcome-grid{
    display:grid; gap:2.5rem; position:relative; z-index:1;
}
@media (min-width:900px){ .welcome-grid{ grid-template-columns:.85fr 1.15fr; align-items:center; gap:4rem; } }

/* =========================================
   Welcome Image Fallback
   ========================================= */
.welcome-image-fallback {
    width: 100%;
    height: 100%;
    min-height: 450px; /* Ensures the frame holds its shape without an image */
    background: linear-gradient(155deg, var(--forest-700), var(--forest-950));
    display: flex;
    align-items: center;
    justify-content: center;
}

/* =========================================
   Eye-Catchy Animated Badge
   ========================================= */
.welcome-badge-v2 {
    position: absolute;
    top: 10rem;
    right: -2.5rem;
    width: 120px;
    height: 120px;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Rotating outer dashed ring */
.welcome-badge-v2 .badge-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px dashed var(--gold-500);
    /*animation: spinSlow 15s linear infinite;*/
    opacity: 0.7;
}

/* Inner solid floating badge */
.welcome-badge-v2 .badge-content {
    position: relative;
    width: 100px;
    height: 100px;
    background: linear-gradient(135deg, var(--gold-300), var(--gold-500));
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 25px rgba(201, 162, 39, 0.4), inset 0 0 15px rgba(255, 255, 255, 0.4);
    border: 4px solid var(--ivory-50);
    text-align: center;
    animation: floatBadge 4s ease-in-out infinite;
}

/* Adapt border for dark mode */
[data-theme="dark"] .welcome-badge-v2 .badge-content {
    border-color: var(--charcoal-900);
}

.welcome-badge-v2 strong {
    font-family: var(--font-display);
    font-size: 1.8rem;
    color: var(--forest-950);
    line-height: 1;
    margin-bottom: 2px;
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.1));
}

.welcome-badge-v2 span {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--forest-700);
    line-height: 1.2;
}

/* Floating animation keyframes */
@keyframes floatBadge {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

.welcome-visual{ position:relative; }
.welcome-frame{
    position:relative; border-radius:var(--radius-lg);
    overflow:hidden; aspect-ratio:4/5;
    background:linear-gradient(155deg, var(--forest-700), var(--forest-950));
    box-shadow:var(--shadow-soft);
}
.welcome-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.welcome-frame svg{ position:absolute; inset:0; width:100%; height:100%; }
.welcome-frame-tag{
    position:absolute; left:1.4rem; bottom:1.4rem; right:1.4rem;
    padding:1rem 1.2rem; border-radius:var(--radius-sm);
    background:var(--glass-bg); backdrop-filter:blur(10px);
    border:1px solid var(--glass-border);
    color:var(--text-secondary); font-size:.85rem;
}
.welcome-badge{
    position:absolute; top:-1.2rem; right:-1.2rem;
    width:96px; height:96px; border-radius:50%;
    background:var(--bg-raised); box-shadow:var(--shadow-card);
    display:grid; place-items:center; text-align:center;
    border:1px solid var(--border-gold);
}
.welcome-badge strong{ display:block; font-family:var(--font-display); font-size:1.3rem; color:var(--accent-strong); }
.welcome-badge span{ font-size:.6rem; letter-spacing:.1em; color:var(--text-muted); text-transform:uppercase; }

.pillars{ display:grid; gap:1.2rem; margin-top:2.2rem; }
@media (min-width:560px){ .pillars{ grid-template-columns:1fr 1fr; } }
.pillar{
    display:flex; gap:1rem; padding:1.2rem 0;
    border-top:1px solid var(--border-hairline);
}
.pillar .diamond-bullet{ margin-top:.3rem; }
.pillar h4{ font-size:1.05rem; margin-bottom:.35rem; }
.pillar p{ font-size:.88rem; color:var(--text-muted); }

.diamond-bullet{
    flex:none; width:14px; height:14px; border:1.4px solid var(--gold-500);
    transform:rotate(45deg);
}

/* ---------- About teaser + Legacy timeline ---------- */
.about-teaser{ background:var(--bg-sunken); }
.about-grid{ display:grid; gap:3rem; }
@media (min-width:992px){ .about-grid{ grid-template-columns:1fr 1fr; } }
.about-copy p + p{ margin-top:1rem; }
.about-copy{ color:var(--text-secondary); font-size:var(--step-0); }
.stat-row{ display:flex; flex-wrap:wrap; gap:2.4rem; margin-top:2.2rem; }
.stat{ }
.stat strong{ display:block; font-family:var(--font-display); font-size:var(--step-2); color:var(--accent-strong); }
.stat span{ font-size:.78rem; letter-spacing:.06em; color:var(--text-muted); text-transform:uppercase; }

.timeline{ position:relative; padding-left:1.6rem; }
.timeline::before{ content:""; position:absolute; left:4px; top:6px; bottom:6px; width:1px; background:var(--border-gold); }
.timeline-item{ position:relative; padding-bottom:2rem; }
.timeline-item:last-child{ padding-bottom:0; }
.timeline-item::before{
    content:""; position:absolute; left:-1.6rem; top:.35rem;
    width:9px; height:9px; background:var(--accent); transform:rotate(45deg);
}
.timeline-year{ font-family:var(--font-label); font-size:.75rem; letter-spacing:.15em; color:var(--accent-strong); }
.timeline-item h4{ font-size:1.15rem; margin:.35rem 0 .3rem; }
.timeline-item p{ font-size:.88rem; color:var(--text-muted); }

/* ---------- Mahaguru ---------- */
.mahaguru{
    background:var(--forest-950); color:var(--ivory-50);
    position:relative; overflow:hidden;
}
.mahaguru-grid{ display:grid; gap:3rem; position:relative; z-index:1; }
@media (min-width:992px){ .mahaguru-grid{ grid-template-columns:.9fr 1.1fr; align-items:center; } }
.mahaguru-portrait{
    position:relative; aspect-ratio:3/4; border-radius:var(--radius-lg);
    background:linear-gradient(160deg,#2A5B41,#0E251C);
    box-shadow:var(--shadow-soft); overflow:hidden;
}
.mahaguru-portrait svg{ position:absolute; inset:0; width:100%; height:100%; }
.mahaguru .eyebrow{ color:var(--gold-300); }
.mahaguru h2{ font-size:var(--step-2); margin:1rem 0 1.3rem; color:var(--ivory-50); }
.mahaguru p{ color:rgba(247,242,230,0.78); font-size:var(--step-0); }
blockquote.teaching{
    margin:1.8rem 0; padding-left:1.4rem;
    border-left:2px solid var(--gold-500);
    font-family:var(--font-display); font-style:italic; font-size:1.25rem;
    color:var(--gold-300);
}

/* ---------- Philosophy cards ---------- */
.philosophy-grid{
    display:grid; gap:1.4rem;
    grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
}
.philosophy-card{
    padding:2rem 1.6rem; border-radius:var(--radius-md);
    background:var(--bg-raised); border:1px solid var(--border-hairline);
    transition:transform .4s var(--ease-silk), box-shadow .4s;
}
.philosophy-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-card); }
.philosophy-icon{
    width:46px; height:46px; margin-bottom:1.2rem;
    border:1.3px solid var(--accent-strong);
    display:grid; place-items:center;
    border-radius: var(--radius-sm);
}
.philosophy-icon > span, .philosophy-icon > svg{ transform:rotate(-45deg); font-size:1.1rem; }
.philosophy-card h4{ font-size:1.2rem; margin-bottom:.5rem; }
.philosophy-card p{ font-size:.88rem; color:var(--text-muted); }

/* ---------- Cultural heritage ---------- */
.heritage{ background:var(--bg-sunken); }
.heritage-scroller{
    display:flex; gap:1.4rem; overflow-x:auto; scroll-snap-type:x mandatory;
    padding-bottom:1rem; margin:0 -1.5vw; padding-inline:1.5vw;
    scrollbar-width:thin;
}
.heritage-card{
    scroll-snap-align:start; flex:0 0 auto; width:min(280px,72vw);
    border-radius:var(--radius-md); overflow:hidden;
    background:var(--bg-raised); border:1px solid var(--border-hairline);
    box-shadow:var(--shadow-card);
}
.heritage-card-media{
    aspect-ratio:4/3; position:relative; overflow:hidden;
}
.heritage-card-media svg{ width:100%; height:100%; }
.heritage-card-body{ padding:1.3rem 1.4rem 1.6rem; }
.heritage-card-body span.tag{ font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-strong); }
.heritage-card-body h4{ font-size:1.15rem; margin:.4rem 0 .4rem; }
.heritage-card-body p{ font-size:.84rem; color:var(--text-muted); }

/* ---------- Festivals (swiper) ---------- */
.festival-slide{
    border-radius:var(--radius-lg); overflow:hidden; position:relative;
    aspect-ratio:16/10; color:var(--ivory-50);
}
.festival-slide .fig{
    position:absolute; inset:0;
}
.festival-slide .fig svg{ width:100%; height:100%; }
.festival-slide::after{ content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(10,20,15,0.85), transparent 60%); }
.festival-slide-body{ position:absolute; left:0; right:0; bottom:0; padding:1.6rem; z-index:2; }
.festival-slide-body .eyebrow{ color:var(--gold-300); }
.festival-slide-body h4{ font-size:1.5rem; margin:.5rem 0; color:var(--ivory-50); }
.festival-slide-body p{ font-size:.85rem; color:rgba(247,242,230,0.8); }
.swiper-pagination-bullet{ background:var(--ivory-50); opacity:.5; }
.swiper-pagination-bullet-active{ background:var(--gold-300); opacity:1; }
.slider-nav{ display:flex; gap:.8rem; margin-top:1.6rem; justify-content:flex-end; }
.slider-arrow{
    width:44px; height:44px; border-radius:50%; border:1px solid var(--border-hairline);
    display:grid; place-items:center; background:none; color:var(--text-primary);
    transition:border-color .3s, background .3s;
}
.slider-arrow:hover{ border-color:var(--accent-strong); background:var(--bg-sunken); }

/* ---------- Gallery masonry ---------- */
.gallery-grid{
    columns:1; column-gap:1.1rem;
}
@media (min-width:600px){ .gallery-grid{ columns:2; } }
@media (min-width:992px){ .gallery-grid{ columns:3; } }
.gallery-item{
    break-inside:avoid; margin-bottom:1.1rem; border-radius:var(--radius-md);
    overflow:hidden; position:relative; cursor:zoom-in;
    border:1px solid var(--border-hairline);
}
.gallery-item svg{ width:100%; display:block; }
.gallery-item .cap{
    position:absolute; inset:auto 0 0 0; padding:.9rem 1rem;
    background:linear-gradient(0deg, rgba(10,20,15,0.85), transparent);
    color:var(--ivory-50); font-size:.78rem; opacity:0; transition:opacity .3s;
}
.gallery-item:hover .cap{ opacity:1; }

/* ---------- Visitor info / Donate CTA ---------- */
.info-strip{
    display:grid; gap:1.6rem;
    grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
}
.info-item{ padding:1.6rem 0; border-top:1px solid var(--border-hairline); }
.info-item h4{ font-size:1rem; margin-bottom:.5rem; display:flex; align-items:center; gap:.6rem; }
/*.info-item p{ font-size:.85rem; color:var(--text-muted); }*/

.donate-cta{
    background:linear-gradient(135deg, var(--forest-800), var(--forest-950));
    color:var(--ivory-50); border-radius:var(--radius-lg);
    padding:clamp(2.5rem,3vw,4rem); position:relative; overflow:hidden;
    text-align:center;
}
.donate-cta::before{
    content:""; position:absolute; inset:0;
    background-image:url('../images/emblem-pattern.svg'); background-size:100px; opacity:.1;
}
.donate-cta h2{ position:relative; font-size:var(--step-2); color:var(--ivory-50); margin-bottom:1rem; }
.donate-cta p{ position:relative; color:rgba(247,242,230,0.8);  margin-inline:auto 1.2rem; }
.donate-cta .btn{ position:relative; margin-top:1.6rem; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{
    background:var(--forest-950); color:rgba(247,242,230,0.75);
    position:relative; padding-top:3.4rem;
}
.footer-roof{ color:var(--forest-800); line-height:0; }
.footer-roof svg{ width:100%; height:70px; display:block; }
.footer-grid{
    display:grid; gap:2.4rem; padding-block:3rem 2.4rem;
    grid-template-columns:1.3fr repeat(3,1fr);
}
@media (max-width:900px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .footer-grid{ grid-template-columns:1fr; } }
.footer-brand .brand-text{ color:var(--ivory-50); }
.footer-brand p{ margin-top:1rem; font-size:.85rem; max-width:32ch; }
.footer-col h5{ font-family:var(--font-label); font-size:.75rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-300); margin-bottom:1.1rem; }
.footer-col a{ display:block; padding:.4rem 0; font-size:.88rem; color:rgba(247,242,230,0.72); transition:color .25s, padding-left .25s; }
.footer-col a:hover{ color:var(--gold-300); padding-left:.3rem; }
.footer-social{ display:flex; gap:.8rem; margin-top:1rem; }
.footer-social a{ width:36px; height:36px; border:1px solid rgba(247,242,230,0.25); border-radius:50%; display:grid; place-items:center; padding:0; }
.footer-social a:hover{ border-color:var(--gold-300); }
.footer-bottom{
    border-top:1px solid rgba(247,242,230,0.12);
    padding-block:1.4rem; display:flex; flex-wrap:wrap; gap:1rem;
    justify-content:space-between; font-size:.78rem; color:rgba(247,242,230,0.55);
}

/* ==========================================================================
   Mobile Footer Link Grid (Like Screenshot)
   ========================================================================== */
@media (max-width: 768px) {
    .footer-col {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.8rem;
        margin-bottom: 0.5rem;
    }

    /* Make the heading span across both columns */
    .footer-col h5 {
        grid-column: 1 / -1;
        margin-bottom: 0.2rem;
    }

    /* Box styling for the links */
    .footer-col a {
        display: flex;
        align-items: center;
        gap: 0.6rem;
        padding: 0.8rem;
        background: rgba(247, 242, 230, 0.04); /* Subtle transparent ivory box */
        border: 1px solid rgba(247, 242, 230, 0.04);
        border-radius: var(--radius-sm);
        font-size: 0.82rem;
        line-height: 1.3;
        transition: background 0.3s, border-color 0.3s, color 0.3s;
    }

    /* Add the gold chevron icon */
    .footer-col a::before {
        content: "\203A"; /* Unicode right chevron › */
        color: var(--gold-500);
        font-size: 1.4rem;
        line-height: 0;
        margin-top: -3px;
        font-family: var(--font-display);
        flex: none;
    }

    /* Override the desktop padding-shift hover effect for these boxes */
    .footer-col a:hover {
        padding-left: 0.8rem;
        background: rgba(247, 242, 230, 0.08);
        border-color: rgba(201, 162, 39, 0.4); /* var(--border-gold) */
        color: var(--gold-300);
    }
}

/* Fallback to single column only on extremely tiny phones to prevent text squishing */
@media (max-width: 360px) {
    .footer-col {
        grid-template-columns: 1fr;
    }
}

/* ---------- Back to top ---------- */
.back-to-top{
    position:fixed; right:1.6rem; bottom:1.6rem; z-index:400;
    width:48px; height:48px; border-radius:50%;
    background:var(--bg-raised); color:var(--text-primary);
    border:1px solid var(--border-hairline); box-shadow:var(--shadow-card);
    display:grid; place-items:center;
    opacity:0; visibility:hidden; transform:translateY(10px);
    transition:opacity .35s, transform .35s, visibility .35s;
}
.back-to-top.is-visible{ opacity:1; visibility:visible; transform:translateY(0); }

/* ---------- Reveal-on-scroll ---------- */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease-silk), transform .8s var(--ease-silk); }
.reveal.is-visible{ opacity:1; transform:translateY(0); }
.reveal-stagger > *{ transition-delay:calc(var(--i,0) * 90ms); }

/* ==========================================================================
   INNER PAGE HERO (About / Contact / etc.) - Compact Version
   ========================================================================== */
.page-hero {
    position: relative;
    overflow: hidden;
    /* Made more compact: drastically reduced top and bottom padding */
    padding-top: 7rem;
    padding-bottom: 2.5rem;
    background: radial-gradient(120% 100% at 20% 0%, #244C36 0%, var(--forest-950) 55%, #0A1912 100%);
    color: var(--ivory-50);
}
.page-hero .bg-watermark { opacity: .18; }

.breadcrumb {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .8rem;
    color: rgba(247,242,230,0.65);
    position: relative;
    z-index: 1;
    flex-wrap: wrap; /* Prevents overflow on very narrow phones */
}
.breadcrumb a { color: rgba(247,242,230,0.85); }
.breadcrumb a:hover { color: var(--gold-300); }
.breadcrumb span { opacity: .5; }

.page-hero h1 {
    position: relative;
    z-index: 1;
    font-size: var(--step-2);
    color: var(--gold-500);
}

.page-hero p.lead {
    position: relative;
    z-index: 1;
    color: rgba(247,242,230,0.8);
    font-size: var(--step--1);
}

.page-hero-divider { position: absolute; left: 0; right: 0; bottom: 0; line-height: 0; z-index: 1; opacity: .5; }
.page-hero-divider svg { width: 100%; height: 40px; display: block; } /* Smoother, compact wave */

/* Mobile text scaling adjustments */
@media (max-width: 768px) {
    .page-hero {
        padding-top: 4.5rem;
        padding-bottom: 2rem;
    }
    .page-hero h1 {
        font-size: var(--step-2);
    }
    .page-hero p.lead {
        font-size: 0.75rem;
    }
}

/* ---------- In-page quick nav (jump links) ---------- */
.subnav{
    position:sticky; top:66px; z-index:80;
    background:var(--nav-bg); backdrop-filter:blur(14px);
    border-bottom:1px solid var(--border-hairline);
}
.subnav-track{
    display:flex; gap:1.8rem; overflow-x:auto; padding-block:1rem;
    scrollbar-width:none;
}
.subnav-track::-webkit-scrollbar{ display:none; }
.subnav-track a{
    white-space:nowrap; font-size:.85rem; font-weight:500; color:var(--text-secondary);
    padding-bottom:.3rem; border-bottom:2px solid transparent;
}
.subnav-track a:hover, .subnav-track a.is-active{ color:var(--accent-strong); border-color:var(--accent-strong); }

/* ---------- Mission / Vision paired cards ---------- */
.mv-grid{ display:grid; gap:1.6rem; }
@media (min-width:800px){ .mv-grid{ grid-template-columns:1fr 1fr; } }
.mv-card{
    padding:2.2rem; border-radius:var(--radius-lg);
    border:1px solid var(--border-hairline); background:var(--bg-raised);
    position:relative; overflow:hidden;
}
.mv-card .diamond-bullet{ width:22px; height:22px; margin-bottom:1.4rem; display:inline-block; }
.mv-card h3{ font-size:1.5rem; margin-bottom:.8rem; color: var(--forest-600);}
.mv-card p{ color:var(--text-secondary); font-size:.95rem; }

/* ---------- Architecture detail grid ---------- */
.arch-grid{
    display:grid; gap:1.2rem;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
}
.arch-item{
    padding:1.8rem; border-radius:var(--radius-md); background:var(--bg-sunken);
    border:1px solid var(--border-hairline);
}
.arch-item .icon-wrap{
    width:52px; height:52px; margin-bottom:1.2rem;
    display:grid; place-items:center;
    border:1.3px solid var(--accent-strong); border-radius:50%;
}
.arch-item h4{ font-size:1.1rem; margin-bottom:.5rem; }
.arch-item p{ font-size:.85rem; color:var(--text-muted); }

/* ---------- FAQ Accordion ---------- */
.faq-list{ max-width:760px; }
.faq-item{ border-bottom:1px solid var(--border-hairline); }
.faq-question{
    width:100%; display:flex; align-items:center; justify-content:space-between;
    padding:1.4rem 0; background:none; border:none; text-align:left;
    font-family:var(--font-display); font-size:1.15rem; color:var(--text-primary);
}
.faq-question .nav-caret{ transition:transform .3s; flex:none; margin-left:1rem; }
.faq-question[aria-expanded="true"] .nav-caret{ transform:rotate(225deg); }
.faq-answer{ max-height:0; overflow:hidden; transition:max-height .4s var(--ease-silk); }
.faq-answer.is-open{ max-height:300px; }
.faq-answer p{ padding-bottom:1.4rem; color:var(--text-secondary); font-size:.92rem; max-width:65ch; }

/* ---------- Map embed ---------- */
.map-embed{
    position:relative; border-radius:var(--radius-lg); overflow:hidden;
    aspect-ratio:16/10; border:1px solid var(--border-hairline); box-shadow:var(--shadow-card);
    filter:grayscale(0.15) contrast(1.02);
}
[data-theme="dark"] .map-embed{ filter:grayscale(.4) invert(.92) contrast(0.95) hue-rotate(180deg); }
.map-embed iframe{ width:100%; height:100%; border:0; display:block; }

/* ---------- Emergency contact list ---------- */
.emergency-list{ display:grid; gap:1rem; }
.emergency-item{
    display:flex; align-items:center; gap:1rem;
    padding:1rem 1.2rem; border-radius:var(--radius-md);
    background:var(--bg-sunken); border:1px solid var(--border-hairline);
}
.emergency-item .diamond-bullet{ background:var(--rust-500); border-color:var(--rust-500); }
.emergency-item strong{ display:block; font-size:.92rem; }
.emergency-item span{ font-size:.8rem; color:var(--text-muted); }

/* ---------- Form field helper (shared) ---------- */
.field{
    padding:.9rem 1.1rem; border:1px solid var(--border-hairline); border-radius:var(--radius-sm);
    background:var(--bg-raised); color:var(--text-primary); font-family:inherit; font-size:.92rem;
    width:100%;
}
.field:focus{ outline:none; border-color:var(--accent-strong); }
.field-row{ display:grid; gap:1rem; }
@media (min-width:600px){ .field-row.two-col{ grid-template-columns:1fr 1fr; } }

/* ==========================================================================
   GALLERY (dedicated page) — filters + albums
   ========================================================================== */
.gallery-filters{
    display:flex; flex-wrap:wrap; gap:.7rem; margin-bottom:2.4rem;
}
.gallery-filter-btn{
    padding:.6rem 1.3rem; border-radius:100px; border:1px solid var(--border-hairline);
    background:var(--bg-raised); color:var(--text-secondary); font-size:.85rem; font-weight:500;
    transition:all .3s var(--ease-silk);
}
.gallery-filter-btn:hover{ border-color:var(--accent-strong); color:var(--accent-strong); }
.gallery-filter-btn.is-active{ background:var(--forest-800); border-color:var(--forest-800); color:var(--ivory-50); }
[data-theme="dark"] .gallery-filter-btn.is-active{ background:var(--gold-500); border-color:var(--gold-500); color:var(--forest-950); }
.gallery-item[hidden]{ display:none; }
.gallery-item .cat-tag{
    position:absolute; top:.8rem; left:.8rem; z-index:2;
    font-size:.62rem; letter-spacing:.1em; text-transform:uppercase;
    padding:.3rem .6rem; border-radius:100px;
    background:rgba(14,37,28,0.75); color:var(--ivory-50);
    opacity:0; transition:opacity .3s;
}
.gallery-item:hover .cat-tag{ opacity:1; }

.video-card{
    position:relative; border-radius:var(--radius-md); overflow:hidden; aspect-ratio:16/9;
    border:1px solid var(--border-hairline); cursor:pointer;
}
.video-card svg{ width:100%; height:100%; display:block; }
.video-card .play-btn{
    position:absolute; inset:0; display:grid; place-items:center;
}
.video-card .play-btn span{
    width:56px; height:56px; border-radius:50%; background:rgba(247,242,230,0.9);
    display:grid; place-items:center; color:var(--forest-950);
    transition:transform .3s var(--ease-silk);
}
.video-card:hover .play-btn span{ transform:scale(1.1); }

/* ==========================================================================
   EVENTS
   ========================================================================== */
.event-tabs{ display:flex; gap:.6rem; margin-bottom:2.2rem; }
.event-tab{
    padding:.7rem 1.4rem; border-radius:100px; border:1px solid var(--border-hairline);
    background:var(--bg-raised); color:var(--text-secondary); font-size:.88rem; font-weight:500;
}
.event-tab.is-active{ background:var(--forest-800); border-color:var(--forest-800); color:var(--ivory-50); }
[data-theme="dark"] .event-tab.is-active{ background:var(--gold-500); border-color:var(--gold-500); color:var(--forest-950); }

.event-card{
    display:grid; grid-template-columns:110px 1fr; gap:1.4rem;
    padding:1.4rem; border-radius:var(--radius-md); background:var(--bg-raised);
    border:1px solid var(--border-hairline); margin-bottom:1.2rem;
    transition:box-shadow .3s, transform .3s;
}
.event-card:hover{ box-shadow:var(--shadow-card); transform:translateY(-3px); }
.event-date-block{
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    background:var(--bg-sunken); border-radius:var(--radius-sm); padding:.8rem;
    text-align:center;
}
.event-date-block strong{ font-family:var(--font-display); font-size:1.8rem; color:var(--accent-strong); line-height:1; }
.event-date-block span{ font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text-muted); margin-top:.3rem; }
.event-body h4{ font-size:1.15rem; margin-bottom:.4rem; }
.event-body p{ font-size:.85rem; color:var(--text-muted); margin-bottom:.8rem; }
.event-meta{ display:flex; flex-wrap:wrap; gap:1rem; font-size:.78rem; color:var(--text-muted); margin-bottom:.8rem; }
.event-meta span{ display:flex; align-items:center; gap:.4rem; }
.event-card.is-past{ opacity:.65; }
.event-card.is-past .event-date-block strong{ color:var(--text-muted); }

.countdown{ display:flex; gap:1rem; margin:2rem 0; }
.countdown-unit{ text-align:center; }
.countdown-unit strong{ display:block; font-family:var(--font-display); font-size:var(--step-2); color:var(--gold-300); }
.countdown-unit span{ font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:rgba(247,242,230,0.6); }

/* ==========================================================================
   COMMITTEE
   ========================================================================== */
.committee-grid{
    display:grid; gap:1.6rem;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
}
.committee-card{
    text-align:center; padding:2rem 1.4rem; border-radius:var(--radius-md);
    background:var(--bg-raised); border:1px solid var(--border-hairline);
}
.committee-avatar{
    width:84px; height:84px; border-radius:50%; margin:0 auto 1.2rem;
    background:linear-gradient(155deg,var(--forest-700),var(--forest-950));
    display:grid; place-items:center; border:2px solid var(--border-gold);
}
.committee-avatar svg{ width:36px; height:36px; }
.committee-card h4{ font-size:1.1rem; margin-bottom:.2rem; }
.committee-card span.role{ font-size:.78rem; color:var(--accent-strong); letter-spacing:.06em; text-transform:uppercase; }
.committee-card p{ font-size:.82rem; color:var(--text-muted); margin-top:.7rem; }

/* ==========================================================================
   PUBLICATIONS
   ========================================================================== */
.pub-list{ display:flex; flex-direction:column; gap:1rem; }
.pub-card{
    display:flex; align-items:center; gap:1.4rem; flex-wrap:wrap;
    padding:1.4rem 1.6rem; border-radius:var(--radius-md); background:var(--bg-raised);
    border:1px solid var(--border-hairline);
}
.pub-icon{
    flex:none; width:52px; height:66px; border-radius:4px;
    background:linear-gradient(155deg,var(--forest-700),var(--forest-950));
    display:grid; place-items:center; border:1px solid var(--border-gold);
}
.pub-body{ flex:1; min-width:200px; }
.pub-body h4{ font-size:1.05rem; margin-bottom:.3rem; }
.pub-body span{ font-size:.78rem; color:var(--text-muted); }
.pub-card .btn{ flex:none; }

/* ==========================================================================
   BLOG
   ========================================================================== */
.blog-grid{
    display:grid; gap:1.6rem;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
}
.blog-card{
    border-radius:var(--radius-md); overflow:hidden; background:var(--bg-raised);
    border:1px solid var(--border-hairline); transition:transform .35s var(--ease-silk), box-shadow .35s;
}
.blog-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-card); }
.blog-card-media{ aspect-ratio:16/10; position:relative; }
.blog-card-media svg{ width:100%; height:100%; }
.blog-card-body{ padding:1.4rem 1.5rem 1.6rem; }
.blog-card-body span.tag{ font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--accent-strong); }
.blog-card-body h4{ font-size:1.2rem; margin:.5rem 0 .5rem; }
.blog-card-body p{ font-size:.85rem; color:var(--text-muted); margin-bottom:.9rem; }
.blog-card-body .meta{ font-size:.75rem; color:var(--text-muted); display:flex; gap:.8rem; }
.blog-filters{ display:flex; flex-wrap:wrap; gap:.7rem; margin-bottom:2.2rem; }

/* ==========================================================================
   DONATE
   ========================================================================== */
.donate-purpose-grid{
    display:grid; gap:1.4rem;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
}
.donate-purpose-card{
    padding:1.8rem; border-radius:var(--radius-md); background:var(--bg-sunken);
    border:1px solid var(--border-hairline);
}
.donate-purpose-card .icon-wrap{
    width:48px; height:48px; margin-bottom:1.1rem;
    border:1.3px solid var(--accent-strong); border-radius:50%;
    display:grid; place-items:center;
}
.donate-purpose-card h4{ font-size:1.05rem; margin-bottom:.5rem; }
.donate-purpose-card p{ font-size:.85rem; color:var(--text-muted); }

.bank-details{
    border-radius:var(--radius-md); border:1px solid var(--border-hairline);
    background:var(--bg-raised); padding:1.8rem 2rem;
}
.bank-details dl{ display:grid; grid-template-columns:auto 1fr; gap:.6rem 1.4rem; margin:0; }
.bank-details dt{ font-size:.78rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:.06em; }
.bank-details dd{ margin:0; font-size:.92rem; font-weight:500; }

.qr-placeholder{
    width:150px; height:150px; border-radius:var(--radius-sm); flex:none;
    background:
        repeating-linear-gradient(0deg, var(--text-primary) 0 4px, transparent 4px 8px),
        repeating-linear-gradient(90deg, var(--text-primary) 0 4px, transparent 4px 8px);
    background-blend-mode:multiply;
    background-color:var(--bg-raised);
    border:8px solid var(--bg-raised);
    outline:1px solid var(--border-hairline);
    position:relative;
}
.qr-placeholder::before{
    content:"QR"; position:absolute; inset:0; display:grid; place-items:center;
    font-family:var(--font-label); font-size:.75rem; letter-spacing:.1em;
    background:var(--bg-raised); color:var(--text-muted); width:46px; height:46px; margin:auto;
    border:1px solid var(--border-hairline);
}

.donate-tiers{ display:grid; gap:1.2rem; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); margin:2rem 0; }
.donate-tier{
    padding:1.4rem 1rem; text-align:center; border-radius:var(--radius-md);
    border:1px solid var(--border-hairline); background:var(--bg-raised); cursor:pointer;
    transition:border-color .25s, transform .25s;
}
.donate-tier:hover{ transform:translateY(-3px); }
.donate-tier.is-selected{ border-color:var(--accent-strong); background:var(--accent-soft); }
.donate-tier strong{ display:block; font-family:var(--font-display); font-size:1.5rem; color:var(--accent-strong); }
.donate-tier span{ font-size:.75rem; color:var(--text-muted); }

/* ==========================================================================
   MEMBERSHIP
   ========================================================================== */
.membership-grid{ display:grid; gap:1.6rem; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
.membership-card{
    padding:2.2rem 1.8rem; border-radius:var(--radius-lg); background:var(--bg-raised);
    border:1px solid var(--border-hairline); position:relative;
}
.membership-card.is-featured{ border-color:var(--accent-strong); box-shadow:var(--shadow-card); }
.membership-card.is-featured::before{
    content:"Most Common"; position:absolute; top:-.8rem; left:50%; transform:translateX(-50%);
    background:var(--accent-strong); color:var(--forest-950); font-size:.65rem; letter-spacing:.08em;
    text-transform:uppercase; padding:.35rem .9rem; border-radius:100px; font-weight:600;
}
.membership-card h3{ font-size:1.3rem; margin-bottom:.4rem; }
.membership-card .price{ font-family:var(--font-display); font-size:var(--step-2); color:var(--accent-strong); margin-bottom:1.2rem; }
.membership-card ul{ display:flex; flex-direction:column; gap:.7rem; margin-bottom:1.6rem; }
.membership-card li{ display:flex; gap:.6rem; font-size:.88rem; color:var(--text-secondary); }
.membership-card li::before{ content:""; width:6px; height:6px; margin-top:.45rem; flex:none; background:var(--accent-strong); transform:rotate(45deg); }

/* ---------- Counter ---------- */
.count-up{ font-variant-numeric:tabular-nums; }

/* ==========================================================================
   Sticky Left Sidebar (Map & WhatsApp Group)
   ========================================================================== */
.sticky-sidebar-group {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 850;
    display: flex;
    flex-direction: column;
    gap: 0.5rem; /* Space between the two buttons */
}

.sticky-side-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
    padding: .5rem 0.2rem;
    border-radius: var(--radius-md) 0 0 var(--radius-md) ;
    box-shadow: var(--shadow-card);
    border: 1px solid var(--border-hairline);
    border-left: none;
    text-decoration: none;
    transition: transform 0.3s var(--ease-silk), filter 0.3s;
}

.sticky-side-btn:hover {
    transform: translateX(0);
    filter: brightness(1.1);
}

/* Base Gradients & Colors */
.map-btn {
    background: linear-gradient(155deg, var(--forest-700), var(--forest-950));
    color: var(--ivory-50);
}

.wa-btn {
    /* WhatsApp brand gradient */
    background: linear-gradient(155deg, #48c371, #128c7e);
    color: #ffffff;
    border-color: #128c7e;
}

/* Dark Theme Overrides (Map button adapts; WA stays green) */
[data-theme="dark"] .map-btn {
    background: linear-gradient(155deg, var(--gold-300), var(--gold-600));
    color: var(--forest-950);
    border-color: var(--border-gold);
}

/* Vertical Text Orientation */
.sticky-text {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    text-align: left;
}

.sticky-text strong {
    display: block;
    font-family: var(--font-display);
    font-size: .7rem;
    letter-spacing: 0.05em;
    line-height: 1.2;
}

.sticky-text span {
    display: block;
    font-size: 0.7rem;
    opacity: 0.9;
    margin-right: 4px;
}

.sticky-side-btn i {
    font-size: 1rem;
    line-height: 1;
}

/* Mobile & Small Screen Optimization (Aggressively Shrinks Buttons) */
@media (max-width: 768px) {
    .sticky-sidebar-group {
        gap: 0.3rem;
    }

    .sticky-side-btn {
        padding: 0.7rem 0.35rem; /* Drastically reduced padding */
        gap: 0.4rem;
        border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    }

    .sticky-text strong {
        font-size: 0.85rem;
    }

    .sticky-text span {
        font-size: 0.65rem;
    }

    .sticky-side-btn i {
        font-size: 1.2rem;
    }
}

/* Even smaller for tiny phone screens under 400px */
@media (max-width: 400px) {
    .sticky-side-btn {
        padding: 0.6rem 0.25rem;
    }

    .sticky-text strong {
        font-size: 0.75rem;
    }

    .sticky-text span {
        font-size: 0.6rem;
    }

    .sticky-side-btn i {
        font-size: 1.1rem;
    }
}

/* ==========================================================================
   Custom Donate Button (.mangkhim_donate) - Themed
   ========================================================================== */
.mangkhim_donate {
    cursor: pointer;
    font-size: 1rem;
    font-family: var(--font-body);
    font-weight: 600;
    border-radius: 16px;
    border: none;
    padding: 2px;
    /* Outer glow ring mapped to Gold and Deep Forest */
    background: radial-gradient(circle 80px at 80% -10%, var(--gold-500), var(--forest-950));
    position: relative;
    display: inline-flex;
    text-decoration: none;
    transition: transform 0.3s var(--ease-silk);
}

.mangkhim_donate:hover {
    transform: translateY(-2px);
}

.mangkhim_donate::after {
    content: "";
    position: absolute;
    width: 65%;
    height: 60%;
    border-radius: 120px;
    top: 0;
    right: 0;
    /* Replaced harsh white shadow with a soft gold glow */
    box-shadow: 0 0 20px rgba(var(--gold-500-rgb), 0.3);
    z-index: -1;
}

.mangkhim_donate .blob1 {
    position: absolute;
    width: 70px;
    height: 100%;
    border-radius: 16px;
    bottom: 0;
    left: 0;
    /* Replaced cyan/blue blob with a bright gold-to-transparent fade */
    background: radial-gradient(
        circle 60px at 0% 100%,
        var(--gold-300),
        rgba(var(--gold-500-rgb), 0.6),
        transparent
    );
    box-shadow: -10px 10px 30px rgba(var(--gold-500-rgb), 0.2);
}

.mangkhim_donate .inner {
    padding: 10px 20px;
    border-radius: 14px;
    color: var(--ivory-50);
    z-index: 3;
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    /* Main button face mapped to Deep Forest gradient */
    background: radial-gradient(circle 80px at 80% -50%, var(--forest-700), var(--forest-950));
}

/* Color the Bootstrap icon in gold to make it pop */
.mangkhim_donate .inner i {
    color: var(--gold-300);
}

.mangkhim_donate .inner::before {
    content: "";
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    border-radius: 14px;
    /* Subtle glassy overlay mapped to transparent gold */
    background: radial-gradient(
        circle 60px at 0% 100%,
        rgba(var(--gold-300-rgb), 0.15),
        rgba(var(--gold-500-rgb), 0.1),
        transparent
    );
    position: absolute;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    .mangkhim_donate .inner {
        padding: 8px 16px;
        font-size: 0.85rem;
    }
}

@media (max-width: 480px) {
    .site-header .nav-cta .mangkhim_donate .inner {
        padding: 6px 12px;
        font-size: 0.75rem;
        gap: 0.3rem;
    }
    .site-header .nav-cta .mangkhim_donate .inner i {
        font-size: 0.85rem;
    }
}

.hero-custom-nav {
    display: inline-flex;
    align-items: center;
    background: var(--forest-950);
    padding: 8px 16px;
    border-radius: 50px;
    gap: 16px;
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
}

.hero-custom-nav .hero-prev,
.hero-custom-nav .hero-next {
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.3s ease;
}

.hero-custom-nav .hero-prev:hover,
.hero-custom-nav .hero-next:hover {
    color: var(--gold-300);
}

.hero-custom-nav .hero-pagination {
    display: flex;
    align-items: center;
    gap: 8px;
}

.hero-custom-nav .swiper-pagination-bullet {
    width: 6px !important;
    height: 6px !important;
    background: #555555 !important;
    opacity: 1 !important;
    margin: 0 !important;
    border-radius: 50% !important;
    transition: all 0.3s ease !important;
    cursor: pointer;
    display: block;
}

.hero-custom-nav .swiper-pagination-bullet:hover {
    background: #888888 !important;
}

.hero-custom-nav .swiper-pagination-bullet-active {
    background: var(--gold-600) !important;
    width: 22px !important;
    border-radius: 10px !important;
    opacity: 1 !important;
}
.read-more-inline {
    color: var(--accent-strong);
    font-weight: 600;
    font-size: 0.9em;
    margin-left: 0.4rem;
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    text-decoration: none;
    transition: color 0.3s var(--ease-silk);
}

.read-more-inline i {
    transition: transform 0.3s var(--ease-silk);
    font-size: 0.95em;
}

/* Hover effects */
.read-more-inline:hover {
    color: var(--forest-700);
}

/* Smooth arrow slide on hover */
.read-more-inline:hover i {
    transform: translateX(4px);
}

/* Dark Theme Support */
[data-theme="dark"] .read-more-inline:hover {
    color: var(--gold-300);
}