/* ─── Reset & base ─────────────────────────────────────────── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --black:       #080808;
      --off-black:   #0f0f0f;
      --dark:        #141414;
      --mid:         #1e1e1e;
      --border:      rgba(255,255,255,0.08);
      --white:       #ffffff;
      --off-white:   #e8e8e8;
      --muted:       rgba(255,255,255,0.38);
      --accent:      #4a8faa;
      --accent-dim:  rgba(74,143,170,0.18);
      --font-display: 'Bebas Neue', sans-serif;
      --font-body:    'Montserrat', sans-serif;
    }

    html { scroll-behavior: smooth; }

    body {
      background: var(--black);
      color: var(--white);
      font-family: var(--font-body);
      font-weight: 400;
      line-height: 1.7;
      overflow-x: hidden;
    }

    /* root.css */
.btn-primary,
.btn-primary-input {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--black);
  background: var(--white);
  border: 1px solid var(--white);
  padding: 0.85rem 1.4rem;
  border-radius: 2px;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
  white-space: nowrap;
}

.btn-primary:hover,
.btn-primary-input:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--white);
}


.media-filters,
.blog-filters {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  padding: 1.5rem 2.5rem;
  border-bottom: 1px solid var(--border);
}

    .filter-btn {
      font-size: 0.62rem;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--muted);
      background: none;
      border: 1px solid var(--border);
      padding: 0.4rem 1rem;
      border-radius: 2px;
      cursor: pointer;
      transition: color 0.2s, border-color 0.2s, background 0.2s;
      font-family: var(--font-body);
    }

    .filter-btn:hover,
    .filter-btn.active {
      color: var(--white);
      border-color: rgba(255,255,255,0.3);
      background: rgba(255,255,255,0.05);
    }

    .filter-btn.active {
      color: var(--accent);
      border-color: var(--accent);
      background: var(--accent-dim);
    }

   .filter-label {
      font-size: 0.58rem;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.2);
      margin-right: 0.4rem;
    }


    /* ─── Load more button ─────────────────────────────────────── */
    .load-more-wrap {
      text-align: center;
      margin-top: 3rem;
    }

    .load-more-btn {
      font-size: 0.68rem;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--muted);
      background: none;
      border: 1px solid var(--border);
      padding: 0.9rem 2.5rem;
      cursor: pointer;
      font-family: var(--font-body);
      border-radius: 2px;
      transition: color 0.2s, border-color 0.2s;
    }

    .load-more-btn:hover { color: var(--white); border-color: rgba(255,255,255,0.3); }



    .section-eyebrow {
      font-size: 0.6rem;
      letter-spacing: 0.28em;
      text-transform: uppercase;
      color: var(--accent);
      margin-bottom: 1rem;
    }

       .btn-gold {
      display: inline-block;
      font-size: 0.7rem;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      font-weight: 600;
      color: var(--black);
      background: var(--gold);
      padding: 1rem 2.8rem;
      border-radius: 2px;
      text-decoration: none;
      transition: background 0.25s;
    }

    .btn-gold:hover { background: #e0b84e; }

    @keyframes pulse {
      0%, 100% { opacity: 1; transform: scale(1); }
      50%       { opacity: 0.4; transform: scale(0.7); }
    }

       .urgency-dot {
      width: 6px; height: 6px;
      border-radius: 50%;
      background: #e8a838;
      animation: pulse 1.8s ease-in-out infinite;
    }