/*
 * About reference implementation
 * Scope: /about/ only.  The visual rules are loaded after style.css so the
 * legacy experimental layers cannot affect this reference composition.
 */

body:has(main.about-page) {
  --ref-ink: #071b42;
  --ref-navy: #031738;
  --ref-blue: #1259ef;
  --ref-pale: #f2f6ff;
  --ref-rule: #dbe5f6;
  --ref-gold: #e4b430;
  background: #fff;
  color: var(--ref-ink);
}

body:has(main.about-page) .secondary-section.about-secondary-section,
body:has(main.about-page) .about-page-content,
body:has(main.about-page) .about-lab-v2 {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

body:has(main.about-page) .about-lab-v2 {
  overflow: hidden;
  font-family: Manrope, Arial, sans-serif;
}

body:has(main.about-page) .about-lab-v2 h1,
body:has(main.about-page) .about-lab-v2 h2,
body:has(main.about-page) .about-lab-v2 h3,
body:has(main.about-page) .about-lab-v2 p {
  margin-top: 0;
}

/* Master composition: short navy photo hero, editorial content below. */
body:has(main.about-page) .about-v2-hero {
  position: relative;
  isolation: isolate;
  min-height: 400px;
  color: #fff;
  background:
    linear-gradient(90deg, #021532 0%, rgba(3, 22, 53, .95) 43%, rgba(3, 22, 53, .52) 70%, rgba(3, 22, 53, .24) 100%),
    url('/wp-content/uploads/2026/07/lab-vials2.webp') center 48% / cover no-repeat;
}

body:has(main.about-page) .about-v2-hero-inner {
  width: min(1280px, calc(100% - 96px));
  min-height: 400px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

body:has(main.about-page) .about-v2-hero-copy {
  width: min(650px, 60%);
  padding: 40px 0 36px;
}

body:has(main.about-page) .about-kicker {
  margin-bottom: 15px !important;
  color: #4b85ff;
  font: 800 11px/1.2 Manrope, Arial, sans-serif;
  letter-spacing: .1em;
  text-transform: uppercase;
}

body:has(main.about-page) .about-v2-hero .about-kicker { color: #fff; opacity: .92; }

body:has(main.about-page) .about-v2-hero h1 {
  max-width: 650px;
  margin-bottom: 16px;
  color: #fff;
  font: 400 clamp(42px, 3.85vw, 56px)/1.06 Italiana, Georgia, serif;
  letter-spacing: -.035em;
}

body:has(main.about-page) .about-v2-hero .about-lab-intro {
  max-width: 570px;
  margin-bottom: 22px;
  color: rgba(255,255,255,.91);
  font: 500 15px/1.65 Manrope, Arial, sans-serif;
}

body:has(main.about-page) .about-lab-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

body:has(main.about-page) .about-v2-hero .button,
body:has(main.about-page) .about-v2-mission .button {
  min-height: 46px;
  padding: 0 22px;
  border-radius: 3px;
  box-shadow: none;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .01em;
}

body:has(main.about-page) .about-v2-hero .button-light {
  background: var(--ref-blue);
  border-color: var(--ref-blue);
  color: #fff;
}

body:has(main.about-page) .about-v2-hero .button-outline {
  border: 1px solid rgba(255,255,255,.72);
  background: transparent;
  color: #fff;
}

/* Not part of the approved hero frame; data remains present in the DOM. */
body:has(main.about-page) .about-v2-hero .about-profile,
body:has(main.about-page) .about-v2-metrics {
  display: none !important;
}

body:has(main.about-page) .about-v2-gallery {
  padding: 56px 0 36px;
  background: #fff;
}

body:has(main.about-page) .about-v2-gallery-inner,
body:has(main.about-page) .about-v2-background,
body:has(main.about-page) .about-v2-what,
body:has(main.about-page) .about-v2-reasons,
body:has(main.about-page) .about-v2-process,
body:has(main.about-page) .about-v2-audience,
body:has(main.about-page) .about-v2-compliance,
body:has(main.about-page) .about-v2-cta {
  width: min(1280px, calc(100% - 96px));
  margin-left: auto !important;
  margin-right: auto !important;
}

body:has(main.about-page) .about-v2-gallery-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 28px;
}

body:has(main.about-page) .about-v2-gallery-copy { max-width: 690px; }

/* Company background: selected editorial panel. It is standalone, fully
 * editable, and deliberately avoids inventing any company history or claims. */
body:has(main.about-page) .about-v2-background {
  order: 1;
  display: grid;
  grid-template-columns: minmax(0, .76fr) minmax(0, 1.24fr);
  width: min(1312px, calc(100% - 128px));
  min-height: 320px;
  margin: 18px auto 0 !important;
  align-self: center;
  flex: 0 0 auto;
  padding: 20px 46px;
  box-sizing: border-box;
  gap: 48px;
  align-items: stretch;
  background: #f2f6ff;
  border: 1px solid #e7eef9;
  border-radius: 4px;
}
/* The legacy page stylesheet makes every direct About section full-width.
 * This one panel is intentionally the centred card shown in the approved design. */
html body:has(main.about-page) .about-lab-v2 > .about-v2-background {
  width: min(1312px, calc(100% - 128px)) !important;
  max-width: none !important;
  margin: 18px auto 0 !important;
}
body:has(main.about-page) .about-v2-background-intro {
  max-width: 430px;
  padding: 1px 0 8px;
}
body:has(main.about-page) .about-v2-background h2 {
  margin-bottom: 15px;
  color: var(--ref-ink);
  font: 400 clamp(31px, 2.65vw, 42px)/1.13 Italiana, Georgia, serif;
  letter-spacing: -.025em;
}
body:has(main.about-page) .about-v2-background-intro > p:not(.about-kicker):not(.about-v2-background-note),
body:has(main.about-page) .about-v2-background-note,
body:has(main.about-page) .about-v2-background-points p {
  color: #526785;
  font-size: 14px;
  line-height: 1.66;
}
body:has(main.about-page) .about-v2-background-note {
  display: none;
  margin-top: 15px;
  color: #64758f;
  font-size: 12px;
  line-height: 1.6;
}
body:has(main.about-page) .about-v2-background-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  color: var(--ref-blue);
  font: 800 13px/1.2 Manrope, Arial, sans-serif;
  text-decoration: none;
}
body:has(main.about-page) .about-v2-background-link .about-v2-background-link-icon { font-size: 16px; }
body:has(main.about-page) .about-v2-background-panel {
  min-width: 0;
  padding: 1px 0 0 48px;
  border-left: 1px solid #b9cef3;
}
body:has(main.about-page) .about-v2-background-panel > .about-kicker { margin-bottom: 15px !important; }
body:has(main.about-page) .about-v2-background-points {
  display: grid;
  gap: 0;
  border: 0;
}
body:has(main.about-page) .about-v2-background-points article {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  min-height: 70px;
  padding: 14px 0;
  border-top: 1px solid #cfdcf1;
}
body:has(main.about-page) .about-v2-background-icon {
  display: block;
  width: 52px;
  height: 52px;
  object-fit: contain;
}
body:has(main.about-page) .about-v2-background-points h3 {
  margin: 0 0 4px;
  color: var(--ref-ink);
  font: 800 17px/1.3 Manrope, Arial, sans-serif;
}
body:has(main.about-page) .about-v2-background-points p { margin: 0; font-size: 13px; }

/* Keep commercial scale in the same four-row evidence rhythm as the other
 * company facts. It remains visible, but no longer reads as a separate ad. */
html body:has(main.about-page) .about-v2-background-points article.about-v2-background-sales {
  grid-template-columns: 52px minmax(0, 1fr);
  min-height: 70px;
  margin: 0;
  padding: 14px 0;
  border-top: 1px solid #cfdcf1;
  background: transparent;
}
html body:has(main.about-page) .about-v2-background-sales h3 {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 7px;
  margin: 0 0 4px;
}
html body:has(main.about-page) .about-v2-background-sales h3 strong {
  color: var(--ref-blue);
  font: 800 21px/1 Manrope, Arial, sans-serif;
  letter-spacing: -.045em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
html body:has(main.about-page) .about-v2-background-sales h3 span {
  color: var(--ref-ink);
  font: 800 17px/1.3 Manrope, Arial, sans-serif;
}
html body:has(main.about-page) .about-v2-background-sales p {
  margin: 0;
  color: #64758f;
  font-size: 13px;
  line-height: 1.55;
}

/* Approved inline factory-video pattern. It intentionally has no lightbox,
 * custom play button, autoplay, or simulated player controls: once editors
 * provide real footage, the browser's native video controls own playback and
 * full-screen behavior. */
body:has(main.about-page) .about-v2-factory-video {
  width: min(1280px, calc(100% - 96px));
  margin: 56px auto 0 !important;
  display: grid;
  grid-template-columns: minmax(0, 1.42fr) minmax(360px, .78fr);
  align-items: center;
  gap: clamp(38px, 5.1vw, 74px);
  box-sizing: border-box;
}
body:has(main.about-page) .about-v2-factory-video-media,
body:has(main.about-page) .about-v2-factory-video-media figure {
  min-width: 0;
  margin: 0;
}
body:has(main.about-page) .about-v2-factory-video-media figure {
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border: 1px solid #d8e3f5;
  border-radius: 3px;
  background: #061735;
  box-shadow: 0 16px 36px rgba(8, 43, 98, .10);
}
body:has(main.about-page) .about-v2-factory-video-media video,
body:has(main.about-page) .about-v2-factory-video-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
body:has(main.about-page) .about-v2-factory-video-media video { background: #061735; }
body:has(main.about-page) .about-v2-factory-video-copy { max-width: 445px; }
body:has(main.about-page) .about-v2-factory-video-copy h2 {
  margin: 0 0 14px;
  color: var(--ref-ink);
  font: 400 clamp(31px, 2.7vw, 44px) / 1.13 Italiana, Georgia, serif;
  letter-spacing: -.025em;
}
body:has(main.about-page) .about-v2-factory-video-copy > p:not(.about-kicker) {
  margin: 0;
  color: #526785;
  font-size: 14px;
  line-height: 1.72;
}
body:has(main.about-page) .about-v2-factory-video-summary {
  margin-top: 19px !important;
  padding-top: 16px;
  border-top: 1px solid #dbe5f4;
  color: #344b70 !important;
  font-size: 13px !important;
}
body:has(main.about-page) .about-v2-factory-video-note {
  margin-top: 17px !important;
  color: #6c7f9c !important;
  font-size: 12px !important;
}
body:has(main.about-page) .about-v2-factory-video-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  color: var(--ref-blue);
  font: 800 13px / 1.2 Manrope, Arial, sans-serif;
  text-decoration: none;
}
body:has(main.about-page) .about-v2-factory-video-link .about-v2-background-link-icon { font-size: 16px; }

body:has(main.about-page) .about-v2-gallery h2,
body:has(main.about-page) .about-v2-what h2,
body:has(main.about-page) .about-v2-section-head h2,
body:has(main.about-page) .about-v2-audience h2,
body:has(main.about-page) .about-v2-compliance h2,
body:has(main.about-page) .about-v2-cta h2 {
  margin-bottom: 12px;
  color: var(--ref-ink);
  font: 400 clamp(30px, 2.7vw, 43px)/1.15 Italiana, Georgia, serif;
  letter-spacing: -.025em;
}

body:has(main.about-page) .about-v2-gallery-copy > p:last-child,
body:has(main.about-page) .about-v2-what > div:last-child > p,
body:has(main.about-page) .about-v2-section-head p,
body:has(main.about-page) .about-v2-audience p,
body:has(main.about-page) .about-v2-compliance p,
body:has(main.about-page) .about-v2-cta p {
  color: #42536f;
  font-size: 14px;
  line-height: 1.72;
}

body:has(main.about-page) .about-v2-gallery-link {
  flex: 0 0 auto;
  min-height: 42px;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid #99b9fa;
  border-radius: 3px;
  color: var(--ref-blue);
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
}

body:has(main.about-page) .about-v2-gallery-images {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

body:has(main.about-page) .about-v2-gallery-images figure {
  position: relative;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  height: 218px;
  margin: 0;
  overflow: hidden;
  border-radius: 3px;
  background: #edf2f8;
}

body:has(main.about-page) .about-v2-gallery-images img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}
body:has(main.about-page) .about-v2-gallery-images picture {
  display: block;
  width: 100%;
  min-width: 0;
  height: 100%;
}

body:has(main.about-page) .about-v2-gallery-open {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: inherit;
  background: transparent;
  cursor: zoom-in;
  touch-action: manipulation;
}
body:has(main.about-page) .about-v2-gallery-open:focus-visible {
  outline: 3px solid var(--ref-blue);
  outline-offset: 3px;
}
body:has(main.about-page) .about-v2-gallery-open img { transition: transform 160ms ease; }
@media (hover:hover) {
  body:has(main.about-page) .about-v2-gallery-open:hover img { transform: scale(1.025); }
}
@media (prefers-reduced-motion:reduce) {
  body:has(main.about-page) .about-v2-gallery-open img { transition: none; }
}

body:has(main.about-page) .about-v2-gallery-lightbox {
  width: min(1100px, calc(100vw - 32px));
  max-width: none;
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 6px;
  background: #061a40;
  box-shadow: 0 24px 70px rgba(0, 16, 48, .45);
}
body:has(main.about-page) .about-v2-gallery-lightbox::backdrop { background: rgba(2, 15, 39, .78); }
body:has(main.about-page) .about-v2-gallery-lightbox-frame {
  position: relative;
  display: grid;
  max-height: calc(100dvh - 32px);
  padding: 20px;
  box-sizing: border-box;
  place-items: center;
}
body:has(main.about-page) .about-v2-gallery-lightbox img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: calc(100dvh - 106px);
  height: auto;
  object-fit: contain;
}
body:has(main.about-page) .about-v2-gallery-lightbox p {
  width: 100%;
  margin: 12px 0 0;
  color: rgba(255,255,255,.88);
  font: 600 13px/1.45 Manrope, Arial, sans-serif;
  text-align: left;
}
body:has(main.about-page) .about-v2-gallery-lightbox p:empty { display: none; }
body:has(main.about-page) .about-v2-gallery-lightbox-close {
  position: absolute;
  z-index: 1;
  top: 10px;
  right: 10px;
  display: grid;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 999px;
  background: rgba(3, 23, 56, .88);
  color: #fff;
  place-items: center;
  cursor: pointer;
}
body:has(main.about-page) .about-v2-gallery-lightbox-close:hover,
body:has(main.about-page) .about-v2-gallery-lightbox-close:focus-visible {
  border-color: #fff;
  background: var(--ref-blue);
}
body:has(main.about-page) .about-v2-gallery-lightbox-close:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
}
body:has(main.about-page) .about-v2-gallery-lightbox-close-icon { width: 18px; height: 18px; }

body:has(main.about-page) .about-v2-gallery-images video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  background: #0b2148;
}

body:has(main.about-page) .about-v2-video-card { background: #0b2148; }

body:has(main.about-page) .about-v2-video-summary {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1;
  display: grid;
  gap: 2px;
  padding: 9px 10px 16px;
  background: linear-gradient(180deg, rgba(3,21,52,.88), rgba(3,21,52,0));
  color: #fff;
  font: 600 11px/1.35 Manrope, Arial, sans-serif;
  pointer-events: none;
}

body:has(main.about-page) .about-v2-video-summary strong { font-weight: 800; }
body:has(main.about-page) .about-v2-video-summary span { color: rgba(255,255,255,.84); }

body:has(main.about-page) .about-v2-gallery-images figure:nth-child(1) img { object-position: 46% center; }
body:has(main.about-page) .about-v2-gallery-images figure:nth-child(2) img { object-position: 48% center; }

body:has(main.about-page) .about-v2-gallery-images .about-v2-index {
  display: none;
}

body:has(main.about-page) .about-v2-gallery-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
  color: #63718a;
  font-size: 12px;
}

body:has(main.about-page) .about-v2-gallery-controls button {
  min-height: 32px;
  padding: 0 13px;
  border: 1px solid var(--ref-rule);
  border-radius: 20px;
  background: #fff;
  color: #586982;
  font: 700 12px/1 Manrope, Arial, sans-serif;
}

body:has(main.about-page) .about-v2-gallery-controls button.is-active {
  border-color: var(--ref-blue);
  background: var(--ref-blue);
  color: #fff;
}

body:has(main.about-page) .about-v2-gallery-layout { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; }
body:has(main.about-page) .about-v2-gallery-images figure[hidden] { display: none !important; }
body:has(main.about-page) .about-v2-gallery-images.is-list { grid-template-columns: 1fr; }
body:has(main.about-page) .about-v2-gallery-images.is-list figure { height: 260px; }

body:has(main.about-page) .about-v2-what {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 76px;
  padding: 52px 0;
  border-top: 1px solid #edf1f7;
}

body:has(main.about-page) .about-v2-what ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 28px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

body:has(main.about-page) .about-v2-what li {
  position: relative;
  padding-left: 17px;
  color: #1f3458;
  font-size: 13px;
  line-height: 1.5;
}
body:has(main.about-page) .about-v2-what li::before { content: ''; position: absolute; left: 0; top: .55em; width: 6px; height: 6px; border-radius: 999px; background: var(--ref-blue); }

body:has(main.about-page) .about-v2-reasons {
  padding: 38px;
  box-sizing: border-box;
  background: var(--ref-pale);
  border-radius: 4px;
}

body:has(main.about-page) .about-v2-section-head { max-width: 700px; margin-bottom: 24px; }
body:has(main.about-page) .about-v2-section-head h2 { font-size: clamp(29px,2.5vw,40px); }

body:has(main.about-page) .about-v2-reason-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 15px;
}

body:has(main.about-page) .about-v2-reason-grid article {
  min-height: 210px;
  padding: 25px 22px;
  box-sizing: border-box;
  border: 1px solid #dfe8f7;
  border-radius: 3px;
  background: #fff;
}

body:has(main.about-page) .about-v2-reason-grid .about-v2-index { display: none; }
body:has(main.about-page) .about-v2-icon { display:block; margin-bottom:18px; color:var(--ref-blue); font-size:32px; width:34px; height:34px; }
body:has(main.about-page) .about-v2-reason-grid h3 { margin: 0 0 9px; color:var(--ref-ink); font:800 16px/1.3 Manrope,Arial,sans-serif; }
body:has(main.about-page) .about-v2-reason-grid p { margin:0; color:#52617a; font-size:13px; line-height:1.65; }

/* Give the advantage story a clearer editorial rhythm without changing the
 * existing layout system: a restrained blue rule and stronger type hierarchy
 * make the four proof points scan as a point of view, not a generic feature
 * list. */
html body:has(main.about-page) .about-v2-reasons {
  border-left: 3px solid var(--ref-blue);
  padding-left: 35px;
}
html body:has(main.about-page) .about-v2-reason-grid article {
  border-top: 3px solid #b9cef3;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
html body:has(main.about-page) .about-v2-reason-grid article:hover,
html body:has(main.about-page) .about-v2-reason-grid article:focus-within {
  border-top-color: var(--ref-blue);
  box-shadow: 0 10px 24px rgba(8, 52, 139, .08);
  transform: translateY(-2px);
}
html body:has(main.about-page) .about-v2-reason-grid h3 {
  font-size: 18px;
  letter-spacing: -.01em;
}

body:has(main.about-page) .about-v2-process {
  padding: 58px 0 48px;
}

body:has(main.about-page) .about-v2-process .about-v2-section-head { margin-bottom: 22px; }
body:has(main.about-page) .about-v2-process-list { display: grid; gap: 11px; }
body:has(main.about-page) .about-v2-process-list article {
  min-height: 84px;
  display: grid;
  grid-template-columns: 56px 1fr 24px;
  align-items: center;
  gap: 18px;
  padding: 16px 24px 16px 0;
  border: 1px solid #dee7f4;
  border-radius: 3px;
  background: #fff;
}
body:has(main.about-page) .about-v2-process-list article > span {
  align-self: stretch;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--ref-blue);
  background:#f0f5ff;
  font:800 14px/1 Manrope,Arial,sans-serif;
}
body:has(main.about-page) .about-v2-process-list h3 { margin:0 0 4px; color:var(--ref-ink); font:800 15px/1.35 Manrope,Arial,sans-serif; }
body:has(main.about-page) .about-v2-process-list p { margin:0; color:#596982; font-size:13px; line-height:1.5; }
body:has(main.about-page) .about-v2-process-list b { color:var(--ref-blue); font-size:18px; text-align:right; }

body:has(main.about-page) .about-v2-mission {
  min-height: 330px;
  margin-top: 10px;
  padding: 66px max(48px, calc((100% - 1280px) / 2));
  display: grid;
  grid-template-columns: minmax(0, 550px) 1fr;
  align-items: center;
  gap: 80px;
  color: #fff;
  background:
    linear-gradient(90deg, rgba(2,20,53,.98) 0%, rgba(3,35,94,.93) 54%, rgba(8,65,163,.58) 100%),
    url('/wp-content/uploads/2026/07/lab-vials2.webp') center 60% / cover no-repeat;
}
body:has(main.about-page) .about-v2-mission h2 { margin-bottom:14px; color:#fff; font:400 clamp(35px,3.1vw,50px)/1.12 Italiana,Georgia,serif; letter-spacing:-.025em; }
body:has(main.about-page) .about-v2-mission .about-kicker { color:#eac656; }
body:has(main.about-page) .about-v2-mission p { color:rgba(255,255,255,.82); font-size:14px; line-height:1.75; }
body:has(main.about-page) .about-v2-mission ol { display:none; }
body:has(main.about-page) .about-v2-mission .button-light { margin-top:14px; background:#fff; border-color:#fff; color:#06338b; }

/* Preserve remaining page data as ordinary, readable sections rather than deleting it. */
body:has(main.about-page) .about-v2-audience,
body:has(main.about-page) .about-v2-compliance,
body:has(main.about-page) .about-v2-cta {
  box-sizing: border-box;
  margin-top: 46px !important;
  margin-bottom: 0 !important;
}
body:has(main.about-page) .about-v2-audience { display:grid; grid-template-columns:1fr 1fr; gap:60px; padding-bottom:46px; border-bottom:1px solid #e5ebf3; }
body:has(main.about-page) .about-v2-audience ul { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:0; padding:0; list-style:none; }
body:has(main.about-page) .about-v2-audience li { padding:17px; border:1px solid #dfe7f2; color:#203657; font-size:13px; }
body:has(main.about-page) .about-v2-compliance { padding:32px 36px; background:#f4f7fc; border-left:3px solid var(--ref-blue); }
body:has(main.about-page) .about-v2-cta { display:flex; align-items:end; justify-content:space-between; gap:32px; padding:48px 0 58px; }
body:has(main.about-page) .about-v2-cta .button-dark { background:var(--ref-blue); border-color:var(--ref-blue); color:#fff; }
body:has(main.about-page) .about-v2-cta .button-outline-dark { border:1px solid #91b4f7; background:#fff; color:var(--ref-blue); }

body:has(main.about-page) .about-lab-v2 a,
body:has(main.about-page) .about-lab-v2 button { transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease; }
body:has(main.about-page) .about-lab-v2 a:hover,
body:has(main.about-page) .about-lab-v2 button:hover { transform: translateY(-1px); }
body:has(main.about-page) .about-lab-v2 a:focus-visible,
body:has(main.about-page) .about-lab-v2 button:focus-visible { outline:3px solid #7cabff; outline-offset:3px; }

@media (max-width: 900px) {
  body:has(main.about-page) .about-v2-hero-inner,
  body:has(main.about-page) .about-v2-gallery-inner,
  body:has(main.about-page) .about-v2-background,
  body:has(main.about-page) .about-v2-factory-video,
  body:has(main.about-page) .about-v2-what,
  body:has(main.about-page) .about-v2-reasons,
  body:has(main.about-page) .about-v2-process,
  body:has(main.about-page) .about-v2-audience,
  body:has(main.about-page) .about-v2-compliance,
  body:has(main.about-page) .about-v2-cta { width:min(100% - 48px, 720px); }
  body:has(main.about-page) .about-v2-hero { min-height:390px; }
  body:has(main.about-page) .about-v2-hero-inner { min-height:390px; }
  body:has(main.about-page) .about-v2-gallery-images,
  body:has(main.about-page) .about-v2-reason-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  body:has(main.about-page) .about-v2-what,
  body:has(main.about-page) .about-v2-background,
  body:has(main.about-page) .about-v2-factory-video,
  body:has(main.about-page) .about-v2-audience,
  body:has(main.about-page) .about-v2-mission { grid-template-columns:1fr; gap:28px; }
  body:has(main.about-page) .about-v2-background { padding:30px 34px; }
  body:has(main.about-page) .about-v2-factory-video { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  body:has(main.about-page) .about-v2-factory-video-copy { max-width: 640px; }
  body:has(main.about-page) .about-v2-background-panel {
    margin-top:4px;
    padding:26px 0 0;
    border-top:1px solid #b9cef3;
    border-left:0;
  }
  html body:has(main.about-page) .about-lab-v2 > .about-v2-background {
    width:calc(100% - 48px) !important;
    margin-top:18px !important;
  }
  body:has(main.about-page) .about-v2-mission { padding:56px 24px; }
}

@media (max-width: 600px) {
  body:has(main.about-page) .about-v2-hero { min-height:430px; background-position:63% center; }
  body:has(main.about-page) .about-v2-hero-inner,
  body:has(main.about-page) .about-v2-gallery-inner,
  body:has(main.about-page) .about-v2-background,
  body:has(main.about-page) .about-v2-factory-video,
  body:has(main.about-page) .about-v2-what,
  body:has(main.about-page) .about-v2-reasons,
  body:has(main.about-page) .about-v2-process,
  body:has(main.about-page) .about-v2-audience,
  body:has(main.about-page) .about-v2-compliance,
  body:has(main.about-page) .about-v2-cta { width:calc(100% - 32px); }
  body:has(main.about-page) .about-v2-hero-inner { min-height:430px; align-items:flex-end; }
  body:has(main.about-page) .about-v2-hero-copy { width:100%; padding:48px 0 42px; }
  body:has(main.about-page) .about-v2-hero h1 { font-size:42px; }
  body:has(main.about-page) .about-v2-hero .about-lab-intro { font-size:14px; line-height:1.65; }
  body:has(main.about-page) .about-v2-gallery { padding-top:40px; }
  body:has(main.about-page) .about-v2-gallery-heading,
  body:has(main.about-page) .about-v2-cta { display:block; }
  body:has(main.about-page) .about-v2-gallery-link { margin-top:8px; }
  html body:has(main.about-page) .about-v2-gallery-images {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  html body:has(main.about-page) .about-v2-gallery-images figure {
    min-width: 0;
    height: 220px;
    aspect-ratio: auto;
  }
  html body:has(main.about-page) .about-v2-gallery-images.is-list figure { height:220px; }
  body:has(main.about-page) .about-v2-gallery-controls { flex-wrap:wrap; }
  body:has(main.about-page) .about-v2-gallery-layout { width:100%; margin:4px 0 0; }
  body:has(main.about-page) .about-v2-what { display:block; padding:40px 0; }
  body:has(main.about-page) .about-v2-background { display:block; min-height:0; margin-top:12px !important; padding:28px 20px 24px; }
  body:has(main.about-page) .about-v2-factory-video { margin-top: 40px !important; gap: 23px; }
  body:has(main.about-page) .about-v2-factory-video-copy h2 { font-size: 34px; }
  html body:has(main.about-page) .about-lab-v2 > .about-v2-background {
    width:calc(100% - 32px) !important;
    margin-top:12px !important;
  }
  body:has(main.about-page) .about-v2-background-panel { margin-top:28px; padding:24px 0 0; border-top:1px solid #b9cef3; border-left:0; }
  body:has(main.about-page) .about-v2-background-points { margin-top:0; }
  body:has(main.about-page) .about-v2-background-points article { grid-template-columns:42px minmax(0,1fr); gap:13px; min-height:0; padding:16px 0; }
  body:has(main.about-page) .about-v2-background-icon { width:42px; height:42px; }
  body:has(main.about-page) .about-v2-what > div:last-child { margin-top:20px; }
  body:has(main.about-page) .about-v2-what ul { grid-template-columns:1fr; }
  body:has(main.about-page) .about-v2-reasons { padding:24px 16px; }
  body:has(main.about-page) .about-v2-reason-grid { grid-template-columns:1fr; }
  body:has(main.about-page) .about-v2-reason-grid article { min-height:0; }
  body:has(main.about-page) .about-v2-process-list article { grid-template-columns:45px 1fr 18px; gap:13px; padding-right:14px; }
  body:has(main.about-page) .about-v2-process-list p { font-size:12px; }
  body:has(main.about-page) .about-v2-audience { display:block; }
  body:has(main.about-page) .about-v2-audience ul { margin-top:22px; grid-template-columns:1fr; }
  body:has(main.about-page) .about-v2-compliance { padding:24px; }
  body:has(main.about-page) .about-v2-cta .about-lab-actions { margin-top:22px; }
}

/* The legacy bundle appended a later one-sided reference image rule after the
   About component. Keep the approved full-frame local laboratory image here. */
html body:has(main.about-page) .about-lab-v2 > .about-v2-hero {
  background-image: linear-gradient(90deg, rgba(1, 18, 50, .96) 0%, rgba(1, 24, 62, .83) 46%, rgba(1, 25, 63, .38) 100%), url('/wp-content/uploads/2026/07/lab-vials2.webp') !important;
  background-position: center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}
html body:has(main.about-page) .about-lab-v2 > .about-v2-hero::before {
  background: transparent !important;
}

@media (prefers-reduced-motion: reduce) {
  body:has(main.about-page) .about-lab-v2 a,
  body:has(main.about-page) .about-lab-v2 button { transition:none; }
}

/* Portrait editor uploads retain their whole frame on phones. The ratio is
 * emitted from the uploaded local file, so future image replacements need no
 * separate crop setting. Landscape and video slots keep the compact master
 * rhythm. */
@media (max-width: 600px) {
  html body:has(main.about-page) .about-v2-gallery-images figure.about-v2-gallery-item--portrait,
  html body:has(main.about-page) .about-v2-gallery-images.is-list figure.about-v2-gallery-item--portrait {
    height: auto;
    aspect-ratio: var(--about-media-ratio, 3 / 4);
  }
}

/* Final geometry follows the approved compact master rather than the older
 * 520px About rules in the legacy sheet. This changes only presentation. */
html body:has(main.about-page) .about-lab-v2 > .about-v2-hero {
  min-height: 400px !important;
  height: 400px !important;
  padding-right: max(48px, calc((100% - 1280px) / 2)) !important;
  padding-left: max(48px, calc((100% - 1280px) / 2)) !important;
}
html body:has(main.about-page) .about-lab-v2 .about-v2-hero-inner {
  width: min(1280px, calc(100% - 96px)) !important;
  max-width: none !important;
  min-height: 400px !important;
  height: 400px !important;
  margin: 0 auto !important;
  display: flex !important;
  align-items: center !important;
}
html body:has(main.about-page) .about-lab-v2 > .about-v2-gallery {
  padding-right: 0 !important;
  padding-left: 0 !important;
}
html body:has(main.about-page) .about-v2-gallery-inner {
  width: min(1280px, calc(100% - 96px)) !important;
  max-width: none !important;
  margin-right: auto !important;
  margin-left: auto !important;
}

/* The legacy About component assigns an order and full bleed width to every
 * direct section. Lock this new section to the selected insertion point and
 * the same 1280px rail as the gallery without changing any other section. */
html body:has(main.about-page) .about-lab-v2 > .about-v2-factory-video {
  order: 1 !important;
  width: min(1280px, calc(100% - 96px)) !important;
  max-width: 1280px !important;
  margin-right: auto !important;
  margin-left: auto !important;
  grid-template-columns: minmax(0, 2.15fr) minmax(320px, 1fr) !important;
  gap: 42px !important;
  align-items: start !important;
}
html body:has(main.about-page) .about-v2-factory-video-copy {
  padding-top: 16px;
}
html body:has(main.about-page) .about-v2-factory-video-media figure {
  padding: 14px !important;
  box-sizing: border-box !important;
  background: #f2f6ff !important;
  border-color: #dce7f7 !important;
}
html body:has(main.about-page) .about-v2-factory-video-media video,
html body:has(main.about-page) .about-v2-factory-video-media img {
  border-radius: 2px;
}
html body:has(main.about-page) .about-v2-factory-video-copy {
  max-width: 395px !important;
  padding-top: 14px !important;
}
html body:has(main.about-page) .about-v2-factory-video-copy h2 {
  max-width: 390px;
  margin-bottom: 18px !important;
  font-size: clamp(36px, 3.1vw, 48px) !important;
  line-height: 1.08 !important;
}
html body:has(main.about-page) .about-v2-factory-video-description {
  max-width: 360px;
  margin: 0 !important;
  color: #5f7394 !important;
  font-size: 15px !important;
  line-height: 1.66 !important;
}
html body:has(main.about-page) .about-v2-factory-video-play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 158px;
  min-height: 48px;
  margin-top: 25px;
  padding: 0 20px;
  border: 1px solid #1263ef;
  border-radius: 3px;
  background: #1263ef;
  color: #fff;
  font: 800 14px/1 Manrope, Arial, sans-serif;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(18, 99, 239, .15);
}
html body:has(main.about-page) .about-v2-factory-video-play:hover,
html body:has(main.about-page) .about-v2-factory-video-play:focus-visible {
  background: #0c53d0;
  border-color: #0c53d0;
}
html body:has(main.about-page) .about-v2-factory-video-play-icon {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}
html body:has(main.about-page) .about-v2-factory-video-details {
  width: min(100%, 360px);
  margin-top: 20px;
  padding-top: 19px;
  border-top: 1px solid #d7e2f1;
}
html body:has(main.about-page) .about-v2-factory-video-caption-kicker {
  margin: 0 0 10px !important;
  color: #5474a5 !important;
  font: 800 11px/1.25 Manrope, Arial, sans-serif !important;
  letter-spacing: .14em;
}
html body:has(main.about-page) .about-v2-factory-video-details .about-v2-factory-video-summary {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  color: #5f7394 !important;
  font-size: 14px !important;
  line-height: 1.66 !important;
}
html body:has(main.about-page) .about-v2-factory-video-details .about-v2-factory-video-link {
  margin-top: 13px !important;
  font-size: 14px !important;
}
html body:has(main.about-page) .about-v2-factory-video-media video {
  min-height: 0;
  object-position: center;
}

/* Match the approved master: the pale panel itself is the centered 1280px
 * block, while its heading and cards sit flush on the same left/right rail.
 * Do not add a second inner inset that changes the card proportions. */
html body:has(main.about-page) .about-lab-v2 > .about-v2-reasons {
  /* Keep the pale panel at the master width. The content itself sits inside
     a separate 24px safety rail so headings and cards stay within the
     approved inner frame. */
  width: min(1280px, calc(100% - 96px)) !important;
  max-width: 1280px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
  padding: 38px 24px 44px !important;
}
html body:has(main.about-page) main.about-page {
  background: #fff !important;
}
html body:has(main.about-page) .about-v2-reasons::before {
  /* The master aligns the pale background with the card rail; the legacy
     inset left 16px gutters that made the cards appear outside the panel. */
  inset: 0 !important;
}

@media (max-width: 1023px) {
  html body:has(main.about-page) .about-lab-v2 > .about-v2-reasons {
    width: calc(100% - 48px) !important;
    padding: 30px 24px 32px !important;
  }
  html body:has(main.about-page) .about-lab-v2 > .about-v2-factory-video {
    width: calc(100% - 48px) !important;
  }
  html body:has(main.about-page) .about-v2-factory-video-copy {
    padding-top: 0;
  }
}

@media (max-width: 600px) {
  html body:has(main.about-page) .about-lab-v2 > .about-v2-reasons {
    width: calc(100% - 32px) !important;
    padding: 24px 16px !important;
  }
  html body:has(main.about-page) .about-lab-v2 > .about-v2-factory-video {
    width: calc(100% - 32px) !important;
  }
  html body:has(main.about-page) .about-v2-factory-video-copy {
    max-width: none !important;
    padding-top: 0 !important;
  }
  html body:has(main.about-page) .about-v2-factory-video-copy h2 {
    max-width: none;
    font-size: 36px !important;
  }
  html body:has(main.about-page) .about-v2-factory-video-description { max-width: none; }
}

@media (max-width: 600px) {
  html body:has(main.about-page) .about-lab-v2 > .about-v2-hero {
    min-height: 430px !important;
    height: 430px !important;
    padding-right: 16px !important;
    padding-left: 16px !important;
  }
  html body:has(main.about-page) .about-lab-v2 .about-v2-hero-inner {
    width: 100% !important;
    min-height: 430px !important;
    height: 430px !important;
    padding: 32px 0 30px !important;
    align-items: flex-end !important;
  }
  html body:has(main.about-page) .about-v2-gallery-inner {
    width: calc(100% - 32px) !important;
  }
}