/* =====================================================================
   LAB LANDING — Modern Image-Rich SEO Landing Pages
   Used by: container-load, fob-mundra-pipavav, apeda-certified,
            horeca, catering, cloud-kitchen, institutional-canteen
   ===================================================================== */

:root{
  --lab-navy:#0B3156;
  --lab-navy-2:#0e3b66;
  --lab-gold:#F4D03F;
  --lab-gold-d:#D4AF37;
  --lab-cream:#fbf6ec;
  --lab-cream-2:#fff8e8;
  --lab-ink:#243446;
  --lab-mute:#5a6b7e;
  --lab-line:#ece2c9;
}

/* ========== HERO (image background, parallax-like) ========== */
.lab-hero{
  position:relative; min-height:78vh;
  display:flex; align-items:center; justify-content:flex-start;
  text-align:left; color:#fff;
  padding:140px 20px 90px;
  background-size:cover; background-position:center;
  overflow:hidden;
}
.lab-hero::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(120deg, rgba(8,20,40,.85) 0%, rgba(8,20,40,.55) 55%, rgba(8,20,40,.35) 100%);
}
.lab-hero::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(circle at 12% 80%, rgba(244,208,63,.20), transparent 45%),
    radial-gradient(circle at 90% 12%, rgba(244,208,63,.18), transparent 40%);
  pointer-events:none;
}
.lab-hero-inner{
  position:relative; z-index:2;
  max-width:1200px; width:100%; margin:0 auto;
  display:grid; grid-template-columns:1.4fr 1fr; gap:50px; align-items:center;
}
.lab-hero-tag{
  display:inline-flex; align-items:center; gap:10px;
  padding:8px 18px; border-radius:999px;
  background:rgba(244,208,63,.16); border:1px solid rgba(244,208,63,.5);
  color:var(--lab-gold); font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  margin-bottom:20px; font-weight:600;
}
.lab-hero h1{
  font-family:'Playfair Display', serif;
  font-size:clamp(28px, 4.6vw, 54px);
  line-height:1.12; margin:6px 0 18px;
  text-shadow:0 4px 28px rgba(0,0,0,.4);
}
.lab-hero h1 .gold{
  background:linear-gradient(135deg,#D4AF37,#F4D03F,#D4AF37);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}
.lab-hero p.lab-hero-sub{
  max-width:640px; font-size:clamp(15px,1.45vw,17.5px);
  line-height:1.75; color:#f3e8d0; margin:0 0 26px;
}
.lab-hero-ctas{ display:flex; gap:14px; flex-wrap:wrap; margin-top:8px; }
.lab-btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 28px; border-radius:10px;
  font-weight:700; font-size:15px;
  text-decoration:none; transition:all .25s;
  border:2px solid transparent;
}
.lab-btn-primary{ background:var(--lab-gold); color:var(--lab-navy); }
.lab-btn-primary:hover{ background:#fff; transform:translateY(-2px); box-shadow:0 12px 30px rgba(244,208,63,.35); }
.lab-btn-ghost{ background:transparent; color:#fff; border-color:rgba(255,255,255,.5); }
.lab-btn-ghost:hover{ background:#fff; color:var(--lab-navy); border-color:#fff; }

.lab-hero-card{
  position:relative; padding:24px;
  background:rgba(255,255,255,.08); backdrop-filter:blur(14px);
  border:1px solid rgba(244,208,63,.3); border-radius:18px;
  display:grid; gap:14px;
}
.lab-hero-card .img-wrap{
  border-radius:12px; overflow:hidden; aspect-ratio:4/3;
  border:1px solid rgba(244,208,63,.25);
}
.lab-hero-card .img-wrap img{ width:100%; height:100%; object-fit:cover; display:block; }
.lab-hero-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.lab-hero-stat{ text-align:center; padding:10px 6px; background:rgba(0,0,0,.18); border-radius:10px; }
.lab-hero-stat strong{ display:block; color:var(--lab-gold); font-family:'Playfair Display',serif; font-size:22px; line-height:1; }
.lab-hero-stat span{ display:block; font-size:10.5px; color:#e8d8a8; letter-spacing:.1em; text-transform:uppercase; margin-top:6px; }

.lab-crumb{ font-size:12.5px; opacity:.85; margin-bottom:14px; }
.lab-crumb a{ color:var(--lab-gold); text-decoration:none; }
.lab-crumb a:hover{ text-decoration:underline; }
.lab-crumb .cur{ color:#fff; }

@media (max-width:900px){
  .lab-hero{ padding:110px 18px 70px; min-height:auto; }
  .lab-hero-inner{ grid-template-columns:1fr; gap:30px; }
  .lab-hero-card{ order:2; }
}

/* ========== SECTIONS ========== */
.lab-sec{ padding:80px 20px; position:relative; }
.lab-sec .lab-wrap{ max-width:1200px; margin:0 auto; }
.lab-sec.alt{ background:var(--lab-cream); }
.lab-sec.dark{ background:linear-gradient(135deg,#0b3156 0%,#0e3b66 100%); color:#f3e8d0; }
.lab-sec.dark .lab-eyebrow{ color:var(--lab-gold); }
.lab-sec.dark h2{ color:#fff; }
.lab-sec.dark p{ color:#e1d6bb; }

.lab-eyebrow{
  display:inline-block; font-size:12px; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--lab-gold-d); margin-bottom:12px;
}
.lab-sec h2{
  font-family:'Playfair Display', serif;
  font-size:clamp(26px, 3.4vw, 40px); line-height:1.2;
  color:var(--lab-navy); margin:0 0 18px; font-weight:700;
}
.lab-sec h2 .gold{ color:var(--lab-gold-d); }
.lab-sec h3{
  font-family:'Playfair Display', serif;
  font-size:clamp(20px,2vw,26px); color:var(--lab-navy);
  margin:30px 0 10px; font-weight:700;
}
.lab-sec p{ font-size:16px; line-height:1.85; color:var(--lab-mute); margin:0 0 14px; }
.lab-sec.dark h3{ color:#fff; }

/* ========== SPLIT (text + image) ========== */
.lab-split{
  display:grid; grid-template-columns:1.1fr 1fr; gap:60px; align-items:center;
}
.lab-split.reverse{ grid-template-columns:1fr 1.1fr; }
.lab-split.reverse .lab-split-text{ order:2; }
.lab-split-img{
  position:relative; border-radius:18px; overflow:hidden;
  box-shadow:0 28px 60px -20px rgba(11,49,86,.35);
  aspect-ratio:4/3;
}
.lab-split-img img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .8s ease; }
.lab-split-img:hover img{ transform:scale(1.05); }
.lab-split-img::after{
  content:""; position:absolute; left:-14px; bottom:-14px; width:60%; height:60%;
  background:linear-gradient(135deg, var(--lab-gold) 0%, var(--lab-gold-d) 100%);
  z-index:-1; border-radius:18px; opacity:.35;
}
@media (max-width:900px){
  .lab-split, .lab-split.reverse{ grid-template-columns:1fr; gap:34px; }
  .lab-split.reverse .lab-split-text{ order:0; }
}

/* ========== LIST WITH CHECK ICONS ========== */
.lab-checklist{ list-style:none; padding:0; margin:18px 0 22px; display:grid; gap:0; }
.lab-checklist li{
  position:relative; padding:13px 0 13px 40px;
  font-size:16px; line-height:1.7; color:var(--lab-ink);
  border-bottom:1px solid var(--lab-line);
}
.lab-checklist li:last-child{ border-bottom:none; }
.lab-checklist li:before{
  content:"\f00c"; font-family:"Font Awesome 6 Free"; font-weight:900;
  color:var(--lab-gold); background:var(--lab-navy);
  width:24px; height:24px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:11px; position:absolute; left:0; top:14px;
}
.lab-sec.dark .lab-checklist li{ color:#f1e6ca; border-color:rgba(244,208,63,.18); }
.lab-sec.dark .lab-checklist li:before{ background:var(--lab-gold); color:var(--lab-navy); }

/* ========== VARIETY / FEATURE GRID ========== */
.lab-grid{
  display:grid; gap:26px;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
}
.lab-card{
  background:#fff; border-radius:16px; overflow:hidden;
  box-shadow:0 14px 40px -18px rgba(11,49,86,.18);
  border:1px solid #f0e7d3;
  transition:transform .35s ease, box-shadow .35s ease;
  display:flex; flex-direction:column;
}
.lab-card:hover{ transform:translateY(-6px); box-shadow:0 24px 60px -20px rgba(11,49,86,.32); }
.lab-card-img{ aspect-ratio:16/10; overflow:hidden; }
.lab-card-img img{ width:100%; height:100%; object-fit:cover; transition:transform .6s; }
.lab-card:hover .lab-card-img img{ transform:scale(1.07); }
.lab-card-body{ padding:22px 22px 24px; flex:1; }
.lab-card h3{
  font-family:'Playfair Display',serif; color:var(--lab-navy);
  margin:0 0 10px; font-size:20px; line-height:1.3;
}
.lab-card p{ color:var(--lab-mute); font-size:15px; line-height:1.7; margin:0; }
.lab-card .lab-pill{
  display:inline-block; font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; font-weight:700;
  padding:5px 12px; border-radius:999px;
  background:var(--lab-cream); color:var(--lab-gold-d); margin-bottom:10px;
}

/* ========== FEATURE TILES (icon, no image) ========== */
.lab-tiles{
  display:grid; gap:18px;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  margin:14px 0;
}
.lab-tile{
  background:#fff; border-radius:14px; padding:24px 22px;
  border:1px solid #f0e7d3;
  box-shadow:0 8px 24px -14px rgba(11,49,86,.18);
  display:flex; gap:16px; align-items:flex-start;
  transition:transform .25s, box-shadow .25s;
}
.lab-tile:hover{ transform:translateY(-3px); box-shadow:0 18px 38px -16px rgba(11,49,86,.28); }
.lab-tile .ti{
  flex-shrink:0; width:46px; height:46px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--lab-gold),var(--lab-gold-d));
  color:var(--lab-navy); font-size:18px;
}
.lab-tile h4{
  font-family:'Playfair Display',serif; color:var(--lab-navy);
  margin:0 0 6px; font-size:17px; line-height:1.3;
}
.lab-tile p{ color:var(--lab-mute); font-size:14.5px; line-height:1.65; margin:0; }
.lab-sec.dark .lab-tile{ background:rgba(255,255,255,.06); border-color:rgba(244,208,63,.18); }
.lab-sec.dark .lab-tile h4{ color:#fff; }
.lab-sec.dark .lab-tile p{ color:#dccfa8; }

/* ========== CALLOUT / QUOTE BOX ========== */
.lab-callout{
  position:relative; padding:30px 32px;
  background:linear-gradient(135deg, var(--lab-navy) 0%, var(--lab-navy-2) 100%);
  color:#fff; border-radius:16px; margin:30px 0;
  border-left:5px solid var(--lab-gold);
}
.lab-callout p{ color:#f3e8d0; margin:0; font-size:16px; line-height:1.75; }
.lab-callout strong{ color:var(--lab-gold); }

/* ========== STAT STRIP ========== */
.lab-stats{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:18px; margin:28px 0;
}
.lab-stat{
  background:#fff; border:1px solid #f0e7d3; border-radius:14px;
  padding:24px 18px; text-align:center;
  box-shadow:0 8px 22px -12px rgba(11,49,86,.18);
}
.lab-stat .num{
  font-family:'Playfair Display',serif;
  font-size:34px; font-weight:700;
  background:linear-gradient(135deg,var(--lab-gold-d),var(--lab-gold));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  display:block; line-height:1;
}
.lab-stat span{ font-size:13px; color:var(--lab-mute); display:block; margin-top:8px; letter-spacing:.06em; }

/* ========== CTA BANNER ========== */
.lab-cta{
  position:relative; padding:80px 20px;
  background:linear-gradient(135deg, var(--lab-navy) 0%, var(--lab-navy-2) 100%);
  color:#fff; overflow:hidden;
}
.lab-cta::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(circle at 15% 50%, rgba(244,208,63,.15), transparent 40%),
    radial-gradient(circle at 85% 50%, rgba(244,208,63,.12), transparent 40%);
}
.lab-cta-inner{ position:relative; max-width:980px; margin:0 auto; text-align:center; }
.lab-cta h2{
  font-family:'Playfair Display',serif; color:#fff;
  font-size:clamp(26px,3.4vw,40px); margin:0 0 16px; line-height:1.25;
}
.lab-cta h2 .gold{ color:var(--lab-gold); }
.lab-cta p{ color:#e1d6bb; max-width:720px; margin:0 auto 28px; font-size:17px; line-height:1.7; }
.lab-cta .lab-hero-ctas{ justify-content:center; }

/* ========== FAQ ========== */
.lab-faq{ display:grid; gap:14px; margin-top:18px; }
.lab-faq details{
  background:#fff; border:1px solid var(--lab-line); border-radius:12px;
  padding:18px 22px; transition:box-shadow .2s, border-color .2s;
}
.lab-faq details[open]{ box-shadow:0 12px 30px -16px rgba(11,49,86,.2); border-color:var(--lab-gold); }
.lab-faq summary{
  cursor:pointer; list-style:none;
  font-family:'Playfair Display',serif;
  color:var(--lab-navy); font-size:17px; font-weight:700;
  display:flex; justify-content:space-between; align-items:center;
  gap:18px;
}
.lab-faq summary::-webkit-details-marker{ display:none; }
.lab-faq summary::after{
  content:"+"; color:var(--lab-gold-d); font-size:24px; font-weight:400; transition:transform .25s;
}
.lab-faq details[open] summary::after{ content:"\2212"; }
.lab-faq details > *:not(summary){
  margin-top:14px; color:var(--lab-mute); font-size:15.5px; line-height:1.75;
}

/* ========== IMAGE STRIP (3-up) ========== */
.lab-imgstrip{
  display:grid; gap:14px;
  grid-template-columns:repeat(3, 1fr);
  margin:30px 0;
}
.lab-imgstrip .ic{
  position:relative; aspect-ratio:4/3; border-radius:14px; overflow:hidden;
  box-shadow:0 14px 36px -16px rgba(11,49,86,.3);
}
.lab-imgstrip .ic img{ width:100%; height:100%; object-fit:cover; transition:transform .6s; }
.lab-imgstrip .ic:hover img{ transform:scale(1.06); }
.lab-imgstrip .ic .cap{
  position:absolute; left:0; right:0; bottom:0; padding:14px 16px;
  background:linear-gradient(transparent, rgba(11,49,86,.85));
  color:#fff; font-family:'Playfair Display',serif; font-size:16px; font-weight:600;
}
@media (max-width:760px){
  .lab-imgstrip{ grid-template-columns:1fr 1fr; }
}
@media (max-width:480px){
  .lab-imgstrip{ grid-template-columns:1fr; }
}

/* ========== TWO-COL LISTS ========== */
.lab-twocol{
  display:grid; gap:14px 32px;
  grid-template-columns:1fr 1fr;
}
.lab-twocol > .lab-checklist{ margin:0; }
@media (max-width:760px){
  .lab-twocol{ grid-template-columns:1fr; }
}

/* ========== EXPLAINER (numbered with arrow + result) ========== */
.lab-explainers{ display:grid; gap:18px; margin:18px 0; }
.lab-explainer{
  background:#fff; border:1px solid #f0e7d3; border-radius:14px;
  padding:22px 24px;
  box-shadow:0 8px 22px -14px rgba(11,49,86,.16);
  display:grid; grid-template-columns:auto 1fr; gap:18px; align-items:flex-start;
}
.lab-explainer .nm{
  width:42px; height:42px; border-radius:50%;
  background:linear-gradient(135deg,var(--lab-gold),var(--lab-gold-d));
  color:var(--lab-navy);
  display:flex; align-items:center; justify-content:center;
  font-family:'Playfair Display',serif; font-weight:700; font-size:18px;
  flex-shrink:0;
}
.lab-explainer h4{
  font-family:'Playfair Display',serif; color:var(--lab-navy);
  margin:0 0 8px; font-size:18px; line-height:1.35;
}
.lab-explainer p{ margin:0 0 8px; color:var(--lab-mute); font-size:15px; line-height:1.7; }
.lab-explainer .res{
  margin-top:8px; padding:10px 14px; background:var(--lab-cream-2);
  border-left:3px solid var(--lab-gold); border-radius:6px;
  color:var(--lab-navy); font-size:14.5px; font-weight:600;
}

/* Responsive tweaks */
@media (max-width:760px){
  .lab-sec{ padding:60px 18px; }
  .lab-callout{ padding:22px 22px; }
  .lab-card-body{ padding:18px 18px 20px; }
}