/* ============================================================================
   Homepage sections, ported from ~/Repos/website-refresh src/app/components.
   Loaded only on the homepage (via @@section Styles in Index.cshtml).
   Global, an- prefixed. One block per React component, in Home.tsx order.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   HERO  (Hero.tsx)
--------------------------------------------------------------------------- */
.an-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: radial-gradient(120% 90% at 40% 36%, #131313 30%, #0C0C0C 100%);
  padding-top: 128px;
  padding-bottom: 40px;
  overflow: hidden;
}

/* ---- THE POWER-ON (hero pick, dramatic cut, 2026-07-17) -------------------
   Base state below is LIT (line drawn, screen on): what reduced-motion and
   data-saver visitors see. The .is-poweron class (set on every homepage load
   by the inline gate in _HeroPartial) runs the sequence:
   0-0.7s dark stage + ignition stutters; 0.7-1.8s the charge shoots the
   wall (arc branch at the elbow); 1.85s impact (shockwave, screen jolt,
   one-frame room blink); 1.95-2.5s CRT bloom reveals the playing trailer
   while the type snaps on; stats bar last; 6s idle pulse forever. */
.an-hero__charge { position: absolute; inset: 0; z-index: 5; pointer-events: none; display: none; }
.an-hero__charge svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.an-hero__ghostline { stroke: rgba(196,73,80,0.32); stroke-width: 1.5; }
.an-hero__liveline { stroke: rgba(196,73,80,0.85); stroke-width: 1.5;
  filter: drop-shadow(0 0 6px rgba(196,73,80,0.55)); }
.an-hero__idlepulse { stroke: rgba(196,73,80,0.9); stroke-width: 1.5;
  stroke-dasharray: 4 96; stroke-dashoffset: 100; opacity: 0;
  animation: an-po-pulse 6s linear 4.6s infinite; }
.an-hero__branch, .an-hero__ignite, .an-hero__wave, .an-hero__sparkdot { opacity: 0; }
.an-hero__junction { fill: var(--an-red); opacity: 0.6; }
.an-hero__flash { position: absolute; inset: 0; z-index: 15; pointer-events: none;
  background: var(--an-red-light); opacity: 0; }

.an-hero__screen {
  position: relative;
  z-index: 10;
  margin: 48px auto 0;
  width: 100%;
  max-width: 560px;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(196,73,80,0.55);
  background: #000;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.06), 0 28px 110px -18px rgba(167,37,44,0.7), 0 0 90px -6px rgba(167,37,44,0.45);
  /* stacked (below 1280): copy, then screen, then credentials strip */
  order: 2;
}
.an-hero__crt { position: absolute; inset: 0; }
.an-hero__crt video { width: 100%; height: 100%; object-fit: cover; display: block; }
.an-hero__off { position: absolute; inset: 0; background: #000; z-index: 2; opacity: 0; }
.an-hero__scanline { position: absolute; left: 0; right: 0; top: 50%; height: 2px;
  background: rgba(255,255,255,0.98); opacity: 0; z-index: 3; transform-origin: center;
  box-shadow: 0 0 24px rgba(255,255,255,0.9); }

/* Sound toggle on the CRT screen. Sits above the off/scanline overlays. */
.an-hero__sound {
  position: absolute; bottom: 12px; right: 12px; z-index: 6;
  width: 40px; height: 40px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(13,13,13,0.55); border: 1px solid rgba(255,255,255,0.2);
  color: #fff; cursor: pointer;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: background 0.2s var(--an-ease), transform 0.2s var(--an-ease), border-color 0.2s var(--an-ease);
}
.an-hero__sound:hover { background: rgba(167,37,44,0.9); border-color: transparent; transform: translateY(-1px); }
.an-hero__sound:focus-visible { outline: 2px solid var(--an-red-light); outline-offset: 3px; }
.an-hero__sound svg { stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.an-hero__sound .an-hero__sound-on, .an-hero__sound .an-hero__sound-off { display: none; }
.an-hero__sound.is-muted .an-hero__sound-off { display: block; }
.an-hero__sound:not(.is-muted) .an-hero__sound-on { display: block; }
/* Gentle attention pulse while muted, so the "sound available" affordance reads. */
.an-hero__sound.is-muted::after {
  content: ""; position: absolute; inset: -1px; border-radius: 999px;
  border: 1px solid rgba(196,73,80,0.7); animation: an-hero-sound-pulse 2.4s ease-out infinite;
}
@keyframes an-hero-sound-pulse { 0% { transform: scale(1); opacity: 0.7; } 70%, 100% { transform: scale(1.5); opacity: 0; } }
/* During the power-on the screen is dark; fade the button in with the reveal. */
.an-hero.is-poweron .an-hero__sound { opacity: 0; animation: an-po-el 0.5s ease-out 2.4s forwards; }
@media (prefers-reduced-motion: reduce) { .an-hero__sound.is-muted::after { animation: none; opacity: 0; } }

/* Replay overlay. The whole CRT face is the button (big tap target); it sits
   above the off/scanline overlays but BELOW the sound toggle (z 6), so that
   toggle keeps taking its own clicks while the overlay is up. visibility (not
   display) keeps the fade and still pulls it out of the tab order when down. */
.an-hero__replay {
  position: absolute; inset: 0; z-index: 5;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  margin: 0; padding: 0; border: 0; font: inherit; color: #fff; cursor: pointer;
  background: rgba(0,0,0,0.55);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  opacity: 0; visibility: hidden;
  transition: opacity 0.35s var(--an-ease), visibility 0.35s var(--an-ease);
}
.an-hero__replay.is-visible { opacity: 1; visibility: visible; }
.an-hero__replay:focus-visible { outline: 2px solid var(--an-red-light); outline-offset: -4px; }
.an-hero__replay-ring {
  width: 64px; height: 64px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(167,37,44,0.92); border: 1px solid rgba(255,255,255,0.22);
  box-shadow: 0 12px 40px -10px rgba(167,37,44,0.9);
  transition: transform 0.2s var(--an-ease), background 0.2s var(--an-ease);
}
.an-hero__replay:hover .an-hero__replay-ring { background: var(--an-red); transform: scale(1.06); }
.an-hero__replay svg { stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.an-hero__replay-label {
  font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255,255,255,0.85);
}
@media (prefers-reduced-motion: reduce) {
  .an-hero__replay, .an-hero__replay-ring { transition: none; }
  .an-hero__replay:hover .an-hero__replay-ring { transform: none; }
}

/* the sequence (gated) */
.an-hero.is-poweron .an-hero__liveline { stroke-dasharray: 100; stroke-dashoffset: 100;
  animation: an-po-charge 1.1s cubic-bezier(0.6,0,0.2,1) 0.7s forwards; }
.an-hero.is-poweron .an-hero__sparkdot { fill: #E86A70;  /* brand-gate:allow incandescent spark; brighter than --an-red-light by design */
  filter: drop-shadow(0 0 10px rgba(232,106,112,0.9));
  /* offset-path is set on the element by an-home.js (the eyebrow-anchored
     route); this fallback matches the markup's fallback d. */
  offset-path: path("M 340 150 L 900 150 L 960 210 L 1084 210 L 1084 330");
  offset-rotate: 0deg;
  animation: an-po-spark 1.1s cubic-bezier(0.6,0,0.2,1) 0.7s forwards; }
.an-hero.is-poweron .an-hero__ignite { fill: #E86A70;  /* brand-gate:allow incandescent spark; brighter than --an-red-light by design */
  filter: drop-shadow(0 0 8px rgba(232,106,112,0.9));
  animation: an-po-stutter 0.7s steps(1) forwards; }
.an-hero.is-poweron .an-hero__branch { stroke: rgba(232,106,112,0.7); stroke-width: 1;
  stroke-dasharray: 130; stroke-dashoffset: 130;
  animation: an-po-arc 0.4s linear 1.45s forwards; }
.an-hero.is-poweron .an-hero__wave { stroke: rgba(232,106,112,0.8); stroke-width: 2;
  animation: an-po-wave 0.55s cubic-bezier(0.2,0.6,0.3,1) 1.82s forwards; }
.an-hero.is-poweron .an-hero__junction { opacity: 0;
  animation: an-po-in 0.25s 1.5s forwards; }
.an-hero.is-poweron .an-hero__flash { animation: an-po-flash 0.22s ease-out 1.84s; }
.an-hero.is-poweron .an-hero__screen { border-color: rgba(167,37,44,0.22); box-shadow: none;
  animation: an-po-ignite 0.5s steps(2, jump-none) 1.95s forwards; }
.an-hero.is-poweron .an-hero__crt { animation: an-po-jolt 0.28s linear 1.84s; }
.an-hero.is-poweron .an-hero__off { opacity: 1; animation: an-po-flick 0.6s steps(1) 1.95s forwards; }
.an-hero.is-poweron .an-hero__scanline { animation: an-po-scan 0.6s cubic-bezier(0.2,0.7,0.3,1) 1.95s; }
@keyframes an-po-charge { to { stroke-dashoffset: 0; } }
@keyframes an-po-spark { 0% { offset-distance: 0%; opacity: 1; } 94% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }
@keyframes an-po-stutter { 0% { opacity: 0; } 14% { opacity: 1; } 22% { opacity: 0; } 38% { opacity: 0.9; } 46% { opacity: 0; } 64% { opacity: 1; } 100% { opacity: 0; } }
@keyframes an-po-arc { 0% { opacity: 0.9; stroke-dashoffset: 130; } 55% { opacity: 0.7; stroke-dashoffset: 0; } 100% { opacity: 0; stroke-dashoffset: 0; } }
@keyframes an-po-wave { 0% { opacity: 0.9; r: 4; stroke-width: 2.5; } 100% { opacity: 0; r: 52; stroke-width: 0.5; } }
@keyframes an-po-pulse { 0% { opacity: 0; stroke-dashoffset: 100; } 6% { opacity: 0.8; } 46% { opacity: 0.8; } 54% { opacity: 0; stroke-dashoffset: 0; } 100% { opacity: 0; stroke-dashoffset: 0; } }
@keyframes an-po-in { to { opacity: 0.6; } }
@keyframes an-po-flash { 0% { opacity: 0; } 30% { opacity: 0.07; } 100% { opacity: 0; } }
@keyframes an-po-jolt { 0% { transform: none; } 25% { transform: translate(0,-3px); } 55% { transform: translate(0,2px); } 100% { transform: none; } }
@keyframes an-po-flick { 0% { opacity: 1; } 18% { opacity: 0.05; } 30% { opacity: 0.95; } 42% { opacity: 0; } 55% { opacity: 0.75; } 70% { opacity: 0.1; } 84% { opacity: 0.4; } 100% { opacity: 0; } }
@keyframes an-po-scan { 0% { opacity: 1; transform: scaleY(1); } 30% { opacity: 0.7; transform: scaleY(90); } 100% { opacity: 0; transform: scaleY(200); } }
@keyframes an-po-ignite { to { border-color: rgba(196,73,80,0.55);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.06), 0 28px 110px -18px rgba(167,37,44,0.7), 0 0 90px -6px rgba(167,37,44,0.45); } }

.an-hero__main {
  position: relative;
  z-index: 20;
  order: 1;
  flex: 1;
  display: flex;
  align-items: center;
  width: 100%;
  /* This full-bleed column paints above the docked video screen (z-index 10),
     so its empty right half would otherwise swallow clicks meant for the video's
     sound toggle. Let clicks fall through; the CTA links below re-enable. */
  pointer-events: none;
}
.an-hero__main a { pointer-events: auto; }
.an-hero__wrap {
  width: 100%;
  max-width: 1400px;
  margin-inline: auto;
  padding-inline: 24px;
}
.an-hero__grid { display: block; }
.an-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 32px;
}
.an-hero__eyebrow-rule { width: 40px; height: 1px; background: var(--an-red); }
.an-hero__eyebrow-text {
  color: var(--an-red);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
}
.an-hero__title {
  font-weight: 900;
  color: #fff;
  font-size: 10vw;
  line-height: 0.95;
  letter-spacing: -0.035em;
  text-transform: uppercase;
}
.an-hero__title em {
  color: var(--an-red-light);
  text-transform: none;
  font-style: normal;
  padding-right: 4px;
}
.an-hero__sub {
  margin-top: 32px;
  font-size: 18px;
  color: rgba(255,255,255,0.6);
  line-height: 1.6;
  max-width: 36rem;
}
.an-hero__ctas {
  margin-top: 40px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}
.an-hero__cta-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-weight: 600;
  font-size: 15px;
  transition: color .2s var(--an-ease);
}
.an-hero__cta-secondary:hover { color: var(--an-red); }
.an-hero__cta-secondary .an-hero__arrow-box {
  background: rgba(255,255,255,0.1);
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 6px;
  transition: background .2s var(--an-ease);
}
.an-hero__cta-secondary:hover .an-hero__arrow-box { background: var(--an-red); }

/* Hero stats */
.an-hero__stats {
  position: relative;
  z-index: 20;
  order: 3;
  border-top: 1px solid rgba(255,255,255,0.08);
  margin-top: 32px;
}
.an-hero__stats-wrap {
  width: 100%;
  max-width: 1400px;
  margin-inline: auto;
  padding: 32px 24px;
}
.an-hero__stats-head {
  font-weight: 800;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: rgba(255,255,255,0.75);
  margin-bottom: 28px;
}
.an-hero__stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 24px;
  row-gap: 32px;
}
.an-hero__stat-kind { font-weight: 700; font-size: 13px; margin-bottom: 8px; color: rgba(255,255,255,0.45); }
.an-hero__stat-kind.is-spec { color: var(--an-red-light); }
.an-hero__stat-name { font-weight: 700; color: #fff; font-size: 15px; line-height: 1.3; margin-bottom: 6px; }
.an-hero__stat-desc { font-size: 12px; color: rgba(255,255,255,0.45); line-height: 1.3; }

/* Hero entrance. Default (return visits): the quiet an-rise load-in.
   Under .is-poweron the type participates in the power-on instead:
   embers until impact, then it snaps on with the screen. */
.an-hero__eyebrow, .an-hero__title, .an-hero__sub, .an-hero__ctas {
  opacity: 0;
  animation: an-rise .9s var(--an-ease) forwards;
}
.an-hero__title { animation-delay: .05s; }
.an-hero__sub { animation-delay: .12s; }
.an-hero__ctas { animation-delay: .2s; }
.an-hero__stat { opacity: 0; animation: an-rise .6s var(--an-ease) forwards; }
.an-hero__stat:nth-child(1) { animation-delay: .9s; }
.an-hero__stat:nth-child(2) { animation-delay: 1.0s; }
.an-hero__stat:nth-child(3) { animation-delay: 1.1s; }
.an-hero__stat:nth-child(4) { animation-delay: 1.2s; }
.an-hero__stat:nth-child(5) { animation-delay: 1.3s; }
@keyframes an-rise { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }
.an-hero.is-poweron .an-hero__eyebrow { opacity: 0.45; animation: an-po-el 0.3s ease-out 1.95s forwards; }
.an-hero.is-poweron .an-hero__title { opacity: 0.3; filter: brightness(0.9) grayscale(0.6); transform: none;
  animation: an-po-type 0.22s steps(2, jump-none) 1.9s forwards; }
.an-hero.is-poweron .an-hero__sub { opacity: 0; transform: translateY(14px);
  animation: an-po-rise 0.5s cubic-bezier(0.16,1,0.3,1) 2.08s forwards; }
.an-hero.is-poweron .an-hero__ctas { opacity: 0; transform: translateY(14px);
  animation: an-po-rise 0.5s cubic-bezier(0.16,1,0.3,1) 2.22s forwards; }
.an-hero.is-poweron .an-hero__stats { opacity: 0; animation: an-po-el 0.6s ease-out 2.45s forwards; }
.an-hero.is-poweron .an-hero__stat:nth-child(1) { animation-delay: 2.5s; }
.an-hero.is-poweron .an-hero__stat:nth-child(2) { animation-delay: 2.6s; }
.an-hero.is-poweron .an-hero__stat:nth-child(3) { animation-delay: 2.7s; }
.an-hero.is-poweron .an-hero__stat:nth-child(4) { animation-delay: 2.8s; }
.an-hero.is-poweron .an-hero__stat:nth-child(5) { animation-delay: 2.9s; }
@keyframes an-po-type { 0% { opacity: 0.3; filter: brightness(0.9) grayscale(0.6); } 55% { opacity: 1; filter: brightness(1.25) grayscale(0); } 100% { opacity: 1; filter: brightness(1) grayscale(0); } }
@keyframes an-po-rise { to { opacity: 1; transform: none; } }
@keyframes an-po-el { to { opacity: 1; } }

@media (min-width: 640px) {
  .an-hero__stats-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 768px) {
  .an-hero__title { font-size: 8vw; }
}
@media (min-width: 1024px) {
  .an-hero__wrap, .an-hero__stats-wrap { padding-inline: 48px; }
  .an-hero__sub { font-size: 20px; }
  .an-hero__stats-grid { grid-template-columns: repeat(5, 1fr); }
  .an-hero__stats-head { font-size: 17.5px; }
  .an-hero__stat-name { font-size: 16px; }
  .an-hero__stats-wrap { padding-block: 36px; }
}
@media (min-width: 1280px) {
  /* Docked-screen range: the title is sized fluidly so the longest line
     ("CLOUD THAT scales.") always ends left of the 640px screen with a gutter,
     across 1280 up to the ~1850 where the full 6.6rem clears on its own. Below
     that the fixed 5.5/6.6rem sizes overran the screen (headline ran under the
     video from ~1280-1750). Envelope derived from DM Sans weight-900 metrics
     vs the screen geometry (right:44px, width:640px); verified 1280-1920. */
  .an-hero__title { font-size: clamp(3.5rem, 8.55vw - 3.3rem, 6.6rem); }
  /* The screen leaves the flow and docks right; the charge line feeds it. */
  .an-hero__charge { display: block; }
  .an-hero__screen {
    position: absolute;
    right: 44px;
    top: 50%;
    transform: translateY(-52%);
    margin: 0;
    width: 640px;
    max-width: none;
    order: 0;
  }
}
@media (min-width: 1536px) {
  .an-hero__wrap, .an-hero__stats-wrap { max-width: 1560px; }
  /* .an-hero__title size now handled by the fluid clamp in the 1280 query,
     which caps at 6.6rem once the viewport is wide enough to clear the screen. */
}
@media (prefers-reduced-motion: reduce) {
  .an-hero__eyebrow, .an-hero__title, .an-hero__sub, .an-hero__ctas,
  .an-hero__stat { opacity: 1; animation: none; }
  .an-hero__idlepulse { animation: none; opacity: 0; }
}

/* ---------------------------------------------------------------------------
   LOGO CAROUSEL  (LogoCarousel.tsx)
--------------------------------------------------------------------------- */
.an-logos {
  position: relative;
  background: var(--an-paper);
  border-bottom: 1px solid var(--an-border-2);
  padding-block: 32px;
  overflow: hidden;
}
.an-logos__fade {
  position: absolute;
  top: 0; bottom: 0;
  width: 120px;
  z-index: 10;
  pointer-events: none;
}
.an-logos__fade--l { left: 0; background: linear-gradient(to right, var(--an-paper), transparent); }
.an-logos__fade--r { right: 0; background: linear-gradient(to left, var(--an-paper), transparent); }
.an-logos__label {
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--an-gray-4);
  margin-bottom: 24px;
}
.an-logos__track {
  display: flex;
  gap: 64px;
  align-items: center;
  width: max-content;
  animation: an-logos-scroll 30s linear infinite;
}
.an-logos__track img {
  height: 32px;
  flex-shrink: 0;
  object-fit: contain;
  transition: transform .3s var(--an-ease);
}
.an-logos__track img:hover { transform: scale(1.05); }
@keyframes an-logos-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-33.33%); }
}

/* ---------------------------------------------------------------------------
   ZIGZAG SERVICES  (ZigzagServices.tsx)  "What we do"
--------------------------------------------------------------------------- */
.an-zz { position: relative; overflow: hidden; }
.an-zz__header { background: #fff; }
.an-zz__header-inner {
  position: relative;
  max-width: 1300px;
  margin-inline: auto;
  padding: 80px 24px 24px;
}
.an-zz__header-grid { display: grid; gap: 40px; align-items: center; }
.an-zz__h2 {
  font-weight: 800;
  font-size: 36px;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--an-ink);
  margin-bottom: 16px;
  text-wrap: balance;
}
.an-zz__lead { font-size: 17px; color: var(--an-gray-3); line-height: 1.5; max-width: 560px; }
.an-zz__video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(26,26,26,0.1);
  box-shadow: 0 24px 55px -30px rgba(0,0,0,0.4);
  background: #000;
}
.an-zz__video video { width: 100%; height: 100%; object-fit: cover; }

.an-zz__row { position: relative; }
.an-zz__band {
  position: absolute;
  inset: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
}
.an-zz__row.is-white .an-zz__band { background: #fff; }
.an-zz__row.is-dark .an-zz__band { background: var(--an-dark); }
.an-zz__row.is-paper .an-zz__band { background: var(--an-paper); }
.an-zz__row-inner {
  position: relative;
  max-width: 1300px;
  margin-inline: auto;
  padding: 56px 24px;
}
.an-zz__grid { display: grid; gap: 32px; align-items: center; }
.an-zz__text { display: flex; gap: 20px; align-items: flex-start; }
.an-zz__num {
  font-weight: 900;
  font-size: 56px;
  line-height: 0.78;
  letter-spacing: -0.05em;
  flex-shrink: 0;
  user-select: none;
  color: var(--an-red);
  padding-top: 4px;
}
.an-zz__row.is-dark .an-zz__num { color: var(--an-red-light); }
.an-zz__chip {
  display: inline-block;
  font-weight: 800;
  font-size: 16px;
  letter-spacing: -0.01em;
  margin-bottom: 12px;
  color: var(--an-red);
}
.an-zz__row.is-dark .an-zz__chip { color: var(--an-red-light); }
.an-zz__title {
  font-weight: 800;
  font-size: 26px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
  color: var(--an-ink);
}
.an-zz__row.is-dark .an-zz__title { color: #fff; }
.an-zz__desc { font-size: 15px; line-height: 1.65; margin-bottom: 24px; max-width: 440px; color: var(--an-gray-3); }
.an-zz__row.is-dark .an-zz__desc { color: rgba(255,255,255,0.55); }
.an-zz__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; max-width: 450px; }
.an-zz__tag {
  font-family: var(--an-font-mono);
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 4px;
  background: rgba(26,26,26,0.04);
  border: 1px solid rgba(26,26,26,0.1);
  color: var(--an-gray-2);
}
.an-zz__row.is-dark .an-zz__tag {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.7);
}
.an-zz__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--an-red);
}
.an-zz__row.is-dark .an-zz__cta { color: var(--an-red-light); }
.an-zz__media { position: relative; }
.an-zz__media-halo {
  position: absolute;
  inset: -20px;
  background: rgba(167,37,44,0.1);
  filter: blur(45px);
  border-radius: 999px;
  pointer-events: none;
}
.an-zz__img-frame {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 24px 50px -28px rgba(0,0,0,0.5);
  border: 1px solid rgba(26,26,26,0.1);
}
.an-zz__row.is-dark .an-zz__img-frame { border-color: rgba(255,255,255,0.12); }
.an-zz__img-frame img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.2s ease-out;
}
.an-zz__img-frame:hover img { transform: scale(1.04); }

@media (min-width: 1024px) {
  .an-zz__header-inner { padding: 112px 48px 40px; }
  .an-zz__header-grid { grid-template-columns: 1fr minmax(0, 520px); gap: 56px; }
  .an-zz__h2 { font-size: 56px; }
  .an-zz__lead { font-size: 18px; }
  .an-zz__row-inner { padding: 80px 48px; }
  .an-zz__grid { grid-template-columns: 1fr 1fr; gap: 80px; }
  .an-zz__text { gap: 32px; }
  .an-zz__num { font-size: 120px; padding-top: 8px; }
  .an-zz__title { font-size: 34px; }
  .an-zz__desc { font-size: 16px; }
  /* Row alternation: graphic LEFT on rows 1 & 3, RIGHT on row 2. */
  .an-zz__row.is-reverse .an-zz__text { order: 2; flex-direction: row-reverse; }
  .an-zz__row.is-reverse .an-zz__media { order: 1; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .an-zz__h2 { font-size: 48px; }
}

/* ---------------------------------------------------------------------------
   PROBLEM / SOLUTION  (ProblemSolution.tsx)  "What we solve"
--------------------------------------------------------------------------- */
.an-ps {
  position: relative;
  background: var(--an-dark);
  color: #fff;
  padding: 96px 24px;
  overflow: hidden;
}
.an-ps__glow {
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 820px; height: 400px;
  background: rgba(167,37,44,0.08);
  filter: blur(130px);
  border-radius: 999px;
  pointer-events: none;
}
.an-ps__inner { max-width: 1300px; margin-inline: auto; position: relative; }
.an-ps__head { max-width: 760px; margin-bottom: 56px; }
.an-ps__h2 {
  font-weight: 800;
  font-size: 40px;
  line-height: 1.04;
  letter-spacing: -0.03em;
  margin-bottom: 20px;
}
.an-ps__sub { font-size: 18px; color: rgba(255,255,255,0.55); line-height: 1.5; max-width: 600px; }
.an-ps__grid { display: grid; gap: 32px; align-items: stretch; }

.an-ps__selector { display: flex; flex-direction: column; justify-content: center; height: 500px; overflow: hidden; }
.an-ps__item {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 20px 0;
}
.an-ps__selector .an-ps__item:last-child { border-bottom: 1px solid rgba(255,255,255,0.08); }
.an-ps__item-row { display: flex; align-items: baseline; gap: 16px; }
.an-ps__item-num {
  font-family: var(--an-font-mono);
  font-size: 13px;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.25);
  transition: color .3s var(--an-ease);
}
.an-ps__item-title {
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -0.02em;
  color: rgba(255,255,255,0.4);
  transition: color .3s var(--an-ease);
}
.an-ps__item:hover .an-ps__item-num { color: rgba(255,255,255,0.5); }
.an-ps__item:hover .an-ps__item-title { color: rgba(255,255,255,0.7); }
.an-ps__item.is-active .an-ps__item-num { color: var(--an-red-light); }
.an-ps__item.is-active .an-ps__item-title { color: #fff; }
.an-ps__item-detail {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height .4s var(--an-ease), opacity .4s var(--an-ease);
}
.an-ps__item.is-active .an-ps__item-detail { max-height: 240px; opacity: 1; }
.an-ps__detail-pad { padding: 16px 0 0 32px; max-width: 460px; }
.an-ps__problem-label { font-weight: 800; font-size: 15px; color: var(--an-red-light); margin-bottom: 10px; }
.an-ps__problem-text { font-size: 14px; color: rgba(255,255,255,0.5); line-height: 1.6; }
.an-ps__bar { margin-top: 20px; height: 2px; background: rgba(255,255,255,0.1); border-radius: 999px; overflow: hidden; }
.an-ps__bar-fill { height: 100%; width: 0; background: var(--an-red); }
.an-ps__item.is-active .an-ps__bar-fill { animation: an-ps-progress 7.2s linear forwards; }
@keyframes an-ps-progress { from { width: 0; } to { width: 100%; } }

.an-ps__panel {
  position: relative;
  height: 500px;
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,0.08);
  background: var(--an-terminal);
  overflow: hidden;
}
.an-ps__panel-glow {
  position: absolute; inset: 0;
  background: radial-gradient(circle at 70% 15%, rgba(167,37,44,0.16), transparent 60%);
}
.an-ps__ghost {
  position: absolute; right: 28px; bottom: 4px;
  font-weight: 900; font-size: 150px; line-height: 1;
  color: rgba(255,255,255,0.035);
  user-select: none; pointer-events: none;
}
.an-ps__panel-body { position: relative; height: 100%; padding: 32px; display: flex; flex-direction: column; }
.an-ps__panel-head { display: flex; align-items: center; gap: 8px; margin-bottom: 28px; }
.an-ps__dot { width: 6px; height: 6px; border-radius: 999px; background: var(--an-red-light); }
.an-ps__panel-head-text { font-weight: 800; font-size: 15px; color: rgba(255,255,255,0.7); }
.an-ps__lead {
  font-weight: 700;
  font-size: 22px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: #fff;
  max-width: 470px;
  min-height: 100px;
}
.an-ps__caret {
  display: inline-block;
  width: 3px; height: 0.82em;
  background: var(--an-red-light);
  margin-left: 4px;
  vertical-align: middle;
  border-radius: 999px;
  animation: an-ps-blink 0.9s linear infinite;
}
@keyframes an-ps-blink { 0%,45% { opacity: 1; } 55%,100% { opacity: 0; } }
.an-ps__steps { margin-top: auto; display: flex; flex-direction: column; }
.an-ps__step {
  display: flex; align-items: flex-start; gap: 16px;
  padding: 16px 0;
  border-top: 1px solid rgba(255,255,255,0.07);
  opacity: 0;
}
.an-ps__step.is-in { animation: an-ps-step-in .45s var(--an-ease) forwards; }
@keyframes an-ps-step-in { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
.an-ps__step-num { font-family: var(--an-font-mono); font-size: 12px; color: var(--an-red-light); letter-spacing: 0.1em; padding-top: 2px; flex-shrink: 0; }
.an-ps__step-text { font-size: 15px; color: rgba(255,255,255,0.85); line-height: 1.5; }

@media (min-width: 1024px) {
  .an-ps { padding: 128px 48px; }
  .an-ps__h2 { font-size: 60px; }
  .an-ps__sub { font-size: 19px; }
  .an-ps__grid { grid-template-columns: minmax(0,1fr) minmax(0,1.1fr); gap: 56px; }
  .an-ps__selector { height: 520px; }
  .an-ps__item-title { font-size: 22px; }
  .an-ps__panel { height: 520px; }
  .an-ps__panel-body { padding: 44px; }
  .an-ps__ghost { font-size: 190px; }
  .an-ps__lead { font-size: 27px; min-height: 136px; }
  .an-ps__step-text { font-size: 16px; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .an-ps__h2 { font-size: 52px; }
}
@media (prefers-reduced-motion: reduce) {
  .an-ps__item.is-active .an-ps__bar-fill { animation: none; width: 100%; }
  .an-ps__caret { display: none; }
  .an-ps__step { opacity: 1; animation: none; }
}

/* ---------------------------------------------------------------------------
   AI FRAMEWORK  (AIFramework.tsx)  path (light) + destination (dark)
--------------------------------------------------------------------------- */
.an-fw-path {
  background: var(--an-paper);
  border-top: 1px solid var(--an-border);
  border-bottom: 1px solid var(--an-border);
  padding: 96px 24px;
}
.an-fw-path__inner { max-width: 1300px; margin-inline: auto; }
.an-fw-path__head { max-width: 820px; }
.an-fw-path__h2 { font-weight: 800; font-size: 34px; line-height: 1.05; letter-spacing: -0.02em; color: var(--an-ink); }
.an-fw-path__lead { margin-top: 20px; font-size: 15.5px; color: var(--an-gray-3); line-height: 1.65; max-width: 640px; }
.an-fw-path__steps { position: relative; margin-top: 56px; }
.an-fw-path__connector { display: none; }
.an-fw-path__grid { display: grid; gap: 36px; }
.an-fw-node {
  width: 56px; height: 56px;
  border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 20px;
  position: relative; z-index: 1;
  background: var(--an-red); border: 2px solid var(--an-red); color: #fff;
}
.an-fw-step.is-foundation .an-fw-node { background: var(--an-paper); border-color: var(--an-ink); color: var(--an-ink); }
.an-fw-step__stage { font-weight: 800; font-size: 14px; color: var(--an-red); margin: 16px 0 6px; }
.an-fw-step__title { font-weight: 900; font-size: 19.5px; color: var(--an-ink); line-height: 1.3; letter-spacing: -0.025em; }
.an-fw-step__desc { margin-top: 8px; font-size: 13.5px; color: var(--an-gray-3); line-height: 1.6; }
.an-fw-step__link {
  display: inline-block; margin-top: 12px;
  font-size: 13.5px; font-weight: 800; color: var(--an-red);
  text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--an-red-light);
}
.an-fw-step__link:hover { color: var(--an-red-deep); }

.an-fw-dest {
  position: relative;
  background: var(--an-dark-3);
  padding: 80px 24px;
  overflow: hidden;
}
.an-fw-dest__glow {
  position: absolute; top: -96px; right: -96px;
  width: 520px; height: 520px; border-radius: 999px;
  background: rgba(167,37,44,0.16); filter: blur(130px); pointer-events: none;
}
.an-fw-dest__grid { position: relative; max-width: 1300px; margin-inline: auto; display: grid; }
.an-fw-dest__rail {
  padding-bottom: 40px;
  display: flex; flex-direction: column; justify-content: space-between;
  border-bottom: 1px solid rgba(255,255,255,0.09);
}
.an-fw-dest__rail-label { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; }
.an-fw-dest__rail-label span:first-child { height: 3px; width: 36px; border-radius: 999px; background: var(--an-red-light); }
.an-fw-dest__rail-label span:last-child { font-weight: 800; font-size: 15px; color: var(--an-red-light); line-height: 1; }
.an-fw-dest__h3 { font-weight: 800; font-size: 30px; line-height: 1.06; letter-spacing: -0.03em; color: #fff; }
.an-fw-dest__p { margin-top: 20px; font-size: 14.5px; color: rgba(255,255,255,0.55); line-height: 1.65; max-width: 340px; }
.an-fw-dest__cta { display: inline-flex; align-items: center; gap: 8px; margin-top: 40px; font-size: 14.5px; font-weight: 700; color: #fff; transition: color .2s var(--an-ease); }
.an-fw-dest__cta:hover { color: var(--an-red-light); }
.an-fw-dest__quads { display: grid; }
.an-fw-quad { position: relative; padding: 32px; transition: background .2s var(--an-ease); }
.an-fw-quad:hover { background: rgba(255,255,255,0.03); }
.an-fw-quad__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.an-fw-quad__icon {
  width: 44px; height: 44px; border-radius: 12px;
  background: rgba(167,37,44,0.14); border: 1px solid rgba(167,37,44,0.25);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  transition: background .2s var(--an-ease);
}
.an-fw-quad__icon svg { width: 19px; height: 19px; color: var(--an-red-light); transition: color .2s var(--an-ease); }
.an-fw-quad:hover .an-fw-quad__icon { background: var(--an-red); }
.an-fw-quad:hover .an-fw-quad__icon svg { color: #fff; }
.an-fw-quad__ghost { font-weight: 900; font-size: 34px; line-height: 1; letter-spacing: -0.04em; color: rgba(255,255,255,0.09); user-select: none; transition: color .2s var(--an-ease); }
.an-fw-quad:hover .an-fw-quad__ghost { color: rgba(196,73,80,0.3); }
.an-fw-quad__title { margin-top: 24px; font-weight: 800; font-size: 17px; color: #fff; line-height: 1.25; letter-spacing: -0.01em; }
.an-fw-quad__desc { margin-top: 10px; font-size: 13.5px; color: rgba(255,255,255,0.55); line-height: 1.6; }

@media (min-width: 640px) {
  .an-fw-dest__quads { grid-template-columns: 1fr 1fr; }
  .an-fw-quad.q0, .an-fw-quad.q2 { border-right: 1px solid rgba(255,255,255,0.09); }
  .an-fw-quad.q0, .an-fw-quad.q1 { border-bottom: 1px solid rgba(255,255,255,0.09); }
}
@media (min-width: 768px) {
  .an-fw-path__grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
  .an-fw-path { padding: 112px 48px; }
  .an-fw-path__h2 { font-size: 46px; }
  .an-fw-path__grid { grid-template-columns: repeat(4, 1fr); }
  .an-fw-path__connector {
    display: block; position: absolute;
    left: 28px; right: 10%; top: 28px; height: 2px;
    background: linear-gradient(to right, rgba(26,26,26,0.2), var(--an-red-light), var(--an-red));
  }
  .an-fw-dest { padding: 96px 48px; }
  .an-fw-dest__grid { grid-template-columns: 0.82fr 1.18fr; }
  .an-fw-dest__rail { padding-bottom: 0; padding-right: 48px; border-bottom: none; border-right: 1px solid rgba(255,255,255,0.09); }
  .an-fw-dest__h3 { font-size: 38px; }
  .an-fw-quad { padding: 40px; }
}

/* ---------------------------------------------------------------------------
   ENGAGEMENT TIMELINE  (EngagementTimeline.tsx)  "How we work"
--------------------------------------------------------------------------- */
.an-tl {
  background: var(--an-paper);
  border-top: 1px solid var(--an-border);
  border-bottom: 1px solid var(--an-border);
  padding: 96px 24px;
}
.an-tl__grid { max-width: 1300px; margin-inline: auto; display: grid; gap: 48px; }
.an-tl__intro-h2 { font-weight: 800; font-size: 34px; line-height: 1.05; letter-spacing: -0.02em; color: var(--an-ink); }
.an-tl__intro-p { margin-top: 20px; font-size: 15px; color: var(--an-gray-3); line-height: 1.6; }
.an-tl__intro-cta { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--an-border); }
.an-tl__rail { position: relative; }
.an-tl__spine { position: absolute; left: 34px; top: 40px; bottom: 48px; width: 2px; background: rgba(26,26,26,0.1); border-radius: 999px; }
.an-tl__fill { position: absolute; left: 34px; top: 40px; width: 2px; background: linear-gradient(to bottom, var(--an-red), var(--an-red-light)); border-radius: 999px; height: 0; }
.an-tl__dot {
  position: absolute; left: 34px; top: 40px;
  transform: translate(-50%, -50%);
  width: 12px; height: 12px; border-radius: 999px;
  background: var(--an-red); box-shadow: 0 0 12px 3px rgba(167,37,44,0.5);
  opacity: 0;
}
.an-tl__phase { position: relative; display: grid; grid-template-columns: 68px 1fr; gap: 20px; padding: 28px 0; align-items: start; }
.an-tl__num-wrap { position: relative; display: flex; justify-content: center; }
.an-tl__num {
  position: relative; z-index: 1;
  font-weight: 900; font-size: 44px; line-height: 1; letter-spacing: -0.04em;
  color: var(--an-red); background: var(--an-paper); padding: 8px 0;
}
.an-tl__dur { font-weight: 700; font-size: 13px; color: var(--an-gray-5); margin-bottom: 10px; }
.an-tl__phase-title { font-weight: 800; font-size: 24px; line-height: 1.1; letter-spacing: -0.02em; color: var(--an-ink); margin-bottom: 8px; }
.an-tl__phase-desc { font-size: 15px; color: var(--an-gray-3); line-height: 1.6; max-width: 520px; }

@media (min-width: 1024px) {
  .an-tl { padding: 112px 48px; }
  .an-tl__grid { grid-template-columns: 340px 1fr; gap: 80px; }
  .an-tl__intro { position: sticky; top: 128px; align-self: start; }
  .an-tl__intro-h2 { font-size: 44px; }
  .an-tl__spine, .an-tl__fill, .an-tl__dot { left: 50px; }
  .an-tl__phase { grid-template-columns: 100px 1fr; gap: 36px; padding: 36px 0; }
  .an-tl__num { font-size: 58px; }
  .an-tl__phase-title { font-size: 30px; }
}

/* ---------------------------------------------------------------------------
   SOLUTION OFFERINGS  (SolutionOfferings.tsx)
--------------------------------------------------------------------------- */
.an-so { background: var(--an-dark); padding: 96px 24px; }
.an-so__inner { max-width: 1300px; margin-inline: auto; }
.an-so__head { max-width: 760px; }
.an-so__h2 { font-weight: 800; font-size: 34px; line-height: 1.05; letter-spacing: -0.02em; color: #fff; }
.an-so__sub { margin-top: 20px; font-size: 15.5px; color: rgba(255,255,255,0.6); line-height: 1.65; max-width: 620px; }
.an-so__grid { display: grid; gap: 24px; margin-top: 48px; }
.an-so__card {
  display: block;
  background: linear-gradient(to bottom, var(--an-red), var(--an-red-card-end));
  border-radius: 16px;
  padding: 28px;
  box-shadow: 0 14px 36px rgba(167,37,44,0.3);
  transition: transform .3s var(--an-ease);
}
.an-so__card:hover { transform: translateY(-4px); }
.an-so__card-cat { font-weight: 700; font-size: 13px; color: var(--an-red-tint); }
.an-so__card-name { margin-top: 8px; font-weight: 800; font-size: 17px; color: #fff; line-height: 1.3; }
.an-so__card-tag { margin-top: 8px; font-size: 13px; color: var(--an-red-tint-2); line-height: 1.55; min-height: 42px; }
.an-so__card-meta { margin-top: 16px; font-weight: 800; font-size: 13.5px; letter-spacing: 0.01em; color: #fff; }
.an-so__card-link { margin-top: 16px; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.an-so__all {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 40px;
  border: 1px solid rgba(255,255,255,0.35); color: #fff; padding: 12px 24px;
  border-radius: 12px; font-size: 14px; font-weight: 600;
  transition: border-color .2s var(--an-ease);
}
.an-so__all:hover { border-color: #fff; }

@media (min-width: 768px) { .an-so__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) {
  .an-so { padding: 112px 48px; }
  .an-so__h2 { font-size: 46px; }
  .an-so__grid { grid-template-columns: repeat(4, 1fr); }
}

/* ---------------------------------------------------------------------------
   CASE ARCHETYPE  (CaseArchetype.tsx)  "Client stories"
--------------------------------------------------------------------------- */
.an-ca { background: var(--an-paper); padding: 80px 24px; overflow: hidden; }
.an-ca__inner { max-width: 1300px; margin-inline: auto; }
.an-ca__head { max-width: 760px; margin-bottom: 48px; }
.an-ca__h2 { font-weight: 800; font-size: 30px; line-height: 1.08; letter-spacing: -0.02em; color: var(--an-ink); }
.an-ca__grid { display: grid; gap: 20px; align-items: stretch; }
.an-ca__card {
  background: #fff; border: 1px solid var(--an-border); border-radius: 16px;
  padding: 28px; display: flex; flex-direction: column;
  transition: transform .3s var(--an-ease), box-shadow .3s var(--an-ease);
}
.an-ca__card:hover { transform: translateY(-4px); box-shadow: 0 18px 44px -26px rgba(26,27,25,0.3); }
.an-ca__card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.an-ca__mono {
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--an-dark-2); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 14px; letter-spacing: -0.02em; flex-shrink: 0;
}
.an-ca__quote-icon { color: rgba(167,37,44,0.3); }
.an-ca__quote { font-size: 15px; color: var(--an-gray-2); line-height: 1.7; flex: 1; }
.an-ca__foot { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--an-border); }
.an-ca__name { font-weight: 700; font-size: 14px; color: var(--an-ink); }
.an-ca__meta { font-weight: 500; font-size: 13px; color: var(--an-gray-5); margin-top: 6px; line-height: 1.6; }
.an-ca__see { margin-top: 48px; }
.an-ca__see a { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: var(--an-red); }

@media (min-width: 768px) {
  .an-ca__grid { grid-template-columns: repeat(3, 1fr); gap: 24px; }
}
@media (min-width: 1024px) {
  .an-ca { padding: 112px 48px; }
  .an-ca__h2 { font-size: 40px; }
  .an-ca__card { padding: 32px; }
}

/* ---------------------------------------------------------------------------
   APPROACH  (Approach.tsx)  "A partner, not a vendor."
--------------------------------------------------------------------------- */
.an-ap { background: var(--an-dark-2); color: #fff; padding: 96px 24px; overflow: hidden; }
.an-ap__inner { max-width: 1300px; margin-inline: auto; }
.an-ap__head { display: grid; gap: 32px; align-items: end; margin-bottom: 64px; }
.an-ap__h2 { font-weight: 800; font-size: 40px; line-height: 1.0; letter-spacing: -0.03em; color: #fff; }
.an-ap__triad { margin-top: 28px; font-weight: 700; font-size: 15px; color: rgba(255,255,255,0.55); }
.an-ap__intro { font-size: 15px; color: var(--an-gray-7); line-height: 1.7; }
.an-ap__intro p + p { margin-top: 12px; }
.an-ap__grid { display: grid; gap: 40px 48px; border-top: 1px solid var(--an-approach-border); padding-top: 48px; }
.an-ap__item { display: flex; gap: 20px; }
.an-ap__num { font-weight: 800; font-size: 24px; line-height: 1; color: var(--an-red-light); flex-shrink: 0; width: 36px; padding-top: 2px; }
.an-ap__item-h { font-weight: 700; font-size: 18px; color: #fff; margin-bottom: 8px; line-height: 1.3; }
.an-ap__item-p { font-size: 14px; color: var(--an-gray-6); line-height: 1.65; }
@media (min-width: 640px) { .an-ap__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) {
  .an-ap { padding: 128px 48px; }
  .an-ap__head { grid-template-columns: 1fr 1fr; gap: 80px; margin-bottom: 80px; }
  .an-ap__h2 { font-size: 64px; }
  .an-ap__triad { font-size: 16.5px; }
  .an-ap__intro { font-size: 16px; }
  .an-ap__grid { gap: 56px 48px; padding-top: 64px; }
  .an-ap__item-h { font-size: 19px; }
  .an-ap__item-p { font-size: 15px; }
}

/* ---------------------------------------------------------------------------
   REXQL  (RexQLSection.tsx)  "Meet Rex."
--------------------------------------------------------------------------- */
.an-rx { position: relative; padding: 64px 24px; background: var(--an-paper); overflow: hidden; }
.an-rx__glow { position: absolute; top: 0; right: 0; width: 600px; height: 600px; background: radial-gradient(circle, rgba(167,37,44,0.07), transparent 60%); filter: blur(40px); pointer-events: none; }
.an-rx__inner { max-width: 1300px; margin-inline: auto; position: relative; z-index: 10; }
.an-rx__top { display: grid; gap: 40px; align-items: center; }
.an-rx__h2 { font-weight: 800; font-size: 32px; line-height: 1.06; letter-spacing: -0.03em; color: var(--an-ink); margin-bottom: 20px; }
.an-rx__p { font-size: 16px; color: var(--an-gray-3); line-height: 1.65; max-width: 480px; margin-bottom: 32px; }
.an-rx__media { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 24px; overflow: hidden; border: 1px solid rgba(26,26,26,0.08); box-shadow: 0 30px 70px -34px rgba(0,0,0,0.35); }
.an-rx__media img { width: 100%; height: 100%; object-fit: cover; }
.an-rx__features { margin-top: 48px; padding-top: 40px; border-top: 1px solid rgba(26,26,26,0.1); display: grid; gap: 32px; }
.an-rx__feat { display: flex; align-items: flex-start; gap: 14px; }
.an-rx__feat-icon { width: 40px; height: 40px; border-radius: 8px; background: rgba(167,37,44,0.1); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.an-rx__feat-icon svg { width: 20px; height: 20px; color: var(--an-red); }
.an-rx__feat-h { font-weight: 700; font-size: 15px; color: var(--an-ink); margin-bottom: 4px; }
.an-rx__feat-p { font-size: 13.5px; color: var(--an-gray-3); line-height: 1.55; }
@media (min-width: 640px) { .an-rx__features { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) {
  .an-rx { padding: 96px 48px; }
  .an-rx__top { grid-template-columns: 1fr 1.15fr; gap: 64px; }
  .an-rx__h2 { font-size: 48px; }
  .an-rx__p { font-size: 17px; }
}

/* ---------------------------------------------------------------------------
   FAQ  (FAQ.tsx)
--------------------------------------------------------------------------- */
.an-faq { padding: 64px 24px; background: var(--an-dark); border-top: 1px solid rgba(255,255,255,0.06); }
.an-faq__inner { max-width: 1100px; margin-inline: auto; }
.an-faq__head { margin-bottom: 40px; text-align: center; max-width: 42rem; margin-inline: auto; }
/* FAQ head now uses the shared .an-section-label.is-dark.is-center (the one-off eyebrow is retired). */
.an-faq__head .an-section-label { justify-content: center; margin-bottom: 16px; }
.an-faq__h3 { font-size: 30px; font-weight: 700; color: #fff; margin-bottom: 16px; line-height: 1.08; letter-spacing: -0.02em; }
.an-faq__sub { font-size: 18px; color: rgba(255,255,255,0.55); line-height: 1.7; max-width: 560px; margin-inline: auto; }
.an-faq__grid { display: grid; gap: 16px; }
.an-faq__item {
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.03);
  border-radius: 16px; padding: 24px; cursor: pointer;
  transition: border-color .3s var(--an-ease), background .3s var(--an-ease);
}
.an-faq__item:hover { border-color: rgba(255,255,255,0.2); }
.an-faq__item.is-open { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.14); }
.an-faq__q-row {
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  /* Real button (keyboard-operable accordion): reset chrome, inherit type. */
  width: 100%; background: none; border: 0; padding: 0;
  font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.an-faq__q-row:focus-visible { outline: 2px solid var(--an-red-light); outline-offset: 4px; border-radius: 8px; }
.an-faq__q { font-size: 18px; font-weight: 600; color: #fff; line-height: 1.4; }
.an-faq__toggle {
  width: 40px; height: 40px; border-radius: 999px; flex-shrink: 0;
  border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.05); color: #fff;
  display: flex; align-items: center; justify-content: center;
  transition: transform .5s var(--an-ease), background .5s var(--an-ease), border-color .5s var(--an-ease);
}
.an-faq__item.is-open .an-faq__toggle { transform: rotate(45deg); background: var(--an-red); border-color: transparent; }
.an-faq__a-wrap { overflow: hidden; max-height: 0; transition: max-height .4s var(--an-ease); }
.an-faq__item.is-open .an-faq__a-wrap { max-height: 320px; }
.an-faq__a { font-size: 16px; color: rgba(255,255,255,0.6); line-height: 1.7; padding-top: 20px; }
@media (min-width: 1024px) {
  .an-faq { padding: 80px 48px; }
  .an-faq__h3 { font-size: 42px; }
  .an-faq__grid { grid-template-columns: 1fr 1fr; gap: 20px; }
  .an-faq__item { padding: 28px; }
}

/* ---------------------------------------------------------------------------
   CTA  (CTA.tsx)  "Start with one free hour."
--------------------------------------------------------------------------- */
.an-cta { position: relative; padding: 64px 24px; text-align: center; overflow: hidden; background: var(--an-red); }
.an-cta__light { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 60% 70% at 50% 25%, rgba(255,255,255,0.12), transparent 70%); }
.an-cta__dark { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to bottom, transparent, transparent, var(--an-red-deep)); }
.an-cta__inner { position: relative; z-index: 10; max-width: 680px; margin-inline: auto; }
.an-cta__h2 { font-size: 30px; font-weight: 700; color: #fff; margin-bottom: 20px; line-height: 1.06; letter-spacing: -0.02em; }
.an-cta__h2 em { color: rgba(255,255,255,0.95); font-style: normal; }
.an-cta__p { font-size: 17px; color: rgba(255,255,255,0.8); line-height: 1.65; margin-bottom: 32px; max-width: 500px; margin-inline: auto; }
.an-cta__btn {
  display: inline-flex; align-items: center; gap: 10px;
  background: #fff; color: var(--an-red);
  padding: 16px 32px; border-radius: 12px; font-size: 16px; font-weight: 600;
  transition: transform .3s var(--an-ease), box-shadow .3s var(--an-ease);
}
.an-cta__btn:hover { transform: translateY(-4px); box-shadow: 0 16px 44px rgba(0,0,0,0.3); }
.an-cta__badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-top: 32px; }
.an-cta__badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.2);
  border-radius: 8px; padding: 10px 16px; font-size: 13px; color: rgba(255,255,255,0.85); font-weight: 500;
}
.an-cta__badge svg { width: 16px; height: 16px; color: #fff; }
@media (min-width: 768px) { .an-cta__h2 { font-size: 40px; } }
@media (min-width: 1024px) { .an-cta { padding: 80px 48px; } .an-cta__h2 { font-size: 44px; } }

/* Mobile tap targets (audit SW-05): quiet text links measure ~22px tall at
   375; padding grows the hit area without changing the visual weight. */
@media (max-width: 767px) {
  .an-hero__cta-secondary, .an-zz__cta, .an-fw-step__link, .an-fw-dest__cta { padding-block: 10px; }
}

@media (max-width: 767px) {
  .an-ca__see a { display: inline-flex; padding-block: 10px; }
}

/* ===========================================================================
   MOBILE UX PASS (2026-07-18). All rules mobile-breakpoint-gated; desktop
   (>=1024 / >=768 overrides above) is untouched.
=========================================================================== */

/* HOME-M01: What We Solve panel, kill the fixed 500px heights below desktop so
   the lead can't collide with the bottom-pinned steps (text-on-text at 360),
   and drop the selector's centered dead band. The 2-col grid only exists at
   >=1024, so <=1023 is exactly the stacked range. */
@media (max-width: 1023px) {
  .an-ps__selector { height: auto; }
  .an-ps__panel { height: auto; }
  .an-ps__panel-body { height: auto; }
  .an-ps__lead { min-height: 0; }
  .an-ps__steps { margin-top: 32px; }
}

@media (max-width: 767px) {
  /* HOME-M04: hero credential blurbs were 12px in ~150px columns. */
  .an-hero__stat-desc { font-size: 13.5px; line-height: 1.45; }

  /* HOME-M05: desktop-tuned support copy carried to the phone; lift multi-line
     reading copy to the 15px floor. */
  .an-ps__problem-text,
  .an-fw-step__desc,
  .an-fw-quad__desc,
  .an-fw-dest__p,
  .an-ap__item-p,
  .an-rx__feat-p { font-size: 15px; }
  .an-so__card-tag { font-size: 14px; min-height: 0; }

  /* HOME-M07: the 120px marquee fades ghosted 64% of a 375 viewport. */
  .an-logos__fade { width: 48px; }

  /* HOME-M08: give the CRT screen the same 24px gutter as every other block. */
  .an-hero__screen { width: calc(100% - 48px); }
}

/* ============================================================================
   Craig design edits 2026-07-23: LIVE BUILD TERMINAL for the Custom Software
   Development lane (lane 3), replacing lane-software.jpg. Markup branch is in
   Pages/Shared/Home/_ZigzagServicesPartial.cshtml; typer is in an-home.js.
   ============================================================================ */
/* ---- Home, lane 3: LIVE BUILD TERMINAL (replaces lane-software.jpg) ---------
   Append to an-home.css. Chrome stays in the site's mono/ink register:
   slate dots (one red), mono path line, red block cursor. */
.an-zz-term {
  width: 100%;
  max-width: 620px;
  background: var(--an-terminal);
  border: 1px solid rgba(26,26,26,0.9);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 30px 70px -30px rgba(0,0,0,0.5);
}
.an-zz-term__bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.09);
}
.an-zz-term__dots { display: flex; gap: 6px; }
.an-zz-term__dots > span {
  width: 10px; height: 10px; border-radius: 999px;
  background: rgba(255,255,255,0.18);
}
.an-zz-term__dots > .is-red { background: var(--an-red); }
.an-zz-term__path {
  font-family: var(--an-font-mono);
  font-size: 10.5px; letter-spacing: 0.12em;
  color: rgba(255,255,255,0.45);
}
.an-zz-term__body {
  padding: 22px 24px 18px;
  min-height: 318px;
  font-family: var(--an-font-mono);
  font-size: 13px;
  line-height: 2.0;
  letter-spacing: 0.01em;
  overflow: hidden;
}
.an-zz-term__line { white-space: pre; min-height: 26px; }
.an-zz-term__line .is-kw  { color: var(--an-red-light); }
.an-zz-term__line .is-id  { color: rgba(255,255,255,0.85); }
.an-zz-term__line .is-dim { color: rgba(255,255,255,0.45); }
.an-zz-term__line .is-str { color: #e0a458; }  /* brand-gate:allow code-editor syntax highlighting, depicts a terminal not brand chrome */
.an-zz-term__line .is-cm  { color: rgba(255,255,255,0.3); font-style: italic; }
.an-zz-term__cursor {
  display: inline-block;
  width: 8px; height: 17px;
  margin-left: 1px;
  vertical-align: text-bottom;
  background: var(--an-red-light);
}
.an-zz-term__cursor.is-blink { animation: an-zz-term-blink 1s steps(2) infinite; }
@keyframes an-zz-term-blink { 50% { opacity: 0; } }
.an-zz-term__foot {
  padding: 11px 18px;
  border-top: 1px solid rgba(255,255,255,0.09);
}
.an-zz-term__status {
  font-family: var(--an-font-mono);
  font-size: 10.5px; letter-spacing: 0.14em;
  color: rgba(255,255,255,0.45);
}
.an-zz-term__status.is-done { color: var(--an-red-light); }

@media (max-width: 767px) {
  .an-zz-term__body { font-size: min(11px, 2.8vw); padding: 18px 16px 14px; min-height: 0; }
  .an-zz-term__line { min-height: 22px; }
  .an-zz-term__cursor { height: 14px; width: 7px; }
}
@media (prefers-reduced-motion: reduce) {
  .an-zz-term__cursor.is-blink { animation: none; }
}

/* Phone overflow fix (found via a 390 probe; control-tested against live
   staging, which does not overflow). .an-zz-term__line uses white-space:pre,
   so its min-content width is the longest code line; the lane media column is
   a grid item with default min-width:auto, so on phones the whole lane row
   grew past the viewport and an-zz's overflow:hidden clipped lane 3's text.
   Let the column shrink and the code scroll inside the terminal instead. */
@media (max-width: 767px) {
  .an-zz__media, .an-zz-term { min-width: 0; }
  .an-zz-term__body { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ==============================================================
   Lane 1 — AI Integration modality hub (replaces lane-ai.jpg).
   One AI core, six delivery-surface spokes; a red pulse travels
   out each spoke and lights its node in turn. Same frame chrome
   as .an-zz__img-frame (16/10, 16px radius). Pure CSS; scales
   with the viewBox. Under reduced motion the pulses drop and
   every node stays lit so the diagram reads statically.
   ============================================================== */
.an-zz-hub {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(26,26,26,0.1);
  box-shadow: 0 24px 50px -28px rgba(0,0,0,0.5);
  background: radial-gradient(120% 120% at 50% 44%, #ffffff 0%, #fbfbf9 58%, #f3f3f0 100%);
}
.an-zz-hub svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.an-zz-hub__spoke { stroke: var(--an-border-2); stroke-width: 1.5; }

.an-zz-hub__flow {
  stroke: var(--an-red); stroke-width: 2.5; stroke-linecap: round;
  stroke-dasharray: 9 91; stroke-dashoffset: 100;
  animation: an-zz-hub-flow 3.6s linear infinite;
}
@keyframes an-zz-hub-flow { to { stroke-dashoffset: 0; } }

.an-zz-hub__dot { fill: #fff; stroke: var(--an-border-2); stroke-width: 1.5; }
.an-zz-hub__lit {
  fill: var(--an-red);
  transform-box: fill-box; transform-origin: center;
  animation: an-zz-hub-lit 3.6s ease-in-out infinite;
}
@keyframes an-zz-hub-lit {
  0%, 76% { opacity: 0.22; transform: scale(0.7); }
  90%     { opacity: 1;    transform: scale(1.28); }
  100%    { opacity: 0.22; transform: scale(0.7); }
}

.an-zz-hub__core { fill: var(--an-red); }
.an-zz-hub__ring {
  fill: none; stroke: var(--an-red); stroke-width: 1.5;
  transform-box: fill-box; transform-origin: center;
  animation: an-zz-hub-ring 3.6s ease-out infinite;
}
@keyframes an-zz-hub-ring {
  0%   { opacity: 0.5; transform: scale(0.55); }
  70%  { opacity: 0;   transform: scale(2); }
  100% { opacity: 0;   transform: scale(2); }
}

.an-zz-hub__label {
  font-family: var(--an-font-mono);
  font-size: 11px; letter-spacing: 0.08em;
  fill: var(--an-gray-4);
}
.an-zz-hub__core-t {
  font-family: var(--an-font-mono);
  font-size: 12px; letter-spacing: 0.14em;
  fill: #fff;
}

/* SVG text scales down with the viewBox on narrow columns — enlarge
   in viewBox units so labels stay legible when the frame is phone-width. */
@media (max-width: 1023px) {
  .an-zz-hub__label  { font-size: 15px; }
  .an-zz-hub__core-t { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .an-zz-hub__flow { display: none; }
  .an-zz-hub__lit  { animation: none; opacity: 1; transform: scale(1.1); }
  .an-zz-hub__ring { animation: none; opacity: 0.3; transform: scale(1.15); }
}