/* Atraxia website: shared foundations (tokens, base, type, buttons,
   header, footer, page transitions, backdrops). Values are taken literally
   from the handover: design-tokens.json and the rendered reference build
   (source/*.r26.html, measured with getComputedStyle). Page-specific
   sections live with their page batches and must not redefine these. */

/* ---------- tokens (design-tokens.json) ----------
   Only the tokens the site reads. The other design tokens (the light palette,
   spacing, radii, shadows, easings) are applied as literal values where the
   rendered reference uses them; B5 removed their unused custom properties. */
:root {
  --c-on-dark-body: #A5C0CA;
  --font: Manrope, ui-sans-serif, system-ui, sans-serif;
}

/* ---------- base ---------- */
/* The deep-space colour is also inlined at the top of every page's <head>,
   so nothing light can paint before this file arrives. */
html { background: #02060C; color-scheme: dark; scroll-behavior: auto; -webkit-text-size-adjust: 100%; }
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  /* transparent: the deep-space colour (or the calm gradient) is on html,
     so fixed backdrop layers at z-index -1 are never covered by body */
  background: transparent;
  color: var(--c-on-dark-body);
  font-family: var(--font);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img, picture, svg, canvas { display: block; max-width: 100%; }
/* a photo's <picture> (AVIF, WebP, then the JPEG) adds no box of its own: the
   img inside sizes against its frame exactly as a bare img did */
.post-thumb > picture, .post-meta > picture, .post-end .who > picture { display: contents; } /* blog cards and article (blog.css pages); the landing's own in landing.css */
picture > source { display: none; } /* so a display: contents picture adds no flex item (and no gap) of its own */
a { color: inherit; }
a, button { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
[hidden] { display: none !important; }

/* focus: keyboard only, a 2px light ring with a 3px offset */
:focus:not(:focus-visible) { outline: none; }
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 2px solid #8FD8E8; outline-offset: 3px; }
a:active, button:active { transition-duration: 0s !important; }
@media (hover: none) { a:hover, button:hover { transform: none !important; } }

.wrap { max-width: 1100px; margin: 0 auto; padding-inline: 1.5rem; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* skip link (HANDOVER h): hidden until focused */
.skip-link {
  position: fixed; left: 1rem; top: 1rem; z-index: 1000;
  padding: 0.7rem 1.2rem; border-radius: 999px;
  background: #F4FAFC; color: #023B4A; font-weight: 700; font-size: 0.9rem; text-decoration: none;
  transform: translateY(calc(-100% - 2rem));
}
.skip-link:focus, .skip-link:focus-visible { transform: none; }
main:focus { outline: none; }

/* ---------- type ---------- */
.eyebrow { display: flex; align-items: center; gap: 1rem; margin: 0 0 1.6rem; }
.eyebrow .rule { flex: none; width: 38px; height: 1px; background: linear-gradient(90deg, rgb(143 216 232 / 0.1), rgb(143 216 232 / 0.75)); }
.eyebrow .label { font-size: 0.69rem; font-weight: 700; letter-spacing: 0.24em; color: #A6CDD8; white-space: nowrap; text-transform: uppercase; }
/* the secondary pages' plain eyebrow (Contact, Blog, Legal): r26 .eyebrow */
.sl-eyebrow { display: inline-flex; align-items: center; gap: .8rem; margin-bottom: 1rem; font-size: .72rem; font-weight: 800; letter-spacing: .16em; color: #8FD8E8; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font-weight: 700; font-size: 0.9rem; letter-spacing: 0.01em; text-decoration: none;
  white-space: nowrap; text-align: center; cursor: pointer;
  transition: background-color 0.18s, color 0.18s, border-color 0.18s, transform 0.18s;
}
.btn--primary { padding: 1.05rem 2rem; border-radius: 999px; border: 0; background: #F4FAFC; color: #023B4A; }
.btn--primary:hover, .btn--primary:focus-visible { background: #FFFFFF; transform: translateY(-1px); }
.btn--ghost { padding: 1.05rem 2rem; border-radius: 999px; border: 1px solid rgb(191 219 227 / 0.3); background: transparent; color: #BFDBE3; }
.btn--ghost:hover, .btn--ghost:focus-visible { color: #FFFFFF; border-color: #8FD8E8; transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(0.985); }
@media (hover: none) {
  .btn--primary:hover { background: #F4FAFC; }
  .btn--ghost:hover { border-color: rgb(143 216 232 / 0.22); background-color: transparent; }
}

/* ---------- header ---------- */
/* Always dark. Transparent at the top; a dark solid layer fades in from 24px
   of scroll and is full by 204px (--gx-solid, set by core.js). It never blurs
   what is under it. */
.nav { position: sticky; top: 0; z-index: 20; isolation: isolate; view-transition-name: atx-nav; line-height: normal; }
.nav::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: rgb(4 12 19 / 0.9);
  box-shadow: 0 18px 40px -28px rgb(0 0 0 / 0.65);
  opacity: var(--gx-solid, 0); transition: opacity 0.35s; will-change: opacity;
}
.nav:has(.nav-menu.is-open)::before { opacity: 1; background: rgb(6 16 24 / 0.92); }
.nav .nav-top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1rem; padding-block: 1.5rem; }
.nav .lockup { display: flex; align-items: center; gap: 0.8rem; text-decoration: none; }
.nav .mark { width: 78px; height: auto; flex: 0 0 auto; filter: brightness(1.5) saturate(0.8); transition: filter 0.3s; }
.nav .wordmark { height: 21px; width: auto; margin-top: 3px; filter: brightness(0) invert(1); transition: filter 0.3s; }
.nav .tabs {
  position: relative; justify-self: center; max-width: 100%;
  display: flex; align-items: center; gap: 0.15rem; overflow-x: auto; scrollbar-width: none;
  padding: 0.3rem 0.4rem; border-radius: 999px;
  background: rgb(255 255 255 / 0.1); border: 1px solid rgb(255 255 255 / 0.14);
  backdrop-filter: blur(22px) saturate(1.8); -webkit-backdrop-filter: blur(22px) saturate(1.8);
  transition: color 0.3s, background 0.3s, border-color 0.3s;
}
.nav .tabs::-webkit-scrollbar { display: none; }
.nav .tabs a {
  position: relative; z-index: 1; flex: 0 0 auto;
  padding: 0.5rem 1rem; border-radius: 999px;
  font-size: 0.79rem; font-weight: 700; white-space: nowrap; text-decoration: none;
  color: rgb(255 255 255 / 0.82);
  transition: color 0.3s, background 0.3s, border-color 0.3s;
}
.nav .tabs a:hover, .nav .tabs a:focus-visible, .nav .tabs a.is-active { color: #FFFFFF; background: transparent; }
.nav .tab-pill {
  position: absolute; z-index: 0; top: 0.3rem; left: 0; width: 0; height: calc(100% - 0.6rem);
  border-radius: 999px; pointer-events: none; opacity: 0;
  background: rgb(255 255 255 / 0.16);
  transform: translate3d(0, 0, 0);
  transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1), width 0.42s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.28s;
}
.nav .meta { justify-self: end; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.2em; color: rgb(255 255 255 / 0.48); transition: color 0.3s; }
.nav-toggle, .nav-menu { display: none; }

@media (max-width: 760px) {
  .nav .nav-top { grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; gap: 0.3rem 0.85rem; }
  .nav .lockup { grid-area: 1 / 1; }
  .nav .tabs { display: none; }
  .nav .meta { grid-area: 2 / 1; justify-self: start; }
  .nav-toggle {
    display: flex; grid-area: 1 / 2 / span 2; justify-self: end;
    align-items: center; justify-content: center;
    width: 46px; height: 46px; padding: 0; border-radius: 999px; cursor: pointer;
    background: rgb(255 255 255 / 0.1); border: 1px solid rgb(255 255 255 / 0.14); color: #FFFFFF;
    backdrop-filter: blur(22px) saturate(1.8); -webkit-backdrop-filter: blur(22px) saturate(1.8);
    transition: color 0.3s, background 0.3s, border-color 0.3s;
  }
  .nav-menu.is-open {
    display: flex; flex-direction: column; gap: 0.15rem;
    position: absolute; top: calc(100% + 4.8px); left: 1.5rem; right: 1.5rem; z-index: 30;
    padding: 0.5rem; border-radius: 20px;
    background: rgb(8 16 24 / 0.86); border: 1px solid rgb(255 255 255 / 0.14);
    box-shadow: 0 18px 40px -18px rgb(6 20 25 / 0.28);
    backdrop-filter: blur(22px) saturate(1.8); -webkit-backdrop-filter: blur(22px) saturate(1.8);
    transition: background 0.3s, border-color 0.3s;
  }
  .nav-menu a {
    padding: 0.85rem 1rem; border-radius: 999px;
    font-size: 0.92rem; font-weight: 700; text-decoration: none;
    color: rgb(255 255 255 / 0.86);
    transition: background 0.18s, color 0.18s;
  }
  .nav-menu a:hover, .nav-menu a:focus-visible, .nav-menu a.is-active { color: #FFFFFF; background: rgb(255 255 255 / 0.12); }
}

/* ---------- 404 (not in the handover: a simple page on the Contact page's
   calm backdrop, with its heading values) ---------- */
.nf-page { min-height: 62vh; display: flex; align-items: center; padding: 4rem 0 6rem; line-height: normal; }
.nf-head { text-align: center; max-width: 42rem; }
.nf-head .sl-eyebrow { margin-bottom: 0; letter-spacing: .32em; }
.nf-head h1 { margin: 1rem 0; font-size: clamp(2.3rem, 4.6vw, 3.1rem); line-height: 1.08; font-weight: 800; letter-spacing: -.025em; color: #F4FAFC; text-shadow: 0 2px 40px rgb(1 5 10 / .7); }
.nf-head p { margin: 0 0 2rem; font-size: 1.1rem; line-height: 1.65; color: #A5C0CA; text-wrap: pretty; }
@media (max-width: 760px) { .nf-page { min-height: 50vh; padding: 2.5rem 0 3rem; } .nf-head h1 { font-size: 2.1rem; } }

/* ---------- footer ---------- */
.site-footer { position: relative; z-index: 1; padding: 1.5rem 0 3rem; line-height: normal; overflow-x: clip; } /* the glow is 120vw wide on phones; clip it sideways only, so it still rises above the footer */
/* the light carries on behind the footer, breathing slowly */
.site-footer::before {
  content: ""; position: absolute; left: 50%; top: -30vh; z-index: -1; pointer-events: none;
  width: min(1100px, 120vw); height: calc(100% + 30vh); transform: translateX(-50%);
  background: radial-gradient(50% 42% at 50% 30%, rgb(79 163 176 / 0.14), transparent 72%);
  animation: ftBreathe 9s ease-in-out infinite;
}
@keyframes ftBreathe { 0%, 100% { opacity: 0.75; } 50% { opacity: 1; } }
.site-footer .footer-tabs-row { padding: 1.5rem 0 1.75rem; }
.site-footer .tabs { display: flex; align-items: center; justify-content: flex-start; gap: 0.15rem; overflow-x: auto; scrollbar-width: none; padding: 0; border-radius: 999px; }
.site-footer .tabs::-webkit-scrollbar { display: none; }
.site-footer .tabs a {
  flex: 0 0 auto; padding: 0.5rem 1rem; border-radius: 999px;
  font-size: 0.79rem; font-weight: 700; white-space: nowrap; text-decoration: none;
  color: #A5C0CA; transition: background 0.18s, color 0.18s;
}
.site-footer .tabs a:hover, .site-footer .tabs a:focus-visible { color: #EAF7FA; background: rgb(255 255 255 / 0.08); }
.site-footer .footer-meta-row { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; padding-top: 1.75rem; }
.site-footer .brand-lockup { display: flex; align-items: center; gap: 0.75rem; margin-top: 0.55rem; text-decoration: none; }
.site-footer .brand-lockup .mark { width: 66px; height: auto; flex: 0 0 auto; filter: brightness(1.5) saturate(0.8); }
.site-footer .brand-lockup .wordmark { height: 18px; width: auto; margin-top: 3px; filter: brightness(0) invert(1); }
.site-footer .footer-legal { display: flex; gap: 1.25rem; }
.site-footer .footer-legal a { font-size: 0.8rem; font-weight: 600; color: #A5C0CA; text-decoration: none; }
.site-footer .footer-legal a:hover, .site-footer .footer-legal a:focus-visible { color: #EAF7FA; text-decoration: underline; }
.site-footer .footer-social { display: flex; align-items: center; gap: 0.8rem; }
.site-footer .footer-social a {
  width: 32px; height: 32px; border-radius: 999px; display: flex; align-items: center; justify-content: center;
  color: rgb(127 152 162); border: 1px solid rgb(6 20 25 / 0.1); /* B5: was rgb(74 94 100), under 3:1 on the footer; now the footer's own small-print colour */
  transition: color 0.18s, border-color 0.18s, background 0.18s;
}
.site-footer .footer-social a:hover, .site-footer .footer-social a:focus-visible { color: rgb(33 100 116); background: rgb(214 235 238); border-color: rgb(54 130 148 / 0.55); }
.site-footer .footer-social svg { display: block; }
.site-footer .footer-bottom-row { width: 100%; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid rgb(6 20 25 / 0.06); }
.site-footer small { font-size: 0.8rem; color: rgb(127 152 162); }

@media (max-width: 760px) {
  .site-footer { padding-top: 1rem; }
  .site-footer .footer-meta-row { flex-direction: column; align-items: center; text-align: center; gap: 1.15rem; }
  .site-footer .brand-lockup, .site-footer .footer-legal, .site-footer .footer-social { justify-content: center; }
  .site-footer .footer-bottom-row { justify-content: center; text-align: center; }
}

/* ---------- page transitions ---------- */
/* Same-site navigations cross-fade through the deep-space colour (cross-
   document view transitions); the header is held still. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .26s; animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
::view-transition-old(root) { animation-name: atxVtOut; }
::view-transition-new(root) { animation-name: atxVtIn; }
@keyframes atxVtOut { to { opacity: 0; } }
@keyframes atxVtIn { from { opacity: 0; } }
::view-transition-group(atx-nav) { animation: none; }
::view-transition-old(atx-nav) { animation: none; opacity: 0; }
::view-transition-new(atx-nav) { animation: none; }

/* Browsers without view transitions: the secondary pages arrive through a
   dark veil and their content rises in. Skipped when a view transition ran. */
.sl-arrive { position: fixed; inset: 0; z-index: 200; pointer-events: none; background: #02060C; animation: slArrive .5s cubic-bezier(.22,1,.36,1) 0.05s both; }
@keyframes slArrive { 0% { opacity: 1; } 35% { opacity: 0.85; } 100% { opacity: 0; visibility: hidden; } }
html.page-sub main > * { animation: slRise .7s ease .15s backwards; }
@keyframes slRise { from { opacity: 0; } }
html.sl-vt .sl-arrive { display: none; }
html.sl-vt main > * { animation: none; }

/* no flashes on load, nothing held while leaving, no halo after Back */
html.is-loading *, html.is-loading *::before, html.is-loading *::after { transition: none !important; }
html.is-leaving body { pointer-events: none; }
html.is-leaving a, html.is-leaving button { transition: none !important; }
html.is-leaving a, html.is-leaving button, html.is-leaving .btn, html.is-leaving a *,
html.is-restored a, html.is-restored button { box-shadow: none !important; filter: none !important; outline: none !important; text-shadow: none !important; }
html.is-leaving .nav .mark, html.is-restored .nav .mark, html.is-leaving .site-footer .mark, html.is-restored .site-footer .mark { filter: brightness(1.5) saturate(0.8) !important; }
html.is-leaving .nav .wordmark, html.is-restored .nav .wordmark, html.is-leaving .site-footer .wordmark, html.is-restored .site-footer .wordmark { filter: brightness(0) invert(1) !important; }
html.is-leaving a:hover, html.is-leaving button:hover, html.is-restored a:hover, html.is-restored button:hover { transform: none !important; }

/* ---------- backdrops ---------- */
/* Contact and Legal (CN1/LE1 option A): a calm navy-to-teal gradient, one soft
   aurora glow drifting over 60s, fine grain at 5%, no stars. The fixed layer
   covers the viewport with inset: 0 (no height override, LE1 fix) and the same
   gradient is painted on the page itself (html, which spans the whole
   document and the overscroll area), so overscroll and full-page captures
   continue the backdrop instead of ending at one screen. */
html.page-calm { background: #02070D linear-gradient(165deg, #02070D 0%, #030E17 45%, #04222B 100%); }
.sl-sky { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
html.page-calm .sl-sky { background: linear-gradient(165deg, #02070D 0%, #030E17 45%, #04222B 100%); }
.sl-sky .bd-glow { position: absolute; width: 90vmax; height: 60vmax; left: 40%; top: -22vmax; border-radius: 50%; background: radial-gradient(closest-side, rgb(79 163 176 / .13), rgb(79 163 176 / .05) 55%, transparent); animation: bdDrift 60s ease-in-out infinite alternate; }
.sl-sky .bd-grain { position: absolute; inset: -50%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); opacity: .05; mix-blend-mode: overlay; }
@keyframes bdDrift { from { transform: translate(-6vw, 0) scale(1); } to { transform: translate(-22vw, 6vh) scale(1.08); } }
@media (max-width: 760px) { .sl-sky .bd-glow { width: 140vmax; left: 0; } }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation-duration: .01s !important; }
  .nav .tab-pill { transition: none; }
  .site-footer::before { animation: none; }
  .sl-arrive { animation-duration: 0.3s; }
  html.page-sub main > * { animation: slFade 0.4s ease both; }
  .sl-sky .bd-glow { animation: none; }
}
@keyframes slFade { from { opacity: 0; } to { opacity: 1; } }

@media print {
  .nav, .site-footer, .sl-sky, .sl-arrive, .skip-link { display: none !important; }
}