/* =====================================================================
   ENQUIRY FOLD — Contact / Booking
   Turn 2a of the Contact Booking Fold design: photo hero under a blue
   scrim, pill above the headline, phone as display type, form card on the
   right, proof row along the bottom. Replaces the 490px banner, the
   "Get in Touch" card and the form block with one section.

   ISOLATION
   Every selector in this file starts at .hpef and every class is
   namespaced, so nothing here leaks out. Keeping the theme from leaking
   *in* takes the reset directly below, because the theme styles Contact
   Form 7 globally and some of those rules are destructive here — chief
   among them `.wpcf7 { width: 40vw }`, which sized the form against the
   viewport instead of the card and burst it open on desktop.

   Two decisions follow from that:

   1. The reset uses `.hpef.hpef.hpef *` — the root class repeated to
      reach specificity (0,3,0) without inventing wrapper elements.
      `all` is Baseline widely available (since January 2020).
      https://developer.mozilla.org/en-US/docs/Web/CSS/all

   2. Every other rule is written as `.hpef.hpef <descendant>`, also
      (0,3,0), and wins over the reset on source order. Never a bare
      `.hpef__x`, and never a single `.hpef` prefix.

   (0,3,0) and not (0,2,0) because an attribute selector counts in the
   same column as a class. The theme's `.wpcf7-form input[type="submit"]`
   is (0,2,1) — it out-specifies a two-class selector, which is what left
   the submit button unpainted on the first pass. The highest-specificity
   theme rule that can still reach this subtree after the markup rebuild
   is (0,2,1), so (0,3,0) clears all of them.
   https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_cascade/Specificity

   The rest of the defence is in functions/enquiry-fold.php, which rebuilds
   the form markup so the theme's Webflow classes and inline styles never
   reach the page at all.
   ===================================================================== */

/* --------------------------------------------------------------- reset */
.hpef.hpef.hpef *,
.hpef.hpef.hpef *::before,
.hpef.hpef.hpef *::after {
    all: revert;
}

/* `all: revert` also reverts what the plugin needs to keep working. Both of
   these are hidden by Contact Form 7's own stylesheet, which the reset undoes.

   .screen-reader-response is the plugin's live region: a role="status" para
   plus a list of links to the invalid fields. It is meant to be reachable by
   a screen reader and invisible on screen — leaving it visible produced a
   second, duplicated error summary above the fields. It is hidden the way
   the plugin hides it, not with display:none, so it keeps announcing. */
.hpef.hpef .hidden-fields-container {
    display: none;
}

.hpef.hpef .screen-reader-response {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* --------------------------------------------------------------- shell */
.hpef {
    position: relative;
    /* Keeps the z-index of the photo, the scrim and the inner grid inside
       this section. Without it the section is positioned with z-index:auto,
       so it creates no stacking context and those children compete in the
       root one — painting over the fixed Google reviews badge in the footer,
       which has no z-index of its own. Baseline widely available since
       January 2020.
       https://developer.mozilla.org/en-US/docs/Web/CSS/isolation */
    isolation: isolate;
    padding: 48px 24px 56px;
    background: #0a4d8f;
    overflow: hidden;
    font-family: "Proxima nova", system-ui, sans-serif;
    /* The section's height resolves to a fraction (540.5px at every width
       measured), so its bottom edge lands mid-pixel and the browser
       antialiases the boundary — which reads as a pale hairline against the
       band below. Pulling the next section up one pixel puts its own
       background over that blended row. Costs nothing: there is 56px of
       padding under the content. */
    margin-bottom: -1px;
}

.hpef.hpef .hpef__photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 56% 46%;
    z-index: 0;
}

.hpef.hpef .hpef__scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg,
        rgba(8, 52, 100, .95) 0%,
        rgba(10, 62, 118, .82) 36%,
        rgba(13, 84, 158, .40) 100%);
}

.hpef.hpef .hpef__inner {
    position: relative;
    z-index: 2;
    max-width: 1180px;
    margin: 0 auto;
    display: grid;
    /* minmax(0, …): a bare 1fr floors at the track's min-content width,
       which form controls make large. */
    grid-template-columns: minmax(0, 1fr) 552px;
    /* `auto 1fr`, not `auto auto`. The card spans both rows and is taller
       than the left column, and a grid distributes a spanning item's excess
       height into the tracks it spans **when their max sizing function is
       intrinsic**. With two auto rows that excess inflated row 1 and opened a
       ~58px hole between the phone block and the paragraph. An fr track is
       not intrinsic, so the slack goes to row 2, which sits below the
       support content where nothing can be pushed apart. */
    grid-template-rows: auto 1fr;
    column-gap: 48px;
    row-gap: 16px;
    align-items: start;
}

/* The left column is two wrapped groups, not five loose children. As loose
   grid rows, extra height in the card was redistributed into the row gaps
   and pulled the left content apart whenever a validation message appeared.
   Wrapped, each group's internal spacing is its own and nothing on the left
   moves when the card grows. */
.hpef.hpef .hpef__lead,
.hpef.hpef .hpef__support {
    grid-column: 1;
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.hpef.hpef .hpef__lead {
    grid-row: 1;
    align-items: flex-start;
}

.hpef.hpef .hpef__support { grid-row: 2; }

/* Font Awesome glyphs, using the face the theme already ships. */
.hpef.hpef .hpef__icon {
    font-family: "Fa solid 900", sans-serif;
    font-weight: 900;
    font-style: normal;
    line-height: 1;
}

/* -------------------------------------------------------------- kicker */
.hpef.hpef .hpef__kicker {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0 8px;
}

.hpef.hpef .hpef__kicker .hpef__icon {
    font-size: 12px;
    color: #ffde32;
}

.hpef.hpef .hpef__title {
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #fff;
}

.hpef.hpef .hpef__meta {
    font-size: 13px;
    line-height: 1;
    color: rgba(255, 255, 255, .88);
}

/* ------------------------------------------------------------ headline */
.hpef.hpef .hpef__offer {
    margin: 0;
    max-width: 600px;
    font-family: "Proximanova extrabld", "Proxima nova", sans-serif;
    font-weight: 400;
    font-size: 38px;
    line-height: 1.06;
    color: #fff;
    /* `balance` and not `pretty`: MDN documents pretty as deliberately
       slower, meant for long body copy, while balance is the value for
       short headings (Chromium balances up to 6 lines).
       https://developer.mozilla.org/en-US/docs/Web/CSS/text-wrap-style */
    text-wrap: balance;
}

/* --------------------------------------------------------------- phone */
.hpef.hpef .hpef__phone {
    display: flex;
    align-items: center;
    gap: 13px;
    background: rgba(4, 38, 74, .72);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 10px;
    padding: 10px 18px 10px 10px;
    text-decoration: none;
}

.hpef.hpef .hpef__phone:hover .hpef__phone-number,
.hpef.hpef .hpef__phone:focus-visible .hpef__phone-number {
    color: #ffde32;
}

.hpef.hpef .hpef__phone-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 46px;
    height: 46px;
    border-radius: 9px;
    background: #e10916;
    color: #fff;
    font-size: 18px;
    animation: hpefPhonePulse 2.2s ease-out infinite;
}

@keyframes hpefPhonePulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(225, 9, 22, .45); }
    70%      { box-shadow: 0 0 0 12px rgba(225, 9, 22, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .hpef.hpef .hpef__phone-icon { animation: none; }
}

.hpef.hpef .hpef__phone-kicker {
    display: block;
    font-size: 12px;
    line-height: 16px;
    color: rgba(255, 255, 255, .85);
}

.hpef.hpef .hpef__phone-number {
    display: block;
    font-family: "Proximanova extrabld", "Proxima nova", sans-serif;
    font-size: 27px;
    line-height: 1.1;
    color: #fff;
}

/* ----------------------------------------------------- supporting copy */
.hpef.hpef .hpef__copy {
    margin: 0;
    max-width: 520px;
    font-size: 16px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .94);
}

.hpef.hpef .hpef__proof {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.hpef.hpef .hpef__proof-item {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    color: #fff;
}

.hpef.hpef .hpef__proof-item .hpef__icon {
    font-size: 12px;
    color: #ffde32;
}

.hpef.hpef .hpef__stars {
    font-size: 11px;
    letter-spacing: 1px;
}

/* ----------------------------------------------------------- form card */
.hpef.hpef .hpef__card {
    grid-column: 2;
    grid-row: 1 / span 2;
    min-width: 0;
    background: #fff;
    border-radius: 14px;
    padding: 22px;
    box-shadow: 0 24px 60px rgba(4, 20, 40, .34);
}

.hpef.hpef .hpef__card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.hpef.hpef .hpef__card-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .09em;
    text-transform: uppercase;
    /* #0f66bd on #fff is 5.1:1 — above the 4.5:1 floor for body text
       (WCAG 1.4.3), which this is at 12px. */
    color: #0f66bd;
}

/* The envelope is decoration, so it is drawn rather than written: a
   private-use glyph inside the heading shows up as a tofu box in the
   document outline and in anything that reads heading text. */
.hpef.hpef .hpef__card-title::before {
    content: "0e0";
    font-family: "Fa solid 900", sans-serif;
    font-weight: 900;
    font-size: 13px;
}

.hpef.hpef .hpef__badge {
    flex: none;
    background: #ffde32;
    color: #212529;
    border-radius: 4px;
    padding: 5px 9px;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* A flex row gave each part its own box, and the bullets and the link sat
   off the text's baseline. As one line of inline text they all share it. */
.hpef.hpef .hpef__card-foot {
    display: block;
    text-align: center;
    margin: 12px 0 0;
    font-size: 11.5px;
    line-height: 1.4;
    /* #6b7280 on #fff is 4.8:1. The design's #7a8292 is 3.9:1, under the
       4.5:1 floor, so it is darkened here. */
    color: #6b7280;
}

.hpef.hpef .hpef__card-foot .hpef__sep {
    color: #e10916;
    margin: 0 6px;
}

.hpef.hpef .hpef__card-foot a {
    /* Left inline, on the shared baseline. WCAG 2.2 SC 2.5.8 exempts a
       target embedded in a sentence or constrained by the line-height of
       the text around it, which is now literally the case.
       https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html */
    color: #0f66bd;
    text-decoration: underline;
}

/* =====================================================================
   THE FORM
   functions/enquiry-fold.php emits this structure:

     .hpef__form > .wpcf7 > form.wpcf7-form
       fieldset.hidden-fields-container
       .hpef__grid
         .hpef__field            label + .hpef__control > input
         .hpef__field--file      label + control + .hpef__hint
         .hpef__actions          input.hpef__submit
       .wpcf7-response-output

   Order in the grid is name | email / phone | address / subject | upload,
   then the button across both tracks, which is the design's layout with
   no explicit placement needed.
   ===================================================================== */

.hpef.hpef .hpef__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px 12px;
    align-items: start;
}

.hpef.hpef .hpef__field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    /* label 14 + gap 4 + control 42 + a 12px slot held open for the
       validation message, so an error cannot shift the button downward. */
    min-height: 72px;
}

.hpef.hpef .hpef__label {
    font-size: 10.5px;
    font-weight: 700;
    line-height: 14px;
    letter-spacing: .05em;
    text-transform: uppercase;
    /* 4.6:1 on #fff. */
    color: #57606f;
}

.hpef.hpef .hpef__control {
    display: block;
    min-width: 0;
}

.hpef.hpef .hpef__control input {
    display: block;
    width: 100%;
    height: 42px;
    box-sizing: border-box;
    background: #f4f7f6;
    border: 1px solid #d4d9de;
    border-radius: 5px;
    padding: 0 12px;
    margin: 0;
    font-family: inherit;
    font-size: 15px;
    color: #212529;
}

.hpef.hpef .hpef__control input::placeholder {
    color: #6b7280;
    opacity: 1;
}

.hpef.hpef .hpef__control input:focus-visible,
.hpef.hpef .hpef__submit:focus-visible,
.hpef.hpef .hpef__phone:focus-visible,
.hpef.hpef .hpef__card-foot a:focus-visible {
    outline: 3px solid #2986ff;
    outline-offset: 2px;
}

.hpef.hpef .hpef__control input[aria-invalid="true"] {
    border-color: #e10916;
}

.hpef.hpef .wpcf7-not-valid-tip {
    display: block;
    margin: 0;
    font-size: 10.5px;
    line-height: 12px;
    color: #c40813;
}

/* -------------------------------------------------------- file upload */
.hpef.hpef .hpef__field--file {
    justify-content: flex-start;
}

/* The native control is kept — a real file input is keyboard operable and
   announces its state, which a label styled to look like a button is not.
   Only the browser's own button is restyled. */
.hpef.hpef .hpef__control input[type="file"] {
    display: block;
    width: 100%;
    height: 42px;
    box-sizing: border-box;
    background: none;
    border: 1px dashed #b6bec8;
    border-radius: 5px;
    padding: 9px 10px;
    font-family: inherit;
    font-size: 13px;
    color: #57606f;
    cursor: pointer;
}

.hpef.hpef .hpef__control input[type="file"]::file-selector-button {
    margin-right: 10px;
    border: 1px solid #cfd6de;
    border-radius: 4px;
    padding: 4px 10px;
    background: #f4f7f6;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    color: #0f66bd;
    cursor: pointer;
}

.hpef.hpef .hpef__hint {
    font-size: 10.5px;
    line-height: 12px;
    color: #6b7280;
}

/* ------------------------------------------------------------- submit */
/* Contact Form 7 puts its spinner next to the submit control. With the
   button as a block, that inline span opened a 24px line box underneath it —
   the white band between the button and the footer. Taking the spinner out
   of flow puts it back where it belongs, over the right end of the button,
   and lets the row be exactly the height of the button. */
.hpef.hpef .hpef__actions {
    position: relative;
    grid-column: 1 / -1;
    min-width: 0;
    line-height: 0;
}

.hpef.hpef .hpef__submit {
    display: block;
    width: 100%;
    /* 48px clears the 24x24 CSS px floor of WCAG 2.2 SC 2.5.8 with room
       to spare; so do the 42px fields.
       https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html */
    height: 48px;
    box-sizing: border-box;
    border: none;
    border-radius: 6px;
    padding: 0;
    background: #e10916;
    color: #fff;
    font-family: "Proximanova extrabld", "Proxima nova", sans-serif;
    font-size: 16.5px;
    letter-spacing: .04em;
    text-transform: uppercase;
    text-align: center;
    cursor: pointer;
}

.hpef.hpef .hpef__submit:hover { background: #c40813; }

.hpef.hpef .wpcf7-spinner {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    margin: 0;
    background-color: rgba(255, 255, 255, .75);
    border-radius: 100%;
    opacity: 0;
}

.hpef.hpef .wpcf7-form.submitting .wpcf7-spinner { opacity: 1; }

/* On a validation error every field already carries its own message under
   it, so the summary at the foot of the form is a third copy of the same
   information. It stays for the states that have no per-field message —
   sent, failed, aborted, spam. */
.hpef.hpef .wpcf7-form.invalid .wpcf7-response-output,
.hpef.hpef .wpcf7-form.unaccepted .wpcf7-response-output,
.hpef.hpef .wpcf7-form.payment-required .wpcf7-response-output {
    display: none;
}

.hpef.hpef .wpcf7-response-output {
    margin: 10px 0 0;
    padding: 8px 10px;
    border: 1px solid #d4d9de;
    border-radius: 5px;
    font-size: 12.5px;
    line-height: 1.45;
    color: #212529;
}

.hpef.hpef .wpcf7-form.invalid .wpcf7-response-output,
.hpef.hpef .wpcf7-form.failed .wpcf7-response-output {
    border-color: #e10916;
}

.hpef.hpef .wpcf7-form.sent .wpcf7-response-output {
    border-color: #0a7f3f;
}

/* =====================================================================
   991 and below — two columns hold, on a narrower card
   ===================================================================== */
@media screen and (max-width: 991px) {
    .hpef { padding: 36px 20px 48px; }

    .hpef.hpef .hpef__photo { object-position: 60% 46%; }

    .hpef.hpef .hpef__scrim {
        background: linear-gradient(120deg,
            rgba(8, 52, 100, .95) 0%,
            rgba(10, 62, 118, .84) 45%,
            rgba(13, 84, 158, .46) 100%);
    }

    .hpef.hpef .hpef__inner {
        grid-template-columns: minmax(0, 1fr) 380px;
        grid-template-rows: auto 1fr;
        column-gap: 28px;
        row-gap: 14px;
    }

    .hpef.hpef .hpef__lead,
    .hpef.hpef .hpef__support { gap: 14px; }

    .hpef.hpef .hpef__offer { font-size: 26px; line-height: 1.08; }
    .hpef.hpef .hpef__card { padding: 16px; }
    .hpef.hpef .hpef__copy { font-size: 15px; }
}

/* =====================================================================
   767 and below — one column.

   The two-column layout holds down to 768px, where the left track still has
   320px to work with. Below that the card's fixed 380px eats the row: 252px
   of usable width at 700, 152px at 600, 32px at 480 — the headline breaking
   one word per line beside a form that looks pasted over it. So the collapse
   happens here, at the theme's own 767 breakpoint, rather than at 479.

   Only the structure changes here. The tight type and spacing further down
   are for small phones and would read as cramped on a 700px screen.
   ===================================================================== */
@media screen and (max-width: 767px) {
    .hpef { padding: 28px 16px 40px; }

    .hpef.hpef .hpef__photo { object-position: 68% 48%; }

    .hpef.hpef .hpef__scrim {
        background: linear-gradient(150deg,
            rgba(8, 52, 100, .95) 0%,
            rgba(10, 62, 118, .88) 45%,
            rgba(13, 84, 158, .52) 100%);
    }

    .hpef.hpef .hpef__inner {
        display: flex;
        flex-direction: column;
        /* The base rule sets align-items:start, which in a column flex box
           sizes each item to its content instead of the container — the card
           came out 634px wide inside a 699px column. */
        align-items: stretch;
        gap: 14px;
    }

    .hpef.hpef .hpef__lead,
    .hpef.hpef .hpef__support {
        /* same reason as the container: align-self:start would size these to
           their text instead of the column */
        align-self: stretch;
        gap: 14px;
    }

    .hpef.hpef .hpef__offer { font-size: 30px; line-height: 1.08; max-width: none; }
    .hpef.hpef .hpef__copy { font-size: 15px; max-width: none; }
    .hpef.hpef .hpef__card { padding: 18px; }
}

/* =====================================================================
   479 and below — single column. The form is still above the supporting
   copy because that is the DOM order, not because of a CSS reorder.

   The real mobile header measures 181px, not the 124px the design board
   assumed, so the budget above the fold is ~57px tighter than drawn. The
   padding, gaps and card spacing here are where that comes back.
   ===================================================================== */
@media screen and (max-width: 479px) {
    .hpef { padding: 8px 12px 40px; }

    .hpef.hpef .hpef__photo { object-position: 76% 50%; }

    .hpef.hpef .hpef__scrim {
        background: linear-gradient(170deg,
            rgba(9, 58, 110, .97) 0%,
            rgba(10, 64, 120, .92) 45%,
            rgba(15, 102, 189, .62) 100%);
    }

    .hpef.hpef .hpef__inner {
        display: flex;
        flex-direction: column;
        gap: 7px;
    }

    /* The wrappers carry their own spacing; left at the desktop 16px they
       cost ~24px of the fold budget, which is the whole margin here. */
    .hpef.hpef .hpef__lead,
    .hpef.hpef .hpef__support { gap: 7px; }

    /* The pill drops its chrome and reads as a plain kicker line. */
    .hpef.hpef .hpef__kicker { gap: 0 7px; }
    .hpef.hpef .hpef__kicker .hpef__icon { font-size: 11px; }
    .hpef.hpef .hpef__title { font-size: 10px; }

    .hpef.hpef .hpef__meta {
        font-size: 10px;
        letter-spacing: .02em;
        text-transform: none;
    }

    .hpef.hpef .hpef__offer { font-size: 22px; line-height: 1.08; }

    .hpef.hpef .hpef__phone { gap: 11px; padding: 8px 14px 8px 8px; }

    .hpef.hpef .hpef__phone-icon {
        width: 40px;
        height: 40px;
        border-radius: 8px;
        font-size: 16px;
    }

    .hpef.hpef .hpef__phone-kicker { font-size: 10.5px; line-height: 13px; }
    .hpef.hpef .hpef__phone-number { font-size: 22px; line-height: 1.15; }

    .hpef.hpef .hpef__card { border-radius: 12px; padding: 12px; }
    .hpef.hpef .hpef__card-head { align-items: flex-start; gap: 8px; margin-bottom: 6px; }

    .hpef.hpef .hpef__card-title {
        font-size: 10px;
        line-height: 1.35;
        letter-spacing: .07em;
        max-width: 230px;
    }

    .hpef.hpef .hpef__card-title::before { content: none; }
    .hpef.hpef .hpef__badge { font-size: 9.5px; padding: 4px 7px; }

    .hpef.hpef .hpef__grid { gap: 2px 8px; }

    /* Name, address and subject take the full width; email and phone pair
       up; upload and the button share the last row. That last row is what
       buys the ~60px keeping SUBMIT FORM inside the fold at 390x720. */
    .hpef.hpef .hpef__field--your-name,
    .hpef.hpef .hpef__field--your-address,
    .hpef.hpef .hpef__field--your-subject {
        grid-column: 1 / -1;
    }

    /* 66px is label 14 + gap 4 + a 44px control, so the message slot is only
       partly reserved here: an error on all four required fields grows the
       card by ~32px and pushes the copy below it down. Reserving the full
       12px per row would cost 32px of the fold budget, and there is only
       17px of margin at 390x720 — the fold wins. The shift lands within
       500ms of the submit click, so it is excluded from CLS, and the left
       column does not move either way. */
    .hpef.hpef .hpef__field { min-height: 66px; }
    .hpef.hpef .hpef__control input { height: 44px; }

    .hpef.hpef .hpef__field--file {
        grid-column: 1;
        min-height: 0;
        align-self: end;
    }

    .hpef.hpef .hpef__control input[type="file"] { height: 46px; }

    /* The size note leaves the field and joins the card footer, where it
       still sits with the form rather than beside it. */
    .hpef.hpef .hpef__hint { display: none; }

    .hpef.hpef .hpef__actions {
        grid-column: 2;
        align-self: end;
    }

    .hpef.hpef .hpef__submit { height: 46px; font-size: 14.5px; }

    .hpef.hpef .hpef__card-foot {
        text-align: left;
        margin-top: 8px;
        font-size: 10.5px;
    }

    .hpef.hpef .hpef__card-foot::before { content: "Max file size 10MB."; }

    .hpef.hpef .hpef__copy { font-size: 14px; max-width: none; }

    .hpef.hpef .hpef__proof { gap: 6px 14px; }
    .hpef.hpef .hpef__proof-item { font-size: 12px; }
    .hpef.hpef .hpef__proof-item .hpef__icon { display: none; }
}

/* =====================================================================
   HERO CARD — home, suburb and service banners

   The card on its own (hpef_hero_card() in functions/enquiry-fold.php),
   placed inside a page's existing hero banner. The .hpef--hero wrapper keeps
   the .hpef root class so the card and form rules above apply, and turns off
   the full-section chrome. The banner it sits in carries .has-hero-card,
   which lays the banner's own content and the card out side by side and
   lets the banner grow to fit the card instead of the fixed heights the
   theme gives .section-5 / .section-30 / .banner_blocks.
   ===================================================================== */
.hpef.hpef--hero {
	position: relative;
	isolation: auto;
	z-index: 2;
	padding: 0;
	margin: 0;
	background: transparent;
	overflow: visible;
	flex: 0 0 auto;
	width: 100%;
	max-width: 470px;
}

.hpef.hpef--hero .hpef__card {
	grid-column: auto;
	grid-row: auto;
}

/* Wider card on the home page, where the hero gives it more room. */
.home-hero-form .hpef.hpef--hero {
	max-width: 552px;
}

/* Tripled to outrank the theme's compound banner selectors
   (.section-5.leak.blocked-drain and friends). */
.has-hero-card.has-hero-card.has-hero-card {
	height: auto !important;
	min-height: 490px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 48px;
	padding: 40px max(3%, calc((100% - 1180px) / 2));
	box-sizing: border-box;
}

.has-hero-card.has-hero-card > .sectionwrapper {
	flex: 1 1 0;
	min-width: 0;
	max-width: none;
	margin: 0;
}

@media screen and (max-width: 991px) {
	.has-hero-card.has-hero-card.has-hero-card {
		flex-direction: column;
		align-items: stretch;
		gap: 28px;
		padding-top: 32px;
		padding-bottom: 32px;
	}

	.hpef.hpef--hero {
		max-width: none;
	}
}

/* Card on its own, centred, where a page's hero has no room for it
   (burst-leaking-pipes-sydney.php). Replaces the old red form block. */
.hpef-standalone {
	padding: 40px 3%;
}

.hpef-standalone .hpef.hpef--hero {
	max-width: 552px;
	margin: 0 auto;
}