/* ===========================================================
   Paaridhi Sharma - one page site
   Palette and type follow the Variation D brand sheet.
   Edit the values in :root to restyle the whole page.
   =========================================================== */

:root{
  --ink:#000000;          /* hero, events, reviews, contact, footer */
  --ink-2:#0B0B0C;        /* alternating sections */
  --ink-3:#121214;        /* cards */
  --gold:#E0BE63;         /* accent, primary buttons */
  --gold-lt:#F5E7BE;
  --gold-dk:#A98A2E;
  --gold-rgb:224,190,99;  /* every translucent gold on the page reads from this */
  --offwhite:#F0F0FF;     /* headings */
  --body:#BDB8C4;         /* body copy, 10.8:1 on black */
  --muted:#8E8894;        /* captions, 6.1:1 on black */
  --teal:#00696B;         /* active filter state */
  --line:rgba(240,240,255,.10);
  --line-2:rgba(240,240,255,.20);
  --wa:#25D366;

  --serif:'Playfair Display',Georgia,serif;
  --sans:'Lato',system-ui,-apple-system,sans-serif;

  --pad:clamp(18px,5vw,40px);
  --section-y:clamp(64px,9vw,120px);
  --radius-pill:999px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --header-h:76px;        /* logo block plus its padding. Anchors and the mobile nav sheet read from this */
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--ink);color:var(--offwhite);
  font-family:var(--sans);font-weight:300;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
/* set by the script while the mobile nav sheet is open */
html.is-nav-open,html.is-nav-open body{overflow:hidden}
.ico-defs{position:absolute;width:0;height:0;overflow:hidden}   /* logo sprite, never rendered directly */
a{color:var(--gold);text-decoration:none;transition:color .3s ease}
a:hover{color:var(--gold-lt)}
button{font-family:inherit}
::selection{background:var(--gold);color:#000}

.wrap{max-width:1280px;margin:0 auto;padding:0 var(--pad)}
.section{padding:var(--section-y) 0;scroll-margin-top:calc(var(--header-h) + 6px)}
.section-alt{background:var(--ink-2)}
.center{text-align:center}

h1,h2,h3{font-family:var(--serif);font-weight:400;margin:0;letter-spacing:-.01em}
/* the vw term carries the scaling. The floors are set low enough that a 320px
   phone lands on the floor instead of on a size that overflows its own box */
h1{font-size:clamp(34px,7vw,92px);line-height:1.05;max-width:16ch;text-wrap:balance}
h2{font-size:clamp(26px,3.6vw,50px);line-height:1.16;max-width:20ch;text-wrap:balance}
h2.big{font-size:clamp(31px,5.4vw,68px);line-height:1.12;max-width:16ch;margin:0 auto 24px}
/* h2 keeps margin:0 so it can sit flush on the baseline inside .section-head.
   Where copy follows it directly, the copy opens the gap. */
h2 + .body,h2 + .cat-grid,h2 + .counter-grid,h2 + .song-grid{margin-top:clamp(16px,2vw,24px)}
.body{font-size:clamp(16px,1.2vw,17.5px);line-height:1.8;color:var(--body);margin:0 0 22px}
.body.wide{max-width:60ch;margin-bottom:56px}
.body.narrow{max-width:52ch;margin:0 auto 44px}
.lead{font-size:clamp(16px,1.35vw,19px);line-height:1.7;color:var(--body);max-width:56ch;margin:0 0 38px}

.eyebrow{display:flex;align-items:center;gap:14px;margin:0 0 22px;
  font-size:12px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold)}
.eyebrow .rule{width:34px;height:1px;background:var(--gold);flex:none}
.cap-accent{font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin:0 0 26px}
.muted-cap{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.text-link{font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);
  border-bottom:1px solid rgba(var(--gold-rgb),.4);padding-bottom:6px;white-space:nowrap}

/* ---------- buttons ---------- */
/* Lato Light at 15px went muddy inside a filled button. Labels are 700. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;
  border-radius:var(--radius-pill);font-size:15px;font-weight:700;letter-spacing:.09em;
  /* .btn was anchors only until the package cards. On a <button> the user agent
     background and border show through, so both are reset here and the variants
     that want them, .btn-primary and .btn-ghost, put them back further down. */
  background:transparent;border:0;cursor:pointer;-webkit-appearance:none;appearance:none;
  /* and a button gets line-height normal while the anchor beside it inherits 1.6,
     which left the two pills in a package card at different heights */
  line-height:inherit;
  padding:18px 34px;transition:filter .3s ease,box-shadow .3s ease,background .3s ease,color .3s ease,border-color .3s ease}
.btn-primary{background:linear-gradient(135deg,var(--gold-lt) 0%,var(--gold) 55%,var(--gold-dk) 100%);
  color:#000;box-shadow:0 18px 44px rgba(var(--gold-rgb),.24)}
/* hover keeps the resting geometry and only warms the halo. Growing the offset and
   the blur at the same time as the alpha read as a bloom rather than a lift, and the
   brightness filter applies to the shadow too, so the three compounded. */
.btn-primary:hover{color:#000;filter:brightness(1.06);box-shadow:0 18px 44px rgba(var(--gold-rgb),.28)}
.btn-ghost{border:1px solid rgba(240,240,255,.28);color:var(--offwhite)}
.btn-ghost:hover{color:var(--offwhite);border-color:var(--gold);background:rgba(var(--gold-rgb),.1)}
.btn svg{width:18px;height:18px;fill:currentColor;flex:none}
.btn-sm{padding:13px 24px;font-size:13px;letter-spacing:.14em;text-transform:uppercase}
.btn-lg{padding:20px 42px;font-size:16px}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.center-row{justify-content:center;gap:16px}

/* ---------- header ---------- */
.site-header{position:fixed;inset:0 0 auto 0;z-index:80;background:transparent;
  border-bottom:1px solid transparent;transition:background .45s ease,border-color .45s ease,backdrop-filter .45s ease}
.site-header.is-solid,
/* the open sheet starts below the bar, so the bar itself has to go solid too or
   the logo is left floating over the photo */
.site-header.is-nav-open{background:rgba(0,0,0,.94);border-bottom-color:var(--line);backdrop-filter:blur(14px)}
.header-row{display:flex;align-items:center;justify-content:space-between;gap:14px 28px;
  min-height:calc(var(--header-h) - 32px);padding-top:16px;padding-bottom:16px}
.logo{display:flex;flex-direction:column;line-height:1;font-family:var(--serif)}
.logo-1{font-size:20px;letter-spacing:.18em;color:var(--offwhite);font-weight:500}
.logo-2{font-size:20px;letter-spacing:.18em;color:var(--gold);margin-top:2px}
.logo:hover .logo-1{color:var(--offwhite)}
.nav{display:flex;flex-wrap:wrap;align-items:center;gap:12px clamp(16px,2.4vw,34px)}
/* the vertical padding is hit area, not spacing. The row is already as tall as the
   Book Now pill, so it costs no layout */
.nav a:not(.btn){font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:#C9C4CE;padding:10px 0}
.nav a:not(.btn):hover{color:var(--gold)}
.nav-toggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;
  background:none;border:0;cursor:pointer;padding:0}
.nav-toggle span{display:block;height:1.5px;width:24px;background:var(--offwhite);transition:transform .3s ease,opacity .3s ease}
.nav-toggle.is-open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nav-toggle.is-open span:nth-child(2){opacity:0}
.nav-toggle.is-open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* ---------- hero ----------
   Column flex, bottom aligned. The content is the only child in normal flow on
   desktop, where the strip is pinned to the bottom edge. Below 900px the strip
   joins the flow underneath the content, so it can never be tall enough to sit
   on top of the buttons. isolation:isolate keeps the tint's blend mode inside
   the hero instead of letting it reach the page background. */
.hero{position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:flex-end;
  overflow:hidden;background:var(--ink);
  min-height:100vh;min-height:100svh}
.hero-media{position:absolute;inset:-8% 0;z-index:0;will-change:transform}
/* <picture> is inline by default, which gives it an auto height, and the image's
   height:100% then has nothing to resolve against and collapses to intrinsic size */
.hero-media picture{display:block;width:100%;height:100%}
/* the source is a bright, flat lit room. Desaturating toward warm and dropping
   the exposure is what makes it sit in a black and gold page at all */
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:48% 30%;
  filter:grayscale(.46) sepia(.2) saturate(1.18) contrast(1.12) brightness(.56)}
/* gold wash, blended into the photo rather than laid flat on top of it */
.hero-tint{position:absolute;inset:0;z-index:1;pointer-events:none;mix-blend-mode:overlay;
  background:radial-gradient(85% 65% at 62% 34%,rgba(var(--gold-rgb),.5) 0%,rgba(var(--gold-rgb),0) 72%),
             linear-gradient(160deg,rgba(var(--gold-rgb),.3) 0%,rgba(0,0,0,0) 58%)}
/* the legibility layer. Opaque black at the seam so the hero hands off to the page */
.hero-scrim{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.86) 0%,rgba(0,0,0,.4) 32%,rgba(0,0,0,.66) 66%,rgba(0,0,0,.93) 88%,#000 100%),
             linear-gradient(90deg,rgba(0,0,0,.82) 0%,rgba(0,0,0,.22) 58%,rgba(0,0,0,.5) 100%),
             radial-gradient(115% 95% at 50% 42%,rgba(0,0,0,0) 42%,rgba(0,0,0,.5) 100%)}
.hero-content{position:relative;z-index:3;width:100%;
  padding-top:clamp(116px,19vh,180px);padding-bottom:clamp(150px,20vh,170px);will-change:transform}
.hero-content h1{margin:0 0 26px}
.hero-strip{position:absolute;inset:auto 0 0 0;z-index:4;border-top:1px solid var(--line);
  background:rgba(0,0,0,.55);backdrop-filter:blur(8px)}
/* fixed four across. auto-fit let it fall to one column on a narrow phone, which
   is what pushed the strip up over the hero content */
.strip-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.strip-cell{padding:20px 0 20px 22px;border-left:1px solid rgba(240,240,255,.08)}
.strip-big{font-family:var(--serif);font-size:clamp(16px,1.5vw,19px);margin-bottom:4px}
.strip-small{font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);line-height:1.5}

/* ---------- about ---------- */
/* two explicit columns, dropped to one at 900px. auto-fit held two columns down
   to 640px, where the portrait and the copy were both too narrow to read */
.about-grid{display:grid;grid-template-columns:1fr 1.05fr;
  gap:clamp(36px,5vw,76px);align-items:center}
.about-portrait{position:relative}
/* height:auto is required, not decorative. The width and height attributes on the
   tag land as presentational hints, and a used height of 1867px makes the browser
   ignore aspect-ratio entirely, which stretched this to the full image height. */
.about-portrait img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 20%}
.portrait-frame{position:absolute;inset:14px;border:1px solid rgba(var(--gold-rgb),.35);pointer-events:none}
/* Two stats, not four, so each one can be a card in its own right */
.counter-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(14px,1.6vw,20px);
  margin-top:clamp(38px,4vw,50px)}
.counter{position:relative;overflow:hidden;background:var(--ink-3);border:1px solid rgba(240,240,255,.09);
  padding:clamp(26px,2.6vw,34px) clamp(20px,2.2vw,28px);
  transition:border-color .4s ease,transform .4s var(--ease)}
.counter::before{content:'';position:absolute;top:0;right:0;width:170px;height:170px;pointer-events:none;
  background:radial-gradient(circle at top right,rgba(var(--gold-rgb),.12),rgba(0,0,0,0) 70%)}
.counter:hover{border-color:rgba(var(--gold-rgb),.5);transform:translateY(-4px)}
.counter-n{position:relative;font-family:var(--serif);font-size:clamp(38px,4.4vw,62px);line-height:1;
  color:var(--gold);margin-bottom:16px}
/* gradient numerals, but only where the text clip is supported, or they vanish */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .counter-n{background-image:linear-gradient(135deg,var(--gold-lt) 0%,var(--gold) 55%,var(--gold-dk) 100%);
    -webkit-background-clip:text;background-clip:text;color:transparent}
}
.counter-rule{position:relative;width:30px;height:1px;background:rgba(var(--gold-rgb),.55);margin-bottom:16px}
.counter-label{position:relative;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);line-height:1.6}

/* ---------- socials flyout on the portrait ----------
   Must stay ABOVE the .fsoc-* brand hovers in this file. Both selectors weigh
   the same, so the later one wins and the brand colour has to be the later one. */
.socials-fab{position:absolute;right:clamp(16px,2vw,26px);bottom:clamp(16px,2vw,26px);z-index:5}
.fab-toggle{display:inline-flex;align-items:center;gap:9px;cursor:pointer;
  padding:12px 20px;border-radius:var(--radius-pill);
  background:rgba(0,0,0,.72);backdrop-filter:blur(10px);
  border:1px solid rgba(var(--gold-rgb),.45);color:var(--gold);
  font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  transition:background .35s ease,border-color .35s ease,color .35s ease}
.fab-toggle:hover{background:rgba(var(--gold-rgb),.16);border-color:var(--gold)}
.fab-toggle:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.fab-chev{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .35s var(--ease)}
.socials-fab.is-open .fab-chev{transform:rotate(180deg)}
/* column-reverse so the first link in the DOM sits closest to the button */
.fab-stack{position:absolute;right:0;bottom:calc(100% + 14px);
  display:flex;flex-direction:column-reverse;align-items:center;gap:12px;
  visibility:hidden;transition:visibility 0s .34s}
.socials-fab.is-open .fab-stack{visibility:visible;transition-delay:0s}
.fab-stack .fsoc{background:rgba(0,0,0,.72);backdrop-filter:blur(10px);
  border-color:rgba(240,240,255,.22);color:var(--offwhite);
  opacity:0;transform:translateY(10px) scale(.85);
  transition:opacity .3s ease,transform .35s var(--ease),background .35s ease,border-color .35s ease,color .35s ease}
.socials-fab.is-open .fab-stack .fsoc{opacity:1;transform:none}
/* the open rule above outweighs .fsoc:hover, so the lift has to be restated here */
.socials-fab.is-open .fab-stack .fsoc:hover,
.socials-fab.is-open .fab-stack .fsoc:focus-visible{transform:translateY(-3px)}
.socials-fab.is-open .fab-stack .fsoc:nth-child(1){transition-delay:.02s}
.socials-fab.is-open .fab-stack .fsoc:nth-child(2){transition-delay:.05s}
.socials-fab.is-open .fab-stack .fsoc:nth-child(3){transition-delay:.08s}
.socials-fab.is-open .fab-stack .fsoc:nth-child(4){transition-delay:.11s}
.socials-fab.is-open .fab-stack .fsoc:nth-child(5){transition-delay:.14s}
.socials-fab.is-open .fab-stack .fsoc:nth-child(6){transition-delay:.17s}

/* ---------- marquee ---------- */
.marquee{background:var(--ink);border-top:1px solid rgba(240,240,255,.08);border-bottom:1px solid rgba(240,240,255,.08);
  overflow:hidden;padding:22px 0}
.marquee-track{display:flex;width:max-content;animation:marq 42s linear infinite}
.marquee-track span{display:inline-flex;align-items:center;gap:clamp(20px,3vw,34px);font-family:var(--serif);
  font-size:clamp(17px,2.2vw,22px);color:#5F5A66;padding-right:clamp(20px,3vw,34px);white-space:nowrap}
.marquee-track i{width:5px;height:5px;background:var(--gold);border-radius:50%}
@keyframes marq{to{transform:translate3d(-50%,0,0)}}

/* ---------- section head ---------- */
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;flex-wrap:wrap;margin-bottom:56px}

/* ---------- music ---------- */
/* min() on the track floor, or the 320px minimum is wider than a 320px phone's
   content box and the grid overflows the page */
.song-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:clamp(16px,2.4vw,30px)}
.song{display:block;background:var(--ink-3);border:1px solid rgba(240,240,255,.08);color:var(--offwhite);
  transition:border-color .4s ease,transform .4s var(--ease)}
.song:hover{color:var(--offwhite);border-color:rgba(var(--gold-rgb),.55);transform:translateY(-6px)}
.song-art{position:relative}
/* 16:9, not square. These are the real video thumbnails and every one of them
   is a designed frame with the title set off centre, so a square crop cut
   HICHKI clean off the right edge and halved O Bhai Meri Jaan on the left. */
.song-art img{width:100%;aspect-ratio:16/9;object-fit:cover}
.play{position:absolute;right:16px;bottom:16px;width:46px;height:46px;border-radius:50%;
  background:var(--gold);color:#000;display:flex;align-items:center;justify-content:center;font-size:15px}
.song-meta{padding:24px 24px 26px}
.song-meta h3{font-size:25px;line-height:1.2;margin-bottom:10px}
.song-meta p{margin:0;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}

/* ---------- events ---------- */
.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,330px),1fr));
  gap:clamp(16px,1.8vw,22px);margin-bottom:clamp(36px,5vw,56px)}
.cat{position:relative;overflow:hidden;background:var(--ink-2);border:1px solid rgba(240,240,255,.09);
  padding:clamp(28px,2.6vw,34px) clamp(24px,2.4vw,32px) 26px;display:flex;flex-direction:column;
  transition:border-color .4s ease,transform .4s var(--ease)}
/* gold wash sits behind the content and only lights up on hover */
.cat::before{content:'';position:absolute;top:0;right:0;width:220px;height:220px;pointer-events:none;
  background:radial-gradient(circle at top right,rgba(var(--gold-rgb),.13),rgba(0,0,0,0) 70%);
  opacity:0;transition:opacity .5s ease}
.cat:hover{border-color:rgba(var(--gold-rgb),.55);transform:translateY(-6px)}
.cat:hover::before{opacity:1}
.cat-top{position:relative;display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}
.cat-icon{width:46px;height:46px;border:1px solid rgba(var(--gold-rgb),.34);border-radius:50%;
  display:flex;align-items:center;justify-content:center;color:var(--gold);transition:all .4s ease}
.cat:hover .cat-icon{background:rgba(var(--gold-rgb),.1);border-color:rgba(var(--gold-rgb),.6)}
.cat-icon svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.4;
  stroke-linecap:round;stroke-linejoin:round}
.cat-n{font-family:var(--serif);font-size:13px;letter-spacing:.14em;color:var(--gold);opacity:.7}
.cat h3{position:relative;font-size:clamp(22px,1.7vw,26px);line-height:1.24;margin-bottom:12px}
.cat-sub{position:relative;font-size:14.5px;line-height:1.7;color:var(--body);margin:0 0 22px}
.cat-list{position:relative;list-style:none;margin:0 0 15px;padding:0;
  border-top:1px solid var(--line);flex:1}
/* rule between items, never after the last one, so a two item card does not
   trail a hairline over the empty space that equal-height cards leave */
.cat-list li{display:flex;align-items:center;gap:12px;padding:11px 0;font-size:15.5px;color:#E4E1E9}
.cat-list li+li{border-top:1px solid var(--line)}
.cat-list li::before{content:'';width:5px;height:5px;flex:none;border-radius:50%;background:var(--gold)}
/* the card's booking link. Padded to a real touch target, with the list margin
   above pulled back by the same amount so the card rhythm does not move */
.cat-cta{position:relative;display:inline-flex;align-items:center;gap:10px;align-self:flex-start;
  padding:11px 0;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.cat-cta span{transition:transform .35s var(--ease)}
.cat:hover .cat-cta span{transform:translateX(5px)}
/* replaces the old theme box: one line, one action, no wasted block */
.events-foot{display:flex;align-items:center;justify-content:space-between;gap:20px 32px;flex-wrap:wrap;
  border:1px solid var(--line);background:var(--ink-2);padding:clamp(22px,2.6vw,30px) clamp(24px,3vw,36px)}
.events-foot p{margin:0;font-size:16.5px;color:#E4E1E9}
.events-foot .muted-cap{display:block;margin-bottom:8px}

/* ---------- gallery ---------- */
.filters{display:flex;flex-wrap:wrap;gap:10px}
.filter{font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;cursor:pointer;
  padding:13px 20px;border-radius:var(--radius-pill);border:1px solid var(--line-2);
  background:transparent;color:#C9C4CE;transition:all .3s ease}
.filter:hover{border-color:var(--gold);color:var(--gold)}
.filter.is-active{background:var(--teal);border-color:var(--teal);color:var(--offwhite)}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));gap:clamp(10px,1.6vw,18px)}
.shot{position:relative;overflow:hidden;border:0;padding:0;cursor:pointer;background:var(--ink);
  aspect-ratio:4/5;display:block}
.shot img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.shot:hover img{transform:scale(1.05)}
.shot-label{position:absolute;inset:auto 0 0 0;padding:18px 20px;text-align:left;
  background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.82));
  font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--offwhite)}
.shot.is-hidden{display:none}
/* the tiles are clips now, so each one carries the same play badge the release
   cards use, centred instead of tucked into a corner behind the label */
.shot .play{top:50%;left:50%;right:auto;bottom:auto;transform:translate(-50%,-50%);
  width:52px;height:52px;font-size:16px;transition:transform .4s var(--ease)}
.shot:hover .play{transform:translate(-50%,-50%) scale(1.08)}

/* ---------- packages ---------- */
/* Same mechanic as .cat, so the header row, the icon circle and the tier number
   are reused as is. The card is a flex column and .pkg-list takes the slack, so
   the two buttons pin to the bottom edge whatever the line up length. */
.pkg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));
  gap:clamp(16px,1.8vw,22px);margin-bottom:clamp(36px,5vw,56px)}
.pkg{position:relative;overflow:hidden;background:var(--ink-2);border:1px solid rgba(240,240,255,.09);
  padding:clamp(28px,2.6vw,34px) clamp(24px,2.4vw,32px) 26px;display:flex;flex-direction:column;
  transition:border-color .4s ease,transform .4s var(--ease)}
.pkg::before{content:'';position:absolute;top:0;right:0;width:220px;height:220px;pointer-events:none;
  background:radial-gradient(circle at top right,rgba(var(--gold-rgb),.13),rgba(0,0,0,0) 70%);
  opacity:0;transition:opacity .5s ease}
.pkg:hover{border-color:rgba(var(--gold-rgb),.55);transform:translateY(-6px)}
.pkg:hover::before{opacity:1}
.pkg:hover .cat-icon{background:rgba(var(--gold-rgb),.1);border-color:rgba(var(--gold-rgb),.6)}
.pkg h3{position:relative;font-size:clamp(22px,1.7vw,26px);line-height:1.24;margin-bottom:8px}
.pkg-line{position:relative;margin:0 0 14px;font-size:12px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold)}
.pkg-sub{position:relative;font-size:14.5px;line-height:1.7;color:var(--body);margin:0 0 22px}
/* deliberately not .cat-list. The Event formats counter is documented as the sum
   of the .cat-list items across the six event cards, and these rows are not one
   of those formats, so they must not join that count */
.pkg-list{position:relative;list-style:none;margin:0 0 18px;padding:0;
  border-top:1px solid var(--line);flex:1}
.pkg-list li{display:flex;align-items:center;gap:12px;padding:11px 0;font-size:15.5px;color:#E4E1E9}
.pkg-list li+li{border-top:1px solid var(--line)}
/* the instrument glyph stands in for the gold dot the event cards use */
.pkg-list li svg{width:18px;height:18px;flex:none;color:var(--gold);fill:none;stroke:currentColor;
  stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.pkg-for{position:relative;margin:0 0 22px;font-size:14px;line-height:1.7;color:var(--muted)}
.pkg-for .muted-cap{display:block;margin-bottom:6px}
/* side by side while they fit, each full width once the row wraps, so a card is
   never left showing one wide button beside one narrow one */
.pkg-actions{position:relative;display:flex;flex-wrap:wrap;gap:10px}
.pkg-actions .btn{flex:1 1 auto;padding:13px 20px}

/* ---------- reviews ---------- */
.arrows{display:flex;gap:12px}
.arrows button{width:52px;height:52px;border-radius:50%;border:1px solid rgba(240,240,255,.22);
  background:transparent;color:var(--offwhite);cursor:pointer;font-size:16px;transition:all .3s ease}
.arrows button:hover{border-color:var(--gold);color:var(--gold)}
.rail{display:flex;gap:26px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:6px}
.rail::-webkit-scrollbar{display:none}
.review{flex:0 0 clamp(min(100%,280px),31%,400px);scroll-snap-align:start;margin:0;background:var(--ink-2);
  border:1px solid rgba(240,240,255,.09);padding:38px 34px 32px;display:flex;flex-direction:column;justify-content:space-between}
.quote-mark{font-family:var(--serif);font-size:44px;line-height:.6;color:var(--gold);margin-bottom:22px}
.review blockquote{margin:0 0 30px;font-size:17px;line-height:1.78;color:#D6D2DC}
.review figcaption{border-top:1px solid var(--line);padding-top:20px}
.review-name{font-size:15.5px;margin-bottom:6px}
.review-meta{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}

/* ---------- contact ---------- */
.contact{position:relative;border-top:1px solid rgba(240,240,255,.08);
  padding:clamp(80px,10vw,130px) 0 clamp(64px,8vw,90px)}
.glow{position:absolute;top:0;left:50%;transform:translateX(-50%);width:min(900px,90%);height:340px;
  background:radial-gradient(ellipse at top,rgba(var(--gold-rgb),.18),rgba(0,0,0,0) 70%);pointer-events:none}
.contact .wrap{position:relative}
/* the booking section ends on the buttons. The facts grid that used to close it
   (Based in, Travels, Heard on) was cut, and those same three facts are still on
   the page in the hero strip */

/* ---------- footer ---------- */
.site-footer{border-top:1px solid rgba(240,240,255,.08);padding:40px 0 32px}
.footer-top{display:flex;align-items:center;justify-content:space-between;gap:26px 40px;flex-wrap:wrap;
  padding-bottom:28px;border-bottom:1px solid var(--line)}
.footer-brand{display:flex;align-items:center;gap:16px}
/* the same crop the About portrait uses, or a centre crop of a 3:4 frame cuts
   her face off at 52px */
.footer-brand img{width:52px;height:52px;border-radius:50%;object-fit:cover;
  object-position:50% 20%;flex:none}
.footer-name{font-family:var(--serif);font-size:17px;letter-spacing:.16em;color:var(--offwhite);line-height:1.3}
.footer-role{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin-top:5px}
.footer-social{display:flex;flex-wrap:wrap;gap:10px}
.fsoc{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(240,240,255,.16);color:var(--muted);
  transition:transform .3s var(--ease),background .35s ease,border-color .35s ease,color .35s ease}
.fsoc svg{width:18px;height:18px;fill:currentColor}
.fsoc:hover,.fsoc:focus-visible{color:#fff;transform:translateY(-3px);border-color:transparent}
.fsoc-ig:hover,.fsoc-ig:focus-visible{background:linear-gradient(45deg,#F09433 0%,#E6683C 25%,#DC2743 50%,#CC2366 75%,#BC1888 100%)}
.fsoc-yt:hover,.fsoc-yt:focus-visible{background:#E30000}
.fsoc-fb:hover,.fsoc-fb:focus-visible{background:#1877F2}
.fsoc-th:hover,.fsoc-th:focus-visible{background:#000;border-color:#fff}
.fsoc-sp:hover,.fsoc-sp:focus-visible{background:#1DB954}
.fsoc-lt:hover,.fsoc-lt:focus-visible{background:#43E55E;color:#08210D}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:14px 24px;flex-wrap:wrap;padding-top:24px}
.footer-copy{font-size:12.5px;letter-spacing:.14em;color:var(--muted)}
.to-top{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.to-top:hover{color:var(--gold)}

/* ---------- floating whatsapp ---------- */
.wa-bubble{position:fixed;right:26px;bottom:26px;z-index:90;width:62px;height:62px;border-radius:50%;
  background:var(--wa);display:flex;align-items:center;justify-content:center;
  box-shadow:0 14px 34px rgba(0,0,0,.5);opacity:0;visibility:hidden;transform:translateY(14px);
  transition:opacity .4s ease,transform .4s ease,visibility .4s}
.wa-bubble svg{width:34px;height:34px;fill:#fff}
.wa-bubble.is-visible{opacity:1;visibility:visible;transform:translateY(0)}
.wa-bubble:hover{filter:brightness(1.06);transform:translateY(-2px)}

/* ---------- lightbox ----------
   A clip viewer, not an image one. Column layout, so the caption and the link
   out sit under the player rather than floating over the backdrop. */
.lightbox{position:fixed;inset:0;z-index:120;background:rgba(0,0,0,.94);
  display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px;cursor:zoom-out}
.lightbox[hidden]{display:none}
/* 9:16, the shape a Short is filmed in. The width is bounded by the viewport
   height as well as its width, so the player never runs off either edge. */
.lb-frame{width:min(420px,92vw,calc(78vh * 9 / 16));aspect-ratio:9/16;
  background:#000;border:1px solid rgba(240,240,255,.14);cursor:auto}
.lb-frame iframe{display:block;width:100%;height:100%;border:0}
.lb-close{position:absolute;top:26px;right:30px;width:50px;height:50px;border-radius:50%;
  border:1px solid rgba(240,240,255,.24);background:transparent;color:var(--offwhite);font-size:19px;cursor:pointer}
.lb-close:hover{border-color:var(--gold);color:var(--gold)}
.lb-cap{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:20px;cursor:auto}
.lb-label{text-align:center;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.lb-yt{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);
  border-bottom:1px solid rgba(var(--gold-rgb),.4);padding-bottom:5px}

/* ---------- package enquiry popup ----------
   Hidden with the attribute, like the lightbox, so [hidden] has to beat
   display:flex or the attribute does nothing. Sits above the lightbox's 120.
   Top aligned rather than centred, because a tall panel on a short phone needs
   to scroll from its own top instead of being clipped at both ends. */
.pkgm{position:fixed;inset:0;z-index:130;background:rgba(0,0,0,.9);backdrop-filter:blur(6px);
  display:flex;align-items:flex-start;justify-content:center;
  padding:clamp(16px,4vw,48px);overflow-y:auto}
.pkgm[hidden]{display:none}
.pkgm-panel{position:relative;width:min(640px,100%);margin:auto;background:var(--ink-2);
  border:1px solid rgba(var(--gold-rgb),.22);padding:clamp(26px,3.2vw,40px)}
.pkgm-panel .cap-accent{margin-bottom:14px}
.pkgm-close{position:absolute;top:14px;right:14px;width:44px;height:44px;border-radius:50%;
  border:1px solid rgba(240,240,255,.24);background:transparent;color:var(--offwhite);
  font-size:16px;cursor:pointer;transition:border-color .3s ease,color .3s ease}
.pkgm-close:hover{border-color:var(--gold);color:var(--gold)}
/* the close circle sits in the same corner, so the title stops short of it */
.pkgm-panel h3{font-size:clamp(22px,2vw,28px);line-height:1.24;margin-bottom:10px;padding-right:48px}
.pkgm-base{margin:0 0 28px;font-size:14px;line-height:1.7;color:var(--muted)}
.pkgm-legend{display:block;margin:0 0 12px}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 26px}
/* the .filter pill geometry, written out again rather than shared, because the
   picked state has to differ: --teal belongs to the gallery filter alone, so a
   picked chip goes gold like every other affirmative on the page */
.chip{font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;cursor:pointer;
  padding:13px 20px;border-radius:var(--radius-pill);border:1px solid var(--line-2);
  background:transparent;color:#C9C4CE;transition:all .3s ease}
.chip:hover{border-color:var(--gold);color:var(--gold)}
.chip.is-active{background:rgba(var(--gold-rgb),.16);border-color:var(--gold);color:var(--gold)}
.chip[hidden]{display:none}
/* the only text input on the site, so there is nothing to inherit */
.pkgm textarea{display:block;width:100%;margin:0 0 26px;padding:14px 16px;resize:vertical;
  background:transparent;border:1px solid var(--line-2);border-radius:0;color:var(--offwhite);
  font-family:var(--sans);font-weight:300;font-size:15px;line-height:1.6;transition:border-color .3s ease}
.pkgm textarea::placeholder{color:var(--muted)}
.pkgm textarea:hover{border-color:rgba(var(--gold-rgb),.45)}
.pkgm-send{width:100%}
/* the one focus ring idiom in this sheet, borrowed from .fab-toggle */
.chip:focus-visible,.pkgm-close:focus-visible,.pkgm textarea:focus-visible,
.pkg-edit:focus-visible,.pkgm-send:focus-visible,
.shot:focus-visible,.lb-close:focus-visible,.lb-yt:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(26px)}
.reveal.is-in{opacity:1;transform:none;transition:opacity .95s var(--ease),transform .95s var(--ease)}

/* ---------- breakpoints ----------
   900  nav collapses to the sheet, the hero strip joins the flow, about stacks
   620  phone layout, actions go full width
   430  smallest phones, where letter-spacing and padding start to cost lines
   Plus a landscape rule, because a phone on its side has the width of a tablet
   and the height of nothing.
   =========================================================== */
@media (max-width:900px){
  .nav-toggle{display:flex}
  .nav{position:fixed;inset:var(--header-h) 0 auto 0;flex-direction:column;align-items:stretch;
    gap:0;background:rgba(0,0,0,.97);border-bottom:1px solid var(--line);
    padding:8px var(--pad) 26px;transform:translateY(-125%);transition:transform .4s var(--ease);
    backdrop-filter:blur(14px);overflow-y:auto;
    max-height:calc(100vh - var(--header-h));max-height:calc(100svh - var(--header-h))}
  .nav.is-open{transform:translateY(0)}
  .nav a:not(.btn){width:100%;padding:16px 0;border-bottom:1px solid rgba(240,240,255,.07);font-size:14px}
  .nav .btn{width:100%;margin-top:20px}

  /* the strip comes out of position:absolute and stacks under the content. While
     it was pinned to the bottom edge it only cleared the buttons as long as it
     stayed two rows tall, and it does not on a narrow phone. */
  /* the mobile frame is a dark, cool lit stage shot, so it needs a far lighter hand
     than the bright room on desktop, and a push toward warm so the two hero frames
     read as the same brand rather than two different shoots */
  /* nudged up so her face clears the copy. The transform goes on the image, not on
     .hero-media, because the desktop parallax writes an inline transform to that
     element and the two would overwrite each other. The media box overhangs the hero
     by 8% top and bottom, so 40px of lift does not expose an edge. */
  .hero-media img{object-position:56% 30%;transform:translate(0,-40px);
    filter:grayscale(.8) sepia(.34) saturate(1.45) contrast(1.06) brightness(.86)}

  /* The role line crossed her face and read badly over the photo either way. Taken
     out of the picture but left in the accessibility tree, so it is still announced. */
  .hero .eyebrow{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
    border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

  /* the lead sits over her lit shoulder, where a flat scrim cannot win. A shadow plus
     a lift off --body carries it, without dimming the photo any further. --body is
     tuned for flat black, and over a busy photo it reads as grey mush. */
  .hero .lead{color:#E6E3EA;
    text-shadow:0 1px 1px rgba(0,0,0,.75),0 1px 4px rgba(0,0,0,.7),0 2px 20px rgba(0,0,0,.9)}
  /* Retuned for the portrait frame. Her face sits around 24% down, which is exactly
     where the desktop scrim is heaviest, so the top band opens up and the weight moves
     below 60% where the copy actually is. The 90deg pass is dropped, it darkened the
     left third for left aligned desktop text and does nothing for full width copy. */
  .hero-scrim{background:
    linear-gradient(180deg,rgba(0,0,0,.7) 0%,rgba(0,0,0,.2) 19%,rgba(0,0,0,.3) 40%,rgba(0,0,0,.72) 68%,rgba(0,0,0,.95) 88%,#000 100%),
    radial-gradient(125% 72% at 54% 24%,rgba(0,0,0,0) 32%,rgba(0,0,0,.42) 100%)}

  .hero-strip{position:static;backdrop-filter:none}
  .hero-content{padding-bottom:clamp(34px,6vw,56px)}
  .strip-grid{grid-template-columns:repeat(2,1fr)}
  .strip-cell{padding:15px 0 15px 18px}
  .strip-cell:nth-child(odd){padding-left:0;border-left:0}
  .strip-cell:nth-child(n+3){border-top:1px solid rgba(240,240,255,.08)}

  .about-grid{grid-template-columns:1fr}
  .about-portrait{max-width:min(100%,470px)}
  .section-head{margin-bottom:38px}
}
@media (max-width:620px){
  .cat{padding:26px 22px 24px}
  /* six circles plus the button have to clear the top of a full width portrait */
  .fab-toggle{padding:13px 17px;font-size:11px;letter-spacing:.16em}
  .fab-stack{gap:10px}
  .fab-stack .fsoc{width:40px;height:40px}
  .review{flex-basis:min(86%,340px);padding:30px 24px 26px}
  .btn{width:100%;justify-content:center}
  .btn-row{gap:12px}
  .center-row{flex-direction:column}
  .events-foot{flex-direction:column;align-items:flex-start}
  .footer-top,.footer-bottom{justify-content:center;text-align:center}
  .footer-brand{flex-direction:column;text-align:center;gap:12px}
  .footer-social{justify-content:center}
  .song-meta{padding:20px 20px 22px}
  /* two up. Eight full width 4:5 tiles made the Live section 3900px of scrolling
     on a phone, and the lightbox is there for a closer look anyway */
  .gallery{grid-template-columns:repeat(2,1fr)}
  .shot-label{padding:12px 12px 13px;font-size:10.5px;letter-spacing:.12em}
  .filter{padding:12px 16px;font-size:12px}
  .arrows button{width:46px;height:46px}
  /* the bubble sits over the footer on a short page, so it tucks in tighter */
  .wa-bubble{right:16px;bottom:16px;width:54px;height:54px}
  .wa-bubble svg{width:29px;height:29px}
  .pkg{padding:26px 22px 24px}
  .chip{padding:12px 16px;font-size:12px}
  .pkgm-panel{padding:26px 20px 24px}
  .pkgm-close{top:10px;right:10px;width:40px;height:40px}
  .lightbox{padding:14px}
  .lb-frame{width:min(92vw,calc(72vh * 9 / 16));width:min(92vw,calc(72svh * 9 / 16))}
  .lb-close{top:12px;right:12px;width:44px;height:44px;font-size:17px}
  .lb-cap{margin-top:14px}
  .shot .play{width:44px;height:44px;font-size:14px}
}
@media (max-width:430px){
  .eyebrow{gap:10px;letter-spacing:.2em}
  .eyebrow .rule{width:24px}
  .counter{padding:22px 17px}
  .counter-label{font-size:11px;letter-spacing:.14em}
  .strip-small{letter-spacing:.13em}
  .btn{padding:16px 22px}
  .btn-lg{padding:17px 24px;font-size:15px}
  .quote-mark{font-size:38px;margin-bottom:18px}
  .review blockquote{font-size:16px}
}
/* a phone on its side: the hero's tall padding leaves nothing for the headline */
@media (max-height:520px) and (orientation:landscape){
  .hero{min-height:auto}
  .hero-content{padding-top:calc(var(--header-h) + 24px);padding-bottom:26px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .marquee-track{animation:none}
  .reveal{opacity:1;transform:none}
  .hero-media,.hero-content{transform:none !important}
}
@media print{.site-header,.wa-bubble,.marquee{display:none}}