/*
Theme Name: Turkish Hair Experts
Theme URI: https://turkishhairexperts.com/
Author: Turkish Hair Experts
Description: Lightweight, conversion-focused theme for Turkish Hair Experts Nairobi and Kampala.
Version: 0.7.0
Requires at least: 6.4
Requires PHP: 8.1
Text Domain: turkish-hair-experts
*/

:root {
  --the-navy: #111111;
  --the-navy-soft: #242424;
  --the-blue: #df0712;
  --the-cyan: #ff4a51;
  --the-gold: #d8b06c;
  --the-cream: #f7f5f2;
  --the-white: #fff;
  --the-ink: #171717;
  --the-muted: #666;
  --the-line: rgba(17, 17, 17, .12);
  --the-radius: 24px;
  --the-shadow: 0 24px 70px rgba(7, 21, 35, .14);
  --the-wrap: min(1180px, calc(100% - 40px));
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--the-ink); background: var(--the-white); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.65; }
body.menu-open { overflow: hidden; }
img { max-width: 100%; height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.the-wrap { width: var(--the-wrap); margin-inline: auto; }
.the-section { padding: 96px 0; }
.the-section--cream { background: var(--the-cream); }
.the-section--dark { color: var(--the-white); background: var(--the-navy); }
.the-eyebrow { margin: 0 0 12px; color: var(--the-blue); font-size: .76rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.the-section--dark .the-eyebrow { color: var(--the-cyan); }
.the-title { max-width: 760px; margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(2.2rem, 5vw, 4.25rem); line-height: 1.04; letter-spacing: -.035em; }
.the-lead { max-width: 700px; margin: 22px 0 0; color: var(--the-muted); font-size: 1.08rem; }
.the-section--dark .the-lead { color: rgba(255,255,255,.72); }
.the-button { display: inline-flex; min-height: 52px; align-items: center; justify-content: center; gap: 10px; padding: 13px 22px; border: 1px solid transparent; border-radius: 999px; color: var(--the-white); background: var(--the-blue); font-weight: 800; text-decoration: none; cursor: pointer; transition: transform .2s ease, background .2s ease, box-shadow .2s ease; }
.the-button:hover { transform: translateY(-2px); background: #b90009; box-shadow: 0 12px 30px rgba(223,7,18,.25); }
.the-button--light { color: var(--the-navy); background: var(--the-white); }
.the-button--ghost { color: var(--the-white); background: transparent; border-color: rgba(255,255,255,.3); }

.site-header { position: fixed; z-index: 90; inset: 0 0 auto; color: var(--the-ink); background: rgba(255,255,255,.97); border-bottom: 1px solid rgba(17,17,17,.08); transition: box-shadow .25s ease; }
.site-header.is-scrolled { box-shadow: 0 10px 40px rgba(0,0,0,.12); backdrop-filter: blur(14px); }
.header-inner { display: flex; min-height: 84px; align-items: center; gap: 28px; }
.site-brand { display: inline-flex; width: 230px; height: 70px; align-items: center; color: var(--the-ink); font-family: Georgia, serif; font-size: 1.25rem; font-weight: 700; line-height: 1.05; text-decoration: none; }
.site-brand img { display: block; width: 100%; max-height: 66px; object-fit: contain; object-position: left center; }
.site-nav { margin-left: auto; }
.site-nav ul { display: flex; align-items: center; gap: 25px; padding: 0; margin: 0; list-style: none; }
.site-nav a { font-size: .92rem; font-weight: 700; text-decoration: none; }
.site-nav a:hover { color: var(--the-blue); }
.menu-toggle { display: none; margin-left: auto; padding: 10px; border: 0; color: var(--the-ink); background: transparent; font-size: 1.5rem; }

.hero { position: relative; display: grid; height: 100svh; min-height: 760px; align-items: center; overflow: hidden; color: var(--the-white); background: var(--the-navy); isolation: isolate; }
.hero-media { position: absolute; inset: 0; }
.hero-media::before { content: ""; position: absolute; z-index: 1; inset: 0; background: linear-gradient(90deg, rgba(8,8,8,.98) 0%, rgba(8,8,8,.93) 37%, rgba(8,8,8,.52) 66%, rgba(8,8,8,.3) 100%), linear-gradient(0deg, rgba(8,8,8,.9), transparent 58%); }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero-fallback { position: absolute; inset: 0; background: radial-gradient(circle at 78% 32%, rgba(223,7,18,.28), transparent 28%), linear-gradient(135deg, #080808, #252525 65%, #5e0004); }
.hero-inner { position: relative; z-index: 5; width: calc(100% - 44px); max-width: none; margin: 0; padding: 110px 0 30px 2.2vw; }
.hero-copy { position: relative; z-index: 7; max-width: min(49vw, 720px); }
.hero h1 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(3.35rem, 6.2vw, 6.5rem); line-height: .91; letter-spacing: -.058em; text-wrap: balance; }
.hero h1 em { color: #ff343d; font-weight: inherit; }
.hero p { max-width: 670px; margin: 26px 0 0; color: rgba(255,255,255,.82); font-size: clamp(1.05rem, 2vw, 1.25rem); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.trust-row { display: none; }
.trust-item { padding: 20px; background: rgba(7,21,35,.7); }
.trust-item strong { display: block; color: var(--the-white); font-family: Georgia, serif; font-size: 1.55rem; }
.trust-item span { color: rgba(255,255,255,.62); font-size: .84rem; }

.hero-stage { position: absolute; z-index: 3; top: 92px; right: 1.2vw; bottom: 22px; width: 52vw; pointer-events: none; }
.hero-glow { position: absolute; inset: 5% 4% 0; border-radius: 48% 52% 38% 62%; background: radial-gradient(circle at 62% 45%, rgba(223,7,18,.42), transparent 45%), radial-gradient(circle at 48% 56%, rgba(216,176,108,.2), transparent 58%); filter: blur(28px); animation: hero-breathe 5.5s ease-in-out infinite; }
.hero-scene { position: absolute; inset: 5% 1% 3% 9%; overflow: hidden; border: 1px solid rgba(255,255,255,.18); border-radius: 42% 58% 45% 55% / 55% 42% 58% 45%; opacity: .34; box-shadow: 0 30px 100px rgba(0,0,0,.65); animation: hero-reveal 1.4s .15s both; }
.hero-scene img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.88) contrast(1.07); }
.hero-scene::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8,8,8,.65), transparent 35%), linear-gradient(0deg, rgba(8,8,8,.45), transparent 45%); }
.hero-person { position: absolute; overflow: hidden; border: 1px solid rgba(255,255,255,.38); border-radius: 26px; background-repeat: no-repeat; background-color: #1c1c1c; box-shadow: 0 24px 65px rgba(0,0,0,.5); opacity: 0; transform: translateY(24px) scale(.88); animation: hero-pop 1s cubic-bezier(.2,.8,.2,1) forwards; }
.hero-person::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), inset 0 -55px 70px rgba(0,0,0,.32); }
.hero-person span { position: absolute; z-index: 2; left: 14px; bottom: 12px; padding: 6px 10px; border-radius: 999px; color: white; background: rgba(10,10,10,.72); backdrop-filter: blur(9px); font-size: .67rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.hero-compare { position: absolute; z-index: 3; top: 3%; right: 1%; width: min(34vw, 500px); aspect-ratio: 2 / 1; overflow: hidden; border: 1px solid rgba(255,255,255,.42); border-radius: 28px; background: #1c1c1c; box-shadow: 0 28px 75px rgba(0,0,0,.55); opacity: 0; transform: translateY(24px) scale(.88); animation: hero-pop 1s .65s cubic-bezier(.2,.8,.2,1) forwards; }
.hero-compare img { width: 100%; height: 100%; object-fit: contain; object-position: center; }
.hero-compare::after { content: "Real before • Real after"; position: absolute; left: 50%; bottom: 10px; translate: -50% 0; padding: 6px 11px; border-radius: 999px; color: white; background: rgba(10,10,10,.74); backdrop-filter: blur(8px); font-size: .64rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.hero-person--ug-before { top: 31%; left: 0; width: 30%; height: 39%; background-size: 365% auto; background-position: 0 23%; animation-delay: 1.2s; }
.hero-person--ug-after { top: 27%; right: 25%; width: 31%; height: 41%; background-size: 365% auto; background-position: 100% 23%; animation-delay: 1.7s; }
.hero-person--barry { right: 0; bottom: 4%; width: 31%; height: 39%; background-size: 370% auto; background-position: 73% 22%; animation-delay: 2.2s; }
.hero-person--usa { left: 22%; bottom: 0; width: 31%; height: 39%; background-size: 350% auto; background-position: 100% 12%; animation-delay: 2.7s; }
.hero-person--woman { left: 1%; bottom: 2%; width: 28%; height: 36%; background-size: cover; background-position: center top; animation-delay: 3.2s; }
.hero-particles { position: absolute; z-index: 4; inset: 0; width: 100%; height: 100%; opacity: .82; }
@keyframes hero-pop { 0% { opacity: 0; transform: translateY(26px) scale(.84); filter: blur(8px); } 70% { opacity: 1; transform: translateY(-5px) scale(1.03); filter: blur(0); } 100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); } }
@keyframes hero-reveal { from { opacity: 0; transform: scale(1.08); filter: blur(9px); } to { opacity: .34; transform: scale(1); filter: blur(0); } }
@keyframes hero-breathe { 50% { transform: scale(1.08) rotate(2deg); opacity: .78; } }

.proof-grid, .journey-grid, .locations-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 48px; }
.proof-card, .journey-card, .location-card { overflow: hidden; border: 1px solid var(--the-line); border-radius: var(--the-radius); background: var(--the-white); box-shadow: 0 12px 40px rgba(7,21,35,.06); }
.proof-visual { aspect-ratio: 4 / 3; background: linear-gradient(135deg, #dce7ec, #9ac6d8); }
.proof-visual img { width: 100%; height: 100%; object-fit: cover; }
.proof-body, .journey-card, .location-body { padding: 28px; }
.proof-body h3, .journey-card h3, .location-body h3 { margin: 0 0 8px; font-family: Georgia, serif; font-size: 1.5rem; }
.proof-body p, .journey-card p, .location-body p { margin: 0; color: var(--the-muted); }
.journey-card { position: relative; }
.journey-number { display: inline-grid; width: 40px; height: 40px; place-items: center; margin-bottom: 30px; border-radius: 50%; color: var(--the-white); background: var(--the-blue); font-weight: 900; }

.split { display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 70px; }
.split-visual { min-height: 560px; overflow: hidden; border-radius: 34px; background: linear-gradient(150deg, #cce1e9, #487b92); box-shadow: var(--the-shadow); }
.split-visual img { width: 100%; height: 100%; min-height: 560px; object-fit: cover; }
.check-list { display: grid; gap: 18px; padding: 0; margin: 34px 0 0; list-style: none; }
.check-list li { position: relative; padding-left: 34px; }
.check-list li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--the-blue); font-weight: 900; }

.location-card { position: relative; min-height: 430px; color: white; border: 0; background: var(--the-navy-soft); }
.locations-grid { grid-template-columns: repeat(2, 1fr); }
.location-card::before { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(4,14,24,.95), rgba(4,14,24,.16)); }
.location-card img { position: absolute; width: 100%; height: 100%; object-fit: cover; }
.location-body { position: absolute; z-index: 1; inset: auto 0 0; }
.location-body p { color: rgba(255,255,255,.7); }

.cta-panel { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 30px; padding: 54px; border-radius: 32px; color: white; background: linear-gradient(120deg, var(--the-navy), #12445d); box-shadow: var(--the-shadow); }
.cta-panel h2 { max-width: 760px; margin: 0; font-family: Georgia, serif; font-size: clamp(2rem, 4vw, 3.5rem); line-height: 1.05; }

.site-footer { padding: 68px 0 26px; color: rgba(255,255,255,.7); background: #040e18; }
.footer-grid { display: grid; grid-template-columns: 1.4fr repeat(2, 1fr); gap: 50px; }
.footer-grid h3 { margin: 0 0 14px; color: white; }
.footer-grid ul { padding: 0; margin: 0; list-style: none; }
.footer-grid a { text-decoration: none; }
.footer-bottom { padding-top: 28px; margin-top: 50px; border-top: 1px solid rgba(255,255,255,.12); font-size: .84rem; }

.ask-the-launch { position: fixed; z-index: 110; right: 20px; bottom: 20px; display: flex; align-items: center; gap: 11px; padding: 10px 17px 10px 10px; border: 0; border-radius: 999px; color: white; background: var(--the-navy); box-shadow: 0 18px 45px rgba(4,14,24,.3); font-weight: 900; cursor: pointer; }
.ask-the-mark { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 50%; color: white; background: linear-gradient(135deg, var(--the-blue), #ff545b); }
.ask-the-panel { position: fixed; z-index: 120; right: 20px; bottom: 82px; display: none; width: min(390px, calc(100% - 28px)); overflow: hidden; border: 1px solid rgba(255,255,255,.15); border-radius: 24px; background: white; box-shadow: 0 28px 80px rgba(4,14,24,.32); }
.ask-the-panel.is-open { display: block; animation: the-rise .22s ease-out; }
@keyframes the-rise { from { opacity: 0; transform: translateY(12px); } }
.ask-the-head { display: flex; align-items: center; gap: 12px; padding: 18px; color: white; background: var(--the-navy); }
.ask-the-head strong { display: block; }
.ask-the-head small { display: block; color: rgba(255,255,255,.63); }
.ask-the-close { margin-left: auto; border: 0; color: white; background: transparent; font-size: 1.4rem; cursor: pointer; }
.ask-the-body { max-height: 62vh; overflow-y: auto; padding: 18px; }
.ask-message { padding: 13px 15px; margin: 0 0 12px; border-radius: 16px 16px 16px 4px; background: #eff6f8; font-size: .92rem; }
.ask-options { display: grid; gap: 8px; }
.ask-option { padding: 11px 13px; border: 1px solid var(--the-line); border-radius: 12px; color: var(--the-ink); background: white; text-align: left; cursor: pointer; }
.ask-option:hover { border-color: var(--the-blue); color: var(--the-blue); }
.ask-note { margin: 14px 0 0; color: var(--the-muted); font-size: .72rem; }

@media (max-width: 900px) {
  .the-section { padding: 72px 0; }
  .menu-toggle { display: inline-block; }
  .header-cta { display: none; }
  .site-nav { position: fixed; inset: 84px 14px auto; display: none; padding: 24px; border-radius: 20px; background: var(--the-navy); box-shadow: var(--the-shadow); }
  .site-nav.is-open { display: block; }
  .site-nav ul { align-items: stretch; flex-direction: column; }
  .hero { min-height: 760px; }
  .hero-stage { right: -5vw; width: 56vw; opacity: .76; }
  .hero-copy { max-width: 54vw; }
  .trust-row { grid-template-columns: repeat(2, 1fr); }
  .proof-grid, .journey-grid { grid-template-columns: 1fr 1fr; }
  .split { grid-template-columns: 1fr; gap: 40px; }
  .split-visual, .split-visual img { min-height: 420px; }
}

@media (max-width: 620px) {
  :root { --the-wrap: min(100% - 28px, 1180px); }
  .header-inner { min-height: 74px; }
  .site-brand img { max-height: 44px; }
  .site-nav { top: 74px; }
  .hero { height: 100svh; min-height: 780px; align-items: start; }
  .hero-inner { width: calc(100% - 24px); padding: 100px 0 0 12px; }
  .hero-copy { max-width: 94vw; }
  .hero h1 { max-width: 94vw; font-size: clamp(2.8rem, 13.2vw, 4.25rem); line-height: .9; }
  .hero-copy > p:not(.the-eyebrow) { max-width: 92vw; margin-top: 16px; font-size: .92rem; line-height: 1.5; }
  .hero-actions { margin-top: 20px; }
  .hero-actions .the-button { width: 100%; }
  .hero-stage { top: 53%; right: -3%; bottom: 1.5%; width: 106%; height: auto; opacity: 1; }
  .hero-scene { inset: 3% 3% 1% 5%; opacity: .25; }
  .hero-compare { top: 0; right: 2%; width: 58%; border-radius: 18px; }
  .hero-person { border-radius: 18px; }
  .hero-person span { left: 8px; bottom: 7px; padding: 4px 7px; font-size: .5rem; }
  .hero-person--ug-before { top: 24%; left: 1%; width: 29%; height: 42%; }
  .hero-person--ug-after { top: 27%; right: 31%; width: 29%; height: 43%; }
  .hero-person--barry { right: 1%; bottom: 1%; width: 29%; height: 42%; }
  .hero-person--usa { left: 35%; bottom: 0; width: 29%; height: 41%; }
  .hero-person--woman { left: 1%; bottom: 0; width: 29%; height: 39%; }
  .trust-row { margin-top: 48px; }
  .trust-item { padding: 15px; }
  .trust-item strong { font-size: 1.22rem; }
  .proof-grid, .journey-grid, .locations-grid, .footer-grid { grid-template-columns: 1fr; }
  .location-card { min-height: 360px; }
  .cta-panel { grid-template-columns: 1fr; padding: 34px 25px; }
  .ask-the-launch span:last-child { display: none; }
  .ask-the-launch { padding-right: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-person, .hero-scene, .hero-glow { animation: none; opacity: 1; transform: none; filter: none; }
  .hero-scene { opacity: .34; }
  .hero-particles { display: none; }
}

/* v0.5 cinematic flashcard sequence */
.hero-scene { inset: 5% 1% 3% 4%; opacity: .52; }
.hero-flash-stack { position: absolute; z-index: 6; top: 50%; right: 2%; width: clamp(185px, 18vw, 250px); height: clamp(250px, 27vw, 355px); transform: translateY(-50%); perspective: 1000px; }
.hero-flash-card { --delay: 0s; position: absolute; inset: 0; overflow: hidden; border: 1px solid rgba(255,255,255,.5); border-radius: 28px; background-color: #eee; background-repeat: no-repeat; box-shadow: 0 28px 78px rgba(0,0,0,.62); opacity: 0; transform: translate3d(45px,22px,0) rotateY(-9deg) scale(.88); animation: hero-flash 30s var(--delay) infinite cubic-bezier(.2,.76,.2,1); }
.hero-flash-card::before { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.38), transparent 35%); }
.hero-flash-card::after { content: attr(data-label); position: absolute; left: 13px; bottom: 12px; padding: 7px 11px; border-radius: 999px; color: white; background: rgba(10,10,10,.78); backdrop-filter: blur(8px); font-size: .66rem; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.hero-flash-card:nth-child(even)::after { background: rgba(223,7,18,.86); }
.hero-flash-card--kenya-before { background-size: 205% 100%; background-position: left top; }
.hero-flash-card--kenya-after { background-size: 205% 100%; background-position: right top; }
.hero-flash-card--uganda-before { background-size: 372% auto; background-position: 0 22%; }
.hero-flash-card--uganda-after { background-size: 372% auto; background-position: 100% 22%; }
.hero-flash-card--usa-before { background-size: 100% 205%; background-position: center top; }
.hero-flash-card--usa-after { background-size: 100% 205%; background-position: center bottom; }
.hero-flash-card--woman-before { background-size: 305% 100%; background-position: left top; }
.hero-flash-card--woman-after { background-size: 305% 100%; background-position: right top; }
.hero-flash-card--barry-before { background-size: 310% auto; background-position: left 20%; }
.hero-flash-card--barry-after { background-size: 310% auto; background-position: right 20%; }
.hero-flash-progress { position: absolute; z-index: 8; right: calc(2% + clamp(185px, 18vw, 250px) / 2); bottom: 5%; display: flex; gap: 6px; transform: translateX(50%); }
.hero-flash-progress i { width: 5px; height: 5px; border-radius: 999px; background: rgba(255,255,255,.35); box-shadow: 0 0 12px rgba(255,255,255,.2); }
.hero-flash-progress i:nth-child(2n) { background: rgba(223,7,18,.8); }
@keyframes hero-flash {
  0%, 9.9%, 100% { opacity: 0; transform: translate3d(45px,22px,0) rotateY(-9deg) scale(.88); filter: blur(7px); }
  1.5%, 8.2% { opacity: 1; transform: translate3d(0,0,0) rotateY(0) scale(1); filter: blur(0); }
  9.2% { opacity: 0; transform: translate3d(-22px,-8px,0) rotateY(5deg) scale(.96); filter: blur(4px); }
}

@media (max-width: 620px) {
  .hero-stage { top: 52%; right: -1%; bottom: 1%; width: 102%; height: auto; opacity: 1; }
  .hero-scene { inset: 2% 2% 1% 1%; opacity: .46; }
  .hero-flash-stack { top: 51%; right: 4%; width: clamp(132px, 38vw, 170px); height: clamp(188px, 54vw, 235px); }
  .hero-flash-card { border-radius: 20px; }
  .hero-flash-card::after { left: 8px; bottom: 8px; padding: 5px 8px; font-size: .52rem; }
  .hero-flash-progress { right: calc(4% + clamp(132px, 38vw, 170px) / 2); bottom: 4%; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-flash-card { animation: none; display: none; }
.hero-flash-card:first-child { display: block; opacity: 1; transform: none; filter: none; }
}

/* v0.6 distributed flashcards and compact mobile composition */
.hero-flash-stack { inset: 0; width: auto; height: auto; transform: none; perspective: 1000px; }
.hero-flash-card { --card-x: 68%; --card-y: 30%; --from-x: 45px; --from-y: 22px; --card-rotate: -7deg; top: var(--card-y); left: var(--card-x); right: auto; bottom: auto; width: clamp(160px, 15vw, 215px); height: clamp(220px, 22vw, 300px); transform: translate3d(var(--from-x),var(--from-y),0) rotate(var(--card-rotate)) scale(.86); }
.hero-flash-card:nth-child(1) { --card-x: 4%; --card-y: 5%; --from-x: -55px; --from-y: -34px; --card-rotate: -7deg; }
.hero-flash-card:nth-child(2) { --card-x: 62%; --card-y: 4%; --from-x: 58px; --from-y: -38px; --card-rotate: 7deg; }
.hero-flash-card:nth-child(3) { --card-x: 2%; --card-y: 55%; --from-x: -60px; --from-y: 42px; --card-rotate: 6deg; }
.hero-flash-card:nth-child(4) { --card-x: 68%; --card-y: 54%; --from-x: 62px; --from-y: 42px; --card-rotate: -6deg; }
.hero-flash-card:nth-child(5) { --card-x: 10%; --card-y: 16%; --from-x: -48px; --from-y: -38px; --card-rotate: -5deg; }
.hero-flash-card:nth-child(6) { --card-x: 64%; --card-y: 14%; --from-x: 58px; --from-y: -40px; --card-rotate: 6deg; }
.hero-flash-card:nth-child(7) { --card-x: 4%; --card-y: 52%; --from-x: -58px; --from-y: 45px; --card-rotate: 5deg; }
.hero-flash-card:nth-child(8) { --card-x: 67%; --card-y: 50%; --from-x: 58px; --from-y: 44px; --card-rotate: -5deg; }
.hero-flash-card:nth-child(9) { --card-x: 7%; --card-y: 10%; --from-x: -58px; --from-y: -36px; --card-rotate: -6deg; }
.hero-flash-card:nth-child(10) { --card-x: 67%; --card-y: 51%; --from-x: 58px; --from-y: 42px; --card-rotate: 6deg; }
.hero-flash-card--uganda-before { background-size: 330% auto; background-position: 0 39%; }
.hero-flash-card--uganda-after { background-size: 330% auto; background-position: 100% 39%; }
.hero-flash-card--woman-before { background-size: 385% auto; background-position: 3% 50%; }
.hero-flash-card--woman-after { background-size: 385% auto; background-position: 100% 50%; }
.hero-flash-card--barry-before { background-size: 328% auto; background-position: 0 32%; }
.hero-flash-card--barry-after { background-size: 328% auto; background-position: 100% 32%; }
.hero-flash-progress { right: 50%; bottom: 2.5%; }
@keyframes hero-flash {
  0%, 9.9%, 100% { opacity: 0; transform: translate3d(var(--from-x),var(--from-y),0) rotate(var(--card-rotate)) scale(.86); filter: blur(7px); }
  1.5%, 8.2% { opacity: 1; transform: translate3d(0,0,0) rotate(0) scale(1); filter: blur(0); }
  9.2% { opacity: 0; transform: translate3d(calc(var(--from-x) * -.3),calc(var(--from-y) * -.3),0) rotate(calc(var(--card-rotate) * -.4)) scale(.96); filter: blur(4px); }
}

@media (max-width: 620px) {
  .hero-inner { padding-top: 84px; }
  .hero-copy { max-width: 96vw; }
  .hero h1 { max-width: 96vw; font-size: clamp(2.45rem, 11.4vw, 3.4rem); line-height: .91; }
  .hero .the-eyebrow { margin-bottom: 7px; font-size: .64rem; line-height: 1.35; }
  .hero-copy > p:not(.the-eyebrow) { max-width: 94vw; margin-top: 12px; font-size: .82rem; line-height: 1.42; }
  .hero-actions { display: grid; grid-template-columns: 1.08fr .92fr; gap: 8px; margin-top: 14px; }
  .hero-actions .the-button { min-height: 45px; padding: 9px 9px; font-size: .72rem; line-height: 1.15; }
  .hero-stage { top: 46%; bottom: 1%; }
  .hero-flash-card { width: clamp(104px, 29vw, 130px); height: clamp(145px, 40vw, 180px); border-radius: 17px; }
  .hero-flash-card:nth-child(1), .hero-flash-card:nth-child(3), .hero-flash-card:nth-child(5), .hero-flash-card:nth-child(7), .hero-flash-card:nth-child(9) { --card-x: 3%; --card-y: 8%; }
  .hero-flash-card:nth-child(2), .hero-flash-card:nth-child(4), .hero-flash-card:nth-child(6), .hero-flash-card:nth-child(8), .hero-flash-card:nth-child(10) { --card-x: 68%; --card-y: 54%; }
  .hero-flash-card::after { max-width: calc(100% - 16px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .hero-flash-progress { right: 50%; bottom: 1%; }
}