/* ==========================================================================
   components.css — navigation, hero, sections, cards, pricing, forms
   ========================================================================== */

/* ===== Navbar ===== */
.rm-navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1030;
  padding: 1rem 0;
  background: transparent;
  transition: background .3s ease, padding .3s ease, box-shadow .3s ease;
}
.rm-navbar.is-scrolled {
  background: rgba(6, 14, 46, .92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: .6rem 0;
  box-shadow: 0 8px 30px rgba(0,0,0,.25);
}
.rm-navbar .navbar-brand {
  font-family: 'Sora', sans-serif;
  font-weight: 800;
  color: #fff;
  font-size: 1.25rem;
  letter-spacing: -.01em;
  display: inline-flex;
  align-items: center;
  gap: .65rem;
}
.rm-navbar .navbar-brand .brand-mark {
  display: inline-grid;
  place-items: center;
  width: 38px; height: 38px;
  background: linear-gradient(135deg, var(--rm-royal), var(--rm-sky));
  color: #fff;
  border-radius: 12px;
  font-weight: 800;
  box-shadow: var(--rm-shadow-glow);
}
.rm-navbar .navbar-brand .brand-sub {
  display: block;
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--rm-gold);
  margin-top: 2px;
}
.rm-navbar .nav-link {
  color: rgba(255,255,255,.85);
  font-weight: 500;
  padding: .5rem 1rem !important;
  position: relative;
  transition: color .2s ease;
}
.rm-navbar .nav-link:hover,
.rm-navbar .nav-link.active {
  color: #fff;
}
.rm-navbar .nav-link::after {
  content: "";
  position: absolute;
  left: 1rem; right: 1rem; bottom: .15rem;
  height: 2px;
  background: var(--rm-gold);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .35s cubic-bezier(.65,0,.35,1);
}
.rm-navbar .nav-link:hover::after,
.rm-navbar .nav-link.active::after {
  transform: scaleX(1);
  transform-origin: left;
}
.rm-navbar .navbar-toggler {
  border: 1px solid rgba(255,255,255,.4);
  color: #fff;
  padding: .4rem .65rem;
}
.rm-navbar .navbar-toggler:focus { box-shadow: 0 0 0 3px rgba(244,196,48,.35); }
.rm-navbar .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba(255,255,255,0.9)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

/* Offcanvas mobile menu */
.offcanvas.rm-offcanvas {
  background: linear-gradient(180deg, var(--rm-deep) 0%, var(--rm-deep-900) 100%);
  color: #fff;
  width: 320px;
}
.rm-offcanvas .offcanvas-header { border-bottom: 1px solid rgba(255,255,255,.1); }
.rm-offcanvas .btn-close { filter: invert(1); opacity: .9; }
.rm-offcanvas .nav-link {
  color: rgba(255,255,255,.9);
  padding: 1rem 0 !important;
  font-size: 1.1rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.rm-offcanvas .nav-link:hover, .rm-offcanvas .nav-link.active { color: var(--rm-gold); }

/* ==========================================================================
   AURORA — animated royal-blue background system
   Used on: hero, section-dark, booking-side, newsletter-band,
            bg-royal-gradient (page banners), admin-login.
   ========================================================================== */

.bg-aurora {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 20% 20%, rgba(79,123,255,.35), transparent 55%),
    radial-gradient(ellipse at 90% 80%, rgba(244,196,48,.10), transparent 55%),
    linear-gradient(135deg, var(--rm-royal) 0%, var(--rm-deep) 60%, var(--rm-deep-900) 100%);
}

/* Floating colored orbs that drift around the section */
.bg-aurora::before,
.bg-aurora::after {
  content: "";
  position: absolute;
  inset: -20% -20%;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(40rem 30rem at var(--orb1-x, 18%) var(--orb1-y, 22%),
                    rgba(79,123,255,.55), transparent 60%),
    radial-gradient(36rem 28rem at var(--orb2-x, 78%) var(--orb2-y, 82%),
                    rgba(30,64,255,.45), transparent 60%),
    radial-gradient(28rem 24rem at var(--orb3-x, 62%) var(--orb3-y, 18%),
                    rgba(244,196,48,.20), transparent 65%),
    radial-gradient(32rem 28rem at var(--orb4-x, 28%) var(--orb4-y, 78%),
                    rgba(146,79,255,.30), transparent 65%);
  filter: blur(50px);
  animation: auroraDrift 22s ease-in-out infinite alternate;
  will-change: background, transform;
}
.bg-aurora::after {
  animation: auroraDrift 30s ease-in-out infinite alternate-reverse;
  opacity: .55;
  mix-blend-mode: screen;
  background:
    radial-gradient(30rem 24rem at var(--orb5-x, 80%) var(--orb5-y, 30%),
                    rgba(79,123,255,.6), transparent 60%),
    radial-gradient(34rem 28rem at var(--orb6-x, 20%) var(--orb6-y, 70%),
                    rgba(244,196,48,.18), transparent 60%);
  filter: blur(60px);
}

/* Slowly rotating conic shimmer on top, very low opacity */
.bg-aurora > .aurora-shimmer {
  position: absolute;
  inset: -50%;
  z-index: -1;
  pointer-events: none;
  background: conic-gradient(from 0deg at 50% 50%,
    rgba(255,255,255,0) 0deg,
    rgba(255,255,255,.04) 60deg,
    rgba(244,196,48,.05) 120deg,
    rgba(255,255,255,0) 180deg,
    rgba(79,123,255,.05) 240deg,
    rgba(255,255,255,.03) 300deg,
    rgba(255,255,255,0) 360deg);
  animation: auroraSpin 40s linear infinite;
  mix-blend-mode: screen;
}

/* Subtle grain overlay for premium texture */
.bg-aurora > .aurora-grain {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .06;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

@keyframes auroraDrift {
  0%   {
    --orb1-x: 18%;  --orb1-y: 22%;
    --orb2-x: 78%;  --orb2-y: 82%;
    --orb3-x: 62%;  --orb3-y: 18%;
    --orb4-x: 28%;  --orb4-y: 78%;
    transform: translate3d(0,0,0) scale(1);
  }
  100% {
    --orb1-x: 32%;  --orb1-y: 38%;
    --orb2-x: 64%;  --orb2-y: 68%;
    --orb3-x: 50%;  --orb3-y: 34%;
    --orb4-x: 44%;  --orb4-y: 64%;
    transform: translate3d(0,0,0) scale(1.08);
  }
}
@keyframes auroraSpin {
  to { transform: rotate(360deg); }
}

/* Mouse spotlight — JS sets --mx / --my CSS vars */
.bg-aurora.has-spotlight::before {
  background:
    radial-gradient(28rem 28rem at var(--mx, 50%) var(--my, 50%),
                    rgba(244,196,48,.28), transparent 60%),
    radial-gradient(40rem 30rem at var(--orb1-x, 18%) var(--orb1-y, 22%),
                    rgba(79,123,255,.55), transparent 60%),
    radial-gradient(36rem 28rem at var(--orb2-x, 78%) var(--orb2-y, 82%),
                    rgba(30,64,255,.45), transparent 60%),
    radial-gradient(28rem 24rem at var(--orb3-x, 62%) var(--orb3-y, 18%),
                    rgba(244,196,48,.20), transparent 65%),
    radial-gradient(32rem 28rem at var(--orb4-x, 28%) var(--orb4-y, 78%),
                    rgba(146,79,255,.30), transparent 65%);
}

/* ===== Hero (uses aurora) ===== */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 8rem 0 5rem;
  color: #fff;
}

/* Floating mini-orbs visible on top of aurora for extra depth */
.hero-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  pointer-events: none;
  z-index: 0;
}
.hero-orb-1 {
  width: 320px; height: 320px;
  top: 12%; left: -60px;
  background: radial-gradient(circle, rgba(79,123,255,.6), transparent 70%);
  animation: floatBlob 16s ease-in-out infinite;
}
.hero-orb-2 {
  width: 260px; height: 260px;
  bottom: 8%; right: -40px;
  background: radial-gradient(circle, rgba(244,196,48,.35), transparent 70%);
  animation: floatBlob 22s ease-in-out infinite reverse;
}
@keyframes floatBlob {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(40px, 30px) scale(1.08); }
}

.hero h1 {
  color: #fff;
  font-size: clamp(2.5rem, 6vw, 4.25rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
}
.hero .hero-sub {
  font-size: 1.15rem;
  max-width: 38rem;
  color: rgba(255,255,255,.85);
  line-height: 1.65;
}
.hero .role-line {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem .85rem;
  color: var(--rm-gold);
  font-family: 'Sora', sans-serif;
  font-weight: 600;
  letter-spacing: .02em;
  margin-bottom: 1rem;
}
.hero .role-line .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--rm-gold); opacity: .7; }

.hero-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 2.5rem;
  max-width: 36rem;
}
.hero-stats .stat {
  padding: 1rem 1.1rem;
  border-radius: var(--rm-radius-md);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(8px);
}
.hero-stats .stat-value {
  font-family: 'Sora', sans-serif;
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 800;
  color: var(--rm-gold);
  line-height: 1;
}
.hero-stats .stat-label {
  font-size: .8rem;
  color: rgba(255,255,255,.78);
  margin-top: .35rem;
  letter-spacing: .02em;
}

.hero-portrait {
  position: relative;
  aspect-ratio: 4/5;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: var(--rm-shadow-lg);
  background:
    linear-gradient(135deg, rgba(79,123,255,.25), rgba(11,26,74,.6)),
    radial-gradient(circle at 30% 30%, rgba(244,196,48,.15), transparent 50%);
  border: 1px solid rgba(255,255,255,.16);
}
.hero-portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(6,14,46,.55) 100%);
}
.hero-portrait img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.hero-portrait .portrait-fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(255,255,255,.5);
  font-family: 'Sora', sans-serif;
  font-weight: 700;
  font-size: 6rem;
  text-shadow: 0 6px 30px rgba(0,0,0,.4);
}
.hero-portrait-frame {
  position: relative;
}
.hero-portrait-frame::before {
  content: "";
  position: absolute;
  inset: 18px -18px -18px 18px;
  border: 2px solid var(--rm-gold);
  border-radius: 28px;
  z-index: -1;
  opacity: .55;
}

.scroll-cue {
  position: absolute;
  bottom: 1.75rem;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255,255,255,.7);
  font-size: .8rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: .4rem;
  animation: bobCue 2.4s ease-in-out infinite;
}
@keyframes bobCue {
  0%, 100% { transform: translate(-50%, 0); }
  50% { transform: translate(-50%, 8px); }
}
.scroll-cue i { font-size: 1.2rem; }

/* ===== Trust strip ===== */
.trust-strip { background: var(--rm-cream); padding: 4rem 0; }
.trust-strip .trust-intro { font-size: 1.05rem; color: var(--rm-text-muted); max-width: 44rem; margin: 0 auto 2.5rem; text-align: center; }

.stat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
}
.stat-grid .stat-card {
  text-align: center;
  padding: 2rem 1rem;
  background: #fff;
  border-radius: var(--rm-radius-md);
  border: 1px solid rgba(11,26,74,.06);
  box-shadow: var(--rm-shadow-sm);
}
.stat-grid .stat-num {
  font-family: 'Sora', sans-serif;
  font-size: clamp(2rem, 4.5vw, 3rem);
  font-weight: 800;
  color: var(--rm-royal);
  line-height: 1;
  display: inline-flex;
  align-items: baseline;
}
.stat-grid .stat-num .suffix { color: var(--rm-gold); margin-left: .15rem; }
.stat-grid .stat-label {
  margin-top: .65rem;
  color: var(--rm-text-muted);
  font-weight: 500;
}

.logo-strip {
  margin-top: 3rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem 3rem;
  align-items: center;
  justify-items: center;
  opacity: .7;
}
.logo-strip img {
  max-height: 40px;
  width: auto;
  filter: grayscale(100%);
  transition: filter .3s ease, opacity .3s ease;
}
.logo-strip img:hover { filter: grayscale(0%); opacity: 1; }
@media (min-width: 768px) {
  .logo-strip { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* ===== About ===== */
.about-portrait-wrap {
  position: relative;
  padding: 1.25rem 0 1.25rem 1.25rem;
}
.about-portrait-wrap::before {
  content: "";
  position: absolute;
  inset: 0 2rem 2rem 0;
  background: linear-gradient(135deg, var(--rm-royal), var(--rm-sky));
  background-size: 200% 200%;
  border-radius: var(--rm-radius-lg);
  z-index: 0;
  animation: aboutOffset 8s ease-in-out infinite;
}
@keyframes aboutOffset {
  0%, 100% { transform: translate(0,0); background-position: 0% 50%; }
  50% { transform: translate(-6px, 6px); background-position: 100% 50%; }
}
.about-portrait {
  position: relative;
  z-index: 1;
  aspect-ratio: 4/5;
  border-radius: var(--rm-radius-lg);
  overflow: hidden;
  box-shadow: var(--rm-shadow-md);
  background: linear-gradient(135deg, var(--rm-ice), #fff);
}
.about-portrait img { width: 100%; height: 100%; object-fit: cover; }
.about-portrait .placeholder-monogram {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: 'Sora', sans-serif;
  font-weight: 800;
  font-size: 6rem;
  color: var(--rm-royal);
  opacity: .25;
}
.highlight-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin-top: 1.5rem;
}
.highlight-chips .chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .4rem .9rem;
  background: var(--rm-ice);
  color: var(--rm-deep);
  border-radius: 999px;
  font-size: .9rem;
  font-weight: 500;
}
.highlight-chips .chip i { color: var(--rm-royal); }

.about-mission {
  margin-top: 1.5rem;
  padding: 1.25rem 1.5rem;
  border-left: 4px solid var(--rm-gold);
  background: var(--rm-cream);
  border-radius: 0 var(--rm-radius-md) var(--rm-radius-md) 0;
  font-style: italic;
  color: var(--rm-deep);
}

/* ===== Services ===== */
.service-card {
  position: relative;
  height: 100%;
  padding: 2rem 1.75rem;
  background: #fff;
  border-radius: var(--rm-radius-md);
  border: 1px solid rgba(11,26,74,.06);
  box-shadow: var(--rm-shadow-sm);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  display: flex;
  flex-direction: column;
}
.service-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--rm-shadow-md);
  border-color: rgba(30,64,255,.18);
}
.service-card .icon-wrap {
  width: 56px; height: 56px;
  border-radius: 16px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--rm-royal), var(--rm-sky));
  color: #fff;
  font-size: 1.5rem;
  margin-bottom: 1.25rem;
  box-shadow: var(--rm-shadow-glow);
  transition: transform .3s ease;
}
.service-card:hover .icon-wrap { transform: rotate(-6deg) scale(1.06); }
.service-card h3 { font-size: 1.15rem; margin-bottom: .65rem; }
.service-card p { color: var(--rm-text-muted); font-size: .95rem; margin-bottom: 1.25rem; flex: 1; }
.service-card .learn-more {
  font-weight: 600;
  color: var(--rm-royal);
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}
.service-card .learn-more i { transition: transform .2s ease; }
.service-card:hover .learn-more i { transform: translateX(4px); }

/* ===== Showreel ===== */
.showreel-wrap {
  max-width: 980px;
  margin: 0 auto;
  border-radius: var(--rm-radius-lg);
  overflow: hidden;
  box-shadow: var(--rm-shadow-lg);
  border: 1px solid rgba(255,255,255,.1);
}
.showreel-poster {
  position: relative;
  cursor: pointer;
  background: linear-gradient(135deg, var(--rm-royal), var(--rm-deep));
}
.showreel-poster img { width: 100%; display: block; }
.showreel-poster .play-btn {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 80px; height: 80px;
  border-radius: 50%;
  background: var(--rm-gold);
  color: var(--rm-deep-900);
  display: grid; place-items: center;
  font-size: 1.75rem;
  border: none;
  box-shadow: 0 0 0 0 rgba(244,196,48,.6);
  animation: pulseRing 2.4s ease-out infinite;
  transition: transform .25s ease;
}
.showreel-poster:hover .play-btn { transform: translate(-50%, -50%) scale(1.08); }
@keyframes pulseRing {
  0%   { box-shadow: 0 0 0 0 rgba(244,196,48,.55); }
  70%  { box-shadow: 0 0 0 28px rgba(244,196,48,0); }
  100% { box-shadow: 0 0 0 0 rgba(244,196,48,0); }
}

/* ===== Portfolio ===== */
.portfolio-card {
  position: relative;
  border-radius: var(--rm-radius-md);
  overflow: hidden;
  background: var(--rm-deep);
  aspect-ratio: 4/3;
  cursor: pointer;
  box-shadow: var(--rm-shadow-sm);
  transition: transform .3s ease, box-shadow .3s ease;
}
.portfolio-card:hover { transform: translateY(-4px); box-shadow: var(--rm-shadow-md); }
.portfolio-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.portfolio-card:hover img { transform: scale(1.06); }
.portfolio-card .overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: 1.25rem;
  background: linear-gradient(180deg, transparent 40%, rgba(6,14,46,.92) 100%);
  color: #fff;
  opacity: .9;
}
.portfolio-card .overlay .cat {
  display: inline-block;
  padding: .25rem .65rem;
  background: var(--rm-gold);
  color: var(--rm-deep-900);
  font-weight: 600;
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  border-radius: 999px;
  margin-bottom: .55rem;
}
.portfolio-card .overlay h4 { color: #fff; font-size: 1.05rem; margin: 0; }
.portfolio-card .overlay .client { font-size: .85rem; color: rgba(255,255,255,.75); }

/* ===== Testimonials ===== */
.testimonial-carousel { max-width: 920px; margin: 0 auto; }
.testimonial-card {
  background: #fff;
  border-radius: var(--rm-radius-lg);
  padding: 3rem 2.5rem;
  text-align: center;
  border: 1px solid rgba(11,26,74,.06);
  box-shadow: var(--rm-shadow-md);
  margin: 0 1rem;
}
.testimonial-card .quote-mark {
  font-size: 3.5rem;
  color: var(--rm-gold);
  line-height: .5;
  margin-bottom: 1rem;
  font-family: 'Sora', sans-serif;
}
.testimonial-card .quote {
  font-size: 1.2rem;
  font-style: italic;
  color: var(--rm-deep);
  line-height: 1.55;
}
.testimonial-card .stars { color: var(--rm-gold); margin: 1.25rem 0 .75rem; }
.testimonial-card .author {
  font-family: 'Sora', sans-serif;
  font-weight: 700;
  color: var(--rm-deep-900);
  margin-top: .5rem;
}
.testimonial-card .role { color: var(--rm-text-muted); font-size: .9rem; }

.carousel-control-prev, .carousel-control-next {
  width: 50px;
}
.carousel-control-prev-icon, .carousel-control-next-icon {
  width: 44px; height: 44px;
  border-radius: 50%;
  background-color: var(--rm-royal);
  background-size: 50% 50%;
  box-shadow: var(--rm-shadow-md);
}
.section-dark .carousel-control-prev-icon, .section-dark .carousel-control-next-icon {
  background-color: var(--rm-gold);
  filter: invert(0);
}

/* ===== Packages ===== */
.pricing-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 768px) { .pricing-grid { grid-template-columns: repeat(3, 1fr); align-items: stretch; } }

.pricing-card {
  position: relative;
  background: #fff;
  border-radius: var(--rm-radius-lg);
  padding: 2.25rem 1.75rem;
  border: 1.5px solid rgba(11,26,74,.08);
  display: flex;
  flex-direction: column;
  transition: transform .25s ease, box-shadow .25s ease;
}
.pricing-card:hover { transform: translateY(-4px); box-shadow: var(--rm-shadow-md); }
.pricing-card.highlighted {
  border: 2px solid var(--rm-gold);
  background: linear-gradient(180deg, #fff, var(--rm-cream));
  box-shadow: var(--rm-shadow-lg);
  transform: scale(1.02);
}
.pricing-card.highlighted:hover { transform: scale(1.02) translateY(-4px); }
.pricing-card .ribbon {
  position: absolute;
  top: -14px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(135deg, var(--rm-gold), #FFD96A);
  background-size: 200% 200%;
  color: var(--rm-deep-900);
  padding: .35rem 1rem;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  box-shadow: 0 6px 24px rgba(244,196,48,.4);
  animation: ribbonShine 4s ease-in-out infinite;
}
@keyframes ribbonShine {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
.pricing-card .pkg-name {
  font-family: 'Sora', sans-serif;
  font-weight: 700;
  color: var(--rm-deep-900);
  font-size: 1.35rem;
}
.pricing-card .pkg-tagline {
  color: var(--rm-text-muted);
  margin-bottom: 1.25rem;
  min-height: 2.6em;
}
.pricing-card .pkg-price {
  font-family: 'Sora', sans-serif;
  font-weight: 800;
  color: var(--rm-royal);
  font-size: 1.5rem;
  border-top: 1px dashed rgba(11,26,74,.12);
  border-bottom: 1px dashed rgba(11,26,74,.12);
  padding: .85rem 0;
  margin-bottom: 1.25rem;
}
.pricing-card .features {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  flex: 1;
}
.pricing-card .features li {
  position: relative;
  padding-left: 1.75rem;
  margin-bottom: .65rem;
  color: var(--rm-text);
}
.pricing-card .features li::before {
  content: "\F26B";
  font-family: "bootstrap-icons";
  position: absolute;
  left: 0;
  color: var(--rm-royal);
  font-weight: bold;
}
.pricing-card.highlighted .features li::before { color: var(--rm-gold-600); }

/* ===== Booking ===== */
.booking-card {
  background: #fff;
  border-radius: var(--rm-radius-lg);
  overflow: hidden;
  box-shadow: var(--rm-shadow-lg);
  display: grid;
  grid-template-columns: 1fr;
}
@media (min-width: 992px) { .booking-card { grid-template-columns: 5fr 7fr; } }
.booking-side {
  padding: 3rem 2rem;
  color: #fff;
  background: rgba(6,14,46,0.80);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.booking-side::before,
.booking-side::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(60px);
}
.booking-side::before {
  width: 26rem; height: 22rem;
  top: -8rem; left: -8rem;
  background: radial-gradient(circle, rgba(79,123,255,.7), transparent 65%);
  animation: secDriftA 18s ease-in-out infinite alternate;
}
.booking-side::after {
  width: 22rem; height: 20rem;
  bottom: -8rem; right: -6rem;
  background: radial-gradient(circle, rgba(244,196,48,.35), transparent 65%);
  animation: secDriftB 24s ease-in-out infinite alternate-reverse;
}
.booking-side h3 { color: #fff; font-size: 1.6rem; }
.booking-side .feat-list { list-style: none; padding: 0; margin: 1.5rem 0 0; }
.booking-side .feat-list li {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  margin-bottom: .85rem;
  color: rgba(255,255,255,.9);
}
.booking-side .feat-list i { color: var(--rm-gold); margin-top: .2rem; }

.booking-form { padding: 2.5rem 2rem; }
.booking-form .form-floating > label { font-size: .95rem; }
.booking-form .invalid-feedback { display: block; min-height: 1.2em; }

.thank-you-state {
  text-align: center;
  padding: 3rem 2rem;
}
.thank-you-state .icon-circle {
  width: 80px; height: 80px;
  border-radius: 50%;
  background: var(--rm-success);
  color: #fff;
  display: grid; place-items: center;
  font-size: 2.5rem;
  margin: 0 auto 1.5rem;
  box-shadow: 0 10px 30px rgba(22,163,106,.35);
}

/* ===== Contact ===== */
.contact-tile {
  background: #fff;
  border-radius: var(--rm-radius-md);
  padding: 1.75rem 1.25rem;
  text-align: center;
  border: 1px solid rgba(11,26,74,.06);
  height: 100%;
  transition: transform .25s ease, box-shadow .25s ease;
}
.contact-tile:hover { transform: translateY(-4px); box-shadow: var(--rm-shadow-md); }
.contact-tile .icon {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--rm-ice);
  color: var(--rm-royal);
  display: grid; place-items: center;
  font-size: 1.5rem;
  margin: 0 auto 1rem;
}
.contact-tile .label { font-weight: 600; color: var(--rm-deep-900); }
.contact-tile .value { color: var(--rm-text-muted); font-size: .95rem; word-break: break-word; }
.contact-tile a { color: var(--rm-royal); font-weight: 600; }

.social-row {
  display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap;
  margin-top: 2rem;
}
.social-row a {
  display: inline-grid; place-items: center;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--rm-deep);
  color: #fff;
  font-size: 1.15rem;
  transition: background .2s ease, transform .2s ease;
}
.social-row a:hover { background: var(--rm-gold); color: var(--rm-deep-900); transform: translateY(-3px); }

/* ===== Newsletter ===== */
.newsletter-band {
  background: rgba(6,14,46,0.80);
  color: #fff;
  border-radius: var(--rm-radius-lg);
  padding: 3rem 2rem;
  text-align: center;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.newsletter-band::before,
.newsletter-band::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(60px);
}
.newsletter-band::before {
  width: 22rem; height: 22rem;
  top: -10rem; right: -8rem;
  background: radial-gradient(circle, rgba(244,196,48,.35), transparent 70%);
  animation: secDriftB 22s ease-in-out infinite alternate-reverse;
}
.newsletter-band::after {
  width: 26rem; height: 22rem;
  bottom: -10rem; left: -10rem;
  background: radial-gradient(circle, rgba(79,123,255,.55), transparent 65%);
  animation: secDriftA 26s ease-in-out infinite alternate;
}
.newsletter-band h3 { color: #fff; }
.newsletter-band .newsletter-form {
  max-width: 500px;
  margin: 1.5rem auto 0;
}
.newsletter-band .form-control {
  border: none;
  padding: 1rem 1.25rem;
  border-radius: 999px 0 0 999px;
}
.newsletter-band .btn {
  border-radius: 0 999px 999px 0;
  padding-inline: 1.5rem;
}

/* ===== Footer ===== */
.site-footer {
  background: rgba(6,14,46,0.95);
  color: rgba(255,255,255,.75);
  padding: 4rem 0 2rem;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.site-footer::before {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  width: 40rem; height: 30rem;
  top: -14rem; right: -10rem;
  border-radius: 50%;
  filter: blur(80px);
  background: radial-gradient(circle, rgba(30,64,255,.35), transparent 65%);
  animation: secDriftA 32s ease-in-out infinite alternate;
}
.site-footer h5 { color: #fff; font-size: 1rem; margin-bottom: 1.25rem; }
.site-footer a { color: rgba(255,255,255,.75); }
.site-footer a:hover { color: var(--rm-gold); }
.site-footer .footer-brand {
  font-family: 'Sora', sans-serif;
  font-weight: 800;
  font-size: 1.35rem;
  color: #fff;
  margin-bottom: .35rem;
}
.site-footer .footer-tagline { font-size: .95rem; max-width: 22rem; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.08);
  padding-top: 1.5rem;
  margin-top: 2.5rem;
  font-size: .85rem;
  color: rgba(255,255,255,.55);
}

/* ===== Services page accordion ===== */
.services-accordion .accordion-item {
  border: 1px solid rgba(11,26,74,.08);
  border-radius: var(--rm-radius-md) !important;
  margin-bottom: 1rem;
  overflow: hidden;
}
.services-accordion .accordion-button {
  font-family: 'Sora', sans-serif;
  font-weight: 700;
  color: var(--rm-deep-900);
  padding: 1.25rem 1.5rem;
  background: #fff;
}
.services-accordion .accordion-button:not(.collapsed) {
  background: var(--rm-ice);
  color: var(--rm-royal-700);
  box-shadow: none;
}
.services-accordion .accordion-button .service-icon {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--rm-royal), var(--rm-sky));
  color: #fff;
  display: inline-grid; place-items: center;
  margin-right: .85rem;
  font-size: 1.05rem;
}
.services-accordion .accordion-button:focus { box-shadow: 0 0 0 3px rgba(244,196,48,.3); }
.services-accordion .accordion-body { padding: 1.5rem; }
.services-accordion .outcomes {
  display: grid;
  grid-template-columns: 1fr;
  gap: .5rem;
  margin-top: 1rem;
}
@media (min-width: 768px) { .services-accordion .outcomes { grid-template-columns: 1fr 1fr; } }
.services-accordion .outcomes .out-item {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .55rem .85rem;
  background: var(--rm-cream);
  border-radius: var(--rm-radius-sm);
}
.services-accordion .outcomes .out-item i { color: var(--rm-gold-600); }

/* ===== Portfolio page filter ===== */
.filter-bar {
  display: flex; flex-wrap: wrap; gap: .5rem;
  justify-content: center;
  margin-bottom: 2rem;
}
.filter-bar .btn {
  border-radius: 999px;
  font-size: .9rem;
  padding: .5rem 1.1rem;
}
.btn-check:checked + .btn-filter,
.btn-filter:hover {
  background: var(--rm-royal);
  color: #fff;
  border-color: var(--rm-royal);
}
.btn-filter {
  background: #fff;
  color: var(--rm-deep);
  border: 1.5px solid rgba(11,26,74,.12);
}

/* ===== Lightbox modal ===== */
.lightbox-modal .modal-content {
  background: rgba(6, 14, 46, .96);
  color: #fff;
  border-radius: var(--rm-radius-lg);
  border: 1px solid rgba(255,255,255,.1);
}
.lightbox-modal .btn-close {
  filter: invert(1);
  opacity: .9;
}
.lightbox-modal img { width: 100%; border-radius: var(--rm-radius-md); }

/* ===== Page progress bar ===== */
.page-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 100%;
  background: transparent;
  z-index: 2000;
  pointer-events: none;
}
.page-progress .bar {
  height: 100%;
  width: 30%;
  background: linear-gradient(90deg, var(--rm-gold), var(--rm-royal));
  animation: indet 1.4s ease-in-out infinite;
  border-radius: 0 4px 4px 0;
}
.page-progress.is-hidden { display: none; }
@keyframes indet {
  0%   { transform: translateX(-100%); width: 30%; }
  50%  { transform: translateX(120%); width: 60%; }
  100% { transform: translateX(220%); width: 30%; }
}

/* ===== Responsive tweaks ===== */
@media (max-width: 575.98px) {
  .hero { padding: 7rem 0 4rem; }
  .hero-stats { grid-template-columns: 1fr; }
  .stat-grid { grid-template-columns: 1fr; }
  .testimonial-card { padding: 2rem 1.5rem; margin: 0 .5rem; }
}