/*
 * Verapath — Site Layout
 * Global structural styles. Nav styles live in SiteHeader.razor.css.
 * Loaded statically from App.razor so they are never subject to
 * Blazor's HeadOutlet re-render flash (FOUC).
 */

html,
body,
#main {
    max-width: 100%;
    overflow-x: hidden;
    overflow-x: clip;
    font-family: var(--font-body, "Season Sans Regular", system-ui, -apple-system, BlinkMacSystemFont, "Inter", sans-serif);
}

/* Kill the browser's default 8px body margin. The design system's reset does
   this, but our port scopes that reset to .B (so it cannot touch the portal),
   which left the margin in place — every full-bleed section stopped 8px short
   of the viewport edge. */
body {
    margin: 0;
}

img,
video {
    max-width: 100%;
}

/* Public contact flow is duplicated here so publish-time or browser-cached
   scoped CSS bundles cannot break the marketing pages. */

.vp-contact-page {
    background:
        linear-gradient(180deg, var(--color-midnight) 0 31rem, var(--color-gray-04) 31rem 100%);
    color: var(--color-midnight);
}

.vp-contact-hero {
    padding: 7.5rem 2rem 5rem;
    color: var(--color-white);
}

.vp-contact-hero__inner,
.vp-contact-intake__inner {
    margin: 0 auto;
    max-width: 1366px;
}

.vp-contact-hero__inner {
    display: grid;
    gap: 2rem;
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    text-align: center;
}

.vp-contact-hero__copy {
    max-width: 50rem;
}

.vp-contact-hero__copy h1 {
    color: var(--color-white);
    font-family: "Serrif Medium", serif;
    font-size: clamp(3.25rem, 6vw, 5.5rem);
    letter-spacing: -0.04em;
    line-height: 0.96;
    margin: 0;
}

.vp-contact-hero__copy p {
    color: rgba(255, 255, 255, 0.86);
    font-family: "Season Sans Regular", sans-serif;
    font-size: clamp(1.05rem, 2vw, 1.3rem);
    line-height: 1.7;
    margin: 1.5rem auto 0;
    max-width: 43rem;
}

.vp-contact-hero__mark {
    align-items: center;
    display: flex;
    height: 2.85rem;
    justify-content: center;
    width: 4.5rem;
}

.vp-contact-hero__mark svg {
    display: block;
    fill: var(--color-white);
    height: auto;
    width: 100%;
}

.vp-contact-intake {
    margin-top: -1.5rem;
    padding: 0 2rem 6rem;
}

.vp-contact-banner {
    border-radius: 0.875rem;
    font-family: "Season Sans Regular", sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    margin: 0 auto 1.5rem;
    padding: 1rem 1.125rem;
}

.vp-contact-banner--error {
    background: var(--color-beige-50);
    border: 1px solid var(--color-red);
}

.vp-contact-form {
    position: relative;
    z-index: 1;
}

.vp-contact-form .vp-form__loading-overlay {
    display: none;
}

.vp-contact-grid {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.vp-contact-grid__full {
    grid-column: 1 / -1;
}

.vp-contact-sidebar {
    display: grid;
    gap: 1rem;
}

.vp-contact-sidebar__panel {
    background: var(--color-midnight);
    border-radius: 1.5rem;
    box-shadow: var(--vp-elevation-2, 0 1.5rem 3rem rgba(34, 48, 41, 0.14));
    color: var(--color-white);
    padding: 1.5rem;
}

.vp-contact-sidebar__panel--muted {
    background: var(--color-beige-50);
    box-shadow: none;
    color: var(--color-midnight);
}

.vp-contact-sidebar__eyebrow {
    font-family: "Season Sans SemiBold", sans-serif;
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    margin: 0 0 0.875rem;
    text-transform: uppercase;
}

.vp-contact-sidebar__panel ul {
    display: grid;
    gap: 0.8rem;
    line-height: 1.65;
    margin: 0;
    padding-left: 1.2rem;
}

.vp-contact-sidebar__panel ul,
.vp-contact-sidebar__panel p:last-child,
.vp-contact-form__footer p {
    font-family: "Season Sans Regular", sans-serif;
}

.vp-contact-sidebar__panel p:last-child {
    line-height: 1.65;
    margin: 0;
}

.vp-contact-form__footer {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    justify-content: space-between;
}

.vp-contact-form__footer p {
    color: rgba(34, 48, 41, 0.72);
    line-height: 1.6;
    margin: 0;
    max-width: 42rem;
}

.vp-contact-thanks {
    align-items: center;
    background: #223029;
    display: flex;
    justify-content: center;
    min-height: 648px;
    overflow: hidden;
    width: 100%;
}

.vp-contact-thanks__hero {
    display: flex;
    height: 648px;
    justify-content: center;
    padding: 215px 0 144px;
    width: 100%;
}

.vp-contact-thanks__content {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 64px;
    max-width: 928px;
    padding: 0 24px;
    text-align: center;
    width: 100%;
}

.vp-contact-thanks__content h1 {
    color: #f8f8f3;
    font-family: "Serrif-Medium", "Serrif Medium", serif;
    font-size: 42px;
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 130%;
    margin: 0;
    text-wrap: balance;
}

.vp-contact-thanks__mark-link {
    display: inline-flex;
    text-decoration: none;
}

.vp-contact-thanks__mark {
    fill: #f8f8f3;
    height: 44px;
    width: 70px;
}

/* Marketing footer is duplicated here so publish-time scoped CSS bundle
   mismatches cannot leave the shared layout unstyled. */

#vp-footer {
    background-color: #223029;
    color: #fff;
    padding: 70px 0 54px;
}

#vp-footer-inner {
    margin: 0 auto;
    max-width: 1366px;
    padding: 0 24px;
}

#vp-footer-top {
    display: grid;
    gap: 24px;
    grid-template-columns: 1fr 1fr;
    padding-bottom: 64px;
}

#vp-footer-brand {
    display: flex;
    flex-direction: column;
    gap: 36px;
}

#vp-footer-logo img {
    height: 62px;
    width: auto;
}

#vp-footer-tagline {
    color: rgba(255, 255, 255, 0.7);
    font-family: "Season Sans Regular", sans-serif;
    font-size: 15px;
    line-height: 1.5;
    max-width: 360px;
}

#vp-footer-links-grid {
    align-self: start;
    display: flex;
    gap: 24px;
    justify-self: end;
}

.vp-footer-link-col {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 180px;
}

.vp-footer-link-title {
    color: rgba(255, 255, 255, 0.96);
    font-family: "Season Sans SemiBold", sans-serif;
    font-size: 14px;
}

.vp-footer-link-col a {
    color: rgba(255, 255, 255, 0.7);
    font-family: "Season Sans Regular", sans-serif;
    font-size: 14px;
    text-decoration: none;
}

.vp-footer-link-col a:hover {
    color: #fff;
}

#vp-footer-bottom {
    align-items: center;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: space-between;
    padding-top: 32px;
}

#vp-footer-legal {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

#vp-footer-legal span,
#vp-footer-legal a {
    color: rgba(255, 255, 255, 0.5);
    font-family: "Season Sans Regular", sans-serif;
    font-size: 13px;
    text-decoration: none;
}

#vp-footer-legal a:hover {
    color: rgba(255, 255, 255, 0.8);
}

#vp-footer-social {
    align-items: center;
    display: flex;
    gap: 24px;
}

#vp-footer-social a {
    align-items: center;
    color: rgba(255, 255, 255, 0.5);
    display: flex;
    fill: rgba(255, 255, 255, 0.5);
    height: 18px;
    justify-content: center;
    width: 18px;
}

#vp-footer-social a:hover {
    fill: #fff;
}

#vp-footer-social svg {
    height: 18px;
    width: 18px;
}

@media (max-width: 1137.98px) and (min-width: 810px) {
    .vp-contact-thanks__content h1 {
        font-size: 36px;
    }
}

@media (max-width: 980px) {
    .vp-contact-page {
        background:
            linear-gradient(180deg, var(--color-midnight) 0 24rem, var(--color-gray-04) 24rem 100%);
    }

    .vp-contact-hero {
        padding-bottom: 4rem;
        padding-top: 6.5rem;
    }

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

    .vp-contact-grid__full {
        grid-column: auto;
    }

    #vp-footer-top {
        gap: 80px;
        grid-template-columns: 1fr;
    }

    #vp-footer-links-grid {
        justify-self: start;
    }
}

@media (max-width: 809.98px) {
    .vp-contact-thanks {
        min-height: 636px;
    }

    .vp-contact-thanks__content {
        gap: 64px;
        max-width: 100%;
        padding: 0 12px;
    }

    .vp-contact-thanks__content h1 {
        font-size: 30px;
        line-height: 1.2em;
    }

    .vp-contact-thanks__hero {
        height: 636px;
        padding: 215px 0 144px;
    }

    #vp-footer-top {
        gap: 64px;
        grid-template-columns: 1fr;
    }

    #vp-footer-links-grid {
        gap: 32px;
        justify-self: start;
    }

    #vp-footer-bottom {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 640px) {
    .vp-contact-hero,
    .vp-contact-intake {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .vp-contact-hero__copy p {
        font-size: 1rem;
    }

    .vp-contact-sidebar__panel {
        border-radius: 1.125rem;
        padding: 1.25rem;
    }
}