/* ==========================================================================
   Raymed — redesign v2
   One stylesheet, no framework. Tokens first, then base, layout, components,
   page sections. Scroll-driven pieces read --p (0..1) set by raymed.js.
   ========================================================================== */

/* ---------- Fonts (self-hosted, SIL OFL) ---------- */
@font-face {
  font-family: "Onest";
  src: url("../fonts/onest-cyrillic-wght-normal.c23f669d14e4.woff2") format("woff2-variations");
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Onest";
  src: url("../fonts/onest-latin-wght-normal.46a6615df0d8.woff2") format("woff2-variations");
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/jetbrains-mono-cyrillic-400-normal.82462194ebb6.woff2") format("woff2");
  font-weight: 400; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/jetbrains-mono-latin-400-normal.caf0dfde4e44.woff2") format("woff2");
  font-weight: 400; font-display: swap; unicode-range: U+0000-00FF, U+2000-206F, U+2122, U+2212;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/jetbrains-mono-cyrillic-500-normal.af752ba91433.woff2") format("woff2");
  font-weight: 500; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/jetbrains-mono-latin-500-normal.a21e038a03f7.woff2") format("woff2");
  font-weight: 500; font-display: swap; unicode-range: U+0000-00FF, U+2000-206F, U+2122, U+2212;
}

/* ---------- Tokens ---------- */
:root {
  --ink: #060a22;
  --ink-2: #0b1137;
  --ink-3: #141c52;
  --brand: #1b26d1;          /* screen-tuned Raymed ultramarine */
  --brand-deep: #0d1484;     /* the original brand blue */
  --brand-soft: #e8eafc;
  --signal: #ff6b1f;         /* refined Raymed orange, used sparingly */
  --signal-soft: #fff0e7;
  --paper: #ffffff;
  --pearl: #f4f5f9;
  --mist: #e9ebf3;
  --text: #0a0f28;
  --muted: #565c78;
  --muted-on-dark: #a3a9c9;
  --line: rgba(10, 15, 40, .10);
  --line-on-dark: rgba(255, 255, 255, .12);

  --font: "Onest", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  --fs-hero: clamp(3.1rem, min(8.2vw, 13.5vh), 8.6rem);
  --fs-d1: clamp(2.6rem, 6.4vw, 6rem);
  --fs-d2: clamp(2.1rem, 4.4vw, 4rem);
  --fs-d3: clamp(1.6rem, 2.6vw, 2.4rem);
  --fs-lead: clamp(1.12rem, 1.5vw, 1.4rem);
  --fs-body: 1.0625rem;
  --fs-small: .9375rem;

  --gutter: clamp(16px, 4vw, 56px);
  --maxw: 1320px;
  --radius: 28px;
  --radius-sm: 16px;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --header-h: 68px;
  color-scheme: light;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.6;
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg, canvas, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
::selection { background: var(--brand); color: #fff; }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; border-radius: 6px; }

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 1000;
  background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 10px;
}
.skip-link:focus { top: 12px; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: calc(var(--maxw) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: calc(980px + var(--gutter) * 2); }
.section { position: relative; padding-block: clamp(88px, 13vw, 180px); }
.section--tight { padding-block: clamp(64px, 8vw, 112px); }
.dark { background: var(--ink); color: #fff; --muted: var(--muted-on-dark); --line: var(--line-on-dark); }
.pearl { background: var(--pearl); }

/* ---------- Type ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: .78rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}
.eyebrow::before { content: ""; width: 22px; height: 1px; background: currentColor; opacity: .6; }
.eyebrow--signal { color: var(--signal); }
.display { font-size: var(--fs-d1); line-height: .98; letter-spacing: -.045em; font-weight: 640; }
.h2 { font-size: var(--fs-d2); line-height: 1.02; letter-spacing: -.04em; font-weight: 620; }
.h3 { font-size: var(--fs-d3); line-height: 1.1; letter-spacing: -.03em; font-weight: 600; }
.lead { font-size: var(--fs-lead); line-height: 1.5; color: var(--muted); letter-spacing: -.01em; max-width: 46ch; }
.muted { color: var(--muted); }
.grad-text {
  background: linear-gradient(100deg, #fff 0%, #c9cdf9 40%, #ffb38a 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.grad-text--light {
  background: linear-gradient(100deg, var(--brand-deep) 0%, var(--brand) 55%, var(--signal) 110%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.balance { text-wrap: balance; }

/* ---------- Buttons ---------- */
.btn {
  --bg: var(--ink); --fg: #fff;
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 26px; border-radius: 999px;
  background: var(--bg); color: var(--fg);
  font-weight: 560; font-size: 1rem; letter-spacing: -.01em;
  transition: transform .5s var(--ease-out), background-color .3s, box-shadow .4s;
  will-change: transform; isolation: isolate; overflow: hidden;
}
.btn:hover { box-shadow: 0 14px 40px -12px rgba(27, 38, 209, .55); }
.btn:active { transform: scale(.97); }
.btn svg { width: 18px; height: 18px; transition: transform .4s var(--ease-out); }
.btn:hover svg { transform: translateX(4px); }
.btn--brand { --bg: var(--brand); }
.btn--light { --bg: #fff; --fg: var(--ink); }
.btn--ghost { --bg: transparent; --fg: currentColor; box-shadow: inset 0 0 0 1px var(--line); }
.dark .btn--ghost { box-shadow: inset 0 0 0 1px rgba(255,255,255,.28); }
.btn--ghost:hover { box-shadow: inset 0 0 0 1px currentColor; }
.link-arrow { display: inline-flex; align-items: center; gap: 8px; font-weight: 560; color: var(--brand); }
.dark .link-arrow { color: #fff; }
.link-arrow svg { width: 16px; height: 16px; transition: transform .4s var(--ease-out); }
.link-arrow:hover svg { transform: translateX(4px); }

/* ---------- Header ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100; height: var(--header-h);
  color: var(--text);
  transition: transform .6s var(--ease-out), color .4s, background-color .4s;
}
.site-header::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: rgba(255, 255, 255, .72);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--line);
  opacity: 1; transition: opacity .4s, background-color .4s;
}
.site-header[data-theme="dark"] { color: #fff; }
.site-header[data-theme="dark"]::before { background: rgba(6, 10, 34, .55); border-color: rgba(255,255,255,.08); }
.site-header.is-top::before { opacity: 0; }
.site-header.is-hidden { transform: translateY(-100%); }
.site-header .wrap { height: 100%; display: flex; align-items: center; gap: 28px; }
.brand { display: inline-flex; align-items: center; gap: 12px; flex-shrink: 0; }
.brand__mark { width: 34px; height: 34px; }
.brand__word { font-weight: 700; font-size: 1.22rem; letter-spacing: -.035em; line-height: 1; }
.brand__word small { display: block; font-family: var(--mono); font-weight: 500; font-size: .56rem; letter-spacing: .2em; text-transform: uppercase; opacity: .6; margin-top: 4px; }
.nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.nav__link {
  position: relative; display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; padding: 0 14px; border-radius: 999px;
  font-size: .95rem; font-weight: 500; letter-spacing: -.01em; opacity: .86;
  transition: opacity .2s, background-color .3s;
}
.nav__link:hover, .nav__link[aria-expanded="true"], .nav__link[aria-current="page"] { opacity: 1; background: rgba(127, 135, 180, .14); }
.nav__link svg { width: 12px; height: 12px; transition: transform .3s var(--ease-out); }
.nav__link[aria-expanded="true"] svg { transform: rotate(180deg); }
.header-tools { display: flex; align-items: center; gap: 8px; }
.lang { display: inline-flex; padding: 3px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); }
.site-header[data-theme="dark"] .lang { box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); }
.lang a { min-width: 40px; min-height: 36px; display: grid; place-items: center; border-radius: 999px; font-family: var(--mono); font-size: .75rem; font-weight: 500; opacity: .7; }
.lang a[aria-current="true"] { background: currentColor; opacity: 1; }
.lang a[aria-current="true"] span { color: var(--paper); }
.site-header[data-theme="dark"] .lang a[aria-current="true"] span { color: var(--ink); }
.header-cta { min-height: 42px; padding: 0 18px; font-size: .9rem; }
.burger { display: none; width: 44px; height: 44px; border-radius: 999px; place-items: center; }
.burger span { display: block; width: 20px; height: 1.6px; background: currentColor; border-radius: 2px; transition: transform .4s var(--ease-out); }
.burger span + span { margin-top: 6px; }
.menu-open .burger span:first-child { transform: translateY(3.8px) rotate(45deg); }
.menu-open .burger span:last-child { transform: translateY(-3.8px) rotate(-45deg); }

/* Mega menu */
.mega {
  position: absolute; left: 0; right: 0; top: 100%;
  background: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: saturate(180%) blur(24px); backdrop-filter: saturate(180%) blur(24px);
  border-bottom: 1px solid var(--line); color: var(--text);
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .35s var(--ease-out), transform .5s var(--ease-out), visibility 0s .35s;
  max-height: calc(100vh - var(--header-h)); overflow: auto;
}
.mega.is-open { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.mega__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 36px 40px; padding-block: 40px 48px; }
.mega__col h3 { font-size: .98rem; font-weight: 620; letter-spacing: -.015em; margin-bottom: 12px; }
.mega__col h3 a { display: inline-flex; align-items: center; gap: 10px; }
.mega__col h3 .ico { width: 26px; height: 26px; color: var(--brand); }
.mega__col ul { list-style: none; padding: 0; display: grid; gap: 2px; }
.mega__col li a { display: block; padding: 5px 0; font-size: .92rem; color: var(--muted); transition: color .2s, transform .3s var(--ease-out); }
.mega__col li a:hover { color: var(--brand); transform: translateX(3px); }
.mega__foot { display: flex; gap: 24px; align-items: center; justify-content: space-between; padding-block: 18px; border-top: 1px solid var(--line); font-size: .9rem; }

/* Mobile drawer */
.drawer {
  position: fixed; inset: 0; z-index: 99; background: var(--ink); color: #fff;
  padding: calc(var(--header-h) + 20px) var(--gutter) 40px;
  display: flex; flex-direction: column; gap: 6px; overflow: auto;
  clip-path: circle(0 at calc(100% - 40px) 34px); visibility: hidden;
  transition: clip-path .8s var(--ease-io), visibility 0s .8s;
}
.menu-open .drawer { clip-path: circle(150% at calc(100% - 40px) 34px); visibility: visible; transition-delay: 0s; }
.menu-open .site-header { color: #fff; }
.menu-open .site-header::before { opacity: 0; }
.drawer a.drawer__big { font-size: clamp(2rem, 9vw, 2.8rem); font-weight: 620; letter-spacing: -.04em; padding: 6px 0; }
.drawer details { border-top: 1px solid var(--line-on-dark); padding: 10px 0; }
.drawer summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; font-size: 1.08rem; min-height: 44px; }
.drawer summary::-webkit-details-marker { display: none; }
.drawer details ul { list-style: none; padding: 4px 0 8px 14px; margin: 0; }
.drawer details li a { display: block; padding: 8px 0; color: var(--muted-on-dark); }
.drawer__foot { margin-top: auto; padding-top: 28px; display: grid; gap: 6px; color: var(--muted-on-dark); }

/* ---------- Reveal primitives ---------- */
[data-reveal] { opacity: 0; transform: translateY(36px); transition: opacity 1.1s var(--ease-out), transform 1.3s var(--ease-out); transition-delay: var(--d, 0s); }
[data-reveal="scale"] { transform: scale(.94); }
[data-reveal="left"] { transform: translateX(-40px); }
[data-reveal].is-in { opacity: 1; transform: none; }
.split-line { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.split-line > span { display: block; transform: translateY(110%); opacity: 0; transition: transform 1.2s var(--ease-out), opacity .6s ease; transition-delay: var(--d, 0s); }
.is-in .split-line > span, .split-line.is-in > span { transform: none; opacity: 1; }

/* ---------- HERO: the stent flythrough ---------- */
.hero { position: relative; height: 320vh; background: var(--ink); color: #fff; }
.hero__sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__glow {
  position: absolute; inset: -20%; pointer-events: none;
  background:
    radial-gradient(40% 35% at 70% 40%, rgba(27, 38, 209, .45), transparent 70%),
    radial-gradient(30% 30% at 25% 75%, rgba(255, 107, 31, .16), transparent 70%);
  filter: blur(10px);
  transform: scale(calc(1 + var(--p, 0) * .6));
  opacity: calc(1 - var(--p, 0) * .6);
}
.hero__grain {
  position: absolute; inset: 0; pointer-events: none; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero__copy {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center;
  padding-top: var(--header-h);
  --a: clamp(0, calc(1 - (var(--p, 0) - .08) * 4.2), 1);
  opacity: var(--a);
  transform: translateY(calc(var(--p, 0) * -18vh)) scale(calc(1 + var(--p, 0) * .35));
  filter: blur(calc((1 - var(--a)) * 14px));
  pointer-events: none;
}
.hero__copy a, .hero__copy button { pointer-events: auto; }
.hero__title { font-size: var(--fs-hero); line-height: .9; letter-spacing: -.055em; font-weight: 660; max-width: 11ch; }
.hero__title .grad-text { padding-right: .05em; }
.hero__sub { margin-top: clamp(22px, 3vw, 36px); font-size: var(--fs-lead); color: var(--muted-on-dark); max-width: 38ch; line-height: 1.5; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(26px, 3.4vw, 44px); }
.hero__meta {
  position: absolute; left: 0; right: 0; bottom: clamp(20px, 4vh, 40px);
  display: flex; justify-content: space-between; align-items: end; gap: 20px;
  font-family: var(--mono); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-on-dark);
  opacity: calc(1 - var(--p, 0) * 6);
}
.scroll-cue { display: inline-flex; align-items: center; gap: 12px; }
.scroll-cue i { position: relative; width: 22px; height: 34px; border-radius: 12px; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.5); }
.scroll-cue i::after { content: ""; position: absolute; left: 50%; top: 7px; width: 3px; height: 7px; margin-left: -1.5px; border-radius: 2px; background: #fff; animation: cue 1.8s var(--ease-io) infinite; }
@keyframes cue { 0% { transform: translateY(0); opacity: 0; } 30% { opacity: 1; } 80% { transform: translateY(11px); opacity: 0; } 100% { opacity: 0; } }

.hero__chapter {
  position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: var(--gutter);
  pointer-events: none;
}
.hero__chapter h2 { text-shadow: 0 4px 40px rgba(6,10,34,.9); font-size: var(--fs-d1); line-height: 1; letter-spacing: -.045em; font-weight: 640; max-width: 14ch; }
.hero__chapter p { margin-top: 18px; color: var(--muted-on-dark); font-size: var(--fs-lead); }
.hero__chapter--2 {
  --a: clamp(0, calc((var(--p, 0) - .5) * 6), 1);
  --b: clamp(0, calc((var(--p, 0) - .7) * 8), 1);
  opacity: calc(var(--a) - var(--b));
  transform: scale(calc(.9 + var(--a) * .1 + var(--b) * .2));
  filter: blur(calc((1 - var(--a) + var(--b)) * 10px));
}
.hero__chapter--3 {
  --a: clamp(0, calc((var(--p, 0) - .83) * 8), 1);
  opacity: var(--a);
  transform: translateY(calc((1 - var(--a)) * 40px));
}
.hero__whiteout { position: absolute; inset: 0; background: var(--paper); opacity: clamp(0, calc((var(--p, 0) - .965) * 30), 1); pointer-events: none; }
.hero__progress { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 0; height: 2px; background: rgba(255,255,255,.08); }
.hero__progress i { display: block; height: 100%; background: linear-gradient(90deg, var(--brand), var(--signal)); transform-origin: left; transform: scaleX(var(--p, 0)); }

/* ---------- Statement (word-by-word light-up) ---------- */
.statement { position: relative; height: 220vh; }
.statement__sticky { position: sticky; top: 0; min-height: 100vh; min-height: 100svh; display: grid; align-items: center; }
.statement__text { font-size: clamp(2rem, 5vw, 4.8rem); line-height: 1.06; letter-spacing: -.042em; font-weight: 600; max-width: 25ch; }
.statement__text .w { opacity: .13; transition: opacity .25s linear; }
.statement__text .w.on { opacity: 1; }
.statement__text .w.accent.on { color: var(--brand); }

/* ---------- Product stage (zoom on scroll) ---------- */
.stage { position: relative; height: 260vh; background: var(--paper); }
.stage + .stage { margin-top: -1px; }
.stage__sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: grid; place-items: center; }
.stage__bgword {
  position: absolute; left: 50%; top: 50%; white-space: nowrap; pointer-events: none;
  font-size: clamp(7rem, 27vw, 26rem); font-weight: 800; letter-spacing: -.07em; line-height: 1;
  color: var(--pearl);
  transform: translate(calc(-50% + (0.5 - var(--p, 0)) * 40vw), -50%);
}
.stage__img {
  position: relative; width: min(64vw, 720px); aspect-ratio: 1; display: grid; place-items: center;
  --z: calc(.55 + var(--p, 0) * .6);
  transform: scale(var(--z)) rotate(calc(-14deg + var(--p, 0) * 22deg));
  filter: drop-shadow(0 60px 80px rgba(13, 20, 132, .22));
  will-change: transform;
}
.stage__img img { width: 100%; height: 100%; object-fit: contain; }
.stage__halo { position: absolute; width: 70vmin; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(27,38,209,.16), transparent 65%); transform: scale(calc(.6 + var(--p, 0) * 1.2)); }
.stage__copy {
  position: absolute; left: var(--gutter); bottom: clamp(32px, 8vh, 90px); max-width: 440px;
  --a: clamp(0, calc((var(--p, 0) - .15) * 5), 1);
  --b: clamp(0, calc((var(--p, 0) - .85) * 8), 1);
  opacity: calc(var(--a) - var(--b)); transform: translateY(calc((1 - var(--a)) * 40px));
}
.stage__copy .h2 { margin: 14px 0 14px; }
.stage__copy .rich { color: var(--muted); font-size: var(--fs-body); }
.stage__copy .rich p + p { margin-top: .6em; }
.stage__copy .btn { margin-top: 22px; }
.stage__specs {
  position: absolute; right: var(--gutter); top: 50%; transform: translateY(-50%);
  display: grid; gap: 14px; width: min(280px, 32vw);
}
.spec-chip {
  padding: 16px 18px; border-radius: var(--radius-sm); background: rgba(255,255,255,.75);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: 0 1px 0 rgba(255,255,255,.8) inset, 0 20px 40px -24px rgba(13,20,132,.35), 0 0 0 1px var(--line);
  --i: 0;
  --a: clamp(0, calc((var(--p, 0) - .4 - var(--i) * .07) * 7), 1);
  --b: clamp(0, calc((var(--p, 0) - .88) * 8), 1);
  opacity: calc(var(--a) - var(--b)); transform: translateX(calc((1 - var(--a)) * 60px));
}
.spec-chip b { display: block; font-size: 1.5rem; letter-spacing: -.03em; font-weight: 640; }
.spec-chip span { font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.stage__brand { position: absolute; top: calc(var(--header-h) + 28px); left: var(--gutter); }

/* ---------- Stats band ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); }
.stat { padding: 34px 26px 6px 0; border-right: 1px solid var(--line); }
.stat + .stat { padding-left: 26px; }
.stat:last-child { border-right: 0; }
.stat__num { font-size: clamp(2.8rem, 6vw, 5.6rem); font-weight: 640; letter-spacing: -.05em; line-height: 1; font-variant-numeric: tabular-nums; }
.stat__num sup { font-size: .4em; vertical-align: top; position: relative; top: .25em; margin-left: 2px; color: var(--signal); }
.stat__label { margin-top: 12px; color: var(--muted); font-size: var(--fs-small); max-width: 22ch; }

/* ---------- Directions: horizontal pinned gallery ---------- */
.hscroll { position: relative; background: var(--pearl); }
.hscroll__sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: flex; flex-direction: column; justify-content: center; }
.hscroll__head { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: clamp(26px, 4vh, 48px); }
.hscroll__track { display: flex; gap: 20px; padding-inline: var(--gutter); width: max-content; will-change: transform; transform: translate3d(var(--tx, 0px), 0, 0); }
.hscroll__count { font-family: var(--mono); font-size: .8rem; letter-spacing: .1em; color: var(--muted); }
.hscroll__bar { height: 2px; width: 160px; background: var(--line); border-radius: 2px; overflow: hidden; margin-top: 10px; }
.hscroll__bar i { display: block; height: 100%; background: var(--brand); transform-origin: left; transform: scaleX(var(--p, 0)); }

.dir-card {
  position: relative; flex: 0 0 auto; width: clamp(290px, 31vw, 420px); height: min(62vh, 560px); min-height: 440px;
  border-radius: var(--radius); background: var(--paper); overflow: hidden;
  display: flex; flex-direction: column; padding: 28px;
  box-shadow: 0 0 0 1px var(--line), 0 30px 60px -40px rgba(13, 20, 132, .35);
  transition: transform .6s var(--ease-out), box-shadow .6s var(--ease-out);
  isolation: isolate;
}
.dir-card::after {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .5s;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(27, 38, 209, .09), transparent 60%);
}
.dir-card:hover { transform: translateY(-6px); box-shadow: 0 0 0 1px rgba(27,38,209,.25), 0 40px 80px -40px rgba(13, 20, 132, .5); }
.dir-card:hover::after { opacity: 1; }
.dir-card__top { display: flex; justify-content: space-between; align-items: start; }
.dir-card__idx { font-family: var(--mono); font-size: .8rem; color: var(--muted); letter-spacing: .08em; }
.dir-card__ico { width: 64px; height: 64px; color: var(--brand); }
.dir-card h3 { margin-top: auto; font-size: clamp(1.6rem, 2.2vw, 2.1rem); line-height: 1.04; letter-spacing: -.035em; font-weight: 620; }
.dir-card__cats { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 6px; }
.dir-card__cats span { font-size: .78rem; padding: 5px 10px; border-radius: 999px; background: var(--pearl); color: var(--muted); }
.dir-card__foot { display: flex; justify-content: space-between; align-items: center; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); font-size: .9rem; }
.dir-card__go { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: #fff; transition: transform .5s var(--ease-out), background-color .3s; }
.dir-card:hover .dir-card__go { background: var(--brand); transform: rotate(-45deg); }
.dir-card__go svg { width: 18px; height: 18px; }
.dir-card__shots { position: absolute; right: -6px; top: 104px; width: 64%; height: 36%; pointer-events: none; z-index: -1; }
.dir-card__shots img { position: absolute; width: 58%; object-fit: contain; filter: drop-shadow(0 18px 24px rgba(13,20,132,.18)); transition: transform .8s var(--ease-out); }
.dir-card__shots img:nth-child(1) { right: 6%; top: 0; transform: rotate(-12deg); }
.dir-card__shots img:nth-child(2) { right: 34%; top: 30%; transform: rotate(8deg); width: 50%; }
.dir-card__shots img:nth-child(3) { right: 0; top: 48%; transform: rotate(-4deg); width: 46%; }
.dir-card:hover .dir-card__shots img:nth-child(1) { transform: rotate(-6deg) scale(1.08); }
.dir-card:hover .dir-card__shots img:nth-child(2) { transform: rotate(2deg) scale(1.06) translateX(-8px); }
.dir-card:hover .dir-card__shots img:nth-child(3) { transform: rotate(-10deg) scale(1.05); }
.dir-card--end { background: var(--ink); color: #fff; justify-content: space-between; --line: var(--line-on-dark); --muted: var(--muted-on-dark); }

/* ---------- Manufacturing (sticky split) ---------- */
.made { position: relative; }
.made__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); }
.made__visual { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; place-items: center; }
.made__orb { position: relative; width: min(42vw, 560px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 40%, var(--ink-3), var(--ink) 70%);
  box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 0 120px rgba(27, 38, 209, .35) inset; }
.made__orb::before { content: ""; position: absolute; inset: -1px; border-radius: 50%; padding: 1px; background: conic-gradient(from calc(var(--p, 0) * 360deg), transparent 0 60%, var(--signal) 75%, transparent 90%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.made__orb img { width: 92%; transform: rotate(calc(-30deg + var(--p, 0) * 60deg)) scale(calc(.85 + var(--p, 0) * .3)); filter: drop-shadow(0 30px 40px rgba(0,0,0,.5)); transition: transform .1s linear; }
.made__ring { position: absolute; inset: 9%; border-radius: 50%; border: 1px dashed rgba(255,255,255,.12); animation: spin 60s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.made__steps { padding-block: 30vh; display: grid; gap: 34vh; }
.made__step { opacity: .25; transition: opacity .6s var(--ease-out), transform .8s var(--ease-out); transform: translateX(-10px); }
.made__step.is-active { opacity: 1; transform: none; }
.made__step .num { font-family: var(--mono); color: var(--signal); font-size: .85rem; letter-spacing: .12em; }
.made__step h3 { font-size: var(--fs-d3); letter-spacing: -.035em; line-height: 1.08; font-weight: 620; margin: 12px 0 14px; }
.made__step p { color: var(--muted); max-width: 42ch; }
.made__step .big { font-size: clamp(3.4rem, 7vw, 6rem); font-weight: 660; letter-spacing: -.05em; line-height: 1; }
.made__step .big small { font-size: .32em; color: var(--muted); letter-spacing: 0; font-weight: 500; margin-left: 6px; }

/* ---------- Partners marquee ---------- */
.marquee { --gap: clamp(36px, 6vw, 90px); overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marquee__row { display: flex; gap: var(--gap); width: max-content; animation: marquee 48s linear infinite; padding-block: 18px; }
.marquee__row--rev { animation-direction: reverse; animation-duration: 56s; }
.marquee:hover .marquee__row { animation-play-state: paused; }
/* With JS the row is moved by script: it runs on its own and can be dragged, swiped or stepped with the arrows. */
.marquee.is-js { cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.marquee.is-js.is-dragging { cursor: grabbing; }
.marquee.is-js .marquee__row { animation: none; will-change: transform; }
.marquee.is-js img { -webkit-user-drag: none; pointer-events: none; }
.marquee__controls { display: none; justify-content: center; gap: 12px; margin-top: 22px; }
.marquee.is-js + .marquee__controls { display: flex; }
.marquee__btn { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); transition: background-color .25s, color .25s, transform .3s var(--ease-out); }
.marquee__btn:hover { background: #fff; color: var(--ink); }
.marquee__btn:active { transform: scale(.94); }
.marquee__btn svg { width: 20px; height: 20px; }
.marquee__btn svg.flip { transform: rotate(180deg); }
@keyframes marquee { to { transform: translateX(calc(-50% - var(--gap) / 2)); } }
.logo-tile { flex: 0 0 auto; height: 64px; display: grid; place-items: center; opacity: .62; transition: opacity .4s, transform .5s var(--ease-out); }
.logo-tile img { height: 52px; width: auto; max-width: 190px; object-fit: contain; filter: brightness(0) invert(1); transition: filter .5s; }
.logo-tile:hover { opacity: 1; transform: scale(1.06); }
.logo-tile:hover img { filter: none; }

/* Light variant (catalog/company pages) */
.logo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.logo-card { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9; border-radius: var(--radius-sm); background: var(--paper); box-shadow: 0 0 0 1px var(--line); padding: 22px; transition: box-shadow .4s, transform .5s var(--ease-out); }
/* The logo is fitted into a fixed box inside the card, so no file (square, tall, wide) can change the card's size. */
.logo-card img { position: absolute; inset: 24% 13%; width: 74%; height: 52%; object-fit: contain; filter: grayscale(1); opacity: .75; transition: filter .4s, opacity .4s; }
.logo-card:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px rgba(27,38,209,.3), 0 24px 40px -28px rgba(13,20,132,.45); }
.logo-card:hover img { filter: none; opacity: 1; }
/* Cordis's file is the reversed logo (white word, silver C — made for dark backgrounds): shown as a
   grey silhouette like the other logos. */
.logo-card[data-slug="cordis"] img { filter: brightness(0); opacity: .62; }
.logo-card[data-slug="cordis"]:hover img { filter: brightness(0); opacity: .9; }

/* ---------- Timeline ---------- */
.timeline { position: relative; display: grid; gap: clamp(56px, 9vw, 120px); padding-left: clamp(30px, 6vw, 90px); }
.timeline__line { position: absolute; left: 6px; top: 8px; bottom: 8px; width: 2px; background: var(--line); }
.timeline__line i { position: absolute; inset: 0; background: linear-gradient(var(--brand), var(--signal)); transform-origin: top; transform: scaleY(var(--p, 0)); }
.tl-item { position: relative; display: grid; grid-template-columns: minmax(140px, 260px) 1fr; gap: clamp(20px, 4vw, 60px); align-items: start; }
.tl-item::before { content: ""; position: absolute; left: calc(clamp(30px, 6vw, 90px) * -1 + 1px); top: .7em; width: 12px; height: 12px; border-radius: 50%; background: var(--paper); box-shadow: 0 0 0 2px var(--brand); transition: background-color .4s, box-shadow .4s; }
.tl-item.is-in::before { background: var(--brand); box-shadow: 0 0 0 6px var(--brand-soft); }
.tl-item__year { font-size: clamp(3rem, 7vw, 6.2rem); line-height: .9; letter-spacing: -.06em; font-weight: 660; }
.tl-item h3 { font-size: var(--fs-d3); letter-spacing: -.03em; line-height: 1.1; font-weight: 620; margin-bottom: 12px; }
.tl-item p { color: var(--muted); max-width: 52ch; }
.tl-item ul { margin-top: 12px; padding-left: 0; list-style: none; display: grid; gap: 8px; color: var(--muted); }
.tl-item li { display: flex; gap: 10px; }
.tl-item li::before { content: ""; flex: 0 0 6px; height: 6px; margin-top: .65em; border-radius: 50%; background: var(--signal); }

/* ---------- News ---------- */
.news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.news-card { display: flex; flex-direction: column; border-radius: var(--radius); overflow: hidden; background: var(--paper); box-shadow: 0 0 0 1px var(--line); transition: transform .6s var(--ease-out), box-shadow .5s; height: 100%; }
.news-card:hover { transform: translateY(-6px); box-shadow: 0 0 0 1px rgba(27,38,209,.2), 0 30px 60px -36px rgba(13,20,132,.45); }
.news-card__img { aspect-ratio: 16 / 10; overflow: hidden; background: linear-gradient(135deg, var(--ink-3), var(--brand)); }
.news-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.news-card:hover .news-card__img img { transform: scale(1.06); }
.news-card__body { padding: 24px 24px 26px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.news-card__date { font-family: var(--mono); font-size: .75rem; letter-spacing: .1em; color: var(--muted); }
.news-card__title { font-size: 1.22rem; line-height: 1.25; letter-spacing: -.02em; font-weight: 600; }
.news-card__descr { color: var(--muted); font-size: var(--fs-small); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.news-card__more { margin-top: auto; padding-top: 8px; }

/* ---------- CTA ---------- */
.cta { position: relative; overflow: hidden; background: var(--ink); color: #fff; border-radius: clamp(28px, 4vw, 48px); padding: clamp(48px, 8vw, 120px) clamp(24px, 6vw, 96px); isolation: isolate; }
.cta::before { content: ""; position: absolute; inset: -40%; z-index: -1; background: conic-gradient(from 200deg at 70% 50%, var(--brand), transparent 30%, var(--signal) 45%, transparent 60%, var(--brand-deep) 80%, var(--brand)); filter: blur(80px); opacity: .55; animation: spin 30s linear infinite; }
.cta__grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: end; }
.cta__contacts { display: grid; gap: 14px; font-size: 1.08rem; }
.cta__contacts a { display: inline-flex; gap: 12px; align-items: center; }
.cta__contacts svg { width: 20px; height: 20px; opacity: .7; }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color: #fff; padding-block: clamp(64px, 8vw, 110px) 32px; --line: var(--line-on-dark); --muted: var(--muted-on-dark); }
.footer__top { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 40px; padding-bottom: 56px; border-bottom: 1px solid var(--line); }
.footer__top h4 { font-family: var(--mono); font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 500; margin-bottom: 16px; }
.footer__top ul { list-style: none; padding: 0; display: grid; gap: 10px; }
.footer__top a { color: rgba(255,255,255,.86); transition: color .2s; }
.footer__top a:hover { color: #fff; }
.footer__word { font-size: clamp(4rem, 17vw, 16rem); font-weight: 760; letter-spacing: -.075em; line-height: .8; margin-top: 56px; background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.02)); -webkit-background-clip: text; background-clip: text; color: transparent; user-select: none; }
.footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; padding-top: 26px; font-size: .86rem; color: var(--muted); }
.footer__bottom a:hover { color: #fff; }

/* Cookie bar */
.cookie {
  position: fixed; left: 50%; bottom: 18px; z-index: 120; width: min(720px, calc(100% - 32px));
  transform: translate(-50%, 140%); transition: transform .8s var(--ease-out);
  display: flex; gap: 18px; align-items: center; padding: 16px 16px 16px 22px; border-radius: 22px;
  background: rgba(6, 10, 34, .88); color: #fff; -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.5); font-size: .88rem; line-height: 1.45;
}
.cookie.is-shown { transform: translate(-50%, 0); }
.cookie a { text-decoration: underline; text-underline-offset: 3px; }
.cookie .btn { flex-shrink: 0; min-height: 44px; }

/* ---------- Page hero (inner pages) ---------- */
.page-hero { position: relative; padding-top: calc(var(--header-h) + clamp(48px, 8vw, 110px)); padding-bottom: clamp(48px, 7vw, 96px); overflow: hidden; }
.page-hero.dark::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(50% 60% at 85% 20%, rgba(27,38,209,.45), transparent 70%), radial-gradient(30% 40% at 10% 100%, rgba(255,107,31,.14), transparent 70%); }
.page-hero > .wrap { position: relative; z-index: 1; }
.page-hero h1 { font-size: var(--fs-d1); line-height: .98; letter-spacing: -.048em; font-weight: 640; max-width: 16ch; margin-top: 18px; }
.page-hero .lead { margin-top: 22px; }
.crumbs { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font-size: .86rem; color: var(--muted); list-style: none; padding: 0; margin: 0; }
.crumbs a { display: inline-block; padding: 4px 0; transition: color .2s; }
.crumbs a:hover { color: var(--brand); }
.dark .crumbs a:hover { color: #fff; }
.crumbs li + li::before { content: "/"; margin-right: 10px; opacity: .45; }

/* ---------- Catalog cards ---------- */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 20px; }
.card-grid--3 { grid-template-columns: repeat(3, 1fr); }
.cat-card {
  position: relative; display: flex; flex-direction: column; min-height: 360px; padding: 26px;
  border-radius: var(--radius); background: var(--paper); overflow: hidden; isolation: isolate;
  box-shadow: 0 0 0 1px var(--line);
  transition: transform .6s var(--ease-out), box-shadow .5s;
}
.cat-card::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .5s; background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), rgba(27, 38, 209, .08), transparent 60%); }
.cat-card:hover { transform: translateY(-6px); box-shadow: 0 0 0 1px rgba(27,38,209,.22), 0 34px 60px -36px rgba(13,20,132,.45); }
.cat-card:hover::after { opacity: 1; }
.cat-card__media { flex: 1; display: grid; place-items: center; min-height: 190px; margin: 6px -6px 18px; }
.cat-card__media img { max-height: 200px; width: auto; max-width: 100%; object-fit: contain; filter: drop-shadow(0 22px 26px rgba(13,20,132,.16)); transition: transform 1s var(--ease-out); }
.cat-card:hover .cat-card__media img { transform: scale(1.07) rotate(-2deg); }
.cat-card__media .ico { width: 92px; height: 92px; color: var(--brand); }
.cat-card__kicker { font-family: var(--mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.cat-card h2, .cat-card h3 { font-size: 1.4rem; line-height: 1.15; letter-spacing: -.025em; font-weight: 600; margin-top: 6px; }
.cat-card__foot { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; font-size: .88rem; color: var(--muted); }
.cat-card__arrow { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1px var(--line); transition: background-color .3s, color .3s, transform .5s var(--ease-out); }
.cat-card__arrow svg { width: 16px; height: 16px; }
.cat-card:hover .cat-card__arrow { background: var(--brand); color: #fff; box-shadow: none; transform: rotate(-45deg); }
.cat-card--logo .cat-card__media img { max-height: 70px; filter: none; }
.cat-card--logo[data-slug="cordis"] .cat-card__media { background: var(--ink); border-radius: var(--radius-sm); }

/* Product detail */
.pd-hero { position: relative; min-height: 100vh; min-height: 100svh; padding-top: calc(var(--header-h) + 36px); background: radial-gradient(70% 60% at 70% 45%, #eef0fd, var(--paper) 70%); overflow: hidden; }
.pd-hero__grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 40px; align-items: center; min-height: calc(100svh - var(--header-h) - 80px); }
.pd-hero h1 { font-size: clamp(2.8rem, 7vw, 6.6rem); line-height: .92; letter-spacing: -.055em; font-weight: 660; margin: 16px 0 18px; }
.pd-hero__company { display: inline-flex; align-items: center; gap: 12px; }
.pd-hero__company img { height: 30px; width: auto; }
.pd-hero__cat { font-size: var(--fs-lead); color: var(--muted); }
.pd-hero__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.pd-hero__media { position: relative; display: grid; place-items: center; aspect-ratio: 1; }
.pd-hero__media::before { content: ""; position: absolute; inset: 10%; border-radius: 50%; background: radial-gradient(circle, rgba(27,38,209,.14), transparent 66%); }
.pd-hero__media img { position: relative; width: 90%; max-height: 72vh; object-fit: contain; filter: drop-shadow(0 50px 60px rgba(13,20,132,.25));
  transform: scale(calc(1 + var(--p, 0) * .35)) translateY(calc(var(--p, 0) * 10%)) rotate(calc(var(--p, 0) * 8deg)); }
.pd-hero__rc { margin-top: 26px; display: inline-flex; gap: 10px; align-items: center; font-family: var(--mono); font-size: .76rem; letter-spacing: .06em; padding: 10px 14px; border-radius: 12px; background: var(--pearl); color: var(--muted); }
.pd-hero__rc svg { width: 16px; height: 16px; color: var(--brand); }

.subnav { position: sticky; top: var(--header-h); z-index: 50; background: rgba(255,255,255,.85); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); border-block: 1px solid var(--line); transition: top .6s var(--ease-out); }
.header-hidden .subnav { top: 0; }
.subnav .wrap { display: flex; align-items: center; gap: 6px; min-height: 58px; overflow-x: auto; scrollbar-width: none; }
.subnav .wrap::-webkit-scrollbar { display: none; }
.subnav__title { font-weight: 640; letter-spacing: -.02em; margin-right: auto; white-space: nowrap; padding-right: 16px; }
.subnav a { white-space: nowrap; min-height: 40px; display: inline-flex; align-items: center; padding: 0 14px; border-radius: 999px; font-size: .9rem; color: var(--muted); transition: color .2s, background-color .3s; }
.subnav a:hover { color: var(--text); }
.subnav a.is-active { color: #fff; background: var(--ink); }

.pd-section { padding-block: clamp(64px, 9vw, 120px); border-bottom: 1px solid var(--line); scroll-margin-top: calc(var(--header-h) + 60px); }
.pd-section__grid { display: grid; grid-template-columns: minmax(200px, 300px) 1fr; gap: clamp(28px, 5vw, 80px); }
.pd-section h2 { font-size: var(--fs-d3); letter-spacing: -.035em; line-height: 1.05; font-weight: 620; position: sticky; top: calc(var(--header-h) + 90px); align-self: start; }

/* Rich text from the CMS (TinyMCE) */
.rich { font-size: 1.06rem; line-height: 1.7; color: var(--text); overflow-wrap: anywhere; }
.rich > * + * { margin-top: 1em; }
.rich h2, .rich h3, .rich h4 { font-size: 1.3rem; letter-spacing: -.02em; line-height: 1.25; margin-top: 1.6em; }
.rich strong, .rich b { font-weight: 640; }
.rich a { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }
.rich ul, .rich ol { padding-left: 1.2em; }
.rich li + li { margin-top: .35em; }
.rich li::marker { color: var(--signal); }
.rich img { border-radius: var(--radius-sm); margin-block: 1em; height: auto !important; }
.rich img.is-sizing { width: 100%; aspect-ratio: 3 / 2; background: var(--pearl); }
.rich span, .rich p, .rich div, .rich td { font-family: inherit !important; font-size: inherit !important; color: inherit; background: transparent !important; }
.rich .table-wrap, .rich-table { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius-sm); box-shadow: 0 0 0 1px var(--line); }
.rich table { width: 100% !important; border-collapse: collapse; font-size: .95rem; min-width: 520px; }
.rich th, .rich td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; width: auto !important; height: auto !important; }
.rich tr:first-child td, .rich th { font-weight: 600; background: var(--pearl) !important; }
.rich tr:last-child td { border-bottom: 0; }

.resource-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 16px; }
.resource { display: grid; grid-template-columns: 92px 1fr auto; gap: 18px; align-items: center; padding: 16px; border-radius: var(--radius-sm); box-shadow: 0 0 0 1px var(--line); transition: box-shadow .4s, transform .5s var(--ease-out); }
.resource:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px rgba(27,38,209,.3), 0 20px 40px -28px rgba(13,20,132,.4); }
.resource__cover { width: 92px; aspect-ratio: 3 / 4; border-radius: 10px; overflow: hidden; background: var(--pearl); display: grid; place-items: center; }
.resource__cover img { width: 100%; height: 100%; object-fit: cover; }
.resource__cover svg { width: 32px; height: 32px; color: var(--brand); }
.resource__name { font-weight: 560; line-height: 1.3; }
.resource__qr { width: 72px; height: 72px; border-radius: 8px; background: #fff; padding: 4px; box-shadow: 0 0 0 1px var(--line); }
.notice { display: flex; gap: 14px; padding: 18px 20px; border-radius: var(--radius-sm); background: var(--signal-soft); color: #7a3208; font-size: .95rem; }
.notice svg { width: 22px; height: 22px; flex-shrink: 0; margin-top: 2px; }

.related { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, 1fr); gap: 16px; overflow-x: auto; padding-bottom: 12px; scroll-snap-type: x mandatory; }
.related > * { scroll-snap-align: start; }

/* ---------- Contacts ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(28px, 5vw, 80px); align-items: start; }
.contact-list { display: grid; gap: 4px; margin-top: 36px; }
.contact-row { display: grid; grid-template-columns: 44px 1fr; gap: 16px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--line); }
.contact-row__ico { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); }
.contact-row__ico svg { width: 20px; height: 20px; }
.contact-row small { display: block; font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.contact-row a, .contact-row span { font-size: 1.12rem; font-weight: 520; letter-spacing: -.01em; }
.form-card { padding: clamp(24px, 4vw, 44px); border-radius: var(--radius); background: var(--paper); box-shadow: 0 0 0 1px var(--line), 0 40px 80px -50px rgba(13,20,132,.45); }
.field { position: relative; margin-bottom: 14px; }
.field label { display: block; font-size: .85rem; font-weight: 520; margin-bottom: 6px; }
.field input, .field textarea { width: 100%; min-height: 54px; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line); background: var(--pearl); font: inherit; color: var(--text); transition: border-color .2s, background-color .2s, box-shadow .2s; }
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--brand); background: #fff; box-shadow: 0 0 0 4px rgba(27,38,209,.12); }
.field--row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.check { display: flex; gap: 12px; align-items: flex-start; font-size: .88rem; color: var(--muted); margin: 10px 0; cursor: pointer; }
.check input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--brand); flex-shrink: 0; }
.check a { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }
.err { display: block; color: #c0262d; font-size: .82rem; margin-top: 4px; min-height: 0; }
.form-success { display: none; text-align: center; padding: 40px 10px; }
.form-success svg { width: 64px; height: 64px; margin: 0 auto 18px; color: var(--brand); }
/* Location card (contacts) */
.loc { position: relative; margin-top: clamp(40px, 6vw, 80px); height: clamp(460px, 44vw, 560px); border-radius: var(--radius); overflow: hidden; isolation: isolate;
  background: radial-gradient(120% 90% at 50% 50%, var(--ink-3), var(--ink) 70%); color: #fff; }
.loc__art { position: absolute; inset: 0; width: 100%; height: 100%; color: #c9cdf9; }
.loc__road { stroke-width: 7; stroke-opacity: .16; }
.loc__road--main { stroke-width: 12; stroke-opacity: .24; }
.loc__road--thin { stroke-width: 3; stroke-opacity: .12; }
.loc__rail { color: #ffb38a; stroke-opacity: .55; }
.loc__road--main { stroke-dasharray: 1400; stroke-dashoffset: 1400; transition: stroke-dashoffset 2.4s var(--ease-out) .2s; }
.loc.is-in .loc__road--main { stroke-dashoffset: 0; }
.loc__pin { position: absolute; left: 50%; top: 49.6%; width: 0; height: 0; }
.loc__pin span { position: absolute; left: -26px; top: -26px; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--signal); color: #fff; box-shadow: 0 0 0 6px rgba(255, 107, 31, .25), 0 20px 40px rgba(0,0,0,.4); }
.loc__pin span svg { width: 24px; height: 24px; }
.loc__pin i { position: absolute; left: -26px; top: -26px; width: 52px; height: 52px; border-radius: 50%; border: 1.5px solid rgba(255, 107, 31, .7); animation: loc-pulse 3s var(--ease-out) infinite; }
.loc__pin i:nth-child(2) { animation-delay: 1s; } .loc__pin i:nth-child(3) { animation-delay: 2s; }
@keyframes loc-pulse { from { transform: scale(1); opacity: .9; } to { transform: scale(5); opacity: 0; } }
.loc__card { position: absolute; left: clamp(16px, 3vw, 36px); bottom: clamp(16px, 3vw, 36px); z-index: 2; width: min(500px, calc(100% - 32px)); padding: clamp(22px, 2.6vw, 30px);
  border-radius: var(--radius-sm); background: rgba(6, 10, 34, .62); -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
.loc__addr { margin-top: 12px; font-size: clamp(1.25rem, 2vw, 1.6rem); line-height: 1.2; letter-spacing: -.025em; font-weight: 600; }
.loc__meta { margin-top: 8px; color: var(--muted-on-dark); font-size: .92rem; }
.loc__coords { font-family: var(--mono); font-size: .82rem; }
.loc__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.loc__actions .btn { min-height: 44px; padding: 0 18px; font-size: .92rem; }
.loc__actions .btn--ghost { box-shadow: inset 0 0 0 1px rgba(255,255,255,.28); }
.loc__live { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; min-height: 44px; font-size: .9rem; color: var(--muted-on-dark); text-decoration: underline; text-underline-offset: 4px; transition: color .2s; }
.loc__live:hover { color: #fff; }
.loc__live svg { width: 18px; height: 18px; }
.loc > iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 3; background: var(--pearl); opacity: 0; transition: opacity .6s; }
.loc > iframe { pointer-events: none; }
.loc.is-live:not(.is-loading) > iframe { opacity: 1; pointer-events: auto; }
.loc.is-loading::after { content: ""; position: absolute; right: 26px; top: 26px; z-index: 4; width: 28px; height: 28px; border-radius: 50%; border: 2px solid rgba(255,255,255,.25); border-top-color: #fff; animation: spin .9s linear infinite; }
.loc.is-failed::after { display: none; }
.loc.is-failed .loc__live { display: none; }
.loc__close { position: absolute; right: 16px; top: 16px; z-index: 5; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: #fff; font-size: 1.6rem; line-height: 1; box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.loc__close[hidden] { display: none; }
.loc__fail { display: none; margin-top: 14px; font-size: .88rem; color: #ffb38a; }
.loc.is-failed .loc__fail { display: block; }
@media (max-width: 640px) {
  .loc { height: auto; min-height: 640px; display: flex; flex-direction: column; justify-content: flex-end; }
  .loc__pin { top: 120px; }
  .loc__card { position: relative; left: auto; bottom: auto; margin: 16px; width: auto; }
}

/* About: values / cards */
.value-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.value { padding: 30px; border-radius: var(--radius); background: var(--paper); box-shadow: 0 0 0 1px var(--line); }
.value .ico { width: 44px; height: 44px; color: var(--brand); margin-bottom: 26px; }
.value h3 { font-size: 1.3rem; letter-spacing: -.02em; margin-bottom: 10px; font-weight: 600; }
.value p { color: var(--muted); font-size: var(--fs-small); }
.clinic-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1px; background: var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: 0 0 0 1px var(--line); }
.clinic-facts > div { background: var(--ink); padding: 28px 24px; }
.clinic-facts b { display: block; font-size: clamp(2rem, 3.6vw, 3.2rem); letter-spacing: -.04em; line-height: 1; font-weight: 640; }
.clinic-facts span { display: block; margin-top: 10px; color: var(--muted-on-dark); font-size: .92rem; }

/* Pagination / load more */
.load-more { display: flex; justify-content: center; margin-top: 48px; }
.empty { padding: 60px 0; text-align: center; color: var(--muted); }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .nav { display: none; }
  .burger { display: grid; }
  .header-tools { margin-left: auto; }
  .header-cta { display: none; }
  .mega__grid { grid-template-columns: repeat(2, 1fr); }
  .footer__top { grid-template-columns: 1fr 1fr; }
  .stage__specs { display: none; }
  .card-grid--3, .value-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .stats { grid-template-columns: 1fr 1fr; }
  .stat { border-right: 0; padding-left: 0 !important; border-bottom: 1px solid var(--line); padding-bottom: 26px; }
  .news-grid { grid-template-columns: 1fr; }
  .made__grid { grid-template-columns: 1fr; }
  /* Narrow screens: the orb sits above the steps instead of under them (text never crosses it). */
  .made__visual { position: relative; top: auto; height: auto; padding-block: 8px 0; }
  .made__orb { width: min(62vw, 320px); }
  .made__steps { padding-block: 32px 8vh; gap: 48px; }
  .made__step { opacity: 1; transform: none; }
  .cta__grid, .contact-grid, .pd-hero__grid, .pd-section__grid { grid-template-columns: 1fr; }
  .pd-hero__media { order: -1; max-width: 520px; margin-inline: auto; width: 100%; }
  .pd-section h2 { position: static; }
  .tl-item { grid-template-columns: 1fr; gap: 10px; }
  .hscroll__head { flex-direction: column; align-items: start; }
}
@media (max-width: 640px) {
  :root { --header-h: 60px; --radius: 22px; }
  .brand__word small { display: none; }
  .card-grid--3, .value-grid { grid-template-columns: 1fr; }
  .footer__top { grid-template-columns: 1fr; }
  .field--row { grid-template-columns: 1fr; }
  .stage__img { width: 86vw; }
  .stage__copy { right: var(--gutter); }
  .hero__meta .hide-sm { display: none; }
  .cookie { flex-direction: column; align-items: stretch; }
  .resource { grid-template-columns: 72px 1fr; }
  .resource__qr { display: none; }
  .resource__cover { width: 72px; }
  .stats { grid-template-columns: 1fr; }
}

/* Touch devices: the horizontal gallery becomes a native swipe carousel. */
@media (hover: none), (max-width: 860px) {
  .hscroll { height: auto !important; }
  .hscroll__sticky { position: static; height: auto; padding-block: clamp(80px, 12vw, 140px); }
  .hscroll__track { transform: none !important; overflow-x: auto; width: auto; scroll-snap-type: x mandatory; padding-bottom: 16px; scrollbar-width: none; }
  .hscroll__track::-webkit-scrollbar { display: none; }
  .dir-card { scroll-snap-align: center; width: min(84vw, 380px); min-height: 420px; height: 470px; }
}

/* Portrait phones and tablets: product stage stacks — picture in the free space on top,
   copy underneath. Absolute copy over a centred picture overlapped on every phone size. */
@media (max-width: 860px) and (orientation: portrait) {
  .stage__sticky { display: flex; flex-direction: column; align-items: stretch;
    padding: calc(var(--header-h) + 12px) var(--gutter) clamp(20px, 5svh, 48px); }
  .stage__brand { display: none; }
  .stage__img { flex: 1 1 0; min-height: 0; width: 100%; aspect-ratio: auto; margin-inline: auto;
    --z: calc(.62 + var(--p, 0) * .36); }
  .stage__copy { position: relative; left: auto; right: auto; bottom: auto; max-width: none; flex: none; }
  .stage__copy .h2 { margin: 8px 0; }
  .stage__copy .rich, .stage__copy .rich > :first-child { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
  .stage__copy .rich > :not(:first-child) { display: none; }
  .stage__copy .btn { margin-top: 16px; }
}
@media (max-width: 860px) and (orientation: portrait) and (max-height: 700px) {
  .stage__copy .rich, .stage__copy .rich > :first-child { -webkit-line-clamp: 2; }
}

/* ---------- Reduced motion: final state, no scrubbing ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  [data-reveal], .split-line > span { opacity: 1 !important; transform: none !important; }
  .hero { height: auto; }
  .hero__sticky { position: relative; height: 100svh; }
  .hero__chapter--2, .hero__chapter--3, .hero__whiteout { display: none; }
  .hero__copy { opacity: 1; transform: none; filter: none; }
  .statement, .stage { height: auto; }
  .statement__sticky, .stage__sticky { position: relative; min-height: 0; padding-block: 120px; height: auto; }
  .statement__text .w { opacity: 1; }
  .stage__img { --z: 1; transform: none; }
  .stage__copy, .spec-chip { opacity: 1; transform: none; position: relative; left: auto; bottom: auto; }
  .stage__sticky { display: flex; flex-direction: column; gap: 30px; }
  .stage__specs { position: relative; transform: none; right: auto; top: auto; }
  .made__step { opacity: 1; transform: none; }
  .marquee__row { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
}

/* small icon sizing inside text rows */
.drawer summary svg { width: 18px; height: 18px; opacity: .6; transition: transform .3s; }
.drawer details[open] > summary svg { transform: rotate(180deg); }
.mega__col h3 .ico, .link-arrow svg, .btn svg { flex-shrink: 0; }

/* News gallery: swipeable, snap */
.news-gallery { display: grid; grid-auto-flow: column; grid-auto-columns: min(100%, 980px); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 14px; }
.news-gallery figure { scroll-snap-align: center; border-radius: var(--radius); overflow: hidden; aspect-ratio: 16 / 9; background: var(--pearl); }
.news-gallery img { width: 100%; height: 100%; object-fit: cover; }
.news-gallery:has(figure:only-child) { grid-auto-columns: 100%; }
.dot-list { list-style: none; padding: 0; display: grid; gap: 14px; color: var(--muted); max-width: 52ch; }
.dot-list li { display: flex; gap: 12px; }
.dot-list li::before { content: ""; flex: 0 0 7px; height: 7px; margin-top: .62em; border-radius: 50%; background: var(--signal); }

/* Before JS runs, a dark-topped page gets a light header so it never flashes dark-on-dark. */
body[data-top="dark"] .site-header:not([data-js]) { color: #fff; }
body[data-top="dark"] .site-header:not([data-js])::before { background: rgba(6, 10, 34, .55); }

@media (max-width: 640px) {
  .crumbs { flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); padding-right: 24px; }
  .crumbs::-webkit-scrollbar { display: none; }
}
.dir-card h3, .dir-card__cats, .dir-card__foot { position: relative; z-index: 1; }
@media (hover: none), (max-width: 860px) {
  .dir-card__shots { top: 84px; height: 27%; width: 58%; }
}

/* Legal documents and error pages */
.legal { font-size: 1rem; line-height: 1.75; }
.legal p:first-child[style], .legal > p:first-child:only-of-type { text-align: left; }
.legal ol, .legal ul { padding-left: 1.4em; }
.legal li { margin-top: .5em; }
.err-page { min-height: 78vh; display: flex; align-items: center; }
.err-page .eyebrow { font-size: 1rem; }
.err-page h1 { font-size: var(--fs-d1); }
.legal-title { margin-top: 22px; font-size: clamp(1.9rem, 3.4vw, 3rem); line-height: 1.08; letter-spacing: -.035em; font-weight: 640; }

/* Catalog index: grid cards with an image band above the title */
.dir-card--grid { width: auto; height: auto; min-height: 0; }
.dir-card--grid .dir-card__shots { position: relative; top: auto; right: auto; width: 100%; height: 200px; margin: 8px 0 20px; z-index: 0; }
.dir-card--grid .dir-card__shots img:nth-child(1) { right: 8%; top: 4%; width: 52%; }
.dir-card--grid .dir-card__shots img:nth-child(2) { right: 44%; top: 26%; width: 44%; }
.dir-card--grid .dir-card__shots img:nth-child(3) { right: 0; top: 50%; width: 40%; }
.dir-card--grid .dir-card__bigico { width: 120px; height: 120px; margin: 30px auto 0; color: var(--brand); opacity: .18; }
.dir-card--grid h2 { margin-top: 0; }
@media (hover: none), (max-width: 860px) { .dir-card--grid { width: auto; height: auto; } .dir-card--grid .dir-card__shots { top: auto; height: 180px; width: 100%; } }
.dir-card--grid .dir-card__cats { margin-bottom: 22px; }
.dir-card--grid .dir-card__foot { margin-top: auto; }

/* Dark page heroes: giant faint brand mark on the right so the space isn't empty. */
.page-hero.dark::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  right: max(-4vw, -60px); top: 50%; width: min(46vw, 620px); aspect-ratio: 1;
  transform: translateY(-46%);
  background: linear-gradient(160deg, rgba(201,205,249,.10), rgba(255,107,31,.05));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M19.36,18.97l-1.63-8.87-5.64,13.02c-.15.38-.52.65-.95.65l-5.85.09c1.04,4.07,3.47,7.07,6.85,7.8,5.48,1.19,11.51-4.01,14-11.8l-5.73-.05c-.5.02-.95-.34-1.05-.84Z'/%3E%3Cpath d='M19.86.33c-.49-.11-.98-.16-1.480-.17h-.23c-5.34.09-10.81,5.73-12.73,13.54-.47,1.91-.69,3.79-.69,5.57,0,.87.06,1.72.17,2.54l5.55-.09,6.74-15.54c.23-.52.83-.76,1.35-.54.33.14.54.43.6.76h0s2.09,11.36,2.09,11.36l5.46.04c1.91-8.470-1.090-16.24-6.83-17.48Z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M19.36,18.97l-1.63-8.87-5.64,13.02c-.15.38-.52.65-.95.65l-5.850.09c1.04,4.07,3.47,7.07,6.85,7.8,5.48,1.19,11.51-4.01,14-11.8l-5.73-.05c-.5.02-.95-.34-1.05-.84Z'/%3E%3Cpath d='M19.86.33c-.49-.11-.98-.16-1.48-.17h-.23c-5.34.09-10.81,5.73-12.73,13.54-.47,1.91-.69,3.79-.69,5.57,0,.87.06,1.72.17,2.54l5.55-.09,6.74-15.54c.23-.52.83-.76,1.35-.54.33.14.54.43.6.76h0s2.09,11.36,2.09,11.36l5.46.04c1.91-8.47-1.09-16.24-6.83-17.48Z'/%3E%3C/svg%3E") center / contain no-repeat;
  animation: hero-mark 14s ease-in-out infinite alternate;
}
@keyframes hero-mark { from { transform: translateY(-46%) rotate(-4deg); } to { transform: translateY(-52%) rotate(3deg); } }
@media (max-width: 860px) { .page-hero.dark::before { width: 70vw; right: -18vw; opacity: .7; } }
.logo-tile__name { font-size: 1.6rem; font-weight: 700; letter-spacing: -.03em; color: #fff; white-space: nowrap; }

/* Logos never move on hover — only the card lifts. */
.cat-card--logo:hover .cat-card__media img, .logo-card:hover img { transform: none; }
.cat-card--logo .cat-card__media img { transition: none; }
.logo-tile:hover { transform: none; }
/* Product photos: gentle zoom, no tilt. */
.cat-card:hover .cat-card__media img { transform: scale(1.05); }
.dir-card__bigico { width: 110px; height: 110px; color: var(--brand); opacity: .16; position: absolute; right: 18%; top: 18%; }


/* ---------- Directions: drag carousel (replaces the pinned scroll) ---------- */
.dgal { background: var(--pearl); overflow: hidden; }
.dgal__head { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: clamp(28px, 4vw, 48px); }
.dgal__controls { display: flex; align-items: center; gap: 10px; }
.dgal__hint { font-family: var(--mono); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-right: 8px; }
.dgal__btn { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--paper); box-shadow: 0 0 0 1px var(--line); transition: background-color .25s, color .25s, opacity .25s, transform .3s var(--ease-out); }
.dgal__btn:hover { background: var(--ink); color: #fff; }
.dgal__btn:active { transform: scale(.94); }
.dgal__btn:disabled { opacity: .35; pointer-events: none; }
.dgal__btn svg { width: 20px; height: 20px; }
.dgal__btn svg.flip { transform: rotate(180deg); }
.dgal__viewport { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; cursor: grab; outline: none; padding: 10px 0 30px; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
.dgal__viewport::-webkit-scrollbar { display: none; }
.dgal__viewport.is-dragging { cursor: grabbing; }
.dgal__viewport.is-dragging .dcard { pointer-events: none; }
.dgal__viewport:focus-visible { box-shadow: inset 0 0 0 2px var(--signal); }
.dgal__track { display: flex; gap: clamp(14px, 1.6vw, 22px); width: max-content;
  padding-inline: max(var(--gutter), calc((100vw - var(--maxw)) / 2)); }
.dgal__bar { height: 2px; background: var(--line); border-radius: 2px; overflow: hidden; max-width: 320px; }
.dgal__bar i { display: block; height: 100%; width: 100%; background: var(--brand); transform-origin: left; transform: scaleX(var(--p, .1)); transition: transform .15s linear; }

.dcard { flex: 0 0 auto; width: clamp(264px, 26vw, 380px); display: flex; flex-direction: column; border-radius: var(--radius); background: var(--paper); overflow: hidden;
  box-shadow: 0 0 0 1px var(--line), 0 24px 50px -40px rgba(13, 20, 132, .4); transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
  user-select: none; -webkit-user-select: none; -webkit-user-drag: none; }
.dcard:hover { transform: translateY(-6px); box-shadow: 0 0 0 1px rgba(27,38,209,.25), 0 34px 60px -36px rgba(13,20,132,.5); }
.dcard__stage { position: relative; height: clamp(180px, 15vw, 230px); display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(80% 90% at 50% 60%, #ffffff, #eef0fb 75%); }
.dcard__stage img { position: relative; z-index: 1; max-width: 78%; max-height: 82%; object-fit: contain; filter: drop-shadow(0 18px 22px rgba(13,20,132,.2)); transition: transform .8s var(--ease-out); pointer-events: none; }
.dcard:hover .dcard__stage img { transform: scale(1.06); }
.dcard__watermark { position: absolute; right: -18px; bottom: -22px; width: 140px; height: 140px; color: var(--brand); opacity: .07; }
.dcard__ico-big { width: 96px; height: 96px; color: var(--brand); opacity: .5; }
.dcard__idx { position: absolute; left: 18px; top: 16px; font-family: var(--mono); font-size: .76rem; color: var(--muted); letter-spacing: .08em; }
.dcard__body { display: flex; flex-direction: column; flex: 1; padding: 22px 22px 20px; }
.dcard h3 { font-size: clamp(1.25rem, 1.6vw, 1.55rem); line-height: 1.12; letter-spacing: -.03em; font-weight: 620; min-height: 2.24em; }
.dcard__cats { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 6px; min-height: 30px; }
.dcard__cats span { font-size: .78rem; padding: 5px 10px; border-radius: 999px; background: var(--pearl); color: var(--muted); white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.dcard__foot { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: 18px; border-top: 1px solid var(--line); font-size: .9rem; color: var(--muted); }
.dcard__cats { margin-bottom: 20px; }
.dcard__go { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: #fff; transition: background-color .3s, transform .5s var(--ease-out); flex-shrink: 0; }
.dcard__go svg { width: 18px; height: 18px; }
.dcard:hover .dcard__go { background: var(--brand); transform: rotate(-45deg); }
.dcard--end { background: var(--ink); color: #fff; padding: 26px 24px 20px; justify-content: space-between; --line: var(--line-on-dark); }
.dcard--end h3 { margin-top: 18px; font-size: clamp(1.5rem, 2vw, 1.9rem); }
.dcard--end .dcard__foot { color: #c9cdf9; }
.dcard--end .dcard__go { background: #fff; color: var(--ink); }
@media (max-width: 640px) {
  .dgal__head { flex-direction: column; align-items: start; }
  .dgal__hint { display: none; }
  .dcard { width: min(78vw, 320px); scroll-snap-align: start; scroll-margin-left: var(--gutter); }
  .dgal__viewport { scroll-snap-type: x mandatory; }
}
@media (hover: none) { .dgal__hint { display: none; } .dgal__viewport { cursor: auto; } }

/* ---------- Responsive fixes ---------- */
/* Readable logo subline and finger-sized text links everywhere. */
.brand__word small { font-size: 11px; letter-spacing: .16em; }
.link-arrow { min-height: 44px; }
.cta__contacts a, .cta__contacts > span { min-height: 44px; }

/* 320 px phones (iPhone SE 1st gen) and Fold cover screens: tighter header. */
@media (max-width: 359px) {
  :root { --gutter: 14px; }
  .site-header .wrap { gap: 10px; }
  .brand { gap: 8px; }
  .brand__mark { width: 28px; height: 28px; }
  .brand__word { font-size: 1.05rem; }
  .lang a { min-width: 36px; }
  .burger { width: 44px; }
}

/* Phones in landscape and other short screens: the hero must show its buttons. */
@media (max-height: 560px) and (orientation: landscape) {
  :root { --fs-hero: clamp(2rem, 10.5vh, 3.4rem); }
  .hero__copy { padding-top: calc(var(--header-h) - 8px); }
  .hero__title { max-width: none; }
  .hero__title .split-line { display: inline-block; margin-right: .22em; }
  .hero__sub { margin-top: 12px; font-size: 1rem; max-width: 60ch; }
  .hero__actions { margin-top: 16px; }
  .hero__meta { display: none; }
  .stage__img { width: min(46vw, 70vh); }
  .stage__copy { max-width: 46vw; bottom: 16px; }
  .stage__brand { display: none; }
  .made__visual { height: 100vh; }
  .made__orb { width: min(36vw, 70vh); }
}
/* Finger-sized: logo, footer legal links, contact rows, product brand link. */
.brand { min-height: 44px; }
.footer__bottom a { display: inline-flex; align-items: center; min-height: 44px; }
.contact-row a { display: inline-flex; align-items: center; min-height: 44px; }
.pd-hero__company { display: inline-flex; align-items: center; min-height: 44px; }
.check input { width: 22px; height: 22px; }
/* Buttons never clip their label; on narrow phones they go full width. */
.btn { white-space: nowrap; max-width: 100%; flex-shrink: 0; }
@media (max-width: 480px) {
  .pd-hero__actions .btn, .hero__actions .btn { flex: 1 1 100%; }
  .btn { white-space: normal; text-align: center; padding-block: 10px; }
}
/* Phone landscape: product photo beside the title instead of above it. */
@media (max-height: 560px) and (orientation: landscape) {
  .pd-hero__grid { grid-template-columns: 1fr 1fr; min-height: 0; }
  .pd-hero__media { order: 0; max-width: none; }
  .pd-hero__media img { max-height: 70vh; }
  .pd-hero h1 { font-size: clamp(2rem, 9vh, 3rem); }
}
/* Large monitors: grow the layout and type with the screen instead of floating a small column. */
@media (min-width: 1920px) { :root { --maxw: 1560px; --header-h: 76px; } html { font-size: 17px; } }
@media (min-width: 2560px) { :root { --maxw: 1960px; --header-h: 88px; } html { font-size: 20px; } }
@media (min-width: 3400px) { :root { --maxw: 2560px; --header-h: 104px; } html { font-size: 25px; } }
/* Always let the next card peek in so it's obvious the row can be dragged. */
@media (min-width: 641px) and (max-width: 1100px) { .dcard { width: 38vw; } }
@media (min-width: 1101px) and (max-width: 1700px) { .dcard { width: 27.5vw; max-width: 400px; } }
/* Catalog index uses the same clean card as the home carousel. */
.dcard.dcard--grid { width: auto; max-width: none; }
.dcard--grid .dcard__stage { height: clamp(200px, 16vw, 300px); }
.dcard__title { font-size: clamp(1.3rem, 1.7vw, 1.7rem); line-height: 1.12; letter-spacing: -.03em; font-weight: 620; min-height: 2.24em; }

/* ---------- Direction cards v3: whole product always visible ---------- */
.dcard__stage { height: clamp(220px, 17vw, 290px); background: radial-gradient(60% 70% at 50% 55%, #ffffff 0%, #f1f3fd 55%, #e8ebfa 100%); perspective: 900px; }
.dcard--grid .dcard__stage { height: clamp(230px, 17vw, 320px); }
.dcard__stage::before { content: ""; position: absolute; left: 50%; top: 54%; width: 62%; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(27,38,209,.10), transparent 68%); }
/* The photo box: fixed inset, the image is contained inside it — never cropped. */
.dcard__photo { position: absolute; inset: 40px 30px 22px; display: block; z-index: 1;
  transform: rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg)) translateZ(0); transition: transform .6s var(--ease-out); transform-style: preserve-3d; }
.dcard__photo img, .dcard__stage .dcard__photo img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; object-fit: contain;
  filter: drop-shadow(0 16px 18px rgba(13,20,132,.18)); transition: transform .8s var(--ease-out); }
.dcard:hover .dcard__photo img { transform: scale(1.05); }
.dcard__stage > img { display: none; }
.dcard__watermark { display: none; }
.dcard__badge { position: absolute; right: 14px; top: 12px; z-index: 2; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center;
  background: rgba(255,255,255,.8); box-shadow: 0 0 0 1px var(--line); color: var(--brand); }
.dcard__badge svg { width: 24px; height: 24px; }
.dcard__idx { z-index: 2; }
.dcard__ico-big { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) { .dcard__photo { transform: none !important; } }

/* Descenders (g, y, р, у, д) must never be clipped by the line reveal mask or the gradient text. */
.split-line { padding-bottom: .22em; margin-bottom: -.22em; }
.split-line > span { padding-bottom: .04em; }
.grad-text, .grad-text--light { padding-bottom: .14em; margin-bottom: -.14em; display: inline-block; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
/* Snappier reveals: start before the element enters, finish quickly. */
[data-reveal] { transition-duration: .7s, .8s; }
[data-reveal="fast"] { transform: translateY(14px); transition: opacity .45s ease, transform .55s var(--ease-out); transition-delay: 0s; }
.news-card__img { background: linear-gradient(135deg, #e9ebf6, #dfe3f7); }
/* Descender fix, measured: Onest's text box hangs ~.15em below a .9 line box; the gradient
   paints only inside its own box, so give it (and the line mask) .3em of room. */
.split-line { padding-bottom: .3em; margin-bottom: -.3em; }
.grad-text, .grad-text--light { padding-bottom: .3em; margin-bottom: -.3em; }
.split-line > .grad-text, .split-line > .grad-text--light { padding-bottom: .3em; margin-bottom: -.3em; }

/* ---------- QA sweep 2026-10-21 ---------- */
/* Bigger touch areas for footer links, same look (invisible padding). */
.footer__top li a { display: inline-block; padding-block: 8px; margin-block: -8px; }
/* Product section headings: «Характеристики» needs ~310 px at desktop sizes (phones stack the columns). */
@media (min-width: 861px) { .pd-section__grid { grid-template-columns: minmax(200px, 340px) 1fr; } }
@media (max-width: 640px) {
  /* Long Russian words in big headings break with a hyphen instead of spilling off the screen. */
  h1, h2, .h2, h3 { -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word; }
  /* Product sticky bar: the name is already in the big title — leave room for every tab. */
  .subnav__title { display: none; }
  /* Cookie notice: compact, one row, so it no longer hides half of the first screen. */
  .cookie { flex-direction: row; align-items: center; gap: 12px; bottom: 10px; padding: 10px 10px 10px 16px;
    font-size: .76rem; line-height: 1.35; border-radius: 18px; }
  .cookie .btn { min-height: 40px; padding: 0 16px; }
}

/* Long menus scroll inside themselves; the page underneath stays put (iOS rubber-band included). */
.drawer, .mega { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }

/* ---------- Home hero on phones ----------
   The hero text arrives already revealed and fades in with a pure CSS animation: it no longer
   waits for the scroll script, so a slow phone can never leave the headline invisible. */
@keyframes heroRise { from { transform: translateY(110%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes heroFade { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.hero__copy .split-line > span { animation: heroRise 1.1s var(--ease-out) var(--d, 0s) both; }
.hero__copy .hero__sub, .hero__copy .hero__actions { animation: heroFade .9s var(--ease-out) var(--d, 0s) both; }
@media (prefers-reduced-motion: reduce) { .hero__copy .split-line > span, .hero__copy .hero__sub, .hero__copy .hero__actions { animation: none; } }
/* Portrait phones: the text sits at the bottom, leaving the top band to the stent drawing,
   so the two never overlap. */
@media (orientation: portrait) and (max-width: 640px) {
  .hero__copy { justify-content: flex-end; padding-bottom: calc(clamp(20px, 4vh, 40px) + 52px); }
}
/* Short phones (iPhone SE 375×667 and smaller): smaller type, buttons side by side. */
@media (orientation: portrait) and (max-width: 640px) and (max-height: 760px) {
  .hero__title { font-size: clamp(2.1rem, 10vw, 2.7rem); margin-top: 12px !important; }
  .hero__sub { font-size: .95rem; line-height: 1.45; margin-top: 12px; }
  .hero__actions { margin-top: 16px; flex-wrap: nowrap; }
  .hero__actions .btn { flex: 0 0 auto !important; white-space: nowrap; padding-inline: 18px; font-size: .9rem; }
  .hero__actions .btn svg { display: none; }
}
@media (orientation: portrait) and (max-width: 640px) and (max-height: 620px) { .hero__sub { display: none; } }

/* ---------- Brochure card: an embedded PDF in CMS text, shown as a resource card that opens the viewer ---------- */
.rich .brochure-card { display: grid; grid-template-columns: 72px 1fr auto; gap: 18px; align-items: center; max-width: 560px;
  margin: 22px 0 4px; color: inherit; text-decoration: none; }
.brochure-card .resource__cover { width: 72px; }
.brochure-card__text { display: grid; gap: 4px; }
.brochure-card__text small { color: var(--muted); font-size: .86rem; }
.brochure-card__go { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--brand); color: #fff;
  transition: transform .4s var(--ease-out); }
.brochure-card__go svg { width: 18px; height: 18px; }
/* CMS rich text strips span backgrounds/colours (.rich span …!important): win back the button */
.rich .brochure-card__go { background: var(--brand) !important; color: #fff; }
.brochure-card:hover .brochure-card__go { transform: translateX(3px); }
@media (max-width: 560px) { .rich .brochure-card { grid-template-columns: 56px 1fr auto; gap: 14px; } .brochure-card .resource__cover { width: 56px; } }

/* Mobile menu: "Продукция" is a folded group like the directions inside it. */
.drawer details.drawer__group { border-top: 0; padding: 0; }
.drawer summary.drawer__big { font-size: clamp(2rem, 9vw, 2.8rem); font-weight: 620; letter-spacing: -.04em; padding: 6px 0; min-height: 0; }
.drawer summary.drawer__big svg { width: 26px; height: 26px; }
.drawer__sub { padding: 2px 0 10px; }
.drawer__all { display: flex; align-items: center; min-height: 44px; font-size: 1.08rem; color: var(--muted-on-dark); }

/* Phones: shorter scroll scenes. The hero and the statement were 3.2 and 2.2 screens tall, which on a
   phone meant a long stretch of near-empty white between "One partner" and the next text. */
@media (max-width: 860px) and (orientation: portrait) {
  .hero { height: 240vh; }
  .statement__text .w { opacity: .24; }
  /* Not pinned on phones: an ordinary block, the words light up while it scrolls past. */
  .statement { height: auto; }
  /* The statement slides under the end of the hero: it fades in together with the hero's white-out,
     so the text is already on screen when the white appears (no blank stretch to scroll through). */
  .statement.is-overlap { margin-top: -72vh; z-index: 2; opacity: 0; pointer-events: none; }
  .statement.is-overlap.is-in-view { pointer-events: auto; }
  /* The hero's (white) tail is longer than the statement: the next block must sit above it too. */
  .statement.is-overlap + section { position: relative; z-index: 2; }
  .statement__sticky { position: relative; min-height: 0; display: block; padding-block: calc(var(--header-h) + 28px) 40px; }
}

/* YouTube in news text: a "click to play" card (nothing loads from YouTube until clicked). Article styles
   force spans transparent and links brand-coloured, so the card's own rules carry !important. */
.rich a.video-card, .video-card { position: relative; display: block; aspect-ratio: 16 / 9; margin: 24px 0; border-radius: 18px;
  overflow: hidden; text-decoration: none !important; color: #fff !important;
  background: radial-gradient(60% 80% at 30% 20%, #2a2f8f, #0b0d24 70%) !important; }
.video-card img { width: 100%; height: 100%; object-fit: cover; opacity: .82; transition: opacity .4s, transform .8s; }
.video-card:hover img { opacity: 1; transform: scale(1.03); }
.rich .video-card__play, .video-card__play { position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px;
  border-radius: 50%; background: rgba(255,255,255,.95) !important; box-shadow: 0 14px 34px rgba(0,0,0,.4); transition: transform .3s; }
.video-card:hover .video-card__play { transform: scale(1.08); }
.video-card__play::after { content: ""; position: absolute; left: 31px; top: 24px; border-style: solid; border-width: 14px 0 14px 22px;
  border-color: transparent transparent transparent #0b0d24; }
.rich .video-card__label, .video-card__label { position: absolute; left: 18px; bottom: 16px; color: #fff !important; font-size: .9rem !important;
  font-weight: 600; text-shadow: 0 1px 10px rgba(0,0,0,.7); background: transparent !important; }
/* Phones: a smaller product picture, so the product name is on the first screen. */
@media (max-width: 860px) and (orientation: portrait) { .pd-hero__media { max-width: min(520px, 42svh); } }
/* A word longer than its column (e.g. «Рентгенэндоваскулярная») wraps instead of spilling. */
h1, h2, h3 { overflow-wrap: break-word; }

/* ---------- Header search (search.js): instant, typo-tolerant, RU/EN ---------- */
.search-btn { width: 42px; height: 42px; border-radius: 999px; display: grid; place-items: center; color: inherit;
  box-shadow: inset 0 0 0 1px var(--line); transition: background-color .25s; }
.site-header[data-theme="dark"] .search-btn { box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); }
.search-btn:hover { background: rgba(127, 135, 180, .14); }
.search-btn svg, .search__bar svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.search { position: fixed; inset: 0; z-index: 200; display: grid; place-items: start center; padding: 10vh 16px 16px; }
.search[hidden] { display: none; }
.search__backdrop { position: absolute; inset: 0; background: rgba(6, 10, 34, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; transition: opacity .2s; }
.search__panel { position: relative; width: min(680px, 100%); max-height: min(78vh, 720px); display: flex; flex-direction: column;
  background: var(--paper); color: var(--ink); border-radius: 22px; box-shadow: 0 40px 100px -30px rgba(0,0,0,.6);
  transform: translateY(-12px) scale(.98); opacity: 0; transition: transform .25s var(--ease-out), opacity .2s; overflow: hidden; }
.search.is-open .search__backdrop { opacity: 1; }
.search.is-open .search__panel { transform: none; opacity: 1; }
.search__bar { display: flex; align-items: center; gap: 12px; padding: 14px 14px 14px 20px; border-bottom: 1px solid var(--line); }
.search__bar input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: inherit; font-size: 1.1rem; color: inherit; min-height: 40px; }
.search__bar input::-webkit-search-cancel-button { display: none; }
.search__close { font-family: var(--mono); font-size: .72rem; color: var(--muted); padding: 6px 10px; border-radius: 8px;
  box-shadow: inset 0 0 0 1px var(--line); min-height: 32px; }
.search__results { list-style: none; margin: 0; padding: 6px; overflow-y: auto; overscroll-behavior: contain; }
.search__results:empty { display: none; }
.search__item { display: flex; align-items: center; gap: 14px; padding: 10px 12px; border-radius: 14px; color: inherit; text-decoration: none; }
[aria-selected="true"] > .search__item, .search__item:hover { background: var(--pearl, #f2f3fb); }
.search__pic { flex: none; width: 52px; height: 52px; border-radius: 12px; background: var(--pearl, #f2f3fb); display: grid; place-items: center; overflow: hidden; }
.search__pic img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.search__item--g .search__pic, .search__item--s .search__pic { background: linear-gradient(135deg, var(--ink), var(--brand)); }
.search__txt { display: grid; gap: 2px; min-width: 0; }
.search__txt b { font-weight: 600; letter-spacing: -.01em; }
.search__txt small { color: var(--muted); font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search__hint, .search__none { margin: 0; padding: 16px 20px 18px; color: var(--muted); font-size: .88rem; }
.search__none a { color: var(--brand); text-decoration: underline; }
html.search-open { overflow: hidden; }
@media (max-width: 640px) {
  .search { padding: 0; place-items: stretch; }
  .search__panel { width: 100%; max-height: none; height: 100%; border-radius: 0; }
  .search-btn { width: 40px; height: 40px; }
  .search__txt small { white-space: normal; }
}

/* ---------- «Подборка» (tender pack, tender.js) ---------- */
.pick[aria-pressed="true"] { background: var(--ink); color: #fff; box-shadow: none; }
.pick__mark { display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: 6px; border-radius: 50%;
  font-weight: 700; line-height: 1; box-shadow: inset 0 0 0 1.5px currentColor; transition: transform .3s; }
.pick[aria-pressed="true"] .pick__mark { transform: rotate(45deg); }
.pick-chip { position: fixed; right: 16px; bottom: 16px; z-index: 110; display: inline-flex; align-items: center; gap: 10px;
  min-height: 48px; padding: 0 18px; border-radius: 999px; background: var(--ink); color: #fff; font-weight: 600;
  box-shadow: 0 20px 40px -14px rgba(6, 10, 34, .6); }
.pick-chip[hidden] { display: none; }
.pick-chip svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.pick-chip b { display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 7px; border-radius: 999px; background: var(--signal); color: #fff; font-size: .85rem; }
.pick-chip.is-bump { animation: pick-bump .5s var(--ease-out); }
@keyframes pick-bump { 40% { transform: scale(1.12); } }
.cookie.is-shown ~ .pick-chip { bottom: 96px; }
.podborka__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.podborka__zipnote { margin-top: 14px; color: var(--muted-on-dark); font-size: .9rem; }
.podborka { display: grid; gap: 14px; }
.podborka__item { display: grid; grid-template-columns: 120px 1fr auto; gap: 22px; align-items: start; padding: 22px;
  border-radius: var(--radius); background: var(--paper); box-shadow: 0 0 0 1px var(--line); }
.podborka__pic { display: grid; place-items: center; aspect-ratio: 1; border-radius: 16px; background: var(--pearl); overflow: hidden; }
.podborka__pic img { width: 100%; height: 100%; object-fit: contain; padding: 8px; }
.podborka__main h2 { font-size: 1.35rem; letter-spacing: -.02em; margin: 6px 0 4px; font-weight: 620; }
.podborka__type, .podborka__rc { color: var(--muted); font-size: .9rem; }
.podborka__rc { font-family: var(--mono); font-size: .8rem; margin-top: 4px; }
.podborka__docs { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.podborka__docs a { display: inline-flex; align-items: center; min-height: 34px; padding: 0 12px; border-radius: 999px;
  background: var(--pearl); font-size: .84rem; }
.podborka__docs a::before { content: "PDF"; font-family: var(--mono); font-size: .66rem; margin-right: 8px; color: var(--signal); font-weight: 600; }
.podborka__remove { min-height: 40px; padding: 0 14px; border-radius: 999px; color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); font-size: .85rem; }
.podborka__remove:hover { color: var(--ink); }
.podborka__foot { margin-top: 24px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; color: var(--muted); font-size: .88rem; }
.podborka__empty { padding: 20px 0 40px; }
@media (max-width: 640px) {
  .podborka__item { grid-template-columns: 72px 1fr; gap: 14px; padding: 16px; }
  .podborka__remove { grid-column: 1 / -1; justify-self: start; }
  .pick-chip { right: 12px; bottom: 12px; min-height: 52px; padding: 0 12px 0 14px; gap: 6px; }
  .pick-chip__label { display: none; }
}

/* ---------- Scrollbars in the site's colours ----------
   Chrome / Edge / Yandex / Safari: rounded thumb with the brand gradient (as the hero's progress bar).
   Firefox can only colour them: brand thumb on a light track. Phones keep their overlay scrollbars. */
@supports selector(::-webkit-scrollbar) {
  ::-webkit-scrollbar { width: 12px; height: 8px; }
  ::-webkit-scrollbar-track { background: transparent; }
  html::-webkit-scrollbar-track { background: var(--pearl); }
  ::-webkit-scrollbar-thumb {
    border: 3px solid transparent; border-radius: 999px; background-clip: padding-box;
    background-image: linear-gradient(180deg, var(--brand), #6b4fd8 70%, var(--signal));
  }
  ::-webkit-scrollbar-thumb:hover { border-width: 2px; }
  ::-webkit-scrollbar-thumb:horizontal { border-width: 2px; background-image: linear-gradient(90deg, var(--brand), var(--signal)); }
  ::-webkit-scrollbar-corner { background: transparent; }
  /* Photo strips (news gallery, related products): a slim pill under the photos on a soft rail. */
  .news-gallery::-webkit-scrollbar, .related::-webkit-scrollbar { height: 6px; }
  .news-gallery::-webkit-scrollbar-track, .related::-webkit-scrollbar-track { background: var(--brand-soft); border-radius: 999px; margin-inline: 2px; }
  .news-gallery::-webkit-scrollbar-thumb, .related::-webkit-scrollbar-thumb { border: 0; }
}
@supports not selector(::-webkit-scrollbar) {
  html { scrollbar-color: var(--brand) var(--pearl); }
  * { scrollbar-color: var(--brand) transparent; }
  .news-gallery, .related { scrollbar-width: thin; }
}
/* Chrome ignores the ::-webkit-scrollbar styles on an element that sets scrollbar-width/-color,
   so those standard properties are used only where the styled scrollbar isn't available. */

/* Footer links light up in the accent colour on hover / keyboard focus (the logo keeps its colours). */
.footer__top a:not(.brand), .footer__bottom a { transition: color .25s ease; }
.footer__top a:not(.brand):hover, .footer__top a:not(.brand):focus-visible,
.footer__bottom a:hover, .footer__bottom a:focus-visible { color: var(--signal); }
/* ---------- About: ЦЭЛТ clinic in figures (bento) ----------
   Scale first (patients, first-ever operations), then what it is made of: the clinic and the team. */
.celt { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(150px, auto); gap: 14px; }
.celt__card { position: relative; overflow: hidden; border-radius: var(--radius); padding: clamp(22px, 2.6vw, 34px); display: flex; flex-direction: column; }
.celt__tag { font-family: var(--mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; opacity: .7; margin-bottom: auto; }
.celt b { display: block; font-weight: 640; letter-spacing: -.05em; line-height: .95; font-variant-numeric: tabular-nums; white-space: nowrap; }
.celt__big { font-size: clamp(3.2rem, 7vw, 6.4rem); margin-top: 18px; }
.celt__label { display: block; margin-top: 10px; font-size: .95rem; line-height: 1.35; max-width: 28ch; }

.celt__card--hero { grid-column: span 2; grid-row: span 2; color: #fff; justify-content: flex-end;
  background: radial-gradient(120% 90% at 100% 0%, rgba(255,107,31,.55), transparent 55%), linear-gradient(140deg, var(--brand-deep), var(--brand) 55%, #5b3fd6); }
.celt__card--hero::after { content: ""; position: absolute; right: -12%; top: -18%; width: 60%; aspect-ratio: 1; border-radius: 50%; border: 1px solid rgba(255,255,255,.18); box-shadow: 0 0 0 40px rgba(255,255,255,.04), 0 0 0 90px rgba(255,255,255,.03); pointer-events: none; }
.celt__card--hero .celt__tag { margin-bottom: auto; }
.celt__card--hero .celt__label { color: rgba(255,255,255,.8); font-size: 1.1rem; }

.celt__card--first { grid-column: span 2; background: var(--ink); justify-content: flex-end; }
.celt__card--first::before { content: ""; position: absolute; inset: auto -10% -60% auto; width: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(255,107,31,.35), transparent 65%); pointer-events: none; }
.celt__card--first .celt__big { font-size: clamp(2.8rem, 5vw, 4.6rem); margin-top: 0; }
.celt__card--first .celt__big, .celt__card--first .celt__label { position: relative; }
.celt__card--first .celt__label { color: var(--muted-on-dark); }

.celt__card--clinic { grid-column: span 2; background: var(--pearl); }
.celt__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 18px; }
.celt__pair > div + div { border-left: 1px solid var(--line); padding-left: 20px; }
.celt__pair b { font-size: clamp(2.6rem, 4.4vw, 4rem); color: var(--brand); }
.celt__card--clinic .celt__label { color: var(--muted); }

.celt__card--team { grid-column: span 4; background: var(--paper); box-shadow: 0 0 0 1px var(--line); }
.celt__bars { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(12px, 2vw, 28px); align-items: end; margin-top: 22px; min-height: 230px; }
.celt__bar { display: grid; grid-template-rows: 1fr minmax(2.7em, auto); height: 100%; min-width: 0; }
.celt__col { display: flex; flex-direction: column; justify-content: flex-end; }
.celt__bar b { font-size: clamp(2rem, 3.4vw, 3rem); }
.celt__bar i { display: block; margin-top: 12px; height: calc(8px + var(--h) / 43 * 130px); border-radius: 12px 12px 4px 4px;
  background: linear-gradient(180deg, var(--brand), #6b4fd8 80%, var(--signal)); transform-origin: bottom; transform: scaleY(.04); transition: transform 1.2s var(--ease-out) calc(var(--d, 0s) + .2s); }
.celt__card--team.is-in .celt__bar i { transform: none; }
.celt__bar:nth-child(2) i { transition-delay: .3s; } .celt__bar:nth-child(3) i { transition-delay: .4s; } .celt__bar:nth-child(4) i { transition-delay: .5s; }
.celt__card--team .celt__label { color: var(--muted); font-size: .88rem; }

@media (max-width: 860px) {
  .celt { grid-template-columns: 1fr 1fr; grid-auto-rows: auto; }
  .celt__card--hero, .celt__card--first, .celt__card--clinic, .celt__card--team { grid-column: span 2; grid-row: auto; }
  .celt__card--hero { min-height: 300px; }
  /* Phones: the team as horizontal bars, one row each (labels get the full width). */
  .celt__bars { grid-template-columns: 1fr; min-height: 0; gap: 16px; }
  .celt__bar { grid-template-columns: 3.2rem 1fr; grid-template-rows: auto auto; column-gap: 14px; height: auto; }
  .celt__col { display: contents; }
  .celt__bar b { grid-row: 1 / span 2; align-self: center; font-size: 2rem; text-align: right; }
  .celt__bar i { margin-top: 0; height: 12px; width: calc(4% + var(--h) / 43 * 96%); border-radius: 999px; transform-origin: left; transform: scaleX(.04);
    background: linear-gradient(90deg, var(--brand), #6b4fd8 80%, var(--signal)); align-self: end; }
  .celt__card--team .celt__label { margin-top: 6px; font-size: .9rem; }
}
@media (prefers-reduced-motion: reduce) { .celt__bar i { transform: none; } }

/* News titles hold very long words («рентгенэндоваскулярной» is ~1000 px at desktop display size): hyphenate instead of spilling past the column. */
article .page-hero h1 { -webkit-hyphens: auto; hyphens: auto; }

/* Product section bar: hides with the site header while scrolling down (reading), comes back with it on any
   scroll up — it no longer sits over the content the whole time. */
.subnav { transition: top .6s var(--ease-out), transform .45s var(--ease-out); }
.header-hidden .subnav { transform: translateY(-100%); }
/* Hero on laptops (2026-10-26): the copy is centred on the full screen height while the scroll cue sits at
   the bottom, so on 13–15.6" laptop windows the buttons ran into «Листайте». Keep room for the cue, and on
   shorter landscape screens size the heading, subtitle and spacing by the window height. */
@media (min-width: 861px) {
  .hero__copy { padding-bottom: calc(clamp(20px, 4vh, 40px) + 60px); }
}
@media (min-width: 861px) and (max-height: 860px) {
  :root { --fs-hero: clamp(2.3rem, min(7.2vw, 10.6vh), 7rem); }
  .hero__sub { margin-top: clamp(12px, 2.4vh, 26px); font-size: clamp(1rem, 2.5vh, 1.3rem); line-height: 1.45; max-width: 50ch; }
  .hero__actions { margin-top: clamp(14px, 3vh, 32px); }
}
@media (min-width: 861px) and (max-height: 680px) {
  :root { --fs-hero: clamp(2.1rem, min(6.8vw, 9.8vh), 6rem); }
  .hero__sub { max-width: 58ch; font-size: 1rem; }
}
/* Very short screens (small laptops, iPhone SE): the buttons matter more than the decorative scroll cue. */
@media (max-height: 680px) {
  .hero__meta .scroll-cue { visibility: hidden; }
}

/* RK Group, the flagship (2026-10-26): the way across to rkgroup.ru from RK products, the RK page and the Подборка. */
.rk-link { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 16px; align-items: center; margin-top: 22px; max-width: 560px;
  padding: 16px 18px; border-radius: 18px; background: #fff; box-shadow: inset 0 0 0 1px var(--line), 0 10px 30px -18px rgba(39, 39, 116, .45);
  color: var(--ink); transition: box-shadow .25s, transform .25s; }
.rk-link:hover { box-shadow: inset 0 0 0 1.5px #3b3bc4, 0 14px 34px -18px rgba(39, 39, 116, .55); transform: translateY(-1px); }
.rk-link__mark { grid-row: span 2; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px;
  background: #272774; color: #fff; font-weight: 800; letter-spacing: -.02em; font-size: 1.05rem; }
.rk-link__text b { display: block; font-weight: 620; }
.rk-link__text small { display: block; margin-top: 2px; color: var(--muted); font-size: .86rem; line-height: 1.4; }
.rk-link__go { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: .92rem; color: #3b3bc4; }
.rk-link__go svg { width: 16px; height: 16px; transition: transform .25s; }
.rk-link:hover .rk-link__go svg { transform: translateX(3px); }
.rk-flag { display: flex; flex-wrap: wrap; gap: 18px 28px; align-items: center; justify-content: space-between; margin-top: 30px;
  padding: 20px 22px; border-radius: 20px; background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); max-width: 980px; }
.rk-flag p { flex: 1 1 360px; color: rgba(255,255,255,.72); line-height: 1.5; }
.rk-flag b { color: #fff; font-weight: 620; }
.podborka__sizes { display: grid; gap: 6px; margin-top: 14px; max-width: 560px; }
.podborka__sizes span { font-size: .82rem; color: var(--muted); }
.podborka__sizes a { color: var(--signal); text-decoration: underline; text-underline-offset: 2px; }
.podborka__sizes input { min-height: 44px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line); background: #fff; font: inherit; font-size: .95rem; }
.podborka__sizes input:focus { outline: none; border-color: var(--signal); box-shadow: 0 0 0 3px rgba(255, 107, 31, .16); }
.podborka__hint { margin-top: 18px; color: var(--muted); font-size: .9rem; }
@media (max-width: 640px) {
  .rk-link__go { grid-column: 1 / -1; }
}