:root {
  --navy: #1B1B4D;
  --text-dark: #17172B;
  --text-muted: #52526B;
  --bg: #FFFFFF;

  --primary: #3B5BDB;
  --secondary: #FF6B6B;

  --max-width: 1240px;
  --hero-height: 855px;
  --nav-height: 88px;

  --font-body: 'Hind', sans-serif;
}

* { box-sizing: border-box; }
/* 
html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font-body);
  color: var(--text-dark);
  background: var(--bg);
} */


html, body {
  margin: 0;
  /* border:2px solid red; */
  /* padding: 0; */
  font-family: var(--font-body);
  color: var(--text-dark);
  background: var(--bg);
  overflow-x: hidden;
  width: 100%;
  paddind-left:100px !important;
  paddind-right:100px !important;
  /* NO height:100vh / height:100% here — that was capping the whole
     page to exactly one screen's height (932px in your case),
     making document.documentElement.scrollHeight report 932px no
     matter how much content the page actually had. That's why
     window.scrollTo(), scrollIntoView(), and every nav link were
     silently doing nothing — there was nothing beyond the first
     screen for the browser to scroll to. body must be allowed to
     grow to its natural content height for normal page scrolling
     to work at all. */
}

/* 
html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font-body);
  color: var(--text-dark);
  background: var(--bg);
  overflow-x: hidden;
  width: 100%;
} */

a { text-decoration: none; color: inherit; }

/* ---------- Fixed Navbar: glass effect, always visible ---------- */

html{
  scroll-behavior: smooth;
}

#storySection,
#machineSeries,
#ctaBanner,
#processSection{
  scroll-margin-top: calc(var(--nav-height) + 24px);
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
}

/* =====================================================================
   NAVBAR — responsive: mobile hamburger + slide-in panel
   ===================================================================== */
.navbar-actions{
  display:flex;
  align-items:center;
  gap:14px;
}

.nav-toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:5px;
  width:40px;
  height:40px;
  border:none;
  background:transparent;
  cursor:pointer;
  padding:0;
  flex-shrink:0;
  position:relative;
  z-index:210;
}

.nav-toggle-bar{
  display:block;
  width:24px;
  height:2.4px;
  background:var(--navy);
  border-radius:2px;
  transition:transform .35s cubic-bezier(.4,0,.2,1), opacity .25s ease;
}

.nav-toggle.is-active .nav-toggle-bar:nth-child(1){ transform:translateY(7.4px) rotate(45deg); }
.nav-toggle.is-active .nav-toggle-bar:nth-child(2){ opacity:0; }
.nav-toggle.is-active .nav-toggle-bar:nth-child(3){ transform:translateY(-7.4px) rotate(-45deg); }

.nav-backdrop{
  position:fixed;
  inset:0;
  background:rgba(15,15,40,0.45);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  opacity:0;
  visibility:hidden;
  transition:opacity .35s ease, visibility .35s ease;
  z-index:150;
}
.nav-backdrop.is-open{
  opacity:1;
  visibility:visible;
}

/* Laptop — tighten side padding slightly, design unchanged */
@media (max-width:1240px){
  .navbar-inner{ padding:0 40px; }
}

/* Tablet & below — hamburger takes over */
/* -----------------------------------------------------------------
   Replaces the earlier diagnostic patch. That one forced the menu
   permanently visible (breaking the toggle) — this version restores
   the correct hidden-by-default / slide-in-on-click behavior, while
   using !important only on the properties that were apparently being
   silently overridden (position, transform, background) rather than
   forcing visibility outright.
   ----------------------------------------------------------------- */
@media (max-width: 1024px) {
  #navToggle.nav-toggle {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  #navToggle.nav-toggle .nav-toggle-bar {
    display: block !important;
    visibility: visible !important;
    background: var(--navy) !important;
  }

  #navLinks.nav-links {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    height: 100vh !important;
    width: min(78vw, 320px) !important;
    background: #FBFCFF !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    padding: 100px 28px 40px !important;
    transform: translateX(100%) !important;  /* hidden off-screen by default */
    transition: transform 0.45s cubic-bezier(.22,1,.36,1) !important;
    box-shadow: -8px 0 32px rgba(20,20,58,0.12) !important;
    z-index: 200 !important;
    overflow-y: auto !important;
  }

  #navLinks.nav-links.is-open {
    transform: translateX(0) !important;   /* slides in only when JS adds .is-open */
  }

  #navLinks.nav-links .nav-link {
    width: 100% !important;
    padding: 14px 18px !important;
    background: #F2F4FB !important;
    color: var(--text-dark) !important;
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

    #navLinks.nav-links .nav-link:hover span,
    #navLinks.nav-links .nav-link:focus-visible span {
      color: #ffffff !important;
    }
  /* #navLinks.nav-links .nav-link span {
    color: inherit !important;
  } */
}

@media (min-width:1025px){
  .nav-backdrop{ display:none; }
}

/* Mobile — shrink navbar height + logo subtitle (kept, not hidden) */
@media (max-width:640px){
  :root{ --nav-height:72px; }
  .navbar-inner{ height:64px; padding:0 16px; }
  .logo-text{ font-size:13px; }
  .logo-text small{ font-size:6.5px; }
  .navbar-actions{ gap:10px; }
  .btns{ padding:7px 12px; font-size:13.5px; }

  #navToggle.nav-toggle{ display:none !important; }
}

@media (max-width:380px){
  .logo-text small{ display:none; } /* only at extreme widths, subtitle still shows down to 380px */
}

/* 
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom:0;
  width: 100%;
  z-index: 100;
  height: var(--nav-height);
  display: flex;
  align-items: center;
  
} */



.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  /* was z-index:100 — lower than .nav-backdrop's z-index:150, which
     is a SIBLING of .navbar (not nested inside it). Since .navbar is
     position:fixed with its own z-index, it forms a stacking context
     for everything inside it — including .nav-links, even though
     .nav-links has its own higher z-index:200. A descendant can never
     paint above an outside element if its stacking-context ancestor
     is already behind that element. Raising .navbar's z-index above
     150 lets the whole subtree (including .nav-links) paint on top
     of the backdrop, as intended. */
  z-index: 250;
  height: var(--nav-height);
  display: flex;
  align-items: center;
}
.navbar-spacer {
  /* height: 50px; */
  width: 100%;
  /* border:2px solid green; */
}

/* .navbar-inner {
  width: 100%;
  max-width: var(--max-width);
  height: 79px;
  margin: 0 auto;
  padding: 0 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
    border-radius: 100px;
  background:  #FBFCFF;

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background 0.35s ease, backdrop-filter 0.35s ease,
              box-shadow 0.35s ease, border-radius 0.35s ease,
              margin 0.35s ease, max-width 0.35s ease;
}

.navbar.scrolled .navbar-inner {
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 2px 16px rgba(20, 20, 58, 0.08);
  border-radius: 100px;
  margin-top: 12px;
} */



.navbar-inner {
  width: 100%;
  max-width: var(--max-width);
  height: 79px;
  margin: 0 auto;
  /* padding: 0 60px; */
  padding-left:16px;
    padding-right:16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;      /* positioning context for the ::before blur layer */
  isolation: isolate;      /* new stacking context WITHOUT the fixed-position containing-block side effect that backdrop-filter causes */
  border-radius: 100px;
  background: transparent; /* the visible fill now lives on ::before instead */
  transition: margin 0.35s ease, max-width 0.35s ease;
}

/* -----------------------------------------------------------------
   The glass/blur fill used to live directly on .navbar-inner via
   `backdrop-filter`. Any element with backdrop-filter (or transform,
   or filter) becomes a "containing block" for position:fixed
   descendants — so .nav-links, nested inside .navbar-inner, was
   being trapped inside this small 79px pill instead of covering the
   full viewport when opened on mobile. Moving the blur to a
   pseudo-element behind the content keeps the exact same visual
   effect while leaving .navbar-inner itself filter-free, so
   .nav-links can position:fixed against the real viewport again.
   ----------------------------------------------------------------- */
.navbar-inner::before {
  content: "";
  
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: #FBFCFF;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background 0.35s ease, backdrop-filter 0.35s ease,
              box-shadow 0.35s ease;
}

.navbar.scrolled .navbar-inner {
  margin-top: 12px;
    padding-left:16px;
    padding-right:16px;

}

.navbar.scrolled .navbar-inner::before {
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 2px 16px rgba(20, 20, 58, 0.08);
}

.logo { display: flex; align-items: center; gap: 10px; }
.logo-mark { display: flex; }
.logo-image {
  display: block;
  width: auto;
  height: 42px;
  max-width: 180px;
  object-fit: contain;
}

.logo-text {
  display: flex;
  flex-direction: column;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.1;
  letter-spacing: 0.5px;
  color: var(--navy);
}

.logo-text small {
  font-weight: 500;
  font-size: 8px;
  letter-spacing: 0.5px;
  color: var(--text-muted);
}

.nav-links { display: flex; align-items: center; gap: 8px; }

/* .nav-link {
  position: relative;
  padding: 8px 18px;
  font-size: 16px;
  font-weight: 500;
  color: var(--text-dark);
  border-radius: 999px;
  overflow: hidden;
  isolation: isolate;
  background:#fff;
  /* border:2px solid red; 
}



.nav-link:hover{
    border: 1px solid rgb(2, 2, 75);

}

.nav-link::before {
  content: "";
  position: absolute;
  left: -150%;
  top: 0;
  width: 150%;
  height: 90px;
  background: var(--navy);
  border-radius: 50%;
  transition: 0.6s ease;
  z-index: -1;
}

.nav-link span { position: relative; transition: color 0.35s ease; }

.nav-link:hover::before { left: 0; }
.nav-link:hover span { color: #fff;} */

/* =========================================================
   NAVBAR LINKS — CORRECT LIQUID-FILL COLOURS
   ========================================================= */

.nav-link {
  --nav-link-background: #ffffff;
  --nav-link-text: #17172b;
  --nav-link-fill: #3A46A8;
  --nav-link-hover-text: #ffffff;

  position: relative;
  padding: 8px 18px;

  border: 1px solid transparent;
  border-radius: 999px;

  background: var(--nav-link-background);
  color: var(--nav-link-text);

  font-size: 16px;
  font-weight: 500;

  overflow: hidden;
  isolation: isolate;

  transition:
    border-color 0.35s ease,
    color 0.35s ease;
}

/* Left-to-right navy liquid fill */
.nav-link::before {
  content: "";

  position: absolute;
  z-index: -1;

  top: 0;
  left: -150%;

  width: 150%;
  height: 90px;

  background: var(--nav-link-fill);
  border-radius: 50%;

  transition: left 0.6s ease;

  pointer-events: none;
}

.nav-link span {
  position: relative;
  z-index: 1;

  color: var(--nav-link-text);

  transition: color 0.35s ease;

  pointer-events: none;
}

.nav-link:hover,
.nav-link:focus-visible {
  border-color: var(--nav-link-fill);
}

.nav-link:hover::before,
.nav-link:focus-visible::before {
  left: 0;
}

.nav-link:hover span,
.nav-link:focus-visible span {
  color: var(--nav-link-hover-text);
}

.nav-link:focus-visible {
  outline: 3px solid rgba(27, 27, 77, 0.25);
  outline-offset: 3px;
}

/* =====================================================
   LIQUID WAVE BUTTONS
   ===================================================== */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  font-size: 15px;
  font-weight: 600;
  border-radius: 8px;
  overflow: hidden;
  isolation: isolate;
  cursor: pointer;
  background: transparent;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.btn:hover {
  transform: scale(1.03);
  box-shadow: 0 10px 24px rgba(254, 254, 255, 0.18);
}

.btn span {
  position: relative;
  z-index: 2;
  transition: color 0.3s ease;
}

.btn-liquid::before {
  content: "";
  position: absolute;
  left: -150%;
  top: 0;
  width: 150%;
  height: 85px;
  border-radius: 50%;
  transition: 0.6s ease;
  z-index: 1;
}

.btn-liquid:hover::before {
  left: 0;
}



/* 

.btns {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  font-size: 15px;
  font-weight: 600;
  border-radius: 100px;
  overflow: hidden;
  isolation: isolate;
  cursor: pointer;
  background: transparent;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}


.btns:hover {
  transform: scale(1.03);
  box-shadow: 0 10px 24px rgba(254, 254, 255, 0.18);
}

.btns span {
  position: relative;
  z-index: 2;
  transition: color 0.3s ease;
}

.btns-liquid::before {
  content: "";
  position: absolute;
  left: -150%;
  top: 0;
  width: 150%;
  height: 85px;
  border-radius: 50%;
  transition: 0.6s ease;
  z-index: 1;
}

.btns-liquid:hover::before {
  left: 0;
} */






.btns {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  font-size: 15px;
  font-weight: 600;
  border-radius: 100px;
  overflow: hidden;
  isolation: isolate;
  cursor: pointer;
  background: transparent;
  border: 2px solid #fff;
  color: #fff;
  transition: transform 0.3s ease, box-shadow 0.3s ease, color 0.4s ease;
}

.btns:hover {
  transform: scale(1.03);
  box-shadow: 0 10px 24px rgba(254, 254, 255, 0.18);
  color: #000; /* text color flips once liquid fills */
}

.btns span {
  position: relative;
  z-index: 2;
  display: inline-block;
  transition: color 0.3s ease;

}

/* underline under the text */
.btns span::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0px;
  width: 100%;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s ease;
}

.btns:hover span::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* the liquid wave blob */
.btns-liquid::before {
  content: "";
  position: absolute;
  left: -150%;
  top: 0px;
  width: 150%;
  height: 85px;
  background: #fff;
  border-radius: 40%;
  transition: 0.6s ease;
  z-index: 1;
  animation: wave-idle 4s ease-in-out infinite;
}

.btns-liquid:hover::before {
  left: -5%;
  border-radius: 30%;
}

/* subtle idle wobble so it feels "liquid" even before hover */
@keyframes wave-idle {
  0%, 100% { border-radius: 40% 60% 55% 45%; }
  50% { border-radius: 55% 45% 40% 60%; }
}
.navbar-inner > .btn.btn-liquid {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: #3a46a8;
  color:#fff;
}
.navbar-inner > .btn.btn-liquid {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: blue;
  color:#fff;
}

.navbar-inner > .btn.btn-liquid::before {
  content: "";
  position: absolute;
  left: -150%;
  top: 0;
  width: 150%;
  height: 85px;
  border-radius: 50%;
  transition: 0.6s ease;
  z-index: 1;
}

.navbar-inner > .btn.btn-liquid:hover::before {
  left: 0;
}

.navbar-inner > .btn.btn-liquid span {
  position: relative;
  z-index: 2;
}

.btn-primary {
  border: 1.5px solid var(--primary);
  color: #fff;
  background:#3a46a8;
}
.btn-primary::before { background: #fff; }
.btn-primary:hover span { color: #3a46a8; }

.btn-secondary {
  border: 2px solid #ec1c24;
  color: #ec1c24;
}
.btn-secondary::before { background: #ec1c24; }
.btn-secondary:hover span { color: #fff; }

/* =====================================================
   HERO SECTION
   ===================================================== */
.page-wrap {
  display: flex;
  justify-content: center;
  width: 100%;
}

/* -----------------------------------------------------------------
   Locked to the 1240x855 proportions your original desktop numbers
   (620px content width, 402px description offset) were designed
   against. aspect-ratio keeps that exact relationship at ANY screen
   width — the container shrinks as one proportional unit instead of
   switching to a different (stacked) layout on smaller screens.
   ----------------------------------------------------------------- */
.hero-container {
  position: relative;
  width: 100%;
  max-width: var(--max-width);
  aspect-ratio: 1240 / 855;
  height: auto;
  margin: 0;
  overflow: hidden;
  margin-bottom: 0px;
  background: #fefefe;
}

.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  z-index: 0;
  pointer-events: none;
}

.side-label {
  position: absolute;
  top: 50%;
  font-size: 12px;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  writing-mode: vertical-rl;
  white-space: nowrap;
  z-index: 5;
}

.side-label--left { left: 12px; transform: translateY(-50%) rotate(180deg); }
.side-label--right { right: 12px; transform: translateY(-50%); }

/* -----------------------------------------------------------------
   Every value below is expressed as a proportion of the 1240px
   design width (clamp(min, Xvw, desktop-px)) or as a % of the
   container (which works natively for width, since % width is
   already relative to the parent box). Because .hero-container's
   aspect-ratio is locked, vw-based clamps stay visually correct
   relative to height too — the whole overlay scales as one unit
   instead of any piece drifting independently.
   ----------------------------------------------------------------- */
.hero-content {
  position: absolute;
  width: 50%;                 /* was 620px against a 1240px container — now proportional at any width */
  left: 0.16%;                /* was 2px against 1240px — negligible, kept proportional */
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}

.hero-title {
  margin-top: clamp(8px, 1.6vw, 20px);   /* was 20px */
  max-width: 100%;
  font-size: clamp(16px, 3.15vw, 39px);  /* was 39px */
  font-weight: 700;
  line-height: 150%;
  color: var(--text-dark);
}

.hero-title .line { display: block; }

.hero-desc {
  margin: clamp(120px, 32.42vw, 402px) 0 0;  /* was 402px — the key proportional offset */
  max-width: 80%;
  font-size: clamp(11px, 1.94vw, 24px);      /* was 24px */
  line-height: 136%;
  color: black;
}

.hero-cta {
  display: flex;
  align-items: center;
  gap: clamp(6px, 1.3vw, 16px);
  margin-top: clamp(8px, 1.3vw, 16px);
  flex-wrap: wrap;
}

/* =====================================================
   HERO CONTENT ANIMATION — pure CSS autoplay.
   Background image never animates. Text/buttons animate
   in automatically on page load; there is no dependency
   on JavaScript for initial visibility, so the hero can
   never get stuck invisible if a script elsewhere on the
   page fails to run.
   ===================================================== */
.anim-heading {
  animation: heroSlideIn 1.1s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.hero-desc.anim-heading { animation-delay: 0.2s; }

@keyframes heroSlideIn {
  from { opacity: 0; transform: translateX(-100px); }
  to { opacity: 1; transform: translateX(0); }
}

.anim-fade {
  animation: heroFadeIn 0.6s ease both;
}

.anim-fade.anim-delay-2 { animation-delay: 0.4s; }

@keyframes heroFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .anim-heading, .anim-fade { animation: none; opacity: 1; transform: none; }
  .nav-link::before, .btn-liquid::before { transition: none; }
}

/* -----------------------------------------------------------------
   No layout-restructuring breakpoints below — the overlay stays
   overlay at every size via the proportional scaling above. Only
   navbar-related rules (unrelated to hero layout) remain here.
   ----------------------------------------------------------------- */
@media (max-width: 640px) {
  .navbar-inner { padding: 0 20px; }
  .nav-links { display: none; }
}

/* =====================================================
   MOBILE-ONLY HERO LAYOUT (≤640px)
   Requested layout, different from the proportional-overlay
   approach used above 640px: heading + description overlay the
   TOP of the image only (with a readability scrim), then the two
   CTA buttons sit BELOW the image in a stacked single column —
   not overlapping the photo at all.
   ===================================================== */
/* =====================================================
   STACKED HERO LAYOUT — Tablet + Mobile (≤1024px)
   Requested layout: heading, then image, then description,
   then buttons — each in normal document flow, no overlay.
   Tablet gets 16px image side padding; phones override to 10px
   further down.
   ===================================================== */
@media (max-width: 1024px) {
  .hero-container {
    aspect-ratio: unset;
    height: auto;
    overflow: visible;
    margin-top: calc(var(--nav-height) + 16px); /* extra buffer so heading text isn't clipped by the fixed navbar */
    display: flex;
    flex-direction: column;
    padding: 28px 0;
  }

  /* .hero-content no longer wraps title/desc/cta visually — its
     children become direct flex items of .hero-container so each
     one can be reordered independently (heading, then image, then
     description, then buttons) without touching the HTML. */
  .hero-content {
    display: contents;
  }

  .hero-title {
    order: 1;
    position: static;
    margin: 0;
    padding: 0 16px;
    font-size: 28px;
    line-height: 1.3;
    color: var(--text-dark);
  }

  .hero-bg {
    order: 2;
    position: static;
    width: calc(100% - 32px);  /* 16px padding on each side */
    margin: 20px auto 0;
    height: auto;
    max-height: 380px;
    object-fit: cover;
    border-radius: 14px;
  }

  .hero-desc {
    order: 3;
    position: static;
    margin: 20px 0 0;
    padding: 0 16px;
    max-width: 100%;
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-dark);
  }

  .hero-cta {
    order: 4;
    position: static;
    flex-direction: row;
    align-items: stretch;
    gap: 14px;
    margin: 24px 0 0;
    padding: 0 16px;
  }

  .hero-cta .btn {
    flex: 1;
    text-align: center;
    font-size: 15px;
    padding: 12px 14px;
    white-space: nowrap;
  }
}

/* Phones override the tablet numbers above with smaller sizing and
   10px image padding instead of 16px */
@media (max-width: 640px) {
  .hero-container { padding: 24px 0; }

  .hero-title {
    padding: 0 20px;
    font-size: 21px;
  }

  .hero-bg {
    width: calc(100% - 20px);  /* 10px padding on each side */
    margin: 16px auto 0;
    max-height: 260px;
    border-radius: 12px;
  }

  .hero-desc {
    padding: 0 20px;
    font-size: 13.5px;
    line-height: 1.6;
  }

  .hero-cta {
    gap: 10px;
    margin: 20px 0 0;
    padding: 0 20px;
  }

  .hero-cta .btn {
    font-size: 13px;
    padding: 11px 10px;
  }
}




/* =====================================================================
   INDUSTRY SHOWCASE — reusable component
   ===================================================================== */
/* =====================================================================
   INDUSTRY SHOWCASE — reusable component
   ===================================================================== */
/* =====================================================================
   INDUSTRY SHOWCASE — reusable component
   ===================================================================== */
/* =====================================================================
   INDUSTRY SHOWCASE — reusable component
   ===================================================================== */
.industry-showcase {
  --ind-primary: #3F46B5;
  --ind-primary-dark: #2F3690;
  --ind-accent: #E63946;
  --ind-grad-start: #4F46E5;
  --ind-grad-end: #6366F1;
  --ind-text-dark: #17172B;
  --ind-text-muted: #5B5B72;
  --ind-track-bg: #E6EAF5;

  /* fluid card sizing — overridden per breakpoint below */
  --ind-card-w: 292px;
  --ind-card-h: 200px;
  --ind-card-gap: 24px;

  font-family: 'Hind', sans-serif;
  padding: 80px 0;
  background: #FFFFFF;
  overflow: hidden;

  opacity: 0;
  transform: translateY(300px);
  transition: opacity 2s cubic-bezier(0.22, 1, 0.36, 1), transform 2s cubic-bezier(0.22, 1, 0.36, 1);
}

.industry-showcase.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.industry-showcase *,
.industry-modal * { box-sizing: border-box; }

.industry-showcase__container {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 20px;
}

.industry-showcase__header {
  margin-bottom: 40px;
}

.industry-showcase__top-row {
  display: flex;
  align-items: flex-end;
  margin-bottom: 1px;
}

/* ---- Label: "Explore by Industry" ---- */
.industry-showcase__label {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  font-size: 24px;
  font-weight: 600;
  color: #000000;
  padding-bottom: 0px;
  height: 30px;
}

.industry-showcase__label-icon { flex-shrink: 0; }

.industry-showcase__label::after {
  content: "";
  position: absolute;
  left: 28px;
  margin-top: 0px;
  right: 0px;
  bottom: 0px;
  height: 1px;
  background: #2b2ea3;
}

.industry-showcase__dots {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: 4px;
}

.industry-showcase__dots i {
  width: 1px;
  height: 1px;
  background: #7a1f1f;
  display: inline-block;
  border-radius: 0;
}

/* ---- Heading row: heading — nav group ---- */
.industry-showcase__heading-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.industry-showcase__heading {
  margin: 0;
  font-size: 39px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--ind-text-dark);
  max-width: 640px;
  text-align: left;
  flex: none;
  margin-top: 16px;
  margin-bottom: 0px;
}

.industry-navigation {
  display: flex;
  gap: 12px;
  flex-shrink: 0;
}

.industry-navigation__btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: var(--ind-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.25s ease, opacity 0.25s ease, visibility 0.25s ease, transform 0.15s ease;
}

.industry-navigation__btn:hover { background: var(--ind-primary-dark); }
.industry-navigation__btn:active { transform: scale(0.92); }

.industry-navigation__btn[data-hidden="true"] {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* ---- Track / cards ---- */
.industry-showcase__track-wrap {
  overflow-x: hidden;
  overflow-y: visible;
  position: relative;
  padding-bottom: 22px;
  margin-top: 26px;
  height: calc(var(--ind-card-h) + 42px);
  touch-action: pan-y; /* allow vertical page scroll, we handle horizontal drag ourselves */
  overscroll-behavior-x: contain; /* stop a diagonal swipe from also rubber-banding the page */
  -webkit-user-select: none;
  user-select: none;
  cursor: grab;
}

.industry-showcase__track-wrap.is-dragging {
  cursor: grabbing;
  user-select: none;
}

.industry-showcase__track {
  display: flex;
  gap: var(--ind-card-gap);
  width: max-content;
  will-change: transform;
}

.industry-card {
  flex: 0 0 auto;
  width: var(--ind-card-w);
  position: relative;
  border: none;
  padding: 0;
  background: transparent;
  cursor: pointer;
  margin-top: 10px;
}

.industry-card__image-wrap {
  display: block;
  width: var(--ind-card-w);
  height: var(--ind-card-h);
  border-radius: 16px;
  overflow: hidden;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease;
  pointer-events: none; /* let drag gestures pass through to the card wrapper */
}

.industry-card:hover .industry-card__image-wrap {
  transform: translateY(-8px);
}

.industry-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.industry-card:hover .industry-card__image {
  transform: scale(1.08);
}

.industry-card__label {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 50%);
  max-width: 88%;
  padding: 10px 27px;
  background: #f5f9ff;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 500;
  color: var(--ind-text-dark);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  z-index: 2;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}

.industry-card:hover .industry-card__label {
  transform: translate(-50%, 50%) translateY(-8px);
}

.industry-progress {
  width: 100%;
  height: 2px;
  border-radius: 999px;
  background: #EC1C24;
  margin-top: 32px;
  overflow: hidden;
}

.industry-progress__fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: #2c3394;
}

/* ---- Modal ---- */
.industry-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
}

.industry-modal.is-open { display: flex; }

.industry-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  opacity: 0;
  transition: opacity 0.5s ease;
}

.industry-modal.is-open .industry-modal__backdrop { opacity: 1; }

.industry-modal__dialog {
  position: relative;
  width: 100%;
  max-width: 1240px;
  max-height: 90vh;
  overflow-y: auto;
  overflow-x: hidden;
  box-sizing: border-box;
  background: #fff7f7;
  border-radius: 32px;
  padding: 56px;
  font-family: 'Hind', sans-serif;
  opacity: 0;
  transform: scale(0.85) translateY(24px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);

  scrollbar-width: thin;
  scrollbar-color: var(--ind-primary, #3F46B5) transparent;
}

.industry-modal__dialog::-webkit-scrollbar {
  width: 8px;
}

.industry-modal__dialog::-webkit-scrollbar-track {
  background: transparent;
  margin: 24px 0;
}

.industry-modal__dialog::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #4F46E5, #3F46B5);
  border-radius: 999px;
  border: 2px solid #F7F9FF;
  background-clip: padding-box;
}

.industry-modal__dialog::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #3F46B5, #2F3690);
  background-clip: padding-box;
}

.industry-modal.is-open .industry-modal__dialog {
  opacity: 1;
  transform: scale(1) translateY(0);
}

.industry-modal__close {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: var(--ind-primary, #3F46B5);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(23, 23, 43, 0.15);
  transition: background 0.25s ease, transform 0.2s ease;
  z-index: 5;
}

.industry-modal__close:hover {
  background: var(--ind-primary-dark, #2F3690);
  transform: rotate(90deg);
}

.industry-modal__header { margin-bottom: 28px; padding-right: 56px; }

.industry-modal__title {
  margin: 0 0 16px;
  font-size: 32px;
  font-weight: 700;
  color: #17172B;
}

.industry-modal__divider {
  width: 100%;
  max-width: 1240px;
  height: 4px;
  border-radius: 999px;
  background: #E63946;
}

.industry-modal__tabs-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 32px;
  min-width: 0;
}

.industry-tabs {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  scroll-behavior: smooth;
  gap: 10px;
  flex: 1;
  min-width: 0;

  scrollbar-width: none;
  -ms-overflow-style: none;
}

.industry-tabs::-webkit-scrollbar { display: none; }

.industry-tabs-arrow {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: #3F46B5;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.25s ease, transform 0.15s ease;
}

.industry-tabs-arrow:hover { background: #2F3690; }
.industry-tabs-arrow:active { transform: scale(0.9); }

.industry-tabs__btn {
  position: relative;
  flex: 0 0 auto;
  white-space: nowrap;
  padding: 9px 18px;
  border-radius: 8px;
  border: 1.5px solid #3F46B5;
  background: transparent;
  color: #3F46B5;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: color 0.35s ease, transform 0.2s ease;
}

.industry-tabs__btn:hover { transform: translateY(-0px); }

.industry-tabs__btn::before {
  content: "";
  position: absolute;
  left: -150%;
  top: 0;
  width: 150%;
  height: 100%;
  background: #3F46B5;
  border-radius: 50%;
  transition: 0.6s ease;
  z-index: -1;
}

.industry-tabs__btn:hover::before { left: 0; }
.industry-tabs__btn:hover { color: #fff; }

.industry-tabs__btn.is-active {
  background: #3F46B5;
  border-color: #3F46B5;
  color: #fff;
}

.industry-modal__product {
  display: grid;
  grid-template-columns: minmax(0, 341px) 1fr;
  gap: 32px;
  align-items: center;
  margin-bottom: 32px;
  min-width: 0;
}

.industry-modal__product-image {
  width: 100%;
  max-width: 341px;
  height: 252px;
  border-radius: 20px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 8px 24px rgba(23, 23, 43, 0.08);
}

.industry-modal__product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.industry-modal__product-info {
  height: 252px;
  width: 100%;
  max-width: 750px;
  background: #fff;
  border-radius: 20px;
  padding: 28px 24px;
  box-shadow: 0 8px 24px rgba(23, 23, 43, 0.08);
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow-y: auto;
  box-sizing: border-box;
}

.industry-modal__product-name {
  margin: 0 0 12px;
  font-size: 24px;
  font-weight: 700;
  color: #17172B;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.industry-modal__product-name[hidden] {
  display: none;
}

.industry-modal__product-desc {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: #5B5B72;
}

.industry-modal__card {
  background: #fff;
  border-radius: 20px;
  padding: 28px 32px;
  margin-bottom: 24px;
  box-shadow: 0 6px 20px rgba(23, 23, 43, 0.06);
}

.industry-modal__card-title {
  margin: 0 0 20px;
  font-size: 19px;
  font-weight: 700;
  color: #17172B;
}

.industry-modal__spec-list,
.industry-modal__feature-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.industry-modal__spec-list li,
.industry-modal__feature-list li {
  position: relative;
  padding-left: 18px;
  font-size: 14.5px;
  line-height: 1.6;
  color: #3A3A50;
}

.industry-modal__spec-list li::before,
.industry-modal__feature-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  top: 0;
  color: #8A8AA0;
  font-size: 16px;
  line-height: 1.5;
}

/* =========================================================
   INDUSTRY MODAL — ENQUIRE NOW CLEAN WHITE FILL
   ========================================================= */
.industry-enquiry-btn {
  --enquire-blue: #2f3690;
  --enquire-white: #ffffff;

  position: relative;
  isolation: isolate;
  overflow: hidden;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  min-height: 56px;
  padding: 12px 20px;

  border: 1px solid var(--enquire-blue);
  border-radius: 14px;

  background: var(--enquire-blue);
  color: var(--enquire-white);

  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;

  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;

  transition:
    box-shadow 0.35s ease,
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.industry-enquiry-btn::before {
  content: "";

  position: absolute;
  z-index: 0;
  inset: 0;

  border-radius: inherit;
  background: var(--enquire-white);

  transform: scaleX(0);
  transform-origin: left center;

  transition:
    transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);

  pointer-events: none;
}

.industry-enquiry-btn span {
  position: relative;
  z-index: 1;

  color: var(--enquire-white);

  transition:
    color 0.3s ease 0.12s;

  pointer-events: none;
}

.industry-enquiry-btn:hover::before,
.industry-enquiry-btn:focus-visible::before {
  transform: scaleX(1);
}

.industry-enquiry-btn:hover span,
.industry-enquiry-btn:focus-visible span {
  color: var(--enquire-blue);
}

.industry-enquiry-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(47, 54, 144, 0.25);
}

.industry-enquiry-btn:active {
  transform: translateY(0);
}

.industry-enquiry-btn:focus-visible {
  outline: 3px solid rgba(47, 54, 144, 0.25);
  outline-offset: 3px;
}


/* =====================================================================
   RESPONSIVE BREAKPOINTS
   Desktop (>1024px): unchanged original layout, arrows + progress bar
   Tablet (601–1024px): peeking cards (~1.8 visible), arrows hidden
   Mobile (≤600px): 1 full-width card, arrows hidden
   Auto-scroll + swipe/drag both remain active at every size.
   ===================================================================== */

/* ---- Laptop / small desktop ---- */
@media (max-width: 1240px) {
  .industry-showcase__container { padding: 0 24px; }
}

/* ---- Tablet ---- */
@media (max-width: 1024px) {
  .industry-showcase { padding: 60px 0; }
  .industry-showcase__heading { font-size: 32px; max-width: 100%; }

  :root .industry-showcase,
  .industry-showcase {
    --ind-card-w: calc(40vw - 20px);
    --ind-card-h: 170px;
    --ind-card-gap: 18px;
  }

  .industry-navigation { display: none; } /* arrows hidden; progress bar stays */

  .industry-modal__dialog { padding: 40px 28px; border-radius: 24px; }
  .industry-modal__product { grid-template-columns: 1fr; gap: 20px; }
  .industry-modal__product-image { width: 100%; max-width: 100%; height: 260px; }
  .industry-modal__product-info { width: 100%; max-width: 100%; height: auto; min-height: 180px; }
}

/* ---- Mobile / phone ---- */
@media (max-width: 600px) {
  .industry-showcase { padding: 30px 0; }
  .industry-showcase__container { padding: 0 16px; }
  .industry-showcase__heading { font-size: 24px; }
  .industry-showcase__heading-row { flex-wrap: wrap; }
  .industry-showcase__label { font-size: 18px; }

  :root .industry-showcase,
  .industry-showcase {
    /* calc() against 100vw minus the container's own side padding (16px * 2)
       so the card fills the real content width, not the raw viewport */
    --ind-card-w: calc(100vw - 32px);
    --ind-card-h: 180px;
    --ind-card-gap: 14px;
  }

  .industry-card__label {
    font-size: 14px;
    padding: 8px 18px;
  }

  .industry-modal { padding: 0; align-items: flex-end; }
  .industry-modal__dialog {
    max-height: 92vh;
    border-radius: 24px 24px 0 0;
    padding: 28px 18px;
  }
  .industry-modal__title { font-size: 22px; }
  .industry-modal__tabs-row { gap: 6px; margin-bottom: 24px; }
  .industry-tabs-arrow { width: 28px; height: 28px; }
  .industry-tabs__btn { padding: 7px 14px; font-size: 13px; }
  .industry-modal__product { gap: 16px; margin-bottom: 24px; }
  .industry-modal__product-image { height: 210px; border-radius: 16px; }
  .industry-modal__product-info { padding: 20px 24px; min-height: 0; }
  .industry-modal__product-name { font-size: 19px; }
  .industry-modal__product-desc { font-size: 13.5px; }
  .industry-modal__card { padding: 10px 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .industry-showcase__track { transition: none !important; }
  .industry-showcase {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}


/* =====================================================================
   MACHINE SERIES
   ===================================================================== */
/* =====================================================================
   MACHINE SERIES
   ===================================================================== */
.machine-series {
  --ms-primary: #3A46AA;
  --ms-primary-dark: #2C3585;
  --ms-red: #E63946;
  --ms-text-dark: #101018;
  --ms-text-muted: #6B7280;

  --ms-card-w: 292px;
  --ms-card-gap: 24px;

  font-family: 'Hind', sans-serif;
  padding: 80px 0;
  position: relative;
  overflow: hidden;

  opacity: 0;
  transform: translateY(300px);
  transition: opacity 2s cubic-bezier(0.22, 1, 0.36, 1), transform 2s cubic-bezier(0.22, 1, 0.36, 1);
}

.machine-series.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.machine-series::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 60px;
  bottom: 60px;
  background: #F5F9FF;
  z-index: 0;
}

.machine-series__container { position: relative; z-index: 1; }

.machine-series *,
.machine-modal * { box-sizing: border-box; }

.machine-series__container {
  width: 100%;
  max-width: 1240px;
  min-height: 577px;
  margin: 0 auto;
  padding: 0 24px 32px;
}

.machine-series__header { margin-bottom: 32px; }

.machine-series__top-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  font-size: 16px;
  margin-bottom: 24px;
}

.machine-series__label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  flex-shrink: 0;
  font-size: 24px;
  font-weight: 600;
  color: #000000;
  text-decoration: underline;
  text-underline-offset: 8px;
  text-decoration-color: #2c3399;
  text-decoration-thickness: 1px;
}

.machine-series__label-icon { flex-shrink: 0; color: var(--ms-red); }

.machine-series__heading-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.machine-series__heading {
  margin: 0;
  font-size: 39px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--ms-text-dark);
  max-width: 640px;
}

.machine-navigation { display: flex; gap: 12px; flex-shrink: 0; }

.machine-navigation__btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: var(--ms-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.25s ease;
  opacity: 1;
  visibility: visible;
}

.machine-navigation__btn:hover { background: var(--ms-primary-dark); }

.machine-series__track-wrap {
  overflow: hidden;
  position: relative;
  touch-action: pan-y;
  overscroll-behavior-x: contain; /* stop a diagonal swipe from also rubber-banding the page */
  -webkit-user-select: none;
  user-select: none;
  cursor: grab;
}

.machine-series__track-wrap.is-dragging {
  cursor: grabbing;
  user-select: none;
}

.machine-series__track {
  display: flex;
  gap: var(--ms-card-gap);
  width: max-content;
  will-change: transform;
}

.machine-card {
  flex: 0 0 auto;
  width: var(--ms-card-w);
  height: 353px;
  display: flex;
  flex-direction: column;
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  border: none;
  padding: 0;
  text-align: left;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease;
}

.machine-card__image-wrap {
  display: block;
  width: calc(100% - 48px);
  height: 145px;
  margin: 24px auto 0;
  overflow: hidden;
  background: #F4F5FA;
  border-radius: 10px;
}

.machine-card__image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
  transition: transform 0.5s ease;
}

.machine-card:hover .machine-card__image { transform: scale(1.08); }

.machine-card:focus-visible {
  outline: 0.125rem solid var(--ms-primary);
  outline-offset: 0.25rem;
}

.machine-card__body {
  padding: 18px 20px 22px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.machine-card__title {
  margin: 0 0 8px;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--ms-text-dark);
}

.machine-card__desc {
  margin: 0 0 8px;
  font-size: 14px;
  line-height: 133%;
  color: #000000;
  flex: 1;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}

/* .machine-card__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 8px 18px;
  font-size: 16px;
  font-weight: 600;
  font-family: inherit;
  border-radius: 8px;
  border: none;
  background: var(--ms-primary);
  color: #fff;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  align-self: flex-start;
  margin-bottom: 24px;
} */



/* .machine-card__btn:hover { padding-right: 30px; }

.machine-card__btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

.machine-card__btn span { position: relative; z-index: 2; }

.machine-card__btn-arrow {
  position: relative;
  z-index: 2;
  width: 0;
  opacity: 0;
  margin-left: 0;
  transform: translateX(-6px);
  transition: width 0.3s ease, opacity 0.3s ease, margin-left 0.3s ease, transform 0.3s ease;
}

.machine-card__btn:hover .machine-card__btn-arrow {
  width: 14px;
  opacity: 1;
  margin-left: 8px;
  transform: translateX(0);
}

.machine-card__btn::before {
  content: "";
  position: absolute;
  left: -150%;
  top: 0;
  width: 150%;
  height: 100%;
  background: var(--ms-primary-dark);
  border-radius: 50%;
  transition: 0.6s ease;
  z-index: 1;
}

.machine-card__btn:hover::before { left: 0; } */

/* =========================================================
   MACHINE SERIES — KNOW MORE LIQUID FILL
   ========================================================= */

.machine-card__btn {
  --machine-button-color: var(--ms-primary);
  --machine-button-text: #ffffff;
  --machine-button-fill: #ffffff;
  --machine-button-hover-text: var(--ms-primary);

  position: relative;
  isolation: isolate;
  overflow: hidden;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  min-width: 134px;
  min-height: 40px;
  padding: 8px 18px;

  border: 1px solid var(--machine-button-color);
  border-radius: 8px;

  background: var(--machine-button-color);
  color: var(--machine-button-text);

  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;

  cursor: pointer;

  align-self: flex-start;
  margin-bottom: 24px;

  appearance: none;
  -webkit-appearance: none;

  transition: none;
}

/* White oversized oval liquid layer */
.machine-card__btn::before {
  content: "";

  position: absolute;
  z-index: 0;

  top: 0;
  left: -150%;

  width: 150%;
  height: 90px;

  background: var(--machine-button-fill);
  background-image: none;

  border-radius: 50%;

  transform: none;
  transition: left 0.6s ease;

  pointer-events: none;
}

/* Keep Know more text above the liquid layer */
.machine-card__btn .machine-card__btn-label {
  position: relative;
  z-index: 2;

  display: inline-block;

  color: var(--machine-button-text);

  transition: color 0.35s ease;

  pointer-events: none;
}

/* Keep arrow visible above the liquid layer */
.machine-card__btn .machine-card__btn-arrow {
  position: relative;
  z-index: 2;

  display: block;
  flex: 0 0 auto;

  width: 14px;
  height: 14px;

  margin: 0;

  color: var(--machine-button-text);
  opacity: 1;

  transform: none;

  transition: color 0.35s ease;

  pointer-events: none;
}

/* White liquid enters from left to right */
.machine-card__btn:hover::before,
.machine-card__btn:focus-visible::before {
  left: 0;
  transform: none;
}

/* Text and arrow change to blue */
.machine-card__btn:hover .machine-card__btn-label,
.machine-card__btn:focus-visible .machine-card__btn-label,
.machine-card__btn:hover .machine-card__btn-arrow,
.machine-card__btn:focus-visible .machine-card__btn-arrow {
  color: var(--machine-button-hover-text);
}

/* Prevent movement or size change */
.machine-card__btn:hover,
.machine-card__btn:active {
  padding: 8px 18px;

  background: var(--machine-button-color);

  transform: none;
  box-shadow: none;
}

/* Keyboard focus */
.machine-card__btn:focus-visible {
  outline: 3px solid rgba(58, 70, 170, 0.28);
  outline-offset: 4px;
}

/* Disabled button */
.machine-card__btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

.machine-card__btn:disabled::before {
  left: -150%;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .machine-card__btn::before,
  .machine-card__btn .machine-card__btn-label,
  .machine-card__btn .machine-card__btn-arrow {
    transition: none;
  }
}

.machine-progress {
  width: 100%;
  height: 4px;
  border-radius: 999px;
  background: var(--ms-red);
  margin-top: 32px;
  overflow: hidden;
}

.machine-progress__fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: var(--ms-primary);
}

.machine-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
  font-family: 'Hind', sans-serif;
  overscroll-behavior: none;
  touch-action: none;
}

.machine-modal.is-open { display: flex; }

.machine-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  opacity: 0;
  transition: opacity 0.5s ease;
}

.machine-modal.is-open .machine-modal__backdrop { opacity: 1; }

.machine-modal__dialog {
  position: relative;
  width: 100%;
  max-width: 1240px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden; /* clips .machine-modal__body to these rounded corners */
  box-sizing: border-box;
  background: #F5F9FF;
  border-radius: 32px;
  opacity: 0;
  transform: scale(0.85) translateY(24px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.machine-modal.is-open .machine-modal__dialog {
  opacity: 1;
  transform: scale(1) translateY(0);
}

/* The actual scroll container. Splitting this out from .machine-modal__dialog
   is what keeps the scrollbar inside the rounded frame: a native scrollbar on
   a border-radius element isn't corner-clipped, which is why it used to look
   like it was sitting on/outside the dialog's edge. */
.machine-modal__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  box-sizing: border-box;
  padding: 56px;
  margin-right: 10px; /* the scrollbar renders flush against this element's own
    edge regardless of padding, so a margin — not padding — is what actually
    pulls it in from the dialog's rounded right border */

  overscroll-behavior-y: contain;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}

.machine-modal__body::-webkit-scrollbar { width: 10px; }
.machine-modal__body::-webkit-scrollbar-track { background: transparent; margin: 24px 0; }
.machine-modal__body::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #4F46E5, #3F46B5);
  border-radius: 999px;
  border: 2px solid #F7F9FF;
  background-clip: padding-box;
}
.machine-modal__body::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #3F46B5, #2F3690);
  background-clip: padding-box;
}
/* Remove the up/down arrow buttons entirely so only the track + thumb show. */
.machine-modal__body::-webkit-scrollbar-button {
  display: none;
  width: 0;
  height: 0;
}

.machine-modal__close {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: #3F46B5;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(23, 23, 43, 0.15);
  transition: background 0.25s ease, transform 0.2s ease;
  z-index: 5;
}

.machine-modal__close:hover {
  background: #2F3690;
  transform: rotate(90deg);
}

html.is-modal-scroll-locked,
body.is-modal-scroll-locked {
  overflow: hidden;
}

.machine-modal__header { margin-bottom: 28px; padding-right: 56px; }

.machine-modal__title {
  margin: 0 0 16px;
  font-size: 32px;
  font-weight: 700;
  color: #17172B;
}

.machine-modal__divider {
  width: 100%;
  max-width: 1240px;
  height: 4px;
  border-radius: 999px;
  background: #E63946;
}

.machine-modal__tabs-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 32px;
  min-width: 0;
}

.machine-tabs {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  scroll-behavior: smooth;
  gap: 10px;
  flex: 1;
  min-width: 0;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.machine-tabs::-webkit-scrollbar { display: none; }

.machine-tabs-arrow {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: #3F46B5;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.25s ease, transform 0.15s ease;
}

.machine-tabs-arrow:hover { background: #2F3690; }
.machine-tabs-arrow:active { transform: scale(0.9); }

.machine-tabs-arrow:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
  transform: none;
}

.machine-tabs-arrow[aria-disabled="true"] {
  opacity: 0.35;
  box-shadow: none;
}

.machine-tabs__btn {
  position: relative;
  flex: 0 0 auto;
  white-space: nowrap;
  padding: 9px 18px;
  border-radius: 8px;
  border: 1.5px solid #3F46B5;
  background: transparent;
  color: #3F46B5;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: color 0.35s ease, transform 0.2s ease;
}

.machine-tabs__btn:hover { transform: translateY(-0px); }

.machine-tabs__btn::before {
  content: "";
  position: absolute;
  left: -150%;
  top: 0;
  width: 150%;
  height: 100%;
  background: #3F46B5;
  border-radius: 50%;
  transition: 0.6s ease;
  z-index: -1;
}

.machine-tabs__btn:hover::before { left: 0; }
.machine-tabs__btn:hover { color: #fff; }

.machine-tabs__btn.is-active {
  background: #3F46B5;
  border-color: #3F46B5;
  color: #fff;
}

.machine-modal__product {
  display: grid;
  grid-template-columns: minmax(0, 341px) 1fr;
  gap: 32px;
  align-items: center;
  margin-bottom: 32px;
  min-width: 0;
}

.machine-modal__product-image {
  width: 100%;
  max-width: 341px;
  height: 252px;
  border-radius: 20px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 8px 24px rgba(23, 23, 43, 0.08);
}

.machine-modal__product-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.machine-modal__product-info {
  height: 252px;
  width: 100%;
  max-width: 750px;
  background: #fff;
  border-radius: 20px;
  padding: 28px 24px;
  box-shadow: 0 8px 24px rgba(23, 23, 43, 0.08);
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow-y: auto;
  box-sizing: border-box;
}

.machine-modal__product-name {
  margin: 0 0 12px;
  font-size: 24px;
  font-weight: 700;
  color: #17172B;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.machine-modal__product-name[hidden] {
  display: none;
}

.machine-modal__product-desc {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: #5B5B72;
}

.machine-modal__card {
  background: #fff;
  border-radius: 20px;
  padding: 28px 32px;
  margin-bottom: 24px;
  box-shadow: 0 6px 20px rgba(23, 23, 43, 0.06);
}

.machine-modal__card-title {
  margin: 0 0 20px;
  font-size: 19px;
  font-weight: 700;
  color: #17172B;
}

.machine-modal__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.machine-modal__list li {
  position: relative;
  padding-left: 18px;
  font-size: 14.5px;
  line-height: 1.6;
  color: #3A3A50;
}

.machine-modal__list li::before {
  content: "•";
  position: absolute;
  left: 0;
  top: 0;
  color: #8A8AA0;
  font-size: 16px;
}

.machine-modal__material {
  margin: 20px 0 0;
  padding-top: 20px;
  border-top: 1px solid #ECECF4;
  font-size: 14.5px;
  line-height: 1.7;
  color: #5B5B72;
}

.machine-modal__material[hidden] {
  display: none;
}

/* .machine-enquiry-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 56px;
  border: none;
  border-radius: 14px;
  background: #2F3690;
  color: #ffffff;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
} */

/* =========================================================
   MACHINE MODAL — ENQUIRE NOW CLEAN WHITE FILL
   ========================================================= */
.machine-enquiry-btn {
  --enquire-blue: #2f3690;
  --enquire-white: #ffffff;

  position: relative;
  isolation: isolate;
  overflow: hidden;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  min-height: 56px;
  padding: 12px 20px;

  border: 1px solid var(--enquire-blue);
  border-radius: 14px;

  background: var(--enquire-blue);
  color: var(--enquire-white);

  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;

  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;

  transition:
    box-shadow 0.35s ease,
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

/*
 * Full-size white layer.
 * scaleX(0) keeps it fully hidden at the left.
 * scaleX(1) fills the complete button without an oval gap.
 */
.machine-enquiry-btn::before {
  content: "";

  position: absolute;
  z-index: 0;
  inset: 0;

  border-radius: inherit;
  background: var(--enquire-white);

  transform: scaleX(0);
  transform-origin: left center;

  transition:
    transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);

  pointer-events: none;
}

.machine-enquiry-btn span {
  position: relative;
  z-index: 1;

  color: var(--enquire-white);

  transition:
    color 0.3s ease 0.12s;

  pointer-events: none;
}

/* Complete white fill from left to right */
.machine-enquiry-btn:hover::before,
.machine-enquiry-btn:focus-visible::before {
  transform: scaleX(1);
}

/* Text becomes blue after the white layer enters */
.machine-enquiry-btn:hover span,
.machine-enquiry-btn:focus-visible span {
  color: var(--enquire-blue);
}

.machine-enquiry-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(47, 54, 144, 0.25);
}

.machine-enquiry-btn:active {
  transform: translateY(0);
}

.machine-enquiry-btn:focus-visible {
  outline: 3px solid rgba(47, 54, 144, 0.25);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .industry-enquiry-btn,
  .industry-enquiry-btn::before,
  .industry-enquiry-btn span,
  .machine-enquiry-btn,
  .machine-enquiry-btn::before,
  .machine-enquiry-btn span {
    transition: none;
  }
}

@media (max-width: 1240px) {
  .machine-series__container { padding-left: 24px; padding-right: 24px; }
}

@media (max-width: 1024px) {
  .machine-series { padding: 60px 0; }
  .machine-series__container { min-height: 0; }
  .machine-series__heading { font-size: 32px; max-width: 100%; }

  :root .machine-series,
  .machine-series {
    --ms-card-gap: 18px;
  }

  .machine-navigation { display: none; }

  .machine-card { height: 330px; }
  .machine-card__image-wrap { height: 130px; }

  .machine-modal__dialog { border-radius: 24px; }
  .machine-modal__body { padding: 40px 28px; margin-right: 8px; }
  .machine-modal__product-image { height: 210px; border-radius: 16px; }  /* was 180px */

  .machine-modal__product { grid-template-columns: 1fr; gap: 20px; }
  /* .machine-modal__product-image { width: 100%; max-width: 100%; height: 220px; } */
  .machine-modal__product-info { width: 100%; max-width: 100%; height: auto; min-height: 180px; }
}

@media (max-width: 600px) {
  .machine-series { padding: 48px 0; }
  .machine-series__container { padding-left: 16px; padding-right: 16px; }
  .machine-series__heading { font-size: 24px; }
  .machine-series__heading-row { flex-wrap: wrap; }
  .machine-series__label { font-size: 18px; }

  :root .machine-series,
  .machine-series {
    --ms-card-gap: 14px;
  }

  .machine-card { height: auto; min-height: 320px; }

  .machine-modal { padding: 0; align-items: flex-end; }
  .machine-modal__dialog {
    max-height: 92vh;
    border-radius: 24px 24px 0 0;
  }
  .machine-modal__body { padding: 28px 18px; margin-right: 6px; }
  .machine-modal__title { font-size: 22px; }
  .machine-modal__tabs-row { gap: 6px; margin-bottom: 24px; }
  .machine-tabs-arrow { width: 28px; height: 28px; }
  .machine-tabs__btn { padding: 7px 14px; font-size: 13px; }
  .machine-modal__product { gap: 16px; margin-bottom: 24px; }
  .machine-modal__product-image { height: 210px; border-radius: 16px; }  /* was 180px */

  /* .machine-modal__product-image { height: 180px; border-radius: 16px; } */
  .machine-modal__product-info { padding: 20px 24px; min-height: 0; }
  .machine-modal__product-name { font-size: 19px; }
  .machine-modal__product-desc { font-size: 13.5px; }
  .machine-modal__card { padding: 20px 20px; }
  .machine-modal__material { font-size: 13.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .machine-series__track { transition: none !important; }
  .machine-series {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}
/* =====================================================================
   CTA BANNER
   ===================================================================== */
/* =========================================================
   CTA BANNER — UNIFORM LIQUID-FILL BUTTONS
   Request a Demo + Get a Quote
   ========================================================= */

.cta-banner .cta-btn {
  --cta-button-background: transparent;
  --cta-button-border: transparent;
  --cta-button-text: #ffffff;
  --cta-button-fill: #ffffff;
  --cta-button-hover-text: #1b1b4d;

  position: relative;
  isolation: isolate;
  overflow: hidden;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 168px;
  min-height: 48px;
  padding: 13px 28px;

  border: 1.5px solid var(--cta-button-border);
  border-radius: 16px;

  background: var(--cta-button-background);
  color: var(--cta-button-text);

  font-family: "Hind", Arial, sans-serif;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1;

  cursor: pointer;

  appearance: none;
  -webkit-appearance: none;

  /*
   * Remove the old lift, scale and shadow transitions.
   */
  transform: none;
  box-shadow: none;
  transition: none;
}

/* Request a Demo — blue button with white liquid fill */
.cta-banner .cta-btn--primary {
  --cta-button-background: var(--cb-primary);
  --cta-button-border: var(--cb-primary);
  --cta-button-text: #ffffff;
  --cta-button-fill: #ffffff;
  --cta-button-hover-text: var(--cb-primary);
}

/* Get a Quote — white button with blue liquid fill */
.cta-banner .cta-btn--outline {
  --cta-button-background: #ffffff;
  --cta-button-border: rgba(255, 255, 255, 0.7);
  --cta-button-text: var(--cb-primary);
  --cta-button-fill: var(--cb-primary);
  --cta-button-hover-text: #ffffff;
}

/* Oversized oval liquid layer */
.cta-banner .cta-btn::before {
  content: "";

  position: absolute;
  z-index: 0;

  top: 0;
  left: -150%;

  width: 150%;
  height: 90px;

  background: var(--cta-button-fill);
  background-image: none;

  border-radius: 50%;

  transform: none;
  transition: left 0.6s ease;

  pointer-events: none;
}

/* Keep text above the liquid layer */
.cta-banner .cta-btn .cta-btn__label {
  position: relative;
  z-index: 2;

  display: inline-block;

  color: var(--cta-button-text);

  transition: color 0.35s ease;

  pointer-events: none;
}

/* Liquid enters from left to right */
.cta-banner .cta-btn:hover::before,
.cta-banner .cta-btn:focus-visible::before {
  left: 0;
  transform: none;
}

/* Change text colour after fill */
.cta-banner .cta-btn:hover .cta-btn__label,
.cta-banner .cta-btn:focus-visible .cta-btn__label {
  color: var(--cta-button-hover-text);
}

/* Remove the previous upward movement and shadow */
.cta-banner .cta-btn:hover,
.cta-banner .cta-btn:active,
.cta-banner .cta-btn--primary:hover,
.cta-banner .cta-btn--outline:hover {
  background: var(--cta-button-background);
  border-color: var(--cta-button-border);

  transform: none;
  box-shadow: none;
}

/* Keyboard focus */
.cta-banner .cta-btn:focus-visible {
  outline: 3px solid rgba(255, 255, 255, 0.35);
  outline-offset: 4px;
}

/* Reduced-motion accessibility */
@media (prefers-reduced-motion: reduce) {
  .cta-banner .cta-btn::before,
  .cta-banner .cta-btn .cta-btn__label {
    transition: none;
  }
}
.cta-banner {
  --cb-primary: #3A46AA;
  --cb-primary-dark: #2C3585;

  font-family: 'Hind', sans-serif;
  padding: 60px 24px;
  background: #FFFFFF;
}

.cta-banner * { box-sizing: border-box; }

.cta-banner__frame {
  position: relative;
  max-width: 1240px;
  height: 526px;
  margin: 0 auto;
  border-radius: 28px;
  overflow: hidden;
  min-height: 340px;
  display: flex;
  align-items: center;
  justify-content: center;
  isolation: isolate;
  box-shadow:
    0 0 0 1px rgba(122, 168, 255, 0.12);
  /* border:2px solid red; */

  background:
    radial-gradient(120% 100% at 15% 100%, #4F63E8 0%, rgba(79, 99, 232, 0) 55%),
    radial-gradient(140% 120% at 85% 90%, #7C8CF0 0%, rgba(124, 140, 240, 0) 45%),
    linear-gradient(135deg, #05060F 0%, #0A0E2A 45%, #16215C 75%, #2438A6 100%);
}

/* Animated floating blue glow, sits between the base gradient and the video */
.cta-banner__glow {
  position: absolute;
  inset: -20%;
  z-index: 0;
  background-image:
    radial-gradient(38% 45% at 20% 30%, rgba(122, 168, 255, 0.55) 0%, rgba(122, 168, 255, 0) 70%),
    radial-gradient(45% 50% at 80% 70%, rgba(74, 123, 255, 0.5) 0%, rgba(74, 123, 255, 0) 70%),
    radial-gradient(32% 40% at 60% 15%, rgba(40, 92, 255, 0.45) 0%, rgba(40, 92, 255, 0) 70%),
    radial-gradient(50% 55% at 30% 85%, rgba(52, 100, 255, 0.45) 0%, rgba(52, 100, 255, 0) 70%);
  filter: blur(10px);
  will-change: transform, opacity;
  transform: translateZ(0);
  animation: ctaGlowDrift 18s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes ctaGlowDrift {
  0%   { transform: translate3d(-3%, -2%, 0) scale(1); opacity: 0.85; }
  33%  { transform: translate3d(2%, 3%, 0) scale(1.08); opacity: 1; }
  66%  { transform: translate3d(-2%, 2%, 0) scale(1.04); opacity: 0.9; }
  100% { transform: translate3d(3%, -3%, 0) scale(1.1); opacity: 1; }
}

.cta-banner__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.12) translateZ(0);
  transform-origin: center;
  filter: brightness(1.15) contrast(1.15) saturate(1.3) blur(0px);
  will-change: transform;
  z-index: 1;
  backface-visibility: hidden;
}

/* Soft light beam that slowly sweeps across the lower third of the video */
.cta-banner__sweep {
  position: absolute;
  left: -60%;
  right: -60%;
  bottom: -10%;
  height: 55%;
  z-index: 1;
  background: linear-gradient(
    100deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(180, 205, 255, 0) 42%,
    rgba(200, 220, 255, 0.16) 50%,
    rgba(180, 205, 255, 0) 58%,
    rgba(255, 255, 255, 0) 100%
  );
  mix-blend-mode: screen;
  will-change: transform;
  transform: translate3d(0, 0, 0);
  animation: ctaSweepMove 14s linear infinite;
  pointer-events: none;
}

@keyframes ctaSweepMove {
  0%   { transform: translate3d(-30%, 0, 0); }
  100% { transform: translate3d(30%, 0, 0); }
}

.cta-banner__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8, 12, 28, 0.35) 0%, rgba(8, 12, 28, 0.18) 100%);
  z-index: 2;
}

/* Subtle vignette to focus attention toward the center content */
.cta-banner__vignette {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: radial-gradient(120% 100% at 50% 50%, rgba(0, 0, 0, 0) 55%, rgba(2, 4, 16, 0.4) 100%);
  pointer-events: none;
}

.cta-banner__content {
  position: relative;
  z-index: 3;
  max-width: 720px;
  margin: 0 auto;
  padding: 56px 32px;
  text-align: center;
  transform: translateY(-40px);
  border-radius: 24px;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

@media (prefers-reduced-motion: reduce) {
  .cta-banner__glow,
  .cta-banner__sweep {
    animation: none;
  }
}

.cta-banner__heading {
  margin: 0 0 18px;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.3;
  color: #FFFFFF;
}

.cta-banner__desc {
  margin: 0 0 32px;
  font-size: 15.5px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.82);
  max-width: 700px;
}

.cta-banner__buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

.cta-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 28px;
  min-width: 168px;
  font-size: 14.5px;
  font-weight: 600;
  font-family: inherit;
  border-radius: 16px;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: box-shadow 0.35s ease, transform 0.35s ease, border-color 0.35s ease;
}

.cta-btn span { position: relative; z-index: 2; }

.cta-btn--primary {
  background: var(--cb-primary);
  border: 1.5px solid var(--cb-primary);
  color: #fff;
}

.cta-btn--outline {
  background: #fff;
  border: 1.5px solid rgba(255, 255, 255, 0.7);
  color: blue;
}

.cta-btn::before {
  content: "";
  position: absolute;
  top: -60%;
  left: -30%;
  width: 30%;
  height: 220%;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.55) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: rotate(20deg) translateX(-260%);
  transition: transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 1;
  pointer-events: none;
}

.cta-btn:hover::before {
  transform: rotate(20deg) translateX(360%);
}

.cta-btn--primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(58, 70, 170, 0.55), 0 0 0 5px rgba(58, 70, 170, 0.18);
}

.cta-btn--outline:hover {
  transform: translateY(-3px);
  border-color: #fff;
  box-shadow: 0 14px 30px rgba(255, 255, 255, 0.18), 0 0 0 5px rgba(255, 255, 255, 0.1);
}

@media (max-width: 640px) {
  .cta-banner { padding: 40px 16px; }
  .cta-banner__frame { border-radius: 20px; min-height: 300px; }
  .cta-banner__video { transform: scale(1.2) translateZ(0); }
  .cta-banner__heading { font-size: 24px; }
  .cta-banner__desc { font-size: 14px; }
  .cta-banner__buttons { flex-direction: column; width: 100%; }
  .cta-btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .cta-btn, .cta-btn::before { transition: none !important; }
}


/* =====================================================================
   TESTIMONIALS
   ===================================================================== */
.testimonials-section{
  --t-navy:#111827;
  --t-gray-text:#6B7280;
  --t-quote-text:#4B5563;
  --t-card-bg:#F8F9FD;
  --t-card-active-bg:#FFFFFF;
  --t-accent-blue:#3F51B5;
  --t-accent-border:#3A46A8;
  --t-accent-red:#E63946;
  --t-track-bg:#E5E7EB;

  font-family:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background:#FFFFFF;
  padding:10px 24px 90px;
  opacity:0;
  transform:translateY(100px);
}

.testimonials-section *{ box-sizing:border-box; }

.testimonials-container{
  max-width:1240px;
  margin:0 auto;
}

.t-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  margin-bottom:56px;
  flex-wrap:wrap;
  gap:24px;
}

.t-eyebrow{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:24px;
  font-weight:500;
  color:#000000;
  margin-bottom:10px;
  text-decoration: underline;
  text-underline-offset: 8px;
  text-decoration-color: #2c3399;
  text-decoration-thickness: 1px;
}

.t-eyebrow svg{
  width:18px;
  height:18px;
  color:var(--t-accent-blue);
}

.t-heading{
  font-size:48px;
  font-weight:700;
  color:var(--t-navy);
  line-height:1.2;
  letter-spacing:-0.5px;
  margin-top: 30px;
}

.t-nav{
  display:flex;
  gap:14px;
}

.t-nav-btn{
  width:42px;
  height:42px;
  border-radius:50%;
  background:var(--t-accent-blue);
  border:none;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:transform .25s ease, background .25s ease, box-shadow .25s ease;
}

.t-nav-btn:hover{
  transform:scale(1.1);
  background:#33449c;
}

.t-nav-btn:active{
  transform:scale(0.96);
}

.t-nav-btn svg{
  width:18px;
  height:18px;
  stroke:#FFFFFF;
}

.t-nav-btn:focus-visible{
  outline:2px solid var(--t-accent-red);
  outline-offset:3px;
}

.t-viewport{
  overflow:hidden;
  position:relative;
  padding:14px 0 44px;
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
  cursor: grab;
}

.t-viewport.is-dragging{
  cursor: grabbing;
}

.t-track{
  display:flex;
  gap:24px;
  will-change:transform;
}

.t-card{
  flex:0 0 320px;
  width:320px;
  display:flex;
  flex-direction:column;
}
/* 
.t-card-inner{
  background:var(--t-card-bg);
  border:2px solid transparent;
  border-radius:20px;
  padding:30px;
  height:270px;
  width:100%;
  display:block;
  box-shadow:0 8px 24px rgba(0,0,0,0.04);
  transition:background .35s ease, border-color .35s ease, box-shadow .35s ease, transform .35s ease;
  position:relative;
  overflow:hidden;
} */



.t-card-inner{
  background:var(--t-card-bg);
  border:2px solid transparent;
  border-radius:20px;
  padding:30px 30px 50px;   /* extra bottom padding reserves space for the button */
  height:250px;
  width:100%;
  display:block;
  transition:background .35s ease, border-color .35s ease, box-shadow .35s ease, transform .35s ease;
  position:relative;
  /* overflow:hidden; */
  overflow:visible;   /* was: hidden — that was clipping the tail arrow */

}


/* 
.t-card-inner::after{
  content:'';
  position:absolute;
  left:36px;
  bottom:-1px;
  width:18px;
  height:18px;
  background:inherit;
  border-right:2px solid transparent;
  border-bottom:2px solid transparent;
  transform:rotate(45deg);
  border-radius:0 0 4px 0;
  transition:background .35s ease, border-color .35s ease, opacity .35s ease;
  opacity:0;
} */



.t-card-inner::after{
  content:'';
  position:absolute;
  left:36px;
  bottom:-9px;
  width:18px;
  height:18px;
  background:inherit;
  border-right:2px solid transparent;
  border-bottom:2px solid transparent;
  transform:translateX(-50%) rotate(45deg);
  border-radius:0 0 4px 0;
  transition:background .35s ease, border-color .35s ease, opacity .35s ease;
  opacity:0;
}


/* 
.t-quote{
  font-size:16px;
  font-weight:400;
  line-height:1.8;
  color:var(--t-quote-text);
}

.t-read-more{
  background:none;
  border:none;
  padding:0;
  margin-top:10px;
  font-size:14px;
  font-weight:600;
  color:var(--t-accent-blue);
  cursor:pointer;
  display:none;
} */


/* 

.t-quote{
  font-size:16px;
  font-weight:400;
  line-height:1.8;
  color:var(--t-quote-text);
  margin-bottom:4px;
} */




.t-quote{
  font-size:16px;
  font-weight:400;
  line-height:1.8;
  color:var(--t-quote-text);
}


/* 

.t-read-more{
  background:none;
  border:none;
  padding:0;
  margin-top:6px;
  font-size:14px;
  font-weight:600;
  color:var(--t-accent-blue);
  cursor:pointer;
  display:none;
} */





.t-read-more{
  position:absolute;
  left:30px;
  bottom:24px;         /* same fixed spot on every card, regardless of quote length */
  background:none;
  border:none;
  padding:0;
  font-size:14px;
  font-weight:600;
  color:var(--t-accent-blue);
  cursor:pointer;
  display:none;
}
/* 
.t-card.is-expanded .t-card-inner{
  height:auto;
  min-height:270px;
} */



.t-card.is-expanded .t-card-inner{
  height:auto;
  min-height:270px;
}



.t-card.is-expanded .t-read-more{
  position:static;      /* once expanded, button flows naturally after full text */
  margin-top:10px;
  display:inline-block;
}


.t-card.is-active .t-card-inner{
  background:var(--t-card-active-bg);
  border-color:var(--t-accent-border);
  box-shadow:0 12px 30px rgba(63,81,181,0.08);
  transform:scale(1.02) translateY(-6px);
}

.t-card.is-active .t-card-inner::after{
  background:var(--t-card-active-bg);
  border-right-color:var(--t-accent-border);
  border-bottom-color:var(--t-accent-border);
  opacity:1;
}

.t-reviewer{
  display:flex;
  align-items:center;
  gap:14px;
  margin-top:22px;
  padding-left:6px;
  flex-shrink:0;
}

.t-avatar{
  width:52px;
  height:52px;
  border-radius:50%;
  flex-shrink:0;
  border:2px solid #FFFFFF;
  box-shadow:0 2px 8px rgba(0,0,0,0.08);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  font-weight:700;
  color:#FFFFFF;
  letter-spacing:0.5px;
  text-transform:uppercase;
}

.t-name{
  font-size:18px;
  font-weight:700;
  color:var(--t-navy);
  line-height:1.3;
}

.t-company{
  font-size:14px;
  font-weight:400;
  color:var(--t-gray-text);
  line-height:1.4;
}

.t-progress-track{
  width:100%;
  height:4px;
  border-radius:999px;
  background:#2c3394;
  overflow:hidden;
  margin-top:8px;
}

.t-progress-fill{
  height:100%;
  width:10%;
  border-radius:999px;
  background: red;
  transition:width .6s ease;
}

@media (max-width:1024px){
  .t-nav{ display:none; }
}

@media (max-width:1240px){
  .t-card{flex-basis:300px;width:300px;}
}

@media (max-width:900px){
  .testimonials-section{padding:70px 20px 60px;}
  .t-heading{font-size:36px;}
  .t-card{flex-basis:calc(50% - 12px);width:calc(50% - 12px);}
}
/* 
@media (max-width:560px){
  .t-heading{font-size:28px;}
  .t-card{flex-basis:82%;width:82%;}
  .t-card-inner{height:auto;min-height:170px;padding:24px;}
  .t-header{align-items:flex-start;}
} */



@media (max-width:560px){
  .t-heading{font-size:22px;}
  .t-card{flex-basis:99%;width:85%;}

  .t-card-inner{
    height:200px;          /* fixed — same idea as desktop's 270px */
    min-height:0;
    padding:24px 24px 46px; /* extra bottom space reserved for the button */
  }

  .t-read-more{
    position:absolute;
    left:24px;
    bottom:10px;           /* same fixed spot on every card */
  }

  .t-card.is-expanded .t-card-inner{
    height:auto;
    min-height:200px;
  }

  .t-card.is-expanded .t-read-more{
    position:static;
    margin-top:20px;
  }

  .t-header{align-items:flex-start;}
}

@media (max-width:380px){
  .t-heading{font-size:22px;}
  .t-card{flex-basis:92%;width:85%;}

  .t-card-inner{
    height:200px;          /* fixed — same idea as desktop's 270px */
    min-height:0;
    padding:24px 24px 46px; /* extra bottom space reserved for the button */
  }

  .t-read-more{
    position:absolute;
    left:24px;
    bottom:10px;           /* same fixed spot on every card */
  }

  .t-card.is-expanded .t-card-inner{
    height:auto;
    min-height:200px;
  }

  .t-card.is-expanded .t-read-more{
    position:static;
    margin-top:20px;
  }

  .t-header{align-items:flex-start;}
}



@media (prefers-reduced-motion: reduce){
  .testimonials-section *{animation-duration:0.001ms !important; transition-duration:0.001ms !important;}
}
/* =====================================================================
   WATCH OUR MACHINES IN ACTION — Video Showcase Section
   ===================================================================== */
.vs-section{
  --navy-dark:#1B1B4D;
  --navy:#3A46AA;
  --coral:#EE5B75;
  --coral-2:#E63946;
  --vs-bg:#F2F5FC;
  --vs-card-radius: 28px;
  --vs-max-width: 1240px;

  font-family:'Hind', sans-serif;
  position:relative;
  background:var(--vs-bg);
  padding:clamp(36px, 6vw, 56px) 0 0 0;
  overflow:hidden;
  margin-bottom:100px;
}

.vs-section *{ box-sizing:border-box; }

.vs-container{
  max-width:1240px;
  margin:0 auto;
  padding:0 20px;
  position:relative;
}

.vs-reveal{
  opacity:0;
  transform:translateY(70px);
  transition:opacity .7s cubic-bezier(.22,.68,0,1), transform .7s cubic-bezier(.22,.68,0,1);
}
.vs-reveal.in-view{
  opacity:1;
  transform:translateY(0);
}
.vs-cards .vs-card:nth-child(1){ transition-delay:.05s; }
.vs-cards .vs-card:nth-child(2){ transition-delay:.15s; }
.vs-cards .vs-card:nth-child(3){ transition-delay:.25s; }
.vs-cards .vs-card:nth-child(4){ transition-delay:.35s; }
.vs-cards .vs-card:nth-child(5){ transition-delay:.45s; }
.vs-cards .vs-card:nth-child(6){ transition-delay:.55s; }

.vs-label{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:14px;
}
.vs-label svg{ width:26px; height:26px; flex-shrink:0; }
.vs-label span{
  font-size:24px;
  font-weight:600;
  color:#000000;
  text-decoration:underline;
  text-underline-offset:4px;
  text-decoration-color: #2c3399;
  text-decoration-thickness:1.5px;
}

.vs-head-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:24px;
  margin-bottom:36px;
  gap:20px;
  flex-wrap:wrap;
}
.vs-heading{
  font-size:39px;
  line-height:1.15;
  font-weight:700;
  color:#0E0E2C;
  margin:0;
}
.vs-arrows{
  display:flex;
  gap:12px;
  flex-shrink:0;
}
.vs-arrow{
  width:clamp(38px, 4vw, 46px);
  height:clamp(38px, 4vw, 46px);
  border-radius:50%;
  border:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--navy);
  color:#fff;
  transition:background .25s ease, transform .15s ease;
}
.vs-arrow:hover{ background:var(--navy-dark); }
.vs-arrow:active{ transform:scale(.92); }
.vs-arrow svg{ width:18px; height:18px; }

.vs-track-wrap{
  position:relative;
}
.vs-cards{
  display:flex;
  gap:24px;
  overflow-x:auto;
  padding-bottom:4px;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  cursor:grab;
}
.vs-cards::-webkit-scrollbar{ display:none; }

.vs-cards.is-dragging{
  cursor:grabbing;
  scroll-snap-type:none;
}

.vs-card{
  position:relative;
  flex:0 0 auto;
  width:min(292px, 78vw);
  aspect-ratio: 292 / 410;
  border-radius:24px;
  overflow:hidden;
  cursor:pointer;
  background:#0d0d2b;
}
.vs-card img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  pointer-events:none; /* keeps mouse-drag gestures from being swallowed by the image */
}
.vs-card::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(37,49,140,.08) 0%, rgba(28,38,120,.30) 100%);
  pointer-events:none;
  transition:background .25s ease;
}
.vs-card:hover::after{
  background:linear-gradient(180deg, rgba(30,42,150,.35) 0%, rgba(22,30,110,.55) 100%);
}
.vs-play{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:56px; height:56px;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:2;
  opacity:0;
  transition:opacity .25s ease;
  pointer-events:none;
}

.vs-play img{
  width:100%;
  height:100%;
  object-fit:contain;
  filter:drop-shadow(0 6px 18px rgba(0,0,0,.18));
}
.vs-card:hover .vs-play{
  opacity:1;
}
@media (hover:none){
  .vs-play{ opacity:1; }
}

.vs-progress-track{
  margin-top:32px;
  width:100%;
  height:4px;
  background:var(--coral-2);
  border-radius:999px;
  overflow:hidden;
}
.vs-progress-fill{
  height:100%;
  width:0%;
  border-radius:999px;
  background:var(--navy);
}

.vs-bottom-line{
  max-width:var(--vs-max-width);
  margin:40px auto 0;
  padding:0 clamp(20px, 6vw, 86px);
}
.vs-spacer{ height:clamp(24px, 5vw, 40px); }

/* Arrows hidden on mobile/tablet — swipe/drag only, matching the
   other carousels on the page. Progress bar stays visible. */
@media (max-width: 1024px){
  .vs-arrows{ display:none; }
}

@media (max-width: 900px){
  .vs-side-left, .vs-side-right{ display:none; }
  .vs-heading{ font-size:30px; }
}

@media (max-width: 640px){
  .vs-container{ padding:0 16px; }
  .vs-heading{ font-size:25px; }
}

@media (max-width: 560px){
  .vs-head-row{ gap:14px; }
}

@media (prefers-reduced-motion: reduce){
  .vs-reveal{ transition:none !important; }
}

/* =====================================================================
   FAQ SECTION
   ===================================================================== */

.faq-section{
  --faq-navy:#1B1B4D;
  --faq-indigo:#3A46AA;
  --faq-text-dark:#1B1B33;
  --faq-text-muted:#6B6E85;
  --faq-card-bg:#F5F6FA;
  --faq-card-border:#ECEDF4;
  --faq-icon-bg:#E9EAF3;

  font-family:'Hind', sans-serif;
  max-width:1240px;
  margin:0 auto;
  padding:80px 24px;
  color: var(--faq-text-dark);

  opacity:0;
  transform:translateY(120px);
  transition:opacity 1s cubic-bezier(.25,.1,.25,1), transform 1s cubic-bezier(.25,.1,.25,1);
}

.faq-section *{ box-sizing:border-box; }

.faq-section.in-view{
  opacity:1;
  transform:translateY(0);
}

.faq-eyebrow{
  display:flex;
  align-items:center;
  gap:8px;
  color:#000000;
  font-weight:600;
  font-size:24px;
  margin-bottom:14px;
  text-decoration: underline;
  text-underline-offset: 8px; 
  text-decoration-color: #2c3399;
  text-decoration-thickness: 1px;
}

.faq-eyebrow svg{
  width:20px;
  height:20px;
}

.faq-heading{
  font-size:34px;
  font-weight:700;
  color:var(--faq-text-dark);
  margin-bottom:40px;
  letter-spacing:-0.5px;
}

.faq-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px 20px;
  align-items:start;
}

.faq-col{
  display:flex;
  flex-direction:column;
  gap:16px;
}

.faq-wrapper{
  display:flex;
  flex-direction:column;
}

.faq-item{
  background:var(--faq-card-bg);
  border:1px solid var(--faq-card-border);
  border-radius:12px;
  padding:20px 22px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  cursor:pointer;
  transition:background .35s ease, box-shadow .35s ease;
  user-select:none;
}

.faq-item:hover{
  background:#EFF0F8;
}

.faq-question{
  font-size:15.5px;
  font-weight:500;
  color:var(--faq-text-dark);
  line-height:1.4;
  transition:color .35s ease;
}

.faq-icon{
  flex:0 0 auto;
  width:34px;
  height:34px;
  border-radius:50%;
  background:var(--faq-icon-bg);
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background 1.4s ease, box-shadow 1.4s ease, transform 2s cubic-bezier(.34,1.56,.64,1);
}

.faq-icon svg{
  width:15px;
  height:15px;
  stroke:#000000;
  transition:transform 2s cubic-bezier(.34,1.56,.64,1), stroke .8s ease;
  transform:rotate(0deg);
}

.faq-item.active{
  background:linear-gradient(135deg, var(--faq-navy), var(--faq-indigo));
  border-color:transparent;
}

.faq-item.active .faq-question{
  color:#ffffff;
}

.faq-item.active .faq-icon{
  background:rgba(255,255,255,0.2);
  box-shadow:0 0 0 8px rgba(255,255,255,0.06);
  transform:scale(1.08);
}

.faq-item.active .faq-icon svg{
  stroke:#ffffff;
  transform:rotate(-180deg);

}

.faq-answer{
  background:var(--faq-card-bg);
  border:1px solid var(--faq-card-border);
  border-radius:12px;
  padding:0 22px;
  margin-top:0;
  max-height:0;
  opacity:0;
  overflow:hidden;
  transition:max-height .8s cubic-bezier(.65,0,.35,1), opacity .6s ease, padding .6s ease;
}

.faq-answer.open{
  padding:18px 22px;
  margin-top:0;
  max-height:200px;
  opacity:1;
}

.faq-answer p{
  font-size:14.5px;
  line-height:1.6;
  color:#000000;
}

@media (max-width:768px){
  .faq-grid{
    grid-template-columns:1fr;
  }
  .faq-heading{
    font-size:26px;
  }
}


/* ═══════════════════════════════════════════
   FOOTER — Excel Packs
   ═══════════════════════════════════════════ */

.footer {
  /* --bg-footer: #eef0fb; */
  --bg-footer:#F5F9FF;
  --footer-text-dark: #1c1d3e;
  --footer-text-gray: #0000000;
  --footer-icon-bg: #2e2f5c;
  --footer-icon-hover: #4d3fd6;
  --footer-link-hover: #4d3fd6;
  --footer-max-width: 1240px;

  position: relative;
  background: var(--bg-footer);
  padding: 56px 40px 28px;
  overflow: hidden;
}

.footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 6px;
  background-size: 16px 6px;
  background-repeat: repeat-x;
  background-position: center;
}

.footer-inner {
  max-width: var(--footer-max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 40px;
}

.brand-col .logo-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
}

.footer-logo-image {
  display: block;
  width: auto;
  height: 44px;
  max-width: 200px;
  object-fit: contain;
}

.brand-col h4 {
  font-size: 15px;
  font-weight: 700;
  color: var(--footer-text-dark);
  margin-bottom: 4px;
}

.brand-col h4.tagline {
  margin-bottom: 14px;
}

.brand-col p {
  font-family: 'Poppins', sans-serif;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--footer-text-gray);
  max-width: 380px;
  margin-bottom: 22px;
}

.social-row {
  display: flex;
  gap: 10px;
}

.social-row a {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: var(--footer-icon-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: background 0.25s ease, transform 0.25s ease;
}

.social-row a:hover {
  background: var(--footer-icon-hover);
  transform: translateY(-2px);
}

.social-row svg {
  width: 15px;
  height: 15px;
  fill: #ffffff;
}

.link-col h4 {
  font-size: 15px;
  font-weight: 700;
  color: var(--footer-text-dark);
  margin-bottom: 18px;
}

.link-col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 13px;
  margin: 0;
  padding: 0;
}

.link-col a {
  font-family: 'Poppins', sans-serif;
  font-size: 13.5px;
  color: var(--footer-text-gray);
  text-decoration: none;
  transition: color 0.2s ease, padding-left 0.2s ease;
}

.link-col a:hover {
  color: var(--footer-link-hover);
  padding-left: 3px;
}

.footer-bottom {
  text-align: center;
  margin-top: 46px;
  padding-top: 18px;
}

.footer-bottom p {
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  color: var(--footer-text-gray);
}

@media (max-width: 860px) {
  .footer-inner {
    grid-template-columns: 1fr 1fr;
  }
  .brand-col {
    grid-column: 1 / -1;
  }
}
/* 
@media (max-width: 560px) {
  .footer {
    padding: 40px 24px 24px;
  }
  .footer-inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .brand-col p {
    max-width: 100%;
  }
} */


@media (max-width: 560px) {
  .footer {
    padding: 36px 20px 24px;
  }

  .footer-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px 20px;
  }

  /* Brand column spans full width on top */
  .brand-col {
    grid-column: 1 / -1;
  }

  .brand-col p {
    max-width: 100%;
    margin-bottom: 20px;
  }

  .brand-col .logo-row {
    margin-bottom: 18px;
  }

  .footer-logo-image {
    height: 38px;
  }

  .brand-col h4 {
    font-size: 14px;
  }

  .brand-col h4.tagline {
    font-size: 13px;
    font-weight: 600;
  }

  .social-row {
    margin-top: 4px;
  }

  .social-row a {
    width: 32px;
    height: 32px;
  }

  /* Quick Links + Our Products sit side-by-side below the brand */
  .link-col h4 {
    font-size: 14px;
    margin-bottom: 14px;
  }

  .link-col ul {
    gap: 11px;
  }

  .link-col a {
    font-size: 13px;
    line-height: 1.4;
  }

  .footer-bottom {
    margin-top: 32px;
    padding-top: 16px;
  }

  .footer-bottom p {
    font-size: 11px;
    line-height: 1.5;
    padding: 0 8px;
  }
}

:root{
  --navy:#1B1B4D;
  --indigo:#3A46AA;
  --indigo-btn:#3F4DB8;
  --text-dark:#14141F;
  --text-muted:#000000;
  --border-soft:#DCE6F5;
  --card-bg:#EAF2FB;
  --dotted-line:#B7BEE8;
  --max-width:1240px;
}

body{
  background-color:#ffffff;
}

/* ===================================================
   SECTION WRAPPER
=================================================== */
.contact-section{
  max-width:1240px;
  margin:0 auto;
  /* padding:80px 24px; */
  font-family:'Hind', Arial, sans-serif;
  background-color:#ffffff;

  /* bottom-to-top scroll reveal */
  opacity:0;
  transform:translateY(60px);
  transition:opacity 1s cubic-bezier(.25,.1,.25,1), transform 1s cubic-bezier(.25,.1,.25,1);
}

.contact-section.in-view{
  opacity:1;
  transform:translateY(0);
}

.contact-grid{
  position:relative;
  display:grid;
  grid-template-columns:1fr 1.15fr;
  gap:70px;
  align-items:start;
  /* border:2px solid red; */
  margin-bottom: 100px;
}

/* Decorative dotted corner frame (top + left edge only) */
.contact-grid::before{
  content:'';
  position:absolute;
  top:-24px;
  left:-24px;
  width:calc(100% + 24px);
  height:calc(100% + 48px);
    border-top-left-radius:24px;
  pointer-events:none;
}

/* ===================================================
   LEFT COLUMN — Contact Info
=================================================== */
.contact-left{
  padding-top:4px;
  background-color:#ffffff;
}

.contact-eyebrow{
  display:flex;
  align-items:center;
  gap:8px;
  color:#000000;
  font-weight:600;
  font-size:24px;
  margin-bottom:16px;
  text-decoration: underline;
  text-underline-offset: 8px; 
  text-decoration-color: #2c3399;
  text-decoration-thickness: 1px;
}

.contact-eyebrow svg{
  width:20px;
  height:20px;
}

.contact-heading{
  font-size:40px;
  font-weight:700;
  line-height:1.35;
  color:var(--text-dark);
  letter-spacing:-0.3px;
  max-width:550px;
  margin-bottom:174px;
}

.contact-info-block{
  margin-bottom:16px;
}

.contact-info-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
}

.contact-info-item-title{
  display:flex;
  align-items:center;
  gap:8px;
  font-weight:700;
  font-size:16px;
  color:var(--text-dark);
  margin-bottom:10px;
}

.contact-info-item-title svg{
  width:16px;
  height:16px;
  stroke:var(--indigo);
  flex-shrink:0;
}

.contact-info-value{
  font-size:16px;
  line-height:1.7;
  color:var(--text-muted);
  margin-left :24px;
}

.contact-location-value,
.contact-hours-value{
  font-size:16px;
  line-height:1.7;
  color:var(--text-muted);
  margin-left:24px;
}

/* ===================================================
   RIGHT COLUMN — Zoho Bigin form overrides
   (visual only — no structural/functional classes touched)
=================================================== */
.contact-right .wf-parent{
  padding:0;
  height:auto;
  background-image:none !important;
  background-color:transparent !important;
}

.contact-right .wf-wrapper{
  max-width:100%;
  width:100%;
    position:relative;   /* NEW — contains .wform-poweredby-container inside the form card */

  border-radius:14px;
  box-shadow:none;
  background-color:var(--card-bg);
}

.contact-right .wf-form-component{
  padding:32px 32px 40px;
}

/* Hide the auto-generated Zoho logo slot — not present in target design */
.contact-right .wf-logo{
  display:none;
}

.contact-right .wf-header{
  font-size:18px;
  font-weight:700;
  color:var(--text-dark);
  padding-bottom:0;
  margin-bottom:6px;
}

.contact-form-subtext{
  font-size:13.5px;
  color:var(--text-muted);
  line-height:1.6;
  margin-bottom:28px;
}

.contact-right .wf-label{
  font-size:13.5px;
  font-weight:600;
  color:var(--text-dark);
  padding:0 0 8px;
}

.contact-right .wf-row{
  margin-bottom:18px;
}

.contact-right .wf-field-input,
.contact-right .wf-field-dropdown{
  border:1px solid var(--border-soft);
  border-radius:6px;
  background-color:#ffffff;
  padding:11px 14px;
  font-size:14px;
  color:var(--text-dark);
}

.contact-right .wf-field-input::placeholder{
  color:#9AA0B4;
}

.contact-right .wf-field-input:focus{
  border:1px solid var(--indigo);
}

.contact-right .wf-text-area-input{
  min-height:96px;
  height:96px;
}

.contact-right select.wf-field-dropdown{
  color:#9AA0B4;
}

.contact-right .wform-btn-wrap{
  margin-top:8px;
}

.contact-right .wf-btn{
  background-color:var(--indigo-btn) !important;
  border:1px solid var(--indigo-btn) !important;
  color:#ffffff !important;
  padding:12px 28px;
  border-radius:6px;
  font-size:14.5px;
}

.contact-right .wform-poweredby-container{
  position:static;
  margin-top:16px;
  border-radius:8px;
  width:fit-content;
}

/* ===================================================
   RESPONSIVE
=================================================== */
@media (max-width:1024px){
  .contact-grid{
    gap:44px;
  }
  .contact-heading{
    font-size:26px;
  }
}

@media (max-width:900px){
  .contact-section{
    padding:56px 20px;
  }
  .contact-grid{
    grid-template-columns:1fr;
    gap:40px;
  }
  .contact-grid::before{
    display:none;
  }
  .contact-heading{
    max-width:100%;
    margin-bottom:36px;
  }
  .contact-right .wf-form-component{
    padding:28px 24px 32px;
  }
}

@media (max-width:600px){
  .contact-section{
    padding:44px 16px;
  }
  .contact-heading{
    font-size:23px;
    margin-bottom:30px;
  }
  .contact-info-row{
    grid-template-columns:1fr 1fr;
    gap:16px;
  }
  .contact-right .wf-form-component{
    padding:24px 18px 28px;
  }
  .contact-right .wf-header{
    font-size:17px;
  }
}

@media (max-width:480px){
  .contact-info-row{
    grid-template-columns:1fr;
    gap:20px;
  }
  .contact-heading{
    font-size:21px;
  }
  .contact-eyebrow{
    font-size:14px;
  }
  .contact-right .wform-btn-wrap{
    justify-content:stretch;
  }
  .contact-right .wf-btn{
    width:100%;
    text-align:center;
  }
}

@media (max-width:360px){
  .contact-section{
    padding:32px 12px;
  }
  .contact-heading{
    font-size:19px;
  }
  .contact-right .wf-form-component{
    padding:20px 14px 24px;
  }
}

/* ============================================================
   MANUFACTURING PROCESS SECTION
   ============================================================ */

/* =========================================================
   MANUFACTURING PROCESS — TALK TO AN EXPERT LIQUID FILL
   ========================================================= */

.process-section #processTalkBtn {
  --process-button-background: #ffffff;
  --process-button-border: var(--coral);
  --process-button-text: var(--coral-deep);
  --process-button-fill: var(--coral-deep);
  --process-button-hover-text: #ffffff;

  position: relative;
  isolation: isolate;
  overflow: hidden;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  flex-shrink: 0;

  padding: 12px 26px;

  border: 1.5px solid var(--process-button-border);
  border-radius: 8px;

  background: var(--process-button-background);
  color: var(--process-button-text);

  font-family: "Hind", sans-serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;

  white-space: nowrap;
  cursor: pointer;

  margin-top: 0;

  appearance: none;
  -webkit-appearance: none;

  transition: none;
}

/* Manufacturing Process — button size */
.process-section #processTalkBtn {
  min-width: 220px;
  min-height: 54px;
  padding: 15px 34px;
  font-size: 17px;
  border-radius: 10px;
}

/* Oversized coral oval liquid layer */
.process-section #processTalkBtn::before {
  content: "";

  position: absolute;
  z-index: 0;

  top: 0;
  left: -150%;

  width: 150%;
  height: 90px;

  background: var(--process-button-fill);
  background-image: none;

  border-radius: 50%;

  transform: none;
  transition: left 0.6s ease;

  pointer-events: none;
}

/* Keep the text above the liquid layer */
.process-section #processTalkBtn .talk-btn-label {
  position: relative;
  z-index: 2;

  display: inline-block;

  color: var(--process-button-text);

  transition: color 0.35s ease;

  pointer-events: none;
}

/* Coral liquid enters from left to right */
.process-section #processTalkBtn:hover::before,
.process-section #processTalkBtn:focus-visible::before {
  left: 0;
  transform: none;
}

/* Text becomes white */
.process-section #processTalkBtn:hover .talk-btn-label,
.process-section #processTalkBtn:focus-visible .talk-btn-label {
  color: var(--process-button-hover-text);
}

/* Prevent movement, scaling and shadows */
.process-section #processTalkBtn:hover,
.process-section #processTalkBtn:active {
  background: var(--process-button-background);

  transform: none;
  box-shadow: none;
}

/* Keyboard focus */
.process-section #processTalkBtn:focus-visible {
  outline: 3px solid rgba(230, 57, 70, 0.25);
  outline-offset: 4px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .process-section #processTalkBtn::before,
  .process-section #processTalkBtn .talk-btn-label {
    transition: none;
  }
}


.process-section{
  --navy-dark:#1B1B4D;
  --navy:#3A46AA;
  --coral:#EE5B75;
  --coral-deep:#E63946;
  --text-muted:#000000;
  --max-width:1240px;

  font-family:'Hind', sans-serif;
  max-width:var(--max-width);
  margin:0 auto;
  padding:64px 24px 86px;
  color:var(--navy-dark);
  box-sizing:border-box;
}

   /* 


.process-section{
  --navy-dark:#1B1B4D;
  --navy:#3A46AA;
  --coral:#EE5B75;
  --coral-deep:#E63946;
  --text-muted:#6b7280;
  --max-width:1240px;

  font-family:'Hind', sans-serif;
  max-width:var(--max-width);
  margin:0 auto;
  color:var(--navy-dark);
  box-sizing:border-box;
 
} */

.process-section *{
  box-sizing:border-box;
}

.process-section .eyebrow{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:14px;
  /* border:2px solid yellow; */
}

.process-section .eyebrow-icon{
  width:26px;
  height:26px;
  color:#2c3394;
  flex-shrink:0;
}

.process-section .eyebrow-text{
  font-size:24px;
  font-weight:500;
  color:#000000;
  position:relative;
  padding-bottom:0px;
  /* border:2px solid red; */
}

.process-section .eyebrow-text::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:100%;
  height:1px;
  background:#2c3394;
}

.process-section .header-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:1px;
  flex-wrap:wrap;
     /* border:2px solid red; */

}

.process-section .main-heading{
  font-size:40px;
  font-weight:700;
  line-height:1.15;
  letter-spacing:-0.5px;
  color:#0d0d1f;
  max-width:700px;
  margin:0;
     /* border:2px solid blue; */

}

.process-section .talk-btn{
  position:relative;
  flex-shrink:0;
  overflow:hidden;
  padding:12px 26px;
  border:1.5px solid var(--coral);
  border-radius:8px;
  background:#fff;
  font-family:'Hind', sans-serif;
  font-size:15px;
  font-weight:600;
  cursor:pointer;
  white-space:nowrap;
  margin-top:0px;
  isolation:isolate;
     /* border:2px solid yellow; */

}

/* .process-section .talk-btn-label{
  position:relative;
  z-index:2;
  color:var(--coral-deep);
  transition:color .5s ease;
} */

/* .process-section .talk-btn:hover .talk-btn-label{
  color:#fff;
} */

/* .process-section .wave-layer{
  position:absolute;
  left:0;
  bottom:0;
  width:100%;
  height:220%;
  z-index:1;
  overflow:hidden;
  transform:translateY(78%);
  transition:transform .55s cubic-bezier(.4,0,.2,1);
} */

/* .process-section .wave-inner{
  position:absolute;
  left:0;
  bottom:0;
  width:200%;
  height:100%;
  animation:processWaveDrift 6s linear infinite;
} */

/* .process-section .wave-inner svg{
  display:block;
  width:50%;
  height:100%;
  float:left;
} */

/* .process-section .wave-back{
  opacity:.5;
  transform:translateY(78%);
} */

/* .process-section .wave-back .wave-inner{
  animation-duration:9s;
  animation-direction:reverse;
} */

/* .process-section .wave-front .wave-inner{
  animation-duration:5s;
} */

/* .process-section .talk-btn:hover .wave-layer{
  transform:translateY(2%);
} */

/* .process-section .talk-btn:hover .wave-back{
  transform:translateY(-4%);
} */

/* @keyframes processWaveDrift{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
} */

.process-section .card-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:48px 40px;
  margin-top:56px;
}

.process-section .card{
  text-align:center;
  opacity:0;
  transform:translateY(46px);
}

.process-section .card.in-view{
  animation:processRiseUp .7s cubic-bezier(.22,.98,.36,1) forwards;
}

@keyframes processRiseUp{
  to{
    opacity:1;
    transform:translateY(0);
  }
}

.process-section .icon-wrap{
  position:relative;
  width:100px;
  height:100px;
  margin:0 auto 28px;
  border:1px solid #fff;
}

.process-section .icon-wrap::before{
  content:"";
  position:absolute;
  top:4px;
  left:4px;
  width:100%;
  height:100%;
  border-radius:22px;
  border:1.6px solid var(--navy);
  background:transparent;
  transition:border-color .3s ease, transform .3s ease;
}

.process-section .card:hover .icon-wrap::before{
  border-color:var(--coral-deep);
}

.process-section .icon-box{
  position:relative;
  z-index:1;
  width:100px;
  height:100px;
  border-radius:22px;
  background:var(--navy);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:none;
  border:1px solid rgba(255,255,255,0.15);
  transition:background .3s ease, box-shadow .3s ease, transform .3s ease;
}

.process-section .icon-box svg{
  width:46px;
  height:46px;
  stroke:#ffffff;
  fill:none;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
  transition:transform .3s ease;
}

.process-section .icon-box img{
  width:46px;
  height:46px;
  object-fit:contain;
  transition:transform .3s ease;
}

.process-section .card:hover .icon-box{
  background:var(--coral-deep);
  box-shadow:none;
  transform:translate(4px, 4px);
}

.process-section .card-title{
  font-size:21px;
  font-weight:700;
  color:#0d0d1f;
  margin-bottom:12px;
  transition:color .3s ease;
}

.process-section .card:hover .card-title{
  color:var(--coral-deep);
}

.process-section .card-desc{
  font-size:15px;
  line-height:1.6;
  color:var(--text-muted);
  max-width:288px;
  margin:0 auto;
}




@media (max-width:900px){
  .process-section .card-grid{
    grid-template-columns:repeat(2, 1fr);
    gap:40px 24px;
  }
  .process-section .main-heading{
    font-size:34px;
  }
}

/* Tablet portrait (e.g. iPad Mini, 768px): the heading no longer fits
   next to the button on one line, so .header-row wraps it — landing the
   button top-left, directly under the heading. Reusing the same
   display:contents + order technique as the mobile block below, but
   scoped to this range only, moves the button after the card grid
   instead of leaving it stranded mid-wrap. */
@media (min-width:561px) and (max-width:780px){
  .process-section{
    display:flex;
    flex-direction:column;
  }

  .process-section .eyebrow{
    order:1;
  }

  .process-section .header-row{
    display:contents;
  }

  .process-section .main-heading{
    order:2;
  }

  .process-section .card-grid{
    order:3;
  }

  .process-section .talk-btn{
    order:4;
    align-self:center;
  }

  .process-section #processTalkBtn{
    margin-top:24px;
  }
}

@media (max-width:560px){
  .process-section{
    padding:40px 16px 56px;
    display:flex;
    flex-direction:column;
  }

  .process-section .eyebrow{
    justify-content:flex-start;
    order:1;
  }

  /* header-row no longer boxes its children — lets heading & button
     become independent flex items of .process-section so we can
     reorder them relative to card-grid */
  .process-section .header-row{
    display:contents;
  }

  .process-section .main-heading{
    font-size:26px;
    max-width:100%;
    text-align:left;
    order:2;
  }

  .process-section .card-grid{
    grid-template-columns:repeat(2, 1fr);
    gap:32px 14px;
    margin-top:36px;
    order:3;
  }

  .process-section .talk-btn{
    align-self:flex-start;
    order:4;
  }

  .process-section #processTalkBtn{
    min-width:0;
    min-height:0;
    padding:11px 22px;
    font-size:14px;
    border-radius:8px;
    margin-top:28px;
  }

  .process-section .icon-wrap{
    width:72px;
    height:72px;
    margin-bottom:16px;
  }

  .process-section .icon-box{
    width:72px;
    height:72px;
    border-radius:16px;
  }

  .process-section .icon-box svg{
    width:32px;
    height:32px;
  }

  .process-section .icon-box img{
    width:32px;
    height:32px;
  }

  .process-section .card-title{
    font-size:16px;
    margin-bottom:8px;
  }

  .process-section .card-desc{
    font-size:12.5px;
    max-width:100%;
    line-height:1.5;
  }
}
@media (max-width:380px){
  .process-section .card-grid{
    gap:24px 10px;
  }
  .process-section .icon-wrap{
    width:60px;
    height:60px;
  }
  .process-section .icon-box{
    width:60px;
    height:60px;
    border-radius:14px;
  }
  .process-section .icon-box svg{
    width:26px;
    height:26px;
  }

  .process-section .icon-box img{
    width:26px;
    height:26px;
  }
}

/* 
@media (max-width:900px){
  .process-section .card-grid{
    grid-template-columns:repeat(2, 1fr);
  }
}

@media (max-width:560px){
  .process-section .card-grid{
    grid-template-columns:1fr;
  }
  .process-section .main-heading{
    font-size:30px;
  }
  .process-section .header-row{
    flex-direction:column;
  }
}

@media (prefers-reduced-motion: reduce){
  .process-section .card{
    opacity:1;
    transform:none;
    animation:none !important;
  }
}

 */






/* =====================================================================
   PAGE WRAPPER (preview only — remove when embedding into your site)
   ===================================================================== */
/* body{
  margin: 0;
  padding: 60px 20px;
  background: #f3f5f9;
} */

/* ====================/* =====================================================================
   OUR STORY SECTION
   ===================================================================== */

.story-section{
  --story-navy: #1a2456;
  --story-navy-2: #232f6b;
  --story-accent-blue: #2c3e8c;
  --story-border-dash: #a9c7fb;
  --story-text-heading: #14172b;
  --story-text-body: #5b6270;

  max-width: 1240px;
  margin: 0 auto;
  font-family: 'Hind', 'Segoe UI', Arial, Helvetica, sans-serif;
  color: var(--story-text-body);
  box-sizing: border-box;
}

.story-section *{ box-sizing: border-box; }

/* ---------------------------------------------------------------
   Desktop (default, >900px): grid areas replicate the ORIGINAL
   layout exactly — media on the left spanning both rows, header
   block + content-col stacked on the right, in original order.
   --------------------------------------------------------------- */
.story-card{
  border-radius: 24px;
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "media  header"
    "media  content";
  column-gap: 26px;
  row-gap: 0;
  align-items: center;
}

.story-header-block{ grid-area: header; }
.story-section .media-col{ grid-area: media; }
.story-section .content-col{ grid-area: content; }

.story-header-block .eyebrow{ margin-bottom: 8px; }
.story-header-block .story-heading{ margin: 0; }
.story-header-block .story-sub{ margin: 0 0 5px; margin-top: 24px; }

.story-section .media-col{
  position: relative;
  width: 100%;
  max-width: 612px;
  height:616px;
  aspect-ratio: 602 / 626;
  --notch-x: 50.03%;
  --notch-y: 66.61%;
  --gap: 24px;
  border-radius: 26px;
}

/* -----------------------------------------------------------------
   .big-media uses an SVG clipPath (#storyBigMediaClip) instead of a
   polygon() clip-path so the outer corners stay rounded and the inner
   notch corner gets a smooth concave fillet (built in script.js).
   ----------------------------------------------------------------- */
.story-section .big-media{
  position: absolute;
  inset: 0;
  border-radius: 26px; /* fallback while clip-path/path data is being computed on load */
  overflow: hidden;
  clip-path: url(#storyBigMediaClip);
}

.story-section .big-media video{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #c9cbd1;
}

/* Poster/thumbnail overlay — sits above the <video> and below the play
   button + controls. Visible on load, hidden once playback is actually
   rendering frames, and brought back when the video ends (or if
   playback never starts, e.g. autoplay being blocked). */
.story-section .story-video-thumbnail{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  cursor: pointer;
  z-index: 1;
  transition: opacity 0.25s ease;
}

.story-section .story-video-thumbnail.is-hidden{
  opacity: 0;
  pointer-events: none;
}

.story-section .play-btn{
  position: absolute;
  top: 43.56%;
  left: 50.83%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  background: transparent;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.2s ease, opacity 0.2s ease;
  z-index: 2;
}

.story-section .play-btn:hover{
  transform: translate(-50%, -50%) scale(1.12);
}

.story-section .play-btn:active{
  transform: translate(-50%, -50%) scale(0.96);
}

.story-section .play-btn.is-hidden{
  opacity: 0;
  pointer-events: none;
}

.story-section .play-btn .play-btn__icon{
  width: 64px;
  height: 64px;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.35));
  transition: filter 0.2s ease;
}

.story-section .play-btn:hover .play-btn__icon{
  filter: drop-shadow(0 6px 14px rgba(0,0,0,0.45));
}

/* Each play-btn holds both a play icon and a replay icon; only one
   shows at a time depending on whether the video has already ended. */
.story-section .play-btn .play-btn__icon--replay{ display: none; }
.story-section .play-btn.is-ended .play-btn__icon--play{ display: none; }
.story-section .play-btn.is-ended .play-btn__icon--replay{ display: block; }

/* Play button scales down with the shrinking video box instead of
   staying a fixed 64px — otherwise it balloons to a quarter of the
   video's width on small phones. */
@media (max-width:640px){
  .story-section .play-btn{ width:48px; height:48px; }
  .story-section .play-btn .play-btn__icon{ width:48px; height:48px; }
}

@media (max-width:430px){
  .story-section .play-btn{ width:40px; height:40px; }
  .story-section .play-btn .play-btn__icon{ width:40px; height:40px; }
}

@media (max-width:360px){
  .story-section .play-btn{ width:36px; height:36px; }
  .story-section .play-btn .play-btn__icon{ width:36px; height:36px; }
}

/* Persistent play/pause + mute controls, bottom-right of the video.
   Unlike .play-btn (which hides once playback starts, kept as the
   inviting "tap to start" moment), these stay visible the whole time
   so playback can always be toggled without hunting for the video. */
.story-video-controls{
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 3;
  display: flex;
  gap: 10px;
}

.story-video-controls__btn{
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  background: rgba(17, 17, 26, 0.55);
  backdrop-filter: blur(2px);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.15s ease;
}

.story-video-controls__btn:hover{ background: rgba(17, 17, 26, 0.78); }
.story-video-controls__btn:active{ transform: scale(0.92); }

.story-video-controls__btn svg{ width: 18px; height: 18px; }

/* Each button holds both icons; only one shows at a time based on state. */
.story-video-controls__btn .icon-pause,
.story-video-controls__btn .icon-muted{ display: none; }

.story-video-controls__btn.is-playing .icon-play{ display: none; }
.story-video-controls__btn.is-playing .icon-pause{ display: block; }

.story-video-controls__btn.is-muted .icon-unmuted{ display: none; }
.story-video-controls__btn.is-muted .icon-muted{ display: block; }

@media (max-width:640px){
  .story-video-controls{ right: 12px; bottom: 12px; gap: 8px; }
  .story-video-controls__btn{ width: 32px; height: 32px; }
  .story-video-controls__btn svg{ width: 15px; height: 15px; }
}

.story-section .small-photo{
  position: absolute;
  left: 0;
  bottom: 0;
  width: 271px;
  height: 185px;
  border-radius: 40px;
  overflow: hidden;
  z-index: 3;
  border: none;
}

.story-section .small-photo img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.story-section .iso-badge{
  position: absolute;
  left: -18px;
  bottom: -28px;
  width: 118px;
  height: 118px;
  background: var(--story-navy);
  border-radius: 50%;
  border: 6px solid #fff;
  box-shadow: 0 10px 24px rgba(20, 23, 43, 0.28);
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-align: center;
  line-height: 1.1;
}

.story-section .iso-badge .check{
  width: 22px;
  height: 22px;
  margin-bottom: 2px;
}

.story-section .iso-badge .top-line{
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.story-section .iso-badge .year{
  font-size: 11px;
  font-weight: 400;
  opacity: 0.85;
}

.story-section .iso-badge .bottom-line{
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  margin-top: 2px;
}

.story-section .eyebrow{
  display: flex;
  align-items: center;
  gap: 8px;
  color:#000000;
  font-weight: 700;
  font-size: 24px;
  letter-spacing: 0.3px;
  margin-bottom: 8px;
  text-decoration: underline;
  text-underline-offset: 8px;
  text-decoration-color: #2c3399;
  text-decoration-thickness: 1px;
}

.story-section .eyebrow svg{
  width: 18px;
  height: 18px;
}

.story-section h1.story-heading{
  font-size:36px;
  line-height: 1.2;
  color: var(--story-text-heading);
  font-weight: 700;
}

.story-section .story-sub{
  font-size: 16px;
  font-weight: 500;
  color: var(--story-text-heading);
  margin: 0 0 5px;
  margin-top:24px;
}

.story-section .story-intro{
  font-size: 16px;
  line-height: 1.7;
  margin: 0 0 26px;
  color: #000000;

  max-width: 600px;
}

.story-section .story-inline-link{
  color: var(--primary);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  transition: color 0.2s ease;
}

.story-section .story-inline-link:hover,
.story-section .story-inline-link:focus-visible{
  color: #14172b;
}

.story-section .mv-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin-bottom: 22px;
}

.story-section .mv-grid .mission-box{
  padding-right: 26px;
  border-right: 1px solid var(--story-border-dash);

}

.story-section .mv-grid .vision-box{
  padding-left: 26px;
}

.story-section .mv-grid h3{
  font-size: 16px;
  color: var(--story-text-heading);
  margin: 0 0 8px;
  font-weight: 700;
}

.story-section .mv-grid p{
  font-size: 16px;
  line-height: 1.65;
  margin: 0;
  color: #000000;
}

.story-section .story-closing{
  font-size: 16px;
  line-height: 1.7;
  margin: 0 0 28px;
  color: #000000;
}

/* .story-section .cta-btn{
  display: inline-block;
  background: var(--story-navy);
  color: #fff;
  font-size: 14.5px;
  font-weight: 600;
  padding: 13px 28px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.15s ease;
} */


/* .story-section .cta-btn:hover{
  background: var(--story-navy-2);
  transform: translateY(-1px);
} */

/* =========================================================
   OUR STORY — TALK TO AN EXPERT LIQUID FILL
   ========================================================= */

.story-section #ctaBtn {
  --story-button-color: #3a46a8;
  --story-button-text: #ffffff;
  --story-button-fill: #ffffff;
  --story-button-hover-text: #3a46a8;

  position: relative;
  isolation: isolate;
  overflow: hidden;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 170px;
  height: 44px;
  padding: 11px 22px;
  margin-top: 40px;

  border: 1px solid var(--story-button-color);
  border-radius: 8px;

  background: var(--story-button-color);
  color: var(--story-button-text);

  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;

  cursor: pointer;

  appearance: none;
  -webkit-appearance: none;

  transition: none;
}

.story-section #ctaBtn::before {
  content: "";

  position: absolute;
  z-index: 0;

  top: 0;
  left: -150%;

  width: 150%;
  height: 90px;

  background: var(--story-button-fill);
  background-image: none;

  border-radius: 50%;

  /*
   Critical reset:
   The global .cta-btn::before has a rotated transform.
  */
  transform: none;

  transition: left 0.6s ease;

  pointer-events: none;
}

.story-section #ctaBtn .cta-btn__label {
  position: relative;
  z-index: 2;

  display: inline-block;

  color: var(--story-button-text);

  transition: color 0.35s ease;

  pointer-events: none;
}

.story-section #ctaBtn:hover::before,
.story-section #ctaBtn:focus-visible::before {
  left: 0;
  transform: none;
}

.story-section #ctaBtn:hover .cta-btn__label,
.story-section #ctaBtn:focus-visible .cta-btn__label {
  color: var(--story-button-hover-text);
}

.story-section #ctaBtn:hover {
  background: var(--story-button-color);
  color: var(--story-button-text);

  transform: none;
  box-shadow: none;
}

.story-section #ctaBtn:focus-visible {
  outline: 3px solid rgba(27, 27, 77, 0.28);
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .story-section #ctaBtn::before,
  .story-section #ctaBtn .cta-btn__label {
    transition: none;
  }
}

@keyframes storySlideInFromLeft{
  from{ opacity: 0; transform: translateX(-64px); }
  to{ opacity: 1; transform: translateX(0); }
}

.story-section .anim-in{
  animation: storySlideInFromLeft 0.7s ease-out both;
}

.story-section .anim-delay-1{ animation-delay: 0s; }
.story-section .anim-delay-2{ animation-delay: 0.18s; }
.story-section .anim-delay-3{ animation-delay: 0.4s; }
.story-section .anim-delay-4{ animation-delay: 0.62s; }
.story-section .anim-delay-5{ animation-delay: 0.8s; }

@media (prefers-reduced-motion: reduce){
  .story-section .anim-in{
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* ---------------------------------------------------------------
   Mobile + Tablet (≤1024px, covers iPad Pro): reflow to a single
   column in the order header (eyebrow + heading + sub) → video →
   rest of content. Desktop above this breakpoint is unaffected.
   --------------------------------------------------------------- */
@media (max-width: 1024px){
  .story-card{
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    grid-template-areas:
      "header"
      "media"
      "content";
    row-gap: 28px;
    column-gap: 0;
    padding: 28px;
  }

  .story-header-block .eyebrow{ font-size: 20px; }
  .story-header-block .story-heading{ font-size: 30px; }
  .story-header-block .story-sub{ margin-top: 10px; }

  /* height:auto + aspect-ratio keeps the video box proportional at
     any width, instead of the fixed 616px height fighting a shrunk
     container width */
  .story-section .media-col{
    max-width: 460px;
    width: 100%;
    height: auto;
    margin: 0 auto;
  }

  /* small photo scales with the media box instead of staying pinned
     at a fixed 271x185px, which is what made it look misplaced once
     the container got narrower than desktop */
  .story-section .small-photo{
    width: 44%;
    height: 30%;
    min-width: 140px;
    min-height: 100px;
  }

  .story-section .mv-grid{
    grid-template-columns: 1fr;
  }
  .story-section .mv-grid .mission-box{
    padding-right: 0;
    border-right: none;
    border-bottom: 1px solid var(--story-border-dash);
    padding-bottom: 18px;
    margin-bottom: 18px;

  }
  .story-section .mv-grid .vision-box{
    padding-left: 0;
  }

  /* #ctaBtn's own margin-top (40px, set for desktop) doesn't collapse
     with .story-closing's margin-bottom since the button is inline-flex —
     the two stack to a flat 68px gap at every width. Scale it down here
     instead of shrinking it everywhere. */
  .story-section #ctaBtn{
    margin-top: 24px;
  }
}

@media (max-width: 480px){
  .story-section{ padding: 22px 14px; }
  .story-card{ padding: 20px; border-radius: 18px; row-gap: 22px; }
  .story-header-block .story-heading{ font-size: 25px; }
  .story-header-block .eyebrow{ font-size: 18px; }
  .story-section .iso-badge{ width: 88px; height: 88px; left: -10px; bottom: -20px; }
  .story-section #ctaBtn{ margin-top: 16px; }
}






/* ===================== EDGE WIDGETS — STYLES ===================== */

:root {
  --edge-text: #000000;
  --edge-text-soft: #000000;
  --edge-accent: #000000;
}

.edge-scrolltop,
.edge-social {
  position: fixed;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--edge-text-soft);
  pointer-events: auto;
}

.edge-scrolltop {
  left: 18px;
  bottom: 40px;
  background: none;
  border: none;
  cursor: pointer;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  padding: 0;

  opacity: 0;
  transform: rotate(180deg) translateY(16px);
  animation: edgeFadeInLeft 0.6s ease forwards;
  animation-delay: 0.3s;

  visibility: hidden;
}

.edge-scrolltop.is-visible {
  visibility: visible;
  animation: edgePopIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
             edgeBreathe 2.8s ease-in-out 0.6s infinite;
}

.edge-scrolltop:hover {
  animation-play-state: paused, paused;
}

@keyframes edgeFadeInLeft {
  to {
    opacity: 1;
    transform: rotate(180deg) translateY(0);
  }
}

@keyframes edgePopIn {
  0% {
    opacity: 0;
    transform: rotate(180deg) translateY(20px) scale(0.7);
  }
  60% {
    opacity: 1;
    transform: rotate(180deg) translateY(-4px) scale(1.08);
  }
  100% {
    opacity: 1;
    transform: rotate(180deg) translateY(0) scale(1);
  }
}

@keyframes edgeBreathe {
  0%, 100% { transform: rotate(180deg) translateY(0); }
  50% { transform: rotate(180deg) translateY(-3px); }
}

.edge-scrolltop-text {
  transition: letter-spacing 0.25s ease;
  position: relative;
}

.edge-scrolltop-dash {
  display: inline-block;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  animation: edgeBounce 1.6s ease-in-out infinite;
}

.edge-scrolltop:hover .edge-scrolltop-text,
.edge-scrolltop:focus-visible .edge-scrolltop-text {
  letter-spacing: 0.12em;
}

.edge-scrolltop:hover .edge-scrolltop-dash,
.edge-scrolltop:focus-visible .edge-scrolltop-dash {
  transform: translateY(-10px) scale(1.3);
}

.edge-scrolltop:hover .edge-scrolltop-dash {
  animation-play-state: paused;
}

.edge-scrolltop:focus-visible {
  outline: 2px solid var(--edge-accent);
  outline-offset: 4px;
}

@keyframes edgeBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

.edge-social {
  right: 18px;
  top: 50%;
  writing-mode: vertical-rl;
  transform: translateY(-50%) rotate(180deg);

  opacity: 0;
  animation: edgeFadeInRight 0.6s ease forwards;
  animation-delay: 0.3s;
}

@keyframes edgeFadeInRight {
  from {
    opacity: 0;
    transform: translateY(-50%) rotate(180deg) translateX(0px);
  }
  to {
    opacity: 1;
    transform: translateY(-50%) rotate(180deg);
  }
}

.edge-social-label {
  color: var(--edge-text-soft);
  display: inline-block;
  animation: edgeLinkIn 0.4s ease forwards, edgeWiggle 3.5s ease-in-out 2s infinite;
  animation-delay: 0.35s, 2s;
}

.edge-social-dash {
  display: inline-block;
  opacity: 0;
  animation: edgeLinkIn 0.4s ease forwards;
  animation-delay: 0.35s;
}

.edge-social-sep {
  color: #000000;
  opacity: 0;
  font-size: 12px;
  animation: edgeSepIn 0.4s ease forwards;
}

.edge-social-link {
  position: relative;
  color: var(--edge-text);
  text-decoration: none;
  font-weight: 700;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  display: inline-block;
}

.edge-social-link::after {
  content: "";
  position: absolute;
  left: 0;
  top: -4px;
  width: 3px;
  height: 0%;
  background: var(--edge-accent);
  transition: height 0.25s ease;
}

.edge-social-link::before {
  content: "";
  position: absolute;
  left: -8px;
  right: -8px;
  top: -4px;
  bottom: -4px;
  border-radius: 4px;
  /* background: rgba(0, 0, 0, 0.08); */
  transform: scale(0.6);
  opacity: 0;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s ease;
  z-index: -1;
  /* border: 2px solid red; */
}

.edge-social-link:hover,
.edge-social-link:focus-visible {
  transform: translateX(5px) scale(1.15);
}

.edge-social-link:hover::after,
.edge-social-link:focus-visible::after {
  height: 100%;
}

.edge-social-link:hover::before,
.edge-social-link:focus-visible::before {
  transform: scale(1);
  opacity: 1;
}

.edge-social-link:focus-visible {
  outline: 2px solid var(--edge-accent);
  outline-offset: 3px;
}

.edge-social-link {
  opacity: 0;
  animation: edgeLinkIn 0.4s ease forwards, edgeRipple 4s ease-in-out infinite;
}

.edge-social-link:hover {
  animation-play-state: paused, paused;
}

@keyframes edgeRipple {
  0%, 100% { transform: translateX(0) scale(1); }
  50% { transform: translateX(2px) scale(1.05); }
}

.edge-social a[data-platform="WhatsApp"]   { animation-delay: 0.45s, 0s; }
.edge-social a[data-platform="LinkedIn"]   { animation-delay: 0.55s, 0.15s; }
.edge-social a[data-platform="YouTube"]    { animation-delay: 0.65s, 0.3s; }
.edge-social a[data-platform="Twitter"]    { animation-delay: 0.75s, 0.45s; }
.edge-social a[data-platform="Facebook"]   { animation-delay: 0.85s, 0.6s; }
.edge-social a[data-platform="Instagram"]  { animation-delay: 0.95s, 0.75s; }

.edge-social-sep:nth-of-type(1) { animation-delay: 0.5s; }
.edge-social-sep:nth-of-type(2) { animation-delay: 0.6s; }
.edge-social-sep:nth-of-type(3) { animation-delay: 0.7s; }
.edge-social-sep:nth-of-type(4) { animation-delay: 0.8s; }
.edge-social-sep:nth-of-type(5) { animation-delay: 0.9s; }

@keyframes edgeLinkIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes edgeSepIn {
  from { opacity: 0; }
  to { opacity: 0.35; }
}

@keyframes edgeWiggle {
  0%, 85%, 100% { transform: rotate(0deg); }
  88% { transform: rotate(-4deg); }
  91% { transform: rotate(4deg); }
  94% { transform: rotate(-3deg); }
  97% { transform: rotate(0deg); }
}

@media (prefers-reduced-motion: reduce) {
  .edge-scrolltop,
  .edge-social,
  .edge-social-link,
  .edge-social-sep,
  .edge-social-label,
  .edge-social-dash,
  .edge-scrolltop-dash {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .edge-scrolltop {
    transform: rotate(180deg) !important;
  }

  .edge-social {
    transform: translateY(-50%) rotate(180deg) !important;
  }
}

/* Hide Follow Us sidebar on mobile — show only on tablet/laptop/desktop */
@media (max-width: 768px) {
  .edge-social {
    display: none !important;
  }
}

@media (max-width: 640px) {
  .edge-scrolltop {
    left: 8px;
    bottom: 24px;
    font-size: 16px;
  }
}


@media (max-width: 480px) {
  .edge-social-label,
  .edge-social-link { font-size: 16px; }
}

@media (max-width: 600px) {
  .pp-arrow,
  .vot-btn-top,
  .firm-badge,
  .edge-social-link {
    min-width: 28px;
    min-height: 28px;
  }
}


/* =====================================================================
   LET'S TALK — Popup Modal
   ===================================================================== */
.talk-modal{
  position:fixed; inset:0; z-index:1300;
  display:none; align-items:center; justify-content:center;
  padding:24px; font-family:'Hind',sans-serif;
}
.talk-modal.is-open{ display:flex; }

.talk-modal__backdrop{
  position:absolute; inset:0;
  background:rgba(15,15,40,0.55);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  opacity:0; transition:opacity .4s ease;
}
.talk-modal.is-open .talk-modal__backdrop{ opacity:1; }

.talk-modal__dialog{
  position:relative; width:100%; max-width:600px; max-height:90vh;
  overflow-y:auto;
  overscroll-behavior:contain; /* stop scroll chaining to the page behind once dialog hits top/bottom */
  -webkit-overflow-scrolling:touch;
  background:linear-gradient(180deg,#EEF2FF 0%, #FFFFFF 45%);
  border-radius:28px; padding:44px 44px 40px;
  opacity:0; transform:scale(.9) translateY(20px);
  transition:opacity .5s cubic-bezier(.16,1,.3,1), transform .5s cubic-bezier(.16,1,.3,1);
}
.talk-modal.is-open .talk-modal__dialog{ opacity:1; transform:scale(1) translateY(0); }
.talk-modal__dialog::-webkit-scrollbar{ width:8px; }
.talk-modal__dialog::-webkit-scrollbar-track{ background:transparent; margin:20px 0; }
.talk-modal__dialog::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,#4F46E5,#3A46AA);
  border-radius:999px; border:2px solid #F7F9FF; background-clip:padding-box;
}
.talk-modal__dialog::-webkit-scrollbar-button{ display:none; width:0; height:0; }

.talk-modal__close{
  position:absolute; top:20px; right:20px; width:40px; height:40px;
  border-radius:50%; border:none; background:#3A46AA; color:#fff;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  box-shadow:0 4px 12px rgba(23,23,43,.15);
  transition:background .25s ease, transform .2s ease; z-index:5;
}
.talk-modal__close:hover{ background:#2C3585; transform:rotate(90deg); }

.talk-modal__heading{
  font-size:26px; font-weight:700; color:#14141F; margin:0 0 8px; padding-right:36px;
}
.talk-modal__subtext{
  font-size:14.5px; line-height:1.6; color:#6B7280; margin:0 0 28px;
}

/* Zoho form cosmetic overrides scoped to the popup only */
.talk-modal .wf-parent{ padding:0; height:auto; background-image:none !important; background-color:transparent !important; }
.talk-modal .wf-wrapper{ max-width:100%; width:100%; border-radius:0; box-shadow:none; background:transparent; }
.talk-modal .wf-form-component{ padding:0; }
.talk-modal .wf-logo, .talk-modal .wf-header{ display:none; }
.talk-modal .wf-label{ font-size:14px; font-weight:600; color:#14141F; padding:0 0 8px; }
.talk-modal .wf-row{ margin-bottom:20px; }
.talk-modal .wf-field-input,
.talk-modal .wf-field-dropdown{
  border:1px solid #DCE6F5; border-radius:10px; background:#fff;
  padding:13px 16px; font-size:14.5px; color:#14141F;
}
.talk-modal .wf-field-input::placeholder{ color:#9AA0B4; }
.talk-modal .wf-field-input:focus{ border-color:#3A46AA; }
.talk-modal .wf-text-area-input{ min-height:120px; height:120px; }
.talk-modal .wform-btn-wrap{ margin-top:4px; justify-content:stretch; }
.talk-modal .wf-btn{
  width:100%; background:#3A46AA !important; border:1px solid #3A46AA !important;
  color:#fff !important; padding:15px 28px; border-radius:12px;
  font-size:15.5px; font-weight:700; text-align:center;
}
.talk-modal .wform-poweredby-container{ position:static; margin-top:14px; border-radius:8px; width:fit-content; }

@media (max-width:640px){
  .talk-modal__dialog{ padding:32px 24px; border-radius:20px; }
  .talk-modal__heading{ font-size:21px; }
}

/* =====================================================================
   MOBILE (≤560px) — uniform 50px top padding on every section,
   and 24px gap between each section's eyebrow label and its main heading
   ===================================================================== */
@media (max-width:430px){

  /* ---- 50px top padding on every major section ---- */
.hero-container{
  padding-top:10px;
  padding-bottom: 20px;
}

.industry-showcase{
  padding-top:0px;
  padding-bottom: 0px;
  /* border:2px solid red; */
  height:420px;
  
}

.process-section{
  padding-top: 0px;
  padding-bottom: 24px;
  /* border: 2px solid red; */
}

.story-section{
  padding-top:24px ;
  padding-bottom:5px;
  /* border:2px solid red; */
}


.machine-series{
  padding-top:20px;
  padding-bottom:10px;

}

.machine-series::before{
  top:0;
  bottom:0;
}


.cta-banner{
  padding-top: 24px;
  padding-bottom: 10px;
  /* border:2px solid black; */
}

.testimonials-section{
  padding-top: 5px;
  padding-bottom: 20px;
}

.faq-section{
  padding-top: 10px;
  padding-bottom:40px;
}
/* 
.vs-section{
  padding-top: 0px;
  padding-bottom: 0px;
  height:auto;
  border:2px solid red;
}
/* 
/* 

.contact-section{
  padding-top: 0px;
  padding-bottom: 0px;
  border:2px solid blue;
}  */


.contact-section{
    padding-top:0 !important;      /* was 44px from the ≤600px block */
    margin-top:0 !important;
  }
  .contact-grid{
    /* border:2px solid red; */
    gap:32px;
    margin-bottom: 0px;   /* overrides desktop's 100px — this removes the gap */
  }


.vs-section{
  padding-top: 0px;
  padding-bottom: 0px;
  height:auto;
  /* border:2px solid red; */
  margin-bottom: 1px;   /* MISSING — desktop's margin-bottom:100px is still active without this */
}

.vs-bottom-line{
  margin-top: 20px;      /* desktop has margin:40px auto 0 — still active without this */
}

.vs-spacer{
  height: 0px;           /* desktop has clamp(24px,5vw,40px) — still active without this */
}

/* 
.contact-heading{
  margin-top:4px;
  margin-bottom:16px;   
}

.footer{
  padding-top: 0px;
  padding-bottom: 10px;;
} */



.contact-info-block{
  /* border:2px solid red; */
  margin-bottom:10px;      /* was implicit/larger via row gap */
}

.contact-info-row{
  gap:14px;                /* was 20px desktop / 16px at 600px */
  margin-bottom:6px;
}

.contact-info-item-title{
  margin-bottom:6px;       /* was 10px */
}

.contact-info-value,
.contact-location-value,
.contact-hours-value{
  margin-left:0;           /* was 24px — frees up wrap width so long emails wrap less awkwardly */
  font-size:14px;
  line-height:1.5;
}

.contact-right .wf-row{
  margin-bottom:12px;      /* was 20px from Zoho's own CSS */
}

.contact-right .wf-text-area-input{
  min-height:70px;         /* was 96-100px */
  height:70px;
}

.contact-right .wform-btn-wrap{
  margin-top:4px;          /* Zoho default is 40px */
}



  /* ---- Consistent eyebrow/heading spacing ----
     1st heading (eyebrow/label) : 24px top, 0px bottom
     2nd heading (main heading)  :  8px top, 24px bottom
     ---------------------------------------------------- */

  /* ── Industry Showcase ── */
  .industry-showcase__label{
    margin-top:24px;
    margin-bottom:0px;
    font-size:16px;
  }
  .industry-showcase__heading{
    margin-top:8px;
    margin-bottom:0px;
    font-size:24px;
  }
  .industry-showcase__header{
    margin-bottom:24px;
  }
  .industry-showcase__track-wrap{
    margin-top:0px;
    margin-bottom: 0px;
    /* border:2px solid red; */
  }

  .industry-progress{
    margin-top:14px !important;    /* was 32px — matches your mobile spacing scale */
    margin-bottom:0 !important;
    /* border:2px solid blue; */
  }

   .industry-showcase{
    /* height:auto !important;        was 430px — fixed height left empty space below the bar */
    padding-bottom:0 !important;   /* section ends exactly at the progress bar */
    /* border:2px solid yellow; */
    height: 360px;
  }

  /* ── Story Section ── */
  .story-section .eyebrow{
    margin-top:0px;
    margin-bottom:0px;
    font-size:16px;
    /* border:2px solid orangered; */
    height:40px;
  }
  .story-section h1.story-heading{
    margin-top:0px;
    margin-bottom:0px;
    font-size:24px;
  }
  .story-section .story-sub{
    margin-top:8px;
    border:2px solid purple;
  }
  .story-card{
    row-gap:14px;
  }

  /* ── Machine Series ── */
  .machine-series__top-row{
    margin-top:0px;
    margin-bottom:0px;
  }
  .machine-series__label{
    margin-top:24px;
    margin-bottom:0px;
    font-size:16px;
  }
  .machine-series__heading{
    margin-top:8px;
    margin-bottom:0px;
    font-size:24px;
  }
  .machine-series__header{
    margin-bottom:24px;
  }

  /* ── Manufacturing Process ── */
  .process-section .eyebrow{
    margin-top:24px;
    margin-bottom:0px;
  }
  .process-section .eyebrow-text{
    font-size:16px;
  }
  .process-section .main-heading{
    margin-top:8px;
    margin-bottom:0px;
    font-size:24px;
  }
  .process-section .card-grid{
    margin-top:24px;
  }

  /* ── Testimonials ── */
  .t-eyebrow{
    margin-top:24px;
    margin-bottom:0px;
    font-size:16px;
  }
  .t-heading{
    margin-top:8px;
    margin-bottom:0px;
    font-size:24px;
  }
  .t-header{
    margin-bottom:24px;
  }

  /* ── Video Showcase ── */
  .vs-label{
    margin-top:24px;
    margin-bottom:0px;
  }
  .vs-label span{
    font-size:16px;
  }
  .vs-heading{
    margin-top:8px;
    margin-bottom:0px;
    font-size:24px;
  }
  .vs-head-row{
    margin-top:0px;
    margin-bottom:24px;
  }

  /* ── FAQ ── */
  .faq-eyebrow{
    margin-top:24px;
    margin-bottom:0px;
    font-size:16px;
  }
  .faq-heading{
    margin-top:8px;
    margin-bottom:24px;
    font-size:24px;
  }

  /* ── Contact ── */
  .contact-eyebrow{
    margin-top:24px;
    margin-bottom:0px;
    font-size:16px;
  }
  .contact-heading{
    margin-top:8px;
    margin-bottom:24px;
    font-size:24px;
  }
}



/* =====================================================================
   TABLET (561px – 1024px) — uniform 24px top gap on every section
   ===================================================================== */
@media (max-width:640px) and (min-width:541px){

  .hero-container{
    padding-top:24px;
  }

  .story-section{
    padding-top:24px;
  }

  .industry-showcase{
    padding-top:24px;
  }

  .machine-series{
    padding-top:24px;
  }

  .cta-banner{
    padding-top:24px;
  }

  .testimonials-section{
    padding-top:24px;
  }

  .vs-section{
    padding-top:24px;
  }

  .process-section{
    padding-top:24px;
  }

  .faq-section{
    padding-top:24px;
  }

  .contact-section{
    padding-top:24px;
  }

  .footer{
    padding-top:24px;
  }

  /* ---- Consistent eyebrow/heading spacing ----
     1st heading (eyebrow/label) : 24px top, 0px bottom
     2nd heading (main heading)  :  8px top, 24px bottom (via wrapper)
     ---------------------------------------------------- */

  /* ── Industry Showcase ── */
  .industry-showcase__label{
    margin-top:24px;
    margin-bottom:0px;
  }
  .industry-showcase__heading{
    margin-top:8px;
    margin-bottom:0px;
  }
  .industry-showcase__header{
    margin-bottom:24px;
  }
  .industry-showcase__track-wrap{
    margin-top:0px;
  }

  /* ── Story Section ── */
  .story-header-block .eyebrow{
    margin-top:24px;
    margin-bottom:0px;
  }    /* border:2px solid green; */

  .story-header-block .story-heading{
    margin-top:0px;
    margin-bottom:0px;
        /* border:2px solid green; */

  }
  .story-card{
    row-gap:24px;
  }

  .machine-series__top-row{
    margin-top:0px;
    margin-bottom:0px;
  }
  .machine-series__label{
    margin-top:24px;
    margin-bottom:0px;
  }
  .machine-series__heading{
    margin-top:8px;
    margin-bottom:0px;
  }
  .machine-series__header{
    margin-bottom:24px;
  }

  /* ── Manufacturing Process ── */
  .process-section .eyebrow{
    margin-top:24px;
    margin-bottom:0px;
  }
  .process-section .main-heading{
    margin-top:8px;
    margin-bottom:0px;
  }
  .process-section .card-grid{
    margin-top:24px;
  }

  /* ── Testimonials ── */
  .t-eyebrow{
    margin-top:24px;
    margin-bottom:0px;
  }
  .t-heading{
    margin-top:8px;
    margin-bottom:0px;
  }
  .t-header{
    margin-bottom:24px;
  }

  /* ── Video Showcase ── */
  .vs-label{
    margin-top:24px;
    margin-bottom:0px;
  }
  .vs-heading{
    margin-top:8px;
    margin-bottom:0px;
  }
  .vs-head-row{
    margin-top:0px;
    margin-bottom:24px;
  }

  /* ── FAQ ── */
  .faq-eyebrow{
    margin-top:24px;
    margin-bottom:0px;
  }
  .faq-heading{
    margin-top:8px;
    margin-bottom:24px;
  }

  /* ── Contact ── */
  .contact-eyebrow{
    margin-top:24px;
    margin-bottom:0px;
  }
  .contact-heading{
    margin-top:8px;
    margin-bottom:24px;
  }

}


/* heading space and alignment */

@media (max-width:540px) and (min-width:431px){

  /* ---- Story section layout ---- */
  /* .story-header-block{
    display: contents;
  }

  .story-card{
    display: flex;
    flex-direction: column;
    align-items: flex-start !important;
  }

  .story-section .media-col{
    order: 3 !important;
    margin-top: 5px !important;
  }

  .story-header-block .story-sub{
    order: 4 !important;
    margin-top: 16px !important;
  }

  .story-section .content-col{
    order: 5;
  }

  .story-section .small-photo{
    position: absolute;
    left: 12px;
    bottom: 2px;
    width: 42%;
    height: 110px;
    min-width: 120px;
    min-height: 90px;
    border-radius: 16px;
    overflow: hidden;
    border: 2px solid black;
    z-index: 3;
  }

  .story-section .small-photo img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  } */

  /* ---- Consistent eyebrow/heading spacing ----
     1st heading (eyebrow/label) : 24px top, 0px bottom
     2nd heading (main heading)  :  8px top, 24px bottom (via wrapper)
     ---------------------------------------------------- */

  /* ── Story Section ── */
  /*.story-header-block .eyebrow{
    margin-top:24px;
    margin-bottom:0px;
    font-size:16px;
  }
  .story-header-block .story-heading{
    margin-top:8px;
    margin-bottom:0px;
    font-size:24px;
  }
  .story-card{
    row-gap:24px;
  }*/
  
  
  
  /* ═══ OUR STORY spacing fix — Mobile ≤430px ═══ */
@media (max-width:430px){
  .story-card{
    row-gap:0 !important;              /* row-gap was adding on top of margins */
  }
  .story-section .eyebrow{
    margin-top:24px !important;        /* 1st heading: 24 top / 0 bottom */
    margin-bottom:0 !important;
    /* border:2px solid blue; */
  }
  .story-section h1.story-heading{
    margin-top:8px !important;         /* 2nd heading: 8 top / 0 bottom */
    margin-bottom:0 !important;
  }
  .story-header-block .story-sub{
    margin-top:8px !important;         /* sub-line hugs the heading */
    margin-bottom:0 !important;
  }
  .story-section .media-col{
    margin-top:24px !important;        /* video container: 24px top */
  }
  .story-section .content-col{
    margin-top:24px !important;        /* content after video keeps the same rhythm */
  }
}

/* ═══ OUR STORY spacing fix — 431px to 540px ═══ */
@media (max-width:540px) and (min-width:431px){
  .story-card{
    row-gap:0 !important;
  }
  .story-header-block .eyebrow{
    margin-top:24px !important;
    margin-bottom:0 !important;
	/* border:2px solid red; */
  }
  .story-header-block .story-heading{
    margin-top:0px !important;
    margin-bottom:0 !important;
  }
  .story-section .media-col{
    margin-top:24px !important;        /* was 5px in this range */
  }
  .story-header-block .story-sub{
    margin-top:24px !important;        /* sub sits below video in this range (order:4) */
    margin-bottom:0 !important;
  }
  .story-section .content-col{
    margin-top:16px !important;
  }
}

  /* ── Industry Showcase ── */
  .industry-showcase__label{
    margin-top:24px;
    margin-bottom:0px;
    font-size:16px;
  }
  .industry-showcase__heading{
    margin-top:8px;
    margin-bottom:0px;
    font-size:24px;
  }
  .industry-showcase__header{
    margin-bottom:24px;
  }
  .industry-showcase__track-wrap{
    margin-top:0px;
  }

  .machine-series__top-row{
    margin-top:0px;
    margin-bottom:0px;
  }
  .machine-series__label{
    margin-top:24px;
    margin-bottom:0px;
    font-size:16px;
  }
  .machine-series__heading{
    margin-top:8px;
    margin-bottom:0px;
    font-size:24px;
  }
  .machine-series__header{
    margin-bottom:24px;
  }

  /* ── Manufacturing Process ── */
  .process-section .eyebrow{
    margin-top:24px;
    margin-bottom:0px;
  }
  .process-section .eyebrow-text{
    font-size:16px;
  }
  .process-section .main-heading{
    margin-top:8px;
    margin-bottom:0px;
    font-size:24px;
  }
  .process-section .card-grid{
    margin-top:24px;
  }

  /* ── Testimonials ── */
  .t-eyebrow{
    margin-top:24px;
    margin-bottom:0px;
    font-size:16px;
  }
  .t-heading{
    margin-top:8px;
    margin-bottom:0px;
    font-size:24px;
  }
  .t-header{
    margin-bottom:24px;
  }

  /* ── Video Showcase ── */
  .vs-label{
    margin-top:24px;
    margin-bottom:0px;
  }
  .vs-label span{
    font-size:16px;
  }
  .vs-heading{
    margin-top:8px;
    margin-bottom:0px;
    font-size:24px;
  }
  .vs-head-row{
    margin-top:0px;
    margin-bottom:24px;
  }

  /* ── FAQ ── */
  .faq-eyebrow{
    margin-top:24px;
    margin-bottom:0px;
    font-size:16px;
  }
  .faq-heading{
    margin-top:8px;
    margin-bottom:24px;
    font-size:24px;
  }

  /* ── Contact ── */
  .contact-eyebrow{
    margin-top:24px;
    margin-bottom:0px;
    font-size:16px;
  }
  .contact-heading{
    margin-top:8px;
    margin-bottom:24px;
    font-size:24px;
  }
}

/* =====================================================================
   BIGIN FORM — SAFE SCOPED BASE
   These rules replace the global CSS generated by Bigin. Every rule is
   restricted to .bigin-form-scope, so navbar/hero/cards/FAQ/footer are
   not reset when the new form is added.
   ===================================================================== */

:where(.bigin-form-scope),
:where(.bigin-form-scope) * {
  box-sizing: border-box;
}

:where(.bigin-form-scope) .shared-bigin-form,
:where(.bigin-form-scope) .bigin-form-host {
  width: 100%;
}

:where(.bigin-form-scope) .wf-parent {
  width: 100%;
  height: auto;
  padding: 0;
  overflow: visible;
  background: transparent;
}

:where(.bigin-form-scope) .wf-wrapper {
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
  border: 0;
  border-radius: 10px;
  background: #ffffff;
  color: #222222;
}

:where(.bigin-form-scope) .wf-form-component {
  position: relative;
  width: 100%;
  margin: 0;
}

:where(.bigin-form-scope) .wf-form-wrapper {
  width: 100%;
}

:where(.bigin-form-scope) .wf-row {
  width: 100%;
  margin: 0 0 20px;
}

:where(.bigin-form-scope) .wf-label {
  display: block;
  width: 100%;
  word-break: break-word;
}

:where(.bigin-form-scope) .wf-field {
  position: relative;
  width: 100%;
  border: 0;
  text-align: left;
}

:where(.bigin-form-scope) .wf-field-inner {
  position: relative;
  display: flex;
  width: 100%;
}

:where(.bigin-form-scope) .wf-field-input,
:where(.bigin-form-scope) .wf-field-dropdown {
  width: 100%;
  min-height: 38px;
  margin: 0;
  border: 1px solid #BDC8D3;
  border-radius: 4px;
  padding: 10px 15px;
  background-color: #ffffff;
  font-family: inherit;
  font-size: 15px;
}

:where(.bigin-form-scope) textarea.wf-field-input {
  display: block;
  resize: vertical;
}

:where(.bigin-form-scope) select.wf-field-dropdown {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 42px;
  background-image:
    url("data:image/svg+xml,%3Csvg fill='black' height='34' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 24px 24px;
}

:where(.bigin-form-scope) .dropdown-contents::after {
  display: none;
}

:where(.bigin-form-scope) .wf-field-mandatory .wf-field-inner::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset-inline-start: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  border-radius: 4px 0 0 4px;
  background: #ff6a6a;
}

:where(.bigin-form-scope) .wf-field-mandatory.no-visual-marker .wf-field-inner::before {
  display: none;
}

:where(.bigin-form-scope) .wf-error-parent-ele {
  display: flex;
  justify-content: flex-end;
}

:where(.bigin-form-scope) .wf-field-error {
  display: none;
  margin-top: 4px;
  color: #FF5050;
  font-size: 12px;
  text-align: right;
}

:where(.bigin-form-scope) .wf-field-error-active .wf-field-error {
  display: block;
}

:where(.bigin-form-scope) .wf-field-error-active .wf-field-input,
:where(.bigin-form-scope) .wf-field-error-active .wf-field-dropdown {
  border-color: #FD6B6D;
  box-shadow: 0 0 1px 1px #F4A2A2;
}

:where(.bigin-form-scope) .wform-btn-wrap {
  display: flex;
  align-items: center;
  margin-top: 40px;
}

:where(.bigin-form-scope) .wf-btn {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  font-weight: 700;
}

:where(.bigin-form-scope) .wf-btn:disabled {
  cursor: wait;
  opacity: 0.7;
}

:where(.bigin-form-scope) .wform-poweredby-container {
  display: inline-flex;
  align-items: center;
  color: #ffffff;
  text-decoration: none;
  background: #23384F;
  font-family: sans-serif;
  font-size: 13px;
  font-weight: 500;
  padding: 6px 8px;
}

:where(.bigin-form-scope) .iframe-container {
  width: 100%;
  min-height: 365px;
  border: 0;
}

.talk-modal .contact-form-subtext {
  display: none;
}

.talk-modal .bigin-form-host--modal {
  width: 100%;
}

@media (max-width: 590px) {
  :where(.bigin-form-scope) .wf-field-input,
  :where(.bigin-form-scope) .wf-field-dropdown,
  :where(.bigin-form-scope) textarea.wf-field-input {
    width: 100%;
  }
}

/* =========================================================
   MOBILE HERO + INDUSTRY FIRST-LOAD FIX
   ========================================================= */

@media (max-width: 640px) {
  .industry-showcase,
  .industry-showcase.is-visible {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* =========================================================
   BIGIN PRODUCT DROPDOWN — V ARROW FIX
   ========================================================= */

:where(.bigin-form-scope) .dropdown-contents {
  position: relative;
}

:where(.bigin-form-scope) select.wf-field-dropdown {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  padding-right: 3rem !important;

  background-image: none !important;

  cursor: pointer;
}

/* Draw the V arrow */
:where(.bigin-form-scope) .dropdown-contents::after {
  content: "";

  display: block;

  position: absolute;
  z-index: 5;

  top: 50%;
  right: 1.125rem;

  width: 0.5rem;
  height: 0.5rem;

  border-right: 0.125rem solid #17172b;
  border-bottom: 0.125rem solid #17172b;

  transform: translateY(-70%) rotate(45deg);
  transform-origin: center;

  pointer-events: none;
}

/* Arrow colour while dropdown is selected */
:where(.bigin-form-scope) .dropdown-contents:focus-within::after {
  border-color: #3f46b5;
}

/* =============================================================
   MACHINE SERIES — DIRECT PRODUCT CARDS
   Scoped to Machine Series so Explore by Industry is unchanged.
============================================================= */
#machineSeries .machine-card__image-wrap--empty {
  background: #F4F5FA;
}

/* A Machine Series card opens one product directly. Hide only the old
   category/product tab strip; retain arrows and all other popup actions. */
#machineModal .machine-modal__tabs-row {
  display: none !important;
}

#machineModal [hidden] {
  display: none !important;
}

/* =========================================================
   MACHINE SERIES — COMPACT PRODUCT CARDS
   Removes empty space without changing image size
   ========================================================= */

/* Desktop */
#machineSeries .machine-card {
  /* height: 285px; */
  height: 309px;
}

#machineSeries .machine-card__image-wrap {
  height: 145px; /* Keep current image size unchanged */
  flex-shrink: 0;
}

#machineSeries .machine-card__body {
  flex: 1;
  /* padding: 14px 20px 18px; */
  padding: 14px 24px 24px;
  display: flex;
  flex-direction: column;
}

#machineSeries .machine-card__title {
  min-height: 36px;
  margin: 0 0 12px;
  line-height: 1.3;

  /* Maximum two lines */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

#machineSeries .machine-card__btn {
  margin-top: auto;
  margin-bottom: 0;
}

/* Tablet */
@media (max-width: 1024px) {
  #machineSeries .machine-card {
    /* height: 270px; */
    height: 294px;
  }

  #machineSeries .machine-card__image-wrap {
    height: 130px; /* Existing tablet image size */
  }

  #machineSeries .machine-card__body {
  padding: 12px 24px 24px;
  }

  /* #machineSeries .machine-card__body {
    padding: 12px 18px 16px;
  } */
}

/* Mobile */
@media (max-width: 600px) {
  #machineSeries .machine-card {
    /* height: 270px; */
    height: 294px;
    min-height: 0;
  }

  #machineSeries .machine-card__image-wrap {
    height: 130px;
  }
}

/* ================================================================
   FOOTER — Figma desktop alignment
   Tablet/mobile rules above remain unchanged.
   ================================================================ */
@media (min-width: 861px) {
  .footer {
    --footer-text-dark: #000000;
    --footer-text-gray: #000000;
    --footer-icon-bg: #ffffff;
    width: min(calc(100% - 48px), 1240px);
    min-height: 403px;
    margin: 0 auto;
    padding: 32px;
    border-radius: 24px;
    overflow: hidden;
  }

  .footer::before {
    display: none;
  }

  .footer-inner {
    width: 100%;
    max-width: none;
    margin: 0;
    grid-template-columns: minmax(360px, 1fr) 179px 257px;
    column-gap: 38px;
    align-items: start;
  }

  .brand-col .logo-row {
    margin: 0 0 36px;
  }

  .footer-logo-image {
    width: 166px;
    height: 44px;
    max-width: none;
  }

  .brand-col h4 {
    margin: 0;
    font-family: 'Hind', sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    color: #000000;
  }

  .brand-col h4.tagline {
    margin: 0;
  }

  .brand-col p {
    width: 448px;
    max-width: 100%;
    margin: 8px 0 39px;
    font-family: 'Hind', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #000000;
  }

  .social-row {
    gap: 16px;
  }

  .social-row a {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #ffffff;
  }

  .social-row a:hover {
    background: #ffffff;
  }

  .social-row svg {
    width: 20px;
    height: 20px;
    fill: #2c3394;
  }

  .link-col {
    padding-top: 20px;
  }

  .link-col h4 {
    margin: 0 0 8px;
    font-family: 'Hind', sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    color: #000000;
  }

  .link-col ul {
    gap: 0;
  }

  .link-col a {
    font-size: 16px;
    font-weight: 400;
    line-height: 37px;
    color: #000000;
  }

  .footer-inner > .link-col:nth-child(2) a {
    font-family: 'Hind', sans-serif;
  }

  .footer-inner > .link-col:nth-child(3) a {
    font-family: 'Poppins', sans-serif;
    line-height: 32px;
  }

  .footer-bottom {
    margin-top: 40px;
    padding-top: 0;
  }

  .footer-bottom p {
    margin: 0;
    font-family: 'Hind', sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 20px;
    color: #000000;
  }
}

@media (min-width: 1200px) {
  .footer {
    height: 403px;
  }

  .footer-inner {
    grid-template-columns: 664px 179px 257px;
  }
}

/* ================================================================
   TESTIMONIALS — mobile/tablet four-line Read more fix
   Desktop (1025px and above) remains unchanged.
   ================================================================ */
@media (max-width: 1024px) {
  .t-card-inner {
    display: flex;
    flex-direction: column;
    padding-bottom: 24px;
  }

  .t-quote {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
    margin: 0;
  }

  .t-read-more {
    position: static;
    align-self: flex-start;
    flex-shrink: 0;
    margin-top: 8px;
  }

  .t-card.is-expanded .t-card-inner {
    height: auto;
    min-height: 250px;
  }

  .t-card.is-expanded .t-quote {
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
  }

  .t-card.is-expanded .t-read-more {
    position: static;
    margin-top: 10px;
  }
}

@media (max-width: 560px) {
  .t-card-inner {
    padding-bottom: 16px;
  }

  .t-card.is-expanded .t-card-inner {
    min-height: 200px;
  }
}

/* ================================================================
   OUR STORY — Figma desktop alignment
   Layout-only overrides. Tablet/mobile and all video interactions stay intact.
   ================================================================ */
@media (min-width: 1240px) {
  .story-section {
    width: 100%;
    max-width: 1237.22px;
  }

  .story-card {
    width: 1237.22px;
    height: 626.2px;
    grid-template-columns: 612px 611px;
    grid-template-rows: 140px 1fr;
    column-gap: 14.22px;
    row-gap: 0;
    align-items: start;
  }

  .story-header-block {
    padding: 22px 0 0 10px;
  }

  .story-header-block .eyebrow {
    min-height: 34px;
    margin-bottom: 16px;
  }

  .story-section .eyebrow {
    gap: 4px;
    font-size: 23.04px;
    font-weight: 500;
    line-height: 1.2;
  }

  .story-section .eyebrow img {
    width: 32px;
    height: 32px;
  }

  .story-section h1.story-heading {
    font-size: 39.81px;
    line-height: 1.1;
  }

  .story-section .media-col {
    width: 612px;
    max-width: 612px;
    height: 616px;
    aspect-ratio: auto;
    --notch-x: 48.66%;
    --notch-y: 68.82%;
  }

  .story-section .big-media {
    width: 612px;
    height: 616px;
    inset: 0 auto auto 0;
  }

  .story-section .small-photo {
    left: 8px;
    top: 441px;
    bottom: auto;
    width: 271.25px;
    height: 185.2px;
  }

  .story-section .content-col {
    width: 611px;
    align-self: start;
  }

  .story-section .story-intro {
    width: 611px;
    max-width: 611px;
    min-height: 130px;
    margin: 0 0 24px;
    font-size: 16px;
    line-height: 26px;
  }

  .story-section .mv-grid {
    width: 597px;
    min-height: 138px;
    grid-template-columns: 262px 335px;
    margin: 0 0 24.57px 10px;
  }

  .story-section .mv-grid .mission-box {
    padding-right: 28px;
  }

  .story-section .mv-grid .vision-box {
    padding-left: 28px;
  }

  .story-section .mv-grid h3 {
    font-size: 16px;
    line-height: 26px;
    margin: 0 0 8px;
  }

  .story-section .mv-grid p {
    font-size: 16px;
    line-height: 26px;
  }

  .story-section .story-closing {
    width: 597px;
    min-height: 78px;
    margin: 0 0 32.43px 10px;
    font-size: 16px;
    line-height: 26px;
  }

  .story-section #ctaBtn {
    width: 149px;
    height: 37px;
    margin: 0 0 0 10px;
    padding: 8px 16px;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.2;
  }
}