/* ============================================================
   CRAFTWEB CONTACT
============================================================ */
/* ============================================================
   FORM ALERTS
============================================================ */

.contact-alert {
    display: flex;

    flex-direction: column;

    gap: 0.35rem;

    margin-bottom: 2rem;

    padding: 1.25rem 1.4rem;

    border-left: 4px solid;
    border-radius: 10px;

}

.contact-alert strong {
    color: var(--contact-ink);

    font-size: 0.95rem;
}

.contact-alert span {
    color: var(--contact-muted);

    font-size: 0.88rem;

    line-height: 1.5;
}

.contact-alert--success {
    background: #edf5ef;

    border-color: #4d8a5b;
}

.contact-alert--error {
    background: #f8eeee;

    border-color: #b65353;
}

.contact-honeypot {
    position: absolute;

    left: -9999px;

    width: 1px;
    height: 1px;

    overflow: hidden;
}

.craft-contact {
    --contact-ink: #12151d;
    --contact-muted: #5c6068;
    --contact-cream: #f0efe9;
    --contact-white: #ffffff;
    --contact-border: #e3e1d9;
    --contact-accent: #2b4bdb;
    --contact-accent-soft: #e9edfb;
    --contact-dark: #12151d;
}


/* ============================================================
   HERO
============================================================ */

.contact-hero {
    padding: 6rem 0 5.5rem;

    background:
        linear-gradient(
            135deg,
            #faf9f6 0%,
            #eef0f9 100%
        );

    border-bottom: 1px solid var(--contact-border);
}

.contact-hero__grid {
    display: grid;

    gap: 3rem;

    align-items: end;
}

.contact-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;

    margin: 0 0 1rem;

    color: var(--contact-accent);

    font-family: var(--font-display);
    font-size: 0.98rem;
    font-weight: 600;
}

.contact-eyebrow::before {
    content: "";

    width: 7px;
    height: 7px;
    flex-shrink: 0;

    background: var(--contact-accent);
    border-radius: 50%;
}

.contact-hero h1 {
    max-width: 850px;

    margin: 0;

    color: var(--contact-ink);

    font-size: clamp(2.75rem, 7vw, 5.6rem);

    line-height: 1.03;
    letter-spacing: -0.03em;
}

.contact-hero__lead {
    max-width: 620px;

    margin: 1.5rem 0 0;

    color: var(--contact-muted);

    font-size: 1.15rem;

    line-height: 1.65;
}

.contact-hero__aside {
    padding: 2rem;
    border-radius: 16px;

    background: var(--contact-ink);

    color: #fff;
}

.contact-hero__aside span {
    display: block;

    margin-bottom: 0.7rem;

    color: #8fa0f2;

    font-family: var(--font-display);
    font-size: 0.78rem;
    font-weight: 600;
}

.contact-hero__aside strong {
    display: block;

    max-width: 300px;

    font-family: var(--font-display);
    font-size: 1.5rem;

    line-height: 1.2;
    letter-spacing: -0.02em;
}


/* ============================================================
   MAIN CONTACT SECTION
============================================================ */

.contact-section {
    padding: 7rem 0;
}

.contact-grid {
    display: grid;

    gap: 4rem;
}

.contact-form-wrap {
    max-width: 780px;
}

.contact-form-wrap h2 {
    margin: 0 0 2.5rem;

    color: var(--contact-ink);

    font-family: var(--font-display);
    font-size: clamp(2.25rem, 5vw, 3.6rem);

    line-height: 1.08;
    letter-spacing: -0.03em;
}


/* ============================================================
   FORM
============================================================ */

.contact-form {
    display: flex;

    flex-direction: column;

    gap: 1.35rem;
}

.contact-form__row {
    display: grid;

    gap: 1.35rem;
}

.contact-field {
    display: flex;

    flex-direction: column;

    gap: 0.55rem;
}

.contact-field label {
    color: var(--contact-ink);

    font-size: 0.92rem;
    font-weight: 700;
}

.contact-field label span {
    color: var(--contact-muted);

    font-weight: 500;
}

.contact-field input,
.contact-field select,
.contact-field textarea {
    width: 100%;

    box-sizing: border-box;

    padding: 0.95rem 1rem;

    background: #fff;

    color: var(--contact-ink);

    border: 1.5px solid var(--contact-border);

    border-radius: 10px;

    font: inherit;
    font-size: 1rem;

    outline: none;

    transition:
        border-color 180ms ease,
        box-shadow 180ms ease;
}

.contact-field input,
.contact-field select {
    min-height: 54px;
}

.contact-field textarea {
    min-height: 170px;

    resize: vertical;

    line-height: 1.6;
}

.contact-field input::placeholder,
.contact-field textarea::placeholder {
    color: #9498a3;
}

.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus {
    border-color: var(--contact-accent);

    box-shadow:
        0 0 0 4px var(--contact-accent-soft);
}


/* ============================================================
   SUBMIT
============================================================ */

.contact-submit {
    min-height: 56px;

    align-self: flex-start;

    padding: 0.95rem 1.8rem;

    background: var(--contact-accent);

    color: #fff;

    border: 1px solid transparent;

    border-radius: 999px;

    font: inherit;

    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;

    cursor: pointer;

    box-shadow: 0 12px 28px rgba(43, 75, 219, 0.28);

    transition:
        transform 180ms ease,
        background-color 180ms ease,
        box-shadow 180ms ease;
}

.contact-submit:hover {
    transform: translateY(-2px);

    background: #1d38b3;
    box-shadow: 0 16px 34px rgba(43, 75, 219, 0.34);
}

.contact-form__note {
    margin: 0;

    color: var(--contact-muted);

    font-size: 0.82rem;

    line-height: 1.5;
}


/* ============================================================
   SIDEBAR
============================================================ */

.contact-sidebar {
    display: flex;

    flex-direction: column;

    gap: 1rem;

    align-self: start;
}

.contact-sidebar__block {
    padding: 2rem;
    border-radius: 16px;

    background: var(--contact-cream);
}

.contact-sidebar__block--dark {
    background: var(--contact-dark);

    color: #fff;
}

.contact-sidebar__label {
    display: block;

    margin-bottom: 1.5rem;

    color: var(--contact-accent);

    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 600;
}

.contact-sidebar__block--dark .contact-sidebar__label {
    color: #8fa0f2;
}

.contact-sidebar__block--dark > a {
    color: #fff;

    font-size: 1.05rem;
    font-weight: 600;
}


/* ============================================================
   STEPS
============================================================ */

.contact-steps {
    margin: 0;

    padding: 0;

    list-style: none;

    counter-reset: contact-step;
}

.contact-steps li {
    position: relative;

    padding: 0 0 1.5rem 2.5rem;

    counter-increment: contact-step;
}

.contact-steps li:last-child {
    padding-bottom: 0;
}

.contact-steps li::before {
    content: counter(contact-step, decimal-leading-zero);

    position: absolute;

    left: 0;
    top: 0;

    color: var(--contact-accent);

    font-family: var(--font-display);
    font-size: 0.78rem;
    font-weight: 700;
}

.contact-steps li:not(:last-child)::after {
    content: "";

    position: absolute;

    left: 3px;
    top: 1.1rem;
    bottom: 0;

    width: 1px;

    background: var(--contact-border);
}

.contact-steps strong {
    display: block;

    margin-bottom: 0.35rem;

    color: var(--contact-ink);

    font-size: 0.98rem;
}

.contact-steps span {
    display: block;

    color: var(--contact-muted);

    font-size: 0.88rem;

    line-height: 1.55;
}


/* ============================================================
   PORTFOLIO LINK
============================================================ */

.contact-work-link {
    color: var(--contact-accent);

    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 600;
}

.contact-work-link:hover {
    color: var(--contact-accent-hover, #1d38b3);
}


/* ============================================================
   BOTTOM CTA
============================================================ */

.contact-bottom {
    padding: 7rem 0;

    background: var(--contact-dark);

    color: #fff;
}

.contact-bottom .contact-eyebrow {
    color: #8fa0f2;
}

.contact-bottom .contact-eyebrow::before {
    background: #8fa0f2;
}

.contact-bottom h2 {
    max-width: 850px;

    margin: 0 0 2rem;

    color: #fff;

    font-size: clamp(2.5rem, 6vw, 4.6rem);

    line-height: 1.05;
    letter-spacing: -0.03em;
}

.contact-bottom__button {
    min-height: 54px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    padding: 0.9rem 1.7rem;
    border-radius: 999px;

    background: #fff;

    color: var(--contact-ink);

    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;

    transition:
        transform 180ms ease,
        background-color 180ms ease;
}

.contact-bottom__button:hover {
    transform: translateY(-2px);

    background: #eef0f9;
}


/* ============================================================
   TABLET
============================================================ */

@media (min-width: 650px) {

    .contact-form__row {
        grid-template-columns: repeat(2, 1fr);
    }

}


/* ============================================================
   DESKTOP
============================================================ */

@media (min-width: 900px) {

    .contact-hero__grid {
        grid-template-columns:
            minmax(0, 1fr)
            300px;
    }

    .contact-grid {
        grid-template-columns:
            minmax(0, 1.2fr)
            minmax(280px, 0.55fr);

        align-items: start;
    }

    .contact-sidebar {
        position: sticky;

        top: 2rem;
    }

}


/* ============================================================
   LARGE DESKTOP
============================================================ */

@media (min-width: 1200px) {

    .contact-hero {
        padding-block: 7rem;
    }

    .contact-hero__grid {
        grid-template-columns:
            minmax(0, 1fr)
            360px;
    }

}