@font-face {
  font-family: 'Nexa';
  src: url('assets/fonts/Nexa-Book.woff2') format('woff2'),
       url('assets/fonts/Nexa-Book.woff') format('woff');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Nexa';
  src: url('assets/fonts/Nexa-Bold.woff2') format('woff2'),
       url('assets/fonts/Nexa-Bold.woff') format('woff');
  font-weight: 700; font-style: normal; font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; }
a { color: inherit; text-decoration: none; }
p { font-weight: 700; }

/* stencil keyword highlight */
.stencil { position: relative; display: inline; isolation: isolate; }
.stencil::before { content: ''; position: absolute; inset: 52% -8px -4px -8px; background: #FFD700; transform: skewX(-16deg); z-index: -1; }

/* hero city name underline highlight */
.hero-em { position: relative; isolation: isolate; }
.hero-em::before { content: ''; position: absolute; inset: 52% -10px -6px -10px; transform: skewX(-16deg); z-index: -1; }
.stage[data-city="odesa"]    .hero-em::before { background: #0057B7; }
.stage[data-city="zhytomyr"] .hero-em::before { background: #FFD700; }

/* city-conditional content */
.stage[data-city="zhytomyr"] .if-odesa,
.stage[data-city="odesa"]    .if-zhytomyr { display: none; }

/* tab active state */
.tab[data-city="odesa"][aria-selected="true"]    { background: #0057B7; color: #fff; position: relative; }
.tab[data-city="zhytomyr"][aria-selected="true"] { background: #FFD700; color: #1f2227; position: relative; }
.tab[data-city="odesa"][aria-selected="true"]::after    { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: #0057B7; }
.tab[data-city="zhytomyr"][aria-selected="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: #FFD700; }
.tab[data-city="odesa"][aria-selected="true"]    .tab-sub { color: rgba(255,255,255,.8); }
.tab[data-city="zhytomyr"][aria-selected="true"] .tab-sub { color: #54585f; }

/* step 03 heading highlight */
.step-signal h3 { position: relative; isolation: isolate; }
.step-signal h3::before { content: ''; position: absolute; inset: 52% -6px -4px -6px; transform: skewX(-16deg); z-index: -1; }
body[data-city="odesa"]    .step-signal h3::before { background: #0057B7; }
body[data-city="zhytomyr"] .step-signal h3::before { background: #FFD700; }

/* more-info button arrow */
.more-btn::after { content: '↓'; font-size: 11px; display: inline-block; transition: transform .2s; }
.more-btn[aria-expanded="true"]::after { transform: rotate(180deg); }

/* expandable step details */
.step-extra { max-height: 0; overflow: hidden; transition: max-height .35s ease; border-top: 0 solid #8b8f96; }
.step-extra.open { max-height: 4000px; border-top-width: 1.5px; padding-top: 12px; margin-top: 2px; }
.step-extra h4 { font-weight: 700; font-size: 14px; margin: 0 0 4px; }
.step-extra h4 + h4, .step-extra p + h4 { margin-top: 12px; }
.step-extra p { font-size: 13px; color: #54585f; line-height: 1.45; margin: 0; }

/* face avatar placeholder */
.face { aspect-ratio: 1; background: #ece7da; border: 1.5px dashed #8b8f96; border-radius: 4px; position: relative; }
.face::before { content: ""; position: absolute; left: 50%; top: 28%; transform: translateX(-50%); width: 36%; height: 36%; border-radius: 50%; background: #8b8f96; opacity: .3; }
.face::after  { content: ""; position: absolute; left: 50%; bottom: 8%; transform: translateX(-50%); width: 60%; height: 30%; border-radius: 50% 50% 0 0; background: #8b8f96; opacity: .3; }