/* Corporate hero — fig 5113:9663 (1920). Photo bleeds edge to edge, copy left,
   the Contact Form 7 card right. */

/* The card changes height as the form answers — a suggestion line, the plugin's
   response, the spinner — and the band used to follow it, shifting everything
   below. It holds the frame's own 914 instead and the card grows into the
   padding, which has 265 to give before the band would have to move. */
.corp-hero {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    height: 914px;
    padding-block: 140px;
    padding-inline: 20px;
    background: #0c0e0f;
}

/* The row takes the band's height rather than the card's, so the copy beside it
   is centred against something that does not move. Left to the card, the row
   grew with it and re-centred the copy every time the form answered. */
.corp-hero > .container-new,
.corp-hero-grid {
    height: 100%;
}

.corp-hero > .container-new {
    width: 100%;
}

.corp-hero-bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* The frame's own overlay (5113:9663), verbatim: ink falling away across the
   band, nothing else. The photo keeps its colour where nothing sits on it.
   Earlier this darkened the whole frame and washed it orange, which was
   measured against the mock's night photograph and turned daylight to mud. */
.corp-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(90deg, rgba(23, 27, 28, .8) 0%, rgba(23, 27, 28, .66) 32%, rgba(23, 27, 28, .3) 50%, rgba(23, 27, 28, 0) 68%),
        linear-gradient(0deg, rgba(23, 27, 28, .45) 0%, rgba(23, 27, 28, 0) 45%);
}

.corp-hero-grid {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

.corp-hero-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    flex: 1 1 0;
    min-width: 0;
    max-width: 700px;
}

.corp-hero-title {
    margin: 0;
    font-family: "Unbounded", sans-serif;
    font-size: 56px;
    font-weight: 700;
    line-height: normal;
    /* the theme tracks h1 at -1px; the mock sets none */
    letter-spacing: 0;
    color: #fff;
}

.corp-hero-lede {
    margin: 0;
    color: #d1d5dc;
    font-size: 18px;
    font-weight: 400;
    line-height: normal;
}

.corp-hero-lede p {
    margin: 0 0 22px;
}

.corp-hero-lede p:last-child {
    margin-bottom: 0;
}

.corp-hero-actions {
    display: flex;
    gap: 16px;
    align-items: stretch;
    width: 100%;
}

.corp-hero-actions .corp-btn {
    flex: 1 1 0;
    min-width: 0;
    padding-inline: 20px;
}

/* ---------- quote card ---------- */
.corp-form-card {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex: 1 1 0;
    min-width: 0;
    max-width: 700px;
    padding: 40px 20px;
    border-radius: 30px;
    background: #fff;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25);
}

.corp-form-head {
    display: flex;
    flex-direction: column;
    gap: 18px;
    text-align: center;
}

.corp-form-title {
    margin: 0;
    font-family: "Unbounded", sans-serif;
    font-size: 36px;
    font-weight: 700;
    line-height: normal;
    color: var(--corp-ink);
}

.corp-form-subtitle {
    margin: 0;
    font-size: 22px;
    font-weight: 400;
    line-height: normal;
    color: var(--corp-muted-2);
}

/* Contact Form 7 emits its own paragraphs and spans; the rules below dress
   whatever it prints without assuming a field order. With its auto-paragraph
   off — how form 108412 is written — the controls are bare wrapper spans
   directly under the form, so the form itself has to carry the pitch the
   frames draw (a 54 tall control on a 10 gap); with auto-paragraph on the same
   pitch has to survive a run of fields sharing one paragraph. */
.corp-form .wpcf7-form,
.corp-form .wpcf7-form > p,
.corp-form-fields {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
}

/* That same auto-paragraph puts a line break between controls as well; in a
   column that already stacks them each break would open a stray row. A break
   inside a label still does its job. */
.corp-form .wpcf7-form > br,
.corp-form .wpcf7-form > p > br,
.corp-form-row > br {
    display: none;
}

.corp-form input[type="text"],
.corp-form input[type="email"],
.corp-form input[type="tel"],
.corp-form input[type="number"],
.corp-form input[type="url"],
.corp-form select,
.corp-form textarea {
    box-sizing: border-box;
    width: 100%;
    padding: 17px;
    border: 1px solid #eee;
    border-radius: 10px;
    background: #fff;
    font-family: inherit;
    font-size: 16px;
    font-weight: 400;
    line-height: normal;
    color: var(--corp-ink);
    appearance: none;
}

.corp-form textarea {
    min-height: 120px;
    resize: vertical;
}

.corp-form ::placeholder {
    color: var(--corp-muted);
    opacity: 1;
}

.corp-form select {
    color: var(--corp-ink);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8' fill='none'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%237f7f7f' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 17px center;
    padding-right: 44px;
}

.corp-select-empty {
    color: var(--corp-muted);
}

.corp-form input:focus,
.corp-form select:focus,
.corp-form textarea:focus {
    outline: 2px solid var(--corp-orange);
    outline-offset: 1px;
    border-color: transparent;
}

.corp-form-row {
    display: flex;
    flex-wrap: wrap;
    /* the frame's own pitch: 10 down the column, 16 across the pair. The row
       gap is what the suggestion line drops to when it wraps, and matching the
       column keeps the space above it equal to the space below. */
    gap: 10px 16px;
}

.corp-form-row > * {
    flex: 1 1 0;
    min-width: 0;
}

/* The email suggestion is injected as a sibling of its field's CF7 wrapper, so
   in a two-column row it lands as a third column and squeezes both fields. Its
   own sheet already asks for the full width, but the rule above flattens that
   basis back to zero and the row cannot wrap. Ordered last, it takes the line
   under the pair rather than pushing the second field off the row. */
.corp-form-row > .gst-email-typo {
    order: 1;
    flex: 1 0 100%;
    /* its own sheet lifts it 6 off the field it follows; here the row gap
       already carries that space on both sides */
    margin-top: 0;
}

.corp-form input[type="submit"],
.corp-form button[type="submit"],
.corp-form .wpcf7-submit,
.corp-form-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 20px 70px;
    border: 0;
    border-radius: 20px;
    background: var(--corp-ink);
    color: #fff;
    font-family: inherit;
    font-size: 18px;
    font-weight: 600;
    line-height: normal;
    cursor: pointer;
    margin-top: 10px;
}

@media (hover: hover) {
    .corp-form input[type="submit"]:hover,
    .corp-form button[type="submit"]:hover,
    .corp-form .wpcf7-submit:hover,
    .corp-form-submit:hover {
        background: #000;
    }
}

.corp-form-note {
    margin: 10px 0 0;
    text-align: center;
    font-size: 12px;
    font-weight: 400;
    line-height: normal;
    color: var(--corp-muted-2);
}

/* The plugin's own sheet parks a 24px spinner under the submit and only turns
   it visible mid-submission, so idle it would open a gap the frames do not
   draw. It joins the column for as long as the submission is in flight. */
.corp-form .wpcf7-spinner {
    display: none;
    margin: 0 auto;
}

.corp-form .wpcf7-form.submitting .wpcf7-spinner {
    display: block;
}

/* the plugin's sheet loads after this one and its own margin on the response
   block is 2em, so this needs the extra class to land */
.corp-form .wpcf7-form .wpcf7-response-output {
    margin: 10px 0 0;
    border-radius: 10px;
    font-size: 14px;
}

/* Contact Form 7 prints its complaint under the control, so a failed submit
   pushes every field below it down and the card jumps. The request-a-quote form
   answers inside the control instead; this card follows it. The tip stays in the
   markup for screen readers, out of the flow so nothing moves. */
.corp-form .wpcf7-not-valid-tip {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* the mark sits where the request form draws it: 24px, inset from the right edge */
.corp-form input.wpcf7-not-valid,
.corp-form input.corp-field-invalid,
.corp-form input.corp-field-valid {
    padding-right: 48px;
    background-repeat: no-repeat;
    background-size: 24px;
    background-position: right 14px center;
}

.corp-form input.wpcf7-not-valid,
.corp-form input.corp-field-invalid {
    border-color: rgba(198, 44, 44, .45);
    background-image: url("/wp-content/uploads/2024/03/Group-11.png");
}

.corp-form input.corp-field-valid {
    border-color: rgba(68, 170, 85, .45);
    background-image: url("/wp-content/uploads/2024/03/Group-14-1.png");
}

/* A select already carries the chevron as its background, so it answers with the
   border alone rather than losing the arrow to a mark. */
.corp-form select.wpcf7-not-valid,
.corp-form select.corp-field-invalid {
    border-color: rgba(198, 44, 44, .45);
}

.corp-form select.corp-field-valid {
    border-color: rgba(68, 170, 85, .45);
}

/* The 1440 mock gives the card 690 and the copy the rest; at 1920 both reach the
   700 cap. Sizing the card explicitly here keeps the split off the flex solver. */
@media (max-width: 1470px) and (min-width: 1200px) {
    .corp-form-card {
        flex: 0 0 690px;
    }
}

/* Every frame that draws the 56px title lays it on 69, where the browser's
   normal for the Bold face gives 70 and drifts a pixel a line. The phone frame
   drops to 36px and takes the browser's own leading. */
@media (min-width: 768px) {
    .corp-hero-title {
        line-height: 1.232;
    }
}

/* ---------- 1199 and below: the card drops under the copy ---------- */
@media (max-width: 1199px) {
    /* stacked, the band is as tall as what it holds */
    .corp-hero {
        height: auto;
        padding-block: 100px;
    }

    /* The frame draws the hero at 1920, where the copy sits in the left third.
       Here the grid stacks and the copy takes the full width, so the same ink
       falls from the top of the band instead of across it. Same weights the
       frame uses; 4.9:1 under the copy at 768, 6.0:1 at 390. */
    .corp-hero::after {
        background: linear-gradient(180deg, rgba(23, 27, 28, .8) 0%, rgba(23, 27, 28, .55) 45%, rgba(23, 27, 28, .3) 100%);
    }

    .corp-hero-grid {
        flex-direction: column;
        align-items: stretch;
        gap: 50px;
    }

    .corp-hero-copy,
    .corp-form-card {
        max-width: none;
    }
}

@media (max-width: 767px) {
    .corp-hero {
        padding-block: 60px;
    }

    .corp-hero-grid {
        gap: 30px;
    }

    .corp-hero-title {
        font-size: 36px;
    }

    .corp-hero-actions {
        flex-direction: column;
        gap: 16px;
    }

    .corp-form-card {
        padding: 40px 16px;
        border-radius: 16px;
    }

    .corp-form-title {
        font-size: 22px;
    }

    .corp-form-subtitle {
        font-size: 14px;
    }

    /* the phone frame gives every field its own row, on the same 10 the pairs
       keep above it (7055:10754) */
    .corp-form-row {
        flex-direction: column;
        gap: 10px;
    }

    /* Stacked, the hint already follows the field it belongs to; ordering it
       last would drop it under the next field instead. */
    .corp-form-row > .gst-email-typo {
        order: 0;
    }

    /* the frame draws 40 a side, which the label and its arrow no longer clear
       on a 343 card at 18 - the pill would take a second line for padding */
    .corp-form input[type="submit"],
    .corp-form button[type="submit"],
    .corp-form .wpcf7-submit,
    .corp-form-submit {
        padding: 12px 16px;
        border-radius: 12px;
        line-height: 22px;
    }
}