/* Shared Academy header and mobile drawer, matching Consultancy. */
.site-header{--black:#0a0a0b;--white:#fff;--grey:#a3a3a8;--line:rgba(255,255,255,.14);--line-strong:rgba(255,255,255,.28);--radius:2px;--gutter:clamp(20px,5vw,64px);--ease:cubic-bezier(.19,1,.22,1);--speed-fast:.2s;--speed-med:.5s;display:block;padding:0;border:0}
.site-header .container{max-width:1440px;margin-inline:auto;padding-inline:var(--gutter)}
.site-header .brand-logo img{height:clamp(1.9rem,4.4vh,2.6rem);width:auto}
.site-header .brand-logo{display:inline-flex}
.site-header .main-nav{font-weight:400;line-height:1.5}
.site-header .btn{display:inline-flex;align-items:center;gap:.6em;font-weight:600;letter-spacing:.12em;text-transform:uppercase;border:1px solid var(--white);border-radius:2px;background:transparent;color:var(--white);white-space:nowrap}
.site-header .main-nav a{border-bottom:0;padding:0;color:var(--white)}
.site-header .main-nav a[aria-current]{color:var(--white);border-bottom:0}
/* ---- Site header ------------------------------------------------------------ */
.site-header{
  position:fixed; inset-block-start:0; inset-inline:0;
  z-index:40;
  padding-block: clamp(.5rem, 1.3vh, 1rem);
  border-block-end: 1px solid rgba(255,255,255,.08);
  /* No background/backdrop-filter directly on .site-header itself — see
     ::before below. Root cause of the mobile nav-drawer "see-through" bug:
     .main-nav (the full-screen drawer) is a DOM descendant of .site-header,
     and an element with backdrop-filter becomes the containing block AND
     the paint/compositing clip for its fixed-position descendants — so
     even though .main-nav's own layout box correctly reported full-viewport
     size (100vw/100dvh, which resolve against the real viewport regardless
     of containing block), Chromium/WebKit still composited it clipped to
     roughly .site-header's own small header-bar-height box, letting page
     content show through below that point. Moving the tinted blur onto a
     ::before pseudo-element keeps the identical frosted-glass look on the
     header bar (::before's own backdrop-filter only promotes ITS descendants,
     of which it has none) without .site-header itself carrying the property,
     so .main-nav's containing block/paint clip goes back to the true
     viewport. */
}
.site-header::before{
  content:"";
  position:absolute; inset:0;
  z-index:-1;
  background: rgba(10,10,11,.92);
  backdrop-filter: blur(14px) saturate(1.05);
  -webkit-backdrop-filter: blur(14px) saturate(1.05);
}
.site-header .container{
  display:flex; flex-wrap:nowrap; align-items:center; justify-content:space-between; gap:1rem;
}
.site-header__social{
  display:flex; align-items:center; gap:.6em;
  font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--grey);
  border:1px solid var(--line-strong); border-radius: var(--radius);
  padding:.65em 1.1em;
  transition: border-color var(--speed-fast) var(--ease), color var(--speed-fast) var(--ease);
}
.site-header__social:hover{ border-color:var(--white); color:var(--white); }


/* ---- Main site nav (multi-page header, not the Coming Soon single-page one) --- */
.main-nav{
  display:flex; align-items:center;
  /* Fills the row between the logo and the header actions (Contact
     button) instead of shrink-wrapping to a tight cluster in the
     middle, which on wide screens left big dead gaps flanking the nav
     - flex:1 lets it claim that space, space-evenly spreads the 5
     links across it so they sit closer to the logo and Contact at
     each end. Only applies above the 1199.98px nav breakpoint below -
     the mobile drawer resets justify-content back to flex-start so
     this doesn't stretch the stacked list vertically down the drawer. */
  flex:1 1 auto;
  justify-content:space-evenly;
  gap:1.7rem;
  font-size:1rem; letter-spacing:.1em; text-transform:uppercase;
}
.main-nav a{ color:var(--white); transition: color var(--speed-fast) var(--ease); }
.main-nav a:hover, .main-nav a:focus-visible{ color:var(--grey); }
/* Current-page nav link — every page marks its own nav item with
   aria-current="page" (accessible for free) and gets this underline. */
.main-nav a[aria-current="page"]{
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 1px;
}
.btn--small{ padding: .7em 1.4em; font-size:.72rem; }
.site-header__actions{ position:relative; z-index:36; display:flex; align-items:center; gap:1.1rem; }

/* Explicit "back to Home" affordance, mobile/tablet only. The logo
   already links home (same markup as desktop), but nothing marks it as
   tappable there, and the hamburger drawer is the only other way back —
   not obvious at a glance. This gives an unambiguous, icon-only way
   home right in the header, at the same breakpoint the hamburger itself
   switches on. Desktop doesn't get one — the full nav (with a literal
   "Home" link, always on screen) already covers it there. */
.home-link{ display:none; }
@media (max-width: 1199.98px){
  .home-link{
    display:flex; align-items:center; justify-content:center;
    width:1.9rem; height:1.9rem;
    flex-shrink:0;
    color:var(--white);
  }
  .home-link svg{ width:1.3rem; height:1.3rem; }
}

/* .main-nav is a sibling of the logo/actions but nested inside
   .site-header, so it forms its own stacking layer *within* that header's
   context rather than sitting behind it. On mobile it carries a positive
   z-index (see below) so the full-screen drawer paints over the rest of
   the page — but that also puts it above the logo and toggle button,
   which sit at the implicit z-index:0 of an unpositioned sibling. Lifting
   them above the drawer's z-index keeps the logo and the toggle (which
   animates into the close X) visible while the drawer is open. */
.brand-logo{
  position:relative; z-index:36;
  /* Without this, the logo — being the most flex-shrinkable item in the
     header row — is what silently gives way first whenever the nav+CTA
     content gets tight (see the nav breakpoint comment above), shrinking
     down to a few px or vanishing rather than the row ever visibly
     overflowing. flex-shrink:0 makes it hold its size; if the row is
     ever tight again, that becomes visibly obvious (nav crowding/
     wrapping) instead of the logo just quietly disappearing. */
  flex-shrink:0;
}

/* Hamburger toggle — hidden entirely above the nav breakpoint, where the
   nav renders inline instead (see .main-nav below). */
.nav-toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  align-items:stretch;
  gap:5px;
  width:1.9rem; height:1.9rem;
  padding:0;
  background:transparent;
  border:0;
}
.nav-toggle__bar{
  display:block;
  width:100%; height:2px;
  background:var(--white);
  transition: opacity var(--speed-fast) var(--ease);
}
/* The hamburger only opens the drawer now — it fades out once open rather
   than morphing into an X in place, since the close control lives inside
   the drawer itself (see .nav-close below), top-right, under the header. */
.nav-toggle[aria-expanded="true"]{ opacity:0; pointer-events:none; }

/* Dedicated close button, rendered inside the drawer — top-right, just
   under the header's Join the Academy button, instead of doubling up
   with the hamburger's spot in the header row. */
.nav-close{
  display:none;
  position:absolute;
  align-items:center; justify-content:center;
  width:1.9rem; height:1.9rem;
  padding:0;
  background:transparent;
  border:0;
}
.nav-close__bar{
  position:absolute;
  width:100%; height:2px;
  background:var(--white);
}
.nav-close__bar:nth-child(1){ transform: rotate(45deg); }
.nav-close__bar:nth-child(2){ transform: rotate(-45deg); }

/* This one nav-specific breakpoint is deliberately its own, separate
   value (not the site's general 860px content-stacking breakpoint used
   elsewhere in this file) — with 5 nav items (Education/Consultancy/
   About/Contact/Login) plus the full "Join the Academy" button, the
   inline header needs real room: below ~1040px the logo (the most
   flex-shrinkable item in the row) got squeezed down to a few px or
   vanished entirely rather than the row ever visibly overflowing. See
   .brand-logo{flex-shrink:0} below for the second half of this fix. */
@media (max-width: 1199.98px){
  .nav-toggle{ display:flex; }
  /* Below the nav breakpoint the header reads as three separate anchors —
     logo, hamburger, Join button — rather than a logo on its own at the
     left with the hamburger+button bunched together at the right (all the
     free space landing in one lump in between, which read as unbalanced).
     Letting the actions wrapper grow to fill the remaining row width and
     space its own two children apart spreads the hamburger in close after
     the logo and pins the button to the far right edge, so the row's
     breathing room is distributed across two gaps instead of one. */
  .site-header__actions{ flex:1 1 auto; justify-content:space-between; }
  /* Full "Join the Academy" wording stays visible at every width — Jack
     asked for the mobile header to match his reference build, which keeps
     the full button text. (Previously shortened to just "Join" here to
     leave the space-between above more room to spread the hamburger and
     button apart — reverted; the button is simply the widest thing in the
     row now, same as the reference.) */
  .nav-close{
    display:flex;
    top: clamp(4.4rem, 10vh, 5.2rem);
    right: var(--gutter);
  }
  /* Full-screen drawer rather than an inline row — off-canvas above the
     viewport until opened, sliding down below the fixed header. Position
     fixed takes it out of the header's flex flow, so it doesn't disturb
     the logo/toggle/CTA row when closed. */
  .main-nav{
    position:fixed;
    /* top/left + explicit width/height, not inset:0 — belt-and-braces
       against the .site-header see-through bug (see the ::before fix on
       .site-header above, which is the actual fix: that element no longer
       carries backdrop-filter directly, so it no longer becomes the
       containing block/paint-clip for this fixed descendant). vw/vh units
       size against the real viewport regardless of containing block either
       way, so this costs nothing to leave in place as a second layer of
       protection. */
    top:0; left:0;
    width:100vw;
    height:100vh;
    height:100dvh;
    z-index:35;
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    gap:0;
    padding: clamp(5.5rem, 12vh, 7.5rem) var(--gutter) 2rem;
    background: rgba(8,8,9,.97);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    font-size:1.15rem;
    transform: translateY(-100%);
    opacity:0;
    pointer-events:none;
    transition: transform var(--speed-med) var(--ease), opacity var(--speed-med) var(--ease);
  }
  .main-nav.is-open{ transform:none; opacity:1; pointer-events:auto; }
  .main-nav a{
    padding-block:1.1rem;
    border-block-end:1px solid var(--line);
  }
  body.nav-open{ overflow:hidden; }
}


main{padding-top:clamp(52px,7vh,70px)}
@media(max-width:1199.98px){.site-header .main-nav a{padding-block:1.1rem;border-block-end:1px solid var(--line)}.site-header .main-nav{display:flex;width:100vw;max-width:none}.site-header .btn{font-size:.65rem;padding:.7em 1em}.site-header .site-header__actions{gap:.8rem}}