/* ==========================================================================
   ppc-hero.css — PPC Landing Page: Hero
   Figma: 5823:20890 — 1440×827, full-bleed bg/video + 30% black overlay
   Desktop: outer grid — full-bleed hero bg | form panel right col
   Mobile:  hero bg area (554px) | form panel full-width white section below
   ========================================================================== */

/* ── Page-level: strip default body margin ────────────────────────────────── */
body.ppc-page {
    margin: 0;
    padding: 0;
}

/* ── Outer wrapper — full bleed (override main.css __outer max-width cap) ── */
body.ppc-page .ppc-hero-outer {
    position: relative;
    width: 100%;
    max-width: none;
}

/* ── Hero wrapper — full width, bg image/video ───────────────────────────── */
.ppc-hero {
    position: relative;
    width: 100%;
    min-height: 827px;
    background-color: #1c1c1c; /* fallback */
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
}

.ppc-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: #0000004D; /* Figma: 30% black overlay */
    z-index: 1;
}

/* ── Background video ────────────────────────────────────────────────────── */
.ppc-hero__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    z-index: 0;
}

/* ── Hero body ───────────────────────────────────────────────────────────── */
.ppc-hero__body {
    position: relative;
    z-index: 2;
    padding-block: 60px 80px;
    padding-inline: var(--gutter, 60px);
}

.ppc-hero__inner {
    max-width: var(--max-width);
    margin-inline: auto;
    display: grid;
    grid-template-columns: 1fr;
    align-items: start;
    gap: 40px;
}

/* ── Left: copy ──────────────────────────────────────────────────────────── */
.ppc-hero__content {
    display: flex;
    flex-direction: column;
    gap: 28px;
    padding-top: 20px;
    min-width: 0;
}

/* Eyebrow — Geist Medium 20px, white, lh 110% */
.ppc-hero__eyebrow {
    font-family: var(--font-body, 'Geist', sans-serif);
    font-size: 20px;
    font-weight: 500;
    line-height: 1.1;
    color: #ffffff;
    margin: 0;
}

/* H1 — Freight Neo Book 48px, white, lh 100% */
.ppc-hero__heading {
    font-family: var(--font-heading, 'Freight Neo Pro', serif);
    font-size: 48px;
    font-weight: 400;
    line-height: 1.0;
    color: #ffffff;
    margin: 0;
}

.ppc-hero__description{
    color: var(--Lead-Colours-White, #FFF);

    /* Body/Body Normal */
    font-family: Geist;
    font-size: 16px;
    font-style: normal;
    font-weight: 300;
    line-height: 139%; /* 22.24px */
}

/* Description — Geist Light 16px, white, lh 139% */
.ppc-hero__description {
    font-family: var(--font-body, 'Geist', sans-serif);
    font-size: 16px;
    font-weight: 300;
    line-height: 1.39;
    color: #ffffff;
    margin: 0;
}

/* Feature bullets — Geist Light 16px, white, lh 139%, gap 8px */
.ppc-hero__features {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ppc-hero__feature {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-body, 'Geist', sans-serif);
    font-size: 16px;
    font-weight: 300;
    color: #ffffff;
    line-height: 1.39;
}

.ppc-hero__feature svg {
    flex-shrink: 0;
}

/* CTA row — Figma: gap 12px, padding-top 20px */
.ppc-hero__ctas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding-top: 20px;
}

/* Shared CTA — pill, 16px 25px padding */
.ppc-hero__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-body, 'Geist', sans-serif);
    font-size: 16px;
    font-weight: 300;
    line-height: 1;
    letter-spacing: 0.16px;
    text-decoration: none;
    padding: 16px 25px;
    border-radius: 1000px;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    white-space: nowrap;
}

/* Primary — sand bg (#e6dfd7), dark text */
.ppc-hero__cta--primary {
    color: var(--color-dark, #1c1c1c);
    background-color: #e6dfd7;
    border: 1px solid #e6dfd7;
}

.ppc-hero__cta--primary:hover {
    background-color: #d9d1c8;
    border-color: #d9d1c8;
}

/* Secondary — dark bg, white text */
.ppc-hero__cta--secondary {
    color: #ffffff;
    background-color: #1c1c1c;
    border: 1px solid #1c1c1c;
}

.ppc-hero__cta--secondary:hover {
    background-color: #333333;
    border-color: #333333;
}

/* ── Right: form panel ───────────────────────────────────────────────────── */
.ppc-hero__form-panel {
    background: #ffffff;
    padding: 40px;
    display: flex;
    flex-direction: column;
    gap: 28px;
    position: relative;
    z-index: 2;
    box-sizing: border-box;
    min-width: 0;
}

.ppc-hero__form-head {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Form heading — Geist Medium 32px, #1c1c1c, lh 110% */
.ppc-hero__form-heading {
    font-family: var(--font-body, 'Geist', sans-serif);
    font-size: 32px;
    font-weight: 500;
    line-height: 1.1;
    color: var(--color-dark, #1c1c1c);
    margin: 0;
}

/* Form subtitle — Geist Light 16px, #1c1c1c, lh 139% */
.ppc-hero__form-sub {
    font-family: var(--font-body, 'Geist', sans-serif);
    font-size: 16px;
    font-weight: 300;
    color: var(--color-dark, #1c1c1c);
    line-height: 1.39;
    margin: 0;
}

.ppc-hero__form-body {
    width: 100%;
}

.ppc-hero__form-placeholder {
    font-family: var(--font-body, 'Geist', sans-serif);
    font-size: 0.875rem;
    color: var(--color-muted, #6b6560);
    padding: 20px;
    background: var(--color-sand-light, #f0ebdf);
    border-radius: 2px;
    margin: 0;
}

/* ── Gravity Forms — override all GF defaults ────────────────────────────── */
.ppc-hero__form-body .gform_wrapper {
    margin: 0 !important;
    padding: 0 !important;
}

.ppc-hero__form-body .gform_wrapper ul.gform_fields,
.ppc-hero__form-body .gform_fields {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    gap: 0 16px !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
.ppc-hero__form-body .gfield:not(.gfield--width-half){
    width: 100% !important;
    max-width: 100% !important;
}
.ppc-hero__form-body .gfield {

    margin-bottom: 16px !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
}

.ppc-hero__form-body .gfield.gf-half {
    width: calc(50% - 8px) !important;
    max-width: calc(50% - 8px) !important;
}

.ppc-hero__form-body .gfield input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]):not([type="button"]):not([type="image"]):not([type="file"]),
.ppc-hero__form-body .gfield select,
.ppc-hero__form-body .gfield textarea {
    width: 100% !important;
    border: none !important;
    border-bottom: 1px solid #1c1c1c !important;
    border-radius: 0 !important;
    padding: 14px 0 !important;
    margin: 0 !important;
    font-family: var(--font-body, 'Geist', sans-serif) !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    color: #1c1c1c !important;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    box-sizing: border-box !important;
}
.ppc-hero__form-body .gform_button{
    max-width:fit-content;
}
.ppc-hero__form-body .gfield input::placeholder,
.ppc-hero__form-body .gfield textarea::placeholder {
    color: #1c1c1c !important;
    opacity: 0.5 !important;
}

.ppc-hero__form-body .gfield input:focus,
.ppc-hero__form-body .gfield select:focus,
.ppc-hero__form-body .gfield textarea:focus {
    border-bottom-color: #1c1c1c !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
}


.ppc-hero__form-body .gfield textarea {
    height: 105px !important;
    resize: none !important;
    min-block-size:105px!important;
}

.ppc-hero__form-body .gfield_label,
.ppc-hero__form-body .gfield_required {
    display: none !important;
}

.ppc-hero__form-body .gfield_error input,
.ppc-hero__form-body .gfield_error select,
.ppc-hero__form-body .gfield_error textarea {
    border: none !important;
    border-bottom: 1px solid #c00 !important;
    background: transparent !important;
}

.ppc-hero__form-body .gform_footer,
.ppc-hero__form-body .gform_page_footer {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
}

.ppc-hero__form-body .gform_footer input[type="submit"],
.ppc-hero__form-body .gform_footer button,
.ppc-hero__form-body .gform_page_footer input[type="submit"],
.ppc-hero__form-body .gform_page_footer button,
.ppc-hero__form-body input[type="submit"],
.ppc-hero__form-body button[type="submit"] {
    width: 100% !important;
    background-color: #1c1c1c !important;
    background: #1c1c1c !important;
    color: #ffffff !important;
    font-family: var(--font-body, 'Geist', sans-serif) !important;
    font-size: 16px !important;
    font-weight: 300 !important;
    letter-spacing: 0.01em !important;
    border: none !important;
    padding: 16px 25px !important;
    border-radius: 1000px !important;
    cursor: pointer !important;
    transition: background-color 0.2s ease !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    display: block !important;
    text-align: center !important;
}

.ppc-hero__form-body .gform_footer input[type="submit"]:hover,
.ppc-hero__form-body .gform_footer button:hover,
.ppc-hero__form-body input[type="submit"]:hover,
.ppc-hero__form-body button[type="submit"]:hover {
    background-color: #333333 !important;
    background: #333333 !important;
}

/* ── Desktop: outer grid — full-bleed bg + copy col 1 + form col 2 ───────── */
@media (min-width: 640px) {
    body.ppc-page .ppc-hero-outer {
        position: relative;
        display: grid;
        grid-template-columns: minmax(0, 1fr) min(535px, 42%);
        gap: 40px;
        align-items: start;
        min-height: 827px;
        max-width: var(--max-width);
        margin-inline: auto;
        padding-inline: var(--gutter, 60px);
        width: 100%;
        box-sizing: border-box;
    }

    body.ppc-page .ppc-hero-outer > .ppc-hero {
        position: absolute;
        inset: 0;
        z-index: 0;
        grid-column: 1 / -1;
        grid-row: 1;
        width: 100vw;
        max-width: 100vw;
        min-height: 827px;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
    }

    body.ppc-page .ppc-hero-outer > .ppc-hero__body {
        grid-column: 1;
        grid-row: 1;
        z-index: 2;
        position: relative;
        min-width: 0;
        max-width: none;
        margin-inline: 0;
        padding-inline: 0;
        box-sizing: border-box;
        
    }

    body.ppc-page .ppc-hero-outer > .ppc-hero__body .ppc-hero__inner {
        max-width: none;
        margin-inline: 0;
    }

    body.ppc-page .ppc-hero-outer > .ppc-hero__body .ppc-hero__content {
        max-width: 705px;
    }

    body.ppc-page .ppc-hero-outer > .ppc-hero__form-panel {
        grid-column: 2;
        grid-row: 1;
        z-index: 2;
        width: 100%;
        align-self: start;
    }
}

/* ── Tablet (640–959px) — narrower form column ───────────────────────────── */
@media (min-width: 640px) and (max-width: 959px) {
    body.ppc-page .ppc-hero-outer {
        grid-template-columns: minmax(0, 1fr) min(480px, 45%);
    }
}

/* ── Tablet heading scale ─────────────────────────────────────────────────── */
@media (max-width: 959px) {
    .ppc-hero__heading {
        font-size: 2.5rem;
    }
}

/* ── Mobile (max 639px) — Figma 390px ───────────────────────────────────── */
/* Hero: 390×554px bg area. Copy overlays bg. Form panel below.             */
@media (max-width: 639px) {
    body.ppc-page .ppc-hero-outer {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
    }

    /* Background layer — row 1 */
    body.ppc-page .ppc-hero-outer > .ppc-hero {
        grid-column: 1;
        grid-row: 1;
        min-height: 554px;
        width: 100%;
        max-width: none;
        margin-left: 0;
        margin-right: 0;
        position: relative;
    }

    /* Copy overlays bg in same row */
    body.ppc-page .ppc-hero-outer > .ppc-hero__body {
        grid-column: 1;
        grid-row: 1;
        z-index: 2;
        position: relative;
        padding-inline: 16px;
        padding-bottom: 0;
        align-self: start;
    }

    .ppc-hero__content {
        min-height: 374px;
    }

    /* Eyebrow — 17px, centred */
    .ppc-hero__eyebrow {
        font-size: 17px;
        line-height: 1.1;
    }

    /* H1 — 40px */
    .ppc-hero__heading {
        font-size: 40px;
        line-height: 1.0;
    }

    /* CTA buttons — stacked, full width on mobile */
    .ppc-hero__ctas {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }

    .ppc-hero__cta {
        width: 100%;
        text-align: center;
        white-space: normal;
    }

    /* Form panel — full-width white section below hero (Figma 5835:21755) */
    body.ppc-page .ppc-hero-outer > .ppc-hero__form-panel {
        grid-column: 1;
        grid-row: 2;
        position: static;
        width: 100%;
        max-width: none;
        margin: 0;
        padding: 30px 16px;
        gap: 28px;
        box-sizing: border-box;
    }

    /* All fields full-width on mobile */
    .ppc-hero__form-body .gform_wrapper ul.gform_fields,
    .ppc-hero__form-body .gform_fields {
        flex-direction: column !important;
        gap: 0 !important;
    }

    .ppc-hero__form-body .gfield,
    .ppc-hero__form-body .gfield.gf-half,
    .ppc-hero__form-body .gfield.gfield--width-half,
    .ppc-hero__form-body .gfield:not(.gfield--width-half) {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }

    .ppc-hero__form-body .gfield .ginput_container,
    .ppc-hero__form-body .ginput_container {
        width: 100% !important;
        max-width: 100% !important;
    }

    .ppc-hero__form-body .gfield input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]):not([type="button"]):not([type="image"]):not([type="file"]),
    .ppc-hero__form-body .gfield select,
    .ppc-hero__form-body .gfield textarea {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* Mobile: reduce header padding-top to match shorter mobile site header */
@media (max-width: 639px) {
    body.ppc-page .ppc-hero__body {
        padding-top: 80px;
        padding-bottom:40px!important;
    }
}