@font-face {
  font-family: Onest;
  src: url("assets/onest-cyrillic-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family: Onest;
  src: url("assets/onest-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
:root {
  color-scheme: light;
  --ink: #152e43;
  --muted: #405769;
  --paper: #eaf4fb;
  --white: #fbfdff;
  --line: #bcd2e2;
  --outline: #638398;
  --sky: #488fc4;
  --sky-deep: #18486e;
  --accent: #b62925;
  --accent-press: #941912;

  --gutter: clamp(18px, 5vw, 80px);
  font: 400 100%/1.5 Onest, "Segoe UI", Arial, sans-serif;
  background: var(--paper);
  color: var(--ink);
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }
[hidden] { display: none !important; }
h1, h2, h3, h4, p, figure { margin: 0; }
h1, h2, h3, h4 { overflow-wrap: anywhere; text-wrap: balance; }
p { text-wrap: pretty; }

a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; }
img { display: block; max-width: 100%; }
:focus-visible { outline: 3px solid var(--sky-deep); outline-offset: 4px; }
main:focus { outline: none; }
.shell { width: min(100% - var(--gutter) * 2, 1352px); margin-inline: auto; }
.definitions { position: absolute; inline-size: 0; block-size: 0; pointer-events: none; }
.icon { width: 20px; height: 20px; flex: 0 0 auto; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.skip { position: fixed; inset: 10px auto auto 10px; z-index: 5; padding: 10px 14px; background: white; transform: translateY(-150%); }
.skip:focus { transform: none; }
.site-header { background: linear-gradient(180deg, var(--white), #eef7fd); border-bottom: 1px solid var(--line); box-shadow: 0 3px 10px #15354f16; }
.header-inner { min-height: 78px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.wordmark { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 8px; min-height: 44px; font-size: 27px; font-weight: 750; letter-spacing: -.05em; line-height: 1.12; }
.wordmark img { flex: none; }
.header-inner nav { display: flex; flex-wrap: wrap; gap: clamp(15px, 3vw, 44px); }
.header-inner nav a { display: flex; align-items: center; min-height: 44px; color: var(--muted); font-size: .9375rem; font-weight: 600; }
.header-inner nav a:hover, .text-link:hover { color: var(--sky-deep); }
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 11px 19px;
  min-height: 54px;
  border: 1px solid transparent;
  border-radius: 4px;
  font-weight: 650;
  line-height: 1.3;
  text-align: center;
}
.button-outline { border-color: var(--line); background: var(--raised-face); min-height: 44px; font-size: var(--type-small); }
.button-outline:hover { border-color: var(--outline); color: var(--sky-deep); }
.button-primary { --control-edge: #102e49; --control-glint: #bfedff91; background: var(--raised-sky); color: var(--white); }
.button-primary:hover { background: linear-gradient(165deg, #26658f, #173d5d); }
.text-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: .9375rem; font-weight: 600; text-underline-offset: .2em; }
.text-link .icon { width: 16px; height: 16px; }
.down { transform: rotate(90deg); }

.hero {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background: var(--sky) url("assets/billboard-sky.webp") center 47% / cover no-repeat;
  padding-block: clamp(42px, 6vw, 93px) clamp(72px, 11vw, 158px);
}
.billboard {
  position: relative;
  isolation: isolate;
  max-width: 1100px;
  padding: clamp(26px, 4.35vw, 67px);
}
.billboard::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  transform: skewY(-1.65deg);
  background:
    radial-gradient(circle, #61594e 1.5px, transparent 2px) top 9px left 9px / 9px 9px no-repeat,
    radial-gradient(circle, #61594e 1.5px, transparent 2px) top 9px right 9px / 9px 9px no-repeat,
    radial-gradient(circle, #61594e 1.5px, transparent 2px) bottom 9px left 9px / 9px 9px no-repeat,
    radial-gradient(circle, #61594e 1.5px, transparent 2px) bottom 9px right 9px / 9px 9px no-repeat,
    url("assets/grain.svg"), var(--white);
  border: 1px solid #d6d0c7;
  box-shadow: 3px 7px 0 #6c716f, 9px 22px 40px #13384e60;
}
.billboard-rig {
  position: absolute;
  z-index: -2;
  inset: auto 1% -29px;
  height: 54px;
  transform: skewY(-1.65deg);
  border-block: 5px solid #414c4e;
  background:
    repeating-linear-gradient(126deg, transparent 0 28px, #899390 29px 33px, transparent 34px 49px),
    linear-gradient(#263433, #65726f 56%, #384643);
  box-shadow: 3px 5px 0 #1e2a2c66;
}
.billboard-rig::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: calc(100% + 4px) auto auto 50%;
  transform: translateX(-50%) skewY(1.65deg);
  width: clamp(30px, 4.4vw, 72px);
  height: 200px;
  background: linear-gradient(90deg, #3c4d52, #98a7a9 55%, #54686f 93%);
  box-shadow: 5px 0 15px #203d4d35;
}
.hero-copy { min-width: 0; }
.studio-tag {
  display: flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  margin-bottom: clamp(13px, 2vw, 27px);
  color: var(--muted);
  font-size: var(--type-small);
  font-weight: 650;
  line-height: 1.4;
  letter-spacing: .015em;
}
.studio-tag::before { content: ""; flex: 0 0 14px; height: 3px; border-radius: 2px; background: var(--accent); box-shadow: 0 1px 0 var(--accent-press); }
.hero h1 {
  color: var(--accent);
  font-size: clamp(2.45rem, 6.85vw, 6rem);
  line-height: 1.04;
  font-weight: 760;
  letter-spacing: -.035em;
  max-width: 17ch;
}
.billboard-bottom {
  display: flex;
  align-items: end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 15px 27px;
  margin-top: clamp(22px, 3vw, 37px);
  padding-top: clamp(16px, 2.2vw, 26px);
  border-top: 1px solid var(--line);
}
.intro { font-size: clamp(1rem, 1.35vw, 1.16rem); max-width: 36ch; color: var(--muted); }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.hero-actions .button {
  --control-depth: 5px;
  --control-edge: #741813;
  --control-glint: #ffd6c78a;
  min-height: 54px;
  padding-inline: 18px;
  border-color: var(--accent-press);
  border-radius: 12px;
  background: linear-gradient(155deg, var(--accent), var(--accent-press));
  color: var(--white);
}
.hero-actions .button:hover { background: linear-gradient(155deg, #a4211d, #7f1814); }
.hero-secondary { font-size: var(--type-body); }

@font-face {
  font-family: Unbounded;
  src: url("assets/unbounded-cyrillic.woff2") format("woff2");
  font-weight: 500 700;
  font-display: swap;
  unicode-range: U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family: Unbounded;
  src: url("assets/unbounded-latin.woff2") format("woff2");
  font-weight: 500 700;
  font-display: swap;
}
@font-face {
  font-family: Montserrat;
  src: url("assets/montserrat-cyrillic.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
  unicode-range: U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family: Montserrat;
  src: url("assets/montserrat-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}

:root {
  --display-font: Unbounded, Onest, "Segoe UI", sans-serif;
  --body-font: Montserrat, Onest, "Segoe UI", sans-serif;
  --type-section: clamp(1.75rem, 1.42rem + 1.8vw, 2.625rem);
  --type-subsection: clamp(1.45rem, 1.18rem + 1.25vw, 2.125rem);
  --type-card: clamp(1.1875rem, 1.07rem + .48vw, 1.5rem);
  --type-body: 1rem;
  --type-small: .875rem;
  --type-caption: .8125rem;
  --header-height: 70px;
  --panel-radius: 60px;
  --card-radius: 32px;
  --overlap: 64px;
  --panel-padding: clamp(55px, 6.1vw, 88px);
  --panel-gap: 30px;
  --raised-face: linear-gradient(155deg, var(--white) 24%, #e1eef8);
  --raised-sky: linear-gradient(155deg, #2c6f9c, #17466b 88%);
  --raised-ink: linear-gradient(155deg, #294c66, #132b40);
  --shadow: inset 0 1px 0 #fff9, 0 3px 0 #8fafc78c, 0 13px 25px -16px #183e6085;
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.skip { z-index: 12; }
.site-header { position: sticky; top: 0; z-index: 10; }
.header-inner { width: min(100% - 40px, 1100px); min-height: var(--header-height); }
.header-inner nav { gap: clamp(12px, 2.2vw, 30px); }
.header-action { border-radius: 99px; }
.menu-toggle {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--raised-face);
  color: var(--ink);
}
:is(.button, .menu-toggle, .pills button, .rail-controls button, .close-dialog) {
  box-shadow: inset 0 1px 1px var(--control-glint, #fffb), 0 var(--control-depth, 3px) 0 var(--control-edge, #a2bbcf), 0 7px 13px #1b3a5529;
}
:is(.button, .menu-toggle, .pills button, .rail-controls button, .close-dialog):active:not(:disabled) {
  box-shadow: inset 0 2px 4px #1b3a552e, 0 1px 0 var(--control-edge, #a2bbcf);
}
.panel, .site-footer { font: 450 var(--type-body)/1.6 var(--body-font); }
.panel {
  position: relative;
  isolation: isolate;
  margin-top: calc(-1 * var(--overlap));
  border-radius: var(--panel-radius) var(--panel-radius) 0 0;
  background: var(--panel-bg, var(--paper));
  padding-block: var(--panel-padding) calc(var(--panel-padding) + var(--overlap));
  box-shadow: inset 0 2px 0 var(--panel-highlight, #fff9), 0 -3px 8px #16395920;
}
.panel .shell, .site-footer .shell { width: min(100% - 40px, 1100px); }
.panel h2, .step h3, .case-caption h3, .reading-dialog h2 {
  font-family: var(--display-font);
  font-weight: 600;
  letter-spacing: -.018em;
  line-height: 1.22;
}
.panel h2 { max-inline-size: 23ch; font-size: var(--type-section); }
.panel h3 { font-size: var(--type-card); font-weight: 700; line-height: 1.25; }
.panel-heading {
  display: grid;
  justify-items: center;
  gap: 13px;
  margin: 0 auto 32px;
  text-align: center;
}
.panel-heading p { max-width: 60ch; color: var(--muted); }
.panel-action {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 24px;
  margin-top: 30px;
}
.panel-action p { color: var(--muted); text-align: center; }
.panel .button {
  min-height: 49px;
  padding: 12px 22px;
  border-radius: 99px;
  font-weight: 650;
}
.button-dark { --control-edge: #102235; --control-glint: #c4e6ff59; background: var(--raised-ink); color: var(--white); }
.button-light { background: var(--raised-face); color: var(--ink); }
.button-dark:hover, .button-light:hover { --control-edge: #102e49; --control-glint: #bfedff91; background: var(--raised-sky); color: var(--white); }
.panel-dark {
  --panel-bg: url("assets/grain.svg"), radial-gradient(ellipse at 48% 0, #285270, transparent 64%), linear-gradient(259.8deg, #102638 2%, #1b3e5b 103%);
  --panel-highlight: #b1dfff52;
  color: var(--white);
}
.panel-dark .panel-heading p, .panel-dark .panel-action p { color: #e1f0fb; }
.panel-dark :focus-visible { outline-color: #d5edff; }
.panel-dark .article-card :focus-visible { outline-color: var(--sky-deep); }
section[id] { scroll-margin-top: var(--header-height); }
.case[id], #faq { scroll-margin-top: calc(var(--header-height) + 12px); }

.service-grid, .case-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--panel-gap); }
.service-card {
  display: grid;
  grid-template-columns: minmax(0, 36%) minmax(0, 1fr);
  align-items: center;
  gap: clamp(14px, 2vw, 25px);
  min-width: 0;
  padding: clamp(20px, 2.6vw, 36px);
  border: 1px solid var(--line);
  border-radius: var(--panel-radius);
  background: var(--raised-face);
  box-shadow: var(--shadow);
}
.service-card p, .card-copy p { margin-top: 10px; color: var(--muted); }
.service-visual, .article-cover {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
}
:is(.service-visual, .article-cover)::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: auto 10% 10%;
  height: 26%;
  border-radius: 50%;
  background: radial-gradient(ellipse, #17375157, transparent 72%);
  pointer-events: none;
}
.service-visual { width: min(100%, 178px); }
.service-visual img { width: 100%; height: auto; }

.pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-bottom: 28px;
}
.pills button, .rail-controls button {
  min-height: 46px;
  padding: 9px 18px;
  border: 1px solid var(--line);
  border-radius: 99px;
  color: var(--ink);
  background: var(--raised-face);
  font-weight: 650;
}
.pills button:hover { border-color: var(--outline); color: var(--sky-deep); }
.pills button[aria-pressed="true"], .pills button[aria-selected="true"] {
  --control-edge: #102e49;
  --control-glint: #bfedff91;
  border-color: #28648c;
  background: var(--raised-sky);
  color: var(--white);
}
.case { min-width: 0; }
.case-art {
  display: grid;
  min-width: 0;
  aspect-ratio: 8 / 5;
}
.case-art > .case-preview,
.specimen-chassis {
  transform: perspective(800px) rotateX(8deg) rotateY(var(--case-yaw, -10deg));
}
.case-art > .case-preview { box-shadow: 0 14px 26px #091a2c80; }
.scope-visual .case-art {
  position: relative;
  isolation: isolate;
  padding: clamp(9px, 2.3vw, 20px);
  overflow: hidden;
  border-radius: var(--card-radius);
  border: 1px solid #fff4;
  background: url("assets/grain.svg"), radial-gradient(ellipse at 32% 9%, #fff8, transparent 66%), #b5d1e8;
  box-shadow: inset 0 2px 0 #fff7, inset 0 -12px 24px #2416192e, 0 7px 0 #15100e70, 0 12px 30px #160e0c50;
}
.scope-visual .case-art::before { content: ""; position: absolute; z-index: -1; inset: 66% 1% 1%; border-radius: 50%; background: radial-gradient(ellipse, #281b1870, transparent 70%); }
.specimen-chassis {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 0;
  padding: clamp(5px, .75vw, 10px) clamp(5px, .75vw, 10px) clamp(9px, 1vw, 16px);
  border: 1px solid #655a54;
  border-radius: 13px;
  background: linear-gradient(143deg, #5b504a, #2d2725 26%, #181414 84%);
  box-shadow: inset 1px 1px 1px #fff5, 0 4px 0 #100d0c, 0 15px 23px #2618185c;
}
.specimen-chassis::after { content: ""; position: absolute; inset: auto 46% 3px; height: 2px; border-radius: 3px; background: #aaa29d; }
.case-preview { width: 100%; height: 100%; min-width: 0; min-height: 0; object-fit: contain; }
.specimen-chassis .case-preview { border-radius: 6px; }
.case-caption { display: grid; justify-items: center; gap: 3px; padding: 20px 12px 0; text-align: center; }
.panel .case-caption h3 { font-size: var(--type-card); font-weight: 600; }
.case-category { color: #c6e3f8; font-size: var(--type-small); font-weight: 600; }
.case-link { color: #c6e3f8; text-decoration: underline; }
.case-link:hover { color: var(--white); }

.process { --panel-bg: #e0f0fa; }
.process + .studio { margin-top: 0; }
.stack { list-style: none; padding: 0; margin: 0; display: grid; gap: 18px; }
.step {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  align-items: center;
  gap: clamp(14px, 3vw, 40px);
  padding: clamp(18px, 2.6vw, 38px) clamp(20px, 4.5vw, 62px);
  border: 1px solid var(--step-line);
  border-radius: var(--card-radius);
  background: radial-gradient(ellipse at 72% 50%, var(--step-light), transparent 68%), var(--step-bg);
  color: var(--step-ink);
  box-shadow: inset 0 2px 0 #fff7, 0 5px 0 var(--step-line), 0 12px 24px -17px #153854a0;
}
.step-1 { --step-bg: #eff7fc; --step-light: #fff; --step-ink: var(--ink); --step-line: #aec9de; }
.step-2 { --step-bg: #d4e8f6; --step-light: #f5fbff; --step-ink: var(--ink); --step-line: #a0bfd6; }
.step-3 { --step-bg: #b9d8ef; --step-light: #e2f2fd; --step-ink: var(--ink); --step-line: #88adc8; }
.step-4 { --step-bg: #1b3c58; --step-light: #446887; --step-ink: var(--white); --step-line: #112a40; }
.step h3 { max-inline-size: 18ch; font-size: clamp(1.3125rem, 1rem + 1.45vw, 2rem); font-weight: 600; line-height: 1.22; }
.step-copy p { max-inline-size: 40ch; margin-top: 10px; font-size: .9375rem; line-height: 1.55; }
.step-art { width: 100%; height: auto; }

.rail-track {
  --rail-cols: 3;
  display: grid;
  grid-template-columns: repeat(var(--rail-cols), minmax(0, 1fr));
  gap: var(--panel-gap);
}
[data-rail-ready] .rail-track {
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - (var(--rail-cols) - 1) * var(--panel-gap)) / var(--rail-cols));
  overflow-x: auto;
  scroll-snap-type: inline mandatory;
  padding: 5px 0 12px;
  scrollbar-width: thin;
}
[data-rail-ready] .rail-track > * { scroll-snap-align: start; }
.rail-controls { display: flex; justify-content: center; gap: 8px; margin-top: 12px; }
.rail-controls button { display: grid; place-items: center; width: 50px; min-height: 50px; padding: 0; }
.rail-controls button:enabled:hover { color: var(--sky-deep); border-color: var(--outline); }
.rail-controls button:disabled { opacity: .55; }
.rail-controls [data-prev] svg { transform: rotate(180deg); }
.studio-facts, .studio-grid { display: grid; gap: var(--panel-gap); }
.studio-facts {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0 0 var(--panel-gap);
}
.studio-facts > div {
  display: flex;
  flex-direction: column-reverse;
  justify-content: start;
  gap: 8px;
  padding: clamp(16px, 2.6vw, 30px);
  border: 1px solid var(--line);
  border-radius: var(--card-radius);
  background: var(--raised-face);
  box-shadow: var(--shadow);
}
.studio-facts dt { color: var(--muted); font-size: var(--type-small); }
.studio-facts dd {
  margin: 0;
  color: var(--sky-deep);
  font-size: clamp(1.5rem, .9rem + 2.4vw, 2.75rem);
  font-weight: 750;
  line-height: 1.13;
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
}
.studio-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 5fr); }
.studio-card {
  min-width: 0;
  padding: clamp(20px, 3.5vw, 40px);
  border: 1px solid var(--line);
  border-radius: var(--panel-radius);
  background: var(--raised-face);
  box-shadow: var(--shadow);
}
.studio-legal {
  background: url("assets/grain.svg"), radial-gradient(ellipse at 72% 12%, #f6fbff, transparent 75%), #d5e8f5;
}
.studio-legal p { margin-top: 8px; color: var(--muted); }
.studio-legal .studio-entity { color: var(--ink); font-size: 1.1875rem; font-weight: 650; }
.studio-link { margin-top: 8px; color: var(--sky-deep); text-decoration: underline; }
.studio-terms dl, .studio-requisites { margin: 14px 0 0; }
.studio-terms dl > div { padding-block: 10px; border-top: 1px solid var(--line); }
.studio-terms dt { font-weight: 650; }
.studio-terms dd { margin: 2px 0 0; color: var(--muted); }
.studio-requisites > div {
  display: grid;
  grid-template-columns: minmax(0, 7.25rem) minmax(0, 1fr);
  gap: 5px 12px;
  padding-block: 7px;
  border-top: 1px solid var(--line);
}
.studio-requisites dt { color: var(--muted); }
.studio-requisites dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

.scope {
  --panel-bg: radial-gradient(ellipse at 48% 8%, #fafdff, transparent 67%), #d9ecf9;
  padding-block: clamp(55px, 8vw, 112px);
}
.scope, .scope + .panel { margin-top: 0; }
.scope .panel-heading { margin-bottom: clamp(24px, 4vw, 48px); }
.scope-tabs { gap: 10px; margin-bottom: clamp(23px, 3vw, 36px); }
.scope-tabs button { min-height: 52px; }
.scope-table + .scope-table { margin-top: 20px; }
.scope-note { color: var(--muted); font-size: var(--type-small); }
.scope-estimate {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(10px, 2vw, 20px);
  margin: 0;
}
.scope-estimate > div {
  padding: clamp(14px, 2.5vw, 28px);
  border: 1px solid var(--line);
  border-radius: var(--card-radius);
  background: var(--raised-face);
  box-shadow: var(--shadow);
}
.scope-estimate > div:last-child { color: var(--white); background: var(--raised-sky); }
.scope-estimate dt { font-size: var(--type-small); font-weight: 600; }
.scope-estimate dd {
  margin: 4px 0 0;
  font-size: clamp(1.0625rem, .75rem + 1.35vw, 2rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.25;
}
.scope-note { margin: 14px 0 0; }
.scope-delivery {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  align-items: center;
  gap: clamp(20px, 4vw, 52px);
  margin-top: clamp(18px, 3vw, 32px);
  padding: clamp(18px, 3vw, 36px);
  border: 1px solid var(--line);
  border-radius: var(--panel-radius);
  background: var(--raised-face);
  box-shadow: var(--shadow);
}
.scope-copy h3 { font-size: clamp(1.375rem, 1.1rem + 1.2vw, 2rem); }
.scope-checklist {
  display: grid;
  gap: 14px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}
.scope-checklist li {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
}
.scope-check {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #d6eaf8;
  color: var(--sky-deep);
}
.scope-check .icon { width: 16px; height: 16px; }
.scope-visual { min-width: 0; }
.scope-visual figcaption {
  margin-top: 16px;
  color: var(--muted);
  font-size: var(--type-small);
}
.scope-visual-analytics {
  display: grid;
  place-items: center;
  aspect-ratio: 8 / 5;
  border-radius: var(--card-radius);
  background: url("assets/grain.svg"), radial-gradient(ellipse at 47% 35%, #eff8ff, #c3dcef 82%);
  box-shadow: inset 0 2px 8px #294f7126, 0 1px 0 #fff9;
}
.scope-visual-analytics img { width: 80%; height: auto; }
.scope-table :is(dt, dd) { overflow-wrap: anywhere; }

.integration-list, .logo-group {
  list-style: none;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 0;
  margin: 0;
}
.integration-list li, .logo-group span {
  display: grid;
  align-content: center;
  min-height: 54px;
  padding: 9px 24px;
  background: var(--raised-face);
  border: 1px solid var(--line);
  border-radius: 99px;
  box-shadow: var(--shadow);
  white-space: nowrap;
  font-weight: 700;
}
.integration-marquee { display: grid; gap: 10px; overflow: hidden; padding-block: 4px 7px; mask-image: linear-gradient(to right, transparent, black 11%, black 89%, transparent); }
.logo-row { display: flex; gap: 12px; width: max-content; }
.logo-group { flex-wrap: nowrap; flex: none; }
.integration-banner {
  position: relative;
  isolation: isolate;
  overflow: clip;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  align-items: center;
  gap: clamp(12px, 3vw, 36px);
  margin-top: 32px;
  padding: clamp(22px, 4.5vw, 50px);
  border-radius: var(--panel-radius);
  color: var(--white);
  background: url("assets/grain.svg"), radial-gradient(ellipse at 78% 42%, #397ba6, transparent 60%), linear-gradient(150deg, #2b648d, #1a4160);
  box-shadow: inset 0 2px 0 #c7eaff77, 0 5px 0 #16334c, 0 14px 26px -12px #183e6086;
}
.integration-banner h3 { font-size: var(--type-subsection); }
.integration-banner p { margin-top: 8px; max-width: 45ch; }
.integration-banner .button { margin-top: 20px; }
.integration-banner .button:hover { --control-edge: #102235; background: var(--raised-ink); }
.integration-banner :focus-visible { outline-color: var(--white); }
.integration-art { width: min(100%, 370px); height: auto; justify-self: center; transform: translateY(var(--parallax, 0px)); }

.article-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-radius: var(--card-radius);
  border: 1px solid var(--line);
  background: var(--raised-face);
  color: var(--ink);
  box-shadow: var(--shadow);
}
.article-cover {
  gap: 6px;
  align-content: center;
  min-height: 168px;
  padding: 13px 12px 10px;
  border-radius: var(--card-radius) var(--card-radius) 0 0;
  background: url("assets/grain.svg"), radial-gradient(ellipse at 45% 26%, #fff9, transparent 70%), var(--cover-color, #d9ecf8);
  color: var(--sky-deep);
  box-shadow: inset 0 1px 0 #fff8, inset 0 -2px 4px #17375119;
}
.article-cover img { width: min(78%, 204px); height: auto; }
.article-cover-form { --cover-color: #edf2f7; }
.article-cover-chart { --cover-color: #bcdaf0; }
.card-copy { display: flex; flex-direction: column; align-items: start; flex: 1; padding: 22px; }
.card-copy .text-link { padding-inline: 0; margin-top: auto; color: var(--sky-deep); border: 0; background: none; text-align: left; }
.card-copy .text-link .icon, .contact-copy summary .icon { box-sizing: content-box; padding: 5px; border-radius: 50%; background: var(--raised-face); box-shadow: var(--shadow); }
.card-copy .text-link:hover { text-decoration: underline; }
.card-copy .article-meta { margin: 0 0 7px; font-size: var(--type-small); font-weight: 650; color: var(--muted); }

.contact { --panel-bg: var(--paper); padding-bottom: var(--panel-padding); }
.contact-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: start; gap: var(--panel-gap); }
.contact-copy, .lead-form { border-radius: var(--card-radius); padding: clamp(20px, 3.5vw, 40px); }
.contact-copy { border: 1px solid var(--line); background: var(--raised-face); box-shadow: var(--shadow); }
.contact-card-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.contact-card-heading img { flex: none; width: clamp(76px, 13vw, 132px); height: auto; }
.contact-copy .contact-card-heading { margin-bottom: 12px; }
.contact-copy details { border-top: 1px solid var(--line); }
.contact-copy summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 51px; padding: 9px 0; list-style: none; cursor: pointer; font-weight: 650; }
.contact-copy summary::-webkit-details-marker { display: none; }
.contact-copy details[open] summary .icon { transform: rotate(45deg); }
.contact-copy details p { padding-bottom: 13px; color: var(--muted); }
.lead-form { display: grid; gap: 14px; color: var(--white); background: url("assets/grain.svg"), linear-gradient(155deg, #2e6b95, #204f74 58%, #193e5b); box-shadow: inset 0 2px 0 #c4e8ff8c, 0 5px 0 #16334c, 0 14px 26px -12px #183e6086; }
.field { display: grid; gap: 6px; }
.contact-choice { padding: 0; margin: 0; border: 0; min-width: 0; }
.contact-choice legend { padding: 0; font-weight: 600; }
.contact-options { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.contact-options label { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 12px; border: 1px solid var(--outline); border-radius: 4px; cursor: pointer; }
.contact-options label:has(:checked) { border-color: var(--sky-deep); }
.contact-options input { margin: 0; accent-color: var(--accent); }
label { font-weight: 600; }
label span { color: var(--muted); font-weight: 450; }
input:not([type="radio"]), textarea { width: 100%; min-width: 0; min-height: 48px; border: 1px solid var(--outline); border-radius: 4px; padding: 10px 12px; background: var(--white); color: var(--ink); font-size: var(--type-body); }
textarea { resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
.lead-form input[aria-invalid="true"] { border-color: #a12239; }
.field-error, .form-status[data-error="true"] { color: #a12239; }
.form-note, .field-error, .form-status { font-size: var(--type-small); }
.form-note { color: var(--muted); }
.form-status { font-weight: 600; }
.form-status:empty { position: absolute; }
.submit { justify-content: space-between; }
.submit:disabled { background: #565f75; }
.lead-form :is(input:not([type="radio"]), textarea) {
  border: 2px solid #fff9;
  border-radius: 20px;
  background: #102f4d55;
  box-shadow: inset 0 3px 6px #0a20364d, 0 1px 0 #b7ddf759;
  color: var(--white);
}
.lead-form :is(input, textarea)::placeholder, .lead-form :is(label span, .form-note) { color: #e3f1fc; }
.lead-form :focus-visible { outline-color: var(--white); }
.lead-form .contact-options label { border-color: #fff9; border-radius: 99px; box-shadow: 0 2px 0 #142f46; }
.lead-form .contact-options label:has(:checked) { color: var(--sky-deep); background: var(--raised-face); }
.lead-form .contact-options label:focus-within { outline: 2px solid var(--white); outline-offset: 3px; }
.lead-form input[aria-invalid="true"] { border-color: #ffd0cd; }
.lead-form .field-error, .lead-form .form-status[data-error="true"] { color: #ffe4e2; }
.lead-form .submit { --control-edge: #93b3ca; --control-glint: #fffb; background: var(--raised-face); color: var(--sky-deep); }
.lead-form .submit:hover:not(:disabled) { background: #e6f3fc; }
.lead-form .submit:disabled { opacity: .75; }

.reading-dialog {
  width: min(100% - 32px, 610px);
  max-height: calc(100dvh - 32px);
  border: 1px solid var(--line);
  border-radius: var(--card-radius);
  padding: clamp(22px, 5vw, 42px);
  color: var(--ink);
  background: var(--raised-face);
  box-shadow: 0 6px 0 #a2bed1, 0 26px 55px #142d4369;
  font: 450 var(--type-body)/1.6 var(--body-font);
}
.reading-dialog::backdrop { background: #102638b8; }
html:has(.reading-dialog[open]) { overflow: hidden; }
.reading-dialog h2 { font-size: clamp(1.3rem, 4vw, 1.75rem); }
.reading-dialog p { margin-top: 14px; max-inline-size: 65ch; }
.reading-dialog form { display: flex; justify-content: end; margin-bottom: 12px; }
.close-dialog { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 50%; color: var(--ink); background: var(--raised-face); }
.site-footer { padding-block: 22px; color: var(--white); background: var(--raised-ink); box-shadow: inset 0 2px 0 #91bddc65; }
.footer-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 18px; }
.footer-inner p { color: #e1f0fb; font-size: var(--type-small); }
.footer-inner a:hover { color: #c6e3f8; }
.site-footer :focus-visible { outline-color: var(--white); }

@media (max-width: 959px) {
  .rail-track { --rail-cols: 2; }
}
@media (max-width: 820px) {
  :root { --header-height: 60px; --panel-gap: 20px; --overlap: 36px; }
  .header-inner { position: relative; gap: 6px; }
  .header-inner:has(.menu-toggle:not([hidden])) { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; }
  .header-inner .menu-toggle { grid-column: 1; grid-row: 1; }
  .header-inner .wordmark { grid-column: 2; grid-row: 1; justify-self: center; max-width: 100%; min-width: 0; gap: 5px; font-size: clamp(1rem, 3.6vw, 1.4rem); }
  .header-inner .wordmark img { width: 28px; height: auto; }
  .header-inner .wordmark span { min-width: 0; }
  .header-action { grid-column: 3; grid-row: 1; margin: 0; padding: 6px 10px; gap: 6px; font-size: var(--type-caption); }
  .header-action .icon { width: 15px; height: 15px; }
  .header-inner[data-mobile-nav] nav {
    position: absolute;
    inset: calc(100% + 1px) 0 auto;
    display: grid;
    gap: 0;
    max-height: calc(100dvh - var(--header-height) - 16px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 8px 14px;
    border: 1px solid var(--line);
    border-radius: 0 0 20px 20px;
    background: var(--white);
    box-shadow: 0 12px 24px #25201e22;
  }
  .header-inner[data-mobile-nav] nav a + a { border-top: 1px solid var(--line); }
  .header-inner:not([data-mobile-nav]) nav { width: 100%; flex-wrap: wrap; }
}
@media (max-width: 720px) {
  :root { --panel-radius: 30px; --card-radius: 24px; --panel-padding: 42px; }
  .service-grid, .case-list, .contact-grid { grid-template-columns: minmax(0, 1fr); }
  .service-card { grid-template-columns: minmax(70px, 30%) minmax(0, 1fr); padding: 20px; gap: 6px 14px; }
  .service-card > div:not(.service-visual) { display: contents; }
  .service-card p { grid-column: 1 / -1; margin-top: 4px; }
  .case-caption { padding-inline: 0; }
  .studio-grid { grid-template-columns: minmax(0, 1fr); }
  .scope-delivery { grid-template-columns: minmax(0, 1fr); }
  .studio-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .studio-facts > :last-child { grid-column: 1 / -1; }
}
@media (max-width: 375px) {
  .studio-requisites > div { grid-template-columns: minmax(0, 1fr); gap: 0; }
}
@media (max-width: 599px) {
  .panel-heading { justify-items: start; text-align: left; margin-bottom: 24px; }
  .panel-action { justify-content: start; }
  .panel-action p { text-align: left; }
  .pills { justify-content: start; margin-bottom: 22px; }
  .pills button { padding-inline: 13px; font-size: var(--type-small); }
  .rail-track { --rail-cols: 1; }
  .rail-controls { justify-content: start; }
  .integration-banner { grid-template-columns: minmax(0, 1fr); }
  .integration-art { width: min(100%, 270px); }
  .footer-inner p { flex-basis: 100%; order: 1; }
}
@media (max-width: 360px) {
  .header-action .icon { display: none; }
  .scope-estimate { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .panel[data-layer]:not(:target):not(:has(:focus-visible)) { position: sticky; top: var(--layer-top, var(--header-height)); }
  .stack.is-sticky {
    isolation: isolate;
    grid-template-rows: repeat(var(--stack-count), 1fr) var(--stack-tail);
  }
  /* The final grid track keeps the last card pinned before the next section enters. */
  .stack.is-sticky::after { content: ""; pointer-events: none; }
  .stack.is-sticky .step { position: sticky; top: var(--stack-pin); }
  :is(.button, .menu-toggle, .pills button, .rail-controls button, .close-dialog) { transition: color 150ms ease, border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease; }
  :is(.button, .menu-toggle, .pills button, .rail-controls button, .close-dialog):active:not(:disabled) { transform: translateY(2px); }
  .case-art > .case-preview, .specimen-chassis { transition: transform 200ms ease; }
  .case-art.is-revealing { animation: cover-arrival 280ms ease-out; }
  .logo-row { animation: logo-scroll 48s linear infinite; }
  .logo-row-reverse { animation-direction: reverse; animation-delay: -3s; }
  .integration-marquee:hover .logo-row { animation-play-state: paused; }
}
@media (prefers-reduced-motion: reduce) {
  .integration-marquee { display: none; }
  .integrations .integration-list { position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal; }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .case-art:hover > :is(.case-preview, .specimen-chassis) { transform: perspective(800px) rotateX(3deg) rotateY(calc(var(--case-yaw, -10deg) / 2)) scale(1.025); }
}
@keyframes logo-scroll { to { transform: translateX(calc(-50% - 6px)); } }
@keyframes cover-arrival { from { opacity: .82; } to { opacity: 1; } }
@media (forced-colors: active) {
  .button, .pills button { border: 1px solid ButtonText; }
  .billboard-rig, .integration-art { display: none; }
}
@media (max-width: 680px) {
  .step { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .step h3 { max-inline-size: none; }
  .step-art { width: min(100%, 400px); max-height: clamp(120px, 28svh, 300px); object-fit: contain; justify-self: center; }
  .hero { padding-block: 33px 76px; }
  .billboard { padding: 26px clamp(17px, 4.7vw, 28px) 21px; }
  .billboard::before, .billboard-rig { transform: skewY(-2deg); }
  .billboard-rig { height: 37px; inset-block-end: -17px; border-width: 3px; }
  .hero h1 { font-size: clamp(2.2rem, 9.5vw, 4.2rem); max-width: 100%; }
  .billboard-bottom { align-items: start; margin-top: 20px; }
  .hero-actions { display: grid; grid-template-columns: minmax(0, 1fr); width: min(100%, 340px); }
  .hero-actions .button { justify-content: space-between; }
}
@media (max-width: 360px) {
  .hero h1 { font-size: 2.02rem; }
}
@media (max-height: 540px) {
  .hero { padding-block: 22px 64px; }
  .billboard { padding-block: 20px; }
  .billboard-bottom { margin-top: 12px; padding-top: 12px; }
}
@media (min-width: 681px) and (max-height: 540px) {
  .hero h1 { font-size: clamp(2.2rem, 4.8vw, 4.6rem); max-width: none; }
  .hero .intro { max-width: 28ch; }
}