/* ============================================================
   Self-hosted variable fonts (no third-party request).
   Inter replaces Manrope: Manrope is missing the Kazakh
   letters ә ғ қ ң ұ, which made kk body text fall back to a
   system font mid-word. Inter covers them all.
   Subsets: latin, latin-ext, cyrillic, cyrillic-ext.
   unicode-range means the browser fetches only what it needs.
   ============================================================ */
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url(/assets/fonts/inter-normal-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url(/assets/fonts/inter-normal-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url(/assets/fonts/inter-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url(/assets/fonts/inter-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 300 400;
  font-display: swap;
  src: url(/assets/fonts/cormorant-italic-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 300 400;
  font-display: swap;
  src: url(/assets/fonts/cormorant-italic-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 300 400;
  font-display: swap;
  src: url(/assets/fonts/cormorant-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 300 400;
  font-display: swap;
  src: url(/assets/fonts/cormorant-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url(/assets/fonts/cormorant-normal-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url(/assets/fonts/cormorant-normal-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url(/assets/fonts/cormorant-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url(/assets/fonts/cormorant-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================
   ROYALS LIVE BAND
   Obsidian + gold foil.  Cormorant Garamond / Inter.
   ============================================================ */

:root{
  --ink:#07070a; --ink-2:#0b0b10; --ink-3:#111117; --ink-4:#17171f;
  --gold:#d4b46a; --gold-lt:#f0dcab; --gold-dk:#8a6f31;
  --paper:#f4f1ea; --paper-2:rgba(244,241,234,.74); --paper-3:rgba(244,241,234,.50);
  --line:rgba(212,180,106,.22); --line-soft:rgba(244,241,234,.09);

  --ff-display:'Cormorant Garamond','Times New Roman',Georgia,serif;
  --ff-ui:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI','Helvetica Neue',Arial,sans-serif;

  --gut:20px; --shell:min(1280px, 100% - 2*var(--gut));
  --nav-h:66px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --r:3px;
}
@media (min-width:700px){ :root{ --gut:32px; } }
@media (min-width:1100px){ :root{ --gut:56px; --nav-h:78px; } }

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }
body{
  margin:0; background:var(--ink); color:var(--paper);
  font-family:var(--ff-ui); font-size:16px; line-height:1.65; font-weight:300;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
body.is-locked{ overflow:hidden; }
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
input,textarea,select{ font:inherit; color:inherit; }
h1,h2,h3,h4{ margin:0; font-weight:400; }
p{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
figure{ margin:0; }
::selection{ background:var(--gold); color:var(--ink); }
:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:2px; }

.vh{ position:absolute!important; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; }
.skip{ position:absolute; left:-9999px; top:8px; z-index:99; padding:12px 20px;
  background:var(--gold); color:var(--ink); border-radius:999px; font-size:.8rem; font-weight:700; }
.skip:focus{ left:12px; }

/* ---------- primitives ---------- */
.shell{ width:var(--shell); margin-inline:auto; }

.display{
  font-family:var(--ff-display); font-weight:300; text-wrap:balance;
  line-height:1.03; letter-spacing:-.018em;
  font-size:clamp(2.1rem,5.4vw,4.1rem);
}
.display em{ font-style:italic; color:var(--gold-lt); }

.eyebrow{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap; line-height:1.7;
  font-size:.66rem; font-weight:700; letter-spacing:.3em; text-transform:uppercase; color:var(--gold);
}
.eyebrow::before{ content:''; width:30px; height:1px; flex:none;
  background:linear-gradient(90deg,transparent,var(--gold)); }
.eyebrow--center{ justify-content:center; }
.eyebrow--center::after{ content:''; width:30px; height:1px; flex:none;
  background:linear-gradient(90deg,var(--gold),transparent); }
@media (max-width:620px){ .eyebrow{ font-size:.58rem; letter-spacing:.2em; gap:9px; } }

.lede{ font-size:clamp(1rem,1.5vw,1.14rem); color:var(--paper-2); line-height:1.78; }
.muted{ color:var(--paper-3); }

.gold-text{
  background:linear-gradient(103deg,#8a6f31 0%,#d4b46a 26%,#f6e7bd 48%,#d4b46a 70%,#9a7c39 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

.section{ position:relative; padding:clamp(72px,10vw,140px) 0; }
.section--flush{ padding:0 0 clamp(48px,7vw,96px); }
.section-head{ max-width:800px; }
.section-head .eyebrow{ margin-bottom:20px; }
.section-head .display{ margin-bottom:20px; }
.section-head--center{ margin-inline:auto; text-align:center; }
.section-head--center .eyebrow{ justify-content:center; }
.center-cta{ text-align:center; margin-top:34px; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 30px; border-radius:999px; cursor:pointer;
  font-size:.74rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  background:var(--gold); color:var(--ink); text-align:center;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .3s, color .3s, border-color .3s;
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 14px 34px -14px rgba(212,180,106,.6); }
.btn:active{ transform:translateY(0); }
.btn--gold{ background:linear-gradient(100deg,#c9a860,#f0dcab 52%,#c9a860); }
.btn--ghost{ background:transparent; color:var(--paper); border:1px solid var(--line); }
.btn--ghost:hover{ border-color:var(--gold); color:var(--gold-lt); box-shadow:none; }
.btn--sm{ padding:12px 22px; font-size:.66rem; }
.btn--block{ width:100%; }

.link-u{
  display:inline-flex; align-items:center; gap:10px; padding-bottom:5px;
  font-size:.72rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--gold);
  border-bottom:1px solid var(--line); transition:border-color .3s,color .3s,gap .3s;
}
.link-u:hover{ border-color:var(--gold); color:var(--gold-lt); gap:16px; }

/* ---------- ambience ---------- */
.grain{
  position:fixed; inset:0; z-index:60; pointer-events:none; opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
.glow{
  position:absolute; border-radius:50%; pointer-events:none; z-index:0; filter:blur(40px);
  background:radial-gradient(circle,rgba(212,180,106,.13),transparent 68%);
}
.glow--a{ width:min(560px,80vw); aspect-ratio:1; left:-14%; top:6%; }
.glow--b{ width:min(620px,86vw); aspect-ratio:1; right:-16%; bottom:-8%; }
.glow--c{ width:min(580px,82vw); aspect-ratio:1; left:-15%; top:-10%; }
.glow--d{ width:min(700px,90vw); aspect-ratio:1; left:50%; translate:-50% 0; top:-16%; }

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; inset:0 0 auto; z-index:50; height:var(--nav-h);
  display:flex; align-items:center; border-bottom:1px solid transparent;
  transition:background .4s var(--ease), border-color .4s, height .4s var(--ease);
}
.nav.is-stuck{
  height:60px; background:rgba(9,9,13,.78);
  -webkit-backdrop-filter:blur(18px) saturate(1.4); backdrop-filter:blur(18px) saturate(1.4);
  border-bottom-color:var(--line-soft);
}
.nav__inner{ width:var(--shell); margin-inline:auto; display:flex; align-items:center; gap:14px; }
@media (min-width:1100px){ .nav__inner{ gap:26px; } }

.brand{ display:flex; align-items:center; gap:10px; margin-right:auto; }
.brand__mark{ width:25px; height:25px; flex:none; }
.brand__txt{ display:flex; flex-direction:column; line-height:1; }
.brand__name{ font-family:var(--ff-display); font-size:1.12rem; font-weight:500; letter-spacing:.3em; text-transform:uppercase; }
.brand__sub{ font-size:.46rem; font-weight:700; letter-spacing:.4em; text-transform:uppercase; color:var(--gold); margin-top:4px; }

.nav__links{ display:none; align-items:center; gap:22px; flex-wrap:nowrap; }
@media (min-width:1180px){ .nav__links{ display:flex; } }
@media (min-width:1500px){ .nav__links{ gap:26px; } }
/* two secondary links only appear when there is genuinely room for them */
.nav__wide{ display:none; }
@media (min-width:1500px){ .nav__wide{ display:inline-block; } }
.nav__links a{
  position:relative; padding:6px 0; color:var(--paper-2); transition:color .3s; white-space:nowrap;
  font-size:.68rem; font-weight:500; letter-spacing:.13em; text-transform:uppercase;
}
.nav__links a::after{ content:''; position:absolute; left:0; bottom:0; height:1px; width:0;
  background:var(--gold); transition:width .35s var(--ease); }
.nav__links a:hover{ color:var(--paper); }
.nav__links a:hover::after{ width:100%; }

/* language switcher — full 3-pill row on larger screens */
.lang-box{ position:relative; flex:none; }
.lang{
  display:flex; align-items:center; gap:2px;
  padding:3px; border:1px solid var(--line-soft); border-radius:999px;
  background:rgba(255,255,255,.03);
}
.lang__b{
  min-width:38px; min-height:32px; padding:0 9px; border-radius:999px;
  font-size:.64rem; font-weight:700; letter-spacing:.09em; color:var(--paper-3);
  transition:color .25s, background .25s;
}
@media (min-width:700px){ .lang__b{ min-width:42px; min-height:34px; font-size:.67rem; } }
.lang__b:hover{ color:var(--paper); }
.lang__b.is-on{ background:var(--gold); color:var(--ink); }

/* on narrow phones the 3-pill row collapses into one compact circle that
   shows the current language; tapping it drops down the other two */
.lang-toggle{
  display:none; width:38px; height:38px; align-items:center; justify-content:center;
  border-radius:50%; border:1px solid var(--line-soft); background:rgba(255,255,255,.03);
  color:var(--gold); font-size:.62rem; font-weight:800; letter-spacing:.03em;
  transition:border-color .25s, background .25s, color .25s;
}
.lang-toggle:hover{ border-color:var(--line); }
@media (max-width:640px){
  .lang-toggle{ display:flex; }
  .lang{
    position:absolute; right:0; top:calc(100% + 10px); z-index:20;
    display:none; box-shadow:0 16px 34px -14px rgba(0,0,0,.75);
    background:rgba(15,14,17,.98);
  }
  .lang-box.is-open .lang{ display:flex; }
  .lang-box.is-open .lang-toggle{ border-color:var(--gold); color:var(--gold-lt); background:rgba(212,180,106,.1); }
}

.nav__cta{ display:none; }
@media (min-width:1180px){ .nav__cta{ display:inline-flex; white-space:nowrap; } }

/* compact booking button for the phone navbar */
.nav__cta-sm{
  display:inline-flex; flex:none; white-space:nowrap;
  padding:9px 14px; font-size:.58rem; letter-spacing:.11em;
}
@media (min-width:1180px){ .nav__cta-sm{ display:none; } }
/* the brand subtitle is decorative — drop it when space gets tight */
@media (max-width:420px){
  .brand__sub{ display:none; }
  .brand__name{ font-size:1.02rem; letter-spacing:.24em; }
  .nav__inner{ gap:10px; }
  .nav__cta-sm{ padding:9px 12px; font-size:.55rem; letter-spacing:.08em; }
}

.burger{ width:42px; height:42px; margin-right:-8px; position:relative; z-index:2; }
@media (min-width:1180px){ .burger{ display:none; } }
/* absolutely positioned + translate(-50%,-50%) so every bar pivots on the exact
   same center point — a grid/margin stack made the rotated bars miss each
   other's center and read as a ">" instead of an "X" */
.burger span{
  position:absolute; left:50%; top:50%; width:21px; height:1.5px;
  background:var(--paper); border-radius:2px;
  transform:translate(-50%,-50%) translateY(0) rotate(0deg);
  transition:transform .35s var(--ease), opacity .2s;
}
.burger span:nth-child(1){ transform:translate(-50%,-50%) translateY(-7px) rotate(0deg); }
.burger span:nth-child(3){ transform:translate(-50%,-50%) translateY(7px) rotate(0deg); }
.burger.is-open span:nth-child(1){ transform:translate(-50%,-50%) translateY(0) rotate(45deg); }
.burger.is-open span:nth-child(2){ opacity:0; }
.burger.is-open span:nth-child(3){ transform:translate(-50%,-50%) translateY(0) rotate(-45deg); }

.drawer{
  position:fixed; inset:0; z-index:45; background:var(--ink);
  display:flex; flex-direction:column; justify-content:flex-start;
  padding:calc(var(--nav-h) + 12px) var(--gut) calc(28px + env(safe-area-inset-bottom));
  overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
  opacity:0; visibility:hidden; transition:opacity .38s var(--ease), visibility .38s;
}
.drawer.is-open{ opacity:1; visibility:visible; }
.drawer__nav{ display:flex; flex-direction:column; }
.drawer__nav a{
  display:flex; align-items:baseline; gap:14px; padding:11px 0;
  border-bottom:1px solid var(--line-soft); opacity:0; transform:translateY(14px);
}
.drawer.is-open .drawer__nav a{ animation:drawerIn .5s var(--ease) forwards; }
.drawer__nav span{ font-size:.58rem; font-weight:700; letter-spacing:.2em; color:var(--gold-dk); }
.drawer__nav b{ font-family:var(--ff-display); font-weight:300;
  font-size:clamp(1.24rem,5.2vw,1.72rem); line-height:1.2; }
.drawer__foot{ margin-top:24px; }
.drawer__foot .drawer__soc{ display:flex; gap:10px; margin-bottom:16px; }
.drawer__foot .btn{ width:100%; }
@keyframes drawerIn{ to{ opacity:1; transform:none; } }

/* ============================================================
   HERO — split: type panel + photo plate
   ============================================================ */
.hero{
  position:relative; display:grid; align-items:center; overflow:hidden;
  padding-top:var(--nav-h);
  background:
    radial-gradient(120% 80% at 80% 10%, rgba(212,180,106,.10), transparent 60%),
    var(--ink);
}
.hero__glow{
  position:absolute; z-index:0; pointer-events:none; filter:blur(60px); border-radius:50%;
  width:min(720px,110vw); aspect-ratio:1; right:-10%; top:-14%;
  background:radial-gradient(circle,rgba(212,180,106,.17),transparent 66%);
}
.hero__wave{
  position:absolute; inset:auto 0 0 0; z-index:0; width:100%; height:58%;
  pointer-events:none;
}
@media (min-width:1000px){ .hero__wave{ height:72%; } }

.hero__award{ margin-bottom:22px; }
.hero__award .eyebrow{ margin-bottom:0; }
.hero__award-by{
  margin-top:7px; padding-left:42px;
  font-size:.7rem; letter-spacing:.09em; color:var(--paper-3);
}
@media (max-width:620px){ .hero__award-by{ padding-left:0; font-size:.68rem; } }

.socials{ display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; }
.soc{
  width:46px; height:46px; display:grid; place-items:center; border-radius:50%;
  border:1px solid var(--line); color:var(--gold);
  background:linear-gradient(140deg,rgba(212,180,106,.07),transparent);
  transition:transform .35s var(--ease), background .35s, border-color .35s, box-shadow .35s;
}
.soc svg{ width:18px; height:18px; fill:currentColor; }
.soc:hover{
  transform:translateY(-3px); border-color:var(--gold); color:var(--gold-lt);
  background:rgba(212,180,106,.14); box-shadow:0 12px 26px -12px rgba(212,180,106,.55);
}

.hero__media{ position:relative; z-index:1; }
.hero__plate{ position:relative; overflow:hidden; }
.hero__plate img{ width:100%; aspect-ratio:5/6; object-fit:cover; object-position:center 22%; }
.hero__plate::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(7,7,10,.42) 0%, transparent 26%, transparent 55%, var(--ink) 99%);
}
.hero__body{ position:relative; z-index:2; }
.hero__inner{ width:var(--shell); margin-inline:auto; }
.hero__inner .eyebrow{ margin-bottom:22px; }
/* band name set as the headline */
.wordmark{ margin:0 0 20px; display:inline-block; max-width:100%; }
.wordmark__name{
  display:block; font-family:var(--ff-display); font-weight:300;
  font-size:clamp(3.1rem,11.5vw,6.6rem); line-height:.92;
  letter-spacing:.11em; text-transform:uppercase; text-indent:.11em;
}
.wordmark__rule{
  display:block; height:1px; margin:clamp(12px,1.8vw,18px) 0;
  width:100%;
  background:linear-gradient(90deg,var(--gold-dk),var(--gold),transparent);
  position:relative;
}
.wordmark__rule::before{
  content:''; position:absolute; left:calc(50% - 3px); top:-3px;
  width:7px; height:7px; rotate:45deg; background:var(--gold);
}
.wordmark__sub{
  display:block; font-family:var(--ff-ui); color:var(--paper-2);
  font-size:clamp(.62rem,1.6vw,.84rem); font-weight:600;
  letter-spacing:clamp(.32em,1.5vw,.58em); text-transform:uppercase; text-indent:.4em;
}

.hero__claim{
  display:block; margin-bottom:20px; text-wrap:balance;
  font-family:var(--ff-display); font-style:italic; font-weight:300;
  font-size:clamp(1.3rem,3.2vw,1.95rem); line-height:1.24; color:var(--paper);
  max-width:20ch;
}
.hero__claim em{ font-style:italic; color:var(--gold-lt); }

.hero__meta{ color:var(--paper-2); font-size:clamp(.95rem,1.25vw,1.06rem); margin-bottom:30px; max-width:46ch; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:12px; }

/* mobile: photo panel on top, type below. Every value here is budgeted so the
   band photo AND both buttons land above the fold on a ~730px tall viewport. */
@media (max-width:999px){
  .hero{ grid-template-rows:auto auto; padding-bottom:clamp(22px,4vw,40px); }
  .hero__plate{ margin-top:-1px; }
  .hero__plate img{
    /* same photo as desktop, pre-cropped to the band (hero-mobile) so the
       whole line-up shows in a short banner and the copy below it still
       lands on the first screen */
    aspect-ratio:1.39;
    width:100%; height:auto;
    object-position:center center;
  }
  .hero__body{ margin-top:0; padding-top:clamp(10px,2vw,16px); }

  .hero__award{ margin-bottom:10px; }
  .hero__award-by{ margin-top:4px; font-size:.64rem; line-height:1.5; }
  .wordmark{ margin-bottom:10px; }
  .wordmark__name{ font-size:clamp(2.55rem,10.5vw,3.5rem); }
  .wordmark__rule{ margin:8px 0; }
  .hero__claim{ font-size:clamp(1.08rem,4.3vw,1.4rem); margin-bottom:10px; max-width:24ch; }
  .hero__meta{ font-size:.87rem; line-height:1.55; margin-bottom:14px; }
  .hero__actions{ gap:8px; }
  .hero__actions .btn{ flex:1 1 200px; padding:13px 24px; }
  .socials{ margin-top:16px; gap:9px; }
  .soc{ width:42px; height:42px; }
  .soc svg{ width:17px; height:17px; }
}
@media (max-width:520px){
  /* two full-width buttons beat two cramped ones with wrapped labels */
  .hero__actions .btn{ flex:1 1 100%; }
}
/* very short phones: cap the photo's height so it doesn't push everything
   else off-screen, but keep it uncropped (object-fit:cover only trims once
   the cap is actually smaller than the natural 5/6-ratio height) */
@media (max-width:999px) and (max-height:700px){
  /* short phones lose the paragraph, not the photo — the band's full look
     is the whole point, no cropping override here anymore */
  .hero__meta{ display:none; }
}
@media (max-width:999px) and (max-height:620px){
  /* last resort — the awards line is repeated in the "why" section anyway */
  .hero__award-by{ display:none; }
  .wordmark__rule{ margin:6px 0; }
}

/* desktop: two columns, photo framed on the right */
@media (min-width:1000px){
  .hero{
    min-height:100svh; grid-template-columns:1fr 1fr; align-items:center;
    padding-block:calc(var(--nav-h) + 24px) 40px;
  }
  .hero__body{ order:1; }
  .hero__media{ order:2; padding-right:var(--gut); }
  .hero__inner{ width:auto; margin:0; padding-left:var(--gut); max-width:640px; margin-left:auto; }
  .hero__plate{ border-radius:2px; box-shadow:0 50px 90px -40px rgba(0,0,0,.9); }
  .hero__plate img{ aspect-ratio:5/6; max-height:78svh; }
  .hero__plate::after{ background:linear-gradient(180deg, transparent 60%, rgba(7,7,10,.5) 100%); }
  .hero__plate::before{
    content:''; position:absolute; z-index:2; inset:14px; border:1px solid rgba(240,220,171,.28);
    pointer-events:none;
  }
}
@media (min-width:1400px){ .hero__inner{ max-width:700px; } }

/* very tall viewports: don't let the hero stretch absurdly */
@media (min-height:1400px){ .hero{ min-height:1000px; } }

/* ---------- marquee ---------- */
.marquee{ position:relative; overflow:hidden; padding:16px 0;
  background:var(--ink-2); border-block:1px solid var(--line-soft); }
.marquee::before,.marquee::after{ content:''; position:absolute; top:0; bottom:0; width:90px; z-index:2; pointer-events:none; }
.marquee::before{ left:0; background:linear-gradient(90deg,var(--ink-2),transparent); }
.marquee::after{ right:0; background:linear-gradient(270deg,var(--ink-2),transparent); }
.marquee__track{ display:flex; width:max-content; animation:marq 42s linear infinite; }
@media (prefers-reduced-motion:reduce){ .marquee__track{ animation:none; } }
.marquee__track>div{ display:flex; align-items:center; gap:30px; padding-right:30px;
  font-size:.68rem; font-weight:700; letter-spacing:.26em; text-transform:uppercase;
  color:var(--paper-3); white-space:nowrap; }
.marquee b{ color:var(--gold); font-weight:700; }
.marquee i{ color:var(--gold-dk); font-style:normal; }
@keyframes marq{ to{ transform:translateX(-50%); } }

/* ---------- stats ---------- */
.stats{ display:grid; grid-template-columns:repeat(2,1fr); border-top:1px solid var(--line-soft); }
@media (min-width:860px){ .stats{ grid-template-columns:repeat(4,1fr); } }
.stat{ padding:clamp(28px,4vw,50px) clamp(12px,2vw,24px); text-align:center;
  border-bottom:1px solid var(--line-soft); border-right:1px solid var(--line-soft); }
.stat:nth-child(2n){ border-right-color:transparent; }
@media (min-width:860px){
  .stat:nth-child(2n){ border-right-color:var(--line-soft); }
  .stat:nth-child(4n){ border-right-color:transparent; }
}
.stat__n{ font-family:var(--ff-display); font-weight:300; line-height:1; margin-bottom:10px;
  font-size:clamp(2.4rem,5vw,3.7rem); }
.stat__l{ font-size:.6rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--paper-3); line-height:1.7; }

/* ============================================================
   ABOUT
   ============================================================ */
.about{ overflow:hidden; }
.about__grid{ display:grid; gap:clamp(56px,7vw,80px); align-items:center; }
@media (min-width:960px){ .about__grid{ grid-template-columns:.94fr 1.06fr; gap:clamp(56px,7vw,100px); } }

.stack{ position:relative; }
.stack__main{ position:relative; overflow:hidden; border-radius:var(--r) var(--r) 0 0; }
.stack__main img{ width:100%; aspect-ratio:4/3; object-fit:cover; }
.stack__main::after{ content:''; position:absolute; inset:auto 0 0 0; height:30%;
  background:linear-gradient(180deg,transparent,rgba(7,7,10,.5)); pointer-events:none; }
.stack__meta{
  display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin:0;
  border:1px solid var(--line-soft); border-top:0;
}
.stack__meta span{
  display:flex; flex-direction:column; gap:4px; align-items:center; text-align:center;
  padding:16px 10px; border-left:1px solid var(--line-soft);
}
.stack__meta span:first-child{ border-left:0; }
.stack__meta b{ font-family:var(--ff-display); font-size:1.5rem; line-height:1; color:var(--gold-lt); }
.stack__meta i{
  font-style:normal; font-size:.55rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--paper-3); line-height:1.5;
}

.about__body .eyebrow{ margin-bottom:20px; }
.about__body .display{ margin-bottom:24px; }
.about__p2{ margin-top:18px; }
.about__quote{ margin:32px 0 0; padding:20px 0 20px 24px; border-left:1px solid var(--line);
  font-family:var(--ff-display); font-style:italic; line-height:1.45; color:var(--gold-lt);
  font-size:clamp(1.14rem,2.1vw,1.46rem); }
.about__tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:30px; }
.tag{ padding:9px 16px; border:1px solid var(--line-soft); border-radius:999px; color:var(--paper-2);
  font-size:.62rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  transition:border-color .3s,color .3s; }
.tag:hover{ border-color:var(--line); color:var(--gold-lt); }

/* ============================================================
   FLOW
   ============================================================ */
.flow{ background:var(--ink-2); }
.flow__list{ margin-top:clamp(40px,5.5vw,68px); }
.flow__item{ position:relative; display:grid; gap:7px 30px; align-items:baseline;
  padding:clamp(22px,3.2vw,32px) 0; border-top:1px solid var(--line-soft);
  transition:padding-left .4s var(--ease); }
.flow__item:last-child{ border-bottom:1px solid var(--line-soft); }
@media (min-width:820px){
  .flow__item{ grid-template-columns:70px 1fr 1.05fr; gap:34px; }
  .flow__item:hover{ padding-left:14px; }
}
.flow__item::after{ content:''; position:absolute; left:0; top:-1px; height:1px; width:0;
  background:linear-gradient(90deg,var(--gold),transparent); transition:width .55s var(--ease); }
.flow__item:hover::after{ width:100%; }
.flow__n{ font-family:var(--ff-display); font-size:1.45rem; color:var(--gold-dk); transition:color .35s; }
.flow__item:hover .flow__n{ color:var(--gold); }
.flow__t{ font-family:var(--ff-display); font-weight:400; line-height:1.2;
  font-size:clamp(1.3rem,2.5vw,1.8rem); }
.flow__d{ color:var(--paper-3); font-size:.94rem; }

/* ============================================================
   PACKAGES
   ============================================================ */
.pk{ background:var(--ink-2); overflow:hidden; }
.pk__grid{ display:grid; gap:18px; margin-top:clamp(40px,5.5vw,62px); align-items:stretch; }
@media (min-width:900px){ .pk__grid{ grid-template-columns:repeat(2,1fr); gap:24px; } }

.pk__card{
  position:relative; display:flex; flex-direction:column;
  padding:clamp(28px,3.6vw,40px); border-radius:var(--r);
  border:1px solid var(--line-soft); background:var(--ink-3);
  transition:transform .4s var(--ease), border-color .4s, box-shadow .4s;
}
.pk__card:hover{ transform:translateY(-4px); border-color:var(--line); }
.pk__card--vip{
  border-color:var(--line);
  background:linear-gradient(165deg,rgba(212,180,106,.10),transparent 52%), var(--ink-3);
  box-shadow:0 30px 70px -40px rgba(212,180,106,.5);
}
.pk__card--vip:hover{ border-color:var(--gold); box-shadow:0 34px 80px -36px rgba(212,180,106,.6); }
.pk__card--popular{ border-color:var(--line); }

.pk__badge{
  position:absolute; top:-1px; right:clamp(20px,3vw,32px);
  padding:7px 15px 8px; border-radius:0 0 var(--r) var(--r);
  background:linear-gradient(100deg,#c9a860,#f0dcab 52%,#c9a860); color:var(--ink);
  font-size:.56rem; font-weight:800; letter-spacing:.18em; text-transform:uppercase;
}

.pk__head{ padding-bottom:22px; margin-bottom:24px; border-bottom:1px solid var(--line-soft); }
.pk__name{
  font-family:var(--ff-display); font-weight:400; line-height:1;
  font-size:clamp(2rem,4vw,2.7rem); letter-spacing:.04em; text-transform:uppercase;
}
.pk__sub{ margin-top:9px; font-size:.68rem; font-weight:600; letter-spacing:.18em;
  text-transform:uppercase; color:var(--gold); }

.pk__list{ flex:1 1 auto; display:grid; gap:13px; margin-bottom:28px; }
.pk__list li{
  position:relative; padding-left:28px; font-size:.94rem; line-height:1.6; color:var(--paper-2);
}
.pk__list li::before{
  content:''; position:absolute; left:2px; top:.62em;
  width:9px; height:9px; rotate:45deg;
  border:1px solid var(--gold); background:rgba(212,180,106,.2);
}
.pk__card--vip .pk__list li::before{ background:var(--gold); }

.pk__note{
  margin-top:clamp(26px,3.4vw,36px); text-align:center; color:var(--paper-3);
  font-size:.88rem; max-width:64ch; margin-inline:auto;
}

/* ============================================================
   VIDEO
   ============================================================ */
.video__grid{
  display:grid; gap:16px; margin-top:clamp(38px,5vw,60px);
  max-width:1060px; margin-inline:auto;
}
@media (min-width:640px){ .video__grid{ grid-template-columns:repeat(2,1fr); gap:18px; } }
@media (min-width:1000px){ .video__grid{ grid-template-columns:repeat(3,1fr); gap:20px; } }

.vid{ position:relative; display:block; width:100%; aspect-ratio:16/9; overflow:hidden;
  border:1px solid var(--line-soft); border-radius:var(--r); background:var(--ink-3); cursor:pointer; }
.vid img{ width:100%; height:100%; object-fit:cover; filter:saturate(.82) contrast(1.03);
  transition:transform .8s var(--ease), filter .5s; }
.vid:hover img{ transform:scale(1.045); filter:saturate(1) contrast(1.03); }
.vid::after{ content:''; position:absolute; inset:0; pointer-events:none; transition:opacity .4s;
  background:linear-gradient(180deg,rgba(7,7,10,.08),rgba(7,7,10,.72)); }
.vid__play{ position:absolute; inset:0; z-index:2; display:grid; place-items:center; pointer-events:none; }
.vid__play i{ width:clamp(46px,4.6vw,60px); height:clamp(46px,4.6vw,60px); border-radius:50%; display:grid; place-items:center;
  border:1px solid var(--gold); background:rgba(7,7,10,.42);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  transition:transform .4s var(--ease), background .4s; }
.vid:hover .vid__play i{ transform:scale(1.09); background:rgba(212,180,106,.92); }
.vid__play svg{ width:15px; height:15px; fill:var(--gold); margin-left:3px; transition:fill .4s; }
.vid:hover .vid__play svg{ fill:var(--ink); }
.vid__cap{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:15px 16px; pointer-events:none;
  font-size:.6rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--paper-2); }
/* ---------- fullscreen-ish video modal ---------- */
.vmodal{
  position:fixed; inset:0; z-index:80; display:grid; place-items:center;
  background:rgba(3,3,5,.97);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  opacity:0; visibility:hidden; transition:opacity .3s var(--ease), visibility .3s;
}
.vmodal.is-open{ opacity:1; visibility:visible; }
.vmodal__pad{
  position:absolute; inset:0; display:grid; place-items:center;
  padding:clamp(12px,3vw,48px);
}
.vmodal__frame{
  width:min(96vw, calc((100svh - 2 * clamp(12px,3vw,48px)) * 16 / 9), 1440px);
  aspect-ratio:16/9; background:#000; border-radius:var(--r); overflow:hidden;
  box-shadow:0 40px 110px -30px rgba(0,0,0,.95);
  transform:scale(.97); transition:transform .35s var(--ease);
}
.vmodal.is-open .vmodal__frame{ transform:none; }
.vmodal__frame iframe{ width:100%; height:100%; border:0; display:block; }
.vmodal__x{
  position:absolute; z-index:2; top:clamp(10px,2.4vw,26px); right:clamp(10px,2.4vw,26px);
  width:46px; height:46px; display:grid; place-items:center; border-radius:50%;
  border:1px solid var(--line-soft); color:var(--paper); font-size:1.25rem; line-height:1;
  background:rgba(7,7,10,.6); transition:border-color .3s, background .3s;
}
.vmodal__x:hover{ border-color:var(--gold); background:rgba(212,180,106,.14); }

/* ============================================================
   REPERTOIRE
   ============================================================ */
.rep{ background:var(--ink-2); }
.rep__bar{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; justify-content:space-between;
  margin:clamp(32px,4.5vw,50px) 0 20px; }
.rep__search{ position:relative; flex:1 1 250px; max-width:400px; }
.rep__search input{ width:100%; padding:13px 16px 13px 42px; background:var(--ink-3);
  border:1px solid var(--line-soft); border-radius:999px; font-size:.9rem; font-weight:300;
  transition:border-color .3s, background .3s; }
.rep__search input::placeholder{ color:var(--paper-3); }
.rep__search input:focus{ outline:none; border-color:var(--gold); background:var(--ink-4); }
.rep__search svg{ position:absolute; left:16px; top:50%; transform:translateY(-50%);
  width:15px; height:15px; stroke:var(--gold-dk); fill:none; stroke-width:1.7; }
.rep__count{ font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--paper-3); }
.rep__count b{ color:var(--gold); font-weight:700; }

.chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chips--center{ justify-content:center; margin-top:clamp(28px,4vw,40px); }
.chip{ padding:9px 17px; border-radius:999px; border:1px solid var(--line-soft); color:var(--paper-3);
  font-size:.66rem; font-weight:600; letter-spacing:.08em; white-space:nowrap;
  transition:color .3s, border-color .3s, background .3s; }
.chip:hover{ color:var(--paper); border-color:var(--line); }
.chip.is-on{ background:var(--gold); border-color:var(--gold); color:var(--ink); }

.rep__list{ margin-top:28px; columns:1; column-gap:48px;
  border-top:1px solid var(--line-soft); padding-top:6px; }
@media (min-width:700px){ .rep__list{ columns:2; } }
@media (min-width:1080px){ .rep__list{ columns:3; column-gap:44px; } }
.song{ break-inside:avoid; display:flex; gap:11px; align-items:baseline; line-height:1.45;
  padding:10px 0; border-bottom:1px solid rgba(244,241,234,.055); }
.song__dot{ width:4px; height:4px; border-radius:50%; background:var(--gold-dk); flex:none; transform:translateY(-3px); }
.song__txt{ font-size:.82rem; letter-spacing:.015em; }
.song__a{ color:var(--gold); font-weight:700; }
.song__t{ color:var(--paper-2); font-weight:300; }
.song__t::before{ content:' · '; color:var(--gold-dk); }
.song__txt.solo .song__t::before{ content:''; }
.rep__empty{ padding:38px 0; font-family:var(--ff-display); font-style:italic;
  font-size:1.2rem; color:var(--paper-3); }
.rep__more{ margin-top:26px; text-align:center; }
.rep__note{ margin-top:32px; padding:22px 24px; border:1px solid var(--line); border-radius:var(--r);
  background:linear-gradient(140deg,rgba(212,180,106,.055),transparent 62%);
  display:flex; flex-wrap:wrap; gap:16px; align-items:center; justify-content:space-between; }
.rep__note p{ color:var(--paper-2); font-size:.94rem; max-width:62ch; }

/* ============================================================
   GALLERY
   ============================================================ */
.gal__grid{
  --gal-gap:10px;
  display:flex; flex-direction:column; gap:var(--gal-gap);
  margin-top:clamp(26px,3.5vw,38px);
}
@media (min-width:760px){ .gal__grid{ --gal-gap:14px; } }
@media (min-width:1200px){ .gal__grid{ --gal-gap:16px; } }

/* a justified row: every tile grows in proportion to its aspect ratio, so the
   row fills the width exactly and all tiles in it share one height */
.gal__row{ display:flex; gap:var(--gal-gap); align-items:stretch; }

.shot{
  position:relative; display:block; min-width:0; padding:0;
  overflow:hidden; border-radius:2px; background:var(--ink-3); cursor:zoom-in;
}
.shot picture{ display:block; height:100%; }
.shot img{ width:100%; height:100%; object-fit:cover; display:block;
  filter:saturate(.88) brightness(.95);
  transition:transform .8s var(--ease), filter .6s; }
.shot:hover img{ transform:scale(1.05); filter:saturate(1) brightness(1); }
.shot::after{ content:''; position:absolute; inset:0; border:1px solid transparent;
  transition:border-color .4s; pointer-events:none; }
.shot:hover::after{ border-color:var(--line); }

.lb{ position:fixed; inset:0; z-index:70; display:grid; place-items:center;
  padding:clamp(14px,4vw,52px); background:rgba(4,4,6,.96);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  opacity:0; visibility:hidden; transition:opacity .35s var(--ease), visibility .35s; }
.lb.is-open{ opacity:1; visibility:visible; }
.lb img{ max-width:100%; max-height:84svh; width:auto; object-fit:contain; border-radius:2px; }
.lb__x,.lb__nav{ position:absolute; display:grid; place-items:center; width:48px; height:48px;
  border-radius:50%; border:1px solid var(--line-soft); color:var(--paper);
  transition:border-color .3s, background .3s; }
.lb__x:hover,.lb__nav:hover{ border-color:var(--gold); background:rgba(212,180,106,.12); }
.lb__x{ top:clamp(12px,3vw,28px); right:clamp(12px,3vw,28px); font-size:1.3rem; line-height:1; }
.lb__nav{ top:50%; transform:translateY(-50%); font-size:1.4rem; }
.lb__nav--prev{ left:clamp(8px,2.5vw,28px); }
.lb__nav--next{ right:clamp(8px,2.5vw,28px); }
.lb__i{ position:absolute; bottom:clamp(12px,3vw,30px); left:50%; transform:translateX(-50%);
  font-size:.66rem; letter-spacing:.22em; color:var(--paper-3); }

/* ============================================================
   WHY
   ============================================================ */
.why{ background:var(--ink-2); }
.why__grid{ margin-top:clamp(40px,5.5vw,68px); display:grid; }
@media (min-width:780px){ .why__grid{ grid-template-columns:repeat(2,1fr); column-gap:clamp(40px,5vw,72px); } }
.why__item{ padding:24px 0; border-top:1px solid var(--line-soft); }
.why__item h3{ display:flex; align-items:baseline; gap:14px; margin-bottom:8px; }
.why__item h3 span{ font-size:.58rem; font-weight:800; letter-spacing:.2em; color:var(--gold-dk); }
.why__item h3 b{ font-family:var(--ff-display); font-weight:400;
  font-size:clamp(1.18rem,2.1vw,1.46rem); }
.why__item p{ color:var(--paper-3); font-size:.93rem; padding-left:34px; }

/* ---------- reasons strip (folded-in "why ROYALS") ---------- */
.reasons{ margin-top:clamp(44px,5.5vw,64px); padding-top:clamp(30px,4vw,42px);
  border-top:1px solid var(--line); }
.reasons__label{
  margin-bottom:22px; font-size:.62rem; font-weight:800; letter-spacing:.26em;
  text-transform:uppercase; color:var(--gold);
}
.reasons__grid{ display:grid; gap:1px 0; grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (min-width:820px){ .reasons__grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.reason{
  display:flex; align-items:baseline; gap:11px; padding:14px 18px 14px 0;
  font-family:var(--ff-display); font-size:clamp(1.02rem,1.8vw,1.22rem); color:var(--paper);
}
.reason span{ font-family:var(--ff-ui); font-size:.56rem; font-weight:800;
  letter-spacing:.16em; color:var(--gold-dk); flex:none; }

/* ============================================================
   REVIEWS
   ============================================================ */
.rv-sec{ background:var(--ink-2); overflow:hidden; }
.rv-sec__foot{ display:flex; justify-content:center; margin-top:clamp(16px,2.2vw,22px); }
@media (min-width:760px){ .rv-sec__foot{ justify-content:flex-end; } }
.rv-sec__nav{ display:flex; gap:10px; flex:none; }
.rv-sec__arrow{
  width:48px; height:48px; display:grid; place-items:center; border-radius:50%;
  border:1px solid var(--line-soft); color:var(--paper);
  transition:border-color .3s, background .3s, color .3s;
}
.rv-sec__arrow svg{ width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.5;
  stroke-linecap:round; stroke-linejoin:round; }
.rv-sec__arrow:hover{ border-color:var(--gold); color:var(--gold-lt); background:rgba(212,180,106,.1); }
.rv-sec__arrow[disabled]{ opacity:.3; pointer-events:none; }

.rv-sec__rail{
  --rail-gutter:calc((100vw - var(--shell)) / 2);
  display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory;
  margin-top:clamp(34px,4.5vw,50px);
  padding:4px var(--rail-gutter) 22px;
  /* without this the first card snaps past the gutter and the rail can never
     rest at scrollLeft 0 */
  scroll-padding-inline:var(--rail-gutter);
  scrollbar-width:none; -ms-overflow-style:none;
}
.rv-sec__rail::-webkit-scrollbar{ display:none; }
@media (min-width:760px){ .rv-sec__rail{ gap:20px; } }

.card{
  flex:0 0 auto; scroll-snap-align:start;
  width:min(380px, 84vw);
  display:flex; flex-direction:column;
  padding:clamp(24px,2.8vw,32px); border-radius:var(--r);
  border:1px solid var(--line-soft); background:var(--ink-3);
  transition:border-color .4s, transform .4s var(--ease);
}
@media (min-width:1100px){ .card{ width:380px; } }
.card:hover{ border-color:var(--line); transform:translateY(-4px);
  box-shadow:0 26px 60px -34px rgba(212,180,106,.45); }
.card__stars{ display:flex; gap:3px; margin-bottom:16px; }
.card__stars svg{ width:14px; height:14px; fill:var(--gold); }
.card__hl{
  font-family:var(--ff-display); font-weight:400; color:var(--gold-lt);
  font-size:clamp(1.28rem,2.1vw,1.55rem); line-height:1.24; margin-bottom:14px;
  text-wrap:balance;
}
.card__text{ flex:1 1 auto; color:var(--paper-3); font-size:.9rem; line-height:1.7; }
.card__foot{ margin-top:22px; padding-top:18px; border-top:1px solid var(--line-soft); }
.card__name{ display:block; font-family:var(--ff-display); font-size:1.08rem; color:var(--paper); }
.card__meta{
  display:block; margin-top:5px;
  font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-dk);
}

/* ============================================================
   EVENTS
   ============================================================ */
.ev{ overflow:hidden; }
.ev__wrap{ display:grid; gap:clamp(36px,5vw,60px); }
@media (min-width:940px){ .ev__wrap{ grid-template-columns:1fr 1fr; gap:clamp(48px,6.5vw,92px); align-items:center; } }
.ev .display{ margin:20px 0 22px; }
.ev__pills{ display:flex; flex-wrap:wrap; gap:9px; margin-top:28px; }
.pill{ padding:11px 19px; border:1px solid var(--line); border-radius:999px; color:var(--paper-2);
  font-size:.72rem; letter-spacing:.06em;
  background:linear-gradient(140deg,rgba(212,180,106,.06),transparent);
  transition:transform .35s var(--ease), color .3s, border-color .3s; }
.pill:hover{ transform:translateY(-3px); color:var(--gold-lt); border-color:var(--gold); }
.ev__geo{ margin-top:clamp(44px,5.5vw,66px); padding-top:clamp(30px,4vw,42px);
  border-top:1px solid var(--line); }

/* ---------- globe ---------- */
.globe{ display:grid; gap:clamp(24px,4vw,56px); align-items:center; }
@media (min-width:900px){ .globe{ grid-template-columns:1.05fr .95fr; } }

.globe__stage{ position:relative; justify-self:center; width:100%; max-width:540px; }
.globe__stage::before{
  content:''; position:absolute; inset:6%; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle,rgba(212,180,106,.16),transparent 66%);
  filter:blur(34px);
}
#globe{ position:relative; display:block; width:100%; aspect-ratio:1; height:auto;
  cursor:grab; touch-action:pan-y; }
#globe.is-drag{ cursor:grabbing; }

.globe__lead{
  font-family:var(--ff-display); font-weight:300; text-wrap:balance;
  font-size:clamp(1.42rem,2.7vw,2rem); line-height:1.22; color:var(--paper);
  margin-bottom:clamp(16px,2.2vw,22px);
}
.globe__p{ color:var(--paper-3); font-size:.95rem; line-height:1.72; }
.globe__p + .globe__p{ margin-top:12px; }
.globe__any{
  margin-top:clamp(18px,2.4vw,24px); padding-top:clamp(16px,2.2vw,20px);
  border-top:1px solid var(--line);
  font-family:var(--ff-display); font-style:italic; font-weight:300; text-wrap:balance;
  font-size:clamp(1.16rem,2.1vw,1.48rem); line-height:1.36; color:var(--gold-lt);
}
.globe__list{ display:flex; flex-wrap:wrap; gap:8px; margin-top:clamp(22px,3vw,30px); }
.geo-chip{
  padding:9px 16px; border:1px solid var(--line-soft); border-radius:999px;
  font-size:.7rem; letter-spacing:.09em; color:var(--paper-2); cursor:pointer;
  transition:border-color .3s, color .3s, background .3s, transform .3s var(--ease);
}
.geo-chip:hover{ border-color:var(--line); color:var(--gold-lt); transform:translateY(-2px); }
.geo-chip.is-on{
  border-color:var(--gold); color:var(--ink); font-weight:700;
  background:linear-gradient(100deg,#c9a860,#f0dcab 52%,#c9a860);
}

/* ============================================================
   BOOKING
   ============================================================ */
.book{ background:var(--ink-2); overflow:hidden; }
.book__grid{ display:grid; gap:clamp(44px,6vw,76px); }
@media (min-width:980px){ .book__grid{ grid-template-columns:1fr 1fr; gap:clamp(52px,6.5vw,104px); } }
.book .display{ margin:20px 0 22px; }

.contacts{ margin-top:34px; }
.contact{ display:flex; align-items:center; gap:17px; padding:18px 0;
  border-top:1px solid var(--line-soft); transition:padding-left .35s var(--ease); }
.contact:last-child{ border-bottom:1px solid var(--line-soft); }
.contact:hover{ padding-left:10px; }
.contact__ic{ width:40px; height:40px; flex:none; display:grid; place-items:center;
  border-radius:50%; border:1px solid var(--line); transition:background .35s, border-color .35s; }
.contact:hover .contact__ic{ background:rgba(212,180,106,.12); border-color:var(--gold); }
.contact__ic svg{ width:16px; height:16px; fill:none; stroke:var(--gold); stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round; }
.contact__tx{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.contact__l{ font-size:.58rem; letter-spacing:.22em; text-transform:uppercase; color:var(--paper-3); }
.contact__v{ font-size:1rem; color:var(--paper); }

.form{ padding:clamp(24px,3.4vw,38px); border:1px solid var(--line-soft); border-radius:var(--r);
  background:linear-gradient(160deg,rgba(212,180,106,.05),transparent 60%), var(--ink-3); }
.form__h{ font-family:var(--ff-display); font-weight:400; font-size:clamp(1.5rem,3vw,2rem); margin-bottom:8px; }
.form__sub{ color:var(--paper-3); font-size:.9rem; margin-bottom:24px; }
.form__row{ display:grid; gap:0 16px; }
@media (min-width:560px){ .form__row--2{ grid-template-columns:1fr 1fr; } }
.field{ display:block; margin-bottom:16px; }
.field>span{ display:block; margin-bottom:8px;
  font-size:.58rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--paper-3); }
.field input,.field select,.field textarea{
  width:100%; padding:13px 15px; background:var(--ink); font-size:.95rem; font-weight:300;
  border:1px solid var(--line-soft); border-radius:2px; transition:border-color .3s;
  -webkit-appearance:none; appearance:none;
  font-family:inherit; line-height:1.4; }
/* one fixed height for every control so the date box can't come out a
   different size — iOS gives date inputs their own intrinsic height */
.field input,.field select{ height:48px; }
.field textarea{ height:auto; }
.field input[type="date"]{
  display:block; text-align:left; color:var(--paper);
}
.field input[type="date"]::-webkit-date-and-time-value{ text-align:left; margin:0; }
.field input[type="date"]::-webkit-calendar-picker-indicator{
  filter:invert(78%) sepia(28%) saturate(560%) hue-rotate(2deg) brightness(92%);
  cursor:pointer; opacity:.75;
}
.field textarea{ resize:vertical; min-height:96px; }
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--gold); }
.field input.is-bad,.field textarea.is-bad{ border-color:#b4544a; }

.phone{ display:grid; grid-template-columns:minmax(0,116px) minmax(0,1fr); gap:8px; }
@media (min-width:560px){ .phone{ grid-template-columns:minmax(0,140px) minmax(0,1fr); } }
.phone__code{
  width:100%; padding:13px 30px 13px 12px; background:var(--ink); font-size:.9rem; font-weight:300;
  border:1px solid var(--line-soft); border-radius:2px; cursor:pointer; appearance:none;
  background-repeat:no-repeat; background-position:right 11px center;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none' stroke='%23d4b46a' stroke-width='1.4'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
  text-overflow:ellipsis;
}
.phone__code:focus,.phone__num:focus{ outline:none; border-color:var(--gold); }
.phone__code option{ background:var(--ink); color:var(--paper); }

/* brief highlight when a package card preselects this field */
select.is-flash{ border-color:var(--gold); animation:flashField 1.4s var(--ease); }
@keyframes flashField{
  0%,100%{ box-shadow:0 0 0 0 rgba(212,180,106,0); }
  22%    { box-shadow:0 0 0 4px rgba(212,180,106,.22); }
}
.field select{ appearance:none; cursor:pointer; padding-right:38px; text-overflow:ellipsis;
  background-repeat:no-repeat; background-position:right 15px center;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none' stroke='%23d4b46a' stroke-width='1.4'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E"); }
.field select option{ background:var(--ink); color:var(--paper); }
.form__note{ margin-top:14px; text-align:center; font-size:.71rem; line-height:1.6; color:var(--paper-3); }

/* ============================================================
   FOOTER
   ============================================================ */
.foot{ border-top:1px solid var(--line-soft); padding:clamp(44px,6vw,72px) 0 32px; }
.foot__top{ display:grid; gap:32px; align-items:start; }
@media (min-width:820px){ .foot__top{ grid-template-columns:1.4fr 1fr 1fr; gap:44px; } }
.foot h4{ margin-bottom:16px; font-size:.6rem; font-weight:800; letter-spacing:.22em;
  text-transform:uppercase; color:var(--gold); }
.foot__links{ display:grid; gap:10px; }
.foot__links a{ font-size:.89rem; color:var(--paper-3); transition:color .3s; }
.foot__links a:hover{ color:var(--gold-lt); }
.foot__word{ font-family:var(--ff-display); font-size:1.45rem; letter-spacing:.3em; text-transform:uppercase; }
.foot__sub{ margin-top:5px; font-size:.5rem; font-weight:700; letter-spacing:.38em;
  text-transform:uppercase; color:var(--gold); }
.foot__blurb{ margin-top:18px; max-width:38ch; font-size:.89rem; color:var(--paper-3); }
.foot__soc{ display:flex; gap:9px; margin-top:22px; }
.foot__soc a{ width:40px; height:40px; display:grid; place-items:center; border-radius:50%;
  border:1px solid var(--line-soft); transition:border-color .3s, background .3s, transform .3s; }
.foot__soc a:hover{ border-color:var(--gold); background:rgba(212,180,106,.1); transform:translateY(-2px); }
.foot__soc svg{ width:17px; height:17px; fill:var(--gold); }
.foot__bot{ margin-top:40px; padding-top:22px; border-top:1px solid var(--line-soft);
  display:flex; flex-wrap:wrap; gap:10px; justify-content:space-between;
  font-size:.71rem; color:var(--paper-3); }

/* ---------- floating whatsapp ---------- */
.fab{ position:fixed; right:16px; bottom:16px; z-index:40; width:52px; height:52px;
  display:grid; place-items:center; border-radius:50%; background:#1faf54;
  box-shadow:0 12px 30px -8px rgba(31,175,84,.6);
  opacity:0; visibility:hidden;
  transition:transform .35s var(--ease), opacity .35s, visibility .35s; }
.fab.is-on{ opacity:1; visibility:visible; }
.fab:hover{ transform:scale(1.08); }
.fab svg{ width:26px; height:26px; fill:#fff; }
@media (min-width:900px){ .fab{ right:26px; bottom:26px; } }

/* ---------- reveal ---------- */
.rv{ opacity:0; transform:translateY(24px);
  transition:opacity .85s var(--ease), transform .85s var(--ease); }
.rv.is-in{ opacity:1; transform:none; }
.rv-d1{ transition-delay:.08s; } .rv-d2{ transition-delay:.16s; } .rv-d3{ transition-delay:.24s; }
@media (prefers-reduced-motion:reduce){
  .rv{ opacity:1; transform:none; transition:none; }
  *{ animation-duration:.01ms!important; animation-iteration-count:1!important; }
}