/*==========================================================
BRANDED AUDIO
Version 4.0
==========================================================*/

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

html{
    scroll-behavior:smooth;
}

body{

    font-family:"Inter",sans-serif;

    background:#111;

    color:#ffffff;

    overflow-x:hidden;

    line-height:1.6;

}

img{

    max-width:100%;

    display:block;

}

a{

    text-decoration:none;

}



/*==========================================================
COLORS
==========================================================*/

:root{

    --bronze:#c89b62;

    --bronze-light:#ddb27d;

    --charcoal:#111111;

    --charcoal-light:#1b1b1b;

    --white:#ffffff;

    --gray:#cfcfcf;

}



/*==========================================================
TYPOGRAPHY
==========================================================*/

h1,h2,h3,h4{

    font-family:"Cormorant Garamond",serif;

    font-weight:300;

    letter-spacing:.02em;

}

p{

    color:var(--gray);

}



/*==========================================================
BUTTONS
==========================================================*/

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:18px 38px;

    border-radius:40px;

    font-weight:600;

    transition:.35s;

    cursor:pointer;

}



.btn-gold{

    background:var(--bronze);

    color:#111;

}

.btn-gold:hover{

    background:var(--bronze-light);

    transform:translateY(-2px);

}



.btn-outline{

    border:1px solid var(--bronze);

    color:var(--bronze);

}

.btn-outline:hover{

    background:var(--bronze);

    color:#111;

}


/*==========================================================
HEADER
==========================================================*/

.site-header{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    padding:28px 6%;

    display:flex;

    justify-content:space-between;

    align-items:center;

    z-index:1000;

    background:rgba(12,12,12,.45);

    backdrop-filter:blur(18px);

}



.header-logo img{

    width:170px;

}



nav{

    display:flex;

    gap:36px;

}



nav a{

    color:white;

    font-size:.92rem;

    letter-spacing:2px;

    text-transform:uppercase;

    transition:.3s;

}



nav a:hover{

    color:var(--bronze);

}

/*==========================================================
HERO
==========================================================*/

.hero{

    position:relative;

    height:100vh;
    min-height:900px;

    display:flex;
    align-items:center;

    overflow:hidden;

    background:
        linear-gradient(
            rgba(8,8,8,.20),
            rgba(8,8,8,.55)
        ),
        url("../images/hero/hero-wall.png");

    background-size:cover;
    background-position:center center;
    background-repeat:no-repeat;

}



.hero-overlay{

    position:absolute;
    inset:0;

    background:

    radial-gradient(

        circle at 78% 34%,

        rgba(255,220,160,.18),

        rgba(255,220,160,.06) 22%,

        transparent 58%

    );

}



.hero-content{

    position: relative;
    z-index: 5;

    max-width: 560px;

    margin-left: 120px;     /* was around 2.5–3rem */
    padding-top: 5rem;

}


.hero-eyebrow{

    color:var(--bronze);

    letter-spacing:6px;

    text-transform:uppercase;

    font-size:.82rem;

    margin-bottom:22px;

}



.hero h1{

    font-size:6.6rem;

    line-height:.90;

    font-weight:300;

    margin-bottom:34px;

}



.hero-copy{

    font-size:1.18rem;

    line-height:2;

    color:#d9d9d9;

    max-width:500px;

    margin-bottom:50px;

}



.hero-buttons{

    display:flex;
    align-items:center;
    gap:18px;
    flex-wrap:nowrap;
    margin-top:46px;

}
/*==========================================================
LIGHT REVEAL
==========================================================*/

.hero{

    animation:lightsOn 2.4s ease forwards;

}



@keyframes lightsOn{

0%{

    filter:

    brightness(.38)

    contrast(.85)

    saturate(.75);

}

35%{

    filter:

    brightness(.55)

    contrast(.95)

    saturate(.9);

}

100%{

    filter:

    brightness(1)

    contrast(1)

    saturate(1);

}

}



@keyframes fadeUp{

from{

    opacity:0;

    transform:translateY(24px);

}

to{

    opacity:1;

    transform:translateY(0);

}

}
/*==========================================================
STORY
==========================================================*/

.story-section{

    background:#111111;

    padding:140px 8%;

}

.story-container{

    max-width:1300px;

    margin:auto;

}

.section-intro{

    max-width:900px;

    margin:0 auto 90px;

    text-align:center;

}

.section-tag{

    display:block;

    color:var(--bronze);

    letter-spacing:6px;

    font-size:.82rem;

    margin-bottom:30px;

}

.section-intro h2{

    font-size:4.5rem;

    line-height:1.02;

    margin-bottom:40px;

}

.section-intro h2 span{

    color:var(--bronze);

}

.section-copy{

    max-width:760px;

    margin:auto;

    font-size:1.18rem;

    line-height:2;

}



/*==========================================================
SERVICE GRID
==========================================================*/

.service-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:40px;

    margin-top:70px;

}

.service-panel{

    background:#181818;

    padding:45px;

    border-radius:18px;

    border-top:2px solid var(--bronze);

    transition:.35s;

}

.service-panel:hover{

    transform:translateY(-8px);

    background:#1d1d1d;

    box-shadow:0 20px 50px rgba(0,0,0,.35);

}

.service-panel h3{

    font-size:2rem;

    margin-bottom:22px;

}

.service-panel p{

    line-height:1.8;

}



/*==========================================================
EVERY BRAND HAS A VOICE
==========================================================*/



.story-break h3{

    font-size:4rem;

    margin-bottom:18px;

}

.story-break p{

    color:var(--bronze);

    font-size:1.35rem;

    letter-spacing:2px;

}


.story-break{

    margin-top:120px;
    text-align:center;

}

.story-break h3{

    font-family:var(--font-display);
    font-size:4rem;
    margin-bottom:28px;

}




/*==========================================================
FIRST LISTEN
==========================================================*/

.listen-section{

    background:#0d0d0d;


    padding:40px 8% 120px;
}


.listen-container{

    max-width:1100px;

    margin:auto;

    text-align:center;

}

.listen-label{

    display:block;

    color:var(--bronze);

    letter-spacing:6px;

    font-size:.82rem;

    margin-bottom:28px;

}

.listen-section h2{

    font-size:4.8rem;

    margin-bottom:30px;

}

.listen-intro{

    max-width:650px;

    margin:0 auto 70px;

    line-height:2;

    font-size:1.2rem;

}



/*==========================================================
PLAYER
==========================================================*/

.premium-player{

    background:#171717;

    border:1px solid rgba(200,155,98,.18);

    border-radius:24px;

    padding:70px;

    box-shadow:0 30px 70px rgba(0,0,0,.35);

}
.premium-player{
    margin-top:70px;
}
.premium-player h3{

    font-size:2rem;

    margin-bottom:10px;

}

.premium-player p{

    margin-bottom:35px;

}

audio{

    width:100%;

}



/*==========================================================
THREE PILLARS
==========================================================*/

.listen-pillars{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:40px;

    margin:90px 0;

}

.listen-pillars h4{

    color:var(--bronze);

    margin-bottom:15px;

    letter-spacing:2px;

    font-size:1rem;

    font-family:"Inter",sans-serif;

    font-weight:600;

}

.listen-pillars p{

    line-height:1.8;

}



/*==========================================================
IMAGINE
==========================================================*/

.imagine{

    margin-top:100px;

    text-align:center;

}

.imagine h2{

    font-size:3.8rem;

    margin-bottom:15px;

}

.imagine h3{

    font-size:2rem;

    color:var(--bronze);

    margin-bottom:40px;

}

/*==================================================
THE CRAFT
==================================================*/
.craft{

    position:relative;

    min-height:100vh;

   background:
url("../images/Sections/console-headphones.png")
center center / cover
no-repeat;
}
.craft-hitbox {
position: absolute;
left: 42%;
top: 90%;
transform: translate(-50%, -50%) ;
width: 420px;
height: 120px;
display: block; z-index: 9999;
cursor:pointer;
}
/*==========================================================
FOUNDER
==========================================================*/

.founder{

    background:#111;

    padding:140px 8%;

}

.founder-container{

    max-width:1300px;

    margin:auto;

    display:grid;

    grid-template-columns:500px 1fr;

    gap:90px;

    align-items:center;

}

.founder-photo img{

    border-radius:18px;

    box-shadow:0 35px 80px rgba(0,0,0,.35);

}

.founder-copy h2{

    font-size:4.5rem;

    line-height:1;

    margin-bottom:40px;

}

.founder-copy p{

    font-size:1.15rem;

    line-height:2;

    margin-bottom:24px;

}

.founder blockquote{

    margin:70px 0;

    padding-left:30px;

    border-left:2px solid var(--bronze);

    font-size:2.3rem;

}

.founder blockquote span{

    display:block;

    margin-top:20px;

    color:var(--bronze);

}

.founder-signoff{

    margin-top:60px;

}

.founder-signoff h3{

    font-size:2rem;

    margin-bottom:15px;

}

.founder-signature{

    width:320px;

    margin:22px 0 26px;

    opacity:.82;

}

.location{

    color:var(--bronze);

    text-transform:uppercase;

    letter-spacing:5px;

    font-size:.85rem;

}



/*==========================================================
CONTACT
==========================================================*/

.contact{

    background:#0d0d0d;

    padding:130px 8%;

    text-align:center;

}

.contact-container{

    max-width:850px;

    margin:auto;

}

.contact h2{

    font-size:4.5rem;

    margin-bottom:35px;

}

.contact-intro{

    font-size:1.2rem;

    line-height:2;

    margin-bottom:18px;

}

.contact-buttons{

    display:flex;

    justify-content:center;

    gap:24px;

    flex-wrap:wrap;

    margin:70px 0;

}

.contact-info{

    display:flex;

    flex-direction:column;

    gap:18px;

}

.contact-info a{

    color:var(--bronze);

    font-size:1.05rem;

}

.contact-info span{

    color:var(--bronze);

    letter-spacing:5px;

    text-transform:uppercase;

    font-size:.85rem;

}



/*==========================================================
FOOTER
==========================================================*/

.site-footer{

    background:#090909;

    text-align:center;

    padding:60px 8%;

    border-top:1px solid rgba(200,155,98,.2);

}

.footer-tagline{

    font-size:2rem;

    margin-bottom:16px;

}

.footer-location{

    color:var(--bronze);

    letter-spacing:4px;

    margin-bottom:24px;

    text-transform:uppercase;

    font-size:.85rem;

}

.copyright{

    color:#777;

    font-size:.9rem;

}



/*==========================================================
RESPONSIVE
==========================================================*/

@media (max-width:1000px){

.hero{

    min-height:auto;

    padding:180px 8% 120px;

}

.hero h1{

    font-size:4.5rem;

}

.hero-content{

    margin:auto;

}

.hero-buttons{

    justify-content:center;

}

.service-grid{

    grid-template-columns:1fr;

}

.listen-pillars{

    grid-template-columns:1fr;

}

.founder-container{

    grid-template-columns:1fr;

    text-align:center;

}

.founder blockquote{

    border-left:none;

    border-top:2px solid var(--bronze);

    padding-top:35px;

    padding-left:0;

}

.contact-buttons{

    flex-direction:column;

}

}



@media (max-width:640px){

.hero h1{

    font-size:3.3rem;

}

.section-intro h2,
.listen-section h2,
.craft h2,
.founder-copy h2,
.contact h2{

    font-size:3rem;

}

.craft h3{

    font-size:1.8rem;

}

}
/*=========================================
FIRST LISTEN HERO
=========================================*/

.listen-hero{

    position:relative;
    max-width:1400px;
    margin:0 auto 80px;

}

.listen-hero-image{

    width:100%;
    display:block;
    border-radius:18px;

}

.listen-hero-hitbox{

    position:absolute;

    left:32%;
    bottom:7%;

    width:36%;
    height:12%;

    display:block;

    z-index:10;

}
.hero-listen-btn{

    position:relative;

    left:20px;

}
/*==================================================
  Signature Statement
==================================================*/

.signature-statement{

    position:relative;

    background:#0d0d0d;

    padding:180px 40px;

    text-align:center;

    overflow:hidden;

}

.signature-statement::before{

    content:"";

    position:absolute;

    inset:0;

    background:

        radial-gradient(circle at center,
            rgba(190,150,70,.08),
            transparent 65%);

    pointer-events:none;

}

.statement-container{

    position:relative;

    z-index:2;

    max-width:900px;

    margin:auto;

}

.statement-title{

    font-family:"Cormorant Garamond",serif;

    font-size:clamp(2.7rem,5vw,5rem);

    font-weight:500;

    color:#ece6da;

    margin-bottom:24px;

    line-height:1.15;

    letter-spacing:-.02em;

}

.statement-subtitle{

    font-family:"Cormorant Garamond",serif;

    font-size:clamp(2rem,4vw,3.5rem);

    color:#bf9650;

    font-weight:400;

    margin-bottom:100px;

}

.industry-rotator{

    position:relative;

    height:70px;

}

.industry{

    position:absolute;

    left:50%;

    top:0;

    transform:translateX(-50%);

    opacity:0;

    font-size:2rem;

    letter-spacing:.35em;

    text-transform:uppercase;

    color:#ffffff;

    transition:

        opacity 1.4s ease,

        transform 1.4s ease;

}

.industry.active{

    opacity:1;

    transform:

        translateX(-50%)

        translateY(0);

}

/* Version 1.1 stability refinements */
@media (max-width:640px){
  .signature-statement{padding:120px 24px;}
  .statement-subtitle{margin-bottom:70px;}
  .industry{width:100%;font-size:1.15rem;letter-spacing:.22em;}
}
@media (prefers-reduced-motion:reduce){.industry{transition:none;}}


/*==========================================================
MOBILE EXPERIENCE — Version 1.3
==========================================================*/
.nav-toggle{display:none}

@media (max-width: 820px){
    html{scroll-padding-top:72px}

    .site-header{
        height:72px;
        padding:10px 18px;
        background:rgba(8,8,8,.92);
        border-bottom:1px solid rgba(200,155,98,.16);
        backdrop-filter:blur(16px);
        -webkit-backdrop-filter:blur(16px);
    }

    .header-logo img{width:132px;max-height:48px}

    .nav-toggle{
        display:flex;
        width:46px;
        height:46px;
        padding:11px;
        flex-direction:column;
        justify-content:center;
        gap:6px;
        border:1px solid rgba(200,155,98,.45);
        border-radius:50%;
        background:rgba(255,255,255,.025);
        cursor:pointer;
        position:relative;
        z-index:1002;
    }
    .nav-toggle span{
        display:block;
        width:100%;
        height:1.5px;
        background:#e7c28f;
        transition:transform .3s ease,opacity .2s ease;
        transform-origin:center;
    }
    .nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
    .nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
    .nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

    .main-nav{
        position:fixed;
        inset:72px 0 auto 0;
        display:grid;
        gap:0;
        padding:10px 18px 20px;
        background:rgba(8,8,8,.98);
        border-bottom:1px solid rgba(200,155,98,.18);
        box-shadow:0 18px 38px rgba(0,0,0,.45);
        opacity:0;
        visibility:hidden;
        transform:translateY(-12px);
        transition:opacity .25s ease,transform .25s ease,visibility 0s linear .25s;
    }
    .main-nav.is-open{
        opacity:1;
        visibility:visible;
        transform:none;
        transition-delay:0s;
    }
    .main-nav a{
        display:block;
        padding:15px 4px;
        border-bottom:1px solid rgba(255,255,255,.07);
        font-size:.78rem;
        letter-spacing:.16em;
        white-space:nowrap;
    }
    .main-nav a:last-child{border-bottom:0}

    .hero{
        height:auto;
        min-height:100svh;
        align-items:flex-end;
        padding:118px 22px max(92px,calc(48px + env(safe-area-inset-bottom)));
        background-position:64% center;
    }
    .hero::before{
        content:"";
        position:absolute;
        inset:0;
        z-index:1;
        background:linear-gradient(180deg,rgba(5,5,5,.18) 0%,rgba(5,5,5,.35) 36%,rgba(5,5,5,.91) 100%);
        pointer-events:none;
    }
    .hero-overlay{z-index:2;opacity:.65}
    .hero-content{
        width:100%;
        max-width:520px;
        margin:0;
        padding:0;
        text-align:left;
    }
  .hero-eyebrow{
    max-width:13rem;
    margin-top:14px;
    margin-bottom:22px;
    font-size:.66rem;
    line-height:1.5;
    letter-spacing:.26em;
}
    .hero h1{
        max-width:9ch;
        margin-bottom:22px;
        font-size:clamp(3.35rem,15vw,5rem);
        line-height:.86;
        letter-spacing:-.025em;
    }
    .hero-copy{
        max-width:29rem;
        margin-bottom:26px;
        font-size:1rem;
        line-height:1.65;
    }
    .hero-copy br{display:none}
    .hero-buttons{
        width:100%;
        margin-top:24px;
        flex-direction:column;
        align-items:stretch;
        gap:12px;
    }
    .hero-buttons .btn{
        width:100%;
        min-height:42px;
        padding:10px 14px;
        text-align:center;
        font-size:.82rem;
        line-height:1.25;
    }
    .hero-listen-btn{left:0}

    .signature-statement{padding:100px 22px}
    .statement-title{font-size:clamp(2.45rem,12vw,3.6rem)}
    .statement-subtitle{font-size:clamp(1.8rem,8vw,2.7rem);margin-bottom:62px}

    .story-section,.founder,.contact{padding:92px 22px}
    .listen-section{padding:28px 22px 92px}
    .section-intro{margin-bottom:58px}
    .section-intro h2,.listen-section h2,.founder-copy h2,.contact h2{font-size:clamp(2.7rem,12vw,3.6rem)}
    .section-copy,.listen-intro,.founder-copy p,.contact-intro{font-size:1rem;line-height:1.75}
    .service-grid{gap:20px;margin-top:44px}
    .service-panel{padding:30px 24px}
    .service-panel h3{font-size:1.75rem}
    .story-break{margin-top:78px}
    .story-break h3{font-size:clamp(2.6rem,12vw,3.5rem)}

    .private-preview{padding:88px 14px}
    .preview-stage{min-height:600px}
    .preview-reveal h2{font-size:clamp(2.45rem,12vw,3.8rem)}

    .craft{
        min-height:0;
        aspect-ratio:9/16;
        background-position:center top;
        background-size:cover;
    }
    .craft-hitbox{
        left:50%;
        top:auto;
        bottom:5%;
        width:78%;
        height:11%;
        transform:translateX(-50%);
    }

    .founder-container{gap:44px}
    .founder-photo{max-width:420px;margin:auto}
    .founder blockquote{margin:46px 0;font-size:1.8rem}
    .founder-signature{width:min(280px,85%);margin-left:auto;margin-right:auto}

    .contact-buttons{margin:46px 0;gap:12px}
    .contact-buttons .btn{width:100%;min-height:52px}
    .site-footer{padding:48px 22px calc(48px + env(safe-area-inset-bottom))}
    .footer-tagline{font-size:1.55rem}
}

@media (max-width: 430px){
    .hero{background-position:61% center}
    .hero h1{font-size:clamp(3.1rem,14.5vw,4rem)}
    .preview-stage{min-height:560px}
    .preview-mark{transform:scale(.82)}
    .industry{font-size:1rem;letter-spacing:.18em}
}

body.nav-open{overflow:hidden}

/*==========================================================
MOBILE ART-DIRECTION PASS — Version 1.4
==========================================================*/
@media (max-width:820px){
    .hero{
        min-height:calc(100svh - 72px);
        padding:112px 22px max(74px,calc(36px + env(safe-area-inset-bottom)));
        background-image:
            linear-gradient(180deg,rgba(5,5,5,.10),rgba(5,5,5,.38) 48%,rgba(5,5,5,.92)),
            url("../images/hero/hero-wall-mobile.jpg");
        background-size:cover;
        background-position:center center;
    }
    .hero::before{
        background:
            linear-gradient(90deg,rgba(4,4,4,.76) 0%,rgba(4,4,4,.43) 54%,rgba(4,4,4,.12) 100%),
            linear-gradient(180deg,rgba(4,4,4,.08) 0%,rgba(4,4,4,.20) 42%,rgba(4,4,4,.82) 100%);
    }
    .hero-overlay{opacity:.32}
    .hero-content{max-width:430px}
    .hero h1{
        max-width:8.2ch;
        font-size:clamp(3rem,13.4vw,4.15rem);
        line-height:.9;
    }
    .hero-copy{max-width:24rem}

    /* The Craft artwork contains its own typography. Show the full composition
       on phones instead of cropping a landscape graphic into a tall panel. */
    .craft{
        width:100%;
        min-height:0;
        aspect-ratio:3/2;
        background-color:#070707;
        background-size:contain;
        background-position:center center;
        background-repeat:no-repeat;
    }
    .craft-hitbox{
        left:32%;
        top:auto;
        bottom:5.6%;
        width:36%;
        height:13%;
        transform:none;
    }
}

@media (max-width:430px){
    .site-header{height:76px;padding:11px 16px}
    .header-logo img{width:145px;max-height:52px}
    .main-nav{inset:76px 0 auto 0}
    .hero{
        min-height:calc(100svh - 76px);
        padding:116px 20px max(68px,calc(30px + env(safe-area-inset-bottom)));
        background-position:52% center;
    }
    .hero-eyebrow{font-size:.63rem;letter-spacing:.24em}
    .hero h1{font-size:clamp(2.9rem,13vw,3.75rem)}
    .hero-copy{font-size:.96rem;line-height:1.58}
}

/*==========================================================
FINAL PHONE HERO COMPOSITION — Version 1.5
Based on live iPhone review
==========================================================*/
@media (max-width:820px){
    .hero{
        min-height:auto;
        height:auto;
        align-items:flex-start;
        padding:132px 22px 76px;
        background-position:50% center;
    }
    .hero-content{
        max-width:none;
    }
    .hero h1{
        max-width:none;
        width:100%;
        font-size:clamp(3rem,12.4vw,4rem);
        line-height:.93;
        margin-bottom:24px;
    }
    .hero-copy{
        max-width:31rem;
        margin-bottom:24px;
    }
    .hero-buttons{
        margin-top:64px;
    }
}

@media (max-width:430px){
    .hero{
        min-height:auto;
        padding:126px 20px 70px;
        background-position:50% center;
    }
    .hero h1{
        max-width:none;
        font-size:clamp(2.85rem,12vw,3.45rem);
        line-height:.94;
        letter-spacing:-.02em;
    }
    .hero-copy{
        font-size:.95rem;
        line-height:1.55;
    }
    .hero-buttons .btn{
        min-height:56px;
        font-size:.78rem;
    }
}

/*==========================================================
FINAL PHONE HERO SEPARATION — Version 1.6
Keeps the headline clear of the dimensional wall logo.
==========================================================*/
@media (max-width:820px){
    .hero{
        background-position:72% center;
    }
    .hero::before{
        background:
            linear-gradient(90deg,rgba(4,4,4,.90) 0%,rgba(4,4,4,.72) 43%,rgba(4,4,4,.24) 72%,rgba(4,4,4,.08) 100%),
            linear-gradient(180deg,rgba(4,4,4,.08) 0%,rgba(4,4,4,.18) 45%,rgba(4,4,4,.86) 100%);
    }
    .hero-content{
        width:min(100%,520px);
    }
    .hero h1{
        max-width:7.7ch;
    }
}

@media (max-width:430px){
    .hero{
        background-position:76% center;
    }
    .hero-content{
        width:100%;
    }
    .hero h1{
        max-width:7.4ch;
        font-size:clamp(2.72rem,11.3vw,3.3rem);
    }
}

/*==========================================================
FINAL PORTRAIT HERO + PREVIEW LANDING — Version 1.7
Phone-only art direction. Desktop remains unchanged.
==========================================================*/
@media (max-width:820px){
    .hero{
        min-height:calc(100svh - 76px);
        padding:118px 20px 64px;
        align-items:flex-start;
        background-image:url("../images/hero/hero-wall-mobile.jpg");
        background-size:cover;
        background-position:center top;
        background-repeat:no-repeat;
    }
    .hero::before{
        background:
            linear-gradient(90deg,rgba(3,3,3,.94) 0%,rgba(3,3,3,.88) 34%,rgba(3,3,3,.48) 52%,rgba(3,3,3,.06) 72%),
            linear-gradient(180deg,rgba(3,3,3,.06) 0%,rgba(3,3,3,.08) 48%,rgba(3,3,3,.92) 100%);
    }
    .hero-overlay{opacity:.12}
    .hero-content{
        width:47%;
        max-width:340px;
        position:relative;
        z-index:3;
    }
    .hero-eyebrow{
        max-width:13rem;
        margin-bottom:22px;
        font-size:.67rem;
        line-height:1.55;
        letter-spacing:.27em;
    }
    .hero h1{
        max-width:6.2ch;
        margin-bottom:26px;
        font-size:clamp(2.65rem,10.5vw,3.45rem);
        line-height:.91;
        letter-spacing:-.024em;
    }
    .hero-copy{
        max-width:16rem;
        margin-bottom:26px;
        font-size:.94rem;
        line-height:1.58;
    }
    .hero-buttons{
        width:calc(100vw - 40px);
        margin-top:26px;
        gap:12px;
    }
    .hero-buttons .btn{
        min-height:56px;
        padding:15px 16px;
        font-size:.82rem;
    }

    /* Compact, app-like Private Brand Preview landing on phones. */
    .private-preview{
        min-height:auto;
        padding:92px 14px 42px;
    }
    .preview-stage{
        min-height:520px;
        width:100%;
    }
    .preview-entry{
        align-self:start;
        margin-top:92px;
        gap:24px;
    }
    .preview-mark{
        height:150px;
        gap:8px;
        transform:scale(.88);
        transform-origin:center;
    }
    .preview-enter{
        padding:.75rem 1rem;
        font-size:.78rem;
        letter-spacing:.48em;
        text-indent:.48em;
    }
}

@media (max-width:430px){
    .hero{
        padding:110px 18px 58px;
    }
    .hero-content{
        width:49%;
        max-width:205px;
    }
    .hero-eyebrow{
        max-width:12rem;
        font-size:.61rem;
        letter-spacing:.23em;
    }
    .hero h1{
        max-width:5.7ch;
        font-size:clamp(2.45rem,10.2vw,3.05rem);
        line-height:.92;
    }
    .hero-copy{
        width:calc(100vw - 36px);
        max-width:19rem;
        font-size:.92rem;
    }
    .hero-buttons{
        width:calc(100vw - 36px);
    }
    .preview-stage{min-height:500px}
    .preview-entry{margin-top:78px}
}

/*==========================================================
MOBILE MASTER COMPOSITION — Version 1.8
Purpose-built portrait hero; desktop rules remain untouched.
==========================================================*/
@media (max-width:820px){
    .hero{
        min-height:auto;
        height:auto;
        padding:112px 18px 54px;
        align-items:flex-start;
    background-image:url("../images/hero/hero-wall-mobile-v2.jpg");
        background-size:cover;
        background-position:center top;
        background-repeat:no-repeat;
    }
    .hero::before{
        background:
            linear-gradient(90deg,rgba(2,2,2,.34) 0%,rgba(2,2,2,.14) 46%,rgba(2,2,2,0) 66%),
            linear-gradient(180deg,rgba(2,2,2,.02) 0%,rgba(2,2,2,.05) 58%,rgba(2,2,2,.88) 100%);
    }
    .hero-overlay{opacity:.08}
    .hero-content{
        width:46%;
        max-width:330px;
    }
    .hero-eyebrow{
        max-width:13rem;
        margin-bottom:22px;
        font-size:.66rem;
        line-height:1.5;
        letter-spacing:.26em;
    }
    .hero h1{
        max-width:5.7ch;
        margin-bottom:24px;
        font-size:clamp(2.55rem,10.3vw,3.35rem);
        line-height:.91;
        letter-spacing:-.025em;
    }
    .hero-copy{
        width:calc(100vw - 36px);
        max-width:18.5rem;
        margin-bottom:22px;
        font-size:.92rem;
        line-height:1.55;
    }
    .hero-buttons{
        width:calc(100vw - 36px);
        margin-top:18px;
        gap:12px;
    }
    .hero-buttons .btn{
        min-height:56px;
        padding:15px 14px;
        font-size:.82rem;
    }
    .hero-listen-btn{left:0}

    /* Remove the dead zone between the Preview splash and The Craft. */
    .private-preview{
        min-height:auto !important;
        padding:30px 12px 24px !important;
    }
    .preview-stage{
        min-height:410px !important;
    }
    .preview-entry{
        align-self:center !important;
        margin-top:0 !important;
        gap:18px !important;
    }
    .preview-mark{
        height:132px !important;
        transform:scale(.82) !important;
    }
    .preview-enter{
        padding:.65rem .9rem !important;
    }
    .craft{
        margin-top:0 !important;
    }
}

@media (max-width:430px){
    .hero{
        padding:108px 16px 50px;
    }
    .hero-content{
        width:46%;
        max-width:190px;
    }
    .hero-eyebrow{
        font-size:.59rem;
        letter-spacing:.22em;
    }
    .hero h1{
        max-width:5.5ch;
        font-size:clamp(2.38rem,10vw,2.95rem);
    }
    .hero-copy,
    .hero-buttons{
        width:calc(100vw - 32px);
    }
    .preview-stage{min-height:380px !important}
    .preview-mark{height:122px !important}
}


/*==========================================================
FINAL MOBILE CTA OVERRIDE — Version 2.0
Desktop remains unchanged.
==========================================================*/
@media (max-width:820px){
    .hero-buttons{
        margin-top:64px !important;
        gap:10px !important;
    }

    .hero-buttons .btn{
        min-height:40px !important;
        padding:8px 14px !important;
        font-size:.78rem !important;
        line-height:1.15 !important;
    }
}


/*==========================================================
FINAL MOBILE CTA SIZE LOCK — Version 2.1
Forces compact phone buttons; desktop remains unchanged.
==========================================================*/
@media (max-width:820px){
    .hero-buttons{
        margin-top:64px !important;
        gap:10px !important;
    }

    .hero-buttons .btn{
        height:44px !important;
        min-height:0 !important;
        max-height:44px !important;
        padding:0 14px !important;
        border-radius:22px !important;
        font-size:.76rem !important;
        line-height:1 !important;
    }
}


/*==========================================================
MOBILE HERO ARTWORK MODE — Version 1.0
Uses the complete phone composition as the visual hero.
Desktop remains unchanged.
==========================================================*/
.mobile-hero-hitbox{
    display:none;
}

@media (max-width:820px){
    .hero{
        position:relative;
        min-height:0 !important;
        height:auto !important;
        aspect-ratio:832 / 1660;
        padding:0 !important;
        background-image:url("../images/hero/hero-wall-mobile-v2.jpg") !important;
        background-size:100% 100% !important;
        background-position:center top !important;
        background-repeat:no-repeat !important;
    }

    .hero::before,
    .hero-overlay,
    .hero-content{
        display:none !important;
    }

    .mobile-hero-hitbox{
        position:absolute;
        display:block;
        z-index:20;
        left:4.2%;
        width:49%;
        background:transparent;
        border:0;
        cursor:pointer;
        -webkit-tap-highlight-color:transparent;
    }

    .mobile-schedule-hitbox{
        top:82.0%;
        height:4.8%;
    }

    .mobile-preview-hitbox{
        top:87.4%;
        height:4.6%;
    }
}

@media (max-width:430px){
    .hero{
        aspect-ratio:832 / 1660;
    }
}