.hyundai-hero, .hyundai-hero * {
    margin:0;
    padding:0;
    box-sizing:border-box;
}
body.page-testdrive {
    font-family:Arial, Helvetica, sans-serif;
    background:#f4f6f8;
    color:#111;
}

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

.hyundai-hero{
    min-height:100vh;
    position:relative;
    overflow:hidden;
    background:#f4f7fb;
}

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

.hyundai-header{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    z-index:10;

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

    padding:22px 6%;

    border-bottom:1px solid rgba(255,255,255,.15);
}

.logo-area{
    display:flex;
    align-items:center;
    gap:15px;
}

.hyundai-logo{
    width:125px;
    height:auto;
}

.logo-divider{
    width:1px;
    height:35px;
    background:rgba(255,255,255,.4);
}

.dealer-name{
    color:#fff;
    font-size:15px;
    font-weight:600;
    letter-spacing:.4px;
}

.header-contact{
    color:#fff;
    font-size:14px;
}

.header-contact strong{
    color:#fff;
}

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

.hero-wrapper{
    width:90%;
    max-width:1400px;
    margin:auto;

    min-height:100vh;

    display:grid;
    grid-template-columns:1fr 440px;

    align-items:center;
    gap:70px;

    padding-top:80px;
}

/* LEFT */

.hero-left{
    color:#fff;
    padding:50px 0;
}

.hero-tag{
    display:inline-flex;
    align-items:center;
    gap:10px;

    background:rgba(255,255,255,.12);
    border:1px solid rgba(255,255,255,.25);

    padding:10px 18px;

    font-size:13px;
    font-weight:600;

    letter-spacing:1.5px;
    text-transform:uppercase;

    margin-bottom:25px;
}

.hero-tag span{
    width:7px;
    height:7px;
    background:#00a8e8;
    border-radius:50%;
}

.hero-left h1{
    font-size:64px;
    line-height:1.03;
    font-weight:700;

    max-width:700px;

    margin-bottom:25px;
}

.hero-left h1 span{
    color:#65c8f5;
}

.hero-description{
    font-size:19px;
    line-height:1.7;

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

    max-width:560px;

    margin-bottom:35px;
}

/* ==============================
   HIGHLIGHTS
============================== */

.hero-highlights{
    display:flex;
    gap:14px;
    flex-wrap:wrap;
}

.highlight{
    display:flex;
    align-items:center;
    gap:10px;

    padding:12px 17px;

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

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

    backdrop-filter:blur(5px);
}

.highlight-icon{
    font-size:19px;
}

.highlight-text{
    font-size:13px;
    color:#fff;
}

/* ==============================
   FORM
============================== */

.form-box{

    background:#fff;

    padding:34px;

    border-radius:3px;

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

    position:relative;

    z-index:5;
}

.form-top{
    margin-bottom:25px;
}

.form-top h2{
    font-size:29px;
    color:#071c35;

    margin-bottom:7px;
}

.form-top p{
    color:#6b7280;
    font-size:13px;
    line-height:1.5;
}

/* blue line */

.form-top-line{
    width:50px;
    height:4px;

    background:#0066a1;

    margin-top:14px;
}

/* ==============================
   INPUTS
============================== */

.input-group{
    margin-bottom:15px;
}

.input-group label{
    display:block;

    font-size:16px;
    font-weight:600;

    color:#263238;

    margin-bottom:6px;
}

.input-group input,
.input-group select,
.input-group textarea{

    width:100%;

    border:1px solid #d8dde3;

    background:#fafbfc;

    padding:0 14px;

    height:47px;

    outline:none;

    font-size:13px;

    color:#222;

    transition:.25s;
}

.input-group textarea{
    height:75px;
    padding-top:12px;
    resize:none;
}

.input-group input:focus,
.input-group select:focus,
.input-group textarea:focus{

    border-color:#0066a1;

    background:#fff;

    box-shadow:0 0 0 3px rgba(0,102,161,.08);
}

/* TWO INPUTS */

.input-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
}

/* ==============================
   PHONE
============================== */

.phone-wrapper{
    display:flex;
}

.phone-code{
    width:58px;

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

    background:#eef2f5;

    border:1px solid #d8dde3;
    border-right:none;

    font-size:13px;
    color:#444;
}

.phone-wrapper input{
    flex:1;
}

/* ==============================
   CONSENT
============================== */

.consent{
    display:flex;
    align-items:flex-start;
    gap:9px;

    margin:15px 0 20px;
}

.consent input{
    margin-top:3px;
}

.consent label{
    font-size:10.5px;
    line-height:1.5;
    color:#6b7280;
}

/* ==============================
   BUTTON
============================== */

.test-drive-btn{

    width:100%;
    height:53px;

    border:none;

    background:#0066a1;

    color:#fff;

    font-size:14px;
    font-weight:700;

    letter-spacing:.8px;

    cursor:pointer;

    transition:.3s;

    position:relative;

    overflow:hidden;
}

.test-drive-btn:hover{
    background:#004f7e;
}

.test-drive-btn::after{
    content:"→";

    margin-left:12px;

    font-size:18px;
}

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

.form-footer{

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

    gap:7px;

    margin-top:15px;

    color:#777;

    font-size:10px;
}

.form-footer span{
    color:#00854a;
    font-size:13px;
}

/* ==============================
   BOTTOM FLOATING SECTION
============================== */

.bottom-strip{

    position:absolute;

    bottom:0;
    left:0;

    width:100%;

    background:rgba(0,20,40,.82);

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

    padding:14px 6%;
}

.bottom-inner{

    max-width:1400px;
    margin:auto;

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

.bottom-item{

    display:flex;
    align-items:center;
    gap:10px;

    color:#fff;

    font-size:12px;
}

.bottom-item strong{
    display:block;
    font-size:13px;
}

.bottom-icon{
    font-size:20px;
}

/* ==============================
   MOBILE
============================== */

@media(max-width:1000px){

    .hyundai-hero{
        background:#f4f7fb;
    }

    .hero-wrapper{

        grid-template-columns:1fr;

        padding-top:130px;
        padding-bottom:100px;

        gap:30px;
    }

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

    .hero-left h1{
        font-size:48px;
        margin-left:auto;
        margin-right:auto;
    }

    .hero-description{
        margin-left:auto;
        margin-right:auto;
    }

    .hero-highlights{
        justify-content:center;
    }

    .form-box{
        width:100%;
        max-width:550px;
        margin:auto;
    }

    .bottom-strip{
        position:relative;
    }

    .bottom-inner{
        flex-wrap:wrap;
        gap:15px;
        justify-content:center;
    }

}

@media(max-width:600px){

    .hyundai-header{
        padding:18px 20px;
    }

    .hyundai-logo{
        width:95px;
    }

    .logo-divider{
        display:none;
    }

    .dealer-name{
        font-size:11px;
    }

    .header-contact{
        display:none;
    }

    .hero-wrapper{
        width:92%;
        padding-top:40px;
    }

    .hero-left{
        padding:25px 0;
    }

    .hero-left h1{
        font-size:36px;
    }

    .hero-description{
        font-size:15px;
    }

    .hero-highlights{
        gap:8px;
    }

    .highlight{
        padding:9px 11px;
    }

    .highlight-text{
        font-size:11px;
    }

    .form-box{
        padding:24px 20px;
    }

    .form-top h2{
        font-size:25px;
    }

    .input-row{
        grid-template-columns:1fr;
        gap:0;
    }

    .bottom-strip{
        display:none;
    }

}
/* REQUIRED STAR */ .input-group label span, .consent label span { color: #d71920; font-weight: 700; } .input-group label small { font-size: 10px; font-weight: 400; color: #888; } /* HONEYPOT */ .hp-field { position: absolute !important; left: -9999px !important; top: -9999px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; } /* INVALID INPUT */ #testDriveForm input:invalid:not(:placeholder-shown), #testDriveForm select:invalid, #testDriveForm textarea:invalid:not(:placeholder-shown) { border-color: #ddd; } /* VALID INPUT */ #testDriveForm input:valid:not(:placeholder-shown), #testDriveForm select:valid, #testDriveForm textarea:valid:not(:placeholder-shown) { border-color: #cfd5da; } /* BUTTON DISABLED */ #submitBtn:disabled { opacity: 0.6; cursor: not-allowed; }

/* Test-drive page refinements */
body.page-testdrive {
    font-family:Inter, "Segoe UI", Arial, sans-serif;
    background:#f4f7fb;
}

.hyundai-hero{
    display:flex;
    flex-direction:column;
    overflow:visible;
    min-height:0;
    background:#f4f7fb;
}

.hyundai-logo{
    display:block;
    width:132px;
    filter:brightness(0) invert(1);
}

.hero-wrapper{
    width:min(90%, 1360px);
    flex:1;
    min-height:0;
    grid-template-columns:minmax(0, 1fr) minmax(390px, 470px);
    gap:clamp(36px, 6vw, 88px);
    padding:clamp(48px, 7vw, 84px) 0;
}

.hero-left h1{
    font-size:clamp(48px, 5.3vw, 76px);
    letter-spacing:-.045em;
}

.hero-left{
    color:#172638;
}

.hero-left h1{
    color:#002c5f;
}

.hero-left h1 span{
    color:#0879b9;
}

.hero-description{
    color:#536579;
}

.hero-tag{
    border-radius:999px;
    border-color:#d9e3ed;
    color:#002c5f;
    background:#fff;
}

.highlight{
    border-radius:12px;
    border-color:#d9e3ed;
    background:#fff;
    box-shadow:0 8px 24px rgba(15,42,71,.06);
}

.highlight-text{
    color:#34465a;
}

.form-box{
    padding:clamp(24px, 3vw, 38px);
    border:1px solid rgba(255,255,255,.72);
    border-radius:20px;
    box-shadow:0 28px 80px rgba(0,12,28,.3);
}

.form-box .input-group{
    display:block;
}

.form-top h2{
    font-size:clamp(27px, 2.2vw, 32px);
    letter-spacing:-.035em;
}

.input-group input,
.input-group select,
.input-group textarea{
    border-radius:10px;
}

.phone-code{
    flex:0 0 58px;
    border-radius:10px 0 0 10px;
}

.phone-wrapper input{
    border-radius:0 10px 10px 0;
}

.test-drive-btn{
    border-radius:10px;
}

.bottom-strip{
    position:relative;
    inset:auto;
    margin-top:auto;
    background:#002c5f;
}

.bottom-inner{
    gap:clamp(24px, 4vw, 64px);
}

.bottom-item{
    flex-wrap:wrap;
}

@media(max-width:1000px){
    .hero-wrapper{
        width:min(92%, 700px);
        grid-template-columns:minmax(0, 1fr);
        gap:28px;
        padding:48px 0 38px;
    }

    .hero-left{
        padding:20px 0 0;
    }

    .form-box{
        max-width:560px;
    }

    .bottom-strip{
        position:relative;
    }
}

@media(max-width:600px){
    .hyundai-header{
        padding:15px 20px;
    }

    .hyundai-logo{
        width:104px;
    }

    .hero-wrapper{
        padding-top:100px;
        padding-bottom:28px;
    }

    .hero-left{
        padding-top:12px;
    }

    .hero-left h1{
        font-size:clamp(36px, 10vw, 46px);
    }

    .hero-description{
        margin-bottom:24px;
    }

    .bottom-strip{
        display:block;
        padding:20px;
    }

    .bottom-inner{
        align-items:flex-start;
        flex-direction:column;
        gap:18px;
    }

    .bottom-item{
        width:100%;
        gap:8px 12px;
        font-size:11px;
    }
}