@font-face {
  font-family: 'Nexa';
  src: url('assets/font/nexa-light.otf') format('opentype');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Nexa';
  src: url('assets/font/Nexa Regular.otf') format('opentype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Nexa';
  src: url('assets/font/nexa-bold.otf') format('opentype');
  font-weight: 700; font-style: normal; font-display: swap;
}

html { scroll-behavior: smooth; }
body { overflow-x: clip; } /* prevent horizontal scroll from hero SVG bleed */
*, *::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: #FF9D5A; 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; }
.hero-em::before { background: #FF9D5A; }

/* step highlight */
.step-signal h3 { position: relative; isolation: isolate; }
.step-signal h3::before { content: ''; position: absolute; inset: 52% -6px -4px -6px; background: #FF9D5A; transform: skewX(-16deg); z-index: -1; }

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

/* step panel inner content typography */
#step-panel-inner h4 { font-weight: 700; font-size: 14px; margin: 0 0 4px; }
#step-panel-inner h4 + h4, #step-panel-inner p + h4, #step-panel-inner ul + h4 { margin-top: 12px; }
#step-panel-inner p { font-size: 13px; color: #54585f; line-height: 1.45; margin: 0; font-weight: 700; }
#step-panel-inner p + p { margin-top: 6px; }
#step-panel-inner ul { margin: 6px 0 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
#step-panel-inner li { font-size: 13px; color: #54585f; line-height: 1.45; font-weight: 700; padding-left: 14px; position: relative; }
#step-panel-inner li::before { content: '—'; position: absolute; left: 0; color: #8b8f96; }

/* active step card */
.step-card-active {
  background: #fde3c6;
  box-shadow: 0 0 0 2px #FF9D5A;
}

/* panel when open — matches active card */
#step-panel-inner {
  background-color: #fde3c6 !important;
  border-top: 3px solid #FF9D5A;
}

/* 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; }