/* =====================================================================
   AMJ Tours and Travels — style.css
   Static HTML/CSS/JS build. Palette, type, and structure per brief.
   ===================================================================== */

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

:root{
  --gold:#D4AF37;
  --gold-light:#e8c96a;
  --orange:#FF8C00;
  --maroon:#800000;
  --slate:#1a1a2e;
  --text-dark:#2c1810;
  --text-light:#f5f0e8;
  --green:#2d5a27;
  --paper-fallback:#f5f0e8;
  --radius:6px;
  --container-max:1320px;
  --shadow-soft:0 10px 30px rgba(26,16,10,.12);
  --shadow-lift:0 18px 40px rgba(26,16,10,.18);
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:'Open Sans',sans-serif;
  font-size:16px;
  line-height:1.65;
  color:var(--text-dark);
  background-color:var(--paper-fallback);
  background-image:url('../images/bhutanese-paper.jpg');
  background-size:cover;
  background-attachment:fixed;
  background-repeat:no-repeat;
  background-position:center;
  overflow-x:hidden;
  animation:pageFadeIn .6s ease both;
}
/* background-attachment:fixed is not supported on iOS/mobile Safari and
   also hurts scroll performance on lower-end phones -- Bhutan's own
   internet usage is mobile-heavy, so this is switched to normal scrolling
   attachment below ~900px rather than silently failing there. */
@media (max-width:900px){
  body{background-attachment:scroll;}
}
@keyframes pageFadeIn{from{opacity:0;}to{opacity:1;}}

img{max-width:100%;height:auto;display:block;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;margin:0;padding:0;}
button{font-family:inherit;}

h1,h2,h3,h4{
  font-family:'Playfair Display',serif;
  font-weight:600;
  letter-spacing:.4px;
  line-height:1.15;
  margin:0 0 .5em;
  color:var(--text-dark);
}
h1{font-size:clamp(2rem,5vw,3rem);}
h2{font-size:clamp(1.6rem,4vw,2.25rem);}
h3{font-size:1.3rem;}
p{margin:0 0 1em;}

.container{width:100%;max-width:var(--container-max);margin:0 auto;padding:0 15px;}

.skip-link{
  position:absolute;left:-9999px;top:auto;background:var(--gold);color:#1a1a2e;
  padding:10px 16px;z-index:1000;font-weight:700;border-radius:0 0 6px 0;
}
.skip-link:focus{left:0;top:0;}

:focus-visible{outline:3px solid var(--gold);outline-offset:2px;}

/* ---------------------------------------------------------------------
   Buttons
   --------------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 26px;border-radius:var(--radius);font-weight:700;font-size:.92rem;
  letter-spacing:.4px;border:2px solid transparent;cursor:pointer;
  transition:transform .2s ease,box-shadow .2s ease,background .3s ease,color .3s ease;
}
.btn:hover{transform:scale(1.02);box-shadow:var(--shadow-soft);}
.btn-gold{background:var(--gold);color:#1a1a2e;border-color:var(--gold);}
.btn-gold:hover{background:transparent;color:var(--gold);border-color:var(--gold);}
.btn-outline{background:transparent;color:var(--text-light);border-color:var(--gold);}
.btn-outline:hover{background:var(--gold);color:#1a1a2e;}
.btn-maroon{background:var(--maroon);color:#fff;border-color:var(--maroon);}
.btn-maroon:hover{background:transparent;color:var(--maroon);}

/* ---------------------------------------------------------------------
   Content cards — paper-card effect
   --------------------------------------------------------------------- */
.card-surface{
  background:rgba(245,240,232,.92);
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
  border:1px solid rgba(212,175,55,.3);
  border-radius:10px;
}
.section{padding:70px 0;}
.section-tight{padding:44px 0;}
.section-dark{
  background:linear-gradient(rgba(26,26,46,.92),rgba(26,26,46,.92)),url('../images/bhutanese-paper.jpg');
  background-size:cover;background-position:center;background-attachment:scroll;
  color:var(--text-light);
}
.section-dark h1,.section-dark h2,.section-dark h3{color:var(--text-light);}

/* Headings inside any dark/photo hero context must inherit the light
   text color -- the global h1..h4{color:var(--text-dark)} rule above is
   an explicit declaration, so it otherwise wins over inheritance from
   the ancestor even though the ancestor sets color:var(--text-light).
   Without this, every hero headline renders as near-black text on a
   dark photo (a real contrast/accessibility failure, not just a style
   miss -- confirmed by direct screenshot review). */
.hero-slider-content h1,.hero-slider-content h2,.hero-slider-content h3,
.page-hero h1,.page-hero h2,.page-hero h3{
  color:var(--text-light);
}
.eyebrow{
  display:inline-block;font-family:'Open Sans',sans-serif;font-weight:700;font-size:.78rem;
  letter-spacing:1.5px;text-transform:uppercase;color:var(--orange);margin-bottom:10px;
}
.section-head{text-align:center;max-width:720px;margin:0 auto 42px;}
.section-head p{color:#5c4a3a;}
.section-dark .section-head p{color:rgba(245,240,232,.8);}

/* ---------------------------------------------------------------------
   Header
   --------------------------------------------------------------------- */
.topbar{
  background:linear-gradient(90deg,var(--gold),var(--orange));
  color:#1a1a2e;font-size:.8rem;font-weight:600;
}
.topbar .container{display:flex;justify-content:space-between;align-items:center;padding-top:6px;padding-bottom:6px;gap:12px;flex-wrap:wrap;}
.topbar-contact{display:flex;gap:18px;flex-wrap:wrap;}
.topbar-contact a{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;}
.topbar-social{display:flex;gap:12px;}
.topbar-social a{width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:50%;background:rgba(26,26,46,.12);transition:background .2s ease;}
.topbar-social a:hover{background:rgba(26,26,46,.25);}
.topbar-social svg{width:13px;height:13px;}

.site-header{
  position:sticky;top:0;z-index:200;
  background:linear-gradient(rgba(26,26,46,.88),rgba(26,26,46,.8));
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  transition:background .3s ease,box-shadow .3s ease,padding .3s ease;
  padding:16px 0;
}
.site-header.scrolled{
  background:#1a1a2e;box-shadow:0 6px 22px rgba(0,0,0,.28);padding:8px 0;
}
.header-row{display:flex;align-items:center;justify-content:space-between;gap:20px;}

.brand{display:flex;align-items:center;gap:12px;flex:none;}
.brand-logo{width:60px;height:60px;flex:none;animation:logoFloat 4s ease-in-out infinite;transition:width .3s ease,height .3s ease;}
.site-header.scrolled .brand-logo{width:46px;height:46px;}
@keyframes logoFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-3px);}}
.brand-text{line-height:1.2;}
.brand-text .brand-name{font-family:'Playfair Display',serif;font-weight:700;font-size:1.4rem;color:var(--gold);letter-spacing:.5px;}
.brand-text small{display:block;font-family:'Open Sans',sans-serif;font-size:.68rem;letter-spacing:1px;text-transform:uppercase;color:var(--text-light);opacity:.85;}
@media (max-width:480px){.brand-text{display:none;}}

nav.primary{display:flex;gap:4px;align-items:center;flex:1;justify-content:center;flex-wrap:nowrap;}
nav.primary > a,nav.primary .nav-item > .nav-link{
  font-family:'Open Sans',sans-serif;font-size:.82rem;font-weight:700;text-transform:uppercase;
  letter-spacing:1.3px;color:var(--text-light);position:relative;padding:10px 13px;
  white-space:nowrap;display:inline-flex;align-items:center;gap:5px;
  background:none;border:none;cursor:pointer;
}
nav.primary > a::after,nav.primary .nav-item > .nav-link::after{
  content:'';position:absolute;left:13px;right:13px;bottom:4px;height:2px;background:var(--gold);
  transform:scaleX(0);transform-origin:left;transition:transform .25s ease;
}
nav.primary > a:hover::after,nav.primary .nav-item:hover > .nav-link::after,
nav.primary > a.active::after,nav.primary .nav-item.active > .nav-link::after{transform:scaleX(1);}
nav.primary > a:hover,nav.primary .nav-item > .nav-link:hover,
nav.primary > a.active,nav.primary .nav-item.active > .nav-link{color:var(--gold);}
.chev{width:11px;height:11px;flex:none;transition:transform .2s ease;}
.chev-right{transform:rotate(-90deg);}

.nav-item{position:relative;}
@media (min-width:993px){
  .dropdown-panel{
    position:absolute;top:100%;left:0;margin-top:6px;min-width:230px;
    background:#fff;border-radius:8px;padding:8px;
    box-shadow:0 16px 36px rgba(20,14,10,.2);
    display:flex;flex-direction:column;gap:1px;
    opacity:0;visibility:hidden;transform:translateY(6px);
    transition:opacity .16s ease,transform .16s ease,visibility .16s;z-index:210;
  }
  .nav-item.open > .dropdown-panel,.nav-item:hover > .dropdown-panel,.nav-item:focus-within > .dropdown-panel{
    opacity:1;visibility:visible;transform:translateY(0);
  }
  .nav-item.open > .nav-link .chev{transform:rotate(180deg);}
  .dropdown-panel a{padding:10px 12px;border-radius:6px;white-space:nowrap;color:var(--text-dark);font-size:.85rem;font-weight:600;text-transform:none;letter-spacing:normal;}
  .dropdown-panel a:hover{background:rgba(212,175,55,.12);color:var(--maroon);}
  .sub-dropdown > .nav-link{width:100%;justify-content:space-between;color:var(--text-dark);text-transform:none;letter-spacing:normal;font-size:.85rem;padding:10px 12px;}
  .sub-dropdown > .nav-link::after{display:none;}
  .sub-panel{top:0;left:100%;margin-top:0;margin-left:4px;}
  .sub-dropdown.open > .sub-panel,.sub-dropdown:hover > .sub-panel,.sub-dropdown:focus-within > .sub-panel{opacity:1;visibility:visible;transform:translateY(0);}
  .sub-dropdown.open > .nav-link .chev-right{transform:rotate(0deg);}
}

.header-actions{display:flex;align-items:center;gap:14px;flex:none;}
.nav-toggle{display:none;background:none;border:none;color:var(--text-light);cursor:pointer;padding:4px;flex:none;}
.nav-toggle svg{width:26px;height:26px;}

@media (max-width:992px){
  nav.primary{
    position:fixed;inset:0;background:linear-gradient(rgba(26,26,46,.97),rgba(26,26,46,.97)),url('../images/bhutanese-paper.jpg');
    background-size:cover;background-position:center;
    flex-direction:column;justify-content:center;align-items:center;
    padding:40px;gap:2px;transform:translateY(-100%);transition:transform .4s ease;z-index:250;
    overflow-y:auto;
  }
  nav.primary.open{transform:translateY(0);}
  nav.primary .brand-mobile{display:flex;flex-direction:column;align-items:center;margin-bottom:24px;}
  nav.primary .brand-mobile img{width:80px;height:80px;margin-bottom:8px;}
  nav.primary > a,nav.primary .nav-item{width:100%;max-width:320px;text-align:center;opacity:0;transform:translateY(10px);animation:navItemIn .4s ease forwards;}
  nav.primary.open > a,nav.primary.open .nav-item{animation-play-state:running;}
  nav.primary > a{padding:14px 0;font-size:1rem;}
  nav.primary .nav-item > .nav-link{width:100%;justify-content:center;font-size:1rem;padding:14px 0;}
  nav.primary .dropdown-panel{display:none;flex-direction:column;padding-bottom:8px;}
  nav.primary .nav-item.open > .dropdown-panel{display:flex;}
  nav.primary .nav-item.open > .nav-link .chev{transform:rotate(180deg);}
  nav.primary .dropdown-panel a{color:var(--text-light);opacity:.85;font-size:.9rem;padding:8px 0;text-transform:none;letter-spacing:normal;}
  nav.primary .sub-panel{padding-left:10px;}
  @keyframes navItemIn{to{opacity:1;transform:translateY(0);}}
  .nav-toggle{display:block;}
  .header-actions .btn-gold{display:none;}
}
@media (min-width:993px){
  nav.primary .brand-mobile{display:none;}
}

.fab-book{
  display:none;position:fixed;right:18px;bottom:18px;z-index:150;
  width:auto;padding:14px 20px;border-radius:50px;
  background:var(--gold);color:#1a1a2e;font-weight:700;box-shadow:0 10px 26px rgba(0,0,0,.28);
}
@media (max-width:992px){.fab-book{display:inline-flex;}}
/* The trekking-page hero silhouette is a purely decorative accent
   (aria-hidden, empty alt) positioned to sit beside the headline text on
   wide screens. On narrow viewports there's no room beside a full-width
   text column, so it lands directly on top of the headline instead --
   confirmed by direct device-emulation screenshot on iPhone SE. Since
   it carries no information (decorative only), hiding it below the
   point where it stops fitting is the correct fix rather than trying to
   force it to coexist with the text. */
@media (max-width:768px){.trekking-hero-silhouette{display:none;}}

/* ---------------------------------------------------------------------
   Hero sections
   --------------------------------------------------------------------- */
.page-hero{
  position:relative;min-height:clamp(360px,55vh,560px);display:flex;align-items:center;
  background-size:cover;background-position:center;color:var(--text-light);overflow:hidden;
}
.page-hero::after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,rgba(15,10,8,.88),rgba(15,10,8,.42));}
.page-hero .container{position:relative;z-index:2;}
.page-hero .eyebrow{color:var(--gold-light);}

.hero-slider{position:relative;overflow:hidden;color:var(--text-light);min-height:clamp(480px,82vh,820px);display:flex;align-items:flex-end;}
.hero-slider .slide{position:absolute;inset:0;opacity:0;transition:opacity 1.1s ease;}
.hero-slider .slide.active{opacity:1;z-index:1;}
.hero-slider .slide img{width:100%;height:100%;object-fit:cover;animation:kenburns 11s ease-in-out infinite alternate;}
.hero-slider .slide::after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,rgba(9,9,20,.92) 0%,rgba(9,9,20,.5) 45%,rgba(9,9,20,.2) 100%);}
@keyframes kenburns{from{transform:scale(1);}to{transform:scale(1.09);}}
.hero-slider-content{position:relative;z-index:2;padding:56px 0;width:100%;}
/* The mobile "Book Now" FAB (see .fab-book) is fixed to the bottom-right
   of the *viewport*, not the page -- on shorter phones (iPhone SE and
   similar) it can sit directly on top of the hero's own paragraph text
   before any scrolling happens, confirmed by direct device-emulation
   screenshot testing. Reserving extra bottom padding on the hero content
   specifically on mobile keeps text clear of that corner regardless of
   viewport height.
   NOTE ON SPECIFICITY: this element also carries the .container class
   (`<div class="container hero-slider-content">`), and a later
   `@media(max-width:576px){.container{padding:0 15px}}` rule (added for
   the general responsive pass, see bottom of file) has *equal*
   specificity to a plain `.hero-slider-content{...}` rule and sits later
   in the cascade -- so a same-specificity override there silently wins
   and resets padding-bottom back to 0 on the smallest phones specifically
   (confirmed by direct getComputedStyle testing, not just theory). Using
   the descendant selector below raises specificity above `.container`'s
   so this fix can't be silently undone by an unrelated rule again,
   regardless of where either rule sits in the file. */
@media (max-width:992px){.hero-slider .hero-slider-content{padding-bottom:90px;}}
.hero-slider .slide-caption{display:none;}
.hero-slider .slide-caption.active{display:block;animation:fadeUp .8s ease both;}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px);}to{opacity:1;transform:translateY(0);}}
.hero-namaskar-overlay{position:absolute;right:24px;bottom:24px;width:120px;opacity:.22;z-index:2;pointer-events:none;}
@media (max-width:700px){.hero-namaskar-overlay{width:80px;}}

.slider-dots{display:flex;gap:26px;margin-top:34px;align-items:flex-end;}
.slider-dots button:not(:last-child){margin-right:26px;}
.slider-dots button{
  all:unset;cursor:pointer;box-sizing:border-box;
  font:600 13px/1 'Open Sans',sans-serif;letter-spacing:.08em;
  color:rgba(255,255,255,.42);padding-bottom:12px;position:relative;
  transition:color .3s ease;
}
.slider-dots button::before{content:attr(data-n);}
.slider-dots button::after{
  content:'';position:absolute;left:0;bottom:0;height:2px;width:26px;
  background:rgba(255,255,255,.28);transition:background .3s ease;
}
.slider-dots button.active{color:#fff;}
.slider-dots button.active::after{background:var(--gold);}
.slider-arrows{position:absolute;inset:0;display:flex;align-items:center;justify-content:flex-end;padding:0 26px;pointer-events:none;z-index:3;}
.slider-arrows .slider-prev{display:none;}
.slider-arrows button{pointer-events:auto;width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.55);
  background:rgba(20,14,10,.35);color:#fff;font-size:1.4rem;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.slider-arrows button:hover{background:var(--gold);color:#1a1a2e;border-color:var(--gold);}
@media (max-width:700px){.slider-arrows{display:none;}}

/* ---------------------------------------------------------------------
   Stats bar
   --------------------------------------------------------------------- */
.stats-bar{background:var(--maroon);color:#fff;padding:34px 0;}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;text-align:center;}
.stats-grid .num{font-family:'Playfair Display',serif;font-size:clamp(1.8rem,4vw,2.6rem);font-weight:700;color:var(--gold-light);}
.stats-grid .label{font-size:.82rem;letter-spacing:.6px;text-transform:uppercase;opacity:.9;}
@media (max-width:767px){.stats-grid{grid-template-columns:repeat(2,1fr);gap:26px;}}

/* ---------------------------------------------------------------------
   Grids: journeys / cards
   --------------------------------------------------------------------- */
.grid{display:grid;gap:26px;}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}
.grid-2{grid-template-columns:repeat(2,1fr);}
@media (max-width:991px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr);}}
@media (max-width:576px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr;}}

.j-card{
  border-radius:10px;overflow:hidden;background:#fff;box-shadow:var(--shadow-soft);
  transition:transform .25s ease,box-shadow .25s ease;
}
.j-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lift);}
.j-card .img-wrap{position:relative;aspect-ratio:4/3;overflow:hidden;}
.j-card .img-wrap img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
.j-card:hover .img-wrap img{transform:scale(1.06);}
.j-card .tag{
  position:absolute;top:12px;left:12px;background:var(--gold);color:#1a1a2e;
  font-size:.7rem;font-weight:700;letter-spacing:.6px;text-transform:uppercase;
  padding:5px 10px;border-radius:20px;
}
.j-card .body{padding:18px 20px 20px;}
.j-card h3{margin-bottom:6px;font-size:1.15rem;}
.j-card .meta{display:flex;gap:14px;font-size:.82rem;color:#7a6a58;margin-bottom:10px;}
.j-card .meta span{display:inline-flex;align-items:center;gap:5px;}
.j-card .meta svg{width:14px;height:14px;}

.filter-bar{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:36px;}
.filter-bar button{
  padding:9px 18px;border-radius:24px;border:1.5px solid rgba(212,175,55,.5);background:transparent;
  font-weight:700;font-size:.82rem;letter-spacing:.4px;cursor:pointer;transition:background .2s ease,color .2s ease;color:var(--text-dark);
}
.filter-bar button.active,.filter-bar button:hover{background:var(--gold);color:#1a1a2e;border-color:var(--gold);}

/* ---------------------------------------------------------------------
   Traveler types / icon cards
   --------------------------------------------------------------------- */
.icon-card{text-align:center;padding:30px 22px;}
.icon-card .icon-circle{
  width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,var(--gold),var(--orange));
  display:flex;align-items:center;justify-content:center;margin:0 auto 16px;color:#1a1a2e;
}
.icon-card .icon-circle svg{width:30px;height:30px;}

/* ---------------------------------------------------------------------
   Testimonial
   --------------------------------------------------------------------- */
.testimonial{max-width:760px;margin:0 auto;text-align:center;}
.testimonial blockquote{font-family:'Playfair Display',serif;font-size:clamp(1.3rem,3vw,1.7rem);font-style:italic;margin:0 0 18px;line-height:1.5;}
.testimonial cite{font-style:normal;font-weight:700;color:var(--maroon);}

/* ---------------------------------------------------------------------
   Newsletter / CTA band
   --------------------------------------------------------------------- */
.cta-band{background:linear-gradient(120deg,var(--maroon),#5c1414);color:#fff;text-align:center;padding:60px 0;}
.cta-band h2{color:#fff;}
.cta-band form{display:flex;gap:10px;max-width:460px;margin:22px auto 0;flex-wrap:wrap;justify-content:center;}
.cta-band input[type=email]{flex:1;min-width:220px;padding:13px 16px;border-radius:6px;border:none;font-size:.95rem;}

/* ---------------------------------------------------------------------
   Forms — floating labels
   --------------------------------------------------------------------- */
.amj-form{max-width:640px;}
.form-row{display:flex;gap:16px;margin-bottom:22px;}
@media (max-width:576px){.form-row{flex-direction:column;gap:22px;}}
.field{position:relative;flex:1;}
.field input,.field select,.field textarea{
  width:100%;background:transparent;border:none;border-bottom:2px solid rgba(212,175,55,.5);
  padding:12px 2px 10px;font-size:1rem;font-family:inherit;color:var(--text-dark);transition:border-color .3s ease,box-shadow .3s ease;
}
.field textarea{resize:vertical;min-height:110px;}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--gold);box-shadow:0 2px 0 0 rgba(212,175,55,.35);
}
.field label{
  position:absolute;left:2px;top:12px;font-size:1rem;color:#8a7a68;pointer-events:none;
  transition:all .2s ease;background:transparent;
}
.field input:focus + label,.field input:not(:placeholder-shown) + label,
.field textarea:focus + label,.field textarea:not(:placeholder-shown) + label,
.field.has-value label{
  top:-14px;font-size:.72rem;color:var(--maroon);font-weight:700;letter-spacing:.4px;
}
.field select{appearance:none;background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%232c1810" stroke-width="2"><path d="m6 9 6 6 6-6"/></svg>');background-repeat:no-repeat;background-position:right 2px center;background-size:16px;padding-right:22px;}
.field-note{font-size:.78rem;color:#8a7a68;margin-top:-10px;margin-bottom:18px;}
.amj-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden;}

/* ---------------------------------------------------------------------
   Gallery & Music page
   --------------------------------------------------------------------- */
.gallery-slideshow{
  max-width:1200px;margin:0 auto;position:relative;border:3px solid var(--gold);border-radius:8px;
  overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.3);aspect-ratio:16/9;background:#000;
}
.gallery-slideshow .g-slide{position:absolute;inset:0;opacity:0;transition:opacity .8s ease-in-out;}
.gallery-slideshow .g-slide.active{opacity:1;z-index:1;}
.gallery-slideshow .g-slide img{width:100%;height:100%;object-fit:cover;}
.gallery-slideshow .g-caption{
  position:absolute;left:0;right:0;bottom:0;z-index:2;background:linear-gradient(0deg,rgba(0,0,0,.78),transparent);
  color:#fff;padding:26px 26px 18px;
}
.gallery-slideshow .g-caption .g-title{font-family:'Playfair Display',serif;font-size:1.25rem;margin-bottom:2px;}
.gallery-slideshow .g-caption .g-loc{font-size:.82rem;opacity:.85;letter-spacing:.4px;}
.gallery-dots{display:flex;justify-content:center;gap:8px;margin-top:18px;}
.gallery-dots button{width:9px;height:9px;border-radius:50%;border:none;background:rgba(44,24,16,.25);cursor:pointer;padding:0;}
.gallery-dots button.active{background:var(--gold);}

.music-player{
  max-width:640px;margin:50px auto 0;background:linear-gradient(135deg,#1a1a2e,#2a1f1a);
  border-radius:14px;padding:30px 28px;color:#fff;box-shadow:var(--shadow-lift);
}
.music-player .mp-top{display:flex;align-items:center;gap:18px;}
.mp-playbtn{
  width:58px;height:58px;border-radius:50%;background:var(--gold);border:none;flex:none;
  display:flex;align-items:center;justify-content:center;cursor:pointer;color:#1a1a2e;transition:transform .2s ease;
}
.mp-playbtn:hover{transform:scale(1.06);}
.mp-playbtn svg{width:22px;height:22px;}
.mp-titles{flex:1;min-width:0;}
.mp-titles .mp-track{font-family:'Playfair Display',serif;font-size:1.05rem;margin-bottom:2px;}
.mp-titles .mp-sub{font-size:.8rem;color:rgba(245,240,232,.65);}
.mp-visualizer{display:flex;align-items:flex-end;gap:4px;height:26px;flex:none;}
.mp-visualizer span{width:4px;background:var(--gold);border-radius:2px;height:6px;}
.music-player.playing .mp-visualizer span{animation:mpBar 1s ease-in-out infinite;}
.music-player.playing .mp-visualizer span:nth-child(1){animation-delay:0s;}
.music-player.playing .mp-visualizer span:nth-child(2){animation-delay:.15s;}
.music-player.playing .mp-visualizer span:nth-child(3){animation-delay:.3s;}
.music-player.playing .mp-visualizer span:nth-child(4){animation-delay:.1s;}
.music-player.playing .mp-visualizer span:nth-child(5){animation-delay:.25s;}
@keyframes mpBar{0%,100%{height:6px;}50%{height:24px;}}
.mp-progress-track{width:100%;height:5px;background:rgba(255,255,255,.15);border-radius:4px;margin-top:20px;overflow:hidden;cursor:pointer;}
.mp-progress-fill{height:100%;width:0%;background:linear-gradient(90deg,var(--gold),var(--orange));transition:width .3s linear;}
.mp-time{display:flex;justify-content:space-between;font-size:.72rem;color:rgba(245,240,232,.6);margin-top:6px;}
.mp-note{font-size:.74rem;color:rgba(245,240,232,.5);margin-top:16px;line-height:1.5;}

/* ---------------------------------------------------------------------
   Footer
   --------------------------------------------------------------------- */
.site-footer{
  position:relative;color:var(--text-light);
  background:linear-gradient(rgba(26,26,46,.9),rgba(26,26,46,.9)),url('../images/bhutanese-paper.jpg');
  background-size:cover;background-position:center;background-attachment:scroll;
}
.footer-top{padding:60px 0 40px;}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px;}
@media (max-width:991px){.footer-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:576px){.footer-grid{grid-template-columns:1fr;}}
.footer-col h4{
  font-family:'Playfair Display',serif;color:var(--gold);font-size:1.05rem;margin-bottom:14px;position:relative;padding-bottom:10px;
}
.footer-col h4::after{content:'';position:absolute;left:0;bottom:0;width:30px;height:2px;background:var(--gold);}
.footer-col a{display:block;color:var(--text-light);opacity:.82;padding:5px 0;font-size:.9rem;transition:color .2s ease,opacity .2s ease;}
.footer-col a:hover{color:var(--gold);opacity:1;}
.footer-brand-logo{width:52px;height:52px;margin-bottom:12px;}
.footer-col p{opacity:.78;font-size:.88rem;}
.footer-social{display:flex;gap:10px;margin-top:14px;}
.footer-social a{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;padding:0;}
.footer-social a:hover{background:var(--gold);color:#1a1a2e;}
.footer-social svg{width:15px;height:15px;}
.trust-badges{display:flex;flex-direction:column;gap:10px;}
.trust-badges .badge{display:flex;align-items:center;gap:10px;font-size:.82rem;opacity:.85;}
.trust-badges svg{width:18px;height:18px;flex:none;color:var(--gold);}

.footer-bottom{border-top:1px solid rgba(212,175,55,.3);padding:20px 0;}
.footer-bottom .container{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;font-size:.8rem;opacity:.8;}
@media (max-width:767px){.footer-bottom .container{flex-direction:column;text-align:center;}}

.back-to-top{
  position:fixed;right:18px;bottom:84px;z-index:150;width:46px;height:46px;border-radius:50%;
  background:var(--gold);color:#1a1a2e;border:none;display:flex;align-items:center;justify-content:center;
  cursor:pointer;box-shadow:0 8px 20px rgba(0,0,0,.25);opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .25s ease,transform .25s ease,visibility .25s;
}
.back-to-top.show{opacity:1;visibility:visible;transform:translateY(0);}
.back-to-top svg{width:20px;height:20px;}
@media (max-width:992px){.back-to-top{bottom:80px;}}

/* ---------------------------------------------------------------------
   Scroll-reveal (IntersectionObserver driven)
   --------------------------------------------------------------------- */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .7s ease,transform .7s ease;}
.reveal.in-view{opacity:1;transform:translateY(0);}

/* ---------------------------------------------------------------------
   About page: timeline, team, licensing, accordion
   --------------------------------------------------------------------- */
.timeline{position:relative;max-width:760px;margin:0 auto;padding-left:26px;border-left:2px solid rgba(212,175,55,.4);}
.timeline-item{position:relative;padding-bottom:34px;}
.timeline-item::before{content:'';position:absolute;left:-32px;top:4px;width:12px;height:12px;border-radius:50%;background:var(--gold);border:2px solid #fff;}
.timeline-item .year{font-family:'Playfair Display',serif;font-weight:700;color:var(--maroon);font-size:1.1rem;}

.license-frame{
  border:4px solid var(--gold);border-radius:10px;padding:18px;background:#fff;max-width:340px;margin:0 auto;
  box-shadow:var(--shadow-soft);text-align:center;
}
.license-frame img{border-radius:4px;}
.license-frame figcaption{margin-top:12px;font-family:'Playfair Display',serif;font-style:italic;color:var(--maroon);font-size:.95rem;}

.accordion-item{border-bottom:1px solid rgba(212,175,55,.35);}
.accordion-item button{
  width:100%;text-align:left;background:none;border:none;padding:16px 0;font-weight:700;font-size:1rem;
  display:flex;justify-content:space-between;align-items:center;cursor:pointer;color:var(--text-dark);
}
.accordion-item .chev{transition:transform .25s ease;}
.accordion-item.open .chev{transform:rotate(180deg);}
.accordion-panel{max-height:0;overflow:hidden;transition:max-height .3s ease;}
.accordion-item.open .accordion-panel{max-height:600px;}
.accordion-panel-inner{padding:0 0 18px;color:#5c4a3a;font-size:.93rem;line-height:1.7;}

/* ---------------------------------------------------------------------
   Utility
   --------------------------------------------------------------------- */
.text-center{text-align:center;}
.mt-0{margin-top:0;}
.small{font-size:.85rem;}
.badge-row{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:16px;}
.badge-pill{background:rgba(212,175,55,.15);border:1px solid rgba(212,175,55,.4);color:var(--maroon);
  font-size:.76rem;font-weight:700;padding:6px 14px;border-radius:20px;}

/* ---------------------------------------------------------------------
   Responsive breakpoints (per brief section 5)
   --------------------------------------------------------------------- */
@media (max-width:576px){
  h1{font-size:28px;}
  h2{font-size:22px;}
  body{font-size:14px;}
  .container{padding:0 15px;}
  .section{padding:46px 0;}
}
@media (min-width:577px) and (max-width:767px){
  .grid-4{grid-template-columns:repeat(2,1fr);}
}
@media (min-width:768px) and (max-width:991px){
  h1{font-size:36px;}
  h2{font-size:28px;}
  .grid-4{grid-template-columns:repeat(3,1fr);}
}
@media (min-width:992px) and (max-width:1199px){
  .grid-4{grid-template-columns:repeat(4,1fr);}
}
@media (min-width:1200px){
  h1{font-size:48px;}
  h2{font-size:36px;}
  .container{max-width:1320px;}
}
@media (min-width:1400px){
  .container{max-width:1400px;}
}