/* CASE HERO — lavender band, split-color headline + body + decor shapes.
   Reusable on any sub-page that needs a tinted hero (about, services, work). */

.case-hero {
    position: relative;
    background: rgba(128, 144, 255, 0.18); /* same lavender wash as the blog filter bar */
    padding: clamp(150px, 13vw, 200px) 0 clamp(80px, 10vw, 140px);
    overflow: hidden;
}

.case-hero-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 32px;
    position: relative;
    z-index: 2;
}

.case-hero-headline {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(2.4rem, 5vw, 4.8rem);
    line-height: 1.05;
    letter-spacing: -0.012em;
    color: var(--clr-navy);
    max-width: 900px;
    margin: 0 0 32px;
}
.case-hero-headline .line { display: block; white-space: nowrap; }
.case-hero-headline .accent { color: var(--clr-blue); }

.case-hero-body {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.55;
    color: var(--clr-navy);
    max-width: 580px;
    margin: 0;
    letter-spacing: 0;
}

/* Decorative brand shapes */
.case-hero-decor {
    position: absolute;
    pointer-events: none;
    z-index: 1;
}
.case-hero-tri {
    top: 30%;
    right: 30%;
    width: clamp(40px, 4.6vw, 66px);
    height: auto;
}
.case-hero-yellow {
    top: 50%;
    right: 12%;
    width: clamp(24px, 2.3vw, 34px);
    height: clamp(24px, 2.3vw, 34px);
    background: var(--clr-yellow);
    border-radius: 50%;
}
.case-hero-half {
    bottom: 16%;
    left: 50%;
    transform: translateX(-30%);
    width: clamp(30px, 3.1vw, 44px);
    height: auto;
}

@media (max-width: 1024px) {
    .case-hero { padding: 130px 0 72px; }
    .case-hero-container { padding: 0 24px; }
    .case-hero-headline { font-size: clamp(2rem, 8.5vw, 3.4rem); margin-bottom: 22px; }
    .case-hero-body { font-size: 0.95rem; max-width: 100%; }
    .case-hero-tri { right: 8%; top: 14%; width: 50px; }
    /* Yellow + half-circle hug the right edge so they clear the reflowed headline */
    .case-hero-yellow { right: -2%; top: 38%; width: 32px; height: 32px; }
    .case-hero-half { bottom: 6%; left: auto; right: 8%; transform: none; width: 36px; }
}

@media (max-width: 480px) {
    .case-hero { padding: 120px 0 60px; }
    .case-hero-headline { font-size: clamp(1.8rem, 9vw, 2.6rem); }
    .case-hero-tri { width: 40px; }
    .case-hero-yellow { right: -4%; width: 24px; height: 24px; }
    .case-hero-half { width: 28px; }
}