/* ==========================================================================
   think.AGRI - About page
   Builds on how-it-works.css (hero, cards, ERP and CTA styles) so the page
   has the same look as the Home page. Scoped with the .ab- prefix.
   ========================================================================== */

.ab-page .section-heading h2 { font-size: 3.4rem; font-weight: 800; }
.ab-page .section-heading h2 span { color: var(--ta-green-light); border-bottom: 3px solid var(--ta-yellow); }
.ab-page .section-heading--white h2 { color: #fff; }
.ab-page .section-heading--white h2 span { color: var(--ta-yellow); border-bottom: 0; }
.ab-page .section-heading p { font-size: 1.6rem; line-height: 1.7; }

/* ---------- 1. our story: a tractor plants each milestone along a farm road ---------- */
.ab-story { background: #fff; padding: 90px 0; }
.ab-story .section-heading p { color: var(--ta-text); }
.ab-farm { position: relative; margin-top: 10px; }
.ab-timeline { position: relative; z-index: 2; list-style: none; margin: 0; padding: 48px 0 0 74px; }
.ab-timeline li { position: relative; padding: 2px 0 30px; transition: opacity .5s ease; }
.ab-timeline li:last-child { padding-bottom: 6px; }
.ab-timeline__year {
    display: inline-block; margin-bottom: 6px; padding: 3px 12px; border-radius: 20px;
    background: var(--ta-green); color: var(--ta-yellow);
    font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}
.ab-timeline h3 { margin: 0 0 4px; font-size: 20px; font-weight: 800; color: var(--ta-head); }
.ab-timeline p { margin: 0; color: var(--ta-text); font-size: 15px; line-height: 1.6; }

/* the road (drawn by about.js through every milestone) */
.ab-farm__road { position: absolute; top: 0; left: 0; bottom: 0; width: 70px; z-index: 1; pointer-events: none; }
.ab-farm__svg { display: block; overflow: visible; }
.ab-farm__dirt { fill: none; stroke: #e8d5b5; stroke-width: 22; stroke-linecap: round; }
.ab-farm__tilled { fill: none; stroke: #b48a5a; stroke-width: 12; stroke-linecap: round; stroke-dasharray: 0 99999; transition: stroke-dashoffset .1s linear; }
.ab-farm__centre { fill: none; stroke: #8a6a3f; stroke-width: 2; stroke-dasharray: 2 7; stroke-linecap: round; opacity: .45; }

/* the tractor (seen from above, drives down the road) */
.ab-tractor { position: absolute; top: 0; left: 0; width: 30px; height: 42px; transform-origin: 15px 21px; display: none; will-change: transform; }
.ab-tractor svg { display: block; width: 30px; height: 42px; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .3)); }
.ab-farm.is-driving .ab-tractor svg { animation: abRumble .18s linear infinite; }
@keyframes abRumble { 50% { transform: translateY(.6px); } }
.ab-tractor__tyre { fill: #1f2937; }
.ab-tractor__tread { stroke: #4b5563; stroke-width: 1.4; }
.ab-tractor__body { fill: #4d7c0f; }
.ab-tractor__cab { fill: #365314; }
.ab-tractor__roof { fill: #fcdb5a; }
.ab-tractor__exhaust { fill: #374151; }
.ab-tractor__light { fill: #fef9c3; }
.ab-tractor__puff {
    position: absolute; left: 15px; top: 20px; width: 7px; height: 7px; border-radius: 50%;
    background: rgba(148, 163, 184, .55); opacity: 0;
    animation: abPuff 1.6s ease-out infinite;
}
.ab-tractor__puff:nth-child(2) { animation-delay: .55s; }
.ab-tractor__puff:nth-child(3) { animation-delay: 1.1s; }
.ab-farm.is-driving .ab-tractor__puff { animation-duration: .9s; }
@keyframes abPuff { 0% { opacity: .8; transform: translate(0, 0) scale(.5); } 100% { opacity: 0; transform: translate(8px, -16px) scale(2.2); } }

/* the plants at each milestone */
.ab-plant { position: absolute; left: -60px; top: 0; width: 32px; height: 32px; z-index: 3; }
.ab-plant svg { display: block; width: 32px; height: 32px; overflow: visible; }
.ab-plant__soil { fill: #8b5e34; }
.ab-plant__stem { fill: none; stroke: #15803d; stroke-width: 2.4; stroke-linecap: round; }
.ab-plant__leaf { fill: #22c55e; }
.ab-plant__leaf--r { fill: #16a34a; }
.ab-plant__carrot { fill: #f97316; }
.ab-plant__sprout { transform-box: fill-box; transform-origin: 50% 100%; }

/* with JavaScript: road and tractor appear, plants grow as the tractor passes */
.ab-farm.is-ready .ab-tractor { display: block; }
.ab-farm.is-ready .ab-timeline li { opacity: .45; }
.ab-farm.is-ready .ab-timeline li.is-planted { opacity: 1; }
.ab-farm.is-ready .ab-plant__sprout { transform: scale(0); }
.ab-farm.is-ready li.is-planted .ab-plant__sprout { animation: abGrow .7s cubic-bezier(.3, 1.6, .5, 1) forwards; }
.ab-farm.is-ready li.is-planted .ab-plant--carrot .ab-plant__sprout { animation-duration: .9s; }
@keyframes abGrow { from { transform: scale(0); } to { transform: scale(1); } }
.ab-farm.is-ready li.is-planted .ab-timeline__year { animation: abPop .5s ease .15s both; }
@keyframes abPop { 0% { transform: scale(.8); } 60% { transform: scale(1.08); } 100% { transform: none; } }

/* ---------- 2. why farms choose think.AGRI ---------- */
.ab-why { background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%); padding: 90px 0; }
.ab-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.ab-card {
    position: relative; overflow: hidden;
    padding: 30px 28px 26px; border-radius: 20px;
    background: #fff; border: 1px solid rgba(0, 0, 0, .06);
    box-shadow: 0 16px 40px rgba(15, 23, 42, .06);
    transition: transform .28s var(--ta-ease), box-shadow .28s var(--ta-ease);
}
.ab-card::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
    background: linear-gradient(90deg, var(--ta-yellow), var(--ta-green-light));
    transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ta-ease);
}
.ab-card:hover { transform: translateY(-5px); box-shadow: 0 24px 50px rgba(15, 23, 42, .12); }
.ab-card:hover::after { transform: scaleX(1); }
.ab-card .fi { width: 46px; height: 46px; border-radius: 12px; }
.ab-card .fi .hiw-ico { width: 24px; height: 24px; }
.ab-card h3 { margin: 18px 0 8px; font-size: 20px; font-weight: 800; color: var(--ta-head); }
.ab-card p { margin: 0; color: var(--ta-text); font-size: 15px; line-height: 1.65; }

/* ---------- 3. what think.AGRI covers (dark, like the ERP section) ---------- */
.ab-covers { padding: 90px 0; }
.ab-covers .erp-brand { margin-bottom: 22px; }
.ab-covers__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ab-cover {
    padding: 22px 22px 20px; border-radius: 16px;
    background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .1);
    transition: transform .28s var(--ta-ease), border-color .28s ease, background .28s ease;
}
.ab-cover:hover { transform: translateY(-4px); background: rgba(255, 255, 255, .07); border-color: var(--ta-yellow); }
.ab-cover__n { display: block; font-family: Raleway, sans-serif; font-size: 30px; font-weight: 900; line-height: 1; color: var(--ta-yellow); }
.ab-cover h3 { margin: 10px 0 6px; color: #fff; font-size: 18px; font-weight: 800; }
.ab-cover p { margin: 0; color: #cbd5e1; font-size: 14.5px; line-height: 1.6; }

/* ---------- responsive ---------- */
@media (max-width: 991.98px) {
    .ab-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ab-farm { margin-top: 30px; }
    .ab-covers .col-lg-5 { margin-bottom: 30px; }
}
@media (max-width: 575.98px) {
    .ab-story, .ab-why, .ab-covers { padding: 60px 0; }
    .ab-page .section-heading h2 { font-size: 2.8rem; }
    .ab-grid, .ab-covers__grid { grid-template-columns: minmax(0, 1fr); }
    .ab-card { padding: 24px 20px 22px; }
}

/* About banner: a little taller than the Contact banner, so the story starts lower down */
.ab-page .start-screen--short { min-height: 60vh; }