/* === hero-split ===
 * Two-column hero. Text left, image right. Painted typography.
 * Eyebrow uses shared .ssla-eyebrow gold-rule treatment.
 *
 * @updated 3.5.54
 */
.shs {
    background: var(--ssla-bg-color, transparent);
    min-height: 85vh;
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    align-items: center;
    padding: 100px 48px 80px;
    gap: 64px;
}

.shs-text {
    max-width: 540px;
}

/* Eyebrow uses shared .ssla-eyebrow — already styled. .shs-badge scope for tweaks only. */
.shs-badge {
    margin-bottom: 24px;
}

/* Heading — larger and stronger than v3.5.53. */
.shs h1 {
    font-family: var(--paint-font-family, var(--shell-hf, inherit));
    font-size: var(--paint-h1-size, clamp(2.4rem, 4.8vw, 3.4rem));
    font-weight: var(--paint-heading-weight, 800);
    letter-spacing: var(--paint-heading-letter-spacing-h1, -1.5px);
    text-transform: var(--paint-heading-case-h1, none);
    color: var(--shell-h, currentColor);
    line-height: 1.08;
    margin: 0 0 24px;
}
.shs h1 em {
    font-style: italic;
    color: var(--shell-accent, var(--preset-accent, currentColor));
}
.shs h1 .gold,
.shs h1 .ssla-accent {
    color: var(--shell-accent, var(--preset-accent, currentColor));
}

/* Description */
.shs-desc {
    font-size: var(--paint-body-size, 1rem);
    color: var(--shell-t, var(--preset-text-body, #4a5568));
    line-height: var(--paint-body-line-height, 1.7);
    margin: 0 0 32px;
    max-width: 480px;
}
.shs-desc strong {
    color: var(--shell-h, var(--preset-primary, currentColor));
    font-weight: 700;
}
.shs-desc p {
    margin: 0 0 0.6em;
}
.shs-desc p:last-child {
    margin-bottom: 0;
}

/* Buttons */
.shs-actions {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    align-items: center;
}
.shs-cta {
    display: inline-block;
    padding: 16px 38px;
    background: var(--paint-button-primary-fill, var(--shell-accent, var(--preset-accent, currentColor)));
    color: var(--paint-button-primary-text, #fff);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: var(--paint-button-radius, 0);
    transition: var(--paint-motion-timing, 0.3s);
}
/* v3.12.24 (#5) — button-hover paint retired (Glenn 2026-05-21 walk).
 * Unified hover treatment now ships from 0-shared.css (lift only,
 * no paint shift). Original rule preserved here for reference.
 * Original:
 * .shs-cta:hover {
 *     filter: brightness(1.08);
 *     transform: translateY(var(--paint-hover-lift, -2px));
 *     box-shadow: 0 8px 22px rgba(0, 0, 0, 0.12);
 * }
 */
.shs-cta:hover{
    transform: translateY(var(--paint-hover-lift, -2px));
}
.shs-cta2 {
    display: inline-block;
    padding: 14px 36px;
    background: transparent;
    color: var(--shell-h, var(--preset-primary, currentColor));
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-decoration: none;
    border: 2px solid currentColor;
    transition: var(--paint-motion-timing, 0.3s);
    border-radius: var(--paint-button-radius, 0);
}
/* v3.12.24 (#5) — button-hover paint retired (Glenn 2026-05-21 walk).
 * Unified hover treatment now ships from 0-shared.css (lift only,
 * no paint shift). Original rule preserved here for reference.
 * Original:
 * .shs-cta2:hover {
 *     background: var(--shell-h, var(--preset-primary, currentColor));
 *     color: var(--shell-bg, #fff);
 * }
 */
.shs-cta2:hover{/* paint retired; global rule provides lift */}
.shs-cta:empty,
.shs-cta2:empty {
    display: none;
}

/* Image column */
.shs-visual {
    display: flex;
    align-items: center;
    justify-content: center;
}
.shs-img-wrap {
    width: 100%;
    aspect-ratio: 4/3;
    background: var(--shell-card, rgba(0, 0, 0, 0.03));
    border: 1px solid var(--shell-line, rgba(0, 0, 0, 0.06));
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.shs-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.shs-img[src=""] {
    display: none;
}

@media (max-width: 768px) {
    .shs {
        grid-template-columns: 1fr;
        padding: 100px 24px 40px;
        gap: 40px;
    }
    .shs h1 {
        font-size: 2.2rem;
        letter-spacing: -1px;
    }
}

/* v3.12.02 — tone override classes. ssla-tone-dark inverts text
 * to read against dark bgs; ssla-tone-light inverts to read against
 * light bgs. Surgical inversion of headings/body/eyebrow; complete
 * coverage will iterate per Glenn's walks. */
.ssla-tone-dark .shs h1{color: #ffffff}
.ssla-tone-dark .shs-desc{color: rgba(255, 255, 255, 0.78)}
.ssla-tone-light .shs h1{color: var(--shell-h, #1a1d21)}
.ssla-tone-light .shs-desc{color: var(--shell-t, #4a5568)}