/* =========================================================
   EcoFeed Solutions – About page
   Same palette / type / layout language as home + products
   ========================================================= */

.about-page {
    --green: #4CAF50;
    --green-deep: #2e7d32;
    --gold: #FFD700;
    --cream: #FBF4E4;
    --ink: #111;
    --muted: #4d4d4d;
    --line: #ddd5bf;
    --ease: cubic-bezier(.22, .8, .24, 1);
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 16px;
    line-height: 1.65;
    color: var(--ink);
    background: #fff;
}

.about-page *, .about-page *::before, .about-page *::after { box-sizing: border-box; }
.about-page h1, .about-page h2, .about-page h3, .about-page p { margin: 0; padding: 0; }
.about-page img { display: block; max-width: 100%; }
.about-page .wrap { max-width: 1240px; margin: 0 auto; padding: 0 24px; }
.about-page .sec { padding: clamp(64px, 9vw, 112px) 0; }

/* gold marker highlight on key phrases */
.about-page strong {
    font-weight: 700;
    background: linear-gradient(transparent 62%, rgba(255, 215, 0, .6) 0);
}

/* ---------- Banner ---------- */
.about-hero {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: clamp(340px, 52vh, 460px);
    padding: 140px 0 64px;
    color: #fff;
    background: #1d3a21 url('../img/larvae.jpg') center / cover no-repeat;
    border-radius: 0 0 44px 44px;
    overflow: hidden;
}

.about-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(0, 0, 0, .6) 0%, rgba(0, 0, 0, 0) 38%),
        linear-gradient(90deg, rgba(0, 0, 0, .7) 0%, rgba(0, 0, 0, .3) 60%, rgba(0, 0, 0, .15) 100%);
}

.about-hero .wrap { position: relative; z-index: 1; width: 100%; }

.about-hero h1 {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 800;
    font-size: clamp(42px, 6.6vw, 86px);
    line-height: .98;
    letter-spacing: -.035em;
    margin-bottom: 18px;
}

.about-hero p { font-size: clamp(16px, 1.7vw, 20px); max-width: 46ch; color: rgba(255, 255, 255, .92); }
.about-hero strong { background: none; }

/* ---------- Who we are ---------- */
.about-page .about {
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    gap: 72px;
    align-items: center;
}

.about-page .about-media img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: 14px;
}

.about-page .about-one h2 {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 800;
    font-size: clamp(34px, 4.8vw, 58px);
    line-height: 1;
    letter-spacing: -.035em;
    margin-bottom: 26px;
}

.about-page .about-one p { font-size: 19px; color: var(--muted); max-width: 54ch; }
.about-page .about-one p strong { color: var(--ink); }

/* ---------- Mission and vision: big statements ---------- */
.about-page .sec-cream { background: var(--cream); }

.about-page .statements {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-top: 2px solid var(--ink);
}

.about-page .statement { padding: 40px 48px 8px 0; }
.about-page .statement + .statement { padding-left: 48px; padding-right: 0; border-left: 1px solid var(--line); }

.about-page .statement h3 {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 700;
    font-size: 20px;
    color: var(--green-deep);
    margin-bottom: 18px;
}

.about-page .statement p {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 600;
    font-size: clamp(24px, 2.6vw, 34px);
    line-height: 1.22;
    letter-spacing: -.02em;
}

/* ---------- Why choose us: green band ---------- */
.about-page .sec-green {
    background: var(--green);
    color: #fff;
    padding-bottom: clamp(190px, 22vw, 230px);
}

.about-page .why { display: grid; grid-template-columns: .8fr 1.4fr; gap: 56px; align-items: start; }

.about-page .why h2 {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 800;
    font-size: clamp(34px, 4.8vw, 58px);
    line-height: 1;
    letter-spacing: -.035em;
}

.about-page .why-list { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid rgba(255, 255, 255, .5); }

.about-page .why-item { padding: 30px 28px 30px 0; border-bottom: 1px solid rgba(255, 255, 255, .5); }
.about-page .why-item:nth-child(even) { padding-left: 28px; padding-right: 0; border-left: 1px solid rgba(255, 255, 255, .5); }

.about-page .why-item i { font-size: 28px; color: var(--gold); margin-bottom: 16px; display: block; }

.about-page .why-item h3 {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 700;
    font-size: 22px;
    line-height: 1.2;
    margin-bottom: 8px;
}

.about-page .why-item p { color: #fff; }

/* let the green band run behind the footer's rounded corners (needs footer-v3) */
body .site-footer { margin-top: -44px; }

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
    .about-page .about { grid-template-columns: 1fr; gap: 40px; }
    .about-page .about-media img { aspect-ratio: 16 / 11; }
    .about-page .why { grid-template-columns: 1fr; gap: 36px; }
}

@media (max-width: 760px) {
    .about-page .wrap { padding: 0 18px; }
    .about-hero { min-height: 300px; padding: 110px 0 40px; border-radius: 0 0 28px 28px; }
    .about-page .about-one p { font-size: 16px; }

    .about-page .statements { grid-template-columns: 1fr; }
    .about-page .statement { padding: 32px 0 8px; }
    .about-page .statement + .statement { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); margin-top: 24px; }

    .about-page .why-list { grid-template-columns: 1fr; }
    .about-page .why-item,
    .about-page .why-item:nth-child(even) { padding: 26px 0; border-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .about-page * { transition-duration: .01ms !important; }
}