@layer ds.block {
    .contact-panel__grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--space-6); align-items: start; }

    .contact-panel__form-card { display: flex; flex-direction: column; gap: var(--space-5); padding: var(--space-8); }

    .contact-panel__form-title { margin: 0; font-family: var(--font-display); font-size: var(--text-h3); font-weight: var(--font-weight-bold); color: var(--color-heading); }

    .contact-panel__side { display: flex; flex-direction: column; gap: var(--space-6); }

    .contact-panel__direct {
        display: flex;
        flex-direction: column;
        gap: var(--space-5);
        background: var(--color-heading);
        color: var(--color-text-invert);
        border-radius: var(--radius-ui);
        padding: var(--space-7);
    }

    .contact-panel__direct-title { margin: 0; font-family: var(--font-display); font-size: var(--text-h4); font-weight: var(--font-weight-bold); color: var(--color-text-invert); }

    .contact-panel__direct-link { display: flex; align-items: center; gap: var(--space-4); font-size: var(--text-small); }
    .contact-panel__direct-link a { color: var(--brand-sage-pale); text-decoration: none; }
    .contact-panel__direct-link a:hover { color: var(--brand-apricot); }

    .contact-panel__direct-icon { width: 1.35rem; height: 1.35rem; color: var(--brand-apricot); stroke-width: 1.4; }
    .contact-panel__direct-icon:has(use[href="#i-facebook"]) { fill: currentColor; stroke: none; }

    .contact-panel__direct-cta { justify-content: center; margin-top: var(--space-2); }

    .contact-panel__notice {
        display: flex;
        gap: var(--space-4);
        align-items: flex-start;
        background: var(--color-surface-2);
        border-radius: var(--radius-ui);
        padding: var(--space-6);
    }

    .contact-panel__notice-icon { width: 1.5rem; height: 1.5rem; color: var(--color-heading); stroke-width: 1.3; flex-shrink: 0; }

    .contact-panel__notice-text { font-size: var(--text-small); line-height: var(--line-height-base); color: var(--color-text); }
    .contact-panel__notice-text p { margin: 0; }
    .contact-panel__notice-text strong { color: var(--color-heading); }
    .contact-panel__notice-text a { color: var(--color-primary); font-weight: var(--font-weight-medium); }

    @media (max-width: 64rem) {
        .contact-panel__grid { grid-template-columns: 1fr; }
    }

    /* ---- Native UserForms markup ($Form, embedded above) ----
       Rendered outside our data-slot pipeline, so it can't carry data-slot
       annotations — styled by hand against UserForms' own markup instead. */

    .contact-panel__form-card .userform-fields {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--space-5);
    }

    /* Navn + E-mail share a row, like the design; every field after that
       (topic, message, spam-protection) spans the full width. Position-based
       since UserForms fields don't carry a "layout" annotation of their own. */
    .contact-panel__form-card .userform-fields > .field:nth-child(n+3) {
        grid-column: 1 / -1;
    }

    @media (max-width: 30rem) {
        .contact-panel__form-card .userform-fields { grid-template-columns: 1fr; }
        .contact-panel__form-card .userform-fields > .field { grid-column: 1 / -1; }
    }

    .contact-panel__form-card .field {
        display: flex;
        flex-direction: column;
        gap: var(--space-2);
        margin: 0;
    }

    .contact-panel__form-card .field .form-label {
        font-size: var(--text-small);
        font-weight: var(--font-weight-medium);
        color: var(--color-text);
    }

    .contact-panel__form-card .middleColumn { width: 100%; }

    .contact-panel__form-card input[type="text"],
    .contact-panel__form-card input[type="email"],
    .contact-panel__form-card input[type="tel"],
    .contact-panel__form-card input[type="number"],
    .contact-panel__form-card select,
    .contact-panel__form-card textarea {
        width: 100%;
        font: inherit;
        font-size: var(--text-body);
        color: var(--color-text);
        background: var(--color-bg);
        border: 1.5px solid var(--color-border);
        border-radius: var(--radius-ui);
        padding: 0.8em 1em;
        box-sizing: border-box;
        transition: border-color 0.16s ease, box-shadow 0.16s ease;
    }

    .contact-panel__form-card textarea { min-height: 8rem; resize: vertical; }

    .contact-panel__form-card input:focus,
    .contact-panel__form-card select:focus,
    .contact-panel__form-card textarea:focus {
        outline: none;
        border-color: var(--color-primary);
        box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary) 16%, transparent);
    }

    .contact-panel__form-card .message {
        display: block;
        margin-top: var(--space-2);
        font-size: var(--text-xs);
    }

    .contact-panel__form-card .message.required,
    .contact-panel__form-card .message.error,
    .contact-panel__form-card .message.bad { color: var(--color-danger); }

    .contact-panel__form-card p.message {
        padding: var(--space-4) var(--space-5);
        border-radius: var(--radius-ui);
        background: color-mix(in srgb, var(--color-danger) 10%, transparent);
    }

    .contact-panel__form-card p.message.good {
        background: color-mix(in srgb, var(--color-success) 12%, transparent);
        color: var(--color-success);
    }

    .contact-panel__form-card .Actions {
        display: flex;
        margin-top: var(--space-2);
    }

    .contact-panel__form-card .Actions .action {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        padding: 0.85em 1.5em;
        border: 1.5px solid transparent;
        border-radius: var(--radius-button);
        background: var(--color-primary);
        color: var(--color-on-primary);
        font: inherit;
        font-weight: var(--font-weight-medium);
        cursor: pointer;
        transition: background-color 0.16s ease;
    }

    .contact-panel__form-card .Actions .action:hover { background: var(--color-primary-hover); }

    /* The invisible reCAPTCHA (Nocaptcha) field: no visible checkbox to show,
       so hide its label/holder without display:none (some spam checks flag that). */
    .contact-panel__form-card .field.nocaptcha {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
    }
}