/* Floating glass navigation: a centred pill that hides on scroll down, returns on scroll up
   or when the pointer comes near the top, and opens up on hover. */
.pill-nav {
  --pn-bg: rgba(241, 236, 226, 0.55);
  --pn-fg: #1d1d1b;
  --pn-line: rgba(29, 29, 27, 0.1);
  --pn-accent: var(--accent, #6f8faf);
  position: fixed; top: 16px; left: 50%; z-index: 100;
  display: flex; align-items: center; gap: 6px;
  padding: 6px; border-radius: 999px;
  color: var(--pn-fg);
  background: var(--pn-bg);
  backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border: 1px solid var(--pn-line);
  box-shadow: 0 10px 40px rgba(20, 20, 18, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  transform: translate(-50%, 0) scale(1);
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), background 0.4s, box-shadow 0.4s, padding 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  font-family: "Barlow Semi Condensed", sans-serif;
}
.pill-nav.is-dark { --pn-bg: rgba(29, 29, 27, 0.5); --pn-fg: #f1ece2; --pn-line: rgba(241, 236, 226, 0.12); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.08); }
.pill-nav.is-away { transform: translate(-50%, calc(-100% - 30px)) scale(0.92); }
.pill-nav:hover, .pill-nav:focus-within { padding: 8px; box-shadow: 0 16px 50px rgba(20, 20, 18, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.5); }
.pill-nav a { color: inherit; text-decoration: none; }
.pn-brand { display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 10px; border-radius: 999px; }
.pn-brand svg { width: 16px; height: auto; transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1); }
.pill-nav:hover .pn-brand svg { transform: scale(1.2); }
.pn-brand span { font-family: "Archivo Black", sans-serif; text-transform: uppercase; font-size: 13px; letter-spacing: 0.02em; white-space: nowrap; }
.pn-links { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.pn-links a {
  position: relative; display: inline-flex; overflow: hidden; height: 36px; align-items: center;
  padding: 0 14px; border-radius: 999px; font-weight: 600; font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase;
  transition: background 0.3s, color 0.3s;
}
.pn-links a:hover, .pn-links a[aria-current="page"] { background: color-mix(in srgb, currentColor 9%, transparent); }
/* text roll: the label slides up and a copy slides in */
.pn-clip { display: inline-block; overflow: hidden; height: 1.15em; line-height: 1.15em; vertical-align: middle; }
.pn-roll { display: inline-block; position: relative; transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1); }
.pn-roll::after { content: attr(data-t); position: absolute; left: 0; top: 100%; }
.pn-links a:hover .pn-roll, .pn-cta:hover .pn-roll { transform: translateY(-100%); }
.pn-cta {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; overflow: hidden; padding: 0 18px; margin-left: 4px;
  border-radius: 999px; background: var(--pn-fg); color: #f1ece2 !important; font-weight: 700; font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase;
  transition: background 0.35s, color 0.35s, transform 0.35s;
}
.pill-nav.is-dark .pn-cta { color: #1d1d1b !important; }
.pn-cta:hover { background: var(--pn-accent); color: #1d1d1b !important; }
.pn-cta i { width: 7px; height: 7px; border-radius: 50%; background: var(--pn-accent); transition: background 0.35s; }
.pn-cta:hover i { background: #1d1d1b; }
.pn-hotzone { position: fixed; left: 0; right: 0; top: 0; height: 80px; z-index: 99; pointer-events: none; }
.pn-menu, .pn-panel { display: none; }
@media (max-width: 720px) {
  .pill-nav { top: 10px; width: calc(100% - 20px); justify-content: space-between; flex-wrap: wrap; }
  .pn-links, .pn-cta { display: none; }
  .pn-menu { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--pn-fg); }
  .pn-menu span, .pn-menu span::before { display: block; width: 18px; height: 2px; background: var(--pn-bg); position: relative; transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
  .pill-nav.is-dark .pn-menu span, .pill-nav.is-dark .pn-menu span::before { background: #1d1d1b; }
  .pn-menu span { transform: translateY(-3px); }
  .pn-menu span::before { content: ""; position: absolute; top: 6px; }
  .pill-nav.is-open .pn-menu span { transform: rotate(45deg); }
  .pill-nav.is-open .pn-menu span::before { transform: translateY(-6px) rotate(-90deg); }
  .pn-panel { display: grid; width: 100%; gap: 4px; max-height: 0; overflow: hidden; transition: max-height 0.5s cubic-bezier(0.16, 1, 0.3, 1), padding 0.5s; }
  .pill-nav.is-open { border-radius: 24px; }
  .pill-nav.is-open .pn-panel { max-height: 360px; padding: 10px 8px 6px; }
  .pn-panel a { font-family: "Archivo Black", sans-serif; text-transform: uppercase; font-size: 30px; line-height: 1.1; padding: 6px 8px; }
  .pn-panel a.acc { color: var(--pn-accent); }
}