/* ==========================================================================
   Contact page (/contact) — a Lead Capture Landing Page.
   Follows Brand Guide §18 (Lead Capture Landing Pages) and §12 (Visual
   Identity): light-purple-wash hero, brand-token styling, and a teal
   (secondary-accent) "Prefer to explore first?" free-options section.
   ========================================================================== */

/* §18 — non-distracting light purple wash hero at the top of the page. */
.contact-hero {
    width: 100%;
    overflow: hidden;
}

#contact-hero-image {
    display: block;
    width: 100%;
    height: clamp(120px, 18vw, 220px);
    object-fit: cover;
    object-position: center;
}

.contact-wrap {
    padding: var(--max-padding-large) var(--max-padding-medium);
    display: flex;
    flex-direction: column;
    gap: var(--max-gap-medium);
}

.contact-intro {
    max-width: 720px;
}

.contact-intro .max-header {
    margin-bottom: var(--max-padding-small);
}

/* Branded form card (replaces the bare Bootstrap panel). */
.contact-card {
    width: 100%;
    max-width: 720px;
    background-color: var(--colour-neutral-lightest);
    border: 1px solid var(--colour-neutral-main);
    border-radius: var(--max-card-border-radius);
    box-shadow: var(--max-box-shadow-medium);
    padding: var(--max-padding-large);
}

.contact-card .form-label {
    color: var(--colour-text-base);
    font-family: "Manrope", Verdana, sans-serif;
    font-weight: 600;
}

.contact-card .form-control:focus,
.contact-card .form-select:focus {
    border-color: var(--colour-primary-main);
    box-shadow: 0 0 0 0.2rem rgba(133, 58, 228, 0.2);
}

/* §18 — free options section, presented after the main CTA/form.
   Uses the brand Teal secondary accent (§12) so it reads as a distinct,
   no-pressure alternative to the form. */
.contact-free-options {
    width: 100%;
    max-width: 960px;
    background-color: var(--colour-primary-lightest);
    border-left: 4px solid var(--colour-secondary-main);
    border-radius: var(--max-card-border-radius);
    padding: var(--max-padding-large);
}

.contact-free-options > .max-header {
    color: var(--colour-secondary-main);
    margin-bottom: var(--max-padding-small);
}

.contact-free-options-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--max-gap-medium);
    margin-top: var(--max-padding-medium);
}

.contact-free-option {
    background-color: var(--colour-neutral-lightest);
    border-radius: var(--max-card-border-radius);
    padding: var(--max-padding-medium);
    display: flex;
    flex-direction: column;
    gap: var(--max-padding-small);
}

.contact-free-option-icon {
    color: var(--colour-secondary-main);
    font-size: 1.6rem;
}

.contact-free-option .max-header {
    margin: 0;
}