/* ==========================================================================
   Contact page
   ========================================================================== */

/* Hero
   ========================================================================== */
.contact-hero {
    padding: clamp(130px, 17vh, 180px) 0 clamp(44px, 6vh, 72px);
}

.contact-hero__eyebrow {
    margin-bottom: clamp(26px, 4vh, 40px);
}

.contact-hero .split-grid {
    gap: clamp(30px, 5vw, 80px);
}

.contact-hero__title {
    font-size: clamp(42px, 6.2vw, 88px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.04em;
}

.contact-hero__intro {
    margin-bottom: 8px;
    max-width: 38ch;
}

/* Enquiry section layout
   ========================================================================== */
.contact-enquiry {
    padding: 0 0 clamp(58px, 8vh, 96px);
}

.contact-enquiry__grid {
    display: grid;
    grid-template-columns: 1.25fr .75fr;
    gap: clamp(36px, 6vw, 96px);
    align-items: start;
    padding-top: clamp(40px, 6vh, 64px);
    border-top: 1px solid var(--color-line);
}

.contact-enquiry__email {
    margin-top: clamp(30px, 4vh, 44px);
    padding-top: 24px;
    border-top: 1px solid var(--color-line);
    font-size: 15px;
    color: var(--color-muted);
}

.contact-enquiry__email a {
    font-weight: 600;
    color: var(--color-forest);
}

.contact-enquiry__email a:hover {
    color: var(--color-ink);
}

/* Form (extends the shared .form-field styles to match the template)
   ========================================================================== */
.contact-form__summary {
    margin: 0 0 28px;
    padding: 18px 20px;
    background: var(--color-white);
    border: 1px solid var(--color-error);
    border-left-width: 3px;
    border-radius: var(--radius);
}

.contact-form__summary:focus {
    outline: none;
}

.contact-form__summary:focus-visible {
    outline: 2px solid var(--color-forest);
    outline-offset: 3px;
}

.contact-form__summary-title {
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 700;
    color: var(--color-error);
}

.contact-form__summary-list {
    font-size: 14px;
    line-height: 1.7;
    color: var(--color-muted);
}

.contact-form__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(18px, 2.4vw, 26px);
}

.contact-form .form-field__label {
    margin-bottom: 9px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--color-ink);
}

.contact-form__required {
    color: var(--color-error);
}

.contact-form .form-field__input {
    padding: 15px 16px;
    border-radius: 9px;
    font-size: inherit;
    line-height: inherit;
    transition: border-color .35s ease, box-shadow .35s ease;
}

.contact-form__select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 44px;
    background-image: linear-gradient(45deg, transparent 50%, var(--color-forest) 50%), linear-gradient(135deg, var(--color-forest) 50%, transparent 50%);
    background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
    cursor: pointer;
}

.contact-form .contact-form__textarea {
    min-height: 0;
    line-height: 1.6;
    resize: vertical;
}

.contact-form__details {
    margin-top: clamp(18px, 2.4vw, 26px);
}

.contact-form__hint {
    margin-top: 8px;
    font-size: 13px;
    color: var(--color-muted);
}

.contact-form__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
    margin-top: clamp(26px, 4vh, 38px);
}

.contact-form__submit {
    gap: 12px;
    min-height: 52px;
    padding: 19px 28px;
    border: 0;
    transition: background-color .4s ease, transform .4s var(--ease-out), opacity .3s ease;
}

.contact-form__reply-note {
    font-size: 13px;
    color: var(--color-muted);
    max-width: 30ch;
}

/* Sent state
   ========================================================================== */
.contact-sent {
    padding: clamp(34px, 5vw, 56px);
    background: var(--color-forest);
    color: var(--color-paper);
    border-radius: var(--radius);
}

.contact-sent:focus {
    outline: none;
}

.contact-sent__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--color-mint);
}

.contact-sent__dot {
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 99px;
    background: var(--color-mint);
}

.contact-sent__title {
    margin-bottom: 16px;
    font-size: clamp(26px, 3.2vw, 40px);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -.03em;
    max-width: 22ch;
}

.contact-sent__text {
    margin-bottom: 30px;
    font-size: 16px;
    line-height: 1.66;
    color: rgba(245, 245, 239, 0.78);
    max-width: 40ch;
}

.contact-sent__reset {
    padding: 15px 20px;
    background: none;
    border-color: rgba(245, 245, 239, 0.34);
    color: var(--color-paper);
    font-size: 15px;
}

.contact-sent__reset:hover {
    background: rgba(245, 245, 239, 0.08);
    color: var(--color-paper);
}

/* What happens next
   ========================================================================== */
.contact-next__title {
    margin-bottom: clamp(26px, 4vh, 38px);
    font-size: clamp(20px, 1.8vw, 26px);
    font-weight: 700;
    letter-spacing: -.025em;
}

.contact-next__list {
    list-style: none;
    margin: 0 0 clamp(34px, 5vh, 48px);
    padding: 0;
    border-top: 1px solid var(--color-line);
}

.contact-next__step {
    display: flex;
    gap: 18px;
    padding: 20px 0;
    border-bottom: 1px solid var(--color-line);
}

.contact-next__number {
    flex: none;
    padding-top: 4px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .16em;
    color: var(--color-mint);
}

.contact-next__text {
    font-size: 16px;
    line-height: 1.55;
    font-weight: 500;
}

.contact-next__quote {
    padding: clamp(24px, 3vw, 32px);
    background: var(--color-white);
    border: 1px solid var(--color-line);
    border-radius: var(--radius);
}

.contact-next__quote p {
    font-family: var(--font-serif);
    font-size: 21px;
    line-height: 1.34;
}

.contact-next__note {
    margin-top: 26px;
    font-size: 13px;
    line-height: 1.7;
    color: var(--color-muted);
}

/* Before you send
   ========================================================================== */
.contact-faq {
    padding: clamp(50px, 7vh, 82px) 0 clamp(62px, 9vh, 104px);
}

.contact-faq__grid {
    display: grid;
    grid-template-columns: .7fr 1.3fr;
    gap: clamp(30px, 5vw, 72px);
    align-items: start;
}

.contact-faq__title {
    font-size: clamp(24px, 3vw, 38px);
    font-weight: 700;
    line-height: 1.06;
    letter-spacing: -.03em;
    max-width: 16ch;
}

.contact-faq__items {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
    gap: clamp(24px, 3vw, 44px);
}

.contact-faq__question {
    margin-bottom: 10px;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -.02em;
}

.contact-faq__answer {
    font-size: 15px;
    line-height: 1.66;
    color: var(--color-muted);
}

/* Responsive
   ========================================================================== */
@media (max-width: 960px) {
    .contact-hero .split-grid {
        gap: 28px;
    }

    .contact-enquiry__grid {
        grid-template-columns: 1fr;
        gap: 56px;
    }

    .contact-form__grid {
        grid-template-columns: 1fr;
    }

    .contact-faq__grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }
}