/* ============================================================
   ADA SECTION — COMPASS SCROLL SEQUENCE
   Tactical Resilience | Protocol X Field Manual
   Add to: css/ada.css
   Link:   <link rel="stylesheet" href="css/ada.css">
   ============================================================ */

/* ----------------------------
   CUSTOM PROPERTIES
   ---------------------------- */
.ada-section {
  --ada-bg:            #090f1d;
  --ada-brass:         #b8943f;
  --ada-brass-dim:     #7a6028;
  --ada-brass-glow:    #d4a94f;
  --ada-blue:          #4d9fdc;
  --ada-blue-dim:      #2a5c7a;
  --ada-blue-glow:     #7dbfec;
  --ada-red:           #7a2020;
  --ada-white:         #e8f0f8;
  --ada-gray:          #6a7f94;
  --ada-gray-dark:     #2a3a4a;
  --ada-font-mono:     'Share Tech Mono', monospace;
  --ada-font-sans:     'Inter', sans-serif;
  --ada-font-cond:     'Barlow Condensed', sans-serif;
}

/* ----------------------------
   SECTION BASE
   ---------------------------- */
.ada-section {
  position: relative;
  background: var(--ada-bg);
  overflow-x: hidden;
}

/* ============================================================
   ENTRY SCENE
   ============================================================ */
.ada-entry {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 80px 40px;
  border-bottom: 1px solid rgba(184, 148, 63, 0.10);
  overflow: hidden;
}

/* Interference glow behind entry */
.ada-entry::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 50% at 50% 50%,
    rgba(122, 32, 32, 0.09) 0%,
    transparent 70%);
  pointer-events: none;
}

.ada-entry-inner {
  position: relative;
  z-index: 1;
  max-width: 680px;
}

/* Kicker line */
.ada-entry-kicker {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  font-family: var(--ada-font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ada-brass);
  margin-bottom: 28px;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.ada-entry.in-view .ada-entry-kicker { opacity: 1; transform: translateY(0); }

.ada-kicker-line {
  display: block;
  width: 32px;
  height: 1px;
  background: var(--ada-brass);
  opacity: 0.4;
  flex-shrink: 0;
}

/* Headline */
.ada-entry-headline {
  font-family: var(--ada-font-cond);
  font-size: clamp(36px, 5.5vw, 72px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ada-white);
  margin: 0 0 24px;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.8s ease 0.15s, transform 0.8s ease 0.15s;
}
.ada-entry.in-view .ada-entry-headline { opacity: 1; transform: translateY(0); }

/* Sub-copy */
.ada-entry-sub {
  font-family: var(--ada-font-sans);
  font-size: clamp(14px, 1.5vw, 18px);
  color: var(--ada-gray);
  line-height: 1.65;
  max-width: 520px;
  margin: 0 auto 48px;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.8s ease 0.3s, transform 0.8s ease 0.3s;
}
.ada-entry.in-view .ada-entry-sub { opacity: 1; transform: translateY(0); }

/* Scroll cue */
.ada-entry-scroll-cue {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  opacity: 0;
  transition: opacity 0.6s ease 0.6s;
}
.ada-entry.in-view .ada-entry-scroll-cue { opacity: 0.35; }

.ada-scroll-cue-label {
  font-family: var(--ada-font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--ada-brass);
}
.ada-scroll-cue-arrow {
  font-size: 14px;
  color: var(--ada-brass);
  animation: adaBounce 2.2s ease-in-out infinite;
}
@keyframes adaBounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(7px); }
}

/* ============================================================
   SCROLL BODY — Sticky left / Scrollable right
   ============================================================ */
.ada-body {
  display: flex;
  align-items: flex-start;
  position: relative;
}

/* ============================================================
   COMPASS COLUMN (sticky left, 52%)
   ============================================================ */
.ada-compass-col {
  position: sticky;
  top: 0;
  width: 52%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Subtle vertical divider */
.ada-compass-col::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 1px;
  height: 100%;
  background: linear-gradient(to bottom,
    transparent,
    rgba(184, 148, 63, 0.12) 20%,
    rgba(184, 148, 63, 0.12) 80%,
    transparent);
}

.ada-compass-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 100%;
  max-width: 420px;
  padding: 40px 28px;
}

/* Brief header row */
.ada-compass-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(184, 148, 63, 0.15);
}
.ada-compass-header-label {
  font-family: var(--ada-font-mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ada-gray-dark);
}
.ada-compass-counter {
  font-family: var(--ada-font-mono);
  font-size: 11px;
  letter-spacing: 0.15em;
  color: var(--ada-brass);
  transition: color 0.4s;
}

/* SVG container */
.ada-compass-stage {
  position: relative;
  width: 100%;
  max-width: 340px;
}
.ada-compass-svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}

/* State label below compass */
.ada-state-label {
  font-family: var(--ada-font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ada-brass);
  opacity: 0.55;
  text-align: center;
  transition: opacity 0.4s, color 0.4s;
  min-height: 16px;
}

/* ============================================================
   COMPASS SVG — BASE STATE
   Everything hidden; stages turn things on via data-stage
   ============================================================ */

/* -- Interference -- */
.cmp-interference line {
  stroke: var(--ada-red);
  stroke-width: 1.5;
  opacity: 0;
  transition: opacity 0.8s ease;
}
/* -- Fragments -- */
.cmp-fragments .cmp-frag {
  fill: none;
  stroke: var(--ada-brass-dim);
  stroke-width: 2;
  opacity: 0;
  transition: opacity 0.7s ease;
}
/* Fragment slow float animations */
.cmp-frag-a { animation: adaFloatA 6.5s ease-in-out infinite; }
.cmp-frag-b { animation: adaFloatB 7.2s ease-in-out infinite 0.6s; }
.cmp-frag-c { animation: adaFloatC 6.8s ease-in-out infinite 1.1s; }
.cmp-frag-d { animation: adaFloatD 7.5s ease-in-out infinite 0.3s; }
.cmp-frag-e { animation: adaFloatE 6.2s ease-in-out infinite 1.6s; }
.cmp-frag-f { animation: adaFloatF 7.0s ease-in-out infinite 0.9s; }
.cmp-frag-g { animation: adaFloatG 6.6s ease-in-out infinite 0.2s; }
@keyframes adaFloatA { 0%,100%{transform:translate(0,0)}  50%{transform:translate(-9px, 7px)} }
@keyframes adaFloatB { 0%,100%{transform:translate(0,0)}  50%{transform:translate(5px, -11px)} }
@keyframes adaFloatC { 0%,100%{transform:translate(0,0)}  50%{transform:translate(11px, 5px)} }
@keyframes adaFloatD { 0%,100%{transform:translate(0,0)}  50%{transform:translate(7px, 9px)} }
@keyframes adaFloatE { 0%,100%{transform:translate(0,0)}  50%{transform:translate(-5px, 11px)} }
@keyframes adaFloatF { 0%,100%{transform:translate(0,0)}  50%{transform:translate(-11px, -5px)} }
@keyframes adaFloatG { 0%,100%{transform:translate(0,0)}  50%{transform:translate(-7px, -9px)} }

/* -- Outer ring (draws in clockwise on ASSESS) -- */
/* Circumference of r=154: 2π×154 ≈ 967.6 → use 968 */
.cmp-ring-outer {
  fill: none;
  stroke: var(--ada-brass-dim);
  stroke-width: 2.5;
  stroke-dasharray: 968;
  stroke-dashoffset: 968;
  transition: stroke-dashoffset 1.5s cubic-bezier(0.4, 0, 0.2, 1),
              stroke            0.8s ease,
              opacity           0.5s ease;
}

/* -- Inner ring -- */
.cmp-ring-inner {
  fill: none;
  stroke: var(--ada-brass);
  stroke-width: 1;
  opacity: 0;
  transition: opacity 0.7s ease 0.3s;
}

/* -- Core ring -- */
.cmp-ring-core {
  fill: none;
  stroke: var(--ada-brass-dim);
  stroke-width: 0.7;
  opacity: 0;
  transition: opacity 0.5s ease 0.5s;
}

/* -- Cardinal ticks (N S E W) -- */
.cmp-cardinal-ticks line {
  stroke: var(--ada-brass);
  stroke-width: 2;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.cmp-cardinal-ticks line:nth-child(1) { transition-delay: 1.0s; }
.cmp-cardinal-ticks line:nth-child(2) { transition-delay: 1.1s; }
.cmp-cardinal-ticks line:nth-child(3) { transition-delay: 1.2s; }
.cmp-cardinal-ticks line:nth-child(4) { transition-delay: 1.3s; }

/* -- Intercardinal ticks -- */
.cmp-intercardinal-ticks line {
  stroke: var(--ada-brass-dim);
  stroke-width: 1;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.cmp-intercardinal-ticks line:nth-child(1) { transition-delay: 0.05s; }
.cmp-intercardinal-ticks line:nth-child(2) { transition-delay: 0.10s; }
.cmp-intercardinal-ticks line:nth-child(3) { transition-delay: 0.15s; }
.cmp-intercardinal-ticks line:nth-child(4) { transition-delay: 0.20s; }
.cmp-intercardinal-ticks line:nth-child(5) { transition-delay: 0.25s; }
.cmp-intercardinal-ticks line:nth-child(6) { transition-delay: 0.30s; }
.cmp-intercardinal-ticks line:nth-child(7) { transition-delay: 0.35s; }
.cmp-intercardinal-ticks line:nth-child(8) { transition-delay: 0.40s; }

/* -- Cardinal letters -- */
.cmp-cardinals text {
  font-family: var(--ada-font-cond);
  font-size: 28px;
  font-weight: 700;
  text-anchor: middle;
  dominant-baseline: middle;
  fill: var(--ada-white);
  opacity: 0;
  transition: opacity 0.5s ease;
}
.cmp-cardinals text:nth-child(1) { transition-delay: 0.1s; }
.cmp-cardinals text:nth-child(2) { transition-delay: 0.2s; }
.cmp-cardinals text:nth-child(3) { transition-delay: 0.3s; }
.cmp-cardinals text:nth-child(4) { transition-delay: 0.4s; }

/* -- Needle group -- */
.cmp-needle-group {
  opacity: 0;
  transform: rotate(180deg);
  transform-box: fill-box;
  transform-origin: center center;
  transition: opacity 0.2s ease;
}

.cmp-needle-north {
  fill: url(#ada-needle-blue);
}
.cmp-needle-south {
  fill: url(#ada-needle-brass);
}

.cmp-pivot-housing {
  fill: #0c1525;
  stroke: var(--ada-brass);
  stroke-width: 1.5;
}
.cmp-pivot-cap {
  fill: #090f1d;
  stroke: var(--ada-brass);
  stroke-width: 1;
}
.cmp-pivot-dot {
  fill: var(--ada-brass);
  transition: fill 0.6s ease;
}

/* Needle snap animation (triggered by JS class) */
.cmp-needle-group.needle-snap {
  animation: needleSnap 0.85s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes needleSnap {
  from { transform: rotate(180deg); }
  to   { transform: rotate(0deg); }
}

/* -- ACT: electric bezel trace -- */
/* Circumference r=154 ≈ 968 */
.cmp-act-bezel {
  fill: none;
  stroke: var(--ada-blue);
  stroke-width: 2.5;
  stroke-dasharray: 968;
  stroke-dashoffset: 968;
  opacity: 0;
  pointer-events: none;
}
.cmp-act-bezel.bezel-trace {
  animation: bezelTrace 0.9s ease-out forwards;
}
@keyframes bezelTrace {
  0%   { stroke-dashoffset: 968; opacity: 0.9; }
  100% { stroke-dashoffset: 0;   opacity: 0; }
}

/* -- ACT: center burst pulse -- */
.cmp-act-pulse {
  fill: none;
  stroke: var(--ada-blue);
  stroke-width: 2;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center center;
  pointer-events: none;
}
.cmp-act-pulse.pulse-fire {
  animation: actBurst 0.7s ease-out forwards;
}
@keyframes actBurst {
  0%   { transform: scale(1);   opacity: 0.85; }
  100% { transform: scale(3.8); opacity: 0; }
}

/* -- REPEAT: steady pulse rings -- */
.cmp-pulse-ring {
  fill: none;
  stroke: var(--ada-blue);
  stroke-width: 1;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center center;
  pointer-events: none;
}

/* -- REPEAT: orbit ring (dashed, slowly rotates) -- */
.cmp-orbit-ring {
  fill: none;
  stroke: var(--ada-blue-dim);
  stroke-width: 1;
  stroke-dasharray: 12, 10;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center center;
  transition: opacity 0.8s ease;
}

/* -- Ambient center glow -- */
.cmp-center-glow {
  fill: url(#ada-glow-grad);
  opacity: 0;
  transition: opacity 0.9s ease;
  pointer-events: none;
}

/* ============================================================
   COMPASS STATE MACHINE
   data-stage attribute on .ada-compass-wrap drives all states
   ============================================================ */

/* ---- ENTRY ---- */
[data-stage="entry"] .cmp-interference line {
  opacity: 0.5;
}
[data-stage="entry"] .cmp-fragments .cmp-frag {
  opacity: 1;
}

/* ---- ASSESS: ring draws, interference clears, 4 cardinal ticks appear ---- */
[data-stage="assess"] .cmp-interference line,
[data-stage="decide"] .cmp-interference line,
[data-stage="act"]    .cmp-interference line,
[data-stage="repeat"] .cmp-interference line {
  opacity: 0;
  animation: none;
}

[data-stage="assess"] .cmp-fragments .cmp-frag,
[data-stage="decide"] .cmp-fragments .cmp-frag,
[data-stage="act"]    .cmp-fragments .cmp-frag,
[data-stage="repeat"] .cmp-fragments .cmp-frag {
  opacity: 0;
  animation: none;
}

[data-stage="assess"] .cmp-ring-outer,
[data-stage="decide"] .cmp-ring-outer,
[data-stage="act"]    .cmp-ring-outer,
[data-stage="repeat"] .cmp-ring-outer {
  stroke-dashoffset: 0;
  stroke: var(--ada-brass);
}

[data-stage="assess"] .cmp-cardinal-ticks line,
[data-stage="decide"] .cmp-cardinal-ticks line,
[data-stage="act"]    .cmp-cardinal-ticks line,
[data-stage="repeat"] .cmp-cardinal-ticks line {
  opacity: 0.8;
}

/* ---- DECIDE: inner ring, all ticks, cardinal letters ---- */
[data-stage="decide"] .cmp-ring-inner,
[data-stage="act"]    .cmp-ring-inner,
[data-stage="repeat"] .cmp-ring-inner {
  opacity: 0.55;
}

[data-stage="decide"] .cmp-ring-core,
[data-stage="act"]    .cmp-ring-core,
[data-stage="repeat"] .cmp-ring-core {
  opacity: 0.28;
}

[data-stage="decide"] .cmp-intercardinal-ticks line,
[data-stage="act"]    .cmp-intercardinal-ticks line,
[data-stage="repeat"] .cmp-intercardinal-ticks line {
  opacity: 0.38;
}

[data-stage="decide"] .cmp-cardinals text,
[data-stage="act"]    .cmp-cardinals text,
[data-stage="repeat"] .cmp-cardinals text {
  opacity: 0.9;
}

[data-stage="decide"] .cmp-ring-outer {
  opacity: 1;
  stroke: var(--ada-brass);
}

/* ---- ACT: needle appears + glow activates ---- */
[data-stage="act"]    .cmp-needle-group,
[data-stage="repeat"] .cmp-needle-group {
  opacity: 1;
}

[data-stage="act"]    .cmp-pivot-dot,
[data-stage="repeat"] .cmp-pivot-dot {
  fill: var(--ada-blue);
}

[data-stage="act"]    .cmp-center-glow,
[data-stage="repeat"] .cmp-center-glow {
  opacity: 0.5;
}

[data-stage="act"] .cmp-ring-outer {
  stroke: var(--ada-brass-glow);
}

[data-stage="act"] .ada-state-label,
[data-stage="repeat"] .ada-state-label {
  color: var(--ada-blue);
  opacity: 0.8;
}

/* ---- REPEAT: pulse rings + orbit ---- */
[data-stage="repeat"] .cmp-ring-outer {
  stroke: var(--ada-brass);
}

[data-stage="repeat"] .cmp-pulse-ring-1 {
  animation: cmpPulseRing 3.2s ease-out 0.4s infinite;
}
[data-stage="repeat"] .cmp-pulse-ring-2 {
  animation: cmpPulseRing 3.2s ease-out 1.6s infinite;
}
[data-stage="repeat"] .cmp-orbit-ring {
  opacity: 0.35;
  animation: cmpOrbitRotate 10s linear infinite;
}
[data-stage="repeat"] .cmp-center-glow {
  opacity: 0.28;
}

@keyframes cmpPulseRing {
  0%   { transform: scale(1);   opacity: 0.45; }
  100% { transform: scale(2.8); opacity: 0; }
}
@keyframes cmpOrbitRotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ============================================================
   NARRATIVE COLUMN (scrollable right, 48%)
   ============================================================ */
.ada-narrative-col {
  width: 48%;
  flex-shrink: 0;
}

/* Each scene = one full viewport height */
.ada-scene {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 80px 52px 80px 44px;
  position: relative;
}

/* Subtle floor line between scenes */
.ada-scene + .ada-scene::before {
  content: '';
  position: absolute;
  top: 0;
  left: 44px;
  right: 52px;
  height: 1px;
  background: rgba(184, 148, 63, 0.07);
}

/* Scene inner fades/slides in on activation */
.ada-scene-inner {
  max-width: 440px;
  opacity: 1;
  transform: none;
  transition: opacity 0.65s ease, transform 0.65s ease;
}

/* Do not hide the narrative unless the ADA controller has initialized. */
.ada-enhanced .ada-scene-inner {
  opacity: 0;
  transform: translateX(18px);
}

.ada-enhanced .ada-scene--active .ada-scene-inner {
  opacity: 1;
  transform: translateX(0);
}

/* ACT scene gets a blue left accent */
.ada-scene-act {
  border-left: 2px solid rgba(77, 159, 220, 0.18);
  padding-left: 42px;
}

/* Stage number */
.ada-scene-num {
  display: block;
  font-family: var(--ada-font-mono);
  font-size: 11px;
  letter-spacing: 0.28em;
  color: var(--ada-brass);
  margin-bottom: 12px;
}
.ada-scene-act .ada-scene-num {
  color: var(--ada-blue);
  opacity: 0.85;
}

/* Stage title */
.ada-scene-title {
  font-family: var(--ada-font-cond);
  font-size: clamp(52px, 6.5vw, 84px);
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ada-white);
  line-height: 1;
  margin: 0 0 18px;
}
.ada-scene-act .ada-scene-title {
  color: var(--ada-blue-glow);
}

/* Horizontal rule under title */
.ada-scene-rule {
  width: 40px;
  height: 1px;
  background: var(--ada-brass);
  opacity: 0.38;
  margin-bottom: 22px;
}
.ada-scene-act .ada-scene-rule {
  background: var(--ada-blue);
  opacity: 0.55;
  width: 56px;
}

/* Body copy */
.ada-scene-desc {
  font-family: var(--ada-font-sans);
  font-size: clamp(14px, 1.4vw, 16px);
  line-height: 1.72;
  color: var(--ada-gray);
  margin-bottom: 28px;
}

/* State + voice footer */
.ada-scene-footer {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-bottom: 18px;
}

.ada-scene-state {
  font-family: var(--ada-font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ada-brass);
  opacity: 0.65;
}
.ada-scene-act .ada-scene-state {
  color: var(--ada-blue);
  opacity: 0.9;
}

.ada-scene-voice {
  font-family: var(--ada-font-sans);
  font-size: 13px;
  font-style: italic;
  color: var(--ada-blue-dim);
  display: block;
}
.ada-scene-act .ada-scene-voice {
  color: var(--ada-blue);
  opacity: 0.75;
}

/* Doctrine small */
.ada-scene-doctrine {
  display: block;
  font-family: var(--ada-font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(184, 148, 63, 0.35);
  margin-bottom: 32px;
}

/* Inline CTA (REPEAT scene) */
.ada-inline-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ada-font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ada-brass);
  text-decoration: none;
  padding-bottom: 3px;
  border-bottom: 1px solid rgba(184, 148, 63, 0.3);
  transition: color 0.3s ease, border-color 0.3s ease;
}
.ada-inline-cta:hover {
  color: var(--ada-brass-glow);
  border-color: var(--ada-brass-glow);
}

/* ============================================================
   MOBILE — Stack vertically, compass above narrative
   ============================================================ */
@media (max-width: 900px) {
  .ada-body {
    flex-direction: column;
  }

  .ada-compass-col {
    position: relative;
    width: 100%;
    height: auto;
    min-height: 55vh;
    top: 0;
    padding: 40px 20px 20px;
  }
  .ada-compass-col::after { display: none; }

  .ada-compass-wrap {
    max-width: 300px;
    padding: 16px;
  }

  .ada-narrative-col {
    width: 100%;
  }

  .ada-scene {
    min-height: auto;
    padding: 60px 28px;
    border-left: none !important;
  }

  .ada-scene-inner {
    max-width: 100%;
    /* On mobile, show all scenes; no slide-in */
    opacity: 1;
    transform: none;
    transition: none;
  }

  /* Still fade active scene slightly more prominent */
  .ada-scene--active .ada-scene-inner {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 480px) {
  .ada-entry { padding: 60px 24px; }
  .ada-scene  { padding: 48px 24px; }
  .ada-scene-title { font-size: clamp(44px, 12vw, 64px); }
}

/* Integration guard: isolate the approved ADA layout from legacy page rules. */
[data-ada-scroll] {
  display: block !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}

@media (min-width: 901px) {
  [data-ada-scroll] .ada-body {
    display: grid !important;
    grid-template-columns: minmax(0, 52fr) minmax(0, 48fr) !important;
    align-items: start !important;
    width: 100% !important;
    min-height: 400vh;
    overflow: visible !important;
  }

  [data-ada-scroll] .ada-compass-col {
    position: sticky !important;
    top: 0 !important;
    align-self: start !important;
    width: auto !important;
    height: 100vh !important;
    min-width: 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  [data-ada-scroll] .ada-compass-wrap,
  [data-ada-scroll] .ada-compass-stage,
  [data-ada-scroll] .ada-compass-svg {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* Force compass to fill the full sticky column */
  [data-ada-scroll] .ada-compass-col {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
  }

  [data-ada-scroll] .ada-compass-wrap {
    width: 92% !important;
    max-width: 520px !important;
    padding: 28px 24px !important;
  }

  [data-ada-scroll] .ada-compass-stage {
    width: 100% !important;
    max-width: 480px !important;
  }

  [data-ada-scroll] .ada-compass-svg {
    width: 100% !important;
    height: auto !important;
  }

  [data-ada-scroll] .ada-narrative-col {
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow: visible !important;
  }

  [data-ada-scroll] .ada-scene {
    display: flex !important;
    position: relative !important;
    inset: auto !important;
    min-height: 100vh !important;
    max-width: none !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
    overflow: visible !important;
  }
}