/* before / after: header spacing (these utility classes are not in the compiled Tailwind file) */
#before-after .ba-head { margin-bottom: 3rem; }
#before-after .ba-head > p:first-child { margin: 0 0 1rem; }
#before-after .ba-lead { margin-top: 1.25rem; max-width: 36rem; }
#before-after .ba-head > p:last-child { margin-top: .6rem; }

/* never let this section widen the page */
#before-after { overflow: hidden; }
.ba-wave { overflow: hidden; }

/* phones: play + waveform on one row, Before/After switch full width underneath */
@media (max-width: 820px) {
  .ba-player { flex-wrap: wrap; }
  .ba-wave { flex: 1 1 0; }
  .ba-ab { flex: 1 0 100%; }
  .ba-ab button { flex: 1; padding: 11px 9px; }
}

/* mobile polish (hero subtitle break, lone last gallery photo) */
.bp-mbr { display: none; }
@media (max-width: 640px) {
  .bp-mbr { display: block; }
  .bp-dd { display: none; }
  .fac-item:last-child:nth-child(even) { grid-column: span 2; aspect-ratio: 16 / 9; }
}

/* phones: taller hero so the mission message stays pinned longer; subtitle fits two lines */
@media (max-width: 640px) {
  #top { height: 215vh !important; }
  [data-hero-logo] p { font-size: 10px !important; letter-spacing: .14em !important; }
}