/* =========================================================
   agro.css — scoped under .agro-page, safe to import globally
   Place this file next to page.tsx and import at top of page.tsx:
   import "./agro.css"  (or the relative path to it)

   Google Fonts: add this @import to your root layout.tsx global CSS:
   @import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,500;9..144,600;9..144,700&family=Source+Sans+3:wght@400;500;600;700&family=JetBrains+Mono:wght@400;600&display=swap');
========================================================= */

.agro-page {
  --ink:#01341c;
  --paper:#ffffff;
  --clay:#fccd1a;
  --clay-dark:#e0b400;
  --olive:#28893b;
  --olive-light:#4faa66;
  --card:#ffffff;
  --line:rgba(1,52,28,0.14);
  --gold:#fccd1a;
  --maxw:1180px;
}
.agro-page * {box-sizing:border-box;margin:0;padding:0;}
.agro-page {
  background:var(--paper);
  color:var(--ink);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.agro-page h1,
.agro-page h2,
.agro-page h3,
.agro-page .display {
  font-family: 'Fraunces', serif;
}.agro-page .mono {font-family:'JetBrains Mono', monospace;letter-spacing:0.02em;}

.agro-page .wrap {max-width:var(--maxw);margin:0 auto;padding:0 28px;}
.agro-page img, .agro-page video {max-width:100%;display:block;}

/* ---------- ISLAND SUB-NAV ---------- */
/* "top" = height of your site's main navbar. Adjust 64px to match it. */
.agro-page .island-nav {
  position:sticky;top:64px;z-index:40;
  display:flex;justify-content:center;
  padding:0 16px;
}
.agro-page .island-nav-inner {
  display:flex;align-items:center;gap:22px;
  background:rgba(255,255,255,0.92);
  backdrop-filter:blur(8px);
  border:1px solid var(--line);
  border-radius:999px;
  padding:10px 22px;
  margin-top:14px;
  box-shadow:0 10px 28px rgba(1,52,28,0.14);
}
.agro-page .island-nav-inner a {color:var(--ink);text-decoration:none;font-size:0.92rem;font-weight:600;opacity:0.8;white-space:nowrap;}
.agro-page .island-nav-inner a:hover {opacity:1;}
.agro-page .nav-cta {
  background:var(--clay);color:var(--ink);padding:10px 18px;border-radius:6px;
  font-weight:700;font-size:0.88rem;
}
.agro-page .nav-cta:hover {background:var(--clay-dark);}

/* ---------- HERO ---------- */
.agro-page .hero {
  position:relative;padding:90px 0 70px;overflow:hidden;
  background:
    radial-gradient(circle at 85% 15%, rgba(252,205,26,0.18), transparent 45%),
    radial-gradient(circle at 10% 90%, rgba(40,137,59,0.12), transparent 50%);
}
.agro-page .hero .wrap {display:grid;grid-template-columns:1.15fr 0.85fr;gap:50px;align-items:center;}
.agro-page .eyebrow {
  display:inline-flex;align-items:center;gap:8px;
  font-family:'JetBrains Mono',monospace;font-size:0.78rem;letter-spacing:0.08em;
  text-transform:uppercase;color:var(--olive);background:rgba(40,137,59,0.08);
  padding:6px 12px;border-radius:20px;margin-bottom:22px;border:1px solid rgba(40,137,59,0.18);
}
.agro-page .eyebrow::before {content:"●";color:var(--clay);font-size:0.6rem;}
.agro-page .hero h1 {
  font-size:clamp(2.4rem,4.6vw,3.6rem);font-weight:600;line-height:1.05;color:var(--ink);
  margin-bottom:22px;letter-spacing:-0.01em;
}
.agro-page .hero h1 em {font-style:italic;color:var(--olive);}
.agro-page .hero p.lede {font-size:1.18rem;color:#233a2b;max-width:54ch;margin-bottom:30px;}
.agro-page .hero-actions {display:flex;gap:16px;flex-wrap:wrap;align-items:center;}
.agro-page .btn-primary {
  background:var(--clay);color:var(--ink);padding:16px 28px;border-radius:8px;
  font-weight:700;font-size:1rem;text-decoration:none;display:inline-block;
  box-shadow:0 8px 20px rgba(1,52,28,0.25);transition:transform .15s ease, box-shadow .15s ease;
}
.agro-page .btn-primary:hover {transform:translateY(-2px);box-shadow:0 12px 26px rgba(1,52,28,0.32);background:var(--clay-dark);}
.agro-page .btn-ghost {
  color:var(--olive);text-decoration:none;font-weight:600;font-size:0.97rem;
  border-bottom:2px solid var(--olive);padding-bottom:2px;
}
.agro-page .hero-stats {display:flex;gap:30px;margin-top:42px;flex-wrap:wrap;align-items:center;}
.agro-page .hero-stat .num {font-family:'Fraunces',serif;font-size:2rem;font-weight:600;color:var(--olive);}
.agro-page .hero-stat .lbl {font-size:0.82rem;color:#3a4a3f;max-width:14ch;}

.agro-page .hero-visual {
  position:relative;aspect-ratio:4/5;border-radius:14px;overflow:hidden;
  background:linear-gradient(160deg, var(--olive), var(--ink));
  display:flex;align-items:center;justify-content:center;text-align:center;color:#fff;
  padding:30px;border:1px solid rgba(0,0,0,0.1);
}
.agro-page .hero-visual .ph-label {font-family:'JetBrains Mono',monospace;font-size:0.78rem;opacity:0.8;line-height:1.6;}
.agro-page .hero-visual .ph-icon {font-size:2.4rem;margin-bottom:14px;}

/* ---------- SECTION generic ---------- */
.agro-page section {padding:84px 0;}
.agro-page .section-head {max-width:680px;margin-bottom:48px;}
.agro-page .section-tag {
  font-family:'JetBrains Mono',monospace;font-size:0.78rem;text-transform:uppercase;
  letter-spacing:0.1em;color:var(--olive);font-weight:600;margin-bottom:10px;display:block;
}
.agro-page .section-head h2 {font-size:clamp(1.7rem,3vw,2.4rem);font-weight:600;color:var(--ink);line-height:1.18;}
.agro-page .section-head p {margin-top:14px;color:#354a3b;font-size:1.05rem;}

/* ---------- WHAT IS AGRO ---------- */
.agro-page .what-grid {display:grid;grid-template-columns:1fr 1fr;gap:46px;align-items:start;}
.agro-page .what-grid .copy p {margin-bottom:16px;color:#233a2b;font-size:1.04rem;}
.agro-page .acronym-box {
  background:var(--card);border:1px solid var(--line);border-radius:12px;padding:26px;
  margin-bottom:10px;
}
.agro-page .acronym-box .letters {display:flex;gap:10px;margin-bottom:14px;flex-wrap:wrap;}
.agro-page .acronym-box .letter {
  width:42px;height:42px;border-radius:8px;background:var(--olive);color:#fff;
  display:flex;align-items:center;justify-content:center;font-family:'Fraunces',serif;
  font-weight:700;font-size:1.2rem;
}
.agro-page .acronym-box .expand {font-size:0.95rem;color:#354a3b;}
.agro-page .dim-list {list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px;}
.agro-page .dim-list li {
  background:rgba(40,137,59,0.06);border-radius:8px;padding:12px 14px;font-size:0.92rem;
  font-weight:600;color:var(--olive);border-left:3px solid var(--gold);
}

/* ---------- TIMELINE (history) — index-card flipchart style, the signature element ---------- */
.agro-page .timeline-section {background:var(--ink);color:var(--paper);}
.agro-page .timeline-section .section-tag {color:var(--gold);}
.agro-page .timeline-section .section-head h2 {color:var(--paper);}
.agro-page .timeline-section .section-head p {color:#cfe0d4;}
.agro-page .pinboard {
  display:flex;gap:22px;overflow-x:auto;padding:10px 4px 26px;scroll-snap-type:x mandatory;
}
.agro-page .pinboard::-webkit-scrollbar {height:8px;}
.agro-page .pinboard::-webkit-scrollbar-thumb {background:var(--olive-light);border-radius:4px;}
.agro-page .pin-card {
  flex:0 0 260px;scroll-snap-align:start;background:var(--paper);color:var(--ink);
  border-radius:4px;padding:24px 20px;position:relative;
  box-shadow:0 14px 30px rgba(0,0,0,0.35);transform:rotate(var(--rot,0deg));
}
.agro-page .pin-card:nth-child(odd) {--rot:-1.4deg;}
.agro-page .pin-card:nth-child(even) {--rot:1.2deg;}
.agro-page .pin-card::before {
  content:"";position:absolute;top:-9px;left:50%;transform:translateX(-50%);
  width:18px;height:18px;border-radius:50%;background:var(--clay);
  box-shadow:0 3px 6px rgba(0,0,0,0.4);
}
.agro-page .pin-card .yr {font-family:'JetBrains Mono',monospace;font-weight:700;color:var(--olive);font-size:0.95rem;}
.agro-page .pin-card h4 {font-family:'Fraunces',serif;font-size:1.1rem;margin:6px 0 8px;}
.agro-page .pin-card p {font-size:0.88rem;color:#233a2b;}

/* ---------- GLOBAL REACH ---------- */
.agro-page .reach-grid {display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.agro-page .reach-stat {
  background:var(--card);border:1px solid var(--line);border-radius:12px;padding:28px 22px;text-align:left;
}
.agro-page .reach-stat .num {font-family:'Fraunces',serif;font-size:2.6rem;font-weight:600;color:var(--olive);line-height:1;}
.agro-page .reach-stat .lbl {margin-top:10px;font-size:0.92rem;color:#354a3b;}
.agro-page .reach-note {margin-top:18px;font-size:0.85rem;color:#5c6b62;font-style:italic;}

/* ---------- BALANCE IN ALBANIA ---------- */
.agro-page .albania-section {background:linear-gradient(180deg, rgba(40,137,59,0.07), transparent);}
.agro-page .proj-grid {display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.agro-page .proj-card {
  background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;
  display:flex;flex-direction:column;
}
.agro-page .proj-media {
  aspect-ratio:16/10;background:white;
  display:flex;align-items:center;justify-content:center;color:#fff;text-align:center;padding:18px;
}
.agro-timeline-wrapper {
  max-width: 1200px;
  margin: 0 auto;
}
/* Append this to /public/cefe-style/agro.css
   (styles previously in a <style jsx> block, which only works in Client Components) */

.apply-section {
  background: #01341c;
  color: #fff;
  padding: 56px 0;
  border-radius: 24px;
  margin: 64px 0;
}
.apply-inner {
  max-width: 950px;
  margin: 0 auto;
  text-align: center;
  padding: 0 16px;
}
.apply-title {
  font-size: clamp(1.5rem, 5vw, 3rem);
  font-weight: 900;
  color: #fff;
  margin-bottom: 12px;
  line-height: 1.25;
}
.apply-sub {
  font-size: clamp(0.9rem, 2.5vw, 1rem);
  margin-bottom: 28px;
  opacity: 0.85;
}
.apply-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 32px;
  font-size: clamp(1rem, 3vw, 1.2rem);
  font-weight: 900;
  background: #fccd1a;
  color: #01341c;
  border-radius: 14px;
  text-decoration: none;
  margin-bottom: 24px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  width: 100%;
  max-width: 340px;
  transition: background 0.15s ease;
}
.apply-btn:hover {
  background: #e0b400;
}
.apply-footer {
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  font-size: 0.9rem;
  line-height: 1.6;
  opacity: 0.9;
  word-break: break-word;
}
.apply-link {
  color: #fccd1a;
  font-weight: 700;
}
.apply-contact {
  margin-top: 16px;
  font-size: 0.85rem;
  opacity: 0.8;
}

@media (max-width: 480px) {
  .apply-section {
    padding: 36px 0;
    border-radius: 14px;
    margin: 40px 0;
  }
  .apply-btn {
    padding: 14px 24px;
  }
}
.agro-page .proj-media .ph-icon {font-size:1.8rem;margin-bottom:8px;}
.agro-page .proj-media .ph-label {font-family:'JetBrains Mono',monospace;font-size:0.72rem;opacity:0.85;}
.agro-page .proj-body {padding:22px;flex:1;display:flex;flex-direction:column;}
.agro-page .proj-tag {font-family:'JetBrains Mono',monospace;font-size:0.72rem;text-transform:uppercase;color:var(--olive);font-weight:700;margin-bottom:8px;}
.agro-page .proj-body h3 {font-family:'Fraunces',serif;font-size:1.25rem;margin-bottom:10px;}
.agro-page .proj-body p {font-size:0.92rem;color:#354a3b;margin-bottom:14px;}
.agro-page .proj-stats {display:flex;gap:16px;margin-top:auto;border-top:1px solid var(--line);padding-top:14px;}
.agro-page .proj-stats div {flex:1;}
.agro-page .proj-stats .n {font-weight:700;color:var(--olive);font-size:1.15rem;font-family:'Fraunces',serif;}
.agro-page .proj-stats .l {font-size:0.74rem;color:#5c6b62;}

/* ---------- VIDEO TESTIMONIALS ---------- */
.agro-page .video-grid {display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.agro-page .video-card {background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;}
.agro-page .video-frame {
  aspect-ratio:16/9;background:var(--ink);position:relative;display:flex;align-items:center;justify-content:center;
}
.agro-page .video-frame .play {
  width:58px;height:58px;border-radius:50%;background:var(--clay);display:flex;align-items:center;
  justify-content:center;color:var(--ink);font-size:1.3rem;box-shadow:0 8px 22px rgba(0,0,0,0.4);cursor:pointer;
}
.agro-page .video-frame .ph-label {position:absolute;bottom:10px;left:12px;right:12px;font-family:'JetBrains Mono',monospace;
  font-size:0.68rem;color:#dfe8e0;opacity:0.85;}
.agro-page .video-card .who {padding:16px 18px;}
.agro-page .video-card .who .name {font-weight:700;color:var(--ink);}
.agro-page .video-card .who .role {font-size:0.82rem;color:#5c6b62;}

/* ---------- PHOTO STRIP ---------- */
.agro-page .photo-strip {display:grid;grid-template-columns:repeat(5,1fr);gap:14px;}
.agro-page .photo-ph {
  aspect-ratio:3/4;border-radius:10px;background:repeating-linear-gradient(135deg, rgba(40,137,59,0.12), rgba(40,137,59,0.12) 10px, rgba(40,137,59,0.18) 10px, rgba(40,137,59,0.18) 20px);
  display:flex;align-items:center;justify-content:center;text-align:center;
}
.agro-page .photo-ph span {font-family:'JetBrains Mono',monospace;font-size:0.66rem;color:var(--olive);opacity:0.9;}

/* ---------- METHOD IN ACTION / ENVELOPE EXERCISE ---------- */
.agro-page .method-block {
  display:grid;grid-template-columns:0.95fr 1.05fr;gap:50px;align-items:center;
  background:var(--card);border:1px solid var(--line);border-radius:18px;padding:46px;
}
.agro-page .envelope {
  position:relative;background:#f2f6f2;border-radius:10px;aspect-ratio:1/0.7;
  box-shadow:0 18px 36px rgba(1,52,28,0.18);
  display:flex;align-items:flex-end;justify-content:center;overflow:hidden;
}
.agro-page .envelope::before {
  content:"";position:absolute;top:0;left:0;right:0;bottom:0;
  background:
    linear-gradient(135deg, transparent 49.3%, rgba(1,52,28,0.12) 49.6%, transparent 50%),
    linear-gradient(45deg, transparent 49.3%, rgba(1,52,28,0.12) 49.6%, transparent 50%);
}
.agro-page .envelope .stamp {
  position:absolute;top:16px;right:16px;width:50px;height:60px;border:2px dashed var(--clay-dark);
  border-radius:4px;
}
.agro-page .envelope .label {
  position:relative;z-index:2;background:var(--clay);color:var(--ink);padding:8px 16px;border-radius:6px 6px 0 0;
  font-family:'JetBrains Mono',monospace;font-size:0.75rem;letter-spacing:0.05em;text-transform:uppercase;
  font-weight:700;
}
.agro-page .method-copy .section-tag {margin-bottom:8px;}
.agro-page .method-copy h3 {font-family:'Fraunces',serif;font-size:1.6rem;margin-bottom:14px;color:var(--ink);}
.agro-page .method-copy p {color:#354a3b;margin-bottom:14px;}
.agro-page .method-copy ul {margin:16px 0 0;padding-left:0;list-style:none;}
.agro-page .method-copy li {
  padding-left:26px;position:relative;margin-bottom:10px;font-size:0.95rem;color:#233a2b;
}
.agro-page .method-copy li::before {
  content:"";position:absolute;left:0;top:7px;width:14px;height:14px;border-radius:3px;background:var(--gold);
}

/* ---------- LEARNING JOURNEY ---------- */
.agro-page .journey {position:relative;}
.agro-page .journey-rail {position:relative;padding-left:34px;}
.agro-page .journey-rail::before {
  content:"";position:absolute;left:9px;top:6px;bottom:6px;width:2px;background:var(--line);
}
.agro-page .journey-step {position:relative;padding-bottom:38px;}
.agro-page .journey-step:last-child {padding-bottom:0;}
.agro-page .journey-step::before {
  content:"";position:absolute;left:-34px;top:2px;width:20px;height:20px;border-radius:50%;
  background:var(--paper);border:3px solid var(--olive);
}
.agro-page .journey-step h4 {font-family:'Fraunces',serif;font-size:1.18rem;margin-bottom:6px;color:var(--ink);}
.agro-page .journey-step p {color:#354a3b;font-size:0.96rem;max-width:62ch;}
.agro-page .journey-step .tag {font-family:'JetBrains Mono',monospace;font-size:0.72rem;color:var(--olive);text-transform:uppercase;font-weight:700;margin-bottom:4px;display:block;}

/* ---------- WHO IT'S FOR / NOT FOR ---------- */
.agro-page .fit-grid {display:grid;grid-template-columns:1fr 1fr;gap:24px;}
.agro-page .fit-card {border-radius:14px;padding:28px;border:1px solid var(--line);}
.agro-page .fit-card.yes {background:rgba(40,137,59,0.07);}
.agro-page .fit-card.no {background:rgba(0,0,0,0.04);}
.agro-page .fit-card h3 {font-family:'Fraunces',serif;font-size:1.2rem;margin-bottom:14px;color:var(--ink);}
.agro-page .fit-card ul {list-style:none;}
.agro-page .fit-card li {padding:8px 0;font-size:0.95rem;display:flex;gap:10px;color:#233a2b;}
.agro-page .fit-card.yes li::before {content:"✓";color:var(--olive);font-weight:700;}
.agro-page .fit-card.no li::before {content:"✕";color:#000;font-weight:700;}

/* ---------- TRUST: NOT AN ONLINE COURSE BANNER ---------- */
.agro-page .truth-banner {
  background:var(--olive);color:#fff;border-radius:16px;padding:36px 40px;
  display:flex;gap:26px;align-items:center;
}
.agro-page .truth-banner .icon {font-size:2rem;flex-shrink:0;}
.agro-page .truth-banner p {font-size:1.02rem;line-height:1.6;}
.agro-page .truth-banner strong {color:var(--gold);}

/* ---------- FAQ-ish details: effort/expectations ---------- */
.agro-page .expect-grid {display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.agro-page .expect-card {background:var(--card);border:1px solid var(--line);border-radius:12px;padding:24px;}
.agro-page .expect-card .ic {font-size:1.5rem;margin-bottom:10px;}
.agro-page .expect-card h4 {font-family:'Fraunces',serif;font-size:1.05rem;margin-bottom:8px;color:var(--ink);}
.agro-page .expect-card p {font-size:0.9rem;color:#354a3b;}

/* ---------- BIG CTA ---------- */
.agro-page .mega-cta {
  position:relative;border-radius:22px;overflow:hidden;padding:70px 50px;text-align:center;
  background:
    radial-gradient(circle at 20% 20%, rgba(252,205,26,0.35), transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(0,0,0,0.35), transparent 50%),
    linear-gradient(160deg, var(--ink), var(--olive));
  color:var(--paper);
}
.agro-page .mega-cta .section-tag {color:var(--gold);}
.agro-page .mega-cta h2 {
  font-family:'Fraunces',serif;font-size:clamp(2rem,4.4vw,3.1rem);font-weight:600;
  margin:14px 0 18px;line-height:1.1;color:#fff;
}
.agro-page .mega-cta p.sub {max-width:60ch;margin:0 auto 34px;color:rgba(255,255,255,0.82);font-size:1.08rem;}
.agro-page .btn-mega {
  display:inline-block;background:var(--clay);color:var(--ink);padding:22px 48px;border-radius:12px;
  font-size:1.25rem;font-weight:700;text-decoration:none;
  box-shadow:0 18px 40px rgba(0,0,0,0.35);transition:transform .15s ease, background .15s ease;
  font-family:'Fraunces',serif;
}
.agro-page .btn-mega:hover {transform:translateY(-3px) scale(1.01);background:var(--clay-dark);}
.agro-page .mega-meta {margin-top:22px;font-size:0.85rem;color:rgba(255,255,255,0.62);font-family:'JetBrains Mono',monospace;}

.pinboard-wrap {
  position: relative;   /* <-- this is critical, it anchors the absolute button */
}

.pinboard {
  display: flex;
  overflow-x: auto;
  scroll-behavior: smooth;
}

.pin-arrow {
  position: absolute;
  top: 50%;
  right: 0;              /* try 0 first, adjust with -16px etc after */
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: #fff;
  box-shadow: 0 2px 10px rgba(1, 52, 28, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;           /* bumped up in case cards overlap it */
}

.expect-card {
  position: relative;
  overflow: hidden;
}

/* ===== IDEA AGRO OFFERS ===== */

#ofron {
  padding: 100px 0;
  background:
    radial-gradient(
      circle at top right,
      rgba(252, 205, 26, 0.1),
      transparent 40%
    );
}

.eyebrow {
  display: inline-block;
  color: #28893b;
  font-weight: 700;
  letter-spacing: 2px;
  margin-bottom: 12px;
  text-transform: uppercase;
}

.section-sub {
  max-width: 700px;
  margin: 16px auto 0;
  color: #354a3b;
}

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

.offer-card {
  background: #fff;
  border-radius: 24px;
  padding: 32px;
  border: 1px solid rgba(1, 52, 28, 0.08);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.offer-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(252, 205, 26, 0.06),
    rgba(40, 137, 59, 0.06)
  );
  opacity: 0;
  transition: opacity 0.3s ease;
}

.offer-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 50px rgba(1, 52, 28, 0.14);
}

.offer-card:hover::before {
  opacity: 1;
}

/* Header Row */
.offer-head {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 20px;
  position: relative;
  z-index: 2;
}

.offer-number {
  font-size: 5rem;
  font-weight: 900;
  line-height: 0.9;
  color: rgba(40, 137, 59, 0.15);
  flex-shrink: 0;
  letter-spacing: -3px;
}

.offer-card h3 {
  margin: 0;
  font-size: 2.2rem;
  line-height: 1.05;
  font-weight: 800;
  color: #28893b;
}

.offer-card p {
  position: relative;
  z-index: 2;
  color: #354a3b;
  line-height: 1.7;
  margin: 0;
  font-size: 1rem;
}

/* Featured Demo Day Card */
.featured {
  grid-column: span 3;
  background: linear-gradient(
    135deg,
    #01341c 0%,
    #28893b 100%
  );
  color: white;
}

.featured::before {
  display: none;
}

.featured .offer-number {
  color: rgba(255, 255, 255, 0.2);
}

.featured h3,
.featured p {
  color: white;
}

/* Tablet */
@media (max-width: 1100px) {
  .offers-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .featured {
    grid-column: span 2;
  }

  .offer-number {
    font-size: 4.5rem;
  }

  .offer-card h3 {
    font-size: 1.9rem;
  }
}

/* Mobile */
@media (max-width: 768px) {
  #ofron {
    padding: 70px 0;
  }

  .offers-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .featured {
    grid-column: span 1;
  }

  .offer-card {
    padding: 24px;
    border-radius: 20px;
  }

  .offer-head {
    gap: 14px;
    margin-bottom: 16px;
  }

  .offer-number {
    font-size: 3.5rem;
  }

  .offer-card h3 {
    font-size: 1.6rem;
  }

  .offer-card p {
    font-size: 0.95rem;
    line-height: 1.6;
  }
}

.agro-timeline {
  position: relative;
  max-width: 1200px;
  margin: 55px auto 0;

  display: flex;
  justify-content: space-between;
}

/* =========================
   HORIZONTAL LINE — DESKTOP
   ========================= */

.agro-timeline::before {
  content: "";
  position: absolute;

  left: 22px;
  right: 22px;
  top: 22px;

  height: 3px;
  background: #8fae95;

  z-index: 0;
}

.agro-timeline-item {
  position: relative;
  z-index: 1;

  flex: 1;

  display: flex;
  flex-direction: column;
  align-items: center;

  min-width: 0;
}

/* NUMBER */
.agro-timeline-number {
  width: 44px;
  height: 44px;

  border-radius: 50%;
  background: #01341c;
  color: #fff;

  display: flex;
  align-items: center;
  justify-content: center;

  font-weight: 700;
  font-size: 1rem;

  position: relative;
  z-index: 3;
}

/* ICON */
.agro-timeline-icon {
  width: 68px;
  height: 68px;

  margin-top: 22px;

  border-radius: 50%;
  background: #eef6f0;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 30px;

  position: relative;
  z-index: 2;
}

/* CONTENT */
.agro-timeline-content {
  text-align: center;
  padding: 18px 15px 0;
}

.agro-timeline-content h4 {
  margin: 0 0 8px;

  color: #01341c;
  font-size: 2.2rem;
  line-height: 0.95;
  letter-spacing: 0.04em;
}

.agro-timeline-content p {
  margin: 0 0 8px;

  color: #354a3b;
  font-size: 0.9rem;
  line-height: 1.45;
}

.agro-timeline-content strong {
  color: #01341c;
  font-size: 0.82rem;
}


/* =========================
   MOBILE — VERTICAL
   ========================= */

@media (max-width: 860px) {

  .agro-timeline {
    display: block;
    max-width: 700px;
    margin: 40px auto 0;
  }

  /* ONE CONTINUOUS VERTICAL LINE */
  .agro-timeline::before {
    left: 22px;
    right: auto;

    top: 22px;
    bottom: 22px;

    width: 3px;
    height: auto;
  }

  .agro-timeline-item {
    display: grid;
    grid-template-columns: 70px 80px 1fr;
    column-gap: 20px;

    min-height: 145px;

    align-items: center;
  }

  /* NUMBER */
  .agro-timeline-number {
    grid-column: 1;
    grid-row: 1;

    width: 44px;
    height: 44px;
  }

  /* ICON */
  .agro-timeline-icon {
    grid-column: 2;
    grid-row: 1;

    margin-top: 0;
  }

  /* CONTENT */
  .agro-timeline-content {
    grid-column: 3;
    grid-row: 1;

    text-align: left;
    padding: 20px 0;
  }

  .agro-timeline-content h4 {
    font-size: 2rem;
  }

  .agro-timeline-content p {
    font-size: 0.95rem;
  }
}
/* ---------- FOOTER ---------- */
.agro-page footer {padding:46px 0;border-top:1px solid var(--line);}
.agro-page footer .wrap {display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;}
.agro-page footer p {font-size:0.85rem;color:#5c6b62;}

/* ---------- RESPONSIVE ---------- */
@media (max-width:960px){
  .agro-page .hero .wrap {grid-template-columns:1fr;}
  .agro-page .hero-visual {order:-1;aspect-ratio:16/9;}
  .agro-page .what-grid {grid-template-columns:1fr;}
  .agro-page .reach-grid {grid-template-columns:repeat(2,1fr);}
  .agro-page .proj-grid {grid-template-columns:1fr;}
  .agro-page .video-grid {grid-template-columns:1fr;}
  .agro-page .photo-strip {grid-template-columns:repeat(2,1fr);}
  .agro-page .method-block {grid-template-columns:1fr;padding:30px;}
  .agro-page .fit-grid {grid-template-columns:1fr;}
  .agro-page .expect-grid {grid-template-columns:1fr;}
  .agro-page .island-nav-inner a:not(.nav-cta) {display:none;}
}
@media (prefers-reduced-motion:reduce){
  .agro-page * {transition:none !important;scroll-behavior:auto !important;}
}