/* ============================================
   JOHNROSY MEMORIAL FARM — Production CSS v4
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700;900&family=DM+Sans:wght@300;400;500;600&display=swap');

:root {
  --forest:    #1a3a1f;
  --moss:      #2d5a27;
  --leaf:      #4a8c3f;
  --lime:      #7aba5d;
  --earth:     #6b4226;
  --clay:      #a0522d;
  --sand:      #c8a97a;
  --cream:     #f7f2e8;
  --warm-white:#fdfaf4;
  --charcoal:  #1c1c1e;
  --slate:     #4a4a4a;
  --gold:      #d4a843;
  --gold-lt:   #f0c967;
  --climanest: #0a1628;
  --tech-blue: #1a4a7a;
  --tech-cyan: #00c4cc;
  --r:         8px;   /* global border-radius */
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body { font-family: 'DM Sans', sans-serif; background: var(--warm-white); color: var(--charcoal); line-height: 1.65; -webkit-font-smoothing: antialiased; }
h1,h2,h3,h4 { font-family: 'Playfair Display', Georgia, serif; line-height: 1.2; letter-spacing: -.02em; }

.container { max-width: 1200px; margin: 0 auto; padding: 0 1.25rem; }
.section    { padding: 5rem 0; }
.section-sm { padding: 3rem 0; }

/* ══════════════ BUTTONS ══════════════ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .75rem 1.75rem; border-radius: var(--r);
  font-family: 'DM Sans', sans-serif; font-weight: 600; font-size: .88rem;
  letter-spacing: .04em; text-transform: uppercase;
  cursor: pointer; border: 2px solid transparent;
  transition: all .22s ease; text-decoration: none; white-space: nowrap;
  line-height: 1;
}
.btn-primary  { background: var(--leaf);      color: #fff;              border-color: var(--leaf); }
.btn-primary:hover  { background: var(--forest);    border-color: var(--forest);    transform: translateY(-2px); box-shadow: 0 8px 22px rgba(26,58,31,.3); }
.btn-outline  { background: transparent;       color: var(--leaf);       border-color: var(--leaf); }
.btn-outline:hover  { background: var(--leaf);       color: #fff;              transform: translateY(-2px); }
.btn-gold     { background: var(--gold);       color: var(--forest);     border-color: var(--gold); }
.btn-gold:hover     { background: var(--gold-lt);    border-color: var(--gold-lt);   transform: translateY(-2px); box-shadow: 0 8px 22px rgba(212,168,67,.3); }
.btn-dark     { background: var(--forest);     color: #fff;              border-color: var(--forest); }
.btn-dark:hover     { background: var(--climanest);  border-color: var(--climanest); transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0,0,0,.25); }
.btn-tech     { background: var(--tech-cyan);  color: var(--climanest);  border-color: var(--tech-cyan); font-weight: 700; }
.btn-tech:hover     { background: transparent;       color: var(--tech-cyan);  transform: translateY(-2px); box-shadow: 0 0 22px rgba(0,196,204,.35); }
.btn-pig      { background: #8b4a2a;           color: #fff;              border-color: #8b4a2a; }
.btn-pig:hover      { background: #5c2a1e;           border-color: #5c2a1e;          transform: translateY(-2px); box-shadow: 0 8px 22px rgba(92,42,30,.3); }

/* ══════════════ BADGES ══════════════ */
.badge { display: inline-block; padding: .3rem .85rem; border-radius: 20px; font-size: .72rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.badge-green { background: rgba(74,140,63,.15);  color: var(--leaf);       border: 1px solid rgba(74,140,63,.3); }
.badge-gold  { background: rgba(212,168,67,.15); color: var(--gold);       border: 1px solid rgba(212,168,67,.3); }
.badge-tech  { background: rgba(0,196,204,.1);   color: var(--tech-cyan);  border: 1px solid rgba(0,196,204,.3); }

/* ══════════════ LABELS ══════════════ */
.section-label { font-size:.78rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--leaf); display:flex; align-items:center; gap:.6rem; margin-bottom:1rem; }
.section-label::before { content:''; width:2rem; height:2px; background:var(--leaf); }
.section-label-center { font-size:.78rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--leaf); margin-bottom:.75rem; display:flex; align-items:center; justify-content:center; gap:.5rem; }
.section-label-center::before, .section-label-center::after { content:''; width:1.5rem; height:2px; background:var(--leaf); }

/* ══════════════ NAV ══════════════ */
.nav { position:fixed; top:0; left:0; right:0; z-index:1000; background:rgba(253,250,244,.95); backdrop-filter:blur(12px); border-bottom:1px solid rgba(74,140,63,.12); transition:box-shadow .3s; }
.nav.scrolled { box-shadow:0 2px 24px rgba(26,58,31,.12); }
.nav-inner { display:flex; align-items:center; justify-content:space-between; height:68px; padding:0 1.5rem; max-width:1200px; margin:0 auto; }
.nav-logo { display:flex; align-items:center; gap:.75rem; text-decoration:none; }
.nav-logo-icon { width:42px; height:42px; background:var(--forest); border-radius:var(--r); display:flex; align-items:center; justify-content:center; font-size:1.2rem; flex-shrink:0; }
.nav-logo-text { font-family:'Playfair Display',serif; }
.nav-logo-text span:first-child { display:block; font-size:1rem; font-weight:700; color:var(--forest); line-height:1; }
.nav-logo-text span:last-child  { font-size:.68rem; color:var(--slate); letter-spacing:.08em; text-transform:uppercase; }
.nav-links { display:flex; align-items:center; gap:.15rem; }
.nav-links a { padding:.45rem .8rem; border-radius:6px; font-size:.86rem; font-weight:500; color:var(--charcoal); text-decoration:none; transition:all .2s; }
.nav-links a:hover, .nav-links a.active { color:var(--leaf); background:rgba(74,140,63,.08); }
.nav-links a.climanest-link { color:var(--tech-blue); font-weight:600; }
.nav-links a.climanest-link:hover { color:var(--tech-cyan); background:rgba(0,196,204,.08); }
.nav-cta { display:flex; gap:.5rem; }

/* ══════════════ HAMBURGER — FIXED ══════════════
   Key fix: z-index ABOVE nav (1100), pointer-events:all,
   no overlay element can intercept it                    */
.hamburger {
  display: none;
  cursor: pointer;
  padding: .6rem;
  background: none;
  border: none;
  z-index: 1100;           /* above nav z-index:1000 */
  position: relative;
  pointer-events: all;     /* always clickable */
}
.hamburger span {
  display: block; width: 24px; height: 2px;
  background: var(--forest);
  margin: 5px 0;
  transition: all .28s ease;
  border-radius: 2px;
}
.hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px,-5px); }

/* ══════════════ MOBILE MENU ══════════════ */
.mobile-menu {
  display: none;
  position: fixed;
  top: 68px; left: 0; right: 0;
  background: var(--warm-white);
  border-bottom: 2px solid rgba(74,140,63,.15);
  padding: .5rem 1.5rem 2rem;
  z-index: 1050;           /* between hamburger(1100) and nav(1000) */
  box-shadow: 0 12px 32px rgba(26,58,31,.12);
  max-height: calc(100vh - 68px);
  overflow-y: auto;
}
.mobile-menu.open { display: block; }
.mobile-menu a { display:block; padding:.85rem 0; border-bottom:1px solid rgba(0,0,0,.06); color:var(--charcoal); text-decoration:none; font-weight:500; font-size:1rem; transition:color .2s; }
.mobile-menu a:hover { color:var(--leaf); }
.mobile-menu a:last-of-type { border-bottom:none; }
.mobile-menu .mobile-cta { margin-top:1.25rem; display:flex; gap:.75rem; flex-wrap:wrap; }

/* ══════════════ HERO (Homepage) ══════════════ */
.hero { min-height:100vh; display:flex; align-items:center; position:relative; overflow:hidden; padding-top:68px; background:var(--forest); }
.hero-bg { position:absolute; inset:0; background:linear-gradient(135deg,rgba(26,58,31,.96) 0%,rgba(45,90,39,.85) 50%,rgba(74,140,63,.7) 100%); z-index:1; }
.hero-pattern { position:absolute; inset:0; z-index:0; background-image:radial-gradient(circle at 20% 50%,rgba(74,140,63,.2) 0%,transparent 60%),radial-gradient(circle at 80% 20%,rgba(200,169,122,.1) 0%,transparent 50%); }
.hero-content { position:relative; z-index:2; color:#fff; max-width:1200px; margin:0 auto; padding:4rem 1.5rem; display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center; }
.hero-eyebrow { display:inline-flex; align-items:center; gap:.6rem; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2); padding:.35rem .9rem; border-radius:20px; font-size:.75rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--sand); margin-bottom:1.5rem; }
.hero h1 { font-size:clamp(2.4rem,5vw,3.8rem); font-weight:900; color:#fff; margin-bottom:1.5rem; text-shadow:0 2px 20px rgba(0,0,0,.3); }
.hero h1 em { font-style:normal; color:var(--sand); }
.hero-sub { font-size:1.1rem; color:rgba(255,255,255,.8); max-width:480px; margin-bottom:2rem; line-height:1.7; }
.hero-actions { display:flex; gap:1rem; flex-wrap:wrap; }
.hero-stats { display:flex; gap:2rem; margin-top:3rem; padding-top:2rem; border-top:1px solid rgba(255,255,255,.15); }
.hero-stat-num { font-family:'Playfair Display',serif; font-size:1.8rem; font-weight:700; color:var(--sand); }
.hero-stat-lbl { font-size:.78rem; color:rgba(255,255,255,.6); text-transform:uppercase; letter-spacing:.08em; }
.hero-visual { display:flex; flex-direction:column; gap:1rem; }
.hero-card { background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12); backdrop-filter:blur(8px); border-radius:var(--r); padding:1.5rem; }
.hero-card-title { font-size:.8rem; text-transform:uppercase; letter-spacing:.1em; color:var(--sand); margin-bottom:.75rem; font-weight:600; }
.hero-card-list { list-style:none; display:flex; flex-direction:column; gap:.5rem; }
.hero-card-list li { display:flex; align-items:center; gap:.7rem; font-size:.9rem; color:rgba(255,255,255,.85); }
.hero-card-list li::before { content:'✓'; color:var(--lime); font-weight:700; }
.hero-climanest-teaser { background:linear-gradient(135deg,rgba(10,22,40,.9),rgba(26,74,122,.6)); border:1px solid rgba(0,196,204,.3); border-radius:var(--r); padding:1.5rem; position:relative; overflow:hidden; }
.hero-climanest-teaser::before { content:''; position:absolute; inset:0; background:radial-gradient(circle at top right,rgba(0,196,204,.15),transparent 60%); }
.tech-badge { display:inline-flex; align-items:center; gap:.4rem; background:rgba(0,196,204,.15); border:1px solid rgba(0,196,204,.3); color:var(--tech-cyan); font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; padding:.25rem .7rem; border-radius:20px; margin-bottom:.75rem; }
.tech-pulse { width:8px; height:8px; border-radius:50%; background:var(--tech-cyan); animation:pulse 2s infinite; }
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(.8)} }
.hero-climanest-teaser h3 { color:#fff; font-size:1.1rem; margin-bottom:.5rem; }
.hero-climanest-teaser p  { color:rgba(255,255,255,.65); font-size:.85rem; line-height:1.6; }

/* ══════════════ HERO SPLIT — image beside text ══════════════ */
.hero-split {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 3rem;
  align-items: center;
}
/* Circular profile image that sits beside hero text */
.hero-profile-img {
  width: 260px; height: 260px;
  border-radius: 50%;
  border: 5px solid rgba(255,255,255,.25);
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: 0 16px 48px rgba(0,0,0,.35);
  background: rgba(255,255,255,.1);
  display: flex; align-items: center; justify-content: center;
}
.hero-profile-img img { width:100%; height:100%; object-fit:cover; display:block; }
.hero-profile-img .ph { font-size:5rem; opacity:.7; }

/* Smaller circular image for in-page sections */
.section-profile-img {
  width:220px; height:220px;
  border-radius:50%;
  border:4px solid rgba(74,140,63,.25);
  overflow:hidden; flex-shrink:0;
  box-shadow:0 8px 28px rgba(26,58,31,.15);
  background:var(--cream);
  display:flex; align-items:center; justify-content:center;
}
.section-profile-img img { width:100%; height:100%; object-fit:cover; display:block; }
.section-profile-img .ph { font-size:4rem; opacity:.6; }

/* ══════════════ ABOUT STRIP ══════════════ */
.about-strip { background:var(--cream); border-top:4px solid var(--leaf); }
.about-strip-inner { display:grid; grid-template-columns:1fr 1fr 1fr; gap:0; max-width:1200px; margin:0 auto; }
.strip-item { padding:2.5rem 2rem; border-right:1px solid rgba(74,140,63,.15); display:flex; align-items:flex-start; gap:1rem; }
.strip-item:last-child { border-right:none; }
.strip-icon { width:48px; height:48px; border-radius:var(--r); background:var(--leaf); display:flex; align-items:center; justify-content:center; font-size:1.4rem; flex-shrink:0; }
.strip-item h3 { font-size:1rem; font-weight:600; color:var(--forest); margin-bottom:.3rem; }
.strip-item p  { font-size:.85rem; color:var(--slate); line-height:1.55; }

.section-header { text-align:center; max-width:680px; margin:0 auto 3.5rem; }
.section-header h2 { font-size:clamp(1.8rem,3.5vw,2.8rem); color:var(--forest); margin-bottom:1rem; }
.section-header p  { color:var(--slate); font-size:1.05rem; }

/* ══════════════ PRODUCTS GRID ══════════════ */
.products-grid { display:grid; grid-template-columns:1fr 1fr; gap:2rem; }
.product-card { border-radius:var(--r); overflow:hidden; border:1px solid rgba(74,140,63,.12); background:#fff; transition:transform .3s,box-shadow .3s; }
.product-card:hover { transform:translateY(-4px); box-shadow:0 16px 40px rgba(26,58,31,.12); }
.product-card-img { height:220px; display:flex; align-items:center; justify-content:center; font-size:5rem; }
.product-card-img.rice-bg    { background:linear-gradient(135deg,#2d5a27,#4a8c3f); }
.product-card-img.poultry-bg { background:linear-gradient(135deg,#6b4226,#a0522d); }
.product-card-body { padding:2rem; }
.product-card-body h3 { font-size:1.5rem; color:var(--forest); margin-bottom:.75rem; }
.product-card-body p  { color:var(--slate); margin-bottom:1.5rem; }
.product-features { list-style:none; display:flex; flex-direction:column; gap:.5rem; margin-bottom:1.5rem; }
.product-features li { display:flex; align-items:center; gap:.6rem; font-size:.88rem; color:var(--charcoal); }
.product-features li::before { content:'◆'; color:var(--leaf); font-size:.5rem; }

/* ══════════════ CLIMANEST HOMEPAGE SECTION ══════════════ */
.climanest-section { background:var(--climanest); position:relative; overflow:hidden; }
.climanest-section::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 10% 50%,rgba(0,196,204,.08) 0%,transparent 60%),radial-gradient(ellipse at 90% 20%,rgba(26,74,122,.3) 0%,transparent 60%); }
.climanest-grid { display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:center; position:relative; z-index:1; }
.climanest-label { color:var(--tech-cyan); font-size:.78rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; margin-bottom:.75rem; display:flex; align-items:center; gap:.6rem; }
.climanest-label::before { content:''; width:2rem; height:2px; background:var(--tech-cyan); }
.climanest-grid h2 { font-size:clamp(1.8rem,3vw,2.8rem); color:#fff; margin-bottom:1.25rem; }
.climanest-grid h2 span { color:var(--tech-cyan); }
.climanest-grid p  { color:rgba(255,255,255,.65); margin-bottom:2rem; font-size:1.05rem; }
.climanest-features { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-bottom:2rem; }
.cf-item { background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:var(--r); padding:1.25rem; transition:border-color .3s,background .3s; }
.cf-item:hover { border-color:rgba(0,196,204,.4); background:rgba(0,196,204,.04); }
.cf-icon { font-size:1.6rem; margin-bottom:.6rem; }
.cf-item h4 { font-size:.95rem; color:#fff; margin-bottom:.35rem; }
.cf-item p  { font-size:.82rem; color:rgba(255,255,255,.5); line-height:1.5; }

/* ══════════════ DASHBOARD ══════════════ */
.climanest-dashboard { background:rgba(255,255,255,.04); border:1px solid rgba(0,196,204,.2); border-radius:var(--r); padding:2rem; position:relative; overflow:hidden; }
.climanest-dashboard::before { content:''; position:absolute; inset:0; background:radial-gradient(circle at 50% 0%,rgba(0,196,204,.06),transparent 70%); pointer-events:none; }
.dash-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:1.5rem; position:relative; z-index:1; }
.dash-header h4 { color:#fff; font-size:.9rem; font-family:'DM Sans',sans-serif; font-weight:600; }
.status-dot { display:flex; align-items:center; gap:.4rem; font-size:.75rem; color:var(--tech-cyan); }
.status-dot::before { content:''; width:8px; height:8px; border-radius:50%; background:var(--tech-cyan); animation:pulse 2s infinite; }
.dash-metrics { display:grid; grid-template-columns:1fr 1fr; gap:1rem; position:relative; z-index:1; }
.dash-metric { background:rgba(255,255,255,.04); border-radius:6px; padding:1rem; border:1px solid rgba(255,255,255,.06); }
.dash-metric-val { font-size:1.8rem; font-family:'Playfair Display',serif; font-weight:700; color:var(--tech-cyan); line-height:1; }
.dash-metric-lbl { font-size:.72rem; color:rgba(255,255,255,.4); text-transform:uppercase; letter-spacing:.08em; margin-top:.25rem; }
.dash-metric.alert .dash-metric-val { color:#ff6b6b; }
.dash-metric.ok    .dash-metric-val { color:#51cf66; }

/* ══ CHART — CSS-only bars, no JS needed to display ══ */
.dash-chart {
  margin-top: 1.25rem;
  height: 64px;
  background: rgba(255,255,255,.03);
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,.06);
  display: flex;
  align-items: flex-end;
  gap: 3px;
  padding: 6px 6px 0;
  position: relative;
  z-index: 1;
  overflow: hidden;
}
/* Each bar gets its height via nth-child — no JS required */
.dash-chart-bar {
  flex: 1;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(to top, var(--tech-cyan), rgba(0,196,204,.2));
  min-height: 4px;
  transform-origin: bottom;
  animation: barRise .5s ease forwards;
}
.dash-chart-bar:nth-child(1)  { height:45%; animation-delay:.00s }
.dash-chart-bar:nth-child(2)  { height:70%; animation-delay:.05s }
.dash-chart-bar:nth-child(3)  { height:55%; animation-delay:.10s }
.dash-chart-bar:nth-child(4)  { height:85%; animation-delay:.15s }
.dash-chart-bar:nth-child(5)  { height:48%; animation-delay:.20s }
.dash-chart-bar:nth-child(6)  { height:72%; animation-delay:.25s }
.dash-chart-bar:nth-child(7)  { height:62%; animation-delay:.30s }
.dash-chart-bar:nth-child(8)  { height:58%; animation-delay:.35s }
.dash-chart-bar:nth-child(9)  { height:78%; animation-delay:.40s }
.dash-chart-bar:nth-child(10) { height:90%; animation-delay:.45s }
@keyframes barRise { from{transform:scaleY(0);opacity:0} to{transform:scaleY(1);opacity:1} }
.dash-chart-labels { display:flex; justify-content:space-between; padding:.4rem .5rem; font-size:.7rem; color:rgba(255,255,255,.3); position:relative; z-index:1; }

/* ══════════════ TRUST ══════════════ */
.trust-section { background:var(--cream); }
.trust-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; }
.trust-card { background:#fff; border:1px solid rgba(74,140,63,.1); border-radius:var(--r); padding:2rem; text-align:center; transition:transform .3s,box-shadow .3s; }
.trust-card:hover { transform:translateY(-4px); box-shadow:0 12px 30px rgba(26,58,31,.1); }
.trust-icon { font-size:2.5rem; margin-bottom:1rem; }
.trust-card h4 { font-size:1rem; color:var(--forest); margin-bottom:.5rem; }
.trust-card p  { font-size:.85rem; color:var(--slate); }

/* ══════════════ TESTIMONIALS ══════════════ */
.testimonials-section { background:var(--forest); }
.testimonials-section h2 { color:#fff; }
.testimonials-section .section-label-center { color:var(--sand); }
.testimonials-section .section-label-center::before,.testimonials-section .section-label-center::after { background:var(--sand); }
.testimonials-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.testimonial-card { background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); border-radius:var(--r); padding:2rem; }
.testimonial-stars { color:var(--gold); margin-bottom:1rem; }
.testimonial-card p  { color:rgba(255,255,255,.75); font-size:.92rem; margin-bottom:1.5rem; font-style:italic; }
.testimonial-author { display:flex; align-items:center; gap:.75rem; }
.testimonial-avatar { width:42px; height:42px; border-radius:50%; background:var(--leaf); display:flex; align-items:center; justify-content:center; font-size:1.1rem; font-weight:700; color:#fff; }
.testimonial-name { font-weight:600; color:#fff; font-size:.9rem; }
.testimonial-role { font-size:.78rem; color:rgba(255,255,255,.5); }

/* ══════════════ CTA ══════════════ */
.cta-section { background:linear-gradient(135deg,var(--leaf) 0%,var(--forest) 100%); position:relative; overflow:hidden; }
.cta-section::before { content:''; position:absolute; inset:0; background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/svg%3E"); }
.cta-inner { text-align:center; position:relative; z-index:1; }
.cta-inner h2 { font-size:clamp(1.8rem,3.5vw,2.8rem); color:#fff; margin-bottom:1rem; }
.cta-inner p  { color:rgba(255,255,255,.8); font-size:1.1rem; max-width:560px; margin:0 auto 2.5rem; }
.cta-actions  { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }

/* ══════════════ CONTACT ══════════════ */
.contact-grid { display:grid; grid-template-columns:1fr 1.4fr; gap:4rem; align-items:start; }
.contact-info h2 { font-size:2rem; color:var(--forest); margin-bottom:1rem; }
.contact-info p  { color:var(--slate); margin-bottom:2rem; }
.contact-details { list-style:none; display:flex; flex-direction:column; gap:1rem; }
.contact-details li { display:flex; gap:1rem; }
.contact-icon { width:44px; height:44px; border-radius:var(--r); background:rgba(74,140,63,.1); display:flex; align-items:center; justify-content:center; font-size:1.2rem; flex-shrink:0; }
.contact-details strong { display:block; font-size:.8rem; text-transform:uppercase; letter-spacing:.08em; color:var(--leaf); margin-bottom:.15rem; }
.contact-details span { color:var(--slate); font-size:.9rem; }
.contact-form { background:#fff; border:1px solid rgba(74,140,63,.12); border-radius:var(--r); padding:2.5rem; }
.form-group { margin-bottom:1.25rem; }
.form-group label { display:block; font-size:.8rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--forest); margin-bottom:.5rem; }
.form-control { width:100%; padding:.75rem 1rem; border:1px solid rgba(74,140,63,.2); border-radius:6px; font-family:'DM Sans',sans-serif; font-size:.95rem; color:var(--charcoal); background:var(--warm-white); outline:none; transition:border .2s; }
.form-control:focus { border-color:var(--leaf); background:#fff; box-shadow:0 0 0 3px rgba(74,140,63,.1); }
.form-control::placeholder { color:#b0b0b0; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
select.form-control { cursor:pointer; }
textarea.form-control { min-height:120px; resize:vertical; }

/* ══════════════ FOOTER ══════════════ */
.footer { background:var(--charcoal); color:rgba(255,255,255,.7); }
.footer-main { display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:3rem; padding:4rem 0 3rem; }
.footer-brand p { font-size:.88rem; line-height:1.65; margin:1rem 0 1.5rem; max-width:260px; }
.footer-logo { display:flex; align-items:center; gap:.75rem; text-decoration:none; }
.footer-logo-icon { width:40px; height:40px; background:var(--leaf); border-radius:var(--r); display:flex; align-items:center; justify-content:center; font-size:1.1rem; }
.footer-logo span { font-family:'Playfair Display',serif; font-size:1rem; font-weight:700; color:#fff; }
.footer-social { display:flex; gap:.5rem; }
.footer-social a { width:36px; height:36px; background:rgba(255,255,255,.06); border-radius:var(--r); display:flex; align-items:center; justify-content:center; color:#fff; text-decoration:none; transition:.2s; }
.footer-social a:hover { background:var(--leaf); }
.footer-col h5 { font-family:'DM Sans',sans-serif; font-size:.8rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#fff; margin-bottom:1.25rem; }
.footer-col ul { list-style:none; display:flex; flex-direction:column; gap:.6rem; }
.footer-col ul a { color:rgba(255,255,255,.6); text-decoration:none; font-size:.88rem; transition:.2s; }
.footer-col ul a:hover { color:var(--lime); }
.footer-bottom { border-top:1px solid rgba(255,255,255,.08); padding:1.5rem 0; display:flex; justify-content:space-between; align-items:center; font-size:.8rem; }
.footer-bottom a { color:var(--sand); text-decoration:none; }
.footer-bottom a:hover { color:var(--lime); }

/* ══════════════ PAGE HEROES ══════════════ */
.page-hero-label { color:var(--sand); font-size:.78rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; margin-bottom:1rem; }
.about-hero { background:var(--forest); padding:10rem 0 6rem; }
.about-hero h1 { color:#fff; font-size:clamp(2rem,4vw,3.2rem); }
.about-hero p  { color:rgba(255,255,255,.75); max-width:600px; margin-top:1rem; }

.product-hero { padding:10rem 0 5rem; }
.product-hero.rice-hero    { background:linear-gradient(135deg,var(--forest),var(--moss)); }
.product-hero.poultry-hero { background:linear-gradient(135deg,#4a2010,var(--earth)); }
.product-hero h1 { color:#fff; font-size:clamp(2rem,4vw,3.2rem); }
.product-hero p  { color:rgba(255,255,255,.75); max-width:560px; margin-top:1rem; }

/* ══════════════ ABOUT PAGE ══════════════ */
.story-grid { display:grid; grid-template-columns:auto 1fr; gap:4rem; align-items:center; }
.story-img {
  width: 320px; height: 320px;
  border-radius: 50%;
  border: 5px solid rgba(74,140,63,.25);
  overflow: hidden;
  background: linear-gradient(135deg,var(--leaf),var(--forest));
  display: flex; align-items: center; justify-content: center;
  font-size: 6rem; flex-shrink: 0;
  box-shadow: 0 12px 40px rgba(26,58,31,.2);
}
.story-img img { width:100%; height:100%; object-fit:cover; display:block; }
.story-content h2 { font-size:2rem; color:var(--forest); margin-bottom:1rem; }
.story-content p  { color:var(--slate); margin-bottom:1rem; }
.values-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.value-card { background:var(--cream); border:1px solid rgba(74,140,63,.12); border-radius:var(--r); padding:2rem; }
.value-card .v-icon { font-size:2rem; margin-bottom:.75rem; }
.value-card h4 { font-size:1rem; color:var(--forest); margin-bottom:.5rem; }
.value-card p  { font-size:.88rem; color:var(--slate); }

/* ══════════════ TEAM CARDS ══════════════ */
.team-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; }
.team-card { background:#fff; border:1px solid rgba(74,140,63,.1); border-radius:var(--r); overflow:hidden; transition:transform .3s,box-shadow .3s; }
.team-card:hover { transform:translateY(-5px); box-shadow:0 20px 40px rgba(26,58,31,.14); }
.team-avatar { height:240px; background:linear-gradient(135deg,var(--leaf),var(--moss)); display:flex; align-items:center; justify-content:center; font-size:5rem; overflow:hidden; position:relative; }
.team-avatar img { width:100%; height:100%; object-fit:cover; object-position:center top; display:block; }
.team-avatar .team-initials {
  width:100px; height:100px; border-radius:50%;
  background:rgba(255,255,255,.15); border:3px solid rgba(255,255,255,.3);
  display:flex; align-items:center; justify-content:center;
  font-family:'Playfair Display',serif; font-size:2.2rem; font-weight:700; color:#fff;
}
.team-info { padding:1.75rem; }
.team-info h4 { font-size:1.1rem; color:var(--forest); margin-bottom:.2rem; }
.team-info .role { font-size:.78rem; color:var(--leaf); font-weight:700; margin-bottom:.75rem; letter-spacing:.06em; text-transform:uppercase; }
.team-info p { font-size:.87rem; color:var(--slate); line-height:1.65; }

/* ══════════════ PRODUCT SPECS ══════════════ */
.products-specs { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.spec-card { background:var(--cream); border:1px solid rgba(74,140,63,.12); border-radius:var(--r); padding:2rem; }
.spec-card h4 { font-size:1rem; color:var(--forest); margin-bottom:1rem; }
.spec-list { list-style:none; display:flex; flex-direction:column; gap:.5rem; }
.spec-list li { font-size:.88rem; color:var(--slate); display:flex; align-items:center; gap:.6rem; }
.spec-list li::before { content:'•'; color:var(--leaf); }

/* ══════════════ CLIMANEST PAGE ══════════════ */
.climanest-page-hero { background:var(--climanest); padding:10rem 0 5rem; position:relative; overflow:hidden; }
.climanest-page-hero::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 30% 50%,rgba(0,196,204,.1),transparent 60%),radial-gradient(ellipse at 80% 20%,rgba(26,74,122,.4),transparent 60%); }
.climanest-page-hero h1 { color:#fff; font-size:clamp(2rem,4vw,3.2rem); position:relative; z-index:1; }
.climanest-page-hero h1 span { color:var(--tech-cyan); }
.climanest-page-hero p  { color:rgba(255,255,255,.7); max-width:600px; margin-top:1rem; position:relative; z-index:1; }
.how-it-works { display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; }
.hiw-step { text-align:center; padding:2rem 1rem; }
.hiw-num { width:48px; height:48px; border-radius:50%; background:rgba(0,196,204,.1); border:2px solid var(--tech-cyan); color:var(--tech-cyan); font-weight:700; font-size:1.1rem; display:flex; align-items:center; justify-content:center; margin:0 auto 1rem; }
.hiw-step h4 { font-size:1rem; color:var(--forest); margin-bottom:.5rem; }
.hiw-step p  { font-size:.85rem; color:var(--slate); }
.pricing-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.pricing-card { background:#fff; border:1px solid rgba(74,140,63,.12); border-radius:var(--r); padding:2.5rem; position:relative; }
.pricing-card.featured { border-color:var(--leaf); box-shadow:0 8px 30px rgba(74,140,63,.15); }
.pricing-badge { position:absolute; top:-12px; right:1.5rem; background:var(--leaf); color:#fff; font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:.25rem .75rem; border-radius:20px; }
.pricing-price { font-family:'Playfair Display',serif; font-size:2.2rem; font-weight:700; color:var(--forest); }
.pricing-price sup { font-size:1.2rem; vertical-align:super; }
.pricing-period { font-size:.82rem; color:var(--slate); margin-bottom:1.5rem; }
.pricing-features { list-style:none; display:flex; flex-direction:column; gap:.6rem; margin:1.5rem 0; }
.pricing-features li { font-size:.88rem; color:var(--charcoal); display:flex; align-items:flex-start; gap:.6rem; }
.pricing-features li::before { content:'✓'; color:var(--leaf); font-weight:700; flex-shrink:0; }
.pricing-features li.no::before { content:'✕'; color:#ccc; }
.pricing-features li.no { color:#aaa; }

/* ══════════════ PIG PAGE ══════════════ */
.pig-hero { background:linear-gradient(135deg,#5c2a1e,#8b4a2a); padding:10rem 0 5rem; position:relative; overflow:hidden; }
.pig-hero::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 70% 40%,rgba(196,122,74,.2),transparent 60%); }
.pig-strip { background:#fdf4ee; border-top:4px solid #8b4a2a; }
.pig-icon-bg { background:#8b4a2a !important; }
.pig-spec-card { background:#fff; border:1px solid rgba(140,74,42,.12); border-radius:var(--r); padding:2rem; }
.pig-spec-list { list-style:none; display:flex; flex-direction:column; gap:.5rem; margin-bottom:1.25rem; }
.pig-spec-list li { font-size:.88rem; color:var(--slate); display:flex; align-items:center; gap:.6rem; }
.pig-spec-list li::before { content:'•'; color:#8b4a2a; }
.pig-process-step { background:#fff; border:1px solid rgba(140,74,42,.1); border-radius:var(--r); padding:1.75rem; display:flex; gap:1rem; align-items:flex-start; }
.pig-step-num { width:40px; height:40px; background:#8b4a2a; border-radius:var(--r); display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:.9rem; flex-shrink:0; }
.pig-cta { background:linear-gradient(135deg,#8b4a2a,#5c2a1e); }

/* ══════════════ ANIMATIONS ══════════════ */
/* Default visible — JS adds .js-loaded to animate */
.fade-up { opacity:1; transform:none; transition:none; }
.js-loaded .fade-up { opacity:0; transform:translateY(20px); transition:opacity .55s ease,transform .55s ease; }
.js-loaded .fade-up.visible { opacity:1; transform:none; }
.js-loaded .fade-up:nth-child(1){ transition-delay:.05s }
.js-loaded .fade-up:nth-child(2){ transition-delay:.12s }
.js-loaded .fade-up:nth-child(3){ transition-delay:.19s }
.js-loaded .fade-up:nth-child(4){ transition-delay:.26s }

/* ══════════════ SKIP LINK ══════════════ */
.skip-link { position:absolute; top:-50px; left:0; background:var(--leaf); color:#fff; padding:.5rem 1rem; z-index:9999; border-radius:0 0 var(--r) 0; font-weight:600; transition:top .2s; }
.skip-link:focus { top:0; }

/* ══════════════ PRODUCT CARDS — MOBILE SWIPE CAROUSEL ══════════════ */
/* On mobile the products grid becomes a horizontal scroll snap container */
@media (max-width:768px) {
  /* Override any inline style forcing 3 columns */
  .products-grid[style] { grid-template-columns: unset !important; }

  .products-grid {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 1rem;
    padding: 0 1.25rem 1rem;
    margin: 0 -1.25rem;     /* bleed to screen edges */
    /* Hide scrollbar but keep functionality */
    scrollbar-width: none;
  }
  .products-grid::-webkit-scrollbar { display: none; }

  .products-grid .product-card {
    flex: 0 0 82vw;          /* show ~82% of card so next card peeks */
    max-width: 320px;
    scroll-snap-align: start;
  }

  /* Scroll hint indicator */
  .products-grid::after {
    content: '';
    flex: 0 0 1.25rem;      /* right padding at end of scroll */
  }
}

/* ══════════════ RESPONSIVE ══════════════ */
@media (max-width:1024px) {
  .footer-main { grid-template-columns:1fr 1fr; }
  .trust-grid  { grid-template-columns:repeat(2,1fr); }
  .hero-profile-img { width:220px; height:220px; }
  .story-img { width:260px; height:260px; }
}

@media (max-width:768px) {
  .nav-links,.nav-cta { display:none; }
  .hamburger { display:block; }

  /* Hero */
  .hero-content { grid-template-columns:1fr; gap:2rem; padding:2rem 1.5rem; }
  .hero-visual  { display:none; }
  .hero-stats   { gap:1rem; flex-wrap:wrap; }
  .hero-split   { grid-template-columns:1fr; text-align:center; }
  .hero-profile-img { width:180px; height:180px; margin:1.5rem auto 0; }

  /* About/Story */
  .story-grid { grid-template-columns:1fr; text-align:center; }
  .story-img  { width:200px; height:200px; margin:0 auto; }

  /* About strip — 3 or 4 col strips → 2-col grid */
  .about-strip-inner { grid-template-columns:1fr 1fr !important; gap:0; }
  .strip-item {
    border-right: 1px solid rgba(74,140,63,.15);
    border-bottom: 1px solid rgba(74,140,63,.15);
    padding: 1.5rem 1.25rem;
  }
  /* Remove right border from even children, bottom border from last row */
  .about-strip-inner .strip-item:nth-child(even) { border-right: none; }
  .about-strip-inner .strip-item:last-child,
  .about-strip-inner .strip-item:nth-last-child(2):nth-child(odd) { border-bottom: none; }

  /* Climanest */
  .climanest-grid { grid-template-columns:1fr; gap:3rem; }
  .climanest-features { grid-template-columns:1fr 1fr; }

  /* Testimonials */
  .testimonials-grid { grid-template-columns:1fr; }

  /* Trust */
  .trust-grid { grid-template-columns:repeat(2,1fr); }

  /* Contact */
  .contact-grid { grid-template-columns:1fr; }

  /* About values */
  .values-grid { grid-template-columns:1fr 1fr; }

  /* Team */
  .team-grid  { grid-template-columns:1fr; }

  /* Product specs (rice/poultry/pig inner pages) */
  .products-specs { grid-template-columns:1fr; }

  /* ClimaNest page */
  .how-it-works   { grid-template-columns:1fr 1fr; }
  .pricing-grid   { grid-template-columns:1fr; }

  /* Footer */
  .footer-main { grid-template-columns:1fr 1fr; gap:2rem; padding:2.5rem 0 2rem; }
  .footer-bottom  { flex-direction:column; gap:.75rem; text-align:center; }

  /* CTA buttons */
  .cta-actions    { flex-direction:column; align-items:center; }

  /* Forms */
  .form-row { grid-template-columns:1fr; }
  .contact-form { padding:1.5rem; }

  /* Dashboard */
  .dash-metrics { grid-template-columns:1fr 1fr; }

  /* Mission/Vision 2-col → 1-col (about page) */
  .section > .container > div[style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr !important; }

  /* Poultry page biosecurity 4-col trust already handles via .trust-grid */
  /* Rice page process steps 2-col → 1-col */
  .section > .container > div[style*="grid-template-columns:repeat(2,1fr)"] { grid-template-columns: 1fr !important; }

  /* Poultry ClimaNest section inline grid */
  .climanest-section .container > div[style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width:480px) {
  /* Product swipe card — slightly wider on very small screens */
  .products-grid .product-card { flex: 0 0 88vw; }

  /* Grids → single column */
  .trust-grid { grid-template-columns:1fr; }
  .values-grid { grid-template-columns:1fr; }
  .footer-main { grid-template-columns:1fr; }
  .how-it-works { grid-template-columns:1fr; }
  .climanest-features { grid-template-columns:1fr; }

  /* About strip → single column on very small screens */
  .about-strip-inner { grid-template-columns:1fr !important; }
  .about-strip-inner .strip-item {
    border-right: none !important;
    border-bottom: 1px solid rgba(74,140,63,.15) !important;
  }
  .about-strip-inner .strip-item:last-child { border-bottom: none !important; }
}

/* ══════════════ PRODUCT CARD SCROLL HINT (mobile only) ══════════════ */
.products-scroll-hint {
  display: none;
}
@media (max-width:768px) {
  .products-scroll-hint {
    display: flex;
    justify-content: center;
    gap: .5rem;
    margin-top: 1.25rem;
  }
  .products-scroll-hint span {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: rgba(74,140,63,.25);
    transition: background .3s;
  }
  .products-scroll-hint span.active {
    background: var(--leaf);
    width: 22px;
    border-radius: 4px;
  }
}

@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; } }