/* Shared effects; page geometry is based on the supplied PDF export. */
.halftone-background {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: #160629 url("/assets/fire-home/assets/banners/BackgroundImage.png") center / cover no-repeat;
}

.halftone-background > canvas[data-halftone-flow] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
    opacity: 0;
}

.halftone-background > canvas[data-state="ready"] { opacity: 1; }

[data-contact-form][aria-busy="true"] { cursor: progress; }
[data-contact-status] { min-height: 1.5em; }

[data-perspective-stage] {
    position: relative;
    width: 100%;
    aspect-ratio: 1220 / 335;
    overflow: hidden;
}
[data-perspective-inner] {
    position: absolute;
    top: 0;
    left: 0;
    width: 1220px;
    height: 335px;
    transform-origin: 0 0;
}
[data-perspective-art] {
    position: absolute;
    left: 290px;
    top: 50px;
    width: 1764px;
    height: 540px;
    max-width: none;
    transform-origin: 0 0;
    will-change: transform;
}

/* --design-unit — масштабная единица макета шириной 1920 px: 1 px на 1920 px,
   пропорционально меньше на узких экранах; выше 1920 px не растёт.
   На мобильных устройствах и внутри иллюстраций значение переопределяется. */
:root { --ink: #0c0628; --orange: #ff7600; --pale: #eef6fa; --design-unit: min(.0520833333vw, 1px); }
.site { margin: 0; color: var(--ink); background: #fff; font-family: Inter, Arial, sans-serif; }
.site *, .site *::before, .site *::after { box-sizing: border-box; }
.site main { max-width: 1920px; margin-inline: auto; overflow: clip; }
.site h1, .site h2, .site h3, .site p, .site ul, .site ol { margin: 0; }
.site ul, .site ol { list-style: none; padding: 0; }
.site a { color: inherit; text-decoration: none; }
.site button, .site input, .site textarea { font: inherit; }
.site button, .site a, .site input[type=checkbox] { touch-action: manipulation; }
.site button { cursor: pointer; }
.site :focus-visible { outline: 2px solid var(--orange); outline-offset: 5px; }
.site button:disabled { cursor: default; opacity: .55; }
.sr-only, .trap { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip-link { position: fixed; z-index: 100; top: 12px; left: 12px; padding: 12px; background: #fff; transform: translateY(-200%); }
.skip-link:focus { transform: none; }
.hero { position: relative; height: calc(1080 * var(--design-unit)); background: linear-gradient(#aaa6b7, #aaa6b7) 45.833333% 0 / 1px 100% no-repeat, linear-gradient(#aaa6b7, #aaa6b7) 0 calc(310 * var(--design-unit)) / 100% 1px no-repeat, linear-gradient(#aaa6b7, #aaa6b7) 0 calc(555 * var(--design-unit)) / 100% 1px no-repeat; }
.header { position: absolute; inset: calc(20 * var(--design-unit)) calc(70 * var(--design-unit)) auto; display: flex; align-items: center; justify-content: space-between; }
.brand { display: block; width: calc(134 * var(--design-unit)); height: calc(28 * var(--design-unit)); }
.header nav { display: flex; align-items: center; gap: calc(28 * var(--design-unit)); font-size: calc(15 * var(--design-unit)); }
.button { display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: calc(8 * var(--design-unit)); padding: calc(10 * var(--design-unit)); }
.site .button-dark { color: #fff; background: var(--ink); min-height: calc(35 * var(--design-unit)); }
.hero h1 { font-size: calc(150 * var(--design-unit)); font-weight: 750; line-height: 1; letter-spacing: -.055em; }
.hero h1 > span { position: absolute; white-space: nowrap; }
.hero-development { left: calc(70 * var(--design-unit)); top: calc(110 * var(--design-unit)); }
.hero-accessible { right: calc(70 * var(--design-unit)); top: calc(574 * var(--design-unit)); }
.hero-everyone { left: calc(922 * var(--design-unit)); top: calc(720 * var(--design-unit)); letter-spacing: -.025em; }
.hero-marker { position: absolute; left: calc(70 * var(--design-unit)); top: calc(744 * var(--design-unit)); width: calc(85 * var(--design-unit)); height: calc(139 * var(--design-unit)); }
.language { position: absolute; left: calc(70 * var(--design-unit)); top: calc(957 * var(--design-unit)); border: 1px solid #625d76; border-radius: calc(5 * var(--design-unit)); font-size: calc(12 * var(--design-unit)); padding: calc(10 * var(--design-unit)); }
.hero-description { position: absolute; left: calc(1272 * var(--design-unit)); top: calc(940 * var(--design-unit)); width: calc(578 * var(--design-unit)); font-size: calc(16 * var(--design-unit)); line-height: calc(19 * var(--design-unit)); letter-spacing: -.025em; }
.site { --flow-height: calc(558 * var(--design-unit)); --pixel-height: calc(var(--flow-height) * 0.5505376344); }
.flow-banner { height: var(--flow-height); }
.pixel-field { position: absolute; inset: auto 0 0; width: 100%; height: var(--pixel-height); pointer-events: none; overflow: hidden; }
.pixel-cell { position: absolute; background-color: #fff; }
[data-pixel-field=grey] .pixel-cell { background-color: var(--pale); }
.services { position: relative; height: calc(1212 * var(--design-unit)); padding: calc(310 * var(--design-unit)) calc(70 * var(--design-unit)) 0; }
.services h2, .contact h2 { font-size: calc(80 * var(--design-unit)); line-height: 1.1; font-weight: 750; letter-spacing: -.07em; }
.services-list ul { margin-top: calc(60 * var(--design-unit)); font-size: calc(40 * var(--design-unit)); line-height: 1.2; letter-spacing: -.065em; }
.services-list li + li { margin-top: calc(32 * var(--design-unit)); }
.service-notes { position: absolute; top: calc(320 * var(--design-unit)); right: calc(70 * var(--design-unit)); width: calc(584 * var(--design-unit)); height: calc(600 * var(--design-unit)); transform: rotate(var(--notes-angle, 0deg)); transform-origin: 50% 50%; font-size: calc(20 * var(--design-unit)); line-height: 1.2; letter-spacing: -.025em; }
.development-note { padding: calc(12 * var(--design-unit)) calc(20 * var(--design-unit)); background: #2ba900; color: white; border-radius: calc(20 * var(--design-unit)); transform: rotate(5deg); }
.process-note { margin-top: calc(110 * var(--design-unit)); transform: rotate(-5deg); }
.process-note h3 { display: table; font-size: inherit; margin-bottom: calc(12 * var(--design-unit)); padding: .55em .7em; background: #fff; border-radius: .7em; }
.process-note li { padding: calc(12 * var(--design-unit)) calc(20 * var(--design-unit)); color: #fff; background: #ff8900; border-radius: calc(20 * var(--design-unit)); }
.process-note li + li { margin-top: calc(12 * var(--design-unit)); }
.portfolio { position: relative; }
.project { position: relative; height: calc(1080 * var(--design-unit)); background: white; }
.project-info { position: absolute; top: calc(219 * var(--design-unit)); bottom: calc(220 * var(--design-unit)); left: calc(70 * var(--design-unit)); width: calc(530 * var(--design-unit)); }
.project-logo { display: block; width: calc(var(--logo-width) * var(--design-unit)); height: calc(57 * var(--design-unit)); object-fit: contain; object-position: left center; }
.project-mps .project-logo { height: calc(54 * var(--design-unit)); margin-bottom: calc(3 * var(--design-unit)); }
.project h2 { margin-top: calc(40 * var(--design-unit)); font-size: calc(30 * var(--design-unit)); font-weight: 400; line-height: 1.2; letter-spacing: -.04em; margin-bottom: calc(40 * var(--design-unit)); }
.project-tags { position: absolute; bottom: 0; display: flex; flex-wrap: wrap; gap: calc(20 * var(--design-unit)); font-size: calc(16 * var(--design-unit)); line-height: calc(19 * var(--design-unit)); color: #151515; }
.project-tags li { background: var(--pale); padding: calc(12 * var(--design-unit)) calc(20 * var(--design-unit)); border-radius: calc(30 * var(--design-unit)); }
.project-art { position: absolute; left: calc(669 * var(--design-unit)); top: calc(219 * var(--design-unit)); width: calc(1181 * var(--design-unit)); height: calc(641 * var(--design-unit)); border-radius: calc(54 * var(--design-unit)); overflow: hidden; isolation: isolate; }
.project-screen { position: absolute; display: block; width: calc(var(--asset-width) * var(--design-unit)); height: auto; }
.project-poki .project-art { background: #c45429; }
.project-poki .screen-1 { left: 3.9%; top: 8.9%; }
.project-poki .screen-2 { left: 33.7%; top: -.4%; }
.padel-pattern { position: absolute; left: 0; right: 0; bottom: 9%; height: 11%; background: url("/assets/fire-home/assets/banners/1stSlide/arrowpadel.svg") left center / auto 100% repeat-x; opacity: .2; }
.project-winery .project-art { background: linear-gradient(100deg,#591124,#230000); }
.project-winery .screen-1 { left: 2.2%; top: -7%; }
.project-winery .screen-2 { left: 50.4%; top: -6%; }
.project-winery .screen-3 { left: 30.5%; top: 54%; }
.project-wannacry .project-art { background: linear-gradient(110deg,#090f00,#a6ff0a); }
.project-wannacry .screen-1 { left: 8.8%; top: 10.2%; z-index: 1; }
.project-wannacry .screen-2 { left: 39%; top: 26.5%; }
.project-mps .project-art { background: linear-gradient(105deg,#030108,#21085b); }
.project-mps .screen-1 { left: 14.2%; top: 22.5%; z-index: 2; }
.project-mps .screen-2 { left: 32.3%; top: -15.9%; }
.project-mps .screen-3 { left: 62.9%; top: 19%; z-index: 1; }
.project-mps .screen-4 { left: 60.5%; top: 62.3%; z-index: 3; }
.project-fincom .project-art { background: linear-gradient(100deg,#003509,#001409); }
.project-fincom .screen-1 { left: 10.8%; top: -.4%; }
.project-fincom .screen-2 { left: 64.7%; top: 72%; }
.why-us { position: relative; height: calc(1075 * var(--design-unit)); display: flex; align-items: center; padding-inline: calc(70 * var(--design-unit)); }
.advantages { width: calc(730 * var(--design-unit)); font-size: calc(32 * var(--design-unit)); line-height: calc(39 * var(--design-unit)); letter-spacing: -.06em; }
.advantages li + li { margin-top: calc(32 * var(--design-unit)); }
.why-title[data-perspective-stage] { position: absolute; right: calc(20 * var(--design-unit)); top: calc(330 * var(--design-unit)); width: calc(1220 * var(--design-unit)); }
.contact-pixels { position: relative; width: 100%; height: var(--pixel-height); }
.contact-content { min-height: calc(513 * var(--design-unit)); background: var(--pale); padding: calc(90 * var(--design-unit)) calc(70 * var(--design-unit)); display: grid; grid-template-columns: 1fr calc(732 * var(--design-unit)); gap: calc(80 * var(--design-unit)); }
.contact-copy { padding-top: 0; }
.contact-copy p { margin-top: calc(32 * var(--design-unit)); font-size: calc(32 * var(--design-unit)); line-height: calc(39 * var(--design-unit)); letter-spacing: -.06em; }
.contact form { display: grid; align-content: start; gap: calc(22 * var(--design-unit)); font-size: calc(24 * var(--design-unit)); line-height: calc(29 * var(--design-unit)); }
.contact input[type=tel], .contact textarea { width: 100%; border: 0; background: #fff; border-radius: calc(18 * var(--design-unit)); padding: calc(20 * var(--design-unit)); color: var(--ink); letter-spacing: -.045em; }
.contact input[type=tel] { height: calc(62 * var(--design-unit)); }
[data-contact-form] textarea { max-height: 400px; overflow-y: auto; }
.contact textarea { height: calc(120 * var(--design-unit)); min-height: calc(120 * var(--design-unit)); resize: vertical; }
.contact input::placeholder, .contact textarea::placeholder { color: #c7c5dd; opacity: 1; }
.consent { display: flex; align-items: flex-start; gap: calc(10 * var(--design-unit)); font-size: calc(16 * var(--design-unit)); line-height: 1.5; }
.consent input { margin: 0; accent-color: var(--orange); width: calc(20 * var(--design-unit)); height: calc(20 * var(--design-unit)); flex-shrink: 0; }
.button-orange { letter-spacing: -.045em; justify-self: start; color: #fff; background: var(--orange); padding: calc(16 * var(--design-unit)) calc(20 * var(--design-unit)); border-radius: calc(18 * var(--design-unit)); }
.contact [data-contact-status] { font-size: max(12px, calc(16 * var(--design-unit))); line-height: 1.4; }
.contact [data-contact-status]:empty { display: none; }
/* Activate only after receiving mouse input; cover links, fields and busy/disabled states. */
/* Readable fallback until the separate mobile design is supplied. */
@media (max-width: 899px) {
    :root { --design-unit: .075vw; }
    .header { inset: 20px 22px auto; }
    .brand { width: 120px; height: 25px; }
    .header nav { font-size: 11px; gap: 16px; }
    .button { padding: 10px; border-radius: 6px; }
    .hero { height: 780px; }
    .hero h1 { font-size: clamp(48px, 10.5vw, 94px); }
    .hero-development { left: 22px; top: 120px; }
    .hero-accessible { right: 22px; top: 300px; }
    .hero-everyone { left: auto; right: 22px; top: 390px; }
    .hero-marker { left: 22px; top: 450px; width: 35px; height: 58px; }
    .hero-description { left: 22px; top: auto; bottom: 50px; width: calc(100% - 44px); font-size: 15px; line-height: 20px; }
    .language { top: 540px; left: 22px; font-size: 11px; padding: 6px; }
    .site { --flow-height: 280px; }
    
    .services { height: auto; padding: 90px 22px 100px; }
    .services h2, .contact h2 { font-size: 42px; }
    .services-list ul { font-size: 23px; margin-top: 35px; }
    .services-list li + li { margin-top: 22px; }
    .service-notes { position: relative; top: auto; right: auto; width: calc(100% - 16px); height: auto; margin: 70px auto 0; font-size: 16px; }
    .development-note, .process-note li { padding: 15px; border-radius: 14px; }
    .process-note { margin-top: 60px; }
    .process-note h3 { margin-bottom: 12px; }
    .process-note li + li { margin-top: 10px; }
    .project { height: auto; padding: 45px 22px; }
    .project-info { position: relative; inset: auto; width: auto; }
    .project-logo { width: calc(var(--logo-width) * .8px); height: 46px; }
    .project-mps .project-logo { height: 43px; }
    .project h2 { margin-top: 20px; font-size: 24px; }
    .project-tags { position: static; margin-top: 25px; font-size: 12px; line-height: 1.2; gap: 10px; }
    .project-tags li { padding: 8px 12px; border-radius: 20px; }
    .project-art { --design-unit: calc((100vw - 44px) / 1181); position: relative; inset: auto; width: 100%; height: auto; aspect-ratio: 1181 / 641; border-radius: 24px; margin-top: 25px; }
    .why-us { height: auto; min-height: 600px; padding: 250px 22px 70px; }
    .advantages { width: 100%; font-size: 23px; line-height: 1.3; }
    .advantages li + li { margin-top: 24px; }
    .why-title[data-perspective-stage] { top: 55px; right: 0; width: 100%; }
    
    .contact-content { padding: 45px 22px 30px; grid-template-columns: 1fr; gap: 35px; }
    .contact-copy { padding: 0; }
    .contact-copy p { margin-top: 22px; font-size: 23px; line-height: 1.3; }
    .contact-copy br { display: none; }
    .contact form { gap: 16px; font-size: 16px; line-height: 1.4; }
    .contact input[type=tel], .contact textarea { padding: 14px; border-radius: 12px; }
    .contact input[type=tel] { height: 56px; }
    .contact textarea { min-height: 110px; }
    .consent { gap: 8px; font-size: 12px; }
    .consent input { width: 18px; height: 18px; }
    .button-orange { padding: 14px 18px; border-radius: 12px; }
}

@font-face {
    font-family: Inter;
    src: url("/assets/fire-home/assets/Fonts/InterVariable.woff2") format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}
html { scrollbar-gutter: stable; }
.site [hidden] { display: none !important; }
.site .button { background: transparent; color: var(--ink); transition: background-color .2s ease, color .2s ease, opacity .2s ease, box-shadow .2s ease; }
.site .button:not(:disabled):is(:hover, :focus-visible) { background: var(--ink); color: #fff; }
.site .button-orange { background: var(--orange); color: #fff; }
.site .button-orange:disabled { transition: none; }
.site .language { font-size: calc(12 * var(--design-unit)); font-weight: 400; line-height: 1.2; border: 1px solid #625d76; border-radius: calc(5 * var(--design-unit)); padding: calc(10 * var(--design-unit)); }
.site .consent { cursor: pointer; }
.site .consent input { transition: background-color .2s ease, box-shadow .2s ease; border-radius: 3px; }
.site .consent:is(:hover, :focus-within) input { box-shadow: 0 0 0 4px rgb(12 6 40 / 10%); }
.site .consent span { transition: color .2s ease; }
.site .consent:hover span { color: #5a347e; }
.header { position: fixed; top: calc(20 * var(--design-unit)); left: max(calc(70 * var(--design-unit)), calc((100vw - 1780px) / 2)); right: max(calc(70 * var(--design-unit)), calc((100vw - 1780px) / 2)); z-index: 50; transition: background-color .2s ease, box-shadow .2s ease; border-radius: 8px; }
.header.is-scrolled { top: 0; left: 0; right: 0; padding: 12px max(calc(70 * var(--design-unit)), calc((100vw - 1780px) / 2)); background: #fff; border-radius: 0; box-shadow: 0 1px 0 rgb(12 6 40 / 10%); }
.service-rocking { transform: none; isolation: isolate; }
.service-rocking .development-note { position: relative; z-index: 1; transform-origin: center; will-change: transform; }
.service-rocking .process-note { position: relative; z-index: 2; transform-origin: center; will-change: transform; }
.portfolio.is-horizontal { height: calc(1080 * var(--design-unit)); }
.is-horizontal .portfolio-track { display: flex; height: 100%; will-change: transform; }
.is-horizontal .project { flex: 0 0 100%; height: 100%; }

/* Whole words preserve natural wrapping; opacity is driven only by scroll position. */
.reveal-word { display: inline-block; opacity: var(--word-reveal, 1); transform: translateY(calc((1 - var(--word-reveal, 1)) * .12em)); }
[data-reveal-atomic] { opacity: var(--text-reveal, 1); }
html[lang=en] .hero h1 { font-size: calc(128 * var(--design-unit)); }
html[lang=kk] .hero h1 { font-size: calc(140 * var(--design-unit)); }
html:not([lang=ru]) .hero-description { line-height: 1.25; }
html:not([lang=ru]) .contact h2 { font-size: calc(65 * var(--design-unit)); }
html:not([lang=ru]) .services-list { max-width: calc(1080 * var(--design-unit)); }
html:not([lang=ru]) .development-note, html:not([lang=ru]) .process-note { font-size: calc(19 * var(--design-unit)); }
@media (max-width: 899px) {
    .header { top: 20px; left: 22px; right: 22px; }
    .header.is-scrolled { padding-inline: 22px; }
    .site .language { font-size: 11px; border-radius: 5px; padding: 6px; }
    .portfolio.is-horizontal { height: max(100svh, 650px); }
    .is-horizontal .project { display: flex; flex-direction: column; justify-content: center; padding-top: 75px; padding-bottom: 40px; }
    .is-horizontal .project-art { flex: 0 0 auto; }
    html[lang=en] .hero h1, html[lang=kk] .hero h1 { font-size: clamp(39px, 9.5vw, 85px); }
    html:not([lang=ru]) .contact h2 { font-size: 38px; }
    html:not([lang=ru]) .services-list { max-width: none; }
    html:not([lang=ru]) .development-note, html:not([lang=ru]) .process-note { font-size: 15px; }
    .service-rocking { margin-bottom: 100px; }
}
@media (prefers-reduced-motion: reduce) {
    .site .button, .site .consent input, .site .consent span { transition: none; }
    .reveal-word, [data-reveal-atomic] { opacity: 1 !important; transform: none !important; }
}

/* Нативный input сохраняет клавиатурное управление; галочка всегда белая. */
.consent input[type=checkbox] { appearance: none; background: #fff; border: 1px solid #aaa6b7; position: relative; }
.consent input[type=checkbox]:checked { background-color: var(--orange); border-color: var(--orange); }
.consent input[type=checkbox]:checked::after { content: ''; position: absolute; left: 28%; top: 10%; width: 34%; height: 60%; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.site .consent a, .consent .privacy-policy { text-decoration: underline; text-underline-offset: .15em; }
@media (forced-colors: active) { .consent input[type=checkbox] { appearance: auto; } .consent input[type=checkbox]::after { display: none; } }

/* Эксперимент: фиолетовый фон и квадраты без размытия. */
/* Reserve side space for the corners of the rotating cards. */

@media(max-width:899px) {
    .service-rocking { right: auto; width: 72%; margin-top: 100px; margin-bottom: 150px; }
    .service-rocking .process-note { margin-top: 130px; }
    .site .service-rocking .development-note, .site .service-rocking .process-note { font-size: clamp(12px, 2.9vw, 16px); }
    .service-rocking .development-note, .service-rocking .process-note li { padding: 10px; }
}

/* Keep reading and interaction sizes independent from the artwork scale. */
.header nav { font-size: 15px; gap: 24px; }
.header nav a { min-height: 44px; display: inline-flex; align-items: center; white-space: nowrap; }
.brand { min-width: 120px; min-height: 25px; }
.site .language { font-size: 13px; min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.hero-description { top: auto; bottom: 40px; font-size: 16px; line-height: 1.4; letter-spacing: 0; }
.site .service-rocking .development-note, .site .service-rocking .process-note { font-size: 18px; line-height: 1.4; letter-spacing: 0; }
.project h2 { font-size: 24px; letter-spacing: 0; }
.project-tags { font-size: 13px; line-height: 1.4; gap: 8px; }
.project-tags li { padding: 8px 12px; }
.why-us { display: grid; grid-template-columns: minmax(0, 42fr) minmax(0, 58fr); gap: 40px; }
.advantages { width: auto; font-size: 28px; line-height: 1.4; letter-spacing: 0; }
.why-title[data-perspective-stage] { position: relative; inset: auto; width: 100%; min-width: 0; }
.contact-content { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.contact-copy p { font-size: 28px; line-height: 1.4; letter-spacing: 0; }
.contact form { min-width: 0; font-size: 18px; line-height: 1.4; gap: 20px; }
.contact input[type=tel], .contact textarea { padding: 18px; letter-spacing: 0; }
.contact input[type=tel] { height: 60px; }
.contact textarea { min-height: 120px; }
.contact input::placeholder, .contact textarea::placeholder { color: #6c687c; }
.consent { font-size: 14px; min-height: 32px; align-items: center; gap: 10px; }
.consent input { width: 20px; height: 20px; }
.site .button-orange { color: var(--ink); min-height: 48px; padding: 14px 20px; letter-spacing: 0; }
.contact h2 { overflow-wrap: break-word; }
.services h2, .contact h2 { letter-spacing: 0; }
.service-rocking .development-note, .service-rocking .process-note li { color: var(--ink); }
@media (min-width: 1600px) {
    .hero-everyone { top: calc(734 * var(--design-unit)); }
}
@media (min-width: 900px) and (max-width: 1599px) {
    .hero { min-height: 900px; }
    .hero-accessible { top: 410px; }
    .hero-everyone { top: 540px; }
    .hero-marker { top: 660px; }
    .hero-description { left: auto; right: calc(70 * var(--design-unit)); width: 46%; bottom: 48px; }
    .language { top: auto; bottom: 48px; }
    .services { height: auto; min-height: 900px; padding-top: 150px; padding-bottom: 150px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 60px; align-items: start; }
    .services-list ul { font-size: 28px; letter-spacing: 0; }
    .service-notes { position: relative; inset: auto; width: 100%; height: auto; }
    .site .service-rocking .development-note, .site .service-rocking .process-note { font-size: 16px; }
    .process-note { margin-top: 64px; }
    .why-us { min-height: 650px; }
    .advantages { font-size: 24px; }
    .contact h2, html:not([lang=ru]) .contact h2 { font-size: 48px; letter-spacing: 0; }
    .contact-copy p { font-size: 22px; }
}
@media (min-width: 900px) and (max-width: 1199px) {
    .hero { min-height: 800px; }
    .hero-accessible { top: 340px; }
    .hero-everyone { top: 440px; }
    .hero-marker { top: 590px; width: calc(44px * 85 / 49.0057); }
    .site .language { width: 44px; }
    .project h2 { font-size: 20px; }
    .project-tags { position: static; margin-top: 24px; }
    .contact-content { gap: 32px; }
    .contact h2, html:not([lang=ru]) .contact h2 { font-size: 36px; }
}
@media (max-width: 899px) {
    .header nav { font-size: 13px; gap: 12px; }
    .hero h1, html[lang=en] .hero h1, html[lang=kk] .hero h1 { font-size: 64px; }
    .hero-description { font-size: 16px; line-height: 1.4; bottom: 40px; }
    .hero-marker { top: 375px; width: calc(44px * 85 / 49.0057); height: 100px; }
    .site .language { top: 520px; width: 44px; }
    .services-list ul { letter-spacing: 0; }
    .service-rocking { width: 88%; max-width: 560px; margin-top: 80px; margin-bottom: 40px; }
    .site .service-rocking .development-note, .site .service-rocking .process-note { font-size: 16px; }
    .service-rocking .process-note { margin-top: 64px; }
    .why-us { display: flex; flex-direction: column; min-height: 0; padding: 70px 22px; gap: 40px; }
    .why-title[data-perspective-stage] { order: -1; flex-shrink: 0; }
    .advantages { font-size: 23px; }
    .contact-content { grid-template-columns: minmax(0, 1fr); }
    .contact-copy p { font-size: 23px; }
    .contact form { font-size: 16px; }
    .project-tags { margin-top: 24px; }
}
@media (max-width: 599px) {
    .hero h1, html[lang=en] .hero h1, html[lang=kk] .hero h1 { font-size: 48px; }
    .hero { height: 820px; }
    .hero-description { bottom: 32px; }
}
@media (max-width: 379px) {
    .header { left: 16px; right: 16px; }
    .header.is-scrolled { padding-inline: 16px; }
    .brand { width: 90px; min-width: 90px; height: 25px; }
    .header nav { font-size: 12px; gap: 8px; }
    .header nav .button { padding-inline: 4px; }
    .hero h1, html[lang=en] .hero h1, html[lang=kk] .hero h1 { font-size: 40px; }
}
.portfolio:not(.is-horizontal) .project { height: auto; min-height: 650px; }
@media (min-width: 900px) {
    .portfolio:not(.is-horizontal) .project { min-height: max(650px, calc(1080 * var(--design-unit))); }
}