/* Analytical Alliance: one shared stylesheet for every page.
   Most layout lives in inline styles on the elements (carried over unchanged
   from the original design). This file holds fonts, base rules, animations,
   hover states, the header menu, the loader and the mobile overrides. */

/* ---------- fonts (self hosted, only the weights the site uses) ---------- */
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/assets/fonts/space-grotesk.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/plex-sans-400.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/plex-mono-400.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/plex-mono-500.woff2) format('woff2'); }

/* ---------- base ---------- */
html, body { margin: 0; padding: 0; background: #000; }
* { box-sizing: border-box; }
::selection { background: #2b4ecc; color: #fff; }
a { color: #7f9dff; text-decoration: none; }
a:hover { color: #b9c9ff; }
:focus-visible { outline: 2px solid #7f9dff; outline-offset: 3px; }
summary::-webkit-details-marker { display: none; }
[hidden] { display: none !important; }

@keyframes aaPulse { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } }
@keyframes aaFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes aaRise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: translateY(0); } }
@keyframes aaScan { 0% { transform: translateY(0); opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { transform: translateY(760px); opacity: 0; } }
@keyframes aaDrift { from { background-position: 0 0; } to { background-position: 260px 260px; } }
@keyframes aaCell { 0%, 100% { opacity: 0; } 12% { opacity: 1; } 30% { opacity: 0.15; } 44% { opacity: 0.7; } 60%, 90% { opacity: 0; } }
@keyframes aaTravel { from { left: -12%; } to { left: 112%; } }
@keyframes aaBreath {
  0%, 100% { box-shadow: 0 0 0 1px rgba(43,78,204,0.28), 0 0 30px rgba(43,78,204,0.1); }
  50% { box-shadow: 0 0 0 1px rgba(43,78,204,0.55), 0 0 58px rgba(43,78,204,0.24); }
}
/* Services, About and Contact had their own variants of two keyframes */
@keyframes aaPulse35 { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
@keyframes aaRise28 { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } }
@keyframes aaRise22 { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } }
@keyframes aaMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes aaSweep { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes aaBreathe { 0%, 100% { opacity: 0.5; transform: scale(1); } 50% { opacity: 0.72; transform: scale(1.045); } }
@keyframes aaSheen { 0% { left: -45%; } 55%, 100% { left: 125%; } }
@keyframes aaHint { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(7px); } }
@keyframes aaLdDraw { from { stroke-dashoffset: 220; } to { stroke-dashoffset: 0; } }
@keyframes aaLdBar { from { stroke-dashoffset: 60; opacity:0; } 60% { opacity:1; } to { stroke-dashoffset: 0; opacity:1; } }
@keyframes aaLdFill { 0% { width:0%; } 45% { width:38%; } 70% { width:71%; } 100% { width:100%; } }
@keyframes aaLdPulse { 0%,100% { opacity:0.35; } 50% { opacity:1; } }
@keyframes aaLdAuto { to { opacity: 0; visibility: hidden; } }

/* ---------- loader: first page of a visit only (set in each page head) ---------- */
.aa-loader { display: none; position: fixed; inset: 0; z-index: 12000; background: #000; flex-direction: column; align-items: center; justify-content: center; gap: 34px; opacity: 1; transition: opacity .65s ease; }
html.aa-loading .aa-loader { display: flex; animation: aaLdAuto .65s ease 6s forwards; } /* safety: never stuck */
.aa-loader.aa-out { opacity: 0; pointer-events: none; }

/* ---------- hover states (were style-hover in the design tool) ---------- */
.hv6f81f0:hover { background:rgba(43,78,204,0.24) !important; border-color:#2b4ecc !important; }
.hv0c1cb4:hover { background:#3a5ee0 !important; box-shadow:0 0 64px rgba(43,78,204,0.6) !important; }
.hvb16370:hover { border-color:rgba(43,78,204,0.7) !important; color:#fff !important; }
.hv23aefd:hover { background:#3a5ee0 !important; }
.hv406e51:hover { background:rgba(43,78,204,0.05) !important; }
.hvb08741:hover { border-color:rgba(43,78,204,0.55) !important; transform:translateY(-5px) !important; }
.hv24acd7:hover { background:#3a5ee0 !important; box-shadow:0 0 66px rgba(43,78,204,0.6) !important; }
.hvee672b:hover { border-color:rgba(43,78,204,0.7) !important; }
.hv2303b4:hover { border-color:#2b4ecc !important; }
.hv24b752:hover { background:linear-gradient(90deg, rgba(43,78,204,0.06), rgba(43,78,204,0)) !important; }
.hvde8001:hover { border-color:rgba(122,152,255,0.6) !important; }
/* submit button sheen */
.aa-sheen::after { content:''; position:absolute; top:0; left:-45%; width:38%; height:100%; background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.26), rgba(255,255,255,0)); transform:skewX(-18deg); animation:aaSheen 4s ease-in-out infinite; pointer-events:none; }

/* ---------- scroll reveals (Services, About) ----------
   Hidden only while the page scripts run (html.js); the scripts then set
   inline styles that bring each block in. --hide is the start offset. */
html.js [data-svc-left], html.js [data-svc-right], html.js [data-svc-chip], html.js [data-ab-reveal] { opacity: 0; transform: var(--hide); }

/* ---------- header menu button (small screens) ---------- */
.aa-menu-btn { display: none; }

/* ---------- chat button and price badge ---------- */
[data-wa-fab] { display: none; text-decoration: none; }
[data-cta-short] { display: none; }

/* ---------- mobile ---------- */
@media (max-width: 760px) {
  header { padding: 14px 18px !important; gap: 10px !important; }
  header { background: #000 !important; }
  .aa-header { flex-wrap: nowrap !important; }
  .aa-menu-btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 44px; min-width: 44px; padding: 0 18px; margin: 0;
    background: rgba(43,78,204,0.1); border: 1px solid rgba(43,78,204,0.5); border-radius: 2px;
    color: #e8ecf7; font-family: 'IBM Plex Mono', monospace; font-size: 14px; letter-spacing: 0.12em; text-transform: uppercase;
    cursor: pointer;
  }
  .aa-header[data-menu-open] .aa-menu-btn { background: rgba(43,78,204,0.24); border-color: #2b4ecc; }
  .aa-header nav[data-nav] {
    display: none !important; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column !important; align-items: stretch !important; gap: 0 !important;
    padding: 6px 20px 20px; background: #000; border-bottom: 1px solid rgba(43,78,204,0.25);
    font-size: 15px !important; letter-spacing: 0.12em !important;
  }
  .aa-header[data-menu-open] nav[data-nav] { display: flex !important; }
  .aa-header nav[data-nav] a { display: flex !important; align-items: center; min-height: 48px; padding: 0 2px !important; border-bottom: 1px solid rgba(232,236,247,0.07); }
  .aa-header nav[data-nav] a[style*="border"] { justify-content: center; min-height: 52px; margin-top: 16px; border: 1px solid rgba(43,78,204,0.5) !important; }

  section { padding-left: 20px !important; padding-right: 20px !important; }
  section { padding-top: 58px !important; padding-bottom: 58px !important; }
  footer { padding: 32px 20px !important; flex-direction: column !important; align-items: flex-start !important; gap: 18px !important; }
  section[data-flush="1"] { padding-top: 0 !important; }
  [data-wa-fab] { display: flex !important; }
  [data-price-badge] { display: none !important; }
}

/* ================= services ================= */
/* Mobile: the two column tier collapses to one left aligned column instead
   of a right hugging stack with a screen of dead space above it. */
@media (max-width: 760px) {
  [data-svc-tier] { padding: 34px 0 38px !important; }
  [data-svc-arrow] { display: none !important; }
  [data-svc-right] { flex-direction: row !important; align-items: baseline !important; flex-wrap: wrap !important; gap: 4px 12px !important; margin-left: 0 !important; margin-top: 20px !important; }
  [data-svc-right] > div { text-align: left !important; }
  /* Two pills per row on a fixed grid, so every step shares the same edges
     instead of wrapping to its own rhythm. */
  [data-svc-chips] { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 9px !important; margin-top: 24px !important; }
  [data-svc-chip] { white-space: normal !important; width: 100% !important; box-sizing: border-box !important; display: flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; padding: 11px 13px !important; font-size: 12px !important; line-height: 1.35 !important; }
}

/* ================= contact ================= */
input, textarea, select { font-family: 'IBM Plex Sans', system-ui, sans-serif; }
input:focus, textarea:focus, select:focus { outline: none; border-color: rgba(122,152,255,0.85) !important; box-shadow: 0 0 0 3px rgba(43,78,204,0.26), 0 0 26px rgba(43,78,204,0.32); }
.aa-field:focus-within > label { color: #7a98ff !important; }
input::placeholder, textarea::placeholder { color: #5f6a86; }
/* Last spend option runs the full width under the four paired ones. */
[data-spend-grid] > button:last-child { grid-column: 1 / -1; }
[data-spend-grid] > button:focus-visible { outline: 2px solid #7f9dff; outline-offset: 2px; }
.aa-err { font-size: 13px; line-height: 1.5; color: #ff8a8a; }
[aria-invalid="true"] { border-color: rgba(255,138,138,0.75) !important; }
.aa-mail:hover { color: #fff !important; border-bottom-color: #2b4ecc !important; }
/* spam trap for bots, never shown to people */
.aa-hp { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 760px) {
  form { padding: 30px 22px !important; }
}

/* ================= homepage ================= */
@media (max-width: 760px) {
  [data-seg-block] { display: none !important; }
  [data-client-card] { border-left: none !important; border-top: 1px solid rgba(232,236,247,0.07) !important; }
  [data-hero-pad] { padding-left: 22px !important; padding-right: 22px !important; }
  [data-hero-sub], [data-hero-alt] { display: none !important; }
  /* mobile hero CTA: outline pill, auto width, breathing room under the headline */
  [data-hero-cta] {
    background: transparent !important;
    border: 1px solid rgba(43,78,204,0.8) !important;
    border-radius: 999px !important;
    color: #ccd7ff !important;
    padding: 15px 26px !important;
    font-size: 11px !important;
    letter-spacing: 0.16em !important;
    box-shadow: 0 0 34px rgba(43,78,204,0.16) !important;
  }
  [data-hero-cta]:active {
    background: rgba(43,78,204,0.16) !important;
    border-color: #2b4ecc !important;
    color: #fff !important;
  }
  [data-hero-cta] { text-align: center; }
  [data-hero-cta-row] { margin-top: 44px !important; }
  [data-row] { cursor: pointer; }
  [data-acc-mark] { display: inline-block !important; }
  [data-acc-mark]::after { content: "+"; }
  [data-row][data-acc="1"] [data-acc-mark]::after { content: "\2212"; }
  [data-acc-body] { display: none !important; }
  [data-row][data-acc="1"] [data-acc-body] { display: block !important; }
  /* overflow-x:auto makes the block axis scrollable too, so a stray touch
     scrolled the cards inside the strip and swallowed the page scroll.
     Locking overflow-y and permitting both pan axes hands vertical gestures
     back to the page while horizontal swipes still move the strip. */
  [data-ladder] { display: flex !important; overflow-x: auto !important; overflow-y: hidden !important; touch-action: pan-x pan-y pinch-zoom; overscroll-behavior-x: contain; gap: 14px !important; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  [data-ladder]::-webkit-scrollbar { display: none; }
  [data-ladder] > [data-tier] { flex: 0 0 86% !important; scroll-snap-align: center; min-height: 0 !important; padding: 30px 24px 24px !important; }
  [data-ladder-line], [data-node] { display: none !important; }
  [data-dots] { display: flex !important; }
  [data-dot][data-active="1"] { background: #2b4ecc !important; transform: scale(1.4); box-shadow: 0 0 9px rgba(43,78,204,0.85); }

  section[data-stage] { padding: 0 !important; }
  [data-pin] { padding-top: 74px !important; padding-bottom: 64px !important; }
  [data-phase-h] { font-size: 22px !important; max-width: calc(var(--ring-open, 240px) * 0.86) !important; }
  [data-phase-sub] { font-size: 9.5px !important; letter-spacing: 0.12em !important; max-width: calc(var(--ring-open, 240px) * 0.82) !important; margin: 0 auto !important; }

  /* deployment cards: shorter, lighter */
  [data-tier-card] { min-height: 0 !important; padding: 24px 22px 20px !important; gap: 10px !important; }
  [data-tier-card] > div[style*="128px"] { font-size: 84px !important; top: -14px !important; }
  [data-tier-card] > div[style*="27px"] { font-size: 22px !important; }
}
/* Touch devices latch :hover after a tap, so the card's lift stuck and its
   top edge got clipped by the strip. No lift where there is no real hover. */
@media (hover: none) {
  [data-tier-card]:hover { transform: none !important; }
}