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

:root {

    --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;
}

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:
        Inter,
        system-ui,
        sans-serif;
    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;
    justify-content: space-between;
    align-items: center;
    padding: .9rem 1.5rem;
    backdrop-filter: blur(12px);
    background:
        rgba(5,5,5,.7);
    border-bottom:
        1px solid var(--border);
}

.logo {
    font-weight: 900;
    letter-spacing: .08em;
    font-size: 2rem;
}

.logo .john {
    color: white;
}

.logo .enslinger {

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

.quote-btn {

    padding:
        .8rem
        1.4rem;
    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;
    align-items: start;
    gap: 3rem;
	grid-template-columns: 1.2fr 0.8fr;
	max-width: 1180px;
    
    min-height: auto;

    margin: 0 auto;
    padding: .075rem 8% 4rem;

    overflow: hidden;
    isolation: isolate;
}



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

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


.booking-badge{
    display:inline-flex;
    align-items:center;
    padding:.65rem 1.2rem;
    border-radius:999px;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.12);
    box-shadow:0 0 30px rgba(255,0,110,.12);
    letter-spacing:.08em;
    font-size:.8rem;
    font-weight:700;
    margin-bottom:.35rem;
}

.hero-title{

    display:flex;
    flex-direction:column;

    gap:1rem;

    margin:.75rem 0 1.75rem;

    line-height:.88;
}

.hero-line-1{

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

    font-weight:900;

    letter-spacing:-.05em;

    color:#fff;
}

.hero-line-2{

    font-size:clamp(4.5rem,6vw,6.4rem);

    font-weight:900;

    letter-spacing:-.05em;

    line-height:.88;

    background:var(--gradient);

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

.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:column;

    align-items:flex-start;

    gap:1.4rem;
}

.hero-subtext{

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

    font-size:.95rem;
}

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

.primary-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:1rem 2.6rem;

    border-radius:999px;

    background:var(--gradient);

    color:white;

    font-weight:800;

    letter-spacing:.03em;

    transition:all .3s ease;

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

.primary-btn:hover{

    transform:translateY(-4px);

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

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




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

@media (max-width:991px){

    .hero{

        grid-template-columns:1fr;

        text-align:center;

        padding:7rem 1.5rem 5rem;

        gap:3rem;

        min-height:auto;
    }

    .hero-content{

        max-width:100%;

        padding:0;
    }

    .hero-actions{

        align-items:center;
    }

    .hero-image{

        min-height:auto;
    }

    .hero-image img{

        width:min(900px,140%);

        transform:none;
    }

    .hero-glow{

        width:500px;
        height:500px;
    }
}

.contact-section {
    width: 100%;
    max-width: 520px;
    margin: 0;
    justify-self: end;
}

.section-title{
    text-align:left;
    font-size:clamp(2rem,3vw,2.6rem);
    font-weight:900;
    line-height:1.1;
    margin:0 0 .75rem;
}

.contact-card-header{
    margin-bottom:2rem;
}

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

#lead-form {

    display: grid;
    gap: 1rem;
    padding: 40px;
    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;
}

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

    width: 100%;

    padding: 1rem;

    border-radius: 14px;

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

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

    color: white;

    font-size: 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);
}

#lead-form button:hover {

    transform:
        translateY(-2px);

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

.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:90px;
    height:3px;
    margin:1rem 0 0;
    background:var(--gradient);
    border-radius:999px;
}

#lead-form textarea {

    resize: vertical;

    min-height: 180px;
}

#lead-form button {

    border: none;

    cursor: pointer;

    padding: 1rem;

    border-radius: 999px;

    background: var(--gradient);

    color: white;

    font-weight: 700;
}

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

.contact-info {
	padding-bottom: 80px;
    border-bottom: 1px solid rgba(255,255,255,.08);
    text-align: center;
}

.contact-info h2 {

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

    margin-bottom: 2rem;
}

.contact-links {

    display: flex;
    flex-direction: column;

    gap: 1rem;
}

.contact-links a {

    color: var(--text-secondary);

    transition:
        var(--transition);
}

.contact-links a:hover {

    color: white;
}

/* ==========================================
   SOCIALS
========================================== */

.socials {

    text-align: center;
}

.socials h2 {

    margin-bottom: 2rem;
}

.social-grid {

    display: flex;
    flex-wrap: wrap;

    justify-content: center;

    gap: 1rem;
}

.social-grid a {

    padding:
        .9rem
        1.4rem;

    border-radius: 999px;

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

    transition:
        var(--transition);
}

.social-grid a:hover {

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

    transform:
        translateY(-2px);
}

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

footer {

    padding:
        3rem
        1.5rem;

    text-align: center;

    color:
        var(--text-secondary);

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

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;
    }
}