/* ========================================================= */
/* HOME PAGE STYLES */
/* ========================================================= */
.section-soft {
    background: #faf9f6;
    padding: 72px 0
}

/* --------------------
   HERO SECTION
   -------------------- */
.hero {
    position: relative;
    padding: 120px 0 80px;
    overflow: hidden;
    min-height: 92vh;
    background: var(--paper);
}

.hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(.8);
    z-index: 0;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    backdrop-filter: blur(4px);
    z-index: 1;
}

/* if video can't load, add class to show poster background */
.hero.hero-no-video {
    background-image: url('/assets/img/hero.jpg');
    background-size: cover;
    background-position: center;
}

/* Hero card */
.hero-card {
    position: relative;
    z-index: 2;
    background: #fff;
    border-radius: var(--radius-lg); 
    padding: 40px;
    box-shadow: var(--sh2);
}

/* --------------------
   FEATURES SECTION
   -------------------- */
/* Feature card */
.feature-card {
    background: #fff;
    border-radius: var(--radius); 
    padding: 32px 24px;
    text-align: center;
    box-shadow: var(--sh1);
    transition: transform .3s ease, box-shadow .3s ease;
}

.feature-card:hover {
    transform: translateY(-8px) scale(1.02) rotate(-.25deg);
    box-shadow: var(--sh2);
}

/* --------------------
   PRODUCT SECTION
   -------------------- */
/* Product image */
.product-img {
    aspect-ratio: 16 / 9;
    height: auto;
    object-fit: cover;
    width: 100%;
}

/* Icon list */
.icon-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.icon-list li {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    margin: .4rem 0;
    color: var(--slate);
}

.icon-list i {
    flex: 0 0 auto;
    margin-top: .2rem;
}

/* --------------------
   IMPACT SECTION
   -------------------- */
.impact {
    background: linear-gradient(135deg, rgba(199, 235, 221, .45), rgba(17, 94, 68, .07));
    padding: 80px 0;
}

.gif-icon {
    width: 56px;
    height: 56px;
    object-fit: contain;
}

/* --------------------
   PROCESS / TIMELINE SECTION
   -------------------- */
.timeline {
    position: relative;
    margin-left: 10px;
}

.timeline:before {
    content: '';
    position: absolute;
    left: 36px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: rgba(17, 94, 68, .25);
    z-index: 0;
}

.tl-row {
    position: relative;
    padding-left: 96px;
    margin: 26px 0;
}

.tl-row .dot {
    position: absolute;
    left: 36px;
    top: 34px;
    transform: translate(-50%, -50%);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--p700);
    display: grid;
    place-items: center;
    box-shadow: 0 0 0 8px rgba(17, 94, 68, .1);
    z-index: 1;
}

.dot .dot-icon {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

/* --------------------
   CERTIFICATIONS (LOGOS) SECTION
   -------------------- */
#logosSlider .slick-slide {
    width: auto !important;
    padding: 0 20px;
}

/* --------------------
   INSIGHTS SECTION
   -------------------- */
/* Insight Header Row (Controls button/title positioning) */
/*.insight-header-row {*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*    align-items: flex-start !important; */
/*    gap: 0.5rem; */
/*}*/
.insight-header-row .btn-sm {
    order: -1; /* Button above title on mobile/tablet */
    margin-bottom: 0;
}

.insights-container { width: 100%; overflow: hidden; }

/* Each card */
.insight-card {
  position: relative;
  display: block;
  background: #fff;
  border: 2px solid #e5e7eb;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
  cursor: pointer;
  isolation: isolate;
  text-decoration: none !important; 
}

/* Hover lift + glow */
.insight-card:hover {
  transform: translateY(-6px);
  border-color: var(--p500);
  box-shadow:
    0 0 18px rgba(44,166,111,.45),
    inset 0 0 0 1px rgba(44,166,111,.12),
    0 8px 22px rgba(0,0,0,.15);
}

/* Media block uses aspect-ratio to avoid CLS */
.insight-media {
  position: relative;
  aspect-ratio: 16 / 9;
  height: auto;
  overflow: hidden;
  border-radius: 20px 20px 0 0;
}

/* Insight Meta (Category/Date) */
.insight-meta { 
    display: flex; 
    gap: .75rem; 
    align-items: center; 
    margin-bottom: 0.5rem; 
}
.insight-chip {
  position: relative;
  left: auto;
  top: auto;
  background: rgba(44,166,111,0.92); 
  color: #fff;
  padding: .35rem .6rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: .78rem;
  box-shadow: none; 
  z-index: 1;
}

.insight-date {
  position: relative;
  right: auto;
  top: auto;
  background: none;
  color: var(--slate); 
  padding: 0;
  border-radius: 0;
  font-size: .85rem;
  z-index: 1;
  font-weight: 500;
}

/* Poster */
.insight-poster {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transform-origin: center center;
  transition: transform .5s ease, filter .4s ease;
}

/* poster hover zoom */
.insight-card:hover .insight-poster {
  transform: scale(1.035);
  filter: brightness(1.05);
}

/* content */
.insight-card .content {
  padding: 1rem 1.25rem 2.75rem;
}

.insight-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--ink);
  margin: 0 0 .25rem;
}

.insight-body {
  color: #6b7280;
  line-height: 1.5;
  margin: 0 0 .5rem;
}

/* read more pill */
.read-more {
  position: absolute;
  right: 12px;
  bottom: 12px;
  background: var(--p500);
  color: #fff;
  border-radius: 999px;
  padding: .5rem .9rem;
  font-weight: 700;
  font-size: .9rem;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  box-shadow: 0 10px 22px rgba(0,0,0,.18), 0 2px 6px rgba(0,0,0,.08);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .25s ease, transform .25s ease, background .2s ease, box-shadow .2s ease;
  pointer-events: none;
}

.insight-card:hover .read-more {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* keyboard focus */
.insight-card:focus-visible {
  outline: 3px solid rgba(44,166,111,.45);
  outline-offset: 3px;
}

/* Dot Styling (Applies to Product/Insights) */
.slick-dots {
    bottom: -35px; 
    padding: 0; 
}
.slick-dots li {
    margin: 0 4px; 
}
.slick-dots li button:before {
    content: "\f111"; 
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    color: var(--p500); 
    font-size: 0.65rem;
    opacity: 0.4;
    transition: opacity 0.3s ease;
}
.slick-dots li.slick-active button:before {
    color: var(--p500);
    opacity: 1;
}

/* Hide navigation arrows for Product Slider */
#productSlider .slick-prev,
#productSlider .slick-next {
    display: none !important;
}

/* --------------------
   CTA SECTION
   -------------------- */
.lead-section {
    background: var(--paper);
    color: var(--slate);
    position: relative;
}

.lead-card {
    background: #fff;
    border-radius: var(--radius-lg); 
    padding: 40px;
    max-width: 960px;
    margin: 0 auto;
    box-shadow: var(--sh2);
}
.lead-card input,
.lead-card select,
.lead-card textarea {
    border-radius: var(--radius); 
    background: #fff;
    position: relative;
}

.select-wrap {
    position: relative;
}

.select-wrap select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 2.5rem;
}

.select-wrap .fa-chevron-down {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    opacity: .7;
}


/* ========================================================= */
/* MEDIA QUERIES (END OF FILE) */
/* ========================================================= */

@media (max-width: 1199.98px) {
    /* Insights Tablet/Mobile Layout */
    .insight-header-row {
        /* Default mobile/tablet stacking is active here */
    }
}

@media (min-width: 1200px) {
    /* Insights Desktop Layout */
    .insights-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
        overflow: visible;
    }
    .insight-header-row {
        flex-direction: row; 
        align-items: center !important;
        justify-content: space-between;
        gap: 1rem;
    }
    .insight-header-row .btn-sm {
        order: initial;
    }
}

@media (max-width:768px) {
    .hero-card {
        padding: 28px;
    }

    .product-img {
        aspect-ratio: 4 / 3;
    }

    .lead-card {
        padding: 28px;
    }
}

@media (max-width: 575.98px) {
  .insight-media { aspect-ratio: 4 / 3; }
}


/* Hero Crad */

@media (max-width: 991.98px) {
    .hero-card {
        background: rgba(255, 255, 255, 0.65); 
        backdrop-filter: blur(2px); 
    }
}

@media (max-width: 768px) {
    .hero-card {
        padding: 28px;
    }

    .product-img {
        aspect-ratio: 4 / 3;
    }

    .lead-card {
        padding: 28px;
    }
}

@media (max-width: 575.98px) {
  .insight-media { aspect-ratio: 4 / 3; }
}