/* PepX inner-page hero â?? "coa-hero" component, matching the original
   reference site's shared header (used on FAQ, Research/COA Library, and
   any future inner page). Paste this into Appearance â?? Customize â??
   Additional CSS, REPLACING the older "PepX page hero" block that used
   .pepx-page-hero / .hero-vial (that version had no min-height, which is
   why the header collapsed short and the vials overflowed/overlapped
   content below it). Markup: a <section class="coa-hero"> with four
   .coa-hero-vial.coa-vial-1..4 wrappers plus one .coa-hero-center
   holding the badge/title/subtext. */

.coa-hero {
  position: relative;
  min-height: 60vh;
  background: var(--csc-bg-alt, #f6f8fc);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden !important;
  margin-bottom: 4rem;
}

.coa-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 80% at 50% 50%, rgba(26, 36, 114, 0.1) 0%, transparent 65%);
  pointer-events: none;
}

.coa-hero-vial {
  position: absolute;
  aspect-ratio: 1 / 1.5;
  pointer-events: none;
}

.coa-hero-vial img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 16px 32px rgba(17, 19, 24, 0.5));
  display: block;
}

.coa-vial-1 {
  left: 1%;
  top: 5%;
  width: 12vw;
  max-width: 160px;
  transform: rotate(-8deg) translateY(0);
  z-index: 1;
  animation: coaFloat1 5s ease-in-out infinite;
}
.coa-vial-2 {
  right: 10%;
  top: 5%;
  width: 14vw;
  max-width: 190px;
  transform: rotate(12deg) translateY(0);
  z-index: 2;
  animation: coaFloat2 4.5s ease-in-out infinite;
}
.coa-vial-3 {
  left: 10%;
  bottom: 0%;
  width: 16vw;
  max-width: 210px;
  transform: rotate(-5deg) translateY(0);
  z-index: 2;
  animation: coaFloat3 5.5s ease-in-out infinite;
}
.coa-vial-4 {
  right: 1%;
  bottom: 0%;
  width: 10vw;
  max-width: 130px;
  transform: rotate(15deg) translateY(0);
  z-index: 1;
  animation: coaFloat4 6s ease-in-out infinite;
}

@keyframes coaFloat1 { 0%,100% { transform: rotate(-8deg) translateY(0); } 50% { transform: rotate(-8deg) translateY(-12px); } }
@keyframes coaFloat2 { 0%,100% { transform: rotate(12deg) translateY(0); } 50% { transform: rotate(12deg) translateY(-14px); } }
@keyframes coaFloat3 { 0%,100% { transform: rotate(-5deg) translateY(0); } 50% { transform: rotate(-5deg) translateY(-10px); } }
@keyframes coaFloat4 { 0%,100% { transform: rotate(15deg) translateY(0); } 50% { transform: rotate(15deg) translateY(-8px); } }

.coa-hero-center {
  position: relative;
  z-index: 5;
  text-align: center;
  max-width: 500px;
  padding: 0 1rem;
}

.coa-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: transparent;
  border: 1px solid rgba(26, 36, 114, 0.3);
  color: var(--csc-navy, #1a2472);
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 999px;
  padding: 0.35rem 0.85rem;
  margin-bottom: 1.1rem;
  line-height: normal;
}
.coa-hero-badge svg {
  color: var(--csc-navy, #1a2472);
  flex-shrink: 0;
}

.coa-hero-title {
  font-size: clamp(1.8rem, 4vw, 3.2rem);
  font-weight: 700;
  color: var(--csc-navy, #1a2472);
  letter-spacing: 0.02em;
  line-height: 1.1;
  margin: 0 0 1rem;
}

.coa-hero-sub {
  color: var(--csc-text-muted, #5b6472);
  font-size: 0.95rem;
  line-height: 1.75;
  max-width: 400px;
  margin: 0 auto;
}

@media (max-width: 600px) {
  .coa-vial-1, .coa-vial-2, .coa-vial-3, .coa-vial-4 {
    display: none;
  }
  .coa-hero {
    height: auto;
    min-height: 0;
    padding: 4rem 1rem;
  }
  .coa-hero-center {
    max-width: 90%;
  }
}


/* Full-bleed fix: Astra wraps page-template content in a flex
   .ast-container, which breaks the standard calc(vw) breakout math.
   Same fix used for .csc-global-cta — force that ancestor to block
   layout, then break .coa-hero out to the full viewport width. */
.ast-container:has(.coa-hero) {
  display: block !important;
}
.coa-hero {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}


/* FAQ category section headings — match the .csc-faq-accordion's
   760px centered column so the heading and the accordion items below
   it share the same left/right edges instead of the heading spanning
   the full container width. */
.csc-faq-section-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--csc-navy, #1a2472);
  max-width: 760px;
  margin: 0 auto 16px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--csc-blue-border, #d9e5fb);
}
.csc-faq-section-title:not(:first-of-type) {
  margin-top: 48px;
}