/* Section: contact form. A letter-style card beside the title and the
   mascot on desktop; tablets and phones stack everything on the light ground.
   The sent and error panels take the whole section in place of the card. */

.contact-form {
    /* One Figma pixel of the 1352 content box, shrinking with the viewport. */
    --u: min(1px, (100vw - 2 * var(--container-pad)) / 1352);
    /* Where the site's content column starts and ends; the section is its own
       inline-size container so this ignores the page scrollbar. */
    --edge: max(var(--container-pad), (100cqi - var(--container-max)) / 2);
    /* Focus ring and link hover on the section ground (not the card). */
    --contact-ring: var(--color-white);
    --contact-link-hover: var(--color-accent-01);
    /* Inline errors: the palette red darkened to hold 4.5:1 on white. */
    --contact-error: color-mix(in srgb, var(--color-error), black 22%);

    overflow: clip;
    isolation: isolate;
    container-type: inline-size;
    background: var(--color-primary);
    color: var(--color-white);
}

/* The display rules below would otherwise outrank the attribute. */
.contact-form [hidden] {
    display: none !important;
}

/* ── Form view ───────────────────────────────────────────── */

.contact-form__view {
    display: grid;
    grid-template-columns: minmax(0, 690fr) minmax(0, 630fr) minmax(0, 32fr);
    grid-template-rows: auto 1fr;
    min-height: calc(982 * var(--u));
    padding: calc(111 * var(--u)) var(--edge) calc(8 * var(--u));
}

.contact-form__intro {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    gap: calc(35 * var(--u));
}

.contact-form__title {
    /* 480 of the design's 80px type: breaks after "Ready to". */
    max-width: 6em;
    margin: 0;
    color: inherit;
    font-family: var(--font-display);
    font-size: max(2.5rem, calc(80 * var(--u)));
    font-style: italic;
    font-weight: var(--fw-bold);
    line-height: 1.1;
    letter-spacing: 0;
}

.contact-form__subtitle {
    max-width: 15.75em;
    margin: 0;
    font-size: max(1.125rem, calc(24 * var(--u)));
    font-weight: var(--fw-regular);
    line-height: 1.3333;
    letter-spacing: -0.75px;
}

/* Stands on the section's bottom edge, which cuts its feet off. */
.contact-form__mascot {
    grid-column: 1;
    grid-row: 2;
    align-self: end;
    display: block;
    width: calc(525.5 * var(--u));
    max-width: none;
    height: auto;
    margin: calc(24 * var(--u)) 0 calc(-46 * var(--u)) calc(-3 * var(--u));
    pointer-events: none;
    user-select: none;
}

/* No z-index, transform or containment here: the tilted sheet behind is the
   card's own ::before at z-index -1, which has to fall through to the
   section's stacking context to sit under the white. */
.contact-form__card {
    position: relative;
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: start;
    min-height: calc(863 * var(--u));
    padding: calc(56 * var(--u)) calc(40 * var(--u)) calc(24 * var(--u));
    background: var(--color-white);
    color: var(--color-dark-purple);
    --contact-ring: var(--color-dark-purple);
}

.contact-form__card::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: calc(-31 * var(--u));
    left: calc(41 * var(--u));
    width: calc(100% - 11 * var(--u));
    height: calc(100% - 55 * var(--u));
    background: rgb(0 0 0 / 0.2);
    transform-origin: 0 0;
    rotate: 1.45deg;
    pointer-events: none;
}

.contact-form__form {
    container: contact-form / inline-size;
    display: flex;
    flex-direction: column;
    gap: calc(48 * var(--u));
}

/* Left empty by people, filled in by bots that fill in everything. */
.contact-form__trap {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Contact Form 7's own parts. Its stylesheet stays off the page (see
   inc/contact-form.php), so what the card needs of it is here. */

.contact-form .screen-reader-response {
    position: absolute;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    word-wrap: normal !important;
    word-break: normal !important;
}

/* The panels and the flagged fields say what the plugin's banner would. */
.contact-form .hidden-fields-container,
.contact-form .wpcf7-response-output {
    display: none;
}

.contact-form .wpcf7-not-valid-tip {
    display: block;
    margin: 4px 0 0;
    color: var(--contact-error);
    font-size: 0.875rem;
    font-weight: var(--fw-medium);
    line-height: 1.4;
}

.contact-form input[type="email"] {
    direction: ltr;
}

/* Shown to editors only, while the section has no form picked. */
.contact-form__notice {
    margin: 0;
    padding: 16px;
    border: 1px dashed var(--color-soft-purple);
    border-radius: 8px;
    font-size: 0.875rem;
    line-height: 1.5;
}

/* ── From: name and email ────────────────────────────────── */

.contact-form__from {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.contact-form__from-label,
.contact-form__greeting {
    margin: 0;
    font-size: max(1rem, calc(18 * var(--u)));
    font-weight: var(--fw-bold);
    line-height: 1.6667;
    letter-spacing: -0.25px;
}

.contact-form__fields {
    display: flex;
    flex-wrap: wrap;
    gap: 8px calc(24 * var(--u));
}

.contact-form__fields > .contact-form__field {
    flex: 1 1 12rem;
    min-width: 0;
}

/* Icon and value side by side over a rule, and the plugin's message under
   the rule when the field is flagged. The rule is drawn rather than a border
   so the message can sit below it inside the same line. */
.contact-form__line {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: 8px;
}

/* The plugin's wrapper around the value; its input and message join the
   line's grid. */
.contact-form__line .wpcf7-form-control-wrap {
    display: contents;
}

.contact-form__line::after {
    content: "";
    grid-row: 1;
    grid-column: 1 / -1;
    align-self: end;
    height: 1px;
    background: var(--color-secondary);
    pointer-events: none;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.contact-form__line:focus-within::after {
    background: var(--color-primary);
    box-shadow: 0 -1px 0 var(--color-primary);
}

.contact-form__line:has(.wpcf7-not-valid)::after {
    background: var(--contact-error);
    box-shadow: 0 -1px 0 var(--contact-error);
}

.contact-form__line .wpcf7-not-valid-tip {
    grid-row: 2;
    grid-column: 1 / -1;
}

/* The bottom padding here and on the input is a pixel deeper than the top:
   the rule is drawn over that last pixel. */
.contact-form__line-label {
    display: flex;
    grid-row: 1;
    grid-column: 1;
    padding: 4px 0 5px 8px;
    cursor: text;
}

.contact-form__icon {
    display: block;
    width: 24px;
    height: 24px;
}

.contact-form__input {
    grid-row: 1;
    grid-column: 2;
    width: 100%;
    min-width: 0;
    padding: 4px 8px 5px 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--color-dark-purple);
    font-family: var(--font-body);
    font-size: max(1rem, calc(18 * var(--u)));
    font-weight: var(--fw-medium);
    line-height: 1.4;
    outline: none;
}

/* Autofill paints its own yellow; keep the card white under the value. */
.contact-form__input:autofill {
    -webkit-box-shadow: 0 0 0 100px var(--color-white) inset;
    -webkit-text-fill-color: var(--color-dark-purple);
}

.contact-form__input::placeholder,
.contact-form__textarea::placeholder {
    color: var(--color-soft-purple);
    opacity: 1;
    font-size: max(0.875rem, calc(14 * var(--u)));
    font-weight: var(--fw-regular);
}

/* ── The letter: greeting, topic, message, choices ───────── */

.contact-form__letter {
    display: flex;
    flex-direction: column;
    gap: calc(24 * var(--u));
}

.contact-form__greeting {
    width: fit-content;
    transform-origin: 0 50%;
    rotate: -0.51deg;
}

.contact-form__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px calc(8 * var(--u));
}

.contact-form__row--choices {
    column-gap: calc(16 * var(--u));
}

.contact-form__label {
    flex: none;
    margin: 0;
    font-size: max(1rem, calc(18 * var(--u)));
    font-weight: var(--fw-regular);
    line-height: 1.4444;
}

/* A blank to fill in: a ruled line with no icon. Beside a sentence in a row
   it takes the rest of the row and centres what is typed on it. */
.contact-form__line--bare {
    grid-template-columns: minmax(0, 1fr);
}

.contact-form__line--bare .contact-form__input {
    grid-column: 1;
    padding: 4px 8px 5px;
}

.contact-form__row > .contact-form__line {
    flex: 1 1 12rem;
    min-width: 0;
}

.contact-form__row > .contact-form__line .contact-form__input {
    text-align: center;
}

/* Once the row stacks, the blank sits under its sentence at its own height. */
@container contact-form (max-width: 25rem) {
    .contact-form__row > .contact-form__line {
        flex: none;
    }

    .contact-form__row > .contact-form__line .contact-form__input {
        text-align: start;
    }
}

/* Topic: the native select until contact-form.js swaps in the listbox. */

.contact-form__select {
    position: relative;
    flex: 1 1 12rem;
    min-width: 0;
}

.contact-form__select .wpcf7-form-control-wrap,
.contact-form__field--message .wpcf7-form-control-wrap {
    display: block;
}

.contact-form__native,
.contact-form__combo {
    display: block;
    width: 100%;
    padding: 4px 40px 4px 8px;
    border: 0;
    border-bottom: 1px solid var(--color-secondary);
    border-radius: 0;
    background: none;
    color: var(--color-dark-purple);
    font-family: var(--font-body);
    font-size: max(1rem, calc(18 * var(--u)));
    font-weight: var(--fw-medium);
    line-height: 1.4;
    text-align: left;
    cursor: pointer;
    outline: none;
    appearance: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.contact-form__native:has(option[value=""]:checked) {
    color: var(--color-soft-purple);
}

.contact-form__native option {
    color: var(--color-dark-purple);
}

.contact-form__native:focus,
.contact-form__combo:focus,
.contact-form__combo[aria-expanded="true"] {
    border-bottom-color: var(--color-primary);
    box-shadow: inset 0 -1px 0 var(--color-primary);
}

.contact-form__combo {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    user-select: none;
}

/* Inline, so the combo's own line box keeps the value's height and choosing
   a topic does not nudge the rows below. */
.contact-form__combo-value.is-placeholder {
    color: var(--color-soft-purple);
    font-size: max(0.875rem, calc(14 * var(--u)));
    font-weight: var(--fw-regular);
}

.contact-form__chevron {
    position: absolute;
    top: 50%;
    right: 8px;
    width: 24px;
    height: 24px;
    color: var(--color-soft-purple);
    pointer-events: none;
    translate: 0 -50%;
    transition: rotate 0.2s ease;
}

.contact-form__combo[aria-expanded="true"] ~ .contact-form__chevron {
    rotate: 180deg;
}

.contact-form__listbox {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 5;
    max-height: min(25rem, 60vh);
    margin: 0;
    padding: 8px 12px;
    overflow-y: auto;
    overscroll-behavior: contain;
    list-style: none;
    border-radius: 16px;
    background: var(--color-white);
    box-shadow:
        0 12px 32px rgb(45 44 108 / 0.16),
        0 2px 6px rgb(45 44 108 / 0.08);
}

/* Set by contact-form.js when there is more room above than below. */
.contact-form__listbox.is-above {
    top: auto;
    bottom: calc(100% + 4px);
}

.contact-form__option {
    position: relative;
    padding: 16px 12px;
    border-radius: 8px;
    color: var(--color-dark-purple);
    font-size: 0.875rem;
    line-height: 1.5714;
    cursor: pointer;
}

.contact-form__option + .contact-form__option::before {
    content: "";
    position: absolute;
    top: 0;
    left: 12px;
    right: 12px;
    height: 1px;
    background: var(--color-light-purple);
}

/* The keyboard's option, and the mouse's: the script moves it on hover. */
.contact-form__option.is-active {
    background: var(--color-light-purple);
}

.contact-form__option[aria-selected="true"] {
    color: var(--color-primary);
    font-weight: var(--fw-semibold);
}

/* Message: ruled like writing paper. Each row is one line of text with the
   rule on its bottom edge; the rules scroll with the text once it outgrows
   ten rows. */

.contact-form__textarea {
    --row: max(1.75rem, calc(38 * var(--u)));
    --rule: var(--color-secondary);

    display: block;
    width: 100%;
    min-height: calc(3 * var(--row));
    max-height: calc(10 * var(--row));
    padding: 0 8px;
    border: 0;
    border-radius: 0;
    background: repeating-linear-gradient(
        to bottom,
        transparent 0 calc(var(--row) - 1px),
        var(--rule) calc(var(--row) - 1px) var(--row)
    );
    background-attachment: local;
    color: var(--color-dark-purple);
    font-family: var(--font-body);
    font-size: max(1rem, calc(18 * var(--u)));
    font-weight: var(--fw-medium);
    line-height: var(--row);
    resize: none;
    field-sizing: content;
    outline: none;
}

/* Whole pixels, so every rule lands on the pixel grid instead of blurring
   across two rows of it. */
@supports (width: round(1.5px, 1px)) {
    .contact-form__textarea {
        --row: round(max(1.75rem, calc(38 * var(--u))), 1px);
    }
}

.contact-form__textarea:focus {
    --rule: var(--color-primary);
}

.contact-form__textarea.wpcf7-not-valid {
    --rule: var(--contact-error);
}

/* Budget and timeline: the plugin's one-at-a-time checkboxes dressed as
   pills. Checkboxes rather than radios so a choice can be clicked off. */

.contact-form__chips {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
}

/* The plugin's wrappers step aside so each choice sits in the row. */
.contact-form__chips .wpcf7-form-control-wrap,
.contact-form__chips .wpcf7-checkbox {
    display: contents;
}

.contact-form__chips .wpcf7-list-item {
    display: flex;
    flex: 1 1 auto;
    margin: 0;
}

.contact-form__chips .wpcf7-list-item > label {
    position: relative;
    display: flex;
    flex: 1 1 auto;
}

.contact-form__chips input[type="checkbox"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
    appearance: none;
}

.contact-form__chips .wpcf7-list-item-label {
    flex: 1 1 auto;
    padding: 7px 16px;
    border: 1px solid var(--color-secondary);
    border-radius: 999px;
    color: var(--color-soft-purple);
    font-size: 0.875rem;
    line-height: 1.5714;
    text-align: center;
    white-space: nowrap;
    transition: border-color 0.2s ease, color 0.2s ease;
}

@media (hover: hover) {
    .contact-form__chips label:hover .wpcf7-list-item-label {
        border-color: var(--color-soft-purple);
    }
}

.contact-form__chips input:checked + .wpcf7-list-item-label {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.contact-form__chips input:focus-visible + .wpcf7-list-item-label {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.contact-form__chips .wpcf7-not-valid-tip {
    flex: 1 0 100%;
}

/* ── Send ─────────────────────────────────────────────────── */

.contact-form__send {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(24 * var(--u));
    text-align: center;
}

/* Once main.js has dressed them, global.css sizes every .btn-fx button to the
   header CTA. The size here is the header CTA's own, for when it has not. */
.contact-form__submit,
.contact-form__panel-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1.25rem;
    border: 1px solid var(--color-accent-01);
    border-radius: 999px;
    background: var(--color-accent-01);
    color: var(--color-dark-purple);
    font-family: var(--font-body);
    font-size: var(--text-title6);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-title6);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.contact-form__submit:focus-visible,
.contact-form__panel-button:focus-visible {
    outline-color: var(--contact-ring);
}

.contact-form__submit[aria-disabled="true"] {
    cursor: progress;
}

/* Under the card's form rather than in it, so it keeps the send button's gap. */
.contact-form__alt {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: calc(24 * var(--u)) 0 0;
    font-size: 0.875rem;
    text-align: center;
}

.contact-form__alt-text {
    font-style: italic;
    font-weight: var(--fw-medium);
    line-height: 2.1429;
    letter-spacing: -0.25px;
}

.contact-form__email {
    color: var(--color-dark-purple);
    font-weight: var(--fw-bold);
    line-height: 1.2857;
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 0.2em;
    transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.contact-form__email:hover,
.contact-form__email:focus-visible {
    color: var(--color-primary);
    text-decoration-color: currentColor;
}

/* ── Sent and error panels ───────────────────────────────── */

.contact-form__panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: calc(982 * var(--u));
    padding: calc(80 * var(--u)) var(--edge);
    text-align: center;
}

.contact-form__sticker {
    display: block;
    width: max(3.5rem, calc(80 * var(--u)));
    height: auto;
}

.contact-form__panel-title {
    margin: calc(16 * var(--u)) 0 0;
    color: inherit;
    font-family: var(--font-display);
    font-size: max(2.5rem, calc(80 * var(--u)));
    font-style: italic;
    font-weight: var(--fw-bold);
    line-height: 1.1;
    letter-spacing: 0;
    /* Focused by script when the panel opens, never by the visitor. */
    outline: none;
}

.contact-form__panel-subtitle {
    margin: calc(8 * var(--u)) 0 0;
    font-family: var(--font-display);
    font-size: max(1.75rem, calc(56 * var(--u)));
    font-weight: var(--fw-bold);
    line-height: 1.1429;
}

.contact-form__panel-body {
    max-width: 31.75em;
    margin-top: calc(40 * var(--u));
    font-size: max(1.125rem, calc(24 * var(--u)));
    font-weight: var(--fw-regular);
    line-height: 1.3333;
    letter-spacing: -0.75px;
}

.contact-form__panel--error .contact-form__panel-body {
    max-width: 29.85em;
    line-height: 1.6667;
}

.contact-form__panel-body p {
    margin: 0;
}

.contact-form__panel-body p + p {
    margin-top: 1em;
}

.contact-form__panel-body strong {
    font-weight: var(--fw-semibold);
}

.contact-form__panel-body a {
    color: inherit;
    text-decoration: underline;
    text-decoration-thickness: from-font;
    text-underline-offset: 0.15em;
}

.contact-form__panel-body a:hover,
.contact-form__panel-body a:focus-visible {
    color: var(--contact-link-hover);
}

.contact-form__panel-button {
    margin-top: calc(40 * var(--u));
}

/* ── Narrow card ─────────────────────────────────────────────
   Keyed to the form's own width rather than the viewport: the card is under
   400px wide on phones and on the smallest desktops alike. */

@container contact-form (max-width: 25rem) {
    .contact-form__fields {
        flex-direction: column;
        gap: 24px;
    }

    .contact-form__fields > .contact-form__field,
    .contact-form__select,
    .contact-form__chips,
    .contact-form__chips .wpcf7-list-item {
        flex: none;
    }

    .contact-form__row {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .contact-form__row--choices {
        gap: 16px;
    }

    .contact-form__chips {
        flex-direction: column;
    }
}

/* ── Tablets and phones ──────────────────────────────────────
   The design moves to the light ground and a single column: title, card,
   then the mascot on its own under the card. */

@media (max-width: 1024px) {
    .contact-form {
        /* Design pixels from here down. */
        --u: 1px;
        --contact-ring: var(--color-dark-purple);
        --contact-link-hover: var(--color-primary);

        background: var(--color-secondary);
        color: var(--color-dark-purple);
    }

    .contact-form__view {
        grid-template-columns: minmax(0, 42rem);
        grid-template-rows: none;
        justify-content: center;
        row-gap: 49px;
        min-height: 0;
        padding: 80px var(--container-pad);
    }

    .contact-form__intro,
    .contact-form__card,
    .contact-form__mascot {
        grid-column: 1;
        grid-row: auto;
    }

    .contact-form__intro {
        gap: 16px;
        letter-spacing: -0.5px;
    }

    .contact-form__title {
        max-width: none;
        font-size: 2.5rem;
        line-height: 1.2;
        letter-spacing: inherit;
    }

    .contact-form__subtitle {
        max-width: 32rem;
        font-size: 1.25rem;
        font-weight: var(--fw-semibold);
        line-height: 1.6;
        letter-spacing: inherit;
    }

    /* Leaves room on the right for the tilted sheet behind it. */
    .contact-form__card {
        width: 96.54%;
        min-height: 0;
        margin: 22px 0 0 2.07%;
        padding: 40px 24px;
    }

    .contact-form__card::before {
        top: -22px;
        left: 20px;
        width: calc(100% - 15px);
        height: calc(100% + 15px);
        background: var(--color-soft-purple);
        rotate: 1.44deg;
    }

    .contact-form__form {
        gap: 40px;
    }

    .contact-form__from {
        gap: 16px;
    }

    .contact-form__from-label,
    .contact-form__greeting {
        font-size: 1.125rem;
        line-height: 1.3333;
    }

    .contact-form__label,
    .contact-form__chips .wpcf7-list-item-label {
        font-size: 1rem;
        line-height: 1.5;
    }

    .contact-form__input,
    .contact-form__native,
    .contact-form__combo,
    .contact-form__textarea {
        font-size: 1rem;
    }

    .contact-form__input::placeholder,
    .contact-form__textarea::placeholder,
    .contact-form__combo-value.is-placeholder {
        font-size: 1rem;
    }

    .contact-form__textarea {
        --row: 38px;
    }

    .contact-form__mascot {
        justify-self: center;
        width: min(100%, 26rem);
        margin: 0;
    }

    .contact-form__panel {
        min-height: min(100svh, 42rem);
        padding: 80px var(--container-pad);
    }

    .contact-form__sticker {
        width: 64px;
    }

    .contact-form__panel-title {
        margin-top: 16px;
        font-size: 2.5rem;
        line-height: 1.2;
    }

    .contact-form__panel-subtitle {
        margin-top: 8px;
        font-size: 1.75rem;
        line-height: 1.2857;
    }

    .contact-form__panel-body,
    .contact-form__panel--error .contact-form__panel-body {
        max-width: 34rem;
        margin-top: 24px;
        font-size: 1rem;
        line-height: 1.625;
        letter-spacing: -0.25px;
    }

    .contact-form__panel-button {
        margin-top: 32px;
    }
}

/* ── Stacked ─────────────────────────────────────────────────
   The title centred over the card on the light ground, with no mascot and no
   tilted sheet, as on the referral page. After the tablet rules so the light
   ground holds there too. */

.contact-form--stacked {
    --contact-ring: var(--color-dark-purple);
    --contact-link-hover: var(--color-primary);

    background: var(--color-light-purple);
    color: var(--color-dark-purple);
}

.contact-form--stacked .contact-form__view {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    justify-items: center;
    row-gap: calc(59 * var(--u));
    min-height: 0;
    padding: calc(103 * var(--u)) var(--edge) calc(104 * var(--u));
}

.contact-form--stacked .contact-form__intro,
.contact-form--stacked .contact-form__card {
    grid-column: 1;
    grid-row: auto;
}

.contact-form--stacked .contact-form__intro {
    align-items: center;
    gap: 0;
    text-align: center;
}

/* Philosopher Bold Italic 80/112 over Philosopher Bold 48/56, both tracked in
   by 1.5px. */
.contact-form--stacked .contact-form__title {
    max-width: none;
    line-height: 1.4;
    letter-spacing: -0.01875em;
    text-wrap: balance;
}

.contact-form--stacked .contact-form__subtitle {
    max-width: none;
    font-family: var(--font-display);
    font-size: max(1.5rem, calc(48 * var(--u)));
    font-weight: var(--fw-bold);
    line-height: 1.1667;
    letter-spacing: -0.03125em;
    text-wrap: balance;
}

.contact-form--stacked .contact-form__card {
    width: min(100%, max(20rem, calc(630 * var(--u))));
    min-height: 0;
    margin: 0;
}

.contact-form--stacked .contact-form__card::before {
    content: none;
}

.contact-form--stacked .contact-form__form {
    gap: calc(40 * var(--u));
}

/* The sentences around the blanks: Raleway Medium 18/30. */
.contact-form--stacked .contact-form__label {
    font-weight: var(--fw-medium);
    line-height: 1.6667;
}

/* "From:" and the greeting: Raleway Bold 18/24, the tablet leading. */
.contact-form--stacked .contact-form__from-label,
.contact-form--stacked .contact-form__greeting {
    line-height: 1.3333;
}

@media (max-width: 1024px) {
    .contact-form--stacked .contact-form__view {
        row-gap: 40px;
        padding: 80px var(--container-pad);
    }

    .contact-form--stacked .contact-form__intro {
        gap: 8px;
        max-width: 42rem;
    }

    .contact-form--stacked .contact-form__title {
        line-height: 1.2;
    }

    .contact-form--stacked .contact-form__subtitle {
        font-size: 1.5rem;
        line-height: 1.3333;
    }

    .contact-form--stacked .contact-form__label {
        line-height: 1.5;
    }
}

@media (prefers-reduced-motion: reduce) {
    .contact-form__line::after,
    .contact-form__native,
    .contact-form__combo,
    .contact-form__chevron,
    .contact-form__chips .wpcf7-list-item-label,
    .contact-form__email {
        transition: none;
    }
}