/* ── "Stories that shape new thinking" → studio reveal ───────────
   Tall scroll runway + sticky stage (works inside organism-journey
   overflow:clip, where ScrollTrigger pin would break).
   Composition: 2-line headline + icons (matched height) above copy;
   right side left open for the WebGL organism. */
.au-sequence {
  position: relative;
  /* Above Stories while active; drops under Numbers on handoff (.oj-ideas-handoff). */
  z-index: 7;
  /*
    Runway budget (sticky stage = 100vh):
      ~50vh desktop sticky travel. The entrance runs on its own clock and the
      exit is plain scrolling, so every extra pinned viewport here is dead
      scroll — it reads as a stall before Numbers. Keep it to a short beat.
    Pull up one viewport so Ideas pins as Stories unpins.
  */
  height: 150vh;
  margin-top: -100vh;
  margin-top: -100dvh;
  overflow: visible;
  /* Transparent plane: shared site grey shows through under the WebGL canvas. */
  background: transparent;
  border-bottom: 0;
}

/* Numbers stacking only — opacity exit is scrubbed by the GSAP timeline. */
#home-ideas-sequence.oj-ideas-handoff,
#home-ideas-sequence.oj-ideas-exiting {
  z-index: 5;
}

/* Handoff beat: Numbers stacks above Ideas as the section scrolls away. */
.oj-scene--numbers.oj-numbers-rise {
  z-index: 8;
}
.au-seq-stage {
  position: sticky;
  top: 0;
  width: 100%;
  max-width: none;
  height: 100svh;
  min-height: 100svh;
  margin-inline: 0;
  /* Same gutter as the Stories and Numbers scenes (--oj-gutter). */
  padding: clamp(28px, 4vh, 48px) var(--oj-gutter, clamp(24px, 5vw, 88px));
  overflow: hidden;
  /* Keep transparent so the fixed WebGL organism shows through. */
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  box-sizing: border-box;
  pointer-events: none;
  will-change: opacity, transform;
}

.au-seq-copy {
  position: relative;
  z-index: 6;
  /* Leave the right half of the stage for the WebGL amoeba. */
  width: min(100%, 42rem);
  max-width: min(100%, 58vw);
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: clamp(18px, 2.6vh, 32px);
  will-change: transform, opacity;
}

/* Headline + looped icons as one row; icon height tracks the 2-line title. */
.au-seq-head {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(6px, .8vw, 12px);
  width: 100%;
  min-width: 0;
  /* Shared size so the art square can size in em to the 2-line headline. */
  font-size: clamp(40px, 3vw, 58px);
}

.au-seq-title {
  position: relative;
  z-index: 6;
  flex: 0 1 auto;
  min-width: 0;
  width: fit-content;
  max-width: 100%;
  height: auto;
  margin: 0;
  padding: 0.02em 0 0;
  box-sizing: border-box;
  overflow: visible;
  color: var(--oj-fg, #101010);
  font-weight: 700;
  font-size: 1em;
  line-height: 1;
  letter-spacing: -0.045em;
  text-align: left;
  white-space: normal;
  -webkit-text-stroke: 0;
  text-shadow: none;
}

.au-seq-title-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  position: relative;
  z-index: 1;
  overflow: visible;
  will-change: transform, opacity;
  padding: 0 0.04em 0.06em 0;
  margin: 0;
  color: inherit;
  background: none;
  -webkit-text-fill-color: inherit;
  -webkit-text-stroke: 0;
  paint-order: normal;
  text-shadow: none;
  white-space: normal;
}

.au-seq-title-line {
  display: block;
  white-space: nowrap;
}

/* Keep CMS typography on every reveal wrapper without letting a saved field
   width stretch those wrappers and push the icon to the far edge of the row. */
html body #home-ideas-sequence .au-seq-title,
html body #home-ideas-sequence .au-seq-title-inner,
html body #home-ideas-sequence .au-seq-title-line {
  width: fit-content !important;
  max-width: 100% !important;
}

html body #home-ideas-sequence .au-seq-title {
  flex: 0 1 auto !important;
}

.au-seq-sub {
  position: relative;
  z-index: 6;
  width: 100%;
  max-width: 62ch;
  margin: 0;
  padding: 0;
  color: var(--oj-fg, #101010);
  font-family: var(--font-body, "Aeonik"), "Aeonik", sans-serif;
  font-size: clamp(18px, 1.4vw, 28px);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.028em;
  text-align: left;
  text-wrap: pretty;
  /* Honour line breaks typed into the CMS textarea. The field is applied with
     textContent, so without this the newlines collapse to spaces. */
  white-space: pre-line;
  will-change: transform, opacity;
}

/* Square matched to the 2-line headline height (line-height: 1 → 2em).
   PNG frames carry transparent padding — slight overscale fills the optical size. */
.au-seq-art {
  position: relative;
  z-index: 5;
  flex: 0 0 auto;
  width: 2em;
  height: 2em;
  margin: 0;
  padding: 0;
  align-self: center;
  pointer-events: none;
  overflow: visible;
  contain: layout style;
}

.au-seq-icon {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: contain;
}

/* Motion path: hidden until the Ideas timeline is ready. */
html.organism-motion:not(.oj-ideas-motion-ready) #home-ideas-sequence .au-seq-title,
html.organism-motion:not(.oj-ideas-motion-ready) #home-ideas-sequence .au-seq-art,
html.organism-motion:not(.oj-ideas-motion-ready) #home-ideas-sequence .au-seq-sub {
  opacity: 0;
  visibility: hidden;
}

/* Phones: static composed unit — headline + icons above the paragraph. */
@media (max-width: 820px) {
  .au-sequence {
    height: auto;
    margin-top: 0;
    padding: 0;
  }

  .au-seq-stage {
    position: relative;
    top: auto;
    height: auto;
    min-height: 0;
    overflow: visible;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    padding: clamp(40px, 6vh, 64px) clamp(20px, 5vw, 32px);
  }

  .au-seq-copy {
    width: 100%;
    max-width: 100%;
    gap: clamp(16px, 3vh, 24px);
  }

  .au-seq-head {
    font-size: clamp(34px, 9vw, 56px);
    gap: clamp(12px, 3vw, 20px);
  }

  .au-seq-title {
    padding-block: 0.04em 0.08em;
    letter-spacing: -0.05em;
  }

  .au-seq-title-line {
    white-space: normal;
  }

  .au-seq-sub {
    max-width: 42ch;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    /* Defaults only — CMS line-height/size must be able to win. */
    font-size: clamp(16px, 4.35vw, 19px);
    line-height: 1.24;
  }

  .au-seq-title-inner {
    position: static !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    overflow: visible;
    clip-path: none;
    -webkit-clip-path: none;
  }

  .au-seq-art {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }
}

/* Tablet landscape: denser runway. */
@media (min-width: 821px) and (max-width: 1400px) and (orientation: landscape),
       (any-pointer: coarse) and (min-width: 1024px) and (max-width: 1439px) and (orientation: landscape) {
  .au-sequence {
    height: 140vh;
  }
}

/* Tablet portrait: composed unit (no sticky full-viewport scrub slide). */
html.tablet-portrait .au-sequence {
  height: auto !important;
  margin-top: 0 !important;
  padding: 0;
}
html.tablet-portrait .au-seq-stage {
  position: relative !important;
  top: auto !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: visible;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start;
  align-items: flex-start;
  padding: clamp(36px, 5vh, 56px) clamp(22px, 4vw, 40px) !important;
}
html.tablet-portrait .au-seq-copy {
  width: 100%;
  max-width: 100%;
  gap: clamp(16px, 2.4vh, 24px);
}
html.tablet-portrait .au-seq-head {
  font-size: clamp(40px, 7vw, 72px);
  gap: clamp(14px, 2.5vw, 24px);
}
html.tablet-portrait .au-seq-title {
  padding-block: 0.04em 0.08em;
  letter-spacing: -0.05em;
}
html.tablet-portrait .au-seq-title-line {
  white-space: normal;
}
html.tablet-portrait .au-seq-sub {
  max-width: 42ch;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}
html.tablet-portrait .au-seq-title-inner {
  position: static !important;
  left: auto !important;
  top: auto !important;
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  overflow: visible;
  clip-path: none;
  -webkit-clip-path: none;
}
html.tablet-portrait .au-seq-art {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .au-sequence {
    height: auto;
  }

  .au-seq-stage {
    position: relative;
  }

  .au-seq-title,
  .au-seq-title-inner,
  .au-seq-art,
  .au-seq-sub {
    will-change: auto;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    overflow: visible;
    clip-path: none;
    -webkit-clip-path: none;
  }
}

html.cms-preview-mode .au-sequence {
  height: auto;
  margin-top: 0;
  padding: clamp(56px, 8vh, 96px) 0 clamp(40px, 6vh, 72px);
}
html.cms-preview-mode #home-ideas-sequence {
  background: var(--oj-ideas-bg, var(--home-page-bg, #e7e7e7));
}

/* Preview mirrors production: headline + icons above the paragraph, right open. */
html.cms-preview-mode .au-seq-stage {
  position: relative;
  top: auto;
  height: auto;
  min-height: 0;
  overflow: visible;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0 var(--oj-gutter, clamp(24px, 5vw, 88px));
}

html.cms-preview-mode .au-seq-copy {
  width: min(100%, 42rem);
  max-width: min(100%, 58vw);
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 2.6vh, 32px);
}

html.cms-preview-mode .au-seq-head {
  font-size: clamp(40px, 3vw, 58px);
}

html.cms-preview-mode .au-seq-title {
  position: relative;
  left: auto;
  right: auto;
  top: auto;
  width: auto;
  max-width: 100%;
  padding-inline: 0;
  padding-block: 0.02em 0.06em;
  white-space: normal;
  text-align: left;
}

html.cms-preview-mode .au-seq-art {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  margin-top: 0;
}

html.cms-preview-mode .au-seq-sub {
  max-width: 62ch;
  margin-top: 0;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

html.cms-preview-mode .au-seq-title-inner {
  position: static !important;
  left: auto !important;
  top: auto !important;
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  white-space: normal;
}