/* The Scientific Unlimited — "Graduated" design system (see tsu-site-src/DESIGN.md).
   Sections are open, never boxed. Text sits on a 12-column grid; only photographs bleed past it.
   Glass appears only where real glass would: floating over photographs. All colours are tokens. */
:root {
  /* Palette: off-white, white, TSU red and a very light red. "graphite" is now the deep red used for
     dark bands and solid controls; body text is a red-tinted charcoal so paragraphs stay readable. */
  --graphite: #6f120b;
  --graphite-2: #560d07;
  --lab: #f7f5f4;
  --lab-2: #fbefed;
  --boro: #f8dfdb;
  --red: #9b1c14;
  --red-600: #b3241a;
  --red-800: #6f120b;
  --steel: #6e625f;
  --white: #ffffff;
  --text: #231a19;
  --muted: var(--steel);
  --on-dark: rgba(255, 255, 255, 0.92);
  --on-dark-muted: rgba(255, 255, 255, 0.66);
  --hair: rgba(58, 14, 10, 0.12);
  --hair-dark: rgba(255, 255, 255, 0.14);

  --glass-bg: rgba(255, 255, 255, 0.62);
  --glass-bg-dark: rgba(58, 14, 10, 0.42);
  --glass-edge: rgba(255, 255, 255, 0.6);
  --glass-blur: blur(20px) saturate(1.5);
  --glass-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 24px 48px -28px rgba(58, 14, 10, 0.45);
  --image-outline: oklch(0 0 0 / 0.1);

  --font: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-serif: "Instrument Serif", Georgia, serif;

  --wrap: 1320px;
  --gutter: clamp(20px, 4vw, 48px);
  --col: calc(var(--wrap) / 12);
  --space: clamp(88px, 11vw, 168px);
  --space-sm: clamp(56px, 7vw, 104px);
  --gap: clamp(16px, 2vw, 28px);
  --radius: 18px;
  --radius-lg: 28px;
  --header-h: 64px;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --dur-press: 150ms;
  --dur-fast: 150ms;
  --dur-ui: 200ms;
  --dur-enter: 300ms;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 48px); }
/* Lenis inertia scrolling (main.js, desktop pointers only): the browser's own smoothing must stay off while it drives */
html.lenis { scroll-behavior: auto; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth iframe { pointer-events: none; }
body { margin: 0; background: var(--lab); color: var(--text); font: 400 17px/1.6 var(--font); -webkit-font-smoothing: antialiased; overflow-x: clip; font-feature-settings: "ss01"; }
img, video { max-width: 100%; display: block; }
picture { display: contents; }
a { color: inherit; }
a, button, summary, label { -webkit-tap-highlight-color: transparent; }
h1, h2, h3, h4 { font-family: var(--font); font-weight: 600; letter-spacing: -0.03em; line-height: 1.04; margin: 0 0 0.45em; text-wrap: balance; overflow-wrap: break-word; }
h1 { font-size: clamp(2.6rem, 7vw, 6.6rem); letter-spacing: -0.045em; line-height: 0.98; }
h2 { font-size: clamp(1.7rem, 4.2vw, 3.6rem); }
h3 { font-size: 1.25rem; letter-spacing: -0.015em; line-height: 1.25; }
h1 em, h2 em, h3 em { font: inherit; color: inherit; letter-spacing: inherit; }
p, li, blockquote, figcaption { text-wrap: pretty; overflow-wrap: break-word; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
.num, .stat-num, .hero-stats b { font-variant-numeric: tabular-nums; }
svg { width: 1.1em; height: 1.1em; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: none; }
svg * { vector-effect: non-scaling-stroke; }
.btn svg, .main-nav svg, .icon-btn svg, .link-arrow svg, .range-cta svg, .go svg, .entry-ico svg, .rail-btn svg, .search-field svg { stroke-width: 2; }
svg.fill, svg .fill { fill: currentColor; stroke: none; }
:focus-visible { outline: 2px solid var(--red-600); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--red); color: var(--white); }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 200; background: var(--graphite); color: var(--white); padding: 10px 16px; border-radius: 10px; }
.skip:focus { left: 8px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Grid ---------- */
.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: var(--space) 0; position: relative; }
.section-tight { padding: var(--space-sm) 0; position: relative; }
/* Two neighbouring sections on the same plain background each keep their full spacing and are divided by a
   hairline on the grid, so they read as separate sections rather than one merged block */
.section:not([class*="bg-"]) + .section:not([class*="bg-"])::before {
  content: ""; position: absolute; top: 0; left: 50%; translate: -50% 0; height: 1px; background: var(--hair);
  width: min(var(--wrap), calc(100% - 2 * var(--gutter)));
}
.bg-ink { background: var(--graphite); color: var(--on-dark); }
/* large red bands use the deep red: the user asked (2026-10-31) not to use TSU red #9b1c14 for big blocks,
   only for buttons and small accents */
.bg-red { background: var(--graphite); color: var(--white); }
.bg-tint { background: var(--lab-2); }
.bg-white { background: var(--white); }
.bg-ink + .bg-ink, .bg-tint + .bg-tint, .bg-red + .bg-red { padding-top: 0; }
main > .section:first-child, main > .section-tight:first-child { padding-top: calc(var(--header-h) + var(--space-sm)); }

/* Full-bleed grid: photographs run to the viewport edge, text stays on the 12 columns.
   Lines: 1 full-start, 2 content-start (col 1), 2+n start of col n+1, 14 content-end, 15 full-end. */
.bleed { display: grid; align-items: center; row-gap: 48px;
  grid-template-columns: [full-start] minmax(var(--gutter), 1fr) [content-start] repeat(12, minmax(0, var(--col))) [content-end] minmax(var(--gutter), 1fr) [full-end]; }
/* Shared vertical lines across the site: columns 1, 4, 7 and 10. Photos take one half and bleed,
   text takes the other half starting on column 7 (or ending on column 6), with column 6 as the gutter. */
.bleed > * { grid-column: content-start / content-end; }
.bleed-left > .bleed-media { grid-column: full-start / 7; }
.bleed-left > .bleed-text { grid-column: 8 / content-end; }
.bleed-right > .bleed-media { grid-column: 8 / full-end; grid-row: 1; }
.bleed-right > .bleed-text { grid-column: content-start / 7; grid-row: 1; }
/* photos stay supporting: never taller than ~70% of the window, centred against their text */
.bleed-media { position: relative; height: 100%; min-height: clamp(280px, 30vw, 440px); max-height: min(70svh, 540px); overflow: hidden; }
.bleed-left > .bleed-media { border-radius: 0 var(--radius-lg) var(--radius-lg) 0; }
.bleed-right > .bleed-media { border-radius: var(--radius-lg) 0 0 var(--radius-lg); }
.bleed-media > img, .bleed-media > picture > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.cols { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 40px; }
/* spans set only the end, so a .start-N class can place the same element */
.span-4 { grid-column-end: span 4; } .span-5 { grid-column-end: span 5; } .span-6 { grid-column-end: span 6; }
.span-7 { grid-column-end: span 7; } .span-8 { grid-column-end: span 8; } .span-12 { grid-column: 1 / -1; }
.start-8 { grid-column-start: 8; } .start-7 { grid-column-start: 7; }

.grid { display: grid; gap: var(--gap); }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* Two-part layouts sit on the 12 columns: first part columns 1-5, second part from column 7 */
.split { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 48px; align-items: center; }
.split > :first-child { grid-column: 1 / 6; }
.split > :last-child { grid-column: 7 / -1; }
.split.top { align-items: start; }
.sticky-col { position: sticky; top: calc(var(--header-h) + 48px); }

/* Headings in half-width columns scale with their column (container units), so the bound last two words
   always fit on one line and a heading never strands a word. */
.section-head > *, .split > *, .bleed-text { container-type: inline-size; }
.section-head h2, .split h2, .bleed-text h2 { font-size: clamp(1.55rem, min(4.2vw, 7.4cqi), 3.6rem); }

/* ---------- Type helpers ---------- */
.eyebrow { display: block; font: 500 1rem/1.3 var(--font); color: var(--red); margin: 0 0 18px; }
.bg-ink .eyebrow, .bg-red .eyebrow, .eyebrow.light { color: var(--on-dark-muted); }
.lead { font-size: clamp(1.08rem, 1.5vw, 1.3rem); line-height: 1.55; color: var(--muted); max-width: 58ch; }
.bg-ink .lead, .bg-red .lead { color: var(--on-dark-muted); }
.section-head { margin-bottom: clamp(48px, 6vw, 88px); max-width: 860px; }
.section-head.split { max-width: none; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 20px; align-items: end; }
.section-head.split > :first-child { grid-column: 1 / 7; }
.section-head.split > :last-child { grid-column: 7 / -1; }
.section-head h2:last-child, .section-head .lead { margin-bottom: 0; }
.prose p { color: var(--muted); }
.prose p:first-child { color: var(--text); font-size: 1.15rem; }
.bg-ink .prose p { color: var(--on-dark-muted); }
.bg-ink .prose p:first-child { color: var(--on-dark); }
.prose + .btn, .prose + .btn-row, .lead + .btn-row { margin-top: 36px; }
.check-list { list-style: none; padding: 0; margin: 32px 0 0; display: grid; gap: 12px; }
.check-list li { display: flex; gap: 12px; align-items: baseline; color: var(--muted); }
.check-list li::before { content: ""; width: 10px; height: 10px; flex: none; border-radius: 50%; border: 2px solid var(--red); translate: 0 1px; }
.note { font-size: 0.86rem; color: var(--muted); max-width: 80ch; }
.bg-ink .note, .bg-red .note { color: var(--on-dark-muted); }

/* ---------- Buttons ---------- */
.btn { --b: var(--graphite); --c: var(--white);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 26px;
  border-radius: 999px; border: 1px solid var(--b); background: var(--b); color: var(--c); font: 600 0.96rem/1 var(--font);
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition-property: background-color, color, border-color, scale; transition-duration: var(--dur-fast), var(--dur-fast), var(--dur-fast), var(--dur-press); transition-timing-function: ease, ease, ease, ease-out; }
.btn:has(> svg) { padding-inline-start: 24px; }
.btn:not(:disabled):active { scale: 0.96; }
.btn-red { --b: var(--red); }
.btn-white { --b: var(--white); --c: var(--graphite); }
.btn-outline { background: transparent; color: var(--graphite); border-color: rgba(58, 14, 10, 0.28); }
.bg-ink .btn-outline { color: var(--white); border-color: rgba(255, 255, 255, 0.35); }
.btn-ghost-light { background: rgba(255, 255, 255, 0.12); color: var(--white); border-color: rgba(255, 255, 255, 0.4); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.btn-sm { min-height: 42px; padding: 0 18px; font-size: 0.88rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.btn-row:first-child { margin-top: 0; }
.link-arrow { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--red); text-decoration: none; }
.bg-ink .link-arrow { color: var(--white); }
.link-arrow svg { transition: translate var(--dur-fast) var(--ease-out); }

/* ---------- Header: one floating glass pill ---------- */
.site-header { position: fixed; inset: 0 0 auto; z-index: 100; padding-top: 14px; pointer-events: none; transition: transform 250ms var(--ease-out); }
.site-header .wrap { pointer-events: auto; }
/* three equal-weight zones so the menu sits on the pill's true centre, whatever the logo and actions widths */
.header-inner { height: var(--header-h); display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; column-gap: 16px; padding: 0 10px; border-radius: 999px; }
/* equal padding on both sides keeps the grid centre on the pill centre; the logo gets its inset itself */
.header-inner > .brand { justify-self: start; margin-left: 12px; }
.glass { background: var(--glass-bg); border: 1px solid var(--glass-edge); box-shadow: var(--glass-shadow); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); }
.brand { display: block; flex: none; }
.brand img { height: 28px; width: auto; }
.main-nav { display: flex; align-items: center; gap: 2px; justify-self: center; }
.main-nav > a, .dd-btn { display: inline-flex; align-items: center; gap: 4px; height: 40px; padding: 0 14px; border-radius: 999px; font: 500 0.92rem/1 var(--font); color: var(--text); text-decoration: none; background: none; border: 0; cursor: pointer; transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease; }
.main-nav > a[aria-current], .dd.is-current > .dd-btn { background: var(--graphite); color: var(--white); }
.dd { position: relative; }
.dd-btn svg { width: 14px; height: 14px; transition: rotate var(--dur-ui) var(--ease-out); }
.dd-menu { position: absolute; top: calc(100% + 12px); left: 50%; min-width: 260px; padding: 8px; border-radius: 20px;
  background: rgba(255, 255, 255, 0.86); border: 1px solid var(--glass-edge); box-shadow: var(--glass-shadow); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  opacity: 0; visibility: hidden; transform: translateX(-50%) scale(0.97); transform-origin: top center;
  transition: opacity var(--dur-fast) ease-out, transform var(--dur-ui) var(--ease-out), visibility var(--dur-ui); }
.dd-menu::before { content: ""; position: absolute; inset: -14px 0 auto; height: 14px; }
.dd-menu a { display: flex; align-items: center; justify-content: space-between; padding: 11px 14px; border-radius: 12px; text-decoration: none; font-size: 0.93rem; color: var(--text); transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease; }
.dd-menu a[aria-current] { color: var(--red); font-weight: 600; }
.dd-menu .dd-all { font-weight: 600; border-bottom: 1px solid var(--hair); border-radius: 12px 12px 6px 6px; margin-bottom: 4px; }
.dd.open .dd-menu { opacity: 1; visibility: visible; transform: translateX(-50%) scale(1); }
.dd.open .dd-btn svg { rotate: 180deg; }
.header-actions { display: flex; align-items: center; gap: 8px; justify-self: end; grid-column: 3; }
.icon-btn { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--hair); background: rgba(255, 255, 255, 0.5); color: var(--text); cursor: pointer; transition: background-color var(--dur-fast) ease, scale var(--dur-press) ease-out; }
.icon-btn:active { scale: 0.96; }
.header-cta { min-height: 44px; }
.burger { display: none; }
.burger span { grid-area: 1 / 1; display: block; width: 18px; height: 1.5px; background: currentColor; transition: transform var(--dur-ui) var(--ease-out); }
.burger span:first-child { transform: translateY(-3px); }
.burger span:last-child { transform: translateY(3px); }
.nav-open .burger span:first-child { transform: rotate(45deg); }
.nav-open .burger span:last-child { transform: rotate(-45deg); }
.main-nav > .nav-cta-mobile { display: none; }
.site-header.hide { transform: translateY(calc(-100% - 16px)); }

/* ---------- Thermometer (signature, desktop) ----------
   A glass thermometer centred in the right margin (moved from the left at the user's request, 2026-10-31): the red column rises with page progress and the reading
   under the bulb counts to 100°. It is 22px wide, so it stays clear of text down to 1025px; over photographs
   and dark bands it turns to clear glass (main.js sets .on-dark). */
.gauge { display: none; }
@media (min-width: 1025px) {
  .gauge {
    --margin: max(var(--gutter), (100vw - var(--wrap)) / 2);
    display: block; position: fixed; z-index: 60; top: 50%; translate: 0 -50%; right: max(8px, var(--margin) / 2 - 11px);
    width: 22px; height: min(50vh, 460px); pointer-events: none; }
  .gauge-tube { position: absolute; left: 10px; top: 0; bottom: 10px; width: 8px; overflow: hidden; border-radius: 4px 4px 0 0;
    background: rgba(255, 255, 255, 0.6); border: 1px solid rgba(58, 14, 10, 0.22); border-bottom: 0; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
  .gauge-fill { position: absolute; inset: 0; background: var(--red); transform-origin: bottom; transform: scaleY(var(--p, 0)); }
  .gauge-bulb { position: absolute; left: 6px; bottom: -4px; width: 16px; height: 16px; border-radius: 50%; background: var(--red);
    box-shadow: 0 0 0 1px rgba(58, 14, 10, 0.22), inset 0 -3px 5px rgba(58, 14, 10, 0.35), inset 3px 3px 3px rgba(255, 255, 255, 0.35); }
  .gauge-ticks { position: absolute; left: 0; top: 0; bottom: 10px; width: 8px;
    background: repeating-linear-gradient(to top, rgba(58, 14, 10, 0.55) 0 1px, transparent 1px 10%) right / 8px 100% no-repeat,
                repeating-linear-gradient(to top, rgba(58, 14, 10, 0.3) 0 1px, transparent 1px 2%) right / 4px 100% no-repeat; }
  .gauge-read { position: absolute; left: 14px; top: calc(100% + 14px); translate: -50% 0; font: 600 0.68rem/1 var(--font); color: var(--steel); font-variant-numeric: tabular-nums; white-space: nowrap; }
  .gauge.on-dark .gauge-tube { background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.4); }
  .gauge.on-dark .gauge-bulb { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4), inset 0 -3px 5px rgba(58, 14, 10, 0.35), inset 3px 3px 3px rgba(255, 255, 255, 0.35); }
  .gauge.on-dark .gauge-ticks { filter: invert(1); }
  .gauge.on-dark .gauge-read { color: rgba(255, 255, 255, 0.78); }
}
@media (min-width: 1025px) and (prefers-reduced-motion: no-preference) {
  /* reaching the end of the page warms the bulb once */
  .gauge.is-full .gauge-bulb { animation: bulb-warm 1.2s var(--ease-out) both; }
  @keyframes bulb-warm { 40% { box-shadow: 0 0 0 1px rgba(58, 14, 10, 0.22), 0 0 0 7px rgba(179, 36, 26, 0.22), 0 0 18px 6px rgba(179, 36, 26, 0.35); } }
}

/* ---------- Lab details (see DESIGN.md "Signature details") ---------- */
/* Element tiles: each product range as a periodic-table square (number, symbol, ranges as its "mass") */
.element { display: inline-grid; grid-template-rows: auto 1fr auto; flex: none; width: 58px; aspect-ratio: 1; padding: 6px 7px 5px;
  border: 1.5px solid currentColor; border-radius: 10px; color: var(--red); background: var(--white); font-family: var(--font);
  line-height: 1; letter-spacing: 0; text-align: left; transition: background-color var(--dur-ui) ease, color var(--dur-ui) ease; }
.el-n { font-size: 0.62rem; font-weight: 500; font-variant-numeric: tabular-nums; }
.el-sym { align-self: center; font-size: 1.5rem; font-weight: 600; letter-spacing: -0.03em; }
.el-m { font-size: 0.52rem; font-weight: 500; opacity: 0.8; white-space: nowrap; }
.el-name { display: none; }
.index-name { display: flex; align-items: center; gap: clamp(14px, 1.6vw, 24px); }
.hub-row .element { display: grid; width: 64px; margin-bottom: 20px; }
.el-mini { display: inline-grid; place-items: center; flex: none; width: 26px; height: 26px; border: 1px solid currentColor; border-radius: 7px;
  font: 600 0.72rem/1 var(--font); letter-spacing: -0.01em; color: var(--red); }
.dd-menu a:has(.el-mini) { justify-content: flex-start; gap: 12px; }
/* the large tile on each product page's hero: glass, since it floats over the photograph */
.page-hero > .wrap { position: relative; }
.el-hero { position: absolute; right: var(--gutter); bottom: clamp(36px, 4.5vw, 64px); width: 132px; padding: 12px 14px 11px; border-radius: 18px;
  grid-template-rows: auto 1fr auto auto; color: var(--white); background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.42);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
  animation: enter-fade var(--dur-enter) var(--ease-out) 420ms both; }
.el-hero .el-n { font-size: 0.8rem; }
.el-hero .el-sym { font-size: 3.4rem; }
.el-hero .el-name { display: block; font-size: 0.82rem; font-weight: 500; margin-bottom: 3px; }
.el-hero .el-m { font-size: 0.7rem; }
@media (prefers-reduced-motion: no-preference) { .el-hero { animation-name: enter-rise; } }
@media (max-width: 1024px) { .el-hero { display: none; } }
/* below 1180px the name column is too narrow for the tile and a two-word name (as for the hover preview) */
@media (max-width: 1180px) { .index-name .element { display: none; } }
@media (hover: hover) and (pointer: fine) {
  .index-row:hover .element { background: var(--red); color: var(--white); border-color: var(--red); }
}

/* Sample labels: each section's first label carries a running number, like a vial in a rack */
.eb-no { display: inline-grid; place-items: center; min-width: 2.3em; height: 1.55em; padding: 0 0.45em; margin-right: 0.7em;
  border: 1px solid currentColor; border-radius: 0.4em; font-size: 0.76em; font-weight: 600; font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em; vertical-align: 0.1em; }

/* Footer: slow bubbles through the deep red, and a founding label */
.bubbles { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.bubbles i { position: absolute; bottom: -24px; left: var(--x); width: var(--s); aspect-ratio: 1; border-radius: 50%; opacity: 0;
  border: 1px solid rgba(255, 255, 255, 0.3); background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0) 55%); }
@media (prefers-reduced-motion: no-preference) {
  .site-footer.is-live .bubbles i { animation: bubble-rise var(--d) linear var(--t) infinite, bubble-sway calc(var(--d) / 4) ease-in-out var(--t) infinite alternate; }
}
@keyframes bubble-rise { 0% { translate: 0 0; opacity: 0; } 10% { opacity: 0.9; } 75% { opacity: 0.55; } 100% { translate: 0 -95vh; opacity: 0; } }
@keyframes bubble-sway { from { transform: translateX(-5px); } to { transform: translateX(5px); } }
.footer-brand .specimen { display: inline-flex; flex-wrap: wrap; max-width: none; margin: 0 0 14px; border: 1px dashed rgba(155, 28, 20, 0.35);
  border-radius: 8px; font-size: 0.74rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.specimen span { padding: 4px 10px; }
.specimen span + span { border-left: 1px dashed rgba(155, 28, 20, 0.35); }

/* 404: a knocked-over beaker */
.spill-fig { margin: 0; align-self: center; }
.spill { display: block; width: 100%; max-width: 520px; height: auto; margin-inline: auto; overflow: visible; }
.spill-floor { fill: none; stroke: rgba(58, 14, 10, 0.18); stroke-width: 1.5; stroke-linecap: round; }
.spill-glass { fill: rgba(255, 255, 255, 0.78); stroke: var(--graphite); stroke-width: 1.6; stroke-linejoin: round; }
.spill-lip { fill: none; stroke: var(--graphite); stroke-width: 1.6; stroke-linecap: round; }
.spill-ticks { stroke: var(--graphite); stroke-width: 1.4; stroke-linecap: round; opacity: 0.55; }
.spill-liquid, .spill-puddle, .spill-drop { fill: var(--red); }
.spill-stream { fill: none; stroke: var(--red); stroke-width: 6; stroke-linecap: round; }
@media (prefers-reduced-motion: no-preference) {
  .spill-drop { transform-box: fill-box; transform-origin: center; animation: spill-drip 2.8s cubic-bezier(0.5, 0, 0.75, 0) infinite; }
  .spill-puddle { transform-box: fill-box; transform-origin: 85% 50%; animation: spill-spread 5.6s ease-in-out infinite alternate; }
}
@keyframes spill-drip { 0%, 35% { opacity: 0; transform: translate(0, 0) scale(0.4); } 45% { opacity: 1; transform: translate(-2px, 0) scale(1); }
  85% { opacity: 1; transform: translate(-7px, 10px) scale(1); } 100% { opacity: 0; transform: translate(-8px, 11px) scale(1.6, 0.3); } }
@keyframes spill-spread { from { transform: scaleX(0.94); } to { transform: scaleX(1); } }

/* ---------- Search ---------- */
.search { position: fixed; inset: 0; z-index: 150; background: rgba(58, 14, 10, 0.4); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: flex; justify-content: center; align-items: flex-start; padding: 12vh 16px 16px; }
.search[hidden] { display: none; }
.search-panel { width: min(640px, 100%); background: rgba(255, 255, 255, 0.9); border: 1px solid var(--glass-edge); border-radius: 24px; box-shadow: var(--glass-shadow); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); overflow: hidden; }
.search-field { display: flex; align-items: center; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--hair); color: var(--muted); }
.search-field input { flex: 1; border: 0; font: 500 1.1rem var(--font); color: var(--text); outline: none; background: none; min-width: 0; }
.search-close { border: 1px solid var(--hair); background: var(--white); border-radius: 8px; padding: 4px 8px; font-size: 0.75rem; color: var(--muted); cursor: pointer; }
.search-results { list-style: none; margin: 0; padding: 8px; max-height: 60vh; overflow: auto; overscroll-behavior: contain; }
.search-results a { display: block; padding: 12px 14px; border-radius: 14px; text-decoration: none; }
.search-results a.active { background: var(--lab); }
.search-results b { display: block; font-weight: 600; }
.search-results span { font-size: 0.875rem; color: var(--muted); }
.search-results .empty { padding: 16px; color: var(--muted); }

/* ---------- Intro greeting ---------- */
.intro { position: fixed; inset: 0; z-index: 300; background: var(--graphite); color: var(--white); display: grid; place-items: center; clip-path: inset(0 0 0 0); transition: clip-path 600ms var(--ease-in-out); }
.intro.done { clip-path: inset(0 0 100% 0); }
.intro-word { font: 600 clamp(2.5rem, 8vw, 5.5rem)/1 var(--font); letter-spacing: -0.04em; display: flex; align-items: center; gap: 18px; }
.intro-word::before { content: ""; width: 14px; height: 14px; border-radius: 50%; background: var(--red-600); }
.intro-word span { display: inline-block; animation: word var(--dur-enter) var(--ease-out); }
@keyframes word { from { opacity: 0; transform: translateY(12px); filter: blur(4px); } }

/* ---------- Heroes: full bleed ---------- */
.hero, .page-hero { position: relative; isolation: isolate; overflow: hidden; color: var(--white); background: var(--graphite); }
.hero { min-height: 100svh; display: flex; align-items: flex-end; }
.hero-media, .hero-media video, .hero-media img, .page-hero > img, .page-hero > picture > img, .page-hero > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(58, 14, 10, 0.45) 0%, rgba(58, 14, 10, 0.1) 30%, rgba(58, 14, 10, 0.78) 100%); }
.page-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(58, 14, 10, 0.5) 0%, rgba(58, 14, 10, 0.25) 40%, rgba(58, 14, 10, 0.85) 100%); }
.page-hero.red::after { background: linear-gradient(180deg, rgba(111, 18, 11, 0.55), rgba(111, 18, 11, 0.92)); }
.hero-inner { width: 100%; padding-top: calc(var(--header-h) + 64px); padding-bottom: clamp(20px, 3vw, 36px); }
/* sized by the smaller of width and height so the whole hero, stats included, fits short laptop screens */
.hero h1 { max-width: 14ch; margin-bottom: 24px; font-size: clamp(2.4rem, min(5.6vw, 8.4vh), 5.4rem); }
.hero .lead { font-size: clamp(1.02rem, min(1.5vw, 2.4vh), 1.3rem); }
.hero .lead, .page-hero .lead { color: rgba(255, 255, 255, 0.86); }
/* the stats strip is clear frosted glass over the film: a light sheen, a bright top edge, no tint of its own */
.hero-foot { position: relative; margin-top: clamp(40px, 7vh, 80px); display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: stretch; border-radius: var(--radius-lg);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.06) 45%, rgba(255, 255, 255, 0.1) 100%);
  border: 1px solid rgba(255, 255, 255, 0.26); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); transform: translateZ(0);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -1px 0 rgba(255, 255, 255, 0.06), 0 30px 60px -32px rgba(20, 4, 3, 0.6); }
/* touch screens redraw a live blur over the playing film every frame, which shimmers: there the strip is
   tinted glass without the blur */
@media (hover: none), (max-width: 760px) {
  .hero-foot { backdrop-filter: none; -webkit-backdrop-filter: none; background: linear-gradient(135deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.07)), rgba(40, 10, 8, 0.42); }
}
.hero-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hero-stats > div { padding: 24px 28px; border-right: 1px solid rgba(255, 255, 255, 0.16); }
.hero-stats b { display: block; font: 600 clamp(1.6rem, 3vw, 2.4rem)/1 var(--font); letter-spacing: -0.03em; margin-bottom: 6px; }
.hero-stats span { font-size: 0.86rem; color: rgba(255, 255, 255, 0.8); }
.hero-badges { display: flex; align-items: center; gap: 10px; padding: 0 22px; }
.hero-badges img { height: 40px; width: auto; background: rgba(255, 255, 255, 0.94); border-radius: 10px; padding: 5px 9px; box-shadow: 0 6px 16px -10px rgba(20, 4, 3, 0.6); }
.page-hero { min-height: clamp(380px, 54svh, 560px); display: flex; align-items: flex-end; }
.page-hero > .wrap { padding-top: calc(var(--header-h) + 64px); padding-bottom: clamp(36px, 4.5vw, 64px); }
.page-hero h1 { font-size: clamp(2.3rem, min(5.2vw, 8vh), 4.6rem); max-width: 16ch; }
.page-hero .lead { font-size: clamp(1rem, min(1.4vw, 2.3vh), 1.2rem); }
.page-hero .eyebrow { display: none; }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: 0.88rem; color: rgba(255, 255, 255, 0.78); margin-bottom: 26px; }
.crumbs a { text-decoration: none; transition: color var(--dur-fast) ease; }
.crumbs a + a::before, .crumbs span::before { content: "/"; margin-right: 8px; opacity: 0.5; }

/* ---------- Media ---------- */
.media { position: relative; border-radius: var(--radius-lg); overflow: hidden; background: var(--lab-2); }
.media img { width: 100%; height: 100%; object-fit: cover; }
.media img, .bleed-media img { outline: 1px solid var(--image-outline); outline-offset: -1px; }
.bg-ink .media img, .bg-ink .bleed-media img { --image-outline: oklch(1 0 0 / 0.1); }
.media.contain img { object-fit: contain; background: var(--white); }
.media.tall { aspect-ratio: 4 / 5; }
.media.wide { aspect-ratio: 3 / 2; max-height: 460px; }
.media.cine { aspect-ratio: 21 / 9; max-height: 520px; }
/* glass caption floating over a photograph */
.float-card { position: absolute; z-index: 2; padding: 22px 24px; border-radius: 20px; max-width: 340px; }
.float-card.dark { background: var(--glass-bg-dark); border: 1px solid rgba(255, 255, 255, 0.2); color: var(--white); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18); }
.float-card b { display: block; font: 600 2.4rem/1 var(--font); letter-spacing: -0.04em; margin-bottom: 6px; }
.float-card span { font-size: 0.9rem; opacity: 0.85; }
.float-card.bl { left: 24px; bottom: 24px; }
.float-card.tr { right: 24px; top: 24px; }
.float-card.br { right: 24px; bottom: 24px; }
.float-badge { position: absolute; z-index: 2; right: 24px; top: 24px; padding: 10px 12px; border-radius: 14px; }
.float-badge img { height: 30px; width: auto; }

/* ---------- Product index (hover preview list) ---------- */
.index { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hair); }
.index li { border-bottom: 1px solid var(--hair); }
.index-row { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: center; padding: clamp(22px, 2.6vw, 34px) 0; text-decoration: none; color: inherit; }
.index-name { grid-column: 1 / 7; font: 600 clamp(1.5rem, 3vw, 2.5rem)/1.05 var(--font); letter-spacing: -0.03em; transition: color var(--dur-fast) ease; }
.index-desc { grid-column: 7 / 12; color: var(--muted); font-size: 1rem; }
.index-meta { display: none; }
.index-row .go { grid-column: 12 / 13; justify-self: end; }
.index-thumb { display: none; }
.index-preview { position: absolute; right: calc(var(--col) * 1.6); top: 50%; width: 220px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 16px; z-index: 3; pointer-events: none; opacity: 0; transform: translateY(-50%) scale(0.97) rotate(-2deg); transition: opacity var(--dur-fast) ease-out, transform var(--dur-ui) var(--ease-out); box-shadow: 0 30px 60px -24px rgba(58, 14, 10, 0.5); }
.go { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--graphite); color: var(--white); transition: background-color var(--dur-fast) ease, rotate var(--dur-ui) var(--ease-out); }

/* ---------- Industries rail (horizontal, scroll-snap) ---------- */
.rail-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; }
.rail-ctrl { display: flex; gap: 8px; }
.rail-btn { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: transparent; color: inherit; border: 1px solid var(--hair-dark); cursor: pointer; transition: background-color var(--dur-fast) ease, scale var(--dur-press) ease-out; }
.rail-btn:active { scale: 0.96; }
.rail-btn:disabled { opacity: 0.35; cursor: default; }
.rail { display: flex; gap: var(--gap); overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; padding-inline: max(var(--gutter), calc((100vw - var(--wrap)) / 2)); scroll-padding-inline: max(var(--gutter), calc((100vw - var(--wrap)) / 2)); }
.rail::-webkit-scrollbar { display: none; }
.rail-item { position: relative; flex: none; width: clamp(200px, 18vw, 260px); aspect-ratio: 3 / 4; border-radius: 22px; overflow: hidden; scroll-snap-align: start; isolation: isolate; display: flex; align-items: flex-end; padding: 12px; }
.rail-item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.rail-item::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 55%, rgba(58, 14, 10, 0.5)); }
/* concentric: 22 tile radius = 10 caption radius + 12 inset */
.rail-item h3 { margin: 0; width: 100%; padding: 12px 14px; border-radius: 10px; font-size: 1rem; color: var(--white); background: var(--glass-bg-dark); border: 1px solid rgba(255, 255, 255, 0.2); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); }

.process, .partners { margin-top: var(--space); }
.rail-head { display: grid; gap: 24px; }
.rail-head .lead { margin: 0; }

/* ---------- Process timeline (a real sequence, so it is numbered) ---------- */
.timeline { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gap); position: relative; }
.timeline::before { content: ""; position: absolute; left: 0; right: 0; top: 23px; height: 1px; background: var(--hair-dark); }
.timeline li { position: relative; padding-right: 12px; }
.timeline .n { position: relative; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--red); color: var(--white); font: 600 0.95rem/1 var(--font); margin-bottom: 28px; font-variant-numeric: tabular-nums; }
.timeline h3 { font-size: 1.3rem; margin-bottom: 10px; }
.timeline p { color: var(--on-dark-muted); font-size: 0.98rem; }
.timeline.light::before { background: var(--hair); }
.timeline.light p { color: var(--muted); }

/* ---------- Logos ---------- */
.marquee { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { display: flex; align-items: center; gap: clamp(32px, 5vw, 72px); width: max-content; animation: scroll 40s linear infinite; }
@keyframes scroll { to { transform: translateX(calc(-50% - clamp(32px, 5vw, 72px) / 2)); } }
.logo-tile { position: relative; flex: none; width: 168px; height: 92px; display: grid; place-items: center; }
/* logos are sized to equal visual area by main.js (wide marks get shorter, compact marks smaller);
   these caps are the no-JS fallback. multiply drops any remaining white onto the page tone. */
.logo-tile img { width: auto; height: auto; max-width: 78%; max-height: 62%; object-fit: contain; mix-blend-mode: multiply; }
.logo-wall { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--hair); border-left: 1px solid var(--hair); }
.logo-wall .logo-tile { width: auto; height: 120px; border-right: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.distributors { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--hair); }
.distributors .logo-tile { width: auto; height: 140px; border-bottom: 1px solid var(--hair); }
.distributors .logo-tile + .logo-tile { border-left: 1px solid var(--hair); }

/* ---------- Stats row ---------- */
/* four equal stats on the shared lines 1, 4, 7 and 10 */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gap); border-top: 1px solid var(--hair); }
.stat { padding-top: 28px; }
.stat b { display: block; font: 600 clamp(2.8rem, 4.6vw, 4.8rem)/0.9 var(--font); letter-spacing: -0.05em; color: var(--red); margin-bottom: 16px; font-variant-numeric: tabular-nums; }
.stat span { color: var(--muted); font-size: 1.05rem; }
.bg-ink .stats { border-color: var(--hair-dark); }
.bg-ink .stat b { color: var(--white); }
.bg-ink .stat span { color: var(--on-dark-muted); }

/* ---------- Difference: proof list over photograph ---------- */
.proof { list-style: none; margin: 0; padding: 0; }
.proof li { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: var(--gap); padding: 26px 0; border-top: 1px solid var(--hair-dark); }
.proof li:last-child { border-bottom: 1px solid var(--hair-dark); }
.proof b { font: 600 clamp(2rem, 3.6vw, 3rem)/1 var(--font); letter-spacing: -0.04em; color: var(--white); font-variant-numeric: tabular-nums; }
.proof h3 { margin-bottom: 6px; font-size: 1.15rem; color: var(--white); }
.proof p { color: var(--on-dark-muted); font-size: 0.98rem; }

/* ---------- Values (typographic list) ---------- */
.values { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 40px; }
.value { border-top: 2px solid var(--graphite); padding-top: 22px; }
.value .ico { color: var(--red); margin-bottom: 18px; }
.value .ico svg { width: 26px; height: 26px; stroke-width: 1.75; }
.value h3 { margin-bottom: 8px; }
.value p { color: var(--muted); }

/* ---------- About ---------- */
.founder-name { font: 600 clamp(2rem, 4vw, 3.2rem)/1 var(--font); letter-spacing: -0.04em; margin: 0 0 8px; }
.founder-role { color: var(--muted); margin-bottom: 28px; }
.dates { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 32px; }
.dates span { padding: 7px 14px; border: 1px solid var(--hair); border-radius: 999px; font-size: 0.85rem; color: var(--muted); }
.big-quote { font: 400 clamp(2rem, 4.6vw, 3.8rem)/1.12 var(--font-serif); font-style: italic; letter-spacing: -0.01em; max-width: 24ch; margin: 0; text-wrap: balance; }
.testimonial blockquote { margin: 0 0 28px; font: 500 clamp(1.25rem, 2.2vw, 1.75rem)/1.4 var(--font); letter-spacing: -0.015em; }
.testimonial cite { font-style: normal; display: flex; flex-direction: column; color: var(--muted); }
.testimonial cite b { color: var(--text); }
.testimonial .mark { display: block; font: 400 5rem/0.5 var(--font-serif); color: var(--red); height: 40px; }

/* About: the founder's portrait is the page's centrepiece. It runs nearly the full screen height and stays
   in view while his story is read beside it. */
.founder-feature { align-items: start; }
.founder-feature > .bleed-media { position: sticky; top: calc(var(--header-h) + 32px); height: calc(100svh - var(--header-h) - 64px); min-height: 520px; max-height: 900px; }
.founder-feature .founder-name { font-size: clamp(2.4rem, 5vw, 4.4rem); line-height: 1; margin-bottom: 12px; }
.founder-feature .founder-role { font-size: 1.15rem; }
.founder-feature > .bleed-text { padding-block: clamp(24px, 8vh, 96px); }

/* ---------- Solutions hub: alternating editorial rows ---------- */
.hub-row + .hub-row { margin-top: clamp(72px, 9vw, 136px); }
a.plain { color: inherit; text-decoration: none; }
.start-6 { grid-column-start: 6; }
.hub-row .bleed-text h2 { font-size: clamp(1.9rem, 3.6vw, 3rem); }
.hub-row .count { display: block; font-size: 0.95rem; color: var(--red); margin-bottom: 14px; font-weight: 500; }
.hub-row .chips { margin: 24px 0 32px; }

/* ---------- Product catalogue (category pages) ---------- */
.catalog { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: start; }
.catalog-nav { grid-column: 1 / 4; position: sticky; top: calc(var(--header-h) + 48px); display: grid; border-left: 1px solid var(--hair); }
.catalog-nav a { padding: 10px 0 10px 18px; margin-left: -1px; border-left: 2px solid transparent; text-decoration: none; color: var(--muted); font-size: 0.95rem; transition: color var(--dur-fast) ease, border-color var(--dur-fast) ease; }
.catalog-nav a.active { color: var(--text); border-left-color: var(--red); font-weight: 600; }
.catalog-list { grid-column: 4 / -1; }
.entry-ico { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: var(--boro); color: var(--graphite); }
.entry-ico svg { width: 24px; height: 24px; }
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { padding: 8px 14px; border-radius: 999px; font-size: 0.86rem; line-height: 1.2; background: var(--white); border: 1px solid var(--hair); color: var(--text); }
.bg-ink .chips li, .bg-red .chips li { background: rgba(255, 255, 255, 0.08); border-color: var(--hair-dark); color: var(--white); }
/* item chips double as quote-list toggles: plain until chosen, red when on the list */
.chip { font: inherit; font-size: 0.86rem; line-height: 1.2; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--hair); background: var(--white); color: var(--text); cursor: pointer; transition: background-color var(--dur-fast) ease, border-color var(--dur-fast) ease, color var(--dur-fast) ease, scale var(--dur-press) ease-out; }
.chips li:has(> .chip) { padding: 0; border: 0; background: none; }
.chip:active { scale: 0.96; }
.chip[aria-pressed="true"] { background: var(--red); border-color: var(--red); color: var(--white); }
.chip[aria-pressed="true"]::before { content: "✓ "; }
.entry-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.quote-add[aria-pressed="true"] { background: var(--red); border-color: var(--red); color: var(--white); }
.q-count { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; margin-left: 8px; border-radius: 999px; background: var(--white); color: var(--red); font-size: 0.78rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.q-count[hidden] { display: none; }
/* quote list on the contact form */
.quote-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.quote-list li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 12px 10px 16px; border-radius: 12px; background: var(--lab-2); font-size: 0.95rem; }
.quote-list button { flex: none; border: 0; background: none; color: var(--red); font: 600 0.85rem var(--font); cursor: pointer; padding: 6px 8px; border-radius: 8px; }
.quote-empty { color: var(--muted); font-size: 0.95rem; margin: 0; }
.range-cta { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 0.95rem; color: var(--red); text-decoration: none; }
.range-cta svg { transition: translate var(--dur-fast) var(--ease-out); }
.trademark { margin-top: 40px; font-size: 0.82rem; color: var(--muted); }
.grade-chips { margin-bottom: 24px; gap: 10px; }
.grade-chips li { padding: 12px 20px; font: 600 1rem/1.2 var(--font); }

/* Floating range dock: phones and tablets, where the side index is hidden */
.dock { position: fixed; left: var(--gutter); right: var(--gutter); bottom: 14px; z-index: 80; display: none; align-items: center; gap: 6px; padding: 6px; border-radius: 999px; transform: translateY(140%); transition: transform var(--dur-enter) var(--ease-out); }
.dock.show { transform: none; }
.dock-links { display: flex; gap: 2px; overflow-x: auto; overscroll-behavior: contain; scrollbar-width: none; flex: 1; }
.dock-links::-webkit-scrollbar { display: none; }
.dock-links a { flex: none; height: 40px; display: inline-flex; align-items: center; padding: 0 16px; border-radius: 999px; font-size: 0.88rem; font-weight: 500; text-decoration: none; color: var(--text); white-space: nowrap; transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease; }
.dock-links a.active { background: var(--graphite); color: var(--white); }
.dock-plus { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--red); color: var(--white); text-decoration: none; font-size: 1.4rem; line-height: 1; transition: scale var(--dur-press) ease-out; }
.dock-plus:active, .dock-links a:active { scale: 0.96; }

/* ---------- Chemicals: applications ---------- */
.apps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap); }
.app { display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 16px; padding: 26px 0; border-top: 1px solid var(--hair); }
.app .n { font: 600 1rem/1.5 var(--font); color: var(--red); font-variant-numeric: tabular-nums; }
.app h3 { margin-bottom: 6px; font-size: 1.12rem; }
.app p { color: var(--muted); font-size: 0.98rem; }

/* ---------- Partner band ---------- */
.partner { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: center; }
.partner-logo { grid-column: 1 / 6; display: grid; place-items: center; aspect-ratio: 16 / 10; border-radius: var(--radius-lg); background: var(--white); padding: 32px; }
.partner-logo img { max-width: 260px; width: 100%; mix-blend-mode: multiply; }
.partner-body { grid-column: 7 / -1; }
.partner-body h2 { font-size: clamp(1.7rem, 3.2vw, 2.6rem); }
.partner-body p { color: var(--muted); }

/* ---------- Forms (glass card over a photograph) ---------- */
.form-stage { position: relative; isolation: isolate; overflow: hidden; }
.form-stage > img, .form-stage > picture > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.form-stage::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(247, 245, 244, 0.96) 0%, rgba(247, 245, 244, 0.86) 42%, rgba(247, 245, 244, 0.35) 100%); }
.form-card { border-radius: var(--radius-lg); padding: clamp(26px, 3.6vw, 48px); background: rgba(255, 255, 255, 0.7); border: 1px solid var(--glass-edge); box-shadow: var(--glass-shadow); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); }
fieldset { border: 0; padding: 0; margin: 0 0 32px; min-width: 0; }
legend { font: 600 1rem/1.3 var(--font); color: var(--text); margin-bottom: 18px; padding: 0; }
.fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
.field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.field.full { grid-column: 1 / -1; }
.field > label, .field > .label { font-size: 0.9rem; font-weight: 600; line-height: 1.3; }
.req { color: var(--red); }
.field input[type="text"], .field input[type="email"], .field input[type="tel"], .field input[type="date"], .field textarea, .field select {
  width: 100%; height: 52px; padding: 0 16px; border-radius: 14px; border: 1px solid rgba(58, 14, 10, 0.18); background: rgba(255, 255, 255, 0.85);
  font: 400 1rem var(--font); color: var(--text); transition: border-color var(--dur-fast) ease, background-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease; }
.field textarea { height: auto; min-height: 140px; padding: 14px 16px; resize: vertical; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--red); background: var(--white); box-shadow: 0 0 0 4px rgba(155, 28, 20, 0.12); }
.field .hint { font-size: 0.82rem; color: var(--muted); margin: 0; line-height: 1.45; }
.phone-input { display: flex; }
.phone-input span { display: flex; align-items: center; padding: 0 14px; height: 52px; border: 1px solid rgba(58, 14, 10, 0.18); border-right: 0; border-radius: 14px 0 0 14px; background: var(--lab); font-size: 0.95rem; white-space: nowrap; }
.phone-input input { border-radius: 0 14px 14px 0 !important; }
.choices { display: flex; flex-wrap: wrap; gap: 8px; }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice span { display: inline-flex; align-items: center; height: 42px; padding: 0 16px; border-radius: 999px; border: 1px solid rgba(58, 14, 10, 0.18); background: rgba(255, 255, 255, 0.8); font-size: 0.92rem; cursor: pointer; user-select: none; transition: background-color var(--dur-fast) ease, border-color var(--dur-fast) ease, color var(--dur-fast) ease, scale var(--dur-press) ease-out; }
.choice span:active { scale: 0.96; }
.choice input:checked + span { background: var(--graphite); border-color: var(--graphite); color: var(--white); }
.choice input:focus-visible + span { outline: 2px solid var(--red-600); outline-offset: 2px; }
.file-drop { position: relative; display: flex; align-items: center; gap: 14px; padding: 16px; border: 1.5px dashed rgba(58, 14, 10, 0.22); border-radius: 14px; background: rgba(255, 255, 255, 0.6); cursor: pointer; transition: border-color var(--dur-fast) ease, background-color var(--dur-fast) ease; }
.file-drop:focus-within { border-color: var(--red); background: var(--white); }
.file-drop input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.file-drop .fd-ico { width: 44px; height: 44px; border-radius: 12px; background: var(--white); display: grid; place-items: center; color: var(--red); border: 1px solid var(--hair); flex: none; }
.file-drop small { display: block; color: var(--muted); font-size: 0.82rem; line-height: 1.45; margin-top: 2px; }
.form-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.form-note { font-size: 0.84rem; color: var(--muted); margin: 14px 0 0; }
.field.invalid input, .field.invalid textarea { border-color: var(--red-600); }
.field .err { color: var(--red-600); font-size: 0.82rem; display: none; }
.field.invalid .err { display: block; animation: enter-fade var(--dur-fast) ease-out both; }
.form-success { display: none; padding: 18px 20px; border-radius: 14px; background: var(--white); color: var(--text); border: 1px solid var(--boro); border-left: 3px solid var(--red); margin-top: 16px; }
.form-success.show { display: block; animation: enter-rise var(--dur-enter) var(--ease-out) both; }

/* ---------- Contact details (typographic list) ---------- */
.details { list-style: none; margin: 0; padding: 0; }
.details li { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 14px; padding: 20px 0; border-top: 1px solid var(--hair); }
.details li:last-child { border-bottom: 1px solid var(--hair); }
.details svg { width: 22px; height: 22px; color: var(--red); margin-top: 2px; }
.details h3 { font-size: 1rem; margin-bottom: 4px; }
.details p { margin: 0 0 2px; color: var(--muted); }
.details a { text-decoration: none; overflow-wrap: anywhere; transition: color var(--dur-fast) ease; }
.hours { display: grid; grid-template-columns: auto 1fr; gap: 2px 16px; color: var(--muted); }
.map { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 21 / 9; background: var(--lab-2); }
.map iframe { width: 100%; height: 100%; border: 0; display: block; filter: grayscale(0.4) contrast(1.05); }

/* ---------- FAQ ---------- */
.faq-list { border-top: 1px solid var(--hair); }
.faq-item { border-bottom: 1px solid var(--hair); interpolate-size: allow-keywords; }
.faq-item summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px 0; cursor: pointer; font: 600 1.12rem/1.4 var(--font); letter-spacing: -0.01em; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary i { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--hair); flex: none; position: relative; transition: rotate var(--dur-ui) var(--ease-out), background-color var(--dur-fast) ease; }
.faq-item summary i::before, .faq-item summary i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; background: currentColor; transform: translate(-50%, -50%); }
.faq-item summary i::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq-item[open] summary i { rotate: 45deg; background: var(--red); color: var(--white); border-color: var(--red); }
.faq-item::details-content { block-size: 0; overflow: clip; transition: block-size 250ms var(--ease-in-out), content-visibility 250ms allow-discrete; }
.faq-item[open]::details-content { block-size: auto; }
.faq-item .a { padding: 0 64px 26px 0; color: var(--muted); }

/* ---------- Enquiries inbox (team only) ---------- */
.inbox-title { font-size: clamp(2rem, 4vw, 3rem); }
.inbox-key { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; max-width: 520px; }
.inbox-key .field { flex: 1 1 260px; }
.inbox { display: grid; gap: 12px; margin-top: 24px; }
.inbox-item { padding: 20px 22px; border-radius: 16px; background: var(--white); border: 1px solid var(--hair); }
.inbox-item header { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.inbox-item header span { color: var(--muted); font-size: 0.88rem; }
.inbox-item p { margin: 0 0 6px; font-size: 0.95rem; }

/* ---------- Legal ---------- */
.legal > * { max-width: 760px; }
.legal h1 { font-size: clamp(2.2rem, 5vw, 3.8rem); }
.legal h2 { font-size: 1.35rem; margin: 2.2em 0 0.6em; }
.legal p, .legal li { color: var(--muted); }
.legal ul { padding-left: 1.2em; margin: 0 0 1em; }
.legal li { margin-bottom: 6px; }
.legal .meta { display: inline-block; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--hair); font-size: 0.86rem; color: var(--muted); margin-bottom: 1.6em; }
.contact-box { margin: 1em 0; padding: 22px 0; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.contact-box p { margin: 0 0 4px; color: var(--text); }
.contact-box a { overflow-wrap: anywhere; }

/* ---------- CTA band ---------- */
.cta-band { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 28px; align-items: end; }
.cta-band > :first-child { grid-column: 1 / 9; }
.cta-band > :last-child { grid-column: 9 / -1; justify-self: end; }
.cta-band h2 { font-size: clamp(1.9rem, 4vw, 3.4rem); margin-bottom: 14px; }
.cta-band p { color: inherit; opacity: 0.78; max-width: 56ch; }
.cta-band .btn-row { margin-top: 0; }
.big-email { margin: 6px 0 16px; }
.big-email a { font: 600 clamp(1.2rem, 2.6vw, 2rem)/1.2 var(--font); color: var(--white); text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.4); text-underline-offset: 6px; overflow-wrap: anywhere; }

/* ---------- Footer ----------
   One calm deep-red block with a soft wave along its top: a short tagline with an enquiry link, then the white
   logo and three columns of links on the shared lines (1/4/7/10), and a quiet bottom line. */
.site-footer { margin-top: 0; background: var(--graphite-2); color: var(--on-dark); padding: clamp(56px, 6vw, 88px) 0 28px; }
/* the wave rises straight out of the section above (no gap): a red curve over light sections, a subtle red-on-red
   curve after dark ones, never a light sliver between two reds */
.site-footer::before { content: ""; position: absolute; left: 0; right: 0; top: -27px; height: 28px; pointer-events: none; z-index: 2;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 28' preserveAspectRatio='none'%3E%3Cpath fill='%23560d07' d='M0 28V12C240 2 480 0 720 8s480 14 720 2v18z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.site-footer .molecule.tr { opacity: 0.08; }
.footer-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px; padding-bottom: clamp(36px, 4vw, 52px); border-bottom: 1px solid var(--hair-dark); }
.footer-tag { font: 400 clamp(2rem, 3.6vw, 3rem)/1.05 var(--font-serif); letter-spacing: -0.01em; margin: 0 0 10px; color: var(--white); }
.footer-tag em { font-style: italic; color: var(--boro); }
.footer-top p { margin: 0; color: var(--on-dark-muted); }
.footer-link { color: var(--boro); font-weight: 600; text-decoration: none; transition: color var(--dur-fast) ease; }
.footer-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 36px; padding: clamp(40px, 4.5vw, 60px) 0; }
.footer-brand { grid-column: 1 / 4; }
.footer-grid > div:nth-child(2) { grid-column: 4 / 7; }
.footer-grid > div:nth-child(3) { grid-column: 7 / 10; }
.footer-contact { grid-column: 10 / -1; }
.footer-logo { display: block; width: min(100%, 220px); margin: 0 0 18px; }
.footer-logo img { display: block; width: 100%; height: auto; }
.footer-brand p { color: var(--on-dark-muted); font-size: 0.92rem; line-height: 1.65; margin: 0 0 22px; max-width: 34ch; }
.site-footer h3 { font: 600 1rem/1.2 var(--font); color: var(--white); margin: 0 0 16px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.site-footer ul a, .footer-contact a { color: rgba(255, 255, 255, 0.82); text-decoration: none; transition: color var(--dur-fast) ease; overflow-wrap: anywhere; }
.footer-contact p { color: var(--on-dark-muted); font-size: 0.95rem; line-height: 1.7; margin: 0 0 12px; }
.social { display: flex; gap: 10px; }
.social a { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, 0.08); color: var(--white); transition: background-color var(--dur-fast) ease, scale var(--dur-press) ease-out; }
.social a:active { scale: 0.96; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; padding-top: 22px; border-top: 1px solid var(--hair-dark); font-size: 0.86rem; color: rgba(255, 255, 255, 0.6); }
.footer-bottom p { margin: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; }
.footer-bottom a { color: rgba(255, 255, 255, 0.82); text-decoration: none; transition: color var(--dur-fast) ease; }
/* phones: Products and Company sit side by side so the footer stays short */
@media (max-width: 760px) {
  .site-footer .footer-grid > div:nth-child(2) { grid-column: 1 / 7 !important; }
  .site-footer .footer-grid > div:nth-child(3) { grid-column: 7 / -1 !important; }
}

.chat-fab { position: fixed; right: 20px; bottom: 20px; z-index: 90; display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 20px 0 16px; border-radius: 999px; background: rgba(155, 28, 20, 0.92); border: 1px solid rgba(255, 255, 255, 0.25); color: var(--white); text-decoration: none; font-weight: 600; font-size: 0.94rem; box-shadow: 0 14px 30px -10px rgba(155, 28, 20, 0.6); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: background-color var(--dur-fast) ease, translate var(--dur-enter) var(--ease-out), scale var(--dur-press) ease-out; }
.chat-fab svg { width: 22px; height: 22px; }
.chat-fab:active { scale: 0.96; }
/* stays out of the hero's stats strip; appears once the visitor scrolls on */
.chat-fab.is-hidden { opacity: 0; translate: 0 12px; pointer-events: none; }
.chat-fab { transition-property: background-color, translate, scale, opacity; }

/* ---------- Coming soon / 404 ---------- */
.soon .badge { display: inline-flex; gap: 8px; align-items: center; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--hair); font-size: 0.88rem; color: var(--muted); margin-bottom: 24px; }
.soon .badge::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--red-600); animation: pulse 1.6s infinite; }
@keyframes pulse { 50% { opacity: 0.3; } }
.err-code { font: 600 clamp(6rem, 20vw, 14rem)/0.85 var(--font); letter-spacing: -0.06em; color: var(--red); margin: 0 0 24px; }

/* ---------- Motion: one entrance per page ---------- */
@keyframes enter-fade { from { opacity: 0; } }
@keyframes enter-rise { from { opacity: 0; transform: translateY(12px); filter: blur(4px); } }
.line-reveal, .line-reveal > span { display: block; }
.page-hero .crumbs, .hero-inner > .eyebrow, .hero h1 > .line-reveal > span, .page-hero h1 > .line-reveal > span,
.hero .lead, .page-hero .lead, .hero .btn-row, .page-hero .btn-row, .hero-foot { animation: enter-fade var(--dur-enter) var(--ease-out) both; }
@media (prefers-reduced-motion: no-preference) {
  .page-hero .crumbs, .hero-inner > .eyebrow, .hero h1 > .line-reveal > span, .page-hero h1 > .line-reveal > span,
  .hero .lead, .page-hero .lead, .hero .btn-row, .page-hero .btn-row, .hero-foot { animation-name: enter-rise; }
}
h1 > .line-reveal:nth-child(1) > span { animation-delay: 80ms; }
h1 > .line-reveal:nth-child(2) > span { animation-delay: 160ms; }
h1 > .line-reveal:nth-child(3) > span { animation-delay: 240ms; }
.hero .lead, .page-hero .lead { animation-delay: 340ms; }
.page-hero .lead + .lead { animation-delay: 440ms; }
.hero .btn-row, .page-hero .btn-row { animation-delay: 440ms; }
.hero-foot { animation-delay: 540ms; }
body:has(.intro:not(.done)) .hero * { animation-play-state: paused; }

/* ---------- Hover: mouse and trackpad only ---------- */
@media (hover: hover) and (pointer: fine) {
  .btn-red:hover { --b: var(--red-600); }
  .btn:not(.btn-red):not(.btn-white):not(.btn-outline):not(.btn-ghost-light):hover { --b: #861710; }
  .btn-white:hover { --b: var(--lab); }
  .btn-outline:hover { border-color: currentColor; }
  .btn-ghost-light:hover { background: rgba(255, 255, 255, 0.22); }
  .link-arrow:hover svg, .range-cta:hover svg { translate: 3px 0; }
  .main-nav > a:not([aria-current]):hover, .dd:not(.is-current) > .dd-btn:hover { background: rgba(255, 255, 255, 0.75); }
  .dd:hover .dd-menu { opacity: 1; visibility: visible; transform: translateX(-50%) scale(1); }
  .dd:hover .dd-btn svg { rotate: 180deg; }
  .dd-menu a:hover { background: rgba(255, 255, 255, 0.9); color: var(--red); }
  .icon-btn:hover { background: var(--white); }
  .search-results a:hover { background: var(--lab); }
  .crumbs a:hover { color: var(--white); }
  .index-row:hover .index-name { color: var(--red); }
  .index-row:hover .go { background: var(--red); rotate: -45deg; }
  .index-row:hover .index-preview { opacity: 1; transform: translateY(-50%) scale(1) rotate(-2deg); }
  .rail-btn:not(:disabled):hover { background: rgba(255, 255, 255, 0.1); }
  .catalog-nav a:not(.active):hover { color: var(--text); }
  .dock-links a:not(.active):hover { background: rgba(255, 255, 255, 0.85); }
  .choice span:hover { border-color: var(--graphite); }
  .chip[aria-pressed="false"]:hover { border-color: var(--red); color: var(--red); }
  .quote-list button:hover { background: var(--white); }
  .file-drop:hover { border-color: var(--red); background: var(--white); }
  .details a:hover { color: var(--red); }
  .site-footer ul a:hover, .footer-contact a:hover, .footer-link:hover { color: var(--white); text-decoration: underline; text-underline-offset: 3px; }
  .social a:hover { background: var(--red); color: var(--white); }
  .footer-bottom a:hover { color: var(--white); }
  .chat-fab:hover { background: var(--red-600); }
  .marquee:hover .marquee-track { animation-play-state: paused; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .header-cta { display: none; }
  .main-nav > a, .dd-btn { padding: 0 11px; }
  .index-preview { display: none; }
  .index-name { grid-column: 1 / 6; }
  .index-desc { grid-column: 6 / 11; }
}
@media (max-width: 1024px) {
  .burger { display: grid; }
  .main-nav {
    position: fixed; top: calc(var(--header-h) + 26px); left: var(--gutter); right: var(--gutter); max-height: calc(100dvh - var(--header-h) - 44px); margin: 0; padding: 14px 18px 20px;
    flex-direction: column; align-items: stretch; gap: 0; overflow-y: auto; overscroll-behavior: contain; border-radius: 26px;
    background: rgba(255, 255, 255, 0.9); border: 1px solid var(--glass-edge); box-shadow: var(--glass-shadow); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
    opacity: 0; visibility: hidden; transform: translateY(-8px) scale(0.98); transform-origin: top right;
    transition: opacity var(--dur-fast) ease-out, transform var(--dur-ui) var(--ease-out), visibility var(--dur-ui); }
  .nav-open .main-nav { opacity: 1; visibility: visible; transform: none; }
  .main-nav > a, .dd-btn { width: 100%; height: 56px; justify-content: space-between; padding: 0 6px; border-radius: 0; border-bottom: 1px solid var(--hair); font-size: 1.1rem; }
  .main-nav > a:not([aria-current]):hover, .dd:not(.is-current) > .dd-btn:hover { background: none; }
  .main-nav > a[aria-current]:not(.btn), .dd.is-current > .dd-btn { background: none; color: var(--red); }
  .dd-menu { position: static; transform: none; opacity: 1; visibility: visible; box-shadow: none; border: 0; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; padding: 4px 0 8px 10px; display: none; min-width: 0; }
  .dd.open .dd-menu, .dd:hover .dd-menu { transform: none; }
  .dd.open .dd-menu { display: block; }
  .main-nav > .nav-cta-mobile { display: inline-flex; justify-content: center; margin-top: 18px; border-radius: 999px; padding: 0 24px; height: 52px; font-size: 1rem; color: var(--white); background: var(--red); border: 0; }
  body.nav-open { overflow: hidden; }
  .values, .g4, .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 48px; }
  .timeline::before { display: none; }
  .logo-wall { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .catalog-nav { display: none; }
  .catalog-list { grid-column: 1 / -1; }
  .dock { display: flex; }
  .has-dock .chat-fab { display: none; }
  .footer-brand { grid-column: 1 / -1; grid-row: auto; }
  .footer-grid > div:nth-child(2) { grid-column: 1 / 7; }
  .footer-grid > div:nth-child(3) { grid-column: 7 / -1; }
  .footer-contact { grid-column: 1 / -1; }
  .logo-wall { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  :root { --header-h: 58px; }
  body { font-size: 16px; }
  .header-inner { padding: 0 8px; }
  .header-inner > .brand { margin-left: 10px; }
  .brand img { height: 24px; }
  .bleed > *, .bleed-left > .bleed-media, .bleed-left > .bleed-text, .bleed-right > .bleed-media, .bleed-right > .bleed-text { grid-column: content-start / content-end; grid-row: auto; }
  .bleed-media { min-height: 0; max-height: none; aspect-ratio: 16 / 10; border-radius: var(--radius-lg) !important; }
  .founder-feature > .bleed-media { position: relative; top: auto; height: auto; min-height: 0; aspect-ratio: 4 / 5; }
  .founder-feature > .bleed-text { padding-block: 0; }
  .section-head.split > :first-child, .section-head.split > :last-child,
  .cta-band > :first-child, .cta-band > :last-child, .footer-cta > :first-child, .footer-cta-actions,
  .partner-logo, .partner-body, .span-4, .span-5, .span-6, .span-7, .span-8 { grid-column: 1 / -1; justify-self: stretch; }
  .start-6, .start-7, .start-8 { grid-column-start: 1; }
  .form-stage::after { background: rgba(247, 245, 244, 0.9); }
  .split > :first-child, .split > :last-child, .stat:nth-child(n), .footer-contact > p { grid-column: 1 / -1; }
  .footer-brand { grid-row: auto; }
  .sticky-col { position: static; }
  .g2, .g3, .g4, .apps, .values { grid-template-columns: minmax(0, 1fr); }
  /* photo, name and arrow share one centred line; the description sits under the name */
  .index-row { grid-template-columns: 56px minmax(0, 1fr) auto; column-gap: 16px; row-gap: 10px; }
  .index-thumb { display: block; grid-row: 1; width: 56px; height: 56px; border-radius: 12px; object-fit: cover; }
  .index-name { grid-column: 2; grid-row: 1; font-size: 1.3rem; }
  .index-desc { grid-column: 2 / 4; grid-row: 2; font-size: 0.92rem; }
  .index-meta { display: none; }
  .index-row .go { grid-column: 3; grid-row: 1; width: 40px; height: 40px; }
  .timeline { grid-template-columns: minmax(0, 1fr); row-gap: 36px; }
  .stats { grid-template-columns: minmax(0, 1fr); }
  .footer-contact { grid-template-columns: minmax(0, 1fr); }
  .stat { padding: 24px 0; border-bottom: 1px solid var(--hair); }
  .proof li { grid-template-columns: minmax(0, 1fr); row-gap: 10px; }
  .distributors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .distributors .logo-tile:nth-child(3) { border-left: 0; }
  .logo-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .logo-wall .logo-tile { height: 96px; }
  .logo-tile { width: 132px; height: 76px; }
  .fields { grid-template-columns: minmax(0, 1fr); }
  .hero-foot { grid-template-columns: minmax(0, 1fr); }
  .hero-stats > div { padding: 16px 14px; }
  .hero-stats > div:last-child { border-right: 0; }
  .hero-badges { padding: 14px; border-top: 1px solid rgba(255, 255, 255, 0.14); }
  /* headline lines flow together on phones so no single word is stranded mid-heading */
  .line-reveal, .line-reveal > span { display: inline; }
  .map { aspect-ratio: 4 / 3; }
  .faq-item .a { padding-right: 0; }
  .footer-grid > div { grid-column: 1 / -1 !important; }
  .footer-brand, .footer-contact { grid-column: 1 / -1; }
  .chat-fab span { display: none; }
  .chat-fab { padding: 0; width: 52px; justify-content: center; }
  .btn-row .btn { flex: 1 1 auto; }
  /* phones: the same small glass label, just tighter, so it never covers the photo */
  .float-card { max-width: min(72%, 240px); padding: 12px 14px; border-radius: 14px; }
  .float-card.bl { left: 12px; bottom: 12px; }
  .float-card b { font-size: 1.35rem; margin-bottom: 3px; }
  .float-card span { font-size: 0.78rem; }
  .float-badge { display: none; }
}

/* ---------- Scroll choreography (see DESIGN.md "Motion") ----------
   Scroll-driven, so it moves with the reader and reverses with them. Browsers without scroll timelines
   and visitors who prefer reduced motion skip the whole block and see the static page. */
.molecule { position: absolute; z-index: 0; pointer-events: none; width: min(42vw, 560px); height: auto; color: var(--white); opacity: 0.16; }
.molecule path, .molecule line { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; }
.molecule circle { fill: currentColor; }
.molecule.tr { top: 40px; right: max(var(--gutter), calc((100vw - var(--wrap)) / 2 - 80px)); }
.molecule.br { bottom: 24px; right: var(--gutter); }
.molecule.bl { bottom: 32px; left: var(--gutter); width: min(30vw, 380px); }
@media (max-width: 760px) { .molecule { width: 70vw; opacity: 0.1; } .molecule.bl { display: none; } }
.section > .wrap, .section > .bleed, .section > .rail-pin, .site-footer > .wrap { position: relative; z-index: 1; }
/* clip sideways only, so the wave can rise above the footer */
.site-footer { position: relative; overflow-x: clip; }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    @keyframes fill-x { to { transform: scaleX(1); } }

    /* coloured bands open from a rounded vessel to full bleed as they arrive */
    .bg-ink, .bg-red, .bg-tint, .bg-white {
      animation: vessel linear both; animation-timeline: view(); animation-range: entry 0% entry 80%;
    }
    @keyframes vessel {
      from { clip-path: inset(0 5% 0 5% round 64px 64px 0 0); }
      to { clip-path: inset(0 0 0 0 round 0 0 0 0); }
    }

    /* content condenses into place: rises 48px and sharpens from a soft blur */
    .section-head, .index li, .timeline, .values > *, .stats > *, .distributors, .logo-wall, .entry, .proof li,
    .apps > *, .partner, .bleed-text, .faq-item, .details li, .form-card, .cta-band, .footer-cta, .media.contain, .legal > * {
      animation: condense linear both; animation-timeline: view(); animation-range: entry 0% entry 60%;
    }
    @keyframes condense {
      from { opacity: 0; transform: translateY(48px); filter: blur(6px); }
      to { opacity: 1; transform: none; filter: none; }
    }

    /* titration headings: colour rises through the words from the bottom, like liquid to the mark */
    .section-head h2, .bleed-text h2, .cta-band h2, .footer-cta h2 {
      --fill: var(--text); --faint: rgba(35, 26, 25, 0.16);
      color: transparent; -webkit-background-clip: text; background-clip: text;
      background-image: linear-gradient(to top, var(--fill) 50%, var(--faint) 50%);
      background-size: 100% 200%; background-position: 0 0%;
      animation: titrate linear both; animation-timeline: view(); animation-range: entry 30% cover 42%;
    }
    .bg-ink .section-head h2, .bg-ink .bleed-text h2, .bg-red h2, .cta-band h2, .footer-cta h2 { --fill: var(--white); --faint: rgba(255, 255, 255, 0.22); }
    .bg-white .cta-band h2, .section:not([class*="bg-"]) .cta-band h2 { --fill: var(--text); --faint: rgba(35, 26, 25, 0.16); }
    @keyframes titrate { to { background-position: 0 100%; } }

    /* photographs settle: a slow zoom and drift through their frame */
    .bleed-media img, .media:not(.contain) img, .page-hero > img, .page-hero > picture > img, .rail-item img {
      animation: settle linear both; animation-timeline: view(); animation-range: cover 0% cover 100%;
    }
    @keyframes settle {
      from { transform: scale(1.16) translateY(-3%); }
      to { transform: scale(1.02) translateY(3%); }
    }

    /* hero: the film drifts deeper as the headline lifts away */
    .hero-media video { animation: deepen linear both; animation-timeline: scroll(root); animation-range: 0 100vh; }
    @keyframes deepen { to { transform: scale(1.14); } }
    .hero-inner, .page-hero > .wrap { animation: lift linear both; animation-timeline: scroll(root); animation-range: 0 90vh; }
    @keyframes lift { to { transform: translateY(-14vh); opacity: 0.15; } }

    /* process: the line draws across, each step drops in like a measured drip */
    .timeline::before { transform-origin: left; animation: fill-x linear both; animation-timeline: view(); animation-range: entry 40% cover 55%; }
    .timeline .n { animation: drip linear both; animation-timeline: view(); animation-range: entry 60% entry 100%; }
    @keyframes drip { from { opacity: 0; transform: translateY(-28px) scale(0.6); } 70% { transform: translateY(3px) scale(1.04); } to { opacity: 1; transform: none; } }

    /* molecules draw their bonds as the band scrolls through */
    .molecule { view-timeline-name: --mol; }
    .molecule path, .molecule line { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw linear both; animation-timeline: --mol; animation-range: entry 10% cover 60%; }
    .molecule circle { animation: atom linear both; animation-timeline: --mol; animation-range: cover 40% cover 65%; }
    @keyframes draw { to { stroke-dashoffset: 0; } }
    @keyframes atom { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: none; } }
    .molecule circle { transform-box: fill-box; transform-origin: center; }

    /* stats: a graduation tick grows under each figure */
    .stat { position: relative; }
    .stat::before { content: ""; position: absolute; left: 0; top: -1px; height: 2px; width: 40%; background: var(--red); transform-origin: left; animation: fill-x linear both; animation-timeline: view(); animation-range: entry 50% cover 45%; }

    /* photographs open like a shutter from the text side out to the screen edge */
    .bleed-left > .bleed-media:not(.founder-feature > *) { animation: shutter-l linear both; animation-timeline: view(); animation-range: entry 5% cover 45%; }
    .bleed-right > .bleed-media { animation: shutter-r linear both; animation-timeline: view(); animation-range: entry 5% cover 45%; }
    @keyframes shutter-l { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }
    @keyframes shutter-r { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
    /* framed photographs widen from a small aperture to the full frame */
    .media:not(.contain) { animation: aperture linear both; animation-timeline: view(); animation-range: entry 0% cover 40%; }
    @keyframes aperture {
      from { clip-path: inset(14% 18% 14% 18% round 120px); }
      to { clip-path: inset(0 0 0 0 round var(--radius-lg)); }
    }


  }
}

/* ---------- Signature motion: headlines, the hero molecule, magnetic and liquid controls ----------
   Time-based, on pages that are actually showing (see .is-prerendering below). Transform, opacity and
   clip-path only, so every frame stays on the compositor. */
@media (prefers-reduced-motion: no-preference) {
  /* headline words rise one by one from behind the line (main.js wraps each word; nbsp pairs stay whole) */
  .w { display: inline-block; vertical-align: top; padding-bottom: 0.2em; margin-bottom: -0.2em; clip-path: inset(-0.5em -0.3em 0 -0.3em); }
  .w > span { display: inline-block; transform-origin: 0 100%; animation: word-rise 1000ms var(--ease-out) both; animation-delay: calc(140ms + var(--i) * 55ms); }
  h1.is-split > .line-reveal > span { animation: none; }
  @keyframes word-rise { from { transform: translateY(115%) rotate(5deg); } }

  /* the hero molecule draws itself bond by bond behind the headline, over the film, then drifts */
  .molecule.drift { z-index: -1; top: calc(var(--header-h) + 6vh); right: max(var(--gutter), calc((100vw - var(--wrap)) / 2)); width: min(30vw, 400px); opacity: 0.32; animation: drift 18s ease-in-out 2.6s infinite alternate; }
  .molecule.drift line { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1400ms var(--ease-out) both; animation-timeline: auto; animation-range: normal; }
  .molecule.drift line:nth-child(3n + 1) { animation-delay: 300ms; }
  .molecule.drift line:nth-child(3n + 2) { animation-delay: 520ms; }
  .molecule.drift line:nth-child(3n) { animation-delay: 740ms; }
  .molecule.drift circle { animation: atom 500ms var(--ease-out) 1500ms both; animation-timeline: auto; animation-range: normal; }
  @keyframes drift { to { transform: translate(-2vw, 3vh) rotate(-6deg); } }

  /* quote counter pops when something is added */
  .q-count.bump { animation: bump 420ms var(--ease-out); }
  @keyframes bump { 35% { transform: scale(1.4); } }
}
.molecule.drift { position: absolute; }
@media (max-width: 760px) { .molecule.drift { display: none; } }

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  /* magnetic: main.js leans these toward the pointer through `translate`; press keeps using `scale` */
  .btn, .go, .social a, .rail-btn {
    transition-property: background-color, color, border-color, scale, translate, rotate;
    transition-duration: var(--dur-fast), 300ms, var(--dur-fast), var(--dur-press), 500ms, var(--dur-ui);
    transition-timing-function: ease, ease, ease, ease-out, var(--ease-out), var(--ease-out);
  }
  /* liquid fill: a curved surface rises through outline buttons on hover and drains on leave */
  .btn-outline, .btn-ghost-light { position: relative; isolation: isolate; }
  .btn-outline::before, .btn-ghost-light::before {
    content: ""; position: absolute; z-index: -1; inset: -1px; border-radius: inherit; background: var(--graphite);
    clip-path: ellipse(90% 0% at 50% 100%); transition: clip-path 560ms var(--ease-out);
  }
  .btn-ghost-light::before, .bg-ink .btn-outline::before { background: var(--white); }
  .btn-outline:hover, .btn-ghost-light:hover { color: var(--white); border-color: var(--graphite); }
  .btn-ghost-light:hover, .bg-ink .btn-outline:hover { color: var(--graphite); border-color: var(--white); }
  .btn-outline:hover::before, .btn-ghost-light:hover::before { clip-path: ellipse(90% 160% at 50% 100%); }
  /* links draw their underline from the left */
  .site-footer ul a, .footer-contact a, .footer-bottom a, .details a, .prose a {
    text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
    transition: color var(--dur-fast) ease, background-size 380ms var(--ease-out);
  }
  .site-footer ul a:hover, .footer-contact a:hover, .footer-bottom a:hover, .details a:hover, .prose a:hover { text-decoration: none; background-size: 100% 1px; }
}

/* ---------- Page to page (see DESIGN.md "Motion") ----------
   Cross-document view transitions: the page you leave recedes into the deep-red flask, and the next one
   rises over it behind a curved meniscus. Back/Forward reverses the direction. The header, chat button
   and gauge are named so they hold still while the pages change beneath them. */
.is-prerendering *, .is-prerendering *::before, .is-prerendering *::after { animation-play-state: paused !important; }
/* the opt-in itself (@view-transition) is written into each page's head by build.py (VT_OPT_IN) */
@media (prefers-reduced-motion: no-preference) {
  .site-header { view-transition-name: site-header; }
  .chat-fab { view-transition-name: chat-fab; }
  .gauge { view-transition-name: gauge; }
  ::view-transition { background: var(--graphite-2); }
  ::view-transition-old(root), ::view-transition-new(root) { mix-blend-mode: normal; animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1); animation-fill-mode: both; }
  ::view-transition-old(root) { animation-name: page-recede; animation-duration: 620ms; transform-origin: 50% 0; }
  ::view-transition-new(root) { animation-name: page-rise; animation-duration: 760ms; }
  ::view-transition-group(site-header), ::view-transition-group(chat-fab), ::view-transition-group(gauge) { animation-duration: 420ms; animation-timing-function: var(--ease-out); }
  html:active-view-transition-type(back)::view-transition-old(root) { animation-name: page-recede-back; transform-origin: 50% 100%; }
  html:active-view-transition-type(back)::view-transition-new(root) { animation-name: page-fall; }
}
@keyframes page-recede {
  from { clip-path: inset(0 round 0); }
  to { transform: scale(0.92) translateY(-2%); opacity: 0.4; clip-path: inset(0 round 36px); }
}
@keyframes page-recede-back {
  from { clip-path: inset(0 round 0); }
  to { transform: scale(0.92) translateY(2%); opacity: 0.4; clip-path: inset(0 round 36px); }
}
/* the new page's top edge is an ellipse whose centre leads, like liquid climbing a flask */
@keyframes page-rise {
  from { clip-path: ellipse(160% 0% at 50% 100%); }
  to { clip-path: ellipse(160% 130% at 50% 100%); }
}
@keyframes page-fall {
  from { clip-path: ellipse(160% 0% at 50% 0%); }
  to { clip-path: ellipse(160% 130% at 50% 0%); }
}

/* Industries rail pinned to vertical scroll on desktop (main.js sets --rail-shift and --pin-extra) */
/* clip, not hidden: the travelling strip stays inside the page width and the sticky inner part still sticks */
.rail-pin { position: relative; overflow-x: clip; }
.rail-pin.is-pinned { height: calc(var(--rail-h, 400px) + var(--pin-extra, 0px)); }
.rail-pin.is-pinned .rail-sticky { position: sticky; top: calc(50svh - var(--rail-h, 400px) / 2); }
.rail-pin.is-pinned .rail { overflow: visible; scroll-snap-type: none; }
.rail-pin.is-pinned .rail-track { display: flex; gap: var(--gap); transform: translateX(calc(var(--rail-progress, 0) * var(--rail-shift, 0px) * -1)); will-change: transform; }
.rail-track { display: contents; }
.rail-pin.is-pinned ~ .wrap .rail-ctrl, .is-pinned-ctrl .rail-ctrl { display: none; }

/* ---------- Reduced motion: keep fades, drop movement, scale and blur ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn:not(:disabled):active, .icon-btn:active, .choice span:active, .dock-plus:active, .dock-links a:active,
  .social a:active, .chat-fab:active, .rail-btn:active { scale: none; }
  .dd-menu, .main-nav { transition-property: opacity, visibility; }
  .dock { transition-property: opacity, visibility; opacity: 0; visibility: hidden; transform: none; }
  .dock.show { opacity: 1; visibility: visible; }
  .site-header { transition: none; }
  .index-preview { transition-property: opacity; transform: translateY(-50%); }
  .link-arrow svg, .range-cta svg, .dd-btn svg, .faq-item summary i, .burger span, .go { transition-duration: 0s; }
  .faq-item::details-content { transition: none; }
  .marquee-track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
  .soon .badge::before { animation: none; }
}

/* ---------- WebGL effects (js/fx/, adapted from React Bits): their own base styles ---------- */
.antigravity {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.antigravity__canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.soft-aurora {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.soft-aurora__canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.prism {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.prism-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.letter-glitch {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.letter-glitch-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.flying-button {
  --fly-bg: #27272a;
  --fly-ink: #f5f5f5;
  --fly-pod: #18181b;
  --fly-glow: #8ec5ff;
  --fly-thrust: 0;
  --fly-h: 44px;
  --fly-px: 22px;
  --fly-fs: 14px;
  --fly-scale: 1;
  --fly-ramp: #25222b;

  position: relative;
  width: 100%;
  height: 100%;
  min-height: 240px;
  overflow: hidden;
  isolation: isolate;
  touch-action: manipulation;
}

.flying-button[data-carry] {
  cursor: none;
}

.flying-button__ramp {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  fill: none;
  pointer-events: none;
}

.flying-button__ramp-body {
  stroke: var(--fly-ramp);
  stroke-linejoin: round;
}

.flying-button__ramp-edge {
  stroke: color-mix(in srgb, var(--fly-ramp) 72%, #fff);
  stroke-width: 1.5;
  stroke-linejoin: round;
}

.flying-button[data-theme='light'] .flying-button__ramp-edge {
  stroke: color-mix(in srgb, var(--fly-ramp) 82%, #000);
}

.flying-button[data-dragging]:not([data-carry]) {
  cursor: grabbing;
}

.flying-button__smoke {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

.flying-button__craft {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--fly-h);
  margin: 0;
  padding: 0 var(--fly-px);
  border: 0;
  border-radius: var(--fly-radius, calc(var(--fly-h) / 2));
  background: var(--fly-bg);
  color: var(--fly-ink);
  font-family: inherit;
  font-size: var(--fly-fs);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.01em;
  white-space: nowrap;
  cursor: pointer;
  outline: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
  transform-origin: 50% 50%;
  will-change: transform;
  visibility: hidden;
}

.flying-button[data-ready] .flying-button__craft {
  visibility: visible;
}

.flying-button[data-trigger='hover'] .flying-button__craft {
  cursor: default;
}

.flying-button[data-carry] .flying-button__craft {
  pointer-events: none;
  cursor: none;
}

.flying-button__craft:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--fly-ink) 60%, transparent);
  outline-offset: 3px;
}

.flying-button__face {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0) 46%),
    linear-gradient(
      0deg,
      color-mix(in srgb, var(--fly-glow) calc(var(--fly-thrust) * 34%), transparent),
      transparent 62%
    );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -1px 0 rgba(0, 0, 0, 0.25);
  pointer-events: none;
}

.flying-button[data-theme='light'] .flying-button__face {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 50%),
    linear-gradient(
      0deg,
      color-mix(in srgb, var(--fly-glow) calc(var(--fly-thrust) * 30%), transparent),
      transparent 62%
    );
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.06),
    inset 0 -1px 0 rgba(0, 0, 0, 0.08);
}

.flying-button__label {
  position: relative;
}

.flying-button__craft[data-hover] {
  filter: brightness(1.12);
}

.flying-button[data-theme='light'] .flying-button__craft[data-hover] {
  filter: brightness(0.97);
}

.flying-button__craft[data-pressed] .flying-button__label {
  transform: scale(0.96);
}

.flying-button__pod {
  position: absolute;
  top: calc(100% - 3px * var(--fly-scale));
  width: calc(14px * var(--fly-scale));
  height: calc(8px * var(--fly-scale));
  border-radius: 2px 2px 5px 5px;
  background: linear-gradient(180deg, var(--fly-pod), color-mix(in srgb, var(--fly-pod) 80%, #000));
  transform: translateX(-50%);
  z-index: -1;
  pointer-events: none;
}

.flying-button__pod::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: calc(7px * var(--fly-scale));
  height: calc(2px * var(--fly-scale));
  border-radius: 2px 2px 1px 1px;
  transform: translateX(-50%);
  background: color-mix(in srgb, var(--fly-glow) calc(var(--fly-thrust) * 100%), #3f3f46);
  box-shadow: 0 1px 4px color-mix(in srgb, var(--fly-glow) calc(var(--fly-thrust) * 90%), transparent);
}

.flying-button[data-theme='light'] .flying-button__pod::after {
  background: color-mix(in srgb, var(--fly-glow) calc(var(--fly-thrust) * 100%), #52525b);
}

.flying-button__cursor {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;
  width: 20px;
  height: 28px;
  pointer-events: none;
  display: none;
  will-change: transform;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.28));
}

.flying-button[data-carry] .flying-button__cursor {
  display: block;
}


/* ---------- WebGL effects: where they sit ----------
   Each is a decorative layer behind the content (pointer-events: none; they follow the pointer from the window).
   Hidden until main.js mounts it, so reduced motion and browsers without WebGL2 see the page as before. */
.fx-layer { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity 1.2s var(--ease-out); }
.fx-layer.fx-on { opacity: 1; }
/* home hero: particles drift over the film, under the headline */
/* particles stay in the open film above the stats strip, so the strip and headline read cleanly */
.hero > .fx-layer { mix-blend-mode: screen; mask-image: linear-gradient(to bottom, #000 0%, #000 52%, transparent 74%); -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 52%, transparent 74%); }
.hero-inner { position: relative; z-index: 1; }
/* About quote band: a glass prism splits the light on the right, clear of the quote */
.bg-red { position: relative; overflow: hidden; }
.fx-prism { left: auto; width: min(56%, 760px); mask-image: linear-gradient(to right, transparent, #000 35%); -webkit-mask-image: linear-gradient(to right, transparent, #000 35%); }
.fx-prism.fx-on { opacity: 0.9; }
/* 404: chemical symbols glitch faintly behind the page; the flying button sits under the spilled beaker */
.soon { position: relative; overflow: hidden; }
.fx-glitch.fx-on { opacity: 0.85; }
.fx-glitch { mask-image: linear-gradient(to right, rgba(0, 0, 0, 0.3), #000 62%); -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0.3), #000 62%); }
.fly-stage { height: 260px; margin-top: 8px; border-radius: var(--radius-lg); }
.fly-stage:not(.fx-on) { height: 0; margin: 0; }
@media (max-width: 760px) { .fx-prism { width: 100%; mask-image: none; -webkit-mask-image: none; } .fx-prism.fx-on { opacity: 0.45; } }
/* home proof band: the aurora's light runs behind the heading, not lost below the fold of a tall band */
.fx-aurora { bottom: auto; height: min(100%, 80vh); }

/* ---------- Home: product story "Filling the flask" (see DESIGN.md "Product story") ----------
   Desktop with motion only (main.js adds .story-on): a stage pinned for six scroll steps. Scrolling raises the red
   liquid in a flask (--p, 0 to 1); each step drops a drop into the neck, forms the range's symbol in the liquid, swaps
   the text and slides that range's tile forward in the rack. Everyone else keeps the plain list (.index-fallback). */
.story { display: none; }
.story-on .story { display: block; }
.story-on .index-fallback { display: none; }
.story { --fill: calc(0.35 + var(--p, 0) * 0.57); position: relative; height: calc(100vh + 6 * 75vh); }
.story-stage { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; overflow: hidden; }
/* same box as .wrap, under its own name so the hidden phone version isn't taken for a broken layout */
.story-inner { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: center; padding-top: var(--header-h); }
.story-text { grid-column: 1 / 7; position: relative; min-height: 360px; container-type: inline-size; }
.story-visual { grid-column: 7 / 11; position: relative; height: min(68vh, 540px); }
.story-rack { grid-column: 11 / 13; justify-self: end; display: grid; gap: 10px; }

/* text: the active range rises in sharp; the one before lifts away blurred */
.story-step { position: absolute; left: 0; right: 0; top: 50%; translate: 0 -50%; opacity: 0; transform: translateY(40px); filter: blur(6px); pointer-events: none;
  transition: opacity 0.5s var(--ease-out), transform 0.75s var(--ease-out), filter 0.5s var(--ease-out); }
.story-step.is-past { transform: translateY(-40px); }
.story-step.is-active { opacity: 1; transform: none; filter: none; pointer-events: auto; transition-delay: 0.12s; }
.story-count { font: 500 0.92rem/1 var(--font); color: var(--muted); font-variant-numeric: tabular-nums; margin: 0 0 18px; }
.story-count b { color: var(--red); font-weight: 600; }
/* sized to the column, so the longest name ("Laboratory Consumables") always fits on one line */
.story-step h3 { font-size: min(3rem, 7.8cqi); line-height: 1.02; margin: 0 0 18px; }
.story-desc { color: var(--muted); font-size: 1.08rem; max-width: 40ch; margin: 0 0 12px; }
.story-meta { font-size: 0.92rem; font-weight: 500; color: var(--red); margin: 0 0 26px; }

/* the flask: glass, a rising liquid with a moving meniscus, bubbles, and a drop for each new range */
.story-flask { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.flask-glass { fill: rgba(255, 255, 255, 0.72); }
.flask-line { fill: none; stroke: var(--graphite); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.flask-ticks { stroke: var(--graphite); stroke-width: 2; stroke-linecap: round; opacity: 0.5; }
.flask-glare { fill: none; stroke: #fff; stroke-width: 7; stroke-linecap: round; opacity: 0.7; }
.flask-liquid { transform: translateY(calc(128px + (1 - var(--fill)) * 300px)); transition: transform 0.45s var(--ease-out); }
.flask-wave { animation: flask-wave 3.4s linear infinite; }
@keyframes flask-wave { to { transform: translateX(-100px); } }
.flask-ripple { fill: none; stroke: rgba(255, 255, 255, 0.7); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.flask-bubble { fill: rgba(255, 255, 255, 0.35); transform-box: fill-box; animation: flask-bubble 3.6s ease-in infinite; }
.flask-bubble:nth-of-type(2) { animation-delay: -0.8s; } .flask-bubble:nth-of-type(3) { animation-delay: -1.7s; }
.flask-bubble:nth-of-type(4) { animation-delay: -2.4s; } .flask-bubble:nth-of-type(5) { animation-delay: -3s; } .flask-bubble:nth-of-type(6) { animation-delay: -1.2s; }
@keyframes flask-bubble { from { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } 80% { opacity: 0.8; } to { transform: translateY(-240px); opacity: 0; } }
.story-drop { fill: var(--red); opacity: 0; }
.story.is-drip .story-drop { animation: flask-drop 0.7s cubic-bezier(0.55, 0, 0.9, 0.4) both; }
.story.is-drip .flask-ripple { animation: flask-ripple 0.9s var(--ease-out) 0.6s both; }
@keyframes flask-drop { from { transform: translateY(-30px); opacity: 0; } 25% { opacity: 1; } 92% { opacity: 1; } to { transform: translateY(calc(130px + (1 - var(--fill)) * 300px)); opacity: 0; } }
@keyframes flask-ripple { from { opacity: 0.9; transform: scale(0.3); } to { opacity: 0; transform: scale(2.4); } }

/* the range's symbol forms inside the liquid */
.story-sym { position: absolute; left: 50%; top: 73%; translate: -50% -50%; font: 600 clamp(3.4rem, 5.6vw, 5.2rem)/1 var(--font); letter-spacing: -0.03em;
  color: #fff; opacity: 0; transform: scale(0.8); filter: blur(10px); pointer-events: none;
  transition: opacity 0.45s var(--ease-out), transform 0.8s var(--ease-out), filter 0.6s var(--ease-out); }
.story-sym.is-active { opacity: 1; transform: none; filter: none; transition-delay: 0.45s; }

/* the sample rack: the active range slides forward and fills red */
.story-tile { display: block; text-decoration: none; opacity: 0.4; transition: opacity 0.4s var(--ease-out), transform 0.6s var(--ease-out); }
.story-tile .element { width: 54px; }
.story-tile.is-done { opacity: 0.75; }
.story-tile.is-active { opacity: 1; transform: translateX(-16px) scale(1.12); }
.story-tile.is-active .element { background: var(--red); border-color: var(--red); color: var(--white); }

.story-hint { position: absolute; left: 50%; bottom: 22px; translate: -50% 0; margin: 0; font-size: 0.82rem; color: var(--muted); transition: opacity 0.4s ease; }
.story.is-moving .story-hint { opacity: 0; }

/* ---------- Home: stacked scenes (see DESIGN.md "Scenes") ----------
   Desktop with motion only (main.js adds .scenes-on on the home page). Every section is a sticky card: it pins,
   and the next one dissolves in over it in place while the covered scene sinks back a little. A section
   taller than the screen first scrolls to its end (main.js sets --scene-top), so long scenes such as the product
   story play out before the next card arrives. Other pages, phones and reduced motion scroll normally. */
.scenes-on main > section { position: sticky; top: var(--scene-top, 0px); min-height: 100vh; transform-origin: 50% calc(var(--scene-top, 0px) * -1);
  transform: scale(calc(1 - var(--cover, 0) * 0.05)); }
/* the old scene's content is gone by the halfway point, so two scenes' text never overlaps legibly */
.scenes-on main > section > * { opacity: calc(1 - var(--cover, 0) * 2); }
/* the incoming scene dissolves in exactly in place (chosen by the user from five styles, 2026-10-31): it is held
   at the top of the screen while it arrives (--enter 0 to 1, from main.js) and fades up over the scene below. */
.scenes-on main > section:not(:first-child) { opacity: var(--enter, 1);
  transform: translateY(calc((var(--enter, 1) - 1) * 100vh)) scale(calc(1 - var(--cover, 0) * 0.05)); }
.scenes-on main > section[class*="bg-"] { animation: none; }
.scenes-on main > section:not([class*="bg-"]):not(.hero) { background: var(--lab); }
.scenes-on main > section.section { display: flex; flex-direction: column; justify-content: center; }
.scenes-on main > section.section > :not(.molecule):not(.fx-layer) { width: 100%; }
/* hold: each scene stays on screen for half a screen of extra scrolling before the next card starts to rise */
.scenes-on main > section:not(:last-child) { margin-bottom: 50vh; }

/* Inside pinned scenes nothing moves, so the scroll-driven reveals would freeze half-way (half-open photos,
   half-filled headings). There they are off, and each scene's content makes a timed entrance when the scene
   arrives (.is-in from main.js): blocks sharpen and rise into place, photographs open from an aperture. */
.scenes-on main > section:not(.hero) :is(.section-head, .index li, .timeline, .timeline .n, .values > *, .stats > *, .distributors, .logo-wall,
  .entry, .proof li, .apps > *, .partner, .bleed-text, .cta-band, .media, .media img, .bleed-media, .bleed-media img, .rail-item img) { animation: none; }
.scenes-on main > section:not(.hero) :is(.stat, .timeline)::before { animation: none; transform: none; }
/* the decorative molecules were drawn in by scrolling; in still scenes they would only crowd the text */
.scenes-on main > section .molecule { display: none; }
.scenes-on main > section:not(.hero) :is(.section-head h2, .bleed-text h2) { animation: none; color: inherit; background: none; -webkit-background-clip: border-box; background-clip: border-box; }
.scenes-on main > section:not(.hero) :is(.section-head, .bleed-text, .index, .rail-head, .timeline, .values, .stats, .proof, .logo-wall, .distributors, .partner, .btn-row, .marquee, .media) {
  opacity: 0; transform: translateY(44px); filter: blur(8px);
  transition: opacity 0.8s var(--ease-out), transform 1s var(--ease-out), filter 0.8s var(--ease-out); }
.scenes-on main > section:not(.hero) :is(.story, .rail-pin) { opacity: 0; transition: opacity 0.9s var(--ease-out); }
.scenes-on main > section:not(.hero) .bleed-media { clip-path: inset(14% 12% 14% 12% round 28px); transition: clip-path 1.2s var(--ease-out); }
.scenes-on main > section.is-in :is(.section-head, .bleed-text, .index, .rail-head, .timeline, .values, .stats, .proof, .logo-wall, .distributors, .partner, .btn-row, .marquee, .media, .story, .rail-pin) {
  opacity: 1; transform: none; filter: none; }
.scenes-on main > section.is-in .bleed-media { clip-path: inset(0 round 0); transition-delay: 0.08s; }
.scenes-on main > section.is-in .bleed-text { transition-delay: 0.22s; }
.scenes-on main > section.is-in :is(.index, .timeline, .values, .stats, .proof, .logo-wall, .distributors, .partner, .marquee, .media, .rail-pin, .story) { transition-delay: 0.18s; }
.scenes-on main > section.is-in .btn-row { transition-delay: 0.32s; }

/* Long scenes (the product story, the industries strip) keep their heading: it stays pinned below the menu and,
   once the scene's own content starts playing (.head-held from main.js), condenses to a slim title. The
   description beside it fades out, so you always know which section you are in. */
.scenes-on main > section > .wrap:has(> .section-head) { position: sticky; top: calc(var(--header-h) + 20px); z-index: 3; pointer-events: none; }
.scenes-on main > section > .wrap:has(> .section-head) :is(a, button) { pointer-events: auto; }
.scenes-on main > section .section-head { transform-origin: 0 0; transition: transform 0.6s var(--ease-out), opacity 0.8s var(--ease-out), filter 0.8s var(--ease-out); }
.scenes-on main > section .section-head > :last-child:not(:first-child) { transition: opacity 0.4s var(--ease-out); }
.scenes-on main > section.head-held .section-head { transform: scale(0.6); }
.scenes-on main > section.head-held .section-head > :last-child:not(:first-child) { opacity: 0; pointer-events: none; }
/* the pinned industries strip sits below the condensed heading */
.scenes-on .rail-pin.is-pinned .rail-sticky { top: max(calc(50svh - var(--rail-h, 400px) / 2), calc(var(--header-h) + 150px)); }

/* scenes: the product title stays pinned above the story, so the story starts below it instead of centring
   underneath it (on shorter or zoomed screens the centred text slid under the title) */
.scenes-on .story-stage { align-items: flex-start; }
.scenes-on .story-inner { padding-top: calc(var(--header-h) + 150px); align-items: start; }
.scenes-on .story-text { min-height: 0; height: calc(100vh - var(--header-h) - 190px); }
.scenes-on .story-step { top: 0; translate: none; }
.scenes-on .story-visual { height: min(calc(100vh - var(--header-h) - 190px), 520px); }
.scenes-on .story-rack { align-self: start; }
/* long scenes end exactly where their animation ends, so nothing scrolls up under the pinned heading: the story
   holds its last frame (and the strip its last position) until the next scene dissolves in. Each range in the
   story already has its own link, so the list's closing link is not needed here. */
.scenes-on main > section:has(.story, .rail-pin.is-pinned) { padding-bottom: 0; }
.scenes-on .story ~ .wrap { display: none; }


/* ---------- Products menu: a small periodic table (chosen by the user, 2026-10-31) ----------
   Desktop: "All products" across the top, then the six ranges as element tiles in a 3 x 2 grid (number, symbol,
   name, ranges); hover and the current page fill red. In the phone menu the same links read as a plain list. */
.el-menu .el-name { display: block; }
@media (min-width: 1025px) {
  .dd-grid { display: grid; grid-template-columns: repeat(3, 104px); gap: 8px; padding: 10px; min-width: 0; }
  .dd-grid .dd-all { grid-column: 1 / -1; margin-bottom: 2px; }
  .dd-grid a.dd-tile { display: block; padding: 0; border-radius: 12px; background: none; }
  .dd-grid .el-menu { display: grid; grid-template-rows: auto 1fr auto auto; width: 104px; aspect-ratio: 1; padding: 8px 9px 7px; border-radius: 12px;
    border: 1.5px solid currentColor; color: var(--red); background: rgba(255, 255, 255, 0.85);
    transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease, border-color var(--dur-fast) ease; }
  .dd-grid .el-menu .el-n { font-size: 0.66rem; }
  .dd-grid .el-menu .el-sym { font-size: 1.75rem; }
  .dd-grid .el-menu .el-name { font-size: 0.74rem; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .dd-grid .el-menu .el-m { font-size: 0.6rem; }
  .dd-grid a[aria-current] .el-menu { background: var(--red); border-color: var(--red); color: var(--white); }
}
@media (min-width: 1025px) and (hover: hover) and (pointer: fine) {
  .dd-grid a.dd-tile:hover { background: none; }
  .dd-grid a.dd-tile:hover .el-menu { background: var(--red); border-color: var(--red); color: var(--white); }
}
@media (max-width: 1024px) {
  .dd-grid a.dd-tile { display: flex; }
  .dd-grid .el-menu { display: flex; align-items: center; gap: 12px; width: auto; aspect-ratio: auto; padding: 0; border: 0; background: none; color: var(--text); font-size: 1rem; }
  .dd-grid .el-menu :is(.el-n, .el-m) { display: none; }
  .dd-grid .el-menu .el-sym { display: inline-grid; place-items: center; width: 26px; height: 26px; border: 1px solid var(--red); border-radius: 7px; color: var(--red); font-size: 0.72rem; font-weight: 600; }
  .dd-grid .el-menu .el-name { font-size: 1rem; font-weight: 500; }
}

/* ---------- Phone: calm and uniform (≤760px; asked for by the user, 2026-10-31) ----------
   One rhythm on every page: in each block the photo comes first, then its text; blocks share the same spacing;
   decorations step back (no section numbers, molecules, element tiles or tag chips on the overview); and the
   scroll-driven zooms, wipes, blurs and colour fills are replaced by one soft fade-in per block. */
@media (max-width: 760px) {
  .bleed > .bleed-media { order: -1; }
  .bleed { row-gap: 22px; }
  .eb-no, .molecule, .hub-row .element, .hub-row .chips { display: none; }
  .hub-row .bleed-text h2 { margin-top: 0; }
  .hub-row + .hub-row { margin-top: 64px; }
}
@supports (animation-timeline: view()) {
  /* phones and touch tablets (iPads): no scroll-driven effects, one soft fade per block */
  @media (prefers-reduced-motion: no-preference) and ((max-width: 760px) or (pointer: coarse)) {
    .bg-ink, .bg-red, .bg-tint, .bg-white,
    :is(.section-head, .index li, .timeline, .timeline .n, .values > *, .stats > *, .distributors, .logo-wall, .entry, .proof li, .apps > *,
      .partner, .bleed-text, .faq-item, .details li, .form-card, .cta-band, .media, .media img, .bleed-media, .bleed-media img, .page-hero > img,
      .page-hero > picture > img, .rail-item img, .legal > *, .hero-media video, .hero-inner, .page-hero > .wrap) { animation: none; }
    :is(.stat, .timeline)::before { animation: none; transform: none; }
    :is(.section-head h2, .bleed-text h2, .cta-band h2) { animation: none; color: inherit; background: none; -webkit-background-clip: border-box; background-clip: border-box; }
    :is(.section-head, .bleed-text, .bleed-media, .media, .index li, .timeline, .values > *, .stats > *, .proof li, .entry, .faq-item, .form-card, .logo-wall, .distributors, .partner) {
      animation: phone-fade linear both; animation-timeline: view(); animation-range: entry 0% entry 45%; }
    @keyframes phone-fade { from { opacity: 0; } to { opacity: 1; } }
    /* the photo wipes and apertures use more specific selectors, so they are matched as specifically here */
    .bleed > .bleed-media.bleed-media:not(.founder-feature > *), .media.media:not(.contain) {
      clip-path: none; animation: phone-fade linear both; animation-timeline: view(); animation-range: entry 0% entry 45%; }
  }
}

/* Process steps (furniture page): four columns joined by one hairline with a ring per step;
   on phones the line runs down the left edge */
.steps { grid-template-columns: repeat(4, minmax(0, 1fr)); position: relative; margin-top: clamp(8px, 2vw, 24px); }
.steps::before { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 1px; background: var(--hair); }
.step { position: relative; padding-top: 40px; }
.step::before { content: ""; position: absolute; left: 0; top: 0; width: 15px; height: 15px; border-radius: 50%;
  background: var(--lab); border: 1.5px solid var(--red); box-sizing: border-box; }
.step:last-child::before { background: var(--red); }
.step .n { display: block; margin-bottom: 10px; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.14em; color: var(--red); font-variant-numeric: tabular-nums; }
.step h3 { font-size: clamp(1.2rem, 1.6vw, 1.4rem); margin-bottom: 8px; }
.step p { color: var(--muted); max-width: 30ch; }
@media (max-width: 1024px) and (min-width: 761px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 48px; } .steps::before { display: none; } }
@media (max-width: 760px) {
  .steps { grid-template-columns: minmax(0, 1fr); row-gap: 32px; padding-left: 34px; }
  .steps::before { left: 7px; right: auto; top: 8px; bottom: 8px; width: 1px; height: auto; }
  .step { padding-top: 0; }
  .step::before { left: -34px; top: 2px; }
}

/* Range scale (2026-10-31, chosen by the user): the ranges hang off one hairline like the graduations on
   a measuring cylinder. A red major tick and number per range, faint minor ticks between, no boxes. */
.scale { --sx: 64px; --g: 44px; --fs: clamp(1.55rem, 2.5vw, 2.2rem); --pt: clamp(26px, 3vw, 38px);
  position: relative; list-style: none; margin: 44px 0 0; padding: 0 0 0 calc(var(--sx) + var(--g)); }
.scale::before { content: ""; position: absolute; left: var(--sx); top: 0; bottom: 0; width: 1px; background: rgba(58, 14, 10, 0.3); }
.scale::after { content: ""; position: absolute; left: calc(var(--sx) + 1px); top: 0; bottom: 0; width: 9px; pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(58, 14, 10, 0.16) 0 1px, transparent 1px 14px); }
.scale-unit { position: absolute; left: 0; top: -30px; width: calc(var(--sx) + 1px); text-align: right; font-size: 0.75rem;
  letter-spacing: 0.12em; color: var(--muted); }
.scale .entry { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 12px 40px;
  padding: var(--pt) 0; scroll-margin-top: calc(var(--header-h) + 48px); }
.scale .entry::before { content: ""; position: absolute; z-index: 1; left: calc(-1 * var(--g)); top: calc(var(--pt) + var(--fs) * 0.58);
  width: calc(var(--g) - 14px); height: 1.5px; background: var(--red); transform-origin: left; transition: scale var(--dur-fast) var(--ease-out); }
.scale .mark { position: absolute; right: calc(100% + var(--g) + 12px); top: calc(var(--pt) + var(--fs) * 0.58 - 0.62em);
  font-size: 0.78rem; line-height: 1.2; color: var(--muted); font-variant-numeric: tabular-nums; }
.scale h3 { font-size: var(--fs); line-height: 1.16; font-weight: 500; letter-spacing: -0.025em; margin: 0 0 8px; transition: color var(--dur-fast) ease; }
.scale .entry-incl { margin: 0; max-width: 60ch; color: var(--muted); }
.scale .entry-incl em { font-style: normal; color: var(--text); }
.scale .entry-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.scale .quote-add { font: inherit; font-size: 0.88rem; padding: 0; border: 0; background: none; color: var(--muted); cursor: pointer;
  text-decoration: underline; text-decoration-color: var(--hair); text-underline-offset: 4px; }
.scale .quote-add[aria-pressed="true"] { background: none; color: var(--red); text-decoration-color: currentColor; }
@media (hover: hover) and (pointer: fine) {
  .scale .entry:hover::before { scale: 1.45 1; }
  .scale .entry:hover h3 { color: var(--red); }
  .scale .quote-add:hover { color: var(--red); }
}
@media (max-width: 760px) {
  .scale { --sx: 30px; --g: 24px; --fs: 1.4rem; --pt: 24px; }
  .scale .entry { grid-template-columns: minmax(0, 1fr); }
  .scale .entry-actions { flex-direction: row; align-items: center; justify-content: space-between; margin-top: 4px; }
  .scale .mark { right: calc(100% + var(--g) + 7px); font-size: 0.7rem; }
}

/* Range page items as element tiles (2026-10-31): number, a symbol from the item's initials, the name and an
   add-to-quote label. The whole tile toggles the item on the quote list; added tiles turn very light red. */
.item-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 18px); }
.item-tile { position: relative; width: 100%; height: 100%; min-height: 200px; display: flex; flex-direction: column; align-items: flex-start;
  padding: 18px 20px 20px; text-align: left; font: inherit; color: var(--text); cursor: pointer;
  background: var(--white); border: 1px solid var(--hair); border-radius: 20px;
  transition: background-color var(--dur-fast) ease, border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease, translate var(--dur-fast) var(--ease-out); }
.it-no { font-size: 0.75rem; letter-spacing: 0.1em; color: var(--muted); font-variant-numeric: tabular-nums; }
.it-sym { margin: 14px 0 auto; font-size: clamp(2.6rem, 3.6vw, 3.4rem); line-height: 1; font-weight: 500; letter-spacing: -0.04em; color: var(--red); }
.it-name { margin-top: 22px; font-size: 1.02rem; font-weight: 500; line-height: 1.3; }
.it-add { margin-top: 6px; font-size: 0.8rem; color: var(--muted); }
.it-add::before { content: "+ "; }
.item-tile::after { content: ""; position: absolute; top: 18px; right: 18px; width: 9px; height: 9px; border-radius: 50%;
  border: 1.5px solid var(--hair); transition: background-color var(--dur-fast) ease, border-color var(--dur-fast) ease; }
.item-tile[aria-pressed="true"] { background: var(--lab-2); border-color: rgba(155, 28, 20, 0.35); }
.item-tile[aria-pressed="true"]::after { background: var(--red); border-color: var(--red); }
.item-tile[aria-pressed="true"] .it-add { color: var(--red); }
.item-tile[aria-pressed="true"] .it-add::before { content: "\2713\00a0"; }
.item-tile:active { scale: 0.98; }
@media (hover: hover) and (pointer: fine) {
  .item-tile:hover { border-color: rgba(155, 28, 20, 0.3); box-shadow: 0 18px 40px -26px rgba(111, 18, 11, 0.35); translate: 0 -3px; }
  .item-tile:hover .it-add { color: var(--red); }
  .scale h3 a:hover { color: var(--red); }
}
@media (max-width: 1100px) { .item-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .item-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .item-tile { min-height: 168px; padding: 14px 14px 16px; border-radius: 16px; } .it-sym { font-size: 2.3rem; } .it-name { font-size: 0.95rem; } }