@charset "UTF-8";
/* ══════════════════════════════════════════════════════════
   HEADER.CSS — the fixed floating nav pill.
══════════════════════════════════════════════════════════ */
/* ════════════════════════════════════════
   HEADER
════════════════════════════════════════ */
/* DS §04 Nav: bg #301B51 · r-full · gap-5 */
header{position:fixed;top:1rem;left:50%;transform:translateX(-50%);z-index:999;background: #ffffff;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-radius:var(--r-pill);padding: 0.7rem 1.25rem 0.7rem 0.9rem;display:flex;align-items:center;gap:2.2rem;transition:background .4s;white-space:nowrap}
.hdr-icon{/*background:rgba(100,70,160,.6);border-radius:50%;width: 50px;*/height: 50px;display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden}
.hdr-icon img{width:100%;height:100%;object-fit:cover}
.hdr-nav{display:flex;align-items:center;gap:2.2rem}
/* DS: Nav links font-display 15px white */
.hdr-nav a{font-family:var(--font-display);letter-spacing: 0;color: var(--c-purple-dark);transition:color .3s;text-decoration:none;text-transform:uppercase}
.hdr-nav a:hover{color:var(--color-white)}
/* DS CTA pill: bg #C1637C (accent) · font-display · r-pill */
.hdr-cta{background:var(--color-pink);color:var(--color-white);border-radius:var(--r-pill);padding: 0.7rem 1.3rem;font-family:var(--font-display);transition:var(--tr)}
.hdr-cta:hover{background:#a84f68;color:var(--color-white)}

/* ════════════════════════════════════════
   HEADER CTA — same label-swap as .btn-ss
   Colour, font and padding above are untouched;
   this only adds the motion.
════════════════════════════════════════ */
.hdr-cta{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;text-align:center}
/* invisible sizer = the longer of the two labels, so the pill is wide
   enough for both and neither one clips mid-swap */
.hdr-cta .txt-size{visibility:hidden;display:block;pointer-events:none}
/* both labels share one transition, exactly like .btn-ss */
.hdr-cta .txt-active,
.hdr-cta .txt-hover{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  transition:
    transform .42s cubic-bezier(.34,1.4,.64,1),
    opacity   .38s var(--ease);
  will-change:transform,opacity;
}
/* DEFAULT — active label centred, hover label parked LEFT at -8deg */
.hdr-cta .txt-active{transform:translateX(0) rotate(0deg);opacity:1}
.hdr-cta .txt-hover{transform:translateX(-110%) rotate(-8deg);opacity:0}
/* HOVER — active exits RIGHT +8deg, hover label enters and straightens */
.hdr-cta:hover .txt-active{transform:translateX(110%) rotate(8deg);opacity:0}
.hdr-cta:hover .txt-hover{transform:translateX(0) rotate(0deg);opacity:1}


a.hdr-cta span,
a.hdr-cta:hover span, a.hdr-cta[aria-current="page"] span {
    color: #ffffff !important;
}

/* ── GLASS ──
   The rule above declares backdrop-filter but then paints a solid
   white background over it, which cancels the blur. This makes the
   pill translucent so the blur is actually visible. */
header{
  background:rgba(255,255,255,.62);
  backdrop-filter:blur(18px) saturate(180%);
  -webkit-backdrop-filter:blur(18px) saturate(180%);
  border:1px solid rgba(255,255,255,.75);
  box-shadow:0 8px 32px rgba(48,27,81,.12),inset 0 1px 0 rgba(255,255,255,.9);
  transition:background .4s var(--ease),box-shadow .4s var(--ease);
}
header:hover{background:rgba(255,255,255,.78)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  header{background:rgba(255,255,255,.94)}
}
.hdr-icon img{width:auto;height:100%;object-fit:contain}
/* was white-on-white and therefore invisible */
.hdr-nav a:hover,.hdr-nav a[aria-current="page"]{color:var(--color-purple)}
.hdr-cta:hover{background:var(--color-purple);color:var(--color-white)}

/* ══════════════════════════════════════════════════════════
   HAMBURGER — mobile only
   Desktop is untouched: the button is hidden and .hdr-nav
   stays the inline row it has always been.

   Below 992px the pill shrinks to logo + burger, and the nav
   drops beneath it as a glass panel matching the header.
══════════════════════════════════════════════════════════ */
.hdr-toggle{
  display:none;
  width:42px;height:42px;flex-shrink:0;
  flex-direction:column;align-items:center;justify-content:center;gap:5px;
  background:transparent;border:0;border-radius:50%;
  cursor:pointer;padding:0;
  -webkit-tap-highlight-color:transparent;
}
.hdr-toggle:focus-visible{outline:3px solid var(--color-pink);outline-offset:2px}
.hdr-bar{
  display:block;width:22px;height:2.5px;border-radius:2px;
  background:var(--color-dark);
  transition:transform .32s var(--ease),opacity .2s var(--ease);
}
/* burger → X */
header.nav-open .hdr-bar:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
header.nav-open .hdr-bar:nth-child(2){opacity:0}
header.nav-open .hdr-bar:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

@media(max-width:991px){
  header{gap:.85rem;padding:.5rem .65rem .5rem .7rem}
  .hdr-icon{height:42px}
  .hdr-toggle{display:flex}

  .hdr-nav{
    position:absolute;
    top:calc(100% + .55rem);
    left:0;right:0;
    min-width:min(78vw,300px);
    flex-direction:column;
    align-items:stretch;
    gap:.15rem;
    padding:.65rem;
    border-radius:26px;
    background:rgba(255,255,255,.82);
    backdrop-filter:blur(18px) saturate(180%);
    -webkit-backdrop-filter:blur(18px) saturate(180%);
    border:1px solid rgba(255,255,255,.75);
    box-shadow:0 14px 40px rgba(48,27,81,.20);
    /* hidden but still measurable, so the panel does not jump on open */
    opacity:0;visibility:hidden;transform:translateY(-10px);
    transition:opacity .28s var(--ease),transform .28s var(--ease),visibility .28s;
  }
  header.nav-open .hdr-nav{opacity:1;visibility:visible;transform:translateY(0)}

  .hdr-nav a{
    display:block;
    padding:.7rem .9rem;
    border-radius:18px;
    font-size:1.25rem;
    text-align:left;
    transition:background .25s var(--ease),color .25s var(--ease);
  }
  .hdr-nav a:not(.hdr-cta):hover,
  .hdr-nav a:not(.hdr-cta)[aria-current="page"]{background:var(--color-lavender)}

  /* the CTA keeps its pink pill, full width at the foot of the panel */
  .hdr-nav .hdr-cta{margin-top:.35rem;text-align:center;border-radius:22px;padding:.8rem 1rem}
  /* the label-swap needs a fixed box; in a stacked panel it just sits still */
  .hdr-nav .hdr-cta .txt-size{display:none}
  .hdr-nav .hdr-cta .txt-hover{display:none}
  .hdr-nav .hdr-cta .txt-active{position:static;transform:none;opacity:1}
}

@media(max-width:400px){
  .hdr-nav{min-width:min(86vw,300px)}
}