#ao-soc-hero, #ao-soc-hero * { box-sizing: border-box; }
#ao-soc-hero {
  position: relative !important;
  /* Full-bleed comes from the block's own alignfull support, not a 100vw
     margin hack. 100vw includes the scrollbar gutter, which produced a
     horizontal scrollbar that then widened the element further. Deliberately
     sets no width or horizontal margin, so the theme's .alignfull rules win.
     Vertical margin is zeroed so the page background can't show as a seam
     against the section below. */
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  background: #0B1643;
  overflow: hidden;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;
  -webkit-font-smoothing: antialiased;
  isolation: isolate;
}
#ao-soc-hero a { -webkit-text-decoration: none; text-decoration: none; }
/* ---- atmosphere ---- */
#ao-soc-hero .aoh-glow { position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none; overflow: hidden; z-index: 0; }
#ao-soc-hero .aoh-glow i { position: absolute; display: block; border-radius: 50%; }
#ao-soc-hero .aoh-glow i:nth-child(1) { left: 34%; top: -38%; width: 86%; height: 180%; background: radial-gradient(closest-side, rgba(0,55,133,.40), rgba(0,55,133,0) 72%); }
#ao-soc-hero .aoh-glow i:nth-child(2) { left: -33%; top: -46%; width: 170%; height: 190%; background: radial-gradient(closest-side, rgba(0,199,243,.10), rgba(0,199,243,0) 70%); mix-blend-mode: screen; }
#ao-soc-hero .aoh-glow i:nth-child(3) { left: -6%; top: -30%; width: 118%; height: 250%; background: radial-gradient(closest-side, rgba(255,255,255,.05), rgba(255,255,255,0) 68%); mix-blend-mode: soft-light; }
/* !important on sizing here: many WP themes ship a blanket
   "canvas, img, svg, video { max-width:100% !important; height:auto !important }"
   responsive-media reset that would otherwise silently override these
   and distort/mis-position the animations. */
#ao-soc-hero canvas.aoh-grid { position: absolute !important; top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; z-index: 0; opacity: .62; mix-blend-mode: screen; pointer-events: none; }
#ao-soc-hero canvas.aoh-field { position: absolute !important; right: -56px !important; top: -52px !important; width: 760px !important; height: 760px !important; max-width: none !important; max-height: none !important; z-index: 1; pointer-events: none; mix-blend-mode: screen; -webkit-mask-image: radial-gradient(closest-side, #000 0%, #000 52%, rgba(0,0,0,.45) 78%, transparent 96%); mask-image: radial-gradient(closest-side, #000 0%, #000 52%, rgba(0,0,0,.45) 78%, transparent 96%); }
/* The grid dots and sphere glow (both mix-blend-mode:screen) brighten
   the navy right up to the container's bottom edge, then cut off
   abruptly against a plain #0B1643 section below — reads as a hard
   seam even though the base colors match exactly. Fade them out
   before the edge so the transition is smooth. Sits above the
   atmosphere layers (z 0/1) but below the content (.aoh-inner, z 2)
   so it never dims the copy or panels. */
#ao-soc-hero .aoh-bottom-fade { position: absolute; left: 0; right: 0; bottom: 0; height: 220px; z-index: 1; pointer-events: none; background: linear-gradient(to bottom, rgba(11,22,67,0) 0%, #0B1643 82%); }
/* Same treatment mirrored at the top edge, so the grid and sphere fade
   into the section above instead of cutting off hard. Shorter than the
   bottom fade because the sphere sits high on the right and a tall top
   fade eats into it. */
#ao-soc-hero .aoh-top-fade { position: absolute; left: 0; right: 0; top: 0; height: 160px; z-index: 1; pointer-events: none; background: linear-gradient(to top, rgba(11,22,67,0) 0%, #0B1643 82%); }
/* ---- layout ---- */
#ao-soc-hero .aoh-inner {
  position: relative; z-index: 2;
  display: flex; flex-direction: row; align-items: center;
  gap: 104px; min-height: 648px;
  padding: 0 80px;
  max-width: 1440px; margin: 0 auto;
}
#ao-soc-hero .aoh-copy { width: 584px; flex: 0 0 584px; color: #fff; position: relative; }
#ao-soc-hero .aoh-module { flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: center; }
#ao-soc-hero .aoh-stage { position: relative; width: 100%; display: flex; align-items: center; justify-content: center; height: 552px; }
/* ---- investigation panels ---- */
/* .aoh-comp is always visible (no opacity gate) so the finding card can
   show from the very start; each panel controls its own reveal below. */
#ao-soc-hero .aoh-comp { position: absolute; width: 756px; height: 552px; z-index: 3; transform: scale(.762); transform-origin: center center; pointer-events: none; }
#ao-soc-hero .aoh-panel { position: absolute; box-sizing: border-box; background: #fff; border: 1px solid #E5E7EB; border-radius: 8px; padding: 18px; display: flex; flex-direction: column; gap: 11px; opacity: 0; transform: translateY(10px); transition: opacity .56s cubic-bezier(.4,0,.2,1), transform .56s cubic-bezier(.4,0,.2,1); }
#ao-soc-hero.is-stage-4 .aoh-p1,
#ao-soc-hero.is-stage-7 .aoh-p2,
#ao-soc-hero.is-stage-12 .aoh-p3 { opacity: 1; transform: none; }
#ao-soc-hero .aoh-p1, #ao-soc-hero .aoh-finding { left: 52px; top: 0; width: 384px; padding-right: 60px; padding-bottom: 24px; z-index: 1; }
/* ---- initial finding card: same visual language as the panels below
   (white card, 1px border, 8px radius) so the sequence reads as one
   continuous UI progression rather than a separate loading mockup.
   Sits at the exact same position as .aoh-p1 and fades out right as
   .aoh-p1 fades in, so it reads as that card opening into full detail. */
#ao-soc-hero .aoh-finding { z-index: 4; padding: 18px; opacity: 1; transform: none; transition: opacity .5s cubic-bezier(.4,0,.2,1), transform .5s cubic-bezier(.4,0,.2,1); }
#ao-soc-hero.is-stage-4 .aoh-finding { opacity: 0; transform: scale(.97); pointer-events: none; }
#ao-soc-hero .aoh-finding-top { display: flex; align-items: center; gap: 8px; opacity: 0; transition: opacity .5s ease; }
#ao-soc-hero.is-stage-2 .aoh-finding-top { opacity: 1; }
#ao-soc-hero .aoh-finding-title { margin: 0; font-size: 15px; font-weight: 600; color: #08090A; line-height: 1.4; }
#ao-soc-hero .aoh-caret { display: inline-block; width: 2px; height: .92em; margin-left: 2px; vertical-align: -2px; background: #2953FA; animation: aoh-caret 900ms steps(1) infinite; }
#ao-soc-hero .aoh-sevpill { display: inline-flex; align-items: center; height: 29.4px; padding: 0 15px; border-radius: 100px; color: #fff; font-size: 13.5px; font-weight: 600; letter-spacing: -.16px; background: #EB0000; }
#ao-soc-hero .aoh-obs { font-size: 11px; color: #9CA3AF; letter-spacing: .1px; white-space: nowrap; margin-left: auto; }
#ao-soc-hero .aoh-thumb { display: block; width: 28px; height: 28px; border-radius: 8px; }
#ao-soc-hero .aoh-p2 { left: 376px; top: 80px; width: 380px; z-index: 2; box-shadow: -14px 10px 26px rgba(0,55,133,.16); }
#ao-soc-hero .aoh-p3 { left: 22px; top: 276px; width: 382px; z-index: 3; box-shadow: -10px -12px 28px rgba(0,55,133,.20), 12px 8px 22px rgba(0,55,133,.14); }
#ao-soc-hero .aoh-p1-h { font-size: 13px; font-weight: 600; color: #252A31; }
#ao-soc-hero .aoh-p1-row { display: flex; gap: 10px; align-items: flex-start; }
#ao-soc-hero .aoh-badge { display: inline-flex; padding: 4px 12px; border-radius: 100px; font-size: 12px; font-weight: 700; color: #fff; background: #EB0000; white-space: nowrap; opacity: 0; transition: opacity .4s ease; }
#ao-soc-hero.is-stage-5 .aoh-badge { opacity: 1; }
#ao-soc-hero .aoh-alert-title { flex: 1; font-size: 13.5px; font-weight: 600; color: #252A31; line-height: 1.35; opacity: 0; transform: translateY(4px); transition: opacity .4s ease .08s, transform .4s ease .08s; }
#ao-soc-hero.is-stage-5 .aoh-alert-title { opacity: 1; transform: none; }
#ao-soc-hero .aoh-tabs { display: flex; gap: 12px; align-items: center; border-bottom: 1px solid #E5E7EB; white-space: nowrap; }
#ao-soc-hero .aoh-tab { font-size: 12px; font-weight: 500; color: #6B7280; padding-bottom: 8px; flex: 0 0 auto; }
#ao-soc-hero .aoh-tab--active { font-weight: 600; color: #2468E8; border-bottom: 2px solid #2468E8; margin-bottom: -1px; }
#ao-soc-hero .aoh-logic { background: #F8FAFC; border: 1px solid #E5E7EB; border-radius: 6px; padding: 12px; display: flex; flex-direction: column; gap: 7px; }
#ao-soc-hero .aoh-logic-h { font-size: 11px; font-weight: 600; color: #6B7280; text-transform: uppercase; letter-spacing: .6px; }
#ao-soc-hero .aoh-logic-sub { font-size: 12px; color: #6B7280; line-height: 1.4; }
#ao-soc-hero .aoh-cond { font-size: 12.5px; color: #252A31; line-height: 1.5; opacity: 0; transform: translateY(4px); transition: opacity .4s ease, transform .4s ease; }
#ao-soc-hero.is-stage-6 .aoh-cond--a { opacity: 1; transform: none; }
#ao-soc-hero.is-stage-7 .aoh-cond--b { opacity: 1; transform: none; }
#ao-soc-hero .aoh-cond b { color: #EB0000; font-weight: 600; }
#ao-soc-hero .aoh-cond-more { font-size: 11.5px; color: #6B7280; line-height: 1.5; opacity: 0; transition: opacity .4s ease; }
#ao-soc-hero.is-stage-8 .aoh-cond-more { opacity: 1; }
#ao-soc-hero .aoh-p2-h { display: flex; gap: 8px; align-items: baseline; }
#ao-soc-hero .aoh-p2-h b { font-size: 12px; font-weight: 600; color: #252A31; }
#ao-soc-hero .aoh-p2-h span { font-size: 12px; color: #667085; }
#ao-soc-hero .aoh-metrics-wrap { max-height: 0; overflow: hidden; transition: max-height .7s cubic-bezier(.4,0,.2,1); }
#ao-soc-hero.is-stage-10 .aoh-metrics-wrap { max-height: 96px; }
#ao-soc-hero .aoh-metrics { display: flex; align-items: stretch; gap: 12px; border-bottom: 1px solid #E5E7EB; padding-bottom: 12px; }
#ao-soc-hero .aoh-metric { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 3px; opacity: 0; transform: translateY(4px); transition: opacity .42s cubic-bezier(.4,0,.2,1), transform .42s cubic-bezier(.4,0,.2,1); }
#ao-soc-hero.is-stage-10 .aoh-metric { opacity: 1; transform: none; }
#ao-soc-hero .aoh-metric strong { font-size: 13px; line-height: 16px; font-weight: 600; color: #252A31; display: block; }
#ao-soc-hero .aoh-metric small { font-size: 11px; line-height: 14px; color: #667085; display: block; }
#ao-soc-hero .aoh-metric-div { width: 1px; background: #E5E7EB; flex: 0 0 1px; }
#ao-soc-hero .aoh-map-wrap { max-height: 0; overflow: hidden; transition: max-height .7s cubic-bezier(.4,0,.2,1); }
#ao-soc-hero.is-stage-8 .aoh-map-wrap { max-height: 260px; }
#ao-soc-hero .aoh-map { position: relative; border: 1px solid #E5E7EB; border-radius: 6px; height: 248px; overflow: hidden; background: #FBFCFE; }
#ao-soc-hero .aoh-map svg { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; }
#ao-soc-hero .aoh-route { stroke-dashoffset: 110; opacity: 0; transition: stroke-dashoffset 1.6s cubic-bezier(.4,0,.2,1) .64s, opacity .12s linear .64s; }
#ao-soc-hero.is-stage-8 .aoh-route { stroke-dashoffset: 0; opacity: 1; }
#ao-soc-hero .aoh-dot { opacity: 0; transition: opacity .3s ease; }
#ao-soc-hero.is-stage-8 .aoh-dot--orig { opacity: 1; transition-delay: .2s; }
#ao-soc-hero.is-stage-8 .aoh-dot--dest { opacity: 1; transition-delay: 1.5s; }
#ao-soc-hero .aoh-ring { opacity: 0; transform-origin: 505px 116px; }
#ao-soc-hero.is-stage-8 .aoh-ring { animation: aoh-ring 2.4s ease-out 1.8s infinite; }
#ao-soc-hero .aoh-travel { opacity: 0; transition: opacity .4s ease 2.1s; }
#ao-soc-hero.is-stage-8 .aoh-travel { opacity: .9; }
#ao-soc-hero .aoh-tip { position: absolute; background: #fff; border: 1px solid #E5E7EB; border-radius: 6px; padding: 5px 8px; display: flex; align-items: center; gap: 6px; opacity: 0; transition: opacity .4s ease; }
#ao-soc-hero .aoh-tip i { width: 6px; height: 6px; border-radius: 50%; background: #2468E8; flex: 0 0 auto; }
#ao-soc-hero .aoh-tip span { font-size: 11px; font-weight: 600; color: #252A31; white-space: nowrap; }
#ao-soc-hero .aoh-tip b { font-size: 11px; color: #252A31; font-weight: 600; white-space: nowrap; }
#ao-soc-hero .aoh-tip--a { left: 14.5%; top: 34%; }
#ao-soc-hero .aoh-tip--b { right: calc(27.7% + 12px); bottom: calc(78.7% + 10px); transition-delay: 1.5s; }
#ao-soc-hero.is-stage-8 .aoh-tip--a { opacity: 1; transition-delay: .2s; }
#ao-soc-hero.is-stage-8 .aoh-tip--b { opacity: 1; }
#ao-soc-hero .aoh-p3-label { font-size: 11px; font-weight: 600; color: #6B7280; text-transform: uppercase; letter-spacing: .7px; }
#ao-soc-hero .aoh-summary { font-size: 14.5px; color: #252A31; line-height: 1.45; margin: 4px 0 8px; }
#ao-soc-hero .aoh-steps { display: flex; flex-direction: column; gap: 11px; }
#ao-soc-hero .aoh-step { display: flex; gap: 10px; align-items: flex-start; opacity: 0; transform: translateX(-6px); transition: opacity .42s cubic-bezier(.4,0,.2,1), transform .42s cubic-bezier(.4,0,.2,1); }
#ao-soc-hero.is-stage-13 .aoh-step { opacity: 1; transform: none; }
#ao-soc-hero .aoh-step:nth-child(1) { transition-delay: 0ms; }
#ao-soc-hero .aoh-step:nth-child(2) { transition-delay: 260ms; }
#ao-soc-hero .aoh-step:nth-child(3) { transition-delay: 520ms; }
#ao-soc-hero .aoh-step-n { flex: 0 0 auto; width: 21px; height: 21px; border-radius: 50%; background: #EBF3FE; color: #2468E8; font-size: 11.5px; font-weight: 700; display: flex; align-items: center; justify-content: center; margin-top: 1px; }
#ao-soc-hero .aoh-step span { font-size: 14px; color: #252A31; line-height: 1.5; }
/* ---- SR-only description of the investigation ---- */
#ao-soc-hero .aoh-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@keyframes aoh-caret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes aoh-ring { 0% { opacity: .7; transform: scale(1); } 70% { opacity: 0; transform: scale(3.2); } 100% { opacity: 0; transform: scale(3.2); } }
/* ---- responsive ---- */
@media (max-width: 1179px) {
  #ao-soc-hero .aoh-inner { gap: 80px; padding: 0 56px; }
  #ao-soc-hero .aoh-copy { width: 460px; flex-basis: 460px; }
  #ao-soc-hero .aoh-comp { transform: scale(.70); }
}
@media (max-width: 1023px) {
  #ao-soc-hero .aoh-inner { flex-direction: column; align-items: stretch; min-height: 0; gap: 40px; padding: 72px 48px 64px; }
  #ao-soc-hero .aoh-copy { width: 100%; max-width: 620px; flex-basis: auto; }
  /* .aoh-stage height and .aoh-comp scale are set by JS at this
     breakpoint (sizeComp) so the panels hold a true 80vw width across
     the whole range instead of a fixed scale tuned for one width. */
  /* Stacked layout: the sphere is no longer beside the module, it's
     behind it, so re-anchor it centered under the copy block instead
     of top-right. */
  #ao-soc-hero canvas.aoh-field { width: 640px !important; height: 640px !important; left: 50% !important; right: auto !important; top: 380px !important; transform: translateX(-50%) !important; }
}
@media (max-width: 767px) {
  #ao-soc-hero .aoh-inner { padding: 56px 24px 48px; gap: 32px; }
  #ao-soc-hero canvas.aoh-field { width: 460px !important; height: 460px !important; top: 200px !important; }
}
@media (prefers-reduced-motion: reduce) {
  #ao-soc-hero .aoh-ring { animation: none; }
}
/* ---- author content in the copy column ----
   :where() keeps specificity at zero so the native colour, typography and
   spacing controls in the editor always win over these defaults. */
#ao-soc-hero .aoh-copy :where(h1, h2, h3, h4, p, li) { color: #fff; }
#ao-soc-hero .aoh-copy :where(h1) { font-weight: 400; letter-spacing: -1px; line-height: 1.1; }
#ao-soc-hero .aoh-copy > *:first-child { margin-top: 0; }
#ao-soc-hero .aoh-copy > *:last-child { margin-bottom: 0; }
/* Add "aoh-serif" as an Additional CSS class on a heading for the italic
   serif treatment from the original design. Tinos was loaded from Google
   Fonts in the old embed and is not self-hosted, so this falls back to
   Georgia until the face is added to assets/fonts/. */
#ao-soc-hero .aoh-serif { font-family: Georgia, serif; font-style: italic; }
/* ---- editor ----
   The canvases and panels are front-end only, so the editor shows the copy
   column against the hero background and nothing else. */
.ao-soc-hero-editor { background: #0B1643; padding: 48px 40px; border-radius: 4px; }
.ao-soc-hero-editor .aoh-copy { max-width: 584px; color: #fff; }
.ao-soc-hero-editor .aoh-copy :where(h1, h2, h3, h4, p, li) { color: #fff; }