@font-face {
  font-family: "Inter";
  src: url("assets/fonts/inter-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: optional;
}

/* Общие токены проекта. */
:root {
  --font-body: "Inter", system-ui, sans-serif;
  --editorial-surface: #ebe6dc;
  --editorial-ink: #252522;
  --editorial-rule: #25252238;
  --editorial-gap: clamp(24px, 6vw, 96px);
  --editorial-measure: 42ch;
  --editorial-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  --type-editorial-copy: clamp(17px, 1.6vw, 24px);
  --header-anchor-offset: 100px;
  --page-surface: #191a1c;
  --page-text: #f6f1eb;
  --not-found-width: 1280px;
  --not-found-gutter: clamp(var(--space-16), 5vw, var(--space-48));
  --not-found-padding: clamp(var(--space-32), 10vw, 144px);
  --not-found-rule: 1px solid var(--color-dialog-edge);
  --not-found-stroke: 2;
  --not-found-guide-opacity: .28;
  --not-found-art-compact: 400px;
  --accent: #cee0ea;
  --action-fill: #e6dcc5;
  --action-hover: #f7efdd;
  --action-ink: #25241f;
  --action-edge: #e6dcc585;
  --action-glass: linear-gradient(145deg, #e6dcc52e, #e6dcc510);
  --action-glass-hover: #e6dcc541;
  --action-text: #f3ead7;
  --directions-surface: var(--page-surface);
  --card-surface: #242629;
  --materials-fade-depth: clamp(48px, 8vw, 120px);
  --section-join-depth: clamp(var(--space-32), 6vw, 120px);
  --hero-bottom-fade: linear-gradient(to bottom, transparent, var(--page-surface));
  --materials-top-fade: linear-gradient(to bottom, var(--page-surface), transparent);
  --materials-fade: linear-gradient(to bottom, transparent, var(--page-surface));
  --materials-backdrop: url("assets/graphite.jpg");
  --messenger-logo-size: 22px;
  --materials-photo-fade: linear-gradient(#000 48%, transparent 100%);
  --materials-strip-fade: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
  --materials-strip-fade-compact: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  --materials-strip-surface: #242629b8;
  --materials-kicker-tracking: .24em;
  --materials-grid-gap: clamp(12px, 2vw, 30px);
  --materials-radius: 24px;
  --materials-copy-overlap: clamp(-64px, -4vw, -32px);
  --materials-photo-rows: auto 1fr;
  --materials-gutters: clamp(32px, 12vw, 144px);
  --materials-icon-size: clamp(26px, 3vw, 44px);
  --materials-metal-photo: url("assets/material-metal-corner.webp");
  --materials-wood-photo: url("assets/material-oak-corner.webp");
  --materials-frame: #e6dcc536;
  --materials-frame-highlight: #e6dcc55e;
  --materials-image: url("assets/materials.jpg");
  --materials-image-size: 300% auto;
  --material-photo-ratio: 1.48;
  --materials-intro-width: 64ch;
  --material-benefit-columns: 4;
  --material-benefit-columns-compact: 2;
  --card-columns: 3;
  --card-column-mobile: 1fr;

  /* Цвет и материалы */
  --color-hero-copy: #dde4eb;
  --color-muted: #c0cbd4;
  --color-nav-text: var(--page-text);
  --weight-nav: 500;
  --header-surface: #242629db;
  --color-scene: #151719;
  --color-secondary-surface: #17181880;
  --color-secondary-edge: #e2eff470;
  --color-secondary-hover: #323d46;
  --color-dialog-edge: #52616d;
  --color-dialog-surface: #222428;
  --color-overlay: #0009;
  --glass-edge: #c9e8ff45;
  --glass-hover: #b9ddff1c;
  --glass-mobile-surface: #17222df7;
  --card-edge: #cee0ea2e;
  --glass-filter: blur(22px) saturate(125%);
  --glass-shadow: inset 0 1px #ffffff30, inset 0 -1px #0006, 0 12px 36px #0005;
  --menu-shadow: 0 14px 32px #0007;
  --card-highlight: inset 0 1px #e0f4ff18;
  --hero-scrim-tablet: linear-gradient(transparent 20%, #11121480 40%, #111214d9 67%, #11121450 88%, #111214b0);
  --hero-scrim-mobile: linear-gradient(transparent 20%, #11121464 37%, #111214cf 61%, #111214a8 83%, #111214e8);
  --hero-scrim-desktop: linear-gradient(90deg, transparent 38%, #11121430 58%, #11121490);

  /* Типографика */
  --font-display: var(--font-body);
  --type-hero-width-limit: 11cqw;
  --type-hero-desktop: clamp(40px, 3.85vw, 72px);
  --type-hero-tablet: clamp(32px, 4.1vw, 52px);
  --type-hero-portrait: clamp(29px, 8.1vw, 58px);
  --type-hero-copy: clamp(16px, 1.35vw, 21px);
  --type-section-title: clamp(32px, 5vw, 64px);
  --type-card-title: clamp(19px, 2vw, 26px);

  /* Композиция и свет */
  --scene-image: url("assets/workshop.png");
  --scene-ratio: 1672 / 941;
  --hero-min-desktop: max(640px, 100svh);
  --hero-min-portrait: max(670px, 100svh);
  --story-overlap: clamp(140px, 15vw, 224px);
  --story-overlap-tablet: clamp(224px, 32vw, 320px);
  --story-overlap-mobile: clamp(240px, 90vw, 350px);
  --faq-top-inset: calc(var(--header-anchor-offset) + var(--space-24));
  --story-width: 1640px;
  --story-padding: clamp(var(--space-24), 4vw, var(--space-48));
  --capabilities-title-size: clamp(19px, 6.5vw, var(--type-section-title));
  --story-photo-ratio: 16 / 9;
  --story-photo-share: 50%;
  --story-padding-block: clamp(var(--space-24), 2.5vw, var(--space-36));
  --hero-content-desktop: min(46%, 680px);
  --hero-content-portrait: min(100%, 560px);
  --hero-padding-desktop: 100px clamp(24px, 4vw, 72px) 48px 0;
  --hero-padding-portrait: 235px clamp(20px, 6vw, 48px) max(32px, env(safe-area-inset-bottom));
  --hero-tablet-story-gap: var(--space-36);
  --story-tablet-title: clamp(30px, 4vw, 42px);
  --lamp-beam: conic-gradient(from 154deg at 50% calc(15% + var(--cord-drop)), transparent, #ffc98954 14deg, #ffe2b1a0 26deg, #ffc98954 38deg, transparent 52deg);
  --lamp-beam-mask: linear-gradient(transparent calc(14% + var(--cord-drop)), #000 calc(26% + var(--cord-drop)), transparent 94%);
  --lamp-reflection: radial-gradient(ellipse, #ffdb9dba, #ffc07a72 36%, transparent 72%);
  --cord-drop: clamp(52px, 8svh, 96px);
  --work-cover-ratio: 8 / 5;
  --cord-width: clamp(3px, .45cqw, 7px);
  --cord-surface: repeating-linear-gradient(140deg, #1f1f1b 0 2px, #706658 3px, #343029 4px 6px);
  --process-step-size: clamp(var(--size-14), 2vw, var(--type-card-title));
  --commission-dimension-opacity: .55;
  --weld-flash-opacity: .65;
  --process-drawing-stroke: 2;
  --process-padding: clamp(var(--space-36), 6.8vw, 92px);
  --process-photo-width: min(100%, 300px);
  --process-photo-mobile-width: clamp(90px, 29vw, 160px);
  --process-photo-ratio: var(--work-cover-ratio);
  --process-title-size: calc(var(--type-section-title) * .88);
  --process-number-size: clamp(var(--space-32), 4vw, var(--space-48));
  --process-line-duration: 900ms;
  --process-line: var(--card-edge);
  --process-number-ink: color-mix(in srgb, var(--action-fill) 78%, var(--directions-surface));
  --reveal-duration: 650ms;
  --reveal-step: 85ms;
  --reveal-shift: 18px;
  --reveal-easing: cubic-bezier(.2, .7, .25, 1);
  --lamp-nudge-duration: 2400;
  --lamp-nudge-angle: 7;
  --lamp-nudge-travel: 5;
  --lamp-duration: 7s;
  --lamp-easing: ease-in-out;

  /* Размеры и пропорции */
  --focus-width: 2px;
  --focus-offset: 5px;
  --layer-scene: -2;
  --center: 50%;
  --center-offset: -50%;
  --layer-scrim: -1;
  --lamp-offset: 21.3%;
  --lamp-width: 24.8%;
  --beam-offset: 12%;
  --beam-width: 43.4%;
  --beam-height: 92%;
  --reflection-offset: 17%;
  --reflection-top: 79%;
  --reflection-width: 33.4%;
  --reflection-height: 19%;
  --lamp-angle-start: 8deg;
  --lamp-angle-end: -8deg;
  --reflection-travel-start: -10cqw;
  --reflection-travel-end: 10cqw;
  --hero-content-offset: 54%;
  --hero-content-wide-offset: 60%;
  --hero-padding-wide-top: var(--button-height);
  --weight-heavy: 800;
  --leading-hero: .97;
  --tracking-hero: -.045em;
  --measure-copy: 38ch;
  --space-30: 30px;
  --leading-copy: 1.55;
  --space-12: 12px;
  --space-32: 32px;
  --size-14: 14px;
  --button-height: 52px;
  --space-16: 16px;
  --border-width: 1px;
  --radius-button: 8px;
  --weight-semibold: 650;
  --size-icon: 20px;
  --icon-stroke: 1.65;
  --works-columns: 2;
  --works-padding-fluid: 7vw;
  --works-gutter: clamp(var(--space-16), 5vw, var(--space-48));
  --works-row-gap: clamp(var(--space-24), 5vw, var(--space-48));
  --works-column-gap: clamp(var(--space-16), 3vw, var(--space-36));
  --works-disabled-opacity: 0.45;
  --capabilities-top-padding: clamp(var(--space-24), 3vw, var(--space-48));
  --capabilities-option-size: clamp(18px, 1.5vw, 22px);
  --capabilities-option-height: var(--space-48);
  --capabilities-picker-columns: minmax(0, 1fr) minmax(0, 3fr);
  --capabilities-columns: minmax(0, 1fr) minmax(0, 2fr);
  --capability-image-scale: 1.04;
  --works-photo-radius: var(--space-16);
  --works-arrow-surface: var(--page-surface);
  --works-padding-max: 100px;
  --leading-body: 1.5;
  --dialog-width: 440px;
  --space-36: 36px;
  --space-8: 8px;
  --space-6: 6px;
  --space-10: 10px;
  --touch-target: 44px;
  --space-24: 24px;
  --section-gap-fluid: 4vw;
  --space-48: 48px;
  --scene-offset-portrait: -33.7%;
  --hero-tablet-inset: 205px;
  --layer-header: 2;
  --space-18: 18px;
  --container-width: 1240px;
  --space-9: 9px;
  --weight-bold: 750;
  --tracking-brand: -.025em;
  --section-padding-fluid: 8vw;
  --section-padding-max: 108px;
  --section-gutter-fluid: 6vw;
  --section-gutter-max: 72px;
  --leading-section: 1.05;
  --tracking-section: -.045em;
  --card-padding-fluid: 3vw;
  --card-padding-max: 34px;
  --space-22: 22px;
  --space-15: 15px;
}

:root {
  --button-sheen: linear-gradient(110deg, transparent 25%, #fff8 48%, transparent 70%);
  --button-sheen-duration: 520ms;
  --button-sheen-start: -110%;
  --button-sheen-end: 110%;
  --weld-position-x: 26%;
  --weld-position-y: 84%;
  --weld-cycle: 12s;
  --weld-glow-size: clamp(28px, 5cqw, 80px);
  --weld-glow: radial-gradient(circle, #f5faffb0, #b9d9ff35 29%, transparent 68%);
  --spark-size: 2px;
  --spark-color: #ffe9c4;
  --spark-shadow: 0 0 6px #ffc98a;
  --spark-path-one: -3cqw -5cqw;
  --spark-path-two: 2cqw -6cqw;
  --spark-path-three: 5cqw -3cqw;
  --spark-path-four: -5cqw -2cqw;
  --mobile-header-surface: #242629f5;
  --mobile-hero-min: clamp(560px, 92svh, 750px);
  --mobile-hero-padding: clamp(160px, 26svh, 205px) var(--space-24) max(var(--space-32), env(safe-area-inset-bottom));
}

:root {
  --carousel-card-width: 86%;
  --carousel-end-padding: calc(100% - var(--carousel-card-width) - var(--materials-grid-gap));
  --service-hero-join: linear-gradient(to bottom, transparent, var(--card-surface));
  --service-hero-join-depth: clamp(56px, 12vw, 148px);
  --service-operation-icon-size: clamp(28px, 3vw, 40px);
  --service-icon-duration: 760ms;
  --service-hero-height: clamp(570px, 76svh, 820px);
  --service-hero-bottom: clamp(var(--space-48), 7vw, 96px);
  --service-hero-copy-width: 740px;
  --service-hero-title-size: clamp(26px, calc(7.4vw + 2px), 72px);
  --service-hero-photo-position: 65% center;
  --service-hero-photo-position-mobile: 73% center;
  --service-hero-scrim: linear-gradient(90deg, #111214ed, #111214b8 42%, #11121424 75%);
  --service-hero-scrim-mobile: linear-gradient(0deg, #111214fa, #111214d6 38%, #11121430 73%, #111214a8);
  --production-stat-padding: clamp(var(--space-12), 2vw, var(--space-24));
  --production-stat-size: clamp(30px, 4vw, 56px);
  --cta-columns: minmax(0, 1fr) auto;
  --cta-padding: clamp(var(--space-48), 5vw, 88px);
  --cta-gutter: clamp(var(--space-16), 5vw, 88px);
  --cta-footer-gap: clamp(var(--space-24), 4vw, 64px);
  --cta-title-size: clamp(28px, 3.5vw, 48px);
  --footer-padding: clamp(var(--space-48), 6vw, var(--section-padding-max));
  --cookie-notice-width: 460px;
  --legal-copy-width: 76ch;
  --footer-blueprint-mobile-width: 320px;
  --footer-blueprint-opacity: .26;
  --works-caption-min: calc(2 * var(--size-14) * var(--leading-copy) + 2 * var(--space-12));
  --cta-blueprint-ink: var(--action-fill);
  --cta-blueprint-stroke: 1.25;
  --cta-blueprint-opacity: .13;
  --cta-blueprint-dash: 5 8;

  --interactive-duration: 180ms;
}

:root {
  --photo-viewer-width: 860px;
  --photo-viewer-ratio-width: 1.6;
  --photo-viewer-image-height: calc(100svh - var(--space-24));
  --photo-viewer-scrim: linear-gradient(to top, #0d0e10ef, #0d0e10a6 55%, transparent);
  --photo-viewer-control: #191b1dd9;
  --photo-viewer-close-turn: 90deg;
  --photo-viewer-backdrop: #101113e8;
}