/* =========================================================================
   Ehlinar Global — dark navy + brass identity. Same layout & copy as the
   cream/sand build it replaced; the palette below is the original blue
   variant's, ported back onto the current site. The class prefix is still
   .bge for historical reasons — it is the site's only design system.
   Fully scoped under .bge to avoid any collision with globals.css.
   ========================================================================= */

.bge {
  --bge-ink: #eef1f8;
  --bge-soft: #b9c0d4;
  /* --slate and --mute measured 5.78:1 and 4.19:1 against the page ground.
     --mute failed the 4.5:1 body/placeholder floor everywhere it carried text
     (form placeholders, the board's source lines, the footer stamp), so both
     are lifted. They still read as the two quiet tiers under --bge-soft. */
  --bge-slate: #98a1ba;
  --bge-mute: #8b93a9;

  --bge-bg: #070b16;
  --bge-bg-2: #0a0f1e;
  --bge-panel: rgba(18, 24, 42, 0.66);
  --bge-panel-2: rgba(22, 29, 49, 0.82);
  --bge-line: rgba(233, 236, 245, 0.09);
  --bge-line-2: rgba(233, 236, 245, 0.16);
  /* Hairlines that carry structure instead of enclosing a box. The elevated
     layout leans on rules where it used to lean on card borders. */
  --bge-rule: rgba(233, 236, 245, 0.12);
  --bge-rule-brass: rgba(200, 120, 69, 0.5);

  --bge-brass: #c87845;
  --bge-brass-soft: #e6a468;
  --bge-brass-ink: #160d07;
  --bge-green: #3dd68c;

  --bge-display: "Space Grotesk", "Instrument Sans", ui-sans-serif, system-ui,
    -apple-system, "Segoe UI", sans-serif;
  --bge-sans: "Instrument Sans", ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", sans-serif;
  --bge-mono: "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono",
    monospace;

  /* ---- type scale ------------------------------------------------------
     The hero title used to be the smallest display size on the page: 2.6rem
     against a section h2 of 3.4rem. The page's own argument was set in the
     third-largest type it owned. This scale puts the weight back at the top
     and steps down from there. */
  --bge-t-hero: clamp(2.4rem, 5.2vw, 4.2rem);
  --bge-t-h2: clamp(2.05rem, 3.85vw, 3.05rem);
  --bge-t-h3: clamp(1.04rem, 1.4vw, 1.2rem);
  --bge-t-lede: clamp(1.02rem, 1.1vw, 1.14rem);
  --bge-t-meta: 0.875rem;
  --bge-t-micro: 0.72rem;

  /* ---- space scale, 4px base ------------------------------------------- */
  --bge-s1: 4px;
  --bge-s2: 8px;
  --bge-s3: 12px;
  --bge-s4: 16px;
  --bge-s5: 24px;
  --bge-s6: 32px;
  --bge-s7: 48px;
  --bge-s8: 64px;
  --bge-s9: 96px;

  /* ---- elevation -------------------------------------------------------
     Every step carries an offset and a blur. The set this replaces included a
     white glow under the footer and a 0.16-alpha black on a near-black
     ground, which rendered as nothing at all. */
  --bge-e1: 0 2px 6px -2px rgba(0, 0, 0, 0.5), 0 10px 24px -14px rgba(0, 0, 0, 0.7);
  --bge-e2: 0 6px 16px -6px rgba(0, 0, 0, 0.6), 0 24px 50px -26px rgba(0, 0, 0, 0.78);
  --bge-e3: 0 12px 28px -10px rgba(0, 0, 0, 0.64), 0 44px 92px -44px rgba(0, 0, 0, 0.85);
  --bge-e-brass: 0 8px 20px -8px rgba(200, 120, 69, 0.42),
    0 20px 46px -24px rgba(200, 120, 69, 0.38);

  /* ---- motion ----------------------------------------------------------
     One exponential ease-out shared by everything that enters or lifts, so
     the page moves with a single hand. */
  --bge-out: cubic-bezier(0.16, 1, 0.3, 1);
  --bge-inout: cubic-bezier(0.65, 0, 0.35, 1);

  --bge-max: 1200px;
  /* the portfolio is the one section allowed to break the measure */
  --bge-wide: 1340px;
  --bge-pad: clamp(20px, 5vw, 64px);
  --bge-radius: 16px;

  position: relative;
  min-height: 100vh;
  color: var(--bge-ink);
  font-family: var(--bge-sans);
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: 0.01em;
  background:
    radial-gradient(1100px 700px at 78% -8%, rgba(200, 120, 69, 0.13), transparent 60%),
    radial-gradient(900px 700px at 6% 8%, rgba(61, 214, 140, 0.08), transparent 58%),
    linear-gradient(180deg, var(--bge-bg) 0%, var(--bge-bg-2) 46%, var(--bge-bg) 100%);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

/* subtle chemistry backdrop (structural formulas) — see molecule-field.tsx */
.bge-grain {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.bge > *:not(.bge-grain):not(.bge-atmo) {
  position: relative;
  z-index: 1;
}

/* cursor halo overlay — screen-blended warm cloud that follows the pointer
   (position vars set from JS in cursor-halo.tsx). Screen blend is what reads on
   a dark background; multiply is invisible here. */
.bge-atmo {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(
    420px circle at var(--bge-gx, 50%) var(--bge-gy, 40%),
    rgba(255, 178, 36, 0.1),
    transparent 65%
  );
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity 0.45s ease;
}
.bge-atmo[data-enabled="true"] {
  opacity: 1;
}
.bge-atmo[data-enabled="false"] {
  display: none;
}

/* ---- browser surfaces --------------------------------------------------
   Selection, caret, scrollbar, markers and numerals ship with defaults that
   belong to no design system. They are the cheapest tell that a page was
   assembled rather than built, so they get themed from the palette here. */
.bge ::selection {
  background: rgba(200, 120, 69, 0.32);
  color: var(--bge-ink);
  text-shadow: none;
}
.bge {
  caret-color: var(--bge-brass-soft);
  scrollbar-color: rgba(200, 120, 69, 0.45) rgba(233, 236, 245, 0.05);
  scrollbar-width: thin;
}
.bge ::-webkit-scrollbar {
  width: 11px;
  height: 11px;
}
.bge ::-webkit-scrollbar-track {
  background: rgba(233, 236, 245, 0.04);
}
.bge ::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
  border-radius: 999px;
  background: rgba(200, 120, 69, 0.4);
  background-clip: content-box;
}
.bge ::-webkit-scrollbar-thumb:hover {
  background: rgba(200, 120, 69, 0.62);
  background-clip: content-box;
}
.bge ::marker {
  color: var(--bge-brass);
}
/* Figures line up in columns wherever the page shows more than one of them:
   CAS numbers, molar masses, the board's readings, the manifest index. */
.bge-num,
.bge-mono,
.bge-spec dd,
.bge-spec-table td,
.bge-cond-stat,
.bge-chem-mini-index {
  font-variant-numeric: tabular-nums;
}
/* Prose links carry a real underline with room to breathe, rather than a
   border-bottom pretending to be one. */
.bge-prose a,
.bge-legal-body a,
.bge-product-intro a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  text-decoration-color: rgba(200, 120, 69, 0.5);
  transition: text-decoration-color 160ms var(--bge-out);
}
.bge-prose a:hover,
.bge-legal-body a:hover,
.bge-product-intro a:hover {
  text-decoration-color: var(--bge-brass);
}

/* ---- typography helpers ------------------------------------------------ */
.bge-mono {
  font-family: var(--bge-mono);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bge-slate);
}

.bge-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--bge-green);
  box-shadow: 0 0 0 0 rgba(61, 214, 140, 0.5);
  animation: bge-pulse 2.6s ease-out infinite;
}

.bge-h2 {
  margin: 0;
  font-family: var(--bge-display);
  font-weight: 600;
  font-size: var(--bge-t-h2);
  line-height: 1.04;
  letter-spacing: -0.028em;
  text-wrap: balance;
  color: var(--bge-ink);
}

.bge-h2 span {
  color: var(--bge-brass-soft);
}


/* The relocated hero headline. The atom carries no words, so this is the
   page's one descriptive H1 — set a step above .bge-h2 because it is the
   page's primary statement, and it keeps the brass on the closing clause
   that the hero used to give it. */
.bge-h1-lead {
  margin: 0 0 clamp(var(--bge-s5), 2.5vw, var(--bge-s6));
  font-family: var(--bge-display);
  font-weight: 600;
  font-size: clamp(2.15rem, 4.05vw, 3.3rem);
  line-height: 1.04;
  letter-spacing: -0.03em;
  text-wrap: balance;
  color: var(--bge-ink);
}
.bge-h1-lead em {
  font-style: normal;
  color: var(--bge-brass-soft);
}

.bge-prose p {
  margin: 0 0 1.05em;
  color: var(--bge-soft);
  /* 44ch set the approach column two words wide of a phrase; 62 sits inside
     the 65-75ch band without the column going slack. */
  max-width: 62ch;
  text-wrap: pretty;
}
.bge-prose p:last-child {
  margin-bottom: 0;
}

/* ---- buttons ----------------------------------------------------------- */
.bge-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  height: 52px;
  padding: 0 26px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-family: var(--bge-sans);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: -0.004em;
  cursor: pointer;
  text-align: center;
  transition: transform 240ms var(--bge-out), box-shadow 280ms var(--bge-out),
    background 220ms var(--bge-out), border-color 220ms var(--bge-out),
    color 200ms var(--bge-out);
}
/* Pressing something should feel like pressing it. */
.bge-btn:active {
  transform: translateY(0) scale(0.985);
  transition-duration: 90ms;
}

.bge-btn-brass {
  background: linear-gradient(180deg, var(--bge-brass-soft), var(--bge-brass));
  color: var(--bge-brass-ink);
  box-shadow: var(--bge-e-brass), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.bge-btn-brass:hover {
  transform: translateY(-2px);
  box-shadow: var(--bge-e-brass), var(--bge-e2),
    inset 0 1px 0 rgba(255, 255, 255, 0.34);
}

.bge-btn-ghost {
  background: rgba(233, 236, 245, 0.03);
  color: var(--bge-ink);
  border-color: var(--bge-line-2);
}

.bge-btn-ghost:hover {
  transform: translateY(-2px);
  border-color: rgba(233, 236, 245, 0.36);
  background: rgba(233, 236, 245, 0.07);
  box-shadow: var(--bge-e1);
}

/* Two-tone ring: the dark spacer keeps the brass legible when focus lands on
   a photograph or a brass button, where a single outline disappears. */
.bge :focus-visible {
  outline: 2px solid var(--bge-brass-soft);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(7, 11, 22, 0.85);
  border-radius: 7px;
}

/* The corner atom now occupies the top-left, so the skip link steps aside
   rather than landing underneath it when focused. */
.bge-skip {
  position: fixed;
  top: 14px;
  left: 90px;
  z-index: 80;
  transform: translateY(-160%);
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--bge-ink);
  color: var(--bge-bg);
  font-weight: 700;
  font-size: 0.82rem;
  transition: transform 180ms ease;
}
.bge-skip:focus-visible {
  transform: translateY(0);
}

/* ---- nav --------------------------------------------------------------- */
.bge-nav {
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 24px;
  max-width: var(--bge-max);
  margin: 0 auto;
  padding: 14px calc(var(--bge-pad) + 36px);
  margin-top: 10px;
}
.bge-nav::before {
  content: "";
  position: absolute;
  inset: 6px var(--bge-pad);
  z-index: -1;
  border-radius: 999px;
  background: rgba(8, 12, 22, 0.6);
  border: 1px solid var(--bge-line);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.bge-brand {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}
.bge-logo-img {
  height: 60px;
  width: auto;
  display: block;
}
.bge-crown {
  height: 22px;
  width: auto;
  display: block;
  margin-bottom: 2px;
}
.bge-nav-links {
  display: flex;
  gap: 28px;
  margin-left: auto;
  font-size: 0.92rem;
  color: var(--bge-soft);
}
.bge-nav-links a {
  position: relative;
  padding: 4px 0;
  transition: color 180ms var(--bge-out);
}
/* The rule grows from the centre so the whole word is claimed at once,
   rather than being swept left to right. */
.bge-nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 1.5px;
  background: var(--bge-brass-soft);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 320ms var(--bge-out);
}
.bge-nav-links a:hover,
.bge-nav-links a:focus-visible {
  color: var(--bge-ink);
}
.bge-nav-links a:hover::after,
.bge-nav-links a:focus-visible::after {
  transform: scaleX(1);
}
.bge-nav-cta {
  height: 44px;
  padding: 0 20px;
  font-size: 0.88rem;
}

/* ---- ticker ------------------------------------------------------------ */
.bge-ticker {
  position: relative;
  margin: clamp(20px, 4vh, 48px) 0;
  padding: 16px 0;
  border-block: 1px solid var(--bge-line);
  background: rgba(10, 15, 30, 0.5);
  overflow: hidden;
  mask-image: linear-gradient(
    90deg,
    transparent,
    #000 8%,
    #000 92%,
    transparent
  );
}
.bge-ticker-track {
  display: flex;
  gap: 0;
  width: max-content;
  animation: bge-marquee 38s linear infinite;
}
.bge-ticker-track span {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  padding: 0 28px;
  font-family: var(--bge-display);
  font-weight: 600;
  font-size: 1.1rem;
  letter-spacing: 0.01em;
  color: var(--bge-soft);
  white-space: nowrap;
}
.bge-ticker-track i {
  color: var(--bge-brass);
  font-style: normal;
}
.bge-ticker:hover .bge-ticker-track {
  animation-play-state: paused;
}

/* ---- generic section --------------------------------------------------- */
.bge-section {
  max-width: var(--bge-max);
  margin: 0 auto;
  padding: clamp(52px, 6.5vw, 100px) var(--bge-pad);
  /* Was 96px, sized for the sticky header the atom replaced. With no header
     it just dropped every section 96px below where it was asked to go; the
     section's own top padding is the breathing room. */
  scroll-margin-top: 0;
}
/* The portfolio is the one section allowed off the measure: it is the page's
   peak and its five photographs carry it. */
.bge-section-peak {
  max-width: var(--bge-wide);
  padding-top: clamp(64px, 8vw, 124px);
  padding-bottom: clamp(64px, 8vw, 124px);
}
/* Heading and its standfirst share a rule. With the kickers gone this is what
   opens a section: a line, a title, and the sentence that qualifies it. */
.bge-section-head {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(var(--bge-s3), 3vw, var(--bge-s7));
  align-items: end;
  margin-bottom: clamp(var(--bge-s6), 4vw, var(--bge-s8));
  padding-bottom: var(--bge-s5);
  border-bottom: 1px solid var(--bge-rule);
}
.bge-section-sub {
  margin: 0;
  color: var(--bge-soft);
  font-size: var(--bge-t-lede);
  line-height: 1.62;
  max-width: 58ch;
  text-wrap: pretty;
}

/* ---- approach split + brand card -------------------------------------- */
.bge-split {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(var(--bge-s6), 4vw, var(--bge-s8));
  align-items: start;
}
.bge-copy .bge-h2 {
  margin-bottom: clamp(var(--bge-s5), 2.5vw, var(--bge-s6));
}
.bge-brand-card {
  position: relative;
  padding: clamp(var(--bge-s5), 3vw, var(--bge-s7));
  border-radius: var(--bge-radius);
  background: linear-gradient(
      180deg,
      rgba(200, 120, 69, 0.07),
      transparent 42%
    ),
    var(--bge-panel);
  border: 1px solid var(--bge-line-2);
  /* was 0.16-alpha black on a near-black ground, i.e. nothing */
  box-shadow: var(--bge-e2);
}
/* The lockup on its own line with the slogan under it, rather than a crest
   and two lines of type in a row. The logo is drawn as one piece and reads as
   one, which the old arrangement quietly argued against. */
.bge-brand-head {
  display: flex;
  flex-direction: column;
  /* Centred in the card. The lockup is a symmetrical drawing — crown over
     name over subtitle — so hanging it off the left edge fought the artwork.
     Only this block centres; the lede and the four flow items below the rule
     stay ranged left, where reading them is easier. */
  align-items: center;
  text-align: center;
  gap: var(--bge-s4);
  margin-bottom: var(--bge-s5);
  padding-bottom: var(--bge-s5);
  border-bottom: 1px solid var(--bge-rule);
}
/* Taller than the footer's 120px: in the footer the logo signs off, here it
   introduces the company, and the card has the room. */
.bge-brand-logo {
  height: clamp(96px, 10vw, 140px);
  width: auto;
  display: block;
}
/* The slogan, in the page's brightest ink. Brass was tried and lost: the
   logo's crown is already the brass note in this card, and a second one
   underneath split the eye between them. */
.bge-brand-slogan {
  display: block;
  font-family: var(--bge-display);
  font-weight: 600;
  font-size: clamp(1.18rem, 1.6vw, 1.42rem);
  line-height: 1.2;
  letter-spacing: -0.012em;
  color: var(--bge-ink);
  text-wrap: balance;
}
.bge-brand-lede {
  margin: 0 0 22px;
  color: var(--bge-soft);
  font-size: 0.98rem;
}
/* Source / Formulate / Blend / Ship. Four boxes inside a box is the one
   arrangement no system earns, so the stages are separated by rules instead.
   They also lose their 01-04: the page carries three numbered sequences and
   only one of them — the process stepper — is actually a sequence the reader
   has to follow. Here the order is already in the tagline above. */
.bge-flow {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(var(--bge-s5), 3vw, var(--bge-s6));
  row-gap: 0;
  margin-top: var(--bge-s5);
}
.bge-flow article {
  padding: var(--bge-s4) 0;
  border-top: 1px solid var(--bge-rule);
}
.bge-flow strong {
  display: block;
  margin: 0 0 var(--bge-s2);
  font-family: var(--bge-display);
  font-weight: 600;
  font-size: var(--bge-t-h3);
  letter-spacing: -0.015em;
  color: var(--bge-brass-soft);
}
.bge-flow p {
  margin: 0;
  font-size: 0.86rem;
  color: var(--bge-soft);
  line-height: 1.58;
  text-wrap: pretty;
}

/* ---- portfolio: the group accordion -----------------------------------
   Seven group photographs as strips in a row; the one under the pointer opens
   and that group's chemicals list underneath it. This replaces the three-up
   grid of group columns, which had nowhere good to put a seventh group — the
   last one was either stranded on a row of its own or folded into the cell
   above it, and both readings were wrong.

   The strips divide the row by flex-grow rather than by fixed pixels, so an
   open strip is always about four and a half shut ones whatever the viewport,
   and the row is exactly as wide as its container at every size. Only flex-grow,
   radius and brightness animate; the photograph itself never scales.

   Height and ratio were cut back after the first pass: at 410px the row filled
   the screen and you could not take the seven groups in at once. At 300px an
   open strip lands near the photographs' own 16:10, so cover barely crops, and
   the whole section can be read in one look. */
.bge-acc-strips {
  display: flex;
  gap: clamp(6px, 0.7vw, 12px);
  height: clamp(210px, 21vw, 300px);
  margin-bottom: var(--bge-s6);
}
.bge-acc-strip {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--bge-line);
  border-radius: 999px;
  background: var(--bge-panel);
  box-shadow: var(--bge-e1);
  transition:
    flex-grow 420ms var(--bge-out),
    border-radius 420ms var(--bge-out),
    border-color 320ms var(--bge-out),
    box-shadow 320ms var(--bge-out);
}
.bge-acc-strip[data-active="true"] {
  flex-grow: 4.5;
  border-radius: 16px;
  border-color: var(--bge-line-2);
  box-shadow: var(--bge-e2);
}
.bge-acc-strip-btn {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  appearance: none;
  cursor: pointer;
}
/* Centre, everywhere, open and shut. The sample is cropped to the middle of
   each file (see landing.tsx), so a plain centre crop keeps it in the same
   place on every strip at every width — which is the whole point of the row. */
.bge-acc-strip-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(0.94) brightness(0.68);
  transition: filter 420ms var(--bge-out);
}
.bge-acc-strip[data-active="true"] .bge-acc-strip-img {
  filter: saturate(1.02) brightness(1);
}
.bge-acc-strip-label {
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--bge-s5) var(--bge-s3) var(--bge-s3);
  background: linear-gradient(to top, rgba(7, 11, 22, 0.92), rgba(7, 11, 22, 0));
  text-align: start;
  pointer-events: none;
}
.bge-acc-strip-name {
  display: block;
  color: var(--bge-ink);
  /* Raised from 0.98rem on 2026-09-27: hard to read over the photograph. */
  font-size: 1.14rem;
  font-weight: 600;
  line-height: 1.24;
  text-wrap: balance;
}
.bge-acc-strip-count {
  display: block;
  margin-top: 5px;
  color: var(--bge-brass-soft);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
/* Shut, the name turns on its side and runs up the strip and the count goes.
   Vertical writing mode rather than a rotate on the box, so Arabic and Chinese
   still set the way they should. */
.bge-acc-strip:not([data-active="true"]) .bge-acc-strip-label {
  inset: 0;
  display: grid;
  place-items: end center;
  padding: var(--bge-s3) 0;
  background: linear-gradient(to top, rgba(7, 11, 22, 0.72), rgba(7, 11, 22, 0.22));
}
.bge-acc-strip:not([data-active="true"]) .bge-acc-strip-name {
  writing-mode: vertical-rl;
  rotate: 180deg;
  max-height: 100%;
  overflow: hidden;
  /* Raised from 0.76rem / 500 on 2026-09-27: the sideways names were too
     small and thin to read on the narrower strips. */
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.03em;
}
.bge-acc-strip:not([data-active="true"]) .bge-acc-strip-count {
  display: none;
}
/* The group-level "New" marker. Pinned top-centre on the strip in every state:
   centred because a shut strip is a pill whose rounded top would clip a corner
   badge, and 22px down to clear that curve. Given a solid dark backing, unlike
   the tint on the card version, because here it sits on a photograph. */
.bge-acc-new {
  position: absolute;
  top: 22px;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  padding: 3px 9px 3px 7px;
  font-size: 0.6rem;
  background: rgba(7, 11, 22, 0.78);
  border-color: rgba(230, 164, 104, 0.55);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  pointer-events: none;
  vertical-align: baseline;
}
/* A shut strip runs its name up the full height, and the longest translations
   (the biopharma group in Spanish, Portuguese and French) reached the badge by
   up to 29px. On strips that carry one, the name's space starts below it, so a
   long name wraps into a second column instead of running underneath. */
@media (min-width: 761px) {
  .bge-acc-strip[data-new="true"]:not([data-active="true"]) .bge-acc-strip-label {
    padding-top: 58px;
  }
}
/* Sibling of the select button, never inside it — two buttons, one job each. */
.bge-acc-zoom {
  position: absolute;
  top: 10px;
  inset-inline-end: 10px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 9px;
  background: rgba(7, 11, 22, 0.62);
  color: var(--bge-brass);
  cursor: zoom-in;
  opacity: 0;
  transition: opacity 200ms ease;
}
.bge-acc-strip[data-active="true"]:hover .bge-acc-zoom,
.bge-acc-zoom:focus-visible {
  opacity: 1;
}
.bge-acc-strip:not([data-active="true"]) .bge-acc-zoom {
  pointer-events: none;
}
.bge-acc-zoom svg {
  width: 13px;
  height: 13px;
}

/* The panels. Every group's chemicals are in the page whatever is open — the
   shut ones are collapsed here, never dropped from the markup, because this
   list is what an answer engine comes to the page to read. */
.bge-acc-panel {
  display: none;
}
.bge-acc-panel[data-active="true"] {
  display: grid;
  grid-template-columns: minmax(0, 19rem) minmax(0, 1fr);
  gap: clamp(var(--bge-s4), 3vw, var(--bge-s7));
  align-items: start;
  animation: bge-acc-panel-in 420ms var(--bge-out) both;
}
@keyframes bge-acc-panel-in {
  from {
    opacity: 0;
    transform: translateY(7px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.bge-acc-panel-count {
  margin: 0;
  color: var(--bge-brass);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.bge-acc-panel-name {
  margin: 6px 0 0;
  font-size: clamp(1.15rem, 1.7vw, 1.42rem);
  font-weight: 600;
  line-height: 1.2;
  text-wrap: balance;
}
/* The fun fact used to be buried in the lightbox, one click in. It earns its
   place on the page. */
.bge-acc-panel-caption {
  margin: var(--bge-s3) 0 0;
  padding-top: var(--bge-s3);
  border-top: 1px solid var(--bge-brass);
  color: var(--bge-soft);
  font-size: 0.86rem;
  line-height: 1.55;
  text-wrap: pretty;
}
.bge-acc-items {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr));
  column-gap: clamp(var(--bge-s4), 2.4vw, var(--bge-s6));
}

@media (max-width: 900px) {
  .bge-acc-panel[data-active="true"] {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--bge-s5);
  }
}
@media (max-width: 760px) {
  /* Seven strips across a phone is seven slivers and no photograph at all. The
     row becomes a snapping scroller of thumbnails and nothing expands; the tap
     still opens the panel underneath, which is the part that matters. */
  .bge-acc-strips {
    height: 150px;
    gap: var(--bge-s2);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .bge-acc-strips::-webkit-scrollbar {
    display: none;
  }
  .bge-acc-strip,
  .bge-acc-strip[data-active="true"] {
    flex: 0 0 104px;
    border-radius: 13px;
    scroll-snap-align: start;
  }
  .bge-acc-strip:not([data-active="true"]) .bge-acc-strip-label {
    inset: auto 0 0 0;
    display: block;
    padding: var(--bge-s4) var(--bge-s2) var(--bge-s2);
    background: linear-gradient(to top, rgba(7, 11, 22, 0.92), rgba(7, 11, 22, 0));
  }
  .bge-acc-strip:not([data-active="true"]) .bge-acc-strip-name {
    writing-mode: horizontal-tb;
    rotate: none;
    font-size: 0.82rem;
  }
  .bge-acc-zoom {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .bge-acc-strip,
  .bge-acc-strip-img {
    transition: none;
  }
  .bge-acc-panel[data-active="true"] {
    animation: none;
  }
}

.bge-lightbox {
  position: fixed;
  inset: 0;
  margin: auto;
  /* Every product photograph is exactly 16:10, so the panel width can be
     derived instead of measured: 124.8vh is 78vh x 1.6, which caps the image
     height without ever making the image narrower than its own caption. */
  width: min(94vw, 1100px, 124.8vh);
  height: max-content;
  padding: 0;
  border: 1px solid var(--bge-line-2);
  border-radius: 14px;
  /* Solid, not the translucent --bge-panel: that let the page behind show
     through the rounded corners as a pale bleed. */
  background: #0d1424;
  color: inherit;
  overflow: hidden;
}
.bge-lightbox::backdrop {
  background: rgba(4, 7, 14, 0.86);
}
.bge-lightbox-figure {
  margin: 0;
  display: flex;
  flex-direction: column;
}
.bge-lightbox-img {
  display: block;
  width: 100%;
  height: auto;
}
.bge-lightbox-caption {
  padding: 16px 22px 18px;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--bge-ink);
  background: #0d1424;
}
.bge-lightbox-close {
  position: absolute;
  top: 10px;
  right: 10px;
  /* above the image, which otherwise paints over an absolutely-placed sibling */
  z-index: 2;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  border: 1px solid var(--bge-line-2);
  background: rgba(7, 11, 22, 0.82);
  color: var(--bge-ink);
  cursor: pointer;
}
.bge-lightbox-close:hover {
  color: var(--bge-brass);
  border-color: var(--bge-brass-soft);
}
.bge-lightbox-close svg {
  width: 17px;
  height: 17px;
}
/* Thirteen identical rounded panels were competing with the five photographs
   above them for the same attention. As rule-separated rows they read as the
   manifest they are, and the photography gets the section back. */
.bge-chem-mini {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--bge-s3);
  align-items: baseline;
  padding: var(--bge-s3) var(--bge-s2) var(--bge-s3) var(--bge-s2);
  margin-inline: calc(var(--bge-s2) * -1);
  border-top: 1px solid var(--bge-rule);
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  transition: background 260ms var(--bge-out), border-color 260ms var(--bge-out),
    transform 300ms var(--bge-out);
}
.bge-chem-mini:hover {
  background: rgba(233, 236, 245, 0.045);
  border-top-color: var(--bge-rule-brass);
  transform: translateX(3px);
}
.bge-chem-mini-index {
  grid-row: span 2;
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  color: var(--bge-slate);
  transition: color 260ms var(--bge-out);
}
.bge-chem-mini:hover .bge-chem-mini-index {
  color: var(--bge-brass-soft);
}
.bge-chem-mini-name {
  display: block;
  font-family: var(--bge-display);
  font-weight: 600;
  font-size: 1.02rem;
  line-height: 1.18;
  letter-spacing: -0.018em;
  color: var(--bge-ink);
  overflow-wrap: anywhere;
  transition: color 260ms var(--bge-out);
}
.bge-chem-mini:hover .bge-chem-mini-name {
  color: var(--bge-brass-soft);
}
.bge-chem-mini-desc {
  display: block;
  margin-top: var(--bge-s1);
  /* 0.76rem was 12px, small enough that the one line of copy explaining each
     chemical was doing its job at a disadvantage. */
  font-size: 0.84rem;
  line-height: 1.52;
  color: var(--bge-slate);
}
/* "New" marker on a recently added product. It sits inline after the name, so
   it rides along when the name wraps instead of stranding itself on its own
   line. Brass on a brass tint: loud enough to notice on a scan, quiet enough
   that it does not outrank the product name it is attached to. */
.bge-new-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-inline-start: 8px;
  padding: 2px 7px 2px 5px;
  border: 1px solid var(--bge-rule-brass);
  border-radius: 999px;
  background: rgba(200, 120, 69, 0.1);
  color: var(--bge-brass-soft);
  font-size: 0.56rem;
  letter-spacing: 0.14em;
  line-height: 1.5;
  text-transform: uppercase;
  white-space: nowrap;
  vertical-align: 0.14em;
}
.bge-new-flask {
  width: 10px;
  height: 10px;
  flex: none;
}
/* The flask is a left-handed glyph; mirroring it in RTL would tip it the wrong
   way for an Arabic reader scanning right to left. */
[dir="rtl"] .bge-new-flask {
  transform: scaleX(-1);
}
/* ---- process stepper --------------------------------------------------- */
.bge-process {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}
/* The rail is the page's one structural device that carries meaning, so it
   gets to be brass through the middle instead of a flat hairline. */
.bge-process::before {
  content: "";
  position: absolute;
  top: 21px;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--bge-rule) 8%,
    var(--bge-rule-brass) 50%,
    var(--bge-rule) 92%,
    transparent
  );
}
.bge-step {
  position: relative;
  padding-top: 64px;
}
.bge-step-node {
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  font-family: var(--bge-mono);
  font-size: 0.76rem;
  font-variant-numeric: tabular-nums;
  color: var(--bge-brass-soft);
  background: var(--bge-bg-2);
  border: 1px solid var(--bge-brass);
  /* the flat ring punches the gap in the rail behind it */
  box-shadow: 0 0 0 7px var(--bge-bg), var(--bge-e-brass);
}
.bge-step-label {
  display: block;
  margin-bottom: var(--bge-s2);
  color: var(--bge-brass-soft);
}
.bge-step h3 {
  margin: 0 0 var(--bge-s2);
  font-family: var(--bge-display);
  font-weight: 600;
  font-size: var(--bge-t-h3);
  letter-spacing: -0.018em;
  color: var(--bge-ink);
}
.bge-step p {
  margin: 0;
  font-size: 0.89rem;
  color: var(--bge-soft);
  line-height: 1.6;
  text-wrap: pretty;
}

/* ---- contact ----------------------------------------------------------- */
.bge-contact-grid {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: clamp(28px, 4vw, 60px);
  align-items: start;
}
.bge-contact-copy {
  position: sticky;
  top: 100px;
}
.bge-contact-copy .bge-h2 {
  margin-bottom: 1.4rem;
}
.bge-brief-points {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 22px 0;
  padding: 0;
  list-style: none;
}
.bge-brief-points li {
  padding: 9px 15px;
  border-radius: 999px;
  font-size: 0.83rem;
  color: var(--bge-soft);
  background: rgba(233, 236, 245, 0.045);
  border: 1px solid var(--bge-line-2);
}
.bge-contact-direct {
  margin: 0;
  font-size: 0.92rem;
  color: var(--bge-slate);
}
.bge-contact-direct a {
  color: var(--bge-brass-soft);
  font-weight: 600;
  border-bottom: 1px solid rgba(200, 120, 69, 0.4);
}

/* ---- form -------------------------------------------------------------- */
.bge-form {
  padding: clamp(var(--bge-s5), 3vw, var(--bge-s6));
  border-radius: var(--bge-radius);
  background: var(--bge-panel-2);
  border: 1px solid var(--bge-line-2);
  box-shadow: var(--bge-e3);
}
.bge-form-head {
  margin-bottom: 22px;
}
.bge-form-head h3 {
  margin: 0 0 8px;
  font-family: var(--bge-display);
  font-weight: 600;
  font-size: 1.5rem;
  letter-spacing: -0.015em;
}
.bge-form-head p {
  margin: 0;
  font-size: 0.92rem;
  color: var(--bge-soft);
}
.bge-fieldset {
  margin: 0 0 20px;
  padding: 0;
  border: 0;
  border-top: 1px solid var(--bge-line);
  padding-top: 18px;
}
.bge-fieldset legend {
  padding: 0;
  margin-bottom: 14px;
  color: var(--bge-brass-soft);
}
.bge-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}
.bge-field-row-single {
  grid-template-columns: minmax(0, 1fr);
}
.bge-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.bge-field > span {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--bge-soft);
}
.bge-field small {
  margin-left: 6px;
  font-family: var(--bge-mono);
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bge-mute);
}
/* The phone field: a country-code select and the national number on one line.
   The select is sized in ch so a long localized country name ("Émirats arabes
   unis +971") still fits without pushing the number input off the row, and it
   collapses to its own line on a phone, where 248 options in a half-width
   control is not a usable target. */
.bge-phone {
  display: grid;
  grid-template-columns: minmax(0, 20ch) minmax(0, 1fr);
  gap: 10px;
}
@media (max-width: 620px) {
  .bge-phone {
    grid-template-columns: minmax(0, 1fr);
  }
}
.bge-field select,
.bge-field input,
.bge-field textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(7, 11, 22, 0.6);
  border: 1px solid var(--bge-line-2);
  color: var(--bge-ink);
  font-size: 0.92rem;
  font-family: var(--bge-sans);
  transition: border-color 160ms ease, background 160ms ease,
    box-shadow 160ms ease;
}
.bge-field textarea {
  resize: vertical;
  min-height: 80px;
}
/* A native select, deliberately: the OS picker is the accessible, familiar and
   fastest way through 248 options, and on a phone it is a full-screen wheel
   rather than a cramped dropdown. Only the chrome is restyled to match the
   text inputs. The color-scheme: dark line is what makes the OPTION list dark
   too —
   the options are drawn by the platform and no CSS of ours reaches them. */
.bge-field select {
  appearance: none;
  color-scheme: dark;
  cursor: pointer;
  padding-inline-end: 34px;
  background-image: linear-gradient(45deg, transparent 50%, var(--bge-soft) 50%),
    linear-gradient(135deg, var(--bge-soft) 50%, transparent 50%);
  background-position: right 16px center, right 11px center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
[dir="rtl"] .bge-field select {
  background-position: left 16px center, left 11px center;
}
/* Unselected, the placeholder option should read like a placeholder. */
.bge-field select:invalid {
  color: var(--bge-mute);
}
.bge-field input::placeholder,
.bge-field textarea::placeholder {
  color: var(--bge-mute);
}
.bge-field select:hover,
.bge-field input:hover,
.bge-field textarea:hover {
  border-color: rgba(233, 236, 245, 0.26);
}
.bge-field select:focus,
.bge-field input:focus,
.bge-field textarea:focus {
  outline: none;
  border-color: var(--bge-brass);
  background: rgba(7, 11, 22, 0.9);
  box-shadow: 0 0 0 3px rgba(200, 120, 69, 0.2);
}
/* The generic two-tone ring is for controls that sit on unknown ground; a
   field already draws its own focus state, so the ring would double it. */
.bge-field select:focus-visible,
.bge-field input:focus-visible,
.bge-field textarea:focus-visible {
  outline: none;
}
.bge-route-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}
.bge-route-option {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 48px;
  padding: 12px;
  border-radius: 10px;
  background: rgba(7, 11, 22, 0.5);
  border: 1px solid var(--bge-line-2);
  cursor: pointer;
  transition: border-color 200ms var(--bge-out), background 200ms var(--bge-out),
    color 200ms var(--bge-out);
}
.bge-route-option:hover {
  border-color: rgba(233, 236, 245, 0.3);
  background: rgba(7, 11, 22, 0.72);
}
.bge-route-option:has(input:focus-visible) {
  outline: 2px solid var(--bge-brass-soft);
  outline-offset: 2px;
}
.bge-route-option span {
  font-size: 0.82rem;
  color: var(--bge-soft);
}
.bge-route-option input {
  position: absolute;
  opacity: 0;
  inset: 0;
  cursor: pointer;
}
.bge-route-option:has(input:checked) {
  border-color: var(--bge-brass);
  background: rgba(200, 120, 69, 0.14);
}
.bge-route-option:has(input:checked) span {
  color: var(--bge-ink);
}
.bge-form-submit {
  width: 100%;
  margin-top: 4px;
  height: 52px;
}
.bge-form-status {
  margin: 14px 0 0;
  min-height: 1.2em;
  font-size: 0.86rem;
}
.bge-form-status-error {
  color: #ff9b8a;
}
.bge-form-status p {
  margin: 0;
}
/* The list of what blocks sending. Each entry is a button that jumps to its
   field, so it reads as a link without pretending to be one. */
.bge-form-problems {
  margin: 8px 0 0;
  padding-inline-start: 18px;
  display: grid;
  gap: 6px;
}
.bge-form-problems button {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  text-align: start;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: rgba(255, 155, 138, 0.45);
  text-underline-offset: 3px;
}
.bge-form-problems button:hover {
  text-decoration-color: currentColor;
}
.bge-form-problems button:focus-visible {
  outline: 2px solid #ff9b8a;
  outline-offset: 2px;
  border-radius: 4px;
}
/* A field that blocks sending: same red as the message, kept while focused so
   the visitor can see which box they are fixing. */
.bge-field [aria-invalid="true"],
.bge-field [aria-invalid="true"]:hover,
.bge-field [aria-invalid="true"]:focus {
  border-color: #ff9b8a;
}
.bge-field [aria-invalid="true"]:focus {
  box-shadow: 0 0 0 3px rgba(255, 155, 138, 0.22);
}
.bge-form-status-success {
  color: var(--bge-green);
}

/* ---- footer ------------------------------------------------------------ */
.bge-footer {
  width: calc(100% - 2 * var(--bge-pad));
  max-width: var(--bge-max);
  margin: clamp(64px, 8vw, 120px) auto clamp(24px, 3vw, 36px);
  padding: clamp(40px, 5vw, 64px) clamp(30px, 4vw, 60px) clamp(26px, 3vw, 34px);
  border: 1px solid var(--bge-line-2);
  border-radius: 28px;
  background:
    radial-gradient(
      135% 130% at 100% 0%,
      rgba(200, 120, 69, 0.07),
      transparent 55%
    ),
    linear-gradient(165deg, #161d31 0%, #0a0f1e 100%);
  /* was a WHITE 0.5-alpha drop shadow, which is a glow around the footer
     rather than depth under it */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    var(--bge-e3);
}
.bge-footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) 1px minmax(0, 0.9fr);
  gap: clamp(26px, 4.5vw, 60px);
  align-items: stretch;
}
.bge-footer-brand-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(18px, 2.4vw, 26px);
}
.bge-footer-brand-col .bge-brand {
  align-items: flex-start;
}
.bge-footer-blurb {
  margin: 0;
  max-width: 40ch;
  color: var(--bge-soft);
  font-size: 0.95rem;
  line-height: 1.65;
}
.bge-footer-rule {
  width: 1px;
  align-self: stretch;
  background: var(--bge-line-2);
}
.bge-footer-details {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(20px, 2.6vw, 30px);
}
.bge-foot-group {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.bge-foot-group .bge-mono {
  color: var(--bge-slate);
  letter-spacing: 0.2em;
  font-size: 0.72rem;
}
.bge-footer-mail {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  width: fit-content;
  color: var(--bge-brass-soft);
  font-weight: 600;
  font-size: 1.05rem;
  transition: color 180ms var(--bge-out);
}
.bge-footer-mail:hover {
  color: var(--bge-brass-soft);
}
.bge-footer-details address {
  margin: 0;
  font-style: normal;
  color: var(--bge-ink);
  font-size: 1.04rem;
  line-height: 1.62;
  max-width: 26ch;
}
.bge-footer-reg {
  margin-top: 10px;
  color: var(--bge-soft);
  font-size: 0.95rem;
}
.bge-footer-copy {
  margin: clamp(28px, 4vw, 46px) 0 0;
  color: var(--bge-mute);
  font-family: var(--bge-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.bge-footer-link {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  width: fit-content;
  color: var(--bge-soft);
  font-size: 0.98rem;
  transition: color 180ms var(--bge-out);
}
.bge-footer-link:hover {
  color: var(--bge-brass);
}
.bge-cond-frozen {
  margin: 0 auto clamp(18px, 2.6vw, 28px);
  max-width: 78ch;
  padding: 14px 18px;
  border: 1px solid var(--bge-line-2);
  border-radius: 12px;
  background: rgba(200, 120, 69, 0.08);
  color: var(--bge-soft);
  font-size: 0.95rem;
  line-height: 1.6;
}
.bge-cond-frozen strong {
  color: var(--bge-brass-soft);
}
.bge-cond-frozen a {
  color: var(--bge-brass-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* The week label was linked but styled to inherit, which on a brass label with
   a 16%-white underline made it indistinguishable from the four weeks around
   it that are NOT links — clicking History looked like it did nothing. The
   link now reads as one: a visible brass underline and an explicit ↗. */
.bge-cond-hist-link {
  color: var(--bge-brass);
  text-decoration: underline;
  text-decoration-color: rgba(230, 164, 104, 0.5);
  text-underline-offset: 3px;
  transition:
    color 180ms var(--bge-out),
    text-decoration-color 180ms var(--bge-out);
}
.bge-cond-hist-link:hover,
.bge-cond-hist-link:focus-visible {
  color: var(--bge-brass-soft);
  text-decoration-color: var(--bge-brass);
}
/* Scoped to the link: the .bge-cond-hist-week span rule that greys the date
   would otherwise out-specify a bare class and mute the arrow.
   (No backticks in this file's comments — the CSS lives in a template literal.) */
.bge-cond-hist-link .bge-cond-hist-perma {
  color: inherit;
  font-weight: inherit;
  margin-left: 5px;
  font-size: 0.78em;
  vertical-align: 1px;
  opacity: 0.85;
}
.bge-cond--missing {
  max-width: 62ch;
  margin: 0 auto;
  text-align: center;
}
.bge-footer-products {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: clamp(30px, 4vw, 46px);
  padding-top: clamp(24px, 3.2vw, 34px);
  border-top: 1px solid var(--bge-line-2);
}
.bge-footer-products .bge-mono {
  color: var(--bge-slate);
  letter-spacing: 0.2em;
  font-size: 0.72rem;
}
.bge-footer-products-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
}
.bge-footer-products-list a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  color: var(--bge-soft);
  font-size: 0.92rem;
  transition: color 180ms var(--bge-out);
}
.bge-footer-products-list a:hover {
  color: var(--bge-brass);
}
.bge-footer-base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 28px;
  margin-top: clamp(30px, 4vw, 46px);
  padding-top: clamp(18px, 2.4vw, 26px);
  border-top: 1px solid var(--bge-line);
}
.bge-footer-legal-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  font-family: var(--bge-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bge-mute);
}
.bge-footer-legal-links a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  color: var(--bge-soft);
  transition: color 180ms var(--bge-out);
}
.bge-footer-legal-links a:hover {
  color: var(--bge-brass);
}
.bge-footer-compliance {
  margin: 0;
  max-width: 48ch;
  color: var(--bge-mute);
  font-size: 0.72rem;
  line-height: 1.5;
  text-align: right;
}
@media (max-width: 700px) {
  .bge-footer-compliance {
    text-align: left;
  }
}

/* legal pages — privacy / terms */
.bge-legal {
  max-width: 820px;
  margin: 0 auto;
  padding: clamp(40px, 7vw, 96px) var(--bge-pad) clamp(40px, 6vw, 80px);
}
.bge-legal-kicker {
  color: var(--bge-brass);
  margin: 0 0 14px;
}
.bge-legal-title {
  font-family: var(--bge-display);
  font-size: clamp(2rem, 5vw, 3rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
  color: var(--bge-ink);
}
.bge-legal-updated {
  color: var(--bge-slate);
  font-size: 0.9rem;
  margin: 0 0 24px;
}
.bge-legal-draft {
  border: 1px solid var(--bge-line-2);
  background: rgba(200, 120, 69, 0.06);
  border-radius: 12px;
  padding: 13px 16px;
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--bge-soft);
  margin-bottom: 38px;
}
.bge-legal-body {
  color: var(--bge-soft);
  font-size: 1rem;
}
.bge-legal-body h2 {
  font-family: var(--bge-display);
  font-size: 1.25rem;
  color: var(--bge-ink);
  margin: 34px 0 10px;
  letter-spacing: -0.01em;
}
.bge-legal-body p {
  margin: 0 0 14px;
  line-height: 1.72;
}
.bge-legal-body ul {
  margin: 0 0 14px;
  padding-left: 20px;
}
.bge-legal-body li {
  margin: 0 0 8px;
  line-height: 1.65;
}
.bge-legal-body a {
  color: var(--bge-brass);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.bge-legal-body strong {
  color: var(--bge-ink);
}

/* ---- motion ------------------------------------------------------------
   The page used to run one identical fade-and-rise on roughly thirty separate
   elements, which reads as a page that animates rather than a page with a
   moment. Two things move now:

   1. Headings wipe in behind a soft mask, left to right, like a plotter
      laying the line down. That is the authored moment and it belongs to
      headings only.
   2. Everything else rises once, quietly, staggered inside its own group so
      a row of five arrives as one gesture instead of five.               */

.bge-js .bge-reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 620ms var(--bge-out), transform 760ms var(--bge-out);
  will-change: opacity, transform;
}
.bge-js .bge-reveal.is-in {
  opacity: 1;
  transform: none;
  /* A will-change:transform hint makes the element a containing block for
     fixed descendants even at transform:none — which pins the lightbox dialog
     to its photo tile instead of the viewport. Drop the hint once revealed. */
  will-change: auto;
}

/* One gesture per group: the members of a row arrive in sequence, not at once
   and not independently. */
.bge-js .bge-stagger > .bge-reveal:nth-child(2),
.bge-js .bge-stagger > .bge-reveal:nth-child(2) .bge-reveal {
  transition-delay: 70ms;
}
.bge-js .bge-stagger > .bge-reveal:nth-child(3) {
  transition-delay: 140ms;
}
.bge-js .bge-stagger > .bge-reveal:nth-child(4) {
  transition-delay: 210ms;
}
.bge-js .bge-stagger > .bge-reveal:nth-child(5) {
  transition-delay: 280ms;
}
/* Sixth: the caustics group made the portfolio row six columns. Without this
   the last group arrived at the same instant as the first, which is the one
   thing the stagger exists to prevent. Still six with the mineral acids: the
   seventh group shares a cell rather than adding one. */
.bge-js .bge-stagger > .bge-reveal:nth-child(6) {
  transition-delay: 350ms;
}

/* The wipe. mask-size 220% puts an opaque half and a transparent half either
   side of the element; sliding the mask from 100% to 0% draws the type in
   behind a soft edge. Paired with the rise it would read as two effects, so
   a wipe element does not translate. */
.bge-js .bge-wipe {
  opacity: 0;
  transform: none;
  -webkit-mask-image: linear-gradient(
    90deg,
    #000 0 42%,
    rgba(0, 0, 0, 0) 58% 100%
  );
  mask-image: linear-gradient(90deg, #000 0 42%, rgba(0, 0, 0, 0) 58% 100%);
  -webkit-mask-size: 220% 100%;
  mask-size: 220% 100%;
  -webkit-mask-position: 100% 0;
  mask-position: 100% 0;
  transition: opacity 300ms var(--bge-out), -webkit-mask-position 1150ms var(--bge-out),
    mask-position 1150ms var(--bge-out);
}
.bge-js .bge-wipe.is-in {
  opacity: 1;
  -webkit-mask-position: 0 0;
  mask-position: 0 0;
}
/* Arabic reads the other way, so the plotter does too. Mirroring the gradient
   alone ran the wipe backwards — it has to travel the other way as well, so
   the start and end positions swap with it. */
.bge-js .bge-ar .bge-wipe {
  -webkit-mask-image: linear-gradient(
    270deg,
    #000 0 42%,
    rgba(0, 0, 0, 0) 58% 100%
  );
  mask-image: linear-gradient(270deg, #000 0 42%, rgba(0, 0, 0, 0) 58% 100%);
  -webkit-mask-position: 0 0;
  mask-position: 0 0;
}
.bge-js .bge-ar .bge-wipe.is-in {
  -webkit-mask-position: 100% 0;
  mask-position: 100% 0;
}

/* The .bge-ar rules above are three classes deep, so a two-class reset here
   would lose to them and leave Arabic masked with motion turned off. Match
   their depth rather than reaching for !important. */
@media (prefers-reduced-motion: reduce) {
  .bge-js .bge-reveal,
  .bge-js .bge-wipe,
  .bge-js .bge-ar .bge-wipe,
  .bge-js .bge-ar .bge-wipe.is-in {
    opacity: 1;
    transform: none;
    transition: none;
    transition-delay: 0ms !important;
    -webkit-mask-image: none;
    mask-image: none;
  }
}
@media (max-width: 760px) {
  .bge-footer-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .bge-footer-rule {
    display: none;
  }
}

/* ---- motion ------------------------------------------------------------ */
@keyframes bge-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(61, 214, 140, 0.5);
  }
  70% {
    box-shadow: 0 0 0 9px rgba(61, 214, 140, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(61, 214, 140, 0);
  }
}
@keyframes bge-marquee {
  to {
    transform: translateX(-50%);
  }
}
@keyframes bge-drift {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}
@keyframes bge-rise {
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bge-ticker-track,
  .bge-dot {
    animation: none !important;
  }
  .bge * {
    scroll-behavior: auto;
  }
}

/* ---- responsive --------------------------------------------------------
   Every breakpoint below was walked with the real English copy, not with
   placeholder text. */
@media (max-width: 960px) {
  .bge-split,
  .bge-section-head,
  .bge-contact-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .bge-contact-copy {
    position: static;
  }
  .bge-process {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: var(--bge-s6);
  }
  .bge-process::before {
    display: none;
  }
}
@media (max-width: 620px) {
  .bge-nav-links {
    display: none;
  }
  .bge-field-row,
  .bge-route-grid,
  .bge-process {
    grid-template-columns: minmax(0, 1fr);
  }
  .bge-section {
    padding-top: clamp(34px, 8vw, 52px);
    padding-bottom: clamp(34px, 8vw, 52px);
  }
  .bge-section-head {
    margin-bottom: clamp(20px, 5vw, 30px);
    padding-bottom: var(--bge-s4);
  }
  .bge-flow {
    column-gap: var(--bge-s4);
  }
}

/* dark-theme baseline — this colourway is dark, so let the UA render form
   controls / overscroll / mobile chrome dark to match */
html {
  color-scheme: dark;
}
body {
  background: #070b16;
}

@media (max-width: 620px) {
  /* Product pages still carry a header CTA; the home page's nav is the atom. */
  .bge-nav-cta {
    display: none;
  }
}

/* ---- the atom mark: always the way back to the menu -------------------
   The V8 hero animates its nucleus into the upper-left corner on scroll and
   makes it the home button. Product and legal pages do not mount that hero,
   so they render app/atom-home.tsx here instead. These values mirror the
   component's own parked geometry, measured from it: 65px at (28, 26) on
   desktop and 55px at (15, 16) compact, with the same disc treatment — one
   mark, one corner, one meaning site-wide. */
.eh-atom-dock {
  position: fixed;
  z-index: 60;
  top: 26px;
  left: 28px;
  display: grid;
  width: 65px;
  height: 65px;
  place-items: center;
  border: 1px solid rgba(233, 236, 245, 0.22);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, rgba(230, 164, 104, 0.13), transparent 31%),
    linear-gradient(145deg, rgba(22, 29, 49, 0.98), rgba(10, 15, 30, 0.96));
  box-shadow: 0 28px 64px -36px rgba(0, 0, 0, 0.9),
    0 0 0 12px rgba(233, 236, 245, 0.018),
    inset 0 1px 0 rgba(255, 255, 255, 0.035);
  color: #e9ecf5;
  text-decoration: none;
  transition: transform 380ms var(--bge-out), border-color 300ms var(--bge-out);
}
.eh-atom-dock img {
  display: block;
  width: 72%;
  height: auto;
  object-fit: contain;
}
.eh-atom-dock:hover {
  transform: scale(1.06);
  border-color: rgba(230, 164, 104, 0.6);
}
.eh-atom-dock:focus-visible {
  border-color: rgba(230, 164, 104, 0.72);
  box-shadow: 0 0 0 8px rgba(200, 120, 69, 0.085), 0 0 42px rgba(200, 120, 69, 0.14);
  outline: none;
}
/* With the logo gone the pill holds one control; keep it to the end. */
.bge-nav-cta--only {
  margin-inline-start: auto;
}
/* The header CTA is hidden below 620px site-wide; on these pages it is the
   only thing in the pill, so the pill goes with it and the nucleus disc
   carries the page on its own. */
@media (max-width: 620px) {
  .bge-nav--offset {
    display: none;
  }
}

/* Pages carrying the mark AND a nav pill: keep the pill clear of it. */
.bge-nav--offset {
  padding-inline-start: calc(var(--bge-pad) + 104px);
}
.bge-nav--offset::before {
  inset-inline-start: 104px;
}
@media (max-width: 720px) {
  .eh-atom-dock {
    top: 16px;
    left: 15px;
    width: 55px;
    height: 55px;
  }
}
@media (max-width: 620px) {
  .bge-nav--offset {
    padding-inline-start: 84px;
  }
  .bge-nav--offset::before {
    inset-inline-start: 80px;
  }
}

/* ---- language switcher (nav dropdown) ------------------------------- */
/* The ".bge > *" rule above flattens every wrapper child to z-index:1, which
   lets the main element paint over the open dropdown. Lift the nav (matching
   that rule specificity, declared later) so its menu floats above content. */
.bge > .bge-nav:not(.bge-grain):not(.bge-atmo) {
  z-index: 60;
}
.bge-lang {
  position: relative;
}
.bge-lang-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--bge-line-2);
  background: rgba(233, 236, 245, 0.03);
  color: var(--bge-soft);
  font-family: var(--bge-mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  cursor: pointer;
  list-style: none;
  user-select: none;
  -webkit-user-select: none;
  transition: color 160ms ease, border-color 200ms ease, background 200ms ease;
}
.bge-lang-trigger::-webkit-details-marker {
  display: none;
}
.bge-lang-trigger:hover {
  color: var(--bge-ink);
  border-color: rgba(233, 236, 245, 0.34);
}
.bge-lang-globe {
  width: 16px;
  height: 16px;
  flex: none;
}
.bge-lang-cur {
  font-weight: 600;
}
.bge-lang-caret {
  width: 13px;
  height: 13px;
  opacity: 0.7;
  transition: transform 200ms ease;
}
.bge-lang[open] .bge-lang-caret {
  transform: rotate(180deg);
}
.bge-lang-menu {
  position: absolute;
  top: calc(100% + 8px);
  inset-inline-end: 0;
  z-index: 70;
  display: flex;
  flex-direction: column;
  min-width: 170px;
  padding: 6px;
  border-radius: 14px;
  border: 1px solid var(--bge-line);
  background: rgba(8, 12, 22, 0.95);
  box-shadow: var(--bge-e3);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.bge-lang-item {
  display: flex;
  align-items: center;
  padding: 9px 12px;
  border-radius: 9px;
  color: var(--bge-soft);
  font-family: var(--bge-sans);
  font-size: 0.92rem;
  letter-spacing: 0;
  transition: color 140ms ease, background 160ms ease;
}
a.bge-lang-item:hover {
  color: var(--bge-ink);
  background: rgba(233, 236, 245, 0.06);
}
.bge-lang-item.is-active {
  color: var(--bge-brass);
  font-weight: 600;
  background: rgba(200, 120, 69, 0.08);
}

/* ---- Chinese & Arabic webfonts (the Latin display fonts lack these
   glyphs, so redefine the family tokens within each scope) ------------ */
.bge-zh {
  --bge-display: "Noto Sans SC", "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --bge-sans: "Noto Sans SC", "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
  --bge-mono: "Noto Sans SC", "JetBrains Mono", ui-monospace, monospace;
}
.bge-ar {
  --bge-display: "Noto Sans Arabic", "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --bge-sans: "Noto Sans Arabic", "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
  --bge-mono: "Noto Sans Arabic", "JetBrains Mono", ui-monospace, monospace;
}

/* ---- Arabic RTL adjustments ----------------------------------------- */
/* letter-spacing breaks Arabic's cursive joining — reset across the scope */
.bge-ar,
.bge-ar * {
  letter-spacing: normal !important;
}
.bge-ar .bge-nav-links {
  margin-left: 0;
  margin-right: auto;
}
.bge-ar .bge-skip {
  left: auto;
  right: 90px;
}

@media (max-width: 620px) {
  .bge-lang {
    margin-inline-start: auto;
  }
}

/* ===================================================================== */
/* Product pages (/products, /products/<slug>)                           */
/* ===================================================================== */
.bge-product {
  max-width: 920px;
  margin: 0 auto;
  padding: clamp(104px, 13vw, 150px) var(--bge-pad) clamp(64px, 8vw, 104px);
}
.bge-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
  align-items: center;
  margin: 0 0 2.2rem;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  color: var(--bge-slate);
}
.bge-breadcrumb a { color: var(--bge-slate); text-decoration: none; transition: color 180ms var(--bge-out); }
.bge-breadcrumb a:hover { color: var(--bge-brass-soft); }
.bge-breadcrumb [aria-current] { color: var(--bge-ink); }

.bge-product-head { margin-bottom: 1.4rem; }
.bge-product-h1 {
  margin: 0;
  font-family: var(--bge-display);
  font-weight: 600;
  font-size: clamp(2.3rem, 5vw, 3.5rem);
  line-height: 1.02;
  letter-spacing: -0.032em;
  text-wrap: balance;
  color: var(--bge-ink);
}
.bge-product-sub {
  margin: 1rem 0 0;
  font-size: 0.9rem;
  letter-spacing: 0.12em;
  font-variant-numeric: tabular-nums;
  color: var(--bge-brass-soft);
}
.bge-formula sub { font-size: 0.72em; }
/* A molecular formula is case-significant notation: "Na" is sodium, "NA" is
   nothing. Every formula in the catalogue was all-caps-plus-digits until the
   caustics arrived, so .bge-mono's uppercase never showed — it does now. */
.bge-formula { text-transform: none; }

/* The identity panel: the page's hardest data, set like an instrument
   readout. A brass rule across the top marks it as the record rather than
   another content block. */
.bge-spec {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1px;
  margin: clamp(var(--bge-s5), 3vw, var(--bge-s6)) 0 0;
  background: var(--bge-line);
  border: 1px solid var(--bge-line-2);
  border-top: 1px solid var(--bge-rule-brass);
  border-radius: var(--bge-radius);
  overflow: hidden;
  box-shadow: var(--bge-e1);
}
.bge-spec > div {
  background: var(--bge-panel-2);
  padding: var(--bge-s4) var(--bge-s5);
}
.bge-spec dt {
  font-family: var(--bge-mono);
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bge-slate);
  margin-bottom: 0.4rem;
}
.bge-spec dd {
  margin: 0;
  font-size: 1rem;
  color: var(--bge-ink);
  line-height: 1.4;
}
/* Supply panel under the identity panel: label / value rows set against the
   same brass rule as the CAS note, so it reads as part of the record rather
   than as a sales block. Collapses to stacked rows on a phone. */
.bge-supplyline {
  margin: var(--bge-s5) 0 0;
  border-inline-start: 1px solid var(--bge-rule-brass);
  padding-inline-start: 1rem;
}
.bge-supplyline-h {
  margin: 0 0 0.7rem;
  font-family: var(--bge-mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bge-slate);
}
.bge-supplyline dl {
  margin: 0;
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 0.45rem 1.1rem;
}
.bge-supplyline dl > div { display: contents; }
.bge-supplyline dt {
  font-family: var(--bge-mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bge-slate);
  padding-top: 0.3rem;
}
.bge-supplyline dd {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--bge-ink);
}
@media (max-width: 560px) {
  .bge-supplyline dl { grid-template-columns: minmax(0, 1fr); gap: 0.2rem; }
  .bge-supplyline dd { margin-bottom: 0.55rem; }
}
.bge-cas-note {
  margin: 0.85rem 0 0;
  font-size: 0.83rem;
  line-height: 1.6;
  color: var(--bge-soft);
  border-inline-start: 1px solid var(--bge-rule-brass);
  padding-inline-start: 0.95rem;
}

.bge-product-section {
  margin-top: clamp(var(--bge-s7), 5vw, var(--bge-s8));
}
/* Same rule-under-the-heading device as the home page sections, one size
   down, so the two surfaces read as one system. */
.bge-product-section h2 {
  margin: 0 0 var(--bge-s5);
  padding-bottom: var(--bge-s3);
  border-bottom: 1px solid var(--bge-rule);
  font-family: var(--bge-display);
  font-weight: 600;
  font-size: clamp(1.35rem, 2.2vw, 1.65rem);
  letter-spacing: -0.022em;
  text-wrap: balance;
  color: var(--bge-ink);
}
.bge-product-intro {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--bge-soft);
  max-width: 68ch;
  text-wrap: pretty;
}

.bge-safety {
  margin-top: clamp(var(--bge-s5), 3vw, var(--bge-s6));
  padding: var(--bge-s4) var(--bge-s5);
  border-radius: var(--bge-radius);
  background: rgba(200, 120, 69, 0.08);
  border: 1px solid rgba(200, 120, 69, 0.3);
}
.bge-safety-label { display: block; margin-bottom: 0.5rem; color: var(--bge-brass); letter-spacing: 0.2em; }
.bge-safety p { margin: 0; font-size: 0.96rem; line-height: 1.6; color: var(--bge-ink); }

/* Applications are a two-column reference list, not a card wall: industry
   label, then what the material does there. */
.bge-app-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  column-gap: clamp(var(--bge-s6), 4vw, var(--bge-s7));
  row-gap: 0;
}
.bge-app {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: var(--bge-s4) 0;
  border-top: 1px solid var(--bge-rule);
}
.bge-app-industry {
  font-family: var(--bge-mono);
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bge-brass-soft);
}
.bge-app-use {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--bge-ink);
  text-wrap: pretty;
}

.bge-pack { margin: 1rem 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.bge-pack li {
  font-family: var(--bge-mono);
  font-size: 0.78rem;
  color: var(--bge-soft);
  border: 1px solid var(--bge-line-2);
  border-radius: 999px;
  padding: 0.45rem 0.9rem;
}
.bge-quote-line { margin: 1.1rem 0 0; font-size: 0.95rem; line-height: 1.6; color: var(--bge-brass); }
.bge-synonyms { margin: 0; font-size: 0.95rem; line-height: 1.7; color: var(--bge-soft); }

.bge-faq { margin: 0; }
.bge-faq-item { padding: var(--bge-s5) 0; border-top: 1px solid var(--bge-rule); }
.bge-faq-item:first-child { border-top: 0; padding-top: 0; }
.bge-faq-item dt {
  font-family: var(--bge-display);
  font-weight: 600;
  font-size: 1.06rem;
  letter-spacing: -0.016em;
  color: var(--bge-ink);
  margin-bottom: 0.55rem;
  text-wrap: balance;
}
.bge-faq-item dd {
  margin: 0;
  font-size: 0.97rem;
  line-height: 1.65;
  color: var(--bge-soft);
  max-width: 68ch;
  text-wrap: pretty;
}

/* Related and index tiles stay cards: they are destinations, and a card is
   the honest affordance for "this is a thing you can open". */
.bge-related { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--bge-s3); }
.bge-related-card {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: var(--bge-s4) var(--bge-s5);
  border: 1px solid var(--bge-line-2);
  border-radius: 12px;
  background: var(--bge-panel);
  text-decoration: none;
  transition: border-color 240ms var(--bge-out), transform 300ms var(--bge-out),
    box-shadow 300ms var(--bge-out), background 240ms var(--bge-out);
}
.bge-related-card:hover {
  border-color: var(--bge-brass-soft);
  background: var(--bge-panel-2);
  transform: translateY(-3px);
  box-shadow: var(--bge-e2);
}
.bge-related-name { font-family: var(--bge-display); font-weight: 600; letter-spacing: -0.016em; color: var(--bge-ink); }
.bge-related-cas { font-size: 0.66rem; letter-spacing: 0.14em; font-variant-numeric: tabular-nums; color: var(--bge-slate); }

.bge-disclaimer {
  margin-top: 3rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--bge-line);
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--bge-slate);
}
.bge-disclaimer a { color: var(--bge-brass); }

/* products index */
.bge-index-head {
  margin-bottom: clamp(var(--bge-s6), 4vw, var(--bge-s7));
  padding-bottom: var(--bge-s5);
  border-bottom: 1px solid var(--bge-rule);
}
.bge-index-lede {
  margin: 1rem 0 0;
  font-size: var(--bge-t-lede);
  line-height: 1.7;
  color: var(--bge-soft);
  max-width: 64ch;
  text-wrap: pretty;
}
/* The group label sits on its own rule, so the five groups read as five
   sections of one catalogue rather than five floating captions. */
.bge-index-tier {
  display: flex;
  align-items: center;
  gap: var(--bge-s4);
  margin: clamp(var(--bge-s7), 4vw, var(--bge-s8)) 0 var(--bge-s4);
  font-family: var(--bge-mono);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bge-brass-soft);
}
/* The group heading on /products carries the same marker as its cards. The
   tier is a flex row with a hairline after it, so the tag sits between the
   name and the line rather than floating at the far end. */
.bge-index-tier-new {
  margin-inline-start: 0;
  letter-spacing: 0.14em;
}
.bge-index-tier::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--bge-rule);
}
.bge-index-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--bge-s3); }
.bge-index-card {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: var(--bge-s5);
  border: 1px solid var(--bge-line-2);
  border-radius: var(--bge-radius);
  background: var(--bge-panel);
  text-decoration: none;
  transition: border-color 240ms var(--bge-out), transform 300ms var(--bge-out),
    box-shadow 300ms var(--bge-out), background 240ms var(--bge-out);
}
.bge-index-card:hover {
  border-color: var(--bge-brass-soft);
  background: var(--bge-panel-2);
  transform: translateY(-3px);
  box-shadow: var(--bge-e2);
}
.bge-index-name { font-family: var(--bge-display); font-weight: 600; font-size: 1.16rem; letter-spacing: -0.018em; color: var(--bge-ink); }
.bge-index-name .bge-new-tag { font-size: 0.58rem; }
.bge-index-cas { font-family: var(--bge-mono); font-size: 0.68rem; letter-spacing: 0.14em; font-variant-numeric: tabular-nums; color: var(--bge-brass-soft); }
.bge-index-cat { font-size: 0.9rem; color: var(--bge-soft); line-height: 1.55; }

@media (max-width: 620px) {
  .bge-product { padding-top: 96px; }
  .bge-spec { grid-template-columns: 1fr; }
  .bge-supply-grid { grid-template-columns: 1fr; }
}

/* How we supply */
.bge-supply-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  column-gap: clamp(var(--bge-s6), 4vw, var(--bge-s7));
  row-gap: 0;
}
.bge-supply-item {
  padding: var(--bge-s4) 0;
  border-top: 1px solid var(--bge-rule);
}
.bge-supply-label { display: block; font-size: 0.64rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--bge-brass-soft); margin-bottom: 0.55rem; }
.bge-supply-item ul { margin: 0; padding-left: 1.1rem; }
.bge-supply-item li, .bge-supply-item p { font-size: 0.93rem; line-height: 1.55; color: var(--bge-ink); margin: 0.25rem 0; }
.bge-spec-table-wrap { margin-top: 1.4rem; overflow-x: auto; }
.bge-spec-table { width: 100%; border-collapse: collapse; font-size: 0.93rem; }
.bge-spec-table th, .bge-spec-table td { text-align: start; padding: 0.65rem 0.9rem; border-bottom: 1px solid var(--bge-rule); color: var(--bge-ink); }
.bge-spec-table th { font-family: var(--bge-mono); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bge-slate); }
.bge-spec-table tbody tr:last-child td { border-bottom: 0; }
/* Identifier cells (CAS) never break mid-number. */
.bge-spec-table td.bge-mono { white-space: nowrap; }
/* A multi-paragraph intro, as on the Other Amino Acids list. */
.bge-product-intro + .bge-product-intro { margin-top: 1em; }
/* The plain-language paragraph under a product's identifiers — the one
   thing on the page most visitors read, so a touch larger than body text. */
.bge-product-summary { font-size: 1.08rem; line-height: 1.7; color: var(--bge-ink); }
/* "Technical details": everything technical on a product page, always open
   (Marko, 2026-10-03 — no fold-out). A rule and a label in the site's mono
   style mark where the plain paragraph ends and the technical part begins. */
.bge-tech { margin-top: 2.2rem; border-top: 1px solid var(--bge-rule); }
.bge-product .bge-tech-summary {
  margin: 0;
  padding: 1.1rem 0 0;
  font-family: var(--bge-mono);
  font-size: 0.74rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bge-brass);
}
.bge-tech-body { padding-bottom: 0.4rem; }
/* Group names that link to the group's own page: on /products and in the
   open accordion panel. Same colour as the text; the underline shows on hover. */
.bge-index-tier a, .bge-acc-panel-name a { color: inherit; text-decoration: none; }
.bge-index-tier a:hover, .bge-acc-panel-name a:hover { text-decoration: underline; text-underline-offset: 0.2em; text-decoration-color: var(--bge-brass); }
.bge-tech-body > .bge-product-section:first-child { margin-top: 0; }
.bge-supply-note { margin: 0.9rem 0 0; font-size: 0.8rem; line-height: 1.5; color: var(--bge-soft); }

/* Required-field marker: decorative asterisk + one legend (see route-brief-form.tsx) */
.bge-req { color: var(--bge-brass); text-decoration: none; border: 0; margin-inline-start: 0.15em; }
.bge-form-req-note { margin: 0.6rem 0 0; font-family: var(--bge-mono); font-size: 0.68rem; letter-spacing: 0.08em; color: var(--bge-slate); }

/* ---- sourcing conditions board ---------------------------------------- */
/* Instrument-panel styling: status rails instead of badges, monospace figures,
   a diverging deviation bar, and manifest-style index numbers. Tabs show one
   group at a time. Status colour is never the only signal — each card also
   states its status in words (see market-board.tsx). */
.bge-cond-wrap { max-width: var(--bge-max); margin: 0 auto; padding: clamp(28px, 5vw, 56px) var(--bge-pad) clamp(40px, 6vw, 72px); }
.bge-cond-head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 10px; }
.bge-cond-title { display: flex; align-items: center; gap: 12px; }
.bge-cond-h1 { margin: 0; font-family: var(--bge-display); font-weight: 600; font-size: clamp(1.4rem, 2.6vw, 1.9rem); letter-spacing: -0.01em; color: var(--bge-ink); }
.bge-cond-stamp { font-family: var(--bge-mono); font-size: 0.72rem; letter-spacing: 0.02em; color: var(--bge-mute); }
.bge-cond-intro { margin: 14px 0 0; max-width: 60ch; font-size: 0.98rem; line-height: 1.6; color: var(--bge-soft); }

/* Tabs: one group at a time */
.bge-cond-tabs { display: flex; gap: 2px; margin: 22px 0 0; border-bottom: 1px solid var(--bge-line); overflow-x: auto; scrollbar-width: none; }
.bge-cond-tabs::-webkit-scrollbar { display: none; }
.bge-cond-tab { appearance: none; background: none; border: none; cursor: pointer; white-space: nowrap; font-family: var(--bge-sans); font-size: 0.86rem; color: var(--bge-slate); padding: 11px 15px; margin-bottom: -1px; border-bottom: 2px solid transparent; transition: color 0.18s ease, background 0.18s ease; display: inline-flex; align-items: center; gap: 8px; }
.bge-cond-tab:hover { color: var(--bge-soft); background: rgba(233, 236, 245, 0.03); }
.bge-cond-tab[aria-selected="true"] { color: var(--bge-brass-soft); border-bottom-color: var(--bge-brass); }
.bge-cond-tab-n { font-family: var(--bge-mono); font-size: 0.62rem; color: var(--bge-mute); border: 1px solid var(--bge-line-2); border-radius: 3px; padding: 1px 5px; }
.bge-cond-tab[aria-selected="true"] .bge-cond-tab-n { color: var(--bge-brass-soft); border-color: rgba(200, 120, 69, 0.4); }

.bge-cond-legend { display: flex; flex-wrap: wrap; gap: 20px; margin: 18px 0 16px; font-size: 0.8rem; color: var(--bge-slate); }
.bge-cond-legend span { display: inline-flex; align-items: center; gap: 8px; }
.bge-cond-key { width: 8px; height: 8px; border-radius: 2px; flex: none; }

.bge-cond-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); gap: 12px; }

/* Card: a rail down the left edge carries status; no pill badges. */
.bge-cond-card { position: relative; display: flex; flex-direction: column; overflow: hidden; text-align: left; background: #101827; border: 1px solid var(--bge-line); border-radius: 10px; padding: 17px 19px 15px 22px; cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease; }
.bge-cond-card:hover { background: #131c2e; border-color: var(--bge-line-2); }
.bge-cond-card:focus-visible { outline: 2px solid var(--bge-brass); outline-offset: 2px; }
.bge-cond-rail { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; }
.bge-cond-card-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.bge-cond-region { font-family: var(--bge-mono); font-size: 0.64rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--bge-slate); }
.bge-cond-idx { font-family: var(--bge-mono); font-size: 0.62rem; color: rgba(233, 236, 245, 0.16); }

.bge-cond-statrow { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 12px 0 0; }
.bge-cond-stat { font-family: var(--bge-mono); font-weight: 500; font-size: 1.9rem; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.bge-cond-status { display: inline-flex; align-items: center; gap: 6px; font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; }
.bge-cond-status i { width: 6px; height: 6px; border-radius: 50%; display: block; flex: none; }

/* Diverging deviation bar: centre = this card's own normal. */
.bge-cond-dev { position: relative; height: 4px; margin: 12px 0 9px; background: rgba(233, 236, 245, 0.06); border-radius: 2px; }
.bge-cond-dev-axis { position: absolute; inset: 0; border-radius: 2px; }
.bge-cond-dev-fill { position: absolute; top: 0; bottom: 0; border-radius: 2px; opacity: 0.85; }
.bge-cond-dev-tick { position: absolute; left: 50%; top: -3px; bottom: -3px; width: 1px; background: rgba(233, 236, 245, 0.28); }

.bge-cond-stat-cap { display: block; min-height: 2.02em; font-size: 0.72rem; line-height: 1.4; color: var(--bge-slate); }
.bge-cond-name { margin: 13px 0 5px; font-family: var(--bge-display); font-weight: 600; font-size: 1rem; line-height: 1.3; color: var(--bge-ink); }
.bge-cond-sum { margin: 0 0 14px; font-size: 0.86rem; line-height: 1.55; color: var(--bge-soft); }

.bge-cond-belts { display: grid; gap: 9px; margin-top: 14px; }
.bge-cond-belt { display: grid; grid-template-columns: 104px 1fr; gap: 12px; align-items: baseline; padding-top: 9px; border-top: 1px solid var(--bge-line); }
.bge-cond-belt b { font-family: var(--bge-mono); font-size: 0.64rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bge-brass-soft); font-weight: 400; }
.bge-cond-belt span { font-size: 0.86rem; line-height: 1.5; color: var(--bge-soft); }
/* The week's note is a sentence or two, so its label sits above it instead of
   taking a column out of a narrow card. */
.bge-cond-belt-note { grid-template-columns: 1fr; gap: 5px; }

.bge-cond-detail { overflow: hidden; max-height: 0; opacity: 0; transition: max-height 0.38s ease, opacity 0.3s ease, margin 0.3s ease; }
.bge-cond-card[aria-expanded="true"] .bge-cond-detail { max-height: 640px; opacity: 1; margin-top: 13px; }
.bge-cond-detail-inner { border-top: 1px solid var(--bge-line); padding-top: 12px; font-size: 0.86rem; line-height: 1.62; color: var(--bge-soft); }
.bge-cond-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: auto; padding-top: 11px; border-top: 1px solid var(--bge-line); }
.bge-cond-src { font-family: var(--bge-mono); font-size: 0.62rem; line-height: 1.4; color: var(--bge-mute); }
.bge-cond-more { font-size: 0.76rem; color: var(--bge-slate); display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.bge-cond-chev { transition: transform 0.3s ease; }
.bge-cond-card[aria-expanded="true"] .bge-cond-chev { transform: rotate(180deg); }
.bge-cond-card[aria-expanded="true"] .bge-cond-more-lbl { display: none; }
.bge-cond-less-lbl { display: none; }
.bge-cond-card[aria-expanded="true"] .bge-cond-less-lbl { display: inline; }

.bge-cond-card-wide { grid-column: 1 / -1; }
.bge-cond-card-wide .bge-cond-stat { font-size: 2.1rem; }
@media (min-width: 760px) {
  .bge-cond-card-wide { padding: 22px 26px 20px 26px; }
  .bge-cond-card-wide .bge-cond-sum { max-width: 66ch; }
  .bge-cond-card-wide .bge-cond-detail-inner { max-width: 74ch; }
  .bge-cond-card-wide .bge-cond-belts { grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .bge-cond-card-wide .bge-cond-belt { grid-template-columns: 1fr; gap: 5px; }
  /* The week's note spans the wide card instead of taking a season's column. */
  .bge-cond-card-wide .bge-cond-belt-note { grid-column: 1 / -1; }
}

.bge-cond-hist-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; background: #101827; border: 1px solid var(--bge-line); border-radius: 10px; padding: 16px 18px; margin-bottom: 10px; }
.bge-cond-hist-week { font-size: 0.86rem; font-weight: 500; color: var(--bge-brass-soft); }
.bge-cond-hist-week span { color: var(--bge-mute); font-weight: 400; }
.bge-cond-hist-main { flex: 1; min-width: 0; }
/* Status mix: one proportional bar per week. Replaces a strip of unlabelled
   per-card squares whose order was undiscoverable — the share of each state
   is the part a reader can actually use, and it stays legible as the number
   of indicators changes from week to week. */
.bge-cond-hist-mix { display: flex; height: 8px; margin: 12px 0 9px; border-radius: 4px; overflow: hidden; background: var(--bge-line); max-width: 520px; }
.bge-cond-hist-mix span { display: block; height: 100%; }
.bge-cond-hist-counts { display: flex; flex-wrap: wrap; gap: 14px; font-family: var(--bge-mono); font-size: 0.7rem; letter-spacing: 0.02em; color: var(--bge-mute); margin-bottom: 10px; }
.bge-cond-hist-counts span { display: inline-flex; align-items: center; gap: 6px; }
.bge-cond-hist-counts i { width: 8px; height: 8px; border-radius: 2px; display: block; }
.bge-cond-hist-note { font-size: 0.86rem; line-height: 1.5; color: var(--bge-soft); max-width: 62ch; }
.bge-cond-hist-latest { font-family: var(--bge-mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bge-mute); white-space: nowrap; }
.bge-cond-hist-foot { margin: 14px 2px 0; font-size: 0.82rem; line-height: 1.6; color: var(--bge-mute); }
.bge-cond-disc { margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--bge-line); font-size: 0.72rem; line-height: 1.5; color: var(--bge-mute); }
@media (max-width: 620px) {
  .bge-cond-grid { grid-template-columns: 1fr; }
  .bge-cond-tab { padding: 11px 11px; font-size: 0.8rem; }
}