/* ============================================================
   HEADER — floating white pill (reference: dentix.framer.website)
   One consistent header on every page: a rounded white capsule that
   floats with margin over the content, logo left, centered nav,
   green CTA pill right. Overrides the older two-tier header styling.
   ============================================================ */
.header--pill {
  background: transparent !important;
  padding-top: clamp(10px, 1.4vw, 16px);
  box-shadow: none !important;
}
.header--pill .header__bar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
  background: #fff;
  border-radius: 20px;
  padding: .7rem .7rem .7rem 1.7rem;
  box-shadow: 0 12px 34px -14px rgba(16, 24, 32, .28), 0 1px 0 rgba(16, 24, 32, .05);
  transition: box-shadow .35s var(--ease);
}
.header--pill.scrolled .header__bar {
  box-shadow: 0 16px 44px -14px rgba(16, 24, 32, .34), 0 1px 0 rgba(16, 24, 32, .06);
}

.header--pill .logo { color: var(--ink); }
.header--pill .logo small { color: var(--ink-40); }

.header--pill .nav {
  justify-self: center;
  padding: 0;
  gap: clamp(.3rem, 1.4vw, 1.5rem);
}
.header--pill .nav__link {
  padding: .5rem .2rem;
  color: var(--ink);
  opacity: .78;
}
.header--pill .nav__link:hover,
.header--pill .nav__link.active { opacity: 1; }
.header--pill .nav__link.active::after {
  content: "";
  position: absolute;
  left: .2rem; right: .2rem; bottom: 0;
  height: 2px; border-radius: 2px;
  background: var(--green);
}

/* CTA pill on the right (reuse .hcta) */
.header--pill .hcta {
  justify-self: end;
  background: var(--green);
  color: #fff;
  padding: .5rem .55rem .5rem 1.15rem;
}
.header--pill .hcta:hover { background: #2E8A1E; color: #fff; }

/* dropdown panels: anchor to the pill row cleanly */
.header--pill .drop { margin-top: .7rem; }

@media (max-width: 1020px) {
  .header--pill .header__bar {
    grid-template-columns: auto auto;
    justify-content: space-between;
    padding: .45rem .5rem .45rem 1.1rem;
  }
  /* nav becomes the fullscreen mmenu on mobile; hide the inline pill CTA */
  .header--pill .hcta { display: none; }
  .header--pill .burger { display: flex; }
}