/*
 * Homepage sustainability band.
 *
 * Extracted from the source file during migration. The rules are the source
 * rules; only their home is new.
 */

/* ==========================================================
   1. SECTION
   ========================================================== */
.fbi-sus{
  /* green scale — reference se thora deeper, contrast behtar */
  --s-g50:#EDF9F3;
  --s-g100:#D6EFE3;
  --s-g200:#B4E3CE;
  --s-g500:#15A96C;
  --s-g600:#0E8A57;
  /* neutrals — pure black ki jagah halka blue-black */
  --s-ink:#0F1E2E;
  --s-body:#55677A;
  --s-line:#E2ECF1;
  --s-max:1240px;
  --s-pad:clamp(20px,4vw,32px);

  position:relative;isolation:isolate;overflow:hidden;
  padding:clamp(56px,7.5vw,108px) 0;
  background:linear-gradient(135deg,#EFF6FA 0%,#EAF7F2 52%,#F2F9FB 100%);
  color:var(--s-ink);
  font-family:'Inter','Segoe UI',system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
/* image ke peeche halka mint glow — depth ke liye */
.fbi-sus::before{content:"";position:absolute;z-index:0;pointer-events:none;
  left:-6%;top:6%;width:52%;height:80%;
  background:radial-gradient(circle at 40% 45%,rgba(21,169,108,.13),transparent 66%)}

/* theme bleed guards (Astra vagaira) */
.fbi-sus *{box-sizing:border-box}
.fbi-sus ul,.fbi-sus li{list-style:none;margin:0;padding:0}
.fbi-sus h2,.fbi-sus h3,.fbi-sus p{margin:0}
.fbi-sus img{max-width:100%;display:block}

.fbi-sus-in{position:relative;z-index:1;max-width:var(--s-max);margin:0 auto;
  padding:0 var(--s-pad);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.06fr);
  gap:clamp(32px,4.4vw,64px);align-items:center}

/* ==========================================================
   2. IMAGE
   ========================================================== */
.fbi-sus-media{position:relative}
.fbi-sus-media img{width:100%;aspect-ratio:1/1;object-fit:cover;
  border-radius:14px;background:#E8F2EE;
  border:1px solid var(--s-g200);
  box-shadow:0 24px 60px -28px rgba(13,71,50,.34),
             0 4px 14px -6px rgba(13,71,50,.10)}

/* ==========================================================
   3. COPY
   ========================================================== */
.fbi-sus-badge{display:inline-flex;align-items:center;gap:8px;
  padding:8px 16px 8px 12px;border-radius:100px;
  background:var(--s-g100);border:1px solid rgba(21,169,108,.16);
  font-size:12.5px;font-weight:600;letter-spacing:.015em;color:var(--s-g600);
  margin-bottom:clamp(16px,2vw,22px)}
.fbi-sus-badge b{flex:0 0 auto;width:6px;height:6px;border-radius:50%;
  background:var(--s-g500);box-shadow:0 0 0 3px rgba(21,169,108,.16)}

.fbi-sus h2{font-family:'IBM Plex Sans','Inter',sans-serif;
  font-size:clamp(29px,3.5vw,48px);font-weight:700;line-height:1.1;
  letter-spacing:-.028em;color:var(--s-ink);
  margin-bottom:clamp(12px,1.6vw,18px);overflow-wrap:break-word}
.fbi-sus h2 em{font-style:normal;color:var(--s-g500)}

.fbi-sus-lede{max-width:560px;font-size:clamp(14.5px,1.15vw,16.5px);line-height:1.72;
  color:var(--s-body);margin-bottom:clamp(24px,3vw,36px)}

/* ==========================================================
   4. CARDS
   ========================================================== */
.fbi-sus-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(12px,1.4vw,18px)}
.fbi-sus-cards li{display:flex;flex-direction:column;
  padding:clamp(18px,1.9vw,24px);
  background:#fff;border:1px solid var(--s-line);border-radius:12px;
  box-shadow:0 1px 2px rgba(16,45,65,.04);
  transition:transform .3s cubic-bezier(.3,.8,.3,1),box-shadow .3s,border-color .3s}
@media(hover:hover){
  .fbi-sus-cards li:hover{transform:translateY(-3px);border-color:var(--s-g200);
    box-shadow:0 16px 32px -16px rgba(13,71,50,.24)}
  .fbi-sus-cards li:hover .fbi-sus-ic{background:var(--s-g500);border-color:var(--s-g500)}
  .fbi-sus-cards li:hover .fbi-sus-ic svg{stroke:#fff}
}
.fbi-sus-ic{display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:10px;
  background:var(--s-g50);border:1px solid var(--s-g100);
  margin-bottom:clamp(14px,1.6vw,18px);
  transition:background .3s,border-color .3s}
.fbi-sus-ic svg{width:20px;height:20px;fill:none;stroke:var(--s-g500);
  stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;transition:stroke .3s}

.fbi-sus-cards h3{font-family:'IBM Plex Sans','Inter',sans-serif;
  font-size:clamp(15px,1.25vw,16.5px);font-weight:600;letter-spacing:-.005em;
  color:var(--s-ink);margin-bottom:7px}
.fbi-sus-cards p{font-size:clamp(13px,1.05vw,14px);line-height:1.6;color:var(--s-body)}

/* ==========================================================
   5. SCROLL REVEAL (halka)
   ========================================================== */
.fbi-sus-media,.fbi-sus-body>*{opacity:0;transform:translateY(18px);
  transition:opacity .7s cubic-bezier(.3,.8,.3,1),transform .7s cubic-bezier(.3,.8,.3,1)}
.fbi-sus.in .fbi-sus-media,.fbi-sus.in .fbi-sus-body>*{opacity:1;transform:none}
.fbi-sus.in .fbi-sus-badge{transition-delay:.06s}
.fbi-sus.in .fbi-sus-body h2{transition-delay:.13s}
.fbi-sus.in .fbi-sus-lede{transition-delay:.2s}
.fbi-sus.in .fbi-sus-cards{transition-delay:.27s}

/* ==========================================================
   6. RESPONSIVE
   ========================================================== */
@media(max-width:980px){
  .fbi-sus-in{grid-template-columns:minmax(0,1fr);gap:clamp(28px,5vw,42px)}
  .fbi-sus-media img{aspect-ratio:16/10}
  .fbi-sus-lede{max-width:none}
}
@media(max-width:560px){
  .fbi-sus-cards{grid-template-columns:minmax(0,1fr)}
  .fbi-sus-media img{aspect-ratio:4/3;border-radius:12px}
  .fbi-sus-ic{width:40px;height:40px;margin-bottom:13px}
}
@media(prefers-reduced-motion:reduce){
  .fbi-sus-media,.fbi-sus-body>*{opacity:1;transform:none;transition:none}
  .fbi-sus-cards li{transition:none}
}