/* =========================================================================
   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(1.85rem, 3.3vw, 2.7rem);
  --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(1.95rem, 3.5vw, 2.9rem);
  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);
}
.bge-brand-head {
  display: flex;
  align-items: center;
  gap: var(--bge-s4);
  margin-bottom: var(--bge-s4);
  padding-bottom: var(--bge-s4);
  border-bottom: 1px solid var(--bge-rule);
}
.bge-brand-crest {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  flex: none;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(22, 29, 49, 0.9), rgba(10, 15, 30, 0.92));
  border: 1px solid rgba(200, 120, 69, 0.32);
  box-shadow: 0 12px 26px -14px rgba(200, 120, 69, 0.55);
}
.bge-brand-crest svg {
  width: 40px;
  height: auto;
  display: block;
}
.bge-brand-head strong {
  display: block;
  font-family: var(--bge-display);
  font-weight: 600;
  font-size: 1.18rem;
  letter-spacing: -0.01em;
  margin-top: 2px;
}
.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: visuals + chemical grid -------------------------------
   Six product groups, laid out 3-up over two rows. It was 5-up on one row
   until the caustics group made six: six across turns each photograph into a
   thumbnail, whereas two rows of three give every group a bigger frame. */
.bge-visual-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(var(--bge-s3), 1.6vw, var(--bge-s5));
  align-items: start;
  /* the columns carry the gap between the two group rows themselves (see
     .bge-group-col), so this only has to clear the chemical grid below */
  margin-bottom: var(--bge-s5);
}
/* Three named rows for the group columns to line themselves up against: the
   photograph, the name block, the card stack. Row gap is zero because the
   blocks carry their own margins (see .bge-group-head). */
@supports (grid-template-rows: subgrid) {
  .bge-visual-row {
    grid-auto-rows: auto;
    row-gap: 0;
    align-items: stretch;
  }
}
.bge-visual {
  position: relative;
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--bge-line);
  box-shadow: var(--bge-e1);
  transition: box-shadow 320ms var(--bge-out), border-color 320ms var(--bge-out);
  /* backs the letterbox edge if a photograph is ever not exactly 16:10 */
  background: var(--bge-panel);
  /* matches the 1280x800 source exactly, so nothing is cropped — the product
     sample sits low and to the right in every shot and must stay in frame */
  aspect-ratio: 16 / 10;
}
/* the whole photograph is the button that opens it full size */
.bge-visual-trigger {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  appearance: none;
}
.bge-visual-zoom {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: rgba(7, 11, 22, 0.62);
  color: var(--bge-brass);
  opacity: 0;
  transition: opacity 200ms ease;
  pointer-events: none;
}
.bge-visual-zoom svg {
  width: 15px;
  height: 15px;
}
.bge-visual:hover .bge-visual-zoom,
.bge-visual-trigger:focus-visible .bge-visual-zoom {
  opacity: 1;
}
.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;
}
.bge-visual img {
  width: 100%;
  height: 100%;
  /* contain, not cover: show the whole photograph, scaled down to fit. The
     product sample sits low and to the right in every shot, so any crop can
     cut it out of the card. */
  object-fit: contain;
  /* was 0.82 brightness — the photographs are the section's whole argument and
     they were being dimmed almost out of the page. */
  filter: saturate(0.94) brightness(0.9);
  transition: filter 420ms var(--bge-out);
}
/* No zoom on hover — scaling the image crops its edges, which is the one
   thing these photographs cannot afford. Brightness alone gives the lift. */
.bge-visual:hover {
  border-color: var(--bge-line-2);
  box-shadow: var(--bge-e2);
}
.bge-visual:hover img {
  filter: saturate(1.02) brightness(1);
}

/* portfolio: one column per product group — photo + name on top, that group's
   chemicals stacked underneath it. */
/* Photo, name block and card stack each take one row of the parent grid, so the
   three columns of a row share three row heights: "Biopharma & nutrition
   ingredients" wraps to three lines where "Caustic alkalis" takes one, and
   without this the card stacks would start at different heights. Browsers
   without subgrid fall back to the flex column below — names still show, the
   stacks are just ragged again. */
.bge-group-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
  /* stands in for the row-gap the subgrid alignment cannot use */
  margin-bottom: var(--bge-s6);
}
@supports (grid-template-rows: subgrid) {
  .bge-group-col {
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
    /* top-align inside each shared row — otherwise the photograph stretches to
       the row height and loses its 16:10 frame */
    align-items: start;
  }
}
.bge-group-head {
  margin-top: 12px;
  padding-top: 9px;
  /* the one brass line in this section: it reads as "everything under here
     belongs to the photograph above" */
  border-top: 1px solid var(--bge-brass);
}
.bge-group-eyebrow {
  margin: 0;
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bge-slate);
}
.bge-group-name {
  margin: var(--bge-s1) 0 0;
  font-family: var(--bge-display);
  font-weight: 700;
  font-size: 1.02rem;
  line-height: 1.22;
  letter-spacing: -0.018em;
  color: var(--bge-ink);
  text-wrap: balance;
}
.bge-group-items {
  list-style: none;
  margin: var(--bge-s3) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
/* 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);
  font-size: 0.76rem;
  line-height: 1.5;
  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);
}
/* closing band under the columns */
/* The manifest's closing entry: "everything past the thirteen above".
   It used to be a dashed, tinted, rounded card carrying its own kicker — the
   only dashed border on the site, and a box sitting directly under thirteen
   rule-separated rows that had just replaced boxes. That is why it read as
   pasted in from another design. It now closes the list on the same brass
   hairline the group heads use to say "this belongs to what is above". */
.bge-chem-open {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: var(--bge-s4) clamp(var(--bge-s6), 5vw, var(--bge-s8));
  align-items: start;
  margin-top: clamp(var(--bge-s7), 5vw, var(--bge-s8));
  padding-top: var(--bge-s5);
  border-top: 1px solid var(--bge-rule-brass);
}
.bge-chem-open-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.bge-chem-id {
  margin: 0;
  font-family: var(--bge-display);
  font-weight: 600;
  font-size: clamp(1.35rem, 2.1vw, 1.65rem);
  line-height: 1.1;
  letter-spacing: -0.024em;
  text-wrap: balance;
  color: var(--bge-ink);
}
.bge-chem-detail {
  margin: var(--bge-s2) 0 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--bge-brass-soft);
}
.bge-chem-desc {
  margin: 0;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--bge-soft);
  max-width: 62ch;
  text-wrap: pretty;
}
/* The arrow is part of the translated string, so it cannot be animated on its
   own; the whole link steps forward instead. */
.bge-chem-link {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  margin-top: var(--bge-s4);
  font-weight: 600;
  font-size: 0.94rem;
  color: var(--bge-brass-soft);
  transition: color 180ms var(--bge-out), transform 260ms var(--bge-out);
}
.bge-chem-link:hover {
  color: var(--bge-brass);
  transform: translateX(3px);
}

/* ---- 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);
}
.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;
}
.bge-field input::placeholder,
.bge-field textarea::placeholder {
  color: var(--bge-mute);
}
.bge-field input:hover,
.bge-field textarea:hover {
  border-color: rgba(233, 236, 245, 0.26);
}
.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 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-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. */
.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: 1080px) {
  /* three 16:10 photographs across still read at this width; the row-gap is
     the only thing worth tightening */
  .bge-visual-row {
    row-gap: var(--bge-s5);
  }
}
@media (max-width: 960px) {
  .bge-split,
  .bge-section-head,
  .bge-chem-open,
  .bge-contact-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .bge-contact-copy {
    position: static;
  }
  .bge-visual-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .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-visual-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--bge-s3);
  }
  .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;
}

/* hero crest now uses the header crown */
.bge-crest-img {
  width: 38px;
  height: auto;
  display: block;
}

@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;
}
.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);
}
.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; }
.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); }

.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; }
}

.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; }
}