/* ==========================================================================
   SOUNDZGOOD WHITSUNDAYS - MAIN STYLESHEET
   --------------------------------------------------------------------------
   Sections:
     1.  Colours & fonts (edit these to restyle the whole site)
     2.  Base + reset
     3.  Buttons
     4.  Navigation
     5.  Footer
     6.  Generic page sections
     7.  Home page
     8.  Events page
     9.  Services page
     10. Contact page
     11. Optional / legacy classes
   ========================================================================== */


/* ==========================================================================
   1. COLOURS & FONTS
   ========================================================================== */

:root{
    --sg-orange:#ff6b00;
    --sg-orange-bright:#ff8c00;
    --sg-gold:#ffb700;

    /* Sunset tones taken from the SoundzGood 2.0 poster artwork */
    --sg-sun-top:#f7a83f;
    --sg-sun-mid:#f0862b;
    --sg-sun-deep:#e2661a;
    --sg-sand:#ffd9a0;

    --sg-black:#000;
    --sg-panel:#111;
    --sg-panel-light:#161616;
    --sg-border:#222;

    --sg-text:#fff;
    --sg-muted:#d0d0d0;
    --sg-dim:#aaa;

    --sg-font:Arial, Helvetica, sans-serif;
    /* Heavy black type, like the poster wordmark */
    --sg-font-display:"Arial Black", "Arial Bold", "Helvetica Neue", Impact, sans-serif;
    --sg-font-accent:'Courier New', Courier, monospace;
    --sg-font-script:"Brush Script MT", "Segoe Script", "Pacifico", cursive;

    /* Subtle paper-style grain, drawn in CSS so there is no extra image to load */
    --sg-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");

    --sg-max-width:1200px;
}


/* ==========================================================================
   2. BASE + RESET
   ========================================================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    background:var(--sg-black);
    color:var(--sg-text);
    font-family:var(--sg-font);
    line-height:1.6;

    /* Safety net so nothing can cause sideways scrolling */
    overflow-x:hidden;
}

img,
video{
    max-width:100%;
}

a{
    color:var(--sg-orange);
}

h1,h2,h3,h4,h5{
    line-height:1.15;
}

/* Big statement headings use the heavy poster-style type */
h1, h2,
.artist-card h3,
.split-card h3,
.detail-card p,
.featured-event h2{
    font-family:var(--sg-font-display);
    letter-spacing:-.5px;
}

/* Stops long words/URLs pushing the layout wider than the screen */
p, h1, h2, h3, h4, h5, li, a{
    overflow-wrap:break-word;
}


/* ==========================================================================
   3. BUTTONS
   ========================================================================== */

.btn{
    display:inline-block;

    background:var(--sg-orange);
    color:#fff;

    padding:16px 36px;
    border-radius:50px;
    border:2px solid var(--sg-orange);

    font-family:var(--sg-font-accent);
    font-weight:bold;
    font-size:1rem;
    letter-spacing:1px;
    text-transform:uppercase;
    text-decoration:none;
    text-align:center;

    /* Comfortable tap target on phones */
    min-height:52px;

    cursor:pointer;
    transition:transform .25s, background .25s;
}

.btn:hover,
.btn:focus-visible{
    transform:translateY(-3px);
}

.btn-outline{
    background:transparent;
    color:#fff;
    border:2px solid var(--sg-orange);
}

.btn-outline:hover,
.btn-outline:focus-visible{
    background:var(--sg-orange);
}

/* Extra-loud version used for the main ticket links */
.btn-ticket{
    background:var(--sg-orange-bright);
    border-color:var(--sg-orange-bright);
    font-size:1.15rem;
    padding:18px 46px;
    box-shadow:0 0 24px rgba(255,140,0,.45);
}

.buttons{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:18px;
}

/* Visible keyboard focus ring on every interactive element */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
    outline:3px solid var(--sg-gold);
    outline-offset:3px;
}


/* ==========================================================================
   4. NAVIGATION
   Menu content lives in components/navbar.html
   ========================================================================== */

nav{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    z-index:100;

    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;

    padding:20px 40px;

    background:linear-gradient(
        to bottom,
        rgba(0,0,0,.55),
        rgba(0,0,0,0)
    );
}

.logo a{
    color:#fff;
    font-size:26px;
    font-weight:700;
    letter-spacing:3px;
    text-decoration:none;
}

.Nav a{
    display:block;
    padding:0; /* logo shouldn't inherit the menu link padding */
    border-bottom:none;
}

.Nav img{
    height:45px;
    width:auto;
    display:block;
}

nav ul{
    display:flex;
    align-items:center;
    gap:32px;
    list-style:none;
}

nav a{
    display:inline-block;
    padding:10px 2px;

    color:#fff;
    font-size:.95rem;
    letter-spacing:1px;
    text-decoration:none;
    text-transform:uppercase;

    border-bottom:2px solid transparent;
    transition:color .25s, border-color .25s;
}

nav a:hover{
    color:var(--sg-gold);
}

/* Current page - set automatically by js/main.js */
nav a.active{
    color:var(--sg-orange);
    border-bottom-color:var(--sg-orange);
    font-weight:bold;
}

/* "Buy Tickets" pill inside the menu */
nav a.nav-ticket{
    background:var(--sg-orange);
    border:2px solid var(--sg-orange);
    border-radius:50px;
    padding:10px 22px;
    font-weight:bold;
}

nav a.nav-ticket:hover{
    background:transparent;
    color:#fff;
}

nav a.nav-ticket.active{
    border-bottom-color:var(--sg-orange);
}


/*  HOME PAGE MENU
    The hero is left clean, then the menu slides in as a fixed bar once
    you reach the next event section. It has to be fixed rather than
    absolute, otherwise it would sit at the top of the document and be
    out of sight by the time it is wanted.
    js/main.js adds and removes .is-tucked.                             */
.home nav{
    position:fixed;
    background:rgba(10,10,10,.94);
    backdrop-filter:blur(8px);
    border-bottom:1px solid var(--sg-border);
    transition:opacity .35s ease, transform .4s ease, visibility .4s;
}

.home nav.is-tucked{
    opacity:0;
    visibility:hidden;
    transform:translateY(-105%);
    pointer-events:none;
}

/* The sponsors are event sponsors, so they stay on the event page */
.home .footer-sponsors{
    display:none;
}


/* ==========================================================================
   5. FOOTER
   Footer content lives in components/footer.html
   ========================================================================== */

.footer{
    background:#0a0a0a;
    border-top:1px solid var(--sg-border);
}

.footer-content{
    max-width:var(--sg-max-width);
    margin:auto;
    padding:60px 6%;

    display:grid;
    grid-template-columns:2fr 1fr 1fr;
    gap:50px;
}

.footer-logo h2{
    color:var(--sg-orange);
    margin-bottom:15px;
    letter-spacing:2px;
}

.footer-logo p{
    color:var(--sg-dim);
}

.footer-links,
.footer-contact{
    display:flex;
    flex-direction:column;
}

.footer-links h3,
.footer-contact h3{
    margin-bottom:18px;
    font-size:1.05rem;
}

.footer-links a{
    color:var(--sg-dim);
    text-decoration:none;
    padding:9px 0; /* keeps the tap target 44px tall */
    transition:color .25s;
}

.footer-links a:hover{
    color:var(--sg-orange);
}

.footer-contact p{
    color:var(--sg-dim);
    margin-bottom:10px;
}

.footer-contact a{
    display:inline-block;
    padding:9px 0; /* keeps the tap target 44px tall */
    color:var(--sg-dim);
    text-decoration:none;
}

.footer-contact a:hover{
    color:var(--sg-orange);
}

.footer-bottom{
    border-top:1px solid var(--sg-border);
    text-align:center;
    padding:20px;
}

.footer-bottom p{
    color:#666;
    font-size:.9rem;
}


/* ==========================================================================
   6. GENERIC PAGE SECTIONS
   ========================================================================== */

.section{
    padding:80px 6%;
}

.section-inner{
    max-width:var(--sg-max-width);
    margin:auto;
}

.section h2{
    margin-bottom:20px;
    text-align:center;
    font-size:clamp(1.9rem, 5vw, 2.8rem);
    letter-spacing:1px;
    text-transform:uppercase;
}

.section-intro{
    max-width:720px;
    margin:0 auto 50px;
    text-align:center;
    color:var(--sg-muted);
}

.dark{
    background:var(--sg-panel);
}

.center-text{
    text-align:center;
}

/* Page headers (services / contact) */
.page-header{
    position:relative;
    min-height:52vh;
    display:flex;
    justify-content:center;
    align-items:center;
    overflow:hidden;

    background:linear-gradient(140deg, #1a0d00 0%, #000 55%, #150a00 100%);
}

.header-video{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
}

.header-overlay{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.65);
}

.header-content{
    position:relative;
    z-index:2;
    text-align:center;
    padding:110px 6% 60px;
    max-width:820px;
}

.header-content h1{
    font-size:clamp(2.2rem, 6vw, 4rem);
    margin-bottom:14px;
    text-transform:uppercase;
    letter-spacing:1px;
}

.header-content p{
    color:var(--sg-muted);
    font-size:1.05rem;
}

/* Simple image grid */
.gallery{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));
    gap:20px;
}

.gallery img{
    width:100%;
    height:250px;
    object-fit:cover;
    border-radius:12px;
}

/* Simple text grid */
.features{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
    gap:30px;
}

.feature{
    text-align:center;
}

.feature h3{
    color:var(--sg-orange);
    margin-bottom:10px;
}

.feature p{
    color:var(--sg-muted);
}

/* Call to action block */
.cta{
    text-align:center;
}

.cta p{
    max-width:640px;
    margin:0 auto 30px;
    color:var(--sg-muted);
}


/* ==========================================================================
   7. HOME PAGE
   ========================================================================== */

.hero{
    position:relative;
    min-height:100vh;
    min-height:100svh;
    overflow:hidden;

    display:flex;
    align-items:center;
    justify-content:center;
}

.hero-video{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    object-fit:cover;
    z-index:0;
}

.hero .overlay{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.5);
    z-index:1;
}

.hero-content{
    position:relative;
    z-index:2;
    text-align:center;
    padding:120px 20px 60px;

    width:100%;
    max-width:900px;
    min-width:0;
}

.hero-logo{
    width:min(340px, 70%);
    height:auto;
    margin-bottom:24px;
}

.hero-content h1{
    font-size:clamp(2.6rem, 8vw, 5rem);
    margin-bottom:20px;
    line-height:1;
}

.hero-tagline{
    font-family:var(--sg-font-accent);
    font-size:clamp(.95rem, 2.5vw, 1.2rem);
    letter-spacing:3px;
    text-transform:uppercase;
    color:var(--sg-muted);
    margin-bottom:32px;
}

/* The two sides of SoundzGood */
.split-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
    gap:30px;
    max-width:var(--sg-max-width);
    margin:auto;
}

.split-card{
    background:var(--sg-panel);
    border:1px solid var(--sg-border);
    border-top:4px solid var(--sg-orange);
    border-radius:16px;
    padding:40px 34px;

    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:16px;
}

.split-card h3{
    font-size:1.5rem;
    letter-spacing:1px;
    text-transform:uppercase;
    color:var(--sg-orange);
}

.split-card p{
    color:var(--sg-muted);
    flex:1;
}

/* Featured event panel */
/*  The event artwork sits behind this panel, under a dark wash so the
    heading, details and buttons stay readable over it.                 */
.featured-event{
    position:relative;
    overflow:hidden;

    background-color:#000;
    background-image:
        linear-gradient(rgba(0,0,0,.74), rgba(0,0,0,.86)),
        url("images/soundzgood-2-0-banner.jpg");
    background-size:cover;
    background-position:center;

    border:1px solid #3a2000;
    border-radius:18px;
    max-width:var(--sg-max-width);
    margin:auto;
    padding:50px 40px;
    text-align:center;
}

.featured-event .eyebrow{
    font-family:var(--sg-font-accent);
    letter-spacing:3px;
    text-transform:uppercase;
    color:var(--sg-gold);
    font-size:.85rem;
    margin-bottom:12px;
}

.featured-event h2{
    font-size:clamp(2.2rem, 7vw, 4.2rem);
    margin-bottom:24px;
    text-transform:uppercase;
    letter-spacing:2px;
}

.event-facts{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:14px 40px;
    list-style:none;
    margin-bottom:32px;
}

.event-facts li{
    font-family:var(--sg-font-accent);
    letter-spacing:1px;
    text-transform:uppercase;
    color:var(--sg-muted);
    font-size:.95rem;
}

.event-facts li strong{
    display:block;
    color:#fff;
    font-size:1.1rem;
}


/* ==========================================================================
   8. EVENTS PAGE
   ========================================================================== */

.event-hero{
    position:relative;
    min-height:100vh;
    min-height:100svh;
    overflow:hidden;

    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
}

/*  Poster-style hero: an orange sunset sky with the video showing through
    underneath as a silhouette, exactly like the artwork.                 */
.event-hero .overlay{
    position:absolute;
    inset:0;
    background:
        linear-gradient(
            to bottom,
            rgba(247,168,63,.97) 0%,
            rgba(244,150,52,.95) 38%,
            rgba(235,118,34,.86) 62%,
            rgba(198,84,20,.72) 80%,
            rgba(60,24,6,.86) 93%,
            rgba(0,0,0,.95) 100%
        );
    z-index:1;
}

.event-hero .overlay::after{
    content:"";
    position:absolute;
    inset:0;
    background-image:var(--sg-grain);
    opacity:.12;
    mix-blend-mode:overlay;
}

.event-hero-content{
    position:relative;
    z-index:2;
    /*  Everything in this hero is sized in vh so the whole poster always
        fits the screen without scrolling, on any height of display.     */
    padding:max(88px, 8vh) 20px 1.4vh;

    width:100%;
    max-width:960px;
    min-width:0; /* lets long titles wrap instead of widening the page */
}

/* The event logo carries the sun, palms and wordmark in one file */
.event-logo-heading{
    margin:0;
}

/* Sized against viewport height, not width, so the logo, the lineup, the
   date and the ticket button all fit on the first screen together. */
.event-logo{
    display:block;
    height:clamp(140px, 44vh, 660px);
    width:auto;
    max-width:94%;
    margin:0 auto 1.5vh;
}

.event-hero-logo{
    width:min(230px, 55%);
    height:auto;
    margin-bottom:18px;
}

/* Hero sits on the orange sky, so its type goes black like the poster */
.event-hero-content{
    color:#000;
}

.event-hero .poster-tagline{
    color:#000;
}

.event-headline-date{
    font-family:var(--sg-font-display);
    font-size:clamp(1.4rem, min(4.3vh, 5.2vw), 3.4rem);
    line-height:1;
    letter-spacing:-1.5px;
    text-transform:uppercase;
    margin:1.8vh 0 .8vh;
    color:#000;
}

.event-hero .event-date{
    font-family:var(--sg-font);
    font-weight:bold;
    font-size:clamp(.7rem, min(1.75vh, 2.1vw), 1.05rem);
    letter-spacing:.2em;
    text-indent:.2em;
    text-transform:uppercase;
    color:#000;
    margin:0;
}

/* Venue sits in a black box with orange type */
.event-hero .event-location{
    display:inline-block;
    background:#000;
    color:var(--sg-orange-bright);
    border-radius:8px;
    padding:13px 30px;

    font-family:var(--sg-font-display);
    font-size:clamp(.72rem, min(1.85vh, 2.4vw), 1.25rem);
    letter-spacing:1.5px;
    padding:1.2vh 3vh;
    margin:1.2vh 0 0;
    text-shadow:none;
}

/* Black ticket button reads best against the orange sky */
.event-hero .btn-ticket{
    background:#000;
    border-color:#000;
    color:#fff;
    box-shadow:0 10px 30px rgba(0,0,0,.35);
}

.event-hero .btn-ticket:hover{
    background:#1a1a1a;
}

.presented{
    font-family:var(--sg-font-accent);
    letter-spacing:3px;
    font-size:.8rem;
    text-transform:uppercase;
    color:var(--sg-gold);
    margin-bottom:14px;
}

.event-hero h1{
    font-size:clamp(2.8rem, 11vw, 7rem);
    margin-bottom:14px;
    text-transform:uppercase;
    letter-spacing:2px;
    line-height:.95;
}

.event-location{
    font-size:clamp(1.05rem, 3vw, 1.8rem);
    font-weight:bold;
    letter-spacing:2px;
    text-transform:uppercase;
}

.event-date{
    margin:12px 0 28px;
    color:#eee;
    font-family:var(--sg-font-accent);
    letter-spacing:2px;
    font-size:clamp(.9rem, 2.6vw, 1.1rem);
    text-transform:uppercase;
}

/* Sticky ticket bar - keeps GET TICKETS reachable down the whole page */
.ticket-bar{
    position:sticky;
    top:0;
    z-index:90;

    background:rgba(10,10,10,.96);
    border-top:1px solid #2a1600;
    border-bottom:1px solid #2a1600;
    backdrop-filter:blur(6px);

    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:center;
    gap:14px 28px;

    padding:14px 6%;

    transition:opacity .3s ease, transform .35s ease, visibility .35s;
}

/* Hidden by js/main.js once the checkout section is on screen, since the
   real ticket form is right there. */
.ticket-bar.is-hidden{
    opacity:0;
    visibility:hidden;
    transform:translateY(-100%);
    pointer-events:none;
}

.ticket-bar p{
    font-family:var(--sg-font-accent);
    letter-spacing:2px;
    text-transform:uppercase;
    font-size:.9rem;
    color:var(--sg-muted);
    margin:0;
}

.ticket-bar .btn{
    padding:12px 30px;
    min-height:46px;
}

/* Event detail cards */
.detail-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
    gap:20px;
    max-width:var(--sg-max-width);
    margin:auto;
}

.detail-card{
    background:var(--sg-panel);
    border:1px solid var(--sg-border);
    border-radius:14px;
    padding:28px 22px;
    text-align:center;
}

.detail-card h3{
    font-family:var(--sg-font-accent);
    font-size:.8rem;
    letter-spacing:2px;
    text-transform:uppercase;
    color:var(--sg-gold);
    margin-bottom:10px;
}

.detail-card p{
    font-size:1.15rem;
    font-weight:bold;
}

/* Lineup */
.lineup{
    position:relative;
    padding:56px 6% 40px;
    text-align:center;
}

/* Sunburst rays behind the LINEUP title */
.lineup::before{
    content:"";
    position:absolute;
    top:-40px;
    left:50%;
    transform:translateX(-50%);
    width:min(1000px, 150vw);
    aspect-ratio:1;
    background:repeating-conic-gradient(
        from 0deg,
        rgba(0,0,0,.075) 0deg 5deg,
        transparent 5deg 11deg
    );
    -webkit-mask-image:radial-gradient(circle, #000 12%, transparent 62%);
    mask-image:radial-gradient(circle, #000 12%, transparent 62%);
    pointer-events:none;
    z-index:0;
}

.lineup > *{
    position:relative;
    z-index:1;
}

.lineup h2{
    font-size:clamp(2.8rem, 11vw, 7rem);
    text-transform:uppercase;
    letter-spacing:-2px;
    margin-bottom:10px;
}

/*  THE LINEUP WALL
    Festival-poster style: all the names in one centred typographic block,
    separated by diamonds and wrapping naturally across lines.           */

.lineup-wall{
    max-width:920px;
    margin:1.8vh auto 0;
}

/* One line of the billing */
.lw-line{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:center;
    gap:.1em .55em;   /* the space either side of the sun */

    margin:0 0 .5vh;
    line-height:1.1;
}

.lw-line:last-child{
    margin-bottom:0;
}

.lw-name{
    font-family:var(--sg-font-display);
    font-size:clamp(1rem, min(3.3vh, 3.8vw), 2.85rem);
    text-transform:uppercase;
    letter-spacing:-.5px;
    color:#000;
    white-space:nowrap;

    /* soft lift, so the type sits on the sunset instead of looking flat */
    text-shadow:0 3px 14px rgba(90, 30, 0, .22);
}

/* The long billing line is set smaller, the way posters size a long name */
.lw-line-sm .lw-name{
    font-size:clamp(.78rem, min(2.5vh, 2.7vw), 1.85rem);
    letter-spacing:0;
}

/*  Separator: the SoundzGood sun, drawn in CSS so there is no image file.
    Change the colour on background-color below.                         */
.lw-sep{
    --sun-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4' fill='%23000'/%3E%3Cline x1='12' y1='1.8' x2='12' y2='4.2'/%3E%3Cline x1='12' y1='19.8' x2='12' y2='22.2'/%3E%3Cline x1='1.8' y1='12' x2='4.2' y2='12'/%3E%3Cline x1='19.8' y1='12' x2='22.2' y2='12'/%3E%3Cline x1='4.8' y1='4.8' x2='6.5' y2='6.5'/%3E%3Cline x1='17.5' y1='17.5' x2='19.2' y2='19.2'/%3E%3Cline x1='4.8' y1='19.2' x2='6.5' y2='17.5'/%3E%3Cline x1='17.5' y1='6.5' x2='19.2' y2='4.8'/%3E%3C/g%3E%3C/svg%3E");

    display:inline-block;
    width:clamp(13px, 1.9vw, 24px);
    aspect-ratio:1;
    flex:0 0 auto;

    background-color:#000;
    -webkit-mask:var(--sun-icon) center / contain no-repeat;
    mask:var(--sun-icon) center / contain no-repeat;

    opacity:.75;
}

/* Date and venue pills, like the ones on the poster */
.lineup-pill{
    display:inline-block;
    font-family:var(--sg-font-display);
    font-size:clamp(.85rem, 2.4vw, 1.35rem);
    letter-spacing:1px;
    text-transform:uppercase;
    padding:12px 26px;
    border-radius:8px;
}

.lineup-pill-date{
    border:3px solid #000;
    background:rgba(255,255,255,.28);
    color:#000;
    margin-bottom:8px;
}

.lineup-pill-venue{
    background:#000;
    color:#fff;
    margin-top:30px;
}

.lineup-support{
    color:var(--sg-sand);
    font-family:var(--sg-font-display);
    font-size:clamp(.8rem, 2vw, 1.2rem);
    letter-spacing:1px;
    text-transform:uppercase;
    text-shadow:0 2px 5px rgba(0,0,0,.3);
}


/*  THE LINEUP FLOW
    No boxes - one continuous sunset that runs from one act straight into
    the next, separated only by a hand-drawn wave.                        */

.acts{
    max-width:var(--sg-max-width);
    margin:20px auto 0;
}

.act{
    display:grid;
    grid-template-columns:1fr;
    align-items:center;
    gap:6px;

    padding:46px 0;
    text-align:center;
    color:#000;
}

/* Alternate the alignment so the eye keeps moving down the page.
   nth-of-type (not nth-child) because the wave dividers sit between acts. */
.act:nth-of-type(odd){
    text-align:left;
    justify-items:start;
}

.act:nth-of-type(even){
    text-align:right;
    justify-items:end;
}

.act h3{
    font-size:clamp(2.1rem, 8vw, 5rem);
    line-height:.92;
    text-transform:uppercase;
    letter-spacing:-1.5px;
    margin:0;
}

.act p{
    font-family:var(--sg-font-accent);
    font-size:clamp(.78rem, 2vw, .95rem);
    font-weight:bold;
    letter-spacing:2px;
    text-transform:uppercase;
    color:rgba(0,0,0,.68);
    margin:0;
}

/*  ARTIST BIOGRAPHY AND VIDEO
    Sits underneath each act and spans the full width of it, so the name
    and cut-out above keep the layout they already had.                 */
.act-bio{
    grid-column:1 / -1;
    max-width:70ch;
    margin-top:20px;
    text-align:left; /* long copy always reads left, even on mirrored rows */
}

/* Overrides the short uppercase role styling for the body copy */
.act .act-bio p{
    font-family:var(--sg-font);
    font-size:clamp(.92rem, 1.9vw, 1.02rem);
    font-weight:normal;
    letter-spacing:0;
    text-transform:none;
    line-height:1.6;
    color:rgba(0,0,0,.78);
    margin:0 0 14px;
}

/* Responsive 16:9 video */
.act-video{
    position:relative;
    width:100%;
    max-width:620px;
    aspect-ratio:16 / 9;
    margin-top:18px;

    border:2px solid rgba(0,0,0,.55);
    border-radius:12px;
    overflow:hidden;
    background:#000;
    box-shadow:0 10px 26px rgba(80,28,0,.3);
}

.act-video iframe{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    border:0;
}

/* Wavy hand-drawn divider between acts */
.act-wave{
    display:block;
    width:100%;
    height:14px;
    color:rgba(0,0,0,.4);
}

.act-wave path{
    fill:none;
    stroke:currentColor;
    stroke-width:3;
    stroke-linecap:round;
}

/*  ARTIST CUT-OUTS
    When you have cut-out photos (PNG with a transparent background, like the
    poster artwork), save them in the images folder and add this line inside
    an act, just above the <h3>:
        <img src="images/rossco.png" alt="Rossco" class="artist-photo">
    The act will automatically become a two-column row.                    */
/* Odd acts: cut-out on the left, name on the right */
.act:has(.artist-photo){
    grid-template-columns:auto 1fr;
    grid-template-rows:auto auto;
    gap:4px 34px;
    text-align:left;
    justify-items:start;
    align-content:end;
}

.act:has(.artist-photo) .artist-photo{ grid-column:1; grid-row:1 / span 2; }
.act:has(.artist-photo) h3{ grid-column:2; grid-row:1; align-self:end; }
.act:has(.artist-photo) p { grid-column:2; grid-row:2; align-self:start; }

/* Even acts: mirrored - name on the left, cut-out on the right */
.act:nth-of-type(even):has(.artist-photo){
    grid-template-columns:1fr auto;
    text-align:right;
    justify-items:end;
}

.act:nth-of-type(even):has(.artist-photo) .artist-photo{ grid-column:2; }
.act:nth-of-type(even):has(.artist-photo) h3{ grid-column:1; }
.act:nth-of-type(even):has(.artist-photo) p { grid-column:1; }

/* Sized by height so every cut-out appears at the same scale, the way
   the artwork does, even though the crops are all different shapes. */
.artist-photo{
    grid-row:span 2;
    height:clamp(170px, 27vw, 290px);
    width:auto;
    max-width:min(46vw, 340px);
    object-fit:contain;
    object-position:bottom center;
    align-self:end;

    /* Die-cut sticker edge: a white outline plus a lifted shadow, so each
       cut-out looks like it has been pasted onto the page. */
    filter:
        drop-shadow(3px 0 0 #fff)
        drop-shadow(-3px 0 0 #fff)
        drop-shadow(0 3px 0 #fff)
        drop-shadow(0 -3px 0 #fff)
        drop-shadow(0 16px 22px rgba(0,0,0,.45));
}


/*  SCRAPBOOK SCROLL ANIMATION
    js/main.js puts .has-scroll-anim on <html>, then adds .is-visible to each
    act as it scrolls into view. Without JavaScript everything just shows
    normally, so the page never depends on the animation to be readable.   */

/*  Each act flies in from its own side, tilted back in 3D and blurred,
    then slaps flat onto the page and settles slightly crooked.          */
.has-scroll-anim .act{
    opacity:0;
    transform-origin:center bottom;
    will-change:transform, opacity;
    transform:
        perspective(1100px)
        translate3d(-90px, 120px, 0)
        rotateX(52deg)
        rotate(-14deg)
        scale(.55);
    filter:blur(8px);
    transition:
        opacity .45s ease,
        transform 1s cubic-bezier(.16, 1.42, .3, 1),
        filter .55s ease;
}

.has-scroll-anim .act:nth-of-type(even){
    transform:
        perspective(1100px)
        translate3d(90px, 120px, 0)
        rotateX(52deg)
        rotate(14deg)
        scale(.55);
}

/*  Landed - flat.
    The acts are tall now that each carries a biography, and a resting
    tilt on a very tall block swings its top edge a long way sideways,
    pushing the copy off a narrow screen. The crooked scrapbook look is
    kept on the cut-out itself instead, further down.                   */
.has-scroll-anim .act.is-visible,
.has-scroll-anim .act:nth-of-type(even).is-visible{
    opacity:1;
    will-change:auto; /* release the GPU hint once it has landed */
    transform:
        perspective(1100px)
        translate3d(0, 0, 0)
        rotateX(0deg)
        rotate(0deg)
        scale(1);
    filter:blur(0);
}

/* The cut-out is stuck down a beat after the name, with its own kick */
.has-scroll-anim .artist-photo{
    opacity:0;
    transform:translateY(60px) rotate(-11deg) scale(.72);
    transition:
        opacity .5s ease .22s,
        transform .9s cubic-bezier(.16, 1.55, .3, 1) .22s;
}

.has-scroll-anim .act:nth-of-type(even) .artist-photo{
    transform:translateY(60px) rotate(11deg) scale(.72);
}

/* The cut-out keeps the pasted-crooked look. It is small, so tilting it
   only moves it a few pixels - unlike tilting the whole act. */
.has-scroll-anim .act.is-visible .artist-photo{
    opacity:1;
    transform:translateY(0) rotate(-2.5deg) scale(1);
}

.has-scroll-anim .act:nth-of-type(even).is-visible .artist-photo{
    transform:translateY(0) rotate(2.5deg) scale(1);
}

/* Dividers sweep open between the acts */
.has-scroll-anim .act-wave{
    opacity:0;
    transform:scaleX(.15);
    transform-origin:center;
    transition:
        opacity .5s ease,
        transform .8s cubic-bezier(.16, 1.3, .3, 1);
}

.has-scroll-anim .act-wave.is-visible{
    opacity:1;
    transform:scaleX(1);
}

.diamond{
    color:var(--sg-orange);
    padding:0 12px;
}

/* Event description */
.event-copy{
    max-width:760px;
    margin:auto;
    text-align:center;
}

.event-copy p{
    color:var(--sg-muted);
    font-size:1.08rem;
    margin-bottom:20px;
}

.event-copy p.lead{
    color:#fff;
    font-size:1.25rem;
    font-weight:bold;
}

/* Scrolling announcement strip */
.announcement-strip{
    background:linear-gradient(90deg, var(--sg-sun-top), var(--sg-sun-deep));
    color:#000;
    overflow:hidden;
    white-space:nowrap;
    padding:16px 0;
    font-family:var(--sg-font-display);
    letter-spacing:1px;
    text-transform:uppercase;
}

.announcement-strip p{
    display:inline-block;
    padding-left:100%;
    animation:scrollText 22s linear infinite;
}

@keyframes scrollText{
    from{ transform:translateX(0); }
    to{ transform:translateX(-100%); }
}

/* Sponsors */
.sponsors{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:30px 44px;
    justify-content:center;
}

.sponsors a{
    display:inline-flex;
    align-items:center;
    padding:8px;
}

.sponsors img{
    height:60px;
    width:auto;
    max-width:180px;
    object-fit:contain;
    transition:transform .25s;
}

.sponsors a:hover img{
    transform:scale(1.06);
}

/* Humanitix embedded checkout */
.checkout-embed{
    max-width:900px;
    margin:auto;
}

.checkout-embed iframe{
    width:100%;
    min-height:600px;
    border:0;
    border-radius:14px;
}

/* "Make a weekend of it" tagline */
.weekend-tagline{
    font-family:var(--sg-font-script);
    font-size:clamp(1.6rem, 6vw, 3rem);
    font-weight:400;
    font-style:italic;
    line-height:1.1;
    text-align:center;
    letter-spacing:.02em;

    text-shadow:
        0 0 6px rgba(255,138,0,.85),
        0 0 14px rgba(255,102,0,.65),
        0 0 28px rgba(255,72,0,.35);

    -webkit-text-stroke:.4px rgba(255,179,64,.65);
}

.weekend-links{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:18px;
    margin-top:28px;
}

/*  MAKE A WEEKEND OF IT
    Travel-brochure treatment: the photography does the selling, with the
    copy sitting over it. Aimed at people driving in from out of town.   */

.weekend-section{
    background:
        radial-gradient(120% 90% at 50% 0%, #1b1005 0%, #0a0a0a 62%);
}

.weekend-eyebrow{
    font-family:var(--sg-font-accent);
    font-size:.78rem;
    font-weight:bold;
    letter-spacing:4px;
    text-transform:uppercase;
    color:var(--sg-gold);
    text-align:center;
    margin-bottom:12px;
}

.weekend-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
    gap:26px;
    max-width:var(--sg-max-width);
    margin:auto;
}

/* The whole card is the link */
.weekend-card{
    position:relative;
    display:block;
    min-height:420px;
    border-radius:20px;
    overflow:hidden;
    text-decoration:none;
    border:1px solid var(--sg-border);
    transition:transform .3s, border-color .3s;
}

.weekend-card:hover,
.weekend-card:focus-visible{
    transform:translateY(-6px);
    border-color:#4a2a06;
}

.weekend-card img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .6s ease;
}

.weekend-card:hover img{
    transform:scale(1.06);
}

/* Scrim so the copy stays readable over the photo */
.weekend-card-body{
    position:relative;
    z-index:1;
    height:100%;
    min-height:420px;

    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:flex-end;
    gap:10px;

    padding:32px 30px 30px;
    background:linear-gradient(
        to bottom,
        rgba(0,0,0,0) 30%,
        rgba(0,0,0,.72) 68%,
        rgba(0,0,0,.92) 100%
    );
}

.weekend-card-body h3{
    font-family:var(--sg-font-display);
    font-size:clamp(1.5rem, 3.4vw, 2.1rem);
    letter-spacing:-.5px;
    text-transform:uppercase;
    color:#fff;
}

.weekend-card-body p{
    color:var(--sg-muted);
    max-width:44ch;
}

.weekend-cta{
    display:inline-flex;
    align-items:center;
    gap:.5em;

    font-family:var(--sg-font-accent);
    font-size:.85rem;
    font-weight:bold;
    letter-spacing:2px;
    text-transform:uppercase;
    color:var(--sg-orange-bright);
    margin-top:6px;
}

.weekend-cta::after{
    content:"\2192"; /* arrow */
    transition:transform .25s;
}

.weekend-card:hover .weekend-cta::after{
    transform:translateX(5px);
}

/* Practical travel note for people coming in from out of town */
.weekend-note{
    max-width:640px;
    margin:32px auto 0;
    text-align:center;
    color:var(--sg-dim);
    font-size:.92rem;
}


/* Event banner used in place of individual sponsor logos */
.sponsor-banner{
    display:block;
    width:100%;
    max-width:var(--sg-max-width);
    height:auto;
    margin:auto;
    border-radius:16px;
    border:3px solid #000;
    box-shadow:0 18px 46px rgba(80,28,0,.42);
}

/* Full-width artwork that closes the page */
.closing-banner{
    background:#000;
    padding:0;
    line-height:0; /* removes the gap under an inline image */
}

.closing-banner img{
    display:block;
    width:100%;
    height:auto;
}


/* ==========================================================================
   8b. SUNSET STYLING  (from the SoundzGood 2.0 poster artwork)
   Warm gradient panels with bold black type, grain texture and
   hand-drawn sun / palm / seagull line motifs.
   ========================================================================== */

/* Put class="sunset" on a section to give it the poster treatment */
.sunset{
    position:relative;
    background:linear-gradient(
        180deg,
        var(--sg-sun-top) 0%,
        var(--sg-sun-mid) 55%,
        var(--sg-sun-deep) 100%
    );
    color:#000;
    overflow:hidden;
}

/* Grain texture layer */
.sunset::before{
    content:"";
    position:absolute;
    inset:0;
    background-image:var(--sg-grain);
    opacity:.16;
    mix-blend-mode:multiply;
    pointer-events:none;
}

.sunset > *{
    position:relative;
    z-index:1;
}

.sunset h2,
.sunset h3,
.sunset h5,
.sunset p{
    color:#000;
}

.sunset .section-intro{
    color:rgba(0,0,0,.72);
}

/* Buttons sitting on a sunset panel go solid black, like the poster type */
.sunset .btn{
    background:#000;
    border-color:#000;
    color:#fff;
}

.sunset .btn:hover{
    background:#1a1a1a;
}

.sunset .btn-outline{
    background:transparent;
    color:#000;
    border-color:#000;
}

.sunset .btn-outline:hover{
    background:#000;
    color:#fff;
}

/*  THE EVENT FLOW
    One continuous sunset running behind several sections at once, so the
    page reads as a single scene instead of separate boxes. It starts warm
    at the top and sinks into black at the bottom.                        */
.event-flow{
    position:relative;
    background:linear-gradient(
        180deg,
        var(--sg-sun-top) 0%,
        var(--sg-sun-mid) 30%,
        var(--sg-sun-deep) 58%,
        #a34412 76%,
        #3d1806 90%,
        #000 100%
    );
    color:#000;
    overflow:hidden;
}

.event-flow::before{
    content:"";
    position:absolute;
    inset:0;
    background-image:var(--sg-grain);
    opacity:.16;
    mix-blend-mode:multiply;
    pointer-events:none;
}

.event-flow > *{
    position:relative;
    z-index:1;
    background:transparent;
}

/* Tighter rhythm through the flow - it was leaving big empty gaps */
.event-flow > .section{
    padding-top:44px;
    padding-bottom:44px;
}

.event-flow .sun-motif{
    margin-bottom:10px;
}

.event-flow h2,
.event-flow h3,
.event-flow h5{
    color:#000;
}

/*  Detail bar: bold black type straight onto the sunset, poster style.
    No boxes - they washed out against the orange.                       */
.event-flow .detail-grid{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:0;
    border-top:3px solid #000;
    border-bottom:3px solid #000;
    max-width:var(--sg-max-width);
    margin:auto;
}

.event-flow .detail-card{
    flex:1 1 190px;
    background:transparent;
    border:none;
    border-right:2px solid rgba(0,0,0,.28);
    border-radius:0;
    padding:26px 18px;
    color:#000;
}

.event-flow .detail-card:last-child{
    border-right:none;
}

.event-flow .detail-card h3{
    color:rgba(0,0,0,.6);
    font-size:.72rem;
    letter-spacing:3px;
    margin-bottom:8px;
}

.event-flow .detail-card p{
    color:#000;
    font-size:clamp(1rem, 2.2vw, 1.3rem);
    line-height:1.25;
}

/* Palm silhouettes down the edges of the flow */
.flow-palm{
    position:absolute;
    width:clamp(150px, 22vw, 330px);
    height:auto;
    color:#000;
    opacity:.14;
    pointer-events:none;
    z-index:0;
}

.flow-palm path{
    fill:none;
    stroke:currentColor;
    stroke-width:5;
    stroke-linecap:round;
}

.flow-palm-left{
    top:2%;
    left:-4%;
}

.flow-palm-right{
    top:26%;
    right:-4%;
    transform:scaleX(-1);
}

.flow-palm-low{
    bottom:16%;
    left:-6%;
    opacity:.1;
}

/* Copy near the bottom of the flow sits on dark, so it flips to white */
.event-flow .flow-copy h2,
.event-flow .flow-copy p{
    color:#fff;
}

.event-flow .flow-copy p.lead{
    color:#fff;
}

.event-flow .flow-copy .btn{
    background:var(--sg-orange-bright);
    border-color:var(--sg-orange-bright);
    color:#fff;
}

/* Hand-drawn sun + palms motif (inline SVG, no extra image to load) */
.sun-motif{
    display:block;
    width:min(190px, 52%);
    height:auto;
    margin:0 auto 18px;
}

.sun-motif path,
.sun-motif line,
.sun-motif circle{
    stroke:currentColor;
    fill:none;
    stroke-width:7;
    stroke-linecap:round;
}

/* Light motif over dark video heroes, black motif on sunset panels */
.event-hero .sun-motif{
    color:#fff;
    opacity:.95;
}

.sunset .sun-motif{
    color:#000;
}

/*  Poster tagline: LIVE MUSIC / FOOD / BAR / DJS
    Set light and widely tracked, so it reads as a fine line against the
    heavy display type above and below it.                              */
.poster-tagline{
    font-family:var(--sg-font);
    font-weight:400;
    font-size:clamp(.62rem, min(1.7vh, 1.7vw), .95rem);
    letter-spacing:.34em;
    text-indent:.34em; /* balances the trailing letter-space so it stays centred */
    text-transform:uppercase;
    margin:0 0 .75vh;
}

/* The two tagline rows sit together as one block */
.poster-tagline + .poster-tagline{
    margin-bottom:0;
}

/* Sponsor bar on solid black, mirroring the base of the poster */
.sponsor-bar{
    background:#000;
    padding:44px 6%;
    border-top:1px solid var(--sg-border);
}

.sponsor-bar h2{
    font-size:clamp(1.1rem, 3vw, 1.5rem);
    letter-spacing:3px;
    margin-bottom:28px;
}


/*  SPONSOR WALL
    The sponsor logos are mostly dark artwork on a white background, so they
    sit on a white panel. On black they would show up as white boxes.       */

/* Orange sunset band, sitting between the weekend section and the checkout */
.sponsor-feature{
    position:relative;
    padding:70px 6%;
    overflow:hidden;
    background:linear-gradient(
        180deg,
        var(--sg-sun-top) 0%,
        var(--sg-sun-mid) 55%,
        var(--sg-sun-deep) 100%
    );
}

.sponsor-feature::before{
    content:"";
    position:absolute;
    inset:0;
    background-image:var(--sg-grain);
    opacity:.16;
    mix-blend-mode:multiply;
    pointer-events:none;
}

.sponsor-feature > *{
    position:relative;
    z-index:1;
}

.sponsor-feature h2{
    color:#000;
}

.sponsor-feature .section-intro{
    color:rgba(0,0,0,.7);
    margin-bottom:38px;
}

.sponsor-panel{
    max-width:var(--sg-max-width);
    margin:auto;
    background:#fff;
    border-radius:22px;
    padding:50px 44px;
    box-shadow:0 20px 60px rgba(0,0,0,.5);
}

.sponsor-panel h2{
    color:#000;
    font-size:clamp(1.4rem, 4vw, 2.2rem);
    letter-spacing:1px;
    margin-bottom:8px;
}

.sponsor-panel .section-intro{
    color:rgba(0,0,0,.6);
    margin-bottom:38px;
    font-size:.95rem;
}

.sponsor-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
    align-items:center;
    justify-items:center;
    gap:34px 28px;
}

/* Each logo sits on its own white tile. Some logos are dark art on a white
   background and some are transparent - a white tile suits both, and stops
   the white-background ones showing as pale boxes on the orange. */
.sponsor-grid a{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    min-height:130px;
    padding:20px;

    background:#fff;
    border-radius:14px;
    box-shadow:0 10px 26px rgba(80,28,0,.28);

    transition:transform .25s, box-shadow .25s;
}

.sponsor-grid img{
    max-height:84px;
    max-width:100%;
    width:auto;
    object-fit:contain;
}

.sponsor-grid a:hover{
    transform:translateY(-5px);
    box-shadow:0 16px 34px rgba(80,28,0,.38);
}

/* Compact strip across the bottom of every page, inside the footer */
.footer-sponsors{
    background:#fff;
    padding:26px 6%;
}

.footer-sponsors h3{
    text-align:center;
    color:rgba(0,0,0,.55);
    font-family:var(--sg-font-accent);
    font-size:.72rem;
    font-weight:bold;
    letter-spacing:3px;
    text-transform:uppercase;
    margin-bottom:18px;
}

.footer-sponsor-row{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:center;
    gap:18px 34px;
    max-width:var(--sg-max-width);
    margin:auto;
}

.footer-sponsor-row a{
    display:flex;
    align-items:center;
    padding:4px;
}

.footer-sponsor-row img{
    max-height:46px;
    max-width:120px;
    width:auto;
    object-fit:contain;
}


/* ==========================================================================
   9. SERVICES PAGE
   ========================================================================== */

.service-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
    gap:26px;
    max-width:var(--sg-max-width);
    margin:auto;
}

.service-card{
    background:var(--sg-panel);
    padding:34px 30px;
    border-radius:14px;
    border:1px solid var(--sg-border);
    border-left:4px solid var(--sg-orange);
    transition:transform .25s, border-color .25s;
}

.service-card:hover{
    transform:translateY(-4px);
    border-left-color:var(--sg-gold);
}

.service-card h3{
    color:var(--sg-orange);
    margin-bottom:14px;
    font-size:1.2rem;
    letter-spacing:1px;
    text-transform:uppercase;
}

.service-card p{
    color:var(--sg-muted);
}


/*  ABOUT BLOCK  */
.about-wrap{
    max-width:820px;
    margin:auto;
    text-align:center;
}

.about-wrap p{
    color:var(--sg-muted);
    margin-bottom:18px;
}

.about-wrap .about-lead{
    color:#fff;
    font-size:clamp(1.05rem, 2.4vw, 1.25rem);
}

.about-buttons{
    margin-top:30px;
}


/*  FEATURE BAND
    A short statement on the sunset, used to break up the page.         */
.feature-band{
    position:relative;
    overflow:hidden;
    padding:64px 6%;
    text-align:center;

    background:linear-gradient(
        180deg,
        var(--sg-sun-top) 0%,
        var(--sg-sun-mid) 55%,
        var(--sg-sun-deep) 100%
    );
}

.feature-band::before{
    content:"";
    position:absolute;
    inset:0;
    background-image:var(--sg-grain);
    opacity:.16;
    mix-blend-mode:multiply;
    pointer-events:none;
}

.feature-band > *{
    position:relative;
    z-index:1;
}

.feature-band h2{
    color:#000;
    margin-bottom:14px;
}

.feature-band p{
    max-width:640px;
    margin:auto;
    color:rgba(0,0,0,.72);
}


/*  SERVICE LIST
    Fourteen services with long equipment lists. Kept as native
    accordions so everything is on the page and searchable, without the
    page becoming an unreadable wall of text.                           */
.service-list{
    max-width:var(--sg-max-width);
    margin:auto;
    border-top:1px solid var(--sg-border);
}

.service-item{
    border-bottom:1px solid var(--sg-border);
}

.service-item summary{
    display:flex;
    flex-wrap:wrap;
    align-items:baseline;
    gap:4px 18px;

    padding:24px 44px 24px 4px;
    position:relative;
    cursor:pointer;
    list-style:none;           /* hides the default arrow */
    transition:color .2s;
}

.service-item summary::-webkit-details-marker{
    display:none;              /* Safari */
}

/* plus sign that becomes a minus when open */
.service-item summary::after{
    content:"";
    position:absolute;
    top:50%;
    right:6px;
    width:16px;
    height:16px;
    margin-top:-8px;

    background:
        linear-gradient(var(--sg-orange), var(--sg-orange)) center/16px 2px no-repeat,
        linear-gradient(var(--sg-orange), var(--sg-orange)) center/2px 16px no-repeat;
    transition:transform .25s;
}

.service-item[open] summary::after{
    background:
        linear-gradient(var(--sg-orange), var(--sg-orange)) center/16px 2px no-repeat;
    transform:rotate(180deg);
}

.service-name{
    font-family:var(--sg-font-display);
    font-size:clamp(1.15rem, 2.6vw, 1.6rem);
    letter-spacing:-.5px;
    text-transform:uppercase;
    color:#fff;
}

.service-item[open] .service-name,
.service-item summary:hover .service-name{
    color:var(--sg-orange);
}

.service-tagline{
    font-family:var(--sg-font-accent);
    font-size:.76rem;
    font-weight:bold;
    letter-spacing:2px;
    text-transform:uppercase;
    color:var(--sg-gold);
}

.service-body{
    padding:0 4px 30px;
    max-width:820px;
}

.service-body p{
    color:var(--sg-muted);
    margin-bottom:14px;
}

.service-body .list-heading{
    color:#fff;
    font-weight:bold;
    margin-top:20px;
    margin-bottom:12px;
}

.service-body .btn{
    margin-top:22px;
}

/* Equipment lists, set in columns so they do not run down the page */
.tick-list{
    list-style:none;
    columns:2;
    column-gap:34px;
    margin-bottom:18px;
}

.tick-list li{
    color:var(--sg-muted);
    padding-left:22px;
    margin-bottom:9px;
    break-inside:avoid;
    position:relative;
}

.tick-list li::before{
    content:"";
    position:absolute;
    left:0;
    top:.55em;
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--sg-orange);
}


/*  TAG LIST
    Short items shown as pills - events supported, service area.        */
.tag-list{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:10px;
    list-style:none;
    max-width:900px;
    margin:auto;
}

.tag-list li{
    background:var(--sg-panel);
    border:1px solid var(--sg-border);
    border-radius:50px;
    padding:10px 20px;
    color:var(--sg-muted);
    font-size:.92rem;
}

.service-note{
    color:var(--sg-dim);
    margin-top:26px;
    font-size:.95rem;
}


/*  WHY SOUNDZGOOD  */
.why-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
    gap:30px;
    max-width:var(--sg-max-width);
    margin:auto;
}

.why-item h3{
    font-family:var(--sg-font-display);
    font-size:1.15rem;
    letter-spacing:-.5px;
    text-transform:uppercase;
    color:var(--sg-orange);
    margin-bottom:10px;
}

.why-item p{
    color:var(--sg-muted);
}

/* Checklist of what to send with an enquiry */
.checklist{
    max-width:720px;
    margin:auto;
}


/*  NUMBERED STEPS  */
.steps-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
    gap:34px 30px;
    max-width:var(--sg-max-width);
    margin:auto;
}

.step{
    text-align:center;
}

.step-number{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:56px;
    height:56px;
    border-radius:50%;

    background:var(--sg-orange);
    color:#fff;
    font-family:var(--sg-font-display);
    font-size:1.4rem;

    margin-bottom:18px;
}

.step h3{
    font-family:var(--sg-font-display);
    font-size:1.2rem;
    letter-spacing:-.5px;
    text-transform:uppercase;
    color:#fff;
    margin-bottom:10px;
}

.step p{
    color:var(--sg-muted);
}


/*  Buttons sitting on the orange band go black, so they read against it  */
.sponsor-feature .btn{
    background:#000;
    border-color:#000;
    color:#fff;
}

.sponsor-feature .btn:hover{
    background:#1a1a1a;
}

.sponsor-feature .btn-outline{
    background:transparent;
    color:#000;
    border-color:#000;
}

.sponsor-feature .btn-outline:hover{
    background:#000;
    color:#fff;
}

/* Buttons in a page header (services hero) */
.header-content .buttons{
    margin-top:28px;
}


/* ==========================================================================
   10. CONTACT PAGE
   ========================================================================== */

.contact-wrapper{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:60px;
    max-width:var(--sg-max-width);
    margin:auto;
}

.contact-info h2{
    margin-bottom:20px;
    text-align:left;
}

.contact-info p{
    color:var(--sg-muted);
}

.contact-item{
    margin-top:28px;
}

.contact-item h3{
    color:var(--sg-orange);
    margin-bottom:8px;
    font-size:1rem;
    letter-spacing:1px;
    text-transform:uppercase;
}

.contact-item a{
    color:#fff;
    text-decoration:none;
}

.contact-item a:hover{
    color:var(--sg-orange);
}

.contact-form{
    display:flex;
    flex-direction:column;
    gap:15px;
}

.contact-form input,
.contact-form select,
.contact-form textarea{
    padding:15px;
    border-radius:8px;
    background:var(--sg-panel);
    color:#fff;
    border:1px solid var(--sg-border);
    font-family:var(--sg-font);
    font-size:1rem;
    width:100%;
}

.contact-form textarea{
    resize:vertical;
}

.contact-form .btn{
    border:none;
    width:100%;
}


/* ==========================================================================
   11. OPTIONAL / LEGACY CLASSES
   Kept so older snippets still style correctly if reused.
   ========================================================================== */

.event-card{
    display:flex;
    gap:40px;
    align-items:center;
}

.event-card img{
    width:50%;
    border-radius:12px;
}

.event-info{
    flex:1;
}

.feature-event{
    display:grid;
    grid-template-columns:1.2fr 1fr;
    gap:50px;
    align-items:center;
}

.feature-event img{
    width:100%;
    border-radius:18px;
}

.feature-event h3{
    font-size:clamp(2rem, 5vw, 4rem);
    color:var(--sg-gold);
    margin-bottom:20px;
}

.feature-event p{
    color:var(--sg-muted);
    margin-bottom:30px;
}

.image-card{
    position:relative;
}

.image-text{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    color:#fff;
    text-align:center;
    z-index:2;
}

.subscribe-form{
    max-width:600px;
    margin:auto;
    display:flex;
    flex-direction:column;
    gap:15px;
}

.subscribe-form input{
    padding:15px;
    border:none;
    border-radius:8px;
}


/* ==========================================================================
   12. RESPONSIVE - TABLET & MOBILE
   ========================================================================== */

@media (max-width:900px){

    .contact-wrapper{
        grid-template-columns:1fr;
        gap:40px;
    }

    .footer-content{
        grid-template-columns:1fr 1fr;
        gap:36px;
    }

    .feature-event{
        grid-template-columns:1fr;
    }
}

@media (max-width:768px){

    /* Nav stays a transparent overlay on the hero, the same as desktop.
       The small nav logo is hidden here because the big hero logo sits
       directly beneath it - show it again by deleting the .Nav rule. */
    nav{
        flex-direction:column;
        gap:6px;
        padding:14px 16px;
        background:linear-gradient(
            to bottom,
            rgba(0,0,0,.5),
            rgba(0,0,0,0)
        );
        border-bottom:none;
    }

    nav .Nav{
        display:none;
    }

    /* One row of links only. The sticky ticket bar sits directly below the
       hero and follows you down the page, so the menu does not need its
       own ticket button here - and the hero gets the space back. */
    nav a.nav-ticket{
        display:none;
    }

    nav ul{
        flex-wrap:wrap;
        justify-content:center;
        gap:2px 16px;
    }

    nav a{
        padding:11px 4px;
        font-size:.82rem;
        letter-spacing:.5px;
    }

    nav a.nav-ticket{
        padding:11px 20px;
    }

    .Nav img{
        height:32px;
    }

    /* Hero no longer sits under an overlapping nav, so trim the top padding */
    .hero,
    .event-hero{
        min-height:auto;
    }

    /* Top padding clears the overlaying nav */
    .hero-content{
        padding:120px 20px 60px;
    }

    .hero-logo{
        width:min(210px, 58%);
        margin-bottom:18px;
    }

    .event-hero-content{
        padding:max(84px, 11vh) 20px 3.5vh;
    }

    .event-hero-logo{
        width:min(120px, 34%);
        margin-bottom:12px;
    }

    /* Height-driven (never width) so the square logo keeps its shape */
    .event-logo{
        height:clamp(150px, 38vh, 340px);
        width:auto;
        margin-bottom:2vh;
    }

    .poster-tagline{
        letter-spacing:.26em;
        text-indent:.26em;
        margin-bottom:1vh;
    }

    .lineup-wall{
        margin:2.4vh auto 0;
    }

    .event-headline-date{
        margin:2.4vh 0 .7vh;
    }

    .lw-line{
        gap:.08em .45em;
        margin-bottom:.2em;
    }

    .event-hero .event-location{
        padding:11px 22px;
        margin-top:12px;
    }

    .event-hero .poster-tagline{
        margin-bottom:4px;
    }

    .event-headline-date{
        margin:8px 0 2px;
    }

    .event-hero .event-location{
        margin-bottom:16px;
    }

    /* Two-up instead of one long column */
    .event-flow .detail-card{
        flex:1 1 40%;
        padding:18px 12px;
        border-bottom:2px solid rgba(0,0,0,.28);
    }

    .event-flow .detail-card:nth-child(2n){
        border-right:none;
    }

    .event-flow .detail-card:nth-last-child(-n+2){
        border-bottom:none;
    }

    .event-date{
        margin:10px 0 22px;
    }

    /* Equipment lists go to a single column on a phone */
    .tick-list{
        columns:1;
    }

    .service-item summary{
        padding:20px 38px 20px 2px;
    }

    .feature-band{
        padding:52px 6%;
    }

    .act{
        padding:32px 0;
    }

    /* Gentler entry on a narrow screen. The acts are tall, so a big
       rotation swings them a long way sideways on the way in. */
    .has-scroll-anim .act{
        transform:
            perspective(1100px)
            translate3d(-26px, 70px, 0)
            rotateX(34deg)
            rotate(-5deg)
            scale(.82);
        filter:blur(5px);
    }

    .has-scroll-anim .act:nth-of-type(even){
        transform:
            perspective(1100px)
            translate3d(26px, 70px, 0)
            rotateX(34deg)
            rotate(5deg)
            scale(.82);
    }

    /* Not enough width for a photo beside a long name, so stack them.
       The left/right alternation is kept so the zig-zag still reads. */
    .act:has(.artist-photo),
    .act:nth-of-type(even):has(.artist-photo){
        grid-template-columns:1fr;
        grid-template-rows:auto auto auto;
        gap:10px;
    }

    .act:has(.artist-photo) .artist-photo,
    .act:nth-of-type(even):has(.artist-photo) .artist-photo{
        grid-column:1;
        grid-row:1;
    }

    .act:has(.artist-photo) h3,
    .act:nth-of-type(even):has(.artist-photo) h3{
        grid-column:1;
        grid-row:2;
    }

    .act:has(.artist-photo) p,
    .act:nth-of-type(even):has(.artist-photo) p{
        grid-column:1;
        grid-row:3;
    }

    /* Smaller so the longest name ("Brothas Entertainment") still fits */
    .act h3{
        font-size:clamp(1.7rem, 7.5vw, 3rem);
        letter-spacing:-1px;
    }

    .artist-photo{
        height:clamp(180px, 42vw, 230px);
        max-width:80vw;
    }

    .header-content{
        padding:118px 20px 50px;
    }

    .page-header{
        min-height:auto;
    }

    .section,
    .lineup{
        padding:60px 6%;
    }

    .btn{
        width:100%;
        max-width:320px;
    }

    .buttons{
        flex-direction:column;
        align-items:center;
    }

    .ticket-bar{
        flex-direction:column;
        gap:10px;
        padding:14px 20px;
    }

    .ticket-bar .btn{
        width:100%;
        max-width:320px;
    }

    .featured-event{
        padding:36px 22px;
    }

    .event-facts{
        gap:16px 26px;
    }

    .split-card{
        padding:32px 24px;
        align-items:center;
        text-align:center;
    }

    .split-card .btn{
        align-self:center;
    }

    .contact-info h2{
        text-align:center;
    }

    .footer-content{
        grid-template-columns:1fr;
        text-align:center;
        padding:50px 8%;
    }

    .footer-links,
    .footer-contact{
        align-items:center;
    }

    .sponsors img{
        height:48px;
        max-width:140px;
    }

    .gallery img{
        height:200px;
    }

    .event-card{
        flex-direction:column;
    }

    .event-card img{
        width:100%;
    }
}

@media (max-width:400px){

    .section,
    .lineup{
        padding:50px 5%;
    }

    .artist-card{
        padding:26px 18px;
        min-height:auto;
    }
}


/* Respect users who prefer less motion */
@media (prefers-reduced-motion:reduce){

    html{
        scroll-behavior:auto;
    }

    .announcement-strip p{
        animation:none;
        padding-left:0;
        text-align:center;
    }

    .btn:hover,
    .artist-card:hover,
    .service-card:hover,
    .sponsors a:hover img{
        transform:none;
    }
}