/* FOUNDATION — greige, woman with shapes left, headline right */

.foundation {
    padding: var(--section-py-lg) 0 0;
    position: relative;
}

.foundation-grid {
    display: grid;
    grid-template-columns: 0.85fr 1.1fr;
    gap: 70px;
    align-items: center;
    padding-bottom: var(--section-py-lg);
}

.foundation-image-col {
    display: flex;
    justify-content: center;
}

.foundation-image {
    width: 100%;
    max-width: 460px;
    aspect-ratio: 5 / 5.4;
    height: auto;
    object-fit: cover;
    object-position: center 35%;
    border-radius: 22px;
    overflow: hidden;
    display: block;
}

/* Headline — bigger, navy, with bold words for foundation / builds from there */
.foundation-heading {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(2.4rem, 4vw, 3.6rem);
    line-height: 1.12;
    letter-spacing: -0.012em;
    color: var(--clr-navy);
    margin-bottom: 36px;
}
.foundation-heading .line {
    display: block;
}
/* Visual gap between the two thoughts: "Your message sets the foundation."
   and "Everything else builds from there." */
.foundation-heading .line:nth-of-type(3) {
    margin-top: 0.55em;
}
.foundation-heading strong {
    font-weight: 700;
}

/* Effect overlays for foundation/builds (lavender brushstrokes).
   Override the white color from hero.css .fx — navy text reads above the stroke. */
.foundation-heading .fx-foundation,
.foundation-heading .fx-builds {
    color: var(--clr-navy);
    font-weight: 700;
}
.foundation-heading .fx-foundation::before {
    background-image: url("../assets/images/foundation-effect.png");
    height: 0.32em;
    bottom: -0.04em;
    left: -0.02em;
    width: 102%;
}
.foundation-heading .fx-builds::before {
    background-image: url("../assets/images/builds-effect.png");
    height: 0.32em;
    bottom: -0.04em;
    left: -0.02em;
    width: 102%;
}

/* Subtitle — "always" is bold navy with a red brushstroke underline.
   Sized to span ~the same width as the headline above. Compound selector
   beats `.foundation-content p` (which sets font-size: 1rem). */
.foundation-content p.foundation-sub {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: 1.6rem;
    line-height: 1.3;
    color: var(--clr-navy);
    margin-bottom: 32px;
    letter-spacing: -0.005em;
    max-width: none;
}
.foundation-sub .fx-always {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--clr-navy);
    padding: 0 0.05em;
}
.foundation-sub .fx-always strong {
    font-weight: 700;
}
.foundation-sub .fx-always::before {
    background-image: url("../assets/images/always-effect.png");
    height: 0.22em;
    bottom: -0.04em;
    left: -0.02em;
    width: 102%;
}

.foundation-content p {
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.7;
    max-width: 520px;
    color: var(--clr-navy);
    margin-bottom: 14px;
}
.foundation-content p:last-of-type { margin-bottom: 0; }
.foundation-content p strong { font-weight: 600; }

/* Bottom decorative divider — small repeating shapes */
.foundation-divider {
    width: 100%;
    height: 22px;
    background-image: url("../assets/images/pattern.png");
    background-repeat: repeat-x;
    background-position: center center;
    background-size: auto 22px;
}

@media (max-width: 1024px) {
    .foundation { padding: 80px 0 0; }
    .foundation-grid {
        grid-template-columns: 1fr;
        gap: 32px;
        padding: 0 24px 64px;
    }
    .foundation-image { max-width: 380px; }
    .foundation-heading {
        font-size: clamp(2rem, 7.5vw, 2.8rem);
        margin-bottom: 22px;
    }
    .foundation-divider { height: 18px; background-size: auto 18px; }
}

@media (max-width: 480px) {
    .foundation { padding: 56px 0 0; }
    .foundation-grid { gap: 24px; padding: 0 20px 48px; }
    .foundation-heading { font-size: clamp(1.8rem, 9vw, 2.4rem); }
    .foundation-content p { font-size: 0.95rem; }
}