/* HERO — lavender, founder cut-out flush to bottom-left, white headline */

.hero {
    position: relative;
    padding: 110px 0 0; /* no bottom padding so photo sits flush */
    overflow: hidden;
    color: #fff;
    min-height: 720px;
}

.hero-grid {
    max-width: var(--container-wide);
    margin: 0 auto;
    padding: 0 32px;
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    align-items: end; /* anchor bottom so photo touches section bottom */
    gap: 40px;
    min-height: 620px;
}

.hero-image-col {
    position: relative;
    align-self: end;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.hero-image {
    width: 100%;
    max-width: 520px;
    height: auto;
    display: block;
    margin: 0 auto;
}

.hero-content {
    max-width: 720px;
    padding-bottom: 80px;
    align-self: center;
}

/* Lighter Reckless Neue for surrounding text, heavier for highlighted words */
.hero-title {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: clamp(2.4rem, 3.6vw, 4.2rem);
    line-height: 1.08;
    letter-spacing: -0.012em;
    color: #fff;
    margin-bottom: 30px;
    max-width: 720px;
}

/* Force exact 3-line break regardless of viewport width */
.hero-title .line {
    display: block;
    white-space: nowrap;
}

/* Hero-specific override (white text on lavender bg). The base .fx + .fx::before
   rules now live in style.css so sections can use the brushstroke pattern
   without needing hero.css loaded. */
.hero-title .fx { color: #fff; }

.fx-message::before {
    background-image: url("../assets/images/messages-image-bg.png");
    height: 0.36em;
    bottom: -0.02em;
    left: -0.02em;
    width: 102%;
}

.fx-mission::before {
    background-image: url("../assets/images/mission-effect.png");
    height: 0.32em;
    bottom: 0.0em;
    left: -0.02em;
    width: 102%;
}

/* "works" gets a hand-drawn ellipse that extends beyond the text */
.fx-works {
    padding: 0 0.32em;
    margin-right: 0.25em; /* prevent right-side clipping */
}
.fx-works::before {
    background-image: url("../assets/images/works-image-bg.png");
    background-size: 100% 100%;
    height: 130%;
    top: -15%;
    bottom: auto;
    left: -0.06em;
    width: calc(100% + 0.12em);
    z-index: -1;
}

/* Subtitle — white, regular weight, with inline strong emphasis */
.hero-subtitle {
    font-family: var(--font-body);
    font-weight: 300;
    font-size: 1.05rem;
    line-height: 1.6;
    color: #fff;
    margin-bottom: 32px;
    max-width: 570px;
}
.hero-subtitle strong { font-weight: 500; color: #fff; }

/* Hero CTA — uses the global .btn-lavender variant. Only override sizing here. */
.hero .btn-lavender { padding: 16px 34px; font-size: 0.82rem; letter-spacing: 0.16em; }

/* Tablet — keep 2-col but tighten */
@media (max-width: 1024px) {
    .hero { padding: 140px 0 0; min-height: auto; }
    .hero-grid {
        grid-template-columns: 1fr;
        gap: 0;
        padding: 0 24px;
        min-height: 0;
    }
    .hero-image-col { max-width: 420px; margin: 0 auto; order: 2; align-self: center; }
    .hero-content {
        padding-bottom: 32px;
        order: 1;
        max-width: 100%;
        text-align: left;
    }
    .hero-title {
        font-size: clamp(2.2rem, 6.5vw, 3.4rem);
        margin-bottom: 22px;
    }
    .hero-subtitle { font-size: 0.98rem; max-width: 100%; margin-bottom: 26px; }
    .hero .btn-lavender { padding: 14px 28px; font-size: 0.78rem; }
}

/* Phone */
@media (max-width: 480px) {
    .hero { padding: 132px 0 0; }
    .hero-grid { padding: 0 20px; }
    .hero-title { font-size: clamp(2rem, 8.5vw, 2.6rem); }
    .hero-image-col { max-width: 320px; }
}