:root{
  --vsp-maxw: 1200px;
  --vsp-hero-w: clamp(240px, 24vw, 300px);
  --vsp-hero-radius: 32px;
}

/* Container */
.vsp-panels{
  position: relative;
  overflow: hidden;
  padding: clamp(28px, 4vw, 40px) clamp(16px, 3vw, 32px);
  background: transparent;
  max-width: var(--vsp-maxw);
  margin-inline: auto;
}

/* …but remove it when panel 5 is active (root gets this class in the PHP/JS) */
.vsp-panels.vsp-fullbleed{
  padding: 0 !important;   /* ensures it wins even if CSS order varies */
}

/* if you added any inner padding for slide 5 earlier, kill it too */
/* .vsp-panels.vsp-fullbleed .vsp-slide5 .vsp-catalog{
  padding: 0 !important;
} */

/* Panel visibility */
.vsp-panel{ position:absolute; inset:0 auto auto 0; opacity:0; transform: translateY(10px); pointer-events:none; transition: opacity 360ms ease, transform 360ms ease; }
.vsp-panel.is-active{ position:relative; opacity:1; transform:none; pointer-events:auto; }

/* FLEX CATALOG LAYOUT */
.vsp-catalog{
  display:flex;
  align-items:stretch;
  gap: clamp(22px, 3.6vw, 48px);
}

/* Left column: hero */
.vsp-hero{
  flex: 0 0 var(--vsp-hero-w);
  position: relative;
  border-radius: var(--vsp-hero-radius);
  overflow: hidden;
  min-height: 520px;
  background:#0c3e3b;
}
.vsp-hero::before{ content:""; position:absolute; inset:0; background: var(--hero-overlay, linear-gradient(180deg, rgba(12,62,59,0.00) 0%, rgba(12,62,59,0.68) 100%)); z-index:1; }
.vsp-hero::after{ content:""; position:absolute; left:10px; top:10px; bottom:10px; width:7px; border-radius:8px; background:#D7E128; z-index:2; }
.vsp-hero-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter: saturate(.95); }
.vsp-hero-logo{ position:absolute; left:40px; bottom:26px; z-index:3; max-width:166px; height:auto; }

/* Right column container */
.vsp-right{
  flex: 1 1 auto;
  min-width: 0;               /* prevents overflow */
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 2.8vw, 24px);
}

/* Heading block */
.vsp-cat-head{
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: clamp(12px, 2.8vw, 36px);
  padding: 6px 2px 18px 2px;
  border-bottom: 1px solid #e6ecea;
}
.vsp-panel-title{
  font-family: Host Grotesk;
  margin:0;
  font-weight:700;
  font-size: 48px;
  letter-spacing: -0.02em;
  line-height:58px;
  color:transparent;
  background: var(--vsp-title-gradient, linear-gradient(90deg, #0E5B54 0%, #0A6261 60%));
  -webkit-background-clip:text; background-clip:text;
}

/* Copy + optional image sit here (auto-collapses if not rendered) */
.vsp-topstack{ display: grid; gap: 12px; }

/* Copy styles */
.vsp-cat-copy{ color:#2e4f47; opacity:.96; font-size: clamp(12px, 1.05vw, 15px); line-height:1.65; text-align:left; }
.vsp-cat-copy strong{ font-weight:800; color:#0d3d37; }

/* Optional image between head and grid */
.vsp-grid-top{ margin: 6px 0 14px;  text-align: -webkit-center; }
.vsp-grid-top a, .vsp-grid-top div{ display:block; }
.vsp-grid-top img{
  width:615px; height:185px; display:block;
  border-radius: 12px;
  border: 1px solid #e7eeec;
  box-shadow: 0 8px 18px rgba(0,0,0,.06);
  background: #fff;

}

/* CARDS — Flexbox gallery */
.vsp-grid{
  --gap: clamp(18px, 2vw, 24px);
  --col: 4;
  display:flex;
  flex-wrap: wrap;
  gap: var(--gap);
}
.vsp-card{
  flex: 0 1 calc((100% - (var(--col) - 1) * var(--gap)) / var(--col));
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  background:#FFFFFF;
  border:1px solid var(--vsp-card-bd, #E2ECEE);
  /* border-radius:12px; */
  padding:18px 16px;
  text-decoration:none;
  color:inherit;
  min-height:260px;
  transition: background .25s ease, transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.vsp-card:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 26px rgba(0,0,0,.10);
  border-color:#D6E6E8;
}
.vsp-card:hover,
.vsp-card:focus-visible{
  background: linear-gradient(162.12deg, #456F46 -31.9%, #00282D 100%);
}

/* Product image */
.vsp-card > img{
  width:auto;
  max-width:100%;
  height:230px;
  object-fit:contain;
  display:block;
  margin:6px auto 14px;
  border:0;
  background:transparent;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.12));
  border-radius:8px;
}

/* Label */
.vsp-card-label{
  font-family:"Space Grotesk", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight:400;
  font-style:normal;
  font-size:16px;
  line-height:36px;
  letter-spacing:0;
  color:#00282D;
  margin-top:auto;
  text-align:center;
  transition: color .2s ease;
}
.vsp-card:hover .vsp-card-label,
.vsp-card:focus-visible .vsp-card-label{ color:#FFFFFF; }

/* Placeholder cards */
.vsp-card--placeholder{ background: #f9fbfb; border-style: dashed; }
.vsp-ph-img{ width:100%; height:185px; border-radius:8px; background: repeating-linear-gradient(45deg,#e9f0ef,#e9f0ef 10px,#f4f9f8 10px,#f4f9f8 20px); }

/* Typography for subtitle/body */
.vsp-subtitle{
  font-family: "Space Grotesk", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 16px;
  line-height: 30px;
  letter-spacing: 0;
  color: #00282D;
  margin: 0 0 6px;
}
.vsp-body,
.vsp-body p{
  font-family: "Space Grotesk", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 16px;
  line-height: 36px;
  letter-spacing: 0;
  color: #00282D;
}
.vsp-body{ margin: 0; }
.vsp-body p{ margin: 0 0 10px; }

/* ===== Slide 5 special styles (no grid) ===== */
.vsp-slide5 .vsp-right{ gap: 18px; }

/* Card-like callout matching the mock: soft green tint, rounded border, light shadow */
.vsp-d5-callout{
  padding: 26px 32px;
  border-radius: 12px;
  border: 1px solid rgba(0, 40, 45, 0.16);        /* subtle green-grey */
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(0, 77, 61, 0.10) 0%, rgba(0,0,0,0) 55%),
    linear-gradient(180deg, #FFFFFF 0%, #F3F8F3 100%);
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
}

/* Panel 5 background image */
.vsp-slide5{
  position: relative;
  background-image: url("https://verdantgroup.co.in/wp-content/uploads/2025/08/Company-Profile-6-scaled.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 16px;      /* optional */
  overflow: hidden;         /* keeps bg nicely clipped to radius */
}

/* optional: a faint inner border + padding so the bg shows nicely */
.vsp-slide5{
  box-shadow: inset 0 0 0 1px rgba(0,40,45,.06);
}
.vsp-slide5 .vsp-catalog{
  position: relative;
  overflow: hidden;
  padding: clamp(28px, 4vw, 40px) clamp(16px, 3vw, 32px);
  background: transparent;
  max-width: var(--vsp-maxw);
  margin-inline: auto;
}

/* (optional) slightly brighten content against the photo */
.vsp-slide5 .vsp-d5-callout{
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(2px);
}

/* When panel 5 is active, drop wrapper padding/max-width */
.vsp-panels.vsp-fullbleed{ padding:0; max-width:none; margin-inline:0; background:transparent; }

/* Panel 5 background image */

/* Panel 7 background only */
.vsp-slide7{
  background: #00282D;
  /* border-radius: 16px;    */
  overflow: hidden;      /* keep radius clean */
}

/* optional: give content a little breathing room inside the dark bg */
.vsp-slide7 .vsp-catalog{
  position: relative;
  overflow: hidden;
  padding: clamp(28px, 4vw, 40px) clamp(16px, 3vw, 32px);
  background: transparent;
  max-width: var(--vsp-maxw);
  margin-inline: auto;
}

/* optional: improve contrast for text/dividers on the dark bg */
.vsp-slide7 .vsp-cat-head{ border-bottom-color: rgba(255,255,255,0.2); }
.vsp-slide7 .vsp-subtitle,
.vsp-slide7 .vsp-body,
.vsp-slide7 .vsp-body p,
.vsp-slide7 .vsp-cat-copy{
  color: #ffffff;
}

.vsp-slide7 .vsp-card-label{
  color: #ffffff;
}

.vsp-slide7 .vsp-card{
  background-color: #ffffff20;
  border: 1px solid #ffffff40;
}


/* Responsive */
@media (max-width: 1100px){
  .vsp-grid{ --col: 3; }
}
@media (max-width: 820px){
  .vsp-catalog{ flex-direction: column; }
  .vsp-hero{ min-height: 360px; }
  .vsp-cat-head{ grid-template-columns: 1fr; text-align: left; }
  .vsp-cat-copy{ text-align:left; max-width:none; }
}
@media (max-width: 640px){
  .vsp-grid{ --col: 2; }
  .vsp-card > img, .vsp-ph-img{ height: 150px; }
}