/* CASE-STUDY HERO — white background, big serif headline, scattered decor shapes.
   Different from .case-hero (lavender band on the work index). */

.cs-hero {
    position: relative;
    background: #fff;
    padding: clamp(160px, 14vw, 220px) 0 clamp(140px, 14vw, 220px);
    overflow: hidden;
}
/* 1px navy line drawn at the hero's top edge of CONTENT (just below the
   absolutely-positioned site-header). Sits on the hero — not the nav — so the
   line is local to this template and won't bleed onto other pages. */
.cs-hero::before {
    content: "";
    position: absolute;
    top: 120px;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--clr-navy);
    z-index: 3;
}

.cs-hero-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 clamp(32px, 5vw, 100px) 0 clamp(40px, 12vw, 220px);
    position: relative;
    z-index: 2;
}

.cs-hero-headline {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(2.2rem, 4.6vw, 4rem);
    line-height: 1.06;
    letter-spacing: -0.012em;
    color: var(--clr-navy);
    max-width: 1100px;
    margin: 0 0 32px;
}
.cs-hero-headline .line { display: block; white-space: nowrap; }
/* Lines after the first sit in a lighter weight per the mockup */
.cs-hero-headline .line + .line { font-weight: 400; }

.cs-hero-sub {
    font-family: var(--font-body);
    font-size: 0.92rem;
    color: var(--clr-navy);
    opacity: 0.85;
    margin: 0;
    letter-spacing: 0;
}

/* ============== Decor shapes ============== */
.cs-hero-decor {
    position: absolute;
    pointer-events: none;
    z-index: 1;
}

/* Yellow inverted triangle — flat top sits flush against the navy line below the nav */
.cs-decor-tri {
    top: 120px;
    left: 32%;
    width: 0; height: 0;
    border-left: 16px solid transparent;
    border-right: 16px solid transparent;
    border-top: 26px solid var(--clr-yellow);
    z-index: 2;
}

/* Blue dotted half-circle (top-LEFT edge, mostly off-screen — peeks right) */
.cs-decor-dotted-half {
    top: 22%;
    left: -32px;
    width: 70px;
    height: auto;
}

/* Lavender solid half-circle (top-RIGHT edge, flat side right, peeks left) */
.cs-decor-half-lavender {
    top: 22%;
    right: -32px;
    width: 64px;
    height: 64px;
    background: #8090ff;
    border-radius: 64px 0 0 64px;
}

/* Red solid half-circle (mid-RIGHT edge, smaller, flat side right) */
.cs-decor-half-red {
    top: 52%;
    right: -22px;
    width: 50px;
    height: 50px;
    background: var(--clr-red);
    border-radius: 50px 0 0 50px;
}

/* Red striped sphere (bottom-LEFT, below sub-header) */
.cs-decor-striped {
    bottom: 14%;
    left: 12%;
    width: 64px;
    height: auto;
}

/* Blue dotted-ring sphere (bottom mid-right, slightly lower than striped) */
.cs-decor-dot-sphere {
    bottom: 9%;
    left: 47%;
    width: 70px;
    height: auto;
}

/* ============== Tablet ============== */
/* Same story as mobile — at tablet widths the headline + sub-header take the
   full canvas, so the scattered decor collides with the logo, hamburger, and
   text. Hide all five PNG/CSS decor shapes; the navy line + yellow triangle
   keep the layout anchored. */
@media (max-width: 1024px) {
    .cs-hero { padding: 140px 0 56px; }
    .cs-hero-container { padding: 0 24px; }
    .cs-hero-headline { font-size: clamp(2rem, 7vw, 3.2rem); margin-bottom: 22px; max-width: 100%; }
    .cs-hero-sub { font-size: 0.88rem; }

    .cs-decor-dotted-half,
    .cs-decor-half-lavender,
    .cs-decor-half-red,
    .cs-decor-striped,
    .cs-decor-dot-sphere {
        display: none;
    }
    .cs-decor-tri { border-left-width: 14px; border-right-width: 14px; border-top-width: 22px; }
}

/* ============== Mobile ============== */
/* On phones the hero is too narrow for the decor scatter to live alongside the
   headline without colliding with the logo, hamburger, headline, and sub-header.
   Hide all decor below 600px (and the navy line + triangle still anchor the layout). */
@media (max-width: 600px) {
    .cs-hero { padding: 140px 0 44px; }
    .cs-hero-container { padding: 0 20px; }
    .cs-hero-headline { font-size: clamp(1.7rem, 8vw, 2.4rem); }

    .cs-decor-dotted-half,
    .cs-decor-half-lavender,
    .cs-decor-half-red,
    .cs-decor-striped,
    .cs-decor-dot-sphere {
        display: none;
    }
    /* Keep the yellow triangle as the only decor — it anchors the navy line. */
    .cs-decor-tri { border-left-width: 11px; border-right-width: 11px; border-top-width: 18px; }
}