/* Virtuo studio page (/{lang}/studio/) — "Beyond the frame". Light sky palette of the tour list, one accent (Virtuo blue), editorial type.
   Motion is CSS transforms/opacity driven by classes and a few CSS variables set from studio.js; everything reads
   complete without JS and with prefers-reduced-motion. */

/* Type: two families, both SIL OFL 1.1 (licences in fonts/studio/).
   'Virtuo Sans'  = Geologica (Latin + Cyrillic, wght 100-900, SHRP axis) + Google Sans Georgian (wght 400-700).
   'Virtuo Serif' = Noto Serif Display (Latin + Cyrillic, upright + true italic) + Noto Serif Georgian.
   Georgian has no italic: its italic face points at the upright file so the browser never fakes a slant.
   Subsets load only when a page uses those characters (unicode-range). Geologica's default weight is 100 —
   always set an explicit weight. */
@font-face { font-family: 'Virtuo Sans'; font-style: normal; font-weight: 100 900; font-display: swap;
	src: url(../fonts/studio/geologica-cyrillic-ext.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: 'Virtuo Sans'; font-style: normal; font-weight: 100 900; font-display: swap;
	src: url(../fonts/studio/geologica-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Virtuo Sans'; font-style: normal; font-weight: 100 900; font-display: swap;
	src: url(../fonts/studio/geologica-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Virtuo Sans'; font-style: normal; font-weight: 100 900; font-display: swap;
	src: url(../fonts/studio/geologica-latin.woff2) format('woff2'); 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: 'Virtuo Sans'; font-style: normal; font-weight: 400 700; font-display: swap;
	src: url(../fonts/studio/googlesans-georgian.woff2) format('woff2'); unicode-range: U+0589, U+10A0-10FF, U+1C90-1CBA, U+1CBD-1CBF, U+205A, U+2D00-2D2F, U+2E31; }
@font-face { font-family: 'Virtuo Serif'; font-style: normal; font-weight: 100 900; font-stretch: 62.5% 100%; font-display: swap;
	src: url(../fonts/studio/notoserifgeo-georgian.woff2) format('woff2'); unicode-range: U+0589, U+10A0-10FF, U+1C90-1CBA, U+1CBD-1CBF, U+205A, U+2D00-2D2F, U+2E31; }
@font-face { font-family: 'Virtuo Serif'; font-style: italic; font-weight: 100 900; font-stretch: 62.5% 100%; font-display: swap;
	src: url(../fonts/studio/notoserifgeo-georgian.woff2) format('woff2'); unicode-range: U+0589, U+10A0-10FF, U+1C90-1CBA, U+1CBD-1CBF, U+205A, U+2D00-2D2F, U+2E31; }
@font-face { font-family: 'Virtuo Serif'; font-style: italic; font-weight: 100 900; font-display: swap;
	src: url(../fonts/studio/notoserifdisplay-cyrillic-ext-italic.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: 'Virtuo Serif'; font-style: italic; font-weight: 100 900; font-display: swap;
	src: url(../fonts/studio/notoserifdisplay-cyrillic-italic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Virtuo Serif'; font-style: italic; font-weight: 100 900; font-display: swap;
	src: url(../fonts/studio/notoserifdisplay-latin-ext-italic.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Virtuo Serif'; font-style: italic; font-weight: 100 900; font-display: swap;
	src: url(../fonts/studio/notoserifdisplay-latin-italic.woff2) format('woff2'); 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: 'Virtuo Serif'; font-style: normal; font-weight: 100 900; font-display: swap;
	src: url(../fonts/studio/notoserifdisplay-cyrillic-ext.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: 'Virtuo Serif'; font-style: normal; font-weight: 100 900; font-display: swap;
	src: url(../fonts/studio/notoserifdisplay-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Virtuo Serif'; font-style: normal; font-weight: 100 900; font-display: swap;
	src: url(../fonts/studio/notoserifdisplay-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Virtuo Serif'; font-style: normal; font-weight: 100 900; font-display: swap;
	src: url(../fonts/studio/notoserifdisplay-latin.woff2) format('woff2'); 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; }

:root {
	--bg: #EEF6FF; --bg2: #FFFFFF; --bg3: #E2EEFB; --line: rgba(11, 24, 48, .1); --line2: rgba(11, 24, 48, .2);
	--fg: #0B1830; --fg2: #2A3C5C; --mute: #4A5D7C; --dim: #687A97;
	--acc: #0A8FD6; --acc-ink: #FFFFFF; --acc-soft: rgba(10, 143, 214, .1); --glass: rgba(255, 255, 255, .72);
	--f-sans: 'Virtuo Sans', system-ui, -apple-system, 'Segoe UI', 'Sylfaen', sans-serif;
	--f-serif: 'Virtuo Serif', Georgia, 'Times New Roman', 'Sylfaen', serif;
	--display: var(--f-sans); --body: var(--f-sans);
	/* weights per role; language blocks retune them */
	--w-body: 380; --w-ui: 500; --w-head: 620; --w-hero: 650; --w-xl: 300; --w-serif: 340; --w-accent: 400;
	--track-micro: .2em; --lh-body: 1.6;
	--gut: clamp(16px, 4.5vw, 64px); --max: 1360px;
	--ease: cubic-bezier(.2, .7, .1, 1); --ease-io: cubic-bezier(.65, 0, .35, 1);
	color-scheme: light;
}
/* the sky lives on <html> (the canvas background) so the fixed dot field (.st-field, z-index -1) shows above it */
html { background: radial-gradient(110% 70% at 85% 0%, #CFE8FF, transparent 62%) fixed, linear-gradient(180deg, #F4F9FF, var(--bg) 60%) fixed var(--bg) !important; scroll-behavior: smooth; scroll-padding-top: 80px; }
body { margin: 0; background: transparent !important; color: var(--fg); font-family: var(--body); font-weight: var(--w-body); font-size: 16px; line-height: var(--lh-body);
	-webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; }
.st *, .st *::before, .st *::after { box-sizing: border-box; }
.st { position: relative; overflow-x: clip; }
.st img { display: block; max-width: 100%; }
.st a { color: inherit; }
.st svg { width: 1.15em; height: 1.15em; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.st :focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; border-radius: 4px; }
.st-skip { position: fixed; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; background: var(--acc); color: var(--acc-ink) !important; border-radius: 8px; font-weight: 600; text-decoration: none; }
.st-skip:focus { top: 12px; }

/* ---------- type ---------- */
.st-kicker { margin: 0 0 18px; font: 500 12px/1.4 var(--display); letter-spacing: .22em; text-transform: uppercase; color: var(--mute); display: flex; align-items: center; gap: 12px; }
.st-kicker::before { content: ""; width: 28px; height: 1px; background: var(--acc); flex: none; }
.st-h1 { margin: 0; font: 600 clamp(44px, 9.2vw, 152px)/.92 var(--display); letter-spacing: -.035em; text-transform: uppercase; }
html[lang="geo"] .st-h1, html[lang="rus"] .st-h1 { font-size: clamp(36px, 7vw, 116px); line-height: 1; letter-spacing: -.02em; }
.st-h2 { margin: 0 0 20px; font: 600 clamp(32px, 4.6vw, 68px)/1.02 var(--display); letter-spacing: -.025em; }
.st-h2-xl { font-size: clamp(40px, 7vw, 112px); letter-spacing: -.035em; line-height: .96; }
html[lang="geo"] .st-h2, html[lang="rus"] .st-h2 { letter-spacing: -.01em; line-height: 1.1; }
html[lang="geo"] .st-h2-xl, html[lang="rus"] .st-h2-xl { font-size: clamp(34px, 5.4vw, 84px); }
.st-h3 { margin: 0 0 14px; font: 600 clamp(24px, 2.6vw, 38px)/1.1 var(--display); letter-spacing: -.02em; }
.st-lead { font-size: clamp(17px, 1.45vw, 21px); line-height: 1.55; color: var(--fg2); max-width: 36em; }
.st-sub { color: var(--mute); font-size: 17px; max-width: 40em; margin: 0; }
.st-mini { font: 500 11px/1.4 var(--display); letter-spacing: .2em; text-transform: uppercase; color: var(--dim); margin: 0 0 10px; }
.st-cap { font-size: 13px; color: var(--dim); margin: 14px 0 0; }
.st-cap a { text-decoration: none; border-bottom: 1px solid var(--line2); }
.st-cap a:hover { color: var(--fg); border-color: var(--acc); }

/* ---------- buttons ---------- */
.st-btn { --mx: 0px; --my: 0px; position: relative; display: inline-flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 26px;
	border: 1px solid var(--line2); border-radius: 999px; background: transparent; color: var(--fg); font: 500 15px/1 var(--display); letter-spacing: .02em;
	text-decoration: none; cursor: pointer; overflow: hidden; isolation: isolate; transform: translate(var(--mx), var(--my));
	transition: transform .5s var(--ease), border-color .3s, color .3s, background .3s; }
.st-btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--fg); transform: translateY(101%); transition: transform .5s var(--ease); border-radius: inherit; }
.st-btn:hover::before, .st-btn:focus-visible::before { transform: none; }
.st-btn:hover, .st-btn:focus-visible { color: var(--bg); border-color: var(--fg); }
.st-btn svg { transition: transform .4s var(--ease); }
.st-btn:hover svg { transform: translateX(4px); }
.st-btn-main { background: var(--acc); border-color: var(--acc); color: var(--acc-ink); font-weight: 600; }
.st-btn-main::before { background: var(--fg); }
.st-btn-ghost { background: rgba(255, 255, 255, .55); backdrop-filter: blur(6px); }
.st-btn-sm { min-height: 40px; padding: 0 18px; font-size: 13px; }

/* ---------- header + menu ---------- */
.st-top { position: fixed; inset: 0 0 auto; z-index: 50; display: flex; align-items: center; gap: 24px; height: 72px; padding: 0 var(--gut);
	transition: background .4s, border-color .4s, transform .5s var(--ease); border-bottom: 1px solid transparent; }
.st-top.is-solid { background: rgba(244, 249, 255, .84); backdrop-filter: blur(14px) saturate(1.2); border-color: var(--line); }
.st-top.is-hidden { transform: translateY(-100%); }
.st-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font: 700 17px/1 var(--display); letter-spacing: .28em; }
.st-nav { display: flex; gap: 4px; margin-left: auto; }
.st-nav a { position: relative; padding: 10px 12px; font: 500 14px/1 var(--display); color: var(--fg2); text-decoration: none; }
.st-nav a::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 1px; background: var(--acc); transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease); }
.st-nav a:hover { color: var(--fg); }
.st-nav a:hover::after, .st-nav a.on::after { transform: scaleX(1); transform-origin: left; }
.st-top-r { display: flex; align-items: center; gap: 14px; }
.st-langs { display: flex; gap: 2px; }
.st-langs a { padding: 6px 7px; font: 600 11px/1 var(--display); letter-spacing: .12em; color: var(--dim); text-decoration: none; border-radius: 6px; }
.st-langs a[aria-current], .st-langs a:hover { color: var(--fg); }
.st-burger { display: none; align-items: center; gap: 10px; height: 40px; padding: 0 14px; border: 1px solid var(--line2); border-radius: 999px; background: none; color: var(--fg); font: 500 13px/1 var(--display); cursor: pointer; }
.st-burger-l { display: grid; gap: 5px; width: 18px; }
.st-burger-l i { height: 1.5px; background: currentColor; border-radius: 2px; transition: transform .4s var(--ease); }
.st-burger-l i:last-child { width: 60%; justify-self: end; }

.st-menu { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; padding: 96px var(--gut) 32px; background: var(--bg); overflow-y: auto; }
.st-menu[hidden] { display: none; }
.st-menu-bg { position: absolute; inset: 0; z-index: -1; opacity: .22; }
.st-menu-bg img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.6); }
.st-menu-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--bg) 30%, transparent); }
.st-menu-x { position: absolute; top: 16px; right: var(--gut); display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border: 1px solid var(--line2); border-radius: 999px; background: none; color: var(--fg); font: 500 13px var(--display); cursor: pointer; }
.st-menu-nav { display: flex; flex-direction: column; margin: auto 0; }
.st-menu-nav a { display: flex; align-items: baseline; gap: 18px; padding: 6px 0; font: 600 clamp(36px, 7vw, 84px)/1.05 var(--display); letter-spacing: -.03em; text-decoration: none; color: var(--fg);
	opacity: 0; transform: translateY(24px); transition: opacity .6s var(--ease), transform .6s var(--ease), color .3s; transition-delay: calc(var(--i) * 45ms); }
.st-menu-nav a small { font-size: 12px; letter-spacing: .2em; color: var(--acc); font-weight: 500; }
.st-menu-nav a:hover { color: var(--acc); }
.st-menu.is-open .st-menu-nav a { opacity: 1; transform: none; }
.st-menu-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; margin-top: 32px; }
.st-menu-mail { color: var(--mute); text-decoration: none; }

/* ---------- hero ---------- */
.st-hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: flex-end; padding: 120px var(--gut) clamp(72px, 12vh, 140px); overflow: hidden; isolation: isolate; --p: 0; --px: 0; --py: 0; }
.st-hero-media { position: absolute; inset: -4%; z-index: -1; transform: translate3d(calc(var(--px) * -14px), calc(var(--py) * -10px + var(--p) * 90px), 0) scale(calc(1.06 + var(--p) * .12)); will-change: transform; }
.st-hero-img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.st-hero-light { position: absolute; inset: 0; background: radial-gradient(60% 50% at 72% 18%, rgba(255, 214, 160, .28), transparent 70%); mix-blend-mode: screen; }
.st-hero-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(238, 246, 255, .45) 0%, rgba(238, 246, 255, 0) 28%, rgba(238, 246, 255, .2) 64%, var(--bg) 100%),
	linear-gradient(90deg, rgba(238, 246, 255, .94) 0%, rgba(238, 246, 255, .72) 34%, rgba(238, 246, 255, 0) 64%); opacity: calc(1 - var(--p) * .2); }
.st-hero-in { position: relative; width: 100%; max-width: var(--max); margin: 0 auto; transform: translate3d(0, calc(var(--p) * -60px), 0); opacity: calc(1 - var(--p) * 1.4); }
.st-hero .st-h1 { transform-origin: 0 100%; transform: scale(calc(1 - var(--p) * .08)); }
.st-line { display: block; overflow: hidden; padding-bottom: .04em; }
.st-line > span { display: block; }
.st-hero-lead { margin: 28px 0 36px; }
.st-hero-cta { display: flex; flex-wrap: wrap; gap: 14px; }
.st-credit { position: absolute; right: var(--gut); bottom: 28px; margin: 0; font-size: 12px; color: rgba(255, 255, 255, .8); text-shadow: 0 1px 6px rgba(11, 24, 48, .5); writing-mode: vertical-rl; transform: rotate(180deg); letter-spacing: .08em; }
.st-scroll { position: absolute; left: 50%; bottom: 22px; display: flex; flex-direction: column; align-items: center; gap: 10px; transform: translateX(-50%); font: 500 10px var(--display); letter-spacing: .3em; text-transform: uppercase; color: var(--mute); text-decoration: none; }
.st-scroll i { width: 1px; height: 44px; background: linear-gradient(var(--acc), transparent); transform-origin: top; animation: stDrip 2.4s var(--ease-io) infinite; }
@keyframes stDrip { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* opening sequence (only with JS: without it everything is simply visible) */
.st-js .st-hero-media { opacity: 0; filter: brightness(1.6) saturate(.4); transition: opacity 1.6s var(--ease), filter 2.6s var(--ease); }
.st-js .st-hero-light { opacity: 0; transition: opacity 3s ease 1s; }
.st-js .st-hero-k, .st-js .st-hero-lead, .st-js .st-hero-cta, .st-js .st-top { opacity: 0; transform: translateY(14px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.st-js .st-line > span { transform: translateY(105%); transition: transform 1.2s var(--ease); transition-delay: calc(.55s + var(--i) * .14s); }
.st-js.st-ready .st-hero-media { opacity: 1; filter: none; }
.st-js.st-ready .st-hero-light { opacity: 1; }
.st-js.st-ready .st-line > span { transform: none; }
.st-hero-k, .st-hero-lead { text-shadow: 0 1px 12px rgba(238, 246, 255, .9), 0 0 2px rgba(238, 246, 255, .8); }
.st-js.st-ready .st-hero-k { opacity: 1; transform: none; transition-delay: .35s; }
.st-js.st-ready .st-hero-lead { opacity: 1; transform: none; transition-delay: 1s; }
.st-js.st-ready .st-hero-cta { opacity: 1; transform: none; transition-delay: 1.15s; }
.st-js.st-ready .st-top { opacity: 1; transform: none; transition-delay: .2s; }
.st-js.st-ready .st-top.is-hidden { transform: translateY(-100%); transition-delay: 0s; }

/* ---------- generic reveal ---------- */
.st-js .st-rv { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: calc(var(--i, 0) * 70ms); }
.st-js .st-rv.in { opacity: 1; transform: none; }
/* (not clip-path: a fully clipped target never intersects, so the observer would never reveal it) */
.st-js .st-rv-type { transform: translateY(40px); filter: blur(6px); transition: opacity 1.4s var(--ease), transform 1.6s var(--ease), filter 1.4s var(--ease); }
.st-js .st-rv-type.in { transform: none; filter: none; }

/* ---------- manifesto ---------- */
.st-manifesto { max-width: calc(var(--max) + 2 * var(--gut)); margin: 0 auto; padding: clamp(80px, 12vw, 180px) var(--gut) clamp(40px, 6vw, 90px); }
.st-man-t { margin: 0; font: 500 clamp(26px, 3.6vw, 54px)/1.18 var(--display); letter-spacing: -.02em; max-width: 22em; }
html[lang="geo"] .st-man-t { font-size: clamp(22px, 2.8vw, 42px); line-height: 1.35; }

/* ---------- service chapters ---------- */
.st-services { padding: clamp(72px, 10vw, 150px) 0 40px; }
.st-sec-k { max-width: var(--max); margin: 0 auto 40px; padding: 0 var(--gut); }
.st-ch { display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(28px, 5vw, 80px); align-items: center; max-width: calc(var(--max) + 2 * var(--gut)); margin: 0 auto; padding: clamp(56px, 9vw, 130px) var(--gut); }
.st-ch-inside, .st-ch-moment { grid-template-columns: 1fr 1.25fr; }   /* text | media */
/* order on the page: 01 tours (text | door) · 02 drone (media | text) · 03 events (text | frames) · 04 web (browser | text) */
.st-ch-web { grid-template-columns: 1.25fr 1fr; }
.st-ch-go { margin: 24px 0 0; }
.st-ch-n { display: flex; align-items: baseline; gap: 14px; margin: 0 0 14px; font: 500 13px/1 var(--display); letter-spacing: .2em; text-transform: uppercase; color: var(--mute); }
.st-ch-n span { font-size: 15px; color: var(--acc); letter-spacing: .1em; }
.st-ch-line { margin: 0 0 16px; font: 500 clamp(20px, 1.8vw, 26px)/1.3 var(--display); color: var(--fg); }
.st-ch-p { color: var(--fg2); margin: 0 0 22px; max-width: 34em; }
.st-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.st-tags li { padding: 7px 13px; border: 1px solid var(--line); border-radius: 999px; font-size: 13px; color: var(--fg2); }

/* chapter 1: aerial with a scroll-driven "camera" and a decorative altitude scale (not telemetry) */
.st-ch-media { position: relative; overflow: hidden; border-radius: 4px; aspect-ratio: 16 / 11; --cp: 0; }
.st-ch-media img { width: 100%; height: 100%; object-fit: cover; transform: scale(calc(1.28 - var(--cp) * .26)) translateY(calc((var(--cp) - .5) * -4%)); transition: transform .1s linear; will-change: transform; }
.st-js .st-ch-media { clip-path: inset(12% 0 12% 0); transition: clip-path 1.4s var(--ease); }
.st-js .st-ch-media.in { clip-path: inset(0); }
.st-alt { position: absolute; right: 18px; top: 10%; bottom: 10%; width: 34px; display: flex; flex-direction: column; align-items: center; pointer-events: none; }
.st-alt-scale { flex: 1; width: 10px; background: repeating-linear-gradient(180deg, rgba(242, 242, 240, .55) 0 1px, transparent 1px 12px); mask: linear-gradient(transparent, #000 20%, #000 80%, transparent); }
.st-alt-mark { position: absolute; left: -6px; right: -6px; top: calc((1 - var(--cp)) * 86% + 4%); height: 2px; background: var(--acc); box-shadow: 0 0 12px var(--acc); }
.st-alt b { font: 600 10px var(--display); letter-spacing: .2em; color: rgba(242, 242, 240, .7); margin-top: 8px; }

/* chapter 2: the doorway into the live tour */
.st-door { margin: 0; }
.st-door-frame { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 4px; background: var(--bg2); }
.st-door-frame > img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease), filter 1.2s var(--ease); }
.st-door-frame:hover > img { transform: scale(1.04); }
.st-door-go { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 14px; padding: 16px 26px 16px 20px; border: 1px solid rgba(255, 255, 255, .85); border-radius: 999px;
	background: var(--glass); backdrop-filter: blur(10px); color: var(--fg); font: 600 16px/1.2 var(--display); text-align: left; cursor: pointer; transition: background .3s, border-color .3s; }
.st-door-go svg { width: 28px; height: 28px; color: var(--acc); }
.st-door-go small { display: block; font: 400 12px var(--body); color: var(--mute); margin-top: 3px; }
.st-door-go:hover { background: rgba(255, 255, 255, .92); border-color: var(--acc); }
.st-door-ring { position: absolute; inset: -10px; border-radius: inherit; border: 1px solid var(--acc); opacity: 0; animation: stRing 2.8s var(--ease) infinite; pointer-events: none; }
@keyframes stRing { 0% { opacity: .7; transform: scale(.94); } 100% { opacity: 0; transform: scale(1.12); } }
.st-door.is-open .st-door-frame > img { transform: scale(1.6); filter: blur(10px) brightness(.4); }
.st-door.is-open .st-door-go { display: none; }
.st-door iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; opacity: 0; transition: opacity .8s var(--ease) .2s; }
.st-door iframe.ready { opacity: 1; }
.st-door-x { position: absolute; top: 12px; right: 12px; z-index: 2; display: flex; align-items: center; gap: 6px; padding: 8px 12px; border: 0; border-radius: 999px; background: var(--glass); color: var(--fg); font: 500 12px var(--display); cursor: pointer; }
.st-door-x[hidden] { display: none; }

/* chapter 3: staggered frames */
.st-frames { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: clamp(70px, 8vw, 120px); gap: 10px; }
.st-frame { position: relative; margin: 0; overflow: hidden; border-radius: 3px; background: var(--bg2); grid-column: span 2; grid-row: span 2; text-decoration: none; }
.st-frame img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.st-frame:hover img { transform: scale(1.05); }
.st-frame-main { grid-column: 1 / span 4; grid-row: span 3; }
.st-frame video { display: block; width: 100%; height: 100%; object-fit: cover; background: #0B1830; transition: transform 1.2s var(--ease); }
.st-frame:hover video { transform: scale(1.03); }
.st-frame-vid::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 40%; z-index: 1; pointer-events: none; background: linear-gradient(transparent, rgba(5, 12, 26, .55)); }
.st-frame-vid > span { z-index: 2; }
/* desktop: the event film takes ~2/3 of the chapter, full width of its column, 16:9 */
@media (min-width: 861px) {
	.st-ch-moment.st-ch-film { grid-template-columns: 1fr 2fr; }
	.st-ch-film .st-frames { grid-auto-rows: auto; }
	.st-ch-film .st-frames .st-frame { grid-row: auto; aspect-ratio: 16 / 10; }
	.st-ch-film .st-frames .st-frame-vid { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
}
.st-frame-main span { position: absolute; left: 14px; bottom: 12px; font: 600 15px var(--display); color: #fff; text-shadow: 0 2px 12px rgba(0, 0, 0, .7); }
.st-frames .st-frame:nth-child(2) { grid-column: 5 / span 2; grid-row: 1 / span 2; }
.st-frames .st-frame:nth-child(3) { grid-column: 5 / span 2; grid-row: 3 / span 2; }
.st-frames .st-frame:nth-child(4) { grid-column: 1 / span 2; grid-row: 4 / span 2; }
.st-frames .st-frame:nth-child(5) { grid-column: 3 / span 2; grid-row: 4 / span 2; }

/* chapter 4: web & integrations — a live tour inside a mock client page, with its real embed code */
.st-web { margin: 0; }
.st-web-win { overflow: hidden; border-radius: 10px; background: var(--bg2); border: 1px solid var(--line); box-shadow: 0 30px 80px rgba(11, 24, 48, .16); }
.st-web-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: var(--bg3); border-bottom: 1px solid var(--line); }
.st-web-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--line2); }
.st-web-bar span { flex: 1; max-width: 260px; margin-left: 10px; padding: 4px 12px; border-radius: 999px; background: var(--bg2); font: 500 12px/1.2 var(--f-sans); color: var(--dim); }
.st-web-page { display: grid; gap: 14px; padding: 16px 18px 18px; }
.st-web-sk { display: flex; align-items: center; gap: 10px; }
.st-web-sk b { width: 64px; height: 12px; margin-right: auto; border-radius: 3px; background: var(--fg); opacity: .8; }
.st-web-sk i { width: 38px; height: 6px; border-radius: 3px; background: var(--line2); }
.st-web-sk-t { flex-direction: column; align-items: flex-start; gap: 7px; }
.st-web-sk-t i { width: 72%; }
.st-web-sk-t i + i { width: 46%; }
.st-web-frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 6px; background: var(--bg3); }
.st-web-frame > img { width: 100%; height: 100%; object-fit: cover; }
.st-web-code { margin: 14px 0 0; padding: 14px 16px; overflow-x: auto; border-radius: 8px; background: #0B1830; color: #9FD8FF;
	font: 400 12.5px/1.5 ui-monospace, 'Cascadia Code', Consolas, monospace; white-space: pre; scrollbar-width: thin; }
.st-web-code span { color: #57E9FF; }
.st-web .st-cap { margin-top: 10px; }

/* ---------- perspective shift ---------- */
.st-persp { max-width: calc(var(--max) + 2 * var(--gut)); margin: 0 auto; padding: clamp(60px, 9vw, 130px) var(--gut); }
.st-persp-head { margin-bottom: 36px; }
.st-persp-stage { position: relative; }
.st-persp-tabs { position: absolute; z-index: 2; left: 18px; bottom: 18px; display: flex; gap: 4px; padding: 5px; border-radius: 999px; background: var(--glass); backdrop-filter: blur(12px); border: 1px solid var(--line); }
.st-persp-tabs button { display: flex; align-items: baseline; gap: 8px; padding: 11px 18px; border: 0; border-radius: 999px; background: none; color: var(--mute); font: 600 14px var(--display); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; transition: background .4s var(--ease), color .3s; }
.st-persp-tabs button small { font-size: 10px; color: var(--dim); }
.st-persp-tabs button[aria-selected="true"] { background: var(--fg); color: var(--bg); }
.st-persp-view { position: relative; aspect-ratio: 16 / 8.2; overflow: hidden; border-radius: 4px; background: var(--bg2); }
.st-persp-p { position: absolute; inset: 0; }
.st-persp-p[hidden] { display: block; visibility: hidden; }
.st-persp-p img { width: 100%; height: 100%; object-fit: cover; }
.st-js .st-persp-p { opacity: 0; transform: scale(1.08); filter: blur(6px); transition: opacity .9s var(--ease), transform 1.4s var(--ease), filter .9s var(--ease), visibility 0s .9s; }
.st-js .st-persp-p.on { opacity: 1; transform: none; filter: none; visibility: visible; transition-delay: 0s; }
.st-persp-p iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.st-persp-open { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }

/* ---------- industries ---------- */
.st-ind { max-width: calc(var(--max) + 2 * var(--gut)); margin: 0 auto; padding: clamp(70px, 10vw, 150px) var(--gut); border-top: 1px solid var(--line); }
.st-ind-head { margin-bottom: 48px; }
.st-ind-ui { display: grid; grid-template-columns: minmax(240px, .8fr) 2fr; gap: clamp(20px, 3.5vw, 56px); align-items: start; }
.st-ind-list { display: flex; flex-direction: column; border-top: 1px solid var(--line); position: sticky; top: 96px; }
.st-ind-list button { display: flex; align-items: baseline; gap: 14px; width: 100%; padding: 18px 4px; border: 0; border-bottom: 1px solid var(--line); background: none; color: var(--dim); text-align: left;
	font: 600 clamp(18px, 1.7vw, 24px)/1.2 var(--display); letter-spacing: -.01em; cursor: pointer; transition: color .3s, padding .5s var(--ease); }
.st-ind-list button small { font-size: 11px; letter-spacing: .16em; color: var(--dim); }
.st-ind-list button:hover { color: var(--fg2); }
.st-ind-list button[aria-selected="true"] { color: var(--fg); padding-left: 14px; }
.st-ind-list button[aria-selected="true"] small { color: var(--acc); }
.st-ind-panels { position: relative; }
.st-ind-p { display: grid; grid-template-rows: auto auto; }
.st-ind-p[hidden] { display: none; }
.st-ind-img { position: relative; aspect-ratio: 16 / 8.4; overflow: hidden; border-radius: 4px; background: var(--bg2); }
.st-ind-img img { width: 100%; height: 100%; object-fit: cover; }
.st-js .st-ind-p.on .st-ind-img { animation: stMask 1.1s var(--ease) both; }
.st-js .st-ind-p.on .st-ind-img img { animation: stSettle 1.6s var(--ease) both; }
.st-js .st-ind-p.on .st-ind-body > * { animation: stUp .8s var(--ease) both; }
.st-js .st-ind-p.on .st-ind-body > *:nth-child(2) { animation-delay: .06s; } .st-js .st-ind-p.on .st-ind-body > *:nth-child(3) { animation-delay: .12s; }
.st-js .st-ind-p.on .st-ind-body > *:nth-child(4) { animation-delay: .18s; } .st-js .st-ind-p.on .st-ind-body > *:nth-child(5) { animation-delay: .24s; }
@keyframes stMask { from { clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); } to { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); } }
@keyframes stSettle { from { transform: scale(1.12); } to { transform: none; } }
@keyframes stUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.st-ind-body { padding: 28px 0 0; display: grid; grid-template-columns: 1.2fr 1fr; gap: 10px 40px; }
.st-ind-body .st-h3, .st-ind-body > p { grid-column: 1; }
.st-ind-body > p { color: var(--fg2); margin: 0; }
.st-ticks { grid-column: 2; grid-row: 1 / span 2; margin: 0; padding: 0; list-style: none; }
.st-ticks li { display: flex; gap: 10px; align-items: flex-start; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 15px; color: var(--fg2); }
.st-ticks svg { color: var(--acc); margin-top: 3px; }
.st-ind-ex { grid-column: 1 / -1; margin-top: 18px; }
.st-ind-ex ul { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.st-ind-ex a { display: flex; align-items: center; gap: 12px; padding: 6px 14px 6px 6px; border: 1px solid var(--line); border-radius: 10px; text-decoration: none; font-size: 14px; max-width: 340px; transition: border-color .3s, background .3s; }
.st-ind-ex a:hover, .st-ind-ex a[aria-current] { border-color: var(--acc); background: var(--acc-soft); }
.st-ind-ex img { width: 64px; height: 42px; object-fit: cover; border-radius: 6px; flex: none; }
.st-ind-ex span { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.3; }
.st-ind-none { margin: 0; color: var(--mute); font-size: 14px; }
.st-ind-body > .st-btn { grid-column: 1 / -1; justify-self: start; margin-top: 18px; }

/* ---------- selected worlds ---------- */
.st-work { max-width: calc(var(--max) + 2 * var(--gut)); margin: 0 auto; padding: clamp(70px, 10vw, 150px) var(--gut); border-top: 1px solid var(--line); }
.st-work-head { margin-bottom: 40px; }
.st-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.st-filters button { padding: 9px 16px; border: 1px solid var(--line); border-radius: 999px; background: none; color: var(--mute); font: 500 13px var(--display); letter-spacing: .04em; cursor: pointer; transition: all .3s; }
.st-filters button:hover { color: var(--fg); border-color: var(--line2); }
.st-filters button.on { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.st-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-flow: dense; gap: clamp(12px, 1.6vw, 22px); margin: 0; padding: 0; list-style: none; }
.st-w { grid-column: span 2; }
.st-w-xl { grid-column: span 4; }
.st-w[hidden] { display: none; }
.st-w a { display: block; text-decoration: none; }
.st-w-img { display: block; position: relative; overflow: hidden; border-radius: 4px; aspect-ratio: 16 / 10; background: var(--bg2); }
.st-w-xl .st-w-img { aspect-ratio: 21 / 9; }
.st-w-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease), filter .6s; filter: saturate(.92); }
.st-w-img::after { content: ""; position: absolute; inset: 0; border: 1px solid transparent; border-radius: inherit; transition: border-color .4s; }
.st-w a:hover .st-w-img img, .st-w a:focus-visible .st-w-img img { transform: scale(1.05); filter: none; }
.st-w a:hover .st-w-img::after { border-color: rgba(87, 233, 255, .6); }
.st-w-meta { display: flex; flex-direction: column; gap: 4px; padding: 14px 2px 0; }
.st-w-meta small { font: 500 11px var(--display); letter-spacing: .16em; text-transform: uppercase; color: var(--dim); }
.st-w-meta b { font: 600 18px/1.3 var(--display); letter-spacing: -.01em; }
.st-work-more { margin-top: 40px; }

/* ---------- lab ---------- */
.st-lab { max-width: calc(var(--max) + 2 * var(--gut)); margin: 0 auto; padding: clamp(70px, 10vw, 150px) var(--gut); border-top: 1px solid var(--line);
	background: radial-gradient(50% 60% at 85% 10%, rgba(87, 233, 255, .07), transparent 70%); }
.st-lab-head { margin-bottom: 44px; }
.st-lab-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin: 0; padding: 0; list-style: none; background: var(--line); border: 1px solid var(--line); }
.st-lab-i { position: relative; padding: 30px 26px 32px; background: rgba(255, 255, 255, .78); backdrop-filter: blur(6px); min-height: 200px; overflow: hidden; }
.st-lab-i::before { content: ""; position: absolute; inset: 0; background: radial-gradient(400px circle at var(--lx, 50%) var(--ly, 0%), rgba(10, 143, 214, .1), transparent 60%); opacity: 0; transition: opacity .4s; pointer-events: none; }
.st-lab-i:hover::before { opacity: 1; }
.st-lab-i h3 { margin: 18px 0 10px; font: 600 21px/1.2 var(--display); }
.st-lab-i p { margin: 0; color: var(--mute); font-size: 15px; }
.st-badge { display: inline-flex; align-items: center; gap: 7px; font: 600 10px var(--display); letter-spacing: .2em; text-transform: uppercase; color: var(--acc); }
.st-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; }
.is-concept .st-badge { color: #7B5BE0; }
.is-concept .st-badge::before { background: none; border: 1.5px solid currentColor; box-shadow: none; }

/* ---------- about + process ---------- */
.st-about { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 80px); max-width: calc(var(--max) + 2 * var(--gut)); margin: 0 auto; padding: clamp(70px, 10vw, 150px) var(--gut); border-top: 1px solid var(--line); }
.st-about-img { aspect-ratio: 4 / 5; overflow: hidden; border-radius: 4px; }
.st-about-img img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
/* the team constellation: dots re-form shoot → partnership → one team (studio.js) */
.st-team { position: relative; border-radius: 18px; border: 1px solid rgba(10,143,214,.16); background: radial-gradient(120% 90% at 50% 38%, rgba(255,255,255,.92), rgba(226,240,255,.78) 62%, rgba(208,229,252,.7)); box-shadow: 0 30px 80px -40px rgba(11,40,90,.35), inset 0 1px 0 rgba(255,255,255,.9); }
.st-team-cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.st-team-lab { position: absolute; left: 22px; right: 22px; bottom: 18px; margin: 0; padding: 0; list-style: none; display: flex; gap: 18px; font-size: 13px; letter-spacing: .04em; color: var(--fg2); }
.st-team-lab li { position: relative; flex: 1; padding-top: 12px; opacity: .45; transition: opacity .6s var(--ease), color .6s var(--ease); }
.st-team-lab li::before, .st-team-lab li::after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 2px; border-radius: 2px; background: rgba(10,143,214,.18); }
.st-team-lab li::after { width: 0; background: var(--acc); }
.st-team-lab li.is-on { opacity: 1; color: var(--fg); }
.st-team-lab li.is-on::after { width: 100%; transition: width var(--team-dur, 6s) linear; }
.st-about-txt { align-self: center; }
.st-about-txt > p:not(.st-kicker) { color: var(--fg2); font-size: 18px; max-width: 32em; }
.st-process { grid-column: 1 / -1; margin-top: 30px; }
.st-process ol { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; margin: 0; padding: 0; list-style: none; counter-reset: s; }
.st-process li { padding: 22px 22px 0 0; border-top: 1px solid var(--line2); position: relative; }
.st-process li::before { content: ""; position: absolute; left: 0; top: -1px; height: 1px; width: 36px; background: var(--acc); }
.st-process li > span { font: 500 12px var(--display); color: var(--acc); letter-spacing: .16em; }
.st-process h3 { margin: 10px 0 8px; font: 600 22px var(--display); letter-spacing: -.01em; text-transform: uppercase; }
.st-process p { margin: 0; color: var(--mute); font-size: 14px; }

/* ---------- enquiry ---------- */
.st-enq { max-width: calc(var(--max) + 2 * var(--gut)); margin: 0 auto; padding: clamp(70px, 10vw, 150px) var(--gut); border-top: 1px solid var(--line); }
.st-enq-head { margin-bottom: 40px; }
/* direct WhatsApp line under the enquiry heading */
.st-wa { display: inline-flex; align-items: center; gap: 14px; margin-top: 22px; padding: 10px 22px 10px 10px; border: 1px solid var(--line); border-radius: 999px;
	background: var(--glass); backdrop-filter: blur(10px); color: var(--fg) !important; text-decoration: none; transition: border-color .3s, box-shadow .3s, background .3s; }
.st-wa-ic { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: #25D366; color: #fff; box-shadow: 0 0 0 0 rgba(37, 211, 102, .45); animation: stWaPulse 2.6s var(--ease) infinite; }
.st-wa-ic svg { width: 22px; height: 22px; stroke-width: 1.8; }
.st-wa-t { display: grid; gap: 3px; line-height: 1.2; }
.st-wa-t small { font: var(--w-ui) 12.5px var(--f-sans); color: var(--mute); }
.st-wa-t b { font: 600 clamp(18px, 1.6vw, 22px) var(--f-sans); letter-spacing: .01em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.st-wa > svg { width: 18px; height: 18px; color: var(--mute); transition: transform .4s var(--ease), color .3s; }
.st-wa:hover, .st-wa:focus-visible { border-color: #25D366; background: #fff; box-shadow: 0 14px 40px rgba(37, 211, 102, .18); }
.st-wa:hover > svg, .st-wa:focus-visible > svg { transform: translateX(4px); color: #128C7E; }
@keyframes stWaPulse { 0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, .45); } 70%, 100% { box-shadow: 0 0 0 14px rgba(37, 211, 102, 0); } }
.st-form { max-width: 900px; padding: clamp(22px, 3.5vw, 44px); border: 1px solid var(--line); border-radius: 18px; background: rgba(255, 255, 255, .8); backdrop-filter: blur(8px); box-shadow: 0 30px 80px -40px rgba(11, 24, 48, .25); }
.st-steps { display: flex; gap: 6px; margin: 0 0 34px; padding: 0; list-style: none; counter-reset: s; }
.st-steps li { flex: 1; display: flex; align-items: center; gap: 10px; padding-top: 12px; border-top: 2px solid var(--line); font: 500 12px var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); transition: color .3s, border-color .5s var(--ease); }
.st-steps li span { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 1px solid currentColor; font-size: 11px; letter-spacing: 0; }
.st-steps li.on, .st-steps li.done { color: var(--fg); border-color: var(--acc); }
.st-step { margin: 0; padding: 0; border: 0; min-width: 0; }
.st-step[hidden] { display: none; }
.st-step.on { animation: stUp .6s var(--ease) both; }
.st-q { padding: 0; margin: 0 0 22px; font: 600 clamp(22px, 2.4vw, 32px)/1.2 var(--display); letter-spacing: -.015em; }
.st-types { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.st-type { position: relative; cursor: pointer; }
.st-type input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.st-type span { display: flex; align-items: center; min-height: 64px; padding: 14px 18px; border: 1px solid var(--line2); border-radius: 12px; font: 500 15px/1.3 var(--display); transition: border-color .3s, background .3s, color .3s; }
.st-type:hover span { border-color: rgba(11, 24, 48, .4); }
.st-type input:checked + span { border-color: var(--acc); background: var(--acc-soft); color: var(--fg); box-shadow: inset 0 0 0 1px var(--acc); }
.st-type input:focus-visible + span { outline: 2px solid var(--acc); outline-offset: 2px; }
.st-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.st-f { display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; }
.st-f > span { font-size: 13px; color: var(--mute); }
.st-f input, .st-f select, .st-f textarea { width: 100%; padding: 13px 14px; border: 1px solid var(--line2); border-radius: 10px; background: var(--bg2); color: var(--fg); font: 400 16px/1.4 var(--body); transition: border-color .3s, box-shadow .3s; }
.st-f select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--mute) 50%), linear-gradient(135deg, var(--mute) 50%, transparent 50%); background-position: calc(100% - 20px) 55%, calc(100% - 15px) 55%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 40px; }
.st-f input:focus, .st-f select:focus, .st-f textarea:focus { outline: none; border-color: var(--acc); box-shadow: 0 0 0 3px var(--acc-soft); }
.st-f input[aria-invalid="true"] { border-color: #D23B3B; }
.st-f textarea { resize: vertical; min-height: 110px; }
.st-err { margin: 6px 0 0; color: #C62F2F; font-size: 14px; }
.st-form-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 26px; }
.st-form-nav #stNext { margin-left: auto; }
.st-form-nav [hidden] { display: none; }
.st-brief { margin: 18px 0; padding: 18px; max-height: 280px; overflow: auto; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--fg2); font: 400 14px/1.6 var(--body); white-space: pre-wrap; }
.st-send { display: flex; flex-wrap: wrap; gap: 10px; }
.st-sent { margin-top: 22px; padding: 18px 20px; border-radius: 12px; background: var(--acc-soft); border: 1px solid rgba(10, 143, 214, .35); }
.st-sent b { display: flex; align-items: center; gap: 10px; font: 600 18px var(--display); }
.st-sent svg { color: var(--acc); }
.st-sent p { margin: 8px 0 0; color: var(--fg2); font-size: 14px; }
.st-privacy { margin: 22px 0 0; font-size: 13px; color: var(--dim); }

/* ---------- faq ---------- */
.st-faq { max-width: calc(900px + 2 * var(--gut)); margin: 0 auto; padding: clamp(50px, 8vw, 110px) var(--gut); }
.st-faq details { border-top: 1px solid var(--line); }
.st-faq details:last-child { border-bottom: 1px solid var(--line); }
.st-faq summary { display: flex; justify-content: space-between; gap: 18px; padding: 22px 0; cursor: pointer; list-style: none; font: 600 clamp(17px, 1.5vw, 20px)/1.35 var(--display); }
.st-faq summary::-webkit-details-marker { display: none; }
.st-faq summary::after { content: "+"; font-weight: 400; color: var(--acc); font-size: 24px; line-height: 1; transition: transform .4s var(--ease); }
.st-faq details[open] summary::after { transform: rotate(45deg); }
.st-faq details p { margin: 0 0 22px; color: var(--fg2); max-width: 46em; }

/* ---------- final invitation ---------- */
.st-final { position: relative; overflow: hidden; padding: clamp(120px, 18vw, 260px) var(--gut); text-align: center; isolation: isolate; }
.st-final-slit { position: absolute; left: 50%; top: 0; bottom: 0; width: 46%; transform: translateX(-50%) scaleX(.02); z-index: -1;
	background: radial-gradient(50% 50% at 50% 50%, rgba(87, 233, 255, .32), rgba(63, 123, 255, .08) 45%, transparent 70%); filter: blur(10px); opacity: 0; transition: transform 2.2s var(--ease), opacity 1.4s; }
.st-final.in .st-final-slit { transform: translateX(-50%) scaleX(1); opacity: 1; }
.st-final-h { max-width: 15em; margin: 0 auto; font: 600 clamp(36px, 6.4vw, 104px)/1 var(--display); letter-spacing: -.035em; }
html[lang="geo"] .st-final-h, html[lang="rus"] .st-final-h { font-size: clamp(30px, 4.8vw, 76px); line-height: 1.1; letter-spacing: -.015em; }
.st-final-t { margin: 30px 0 46px; font: 500 14px var(--display); letter-spacing: .3em; text-transform: uppercase; color: var(--mute); }
.st-final-cta { --mx: 0px; --my: 0px; display: inline-flex; align-items: center; gap: 18px; padding: 26px 44px; border-radius: 999px; background: var(--fg); color: var(--bg) !important; text-decoration: none;
	font: 600 clamp(18px, 2vw, 26px)/1 var(--display); letter-spacing: -.01em; transform: translate(var(--mx), var(--my)); transition: transform .5s var(--ease), background .3s, box-shadow .4s; }
.st-final-cta:hover, .st-final-cta:focus-visible { background: var(--acc); box-shadow: 0 0 80px rgba(10, 143, 214, .35); }
.st-final-cta svg { width: 1.2em; height: 1.2em; transition: transform .4s var(--ease); }
.st-final-cta:hover svg { transform: translateX(6px); }

.st-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 30px; padding: 30px var(--gut); border-top: 1px solid var(--line); font-size: 13px; color: var(--dim); }
.st-foot a { text-decoration: none; }
.st-foot a:hover { color: var(--fg); }

/* contextual cursor label (fine pointers only; the system cursor stays) */
.st-cursor { position: fixed; left: 0; top: 0; z-index: 70; pointer-events: none; transform: translate3d(-100px, -100px, 0); }
.st-cursor span { display: block; padding: 9px 14px; border-radius: 999px; background: var(--fg); color: var(--bg); font: 600 12px var(--display); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
	transform: translate(14px, 14px) scale(.4); opacity: 0; transition: transform .35s var(--ease), opacity .25s; }
.st-cursor.on span { transform: translate(14px, 14px) scale(1); opacity: 1; }
.st-toast { position: fixed; left: 50%; bottom: 24px; z-index: 80; padding: 10px 18px; border-radius: 999px; background: var(--fg); color: var(--bg); font: 600 14px var(--display); transform: translate(-50%, 20px); opacity: 0; transition: all .4s var(--ease); pointer-events: none; }
.st-toast.on { transform: translate(-50%, 0); opacity: 1; }

/* ---------- Quantum Anchor language ----------
   The page uses the tours' own teleport marker (templates/files/js/vt-anchor.js, CSS-only, one shared pointer tracker,
   off-screen markers paused, ultra / balanced / eco quality) as its visual signature: section kickers, the hero portal,
   tour cards, process nodes, the enquiry progress, the cursor and the final invitation. A slot is <span class="st-qa"
   data-qa="key" data-size="px" [data-icon]>; studio.js attaches the marker. Without JS a slot shows a quiet core dot. */
.st { --blue: #3F7BFF; --white: #F5FDFF; --violet: #7B5BE0; }
.st::before { content: none; display: none;
	background: radial-gradient(1px 1px at 12% 18%, rgba(245, 253, 255, .5), transparent 60%), radial-gradient(1px 1px at 68% 32%, rgba(87, 233, 255, .5), transparent 60%),
		radial-gradient(1px 1px at 38% 74%, rgba(245, 253, 255, .35), transparent 60%), radial-gradient(1px 1px at 86% 82%, rgba(165, 124, 255, .45), transparent 60%),
		radial-gradient(1px 1px at 24% 52%, rgba(87, 233, 255, .3), transparent 60%), radial-gradient(1px 1px at 54% 8%, rgba(245, 253, 255, .3), transparent 60%);
	background-size: 520px 520px; }
.st-qa { position: relative; display: inline-block; flex: none; width: 24px; height: 24px; vertical-align: middle; }
.st-qa:empty::before { content: ""; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--white); box-shadow: 0 0 0 3px rgba(87, 233, 255, .25), 0 0 10px rgba(87, 233, 255, .8); }
.st-qa .qa-hit { pointer-events: none; }
.st-spec .st-qa .qa-hit { pointer-events: auto; }

/* kickers: a tiny instrument instead of the rule */
.st-kicker.has-qa::before { display: none; }
.st-kicker > .st-qa { width: 22px; height: 22px; margin: 0 2px 0 -2px; }

/* hero portal: the doorway into the page */
.st-portal { position: absolute; right: clamp(24px, 9vw, 150px); top: 50%; z-index: 2; display: grid; place-items: center; width: 300px; height: 300px; margin-top: -170px; text-decoration: none; border-radius: 50%; }
.st-portal .st-qa { width: 196px; height: 196px; }
.st-portal-field { position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
	background: radial-gradient(circle, rgba(2, 6, 14, .55) 0, rgba(2, 6, 14, .3) 34%, transparent 66%); }
.st-portal-field::before, .st-portal-field::after { content: ""; position: absolute; inset: 6%; border-radius: 50%; border: 1px solid rgba(87, 233, 255, .22);
	transform: rotateX(72deg) rotateZ(0deg); animation: stOrbit 38s linear infinite; }
.st-portal-field::after { inset: -4%; border-color: rgba(165, 124, 255, .16); border-style: dashed; animation-duration: 64s; animation-direction: reverse; transform: rotateX(66deg) rotateY(14deg); }
@keyframes stOrbit { to { transform: rotateX(72deg) rotateZ(360deg); } }
.st-portal-t { position: absolute; bottom: 8px; font: 500 11px var(--display); letter-spacing: .36em; text-transform: uppercase; color: rgba(245, 253, 255, .62); transition: color .3s, letter-spacing .5s var(--ease); }
.st-portal:hover .st-portal-t, .st-portal:focus-visible .st-portal-t { color: var(--white); letter-spacing: .44em; }
.st-portal:focus-visible { outline-offset: -20px; }
.st-js .st-portal { opacity: 0; transform: scale(.6); transition: opacity 1.6s var(--ease) 1.3s, transform 2s var(--ease) 1.2s; }
.st-js.st-ready .st-portal { opacity: 1; transform: none; }
.st-hero .st-portal { translate: calc(var(--px) * 10px) calc(var(--py) * 8px + var(--p) * -40px); }

/* doorway button + perspective open: instrument instead of the globe icon */
.st-door-go .st-qa { width: 48px; height: 48px; margin: -6px 0; }
.st-persp-open { background: var(--glass); color: var(--fg); border-color: rgba(255, 255, 255, .9); backdrop-filter: blur(10px); padding-left: 14px; }
.st-persp-open .st-qa { width: 30px; height: 30px; }

/* industries: the instrument travels to the selected industry */
.st-ind-list button .st-qa { width: 26px; height: 26px; margin: -4px 4px -4px -8px; }
.st-ind-list button[aria-selected="true"] small { display: none; }
.st-ind-ui > .st-ind-qa { display: none; }

/* tour cards: every world has its teleport marker */
.st-w-qa { position: absolute; right: 14px; top: 14px; width: 34px !important; height: 34px !important; }
.st-w a:hover .st-w-img::after { border-color: rgba(87, 233, 255, .5); }

/* lab specimen bench */
.st-spec { display: grid; grid-template-columns: minmax(240px, .9fr) 2fr; gap: 28px 48px; align-items: center; margin: 0 0 40px; padding: 30px clamp(20px, 3vw, 40px); border: 1px solid rgba(87, 233, 255, .2); border-radius: 18px; color: #EAF2FF;
	background: linear-gradient(rgba(87, 233, 255, .05) 1px, transparent 1px) 0 0 / 100% 28px, radial-gradient(70% 120% at 70% 50%, rgba(63, 123, 255, .28), transparent 70%), #0B1830;
	box-shadow: 0 40px 90px -40px rgba(11, 24, 48, .6); }
.st-spec .st-badge { color: #57E9FF; }
.st-spec-txt p:not(.st-badge) { margin: 12px 0 0; color: #B8C7E0; font-size: 15px; }
.st-spec-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; margin: 0; padding: 0; list-style: none; }
.st-spec-i { display: flex; flex-direction: column; align-items: center; gap: 18px; flex: 1; min-width: 0; }
.st-spec-i .st-qa { width: 52px; height: 52px; margin: 18px 0; }
.st-spec-i:first-child .st-qa { width: 84px; height: 84px; margin: 6px 0; }
.st-spec-i > span:last-child { font: 500 11px var(--display); letter-spacing: .2em; text-transform: uppercase; color: #93A4C3; }
.st-badge { margin: 0; }
.is-concept .st-badge { color: var(--violet); }

/* process: nodes on the line */
.st-process li::before { display: none; }
.st-process li > .st-qa { position: absolute; left: -6px; top: -15px; width: 28px; height: 28px; }
.st-process li > span:not(.st-qa) { display: inline-block; margin-top: 4px; }

/* enquiry progress: the instrument sits on the current step */
.st-steps li > .st-qa { width: 26px; height: 26px; margin: -2px; }
.st-steps li.has-qa > span:not(.st-qa) { display: none; }

/* final invitation */
.st-final-qa { display: block; width: 176px; height: 176px; margin: 0 auto 26px; }

/* cursor: a small instrument + label over interactive scenes */
.st-cursor .st-qa { position: absolute; left: -15px; top: -15px; width: 30px; height: 30px; opacity: 0; transition: opacity .25s; }
.st-cursor:not(.on) .st-qa .qa { display: none; }
.st-cursor.on .st-qa { opacity: 1; }
.st-cursor span { transform: translate(24px, 16px) scale(.4); }
.st-cursor.on span { transform: translate(24px, 16px) scale(1); }

@media (max-width: 1100px) {
	.st-portal { right: 2vw; width: 230px; height: 230px; margin-top: -150px; }
	.st-portal .st-qa { width: 150px; height: 150px; }
	.st-spec { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
	.st-portal { top: 70px; right: 4px; width: 150px; height: 150px; margin-top: 0; }
	.st-portal-field { inset: 18px; }
	.st-portal .st-qa { width: 96px; height: 96px; }
	.st-portal-t { bottom: 0; font-size: 9px; }
	.st-spec-row { flex-wrap: wrap; justify-content: center; row-gap: 18px; }
	.st-spec-i { flex: 0 0 30%; }
	.st-final-qa { width: 130px; height: 130px; }
}


/* ---------- light page: the instruments sit in a small deep "lens" so their light still reads on the sky palette ---------- */
.st-field { position: fixed; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; }
.st-qa { border-radius: 50%; background: radial-gradient(circle, #0B1830 0 30%, rgba(11, 24, 48, .7) 46%, rgba(11, 24, 48, 0) 70%); }
.st-portal .st-qa, .st-spec .st-qa, .st-final-qa { background: none; }
.st-final-qa::before { content: ""; position: absolute; inset: 8%; border-radius: 50%; z-index: -1;
	background: radial-gradient(circle, #0B1830 0 22%, rgba(11, 24, 48, .78) 40%, rgba(11, 24, 48, .18) 60%, rgba(11, 24, 48, 0) 72%); }
.st-final-qa { isolation: isolate; }
.st-portal-field { background: radial-gradient(circle, rgba(11, 24, 48, .78) 0, rgba(11, 24, 48, .45) 30%, rgba(11, 24, 48, 0) 64%); }
.st-portal-t { color: #fff; text-shadow: 0 1px 8px rgba(11, 24, 48, .8); }
.st-portal:hover .st-portal-t { color: #fff; }
.st-door-go small { color: var(--mute); }
.st-cursor .st-qa { background: radial-gradient(circle, #0B1830 0 34%, rgba(11, 24, 48, 0) 70%); }
.st-ind-list button[aria-selected="true"] { color: var(--acc); }
.st-man-t { color: var(--fg); }
.st-final-h { color: var(--fg); }
@media (max-width: 640px) {
	.st-hero-shade { background: linear-gradient(180deg, rgba(238, 246, 255, .3) 0%, rgba(238, 246, 255, .55) 38%, rgba(238, 246, 255, .9) 70%, var(--bg) 100%); }
}

/* ---------- live tour slots (studio.js): the real tour fades in over its poster ---------- */
.st-live { position: relative; }
.st-live > iframe { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; border: 0; background: transparent;
	opacity: 0; transition: opacity 1s var(--ease); }
.st-live.is-ready > iframe { opacity: 1; }
.st-live.is-ready > img { transform: none !important; }
.st-live .st-w-qa, .st-frame-main.st-live > span { z-index: 2; }
.st-frame-main.st-live > span { pointer-events: none; }
/* dot loader (studio.js) on the films until they play; 360° slots keep their poster image until the tour is ready */
.st-js .st-frame-vid { background: radial-gradient(120% 95% at 50% 42%, #17345C 0%, #0B1830 58%, #050C1A 100%); }
.st-frame-vid video { background: transparent; transition: opacity .9s var(--ease), transform 1.2s var(--ease); }
.st-js .st-frame-vid:not(.is-playing) video { opacity: 0; }
.st-load { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; transition: opacity .9s var(--ease); }
.is-ready > .st-load, .is-playing > .st-load { opacity: 0; }

/* tour viewer (studio.js): a work card opens its whole tour over the page; the dot loader plays until it is ready */
.st-tour { position: fixed; inset: 0; z-index: 90; display: flex; flex-direction: column; background: #050C1A; opacity: 0; transition: opacity .35s var(--ease); }
.st-tour[hidden] { display: none; }
.st-tour.on { opacity: 1; }
.st-tour-bar { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 8px var(--gut); background: #0B1830; color: #fff; }
.st-tour-t { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 600 15px/1.3 var(--f-sans); }
.st-tour-new, .st-tour-x { display: inline-flex; align-items: center; gap: 7px; flex: none; height: 38px; padding: 0 15px; border: 0; border-radius: 999px;
	background: rgba(255, 255, 255, .1); color: #fff !important; font: 500 13px/1 var(--f-sans); text-decoration: none; cursor: pointer; transition: background .3s; }
.st-tour-new:hover, .st-tour-new:focus-visible, .st-tour-x:hover, .st-tour-x:focus-visible { background: var(--acc); }
.st-tour-stage { position: relative; flex: 1; overflow: hidden; background: radial-gradient(120% 95% at 50% 42%, #17345C 0%, #0B1830 58%, #050C1A 100%); }
.st-tour-stage iframe { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; border: 0; opacity: 0; transition: opacity .9s var(--ease); }
.st-tour-stage.is-ready iframe { opacity: 1; }
.st-tour-wait { position: absolute; left: 0; right: 0; bottom: 32px; z-index: 1; margin: 0; text-align: center; color: rgba(190, 226, 255, .75); font: 500 13px var(--f-sans); letter-spacing: .04em; transition: opacity .5s; }
.st-tour-stage.is-ready .st-tour-wait { opacity: 0; }
html.st-tour-open, html.st-tour-open body { overflow: hidden; }
@media (max-width: 640px) { .st-tour-new { display: none; } .st-tour-x span { display: none; } .st-tour-x { width: 38px; padding: 0; justify-content: center; } }
.st-live-open { position: absolute; right: 12px; bottom: 12px; z-index: 2; display: inline-flex; align-items: center; gap: 8px;
	padding: 9px 14px; border-radius: 999px; background: rgba(11, 24, 48, .62); backdrop-filter: blur(10px);
	color: #fff !important; font: 500 13px/1 var(--f-sans); text-decoration: none; transition: background .3s; }
.st-live-open:hover, .st-live-open:focus-visible { background: var(--acc); }
html[lang="geo"] .st-live-open { font-size: 12.5px; }
.st-in-frame .st-cursor { opacity: 0; }
/* "drag to explore" hint: shown once the tour is live, retired by the first drag inside it */
.st-live-hint { position: absolute; left: 12px; top: 12px; z-index: 2; display: inline-flex; align-items: center; gap: 9px;
	padding: 9px 15px 9px 11px; border-radius: 999px; background: rgba(11, 24, 48, .66); backdrop-filter: blur(10px);
	color: #fff; font: 500 13px/1 var(--f-sans); pointer-events: none; opacity: 0; transition: opacity .5s var(--ease); }
.st-live.is-ready .st-live-hint { opacity: 1; }
.st-live.is-used .st-live-hint { opacity: 0; }
.st-live-hint i { position: relative; width: 22px; height: 14px; flex: none; }
.st-live-hint i::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; margin-top: -.75px; background: rgba(255, 255, 255, .45); }
.st-live-hint i::after { content: ""; position: absolute; top: 50%; left: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%;
	background: #57E9FF; box-shadow: 0 0 10px #57E9FF; animation: stHintSwipe 2.2s var(--ease-io) infinite; }
@keyframes stHintSwipe { 0%, 100% { transform: translateX(-7px); } 50% { transform: translateX(7px); } }
.st-frame-main.st-live .st-live-hint { top: 12px; }
.st-live .st-alt { z-index: 2; }
/* touch screens get the tour directly too: in embed mode sideways swipes turn the view and vertical swipes still scroll the
   page (see the embed block in templates/tours.php) */

/* ---------- type system: "Future editorial" ----------
   One structural voice (Virtuo Sans) and one emotional voice (Virtuo Serif). Levels: A hero, B section, C service,
   D body, E micro. Later html[lang] blocks tune each script optically; html lang is geo/eng/rus on this site. */
.st { font-synthesis: none; font-kerning: normal; font-optical-sizing: auto; }
.st b, .st strong { font-weight: 640; }
.st h2, .st h3, .st-q, .st-final-h, .st-ch-line, .st-faq summary, .st-w-meta b { text-wrap: balance; }
.st p, .st li, .st-man-t { text-wrap: pretty; }
.st-kicker, .st-mini, .st-ch-n, .st-w-meta small, .st-badge, .st-steps li, .st-process li > span, .st-final-t,
.st-scroll, .st-portal-t, .st-spec-i > span:last-child, .st-langs a { font-variant-numeric: tabular-nums; font-weight: var(--w-ui); }

/* A — hero: heavy sans statement, then a light serif italic answer */
.st-h1 { font-weight: var(--w-hero); letter-spacing: -.045em; }
.st-h1 .st-line + .st-line { padding-inline-end: .14em; }
.st-h1 .st-line + .st-line > span { font-family: var(--f-serif); font-style: italic; font-weight: 300; font-size: .82em;
	letter-spacing: -.02em; text-transform: none; line-height: 1.02; }
/* B — section */
.st-h2 { font-weight: var(--w-head); letter-spacing: -.032em; }
.st-h2-xl { font-weight: var(--w-xl); letter-spacing: -.05em; }
.st-man-t { font-family: var(--f-serif); font-weight: var(--w-serif); letter-spacing: -.015em; line-height: 1.2; }
.st-final-h { font-family: var(--f-serif); font-weight: var(--w-serif); letter-spacing: -.03em; line-height: 1.02; }
/* C — service / card */
.st-h3, .st-lab-i h3, .st-w-meta b, .st-q, .st-faq summary, .st-process h3 { font-weight: 600; }
.st-ch-line { font-family: var(--f-serif); font-style: italic; font-weight: var(--w-accent); font-size: clamp(21px, 2vw, 30px); letter-spacing: -.01em; }
.st-ch-n span { font-family: var(--f-serif); font-style: italic; font-weight: 400; font-size: 24px; letter-spacing: 0; line-height: .8; }
.st-ind-list button { font-weight: 560; }
@media (min-width: 861px) {
	.st-ind-list button[aria-selected="true"] { font-family: var(--f-serif); font-style: italic; font-weight: 420; letter-spacing: -.015em; }
}
.st-menu-nav a { font-weight: 300; letter-spacing: -.045em; }
.st-menu-nav a small { font-family: var(--f-sans); font-style: normal; }
/* D — body */
.st-lead { font-weight: 330; letter-spacing: -.005em; }
.st-btn, .st-nav a, .st-filters button, .st-persp-tabs button, .st-type span { font-weight: var(--w-ui); }
.st-btn-main { font-weight: 600; }
/* E — micro */
.st-kicker, .st-mini { letter-spacing: var(--track-micro); }

/* motion: the Geologica SHRP axis sharpens terminals on hover — same advance widths, so nothing reflows */
.st-btn, .st-nav a, .st-final-cta, .st-menu-nav a, .st-door-go { font-variation-settings: 'SHRP' 0; transition-property: background, border-color, color, box-shadow, transform, font-variation-settings; }
.st-btn:hover, .st-btn:focus-visible, .st-nav a:hover, .st-final-cta:hover, .st-menu-nav a:hover, .st-door-go:hover { font-variation-settings: 'SHRP' 100; }
.st-h2-xl { font-variation-settings: 'SHRP' 0; transition: font-variation-settings 1.4s var(--ease); }
.st-h2-xl:hover { font-variation-settings: 'SHRP' 60; }

/* ---------- Russian ----------
   Cyrillic capitals are wider and set denser: lighter tracking on caps, slightly looser display leading. */
html[lang="rus"] .st { --track-micro: .14em; }
html[lang="rus"] .st-h1 { letter-spacing: -.03em; line-height: .98; }
html[lang="rus"] .st-h1 .st-line + .st-line > span { letter-spacing: -.015em; }
html[lang="rus"] .st-h2 { letter-spacing: -.022em; line-height: 1.06; }
html[lang="rus"] .st-h2-xl { letter-spacing: -.04em; }
html[lang="rus"] .st-final-h { letter-spacing: -.02em; line-height: 1.08; }
html[lang="rus"] .st-persp-tabs button, html[lang="rus"] .st-steps li, html[lang="rus"] .st-final-t { letter-spacing: .08em; }

/* ---------- Georgian ----------
   Mkhedruli has no case: never upper-case (it would switch to Mtavruli) and no wide tracking. Google Sans Georgian is
   the structural voice (400-700), with taller leading for ascenders/descenders;
   the serif voice stays upright because Georgian has no italic tradition. */
html[lang="geo"] .st { --w-body: 400; --w-head: 600; --w-hero: 620; --w-xl: 400; --w-serif: 420; --w-accent: 460;
	--track-micro: .02em; --lh-body: 1.75; }
html[lang="geo"] .st-h1, html[lang="geo"] .st-kicker, html[lang="geo"] .st-mini, html[lang="geo"] .st-ch-n,
html[lang="geo"] .st-persp-tabs button, html[lang="geo"] .st-process h3, html[lang="geo"] .st-steps li,
html[lang="geo"] .st-final-t, html[lang="geo"] .st-w-meta small, html[lang="geo"] .st-badge, html[lang="geo"] .st-scroll,
html[lang="geo"] .st-cursor span, html[lang="geo"] .st-brand, html[lang="geo"] .st-portal-t { text-transform: none; }
html[lang="geo"] .st-kicker, html[lang="geo"] .st-mini, html[lang="geo"] .st-ch-n, html[lang="geo"] .st-w-meta small,
html[lang="geo"] .st-badge, html[lang="geo"] .st-final-t, html[lang="geo"] .st-scroll, html[lang="geo"] .st-steps li,
html[lang="geo"] .st-portal-t, html[lang="geo"] .st-persp-tabs button { letter-spacing: .02em; font-size: 13px; }
html[lang="geo"] .st-h1 { font-size: clamp(40px, 6.4vw, 104px); line-height: 1.14; letter-spacing: -.015em; }
html[lang="geo"] .st-h1 .st-line + .st-line > span { font-family: var(--f-sans); font-style: normal; font-weight: 400; font-size: .84em; letter-spacing: -.005em; line-height: 1.18; }
html[lang="geo"] .st-line { padding-bottom: .12em; }
html[lang="geo"] .st-h2 { letter-spacing: -.005em; line-height: 1.22; }
html[lang="geo"] .st-h2-xl { font-size: clamp(30px, 4.8vw, 74px); line-height: 1.16; letter-spacing: -.005em; }
html[lang="geo"] .st-ch .st-h2 { font-size: clamp(28px, 3.7vw, 54px); }
html[lang="geo"] .st-h3 { line-height: 1.3; letter-spacing: 0; }
html[lang="geo"] .st-man-t { line-height: 1.5; letter-spacing: 0; }
html[lang="geo"] .st-final-h { font-size: clamp(28px, 4.4vw, 68px); line-height: 1.24; letter-spacing: 0; }
html[lang="geo"] .st-ch-line, html[lang="geo"] .st-ch-n span, html[lang="geo"] .st-ind-list button[aria-selected="true"] { font-style: normal; }
html[lang="geo"] .st-ch-line, html[lang="geo"] .st-q { font-size: clamp(19px, 1.7vw, 25px); line-height: 1.45; letter-spacing: 0; }
html[lang="geo"] .st-menu-nav a { font-size: clamp(30px, 5.6vw, 64px); font-weight: 400; line-height: 1.25; letter-spacing: 0; }
html[lang="geo"] .st-ind-list button, html[lang="geo"] .st-w-meta b, html[lang="geo"] .st-lab-i h3 { letter-spacing: 0; line-height: 1.35; }
html[lang="geo"] .st-process h3 { font-size: 19px; }
@media (min-width: 861px) { html[lang="geo"] .st-ind-list button { font-size: clamp(15px, 1.25vw, 19px); } }
html[lang="geo"] .st-btn, html[lang="geo"] .st-final-cta { letter-spacing: 0; }
html[lang="geo"] .st-lead { font-weight: 380; }
html[lang="geo"] .st p, html[lang="geo"] .st li { line-height: 1.75; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
	.st-nav { display: none; }
	.st-burger { display: inline-flex; }
	.st-lab-list { grid-template-columns: 1fr 1fr; }
	.st-process ol { grid-template-columns: repeat(3, 1fr); row-gap: 26px; }
}
@media (max-width: 860px) {
	.st-ch, .st-ch-inside, .st-ch-moment { grid-template-columns: 1fr; }
	.st-ch-inside .st-ch-txt, .st-ch-moment .st-ch-txt, .st-ch-web .st-ch-txt, .st-ch-moment .st-frames { order: 0; }
	.st-ind-ui { grid-template-columns: 1fr; }
	/* industries become a swipeable chip row above the panel */
	.st-ind-list { position: static; flex-direction: row; overflow-x: auto; scroll-snap-type: x mandatory; border: 0; gap: 8px; margin: 0 calc(-1 * var(--gut)); padding: 0 var(--gut) 6px; scrollbar-width: none; }
	.st-ind-list::-webkit-scrollbar { display: none; }
	.st-ind-list button { flex: none; width: auto; scroll-snap-align: start; padding: 10px 16px; border: 1px solid var(--line); border-radius: 999px; font-size: 15px; white-space: nowrap; }
	.st-ind-list button small { display: none; }
	.st-ind-list button[aria-selected="true"] { padding-left: 16px; background: var(--fg); color: var(--bg); border-color: var(--fg); }
	.st-ind-body { grid-template-columns: 1fr; }
	.st-ticks { grid-column: 1; grid-row: auto; }
	.st-about { grid-template-columns: 1fr; }
	.st-about-img { aspect-ratio: 1 / 1; }
	.st-persp-view { aspect-ratio: 4 / 4.2; }
	.st-persp-tabs { left: 50%; transform: translateX(-50%); bottom: 12px; }
	.st-persp-tabs button { padding: 10px 12px; font-size: 12px; }
	.st-persp-tabs button small { display: none; }
	.st-credit { display: none; }
}
@media (max-width: 640px) {
	.st-top { height: 62px; gap: 10px; }
	.st-top-r .st-btn-sm, .st-langs { display: none; }
	.st-top-r { margin-left: auto; }
	.st-menu .st-langs { display: flex; }
	.st-hero { padding-bottom: 64px; }
	.st-scroll { display: none; }
	.st-hero-cta .st-btn { flex: 1 1 100%; justify-content: center; }
	.st-grid { grid-template-columns: 1fr; }
	.st-w, .st-w-xl { grid-column: auto; }
	.st-w-xl .st-w-img { aspect-ratio: 16 / 10; }
	.st-lab-list { grid-template-columns: 1fr; }
	.st-process ol { grid-template-columns: 1fr; }
	.st-row { grid-template-columns: 1fr; gap: 0; }
	.st-types { grid-template-columns: 1fr 1fr; }
	.st-type span { min-height: 58px; font-size: 14px; padding: 12px; }
	.st-steps li { font-size: 0; gap: 0; }
	.st-steps li span { font-size: 11px; }
	.st-send .st-btn { flex: 1 1 100%; justify-content: center; }
	.st-frames { grid-auto-rows: 64px; }
	.st-web-page { padding: 12px; gap: 10px; }
	.st-final-cta { padding: 22px 30px; }
	.st-door-go { padding: 12px 18px 12px 14px; font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.st *, .st *::before, .st *::after { animation: none !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
	.st-hero-media, .st-hero-in, .st-hero .st-h1, .st-ch-media img { transform: none !important; }
	.st-js .st-rv, .st-js .st-rv-type { opacity: 1; transform: none; clip-path: none; }
	.st-js .st-ch-media { clip-path: none; }
	.st-scroll i { transform: none; }
}