/*
 * Phase-18 about, contact and readability-first legal shells.
 */

.bhw-about-hero {
    background:
        radial-gradient(circle at 15% 25%, var(--bhw-color-gold-wash), transparent 24rem),
        var(--bhw-color-background-primary);
}

.bhw-about-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    align-items: center;
    gap: var(--bhw-space-8);
}

.bhw-about-hero__grid > div {
    display: grid;
    gap: var(--bhw-space-4);
}

.bhw-about-hero__grid > div > * {
    margin: 0;
}

.bhw-about-hero .bhw-breadcrumb {
    margin-block-end: var(--bhw-space-5);
}

.bhw-about-hero h1 {
    font-size: var(--bhw-text-4-xl);
}

.bhw-lead {
    color: var(--bhw-color-text-secondary);
    font-size: var(--bhw-text-lg);
}

.bhw-about-hero figure {
    margin: 0;
}

.bhw-about-hero figure img {
    width: 100%;
    border-radius: var(--bhw-radius-panel);
    box-shadow: var(--bhw-shadow-raised);
}

.bhw-about-hero figcaption {
    margin-block-start: var(--bhw-space-2);
    color: var(--bhw-color-text-secondary);
    font-size: var(--bhw-text-xs);
}

.bhw-about-story {
    background: var(--bhw-color-surface-warm);
}

.bhw-about-story__grid {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
    gap: var(--bhw-space-8);
}

.bhw-about-story__media {
    margin: 0;
    overflow: hidden;
    border: var(--bhw-border-thin) solid var(--bhw-color-border);
    border-radius: var(--bhw-radius-large);
    box-shadow: var(--bhw-shadow-card);
}

.bhw-about-story__media img {
    width: 100%;
    height: 100%;
    min-height: 32rem;
    object-fit: cover;
}

.bhw-about-story .bhw-reading-content p {
    color: var(--bhw-color-text-secondary);
    font-size: var(--bhw-text-lg);
}

.bhw-values {
    background: var(--bhw-color-background-secondary);
}

.bhw-contact-hero {
    background:
        radial-gradient(circle at 70% 25%, var(--bhw-color-moss-wash), transparent 26rem),
        linear-gradient(135deg, var(--bhw-color-surface-elevated), var(--bhw-color-background-primary));
}

.bhw-contact-workspace__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(20rem, 0.7fr);
    gap: var(--bhw-space-7);
}

.bhw-contact-form,
.bhw-contact-aside {
    display: grid;
    align-content: start;
    gap: var(--bhw-space-4);
    padding: var(--bhw-space-6);
    border: var(--bhw-border-thin) solid var(--bhw-color-border);
    border-radius: var(--bhw-radius-panel);
    background: var(--bhw-color-panel);
    box-shadow: var(--bhw-shadow-card);
}

.bhw-contact-form .bhw-field {
    display: grid;
    gap: var(--bhw-space-2);
}

.bhw-contact-form :where(input, select, textarea) {
    width: 100%;
}

.bhw-contact-form textarea {
    resize: vertical;
}

.bhw-contact-form .bhw-button {
    width: fit-content;
}

.bhw-contact-form__status {
    min-height: 1.5em;
    margin: 0;
}

.bhw-contact-options {
    display: grid;
    gap: var(--bhw-space-3);
    margin-block-start: var(--bhw-space-2);
    padding-block-start: var(--bhw-space-4);
    border-block-start: var(--bhw-border-thin) solid var(--bhw-color-border);
}

.bhw-contact-options > * {
    margin: 0;
}

.bhw-contact-options small {
    max-width: 58ch;
    color: var(--bhw-color-text-secondary);
}

.bhw-contact-aside {
    background: var(--bhw-color-surface-warm);
}

.bhw-contact-aside > * {
    margin: 0;
}

.bhw-contact-aside > p:not(.bhw-eyebrow) {
    color: var(--bhw-color-text-secondary);
}

.bhw-contact-aside dl {
    display: grid;
    gap: var(--bhw-space-3);
    margin: var(--bhw-space-3) 0 0;
}

.bhw-contact-aside dl div {
    padding-block-start: var(--bhw-space-3);
    border-block-start: var(--bhw-border-thin) solid var(--bhw-color-border);
}

.bhw-contact-aside dt {
    color: var(--bhw-color-text-secondary);
    font-size: var(--bhw-text-xs);
    letter-spacing: var(--bhw-tracking-wide);
    text-transform: uppercase;
}

.bhw-contact-aside dd {
    margin: 0;
    font-weight: var(--bhw-weight-semibold);
}

.bhw-legal-page {
    background: var(--bhw-color-background-secondary);
}

.bhw-legal-shell {
    max-width: 64rem;
}

.bhw-legal-shell__document {
    padding: clamp(1.5rem, 5vw, 4rem);
    border: var(--bhw-border-thin) solid var(--bhw-color-border);
    border-radius: var(--bhw-radius-large);
    background: var(--bhw-color-panel);
    box-shadow: var(--bhw-shadow-card);
}

.bhw-legal-shell__document > header {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--bhw-space-4);
    min-width: 0;
    margin-block-end: var(--bhw-space-6);
    padding-block-end: var(--bhw-space-5);
    border-block-end: var(--bhw-border-thin) solid var(--bhw-color-border);
}

.bhw-legal-shell__document > header > * {
    min-width: 0;
    margin: 0;
    hyphens: auto;
    overflow-wrap: break-word;
}

.bhw-legal-shell__document .bhw-reading-content {
    font-size: var(--bhw-text-md);
}

.bhw-legal-shell__document .bhw-reading-content :where(h2, h3, h4, p, li, a) {
    min-width: 0;
    hyphens: auto;
    overflow-wrap: anywhere;
}

.bhw-legal-shell__document .bhw-reading-content :where(h2, h3) {
    margin-block-start: 1.6em;
}

.bhw-legal-form-copy {
    margin-block-start: var(--bhw-space-5);
    padding: var(--bhw-space-5);
    border: var(--bhw-border-thin) solid var(--bhw-color-border);
    border-radius: var(--bhw-radius-large);
    background: var(--bhw-color-background-secondary);
}

.bhw-legal-form-copy p {
    overflow-wrap: anywhere;
}

@media (max-width: 63.999rem) {
    .bhw-about-hero__grid,
    .bhw-about-story__grid {
        grid-template-columns: 1fr;
    }

    .bhw-about-hero figure {
        max-width: 44rem;
    }

    .bhw-values__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 51.249rem) {
    .bhw-contact-workspace__grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 34.999rem) {
    .bhw-legal-shell__document {
        padding: var(--bhw-space-4);
    }

    .bhw-legal-shell__document .bhw-reading-content h2 {
        font-size: clamp(1.75rem, 9vw, 2.5rem);
        line-height: 1.02;
    }

    .bhw-legal-shell__document .bhw-reading-content h3 {
        font-size: clamp(1.4rem, 7vw, 2rem);
    }

    .bhw-values__grid {
        grid-template-columns: 1fr;
    }

    .bhw-contact-form,
    .bhw-contact-aside {
        padding: var(--bhw-space-4);
    }
}