@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(assets/fonts/inter-normal-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(assets/fonts/inter-normal-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: 'STIX Two Text';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/stix-two-text-italic-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'STIX Two Text';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/stix-two-text-italic-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: 'STIX Two Text';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/stix-two-text-normal-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'STIX Two Text';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/stix-two-text-normal-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: #211c1a;
  --surface: #2c2521;
  --surface-deep: #191513;
  --ink: #f4e7d6;
  --muted: #c3b4a7;
  --accent: #ff8155;
  --accent-hover: #ff986f;
  --serif: 'STIX Two Text', Georgia, serif;
  --sans: Inter, Arial, sans-serif;
  --brand: Georgia, 'Times New Roman', serif;
  --gutter: clamp(20px, 4.5vw, 76px);
  --space: clamp(64px, 9.5vw, 144px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 30px; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 16px/1.55 var(--sans); }
h1, h2, h3, p { margin: 0; }
h2 { font-size: clamp(37px, 5.7vw, 86px); font-weight: 650; line-height: .98; letter-spacing: -.068em; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; color: inherit; }
img { display: block; max-width: 100%; }
.frame { width: min(100% - 2 * var(--gutter), 1440px); margin-inline: auto; }
:focus-visible { outline: 3px solid currentColor; outline-offset: 5px; }
.skip { position: fixed; top: 12px; left: 12px; z-index: 4; padding: 12px; background: var(--surface); transform: translateY(-200%); }
.skip:focus { transform: translateY(0); }

.site-header {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  width: 100%;
  padding: 24px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.brand { font: 46px/1 var(--brand); letter-spacing: -.05em; }
.site-header nav { display: flex; gap: 46px; font-size: 19px; }
.site-header nav a:hover, .footer-links a:hover { text-decoration: underline; text-underline-offset: .25em; }
.action {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 17px;
  min-height: 46px;
  padding: 10px 17px;
  border: 0;
  border-radius: 4px;
  background: var(--accent);
  color: var(--bg);
  font-weight: 600;
  font-size: 14px;
}
.action:hover { background: var(--accent-hover); }

.approach { padding-block: var(--space); }
.section-intro {
  display: grid;
  grid-template-columns: 1.65fr 1fr;
  align-items: end;
  gap: 32px;
  margin-bottom: clamp(25px, 4vw, 55px);
}
.section-intro > p { max-width: 37ch; color: var(--muted); font-size: clamp(16px, 1.55vw, 22px); line-height: 1.4; }

.situations { display: grid; gap: 10px; }
.service-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: inherit; }
.service-option { display: contents; }
.situation {
  min-width: 0;
  min-height: clamp(139px, 13vw, 180px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-content: space-between;
  gap: 22px 13px;
  padding: clamp(17px, 2vw, 29px);
  border: 0;
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  text-align: left;
}
.situation-question { line-height: 1.25; }
.situation strong { grid-column: 1 / -1; font-size: clamp(22px, 2.75vw, 43px); font-weight: 650; line-height: .99; letter-spacing: -.059em; }
.situation-mark { width: 18px; height: 18px; position: relative; margin-top: 1px; }
.situation-mark::before, .situation-mark::after {
  content: ""; position: absolute; background: currentColor; border-radius: 2px;
}
.situation-mark::before { width: 14px; height: 1.5px; left: 2px; top: 8px; }
.situation-mark::after { width: 1.5px; height: 14px; left: 8px; top: 2px; }
.situation[aria-expanded="true"] .situation-mark::after { visibility: hidden; }
.situation:hover { background: #39302b; }
.situation[aria-expanded="true"] { background: #3a2d26; color: var(--ink); }
.situation[aria-expanded="true"] .situation-mark,
.situation[aria-expanded="true"] strong { color: var(--accent); }
.situation:focus-visible { outline-color: var(--ink); outline-offset: 2px; }

.service-panel[hidden] { display: none; }
.service-panel {
  grid-column: 1 / -1;
  grid-row: 2;
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  align-items: start;
  gap: clamp(24px, 5vw, 74px);
  scroll-margin-block: 18px;
  padding: clamp(20px, 3.2vw, 48px);
  background: var(--surface);
  color: var(--ink);
  border-radius: 10px;
}
.service-panel img { width: 100%; height: auto; aspect-ratio: 1.44; object-fit: cover; }
.service-copy h3 {
  color: var(--accent);
  font-size: clamp(29px, 4vw, 57px);
  line-height: 1;
  letter-spacing: -.067em;
  font-weight: 650;
  margin-bottom: clamp(16px, 2.5vw, 31px);
}
.service-copy p { max-width: 50ch; font-size: clamp(16px, 1.4vw, 20px); }
.service-copy p + p { margin-top: 16px; }
.about-copy p + p { margin-top: 18px; }
.about {
  background: var(--surface);
  padding-block: clamp(44px, 6vw, 86px);
}
.about-inner {
  display: grid;
  grid-template-columns: 1.18fr 1fr;
  align-items: center;
  gap: clamp(25px, 5vw, 75px);
}
.experience-title {
  display: flex;
  align-items: end;
  gap: clamp(12px, 2.1vw, 34px);
}
.experience-number {
  color: var(--accent);
  font: 400 clamp(136px, 24vw, 348px)/.74 var(--brand);
  letter-spacing: -.115em;
  padding-right: .13em;
}
.experience-label {
  font-size: clamp(20px, 3.65vw, 54px);
  line-height: .98;
  letter-spacing: -.055em;
  padding-bottom: .08em;
}
.about p { max-width: 48ch; font-size: clamp(17px, 1.45vw, 21px); line-height: 1.52; }
footer { background: var(--surface-deep); color: var(--ink); padding-block: clamp(35px, 6vw, 88px) 22px; }
.footer-top { display: flex; align-items: center; gap: clamp(18px, 3vw, 42px); flex-wrap: wrap; }
.footer-top h2 { font-size: clamp(30px, 3.5vw, 52px); margin-right: auto; }
.footer-links { display: flex; gap: 18px; }
.footer-name { display: block; color: var(--accent); font: 400 clamp(55px, 17.5vw, 260px)/1 var(--brand); letter-spacing: -.07em; margin-top: clamp(24px, 4vw, 58px); }

dialog { width: min(570px, calc(100% - 28px)); max-height: 92svh; padding: clamp(18px, 4vw, 35px); border: 0; border-radius: 12px; background: var(--surface); color: var(--ink); }
dialog::backdrop { background: rgb(0 0 0 / .68); }
dialog form { display: grid; gap: 12px; }
.dialog-top { display: flex; justify-content: space-between; align-items: center; }
.dialog-top h2 { font-size: clamp(29px, 6vw, 45px); }
.close { background: transparent; border: 0; font-size: 29px; min-width: 44px; min-height: 44px; }
dialog label { display: grid; gap: 4px; font-size: 14px; }
dialog input, dialog textarea { width: 100%; border: 1px solid #797267; border-radius: 4px; color: var(--ink); background: var(--bg); padding: 10px; font: 16px var(--sans); }
dialog .note { font-size: 14px; }
.message-actions:not([hidden]) { display: flex; align-items: center; gap: 17px; flex-wrap: wrap; }
.message-telegram { min-width: 148px; }
.message-email { text-decoration: underline; text-underline-offset: .2em; }
.arrow-icon { width: 1em; height: 1em; display: inline-block; vertical-align: -.14em; flex: none; }

@media (max-width: 700px) {
  .experience-number { font-size: clamp(125px, 39vw, 205px); }
  .experience-label { font-size: clamp(23px, 7vw, 38px); }
  .about-inner { row-gap: 28px; }
  .section-intro, .about-inner { grid-template-columns: 1fr; gap: 18px; }
  .situations { gap: 7px; }
  .service-row { grid-template-columns: 1fr; }
  .situation { min-height: 90px; gap: 7px 10px; }
  .service-panel {
    grid-row: auto;
    grid-template-columns: 1fr;
    gap: 19px;
    padding: 16px;
    margin: 0 0 6px;
  }
  .service-panel img { order: 1; aspect-ratio: 5 / 3; }
  .footer-top { align-items: start; }
  .footer-top h2 { flex-basis: 100%; }
}

@keyframes settle-in {
  from { opacity: .55; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: no-preference) {
  .arrive { animation: settle-in .54s var(--enter-delay, 0ms) cubic-bezier(.18,.6,.22,1) both; }
  .situation:active, .action:active { transform: translateY(2px); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Original hero composition and light treatment. */
.hero {position:relative;min-height:780px;height:min(900px,62vw);overflow:hidden}
.sculpture {position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;animation:scene-in 1.3s ease-out}
.hero-copy {position:relative;z-index:1;padding:136px 0 55px var(--gutter);width:51%}
.hero-display {font:500 clamp(60px,7.75vw,116px)/.98 var(--serif);letter-spacing:-.042em}
.hero-display em {font-weight:500}
.hero h1 {font-size:clamp(20px,2vw,30px);font-weight:500;line-height:1.3;margin-top:30px}
.hero-description {max-width:39ch;margin-top:14px;line-height:1.45}
.round-action {border-radius:50%;width:174px;height:174px;background:var(--accent);color:var(--bg);border:0;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.15;font-size:24px;margin-top:26px;transition:transform .35s,background .35s}
.round-action:hover {transform:rotate(-7deg);background:#ff986f}
.round-action .arrow-icon {font-size:28px;margin-top:12px}
.annotations {position:absolute;inset:0;pointer-events:none;font:italic 500 21px/1.1 var(--serif)}
.annotations span {position:absolute}
.annotations span:nth-child(1) {left:52%;top:16%}
.annotations span:nth-child(2) {right:5%;top:43%}
.annotations span:nth-child(3) {left:42%;bottom:21%}
@keyframes scene-in {from{transform:scale(1.04)}to{transform:scale(1)}}
@media(max-width:1000px) {
.hero {min-height:680px;height:75vw}
.hero-copy {padding-top:150px;width:60%}
.sculpture {object-position:60% center}
.annotations {display:none}
.round-action {width:145px;height:145px;font-size:21px}
}
@media(max-width:600px) {
.hero {min-height:850px;height:auto;padding-bottom:0}
.hero-copy {width:100%;padding:125px var(--gutter) 0}
.hero-display {font-size:min(60px,15.3846vw);line-height:1.02;max-width:100%}
.hero h1 {font-size:20px;margin-top:21px}
.hero-description {max-width:33ch;margin-top:12px}
.round-action {width:120px;height:120px;font-size:18px;margin-top:28px}
.round-action .arrow-icon {font-size:24px;margin-top:8px}
.sculpture {top:340px;height:510px;object-fit:cover;object-position:83% center;width:150%;left:-50%}

}
.annotations span:nth-child(3) {left:37%;bottom:22%;transform:translateX(-100%);text-shadow:0 1px 5px #191513}
.sculpture {mask-image:linear-gradient(to bottom,#000 88%,transparent)}
@media(max-width:600px) {
.sculpture {mask-image:linear-gradient(to bottom,transparent,#000 14%,#000 88%,transparent)}
}
.hero-art {position:absolute;inset:0;animation:sculpture-drift 10s ease-in-out infinite alternate;will-change:transform}
.hero-art .sculpture {animation:none}
.sculpture-light {mix-blend-mode:screen;filter:brightness(1.4) saturate(1.1);opacity:.2;mask-image:linear-gradient(110deg,transparent 40%,#000 50%,transparent 60%);mask-size:300% 100%;animation:light-pass 8s ease-in-out infinite!important;pointer-events:none}
.motion-toggle {position:absolute;bottom:22px;right:var(--gutter);z-index:2;border:0;background:rgb(33 28 26 / .7);color:var(--muted);border-radius:99px;padding:10px 15px;font-size:13px;min-height:44px}
.motion-paused .hero-art,.motion-paused .sculpture-light {animation-play-state:paused!important}
@keyframes sculpture-drift {from{transform:translateY(0) scale(1)}to{transform:translateY(-9px) scale(1.018)}}
@keyframes light-pass {0%,15%{mask-position:100% 0;opacity:.08}50%{opacity:.23}85%,100%{mask-position:0% 0;opacity:.08}}
@media(max-width:600px) {
.hero-art {top:425px;height:425px}
.hero-art .sculpture {top:0;height:100%;width:150%;left:-50%}
.motion-toggle {bottom:8px;font-size:12px}
}
@media(prefers-reduced-motion:reduce) {
.hero-art,.sculpture-light {animation:none!important}
.sculpture-light {display:none}
.motion-toggle {display:none}
}
.motion-toggle {font-size:13px}
.hero-art.webgl-ready {animation:none}
.webgl-ready img.sculpture {visibility:hidden}
.sculpture-canvas {pointer-events:none}
@media (max-width: 1000px) {
  .site-header nav { gap: 26px; }
}
@media (max-width: 600px) {
  .site-header { padding-top: 23px; }
  .brand { font-size: 32px; }
  .site-header nav { font-size: 14px; gap: 18px; }
  .site-header nav a:nth-child(2) { display: none; }
}
.sculpture { max-width: none; }
.round-action { font-family: var(--sans); }
@media (prefers-reduced-motion: reduce) {
  .hero *, .hero *::before, .hero *::after { animation: none !important; transition: none !important; }
}

dialog .brief-preview[hidden] { display: none; }

.not-found {
  min-height: 100svh;
  display: grid;
  align-content: center;
  gap: 22px;
  padding-block: 48px;
}
.not-found h1 {
  font: 500 clamp(45px, 8vw, 96px)/1 var(--serif);
  letter-spacing: -.04em;
}
.not-found p { color: var(--muted); max-width: 38ch; }
.not-found .action { justify-self: start; }