/* ============================================================================
   WuXi TIDES — "Bioluminescent Journal"
   A deep-ocean scientific editorial system: abyssal navy grounds, luminous
   cyan/coral strands, warm bone paper for reading. Display type is Fraunces
   (optical serif), running text is Archivo, instrumentation labels are
   IBM Plex Mono.
   ========================================================================= */

/* ------------------------------------------------------------------ tokens */
:root {
  /* ocean */
  --abyss:      #02101f;
  --abyss-2:    #04182e;
  --deep:       #062038;
  --brine:      #0a3450;
  --shelf:      #0f4a6b;

  /* light */
  --bone:       #f4efe6;
  --bone-2:     #ece5d8;
  --paper:      #fbf8f2;
  --ice:        #e6f1f8;

  /* signal */
  --tide:       #0068b0;
  --tide-deep:  #0557bc;
  --glow:       #3fd9e8;
  --glow-soft:  #8febf4;
  --coral:      #f5866a;
  --coral-soft: #ffb59f;
  --amber:      #e9b872;

  /* type */
  --ink:        #0a1a26;
  --ink-2:      #35505f;
  --ink-3:      #6d8391;
  --on-dark:    #eaf4fb;
  --on-dark-2:  #a7c3d6;
  --on-dark-3:  #6f92aa;

  --display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --measure: 68ch;
  --gutter: clamp(1.25rem, 4vw, 4.5rem);
  --maxw: 1440px;
  --rule: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  --rule-dark: 1px solid rgb(255 255 255 / 0.12);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur: 0.7s;

  --nav-h: 76px;
}

/* ------------------------------------------------------------------- reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.075rem);
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 400; }
p { margin: 0 0 1.15em; }
ul, ol { margin: 0; padding: 0; list-style: none; }
::selection { background: var(--glow); color: var(--abyss); }

:focus-visible {
  outline: 2px solid var(--glow);
  outline-offset: 3px;
  border-radius: 2px;
}

/* --------------------------------------------------------------- utilities */
.wrap { width: min(100% - (var(--gutter) * 2), var(--maxw)); margin-inline: auto; }

/* Grid and flex children default to min-width:auto, so one wide descendant
   (a price table, a long SMILES string) can push a whole page sideways. */
.about > *, .article > *, .browse > *, .product > *, .network > *,
.feature > *, .contact-grid > *, .sec-head > *, .cta__inner > *,
.phero__inner > *, .foot__top > *, .modalities > *, .cards > *,
.prod-grid > *, .row > *, .site > * { min-width: 0; }
.wrap--narrow { width: min(100% - (var(--gutter) * 2), 1080px); margin-inline: auto; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* the skip link must be reachable once focused */
a.sr:focus {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 10000;
  width: auto;
  height: auto;
  clip-path: none;
  padding: 0.75rem 1.2rem;
  border-radius: 999px;
  background: var(--glow);
  color: var(--abyss);
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.eyebrow {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--tide);
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
}
.eyebrow::before {
  content: "";
  width: 2rem; height: 1px;
  background: currentColor;
  opacity: 0.55;
}
.eyebrow--bare::before { display: none; }
.on-dark .eyebrow, .sec--dark .eyebrow { color: var(--glow); }

.display {
  font-family: var(--display);
  font-optical-sizing: auto;
  font-variation-settings: "SOFT" 0, "WONK" 1;
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.022em;
  text-wrap: balance;
}
.t-hero  { font-size: clamp(2.9rem, 7.2vw, 6.9rem); }
.t-1     { font-size: clamp(2.3rem, 5vw, 4.4rem); }
.t-2     { font-size: clamp(1.85rem, 3.4vw, 3rem); }
.t-3     { font-size: clamp(1.35rem, 2vw, 1.85rem); line-height: 1.12; }
.t-4     { font-size: clamp(1.12rem, 1.4vw, 1.3rem); line-height: 1.2; }

.lede {
  font-size: clamp(1.1rem, 0.98rem + 0.55vw, 1.4rem);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 62ch;
}
.sec--dark .lede { color: var(--on-dark-2); }

.ital { font-style: italic; font-variation-settings: "SOFT" 30, "WONK" 1; }
.hl-cyan { color: var(--glow); }
.hl-coral { color: var(--coral); }
.hl-tide { color: var(--tide); }

/* ------------------------------------------------------------------ grain */
.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
  opacity: 0.22;
  will-change: opacity;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.42'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------- scroll progress */
.progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 100%;
  transform-origin: 0 50%;
  transform: scaleX(0);
  background: linear-gradient(90deg, var(--glow), var(--tide) 55%, var(--coral));
  z-index: 9999;
}

/* -------------------------------------------------------------------- nav */
.nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 900;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  transition: background 0.45s var(--ease), border-color 0.45s var(--ease), backdrop-filter 0.45s;
  border-bottom: 1px solid transparent;
}
.nav__inner {
  position: relative; /* mega menus anchor here, never to their own item */
  width: min(100% - (var(--gutter) * 2), var(--maxw));
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 3rem);
}
.nav.is-stuck {
  background: color-mix(in srgb, var(--abyss) 82%, transparent);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  border-bottom-color: rgb(255 255 255 / 0.1);
}
.nav.is-light:not(.is-stuck) { border-bottom-color: rgb(255 255 255 / 0.14); }

.brand { display: flex; align-items: center; gap: 0.85rem; flex: 0 0 auto; }
.brand img { width: auto; height: 42px; }
.brand__mark {
  font-family: var(--display);
  font-size: 1.3rem;
  letter-spacing: 0.02em;
  color: var(--on-dark);
}

.nav__links { display: flex; align-items: center; gap: clamp(0.4rem, 1.3vw, 1.5rem); margin-left: auto; }
/* deliberately static: the mega must size against .nav__inner, not the link */
.nav__item { position: static; }
.nav__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.6rem 0.15rem;
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.005em;
  color: var(--on-dark);
  position: relative;
  white-space: nowrap;
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0.25rem;
  height: 1px;
  background: var(--glow);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.4s var(--ease);
}
.nav__item:hover .nav__link::after,
.nav__link.is-active::after { transform: scaleX(1); }
.nav__link svg { width: 10px; height: 10px; opacity: 0.7; transition: transform 0.3s var(--ease); }
.nav__item:hover .nav__link svg { transform: rotate(180deg); }

.nav__tools { display: flex; align-items: center; gap: 1rem; padding-left: 1rem; border-left: 1px solid rgb(255 255 255 / 0.18); }
.nav__search {
  display: grid; place-items: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  color: var(--on-dark);
  border: 1px solid rgb(255 255 255 / 0.22);
  transition: background 0.35s var(--ease), border-color 0.35s var(--ease), color 0.35s;
}
.nav__search:hover { background: var(--glow); border-color: var(--glow); color: var(--abyss); }
.nav__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  padding: 0.6rem 1.1rem;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  border: 1px solid rgb(255 255 255 / 0.3);
  border-radius: 999px;
  color: var(--on-dark);
  transition: background 0.35s var(--ease), border-color 0.35s var(--ease), color 0.35s var(--ease);
}
.nav__cta:hover { background: var(--glow); border-color: var(--glow); color: var(--abyss); }

/* mega menu */
.mega {
  position: absolute;
  top: calc(100% + 1.2rem);
  left: 0;
  right: auto;
  width: max-content;
  min-width: min(640px, 100%);
  max-width: 100%;
  padding: 1.9rem 2rem;
  background: color-mix(in srgb, var(--abyss-2) 96%, transparent);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  border: 1px solid rgb(255 255 255 / 0.11);
  border-radius: 4px;
  box-shadow: 0 40px 90px -30px rgb(0 0 0 / 0.75);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease), visibility 0.35s;
}
.nav__item:hover .mega, .nav__item:focus-within .mega { opacity: 1; visibility: visible; transform: translateY(0); }
/* bridge the gap between the link and the panel so hover doesn't drop out */
.mega::before { content: ""; position: absolute; left: 0; right: 0; top: -1.4rem; height: 1.4rem; }
.mega--wide { min-width: min(920px, 100%); }
/* menus on the right half of the bar hang from the right edge instead */
.nav__item:nth-last-child(-n+3) .mega { left: auto; right: 0; }
.mega__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1.6rem 2.2rem; }
.mega__col > .eyebrow { margin-bottom: 0.9rem; }
.mega__link {
  display: block;
  padding: 0.42rem 0;
  font-size: 0.9rem;
  color: var(--on-dark-2);
  border-bottom: 1px solid rgb(255 255 255 / 0.06);
  transition: color 0.3s var(--ease), padding-left 0.3s var(--ease);
}
.mega__link:hover { color: var(--glow); padding-left: 0.4rem; }
.mega__link--lead { color: var(--on-dark); font-weight: 600; font-size: 0.98rem; }
.mega__foot {
  margin-top: 1.5rem; padding-top: 1.1rem;
  border-top: 1px solid rgb(255 255 255 / 0.1);
  display: flex; flex-wrap: wrap; gap: 1.4rem;
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--on-dark-3);
}
.mega__foot a:hover { color: var(--glow); }

/* burger + drawer */
.burger { display: none; width: 34px; height: 34px; position: relative; }
.burger span { position: absolute; left: 6px; right: 6px; height: 1.5px; background: var(--on-dark); transition: transform 0.4s var(--ease), opacity 0.3s; }
.burger span:nth-child(1) { top: 12px; }
.burger span:nth-child(2) { bottom: 12px; }
body.drawer-open .burger span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
body.drawer-open .burger span:nth-child(2) { transform: translateY(-5px) rotate(-45deg); }

.drawer {
  position: fixed;
  inset: var(--nav-h) 0 0;
  z-index: 890;
  background: var(--abyss);
  padding: 2rem var(--gutter) 4rem;
  overflow-y: auto;
  transform: translateY(-100%);
  transition: transform 0.6s var(--ease);
  visibility: hidden;
}
body.drawer-open .drawer { transform: translateY(0); visibility: visible; }
body.drawer-open { overflow: hidden; }
.drawer__group { border-bottom: 1px solid rgb(255 255 255 / 0.1); padding: 1.1rem 0; }
.drawer__group > .eyebrow { color: var(--glow); }
.drawer__group a { display: block; padding: 0.5rem 0; color: var(--on-dark); font-family: var(--display); font-size: 1.35rem; }
.drawer__group a:hover { color: var(--glow); }
.drawer__sub a { font-family: var(--sans); font-size: 0.95rem; color: var(--on-dark-2); padding: 0.35rem 0 0.35rem 1rem; border-left: 1px solid rgb(255 255 255 / 0.14); }

/* ------------------------------------------------------------------ buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  padding: 0.95rem 1.7rem;
  border-radius: 999px;
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: color 0.4s var(--ease), transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.btn::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, var(--tide), var(--glow));
  transition: transform 0.55s var(--ease);
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -18px color-mix(in srgb, var(--tide) 80%, transparent); }
.btn--primary { color: #fff; }
.btn--primary:hover { color: var(--abyss); }
.btn--primary::before { background: linear-gradient(100deg, var(--tide-deep), var(--tide) 55%, var(--glow) 160%); }
.btn--primary::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, var(--glow), var(--glow-soft));
  transform: translateX(-101%);
  transition: transform 0.55s var(--ease);
}
.btn--primary:hover::after { transform: translateX(0); }
.btn--ghost { border: 1px solid color-mix(in srgb, currentColor 35%, transparent); }
.btn--ghost::before { background: currentColor; opacity: 0.08; transform: scaleX(0); transform-origin: 0 50%; }
.btn--ghost:hover::before { transform: scaleX(1); }
.btn--coral::before { background: linear-gradient(100deg, var(--coral), var(--amber)); }
.btn__arrow { transition: transform 0.4s var(--ease); }
.btn:hover .btn__arrow { transform: translateX(4px); }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--tide);
  padding-bottom: 0.3rem;
  border-bottom: 1px solid color-mix(in srgb, currentColor 35%, transparent);
  transition: gap 0.35s var(--ease), color 0.35s var(--ease);
}
.link-arrow:hover { gap: 0.95em; color: var(--tide-deep); }
.sec--dark .link-arrow { color: var(--glow); }

/* ------------------------------------------------------------------- hero */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: end;
  background: radial-gradient(120% 90% at 70% 15%, #0a3350 0%, var(--abyss-2) 45%, var(--abyss) 100%);
  color: var(--on-dark);
  overflow: hidden;
  isolation: isolate;
}
.hero__canvas { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; }
.hero::after {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(100deg, color-mix(in srgb, var(--abyss) 74%, transparent) 0%, color-mix(in srgb, var(--abyss) 34%, transparent) 42%, transparent 68%),
    radial-gradient(70% 55% at 50% 55%, transparent 35%, color-mix(in srgb, var(--abyss) 70%, transparent) 100%),
    linear-gradient(180deg, color-mix(in srgb, var(--abyss) 72%, transparent) 0%, transparent 28%, transparent 62%, var(--abyss) 100%);
  pointer-events: none;
}
.hero__inner {
  position: relative;
  z-index: 2;
  width: min(100% - (var(--gutter) * 2), var(--maxw));
  margin-inline: auto;
  padding: calc(var(--nav-h) + 5rem) 0 3.5rem;
}
.hero__eyebrow { color: var(--glow); margin-bottom: clamp(1.4rem, 4vh, 2.6rem); }
.hero h1 { max-width: 17ch; }
.hero h1 .line { display: block; overflow: hidden; }
.hero h1 .line > span {
  display: block;
  transform: translateY(105%);
  animation: rise 1.15s var(--ease) forwards;
}
.hero h1 .line:nth-child(1) > span { animation-delay: 0.15s; }
.hero h1 .line:nth-child(2) > span { animation-delay: 0.28s; }
.hero h1 .line:nth-child(3) > span { animation-delay: 0.41s; }
@keyframes rise { to { transform: translateY(0); } }

.hero h1 { text-shadow: 0 8px 60px rgb(2 16 31 / 0.55); }
.hero h1 em {
  font-style: italic;
  font-variation-settings: "SOFT" 40, "WONK" 1;
  background: linear-gradient(94deg, var(--glow-soft), var(--glow) 40%, var(--coral-soft));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* a caustic light band drifting under the headline */
.hero__caustic {
  position: absolute;
  inset: 32% -20% auto -20%;
  height: 46%;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(60% 100% at 50% 50%, color-mix(in srgb, var(--glow) 12%, transparent), transparent 70%);
  animation: caustic 18s var(--ease-in-out) infinite alternate;
}
@keyframes caustic {
  from { transform: translate3d(-4%, 0, 0); opacity: 0.65; }
  to { transform: translate3d(4%, 0, 0); opacity: 1; }
}
.hero__sub {
  margin-top: clamp(1.4rem, 3vh, 2.2rem);
  max-width: 52ch;
  color: var(--on-dark-2);
  font-size: clamp(1rem, 0.95rem + 0.4vw, 1.22rem);
  opacity: 0;
  animation: fade-up 1s var(--ease) 0.62s forwards;
}
.hero__actions {
  margin-top: clamp(1.8rem, 4vh, 2.8rem);
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  opacity: 0;
  animation: fade-up 1s var(--ease) 0.78s forwards;
}
@keyframes fade-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

.hero__scroll {
  position: absolute;
  right: var(--gutter);
  bottom: 9.5rem;
  z-index: 3;
  writing-mode: vertical-rl;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--on-dark-3);
  display: flex;
  align-items: center;
  gap: 1rem;
}
.hero__scroll::after {
  content: "";
  width: 1px; height: 64px;
  background: linear-gradient(var(--glow), transparent);
  animation: drip 2.4s var(--ease-in-out) infinite;
}
@keyframes drip { 0%, 100% { transform: scaleY(0.35); transform-origin: top; opacity: 0.4; } 50% { transform: scaleY(1); opacity: 1; } }

/* hero readout — an instrument line under the composition */
.hero__readout {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 2.4rem;
  align-items: center;
  margin-top: clamp(2rem, 5vh, 3.4rem);
  padding-top: 1.2rem;
  border-top: 1px solid rgb(255 255 255 / 0.14);
  opacity: 0;
  animation: fade-up 1s var(--ease) 0.95s forwards;
}
.hero__readout span {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--on-dark-3);
}
.hero__readout b { color: var(--glow); font-weight: 500; }

/* stat ticker */
.ticker {
  position: relative;
  z-index: 2;
  border-top: 1px solid rgb(255 255 255 / 0.12);
  background: color-mix(in srgb, var(--abyss) 55%, transparent);
  backdrop-filter: blur(10px);
  overflow: hidden;
}
.ticker__track { display: flex; width: max-content; animation: slide 46s linear infinite; }
.ticker:hover .ticker__track { animation-play-state: paused; }
@keyframes slide { to { transform: translateX(-50%); } }
.ticker__item {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  padding: 1.05rem 2.4rem;
  border-right: 1px solid rgb(255 255 255 / 0.09);
  white-space: nowrap;
}
.ticker__n { font-family: var(--display); font-size: 1.3rem; color: var(--glow); }
.ticker__l { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--on-dark-2); }

/* ---------------------------------------------------------------- sections */
.sec { position: relative; padding: clamp(4.5rem, 11vh, 9rem) 0; }
/* soften the seam where a dark section meets paper */
.sec--dark::before, .sec--deep::before, .cta::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 140px;
  pointer-events: none;
  background: linear-gradient(180deg, color-mix(in srgb, var(--brine) 34%, transparent), transparent);
}
.cta::after { height: 90px; }
.sec--dark { background: var(--abyss); color: var(--on-dark); }
.sec--deep { background: linear-gradient(180deg, var(--abyss) 0%, var(--deep) 55%, var(--abyss) 100%); color: var(--on-dark); }
.sec--paper { background: var(--paper); }
.sec--bone { background: var(--bone); }
.sec--ice { background: linear-gradient(170deg, var(--ice), var(--paper) 60%); }
.sec--tight { padding-block: clamp(3rem, 7vh, 5.5rem); }

.sec-head { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.4rem; margin-bottom: clamp(2.4rem, 6vh, 4rem); }
@media (min-width: 900px) {
  .sec-head--split { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: end; gap: 3rem; }
}
.sec-head h2 { margin-top: 0.9rem; }

/* hairline index numbers */
.idx {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  color: var(--ink-3);
}
.sec--dark .idx, .sec--deep .idx { color: var(--on-dark-3); }

/* ------------------------------------------------------------------- about */
.about { display: grid; gap: clamp(2.5rem, 6vw, 5rem); }
@media (min-width: 980px) { .about { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); } }
.about__aside { position: relative; }
.about__vision {
  width: 100%;
  filter: drop-shadow(0 20px 40px rgb(0 104 176 / 0.18));
}
.about__meta { margin-top: 2.2rem; display: grid; gap: 1.6rem; }
.about__meta div { border-top: var(--rule); padding-top: 0.9rem; }
.about__meta dt { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-3); }
.about__meta dd { margin: 0.35rem 0 0; font-family: var(--display); font-size: clamp(1.9rem, 3vw, 2.7rem); line-height: 1; color: var(--tide); }
.about__meta dd small { font-family: var(--sans); font-size: 0.85rem; color: var(--ink-2); letter-spacing: 0; display: block; margin-top: 0.4rem; line-height: 1.4; }
.about__body p { max-width: var(--measure); color: var(--ink-2); }
.about__body p:first-of-type {
  font-family: var(--display);
  font-size: clamp(1.25rem, 1.05rem + 0.85vw, 1.75rem);
  line-height: 1.36;
  color: var(--ink);
  letter-spacing: -0.012em;
}

/* --------------------------------------------------------- modality cards */
.modalities { display: grid; gap: 1.25rem; }
@media (min-width: 860px) { .modalities { grid-template-columns: repeat(3, 1fr); } }
.mcard {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: clamp(320px, 42vh, 460px);
  padding: 1.8rem;
  border-radius: 3px;
  overflow: hidden;
  isolation: isolate;
  color: var(--on-dark);
  background: var(--deep);
}
.mcard--1 { background: radial-gradient(120% 90% at 15% 12%, #0d4f77 0%, #062038 55%, #02101f 100%); }
.mcard--2 { background: radial-gradient(120% 90% at 85% 15%, #12557a 0%, #07253f 55%, #02101f 100%); }
.mcard--3 { background: radial-gradient(120% 90% at 50% 8%, #1d4b63 0%, #08243c 55%, #02101f 100%); }
.mcard__strand {
  position: absolute;
  inset: 0 0 auto 0;
  height: 64%;
  z-index: 0;
  opacity: 0.85;
  background-repeat: no-repeat;
  background-size: 118% 100%;
  background-position: 50% 40%;
  transition: transform 1.2s var(--ease), opacity 0.6s var(--ease);
}
.mcard:hover .mcard__strand { transform: translateY(-6px) scale(1.04); opacity: 1; }
.mcard > *:not(.mcard__strand):not(.mcard__ring):not(.mcard__glow) { position: relative; z-index: 2; }
.mcard::after {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, transparent 0%, transparent 38%, color-mix(in srgb, var(--abyss) 88%, transparent) 78%);
  transition: background 0.6s var(--ease);
  pointer-events: none;
}
.mcard__ring {
  position: absolute;
  top: -18%; right: -22%;
  width: 62%; aspect-ratio: 1;
  z-index: 0;
  border-radius: 50%;
  border: 1px solid rgb(255 255 255 / 0.09);
  box-shadow: inset 0 0 60px color-mix(in srgb, var(--glow) 12%, transparent);
  transition: transform 1.2s var(--ease);
}
.mcard:hover .mcard__ring { transform: scale(1.08) rotate(8deg); }
.mcard__no { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.22em; color: var(--glow); margin-bottom: auto; }
/* long modality names must fit a three-up grid at tablet widths */
.mcard h3 {
  margin-bottom: 0.5rem;
  font-size: clamp(1.45rem, 1rem + 1.5vw, 2.6rem);
  overflow-wrap: anywhere;
  hyphens: auto;
}
.mcard p { color: var(--on-dark-2); font-size: 0.94rem; margin-bottom: 1.1rem; max-width: 34ch; }
.mcard__list { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1.2rem; }
.mcard__list li {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.32rem 0.6rem;
  border: 1px solid rgb(255 255 255 / 0.22);
  border-radius: 999px;
  color: var(--on-dark-2);
}
.mcard__glow {
  position: absolute; inset: 0; z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s var(--ease);
  background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--glow) 28%, transparent), transparent 70%);
}
.mcard:hover .mcard__glow { opacity: 1; }

/* --------------------------------------------------------------- journey */
.journey { position: relative; }
.journey__rail {
  display: grid;
  gap: 1px;
  background: rgb(255 255 255 / 0.1);
  border: 1px solid rgb(255 255 255 / 0.1);
  border-radius: 3px;
  overflow: hidden;
}
@media (min-width: 900px) { .journey__rail { grid-template-columns: repeat(5, 1fr); } }
.jstage {
  background: color-mix(in srgb, var(--abyss) 92%, var(--brine));
  padding: 1.5rem 1.3rem 1.7rem;
  position: relative;
  transition: background 0.5s var(--ease);
}
.jstage:hover { background: color-mix(in srgb, var(--brine) 55%, var(--abyss)); }
.jstage__n { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.2em; color: var(--glow); }
.jstage h4 { font-family: var(--display); font-size: 1.15rem; margin: 0.7rem 0 0.6rem; }
.jstage p { font-size: 0.86rem; color: var(--on-dark-2); margin: 0; }
.jstage__bar { position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--glow), transparent); opacity: 0.5; }
.jstage:nth-child(2) .jstage__bar { background: linear-gradient(90deg, color-mix(in srgb, var(--glow) 70%, var(--tide)), transparent); }
.jstage:nth-child(3) .jstage__bar { background: linear-gradient(90deg, var(--tide), transparent); }
.jstage:nth-child(4) .jstage__bar { background: linear-gradient(90deg, color-mix(in srgb, var(--coral) 60%, var(--tide)), transparent); }
.jstage:nth-child(5) .jstage__bar { background: linear-gradient(90deg, var(--coral), transparent); }

.capability-grid { display: grid; gap: 1px; background: rgb(255 255 255 / 0.1); margin-top: 1px; }
@media (min-width: 760px) { .capability-grid { grid-template-columns: repeat(4, 1fr); } }
.cap { background: var(--abyss); padding: 1.5rem 1.3rem; }
.cap h5 { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--glow); margin-bottom: 0.6rem; }
.cap p { font-size: 0.88rem; color: var(--on-dark-2); margin: 0; }

/* ------------------------------------------------------------ why / pillars */
.pillars { display: grid; gap: 1px; background: color-mix(in srgb, var(--ink) 10%, transparent); border-block: var(--rule); }
@media (min-width: 720px) { .pillars { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .pillars { grid-template-columns: repeat(3, 1fr); } }
.pillar {
  background: var(--paper);
  padding: 2rem 1.8rem 2.2rem;
  position: relative;
  transition: background 0.5s var(--ease);
}
.pillar:hover { background: var(--bone); }
.pillar__n { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.2em; color: var(--tide); }
.pillar h3 { font-family: var(--display); font-size: 1.42rem; margin: 0.9rem 0 0.7rem; letter-spacing: -0.015em; }
.pillar p { font-size: 0.93rem; color: var(--ink-2); margin: 0; }
.pillar::after {
  content: "";
  position: absolute; left: 0; bottom: 0; height: 2px; width: 0;
  background: linear-gradient(90deg, var(--tide), var(--glow));
  transition: width 0.6s var(--ease);
}
.pillar:hover::after { width: 100%; }

/* ------------------------------------------------------------- inspections */
.quality { display: grid; gap: 1px; background: rgb(255 255 255 / 0.11); border: 1px solid rgb(255 255 255 / 0.11); }
@media (min-width: 640px) { .quality { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .quality { grid-template-columns: repeat(6, 1fr); } }
.qcell {
  position: relative;
  background: var(--abyss);
  padding: 1.9rem 1.2rem;
  text-align: center;
  overflow: hidden;
  transition: background 0.45s var(--ease);
}
/* faint measurement grid behind each reading */
.qcell::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgb(255 255 255 / 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / 0.045) 1px, transparent 1px);
  background-size: 22px 22px;
  opacity: 0.9;
  transition: opacity 0.5s var(--ease);
}
.qcell > * { position: relative; }
.qcell:hover { background: color-mix(in srgb, var(--brine) 40%, var(--abyss)); }
.qcell:hover::before { opacity: 0.35; }
.qcell img { height: 22px; width: auto; margin: 0 auto 1rem; opacity: 0.9; }
.qcell__n {
  font-family: var(--display);
  font-size: clamp(2.4rem, 4vw, 3.4rem);
  line-height: 1;
  background: linear-gradient(180deg, var(--on-dark), var(--glow));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.qcell__l { font-size: 0.86rem; color: var(--on-dark); margin-top: 0.5rem; }
.qcell__y { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.14em; color: var(--on-dark-3); margin-top: 0.3rem; }

/* ---------------------------------------------------------------- network */
.network { display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: center; }
@media (min-width: 1000px) { .network { grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr); } }
.globe {
  position: relative;
  aspect-ratio: 1;
  width: min(100%, 620px);
  margin-inline: auto;
}
.globe canvas { width: 100%; height: 100%; }
.globe::before {
  content: "";
  position: absolute; inset: 8%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--tide) 30%, transparent), transparent 62%);
  filter: blur(28px);
}
.sitelist { display: grid; gap: 1px; background: rgb(255 255 255 / 0.11); border-block: 1px solid rgb(255 255 255 / 0.11); }
.site {
  background: var(--abyss);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: 0.95rem 1.1rem;
  transition: background 0.35s var(--ease), padding-left 0.35s var(--ease);
  cursor: pointer;
}
.site:hover, .site.is-active { background: color-mix(in srgb, var(--brine) 55%, var(--abyss)); padding-left: 1.5rem; }
.site__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--glow); box-shadow: 0 0 12px var(--glow); }
.site.is-active .site__dot { background: var(--coral); box-shadow: 0 0 14px var(--coral); }
.site__name { font-size: 0.96rem; font-weight: 500; }
.site__mod { font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--on-dark-3); margin-top: 0.15rem; }
.site__tags { display: flex; gap: 0.3rem; }
.tag {
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border: 1px solid rgb(255 255 255 / 0.24);
  border-radius: 50%;
  font-family: var(--mono); font-size: 0.62rem; color: var(--on-dark-2);
}
.tag--M { border-color: color-mix(in srgb, var(--coral) 60%, transparent); color: var(--coral-soft); }
.tag--D { border-color: color-mix(in srgb, var(--tide) 70%, transparent); color: var(--glow-soft); }

/* ------------------------------------------------------------------- cards */
.cards { display: grid; gap: 1.6rem; }
@media (min-width: 720px) { .cards--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 860px) { .cards--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .cards--4 { grid-template-columns: repeat(4, 1fr); } }

.card { display: flex; flex-direction: column; height: 100%; position: relative; }
.card__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: linear-gradient(135deg, var(--deep), var(--brine));
  border-radius: 2px;
}
.card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(0.72) contrast(1.04);
  transition: transform 1.1s var(--ease), filter 0.7s var(--ease);
}
.card:hover .card__media img { transform: scale(1.06); filter: saturate(1.08) contrast(1.06); }
/* corner ticks — a quiet instrument-panel detail */
.card__media::after {
  content: "";
  position: absolute;
  inset: 0.6rem;
  border: 1px solid rgb(255 255 255 / 0.4);
  border-image: linear-gradient(135deg, rgb(255 255 255 / .55) 0 12%, transparent 12% 88%, rgb(255 255 255 / .55) 88%) 1;
  opacity: 0;
  transition: opacity 0.5s var(--ease), inset 0.5s var(--ease);
  pointer-events: none;
}
.card:hover .card__media::after { opacity: 1; inset: 0.9rem; }
.card__media--empty {
  background: radial-gradient(120% 100% at 20% 10%, #0e4a6d 0%, #062038 55%, #02101f 100%);
}
.card__strand {
  position: absolute;
  inset: 12% -4%;
  background-repeat: no-repeat;
  background-size: 108% 100%;
  opacity: 0.9;
  transition: transform 1s var(--ease);
}
.card:hover .card__strand { transform: translateY(-4px) scale(1.03); }
.card__kicker {
  display: flex; align-items: center; gap: 0.7rem;
  margin: 1rem 0 0.65rem;
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.17em; text-transform: uppercase;
  color: var(--ink-3);
}
.card__kicker b { color: var(--tide); font-weight: 500; }
.sec--dark .card__kicker, .sec--deep .card__kicker { color: var(--on-dark-3); }
.sec--dark .card__kicker b, .sec--deep .card__kicker b { color: var(--glow); }
.card h3 {
  font-family: var(--display);
  font-size: clamp(1.08rem, 1rem + 0.45vw, 1.32rem);
  line-height: 1.22;
  letter-spacing: -0.014em;
  text-wrap: balance;
  transition: color 0.35s var(--ease);
}
.card:hover h3 { color: var(--tide); }
.sec--dark .card:hover h3, .sec--deep .card:hover h3 { color: var(--glow); }
.card p { font-size: 0.9rem; color: var(--ink-2); margin: 0.7rem 0 1rem; }
.sec--dark .card p, .sec--deep .card p { color: var(--on-dark-2); }
.card__foot { margin-top: auto; }
.card--link::after { content: ""; position: absolute; inset: 0; }

/* feature card (first item in an editorial grid) */
.feature { display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
@media (min-width: 900px) { .feature { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); } }
.feature .card__media { aspect-ratio: 16 / 11; }
.feature h3 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.6rem); line-height: 1.08; }
.feature p { font-size: 1.02rem; max-width: 48ch; }

/* -------------------------------------------------------------------- CTA */
.cta {
  position: relative;
  overflow: hidden;
  background: var(--abyss);
  color: var(--on-dark);
  isolation: isolate;
}
/* Static, pre-blurred aurora. Animating a blurred layer forces a re-raster
   every frame and stalls the compositor on long pages — this stays put. */
.cta::before {
  content: "";
  position: absolute; inset: -20%;
  z-index: -1;
  background:
    radial-gradient(45% 45% at 20% 30%, color-mix(in srgb, var(--tide) 55%, transparent), transparent 70%),
    radial-gradient(40% 40% at 80% 70%, color-mix(in srgb, var(--coral) 38%, transparent), transparent 70%),
    radial-gradient(35% 35% at 60% 20%, color-mix(in srgb, var(--glow) 30%, transparent), transparent 70%);
  filter: blur(36px);
}
.cta { contain: paint; }
.cta__inner { display: grid; gap: 2rem; align-items: end; padding-block: clamp(4rem, 10vh, 7rem); }
@media (min-width: 900px) { .cta__inner { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); } }
.cta h2 { max-width: 15ch; }
.cta__actions { display: flex; flex-wrap: wrap; gap: 0.9rem; }
.cta__note { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--on-dark-3); margin-top: 1.4rem; }
.cta__note a { color: var(--glow); border-bottom: 1px solid currentColor; }

/* ----------------------------------------------------------------- footer */
.foot {
  position: relative;
  background: #0b2b5c;
  color: #dce8f5;
  padding-top: clamp(3rem, 8vh, 5rem);
  overflow: hidden;
}
/* oversized wordmark bleeding off the bottom edge */
.foot__mark {
  position: absolute;
  left: 50%; bottom: -0.28em;
  translate: -50% 0;
  font-family: var(--display);
  font-size: clamp(6rem, 20vw, 19rem);
  line-height: 0.8;
  letter-spacing: -0.03em;
  color: rgb(255 255 255 / 0.045);
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}
.foot > .wrap { position: relative; z-index: 1; }
.foot__top { display: grid; gap: 2.5rem; padding-bottom: 3rem; border-bottom: 1px solid rgb(255 255 255 / 0.14); }
@media (min-width: 900px) { .foot__top { grid-template-columns: minmax(0, 1.1fr) minmax(0, 2fr); } }
.foot__brand img { height: 54px; width: auto; margin-bottom: 1.3rem; }
.foot__brand p { font-size: 0.9rem; color: #a8c1de; max-width: 34ch; }
.foot__nav { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.foot__nav h4 { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; color: #79a3d0; margin-bottom: 1rem; }
.foot__nav a { display: block; padding: 0.3rem 0; font-size: 0.9rem; color: #cfdff0; transition: color 0.3s var(--ease), transform 0.3s var(--ease); }
.foot__nav a:hover { color: #fff; transform: translateX(3px); }
.foot__contact li { padding: 0.3rem 0; font-size: 0.9rem; color: #cfdff0; }
.foot__bottom {
  display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; justify-content: space-between;
  padding: 1.5rem 0 2.2rem;
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.1em; color: #7fa6cf;
}
.foot__bottom a:hover { color: #fff; }
.foot__social { display: flex; gap: 0.8rem; }
.foot__social a {
  width: 34px; height: 34px; display: grid; place-items: center;
  border: 1px solid rgb(255 255 255 / 0.22); border-radius: 50%;
  transition: background 0.35s var(--ease), border-color 0.35s;
}
.foot__social a:hover { background: rgb(255 255 255 / 0.14); border-color: transparent; }
.foot__social svg { width: 15px; height: 15px; fill: currentColor; }

/* --------------------------------------------------------------- page hero */
.phero {
  position: relative;
  background: radial-gradient(110% 130% at 78% 0%, var(--shelf) 0%, var(--deep) 42%, var(--abyss) 100%);
  color: var(--on-dark);
  padding: calc(var(--nav-h) + clamp(3.5rem, 9vh, 6.5rem)) 0 clamp(3rem, 7vh, 5rem);
  overflow: hidden;
  isolation: isolate;
}
.phero__strand {
  position: absolute; inset: 0; z-index: -1; opacity: 0.6;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.phero__inner { position: relative; display: grid; gap: 2rem; }
@media (min-width: 980px) { .phero__inner--split { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.9fr); align-items: end; } }
.crumbs { display: flex; flex-wrap: wrap; gap: 0.5rem; font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--on-dark-3); margin-bottom: 1.6rem; }
.crumbs a { transition: color 0.3s; }
.crumbs a:hover { color: var(--glow); }
.crumbs span { opacity: 0.5; }
.phero h1 { max-width: 20ch; }
.phero__meta { display: flex; flex-wrap: wrap; gap: 1.4rem; margin-top: 1.6rem; font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--on-dark-3); }
.phero__figure { position: relative; border-radius: 3px; overflow: hidden; aspect-ratio: 16/10; }
.phero__figure img { width: 100%; height: 100%; object-fit: cover; }

/* ------------------------------------------------------------------- prose */
.article { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (min-width: 1000px) { .article { grid-template-columns: minmax(0, 240px) minmax(0, 1fr); } }
.article__aside { position: sticky; top: calc(var(--nav-h) + 2rem); display: grid; gap: 1.5rem; }
.toc { border-top: var(--rule); padding-top: 1rem; }
.toc h4 { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 0.8rem; }
.toc a { display: block; padding: 0.32rem 0 0.32rem 0.8rem; font-size: 0.85rem; color: var(--ink-2); border-left: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); transition: color 0.3s, border-color 0.3s, padding-left 0.3s; }
.toc a:hover, .toc a.is-active { color: var(--tide); border-left-color: var(--tide); padding-left: 1.1rem; }
.side-link {
  display: block;
  padding: 0.42rem 0;
  font-size: 0.86rem;
  color: var(--ink-2);
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
  transition: color 0.3s var(--ease), padding-left 0.3s var(--ease);
}
.side-link:hover { color: var(--tide); padding-left: 0.35rem; }
.side-link.is-here, .side-nav__head.is-here, .side-nav__root.is-here { color: var(--tide); font-weight: 600; }
.side-nav__root {
  display: block;
  font-family: var(--display);
  font-size: 1.15rem;
  letter-spacing: -0.015em;
  padding-bottom: 0.6rem;
}
.side-nav__root:hover { color: var(--tide); }
.side-nav__group { margin-top: 1.1rem; }
.side-nav__head {
  display: block;
  margin: 0 0 0.35rem;
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}
a.side-nav__head:hover { color: var(--tide); }
.side-nav .side-link { padding-left: 0.75rem; border-left: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); border-bottom: 0; }
.side-nav .side-link:hover, .side-nav .side-link.is-here { border-left-color: var(--tide); padding-left: 1rem; }

.prose { max-width: var(--measure); font-size: 1.045rem; }
.prose > p { color: var(--ink-2); }
.prose > p:first-of-type { font-size: 1.16rem; color: var(--ink); }
.prose--lead > p:first-of-type::first-letter {
  float: left;
  font-family: var(--display);
  font-size: 3.9em;
  line-height: 0.78;
  padding: 0.08em 0.12em 0 0;
  color: var(--tide);
  font-variation-settings: "SOFT" 20, "WONK" 1;
}
.prose .prose-h { font-family: var(--display); letter-spacing: -0.018em; color: var(--ink); text-wrap: balance; }
.prose .prose-h2 { font-size: clamp(1.7rem, 1.3rem + 1.5vw, 2.5rem); margin: 2.8rem 0 1rem; line-height: 1.06; }
.prose .prose-h3 { font-size: clamp(1.35rem, 1.15rem + 0.8vw, 1.85rem); margin: 2.4rem 0 0.9rem; line-height: 1.12; }
.prose .prose-h4 { font-size: 1.22rem; margin: 2rem 0 0.7rem; }
.prose .prose-h5, .prose .prose-h6 {
  font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--tide); margin: 1.9rem 0 0.6rem; font-weight: 500;
}
.prose .prose-h2 + .prose-h3 { margin-top: 1.4rem; }
.prose .prose-list { margin: 0 0 1.4rem; display: grid; gap: 0.5rem; }
.prose .prose-list li { position: relative; padding-left: 1.5rem; color: var(--ink-2); }
.prose .prose-list li::before {
  content: "";
  position: absolute; left: 0; top: 0.68em;
  width: 7px; height: 7px; border-radius: 50%;
  background: linear-gradient(135deg, var(--glow), var(--tide));
}
.prose ol.prose-list { counter-reset: n; }
.prose ol.prose-list li::before { counter-increment: n; content: counter(n, decimal-leading-zero); background: none; font-family: var(--mono); font-size: 0.72rem; color: var(--tide); top: 0.15em; width: auto; height: auto; }
.prose .prose-figure { margin: 2rem 0; }
.prose .prose-figure img { width: 100%; border-radius: 3px; background: var(--bone-2); }
.prose img { border-radius: 3px; }
.prose .prose-quote {
  margin: 2.2rem 0;
  padding: 0.3rem 0 0.3rem 1.6rem;
  border-left: 2px solid var(--glow);
  font-family: var(--display);
  font-size: 1.3rem;
  line-height: 1.4;
  color: var(--ink);
}
.prose .prose-rule { border: 0; border-top: var(--rule); margin: 2.5rem 0; }
.prose .lnk { color: var(--tide); border-bottom: 1px solid color-mix(in srgb, var(--tide) 35%, transparent); transition: border-color 0.3s, color 0.3s; }
.prose .lnk:hover { border-bottom-color: var(--tide); }
.prose ul:not(.prose-list) { display: grid; gap: 0.5rem; margin-bottom: 1.4rem; }
.prose ul:not(.prose-list) li { position: relative; padding-left: 1.5rem; color: var(--ink-2); }
.prose ul:not(.prose-list) li::before { content: ""; position: absolute; left: 0; top: 0.68em; width: 7px; height: 7px; border-radius: 50%; background: linear-gradient(135deg, var(--glow), var(--tide)); }
.prose code { font-family: var(--mono); font-size: 0.88em; background: var(--bone-2); padding: 0.1em 0.35em; border-radius: 2px; }

/* documents */
.docs { display: grid; gap: 0.6rem; margin-top: 2.5rem; }
.doc {
  display: flex; align-items: center; gap: 1rem;
  padding: 1rem 1.2rem;
  border: var(--rule);
  border-radius: 3px;
  transition: border-color 0.35s var(--ease), background 0.35s var(--ease), transform 0.35s var(--ease);
}
.doc:hover { border-color: var(--tide); background: var(--ice); transform: translateX(4px); }
.doc__ext { font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.14em; color: var(--coral); border: 1px solid currentColor; padding: 0.2rem 0.45rem; border-radius: 2px; }
.doc__name { font-size: 0.92rem; font-weight: 500; }

/* pager */
.pager { display: grid; gap: 1px; background: color-mix(in srgb, var(--ink) 11%, transparent); border-block: var(--rule); margin-top: 3rem; }
@media (min-width: 720px) { .pager { grid-template-columns: 1fr 1fr; } }
.pager__side { background: var(--paper); padding: 1.4rem 1.5rem; display: grid; gap: 0.5rem; transition: background 0.4s var(--ease); }
.pager__side:hover { background: var(--ice); }
.pager__side--next { text-align: right; }
.pager__side span { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--tide); }
.pager__side strong { font-family: var(--display); font-size: 1.05rem; font-weight: 400; line-height: 1.25; letter-spacing: -0.01em; }

/* ---------------------------------------------------------------- listings */
.filters { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 2.5rem; }
.filter {
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 0.55rem 1rem;
  border: var(--rule);
  border-radius: 999px;
  color: var(--ink-2);
  transition: all 0.35s var(--ease);
}
.filter:hover { border-color: var(--tide); color: var(--tide); }
.filter.is-on { background: var(--abyss); border-color: var(--abyss); color: var(--on-dark); }

.rows { border-top: var(--rule); }
.row {
  display: grid;
  gap: 0.6rem 2rem;
  align-items: baseline;
  padding: 1.6rem 0;
  border-bottom: var(--rule);
  position: relative;
  transition: padding-left 0.45s var(--ease);
}
@media (min-width: 800px) { .row { grid-template-columns: 130px minmax(0, 1fr) auto; padding-block: 1.9rem; } }
.row:hover { padding-left: 1rem; }
.row__date { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.12em; color: var(--ink-3); }
.row h3 { font-family: var(--display); font-size: clamp(1.15rem, 1rem + 0.7vw, 1.5rem); line-height: 1.2; letter-spacing: -0.015em; transition: color 0.3s; }
.row:hover h3 { color: var(--tide); }
.row p { font-size: 0.9rem; color: var(--ink-2); margin: 0.5rem 0 0; max-width: 68ch; }
.row__go { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--tide); opacity: 0; transform: translateX(-6px); transition: all 0.4s var(--ease); }
.row:hover .row__go { opacity: 1; transform: none; }
.row::after { content: ""; position: absolute; inset: 0; }

/* --------------------------------------------------------------- contact */
.contact-grid { display: grid; gap: clamp(2rem, 5vw, 4rem); }
@media (min-width: 960px) { .contact-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); } }
.form { display: grid; gap: 1.2rem; }
.form__row { display: grid; gap: 1.2rem; }
@media (min-width: 620px) { .form__row { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: 0.45rem; }
.field label { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); }
.field input, .field select, .field textarea {
  font: inherit;
  font-size: 0.95rem;
  min-width: 0;
  max-width: 100%;
  padding: 0.85rem 1rem;
  background: var(--paper);
  border: var(--rule);
  border-radius: 2px;
  color: var(--ink);
  transition: border-color 0.3s, box-shadow 0.3s, background 0.3s;
}
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--tide);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tide) 14%, transparent);
  background: #fff;
}
.consent { display: flex; gap: 0.75rem; align-items: flex-start; font-size: 0.82rem; color: var(--ink-2); }
.consent input { margin-top: 0.25rem; accent-color: var(--tide); }
.form__note { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.13em; color: var(--ink-3); text-transform: uppercase; }

.contact-card { border: var(--rule); border-radius: 3px; padding: 1.8rem; background: var(--paper); }
.contact-card + .contact-card { margin-top: 1.2rem; }
.contact-card h3 { font-family: var(--display); font-size: 1.3rem; margin-bottom: 1rem; }
.contact-card li { padding: 0.45rem 0; border-bottom: 1px dashed color-mix(in srgb, var(--ink) 13%, transparent); font-size: 0.93rem; }
.contact-card li:last-child { border-bottom: 0; }
.contact-card a:hover { color: var(--tide); }

/* --------------------------------------------------------------- facility */
.fac-hero { position: relative; aspect-ratio: 21/9; border-radius: 3px; overflow: hidden; }
.fac-hero img { width: 100%; height: 100%; object-fit: cover; }
.fac-meta { display: grid; gap: 1px; background: color-mix(in srgb, var(--ink) 11%, transparent); border: var(--rule); margin: 2.5rem 0; }
@media (min-width: 720px) { .fac-meta { grid-template-columns: repeat(3, 1fr); } }
.fac-meta div { background: var(--paper); padding: 1.3rem 1.4rem; }
.fac-meta dt { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 0.4rem; }
.fac-meta dd { margin: 0; font-size: 0.95rem; }

/* ------------------------------------------------------------------ events */
.events { display: grid; gap: 1px; background: color-mix(in srgb, var(--ink) 11%, transparent); border-block: var(--rule); }
.event {
  display: grid;
  gap: 1.2rem 2rem;
  align-items: center;
  background: var(--paper);
  padding: 1.4rem 0;
  transition: background 0.4s var(--ease), padding-left 0.4s var(--ease);
}
@media (min-width: 700px) { .event { grid-template-columns: 220px minmax(0, 1fr); padding-inline: 1rem; } }
.event:hover { background: var(--ice); }
.event__media {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 3px;
  border: var(--rule);
  background: #fff;
  padding: 0.6rem;
}
/* these are conference logos, not photography — never crop them */
.event__media img { width: 100%; height: 100%; object-fit: contain; transition: transform 0.9s var(--ease); }
.event:hover .event__media img { transform: scale(1.05); }
.event__date { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--tide); }
.event h3 { font-family: var(--display); font-size: clamp(1.2rem, 1rem + 0.8vw, 1.65rem); line-height: 1.15; letter-spacing: -0.015em; margin: 0.5rem 0 0.35rem; }
.event__where { margin: 0 0 0.9rem; color: var(--ink-2); font-size: 0.92rem; }

/* --------------------------------------------------------------- leadership */
.leaders { display: grid; gap: 1.5rem; }
@media (min-width: 700px) { .leaders { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1050px) { .leaders { grid-template-columns: repeat(3, 1fr); } }
.leader { position: relative; overflow: hidden; border-radius: 3px; background: var(--bone); }
.leader__img { aspect-ratio: 4/5; overflow: hidden; background: linear-gradient(160deg, var(--ice), var(--bone-2)); }
.leader__img img { width: 100%; height: 100%; object-fit: cover; object-position: top center; filter: grayscale(1) contrast(1.05); transition: filter 0.6s var(--ease), transform 1s var(--ease); }
.leader:hover .leader__img img { filter: grayscale(0); transform: scale(1.04); }
.leader__body { padding: 1.3rem 1.4rem 1.6rem; }
.leader h3 { font-family: var(--display); font-size: 1.25rem; letter-spacing: -0.015em; }
.leader p { font-size: 0.88rem; color: var(--ink-2); margin: 0.4rem 0 0; }

/* ---------------------------------------------------------------- catalog */
.catalog-search { display: flex; gap: 0.8rem; flex-wrap: wrap; max-width: 100%; }
.catalog-search input {
  flex: 1 1 260px;
  /* without this the placeholder's intrinsic width blows past the container */
  min-width: 0;
  width: 100%;
  font: inherit;
  font-size: 1rem;
  padding: 1.05rem 1.3rem;
  border: var(--rule);
  border-radius: 999px;
  background: var(--paper);
  transition: border-color 0.3s, box-shadow 0.3s;
}
.catalog-search .btn { flex: 0 0 auto; }
@media (max-width: 560px) {
  .catalog-search .btn { width: 100%; justify-content: center; }
}
.catalog-search input:focus {
  outline: none;
  border-color: var(--tide);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tide) 14%, transparent);
}

.cat-group { margin-bottom: 2.4rem; }
.cat-group > .eyebrow { margin-bottom: 1rem; }
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.45rem 0.9rem;
  border: var(--rule);
  border-radius: 999px;
  font-size: 0.84rem;
  color: var(--ink-2);
  transition: all 0.32s var(--ease);
}
.chip span {
  font-family: var(--mono);
  font-size: 0.66rem;
  color: var(--ink-3);
  padding-left: 0.5em;
  border-left: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
}
a.chip:hover { border-color: var(--tide); color: var(--tide); transform: translateY(-1px); }
.chip--flat { background: var(--bone-2); border-color: transparent; }
.chip--toggle { cursor: pointer; }
.chip--toggle.is-on { background: var(--abyss); border-color: var(--abyss); color: var(--on-dark); }
.chip--toggle.is-on span { color: var(--glow); border-left-color: rgb(255 255 255 / 0.25); }
.chip--clear { cursor: pointer; background: var(--ice); border-color: transparent; font-size: 0.78rem; }
.chip--clear:hover { background: var(--abyss); color: var(--on-dark); }

.browse { display: grid; gap: clamp(1.8rem, 4vw, 3rem); align-items: start; }
@media (min-width: 960px) { .browse { grid-template-columns: 262px minmax(0, 1fr); } }
.browse__rail { display: grid; gap: 1.5rem; position: sticky; top: calc(var(--nav-h) + 1.5rem); }
.browse__block { display: grid; gap: 0.7rem; }
.browse__block .consent { font-size: 0.86rem; }
.browse__bar {
  display: flex; flex-wrap: wrap; gap: 0.8rem 1.4rem; align-items: center;
  padding-bottom: 1.2rem; margin-bottom: 1.6rem; border-bottom: var(--rule);
}
.browse__count { margin: 0; font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); }
.browse__active { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-left: auto; }
.browse__more { display: flex; justify-content: center; margin-top: 2.5rem; }
.browse__empty { grid-column: 1 / -1; color: var(--ink-2); padding: 3rem 0; }

.prod-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.prod {
  display: flex;
  flex-direction: column;
  border: var(--rule);
  border-radius: 3px;
  overflow: hidden;
  background: var(--paper);
  transition: border-color 0.35s var(--ease), transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.prod:hover {
  border-color: var(--tide);
  transform: translateY(-3px);
  box-shadow: 0 20px 40px -26px color-mix(in srgb, var(--tide) 70%, transparent);
}
.prod__media {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  padding: 1rem;
  background: #fff;
  border-bottom: var(--rule);
}
.prod__media img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.prod__body { display: grid; gap: 0.35rem; padding: 0.95rem 1.05rem 1.15rem; }
.prod__id { font-family: var(--mono); font-size: 0.63rem; letter-spacing: 0.1em; color: var(--ink-3); }
.prod__name {
  font-family: var(--display);
  font-size: 1rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.prod__meta { font-size: 0.78rem; color: var(--ink-3); }
.prod__price { margin-top: 0.35rem; font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.08em; color: var(--tide); }

/* product detail */
.product { display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: start; }
@media (min-width: 900px) { .product { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); } }
.product__media {
  position: sticky;
  top: calc(var(--nav-h) + 2rem);
  background: #fff;
  border: var(--rule);
  border-radius: 3px;
  padding: 2rem;
  display: grid;
  place-items: center;
  gap: 1rem;
}
.product__media img { max-width: 100%; height: auto; }
.product__nostructure { color: var(--ink-3); font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; padding: 3rem 0; }
.product__caption { margin: 0; font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); }

.product__facts { display: grid; gap: 1px; background: color-mix(in srgb, var(--ink) 11%, transparent); border: var(--rule); }
@media (min-width: 620px) { .product__facts { grid-template-columns: repeat(2, 1fr); } }
.product__facts > div { background: var(--paper); padding: 1rem 1.2rem; }
.product__facts dt { font-family: var(--mono); font-size: 0.63rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); }
.product__facts dd { margin: 0.3rem 0 0; font-size: 0.95rem; }

.product__prices, .product__chem { margin-top: 2.5rem; }
/* the price table is the one genuinely wide block — it scrolls in its own box */
.ptable-scroll { overflow-x: auto; max-width: 100%; }
.ptable { width: 100%; min-width: 420px; border-collapse: collapse; font-size: 0.92rem; }
.ptable th {
  text-align: left;
  font-family: var(--mono); font-size: 0.63rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 500;
  padding: 0 0.8rem 0.7rem 0; border-bottom: var(--rule);
}
.ptable td { padding: 0.85rem 0.8rem 0.85rem 0; border-bottom: var(--rule); }
.ptable tr:hover td { background: color-mix(in srgb, var(--ice) 60%, transparent); }
.ptable__sku { font-family: var(--mono); font-size: 0.76rem; color: var(--ink-2); }
.ptable__go { text-align: right; }
.ptable .quote { color: var(--ink-3); font-style: italic; }
.ptable tr.is-off { opacity: 0.5; }
.product__note { margin-top: 1rem; font-size: 0.8rem; color: var(--ink-3); }

.chemrow { display: grid; grid-template-columns: 130px minmax(0, 1fr) auto; gap: 1rem; align-items: start; padding: 0.8rem 0; border-bottom: var(--rule); }
@media (max-width: 620px) {
  .chemrow { grid-template-columns: minmax(0, 1fr) auto; }
  .chemrow__k { grid-column: 1 / -1; padding-top: 0; }
}
.chemrow__k { font-family: var(--mono); font-size: 0.63rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); padding-top: 0.2rem; }
.chemrow__v { font-family: var(--mono); font-size: 0.78rem; line-height: 1.5; word-break: break-all; background: none; padding: 0; }
.chemrow__copy {
  font-family: var(--mono); font-size: 0.63rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--tide); border: var(--rule); border-radius: 999px; padding: 0.3rem 0.7rem;
  transition: all 0.3s var(--ease);
}
.chemrow__copy:hover { background: var(--tide); border-color: var(--tide); color: #fff; }
.product__actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 2.5rem; }
.product__tags { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 2rem; }

@media (max-width: 900px) {
  .browse__rail, .product__media { position: static; }
}

/* ------------------------------------------------------------- site index */
.index-group { margin-bottom: 3rem; }
.index-group__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding-bottom: 0.8rem; margin-bottom: 1.2rem; border-bottom: var(--rule);
}
.index-list { columns: 1; column-gap: 2.5rem; }
@media (min-width: 720px) { .index-list { columns: 2; } }
@media (min-width: 1150px) { .index-list { columns: 3; } }
.index-list li { break-inside: avoid; margin-bottom: 0.15rem; }
.index-list a {
  display: flex; align-items: baseline; gap: 0.8rem; justify-content: space-between;
  padding: 0.42rem 0;
  font-size: 0.9rem;
  color: var(--ink-2);
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 7%, transparent);
  transition: color 0.3s var(--ease), padding-left 0.3s var(--ease);
}
.index-list a:hover { color: var(--tide); padding-left: 0.4rem; }
.index-list em {
  font-style: normal;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  color: var(--ink-3);
  white-space: nowrap;
}

/* legal + dense prose variants */
.prose--legal { font-size: 0.98rem; }
.prose--legal .prose-h2 { font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.7rem); margin-top: 2.4rem; }
.prose--legal .prose-h3 { font-size: 1.15rem; }
.prose--legal > p { color: var(--ink-2); }
.prose--legal > p:first-of-type { font-size: 1.05rem; }
.prose--dense { font-size: 0.95rem; max-width: 78ch; }
.prose--dense .prose-h5, .prose--dense .prose-h6 { margin-top: 1.5rem; }
.prose--dense .prose-list { gap: 0.3rem; }

mark { background: color-mix(in srgb, var(--glow) 38%, transparent); color: inherit; padding: 0 0.12em; border-radius: 2px; }

/* ------------------------------------------------------------ cursor glow */
.cursor-glow {
  position: fixed;
  top: 0; left: 0;
  width: 420px; height: 420px;
  margin: -210px 0 0 -210px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 5;
  opacity: 0;
  transition: opacity 0.5s var(--ease);
  background: radial-gradient(circle, color-mix(in srgb, var(--glow) 16%, transparent) 0%, transparent 62%);
}
.cursor-glow.is-on { opacity: 1; }

/* --------------------------------------------------------------- chapters */
.chapters {
  position: fixed;
  right: clamp(0.9rem, 2vw, 2rem);
  top: 50%;
  translate: 0 -50%;
  z-index: 500;
  display: none;
  flex-direction: column;
  gap: 0.15rem;
}
@media (min-width: 1250px) { .chapters { display: flex; } }
.chapters a {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  justify-content: flex-end;
  padding: 0.4rem 0;
}
.chapters__dot {
  width: 22px; height: 1px;
  background: color-mix(in srgb, currentColor 40%, transparent);
  color: var(--ink-3);
  transition: width 0.45s var(--ease), background 0.45s var(--ease);
}
.chapters a.is-on .chapters__dot { width: 40px; background: var(--tide); }
.chapters__label {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  opacity: 0;
  transform: translateX(6px);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease), color 0.4s;
  order: -1;
}
.chapters a:hover .chapters__label, .chapters a.is-on .chapters__label { opacity: 1; transform: none; }
.chapters a.is-on .chapters__label { color: var(--tide); }
/* the rail sits over both grounds — invert against dark sections */
body.on-dark .chapters__dot { color: var(--on-dark-3); }
body.on-dark .chapters a.is-on .chapters__dot { background: var(--glow); }
body.on-dark .chapters__label { color: var(--on-dark-3); }
body.on-dark .chapters a.is-on .chapters__label { color: var(--glow); }

/* ------------------------------------------------------- section dividers */
.divider {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: 0 var(--gutter);
  width: min(100% - (var(--gutter) * 2), var(--maxw));
  margin-inline: auto;
}
.divider::before, .divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--ink) 18%, transparent), transparent);
}
.divider span {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
}
.sec--dark + .divider, .sec--deep + .divider { background: var(--abyss); }

/* ----------------------------------------------------------------- reveal */
[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
  transition-delay: var(--delay, 0s);
}
[data-reveal].is-in { opacity: 1; transform: none; }
[data-reveal="clip"] { clip-path: inset(0 0 100% 0); opacity: 1; transform: none; transition: clip-path 1.1s var(--ease); }
[data-reveal="clip"].is-in { clip-path: inset(0 0 0 0); }

/* count-up numerals hold their width */
.num { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------- responsive */
@media (max-width: 1320px) {
  .nav__tools { display: none; }
}
@media (max-width: 1080px) {
  .nav__links { display: none; }
  .burger { display: block; margin-left: auto; }
}
@media (max-width: 700px) {
  :root { --nav-h: 66px; }
  .hero__scroll { display: none; }
  .brand img { height: 34px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1; transform: none; clip-path: none; }
  .hero h1 .line > span { transform: none; }
  .hero__sub, .hero__actions { opacity: 1; }
}