/* ============================================================
   Axiologik site chrome — shared across every page.
   Base theme + navbar + footer behaviour. Page-specific styles
   live in per-page stylesheets (e.g. home.css).
   ============================================================ */

body { margin: 0; background: var(--ax-ink); color: #fff; font-family: var(--font-text); }
a { color: var(--ax-turquoise); text-decoration: none; }
a:hover { text-decoration: none; }

/* The `hidden` attribute is how every filter and form state on this site
   shows and hides things, but the UA's `display: none` for it loses to any
   author `display` rule — which nearly every card and button has. Restate it
   here so `el.hidden = true` is reliable everywhere. */
[hidden] { display: none !important; }

/* ---------- Hero artwork: the default handling pattern ---------- */
/* Every page floats its hero image top-right, in the same band the nav sits
   in. The last mask layer is what keeps the two apart: the art is fully
   transparent for the first 58px and only fades in by 172px, so it never
   runs under the logo or the menu links. The first three layers are the
   brand's soft-edged vignette.

   Every hero art element uses this — page stylesheets set the image, the
   washes and (for the legal pages) a shorter height, but take the mask and
   the top-right geometry from here:

     .xx-hero__art { position: absolute; isolation: isolate; top: 0;
       right: 1.5%; width: 46%; height: 88%;
       max-height: clamp(560px, 37.33vw, 896px);
       overflow: hidden; pointer-events: none; z-index: 1;
       -webkit-mask-image: var(--hero-art-mask); mask-image: var(--hero-art-mask);
       -webkit-mask-composite: source-in; mask-composite: intersect; } */
:root {
  --hero-art-mask:
    radial-gradient(130% 130% at 95% 6%, #000 30%, transparent 78%),
    linear-gradient(to left, transparent 0, #000 14%),
    linear-gradient(to right, transparent 0, #000 12%),
    linear-gradient(to bottom, transparent 0, transparent 58px, #000 172px);
}

/* ---------- Accessibility helpers ---------- */
/* Skip link — visually hidden until focused, then pinned top-left. */
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--ax-turquoise); color: var(--ax-black);
  font-family: var(--font-text); font-size: 14px; font-weight: 500;
  padding: 10px 18px; border-radius: 8px;
  transition: top .18s ease;
}
.skip-link:focus { top: 12px; }

/* Visible keyboard focus indicator for every interactive element.
   Turquoise on dark, darkened turquoise on light contexts. */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--ax-turquoise);
  outline-offset: 3px;
  border-radius: 4px;
}
.hp-section--light :focus-visible,
.hp-section--light.hp-section :focus-visible { outline-color: var(--ax-turquoise-ink); }

/* ---------- Nav (dark, with mega-dropdowns) ---------- */
.site-nav { position: relative; z-index: 20; display: flex; align-items: center; gap: 26px; height: 78px; padding: 0 clamp(24px, 4vw, 56px); }
.site-nav__brand { display: inline-flex; }
.site-nav__logo { height: 22px; width: auto; display: block; }
.site-nav__menu { display: flex; gap: 28px; margin-left: auto; align-items: center; font-family: 'IBM Plex Mono', monospace; }
.site-nav__top { color: rgba(255,255,255,.7); font-size: 12px; letter-spacing: .08em; white-space: nowrap; }
.site-nav__top:hover { color: #fff; }
.site-nav__cta { font-family: var(--font-text); margin-left: 8px; display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--ax-black); background: var(--ax-turquoise); border-radius: 999px; padding: 11px 22px; box-shadow: none; }

/* Hamburger toggle — hidden on desktop, shown at the mobile breakpoint. */
.site-nav__toggle {
  display: none; margin-left: auto;
  width: 44px; height: 44px; padding: 0;
  align-items: center; justify-content: center;
  background: transparent; border: 1px solid rgba(26,206,188,.4);
  border-radius: 8px; color: #fff; cursor: pointer;
}
.site-nav__toggle svg { width: 22px; height: 22px; display: block; }
.site-nav__toggle .icon-close { display: none; }
.site-nav[data-open="true"] .site-nav__toggle .icon-open { display: none; }
.site-nav[data-open="true"] .site-nav__toggle .icon-close { display: block; }

.nav-item { position: relative; display: flex; align-items: center; height: 78px; }
.nav-panel { position: absolute; top: 100%; left: -28px; z-index: 20; opacity: 0; visibility: hidden; transform: translateY(-8px);
      transition: opacity .22s ease, transform .22s cubic-bezier(.22,.61,.36,1), visibility .22s;
      background: rgba(6,26,33,.97); border: 1px solid rgba(26,206,188,.24); border-radius: 10px;
      box-shadow: 0 24px 60px rgba(0,0,0,.55); padding: 28px 32px; }
.nav-item:hover .nav-panel, .nav-item:focus-within .nav-panel { opacity: 1; visibility: visible; transform: none; }
.nav-cols { display: grid; gap: 34px; }
.nav-eyebrow { font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; letter-spacing: .16em; color: var(--ax-turquoise); margin-bottom: 14px; }
.nav-link { display: block; font-family: var(--font-text); font-size: 14px; line-height: 1.35; color: rgba(255,255,255,.78);
      padding: 7px 0; white-space: nowrap; transition: color .18s ease, transform .18s ease; }
.nav-link:hover { color: var(--ax-turquoise); transform: translateX(5px); }
.nav-all { display: inline-flex; align-items: center; gap: 8px; margin-top: 20px; padding-top: 18px;
      border-top: 1px solid rgba(26,206,188,.18); font-size: 13px; font-weight: 500; color: #fff; }
.nav-all:hover { color: var(--ax-turquoise); }
@media (prefers-reduced-motion: reduce) { .nav-panel { transition: none; } .nav-link:hover { transform: none; } }

/* ---------- Mobile drawer ---------- */
/* Below the breakpoint the desktop menu is dropped entirely and replaced by
   a flat list of the seven top-level destinations plus the CTA — the sub-
   pages are reached from the section pages, not from an expanded menu. */
.site-nav__drawer { display: none; }
.site-nav__toplink {
  display: flex; align-items: center; min-height: 54px;
  font-family: var(--font-text); font-size: 17px; color: rgba(255,255,255,.88);
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.site-nav__toplink:last-of-type { border-bottom: 0; }
.site-nav__toplink:hover { color: var(--ax-turquoise); }
.site-nav__drawer-cta {
  font-family: var(--font-text); margin-top: 24px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 15px; font-weight: 500;
  color: var(--ax-black); background: var(--ax-turquoise);
  border-radius: 999px; padding: 15px 22px;
}

/* The design collapses at 1000px, but the eight top-level labels plus the CTA
   need ~1240px before they start wrapping and squeezing the logo out of the
   bar, so the drawer takes over from there down. */
@media (max-width: 1240px) {
  .site-nav { padding: 0 24px; }
  .site-nav__toggle { display: inline-flex; }
  .site-nav__menu { display: none; }

  .site-nav__drawer {
    display: block; position: absolute; top: 100%; left: 0; right: 0; z-index: 20;
    /* visibility keeps the closed drawer's links out of the tab order. */
    max-height: 0; overflow: hidden; visibility: hidden;
    background: rgba(6,26,33,.98); border-top: 1px solid rgba(26,206,188,.2);
    box-shadow: 0 24px 60px rgba(0,0,0,.55);
    transition: max-height .3s cubic-bezier(.22,.61,.36,1), visibility .3s;
  }
  .site-nav[data-open="true"] .site-nav__drawer { max-height: calc(100vh - 78px); overflow-y: auto; visibility: visible; }
  .site-nav__drawer-inner { padding: 8px 24px 26px; }
}
@media (prefers-reduced-motion: reduce) { .site-nav__drawer { transition: none; } }

/* ---------- Subscribe / newsletter status (shared) ---------- */
/* Inline feedback for the HubSpot-wired sign-up forms (see subscribe.js).
   Sits inside each subscribe form regardless of page prefix. Plain text
   rather than a boxed alert, per the design: on a successful sign-up the
   form's own fields and button are swapped out for the confirmation, so
   the band settles in place instead of growing a panel. */
.hs-status {
  display: flex; align-items: center; gap: 11px; min-height: 52px;
  font-family: var(--font-text); font-size: 15.5px; line-height: 1.5;
  color: inherit; margin: 0;
  /* The subscribe forms are flex rows — take a full-width line of our own. */
  flex-basis: 100%; width: 100%; box-sizing: border-box;
}
.hs-status__icon {
  width: 18px; height: 18px; flex: 0 0 auto;
  fill: none; stroke: var(--ax-turquoise); stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round;
}
.hs-status--err { align-items: flex-start; font-size: 13.5px; line-height: 1.55; }
/* Once signed up, the fields and button give way to the confirmation, which
   drops its full-width row so it sits where they were — centred or left,
   whichever way the band's own form lays its children out. */
form[data-hs-done="1"] > *:not([data-hs-status]) { display: none; }
form[data-hs-done="1"] > [data-hs-status] { flex-basis: auto; width: auto; }

/* ---------- Footer ---------- */
.site-footer { background: var(--ax-ink); color: #fff; padding: 72px clamp(24px, 4vw, 56px) 40px; border-top: 1px solid rgba(26,206,188,.2); }
.site-footer__inner { max-width: 1560px; margin: 0 auto 0 6vw; }
.site-footer__top { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 44px; padding-bottom: 48px; }
.site-footer__logo { height: 26px; }
.site-footer__h { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .16em; color: var(--ax-turquoise); margin-bottom: 16px; }
.site-footer__addr { font-size: 13px; line-height: 1.7; color: rgba(255,255,255,.72); margin: 0; }
.site-footer__contact { display: flex; flex-direction: column; gap: 10px; }
.site-footer__contact a { font-size: 13px; color: rgba(255,255,255,.72); }
.site-footer__link { display: block; font-size: 13px; color: rgba(255,255,255,.72); margin-bottom: 10px; }
.site-footer__link:hover { color: var(--ax-turquoise); }
.site-footer__bottom { display: flex; align-items: center; gap: 24px; border-top: 1px solid rgba(255,255,255,.1); padding-top: 26px; flex-wrap: wrap; }
.site-footer__copy { font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: rgba(255,255,255,.4); }
.site-footer__credit { font-family: 'IBM Plex Mono', monospace; font-size: 11px; line-height: 1.7; color: rgba(255,255,255,.4); }
.site-footer__badges { display: flex; align-items: center; gap: 16px; margin-left: auto; flex-wrap: wrap; }
.site-footer__badges img { height: 44px; }
.site-footer__badge-img { border-radius: 4px; }
.site-footer__cert { border: 1px solid rgba(26,206,188,.3); border-radius: 4px; padding: 6px 10px; font-size: 10.5px; color: rgba(255,255,255,.65); font-family: 'IBM Plex Mono', monospace; }

@media (max-width: 860px) {
  .site-footer__inner { margin: 0 auto; }
  .site-footer__top { grid-template-columns: 1fr 1fr; gap: 32px; }
  .site-footer__badges { margin-left: 0; }
}
@media (max-width: 520px) {
  .site-footer__top { grid-template-columns: 1fr; }
}