/* Dark bands: the global h1-h4 rule sets umber-ink, which overrides the
   inherited light color. Every heading inside a dark band needs its own
   override so nothing renders dark-on-dark. */
.front-door h1,
.front-door h2,
.front-door h3,
.front-door h4,
.door-panel h1,
.door-panel h2,
.door-panel h3,
.door-panel h4,
.section-dark h1,
.section-dark h2,
.section-dark h3,
.section-dark h4,
.door-hero h1,
.cta-band h1,
.cta-band h2,
.cta-band h3,
.cta-band h4,
.home-cta h1,
.home-cta h2,
.home-cta h3,
.home-cta h4,
.site-footer h1,
.site-footer h3,
.site-footer h4 {
    color: var(--trim-white);
}

/* Front door CTA */
.cta-band,
.home-cta,
.front-door {
    background: var(--door-juniper);
    color: var(--trim-white);
}

.cta-band {
    border-radius: 1px;
    padding: clamp(36px, 5vw, 68px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap;
    box-shadow:
        inset 0 2px 0 rgba(0, 0, 0, 0.35),
        inset 0 -1px 0 rgba(255, 255, 255, 0.08),
        inset 0 0 0 14px var(--door-deep),
        inset 0 0 0 15px rgba(0, 0, 0, 0.3),
        inset 0 0 0 16px rgba(255, 255, 255, 0.06);
    background: var(--door-deep);
}

.cta-band h2,
.home-cta h2,
.front-door h2 {
    margin-bottom: 8px;
}

.cta-band p,
.home-cta p,
.front-door .intro {
    color: var(--on-door);
    max-width: 56ch;
    line-height: 1.7;
}

.cta-band a:not(.btn),
.front-door a:not(.btn),
.home-cta a:not(.btn) {
    color: var(--trim-white);
}

.cta-band :focus-visible,
.front-door :focus-visible,
.home-cta :focus-visible {
    outline-color: var(--trim-white);
}

.door-panel {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 32px clamp(32px, 6vw, 88px);
    align-items: center;
    padding: clamp(36px, 5vw, 68px);
    border-radius: 1px;
    background: var(--door-deep);
    box-shadow:
        inset 0 2px 0 rgba(0, 0, 0, 0.35),
        inset 0 -1px 0 rgba(255, 255, 255, 0.08),
        inset 0 0 0 14px var(--door-deep),
        inset 0 0 0 15px rgba(0, 0, 0, 0.3),
        inset 0 0 0 16px rgba(255, 255, 255, 0.06);
}

@media (max-width: 960px) {
    .door-panel {
        grid-template-columns: 1fr;
        gap: 28px;
    }
}

@media (max-width: 600px) {
    .door-panel {
        padding: 36px 26px;
    }
}