/* ============================================================
   10-forms.css
   WhatsApp pre-quote form, inputs, labels, validation, notice,
   live preview, dark footer form variant.
   Mirrors SiteFooter.tsx (the 10-field WhatsApp form).
   ============================================================ */

.ss-form {
        background: var(--ss-white);
        border: 1px solid var(--ss-line);
        border-radius: var(--ss-radius-lg);
        padding: var(--ss-space-6);
        box-shadow: var(--ss-shadow-sm);
}

.ss-form__grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--ss-space-4);
}
@media (min-width: 640px) {
        .ss-form__grid { grid-template-columns: 1fr 1fr; }
}

.ss-field {
        display: flex;
        flex-direction: column;
        gap: 0.4rem;
}

.ss-field--full { grid-column: 1 / -1; }

.ss-field label {
        font-size: var(--ss-fs-xs);
        font-weight: 500;
        font-family: var(--font-mono);
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--ss-gray);
}

.ss-field .ss-field__hint {
        font-size: var(--ss-fs-xs);
        color: var(--ss-gray);
}

.ss-field .ss-field__error {
        font-size: var(--ss-fs-xs);
        color: #c0392b;
        display: none;
}

.ss-field.has-error .ss-field__error { display: block; }
.ss-field.has-error input,
.ss-field.has-error textarea,
.ss-field.has-error select {
        border-color: #c0392b;
}

.ss-field input[type="text"],
.ss-field input[type="tel"],
.ss-field input[type="email"],
.ss-field select,
.ss-field textarea {
        width: 100%;
        padding: 0.75rem 1rem;
        border-radius: var(--ss-radius-md);
        border: 1px solid var(--ss-line);
        background: var(--ss-offwhite);
        color: var(--ss-black);
        font-size: var(--ss-fs-sm);
        font-family: inherit;
        transition: border-color var(--ss-dur-fast) var(--ss-ease),
                box-shadow var(--ss-dur-fast) var(--ss-ease);
}

.ss-field input:focus,
.ss-field select:focus,
.ss-field textarea:focus {
        outline: none;
        border-color: var(--ss-black);
        box-shadow: var(--ss-focus);
        background: var(--ss-white);
}

.ss-field textarea { resize: vertical; min-height: 120px; }

.ss-form__actions {
        display: flex;
        gap: var(--ss-space-3);
        align-items: center;
        margin-top: var(--ss-space-4);
        flex-wrap: wrap;
}

.ss-form__notice {
        background: var(--ss-gray-light);
        border-radius: var(--ss-radius-md);
        padding: var(--ss-space-3) var(--ss-space-4);
        font-size: var(--ss-fs-sm);
        color: var(--ss-ink-soft);
        display: flex;
        gap: 0.5rem;
        align-items: flex-start;
        margin-top: var(--ss-space-4);
}

.ss-form__notice svg { width: 20px; height: 20px; flex-shrink: 0; }

.ss-form__status {
        font-size: var(--ss-fs-sm);
        color: var(--ss-ink-soft);
}

.ss-form__status.is-error { color: #c0392b; }
.ss-form__status.is-success { color: #1f7a3f; }

/* Checkbox / radio */
.ss-check {
        display: flex;
        gap: 0.5rem;
        align-items: center;
        font-size: var(--ss-fs-sm);
        color: var(--ss-ink-soft);
}

.ss-check input { width: 18px; height: 18px; }

/* Pre-quote questions list */
.ss-prequote {
        list-style: none;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
}

.ss-prequote li {
        display: flex;
        gap: 0.5rem;
        align-items: flex-start;
        font-size: var(--ss-fs-sm);
        color: var(--ss-ink-soft);
}

.ss-prequote svg { width: 18px; height: 18px; color: var(--ss-black); background: var(--ss-lime); border-radius: 4px; flex-shrink: 0; margin-top: 2px; }

/* ============================================================
   FOOTER CONTACT FORM (dark variant)
   ============================================================ */
.ss-footer-form {
        background: var(--card);
        border: 1px solid rgba(12,12,12,0.1);
        border-radius: 1.5rem;
        overflow: hidden;
        box-shadow: var(--ss-shadow-sm);
}
.ss-footer-form__grid {
        display: grid;
        grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
        .ss-footer-form__grid { grid-template-columns: 0.6fr 1.4fr; }
}
.ss-footer-form__intro {
        padding: clamp(1.75rem, 4vw, 2.5rem);
        background: rgba(236,234,231,0.4);
        border-bottom: 1px solid rgba(12,12,12,0.1);
        display: flex;
        flex-direction: column;
        justify-content: center;
}
@media (min-width: 1024px) {
        .ss-footer-form__intro {
                border-bottom: none;
                border-right: 1px solid rgba(12,12,12,0.1);
        }
}
.ss-footer-form__intro .eyebrow {
        font-family: var(--font-mono);
        font-size: 0.75rem;
        color: var(--ss-violet);
        text-transform: uppercase;
        letter-spacing: 0.04em;
        margin-bottom: 0.5rem;
}
.ss-footer-form__intro h2 {
        font-family: var(--font-display);
        font-weight: 500;
        font-size: 1.875rem;
        line-height: 1.2;
        letter-spacing: -0.02em;
        margin: 0;
}
.ss-footer-form__intro p {
        font-size: 0.875rem;
        color: var(--ss-gray);
        margin-top: 0.75rem;
        line-height: 1.6;
}
.ss-footer-form__intro ul {
        list-style: none;
        padding: 0; margin: 1rem 0 0;
        display: flex;
        flex-direction: column;
        gap: 0.375rem;
}
.ss-footer-form__intro li {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 0.75rem;
        color: var(--ss-gray);
}
.ss-footer-form__intro li svg { width: 13px; height: 13px; color: var(--ss-violet); }

.ss-footer-form__body {
        padding: clamp(1.75rem, 4vw, 2.5rem);
}

/* Live preview pane (shows the message that will be sent to WhatsApp) */
.ss-form__preview {
        border-radius: var(--ss-radius-md);
        background: rgba(236,234,231,0.6);
        border: 1px solid rgba(12,12,12,0.05);
        padding: 0.75rem;
}
.ss-form__preview .head {
        font-family: var(--font-mono);
        font-size: 0.75rem;
        color: var(--ss-gray);
        margin-bottom: 0.25rem;
        display: flex;
        align-items: center;
        gap: 0.375rem;
}
.ss-form__preview .head svg { width: 12px; height: 12px; color: var(--ss-violet); }
.ss-form__preview .body {
        font-family: var(--font-mono);
        font-size: 0.75rem;
        color: rgba(12,12,12,0.8);
        line-height: 1.5;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
}

/* Success state */
.ss-form__success {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 3rem 1rem;
        gap: 1rem;
        height: 100%;
}
.ss-form__success .ic {
        padding: 1rem;
        background: rgba(229,247,146,0.3);
        color: var(--ss-black);
        border-radius: 9999px;
}
.ss-form__success .ic svg { width: 44px; height: 44px; }
.ss-form__success h3 {
        font-family: var(--font-display);
        font-weight: 500;
        font-size: 1.5rem;
        margin: 0;
}
.ss-form__success p {
        color: var(--ss-gray);
        max-width: 24rem;
        font-size: 0.875rem;
}

/* Footer giant typography stamp */
.ss-footer__stamp {
        width: 100%;
        text-align: center;
        overflow: hidden;
        border-top: 1px solid rgba(12,12,12,0.1);
        padding-top: 2rem;
        pointer-events: none;
        user-select: none;
}
.ss-footer__stamp h2 {
        font-family: var(--font-display);
        font-weight: 900;
        font-size: clamp(3rem, 8vw, 11rem);
        line-height: 1;
        letter-spacing: -0.04em;
        color: rgba(12,12,12,0.06);
        text-transform: uppercase;
        margin: 0;
}

/* ============================================================
   FOOTER REDESIGN (Phase 07) — mirrors src/components/site/site-footer.tsx
   Light background, white cards, 3-column grid, giant stamp.
   ============================================================ */
.ss-footer {
        background: var(--ss-offwhite);
        color: var(--ss-black);
        padding: 4rem 0 2rem;
        border-top: 1px solid rgba(12,12,12,0.1);
        position: relative;
        overflow: hidden;
}
.ss-footer__form-card {
        background: var(--ss-white, #fff);
        border: 1px solid rgba(12,12,12,0.1);
        border-radius: 1.5rem;
        overflow: hidden;
        box-shadow: 0 4px 24px -8px rgba(12,12,12,0.08);
}
.ss-footer__form-intro {
        padding: 2rem;
        background: rgba(236,234,231,0.4);
        border-bottom: 1px solid rgba(12,12,12,0.1);
}
@media (min-width: 1024px) {
        .ss-footer__form-intro {
                border-bottom: none;
                border-right: 1px solid rgba(12,12,12,0.1);
        }
}
.ss-footer__form-body {
        padding: 2rem;
}
/* Reset the .ss-form card styling when embedded in the footer card */
.ss-footer__form-card .ss-form {
        background: transparent;
        border: none;
        padding: 0;
        box-shadow: none;
}
.ss-footer__brand-row {
        text-align: center;
        padding: 1.5rem 0;
}
.ss-footer__brand-symbol-row {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.75rem;
}
.ss-footer__brand-symbol {
        height: 2.5rem;
        width: auto;
}
.ss-footer__brand-name {
        font-family: var(--font-display);
        font-weight: 700;
        font-size: clamp(2rem, 4vw, 3rem);
        letter-spacing: -0.02em;
        margin: 0;
}
.ss-footer__brand-tagline {
        color: var(--ss-gray);
        max-width: 28rem;
        margin: 0.75rem auto 0;
        font-size: 0.875rem;
        line-height: 1.6;
}
.ss-footer__brand-chips {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        justify-content: center;
        margin-top: 1rem;
}
.ss-footer__cards {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1.25rem;
        margin-bottom: 2rem;
}
@media (min-width: 768px) {
        .ss-footer__cards {
                grid-template-columns: repeat(3, 1fr);
        }
}
.ss-footer__card {
        background: var(--ss-white, #fff);
        border: 1px solid rgba(12,12,12,0.1);
        border-radius: 1rem;
        padding: 1.5rem;
        box-shadow: 0 2px 12px -4px rgba(12,12,12,0.06);
}
.ss-footer__card h4 {
        font-family: var(--font-mono);
        font-size: 0.65rem;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: var(--ss-gray);
        margin-bottom: 1rem;
}
.ss-footer__card ul {
        list-style: none;
        padding: 0;
        margin: 0;
}
.ss-footer__card li {
        margin-bottom: 0.5rem;
}
.ss-footer__card a {
        color: var(--ss-black);
        text-decoration: none;
        font-weight: 500;
        transition: color 0.2s;
}
.ss-footer__card a:hover {
        color: var(--ss-violet);
}
.ss-footer__card-divider {
        margin-top: 1rem;
        padding-top: 0.75rem;
        border-top: 1px solid rgba(12,12,12,0.1);
}
.ss-footer__card-pending {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 0.75rem;
        color: var(--ss-gray);
        margin-bottom: 0.375rem;
}
.ss-footer__card-pending:hover {
        color: var(--ss-violet);
}
.ss-footer__pending-badge {
        font-size: 0.5625rem;
        background: var(--ss-gray-light);
        color: var(--ss-gray);
        padding: 0.125rem 0.375rem;
        border-radius: 0.25rem;
        letter-spacing: 0.04em;
}
/* Contact rows inside footer cards */
.ss-footer__contact-list {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
}
.ss-footer__contact-row {
        display: flex;
        align-items: center;
        gap: 0.75rem;
}
.ss-footer__contact-ic {
        display: grid;
        place-items: center;
        width: 2rem;
        height: 2rem;
        border-radius: 0.5rem;
        background: var(--ss-gray-light);
        color: var(--ss-black);
        flex-shrink: 0;
        transition: background 0.2s, color 0.2s;
}
.ss-footer__contact-row:hover .ss-footer__contact-ic {
        background: rgba(184,165,230,0.2);
        color: var(--ss-violet);
}
.ss-footer__contact-text {
        display: flex;
        flex-direction: column;
        line-height: 1.2;
        min-width: 0;
}
.ss-footer__contact-label {
        font-size: 0.625rem;
        font-family: var(--font-mono);
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--ss-gray);
}
.ss-footer__contact-text a,
.ss-footer__contact-text span:last-child {
        font-size: 0.875rem;
        font-weight: 500;
        color: var(--ss-black);
        text-decoration: none;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
}
.ss-footer__contact-text a:hover {
        color: var(--ss-violet);
}
.ss-footer__ph {
        font-size: 0.5625rem;
        color: rgba(111,111,111,0.7);
}
.ss-footer__social-link {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        width: 100%;
}
.ss-footer__services-label {
        font-family: var(--font-mono);
        font-size: 0.625rem;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: var(--ss-gray);
        margin: 0 0 0.5rem;
}
.ss-footer__services-chips {
        display: flex;
        flex-wrap: wrap;
        gap: 0.25rem;
}
.ss-footer__service-chip {
        font-size: 0.6875rem;
        color: var(--ss-gray);
        padding: 0.125rem 0.5rem;
        border-radius: 0.25rem;
        text-decoration: none;
        transition: color 0.2s, background 0.2s;
}
.ss-footer__service-chip:hover {
        color: var(--ss-violet);
        background: rgba(184,165,230,0.1);
}
.ss-footer__stamp {
        text-align: center;
        font-family: var(--font-display);
        font-weight: 900;
        font-size: clamp(3rem, 12vw, 11rem);
        line-height: 1;
        letter-spacing: -0.05em;
        color: rgba(12,12,12,0.06);
        text-transform: uppercase;
        padding: 2rem 0;
        border-top: 1px solid rgba(12,12,12,0.1);
        overflow: hidden;
        user-select: none;
        pointer-events: none;
}
.ss-footer__legal {
        border-top: 1px solid rgba(12,12,12,0.1);
        padding-top: 1.25rem;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 0.75rem;
        font-family: var(--font-mono);
        font-size: 0.7rem;
        color: var(--ss-gray);
}
.ss-footer__legal-left {
        display: flex;
        align-items: center;
        gap: 0.625rem;
}
.ss-footer__legal-symbol {
        height: 1rem;
        width: auto;
}
.ss-footer__legal-links {
        display: flex;
        gap: 1rem;
        flex-wrap: wrap;
}
.ss-footer__legal-links a {
        color: var(--ss-gray);
        text-decoration: none;
        transition: color 0.2s;
}
.ss-footer__legal-links a:hover {
        color: var(--ss-violet);
}
.ss-footer__legal-status {
        letter-spacing: 0.04em;
}
/* Full-width WhatsApp CTA inside the Contacto card */
.ss-cta--block {
        width: 100%;
        justify-content: center;
}

/* ============================================================
   REMAINING-PAGES — Contact page (form + sidebar) +
   Legal page (content + sidebar) + legal warning badge.
   ============================================================ */

/* ---------- Contact page grid ---------- */
.ss-contact-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--ss-space-6);
}
@media (min-width: 1024px) {
        .ss-contact-grid {
                grid-template-columns: 1.5fr 1fr;
                gap: var(--ss-space-7);
                align-items: start;
        }
}

/* Contact form wrapper */
.ss-contact-form-wrap {
        background: var(--ss-white, #fff);
        border: 1px solid rgba(12, 12, 12, 0.1);
        border-radius: 1.5rem;
        padding: clamp(1.5rem, 4vw, 2.5rem);
        box-shadow: var(--ss-shadow-sm);
}
.ss-contact-form-head {
        margin-bottom: var(--ss-space-5);
}
.ss-contact-form-head .ss-section__title {
        font-size: clamp(1.5rem, 3vw, 2rem);
        margin: 0.5rem 0 0.75rem;
}
.ss-contact-form-head .ss-section__subtitle {
        font-size: 0.9375rem;
        color: var(--ss-gray);
        margin: 0;
}
.ss-form--contact {
        background: transparent;
        border: none;
        padding: 0;
        box-shadow: none;
}

/* ---------- Contact sidebar ---------- */
.ss-contact-sidebar {
        display: flex;
        flex-direction: column;
        gap: var(--ss-space-4);
}
.ss-contact-sidebar__title {
        font-family: var(--font-display);
        font-weight: 500;
        font-size: 1.5rem;
        margin: 0 0 0.5rem;
        color: var(--ss-black);
}
.ss-contact-sidebar__intro {
        font-size: 0.875rem;
        color: var(--ss-gray);
        margin: 0 0 0.5rem;
        line-height: 1.55;
}
.ss-contact-sidebar__list {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
}
.ss-contact-sidebar__row {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.625rem 0;
        border-bottom: 1px solid rgba(12, 12, 12, 0.06);
}
.ss-contact-sidebar__row--link a {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        width: 100%;
        color: var(--ss-black);
        text-decoration: none;
        transition: color 0.18s var(--ss-ease);
}
.ss-contact-sidebar__row--link a:hover {
        color: var(--ss-violet);
}
.ss-contact-sidebar__ic {
        display: grid;
        place-items: center;
        width: 2.25rem;
        height: 2.25rem;
        border-radius: 0.625rem;
        background: var(--ss-gray-light);
        color: var(--ss-black);
        flex-shrink: 0;
        transition: background 0.18s var(--ss-ease), color 0.18s var(--ss-ease);
}
.ss-contact-sidebar__row--link a:hover .ss-contact-sidebar__ic,
.ss-contact-sidebar__row--link:hover .ss-contact-sidebar__ic {
        background: rgba(184, 165, 230, 0.25);
        color: var(--ss-violet);
}
.ss-contact-sidebar__ic svg {
        width: 16px;
        height: 16px;
}
.ss-contact-sidebar__text {
        display: flex;
        flex-direction: column;
        line-height: 1.25;
        min-width: 0;
        flex-grow: 1;
}
.ss-contact-sidebar__label {
        font-family: var(--font-mono);
        font-size: 0.625rem;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--ss-gray);
}
.ss-contact-sidebar__value {
        font-size: 0.9375rem;
        font-weight: 500;
        color: var(--ss-black);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
}
.ss-contact-sidebar__arrow {
        color: rgba(111, 111, 111, 0.4);
        transition: color 0.18s var(--ss-ease), transform 0.18s var(--ss-ease);
        flex-shrink: 0;
}
.ss-contact-sidebar__arrow svg {
        width: 14px;
        height: 14px;
}
.ss-contact-sidebar__row--link a:hover .ss-contact-sidebar__arrow,
.ss-contact-sidebar__row--link:hover .ss-contact-sidebar__arrow {
        color: var(--ss-violet);
        transform: translateX(2px);
}

/* Sidebar cards */
.ss-contact-sidebar__card {
        background: var(--ss-white, #fff);
        border: 1px solid rgba(12, 12, 12, 0.1);
        border-radius: 1rem;
        padding: 1.25rem;
        box-shadow: var(--ss-shadow-sm);
}
.ss-contact-sidebar__card h3 {
        font-family: var(--font-display);
        font-weight: 600;
        font-size: 1rem;
        margin: 0 0 0.5rem;
        color: var(--ss-black);
}
.ss-contact-sidebar__card p {
        font-size: 0.8125rem;
        color: var(--ss-gray);
        margin: 0 0 0.75rem;
        line-height: 1.5;
}
.ss-contact-sidebar__response {
        font-size: 1rem;
        font-weight: 500;
        color: var(--ss-black);
        margin: 0.625rem 0 0 !important;
}
.ss-contact-sidebar__card--privacy {
        border-left: 4px solid var(--ss-violet);
}
.ss-contact-sidebar__card--faq {
        border-left: 4px solid var(--ss-turquoise);
}

/* ---------- Legal / default page grid ---------- */
.ss-page-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--ss-space-6);
}
@media (min-width: 1024px) {
        .ss-page-grid {
                grid-template-columns: 1fr 18rem;
                gap: var(--ss-space-7);
                align-items: start;
        }
}

/* Page sidebar */
.ss-page-sidebar {
        display: flex;
        flex-direction: column;
        gap: var(--ss-space-4);
        position: sticky;
        top: 6rem;
}
.ss-page-sidebar__title {
        font-family: var(--font-mono);
        font-size: 0.65rem;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: var(--ss-gray);
        margin: 0 0 0.25rem;
}
.ss-page-sidebar__list {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        background: var(--ss-white, #fff);
        border: 1px solid rgba(12, 12, 12, 0.1);
        border-radius: 1rem;
        padding: 1.25rem;
        box-shadow: var(--ss-shadow-sm);
}
.ss-page-sidebar__list li {
        margin: 0;
}
.ss-page-sidebar__list .ss-link-arrow {
        font-size: 0.9375rem;
}
.ss-page-sidebar__card {
        background: var(--ss-white, #fff);
        border: 1px solid rgba(12, 12, 12, 0.1);
        border-radius: 1rem;
        padding: 1.25rem;
        box-shadow: var(--ss-shadow-sm);
}
.ss-page-sidebar__card h3 {
        font-family: var(--font-display);
        font-weight: 600;
        font-size: 1rem;
        margin: 0 0 0.5rem;
        color: var(--ss-black);
}
.ss-page-sidebar__card p {
        font-size: 0.8125rem;
        color: var(--ss-gray);
        margin: 0 0 0.75rem;
        line-height: 1.5;
}
.ss-page-sidebar__card--status {
        border-left: 4px solid var(--ss-lime);
        background: rgba(229, 247, 146, 0.15);
}
.ss-page-sidebar__card--status p {
        margin: 0.625rem 0 0;
}

/* ---------- Legal warning badge ---------- */
.ss-legal-warning {
        display: flex;
        align-items: flex-start;
        gap: 0.875rem;
        background: rgba(229, 247, 146, 0.4);
        border: 1px solid rgba(229, 247, 146, 0.8);
        border-left: 4px solid var(--ss-lime);
        border-radius: 0.75rem;
        padding: 1rem 1.25rem;
        margin-top: 1rem;
}
.ss-legal-warning__ic {
        display: grid;
        place-items: center;
        width: 2rem;
        height: 2rem;
        border-radius: 9999px;
        background: var(--ss-black);
        color: var(--ss-lime);
        flex-shrink: 0;
}
.ss-legal-warning__ic svg {
        width: 18px;
        height: 18px;
}
.ss-legal-warning__text {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
        font-size: 0.875rem;
        line-height: 1.5;
}
.ss-legal-warning__text strong {
        color: var(--ss-black);
        font-weight: 600;
}
.ss-legal-warning__text span {
        color: var(--ss-ink-soft);
}

/* Legal placeholder paragraph (when the_content is empty) */
.ss-legal-placeholder {
        background: rgba(184, 165, 230, 0.15);
        border-left: 4px solid var(--ss-violet);
        padding: 1rem 1.25rem;
        border-radius: 0.5rem;
        font-style: italic;
        color: var(--ss-ink-soft);
        margin-bottom: 1.5rem;
}

/* Mobile tweaks: contact sidebar stacks below form */
@media (max-width: 1023px) {
        .ss-contact-sidebar {
                margin-top: var(--ss-space-2);
        }
        .ss-page-sidebar {
                position: static;
        }
}

/* ============================================================
   Contact page grid + sidebar — v2.4.0
   ============================================================ */

.ss-contact-grid {
        display: grid;
        grid-template-columns: 1.2fr 0.8fr;
        gap: var(--ss-space-7);
        align-items: start;
}

.ss-contact-form-wrap {
        min-width: 0;
}

.ss-contact-form-head {
        margin-bottom: var(--ss-space-5);
}

.ss-contact-sidebar {
        position: sticky;
        top: calc(72px + var(--ss-space-5));
}

.ss-contact-sidebar__title {
        font-family: var(--font-display);
        font-weight: 500;
        font-size: var(--ss-fs-xl);
        margin: 0 0 var(--ss-space-2);
}

.ss-contact-sidebar__intro {
        font-size: var(--ss-fs-sm);
        color: var(--ss-gray);
        margin-bottom: var(--ss-space-5);
        line-height: var(--ss-lh-base);
}

.ss-contact-sidebar__list {
        list-style: none;
        padding: 0;
        margin: 0 0 var(--ss-space-5);
        display: flex;
        flex-direction: column;
        gap: var(--ss-space-3);
}

.ss-contact-sidebar__row {
        display: flex;
        align-items: center;
        gap: var(--ss-space-3);
        padding: var(--ss-space-3);
        border-radius: var(--ss-radius-md);
        border: 1px solid var(--ss-line);
        transition: border-color 0.2s, background 0.2s;
}

.ss-contact-sidebar__row:hover {
        border-color: var(--ss-gray-light);
        background: var(--ss-gray-light);
}

.ss-contact-sidebar__row--link {
        text-decoration: none;
        color: inherit;
        cursor: pointer;
}

.ss-contact-sidebar__ic {
        width: 36px;
        height: 36px;
        border-radius: var(--ss-radius-sm);
        background: var(--ss-gray-light);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--ss-black);
        flex-shrink: 0;
}

.ss-contact-sidebar__ic svg { width: 16px; height: 16px; }

.ss-contact-sidebar__text {
        display: flex;
        flex-direction: column;
        min-width: 0;
}

.ss-contact-sidebar__label {
        font-size: var(--ss-fs-xs);
        color: var(--ss-gray);
        text-transform: uppercase;
        letter-spacing: 0.06em;
        font-weight: 600;
}

.ss-contact-sidebar__value {
        font-size: var(--ss-fs-sm);
        font-weight: 500;
        color: var(--ss-black);
}

.ss-contact-sidebar__arrow {
        margin-left: auto;
        color: var(--ss-gray);
        flex-shrink: 0;
}

.ss-contact-sidebar__arrow svg { width: 14px; height: 14px; }

.ss-contact-sidebar__card {
        padding: var(--ss-space-4);
        border-radius: var(--ss-radius-md);
        border: 1px solid var(--ss-line);
        margin-bottom: var(--ss-space-3);
}

.ss-contact-sidebar__card h3 {
        font-size: var(--ss-fs-sm);
        font-weight: 600;
        margin: 0 0 var(--ss-space-2);
}

.ss-contact-sidebar__card p {
        font-size: var(--ss-fs-sm);
        color: var(--ss-gray);
        margin: 0 0 var(--ss-space-3);
        line-height: var(--ss-lh-base);
}

.ss-contact-sidebar__response {
        font-family: var(--font-display);
        font-weight: 500;
        font-size: var(--ss-fs-md);
        margin: var(--ss-space-2) 0 0;
        color: var(--ss-black);
}

.ss-contact-sidebar__card--privacy {
        background: rgba(184, 165, 230, 0.06);
        border-color: rgba(184, 165, 230, 0.15);
}

.ss-contact-sidebar__card--faq {
        background: rgba(167, 227, 231, 0.06);
        border-color: rgba(167, 227, 231, 0.15);
}

@media (max-width: 960px) {
        .ss-contact-grid { grid-template-columns: 1fr; }
        .ss-contact-sidebar { position: static; }
}

/* Contact form separated from footer */
.ss-contact-form-section {
        border-top: 1px solid rgba(12, 12, 12, 0.1);
        background: var(--ss-offwhite);
}

.ss-contact-form-card {
        box-shadow: 0 18px 60px -36px rgba(12, 12, 12, 0.28);
}

.ss-form__grid--spaced,
.ss-field--spaced,
.ss-form__preview--contact {
        margin-top: 1rem;
}

.ss-contact-form-section textarea {
        resize: none;
        min-height: auto;
}

.ss-form__privacy-note {
        font-size: 0.625rem;
        color: var(--ss-gray);
        border-top: 1px solid rgba(12, 12, 12, 0.05);
        padding-top: 0.625rem;
        margin-top: 0.5rem;
}

/* Compact footer: cards + giant stamp only */
.ss-footer--compact {
        padding: 3rem 0 2rem;
        background: var(--ss-offwhite);
        color: var(--ss-black);
        border-top: 1px solid rgba(12, 12, 12, 0.1);
}

.ss-footer__top-brand {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 0.625rem;
        margin-bottom: 1.5rem;
}

.ss-footer__top-symbol {
        height: 2rem;
        width: auto;
}

.ss-footer__top-name {
        font-family: var(--font-display);
        font-size: 1.125rem;
        font-weight: 600;
        color: var(--ss-black);
        letter-spacing: 0;
}

.ss-footer__top-name span {
        color: var(--ss-gray);
        font-weight: 300;
}

.ss-footer--compact .ss-footer__cards {
        margin-bottom: 3rem;
}

.ss-footer__nav-list a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
}

.ss-footer__nav-list svg {
        width: 13px;
        height: 13px;
        color: rgba(111, 111, 111, 0.5);
        transition: transform 0.2s var(--ss-ease), color 0.2s var(--ss-ease);
}

.ss-footer__nav-list a:hover svg {
        color: var(--ss-violet);
        transform: translateX(3px);
}

.ss-footer--compact .ss-footer__stamp {
        color: var(--ss-black);
        opacity: 1;
        font-size: clamp(4.5rem, 12vw, 11rem);
        padding: 2.75rem 0;
}

@media (max-width: 720px) {
        .ss-footer--compact .ss-footer__stamp {
                font-size: clamp(3.2rem, 18vw, 5rem);
        }
}