/* ============================================================
   home.css — Homepage-only styles
   Sections top to bottom: hero, statement (base), why cards,
   service pillars, our work, resources, testimonials.
   ============================================================ */

/* ------------------------------------------------------------
   Hero — teal, headline left, photo right
   ------------------------------------------------------------ */
.home-hero {
    background: var(--teal);
    padding: 72px 0 110px;
}

.home-hero .container {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 56px;
    align-items: center;
}

.home-hero h1 {
    font-size: clamp(40px, 4.6vw, 64px);
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--white);
}

.home-hero h1 .accent {
    color: var(--yellow);
}

.home-hero .hero-sub {
    margin-top: 28px;
    font-size: 17px;
    line-height: 1.6;
    color: var(--on-teal-soft);
    max-width: 400px;
}

.home-hero .btn {
    margin-top: 40px;
}

.hero-media {
    position: relative;
}

.hero-media img {
    width: 100%;
    aspect-ratio: 1 / 1.04;
    object-fit: cover;
    border-radius: var(--radius-lg);
    position: relative;
    z-index: 1; /* photo sits on top of the sparkle */
}

.hero-media .hero-sparkle {
    position: absolute;
    top: -56px;
    right: -48px;
    width: 130px;
    z-index: 0; /* rays peek out from behind the photo corner */
    pointer-events: none;
}

/* ------------------------------------------------------------
   Why Growing Businesses Choose BlackSwan — colorful cards
   ------------------------------------------------------------ */
.why {
    padding: var(--section-py) 0 120px;
}

.why-heading {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 64px;
}

.why-heading p {
    margin-top: 20px;
    font-size: 16px;
    color: var(--ink-soft);
}

.why-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.why-card {
    border-radius: var(--radius-lg);
    padding: 40px;
    min-height: 396px;
    display: flex;
    flex-direction: column;
}

.why-card h3 {
    margin-top: 96px;
    font-size: 27px;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.12;
    max-width: 300px;
}

.why-card p {
    margin-top: 26px;
    font-size: 16px;
    line-height: 1.6;
    max-width: 340px;
}

/* Color variants — title/body colors follow the design */
.why-card--yellow { background: var(--yellow); }
.why-card--yellow h3 { color: var(--teal-accent); }
.why-card--yellow p { color: var(--ink-soft); }

.why-card--plum { background: var(--plum); }
.why-card--plum h3 { color: var(--yellow); }
.why-card--plum p { color: rgba(255, 255, 255, 0.92); }

.why-card--mint { background: var(--mint); }
.why-card--mint h3 { color: var(--teal-accent); }
.why-card--mint p { color: var(--ink-soft); }

.why-card--red { background: var(--red); }
.why-card--red h3 { color: var(--yellow); }
.why-card--red p { color: rgba(255, 255, 255, 0.92); }

/* Wide black card with the "Learn more" pill */
.why-card--black {
    background: var(--black);
    grid-column: span 2;
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
}

.why-card--black .why-card-copy {
    display: flex;
    flex-direction: column;
    max-width: 460px;
}

.why-card--black h3 {
    color: var(--white);
}

.why-card--black p {
    color: rgba(255, 255, 255, 0.85);
}

.why-card--black .btn {
    background: var(--white);
    color: var(--teal-accent);
    flex-shrink: 0;
}

/* ------------------------------------------------------------
   Service pillars — cream, two photo cards
   ------------------------------------------------------------ */
.pillars {
    background: var(--cream);
    padding: var(--section-py) 0 120px;
}

.pillars-heading {
    text-align: center;
    max-width: 620px;
    margin: 0 auto 72px;
}

.pillars-heading .section-title {
    color: var(--teal-accent);
}

.pillars-heading p {
    margin-top: 20px;
    font-size: 16px;
    color: var(--ink-soft);
}

.pillars-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px 24px;
}

.pillar-card img {
    width: 100%;
    aspect-ratio: 600 / 585;
    object-fit: cover;
    border-radius: var(--radius-lg);
}

.pillar-card h3 {
    margin-top: 32px;
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--ink);
}

.pillar-card p {
    margin-top: 12px;
    font-size: 16px;
    color: var(--grey);
    max-width: 380px;
}

.pillar-card .text-link {
    margin-top: 18px;
}

/* ------------------------------------------------------------
   Our Work — white, single featured case study
   ------------------------------------------------------------ */
.work {
    padding: var(--section-py) 0 130px;
}

.work-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
    margin-bottom: 56px;
}

.work-heading p {
    margin-top: 24px;
    font-size: 16px;
    color: var(--ink-soft);
    max-width: 500px;
}

.work-card img {
    width: 100%;
    aspect-ratio: 1240 / 520;
    object-fit: cover;
    border-radius: var(--radius-lg);
}

.work-card h3 {
    margin-top: 32px;
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--teal-accent);
}

.work-card p {
    margin-top: 12px;
    font-size: 16px;
    color: var(--ink-soft);
    max-width: 740px;
}

/* ------------------------------------------------------------
   Resources & Insight — cream, three article cards
   Shared card styles also used on resources.html (duplicated
   there via resources.css to keep pages self-contained).
   ------------------------------------------------------------ */
.home-resources {
    background: var(--cream);
    padding: var(--section-py) 0 120px;
}

.home-resources .section-title {
    color: var(--teal-accent);
    margin-bottom: 64px;
}

.article-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.article-card img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: var(--radius-lg);
}

.article-card h3 {
    margin-top: 26px;
    font-size: 21px;
    font-weight: 600;
    letter-spacing: -0.015em;
    line-height: 1.25;
    color: var(--ink);
}

.article-card .text-link {
    margin-top: 14px;
}

.home-resources .btn {
    margin-top: 72px;
}

/* ------------------------------------------------------------
   Testimonials — black band, three quote cards
   ------------------------------------------------------------ */
.testimonials {
    background: var(--black);
    padding: var(--section-py) 0 140px;
}

.testimonials .section-title {
    color: var(--white);
    text-align: center;
    margin-bottom: 72px;
}

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

.testimonial-card {
    background: #101010;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--radius-md);
    padding: 32px 28px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.testimonial-card blockquote {
    font-size: 16px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.92);
    flex-grow: 1;
}

.testimonial-meta {
    display: flex;
    align-items: center;
    gap: 12px;
}

.testimonial-meta img {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
}

.testimonial-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--white);
}

.testimonial-role {
    margin-top: 2px;
    font-size: 13px;
    color: var(--grey-light);
}

/* ------------------------------------------------------------
   Responsive
   ------------------------------------------------------------ */
@media (max-width: 1024px) {
    .home-hero .container {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .hero-media .hero-sparkle {
        top: -32px;
        right: 0;
        width: 90px;
    }

    .why-grid {
        grid-template-columns: 1fr 1fr;
    }

    .why-card--black {
        grid-column: span 2;
        flex-direction: column;
        align-items: flex-start;
    }

    .testimonials-grid {
        grid-template-columns: 1fr;
        max-width: 620px;
        margin: 0 auto;
    }
}

@media (max-width: 768px) {
    .home-hero {
        padding: 48px 0 72px;
    }

    .work-card img {
        aspect-ratio: 4 / 3;
    }

    .why-grid,
    .pillars-grid,
    .article-grid {
        grid-template-columns: 1fr;
    }

    .why-card {
        min-height: auto;
    }

    .why-card h3 {
        margin-top: 48px;
    }

    .why-card--black {
        grid-column: auto;
        gap: 32px;
    }

    .work-heading {
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
    }

    .home-resources .btn {
        margin-top: 48px;
    }
}