/* Form boundaries and background share the small grid's origin and unit. */
.cosma-connect-heading { padding: 2rem var(--cosma-editorial-inset) 3rem; background: #fff; }
.cosma-connect-heading h1 { font-family: var(--cosma-display-font); font-weight: 700; color: #43b4ea; font-size: clamp(46px, 6.25vw, 120px); line-height: 1.2; margin: 0; }
.cosma-connect-surface { padding-block: var(--cosma-unit); }
.cosma-connect-content { width: calc(var(--cosma-unit) * 14); margin-inline: auto; }
.cosma-connect-content > p:empty { display: none; }
.cosma-connect .formContainer { --cosma-form-row: round(up, 96px, var(--cosma-unit)); display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); grid-auto-rows: var(--cosma-form-row); }
.cosma-connect .formGroup { min-width: 0; background: #fff; padding: .65rem var(--cosma-copy-padding); position: relative; }
.cosma-connect .smallCol { grid-column: span 4; }
.cosma-connect .largeCol { grid-column: span 6; }
.cosma-connect .w67 { grid-column: 5 / -1; grid-row: span 3; display: flex; flex-direction: column; }
.cosma-connect .blank { display: none; }
.cosma-connect .termsCheck { grid-column: 5 / 12; display: grid; grid-template-columns: 44px minmax(0, 1fr); align-content: center; align-items: center; column-gap: 1rem; }
.cosma-connect .formBtn { grid-column: 12 / -1; display: flex; align-items: center; justify-content: center; }
.cosma-connect .formGroup p { margin: 0; }
.cosma-connect .formGroup label, .cosma-connect select { font-family: var(--cosma-body-font); font-size: clamp(12px, .95vw, 16px); font-weight: 500; line-height: 1.25; letter-spacing: .065em; text-transform: uppercase; }
.cosma-connect :is(input[type=text], input[type=email], select, textarea) { display: block; width: 100%; min-width: 0; max-width: 100%; border: 0; border-radius: 0; background: #fff; color: #111; font: inherit; min-height: 44px; padding: .35rem 0; }
.cosma-connect .selectBx { display: flex; align-items: center; }
.cosma-connect .selectBx .field { width: 100%; }
.cosma-connect select { font-size: clamp(12px, .95vw, 16px); cursor: pointer; }
.cosma-connect .w67 .field, .cosma-connect .w67 .field p, .cosma-connect .w67 .wpcf7-form-control-wrap { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.cosma-connect textarea { height: 0; min-height: 120px; flex: 1; resize: none; }
.cosma-connect .termsCheck .wpcf7-list-item { margin: 0; }
.cosma-connect .termsCheck input { appearance: none; width: 28px; height: 28px; border: 1px solid var(--cosma-line); border-radius: 0; background: #fff; margin: 0; cursor: pointer; }
.cosma-connect .termsCheck input:checked { appearance: auto; accent-color: #43b4ea; }
.cosma-connect .termsCheck label { display: flex; padding: 8px; }
.cosma-connect .termsCheck .wpcf7-list-item-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.cosma-connect .termsCheckDis { font-size: clamp(12px, .95vw, 16px); line-height: 1.35; }
.cosma-connect input[type=submit] { border: 0; background: transparent; color: #2681ae; font: inherit; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; padding: 1rem; min-height: 44px; cursor: pointer; }
.cosma-connect input[type=submit]:hover { color: #111; }
.cosma-connect .wpcf7-spinner { position: absolute; margin: 0; right: .25rem; bottom: .25rem; }
/* Keep CF7's accessible error summary, but do not insert visible inline tips. */
.cosma-connect .wpcf7-not-valid-tip { display: none; }
.cosma-connect .formGroup:has(.wpcf7-not-valid, [aria-invalid="true"]) { background: #fff3ef; }
.cosma-connect .formGroup:has(.wpcf7-not-valid, [aria-invalid="true"]) :is(input[type=text], input[type=email], textarea) { background: transparent; }
.cosma-connect .formGroup:has(.wpcf7-not-valid, [aria-invalid="true"]) > p > label,
.cosma-connect .termsCheck:has(.wpcf7-not-valid, [aria-invalid="true"]) .termsCheckDis { color: #9b3826; }
.cosma-connect .termsCheck .field, .cosma-connect .termsCheck .field p,
.cosma-connect .termsCheck .wpcf7-form-control-wrap { display: contents; }
.cosma-connect .termsCheckDis { grid-column: 2; grid-row: 1; }
.cosma-connect .wpcf7 form .wpcf7-response-output {
    margin: var(--cosma-unit) 0 0; padding: var(--cosma-copy-padding);
    min-height: round(up, 96px, var(--cosma-unit)); display: flex; align-items: center;
    position: relative; background: #fff; border: 0; color: #111;
    font-size: clamp(14px, 1.1vw, 18px); line-height: 1.5;
}
.cosma-connect .wpcf7 form:is(.init, .resetting, .submitting) .wpcf7-response-output { visibility: hidden; }
.cosma-connect .wpcf7 form:is(.invalid, .unaccepted, .failed, .aborted, .spam) .wpcf7-response-output { box-shadow: inset 3px 0 #a82828; }
.cosma-connect .wpcf7 form.sent .wpcf7-response-output { box-shadow: inset 3px 0 #257447; }
.cosma-connect select { appearance: none; padding-inline-end: 1.5rem; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10'%3E%3Cpath d='M1 1l7 7 7-7' fill='none' stroke='%23111' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right center; }
@media (forced-colors: active) { .cosma-connect select { appearance: auto; } }
@media (width < 782px) {
    .cosma-connect-content { width: var(--cosma-wide-width); }
    .cosma-connect .formContainer { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .cosma-connect .formGroup { grid-column: 1 / -1; grid-row: auto; }
    .cosma-connect .w67 { grid-row: span 3; min-height: 0; }
    .cosma-connect .termsCheck { padding-block: 1rem; }
    .cosma-connect-heading { padding-block: 1.5rem 2rem; }
}

/* Match the surface gradient: each stroke starts at its grid coordinate and
   extends right/down. Outside box-shadows painted one pixel before that line. */
.cosma-connect .formGroup::after,
.cosma-connect .wpcf7 form .wpcf7-response-output::after {
    content: "";
    position: absolute;
    inset: 0 calc(-1 * var(--cosma-stroke)) calc(-1 * var(--cosma-stroke)) 0;
    border: var(--cosma-stroke) solid var(--cosma-line);
    pointer-events: none;
}

/* A second cue remains visible without relying only on the tinted fill. */
.cosma-connect .formGroup:has(.wpcf7-not-valid, [aria-invalid="true"])::before {
    content: "!"; position: absolute; right: .5rem; top: .5rem;
    color: #9b3826; font-size: 14px; font-weight: 900; line-height: 1;
}