/* Featured-performance hero: a cinematic browsing pattern adapted for Karvaan. */
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;opacity:.4}
.hero-image{z-index:0}
.hero-shade{z-index:1}
.hero-copy,.scroll-cue{z-index:2}
@media(min-width:761px){
  .hero{height:min(780px,calc(100vh - 120px));min-height:620px;margin:96px 3.15vw 0;border:1px solid rgba(185,150,93,.34);border-radius:20px;overflow:hidden;display:grid;place-items:normal;background:#121116}
  .hero-image{background-color:#38243d;background-blend-mode:multiply;filter:saturate(.78) brightness(.84) sepia(.1);background-position:center 45%}
  .hero-shade{background:linear-gradient(90deg,rgba(7,7,9,.94) 0%,rgba(7,7,9,.72) 27%,rgba(7,7,9,.16) 67%,rgba(7,7,9,.08) 100%),linear-gradient(0deg,rgba(7,7,9,.83),transparent 35%)}
  .hero-copy{justify-self:start;align-self:end;max-width:580px;margin:0 0 76px clamp(38px,5vw,80px);padding:0;text-align:left}
  .hero h1{font-size:clamp(62px,6vw,96px);margin:17px 0 22px}
  .hero-description{max-width:465px;font-size:22px;margin:0 0 27px}
  .hero-actions{justify-content:flex-start;gap:10px}
  .hero .gold{background:#f4f0e8;color:#0c0b0d;border-color:#f4f0e8}
  .hero .gold:hover{background:#fff}
  .hero .outline{background:rgba(55,48,59,.78);border-color:transparent;color:#f5f0e8}
  .hero .outline:hover{background:rgba(87,76,93,.93)}
  .scroll-cue{bottom:23px;left:50%;transform:translateX(-50%)}
}
.nav-home{background:rgba(255,255,255,.14);border-radius:999px;padding:8px 15px;color:#fff!important}
@media(max-width:760px){.nav-home{padding:0;background:transparent;color:var(--antique-light)!important}.hero{margin:60px 0 0;min-height:660px;border-radius:0;border:0}.hero-image{filter:saturate(.72) brightness(.74) sepia(.12)}.hero-shade{background:linear-gradient(0deg,rgba(5,5,7,.9),rgba(5,5,7,.04) 75%),linear-gradient(90deg,rgba(5,5,7,.48),rgba(5,5,7,.12))}.hero-copy{padding-bottom:82px}.hero .gold{background:#f4f0e8;color:#0c0b0d}.hero .outline{background:rgba(48,42,52,.82);border-color:transparent}}

/* Full-bleed opening video layout */
.nav{position:fixed!important;top:0;opacity:0;transform:translateY(-110%);pointer-events:none;transition:opacity .35s ease,transform .35s ease}.nav.is-visible{opacity:1;transform:translateY(0);pointer-events:auto}.hero{width:100%;margin:0!important;border:0!important;border-radius:0!important;aspect-ratio:16/9;height:auto!important;min-height:0!important}.hero::before{display:none}.hero-copy{display:none}.hero-shade{background:linear-gradient(0deg,rgba(5,5,5,.58),transparent 34%)!important}.scroll-cue{z-index:3!important;bottom:30px!important}.scroll-cue span{height:22px}
@media(max-width:760px){.hero{aspect-ratio:auto;min-height:100svh!important;height:100svh!important}.scroll-cue{bottom:28px!important}}

/* Restored opening copy and an always-visible first-screen scroll cue */
.hero-copy{display:block!important}.scroll-cue{position:fixed!important;left:50%!important;bottom:26px!important;transform:translateX(-50%)!important;z-index:6!important;transition:opacity .25s ease,transform .25s ease}.scroll-cue.is-hidden{opacity:0;pointer-events:none;transform:translate(-50%,12px)!important}

/* Keep the entire opening message within the first visible screen. */
@media(min-width:761px){.hero{aspect-ratio:auto;height:100svh!important;min-height:620px!important}.hero-video{object-fit:cover}}

/* YouTube embeds need a deliberate crop to behave like a background video. */
iframe.hero-video{top:50%;right:auto;bottom:auto;left:50%;width:177.78vh;min-width:100%;height:56.25vw;min-height:100%;border:0;pointer-events:none;transform:translate(-50%,-50%)}

/* Centred three-part opening mark: identity, sound, invitation. */
.hero{--hero-name-top:52%;--hero-genres-top:71%;--hero-actions-top:78%}
.hero-copy{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;max-width:none!important;margin:0!important;padding:0!important;justify-self:stretch!important;align-self:stretch!important;text-align:center!important;z-index:2!important}
.hero-copy h1{position:absolute;top:var(--hero-name-top);left:50%;width:max-content;max-width:92vw;transform:translateX(-50%);margin:0!important;color:var(--parchment)!important;font-family:"Cormorant Garamond",Georgia,serif!important;font-size:clamp(62px,8.4vw,130px)!important;font-weight:500!important;letter-spacing:.1em!important;line-height:.7!important;text-transform:uppercase;text-shadow:0 2px 20px rgba(0,0,0,.45)}
.hero-copy h1 span{display:block;font-size:.22em!important;font-weight:600!important;letter-spacing:.46em!important;line-height:1.15!important}
.hero-copy h1 span:first-child{margin-left:.46em}.hero-copy h1 span:last-child{margin:.18em 0 0 .46em!important}
.hero-copy .eyebrow{position:absolute;top:var(--hero-genres-top);left:50%;display:flex;align-items:center;justify-content:center;gap:clamp(9px,1.4vw,22px);width:100%;transform:translateX(-50%);margin:0!important;color:var(--antique-light)!important;font-family:"Cormorant Garamond",Georgia,serif!important;font-size:clamp(12px,1.35vw,20px)!important;font-weight:600!important;letter-spacing:.25em!important;text-transform:uppercase;text-shadow:0 1px 12px rgba(0,0,0,.6)}
.hero-copy .eyebrow b{font-size:.8em;color:var(--antique);font-weight:400}.hero-actions{position:absolute;top:var(--hero-actions-top);left:50%;transform:translateX(-50%);display:flex;justify-content:center;gap:12px;width:max-content;max-width:90vw}.hero-actions .button{min-width:145px}.hero-shade{background:linear-gradient(180deg,rgba(5,5,5,.45),transparent 35%,rgba(5,5,5,.18) 58%,rgba(5,5,5,.7) 100%)!important}
@media(max-width:760px){.hero{--hero-name-top:60%;--hero-genres-top:71%;--hero-actions-top:75%}.hero-copy h1{font-size:clamp(52px,15vw,78px)!important}.hero-copy .eyebrow{gap:8px;font-size:clamp(10px,3vw,14px)!important;letter-spacing:.15em!important;white-space:nowrap}.hero-actions{flex-direction:column;width:min(225px,82vw)}.hero-actions .button{width:100%;min-width:0}.hero-shade{background:linear-gradient(180deg,rgba(5,5,5,.52),transparent 36%,rgba(5,5,5,.2) 57%,rgba(5,5,5,.8) 100%)!important}}
@media(min-width:761px) and (max-height:700px){.hero{--hero-name-top:48%;--hero-genres-top:69%;--hero-actions-top:77%}}
@media(max-width:760px) and (max-height:700px){.hero{--hero-name-top:50%;--hero-genres-top:67%;--hero-actions-top:74%}.hero-actions{gap:8px}.hero-actions .button{padding-block:10px}}
@media(max-width:390px){.hero-copy .eyebrow{gap:5px;font-size:9px!important;letter-spacing:.1em!important}}