/* ==========================================================================
   Akademi Kinetiq — layout chrome
   Container, fixed top nav (two variants), site footer.
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* ==========================================================================
   Top nav — node 10006:954, shared by every page
   The header is a fixed overlay: in the mock the nav sits on top of the page
   body, and each page's first section carries its own top offset.
   ========================================================================== */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  border-bottom: 1px solid var(--c-line);
  background-color: var(--c-nav);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.site-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
}

/* The brand is the logo lockup (583x323). Height drives it and width follows,
   so the 68px bar stays the constraint and nothing here can push it taller. */
.site-nav__brand {
  display: inline-flex;
  align-items: center;
  flex: none;
}

.site-nav__logo {
  display: block;
  height: 48px;
  width: auto;
}

.site-nav__links {
  display: flex;
  align-items: center;
  gap: 32px;
}

.site-nav__link {
  position: relative;
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 14px;
  line-height: 19.6px;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--c-muted);
  white-space: nowrap;
  /* Space for the rule is always reserved, so the bar's baseline never
     shifts when a line appears. */
  padding-bottom: 4px;
  transition: color 0.25s ease;
}

/* The rule is a pseudo-element rather than a border because a border can only
   fade — it cannot wipe. scaleX is composited, so the bar stays smooth. */
.site-nav__link::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background-color: var(--c-accent);
  transform: scaleX(0);
  /* Origin sits right at rest and flips left on hover, so the line grows in
     from the left and then keeps travelling the same way on the way out
     instead of rewinding. One gesture passing under the word. */
  transform-origin: right;
  transition: transform 0.32s var(--ease-wipe);
}

.site-nav__link:hover { color: var(--c-cream); }

.site-nav__link:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* Current page: already drawn, and pale cream rather than accent so "you are
   here" stays distinguishable from "you could go here" once both are lit.
   Declared after :hover — equal specificity, so source order decides. */
.site-nav__link.is-active { color: var(--c-cream); }

.site-nav__link.is-active::after {
  background-color: var(--c-line-bright);
  transform: scaleX(1);
}

.site-nav__cta {
  display: inline-flex;
  align-items: center;
  padding: 8px 24px;
  background-color: var(--c-accent);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 14px;
  line-height: 19.6px;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  text-align: center;
  color: var(--c-accent-ink);
  white-space: nowrap;
  --btn-fill: #ffffff;
}

/* --------------------------------------------------------------------------
   Menu toggle — hidden until the bar can no longer hold everything
   -------------------------------------------------------------------------- */

.site-nav__toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: var(--tap);
  height: var(--tap);
  margin-right: -10px;   /* optically align the bars with the gutter */
  color: var(--c-cream);
}

.site-nav__bars {
  position: relative;
}

.site-nav__bars,
.site-nav__bars::before,
.site-nav__bars::after {
  display: block;
  width: 22px;
  height: 2px;
  background-color: currentColor;
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.site-nav__bars::before,
.site-nav__bars::after {
  content: '';
  position: absolute;
}

.site-nav__bars::before { transform: translateY(-7px); }
.site-nav__bars::after  { transform: translateY(7px); }

.site-nav__toggle[aria-expanded='true'] .site-nav__bars { background-color: transparent; }
.site-nav__toggle[aria-expanded='true'] .site-nav__bars::before { transform: rotate(45deg); }
.site-nav__toggle[aria-expanded='true'] .site-nav__bars::after  { transform: rotate(-45deg); }

/* --------------------------------------------------------------------------
   Mobile menu panel
   -------------------------------------------------------------------------- */

.site-menu {
  position: fixed;
  inset: var(--nav-h) 0 0 0;
  z-index: 99;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
  padding: clamp(24px, 6vw, 48px) var(--gutter) calc(clamp(24px, 6vw, 48px) + env(safe-area-inset-bottom));
  background-color: var(--c-scrim);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  overflow-y: auto;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.site-menu[hidden] { display: none; }

.menu-is-open .site-menu {
  opacity: 1;
  transform: none;
}

.site-menu__list {
  display: flex;
  flex-direction: column;
}

.site-menu__item + .site-menu__item { border-top: 1px solid var(--c-line-soft); }

.site-menu__link {
  display: flex;
  align-items: baseline;
  gap: 20px;
  padding: 18px 0;
  color: var(--c-off-white);
  /* Colour only, no wipe: this panel is touch-first, where :hover sticks to
     the last-tapped item and would strand a line under it. */
  transition: color 0.25s ease;
}

.site-menu__link:hover { color: var(--c-cream); }

.site-menu__index {
  flex: none;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 1.6px;
  color: #6f6551;
}

.site-menu__label {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.75rem, 8vw, 2.5rem);
  line-height: 1.1;
  text-transform: uppercase;
}

.site-menu__link.is-active .site-menu__label { color: var(--c-accent); }
.site-menu__link.is-active .site-menu__index { color: var(--c-line-bright); }

.site-menu__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  background-color: var(--c-accent);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--c-accent-ink);
  --btn-fill: #ffffff;
}

/* Lock the page behind the panel. */
body.menu-is-open { overflow: hidden; }

/* ==========================================================================
   Footer — node 10006:936 / 10019:187 / 10019:206 (identical on all pages)
   ========================================================================== */

.site-footer {
  background-color: var(--c-footer);
  border-top: 1px solid var(--c-line);
}

.site-footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 48px;
  padding-bottom: 48px;
}

.site-footer__brandblock {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.site-footer__brand {
  margin: 0;
  line-height: 0;   /* kill the inline-image baseline gap under the lockup */
}

.site-footer__logo {
  display: block;
  height: 60px;
  width: auto;
}

.site-footer__copy {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--c-muted);
  white-space: nowrap;
}

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 16px 32px;
}

.site-footer__link {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 25.6px;
  color: var(--c-muted);
  text-decoration: underline;
  text-decoration-skip-ink: none;
  text-underline-position: from-font;
  white-space: nowrap;
}

/* ==========================================================================
   Responsive chrome
   Structural breakpoints, chosen from where this content actually breaks:
     1024  the 12-column grids stop holding two readable columns
      900  brand + four links + CTA can no longer share one bar
      600  every remaining two-up collapses to a single column
   ========================================================================== */

/* ---- The 48px footer brand and five links stop sharing a row ---- */
@media (max-width: 1119px) {
  .site-footer__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
    padding-top: 40px;
    padding-bottom: 40px;
  }

  .site-footer__logo { height: clamp(46px, 20vw, 60px); }

  .site-footer__copy {
    font-size: 12px;
    line-height: 20px;
    letter-spacing: var(--track-mono);
    white-space: normal;
  }

  .site-footer__links {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    justify-content: start;
    gap: 16px 32px;
    width: 100%;
  }
}

/* ---- Below the desktop grid ---- */
@media (max-width: 1023px) {
  .site-nav__links { gap: 24px; }
}

/* ---- Nav collapses to a panel ---- */
@media (max-width: 899px) {
  .site-nav__links,
  .site-nav__cta { display: none; }

  .site-nav__toggle { display: inline-flex; }

  .site-nav__logo { height: clamp(36px, 9vw, 48px); }

  .site-footer__links { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; }
}

@media (max-width: 599px) {
  .site-footer__links { grid-template-columns: 1fr; gap: 14px; }
  .site-footer__link  { min-height: 24px; }
}

/* ==========================================================================
   WhatsApp button — fixed to the bottom-right corner of every page

   The site's primary button, made square. It takes its fill, its ink and its
   wipe-to-white hover from the shared button mechanic in base.css, which is
   where .site-wa is named alongside the nav CTA; only its position, its size
   and the fill colour are decided here.

   z-index 98 puts it under the fixed header (100) and under the mobile menu
   panel (99). That panel is a 0.97-alpha scrim rather than a solid one, so a
   button left behind it still ghosts through — hence the outright hide below
   rather than relying on the stacking order alone.

   The corner offset is clamped rather than taken from --gutter: --gutter
   reaches 64px on a wide screen, which parks the button well inside open
   space, and it is a horizontal rhythm token with nothing to say about the
   bottom edge. The safe-area inset keeps it clear of the iOS home indicator.
   ========================================================================== */

.site-wa {
  position: fixed;
  right: clamp(16px, 3vw, 28px);
  bottom: calc(clamp(16px, 3vw, 28px) + env(safe-area-inset-bottom));
  z-index: 98;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  background-color: var(--c-accent);
  color: var(--c-accent-ink);
  /* Same as .btn--solid: the fill gets hotter under the pointer, and the dark
     glyph stays legible on both the amber and the white. */
  --btn-fill: #ffffff;
}

/* The glyph is inline SVG rather than an <img> like the rest of assets/icons —
   it inherits currentColor, so it stays the button's own ink through the wipe
   instead of carrying a baked-in fill that only matches one of the two. */
.site-wa svg { flex: none; }

.menu-is-open .site-wa {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}


/* ==========================================================================
   Page entrance

   Two versions, and the difference is deliberate.

   The landing page plays the full sequence: the bar drops in, its contents
   fade up behind it, then the hero headline is uncovered line by line with the
   same left-to-right gesture as the nav underline. Someone arriving there has
   not navigated with intent yet, so an arrival is the point.

   Every other page skips the nav entirely and brings its copy straight in.
   The header is persistent chrome — re-dropping it on each navigation implies
   something arrived that did not, and it makes the bar re-announce itself
   every time you move around the site. The copy is retimed to 150ms rather
   than left at the landing page's 950ms: that delay existed to catch the bar
   finishing, and without the bar it would leave a present nav sitting above an
   empty hero.

   Written as animations with `backwards` fill rather than a resting hidden
   state plus a class. The hidden state therefore lives only inside the
   keyframes — if an animation never runs, the element is simply visible.
   There is no path where this strands the nav off-screen or leaves a headline
   masked.
   ========================================================================== */

@keyframes nav-drop {
  /* 101% clears the 1px bottom border along with the bar. */
  from { transform: translateY(-101%); }
  to   { transform: translateY(0); }
}

@keyframes nav-item-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

@keyframes line-wipe {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}

@keyframes copy-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   Inner pages — the default. No nav animation at all.
   -------------------------------------------------------------------------- */

/* One .hero-line per statement, not per visual line: About and Pathway break
   their headlines with `br-lg`, which collapses below 1024px, so a span per
   rendered line would stop matching the text at narrow widths. A statement is
   a statement at every width. */
.hero-line {
  display: block;
  /* Shrink-wrap to the text. A full-width box would finish uncovering the
     words well before the wipe reached the right edge, so short lines would
     appear to hang. */
  width: fit-content;
  max-width: 100%;
  animation: line-wipe 620ms var(--ease-wipe) backwards;
}

.hero-line:nth-child(1) { animation-delay: 150ms; }
.hero-line:nth-child(2) { animation-delay: 250ms; }
.hero-line:nth-child(3) { animation-delay: 360ms; }
.hero-line:nth-child(4) { animation-delay: 470ms; }

/* Eyebrow lands just ahead of the first headline line. Home has none. */
.ab-hero__eyebrow,
.pw-hero__eyebrow,
.bk-hero__eyebrow { animation: copy-in 450ms ease-out 60ms backwards; }

.ab-hero__lede,
.pw-hero__lede,
.bk-hero__lede    { animation: copy-in 500ms ease-out 520ms backwards; }

.pw-hero__actions { animation: copy-in 500ms ease-out 620ms backwards; }

/* Trails the lede it sits under. */
.bk-hero__meta    { animation: copy-in 500ms ease-out 620ms backwards; }

/* --------------------------------------------------------------------------
   Landing page — the full sequence, gated on the body class set by index.php
   -------------------------------------------------------------------------- */

.is-home .site-header {
  animation: nav-drop 600ms cubic-bezier(0.16, 1, 0.3, 1) 250ms backwards;
}

/* The contents start before the bar has finished settling — running them
   strictly after reads as two separate events and doubles the wait. */
.is-home .site-nav__brand   { animation: nav-item-in 500ms ease-out 550ms backwards; }
.is-home .site-nav__links li:nth-child(1) .site-nav__link { animation: nav-item-in 500ms ease-out 620ms backwards; }
.is-home .site-nav__links li:nth-child(2) .site-nav__link { animation: nav-item-in 500ms ease-out 690ms backwards; }
.is-home .site-nav__links li:nth-child(3) .site-nav__link { animation: nav-item-in 500ms ease-out 760ms backwards; }
.is-home .site-nav__links li:nth-child(4) .site-nav__link { animation: nav-item-in 500ms ease-out 830ms backwards; }
.is-home .site-nav__cta     { animation: nav-item-in 500ms ease-out 900ms backwards; }
/* Below 900px the links and CTA are hidden; the toggle carries the beat. */
.is-home .site-nav__toggle  { animation: nav-item-in 500ms ease-out 550ms backwards; }

/* The wipe starts at 950ms, while the bar's CTA is still fading: overlapping
   by ~150ms keeps the whole entrance inside 2.2s and still reads as
   bar-then-copy. Strictly sequential ran past 2.8s. */
.is-home .hero-line { animation-duration: 700ms; }
.is-home .hero-line:nth-child(1) { animation-delay: 950ms; }
.is-home .hero-line:nth-child(2) { animation-delay: 1060ms; }
.is-home .hero-line:nth-child(3) { animation-delay: 1170ms; }
.is-home .hero-line:nth-child(4) { animation-delay: 1280ms; }

.home-hero__lede    { animation: copy-in 600ms ease-out 1500ms backwards; }
.home-hero__actions { animation: copy-in 600ms ease-out 1620ms backwards; }

/* The global reduced-motion block collapses duration but not delay, which
   would leave elements holding their hidden start frame for the length of the
   stagger and then snapping in. Dropping the animations outright falls back to
   the resting state, which is the finished one. */
@media (prefers-reduced-motion: reduce) {
  .site-header,
  .site-nav__brand,
  .site-nav__link,
  .site-nav__cta,
  .site-nav__toggle,
  .ab-hero__eyebrow,
  .pw-hero__eyebrow,
  .bk-hero__eyebrow,
  .hero-line,
  .home-hero__lede,
  .ab-hero__lede,
  .pw-hero__lede,
  .bk-hero__lede,
  .home-hero__actions,
  .pw-hero__actions,
  .bk-hero__meta { animation: none; }
}