/* Hero — intro card + team photo. */
.hero { background: var(--tint-teal-10); padding-top: 32px; padding-bottom: 40px; }
.hero-row { display: flex; align-items: stretch; gap: 0; }
.hero-card {
    background: var(--brand-white);
    border-radius: 20px;
    padding: 64px;
    width: 784px;
    max-width: 51%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 48px;
    position: relative;
    z-index: 2;
}
/* Flex-nesting safety net: unset default min-width:auto so text wraps
   instead of overflowing the container at narrow viewports. */
.hero-row, .hero-card, .hero-card * { min-width: 0; }
.hero-card-top { display: flex; flex-direction: column; gap: 28px; }
.hero-card-top h1 { color: var(--brand-teal); }
.hero-card-body { display: flex; flex-direction: column; gap: 32px; }
.hero-card-body .body-intro { color: var(--brand-dark-teal); }
.hero-card-actions { display: flex; gap: 16px; }
.hero-photo {
    flex: 1;
    border-radius: 20px;
    width: calc(49% + 25px);
    margin-left: -25px;
    overflow: hidden;
    min-height: 400px;
}
.hero-photo img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 1199.98px) {
    .hero-card { padding: 40px; }
    .hero-card h1 { font-size: 40px; line-height: 44px; }
}

@media (max-width: 991.98px) {
    .hero-row { flex-direction: column; }
    .hero-card { width: 100%; max-width: 100%; }
    .hero-photo { margin-left: 0; min-height: 320px; }
}

@media (max-width: 767.98px) {
    .hero-card { padding: 28px; }
    .hero-card h1 { font-size: 32px; line-height: 36px; }
}

@media (max-width: 575.98px) {
    .hero-card-actions { flex-direction: column; }
    .hero-card-actions .btn { width: 100%; justify-content: center; }
}