/* ==========================================
   JOHN ENSLINGER AUDIO PRODUCTION
   PRODUCTION STYLESHEET
========================================== */

:root {

	--font-heading: "Manrope", sans-serif;
	--font-body: "Manrope", sans-serif;
	
    --bg-primary: #050505;
    --bg-secondary: #0a0f18;

    --text-primary: #ffffff;
    --text-secondary: rgba(255,255,255,.75);

    --accent-orange: #ff9a00;
    --accent-pink: #ff006e;

    --gradient:
        linear-gradient(
            135deg,
            var(--accent-orange),
            var(--accent-pink)
        );

    --border:
        rgba(255,255,255,.08);

    --max-width: 1800px;

    --transition: .3s ease;
}

/* ==========================================
   RESET
========================================== */

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

html {

    scroll-behavior:smooth;

    -webkit-text-size-adjust:100%;

    text-size-adjust:100%;

}

body {
    background:
        radial-gradient(
            circle at top right,
            rgba(255,0,110,.08),
            transparent 40%
        ),
        radial-gradient(
            circle at bottom left,
            rgba(255,154,0,.08),
            transparent 40%
        ),
        var(--bg-primary);
    color: var(--text-primary);
    font-family:var(--font-body);
    overflow-x: hidden;
    max-width: 100%;
    line-height: 1.6;
}


body::before {

    content: "";
    position: fixed;
    inset: 14px;
    border-radius: 24px;
    border: 1px solid rgba(255,255,255,.08);
    pointer-events: none;
    z-index: 9999;
}
/* ==========================================
   GLOBAL
========================================== */

img {
    display: block;
    max-width: 100%;
}

a {
    color: inherit;
    text-decoration: none;
}

ul {
    list-style: none;
}

section {
    padding: 5rem 1.5rem;
}

.container {
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
}

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

.site-header{
    position: sticky;
    top: 0;
    z-index: 1000;

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

    min-height: 72px;

    padding: 0 2.4rem;

    backdrop-filter: blur(12px);
    background: rgba(5,5,5,.7);

    border-bottom: 1px solid var(--border);
}

.logo{
    font-family:"Plus Jakarta Sans", sans-serif;
    font-weight:800;
    font-size:1.78rem;
    letter-spacing:-0.045em;
    line-height:1;

    display:flex;
    align-items:center;
    gap:.14rem;

    text-transform:uppercase;

    margin-left:-0.35rem;

    position:relative;
    top:5px;
}

.logo .enslinger {

    background: var(--gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.quote-btn {

	padding: .95rem 1.75rem;
	min-width: 150px;
	text-align: center;
    border-radius: 999px;
    background: var(--gradient);
    font-size: .85rem;
    font-weight: 700;
    transition:
        var(--transition);
}

.quote-btn:hover {
    /* transform: translateY(-2px); */
}

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

.hero{
    position: relative;
    display: grid;

    grid-template-columns: 1.2fr 0.8fr;

    align-items: start;

    gap: 3rem;

    max-width: 1180px;

    margin: 0 auto;

    padding: 2.5rem 8% 2rem;

    overflow: hidden;
    isolation: isolate;
}



/* ---------- LEFT COLUMN ---------- */

.hero-content{
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: none;

    padding-top: 1.50rem;
}


.secondary-btn{

    position: relative;
    overflow: hidden;

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

    padding: .95rem 2.1rem;

    border-radius: 999px;

    border: 1px solid rgba(255,255,255,.18);

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.16),
            rgba(255,255,255,0) 45%
        ),
        linear-gradient(
            135deg,
            #7DD3FC 0%,
            #4F8DFF 45%,
            #2563EB 100%
        );

    color: #fff;

    font-size: .82rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
	margin-bottom: 1.75rem;
    transition: all .35s ease;

    box-shadow:
        0 0 0 1px rgba(125,211,252,.20),
        0 0 22px rgba(59,130,246,.35),
        0 8px 28px rgba(37,99,235,.35);
}

.secondary-btn::before{

    content:"";

    position:absolute;

    top:-50%;
    left:-140%;

    width:55%;
    height:200%;

    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.45),
        transparent
    );

    transform:rotate(22deg);

    transition:left .8s ease;
}

.secondary-btn:hover{

    /* transform:translateY(-3px); */

    box-shadow:
        0 0 0 1px rgba(180,230,255,.35),
        0 0 32px rgba(96,165,250,.50),
        0 12px 36px rgba(37,99,235,.45);
}

.secondary-btn:hover::before{

    left:180%;
}

.hero-title{

    display:flex;
    flex-direction:column;

    gap:.45rem;

    margin:.75rem 0 1.75rem;

    line-height:.88;
}

.hero-line-1{

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

    font-size:clamp(4.6rem,5.8vw,6.2rem);

    font-weight:900;

    letter-spacing:-.075em;

    line-height:.84;

    color:#fff;

    text-transform:uppercase;

    text-shadow:
        0 3px 18px rgba(0,0,0,.25);
}

.hero-line-2{

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

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

    font-weight:900;

    letter-spacing:-.075em;

    line-height:.82;

    text-transform:uppercase;

    background:var(--gradient);

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;

    filter:drop-shadow(0 3px 18px rgba(0,0,0,.18));
}

.hero-description{

    font-size:1.25rem;

    line-height:1.7;

    color:var(--text-secondary);

    max-width:560px;

    margin-bottom:2.5rem;
}

.hero-actions{

    display:flex;

    flex-direction:row;

    align-items:center;

    gap:1rem;

    flex-wrap:wrap;
}

.hero-subtext{

    color:rgba(255,255,255,.65);

    font-size:.95rem;
}

/* ---------- BUTTON ---------- */

.primary-btn{

    position:relative;
    overflow:hidden;

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

    padding:1rem 2.7rem;

    border-radius:999px;

    border:1px solid rgba(255,255,255,.20);

    color:#fff;
	font-family: var(--font-body);
	font-weight: 800;
    font-size:.95rem;
    letter-spacing:.03em;
    text-transform:uppercase;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.22),
            rgba(255,255,255,0) 42%
        ),
        linear-gradient(
            135deg,
            #FFC941 0%,
            #FF9800 22%,
            #FF6A1E 48%,
            #FF3A54 74%,
            #FF006E 100%
        );

    transition: all .35s ease;

    box-shadow:
    0 0 0 1px rgba(255,255,255,.15),
    0 0 16px rgba(255,0,110,.18),
    0 10px 28px rgba(255,0,110,.28);
}

.primary-btn::before{

    content:"";

    position:absolute;
    inset:0;

    background:
        linear-gradient(
            110deg,
            transparent 20%,
            rgba(255,255,255,.40) 50%,
            transparent 80%
        );

    transform:translateX(-180%);
    transition:transform .8s ease;
}

.primary-btn::after{

    content:"";

    position:absolute;
    left:10%;
    right:10%;
    top:2px;
    height:42%;

    border-radius:999px;

    background:
        linear-gradient(
            to bottom,
            rgba(255,255,255,.30),
            rgba(255,255,255,0)
        );

    pointer-events:none;
}

.primary-btn:hover{

    /* transform:translateY(-4px) scale(1.025); */

    filter:saturate(115%);

    box-shadow:
        0 0 0 1px rgba(255,255,255,.18),
        0 0 20px rgba(255,0,110,.22),
        0 14px 32px rgba(255,0,110,.32);
}

.primary-btn:hover::before{

    transform:translateX(180%);
}

/* ---------- RIGHT COLUMN ---------- */






.contact-section{
    width:100%;
    max-width:560px;
    justify-self:end;
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    padding:0;
    margin-top:.6rem;
}

.section-title{

    text-align:center;

    font-size:clamp(2rem,2.5vw,2.5rem);
    font-weight:900;
    line-height:1;
    letter-spacing:-.03em;
    white-space:nowrap;
    margin:0 0 .75rem;
}

.contact-card-header{
    margin-bottom:1.25rem;
    text-align:center;
}

.section-subtitle{
    color:rgba(255,255,255,.70);
    font-size:1rem;
    line-height:1.6;
    max-width:380px;
	margin:0 auto;
}

#lead-form{
    display:grid;
    gap:.85rem;

    padding:30px;

    min-height:530px;

    justify-content:center;

    background:rgba(255,255,255,.02);
    border:1px solid rgba(255,255,255,.08);
    border-radius:24px;
    backdrop-filter:blur(10px);
}

#lead-form label {

    font-size: .9rem;
    font-weight: 600;
    margin-bottom:-0.25rem;
}

#lead-form input,
#lead-form textarea{
    display:block;

    width:calc(100% + 16px);

    margin-left:-8px;

    padding:1rem 1.15rem;

    border-radius:14px;

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

    background:rgba(255,255,255,.04);

    color:#fff;

    font-size:1rem;

    transition:all .25s ease;
}

#lead-form .primary-btn{

    width:100%;

    border:none;

    cursor:pointer;

    appearance:none;
    -webkit-appearance:none;

    font-family:var(--font-body);

    margin-top:1rem;
}

#lead-form input:focus,
#lead-form textarea:focus {

    outline: none;

    border-color:
        rgba(255,0,110,.5);

    box-shadow:
        0 0 25px rgba(255,0,110,.15);
}


.contact-icon {

    width: 70px;
    height: 70px;

    border-radius: 50%;

    background: var(--gradient);

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

    font-size: 28px;
    color: white;

    margin: 0 auto 20px;
}

.section-title::after{
    content:"";
    display:block;
    width:140px;
    height:4px;
    margin:1.1rem auto 0;
    background:var(--gradient);
    border-radius:999px;
}

#lead-form textarea {

    resize: vertical;

    min-height: 145px;
}

/* ==========================================
   ABOUT
========================================== */

.about{

    padding:2rem 2rem 1rem;

    border-top:1px solid rgba(255,255,255,.08);
}

.about-container{

    width:100%;
    max-width:1180px;

    margin:0 auto;

    padding:0 8%;
}

.about-eyebrow{

    display:block;

    margin-bottom:1rem;

    text-align:center;

    font-size:.82rem;

    font-weight:800;

    letter-spacing:.22em;

    color:rgba(255,255,255,.55);
}

.about-headline{

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

    font-size:clamp(2.8rem,3.2vw,3.9rem);

    font-weight:900;

    line-height:1;

    letter-spacing:-.045em;

    text-align:center;

    margin:0 auto 2.25rem;
    
}

.about-identity{

    position:relative;

    display:flex;

    align-items:center;

    gap:2.25rem;

    width:fit-content;
	max-width:700px;
	margin:0 auto 2.25rem;
	justify-content:flex-start;
    padding-bottom:1.75rem;
}

.about-identity::after{

    content:"";
    position:absolute;
    left:50%;
    bottom:0;
    transform:translateX(-50%);
    width:150px;
    height:3px;
    border-radius:999px;
    background:var(--gradient);
    opacity:.95;
}

.about-photo img{

    height:180px;

    object-fit:cover;

    border-radius:22px;

    border:1px solid rgba(255,255,255,.10);

    background:#111;

}


.about-name h3{
    display:flex;
    align-items:center;
    gap:.15rem;

    font-size:clamp(2.2rem,3vw,3.2rem);

    font-weight:800;
    line-height:.95;
    letter-spacing:-.04em;

    margin-bottom:1rem;
}


.about-name .john{

    color:#fff;
}

.about-name .enslinger{

    background:var(--gradient);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
}

.about-name p{

    display:flex;
    align-items:center;
    gap:.75rem;
}

.about-name p span{

    width:8px;

    height:8px;

    border-radius:50%;

    flex-shrink:0;

    background:var(--gradient);

    box-shadow:0 0 10px rgba(255,0,110,.25);
}


.about-details{

    width:100%;
}

.about-story{

    width:100%;
    max-width:none;
    margin:0 auto;
}

.about-story p{

    color:rgba(255,255,255,.74);

    font-size:1.08rem;
    line-height:1.9;

    margin-bottom:1.75rem;
}


/* ==========================================
   CONNECT
========================================== */

.connect{

    padding:2.5rem 1.5rem 2.5rem;

    border-top:1px solid rgba(255,255,255,.08);

    text-align:center;
}

.connect-container{

    width:100%;
    max-width:1180px;

    margin:0 auto;
}

.connect-eyebrow{

    display:block;

    font-size:.82rem;

    font-weight:800;

    letter-spacing:.22em;

    color:rgba(255,255,255,.55);

    margin-bottom:.9rem;

    text-transform:uppercase;
}

.connect-title{

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

    font-size:clamp(2.3rem,4vw,3.2rem);

    font-weight:900;

    letter-spacing:-.04em;

    margin-bottom:1.25rem;
}

.connect-links{

    display:flex;
    justify-content:center;
    gap:3rem;
    flex-wrap:wrap;

    margin-bottom:1.5rem;
}

.connect-links a{

    color:rgba(255,255,255,.75);

    transition:.3s ease;
}

.connect-links a:hover{

    color:#fff;
}

.connect-socials{

    display:flex;

    justify-content:center;

    gap:1rem;

    flex-wrap:wrap;
}

.connect-socials a{

    position:relative;
    overflow:hidden;

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

    min-width:120px;

    padding:.9rem 1.5rem;

    border-radius:999px;

    border:1px solid rgba(255,255,255,.08);

    background:rgba(255,255,255,.02);

    color:#ffffff;

    transition:
        transform .35s ease,
        background .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;

    isolation:isolate;
}

.connect-socials a::before{

    content:"";

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            110deg,
            transparent 20%,
            rgba(255,255,255,.40) 50%,
            transparent 80%
        );

    transform:translateX(-180%);

    transition:transform .8s ease;

    z-index:0;
}

.connect-socials a span,
.connect-socials a{

    position:relative;

    z-index:1;
}

.connect-socials a:hover{

    transform:translateY(-4px);

    border-color:rgba(255,255,255,.22);
}

.connect-socials a:hover::before{

    transform:translateX(180%);
}

/* Facebook */

.connect-socials a:nth-child(1):hover{

    background:#1877F2;

    box-shadow:
        0 0 28px rgba(24,119,242,.40),
        0 12px 34px rgba(24,119,242,.28);
}

/* Instagram */

.connect-socials a:nth-child(2):hover{

    background:
        linear-gradient(
            135deg,
            #FEDA75,
            #FA7E1E,
            #D62976,
            #962FBF,
            #4F5BD5
        );

    box-shadow:
        0 0 30px rgba(214,41,118,.38),
        0 12px 34px rgba(150,47,191,.26);
}

/* TikTok */

.connect-socials a:nth-child(3):hover{

    background:#010101;

    box-shadow:
        -4px 0 20px rgba(37,244,238,.35),
         4px 0 20px rgba(254,44,85,.35),
         0 12px 30px rgba(0,0,0,.45);
}

/* YouTube */

.connect-socials a:nth-child(4):hover{

    background:#FF0000;

    box-shadow:
        0 0 30px rgba(255,0,0,.38),
        0 12px 34px rgba(255,0,0,.28);
}


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

footer{

    padding:2rem 1.5rem;

    text-align:center;

    color:var(--text-secondary);

    border-top:1px solid rgba(255,255,255,.08);
}

footer p:first-child {

    margin-bottom: .5rem;
}



/* ==========================================
   HONEYPOT
========================================== */

.honeypot {
    display: none;
}

/* ==========================================
   DESKTOP
========================================== */

@media (min-width: 991px) {


    .contact-links {

        flex-direction: row;
        justify-content: center;

        gap: 3rem;
    }
}

#lead-form .honeypot{
    display:none !important;
}

.agency-btn{

    margin-bottom: 0;
    align-self: center;
    position: relative;
    top: -1px;

    padding: 1rem 2.7rem;

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

    min-height: 56px;
    
    font-size: .95rem;

}

/* ---------- MOBILE ------------------------------------------------------------------------------ */

@media (max-width:991px){

.about-photo{

    width:100%;

    max-width:none;

    margin:0 .5rem;
}

.about-photo img{

    width:100%;

    aspect-ratio:1.7 / 1;

    object-fit:cover;

    border-radius:24px;
}

.about-name{

    width:100%;
}


.about-identity{

    display:grid;

    grid-template-columns:1fr;

    justify-items:center;

    gap:1.75rem;

    text-align:center;
}

.about-photo{

    width:100%;

    max-width:340px;

    margin:0 auto;
}
	
.hero{

        grid-template-columns:1fr;

        text-align:center;

        /* Pull the whole hero much closer to the header */
        padding:2.5rem 1.5rem 1rem;

        gap:2.5rem;

        min-height:auto;
    }

.hero-content{

        max-width:100%;

        padding:0;

        margin-top:-.5rem;
    }

.secondary-btn{

        margin-bottom:1.5rem;
    }

    .hero-title{

        margin:0 0 1.5rem;
    }

    .hero-description{

        margin:0 auto 2rem;

        max-width:560px;
    }

    .hero-actions{

    flex-direction:column;

    align-items:center;

    width:100%;

    gap:1rem;

}

.hero-actions .primary-btn,
.hero-actions .agency-btn{

    width:100%;

    max-width:340px;

}

    .contact-section{

        margin-top:0;
	    margin-bottom:0;
	    padding-bottom:0;
    }

    .hero-image{

        min-height:auto;
    }

    .hero-image img{

        width:min(900px,140%);

        transform:none;
    }

    .hero-glow{

    width:500px;
    height:500px;
}

/* About mobile */

.about-name{

    text-align:center;
}

.about-name h3{

    display:flex;
    justify-content:center;
    align-items:center;
    gap:.15rem;

    white-space:nowrap;

    font-size:clamp(2.2rem,8vw,3rem);

    margin-top:-.35rem;
	margin-bottom:.75rem;
}

.about-services p{
    display: flex;
    align-items: center;
    gap: .75rem;

    font-size: 1.35rem;
    line-height: 1.8;
}

.about-name{

    display:flex;
    flex-direction:column;
    align-items:center;
}

}



/* ======================================================================================================
FEATURED WORK
======================================================================================================== */

.demos{

    padding:2rem 0 1.5rem;

    border-top:1px solid rgba(255,255,255,.08);

    position:relative;
}

.section-label{

    display:table;

    margin:0 auto 1.5rem;

    padding:.3rem .85rem;

    border-radius:999px;

    background:rgba(255,255,255,.04);

    border:1px solid rgba(255,255,255,.08);

    font-size:.8rem;

    font-weight:800;

    letter-spacing:.18em;

    text-transform:uppercase;

    color:rgba(255,255,255,.65);
}

.section-heading{

    max-width:760px;

    margin:0 auto;

    text-align:center;
}

.section-heading h2{

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

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

    font-weight:900;

    line-height:.95;

    letter-spacing:-.05em;

    margin:0;
}

.section-description{

    max-width:720px;

    margin:0 auto;

    text-align:center;

    color:rgba(255,255,255,.74);

    font-size:1.08rem;

    line-height:1.9;
}

.section-heading::after{

    content:"";

    display:block;

    width:180px;

    height:4px;

    margin:2.25rem auto 0;

    border-radius:999px;

    background:var(--gradient);

    box-shadow:

        0 0 18px rgba(255,0,110,.22);
}

.section-description{

    max-width:700px;

    margin:2rem auto 0;

    color:rgba(255,255,255,.72);

    font-size:1.15rem;

    line-height:1.9;
}

.demo-list{
    margin:2.5rem 0 0;
}

.demo-item{

    width:100%;
    max-width:1000px;

    margin:0 auto;

    padding:0;

    border-bottom:none;

    margin-bottom:2rem;
}

.demo-item:last-child{

    border-bottom: none;
    margin-bottom: 0;

}

.audio-player-placeholder{

    margin-top:1.5rem;

    height:90px;

    border-radius:18px;

    background:#0B0B0B;

    border:1px solid rgba(255,255,255,.08);

    display:flex;

    align-items:center;

    justify-content:center;

    color:#888;

}

.more-to-explore{
    padding-top:2rem;
    text-align:center;
}

.youtube-buttons{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:1rem;

    margin-top:1.25rem;

}

.demos-container{

    width:100%;
    max-width:1180px;

    margin:0 auto;

    padding:0 8%;
}



.demo-card:hover{

    border-color:rgba(255,255,255,.16);

    box-shadow:
        0 0 0 1px rgba(255,255,255,.04),
        0 16px 40px rgba(0,0,0,.28);

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.06),
            rgba(255,255,255,.03)
        );
}

.demo-info h4{

    font-size:1.2rem;

    font-weight:800;

    margin-bottom:.35rem;
}

.demo-info p{

    color:rgba(255,255,255,.6);

    font-size:.95rem;
}


.demo-header h4{

    font-size:1.45rem;

    font-weight:800;

    margin-bottom:-.02rem;
}

.demo-header p{

    margin-top:.35rem;

    color:rgba(255,255,255,.60);

    line-height:1.7;

    font-size:.95rem;
}

.demo-length{

    color:rgba(255,255,255,.45);

    font-size:.95rem;

    font-weight:700;
}

.demo-item h3{

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

    font-size:2rem;

    margin-bottom:.85rem;
}

.demo-item > p{

    max-width:620px;

    color:rgba(255,255,255,.65);

    margin-bottom:2rem;
}

/* ======================================================================
   FEATURED PLAYER V1
====================================================================== */

.featured-player{

    position:relative;

    display:grid;

    grid-template-columns:96px 1fr;

    grid-template-areas:
        "play content";

    column-gap:2rem;

    align-items:center;

    padding:1.3rem 2.5rem;

    margin-top:0;

    z-index:2;

    border-radius:0 0 24px 24px;

    overflow:hidden;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.075),
            rgba(255,255,255,.03)
        ),
        linear-gradient(
            135deg,
            rgba(255,255,255,.02),
            rgba(255,255,255,0)
        );

    border:1px solid rgba(255,255,255,.10);
    border-top:1px solid rgba(255,255,255,.14);

    backdrop-filter:blur(24px);

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;
}

.featured-player:hover{

    border-color:rgba(255,255,255,.16);


}

.play-btn{

    grid-area:play;

    position:relative;

    width:88px;
    height:88px;

    border:none;
    border-radius:50%;

    cursor:pointer;

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

    flex-shrink:0;

    color:#fff;

    background:
        radial-gradient(
            circle at 30% 25%,
            rgba(255,255,255,.28),
            rgba(255,255,255,0) 38%
        ),
        var(--gradient);

    transition:
        box-shadow .25s ease,
        filter .25s ease,
        transform .25s ease;

    box-shadow:
        0 0 0 1px rgba(255,255,255,.08),
        0 12px 28px rgba(255,0,110,.22),
        0 0 32px rgba(255,0,110,.18);
}

.play-btn:hover{

    filter:brightness(1.08);

    box-shadow:
        0 0 0 1px rgba(255,255,255,.14),
        0 14px 36px rgba(255,0,110,.30),
        0 0 42px rgba(255,0,110,.28);
}

.play-btn:active{

    transform:scale(.96);
}

.play-btn svg{

    width:32px;
    height:32px;

    pointer-events:none;
}

.player-content{

    grid-area:content;

    display:flex;

    flex-direction:column;

    justify-content:center;

    width:100%;
}

.player-content h4{

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

    font-size:1.45rem;

    font-weight:800;

    letter-spacing:.04em;

    text-transform:uppercase;

    line-height:1.1;

    margin:0;
}

.player-content p{

    margin:.1rem 0 .45rem;

    color:rgba(255,255,255,.48);

    font-size:1rem;

    font-weight:500;

    letter-spacing:.02em;
}

.progress-bar{

    position:relative;

    width:100%;

    height:6px;

    border-radius:999px;

    overflow:hidden;

    cursor:pointer;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.08),
            rgba(255,255,255,.04)
        );

    box-shadow:
        inset 0 1px 2px rgba(0,0,0,.35);
}

.progress-fill{

    position:relative;

    width:0%;

    height:100%;

    border-radius:999px;

    background:
        linear-gradient(
            90deg,
            #FFA11A 0%,
            #FF6A3D 45%,
            #FF006E 100%
        );

    transition:width .08s linear;

    box-shadow:
        0 0 10px rgba(255,0,110,.25);
}

.progress-fill::after{

    content:"";

    position:absolute;

    right:-4px;
    top:50%;

    width:10px;
    height:10px;

    transform:translateY(-50%);

    border-radius:50%;

    background:#ffffff;

    box-shadow:
        0 0 12px rgba(255,255,255,.35);
}

.player-transport{

    display:grid;

    grid-template-columns:48px 1fr 48px;

    align-items:center;

    gap:.75rem;

    width:100%;

    margin-top:.5rem;
}

.player-transport::before{

    content:"";

    position:absolute;

    left:0;
    right:0;
    top:0;

    height:1px;

    background:rgba(255,255,255,.04);
}

.player-transport .progress-bar{

    margin:0;
}

.player-transport span{

    min-width:42px;

    font-size:.88rem;

    font-weight:700;

    color:rgba(255,255,255,.55);

    font-variant-numeric:tabular-nums;
}


/* ======================================================================
   DEMO BANNER
====================================================================== */

.demo-banner{

    position:relative;

    height:200px;

    overflow:hidden;

    border-radius:24px 24px 0 0;

    border:1px solid rgba(255,255,255,.08);

    border-bottom:none;

    background:#111;

    box-shadow:
        inset 0 -40px 80px rgba(0,0,0,.18);
}

.demo-banner img{

    width:100%;

    height:100%;

    object-fit:cover;

    object-position:center 85%;

    display:block;

}

.demo-banner:hover img{

    transform:none;

    filter:brightness(1.05);
}

.demo-banner-overlay{

    position:absolute;
    inset:0;

    display:flex;
    flex-direction:column;
    justify-content:space-between;

    padding:1.5rem 2rem 2rem;

    background:
        linear-gradient(
            90deg,
            rgba(5,5,5,.88) 0%,
            rgba(5,5,5,.60) 34%,
            rgba(5,5,5,.16) 66%,
            rgba(5,5,5,0) 100%
        ),
        linear-gradient(
            180deg,
            rgba(5,5,5,.08) 0%,
            rgba(5,5,5,.48) 100%
        );
}

.demo-banner-content h4{

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

    font-size:1.8rem;

    font-weight:900;

    line-height:1;

    letter-spacing:-.05em;

    max-width:560px;

    margin:0 0 .45rem;
}

.demo-category{

    position:relative;

    display:inline-flex;

    align-items:center;
    justify-content:center;

    align-self:flex-start;

    width:auto;

    white-space:nowrap;

    padding:.5rem 1rem;

    border-radius:999px;

    overflow:hidden;

    backdrop-filter:blur(14px);

    border:1px solid transparent;

    background:
        linear-gradient(
            rgba(22,22,22,.78),
            rgba(22,22,22,.48)
        ) padding-box,
        var(--gradient) border-box;

    color:#fff;

    font-size:.8rem;

    font-weight:800;

    letter-spacing:.14em;

    text-transform:uppercase;

    line-height:1;
    
    margin-bottom: 1rem;
}

/* ==========================================
   CATEGORY PILL COLORS
========================================== */

.commercial-pill{

    background:
        linear-gradient(
            135deg,
            #D88A10 0%,
            #B14B0D 45%,
            #8A1838 100%
        );

    border:1px solid #FF9A00;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.12),
        0 0 18px rgba(255,154,0,.18);
}

.music-pill{

    background:
        linear-gradient(
            135deg,
            #3DBF5A 0%,
            #1E8F45 45%,
            #116A35 100%
        );

    border:1px solid #4CFF7B;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.12),
        0 0 18px rgba(76,255,123,.18);
}

.podcast-pill{

    background:
        linear-gradient(
            135deg,
            #42BFFF 0%,
            #2177E6 45%,
            #174EB7 100%
        );

    border:1px solid #6FD7FF;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.12),
        0 0 18px rgba(66,191,255,.18);
}

.sound-pill{

    background:
        linear-gradient(
            135deg,
            #B65CFF 0%,
            #8A36E6 45%,
            #6122C7 100%
        );

    border:1px solid #D277FF;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.12),
        0 0 18px rgba(182,92,255,.18);
}

.demo-category::before{

    content:"";

    position:absolute;

    top:2px;

    left:10%;
    width:80%;

    height:42%;

    border-radius:999px;

    background:
        linear-gradient(
            to bottom,
            rgba(255,255,255,.5),
            rgba(255,255,255,0)
        );

    opacity:.75;

    pointer-events:none;
}

.demo-category::after{

    content:"";

    position:absolute;

    top:-50%;
    left:-140%;

    width:55%;
    height:200%;

    transform:rotate(22deg);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.35),
            transparent
        );

    transition:left .8s ease;
}

.demo-banner:hover .demo-category::after{

    left:180%;
}

.demo-banner-content h4{

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

    font-size:1.8rem;

    font-weight:900;

    line-height:.95;

    letter-spacing:-.04em;

    margin:0 0 .4rem;
}

.demo-banner-content p{

    font-size:.95rem;

    line-height:1.55;

    max-width:460px;

    color:rgba(255,255,255,.82);

    margin:0;
}

@media (max-width:768px){
	
	.legacy-quote-button{

    margin:2rem 0 0;
}

.legacy-quote-button .primary-btn{

    width:100%;

    max-width:320px;
}
	
.legacy-card-text{

    flex:none;

    width:100%;

    margin-bottom:.25rem;

    align-items:center;

    text-align:center;
}


.legacy-label,
.legacy-card h3,
.legacy-card p{

    text-align:center;
}

.legacy-card p{

    margin-bottom:-.35rem;

    line-height:1.45;
}

    .featured-player{

    display:grid;

    grid-template-columns:68px 1fr;

    column-gap:1rem;

    align-items:center;

    padding:1rem;

    text-align:left;
}

    .play-btn{

    width:68px;
    height:68px;

    min-width:68px;
    min-height:68px;

    margin:0;

    align-self:center;
}

.player-content{

    grid-area:content;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:flex-start;

    width:100%;
}

.player-content h4{

    font-size:1.32rem;

    line-height:.95;

    letter-spacing:.02em;

    margin-bottom:.2rem;

    text-align:left;
}

.player-content p{

    font-size:.9rem;

    line-height:1.35;

    margin:.1rem 0 .5rem;

    color:rgba(255,255,255,.58);

    text-align:left;
}

.player-transport{

    display:grid;

    grid-template-columns:36px 1fr 36px;

    align-items:center;

    gap:.45rem;

    width:100%;
}

.player-content{

    grid-area:content;
}

.play-btn{

    grid-area:play;
}

    .demo-banner{

        height:230px;
    }

    .demo-banner-content{

        max-width:100%;

        margin-top:0;

        padding-bottom:0;
       
    }

    .demo-category{

    padding:.42rem 1rem;

    font-size:.68rem;

    letter-spacing:.11em;
}

    .demo-banner-content h4{

        font-size:2.15rem;

        line-height:.92;

        margin-bottom:.55rem;
    }

    .demo-banner-content p{

        font-size:1rem;

        line-height:1.55;

        max-width:100%;
    }
    
    /* ---------- Demo Pills ---------- */

.demo-banner-overlay{

    align-items:flex-start;
    padding:1rem 1rem 1rem;
}

.legacy-card{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:flex-start;

    gap:0;

    padding:2rem 1.5rem 1.35rem;
}

.legacy-action{

    align-self:center;

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

    width:170px !important;
    height:50px !important;

    margin:-.45rem auto 0;

    border-radius:999px !important;

    flex-shrink:0;

    padding:0 20px;

    gap:10px;
}

.legacy-action::before,
.legacy-action::after{
    border-radius:999px;
}

.legacy-action .external-icon{

    display:none;
}

.legacy-action span{

    display:block;

    color:#ffffff;

    font-family:var(--font-body);

    font-size:.92rem;

    font-weight:800;

    letter-spacing:.04em;

    text-transform:uppercase;

    line-height:1;

    white-space:nowrap;

    text-shadow:
        0 1px 2px rgba(0,0,0,.18);
}

}

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

.youtube-btn{

    position:relative;
    overflow:hidden;

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

    min-width:300px;

    padding:1rem 2.5rem;

    border-radius:999px;

    border:1px solid rgba(255,255,255,.18);

    color:#ffffff;

    font-family:var(--font-body);
    font-size:.95rem;
    font-weight:800;

    letter-spacing:.03em;
    text-transform:uppercase;

    text-align:center;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.22),
            rgba(255,255,255,0) 42%
        ),
        linear-gradient(
            135deg,
            #7EF29A 0%,
            #34D399 35%,
            #16A34A 70%,
            #0F7A34 100%
        );

    backdrop-filter:blur(12px);

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        filter .35s ease;

    box-shadow:
        0 0 0 1px rgba(255,255,255,.14),
        0 0 18px rgba(34,197,94,.22),
        0 10px 28px rgba(22,163,74,.28);
}

.youtube-btn::before{

    content:"";

    position:absolute;
    inset:0;

    background:
        linear-gradient(
            110deg,
            transparent 20%,
            rgba(255,255,255,.40) 50%,
            transparent 80%
        );

    transform:translateX(-180%);

    transition:transform .8s ease;
}

.youtube-btn::after{

    content:"";

    position:absolute;

    left:10%;
    right:10%;
    top:2px;

    height:42%;

    border-radius:999px;

    background:
        linear-gradient(
            to bottom,
            rgba(255,255,255,.30),
            rgba(255,255,255,0)
        );

    pointer-events:none;
}

.youtube-btn:hover{

    transform:translateY(-4px) scale(1.02);

    filter:saturate(115%);

    box-shadow:
        0 0 0 1px rgba(255,255,255,.20),
        0 0 26px rgba(34,197,94,.35),
        0 14px 36px rgba(22,163,74,.35);
}

.youtube-btn:hover::before{

    transform:translateX(180%);
}

/* ==========================================
   LEGACY AUDIO CARD
========================================== */

.legacy-card{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:2rem;

    width:100%;

    max-width:1000px;

    margin:0 auto 1rem;

    padding:1.5rem 1.5rem 1.15rem;

    border-radius:22px;

    border:1px solid rgba(255,255,255,.10);

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.06),
            rgba(255,255,255,.02)
        );

    backdrop-filter:blur(18px);

    transition:
        transform .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;
}

.legacy-card:hover{

    border-color:rgba(103,255,165,.45);

    box-shadow:
        0 0 30px rgba(52,211,153,.18);
}

.legacy-card-text{

    flex:1;

    display:flex;
    flex-direction:column;
    align-items:flex-start;

    text-align:left;
}

.legacy-label{
	
	text-align:left;

    display:inline-block;

    margin-bottom:.45rem;

    color:#6EE7B7;

    font-size:.72rem;

    font-weight:800;

    letter-spacing:.18em;

    text-transform:uppercase;
    
     margin-bottom:.2rem;
}

.legacy-card h3{
	
	text-align:left;

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

    font-size:1.65rem;

    font-weight:900;

    line-height:1;

    margin-bottom:.2rem;
}

.legacy-card p{
	
	text-align:left;

    color:rgba(255,255,255,.65);

    line-height:1.7;

    max-width:520px;
}

.legacy-card h3{

    margin-bottom:0;
}

.legacy-label{

    margin-bottom:.15rem;
}

.legacy-card p{

    margin-bottom:0;
    
}

/* ==========================================
   LEGACY ACTION BUTTON
========================================== */

@media (min-width:769px){

    .legacy-action span{

        display:none;
    }

}

.legacy-action{

    position:relative;
    overflow:hidden;

    width:58px;
    height:58px;

    flex-shrink:0;
    align-self:center;

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

    border-radius:50%;

    border:1px solid rgba(255,255,255,.18);

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.22),
            rgba(255,255,255,0) 42%
        ),
        linear-gradient(
            135deg,
            #7EF29A 0%,
            #34D399 35%,
            #16A34A 70%,
            #0F7A34 100%
        );

    backdrop-filter:blur(12px);

    transition:
        border-color .35s ease,
        box-shadow .35s ease,
        filter .35s ease;

    box-shadow:
        0 0 0 1px rgba(255,255,255,.14),
        0 0 18px rgba(34,197,94,.22),
        0 10px 28px rgba(22,163,74,.28);
}

.legacy-action::before{

    content:"";

    position:absolute;
    inset:0;

    background:
        linear-gradient(
            110deg,
            transparent 20%,
            rgba(255,255,255,.40) 50%,
            transparent 80%
        );

    transform:translateX(-180%);

    transition:transform .8s ease;
}

.legacy-action::after{

    content:"";

    position:absolute;

    left:10%;
    right:10%;
    top:2px;

    height:42%;

    border-radius:999px;

    background:
        linear-gradient(
            to bottom,
            rgba(255,255,255,.30),
            rgba(255,255,255,0)
        );

    pointer-events:none;
}

.external-icon{

    width:22px;
    height:22px;

    stroke:#6EE7B7;
    stroke-width:2;

    fill:none;

    stroke-linecap:round;
    stroke-linejoin:round;

    transition:
        transform .35s ease,
        stroke .35s ease;
}

.legacy-card:hover .legacy-action{

    filter:saturate(115%);

    border-color:rgba(255,255,255,.20);

    box-shadow:
        0 0 0 1px rgba(255,255,255,.20),
        0 0 26px rgba(34,197,94,.35),
        0 14px 36px rgba(22,163,74,.35);
}

.legacy-card:hover .legacy-action::before{

    transform:translateX(180%);
}

.legacy-card:hover .external-icon{

    stroke:#ffffff;
}


/* ==========================================
   MOBILE LEGACY CARD SPACING OVERRIDE
========================================== */

@media (max-width:768px){

    .legacy-card{

        padding:1.5rem 1.5rem 1.5rem;
    }

    .legacy-card-text{

        margin-bottom:-1rem;
    }

    .legacy-card p{

        margin-bottom:0;
    }

    .legacy-action{

        margin:0 auto;
    }

}

/* ==========================================
   LEGACY CTA BUTTON
========================================== */

.legacy-quote-button{

    display:flex;

    justify-content:center;

    margin:.25rem 0 0;
}

.legacy-quote-button .primary-btn{

    min-width:240px;
}