/* ============================================================
   TRIBAL LIFE RECORDS - Main Stylesheet
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;900&family=Inter:wght@300;400;500;600&family=Barlow+Condensed:wght@400;600;700;800&display=swap');

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px}
:root{
  --cream:#FFFFFF;--cream-dark:#E5E7EB;
  --navy:#1C2340;--navy-deep:#0F1525;
  --gold:#FD1D21;--gold-lt:#FF4A4F;--gold-dk:#C41216;
  --saffron:#FD1D21;--saffron-lt:#FF4A4F;
  --coral:#B50F13;
  --purple:#6B30B8;
  --sage:#4A7A58;--sage-lt:#6AA878;
  --forest:#2A5040;
  --white:#FFFFFF;
  --text-dark:#1A1510;--text-mid:#4A4540;--text-muted:#8A8480;
  --nav-h:70px;
}
body{font-family:"Inter",sans-serif;font-weight:400;color:var(--text-dark);background:var(--white);overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ── STRIPE ── */
.stripe{height:5px;background:repeating-linear-gradient(90deg,var(--gold) 0,var(--gold) 10px,var(--coral) 10px,var(--coral) 20px,var(--sage) 20px,var(--sage) 30px,var(--navy) 30px,var(--navy) 40px)}

/* ── NAV ── */
#main-nav{position:fixed;top:5px;left:0;right:0;z-index:1000;height:var(--nav-h);display:flex;align-items:center;justify-content:space-between;padding:0 5vw;background:rgba(15,21,37,0.94);backdrop-filter:blur(14px);border-bottom:1px solid rgba(253,29,33,0.2);transition:background .3s,box-shadow .3s}
#main-nav.scrolled{box-shadow:0 2px 20px rgba(28,35,64,.18)}
#main-nav.light{background:rgba(15,21,37,0.96);border-bottom:1px solid rgba(253,29,33,.2)}
.nav-logo{display:flex;align-items:center;gap:.7rem}
 .nav-logo img{height:48px;width:auto;transition:opacity .3s}
.logo-text{font-family:"Barlow Condensed",sans-serif;font-weight:800;font-size:1.05rem;letter-spacing:.08em;text-transform:uppercase;color:#fff;line-height:1.1;transition:color .3s}
.logo-sub{display:block;font-size:.58rem;letter-spacing:.28em;color:var(--gold);font-weight:700}
.nav-links{display:flex;gap:.15rem;list-style:none}
.nav-links a{font-family:"Barlow Condensed",sans-serif;font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.7);padding:.4rem .85rem;border-radius:3px;transition:all .2s}
#main-nav.light .nav-links a{color:rgba(255,255,255,.7)}
.nav-links a:hover,.nav-links a.active{color:var(--gold-lt);background:rgba(253,29,33,.1)}
#main-nav.light .nav-links a:hover,#main-nav.light .nav-links a.active{color:var(--saffron);background:rgba(253,29,33,.1)}
.nav-cta{font-family:"Barlow Condensed",sans-serif;font-size:.75rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;background:var(--saffron);color:#fff;padding:.5rem 1.3rem;border-radius:3px;transition:all .2s;white-space:nowrap}
.nav-cta:hover{background:var(--coral);transform:translateY(-1px)}
.nav-hamburger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:4px}
.nav-hamburger span{display:block;width:24px;height:2px;background:#fff;transition:all .25s;border-radius:2px}
#main-nav.light .nav-hamburger span{background:#fff}
.nav-hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-hamburger.open span:nth-child(2){opacity:0}
.nav-hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ── BUTTONS ── */
.btn{display:inline-flex;align-items:center;gap:.5rem;font-family:"Barlow Condensed",sans-serif;font-size:.8rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:.8rem 2rem;border-radius:3px;border:none;cursor:pointer;transition:all .22s}
.btn-primary{background:var(--saffron);color:#fff}
.btn-primary:hover{background:var(--coral);transform:translateY(-2px);box-shadow:0 8px 24px rgba(253,29,33,.4)}
.btn-outline{background:transparent;color:var(--saffron);border:2px solid var(--saffron)}
.btn-outline:hover{background:var(--saffron);color:#fff}
.btn-outline-light{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.45)}
.btn-outline-light:hover{background:rgba(255,255,255,.12);border-color:#fff}
.btn-navy{background:var(--navy);color:var(--cream)}
.btn-navy:hover{background:var(--navy-deep)}
.btn-white{background:#fff;color:var(--navy)}
.btn-white:hover{background:var(--cream)}
.btn-sm{padding:.55rem 1.3rem;font-size:.72rem}

/* ── TAGS ── */
.tag{font-family:"Barlow Condensed",sans-serif;font-size:.6rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:.3rem .75rem;border-radius:2px;display:inline-block}
.tag-gold{background:rgba(253,29,33,.15);color:var(--gold-dk);border:1px solid rgba(253,29,33,.3)}
.tag-sage{background:rgba(74,122,88,.15);color:var(--forest);border:1px solid rgba(74,122,88,.3)}
.tag-coral{background:rgba(181,15,19,.12);color:#B50F13;border:1px solid rgba(181,15,19,.25)}
.tag-purple{background:rgba(107,48,184,.12);color:var(--purple);border:1px solid rgba(107,48,184,.25)}
.tag-light{background:rgba(255,255,255,.15);color:#fff;border:1px solid rgba(255,255,255,.25)}

/* ── HERO ── */
.hero{position:relative;min-height:100vh;display:flex;align-items:flex-end;padding:calc(var(--nav-h) + 5px + 2rem) 6vw 9vh;overflow:hidden;background:var(--navy-deep)}
.hero-bg{position:absolute;inset:0;overflow:hidden}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center top;opacity:.5}
.hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(15,21,37,.97) 0%,rgba(15,21,37,.55) 40%,rgba(15,21,37,.2) 100%),linear-gradient(to right,rgba(15,21,37,.8) 0%,transparent 55%)}
.hero-content{position:relative;z-index:2;max-width:820px}
.eyebrow{font-family:"Barlow Condensed",sans-serif;font-size:.68rem;font-weight:700;letter-spacing:.32em;text-transform:uppercase;color:var(--gold);margin-bottom:1.2rem;display:flex;align-items:center;gap:.8rem}
.eyebrow::before{content:"";display:block;width:32px;height:2px;background:var(--gold);flex-shrink:0}
.eyebrow-light{color:rgba(245,240,232,.55)}
.eyebrow-light::before{background:rgba(253,29,33,.5)}
.hero-title{font-family:"Playfair Display",serif;font-size:clamp(3.8rem,10vw,9rem);font-weight:900;line-height:.88;letter-spacing:-.02em;color:#fff;margin-bottom:1.6rem}
.hero-title em{font-style:normal;color:var(--saffron)}
.hero-title .outline{color:var(--saffron);-webkit-text-stroke:0}
.hero-sub{font-size:1.05rem;line-height:1.75;color:rgba(245,240,232,.78);max-width:500px;margin-bottom:2.5rem}
.hero-btns{display:flex;gap:1rem;flex-wrap:wrap;margin-bottom:3rem}
.hero-stats{display:flex;gap:3.5rem;padding-top:2rem;border-top:1px solid rgba(253,29,33,.25)}
.stat-num{font-family:"Playfair Display",serif;font-size:2.8rem;font-weight:900;color:var(--saffron);line-height:1}
.stat-lbl{font-family:"Barlow Condensed",sans-serif;font-size:.62rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:rgba(245,240,232,.5);margin-top:.25rem}
.hero-scroll{position:absolute;bottom:2.5rem;right:5vw;writing-mode:vertical-rl;font-family:"Barlow Condensed",sans-serif;font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:rgba(245,240,232,.4);display:flex;align-items:center;gap:.8rem;z-index:2}
.hero-scroll::after{content:"";display:block;width:1px;height:48px;background:linear-gradient(to bottom,rgba(245,240,232,.4),transparent);animation:scrollpulse 2s ease-in-out infinite}
@keyframes scrollpulse{0%,100%{opacity:.4}50%{opacity:.9}}

/* ── MARQUEE ── */
.marquee{background:var(--saffron);padding:.85rem 0;overflow:hidden;white-space:nowrap}
.marquee-track{display:inline-flex;animation:marquee 22s linear infinite}
.marquee-track span{font-family:"Barlow Condensed",sans-serif;font-size:.9rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:#fff;padding:0 2rem}
.marquee-track .dot{opacity:.55;padding:0}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ── SECTIONS ── */
.sec{padding:6rem 6vw}
.sec-white{background:var(--white)}
.sec-cream{background:var(--cream)}
.sec-navy{background:var(--navy);color:var(--cream)}
.sec-deep{background:var(--navy-deep);color:var(--cream)}
.sec-forest{background:var(--navy-deep);color:var(--cream)}

/* ── TYPOGRAPHY ── */
.sec-title{font-family:"Playfair Display",serif;font-size:clamp(2.4rem,5vw,4rem);font-weight:900;line-height:.95;letter-spacing:-.02em;margin-bottom:1.2rem}
.sec-title-md{font-family:"Playfair Display",serif;font-size:clamp(1.8rem,3.5vw,2.8rem);font-weight:700;line-height:1;margin-bottom:1rem}
.sec-title-sm{font-family:"Playfair Display",serif;font-size:clamp(1.3rem,2.5vw,1.8rem);font-weight:700;line-height:1.1;margin-bottom:.8rem}
.divider{width:50px;height:3px;background:var(--saffron);margin:1.2rem 0 2rem}
.divider-light{background:rgba(253,29,33,.6)}
.divider-center{margin-left:auto;margin-right:auto}
.row-sb{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:1rem;margin-bottom:2.5rem}

/* ── PAGE HERO (inner pages) ── */
.page-hero{position:relative;height:400px;display:flex;align-items:flex-end;padding:3rem 6vw;overflow:hidden;background:var(--navy)}
.page-hero-bg{position:absolute;inset:0}
.page-hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center;opacity:.4}
.page-hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(28,35,64,.95) 0%,rgba(28,35,64,.5) 60%,rgba(28,35,64,.25) 100%)}
.page-hero-content{position:relative;z-index:2}
.page-hero-title{font-family:"Playfair Display",serif;font-size:clamp(2.5rem,6vw,4.5rem);font-weight:900;color:#fff;line-height:.95;letter-spacing:-.02em}

/* ── RELEASES ── */
.releases-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--cream-dark)}
.rel-card{background:var(--white);position:relative;overflow:hidden;cursor:pointer;transition:transform .3s,box-shadow .3s}
.rel-card:hover{transform:translateY(-5px);box-shadow:0 16px 40px rgba(28,35,64,.15);z-index:2}
.rel-card.featured{grid-column:span 2;grid-row:span 2}
.rel-thumb{position:relative;aspect-ratio:1;overflow:hidden;background:var(--navy)}
.rel-card.featured .rel-thumb{aspect-ratio:unset;height:100%;min-height:320px}
.rel-thumb img{width:100%;height:100%;object-fit:contain;object-position:center;background:var(--navy-deep);transition:transform .5s}
.rel-card:hover .rel-thumb img{transform:none}
.rel-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(15,21,37,.45);opacity:0;transition:opacity .3s}
.rel-card:hover .rel-play{opacity:1}
.play-circle{width:54px;height:54px;background:var(--saffron);border-radius:50%;display:flex;align-items:center;justify-content:center}
.play-circle svg{fill:#fff;margin-left:3px}
.rel-info{padding:1.1rem 1.3rem 1.4rem}
.rel-new{font-family:"Barlow Condensed",sans-serif;font-size:.58rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;background:var(--saffron);color:#fff;padding:.25rem .7rem;border-radius:2px;display:inline-block;margin-bottom:.5rem}
.rel-title{font-family:"Playfair Display",serif;font-size:1.05rem;font-weight:700;color:var(--text-dark);line-height:1.2;margin-bottom:.2rem}
.rel-artist{font-size:.85rem;color:var(--saffron);font-weight:500}
.rel-meta{font-family:"Barlow Condensed",sans-serif;font-size:.65rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--text-muted);margin-top:.4rem}
.rel-actions{display:flex;gap:.4rem;margin-top:.8rem}
.stream-platforms{display:flex;justify-content:center;align-items:center;gap:.8rem;flex-wrap:wrap;margin-top:2.5rem;padding-top:2rem;border-top:1px solid var(--cream-dark)}
.platform-label{font-family:"Barlow Condensed",sans-serif;font-size:.68rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--text-muted)}


.release-list-grid{grid-template-columns:repeat(3,1fr)}
.release-list-grid .rel-card.featured{grid-column:span 1;grid-row:auto}

/* ── SPLIT ── */
.split{display:grid;grid-template-columns:1fr 1fr}
.split.reverse{direction:rtl}
.split.reverse > *{direction:ltr}
.split-photo{position:relative;min-height:500px;overflow:hidden}
.split-photo img{width:100%;height:100%;object-fit:contain;object-position:center;background:var(--navy-deep)}
.about-story-photo img{object-fit:cover;object-position:center}
/* ── HOME PAGE IMAGE FIT ── */
/* Match artwork containers to the supplied artwork proportions so the complete artwork is
   visible without the cropping introduced by a generic object-fit: cover rule. */
body[data-page="home"] .rel-thumb{background:#fff;overflow:hidden}
body[data-page="home"] .rel-thumb img{width:100%;height:100%;object-fit:cover;object-position:center;background:#fff}
body[data-page="home"] .rel-thumb-square{aspect-ratio:1 / 1}
body[data-page="home"] .rel-thumb-portrait-carnival{aspect-ratio:435 / 538}
body[data-page="home"] .rel-thumb-landscape{aspect-ratio:16 / 9}
body[data-page="home"] .rel-thumb-portrait-openair{aspect-ratio:606 / 768}
body[data-page="home"] .rel-card.featured .rel-thumb{height:auto;min-height:0;aspect-ratio:1 / 1}
body[data-page="home"] .split-photo{min-height:0;align-self:start;overflow:hidden}
body[data-page="home"] .split-photo-dj{aspect-ratio:auto;min-height:0;align-self:stretch}
body[data-page="home"] .split-photo-studio{aspect-ratio:auto;min-height:0;align-self:stretch}
body[data-page="home"] .split-photo img{width:100%;height:100%;object-fit:cover;object-position:center;background:none}
body[data-page="home"] .hero-bg img{object-fit:cover;object-position:center}
.split-text{padding:5rem 5vw;display:flex;flex-direction:column;justify-content:center}

/* ── STATS BAND ── */
.stats-band{display:grid;grid-template-columns:repeat(4,1fr);background:var(--navy)}
.stat-block{padding:3rem 2rem;text-align:center;border-right:1px solid rgba(255,255,255,.08)}
.stat-block:last-child{border-right:none}
.stat-big{font-family:"Playfair Display",serif;font-size:3.2rem;font-weight:900;color:var(--saffron);line-height:1}
.stat-text{font-family:"Barlow Condensed",sans-serif;font-size:.65rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:rgba(245,240,232,.45);margin-top:.5rem}

/* ── ARTIST CARDS ── */
.artists-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.art-card{position:relative;border-radius:4px;overflow:hidden;aspect-ratio:3/4;cursor:pointer;background:var(--navy)}
.art-card img{width:100%;height:100%;object-fit:cover;object-position:center top;transition:transform .5s;filter:saturate(.85)}
.art-card:hover img{transform:scale(1.05);filter:saturate(1.1)}
.art-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(15,21,37,.95) 0%,rgba(15,21,37,.3) 50%,transparent 100%)}
.art-info{position:absolute;bottom:0;left:0;right:0;padding:1.5rem 1.4rem}
.art-name{font-family:"Playfair Display",serif;font-size:1.6rem;font-weight:900;color:#fff;line-height:1}
.art-role{font-family:"Barlow Condensed",sans-serif;font-size:.65rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--saffron-lt);margin-top:.3rem}
.art-tags{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:.6rem;opacity:0;transform:translateY(6px);transition:all .3s}
.art-card:hover .art-tags{opacity:1;transform:translateY(0)}

/* ── GALLERY STRIP ── */
.gallery-strip{display:grid;grid-template-columns:repeat(4,1fr);height:260px;gap:2px}
.gal-item{overflow:hidden}
.gal-item img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.gal-item:hover img{transform:scale(1.07)}

/* ── QUOTE ── */
.quote-section{background:var(--navy-deep);padding:6rem 6vw;text-align:center;position:relative;overflow:hidden}
.quote-bg-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-family:"Playfair Display",serif;font-size:22vw;font-weight:900;color:rgba(253,29,33,.04);white-space:nowrap;pointer-events:none}
.big-quote{font-family:"Playfair Display",serif;font-style:italic;font-size:clamp(1.4rem,3vw,2.4rem);font-weight:700;line-height:1.5;color:#fff;max-width:800px;margin:0 auto;position:relative;z-index:2}
.big-quote::before{content:"\201C";font-size:7rem;color:var(--saffron);opacity:.3;position:absolute;top:-3rem;left:-2.5rem;line-height:1;pointer-events:none}
.quote-attr{font-family:"Barlow Condensed",sans-serif;font-size:.7rem;font-weight:700;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);margin-top:1.8rem;position:relative;z-index:2}

/* ── EVENTS ── */
.birthday-banner{background:linear-gradient(135deg,var(--saffron),var(--coral));border-radius:4px;padding:1.4rem 2rem;display:flex;align-items:center;gap:1.2rem;margin-bottom:2.5rem;flex-wrap:wrap}
.birthday-title{font-family:"Playfair Display",serif;font-weight:700;font-size:1.1rem;color:#fff}
.birthday-sub{font-size:.85rem;color:rgba(255,255,255,.88);margin-top:.2rem}
.birthday-sub a{color:#fff;text-decoration:underline}
.event-card{background:var(--white);border-radius:4px;overflow:hidden;box-shadow:0 2px 12px rgba(28,35,64,.08);transition:transform .3s,box-shadow .3s;margin-bottom:.8rem}
.event-card:hover{transform:translateY(-3px);box-shadow:0 12px 32px rgba(28,35,64,.14)}
.event-row-inner{display:grid;grid-template-columns:90px 1fr auto;align-items:center;gap:1.5rem;padding:1.5rem 1.5rem}
.event-date-box{background:var(--navy);padding:.8rem .5rem;border-radius:3px;text-align:center}
.eday{font-family:"Playfair Display",serif;font-size:2rem;font-weight:900;color:var(--saffron);line-height:1}
.emon{font-family:"Barlow Condensed",sans-serif;font-size:.6rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:rgba(245,240,232,.55)}
.event-title-text{font-family:"Playfair Display",serif;font-size:1.1rem;font-weight:700;color:var(--text-dark);line-height:1.15;margin-bottom:.4rem}
.event-venue{font-size:.82rem;color:var(--text-muted);margin-bottom:.5rem}
.event-tags-row{display:flex;gap:.4rem;flex-wrap:wrap}

/* ── EVENT CARDS (events page) ── */
.event-big-card{border-radius:4px;overflow:hidden;background:var(--white);box-shadow:0 2px 12px rgba(28,35,64,.08);transition:transform .3s,box-shadow .3s}
.event-big-card:hover{transform:translateY(-5px);box-shadow:0 16px 40px rgba(28,35,64,.15)}
.event-big-card-img{position:relative;height:220px;overflow:hidden}
.event-big-card-img img{width:100%;height:100%;object-fit:contain;object-position:center;background:var(--navy-deep);transition:transform .5s}
.event-big-card:hover .event-big-card-img img{transform:none}
.event-date-badge{position:absolute;top:1rem;left:1rem;background:var(--saffron);color:#fff;padding:.4rem .8rem;border-radius:2px;font-family:"Barlow Condensed",sans-serif;font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.event-big-card-body{padding:1.3rem 1.4rem 1.5rem}
.event-big-venue{font-family:"Barlow Condensed",sans-serif;font-size:.68rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--saffron);margin-bottom:.4rem}
.event-big-title{font-family:"Playfair Display",serif;font-size:1.2rem;font-weight:700;color:var(--navy);line-height:1.1;margin-bottom:.5rem}
.event-big-time{font-size:.85rem;color:var(--text-muted);margin-bottom:.8rem}
.events-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}

/* ── FLYERS ── */
.flyers-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
 .flyer-card{min-height:520px;display:flex;flex-direction:column;border-radius:4px;overflow:hidden;box-shadow:0 4px 20px rgba(28,35,64,.12);transition:transform .3s,box-shadow .3s;cursor:pointer}
.flyer-card:hover{transform:translateY(-5px);box-shadow:0 16px 40px rgba(28,35,64,.2)}
.flyer-card img{width:100%;height:100%;max-height:520px;object-fit:contain;object-position:center;background:var(--navy-deep);display:block}
.flyer-body{padding:1rem 1.1rem 1.2rem;background:var(--white);margin-top:auto}
.flyer-venue{font-family:"Barlow Condensed",sans-serif;font-size:.62rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--saffron);margin-bottom:.3rem}
.flyer-name{font-family:"Playfair Display",serif;font-size:.95rem;font-weight:700;color:var(--navy)}

/* ── TIMELINE ── */
.timeline-item{display:grid;grid-template-columns:90px 1fr;gap:2rem;padding:2rem 0;border-bottom:1px solid rgba(28,35,64,.1)}
.timeline-item:last-child{border-bottom:none}
.timeline-year{font-family:"Playfair Display",serif;font-size:1.6rem;font-weight:900;color:var(--saffron);line-height:1;padding-top:.2rem}
.timeline-text{font-size:.95rem;line-height:1.75;color:var(--text-mid)}
.timeline-text strong{color:var(--navy)}

/* ── PILLARS ── */
.pillars-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:2rem}
.pillar-card{background:var(--white);border-radius:4px;padding:2.5rem 2rem;border-top:4px solid var(--saffron);box-shadow:0 2px 12px rgba(28,35,64,.06)}
.pillar-card:nth-child(2){border-top-color:var(--coral)}
.pillar-card:nth-child(3){border-top-color:var(--sage)}
.pillar-icon{font-size:2.5rem;margin-bottom:1rem}
.pillar-title{font-family:"Playfair Display",serif;font-size:1.3rem;font-weight:700;color:var(--navy);margin-bottom:.8rem}
.pillar-text{font-size:.92rem;line-height:1.75;color:var(--text-mid)}

/* ── CONTACT FORM ── */
.contact-grid{display:grid;grid-template-columns:1fr 1.4fr;gap:4rem;align-items:start}
.contact-info-label{font-family:"Barlow Condensed",sans-serif;font-size:.65rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:rgba(245,240,232,.5);margin-bottom:.4rem;margin-top:1.8rem}
.contact-info-label:first-child{margin-top:0}
.contact-info-value{font-size:1.05rem;font-weight:500;color:var(--cream)}
.contact-info-value a{color:var(--saffron-lt);transition:color .2s}
.contact-info-value a:hover{color:#fff}
.social-chips{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.5rem}
.social-chip-link{font-family:"Barlow Condensed",sans-serif;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:.5rem .9rem;border:1.5px solid var(--saffron);color:#fff;border-radius:2px;transition:all .2s;white-space:nowrap;display:inline-flex;align-items:center;justify-content:center}
.social-chip-link:hover{border-color:var(--saffron);color:#fff;background:rgba(253,29,33,.12)}
.demo-box{background:var(--white);border-radius:4px;padding:2.5rem;box-shadow:0 4px 24px rgba(28,35,64,.1)}
.form-group{margin-bottom:1.2rem}
.form-label{display:block;font-family:"Barlow Condensed",sans-serif;font-size:.65rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--navy);margin-bottom:.45rem}
.form-input,.form-select,.form-textarea{width:100%;background:var(--white);border:1.5px solid rgba(28,35,64,.2);color:var(--text-dark);padding:.8rem 1rem;font-family:"Inter",sans-serif;font-size:.92rem;outline:none;border-radius:3px;transition:border-color .2s,box-shadow .2s;-webkit-appearance:none;appearance:none}
.form-input:focus,.form-select:focus,.form-textarea:focus{border-color:var(--saffron);box-shadow:0 0 0 3px rgba(253,29,33,.12)}
.form-input::placeholder,.form-textarea::placeholder{color:var(--text-muted)}
.form-select option{background:var(--white)}
.form-textarea{resize:vertical;min-height:110px}
.form-2col{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.form-success{font-size:.85rem;color:var(--sage);margin-top:.7rem;min-height:1.2em}
.form-error{font-size:.85rem;color:var(--coral);margin-top:.7rem;min-height:1.2em}
.req-list{list-style:none;margin-bottom:1.5rem}
.req-list li{font-size:.85rem;color:var(--text-mid);padding:.4rem 0;border-bottom:1px solid rgba(28,35,64,.07);display:flex;gap:.7rem;align-items:flex-start}
.req-list li::before{content:"▸";color:var(--saffron);flex-shrink:0}
.mos-box{margin-top:2.5rem;padding:1.5rem;background:rgba(253,29,33,.08);border:1px solid rgba(253,29,33,.2);border-radius:4px}
.mos-box-label{font-family:"Barlow Condensed",sans-serif;font-size:.65rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-bottom:.4rem}
.mos-box-name{font-size:1.1rem;font-weight:600;color:var(--cream)}
.mos-box-addr{font-size:.85rem;color:rgba(245,240,232,.55);margin-top:.2rem}
.mos-box-link{font-size:.8rem;color:var(--saffron-lt);margin-top:.4rem;display:inline-block}

/* ── CONNECT / SOCIALS ── */
.socials-row{display:flex;justify-content:center;gap:1.5rem;flex-wrap:wrap;margin-top:2.5rem}
.social-block{display:flex;flex-direction:column;align-items:center;gap:.7rem;font-family:"Barlow Condensed",sans-serif;font-size:.65rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:rgba(245,240,232,.55);transition:color .2s}
.social-block:hover{color:var(--saffron-lt)}
.soc-icon{width:50px;height:50px;border:1px solid rgba(253,29,33,.25);border-radius:3px;display:flex;align-items:center;justify-content:center;transition:all .2s}
.social-block:hover .soc-icon{border-color:var(--saffron);background:rgba(253,29,33,.1)}

/* ── FILTER BAR ── */
.filter-bar{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:2.5rem}
.filter-btn{font-family:"Barlow Condensed",sans-serif;font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:.5rem 1.2rem;border:1.5px solid rgba(28,35,64,.2);background:transparent;color:var(--text-mid);border-radius:2px;cursor:pointer;transition:all .2s}
.filter-btn:hover,.filter-btn.active{background:var(--saffron);color:#fff;border-color:var(--saffron)}

/* ── FOOTER ── */
.site-footer{background:var(--navy-deep);color:var(--cream);padding:5rem 6vw 3rem}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:3rem;margin-bottom:3rem}
.footer-logo{height:58px;width:auto;margin-bottom:1rem}
.footer-brand{font-family:"Barlow Condensed",sans-serif;font-size:1.2rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--saffron);margin-bottom:.7rem}
.footer-desc{font-size:.85rem;line-height:1.75;color:rgba(245,240,232,.5);max-width:240px}
.footer-socials{display:flex;gap:.6rem;margin-top:1.2rem}
.fsoc{width:36px;height:36px;border:1px solid rgba(253,29,33,.25);border-radius:3px;display:flex;align-items:center;justify-content:center;color:rgba(245,240,232,.45);transition:all .2s}
.fsoc:hover{border-color:var(--saffron);color:var(--saffron);background:rgba(253,29,33,.1)}
.fc-title{font-family:"Barlow Condensed",sans-serif;font-size:.6rem;font-weight:700;letter-spacing:.28em;text-transform:uppercase;color:var(--saffron);margin-bottom:1rem}
.fc-links{list-style:none}
.fc-links li{margin-bottom:.55rem}
.fc-links a{font-size:.85rem;color:rgba(245,240,232,.5);transition:color .2s}
.fc-links a:hover{color:var(--saffron-lt)}
.footer-bottom{padding-top:2rem;border-top:1px solid rgba(253,29,33,.3);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem}
.footer-copy{font-size:.75rem;color:rgba(245,240,232,.35)}
.footer-tag{font-family:"Barlow Condensed",sans-serif;font-size:.62rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--saffron)}

/* ── REVEAL ── */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:translateY(0)}

/* ── RESPONSIVE ── */
@media(max-width:1024px){
  .releases-grid{grid-template-columns:1fr 1fr}
  .rel-card.featured{grid-column:span 2}
  .stats-band{grid-template-columns:1fr 1fr}
  .footer-grid{grid-template-columns:1fr 1fr;gap:2rem}
  .events-grid{grid-template-columns:1fr 1fr}
  .pillars-grid{grid-template-columns:1fr}
}
@media(max-width:768px){
  :root{--nav-h:64px}
  .sec{padding:4rem 5vw}
  .nav-links,.nav-cta{display:none}
  .nav-hamburger{display:flex}
  .nav-links.open{display:flex;flex-direction:column;gap:0;position:absolute;top:var(--nav-h);left:0;right:0;background:rgba(15,21,37,.98);border-bottom:2px solid var(--saffron);padding:.5rem 0}
  #main-nav.light .nav-links.open{background:rgba(15,21,37,.98)}
  .nav-links.open li{border-bottom:1px solid rgba(253,29,33,.1)}
  .nav-links.open a{display:block;padding:.9rem 5vw;font-size:.9rem}
  .split,.split.reverse{grid-template-columns:1fr;direction:ltr}
  .split-photo{min-height:280px}
  .stats-band{grid-template-columns:1fr 1fr}
  .artists-grid{grid-template-columns:1fr 1fr}
  .gallery-strip{grid-template-columns:1fr 1fr;height:300px}
  .flyers-grid{grid-template-columns:1fr 1fr}
  .contact-grid{grid-template-columns:1fr}
  .form-2col{grid-template-columns:1fr}
  .hero-stats{display:none}
  .hero-scroll{display:none}
  .events-grid{grid-template-columns:1fr}
  .event-row-inner{grid-template-columns:80px 1fr}
  .event-row-inner .btn{display:none}
  .footer-grid{grid-template-columns:1fr;gap:2rem}
  .footer-desc{max-width:100%}
  .page-hero{height:280px}
}
@media(max-width:480px){
  .releases-grid{grid-template-columns:1fr}
  .rel-card.featured{grid-column:span 1}
  .artists-grid{grid-template-columns:1fr}
  .flyers-grid{grid-template-columns:1fr}
  .hero-btns{flex-direction:column}
}

/* - NEWSLETTER - */
.newsletter-section{background:var(--navy-deep);color:var(--cream);padding:4.5rem 6vw;position:relative;overflow:hidden}
.newsletter-inner{max-width:920px;margin:0 auto;text-align:center}
.newsletter-kicker{font-family:"Barlow Condensed",sans-serif;font-size:.68rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--saffron-lt);margin-bottom:.65rem}
.newsletter-title{font-family:"Playfair Display",serif;font-size:clamp(2rem,4vw,3.2rem);font-weight:900;color:#fff;line-height:1.05;margin-bottom:.8rem}
.newsletter-copy{max-width:650px;margin:0 auto 1.7rem;color:rgba(245,240,232,.65);line-height:1.75;font-size:.95rem}
.newsletter-form{display:flex;gap:.7rem;max-width:680px;margin:0 auto;align-items:stretch}
.newsletter-input{flex:1;min-width:0;background:#fff;border:0;border-radius:3px;padding:.9rem 1rem;font:400 .92rem "Inter",sans-serif;color:var(--text-dark);outline:none}
.newsletter-input:focus{box-shadow:0 0 0 3px rgba(253,29,33,.25)}
.newsletter-submit{white-space:nowrap}
.newsletter-status{min-height:1.25rem;margin-top:.75rem;font-size:.82rem;color:var(--sage-lt)}
.newsletter-status.error{color:#ff8c8c}
.newsletter-consent{font-size:.7rem;color:rgba(245,240,232,.42);margin-top:.8rem;line-height:1.5}
.newsletter-consent a{color:rgba(245,240,232,.65);text-decoration:underline}
/* - COOKIE BANNER - */
.cookie-banner{position:fixed;left:1rem;right:1rem;bottom:1rem;z-index:2000;background:rgba(15,21,37,.98);border:1px solid rgba(253,29,33,.35);box-shadow:0 18px 50px rgba(0,0,0,.35);border-radius:5px;padding:1rem 1.15rem;display:none;gap:1rem;align-items:center;justify-content:space-between}
.cookie-banner.show{display:flex}
.cookie-copy{font-size:.76rem;line-height:1.55;color:rgba(245,240,232,.72);max-width:850px}
.cookie-copy a{color:#fff;text-decoration:underline}
.cookie-actions{display:flex;gap:.5rem;flex-shrink:0}
.cookie-btn{font-family:"Barlow Condensed",sans-serif;font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;border-radius:3px;padding:.55rem .9rem;border:1px solid rgba(255,255,255,.25);cursor:pointer}
.cookie-btn.accept{background:var(--saffron);border-color:var(--saffron);color:#fff}
.cookie-btn.reject{background:transparent;color:#fff}
/* - ACCESSIBLE FOCUS - */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid rgba(253,29,33,.55);outline-offset:3px}
@media(max-width:768px){.newsletter-form{flex-direction:column}.cookie-banner{flex-direction:column;align-items:flex-start}.cookie-actions{width:100%}.cookie-btn{flex:1}}

.legal-page{min-height:50vh}.legal-wrap{max-width:820px;margin:0 auto}.legal-wrap h2{font-family:"Playfair Display",serif;color:var(--navy);font-size:1.45rem;margin:2rem 0 .7rem}.legal-wrap p{color:var(--text-mid);line-height:1.8;font-size:.95rem;margin-bottom:1rem}.legal-wrap a{color:var(--saffron);text-decoration:underline}.footer-social-links{flex-wrap:wrap}.footer-social-links a{width:auto;min-width:72px;height:36px;border:1.5px solid var(--saffron);border-radius:3px;display:flex;align-items:center;justify-content:center;color:#fff;font-family:"Barlow Condensed",sans-serif;font-size:.58rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:.25rem .65rem;text-align:center;white-space:nowrap}.footer-social-links a:hover{border-color:var(--saffron);color:#fff;background:rgba(253,29,33,.12)}.footer-legal{display:flex;justify-content:center;gap:1.2rem;margin-top:1.5rem}.footer-legal a{font-size:.7rem;color:rgba(245,240,232,.4);text-decoration:underline}.footer-legal a:hover{color:var(--saffron-lt)}

/* ── IMAGE FIT / RATIO NORMALISATION ──
   Content artwork keeps its complete original composition. Containers are matched to
   the supplied artwork ratios instead of forcing portrait flyers into landscape boxes. */
.rel-thumb.rel-thumb-square{aspect-ratio:1 / 1}
.rel-thumb.rel-thumb-portrait-carnival{aspect-ratio:435 / 538}
.rel-thumb.rel-thumb-portrait-openair{aspect-ratio:606 / 768}
.rel-thumb.rel-thumb-landscape{aspect-ratio:16 / 9}
body[data-page="releases"] .rel-thumb{height:auto;min-height:0;background:#fff}
body[data-page="releases"] .rel-thumb img{width:100%;height:100%;object-fit:contain;object-position:center;background:#fff}

.event-big-card-img.event-img-landscape{height:auto;aspect-ratio:16 / 9}
.event-big-card-img.event-img-carnival{height:auto;aspect-ratio:435 / 538}
.event-big-card-img img{width:100%;height:100%;object-fit:cover;object-position:center}
.event-big-card-img.event-img-carnival img{object-fit:contain;background:#fff}

.flyer-card{min-height:0}
.flyer-card img{width:100%;height:auto;max-height:none;object-fit:contain;object-position:center;background:#fff}

.gal-item{height:auto;overflow:hidden;background:#fff}
.gal-item img{width:100%;height:auto;display:block;object-fit:contain;object-position:center;transition:transform .5s}
.gal-item:hover img{transform:scale(1.02)}

/* Split-image sections intentionally fill their full column height; their photographs
   are photographic backgrounds rather than artwork/flyer assets. */
.split-photo img{width:100%;height:100%;object-fit:cover;object-position:center}
.about-story-photo img{object-fit:cover;object-position:center}

/* RELEASES PAGE — keep the square compilation artwork anchored to the top of its
   grid cell instead of vertically centring it inside the taller neighbouring flyer cells. */
body[data-page="releases"] .rel-card.featured .rel-thumb{
  height:auto;
  min-height:0;
  aspect-ratio:1 / 1;
  align-self:start;
}
body[data-page="releases"] .rel-card.featured .rel-thumb img{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center top;
  background:#fff;
}

/* ─────────────────────────────────────────────────────────────
   MOBILE REFINEMENTS — SCREENSHOT AMENDMENTS
   These overrides are intentionally limited to <=768px so the
   approved desktop layout is unchanged.
   ───────────────────────────────────────────────────────────── */
@media (max-width:768px){
  /* IMG 1 — homepage: reduce the excessive gap between the mobile
     header/hero artwork and the opening text. */
  body[data-page="home"] .hero{
    min-height:0;
    display:block;
    padding:0 5vw 3rem;
  }
  body[data-page="home"] .hero-bg{
    position:relative;
    inset:auto;
    width:calc(100% + 10vw);
    height:175px;
    margin:0 -5vw 1.5rem;
  }
  body[data-page="home"] .hero-bg img{height:100%;object-fit:cover;object-position:center top}
  body[data-page="home"] .hero-content{max-width:none}
  body[data-page="home"] .hero-title{font-size:clamp(3rem,16vw,4.4rem);margin-bottom:1rem}
  body[data-page="home"] .hero-sub{font-size:.92rem;line-height:1.65;margin-bottom:1.5rem}
  body[data-page="home"] .hero-btns{margin-bottom:0}

  /* IMG 4 — homepage Born From The Dance Floor: give the paragraph
     breathing room after the Read Our Full Story button. */
  body[data-page="home"] .split-text .btn + p{margin-top:1.2rem !important}

  /* IMG 5 + IMG 8 — birthday banner: keep the content compact instead
     of allowing the flex items to stack and make a very tall red box. */
  .birthday-banner{
    padding:.8rem .9rem;
    gap:.65rem;
    flex-wrap:nowrap;
    align-items:center;
    margin-bottom:1.8rem;
  }
  .birthday-banner > div:first-child{font-size:1.45rem !important;flex:0 0 auto}
  .birthday-banner > div:nth-child(2){min-width:0}
  .birthday-title{font-size:.82rem;line-height:1.1}
  .birthday-sub{font-size:.64rem;line-height:1.35;margin-top:.15rem}
  .birthday-banner .btn{flex:0 0 auto;padding:.45rem .55rem;font-size:.58rem;letter-spacing:.08em;white-space:nowrap}

  /* IMG 2 + IMG 3 — footer: keep the brand block full width, then place
     Label / Events / Connect side-by-side; social buttons are 3 per row. */
  .site-footer{padding:2.75rem 5vw 2rem}
  .footer-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2rem;margin-bottom:1.8rem}
  .footer-grid > div:first-child{grid-column:1 / -1}
  .footer-desc{max-width:none;font-size:.76rem;line-height:1.55;margin-bottom:.5rem}
  .footer-brand{font-size:1rem;margin-bottom:.45rem}
  .footer-social-links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.45rem;margin-top:.8rem}
  .footer-social-links a{min-width:0;width:100%;height:34px;padding:.2rem .2rem;font-size:.55rem;letter-spacing:.025em;overflow:hidden}
  .fc-title{font-size:.56rem;letter-spacing:.2em;margin-bottom:.7rem}
  .fc-links li{margin-bottom:.4rem}
  .fc-links a{font-size:.68rem;line-height:1.25}
  .footer-bottom{padding-top:1.25rem;gap:.65rem}
  .footer-copy{font-size:.62rem;line-height:1.4}
  .footer-tag{font-size:.54rem;line-height:1.4;letter-spacing:.14em}
  .footer-legal{margin-top:1rem;gap:.8rem}
  .footer-legal a{font-size:.62rem}

  /* IMG 6 + IMG 8 — mobile page heroes/content start too low. */
  .page-hero{height:195px;padding:2rem 5vw 1.75rem}
  .page-hero-title{font-size:clamp(2.2rem,11vw,3.4rem)}
  body[data-page="releases"] > .sec.sec-white,
  body[data-page="events"] > .sec.sec-cream{padding-top:2.5rem}

  /* IMG 6 — releases: bring the first artwork closer to its heading. */
  body[data-page="releases"] .row-sb{margin-bottom:1.2rem}
  body[data-page="releases"] .row-sb .sec-title{margin-bottom:.7rem}
  body[data-page="releases"] .releases-grid{gap:1rem}

  /* IMG 7 — three release-platform buttons stay together on one line. */
  body[data-page="releases"] .stream-platforms{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:.5rem;
    margin-top:1.5rem;
    padding-top:1.2rem;
  }
  body[data-page="releases"] .stream-platforms .platform-label{
    grid-column:1 / -1;
    text-align:center;
  }
  body[data-page="releases"] .stream-platforms .btn{
    width:100%;
    padding:.5rem .2rem;
    font-size:.6rem;
    letter-spacing:.08em;
    white-space:nowrap;
  }

  /* IMG 9 — events gallery: all four image cells are the same visual size
     on mobile instead of the wide title-card collapsing vertically. */
  .gallery-strip{
    grid-template-columns:1fr 1fr;
    grid-auto-rows:150px;
    height:auto;
    gap:2px;
  }
  .gallery-strip .gal-item{height:150px}
  .gallery-strip .gal-item img{width:100%;height:100%;object-fit:cover;object-position:center}

  /* IMG 10 — contact socials: three buttons per row. */
  body[data-page="contact"] .social-chips{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:.5rem;
    margin-top:1rem;
  }
  body[data-page="contact"] .social-chip-link{
    width:100%;
    min-width:0;
    padding:.45rem .2rem;
    font-size:.58rem;
    letter-spacing:.04em;
  }
}

@media (max-width:480px){
  /* Keep the compact three-column footer/social treatment on the smallest
     supported screens as well. */
  .footer-grid{gap:1rem}
  .footer-social-links{gap:.35rem}
  .footer-social-links a{font-size:.52rem}
  .fc-links a{font-size:.64rem}
  .page-hero{height:180px}
  body[data-page="home"] .hero-bg{height:160px}
}

/* ─────────────────────────────────────────────────────────────
   MOBILE SPACING CORRECTIONS — v18
   Align the mobile spacing with the Releases-page reference.
   ───────────────────────────────────────────────────────────── */
@media (max-width:768px){
  /* Home: remove the remaining excessive gap between the mobile hero
     artwork and the opening copy. */
  body[data-page="home"] .hero-bg{margin-bottom:.5rem}

  /* Home/About split headings: use the same compact heading-to-content
     relationship as the Releases page, while restoring a visible gap. */
  body[data-page="home"] .split-text .sec-title,
  body[data-page="about"] .split-text .sec-title{margin-bottom:.7rem !important}

  /* Footer: reduce the remaining vertical dead space before the footer
     bottom/copyright area without changing the three-column arrangement. */
  .site-footer{padding-bottom:1.25rem}
  .footer-grid{margin-bottom:.8rem}
  .footer-bottom{padding-top:.75rem}
}

/* ─────────────────────────────────────────────────────────────
   MOBILE SPACING CORRECTIONS — v19
   Calibrated against the supplied mobile screenshots.
   ───────────────────────────────────────────────────────────── */
@media (max-width:768px){
  /* HOME — shorten the visual hero strip so the opening copy begins
     materially closer to the fixed navigation/header. */
  body[data-page="home"] .hero-bg{height:100px;margin-bottom:.5rem}

  /* ABOUT — use the same ~40px content-start spacing used by the
     Releases page instead of the larger split-section top spacing. */
  body[data-page="about"] .split-text{padding-top:2.5rem}

  /* NEWSLETTER → FOOTER — remove the excessive mobile dead space
     below the consent line and reduce the footer's top inset. */
  .newsletter-section{padding-top:2.5rem;padding-bottom:1.25rem}
  .site-footer{padding-top:2rem}
}

@media (max-width:480px){
  body[data-page="home"] .hero-bg{height:90px}
}

/* ─────────────────────────────────────────────────────────────
   MOBILE SPACING / PLATFORM CONSISTENCY — v20
   Final calibration against the latest supplied screenshots.
   ───────────────────────────────────────────────────────────── */
@media (max-width:768px){
  /* ABOUT — match the Releases page's compact ~40px gap between the
     story image and the opening text. Keep the content top-aligned so
     the browser cannot reintroduce vertical centering space. */
  body[data-page="about"] .split-text{
    padding:2.5rem 5vw 3rem !important;
    justify-content:flex-start !important;
    align-self:start;
    min-height:0;
  }

  /* HOME — use the same three-platform mobile arrangement as Releases.
     The three buttons remain side-by-side beneath the full-width label. */
  body[data-page="home"] .stream-platforms,
  body[data-page="releases"] .stream-platforms{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:.5rem;
    margin-top:1.5rem;
    padding-top:1.2rem;
  }
  body[data-page="home"] .stream-platforms .platform-label,
  body[data-page="releases"] .stream-platforms .platform-label{
    grid-column:1 / -1;
    text-align:center;
  }
  body[data-page="home"] .stream-platforms .btn,
  body[data-page="releases"] .stream-platforms .btn{
    width:100%;
    padding:.5rem .2rem;
    font-size:.6rem;
    letter-spacing:.08em;
    white-space:nowrap;
  }
}

/* ─────────────────────────────────────────────────────────────
   MOBILE PAGE-HERO TITLE NORMALISATION — v21
   The About title was visually larger because its font size was
   viewport-dependent while the longer title wraps to two lines.
   Use one fixed mobile title size for every inner-page hero so
   About, Releases, Events and Contact share the same typography.
   ───────────────────────────────────────────────────────────── */
@media (max-width:768px){
  .page-hero .page-hero-title{
    font-size:2.75rem !important;
    line-height:.95 !important;
    letter-spacing:-.02em !important;
    margin:0 !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   MOBILE ABOUT ROOT-CAUSE FIX — v22
   The About story section uses a two-column .split whose image is
   substantially taller than the text. On mobile the grid becomes one
   column, but .split-text remains a flex container with
   justify-content:center. That vertically centres the text inside the
   image-height grid row and creates the large blank gap seen above
   "WHO WE ARE". The fix is to make the About split a normal block flow
   on mobile and remove flex centring from its text column.
   ───────────────────────────────────────────────────────────── */
@media (max-width:768px){
  body[data-page="about"] .split{
    display:block !important;
  }
  body[data-page="about"] .split-photo{
    min-height:0 !important;
    height:auto !important;
    overflow:hidden;
  }
  body[data-page="about"] .split-photo img{
    width:100% !important;
    height:auto !important;
    display:block;
    object-fit:cover !important;
    object-position:center !important;
  }
  body[data-page="about"] .split-text{
    display:block !important;
    height:auto !important;
    min-height:0 !important;
    padding:2.5rem 5vw 3rem !important;
    justify-content:initial !important;
    align-self:auto !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   SITE-WIDE VISUAL CORRECTIONS — v23
   Based on the latest supplied desktop/mobile screenshots.
   ───────────────────────────────────────────────────────────── */

/* ABOUT MOBILE — force the story content into normal document flow.
   This is deliberately more specific than the earlier .split/.split-text
   rules so the image cannot determine the text column's vertical position. */
@media (max-width:768px){
  body[data-page="about"] .split.about-story,
  body[data-page="about"] .split:first-of-type{
    display:block !important;
    grid-template-columns:none !important;
  }
  body[data-page="about"] .split:first-of-type .split-text{
    display:block !important;
    position:static !important;
    height:auto !important;
    min-height:0 !important;
    margin:0 !important;
    padding:40px 5vw 48px !important;
    transform:none !important;
    justify-content:normal !important;
    align-self:auto !important;
  }
  body[data-page="about"] .split:first-of-type .split-text > .eyebrow,
  body[data-page="about"] .split:first-of-type .split-text > .divider{
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;
  }
}

/* HOME — create a clear breathing space below Read Our Full Story before
   the explanatory paragraph begins. */
@media (min-width:769px){
  body[data-page="home"] .split-text .btn-outline-light + p{
    margin-top:1.8rem !important;
  }
}
@media (max-width:768px){
  body[data-page="home"] .split-text .btn-outline-light + p{
    margin-top:1.8rem !important;
  }
}

/* RELEASE / HOME STREAM BUTTONS — centre the label text in every button. */
.stream-platforms .btn{
  text-align:center !important;
  justify-content:center !important;
  align-items:center !important;
}

/* FOOTER DESKTOP — keep all six social buttons on one horizontal line. */
@media (min-width:769px){
  .footer-social-links{
    flex-wrap:nowrap !important;
    gap:.45rem !important;
  }
  .footer-social-links a{
    flex:1 1 0 !important;
    min-width:0 !important;
    padding-left:.35rem !important;
    padding-right:.35rem !important;
  }
}

/* CONTACT — six social buttons are always exactly 3 + 3 on mobile. */
@media (max-width:768px){
  body[data-page="contact"] .social-chips{
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    grid-auto-flow:row !important;
    width:100% !important;
    gap:.5rem !important;
  }
  body[data-page="contact"] .social-chip-link{
    width:100% !important;
    min-width:0 !important;
    margin:0 !important;
    text-align:center !important;
    justify-content:center !important;
  }
}

/* EVENTS — the first two landscape cards were being stretched to the height
   of the taller portrait card by CSS grid. Let each card keep its natural
   content height so the large blank area below their buttons disappears. */
.events-grid{
  align-items:start !important;
}

/* EVENTS GALLERY — the supplied live title-card artwork is an intentionally
   ultra-wide image, which otherwise renders much shorter than its neighbours.
   Give that first gallery cell the same visual height as the other cells and
   let the artwork fill it. */
.gallery-strip .gal-item.gal-landscape-wide{
  height:260px !important;
  overflow:hidden !important;
}
.gallery-strip .gal-item.gal-landscape-wide img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center !important;
}

@media (max-width:768px){
  .gallery-strip .gal-item.gal-landscape-wide{
    height:150px !important;
  }
}


/* ============================================================
   FINAL EVENTS / CONTACT LAYOUT RULES
   Rebuilt as the single authoritative layer for these components.
   ============================================================ */

/* Inner-page desktop heroes. */
@media (min-width:769px){
  .page-hero{
    height:300px !important;
    padding:2.5rem 6vw !important;
  }
}

/* EVENTS — four cards in a controlled three-column grid.
   Each card owns its own height. The portrait Carnival artwork therefore
   cannot stretch the landscape cards in the same grid row. */
.upcoming-event-cards{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:1.5rem !important;
  width:100% !important;
  align-items:start !important;
  margin-bottom:3rem !important;
}

.upcoming-event-cards > .event-big-card{
  width:100% !important;
  min-width:0 !important;
  height:auto !important;
  min-height:0 !important;
  align-self:start !important;
  display:flex !important;
  flex-direction:column !important;
  overflow:hidden !important;
}

/* Landscape event artwork: normal 16:9 presentation, not a forced 320px box. */
.upcoming-event-cards > .event-big-card .event-big-card-img.event-img-landscape{
  width:100% !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  aspect-ratio:16 / 9 !important;
  flex:0 0 auto !important;
  overflow:hidden !important;
  position:relative !important;
}

/* Carnival artwork keeps its portrait ratio. */
.upcoming-event-cards > .event-big-card .event-big-card-img.event-img-carnival{
  width:100% !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  aspect-ratio:435 / 538 !important;
  flex:0 0 auto !important;
  overflow:hidden !important;
  position:relative !important;
}

.upcoming-event-cards > .event-big-card .event-big-card-img img{
  display:block !important;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  object-position:center !important;
}

.upcoming-event-cards > .event-big-card .event-big-card-img.event-img-landscape img{
  object-fit:cover !important;
}

.upcoming-event-cards > .event-big-card .event-big-card-img.event-img-carnival img{
  object-fit:contain !important;
  background:#fff !important;
}

.upcoming-event-cards > .event-big-card .event-big-card-body{
  flex:0 0 auto !important;
  padding:1.3rem 1.4rem 1.5rem !important;
}

/* Compact ticket buttons: visually consistent with the rest of the site. */
.upcoming-event-cards .event-ticket-btn{
  display:flex !important;
  width:100% !important;
  min-height:40px !important;
  margin-top:1rem !important;
  padding:.65rem 1rem !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  font-size:.72rem !important;
  letter-spacing:.12em !important;
}

/* CONTACT — exactly three socials per row at every viewport. */
body[data-page="contact"] .contact-social-grid{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  grid-template-rows:auto auto !important;
  grid-auto-flow:row !important;
  gap:.7rem !important;
  width:100% !important;
  margin-top:1.5rem !important;
}

body[data-page="contact"] .contact-social-grid .social-chip-link{
  display:flex !important;
  width:100% !important;
  min-width:0 !important;
  min-height:48px !important;
  margin:0 !important;
  padding:.5rem .4rem !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  box-sizing:border-box !important;
  white-space:nowrap !important;
}

/* EVENTS GALLERY — all four cells have the same visual height on desktop. */
.gallery-strip{
  height:260px !important;
  grid-auto-rows:260px !important;
  align-items:stretch !important;
}
.gallery-strip .gal-item,
.gallery-strip .gal-item.gal-landscape-wide{
  height:260px !important;
  min-height:260px !important;
  overflow:hidden !important;
}
.gallery-strip .gal-item img,
.gallery-strip .gal-item.gal-landscape-wide img{
  width:100% !important;
  height:100% !important;
  display:block !important;
  object-fit:cover !important;
  object-position:center !important;
}

@media (max-width:768px){
  /* Mobile: give the ticket CTA clear separation from the genre tags. */
  .upcoming-event-cards .event-ticket-btn{
    margin-top:1.5rem !important;
  }

  /* Keep the approved mobile event layout: one card per row, with the
     landscape artwork retaining its natural 16:9 presentation. */
  .upcoming-event-cards{
    grid-template-columns:1fr !important;
    gap:1rem !important;
  }
  .upcoming-event-cards > .event-big-card{
    width:100% !important;
  }
  .upcoming-event-cards > .event-big-card .event-big-card-img.event-img-landscape{
    aspect-ratio:16 / 9 !important;
  }
  .upcoming-event-cards > .event-big-card .event-big-card-img.event-img-carnival{
    aspect-ratio:435 / 538 !important;
  }

  body[data-page="contact"] .contact-social-grid{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    grid-template-rows:auto auto !important;
    gap:.5rem !important;
  }
  body[data-page="contact"] .contact-social-grid .social-chip-link{
    min-height:44px !important;
    padding:.45rem .2rem !important;
    font-size:.58rem !important;
    letter-spacing:.04em !important;
  }

  .gallery-strip{
    height:auto !important;
    grid-template-columns:1fr 1fr !important;
    grid-auto-rows:150px !important;
  }
  .gallery-strip .gal-item,
  .gallery-strip .gal-item.gal-landscape-wide{
    height:150px !important;
    min-height:150px !important;
  }
  .gallery-strip .gal-item img,
  .gallery-strip .gal-item.gal-landscape-wide img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:center !important;
  }
}