/* ═══════════════════════════════════════════════
   VIDEOS PAGE STYLES
═══════════════════════════════════════════════ */
:root {
  --ink: #111d36;
  --navy: #1E2A4A;
  --cobalt: #25375f;
  --blue: #27406E;
  --steel: #4A4F58;
  --gold: #C9D6E8;
  --gold2: #E6EEF8;
  --gold3: #F4F7FB;
  --cream: #F8FAFC;
  --off: #E8EFF6;
  --mist: #D8E2EB;
  --text: #1C1C1C;
  --mid: #6B7280;
  --light: #8D95A5;
  --white: #FFFFFF;
  --ff-display: 'Arial', sans-serif;
  --ff-body: 'Arial', sans-serif;
  --ease: cubic-bezier(.4,0,.2,1);
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; font-size:16px; }
body { font-family:var(--ff-body); background:var(--cream); color:var(--text); overflow-x:hidden; }

.container { max-width:1200px; margin:0 auto; padding:0 5%; }

h1 { text-align:center; color:#333; margin-bottom:2rem; }

.video-container { margin:20px 0; }

video { width:100%; max-width:800px; display:block; margin:0 auto; }

.controls { text-align:center; margin-top:10px; }

button { padding:10px 20px; margin:0 5px; cursor:pointer; background:var(--navy); color:var(--white); border:none; border-radius:4px; transition:background .2s; }

button:hover { background:var(--blue); color:var(--white); }

.no-content { text-align:center; padding:40px; font-size:18px; color:#666; background:#e8e8e8; border-radius:5px; max-width:800px; margin:20px auto; display:none; }

@media(max-width:600px) {
  .video-container { margin:10px 0; }
  video { max-width:100%; }
  button { padding:8px 16px; font-size:.85rem; }
}