.kgle-page {
  --kgle-navy: #0b3968;
  --kgle-navy-2: #123e73;
  --kgle-teal: #12a0a6;
  --kgle-teal-2: #0f8f95;
  --kgle-text: #26476a;
  --kgle-muted: #55728e;
  --kgle-soft: #eef6fa;
  --kgle-soft-2: #f7fbfd;
  --kgle-border: #cfe0eb;
  --kgle-shadow: 0 18px 48px rgba(12, 44, 79, 0.08);
  width: min(100%, 1280px);
  margin: 0 auto;
  padding: 22px clamp(14px, 2.5vw, 28px) 52px;
  color: var(--kgle-text);
}
.ct-shortcode:has(.kgle-page) { width: 100% !important; max-width: none !important; }
.kgle-page,
.kgle-page * { box-sizing: border-box; }
.kgle-page img { display: block; max-width: 100%; }
.kgle-page a { text-decoration: none; }
.kgle-page h1,
.kgle-page h2,
.kgle-page h3,
.kgle-page p,
.kgle-page ul { margin-top: 0; }
.kgle-page ul { margin-bottom: 0; padding-left: 1.05rem; }
.kgle-page li { line-height: 1.5; }
.kgle-page li + li { margin-top: .44rem; }
.kgle-page li::marker { color: var(--kgle-teal); }
.kgle-page section[id] { scroll-margin-top: 130px; }

.kgle-eyebrow {
  display: inline-block;
  margin-bottom: .9rem;
  color: var(--kgle-teal-2);
  font-size: .78rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.kgle-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.36fr) minmax(280px, .64fr);
  gap: 34px;
  align-items: stretch;
  padding: clamp(30px, 4.5vw, 58px);
  margin-bottom: 18px;
  border: 1px solid var(--kgle-border);
  border-radius: 30px;
  background:
    radial-gradient(circle at 12% 0%, rgba(18,160,166,.14), transparent 34%),
    radial-gradient(circle at 100% 100%, rgba(11,57,104,.08), transparent 38%),
    linear-gradient(180deg, #fbfdff 0%, #f3f8fb 100%);
  box-shadow: var(--kgle-shadow);
  overflow: hidden;
}
.kgle-hero__content { align-self: center; }
.kgle-hero h1,
.kgle-section__head h2,
.kgle-cta h2 {
  color: var(--kgle-navy);
  line-height: 1.08;
  letter-spacing: -.035em;
}
.kgle-hero h1 {
  max-width: 760px;
  margin-bottom: 18px;
  font-size: clamp(2.15rem, 4vw, 4.15rem);
}
.kgle-hero p,
.kgle-section__head p,
.kgle-cta p {
  margin-bottom: 0;
  color: var(--kgle-muted);
  font-size: clamp(.98rem, 1.25vw, 1.08rem);
  line-height: 1.72;
}
.kgle-hero__content > p { max-width: 760px; }
.kgle-hero__actions,
.kgle-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}
.kgle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 21px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-weight: 800;
  line-height: 1;
  transition: transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.kgle-btn:hover { transform: translateY(-2px); }
.kgle-btn--primary { color: #fff; background: var(--kgle-navy); box-shadow: 0 12px 25px rgba(11,57,104,.18); }
.kgle-btn--primary:hover { color: #fff; background: var(--kgle-navy-2); }
.kgle-btn--secondary { color: var(--kgle-navy); background: #fff; border-color: var(--kgle-border); }
.kgle-btn--secondary:hover { color: var(--kgle-teal-2); border-color: var(--kgle-teal); }

.kgle-hero__stats {
  display: grid;
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.kgle-stat {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 108px;
  padding: 20px 22px;
  border: 1px solid rgba(207,224,235,.95);
  border-radius: 20px;
  background: rgba(255,255,255,.88);
  box-shadow: 0 10px 28px rgba(12,44,79,.05);
}
.kgle-stat strong { display: block; margin-bottom: 4px; color: var(--kgle-navy); font-size: 1.55rem; line-height: 1.05; }
.kgle-stat span { color: var(--kgle-muted); line-height: 1.4; }

.kgle-quicknav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 0 0 34px;
  padding: 12px;
  border: 1px solid var(--kgle-border);
  border-radius: 18px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 10px 26px rgba(12,44,79,.045);
}
.kgle-quicknav a {
  padding: 10px 16px;
  border-radius: 999px;
  color: var(--kgle-navy);
  font-weight: 800;
  line-height: 1.1;
}
.kgle-quicknav a:hover { color: var(--kgle-teal-2); background: var(--kgle-soft); }

.kgle-section {
  margin-bottom: 36px;
  padding: clamp(24px, 3vw, 34px);
  border: 1px solid var(--kgle-border);
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 14px 38px rgba(12,44,79,.055);
}
.kgle-section--alt {
  background: linear-gradient(180deg, #f8fbfd 0%, #f1f7fa 100%);
}
.kgle-section__head {
  max-width: 880px;
  margin-bottom: 26px;
}
.kgle-section__head h2 {
  margin-bottom: 13px;
  font-size: clamp(1.8rem, 3vw, 2.7rem);
}

.kgle-grid { display: grid; gap: 24px; align-items: stretch; }
.kgle-grid--five { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.kgle-grid--five > .kgle-card { grid-column: span 2; }
.kgle-grid--five > .kgle-card:nth-child(4) { grid-column: 2 / span 2; }
.kgle-grid--five > .kgle-card:nth-child(5) { grid-column: 4 / span 2; }
.kgle-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kgle-grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.kgle-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 100%;
  overflow: hidden;
  border: 1px solid var(--kgle-border);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(12,44,79,.055);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.kgle-card:hover {
  transform: translateY(-3px);
  border-color: #acd2df;
  box-shadow: 0 20px 42px rgba(12,44,79,.10);
}
.kgle-card__media {
  display: grid;
  place-items: center;
  height: 238px;
  padding: 20px;
  overflow: hidden;
  border-bottom: 1px solid #e3edf3;
  background: linear-gradient(180deg, #f8fbfd 0%, #eef5f9 100%);
}
.kgle-card__media--soft { height: 250px; }
.kgle-card__media img {
  width: auto;
  height: auto;
  max-width: 88%;
  max-height: 194px;
  object-fit: contain;
  object-position: center;
}
.kgle-card--product:nth-child(1) .kgle-card__media img { max-width: 84%; }
.kgle-card--product:nth-child(2) .kgle-card__media img { max-width: 93%; }
.kgle-card--product:nth-child(3) .kgle-card__media img,
.kgle-card--product:nth-child(4) .kgle-card__media img,
.kgle-card--product:nth-child(5) .kgle-card__media img { max-width: 82%; }
.kgle-card__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 13px;
  padding: 23px 23px 25px;
}
.kgle-card__title-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  min-height: 72px;
}
.kgle-card__badge {
  display: inline-grid;
  place-items: center;
  min-width: 38px;
  height: 32px;
  padding: 0 8px;
  border-radius: 9px;
  color: #fff;
  background: linear-gradient(135deg, #0f7cc3, var(--kgle-teal));
  box-shadow: 0 8px 18px rgba(15,124,195,.18);
  font-size: .75rem;
  font-weight: 900;
}
.kgle-card h3,
.kgle-info-card h3 {
  margin-bottom: 0;
  color: var(--kgle-navy);
  font-size: clamp(1.08rem, 1.45vw, 1.28rem);
  line-height: 1.24;
  letter-spacing: -.018em;
}
.kgle-subtitle,
.kgle-overline {
  margin: 5px 0 0;
  color: var(--kgle-teal-2);
  font-size: .9rem;
  font-weight: 800;
  line-height: 1.4;
}
.kgle-overline { margin-top: 0; letter-spacing: .08em; text-transform: uppercase; font-size: .72rem; }
.kgle-card ul { color: var(--kgle-text); font-size: .93rem; }
.kgle-text-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: auto;
  padding-top: 8px;
  color: var(--kgle-navy);
  font-weight: 800;
}
.kgle-text-link::after { content: "→"; transition: transform .2s ease; }
.kgle-text-link:hover { color: var(--kgle-teal-2); }
.kgle-text-link:hover::after { transform: translateX(3px); }

.kgle-capability-band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 24px;
  padding: 18px 20px;
  border: 1px solid var(--kgle-border);
  border-radius: 20px;
  background: rgba(255,255,255,.9);
}
.kgle-capability-band > div { max-width: 760px; line-height: 1.6; }

.kgle-measurement-wrap {
  display: grid;
  grid-template-columns: minmax(300px, .82fr) minmax(0, 1.18fr);
  gap: 24px;
  align-items: stretch;
}
.kgle-measurement-visual {
  min-height: 100%;
  overflow: hidden;
  border: 1px solid var(--kgle-border);
  border-radius: 22px;
  background: linear-gradient(180deg, #eef5f9 0%, #f8fbfd 100%);
  box-shadow: 0 12px 30px rgba(12,44,79,.055);
}
.kgle-measurement-visual img {
  width: 100%;
  height: 100%;
  min-height: 560px;
  object-fit: cover;
  object-position: center;
}
.kgle-card--compact .kgle-card__body { min-height: 100%; }
.kgle-card--compact h3 { min-height: 2.55em; }

.kgle-grid--info .kgle-info-card {
  min-height: 100%;
  padding: 24px;
  border: 1px solid var(--kgle-border);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(12,44,79,.045);
}
.kgle-info-card p { margin: 11px 0 0; color: var(--kgle-muted); line-height: 1.68; }

.kgle-cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 28px;
  align-items: center;
  padding: clamp(26px, 3vw, 36px);
  border-radius: 28px;
  color: #fff;
  background: linear-gradient(135deg, var(--kgle-navy) 0%, #0f4c86 55%, var(--kgle-teal-2) 100%);
  box-shadow: 0 18px 44px rgba(11,57,104,.18);
}
.kgle-cta > div:first-child { max-width: 760px; }
.kgle-cta h2,
.kgle-cta .kgle-eyebrow,
.kgle-cta p { color: #fff; }
.kgle-cta h2 { margin-bottom: 10px; font-size: clamp(1.65rem, 2.6vw, 2.35rem); }
.kgle-cta .kgle-btn--primary { color: var(--kgle-navy); background: #fff; box-shadow: none; }
.kgle-cta .kgle-btn--secondary { color: #fff; background: transparent; border-color: rgba(255,255,255,.45); }
.kgle-cta .kgle-btn--secondary:hover { color: #fff; border-color: #fff; }
.kgle-cta__actions { justify-content: flex-end; margin-top: 0; }

@media (max-width: 1180px) {
  .kgle-grid--five { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kgle-grid--five > .kgle-card,
  .kgle-grid--five > .kgle-card:nth-child(4) { grid-column: auto; }
  .kgle-grid--five > .kgle-card:nth-child(5) {
    grid-column: 1 / -1;
    width: calc((100% - 24px) / 2);
    justify-self: center;
  }
  .kgle-card__title-row { min-height: 64px; }
}

@media (max-width: 1024px) {
  .kgle-hero,
  .kgle-measurement-wrap,
  .kgle-cta { grid-template-columns: 1fr; }
  .kgle-hero h1 { max-width: 900px; }
  .kgle-hero__stats { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto; }
  .kgle-stat { min-height: 98px; }
  .kgle-grid--three,
  .kgle-grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kgle-measurement-visual img { min-height: 360px; max-height: 440px; }
  .kgle-capability-band { align-items: flex-start; flex-direction: column; }
  .kgle-cta__actions { justify-content: flex-start; }
}

@media (max-width: 767px) {
  .kgle-page { padding: 12px 12px 40px; }
  .kgle-hero,
  .kgle-section,
  .kgle-cta { padding: 22px; border-radius: 22px; }
  .kgle-hero { gap: 24px; }
  .kgle-hero h1 { font-size: clamp(2rem, 11vw, 3rem); }
  .kgle-hero__stats,
  .kgle-grid--five,
  .kgle-grid--three,
  .kgle-grid--two { grid-template-columns: 1fr; }
  .kgle-grid--five > .kgle-card,
  .kgle-grid--five > .kgle-card:nth-child(4),
  .kgle-grid--five > .kgle-card:nth-child(5) { grid-column: auto; width: 100%; }
  .kgle-quicknav { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .kgle-quicknav::-webkit-scrollbar { display: none; }
  .kgle-quicknav a { flex: 0 0 auto; white-space: nowrap; }
  .kgle-card__media,
  .kgle-card__media--soft { height: 210px; }
  .kgle-card__media img { max-height: 168px; }
  .kgle-card__title-row { min-height: 0; }
  .kgle-card--compact h3 { min-height: 0; }
  .kgle-measurement-visual img { min-height: 260px; max-height: 320px; }
  .kgle-hero__actions,
  .kgle-cta__actions { flex-direction: column; align-items: stretch; }
  .kgle-btn { width: 100%; }
}


/* =========================================================
   Kay Scientia — General Lab Equipment responsive correction
   ========================================================= */

/* Keep the shortcode and page inside the viewport. */
html,
body {
  overflow-x: clip;
}

body:not(.oxygen-builder-body) .ct-shortcode:has(.kgle-page),
body:not(.oxygen-builder-body) .ct-code-block:has(.kgle-page),
body:not(.oxygen-builder-body) .kgle-page {
  min-width: 0 !important;
  max-width: 100% !important;
}

body:not(.oxygen-builder-body) .ct-shortcode:has(.kgle-page),
body:not(.oxygen-builder-body) .ct-code-block:has(.kgle-page) {
  width: 100% !important;
  padding-inline: 0 !important;
}

.kgle-page {
  width: min(100%, 1280px) !important;
}

.kgle-page h1,
.kgle-page h2,
.kgle-page h3,
.kgle-page p,
.kgle-page li,
.kgle-page a {
  overflow-wrap: break-word;
}

/* ---------------------------------------------------------
   DESKTOP: clear the fixed Oxygen header
   Uses the variable created by the Kay sticky-header plugin,
   with a safe fallback when that variable is unavailable.
   --------------------------------------------------------- */
@media (min-width: 1280px) {
  body:not(.oxygen-builder-body) .kgle-page {
    margin-top: calc(var(--ks-fixed-header-offset, 88px) + 18px) !important;
  }

  body:not(.oxygen-builder-body) .kgle-page section[id] {
    scroll-margin-top: calc(var(--ks-fixed-header-offset, 88px) + 28px) !important;
  }
}

/* ---------------------------------------------------------
   TABLET + SMALL LAPTOP: 768px–1279px
   --------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1279px) {
  .kgle-page {
    width: 100% !important;
    padding: 18px clamp(16px, 2.5vw, 28px) 48px !important;
  }

  .kgle-hero {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    padding: clamp(28px, 4vw, 42px) !important;
  }

  .kgle-hero h1 {
    max-width: 900px !important;
    font-size: clamp(2.35rem, 5vw, 3.5rem) !important;
  }

  .kgle-hero__stats {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-template-rows: none !important;
  }

  .kgle-stat {
    min-height: 104px !important;
    padding: 18px !important;
  }

  .kgle-quicknav {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    align-items: stretch !important;
  }

  .kgle-quicknav a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 48px !important;
    padding: 10px 12px !important;
    text-align: center !important;
    white-space: normal !important;
  }

  .kgle-section {
    padding: clamp(24px, 3vw, 32px) !important;
  }

  /* Oral-testing products: two columns with a full-width final card. */
  .kgle-grid--five {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .kgle-grid--five > .kgle-card,
  .kgle-grid--five > .kgle-card:nth-child(4) {
    grid-column: auto !important;
    width: 100% !important;
  }

  .kgle-grid--five > .kgle-card:nth-child(5) {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: none !important;
    justify-self: stretch !important;
  }

  /* Three-item sections: two columns and a properly aligned final item. */
  .kgle-grid--three {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .kgle-grid--three > :last-child {
    grid-column: 1 / -1 !important;
  }

  .kgle-grid--two {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .kgle-card__media,
  .kgle-card__media--soft {
    height: 220px !important;
    padding: 18px !important;
  }

  .kgle-card__media img {
    max-height: 178px !important;
  }

  .kgle-card__body {
    padding: 22px !important;
  }

  .kgle-card__title-row {
    min-height: 62px !important;
  }

  .kgle-measurement-wrap {
    grid-template-columns: 1fr !important;
  }

  .kgle-measurement-visual img {
    width: 100% !important;
    min-height: 320px !important;
    max-height: 400px !important;
    object-fit: cover !important;
  }

  .kgle-capability-band,
  .kgle-cta {
    align-items: flex-start !important;
  }

  .kgle-cta {
    grid-template-columns: 1fr !important;
  }

  .kgle-cta__actions {
    justify-content: flex-start !important;
  }
}

/* ---------------------------------------------------------
   MOBILE: up to 767px
   --------------------------------------------------------- */
@media (max-width: 767px) {
  .kgle-page {
    width: 100% !important;
    padding: 10px 10px 38px !important;
  }

  .kgle-hero,
  .kgle-section,
  .kgle-cta {
    width: 100% !important;
    padding: 20px !important;
    border-radius: 20px !important;
  }

  .kgle-hero {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  .kgle-hero h1 {
    max-width: none !important;
    font-size: clamp(2rem, 10vw, 2.75rem) !important;
    line-height: 1.08 !important;
  }

  .kgle-hero p,
  .kgle-section__head p,
  .kgle-cta p {
    font-size: .98rem !important;
    line-height: 1.65 !important;
  }

  .kgle-hero__stats {
    grid-template-columns: 1fr !important;
    grid-template-rows: none !important;
    gap: 10px !important;
  }

  .kgle-stat {
    min-height: 0 !important;
    padding: 16px 18px !important;
  }

  /* No horizontal scrolling menu on phones. */
  .kgle-quicknav {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    overflow: visible !important;
    padding: 9px !important;
  }

  .kgle-quicknav a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 0 !important;
    min-height: 52px !important;
    padding: 9px 8px !important;
    text-align: center !important;
    white-space: normal !important;
    font-size: .88rem !important;
    line-height: 1.25 !important;
  }

  .kgle-section {
    margin-bottom: 24px !important;
  }

  .kgle-section__head {
    margin-bottom: 20px !important;
  }

  .kgle-section__head h2 {
    font-size: clamp(1.65rem, 8vw, 2.15rem) !important;
    line-height: 1.12 !important;
  }

  .kgle-grid,
  .kgle-grid--five,
  .kgle-grid--three,
  .kgle-grid--two {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  .kgle-grid--five > .kgle-card,
  .kgle-grid--five > .kgle-card:nth-child(4),
  .kgle-grid--five > .kgle-card:nth-child(5),
  .kgle-grid--three > :last-child {
    grid-column: auto !important;
    width: 100% !important;
    max-width: none !important;
  }

  .kgle-card {
    width: 100% !important;
    border-radius: 18px !important;
  }

  .kgle-card__media,
  .kgle-card__media--soft {
    height: 205px !important;
    padding: 16px !important;
  }

  .kgle-card__media img {
    max-width: 88% !important;
    max-height: 168px !important;
  }

  .kgle-card__body {
    gap: 11px !important;
    padding: 19px !important;
  }

  .kgle-card__title-row {
    min-height: 0 !important;
    gap: 10px !important;
  }

  .kgle-card h3,
  .kgle-info-card h3 {
    font-size: 1.12rem !important;
  }

  .kgle-card ul {
    padding-left: 1rem !important;
    font-size: .92rem !important;
  }

  .kgle-measurement-wrap {
    grid-template-columns: 1fr !important;
  }

  .kgle-measurement-visual {
    min-height: 0 !important;
  }

  .kgle-measurement-visual img {
    min-height: 230px !important;
    max-height: 280px !important;
    object-fit: cover !important;
  }

  .kgle-capability-band {
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 17px !important;
  }

  .kgle-cta {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  .kgle-hero__actions,
  .kgle-cta__actions {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  .kgle-btn {
    width: 100% !important;
    min-height: 50px !important;
    padding-inline: 16px !important;
    text-align: center !important;
  }

  .kgle-page section[id] {
    scroll-margin-top: calc(var(--ks-fixed-header-offset, 82px) + 18px) !important;
  }
}

@media (max-width: 420px) {
  .kgle-quicknav {
    grid-template-columns: 1fr !important;
  }

  .kgle-hero,
  .kgle-section,
  .kgle-cta {
    padding: 18px !important;
  }
}

/* Avoid hover movement on touch devices. */
@media (hover: none) {
  .kgle-card:hover,
  .kgle-btn:hover {
    transform: none !important;
  }
}