:root {
  --milk: #f4ece8;
  --blush: #eadbd5;
  --white: #fff;
  --ink: #111;
  --dark: #171513;
  --bronze: #9d6849;
  --line: rgba(87, 58, 45, .2);
  --rule-structural: rgba(87, 58, 45, .24);
  --rule-secondary: rgba(87, 58, 45, .13);
  --rule-dark-structural: rgba(244, 236, 232, .24);
  --rule-dark-secondary: rgba(244, 236, 232, .12);
  --radius-control: 3px;
  /* Elevation. Values are the accepted production recipes, unchanged — these
     names exist so a future component reaches for the established lift instead
     of inventing another one. See SURFACE -> BOUNDARY -> ELEVATION below. */
  --elev-inset: inset 0 1px rgba(255,255,255,.22);
  --elev-inset-raised: inset 0 1px rgba(255,255,255,.46);
  --elev-card: 0 20px 62px rgba(35,24,19,.1);
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);
  --ease-drawer: cubic-bezier(.32, .72, 0, 1);
  --pad: clamp(20px, 3vw, 56px);
  --display: "Playfair Display", Georgia, serif;
  --body: "Manrope", Arial, sans-serif;
}

/* SURFACE -> BOUNDARY -> ELEVATION
   Hierarchy is established in that order. A new component should first try the
   warm surface palette (--milk, --blush, --dark), then the structural line
   system (--rule-*), and only reach for --elev-* when physical lift is actually
   what is being expressed. The accepted training card is the reference: warm
   translucent surface first, 1px boundary second, elevation last and faintest.
   Shadow is the exception in this system, not the default way to separate. */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; background: var(--milk); }
body { margin: 0; color: var(--ink); background: var(--milk); background-image: linear-gradient(115deg, rgba(255,255,255,.22), transparent 42%, rgba(161,111,83,.045)); font-family: var(--body); font-weight: 400; overflow-x: clip; }
body::before { content: ""; position: fixed; z-index: 600; inset: 0; pointer-events: none; opacity: .032; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.34' numOctaves='3' seed='8' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E"); }
body.menu-open { overflow: hidden; }
img, video { display: block; width: 100%; }
[data-media-slot] { object-fit: var(--slot-fit, cover); object-position: var(--slot-position, center); }
button, a { color: inherit; font: inherit; }
a { text-decoration: none; }
button { border: 0; background: none; cursor: pointer; }
p { margin: 0; max-width: 56ch; font-size: clamp(15px, 1.1vw, 18px); line-height: 1.6; text-wrap: pretty; overflow-wrap: break-word; }
h1, h2, h3, strong, a, button { overflow-wrap: break-word; }
h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 400; hyphens: none; text-wrap: balance; }
address { font-style: normal; }
::selection { color: var(--white); background: var(--bronze); }
:focus-visible { outline: 2px solid var(--bronze); outline-offset: 5px; }

.skip-link { position: fixed; z-index: 1000; top: 12px; left: 12px; padding: 12px 18px; color: var(--white); background: var(--dark); transform: translateY(-150%); transition: transform 300ms var(--ease); }
.skip-link:focus { transform: none; }
.section-pad { padding: clamp(84px, 11vw, 180px) var(--pad); }
.section-index { display: flex; justify-content: space-between; gap: 20px; padding-bottom: 14px; border-bottom: 1px solid var(--line); font-size: 11px; line-height: 1.8; letter-spacing: .18em; text-transform: uppercase; }
.section-index-light { border-color: rgba(255,255,255,.24); }
.line-mask { display: block; overflow: hidden; margin-block: -.14em -.18em; padding-block: .14em .18em; }
.line { display: block; }

.site-header { position: fixed; z-index: 100; inset: 0 0 auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 84px; padding: 0 var(--pad); color: var(--white); text-shadow: 0 1px 2px rgba(0,0,0,.88), 0 2px 20px rgba(0,0,0,.48); transition: transform 240ms var(--ease-out), color 180ms var(--ease-out); }
.site-header::before { content: ""; position: absolute; z-index: -1; inset: 0 0 18px; background: linear-gradient(to bottom, rgba(18,15,13,.22), transparent); mask-image: linear-gradient(to bottom, #000, transparent); pointer-events: none; }
.site-header.is-hidden { transform: translateY(-105%); }
.wordmark { justify-self: start; font-size: clamp(15px, 1.1vw, 18px); font-weight: 500; letter-spacing: -.035em; }
.desktop-nav { display: flex; gap: clamp(22px, 2.4vw, 42px); font-size: 13px; }
.desktop-nav a, .header-book { position: relative; }
.desktop-nav a::after, .header-book::after { content: ""; position: absolute; right: 0; bottom: -5px; left: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform 220ms var(--ease-out); }
.desktop-nav a:focus-visible::after, .header-book:focus-visible::after { transform: scaleX(1); transform-origin: left; }
.header-actions { justify-self: end; display: flex; align-items: center; gap: 24px; }
.header-book { font-size: 13px; }
.menu-toggle { display: flex; align-items: center; gap: 11px; min-width: 52px; min-height: 48px; color: inherit; font-size: 13px; }
.menu-toggle i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.menu-panel { position: fixed; z-index: 300; inset: 0; display: grid; grid-template-columns: 38% 62%; color: var(--white); background: var(--dark); clip-path: inset(0 0 100% 0); visibility: hidden; transform: translateY(-2%); transition: clip-path 460ms var(--ease-drawer), transform 460ms var(--ease-drawer), visibility 0s 460ms; }
.menu-panel.is-open { clip-path: inset(0); visibility: visible; transform: none; transition: clip-path 460ms var(--ease-drawer), transform 460ms var(--ease-drawer), visibility 0s; }
.menu-media { position: relative; overflow: hidden; }
.menu-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 70%, rgba(23,23,23,.4)); }
.menu-media img { position: absolute; inset: 0; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.025); transition: opacity 240ms var(--ease-out), transform 460ms var(--ease-in-out); }
.menu-media img.is-active { opacity: 1; transform: none; }
.menu-content { display: flex; flex-direction: column; padding: 24px var(--pad) 32px; }
.menu-top { display: flex; justify-content: space-between; align-items: center; min-height: 52px; padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,.22); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; }
.menu-close { min-width: 58px; min-height: 44px; color: var(--white); }
.menu-links { margin: auto 0; }
.menu-links a { position: relative; display: grid; grid-template-columns: 52px 1fr auto; align-items: baseline; overflow: hidden; border-bottom: 1px solid rgba(255,255,255,.18); transform: translateY(28px); opacity: 0; transition: transform 320ms var(--ease-out), opacity 240ms var(--ease-out), border-color 180ms var(--ease-out); }
.menu-links a::after { content: ""; align-self: center; width: 34px; height: 1px; background: currentColor; transform: translateX(120%); transition: transform 220ms var(--ease-out); }
.menu-panel.is-open .menu-links a { transform: none; opacity: 1; }
.menu-panel.is-open .menu-links a:nth-child(1) { transition-delay: 80ms; }
.menu-panel.is-open .menu-links a:nth-child(2) { transition-delay: 120ms; }
.menu-panel.is-open .menu-links a:nth-child(3) { transition-delay: 160ms; }
.menu-panel.is-open .menu-links a:nth-child(4) { transition-delay: 200ms; }
.menu-panel.is-open .menu-links a:nth-child(5) { transition-delay: 240ms; }
.menu-panel.is-open .menu-links a:nth-child(6) { transition-delay: 280ms; }
.menu-panel.is-open .menu-links a:nth-child(7) { transition-delay: 320ms; }
.menu-links small { font-size: 11px; opacity: .58; }
.menu-links span { padding: 9px 0 11px; font-family: var(--display); font-size: clamp(36px, 4.2vw, 70px); line-height: 1; letter-spacing: -.035em; transition: transform 220ms var(--ease-out), color 180ms var(--ease-out); }
.menu-links a:focus-visible { border-color: rgba(255,255,255,.62); }
.menu-links a:focus-visible span { color: var(--bronze); transform: translateX(14px); }
.menu-links a:focus-visible::after { transform: none; }
.menu-meta { display: grid; grid-template-columns: 1fr .7fr 1.2fr; gap: 24px; padding-top: 22px; font-size: 12px; line-height: 1.55; }

.hero { position: relative; height: 180vh; background: var(--milk); }
.hero-sticky { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.hero-media { position: absolute; inset: calc(var(--hero-progress, 0) * 4vw); overflow: hidden; background: #beb6aa; transform: scale(calc(1 - var(--hero-progress, 0) * .035)); transform-origin: center; }
.hero-media video, .hero-media img { position: absolute; inset: 0; height: 100%; object-fit: cover; object-position: 68% 40%; }
.hero-media video:not([src]):not(:has(source)) { display: none; }
.hero-copy { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; height: 100svh; padding: 112px var(--pad) 42px; color: var(--white); text-shadow: 0 2px 24px rgba(0,0,0,.18); opacity: calc(1 - var(--hero-progress, 0) * 1.5); transform: translateY(calc(var(--hero-progress, 0) * -7vh)); }
.hero-kicker { position: absolute; top: 22%; left: var(--pad); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; }
.hero h1 { width: min(690px, 48vw); font-size: clamp(4rem, 6.6vw, 7.4rem); line-height: .91; letter-spacing: -.043em; }
.hero h1[data-copy-density="long"] { width: min(820px, 58vw); font-size: clamp(3.5rem, 5.5vw, 6.6rem); }
.hero h1[data-copy-density="extended"] { width: min(900px, 64vw); font-size: clamp(3rem, 4.7vw, 5.6rem); }
.hero h1 .line-2 { padding-left: clamp(18px, 3.8vw, 62px); }
.hero h1 .line { transform: translateY(110%); animation: hero-line 1100ms var(--ease) forwards; }
.hero h1 .line-mask:nth-child(1) .line { animation-delay: 560ms; }
.hero h1 .line-mask:nth-child(2) .line { animation-delay: 700ms; }
@keyframes hero-line { to { transform: none; } }
.hero-bottom { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; width: 100%; margin-top: 28px; }
.hero-bottom p { width: 34ch; font-size: 14px; }
.hero-actions { display: flex; align-items: center; gap: 22px; }
.quiet-link { display: inline-flex; align-items: center; gap: 12px; min-height: 48px; padding: 10px 0; font-size: 12px; }
.link-line { width: 42px; height: 1px; background: currentColor; transform-origin: left; transition: transform 520ms var(--ease); }
.quiet-link:focus-visible .link-line { transform: scaleX(1.45); }
.cta-cluster { display: flex; align-items: center; gap: 14px; }
.cta-cluster small, .contact-action small { width: 18ch; font-size: 12px; line-height: 1.4; opacity: .72; }
.button { position: relative; display: inline-flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 54px; min-width: 190px; padding: 0 20px; overflow: hidden; border-radius: 0; font-size: 12px; }
.button::after { content: ""; position: relative; z-index: 2; width: 28px; height: 1px; background: currentColor; transform-origin: left; transition: transform 520ms var(--ease); }
.button-light { color: var(--dark); background: var(--white); }
.button-bronze { color: var(--white); background: var(--bronze); }
.button-dark { color: var(--white); background: var(--dark); }
.button-fill { position: absolute; inset: 0; background: var(--bronze); transform: scaleX(0); transform-origin: left; transition: transform 500ms var(--ease); }
.button-bronze .button-fill { background: var(--white); }
.button-dark .button-fill { background: var(--bronze); }
.button-label { position: relative; z-index: 1; transition: color 320ms var(--ease), transform 520ms var(--ease); }
.button { transition: transform 140ms var(--ease-out); }
.button:active { transform: scale(.97); }
.button:focus-visible .button-fill { transform: scaleX(1); }
.button:focus-visible .button-label { color: var(--white); transform: translateX(3px); }
.button:focus-visible::after { transform: scaleX(1.35); }
.button-bronze:focus-visible .button-label { color: var(--dark); }
.button-dark:focus-visible .button-label { color: var(--white); }
.scroll-cue { position: absolute; z-index: 3; right: var(--pad); bottom: 38%; display: flex; align-items: center; gap: 10px; color: var(--white); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; writing-mode: vertical-rl; }
.scroll-cue span { display: block; width: 1px; height: 54px; background: currentColor; transform-origin: top; animation: cue 1.8s var(--ease) infinite; }
@keyframes cue { 0% { transform: scaleY(0); } 45% { transform: scaleY(1); transform-origin: top; } 70%,100% { transform: scaleY(0); transform-origin: bottom; } }

.intro { min-height: 140vh; }
.intro-grid { display: grid; grid-template-columns: 1fr minmax(260px, 32vw); gap: 7vw; align-items: end; padding: clamp(72px, 10vw, 160px) 0; }
.editorial-title { font-size: clamp(2.8rem, 6.6vw, 7.8rem); line-height: .91; letter-spacing: -.038em; }
.editorial-title[data-copy-density="long"] { max-width: 15ch; font-size: clamp(2.7rem, 5.5vw, 6.6rem); }
.editorial-title[data-copy-density="extended"] { max-width: 18ch; font-size: clamp(2.4rem, 4.7vw, 5.6rem); }
.intro-copy { margin-bottom: .55em; }
/* The «Не змінюємо вас — підкреслюємо ваше» principle, formerly a full-height
   standalone screen. It sits in the copy column under the intro paragraph and is
   held at roughly a quarter of the editorial title's size so it reads as a coda
   rather than a competing heading. */
.intro-manifest {
  grid-column: 2;
  max-width: 26ch;
  margin: clamp(18px, 1.7vw, 30px) 0 0;
  font-family: var(--display);
  font-size: clamp(1.2rem, 1.5vw, 1.85rem);
  line-height: 1.18;
  letter-spacing: -.02em;
}
.intro-manifest em { color: var(--bronze); font-weight: 400; }
.intro-image { width: min(72vw, 1120px); margin: 0 0 0 auto; overflow: hidden; }
.intro-image img { aspect-ratio: 3 / 1.65; object-fit: cover; transition: transform 900ms var(--ease); }
.intro-image:focus-within img { transform: scale(1.025); }

.editorial-sequence { position: relative; height: 320vh; margin-top: -14vh; color: var(--white); background: var(--dark); clip-path: inset(0 round 0); }
.sequence-stage { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.sequence-stage::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 46%, rgba(157,104,73,.16), transparent 42%); opacity: calc(.25 + var(--sequence-progress, 0) * .75); }
.sequence-title { position: absolute; z-index: 1; top: 50%; left: 50%; width: 7ch; color: rgba(255,255,255,.92); font-size: clamp(5rem, 10vw, 12rem); line-height: .78; letter-spacing: -.055em; text-align: center; transform: translate(-50%, -50%) scale(calc(1 - var(--sequence-progress, 0) * .08)); opacity: calc(.95 - var(--sequence-progress, 0) * .58); }
.sequence-copy { position: absolute; z-index: 7; inset: auto var(--pad) 12vh; display: flex; justify-content: space-between; align-items: end; gap: 30px; }
.sequence-copy p { width: 34ch; color: rgba(255,255,255,.72); }
.sequence-counter, .card-index { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; }
.sequence-frame { position: absolute; margin: 0; overflow: hidden; will-change: transform; }
.sequence-frame img { height: 100%; object-fit: cover; }
.frame-a { width: 30vw; height: 66vh; top: 17vh; left: 7vw; transform: translate3d(calc(var(--sequence-progress, 0) * 7vw), calc(var(--sequence-progress, 0) * -30vh), 0) rotate(calc(var(--sequence-progress, 0) * -2deg)); }
.frame-b { width: 23vw; height: 44vh; top: 7vh; right: 6vw; transform: translate3d(calc(var(--sequence-progress, 0) * -8vw), calc(34vh - var(--sequence-progress, 0) * 66vh), 0) rotate(calc(2deg - var(--sequence-progress, 0) * 4deg)); }
.frame-c { width: 25vw; height: 50vh; top: 36vh; left: 49vw; transform: translate3d(calc(var(--sequence-progress, 0) * 7vw), calc(52vh - var(--sequence-progress, 0) * 82vh), 0); }

.services { position: relative; height: 400vh; margin-top: 0; color: var(--white); background: var(--dark); border-radius: 0; }
.services-stage { position: sticky; top: 0; display: grid; grid-template-columns: 52% 48%; height: 100svh; overflow: hidden; }
.services-copy { display: flex; flex-direction: column; padding: 34px var(--pad) 48px; }
.services-copy > h2 { margin: auto 0 0; color: var(--bronze); font-family: var(--body); font-size: 11px; letter-spacing: .19em; text-transform: uppercase; }
.service-live { min-height: 27vh; padding: 18px 0 20px; border-bottom: 1px solid rgba(255,255,255,.22); }
.service-number { display: block; margin-bottom: 10px; font-size: 12px; opacity: .55; }
.service-live h3 { max-width: 9ch; font-size: clamp(3.8rem, 6.6vw, 8rem); line-height: .88; letter-spacing: -.04em; }
.service-live p { margin: 22px 0 0 auto; max-width: 38ch; color: rgba(255,255,255,.72); }
.service-nav { display: grid; grid-template-columns: 1fr 1fr; margin-top: 18px; border-top: 1px solid rgba(255,255,255,.16); }
.service-nav button { display: grid; grid-template-columns: 34px 1fr; align-items: center; min-height: 42px; padding: 0 12px 0 0; border-bottom: 1px solid rgba(255,255,255,.16); color: rgba(255,255,255,.52); text-align: left; transition: color 260ms var(--ease), transform 420ms var(--ease); }
.service-nav button:nth-child(odd) { border-right: 1px solid rgba(255,255,255,.16); }
.service-nav button span { font-size: 10px; opacity: .65; }
.service-nav button:focus-visible, .service-nav button.is-active { color: var(--white); transform: translateX(5px); }
.text-link { align-self: flex-start; display: flex; align-items: center; gap: 16px; min-height: 44px; margin-top: 18px; font-size: 12px; }
.text-link span { width: 64px; height: 1px; background: currentColor; transform-origin: left; transition: transform 520ms var(--ease); }
.text-link:focus-visible span { transform: scaleX(1.5); }
.services-media { position: relative; overflow: hidden; }
.services-media img { position: absolute; inset: 0; height: 100%; object-fit: cover; opacity: 0; clip-path: inset(100% 0 0); transform: scale(1.03); transition: opacity 520ms var(--ease), clip-path 900ms var(--ease), transform 900ms var(--ease); }
.services-media img.is-active { z-index: 1; opacity: 1; clip-path: inset(0); transform: none; }
.service-steps { position: absolute; z-index: 3; right: 20px; bottom: 28px; display: flex; gap: 6px; }
.service-steps span { width: 28px; height: 2px; background: rgba(255,255,255,.32); }
.service-steps span.is-active { background: var(--white); }
.mobile-services { display: none; }

.works-finale { position: relative; z-index: 2; margin-top: -10vh; padding-top: clamp(130px, 14vw, 220px); background: var(--milk); }
.works-heading { display: flex; justify-content: space-between; gap: 40px; align-items: end; padding: clamp(70px, 9vw, 145px) 0 90px; }
.works-heading p { margin-bottom: .7em; }
.gallery { display: grid; grid-template-columns: repeat(12, 1fr); gap: 2.4vw; align-items: start; }
.gallery-item { position: relative; display: block; width: 100%; padding: 0; overflow: hidden; }
.gallery-item img { height: 100%; object-fit: cover; transition: transform 850ms var(--ease), filter 620ms var(--ease); }
.gallery-item:focus-visible img { transform: scale(1.035); filter: saturate(.88); }
.gallery-a { grid-column: 1 / span 5; aspect-ratio: 4 / 5; }
.gallery-b { grid-column: 7 / -1; aspect-ratio: 3 / 2; margin-top: 13vw; }
.gallery-c { grid-column: 4 / span 4; aspect-ratio: 3 / 4; margin-top: -5vw; }

.about { display: grid; grid-template-columns: 56% 44%; min-height: 100svh; background: #eee3dd; }
.about-media { overflow: hidden; }
.about-media img { height: 100%; object-fit: cover; }
.about-copy { display: flex; flex-direction: column; justify-content: space-between; }
.about-copy .editorial-title { margin: auto 0; font-size: clamp(2.8rem, 5vw, 6rem); }
.about-copy > p { margin-left: auto; }

.training-teaser { position: relative; height: 200vh; background: var(--blush); }
.training-teaser-stage { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.training-teaser-media { position: absolute; inset: 0; clip-path: inset(calc(var(--training-progress, 0) * 6vh) calc(var(--training-progress, 0) * 6vw)); }
.training-teaser-media::after { content: ""; position: absolute; inset: 0; background: rgba(24,20,17,.12); }
.training-teaser-media img { height: 100%; object-fit: cover; object-position: center 42%; transform: scale(calc(1.06 - var(--training-progress, 0) * .06)); }
.training-teaser-card { position: absolute; z-index: 2; right: var(--pad); bottom: clamp(24px, 5vw, 70px); width: min(590px, 48vw); padding: clamp(28px, 4vw, 58px); background: var(--milk); transform: translateY(calc((1 - var(--training-progress, 0)) * 18vh)); }
.training-teaser-card h2 { margin: 24px 0; font-size: clamp(3rem, 5vw, 6.5rem); line-height: .88; letter-spacing: -.04em; }
.training-teaser-card p { margin: 0 0 28px auto; }

.contact { padding: clamp(90px, 10vw, 150px) var(--pad) 44px; color: var(--white); background: var(--dark); }
.contact-top { min-height: 72vh; display: flex; flex-direction: column; }
.contact h2 { margin: auto 0 0; font-size: clamp(3.5rem, 8vw, 9.5rem); line-height: .86; letter-spacing: -.043em; }
.contact h2 em { color: var(--bronze); font-weight: 400; }
.contact-action { display: flex; align-items: center; gap: 16px; margin: 36px 0 54px auto; }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 4vw; padding-top: 28px; border-top: 1px solid rgba(255,255,255,.22); }
.contact-grid > div { display: flex; flex-direction: column; gap: 22px; }
.contact-grid a, .contact-grid address, .contact-grid p { font-family: var(--display); font-size: clamp(20px, 2vw, 32px); line-height: 1.2; }
.contact-label { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; opacity: .55; }
.contact-layout { display: grid; grid-template-columns: 40% 60%; gap: clamp(28px, 5vw, 80px); align-items: stretch; }
.contact-layout .contact-grid { grid-template-columns: 1fr; gap: 38px; }
.contact-layout .contact-grid > div { gap: 12px; }
.contact-layout .contact-grid a, .contact-layout .contact-grid address, .contact-layout .contact-grid p { font-size: clamp(18px, 1.6vw, 28px); }
.route-link { align-self: end; justify-self: start; padding: 10px 0; border-bottom: 1px solid currentColor; font-family: var(--body) !important; font-size: 12px !important; }
.route-link span { display: inline-block; width: 22px; height: 1px; margin: 0 0 3px 9px; background: currentColor; transform-origin: left; transition: transform 520ms var(--ease); }
.route-link:focus-visible span { transform: scaleX(1.45); }
.map-wrap { position: relative; isolation: isolate; min-height: 520px; overflow: hidden; background: #d8cec5; }
.map-wrap::before {
  content: "beautystudio_zp · просп. Соборний, 158";
  position: absolute;
  z-index: 0;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 28px;
  color: rgba(35, 28, 24, .58);
  font-size: 12px;
  letter-spacing: .14em;
  text-align: center;
  text-transform: uppercase;
}
.map-wrap iframe { position: relative; z-index: 1; display: block; width: 100%; height: 100%; min-height: 520px; border: 0; filter: grayscale(.55) sepia(.13) contrast(.94); }
.map-fallback { padding: 12px 0 0; font-size: 12px; color: rgba(255,255,255,.66); }
.map-fallback a { text-decoration: underline; }

/* Навчання */
.training-hero { position: relative; min-height: 100svh; overflow: hidden; color: var(--white); background: var(--dark); }
.training-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(18,16,14,.66), rgba(18,16,14,.06) 70%); }
.training-hero-media { position: absolute; inset: 0; }
.training-hero-media img { height: 100%; object-fit: cover; object-position: center 42%; }
.training-hero-copy { position: relative; z-index: 2; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; padding: 140px var(--pad) 50px; }
.training-hero-copy .hero-kicker { position: absolute; top: 21%; left: var(--pad); }
.training-hero h1 { max-width: 1130px; font-size: clamp(3.2rem, 7.8vw, 9.2rem); line-height: .86; letter-spacing: -.045em; }
.training-hero h1[data-copy-density="long"] { font-size: clamp(3rem, 6.5vw, 7.8rem); }
.training-hero h1[data-copy-density="extended"] { font-size: clamp(2.8rem, 5.5vw, 6.6rem); }
.training-hero h1 .line-2 { padding-left: clamp(24px, 12vw, 190px); }
.training-hero h1 .line { transform: translateY(110%); animation: hero-line 1100ms var(--ease) forwards; }
.training-hero h1 .line-mask:nth-child(2) .line { animation-delay: 120ms; }
.training-hero h1 .line-mask:nth-child(3) .line { animation-delay: 240ms; }
.training-hero-copy > p:not(.hero-kicker) { margin: 28px 0 24px; }
.training-page .training-hero { height: 165vh; min-height: 0; overflow: clip; }
.training-page .training-hero-media { position: sticky; top: 0; height: 100svh; clip-path: inset(calc(var(--training-hero-progress, 0) * 3vh) calc(var(--training-hero-progress, 0) * 2.5vw)); }
.training-page .training-hero-media img { transform: scale(calc(1.04 + var(--training-hero-progress, 0) * .05)) translate3d(calc(var(--training-hero-progress, 0) * -1vw), calc(var(--training-hero-progress, 0) * -2vh), 0); }
.training-page .training-hero-copy { position: sticky; top: 0; margin-top: -100svh; opacity: clamp(0, calc(1 - var(--training-hero-progress, 0) * 1.45), 1); transform: translate3d(0, calc(var(--training-hero-progress, 0) * -7vh), 0); }
.course-media-scene { position: relative; height: 180vh; overflow: clip; background: var(--dark); }
.course-media-stage { position: sticky; top: 0; height: 100svh; overflow: hidden; clip-path: inset(calc(var(--course-media-progress, 0) * 4vh) calc(var(--course-media-progress, 0) * 4vw)); }
.course-media-stage img, .course-media-stage video { height: 100%; object-fit: var(--slot-fit, cover); object-position: var(--slot-position, center); transform: scale(calc(1.05 - var(--course-media-progress, 0) * .05)); }
.course-media-stage::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, rgba(23,21,19,.28), transparent 45%); }
.training-content-slot[hidden] { display: none; }
.training-slot-grid { display: grid; grid-template-columns: 1fr minmax(280px, .72fr); gap: clamp(48px, 9vw, 150px); align-items: end; padding-top: clamp(64px, 9vw, 150px); }
.training-slot-grid .editorial-title { max-width: 10ch; margin-bottom: 32px; }
.training-slot-grid figure { margin: 0; aspect-ratio: var(--slot-ratio, 4 / 5); overflow: hidden; }
.training-slot-grid img { height: 100%; }
.training-slot-list { list-style: none; margin: clamp(64px, 9vw, 140px) 0 0; padding: 0; }
.training-slot-list > * { display: grid; grid-template-columns: 70px minmax(180px, .7fr) 1fr; gap: clamp(18px, 4vw, 64px); align-items: baseline; padding: 28px 0; border-top: 1px solid currentColor; }
.training-slot-list span { font-size: 11px; letter-spacing: .14em; }
.training-slot-list strong { font-family: var(--display); font-size: clamp(25px, 3vw, 44px); font-weight: 400; }
.audience-grid { display: grid; grid-template-columns: 1.35fr .65fr; gap: 8vw; padding-top: 10vw; align-items: start; }
.audience-copy { padding-top: 20vh; }
.audience-copy > p { margin: 0 0 54px auto; }
.audience-copy figure { margin: 0; overflow: hidden; }
.audience-copy img { aspect-ratio: 3 / 4; object-fit: cover; }
.program { color: var(--white); background: var(--dark); }
.program-head { display: grid; grid-template-columns: 1.25fr .75fr; gap: 8vw; padding: 10vw 0 8vw; align-items: end; }
.program-head h2 { max-width: 8ch; font-size: clamp(4rem, 8vw, 10rem); line-height: .86; letter-spacing: -.045em; }
.program-head p { color: rgba(255,255,255,.68); }
.program-lines { list-style: none; margin: 0; padding: 0; }
.program-lines li { display: grid; grid-template-columns: 9vw .8fr 1fr; gap: 3vw; padding: 26px 0; border-top: 1px solid rgba(255,255,255,.22); align-items: baseline; }
.program-lines span { font-size: 11px; opacity: .55; }
.program-lines strong { font-family: var(--display); font-size: clamp(24px, 3vw, 42px); font-weight: 400; }
.program-lines p { color: rgba(255,255,255,.65); }
.practice { display: grid; grid-template-columns: 52% 48%; min-height: 100svh; background: var(--white); }
.practice-media { overflow: hidden; }
.practice-media img { height: 100%; object-fit: cover; }
.practice-copy { display: flex; flex-direction: column; justify-content: space-between; }
.practice-copy .editorial-title { margin: auto 0; font-size: clamp(3rem, 5vw, 6.3rem); }
.practice-copy em { color: var(--bronze); font-weight: 400; }
.practice-copy > p { margin-left: auto; }
.training-form-section { display: grid; grid-template-columns: .85fr 1.15fr; gap: 9vw; background: var(--blush); }
.form-intro h2 { margin-top: 7vw; }
.form-intro > p { margin: 42px 0 0 auto; }
.training-form { display: grid; grid-template-columns: 1fr 1fr; gap: 30px 22px; align-self: start; padding-top: 50px; }
.training-form label { display: grid; gap: 10px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.training-form input, .training-form select, .training-form textarea { width: 100%; min-height: 52px; padding: 12px 0; border: 0; border-bottom: 1px solid rgba(17,17,17,.38); border-radius: 0; color: var(--ink); background: transparent; font: 16px var(--body); letter-spacing: 0; text-transform: none; }
.training-form textarea { resize: vertical; }
.training-form select { appearance: auto; }
.training-form .form-wide { grid-column: 1 / -1; }
.training-form .form-consent { display: flex; grid-template-columns: none; flex-direction: row; align-items: flex-start; gap: 12px; line-height: 1.5; letter-spacing: 0; text-transform: none; }
.form-consent input { width: 18px; min-height: 18px; flex: 0 0 auto; }
.training-form .button { justify-self: start; border: 0; }
.form-status { min-height: 1.5em; font-size: 13px; }
.form-result { padding: 22px; border: 1px solid rgba(17,17,17,.25); }
.form-result p { white-space: pre-line; }
.form-result div { display: flex; gap: 20px; margin-top: 18px; }
.form-result a, .quiet-button { padding-bottom: 5px; border-bottom: 1px solid currentColor; font-size: 12px; }

.footer { padding: 28px var(--pad) 30px; color: var(--white); background: var(--dark); border-top: 1px solid rgba(255,255,255,.22); }
.footer-wordmark { display: block; overflow: hidden; font-family: var(--display); font-size: clamp(3.7rem, 11.8vw, 14rem); line-height: .88; letter-spacing: -.055em; white-space: nowrap; }
.footer-bottom { display: grid; grid-template-columns: 1fr 1fr auto; gap: 28px; align-items: end; padding-top: 64px; font-size: 11px; }
.footer-bottom p { font-size: 12px; }
.footer-bottom nav { display: flex; gap: 20px; }
.footer-bottom small { opacity: .58; }

.reveal .rise, .rise.reveal { opacity: 0; filter: blur(14px); transform: translateY(28px); }
.reveal .line { transform: translateY(110%); }
.reveal.is-in .rise, .rise.reveal.is-in { opacity: 1; filter: blur(0); transform: none; transition: opacity 900ms var(--ease) var(--d, 0ms), transform 900ms var(--ease) var(--d, 0ms), filter 900ms var(--ease) var(--d, 0ms); }
.reveal.is-in .line { transform: none; transition: transform 1000ms var(--ease); }
.reveal.is-in .line-mask:nth-child(2) .line { transition-delay: 100ms; }
.reveal.is-in .line-mask:nth-child(3) .line { transition-delay: 200ms; }
.image-reveal { clip-path: inset(0 0 99% 0); }
.image-reveal img { transform: scale(1.06); }
.image-reveal.is-in { clip-path: inset(0); transition: clip-path 1100ms var(--ease); }
.image-reveal.is-in img { transform: none; transition: transform 1200ms var(--ease); }
.delay-300 { --d: 300ms; }
.delay-1040 { --d: 1040ms; }
.delay-1200 { --d: 1200ms; }

.lightbox { width: min(90vw, 980px); max-height: 92vh; padding: 0; border: 0; background: transparent; overflow: visible; }
.lightbox::backdrop { background: rgba(17,17,17,.92); backdrop-filter: blur(12px); }
.lightbox img { max-height: 86vh; object-fit: contain; }
.lightbox button { position: absolute; right: 0; bottom: calc(100% + 12px); min-height: 44px; color: var(--white); font-size: 12px; }
.cursor { position: fixed; z-index: 500; top: -100px; left: -100px; display: none; align-items: center; justify-content: center; width: 56px; height: 56px; border: 1px solid rgba(255,255,255,.9); border-radius: 50%; color: transparent; background: rgba(255,255,255,.035); box-shadow: 0 0 0 1px rgba(17,17,17,.18); backdrop-filter: blur(1px); pointer-events: none; opacity: 0; transform: translate(-50%, -50%) scale(.65); transition: opacity 180ms, transform 420ms var(--ease); }
.cursor.is-visible { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.cursor span { display: none; }

@media (hover: hover) and (pointer: fine) {
  .cursor { display: flex; }
  .desktop-nav a:hover::after, .header-book:hover::after { transform: scaleX(1); transform-origin: left; }
  .menu-links a:hover { border-color: rgba(255,255,255,.62); }
  .menu-links a:hover span { color: var(--bronze); transform: translateX(14px); }
  .menu-links a:hover::after { transform: none; }
  .quiet-link:hover .link-line { transform: scaleX(1.45); }
  .button:hover .button-fill { transform: scaleX(1); }
  .button:hover .button-label { color: var(--white); transform: translateX(3px); }
  .button:hover::after { transform: scaleX(1.35); }
  .button-bronze:hover .button-label { color: var(--dark); }
  .button-dark:hover .button-label { color: var(--white); }
  .intro-image:hover img { transform: scale(1.025); }
  .service-nav button:hover { color: var(--white); transform: translateX(5px); }
  .text-link:hover span { transform: scaleX(1.5); }
  .gallery-item:hover img { transform: scale(1.035); filter: saturate(.88); }
  .route-link:hover span { transform: scaleX(1.45); }
}

@media (max-width: 991px) {
  .site-header { grid-template-columns: 1fr auto; }
  .desktop-nav, .header-book { display: none; }
  .menu-panel { grid-template-columns: 34% 66%; }
  .hero-copy { padding-bottom: 32px; }
  .hero-bottom { align-items: flex-end; }
  .scroll-cue { display: none; }
  .intro-grid { grid-template-columns: 1fr; }
  .intro-copy { margin-left: auto; }
  .intro-manifest { grid-column: auto; max-width: 34ch; margin-left: auto; }
  .about { grid-template-columns: 1fr; }
  .about-media { height: 72svh; }
  .about-copy { min-height: 80svh; }
  .contact-layout { grid-template-columns: 1fr; }
  .contact-layout .contact-grid { grid-template-columns: repeat(3, 1fr); }
  .map-wrap, .map-wrap iframe { min-height: 440px; }
  .training-form-section { grid-template-columns: 1fr; }
  .form-intro > p { margin-left: 35%; }
}

@media (min-width: 1600px) {
  .wordmark { font-size: 18px; }
  .desktop-nav, .header-book, .menu-toggle { font-size: 14px; }
}

@media (max-width: 767px) {
  .section-pad { padding: 84px 20px; }
  .site-header { min-height: 72px; padding: 0 20px; }
  .wordmark { font-size: 15px; }
  .menu-toggle { font-size: 13px; }
  .menu-panel { display: block; }
  .menu-media { position: absolute; inset: 0; opacity: .18; }
  .menu-media::after { background: rgba(23,23,23,.35); }
  .menu-content { position: relative; z-index: 2; height: 100%; padding: 16px 20px 24px; }
  .menu-links a { grid-template-columns: 40px 1fr; }
  .menu-links span { font-size: clamp(38px, 12vw, 64px); }
  .menu-meta { grid-template-columns: 1fr 1fr; }
  .menu-meta address { grid-column: 1 / -1; }
  .hero { height: 145vh; }
  .hero-media { inset: calc(var(--hero-progress, 0) * 18px); }
  .hero-media video, .hero-media img { object-position: 74% center; }
  .hero-media::after { content: ""; position: absolute; inset: 42% 0 0; backdrop-filter: blur(18px); mask-image: linear-gradient(to bottom, transparent, #000 78%); opacity: .36; pointer-events: none; }
  .hero-copy { justify-content: flex-end; padding: 86px 20px 28px; }
  .hero-kicker { top: 18%; left: 20px; }
  .hero h1 { width: min(78vw, 430px); font-size: clamp(2.9rem, 12.5vw, 5.4rem); line-height: .94; }
  .hero h1[data-copy-density="long"] { width: min(88vw, 430px); font-size: clamp(2.35rem, 10vw, 4.6rem); }
  .hero h1[data-copy-density="extended"] { width: min(92vw, 460px); font-size: clamp(2.1rem, 8.7vw, 4rem); }
  .hero h1 .line-2 { padding-left: 3vw; }
  .hero-bottom { display: block; margin-top: 22px; }
  .hero-bottom p { width: min(32ch, 100%); font-size: 13px; }
  .cta-cluster { align-items: flex-start; margin-top: 18px; }
  .hero-actions { margin-top: 18px; }
  .button { min-width: 178px; }
  .intro { min-height: 0; }
  .intro-grid { gap: 38px; padding: 64px 0 74px; }
  .editorial-title { font-size: clamp(2.8rem, 13vw, 5rem); }
  .editorial-title[data-copy-density="long"] { font-size: clamp(2.35rem, 10.5vw, 4.5rem); }
  .editorial-title[data-copy-density="extended"] { font-size: clamp(2.1rem, 9vw, 4rem); }
  .intro-copy { margin-left: 16vw; }
  .intro-image { width: calc(100% + 20px); margin-right: -20px; }
  .intro-image img { aspect-ratio: 4 / 3; }
  .editorial-sequence { height: auto; margin-top: -8vh; padding: 110px 20px 92px; border-radius: 48% 48% 0 0 / 3vh 3vh 0 0; }
  .sequence-stage { position: relative; height: auto; display: grid; grid-template-columns: 1fr; gap: 28px; overflow: visible; }
  .sequence-stage::before { inset: -40px -20px; }
  .sequence-title { position: relative; top: auto; left: auto; width: 6ch; margin: 0 0 34px; font-size: clamp(4.2rem, 19vw, 7rem); line-height: .8; text-align: left; transform: none; opacity: 1; }
  .sequence-copy { position: static; display: grid; gap: 20px; margin-bottom: 30px; }
  .sequence-copy p { width: auto; margin-left: 16vw; }
  .sequence-frame { position: static; width: auto; height: auto; transform: none; }
  .sequence-frame img { aspect-ratio: 4 / 5; }
  .frame-a { width: 82%; }
  .frame-b { width: 76%; margin-left: auto; }
  .frame-c { width: 70%; margin-left: 8%; }
  .services { height: auto; margin-top: 0; padding-top: 7vh; border-radius: 0; }
  .services-stage { display: none; }
  .mobile-services { display: block; padding: 82px 20px; }
  .mobile-services article { min-height: 104svh; padding: 0 0 96px; }
  .mobile-services article > span { display: block; padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,.23); font-size: 11px; opacity: .58; }
  .mobile-services img { height: 62svh; aspect-ratio: auto; margin: 20px 0 28px; object-fit: cover; }
  .mobile-services h3 { max-width: 10ch; font-size: clamp(3rem, 13vw, 5.2rem); line-height: .9; letter-spacing: -.04em; }
  .mobile-services p { margin: 18px 0 0 auto; color: rgba(255,255,255,.7); }
  .works-finale { margin-top: -6vh; padding-top: 118px; border-radius: 48% 48% 0 0 / 3vh 3vh 0 0; }
  .works-heading { display: block; padding: 64px 0 58px; }
  .works-heading p { margin: 28px 0 0 18vw; }
  .gallery { display: block; }
  .gallery-item { margin: 0 0 28px; }
  .gallery-a { width: 78%; aspect-ratio: 4 / 5; }
  .gallery-b { width: 86%; aspect-ratio: 4 / 3; margin-left: auto; }
  .gallery-c { width: 72%; aspect-ratio: 3 / 4; margin-left: 10%; }
  .about-media { height: 62svh; }
  .about-copy { min-height: 76svh; }
  .about-copy .editorial-title { margin: auto 0 44px; }
  .about-copy > p { margin-left: 12vw; }
  .training-teaser { height: auto; }
  .training-teaser-stage { position: relative; height: auto; overflow: visible; }
  .training-teaser-media { position: relative; height: 66svh; clip-path: none; }
  .training-teaser-card { position: relative; right: auto; bottom: auto; width: calc(100% - 40px); margin: -16vh 20px 0; transform: none; }
  .contact { padding: 82px 20px 34px; }
  .contact-top { min-height: 72svh; }
  .contact h2 { font-size: clamp(3.4rem, 14vw, 6rem); }
  .contact-action { align-items: flex-start; margin: 32px 0 50px; }
  .contact-grid { grid-template-columns: 1fr; gap: 50px; }
  .contact-layout .contact-grid { grid-template-columns: 1fr; }
  .map-wrap, .map-wrap iframe { min-height: 360px; }
  .footer { padding: 24px 20px; }
  .footer-wordmark { font-size: 15vw; }
  .footer-bottom { grid-template-columns: 1fr auto; padding-top: 50px; }
  .footer-bottom nav { grid-column: 1 / -1; grid-row: 1; flex-wrap: wrap; }
  .footer-bottom small { text-align: right; }
  .training-hero-copy { padding: 100px 20px 28px; }
  .training-hero-copy .hero-kicker { top: 17%; left: 20px; }
  .training-hero h1 { font-size: clamp(3.15rem, 14vw, 5.8rem); }
  .training-hero h1[data-copy-density="long"] { font-size: clamp(2.5rem, 11vw, 5rem); }
  .training-hero h1[data-copy-density="extended"] { font-size: clamp(2.2rem, 9.5vw, 4.4rem); }
  .training-hero h1 .line-2 { padding-left: 5vw; }
  .audience-grid, .program-head, .practice, .training-form-section { grid-template-columns: 1fr; }
  .audience-grid { gap: 50px; padding-top: 70px; }
  .audience-copy { padding-top: 0; }
  .audience-copy > p { margin-left: 12vw; }
  .audience-copy figure { width: 82%; margin-left: auto; }
  .program-head { gap: 42px; padding: 80px 0 70px; }
  .program-lines li { grid-template-columns: 44px 1fr; }
  .program-lines li p { grid-column: 2; }
  .course-media-scene { height: auto; }
  .course-media-stage { position: relative; height: 72svh; clip-path: none; }
  .training-slot-grid { grid-template-columns: 1fr; }
  .training-slot-list > * { grid-template-columns: 42px 1fr; }
  .training-slot-list p { grid-column: 2; }
  .practice-media { height: 70svh; }
  .practice-copy { min-height: 80svh; }
  .practice-copy .editorial-title { margin: auto 0 44px; }
  .form-intro > p { margin-left: 10vw; }
  .training-form { grid-template-columns: 1fr; padding-top: 0; }
  .training-form .form-wide { grid-column: auto; }
}

@media (max-width: 420px) {
  .wordmark { font-size: 14px; }
  .hero h1[data-copy-density="normal"] { font-size: 12.2vw; }
  .cta-cluster { display: block; }
  .hero-actions { display: flex; gap: 10px; }
  .hero-actions .quiet-link { margin-top: 0; }
  .cta-cluster small { display: block; width: auto; margin-top: 10px; }
  .contact-action { display: block; }
  .contact-action small { display: block; width: auto; margin-top: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: 120ms !important; transition-delay: 0ms !important; }
  .reveal .rise, .rise.reveal, .reveal .line, .image-reveal { opacity: 1; filter: none; transform: none; clip-path: none; }
}

/* Forensic reconstruction pass: scene states and cross-scene handoffs */
.site-header[data-theme="light"] {
  color: var(--ink);
  text-shadow: none;
}
.site-header[data-theme="light"]::before {
  background: linear-gradient(to bottom, rgba(242,232,227,.94), rgba(242,232,227,0));
}
.site-header[data-theme="dark"]::before {
  background: linear-gradient(to bottom, rgba(23,21,19,.94), rgba(23,21,19,0));
}
.site-header[data-theme="dark"],
.site-header[data-theme="hero"],
.site-header[data-theme="menu"] {
  color: var(--white);
}
.site-header[data-theme="menu"] { transform: none; }
.site-header[data-theme="menu"]::before { opacity: 0; }

.menu-panel.is-closing {
  visibility: visible;
  clip-path: inset(100% 0 0);
  transform: translateY(2%);
  transition: clip-path 300ms var(--ease-out), transform 300ms var(--ease-out), visibility 0s 300ms;
}
.menu-links a[aria-current="true"] small { color: var(--bronze); opacity: 1; }
.menu-panel::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 38%;
  height: 2px;
  background: linear-gradient(90deg, var(--bronze) 0 16%, rgba(255,255,255,.15) 16%);
  transform: scaleX(var(--menu-progress, 0));
  transform-origin: left;
}

.hero-media {
  clip-path: inset(calc(var(--hero-progress, 0) * 3.2vh) calc(var(--hero-progress, 0) * 2.4vw) round calc(var(--hero-progress, 0) * 1.2vw));
}
.hero-media img {
  transform: scale(calc(1.035 + var(--hero-progress, 0) * .055)) translate3d(calc(var(--hero-progress, 0) * -1.4vw), calc(var(--hero-progress, 0) * -1.8vh), 0);
}
.hero-copy { opacity: clamp(0, calc(1 - var(--hero-progress, 0) * 1.35), 1); }
.hero-bottom { transform: translate3d(0, calc(var(--hero-progress, 0) * -4vh), 0); }
.scroll-cue { opacity: clamp(0, calc(1 - var(--hero-progress, 0) * 2.4), 1); }

.intro { min-height: 190vh; }
.intro-stage {
  position: sticky;
  top: 0;
  min-height: 100svh;
  overflow: hidden;
}
.intro-grid { position: relative; z-index: 2; }
.intro-grid .line-mask:nth-child(1) { transform: translate3d(0, calc((1 - var(--intro-progress, 0)) * 8vh), 0); }
.intro-grid .line-mask:nth-child(2) { transform: translate3d(0, calc((.72 - var(--intro-progress, 0)) * 7vh), 0); }
.intro-grid .line-mask:nth-child(3) { transform: translate3d(0, calc((.48 - var(--intro-progress, 0)) * 6vh), 0); }
.intro-copy { opacity: clamp(.18, calc(var(--intro-progress, 0) * 2.2), 1); transform: translate3d(0, calc((1 - var(--intro-progress, 0)) * 5vh), 0); }
.intro-echo {
  position: absolute;
  z-index: 1;
  right: 1vw;
  bottom: -7vh;
  width: clamp(220px, 29vw, 500px);
  height: 47vh;
  margin: 0;
  overflow: hidden;
  clip-path: inset(clamp(0%, calc((.52 - var(--intro-progress, 0)) * 190%), 100%) 0 0);
  transform: translate3d(0, calc((1 - var(--intro-progress, 0)) * 17vh), 0) rotate(calc((1 - var(--intro-progress, 0)) * 2deg));
}
.intro-echo img { height: 100%; object-fit: cover; transform: scale(calc(1.1 - var(--intro-progress, 0) * .08)); }

.editorial-sequence { height: 400vh; }
.sequence-title { z-index: 3; transform: translate(-50%, -50%) scale(calc(1 - var(--sequence-progress, 0) * .12)); }
.sequence-copy { opacity: clamp(.22, calc(var(--sequence-progress, 0) * 3), 1); }
.frame-a { z-index: 2; transform: translate3d(calc(var(--sequence-progress, 0) * 12vw), calc(var(--sequence-progress, 0) * -72vh), 0) rotate(calc(var(--sequence-progress, 0) * -3deg)); }
.frame-b { z-index: 4; transform: translate3d(calc(var(--sequence-progress, 0) * -12vw), calc(42vh - var(--sequence-progress, 0) * 112vh), 0) rotate(calc(3deg - var(--sequence-progress, 0) * 6deg)); }
.frame-c { z-index: 2; transform: translate3d(calc(var(--sequence-progress, 0) * 10vw), calc(86vh - var(--sequence-progress, 0) * 128vh), 0); opacity: clamp(0, calc((var(--sequence-progress, 0) - .18) * 4.5), 1); }
.frame-d { z-index: 5; width: 22vw; height: 58vh; top: 23vh; left: 13vw; opacity: clamp(0, calc((var(--sequence-progress, 0) - .42) * 5), 1); transform: translate3d(calc((var(--sequence-progress, 0) - .42) * 10vw), calc((.72 - var(--sequence-progress, 0)) * 55vh), 0) rotate(-2deg); }
.frame-e { z-index: 6; width: 31vw; height: 38vh; top: 44vh; right: 8vw; opacity: clamp(0, calc((var(--sequence-progress, 0) - .62) * 6), 1); transform: translate3d(calc((.72 - var(--sequence-progress, 0)) * 16vw), calc((.84 - var(--sequence-progress, 0)) * 62vh), 0); }
.sequence-progress { position: absolute; z-index: 8; top: 50%; right: 18px; width: 2px; height: 28vh; background: rgba(255,255,255,.18); }
.sequence-progress span { display: block; width: 100%; height: 100%; background: var(--bronze); transform: scaleY(var(--sequence-progress, 0)); transform-origin: top; }

.services-stage::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0 48% 0 0;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 65%, rgba(157,104,73,.12));
  opacity: calc(.2 + var(--services-progress, 0) * .8);
}
.services-copy, .services-media { z-index: 3; }
.service-live { transition: opacity 220ms var(--ease), transform 220ms var(--ease); }
.services[data-direction="forward"] .services-media img.is-active { transform-origin: bottom; }
.services[data-direction="backward"] .services-media img.is-active { transform-origin: top; }
.service-steps span { transform: scaleX(.35); transform-origin: left; transition: transform 220ms var(--ease), background-color 220ms var(--ease); }
.service-steps span.is-active { transform: scaleX(1); }

.training-teaser-card { opacity: 1; }
.training-teaser-card .button { transform: translate3d(calc((1 - var(--training-progress, 0)) * 2vw), 0, 0); }

/* ============================================================
   ЗАСНОВНИЦЯ — editorial epilogue, not a third Masters card.
   Distinguished from Майстри on four axes rather than decoration: the frame is
   5:7 against Masters' 4:5, the portrait is larger, the block is text-led, and
   it carries no role/CTA card mechanics. Sits on --blush so it reads as its own
   chapter between the blush Навчання scene and the dark Контакти close, with no
   panel, no radius and no shadow — the photograph meets the surface directly.
   ============================================================ */
.founder { background: var(--blush); }
.founder-stage {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  align-items: center;
  gap: clamp(40px, 6vw, 104px);
  max-width: 1240px;
  margin-inline: auto;
  padding: clamp(88px, 9vw, 150px) var(--pad);
}
/* The source is 1054x1492. 520px caps device pixels at 1040 against 1054
   available — 0.99x at DPR2, so nothing upscales. The ratio is declared from
   the file's own dimensions, which both reserves the box before decode (no
   layout shift) and guarantees object-fit never crops the delivered frame. */
.founder-media {
  width: clamp(280px, 34vw, 520px);
  margin: 0;
  overflow: hidden;
  aspect-ratio: 1054 / 1492;
}
.founder-media img { width: 100%; height: 100%; object-fit: cover; }
.founder-copy { max-width: 46ch; }
.founder-role {
  display: block;
  margin-bottom: clamp(20px, 2.4vw, 34px);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(35, 28, 24, .62);
}
/* Smaller than a section title: this is an epilogue opening in someone's voice,
   not a new chapter heading competing with «Майстри» or «Контакти». */
.founder .editorial-title { font-size: clamp(2.2rem, 3.4vw, 4rem); }
.founder-body { margin-top: clamp(24px, 2.6vw, 40px); }
.founder-body p { margin: 0 0 1.15em; max-width: 44ch; }
.founder-body p:last-child { margin-bottom: 0; }

@media (max-width: 767px) {
  /* Single column, portrait first: the face is the reason to keep reading, and
     three paragraphs opening a screen would read as a wall. */
  .founder-stage {
    grid-template-columns: 1fr;
    gap: clamp(28px, 7vw, 40px);
    padding: 74px 20px 78px;
  }
  .founder-media { width: min(84vw, 356px); }
  .founder-copy { max-width: none; }
  .founder-body p { max-width: none; }
}

/* ============================================================
   ПИТАННЯ ТА ВІДПОВІДІ — typographic, not card-based.
   The question carries the weight and the only structure is a hairline rule
   between rows: no card, no pill, no radius, no shadow, no circular +. This is
   the rational beat between Навчання and the Засновниця epilogue, so it is
   sized as utility rather than as a storytelling scene.
   ============================================================ */
.faq-scene { background: var(--milk); }
.faq-scene[hidden] { display: none; }
.faq-stage {
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  gap: clamp(48px, 6vw, 110px);
  align-items: start;
}
.faq-head { position: sticky; top: clamp(96px, 12vh, 150px); }
.faq-scene .editorial-title { max-width: 9ch; margin: clamp(28px, 3vw, 48px) 0 0; font-size: clamp(2.2rem, 3.4vw, 4rem); }
/* The kit photograph is evidence, not decoration: it shows the actual tools the
   answers talk about. Held small and left under the heading so it supports the
   column rather than competing with the questions. */
.faq-media { margin: clamp(34px, 3.6vw, 56px) 0 0; width: 100%; max-width: 300px; overflow: hidden; aspect-ratio: 1122 / 1402; }
.faq-media img { width: 100%; height: 100%; object-fit: cover; }

.faq-list { border-top: 1px solid var(--rule-structural, var(--line)); }
.faq-list details { border-bottom: 1px solid var(--rule-structural, var(--line)); }
.faq-list summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  /* 44px minimum tap target, met by padding + line-height rather than a box. */
  min-height: 44px;
  padding: 20px 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--body);
  /* A notch above body size so the question carries the row, but still Manrope
     and still well under «Привіт, я Даша.» two sections later. */
  font-size: clamp(16px, 1.32vw, 20px);
  line-height: 1.4;
  transition: color 200ms var(--ease-out);
}
/* Manrope for the question, per the brief: an extra-large serif question would
   out-shout «Привіт, я Даша.» two sections later. */
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::marker { content: ""; }
/* The marker is a single hairline cross that loses its vertical stroke when
   open — the quietest possible open/closed signal. */
.faq-list summary::after {
  content: "";
  flex: 0 0 auto;
  width: 11px;
  height: 11px;
  background:
    linear-gradient(var(--bronze), var(--bronze)) center/11px 1px no-repeat,
    linear-gradient(var(--bronze), var(--bronze)) center/1px 11px no-repeat;
  transition: transform 240ms var(--ease-out), opacity 200ms var(--ease-out);
}
.faq-list details[open] summary::after { background-size: 11px 1px, 0 0; }
.faq-list summary:hover, .faq-list details[open] summary { color: var(--bronze-text, var(--bronze)); }
.faq-list summary:focus-visible { outline: 2px solid var(--bronze); outline-offset: 4px; }
.faq-list details p { max-width: 62ch; margin: 0; padding: 0 0 24px; color: rgba(35, 28, 24, .74); }

@media (max-width: 991px) {
  .faq-stage { grid-template-columns: 1fr; gap: clamp(30px, 5vw, 48px); }
  .faq-head { position: static; }
  .faq-scene .editorial-title { max-width: none; }
  .faq-media { display: none; }
}

@media (max-width: 767px) {
  /* Utility, not a scene: the collapsed list must stay compact. */
  .faq-scene { padding-top: 74px; padding-bottom: 78px; }
  .faq-scene .editorial-title { margin-top: 22px; }
  .faq-list summary { padding: 17px 0; gap: 16px; }
  .faq-list details p { padding-bottom: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .faq-list summary, .faq-list summary::after { transition: none; }
}

.contact h2 { transform: translate3d(0, calc((1 - var(--contact-progress, 0)) * 8vh), 0); }
.contact-action { opacity: 1; }
.map-wrap { clip-path: inset(clamp(0%, calc((.5 - var(--contact-progress, 0)) * 180%), 100%) 0 0); transform: translate3d(0, calc((1 - var(--contact-progress, 0)) * 5vh), 0); }

@media (max-width: 767px) {
  .intro { min-height: auto; }
  .intro-stage { position: relative; min-height: auto; overflow: visible; }
  .intro-grid .line-mask, .intro-copy { transform: none !important; opacity: 1; }
  .intro-echo { position: relative; right: auto; bottom: auto; width: 76%; height: 48svh; margin: 0 0 0 auto; clip-path: none; transform: none; }
  .editorial-sequence { height: auto; }
  .frame-a, .frame-b, .frame-c, .frame-d, .frame-e { position: static; top: auto; right: auto; left: auto; height: auto; opacity: 1; transform: none; }
  .frame-a { width: 82%; }
  .frame-b { width: 76%; margin-left: auto; }
  .frame-c { width: 70%; margin-left: 8%; }
  .frame-d { width: 68%; margin-left: auto; }
  .frame-e { width: 82%; }
  .frame-a img, .frame-b img, .frame-c img, .frame-d img, .frame-e img { aspect-ratio: 4 / 5; }
  .sequence-progress { display: none; }
  .mobile-services { position: relative; }
  .mobile-services-head { position: sticky; z-index: 5; top: 84px; padding-top: 18px; background: linear-gradient(to bottom, var(--dark) 75%, transparent); }
  .mobile-service-progress { height: 2px; margin-top: 8px; background: rgba(255,255,255,.18); }
  .mobile-service-progress span { display: block; height: 100%; background: var(--bronze); transform: scaleX(var(--mobile-service-progress, .25)); transform-origin: left; }
  .mobile-services article { opacity: 1; transform: scale(.985); transition: transform 260ms var(--ease-out); }
  .mobile-services article img { opacity: .58; transition: opacity 220ms var(--ease-out), filter 220ms var(--ease-out); filter: saturate(.68); }
  .mobile-services article.is-active { transform: none; }
  .mobile-services article.is-active img { opacity: 1; filter: none; }
  .map-wrap { clip-path: none; transform: none; }
  .training-page .training-hero { height: 140vh; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-media, .hero-media img, .hero-copy, .hero-bottom, .scroll-cue,
  .intro-grid .line-mask, .intro-copy, .intro-echo, .intro-echo img,
  .sequence-title, .sequence-copy, .sequence-frame, .training-teaser-card,
  .training-teaser-card .button, .course-media-stage, .course-media-stage img,
  .course-media-stage video, .contact h2, .map-wrap {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }
  .intro-stage, .sequence-stage, .services-stage, .training-teaser-stage, .course-media-stage { position: relative; }
  .hero, .intro, .editorial-sequence, .services, .training-teaser, .course-media-scene { height: auto; min-height: auto; }
  .course-media-stage { height: 72svh; }
  .menu-panel { clip-path: none; transform: none; opacity: 0; }
  .menu-panel.is-open, .menu-panel.is-closing { opacity: 1; }
  .menu-links a, .menu-links span, .button, .service-nav button, .mobile-services article { transform: none !important; }
  .training-page .training-hero { height: auto; min-height: 100svh; }
  .training-page .training-hero-media { position: absolute; height: auto; clip-path: none; transform: none; }
  .training-page .training-hero-media img, .training-page .training-hero-copy { transform: none; opacity: 1; }
  .training-page .training-hero-copy { position: relative; margin-top: 0; }
}

/* Production defect remediation: composition, CTA hierarchy and light material. */
:root {
  --surface-pigment: #f4ece8;
  --surface-material:
    radial-gradient(circle at 18% 12%, rgba(255,255,255,.34), transparent 42%),
    linear-gradient(118deg, rgba(255,255,255,.12), transparent 48%, rgba(120,82,65,.035)),
    url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='3' seed='17' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)' opacity='.055'/%3E%3C/svg%3E");
}

body::before { display: none; }
body,
.hero,
.intro,
.works-finale,
.faq-scene,
.audience,
.practice-copy,
.training-content-slot,
.training-form-section,
.training-teaser-card {
  background-color: var(--surface-pigment);
  background-image: var(--surface-material);
  background-repeat: no-repeat, no-repeat, repeat;
  background-size: auto, auto, 180px 180px;
}
.about { --surface-pigment: #eee3dd; background-color: var(--surface-pigment); background-image: var(--surface-material); background-repeat: no-repeat, no-repeat, repeat; background-size: auto, auto, 180px 180px; }
.training-form-section { --surface-pigment: var(--blush); }

.intro-grid {
  grid-template-columns: minmax(0, 1fr) minmax(280px, 30vw);
  gap: clamp(56px, 7vw, 132px);
  align-items: start;
}
.intro-copy {
  align-self: start;
  max-width: 34ch;
  margin: clamp(112px, 16vh, 176px) 0 0;
}
.intro-echo {
  right: var(--pad);
  bottom: clamp(24px, 5vh, 64px);
  width: clamp(220px, 27vw, 470px);
  height: min(43vh, 470px);
}

.services { border-radius: 0; }

.contact-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 25vw);
  grid-template-rows: auto 1fr;
  column-gap: clamp(42px, 5vw, 88px);
}
.contact-top > .section-index { grid-column: 1 / -1; }
.contact h2 {
  grid-column: 1;
  grid-row: 2;
  align-self: end;
  min-width: 0;
  max-width: 100%;
  font-size: clamp(3.5rem, 6.6vw, 8.4rem);
  transform: none;
}
.contact-action {
  grid-column: 2;
  grid-row: 2;
  align-self: end;
  justify-self: end;
  max-width: 100%;
  margin: 0 0 54px;
}
.contact-layout { margin-top: clamp(28px, 3vw, 48px); }

.footer {
  overflow: visible;
  padding-bottom: clamp(36px, 3.5vw, 56px);
}
.footer-wordmark {
  overflow: visible;
  padding-block: .03em .12em;
  font-size: clamp(3.5rem, 11.1vw, 13.25rem);
  line-height: 1;
}
.footer-bottom {
  margin-top: clamp(20px, 2.5vw, 42px);
  padding-top: clamp(26px, 3.5vw, 56px);
  border-top: 1px solid rgba(255,255,255,.22);
}

@media (max-width: 991px) {
  .intro-copy { margin-top: 0; }
  .contact-top { display: flex; }
  .contact h2 { max-width: none; transform: none; }
  .contact-action { align-self: auto; margin: 32px 0 50px; }
}

@media (max-width: 767px) {
  .intro-grid { grid-template-columns: 1fr; }
  .intro-copy { margin: 0 0 0 16vw; }
  .editorial-sequence,
  .services,
  .works-finale { border-radius: 0; }
  .footer-wordmark { font-size: clamp(2.8rem, 12.6vw, 4rem); letter-spacing: -.065em; }
  .footer-bottom { padding-top: 34px; }
}

/* Premium editorial system pass: shared material, lines, controls and hero media. */
.section-index { border-bottom-color: var(--rule-structural); }
.section-index-light { border-bottom-color: var(--rule-dark-structural); }

.site-header {
  min-height: 88px;
  text-shadow: 0 1px 1px rgba(15,12,10,.55), 0 4px 18px rgba(15,12,10,.2);
}
.site-header::before { inset: 0 0 12px; }
.wordmark { font-size: clamp(17px, 1.28vw, 22px); font-weight: 500; letter-spacing: -.04em; }
.desktop-nav { gap: clamp(24px, 2.55vw, 46px); font-size: clamp(15px, 1.05vw, 17px); }
.header-book,
.menu-toggle { font-size: clamp(15px, 1.05vw, 17px); font-weight: 500; }
.menu-toggle i { width: 7px; height: 7px; box-shadow: 0 0 0 1px rgba(255,255,255,.24); }
.site-header[data-theme="light"] {
  color: #211b18;
  text-shadow: 0 1px 0 rgba(255,255,255,.72), 0 3px 14px rgba(91,61,47,.08);
}
.site-header[data-theme="light"]::before { background: linear-gradient(to bottom, rgba(244,236,232,.93), rgba(244,236,232,0)); }
.site-header[data-theme="hero"]::before { background: linear-gradient(to bottom, rgba(17,14,12,.3), rgba(17,14,12,0)); }
.site-header[data-theme="dark"]::before { background: linear-gradient(to bottom, rgba(23,21,19,.9), rgba(23,21,19,0)); }

.hero-media::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(18,14,12,.28) 0%, rgba(18,14,12,.1) 38%, transparent 67%),
    linear-gradient(0deg, rgba(18,14,12,.25) 0%, transparent 48%);
}
.hero-media video,
.hero-media img { object-position: 50% 46%; }
.hero-media video {
  transform: scale(calc(1.035 + var(--hero-progress, 0) * .055)) translate3d(calc(var(--hero-progress, 0) * -1.4vw), calc(var(--hero-progress, 0) * -1.8vh), 0);
  will-change: transform;
}
.hero-media[data-media-state="video"] { background: #b7aa9f; }
.hero-copy { text-shadow: 0 1px 1px rgba(18,14,12,.32), 0 8px 30px rgba(18,14,12,.18); }

.button {
  min-height: 56px;
  min-width: 198px;
  padding: 0 22px;
  border: 1px solid currentColor;
  border-radius: var(--radius-control);
  box-shadow: var(--elev-inset);
  font-size: 13px;
}
.button::after { width: 38px; }
.button-light { color: var(--dark); background: rgba(255,255,255,.9); border-color: rgba(255,255,255,.7); }
.button-bronze { color: var(--white); background: rgba(157,104,73,.94); border-color: rgba(255,255,255,.18); }
.button-dark { color: var(--white); background: rgba(23,21,19,.94); border-color: rgba(23,21,19,.72); }
.quiet-link,
.text-link,
.route-link { font-size: 13px; }
.link-line,
.text-link span,
.route-link span { opacity: .78; }

.menu-top { border-bottom-color: var(--rule-dark-structural); }
.menu-links a { border-bottom-color: var(--rule-dark-secondary); }
.menu-links span { font-size: clamp(34px, 3.75vw, 62px); }
.menu-social-link small { color: var(--bronze); opacity: 1; }
.menu-social-link span { font-style: italic; }
.menu-meta { border-top: 1px solid var(--rule-dark-secondary); }

.service-live { border-bottom-color: var(--rule-dark-structural); }
.service-live h3 {
  max-width: 13ch;
  font-size: clamp(3.6rem, 5.65vw, 7.25rem);
  line-height: .9;
  overflow-wrap: normal;
  word-break: normal;
  text-wrap: balance;
}
.service-nav {
  gap: 0 clamp(18px, 2vw, 36px);
  border-top-color: var(--rule-dark-structural);
}
.service-nav button { border-bottom-color: var(--rule-dark-secondary); }
.service-nav button:nth-child(odd) { border-right: 0; }
.service-steps span { height: 1px; background: var(--rule-dark-structural); }

.training-teaser-card {
  border: 1px solid rgba(105,72,56,.2);
  border-radius: 4px;
  background: linear-gradient(135deg, rgba(244,236,232,.8), rgba(234,219,213,.72));
  box-shadow: var(--elev-inset-raised), var(--elev-card);
  backdrop-filter: blur(10px) saturate(.84);
}
.training-teaser-card .button { min-width: 220px; }

.contact-grid { border-top-color: var(--rule-dark-structural); }
.contact-grid > div { padding-bottom: 22px; border-bottom: 1px solid var(--rule-dark-secondary); }
.contact-instagram { font-style: italic; }
.footer { border-top-color: var(--rule-dark-structural); }
.footer-bottom { border-top-color: var(--rule-dark-structural); }
.footer-bottom nav { row-gap: 10px; flex-wrap: wrap; }

@media (max-width: 991px) {
  .contact-layout .contact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .site-header { min-height: 74px; }
  .wordmark { font-size: 16px; }
  .menu-toggle { font-size: 15px; }
  .menu-panel { overflow-y: auto; }
  .menu-content { height: auto; min-height: 100%; }
  .menu-links span { font-size: clamp(34px, 10.5vw, 50px); }
  /* 67% was framed for the previous hero, whose subject sat right of centre.
     The new hero is centred, and at 67% the iris is clipped by the left edge on
     a portrait viewport — measured at 16s. 50% keeps the whole eye in frame. */
  .hero-media video { object-position: 50% center; }
  .hero-media img { object-position: 48% center; }
  .hero-media::before {
    background:
      linear-gradient(90deg, rgba(18,14,12,.2), transparent 72%),
      linear-gradient(0deg, rgba(18,14,12,.38) 0%, rgba(18,14,12,.06) 52%, transparent 72%);
  }
  .hero-media::after { backdrop-filter: blur(10px); opacity: .16; }
  .button { min-width: 184px; min-height: 54px; }
  .mobile-services article > span { border-bottom-color: var(--rule-dark-secondary); }
  .mobile-services h3 { max-width: 100%; overflow-wrap: normal; word-break: normal; text-wrap: balance; }
  .training-teaser-card { background: linear-gradient(135deg, rgba(244,236,232,.88), rgba(234,219,213,.82)); backdrop-filter: blur(7px) saturate(.88); }
  .contact-layout .contact-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-media video { display: none; }
}

/* Branded entry overlay. Fixed above the site; owns no scroll state, no scene
   and no document height. The video is scaled by HEIGHT so its wide empty side
   margins run past narrow viewports and get clipped — the logo itself is never
   cropped and never distorted. Its edges are feathered into the surface colour
   because the asset's own field (#EAD4CA, vignetted) is dE 9.75 from #F4ECE8
   and would otherwise show a hard seam. */
.site-loader {
  position: fixed;
  z-index: 1000;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #F4ECE8;
  transition: opacity 420ms var(--ease-out);
}

.site-loader.is-done { opacity: 0; pointer-events: none; }

.site-loader-video {
  /* Absolutely centred rather than grid-centred: when the frame is wider than
     the viewport the browser aligns an oversized grid item to the start of the
     axis, which pushed the mark off-centre and clipped it on narrow screens. */
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  width: auto;
  height: min(52vh, 460px);
  max-width: none;
  /* Two-axis feather. The logo occupies the middle 568x568 of the 1280x720
     frame, so the vertical band is held to 9% — exactly the empty margin above
     it — while the wide horizontal margin can dissolve much more generously. */
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, #000 14%, #000 86%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 9%, #000 91%, transparent 100%);
  mask-image:
    linear-gradient(to right, transparent 0, #000 14%, #000 86%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 9%, #000 91%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

@media (max-width: 1023px) {
  .site-loader-video { height: min(46vh, 380px); }
}

@media (max-width: 767px) {
  .site-loader-video { height: min(38vh, 300px); }
}

/* Suppressed for the rest of the session, and skipped entirely for reduced
   motion — in both cases the markup never becomes visible and script.js never
   assigns the video source, so the asset is not fetched at all. */
.loader-seen .site-loader { display: none; }

@media (prefers-reduced-motion: reduce) {
  .site-loader { display: none; }
}

/* Menu refinement: feedback only. Composition, split, type scale, palette and
   the clip-path panel choreography are unchanged, as is the contextual media
   preview (.menu-media, data-menu-image, crossfade). Every hover state has a
   :focus-visible twin so keyboard parity is exact. */

/* Close control — editorial text that now carries a close affordance. */
.menu-close { position: relative; display: inline-flex; align-items: center; gap: 9px; }
.menu-close::before {
  content: "\00d7";
  font-size: 17px;
  line-height: 1;
  opacity: .82;
  transition: transform 220ms var(--ease-out), opacity 220ms var(--ease-out);
}
.menu-close::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 2px;
  left: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 220ms var(--ease-out);
}
.menu-close:hover::before,
.menu-close:focus-visible::before { transform: rotate(90deg); opacity: 1; }
.menu-close:hover::after,
.menu-close:focus-visible::after { transform: scaleX(1); transform-origin: left; }

/* Directional indicator — the title track now hugs its text, so the existing
   34px rule sits ~20px after the last glyph instead of at the panel edge, and
   grows out of the word rather than sliding in from off-row. */
.menu-links a { grid-template-columns: 52px auto 1fr; }
.menu-links a::after {
  justify-self: start;
  margin-left: 20px;
  width: 0;
  opacity: 0;
  transform: none;
  transition: width 260ms var(--ease-out), opacity 200ms var(--ease-out);
}
.menu-links a span,
.menu-links a small {
  transition: transform 220ms var(--ease-out), color 200ms var(--ease-out), opacity 200ms var(--ease-out);
}
.menu-links a:focus-visible span { transform: translateX(8px); }
.menu-links a:focus-visible small { color: var(--bronze); opacity: 1; }
.menu-links a:focus-visible::after { width: 34px; opacity: .9; transform: none; }

@media (hover: hover) and (pointer: fine) {
  .menu-links a:hover span { transform: translateX(8px); }
  .menu-links a:hover small { color: var(--bronze); opacity: 1; }
  .menu-links a:hover::after { width: 34px; opacity: .9; transform: none; }
}

/* Sibling recession is desktop-only: min-width keeps it away from phones even
   on hybrid devices that report hover. */
@media (hover: hover) and (pointer: fine) and (min-width: 768px) {
  .menu-links:hover a:not(:hover) span { opacity: .72; }
  .menu-links:focus-within a:not(:focus-visible) span { opacity: .72; }
}

/* Instagram — recognisable by silhouette, not colour. One inline glyph, no
   gradient, no asset request, no font. */
/* Explicit px, never em: tying the glyph to the parent font-size made it 32px
   against the 54px Playfair title in the menu and 15px at 375, i.e. wrong in
   both directions from one multiplier. The glyph is a supporting identifier,
   so its size is set per context and does not scale with display type. */
.ig-glyph { width: 20px; height: 20px; flex: none; }
.menu-social-link .ig-line {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-style: normal;
}
/* the inner span is still matched by .menu-social-link span, which sets the
   italic that made the handle read as an email address — reset it here too */
.menu-social-link .ig-handle { padding: 0; font-size: inherit; font-family: inherit; font-style: normal; }
.menu-social-link .ig-glyph { width: 21px; height: 21px; color: var(--bronze); }
.contact-instagram {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-style: normal;
}
.contact-instagram .ig-glyph { width: 19px; height: 19px; color: var(--bronze); }
.footer nav a.is-social { display: inline-flex; align-items: center; gap: 7px; }
.footer nav a.is-social .ig-glyph { width: 15px; height: 15px; }

@media (max-width: 767px) {
  .contact-instagram .ig-glyph { width: 16px; height: 16px; }
  /* The handle is a longer string than any nav word and clipped at 375 once the
     glyph and roman face replaced the italic; this row gets its own step down
     rather than shrinking the whole scale. */
  .menu-social-link .ig-line { font-size: clamp(22px, 6.6vw, 30px); }
}

@media (prefers-reduced-motion: reduce) {
  /* Durations are already handled globally: the site-wide reduce block sets
     transition-duration: 120ms !important, so restating it here would be dead
     code. What still needs suppressing is the decorative rotation. */
  .menu-close:hover::before,
  .menu-close:focus-visible::before { transform: none; }
}

/* ============================================================
   MENU V2 — approved B2 editorial composition.
   The dark material is scoped to this panel only: the global --dark token is
   unchanged and body::before stays disabled. Interaction, focus trap, Escape,
   focus return, aria state, stagger and the contextual preview are the
   existing production mechanisms — this block only recomposes them.
   ============================================================ */
.menu-panel {
  --menu-surface: #16120F;
  --menu-cream: #F2E9E4;
  --menu-cream-dim: rgba(242,233,228,.68);
  --menu-cream-faint: rgba(242,233,228,.56);   /* .38 measured 3.18:1 here — below AA at 11px */
  --menu-bronze-text: #BC8767;                 /* small metadata only; --bronze stays the brand accent */
  --menu-rule: rgba(242,233,228,.14);
  --menu-rule-strong: rgba(242,233,228,.28);
  --menu-step-1: clamp(14px, 1.6vh, 22px);
  --menu-step-2: clamp(26px, 3.4vh, 46px);
  --menu-step-3: clamp(40px, 6.2vh, 84px);

  isolation: isolate;
  color: var(--menu-cream);
  background:
    radial-gradient(130% 100% at 6% 0%, rgba(255,242,235,.042), transparent 62%),
    radial-gradient(100% 80% at 98% 96%, rgba(157,104,73,.045), transparent 64%),
    var(--menu-surface);
}
/* Calibrated grain: fine turbulence in soft-light. Measured on a clean patch —
   flat surface was std 0.000, this reads std 0.957 over a 7-level range, i.e.
   material at viewing distance and not visible speckle. */
.menu-panel::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  opacity: .62;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='mn'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='2' seed='9' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23mn)' opacity='.45'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}

.menu-aside {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  padding: 30px var(--pad) 34px;
  border-right: 1px solid var(--menu-rule);
}
.menu-panel .menu-top { border-bottom: 0; padding-bottom: 0; color: var(--menu-cream-faint); }
.menu-wordmark {
  margin: var(--menu-step-3) 0 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(60px, 7.6vw, 118px);
  line-height: .86;
  letter-spacing: -.045em;
  color: var(--menu-cream);
}
.menu-secondary { margin-top: var(--menu-step-2); display: grid; gap: 10px; }
.menu-secondary[hidden] { display: none; }
.menu-secondary a { color: var(--menu-cream-dim); font-size: 13px; transition: color 200ms var(--ease-out); }
.menu-secondary a::before { content: "/ "; color: var(--menu-cream-faint); }
.menu-secondary a:hover, .menu-secondary a:focus-visible { color: var(--menu-cream); }

.menu-utility { margin-top: var(--menu-step-3); }
.menu-utility-label {
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--menu-cream-faint);
  padding-bottom: 10px; border-bottom: 1px solid var(--menu-rule);
}
.menu-utility-lines { margin-top: var(--menu-step-1); display: grid; gap: 7px; font-size: 13px; }
.menu-utility-lines a { color: var(--menu-cream); }
.menu-utility-lines span, .menu-utility-lines address { color: var(--menu-cream-dim); font-style: normal; }
.menu-social { margin-top: var(--menu-step-1); }
.menu-panel .menu-social-link { display: inline-flex; align-items: center; gap: 11px; font-size: 14px; color: var(--menu-cream); }
.menu-panel .menu-social-link .ig-glyph { width: 21px; height: 21px; color: var(--menu-bronze-text); }
.menu-panel .menu-social-link .ig-handle { font-family: var(--body); font-style: normal; font-size: inherit; padding: 0; }

.menu-cta {
  margin-top: var(--menu-step-2);
  display: inline-flex; align-items: center; justify-content: space-between; gap: 20px;
  min-height: 52px; min-width: 208px; padding: 0 20px;
  border: 1px solid var(--menu-rule-strong);
  border-radius: var(--radius-control);
  box-shadow: var(--elev-inset);
  color: var(--menu-cream); font-size: 13px;
  transition: border-color 220ms var(--ease-out), color 220ms var(--ease-out);
}
.menu-cta i { width: 30px; height: 1px; background: currentColor; display: block; }
.menu-cta:hover, .menu-cta:focus-visible { border-color: var(--menu-bronze-text); color: var(--menu-bronze-text); }

.menu-panel .menu-media {
  position: relative;
  margin-top: var(--menu-step-2);
  width: 100%; max-width: 232px;
  aspect-ratio: 5 / 4;
  border: 1px solid var(--menu-rule);
}
.menu-panel .menu-media::after { content: none; }
.menu-panel .menu-media img { transform: none; }

.menu-panel .menu-content {
  position: relative; z-index: 2;
  justify-content: center;
  padding: 30px var(--pad) 34px;
}
.menu-index-head {
  display: flex; justify-content: space-between;
  padding-bottom: 12px; border-bottom: 1px solid var(--menu-rule-strong);
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--menu-cream-faint);
}
.menu-panel .menu-links { margin: 0; }
.menu-panel .menu-links a {
  /* the fourth track is the reserved indicator column — architecture only,
     deliberately carrying no fabricated meta copy */
  grid-template-columns: 46px auto 1fr auto;
  gap: 0 18px;
  padding: 15px 0 16px;
  border-bottom: 1px solid var(--menu-rule);
  overflow: visible;
}
.menu-panel .menu-links small { font-size: 11px; letter-spacing: .06em; color: var(--menu-cream-faint); opacity: 1; }
.menu-panel .menu-links span {
  padding: 0;
  font-size: clamp(30px, 3.1vw, 50px);
  color: var(--menu-cream);
}
.menu-panel .menu-links a::after { content: none; }
.menu-panel .menu-links a i {
  grid-column: 4; justify-self: end; align-self: center;
  width: 0; height: 1px; background: currentColor; opacity: 0;
  transition: width 260ms var(--ease-out), opacity 200ms var(--ease-out);
}
.menu-index-foot {
  margin-top: var(--menu-step-2); display: flex; justify-content: space-between;
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--menu-cream-faint);
}

.menu-panel .menu-links a:focus-visible { border-bottom-color: var(--menu-rule-strong); }
.menu-panel .menu-links a:focus-visible span { transform: translateX(8px); color: var(--menu-cream); }
.menu-panel .menu-links a:focus-visible small { color: var(--menu-bronze-text); }
.menu-panel .menu-links a:focus-visible i { width: 34px; opacity: .9; }
.menu-panel .menu-links a[aria-current="true"] small { color: var(--menu-bronze-text); }

@media (hover: hover) and (pointer: fine) {
  .menu-panel .menu-links a:hover { border-bottom-color: var(--menu-rule-strong); }
  .menu-panel .menu-links a:hover span { transform: translateX(8px); color: var(--menu-cream); }
  .menu-panel .menu-links a:hover small { color: var(--menu-bronze-text); }
  .menu-panel .menu-links a:hover i { width: 34px; opacity: .9; }
}
@media (hover: hover) and (pointer: fine) and (min-width: 768px) {
  .menu-panel .menu-links:hover a:not(:hover) span { opacity: .72; }
}

@media (max-width: 767px) {
  .menu-panel { grid-template-columns: 1fr; grid-template-rows: auto 1fr; overflow-y: auto; }
  .menu-panel .menu-content { order: 1; padding: 20px 20px 6px; justify-content: flex-start; }
  .menu-aside { order: 2; border-right: 0; border-top: 1px solid var(--menu-rule); padding: 22px 20px 30px; }
  .menu-wordmark { display: none; }
  .menu-panel .menu-links a { grid-template-columns: 34px 1fr auto; padding: 12px 0 13px; min-height: 44px; }
  .menu-panel .menu-links a i { display: none; }
  .menu-panel .menu-links span { font-size: clamp(27px, 8.4vw, 38px); }
  .menu-panel .menu-media { display: none; }
  .menu-utility { margin-top: var(--menu-step-2); }
  .menu-secondary { margin-top: var(--menu-step-1); }
  .menu-cta { width: 100%; margin-top: var(--menu-step-1); }
}

/* ============================================================
   MENU TYPE — Sofia Sans Extra Condensed 400 as the menu's display face.
   Scoped to .menu-panel. The page keeps Playfair Display; the contrast is the
   point — the site is serif, the menu is an index.

   Self-hosted, subset to Latin + Cyrillic + the punctuation the site uses:
   15,112 bytes, SIL OFL (assets/fonts/sofia-sans-OFL.txt). Ukrainian і ї є ґ
   verified present. The URL is relative to this stylesheet, so /navchannia/
   resolves it without a second path.

   Only the display type changes. Row numbers, the НАВІГАЦІЯ / РОЗДІЛИ labels,
   the utility block, the Instagram handle, the CTA and the foot stay Manrope:
   an extra-condensed grotesque at 11-14px is a legibility loss, not a style.
   ============================================================ */
@font-face {
  font-family: "Sofia Sans Extra Condensed";
  src: url("assets/fonts/sofia-sans-xcond-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

.menu-panel { --menu-display: "Sofia Sans Extra Condensed", "Arial Narrow", var(--body); }

/* Sized to hold the CURRENT measure, not the current font-size. Extra-condensed
   caps are .655em against Playfair's .708em and the advances are ~35% narrower,
   so matching font-size would have shrunk the index in both directions. At 66px
   «Контакти» measures 196px against the previous 194px — the same footprint —
   while cap height goes 31.6px -> 43.4px, +37%.

   Letter-spacing is reset: the base rule carries -.035em, a tightening meant for
   large Playfair, which closes counters on a condensed grotesque whose
   sidebearings are already minimal.

   Row padding 11/12 rather than 15/16 — a condensed row is defined by its rule,
   not by its air, and the tighter padding is what keeps seven rows inside
   1280x720 once Майстри publishes (7 x 82.9 = 580 of 593 available). */
.menu-panel .menu-links span {
  font-family: var(--menu-display);
  font-size: clamp(38px, 4.6vw, 76px);
  letter-spacing: -.01em;
  line-height: 1;
}
.menu-panel .menu-links a { padding: 11px 0 12px; }

/* Held back from matching its measure: filling the left column the way Playfair
   does would need ~187px, which overflows the aside at 1280x720 where the framed
   preview already sits 34px off the bottom edge. */
.menu-wordmark {
  font-family: var(--menu-display);
  font-size: clamp(72px, 10.5vw, 164px);
  letter-spacing: -.015em;
  line-height: .82;
}

/* Mobile is bounded by the fold, not by the panel: all six rows are visible on
   entry and must stay that way. 12.2vw/12-13 pushed the sixth row 13px past 812
   and left five. 11.2vw/11-12 lands the sixth at 791 of 812 and still takes the
   row from 31.5px to 42px. Rows stay above the 44px target. */
@media (max-width: 767px) {
  .menu-panel .menu-links span { font-size: clamp(36px, 11.2vw, 50px); }
  .menu-panel .menu-links a { padding: 11px 0 12px; }
}

/* ============================================================
   BOOKING CTA — Telegram destination.
   The website is the conversion entry point; the bot is the single public
   Telegram entry. The glyph exists so an outbound jump is not a surprise, and
   it is deliberately small, monochrome and inside the existing CTA grammar —
   no Telegram blue, no branded button, no second accent colour. It rides
   currentColor, so it inherits every existing button state including the
   bronze/white fill inversion on hover and :focus-visible.

   Carried on the two object-like .button CTAs only. The text links say
   «Записатися» in words; the booking bridge, which had promised a phone call,
   says «Записатися в Telegram» outright.
   ============================================================ */
.tg-glyph { width: 16px; height: 16px; flex: none; }
.button .button-label { display: inline-flex; align-items: center; gap: 9px; }

@media (max-width: 767px) {
  .tg-glyph { width: 15px; height: 15px; }
}

/* ============================================================
   «ПОГЛЯД У ДЕТАЛЯХ» — editorial face sequence.
   A controlled module, not a gallery: five art-directed frames sharing one eye
   axis, crossfading in place. No slider, no cards, no dots, no swipe deck.
   Alignment, timing and the geometry flag all come from content.js works.*.
   ============================================================ */
.finale-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 46%);
  gap: clamp(38px, 5vw, 96px);
  align-items: center;
  /* Held low so the copy and the stage read as one composition rather than two
     screens: the frame is 4:5 and 46% wide, which is already 778px tall at 1440. */
  padding: clamp(36px, 4vw, 72px) 0 0;
}
.finale-copy p { margin-top: clamp(22px, 2.6vw, 40px); }

.face-sequence { position: relative; }
.face-frame {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: 1px solid var(--rule-secondary);
  background: var(--blush);
}
/* Each frame carries its own normalisation. --fs/--fx/--fy are written by
   script.js from the measured per-face values; the source files are untouched.
   translate() is applied after scale(), and its percentages resolve against the
   unscaled box, which is what makes the eye axis land identically every time. */
.face-shot {
  position: absolute;
  inset: 0;
  height: 100%;
  object-fit: cover;
  transform: translate(var(--fx, 0), var(--fy, 0)) scale(var(--fs, 1));
  opacity: 0;
  transition: opacity var(--face-fade, 700ms) var(--ease-out);
}
.face-shot.is-active { opacity: 1; }

/* Geometry overlay — built, styled and switched OFF.
   The delivered faces already carry baked-in construction lines, and those
   lines differ frame to frame, so a second system on top would double them.
   content.js `works.facesGeometryOverlay: true` unhides this once the faces are
   re-exported clean; then one stable geometry sits over all five.
   viewBox is 100x125 with preserveAspectRatio="none" so the coordinates are
   percentages of the frame, and non-scaling-stroke keeps every line a hairline
   at any size. */
.face-geometry {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  fill: none;
  stroke: var(--face-line, rgba(242, 233, 228, .52));
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.face-geometry[hidden] { display: none; }
.face-geometry .fg-eye { stroke: var(--face-line-strong, rgba(242, 233, 228, .62)); }
.face-geometry .fg-vert { stroke: var(--face-line, rgba(242, 233, 228, .4)); }
.face-geometry .fg-brow { stroke: var(--face-line, rgba(242, 233, 228, .46)); }
.face-geometry .fg-lash { stroke: var(--face-line-accent, rgba(188, 135, 103, .62)); }

@media (max-width: 991px) {
  /* Text first, sequence below — no split column, no hover dependency. */
  .finale-stage { grid-template-columns: 1fr; gap: clamp(32px, 5vw, 52px); }
  .face-sequence { width: min(100%, 460px); margin-left: auto; }
}

@media (max-width: 767px) {
  .finale-stage { padding-top: 52px; }
  .face-sequence { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  /* One stable frame. script.js additionally never builds the other four and
     never starts a timer, so nothing crossfades and nothing is fetched. */
  .face-shot { transition: none; }
}

/* ============================================================
   МАЙСТРИ — editorial pairing, not a team-card grid.
   Two portraits, a name and one neutral role each. No cards, no badges, no
   pills, no rounded panels, no metadata rows. The offset between the two
   columns is the same asymmetry the works gallery already uses, so the section
   reads as part of the existing language rather than a new component.
   ============================================================ */
/* One composition column, shared by the heading and the pair. The card width and
   the gutter between the two people are the only inputs; the group width is
   derived from them, so the two never drift apart as the viewport grows.
   Pushing the cards to the outer margins instead (justify-content: space-between)
   made the gutter a function of the viewport: 490px at 1440 and 888px at 1920,
   wider than the portraits themselves, so the pair read as two isolated figures
   rather than two people presented together. */
.masters {
  --master-card: clamp(300px, min(30vw, 52vh), 460px);
  --master-gap: clamp(56px, 6vw, 96px);
  --masters-group: min(100%, calc(2 * var(--master-card) + var(--master-gap)));
}
/* The heading travels with the group, so its left edge lands on the left
   portrait's. Centring the group while the heading stayed on the page margin
   stranded it 202px away at 1440 and 396px at 1920 — a heading beside a pair,
   not one composition. The section-index rail still spans the full width and
   keeps the page frame, so the inset reads as deliberate. */
.masters-head,
.masters-pair { width: var(--masters-group); margin-inline: auto; }
.masters-head { padding: clamp(40px, 4.6vw, 78px) 0 clamp(30px, 3.4vw, 56px); }
.masters-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--master-gap);
  align-items: start;
}
/* Card width is bounded three ways: a floor so it never turns into a thumbnail,
   vw so it tracks the page, and vh so a short viewport cannot let a 4:5 portrait
   grow past ~65vh. The px ceiling stops 1920 from inflating it again. */
.masters-pair .master { width: 100%; }
/* The drop stays, but capped at 60 rather than 72: the gutter must read as
   larger than the drop, otherwise the offset looks like a misalignment. */
.masters-pair .master:nth-child(2) { margin-top: clamp(32px, 4vw, 60px); }

.master-media { width: 100%; margin: 0; overflow: hidden; aspect-ratio: 4 / 5; }
.master-media img { width: 100%; height: 100%; object-fit: cover; }
/* Tightened so portrait → name → role → CTA reads as one unit. */
.master-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding-top: clamp(14px, 1.2vw, 22px);
}
.master-meta h3 {
  font-family: var(--display);
  font-size: clamp(1.55rem, 2vw, 2.5rem);
  line-height: 1.02;
  letter-spacing: -.035em;
}
.master-role {
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(35, 28, 24, .62);
}
.master-book { margin-top: clamp(4px, .5vw, 10px); gap: 14px; }

@media (max-width: 767px) {
  /* Stacked, full width, in reading order. Nothing shrinks into a pair of
     thumbnails and nothing depends on hover. */
  .masters-pair { grid-template-columns: 1fr; justify-content: start; gap: clamp(46px, 11vw, 72px); }
  /* Still the dominant object on the screen, but no longer edge-to-edge. */
  /* 84vw leaves the portrait inset from the right by exactly the left page
     pad again (20px + 20px at 375), so the shortfall against the section rule
     reads as a margin rather than a misalignment. */
  .masters-pair .master { width: min(84vw, 356px); }
  .masters-pair .master:nth-child(2) { margin-top: 0; }
  .masters-head { padding: 40px 0 34px; }
}

/* ============================================================
   MOTION — Майстри portrait swap, Студія ambient dissolve.
   Both are opacity-driven. No mask, no slide, no controls, no timers on
   Masters, and nothing here competes with the Hero, the works scene or the
   face sequence: these two are the quietest movements on the page.
   ============================================================ */

/* Майстри carry no motion. A hover/focus portrait swap was built and then
   removed by decision: the two available second portraits are wide frames
   (16:9 and 4:3) with the master well right of centre, while the primaries are
   centred 4:5, so every crossfade moved the head noticeably. Centring the
   second frame would have needed ~1.4x scale and a head ~50% larger than the
   primary — a worse defect than the shift. The section is static. */
.master-media { position: relative; }

/* ---- Студія: ambient dissolve between real frames of the same room ----
   Every frame is absolutely positioned so the incoming one can be raised above
   the outgoing one; only the incoming frame's opacity animates. Fading both at
   once would put 25% of the page background through the picture at the midpoint
   — the wash that made the first version read as a cut rather than a dissolve.
   The box takes its height from .about, not from the image, so removing the
   frames from flow costs no layout. */
.about-media { position: relative; }
.studio-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity var(--studio-fade, 1400ms) cubic-bezier(.4, 0, .2, 1);
}
.studio-frame.is-active { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  /* script.js never builds the additional frames, so this only guarantees the
     first one is solid if any state was already applied. */
  .studio-frame:first-child { opacity: 1; }
}

/* ==========================================================================
   COURSE PAGE — /navchannia/
   Scoped to `course-*` class names so nothing on the homepage is touched.
   Rhythm is carried by surface changes and hairline rules, not by cards:
   SURFACE -> BOUNDARY -> ELEVATION, and elevation is never reached for here.
   ========================================================================== */

.course-block { color: var(--ink); }
.course-block-milk { background: var(--milk); }
.course-block-blush { background: var(--blush); }

/* One shared two-column measure: title left, argument right. Repeating the
   same grid across 01/06/09 is what makes them read as one document rather
   than three unrelated blocks. */
.course-split { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(40px, 7vw, 120px); align-items: start; padding-top: clamp(44px, 6vw, 90px); }
.course-split .editorial-title { max-width: 11ch; }
.course-split-body { padding-top: clamp(6px, 1.5vw, 22px); }
.course-standfirst { max-width: 34ch; font-size: clamp(19px, 1.9vw, 26px); line-height: 1.42; letter-spacing: -.01em; }

/* Section-to-section divider inside a single surface block. */
.course-rule { height: 1px; margin: clamp(64px, 9vw, 130px) 0 clamp(40px, 5vw, 70px); background: var(--rule-structural); }

/* Restrained editorial markers — a hairline and a bronze rule, never a tick. */
.course-marks { list-style: none; margin: clamp(28px, 3.5vw, 48px) 0 0; padding: 0; }
.course-marks li { position: relative; padding: 18px 0 18px 34px; border-top: 1px solid var(--rule-secondary); line-height: 1.55; transition: color 300ms var(--ease), padding-left 460ms var(--ease); }
.course-marks li::before { content: ""; position: absolute; top: 30px; left: 0; width: 16px; height: 1px; background: var(--bronze); transition: width 460ms var(--ease); }

.course-index-list { list-style: none; margin: clamp(28px, 3.5vw, 48px) 0 0; padding: 0; }
.course-index-list li { display: grid; grid-template-columns: 46px 1fr; gap: 14px; align-items: baseline; padding: 16px 0; border-top: 1px solid var(--rule-secondary); line-height: 1.5; transition: color 300ms var(--ease), padding-left 460ms var(--ease); }
.course-index-list span { font-size: 11px; letter-spacing: .14em; color: var(--bronze); transition: transform 460ms var(--ease); }

.course-receive { list-style: none; margin: clamp(28px, 3.5vw, 48px) 0 0; padding: 0; }
.course-receive li { position: relative; padding: 20px 0; border-top: 1px solid var(--rule-secondary); font-family: var(--display); font-size: clamp(19px, 2.1vw, 30px); line-height: 1.28; transition: color 300ms var(--ease), padding-left 460ms var(--ease); }
.course-receive li::before { content: ""; position: absolute; top: 50%; left: 0; width: 0; height: 1px; background: var(--bronze); transition: width 460ms var(--ease); }
.course-receive li:last-child { border-bottom: 1px solid var(--rule-secondary); }

/* --- 03 Програма — dark, three editorial columns divided by rules --------- */
.course-program { color: var(--white); background: var(--dark); padding-block: clamp(64px, 8vw, 128px); }
.course-program-head { display: grid; grid-template-columns: 1fr auto; gap: clamp(28px, 5vw, 72px); align-items: end; padding: clamp(40px, 5vw, 72px) 0 clamp(30px, 3.4vw, 48px); }
.course-program-head h2 { max-width: none; font-size: clamp(2.6rem, 4.6vw, 5.4rem); line-height: .92; letter-spacing: -.04em; }
.course-program-head p { color: rgba(255,255,255,.68); max-width: 40ch; }
.course-program-groups { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 4vw, 70px); }
.course-group { border-top: 1px solid rgba(244, 236, 232, .42); padding-top: clamp(22px, 2.6vw, 36px); }
.course-group h3 { display: flex; align-items: baseline; gap: 14px; margin: 0 0 clamp(16px, 2vw, 26px); font-family: var(--display); font-size: clamp(27px, 3.2vw, 46px); font-weight: 400; letter-spacing: -.02em; }
.course-group h3 span { font-family: var(--body); font-size: 11px; letter-spacing: .18em; color: var(--bronze); transition: transform 460ms var(--ease); }
@media (hover: hover) {
  .course-group:hover h3 span { transform: translateX(4px); }
  .course-group { transition: border-color 300ms var(--ease); }
  .course-group:hover { border-top-color: var(--bronze); }
}
.course-group ul { list-style: none; margin: 0; padding: 0; }
.course-group li { position: relative; padding: 15px 0; border-top: 1px solid var(--rule-dark-secondary); color: rgba(255,255,255,.84); line-height: 1.5; transition: color 300ms var(--ease), padding-left 460ms var(--ease); }
/* A bronze hairline draws itself in from the left while the line steps aside
   and comes up to full white. The rule above each row stays put, so only the
   text moves — the column keeps its structure. Guarded by hover:hover so a
   touch tap does not leave a row stuck in the hovered state. */
.course-group li::before { content: ""; position: absolute; top: 50%; left: 0; width: 0; height: 1px; background: var(--bronze); transition: width 460ms var(--ease); }
@media (hover: hover) {
  .course-group li:hover { color: var(--white); padding-left: 28px; }
  .course-group li:hover::before { width: 18px; }
  .course-group:hover li:not(:hover) { color: rgba(255,255,255,.55); }
}

/* --- 04 Практика — split, media carries the left half -------------------- */
.course-practice { display: grid; grid-template-columns: 48% 52%; background: var(--white); }
.course-practice-media { overflow: hidden; }
.course-practice-media img { width: 100%; height: 100%; min-height: 60svh; object-fit: cover; object-position: center 30%; }
.course-practice-copy { display: flex; flex-direction: column; justify-content: center; }
.course-practice-copy .editorial-title { margin: clamp(28px, 4vw, 56px) 0; font-size: clamp(2.6rem, 4.4vw, 5.4rem); }
.course-practice-copy em { color: var(--bronze); font-style: italic; font-weight: 400; }
.course-practice-text { display: grid; gap: 18px; max-width: 46ch; margin-left: auto; }

/* --- 05 Матеріали — portrait plate, copy beside it ----------------------- */
.course-kit { display: grid; grid-template-columns: 1.06fr .94fr; gap: clamp(36px, 6vw, 100px); align-items: center; padding-top: clamp(44px, 6vw, 90px); }
.course-kit-media { margin: 0; overflow: hidden; }
.course-kit-media img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.course-kit-copy { display: grid; gap: 20px; }
.course-kit-copy .editorial-title { max-width: 13ch; margin-bottom: clamp(8px, 1.5vw, 18px); }
.course-kit-copy p { max-width: 42ch; }

/* --- 07 Метод / 08 Формат ------------------------------------------------ */
.course-approach .editorial-title, .course-format .editorial-title { max-width: 14ch; margin-top: clamp(44px, 6vw, 90px); }
.course-approach-body { display: grid; gap: 20px; max-width: 56ch; margin: clamp(36px, 4.5vw, 64px) 0 0 auto; }
.course-facts { margin: clamp(36px, 4.5vw, 64px) 0 0; }
.course-facts > div { position: relative; display: grid; grid-template-columns: minmax(180px, .42fr) 1fr; gap: clamp(18px, 4vw, 60px); padding: 22px 0; border-top: 1px solid var(--rule-secondary); align-items: baseline; transition: padding-left 460ms var(--ease); }
.course-facts > div::before { content: ""; position: absolute; top: 50%; left: 0; width: 0; height: 1px; background: var(--bronze); transition: width 460ms var(--ease); }
.course-facts dt, .course-facts dd { transition: opacity 300ms var(--ease), color 300ms var(--ease); }
.course-facts > div:last-child { border-bottom: 1px solid var(--rule-secondary); }
.course-facts dt { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; opacity: .62; }
.course-facts dd { margin: 0; font-family: var(--display); font-size: clamp(21px, 2.4vw, 34px); line-height: 1.24; }

/* --- Phone: present, never louder than the title ------------------------- */
.course-phone { font-size: clamp(15px, 1.25vw, 18px); letter-spacing: .01em; white-space: nowrap; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.course-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(18px, 2.4vw, 34px); margin-top: clamp(10px, 1.6vw, 20px); }
.course-lead { max-width: 30ch; font-family: var(--display); font-size: clamp(20px, 2vw, 28px); line-height: 1.3; }

/* --- Closing CTA --------------------------------------------------------- */
.course-cta { color: var(--white); background: var(--dark); }
.course-cta-inner { display: grid; }
.course-cta .editorial-title { max-width: 12ch; margin: clamp(44px, 6vw, 90px) 0 clamp(20px, 2.4vw, 32px); }
.course-cta p { max-width: 44ch; color: rgba(255,255,255,.72); }
.course-cta-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: clamp(30px, 4vw, 52px); }
.course-cta-phone { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 22px; margin-top: clamp(26px, 3vw, 40px); color: rgba(255,255,255,.72); }
.course-cta-phone .course-phone { color: var(--white); font-family: var(--display); font-size: clamp(22px, 2.4vw, 32px); border-bottom-color: rgba(255,255,255,.4); }
.course-cta-phone > span { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }

/* --- Tap targets: every course link clears 44px -------------------------- */
.course-phone, .course-marks li, .course-index-list li { min-height: 0; }
.course-hero-actions .course-phone, .course-cta-phone .course-phone { display: inline-flex; align-items: center; min-height: 44px; }

@media (max-width: 1024px) {
  .course-program-groups { grid-template-columns: 1fr; gap: clamp(26px, 4vw, 44px); }
  .course-kit { grid-template-columns: minmax(0, .9fr) 1.1fr; }
}

@media (max-width: 767px) {
  .course-split, .course-program-head, .course-kit { grid-template-columns: 1fr; }
  .course-split { gap: 34px; padding-top: 46px; }
  .course-split .editorial-title, .course-approach .editorial-title, .course-format .editorial-title, .course-kit-copy .editorial-title, .course-cta .editorial-title { max-width: none; }
  .course-standfirst { max-width: none; }
  .course-rule { margin: 62px 0 40px; }
  .course-program-head { padding: 56px 0 44px; gap: 28px; }
  .course-program-head h2 { max-width: none; font-size: clamp(2.9rem, 12vw, 4.6rem); }
  .course-practice { grid-template-columns: 1fr; }
  .course-practice-media img { min-height: 0; aspect-ratio: 4 / 3; }
  .course-practice-text { margin-left: 0; max-width: none; }
  .course-kit { gap: 32px; padding-top: 40px; }
  /* Phone pacing: lead with the sentence, let the plate land after it. Stacking
     the desktop order would open the section on 430px of tool photography
     before the reader knows what it is about. */
  .course-kit-copy { order: 1; }
  /* landscape frame since materials-01 replaced the narrow tool crop */
  .course-kit-media { order: 2; width: 100%; }
  .course-approach-body { margin-left: 0; max-width: none; }
  .course-facts > div { grid-template-columns: 1fr; gap: 6px; padding: 18px 0; }
  .course-cta-actions .button { flex: 1 1 100%; }
}

/* Reduced motion: the shared .reveal machinery is already neutralised above;
   nothing on this page animates independently of it. */

/* Course hero on phones. Measured, not guessed: at the inherited 14vw the
   second line ("з нарощування вій") needs 531px against 390px of measure at
   430 and 335px at 375, so it broke into two orphans («з» alone, «вій» alone).
   9.6vw lands the line at 364px / 318px — it sets on one line at both widths
   with margin left over. Scoped to this page's hero; the homepage uses
   .training-teaser and is untouched. */
@media (max-width: 767px) {
  .training-page .training-hero h1 { font-size: clamp(2.1rem, 9.6vw, 3.5rem); }
  /* The shared scrim is a horizontal gradient built for a landscape frame; at
     phone widths it leaves the body copy sitting on the lit side of the image.
     Bottom-weighted vertical scrim instead, so the lede and CTA keep contrast. */
  .training-page .training-hero::after { background: linear-gradient(to top, rgba(18,16,14,.82), rgba(18,16,14,.42) 46%, rgba(18,16,14,.14)); }
}

/* --- Course photography ---------------------------------------------------
   Three placements, each tied to what its section actually says rather than
   decorating it: the working shot under 02 (schemes, length, effect), the kit
   plate in 03 (База — materials and tools), and a quiet plate beside the 06
   list. All landscape frames are cropped, never letterboxed. */
.course-band { margin: clamp(44px, 6vw, 84px) 0 0; overflow: hidden; }
.course-band img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: center 58%; }

.course-program-media { width: clamp(180px, 22vw, 300px); margin: 0; overflow: hidden; align-self: end; }
.course-program-media img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; object-position: center 32%; }

.course-split-media > div { display: grid; gap: clamp(30px, 4vw, 52px); }
.course-side-media { margin: 0; overflow: hidden; max-width: 320px; }
/* 02 sits opposite an eight-row list, so its plate is allowed more width
   and keeps the 9:16 photograph closer to its native proportion. */
.course-side-media-wide { max-width: 430px; }
/* The graduates frame has a tall stretch of empty backdrop above the heads.
   Pulling the crop down keeps both faces and both certificates in a 3:4
   window instead of spending a quarter of it on the wall. */
.course-side-media.course-side-media-lower img { object-position: center 58%; }
.course-side-media-wide img { aspect-ratio: 4 / 5; }
.course-side-media img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; object-position: center 30%; }
/* 09 carries a generated flat-lay rather than a 9:16 photograph, so it keeps
   a centred crop instead of the upward pull the real portraits need. */
.course-block:last-of-type .course-side-media img { object-position: center center; }

@media (max-width: 767px) {
  .course-band { margin-top: 38px; }
  .course-band img { aspect-ratio: 3 / 2; }
  /* the head stacks here, so the plate is no longer competing with the title
     for width and can read as a picture rather than a thumbnail */
  .course-program-media { width: 66%; margin: 6px 0 0 auto; }
  .course-program-media img { aspect-ratio: 4 / 3; }
  .course-side-media { max-width: 68%; margin-left: auto; }
  .course-side-media img { aspect-ratio: 4 / 5; }
}

/* The course hero now carries a real 9:16 photograph instead of the earlier
   landscape frame. Pull the crop up so the faces sit above the headline rather
   than behind it, and deepen the scrim on the side the text occupies. */
.training-page .training-hero-media img { object-position: 62% 26%; }
.training-page .training-hero::after { background: linear-gradient(84deg, rgba(18,16,14,.9) 6%, rgba(18,16,14,.62) 46%, rgba(18,16,14,.22)), linear-gradient(to top, rgba(18,16,14,.72), rgba(18,16,14,0) 30%); }
@media (max-width: 767px) {
  .training-page .training-hero-media img { object-position: 58% 22%; }
  .training-page .training-hero::after { background: linear-gradient(to top, rgba(18,16,14,.88), rgba(18,16,14,.5) 48%, rgba(18,16,14,.2)); }
}

/* 08 Формат — the fact rows keep the measure they had; the plate sits beside
   them rather than pushing them narrower, and drops below on phones. */
.course-format-grid { display: grid; grid-template-columns: 1fr minmax(200px, .34fr); gap: clamp(36px, 6vw, 90px); align-items: end; }
.course-format-grid .course-facts { margin-top: clamp(36px, 4.5vw, 64px); }
.course-format-media { margin: 0 0 6px; overflow: hidden; }
.course-format-media img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; }

@media (max-width: 767px) {
  .course-format-grid { grid-template-columns: 1fr; gap: 28px; }
  .course-format-media { width: 62%; margin: 0 0 0 auto; }
}

/* Hover on the light lists — the same move as the programme column, translated
   for a light surface: there is no "brighter than ink" to go to, so the row
   that is not hovered recedes instead. The rule above each row never moves;
   only the text steps aside, so the columns keep their structure.
   hover:hover only, or a tap would leave a row stuck in the hovered state. */
@media (hover: hover) {
  .course-marks li:hover { padding-left: 48px; }
  .course-marks li:hover::before { width: 28px; }
  .course-marks:hover li:not(:hover) { color: rgba(17, 17, 17, .45); }

  .course-index-list li:hover { padding-left: 16px; }
  .course-index-list li:hover span { transform: translateX(3px); }
  .course-index-list:hover li:not(:hover) { color: rgba(17, 17, 17, .45); }

  .course-receive li:hover { padding-left: 40px; }
  .course-receive li:hover::before { width: 26px; }
  .course-receive:hover li:not(:hover) { color: rgba(17, 17, 17, .42); }

  .course-facts > div:hover { padding-left: 34px; }
  .course-facts > div:hover::before { width: 22px; }
  .course-facts:hover > div:not(:hover) dt,
  .course-facts:hover > div:not(:hover) dd { opacity: .45; }
}

/* --- Course hero scroll cue ------------------------------------------------------
   The course page opens on a full-viewport hero, so nothing signals that the
   page continues. A quiet label and a rail with a travelling line do that
   without becoming a second CTA — it stays smaller and dimmer than the phone
   beside it. It is a real anchor, so it works with the keyboard and without JS. */
.course-cue { position: absolute; right: var(--pad); bottom: clamp(18px, 2.6vw, 34px); width: max-content; display: inline-flex; flex-direction: column; align-items: center; gap: 12px; padding: 2px 10px; color: var(--white); opacity: .72; transition: opacity 320ms var(--ease); }

.course-cue:hover, .course-cue:focus-visible { opacity: 1; }
.course-cue-label { font-size: 10px; letter-spacing: .22em; text-transform: uppercase; writing-mode: vertical-rl; }
.course-cue-rail { position: relative; display: block; width: 1px; height: 58px; background: rgba(255,255,255,.3); overflow: hidden; }
.course-cue-rail i { position: absolute; inset-inline: 0; top: 0; display: block; height: 22px; background: currentColor; animation: course-cue-travel 1900ms var(--ease-in-out) infinite; }
@keyframes course-cue-travel {
  0%   { transform: translateY(-100%); }
  55%  { transform: translateY(264%); }
  100% { transform: translateY(264%); }
}

@media (max-width: 767px) {
  /* On phones the hero copy already reaches the bottom edge, so the cue sits
     centred under it rather than fighting the phone number for the corner. */
  /* 44px tap target on phones without letting the padding push the hero copy */
  /* still vertical here; it keeps the corner rather than joining the flow,
     so it never competes with the phone number for the bottom-left. */
  .course-cue { bottom: 16px; gap: 10px; padding: 2px 12px; min-width: 44px; }
  .course-cue-rail { height: 44px; }
  .course-cue-rail i { height: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  /* Hold the marker still rather than letting the global .01ms override leave
     it parked off the rail. */
  .course-cue-rail i { animation: none; transform: none; height: 16px; }
}

/* Creator credit — the last line of both public pages. Deliberately quiet: it
   sits below the studio's own footer row and must never read as a second brand.
   "Сайт створив" is set back at .42 opacity; only the name is interactive. */
.footer-credit { max-width: none; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: clamp(16px, 1.8vw, 22px) 0 0; padding-top: 12px; border-top: 1px solid var(--rule-dark-secondary); font-size: 11px; letter-spacing: .04em; }
.footer-credit span { opacity: .42; }
.footer-credit a { display: inline-flex; align-items: center; gap: 5px; min-height: 44px; margin-block: -11px; opacity: .72; transition: opacity 260ms var(--ease), color 260ms var(--ease); }
.footer-credit a i { font-style: normal; font-size: 10px; transition: transform 260ms var(--ease); }
.footer-credit a:hover, .footer-credit a:focus-visible { color: var(--bronze); opacity: 1; }
.footer-credit a:hover i, .footer-credit a:focus-visible i { transform: translate(2px, -2px); }

@media (max-width: 767px) {
  /* Its own line on phones, and the 44px target no longer needs to inflate the
     row once the credit is the last thing on the page. */
  .footer-credit { width: 100%; margin-top: 24px; }
}

/* 404 — served by Cloudflare Pages for any unmatched path, including nested
   ones. It carries no header, menu or footer because none of those work
   without script.js, and the page deliberately loads no JavaScript. Surface
   (blush) -> boundary (the foot rule) -> no elevation; the buttons bring their
   own from the shared .button recipe. */
.error-page { background-color: var(--blush); }
.error-stage { display: flex; flex-direction: column; min-height: 100svh; padding: clamp(24px, 4vw, 56px) var(--pad); }
.error-wordmark { font-size: clamp(15px, 1.1vw, 18px); font-weight: 500; letter-spacing: -.035em; }
.error-body { margin: auto 0; padding: clamp(40px, 8vh, 96px) 0; }
.error-eyebrow { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; opacity: .58; }
.error-title { margin-top: clamp(18px, 2.4vw, 30px); font-size: clamp(2.6rem, 6vw, 5.2rem); line-height: .98; letter-spacing: -.04em; }
.error-copy { margin-top: clamp(16px, 1.8vw, 24px); max-width: 42ch; opacity: .74; }
.error-actions { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(18px, 2.4vw, 32px); margin-top: clamp(28px, 3.6vw, 46px); }
.error-foot { display: flex; justify-content: space-between; gap: 20px; padding-top: 14px; border-top: 1px solid var(--rule-secondary); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; opacity: .58; }