@font-face {
  font-family: Oswald;
  src: url("assets/fonts/oswald-variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 200 700;
  font-display: swap;
}

@font-face {
  font-family: Manrope;
  src: url("assets/fonts/manrope-variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --color-ink: #080b10;
  --color-paper: #ffffff;
  --color-lime: #b8ff55;
  --color-mist: #c4d0cc;
  --color-line: #37403f;
  --font-display: "Oswald", sans-serif;
  --font-body: "Manrope", sans-serif;
  --text-body: clamp(1.125rem, 1.35vw, 1.25rem);
  --text-small: clamp(1rem, 1.08vw, 1.0625rem);
  --text-action: 1.0625rem;
  --space-page: clamp(1.25rem, 4.3vw, 5rem);
  --space-section: clamp(5rem, 9.4vw, 9rem);
  --radius-control: 4px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  scroll-behavior: auto;
  scroll-padding-top: 6rem;
  scrollbar-color: var(--color-line) var(--color-ink);
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--color-ink); color: var(--color-paper); font-family: var(--font-body); font-size: var(--text-body); line-height: 1.7; overflow-wrap: anywhere; -webkit-font-smoothing: antialiased; }
body, button, a { -webkit-tap-highlight-color: transparent; }
::selection { background: var(--color-lime); color: var(--color-ink); }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 5px; }
button { font: inherit; cursor: pointer; }
button, a { touch-action: manipulation; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--color-lime); outline-offset: 6px; }
.light-section a:focus-visible, .contact a:focus-visible { outline-color: var(--color-ink); }
p, h1, h2, h3 { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
svg { display: block; width: 24px; height: 24px; flex-shrink: 0; stroke: currentColor; stroke-width: 1.7; stroke-linecap: square; stroke-linejoin: miter; }
[hidden] { display: none !important; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
[data-i18n] { white-space: pre-line; }
.container { width: min(100%, 1600px); padding-inline: var(--space-page); margin-inline: auto; }
.section { padding-block: var(--space-section); }
h2 { font: 600 clamp(3.75rem, 7.6vw, 7.8rem)/1.08 var(--font-display); letter-spacing: -0.035em; text-transform: uppercase; text-wrap: balance; }
h3 { font: 500 clamp(1.8rem, 2.6vw, 2.65rem)/1.2 var(--font-display); letter-spacing: -0.02em; }
.text-lead { font-size: clamp(1.2rem, 1.85vw, 1.75rem); line-height: 1.55; letter-spacing: -0.025em; }
.skip-link { position: absolute; top: 12px; left: 16px; padding: 12px 18px; background: var(--color-lime); color: var(--color-ink); z-index: 10; transform: translateY(-200%); }
.skip-link:focus { transform: translateY(0); }

.site-header { border-bottom: 1px solid var(--color-line); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; min-height: 92px; }
.brand { display: inline-flex; align-items: center; gap: 16px; text-decoration: none; flex-shrink: 0; }
.brand-name { font-size: var(--text-small); font-weight: 600; line-height: 1.6; white-space: pre-line; }
.main-nav { display: flex; gap: clamp(20px, 2vw, 32px); margin-left: auto; }
.main-nav a { font-size: var(--text-small); font-weight: 500; text-decoration: none; padding-block: 12px; transition: color 150ms; }
.main-nav a:hover { color: var(--color-lime); }
.main-nav a[href="#contact"] { color: var(--color-lime); text-decoration: underline; text-underline-offset: 6px; }
.header-controls { display: flex; align-items: center; gap: 24px; }
.language-switch { display: flex; align-items: center; gap: 2px; color: var(--color-mist); font-size: var(--text-small); }
.language-switch > span { opacity: 0.55; }
.language-switch button { background: none; border: 0; padding: 12px 8px; min-width: 44px; min-height: 44px; color: var(--color-mist); font-size: var(--text-small); font-weight: 600; }
.language-switch button[aria-pressed="true"] { color: var(--color-lime); }
.language-switch button:hover { color: var(--color-paper); }
.menu-toggle { display: none; background: none; border: 0; padding: 12px 9px; width: 44px; height: 44px; }
.menu-toggle span { display: block; width: 26px; height: 1px; background: var(--color-paper); transition: transform 160ms; }
.menu-toggle span + span { margin-top: 7px; }
.menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }

.button { display: inline-flex; align-items: center; justify-content: space-between; gap: 30px; min-height: 64px; padding: 20px 26px; border-radius: var(--radius-control); font-size: var(--text-action); font-weight: 700; line-height: 1.45; text-decoration: none; transition: background-color 150ms, color 150ms; }
.button-primary { background: var(--color-lime); color: var(--color-ink); }
.button-primary:hover { background: var(--color-paper); }
.button-primary:focus-visible { outline-offset: 5px; }
.button-dark { background: var(--color-ink); color: var(--color-paper); }
.button-dark:hover { background: var(--color-paper); color: var(--color-ink); }
.button svg { width: 22px; height: 22px; }
@keyframes type-arrival { from { transform: translateY(14px); filter: blur(3px); } to { transform: translateY(0); filter: blur(0); } }

.statement-band { background: var(--color-lime); color: var(--color-ink); margin-top: 26px; }
.statement-band > div { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 24px; }
.statement-band span { font: 500 clamp(1.6rem, 4.3vw, 4rem)/1.12 var(--font-display); text-transform: uppercase; letter-spacing: -0.025em; }
.section-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 8%; align-items: start; }
.intro-copy { max-width: 560px; padding-top: 7px; }
.intro-copy > p:not(.text-lead) { color: var(--color-mist); font-size: var(--text-body); line-height: 1.7; }
.intro-copy p + p { margin-top: 24px; }
.career-path { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 50px; margin-top: 64px; }
.career-path li { padding-top: 20px; border-top: 1px solid var(--color-line); position: relative; }
.career-path li::before { content: ""; position: absolute; top: -4px; left: 0; height: 7px; width: 7px; border-radius: 50%; background: var(--color-lime); }
.career-path li:not(:last-child)::after { content: ""; position: absolute; top: -1px; right: -50px; width: 50px; border-top: 1px solid var(--color-line); }
.career-stage { color: var(--color-lime); font: 500 32px/1.2 var(--font-display); font-variant-numeric: tabular-nums; }
.career-path h3 { margin-top: 22px; min-height: 2.4em; font-size: clamp(2rem, 3.25vw, 3.25rem); }
.career-path p { max-width: 340px; margin-top: 15px; color: var(--color-mist); font-size: var(--text-body); }
.about { padding-bottom: clamp(3.5rem, 6vw, 5rem); }
.about > .section-intro { grid-template-columns: 0.92fr 1.08fr; align-items: end; }
.about .intro-copy { max-width: 610px; }
.experience { padding-top: 0; }
.experience-intro { border-top: 1px solid var(--color-line); padding-top: clamp(3.5rem, 6vw, 5rem); }
.experience-intro { grid-template-columns: 1.3fr 0.7fr; align-items: end; }
.experience-intro h2 { font-size: clamp(3.75rem, 6.9vw, 7rem); }
.experience .intro-copy .text-lead { max-width: 400px; }
.zaza-feature { margin-top: 56px; }
.zaza-heading { display: grid; grid-template-columns: 280px 1fr; align-items: center; gap: 9%; }
.zaza-mark { display: flex; align-items: center; justify-content: center; }
.zaza-mark img { display: block; width: 240px; max-width: 100%; height: auto; }
.zaza-feature img, .company-gallery img { filter: brightness(0) invert(1); }
.zaza-story > p { font-size: var(--text-body); line-height: 1.7; max-width: 660px; color: var(--color-paper); }
.zaza-projects { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 60px; margin-top: 55px; }
.zaza-projects li { text-align: center; min-width: 0; }
.project-mark { display: flex; align-items: center; justify-content: center; height: 110px; margin-bottom: 15px; }
.project-mark img { display: block; width: auto; height: auto; max-width: min(100%, 180px); max-height: 88px; object-fit: contain; }
.zaza-projects h4 { font: 500 var(--text-small)/1.5 var(--font-body); color: var(--color-mist); margin: 0; }
.zaza-projects p { font-size: var(--text-small); color: var(--color-mist); margin-top: 5px; }
.company-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 70px; row-gap: 36px; margin-top: 48px; padding-top: 42px; border-top: 1px solid var(--color-line); }
.company-gallery > li { min-width: 0; }
.company-mark { height: 110px; display: flex; align-items: center; justify-content: center; }
.company-mark img { display: block; width: auto; height: auto; max-width: 100%; max-height: 98px; object-fit: contain; }
.company-mark .pinskiy-mark { width: 180px; }
.company-mark .syrovarnya-mark { width: 150px; }
.company-mark .trud-mark { width: 155px; }
.company-mark .bariton-mark { width: 84px; max-height: 90px; }
.company-mark .eda-mark { width: 140px; }
.company-mark .aiva-mark { width: 145px; }
.company-caption { padding-top: 16px; text-align: center; }
.company-caption h3 { font: 500 var(--text-small)/1.6 var(--font-body); letter-spacing: 0; color: var(--color-mist); }
.light-section { background: var(--color-mist); color: var(--color-ink); color-scheme: light; }
.light-section ::selection, .contact ::selection { background: var(--color-ink); color: var(--color-lime); }
.situations-intro { align-items: end; margin-bottom: 62px; }
.situations-intro .intro-copy { max-width: 380px; padding-bottom: 5px; }
.situation-list li { border-top: 1px solid var(--color-ink); }
.situation-list li:last-child { border-bottom: 1px solid var(--color-ink); }
.situation-row { display: grid; grid-template-columns: 1fr 1fr; gap: 5%; align-items: start; padding-block: 32px; }
.situation-list h3 { font-size: clamp(1.75rem, 2.7vw, 2.6rem); line-height: 1.18; }
.situation-list p { max-width: 420px; font-size: var(--text-body); line-height: 1.7; }
.situations-close { width: 46%; margin: 36px 0 0 auto; font-weight: 600; font-size: var(--text-small); white-space: pre-line; }
.work-intro { align-items: end; margin-bottom: 60px; }
.work-intro .intro-copy { max-width: 480px; font-size: var(--text-body); color: var(--color-mist); padding-bottom: 5px; }
.work-layout { display: grid; grid-template-columns: 1.08fr 1fr; gap: 8%; align-items: start; }
.work-feature { padding: clamp(28px, 3.5vw, 52px); background: var(--color-lime); color: var(--color-ink); display: flex; flex-direction: column; align-items: flex-start; }
.work-feature h3 { font-size: clamp(2.2rem, 4.5vw, 4.2rem); font-weight: 600; line-height: 1.12; }
.work-feature p { font-size: var(--text-body); line-height: 1.7; margin-top: 25px; max-width: 450px; }
.training-topics { margin-top: 24px; padding-left: 1.1em; list-style: disc; font-size: var(--text-body); line-height: 1.65; }
.training-topics li + li { margin-top: 10px; }
.work-feature a:focus-visible { outline-color: var(--color-ink); }
.work-other { display: flex; flex-direction: column; justify-content: space-between; gap: 30px; }
.work-other article { border-top: 1px solid var(--color-line); padding-top: 27px; }
.work-layout article:target, .work-layout article:focus-visible { outline: 2px solid var(--color-lime); outline-offset: 10px; }
.work-layout .work-feature:target, .work-layout .work-feature:focus-visible { outline-color: var(--color-paper); }
.work-other h3 { font-size: clamp(1.7rem, 2.6vw, 2.6rem); }
.work-other p { color: var(--color-mist); margin-top: 16px; max-width: 440px; font-size: var(--text-body); line-height: 1.7; }
.approach { padding-top: 0; }
.approach-heading { border-top: 1px solid var(--color-line); padding-top: var(--space-section); display: grid; grid-template-columns: 1.35fr 0.65fr; gap: 9%; align-items: end; }
.approach-heading h2 { font-size: clamp(3.5rem, 7.4vw, 7rem); color: var(--color-lime); }
.approach-heading > p { color: var(--color-mist); font-size: var(--text-body); line-height: 1.7; max-width: 340px; padding-bottom: 4px; }
.approach-steps { margin-top: 56px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.approach-steps li { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 32px; padding-block: 30px; border-top: 1px solid var(--color-line); }
.approach-steps li:last-child { border-bottom: 1px solid var(--color-line); }
.approach-steps li > span { color: var(--color-lime); font: 500 32px/1.3 var(--font-display); font-variant-numeric: tabular-nums; white-space: nowrap; }
.approach-steps li > div { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 9%; align-items: start; }
.approach-steps h3 { font-size: clamp(1.8rem, 2.7vw, 2.7rem); line-height: 1.25; }
.approach-steps p { color: var(--color-mist); font-size: var(--text-body); line-height: 1.7; max-width: 560px; }
.personal-copy > p:not(.text-lead) { color: var(--color-ink); }
.personal h2 { font-size: clamp(3rem, 6.2vw, 6.2rem); }
.audience { margin-top: 80px; padding-top: 38px; border-top: 1px solid var(--color-ink); display: grid; grid-template-columns: 1fr 1fr; gap: 8%; }
.audience h3 { font-size: clamp(1.9rem, 3.6vw, 3.3rem); }
.audience p { max-width: 470px; font-size: var(--text-body); line-height: 1.7; }
.audience .audience-geography { font-size: var(--text-body); font-weight: 600; margin-top: 20px; max-width: 450px; }
.contact { background: var(--color-lime); color: var(--color-ink); }
.contact .section { padding-block: clamp(3rem, 6vw, 6rem); }
.contact-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 32px; }
.contact-top > p { font-size: var(--text-body); line-height: 1.7; white-space: pre-line; }
.contact h2 { margin-top: 28px; font-size: clamp(4rem, 11.4vw, 11.25rem); font-weight: 600; line-height: 1.05; max-width: 100%; text-wrap: initial; }
.contact-bottom { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-top: 48px; }
.contact-copy { max-width: 54ch; }
.contact-copy .contact-next { margin-top: 16px; font-size: var(--text-small); }
.contact-bottom p { font-size: var(--text-body); line-height: 1.7; white-space: pre-line; }
.contact .button { min-width: 260px; }
.site-footer { display: flex; justify-content: space-between; align-items: end; flex-wrap: wrap; gap: 30px; padding-block: 45px; }
.footer-identity > a { text-decoration: none; font: 500 23px/1.3 var(--font-display); }
.footer-identity > p { margin-top: 8px; color: var(--color-mist); font-size: var(--text-small); }
.social-links { display: flex; flex-wrap: wrap; gap: 12px 26px; align-items: center; }
.social-links a { display: inline-flex; align-items: center; gap: 8px; font-size: var(--text-small); min-height: 44px; padding-block: 12px; text-decoration: none; }
.social-links svg { width: 14px; height: 14px; }
.social-links a:hover, .footer-identity > a:hover { color: var(--color-lime); }
.footer-year { color: var(--color-mist); font-size: var(--text-small); padding-bottom: 12px; }

html[lang="en"] .contact h2 { font-size: clamp(4rem, 11.5vw, 11.25rem); }

@media (max-width: 1100px) {
  .company-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 40px; }
  .header-inner { gap: 20px; min-height: 90px; }
  .brand-name { display: none; }
  .main-nav { gap: 25px; }
  .career-path { gap: 30px; }
  .career-path li:not(:last-child)::after { width: 30px; right: -30px; }
  .approach-steps { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .approach-steps h3 { min-height: auto; }
  .approach-heading { grid-template-columns: 1.3fr 0.7fr; gap: 6%; }
  .approach-heading h2 { font-size: 7.1vw; }
  .social-links { gap: 20px; }
}

@media (max-width: 760px) {
  :root { --space-page: 24px; scroll-padding-top: 25px; }
  .header-inner { min-height: 82px; flex-wrap: wrap; position: relative; gap: 0; padding-block: 16px; }
  .brand-name { display: block; font-size: var(--text-small); }
  .brand { gap: 12px; }
  .header-controls { gap: 10px; margin-left: auto; }
  .language-switch button { font-size: var(--text-small); padding-inline: 7px; }
  .main-nav { order: 3; width: 100%; justify-content: flex-start; flex-wrap: wrap; gap: 4px 20px; margin-top: 12px; border-top: 1px solid var(--color-line); padding-top: 12px; }
  .main-nav a { font-size: var(--text-small); }
  .js-enabled .main-nav { display: none; }
  .js-enabled .main-nav.is-open { display: flex; }
  .js-enabled .menu-toggle { display: block; }
  .statement-band { margin-top: 20px; }
  .statement-band > div { padding-block: 22px; }
  .statement-band span { font-size: clamp(1.4rem, 4.8vw, 2.25rem); }
  .section-intro { grid-template-columns: 1fr; gap: 30px; }
  h2 { font-size: clamp(3.3rem, 10.5vw, 5.3rem); }
  .intro-copy { max-width: 540px; padding-top: 0; }
  .intro-copy > p:not(.text-lead) { font-size: var(--text-body); line-height: 1.7; }
  .intro-copy p + p { margin-top: 20px; }
  .text-lead { font-size: 20px; }
  .career-path { margin-top: 45px; gap: 22px; }
  .career-path li:not(:last-child)::after { width: 22px; right: -22px; }
  .career-path h3 { font-size: 22px; margin-top: 20px; }
  .career-path p { font-size: var(--text-body); margin-top: 12px; line-height: 1.7; }
  .zaza-feature { margin-top: 42px; }
  .zaza-heading { grid-template-columns: 180px 1fr; gap: 32px; }
  .zaza-mark img { width: 180px; }
  .zaza-story > p { font-size: var(--text-body); }
  .zaza-projects { margin-top: 32px; gap: 30px; }
  .project-mark { height: 90px; margin-bottom: 14px; }
  .project-mark img { max-height: 68px; max-width: min(100%, 150px); }
  .zaza-projects h4 { font-size: var(--text-small); }
  .zaza-projects p { font-size: var(--text-small); }
  .company-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 30px; margin-top: 48px; padding-top: 36px; }
  .company-mark { height: 95px; }
  .situations-intro { margin-bottom: 36px; }
  .situations-intro .intro-copy { max-width: 390px; }
  .situation-row { grid-template-columns: minmax(0, 1fr); gap: 18px; padding-block: 25px; }
  .situation-list h3 { font-size: 25px; }
  .situation-list p { font-size: var(--text-body); line-height: 1.7; }
  .situations-close { font-size: var(--text-small); width: 100%; margin-top: 28px; }
  .work-intro { margin-bottom: 36px; }
  .work-intro .intro-copy { font-size: var(--text-body); max-width: 430px; }
  .work-layout { grid-template-columns: 1fr; gap: 36px; }
  .work-feature { padding: 32px; }
  .work-feature h3 { font-size: 43px; }
  .work-feature p { max-width: 500px; }
  .work-other { gap: 28px; }
  .work-other h3 { font-size: 29px; }
  .work-other p { max-width: 540px; }
  .approach-heading { grid-template-columns: 1fr; gap: 30px; }
  .approach-heading h2 { font-size: clamp(3.25rem, 10.1vw, 5rem); }
  .approach-heading > p { max-width: 490px; font-size: var(--text-body); }
  .approach-steps { margin-top: 40px; gap: 0; }
  .approach-steps li { grid-template-columns: 40px minmax(0, 1fr); gap: 20px; padding-block: 25px; }
  .approach-steps li > div { display: block; }
  .approach-steps h3 { font-size: 29px; margin-top: 0; }
  .approach-steps p { font-size: var(--text-body); margin-top: 12px; }
  .audience { margin-top: 45px; padding-top: 28px; grid-template-columns: 1fr; gap: 25px; }
  .personal h2 { font-size: clamp(2.75rem, 10vw, 5rem); }
  .audience h3 { font-size: 32px; }
  .audience p { font-size: var(--text-body); max-width: 540px; }
  .contact-top > p { font-size: var(--text-body); }
  .contact h2 { font-size: clamp(3.8rem, 11.8vw, 6.5rem); margin-top: 30px; }
  .contact-bottom { flex-direction: column; align-items: start; gap: 25px; margin-top: 30px; }
  .contact-bottom p { font-size: var(--text-body); }
  .contact .button { min-width: 260px; min-height: 60px; }
  .site-footer { gap: 22px; padding-block: 36px; }
  .footer-identity { width: 100%; }
  .footer-identity > a { font-size: 23px; }
  .footer-identity > p { font-size: var(--text-small); }
  .social-links { gap: 22px; }
  .social-links a { font-size: var(--text-small); }
  .footer-year { margin-left: auto; }
  html[lang="en"] .contact h2 { font-size: clamp(3.75rem, 13.3vw, 7rem); }
}

@media (max-width: 430px) {
  :root { --space-page: 20px; }
  .brand-name { display: none; }
  .career-path { grid-template-columns: 1fr; gap: 0; padding-left: 22px; margin-top: 38px; }
  .career-path li { padding: 0 0 28px 24px; border-top: 0; border-left: 1px solid var(--color-line); }
  .career-path li:last-child { padding-bottom: 0; }
  .career-path li::before { top: 5px; left: -4px; }
  .career-path li:not(:last-child)::after { display: none; }
  .career-path h3 { font-size: 27px; margin-top: 8px; min-height: auto; white-space: normal; }
  .career-path h3 br { display: none; }
  .career-path p { font-size: var(--text-body); margin-top: 10px; max-width: 260px; }
  .zaza-heading { grid-template-columns: 1fr; gap: 24px; }
  .zaza-mark { justify-content: flex-start; }
  .zaza-projects { grid-template-columns: 1fr; gap: 24px; }
  .zaza-projects li { display: grid; grid-template-columns: 112px 1fr; column-gap: 24px; text-align: left; align-items: center; }
  .project-mark { grid-row: span 2; height: 70px; margin: 0; }
  .project-mark img { max-height: 58px; }
  .zaza-projects h4 { align-self: end; font-size: var(--text-small); }
  .zaza-projects p { align-self: start; font-size: var(--text-small); }
  .company-mark { height: 88px; }
  .company-mark .syrovarnya-mark, .company-mark .bariton-mark { max-height: 78px; }
  .company-caption { padding-top: 12px; }
  .company-caption h3 { font-size: var(--text-small); }
  .situation-row { gap: 14px; }
  .situation-list h3 { font-size: 29px; }
  .situation-list p { font-size: var(--text-body); max-width: 340px; }
  .work-feature { padding: 28px; }
  .work-feature h3 { font-size: 39px; }
  .work-feature p { font-size: var(--text-body); }
  .approach-steps { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .approach-steps li { display: grid; grid-template-columns: 28px 1fr; gap: 18px; }
  .approach-steps li > span { padding-top: 5px; }
  .approach-steps h3 { margin-top: 0; font-size: 27px; }
  .approach-steps p { font-size: var(--text-body); margin-top: 12px; }
  .contact h2 { font-size: 11.55vw; }
  .contact .button { width: 100%; }
  .social-links { justify-content: space-between; width: 100%; gap: 12px; }
  .footer-year { padding-bottom: 0; margin: 0; }
  html[lang="en"] .contact h2 { font-size: 13vw; }
}

/* Real working photography gives the typographic identity a human centre. */
.hero { padding-top: clamp(1.5rem, 3vw, 3rem); padding-bottom: 24px; }
.hero-composition { display: grid; grid-template-columns: 1fr 0.9fr; column-gap: clamp(36px, 7vw, 112px); row-gap: 36px; align-items: center; }
.hero-intro { min-width: 0; padding-bottom: 12px; }
.hero-title { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0 0.2em; font: 700 clamp(4.5rem, 9.15vw, 9.15rem)/1.05 var(--font-display); letter-spacing: -0.035em; text-transform: uppercase; animation: type-arrival 700ms var(--ease-out) both; }
.hero-title > span { display: block; }
.given-name { font-size: 1em; }
.family-name { font-size: 1em; }
.hero-role { display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center; }
.hero-role p { font-size: clamp(1.125rem, 1.5vw, 1.4rem); font-weight: 600; }
.hero-role > span { font-size: var(--text-small); color: var(--color-lime); }
.hero-statement { max-width: 620px; margin-top: 28px; font-size: clamp(1.75rem, 3.15vw, 3.15rem); line-height: 1.3; letter-spacing: -0.035em; text-wrap: balance; }
.hero-actions { display: flex; align-items: flex-start; flex-direction: column; gap: 16px; margin-top: 36px; }
.hero-actions .button { min-width: 268px; }
.hero-portrait { min-width: 0; margin: 0; }
.hero-photo { position: relative; overflow: hidden; height: clamp(390px, 32vw, 500px); background: var(--color-ink); animation: portrait-arrival 900ms var(--ease-out) both; }
.hero-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 52% center; }
.hero-portrait figcaption { margin-top: 14px; color: var(--color-mist); font-size: var(--text-small); line-height: 1.6; }
html[lang="en"] .hero-title { font-size: clamp(4.5rem, 8.45vw, 8.45rem); }
html[lang="en"] .given-name, html[lang="en"] .family-name { font-size: 1em; }
@keyframes portrait-arrival { from { clip-path: inset(0 0 5% 0); transform: translateY(10px); } to { clip-path: inset(0); transform: translateY(0); } }

.practice { padding-top: 0; }
.practice-intro { border-top: 1px solid var(--color-line); padding-top: clamp(3.5rem, 6vw, 5rem); }
.practice h2 { font-size: clamp(3.4rem, 6.1vw, 6rem); }
.personal-layout { display: grid; grid-template-columns: 0.95fr 1.05fr; align-items: center; gap: 9%; }
.personal-story { order: 2; min-width: 0; }
.personal-photo { order: 1; }
.personal-copy { margin-top: 32px; }
.personal-photo { position: relative; overflow: hidden; height: clamp(440px, 43vw, 640px); }
.personal-photo img { display: block; position: absolute; width: 100%; height: 100%; top: 0; right: 0; object-fit: cover; object-position: 62% 40%; }

@media (max-width: 1100px) and (min-width: 761px) {
  .hero-composition { grid-template-columns: 1.1fr 1fr; gap: 28px; }
  .hero-title { font-size: 9.15vw; }
  html[lang="en"] .hero-title { font-size: 8.45vw; }
  .hero-photo { height: 390px; }
  .hero-statement { font-size: clamp(26px, 3.2vw, 36px); }
  .hero-role { gap: 8px 18px; }
  .hero-role p { font-size: 20px; }
  .personal-layout { gap: 7%; }
}
@media (max-width: 760px) {
  .hero { padding-top: 28px; padding-bottom: 22px; }
  .hero-composition { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .hero-intro { display: block; padding-bottom: 0; }
  .hero-title, html[lang="en"] .hero-title { display: block; font-size: 18vw; line-height: 1.09; }
  .given-name, html[lang="en"] .given-name { font-size: 1em; }
  .family-name, html[lang="en"] .family-name { font-size: 0.84em; margin-top: 0.015em; }
  .hero-role { margin-top: 20px; justify-content: space-between; gap: 10px; }
  .hero-role p { font-size: 19px; }
  .hero-role > span { font-size: var(--text-small); }
  .hero-portrait { margin-top: 32px; }
  .hero-photo { height: clamp(340px, 100vw, 580px); }
  .hero-portrait figcaption { display: none; }
  .hero-statement { max-width: 560px; margin-top: 24px; font-size: clamp(1.65rem, 5.1vw, 2.25rem); line-height: 1.4; }
  .hero-actions { margin-top: 25px; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
  .hero-actions .button { min-width: 250px; }
  .about > .section-intro { grid-template-columns: minmax(0, 1fr); }
  .practice h2 { font-size: clamp(3.1rem, 9.1vw, 4.8rem); }
  .personal-layout { grid-template-columns: 1fr; gap: 35px; }
  .personal-story, .personal-photo { order: initial; }
  .personal-photo { width: 100%; max-width: 540px; height: clamp(390px, 110vw, 600px); }
}
@media (max-width: 430px) {
  .hero-role p { font-size: 23px; }
  html[lang="en"] .family-name { font-size: 0.78em; }
  .hero-role > span { font-size: var(--text-small); }
  .hero-actions { flex-direction: column; align-items: stretch; gap: 14px; }
  .hero-actions .button { width: 100%; min-height: 60px; padding-inline: 22px; }
  .personal-copy { margin-top: 25px; }
}


/* The name mark is drawn as vector outlines; it does not depend on a font. */
.brand-logo { display: block; width: 108px; height: auto; flex-shrink: 0; }
.footer-identity { display: flex; align-items: center; gap: 24px; }
.footer-identity .brand-logo { width: 112px; }
.footer-identity-copy > a { text-decoration: none; font: 500 28px/1.3 var(--font-display); }
.footer-identity-copy > p { margin-top: 8px; font-size: var(--text-small); color: var(--color-mist); }
.footer-identity-copy > a:hover { color: var(--color-lime); }
@media (max-width: 1100px) {
  .header-inner { flex-wrap: wrap; padding-block: 16px; gap: 0; }
  .header-controls { margin-left: auto; gap: 16px; }
  .brand-name { display: block; font-size: 16px; }
  .main-nav { order: 3; width: 100%; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--color-line); flex-wrap: wrap; justify-content: flex-start; gap: 4px 26px; }
  .js-enabled .main-nav { display: none; }
  .js-enabled .main-nav.is-open { display: flex; }
  .js-enabled .menu-toggle { display: block; }
}
@media (max-width: 430px) {
  .brand-logo { width: 96px; }
  .brand-name { display: none; }
  .header-controls { gap: 10px; }
  .language-switch button { padding-inline: 7px; }
  .social-links { justify-content: flex-start; gap: 4px 22px; }
  .footer-identity { align-items: flex-start; gap: 18px; }
  .footer-identity .brand-logo { width: 82px; }
  .footer-identity-copy > a { font-size: 25px; }
}


/* Desktop scroll scene; phones and touch devices use a native swipe strip. */
.practice { padding: 0; margin-block: 0 var(--space-section); scroll-margin-top: -6rem; overflow-anchor: none; }
.practice-sticky { padding-top: 24px; }
.practice-intro { border-top: 1px solid var(--color-line); padding-top: 34px; }
.practice h2 { font-size: clamp(3.1rem, 5.8vw, 5.25rem); line-height: 1.08; }
.media-intro-copy { max-width: 490px; padding-top: 8px; }
.media-stage { position: relative; margin-top: 26px; overflow: clip; }
.media-feed { --card-height: clamp(360px, 62svh, 560px); position: relative; display: flex; align-items: center; gap: 36px; min-height: calc(var(--card-height) + 60px); margin: 0; padding: 30px var(--space-page); list-style: none; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-padding-inline: var(--space-page); scrollbar-width: none; }
.media-feed::-webkit-scrollbar { display: none; }
.media-feed:focus-visible { outline: 2px solid var(--color-lime); outline-offset: -5px; }
.feed-item { flex: 0 0 auto; min-width: 0; scroll-snap-align: center; }
.media-card { position: relative; margin: 0; width: calc(var(--card-height) * 0.5625); }
.media-card--photo { width: calc(var(--card-height) * 0.75); }
.phone-shell { position: relative; padding: 6px; border: 1px solid #a4b1ab; border-radius: 34px; background: linear-gradient(145deg, #829189 0%, #26302d 13%, #101715 50%, #69766f 100%); box-shadow: 0 22px 38px #0007; }
.phone-shell::before { content: ""; position: absolute; left: -3px; top: 76px; width: 2px; height: 42px; border-radius: 2px 0 0 2px; background: #7e8c85; }
.phone-shell::after { content: ""; position: absolute; right: -3px; top: 102px; width: 2px; height: 54px; border-radius: 0 2px 2px 0; background: #7e8c85; }
.phone-screen { position: relative; overflow: hidden; border-radius: 27px; background: var(--color-ink); }
.phone-screen video { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: cover; }
.phone-screen video:focus-visible { outline: 2px solid var(--color-lime); outline-offset: -4px; }
.photo-screen { aspect-ratio: 3 / 4; }
.photo-screen img { display: block; width: 100%; height: 100%; object-fit: cover; }
.media-card--team img { width: 170%; height: 170%; max-width: none; transform: translate(-41.2%, -41.2%); }
.phone-camera { position: absolute; width: 29%; height: 16px; top: 13px; left: 50%; transform: translateX(-50%); background: var(--color-ink); border-radius: 20px; pointer-events: none; }
.phone-camera::after { content: ""; position: absolute; right: 7px; top: 5px; width: 6px; height: 6px; border-radius: 50%; background: #25332e; }
.video-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: grid; place-items: center; width: 66px; height: 66px; padding: 0; border-radius: 50%; border: 1px solid #fff; background: #080b10b8; color: #fff; transition: background-color 150ms, color 150ms; }
.video-play svg { width: 26px; height: 26px; margin-left: 4px; fill: currentColor; stroke-width: 1; }
.video-play:hover { background: var(--color-lime); color: var(--color-ink); border-color: var(--color-lime); }
.video-play.is-loading { cursor: progress; }
.video-play.is-loading svg { opacity: 0; }
.video-play.is-loading::after { content: ""; position: absolute; width: 25px; height: 25px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: video-loading 800ms linear infinite; }
@keyframes video-loading { to { transform: rotate(360deg); } }
.video-error { font-size: var(--text-small); margin-top: 14px; }
.personal-photo { margin: 0; min-width: 0; }

.practice.is-motion { height: calc(100svh + var(--gallery-travel)); }
.is-motion .practice-sticky { position: sticky; top: 0; height: 100svh; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: 6px; padding-bottom: 8px; }
.is-motion .practice-intro { width: 100%; padding-top: 24px; }
.is-motion .media-stage { min-height: 0; margin-top: 0; }
.is-motion .media-feed { display: block; width: 100%; height: 100%; min-height: 0; padding: 0; overflow: visible; perspective: 1500px; perspective-origin: 50% 45%; scroll-snap-type: none; }
.is-motion .feed-item { position: absolute; left: 50%; top: 50%; width: max-content; transform-origin: 50% 50%; backface-visibility: hidden; }
.is-motion .media-card { --card-height: var(--scene-card-height); }
.is-motion .media-card--photo { --card-height: var(--scene-photo-height); }
.is-motion .feed-item:not(.is-current)::after { content: ""; position: absolute; inset: 0; cursor: pointer; border-radius: 34px; }
.is-motion .feed-item.is-current .phone-shell { border-color: #d5e6da; }

@media (min-width: 1600px) {
  .is-motion .media-feed { perspective: 1800px; }
}
@media (max-width: 760px) {
  .practice { scroll-margin-top: -25px; }
  .practice-sticky { padding-top: 18px; }
  .practice h2 { font-size: clamp(2.65rem, 9.2vw, 4.1rem); }
  .practice-intro { gap: 14px; padding-top: 24px; }
  .experience-intro { grid-template-columns: minmax(0, 1fr); }
  .experience-intro h2 { font-size: clamp(3.3rem, 10.5vw, 5.3rem); }
  .media-intro-copy { padding-top: 0; max-width: 560px; font-size: 18px; line-height: 1.65; }
  .media-feed { --card-height: min(clamp(350px, 57svh, 510px), calc((100vw - 56px) / 0.75)); gap: 26px; }
  .is-motion .practice-intro { grid-template-columns: 1fr; padding-top: 18px; }
  .is-motion .media-feed { perspective: 1100px; }
  .phone-shell { padding: 5px; border-radius: 30px; }
  .phone-screen { border-radius: 24px; }
  .phone-camera { top: 11px; height: 14px; }
  .phone-camera::after { top: 4px; }
}

@media (max-width: 760px), (pointer: coarse) {
  .media-feed { --touch-slide-width: min(440px, calc(100vw - 2 * var(--space-page) - 24px)); --card-height: min(58svh, 510px, calc(var(--touch-slide-width) / 0.75)); gap: 16px; padding-inline: calc((100% - var(--touch-slide-width)) / 2); scroll-padding-inline: calc((100% - var(--touch-slide-width)) / 2); scroll-snap-type: x mandatory; }
  .feed-item { flex: 0 0 var(--touch-slide-width); display: grid; place-items: center; }
  .media-card { max-width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-title, .hero-photo { animation: none; }
  .video-play.is-loading::after { animation: none; }
  :root { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}