/* ============================================================
   AX — Orrku design system (Aurax-derived), 2026-09
   Tokens + primitives shared by every src/components/ax/* component.
   Prefix: .ax-*   Scope root: .ax (put on each component's outer element)
   Loads after brand-overrides.css and before site-stability.css.
   ------------------------------------------------------------
   Contrast rule: #ff9200 is 2.15:1 on light ground. On LIGHT it is for
   fills, bars and rules only. Orange TEXT on light uses #9c4f00 (5.7:1).
   On DARK ground #ff9200 clears 8:1 and is safe for text.
   ============================================================ */
:root {
  --ax-paper: #ffffff;
  --ax-warm: #f7f5f2;
  --ax-warm2: #fafaf8;
  --ax-cream: #fef0dd;
  --ax-ink: #1c1917;
  --ax-ink2: #35302c;
  --ax-mute: #6f6862;
  --ax-line: rgba(28, 25, 23, .12);
  --ax-line2: rgba(28, 25, 23, .07);
  --ax-orange: #ff9200;
  --ax-otext: #9c4f00;
  --ax-ohover: #7c3f00;
  --ax-dark: #0a0a0a;
  --ax-dark2: #141210;
  --ax-ondark: #ffffff;
  --ax-ondark2: #e4e4e4;
  --ax-ondark3: rgba(255, 255, 255, .55);
  --ax-linedark: rgba(255, 255, 255, .1);
  --ax-footer: #0b0907;
  --ax-sans: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ax-serif: "DM Serif Display", Georgia, "Times New Roman", serif;
  --ax-mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --ax-ease: cubic-bezier(.22, 1, .36, 1);
  --ax-gutter: clamp(18px, 4vw, 56px);
  --ax-max: 1360px;
  /* fixed header + announcement bar clearance for a page's first section */
  --ax-top: clamp(140px, 12vw, 176px);
}

/* ---------- scope resets (beat brand-overrides' !important heading rule) ---------- */
.ax { box-sizing: border-box; font-family: var(--ax-sans); color: var(--ax-ink); line-height: 1.6; font-size: 16px; }
.ax *, .ax *::before, .ax *::after { box-sizing: inherit; }
.ax h1, .ax h2, .ax h3, .ax h4 {
  font-family: var(--ax-sans) !important;
  font-weight: 600 !important;
  margin: 0; text-wrap: balance; color: inherit;
  padding-bottom: 50px !important;
}
.ax p, .ax ul, .ax ol, .ax figure { margin: 0; }
.ax ul, .ax ol { padding: 0; list-style: none; }
.ax img { max-width: 100%; display: block; height: auto; }
.ax :where(a) { text-decoration: none; color: inherit; }
.ax .ax-btn--ink, .ax .ax-btn--ink:hover { color: #fff; }
.ax .ax-btn--fill, .ax .ax-btn--fill:hover { color: var(--ax-ink); }
.ax .ax-link { color: var(--ax-otext); }
.ax .ax-link:hover { color: var(--ax-ohover); }
.ax.ax-dark .ax-link, .ax .ax-dark .ax-link { color: var(--ax-orange); }
.ax button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.ax :focus-visible { outline: 3px solid var(--ax-orange); outline-offset: 3px; border-radius: 4px; }
.ax em { font-family: var(--ax-serif); font-style: italic; font-weight: 400; }

/* Sticky must work on every page (AxStack, AxServicePanels, AxLedger, the FAQ rail).
   The Arolax master sheets set .body-wrapper { overflow: hidden }, which makes the
   wrapper a scroll container and silently disables position: sticky. `clip` still
   stops horizontal bleed but creates no scroll container. */
.body-wrapper { overflow: clip; }

.ax-wrap { max-width: var(--ax-max); margin-inline: auto; padding-inline: var(--ax-gutter); }
.ax-sec { padding-block: clamp(72px, 9vw, 128px); }
.ax-first { padding-top: var(--ax-top); }
.ax-light { background: var(--ax-paper); }
.ax-warm { background: var(--ax-warm); }
.ax-warm2 { background: var(--ax-warm2); }
.ax-dark { background: var(--ax-dark); color: var(--ax-ondark); }

/* ---------- type roles ---------- */
.ax-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--ax-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ax-ink2); line-height: 1.4;
}
.ax-eyebrow::before { content: "\2733"; color: var(--ax-otext); font-size: 13px; line-height: 1; }
.ax-dark .ax-eyebrow { color: var(--ax-ondark2); }
.ax-dark .ax-eyebrow::before { color: var(--ax-orange); }

.ax-h2 {
  font-weight: 600 !important; letter-spacing: -.03em; line-height: 1.02;
  font-size: clamp(36px, 5.2vw, 68px); color: var(--ax-ink);
}
.ax-h2 em { color: var(--ax-otext); letter-spacing: -.01em; }
.ax-dark .ax-h2 { color: var(--ax-ondark); }
.ax-dark .ax-h2 em { color: var(--ax-orange); }
.ax-lede { font-size: clamp(16px, 1.35vw, 19px); color: var(--ax-ink2); line-height: 1.6; max-width: 52ch; }
.ax-dark .ax-lede { color: var(--ax-ondark2); }
.ax-mono { font-family: var(--ax-mono); }

/* ---------- buttons ---------- */
.ax-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 16px 26px; border-radius: 999px; font-weight: 600; font-size: 15px; line-height: 1;
  transition: transform .35s var(--ax-ease), background .25s, color .25s, border-color .25s;
  will-change: transform; white-space: nowrap;
}
.ax-btn:hover { transform: translateY(-2px); }
.ax-btn--fill { background: var(--ax-orange); color: var(--ax-ink); }
.ax-btn--fill:hover { background: #ffa21f; }
.ax-btn--ink { background: var(--ax-ink); color: #fff; }
.ax-btn--ink:hover { background: #000; }
.ax-btn--ghost { border: 1.5px solid var(--ax-line); color: var(--ax-ink); background: transparent; }
.ax-btn--ghost:hover { border-color: var(--ax-ink); }
.ax-dark .ax-btn--ghost { border-color: rgba(255, 255, 255, .3); color: #fff; }
.ax-dark .ax-btn--ghost:hover { border-color: #fff; }
.ax-btn .ax-arr { display: inline-block; transition: transform .35s var(--ax-ease); }
.ax-btn:hover .ax-arr { transform: translateX(4px); }
.ax-link { font-weight: 600; color: var(--ax-otext); border-bottom: 1.5px solid currentColor; padding-bottom: 1px; }
.ax-link:hover { color: var(--ax-ohover); }
.ax-dark .ax-link { color: var(--ax-orange); }
.ax-dark .ax-link:hover { color: #ffb14d; }
.ax-circle {
  display: inline-grid; place-items: center; text-align: center;
  width: 128px; height: 128px; border-radius: 50%;
  background: var(--ax-orange); color: var(--ax-ink);
  font-weight: 600; font-size: 14px; line-height: 1.2;
  transition: transform .5s var(--ax-ease), background .25s;
}
.ax-circle:hover { transform: scale(1.06) rotate(-6deg); background: #ffa21f; }
.ax-circle span { display: block; padding: 12px; }
.ax-pill {
  display: inline-block; font-family: var(--ax-mono); font-size: 11px; padding: 4px 9px; border-radius: 999px;
  border: 1px solid var(--ax-line); color: var(--ax-ink2); letter-spacing: .04em; line-height: 1.4; white-space: nowrap;
}
.ax-dark .ax-pill { border-color: rgba(255, 255, 255, .2); color: var(--ax-ondark2); }

/* ---------- breadcrumb ---------- */
.ax-crumb { display: flex; gap: 10px; align-items: center; font-family: var(--ax-mono); font-size: 12px; color: var(--ax-mute); margin-bottom: 22px; flex-wrap: wrap; }
.ax-crumb a:hover { color: var(--ax-ink); }
.ax-crumb span[aria-current] { color: var(--ax-otext); }
.ax-dark .ax-crumb span[aria-current] { color: var(--ax-orange); }

/* ---------- reveal on scroll: see "Motion vocabulary" below ---------- */
.ax-rv[data-d="1"] { --ax-delay: .1s; }
.ax-rv[data-d="2"] { --ax-delay: .2s; }
.ax-rv[data-d="3"] { --ax-delay: .3s; }
.ax-rv[data-d="4"] { --ax-delay: .4s; }

/* ---------- marquee primitive ---------- */
.ax-marquee { overflow: hidden; }
.ax-marquee-track { display: flex; width: max-content; animation: ax-slide var(--ax-speed, 40s) linear infinite; }
.ax-marquee:hover .ax-marquee-track { animation-play-state: paused; }
@keyframes ax-slide { to { transform: translateX(-50%); } }

/* ============================================================
   Motion vocabulary (Aurax-derived, driven by /assets/js/ax.js)
   Hidden "before" states only apply under html.ax-js, which an inline
   script in BaseLayout adds before first paint. No JS → everything
   is simply visible.
   --ax-delay / --ax-dur are set from data-ax-delay / data-ax-dur.
   ============================================================ */
:root {
  --ax-out: cubic-bezier(.23, 1, .32, 1);        /* strong ease-out: entrances */
  --ax-inout: cubic-bezier(.77, 0, .175, 1);     /* on-screen movement */
  --ax-spring: cubic-bezier(.34, 1.56, .64, 1);  /* overshoot: magnetic, footer letters */
  --ax-delay: 0s;
  --ax-dur: .7s;
}

/* -- reveal: .ax-rv (= up), [data-ax="up|down|left|right|fade|zoom|blur"] -- */
/* Reveals use the individual translate/scale properties, never transform, so a
   component's own hover/tilt transform keeps working after the reveal. */
.ax-js .ax-rv, .ax-js [data-ax] {
  opacity: 0; filter: blur(8px); translate: 0 40px;
  transition: opacity var(--ax-dur) var(--ax-out) var(--ax-delay), translate var(--ax-dur) var(--ax-out) var(--ax-delay), scale var(--ax-dur) var(--ax-out) var(--ax-delay), filter var(--ax-dur) var(--ax-out) var(--ax-delay);
}
.ax-js [data-ax="down"]  { translate: 0 -40px; }
.ax-js [data-ax="left"]  { translate: -40px 0; }
.ax-js [data-ax="right"] { translate: 40px 0; }
.ax-js [data-ax="fade"]  { translate: none; }
.ax-js [data-ax="blur"]  { translate: none; filter: blur(14px); }
.ax-js [data-ax="zoom"]  { translate: none; scale: .92; }
.ax-js .ax-rv.ax-in, .ax-js [data-ax].ax-in { opacity: 1; filter: none; translate: none; scale: none; }

/* -- split text: [data-ax-split="word|char|line"] + [data-ax-effect] --
   .ax-w word · .ax-wi word inner · .ax-c char · .ax-u animated unit (--i, --l) */
.ax-split .ax-w { display: inline-block; white-space: nowrap; }
.ax-split .ax-wi { display: inline-block; }
.ax-split .ax-c { display: inline-block; }
.ax-split[data-ax-effect="3d"] { perspective: 1000px; }
.ax-js .ax-split .ax-u {
  transition: opacity .9s var(--ax-out), transform .9s var(--ax-out), filter .9s var(--ax-out);
  transition-delay: calc(var(--ax-delay) + var(--i, 0) * .045s);
}
.ax-js .ax-split:not(.ax-in) .ax-u,
.ax-js .ax-split:not(.ax-in)[data-ax-effect="fade"] .ax-u { opacity: 0; transform: translate3d(0, 40px, 0); }
.ax-js .ax-split:not(.ax-in)[data-ax-effect="left"]  .ax-u { transform: translate3d(-40px, 0, 0); }
.ax-js .ax-split:not(.ax-in)[data-ax-effect="right"] .ax-u { transform: translate3d(40px, 0, 0); }
.ax-js .ax-split:not(.ax-in)[data-ax-effect="zoom"]  .ax-u { transform: scale(.8); }
.ax-js .ax-split:not(.ax-in)[data-ax-effect="3d"]    .ax-u { transform: rotateX(-80deg); transform-origin: top center; }
/* clip: each word rises inside its own clip box; delay by line so a line lifts together */
.ax-split[data-ax-effect="clip"] .ax-w { overflow: hidden; vertical-align: bottom; padding-bottom: .08em; margin-bottom: -.08em; }
.ax-js .ax-split[data-ax-effect="clip"] .ax-u { transition: transform 1s var(--ax-out); transition-delay: calc(var(--ax-delay) + var(--l, 0) * .1s); }
.ax-js .ax-split:not(.ax-in)[data-ax-effect="clip"] .ax-u { opacity: 1; transform: translate3d(0, 105%, 0); }
/* hero: runs on load (ax.js adds .ax-in next frame); chars slide in from the right */
.ax-js .ax-split[data-ax-effect="hero"] .ax-u { transition: opacity 1.1s var(--ax-out), transform 1.1s var(--ax-out); transition-delay: calc(var(--ax-delay) + var(--i, 0) * .028s); }
.ax-js .ax-split:not(.ax-in)[data-ax-effect="hero"] .ax-u { opacity: 0; transform: translate3d(60px, 0, 0); }
/* rise: footer wordmark letters — spring up and unfold */
.ax-split[data-ax-effect="rise"] { perspective: 800px; }
.ax-js .ax-split[data-ax-effect="rise"] .ax-u { transition: opacity .9s var(--ax-out), transform 1.2s var(--ax-spring); transition-delay: calc(var(--ax-delay) + var(--i, 0) * .06s); transform-origin: bottom center; }
.ax-js .ax-split:not(.ax-in)[data-ax-effect="rise"] .ax-u { opacity: 0; transform: translate3d(0, 20%, 0) rotateX(90deg); }
/* blur: scrubbed by scroll — ax.js adds .ax-on unit by unit as the block rises 85% → 20% */
.ax-js .ax-split[data-ax-effect="blur"] .ax-u { opacity: 0; filter: blur(10px); transition: opacity .5s var(--ax-out), filter .5s var(--ax-out); }
.ax-js .ax-split[data-ax-effect="blur"] .ax-u.ax-on, .ax-js .ax-split[data-ax-effect="blur"].ax-in .ax-u { opacity: 1; filter: none; }

/* -- images --
   [data-ax-img="reveal"]  wipe in from the left, picture settles from 1.3 → 1
   [data-ax-img="scale"]   ax.js scales the img 1 → 1.15 as the frame rises
   [data-ax-parallax="0.8"] ax.js lags the element (put it on the img inside an overflow-clipped frame)
   .ax-img-hover           pointer hover: quick blur-ripple + 1.05 scale (stand-in for the WebGL displacement) */
.ax-js [data-ax-img="reveal"] { clip-path: inset(0 100% 0 0); transition: clip-path 1.2s var(--ax-out) var(--ax-delay); }
.ax-js [data-ax-img="reveal"] img { transform: scale(1.3) translate3d(8%, 0, 0); transition: transform 1.2s var(--ax-out) var(--ax-delay); }
.ax-js [data-ax-img="reveal"].ax-in { clip-path: inset(0 0 0 0); }
.ax-js [data-ax-img="reveal"].ax-in img { transform: none; }
[data-ax-img="scale"] { overflow: hidden; }
[data-ax-img="scale"] img { transform-origin: center; will-change: transform; }
[data-ax-parallax] { will-change: transform; }
.ax-par { overflow: hidden; }
/* 124% tall, centred with translate (a % margin would be relative to the WIDTH); ax.js clamps the lag to the 12% spare on each side */
.ax-par > img, .ax-par > picture > img { height: 124%; width: 100%; object-fit: cover; translate: 0 -9.68%; }
.ax-img-hover { overflow: hidden; }
.ax-img-hover img { transition: transform 1s var(--ax-out); }
@media (hover: hover) and (pointer: fine) {
  .ax-img-hover:hover img { transform: scale(1.05); animation: ax-ripple .7s var(--ax-out); }
}
@keyframes ax-ripple { 0% { filter: blur(0); } 35% { filter: blur(4px) saturate(1.15); } 100% { filter: blur(0); } }

/* -- bouncy drop-in: [data-ax-bounce] parent, children fall from above -- */
.ax-js [data-ax-bounce] > * { opacity: 0; transform: translate3d(0, -60px, 0); }
.ax-js [data-ax-bounce].ax-in > * { animation: ax-bounce 1.1s var(--ax-out) forwards; animation-delay: calc(var(--ax-delay) + var(--i, 0) * .12s); }
@keyframes ax-bounce {
  0% { opacity: 0; transform: translate3d(0, -60px, 0); }
  55% { opacity: 1; transform: translate3d(0, 6px, 0); }
  75% { transform: translate3d(0, -3px, 0); }
  100% { opacity: 1; transform: none; }
}

/* -- buttons: press feedback, magnetic drift, fill-from-pointer -- */
.ax .ax-btn { position: relative; overflow: hidden; isolation: isolate; transition: transform .16s var(--ax-out), color .25s, border-color .25s, background .25s; }
.ax .ax-btn:active { transform: scale(.97); }
.ax .ax-btn::before {
  content: ""; position: absolute; z-index: -1; left: var(--mx, 50%); top: var(--my, 50%);
  width: 640px; height: 640px; border-radius: 50%; transform: translate(-50%, -50%) scale(0);
  transition: transform .7s var(--ax-out); background: var(--ax-ink); pointer-events: none;
}
.ax .ax-btn--fill::before { background: var(--ax-ink); }
.ax .ax-btn--ink::before { background: var(--ax-orange); }
.ax .ax-btn--ghost::before { background: var(--ax-ink); }
@media (hover: hover) and (pointer: fine) {
  .ax .ax-btn:hover::before { transform: translate(-50%, -50%) scale(1); }
  .ax .ax-btn--fill:hover { color: #fff; background: var(--ax-orange); }
  .ax .ax-btn--ink:hover { color: var(--ax-ink); background: var(--ax-ink); }
  .ax .ax-btn--ghost:hover { color: #fff; }
  .ax .ax-btn:hover { transform: none; }
}
[data-ax-magnetic], .ax .ax-btn[data-ax-magnetic] { transition: transform .5s var(--ax-spring), color .25s, border-color .25s, background .25s; }
[data-ax-magnetic].is-mag, .ax .ax-btn[data-ax-magnetic].is-mag { transition: transform .15s var(--ax-out), color .25s, border-color .25s, background .25s; }

/* -- underline link (Aurax underline-btn): line retracts on hover -- */
.ax-ul { position: relative; display: inline-flex; align-items: center; gap: 6px; font-weight: 500; font-size: 15px; line-height: 1; padding-bottom: 6px; white-space: nowrap; }
.ax-ul::before { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1.5px; background: currentColor; transition: width .3s var(--ax-out); }
.ax-ul:hover::before { width: 0; }
.ax-ul .ax-arr { transition: transform .3s var(--ax-out); }
.ax-ul:hover .ax-arr { transform: translate(3px, -3px); }

/* -- hover image that follows the pointer (data-ax-hover-img on the row) -- */
[data-ax-hover-img] { position: relative; }
[data-ax-hover-img] .ax-hover-img { position: absolute; left: 0; top: 0; pointer-events: none; opacity: 0; transform: translate(-50%, -50%) scale(.9); transition: opacity .3s var(--ax-out), scale .4s var(--ax-out); z-index: 3; }
@media (hover: hover) and (pointer: fine) { [data-ax-hover-img]:hover .ax-hover-img { opacity: 1; } }

/* -- cursor (ax.js builds #ax-cursor on fine pointers ≥ 993px) -- */
#ax-cursor {
  position: fixed; left: 0; top: 0; z-index: 99999; pointer-events: none;
  width: 14px; height: 14px; border-radius: 50%; background: var(--ax-ink); opacity: 0;
  display: grid; place-items: center; mix-blend-mode: normal;
  transition: width .3s var(--ax-out), height .3s var(--ax-out), opacity .3s, background .3s, box-shadow .3s;
}
#ax-cursor.is-seen { opacity: .8; }
#ax-cursor.is-link { width: 20px; height: 20px; opacity: .5; }
#ax-cursor.is-down { width: 11px; height: 11px; }
#ax-cursor.is-hidden { opacity: 0; }
#ax-cursor.is-view { width: 84px; height: 84px; opacity: 1; background: var(--ax-cursor-bg, var(--ax-orange)); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
#ax-cursor.is-view.is-down { width: 76px; height: 76px; }
.ax-cursor-label { font-family: var(--ax-sans); font-size: 12px; font-weight: 600; color: var(--ax-ink); opacity: 0; transform: scale(.6); transition: opacity .25s var(--ax-out), transform .3s var(--ax-out); white-space: nowrap; }
#ax-cursor.is-view .ax-cursor-label { opacity: 1; transform: none; }
.ax-cursor-on [data-ax-cursor] { cursor: none; }
.ax-cursor-on [data-ax-cursor] * { cursor: none; }

/* -- animated dots (Aurax page-header ornament) -- */
.ax-dots { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.ax-dots span { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--ax-orange); left: 15%; top: 25%; }
.ax-dots span:nth-child(2) { background: var(--ax-ink); left: 5%; top: 70%; }
.ax-dots span:nth-child(3) { width: 11px; height: 11px; background: #ffc36b; left: 65%; top: 60%; }
.ax-dots span:nth-child(4) { width: 14px; height: 14px; border-radius: 0; background: var(--ax-otext); left: auto; right: 5%; top: 30%; transform: rotate(20deg); }
.ax-dots span:nth-child(5) { width: 12px; height: 12px; background: var(--ax-orange); left: auto; right: 10%; top: auto; bottom: 20%; }
.ax-dots span:nth-child(6) { width: 10px; height: 10px; border-radius: 0; background: var(--ax-ink); left: 35%; top: auto; bottom: 15%; transform: rotate(20deg); }
.ax-dots .ax-dot-lr { animation: ax-dot-lr 4s ease-in-out infinite alternate; }
.ax-dots .ax-dot-ud { animation: ax-dot-ud 4s ease-in-out infinite alternate; }
.ax-dots .ax-dot-rot { animation: ax-dot-rot 10s linear infinite; }
@keyframes ax-dot-lr { to { transform: translateX(40px); } }
@keyframes ax-dot-ud { to { transform: translateY(40px); } }
@keyframes ax-dot-rot { to { transform: rotate(380deg); } }
@media (max-width: 767px) { .ax-dots { display: none; } }

/* ---------- motion prefs ---------- */
@media (prefers-reduced-motion: reduce) {
  .ax-js .ax-rv, .ax-js [data-ax], .ax-js .ax-split .ax-u, .ax-js [data-ax-img="reveal"], .ax-js [data-ax-img="reveal"] img, .ax-js [data-ax-bounce] > * { opacity: 1 !important; translate: none !important; scale: none !important; filter: none !important; clip-path: none !important; transition: none !important; animation: none !important; }
  .ax-js .ax-split .ax-u, .ax-js [data-ax-img="reveal"] img, .ax-js [data-ax-bounce] > * { transform: none !important; }
  .ax *, .ax *::before, .ax *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; }
  .ax-dots span { animation: none !important; }
  #ax-cursor { display: none; }
}