/* =========================================================
   ROAD WARRIORS
   COMPLETE WEBSITE STYLESHEET
========================================================= */


/* =========================================================
   ROOT
========================================================= */

:root {

    --yellow: #f5c400;

    --black: #080808;
    --black-2: #0b0b0b;
    --black-3: #101010;

    --card: #131313;
    --card-2: #171717;

    --border: #262626;
    --border-light: #333333;

    --white: #ffffff;
    --text: #d4d4d4;
    --muted: #9b9b9b;

    --radius-sm: 10px;
    --radius: 16px;
    --radius-lg: 24px;

    --container: 1240px;

    --transition: 0.3s ease;

    --shadow:
        0 25px 70px rgba(0, 0, 0, 0.35);
}



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

*,
*::before,
*::after {
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {
    margin: 0;
    min-width: 320px;

    background:
        var(--black);

    color:
        var(--white);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    overflow-x: hidden;
}


body.menu-open {
    overflow: hidden;
}


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


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


button,
input,
select,
textarea {
    font: inherit;
}


button {
    cursor: pointer;
}


h1,
h2,
h3,
p {
    margin-top: 0;
}


section {
    position: relative;
}


::selection {
    background: var(--yellow);
    color: var(--black);
}



/* =========================================================
   GLOBAL LAYOUT
========================================================= */

.section-container {

    width:
        min(
            calc(100% - 48px),
            var(--container)
        );

    margin:
        0 auto;
}


section:not(
    .home-hero,
    .car-hero-new,
    .hgv-hero-new,
    .about-hero-new,
    .contact-hero-new
) {
    padding:
        110px 0;
}



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

.eyebrow {

    margin-bottom:
        18px;

    color:
        var(--yellow);

    font-size:
        0.76rem;

    font-weight:
        900;

    letter-spacing:
        0.18em;

    text-transform:
        uppercase;
}


h1,
h2,
h3 {

    margin-bottom:
        18px;

    line-height:
        0.98;

    letter-spacing:
        -0.04em;

    text-transform:
        uppercase;
}


h1 {

    font-size:
        clamp(
            3.8rem,
            8vw,
            8.7rem
        );

    font-weight:
        900;
}


h2 {

    font-size:
        clamp(
            2.4rem,
            5.2vw,
            5.2rem
        );

    font-weight:
        900;
}


h3 {

    font-size:
        clamp(
            1.15rem,
            2vw,
            1.55rem
        );

    font-weight:
        850;
}


h1 span,
h2 span {

    color:
        var(--yellow);
}


p {

    color:
        var(--text);

    font-size:
        1rem;

    line-height:
        1.8;
}


.hero-description {

    max-width:
        650px;

    margin-bottom:
        30px;

    font-size:
        clamp(
            1rem,
            1.7vw,
            1.15rem
        );

    color:
        #dedede;
}


.section-heading {

    max-width:
        720px;

    margin-bottom:
        55px;
}


.section-heading.centred {

    margin-left:
        auto;

    margin-right:
        auto;

    text-align:
        center;
}


.section-heading > p:last-child {

    max-width:
        620px;
}



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

.button {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        52px;

    padding:
        0 28px;

    border:
        1px solid transparent;

    border-radius:
        999px;

    font-size:
        0.82rem;

    font-weight:
        900;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;

    transition:
        transform var(--transition),
        background var(--transition),
        color var(--transition),
        border-color var(--transition),
        box-shadow var(--transition);
}


.button:hover {

    transform:
        translateY(-3px);
}


.button-primary {

    background:
        var(--yellow);

    color:
        var(--black);

    box-shadow:
        0 10px 30px rgba(245, 196, 0, 0.12);
}


.button-primary:hover {

    box-shadow:
        0 16px 38px rgba(245, 196, 0, 0.2);
}


.button-outline {

    border-color:
        rgba(255, 255, 255, 0.32);

    background:
        rgba(255, 255, 255, 0.04);

    color:
        var(--white);

    backdrop-filter:
        blur(10px);
}


.button-outline:hover {

    background:
        var(--white);

    color:
        var(--black);

    border-color:
        var(--white);
}


.text-link {

    display:
        inline-flex;

    gap:
        10px;

    align-items:
        center;

    margin-top:
        8px;

    color:
        var(--white);

    font-size:
        0.82rem;

    font-weight:
        900;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;
}


.text-link span {

    color:
        var(--yellow);

    transition:
        transform var(--transition);
}


.text-link:hover span {

    transform:
        translateX(5px);
}



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

.site-header {

    position:
        absolute;

    top:
        0;

    left:
        0;

    right:
        0;

    z-index:
        50;

    border-bottom:
        1px solid rgba(255, 255, 255, 0.09);

    background:
        linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0.78),
            rgba(0, 0, 0, 0.08)
        );
}


.nav-container {

    width:
        min(
            calc(100% - 48px),
            var(--container)
        );

    min-height:
        92px;

    margin:
        0 auto;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        30px;
}


.brand {

    display:
        flex;

    align-items:
        center;

    flex-shrink:
        0;
}


.brand-logo {

    width:
        165px;

    max-height:
        72px;

    object-fit:
        contain;
}


.nav-links {

    display:
        flex;

    align-items:
        center;

    gap:
        30px;
}


.nav-links a {

    position:
        relative;

    color:
        #f0f0f0;

    font-size:
        0.78rem;

    font-weight:
        800;

    letter-spacing:
        0.06em;

    text-transform:
        uppercase;

    transition:
        color var(--transition);
}


.nav-links a:not(.nav-cta)::after {

    content:
        "";

    position:
        absolute;

    left:
        0;

    bottom:
        -9px;

    width:
        0;

    height:
        2px;

    background:
        var(--yellow);

    transition:
        width var(--transition);
}


.nav-links a:hover,
.nav-links a[aria-current="page"] {

    color:
        var(--yellow);
}


.nav-links a:hover::after,
.nav-links a[aria-current="page"]::after {

    width:
        100%;
}


.nav-cta {

    padding:
        14px 20px;

    border-radius:
        999px;

    background:
        var(--yellow);

    color:
        var(--black) !important;
}


.menu-toggle {

    display:
        none;

    width:
        46px;

    height:
        46px;

    padding:
        0;

    border:
        1px solid rgba(255, 255, 255, 0.14);

    border-radius:
        50%;

    background:
        rgba(255, 255, 255, 0.04);
}


.menu-toggle span {

    display:
        block;

    width:
        18px;

    height:
        2px;

    margin:
        4px auto;

    background:
        var(--white);

    transition:
        0.3s ease;
}


.menu-toggle.menu-open span:nth-child(1) {

    transform:
        translateY(6px)
        rotate(45deg);
}


.menu-toggle.menu-open span:nth-child(2) {

    opacity:
        0;
}


.menu-toggle.menu-open span:nth-child(3) {

    transform:
        translateY(-6px)
        rotate(-45deg);
}



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

.home-hero,
.car-hero-new,
.hgv-hero-new,
.about-hero-new,
.contact-hero-new {

    position:
        relative;

    min-height:
        88vh;

    display:
        flex;

    align-items:
        flex-end;

    overflow:
        hidden;

    background:
        var(--black);
}


.home-hero-media,
.car-hero-media,
.hgv-hero-media,
.about-hero-media,
.contact-hero-media {

    position:
        absolute;

    inset:
        0;
}


.home-hero-image,
.car-hero-image,
.hgv-hero-video-new,
.about-hero-image,
.contact-hero-image {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    transform:
        scale(1.02);

    animation:
        heroZoom 14s ease-out both;
}


.home-hero-image {

    object-position:
        center center;
}


.car-hero-image {

    object-position:
        58% 35%;
}


.about-hero-image,
.contact-hero-image {

    object-position:
        center center;
}


.hgv-hero-video-new {

    object-position:
        center center;
}


.home-hero-overlay,
.car-hero-overlay,
.hgv-hero-overlay-new,
.about-hero-overlay,
.contact-hero-overlay {

    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.93) 0%,
            rgba(0, 0, 0, 0.76) 38%,
            rgba(0, 0, 0, 0.34) 70%,
            rgba(0, 0, 0, 0.22) 100%
        );
}


.home-hero-overlay::after,
.car-hero-overlay::after,
.hgv-hero-overlay-new::after,
.about-hero-overlay::after,
.contact-hero-overlay::after {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            to top,
            var(--black) 0%,
            transparent 36%
        );
}


.home-hero-inner,
.car-hero-inner,
.hgv-hero-inner,
.about-hero-inner,
.contact-hero-inner {

    position:
        relative;

    z-index:
        2;

    width:
        min(
            calc(100% - 48px),
            var(--container)
        );

    margin:
        0 auto;

    padding:
        180px 0 95px;
}


.home-hero-content,
.car-hero-content,
.hgv-hero-content,
.about-hero-content,
.contact-hero-content {

    max-width:
        850px;
}


.home-hero-content h1,
.car-hero-content h1,
.hgv-hero-content h1,
.about-hero-content h1,
.contact-hero-content h1 {

    margin-bottom:
        28px;
}


.hero-actions {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        12px;

    margin-bottom:
        42px;
}


.hero-trust {

    display:
        flex;

    align-items:
        center;

    gap:
        25px;

    flex-wrap:
        wrap;
}


.hero-trust-item {

    display:
        flex;

    flex-direction:
        column;

    gap:
        4px;
}


.hero-trust-item strong {

    color:
        var(--white);

    font-size:
        0.9rem;

    letter-spacing:
        0.08em;
}


.hero-trust-item span {

    color:
        var(--muted);

    font-size:
        0.78rem;
}


.hero-trust-line {

    width:
        1px;

    height:
        32px;

    background:
        rgba(255, 255, 255, 0.18);
}



/* =========================================================
   INTRO SECTION
========================================================= */

.intro-section {

    background:
        var(--black);
}


.intro-layout {

    display:
        grid;

    grid-template-columns:
        1.05fr 0.95fr;

    gap:
        90px;

    align-items:
        start;
}


.intro-heading {

    max-width:
        680px;
}


.intro-copy {

    max-width:
        560px;

    padding-top:
        38px;
}


.intro-copy p {

    font-size:
        1.08rem;
}



/* =========================================================
   HOME TRAINING
========================================================= */

.training-section,
.about-training-section {

    background:
        var(--black-2);

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

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


.training-grid,
.about-training-grid {

    display:
        grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap:
        24px;
}


.training-card,
.about-training-card {

    position:
        relative;

    overflow:
        hidden;

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

    border-radius:
        var(--radius-lg);

    background:
        var(--card);

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


.training-card:hover,
.about-training-card:hover {

    transform:
        translateY(-8px);

    border-color:
        rgba(245, 196, 0, 0.45);

    box-shadow:
        var(--shadow);
}


.training-card-image,
.about-training-image {

    position:
        relative;

    height:
        330px;

    overflow:
        hidden;
}


.training-card-image img,
.about-training-image img {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    transition:
        transform 0.7s ease;
}


.training-card:hover img,
.about-training-card:hover img {

    transform:
        scale(1.045);
}


.training-card-image::after,
.about-training-image::after {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            to top,
            rgba(0, 0, 0, 0.74),
            transparent 55%
        );
}


.training-badge,
.about-training-image > span {

    position:
        absolute;

    z-index:
        2;

    left:
        20px;

    bottom:
        20px;

    padding:
        9px 13px;

    border-radius:
        999px;

    background:
        var(--yellow);

    color:
        var(--black);

    font-size:
        0.7rem;

    font-weight:
        900;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;
}


.training-card-content,
.about-training-content {

    padding:
        32px;
}


.training-card-content p,
.about-training-content p {

    max-width:
        620px;
}


.training-features {

    list-style:
        none;

    padding:
        0;

    margin:
        28px 0;
}


.training-features li {

    position:
        relative;

    padding:
        11px 0 11px 20px;

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

    color:
        var(--text);
}


.training-features li::before {

    content:
        "";

    position:
        absolute;

    left:
        0;

    top:
        18px;

    width:
        6px;

    height:
        6px;

    border-radius:
        50%;

    background:
        var(--yellow);
}


.training-card-footer {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    margin-top:
        28px;
}


.training-number {

    color:
        #444;

    font-size:
        2.6rem;

    font-weight:
        900;
}



/* =========================================================
   WHY / HOME FEATURES
========================================================= */

.why-section,
.about-values-section {

    background:
        var(--black);
}


.why-grid,
.about-values-grid {

    display:
        grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

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

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


.why-item,
.about-value-card {

    min-height:
        270px;

    padding:
        34px 26px;

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

    transition:
        background var(--transition),
        transform var(--transition);
}


.why-item:last-child,
.about-value-card:last-child {

    border-right:
        0;
}


.why-item:hover,
.about-value-card:hover {

    background:
        #101010;

    transform:
        translateY(-4px);
}


.why-number,
.about-value-card > span {

    display:
        inline-block;

    margin-bottom:
        52px;

    color:
        var(--yellow);

    font-size:
        0.78rem;

    font-weight:
        900;

    letter-spacing:
        0.08em;
}



/* =========================================================
   PROCESS
========================================================= */

.process-section {

    background:
        var(--black-2);

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

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


.process-layout {

    display:
        grid;

    grid-template-columns:
        0.9fr 1.1fr;

    gap:
        95px;
}


.process-intro {

    position:
        sticky;

    top:
        120px;

    align-self:
        start;
}


.process-intro p {

    max-width:
        500px;
}


.process-list {

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


.process-item {

    display:
        grid;

    grid-template-columns:
        80px 1fr;

    gap:
        28px;

    padding:
        34px 0;

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

    transition:
        padding-left var(--transition),
        background var(--transition);
}


.process-item:hover {

    padding-left:
        10px;
}


.process-item > span {

    color:
        var(--yellow);

    font-size:
        0.8rem;

    font-weight:
        900;

    letter-spacing:
        0.08em;
}


.process-item h3 {

    margin-bottom:
        8px;
}


.process-item p {

    margin-bottom:
        0;
}



/* =========================================================
   PASSES
========================================================= */

.passes-section {

    background:
        var(--black);
}


.passes-grid {

    display:
        grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap:
        16px;
}


.pass-card {

    position:
        relative;

    aspect-ratio:
        4 / 5;

    overflow:
        hidden;

    border-radius:
        var(--radius);

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

    background:
        var(--card);
}


.pass-card img {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    transition:
        transform 0.6s ease,
        filter 0.6s ease;
}


.pass-card:hover img {

    transform:
        scale(1.06);

    filter:
        brightness(0.8);
}


.pass-overlay {

    position:
        absolute;

    inset:
        auto 0 0 0;

    padding:
        24px 18px 18px;

    background:
        linear-gradient(
            to top,
            rgba(0, 0, 0, 0.9),
            transparent
        );

    color:
        var(--yellow);

    font-size:
        0.8rem;

    font-weight:
        900;

    letter-spacing:
        0.1em;

    transform:
        translateY(10px);

    opacity:
        0;

    transition:
        0.3s ease;
}


.pass-card:hover .pass-overlay {

    opacity:
        1;

    transform:
        translateY(0);
}


.extra-pass {

    display:
        none;
}


.extra-pass.extra-pass-visible {

    display:
        block;

    animation:
        passShow 0.55s ease both;
}


.passes-button-wrap {

    display:
        flex;

    justify-content:
        center;

    margin-top:
        42px;
}


.button-hide {

    display:
        none !important;
}



/* =========================================================
   AREAS
========================================================= */

.areas-section {

    background:
        var(--black-3);

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

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


.areas-layout {

    display:
        grid;

    grid-template-columns:
        0.9fr 1.1fr;

    gap:
        90px;

    align-items:
        center;
}


.areas-description {

    max-width:
        480px;
}


.areas-list {

    display:
        grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

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


.areas-list span {

    padding:
        21px 14px;

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

    color:
        #e6e6e6;

    font-weight:
        800;

    text-transform:
        uppercase;

    letter-spacing:
        0.05em;
}


.areas-list span:nth-child(odd) {

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



/* =========================================================
   FAQ
========================================================= */

.faq-section-new {

    background:
        var(--black);
}


.faq-layout {

    display:
        grid;

    grid-template-columns:
        0.82fr 1.18fr;

    gap:
        90px;
}


.faq-list-new {

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


.faq-list-new details {

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


.faq-list-new summary {

    position:
        relative;

    list-style:
        none;

    padding:
        25px 48px 25px 0;

    color:
        var(--white);

    font-weight:
        800;

    cursor:
        pointer;
}


.faq-list-new summary::-webkit-details-marker {

    display:
        none;
}


.faq-list-new summary::after {

    content:
        "+";

    position:
        absolute;

    right:
        6px;

    top:
        50%;

    transform:
        translateY(-50%);

    color:
        var(--yellow);

    font-size:
        1.7rem;

    font-weight:
        300;

    transition:
        transform 0.3s ease;
}


.faq-list-new details[open] summary::after {

    transform:
        translateY(-50%)
        rotate(45deg);
}


.faq-list-new details p {

    max-width:
        700px;

    padding:
        0 55px 24px 0;

    margin:
        0;
}



/* =========================================================
   FINAL CTA
========================================================= */

.final-cta {

    background:
        var(--black);
}


.final-cta-box {

    position:
        relative;

    overflow:
        hidden;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        45px;

    padding:
        60px;

    border:
        1px solid rgba(245, 196, 0, 0.24);

    border-radius:
        var(--radius-lg);

    background:
        linear-gradient(
            135deg,
            #151515,
            #0d0d0d
        );

    box-shadow:
        var(--shadow);
}


.final-cta-box::before {

    content:
        "";

    position:
        absolute;

    width:
        280px;

    height:
        280px;

    right:
        -120px;

    top:
        -120px;

    border-radius:
        50%;

    background:
        rgba(245, 196, 0, 0.1);

    filter:
        blur(20px);
}


.final-cta-box > * {

    position:
        relative;

    z-index:
        2;
}


.final-cta-box h2 {

    margin-bottom:
        0;

    max-width:
        740px;
}


.final-cta-actions {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        12px;

    flex-shrink:
        0;
}



/* =========================================================
   CAR LESSON CHOICE
========================================================= */

.training-options-section {

    background:
        var(--black-2);

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

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


.lesson-choice-grid {

    display:
        grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap:
        24px;
}


.lesson-choice-card {

    position:
        relative;

    min-height:
        100%;

    padding:
        42px;

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

    border-radius:
        var(--radius-lg);

    background:
        linear-gradient(
            150deg,
            #171717,
            #101010
        );

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


.lesson-choice-card:hover {

    transform:
        translateY(-7px);

    border-color:
        rgba(245, 196, 0, 0.45);

    box-shadow:
        var(--shadow);
}


.featured-choice {

    border-color:
        rgba(245, 196, 0, 0.24);
}


.lesson-choice-top {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    margin-bottom:
        55px;
}


.lesson-choice-number {

    color:
        #555;

    font-size:
        2rem;

    font-weight:
        900;
}


.lesson-choice-label {

    padding:
        8px 11px;

    border-radius:
        999px;

    background:
        rgba(245, 196, 0, 0.1);

    color:
        var(--yellow);

    font-size:
        0.7rem;

    font-weight:
        900;

    letter-spacing:
        0.08em;
}


.clean-list {

    list-style:
        none;

    padding:
        0;

    margin:
        32px 0;
}


.clean-list li {

    position:
        relative;

    padding:
        12px 0 12px 21px;

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

    color:
        var(--text);
}


.clean-list li::before {

    content:
        "";

    position:
        absolute;

    left:
        0;

    top:
        19px;

    width:
        6px;

    height:
        6px;

    border-radius:
        50%;

    background:
        var(--yellow);
}



/* =========================================================
   CAR PRICING
========================================================= */

.pricing-section-new {

    background:
        var(--black);
}


.pricing-heading-new {

    display:
        flex;

    align-items:
        end;

    justify-content:
        space-between;

    gap:
        60px;

    margin-bottom:
        50px;
}


.pricing-heading-new > p {

    max-width:
        390px;
}


.pricing-grid-new {

    display:
        grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap:
        24px;
}


.pricing-card-new {

    position:
        relative;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        space-between;

    min-height:
        470px;

    padding:
        40px;

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

    border-radius:
        var(--radius-lg);

    background:
        #111;

    overflow:
        hidden;

    transition:
        0.4s ease;
}


.pricing-card-new:hover {

    transform:
        translateY(-8px);

    border-color:
        rgba(245, 196, 0, 0.42);

    box-shadow:
        var(--shadow);
}


.featured-pricing-card {

    background:
        linear-gradient(
            145deg,
            #171717,
            #0f0f0f
        );

    border-color:
        rgba(245, 196, 0, 0.28);
}


.pricing-label {

    display:
        inline-block;

    margin-bottom:
        13px;

    color:
        var(--muted);

    font-size:
        0.72rem;

    font-weight:
        900;

    letter-spacing:
        0.08em;
}


.price-display,
.hgv-main-price {

    margin:
        30px 0;

    color:
        var(--yellow);

    font-size:
        clamp(
            4rem,
            8vw,
            7rem
        );

    line-height:
        0.95;

    font-weight:
        900;

    letter-spacing:
        -0.06em;
}


.best-value {

    position:
        absolute;

    right:
        22px;

    top:
        22px;

    padding:
        9px 13px;

    border-radius:
        999px;

    background:
        var(--yellow);

    color:
        var(--black);

    font-size:
        0.67rem;

    font-weight:
        900;

    letter-spacing:
        0.08em;
}



/* =========================================================
   INTENSIVE
========================================================= */

.intensive-section-new {

    background:
        var(--black-2);

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

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


.intensive-box-new {

    display:
        grid;

    grid-template-columns:
        1fr 0.85fr;

    gap:
        90px;

    padding:
        58px;

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

    border-radius:
        var(--radius-lg);

    background:
        linear-gradient(
            135deg,
            #141414,
            #0d0d0d
        );
}


.intensive-content-new {

    align-self:
        center;
}



/* =========================================================
   INCLUDED
========================================================= */

.included-section-new {

    background:
        var(--black);
}


.included-grid-new {

    display:
        grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

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

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


.included-item-new {

    min-height:
        280px;

    padding:
        32px 26px;

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

    transition:
        background var(--transition),
        transform var(--transition);
}


.included-item-new:last-child {

    border-right:
        0;
}


.included-item-new:hover {

    background:
        #101010;

    transform:
        translateY(-4px);
}


.included-item-new > span {

    display:
        inline-block;

    margin-bottom:
        55px;

    color:
        var(--yellow);

    font-size:
        0.76rem;

    font-weight:
        900;
}



/* =========================================================
   SKILLS
========================================================= */

.skills-section-new,
.about-approach-section {

    background:
        var(--black-2);

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

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


.skills-layout {

    display:
        grid;

    grid-template-columns:
        0.88fr 1.12fr;

    gap:
        95px;
}


.skills-heading {

    max-width:
        560px;
}


.skills-list {

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


.skills-list article {

    display:
        grid;

    grid-template-columns:
        75px 1fr;

    gap:
        25px;

    padding:
        30px 0;

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

    transition:
        padding-left var(--transition);
}


.skills-list article:hover {

    padding-left:
        10px;
}


.skills-list article > span {

    color:
        var(--yellow);

    font-size:
        0.76rem;

    font-weight:
        900;
}


.skills-list h3 {

    margin-bottom:
        8px;
}


.skills-list p {

    margin-bottom:
        0;
}



/* =========================================================
   HGV COURSE
========================================================= */

.hgv-course-new {

    background:
        var(--black-2);

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

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


.hgv-course-heading {

    max-width:
        720px;

    margin-bottom:
        55px;
}


.hgv-price-layout {

    display:
        grid;

    grid-template-columns:
        0.82fr 1.18fr;

    gap:
        24px;
}


.hgv-price-panel {

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    min-height:
        560px;

    padding:
        44px;

    border:
        1px solid rgba(245, 196, 0, 0.22);

    border-radius:
        var(--radius-lg);

    background:
        linear-gradient(
            150deg,
            #171717,
            #0d0d0d
        );
}


.hgv-course-features {

    display:
        grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap:
        18px;
}


.hgv-stat-card {

    min-height:
        270px;

    padding:
        30px;

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

    border-radius:
        var(--radius);

    background:
        var(--card);

    transition:
        transform 0.35s ease,
        border-color 0.35s ease,
        background 0.35s ease;
}


.hgv-stat-card:hover {

    transform:
        translateY(-6px);

    border-color:
        rgba(245, 196, 0, 0.38);

    background:
        #171717;
}


.hgv-stat-number {

    display:
        inline-block;

    margin-bottom:
        30px;

    color:
        #555;

    font-size:
        0.78rem;

    font-weight:
        900;
}


.hgv-stat-card > strong {

    display:
        block;

    margin-bottom:
        10px;

    color:
        var(--yellow);

    font-size:
        1.9rem;

    font-weight:
        900;
}



/* =========================================================
   HGV FEATURE BAND
========================================================= */

.hgv-feature-band {

    background:
        var(--black);
}


.hgv-feature-grid {

    display:
        grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

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

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


.hgv-feature-item {

    min-height:
        300px;

    padding:
        34px 25px;

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

    transition:
        background var(--transition);
}


.hgv-feature-item:last-child {

    border-right:
        0;
}


.hgv-feature-item:hover {

    background:
        #101010;
}


.hgv-feature-item > span {

    display:
        block;

    margin-bottom:
        70px;

    color:
        var(--yellow);

    font-size:
        0.72rem;

    font-weight:
        900;

    letter-spacing:
        0.08em;
}



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

.contact-main-section {

    background:
        var(--black);
}


.contact-main-grid {

    display:
        grid;

    grid-template-columns:
        0.85fr 1.15fr;

    gap:
        95px;
}


.contact-intro-new {

    max-width:
        520px;

    margin-bottom:
        42px;
}


.contact-lines {

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


.contact-line {

    display:
        grid;

    grid-template-columns:
        105px 1fr;

    gap:
        20px;

    padding:
        26px 0;

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


.contact-line-label {

    color:
        var(--yellow);

    font-size:
        0.69rem;

    font-weight:
        900;

    letter-spacing:
        0.08em;
}


.contact-line h3 {

    margin-bottom:
        6px;
}


.contact-line p {

    margin-bottom:
        0;
}


.contact-line a {

    color:
        var(--white);

    font-size:
        0.78rem;

    font-weight:
        800;

    letter-spacing:
        0.06em;
}


.contact-help-new {

    margin-top:
        42px;

    padding:
        28px;

    border-left:
        3px solid var(--yellow);

    background:
        #111;
}


.contact-form-new {

    padding:
        42px;

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

    border-radius:
        var(--radius-lg);

    background:
        linear-gradient(
            150deg,
            #151515,
            #0e0e0e
        );

    box-shadow:
        var(--shadow);
}


.contact-form-heading {

    margin-bottom:
        35px;
}


.premium-form {

    display:
        flex;

    flex-direction:
        column;

    gap:
        20px;
}


.form-row {

    display:
        grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap:
        16px;
}


.form-field {

    display:
        flex;

    flex-direction:
        column;

    gap:
        9px;
}


.form-field label {

    color:
        #eeeeee;

    font-size:
        0.75rem;

    font-weight:
        800;

    letter-spacing:
        0.05em;

    text-transform:
        uppercase;
}


.form-field input,
.form-field select,
.form-field textarea {

    width:
        100%;

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

    border-radius:
        12px;

    background:
        #0d0d0d;

    color:
        var(--white);

    outline:
        none;

    transition:
        border-color var(--transition),
        background var(--transition),
        box-shadow var(--transition);
}


.form-field input,
.form-field select {

    height:
        54px;

    padding:
        0 16px;
}


.form-field textarea {

    min-height:
        160px;

    resize:
        vertical;

    padding:
        15px 16px;
}


.form-field input::placeholder,
.form-field textarea::placeholder {

    color:
        #6f6f6f;
}


.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {

    border-color:
        var(--yellow);

    background:
        #101010;

    box-shadow:
        0 0 0 3px rgba(245, 196, 0, 0.08);
}


.form-submit-new {

    width:
        100%;

    border:
        0;

    margin-top:
        5px;
}


.form-note-new {

    margin:
        0;

    text-align:
        center;

    color:
        var(--muted);

    font-size:
        0.76rem;
}



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

.contact-training-section {

    background:
        var(--black-2);

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

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


.contact-training-grid-new {

    display:
        grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

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

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


.contact-training-item {

    min-height:
        300px;

    padding:
        30px 24px;

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

    transition:
        background var(--transition),
        transform var(--transition);
}


.contact-training-item:last-child {

    border-right:
        0;
}


.contact-training-item:hover {

    background:
        #111;

    transform:
        translateY(-4px);
}


.contact-training-item > span {

    display:
        inline-block;

    margin-bottom:
        55px;

    color:
        var(--yellow);

    font-size:
        0.76rem;

    font-weight:
        900;
}



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

.site-footer {

    padding:
        75px 0 28px;

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

    background:
        #050505;
}


.footer-top {

    display:
        grid;

    grid-template-columns:
        0.95fr 1.05fr;

    gap:
        100px;

    padding-bottom:
        55px;
}


.footer-brand {

    max-width:
        420px;
}


.footer-logo {

    width:
        180px;

    margin-bottom:
        20px;
}


.footer-links {

    display:
        grid;

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

    gap:
        30px;
}


.footer-links div {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-start;

    gap:
        12px;
}


.footer-links h3 {

    margin-bottom:
        8px;

    color:
        var(--yellow);

    font-size:
        0.72rem;

    letter-spacing:
        0.09em;
}


.footer-links a {

    color:
        var(--muted);

    font-size:
        0.86rem;

    transition:
        color var(--transition),
        transform var(--transition);
}


.footer-links a:hover {

    color:
        var(--white);

    transform:
        translateX(3px);
}


.footer-bottom {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        25px;

    padding-top:
        24px;

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


.footer-bottom p,
.footer-bottom a {

    margin:
        0;

    color:
        #737373;

    font-size:
        0.76rem;
}



/* =========================================================
   FLOATING WHATSAPP
========================================================= */

.floating-whatsapp {

    position:
        fixed;

    right:
        22px;

    bottom:
        22px;

    z-index:
        60;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    min-width:
        110px;

    height:
        46px;

    padding:
        0 18px;

    border:
        1px solid rgba(255, 255, 255, 0.14);

    border-radius:
        999px;

    background:
        var(--yellow);

    color:
        var(--black);

    font-size:
        0.72rem;

    font-weight:
        900;

    letter-spacing:
        0.06em;

    box-shadow:
        0 15px 35px rgba(0, 0, 0, 0.4);

    transition:
        transform var(--transition),
        box-shadow var(--transition);
}


.floating-whatsapp:hover {

    transform:
        translateY(-4px);

    box-shadow:
        0 20px 42px rgba(0, 0, 0, 0.5);
}



/* =========================================================
   SCROLL ANIMATIONS
========================================================= */

[data-reveal] {

    opacity:
        0;

    transition:
        opacity 0.8s ease,
        transform 0.8s cubic-bezier(
            0.22,
            1,
            0.36,
            1
        );

    will-change:
        transform,
        opacity;
}


.reveal-up {

    transform:
        translateY(42px);
}


.reveal-left {

    transform:
        translateX(-45px);
}


.reveal-right {

    transform:
        translateX(45px);
}


[data-reveal].is-visible {

    opacity:
        1;

    transform:
        translate3d(0, 0, 0);
}


.reveal-pass {

    opacity:
        0;

    transform:
        translateY(25px);

    transition:
        opacity 0.6s ease,
        transform 0.6s ease;
}


.reveal-pass.pass-visible {

    opacity:
        1;

    transform:
        translateY(0);
}



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

.home-hero-content > *,
.car-hero-content > *,
.hgv-hero-content > *,
.about-hero-content > *,
.contact-hero-content > * {

    animation:
        heroContentIn 0.8s ease both;
}


.home-hero-content > *:nth-child(1),
.car-hero-content > *:nth-child(1),
.hgv-hero-content > *:nth-child(1),
.about-hero-content > *:nth-child(1),
.contact-hero-content > *:nth-child(1) {

    animation-delay:
        0.08s;
}


.home-hero-content > *:nth-child(2),
.car-hero-content > *:nth-child(2),
.hgv-hero-content > *:nth-child(2),
.about-hero-content > *:nth-child(2),
.contact-hero-content > *:nth-child(2) {

    animation-delay:
        0.16s;
}


.home-hero-content > *:nth-child(3),
.car-hero-content > *:nth-child(3),
.hgv-hero-content > *:nth-child(3),
.about-hero-content > *:nth-child(3),
.contact-hero-content > *:nth-child(3) {

    animation-delay:
        0.24s;
}


.home-hero-content > *:nth-child(4),
.car-hero-content > *:nth-child(4),
.hgv-hero-content > *:nth-child(4),
.about-hero-content > *:nth-child(4),
.contact-hero-content > *:nth-child(4) {

    animation-delay:
        0.32s;
}


.home-hero-content > *:nth-child(5),
.car-hero-content > *:nth-child(5),
.hgv-hero-content > *:nth-child(5),
.about-hero-content > *:nth-child(5),
.contact-hero-content > *:nth-child(5) {

    animation-delay:
        0.4s;
}



/* =========================================================
   KEYFRAMES
========================================================= */

@keyframes heroZoom {

    from {
        transform:
            scale(1.08);
    }

    to {
        transform:
            scale(1.02);
    }

}


@keyframes heroContentIn {

    from {
        opacity:
            0;

        transform:
            translateY(28px);
    }

    to {
        opacity:
            1;

        transform:
            translateY(0);
    }

}


@keyframes passShow {

    from {
        opacity:
            0;

        transform:
            translateY(22px)
            scale(0.98);
    }

    to {
        opacity:
            1;

        transform:
            translateY(0)
            scale(1);
    }

}



/* =========================================================
   ACCESSIBILITY
========================================================= */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {

    outline:
        3px solid rgba(245, 196, 0, 0.55);

    outline-offset:
        4px;
}



/* =========================================================
   TABLET
========================================================= */

@media
(max-width: 1000px) {


    section:not(
        .home-hero,
        .car-hero-new,
        .hgv-hero-new,
        .about-hero-new,
        .contact-hero-new
    ) {

        padding:
            90px 0;
    }


    .nav-links {

        gap:
            20px;
    }


    .nav-links a {

        font-size:
            0.72rem;
    }


    .intro-layout,
    .process-layout,
    .skills-layout,
    .faq-layout,
    .areas-layout,
    .contact-main-grid,
    .intensive-box-new,
    .hgv-price-layout {

        gap:
            55px;
    }


    .why-grid,
    .included-grid-new,
    .hgv-feature-grid,
    .about-values-grid,
    .contact-training-grid-new {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .why-item:nth-child(2),
    .about-value-card:nth-child(2),
    .included-item-new:nth-child(2),
    .hgv-feature-item:nth-child(2),
    .contact-training-item:nth-child(2) {

        border-right:
            0;
    }


    .why-item:nth-child(-n + 2),
    .about-value-card:nth-child(-n + 2),
    .included-item-new:nth-child(-n + 2),
    .hgv-feature-item:nth-child(-n + 2),
    .contact-training-item:nth-child(-n + 2) {

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


    .passes-grid {

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


    .footer-top {

        gap:
            60px;
    }

}



/* =========================================================
   MOBILE NAV + TABLET STACK
========================================================= */

@media
(max-width: 820px) {


    .section-container,
    .nav-container,
    .home-hero-inner,
    .car-hero-inner,
    .hgv-hero-inner,
    .about-hero-inner,
    .contact-hero-inner {

        width:
            min(
                calc(100% - 34px),
                var(--container)
            );
    }


    .site-header {

        background:
            rgba(5, 5, 5, 0.88);

        backdrop-filter:
            blur(18px);
    }


    .nav-container {

        min-height:
            78px;
    }


    .brand-logo {

        width:
            135px;
    }


    .menu-toggle {

        display:
            block;

        position:
            relative;

        z-index:
            75;
    }


    .nav-links {

        position:
            fixed;

        inset:
            0;

        z-index:
            70;

        display:
            flex;

        flex-direction:
            column;

        justify-content:
            center;

        align-items:
            center;

        gap:
            26px;

        padding:
            100px 30px 40px;

        background:
            rgba(5, 5, 5, 0.98);

        opacity:
            0;

        visibility:
            hidden;

        transform:
            translateY(-12px);

        transition:
            opacity 0.3s ease,
            transform 0.3s ease,
            visibility 0.3s ease;
    }


    .nav-links.nav-open {

        opacity:
            1;

        visibility:
            visible;

        transform:
            translateY(0);
    }


    .nav-links a {

        font-size:
            1.15rem;
    }


    .nav-cta {

        padding:
            15px 24px;
    }


    .home-hero,
    .car-hero-new,
    .hgv-hero-new,
    .about-hero-new,
    .contact-hero-new {

        min-height:
            760px;
    }


    .home-hero-inner,
    .car-hero-inner,
    .hgv-hero-inner,
    .about-hero-inner,
    .contact-hero-inner {

        padding:
            155px 0 70px;
    }


    .car-hero-image {

        object-position:
            63% 30%;
    }


    .home-hero-overlay,
    .car-hero-overlay,
    .hgv-hero-overlay-new,
    .about-hero-overlay,
    .contact-hero-overlay {

        background:
            linear-gradient(
                90deg,
                rgba(0, 0, 0, 0.9) 0%,
                rgba(0, 0, 0, 0.65) 100%
            );
    }


    .intro-layout,
    .process-layout,
    .skills-layout,
    .faq-layout,
    .areas-layout,
    .contact-main-grid,
    .intensive-box-new,
    .hgv-price-layout {

        grid-template-columns:
            1fr;

        gap:
            48px;
    }


    .intro-copy {

        padding-top:
            0;
    }


    .training-grid,
    .about-training-grid,
    .lesson-choice-grid,
    .pricing-grid-new {

        grid-template-columns:
            1fr;
    }


    .training-card-image,
    .about-training-image {

        height:
            290px;
    }


    .process-intro {

        position:
            static;
    }


    .passes-grid {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .pricing-heading-new {

        flex-direction:
            column;

        align-items:
            flex-start;

        gap:
            16px;
    }


    .hgv-course-features {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .contact-form-new {

        padding:
            32px;
    }


    .footer-top {

        grid-template-columns:
            1fr;

        gap:
            45px;
    }


    .footer-links {

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


    .final-cta-box {

        flex-direction:
            column;

        align-items:
            flex-start;

        padding:
            42px;
    }

}



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

@media
(max-width: 600px) {


    section:not(
        .home-hero,
        .car-hero-new,
        .hgv-hero-new,
        .about-hero-new,
        .contact-hero-new
    ) {

        padding:
            72px 0;
    }


    .section-container,
    .nav-container,
    .home-hero-inner,
    .car-hero-inner,
    .hgv-hero-inner,
    .about-hero-inner,
    .contact-hero-inner {

        width:
            min(
                calc(100% - 28px),
                var(--container)
            );
    }


    h1 {

        font-size:
            clamp(
                3.1rem,
                16vw,
                5rem
            );
    }


    h2 {

        font-size:
            clamp(
                2.2rem,
                11vw,
                3.6rem
            );
    }


    .home-hero,
    .car-hero-new,
    .hgv-hero-new,
    .about-hero-new,
    .contact-hero-new {

        min-height:
            720px;
    }


    .home-hero-inner,
    .car-hero-inner,
    .hgv-hero-inner,
    .about-hero-inner,
    .contact-hero-inner {

        padding:
            145px 0 55px;
    }


    .home-hero-image {

        object-position:
            58% center;
    }


    .car-hero-image {

        object-position:
            66% 28%;
    }


    .hero-actions {

        flex-direction:
            column;

        align-items:
            stretch;
    }


    .hero-actions .button {

        width:
            100%;
    }


    .hero-trust {

        gap:
            15px;
    }


    .hero-trust-line {

        display:
            none;
    }


    .hero-trust-item {

        width:
            calc(50% - 8px);
    }


    .training-card-content,
    .about-training-content,
    .lesson-choice-card,
    .pricing-card-new,
    .hgv-price-panel {

        padding:
            28px;
    }


    .why-grid,
    .about-values-grid,
    .included-grid-new,
    .hgv-feature-grid,
    .contact-training-grid-new {

        grid-template-columns:
            1fr;
    }


    .why-item,
    .about-value-card,
    .included-item-new,
    .hgv-feature-item,
    .contact-training-item {

        min-height:
            auto;

        border-right:
            0 !important;

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


    .why-item:last-child,
    .about-value-card:last-child,
    .included-item-new:last-child,
    .hgv-feature-item:last-child,
    .contact-training-item:last-child {

        border-bottom:
            0 !important;
    }


    .process-item,
    .skills-list article {

        grid-template-columns:
            52px 1fr;

        gap:
            14px;
    }


    .passes-grid {

        grid-template-columns:
            1fr 1fr;

        gap:
            10px;
    }


    .areas-list {

        grid-template-columns:
            1fr;
    }


    .areas-list span {

        border-right:
            0 !important;
    }


    .intensive-box-new {

        padding:
            30px;
    }


    .hgv-course-features {

        grid-template-columns:
            1fr;
    }


    .hgv-stat-card {

        min-height:
            auto;
    }


    .form-row {

        grid-template-columns:
            1fr;
    }


    .contact-form-new {

        padding:
            26px 20px;
    }


    .contact-line {

        grid-template-columns:
            80px 1fr;
    }


    .footer-links {

        grid-template-columns:
            1fr 1fr;

        gap:
            32px 18px;
    }


    .footer-bottom {

        flex-direction:
            column;

        align-items:
            flex-start;
    }


    .final-cta-box {

        padding:
            30px 24px;
    }


    .final-cta-actions {

        width:
            100%;

        flex-direction:
            column;
    }


    .final-cta-actions .button {

        width:
            100%;
    }


    .floating-whatsapp {

        right:
            14px;

        bottom:
            14px;

        min-width:
            96px;

        height:
            42px;

        padding:
            0 15px;
    }

}



/* =========================================================
   VERY SMALL PHONES
========================================================= */

@media
(max-width: 400px) {


    .passes-grid {

        grid-template-columns:
            1fr;
    }


    .footer-links {

        grid-template-columns:
            1fr;
    }


    .hero-trust-item {

        width:
            100%;
    }


    .contact-line {

        grid-template-columns:
            1fr;

        gap:
            7px;
    }

}



/* =========================================================
   REDUCED MOTION
========================================================= */

@media
(prefers-reduced-motion: reduce) {


    html {
        scroll-behavior:
            auto;
    }


    *,
    *::before,
    *::after {

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            0.01ms !important;

        scroll-behavior:
            auto !important;
    }


    [data-reveal],
    .reveal-pass {

        opacity:
            1 !important;

        transform:
            none !important;
    }

}
.button {
    position: relative;
    overflow: hidden;
}

.button-ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.35);
    transform: scale(0);
    pointer-events: none;
    animation: buttonRipple 0.65s ease-out;
}

@keyframes buttonRipple {
    to {
        transform: scale(1);
        opacity: 0;
    }
}
/* =========================================================
   MOBILE POLISH — PHONE SAFE LAYOUT
========================================================= */

@media (max-width: 600px) {

    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: clip;
    }

    /* ALL PAGE HEROES */
    .home-hero,
    .car-hero-new,
    .hgv-hero-new,
    .about-hero-new,
    .contact-hero-new {
        min-height: max(680px, 100svh);
    }

    .home-hero-inner,
    .car-hero-inner,
    .hgv-hero-inner,
    .about-hero-inner,
    .contact-hero-inner {
        width: calc(100% - 32px);
        padding: 130px 0 46px;
    }

    .home-hero-content,
    .car-hero-content,
    .hgv-hero-content,
    .about-hero-content,
    .contact-hero-content {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    /* HERO HEADINGS */
    .home-hero-content h1,
    .car-hero-content h1,
    .hgv-hero-content h1,
    .about-hero-content h1,
    .contact-hero-content h1 {
        max-width: 100%;
        font-size: clamp(2.65rem, 12vw, 4.15rem);
        line-height: 0.96;
        letter-spacing: -0.045em;
        overflow-wrap: normal;
        word-break: normal;
    }

    /* LONG CAR + HGV LOCATION HEADINGS */
    .car-hero-content h1,
    .hgv-hero-content h1 {
        font-size: clamp(2.35rem, 10.6vw, 3.65rem);
    }

    .home-hero-content h1 span,
    .car-hero-content h1 span,
    .hgv-hero-content h1 span,
    .about-hero-content h1 span,
    .contact-hero-content h1 span {
        display: block;
    }

    .eyebrow {
        max-width: 100%;
        font-size: 0.69rem;
        line-height: 1.45;
        letter-spacing: 0.14em;
    }

    .hero-description {
        max-width: 100%;
        font-size: 0.98rem;
        line-height: 1.65;
    }

    /* HERO BUTTONS */
    .hero-actions {
        width: 100%;
        gap: 10px;
        margin-bottom: 30px;
    }

    .hero-actions .button {
        min-height: 50px;
        padding: 0 18px;
        white-space: normal;
        text-align: center;
    }

    /* =====================================================
       HGV VIDEO — MOBILE
    ===================================================== */

    .hgv-hero-media,
    .hgv-hero-video-new {
        width: 100%;
        height: 100%;
    }

    .hgv-hero-video-new {
        object-fit: cover;
        object-position: 58% center;
        transform: none;
    }

    .hgv-hero-overlay-new {
        background:
            linear-gradient(
                90deg,
                rgba(0, 0, 0, 0.91) 0%,
                rgba(0, 0, 0, 0.72) 58%,
                rgba(0, 0, 0, 0.48) 100%
            );
    }

    /* IMAGES */
    .training-card-image,
    .about-training-image {
        height: clamp(220px, 65vw, 290px);
    }

    /* CARDS */
    .training-card-content,
    .about-training-content,
    .lesson-choice-card,
    .pricing-card-new,
    .hgv-price-panel,
    .intensive-box-new {
        padding: 24px 20px;
    }

    /* CONTACT FORM */
    .contact-form-new {
        padding: 24px 16px;
    }

    .form-field input,
    .form-field select,
    .form-field textarea {
        width: 100%;
        max-width: 100%;
        font-size: 16px;
    }

    /* FINAL CTA */
    .final-cta-box {
        padding: 28px 20px;
    }

    /* FOOTER */
    .footer-links {
        gap: 28px 16px;
    }

    .footer-links a {
        overflow-wrap: anywhere;
    }

    /* WHATSAPP */
    .floating-whatsapp {
        right: 12px;
        bottom: max(12px, env(safe-area-inset-bottom));
    }

    /* STOP IMAGES/VIDEOS CAUSING SIDEWAYS SCROLL */
    img,
    video,
    iframe {
        max-width: 100%;
    }
}


/* =========================================================
   EXTRA SMALL PHONES
========================================================= */

@media (max-width: 400px) {

    .home-hero-inner,
    .car-hero-inner,
    .hgv-hero-inner,
    .about-hero-inner,
    .contact-hero-inner {
        width: calc(100% - 26px);
    }

    .home-hero-content h1,
    .about-hero-content h1,
    .contact-hero-content h1 {
        font-size: clamp(2.45rem, 12vw, 3.35rem);
    }

    .car-hero-content h1,
    .hgv-hero-content h1 {
        font-size: clamp(2.05rem, 10.2vw, 2.85rem);
    }

    .button {
        padding-left: 16px;
        padding-right: 16px;
    }

    .floating-whatsapp {
        min-width: 88px;
        height: 40px;
        padding: 0 12px;
        font-size: 0.7rem;
    }
}