/* Mountain Glory Adventure — public site styles
   Tailwind handles utility styling; this file holds the few bespoke
   touches Tailwind doesn't cover well: custom scrollbar, prose tuning
   for WYSIWYG content, and the prayer-flag accent strip. */

:root {
    /* Apple-style palette: neutral whites/grays + single blue accent.
       --c-stone / --c-gold: Apple's secondary-text grey (~5:1 contrast
       on white, passes WCAG AA). The earlier #86868b was 3.39:1 and
       failed accessibility on light backgrounds. */
    --c-red:    #0071e3;
    --c-deep:   #0077ed;
    --c-gold:   #6e6e73;
    --c-cream:  #f5f5f7;
    --c-paper:  #ffffff;
    --c-ink:    #1d1d1f;
    --c-stone:  #6e6e73;
}

html { scroll-behavior: smooth; }

::selection { background: var(--c-gold); color: var(--c-deep); }

/* ─── Tailwind utility fallbacks ────────────────────────────────
   These classes are used by the white footer + a few one-off
   accents but didn't end up in the built tailwind.css (added
   after the last build). Re-running `npm run build:css` will
   pick them up naturally and these declarations become harmless
   duplicates — they only exist so production renders correctly
   without forcing a CSS rebuild step on every content tweak. */
.bg-brand-ink\/5      { background-color: rgba(29, 29, 31, 0.05); }
.hover\:bg-brand-ink:hover { background-color: rgb(29, 29, 31); }
.border-brand-ink\/10 { border-color: rgba(29, 29, 31, 0.10); }

/* ─── Frosted-glass pill (floating dock nav) ────────────────────
   Translucent white plus a backdrop blur — content behind the
   pill stays faintly visible through a saturated frosted layer,
   so the dock is unambiguously a floating UI element rather than
   a flat white shape sitting on a flat white page. The layered
   shadow (a soft long-range drop + a tight contact shadow) and
   the 1px highlight ring give it real lift; works on both bright
   photo sections and pure-white scrolled sections without
   needing per-page tuning. */
.glass-pill {
    background: rgba(255, 255, 255, 0.65);
    -webkit-backdrop-filter: saturate(180%) blur(22px);
            backdrop-filter: saturate(180%) blur(22px);
    border: 1px solid rgba(255, 255, 255, 0.55);
    box-shadow:
        0 14px 40px -10px rgba(0, 0, 0, 0.18),
        0 2px 6px rgba(0, 0, 0, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
/* When backdrop-filter isn't supported (older Firefox/UC, some
   Android WebViews), drop the blur and fall back to a more
   opaque white so the pill never becomes too transparent. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .glass-pill { background: rgba(255, 255, 255, 0.94); }
}

/* Hero overlay — strong top vignette so the white nav and eyebrow
   read on any photo (snow, sky, light dzong walls), plus bottom
   darkening for the title/CTAs. The top band stays meaningfully
   dark for the first ~20% then fades; bright photos can no longer
   wash out the navigation. */
.hero-overlay {
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.55) 0%,
        rgba(0, 0, 0, 0.30) 12%,
        transparent 32%,
        transparent 50%,
        rgba(26, 26, 26, 0.55) 100%
    );
}

/* Slim accent strip used on hero/footer transitions —
   muted to a subtle Apple-grey gradient so it disappears
   into a clean line rather than reading as decoration. */
.prayer-flag-strip {
    height: 1px;
    background: linear-gradient(to right,
        #d2d2d7 0%,
        #86868b 50%,
        #d2d2d7 100%
    );
}

/* WYSIWYG-rendered content. Keeps things readable and matches the
   editor's surface so admins see something close to the live result. */
.prose-mga {
    color: var(--c-ink);
    line-height: 1.75;
    font-size: 1.0625rem;
}
.prose-mga > * + * { margin-top: 1.1em; }
.prose-mga h2 {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 1.875rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--c-ink);
    margin-top: 2em;
}
.prose-mga h3 {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 1.375rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.015em;
    color: var(--c-ink);
    margin-top: 1.7em;
}
.prose-mga p { font-size: 1.0625rem; }
.prose-mga a { color: var(--c-red); text-decoration: underline; text-underline-offset: 3px; }
.prose-mga a:hover { color: var(--c-deep); }
.prose-mga ul, .prose-mga ol { padding-left: 1.4em; }
.prose-mga ul { list-style: disc; }
.prose-mga ol { list-style: decimal; }
.prose-mga li + li { margin-top: 0.4em; }
.prose-mga blockquote {
    border-left: 3px solid var(--c-gold);
    padding: 0.4em 1.2em;
    color: var(--c-stone);
    font-style: italic;
    background: rgba(201, 152, 70, 0.06);
}

/* FAQ accordion — native <details>/<summary> styled to look like a
   clean expand/collapse list. Used on the FAQ page; works on any
   prose body that uses these elements. */
.prose-mga details {
    border-bottom: 1px solid #e8e8ec;
    margin: 0;
}
.prose-mga details + details { margin-top: 0; }
.prose-mga details:first-of-type { border-top: 1px solid #e8e8ec; }
.prose-mga summary {
    cursor: pointer;
    list-style: none;
    padding: 22px 40px 22px 0;
    font-size: 1.0625rem;
    font-weight: 500;
    color: var(--c-ink);
    position: relative;
    transition: color 0.2s ease;
}
.prose-mga summary:hover { color: var(--c-red); }
.prose-mga summary::-webkit-details-marker { display: none; }
.prose-mga summary::marker { content: ''; }
.prose-mga summary::after {
    content: '';
    position: absolute;
    right: 4px;
    top: 50%;
    width: 10px;
    height: 10px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-75%) rotate(45deg);
    transition: transform 0.25s ease;
}
.prose-mga details[open] summary::after {
    transform: translateY(-25%) rotate(-135deg);
}
.prose-mga details > p,
.prose-mga details > ul,
.prose-mga details > ol {
    margin-top: 0;
    padding-bottom: 22px;
    color: var(--c-stone);
}

/* Section headings within the FAQ should sit a bit looser */
.prose-mga h2 + details:first-of-type { border-top: 1px solid #e8e8ec; }
.prose-mga img {
    border-radius: 6px;
    width: 100%;
    height: auto;
    margin: 2em 0;
}
.prose-mga hr { border: 0; border-top: 1px solid #E8E0CE; margin: 2em 0; }
.prose-mga table { width: 100%; border-collapse: collapse; }
.prose-mga th, .prose-mga td { border: 1px solid #E8E0CE; padding: .6em .8em; }
.prose-mga th { background: var(--c-cream); font-weight: 600; }

/* Logo keeps its original SVG colors everywhere. The logo SVG uses
   near-black fills, so over dark surfaces (photo heroes, the dark
   floating-dock pill) we sit it on a translucent white plate — the
   wordmark stays its original colour and reads cleanly. content-box
   sizing keeps `h-12` / `h-7` driving the SVG height, with padding
   adding the plate around it. */
#site-header .site-logo,
#floating-dock img {
    background: #ffffff;
    padding: 4px;
    border-radius: 9999px;
    box-sizing: content-box;
    aspect-ratio: 1 / 1;
    object-fit: contain;
}
.hero-mode #site-header .site-logo {
    background: rgba(255, 255, 255, 0.92);
}

/* When the header sits over a hero image, links read as white. */
.hero-mode #site-header .nav-links a:not(.bg-brand-red),
.hero-mode #site-header .nav-links button {
    color: #ffffff;
    /* Soft drop shadow gives extra contrast on busy / mid-tone photos
       where the top vignette alone might not be enough. */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}
.hero-mode #site-header .nav-links a:not(.bg-brand-red):hover,
.hero-mode #site-header .nav-links button:hover { color: var(--c-red); }
.hero-mode #site-header .site-brand { color: #ffffff; }
.hero-mode #site-header .site-tagline { color: rgba(255, 255, 255, 0.7); }
.hero-mode #site-header #menu-toggle { color: #ffffff; }

/* Card hover treatment */
.card-shadow {
    box-shadow: 0 4px 20px -8px rgba(26, 26, 26, 0.15);
    transition: transform 200ms ease, box-shadow 200ms ease;
}
.card-shadow:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px -10px rgba(26, 26, 26, 0.25);
}

/* The admin link in the footer for staff convenience */
.admin-link { opacity: 0.4; transition: opacity 200ms; }
.admin-link:hover { opacity: 1; }

/* ─── GSAP animation prep ──────────────────────────────────
   Pre-hide above-the-fold hero elements so they don't flash
   before JS animates them in. Gated by .js so non-JS users
   still see content. */
.js [data-hero] h1,
.js [data-hero] [data-eyebrow],
.js [data-hero] [data-subtitle],
.js [data-hero] a.rounded-full,
.js [data-hero-card] {
    opacity: 0;
    will-change: transform, opacity;
}

/* Page-load curtain — an iris reveal. A 0×0 circular element at the
   centre carries an enormous box-shadow that paints the rest of the
   viewport dark; as JS grows its width/height, the hole expands and
   the shadow is pushed off-screen. */
.js .page-curtain {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: transparent;
    box-shadow: 0 0 0 100vmax var(--c-ink);
    transform: translate(-50%, -50%);
    z-index: 200;
    pointer-events: none;
}

/* Mega menu — two display variants chosen by JS via data-variant.
   FULL: edge-to-edge banner under the original header.
   COMPACT: floating rounded pill under the dock. */
#mega-menu[data-variant="full"] {
    width: 100vw;
    background: var(--c-paper);
    border-bottom: 1px solid var(--c-cream);
    box-shadow: 0 30px 60px -25px rgba(0, 0, 0, 0.18);
}
#mega-menu[data-variant="full"] .mega-inner {
    max-width: 80rem;
    margin: 0 auto;
    padding: 0 1.5rem;
}
@media (min-width: 1024px) {
    #mega-menu[data-variant="full"] .mega-inner { padding: 0 2.5rem; }
}

#mega-menu[data-variant="compact"] {
    width: min(960px, calc(100vw - 3rem));
    background: var(--c-paper);
    border: 1px solid var(--c-cream);
    border-radius: 1rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.2);
    overflow: hidden;
}

/* About-Bhutan tilted snap — pre-hide so the image doesn't flash
   in its final upright state before JS animates it. Reduced-motion
   override below keeps it visible if the script doesn't run. */
.js [data-tilt-snap] { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
    .js [data-tilt-snap] { opacity: 1 !important; transform: none !important; }
}

/* Card image ink-reveal — two layered SVG paths injected by JS sit
   on top of the image. They draw thick on scroll-in (covering the
   image), then retract (revealing it). */
.ink {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1.5);
    width: 100%;
    height: 100%;
    pointer-events: none;
}
.ink svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}
.ink-path { fill: none; }

/* Floating dock — hidden until the morph scrub brings it in on scroll.
   Default state is non-interactive so the invisible dock items can't
   intercept clicks meant for the header beneath them at narrower
   desktop widths where the two horizontally overlap. */
.js #floating-dock { opacity: 0; pointer-events: none; }
.js #floating-dock > * { pointer-events: none; }
.js #floating-dock.is-shown,
.js #floating-dock.is-shown > * { pointer-events: auto; }
@media (prefers-reduced-motion: reduce) {
    .js #floating-dock { opacity: 1 !important; transform: none !important; }
}

/* WhatsApp floating action button */
.whatsapp-fab {
    box-shadow: 0 8px 24px rgba(37, 211, 102, 0.35);
    transition: transform .25s ease, box-shadow .25s ease, background-color .2s ease;
}
.whatsapp-fab:hover { transform: translateY(-2px) scale(1.04); }
.whatsapp-fab:active { transform: translateY(0) scale(0.98); }

/* Word-split spans */
.anim-word {
    display: inline-block;
    will-change: transform, opacity;
}

/* Split-hero: hide front halves when JS is absent so the
   behind image + cards aren't trapped under a static cover. */
[data-split-front] { display: none; }
.js [data-split-front] { display: block; }

/* Day-by-day itinerary accordion — strip the browser's default
   disclosure triangle so the custom chevron in the summary reads
   cleanly. The rest of the styling is Tailwind in the view. */
.itinerary-acc summary { list-style: none; }
.itinerary-acc summary::-webkit-details-marker { display: none; }
.itinerary-acc summary::marker { content: ''; }

/* Horizontal scroll strip for the hero reveal cards — hide the
   scrollbar (still scrolls via wheel / trackpad / touch / drag) so
   the row reads as a clean rail of cards over the hero photo. */
.hero-cards-scroll {
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}
.hero-cards-scroll::-webkit-scrollbar { display: none; }

/* ─── Mobile: neutralise the split-hero diagonal effect ────
   The Zoox-style diagonal split + GSAP scroll-pin doesn't read
   well on narrow vertical screens and interferes with mobile
   scrolling. Below `lg`, collapse the two diagonal halves into
   one full-coverage image, hide the "Three journeys" overlay
   layers (rendered as a regular section beneath the hero
   instead — see home/index.php). */
@media (max-width: 1023px) {
    [data-split-hero] [data-split-heading-wrap],
    [data-split-hero] [data-split-cards] {
        display: none !important;
    }
    [data-split-hero] [data-split-half-tl] {
        clip-path: none !important;
        transform: none !important;
    }
    [data-split-hero] [data-split-half-br] {
        display: none !important;
    }
}

/* ─── Mobile: header is fixed so the hamburger is always
   accessible. Transparent while over the hero, opaque (white +
   blur) once the user has scrolled past it. JS toggles the
   `.header-scrolled` class. Desktop keeps the original
   `absolute` positioning + floating-dock pattern. */
@media (max-width: 1023px) {
    /* Lift the mobile header above the page-load curtain (z-200)
       so the hamburger is visible immediately, before the iris
       reveal finishes. Pin opacity/visibility against any errant
       inline styles a GSAP timeline might have set.

       The primary header stays fully transparent over the hero —
       only the white hamburger + drop-shadow reads at the top.
       The frosted-glass treatment lives on the dropdown menu
       (see bindNav in site.js) so it appears as a distinct panel
       when opened. */
    #site-header {
        z-index: 300;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
    }

    /* Hamburger is always white over the hero. We decouple from the
       .hero-mode class because that class is set by an inline script
       inside the view body — meaning there's a flash of dark icon
       before it applies. Every public page has a dark-overlaid hero
       at top, so default-white is the right baseline.

       Also pin opacity/visibility against any errant inline styles
       a GSAP timeline might have set on the header chain before we
       gated those animations to desktop. */
    #site-header #menu-toggle {
        color: var(--c-ink, #1d1d1f);
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        display: inline-flex !important;
    }
    #site-header.header-scrolled #menu-toggle {
        color: var(--c-ink, #1d1d1f);
    }

    #site-header.header-scrolled {
        background: rgba(255, 255, 255, 0.96);
        backdrop-filter: saturate(180%) blur(10px);
        -webkit-backdrop-filter: saturate(180%) blur(10px);
        box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
    }
    .hero-mode #site-header.header-scrolled .site-logo {
        background: transparent;
    }
}

/* ─── Mobile menu dropdown: white panel ────────────────────
   Links inside #mobile-menu read on the opaque white background
   JS applies in bindNav. Each row gets a hairline divider. The
   Contact link is the call-to-action — styled as a pill button. */
.mobile-nav-link {
    display: block;
    padding: 11px 0;
    font-size: 15px;
    color: rgba(29, 29, 31, 0.85);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    transition: color 150ms ease;
}
.mobile-nav-link:last-child {
    border-bottom: 0;
}
.mobile-nav-link:hover,
.mobile-nav-link:active {
    color: var(--c-ink, #1d1d1f);
}
.mobile-nav-link-cta {
    margin-top: 10px;
    padding: 12px 24px;
    border-radius: 9999px;
    background: var(--c-red, #0071e3);
    color: #ffffff;
    text-align: center;
    border: 0 !important;
}
.mobile-nav-link-cta:hover,
.mobile-nav-link-cta:active {
    background: var(--c-deep, #0077ed);
    color: #ffffff;
}

/* ─── Hamburger button: two-line → X morph ─────────────────
   Two horizontal bars that rotate to form a cross when the
   button's aria-expanded flips to "true" (toggled by site.js
   when the mobile menu opens). Subtle drop-shadow keeps the
   bars legible over bright hero photography.

   On mobile (<lg) the button is pinned `position: fixed` at the
   top-right corner of the viewport — fully decoupled from the
   header element so nothing in the header DOM / animation chain
   can hide it. The mobile menu (`#mobile-menu`) still lives
   inside `#site-header` because the header is itself fixed at
   `top: 0`, so the menu drops down from the same visual anchor. */
@media (max-width: 1023px) {
    .menu-toggle-btn {
        position: fixed !important;
        top: 22px;
        right: 16px;
        z-index: 9999 !important;
        color: var(--c-ink, #1d1d1f);
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        display: inline-flex !important;
    }
    /* When the page has been scrolled and the header gained its
       opaque white background, flip the bars to dark so they read
       on the new background. The button isn't inside .header-
       scrolled (it's fixed outside the header), so we mirror the
       state via a class toggled by JS in lockstep. */
    .menu-toggle-btn.is-on-scrolled .menu-icon-bar {
        background: var(--c-ink, #1d1d1f);
        filter: none;
    }
}
.menu-toggle-btn {
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.menu-icon {
    position: relative;
    width: 24px;
    height: 16px;
    display: block;
    pointer-events: none;
}
.menu-icon-bar {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    transition: top 220ms ease, transform 220ms ease;
    transform-origin: center;
}
/* Over the hero photo the bars are white — add a dark halo so they
   stay legible on bright photography. Default (non-hero) pages have
   black bars over white/light surfaces, no halo needed. */
.hero-mode .menu-icon-bar {
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
}
.menu-icon-bar-top    { top: 2px; }
.menu-icon-bar-bottom { top: 12px; }

/* Open state: the two bars cross at the centre to form an X.
   Both translate to the middle (top: 7px) then rotate ±45°.
   Also flip the bars dark — the dropdown panel underneath is white,
   so the over-hero white bars would otherwise vanish. */
#menu-toggle[aria-expanded="true"] .menu-icon-bar-top {
    top: 7px;
    transform: rotate(45deg);
}
#menu-toggle[aria-expanded="true"] .menu-icon-bar-bottom {
    top: 7px;
    transform: rotate(-45deg);
}
#menu-toggle[aria-expanded="true"] .menu-icon-bar {
    background: var(--c-ink, #1d1d1f) !important;
    filter: none !important;
}

/* When the header has acquired its frosted white scrolled bg,
   the bars no longer need the dark drop-shadow. */
#site-header.header-scrolled .menu-icon-bar {
    filter: none;
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
    .js [data-hero] h1,
    .js [data-hero] [data-eyebrow],
    .js [data-hero] [data-subtitle],
    .js [data-hero] a.rounded-full,
    .js [data-hero-card] {
        opacity: 1 !important;
        transform: none !important;
    }
    .js [data-split-front] { display: none; }
    .js .page-curtain { display: none; }
}

/* ─── About Bhutan: pin-reveal sections (Zoox-style) ───────
   Light theme matching the rest of the site (white + cream + Apple
   blue). Each "pin-reveal" section pins for ~120% viewport-height of
   scroll while the image expands from a half-width left panel to
   full-bleed and the text panel fades out — the same pattern Zoox
   uses on their homepage. */
.about-bhutan-page {
    --kyr-accent: var(--c-red);
    --kyr-bg:     #ffffff;
    --kyr-bg-alt: #f5f5f7;
    --kyr-fg:     #1d1d1f;
    --kyr-mute:   #6e6e73;
    --kyr-line:   #e8e8ec;
    background: var(--kyr-bg);
    color: var(--kyr-fg);
}
.about-bhutan-page main { background: var(--kyr-bg); }

/* Hero — editorial text-first opener (no photo). Sits on the page's
   white background; large typography signals "article opener" rather
   than the marketing photo-hero used elsewhere on the site. */
.kyr-hero {
    position: relative;
    background: var(--kyr-bg);
    padding: clamp(140px, 22vh, 240px) clamp(24px, 6vw, 80px) clamp(96px, 16vh, 180px);
    display: flex;
    align-items: flex-end;
    min-height: 60vh;
    border-bottom: 1px solid var(--kyr-line);
}
.kyr-hero-inner {
    max-width: 1280px;
    margin: 0 auto;
    width: 100%;
}
.kyr-hero-display {
    font-size: clamp(2.5rem, 6vw, 5rem);
    color: var(--kyr-fg);
    font-weight: 300;
    max-width: 18ch;
}
.kyr-hero-display em {
    color: var(--kyr-accent);
    font-weight: 400;
    font-style: normal;
}
.kyr-hero-sub {
    max-width: 56ch;
    color: var(--kyr-mute);
}

.kyr-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-size: 11px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--kyr-fg);
}
.kyr-eyebrow > span:first-child { font-variant-numeric: tabular-nums; color: var(--kyr-mute); }
.kyr-eyebrow-bar {
    display: inline-block;
    width: 28px;
    height: 1px;
    background: var(--kyr-accent);
}
.kyr-display {
    font-family: Inter, system-ui, sans-serif;
    font-weight: 400;
    letter-spacing: -0.02em;
    line-height: 1.05;
    font-size: clamp(2.25rem, 4.6vw, 4rem);
    color: var(--kyr-fg);
}
.kyr-display em {
    font-style: normal;
    font-weight: 500;
    color: var(--kyr-accent);
}

.kyr-sub {
    font-size: clamp(1rem, 1.4vw, 1.25rem);
    line-height: 1.55;
    color: var(--kyr-mute);
    font-weight: 400;
}

.kyr-body {
    font-size: clamp(1rem, 1.15vw, 1.125rem);
    line-height: 1.7;
    color: var(--kyr-mute);
    font-weight: 400;
    max-width: 52ch;
}

/* ─── Pin-reveal section ──────────────────────────────────
   Zoox pattern: the photo is always full-bleed across the
   entire section. A description panel sits over the right
   half, on a solid background, hiding part of the photo.
   As the section is pinned and scrolled, the description
   slides right and fades, revealing the full image. */
.kyr-pin-reveal {
    position: relative;
    height: 100vh;
    overflow: hidden;
    background: var(--kyr-bg);
    padding: 32px;
}
.kyr-pin-inner {
    position: relative;
    height: 100%;
    width: 100%;
    border-radius: 24px;
    overflow: hidden;
}
.kyr-pin-image {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 1;
    /* Zoox-style: image is full-bleed but its visible area is
       defined by clip-path: inset() with rounded corners. Two
       variables — --clip-right and --clip-left — let us animate
       from EITHER side. Default: --clip-right starts at 50%
       (image revealed only on left half) and animates to 0%.
       The .kyr-pin-reverse modifier swaps which side starts
       clipped, so adjacent sections alternate exit direction. */
    --clip-right: 50%;
    --clip-left:  0%;
    -webkit-clip-path: inset(0 var(--clip-right) 0 var(--clip-left) round 24px);
    clip-path:         inset(0 var(--clip-right) 0 var(--clip-left) round 24px);
    will-change: clip-path;
}
.kyr-pin-reverse .kyr-pin-image {
    --clip-right: 0%;
    --clip-left:  50%;
}
.kyr-pin-reverse .kyr-pin-text {
    right: auto;
    left: 0;
}
.kyr-pin-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.kyr-pin-text {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 50%;
    background: var(--kyr-bg);
    padding: 64px clamp(40px, 6vw, 96px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    z-index: 2;
    will-change: transform;
}
@media (max-width: 900px) {
    /* Mobile: drop the outer padding and rounded mask so each image
       reads as a full-bleed editorial photo (Apple/Zoox style on
       narrow screens). The pin-reveal scrub doesn't run below 901px,
       so the default desktop clip-path (half-revealed image) would
       otherwise leave only one side visible — reset it to show the
       whole frame. */
    .kyr-pin-reveal { height: auto; padding: 0; }
    .kyr-pin-inner  { height: auto; min-height: 60vh; border-radius: 0; }
    .kyr-pin-image  {
        position: relative;
        height: 60vh;
        inset: auto;
        -webkit-clip-path: none;
        clip-path: none;
    }
    .kyr-pin-text {
        position: relative;
        width: 100%;
        padding: 64px 24px 80px;
        top: auto; bottom: auto; right: auto; left: auto;
    }
    /* Reverse variant: same edge-to-edge image treatment. */
    .kyr-pin-reverse .kyr-pin-image,
    .kyr-pin-reverse .kyr-pin-text { left: auto; right: auto; }
}

/* ─── Quiet text section (intro / philosophy / outro) ─────
   Centered, narrow, on cream — gives the page breathing room
   between the high-impact pin-reveal sections. */
.kyr-quiet {
    position: relative;
    padding: clamp(120px, 16vw, 200px) 24px;
    background: var(--kyr-bg-alt);
}
.kyr-quiet-narrow {
    max-width: 720px;
    margin: 0 auto;
    text-align: left;
}
.kyr-quiet-narrow.center { text-align: center; }
.kyr-quiet-narrow.center .kyr-eyebrow,
.kyr-quiet-narrow.center .kyr-stat { justify-content: center; }
.kyr-quiet-narrow.center .kyr-body { margin-left: auto; margin-right: auto; }

/* Big accent stat number for the GNH section */
.kyr-stat {
    display: flex;
    align-items: baseline;
    gap: 36px;
    padding: 40px 0 0;
    margin-top: 56px;
    border-top: 1px solid var(--kyr-line);
}
.kyr-stat-num {
    font-family: Inter, system-ui, sans-serif;
    font-weight: 200;
    font-size: clamp(4.5rem, 12vw, 9rem);
    letter-spacing: -0.04em;
    line-height: 0.92;
    color: var(--kyr-accent);
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}
.kyr-stat-cap {
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--kyr-mute);
    max-width: 26ch;
}

/* CTA buttons — match the rest of the site's pill style */
.kyr-cta-primary {
    display: inline-block;
    padding: 14px 36px;
    background: var(--kyr-accent);
    color: #ffffff;
    border-radius: 999px;
    font-weight: 500;
    font-size: 0.95rem;
    transition: transform .25s ease, background-color .2s ease;
}
.kyr-cta-primary:hover { transform: translateY(-1px); background: var(--c-deep); }
.kyr-cta-ghost {
    display: inline-block;
    padding: 14px 8px;
    color: var(--kyr-fg);
    font-weight: 500;
    font-size: 0.95rem;
    transition: color .2s ease;
}
.kyr-cta-ghost:hover { color: var(--kyr-accent); }

/* Scroll cue at the bottom of the hero */
.kyr-scroll-cue {
    animation: kyr-cue-bob 2.6s ease-in-out infinite;
}
@keyframes kyr-cue-bob {
    0%, 100% { transform: translate(-50%, 0); opacity: 0.6; }
    50%      { transform: translate(-50%, 6px); opacity: 0.95; }
}

/* JS-prep: pre-hide text bits in pin-reveal sections so they
   fade in cleanly when the section first enters the viewport. */
.js .about-bhutan-page [data-kyr-text-fade] { opacity: 0; transform: translateY(24px); }
.js .about-bhutan-page [data-kyr-quiet-fade] { opacity: 0; transform: translateY(24px); }

@media (prefers-reduced-motion: reduce) {
    .js .about-bhutan-page [data-kyr-text-fade],
    .js .about-bhutan-page [data-kyr-quiet-fade] { opacity: 1 !important; transform: none !important; }
    .kyr-pin-image, .kyr-pin-text { transition: none !important; }
    .kyr-scroll-cue { animation: none; }
}