/* ==========================================================================
   Beautiful Bangladesh — dedicated stylesheet for this page only.
   Own color palette (deep green / Bangladesh red / gold) as page-scoped
   custom properties, prefixed bd- throughout so nothing collides with the
   shared style.css tokens the rest of the site uses. Theme-aware: dark
   surface by default, light override under :root[data-theme="light"] (same
   toggle as the rest of the site, driven by theme-init.js).

   Image-first, scroll-driven layout: Heritage and Nature are full-bleed
   parallax "story" panels (.bd-story-panel) rather than text-heavy grids —
   one big image, a name, and a short phrase per site, read in sequence like
   a timeline. The scroll-linked parallax itself lives in
   beautiful-bangladesh.js (data-bd-parallax elements), not in CSS.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Playfair+Display:wght@600;700;800&display=swap');

:root {
    --bd-surface: #0d150f;
    --bd-surface-alt: #121c14;
    --bd-card: #16211a;
    --bd-card-border: rgba(255, 255, 255, 0.08);
    --bd-text: #f3f5f1;
    --bd-text-muted: #a9b3aa;
    --bd-green: #10a374;
    --bd-green-ink: #04140d;
    --bd-red: #f42a41;
    --bd-gold: #d4af37;
    --bd-gold-bright: #eccb6b;
    --bd-shadow: 0 20px 45px rgba(0, 0, 0, 0.35);
}

:root[data-theme="light"] {
    --bd-surface: #f7f6f2;
    --bd-surface-alt: #eef0ea;
    --bd-card: #ffffff;
    --bd-card-border: rgba(10, 20, 14, 0.1);
    --bd-text: #1a1d1a;
    --bd-text-muted: #5b625c;
    --bd-green: #006a4e;
    --bd-gold: #a9791a;
    --bd-gold-bright: #c99a2e;
    --bd-shadow: 0 20px 45px rgba(10, 20, 14, 0.12);
}

/* Buttery in-page scrolling for the reveal-rail/hero-CTA anchor jumps below
   (page-scoped: this stylesheet only loads on this route). */
html { scroll-behavior: smooth; }

/* ==========================================================================
   Base
   ========================================================================== */

.bd-shell {
    max-width: 1360px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.bd-section {
    padding: 5.5rem 0;
    background: var(--bd-surface);
    color: var(--bd-text);
    overflow: hidden;
}

.bd-section-alt { background: var(--bd-surface-alt); }

.bd-section-head {
    max-width: 720px;
    margin: 0 auto 3rem;
    text-align: center;
}

/* Variant for a section head sitting directly on a dark image (the story
   sections' intro, before the panels start) — fixed light text/shadow
   instead of the theme-aware --bd-text, since the backdrop is always a
   photo here regardless of site theme. */
.bd-section-head-overlay {
    max-width: 720px;
    margin: 0 auto;
    padding: 4rem 1.5rem 2.5rem;
    text-align: center;
}

/* This head sits on .bd-story-section's fixed-dark background (always
   --bd-green-ink, not theme-aware, since it's the same dark canvas the
   photo panels below live on) — so its text needs fixed light colors too,
   not the theme-flipping --bd-text/--bd-text-muted (which would go dark
   and disappear here in light mode). */
.bd-section-head-overlay .bd-section-title { color: #fff; }
.bd-section-head-overlay .bd-section-intro { color: rgba(255, 255, 255, 0.75); }

/* Editorial drop-cap on the story sections' intro line — a small magazine-
   like flourish that reinforces the "reading a story" feel at the start of
   each chapter's panels. */
.bd-section-head-overlay .bd-section-intro::first-letter {
    font-family: 'Playfair Display', serif;
    font-size: 1.8em;
    font-weight: 800;
    color: var(--bd-gold);
}

.bd-tag {
    display: inline-block;
    font-family: 'Poppins', sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--bd-gold);
    margin-bottom: 0.75rem;
}

.bd-section-title {
    font-family: 'Playfair Display', serif;
    font-size: clamp(1.8rem, 3.4vw, 2.6rem);
    font-weight: 800;
    color: var(--bd-text);
    margin: 0 0 1rem;
}

.bd-section-intro {
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
    line-height: 1.7;
    color: var(--bd-text-muted);
    margin: 0;
}

.bd-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.9rem 1.9rem;
    font-family: 'Poppins', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: 0;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.bd-btn-gold {
    background: var(--bd-gold);
    color: #1a1500;
}

.bd-btn-gold:hover { background: var(--bd-gold-bright); transform: translateY(-2px); }

.bd-btn-outline {
    background: transparent;
    color: #fff;
    border-color: rgba(255, 255, 255, 0.55);
}

.bd-btn-outline:hover { border-color: #fff; transform: translateY(-2px); }

/* ==========================================================================
   Whole-page reading experience — a fixed progress bar (how far into the
   "story" you are) and a faint film-grain texture, both layered above every
   section so the page reads as one continuous cinematic piece rather than a
   stack of separate blocks. Width/opacity driven by beautiful-bangladesh.js.
   ========================================================================== */

.bd-progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 0%;
    height: 3px;
    z-index: 500;
    background: linear-gradient(90deg, var(--bd-gold) 0%, var(--bd-gold-bright) 50%, var(--bd-red) 100%);
    box-shadow: 0 0 8px rgba(212, 175, 55, 0.5);
}

.bd-grain-overlay {
    position: fixed;
    inset: 0;
    z-index: 40;
    pointer-events: none;
    opacity: 0.045;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

@media (prefers-reduced-motion: reduce) {
    .bd-progress-bar { transition: none; }
}

/* ==========================================================================
   Scroll-reveal — JS toggles .bd-in-view once an element enters the
   viewport (see beautiful-bangladesh.js); respects reduced-motion.
   ========================================================================== */

[data-bd-reveal] {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-bd-reveal="zoom-in"] { transform: scale(0.92); }

[data-bd-reveal].bd-in-view {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    [data-bd-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ==========================================================================
   Hero
   ========================================================================== */

.bd-hero {
    position: relative;
    height: 100vh;
    min-height: 560px;
    overflow: hidden;
    background: var(--bd-green-ink);
}

.bd-hero-media {
    position: absolute;
    inset: 0;
}

/* The source footage (bangladesh-drone.webm) has ~7% of pure-black
   letterbox baked into the top and bottom of every frame — object-fit:
   cover alone can't remove that, since it's part of the video's actual
   pixel content, not empty space around it (confirmed by sampling frame
   luminance via canvas: 0 from 0-7% and 93-100% of the frame height, real
   picture in between). Scaling up by ~1.18x from the center crops both
   bars out of view (.bd-hero already clips the overflow), at the cost of a
   very slightly tighter/more zoomed-in crop than a bar-free source video
   would need — not visually meaningful for a full-bleed hero background. */
.bd-hero-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.18);
    transform-origin: center;
}

.bd-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(4, 10, 6, 0.55) 0%, rgba(4, 10, 6, 0.35) 45%, rgba(4, 10, 6, 0.8) 100%);
}

/* Play/pause control + source credit, bottom-left of the hero — the video
   autoplays by default (muted, looping) but isn't ours, so viewers get an
   explicit way to stop it and a visible attribution line. Sized/coloured to
   match .bd-book-arrow's square semi-transparent button language. */
.bd-hero-video-control {
    position: absolute;
    left: 1.5rem;
    bottom: 1.75rem;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.bd-hero-video-toggle {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    color: #fff;
    background: rgba(4, 10, 6, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.3);
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.bd-hero-video-toggle:hover { background: var(--bd-gold); color: var(--bd-green-ink); border-color: var(--bd-gold); }

.bd-hero-video-icon-play { display: none; }
.bd-hero-video-toggle[data-playing="false"] .bd-hero-video-icon-pause { display: none; }
.bd-hero-video-toggle[data-playing="false"] .bd-hero-video-icon-play { display: flex; }

.bd-hero-video-credit {
    margin: 0;
    max-width: 240px;
    font-family: 'Poppins', sans-serif;
    font-size: 0.7rem;
    line-height: 1.4;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.75);
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
}

@media (max-width: 640px) {
    .bd-hero-video-control { left: 1rem; bottom: 1.25rem; gap: 0.6rem; }
    .bd-hero-video-toggle { width: 38px; height: 38px; }
    .bd-hero-video-credit { max-width: 170px; font-size: 0.62rem; }
}

.bd-hero-content {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem;
}

.bd-hero-tag {
    display: block;
    margin-bottom: 1.1rem;
    color: var(--bd-gold-bright);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.bd-hero-heading {
    font-family: 'Playfair Display', serif;
    font-size: clamp(2.6rem, 7vw, 5.2rem);
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.05;
    color: #fff;
    text-shadow: 0 4px 18px rgba(0, 0, 0, 0.6);
    margin: 0 0 1rem;
}

.bd-hero-subheading {
    font-family: 'Poppins', sans-serif;
    font-style: italic;
    font-size: clamp(1rem, 1.6vw, 1.3rem);
    color: #f1efe6;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
    max-width: 640px;
    margin: 0 0 2.25rem;
}

.bd-hero-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
}

.bd-scroll-hint {
    position: absolute;
    left: 50%;
    bottom: 2rem;
    transform: translateX(-50%);
    z-index: 2;
    width: 26px;
    height: 42px;
    border: 2px solid rgba(255, 255, 255, 0.6);
    display: flex;
    justify-content: center;
    padding-top: 8px;
}

.bd-scroll-hint span {
    width: 4px;
    height: 8px;
    background: var(--bd-gold);
    animation: bd-scroll-dot 1.8s ease infinite;
}

@keyframes bd-scroll-dot {
    0% { transform: translateY(0); opacity: 1; }
    70% { transform: translateY(14px); opacity: 0; }
    100% { transform: translateY(0); opacity: 0; }
}

/* Slow continuous zoom on every full-bleed background photo (hero excluded
   — the video already supplies its own motion) — a classic Ken Burns
   treatment layered underneath the scroll-linked parallax drift above. */
@keyframes bd-kenburns {
    from { transform: scale(1.06); }
    to { transform: scale(1.22); }
}

@media (prefers-reduced-motion: reduce) {
    .bd-glance-media img,
    .bd-story-media img,
    .bd-culture-media img,
    .bd-cta-media img {
        animation: none;
    }
}

/* ==========================================================================
   Missing-image fallback — shared building blocks. JS
   (beautiful-bangladesh.js) adds .bd-img-missing to the nearest holder when
   a real photo file 404s, and mirrors the alt text into
   data-bd-fallback-label for ::after to render. Holders that already show
   their own name/caption on top (story panels, glance/culture bands, video
   thumbs) suppress the label text — only the gradient shows — so nothing
   overlaps into unreadable double text.
   ========================================================================== */

.bd-story-media.bd-img-missing img,
.bd-glance-media.bd-img-missing img,
.bd-culture-media.bd-img-missing img,
.bd-pinterest-item.bd-img-missing img,
.bd-cta-media.bd-img-missing img,
.bd-video-thumb.bd-img-missing img {
    display: none;
}

.bd-story-media.bd-img-missing::after,
.bd-glance-media.bd-img-missing::after,
.bd-culture-media.bd-img-missing::after,
.bd-cta-media.bd-img-missing::after,
.bd-video-thumb.bd-img-missing::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--bd-green) 0%, #063a2a 60%, var(--bd-green-ink) 100%);
}

.bd-pinterest-item.bd-img-missing {
    position: relative;
    aspect-ratio: 4 / 3;
    background: linear-gradient(135deg, var(--bd-green) 0%, #063a2a 60%, var(--bd-green-ink) 100%);
}

.bd-pinterest-item.bd-img-missing::after {
    content: attr(data-bd-fallback-label);
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    text-align: center;
    font-family: 'Poppins', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
}

/* ==========================================================================
   Section 1 — "At a Glance" parallax stat band (a slim strip, not cards)
   ========================================================================== */

.bd-glance-band {
    position: relative;
    overflow: hidden;
    padding: 3.5rem 0;
}

/* Two independent motion layers: the container (this element) carries the
   scroll-linked parallax drift from beautiful-bangladesh.js — it's
   oversized/offset (130% height, -15% top) so that drift never reveals an
   edge — while the <img> inside it runs its own slow, continuous Ken Burns
   zoom (bd-kenburns below), independent of scroll. Kept on separate
   elements so the two transforms never fight over the same property. */
.bd-glance-media { position: absolute; left: 0; right: 0; top: -15%; height: 130%; overflow: hidden; will-change: transform; }
.bd-glance-media img { width: 100%; height: 100%; object-fit: cover; animation: bd-kenburns 24s ease-in-out infinite alternate; }

.bd-glance-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(4, 10, 6, 0.88) 0%, rgba(4, 10, 6, 0.72) 100%);
}

.bd-glance-content { position: relative; z-index: 2; }

.bd-glance-content .bd-tag { display: block; text-align: center; margin-bottom: 1.5rem; }

.bd-glance-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2.5rem 3rem;
}

.bd-glance-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-align: left;
}

.bd-glance-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    color: var(--bd-gold);
}

.bd-glance-value {
    display: block;
    font-family: 'Playfair Display', serif;
    font-size: 1.25rem;
    font-weight: 800;
    color: #fff;
}

.bd-glance-label {
    display: block;
    font-family: 'Poppins', sans-serif;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ==========================================================================
   Section 2 & 3 — Story panels (Heritage, Nature): one full-bleed image per
   site with a scroll-parallax background and a short text overlay.
   ========================================================================== */

.bd-story-section { background: var(--bd-green-ink); padding-bottom: 5rem; }

.bd-story-panel {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: var(--bd-green-ink);
}

/* ==========================================================================
   Page-flip book — Heritage/Nature each render as a real StPageFlip book
   (see the doc comment at the top of beautiful-bangladesh.blade.php and
   section 10 in beautiful-bangladesh.js). St.PageFlip takes each
   .bd-story-panel we already built and moves it — the actual DOM node, not
   a clone — into its own managed structure (adding classes .stf__item,
   --soft, --left/--right and overwriting that one element's inline style
   every frame for position/size/clip-path/transform), so nothing else may
   touch that element's transform/clip-path. Everything from the corner
   brackets down is unaffected: those are ::before/::after (not part of the
   inline style being rewritten) and .bd-story-media/.bd-story-content are
   children the library never reaches into.

   Everything else — corner brackets, the text/photo split — lives on
   .bd-story-inner, a plain flex-row wrapper nested INSIDE the panel, and its
   own children: StPageFlip rewrites `display: block` inline on the panel
   itself every single draw call, so `display: flex` directly on the panel
   would just get overwritten every frame — the inner wrapper is a normal,
   untouched child, free to lay out row-wise (see .bd-story-inner below).

   .stf__parent/.stf__wrapper/.stf__block/.stf__item/shadow div rules below
   are the library's own required base styles (copied from its
   src/Style/stPageFlip.css — the npm package ships this as source only, not
   as a built CSS file, so it can't be linked from a CDN the way the JS can)
   — layout-critical, don't remove even though they look unused at a glance.
   ========================================================================== */

.stf__parent {
    position: relative;
    display: block;
    box-sizing: border-box;
    transform: translateZ(0);
    touch-action: pan-y;
}

.stf__wrapper {
    position: relative;
    width: 100%;
    box-sizing: border-box;
}

.stf__parent canvas {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}

.stf__block {
    position: absolute;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    perspective: 2200px;
}

.stf__item {
    display: none;
    position: absolute;
    transform-style: preserve-3d;
}

.stf__outerShadow,
.stf__innerShadow,
.stf__hardShadow,
.stf__hardInnerShadow {
    position: absolute;
    left: 0;
    top: 0;
}

/* Genuinely full-bleed, edge-to-edge with the screen, same as
   .bd-hero/.bd-glance-band/.bd-culture-band — while StILL guaranteeing
   exactly one image at a time (never a two-page spread): section 10 in
   beautiful-bangladesh.js computes StPageFlip's minWidth per book from this
   wrapper's own current width (rather than a fixed constant that would
   have to choose between overflowing a phone or allowing a spread on wide
   screens) and rebuilds the book whenever that width actually changes. */
.bd-book-wrap {
    position: relative;
    width: 100%;
    padding: 0 1rem;
}

.bd-book {
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45);
}

/* Hero-style prev/next arrows overlaid on the image itself — same pattern
   as .cc-hero-arrow on the /championship hero slider (square, semi-
   transparent, no rounded corners), recoloured to this page's gold/green
   palette. Positioned relative to .bd-book-wrap rather than .bd-book itself
   so they stay pinned to the wrapper's edges regardless of how wide the
   currently-rendered page(s) are. */
.bd-book-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    color: #fff;
    background: rgba(4, 10, 6, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.3);
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.bd-book-arrow:hover { background: var(--bd-gold); color: var(--bd-green-ink); border-color: var(--bd-gold); }
.bd-book-arrow:disabled { opacity: 0.35; cursor: default; }
.bd-book-arrow:disabled:hover { background: rgba(4, 10, 6, 0.55); color: #fff; border-color: rgba(255, 255, 255, 0.3); }

.bd-book-prev { left: 0.75rem; }
.bd-book-next { right: 0.75rem; }

.bd-book-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1.5rem;
}

.bd-book-counter {
    font-family: 'Poppins', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.75);
    min-width: 70px;
    text-align: center;
}

/* .bd-story-inner: the actual text/photo split. A plain flex row nested
   inside .bd-story-panel (see the long comment above .bd-story-panel for
   why it can't live directly on the panel) — .bd-story-content is the
   solid-background text pane on the left, .bd-story-media the clean,
   un-overlaid photo on the right, in that DOM order (no CSS `order`
   trickery needed). Stacks to a single column below 720px, where a single
   book page is already narrow/portrait anyway. */
.bd-story-inner {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 100%;
    position: relative;
}

/* Punched holes binding seam/spine for the album effect */
.bd-story-inner::after {
    content: '';
    position: absolute;
    left: 24%;
    top: 0;
    bottom: 0;
    width: 24px;
    transform: translateX(-50%);
    z-index: 15;
    pointer-events: none;
    background-image: 
        radial-gradient(circle 4px at 12px 20px, #000000 100%, transparent 100%),
        radial-gradient(circle 6.5px at 12px 20px, #ffffff 70%, rgba(255, 255, 255, 0.3) 90%, transparent 100%),
        linear-gradient(90deg, rgba(0, 0, 0, 0.45) 0%, transparent 30%, transparent 70%, rgba(0, 0, 0, 0.45) 100%);
    background-size: 24px 40px, 24px 40px, 24px 100%;
    background-repeat: repeat-y;
}

/* Adapt punched binding seam to horizontal join on mobile portrait stacks */
@media (max-width: 720px) {
    .bd-story-inner::after {
        left: 0;
        right: 0;
        top: 68%;
        width: 100%;
        height: 24px;
        transform: translateY(-50%);
        background-image: 
            radial-gradient(circle 4px at 20px 12px, #000000 100%, transparent 100%),
            radial-gradient(circle 6.5px at 20px 12px, #ffffff 70%, rgba(255, 255, 255, 0.3) 90%, transparent 100%),
            linear-gradient(180deg, rgba(0, 0, 0, 0.45) 0%, transparent 30%, transparent 70%, rgba(0, 0, 0, 0.45) 100%);
        background-size: 40px 24px, 40px 24px, 100% 24px;
        background-repeat: repeat-x;
    }
}

/* Gold viewfinder corner brackets — a small gallery-print/photography-frame
   accent framing just the photo pane now that text lives in its own column
   rather than overlaid on top of the image. */
.bd-story-media::before,
.bd-story-media::after {
    content: '';
    position: absolute;
    z-index: 3;
    width: clamp(20px, 2vw, 34px);
    height: clamp(20px, 2vw, 34px);
    pointer-events: none;
    opacity: 0.8;
}

.bd-story-media::before {
    top: clamp(0.75rem, 1.5vw, 1.5rem);
    left: clamp(0.75rem, 1.5vw, 1.5rem);
    border-top: 2px solid var(--bd-gold);
    border-left: 2px solid var(--bd-gold);
}

.bd-story-media::after {
    bottom: clamp(0.75rem, 1.5vw, 1.5rem);
    right: clamp(0.75rem, 1.5vw, 1.5rem);
    border-bottom: 2px solid var(--bd-gold);
    border-right: 2px solid var(--bd-gold);
}

/* No parallax drift on book pages (StPageFlip owns the panel's own
   transform/clip-path — see the doc comment above .bd-story-panel) — a
   plain flex-sized fit, not the oversized/offset treatment
   .bd-glance-media/.bd-culture-media/.bd-cta-media need for scroll-drift
   slack. */
.bd-story-media {
    position: relative;
    flex: 1 1 76%;
    height: 100%;
    overflow: hidden;
    background: var(--bd-green-ink);
}

/* cover, not contain: contain (tried in an earlier pass) always shows the
   whole photo, but since this box's shape rarely matches any individual
   photo's own ratio — some near-square, some panoramic — the rendered
   photo ended up a different effective size on every page, some tiny and
   heavily letterboxed, some nearly filling the box. cover fills the box
   consistently on every page (the section 10 comment on `targetHeight` in
   beautiful-bangladesh.js already keeps this box close to a typical
   landscape ratio, so cover only crops a modest sliver off most photos —
   consistent sizing across all 15 pages mattered more here than never
   losing a few edge pixels on the handful whose ratio differs most). */
.bd-story-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(1.1) contrast(1.05);
    animation: bd-kenburns 26s ease-in-out infinite alternate;
}

/* .bd-story-content is now a small layered stack rather than a flat panel:
   a heavily blurred, darkened copy of the SAME photo as an ambient backdrop
   (.bd-story-content-backdrop — duplicating the <img> rather than a CSS
   background-image, since this project's Blade views never carry inline
   style="" attributes; the browser dedupes the request against the sharp
   copy in .bd-story-media, so it costs a DOM node, not a network round
   trip), a gradient + gold-glow overlay for legibility and richness
   (.bd-story-content-overlay), then the actual text on top
   (.bd-story-content-body) — plus a thin gold "spine" down the left edge.
   Reads as a designed, colour-matched panel instead of a flat block. */
.bd-story-content {
    position: relative;
    flex: 0 0 24%;
    height: 100%;
    overflow: hidden;
    background: var(--bd-green-ink);
}

.bd-story-content::before {
    content: '';
    position: absolute;
    z-index: 3;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, var(--bd-gold) 0%, rgba(212, 175, 55, 0.15) 75%, transparent 100%);
}

.bd-story-content-backdrop {
    position: absolute;
    inset: -12%;
    width: 124%;
    height: 124%;
    object-fit: cover;
    filter: blur(20px) saturate(1.3) brightness(0.5);
}

.bd-story-content-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(165deg, rgba(4, 10, 6, 0.82) 0%, rgba(4, 10, 6, 0.68) 55%, rgba(4, 10, 6, 0.88) 100%);
}

.bd-story-content-overlay::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 25% 20%, rgba(212, 175, 55, 0.16), transparent 60%);
}

.bd-story-content-body {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(1rem, 1.8vw, 1.75rem) clamp(1.1rem, 2.2vw, 1.9rem);
}

/* The book's own width now tracks the viewport directly (section 10 in
   beautiful-bangladesh.js keeps it full-width while forcing single-page
   mode), so text here is sized with vw-relative clamp()s rather than one
   fixed rem scale — it needs to read well anywhere from a narrow phone up
   to an ultra-wide desktop, not just whatever width it was designed at. */

.bd-story-eyebrow {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: 'Poppins', sans-serif;
    font-size: clamp(0.62rem, 0.85vw, 0.82rem);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--bd-gold);
    margin-bottom: 0.4rem;
}

.bd-story-eyebrow::before {
    content: '';
    width: 18px;
    height: 2px;
    background: var(--bd-gold);
    flex-shrink: 0;
}

.bd-story-title {
    font-family: 'Playfair Display', serif;
    font-size: clamp(1.2rem, 2.6vw, 2.4rem);
    font-weight: 800;
    color: #fff;
    margin: 0 0 0.55rem;
}

.bd-story-title::after {
    content: '';
    display: block;
    width: 42px;
    height: 2px;
    margin-top: 0.55rem;
    background: var(--bd-gold);
}

.bd-story-caption {
    font-family: 'Poppins', sans-serif;
    font-style: italic;
    font-size: clamp(0.8rem, 1vw, 1rem);
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
}

@media (max-width: 720px) {
    /* flex-basis needs a concrete value here, not auto: .bd-story-media's
       <img> is sized with height:100% of it, and in a column flex container
       an auto-basis item's height is otherwise derived from its own content
       — a percentage-height child then has nothing definite to resolve
       against and collapses to 0 (a classic flexbox circular-sizing trap). */
    .bd-story-inner { flex-direction: column; }
    .bd-story-content { flex: 0 0 32%; order: 2; }
    .bd-story-content-body { padding: 1rem 1.25rem; }
    .bd-story-media { flex: 1 1 68%; order: 1; }
}

/* ==========================================================================
   Section 4 — Culture & Traditions: three glassmorphism cards (same
   .bd-glass-card recipe as "Why Visit" below, reused here for consistency)
   over a parallax band, each with its own icon, and each item inside
   showing a short description rather than a bare name — a flat row of
   pill chips read as an afterthought next to the rest of the page's
   editorial treatment.
   ========================================================================== */

.bd-culture-band {
    position: relative;
    overflow: hidden;
    padding: 5.5rem 0;
}

.bd-culture-media { position: absolute; left: 0; right: 0; top: -15%; height: 130%; overflow: hidden; will-change: transform; }
.bd-culture-media img { width: 100%; height: 100%; object-fit: cover; animation: bd-kenburns 24s ease-in-out infinite alternate; }

.bd-culture-overlay {
    position: absolute;
    inset: 0;
    background: rgba(4, 10, 6, 0.82);
}

/* A soft warm glow rather than a flat darken — the same trick used behind
   the story-panel text pane (.bd-story-content-overlay) — gives the glass
   cards something richer than solid black to sit in front of. */
.bd-culture-overlay::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 15%, rgba(212, 175, 55, 0.14), transparent 55%);
}

.bd-culture-content { position: relative; z-index: 2; }

.bd-culture-content .bd-section-title,
.bd-culture-content .bd-section-intro { color: #fff; }

.bd-culture-content .bd-section-intro { color: rgba(255, 255, 255, 0.75); }

.bd-culture-groups {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.75rem;
}

.bd-culture-card {
    padding: 2.25rem 1.85rem;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.3s ease;
}

.bd-culture-card:hover {
    transform: translateY(-6px);
    border-color: var(--bd-gold);
    box-shadow: 0 20px 45px rgba(212, 175, 55, 0.16);
}

.bd-culture-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    margin-bottom: 1.1rem;
    color: var(--bd-green-ink);
    background: var(--bd-gold);
}

.bd-culture-card-title {
    font-family: 'Playfair Display', serif;
    font-size: 1.3rem;
    font-weight: 800;
    color: #fff;
    margin: 0 0 0.6rem;
}

.bd-culture-card-rule {
    display: block;
    width: 40px;
    height: 2px;
    background: var(--bd-gold);
    margin-bottom: 1.5rem;
}

.bd-culture-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1.15rem;
}

.bd-culture-list-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.bd-culture-list-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    margin-top: 0.1rem;
    color: var(--bd-gold);
    background: rgba(212, 175, 55, 0.14);
}

.bd-culture-list-icon svg { width: 15px; height: 15px; }

.bd-culture-list-name {
    display: block;
    font-family: 'Poppins', sans-serif;
    font-size: 0.92rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 0.2rem;
}

.bd-culture-list-desc {
    display: block;
    font-family: 'Poppins', sans-serif;
    font-size: 0.8rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.68);
}

/* ==========================================================================
   Section 5 — Video showcase
   ========================================================================== */

.bd-video-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.bd-video-card { cursor: pointer; }

.bd-video-thumb {
    position: relative;
    height: 190px;
    overflow: hidden;
    background: var(--bd-green-ink);
}

.bd-video-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }

.bd-video-card:hover .bd-video-thumb img { transform: scale(1.06); }

.bd-video-play {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(4, 10, 6, 0.35);
    color: var(--bd-gold);
    transition: background-color 0.25s ease;
}

.bd-video-play svg {
    width: 46px;
    height: 46px;
    padding: 12px;
    background: var(--bd-gold);
    color: var(--bd-green-ink);
}

.bd-video-card:hover .bd-video-play { background: rgba(4, 10, 6, 0.55); }

.bd-video-soon {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1rem;
    font-family: 'Poppins', sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
    background: rgba(4, 10, 6, 0.45);
}

.bd-video-title {
    font-family: 'Poppins', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--bd-text);
    margin: 0.85rem 0 0;
}

.bd-video-modal {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

.bd-video-modal.is-open { display: flex; }

.bd-video-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(4, 10, 6, 0.9);
}

.bd-video-modal-box {
    position: relative;
    width: 100%;
    max-width: 900px;
    aspect-ratio: 16 / 9;
    background: #000;
    z-index: 2;
}

.bd-video-modal-frame,
.bd-video-modal-frame iframe { width: 100%; height: 100%; border: none; }

.bd-video-modal-close {
    position: absolute;
    top: -2.75rem;
    right: 0;
    background: none;
    border: none;
    color: #fff;
    font-size: 2.2rem;
    line-height: 1;
    cursor: pointer;
}

.bd-video-modal-close:hover { color: var(--bd-gold); }

/* ==========================================================================
   Section 6 — Map
   ========================================================================== */

/* Leaflet's own CSS (loaded from its CDN stylesheet, not ours) gives popups
   and the zoom control rounded corners by default — this site's design
   rule is border-radius: 0 everywhere, so override them explicitly. */
.leaflet-popup-content-wrapper,
.leaflet-popup-tip,
.leaflet-bar,
.leaflet-bar a {
    border-radius: 0 !important;
}

/* Full-bleed, edge-to-edge with the screen — pulled out of .bd-shell in the
   Blade template the same way .bd-book-wrap is, rather than capped at the
   page's 1360px content width. */
.bd-map-wrap {
    position: relative;
    width: 100%;
    border: 3px solid var(--bd-gold);
    box-shadow: var(--bd-shadow);
}

/* Gold viewfinder corners layered on top of the solid border above for a
   "double-framed" accent — same corner treatment used on the book's photo
   pane — brighter/thicker than the border itself so the eye still lands on
   the corners first. */
.bd-map-wrap::before,
.bd-map-wrap::after {
    content: '';
    position: absolute;
    z-index: 5;
    width: 32px;
    height: 32px;
    pointer-events: none;
}

.bd-map-wrap::before {
    top: -3px;
    left: -3px;
    border-top: 4px solid var(--bd-gold-bright);
    border-left: 4px solid var(--bd-gold-bright);
}

.bd-map-wrap::after {
    bottom: -3px;
    right: -3px;
    border-bottom: 4px solid var(--bd-gold-bright);
    border-right: 4px solid var(--bd-gold-bright);
}

#bd-map-canvas {
    height: 560px;
    width: 100%;
    background: var(--bd-surface-alt);
}

.bd-map-popup {
    font-family: 'Poppins', sans-serif;
    max-width: 220px;
    border-top: 3px solid var(--bd-gold);
    text-align: center;
}

.bd-map-popup img {
    width: 100%;
    height: 110px;
    object-fit: cover;
    margin-bottom: 0.6rem;
}

.bd-map-popup h4 {
    font-family: 'Playfair Display', serif;
    font-size: 1.05rem;
    margin: 0 0 0.35rem;
    color: #1a1d1a;
}

.bd-map-popup p { font-size: 0.8rem; line-height: 1.5; margin: 0 0 0.4rem; color: #3a413b; }

.bd-map-popup .bd-map-popup-attractions {
    font-size: 0.72rem;
    font-weight: 600;
    color: #006a4e;
}

/* Custom Leaflet marker — an actual gold pin (not a flat dot) that drops in
   with a bounce on load and then bobs gently forever, plus a small square
   "radar ping" ring pulsing at its base. All three live as plain child
   <span>s inside the divIcon's own html rather than being animated on the
   marker's outer element itself — Leaflet positions that outer element via
   its own inline `transform`, set fresh on every pan/zoom, so animating
   `transform` there directly would fight it exactly the way StPageFlip's
   inline styles fight anything else touching the same property (see the
   .bd-story-panel doc comment above). Children are unaffected by the
   parent's positioning transform, so they're free to animate on their own.
   The pin glyph itself is an SVG (curved teardrop shape) — the site's
   border-radius:0 rule targets UI containers, not icon glyphs, which
   already use curved paths freely everywhere else on this page. */
.bd-map-marker {
    position: relative;
    width: 30px;
    height: 40px;
}

.bd-map-marker-pin {
    position: absolute;
    inset: 0;
    display: block;
    color: var(--bd-gold);
    transform-origin: bottom center;
    animation: bd-map-drop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both,
               bd-map-bob 2.6s ease-in-out infinite;
    animation-delay: 0ms, 600ms;
}

.bd-map-marker-pin svg {
    display: block;
    width: 30px;
    height: 40px;
    filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.45));
}

.bd-map-marker-ring {
    position: absolute;
    bottom: -1px;
    left: 50%;
    width: 16px;
    height: 16px;
    margin-left: -8px;
    border: 2px solid var(--bd-gold);
    z-index: -1;
    opacity: 0;
    pointer-events: none;
    animation: bd-map-pulse 2.6s ease-out infinite;
}

@keyframes bd-map-drop {
    0% { transform: translateY(-70px) scale(0.4); opacity: 0; }
    55% { transform: translateY(8px) scale(1.08); opacity: 1; }
    75% { transform: translateY(-4px) scale(0.97); }
    100% { transform: translateY(0) scale(1); opacity: 1; }
}

@keyframes bd-map-bob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

@keyframes bd-map-pulse {
    0% { transform: scale(1); opacity: 0.6; }
    100% { transform: scale(2.6); opacity: 0; }
}

/* A small hand-written stagger (only 7 markers) rather than something
   computed — each city's pin drops in slightly after the last (bob starts
   right after that same pin's own drop finishes), and every other ring
   starts its pulse cycle half a beat out of phase so they don't all blink
   in unison. */
.leaflet-marker-pane .bd-map-marker:nth-child(1) .bd-map-marker-pin { animation-delay: 0ms, 600ms; }
.leaflet-marker-pane .bd-map-marker:nth-child(2) .bd-map-marker-pin { animation-delay: 90ms, 690ms; }
.leaflet-marker-pane .bd-map-marker:nth-child(3) .bd-map-marker-pin { animation-delay: 180ms, 780ms; }
.leaflet-marker-pane .bd-map-marker:nth-child(4) .bd-map-marker-pin { animation-delay: 270ms, 870ms; }
.leaflet-marker-pane .bd-map-marker:nth-child(5) .bd-map-marker-pin { animation-delay: 360ms, 960ms; }
.leaflet-marker-pane .bd-map-marker:nth-child(6) .bd-map-marker-pin { animation-delay: 450ms, 1050ms; }
.leaflet-marker-pane .bd-map-marker:nth-child(7) .bd-map-marker-pin { animation-delay: 540ms, 1140ms; }
.leaflet-marker-pane .bd-map-marker:nth-child(even) .bd-map-marker-ring { animation-delay: 1.3s; }

@media (prefers-reduced-motion: reduce) {
    .bd-map-marker-pin { animation: none; }
    .bd-map-marker-ring { animation: none; display: none; }
}

/* Quick-jump destination chips below the map — click flies the map to that
   city (see section 5 in beautiful-bangladesh.js) and highlights the chip. */
.bd-map-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.bd-map-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.1rem;
    font-family: 'Poppins', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--bd-text);
    background: var(--bd-card);
    border: 1px solid var(--bd-card-border);
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.bd-map-chip svg { width: 15px; height: 15px; color: var(--bd-gold); flex-shrink: 0; transition: color 0.2s ease; }

.bd-map-chip:hover { border-color: var(--bd-gold); transform: translateY(-3px); }

.bd-map-chip.is-active,
.bd-map-chip:hover {
    background: var(--bd-gold);
    border-color: var(--bd-gold);
    color: var(--bd-green-ink);
}

.bd-map-chip.is-active svg,
.bd-map-chip:hover svg { color: var(--bd-green-ink); }

/* ==========================================================================
   Section 7 — Why visit (glassmorphism cards)
   ========================================================================== */

.bd-why-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

.bd-glass-card {
    padding: 2.25rem 1.5rem;
    text-align: center;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

:root[data-theme="light"] .bd-glass-card {
    background: rgba(0, 106, 78, 0.06);
    border-color: rgba(0, 106, 78, 0.18);
}

/* Base hover (translateY only) for touch/no-hover devices; on pointer:fine
   devices beautiful-bangladesh.js overrides transform per-frame with a
   subtle mouse-tracked 3D tilt for a more premium feel — see section 8. */
.bd-glass-card:hover {
    transform: translateY(-6px);
    border-color: var(--bd-gold);
    box-shadow: 0 16px 36px rgba(212, 175, 55, 0.16);
}

.bd-glass-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    margin-bottom: 1.1rem;
    color: var(--bd-gold);
}

.bd-glass-card h3 {
    font-family: 'Playfair Display', serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--bd-text);
    margin: 0 0 0.6rem;
}

.bd-glass-card p {
    font-family: 'Poppins', sans-serif;
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--bd-text-muted);
    margin: 0;
}

/* ==========================================================================
   Section 8 — Pinterest-style gallery
   ========================================================================== */

.bd-pinterest-grid {
    column-count: 4;
    column-gap: 1rem;
}

.bd-pinterest-item {
    display: block;
    width: 100%;
    padding: 0;
    border: none;
    background: none;
    margin-bottom: 1rem;
    break-inside: avoid;
    cursor: zoom-in;
    overflow: hidden;
}

.bd-pinterest-item img {
    width: 100%;
    display: block;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.bd-pinterest-item:hover img { transform: scale(1.06); }

.bd-pinterest-item:nth-child(3n+1) img { aspect-ratio: 3 / 4; }
.bd-pinterest-item:nth-child(3n+2) img { aspect-ratio: 4 / 3; }
.bd-pinterest-item:nth-child(3n+3) img { aspect-ratio: 1 / 1; }

/* ==========================================================================
   Section 9 — Timeline: a horizontal scroll-snap strip (icon + year range +
   name + a short phrase per era, not a paragraph)
   ========================================================================== */

.bd-timeline-strip {
    display: flex;
    gap: 1.25rem;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    padding: 0.5rem 1.5rem 2rem;
    scrollbar-width: thin;
    scrollbar-color: var(--bd-gold) transparent;
}

.bd-timeline-strip::-webkit-scrollbar { height: 5px; }
.bd-timeline-strip::-webkit-scrollbar-track { background: transparent; }
.bd-timeline-strip::-webkit-scrollbar-thumb { background: var(--bd-gold); }

.bd-timeline-card {
    scroll-snap-align: start;
    flex: 0 0 260px;
    background: var(--bd-card);
    border: 1px solid var(--bd-card-border);
    border-top: 3px solid var(--bd-gold);
    padding: 1.75rem 1.5rem;
    box-shadow: var(--bd-shadow);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}

.bd-timeline-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(212, 175, 55, 0.15);
}

.bd-timeline-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    color: var(--bd-green-ink);
    background: var(--bd-gold);
    margin-bottom: 1rem;
}

.bd-timeline-range {
    display: block;
    font-family: 'Poppins', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--bd-text-muted);
    margin-bottom: 0.4rem;
}

.bd-timeline-card h3 {
    font-family: 'Playfair Display', serif;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--bd-text);
    margin: 0 0 0.5rem;
}

.bd-timeline-card p {
    font-family: 'Poppins', sans-serif;
    font-size: 0.85rem;
    line-height: 1.55;
    color: var(--bd-text-muted);
    margin: 0;
}

/* ==========================================================================
   Footer CTA
   ========================================================================== */

.bd-cta {
    position: relative;
    min-height: 480px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.bd-cta-media { position: absolute; left: 0; right: 0; top: -15%; height: 130%; overflow: hidden; will-change: transform; }

.bd-cta-media img { width: 100%; height: 100%; object-fit: cover; animation: bd-kenburns 22s ease-in-out infinite alternate; }

.bd-cta-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(4, 10, 6, 0.65) 0%, rgba(4, 10, 6, 0.85) 100%);
}

.bd-cta-content {
    position: relative;
    z-index: 2;
    max-width: 680px;
    text-align: center;
    padding: 2rem;
}

.bd-cta-content h2 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(1.8rem, 3.6vw, 2.6rem);
    font-weight: 800;
    color: #fff;
    margin: 0 0 1rem;
}

.bd-cta-content p {
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.85);
    margin: 0 0 2rem;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1100px) {
    .bd-video-grid { grid-template-columns: repeat(2, 1fr); }
    .bd-why-grid { grid-template-columns: repeat(2, 1fr); }
    .bd-culture-groups { grid-template-columns: 1fr; gap: 1.5rem; }
    .bd-pinterest-grid { column-count: 3; }
}

@media (max-width: 680px) {
    .bd-section { padding: 3.5rem 0; }
    .bd-section-head-overlay { padding: 3rem 1.25rem 2rem; }
    .bd-video-grid,
    .bd-why-grid { grid-template-columns: 1fr; }
    .bd-pinterest-grid { column-count: 2; }
    .bd-hero-actions { flex-direction: column; width: 100%; }
    .bd-hero-actions .bd-btn { width: 100%; }
    .bd-glance-row { gap: 1.5rem 1.75rem; justify-content: flex-start; }
    .bd-timeline-card { flex-basis: 220px; }
}