/* QMD cinematic darkroom. One object as an artifact; uppercase display; mono captions; one signal red. */
:root {
  --canvas: #0c0f11;
  --canvas-2: #141a1d;
  --hairline: #273136;
  --ink: #e9edef;
  --ink-muted: #9aa6ab;
  --ink-dim: #788890;
  --signal: #5fd091;
  --signal-deep: #2ec985;
  --error: #e0634f;
  --display: 'Onest', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
  --gutter: 64px;
  --rail: 72px;
  --header: 92px;
}
@media (max-width: 1150px) { :root { --gutter: 36px; } }
@media (max-width: 760px) { :root { --gutter: 22px; --rail: 60px; --header: 76px; } }

* { box-sizing: border-box; }
html { background: var(--canvas); scroll-behavior: auto; color-scheme: dark; -webkit-tap-highlight-color: transparent; }
body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font: 400 16px/1.55 var(--display);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3 { margin: 0; font-weight: 500; text-transform: uppercase; letter-spacing: 0; line-height: 1.02; text-wrap: balance; overflow-wrap: break-word; }
p { margin: 0; overflow-wrap: break-word; }
a { color: inherit; text-decoration: none; }
a, button, input, select, textarea, label { touch-action: manipulation; }
button { font: inherit; color: inherit; cursor: pointer; }
::selection { background: var(--signal); color: var(--canvas); }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 4px; }
.mono { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }
.kicker { color: var(--ink-muted); display: block; }
.kicker::first-letter { color: var(--signal); }
h2.kicker { font-weight: 400; line-height: 1.55; text-wrap: auto; }
.muted { color: var(--ink-muted); }
.skip { position: fixed; left: 16px; top: -100px; z-index: 100; background: var(--canvas-2); padding: 12px 18px; border-radius: 999px; }
.skip:focus, .skip:focus-visible { top: 14px; }
/* Headline-sized kerning for English and Kazakh: paragraphs hyphenate where the browser has a dictionary (en); Kazakh words simply break when they must. */
:lang(en) .hero-copy p, :lang(en) .panel-scene .copy > p, :lang(en) .lead, :lang(en) .service-list p, :lang(en) .contact-head p, :lang(en) .about-copy p { hyphens: auto; }

/* Buttons */
.button {
  display: inline-flex; align-items: center; gap: 26px;
  min-height: 52px; padding: 0 24px;
  background: var(--ink); color: var(--canvas);
  border: 1px solid var(--ink); border-radius: 999px;
  font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase;
  transition: background 0.2s, border-color 0.2s;
}
.button::after { content: '↗'; font-family: var(--display); font-size: 16px; }
.button:hover { background: #f6f8f9; border-color: #f6f8f9; }
.text-link {
  display: inline-flex; align-items: center; gap: 16px; padding: 12px 0; min-height: 44px;
  border-bottom: 1px solid var(--hairline);
  font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase;
  transition: border-color 0.2s;
}
.text-link:hover { border-color: var(--ink); }
.pill-link {
  display: inline-flex; align-items: center; padding: 11px 18px; min-height: 44px;
  border: 1px solid var(--hairline); border-radius: 999px;
  font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase;
  transition: border-color 0.2s, background 0.2s;
}
.pill-link:hover { border-color: var(--ink-muted); background: var(--canvas-2); }
.icon-button {
  width: 38px; height: 38px; display: grid; place-items: center;
  border: 1px solid var(--hairline); border-radius: 50%; background: #141a1dcc; color: var(--ink);
  transition: background 0.2s, border-color 0.2s;
}
.icon-button:hover { background: var(--canvas-2); border-color: var(--ink-dim); }
.icon-button svg { pointer-events: none; }

/* Header */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 70; /* above the open menu so the close control stays reachable */
  height: var(--header); padding: 0 var(--gutter);
  display: flex; align-items: center; gap: 36px;
  pointer-events: none;
}
.site-header > * { pointer-events: auto; }
.wordmark { font-weight: 500; font-size: 20px; letter-spacing: 0.04em; display: inline-flex; align-items: center; min-height: 44px; }
.wordmark span { color: var(--signal); }
.site-nav { display: flex; gap: 28px; margin-left: 24px; }
.site-nav a { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); padding: 10px 0; position: relative; }
.site-nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 4px; height: 1px; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform 0.25s; }
.site-nav a:hover { color: var(--ink); }
.site-nav a:hover::after, .site-nav a:focus-visible::after { transform: scaleX(1); }
.header-right { margin-left: auto; display: flex; align-items: center; gap: 22px; }
.languages { display: flex; gap: 4px; }
.languages button { background: none; border: 0; padding: 6px 7px; min-width: 32px; min-height: 32px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; color: var(--ink-muted); border-bottom: 1px solid transparent; border-radius: 0; transition: color 0.2s; }
.languages button:hover { color: var(--ink); }
.languages button[aria-pressed='true'] { color: var(--ink); border-bottom-color: var(--ink); }
.languages button:focus-visible { outline-offset: 0; }
.menu-button { display: none; flex-direction: column; justify-content: center; align-items: center; gap: 5px; }
.menu-button span { width: 16px; height: 1px; background: currentColor; transition: transform 0.2s; }
.menu-button[aria-expanded='true'] span:first-child { transform: translateY(3px) rotate(45deg); }
.menu-button[aria-expanded='true'] span:last-child { transform: translateY(-3px) rotate(-45deg); }
.menu { position: fixed; inset: 0; z-index: 60; background: var(--canvas); padding: calc(var(--header) + 20px) var(--gutter) 40px; overflow-y: auto; overscroll-behavior: contain; }
.menu nav { display: flex; flex-direction: column; }
.menu nav a { padding: 20px 0; border-bottom: 1px solid var(--hairline); font-size: 22px; text-transform: uppercase; font-weight: 500; transition: color 0.2s; }
.menu nav a:hover { color: var(--signal); }
.menu nav a:focus-visible { outline-offset: -2px; }
body:has(#menu:not([hidden])) { overflow: hidden; }

/* Story stage */
.story { position: relative; height: 600svh; }
.stage { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.void {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 46% 40% at 50% 48%, #1d262b 0%, #141a1d 45%, #0c0f1100 72%), var(--canvas);
}
.void::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 90% 80% at 50% 45%, #0c0f1100 55%, #0c0f118c 100%);
}
.stage::after {
  content: ''; position: absolute; inset: 0; z-index: 5; pointer-events: none; opacity: 0.07; mix-blend-mode: screen;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 220px 220px;
}
/* Laboratory plate behind the accreditation scene: the same darkroom concept as the hero bench, faded in and out on u. */
.lab-plate { position: absolute; inset: 0 0 var(--rail); z-index: 0; overflow: hidden; opacity: var(--lab, 0); }
.lab-plate img { width: 100%; height: 100%; object-fit: cover; object-position: center; transform: scale(calc(1.12 - var(--lab, 0) * 0.06)) translateY(calc(var(--lab, 0) * -14px)); filter: saturate(0.8) contrast(1.05); }
.lab-plate::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 70% at 60% 50%, #0c0f1100 25%, #0c0f1199 72%, #0c0f11e6 100%), linear-gradient(90deg, #0c0f11f2 0%, #0c0f11b3 32%, #0c0f1100 58%); }
/* Hero plate: the photographed bench under the instrument; it fades into the void as the story starts. */
.hero-plate { position: absolute; inset: 0 0 var(--rail); z-index: 0; overflow: hidden; opacity: var(--plate, 1); }
.hero-plate img { width: 100%; height: 100%; object-fit: cover; object-position: center; transform: scale(1.06) translateY(calc(var(--u, 0) * -36px)); filter: saturate(0.85) contrast(1.05); }
.hero-plate::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 70% at 50% 46%, #0c0f1100 30%, #0c0f1199 75%, #0c0f11e6 100%), linear-gradient(180deg, #0c0f1180 0%, #0c0f1100 30%, #0c0f1100 60%, #0c0f11b3 100%); }
/* Hero wordmark: sits above the instrument as a title block, never behind it. The instrument hangs from the baseline. */
.hero-wordmark {
  position: absolute; left: 50%; top: calc(var(--header) + 1.5svh); z-index: 1;
  transform: translate(-50%, 0);
  font-size: clamp(72px, 11.5vw, 168px); font-weight: 500; line-height: 0.86; letter-spacing: -0.03em; white-space: nowrap;
  color: var(--ink); opacity: calc(1 - var(--heroOut, 0)); pointer-events: none;
}
.hero-wordmark::after { content: ''; display: block; width: 100%; height: 1px; margin-top: 10px; background: linear-gradient(90deg, #e9edef00, var(--hairline) 20%, var(--hairline) 80%, #e9edef00); }
.hero-wordmark span { color: var(--signal-deep); }
.hero-wordmark { text-shadow: 0 30px 80px #0c0f11cc; }
.scene { position: absolute; inset: 0 0 var(--rail); width: 100%; height: calc(100% - var(--rail)); z-index: 2; display: block; pointer-events: none; opacity: 0; transition: opacity 0.6s ease; }
.scene.is-ready { opacity: 1; }
.scene-fallback { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); z-index: 2; font: 500 64px var(--mono); color: var(--ink-dim); }
.scene-fallback small { font-size: 18px; }

.panel {
  position: absolute; inset: 0 0 var(--rail); z-index: 3;
  visibility: hidden; pointer-events: none;
  --in: 0; --out: 0; --in2: 0; --in3: 0;
}
.panel.is-on { visibility: visible; }
.panel.is-active .copy, .panel.is-active .hero-copy, .panel.is-active .readout, .panel.is-active .parts { pointer-events: auto; }
/* v3 reveal grammar: block lifts 32px and fades in, headline slides out from under a mask, lead and actions follow. */
.panel .copy { opacity: calc(var(--in) * (1 - var(--out))); transform: translate3d(0, calc((1 - var(--in)) * 32px - var(--out) * 32px), 0); }
.mask { overflow: hidden; padding-bottom: 0.22em; margin-bottom: -0.22em; } /* room for Д/Қ/Ң tails on the last line */
.mask > h1, .mask > h2 { transform: translate3d(0, calc((1 - var(--in)) * 110%), 0); }
.panel .copy > p, .panel .cal, .panel .note, .panel .tags { opacity: var(--in2); transform: translate3d(0, calc((1 - var(--in2)) * 18px), 0); }
.panel .copy .actions { opacity: var(--in3); transform: translate3d(0, calc((1 - var(--in3)) * 14px), 0); }
.panel-hero .hero-copy, .panel-hero .corner { opacity: calc(1 - var(--heroOut, 0)); transform: translate3d(0, calc(var(--heroOut, 0) * -48px), 0); }
.panel-hero .corner-br { transform: translate3d(0, calc(var(--heroOut, 0) * -24px), 0); }
.panel .readout { opacity: calc(var(--in3) * (1 - var(--out))); transform: translate3d(0, calc((1 - var(--in3)) * 28px), 0); }
.panel .parts { opacity: calc(var(--in3) * (1 - var(--out))); }
.corner { position: absolute; display: grid; gap: 6px; color: var(--ink-dim); }
.corner-tl { left: var(--gutter); top: calc(var(--header) + 22px); color: var(--ink-muted); }
.corner-br { right: var(--gutter); bottom: 44px; text-align: right; }
.drag-hint { position: absolute; left: 50%; bottom: 44px; transform: translateX(-50%); color: var(--ink-dim); display: flex; align-items: center; gap: 10px; opacity: calc(1 - var(--heroOut, 0)); transition: opacity 0.3s; }
.drag-hint i { width: 26px; height: 1px; background: var(--hairline); }
.stage.is-dragging .drag-hint { opacity: 0; }
.stage.is-dragging { cursor: grabbing; }
.panel-hero.is-active ~ .scene, .stage[data-grab='1'] .scene { pointer-events: auto; cursor: grab; }
.hero-copy { position: absolute; left: var(--gutter); bottom: 48px; width: 560px; max-width: 46%; }
.hero-copy h1 { font-size: clamp(30px, 3.3vw, 48px); max-width: 560px; }
.hero-copy p { margin: 18px 0 26px; font-size: 17px; color: var(--ink-muted); max-width: 400px; }
.actions { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }

.panel-scene { display: flex; align-items: center; padding: calc(var(--header) + 10px) var(--gutter) 30px; }
.panel-scene .copy { width: 42%; max-width: 500px; }
.panel-scene h2 { font-size: clamp(26px, 2.9vw, 40px); margin: 18px 0; }
.panel-scene .copy > p { color: var(--ink-muted); font-size: 16px; max-width: 440px; margin-bottom: 26px; }
.big-word {
  position: absolute; right: -0.04em; bottom: -0.18em; z-index: -1;
  font-family: var(--display); font-size: clamp(120px, 20vw, 300px); font-weight: 500; letter-spacing: -0.02em; line-height: 1;
  color: #e9edef08; pointer-events: none; white-space: nowrap;
}
/* The Kazakh and English big words run 7–8 letters (ТІЗІЛІМ, НҮКТЕЛЕР, ТОРАПТАР, REGISTER): sized so they stay right of the copy column. */
:lang(kk) .big-word, :lang(en) .big-word { font-size: clamp(96px, 12.5vw, 190px); }

/* Documents (01) */
.documents { position: absolute; right: var(--gutter); top: 50%; transform: translateY(-50%); width: 40%; max-width: 560px; height: 70%; }
.paper, .sheet { position: absolute; border-radius: 12px; box-shadow: 0 40px 80px #00000099; color: #263b45; }
/* Certificate: the form of a real RK type-approval certificate (bilingual header with the state emblem, number and date,
   registration block, underlined fields). Sample data only; the stamp says so. Times, as the issuing portal prints it. */
.paper { left: 0; top: 0; width: 330px; padding: 16px 18px 12px; background: #fdfdfb; font-family: 'Times New Roman', Times, serif; font-size: 7px; line-height: 1.25; color: #111; transform: translate3d(0, calc((1 - var(--in2)) * 60px), 0) rotate(-2deg); overflow: hidden; }
.cert-head { display: grid; grid-template-columns: 1fr 44px 1fr; gap: 8px; align-items: start; text-align: center; font-size: 6.5px; line-height: 1.2; }
.cert-head b { display: block; font-weight: 700; margin-bottom: 3px; }
.cert-emblem { width: 44px; height: 44px; justify-self: center; }
.cert-row { display: flex; justify-content: space-between; margin-top: 7px; font-size: 7px; }
.cert-city { font-size: 6px; text-transform: uppercase; color: #333; }
.cert-title { text-align: center; margin: 10px 0 6px; font-size: 8.5px; line-height: 1.25; }
.cert-title b { display: block; font-weight: 700; }
.cert-reg { margin-left: 56%; font-size: 6px; line-height: 1.3; }
.cert-body { margin: 6px 0 4px; font-size: 7px; text-indent: 10px; }
.cert-fields { margin: 0; }
.cert-fields dd { margin: 0; text-align: center; font-size: 7.5px; border-bottom: 1px solid #222; padding-bottom: 1px; }
.cert-fields dt { text-align: center; font-size: 5.5px; color: #333; margin: 1px 0 5px; }
.cert-sign { display: flex; justify-content: space-between; margin-top: 8px; font-size: 7px; font-weight: 700; }
.cert-note { margin-top: 7px; font-size: 5.5px; color: #222; line-height: 1.3; }
.cert-foot { display: flex; gap: 8px; align-items: flex-end; margin-top: 8px; padding-top: 5px; border-top: 1px solid #ddd; font-size: 4.5px; color: #444; line-height: 1.3; }
.cert-qr { flex: 0 0 22px; height: 22px; background: repeating-linear-gradient(90deg, #111 0 2px, #fff 2px 4px), repeating-linear-gradient(0deg, #111 0 2px, #fff 2px 4px); background-blend-mode: multiply; border: 2px solid #fff; outline: 1px solid #111; }
.cert-stamp { position: absolute; right: -8px; top: 42%; transform: rotate(-18deg); font-size: 20px; letter-spacing: 0.3em; color: #c0392b; opacity: 0.22; border: 2px solid #c0392b; padding: 4px 10px; pointer-events: none; }
.sheet { right: 0; bottom: 0; width: 340px; background: #fcfdfc; overflow: hidden; transform: translate3d(0, calc((1 - var(--in3)) * 90px), 0); }
.sheet-top { display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; background: #1b2328; color: #e9edef; font-size: 10px; }
.sheet-top .tag { border: 1px solid #ffffff40; border-radius: 999px; padding: 2px 8px; font-size: 9px; }
.sheet strong { display: block; padding: 18px 20px 6px; font-size: 18px; font-weight: 500; }
.sheet dl { margin: 0; padding: 0 20px 18px; }
.sheet dl div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid #e2e9ea; font-size: 11px; }
.sheet dd { margin: 0; text-align: right; }

/* Readout (02) */
.readout { position: absolute; right: var(--gutter); bottom: 34px; width: 44%; max-width: 560px; }
.readout-row { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding: 10px 0; border-bottom: 1px dashed var(--hairline); color: var(--ink-muted); }
.readout-row b { font: 500 26px var(--mono); color: var(--ink); font-variant-numeric: tabular-nums; }
.readout-row b small { font-size: 12px; font-weight: 400; color: var(--ink-muted); }
.readout > small { display: block; margin-top: 12px; font-size: 11px; color: var(--ink-muted); }
.dot { display: inline-block; width: 6px; height: 6px; background: var(--ink-muted); margin-right: 8px; }
.dot-signal { background: var(--signal); }

/* Calibration (03) */
.cal { width: 100%; border-collapse: collapse; margin: 6px 0 8px; font-family: var(--mono); font-size: 12px; font-variant-numeric: tabular-nums; }
.cal th { text-align: left; font-weight: 400; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); padding: 0 0 8px; }
.cal td { padding: 0; }
.cal tr { border-top: 1px dashed var(--hairline); }
.cal button { width: 100%; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; align-items: center; text-align: left; background: none; border: 0; padding: 11px 0; color: var(--ink-muted); font: inherit; letter-spacing: 0.02em; border-radius: 0; transition: color 0.2s; }
.cal button[aria-pressed='true'] { color: var(--ink); }
.cal button[aria-pressed='true'] span:first-child::before { content: ''; display: inline-block; width: 6px; height: 6px; background: var(--signal); margin-right: 8px; vertical-align: middle; }
.cal button:hover { color: var(--ink); }
.cal button:focus-visible { outline-offset: -2px; }
.note { display: block; font-size: 11px; color: var(--ink-muted); margin-bottom: 22px; }

/* Accreditation (04) */
.tags { list-style: none; margin: 0 0 26px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.tags li { padding: 9px 14px; border: 1px solid var(--hairline); border-radius: 999px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted); }

/* Repair (05) */
.parts { position: absolute; left: 52%; right: var(--gutter); bottom: 40px; margin: 0; padding: 0; list-style: none; display: flex; justify-content: space-between; gap: 12px; color: var(--ink-muted); }
.parts li { display: grid; gap: 10px; }
.parts li::before { content: counter(part, decimal-leading-zero); counter-increment: part; color: var(--signal); }
.parts { counter-reset: part; }
.availability { color: var(--ink-muted); }

/* Rail */
.rail {
  position: absolute; left: 0; right: 0; bottom: 0; height: var(--rail); z-index: 6;
  display: flex; padding: 0 var(--gutter);
  background: #0c0f11e0; border-top: 1px solid var(--hairline);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
}
.rail a { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 0 16px; position: relative; font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); border-left: 1px solid var(--hairline); white-space: nowrap; overflow: hidden; transition: color 0.2s; }
.rail a span { overflow: hidden; text-overflow: ellipsis; }
.rail a:first-child { padding-left: 0; border-left: 0; }
.rail a i { font-style: normal; color: var(--ink-dim); }
.rail a:hover { color: var(--ink); }
.rail a:focus-visible { outline-offset: -3px; }
.rail a[aria-current] { color: var(--ink); }
.rail a[aria-current] i { color: var(--signal); }
.rail a[aria-current]::before { content: ''; position: absolute; top: -1px; left: 0; right: 0; height: 2px; background: var(--signal-deep); }
.scene-controls { position: absolute; right: var(--gutter); top: calc(var(--header) + 22px); z-index: 7; }

/* Sections */
.section { padding: 110px var(--gutter); border-top: 1px dashed var(--hairline); }
/* Services: a sticky viewport inside a tall track; the cards scrub sideways as the page scrolls. */
.services { position: relative; border-top: 1px dashed var(--hairline); background: var(--canvas); }
.services-track { height: 260svh; }
.services-sticky { position: sticky; top: 0; height: 100svh; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr auto; padding: calc(var(--header) + 10px) 0 40px; overflow: hidden; }
.services-sticky .section-head { padding: 0 var(--gutter); }
.service-rail { list-style: none; margin: 0; padding: 0 var(--gutter); display: flex; gap: 20px; align-self: center; width: max-content; min-width: 100%; will-change: transform; }
.rail-card { flex: 0 0 clamp(300px, 30vw, 440px); }
.rail-card a { display: flex; flex-direction: column; gap: 14px; height: clamp(300px, 42svh, 420px); padding: 26px 28px; border: 1px solid var(--hairline); border-radius: 12px; background: var(--canvas-2); transition: border-color 0.25s, transform 0.25s; }
.rail-card a:hover { border-color: var(--ink-dim); transform: translateY(-4px); }
.rail-card .rail-n { color: var(--ink-dim); }
.rail-card .status { color: var(--ink-muted); }
.rail-card .status.accent { color: var(--signal); }
.rail-card h3 { font-size: clamp(20px, 1.8vw, 26px); margin-top: auto; }
.rail-card p { color: var(--ink-muted); font-size: 14px; max-width: 36ch; }
.rail-card .rail-cta { margin-top: 10px; color: var(--ink); }
.rail-progress { display: flex; align-items: center; gap: 16px; padding: 0 var(--gutter); color: var(--ink-dim); }
.rail-progress i { flex: 1; height: 1px; background: var(--hairline); display: block; }
.rail-progress b { display: block; height: 1px; width: 100%; background: var(--signal); transform-origin: left; transform: scaleX(0.2); }
/* Ride-over: the next section climbs over the previous one with a rounded top, pulled up by a sticky-free overlap. */
.ride { position: relative; z-index: 2; border-top: 0; border-radius: 28px 28px 0 0; margin-top: -28px; box-shadow: 0 -30px 60px #0c0f11b3; }
.about.ride { background: var(--canvas-2); }
.contact.ride { background: var(--canvas); border-top: 1px dashed var(--hairline); border-radius: 28px 28px 0 0; }
.section-head { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 60px; align-items: end; }
.section-head .lead { max-width: 420px; color: var(--ink-muted); justify-self: end; }

.about { background: var(--canvas-2); display: grid; grid-template-columns: 1fr 1fr; gap: 72px; }
.about h2 { font-size: clamp(30px, 3.4vw, 48px); margin-top: 24px; }
.about-copy p { font-size: 18px; max-width: 520px; }
.about-copy p + p { font-size: 14px; margin-top: 18px; }
.facts { margin: 40px 0 0; padding-top: 24px; border-top: 1px dashed var(--hairline); display: grid; gap: 16px; }
.facts div { display: grid; grid-template-columns: 120px 1fr; gap: 20px; }
.facts dt { color: var(--ink-muted); }
.facts dd { margin: 0; }

.contact { position: relative; isolation: isolate; overflow: hidden; }
.contact-glow { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; opacity: 0.9; pointer-events: none; }
.contact { display: grid; grid-template-columns: 1fr 1fr; gap: 90px; }
.contact h2 { font-size: clamp(30px, 3.4vw, 48px); margin: 24px 0; }
.contact-head p { color: var(--ink-muted); max-width: 380px; }
.enquiry { display: flex; flex-direction: column; gap: 22px; }
.enquiry label { display: flex; flex-direction: column; gap: 10px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); }
.enquiry input, .enquiry select, .enquiry textarea {
  width: 100%; min-height: 44px; background-color: transparent; color: var(--ink); border: 0; border-bottom: 1px solid var(--hairline); border-radius: 0;
  padding: 9px 0; font: 400 16px var(--display); outline-offset: 5px; resize: vertical;
}
.enquiry select option { background: var(--canvas-2); color: var(--ink); }
.enquiry .invalid { border-bottom-color: var(--error); }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.pair.triple { grid-template-columns: 1.4fr 1fr 0.7fr; }
.consent { flex-direction: row !important; align-items: flex-start; gap: 12px !important; text-transform: none !important; letter-spacing: 0 !important; font-family: var(--display) !important; font-size: 13px !important; }
.consent { min-height: 44px; }
.consent input { width: 18px; height: 18px; min-height: 0; margin: 1px 0 0; flex: 0 0 auto; accent-color: var(--signal); }
.hp { position: absolute; left: -9999px; }
.enquiry .note { font-size: 12px; color: var(--ink-muted); }
.enquiry .button { align-self: flex-start; }
.status { min-height: 24px; font-size: 13px; color: var(--ink-muted); }

.site-footer { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 40px; padding: 36px var(--gutter); background: var(--canvas-2); border-top: 1px solid var(--hairline); }
.site-footer small { color: var(--ink-muted); font-size: 12px; max-width: 420px; }
.site-footer .mono { margin-left: auto; color: var(--ink-dim); }

/* Parallax: the wordmark and the big words drift against the scroll between scenes. */
.hero-wordmark { transform: translate(-50%, calc(var(--heroOut, 0) * -48px)); }
.panel .big-word { opacity: calc(var(--in) * (1 - var(--out))); transform: translate3d(calc((1 - var(--in)) * 160px - var(--out) * 220px), 0, 0); }
/* documents fly through the camera on the way out */
.documents { opacity: calc(var(--in2) * (1 - var(--docsOut, 0))); transform: scale(calc(1 + var(--docsOut, 0) * 0.55)); transform-origin: 62% 58%; }
.documents { top: 15%; }

/* Part labels anchored to the exploded parts (desktop); a row on portrait screens */
.parts.is-anchored { left: 0; right: 0; bottom: 0; top: 0; display: block; }
.parts.is-anchored li { position: absolute; left: 0; top: 0; opacity: 0; white-space: nowrap; grid-template-columns: auto; gap: 4px; padding: 6px 0; transition: opacity 0.2s; }
.parts.is-anchored li::after { content: ''; display: block; width: 1px; height: 26px; background: var(--hairline); margin: 0 auto; }
.parts.is-anchored li span { display: block; text-align: center; }

/* Service pages */
.service-page main { padding-top: calc(var(--header) + 40px); }
.service-hero { position: relative; padding: 40px var(--gutter) 90px; overflow: hidden; }
.service-hero .back { margin-bottom: 40px; }
.service-hero .kicker { display: block; margin-bottom: 20px; }
.service-hero h1 { font-size: clamp(32px, 4.4vw, 64px); max-width: 980px; }
.service-hero .lead { font-size: 20px; color: var(--ink-muted); max-width: 760px; margin: 28px 0 34px; }
.service-hero .big-word { right: var(--gutter); bottom: -0.1em; }
.service-body { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; padding: 56px var(--gutter) 90px; border-top: 1px dashed var(--hairline); }
.service-body h2 { color: var(--ink-muted); margin-bottom: 18px; }
.service-body ul { margin: 0; padding: 0; list-style: none; }
.service-body li { padding: 12px 0; border-top: 1px solid var(--hairline); font-size: 15px; color: var(--ink); }
.service-more { padding: 56px var(--gutter) 90px; border-top: 1px dashed var(--hairline); }
.service-more .service-list { margin-top: 28px; }
.service-more .service-list a { grid-template-columns: 70px 1fr 28px; }
.languages-links { gap: 10px; }
.languages-links a { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; color: var(--ink-muted); padding: 6px 0; border-bottom: 1px solid transparent; }
.languages-links a:hover { color: var(--ink); }
.languages-links a[aria-current] { color: var(--ink); border-bottom-color: var(--ink); }

/* Responsive staging */
/* Kazakh nav labels are long: give the header more room before falling back to the menu. */
@media (max-width: 1280px) {
  :lang(kk) .site-nav { display: none; }
  :lang(kk) .menu-button { display: flex; }
}
@media (max-width: 1150px) {
  .site-nav { display: none; }
  .menu-button { display: flex; } /* the menu stands in for the nav on tablets too */
  .pill-link { display: none; }
  .corner-br { display: none; }
}
@media (max-width: 760px) {
  .hero-wordmark { font-size: clamp(64px, 20vw, 96px); top: calc(var(--header) + 4px); }
  .panel-hero .corner-tl { display: none; }
  .drag-hint { bottom: auto; top: calc(var(--header) + 112px); }
  .corner-tl { top: calc(var(--header) + 10px); }
  .hero-copy { left: var(--gutter); right: var(--gutter); bottom: 20px; width: auto; max-width: none; }
  .hero-copy h1 { font-size: 28px; }
  .hero-copy p { display: none; }
  .hero-copy .actions { gap: 10px 24px; }
  .panel-scene { align-items: flex-start; padding: calc(var(--header) + 4px) var(--gutter) 20px; }
  .panel-scene .copy { width: 100%; max-width: 480px; }
  .panel-scene h2 { font-size: 26px; margin: 10px 0; }
  .panel-scene .copy > p { font-size: 14px; margin-bottom: 14px; }
  /* the secondary link wrapped onto the instrument on every language; the catalogue is one tap away in the menu and the rail */
  .panel-scene .text-link { display: none; }
  .panel-scene .actions { gap: 12px 20px; }
  .documents { left: var(--gutter); right: var(--gutter); top: auto; bottom: 12px; transform: none; width: auto; max-width: none; height: 44%; }
  .paper { display: none; }
  .sheet { width: 236px; }
  .documents { height: 34%; }
  .cal th { font-size: 9px; }
  .note { margin-bottom: 12px; }
  .readout { left: var(--gutter); right: var(--gutter); bottom: 14px; width: auto; max-width: none; }
  .readout-row b { font-size: 20px; }
  .cal { font-size: 11px; margin: 2px 0 4px; }
  .cal button { padding: 8px 0; }
  .tags { gap: 6px; margin-bottom: 18px; }
  .tags li { padding: 8px 12px; }
  .parts { left: var(--gutter); bottom: 20px; gap: 8px; font-size: 10px; }
  .big-word { font-size: 120px; }
  :lang(kk) .big-word, :lang(en) .big-word { font-size: 96px; }
  .rail { overflow-x: auto; scrollbar-width: none; }
  .rail a { flex: 0 0 auto; min-width: 128px; }
  .scene-controls { top: calc(var(--header) + 8px); }
  .section { padding: 64px var(--gutter); }
  .service-body { grid-template-columns: 1fr; gap: 28px; padding: 40px var(--gutter) 60px; }
  .service-hero { padding: 10px var(--gutter) 60px; }
  .service-hero .lead { font-size: 17px; }
  .section-head, .about, .contact { grid-template-columns: 1fr; gap: 28px; }
  .section-head .lead { justify-self: start; }
  .services-track { height: 220svh; }
  .rail-card { flex-basis: 78vw; }
  .rail-card a { height: 52svh; padding: 20px; }
  .ride { border-radius: 20px 20px 0 0; margin-top: -20px; }
  .pair, .pair.triple { grid-template-columns: 1fr; }
  .facts div { grid-template-columns: 1fr; gap: 6px; }
}

/* Touch: every control at least 44px tall; the table rows grow instead of shrinking the type. */
@media (pointer: coarse) {
  .languages { gap: 0; }
  .languages button { min-width: 44px; min-height: 44px; padding: 0 8px; }
  .icon-button { width: 44px; height: 44px; }
  .menu-button { gap: 6px; }
  .site-nav a { padding: 14px 0; }
  .cal button { min-height: 44px; padding: 0; }
  .consent input { width: 22px; height: 22px; margin-top: 0; }
  .service-list a > span:first-child { align-self: center; }
}

/* Accessibility preferences */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  .scene { opacity: 1; }
}
@media (prefers-reduced-transparency: reduce) {
  .rail { background: var(--canvas); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .icon-button { background: var(--canvas-2); }
  .big-word, .stage::after { display: none; }
  .hero-wordmark { text-shadow: none; }
}
@media (prefers-contrast: more) {
  :root { --ink-muted: #c3ccd0; --ink-dim: #8c989d; --hairline: #3a474e; }
  .big-word { display: none; }
  .tags li, .pill-link, .icon-button { border-color: var(--ink-dim); }
}

/* ---- Campus / NU STEP: picture with scroll parallax beside the copy; spans the about grid. */
.campus { grid-column: 1 / -1; margin: 0; display: grid; grid-template-columns: 7fr 5fr; gap: 40px 64px; align-items: center; padding-top: 56px; border-top: 1px dashed var(--hairline); }
.campus-frame { position: relative; overflow: hidden; border-radius: 16px; aspect-ratio: 16 / 10; background: var(--canvas); isolation: isolate; }
.campus-frame img { position: absolute; left: 0; top: -8%; width: 100%; height: 116%; object-fit: cover; filter: saturate(0.7) contrast(1.05) brightness(0.86); }
.campus-frame::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, #0c0f1100 45%, #0c0f11b8 100%); }
.campus-frame::before { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit; border: 1px solid #ffffff1f; }
.campus-badge { position: absolute; left: 20px; bottom: 20px; z-index: 3; padding: 9px 14px; border-radius: 999px; border: 1px solid #ffffff2e; background: #0c0f1199; color: var(--ink); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.campus-badge::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--signal); margin-right: 10px; vertical-align: 1px; box-shadow: 0 0 10px var(--signal); }
.campus-copy { margin: 0; }
.campus + .about-media { margin-top: 0; }
.campus-copy h3 { font-size: clamp(28px, 2.7vw, 40px); line-height: 1.05; letter-spacing: -0.01em; margin: 16px 0 20px; }
.campus-copy p { font-size: 17px; color: var(--ink-muted); max-width: 46ch; }
.campus-facts { margin: 28px 0 0; padding-top: 20px; border-top: 1px dashed var(--hairline); display: grid; gap: 12px; }
.campus-facts div { display: grid; grid-template-columns: 120px 1fr; gap: 20px; }
.campus-facts dt { color: var(--ink-dim); }
.campus-facts dd { margin: 0; }
.foot-link { color: var(--ink-muted); text-decoration: none; border-bottom: 1px solid var(--hairline); padding-bottom: 2px; transition: color 0.25s, border-color 0.25s; }
.foot-link:hover { color: var(--ink); border-color: var(--ink-dim); }

/* ---- After-story motion: reveals on entry, scroll parallax inside frames, pointer tilt on cards.
   Gated on html.js so content never hides without the script; disabled under prefers-reduced-motion. */
.js .reveal > * { opacity: 0; transform: translate3d(0, 28px, 0); transition: opacity 0.9s cubic-bezier(0.23, 1, 0.32, 1), transform 1s cubic-bezier(0.23, 1, 0.32, 1); }
.js .reveal.is-in > * { opacity: 1; transform: none; }
.js .reveal .mask > h2, .js .reveal .mask > h3 { transform: translate3d(0, 112%, 0); transition: transform 1.1s cubic-bezier(0.23, 1, 0.32, 1) 0.05s; }
.js .reveal.is-in .mask > h2, .js .reveal.is-in .mask > h3 { transform: none; }
.js .enquiry.reveal > * { transition-duration: 0.7s, 0.8s; }
[data-parallax] img { transform: translate3d(0, calc(var(--py, 0) * 7%), 0); }
.frame[data-parallax] img { position: absolute; left: 0; top: -7%; height: 114%; }
.campus-frame[data-parallax] img { transform: translate3d(0, calc(var(--py, 0) * 8%), 0); }
.tilt { transform: perspective(900px) rotateX(calc(var(--ty, 0) * -3.5deg)) rotateY(calc(var(--tx, 0) * 4.5deg)) translateY(calc(var(--lift, 0) * -4px)); transition: transform 0.55s cubic-bezier(0.23, 1, 0.32, 1), border-color 0.25s; }
.rail-card a.tilt:hover { --lift: 1; transform: perspective(900px) rotateX(calc(var(--ty, 0) * -3.5deg)) rotateY(calc(var(--tx, 0) * 4.5deg)) translateY(-4px); }
.frame.tilt { transform-style: preserve-3d; }
@media (max-width: 1150px) {
  .campus { grid-template-columns: 1fr; gap: 28px; padding-top: 44px; }
  .campus-frame { aspect-ratio: 16 / 10; }
}
@media (max-width: 760px) {
  .campus { gap: 22px; padding-top: 36px; }
  .campus-frame { aspect-ratio: 4 / 3; border-radius: 12px; }
  .campus-badge { left: 14px; bottom: 14px; padding: 8px 12px; }
  .campus-copy h3 { font-size: 26px; margin: 12px 0 14px; }
  .campus-copy p { font-size: 15px; }
  .campus-facts div { grid-template-columns: 1fr; gap: 6px; }
  .js .reveal > * { transform: translate3d(0, 18px, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .js .reveal > *, .js .reveal .mask > h2, .js .reveal .mask > h3 { opacity: 1; transform: none; }
  [data-parallax] img, .campus-frame[data-parallax] img { transform: none; }
  .tilt, .rail-card a.tilt:hover { transform: none; }
}

/* ---- Virtual tour: a sticky viewport; each stop wipes in under the scroll with the picture lagging behind the edge,
   the previous one pushes in and dims. Video stops play while they hold. Captions are driven by distance to the stop (--cin). */
.tour { position: relative; z-index: 2; background: var(--canvas); border-top: 1px dashed var(--hairline); }
.tour-intro { padding: 110px var(--gutter) 56px; }
.tour-intro h2 { font-size: clamp(30px, 3.4vw, 48px); margin-top: 24px; }
.tour-track { height: 900svh; }
.tour-sticky { position: sticky; top: 0; height: 100svh; overflow: hidden; background: var(--canvas); }
.tour-stops { position: absolute; inset: 0; }
.tour-stop { position: absolute; inset: 0; margin: 0; visibility: hidden; overflow: hidden; }
.tour-stop::after { content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: linear-gradient(180deg, #0c0f11b3 0%, #0c0f1100 24%, #0c0f1100 52%, #0c0f11d9 100%); }
.tour-media { position: absolute; inset: 0; background-size: cover; background-position: center; background-color: var(--canvas-2); transform-origin: 50% 50%; will-change: transform; }
.tour-media img, .tour-media video { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(0.82) contrast(1.08) brightness(0.96); }
.tour-bg { position: absolute; inset: -6%; }
.tour-bg img { width: 100%; height: 100%; object-fit: cover; filter: blur(16px) brightness(0.4) saturate(0.55); }
.tour-stop.is-tall .tour-media { background-image: none !important; background-color: transparent; display: grid; place-items: center; }
.tour-stop.is-tall .tour-media > * { height: 86%; width: calc(86svh * var(--ar, 0.5472)); max-width: 92vw; object-fit: cover; border-radius: 18px; box-shadow: 0 40px 90px #00000099, 0 0 0 1px #ffffff1a; filter: saturate(0.8) contrast(1.03) brightness(0.96); }
.tour-shade { position: absolute; inset: 0; z-index: 2; background: var(--canvas); opacity: var(--shade, 0); pointer-events: none; }
.tour-head { position: absolute; left: var(--gutter); right: var(--gutter); top: calc(var(--header) + 12px); z-index: 20; display: flex; justify-content: space-between; color: var(--ink-muted); text-shadow: 0 1px 14px #0c0f11, 0 0 2px #0c0f11; }
.tour-kicker i { font-style: normal; color: var(--signal); font-size: 8px; vertical-align: 2px; margin-right: 6px; animation: tourPulse 2.4s ease-in-out infinite; }
@keyframes tourPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.tour-count b { color: var(--ink); font-weight: 500; }
.tour-caption { position: absolute; left: var(--gutter); bottom: 84px; z-index: 20; max-width: 600px; --c: var(--cin, 1); text-shadow: 0 2px 18px #0c0f11, 0 0 2px #0c0f11; }
.tour-num { display: block; color: var(--signal); margin-bottom: 12px; opacity: var(--c); }
.tour-caption h3 { font-size: clamp(30px, 3.4vw, 50px); line-height: 1.02; letter-spacing: -0.012em; transform: translate3d(0, calc((1 - var(--c)) * 112%), 0); }
.tour-caption p { margin-top: 12px; color: var(--ink-muted); font-size: 16px; opacity: var(--c); transform: translate3d(0, calc((1 - var(--c)) * 12px), 0); }
.tour-thumbs { position: absolute; right: calc(var(--gutter) - 4px); top: 50%; transform: translateY(-50%); z-index: 20; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.tour-thumbs button { width: 44px; height: 32px; padding: 0; border: 1px solid #ffffff2b; border-radius: 6px; overflow: hidden; background: var(--canvas-2); opacity: 0.5; cursor: pointer; transition: opacity 0.3s, transform 0.4s cubic-bezier(0.23, 1, 0.32, 1), border-color 0.3s; }
.tour-thumbs button img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tour-thumbs button:hover { opacity: 0.9; }
.tour-thumbs button[aria-current="true"] { opacity: 1; border-color: var(--signal); transform: translateX(-6px); }
.tour-progress { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 48px; height: 1px; background: #ffffff24; z-index: 20; }
.tour-progress b { display: block; height: 100%; background: var(--signal); transform-origin: left; transform: scaleX(0); }
.tour-hint { position: absolute; right: var(--gutter); bottom: 20px; z-index: 20; color: var(--ink-dim); opacity: calc(1 - var(--tp, 0) * 4); }
/* team as its own ride section */
.team-section { background: var(--canvas-2); }
.team-section .media-head { margin-bottom: 36px; }
/* form hand-off buttons and direct links */
.form-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.button-ghost { background: transparent; color: var(--ink); border-color: var(--hairline); }
.button-ghost::after { content: '→'; }
.button-ghost:hover { background: var(--canvas-2); border-color: var(--ink-dim); }
.contact-direct { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 28px; padding-top: 20px; border-top: 1px dashed var(--hairline); color: var(--ink-dim); }
.contact-direct a { color: var(--ink); border-bottom: 1px solid var(--hairline); padding-bottom: 2px; transition: border-color 0.25s, color 0.25s; }
.contact-direct a:hover { border-color: var(--signal); color: var(--signal); }
@media (max-width: 1150px) {
  .tour-thumbs { display: none; }
}
@media (max-width: 760px) {
  .tour-intro { padding: 64px var(--gutter) 36px; }
  .tour-track { height: 760svh; }
  .tour-stop.is-tall .tour-media > * { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; box-shadow: none; }
  .tour-bg { display: none; }
  .tour-stop::after { background: linear-gradient(180deg, #0c0f11bf 0%, #0c0f1100 26%, #0c0f1100 50%, #0c0f11e6 100%); }
  .tour-head { top: calc(var(--header) + 2px); }
  .tour-caption { bottom: 64px; right: var(--gutter); max-width: none; }
  .tour-caption h3 { font-size: 26px; }
  .tour-caption p { font-size: 14px; }
  .tour-progress { bottom: 40px; }
  .tour-hint { bottom: 14px; }
  .form-actions .button { flex: 1 1 auto; justify-content: space-between; }
}
@media (prefers-reduced-motion: reduce) {
  .tour-kicker i { animation: none; }
  .tour-thumbs button { transition: none; }
}