/* ================================================================
   Septiembre Amarillo · Aspen · Los poderes secretos de los héroes reales
   Palette: navy + gold, warm cream surfaces
   ================================================================ */

:root {
  --navy: #0d1a5c;
  --navy-2: #14237a;
  --navy-3: #1b2f96;
  --navy-ink: #0a1440;
  --gold: #ffc72c;
  --gold-2: #f5b400;
  --gold-deep: #d69a00;
  --cream: #fdf9ee;
  --cream-2: #fbf1d6;
  --white: #ffffff;
  --line: rgba(13, 26, 92, 0.12);
  --shadow-soft: 0 24px 60px -24px rgba(10, 20, 64, 0.35);
  --shadow-card: 0 14px 34px -14px rgba(10, 20, 64, 0.28);

  --r-sm: 10px;
  --r-md: 18px;
  --r-lg: 28px;
  --r-xl: 40px;

  --f-display: "Poppins", "Archivo Black", system-ui, sans-serif;
  --f-body: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-headline: "Anton", var(--f-display);
  --f-script: "Caveat", cursive;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--f-body);
  background: var(--cream);
  color: var(--navy-ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
img { max-width: 100%; display: block; }

.app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ---------------------------- header / nav ---------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--navy);
}
.site-header-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.brand img { height: 40px; width: auto; }

.nav-tabs { display: flex; align-items: center; gap: 6px; }
.nav-desktop { display: flex; }
.nav-tab {
  appearance: none;
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  cursor: pointer;
  padding: 8px 12px 10px;
  border-radius: 0;
  font-size: 13.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.82);
  letter-spacing: 0.01em;
  transition: color 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
}
.nav-tab:hover { color: var(--white); }
.nav-tab.active { color: var(--white); font-weight: 700; border-bottom-color: var(--white); }
.nav-tab.disabled-tab { opacity: 0.75; }

.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  border: none;
  background: rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  cursor: pointer;
}
.hamburger span {
  display: block;
  height: 2px;
  width: 20px;
  margin: 0 auto;
  background: var(--white);
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.hamburger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.is-open span:nth-child(2) { opacity: 0; }
.hamburger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-drawer {
  display: none;
}

/* Interior pages (everything but Home) use a white header instead of navy. */
.site-header--light { background: var(--white); border-bottom: 1px solid var(--line); }
.site-header--light .nav-tab { color: rgba(13, 26, 92, 0.7); }
.site-header--light .nav-tab:hover { color: var(--navy); }
.site-header--light .nav-tab.active { color: var(--navy); border-bottom-color: var(--navy); }
.site-header--light .hamburger { background: rgba(13, 26, 92, 0.08); }
.site-header--light .hamburger span { background: var(--navy); }
.site-header--light .nav-drawer { background: var(--white); border-top: 1px solid var(--line); }

/* ---------------------------- page shell ---------------------------- */
.page { flex: 1; }
.container { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.container--wide { max-width: 1240px; }

/* ---------------------------- buttons ---------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 999px;
  border: none;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.btn:active { transform: translateY(1px); }
.btn-gold {
  background: var(--gold);
  color: var(--navy-ink);
  box-shadow: 0 12px 26px -10px rgba(214, 154, 0, 0.65);
}
.btn-gold:hover { background: var(--gold-2); box-shadow: 0 16px 32px -10px rgba(214, 154, 0, 0.75); }
.btn-navy {
  background: var(--navy);
  color: var(--white);
  box-shadow: 0 12px 26px -10px rgba(13, 26, 92, 0.55);
}
.btn-navy:hover { background: var(--navy-2); }
.btn-outline {
  background: transparent;
  color: var(--navy);
  border: 2px solid var(--navy);
}
.btn-outline:hover { background: var(--navy); color: var(--white); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ============================== HOME ============================== */
/* The hero photo already has the full campaign lockup baked in (tagline,
   yellow blob, headline, body copy), so it's just rendered at natural
   width with no crop or text overlay. */
.home-hero { background: var(--cream); }
.hero-media { display: block; width: 100%; }
.hero-media img { display: block; width: 100%; height: auto; }

/* Mobile uses a dedicated portrait creative (see JSX comment) instead of
   the desktop photo, so it stays hidden until the mobile breakpoint. */
.home-hero-mobile-only { display: none; }

.home-cta-section {
  padding: 40px 24px 64px;
  display: flex;
  justify-content: center;
}
.home-cta-row { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }

.home-cards {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px 100px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.promo-card {
  position: relative;
  border-radius: var(--r-xl);
  padding: 34px 30px;
  color: var(--white);
  overflow: hidden;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  cursor: pointer;
  border: none;
  text-align: left;
  box-shadow: var(--shadow-soft);
  transition: transform 0.2s ease;
}
.promo-card:hover { transform: translateY(-4px); }
.promo-card.card-navy { background: linear-gradient(135deg, var(--navy-3), var(--navy-ink)); }
.promo-card.card-gold { background: linear-gradient(135deg, var(--gold), var(--gold-deep)); color: var(--navy-ink); }
.promo-card .promo-tag {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.85;
  margin-bottom: 10px;
}
.promo-card h3 { font-family: var(--f-display); font-size: 26px; margin: 0 0 10px; line-height: 1.15; }
.promo-card p { margin: 0 0 18px; font-size: 14.5px; opacity: 0.92; max-width: 380px; }
.promo-card .promo-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 14px;
}
.promo-card.card-navy .promo-arrow { color: var(--gold); }
.promo-card.card-gold .promo-arrow { color: var(--navy-ink); }

/* ============================== BANNER (shared) ============================== */
/* Same technique as the home hero: the banner photo already has a built-in
   cream-to-photo fade on the left, so it's rendered at natural width (no
   crop) and the text sits inside that fade zone, vertically centered. */
.page-banner { position: relative; background: var(--white); }
.page-banner-media { display: block; width: 100%; }
.page-banner-media img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: left center;
}
.page-banner-content {
  position: absolute;
  left: 4%;
  top: 50%;
  transform: translateY(-50%);
  width: 48%;
  max-width: 640px;
  z-index: 1;
}
.page-kicker {
  display: inline-block;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-deep);
  background: rgba(255, 199, 44, 0.18);
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: clamp(6px, 1vw, 14px);
}
.page-title {
  font-family: var(--f-headline);
  font-weight: 400;
  font-size: clamp(26px, 4.8vw, 62px);
  color: var(--navy);
  margin: 0 0 clamp(8px, 1.2vw, 16px);
  line-height: 1.05;
}
.page-subtitle {
  font-family: var(--f-body);
  font-weight: 700;
  font-size: clamp(15px, 2vw, 19px);
  color: var(--navy);
  margin: 0 0 clamp(4px, 0.6vw, 8px);
}
.page-lead {
  font-size: clamp(14px, 1.9vw, 20px);
  line-height: 1.5;
  color: rgba(10, 20, 64, 0.8);
  margin: 0;
}

/* ============================== RULETA ============================== */

/* ---- Instructions: full-bleed gold section. Used to also carry a huge
   decorative (non-interactive) wheel bleeding off the right edge, but that
   duplicated the real, functional wheel just below it and confused people
   into thinking there were two wheels — removed. ---- */
.instructions-section {
  position: relative;
  background: var(--gold);
  overflow: hidden;
  padding: 72px 0;
  display: flex;
  align-items: center;
}
.instructions-grid { position: relative; z-index: 1; width: 100%; display: flex; justify-content: center; }
.instructions-copy { max-width: 480px; }
.instructions-copy h2 {
  font-family: var(--f-display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(30px, 4vw, 44px);
  color: var(--navy);
  margin: 0 0 16px;
  padding-bottom: 12px;
  position: relative;
  text-align: left;
}
.instructions-copy h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 90px;
  height: 4px;
  border-radius: 999px;
  background: var(--navy);
}
.instructions-copy p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--navy);
  margin: 0;
  text-align: left;
}


/* ---- The real, functional wheel: centered on a full-bleed blue section ---- */
.wheel-section { background: var(--navy-3); padding: 64px 0 72px; }
.wheel-section-inner { display: flex; flex-direction: column; align-items: center; }
.wheel-kicker {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(24px, 3vw, 34px);
  color: var(--white);
  text-transform: uppercase;
  margin: 0 0 32px;
  text-align: center;
}
.wheel-caption {
  margin: 28px 0 0;
  text-align: center;
  color: var(--white);
  line-height: 1.3;
}
.wheel-caption strong { display: block; font-size: clamp(22px, 2.8vw, 30px); font-weight: 800; }
.wheel-caption em {
  display: block;
  font-family: var(--f-body);
  font-style: normal;
  font-weight: 300;
  font-size: clamp(17px, 2vw, 22px);
  margin-top: 2px;
}

.wheel-stage { position: relative; display: flex; justify-content: center; }
.wheel-wrap {
  position: relative;
  width: min(620px, 90vw);
  height: min(620px, 90vw);
}
.wheel-pointer {
  position: absolute;
  top: -1%;
  left: 50%;
  transform: translateX(-50%);
  width: 9%;
  z-index: 3;
  filter: drop-shadow(0 6px 10px rgba(10,20,64,.35));
}
.wheel-disc {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  transition: transform 5.2s cubic-bezier(0.12, 0.72, 0.1, 1);
  box-shadow: 0 20px 50px -14px rgba(10,20,64,.45);
}
.wheel-disc img.wheel-base { width: 100%; height: 100%; border-radius: 50%; }
.wheel-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 15%;
  transform-origin: center;
  pointer-events: none;
}
.wheel-icon img { width: 100%; }

.spin-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 4;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
  width: 26%;
  transition: transform 0.15s ease;
  filter: drop-shadow(0 10px 18px rgba(214,154,0,.5));
}
.spin-btn:hover:not(:disabled) { transform: translate(-50%, -50%) scale(1.05); }
.spin-btn:disabled { cursor: not-allowed; filter: grayscale(0.4); opacity: 0.75; }

/* ---- power reveal modal ---- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 15, 40, 0.62);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: fadeIn 0.2s ease;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.power-card {
  background: var(--white);
  border-radius: var(--r-xl);
  padding: 40px 36px 32px;
  max-width: 440px;
  width: 100%;
  text-align: center;
  position: relative;
  box-shadow: 0 40px 90px -20px rgba(0,0,0,.5);
  animation: popIn 0.28s cubic-bezier(.2,.9,.3,1.3);
}
@keyframes popIn { from { opacity: 0; transform: scale(.92) translateY(10px); } to { opacity: 1; transform: scale(1) translateY(0); } }
.power-card .power-icon { width: 92px; margin: 0 auto 14px; }
.power-card .power-index {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 6px;
}
.power-card h3 { font-family: var(--f-display); font-size: 24px; color: var(--navy); margin: 0 0 18px; }
.power-card .power-prompt-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(10,20,64,.5);
  margin-bottom: 10px;
}
.power-card .power-question {
  font-size: 19px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--navy);
  margin: 0 0 24px;
  font-style: italic;
}
.power-card .power-answer {
  background: var(--cream-2);
  border-radius: var(--r-md);
  padding: 18px 20px;
  font-size: 16px;
  font-weight: 600;
  color: var(--navy-ink);
  margin: 0 0 26px;
  animation: fadeIn 0.3s ease;
}
.power-card .power-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: rgba(10,20,64,.08);
  color: var(--navy);
  font-size: 16px;
  cursor: pointer;
  line-height: 1;
}
.modal-close:hover { background: rgba(10,20,64,.16); }

/* ============================== HEROE ============================== */
/* Full-bleed yellow panel (form + intro), edge to edge, with a shallow
   curved bottom edge cut into the page. */
.heroe-panel-section {
  background: linear-gradient(160deg, var(--gold), var(--gold-2));
  padding: 48px 0 64px;
  border-radius: 0 0 50% 50% / 0 0 46px 46px;
}
.heroe-panel-top {
  display: grid;
  grid-template-columns: 0.95fr 1.15fr;
  gap: 40px;
  align-items: center;
  margin-bottom: 36px;
}
.heroe-panel-intro h2 {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(24px, 2.9vw, 34px);
  line-height: 1.2;
  color: var(--navy);
  margin: 0 0 12px;
}
.heroe-panel-intro p {
  font-size: 16.5px;
  line-height: 1.55;
  color: var(--navy);
  margin: 0;
  max-width: 420px;
}
.heroe-panel-photos img { width: 100%; display: block; }

.heroe-panel-bottom {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 40px;
  align-items: center;
  padding-top: 28px;
  border-top: 1px solid rgba(13, 26, 92, 0.2);
  margin-bottom: 24px;
}
.heroe-portrait-circle {
  width: 100%;
  max-width: 300px;
  aspect-ratio: 1;
  margin: 0 auto;
  border-radius: 50%;
  background: linear-gradient(180deg, #ffe38a, #ffd452);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
}
.heroe-portrait-circle img { width: 82%; height: auto; display: block; }

.heroe-form h3 {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 22px;
  color: var(--navy);
  letter-spacing: 0.02em;
  margin: 0 0 14px;
}
.heroe-form textarea {
  width: 100%;
  min-height: 110px;
  border-radius: var(--r-md);
  border: none;
  padding: 16px;
  font-family: var(--f-body);
  font-size: 15.5px;
  color: var(--navy-ink);
  resize: vertical;
  background: var(--white);
  box-shadow: var(--shadow-card);
  transition: box-shadow .15s ease;
}
.heroe-form textarea:focus { outline: none; box-shadow: 0 0 0 2px var(--navy-3); }
.form-meta {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  font-size: 12.5px;
  color: var(--navy);
  margin: 8px 0 16px;
}
.form-meta .char-count.limit { color: #7a1f0e; font-weight: 700; }
.form-success {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.55);
  border-radius: var(--r-md);
  padding: 14px 18px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--navy-ink);
  margin-top: 18px;
  animation: fadeIn 0.3s ease;
}
.form-success .check {
  flex: none;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--gold);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
}

.heroe-panel-foot {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  padding-top: 24px;
  border-top: 1px solid rgba(13, 26, 92, 0.2);
}
.foot-item { display: flex; align-items: center; gap: 16px; }
.foot-item img { width: 50px; height: 50px; flex: none; }
.foot-item span { font-size: 14.5px; line-height: 1.5; font-weight: 600; color: var(--navy); }

/* -------- Story cards (2-col grid, uniform cream cards) -------- */
.wall-section { padding: 56px 0 8px; background: var(--cream); }
.wall-board {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
}
.hero-card {
  background: var(--cream-2);
  border-radius: var(--r-lg);
  padding: 28px 24px 24px;
  text-align: center;
  box-shadow: var(--shadow-card);
}
.hero-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  margin-bottom: 14px;
}
.hero-card-icon img { width: 46px; height: 46px; }
.hero-card-title {
  font-size: 16px;
  color: var(--navy);
  margin: 0 0 8px;
  line-height: 1.3;
}
.hero-card-title strong { font-weight: 800; }
.hero-card-desc {
  font-size: 13.5px;
  line-height: 1.55;
  color: rgba(10, 20, 64, 0.7);
  margin: 0;
}

/* -------- Closing yellow band with curved top -------- */
.wall-title-band {
  background: var(--gold);
  border-radius: 50% 50% 0 0 / 46px 46px 0 0;
  padding: 56px 24px 48px;
  text-align: center;
  margin-top: 40px;
}
/* When this closing text sits inside a .gold-panel that's already gold, it
   just needs the typography — no second background/curve on top of the
   panel's own. */
.wall-title-band--inline { background: none; border-radius: 0; margin-top: 0; padding: 40px 24px 8px; }
/* Deeper gold closing band, flush against the light block above it (no
   gap) so the curved top reads as one continuous wave. */
.wall-title-band--strong { background: var(--gold-2); margin-top: -46px; }
.wall-title-band h2 {
  font-family: var(--f-headline);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(24px, 3.4vw, 38px);
  color: var(--navy);
  margin: 0;
}

/* ============================== PLACEHOLDER (coming soon) ============================== */
.placeholder-section {
  padding: 140px 24px 120px;
  text-align: center;
}
.placeholder-section .ph-icon {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 22px;
}
.placeholder-section h2 { font-family: var(--f-display); font-size: 30px; color: var(--navy-ink); margin: 0 0 12px; }
.placeholder-section p { font-size: 15.5px; color: rgba(10,20,64,.68); max-width: 460px; margin: 0 auto; line-height: 1.6; }

/* ============================== FOOTER ============================== */
.site-footer {
  background: var(--white);
  color: var(--navy);
  padding: 32px 0;
  margin-top: auto;
  border-top: 1px solid var(--line);
}
.site-footer-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: flex-start;
  gap: 28px;
  flex-wrap: wrap;
}
.site-footer .brand { flex: none; }
.site-footer .brand img { height: 130px; }
.site-footer .footer-refs { flex: 1; min-width: 260px; }
.site-footer p { font-size: 11.5px; line-height: 1.65; margin: 0 0 8px; }
.site-footer strong { color: var(--navy); }
.site-footer .footer-code { font-size: 12px; font-weight: 700; color: var(--gold-deep); margin-top: 6px; }
.site-footer .footer-references { font-size: 10.5px; line-height: 1.6; color: rgba(13, 26, 92, 0.8); margin: 0 0 10px; }

/* ============================== SEÑALES / NO LO CARGUES SOLO (shared) ============================== */
.signals-section { padding-bottom: 20px; }

/* White card that overlaps the bottom edge of the banner photo above it. */
.floating-card {
  background: var(--white);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-soft);
  padding: 32px 36px;
  margin-top: -64px;
  margin-bottom: 40px;
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 28px;
}
.floating-card--static { margin-top: 0; }
.floating-card-icon { width: 150px; flex: none; }
/* The icon is the only sibling with an explicit width, so the text block
   next to it (title + paragraph) needs flex:1 to actually claim the rest
   of the card's width — otherwise it shrinks to its content and the copy
   stays balled up in a narrow column instead of spreading toward the
   far edge of the card. */
.floating-card > div { flex: 1; min-width: 0; }

/* The lead intro card overlapping the (now taller) banner photo — a much
   bigger icon and a deeper overlap than the other floating cards on the
   page. */
.floating-card--hero {
  padding: 0 36px;
  margin-top: -254px;
}
.floating-card--hero .floating-card-icon { width: 350px; }
/* icon-brain-shatter.png (unlike icon-brain-heart.png) has no circular
   backdrop baked into the asset, so it needs one drawn behind it here to
   match the approved design. */
.floating-card--static .floating-card-icon {
  width: 150px;
  height: 150px;
  object-fit: contain;
  background: var(--gold);
  border-radius: 50%;
  padding: 14px;
  box-sizing: border-box;
}
.floating-card h2 {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(19px, 2.2vw, 25px);
  color: var(--navy);
  margin: 0 0 10px;
  line-height: 1.25;
}
.floating-card p { font-size: 14.5px; line-height: 1.6; color: rgba(10, 20, 64, 0.75); margin: 0; }

/* Flat, not a gradient — a gradient tall enough to span several stacked
   sections pools its darker end into a visible stripe wherever a section
   happens to end, which reads as an accidental color seam. Instead the
   reference design alternates between two flat golds block by block, with
   a curved-top "wave" (the same trick as .wall-title-band below) marking
   each handoff. */
.gold-panel { background: var(--gold); padding: 56px 0; }
/* Used when a .floating-card is the first thing inside — it needs more
   clearance above so its own upward overlap (margin-top:-64px) still
   leaves gold showing around it instead of poking past the panel's top. */
.gold-panel--top { padding-top: 96px; }
/* This light section dips down into the strong section below it (the
   reference curves downward at this handoff, not up like the closing
   band does) — so *this* box gets the curved bottom, not the strong
   box's top. z-index + the negative margin let it paint over the strong
   section in the overlap band, so the corners its own curve carves away
   reveal the strong gold behind instead of the page background. */
.gold-panel--dip {
  position: relative;
  z-index: 1;
  border-radius: 0 0 50% 50% / 0 0 46px 46px;
  padding-bottom: 96px;
  margin-bottom: -46px;
}
.gold-panel-strong { background: var(--gold-2); padding: 48px 0 40px; }

.photo-card-grid { display: grid; gap: 20px; margin-bottom: 8px; }
.photo-card-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.photo-card-grid.cols-5 { grid-template-columns: repeat(5, 1fr); }
.photo-card { background: var(--white); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-card); }
.photo-card img { width: 100%; display: block; }
.photo-card-body { padding: 16px 14px 18px; }
.photo-card-body h3 { font-size: 14px; font-weight: 800; color: var(--navy-ink); margin: 0 0 6px; line-height: 1.3; }
.photo-card-body p { font-size: 12px; line-height: 1.5; color: rgba(10, 20, 64, 0.7); margin: 0; }
.photo-card-grid.cols-5 .photo-card { background: var(--gold); }
.photo-card-grid.cols-5 .photo-card-body { background: var(--gold); }
.photo-card-grid.cols-5 .photo-card-body p { color: rgba(10, 20, 64, 0.78); }

.emphasis-band { text-align: center; padding: 36px 20px 8px; }
.emphasis-band strong {
  display: block;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(18px, 2.2vw, 24px);
  color: var(--navy);
  margin-bottom: 8px;
}
.emphasis-band em {
  display: block;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(15px, 1.8vw, 19px);
  color: var(--navy);
  max-width: 640px;
  margin: 0 auto;
}

.stigma-block { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; padding: 20px 0 0; }
.stigma-block h2 {
  font-family: var(--f-headline);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(28px, 4vw, 44px);
  color: var(--navy);
  margin: 0;
  flex: 1;
  line-height: 1.1;
}
.stigma-block img { width: 380px; flex: none; }

.myth-list { display: flex; flex-direction: column; gap: 22px; margin: 20px 0 56px; }
.myth-row { display: flex; align-items: center; gap: 24px; }
.myth-row + .myth-row { padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, 0.5); }
.myth-row img {
  width: 170px;
  height: 128px;
  object-fit: cover;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-card);
  flex: none;
}
.myth-label { margin: 0 0 8px; font-size: 14px; line-height: 1.5; font-weight: 800; color: var(--navy); }
.myth-label:last-child { margin-bottom: 0; }
.myth-label span { font-weight: 500; color: rgba(10, 20, 64, 0.78); }

.section-heading {
  text-align: center;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(20px, 2.6vw, 28px);
  color: var(--navy);
  margin: 44px 0 24px;
}

/* One white card holding the intro + support-network grid + highlight
   quote together, instead of those floating as separate loose elements. */
.support-card {
  background: var(--white);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-soft);
  padding: 44px 44px 40px;
  margin-top: -64px;
  margin-bottom: 40px;
  position: relative;
  z-index: 2;
}
.support-intro { display: flex; align-items: center; gap: 28px; }
.support-intro p { font-size: 14.5px; line-height: 1.6; color: rgba(10, 20, 64, 0.75); margin: 0; flex: 1; min-width: 0; }

.highlight-box {
  background: var(--cream-2);
  border-radius: var(--r-xl);
  padding: 30px 24px;
  text-align: center;
  margin: 44px 0 20px;
}
.highlight-box p { margin: 0 0 4px; font-size: 15px; color: var(--navy-ink); }
.highlight-box em { font-style: italic; font-weight: 800; font-size: clamp(18px, 2.2vw, 24px); color: var(--navy); }

.valor-section { position: relative; padding: 100px 0 90px; margin-top: 20px; overflow: hidden; }
.valor-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: left center; z-index: 0; }
.valor-content { position: relative; z-index: 1; max-width: 620px; margin-left: auto; }
.valor-copy h2 { font-family: var(--f-display); font-weight: 800; font-size: clamp(28px, 3.8vw, 40px); color: var(--navy); margin: 0 0 14px; }
.valor-copy p { font-size: 15px; line-height: 1.6; color: rgba(10, 20, 64, 0.75); margin: 0; }
.valor-cards { display: flex; flex-direction: row; gap: 18px; margin-top: 24px; }
.valor-card { flex: 1; }
.valor-card { background: var(--white); border-radius: var(--r-lg); padding: 22px 24px; box-shadow: var(--shadow-card); text-align: center; }
.valor-card img { width: 160px; margin: 0 auto 12px; }
.valor-card h3 { font-size: 15px; font-weight: 800; color: var(--navy-ink); margin: 0 0 6px; }
.valor-card p { font-size: 13.5px; line-height: 1.5; color: rgba(10, 20, 64, 0.7); margin: 0; }

/* Two-line bold+italic variant of the closing band (also used with a bare h2
   elsewhere for a single italic line). */
.wall-title-band strong {
  display: block;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(19px, 2.6vw, 27px);
  color: var(--navy);
  margin-bottom: 8px;
}
.wall-title-band em {
  display: block;
  font-family: var(--f-headline);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(16px, 2vw, 22px);
  color: var(--navy);
}

/* ============================== RESPONSIVE ============================== */
@media (max-width: 960px) {
  .heroe-panel-top,
  .heroe-panel-bottom,
  .heroe-panel-foot { grid-template-columns: 1fr; }
  /* Approved mobile layout shows the photo strip above the intro copy,
     with the copy centered underneath — reorder via grid `order` rather
     than reshuffling the JSX. */
  .heroe-panel-photos { order: 1; margin-bottom: 24px; }
  .heroe-panel-intro { order: 2; text-align: center; }
  .heroe-panel-intro p { margin-left: auto; margin-right: auto; }
  .heroe-panel-bottom { text-align: center; }
  .home-cards { grid-template-columns: 1fr; }
  .photo-card-grid.cols-4,
  .photo-card-grid.cols-5 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .heroe-panel-section { padding: 36px 0 48px; }
  .heroe-panel-foot { grid-template-columns: 1fr; gap: 18px; }
}

@media (max-width: 800px) {
  .nav-desktop { display: none; }
  .hamburger { display: flex; }
  .nav-drawer {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px 24px 16px;
    background: var(--navy);
    border-top: 1px solid rgba(255, 255, 255, 0.14);
  }
  /* Keep the title layered on the banner photo itself, same as desktop —
     the approved mobile creative keeps the full photo in frame (just a
     shorter crop via aspect-ratio, close to the same ratio used on
     desktop) instead of the tight fixed-height crop that used to cut the
     photo and squeeze the title. Sizes below are traced from the approved
     1080-wide mobile mockup, expressed as vw so they scale with the
     viewport instead of being pinned to that one canvas width. */
  .page-banner-media img { height: auto; aspect-ratio: 1.84 / 1; object-fit: cover; object-position: left center; }
  /* Belt-and-suspenders for the title/lead sitting on the photo: getting
     the text box's width right (below) keeps it off people's faces on the
     photos we have today, but a new banner photo could put a face
     anywhere. This scrim guarantees contrast no matter what's underneath,
     rather than relying purely on geometry. */
  .page-banner-media { position: relative; }
  .page-banner-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, rgba(10, 20, 64, 0.72) 0%, rgba(10, 20, 64, 0.45) 42%, rgba(10, 20, 64, 0) 72%);
    pointer-events: none;
  }
  .page-banner-content { width: var(--pb-mobile-w, 66%); max-width: 320px; left: 7%; }
  .page-title { font-size: clamp(18px, 5.9vw, 28px); color: var(--white); }
  .page-subtitle { font-size: clamp(11px, 2.6vw, 14px); color: var(--white); }
  .page-lead { font-size: clamp(10.5px, 2.4vw, 13px); color: rgba(255, 255, 255, 0.9); }

  /* Home swaps to a dedicated portrait creative (headline + CTA copy)
     instead of the desktop hero + our own text block. The legal footer is
     a separate white block below it in the approved mockup (not baked
     into the image), so the shared Footer component still renders here. */
  .home-hero .hero-media { display: none; }
  .home-hero-mobile-only { display: block; width: 100%; height: auto; }

  .instructions-section { flex-direction: column; padding: 48px 0 40px; }
  .instructions-copy { max-width: 100%; }

  /* The approved design keeps the smaller icon+copy cards (the "static"
     variant, and the support-card intro) as a row even at phone width —
     it just shrinks the icon — rather than stacking icon-over-centered-
     text. The big hero-icon card is the exception: its icon and its much
     longer paragraph both stay centered and stacked, same as before. */
  .floating-card { text-align: left; margin-top: -40px; padding: 22px; gap: 18px; }
  .floating-card-icon { width: 78px; }
  .floating-card--hero {
    flex-direction: column;
    text-align: center;
    margin-top: -60px;
    padding: 26px 22px;
  }
  .floating-card--hero .floating-card-icon { width: 150px; }
  .support-card { margin-top: -40px; padding: 22px; }
  .support-intro { text-align: left; }
  .gold-panel--top { padding-top: 72px; }
  .stigma-block { align-items: center; text-align: left; padding: 12px 0 24px; gap: 16px; }
  .stigma-block img { width: 42%; flex: none; }
  .myth-row img { width: 96px; height: 96px; }
  .photo-card-grid.cols-4 { grid-template-columns: 1fr 1fr; }

  /* Network/support cards (photo-card-grid.cols-5) become a single column
     of wide row cards — photo on the left, copy on the right — instead of
     a 2-column grid of stacked photo-over-text cards. */
  .photo-card-grid.cols-5 {
    grid-template-columns: 1fr;
  }
  .photo-card-grid.cols-5 .photo-card {
    display: flex;
    flex-direction: row;
    align-items: stretch;
  }
  .photo-card-grid.cols-5 .photo-card img { width: 42%; height: auto; flex: none; }
  .photo-card-grid.cols-5 .photo-card-body { flex: 1; display: flex; flex-direction: column; justify-content: center; }

  /* Row layout: icon + a single wrapper around heading/paragraph. A float
     here (icon floating, text wrapping around it) is fragile — a long
     unbreakable word on the heading's second line can get pushed below
     the float entirely, leaving an ugly gap. flex row + min-width:0 on
     the text column is predictable regardless of copy length. */
  .valor-card { display: flex; align-items: flex-start; text-align: left; gap: 16px; }
  .valor-card img { width: 76px; margin-bottom: 0; flex: none; }
  .valor-card-body { flex: 1; min-width: 0; }

  /* Wall-of-stories cards become row cards (icon left, copy right) instead
     of centered icon-on-top cards, matching the approved mobile creative. */
  .wall-board { grid-template-columns: 1fr; }
  .hero-card { display: flex; align-items: flex-start; text-align: left; gap: 16px; }
  .hero-card-icon { width: 56px; height: 56px; margin-bottom: 0; flex: none; }
  .hero-card-icon img { width: 56px; height: 56px; }
  .hero-card-body { flex: 1; min-width: 0; }

  /* Photo becomes a normal in-flow band above the text instead of an
     overlay — a phone-width column has no "sky" area left for the copy
     to sit on without covering the woman's face. */
  .valor-section { padding: 0 0 40px; overflow: visible; }
  .valor-media { position: relative; inset: auto; width: 100%; height: 220px; display: block; border-radius: 0 0 32px 32px; }
  .valor-content { max-width: 100%; margin: 28px 0 0; padding: 0 20px; }
  .valor-cards { flex-direction: column; }
}

@media (max-width: 560px) {
  .power-card { padding: 30px 22px 26px; }
  .wall-board { gap: 14px; }
  .hero-card { padding: 20px 16px 18px; }
}

@media (max-width: 380px) {
  .wall-board { grid-template-columns: 1fr; }
}