*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; overflow-x: hidden; }

:root {
  --font-display: 'Barlow Condensed', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-accent: 'Instrument Serif', Georgia, serif;
  --type-body: 0.95em;
  --type-body-lg: 1.125em;
  --type-slide-copy: 1.2em;
  --type-body-sm: 0.875em;
  --type-body-lh: 1.75;
  --type-section: clamp(7em, 10vw, 10em);
  --type-hero: 8.85em;
  --type-hero-lead: 1.67em;
  --type-cmc-logo: 9.38em;
  --type-cmc-nav: 2.92em;
  --type-quote: clamp(1.55em, 1.8vw, 1.8em);
  --type-project-h2: clamp(6em, 9vw, 9em);
  --type-photo-title: clamp(4.5em, 6.5vw, 6.5em);
  --type-market-intro: clamp(1.8em, 2.5vw, 2.5em);
  --ink: #1a1a1a;
  --text-dark: #111;
  --cream: #f0ece0;
  --cream-khaki: #ede9dc;
  --gold: #e8e0c8;
  --slide-dark: #1a1a1a;
  --slide-blue-grey: #b8bfc8;
  --slide-beige: #d4cfc0;
  --slide-cream: #e8e4d8;
  --slide-grey: #c5c5c5;
  --slide-khaki: #8E8D7A;
}

p { margin-bottom: 1.1em; }

body {
  font-family: var(--font-body);
  background: #111;
  color: var(--ink);
  overflow-x: hidden;
}

/* 1em = 1% ширини слайду (1920px → 19.2px) — як у PDF */
.deck {
  width: min(100vw, calc(100vh * 16 / 9));
  margin: 0 auto;
  background: #1a1a1a;
  font-size: calc(min(100vw, 100vh * 16 / 9) / 100);
}

.section {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
}

.slide-photo {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.slide-photo .slide-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  z-index: 2;
  position: relative;
}

/* ── S1 HERO (PDF p1: Instrument Serif title, Inter tagline, Instrument Serif subtitle) ── */
.s1 {
  background-image: url('images/hero-bg-web.jpg');
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  text-align: center;
  padding: 13em 5em 4em;
}
.s1 h1 {
  font-family: var(--font-accent);
  font-weight: 400;
  font-style: normal;
  font-size: 6.2em;
  text-transform: uppercase;
  color: var(--cream);
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin: 0 auto;
  padding: 0 2em;
  width: 100%;
  max-width: 100%;
  text-align: center;
}
.lang-uk .s1 h1 {
  font-size: clamp(3.4em, 3.8vw, 4.4em);
  letter-spacing: -0.01em;
  padding-bottom: 0.16em;
  text-wrap: balance;
}
.lang-uk .s1 .tagline,
.lang-uk .s1 .subtitle {
  font-size: 1.45em;
}
.s1 .tagline {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--type-hero-lead);
  color: var(--cream);
  line-height: 1.34;
  margin: 1.09em auto 0;
  max-width: 58%;
  text-align: center;
}
.s1 .tagline strong { font-weight: 400; }
.s1 .subtitle {
  font-family: var(--font-accent);
  font-weight: 400;
  font-style: italic;
  font-size: var(--type-hero-lead);
  color: var(--cream);
  line-height: 1.25;
  max-width: 58%;
  margin: 2.86em auto 0;
  padding-top: 0;
  text-align: center;
}

/* ── S2 / S4 numbered text slides (blue-grey) ── */
.s2,
.s4 {
  background: var(--slide-blue-grey);
  justify-content: flex-start;
  color: var(--text-dark);
  padding: 4em 8em 4em 6em;
}

.section-num-title {
  display: flex;
  align-items: baseline;
  flex-wrap: nowrap;
  gap: 2em;
  margin-bottom: 1.2em;
}
.section-num-title .num,
.section-num-title .title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--type-section);
  color: var(--text-dark);
  line-height: 0.95;
  text-transform: uppercase;
  letter-spacing: -0.03em;
}

.s2 .body-text,
.s4 .body-text {
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--text-dark);
  font-size: var(--type-body);
  line-height: var(--type-body-lh);
  max-width: 68%;
  margin-left: 0;
}
.s2 .body-text p,
.s4 .body-text p { margin-bottom: 1.1em; }
.s2 .body-text strong { font-weight: 700; text-decoration: underline; }
.s4 .links a {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: inherit;
  color: var(--text-dark);
  text-decoration: underline;
  display: block;
  margin-bottom: 0.4em;
}
.s4 .pitchfork {
  font-family: var(--font-accent);
  font-style: italic;
  margin-top: 1.5em;
}

/* ── S3 water quote (dark) ── */
.s3 {
  background-color: var(--slide-dark);
  background-image: url('images/water-texture-web.jpg');
  justify-content: center;
  align-items: center;
  padding: 0;
}
.s3 .slide-center {
  width: 100%;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 8em;
}
.s3 .slide-center blockquote {
  margin: 0 auto;
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-style: normal;
  font-size: calc(var(--type-quote) * 0.88);
  color: var(--cream);
  line-height: 1.75;
  max-width: 72%;
  width: 100%;
  text-align: center;
}
/* ── S5 Lubomyr ── */
.s5 {
  background-image: url('images/5Y8A0626-web.jpg');
  position: relative;
}
.s5.slide-baked .quote-small,
.s5.slide-baked h2 { display: none; }
.lang-uk .s5.slide-baked { background-image: url('images/s5-slide-web.jpg'); }
.lang-en .s5.slide-baked { background-image: url('images/s5-slide-en-web.jpg'); }
.s5 .quote-small {
  font-family: var(--font-accent);
  font-weight: 400;
  font-style: italic;
  font-size: 0.88em;
  color: var(--cream);
  line-height: 1.52;
  max-width: 36%;
  position: absolute;
  top: 42%;
  left: 5.5em;
  transform: translateY(-50%);
  z-index: 2;
}
.s5 h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(4em, 6vw, 6em);
  color: var(--cream);
  text-transform: none;
  line-height: 0.95;
  letter-spacing: -0.02em;
  position: absolute;
  bottom: 6.5em;
  right: 5.5em;
  text-align: right;
  z-index: 2;
}

/* ── S6 PROJECT 3 IN 1 (beige-sand) ── */
.s6 {
  background: var(--slide-beige);
  padding: 5.5em 7em 5em;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0;
  color: var(--text-dark);
}
.s6 .intro-row {
  display: flex;
  align-items: flex-start;
  gap: 3em;
  flex-shrink: 0;
}
.s6 .intro-row .num {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 5.7em;
  color: var(--text-dark);
  line-height: 0.95;
  letter-spacing: -0.03em;
  flex-shrink: 0;
}
.s6 .intro-row .intro-text {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--type-body);
  color: var(--text-dark);
  line-height: 1.55;
  padding-top: 0.35em;
  max-width: 52%;
}
.s6 h2 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--type-project-h2);
  text-transform: uppercase;
  color: var(--text-dark);
  line-height: 0.9;
  letter-spacing: -0.03em;
  margin: 0.85em 0 0;
  flex-shrink: 0;
}
.three-cols {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 2.2em;
  flex-shrink: 0;
  margin-top: 0;
  padding-top: 0.2em;
}
.three-cols .col { padding-right: 4em; }
.three-cols .col-label {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.05em;
  margin-bottom: 0.5em;
  color: var(--text-dark);
}
.three-cols .col-name {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 1.15em;
  margin-bottom: 0.2em;
  color: var(--text-dark);
}
.three-cols .col-sub {
  font-family: var(--font-accent);
  font-weight: 400;
  font-style: italic;
  font-size: 1.05em;
  color: var(--text-dark);
}
.three-cols .col-tagline {
  font-family: var(--font-accent);
  font-weight: 400;
  font-style: italic;
  font-size: 0.95em;
  color: var(--text-dark);
  margin-top: 0.35em;
  line-height: 1.45;
}

/* ── S7 Pockets of Light ── */
.s7 {
  background-image: url('images/s7-bg-dark-web.jpg');
  background-position: center center;
  justify-content: center;
  align-items: center;
  --s7-title: 9.375em;
  --s7-sub: 2.917em;
}
.s7::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.48);
  z-index: 1;
}
.s7.slide-video::before { display: none; }
.s7 .slide-video-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  filter: grayscale(100%) contrast(1.08);
}
.s7.slide-video .slide-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: absolute;
  inset: 0;
  z-index: 2;
}
.lang-uk .s7.slide-video { background-image: url('images/s7-slide-web.jpg'); }
.lang-en .s7.slide-video { background-image: url('images/s7-slide-en-web.jpg'); }
/* PDF p7: Instrument Serif 135pt title + 42pt subtitle, #f7f3e2, centered */
.s7 .slide-center {
  align-items: center;
  text-align: center;
}
.s7 h2 {
  font-family: var(--font-accent);
  font-weight: 400;
  font-style: normal;
  font-size: var(--s7-title);
  color: #f7f3e2;
  text-transform: none;
  line-height: 1.0;
  letter-spacing: -0.015em;
  margin: 0 0 0.05em;
  text-shadow:
    0 2px 24px rgba(0, 0, 0, 0.65),
    0 0 48px rgba(0, 0, 0, 0.45);
}
.s7 .sub {
  font-size: var(--s7-sub);
  color: #f7f3e2;
  line-height: 1.0;
  margin: 0;
  text-shadow:
    0 2px 24px rgba(0, 0, 0, 0.65),
    0 0 48px rgba(0, 0, 0, 0.45);
}
.lang-uk .s7 .sub {
  font-family: 'Oswald', sans-serif;
  font-weight: 300;
  font-style: normal;
  letter-spacing: 0.04em;
  text-transform: lowercase;
}
.lang-en .s7 .sub {
  font-family: var(--font-accent);
  font-weight: 400;
  font-style: normal;
  letter-spacing: -0.01em;
  text-transform: lowercase;
}
.s9 h2,
.s11 h2 {
  font-family: var(--font-accent);
  font-weight: 400;
  font-style: normal;
  font-size: var(--type-photo-title);
  color: var(--cream);
  text-transform: none;
  margin-bottom: 0.35em;
  letter-spacing: 0.01em;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.6);
}
.s9 .sub,
.s11 .sub {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 1.2em;
  color: var(--cream);
  letter-spacing: 0.05em;
  text-shadow: 0 1px 16px rgba(0, 0, 0, 0.6);
}

/* ── S8 Performance split ── */
.s8 {
  flex-direction: row;
  align-items: stretch;
  padding: 0;
}
.s8 .photo-half {
  display: none;
}
.s8 .photo-half img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 60%;
}
.s8 .text-half {
  width: 100%;
  flex: 1;
  background: var(--slide-grey);
  padding: 5em 6.5em 4.5em;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-self: stretch;
}
.s8 .text-half h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(3.6em, 5.2vw, 5em);
  color: var(--text-dark);
  text-transform: none;
  line-height: 1.02;
  margin-bottom: 0.85em;
}
.s8 .text-half p {
  font-family: var(--font-body);
  font-weight: 400;
  font-style: normal;
  font-size: clamp(1.28em, 1.48vw, 1.42em);
  line-height: 1.55;
  color: var(--text-dark);
  margin-bottom: 0.85em;
  max-width: 100%;
}

/* ── S9 Endless Note ── */
.s9 {
  background-image: url('images/5Y8A0598-web.jpg');
  justify-content: center;
  align-items: center;
}
.s9::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.18);
  z-index: 1;
}
.s9.slide-baked::before { display: none; }
.s9.slide-baked .slide-center { display: none; }
.lang-uk .s9.slide-baked { background-image: url('images/s9-slide-web.jpg'); }
.lang-en .s9.slide-baked { background-image: url('images/s9-slide-en-web.jpg'); }
.s9 h2 { text-shadow: 0 2px 20px rgba(0, 0, 0, 0.45); }
.s9 .sub { text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45); }

/* ── S10 film text (blue-grey) ── */
.s10 {
  background: var(--slide-blue-grey);
  padding: 5em 6.5em 4.5em;
  justify-content: center;
  color: var(--text-dark);
}
.s10 p,
.s10 blockquote {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(1.05em, 1.15vw, 1.2em);
  line-height: 1.68;
  max-width: 82%;
  margin-bottom: 0.95em;
  color: var(--text-dark);
}
.s10 blockquote {
  font-family: var(--font-accent);
  font-style: italic;
  margin-top: 0.15em;
}
.s10 .cta {
  font-family: var(--font-accent);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(1.05em, 1.15vw, 1.2em);
  color: var(--text-dark);
  text-decoration: underline;
  margin-top: 0.35em;
  display: inline-block;
}
.s10 .cta:hover { opacity: 0.75; }

/* ── S11 Piano Academy ── */
.s11 {
  background-image: url('images/5Y8A0137-web.jpg');
  justify-content: center;
  align-items: center;
}
.s11::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.28);
  z-index: 1;
}
.s11.slide-baked::before { display: none; }
.s11.slide-baked .slide-center { display: none; }
.lang-uk .s11.slide-baked { background-image: url('images/s11-slide-web.jpg'); }
.lang-en .s11.slide-baked { background-image: url('images/s11-slide-en-web.jpg'); }
.s11 h2 { text-shadow: 0 2px 16px rgba(0, 0, 0, 0.5); }
.s11 .sub { text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5); }

/* ── S12 academy (beige-sand) ── */
.s12 {
  background: var(--slide-beige);
  padding: 5em 6.5em 4.5em;
  justify-content: center;
  color: var(--text-dark);
}
.s12 p,
.s12 blockquote {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--type-slide-copy);
  line-height: 1.68;
  max-width: 82%;
  margin-bottom: 0.95em;
  color: var(--text-dark);
}
.s12 blockquote {
  font-family: var(--font-accent);
  font-style: italic;
  font-size: var(--type-quote);
  line-height: 1.55;
  max-width: 88%;
  margin-top: 0.15em;
  margin-bottom: 0;
}

/* ── S13 team (dark) ── */
.s13 {
  background: var(--slide-dark);
  flex-direction: row;
  align-items: center;
  padding: 5em 6em;
  gap: 4.5em;
}
.s13 .photo-box {
  flex: 0 0 42%;
  max-width: 42%;
  background: #fff;
  padding: 1.4em;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12);
}
.s13 .photo-box img {
  width: 100%;
  display: block;
  filter: grayscale(100%);
}
.s13 .photo-caption {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 0.75em;
  color: var(--text-dark);
  padding: 1em 0.4em 0.2em;
  text-align: center;
  line-height: 1.4;
}
.s13 .text-box { flex: 1; min-width: 0; }
.s13 .text-box .num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 4.5em;
  color: var(--cream);
  line-height: 0.95;
}
.s13 .text-box h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 4.5em;
  color: var(--cream);
  line-height: 0.95;
  text-transform: uppercase;
  margin-bottom: 1.4em;
}
.s13 .text-box blockquote {
  font-family: var(--font-accent);
  font-weight: 400;
  font-style: italic;
  font-size: 1.08em;
  color: var(--cream);
  line-height: 1.55;
  margin-bottom: 1.6em;
}
.s13 .text-box .credit {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.72em;
  color: var(--cream);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.s13 .text-box .credit::before { content: '• '; }

/* ── S14 bios (cream — team list) ── */
.s14 {
  background: var(--slide-cream);
  padding: 6em 7em;
  justify-content: flex-start;
  color: var(--text-dark);
}
.s14 .team-page-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 4.5em;
  text-transform: uppercase;
  line-height: 1;
  max-width: 72%;
  margin-bottom: 1.2em;
  color: var(--text-dark);
}
.s14 .intro-italic {
  font-family: var(--font-accent);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(1.3em, 1.5vw, 1.5em);
  max-width: 100%;
  margin-bottom: 2em;
  color: var(--text-dark);
}
.s14 .team-member {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--type-body);
  line-height: 1.65;
  max-width: 72%;
  margin-bottom: 0.85em;
  color: var(--text-dark);
}
.s14 .team-member strong { font-weight: 700; }

/* ── S15 market (beige) ── */
.s15 {
  background: var(--slide-beige);
  padding: 5em 7em;
  justify-content: flex-start;
  color: var(--text-dark);
}
.s15 .header-row {
  display: flex;
  align-items: flex-start;
  gap: 2em;
  margin-bottom: 3em;
}
.s15 .header-row .num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(5em, 6.25vw, 6.25em);
  line-height: 1;
  flex-shrink: 0;
  color: var(--text-dark);
}
.s15 .header-row .title-block {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.s15 .header-row .title-small {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(1.4em, 1.65vw, 1.65em);
  line-height: 1.1;
  margin-bottom: 0.3em;
  color: var(--text-dark);
}
.s15 .header-row .title-big {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.8em, 3.65vw, 3.65em);
  text-transform: uppercase;
  line-height: 1;
  color: var(--text-dark);
}
.s15 .market-intro {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--type-market-intro);
  margin-bottom: 3.2em;
  max-width: 83%;
  line-height: 1.45;
  color: var(--text-dark);
}
.market-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  position: relative;
  margin-right: 0;
}
.market-grid::before {
  content: '';
  position: absolute;
  top: 4.8em;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--text-dark);
}
.market-grid .market-col {
  position: relative;
  padding-top: 5.8em;
  padding-right: 2em;
}
.market-grid .market-col::before {
  content: '';
  position: absolute;
  top: calc(4.8em - 3px);
  left: 0;
  width: 6px;
  height: 6px;
  background: var(--text-dark);
  border-radius: 50%;
}
.market-grid .market-col::after {
  content: '';
  position: absolute;
  top: 4.8em;
  left: 2.5px;
  width: 1px;
  height: 1.2em;
  background: var(--text-dark);
}
.market-grid .market-col:first-child::before {
  border-radius: 0;
  width: 0.65em;
  height: 0.65em;
  top: calc(4.8em - 0.65em);
  left: 0;
  background: transparent;
  border-left: 1px solid var(--text-dark);
  border-top: 1px solid var(--text-dark);
  box-shadow: none;
}
.market-grid .market-col:last-child::before {
  left: auto;
  right: 0;
  border-left: none;
  border-right: 1px solid var(--text-dark);
  border-top: 1px solid var(--text-dark);
}
.market-grid .market-name {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1.05em;
  position: absolute;
  top: 0;
  left: 0;
  right: 2em;
  line-height: 1.25;
  min-height: 4em;
  color: var(--text-dark);
}
.market-grid .market-desc {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--type-body-sm);
  line-height: 1.6;
  color: var(--text-dark);
}

/* ── S16 patron photo ── */
.s16 {
  background-image: url('images/5Y8A0170-web.jpg');
  position: relative;
}
.s16.slide-baked .s16-header,
.s16.slide-baked .num,
.s16.slide-baked h2,
.s16.slide-baked blockquote,
.s16.slide-baked::after { display: none; }
.lang-uk .s16.slide-baked { background-image: url('images/s16-slide-web.jpg'); }
.lang-en .s16.slide-baked { background-image: url('images/s16-slide-en-web.jpg'); }
.s16::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.35) 0%, transparent 45%);
  pointer-events: none;
}
.s16-header {
  position: absolute;
  top: 6em;
  left: 6em;
  right: 6em;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  z-index: 2;
  gap: 2em;
}
.s16 .num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 4.7em;
  color: var(--cream);
  line-height: 1;
  flex-shrink: 0;
}
.s16 h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 5em;
  text-transform: uppercase;
  color: var(--cream);
  text-align: right;
  line-height: 1;
  margin: 0;
  flex-shrink: 0;
}
.s16 blockquote {
  font-family: var(--font-accent);
  font-weight: 400;
  font-style: italic;
  font-size: 1em;
  color: var(--cream);
  line-height: 1.65;
  max-width: 56%;
  position: absolute;
  bottom: 7.5em;
  left: 6em;
  z-index: 2;
}

/* ── S17 patron text (cream + beige phone panel) ── */
.s17 {
  background: var(--slide-cream);
  display: grid;
  grid-template-columns: 52fr 48fr;
  padding: 0;
  align-items: stretch;
  color: var(--text-dark);
}
.s17 .text-side {
  padding: 7em 4em 6em 7.5em;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  background: var(--slide-cream);
}
.s17 .text-side h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 4em;
  text-transform: uppercase;
  line-height: 1;
  margin-bottom: 2.2em;
  color: var(--text-dark);
}
.s17 .text-side p {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--type-body);
  line-height: 1.55;
  max-width: 94%;
  margin-bottom: 0.95em;
  color: var(--text-dark);
}
.s17 .text-side .note {
  font-family: var(--font-accent);
  font-style: italic;
  font-size: 0.82em;
  margin-top: 0.5em;
  line-height: 1.45;
  color: var(--text-dark);
}
.s17 .phone-side {
  display: flex;
  align-items: stretch;
  padding: 3.2em 3.5em 3.2em 0;
  min-width: 0;
  background: var(--slide-cream);
}
.s17 .phone-panel {
  background: var(--slide-beige);
  border-radius: 2.7em;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5em 3em;
  min-height: 0;
}
.s17 .phone-mockup {
  width: 11.5em;
  height: 23.5em;
  flex-shrink: 0;
  background: #111;
  border-radius: 1.9em;
  padding: 5px;
  box-sizing: border-box;
}
.s17 .phone-screen {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 1.6em;
  background: url('images/phone-screen-photo-web.jpg') center / cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.s17 .phone-cmc {
  font-family: var(--font-accent);
  font-weight: 400;
  font-style: normal;
  font-size: 2.85em;
  color: var(--cream-khaki);
  letter-spacing: 0;
  line-height: 1;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  user-select: none;
}

/* ── S18 closing (khaki) ── */
.s18 {
  background: var(--slide-khaki);
  display: flex;
  align-items: center;
  justify-content: center;
}
.s18 nav {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2.87em 5.2em;
  z-index: 2;
}
.s18 nav a {
  font-family: var(--font-accent);
  font-weight: 400;
  font-style: normal;
  font-size: var(--type-cmc-nav);
  color: var(--cream-khaki);
  text-decoration: none;
  flex: 0 0 auto;
  line-height: 1;
}
.s18 nav a:hover { text-decoration: underline; }
.s18 .center-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.s18 .cmc-big {
  font-family: var(--font-accent);
  font-weight: 400;
  font-style: normal;
  font-size: var(--type-cmc-logo);
  color: var(--cream-khaki);
  letter-spacing: 0;
  line-height: 1;
}
.s18 .cmc-sub {
  font-family: var(--font-body);
  font-weight: 300;
  font-style: normal;
  font-size: var(--type-hero-lead);
  color: var(--cream-khaki);
  margin-top: -0.5em;
  letter-spacing: 0;
  text-align: center;
  padding: 0 2em;
}

/* links */
.listen-link { color: inherit; text-decoration: underline; }
.listen-link:hover { opacity: 0.75; }
.trailer-link { color: inherit; text-decoration: none; }
.trailer-link:hover { opacity: 0.75; }

/* landing */
.landing {
  min-height: 100vh;
  width: 100%;
  background: #0c0c0c url('images/landing-bg-web.jpg') center / cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
}
.landing-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 3.5em;
  padding: 2em;
}
.landing-headline {
  font-family: var(--font-accent);
  font-weight: 400;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: clamp(1.8rem, 4.2vw, 3.2rem);
  color: var(--cream);
  line-height: 1.07;
  margin: 0;
  max-width: min(95vw, 52rem);
}
.lang-choose {
  display: flex;
  width: 100%;
  max-width: min(90vw, 48rem);
  justify-content: space-evenly;
  align-items: center;
  text-align: center;
}
.lang-choose a {
  flex: 1 1 0;
  font-family: var(--font-accent);
  font-style: normal;
  font-size: 2em;
  color: var(--cream);
  text-decoration: none;
  text-align: center;
}
.lang-choose a:hover { text-decoration: underline; opacity: 0.85; }

@media (min-width: 769px) {
  .s1 h1 { white-space: nowrap; }
  .lang-uk .s1 h1 { white-space: normal; }
  .s3 .quote-line-nowrap { white-space: nowrap; }
  .s14 .intro-italic { white-space: nowrap; }
  .s18 .cmc-sub { white-space: nowrap; }
  .landing-headline { white-space: nowrap; }
  .lang-uk .s8 .text-half h2 {
    font-size: clamp(3em, 4.2vw, 4em);
    white-space: nowrap;
  }
  .lang-uk .s15 .market-desc {
    font-size: 0.72em;
    line-height: 1.45;
  }
  .lang-uk .s17 .text-side .note {
    margin-top: 2em;
  }
}

@media (max-width: 768px) {
  /* База: ширина = екран, більший em для читабельності */
  .deck {
    width: 100%;
    max-width: 100vw;
    font-size: clamp(13px, 3.85vw, 18px);
  }

  /* Текстові слайди — висота за контентом, без обрізання */
  .section {
    aspect-ratio: auto;
    min-height: auto;
    height: auto;
    overflow: visible;
    padding-bottom: max(2em, env(safe-area-inset-bottom, 0px));
  }

  /* Фото / baked — зберігаємо 16:9 (крім s1 hero) */
  .section.slide-photo:not(.s8):not(.s1),
  .section.slide-baked,
  .section.slide-video {
    aspect-ratio: 16 / 9;
    min-height: 56.25vw;
    overflow: hidden;
    padding-bottom: 0;
  }

  /* ── S1 Hero ── */
  .s1 {
    aspect-ratio: auto;
    min-height: 100svh;
    overflow: visible;
    padding: max(2.5em, calc(1.5em + env(safe-area-inset-top, 0px))) 1.25em max(2.5em, calc(2em + env(safe-area-inset-bottom, 0px)));
    justify-content: center;
    align-items: center;
    text-align: center;
  }
  .s1 h1 {
    font-size: clamp(2.2em, 8.5vw, 3.6em);
    line-height: 1.12;
    letter-spacing: 0;
    padding: 0;
    margin: 0 auto;
    width: 100%;
    max-width: 100%;
    text-align: center;
    text-wrap: balance;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
  }
  .s1 .tagline {
    font-size: clamp(0.92em, 2.7vw, 1.1em);
    max-width: 88%;
    margin: 1em auto 0;
    font-weight: 400;
    line-height: 1.38;
    text-align: center;
    align-self: center;
    text-wrap: balance;
  }
  .s1 .subtitle {
    font-size: clamp(0.88em, 2.5vw, 1.05em);
    max-width: 88%;
    font-weight: 400;
    font-style: italic;
    line-height: 1.32;
    margin: 1.2em auto 0;
    text-align: center;
    align-self: center;
    text-wrap: balance;
  }
  .lang-uk .s1 h1 {
    font-size: clamp(2em, 7.5vw, 3.2em);
    text-align: center;
    margin: 0 auto;
    padding: 0;
    padding-bottom: 0.16em;
    width: 100%;
    max-width: 100%;
    letter-spacing: -0.01em;
    text-wrap: balance;
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: none;
  }
  .lang-uk .s1 .tagline {
    font-size: clamp(0.8em, 2.35vw, 0.96em);
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    align-self: center;
  }
  .lang-uk .s1 .subtitle {
    font-size: clamp(0.76em, 2.17vw, 0.91em);
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    align-self: center;
  }

  /* ── S2 / S4 numbered ── */
  .s2, .s4 { padding: 2em 1.6em max(calc(2.5em + env(safe-area-inset-bottom, 0px)), 4em); }
  .section-num-title {
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25em 0.65em;
    margin-bottom: 1.4em;
  }
  .section-num-title .num,
  .section-num-title .title { font-size: clamp(2.6em, 8.5vw, 3.6em); line-height: 1; }
  .s2 .body-text,
  .s4 .body-text {
    max-width: 100%;
    margin-left: 0;
    font-size: var(--type-body);
    line-height: 1.65;
  }
  .s2 .body-text p,
  .s4 .body-text p { margin-bottom: 0.9em; }

  /* ── S3 quote ── */
  .s3 { aspect-ratio: 16 / 9; min-height: 56.25vw; overflow: hidden; }
  .s3 .slide-center { padding: 0 1.5em; }
  .s3 .slide-center blockquote {
    font-size: clamp(1.05em, 3.2vw, 1.35em);
    max-width: 100%;
    line-height: 1.65;
  }

  /* ── S5 — baked on mobile, не ламати absolute fallback ── */
  .s5:not(.slide-baked) .quote-small,
  .s5:not(.slide-baked) h2 {
    position: static;
    transform: none;
    max-width: 100%;
    padding: 1.5em;
  }
  .s5:not(.slide-baked) h2 {
    text-align: right;
    font-size: 3.2em;
    padding-top: 0;
  }

  /* ── S6 PROJECT ── */
  .s6 {
    padding: 2em 1.6em max(calc(2.5em + env(safe-area-inset-bottom, 0px)), 4em);
    justify-content: flex-start;
    gap: 0;
  }
  .s6 .intro-row {
    flex-direction: column;
    gap: 0.6em;
  }
  .s6 .intro-row .num { font-size: clamp(2.4em, 7.5vw, 3.4em); }
  .s6 .intro-row .intro-text {
    max-width: 100%;
    font-size: 1em;
    padding-top: 0;
  }
  .s6 h2 {
    font-size: clamp(2.4em, 8vw, 3.4em);
    margin: 0.8em 0 0;
    letter-spacing: -0.01em;
  }
  .three-cols {
    grid-template-columns: 1fr;
    gap: 1.4em;
    margin-top: 1.6em;
  }
  .three-cols .col { padding-right: 0; }

  /* ── S7 performance: photo bg on mobile, no video ── */
  .section.slide-photo.s7.slide-video,
  .lang-uk .s7.slide-video,
  .lang-en .s7.slide-video {
    aspect-ratio: 16 / 9;
    min-height: 56.25vw;
    background-color: #111;
    background-image: url('images/5Y8A0294-s7-mobile-web.jpg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    padding: 0;
    justify-content: center;
  }
  .s7 .slide-video-bg { display: none; }
  .s7.slide-video .slide-center { display: flex; padding: 0 1.5em; }
  .s7 {
    --s7-title: clamp(3.4em, 9.5vw, 5em);
    --s7-sub: calc(var(--s7-title) * 0.311);
  }
  .s7 h2 { margin-bottom: 0.05em; }
  .s9 h2, .s11 h2 { font-size: 3.6em; }
  .s9 .sub, .s11 .sub { font-size: 1em; }

  /* ── S8 split ── */
  .s8 {
    flex-direction: column;
    aspect-ratio: auto;
    min-height: auto;
    padding-bottom: 0;
  }
  .s8 .photo-half { display: none; }
  .s8 .text-half {
    width: 100%;
    padding: 1.8em 1.6em max(calc(3em + env(safe-area-inset-bottom, 0px)), 5em);
    justify-content: flex-start;
  }
  /* s7 shows title on dark bg — hide duplicate in s8 on mobile */
  .s8 .text-half h2 { display: none; }
  .s8 .text-half p {
    font-family: var(--font-body);
    font-weight: 400;
    font-style: normal;
    font-size: clamp(0.98em, 3vw, 1.1em);
    max-width: 100%;
    margin-bottom: 0.7em;
    line-height: 1.5;
  }
  .s8 .text-half p:last-child { margin-bottom: 0; }

  /* ── S10 / S12 text ── */
  .s10, .s12 { padding: 2em 1.6em max(calc(2.5em + env(safe-area-inset-bottom, 0px)), 4em); }
  .s12::before {
    left: 1.6em;
    right: 1.6em;
    top: 1.6em;
    bottom: 1.6em;
    width: auto;
  }
  .s10 p, .s10 blockquote, .s12 p, .s12 blockquote {
    max-width: 100%;
    margin-left: 0;
    font-size: 1.08em;
    line-height: 1.65;
    margin-bottom: 0.9em;
  }
  .s10 blockquote, .s12 blockquote {
    font-size: 1.12em;
    line-height: 1.55;
  }
  .s10 .cta { font-size: 1.08em; }

  /* ── S13 team ── */
  .s13 {
    flex-direction: column;
    align-items: stretch;
    padding: 2em 1.6em max(calc(2.5em + env(safe-area-inset-bottom, 0px)), 4em);
    gap: 1.6em;
    aspect-ratio: auto;
  }
  .s13 .photo-box {
    width: 100%;
    max-width: 100%;
    flex: none;
    padding: 1em;
  }
  .s13 .photo-box img {
    width: 100%;
    height: auto;
    display: block;
  }
  .s13 .text-box {
    flex: none;
    width: 100%;
  }
  .s13 .text-box .num,
  .s13 .text-box h2 { font-size: clamp(2.4em, 7.5vw, 3.2em); line-height: 1; }
  .s13 .text-box h2 { margin-bottom: 1em; }
  .s13 .text-box blockquote { font-size: 1em; margin-bottom: 1.2em; line-height: 1.55; }

  /* ── S14 bios ── */
  .s14 { padding: 2em 1.6em max(calc(2.5em + env(safe-area-inset-bottom, 0px)), 4em); }
  .s14 .intro-italic {
    max-width: 100%;
    font-size: 1.45em;
    line-height: 1.6;
    margin-bottom: 0.75em;
  }
  .s14 .team-member {
    max-width: 100%;
    font-size: 0.95em;
    line-height: 1.6;
    margin-bottom: 0.75em;
  }

  /* ── S15 market ── */
  .s15 { padding: 2em 1.6em max(calc(5em + env(safe-area-inset-bottom, 0px)), 6em); }
  .s15 .header-row {
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5em 0.8em;
    margin-bottom: 1.6em;
  }
  .s15 .header-row .num { font-size: clamp(2.4em, 7.5vw, 3.4em); }
  .s15 .header-row .title-small { font-size: clamp(1.05em, 3.2vw, 1.2em); font-weight: 500; }
  .s15 .header-row .title-big { font-size: clamp(1.85em, 6.5vw, 2.4em); line-height: 1; }
  .s15 .market-intro {
    max-width: 100%;
    font-size: clamp(1.15em, 4vw, 1.5em);
    margin-bottom: 2em;
  }
  .market-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2em 1.5em;
    margin-right: 0;
  }
  .market-grid::before { display: none; }
  .market-grid .market-col {
    padding-top: 0;
    padding-right: 0;
    border-left: 1px solid var(--text-dark);
    padding-left: 1em;
  }
  .market-grid .market-col::before,
  .market-grid .market-col::after { display: none; }
  .market-grid .market-name {
    position: static;
    min-height: 0;
    margin-bottom: 0.4em;
    font-size: 1.05em;
  }
  .market-grid .market-desc { font-size: 0.95em; }

  /* ── S16 baked ── */
  .s16:not(.slide-baked) .s16-header {
    left: 1.6em;
    right: 1.6em;
    top: 2em;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.3em;
  }
  .s16:not(.slide-baked) .num { font-size: 2.8em; }
  .s16:not(.slide-baked) h2 { font-size: 3em; text-align: left; }
  .s16:not(.slide-baked) blockquote {
    left: 1.6em;
    right: 1.6em;
    max-width: none;
    bottom: 2em;
    font-size: 0.9em;
    line-height: 1.55;
  }

  /* ── S17 patron + phone ── */
  .s17 {
    grid-template-columns: 1fr;
    aspect-ratio: auto;
    padding-bottom: 0;
  }
  .s17 .text-side {
    padding: 2em 1.6em max(calc(3em + env(safe-area-inset-bottom, 0px)), 4.5em);
    order: 1;
  }
  /* s16 baked photo already shows heading — hide duplicate on mobile */
  .s17 .text-side h2 { display: none; }
  .s17 .text-side p { font-size: 1em; max-width: 100%; line-height: 1.55; margin-bottom: 0.85em; }
  .s17 .text-side .note {
    font-size: 0.88em;
    margin-top: 0.75em;
    line-height: 1.45;
  }
  .s17 .phone-side {
    display: none;
  }

  /* ── S18 closing ── */
  .s18 {
    aspect-ratio: auto;
    min-height: 100svh;
    overflow: visible;
    flex-direction: column;
    align-items: stretch;
    justify-content: space-between;
    padding: max(2em, calc(1.5em + env(safe-area-inset-top, 0px))) 1.6em max(calc(4em + env(safe-area-inset-bottom, 0px)), 5em);
  }
  .s18 nav {
    position: static;
    padding: 0;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 0.5em;
    text-align: center;
    width: 100%;
    flex-shrink: 0;
  }
  .s18 nav a {
    font-size: clamp(1.05em, 3.6vw, 1.45em);
    flex: 1 1 0;
    text-align: center;
  }
  .s18 .center-logo {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2em 0;
  }
  .s18 .cmc-big { font-size: clamp(4em, 13vw, 5.5em); letter-spacing: 0; }
  .s18 .cmc-sub {
    font-size: clamp(0.95em, 3vw, 1.15em);
    margin-top: 0.4em;
    padding: 0 1em;
    text-wrap: balance;
  }

  /* ── Landing ── */
  .landing-inner { gap: 2.5em; padding: 2em 1.25em; }
  .landing-headline {
    font-size: clamp(2.4rem, 8.5vw, 3.6rem);
    line-height: 1.08;
    letter-spacing: 0.08em;
  }
  .lang-choose {
    flex-direction: column;
    gap: 1.5em;
    padding: 0 1.5em;
    max-width: 100%;
  }
  .lang-choose a {
    flex: none;
    width: 100%;
    font-size: 1.6em;
  }
}

/* Дуже вузькі екрани */
@media (max-width: 390px) {
  .deck { font-size: clamp(12px, 3.6vw, 16px); }
  .lang-uk .s1 h1 {
    font-size: clamp(1.85em, 7vw, 2.75em);
    padding: 0 0.15em;
  }
  .s1 .tagline { font-size: 0.9em; max-width: 92%; margin-top: 0.85em; }
  .s1 .subtitle { font-size: 0.86em; max-width: 92%; margin-top: 1em; }
  .lang-uk .s1 .tagline { font-size: 0.78em; max-width: 92%; }
  .lang-uk .s1 .subtitle { font-size: 0.75em; max-width: 92%; }
  .s8 .text-half { padding-bottom: max(calc(3.5em + env(safe-area-inset-bottom, 0px)), 5.5em); }
  .s15 { padding-bottom: max(calc(6em + env(safe-area-inset-bottom, 0px)), 7em); }
  .section-num-title .num,
  .section-num-title .title { font-size: clamp(2.3em, 8vw, 3.2em); }
  .s6 h2 { font-size: clamp(2.2em, 7.5vw, 3em); }
  .s10 p, .s10 blockquote, .s12 p, .s12 blockquote { font-size: 1.1em; }
  .s13 .text-box .num,
  .s13 .text-box h2 { font-size: clamp(2.2em, 7vw, 3em); }
  .s15 .header-row .title-big { font-size: clamp(1.65em, 6vw, 2.2em); }
  .s15 .market-grid { grid-template-columns: 1fr; gap: 1.4em; }
  .s15 .market-col { border-left: none; padding-left: 0; border-top: 1px solid var(--text-dark); padding-top: 1em; }
  .s15 .market-col:first-child { border-top: none; padding-top: 0; }
  .s18 .cmc-sub { font-size: clamp(0.92em, 3.2vw, 1.08em); margin-top: 0.45em; }
  .s18 nav a { font-size: clamp(0.98em, 3.4vw, 1.3em); }
  .landing-headline { font-size: clamp(2.4rem, 9.6vw, 3.7rem); letter-spacing: 0.08em; }
}