/* ============================================================================
   AXD Intelligence — site layer (axdi-site)
   Built on css/tokens.css (BASE). Components consume semantic tokens only.
   Stage-tier motion (marketing surfaces): reveal + wipe, ease-out, no bounce,
   no parallax displacement; reduced motion collapses to opacity.
   ========================================================================== */

:root {
  --dur-stage: 600ms;
  --dur-wipe: 900ms;
  --rise: 16px;
}

/* -- reset ----------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--color-canvas);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: var(--weight-body);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; }
.mono { font-family: var(--font-mono); font-size: var(--text-mono); }

:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; border-radius: 4px; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--color-primary); color: var(--color-onprimary);
  padding: 8px 16px; border-radius: var(--radius-control);
  font-size: var(--text-button); font-weight: var(--weight-button);
}
.skip:focus-visible { left: var(--pad-page); top: 8px; }

/* -- shared type roles ----------------------------------------------------- */
.eyebrow {
  font-size: var(--text-eyebrow);
  font-weight: var(--weight-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-faint);
}
.display {
  font-size: var(--text-display);
  font-weight: var(--weight-display);
  letter-spacing: var(--tracking-display);
  line-height: 1.25;
}
.lead { color: var(--color-muted); max-width: var(--measure); }
.meta { font-size: var(--text-meta); color: var(--color-faint); }

/* -- layout ---------------------------------------------------------------- */
.wrap { max-width: var(--content-max); margin: 0 auto; padding: 0 var(--pad-page); }
.sec { padding: var(--gap-section) 0; }
.sec-head { margin-bottom: var(--gap-group); }
.sec-head .eyebrow { margin-bottom: var(--stack-heading); }
.sec-head .display { margin-bottom: var(--stack-heading); }
.sec-head .lead + .lead { margin-top: var(--gap-inline); }

/* -- buttons ---------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--gap-icon);
  height: var(--control-h);
  padding: 0 var(--inset-button-x);
  border-radius: var(--radius-control);
  font-size: var(--text-button);
  font-weight: var(--weight-button);
  letter-spacing: var(--tracking-button);
  transition: background var(--dur-state) var(--ease-state),
              color var(--dur-state) var(--ease-state),
              border-color var(--dur-state) var(--ease-state),
              opacity var(--dur-state) var(--ease-state),
              transform var(--dur-state) var(--ease-state);
  white-space: nowrap;
}
.btn:active { transform: scale(.98); }
.btn-primary { background: var(--color-primary); color: var(--color-onprimary); }
.btn-primary:hover { opacity: .92; }
.btn-secondary { border: 1px solid var(--color-linestrong); color: var(--color-ink); background: transparent; }
.btn-secondary:hover { background: var(--color-hover); }
.btn-ghost { color: var(--color-muted); background: transparent; }
.btn-ghost:hover { background: var(--color-hover); color: var(--color-ink); }
.btn-compact { height: var(--control-h-compact); padding: 0 var(--inset-button-x-compact); }
.btn-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--control-h); height: var(--control-h);
  border-radius: var(--radius-control);
  color: var(--color-muted);
  transition: background var(--dur-state) var(--ease-state), color var(--dur-state) var(--ease-state);
}
.btn-icon:hover { background: var(--color-hover); color: var(--color-ink); }
.ic { width: 18px; height: 18px; }
.ic-sm { width: 14px; height: 14px; }

/* -- cards, badges ---------------------------------------------------------- */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  padding: var(--inset-card);
}
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: var(--inset-badge-y) var(--inset-badge-x);
  border-radius: var(--radius-chip);
  font-size: var(--text-eyebrow);
  font-weight: var(--weight-eyebrow);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.badge .dot { width: 6px; height: 6px; border-radius: var(--radius-full); corner-shape: round; background: currentColor; }
.badge-success { color: var(--color-success); background: color-mix(in srgb, var(--color-success) 14%, transparent); border: 1px solid color-mix(in srgb, var(--color-success) 35%, transparent); }
.badge-warning { color: var(--color-warning); background: color-mix(in srgb, var(--color-warning) 14%, transparent); border: 1px solid color-mix(in srgb, var(--color-warning) 35%, transparent); }

/* -- theme-conditional imagery ---------------------------------------------- */
.only-light { display: none; }
:root[data-theme="light"] .only-dark { display: none; }
:root[data-theme="light"] .only-light { display: block; }

/* ============================ TOPBAR ============================ */
.topbar { position: sticky; top: 0; z-index: 40; background: var(--color-canvas); border-bottom: 1px solid var(--color-line); }
.topbar-inner {
  max-width: var(--content-max); margin: 0 auto;
  padding: 0 var(--pad-page);
  height: var(--bar-h);
  display: flex; align-items: center; gap: var(--gap-inline);
}
.brand { display: inline-flex; align-items: center; }
.brand-lockup { width: 104px; height: auto; }
.nav-rail { margin-left: auto; display: flex; gap: var(--gap-inline); }
.nav-rail a {
  display: inline-flex; align-items: center;
  height: 32px; padding: 0 10px;
  border-radius: var(--radius-chip);
  font-size: var(--text-eyebrow); font-weight: var(--weight-eyebrow);
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
  color: var(--color-muted);
  transition: background var(--dur-state) var(--ease-state), color var(--dur-state) var(--ease-state);
}
.nav-rail a:hover { background: var(--color-hover); color: var(--color-ink); }
.nav-rail a.active { background: var(--color-surface2); color: var(--color-ink); }
.topbar-actions { display: flex; gap: var(--gap-inline); align-items: center; }
.menu-toggle { display: none; }
.ic-sun { display: none; }
:root[data-theme="light"] .ic-sun { display: block; }
:root[data-theme="light"] .ic-moon { display: none; }

/* sheet menu (mobile) — overlay tier */
.scrim { position: fixed; inset: 0; z-index: 48; background: var(--color-scrim); }
.sheet {
  position: fixed; z-index: 49;
  left: var(--pad-page); right: var(--pad-page); top: calc(var(--bar-h) + 8px);
  background: var(--color-overlay);
  border: 1px solid var(--color-linestrong);
  border-radius: var(--radius-modal);
  padding: var(--inset-modal);
  box-shadow: var(--shadow-overlay);
}
.sheet-nav { display: flex; flex-direction: column; gap: var(--gap-icon); }
.sheet-nav a {
  display: flex; align-items: center;
  height: 44px; padding: 0 12px; margin: 0 var(--hover-inset);
  border-radius: var(--radius-control);
  font-size: var(--text-button); font-weight: var(--weight-button);
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
  color: var(--color-ink);
}
.sheet-nav a:hover { background: var(--color-overlay-hover); }

/* ============================ RAIL (plumb spine) ============================ */
.rail { position: absolute; top: 0; bottom: 0; left: max(24px, calc(50vw - 680px)); width: 1px; z-index: 1; display: none; }
.rail-base { position: absolute; inset: 0; width: 1px; background: var(--color-line); }
.rail-fill { position: absolute; top: 0; width: 1px; height: 0; background: var(--color-linestrong); }
.rail-dot {
  position: absolute; left: -3.5px; width: 8px; height: 8px;
  border-radius: var(--radius-full); corner-shape: round;
  background: var(--color-canvas);
  border: 1px solid var(--color-linestrong);
  transition: background var(--dur-state) var(--ease-state);
}
.rail-dot.passed { background: var(--color-ink); border-color: var(--color-ink); }
@media (min-width: 1440px) { .rail { display: block; } }

/* ============================ HERO ============================ */
.hero {
  position: relative;
  min-height: calc(100svh - var(--bar-h));
  display: grid; place-items: center;
  overflow: hidden;
  padding: var(--gap-section) 0;
}
.glyph-field {
  position: absolute; inset: -120px;
  background-image: url("/assets/logos/axdi-pattern-tile.svg");
  background-size: 90px 90px;
  opacity: .05;
  pointer-events: none;
}
.js .glyph-field { animation: drift 90s linear infinite alternate; }
@keyframes drift { from { transform: translate(0, 0); } to { transform: translate(60px, 40px); } }
:root[data-theme="light"] .glyph-field { display: none; }

.hero-inner {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  padding: 0 var(--pad-page);
  max-width: 820px;
}
.lockup { width: min(440px, 74vw); margin-bottom: var(--gap-group); }
.lockup img { width: 100%; height: auto; }
.js .lockup { clip-path: inset(0 100% 0 0); }
.js .lockup.drawn {
  clip-path: inset(0 0 0 0);
  transition: clip-path var(--dur-wipe) var(--ease-spatial);
}
.hero-eyebrow { margin-bottom: var(--stack-heading); }
.hero-title {
  font-size: clamp(28px, 5vw, 44px);
  font-weight: var(--weight-display);
  letter-spacing: var(--tracking-display);
  line-height: 1.15;
  margin-bottom: var(--stack-heading);
}
.hero-lead { margin: 0 auto var(--gap-group); }
.hero-cta { display: flex; gap: var(--gap-inline); flex-wrap: wrap; justify-content: center; }

.hero-plumb {
  position: absolute; z-index: 1;
  left: 50%; bottom: 0; width: 1px; height: 96px;
  background: var(--color-line);
  transform-origin: top;
}
.js .hero-plumb { transform: scaleY(0); transition: transform var(--dur-stage) var(--ease-spatial) 1.1s; }
.js .hero-plumb.drawn { transform: scaleY(1); }

/* ============================ SUITE ============================ */
.suite-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap-item); }
.app-card {
  display: flex; flex-direction: column;
  min-height: 300px;
  transition: background var(--dur-state) var(--ease-state), border-color var(--dur-state) var(--ease-state);
}
a.app-card:hover { background: var(--color-surface2); border-color: var(--color-linestrong); }
.app-mark { height: 96px; display: flex; align-items: center; margin-bottom: var(--gap-group); }
.app-mark img { max-height: 76px; width: auto; max-width: 82%; }
.app-mark-next {
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-control);
  color: var(--color-faint);
}
.app-card .eyebrow { margin-bottom: var(--gap-icon); }
.app-desc { color: var(--color-muted); margin-bottom: var(--gap-item); }
.app-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: var(--gap-inline); }
a.app-card .btn-compact { opacity: 0; transform: translateX(-4px); transition: opacity var(--dur-state) var(--ease-state), transform var(--dur-state) var(--ease-state); }
a.app-card:hover .btn-compact, a.app-card:focus-visible .btn-compact { opacity: 1; transform: none; }
.app-card-next { border-style: dashed; background: transparent; }
.app-card-next .app-desc { color: var(--color-faint); }

/* ============================ ORIGIN ============================ */
.origin-grid {
  display: grid; grid-template-columns: 1fr 420px;
  gap: var(--gap-section); align-items: center;
}
.origin-copy .eyebrow { margin-bottom: var(--stack-heading); }
.origin-copy .display { margin-bottom: var(--stack-heading); }
.origin-copy .lead + .lead { margin-top: var(--gap-inline); }
.aperture { position: relative; color: var(--color-ink); }
.aperture .ap-svg { width: 100%; height: auto; }
img.ap-glyph {
  position: absolute;
  left: 50%; top: 50%;
  width: 11.4%;
  transform: translate(-50%, -50%);
}
:root[data-theme="light"] img.ap-glyph { filter: invert(1); }
.aperture .ap-r { stroke: var(--color-ink); }
.aperture .ap-r:nth-child(1) { opacity: .14; }
.aperture .ap-r:nth-child(2) { opacity: .22; }
.aperture .ap-r:nth-child(3) { opacity: .34; }
.aperture .ap-r:nth-child(4) { opacity: .5; }
.aperture .ap-r:nth-child(5) { opacity: .72; }
.origin-lockup { margin-bottom: var(--gap-group); }
.origin-lockup img { width: 132px; height: auto; }
.js .aperture .ap-r { opacity: 0; transform-origin: 50% 50%; transform: scale(.94); }
.js .in .ap-r {
  transform: none;
  transition: opacity var(--dur-stage) var(--ease-spatial), transform var(--dur-stage) var(--ease-spatial);
}
.js .in .ap-r:nth-child(1) { opacity: .14; transition-delay: 0ms; }
.js .in .ap-r:nth-child(2) { opacity: .22; transition-delay: 80ms; }
.js .in .ap-r:nth-child(3) { opacity: .34; transition-delay: 160ms; }
.js .in .ap-r:nth-child(4) { opacity: .5; transition-delay: 240ms; }
.js .in .ap-r:nth-child(5) { opacity: .72; transition-delay: 320ms; }
.js img.ap-glyph { opacity: 0; }
.js .in img.ap-glyph { opacity: 1; transition: opacity var(--dur-stage) var(--ease-spatial) 420ms; }

/* ============================ APPROACH ============================ */
.journey { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap-item); }
.step {
  padding: var(--inset-card);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  display: flex; flex-direction: column; gap: var(--gap-icon);
}
.step-n { color: var(--color-faint); }
.step-title { font-size: var(--text-section); font-weight: var(--weight-section); }
.step-desc { color: var(--color-muted); font-size: var(--text-meta); }

/* ============================ STANDARD ============================ */
.creed { display: flex; flex-direction: column; }
.creed li {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--gap-group); align-items: baseline;
  padding: var(--gap-group) 0;
  border-top: 1px solid var(--color-line);
}
.creed li:last-child { border-bottom: 1px solid var(--color-line); }
.creed-line {
  font-size: clamp(20px, 2.4vw, 28px);
  font-weight: var(--weight-display);
  letter-spacing: var(--tracking-display);
  line-height: 1.3;
}
.creed-note { color: var(--color-muted); }

/* ============================ STUDIO ============================ */
.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-item); }
.team-card { display: flex; flex-direction: column; gap: var(--gap-icon); }
.team-photo {
  width: 128px; height: 128px;
  border-radius: var(--radius-control);
  border: 1px solid var(--color-line);
  object-fit: cover;
  margin-bottom: var(--gap-icon);
  background: #000000;
}
:root[data-theme="light"] img.team-photo { filter: invert(1); border-color: transparent; }
.team-photo-mark {
  display: flex; align-items: center; justify-content: center;
  color: var(--color-ink);
  background: #000000;
}
:root[data-theme="light"] .team-photo-mark { background: #FFFFFF; }
.team-photo-mark svg { width: 60px; height: 60px; }
.team-name { font-size: var(--text-section); font-weight: var(--weight-section); }
.team-bio { color: var(--color-muted); }

/* ============================ FOOTER ============================ */
.footer { border-top: 1px solid var(--color-line); padding: var(--gap-section) 0 var(--gap-group); }
.footer-inner { display: flex; gap: var(--gap-section); flex-wrap: wrap; }
.footer-lockup { width: 118px; height: auto; }
.footer-line { color: var(--color-faint); font-size: var(--text-meta); margin-top: var(--gap-inline); }
.footer-cols { display: flex; gap: var(--gap-section); margin-left: auto; flex-wrap: wrap; }
.footer-col { display: flex; flex-direction: column; gap: var(--gap-inline); }
.footer-col .eyebrow { margin-bottom: 4px; }
.footer-col a, .footer-col span { font-size: var(--text-meta); color: var(--color-muted); }
.footer-col a:hover { color: var(--color-ink); }
.footer-legal {
  margin-top: var(--gap-group);
  padding-top: var(--gap-item);
  border-top: 1px solid var(--color-line);
  display: flex; justify-content: space-between; gap: var(--gap-inline);
}

/* ============================ REVEALS (stage tier) ============================ */
.js [data-reveal] { opacity: 0; transform: translateY(var(--rise)); }
.js [data-reveal].in {
  opacity: 1; transform: none;
  transition: opacity var(--dur-stage) var(--ease-spatial), transform var(--dur-stage) var(--ease-spatial);
  transition-delay: calc(var(--reveal-i, 0) * 60ms);
}

/* ============================ RESPONSIVE ============================ */
@media (max-width: 1279px) {
  .suite-grid { grid-template-columns: repeat(2, 1fr); }
  .journey { grid-template-columns: repeat(2, 1fr); }
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .origin-grid { grid-template-columns: 1fr 340px; gap: var(--gap-group); }
}
@media (max-width: 900px) {
  .origin-grid { grid-template-columns: 1fr; }
  .aperture { max-width: 340px; margin: 0 auto; }
}
@media (max-width: 767px) {
  .nav-rail { display: none; }
  .menu-toggle { display: inline-flex; }
  .suite-grid, .journey, .team-grid { grid-template-columns: 1fr; }
  .creed li { grid-template-columns: 1fr; gap: var(--gap-inline); }
  .footer-inner { flex-direction: column; gap: var(--gap-group); }
  .footer-cols { margin-left: 0; gap: var(--gap-group); }
  .app-card { min-height: 0; }
  a.app-card .btn-compact { opacity: 1; transform: none; }
}

/* ============================ CAPTURE MODE (screenshot verification) ====== */
.capture .hero { min-height: 780px; }
.capture [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
.capture .glyph-field { animation: none !important; }
.capture .hero-plumb { transition: none; transform: scaleY(1); }
.capture .lockup { clip-path: none !important; }
.capture .ap-r { transform: none !important; }
.capture img.ap-glyph { opacity: 1 !important; }

/* ============================ REDUCED MOTION ============================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .glyph-field { animation: none; }
  .js [data-reveal] { transform: none; transition: opacity 1ms; }
  .js .hero-plumb { transition: none; transform: scaleY(1); }
  .js .lockup { clip-path: none; }
  .js img.ap-glyph { opacity: 1; }
  .js .aperture .ap-r { transform: none; transition: none; }
}