:root{
      --red:#D62027;
      --navy:#12204A;
      --blue:#2EA3F2;
      --gray:#666;
      --bg:#fff;
      --border:#E2E2E2;
    }

    body{ color:var(--gray); background:var(--bg); }
    a{ color:var(--blue); }

    .btn-primary{ background:var(--navy); color:#fff; }
    .btn-primary:hover{ opacity:0.6; }
    .btn-outline{ border:2px solid var(--navy); color:var(--bg); }
    .btn-outline:hover{ background:var(--bg); color:#000; }

    .card{ border:1px solid var(--border); }

    /* --- Animated Hero Background --- */
    .hero-overlay{
      position:absolute; inset:0; z-index: -35;
      background: linear-gradient(100deg, rgba(203, 13, 20, 0.948) 0%, rgba(188, 13, 19, 0.729) 55%, rgba(255, 243, 243, 0.208) 75%, rgba(245, 248, 250, 0) 100%);
    }
        /* Triple ribbon wave */
    .ribbon-wave svg{ width:300%; }
    @keyframes waveSlide{ from{transform:translateX(0);} to{transform:translateX(-25%);} }

    @media (prefers-reduced-motion:reduce){
      .hero-swirls,.ribbon-wave svg{animation:none;}
    }

    /* underline animation for headings + CTAs */
  .underline-smooth{position:relative;display:inline-block}
  .underline-smooth::after{
    content:"";position:absolute;left:0;bottom:-6px;height:4px;width:0;
    background:#B71C1C;border-radius:2px;transition:width .35s ease
  }
  .link-underline::after{height:2px;bottom:-3px}
  .hover-underline:hover .underline-smooth::after{width:100%}

  /* card + section reveal */
  .reveal-on-scroll{opacity:0;transform:translateY(24px) scale(.98);transition:opacity .6s ease,transform .6s ease}
  .reveal-on-scroll.revealed{opacity:1;transform:translateY(0) scale(1)}

  /* image reveal + hover */
  .img-reveal{opacity:0;transform:translateY(16px) scale(.98);transition:opacity .7s ease,transform .7s ease}
  .img-reveal.revealed{opacity:1;transform:translateY(0) scale(1)}
  .media img{transition:transform .5s ease}

  /* card lift only when media hovered (applied via JS class) */
  .card{transition:box-shadow .4s ease, transform .4s ease}
  .card.media-hover{box-shadow:0 12px 28px rgba(0,0,0,.12); transform:translateY(-2px)}
  
    /* glossy pill + sheen */
    .pill {
      position: relative;
      overflow: hidden;
      border-radius: 9999px;
      box-shadow: 0 10px 24px rgba(0,0,0,.15);
      transition: transform .35s ease, box-shadow .35s ease;
    }
    .pill::after{
      /* sheen highlight */
      content:"";
      position:absolute; inset:-30%;
      background: radial-gradient(120% 50% at 0% 0%, rgba(255,255,255,.25) 0%, rgba(255,255,255,0) 60%);
      transform: translateX(-30%);
      transition: transform .6s ease;
      pointer-events: none;
    }
    .pill:hover{ transform: translateY(-2px) scale(1.01); box-shadow:0 14px 30px rgba(0,0,0,.18); }
    .pill:hover::after{ transform: translateX(15%); }

    /* scroll reveal */
    .pill-reveal{ opacity:0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
    .pill-reveal.revealed{ opacity:1; transform: translateY(0); }

     .fade-in-up {
    opacity: 0;
    transform: translateY(25px);
    transition: opacity 2s ease, transform 0.8s ease;
  }
  .fade-in-up.revealed {
    opacity: 1;
    transform: translateY(0);
  }
  #gallery-track img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.nav-link {
  position: relative;
  transition: color 0.3s ease;
}

.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 0%;
  height: 2px;
  background-color: var(--red);
  transition: width 0.3s ease;
}

/* Hover effect */
.nav-link:hover {
  color: var(--red);
}

.nav-link:hover::after {
  width: 100%;
}

/* Active link (clicked or scrolled) */
.nav-link.active {
  color: var(--red);
}

.nav-link.active::after {
  width: 100%;
}

/* Mobile links */
.mobile-link {
  transition: color 0.3s ease, border-color 0.3s ease;
}
.mobile-link:hover {
  color: var(--red);
}
.mobile-link.active {
  color: var(--red);
  font-weight: bold;
}