/* page-level grey overlay used on light sections (from Figma: black gradient 0.08-0.24 @ 0.8) */
.light-grad { position: relative; }
.light-grad::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,0.064), rgba(0,0,0,0.192));
  pointer-events: none;
}
.light-grad > * { position: relative; }

/* ============ HERO (585px) + unboxed copy ============ */
.ab-hero { position: relative; height: 784px; overflow: hidden; background: #000; } /* v2.9: image fills behind entire annual band */
.ab-hero__bg {
  position: absolute; left: 0; top: 0;
  width: 100%; height: 784px;
  object-fit: cover; object-position: right bottom;
  /* v2.9: taller hero + right anchor — building fills the whole frame, no blank zones */
}
.ab-hero .tile { position: absolute; width: 360px; height: 195px; }
.ab-hero .t1 { left: 360px; top: 390px; background: rgba(32,32,32,0.5); }
.ab-hero .t2 { left: 1081px; top: 0; background: rgba(32,32,32,0.5); }
.ab-hero .t3 { left: 0; top: 195px; background: rgba(174,174,174,0.5); }
.ab-hero .t4 { left: 721px; top: 195px; background: rgba(174,174,174,0.5); }
.ab-hero .t5 { left: 1081px; top: 390px; background: rgba(174,174,174,0.5); }
.ab-title {
  position: absolute; left: var(--edge); top: 80px;
  width: 594px; height: 270px;
  z-index: 2;
}
.ab-title .eyebrow { position: absolute; left: 0; top: 0; font-size: var(--fs-title); color: var(--black); }
.ab-title h1 { position: absolute; left: 0; top: 67px; margin: 0; width: 594px; font-size: var(--fs-display); line-height: 1.2; font-weight: 400; color: var(--black); }
.ab-title p { position: absolute; left: 0; top: 231px; width: 594px; margin: 0; font-size: var(--fs-title); line-height: 1.21; letter-spacing: 0; color: rgba(0,0,0,.7); }

/* ============ ANNUAL NUMBERS (black strip 630-917 page) ============ */
.annual {
  position: relative;
  width: 1200px;
  height: 287px;
  background: var(--black);
  color: var(--white);
  margin: -287px auto 0;           /* v2.9: overlaps extended hero so image fills behind the whole band */
  padding-top: 40px;
  z-index: 3;
}
.annual .label { text-align: center; font-size: var(--fs-title); }
.annual .nums { display: flex; width: 1040px; margin: 30px auto 0; }
.annual .num { width: 347px; height: 122px; text-align: center; }
.annual .num + .num { border-left: 1px solid rgba(255,255,255,0.5); }
.annual .num b { display: block; font-size: var(--fs-num); font-weight: 400; line-height: 1.21; height: 78px; }
.annual .num span { font-size: var(--fs-title); }

/* ============ PRINCIPLES (light gradient, 917-1327 = 410px) ============ */
.principles { height: 410px; background: #fff; background-image: var(--grad-tint); display: flex; }
.principles .pair { width: 50%; margin: 0; box-sizing: border-box; }
.principles .pair--1 { padding: 120px 24px 0 var(--edge); background: var(--bg-light); }
.principles .pair--1 .txt { width: 100%; }
.principles .pair--2 { padding: 120px var(--edge) 0 24px; }
.principles .pair--2 .txt { width: 100%; }
.principles h2 { font-size: var(--fs-h2); color: var(--black); }
.principles .txt p { margin-top: 40px; }
.desktop-break { display: none; }
@media (min-width: 1440px) {
  .principles .pair--1 { margin-left: 0; margin-right: 0; }
  .principles .pair--2 .txt { width: calc(100% + var(--edge) - 24px); }
  .principles .pair--2 h2 { white-space: nowrap; }
  .principles .pair--2 .desktop-break { display: block; }
}

/* ============ SPECIALIZED FACILITIES (1429-2212 = 783px) ============ */
.facilities { position: relative; height: 783px; background: #fff; display: flex; }
.facilities::before {
  content: ''; position: absolute; inset: 0;
  background: var(--grad-tint);
  z-index: 1;
}
.facilities__left { flex: none; width: 595px; padding-left: var(--edge); z-index: 2; display: flex; flex-direction: column; justify-content: center; box-sizing: content-box; } /* v2.8: edge padding + 595 content = 715 at 1440, grows with edge */
.facilities__left h2 { font-size: var(--fs-h2); }
.facilities__left .lede { width: 445px; margin-top: 40px; }
.loc { display: flex; margin-top: 80px; }
.loc .pin { width: 100px; height: 100px; margin-right: 30px; flex: none; }
.loc .pin svg { width: 100px; height: 100px; }
.loc h3 { font-size: var(--fs-h2); font-weight: 400; color: var(--black); }
.loc p { margin-top: 30px; width: 448px; color: var(--black); }
.loc + .loc { margin-top: 60px; }
.facilities__right { flex: 1; margin-left: 80px; position: relative; z-index: 2; } /* v2.9: 80px gap after text column, image flush right */
.facilities__right img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); }
.facilities__right video { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); } /* v4: block removes the replaced-element baseline seam */
.facilities__right.video-fallback {
  background: url('assets/about-facilities.jpg') center / cover no-repeat;
  filter: grayscale(1);
}
.facilities__right.video-fallback video { display: none; }
.facilities__right.video-fallback .facilities__veil { filter: none; }
.facilities__veil { position: absolute; inset: 0; background: #000; opacity: 0.2; }

/* ============ REGULATED MARKETS (584px black) ============ */
.regulated { position: relative; height: 584px; background: var(--black); color: var(--white); overflow: hidden; }
.regulated h2 { position: absolute; top: 120px; left: calc(50% - 320px); width: 640px; text-align: center; font-size: var(--fs-h2); } /* v2.8: true center at any width */
.regulated p { position: absolute; top: 195px; left: calc(50% - 384px); width: 768px; text-align: center; font-weight: 500; letter-spacing: 0; color: rgba(255,255,255,0.5); }
.regulated .map { position: absolute; left: calc(50% - 337px); top: 335px; width: 675px; }

/* ============ TEAM (510px, #D9D9D9) ============ */
.team { height: 510px; background: #fff; background-image: var(--grad-tint); padding: 120px 0 0; overflow: hidden; }
.team h2 { font-size: var(--fs-h2); margin-left: var(--edge); }
.team__viewport { overflow: hidden; margin: 55px var(--edge) 0; }
/* v2.8: exactly 3 people fill the row at ANY width (site is fluid), no 4th card peeking */
.team__track { display: flex; gap: 60px; width: 100%; will-change: transform; }
.pcard {
  flex: 0 0 calc((100% - 120px) / 3);
  min-height: 103px;
  border-left: 1px solid rgba(0,0,0,0.2);
  padding-left: 39px;
}
.pcard:first-child { border-left: none; padding-left: 0; }
.pcard h3 { font-family: 'Inclusive Sans', var(--font); font-size: var(--fs-title); font-weight: 400; }
.pcard__name, .pcard__role { display: block; }
.pcard__role { margin-top: 4px; font-size: .78em; line-height: 1.25; color: var(--muted); }
.pcard .mail { display: flex; align-items: center; gap: 8px; margin-top: 20px; }
.pcard .mail svg { width: 20px; height: 20px; }
.pcard .mail a { color: var(--ink); text-decoration: none; }
.team__ui { display: flex; align-items: center; gap: 20px; margin: 40px var(--edge) 0; }
.team__bar { flex: 1; height: 4px; background: rgba(0,0,0,0.2); overflow: hidden; }
.team__bar span { display: block; width: 23%; height: 4px; background: var(--black); transition: transform .45s; }
.team__nav { display: flex; gap: 20px; }
.tnav {
  width: 52px; height: 52px; border-radius: 50%;
  border: 1px solid var(--black);
  background: transparent; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: opacity .25s ease;
}
.tnav svg { width: 8px; height: 14px; }
.tnav--prev { opacity: 0.5; }   /* Figma: inactive arrow semi-faded */

/* ============ COMPACT DESKTOP (768–1439px) ============ */
@media (min-width: 768px) and (max-width: 1439px) {
  :root { --about-annual-h: clamp(250px, 19.8vw, 285px); }

  .ab-hero { height: clamp(680px, 54.5vw, 784px); }
  .ab-hero__bg { height: 100%; object-position: right bottom; }
  .ab-hero .tile { width: 25%; height: 25%; }
  .ab-hero .t1 { left: 25%; top: 50%; }
  .ab-hero .t2 { left: 75%; top: 0; }
  .ab-hero .t3 { left: 0; top: 25%; }
  .ab-hero .t4 { left: 50%; top: 25%; }
  .ab-hero .t5 { left: 75%; top: 50%; }
  .ab-title { left: var(--chrome-edge); top: clamp(56px, 5.55vw, 80px); width: min(52vw, 594px); height: auto; }
  .ab-title .eyebrow { position: static; }
  .ab-title h1 { position: static; width: 100%; margin-top: clamp(34px, 4.65vw, 67px); font-size: clamp(38px, 4.05vw, var(--fs-display)); }
  .ab-title p { position: static; width: 100%; margin-top: clamp(24px, 2.8vw, 40px); font-size: clamp(16px, 1.45vw, var(--fs-title)); }

  .annual {
    width: calc(100% - (2 * var(--chrome-edge)));
    max-width: 1200px;
    height: var(--about-annual-h);
    margin: calc(-1 * var(--about-annual-h)) auto 0;
    padding: clamp(34px, 3vw, 40px) clamp(24px, 4vw, 80px) 0;
  }
  .annual .nums { width: 100%; margin-top: clamp(26px, 2.1vw, 30px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .annual .num { width: auto; height: auto; min-width: 0; }
  .annual .num b { height: auto; font-size: clamp(46px, 5vw, var(--fs-num)); }
  .annual .num span { font-size: clamp(15px, 1.4vw, var(--fs-title)); }

  .principles { height: auto; min-height: 500px; padding: 0; }
  .principles .pair { width: 50%; max-width: 600px; }
  .principles .pair--1 { padding: clamp(88px, 8.35vw, 120px) clamp(28px, 4vw, 60px) 0 var(--chrome-edge); }
  .principles .pair--1 .txt { width: 100%; }
  .principles .pair--2 { padding: clamp(88px, 8.35vw, 120px) var(--chrome-edge) 0 clamp(28px, 4vw, 60px); }
  .principles .pair--2 .txt { width: 100%; }
  .principles h2 { font-size: clamp(34px, 3.2vw, var(--fs-h2)); }
  .principles .txt p { margin-top: clamp(28px, 2.8vw, 40px); }

  .facilities { min-height: 720px; height: auto; display: grid; grid-template-columns: minmax(0, .98fr) minmax(330px, 1.02fr); }
  .facilities__left { width: auto; padding: clamp(72px, 7vw, 100px) clamp(28px, 4vw, 58px) clamp(72px, 7vw, 100px) var(--chrome-edge); box-sizing: border-box; }
  .facilities__left h2 { font-size: clamp(34px, 3.2vw, var(--fs-h2)); }
  .facilities__left .lede { width: 100%; max-width: 445px; margin-top: clamp(28px, 2.8vw, 40px); }
  .loc { margin-top: clamp(48px, 5vw, 72px); }
  .loc + .loc { margin-top: clamp(40px, 4vw, 60px); }
  .loc .pin { width: clamp(62px, 6.5vw, 88px); height: clamp(62px, 6.5vw, 88px); margin-right: clamp(18px, 2.2vw, 30px); }
  .loc .pin svg { width: 100%; height: 100%; }
  .loc h3 { font-size: clamp(27px, 2.7vw, var(--fs-h2)); }
  .loc p { width: auto; max-width: 448px; margin-top: clamp(18px, 2vw, 30px); }
  .facilities__right { min-height: 720px; margin-left: 0; }
  .facilities__right video, .facilities__right img { display: block; }

  .regulated { height: auto; min-height: 550px; padding: clamp(86px, 8.35vw, 120px) var(--chrome-edge) clamp(60px, 6vw, 86px); display: flex; flex-direction: column; align-items: center; }
  .regulated h2, .regulated p, .regulated .map { position: static; left: auto; top: auto; }
  .regulated h2 { width: 100%; font-size: clamp(34px, 3.2vw, var(--fs-h2)); }
  .regulated p { width: min(100%, 768px); margin-top: 28px; }
  .regulated .map { width: min(100%, 675px); margin-top: clamp(54px, 5.5vw, 78px); }

  .team { height: auto; min-height: 500px; padding: clamp(82px, 8.35vw, 120px) var(--chrome-edge) clamp(64px, 6vw, 88px); }
  .team h2 { margin-left: 0; font-size: clamp(34px, 3.2vw, var(--fs-h2)); }
  .team__viewport { margin: clamp(44px, 4vw, 55px) 0 0; }
  .team__track { gap: clamp(28px, 4vw, 60px); }
  .pcard { flex: 0 0 calc((100% - clamp(28px, 4vw, 60px)) / 2); min-width: 0; padding-left: clamp(20px, 2.7vw, 39px); }
  .pcard .mail a { overflow-wrap: anywhere; }
  .team__ui { margin: clamp(34px, 3.5vw, 44px) 0 0; }
}

/* ============ MOBILE (≤767px) ============ */
@media (max-width: 767px) {
  html, body { width: 100%; overflow-x: hidden; }
  body { font-size: 16px; }
  .shell { width: 100%; margin: 0; overflow: hidden; }
  .btn { width: 100%; height: 52px; justify-content: center; padding: 0 20px; }


  .ab-hero { height: 490px; }
  .ab-hero__bg { left: 0; top: 0; width: 100%; height: 240px; object-fit: cover; object-position: center top; filter: grayscale(1); transform: none; }
  .ab-hero .tile { display: none; }
  .ab-title { left: 0; top: 240px; width: 100%; height: 250px; padding: 60px 20px; background: #eee; background-image: var(--grad-tint); }
  .ab-title .eyebrow { display: none; }
  .ab-title h1 { position: static; width: 100%; font-size: 30px; line-height: 1.2; }
  .ab-title p { position: static; width: 100%; margin-top: 30px; font-size: 16px; line-height: 1.2; }

  .annual { width: 100%; height: 483px; margin: 0; padding: 60px 20px; }
  .annual .label { font-size: 16px; }
  .annual .nums { display: block; width: 100%; margin: 60px auto 0; }
  .annual .num { width: 100%; height: 117px; }
  .annual .num + .num { border: 0; }
  .annual .num b { font-size: 40px; line-height: 1; height: 45px; }
  .annual .num span { font-size: 16px; }

  .principles { height: 440px; padding: 60px 20px; display: block; }
  .principles .pair { width: 100%; margin: 0; text-align: center; max-width: none; }
  .principles .pair--1 { padding: 0; }
  .principles .pair--1 .txt, .principles .pair--2 .txt { width: 100%; }
  .principles .pair--2 { display: block; padding: 60px 0 0; text-align: center; border-left: 0; }
  .principles h2 { font-size: 30px; line-height: 1.2; }
  .principles .txt p { margin-top: 26px; line-height: 1.2; }

  .facilities { height: 732px; display: block; padding: 60px 20px; }
  .facilities::before { background: var(--grad-tint); }
  .facilities__right { position: absolute; left: 20px; top: 60px; width: calc(100% - 40px); height: 400px; margin-left: 0; }
  .facilities__right img, .facilities__right video { width: 100%; height: 400px; object-fit: cover; }
  .facilities__left { position: absolute; left: 20px; top: 520px; width: calc(100% - 40px); padding: 0; text-align: center; z-index: 3; }
  .facilities__left h2 { font-size: 30px; line-height: 1.2; }
  .facilities__left .lede { width: 100%; margin-top: 26px; line-height: 1.2; }
  .loc { display: none; }

  .regulated { height: 486px; }
  .regulated h2 { top: 60px; left: 20px; width: calc(100% - 40px); font-size: 30px; line-height: 1.2; }
  .regulated p { top: 170px; left: 20px; width: calc(100% - 40px); line-height: 1.2; font-size: 0; }
  .regulated p::after { content: 'We export globally to multiple US FDA and EMA-approved facilities. Both our units are ISO-certified and fully compliant with GMP standards.'; display: block; font-size: 16px; }
  .regulated .map { left: 20px; top: 280px; width: calc(100% - 40px); height: 146px; object-fit: cover; object-position: center top; }

  .team { position: relative; height: 478px; padding: 60px 20px 0; }
  .team h2 { font-size: 30px; line-height: 1.2; margin: 0; text-align: center; }
  .team__viewport { margin: 40px 0 0; width: 100%; overflow: hidden; }
  .team__track { width: max-content; padding-left: 0; gap: 0; }
  .pcard, .pcard:first-child { width: var(--team-mobile-card, calc(100vw - 40px)); flex: none; min-height: 188px; margin: 0; padding: 32px 0 0; border: 0; text-align: center; } /* v4: JS pins this to the viewport's scrollbar-safe inner width */
  .pcard h3 { font-size: 20px; line-height: 1.2; }
  .pcard .mail { justify-content: center; margin-top: 20px; }
  .team__ui { position: absolute; left: 20px; bottom: 60px; width: calc(100% - 40px); margin: 0; gap: 12px; }
  .team__bar { order: 2; }
  .team__nav { display: contents; }
  .tnav { width: 52px; height: 52px; flex: none; }
  .tnav--prev { order: 1; } #tnext { order: 3; }

  /* V4 mobile: normal flow replaces fixed-height/absolute section staging. */
  .ab-hero { height: auto; overflow: visible; background: #eee; }
  .ab-hero__bg {
    position: relative; left: auto; top: auto; display: block;
    width: 100%; height: clamp(220px, 62vw, 280px);
  }
  .ab-title {
    position: relative; left: auto; top: auto;
    width: 100%; height: auto;
    padding: clamp(48px, 8vw, 60px) 20px clamp(52px, 9vw, 66px);
  }
  .ab-title h1 { font-size: clamp(28px, 7.7vw, 34px); }
  .ab-title p { margin-top: 28px; line-height: 1.3; }

  .annual { height: auto; min-height: 455px; padding: 56px 20px; }
  .annual .nums { display: grid; gap: 30px; margin-top: 48px; }
  .annual .num { height: auto; }
  .annual .num b { height: auto; }
  .annual .num span { display: block; margin-top: 10px; }

  .principles { height: auto; padding: 0 0 60px; }
  .principles .pair--1 {
    padding: 56px 20px;
    background: var(--bg-light);
  }
  .principles .pair--2 { padding: 56px 20px 0; }
  .principles h2 { font-size: clamp(28px, 7.7vw, 32px); }
  .principles .txt p { margin-top: 24px; line-height: 1.3; }

  .facilities { height: auto; display: flex; flex-direction: column; padding: 0; }
  .facilities__right {
    display: block;
    position: relative; left: auto; top: auto;
    width: 100%; height: auto; aspect-ratio: 16 / 9;
    margin: 0;
    order: 1;
  }
  .facilities__right img, .facilities__right video {
    width: 100%; height: 100%; object-fit: cover;
  }
  .facilities__left {
    position: relative; left: auto; top: auto;
    width: 100%; padding: 56px 20px 60px;
    box-sizing: border-box;
    order: 2;
  }
  .facilities__left h2 { font-size: clamp(28px, 7.7vw, 32px); }
  .facilities__left .lede { margin-top: 24px; line-height: 1.3; }

  .regulated {
    height: auto; min-height: 0; padding: 56px 20px 60px;
    display: flex; flex-direction: column; align-items: center;
  }
  .regulated h2, .regulated p, .regulated .map {
    position: static; left: auto; top: auto; width: 100%;
  }
  .regulated h2 { font-size: clamp(28px, 7.7vw, 32px); }
  .regulated p { margin-top: 28px; line-height: 1.35; font-size: 16px; }
  .regulated p::after { content: none; }
  .regulated .map { height: auto; margin-top: 48px; object-fit: contain; object-position: center; }

  .team { height: auto; min-height: 464px; padding: 56px 20px 60px; }
  .team h2 { font-size: clamp(28px, 7.7vw, 32px); }
  .team__viewport { margin-top: 38px; }
  .pcard, .pcard:first-child { padding-top: 30px; }
  .pcard h3 { line-height: 1.25; }
  .pcard .mail { font-size: clamp(13px, 4vw, 16px); }
  .pcard .mail a { overflow-wrap: anywhere; }
  .team__ui { position: static; width: 100%; margin: 26px 0 0; }

}