/* Unified navigation for every page (behaviour in assets/js/menu.js).
   Top of page: the full bar — logo, inline links, green LET'S TALK pill.
   Scrolled: floating LET'S TALK + MENU pills that follow you down the page.
   MENU opens a right-hand panel in the site branding; it closes on scroll,
   backdrop click, link click, X or Esc. */

#tw-menu {
  font-family: Figtree, "Figtree Fallback", system-ui, sans-serif;
}
:where(#tw-menu *) { box-sizing: border-box; margin: 0; padding: 0; }

/* ---- top bar (only at the very top of the page) ---- */
.mn-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 9500;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.8rem 3vw;
}
/* empty middle of the bar never blocks clicks; logo + right group do */
.mn-bar { pointer-events: none; }
.mn-logo, .mn-bar-right { pointer-events: auto; }
/* the bar doesn't just fade — its right-side items cascade upward.
   the logo STAYS (it's the persistent anchor). */
.mn-logo, .mn-bar-link, .mn-start {
  transition: transform 0.55s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.4s ease,
              background 0.35s ease, border-color 0.35s ease, color 0.35s ease;
}
#tw-menu.mn-scrolled .mn-bar-link,
#tw-menu.mn-scrolled .mn-start {
  transform: translateY(-30px);
  opacity: 0;
  pointer-events: none;
}
#tw-menu.mn-scrolled .mn-bar-right > *:nth-child(1) { transition-delay: 0s; }
#tw-menu.mn-scrolled .mn-bar-right > *:nth-child(2) { transition-delay: 0.05s; }
#tw-menu.mn-scrolled .mn-bar-right > *:nth-child(3) { transition-delay: 0.1s; }
#tw-menu.mn-scrolled .mn-bar-right > *:nth-child(4) { transition-delay: 0.15s; }
#tw-menu.mn-scrolled .mn-bar-right > *:nth-child(5) { transition-delay: 0.2s; }
.mn-logo {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.13em;
  color: #fff;
  text-decoration: none;
}
/* adaptive: over a light section the logo turns dark (green cursor stays) */
#tw-menu.mn-light .mn-logo { color: #1a1a1a; }
#tw-menu.mn-open .mn-logo { color: #fff; }   /* readable over the dark backdrop */
.mn-logo i { font-style: normal; color: #35E07F; font-size: 1.4em; margin-left: -0.04em; animation: mnBlink 1s steps(2) infinite; }
@keyframes mnBlink { 50% { opacity: 0; } }

.mn-bar-right { display: flex; align-items: center; gap: 2.8vw; }
.mn-bar-link {
  font-family: Figtree, "Figtree Fallback", system-ui, sans-serif;
  font-size: 12.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
  position: relative;
  padding-bottom: 5px;
}
.mn-bar-link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: #35E07F;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1);
}
.mn-bar-link:hover::after { transform: scaleX(1); }

.mn-start {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: Figtree, "Figtree Fallback", system-ui, sans-serif;
  font-size: 12.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
  padding: 17px 30px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(3px);
  transition: background 0.35s ease, border-color 0.35s ease, transform 0.45s cubic-bezier(0.19, 1, 0.22, 1);
}
.mn-start i {
  font-style: normal;
  color: #35E07F;
  font-size: 17px;
  line-height: 0;
  transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1);
}
.mn-start:hover {
  background: rgba(53, 224, 127, 0.16);
  border-color: rgba(53, 224, 127, 0.55);
  transform: scale(1.04);
}
.mn-start:hover i { transform: rotate(180deg); }

/* ---- floating pills (appear once scrolled, follow everywhere) ---- */
.mn-pills {
  position: fixed;
  top: 18px; right: 3vw;
  z-index: 9700;
  display: flex;
  gap: 10px;
  pointer-events: none;
}
#tw-menu.mn-scrolled .mn-pills,
#tw-menu.mn-open .mn-pills { pointer-events: auto; }
/* pills pop in with a springy, staggered scale — not a plain fade */
.mn-pill {
  font-family: Figtree, "Figtree Fallback", system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 15px 26px;
  border-radius: 99px;
  cursor: pointer;
  opacity: 0;
  transform: translateY(-18px) scale(0.7);
  filter: blur(5px);
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.32s ease,
              filter 0.4s ease, background 0.35s ease, color 0.35s ease,
              border-color 0.35s ease, box-shadow 0.35s ease;
}
#tw-menu.mn-scrolled .mn-pill,
#tw-menu.mn-open .mn-pill {
  opacity: 1;
  transform: none;
  filter: blur(0);
}
#tw-menu.mn-scrolled .mn-pill:nth-child(2),
#tw-menu.mn-open .mn-pill:nth-child(2) { transition-delay: 0.07s, 0.07s, 0.07s, 0s, 0s, 0s, 0s; }
.mn-talk {
  color: #1a1a1a;
  background: #efeeec;
  border: 1px solid #efeeec;
}
.mn-talk:hover { background: #35E07F; border-color: #35E07F; color: #fff; }
.mn-toggle {
  appearance: none;
  color: #fff;
  background: rgba(10, 10, 10, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(8px);
}
/* adaptive theme: over light sections (menu.js samples the backdrop)
   LET'S TALK flips to black and MENU goes near-solid for contrast */
#tw-menu.mn-light .mn-talk {
  background: #1a1a1a;
  border-color: #1a1a1a;
  color: #efeeec;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.16);
}
#tw-menu.mn-light .mn-talk:hover { background: #35E07F; border-color: #35E07F; color: #fff; }
#tw-menu.mn-light .mn-toggle {
  background: rgba(14, 14, 14, 0.94);
  border-color: rgba(0, 0, 0, 0.4);
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.16);
}
.mn-toggle .mn-x { display: none; }
#tw-menu.mn-open .mn-toggle { background: #1a1a1a; border-color: #1a1a1a; }
#tw-menu.mn-open .mn-toggle .mn-x { display: inline; }
#tw-menu.mn-open .mn-toggle .mn-eq { display: none; }
.mn-toggle:hover { border-color: #35E07F; }

/* ---- backdrop ---- */
.mn-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9400;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s ease;
}
#tw-menu.mn-open .mn-backdrop { opacity: 1; pointer-events: auto; }

/* ---- panel ---- */
.mn-panel {
  position: fixed;
  top: 12px; right: 12px; bottom: 12px;
  z-index: 9600;
  width: min(430px, calc(100vw - 24px));
  background: #efeeec;
  color: #1a1a1a;
  border-radius: 16px;
  padding: 96px 44px 30px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  transform: translateX(112%);
  transition: transform 0.65s cubic-bezier(0.76, 0, 0.24, 1);
}
#tw-menu.mn-open .mn-panel { transform: none; }

.mn-label {
  display: block;
  font-family: Figtree, "Figtree Fallback", system-ui, sans-serif;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #35E07F;
  margin-bottom: 2vh;
}

.mn-links { margin-bottom: auto; }
.mn-link {
  display: flex;
  align-items: baseline;
  gap: 14px;
  width: fit-content;
  font-size: clamp(32px, 4.6vh, 42px);
  font-weight: 650;
  letter-spacing: -0.02em;
  line-height: 1.5;
  color: #1a1a1a;
  text-decoration: none;
  opacity: 0;
  transform: translateY(18px);
  transition: color 0.3s ease, opacity 0.5s ease, transform 0.6s cubic-bezier(0.19, 1, 0.22, 1);
}
.mn-link .mn-num {
  font-family: Figtree, "Figtree Fallback", system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: #9a9a9a;
  transition: color 0.3s ease;
}
.mn-link:hover { color: #35E07F; }
.mn-link:hover .mn-num { color: #35E07F; }
#tw-menu.mn-open .mn-link { opacity: 1; transform: none; }
#tw-menu.mn-open .mn-link:nth-child(1) { transition-delay: 0.16s; }
#tw-menu.mn-open .mn-link:nth-child(2) { transition-delay: 0.22s; }
#tw-menu.mn-open .mn-link:nth-child(3) { transition-delay: 0.28s; }
#tw-menu.mn-open .mn-link:nth-child(4) { transition-delay: 0.34s; }

.mn-sec { margin-top: 4.5vh; }
.mn-mail {
  font-size: clamp(17px, 2.2vh, 21px);
  font-weight: 500;
  color: #1a1a1a;
  text-decoration: none;
  transition: color 0.3s ease;
}
.mn-mail i { font-style: normal; color: #9a9a9a; margin-right: 6px; }
.mn-mail:hover { color: #35E07F; }

.mn-soc {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6vh 2rem;
  width: fit-content;
}
.mn-soc a {
  font-size: clamp(15px, 2vh, 18px);
  font-weight: 500;
  color: #1a1a1a;
  text-decoration: none;
  line-height: 1.7;
  transition: color 0.3s ease;
}
.mn-soc a:hover { color: #35E07F; }


@media (max-width: 700px) {
  .mn-bar-link { display: none; }
  .mn-panel { padding: 84px 30px 24px; }
}

/* ---- phones and tablets: one set of controls, no swap ----
   At the top of the page the bar showed .mn-start (LET'S TALK, 174x51, dark
   and translucent). One pixel of scroll swapped it for the floating .mn-talk
   pill (122x45, solid white) with MENU springing in beside it. Measured in the
   browser that is an 88px horizontal and 13px vertical jump plus a resize and a
   colour flip: 6% of the viewport at 1440px, where it reads as the intentional
   transition it is, but 18% of the viewport on a 500px phone, where it just
   reads as the buttons moving about.

   So below 1024px the pills are shown from the start and .mn-start is dropped -
   one LET'S TALK, one position, no swap. The inline bar links go with it
   because they sit in the strip the pills occupy (measured overlap at every
   width from 704px up), and scrolling already took them away.

   This also closes a real gap rather than only a cosmetic one: under 700px the
   links were already hidden and MENU only appeared after 120px of scroll, so at
   the top of a phone page there was no way to open the menu at all.

   Desktop is untouched and keeps the original bar-to-pills transition. */
@media (max-width: 1024px) {
  .mn-bar-link,
  .mn-start { display: none; }
  /* Put the logo in the pills' own band so the three controls share one
     baseline. The bar's 1.8rem padding put the logo box at y28.8 with a 37px
     line box (the blinking dot is 1.4em, which pushes the box down), centring
     it at 47.3 against the pills' 40.5 - the logo read 6.8px low. Matching
     .mn-pills exactly (top 18px, 45px tall, centred) makes that zero. */
  .mn-bar {
    top: 18px;
    height: 45px;
    padding: 0 3vw;
    align-items: center;
  }
  /* Centring the box is not enough on its own: the dot is 1.4em, so its inline
     box is the tallest thing on the line and it drags the shared baseline down,
     leaving BOUCHNAK sitting 3.4px below the pill text even with the boxes
     flush. Taking the dot out of the line box (the same line-height: 0 already
     used on .mn-start i) lets the letters centre on their own metrics. */
  .mn-logo i { line-height: 0; }
  .mn-pills { pointer-events: auto; }
  .mn-pill {
    opacity: 1;
    transform: none;
    filter: blur(0);
  }
  /* Wear the old bar button's clothes. The original .mn-start - dark, barely
     there, green asterisk - was the one worth keeping; it was only ever the
     swap that was wrong. So the floating LET'S TALK takes that styling and the
     asterisk comes back as a ::before, which keeps it to CSS rather than
     editing the markup on 17 pages.

     Pill geometry is deliberately kept (45px tall, 11px type) rather than the
     old 174x51: MENU now sits next to it, and two buttons of different heights
     side by side is the thing that looked untidy in the first place.

     #tw-menu.mn-light .mn-talk still outranks this, so over the light sections
     the button keeps flipping to solid dark - translucent white on a pale
     background would be unreadable. */
  .mn-talk {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(255, 255, 255, 0.16);
    backdrop-filter: blur(3px);
  }
  .mn-talk::before {
    content: "\2731";           /* the same heavy asterisk the bar button used */
    color: #35E07F;
    font-size: 15px;
    line-height: 0;              /* keeps it out of the pill's line box */
  }
}

/* ---- phones: the MENU pill becomes a hamburger ----
   Measured at real viewport widths (Chrome's own --window-size will not go
   below ~500px, which is exactly why this was missed the first time): the logo
   is a fixed 157px and the two pills were 147 + 10 + 104 = 261px, so below
   about 453px they collide. At 430px the pill covered the last letters of
   BOUCHNAK by 13px; at 360px by 79px.

   The word MENU goes and the button becomes a 45px circle. Its icon is two
   rules, which is what the '=' in the old label already was, so the mark is
   unchanged - drawn rather than typed. Opening turns it into a cross, matching
   the 'Close X' it replaces. Both words stay in the DOM for screen readers.

   Pill padding tightens a little, and on the narrowest screens the logo gives
   back two points of size and some letter-spacing. Together that is what buys
   room at 360px, where the hamburger on its own is not enough. */
@media (max-width: 700px) {
  .mn-pills { gap: 8px; }
  .mn-pill { padding: 15px 20px; }

  .mn-toggle {
    position: relative;
    width: 45px;
    height: 45px;
    padding: 0;
    flex: 0 0 45px;
  }
  /* kept in the accessibility tree, taken out of the picture */
  .mn-toggle .mn-eq,
  .mn-toggle .mn-x {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .mn-toggle::before,
  .mn-toggle::after {
    content: "";
    position: absolute;
    left: 50%;
    width: 16px;
    height: 1.5px;
    border-radius: 2px;
    background: currentColor;
    transform: translateX(-50%);
    transition: top 0.32s cubic-bezier(0.65, 0, 0.35, 1),
                transform 0.32s cubic-bezier(0.65, 0, 0.35, 1);
  }
  .mn-toggle::before { top: calc(50% - 4px); }
  .mn-toggle::after  { top: calc(50% + 3px); }
  #tw-menu.mn-open .mn-toggle::before {
    top: calc(50% - 1px);
    transform: translateX(-50%) rotate(45deg);
  }
  #tw-menu.mn-open .mn-toggle::after {
    top: calc(50% - 1px);
    transform: translateX(-50%) rotate(-45deg);
  }
}
@media (max-width: 460px) {
  .mn-logo { font-size: 20px; letter-spacing: 0.1em; }
  .mn-pill { padding: 15px 17px; }
}

/* With the panel open the pills sit on top of it, and the panel is #efeeec.
   The toggle already had an open-state rule turning it solid dark; LET'S TALK
   never needed one while it was a white pill with dark text. Once it became
   translucent with white text, open put white on #efeeec - 1.16:1, effectively
   invisible. Same treatment as the toggle, so the two read as a pair. */
@media (max-width: 1024px) {
  #tw-menu.mn-open .mn-talk {
    background: #1a1a1a;
    border-color: #1a1a1a;
    color: #efeeec;
  }
}