/* ==========================================================================
   APEX MEDIA — packages.css
   Additive stylesheet for the Packages page only.
   Loaded AFTER style.css — reuses the same design tokens (colors, type,
   spacing, easing) defined in :root. Does not modify or override any
   Home Page selector.
   ========================================================================== */

/* ---- Breadcrumb on inner-page hero ---- */
.breadcrumb{
  display:flex; align-items:center; justify-content:center; gap:8px;
  font-size:12.5px; color:var(--gray-dim); letter-spacing:.04em; margin:0 0 22px;
}
.breadcrumb a{ color:var(--gray-dim); transition:color .3s; }
.breadcrumb a:hover{ color:var(--red-bright); }
.breadcrumb span{ color:var(--gray-dim); opacity:.6; }
.breadcrumb em{ font-style:normal; color:var(--white); }

/* ---- Active nav state on the current page ---- */
.main-nav a.active{ color:var(--white); }
.main-nav a.active::after{ width:100%; }

/* ==========================================================================
   HERO — compact + premium package-tier chips
   ========================================================================== */
.hero-compact{ min-height:auto; padding:150px 32px 90px; }
.hero-compact .hero-title{ font-size:clamp(44px,7.4vw,104px); margin-bottom:20px; }
.hero-compact .hero-sub{ margin:0 auto 40px; }

.hero-packages{ isolation:isolate; }

.hero-chip{
  position:absolute; z-index:1;
  display:flex; flex-direction:column; gap:2px;
  padding:12px 20px; border-radius:14px;
  min-width:140px; white-space:nowrap;
  background:rgba(19,19,19,.72);
  border:1px solid var(--line-strong);
  backdrop-filter:blur(10px);
  box-shadow:0 18px 40px -18px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.02) inset;
  opacity:0; animation:chipIn 1s var(--ease) forwards, chipFloat 7s ease-in-out infinite;
}
.chip-label{ font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--red-bright); font-weight:800; }
.chip-price{ font-family:var(--font-display); font-size:20px; color:#fff; }
.chip-price em{ font-style:normal; font-family:var(--font-body); font-size:11px; color:var(--gray-dim); font-weight:600; margin-left:2px; }

/* Each chip anchored to its own side with generous clearance so none
   of them crowd each other, the navbar/breadcrumb/heading, or the hero
   copy — even with the gentle floating bounce (chipFloat) layered on
   top. One chip sits on the left, two are stacked on the right, all
   comfortably below the fixed navbar and vertically spread out. */
.chip-1{ top:44%; left:3%; animation-delay:.2s, 0s; }
.chip-2{ top:20%; right:4%; animation-delay:.4s, 1.2s; }
.chip-3{ top:66%; right:3%; animation-delay:.6s, 2.4s; }

@keyframes chipIn{ from{ opacity:0; transform:translateY(14px) scale(.94); } to{ opacity:1; transform:translateY(0) scale(1); } }
@keyframes chipFloat{ 0%,100%{ transform:translateY(0) rotate(-1.2deg); } 50%{ transform:translateY(-14px) rotate(1.2deg); } }

@media (max-width:1240px){
  .hero-chip{ display:none; }
}

/* ==========================================================================
   ALL PACKAGES INCLUDE — reuses .service-grid / .service-card language
   ========================================================================== */
.includes{ padding:150px 0; background:var(--black); }
.includes-grid{ grid-template-columns:repeat(4,1fr); }
.includes-grid .service-card{ padding:26px 22px 24px; }
.includes-grid .service-title{ font-size:15px; }

@media (max-width:1080px){
  .includes-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px){
  .includes-grid{ grid-template-columns:1fr; }
  .hero-compact{ padding:130px 20px 80px; }
}