/* ==========================================================================
   Krishgen Biosystems — hand-written theme stylesheet.
   Ported 1:1 from the approved Lovable design tokens (Remix of Light theme
   of Krishgen Elevate). No framework, no build step — plain CSS custom
   properties + semantic classes, chosen for page-speed and zero bloat.
   ========================================================================== */

/* ---- Design tokens ------------------------------------------------------ */
:root {
  --radius: 0.625rem;
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --radius-2xl: calc(var(--radius) + 8px);

  --brand: oklch(0.5271 0.2192 30.2);
  --brand-foreground: oklch(0.99 0 0);
  --ink: oklch(0.97 0.002 60);
  --ink-soft: oklch(0.93 0.003 60);
  --ink-foreground: oklch(0.22 0.01 39.5);
  --neutral-soft: oklch(0.9679 0.0033 60);
  --neutral-line: oklch(0.9137 0.0035 60);
  --brand-tint: oklch(0.9756 0.0104 30.2);

  --background: oklch(1 0 0);
  --foreground: oklch(0.1738 0.0086 39.5);
  --muted-foreground: oklch(0.505 0.008 45);
  --border: oklch(0.9137 0.0035 60);

  --shadow-color: oklch(0.17 0.01 39 / 0.55);

  /* Partners-page globe visual only: a muted (desaturated) echo of --brand
     for the wire mesh, plus a warm gold accent for the traveling-light
     paths -- kept as their own tokens rather than new inline hex so nothing
     outside that one component reads them. */
  --globe-mesh: oklch(0.5379 0.1456 28.5);
  --globe-gold: oklch(0.7649 0.1399 72.9);
  --globe-gold-bright: oklch(0.8909 0.1039 80.4);
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ---- Reset ---------------------------------------------------------------*/
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; border-color: var(--border); }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  background-color: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
  font-size: 1rem;
}
img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; }
/* !important on this reset block: guards against Astra's own default
   button/list styling still applying if its stylesheet is ever left
   loaded (stale cache, a CSS-optimisation plugin re-combining assets,
   etc.) after functions.php dequeues it. Astra's base styles don't use
   !important, so this wins regardless of stylesheet load order. */
button { cursor: pointer; background: none !important; border: none !important; padding: 0; }
ul, ol { list-style: none !important; padding: 0 !important; margin: 0; }
li { list-style: none !important; }
h1, h2, h3, h4 { letter-spacing: -0.022em; line-height: 1.1; font-weight: 700; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ---- Layout utilities -----------------------------------------------------*/
.kg-container {
  width: 100%;
  margin-inline: auto;
  max-width: 80rem;
  padding-inline: 1.25rem;
}
@media (min-width: 1024px) { .kg-container { padding-inline: 2.5rem; } }

.kg-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand);
}
.kg-eyebrow__rule { width: 1.5rem; height: 1px; background: var(--brand); display: inline-block; }
.kg-eyebrow--dark { color: color-mix(in oklab, var(--ink-foreground) 70%, transparent); }
.kg-eyebrow--muted { color: color-mix(in oklab, var(--ink-foreground) 45%, transparent); }

.kg-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 600ms cubic-bezier(.22,1,.36,1), transform 600ms cubic-bezier(.22,1,.36,1);
}
.kg-reveal.is-visible, html.no-js .kg-reveal { opacity: 1; transform: none; }

.kg-grid-lines {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, color-mix(in oklab, var(--ink-foreground) 7%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in oklab, var(--ink-foreground) 7%, transparent) 1px, transparent 1px);
  background-size: 72px 72px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .kg-reveal { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}

/* ---- Buttons ---------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  min-height: 2.75rem; padding-inline: 1.5rem;
  border-radius: var(--radius-md);
  font-size: .875rem; font-weight: 600;
  transition: transform .3s, background-color .3s, border-color .3s, color .3s;
}
.btn-primary { background: var(--brand); color: var(--brand-foreground); }
.btn-primary:hover { transform: translateY(-2px); }
.btn-outline { border: 1px solid color-mix(in oklab, var(--ink-foreground) 25%, transparent); color: var(--ink-foreground); }
.btn-outline:hover { border-color: var(--brand); color: var(--brand); }
.btn-outline-light { border: 1px solid var(--border); color: var(--foreground); }
.btn-outline-light:hover { border-color: var(--brand); color: var(--brand); }
.arrow-link { display: inline-flex; align-items: center; gap: .5rem; font-size: .875rem; font-weight: 600; transition: color .3s; }
.arrow-link:hover { color: var(--brand); }
.arrow-link__arrow { transition: transform .3s; }
.arrow-link:hover .arrow-link__arrow { transform: translateX(4px); }

/* ---- Section heading ---------------------------------------------------*/
.section-heading {
  display: flex; flex-direction: column; gap: 1.5rem;
}
@media (min-width: 640px) {
  .section-heading { flex-direction: row; align-items: flex-end; justify-content: space-between; }
  .section-heading--center { flex-direction: column; align-items: center; text-align: center; }
}
.section-heading__body { max-width: 42rem; min-width: 0; }
.section-heading--center .section-heading__body { margin-inline: auto; }
.section-heading__title { margin-top: 1rem; font-size: 1.875rem; font-weight: 700; }
.section-heading__title--dark { color: var(--ink-foreground); }
@media (min-width: 640px) { .section-heading__title { font-size: 2.25rem; } }
@media (min-width: 1024px) { .section-heading__title { font-size: 2.75rem; line-height: 1.08; } }
.section-heading__intro { margin-top: 1rem; font-size: 1rem; line-height: 1.6; color: var(--muted-foreground); }
.section-heading__intro--dark { color: color-mix(in oklab, var(--ink-foreground) 70%, transparent); }
.section-heading__action { flex-shrink: 0; }

/* ---- Section spacing helpers -------------------------------------------*/
.section { padding-block: 5rem; }
@media (min-width: 1024px) { .section { padding-block: 7rem; } }
.section--sm { padding-block: 4rem; }
@media (min-width: 1024px) { .section--sm { padding-block: 5rem; } }
.bg-ink { background: var(--ink); position: relative; overflow: hidden; }
.bg-ink-soft { background: var(--ink-soft); }
.bg-tint { background: var(--brand-tint); }
.bg-neutral-soft { background: var(--neutral-soft); }
.bg-surface { background: var(--background); }
.section-border { border-bottom: 1px solid var(--border); }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--ink);
  transition: background-color .5s;
}
.site-header.is-scrolled { background: color-mix(in oklab, var(--ink) 95%, transparent); backdrop-filter: blur(10px); }

.utility-bar { display: none; border-bottom: 1px solid color-mix(in oklab, var(--ink-foreground) 10%, transparent); }
@media (min-width: 1024px) { .utility-bar { display: block; } }
.utility-bar__row {
  display: flex; align-items: center; justify-content: space-between;
  height: 2.25rem; font-size: .7rem; color: color-mix(in oklab, var(--ink-foreground) 60%, transparent);
}
.utility-bar__right { display: flex; align-items: center; gap: 1.25rem; }
.utility-bar__quote {
  display: inline-flex; align-items: center; gap: .375rem;
  border-radius: 999px; border: 1px solid color-mix(in oklab, var(--brand) 60%, transparent);
  background: color-mix(in oklab, var(--brand) 10%, transparent);
  padding: .25rem .75rem; font-size: .7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em; color: var(--brand);
  transition: background-color .3s, color .3s;
}
.utility-bar__quote:hover { background: var(--brand); color: var(--brand-foreground); }

.header-row {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  height: 4rem;
}
@media (min-width: 1024px) { .header-row { height: 5rem; gap: 1rem; } }

.logo { display: flex; min-width: 0; align-items: center; gap: .75rem; }
.logo__mark {
  display: grid; place-items: center; flex-shrink: 0;
  width: 2.25rem; height: 2.25rem; border-radius: 8px;
  background: var(--brand); color: var(--brand-foreground); font-weight: 800;
}
.logo__text { min-width: 0; line-height: 1.1; }
.logo__name { display: block; font-size: .95rem; font-weight: 800; letter-spacing: -0.01em; color: var(--ink-foreground); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.logo__sub { display: block; margin-top: .2rem; font-size: .6rem; font-weight: 600; letter-spacing: .22em; color: color-mix(in oklab, var(--ink-foreground) 55%, transparent); white-space: nowrap; }

.primary-nav { display: none; }
@media (min-width: 1024px) {
  .primary-nav { display: flex; flex: 1 1 auto; min-width: 0; align-items: center; justify-content: center; gap: .125rem; }
}
.primary-nav__item { position: relative; }
.primary-nav__link {
  position: relative; white-space: nowrap; border-radius: 6px; padding: .5rem;
  font-size: .78rem; font-weight: 500; color: color-mix(in oklab, var(--ink-foreground) 80%, transparent);
  transition: color .3s;
}
.primary-nav__link:hover, .primary-nav__link.is-open { color: var(--ink-foreground); }
.primary-nav__link::after {
  content: ""; position: absolute; left: .5rem; right: .5rem; bottom: .25rem; height: 2px;
  background: var(--brand); transform: scaleX(0); transform-origin: left; transition: transform .3s;
}
.primary-nav__link:hover::after, .primary-nav__link.is-open::after { transform: scaleX(1); }
.primary-nav__caret { margin-left: .375rem; font-size: .6rem; }

.header-actions { display: flex; flex-shrink: 0; align-items: center; justify-content: flex-end; gap: .5rem; }
@media (min-width: 1024px) { .header-actions { gap: .75rem; } }
.header-search { display: none; height: 2.75rem; width: 10rem; }
@media (min-width: 1280px) { .header-search { display: block; } }
.header-contact-btn { display: none; }
@media (min-width: 1024px) { .header-contact-btn { display: inline-flex; } }
.menu-toggle {
  display: grid; place-items: center; width: 2.75rem; height: 2.75rem;
  border-radius: 8px; border: 1px solid color-mix(in oklab, var(--ink-foreground) 15%, transparent);
  color: var(--ink-foreground);
}
@media (min-width: 1024px) { .menu-toggle { display: none; } }

/* Search field */
.search-field { position: relative; width: 100%; }
.search-field__box {
  display: flex; align-items: center; gap: .5rem; height: 100%;
  border-radius: 8px; border: 1px solid color-mix(in oklab, var(--ink-foreground) 15%, transparent);
  background: color-mix(in oklab, var(--ink-foreground) 5%, transparent);
  padding-inline: .75rem; transition: border-color .3s, background-color .3s;
}
.search-field__box:focus-within { border-color: var(--brand); background: color-mix(in oklab, var(--ink-foreground) 10%, transparent); }
.search-field__icon { color: color-mix(in oklab, var(--ink-foreground) 50%, transparent); }
.search-field__input {
  height: 2.75rem; width: 100%; background: transparent; border: none; outline: none;
  font-size: .875rem; color: var(--ink-foreground);
}
.search-field__input::placeholder { color: color-mix(in oklab, var(--ink-foreground) 45%, transparent); }
.search-field__popover {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 50; margin-top: .5rem;
  border-radius: 10px; border: 1px solid var(--border); background: var(--background);
  padding: .75rem; box-shadow: 0 20px 40px -20px var(--shadow-color);
}
.search-field__popover-title { font-size: .6875rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-foreground); }
.search-field__popover-item {
  display: flex; width: 100%; align-items: center; justify-content: space-between;
  border-radius: 6px; padding: .5rem; text-align: left; font-size: .875rem; color: var(--foreground);
}
.search-field__popover-item:hover { background: var(--neutral-soft); }

/* Mega menu */
.mega-menu {
  position: absolute; inset-inline: 0; top: 100%; z-index: 40; display: none;
  overflow: hidden; border-top: 1px solid color-mix(in oklab, var(--ink-foreground) 10%, transparent);
  background: var(--ink); max-height: 0; opacity: 0;
  transition: max-height .5s, opacity .5s;
}
@media (min-width: 1024px) { .mega-menu { display: block; } }
.mega-menu.is-open { max-height: 34rem; opacity: 1; }
.mega-menu__grid { display: grid; gap: 2.5rem; padding-block: 2.5rem; grid-template-columns: repeat(3, minmax(0,1fr)) 18rem; }
.mega-menu__list { margin-top: 1rem; }
.mega-menu__list li + li { margin-top: .125rem; }
.mega-menu__link {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  border-radius: 6px; padding: .5rem; font-size: .875rem;
  color: color-mix(in oklab, var(--ink-foreground) 75%, transparent);
  transition: background-color .3s, color .3s;
}
.mega-menu__link:hover { background: color-mix(in oklab, var(--ink-foreground) 5%, transparent); color: var(--ink-foreground); }
.mega-menu__aside {
  border-radius: 12px; border: 1px solid color-mix(in oklab, var(--ink-foreground) 10%, transparent);
  background: var(--ink-soft); padding: 1.5rem;
}
.mega-menu__aside p { margin-top: .75rem; font-size: .875rem; line-height: 1.6; color: color-mix(in oklab, var(--ink-foreground) 75%, transparent); }
.mega-menu__aside a { margin-top: 1.25rem; display: inline-flex; align-items: center; gap: .5rem; font-size: .875rem; font-weight: 600; color: var(--brand); }

/* Simple flat-list dropdown (About Us, News and Events, Resources, …) —
   a compact panel anchored to its own trigger, unlike the full-width mega
   menu grid. Hidden by default, shown via .is-open (same pattern as
   .mega-menu so both share the one hover/focus binder in main.js). */
.nav-dropdown {
  position: absolute; top: 100%; left: 0; z-index: 40; display: none;
  min-width: 14rem; margin-top: .5rem; padding: .5rem;
  border-radius: 10px; border: 1px solid var(--border); background: var(--background);
  box-shadow: 0 20px 40px -20px var(--shadow-color);
  opacity: 0; transform: translateY(-4px);
  transition: opacity .2s, transform .2s;
}
@media (min-width: 1024px) { .nav-dropdown { display: block; } }
.nav-dropdown.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; }
.nav-dropdown:not(.is-open) { pointer-events: none; }
.nav-dropdown__list li + li { margin-top: .125rem; }
.nav-dropdown__link {
  display: block; border-radius: 6px; padding: .5rem .625rem; font-size: .875rem;
  color: var(--foreground); transition: background-color .3s, color .3s;
}
.nav-dropdown__link:hover { background: var(--neutral-soft); color: var(--ink-foreground); }

/* Mobile menu */
.mobile-menu { overflow: hidden; max-height: 0; border-top: 1px solid color-mix(in oklab, var(--ink-foreground) 10%, transparent); background: var(--ink); transition: max-height .4s; }
@media (min-width: 1024px) { .mobile-menu { display: none; } }
.mobile-menu.is-open { max-height: 44rem; overflow-y: auto; }
.mobile-menu__inner { padding-block: 1.25rem; }
.mobile-menu__inner > * + * { margin-top: .25rem; }
.mobile-nav-group { border-bottom: 1px solid color-mix(in oklab, var(--ink-foreground) 10%, transparent); }
.mobile-nav-group__toggle {
  display: flex; width: 100%; min-height: 2.75rem; align-items: center; justify-content: space-between;
  padding-block: .75rem; text-align: left; font-size: .95rem; font-weight: 600; color: var(--ink-foreground);
}
.mobile-nav-group__caret { color: var(--brand); transition: transform .3s; }
.mobile-nav-group__toggle[aria-expanded="true"] .mobile-nav-group__caret { transform: rotate(45deg); }
.mobile-nav-group__panel { overflow: hidden; max-height: 0; transition: max-height .3s; }
.mobile-nav-group__panel.is-open { max-height: 30rem; }
.mobile-nav-group__panel a { display: flex; min-height: 2.75rem; align-items: center; font-size: .875rem; color: color-mix(in oklab, var(--ink-foreground) 70%, transparent); }
.mobile-nav-link {
  display: flex; min-height: 2.75rem; align-items: center;
  border-bottom: 1px solid color-mix(in oklab, var(--ink-foreground) 10%, transparent);
  font-size: .95rem; font-weight: 600; color: var(--ink-foreground);
}
.mobile-menu__cta { margin-top: 1rem; display: flex; min-height: 2.75rem; align-items: center; justify-content: center; border-radius: 8px; background: var(--brand); padding-inline: 1rem; font-size: .875rem; font-weight: 600; color: var(--brand-foreground); }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero { position: relative; overflow: hidden; background: var(--ink); }
.hero__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .7; }
.hero__scrim { position: absolute; inset: 0; background: linear-gradient(to right, var(--ink), color-mix(in oklab, var(--ink) 85%, transparent), color-mix(in oklab, var(--ink) 25%, transparent)); }
.hero__inner { position: relative; padding-block: 5rem; }
@media (min-width: 1024px) { .hero__inner { padding-block: 8rem; } }
.hero__content { max-width: 48rem; }
.hero__title { margin-top: 1.5rem; font-size: 2.25rem; font-weight: 800; color: var(--ink-foreground); }
@media (min-width: 640px) { .hero__title { font-size: 3rem; } }
@media (min-width: 1024px) { .hero__title { font-size: 4rem; line-height: 1.03; } }
.hero__subtext { margin-top: 1.5rem; max-width: 36rem; font-size: 1rem; line-height: 1.6; color: color-mix(in oklab, var(--ink-foreground) 75%, transparent); }
@media (min-width: 1024px) { .hero__subtext { font-size: 1.125rem; } }
.hero__actions { margin-top: 2.25rem; display: flex; flex-wrap: wrap; gap: .75rem; }
.hero__stats { margin-top: 4rem; border-top: 1px solid color-mix(in oklab, var(--ink-foreground) 12%, transparent); padding-top: 2rem; }
.hero__stats-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1.5rem; }
@media (min-width: 640px) { .hero__stats-grid { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.hero__stat-value { font-size: 1.25rem; font-weight: 700; color: var(--ink-foreground); }
@media (min-width: 1024px) { .hero__stat-value { font-size: 1.5rem; } }
.hero__stat-label { margin-top: .25rem; font-size: .75rem; line-height: 1.3; color: color-mix(in oklab, var(--ink-foreground) 55%, transparent); }

/* ==========================================================================
   Value pillars
   ========================================================================== */
.value-pillars__grid {
  display: grid; grid-template-columns: 1fr; gap: 1px; overflow: hidden;
  border-radius: 12px; border: 1px solid var(--border); background: var(--border);
}
@media (min-width: 640px) { .value-pillars__grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1024px) { .value-pillars__grid { grid-template-columns: repeat(5, minmax(0,1fr)); } }
.value-pillars__item { background: var(--background); padding: 1.5rem; transition: background-color .3s; }
.value-pillars__item:hover { background: var(--brand-tint); }
.value-pillars__num { font-size: .7rem; font-weight: 700; letter-spacing: .18em; color: var(--brand); }
.value-pillars__title { margin-top: 1rem; font-size: 1rem; font-weight: 600; }
.value-pillars__note { margin-top: .5rem; font-size: .875rem; line-height: 1.6; color: var(--muted-foreground); }
.value-pillars__rule { margin-top: 1.25rem; display: block; height: 2px; width: 2rem; background: var(--brand); transition: transform .5s; transform-origin: left; }
.value-pillars__item:hover .value-pillars__rule { transform: scaleX(2.5); }

/* ==========================================================================
   Company overview
   ========================================================================== */
.overview__grid { position: relative; display: grid; gap: 3.5rem; padding-block: 5rem; }
@media (min-width: 1024px) { .overview__grid { grid-template-columns: 1.1fr 1fr; padding-block: 7rem; } }
.overview__stats { margin-top: 2.5rem; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 2rem; }
.overview__stat { min-width: 0; border-left: 1px solid color-mix(in oklab, var(--ink-foreground) 15%, transparent); padding-left: 1.25rem; }
.overview__stat-value { font-size: 1.875rem; font-weight: 800; color: var(--ink-foreground); }
@media (min-width: 1024px) { .overview__stat-value { font-size: 2.25rem; } }
.overview__stat-value .suffix { color: var(--brand); }
.overview__stat-label { margin-top: .5rem; font-size: .875rem; color: color-mix(in oklab, var(--ink-foreground) 60%, transparent); }
.overview__panel { border-radius: 12px; border: 1px solid color-mix(in oklab, var(--ink-foreground) 12%, transparent); background: var(--ink-soft); padding: 1.75rem; }
.overview__panel + .overview__panel { margin-top: 2rem; }
.overview__tag-list { margin-top: 1rem; display: flex; flex-wrap: wrap; gap: .5rem; }
.overview__tag { border-radius: 6px; border: 1px solid color-mix(in oklab, var(--ink-foreground) 12%, transparent); padding: .375rem .75rem; font-size: .75rem; color: color-mix(in oklab, var(--ink-foreground) 80%, transparent); }
.overview__reg-list { margin-top: 1rem; }
.overview__reg-row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; border-bottom: 1px solid color-mix(in oklab, var(--ink-foreground) 10%, transparent); padding-block: .75rem; }
.overview__reg-row:last-child { border-bottom: 0; padding-bottom: 0; }
.overview__reg-code { font-size: .875rem; font-weight: 600; color: var(--ink-foreground); }
.overview__reg-label { text-align: right; font-size: .75rem; color: color-mix(in oklab, var(--ink-foreground) 55%, transparent); }

/* ==========================================================================
   Card grids (categories / featured products / events / promotions)
   ========================================================================== */
.card-grid { margin-top: 3rem; display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
.card-grid--2 { }
@media (min-width: 640px) { .card-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1024px) { .card-grid--4 { grid-template-columns: repeat(4, minmax(0,1fr)); } }
@media (min-width: 1024px) { .card-grid--3 { grid-template-columns: repeat(3, minmax(0,1fr)); } }

.tile-card { display: flex; height: 100%; flex-direction: column; overflow: hidden; border-radius: 10px; border: 1px solid var(--border); background: var(--background); transition: transform .5s, border-color .5s, box-shadow .5s; }
.tile-card:hover { transform: translateY(-6px); border-color: color-mix(in oklab, var(--brand) 40%, transparent); box-shadow: 0 18px 40px -24px var(--shadow-color); }
.tile-card__media { position: relative; aspect-ratio: 16/10; overflow: hidden; background: var(--neutral-soft); }
.tile-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s; }
.tile-card:hover .tile-card__media img { transform: scale(1.04); }
.tile-card__bar { position: absolute; inset-inline: 0; bottom: 0; height: 3px; background: var(--brand); transform: scaleX(0); transform-origin: left; transition: transform .5s; }
.tile-card:hover .tile-card__bar { transform: scaleX(1); }
.tile-card__body { display: flex; flex: 1; align-items: center; justify-content: space-between; gap: .75rem; padding: 1.25rem; }
.tile-card__title { min-width: 0; font-size: .95rem; font-weight: 600; }
.tile-card__arrow { flex-shrink: 0; color: var(--brand); opacity: 0; transition: opacity .3s, transform .3s; }
.tile-card:hover .tile-card__arrow { opacity: 1; transform: translateX(4px); }

.product-card { display: flex; height: 100%; flex-direction: column; overflow: hidden; border-radius: 12px; border: 1px solid var(--border); background: var(--background); transition: transform .5s, box-shadow .5s; }
.product-card:hover { transform: translateY(-6px); box-shadow: 0 20px 50px -30px var(--shadow-color); }
.product-card__media { position: relative; aspect-ratio: 16/10; overflow: hidden; background: var(--ink); }
.product-card__media img { width: 100%; height: 100%; object-fit: cover; opacity: .75; transition: transform .7s; }
.product-card:hover .product-card__media img { transform: scale(1.05); }
.product-card__scrim { position: absolute; inset: 0; background: linear-gradient(to top, color-mix(in oklab, var(--ink) 85%, transparent), color-mix(in oklab, var(--ink) 25%, transparent), transparent); }
.product-card__body { display: flex; flex: 1; flex-direction: column; padding: 1.25rem; }
.product-card__rule { height: 2px; width: 2.5rem; background: var(--brand); transition: width .5s; }
.product-card:hover .product-card__rule { width: 4rem; }
.product-card__title { margin-top: 1.25rem; font-size: .875rem; font-weight: 700; letter-spacing: .08em; }
.product-card__desc { margin-top: .75rem; flex: 1; font-size: .875rem; line-height: 1.6; color: var(--muted-foreground); }
.product-card__cta { margin-top: 1.5rem; display: inline-flex; align-items: center; gap: .5rem; font-size: .875rem; font-weight: 600; color: var(--brand); }
.product-card:hover .product-card__cta .arrow-link__arrow { transform: translateX(4px); }

/* ==========================================================================
   Applications / list grids
   ========================================================================== */
.app-grid { margin-top: 3rem; display: grid; grid-template-columns: 1fr; gap: 1px; overflow: hidden; border-radius: 12px; border: 1px solid var(--border); background: var(--border); }
@media (min-width: 640px) { .app-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1024px) { .app-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.app-card { background: var(--background); padding: 1.75rem; transition: background-color .3s; }
.app-card:hover { background: var(--neutral-soft); }
.app-card__row { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.app-card__title { min-width: 0; font-size: 1rem; font-weight: 600; }
.app-card__arrow { flex-shrink: 0; color: var(--brand); transition: transform .3s; }
.app-card:hover .app-card__arrow { transform: translateX(4px); }
.app-card__note { margin-top: .75rem; font-size: .875rem; line-height: 1.6; color: var(--muted-foreground); }

/* ==========================================================================
   Why Krishgen accordion
   ========================================================================== */
.why-grid { position: relative; display: grid; gap: 3.5rem; padding-block: 5rem; }
@media (min-width: 1024px) { .why-grid { grid-template-columns: .9fr 1.1fr; padding-block: 7rem; } }
.why-list { border-top: 1px solid color-mix(in oklab, var(--ink-foreground) 10%, transparent); border-bottom: 1px solid color-mix(in oklab, var(--ink-foreground) 10%, transparent); }
.why-item + .why-item { border-top: 1px solid color-mix(in oklab, var(--ink-foreground) 10%, transparent); }
.why-item__toggle { display: flex; width: 100%; align-items: center; gap: 1.25rem; padding-block: 1.25rem; text-align: left; }
.why-item__num { flex-shrink: 0; font-size: .75rem; font-weight: 700; color: color-mix(in oklab, var(--ink-foreground) 35%, transparent); transition: color .3s; }
.why-item.is-active .why-item__num { color: var(--brand); }
.why-item__body { min-width: 0; flex: 1; }
.why-item__title { display: block; font-size: 1.125rem; font-weight: 600; color: color-mix(in oklab, var(--ink-foreground) 60%, transparent); transition: color .3s; }
.why-item.is-active .why-item__title { color: var(--ink-foreground); }
.why-item__panel { overflow: hidden; max-height: 0; transition: max-height .5s, opacity .5s; opacity: 0; }
.why-item.is-active .why-item__panel { max-height: 8rem; opacity: 1; }
.why-item__note { margin-top: .5rem; font-size: .875rem; color: color-mix(in oklab, var(--ink-foreground) 60%, transparent); }
.why-item__arrow { flex-shrink: 0; color: var(--brand); opacity: .4; transition: transform .3s, opacity .3s; }
.why-item.is-active .why-item__arrow { opacity: 1; transform: translateX(4px); }

/* ==========================================================================
   Logo tiles (partners / customers)
   ========================================================================== */
.logo-grid { margin-top: 3rem; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .75rem; }
@media (min-width: 640px) { .logo-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (min-width: 1024px) { .logo-grid--6 { grid-template-columns: repeat(6, minmax(0,1fr)); } }
@media (min-width: 1024px) { .logo-grid--7 { grid-template-columns: repeat(7, minmax(0,1fr)); } }
.logo-tile { display: grid; height: 6rem; place-items: center; border-radius: 8px; border: 1px solid var(--border); background: var(--background); padding: 1rem; transition: transform .4s, border-color .4s, box-shadow .4s; }
.logo-tile:hover { transform: translateY(-4px); border-color: color-mix(in oklab, var(--brand) 40%, transparent); box-shadow: 0 14px 30px -22px var(--shadow-color); }
.logo-tile--dark { border-color: color-mix(in oklab, var(--ink-foreground) 10%, transparent); }
.logo-tile img { max-height: 3rem; width: auto; max-width: 100%; object-fit: contain; opacity: .7; filter: grayscale(1); transition: opacity .5s, filter .5s; }
.logo-tile:hover img { opacity: 1; filter: grayscale(0); }
.show-more-wrap { margin-top: 2rem; display: flex; justify-content: center; }

/* ==========================================================================
   Quality / certifications
   ========================================================================== */
.cert-grid { margin-top: 3rem; display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 640px) { .cert-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1024px) { .cert-grid { grid-template-columns: repeat(5, minmax(0,1fr)); } }
.cert-card { height: 100%; border-radius: 10px; border: 1px solid var(--border); background: var(--background); padding: 1.5rem; transition: transform .5s, border-color .5s; }
.cert-card:hover { transform: translateY(-4px); border-color: color-mix(in oklab, var(--brand) 40%, transparent); }
.cert-card__icon { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 8px; background: var(--brand-tint); color: var(--brand); font-weight: 700; }
.cert-card__code { margin-top: 1.25rem; font-size: 1.125rem; font-weight: 700; }
.cert-card__label { margin-top: .5rem; font-size: .875rem; line-height: 1.6; color: var(--muted-foreground); }

/* ==========================================================================
   Resources
   ========================================================================== */
.resource-grid { margin-top: 3rem; display: grid; grid-template-columns: 1fr; gap: 1px; overflow: hidden; border-radius: 12px; border: 1px solid var(--border); background: var(--border); }
@media (min-width: 640px) { .resource-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1024px) { .resource-grid { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.resource-card { display: flex; height: 100%; flex-direction: column; background: var(--background); padding: 1.75rem; transition: background-color .3s; }
.resource-card:hover { background: var(--brand-tint); }
.resource-card__num { font-size: .7rem; font-weight: 700; letter-spacing: .18em; color: var(--brand); }
.resource-card__title { margin-top: 1rem; font-size: 1rem; font-weight: 600; }
.resource-card__note { margin-top: .5rem; flex: 1; font-size: .875rem; line-height: 1.6; color: var(--muted-foreground); }
.resource-card__arrow { margin-top: 1.5rem; color: var(--brand); transition: transform .3s; }
.resource-card:hover .resource-card__arrow { transform: translateX(4px); }

/* ==========================================================================
   Events
   ========================================================================== */
.event-grid { margin-top: 3rem; display: grid; gap: 1.5rem; }
@media (min-width: 1024px) { .event-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.event-card { display: flex; height: 100%; flex-direction: column; overflow: hidden; border-radius: 10px; border: 1px solid var(--border); background: var(--background); transition: transform .5s, box-shadow .5s; }
.event-card:hover { transform: translateY(-6px); box-shadow: 0 20px 45px -30px var(--shadow-color); }
.event-card__media { aspect-ratio: 16/10; overflow: hidden; background: var(--neutral-soft); }
.event-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s; }
.event-card:hover .event-card__media img { transform: scale(1.03); }
.event-card__body { display: flex; flex: 1; flex-direction: column; padding: 1.5rem; }
.event-card__title { margin-top: .75rem; font-size: 1.125rem; font-weight: 600; }
.event-card__loc { margin-top: .5rem; flex: 1; font-size: .875rem; color: var(--muted-foreground); }
.event-card__cta { margin-top: 1.5rem; display: inline-flex; align-items: center; gap: .5rem; font-size: .875rem; font-weight: 600; color: var(--foreground); transition: color .3s; }
.event-card:hover .event-card__cta { color: var(--brand); }
.event-card--placeholder { display: flex; height: 100%; flex-direction: column; justify-content: center; border-radius: 10px; border: 1px dashed var(--border); background: var(--neutral-soft); padding: 1.5rem; text-align: center; }
.event-card--placeholder p:first-child { font-size: .875rem; font-weight: 600; }
.event-card--placeholder p:last-child { margin-top: .5rem; font-size: .875rem; color: var(--muted-foreground); }

/* Events & Conferences index page */
.events-year-group + .events-year-group { margin-top: 3rem; }
.events-year-heading {
  display: inline-flex; align-items: center; gap: .625rem;
  font-size: .8125rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--brand); margin-bottom: 1.5rem;
}
.events-year-heading::after { content: ""; flex: 1; height: 1px; background: var(--border); min-width: 2rem; }

/* Trade Show cards without a confidently-matched real photo (see
   inc/events-content.php) fall back to a plain icon tile instead of a
   missing/broken image, so every card in the grid keeps the same shape. */
.event-card__media--fallback {
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, var(--neutral-soft), var(--background) 70%);
  color: color-mix(in oklab, var(--ink-foreground) 30%, transparent);
}
.event-card__media--fallback svg { width: 2.5rem; height: 2.5rem; }
.event-card__title-link { color: inherit; text-decoration: none; }

/* Road Shows / Between Experiments -- simple chronological rows, no
   photos on the live page for these, unlike Trade Shows. */
.event-rows { display: flex; flex-direction: column; gap: 1px; border-radius: 12px; border: 1px solid var(--border); background: var(--border); overflow: hidden; }
.event-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; background: var(--background); padding: .9rem 1.25rem; }
.event-row__institute { font-size: .875rem; font-weight: 700; color: var(--ink-foreground); }
.event-row__date { font-size: .8125rem; color: var(--brand); font-weight: 600; }
.event-row__loc { margin-left: auto; font-size: .8125rem; color: var(--muted-foreground); }

/* Event detail page hero meta row */
.event-hero__meta { margin-top: 1.25rem; display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; }
.event-hero__meta-item {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .875rem; font-weight: 600; color: color-mix(in oklab, var(--ink-foreground) 78%, transparent);
}
.event-hero__meta-item svg { width: 16px; height: 16px; flex: none; color: var(--brand); }
.event-hero__meta-item--booth { color: var(--brand); }

/* ==========================================================================
   Promotions
   ========================================================================== */
.promo-grid { margin-top: 3rem; display: grid; gap: 1.25rem; }
@media (min-width: 1024px) { .promo-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.promo-card { position: relative; display: flex; height: 100%; flex-direction: column; overflow: hidden; border-radius: 10px; border: 1px solid var(--border); background: var(--background); padding: 1.75rem; transition: transform .5s, border-color .5s; }
.promo-card:hover { transform: translateY(-6px); border-color: color-mix(in oklab, var(--brand) 50%, transparent); }
.promo-card__bar { position: absolute; inset-block: 0; left: 0; width: 3px; background: var(--brand); transform: scaleY(0); transform-origin: top; transition: transform .5s; }
.promo-card:hover .promo-card__bar { transform: scaleY(1); }
.promo-card__badge { display: inline-flex; width: fit-content; border-radius: 6px; background: var(--brand); padding: .25rem .625rem; font-size: .65rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--brand-foreground); }
.promo-card__title { margin-top: 1.25rem; font-size: 1.125rem; font-weight: 600; }
.promo-card__desc { margin-top: .5rem; flex: 1; font-size: .875rem; color: var(--muted-foreground); }
.promo-card__cta { margin-top: 1.5rem; display: inline-flex; align-items: center; gap: .5rem; font-size: .875rem; font-weight: 600; color: var(--brand); }

/* Promotions index page -- same .promo-card as the homepage teaser, plus a
   media variant that shows the promotion's real banner image on top (the
   homepage teaser stays text-only/compact; the dedicated index page has
   room to be richer). */
.promo-grid--index { margin-top: 0; }
.promo-card--media { padding: 0; }
.promo-card--media .promo-card__media {
  position: relative; aspect-ratio: 16/10; overflow: hidden; background: var(--neutral-soft);
}
.promo-card--media .promo-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.promo-card--media:hover .promo-card__media img { transform: scale(1.04); }
.promo-card--media .promo-card__badge,
.promo-card--media .promo-card__title,
.promo-card--media .promo-card__desc,
.promo-card--media .promo-card__cta { margin-left: 1.75rem; margin-right: 1.75rem; }
.promo-card--media .promo-card__badge { margin-top: 1.5rem; }
.promo-card--media .promo-card__cta { margin-bottom: 1.75rem; }
.promo-card--media .promo-card__bar { z-index: 1; }

/* Promotion detail page */
.promo-hero__validity {
  margin-top: 1rem; display: inline-flex; align-items: center; gap: .5rem;
  font-size: .8125rem; font-weight: 700; color: var(--brand);
  background: var(--brand-tint); padding: .4rem .75rem; border-radius: 999px;
}
.promo-hero__validity svg { width: 15px; height: 15px; flex: none; }
.promo-footer-grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; }
@media (min-width: 768px) { .promo-footer-grid { grid-template-columns: 1.4fr 1fr; } }
.promo-footer__title { font-size: 1.0625rem; font-weight: 700; color: var(--ink-foreground); margin-bottom: .75rem; }

/* Promotion hero visual — "campaign poster": the real promo banner is
   already a finished piece of marketing art (its own bold typography and
   pricing baked in), so it's shown as an elevated, slightly tilted flyer
   with a diagonal "limited time" corner ribbon — not caged in the
   hex-lattice tech frame used for Product Category / Partner Profile
   photos and logos. A promotion is a campaign artifact, not a product
   shot, and reads that way here on purpose. */
.promo-poster { position: relative; max-width: 26rem; margin-inline: auto; }
.promo-poster__frame {
  position: relative; transform: rotate(-2.5deg); transition: transform .45s cubic-bezier(.2,.8,.2,1);
  border-radius: 14px; overflow: hidden; border: 1px solid var(--border);
  box-shadow: 0 32px 56px -26px var(--shadow-color);
  background: var(--background);
}
.promo-poster:hover .promo-poster__frame { transform: rotate(0deg) scale(1.015); }
.promo-poster__frame img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.promo-poster__ribbon {
  position: absolute; top: 20px; right: -38px; z-index: 2;
  width: 165px; padding: .4rem 0; text-align: center;
  background: var(--brand); color: var(--brand-foreground);
  font-size: .625rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  transform: rotate(45deg);
  box-shadow: 0 6px 14px -4px rgba(0,0,0,.4);
}

/* Event hero visual — "event pass": the real conference banner sits above
   a boarding-pass-style stub carrying date / venue / booth, with a dashed
   tear line between them — a distinct "here's your pass" read, instead of
   the same tech-frame used elsewhere. Not tilted like the promo poster
   (events read as official/structured, not a marketing flyer). */
.event-pass { position: relative; max-width: 26rem; margin-inline: auto; }
.event-pass__banner {
  position: relative; border-radius: 14px 14px 0 0; overflow: hidden;
  border: 1px solid var(--border); border-bottom: none;
}
.event-pass__banner img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.event-pass__stub {
  position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem;
  background: var(--brand); color: var(--brand-foreground);
  border-radius: 0 0 14px 14px;
  padding: 1rem 1.25rem;
  box-shadow: 0 32px 56px -26px var(--shadow-color);
}
.event-pass__stub::before {
  content: ""; position: absolute; top: 0; left: 1.1rem; right: 1.1rem; z-index: 2;
  border-top: 2px dashed color-mix(in oklab, var(--brand-foreground) 45%, transparent);
}
.event-pass__stub::after {
  content: ""; position: absolute; top: -8px; left: -8px; right: -8px; height: 16px; z-index: 0;
  background:
    radial-gradient(circle at 8px 8px, transparent 8px, var(--brand) 8.5px) top left / 24px 16px repeat-x;
}
.event-pass__date { font-size: .8125rem; font-weight: 800; }
.event-pass__venue { font-size: .8125rem; font-weight: 600; opacity: .92; }
.event-pass__booth { margin-left: auto; font-size: .6875rem; font-weight: 800; letter-spacing: .03em; background: var(--brand-foreground); color: var(--brand); border-radius: 999px; padding: .3rem .7rem; }

/* ==========================================================================
   About
   ========================================================================== */
.about-grid { display: grid; align-items: center; gap: 3.5rem; padding-block: 5rem; }
@media (min-width: 1024px) { .about-grid { grid-template-columns: repeat(2, minmax(0,1fr)); padding-block: 7rem; } }
.about-grid__copy { order: 2; }
.about-grid__media { order: 1; }
@media (min-width: 1024px) { .about-grid__copy { order: 1; } .about-grid__media { order: 2; } }
.about-facts { margin-top: 2.5rem; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1.5rem; }
.about-fact { border-left: 2px solid var(--brand); padding-left: 1rem; }
.about-fact__value { font-size: 1.125rem; font-weight: 700; }
.about-fact__label { margin-top: .25rem; font-size: .875rem; color: var(--muted-foreground); }
.about-grid__media img { overflow: hidden; border-radius: 12px; border: 1px solid var(--border); max-height: 32rem; width: 100%; object-fit: cover; }

/* ==========================================================================
   Product Category page (template-product-category.php)
   ========================================================================== */

/* Breadcrumb */
.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: .8125rem; }
.breadcrumb a { color: color-mix(in oklab, var(--ink-foreground) 65%, transparent); transition: color .3s; }
.breadcrumb a:hover { color: var(--brand); }
.breadcrumb__sep { color: color-mix(in oklab, var(--ink-foreground) 30%, transparent); }
.breadcrumb__current { color: color-mix(in oklab, var(--ink-foreground) 85%, transparent); font-weight: 600; }

/* Page hero — same full-bleed photographic identity band as the homepage
   hero (real image + dark scrim + grid-line overlay), just without the
   stats panel, so a category page reads as one visual family with the
   homepage instead of a flatter, image-less banner. */
.page-hero { position: relative; overflow: hidden; background: var(--ink); padding-block: 3.5rem 4rem; }
@media (min-width: 1024px) { .page-hero { padding-block: 4.5rem 5rem; } }
.page-hero__inner { position: relative; z-index: 1; }

/* Extra ambient depth behind the split product-category hero only
   (scoped via :has() so every other template's .page-hero — About,
   Contact, Partner, Solution, Events, Promotions — is untouched). Two
   soft blurred brand-tint blobs sit under the grid-line overlay; purely
   decorative, z-index:0, no impact on layout or content. */
.page-hero:has(.pc-hero-grid--split)::before,
.page-hero:has(.pc-hero-grid--split)::after {
  content: ""; position: absolute; z-index: 0; border-radius: 50%; pointer-events: none;
  filter: blur(42px);
}
.page-hero:has(.pc-hero-grid--split)::before {
  width: 28rem; height: 28rem; top: -12rem; left: -9rem;
  background: radial-gradient(circle, color-mix(in oklab, var(--brand) 16%, transparent), transparent 70%);
}
.page-hero:has(.pc-hero-grid--split)::after {
  width: 20rem; height: 20rem; bottom: -9rem; right: 8%;
  background: radial-gradient(circle, color-mix(in oklab, var(--globe-gold, var(--brand)) 20%, transparent), transparent 70%);
}

/* Text-left, photo-right — the same two-column rhythm as the spotlight
   sections below, rather than a full-bleed image behind a scrim: a real
   product/lab photo shown at full clarity in its own card reads far better
   here than one washed out under an overlay, and keeps every page anchored
   to a real image instead of feeling unfinished when there's a hero photo
   to show. Pages without a hero image yet (page-hero__grid--no-media) just
   keep the text column at reading width. */
.page-hero__grid { margin-top: 1.75rem; display: grid; grid-template-columns: 1fr; align-items: center; gap: 2.5rem; }
@media (min-width: 1024px) { .page-hero__grid { grid-template-columns: minmax(0,1fr) minmax(0,26rem); gap: 3.5rem; } }
.page-hero__grid--no-media .page-hero__body { max-width: 46rem; }
.page-hero__body { max-width: 46rem; }
.page-hero__title { margin-top: 1rem; font-size: 2rem; font-weight: 700; color: var(--ink-foreground); }
@media (min-width: 640px) { .page-hero__title { font-size: 2.5rem; } }
@media (min-width: 1024px) { .page-hero__title { font-size: 2.75rem; line-height: 1.1; } }
.page-hero__intro { margin-top: 1.25rem; font-size: 1.0625rem; line-height: 1.7; color: color-mix(in oklab, var(--ink-foreground) 75%, transparent); }
.page-hero__intro p + p { margin-top: 1rem; }
.page-hero__intro .kg-richtext__list { margin-top: 1rem; }
.page-hero__actions { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: .75rem; }
.page-hero__visual { position: relative; }
.page-hero__visual img {
  position: relative; z-index: 1; width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: 16px; border: 1px solid var(--border); box-shadow: 0 32px 56px -32px var(--shadow-color);
}

/* Decorative hex-lattice accent (see template-product-category.php for the
   markup) — a loose molecular/honeycomb motif in the negative space at two
   corners of the hero photo, on-brand for a biosciences company, in place
   of a plain offset border box. Purely decorative (aria-hidden), inline SVG
   so it costs nothing extra to load. */
.page-hero__ornament { position: absolute; z-index: 0; width: 8rem; height: 8rem; color: var(--brand); pointer-events: none; }
.page-hero__ornament--tr { top: -2.5rem; right: -2.25rem; }
.page-hero__ornament--bl { bottom: -2.25rem; left: -2rem; width: 6rem; height: 6rem; transform: rotate(180deg); opacity: .8; }
.page-hero__ornament-svg { width: 100%; height: 100%; overflow: visible; }
.orn-hex { fill: none; stroke: currentColor; stroke-width: 1; }
.orn-hex--a { opacity: .22; }
.orn-hex--b { opacity: .14; }
.orn-hex--c { opacity: .3; }
.orn-line { stroke: currentColor; stroke-width: 1; opacity: .25; }
.orn-node { fill: currentColor; }
.orn-node--twinkle {
  transform-box: fill-box; transform-origin: center;
  animation: kg-twinkle 2.6s ease-in-out infinite;
}
/* Three twinkle circles per ornament (the 1st, 3rd and 5th <circle> in
   source order) — stagger each so they don't all pulse in lockstep. */
.page-hero__ornament .orn-node--twinkle:nth-of-type(3) { animation-delay: .7s; }
.page-hero__ornament .orn-node--twinkle:nth-of-type(5) { animation-delay: 1.5s; }
@keyframes kg-twinkle {
  0%, 100% { opacity: .3; transform: scale(.8); }
  50% { opacity: 1; transform: scale(1.2); }
}

/* Living hero aura — continuous scan-pulse rings + slow-orbiting particles
   around the photo card (see template-product-category.php for the
   markup and the reasoning). Pure CSS, no images/video/JS; runs from page
   load rather than on scroll, layered behind the photo (z-index 0, same
   plane as the hex ornaments above) so it reads as one animated frame
   rather than three separate effects competing for attention. */
.page-hero__aura { position: absolute; inset: -14% -10%; z-index: 0; pointer-events: none; }
.aura-ring {
  position: absolute; inset: 0; border-radius: 26px;
  border: 1.5px solid color-mix(in oklab, var(--brand) 60%, transparent);
  opacity: 0;
  animation: kg-scan-pulse 4.8s cubic-bezier(.25,.65,.35,1) infinite;
}
.aura-ring--b { animation-delay: 1.6s; }
.aura-ring--c { animation-delay: 3.2s; }
@keyframes kg-scan-pulse {
  0%   { transform: scale(.92); opacity: 0; }
  14%  { opacity: .5; }
  100% { transform: scale(1.08); opacity: 0; }
}
/* Three concentric orbit rings, each carrying one particle at its edge —
   different sizes/speeds/directions so they never feel mechanical or
   synchronized. The ellipse each dot travels naturally follows the photo
   card's own 4:3 shape, which reads as intentional rather than a perfect
   circle would against a rectangular card. */
.aura-orbit {
  position: absolute; top: 50%; left: 50%; border-radius: 50%;
  animation: kg-orbit-spin linear infinite;
}
.aura-orbit--1 { width: 112%; height: 112%; margin: -56% 0 0 -56%; animation-duration: 16s; }
.aura-orbit--2 { width: 128%; height: 128%; margin: -64% 0 0 -64%; animation-duration: 24s; animation-direction: reverse; }
.aura-orbit--3 { width: 100%; height: 100%; margin: -50% 0 0 -50%; animation-duration: 12s; }
.aura-orbit__dot {
  position: absolute; top: 0; left: 50%; width: 7px; height: 7px; margin-left: -3.5px;
  border-radius: 50%; background: var(--brand);
  box-shadow: 0 0 10px color-mix(in oklab, var(--brand) 65%, transparent);
}
.aura-orbit--2 .aura-orbit__dot {
  width: 5px; height: 5px; margin-left: -2.5px;
  background: color-mix(in oklab, var(--brand) 70%, white 30%);
  box-shadow: 0 0 6px color-mix(in oklab, var(--brand) 50%, transparent);
}
.aura-orbit--3 .aura-orbit__dot { width: 4px; height: 4px; margin-left: -2px; opacity: .65; box-shadow: none; }
@keyframes kg-orbit-spin { to { transform: rotate(360deg); } }

/* "Jump to a section" chip row — appears once a page has enough sections
   that a reader could use a map; scroll-margin on each section (below)
   keeps the sticky header from covering the target on click. */
.page-hero__jump { margin-top: 2.25rem; display: flex; flex-wrap: wrap; gap: .625rem; max-width: 44rem; }
.page-hero__jump-link {
  position: relative;
  display: inline-flex; align-items: center;
  border-radius: 999px; border: 1px solid color-mix(in oklab, var(--ink-foreground) 18%, transparent);
  background: color-mix(in oklab, var(--ink-foreground) 6%, transparent);
  padding: .4rem .9rem; font-size: .75rem; font-weight: 600;
  color: color-mix(in oklab, var(--ink-foreground) 80%, transparent);
  transition: border-color .3s, background-color .3s, color .3s, transform .3s;
}
.page-hero__jump-link:hover,
.page-hero__jump-link:focus-visible {
  border-color: color-mix(in oklab, var(--brand) 55%, transparent);
  background: color-mix(in oklab, var(--brand) 16%, transparent);
  color: var(--ink-foreground);
  transform: translateY(-2px);
}

.page-hero__logos { margin-top: 2.75rem; }
.page-hero__logos-label { font-size: .6875rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: color-mix(in oklab, var(--ink-foreground) 50%, transparent); }

/* Rich text used inside body copy fields (paragraphs + bullet lists). */
.kg-richtext p + p,
.kg-richtext p + ul,
.kg-richtext ul + p { margin-top: 1rem; }
.kg-richtext__list li { position: relative; padding-left: 1.25rem; font-size: .9375rem; line-height: 1.65; }
.kg-richtext__list li + li { margin-top: .5rem; }
.kg-richtext__list li::before { content: ""; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; border-radius: 999px; background: var(--brand); }

/* Anchor target for the jump-nav chips above — scroll-margin-top clears the
   sticky header so the section title doesn't land underneath it. */
section[id^="pc-section-"],
section[id^="sol-"] { scroll-margin-top: 9rem; }

/* ==========================================================================
   Partner logos band + sticky quick-nav
   ==========================================================================
   Shared by template-product-category.php and template-solution.php (see
   kg_render_partner_band() / kg_render_quick_nav() in
   inc/content-defaults.php). Built for direct manager feedback on both
   page families: (1) conversion should be reachable without much
   scrolling, (2) real supplier/principal logos need to sit right under
   the hero instead of buried below the section nav, (3) the section
   links need to read as unambiguous navigation, not inert tags. */

.partner-band {
  padding: 2.25rem 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--background);
}
.partner-band__inner {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 2.5rem;
}
.partner-band__label {
  flex: 0 0 auto; font-size: .6875rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: color-mix(in oklab, var(--ink-foreground) 55%, transparent);
}
/* Logos now stretch to fill the remaining width of the bar (space-between)
   instead of clustering to the left with a large empty gap on the right —
   direct fix for the "logo bar too small / doesn't cover full width"
   feedback. Falls back to left-aligned wrapping on narrow screens, where
   space-between with only a couple of wrapped logos would look broken. */
.partner-band__logos {
  flex: 1 1 16rem; display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 1.5rem 3rem;
}
.partner-band__logo {
  display: inline-flex; align-items: center; height: 3.5rem;
  transition: transform .3s;
}
.partner-band__logo img { height: 100%; width: auto; max-width: 14rem; object-fit: contain; }
a.partner-band__logo:hover, a.partner-band__logo:focus-visible {
  transform: translateY(-2px);
}
@media (max-width: 640px) {
  .partner-band__logos { justify-content: flex-start; }
  .partner-band__logo { height: 2.5rem; }
  .partner-band__logo img { max-width: 10rem; }
}

/* Sticky quick-nav — underlined tabs, never pill-badges, so they read as
   navigation on sight; a persistent conversion button rides along so it
   never requires scrolling back to the hero. Two top offsets because the
   utility bar (real phone/quote line above the main nav) only shows at
   the same breakpoint the header itself grows a row. */
.quick-nav {
  position: sticky; top: 4rem; z-index: 30;
  background: color-mix(in oklab, var(--background) 97%, transparent);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(8px);
}
@media (min-width: 1024px) { .quick-nav { top: 7.25rem; } }
.quick-nav__row { display: flex; align-items: center; gap: 1rem; height: 3.5rem; }
.quick-nav__links {
  flex: 1 1 auto; min-width: 0; height: 100%;
  display: flex; align-items: center; overflow-x: auto;
  scrollbar-width: none; -ms-overflow-style: none;
}
.quick-nav__links::-webkit-scrollbar { display: none; }
.quick-nav__link {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: .4rem;
  height: 100%; margin-right: 1.75rem; padding: 0 .05rem;
  font-size: .8125rem; font-weight: 600; white-space: nowrap;
  color: color-mix(in oklab, var(--ink-foreground) 62%, transparent);
  border-bottom: 2px solid transparent; transition: color .25s, border-color .25s;
}
.quick-nav__link:last-child { margin-right: 0; }
.quick-nav__link-chevron { font-size: .625rem; opacity: .55; transition: transform .25s; }
.quick-nav__link:hover, .quick-nav__link:focus-visible {
  color: var(--ink-foreground);
}
.quick-nav__link:hover .quick-nav__link-chevron { transform: translateY(1px); }
.quick-nav__link.is-active { color: var(--brand); border-bottom-color: var(--brand); }
.quick-nav__cta { flex: 0 0 auto; padding: .5rem 1.1rem; font-size: .8125rem; white-space: nowrap; }

/* ==========================================================================
   Product-category hero: text + "Featured Innovation" card on the left,
   the REAL quote form + support card live in a sticky right-hand column
   inside the hero itself (no separate scroll-to section below) — matches
   the emergent.sh reference the person supplied, where the form is visible
   beside the story instead of buried under a fold. Static numbered "Jump
   to a Section" pills, "At a Glance" overview cards, per-section quote
   triggers and the shared quote modal (for those per-section triggers)
   are unchanged. Every piece of copy/data rendered is this theme's own
   real content (see template-product-category.php and
   kg_render_quote_form() / kg_render_quote_modal() / kg_render_jump_nav()
   / kg_render_support_card() in inc/content-defaults.php). */

/* Text column left, sticky quote-form column right — a modifier on the
   shared .page-hero__grid rather than touching that shared rule, so every
   other template using it (About, Contact, Partner, Solution, Events,
   Promotions…) is unaffected. align-items:start (not center) is deliberate
   here: the right column is sticky and needs to hug the top of the row.
   26rem (not the old 23rem) — matches the same aside width already used
   by the non-split .page-hero__grid elsewhere, and gives the quote form
   enough elbow room to lay short fields out two-up instead of one long
   stacked column (see the .quote-card__form container query below). */
@media (min-width: 1024px) {
  .page-hero__grid.pc-hero-grid--split { grid-template-columns: minmax(0,1fr) minmax(0,26rem); gap: 3rem; align-items: start; }
}

/* Tighter outer top/bottom padding for this template's richer, taller
   2-column hero — the person's real feedback was that too much of the
   viewport was spent on breathing room before any real content, on a
   hero that already has more content than most. A modifier so every
   other .page-hero-using template (About, Contact, Partner, Solution,
   Events, Promotions…) keeps its own spacing untouched. */
.page-hero.pc-hero--tight { padding-block: 2rem 2.5rem; }
@media (min-width: 768px) {
  .page-hero.pc-hero--tight { padding-block: 2.25rem 2.75rem; }
}

@media (min-width: 1024px) {
  /* The left column no longer inherits the shared 46rem reading-width cap:
     with a 26rem form column now taking real space on the right, capping
     the left column too made it end early and leave a slab of empty
     background beside the (much taller) form — exactly the "lots of space
     left on the left" feedback. Individual text elements below keep their
     own comfortable reading widths instead; wider elements (badges,
     contact row, the feature card) are free to use the full column. */
  .pc-hero-grid--split .page-hero__body { max-width: none; }
  .pc-hero-grid--split .page-hero__title { max-width: 36rem; }
  .pc-hero-grid--split .page-hero__intro { max-width: 40rem; }
}

.page-hero__tagline {
  margin-top: .75rem; font-size: 1.0625rem; font-weight: 700;
  color: var(--brand);
  max-width: 34rem;
}

.pc-hero__secondary-contact {
  margin-top: 1rem; font-size: .8125rem; text-align: center;
  color: var(--muted-foreground);
}
.pc-hero__secondary-contact a { font-weight: 700; color: var(--brand); }
.pc-hero__secondary-contact a:hover { text-decoration: underline; }

/* Light icon + text contact row (phone / email) under the trust badges —
   replaces the old outline-button + plain-link pair, since the primary
   conversion action is now the visible quote form beside it, not a "Call"
   button competing with it. Icon now sits inside a ring that lights up on
   hover instead of a flat static dot, so the row reads as interactive. */
.page-hero__contact-row { margin-top: 1.5rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem; }
.page-hero__contact-link {
  display: inline-flex; align-items: center; gap: .6rem;
  font-size: .875rem; font-weight: 600; color: var(--ink-foreground);
  transition: color .3s;
}
.page-hero__contact-link:hover { color: var(--brand); }
.page-hero__contact-link:hover .page-hero__contact-icon {
  background: var(--brand); color: var(--brand-foreground);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--brand) 16%, transparent);
}
.page-hero__contact-icon {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 2rem; height: 2rem; border-radius: 999px;
  background: color-mix(in oklab, var(--brand) 10%, transparent); color: var(--brand);
  transition: background-color .3s, color .3s, box-shadow .3s;
}

/* Quote card — bare content by default (icon/eyebrow/title/subtitle/form);
   the hero aside instance gets full card chrome here, the modal instance
   gets its chrome from .quote-modal__panel instead so it isn't doubled
   up. Small icon badge + two-tone top accent bar added for a bit more
   presence — the card is the primary conversion point on the page, it
   should look like it. */
.quote-card__head { display: flex; align-items: flex-start; gap: .9rem; }
.quote-card__icon {
  flex-shrink: 0; display: grid; place-items: center;
  width: 2.75rem; height: 2.75rem; border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--brand), color-mix(in oklab, var(--brand) 65%, black 20%));
  color: var(--brand-foreground);
  box-shadow: 0 12px 22px -10px color-mix(in oklab, var(--brand) 65%, transparent);
}
.quote-card__icon svg { width: 1.3rem; height: 1.3rem; }
.quote-card__eyebrow { font-size: .6875rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--brand); }
.quote-card__title { margin-top: .3rem; font-size: 1.3125rem; font-weight: 700; color: var(--ink-foreground); line-height: 1.25; }
.quote-card__subtitle { margin-top: .6rem; font-size: .8438rem; line-height: 1.55; color: var(--muted-foreground); }
.quote-card__form { margin-top: 1.1rem; }
.quote-card__fallback { display: flex; flex-direction: column; gap: .75rem; align-items: flex-start; }
.quote-card__fallback p { font-size: .875rem; color: var(--muted-foreground); }

/* Once the card is wide enough to comfortably hold two short fields side
   by side (name/email/phone/etc.), lay the real Fluent Forms fields out
   two-up instead of one long single-file column — this is what actually
   fixes the "form is too long and narrow" feedback: same real fields,
   roughly half the scroll length, and it no longer feels squeezed.

   Real bug found here, in two rounds:
   1. Fluent Forms' shortcode output nests each real .ff-el-group inside
      a real ".fluentform" wrapper div, inside a real
      "form.frm-fluent-form" (both confirmed against the plugin's own
      public CSS). display:flex/grid only turns DIRECT children into
      flex/grid items, so setting it on .quote-card__form did nothing —
      the .fluentform wrapper was the only thing that became a flex
      item, and it rendered at its normal full-width block size, one
      field per row, same as before.
   2. Once that was fixed, fields STILL stacked full-width, because
      Fluent Forms also wraps each field's row in its own real
      ".ff-t-container" > ".ff-t-cell" pair (confirmed in the plugin's
      public CSS: ".ff-t-container{display:table}" at desktop widths) —
      this is Fluent Forms' own internal row/column system, present
      even on a plain single-column form, and it was the actual reason
      two fields never sat side by side: each field was still the only
      cell in its own table row, one level below where the first round
      of fixes reached.
   display:contents on every one of these wrapper levels removes their
   own boxes from layout (the elements keep working normally — this
   doesn't touch form submission) so .ff-el-group becomes an effective
   direct child of .quote-card__form, and can finally have a layout of
   its own. !important guards against Fluent Forms' own more specific
   ".frm-fluent-form .ff-t-container" table-display rule winning back.

   Third real bug found once the above two were fixed: a
   ":last-child" full-width exception (meant to always let the final
   field span the row) checks the actual DOM tree, not the flattened
   visual layout — and because each field sits alone inside its own
   .ff-t-cell, EVERY field is "the last child" of its own immediate
   wrapper, so that one rule was silently forcing every single field
   full-width again. Removed it entirely; the textarea/select/button/
   submit :has() checks below are sufficient on their own to catch the
   fields that should span the full row. */
.quote-card__form.kg-contact-form .fluentform,
.quote-card__form.kg-contact-form .frm-fluent-form,
.quote-card__form.kg-contact-form .ff-t-container,
.quote-card__form.kg-contact-form .ff-t-cell,
.quote-card__form.kg-contact-form .ff-step-body,
.quote-card__form.kg-contact-form .ff-form-wrap { display: contents !important; }

.quote-card__form.kg-contact-form { display: grid !important; grid-template-columns: 1fr !important; gap: 0 1rem; }
@media (min-width: 420px) {
  .quote-card__form.kg-contact-form { grid-template-columns: 1fr 1fr !important; }
}
.quote-card__form.kg-contact-form .ff-el-group { grid-column: span 1; }
.quote-card__form.kg-contact-form .ff-el-group:has(textarea),
.quote-card__form.kg-contact-form .ff-el-group:has(select),
.quote-card__form.kg-contact-form .ff-el-group:has(button),
.quote-card__form.kg-contact-form .ff-el-group:has(input[type="submit"]) { grid-column: 1 / -1; }

/* Real bug found here too: this rule was correctly written, but Fluent
   Forms' own stylesheet targets the submit button with a longer,
   MORE SPECIFIC selector chain (multiple chained classes), which wins
   over a shorter selector regardless of which stylesheet loads last —
   that's why the button kept rendering in Fluent Forms' own default
   blue rather than this theme's brand red. !important is the correct,
   deliberate tool for exactly this situation: overriding a third-party
   plugin's own styling that we don't control the markup/specificity of. */
.quote-card__form.kg-contact-form .ff-btn-submit,
.quote-card__form.kg-contact-form button[type="submit"],
.quote-card__form.kg-contact-form input[type="submit"] {
  width: 100% !important; justify-content: center !important;
  padding-block: .85rem !important; font-size: .9375rem !important;
  background-color: var(--brand) !important; border-color: var(--brand) !important;
  color: var(--brand-foreground) !important; opacity: 1 !important;
}
.quote-card__form.kg-contact-form .ff-btn-submit:hover,
.quote-card__form.kg-contact-form button[type="submit"]:hover,
.quote-card__form.kg-contact-form input[type="submit"]:hover {
  background-color: color-mix(in oklab, var(--brand) 85%, black) !important;
  border-color: color-mix(in oklab, var(--brand) 85%, black) !important;
}

/* Sticky right column of the hero: real quote form on top, support card
   underneath, stacked — sticks to the top of the viewport as the hero's
   left column (which usually runs taller) scrolls past. A soft brand-tint
   glow sits behind both cards (position:relative + ::before) purely for
   depth/polish; it's decorative only, so it's set aria-hidden by staying
   out of the accessibility tree entirely (a plain background, no content). */
.page-hero__aside { position: relative; display: flex; flex-direction: column; gap: 1.25rem; }
@media (min-width: 1024px) {
  .page-hero__aside { position: sticky; top: 6rem; align-self: start; }
}
.page-hero__aside::before {
  content: ""; position: absolute; top: -3rem; right: -2.5rem; z-index: 0;
  width: 14rem; height: 14rem; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in oklab, var(--brand) 32%, transparent), transparent 72%);
  filter: blur(26px);
  pointer-events: none;
}

.page-hero__aside .quote-card {
  position: relative; z-index: 1; overflow: hidden;
  background: var(--background);
  border-radius: var(--radius-2xl);
  border: 1px solid var(--border);
  box-shadow: 0 32px 64px -36px var(--shadow-color);
  padding: 1.5rem;
  transition: box-shadow .35s, transform .35s;
}
.page-hero__aside .quote-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 4px;
  background: linear-gradient(90deg, var(--brand), color-mix(in oklab, var(--globe-gold, var(--brand)) 70%, var(--brand)));
}
@media (min-width: 640px) { .page-hero__aside .quote-card { padding: 1.75rem; } }
@media (hover: hover) {
  .page-hero__aside .quote-card:hover { box-shadow: 0 40px 76px -32px var(--shadow-color); transform: translateY(-2px); }
}

/* "Need help choosing?" support card — same card chrome as the quote
   card so the two read as a matched pair, just a lighter fill so the
   form stays visually primary. (Was reading var(--surface), a token this
   theme never defines, which silently dropped the background to
   transparent and made the card disappear into the page — using the same
   soft neutral fill as the rest of the site's "lighter surface" pattern.) */
.support-card {
  position: relative; z-index: 1; overflow: hidden;
  background: var(--neutral-soft);
  border-radius: var(--radius-2xl);
  border: 1px solid var(--border);
  padding: 1.5rem;
  display: flex; flex-direction: column; gap: .85rem;
  transition: box-shadow .35s, transform .35s;
}
.support-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 4px;
  background: linear-gradient(90deg, var(--brand), color-mix(in oklab, var(--brand) 60%, transparent));
}
@media (hover: hover) {
  .support-card:hover { box-shadow: 0 32px 60px -34px var(--shadow-color); transform: translateY(-2px); }
}
@media (min-width: 640px) { .support-card { padding: 1.75rem; } }
.support-card__title { font-size: 1.1875rem; font-weight: 700; color: var(--ink-foreground); }
.support-card__body { font-size: .875rem; line-height: 1.6; color: var(--muted-foreground); }
.support-card__points { display: flex; flex-direction: column; gap: .6rem; }
.support-card__points li { display: flex; gap: .5rem; align-items: flex-start; font-size: .8125rem; line-height: 1.5; color: var(--ink-foreground); }
.support-card__check { flex-shrink: 0; color: var(--brand); font-weight: 800; margin-top: .1rem; }
.support-card__actions { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; padding-top: .5rem; }
.support-card__email { font-size: .8125rem; font-weight: 700; color: var(--brand); }
.support-card__email:hover { text-decoration: underline; }

/* "Featured Innovation" card, now living in the hero's LEFT column below
   the contact row (not a narrow card in the right column) — real product
   photo on one side, caption/tag/one real sentence on the other, no CTA
   button of its own since the real form is already visible right beside
   it in the aside column. Media now gets a gentle hover zoom and the tag
   sits on a small pulsing dot, matching the "living" feel of the rest of
   the hero (aura rings/orbit dots used on other page heroes) without
   adding another whole animated system. */
.pc-feature-card {
  position: relative; overflow: hidden;
  margin-top: 1.5rem;
  display: grid; grid-template-columns: 1fr; gap: 1.25rem;
  background: var(--background);
  border-radius: var(--radius-2xl);
  border: 1px solid var(--border);
  box-shadow: 0 32px 64px -36px var(--shadow-color);
  padding: 1.25rem;
  transition: box-shadow .35s, border-color .35s;
}
.pc-feature-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; z-index: 2;
  background: linear-gradient(90deg, var(--brand), color-mix(in oklab, var(--brand) 60%, transparent));
}
@media (hover: hover) {
  .pc-feature-card:hover { box-shadow: 0 40px 76px -32px var(--shadow-color); border-color: color-mix(in oklab, var(--brand) 30%, var(--border)); }
}
@media (min-width: 640px) {
  .pc-feature-card { grid-template-columns: minmax(0,15rem) minmax(0,1fr); align-items: center; padding: 1.5rem; }
}
.pc-feature-card__media { position: relative; border-radius: var(--radius-xl); overflow: hidden; aspect-ratio: 4 / 3; background: var(--ink); }
.pc-feature-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.22,1,.36,1); }
.pc-feature-card:hover .pc-feature-card__media img { transform: scale(1.06); }
.pc-feature-card__body { display: flex; flex-direction: column; gap: .5rem; }
.hero-innovation-card__tag {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .625rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--brand);
}
.hero-innovation-card__tag::before {
  content: ""; width: 6px; height: 6px; border-radius: 999px; background: var(--brand);
  animation: kg-twinkle 2.6s ease-in-out infinite;
}
.pc-feature-card__title { font-size: 1.25rem; font-weight: 700; color: var(--ink-foreground); line-height: 1.3; }
.hero-innovation-card__blurb { font-size: .875rem; line-height: 1.6; color: var(--muted-foreground); }
.pc-feature-card__eyebrow { margin: 0; }
.pc-feature-card .quote-card__head { margin-bottom: .1rem; }
.pc-feature-card__cta { margin-top: .5rem; align-self: flex-start; padding: .6rem 1.2rem; font-size: .8125rem; }

/* Shared quote modal — one real instance per page, reused by every
   [data-quote-trigger] on it (see main.js). */
.quote-modal { position: fixed; inset: 0; z-index: 100; display: none; }
.quote-modal.is-open { display: block; }
.quote-modal__backdrop {
  position: absolute; inset: 0;
  background: color-mix(in oklab, var(--ink-foreground) 55%, transparent);
  backdrop-filter: blur(2px);
}
.quote-modal__panel {
  position: relative; z-index: 1; margin: 4vh auto; max-width: 32rem; width: calc(100% - 2rem);
  max-height: 92vh; overflow-y: auto;
  background: var(--background); border-radius: var(--radius-2xl);
  box-shadow: 0 40px 80px -32px var(--shadow-color);
  padding: 2rem 1.5rem;
}
@media (min-width: 640px) { .quote-modal__panel { padding: 2.25rem; } }
.quote-modal__close {
  position: absolute; top: .85rem; right: .85rem; z-index: 2;
  width: 2.25rem; height: 2.25rem; display: grid; place-items: center;
  border-radius: 999px; border: 1px solid var(--border);
  font-size: 1.25rem; line-height: 1; color: var(--muted-foreground);
  transition: color .2s, border-color .2s, background-color .2s;
}
.quote-modal__close:hover, .quote-modal__close:focus-visible { color: var(--brand); border-color: var(--brand); background: var(--brand-tint); }
body.kg-modal-open { overflow: hidden; }

/* Static "Jump to a Section" numbered pills. */
.jump-nav { padding: 2rem 0 2.25rem; background: var(--background); border-bottom: 1px solid var(--border); }
.jump-nav__list { margin-top: 1.125rem; display: flex; flex-wrap: wrap; gap: .75rem; }
.jump-nav__pill {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .65rem 1.1rem; border-radius: 999px;
  border: 1px solid var(--border); background: var(--background);
  font-size: .8125rem; font-weight: 600; color: var(--ink-foreground);
  transition: border-color .25s, box-shadow .25s, transform .25s, background-color .25s;
}
.jump-nav__pill:hover, .jump-nav__pill:focus-visible {
  border-color: var(--brand); box-shadow: 0 12px 24px -18px var(--shadow-color); transform: translateY(-1px);
}
.jump-nav__pill.is-active { border-color: var(--brand); color: var(--brand); background: var(--brand-tint); }
.jump-nav__num { font-size: .6875rem; font-weight: 800; color: var(--brand); }
.jump-nav__arrow { font-size: .75rem; color: color-mix(in oklab, var(--ink-foreground) 42%, transparent); transition: transform .25s, color .25s; }
.jump-nav__pill:hover .jump-nav__arrow { transform: translateX(3px); color: var(--brand); }

/* "At a Glance" overview cards. */
.glance-heading { margin-top: .75rem; font-size: 1.75rem; font-weight: 700; color: var(--ink-foreground); }
.glance-subtitle { margin-top: .5rem; font-size: .9375rem; color: var(--muted-foreground); max-width: 38rem; }
.glance-grid { margin-top: 2rem; display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 768px) { .glance-grid { grid-template-columns: repeat(3, 1fr); } }
.glance-card {
  display: flex; flex-direction: column; gap: .75rem;
  padding: 1.5rem; border-radius: var(--radius-xl);
  background: var(--background); border: 1px solid var(--border);
  transition: transform .3s, box-shadow .3s, border-color .3s;
}
.glance-card:hover {
  transform: translateY(-4px); box-shadow: 0 24px 48px -32px var(--shadow-color);
  border-color: color-mix(in oklab, var(--brand) 35%, var(--border));
}
.glance-card__head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.glance-card__num { font-size: .6875rem; font-weight: 800; letter-spacing: .06em; color: var(--brand); }
.glance-card__arrow { color: color-mix(in oklab, var(--ink-foreground) 40%, transparent); transition: transform .3s, color .3s; }
.glance-card:hover .glance-card__arrow { transform: translate(3px,-3px); color: var(--brand); }
.glance-card__title { font-size: 1.0625rem; font-weight: 700; line-height: 1.3; }
.glance-card__body { font-size: .8125rem; line-height: 1.6; color: var(--muted-foreground); flex: 1; }
.glance-card__cta { font-size: .8125rem; font-weight: 600; color: var(--brand); }

/* Per-section "Get a Quote for X" trigger. */
.section-quote-cta { margin-top: 2rem; }

/* Spotlight sections — alternating text/media rows, one per supplier or
   sub-topic; same two-column rhythm as the homepage About section, reused
   here because it already reads as "one focused, credible story" per row. */
.spotlight { padding-block: 3.5rem; }
.spotlight:not(:last-child) { border-bottom: 1px solid var(--border); }
.spotlight-grid { display: grid; align-items: center; gap: 2.5rem; }
.spotlight-grid--media { grid-template-columns: 1fr; }
@media (min-width: 1024px) { .spotlight-grid--media { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 3.5rem; } }
.spotlight-grid--reverse .spotlight__media { order: 1; }
.spotlight-grid--reverse .spotlight__body { order: 2; }
@media (min-width: 1024px) { .spotlight-grid--reverse .spotlight__media { order: 2; } .spotlight-grid--reverse .spotlight__body { order: 1; } }
.spotlight__media img { width: 100%; max-height: 24rem; object-fit: cover; border-radius: 12px; border: 1px solid var(--border); box-shadow: 0 24px 48px -32px var(--shadow-color); }
/* Responsive 16:9 video embed inside a spotlight media slot — same
   card treatment (radius/border/shadow) as the photo variant above, used
   when a section provides a real video_url (e.g. a partner's own YouTube
   video) instead of a static image. */
.kg-video-embed { position: relative; width: 100%; aspect-ratio: 16/9; border-radius: 12px; overflow: hidden; border: 1px solid var(--border); box-shadow: 0 24px 48px -32px var(--shadow-color); background: var(--ink); }
.kg-video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.spotlight__heading { margin-top: .5rem; font-size: 1.5rem; font-weight: 700; }
@media (min-width: 1024px) { .spotlight__heading { font-size: 1.75rem; } }
.spotlight__body-copy { margin-top: 1rem; font-size: .9375rem; line-height: 1.7; color: var(--muted-foreground); }
.spotlight__actions { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; }

/* Badge strip — short capability/quality labels, e.g. "Rigorous Quality
   Control". Deliberately lighter-weight than a full cert-card grid. Hover
   never touches opacity/transform (those belong solely to the one-time
   .kg-reveal entrance below), so the two can share one transition list
   without a staggered entrance delay ever leaking into hover feedback.
   Slightly more presence than before (a touch more padding + a soft
   shadow) so the trio reads as a considered trust strip rather than three
   thin outline chips — still no transform/opacity in the hover state, on
   purpose, for the reason above. */
.badge-row { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: .625rem; }
.badge-pill {
  display: inline-flex; align-items: center; gap: .4rem;
  border-radius: 999px; border: 1px solid color-mix(in oklab, var(--brand) 30%, transparent);
  background: var(--brand-tint); color: var(--brand);
  padding: .55rem 1rem .55rem .9rem; font-size: .8125rem; font-weight: 600;
  box-shadow: 0 10px 22px -18px var(--shadow-color);
  transition: opacity 600ms cubic-bezier(.22,1,.36,1), transform 600ms cubic-bezier(.22,1,.36,1), background-color .3s, color .3s, border-color .3s, box-shadow .3s;
}
.badge-pill::before { content: "✓"; font-size: .75rem; }
.badge-pill:hover { background: var(--brand); color: var(--brand-foreground); border-color: var(--brand); }
.badge-pill.kg-reveal:nth-child(2) { transition-delay: 70ms, 70ms, 0s, 0s, 0s; }
.badge-pill.kg-reveal:nth-child(3) { transition-delay: 140ms, 140ms, 0s, 0s, 0s; }
.badge-pill.kg-reveal:nth-child(n+4) { transition-delay: 210ms, 210ms, 0s, 0s, 0s; }

/* Multi-column spec breakdown — e.g. rapid tests grouped by species. Each
   column reveals with a slight cascading delay off its neighbours (capped
   after the first handful so a 9- or 10-column breakdown doesn't leave the
   last columns waiting), and gets a brand-colored top accent + tint on
   hover (via the ::before pseudo-element, so it never touches the column's
   own opacity/transform) so a dense grid still feels responsive to the
   cursor rather than a flat printed table. */
.spec-columns { margin-top: 1.5rem; display: grid; grid-template-columns: 1fr; gap: 1px; overflow: hidden; border-radius: 12px; border: 1px solid var(--border); background: var(--border); }
@media (min-width: 640px) { .spec-columns { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1024px) { .spec-columns--wide { grid-template-columns: repeat(3, minmax(0,1fr)); } }
/* A single column block (e.g. a page with just one "Highlights" or
   "Services" list) would otherwise still sit inside the 2-up grid above and
   leave an empty, blank-looking second cell — this keeps it one full-width
   column instead. Declared after the responsive rules above so it wins the
   cascade at the same breakpoints. */
.spec-columns--single { grid-template-columns: 1fr; }
@media (min-width: 640px) { .spec-columns--single { grid-template-columns: 1fr; max-width: 28rem; } }
.spec-column {
  background: var(--background); padding: 1.5rem; position: relative;
  transition: opacity 600ms cubic-bezier(.22,1,.36,1), transform 600ms cubic-bezier(.22,1,.36,1), background-color .3s;
}
.spec-column::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--brand); transform: scaleX(0); transform-origin: left; transition: transform .4s ease; }
.spec-column:hover { background: var(--brand-tint); }
.spec-column:hover::before { transform: scaleX(1); }
.spec-column.kg-reveal:nth-child(2) { transition-delay: 70ms, 70ms, 0s; }
.spec-column.kg-reveal:nth-child(3) { transition-delay: 140ms, 140ms, 0s; }
.spec-column.kg-reveal:nth-child(4) { transition-delay: 210ms, 210ms, 0s; }
.spec-column.kg-reveal:nth-child(5) { transition-delay: 280ms, 280ms, 0s; }
.spec-column.kg-reveal:nth-child(n+6) { transition-delay: 340ms, 340ms, 0s; }
.spec-column__head { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; }
.spec-column__title { font-size: .8125rem; font-weight: 700; letter-spacing: .04em; color: var(--ink-foreground); }
.spec-column__count {
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.5rem; height: 1.5rem; padding-inline: .3rem; border-radius: 999px;
  background: color-mix(in oklab, var(--ink-foreground) 8%, transparent);
  color: var(--muted-foreground); font-size: .6875rem; font-weight: 700;
}
.spec-column__list { margin-top: 1rem; display: flex; flex-direction: column; gap: .5rem; }
.spec-column__list li { position: relative; padding-left: 1.1rem; font-size: .8125rem; line-height: 1.5; color: var(--muted-foreground); }
.spec-column__list li::before { content: ""; position: absolute; left: 0; top: .55em; width: 5px; height: 5px; border-radius: 999px; background: color-mix(in oklab, var(--brand) 60%, transparent); }
.spec-column__more {
  margin-top: .75rem; display: inline-flex; align-items: center; gap: .3rem;
  border: 0; background: none; padding: 0; cursor: pointer;
  font-size: .75rem; font-weight: 700; color: var(--brand);
  position: relative;
}
.spec-column__more::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .3s ease; }
.spec-column__more:hover::after, .spec-column__more:focus-visible::after { transform: scaleX(1); }

/* Downloads — protocols, flyers, guides. Reveals as one group (the wrapping
   .download-grid carries .kg-reveal) rather than per-card, because the
   card's own hover lift already animates `transform` — staggering that same
   property per card would leave a lingering hover-lift delay behind after
   the one-time entrance, which is worse than no stagger at all here. */
.download-grid { margin-top: 1.5rem; display: grid; grid-template-columns: 1fr; gap: .75rem; }
@media (min-width: 640px) { .download-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.download-card {
  display: flex; align-items: center; gap: .875rem;
  border-radius: 10px; border: 1px solid var(--border); background: var(--background);
  padding: 1rem 1.125rem; font-size: .875rem; font-weight: 600;
  transition: border-color .3s, transform .3s, box-shadow .3s;
}
.download-card:hover { transform: translateY(-3px); border-color: color-mix(in oklab, var(--brand) 40%, transparent); box-shadow: 0 16px 34px -26px var(--shadow-color); }
.download-card__icon {
  flex-shrink: 0; display: grid; place-items: center; width: 2.5rem; height: 2.5rem;
  border-radius: 8px; background: var(--brand-tint); color: var(--brand); font-size: .75rem; font-weight: 800;
  transition: background-color .3s, color .3s;
}
.download-card:hover .download-card__icon { background: var(--brand); color: var(--brand-foreground); }
.download-card__label { flex: 1; }
.download-card__arrow { color: var(--brand); transition: transform .3s; }
.download-card:hover .download-card__arrow { transform: translateX(4px); }

/* Tabbed resource preview — Flyers / Product Guides / White Papers, each a
   grid of larger document-preview cards rather than the flat row-style
   .download-card above. No-JS fallback: only the first tab/panel carries
   .is-active in the markup, so without main.js the page still shows one
   complete, real set of resources rather than an empty shell.
   Nav/card pattern matches the client's own Lovable design reference
   (engaging-web-builder.lovable.app, "Flyers and Product Guides"): a plain
   text tab row on one shared underline, with only the active tab getting a
   solid pill; document-preview cards with a hover-reveal "PDF" corner
   badge and a plain bold title, no separate CTA line — this site's own
   tokens throughout, not the reference's colors/fonts. */
.kg-resource-tabs__nav { display: flex; flex-wrap: wrap; gap: .375rem; margin-top: 1.75rem; padding-bottom: .75rem; border-bottom: 1px solid var(--border); }
.kg-resource-tabs__tab {
  display: inline-flex; align-items: center; gap: .4rem;
  border-radius: 999px; border: none; background: transparent;
  padding: .55rem 1.1rem; font-size: .8125rem; font-weight: 700; color: var(--muted-foreground);
  cursor: pointer; transition: background-color .3s, color .3s;
}
.kg-resource-tabs__tab:hover { color: var(--ink-foreground); }
.kg-resource-tabs__tab.is-active { background: var(--brand); color: var(--brand-foreground); }
.kg-resource-tabs__count {
  display: inline-grid; place-items: center; min-width: 1.25rem; height: 1.25rem; padding: 0 .3rem;
  border-radius: 999px; background: color-mix(in oklab, var(--ink-foreground) 12%, transparent);
  font-size: .6875rem; font-weight: 800;
}
.kg-resource-tabs__tab.is-active .kg-resource-tabs__count { background: color-mix(in oklab, var(--brand-foreground) 25%, transparent); }
.kg-resource-tabs__panel { display: none; }
.kg-resource-tabs__panel.is-active { display: block; }
.kg-resource-tabs__empty {
  margin-top: 1.5rem; padding: 2.5rem 1.5rem; text-align: center;
  border: 1px dashed var(--border); border-radius: var(--radius-xl);
  color: var(--muted-foreground); font-size: .875rem;
}
.kg-resource-grid { margin-top: 1.75rem; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1.5rem; }
@media (min-width: 768px) { .kg-resource-grid { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.kg-resource-card {
  display: flex; flex-direction: column; overflow: hidden;
  border-radius: 12px; border: 1px solid var(--border); background: var(--background);
  text-decoration: none; transition: box-shadow .3s;
}
.kg-resource-card:hover, .kg-resource-card:focus-visible { box-shadow: 0 24px 44px -28px var(--shadow-color); }
/* object-fit: contain (not cover) — these thumbs are real screenshots of a
   PDF's first page, so cropping would cut off real document content the
   way a cover-crop photo never would. */
.kg-resource-card__thumb { position: relative; overflow: hidden; height: 11rem; background: var(--neutral-soft); }
.kg-resource-card__thumb img { width: 100%; height: 100%; object-fit: contain; padding: .75rem; transition: transform .6s cubic-bezier(.22,1,.36,1); }
.kg-resource-card:hover .kg-resource-card__thumb img { transform: scale(1.05); }
.kg-resource-card__thumb--fallback { display: grid; place-items: center; }
.kg-resource-card__thumb--fallback svg { width: 2.5rem; height: 2.5rem; color: var(--brand); }
.kg-resource-card__badge {
  position: absolute; top: .75rem; right: .75rem;
  border-radius: 999px; background: var(--brand); color: var(--brand-foreground);
  padding: .25rem .6rem; font-size: .625rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  opacity: 0; transition: opacity .3s;
}
.kg-resource-card:hover .kg-resource-card__badge { opacity: 1; }
.kg-resource-card__title { padding: 1rem; border-top: 1px solid var(--border); font-size: .8125rem; font-weight: 700; line-height: 1.4; color: var(--ink-foreground); }
/* Article-style cards (real excerpt/date, e.g. Application Notes) get a
   little extra room under the title instead of the plain PDF footer. */
.kg-resource-card--article .kg-resource-card__title { padding-bottom: .375rem; }
.kg-resource-card__excerpt { padding: 0 1rem; font-size: .75rem; line-height: 1.5; color: var(--muted-foreground); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.kg-resource-card__date { padding: .5rem 1rem 1rem; font-size: .6875rem; font-weight: 700; letter-spacing: .03em; color: var(--brand); text-transform: uppercase; }

/* Trust strip — a compact reuse of the homepage's real certification cards
   (.cert-grid/.cert-card, same data, same component), appended after a
   product page's closing section when that section is plain heading+body
   text with no image/columns/badges/downloads of its own to lean on. Fills
   what would otherwise be a bare, empty-feeling close with a real, relevant
   trust signal instead of an invented decoration. */
.trust-strip { margin-top: 2rem; }
.trust-strip__label { font-size: .6875rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-foreground); margin-bottom: .875rem; }
.cert-grid--compact { margin-top: 0; gap: .75rem; grid-template-columns: repeat(2, minmax(0,1fr)); }
@media (min-width: 640px) { .cert-grid--compact { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (min-width: 1024px) { .cert-grid--compact { grid-template-columns: repeat(5, minmax(0,1fr)); } }
.cert-card--compact { padding: 1rem; }
.cert-card--compact .cert-card__icon { width: 2rem; height: 2rem; font-size: .8125rem; }
.cert-card--compact .cert-card__code { margin-top: .75rem; font-size: .9375rem; }
.cert-card--compact .cert-card__label { margin-top: .3rem; font-size: .75rem; line-height: 1.5; }

/* ==========================================================================
   Partner Profile page (template-partner.php)

   Reuses the Product Category page's hero/spotlight foundation (hex
   ornaments, living aura, alternating section backgrounds) but replaces
   its plain bulleted spec-column list with a real icon-tile grid, adds a
   row of real capability chips to the hero, real per-download cover
   thumbnails, an optional real-content "process" strip, and a lightly
   accented FAQ list — see template-partner.php for what drives each.
   ========================================================================== */

.partner-hero__tagline { margin-top: .75rem; font-size: 1.0625rem; font-weight: 600; line-height: 1.5; color: color-mix(in oklab, var(--ink-foreground) 80%, transparent); }

/* Logo card — same footprint/position as .page-hero__visual img (4:3,
   rounded, bordered, shadowed) so the aura/hex ornaments (which are
   positioned relative to that box) still land correctly, but with a light
   card surface + generous padding behind the logo, since supplier logos
   are typically small, mostly-transparent PNGs that would otherwise look
   lost against the hero's dark background. */
.partner-hero__logo-card {
  position: relative; z-index: 1; overflow: hidden;
  display: grid; place-items: center;
  width: 100%; aspect-ratio: 4 / 3;
  border-radius: 16px; border: 1px solid var(--border);
  background: var(--background);
  box-shadow: 0 32px 56px -32px var(--shadow-color);
  padding: 2.5rem;
}
/* The card is mostly empty space around a small, often-transparent logo —
   these layers give that space something to look at instead of flat white:
   a fine dot grid (the same language as .kg-grid-lines elsewhere on the
   page, just denser and contained to this card) for texture, and a pair of
   specimen-label corner brackets echoing the hex-ornament motif already
   around the card — both neutral ink tones, no brand color, so the card
   stays quiet and the logo (and the brand-red CTAs beside it) stay the only
   color accents in the hero. All purely decorative and behind the logo
   (z-index 0), never competing with it for attention. */
.partner-hero__logo-card-pattern {
  position: absolute; inset: 0; z-index: 0;
  background-image: radial-gradient(color-mix(in oklab, var(--ink-foreground) 14%, transparent) 1px, transparent 1px);
  background-size: 18px 18px;
  /* Fade the dots out directly behind the logo's silhouette and only show
     them in the surrounding empty margin, so they read as texture in the
     negative space rather than clutter under the logo itself. */
  -webkit-mask-image: radial-gradient(ellipse 42% 48% at 50% 45%, transparent 0%, transparent 60%, black 100%);
          mask-image: radial-gradient(ellipse 42% 48% at 50% 45%, transparent 0%, transparent 60%, black 100%);
}
.partner-hero__logo-card-corner {
  position: absolute; z-index: 0; width: 1.75rem; height: 1.75rem;
  border: 1.5px solid color-mix(in oklab, var(--ink-foreground) 22%, transparent);
}
.partner-hero__logo-card-corner--tl { top: 1.125rem; left: 1.125rem; border-right: 0; border-bottom: 0; border-radius: 4px 0 0 0; }
.partner-hero__logo-card-corner--br { bottom: 1.125rem; right: 1.125rem; border-left: 0; border-top: 0; border-radius: 0 0 4px 0; }
.partner-hero__logo-card img { position: relative; z-index: 1; max-width: 78%; max-height: 60%; width: auto; height: auto; object-fit: contain; }

/* Hero capability chips — 2-3 of the partner's own real headline
   capabilities (see 'hero_chips' in inc/partner-pages-content.php), shown
   as small icon badges under the logo card so the hero backs up its own
   claims with something concrete, the same way the Partners page hero
   badge backs up "50+ companies" with a real count. */
.partner-hero__chips { position: relative; z-index: 2; margin-top: 1.25rem; display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; }
.partner-hero__chip {
  display: inline-flex; align-items: center; gap: .45rem;
  border-radius: 999px; border: 1px solid var(--border); background: var(--background);
  padding: .35rem .8rem .35rem .35rem; font-size: .75rem; font-weight: 700; color: var(--ink-foreground);
  box-shadow: 0 12px 26px -20px var(--shadow-color);
}
.partner-hero__chip-icon { flex-shrink: 0; display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 999px; background: var(--brand-tint); color: var(--brand); }
.partner-hero__chip-icon .icon-tile__svg { width: .9rem; height: .9rem; }

/* Icon-tile grid — the real replacement for a plain bulleted list. Each
   column (Product Categories, Featured Products, Services, Tissue Models…)
   becomes a card housing a small grid of icon tiles, one per real item,
   using the icon hand-picked for that item in
   inc/partner-pages-content.php (see kg_partner_icon()). */
.icon-columns { margin-top: 1.5rem; display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 768px) { .icon-columns { grid-template-columns: repeat(2, minmax(0,1fr)); } }
/* A single-column block (e.g. a page with just one "Highlights" list)
   would otherwise still sit inside the 2-up grid and leave an empty
   second cell — kept as a plain class (not :has()) for broad support. */
.icon-columns--single { grid-template-columns: 1fr; max-width: 34rem; }
/* Full-width variant for a single glass/photo grid column (e.g. Product
   Categories) — that grid lays out 4-across and needs the section's full
   measure, unlike the narrow plain icon-tile list --single was sized for. */
.icon-columns--single-wide { grid-template-columns: 1fr; max-width: none; }
.icon-column { border-radius: 12px; border: 1px solid var(--border); background: var(--background); padding: 1.5rem; }
.icon-column__head { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; }
.icon-column__title { font-size: .8125rem; font-weight: 700; letter-spacing: .04em; color: var(--ink-foreground); }

.icon-tile-grid { margin-top: 1.1rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: .625rem; }
.icon-tile {
  display: flex; flex-direction: column; gap: .65rem;
  border-radius: 10px; border: 1px solid var(--border); background: var(--background);
  padding: .875rem .9375rem;
  transition: border-color .3s, transform .3s, box-shadow .3s, background-color .3s;
}
a.icon-tile:hover, a.icon-tile:focus-visible {
  transform: translateY(-3px);
  border-color: color-mix(in oklab, var(--brand) 40%, transparent);
  box-shadow: 0 16px 32px -26px var(--shadow-color);
  background: var(--brand-tint);
}
.icon-tile__icon { display: grid; place-items: center; width: 2.15rem; height: 2.15rem; border-radius: 8px; background: var(--brand-tint); color: var(--brand); transition: background-color .3s, color .3s; }
a.icon-tile:hover .icon-tile__icon { background: var(--brand); color: var(--brand-foreground); }
.icon-tile__svg { width: 1.15rem; height: 1.15rem; }
.icon-tile__text { font-size: .8125rem; font-weight: 600; line-height: 1.4; color: var(--ink-foreground); }
.icon-tile__arrow { font-size: .7em; color: var(--brand); opacity: .75; }

/* ---- Glass column variant (columns[].variant = 'glass') ----------------
   A richer, numbered, frosted-glass alternative to the plain icon-tile
   grid above — used where a category list deserves more visual weight
   (e.g. Product Categories). Real content only (icon + real label + real
   link); the "glass" comes from backdrop-filter + a soft gradient sheen,
   not from any borrowed imagery. */
.icon-column--glass-wrap { background: transparent; border: none; padding: 0; }
.icon-column--glass-wrap .icon-column__title { font-size: 1.05rem; }
.glass-tile-grid { margin-top: 1.5rem; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1.25rem; }
@media (min-width: 640px) { .glass-tile-grid { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.glass-tile {
  position: relative; overflow: hidden; display: flex; flex-direction: column; gap: .5rem;
  min-height: 10rem; padding: 1.35rem 1.25rem;
  border-radius: 18px; border: 1px solid color-mix(in oklab, var(--border) 70%, transparent);
  background: linear-gradient(155deg, color-mix(in oklab, var(--background) 88%, white 12%), color-mix(in oklab, var(--neutral-soft) 92%, transparent));
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 0 color-mix(in oklab, white 40%, transparent) inset, 0 20px 40px -30px var(--shadow-color);
  text-decoration: none; transition: transform .4s cubic-bezier(.22,1,.36,1), box-shadow .4s, border-color .4s;
}
.glass-tile::before {
  content: ""; position: absolute; inset: 0; opacity: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 15% 0%, color-mix(in oklab, var(--brand) 16%, transparent), transparent 60%);
  transition: opacity .4s;
}
a.glass-tile:hover, a.glass-tile:focus-visible {
  transform: translateY(-6px); border-color: color-mix(in oklab, var(--brand) 40%, transparent);
  box-shadow: 0 1px 0 0 color-mix(in oklab, white 55%, transparent) inset, 0 28px 52px -26px var(--shadow-color);
}
a.glass-tile:hover::before, a.glass-tile:focus-visible::before { opacity: 1; }
.glass-tile__index { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .6875rem; font-weight: 700; color: var(--muted-foreground); letter-spacing: .04em; }
.glass-tile__icon {
  margin-top: .35rem; display: grid; place-items: center; width: 2.5rem; height: 2.5rem;
  border-radius: 10px; background: color-mix(in oklab, var(--background) 60%, transparent);
  border: 1px solid color-mix(in oklab, var(--border) 60%, transparent); color: var(--brand);
}
.glass-tile__label { margin-top: auto; font-size: .9375rem; font-weight: 700; line-height: 1.3; color: var(--ink-foreground); overflow-wrap: break-word; word-break: break-word; hyphens: auto; }
.glass-tile__cta {
  font-size: .75rem; font-weight: 700; color: var(--brand);
}
.glass-tile__cta span { display: inline-block; transition: transform .3s; }
a.glass-tile:hover .glass-tile__cta span, a.glass-tile:focus-visible .glass-tile__cta span { transform: translateX(4px); }

/* Photo variant (items[].image set) — matches the client's own Lovable
   reference grid: a real photo fills the top of the card with a numbered
   badge overlaid on it, label + short description + CTA sit below in a
   plain (non-glass) footer. Falls back to the icon .glass-tile above for
   any item with no real photo, so the two variants can sit side by side
   in the same grid without looking mismatched. */
.glass-tile--photo { padding: 0; background: var(--background); -webkit-backdrop-filter: none; backdrop-filter: none; }
.glass-tile__photo { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--neutral-soft); }
.glass-tile__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.22,1,.36,1); }
a.glass-tile--photo:hover .glass-tile__photo img, a.glass-tile--photo:focus-visible .glass-tile__photo img { transform: scale(1.06); }
.glass-tile__index--on-photo {
  position: absolute; top: .75rem; left: .75rem; padding: .2rem .55rem; border-radius: 999px;
  background: color-mix(in oklab, var(--background) 85%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .6875rem; font-weight: 700; color: var(--ink-foreground);
}
.glass-tile__photo-body { display: flex; flex-direction: column; gap: .35rem; padding: 1.1rem 1.15rem 1.3rem; }
.glass-tile--photo .glass-tile__label { margin-top: 0; font-size: .9375rem; }
.glass-tile__desc { font-size: .8125rem; line-height: 1.5; color: var(--muted-foreground); }
.glass-tile__cta--static { opacity: 1; transform: none; font-size: .75rem; font-weight: 700; color: var(--brand); margin-top: .15rem; }

/* Real per-file cover thumbnail (falls back to the plain PDF badge — see
   .download-card__icon above — when a partner/file has none). */
.download-card__thumb { flex-shrink: 0; width: 2.75rem; height: 2.75rem; border-radius: 8px; object-fit: cover; border: 1px solid var(--border); background: var(--neutral-soft); }

/* Process rail — a real-content "how it works" sequence (see the
   'process' field), same segmented-card rhythm as .spec-columns/.faq-list
   so it reads as part of the same system rather than a one-off widget. */
.process-rail { margin-top: 1.5rem; display: grid; grid-template-columns: 1fr; gap: 1px; overflow: hidden; border-radius: 12px; border: 1px solid var(--border); background: var(--border); }
@media (min-width: 768px) { .process-rail { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.process-step { position: relative; background: var(--background); padding: 1.5rem; }
.process-step__num { font-size: .7rem; font-weight: 800; letter-spacing: .12em; color: var(--brand); }
.process-step__icon { margin-top: .875rem; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 8px; background: var(--brand-tint); color: var(--brand); }
.process-step__icon .icon-tile__svg { width: 1.25rem; height: 1.25rem; }
.process-step__label { margin-top: 1rem; font-weight: 700; font-size: .9375rem; color: var(--ink-foreground); }
.process-step__note { margin-top: .4rem; font-size: .8125rem; line-height: 1.55; color: var(--muted-foreground); }

/* FAQ list — a simple, real question/answer list (no accordion — every
   answer here is short enough to just read straight down the page), same
   card rhythm as .spec-column so a page with both sections and an FAQ
   reads as one consistent system rather than a bolted-on component. Each
   question gets a small "?" badge instead of relying on bold text alone. */
.faq-list { margin-top: 1.5rem; display: flex; flex-direction: column; gap: 1px; border-radius: 12px; border: 1px solid var(--border); background: var(--border); overflow: hidden; }
.faq-item { background: var(--background); padding: 1.5rem 1.75rem; transition: background-color .3s; }
.faq-item:hover { background: var(--brand-tint); }
.faq-item__q { display: flex; align-items: flex-start; gap: .75rem; font-size: .9375rem; font-weight: 700; color: var(--ink-foreground); }
.faq-item__q-mark { flex-shrink: 0; display: grid; place-items: center; width: 1.5rem; height: 1.5rem; margin-top: -.1rem; border-radius: 999px; background: var(--brand-tint); color: var(--brand); font-size: .75rem; font-weight: 800; }
.faq-item__a { margin-top: .5rem; margin-left: 2.25rem; font-size: .875rem; line-height: 1.65; color: var(--muted-foreground); }

/* ==========================================================================
   Final CTA
   ========================================================================== */
.final-cta { position: relative; overflow: hidden; background: var(--ink); }
.final-cta__inner { position: relative; padding-block: 5rem; text-align: center; }
@media (min-width: 1024px) { .final-cta__inner { padding-block: 7rem; } }
.final-cta__content { margin-inline: auto; max-width: 48rem; }
.final-cta__title { margin-top: 1.25rem; font-size: 1.875rem; font-weight: 700; color: var(--ink-foreground); }
@media (min-width: 640px) { .final-cta__title { font-size: 2.25rem; } }
@media (min-width: 1024px) { .final-cta__title { font-size: 3rem; line-height: 1.08; } }
.final-cta__subtext { margin-top: 1.25rem; font-size: 1rem; color: color-mix(in oklab, var(--ink-foreground) 70%, transparent); }
.final-cta__actions { margin-top: 2.25rem; display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { background: var(--ink); }
.footer__top { display: grid; gap: 3rem; padding-block: 4rem; }
@media (min-width: 1024px) { .footer__top { grid-template-columns: 1.15fr 2.85fr; gap: 4rem; padding-block: 5rem; } }
.footer__brand { min-width: 0; }
.footer__brand-row { display: flex; min-width: 0; align-items: center; gap: .75rem; }
.footer__brand-name { display: block; font-size: .875rem; font-weight: 800; letter-spacing: -0.01em; color: var(--ink-foreground); }
.footer__brand-since { display: block; margin-top: .25rem; font-size: .65rem; letter-spacing: .18em; color: color-mix(in oklab, var(--ink-foreground) 50%, transparent); }
.footer__tagline { margin-top: 1.5rem; max-width: 24rem; font-size: .875rem; line-height: 1.6; color: color-mix(in oklab, var(--ink-foreground) 60%, transparent); }

/* Fixed: this was `repeat(5, …)` with only 4 real columns, which left a
   phantom empty track eating a fifth of the width — the actual cause of
   the cramped layout and 2-line title wrapping. */
.footer__cols { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 2.5rem 2rem; }
@media (min-width: 640px) { .footer__cols { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 900px) { .footer__cols { grid-template-columns: repeat(4, minmax(0,1fr)); gap: 2rem 2.25rem; } }

.footer__col { min-width: 0; }
.footer__col-title {
  display: flex; align-items: center; gap: .5rem;
  font-size: .6875rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: color-mix(in oklab, var(--ink-foreground) 55%, transparent);
  padding-bottom: .875rem; border-bottom: 1px solid color-mix(in oklab, var(--ink-foreground) 10%, transparent);
}
.footer__col-list { margin-top: 1.125rem; }
.footer__col-list li + li { margin-top: .75rem; }
.footer__col-list a { font-size: .875rem; color: color-mix(in oklab, var(--ink-foreground) 72%, transparent); transition: color .25s, padding-left .25s; }
.footer__col-list a:hover { color: var(--brand); padding-left: .25rem; }
.footer__col-text { margin-top: 1.125rem; font-size: .8125rem; line-height: 1.7; color: color-mix(in oklab, var(--ink-foreground) 65%, transparent); }

/* Certifications list — small brand-tinted check to match the "Quality &
   Compliance" section's iconography instead of a flat wall of text. */
.footer__cert-list { margin-top: 1.125rem; display: flex; flex-direction: column; gap: .75rem; }
.footer__cert-list li { display: flex; align-items: flex-start; gap: .5rem; font-size: .8125rem; line-height: 1.5; color: color-mix(in oklab, var(--ink-foreground) 70%, transparent); }
.footer__cert-check { flex-shrink: 0; margin-top: .1rem; display: inline-grid; place-items: center; width: 1.1rem; height: 1.1rem; border-radius: 4px; background: color-mix(in oklab, var(--brand) 18%, transparent); color: var(--brand); font-size: .625rem; font-weight: 700; }

/* Partner Opportunity — a distinct callout card instead of another plain
   text column, so the footer isn't four identical text blocks in a row. */
.footer__col--callout {
  border-radius: 12px; border: 1px solid color-mix(in oklab, var(--brand) 30%, transparent);
  background: color-mix(in oklab, var(--brand) 8%, transparent);
  padding: 1.25rem 1.25rem 1.5rem;
}
.footer__col--callout .footer__col-title { border-bottom-color: color-mix(in oklab, var(--brand) 25%, transparent); color: color-mix(in oklab, var(--ink-foreground) 65%, transparent); }
.footer__col-cta { margin-top: 1.125rem; display: inline-flex; align-items: center; gap: .5rem; font-size: .8125rem; font-weight: 700; color: var(--brand); transition: gap .25s; }
.footer__col-cta:hover { gap: .75rem; }
.footer__contact-item + .footer__contact-item { margin-top: .75rem; }
.footer__contact-label { font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: color-mix(in oklab, var(--ink-foreground) 40%, transparent); }
.footer__contact-value { margin-top: .25rem; font-size: .875rem; color: color-mix(in oklab, var(--ink-foreground) 70%, transparent); }

.footer__certs { margin-top: 3.5rem; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; border-top: 1px solid color-mix(in oklab, var(--ink-foreground) 10%, transparent); padding-top: 2rem; }
.footer__cert-badge { border-radius: 6px; border: 1px solid color-mix(in oklab, var(--ink-foreground) 15%, transparent); padding: .375rem .75rem; font-size: .7rem; font-weight: 600; letter-spacing: .02em; color: color-mix(in oklab, var(--ink-foreground) 70%, transparent); }

.footer__bottom { margin-top: 2rem; display: flex; flex-direction: column; gap: 1rem; border-top: 1px solid color-mix(in oklab, var(--ink-foreground) 10%, transparent); padding-top: 1.5rem; font-size: .75rem; color: color-mix(in oklab, var(--ink-foreground) 45%, transparent); }
@media (min-width: 640px) { .footer__bottom { flex-direction: row; align-items: center; justify-content: space-between; padding-top: 2rem; } }
.footer__legal { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.footer__legal a:hover, .footer__social a:hover { color: var(--brand); }
.footer__social { display: flex; gap: 1rem; }

.mobile-sticky-cta { position: fixed; inset-inline: 0; bottom: 0; z-index: 40; border-top: 1px solid var(--border); background: color-mix(in oklab, var(--background) 95%, transparent); backdrop-filter: blur(6px); padding: .75rem; }
@media (min-width: 1024px) { .mobile-sticky-cta { display: none; } }
.mobile-sticky-cta__row { display: flex; gap: .75rem; }
.mobile-sticky-cta__row a { flex: 1 1 0%; display: flex; min-height: 2.75rem; align-items: center; justify-content: center; border-radius: 8px; font-size: .875rem; font-weight: 600; }

main { display: block; }
.has-mobile-cta { padding-bottom: 5rem; }
@media (min-width: 1024px) { .has-mobile-cta { padding-bottom: 0; } }

/* =========================================================================
 * Partners page (template-partners.php)
 * ====================================================================== */

/* ---- Hero: text-left, real-logo "exclusive partners" cluster on the
   right in place of the empty space the Lovable design left there ---- */
.partners-hero__grid { margin-top: 1.75rem; display: grid; grid-template-columns: 1fr; align-items: center; gap: 3rem; }
@media (min-width: 1024px) { .partners-hero__grid { grid-template-columns: minmax(0,1fr) minmax(0,35rem); } }
.partners-hero__body { max-width: 42rem; }
.partners-hero__title { margin-top: 1rem; font-size: 2rem; font-weight: 700; line-height: 1.1; color: var(--ink-foreground); }
@media (min-width: 640px) { .partners-hero__title { font-size: 2.5rem; } }
@media (min-width: 1024px) { .partners-hero__title { font-size: 2.75rem; } }
.partners-hero__subtitle { margin-top: 1.25rem; font-size: 1.0625rem; line-height: 1.7; color: color-mix(in oklab, var(--ink-foreground) 75%, transparent); max-width: 36rem; }
.partners-hero__actions { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: .75rem; }

.partners-hero__visual { position: relative; display: none; }
@media (min-width: 1024px) { .partners-hero__visual { display: block; } }

/* ---- Globe visual — a hollow, rotating 3D wire-mesh sphere standing in
   for the empty right side of the hero. Red latitude bands (horizontal)
   give it structure; a few dashed gold meridian paths (perpendicular to
   the red mesh) each carry a single glowing light gliding along the
   sphere's own surface. No card/box behind it -- it floats directly on
   the page, with a light scatter of static "dust" for a sense of space.
   Slow and quiet on purpose: this sits beside a stat-heavy headline, not
   competing with it. Approved as a mockup (GIF review) before this
   markup/CSS was written. ---- */
.globe-space { position: relative; height: 33rem; display: flex; align-items: center; justify-content: center; }
.globe-space__dust { position: absolute; inset: 0; pointer-events: none; }
.globe-dust {
  position: absolute; width: 2.5px; height: 2.5px; border-radius: 50%;
  background: color-mix(in srgb, var(--globe-mesh) 70%, var(--ink-foreground));
  animation: kg-globe-twinkle 4s ease-in-out infinite;
}
@keyframes kg-globe-twinkle { 0%, 100% { opacity: .12; } 50% { opacity: .5; } }

.globe-perspective { position: relative; width: 24rem; height: 24rem; perspective: 1500px; }
.globe-sphere { position: absolute; inset: 0; transform-style: preserve-3d; animation: kg-globe-spin 90s linear infinite; }
@keyframes kg-globe-spin { from { transform: rotateY(0deg) rotateX(-10deg); } to { transform: rotateY(360deg) rotateX(-10deg); } }

.globe-ring { position: absolute; inset: 0; border-radius: 50%; }
/* full-saturation brand red now (not the muted echo) -- sparseness (7
   thin-ish lines, real gaps between them) is what keeps this from
   reading as "too much red", not desaturating it into invisibility */
.globe-ring--lat { border: 2.25px solid var(--brand); opacity: .85; }
.globe-ring--lat1 { transform: rotateX(90deg) scale(.98) translateZ(.34rem); }
.globe-ring--lat2 { transform: rotateX(90deg) scale(.9)  translateZ(3.9rem); }
.globe-ring--lat3 { transform: rotateX(90deg) scale(.9)  translateZ(-3.9rem); }
.globe-ring--lat4 { transform: rotateX(90deg) scale(.68) translateZ(7.4rem); }
.globe-ring--lat5 { transform: rotateX(90deg) scale(.68) translateZ(-7.4rem); }
.globe-ring--lat6 { transform: rotateX(90deg) scale(.4)  translateZ(10.3rem); }
.globe-ring--lat7 { transform: rotateX(90deg) scale(.4)  translateZ(-10.3rem); }
.globe-ring--path {
  border: 2px dashed var(--globe-gold);
  filter: drop-shadow(0 0 3px color-mix(in srgb, var(--globe-gold) 60%, transparent));
}
.globe-ring--path1 { transform: rotateY(15deg); }
.globe-ring--path2 { transform: rotateY(75deg); }
.globe-ring--path3 { transform: rotateY(135deg); }

/* glowing dots gliding along a gold path's own line -- on the sphere's
   surface, perpendicular to the red bands -- not orbiting outside it */
.globe-track { position: absolute; inset: 0; }
.globe-dot-pivot { position: absolute; inset: 0; animation: kg-globe-dot-spin linear infinite; }
.globe-dot {
  position: absolute; top: -3.5px; left: 50%; width: 7px; height: 7px; margin-left: -3.5px;
  border-radius: 50%; background: var(--globe-gold-bright);
  box-shadow: 0 0 6px var(--globe-gold-bright), 0 0 10px var(--globe-gold-bright), 0 0 20px var(--globe-gold);
}
@keyframes kg-globe-dot-spin { to { transform: rotate(360deg); } }
.globe-dot-pivot--1 { animation-duration: 26s; }
.globe-dot-pivot--2 { animation-duration: 32s; animation-direction: reverse; animation-delay: -11s; }
.globe-dot-pivot--3 { animation-duration: 38s; animation-delay: -22s; }

.globe-logo-ring { position: absolute; inset: 0; z-index: 6; pointer-events: none; }
.globe-logo-chip {
  position: absolute; width: 5.25rem; height: 5.25rem; border-radius: 50%;
  background: var(--background);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  box-shadow: 0 14px 30px -8px rgba(0,0,0,.5), 0 0 0 1.5px var(--border);
  animation: kg-globe-float 5s ease-in-out infinite;
}
.globe-logo-chip img { max-width: 82%; max-height: 82%; object-fit: contain; }
@keyframes kg-globe-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.globe-logo-chip--1 { top: -2%;  left: 30%;  animation-delay: 0s; }
.globe-logo-chip--2 { top: 4%;   right: -2%; animation-delay: 1.1s; }
.globe-logo-chip--3 { top: 42%;  left: -8%;  animation-delay: .5s; }
.globe-logo-chip--4 { top: 40%;  right: -9%; animation-delay: 1.7s; }
.globe-logo-chip--5 { bottom: 8%; right: 30%; animation-delay: .9s; }
.globe-logo-chip--6 { bottom: -1%; right: -3%; animation-delay: .2s; }

.partners-hero__badge {
  position: absolute; left: -1.5rem; bottom: -1.25rem; z-index: 2;
  display: flex; align-items: center; gap: .625rem;
  background: var(--brand); color: var(--brand-foreground);
  border-radius: 12px; padding: .75rem 1rem;
  box-shadow: 0 24px 44px -20px color-mix(in oklab, var(--brand) 60%, transparent);
}
.partners-hero__badge-value { font-size: 1.5rem; font-weight: 800; line-height: 1; }
.partners-hero__badge-label { font-size: .6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; opacity: .9; max-width: 6rem; line-height: 1.3; }

@media (prefers-reduced-motion: reduce) {
  .globe-sphere, .globe-dot-pivot, .globe-logo-chip, .globe-dust { animation: none !important; }
}

/* ---- Stats bar — light-background sibling of .overview__stat (which is
   styled for the homepage's dark bg-ink section) ---- */
.partners-stats { margin-top: 3rem; padding-top: 2.5rem; border-top: 1px solid var(--border); display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 2rem; }
@media (min-width: 768px) { .partners-stats { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.partners-stat { min-width: 0; }
.partners-stat-value { font-size: 2rem; font-weight: 800; color: var(--ink-foreground); }
.partners-stat-value .suffix { color: var(--brand); }
.partners-stat-label { margin-top: .375rem; font-size: .8125rem; color: color-mix(in oklab, var(--ink-foreground) 60%, transparent); }

/* ---- Platinum partners — cert-card pattern extended with a logo + description ---- */
.platinum-grid { margin-top: 3rem; display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 640px) { .platinum-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1024px) { .platinum-grid { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.platinum-card { position: relative; height: 100%; display: flex; flex-direction: column; border-radius: 12px; border: 1px solid var(--border); background: var(--background); padding: 1.5rem; transition: transform .4s, border-color .4s, box-shadow .4s; }
.platinum-card:hover { transform: translateY(-4px); border-color: color-mix(in oklab, var(--brand) 40%, transparent); box-shadow: 0 20px 38px -28px var(--shadow-color); }
.platinum-card__logo { height: 2.75rem; display: flex; align-items: center; }
.platinum-card__logo img { max-height: 100%; max-width: 9rem; width: auto; object-fit: contain; }
.platinum-card__name { margin-top: 1rem; font-weight: 700; color: var(--ink-foreground); }
.platinum-card__desc { margin-top: .5rem; font-size: .8125rem; line-height: 1.6; color: color-mix(in oklab, var(--ink-foreground) 62%, transparent); }
/* A card with a real partner-page link gets a small corner arrow, quiet
   until hover, so the ones that lead somewhere read as clickable without
   the whole grid needing a visual overhaul. */
.platinum-card__arrow { position: absolute; top: 1.25rem; right: 1.25rem; color: var(--brand); opacity: 0; transform: translate(-4px, 4px); transition: opacity .3s, transform .3s; }
.platinum-card:hover .platinum-card__arrow { opacity: 1; transform: translate(0, 0); }

/* ---- Full directory — dense logo-only grid, same tile styling as
   supplier logo strips elsewhere on the site ---- */
.directory-grid { margin-top: 3rem; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .75rem; }
@media (min-width: 640px) { .directory-grid { grid-template-columns: repeat(4, minmax(0,1fr)); } }
@media (min-width: 1024px) { .directory-grid { grid-template-columns: repeat(6, minmax(0,1fr)); } }

/* ==========================================================================
   Technical Guides & eBooks — real 104-document library (see
   inc/guides-content.php). The live page is a flat, unstyled list of text
   links; this build turns each PDF into a small card with a CSS-drawn
   "document preview" (no per-file thumbnail generation), adds a live
   title search, quick-jump category pills with real counts, and a
   "show all" toggle for the one category (Cell Culture, 75 real
   documents) that would otherwise dump its whole list into the page.
   ========================================================================== */
.guides-hero__grid { margin-top: 1.75rem; display: grid; grid-template-columns: 1fr; align-items: center; gap: 3rem; }
@media (min-width: 1024px) { .guides-hero__grid { grid-template-columns: minmax(0,1fr) minmax(0,32rem); } }
.guides-hero__body { max-width: 46rem; }
.guides-hero__title { margin-top: 1rem; font-size: 2rem; font-weight: 700; line-height: 1.1; color: var(--ink-foreground); }
@media (min-width: 640px) { .guides-hero__title { font-size: 2.5rem; } }
@media (min-width: 1024px) { .guides-hero__title { font-size: 2.75rem; } }
.guides-hero__subtitle { margin-top: 1.25rem; font-size: 1.0625rem; line-height: 1.7; color: color-mix(in oklab, var(--ink-foreground) 75%, transparent); max-width: 40rem; }
.guides-hero__meta { margin-top: .875rem; font-size: .8125rem; font-weight: 600; color: color-mix(in oklab, var(--ink-foreground) 55%, transparent); }

/* Hero-right visual — a loose "floating document stack": six translucent
   document chips (same visual language as the real guide-card previews
   below) drifting slowly and independently, the front one periodically
   lifting slightly as if being picked up to read. Each carries a real
   category name as its "title" line, so it reads as an actual library
   rather than generic placeholder paper. Purely decorative (aria-hidden) —
   the real content is the page below it. */
.guides-hero__visual { position: relative; display: none; height: 29rem; }
@media (min-width: 1024px) { .guides-hero__visual { display: block; } }

.guides-stack { position: absolute; inset: 0; }
.guides-stack__glow {
  position: absolute; left: 50%; top: 68%; transform: translate(-50%,-50%);
  width: 21rem; height: 11rem; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, color-mix(in oklab, var(--brand) 17%, transparent), transparent 72%);
}
.guides-stack__pile { position: absolute; left: 50%; top: 45%; width: 1px; height: 1px; }

.guides-stack-sheet {
  position: absolute; left: 0; top: 0; width: 10rem; height: 12.7rem; margin: -6.35rem 0 0 -5rem;
  background: color-mix(in oklab, var(--background) 94%, transparent);
  border: 1px solid var(--border); border-radius: .875rem;
  box-shadow: 0 1.4rem 2.6rem -1.1rem rgba(20,10,5,.34);
  padding: 1.2rem 1.1rem;
}
.guides-stack-sheet__fold {
  position: absolute; top: 0; right: 0; width: 1.3rem; height: 1.3rem;
  background: linear-gradient(135deg, transparent 50%, var(--border) 50%);
  border-top-right-radius: .875rem;
}
.guides-stack-sheet__title {
  display: block; font-size: .8125rem; font-weight: 800; line-height: 1.25;
  color: var(--ink-foreground); margin-bottom: .6rem; max-width: 92%;
}
.guides-stack-sheet__lines span { display: block; height: .3125rem; border-radius: .2rem; background: color-mix(in oklab, var(--ink-foreground) 13%, transparent); margin-top: .5rem; }
.guides-stack-sheet__lines span:first-child { margin-top: 0; width: 82%; }
.guides-stack-sheet__lines span:nth-child(2) { width: 65%; }
.guides-stack-sheet__lines span:nth-child(3) { width: 72%; }
.guides-stack-sheet__badge {
  position: absolute; left: .8rem; bottom: .8rem;
  background: var(--brand); color: var(--brand-foreground);
  font-size: .6875rem; font-weight: 800; border-radius: .3rem; padding: .25rem .45rem; letter-spacing: .03em;
}

.guides-stack-sheet--1 { z-index: 1; animation: kg-stack-f1 7.5s ease-in-out infinite; }
.guides-stack-sheet--2 { z-index: 2; animation: kg-stack-f2 6.5s ease-in-out infinite; animation-delay: -1.4s; }
.guides-stack-sheet--3 { z-index: 3; animation: kg-stack-f3 8.2s ease-in-out infinite; animation-delay: -3s; }
.guides-stack-sheet--4 { z-index: 2; animation: kg-stack-f4 7s ease-in-out infinite; animation-delay: -2.2s; }
.guides-stack-sheet--5 { z-index: 1; animation: kg-stack-f5 9s ease-in-out infinite; animation-delay: -4.5s; }
.guides-stack-sheet--6 { z-index: 6; animation: kg-stack-front-lift 6s ease-in-out infinite; }

@keyframes kg-stack-f1 { 0%,100% { transform: translate(-7rem,2.4rem) rotate(-10deg) translateY(0); } 50% { transform: translate(-7rem,2.4rem) rotate(-10deg) translateY(-.75rem); } }
@keyframes kg-stack-f2 { 0%,100% { transform: translate(-2.85rem,-3.9rem) rotate(8deg) translateY(0); } 50% { transform: translate(-2.85rem,-3.9rem) rotate(8deg) translateY(-.8rem); } }
@keyframes kg-stack-f3 { 0%,100% { transform: translate(5.4rem,2.9rem) rotate(-5deg) translateY(0); } 50% { transform: translate(5.4rem,2.9rem) rotate(-5deg) translateY(-.85rem); } }
@keyframes kg-stack-f4 { 0%,100% { transform: translate(8.1rem,-2rem) rotate(12deg) translateY(0); } 50% { transform: translate(8.1rem,-2rem) rotate(12deg) translateY(-.65rem); } }
@keyframes kg-stack-f5 { 0%,100% { transform: translate(-3.4rem,5.9rem) rotate(-16deg) translateY(0); } 50% { transform: translate(-3.4rem,5.9rem) rotate(-16deg) translateY(-.6rem); } }
@keyframes kg-stack-front-lift {
  0%,45%,100% { transform: translate(.5rem,-.35rem) rotate(3deg) translateY(0) scale(1); }
  62%,80% { transform: translate(.5rem,-1.35rem) rotate(-1deg) translateY(0) scale(1.035); }
}

@media (prefers-reduced-motion: reduce) {
  .guides-stack-sheet { animation: none !important; }
}

.guides-search {
  margin-top: 2rem; max-width: 32rem; position: relative;
}
.guides-search__icon {
  position: absolute; left: 1rem; top: 50%; transform: translateY(-50%);
  color: color-mix(in oklab, var(--ink-foreground) 45%, transparent); pointer-events: none;
}
.guides-search input {
  width: 100%; height: 3.25rem; border-radius: .75rem; border: 1px solid var(--border);
  background: var(--background); padding-inline: 2.75rem 1rem; font-size: .9375rem;
  color: var(--ink-foreground); font-family: inherit;
}
.guides-search input::placeholder { color: color-mix(in oklab, var(--ink-foreground) 45%, transparent); }
.guides-search input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand) 18%, transparent); }

.guides-pills { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: .625rem; }
.guides-pill {
  display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .9rem;
  border-radius: 999px; border: 1px solid var(--border); background: var(--background);
  font-size: .8125rem; font-weight: 600; color: var(--ink-foreground);
  text-decoration: none; transition: border-color .3s, background .3s;
}
.guides-pill:hover { border-color: color-mix(in oklab, var(--brand) 45%, transparent); background: var(--brand-tint); }
.guides-pill__count {
  display: inline-flex; align-items: center; justify-content: center; min-width: 1.375rem; height: 1.375rem;
  border-radius: 999px; background: var(--ink); font-size: .6875rem; font-weight: 700; padding-inline: .3rem;
  color: color-mix(in oklab, var(--ink-foreground) 70%, transparent);
}

.guides-empty { display: none; }
.guides-empty:not([hidden]) { display: block; text-align: center; padding: 3rem 1.5rem; font-size: .9375rem; color: color-mix(in oklab, var(--ink-foreground) 65%, transparent); }
.guides-empty__clear { border: none; background: none; padding: 0; font: inherit; font-weight: 700; color: var(--brand); text-decoration: underline; cursor: pointer; }

.guide-section__count { margin-top: .5rem; font-size: .8125rem; color: color-mix(in oklab, var(--ink-foreground) 55%, transparent); }

.guide-grid { margin-top: 2.5rem; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1.25rem; }
@media (min-width: 640px) { .guide-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (min-width: 1024px) { .guide-grid { grid-template-columns: repeat(4, minmax(0,1fr)); } }
@media (min-width: 1280px) { .guide-grid { grid-template-columns: repeat(5, minmax(0,1fr)); } }

.guide-card {
  display: flex; flex-direction: column; text-decoration: none; position: relative;
  border-radius: 12px; border: 1px solid var(--border); background: var(--background);
  padding: 1rem; transition: transform .35s, border-color .35s, box-shadow .35s;
}
.guide-card:hover { transform: translateY(-4px); border-color: color-mix(in oklab, var(--brand) 40%, transparent); box-shadow: 0 20px 38px -28px var(--shadow-color); }
.guide-card--overflow { display: none; }
.guide-section.is-expanded .guide-card--overflow { display: flex; }
.guides-index.is-searching .guide-card--overflow { display: flex; }
.guide-card--hide { display: none !important; }

/* the "document preview" -- a real first-page render of the actual PDF,
   fetched and drawn client-side by pdf.js (see assets/js/guide-previews.js)
   once the card nears the viewport. A CSS-drawn stand-in -- folded corner,
   a few ruled lines, a PDF badge -- shows first and doubles as the
   permanent fallback if a fetch/render ever fails (slow link, a broken
   file, pdf.js unavailable), so a card never ends up visually broken. */
.guide-card__preview {
  position: relative; aspect-ratio: 3/4; border-radius: 8px;
  background: linear-gradient(160deg, var(--neutral-soft), var(--background) 65%);
  border: 1px solid var(--border); overflow: hidden;
  display: flex; flex-direction: column; justify-content: center; gap: .4rem; padding: 1.1rem .9rem;
}
.guide-card__canvas {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0;
  object-fit: cover; object-position: top center; background: var(--background);
  opacity: 0; transition: opacity .5s ease;
}
.guide-card__preview.has-preview .guide-card__canvas { opacity: 1; }
.guide-card__preview.has-preview .guide-card__lines { opacity: 0; transition: opacity .3s ease; }
.guide-card__fold {
  position: absolute; top: 0; right: 0; width: 1.1rem; height: 1.1rem; z-index: 2;
  background: linear-gradient(135deg, transparent 50%, var(--border) 50%);
}
.guide-card__fold::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(135deg, transparent 50%, var(--background) 50%);
  transform: scale(.82); transform-origin: top right;
}
.guide-card__lines { position: relative; z-index: 1; display: flex; flex-direction: column; gap: .34rem; }
.guide-card__lines span { display: block; height: 5px; border-radius: 3px; background: color-mix(in oklab, var(--ink-foreground) 12%, transparent); }
.guide-card__lines span:nth-child(1) { width: 92%; }
.guide-card__lines span:nth-child(2) { width: 78%; }
.guide-card__lines span:nth-child(3) { width: 85%; }
.guide-card__lines span:nth-child(4) { width: 60%; }
.guide-card__lines span:nth-child(5) { width: 72%; margin-top: .5rem; height: 4px; background: color-mix(in oklab, var(--ink-foreground) 8%, transparent); }
.guide-card__badge {
  position: absolute; left: .7rem; bottom: .7rem; z-index: 2;
  background: var(--brand); color: var(--brand-foreground);
  font-size: .625rem; font-weight: 800; letter-spacing: .03em;
  border-radius: 4px; padding: .2rem .4rem; line-height: 1;
  box-shadow: 0 2px 10px -2px rgba(0,0,0,.35);
}
.guide-card__title {
  margin-top: .9rem; font-size: .8125rem; font-weight: 700; line-height: 1.4; color: var(--ink-foreground);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.guide-card__cta {
  margin-top: auto; padding-top: .75rem; font-size: .75rem; font-weight: 700; color: var(--brand);
}
.guide-card:hover .guide-card__cta { text-decoration: underline; }

/* Dr. Sheraa hover reveal -- on hover/focus of ANY guide card (not just
   ones whose title is visually clamped), a small circular mascot badge
   fades in on the card's top-right corner and a speech-bubble shows the
   document's full title plus its real category, so the 3-line clamp on
   the card face is never the only place the complete name is readable. */
.shera-badge {
  position: absolute; z-index: 6; top: -12px; right: -12px;
  width: 38px; height: 38px; border-radius: 50%; overflow: hidden;
  background: var(--background); border: 2px solid var(--background);
  box-shadow: 0 6px 16px -4px var(--shadow-color), 0 0 0 2px var(--brand);
  opacity: 0; transform: scale(.55) rotate(-10deg);
  transition: opacity .22s ease, transform .22s ease;
  pointer-events: none;
}
.guide-card:hover .shera-badge,
.guide-card:focus-within .shera-badge {
  opacity: 1; transform: scale(1) rotate(0deg);
}
.shera-badge img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; transform: scale(1.5); }

.shera-bubble {
  position: absolute; z-index: 7;
  bottom: calc(100% + 12px); left: calc(100% - 30px);
  width: min(220px, 78vw);
  background: var(--background); color: var(--ink-foreground);
  border: 1.5px solid var(--brand); border-radius: 14px 14px 14px 4px;
  padding: .65rem .8rem .7rem;
  box-shadow: 0 16px 34px -16px var(--shadow-color);
  opacity: 0; pointer-events: none;
  transform: translateY(6px) scale(.95);
  transform-origin: bottom left;
  transition: opacity .2s ease, transform .2s ease;
}
.guide-card:hover .shera-bubble,
.guide-card:focus-within .shera-bubble {
  opacity: 1; transform: translateY(0) scale(1);
}
/* .guide-grid always renders one <a class="guide-card"> per document with
   no wrapper elements between them, so nth-child position lines up exactly
   with visual column position. The grid's own column count changes at each
   breakpoint (2/3/4/5 -- see .guide-grid above); the card landing in the
   rightmost column at a given width would otherwise open its bubble off
   the right edge of the page, so it's flipped to open leftward instead
   while every other card keeps opening rightward from the badge. */
.guide-grid .guide-card:nth-child(2n) .shera-bubble {
  left: auto; right: -6px; border-radius: 14px 14px 4px 14px; transform-origin: bottom right;
}
@media (min-width: 640px) {
  .guide-grid .guide-card:nth-child(2n) .shera-bubble {
    left: calc(100% - 30px); right: auto; border-radius: 14px 14px 14px 4px; transform-origin: bottom left;
  }
  .guide-grid .guide-card:nth-child(3n) .shera-bubble {
    left: auto; right: -6px; border-radius: 14px 14px 4px 14px; transform-origin: bottom right;
  }
}
@media (min-width: 1024px) {
  .guide-grid .guide-card:nth-child(3n) .shera-bubble {
    left: calc(100% - 30px); right: auto; border-radius: 14px 14px 14px 4px; transform-origin: bottom left;
  }
  .guide-grid .guide-card:nth-child(4n) .shera-bubble {
    left: auto; right: -6px; border-radius: 14px 14px 4px 14px; transform-origin: bottom right;
  }
}
@media (min-width: 1280px) {
  .guide-grid .guide-card:nth-child(4n) .shera-bubble {
    left: calc(100% - 30px); right: auto; border-radius: 14px 14px 14px 4px; transform-origin: bottom left;
  }
  .guide-grid .guide-card:nth-child(5n) .shera-bubble {
    left: auto; right: -6px; border-radius: 14px 14px 4px 14px; transform-origin: bottom right;
  }
}
.shera-bubble::before {
  content: "Dr. Sheraa says:";
  display: block; font-size: .5625rem; font-weight: 800; letter-spacing: .04em;
  text-transform: uppercase; color: var(--brand); margin-bottom: .35rem;
}
.shera-bubble__title {
  display: block; font-size: .75rem; font-weight: 700; line-height: 1.42; color: var(--ink-foreground);
}
.shera-bubble__category {
  display: inline-block; margin-top: .45rem;
  font-size: .5625rem; font-weight: 700; letter-spacing: .02em;
  color: var(--brand); background: var(--brand-tint);
  padding: .18rem .5rem; border-radius: 999px;
}

/* ==========================================================================
   About pages — Overview / Management / Our Journey / Awards /
   Sustainability Policies. Each page gets its own purpose-fit component
   rather than reusing one generic card everywhere (see project note: the
   hex-ornament/aura hero frame stays reserved for Product Category and
   Partner Profile pages only — these five never use it).
   ========================================================================== */

/* ---- Overview: stat band ------------------------------------------------ */
.about-stats {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
  background: var(--border); border: 1px solid var(--border); border-radius: 12px; overflow: hidden;
}
@media (min-width: 640px) { .about-stats { grid-template-columns: repeat(3, 1fr); } }
.about-stat { background: var(--background); padding: 1.75rem 1.5rem; text-align: center; }
.about-stat__value { font-size: clamp(1.75rem, 3.5vw, 2.5rem); font-weight: 800; color: var(--brand); line-height: 1; }
.about-stat__label { margin-top: .5rem; font-size: .8125rem; line-height: 1.4; color: var(--muted-foreground); }

/* "About the Partner" split section — logo + headline facts on one side,
   the fuller company story on the other. Distinct from the hero-adjacent
   .about-stat band above: these stat pairs sit inline with a left accent
   rule (echoing the client's own Lovable reference), not in their own
   boxed cards. */
.about-partner { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 1024px) { .about-partner { grid-template-columns: 0.85fr 1.15fr; gap: 4rem; } }
/* The right column now runs taller than the aside (five highlight cards
   vs. a logo + two stats), which left a block of empty space under the
   aside on wide screens. Sticky-pin it on desktop so it travels with the
   page instead of sitting orphaned at the top, and give it a subtle
   decorative texture + a real outbound link so the space itself reads as
   designed rather than merely short on content. */
@media (min-width: 1024px) {
  .about-partner__aside { position: sticky; top: 6rem; align-self: start; }
}
.about-partner__aside { position: relative; padding: 1.5rem; }
.about-partner__aside-pattern {
  position: absolute; inset: 0; z-index: 0; border-radius: var(--radius-xl);
  background-image: radial-gradient(color-mix(in oklab, var(--ink-foreground) 10%, transparent) 1px, transparent 1px);
  background-size: 20px 20px;
  -webkit-mask-image: radial-gradient(ellipse 90% 90% at 30% 20%, black 0%, black 45%, transparent 85%);
          mask-image: radial-gradient(ellipse 90% 90% at 30% 20%, black 0%, black 45%, transparent 85%);
}
.about-partner__logo-card,
.about-partner__stats,
.about-partner__link { position: relative; z-index: 1; }
.about-partner__logo-card {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--background); border: 1px solid var(--border); border-radius: var(--radius-xl);
  padding: 1.75rem 2rem; box-shadow: 0 24px 48px -32px var(--shadow-color);
  transition: transform .35s, box-shadow .35s;
}
.about-partner__logo-card:hover { transform: translateY(-4px); box-shadow: 0 28px 56px -28px var(--shadow-color); }
.about-partner__logo-card img { max-width: 14rem; width: 100%; height: auto; display: block; }
.about-partner__stats { margin-top: 2.25rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 1.5rem; }
.about-partner__stat { border-left: 2px solid var(--brand); padding-left: 1rem; }
.about-partner__stat-value { font-size: clamp(1.75rem, 3.5vw, 2.25rem); font-weight: 800; color: var(--ink-foreground); line-height: 1; }
.about-partner__stat-value .suffix { font-size: 1.1rem; font-weight: 700; }
.about-partner__stat-label { margin-top: .375rem; font-size: .8125rem; color: var(--muted-foreground); }
.about-partner__link { margin-top: 2rem; display: inline-flex; }
.about-partner__body-col { padding-top: .25rem; }
.about-partner__body { margin-top: 1.25rem; font-size: 1rem; line-height: 1.75; color: var(--muted-foreground); }
/* Lead paragraph trimmed to a single short block (see the "About the
   Partner" design-fidelity note in inc/partner-pages-content.php) — a
   touch larger and tighter than the old multi-paragraph body so it reads
   as a headline statement, not the first paragraph of a longer wall of
   text. The fuller story now lives in .about-partner__highlights below. */
.about-partner__body--lead { font-size: 1.0625rem; line-height: 1.6; color: var(--ink-foreground); font-weight: 500; max-width: 40rem; }
.about-partner__highlights { margin-top: 2rem; }
.about-partner__highlights .sol-vertical-grid,
.about-partner__highlights .sol-vertical-grid--bento { margin-top: 0; }
/* The about column is narrower than a full-width section (it shares the
   grid with the logo/stats aside), so the bento treatment's 4-column desktop
   layout and 2-row "featured" card are scoped down to a plain, even 2-up
   grid here — five short, equally-weighted facts read better than one
   oversized card competing with four cramped ones in this narrower space. */
.about-partner__highlights .sol-vertical-grid--bento { grid-template-columns: repeat(2, 1fr) !important; }
.about-partner__highlights .sol-vertical-card--featured { grid-row: auto !important; }
.about-partner__highlights .sol-vertical-card--featured .sol-vertical-card__icon { width: 2.5rem !important; height: 2.5rem !important; }
.about-partner__highlights .sol-vertical-card--featured .sol-vertical-card__icon .icon-tile__svg { width: 1.4rem !important; height: 1.4rem !important; }
.about-partner__highlights .sol-vertical-card--featured .sol-vertical-card__title { font-size: .9375rem !important; }
.about-partner__highlights .sol-vertical-card--featured .sol-vertical-card__desc { font-size: .8125rem !important; }
.about-partner__highlights .sol-vertical-card { padding: 1.4rem; gap: .65rem; }
.about-partner__highlights .sol-vertical-card__desc { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.about-partner__body p + p { margin-top: 1.1rem; }
.about-stats__note { margin-top: 1rem; text-align: center; font-size: .8125rem; color: var(--muted-foreground); }

.pull-quote {
  margin-top: 2rem; padding: 1.5rem 1.75rem; border-left: 3px solid var(--brand);
  background: var(--brand-tint); border-radius: 0 12px 12px 0;
  font-size: 1.0625rem; line-height: 1.6; font-style: italic; color: var(--ink-foreground);
}

/* ---- Overview: manufacturing highlight band ----------------------------- */
.mfg-band {
  display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap;
  padding: 2.25rem 2rem; background: var(--foreground); border-radius: 12px;
}
.mfg-band__body { max-width: 34rem; }
.mfg-band__title { font-size: 1.25rem; font-weight: 700; color: var(--background); line-height: 1.35; }
.mfg-band__text { margin-top: .5rem; font-size: .875rem; line-height: 1.5; color: color-mix(in oklab, var(--background) 70%, transparent); }
.mfg-band__btn { flex-shrink: 0; background: var(--background); color: var(--foreground); }
.mfg-band__btn:hover { background: var(--brand-tint); }

/* ---- Overview: values --------------------------------------------------- */
.value-grid { margin-top: 1.5rem; display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
@media (min-width: 768px) { .value-grid { grid-template-columns: 1fr 1fr; } }
.value-card { background: var(--background); padding: 2rem; transition: background-color .3s; }
.value-card:hover { background: var(--brand-tint); }
.value-card__icon { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 8px; background: var(--brand-tint); color: var(--brand); }
.value-card__icon .icon-tile__svg { width: 1.25rem; height: 1.25rem; }
.value-card__title { margin-top: 1rem; font-size: 1.125rem; font-weight: 700; }
.value-card__body { margin-top: .625rem; font-size: .875rem; line-height: 1.65; color: var(--muted-foreground); }

/* ---- Overview: trademark strip ------------------------------------------ */
.trademark-strip { margin-top: 1.75rem; font-size: .75rem; line-height: 1.8; color: var(--muted-foreground); }
.trademark-strip__label { font-weight: 700; color: var(--ink-foreground); margin-right: .4rem; }

/* ---- Overview: mid-page CTA to Management ------------------------------- */
.about-cta { text-align: center; max-width: 44rem; margin-inline: auto; }
.about-cta__title { font-size: clamp(1.375rem, 3vw, 1.75rem); font-weight: 700; line-height: 1.3; }
.about-cta__btn { margin-top: 1.5rem; }

/* ---- Management: team grid with native <details> bio disclosure -------- */
.team-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 560px) { .team-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .team-grid { grid-template-columns: repeat(3, 1fr); } }
.team-card {
  background: var(--background); border: 1px solid var(--border); border-radius: 12px;
  padding: 1.75rem 1.5rem; transition: box-shadow .3s, border-color .3s, transform .3s;
}
.team-card:hover { transform: translateY(-4px); border-color: color-mix(in oklab, var(--brand) 35%, var(--border)); box-shadow: 0 24px 48px -30px var(--shadow-color); }
.team-card[open] { border-color: var(--brand); }
.team-card__summary { cursor: pointer; list-style: none; display: flex; flex-direction: column; }
.team-card__summary::-webkit-details-marker { display: none; }
.team-card__photo-wrap { width: 4.5rem; height: 4.5rem; border-radius: 999px; overflow: hidden; background: var(--brand-tint); flex-shrink: 0; }
.team-card__photo { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.team-card__name { margin-top: 1.125rem; font-size: 1.0625rem; font-weight: 700; color: var(--ink-foreground); }
.team-card__title { margin-top: .2rem; font-size: .6875rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--brand); }
.team-card__short { margin-top: .75rem; font-size: .8125rem; line-height: 1.55; color: var(--muted-foreground); }
.team-card__toggle { margin-top: 1rem; font-size: .75rem; font-weight: 700; color: var(--brand); }
.team-card__toggle-close { display: none; }
.team-card[open] .team-card__toggle-open { display: none; }
.team-card[open] .team-card__toggle-close { display: inline; }
.team-card__bio { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--border); font-size: .8125rem; line-height: 1.65; color: var(--muted-foreground); }
.team-card__bio p + p { margin-top: .75rem; }
.team-card .arrow-link { margin-top: 1rem; font-size: .8125rem; }

/* ---- Our Journey: vertical timeline -------------------------------------
   A center rail with milestones stacked one per row (alternating sides on
   wide screens), each fading in as it scrolls into view via .kg-reveal —
   the "runs with your scroll" feel without a pinned-height scroll-jack. */
.timeline { position: relative; list-style: none; padding: 0; margin: 0; }
.timeline::before {
  content: ""; position: absolute; top: .4rem; bottom: .4rem; left: 1.05rem; width: 2px; background: var(--border);
}
@media (min-width: 860px) { .timeline::before { left: 50%; transform: translateX(-1px); } }
.timeline__item { position: relative; padding-left: 2.75rem; margin-bottom: 2rem; }
.timeline__item:last-child { margin-bottom: 0; }
@media (min-width: 860px) { .timeline__item { padding-left: 0; width: 50%; margin-bottom: 2.5rem; } }
@media (min-width: 860px) { .timeline__item:nth-child(odd) { padding-right: calc(2.75rem + 1px); text-align: right; margin-left: 0; } }
@media (min-width: 860px) { .timeline__item:nth-child(even) { padding-left: calc(2.75rem + 1px); margin-left: 50%; } }
.timeline__year {
  position: absolute; top: 0; left: 0; display: grid; place-items: center;
  width: 2.25rem; height: 2.25rem; border-radius: 999px; background: var(--brand); color: var(--brand-foreground);
  font-size: .6875rem; font-weight: 800; letter-spacing: -.02em; z-index: 1;
}
@media (min-width: 860px) { .timeline__item:nth-child(odd) .timeline__year { left: auto; right: -1.125rem; } }
@media (min-width: 860px) { .timeline__item:nth-child(even) .timeline__year { left: -1.125rem; } }
.timeline__card { background: var(--background); border: 1px solid var(--border); border-radius: 10px; padding: 1.125rem 1.25rem; }
.timeline__title { font-size: 1rem; font-weight: 700; line-height: 1.3; }
.timeline__desc { margin-top: .4rem; font-size: .8125rem; line-height: 1.6; color: var(--muted-foreground); }

/* ---- Awards: certificate-style award cards + patent cards --------------- */
.award-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 640px) { .award-grid { grid-template-columns: repeat(2, 1fr); } }
.award-card {
  display: flex; gap: 1.25rem; background: var(--background); border: 1px solid var(--border);
  border-radius: 12px; padding: 1.25rem; transition: border-color .3s, transform .3s, box-shadow .3s;
}
.award-card:hover { transform: translateY(-4px); border-color: color-mix(in oklab, var(--brand) 35%, var(--border)); box-shadow: 0 24px 48px -30px var(--shadow-color); }
.award-card__media {
  flex-shrink: 0; width: 4.75rem; height: 4.75rem; border-radius: 8px; overflow: hidden;
  background: var(--neutral-soft); display: grid; place-items: center; border: 1px solid var(--border);
}
.award-card__media img { width: 100%; height: 100%; object-fit: cover; }
.award-card__media-fallback { color: var(--brand); }
.award-card__media-fallback .icon-tile__svg { width: 1.75rem; height: 1.75rem; }
.award-card__year {
  display: inline-block; padding: .2rem .55rem; background: var(--brand-tint); color: var(--brand);
  font-size: .6875rem; font-weight: 800; letter-spacing: .03em; border-radius: 4px;
}
.award-card__title { margin-top: .625rem; font-size: 1rem; font-weight: 700; line-height: 1.35; }
.award-card__desc { margin-top: .4rem; font-size: .8125rem; line-height: 1.6; color: var(--muted-foreground); }

.patent-grid { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
@media (min-width: 768px) { .patent-grid { grid-template-columns: 1fr 1fr; } }
.patent-card { display: flex; gap: 1rem; background: var(--background); padding: 1.5rem; }
.patent-card__seal { flex-shrink: 0; color: var(--brand); opacity: .8; }
.patent-card__seal .icon-tile__svg { width: 1.5rem; height: 1.5rem; }
.patent-card__ref { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .75rem; font-weight: 700; letter-spacing: .01em; color: var(--brand); }
.patent-card__desc { margin-top: .4rem; font-size: .8125rem; line-height: 1.6; color: var(--muted-foreground); }

/* ---- Sustainability: hero badge, ESG pillars, SDG list, framework ------- */
.sustainability-hero__badge { margin-top: 1.75rem; max-width: 11rem; height: auto; border-radius: 6px; }

.pillar-grid { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
@media (min-width: 768px) { .pillar-grid { grid-template-columns: repeat(3, 1fr); } }
.pillar-card { background: var(--background); padding: 1.75rem; }
.pillar-card__letter {
  display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 999px;
  background: var(--brand-tint); color: var(--brand); font-weight: 800; font-size: 1.0625rem;
}
.pillar-card__title { margin-top: 1rem; font-size: 1.0625rem; font-weight: 700; }
.pillar-card__body { margin-top: .625rem; font-size: .8125rem; line-height: 1.65; color: var(--muted-foreground); }

.sdg-grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: start; }
@media (min-width: 900px) { .sdg-grid { grid-template-columns: 1fr 1fr; } }
.sdg-grid__image { margin-top: 1.5rem; width: 100%; max-width: 22rem; height: auto; border-radius: 10px; border: 1px solid var(--border); }
.sdg-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.sdg-list__item { display: flex; align-items: center; gap: .9rem; padding: .8rem 1rem; background: var(--background); font-size: .8125rem; color: var(--ink-foreground); transition: background-color .25s; }
.sdg-list__item:hover { background: var(--brand-tint); }
.sdg-list__num {
  flex-shrink: 0; display: grid; place-items: center; width: 1.625rem; height: 1.625rem; border-radius: 999px;
  background: var(--brand); color: var(--brand-foreground); font-size: .6875rem; font-weight: 800;
}

.framework-points { margin-top: 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
.framework-points__item { display: flex; gap: .9rem; align-items: flex-start; }
.framework-points__letter { flex-shrink: 0; font-weight: 800; color: var(--brand); font-size: .9375rem; line-height: 1.6; }
.framework-points__item p { font-size: .8125rem; line-height: 1.6; color: var(--muted-foreground); }

.sustainability-closing { text-align: center; max-width: 42rem; margin-inline: auto; }
.sustainability-closing__title { font-size: 1.25rem; font-weight: 700; }
.sustainability-closing__body { margin-top: .75rem; font-size: .875rem; line-height: 1.6; color: var(--muted-foreground); }

/* ==========================================================================
   Custom Services (/custom-services/) — the page sells bespoke, built-to-
   spec work, so the hero reads as a live process (an assembly hub with
   orbiting service icons + a cycling headline word) rather than a static
   photo. Same pivot-rotate technique family as the Partners globe and the
   Product/Partner aura rings, but its own components — the hex-ornament/
   aura frame itself stays reserved for Product Category & Partner pages.
   ========================================================================== */

.cs-hero__grid { align-items: center; }

.cs-hero__title { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem .55rem; }

.cs-cycle { position: relative; display: inline-block; min-height: 1.15em; vertical-align: top; }
.cs-cycle__word {
  position: absolute; left: 0; top: 0; white-space: nowrap; color: var(--brand);
  opacity: 0; transform: translateY(.3em);
  transition: opacity .5s ease, transform .5s ease;
}
.cs-cycle__word.is-active { position: relative; opacity: 1; transform: none; }

.cs-hero__visual {
  position: relative; height: 22rem; display: flex; align-items: center; justify-content: center;
}
@media (min-width: 640px) { .cs-hero__visual { height: 26rem; } }

.cs-hub {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  z-index: 3; width: 5rem; height: 5rem; border-radius: 50%;
  background: var(--brand); color: var(--brand-foreground);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 20px 40px -16px color-mix(in oklab, var(--brand) 55%, transparent);
}
.cs-hub__icon .icon-tile__svg { width: 1.9rem; height: 1.9rem; }
.cs-hub__ring {
  position: absolute; inset: -14%; border-radius: 50%;
  border: 1.5px solid color-mix(in oklab, var(--brand) 55%, transparent);
  opacity: 0; animation: cs-hub-pulse 4.2s cubic-bezier(.25,.65,.35,1) infinite;
}
.cs-hub__ring--2 { animation-delay: 1.6s; }
@keyframes cs-hub-pulse {
  0%   { transform: scale(.9); opacity: 0; }
  16%  { opacity: .55; }
  100% { transform: scale(1.9); opacity: 0; }
}

.cs-orbit { position: absolute; top: 50%; left: 50%; border-radius: 50%; animation: cs-orbit-spin linear infinite; }
.cs-orbit--1 { width: 60%; height: 60%; margin: -30% 0 0 -30%; animation-duration: 17s; }
.cs-orbit--2 { width: 84%; height: 84%; margin: -42% 0 0 -42%; animation-duration: 25s; animation-direction: reverse; }
.cs-orbit--3 { width: 100%; height: 100%; margin: -50% 0 0 -50%; animation-duration: 31s; animation-delay: -9s; }
.cs-orbit--4 { width: 72%; height: 72%; margin: -36% 0 0 -36%; animation-duration: 21s; animation-direction: reverse; animation-delay: -5s; }
@keyframes cs-orbit-spin { to { transform: rotate(360deg); } }

.cs-orbit__icon {
  position: absolute; top: 0; left: 50%; width: 3.1rem; height: 3.1rem; margin: -1.55rem 0 0 -1.55rem;
  border-radius: 50%; background: var(--background);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 12px 26px -10px var(--shadow-color), 0 0 0 1.5px var(--border);
}
.cs-orbit__icon-inner {
  display: flex; align-items: center; justify-content: center; color: var(--brand);
  animation: cs-orbit-counter linear infinite;
}
.cs-orbit__icon-inner .icon-tile__svg { width: 1.35rem; height: 1.35rem; }
@keyframes cs-orbit-counter { to { transform: rotate(-360deg); } }
/* Orbits 2 and 4's pivots spin in reverse, so their icons need the
   opposite counter-spin (a separate 0→+360 keyframe, not the reverse
   playback direction of the same one) or the "stay upright" cancellation
   would double back on itself instead. Duration/delay always match the
   pivot exactly so the cancellation stays exact throughout the loop. */
@keyframes cs-orbit-counter-rev { to { transform: rotate(360deg); } }
.cs-orbit--1 .cs-orbit__icon-inner { animation-duration: 17s; }
.cs-orbit--2 .cs-orbit__icon-inner { animation-name: cs-orbit-counter-rev; animation-duration: 25s; }
.cs-orbit--3 .cs-orbit__icon-inner { animation-duration: 31s; animation-delay: -9s; }
.cs-orbit--4 .cs-orbit__icon-inner { animation-name: cs-orbit-counter-rev; animation-duration: 21s; animation-delay: -5s; }

@media (prefers-reduced-motion: reduce) {
  .cs-hub__ring, .cs-orbit, .cs-orbit__icon-inner { animation: none !important; }
}

/* ---- Animated services hub (orbit_hub) ----------------------------------
   A real alternative to a flat "services offered" overview image: a
   pulsing center card (real copy) with 6 real, linked services arranged
   in a hexagon around it. Unlike .cs-orbit above, each node here carries
   a visible text label, so the nodes themselves stay in fixed, always-
   readable positions — the motion lives in the decorative rotating rings
   behind them (which carry no content, so spinning them never hurts
   legibility) plus a hub pulse reusing the exact .cs-hub__ring keyframe. */
.orbit-hub { position: relative; height: 30rem; max-width: 34rem; margin: 3rem auto 0; }
@media (min-width: 640px) { .orbit-hub { height: 34rem; } }
@media (min-width: 1024px) { .orbit-hub { height: 38rem; max-width: 38rem; } }
/* The section that hosts the orbit hub is full-width but the hub itself is
   a fixed-size circle, which left a lot of visually "empty" surrounding
   area. A faint grid-line texture (the same language as the page hero) plus
   a soft brand-tinted glow behind the hub fill that space as designed
   background rather than leaving it flat and blank. */
.partner-orbit-section { position: relative; overflow: hidden; }
.partner-orbit-section__glow {
  position: absolute; z-index: 0; pointer-events: none;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(70rem, 140vw); height: min(70rem, 140vw); border-radius: 50%;
  background: radial-gradient(circle, color-mix(in oklab, var(--brand) 10%, transparent) 0%, transparent 62%);
}
.partner-orbit-section .kg-container { position: relative; z-index: 1; }
.orbit-hub__rings { position: absolute; inset: 8%; border-radius: 50%; pointer-events: none; }
.orbit-hub__ring { position: absolute; inset: 0; border-radius: 50%; border: 1px dashed color-mix(in oklab, var(--brand) 30%, var(--border)); }
.orbit-hub__ring--spin { animation: orbit-hub-spin 60s linear infinite; }
.orbit-hub__ring--spin-rev { inset: 8%; animation: orbit-hub-spin 44s linear infinite reverse; border-style: solid; opacity: .5; }
@keyframes orbit-hub-spin { to { transform: rotate(360deg); } }

.orbit-hub__center {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  z-index: 3; width: 9.5rem; height: 9.5rem; border-radius: 50%;
  background: var(--brand); color: var(--brand-foreground);
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  padding: 1rem; box-shadow: 0 24px 48px -18px color-mix(in oklab, var(--brand) 55%, transparent);
}
@media (min-width: 640px) { .orbit-hub__center { width: 11.5rem; height: 11.5rem; padding: 1.25rem; } }
.orbit-hub__center-title { font-size: .8125rem; font-weight: 800; line-height: 1.25; }
.orbit-hub__center-body { margin-top: .4rem; font-size: .625rem; line-height: 1.4; opacity: .85; }
.orbit-hub__center-ring {
  position: absolute; inset: -12%; border-radius: 50%;
  border: 1.5px solid color-mix(in oklab, var(--brand) 55%, transparent);
  opacity: 0; animation: cs-hub-pulse 4.2s cubic-bezier(.25,.65,.35,1) infinite;
}
.orbit-hub__center-ring--2 { animation-delay: 1.6s; }

.orbit-hub__node {
  position: absolute; width: 8.5rem; margin-left: -4.25rem; margin-top: -2.75rem;
  display: flex; flex-direction: column; align-items: center; gap: .5rem; text-align: center;
  text-decoration: none; z-index: 2;
}
.orbit-hub__node-icon {
  display: grid; place-items: center; width: 3.1rem; height: 3.1rem; border-radius: 50%;
  background: var(--background); color: var(--brand);
  box-shadow: 0 12px 26px -10px var(--shadow-color), 0 0 0 1.5px var(--border);
  transition: transform .3s, box-shadow .3s, background-color .3s, color .3s;
}
.orbit-hub__node-icon .icon-tile__svg { width: 1.4rem; height: 1.4rem; }
.orbit-hub__node-label { font-size: .75rem; font-weight: 700; line-height: 1.3; color: var(--ink-foreground); }
/* Microcopy that only appears on hover/focus of a real, linked service —
   confirms the node is clickable and where it goes, without permanently
   adding a second line of text to all six always-visible labels. */
.orbit-hub__node-cta {
  font-size: .6875rem; font-weight: 700; color: var(--brand);
  opacity: 0; transform: translateY(-2px); transition: opacity .25s, transform .25s;
}
.orbit-hub__node:hover .orbit-hub__node-icon,
.orbit-hub__node:focus-visible .orbit-hub__node-icon {
  transform: translateY(-3px) scale(1.06); background: var(--brand); color: var(--brand-foreground);
  box-shadow: 0 16px 32px -12px color-mix(in oklab, var(--brand) 55%, transparent);
}
.orbit-hub__node:hover .orbit-hub__node-cta,
.orbit-hub__node:focus-visible .orbit-hub__node-cta { opacity: 1; transform: translateY(0); }
/* Hexagon positions (top, upper-right, lower-right, bottom, lower-left,
   upper-left), computed at a 42% radius from center. */
.orbit-hub__node--1 { top: 6%;  left: 50%; }
.orbit-hub__node--2 { top: 27%; left: 88%; }
.orbit-hub__node--3 { top: 71%; left: 88%; }
.orbit-hub__node--4 { top: 94%; left: 50%; }
.orbit-hub__node--5 { top: 71%; left: 12%; }
.orbit-hub__node--6 { top: 27%; left: 12%; }

@media (prefers-reduced-motion: reduce) {
  .orbit-hub__ring--spin, .orbit-hub__ring--spin-rev, .orbit-hub__center-ring { animation: none !important; }
}

/* ---- Service spotlight icon badge --------------------------------------- */
.cs-service__icon-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem; border-radius: 10px; margin-bottom: 1rem;
  background: var(--brand-tint); color: var(--brand);
}
.cs-service__icon-badge .icon-tile__svg { width: 1.4rem; height: 1.4rem; }

/* ---- Partner note strip -------------------------------------------------- */
.cs-partner-note {
  max-width: 42rem; margin-inline: auto; text-align: center;
  font-size: .8125rem; line-height: 1.6; color: var(--muted-foreground);
}

/* =========================================================================
 * Solutions pages (template-solution.php) — Animal Health Solutions, Cell
 * Culture, Vaccines, Biopharma/Drug Development, Molecular Biology, Cell
 * and Gene Therapy, Advanced/Nano-Materials.
 *
 * Hero: a real Unsplash photo (per page) with a bespoke small animated
 * "concept" layered over it, tied to that page's own real subject matter —
 * deliberately its own visual system, not the Product/Partner hex-ornament
 * + aura-ring frame (.page-hero__ornament / .page-hero__aura / .aura-ring /
 * .aura-orbit stay reserved for those). Every concept is CSS/SVG only and
 * purely decorative (aria-hidden); every animated piece gets a matching
 * `animation: none` override under prefers-reduced-motion below.
 * ====================================================================== */

.sol-hero__kicker {
  margin-top: .5rem; font-size: 1.0625rem; font-weight: 600;
  color: color-mix(in oklab, var(--ink-foreground) 68%, transparent);
}

.sol-hero__visual {
  position: relative; height: 20rem; border-radius: 18px; overflow: hidden;
  border: 1px solid var(--border); box-shadow: 0 32px 56px -32px var(--shadow-color);
  background: var(--ink);
}
@media (min-width: 640px) { .sol-hero__visual { height: 24rem; } }

.sol-hero__photo {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: saturate(1.05);
}
.sol-hero__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, color-mix(in oklab, var(--ink) 15%, transparent) 0%, color-mix(in oklab, var(--ink) 72%, transparent) 100%);
}

.sol-concept { position: absolute; inset: 0; z-index: 2; }

/* ---- pulse: Animal Health — ECG heartbeat sweep ------------------------- */
.sol-concept--pulse {
  top: auto; bottom: 14%; height: 34%; width: 100%;
  filter: drop-shadow(0 0 6px color-mix(in oklab, var(--brand) 70%, transparent));
}
.sol-pulse__trace {
  fill: none; stroke: var(--brand); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 620; stroke-dashoffset: 620;
  animation: sol-pulse-draw 4.5s linear infinite;
}
.sol-pulse__dot {
  fill: var(--brand);
  offset-path: none;
  animation: sol-pulse-dot 4.5s linear infinite;
}
@keyframes sol-pulse-draw {
  0%   { stroke-dashoffset: 620; }
  60%  { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -40; }
}
@keyframes sol-pulse-dot {
  0%   { transform: translateX(0); opacity: 0; }
  4%   { opacity: 1; }
  96%  { opacity: 1; }
  100% { transform: translateX(300px); opacity: 0; }
}

/* ---- divide: Cell Culture — a cell splitting, looping -------------------- */
.sol-concept--divide { display: flex; align-items: center; justify-content: center; }
.sol-divide__cell {
  position: absolute; width: 4.5rem; height: 4.5rem; border-radius: 50%;
  background: color-mix(in oklab, var(--brand) 24%, transparent);
  border: 1.5px solid color-mix(in oklab, var(--brand) 70%, transparent);
  display: flex; align-items: center; justify-content: center;
}
.sol-divide__nucleus {
  width: 1.1rem; height: 1.1rem; border-radius: 50%; background: var(--brand);
  box-shadow: 0 0 12px color-mix(in oklab, var(--brand) 65%, transparent);
}
.sol-divide__cell--a { animation: sol-divide-a 5s ease-in-out infinite; }
.sol-divide__cell--b { animation: sol-divide-b 5s ease-in-out infinite; }
@keyframes sol-divide-a {
  0%, 12%  { transform: translateX(0) scale(1); opacity: 1; }
  55%      { transform: translateX(-2.6rem) scale(.92); opacity: 1; }
  92%,100% { transform: translateX(-2.6rem) scale(.92); opacity: 1; }
}
@keyframes sol-divide-b {
  0%, 12%  { transform: translateX(0) scale(.01); opacity: 0; }
  20%      { opacity: 1; }
  55%      { transform: translateX(2.6rem) scale(.92); opacity: 1; }
  92%,100% { transform: translateX(2.6rem) scale(.92); opacity: 1; }
}

/* ---- neutralize: Vaccines — antibodies orbiting a fading virus ---------- */
.sol-concept--neutralize { display: flex; align-items: center; justify-content: center; }
.sol-neut__virus {
  position: relative; z-index: 1; display: flex; align-items: center; justify-content: center;
  width: 3.6rem; height: 3.6rem; border-radius: 50%;
  background: color-mix(in oklab, var(--ink) 40%, var(--brand) 8%); color: var(--brand-foreground);
  animation: sol-neut-fade 6s ease-in-out infinite;
}
.sol-neut__virus .icon-tile__svg { width: 1.9rem; height: 1.9rem; }
@keyframes sol-neut-fade {
  0%, 55%  { opacity: 1; transform: scale(1); }
  85%,100% { opacity: .35; transform: scale(.72); }
}
.sol-neut__orbit {
  position: absolute; top: 50%; left: 50%; border-radius: 50%;
  animation: kg-orbit-spin linear infinite;
}
.sol-neut__orbit--1 { width: 8.5rem; height: 8.5rem; margin: -4.25rem 0 0 -4.25rem; animation-duration: 14s; }
.sol-neut__orbit--2 { width: 11rem; height: 11rem; margin: -5.5rem 0 0 -5.5rem; animation-duration: 20s; animation-direction: reverse; }
.sol-neut__orbit--3 { width: 6.5rem; height: 6.5rem; margin: -3.25rem 0 0 -3.25rem; animation-duration: 10s; animation-delay: -3s; }
.sol-neut__ab {
  position: absolute; top: 0; left: 50%; width: 2.1rem; height: 2.1rem; margin: -1.05rem 0 0 -1.05rem;
  border-radius: 50%; background: var(--background); color: var(--brand);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 18px -8px rgba(0,0,0,.45);
}
.sol-neut__ab .icon-tile__svg { width: 1.1rem; height: 1.1rem; }
.sol-neut__ab-inner { display: flex; animation: kg-orbit-spin linear infinite reverse; }
.sol-neut__orbit--1 .sol-neut__ab-inner { animation-duration: 14s; }
.sol-neut__orbit--2 .sol-neut__ab-inner { animation-duration: 20s; animation-direction: normal; }
.sol-neut__orbit--3 .sol-neut__ab-inner { animation-duration: 10s; animation-delay: -3s; }

/* ---- network: Biopharma — pulsing molecule / node graph ----------------- */
.sol-concept--network { display: flex; align-items: center; justify-content: center; }
.sol-net__line { stroke: color-mix(in oklab, var(--brand) 55%, transparent); stroke-width: 1.2; }
.sol-net__node { fill: var(--brand); animation: sol-net-pulse 2.6s ease-in-out infinite; }
.sol-net__node--1 { animation-delay: 0s; }
.sol-net__node--2 { animation-delay: .3s; }
.sol-net__node--3 { animation-delay: .6s; }
.sol-net__node--4 { animation-delay: .9s; }
.sol-net__node--5 { animation-delay: 1.2s; }
@keyframes sol-net-pulse {
  0%, 100% { opacity: .55; transform: scale(1); }
  50%      { opacity: 1; transform: scale(1.35); }
}

/* ---- helix: Molecular Biology — a rotating DNA double helix ------------- */
.sol-concept--helix { display: flex; align-items: center; justify-content: center; perspective: 600px; }
.sol-helix {
  position: relative; width: 7rem; height: 12rem;
  transform-style: preserve-3d; animation: sol-helix-rotate 9s linear infinite;
}
.sol-helix__rung {
  position: absolute; left: 50%; top: calc(var(--i) * 16.6%);
  width: 6.5rem; height: 2px; margin-left: -3.25rem;
  background: linear-gradient(90deg, var(--brand), color-mix(in oklab, var(--brand) 40%, transparent), var(--brand));
  transform: rotateX(calc(var(--i) * 51.4deg));
}
.sol-helix__rung::before, .sol-helix__rung::after {
  content: ""; position: absolute; top: 50%; width: .55rem; height: .55rem; margin-top: -.275rem;
  border-radius: 50%; background: var(--brand);
}
.sol-helix__rung::before { left: -.2rem; }
.sol-helix__rung::after  { right: -.2rem; }
@keyframes sol-helix-rotate { to { transform: rotateY(360deg); } }

/* ---- crispr: Cell & Gene Therapy — DNA strand + glowing edit site ------- */
.sol-concept--crispr { display: flex; align-items: center; justify-content: center; }
.sol-crispr__strand { display: flex; flex-direction: column; align-items: center; gap: .6rem; }
.sol-crispr__rung {
  width: 5.5rem; height: 3px; border-radius: 2px;
  background: color-mix(in oklab, var(--brand) 55%, transparent);
}
.sol-crispr__rung:nth-child(odd) { transform: scaleX(.72); }
.sol-crispr__cut {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 2.6rem; height: 2.6rem; border-radius: 50%;
  background: var(--brand); color: var(--brand-foreground);
  animation: sol-crispr-glow 2.4s ease-in-out infinite;
}
.sol-crispr__scissors .icon-tile__svg { width: 1.3rem; height: 1.3rem; }
@keyframes sol-crispr-glow {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--brand) 55%, transparent); transform: scale(1); }
  50%      { box-shadow: 0 0 0 12px color-mix(in oklab, var(--brand) 0%, transparent); transform: scale(1.08); }
}

/* ---- lattice: Advanced Nano-Materials — shimmering hex lattice ---------- */
.sol-concept--lattice { }
.sol-lattice__hex {
  position: absolute; left: var(--x); top: var(--y); width: 2.4rem; height: 2.4rem;
  clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0% 50%);
  background: color-mix(in oklab, var(--brand) 30%, transparent);
  border: 1px solid color-mix(in oklab, var(--brand) 55%, transparent);
  animation: sol-lattice-shimmer 3.6s ease-in-out infinite;
  animation-delay: calc(var(--i) * .18s);
}
@keyframes sol-lattice-shimmer {
  0%, 100% { opacity: .28; transform: scale(.9); }
  50%      { opacity: .85; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .sol-pulse__trace, .sol-pulse__dot,
  .sol-divide__cell--a, .sol-divide__cell--b,
  .sol-neut__virus, .sol-neut__orbit, .sol-neut__ab-inner,
  .sol-net__node,
  .sol-helix,
  .sol-crispr__cut,
  .sol-lattice__hex {
    animation: none !important;
  }
}

/* ---- Category grid -------------------------------------------------------- */
.sol-cat-grid {
  margin-top: 1.5rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr)); gap: 1rem;
}
.sol-cat {
  display: flex; flex-direction: column; gap: .35rem; padding: 1.1rem 1.15rem; height: 100%;
  border-radius: 12px; border: 1px solid var(--border); background: var(--background);
  text-decoration: none; transition: border-color .25s, box-shadow .25s, transform .25s;
}
a.sol-cat:hover, a.sol-cat:focus-visible {
  border-color: color-mix(in oklab, var(--brand) 45%, var(--border));
  box-shadow: 0 16px 32px -20px var(--shadow-color); transform: translateY(-2px);
}
.sol-cat__icon {
  display: inline-flex; align-items: center; justify-content: center; width: 2.15rem; height: 2.15rem;
  border-radius: 8px; background: var(--brand-tint); color: var(--brand); margin-bottom: .25rem;
}
.sol-cat__icon .icon-tile__svg { width: 1.15rem; height: 1.15rem; }
.sol-cat__title { display: flex; align-items: baseline; gap: .35rem; font-size: .9375rem; font-weight: 700; color: var(--ink-foreground); }
.sol-cat__arrow { font-size: .75em; color: var(--brand); opacity: .8; }
.sol-cat__body { font-size: .8125rem; line-height: 1.55; color: var(--muted-foreground); }

/* ---- Core verticals grid (Animal Health) — checklist cards ---------------- */
.sol-vertical-grid { margin-top: 1.5rem; display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 768px) { .sol-vertical-grid { grid-template-columns: repeat(3, 1fr); } }
.sol-vertical-card {
  display: flex; flex-direction: column; gap: .9rem; padding: 1.75rem;
  border-radius: var(--radius-xl); border: 1px solid var(--border); background: var(--background);
  transition: border-color .25s, box-shadow .25s, transform .25s;
}
.sol-vertical-card:hover {
  border-color: color-mix(in oklab, var(--brand) 40%, var(--border));
  box-shadow: 0 24px 44px -28px var(--shadow-color); transform: translateY(-2px);
}
.sol-vertical-card__head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.sol-vertical-card__icon {
  display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem;
  flex-shrink: 0; border-radius: 10px; background: var(--brand-tint); color: var(--brand);
}
.sol-vertical-card__icon .icon-tile__svg { width: 1.4rem; height: 1.4rem; }
.sol-vertical-card__tag {
  padding: .3rem .7rem; border-radius: 999px; background: var(--neutral-soft);
  font-size: .6875rem; font-weight: 700; letter-spacing: .04em; color: var(--muted-foreground);
}
.sol-vertical-card__title { font-size: 1.125rem; font-weight: 700; color: var(--ink-foreground); }
.sol-vertical-card__list { display: flex; flex-direction: column; gap: .55rem; }
.sol-vertical-card__list li {
  display: flex; align-items: flex-start; gap: .55rem;
  font-size: .875rem; line-height: 1.5; color: var(--muted-foreground);
}
.sol-vertical-card__check {
  flex-shrink: 0; margin-top: .1rem; display: inline-grid; place-items: center;
  width: 1.15rem; height: 1.15rem; border-radius: 4px;
  background: color-mix(in oklab, var(--brand) 16%, transparent); color: var(--brand);
  font-size: .6875rem; font-weight: 700;
}
.sol-vertical-card__desc { font-size: .875rem; line-height: 1.6; color: var(--muted-foreground); }
.sol-vertical-card .arrow-link { margin-top: .25rem; }

/* ---- Bento featured variant (4+ icon tiles) -----------------------------
   A more distinctive alternative to a uniform grid or a single rotating
   card: the first real item gets an oversized "hero" spot (its own tint,
   bigger type, spans 2 columns), the rest fall into a normal grid beside
   it — real content driving the asymmetry, not a carousel gimmick. */
.sol-vertical-grid--bento { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 768px) { .sol-vertical-grid--bento { grid-template-columns: repeat(4, 1fr); } }
.sol-vertical-card--featured {
  grid-column: span 2; padding: 2.25rem;
  background: linear-gradient(155deg, var(--brand-tint), var(--background) 65%);
  border-color: color-mix(in oklab, var(--brand) 30%, var(--border));
}
@media (min-width: 768px) { .sol-vertical-card--featured { grid-row: span 2; } }
.sol-vertical-card--featured .sol-vertical-card__icon { width: 3.5rem; height: 3.5rem; background: var(--brand); color: var(--brand-foreground); }
.sol-vertical-card--featured .sol-vertical-card__icon .icon-tile__svg { width: 1.75rem; height: 1.75rem; }
.sol-vertical-card--featured .sol-vertical-card__title { font-size: 1.375rem; }
.sol-vertical-card--featured .sol-vertical-card__desc { font-size: .9375rem; }
.sol-vertical-grid--bento .sol-vertical-card:not(.sol-vertical-card--featured) { padding: 1.4rem; gap: .65rem; }
.sol-vertical-grid--bento .sol-vertical-card:not(.sol-vertical-card--featured) .sol-vertical-card__title { font-size: .9375rem; }
.sol-vertical-grid--bento .sol-vertical-card:not(.sol-vertical-card--featured) .sol-vertical-card__desc { font-size: .8125rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* =========================================================================
 * Design-fidelity pass additions (Animal Health Solutions + Cell Culture) —
 * hero badge/tabs/live-badge/chips, stat band, numbered "why choose" cards,
 * workflow steps, photo-topped category cards, "who we serve" cards, and
 * the closing dark CTA card. Every class below is additive to the .sol-*
 * system above; nothing here is reused by the .page-hero__aura hex-frame
 * (Product Category / Partner pages only).
 * ====================================================================== */

/* ---- Hero badge (replaces the plain kg-eyebrow when set) ----------------- */
.sol-hero__badge {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .4rem .85rem; border-radius: 999px;
  border: 1px solid var(--border); background: var(--brand-tint);
  font-size: .75rem; font-weight: 700; letter-spacing: .02em; color: var(--brand);
}
.sol-hero__badge-dot {
  width: .4rem; height: .4rem; border-radius: 50%; background: var(--brand);
  animation: sol-live-pulse 1.8s ease-in-out infinite;
}

/* ---- Hero pill-tabs (replaces the two-button hero actions when set) ------ */
.sol-hero__tabs { margin-top: 1.75rem; display: flex; flex-wrap: wrap; gap: .6rem; }
.sol-hero__tab {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .6rem 1.05rem; border-radius: 999px;
  border: 1px solid var(--border); background: var(--background);
  font-size: .8125rem; font-weight: 600; color: var(--muted-foreground);
  transition: border-color .25s, color .25s, background-color .25s;
}
.sol-hero__tab:hover { border-color: color-mix(in oklab, var(--brand) 40%, var(--border)); color: var(--ink-foreground); }
.sol-hero__tab.is-active { border-color: var(--brand); background: var(--brand); color: var(--brand-foreground); }

/* ---- Hero visual: live badge + chip row over the photo -------------------- */
.sol-hero__live {
  position: absolute; top: 1.1rem; left: 1.1rem; z-index: 3;
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .4rem .8rem; border-radius: 999px;
  background: color-mix(in oklab, var(--ink) 88%, transparent);
  font-size: .6875rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-foreground);
}
.sol-hero__live-dot {
  width: .4rem; height: .4rem; border-radius: 50%; background: var(--brand);
  animation: sol-live-pulse 1.6s ease-in-out infinite;
}
.sol-hero__chips {
  position: absolute; left: 1.1rem; right: 1.1rem; bottom: 1.1rem; z-index: 3;
  display: flex; flex-wrap: wrap; gap: .5rem;
}
.sol-hero__chip {
  padding: .4rem .8rem; border-radius: 999px;
  background: color-mix(in oklab, var(--ink) 88%, transparent);
  font-size: .75rem; font-weight: 600; color: var(--ink-foreground);
}
@keyframes sol-live-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .45; transform: scale(1.3); }
}
@media (prefers-reduced-motion: reduce) {
  .sol-hero__badge-dot, .sol-hero__live-dot { animation: none !important; }
}

/* ---- Text-only hero (Cell Culture) — single column, no visual column ----- */
.sol-hero__grid--text-only { grid-template-columns: 1fr; }
.sol-hero__grid--text-only .page-hero__body { max-width: 46rem; }

/* ---- Stat band under the hero --------------------------------------------- */
.sol-stat-grid {
  margin-top: 2.5rem; padding-top: 2.25rem; border-top: 1px solid var(--border);
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem 1rem;
}
@media (min-width: 768px) { .sol-stat-grid { grid-template-columns: repeat(4, 1fr); gap: 1.5rem; } }
.sol-stat__value { font-size: 1.75rem; font-weight: 800; letter-spacing: -0.01em; color: var(--brand); }
@media (min-width: 640px) { .sol-stat__value { font-size: 2rem; } }
.sol-stat__label { margin-top: .3rem; font-size: .8125rem; line-height: 1.4; color: var(--muted-foreground); }

/* ---- Shared section intro paragraph (why / verticals / workflow) --------- */
.sol-section-intro { margin-top: 1rem; max-width: 42rem; font-size: 1rem; line-height: 1.65; color: var(--muted-foreground); }

/* ---- Why choose — numbered cards ------------------------------------------ */
.sol-why-list { margin-top: 2rem; display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 768px) { .sol-why-list { grid-template-columns: repeat(2, 1fr); } }
.sol-why-card {
  display: flex; gap: 1.1rem; padding: 1.5rem;
  border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--background);
  transition: border-color .25s, box-shadow .25s;
}
.sol-why-card:hover { border-color: color-mix(in oklab, var(--brand) 35%, var(--border)); box-shadow: 0 20px 36px -26px var(--shadow-color); }
.sol-why-card__num {
  flex-shrink: 0; font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em;
  color: color-mix(in oklab, var(--brand) 55%, transparent);
}
.sol-why-card__title { font-size: 1.0625rem; font-weight: 700; color: var(--ink-foreground); }
.sol-why-card__desc { margin-top: .4rem; font-size: .875rem; line-height: 1.6; color: var(--muted-foreground); }

/* ---- Workflow — numbered process grid (Cell Culture) ---------------------- */
.sol-workflow { display: flex; flex-direction: column; gap: 2.5rem; }
.sol-workflow__intro { max-width: 34rem; }
.sol-workflow__intro .btn { margin-top: 1.5rem; }
.sol-workflow__grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 640px) { .sol-workflow__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .sol-workflow__grid { grid-template-columns: repeat(4, 1fr); } }
.sol-workflow__step {
  padding: 1.5rem; border-radius: var(--radius-xl); border: 1px solid var(--border); background: var(--background);
  transition: border-color .25s, box-shadow .25s, transform .25s;
}
.sol-workflow__step:hover {
  border-color: color-mix(in oklab, var(--brand) 40%, var(--border));
  box-shadow: 0 24px 44px -28px var(--shadow-color); transform: translateY(-2px);
}
.sol-workflow__step-head { display: flex; align-items: center; justify-content: space-between; }
.sol-workflow__step-num { font-size: 1.375rem; font-weight: 800; color: color-mix(in oklab, var(--brand) 45%, transparent); }
.sol-workflow__step-icon {
  display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem;
  border-radius: 8px; background: var(--brand-tint); color: var(--brand);
}
.sol-workflow__step-icon .icon-tile__svg { width: 1.15rem; height: 1.15rem; }
.sol-workflow__step-title { margin-top: 1rem; font-size: 1rem; font-weight: 700; color: var(--ink-foreground); }
.sol-workflow__step-desc { margin-top: .4rem; font-size: .8125rem; line-height: 1.55; color: var(--muted-foreground); }

/* ---- Category grid — photo-topped cards (Cell Culture) -------------------- */
.sol-cat-grid--media { grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }
.sol-cat-card {
  display: flex; flex-direction: column; height: 100%; overflow: hidden;
  border-radius: var(--radius-xl); border: 1px solid var(--border); background: var(--background);
  text-decoration: none; transition: border-color .25s, box-shadow .25s, transform .25s;
}
a.sol-cat-card:hover, a.sol-cat-card:focus-visible {
  border-color: color-mix(in oklab, var(--brand) 45%, var(--border));
  box-shadow: 0 24px 44px -28px var(--shadow-color); transform: translateY(-3px);
}
.sol-cat-card__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--neutral-soft); }
.sol-cat-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
a.sol-cat-card:hover .sol-cat-card__media img { transform: scale(1.06); }
.sol-cat-card__tag {
  position: absolute; top: .75rem; left: .75rem;
  padding: .3rem .65rem; border-radius: 999px;
  background: color-mix(in oklab, var(--ink) 90%, transparent);
  font-size: .6875rem; font-weight: 700; letter-spacing: .02em; color: var(--ink-foreground);
}
.sol-cat-card__body { padding: 1.15rem 1.25rem 1.35rem; display: flex; flex-direction: column; gap: .35rem; flex: 1; }
.sol-cat-card__title { font-size: .9375rem; font-weight: 700; color: var(--ink-foreground); }
.sol-cat-card__desc { font-size: .8125rem; line-height: 1.55; color: var(--muted-foreground); flex: 1; }
.sol-cat-card__explore { margin-top: .5rem; font-size: .8125rem; font-weight: 600; color: var(--brand); }

/* ---- Who we serve — icon cards --------------------------------------------- */
.sol-serve-list { margin-top: 2rem; display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 640px) { .sol-serve-list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .sol-serve-list { grid-template-columns: repeat(3, 1fr); } }
.sol-serve-card {
  display: flex; gap: 1rem; padding: 1.35rem;
  border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--neutral-soft);
}
.sol-serve-card__icon {
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem; border-radius: 9px; background: var(--brand-tint); color: var(--brand);
}
.sol-serve-card__icon .icon-tile__svg { width: 1.25rem; height: 1.25rem; }
.sol-serve-card__title { font-size: .9375rem; font-weight: 700; color: var(--ink-foreground); }
.sol-serve-card__desc { margin-top: .3rem; font-size: .8125rem; line-height: 1.55; color: var(--muted-foreground); }

/* ---- Closing dark CTA card — reuses the site's own "ink" dark-surface
 *      idiom (see .final-cta / .site-footer, both background: var(--ink)),
 *      so it matches the rest of the theme instead of introducing a new
 *      off-palette near-black. .btn-outline-light is the same button
 *      already used on --ink surfaces elsewhere (see footer.php). ---- */
.sol-cta-dark {
  position: relative; overflow: hidden; text-align: center;
  padding: 3rem 1.75rem; border-radius: var(--radius-2xl); background: var(--ink);
}
@media (min-width: 768px) { .sol-cta-dark { padding: 3.5rem 3rem; } }
.sol-cta-dark__badge {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .4rem .85rem; margin-bottom: 1.25rem; border-radius: 999px;
  background: color-mix(in oklab, var(--brand) 12%, transparent); color: var(--brand);
  font-size: .75rem; font-weight: 700;
}
.sol-cta-dark__badge .icon-tile__svg { width: 1rem; height: 1rem; }
.sol-cta-dark__title {
  max-width: 40rem; margin-inline: auto; font-size: 1.625rem; font-weight: 700; color: var(--ink-foreground);
}
@media (min-width: 640px) { .sol-cta-dark__title { font-size: 2rem; } }
.sol-cta-dark__body {
  max-width: 34rem; margin: 1.1rem auto 0; font-size: .9375rem; line-height: 1.65;
  color: color-mix(in oklab, var(--ink-foreground) 70%, transparent);
}
.sol-cta-dark__actions { margin-top: 2rem; display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; }

/* =========================================================================
 * Partner Profile pages, design-fidelity pass (AAT Bioquest first) — a real
 * photo hero reusing the .sol-hero__visual/__photo/__scrim/__live family
 * above as-is (same "photo + floating live badge" idiom as Solutions, one
 * consistent system instead of a second one), plus a small floating logo
 * chip and photo-credit caption that are new to Partner pages only. The
 * .page-hero__ornament / .aura-ring hex-frame hero stays the fallback for
 * any partner without a real photo yet (see template-partner.php).
 * ====================================================================== */
.partner-hero__logo-chip {
  position: absolute; top: 1.1rem; right: 1.1rem; z-index: 3;
  display: grid; place-items: center; width: 3.25rem; height: 3.25rem;
  padding: .55rem; border-radius: 10px; background: var(--background);
  box-shadow: 0 14px 28px -12px rgba(0,0,0,.45);
}
.partner-hero__logo-chip img { width: 100%; height: 100%; object-fit: contain; }
.partner-hero__photo-credit {
  position: absolute; bottom: .6rem; right: .85rem; z-index: 3;
  font-size: .625rem; letter-spacing: .01em;
  color: color-mix(in oklab, var(--ink-foreground) 55%, transparent);
}

/* ---- FAQ as a native <details>/<summary> accordion ------------------------
 * Same .faq-item/.faq-list visual as before; only the disclosure behavior
 * and a rotating chevron are new, so this applies uniformly wherever the
 * FAQ field is used (AAT Bioquest, ABM, Episkin alike) with no data change
 * required. */
.faq-item { padding: 0; }
.faq-item summary.faq-item__q {
  padding: 1.5rem 1.75rem; cursor: pointer; list-style: none;
}
.faq-item summary.faq-item__q::-webkit-details-marker { display: none; }
.faq-item__chevron {
  margin-left: auto; flex-shrink: 0; display: inline-flex;
  color: var(--muted-foreground); transition: transform .25s ease;
}
.faq-item[open] .faq-item__chevron { transform: rotate(180deg); color: var(--brand); }
.faq-item__a-wrap { padding: 0 1.75rem 1.5rem; }
.faq-item__a-wrap .faq-item__a { margin-top: 0; }

/* ---- Contact Us page (template-contact.php) ---------------------------
   New page type — its own hero identity (no hex-ornament/aura frame,
   reserved for Product Category + Partner Profile). The hero visual
   reuses .cs-hub/.cs-orbit verbatim (built for Custom Services) fed the
   page's own real contact facts instead of service icons — see the
   "Design-fidelity passes" convention: reuse the technique, not just the
   component, and don't invent a second visual language for a new page. */
.contact-hero .cs-hero__visual { height: 20rem; }
@media (min-width: 640px) { .contact-hero .cs-hero__visual { height: 24rem; } }

/* Quick-contact chips under the hero intro — real email/phone/hours,
   same 3 facts that drive the orbiting hero icons above. */
.contact-chip-row { margin-top: 1.75rem; display: flex; flex-wrap: wrap; gap: .75rem; padding: 0; list-style: none; }
.contact-chip {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .6rem 1rem; border-radius: 999px; border: 1px solid var(--border);
  background: var(--background); font-size: .8125rem; font-weight: 600; color: var(--ink-foreground);
  transition: border-color .25s, transform .25s, box-shadow .25s;
}
a.contact-chip:hover { border-color: var(--brand); color: var(--brand); transform: translateY(-2px); box-shadow: 0 12px 24px -16px var(--shadow-color); }
.contact-chip__icon { display: inline-flex; color: var(--brand); }
.contact-chip__icon .icon-tile__svg { width: 1.05rem; height: 1.05rem; }

/* Contact details + form, two-up */
.contact-split { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 1024px) { .contact-split { grid-template-columns: 0.85fr 1.15fr; gap: 3.5rem; } }
.contact-card {
  background: var(--background); border: 1px solid var(--border); border-radius: var(--radius-xl);
  padding: 2rem; box-shadow: 0 24px 48px -36px var(--shadow-color);
}
.contact-facts { margin-top: 1.5rem; display: flex; flex-direction: column; gap: 1rem; padding: 0; list-style: none; }
.contact-facts li { display: flex; align-items: center; gap: .75rem; font-size: .9375rem; color: var(--ink-foreground); }
.contact-facts a { color: inherit; font-weight: 600; transition: color .25s; }
.contact-facts a:hover { color: var(--brand); }
.contact-facts__icon {
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem; border-radius: 50%; background: color-mix(in oklab, var(--brand) 10%, transparent); color: var(--brand);
}
.contact-facts__icon .icon-tile__svg { width: 1.1rem; height: 1.1rem; }
.contact-card__note { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--border); font-size: .875rem; line-height: 1.6; color: var(--muted-foreground); }

.contact-form-panel {
  background: var(--background); border: 1px solid var(--border); border-radius: var(--radius-xl);
  padding: 2rem; box-shadow: 0 24px 48px -36px var(--shadow-color);
}
.contact-form-panel__note { margin-top: 1.25rem; font-size: .8125rem; color: var(--muted-foreground); }
.contact-form-panel__empty { text-align: center; padding: 1.5rem 1rem; }
.contact-form-panel__empty-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 3.5rem; height: 3.5rem; border-radius: 50%; background: color-mix(in oklab, var(--brand) 10%, transparent); color: var(--brand);
  margin-bottom: 1rem;
}
.contact-form-panel__empty-icon .icon-tile__svg { width: 1.6rem; height: 1.6rem; }
.contact-form-panel__empty-title { font-weight: 700; font-size: 1.05rem; color: var(--ink-foreground); }
.contact-form-panel__empty-body { margin-top: .5rem; font-size: .875rem; color: var(--muted-foreground); max-width: 26rem; margin-inline: auto; }
.contact-form-panel__empty .btn { margin-top: 1.5rem; }

/* Reskin the real Fluent Forms markup (kept functional via do_shortcode())
   to this theme's own input/button tokens instead of the plugin's default
   styling, so it doesn't look like a foreign widget dropped on the page. */
.kg-contact-form .ff-el-form-control {
  width: 100%; min-height: 2.75rem; padding: .65rem 1rem;
  border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--background); font: inherit; color: var(--ink-foreground);
  transition: border-color .25s, box-shadow .25s;
}
.kg-contact-form textarea.ff-el-form-control { min-height: 7rem; resize: vertical; }
.kg-contact-form .ff-el-form-control:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand) 18%, transparent); }
.kg-contact-form .ff-el-group,
.kg-contact-form .ff-field_container { margin-bottom: 1.1rem; }
.kg-contact-form .ff-el-input--label label { display: block; margin-bottom: .4rem; font-size: .8125rem; font-weight: 600; color: var(--ink-foreground); }
.kg-contact-form .ff-btn-submit {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; padding-inline: 1.5rem;
  border-radius: var(--radius-md); background: var(--brand); color: var(--brand-foreground);
  font-weight: 700; font-size: .875rem; border: none; cursor: pointer; transition: transform .25s, box-shadow .25s;
}
.kg-contact-form .ff-btn-submit:hover { transform: translateY(-2px); box-shadow: 0 16px 32px -18px var(--shadow-color); }

/* Head Office address lines */
.office-address { display: flex; align-items: flex-start; gap: .75rem; margin-top: 1.25rem; font-size: .9375rem; line-height: 1.6; color: var(--muted-foreground); }
.office-address a { color: inherit; font-weight: 600; }
.office-address a:hover { color: var(--brand); }
.office-address__icon { flex-shrink: 0; display: inline-flex; color: var(--brand); margin-top: .15rem; }
.office-address__icon .icon-tile__svg { width: 1.15rem; height: 1.15rem; }
.contact-map iframe {
  width: 100%; height: 22rem; border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 24px 48px -32px var(--shadow-color);
}

/* Local Team fallback (see inc/contact-content.php for why this replaces
   the live page's non-functional region-hover map instead of faking one) */
.team-fallback { margin-top: 1.75rem; }
.team-fallback__note { font-size: .875rem; color: var(--muted-foreground); }
.team-fallback__links { margin-top: 1rem; display: flex; flex-direction: column; gap: .75rem; }
.team-fallback__link {
  display: inline-flex; align-items: center; gap: .85rem; padding: .9rem 1.1rem;
  border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--background);
  transition: border-color .25s, transform .25s, box-shadow .25s;
}
.team-fallback__link:hover { border-color: var(--brand); transform: translateX(4px); box-shadow: 0 16px 32px -22px var(--shadow-color); }
.team-fallback__link-icon {
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem; border-radius: 50%; background: color-mix(in oklab, var(--brand) 10%, transparent); color: var(--brand);
}
.team-fallback__link-icon .icon-tile__svg { width: 1.1rem; height: 1.1rem; }
.team-fallback__link-label { display: block; font-size: .8125rem; color: var(--muted-foreground); }
.team-fallback__link-value { display: block; font-size: .9375rem; font-weight: 700; color: var(--ink-foreground); }

/* Ambient globe reused on this page carries no partner-logo ring (no real
   per-region office data exists) — just the rotating sphere/dust, quieter
   and slightly smaller than the Partners page hero use of the same
   component. */
.globe-space--contact { height: 24rem; opacity: .9; }
@media (min-width: 1024px) { .globe-space--contact { height: 28rem; } }

/* The globe used to sit as bare, unlabelled decoration in a lot of empty
   space — a soft brand-tinted glow backdrop (same recipe as the Services
   Offered section) plus a real, sitewide-established fact as a caption
   give it a reason to be there instead of looking like an orphaned
   graphic. */
.contact-globe { position: relative; text-align: center; }
.contact-globe__glow {
  position: absolute; z-index: 0; pointer-events: none;
  top: 45%; left: 50%; transform: translate(-50%, -50%);
  width: 34rem; height: 34rem; max-width: 90%; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in oklab, var(--brand) 9%, transparent) 0%, transparent 65%);
}
.contact-globe .globe-space { position: relative; z-index: 1; }
.contact-globe__caption {
  position: relative; z-index: 1; margin-top: -1rem;
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .55rem 1.1rem; border-radius: 999px; border: 1px solid var(--border);
  background: var(--background); font-size: .8125rem; font-weight: 600; color: var(--muted-foreground);
  box-shadow: 0 16px 32px -22px var(--shadow-color);
}
.contact-globe__caption .icon-tile__svg { width: 1rem; height: 1rem; color: var(--brand); }