/* =========================================================
   Brooks Steriscience Limited — Landing Page
   ========================================================= */

:root {
  --navy-900: #131637;
  --navy-800: #1c2050;
  --navy-700: #262b66;
  --navy-600: #333a7d;
  --indigo: #6062bd;
  --indigo-dark: #4b4da3;
  --indigo-deep: #3e4094;
  --periwinkle: #8ea6d5;
  --lavender-light: #e6ebf6;
  --green: #a0e97e;
  --green-dark: #83d75d;
  --bg-body: #ffffff;
  --bg-soft: #eef0f4;
  --bg-soft-2: #e6eaf0;
  --text-dark: #131637;
  --text-muted: #5b6b85;
  --text-muted-light: #7c8aa3;
  --white: #ffffff;
  --border-soft: #dde2ea;
  --radius-lg: 28px;
  --radius-md: 18px;
  --radius-sm: 10px;
  --shadow-card: 0 20px 45px -20px rgba(12, 28, 56, 0.25);
  --container-w: 1200px;
  --font: 'Outfit', Arial, Helvetica, sans-serif;
}

* { box-sizing: border-box; }

/* No overflow-x:hidden here — it makes overflow-y compute to `auto`, which
   turns html/body into scroll containers and stops the sticky header from
   sticking. Full-bleed sections clip their own overflow instead. */
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  font-weight: 400;
  color: var(--navy-900);
  background: var(--bg-body);
  -webkit-font-smoothing: antialiased;
}

p { font-weight: 400; }

img { max-width: 100%; display: block; }

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

ul { list-style: none; margin: 0; padding: 0; }

button { font-family: inherit; cursor: pointer; }

.container {
  width: 100%;
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 0 24px;
}

.section-title {
  font-size: clamp(26px, 3.4vw, 36px);
  font-weight: 500;
  color: var(--text-dark);
  margin: 0 0 48px;
}
.section-title.center { text-align: center; }
.section-title.light { color: var(--white); }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: none;
  border-radius: 999px;
  padding: 12px 22px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.btn-primary {
  background: var(--green);
  color: var(--navy-900);
}
.btn-primary:hover {
  background: var(--green-dark);
  transform: translateY(-1px);
  box-shadow: 0 10px 24px -8px rgba(139, 198, 62, 0.6);
}

/* =========================================================
   HEADER
   ========================================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 500;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--border-soft);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 24px;
  padding-top: 14px;
  padding-bottom: 14px;
}

.logo {
  display: flex;
  align-items: center;
}
.logo img {
  height: 62px;
  width: auto;
}

.main-nav { margin-left: auto; }
.main-nav ul { display: flex; gap: 32px; }
.main-nav a {
  font-size: 18px;
  font-weight: 400;
  color: var(--navy-900);
  position: relative;
  padding: 4px 0;
}
.main-nav a::after {
  content: '';
  position: absolute;
  left: 0; bottom: -2px;
  height: 2px; width: 0;
  background: var(--green);
  transition: width 0.25s ease;
}
.main-nav a:hover::after { width: 100%; }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 34px;
  height: 34px;
  background: none;
  border: none;
  padding: 0;
}
.nav-toggle span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--navy-900);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* =========================================================
   HERO
   ========================================================= */
.hero {
  position: relative;
  min-height: 560px;
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

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

.hero-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0) 66%,
      rgba(255, 255, 255, 0.97) 100%),
    linear-gradient(100deg,
      rgba(255, 255, 255, 0.6) 0%,
      rgba(214, 234, 240, 0.4) 45%,
      rgba(190, 222, 232, 0.28) 100%);
}

.hero-inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  min-height: 560px;
}

.hero-inner h1 {
  color: var(--navy-900);
  font-size: clamp(30px, 3.6vw, 50px);
  line-height: 1.2;
  font-weight: 600;
  margin: 0;
  max-width: 620px;
}

.cert-bar-wrap {
  position: relative;
  z-index: 2;
  margin-top: -55px;
}

.cert-bar {
  background: var(--white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: 26px 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  /* Absolutely positioned, so width:100% would resolve against the container's
     padding box and overhang the right gutter — inset to the gutters instead. */
  position: absolute;
  left: 24px;
  right: 24px;
  width: auto;
}

.cert-item {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 14px 10px;
  border-radius: 10px;
  opacity: 0.95;
}
/* Gradient border revealed on hover — painted as a masked gradient ring so the
   stroke can carry a gradient (a plain `border` can't). */
.cert-item::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: linear-gradient(145deg, #e2e8f0 0%, #a8dcea 55%, #46b6d4 100%);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.cert-item:hover::after { opacity: 1; }

.cert-item img {
  height: 60px;
  width: auto;
  transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.cert-item:hover img { transform: scale(1.09); }

/* =========================================================
   FLOATING ENQUIRY BUTTON
   ========================================================= */
.fab-enquiry {
  position: fixed;
  right: 28px;
  bottom: 60px;
  z-index: 600;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--green);
  color: var(--navy-900);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font-size: 12px;
  font-weight: 700;
  box-shadow: 0 14px 30px -8px rgba(12, 28, 56, 0.45);
  transition: transform 0.2s ease, background 0.2s ease;
}
.fab-enquiry:hover {
  background: var(--green-dark);
  transform: translateY(-3px);
}

/* =========================================================
   ABOUT
   ========================================================= */
.about {
  background: var(--bg-soft);
  padding: 190px 0 60px;
}

.about-inner {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 60px;
  align-items: center;
}

.about-text h2 {
  font-size: clamp(26px, 3.2vw, 34px);
  margin: 0 0 22px;
  font-weight: 500;
}

.about-text p {
  color: var(--text-dark);
  font-size: 16px;
  line-height: 28px;
  margin: 0 0 18px;
}

.about-media {
  position: relative;
  min-height: 380px;
}

/* =========================================================
   THREE-LOBE BRAND SHAPE
   Applied as a mask on the frame, so the artwork underneath can be a plain
   rectangular photo. The mask lives on the frame and the zoom lives on the
   <img>, so hovering scales the photo only — the shape itself stays fixed.
   ========================================================= */
.shape-petal {
  overflow: hidden;
  /* Three equal lobes on one baseline, the outer two cropped by the frame.
     Fitted to the original artwork's alpha channel (99% pixel match); the
     aspect-ratio is what keeps the lobes circular rather than oval. */
  aspect-ratio: 643 / 423;
  -webkit-mask-image:
    radial-gradient(32.25% 50.5% at 0% 50%, #000 99.5%, transparent 100%),
    radial-gradient(28.25% 49.5% at 50% 50%, #000 99.5%, transparent 100%),
    radial-gradient(32.25% 50.5% at 100% 50%, #000 99.5%, transparent 100%);
  mask-image:
    radial-gradient(32.25% 50.5% at 0% 50%, #000 99.5%, transparent 100%),
    radial-gradient(28.25% 49.5% at 50% 50%, #000 99.5%, transparent 100%),
    radial-gradient(32.25% 50.5% at 100% 50%, #000 99.5%, transparent 100%)
}
.shape-petal img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.shape-petal:hover img { transform: scale(1.08);}
/* Radius sits on the frame, not the <img>, so the hover zoom cannot push the
   rounded corners out of view. */
.shape-petal { border-radius: 15px; }
.manufacturing-media .shape-petal { border-radius: 0 15px 15px 0; }

.about-blob-main {
  width: 100%;
  margin: 0 auto;
}

/* =========================================================
   OUR JOURNEY
   ========================================================= */
.journey {
  background: linear-gradient(100deg, #f6fef5 0%, #ecf4fe 100%);
  padding: 60px 0;
  position: relative;
  overflow: hidden;
}
/* Decorative brand shape anchored to the right edge of the section.
   The box is locked to the artwork's own 509:667 ratio and stretched to the
   full section height, so the shape spans top-to-bottom and nothing is
   cropped or distorted. */
.journey::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 480px;
  aspect-ratio: 509 / 667;
  background: url('../images/journey-right-shape.webp') no-repeat right center;
  background-size: 100% 100%;
  pointer-events: none;
  z-index: 0;
}

/* Keep the timeline and slides above the shape. */
.journey > .container { position: relative; z-index: 1; }

.journey-timeline {
  position: relative;
  margin-bottom: 56px;
}

.journey-years {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
}
.journey-years::-webkit-scrollbar { display: none; }

.journey-year {
  background: none;
  border: none;
  font-family: inherit;
  padding: 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.journey-year-label {
  font-size: clamp(20px, 2.6vw, 30px);
  font-weight: 500;
  line-height: 1.1;
  color: #c2c7d6;
  white-space: nowrap;
  transition: color 0.35s ease;
}
.journey-year.passed .journey-year-label { color: var(--indigo); }
.journey-year.active .journey-year-label {
  color: var(--indigo-deep);
  font-weight: 700;
}

/* Ticks rise from the line upward only — they never drop below it. */
.journey-year-tick {
  width: 1px;
  height: 20px;
  background: var(--border-soft);
  transition: background 0.35s ease;
}
.journey-year.passed .journey-year-tick,
.journey-year.active .journey-year-tick { background: var(--indigo); }

.journey-line,
.journey-line-progress {
  position: absolute;
  left: 0;
  pointer-events: none;
}
.journey-line {
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--border-soft);
}
.journey-line-progress {
  width: 0;
  bottom: 0;
  height: 2px;
  background: var(--indigo);
  transition: width 0.55s cubic-bezier(0.45, 0, 0.2, 1),
              height 0.55s cubic-bezier(0.45, 0, 0.2, 1);
}

.journey-track-dot {
  position: absolute;
  left: 0;
  bottom: -5px;
  width: 12px;
  height: 12px;
  margin-left: -6px;
  border-radius: 50%;
  background: var(--indigo);
  box-shadow: 0 0 0 5px rgba(96, 98, 189, 0.18);
  transition: left 0.55s cubic-bezier(0.45, 0, 0.2, 1),
              top 0.55s cubic-bezier(0.45, 0, 0.2, 1);
  pointer-events: none;
}

.journey-content {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
  overflow: hidden;
}

.journey-image, .journey-copy { position: relative; z-index: 1; }

.journey-image {
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
/* height:auto (not 100%) — with aspect-ratio, a percentage height makes the
   image's width depend on its own height and the layout never settles. */
.journey-image img {
  width: 100%;
  height: auto;
  object-fit: cover;
  aspect-ratio: 4/3;
  transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* Clipped by .journey-image's overflow:hidden, so it zooms within its frame. */
.journey-image:hover img { transform: scale(1.07); }

.journey-title {
  font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 500;
  line-height: 1.25;
  color: var(--indigo-deep);
  margin: 0 0 16px;
}

.journey-copy p {
  color: var(--text-dark);
  font-size: 15.5px;
  line-height: 1.8;
  margin: 0;
  max-width: 460px;
}

.journey-swiper { overflow: hidden; }

/* =========================================================
   LEADERSHIP
   ========================================================= */
.leadership {
  background: var(--white);
  padding: 60px 0;
}

.leaders-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 50px;
}

.leader-card {
  background: var(--white);
  border: 1px solid var(--border-soft);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  padding: 22px 18px;
  border-radius: var(--radius-sm);
  width: 350px;
  transition: background 0.25s ease, box-shadow 0.25s ease;
}
.leader-card:hover {
  background: var(--white);
  box-shadow: 0 18px 40px -18px rgba(12, 28, 56, 0.3);
}

.leader-photo {
  position: relative;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  overflow: visible;
  margin-bottom: 14px;
  background: #c8d0e0;
}

/* Clips the photo so only it zooms on hover — ring and badge stay put. */
.leader-photo-inner {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  overflow: hidden;
  z-index: 0;
}
.leader-photo-inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: transform 0.4s ease;
}
.leader-card:hover .leader-photo-inner img { transform: scale(1.07); }

/* Ring that appears around the avatar on hover, drawn behind the badge.
   The stroke is a gradient (pale at the top, deepening toward the
   bottom-right), so it's painted as a masked gradient ring rather than a
   flat border. */
.leader-photo::after {
  content: '';
  position: absolute;
  inset: -13px;
  border-radius: 50%;
  padding: 2px;
  background: linear-gradient(178deg, #ffffff 0%, #ffffff 22%, #8e90da 52%, #6062bd 78%, #4b4da3 100%);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0;
  z-index: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.leader-card:hover .leader-photo::after { opacity: 1; }

/* Sits centred on the circle's edge at 45°, no outline (see design).
   This is the only clickable element on the card. */
.leader-plus {
  position: absolute;
  z-index: 2;
  right: 6px;
  bottom: 6px;
  width: 42px;
  height: 42px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #7b7ed3;
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  font-size: 24px;
  font-weight: 300;
  line-height: 1;
  cursor: pointer;
  transition: background 0.25s ease;
}
.leader-plus:hover { background: var(--indigo); }
.leader-plus:focus-visible {
  outline: 2px solid var(--indigo-deep);
  outline-offset: 3px;
}

.leader-name {
  font-size: 18px;
  font-weight: 600;
  line-height: 27px;
  color: var(--text-dark);
}
.leader-role {
  font-size: 16px;
  color: var(--indigo);
  line-height: 23px;
  font-weight: 400;
}

/* The popup copy is authored in index.html inside each card and only ever
   rendered in the dialog, so it stays out of the grid. */
.leader-bio { display: none; }

/* Leadership popup modal */
.modal-overlay {
  position: fixed;
  inset: 0;
  /* Dims the page to the grey in the approved design — light enough that the
     content behind stays readable, and unblurred so it stays crisp. */
  background: rgb(0 0 0 / 57%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}
.modal-overlay.open {
  opacity: 1;
  visibility: visible;
}

.leader-modal {
  background-color: #f3f5fd;
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 70px -20px rgba(0,0,0,0.4);
  max-width: 900px;
  width: 100%;
  position: relative;
  /* Clips the corner shapes to the rounded panel. The scrolling moved to
     .leader-modal-inner, so the shapes below stay put on a long bio. */
  overflow: hidden;
  transform: translateY(16px) scale(0.98);
  opacity: 0;
  transition: transform 0.28s ease, opacity 0.28s ease;
}

/* Decorative corner artwork — behind everything, and never in the way. */
.leader-modal::before,
.leader-modal::after {
  content: '';
  position: absolute;
  z-index: 0;
  pointer-events: none;
}
/* Teal arc, bottom-left. Its own transparent padding does the positioning. */
.leader-modal::before {
  left: 0;
  bottom: 0;
  width: 42%;
  aspect-ratio: 435 / 335;
  background: url('../images/popup-left-shape.webp') left bottom / 100% 100% no-repeat;
}
/* Blue sliver down the right edge. */
.leader-modal::after {
  right: 0;
  top: 0;
  height: 100%;
  /* The sliver is widest at its top, so this width is what decides how far it
     reaches into the first line of the bio. Measured against the text. */
  width: 16%;
  background: url('../images/popup-right-shape.webp') right top / 100% 100% no-repeat;
}

.leader-modal-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 36px;
  /* Right padding holds the text off the sliver — verified per line against the
     artwork's painted edge, not its bounding box. */
  padding: 40px 96px 40px 40px;
  max-height: 86vh;
  overflow-y: auto;
}
.modal-overlay.open .leader-modal {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.modal-close {
  position: absolute;
  z-index: 2;
  top: 18px; right: 18px;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid var(--border-soft);
  background: var(--white);
  color: var(--text-dark);
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s ease;
}
.modal-close:hover { background: var(--bg-soft); }

/* The photo sits on its own white card, which is what separates it from the
   tinted panel behind. */
.leader-modal-photo {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  align-self: start;
  background: var(--white);
  border: 1px solid #e9eef6;
  border-radius: 16px;
  padding: 10px 10px 16px;
  box-shadow: 0 8px 24px -16px rgba(19, 22, 55, 0.35);
}
.leader-modal-photo img {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 14px;
}
.leader-modal-name { font-weight: 700; font-size: 16px; color: var(--text-dark); }
.leader-modal-role { font-size: 13px; color: var(--indigo); font-weight: 600; margin-top: 2px; }

.leader-modal-bio p {
  color: var(--text-dark);
  font-size: 14.5px;
  line-height: 1.8;
  margin: 0 0 16px;
}
.leader-modal-bio p:last-child { margin-bottom: 0; }

/* =========================================================
   PRODUCT PORTFOLIO
   ========================================================= */
.products {
  background: var(--periwinkle);
  padding: 60px 0;
  /* Clips the full-bleed slider (100vw can exceed the content width when a
     classic scrollbar is present). */
  overflow: hidden;
}

/* Full-bleed slider: breaks out of the container to the viewport width so the
   next card runs off the right edge, matching the Figma design. */
.products-swiper {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  overflow: hidden;
  padding-bottom: 8px;
}
.products-swiper .swiper-wrapper { align-items: stretch; }
.products-swiper .swiper-slide { height: auto; display: flex; }
.products-swiper .product-card { width: 100%; }

.product-card {
  background: var(--lavender-light);
  border-radius: var(--radius-md);
  padding: 26px 22px 22px;
  text-align: center;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.product-card img {
  margin: 0 auto 18px;
  max-height: 220px;
  object-fit: contain;
}

.product-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 500;
  font-size: 16px;
  color: var(--text-dark);
  letter-spacing: 0.3px;
  background: var(--white);
  border-radius: 999px;
  padding: 12px 18px;
  box-shadow: var(--shadow-card);
}
.product-label .dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--indigo);
  flex-shrink: 0;
}

/* ---------- Product card hover effect ----------
   Card lifts slightly; image and label button zoom in.
   Transitions live on the base state so everything eases
   back to normal when the mouse leaves. */
.products-swiper {
  /* Room for the lifted card + shadow so the swiper's overflow:hidden
     doesn't clip it; negative margins keep the layout unchanged. */
  padding-top: 14px;
  margin-top: -14px;
  padding-bottom: 22px;
  margin-bottom: -14px;
}
.product-card {
  transition: transform 0.35s ease, box-shadow 0.35s ease;
  will-change: transform;
}
.product-card img {
  transition: transform 0.35s ease;
}
.product-label {
  transition: transform 0.35s ease;
}
@media (hover: hover) {
  .product-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.12);
  }
  .product-card:hover img {
    transform: scale(1.07);
  }
  .product-card:hover .product-label {
    transform: scale(1.06);
  }
}
@media (prefers-reduced-motion: reduce) {
  .product-card,
  .product-card img,
  .product-label { transition: none; }
}

/* ---------- Product section scroll reveal ----------
   JS adds .reveal-ready on load (so content stays visible if JS fails),
   then .is-revealed once the section scrolls into view. Runs one time. */
.products.reveal-ready .section-title,
.products.reveal-ready .products-swiper .swiper-slide,
.products.reveal-ready .carousel-nav {
  opacity: 0;
  transform: translateY(60px);                          /* line 911 */
  transition:
    opacity 1.4s ease,                                  /* line 913 */
    transform 1.4s cubic-bezier(0.22, 0.61, 0.36, 1); 
  transition-delay: var(--reveal-delay, 0s);
}
.products.reveal-ready.is-revealed .section-title,
.products.reveal-ready.is-revealed .products-swiper .swiper-slide,
.products.reveal-ready.is-revealed .carousel-nav {
  opacity: 1;
  transform: translateY(0);
}

.carousel-nav {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 36px;
}
.carousel-arrow {
  width: 40px; height: 40px;
  padding: 0;
  border-radius: 50%;
  border: none;
  background: var(--white);
  color: var(--indigo);
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s ease, color 0.2s ease;
}
.carousel-arrow svg { display: block; }
.carousel-arrow:hover { background: var(--indigo); color: var(--white); }

/* =========================================================
   MANUFACTURING SITE
   ========================================================= */
.manufacturing {
  background: var(--bg-soft);
  padding: 60px 0;
  overflow: hidden;
}

.manufacturing-inner {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 60px;
  align-items: center;
}

.manufacturing-media {
  position: relative;
}

/* The image bleeds off the left page edge in the design, rather than sitting
   inside the container. */
@media (min-width: 993px) {
  .manufacturing-media {
    margin-left: calc((min(100vw, var(--container-w)) - 100vw) / 2 - 24px);
  }
}

/* The shape comes from .shape-petal; the photo itself is a plain rectangle. */

@media (prefers-reduced-motion: reduce) {
  .manufacturing-media img,
  .journey-image img,
  .cert-item img { transition: none; }
  .manufacturing-media:hover img,
  .journey-image:hover img,
  .cert-item:hover img { transform: none; }
}

.manufacturing-text h2 {
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 500;
  margin: 0 0 20px;
}
.manufacturing-text p {
  color: var(--text-dark);
  font-size: 16px;
  line-height: 26px;
  margin: 0 0 16px;
}
.manufacturing-tagline {
  color: var(--navy-900) !important;
  font-weight: 500;
  font-size: 16px !important;
}

/* =========================================================
   QUALITY CONTROL
   ========================================================= */
.quality {
  background: var(--white);
  padding: 60px 0;
  text-align: center;
  overflow: hidden;
}

.quality-intro {
  max-width: 820px;
  margin: 0 auto 16px;
  color: var(--text-dark);
  font-size: 16px;
  line-height: 26px;
}

/* Partner With Us — soft gradient card matching the mint/lavender wash
   already used on .journey, so the new block reads as part of the same
   design language rather than a one-off import. */
.partner-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(220px, 320px) 1fr;
  align-items: center;
  gap: 32px;
  margin: 48px 0 56px;
  padding: 48px 56px;
  border-radius: var(--radius-lg);
  background: linear-gradient(100deg, #f6fef5 0%, #ecf4fe 100%);
  overflow: hidden;
  text-align: left;
}
.partner-card-decor {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
/* Folded-ribbon accent, left edge. */
.partner-card-decor::before {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 40%;
  background: linear-gradient(160deg, rgba(96, 98, 189, 0.16), rgba(96, 98, 189, 0.03) 70%);
  clip-path: polygon(0 0, 62% 0, 22% 100%, 0 100%);
}
/* Right-side backdrop — the same faint concentric-arc artwork used behind
   the Our Journey slider, reused here for a consistent decorative motif. */
.partner-card-decor::after {
  content: '';
  position: absolute;
  top: 0; right: 0;
  height: 100%;
  width: 60%;
  background: url('../images/journey-right-shape.webp') no-repeat right center;
  background-size: 100% 100%;
}
.partner-card-left,
.partner-card-right {
  position: relative;
  z-index: 1;
}
.partner-card-left h2 {
  font-size: clamp(26px, 3.4vw, 36px);
  font-weight: 500;
  color: var(--text-dark);
  margin: 0 0 28px;
  line-height: 1.15;
}
.partner-card-right p {
  color: var(--text-dark);
  font-size: 16px;
  line-height: 26px;
  margin: 0 0 16px;
}
.partner-card-right p:last-child { margin-bottom: 0; }

.formulation{margin: 30px 0 30px 0;}

.quality-subtitle {
  margin: 56px 0 40px;
  font-size: 22px;
  font-weight: 500;
  color: var(--text-dark);
}

/* Static box grid — three up on desktop, each item its own self-contained
   card (no more slider/pagination). */
.lab-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  text-align: left;
}

.lab-card {
  position: relative;
  background: var(--white);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  padding: 24px 28px 28px;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 10px;
  row-gap: 15px;
  align-content: start;
  height: 100%;
  transition: background-color 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.lab-card:hover {
  background: #eaebf8;
  border-color: transparent;
}
/* Icon and title share the top row; the description spans the full width below. */
.lab-content { display: contents; }
.lab-icon {
  width: 60px;
  height: 60px;
  border-radius: var(--radius-sm);
  background: var(--white);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lab-card:hover .lab-icon { border-color: transparent; }
.lab-icon img { width: 36px; height: auto; object-fit: contain; }
.lab-card h4 {
  grid-column: 2;
  font-size: 18px;
  font-weight: 500;
  margin: 0;
  color: var(--text-dark);
}
.lab-card p {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 16px;
  color: var(--text-dark);
  line-height: 22px;
  font-weight: 300;
}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer {
  background: var(--white);
  padding: 0;
}

.footer-panel {
  background: var(--indigo-deep);
  border-radius: 14px;
  padding: 64px 56px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  color: var(--white);
  margin-bottom: 60px;
}

.footer-brand { font-size: 34px; font-weight: 500; margin: 0 0 30px; }

.footer-item {
  display: flex;
  gap: 14px;
  margin-bottom: 22px;
  color: #ffffff;
}
.footer-item-icon { flex-shrink: 0; width: 20px; height: 20px; margin-top: 3px; }
.footer-item strong { display: block; font-size: 14px; margin-bottom: 4px; font-weight: 500;}
.footer-item p { margin: 0; font-size: 16px; line-height: 26px; font-weight: 300; color: #ffffff; }

.footer-form-wrap {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 36px;
  color: var(--text-dark);
}
.footer-form-wrap h3 { margin: 0 0 8px; font-size: 28px; font-weight: 500; color: var(--text-dark); }
.footer-form-wrap > p { margin: 0 0 24px; font-size: 15px; font-weight: 300; color: var(--text-dark); }

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.form-field { margin-bottom: 16px; }
.form-field label {
  display: block;
  font-size: 12px;
  color: var(--text-dark);
  margin-bottom: 6px;
  font-weight: 400;
}
.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  background: var(--bg-soft);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  padding: 11px 14px;
  color: var(--text-dark);
  font-family: inherit;
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s ease;
}
.form-field input::placeholder,
.form-field textarea::placeholder { color: rgba(14, 20, 48, 0.50); }
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus { border-color: var(--indigo); }
.form-field select option { color: var(--text-dark); }
.form-field textarea { resize: vertical; min-height: 70px; }

.form-honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.form-status { margin: 12px 0 0; font-size: 14px; }
.form-status:empty { display: none; }
.form-status[data-state="error"] { color: #b42318; }
.form-status[data-state="success"] { color: #16794a; }
.btn-send:disabled { opacity: 0.65; cursor: wait; }

.btn-send { width: 100%; justify-content: center; margin-top: 4px; }

.footer-bottom {
  background: #131637;
  padding: 22px 0;
  font-size: 14px;
  color: #ffffff;
  font-weight: 400;
}
.footer-bottom-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.footer-copy { margin: 0; }
.footer-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  flex-shrink: 0;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.1);
  transition: background 0.3s ease, color 0.3s ease;
}
.footer-social:hover {
  background: var(--white);
  color: var(--navy-900);
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
/* The fixed Enquiry button owns the bottom-right corner (up to 108px in from
   the right edge). Below this width the container edge falls inside that zone,
   so the social link is inset far enough to stay clickable. */

@media (max-width: 1199px) {
  .leaders-grid{gap: 35px;}
  .leader-card{width: 240px;}
}

@media (max-width: 992px) {
  .hero { min-height: 460px; }
  .hero-inner { min-height: 460px; }
  .hero-inner h1 { max-width: 460px; }
  .cert-item img{height: 40px;}
  .about-inner { grid-template-columns: 1fr; }
  .about-media { order: -1; min-height: 320px; margin-bottom: 10px; }
  .journey-content { grid-template-columns: 1fr; gap: 32px; }
  .leaders-grid { gap: 36px 32px; }
  .manufacturing-inner { grid-template-columns: 1fr; }
  .manufacturing-media { order: -1; min-height: 300px; margin-bottom: 20px; }
  .footer-panel { grid-template-columns: 1fr; gap: 40px; padding: 44px 32px; }
  .lab-grid { grid-template-columns: repeat(2, 1fr); gap: 22px; }
  .leader-card { width: 220px; }
  .partner-card { grid-template-columns: 1fr; gap: 24px; padding: 40px; text-align: center; }
  .partner-card-left,
  .partner-card-right { text-align: center; }
  .partner-card-left { display: flex; flex-direction: column; align-items: center; }
  .partner-card-decor::before { width: 100%; clip-path: none; opacity: 0.5; }
}

/* =========================================================
   OUR JOURNEY — mobile: year bar runs vertically down the left,
   slide content sits to its right.
   ========================================================= */
@media (max-width: 767px) {
  .journey .container {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 18px;
    align-items: start;
  }
  .journey .section-title { grid-column: 1 / -1; }

  .journey-timeline { margin-bottom: 0; }

  .journey-years {
    flex-direction: column;
    align-items: flex-end;
    gap: 40px;
    overflow: visible;
  }
  .journey-year {
    flex-direction: row;
    align-items: center;
    gap: 8px;
  }
  .journey-year-label { font-size: 16px; }
  .journey-year.active .journey-year-label { font-size: 19px; }

  /* Tick becomes a short horizontal mark meeting the vertical line. */
  .journey-year-tick { width: 12px; height: 1px; }

  .journey-line {
    left: auto;
    right: 0;
    top: 0;
    bottom: 0;
    width: 1px;
    height: auto;
  }
  .journey-line-progress {
    left: auto;
    right: 0;
    top: 0;
    bottom: auto;
    width: 2px;
    height: 0;
  }
  .journey-track-dot {
    left: auto;
    right: -5px;
    top: 0;
    bottom: auto;
    margin-left: 0;
    margin-top: -6px;
  }

  /* min-width:0 stops the grid item's content-based minimum from letting the
     slider overflow its track (Swiper then measures the inflated width). */
  .journey-swiper { min-width: 0; width: 100%; }

  .journey-content { grid-template-columns: 1fr; gap: 18px; }
  .journey-title { font-size: 21px; margin-bottom: 10px; }
  .journey-copy p { font-size: 14.5px; line-height: 1.7; }
}

@media (max-width: 768px) {
  .main-nav {
    /* Anchored to the sticky header so it stays flush at any header height. */
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: var(--white);
    border-bottom: 1px solid var(--border-soft);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }
  .main-nav.open { max-height: 320px; }
  .main-nav ul { flex-direction: column; gap: 0; padding: 8px 24px 16px; }
  .main-nav li { border-bottom: 1px solid var(--border-soft); }
  .main-nav a { display: block; padding: 14px 0; }
  .nav-toggle { display: flex; order: 3; }
  .btn-enquire { order: 2; margin-left: auto; }
  .header-inner { flex-wrap: wrap; }

  .cert-bar-wrap { margin-top: -45px; }
  .cert-bar { padding: 20px; gap: 18px 12px; }
  .cert-item img { height: 26px; }
  .about { padding-top: 150px; }

  .leaders-grid { gap: 15px 10px; }
  .leader-card { width: 190px; padding: 20px 10px; }
  .leader-name{font-size: 17px;}
  .leader-photo { width: 130px; height: 130px; }
  .leader-modal { max-height: 90vh; }
  .leader-modal-inner { grid-template-columns: 1fr; padding: 30px 58px 30px 30px; max-height: 90vh; }
  /* Stacked the panel is tall and narrow, so the sliver is sized by width. */
  .leader-modal::after { width: 20%; height: 58%; }
  .leader-modal::before { width: 56%; }
  .partner-card-left h2{margin-bottom: 0;}
  /* Stacked, the panel is tall and narrow, so sizing the right shape by height
     would make it wider than the box — size both by width instead. */
  .leader-modal-photo img { max-width: 220px; margin: 0 auto 14px; }

  .form-row { grid-template-columns: 1fr; gap: 0; }
}

@media (max-width: 560px) {
  .container { padding: 0 18px; }
  .cert-bar { left: 18px; right: 18px; }
  .section-title { margin-bottom: 22px; }

  .hero { min-height: 400px; }
  .hero-inner { min-height: 400px; }
  .hero-inner h1 { max-width: none; }
  .cert-bar-wrap { margin-top: -80px; }
  .cert-bar { flex-wrap: wrap; justify-content: center; border-radius: var(--radius-sm); padding: 16px; }
  /* 3 per row — subtract the two 26px column gaps, or they won't fit. */
  .cert-item { flex: 0 0 calc((100% - 52px) / 3); }

  /* Top padding has to clear the floating cert bar (~110px tall here). */
  .about { padding: 200px 0 44px; }
  .about-inner { gap: 24px; }
  .about-media { min-height: 0; margin-bottom: 0; }

  .about-text p { margin-bottom: 12px; line-height: 24px; }

  .journey { padding: 44px 0; }
  .journey-content { gap: 14px; }

  .leadership { padding: 44px 0; }
  .leaders-grid { gap: 20px 14px; }
  .leader-card { width: 215px; padding: 14px 10px; }
  .leader-photo { width: 110px; height: 110px; margin-bottom: 10px; }
  .leader-plus { width: 28px; height: 28px; font-size: 15px; }

  .products { padding: 44px 0; }
  .carousel-nav { margin-top: 22px; }

  .manufacturing { padding: 44px 0; }
  .manufacturing-inner { gap: 24px; }
  .manufacturing-media { min-height: 0; margin-bottom: 0; }
  .manufacturing-text p { margin-bottom: 12px; line-height: 1.6; }

  .quality { padding: 44px 0 48px; }
  .quality-intro { margin-bottom: 10px; line-height: 1.6; }
  .quality-subtitle { margin: 26px 0 18px; }
  .lab-grid { grid-template-columns: 1fr; gap: 18px; }
  .lab-card { padding: 22px; }
  .partner-card { margin: 32px 0 40px; padding: 32px 24px; }

  .journey::before{width: 100%;}

  .site-footer { padding-top: 44px; }
  .footer-panel { padding: 30px 22px; gap: 26px; margin-bottom: 36px; }
  .footer-brand { margin-bottom: 18px; }
  .footer-item { margin-bottom: 14px; }
  .footer-form-wrap { padding: 20px; }
  .form-field { margin-bottom: 12px; }
  .footer-bottom { padding: 16px 0; }
  /* Stacked, and still centred within the space the Enquiry button leaves.
     padding-right is repeated here because .container's shorthand above
     resets it at this breakpoint. */
  .footer-bottom-inner {
    flex-direction: column-reverse;
    gap: 12px;
    text-align: center;
  }
}
@media (max-width: 480px) {
  .site-header{padding: 12px 0;}
  .logo img{height: 40px;}

  .journey, .leadership, .products, .manufacturing, .quality {
      padding: 30px 0;
  }
  .section-title {
        margin-bottom: 15px;
    }
    .about-text p{font-size: 15px;}
    .leader-card{width: 100%;}
    .journey-title {
      font-size: 19px;
      margin-bottom: 10px;
    }
    .journey-copy p{text-align: left;}
  .journey-timeline, .journey-swiper{margin-top: 20px;}
  .manufacturing-text p{font-size: 15px;}
  .quality-intro{font-size: 15px; line-height: 24px;}
  .quality-subtitle{font-size: 18px;}
  .partner-card { padding: 28px 20px; border-radius: var(--radius-md); }
  .partner-card-right p { font-size: 15px; line-height: 24px; }
    .site-footer {
      padding-top: 0px;
  }
  .footer-brand{font-size: 25px;}
}
@media (max-width: 420px) {
  .logo-icon { width: 28px; height: 28px; }
  .logo-text strong { font-size: 13.5px; }
  .logo-text small { font-size: 11px; }
  .btn-enquire { padding: 10px 16px; font-size: 13px; }

  .hero { min-height: 340px; }
  .hero-inner { min-height: 340px; }
  .hero-inner h1 { font-size: 26px; }
  .cert-item img { height: 22px; }

  .fab-enquiry { width: 64px; height: 64px; right: 16px; bottom: 16px; font-size: 10.5px; }
  .fab-enquiry svg { width: 16px; height: 16px; }

  .leaders-grid { gap: 20px 14px; }
  .leader-photo { width: 96px; height: 96px; }
  .leader-name { font-size: 16px; }
  .leader-role { font-size: 14px; }

  .product-card { padding: 20px 16px 16px; }
  .carousel-arrow { width: 40px; height: 40px; }

  .lab-card { padding: 18px; border-radius: var(--radius-sm); }
  .lab-icon { width: 60px; height: 60px; }
  .lab-icon img{width: 35px;}
  .lab-card h4 { font-size: 16px; }
  .lab-card p { font-size: 14px; line-height: 22px; }

  .footer-form-wrap h3 { font-size: 19px; }
  .footer-bottom { font-size: 13px; }
  .footer-social { width: 32px; height: 32px; }
  .footer-social svg { width: 16px; height: 16px; }
}