:root {
  --blue: #5a7998;
  --gold: #c8a845;
  --ink: #1f2a36;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: #1a1a1a url(Layer-1.png);
  font-family: Geneva, Arial, Helvetica, sans-serif;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink);
}
img { max-width: 100%; height: auto; display: block; }

.site-header { background: #000; }
.site-header img { margin: 0 auto; width: 100%; max-width: 1024px; }

.stage { background: var(--blue); padding: 8px 20px 0; }
.wrap { max-width: 1024px; margin: 0 auto; }
.tagline { width: 100%; max-width: 425px; margin: 0 0 14px; }

.layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 28px;
  align-items: start;
  padding-bottom: 36px;
}

.video-frame {
  background: #000;
  border: 4px solid #fff;
  border-radius: 6px;
  box-shadow: 0 4px 14px rgba(0,0,0,.35);
  aspect-ratio: 16 / 9;
}
.video-frame video { width: 100%; height: 100%; display: block; background: #000; }
.video-caption {
  margin: 8px 0 18px;
  color: #fff;
  font-size: .85rem;
  text-align: center;
}

.card {
  background: #fffdf6;
  border-radius: 8px;
  padding: 22px 26px;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.card p { margin: 0 0 1em; }
.card p:last-child { margin-bottom: 0; }

.side { display: flex; flex-direction: column; gap: 18px; }
.cover { width: 100%; border-radius: 4px; box-shadow: 0 4px 14px rgba(0,0,0,.35); }
.stills { display: grid; grid-template-columns: 1fr; gap: 12px; }
.stills img { width: 100%; border: 3px solid #000; }

.site-footer {
  background: linear-gradient(var(--blue) 0, var(--blue) 80px, var(--gold) 80px);
  text-align: center;
}
.site-footer img { width: 100%; max-width: 1024px; margin: 0 auto; }
.site-footer p {
  margin: 0;
  padding: 14px 20px;
  background: #1a1a1a;
  color: #ccc;
  font-size: .8rem;
}
.site-footer a { color: #f0b8b8; }
.site-footer a:hover { color: #fff; }

/* Tablet: cover and stills move under the text */
@media (max-width: 800px) {
  .layout { grid-template-columns: 1fr; }
  .side { flex-direction: row; align-items: flex-start; }
  .cover { width: 55%; }
  .stills { width: 45%; }
}

/* Phone */
@media (max-width: 520px) {
  .stage { padding: 8px 14px 0; }
  .card { padding: 16px 18px; }
  .side { flex-direction: column; }
  .cover { width: 100%; max-width: 320px; margin: 0 auto; }
  .stills { width: 100%; }
  .site-footer { background: var(--gold); }
}