/* ================================================================
   IMPORTS
================================================================ */
@import url("https://fonts.googleapis.com/css2?family=Sora:wght@300;400;600;700;800&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,300&display=swap");

/* ================================================================
   DESIGN TOKENS
================================================================ */
:root {
  --navy: #0b1e2d;
  --teal: #00b4a0;
  /* --light-blue: #00b4a0; */
  --teal-dark: #007d6e;
  --mint: #e8f7f5;
  --white: #ffffff;
  --text-dark: #0b1e2d;
  --text-mid: #3d5a6b;
  --text-muted: #7a9aaa;
  --orange: #f97316;
  --border: rgba(0, 180, 160, 0.2);

  --font-display: "Sora", sans-serif;
  --font-body: "Sora", sans-serif;

  --header-h: 62px;
  --section-pad: 70px;
}

/* ================================================================
   BASE
================================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  font-family: var(--font-body);
  color: var(--text-dark);
  background: var(--white);
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-display);
  /* letter-spacing: -0.02em;
  line-height: 1.2; */
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

/* ================================================================
   PRELOADER
================================================================ */

body.preloader-active {
  overflow: hidden;
}

.preloader-background {
  position: fixed;
  inset: 0;
  background: #0a1128;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.loader-wrapp figure img {
  width: 300px;
  height: auto;
  display: block;
  margin: 0 auto;
  animation: softPulse 2s ease-in-out infinite;
}
.triangle-loading {
  font-family: var(--font-display);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.4em;
  color: #0091d5;
  margin: 25px 0 10px;
  font-weight: 700;
}
.loader-wrapp figure figcaption {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #fff;
  max-width: 410px;
  margin: 0 auto;
  line-height: 1.6;
}
@keyframes softPulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.03);
    opacity: 0.8;
  }
}

/* ================================================================
   FIXED HEADER
================================================================ */
header {
  background: var(--navy);
  height: var(--header-h);
  padding: 0 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
  box-shadow:
    0 2px 5px rgba(0, 0, 0, 0.16),
    0 2px 10px rgba(0, 0, 0, 0.12);
  transition: all ease 0.5s;
  -webkit-transition: all ease 0.5s;
}
/* header.header-hide {
  transform: translateY(-100%);
  -webkit-transform: translateY(-100%);
} */
header h1 {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0;
  color: rgba(255, 255, 255, 0.85);
}
header::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 56px;
  height: 2px;
  background: var(--teal);
  border-radius: 2px;
}

main {
  padding-top: 0px;
  /* padding-top: var(--header-h); */
}

/* ================================================================
   BANNER VIDEO — SCROLL-OVER (REFERENCE PATTERN)

   This exactly mirrors how the reference case study works:
   - .banner-video is a normal block div, height: 100vh
   - padding-top offsets for the fixed header
   - The video inside is made POSITION:FIXED so it locks in place
   - As you scroll, cypher-section slides over it (z-index + margin)

   VIDEO FIX:
   - Native <video> with autoplay/muted/loop — NO mediaelement needed
   - object-fit:cover fills without black bars
   - We force visibility with explicit width/height on the video element
================================================================ */
.banner-video {
  width: 100%;
  height: 80vh;
  padding-top: var(--header-h);
  overflow: hidden;
  background: var(--navy);
  position: relative;
  padding-top: 0px;
}

/* The video itself is fixed — this is the scroll-over trick */

/* VIDEO WRAPPER — the scrollable area */
.banner-video-wrapper {
  position: relative;
  width: 100%;
  /* height: 94vh; */
  height: auto;
  max-height: 94vh;
  margin-top: var(--header-h);
  /* padding-top: var(--header-h); */
}

.banner-image-banner {
  width: 100%;
  height: auto;
  max-height: 94vh;
  position: relative;
}

.banner-image-banner .result-slide .banner-image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* THE VIDEO ITSELF — stays fixed behind everything */
.banner-video {
  position: fixed;
  top: var(--header-h);
  left: 0;
  width: 100%;
  height: calc(100vh - var(--header-h));
  z-index: 1;
  overflow: hidden;
  background: var(--navy);
}

.banner-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.banner-video #banner-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.banner-side-banner {
  margin: 20px 0;
  border-radius: 10px;
  overflow: hidden;
  /* box-shadow: 0 3px 14px rgba(0, 0, 0, 0.07); */
}
.banner-side-banner img {
  width: 100%;
  height: auto;
  display: block;
}
/* .banner-side-slider {
  position: relative;
  overflow: hidden;
  
}
.banner-side-slider img {
  width: 100%;
  height: auto;
  transition: transform 0.35s ease;

  
} */

/* REPLACE WITH: */
.banner-side-slider {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: auto; /* fills the wrapper's calc(94vh - header) */
}
.banner-side-slider .slick-list,
.banner-side-slider .slick-track {
  height: 100% !important;
}
.banner-side-slider .slick-slide {
  height: 100% !important;
  overflow: hidden;
}
.banner-side-slider .slick-slide > div {
  height: 100%;
}
.banner-side-slider .slick-slide img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
  transition: none;
  transform: none !important; /* kills hvr-shrink on banner */
}

/* Mobile: natural image ratio, no forced vh height */
@media screen and (max-width: 767px) {
  .banner-video-wrapper {
    height: auto;
    margin-top: var(--header-h);
  }
  .banner-side-slider {
    height: auto;
  }
  .banner-side-slider .slick-list,
  .banner-side-slider .slick-track {
    height: auto !important;
  }
  .banner-side-slider .slick-slide {
    height: auto !important;
  }
  .banner-side-slider .slick-slide img {
    height: auto;
    max-height: 70vw; /* portrait phones: cap at a sensible ratio */
    object-fit: cover;
  }
}

/* PLAY BUTTON — centered in the video */
.play-button-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
  opacity: 1; /* ADD THIS */
  transition: opacity 0.3s ease;
}

.play-btn-circle {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: rgba(0, 180, 160, 0.9); /* Teal with transparency */
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  box-shadow: 0 6px 20px rgba(0, 180, 160, 0.4);
}

.play-btn-circle:hover {
  background: rgba(0, 180, 160, 1);
  transform: scale(1.1);
  box-shadow: 0 10px 30px rgba(0, 180, 160, 0.6);
}

.play-icon {
  color: white;
  font-size: 32px;
  margin-left: 4px; /* Optical center adjustment for play icon */
  display: block;
}

.play-button-overlay.hidden {
  opacity: 0;
  pointer-events: none;
}

/* Hide any mediaelement controls that may wrap our video */
.banner-video .mejs__controls {
  display: none !important;
}
.banner-video .mejs__container {
  height: 100% !important;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 0;
}

/* ================================================================
   CONTENT SECTIONS — slide over the fixed video
   ENVELOPE NOTCH SHAPE (from reference — the original polygon)
================================================================ */
.cypher-section,
.cypher-section-next {
  position: relative;
  z-index: 10; /* above the fixed video */
  padding: var(--section-pad) 0;
}

.cypher-section {
  background: var(--white);
}
.cypher-section-next {
  background: var(--mint);
}

/* FIRST section: pulled up with negative margin so it overlaps
   the bottom of the video. The clip-path creates the envelope notch
   at the TOP — same as the reference code's cypher-section shape. */
.first-section {
  margin-top: -24px;
  padding-top: calc(23px + var(--section-pad));

  /* THE ENVELOPE NOTCH — exactly from the reference bundle.css:
     Top edge cuts in with two diagonal tabs, like a letter envelope flap.
     This is the shape you want, not a rounded curve. */
  clip-path: polygon(
    0 95%,
    3% 100%,
    100% 100%,
    100% 23px,
    53% 23px,
    52% 0,
    12% 0,
    11% 23px,
    0 23px
  );
  -webkit-clip-path: polygon(
    0 95%,
    3% 100%,
    100% 100%,
    100% 23px,
    53% 23px,
    52% 0,
    12% 0,
    11% 23px,
    0 23px
  );
}

/* First section — dark navy like Rochem hero */
.first-section {
  background: var(--navy);
  color: var(--white);
}

/* Make headings and paragraphs readable on dark bg */
.first-section h3,
.first-section p,
.first-section span,
.first-section ul li {
  color: var(--white) !important;
}

.first-section ul {
  margin-bottom: 20px;
}

.first-section strong {
  color: var(--teal) !important;
}

/* Subsequent sections use a simpler overlap */
.cypher-section-next {
  margin-top: -24px;
  padding-top: calc(3% + 24px);
}

/* ================================================================
   CONTAINER
================================================================ */
.container {
  width: 88%;
  max-width: 1160px;
  margin: 0 auto;
}

/* ================================================================
   SECTION TITLES
================================================================ */
.section-title {
  margin-bottom: 36px;
}
.section-title h3 {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.8vw, 30px);
  font-weight: 700;
  color: var(--navy);
  display: inline-block;
  position: relative;
}
.section-title h3::after {
  content: "";
  display: block;
  margin-top: 9px;
  height: 3px;
  width: 44px;
  background: var(--teal);
  border-radius: 2px;
}
.orange-border {
  border-left: 3px solid var(--orange) !important;
  padding-left: 20px !important;
}
.orange-border h3::after {
  display: none;
}

/* ================================================================
   TYPOGRAPHY
================================================================ */
.paragraph {
  line-height: 1.85;
}
.paragraph p {
  /* font-size: 17px;
  margin-bottom: 16px;
  color: var(--text-mid); */

  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.9;
  margin-bottom: 20px;
  color: var(--text-mid);
}
.paragraph h4 {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  color: var(--navy);
  margin: 24px 0 10px;
}
.paragraph h5 {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--navy);
  margin: 16px 0 8px;
}
.paragraph strong {
  font-weight: 600;
  color: var(--navy);
}

.lists {
  list-style: none;
  padding-left: 0;
  margin: 0;
}
.lists li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 10px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-mid);
}
.lists li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 7px;
  height: 7px;
  background: var(--teal);
  border-radius: 50%;
}
.lists li strong {
  color: var(--navy);
  font-weight: 600;
}

.nested-heading {
  display: block;
}

/* Nested list inside a list item */
.lists--nested {
  margin-top: 8px;
  padding-left: 16px;
}
.lists--nested li {
  font-size: 15px;
  margin-bottom: 6px;
  /* color: var(--text-muted); */
  /* softer tone — secondary info */
}
.lists--nested li::before {
  width: 5px;
  height: 5px;
  background: var(--teal);
  opacity: 0.6;
  top: 10px;
}

/* ================================================================
   CARDS
================================================================ */
.card {
  background: var(--white);
  padding: 30px 26px;
  margin-bottom: 22px;
  border-radius: 12px;
  border: 1px solid var(--border);
  transition:
    box-shadow 0.25s ease,
    transform 0.25s ease;
}
.card:hover {
  box-shadow: 0 8px 30px rgba(0, 180, 160, 0.1);
  transform: translateY(-2px);
}
.card.white-bg {
  background: var(--white);
  box-shadow: 0 2px 10px rgba(11, 30, 45, 0.05);
}
.mb-5 {
  margin-bottom: 40px !important;
}
.mt-5 {
  margin-top: 40px !important;
}

/* ================================================================
   UTILITY CLASSES
================================================================ */
.light-green-bg {
  background-color: var(--mint) !important;
  color: var(--text-dark) !important;
}
.white-bg {
  background-color: var(--white) !important;
  color: var(--text-dark) !important;
}

.green-bg {
  background-color: var(--teal) !important;
  color: var(--navy) !important;
  display: inline-block;
  padding: 4px 18px;
  border-radius: 5px;
  font-family: var(--font-display);
  font-weight: 700;
}

.white-text {
  color: var(--white) !important;
}

/* ================================================================
   MEDIA PLACEHOLDERS
================================================================ */
.media-placeholder {
  background: linear-gradient(135deg, #f0f7f7 0%, #e4f1ef 100%);
  border: 2px dashed var(--border);
  border-radius: 10px;
  padding: 40px 20px;
  text-align: center;
  min-height: 280px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: var(--text-muted);
  font-size: 14px;
  transition: border-color 0.3s ease;
}
.media-placeholder:hover {
  border-color: var(--teal);
}
.media-placeholder img {
  width: 100%;
  height: auto;
  border-radius: 6px;
  max-height: 380px;
  object-fit: cover;
}
.media-placeholder p {
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--text-muted);
  font-style: italic;
}

/* ================================================================
   INLINE VIDEO (cards, sections — not the fixed banner)
================================================================ */
.inline-video-wrap {
  position: relative;
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
  background: var(--navy);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.15);
}
.inline-video-wrap video {
  width: 100%;
  height: auto;
  display: block;
}
.inline-play-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
  opacity: 1;
  transition: opacity 0.3s ease;
}
.inline-play-overlay.hidden {
  opacity: 0;
  pointer-events: none;
}

/* ================================================================
   SIDE BANNERS / SLIDERS
================================================================ */
.side-banner {
  margin: 20px 0;
  border-radius: 10px;
  overflow: hidden;
  /* box-shadow: 0 3px 14px rgba(0, 0, 0, 0.07); */
}
.side-banner img {
  width: 100%;
  height: auto;
  display: block;
}
.side-slider {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
}
.side-slider img {
  width: 100%;
  height: auto;
  transition: transform 0.35s ease;

  padding: 0.8rem;
}
.side-slider:hover img {
  transform: scale(1.02);
}

/* ================================================================
   WEBSITE OPERATION / FIGURES
================================================================ */
.website-operation {
  position: relative;
  margin: 24px 0;
  border-radius: 10px;
  overflow: hidden;
}
.website-operation figure {
  margin: 0;
  padding: 0;
}
.figure-img {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
}
.figure-img img {
  width: 100%;
  height: auto;
  display: block;
}

.desktop-video,
.mobile-video {
  width: 100%;
  margin: 20px 0;
  border-radius: 10px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.15);
}
.desktop-video video,
.mobile-video video {
  width: 100%;
  height: auto;
  display: block;
}

/* ================================================================
   CTA BUTTON
================================================================ */
.view-website {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--teal);
  color: var(--navy);
  padding: 13px 32px;
  border-radius: 6px;
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: 0.07em;
  margin-top: 22px;
  transition:
    background 0.25s,
    box-shadow 0.25s,
    transform 0.2s;
  box-shadow: 0 4px 14px rgba(0, 180, 160, 0.3);
}
.view-website:hover {
  background: var(--teal-dark);
  color: var(--white);
  box-shadow: 0 8px 24px rgba(0, 125, 110, 0.4);
  transform: translateY(-2px);
}

/* ================================================================
   SOCIAL SECTION
================================================================ */
.social-section {
  padding-bottom: var(--section-pad);
}

.social-slider-wrapper {
  position: relative;
  /* padding: 0 50px; */
}

/* ================================================================
   PIC CAROUSEL — Slick-powered
================================================================ */
.pic-carousel {
  /* Slick will take over layout; hide overflow until initialized */
  overflow: hidden;
}

.pic-carousel .video-item {
  padding: 0 8px;
}

.video-item {
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  transition:
    box-shadow 0.25s,
    transform 0.25s;
}
.video-item img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}
.video-item:hover {
  box-shadow: 0 8px 24px rgba(0, 180, 160, 0.22);
  transform: translateY(-2px);
}

/* Social slider custom arrow buttons */
.social-slider-wrapper .slick-prev,
.social-slider-wrapper .slick-next {
  width: 42px;
  height: 42px;
  background: var(--white) !important;
  border: 1.5px solid var(--border);
  border-radius: 50%;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  z-index: 10;
  transition:
    background 0.2s,
    box-shadow 0.2s;
}
.social-slider-wrapper .slick-prev {
  left: 4px;
}
.social-slider-wrapper .slick-next {
  right: 4px;
}
.social-slider-wrapper .slick-prev:hover,
.social-slider-wrapper .slick-next:hover {
  background: var(--teal) !important;
  border-color: var(--teal);
  box-shadow: 0 4px 14px rgba(0, 180, 160, 0.3);
}
.social-slider-wrapper .slick-prev:hover::before,
.social-slider-wrapper .slick-next:hover::before {
  color: var(--white);
}
.social-slider-wrapper .slick-prev::before {
  content: "\f104";
  font-family: "FontAwesome";
  color: var(--teal);
  font-size: 20px;
  opacity: 1;
}
.social-slider-wrapper .slick-next::before {
  content: "\f105";
  font-family: "FontAwesome";
  color: var(--teal);
  font-size: 20px;
  opacity: 1;
}

@media screen and (max-width: 767px) {
  .social-slider-wrapper {
    padding: 0 36px;
  }
}

/* ================================================================
   SLICK SLIDER OVERRIDES
================================================================ */
.slick-next,
.slick-prev {
  height: 46px;
  width: 46px;
  background: rgba(255, 255, 255, 0.92) !important;
  z-index: 2;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.slick-next:before,
.slick-prev:before {
  font-family: "FontAwesome";
  color: var(--teal);
  font-size: 24px;
  opacity: 1;
}
.slick-prev:before {
  content: "\f104";
}
.slick-next:before {
  content: "\f105";
}
.slick-dots li button:before {
  font-size: 10px;
  color: var(--teal);
}
.slick-dots li.slick-active button:before {
  color: var(--teal-dark);
}

/* MediaElement */
.mejs__controls {
  display: none !important;
}
.mejs__overlay-button {
  background-color: var(--teal) !important;
  border-radius: 50%;
}
.mejs__container {
  background: #000 !important;
}

/* two images in comunication */
/* Slider replacement: side-by-side static grid */
.static-image-grid {
  display: flex;
  gap: 15px;
  padding: 15px;
  overflow-x: auto;
  border-radius: 8px;
}

.static-image-grid > div {
  flex: 1;
  min-width: 0; /* Allows flex items to shrink properly */
}

.static-image-grid .image-card {
  overflow: hidden;
  border-radius: 8px;
  background: #f5f7f8; /* optional placeholder bg */
}

.static-image-grid img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  padding: 0; /* Resets the old .side-slider padding */
}

.color-selection {
  border-radius: 0;
  display: flex;
  height: 100%;
  align-items: center;
}

.card .color-selection {
  justify-content: center;
}

.card .color-selection .hvr-shrink {
  flex: 0 0 auto;
  max-width: 100%;
}
.card .color-selection .hvr-shrink img {
  width: 100%;
  height: 200px;
  object-fit: contain;
  object-position: center;
}

.group-image {
  display: flex;
  gap: 20px;
  justify-content: space-between;
  /* align-items: center; */
  width: 100%;
  height: 100%;
}

.group-image .hvr-shrink {
  width: 100%;
  height: 100%;
}

.group-image .hvr-shrink img {
  object-fit: contain;
  object-position: center;
  width: 100%;
}

/* Force equal width on colour logic images */
.card .color-logic .hvr-shrink img {
  width: 100%;
  height: 200px;
  object-fit: contain;
  object-position: center;
}
/* Optional: Force exactly 3 columns on desktop if container is wide enough */
@media (max-width: 767px) {
  /* .static-image-grid {
    grid-template-columns: repeat(3, 1fr);
  } */

  .static-image-grid {
    flex-direction: column;
  }

  .static-image-grid > div {
    width: 100%;
  }

  .card .color-selection .hvr-shrink img,
  .card .color-logic .hvr-shrink img {
    width: 100%;
    height: 100%;
  }
}

/* ================================================================
   RESPONSIVE
================================================================ */
/* @media screen and (min-width: 1200px) {
  header.header-hide {
    transform: translateY(-100%);
    -webkit-transform: translateY(-100%);
  }
} */

@media screen and (max-width: 1199px) {
  :root {
    --header-h: 52px;
    --section-pad: 50px;
  }
  header h1 {
    font-size: 12px;
  }

  .banner-image-banner {
    height: auto;
    padding-top: 0;
    /* margin-bottom: -16px; */
    padding-bottom: 0px;
  }

  /* On tablet the fixed-video trick still works,
     just smaller clip notch */
  .first-section {
    clip-path: polygon(
      0 97%,
      7% 100%,
      100% 100%,
      100% 12px,
      53% 12px,
      49% 0,
      12% 0,
      8% 12px,
      0 12px
    );
    -webkit-clip-path: polygon(
      0 97%,
      7% 100%,
      100% 100%,
      100% 12px,
      53% 12px,
      49% 0,
      12% 0,
      8% 12px,
      0 12px
    );
    padding-top: calc(12px + var(--section-pad));
    margin-top: -13px;
  }
}

@media screen and (max-width: 767px) {
  :root {
    --header-h: 50px;
    --section-pad: 40px;
  }

  .banner-video-wrapper {
    height: auto;
    padding-top: 0;
    margin-bottom: -16px;
    padding-bottom: 0px;
  }

  .banner-image-banner {
    height: auto;
    padding-top: 0;
    margin-bottom: -16px;
    padding-bottom: 0px;
  }

  .banner-image-banner .result-slide .banner-image {
    width: 100%;
    height: 100%;

    object-fit: cover;
  }

  /* On mobile: un-fix the video, flow normally */
  .banner-video {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    height: 56vw;
    min-height: 220px;
    padding-top: 0;
  }
  .banner-video video {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    height: 100%;
  }

  .first-section {
    margin-top: 0;
    clip-path: polygon(
      0 98%,
      7% 100%,
      100% 100%,
      100% 12px,
      53% 12px,
      49% 0,
      12% 0,
      8% 12px,
      0 12px
    );
    -webkit-clip-path: polygon(
      0 98%,
      7% 100%,
      100% 100%,
      100% 12px,
      53% 12px,
      49% 0,
      12% 0,
      8% 12px,
      0 12px
    );
    padding-top: calc(12px + var(--section-pad));
  }

  .media-placeholder {
    min-height: 180px;
    padding: 20px 12px;
  }
  .card {
    padding: 22px 16px;
  }
  .view-website {
    width: 100%;
    justify-content: center;
    padding: 15px 20px;
  }
  .section-title h3 {
    font-size: 19px;
  }
  .paragraph p,
  .lists li {
    font-size: 15px;
  }

  .play-btn-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
  }

  .play-icon {
    color: white;
    font-size: 18px;
    margin-left: 4px;
    display: block;
  }
}

@media screen and (max-width: 500px) {
  .first-section {
    clip-path: polygon(
      0 98%,
      7% 100%,
      100% 100%,
      100% 12px,
      53% 12px,
      49% 0,
      12% 0,
      8% 12px,
      0 12px
    );
    -webkit-clip-path: polygon(
      0 98%,
      7% 100%,
      100% 100%,
      100% 12px,
      53% 12px,
      49% 0,
      12% 0,
      8% 12px,
      0 12px
    );
  }
}

/* 1. Stabilize the base state */
.side-slider .hvr-shrink {
  display: inline-block;
  vertical-align: middle;
  /* Use 'backface-visibility' to stop the browser from "shaking" the image pixels */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  /* Force the element onto its own hardware-accelerated layer */
  transform: translateZ(0);
  /* Warn the browser that a transform is coming */
  will-change: transform;
  /* Ensure the transition is smooth */
  transition: transform 0.3s ease;
}

/* 2. The Fixed Hover State */
.side-slider .hvr-shrink:hover {
  /* Combined transform: scale PLUS the Z-axis fix to maintain 3D rendering */
  transform: scale(0.9) translateZ(0) !important;
}

/* 3. Prevent the image inside from causing its own flicker */
.hvr-shrink img {
  pointer-events: none; /* Mouse interacts with the div, not the raw image */
  -webkit-user-drag: none;
}

/* Banner carousel: never shrink on hover */
.banner-video-wrapper .hvr-shrink,
.banner-video-wrapper .hvr-shrink:hover,
.banner-side-slider .hvr-shrink,
.banner-side-slider .hvr-shrink:hover {
  transform: none !important;
  transition: none !important;
}

.banner-side-slider img {
  transform: none !important;
}

/* Video thumb wrapper */
.video-thumb-wrap {
  position: relative;
  cursor: pointer;
}
.video-thumb-wrap img {
  width: 100%;
  display: block;
}
.play-thumb-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 48px;
  height: 48px;
  background: rgba(0, 180, 160, 0.88);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 18px;
  padding-left: 4px;
  transition:
    background 0.2s,
    transform 0.2s;
  pointer-events: none;
}
.video-thumb-wrap:hover .play-thumb-btn {
  background: #00b4a0;
  transform: translate(-50%, -50%) scale(1.12);
}

/* Modal overlay */
/* 1. Modal Overlay Background */
.social-modal-overlay {
  display: none; /* Controlled by your JS .addClass('active') */
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  z-index: 99999;
  align-items: center;
  justify-content: center;
}

.social-modal-overlay.active {
  display: flex;
}

/* 2. The Inner Container (The Black Box) */
.social-modal-inner {
  position: relative;
  background: #000;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 0 50px rgba(0, 0, 0, 1);
  max-width: 90vw;
  display: flex;
  justify-content: center;
  align-items: center;

  padding-bottom: 0;
  background: #000;
}

/* 3. The Video (Ensuring it fits like your screenshot) */
#socialModalVideo {
  max-height: 80vh;
  width: auto;
  display: block;
  outline: none;
}

/* 4. Central Play Button Styling */
.modal-video-controls {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
  pointer-events: none; /* Important: clicks go through to the video */
  opacity: 0; /* Hidden by default when playing */
  transition: opacity 0.3s ease;
  pointer-events: none;
}

/* Show the central button only when the video is paused */
#socialModalVideo:paused + .modal-video-controls,
#socialModalVideo[paused] + .modal-video-controls {
  opacity: 1;
}

/* Reuse your existing play-btn-circle style but scale it for the modal */
.modal-video-controls .play-btn-circle {
  width: 80px;
  height: 80px;
  background: var(--teal);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}

/* 5. Close Button (Top Right "X") */
.social-modal-close {
  position: absolute;
  top: 15px;
  right: 15px;
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: #fff;
  font-size: 24px;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 10;
  transition: background 0.3s;
}

.social-modal-close:hover {
  background: var(--teal);
}

/* Play/Pause button for modal */
.modal-play-pause {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  pointer-events: auto;
  opacity: 1;
  transition: opacity 0.3s ease;
}

.modal-play-pause.is-playing {
  opacity: 0;
}

.social-modal-inner:hover .modal-play-pause.is-playing {
  opacity: 1; /* reappears on hover */
}

.modal-pp-btn {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(0, 180, 160, 0.88);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background 0.2s,
    transform 0.2s;
}
.modal-pp-btn:hover {
  background: var(--teal);
  transform: scale(1.1);
}
.modal-pp-icon {
  color: #fff;
  font-size: 26px;
  margin-left: 0px;
  display: block;
  line-height: 1;
  pointer-events: none;
}

.modal-progress-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: rgba(255, 255, 255, 0.25);
  z-index: 20;
  cursor: pointer;
}
.modal-progress-fill {
  height: 100%;
  width: 0%;
  background: var(--teal);
  transition: width 0.3s linear;
  border-radius: 0 2px 2px 0;
}