/* ── Contact Page Styles ─────────────────────────────── */
.has-text-align-center{text-align: center;}

.contact-hero {
    background: linear-gradient(135deg, var(--clr-blue) 0%, var(--clr-blue-dark) 100%);
    color: var(--clr-white);
    padding: var(--space-12) 0;
    text-align: center;
    margin-bottom: 0;
}
.contact-hero h1 {
    font-family: var(--font-display);
    font-size: var(--font-size-4xl);
    margin: 0 0 var(--space-3);
    color: var(--clr-white);
}
.contact-hero p {
    font-size: var(--font-size-lg);
    opacity: .85;
    margin: 0;
    max-width: 520px;
    margin-inline: auto;
}

/* Info cards row */
.contact-info-bar {
    background: var(--clr-white);
    box-shadow: var(--shadow-md);
    padding: var(--space-6) 0;
    margin-bottom: var(--space-10);
}
.contact-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-6);
}
.contact-info-card {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
}
.contact-info-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-lg);
    background: var(--clr-orange-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}
.contact-info-card h4 {
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: var(--clr-text);
    margin: 0 0 2px;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.contact-info-card p,
.contact-info-card a {
    font-size: var(--font-size-sm);
    color: var(--clr-text-muted);
    margin: 0;
    line-height: 1.5;
    text-decoration: none;
}
.contact-info-card a:hover { color: var(--clr-orange); }

/* Main two-column layout */
.contact-body {
    display: grid;
    grid-template-columns: 1fr 420px;
    gap: var(--space-10);
    margin-bottom: var(--space-16);
    align-items: start;
}
@media (max-width: 900px) {
    .contact-body { grid-template-columns: 1fr; }
}

/* Map block */
.contact-map-wrap {
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    aspect-ratio: 4/3;
    background: var(--clr-surface);
}
.contact-map-wrap iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}
.contact-map-label {
    margin-top: var(--space-5);
    padding: var(--space-5);
    background: var(--clr-white);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-lg);
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
}
.contact-map-label .map-pin {
    font-size: 24px;
    flex-shrink: 0;
    margin-top: 2px;
}
.contact-map-label h4 {
    margin: 0 0 4px;
    font-size: var(--font-size-base);
    color: var(--clr-text);
}
.contact-map-label p {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--clr-text-muted);
    line-height: 1.6;
}
.contact-map-label .map-link {
    display: inline-block;
    margin-top: var(--space-2);
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--clr-orange);
    text-decoration: none;
}
.contact-map-label .map-link:hover { text-decoration: underline; }

/* Form card */
.contact-form-card {
    background: var(--clr-white);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-xl);
    padding: var(--space-8);
    box-shadow: var(--shadow-md);
    position: sticky;
    top: 100px;
}
.contact-form-card h2 {
    font-family: var(--font-display);
    font-size: var(--font-size-2xl);
    margin: 0 0 var(--space-2);
    color: var(--clr-text);
}
.contact-form-card .form-subtitle {
    font-size: var(--font-size-sm);
    color: var(--clr-text-muted);
    margin: 0 0 var(--space-6);
}

/* Subject chips */
.contact-subject-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-5);
}
.subject-chip {
    padding: var(--space-1) var(--space-3);
    border: 1.5px solid var(--clr-border);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--clr-text-muted);
    background: transparent;
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
}
.subject-chip:hover,
.subject-chip.active {
    border-color: var(--clr-orange);
    color: var(--clr-orange);
    background: var(--clr-orange-light);
}

/* Form fields — override HubSpot defaults where needed */
.contact-form-card .hs-form-field label,
.contact-form-card .hs-form label {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--clr-text);
    display: block;
    margin-bottom: var(--space-1);
}
.contact-form-card .hs-form-field input,
.contact-form-card .hs-form-field select,
.contact-form-card .hs-form-field textarea,
.contact-form-card .hs-form input[type="text"],
.contact-form-card .hs-form input[type="email"],
.contact-form-card .hs-form input[type="tel"],
.contact-form-card .hs-form select,
.contact-form-card .hs-form textarea {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    border: 1.5px solid var(--clr-border);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-family: var(--font-sans);
    color: var(--clr-text);
    background: var(--clr-bg);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    box-sizing: border-box;
}
.contact-form-card .hs-form input:focus,
.contact-form-card .hs-form select:focus,
.contact-form-card .hs-form textarea:focus {
    outline: none;
    border-color: var(--clr-orange);
    box-shadow: 0 0 0 3px rgba(232,89,12,.12);
    background: var(--clr-white);
}
.contact-form-card .hs-form textarea {
    min-height: 110px;
    resize: vertical;
}
.contact-form-card .hs-form .hs-button,
.contact-form-card .hs-form input[type="submit"] {
    width: 100%;
    padding: var(--space-3) var(--space-6);
    background: var(--clr-orange);
    color: var(--clr-white);
    font-size: var(--font-size-base);
    font-weight: 700;
    font-family: var(--font-sans);
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background var(--transition-fast);
    margin-top: var(--space-2);
}
.contact-form-card .hs-form .hs-button:hover,
.contact-form-card .hs-form input[type="submit"]:hover {
    background: var(--clr-orange-dark);
}
.contact-form-card .hs-form .hs-error-msgs {
    list-style: none;
    margin: 4px 0 0;
    padding: 0;
    font-size: var(--font-size-xs);
    color: var(--clr-error);
}
.contact-form-card .hs-form .submitted-message {
    text-align: center;
    padding: var(--space-8) var(--space-6);
    color: var(--clr-success);
    font-weight: 600;
}

/* ── Shared modal animations ───────────────────────────────────────────── */
@keyframes page-modal-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes page-modal-slide {
    from { transform: translateY(20px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

/* ── Shared modal overlay + dialog base ────────────────────────────────── */
.contact-modal-overlay,
.returns-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
    animation: page-modal-fade .2s ease;
}
.contact-modal-overlay[hidden],
.returns-modal-overlay[hidden] { display: none; }

.contact-modal-dialog,
.returns-modal-dialog {
    position: relative;
    width: 100%;
    max-width: 780px;
    max-height: 90vh;
    background: var(--clr-white);
    border-radius: var(--radius-xl);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 24px 64px rgba(0,0,0,.18);
    animation: page-modal-slide .25s ease;
}

.contact-modal-close,
.returns-modal-close {
    position: absolute;
    top: var(--space-3);
    right: var(--space-4);
    background: none;
    border: none;
    font-size: 1.75rem;
    line-height: 1;
    color: var(--clr-text-muted);
    cursor: pointer;
    z-index: 1;
    transition: color var(--transition-fast);
}
.contact-modal-close:hover,
.returns-modal-close:hover { color: var(--clr-text); }

/* ── Contact form modal ─────────────────────────────────────────────────── */
.contact-form-btn-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: var(--space-6);
}
.contact-form-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-8);
    background: var(--clr-orange);
    color: #fff;
    font-family: var(--font-display);
    font-size: var(--font-size-sm);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border: none;
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: background var(--transition-fast), transform var(--transition-fast);
}
.contact-form-btn:hover,
.contact-form-btn:focus-visible {
    background: var(--clr-orange-dark);
    transform: translateY(-1px);
    outline: none;
}
.contact-modal-iframe {
    width: 100%;
    flex: 1;
    min-height: 75vh;
    border: none;
    display: block;
}

/* ── Returns form modal ─────────────────────────────────────────────────── */
.return-form-btn-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: var(--space-6);
}
.returns-form-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-8);
    background: var(--clr-orange);
    color: #fff;
    font-family: var(--font-display);
    font-size: var(--font-size-sm);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border: none;
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: background var(--transition-fast), transform var(--transition-fast);
}
.returns-form-btn:hover,
.returns-form-btn:focus-visible {
    background: var(--clr-orange-dark);
    transform: translateY(-1px);
    outline: none;
}
.returns-modal-dialog {
    padding: var(--space-10) var(--space-8) var(--space-8);
    overflow-y: auto;
}
#returns-form-container {
    width: 100%;
}

/* FAQ accordion */
.contact-faq { margin-bottom: var(--space-16); }
.contact-faq h2 {
    font-family: var(--font-display);
    font-size: var(--font-size-3xl);
    margin-bottom: var(--space-6);
    text-align: center;
}
.faq-list { max-width: 760px; margin-inline: auto; }
.faq-item {
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-3);
    overflow: hidden;
}
.faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-4) var(--space-6);
    background: var(--clr-white);
    cursor: pointer;
    font-weight: 600;
    font-size: var(--font-size-base);
    color: var(--clr-text);
    list-style: none;
    gap: var(--space-4);
    transition: background var(--transition-fast);
}
.faq-question:hover { background: var(--clr-bg); }
.faq-question::after {
    content: '+';
    font-size: 1.4rem;
    font-weight: 300;
    color: var(--clr-orange);
    flex-shrink: 0;
    transition: transform var(--transition-fast);
}
details[open] .faq-question::after { content: '−'; }
.faq-answer {
    padding: 0 var(--space-6) var(--space-5);
    background: var(--clr-white);
    font-size: var(--font-size-sm);
    color: var(--clr-text-muted);
    line-height: 1.75;
    border-top: 1px solid var(--clr-border);
}