/* Sourcing is a static belief-layer route: native scroll and no JavaScript dependency. */
.zikhara-sourcing__pattern {
  margin: 0;
}

.zikhara-sourcing__pattern > * {
  margin-block-start: 0;
}

.zikhara-sourcing__pattern > section {
  border-bottom: 1px solid var(--zikhara-steel-700);
  padding-block: clamp(72px, 10vw, 144px);
}

.zikhara-sourcing__section-heading {
  margin-left: 0 !important;
}

.zikhara-sourcing__hero {
  align-items: center;
  box-sizing: border-box;
  display: flex;
  isolation: isolate;
  min-height: max(720px, 88svh);
  overflow: hidden;
  position: relative;
}

.zikhara-sourcing__hero::before {
  color: var(--zikhara-paper);
  content: "CONTROL";
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-size: clamp(7rem, 17vw, 15rem);
  font-weight: 600;
  letter-spacing: -0.07em;
  line-height: 0.8;
  opacity: 0.025;
  pointer-events: none;
  position: absolute;
  right: -0.04em;
  top: 48%;
  transform: translateY(-50%);
  user-select: none;
  z-index: -1;
}

.zikhara-sourcing__hero::after {
  background: var(--zikhara-molten);
  bottom: 0;
  content: "";
  height: 1px;
  left: max(16px, calc((100% - 1280px) / 2));
  position: absolute;
  width: min(220px, 36vw);
}

.zikhara-sourcing__hero-grid {
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: -2;
}

.zikhara-sourcing__hero-grid span {
  background: var(--zikhara-steel-700);
  bottom: 0;
  opacity: 0.5;
  position: absolute;
  top: 0;
  width: 1px;
}

.zikhara-sourcing__hero-grid span:nth-child(1) {
  left: 20%;
}

.zikhara-sourcing__hero-grid span:nth-child(2) {
  left: 40%;
}

.zikhara-sourcing__hero-grid span:nth-child(3) {
  left: 60%;
}

.zikhara-sourcing__hero-grid span:nth-child(4) {
  left: 80%;
}

.zikhara-sourcing__hero-inner {
  margin-left: 0 !important;
  position: relative;
  z-index: 1;
}

.zikhara-sourcing__hero-inner h1 {
  max-width: 15ch;
}

.zikhara-sourcing__hero-inner > p:not(.zikhara-eyebrow) {
  max-width: 72ch;
}

.zikhara-sourcing__hero-inner > .wp-block-buttons {
  margin-top: 36px;
}

.zikhara-sourcing__hero-index {
  bottom: clamp(28px, 5vw, 56px);
  color: var(--zikhara-steel-300);
  display: flex;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.6875rem;
  justify-content: space-between;
  letter-spacing: 0.14em;
  position: absolute;
  right: max(16px, calc((100% - 1280px) / 2));
  width: min(240px, 28vw);
}

.zikhara-sourcing__split {
  align-items: start;
  display: grid;
  gap: clamp(40px, 8vw, 112px);
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
}

.zikhara-sourcing__cluster {
  background: var(--zikhara-paper);
  color: var(--zikhara-ink);
}

.zikhara-sourcing__cluster :where(h2, h3) {
  color: var(--zikhara-ink);
}

.zikhara-sourcing__cluster p {
  color: var(--zikhara-steel-500);
}

.zikhara-sourcing__cluster-copy > * + *,
.zikhara-sourcing__boundary-copy > * + * {
  margin-block-start: 24px;
}

.zikhara-sourcing__context-rail {
  gap: 0;
  margin-top: clamp(48px, 7vw, 88px);
}

.zikhara-sourcing__context-item {
  border-left: 1px solid var(--zikhara-steel-500);
  min-height: 230px;
  padding: 24px clamp(20px, 3vw, 36px);
}

.zikhara-sourcing__context-index {
  color: var(--zikhara-ink) !important;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  margin: 0 0 48px;
}

.zikhara-sourcing__model {
  background: var(--zikhara-ink-raised);
}

.zikhara-sourcing__model-head {
  align-items: end;
  display: grid;
  gap: 32px;
  grid-template-columns: minmax(0, 1fr) auto;
}

.zikhara-sourcing__model-code,
.zikhara-sourcing__register-label {
  color: var(--zikhara-steel-300);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.zikhara-sourcing__stage-list {
  border-top: 1px solid var(--zikhara-steel-500);
  list-style: none;
  margin: clamp(48px, 7vw, 88px) auto 0;
  max-width: 1280px;
  padding: 0;
  position: relative;
}

.zikhara-sourcing__stage-list::before {
  background: var(--zikhara-steel-500);
  bottom: 0;
  content: "";
  left: 26px;
  position: absolute;
  top: 0;
  width: 1px;
}

.zikhara-sourcing__stage {
  align-items: start;
  border-bottom: 1px solid var(--zikhara-steel-700);
  display: grid;
  gap: clamp(20px, 4vw, 48px);
  grid-template-columns: 56px minmax(210px, 4fr) minmax(0, 7fr);
  margin: 0;
  padding-block: clamp(28px, 4vw, 44px);
  position: relative;
}

.zikhara-sourcing__stage-number {
  align-items: center;
  background: var(--zikhara-ink-raised);
  border: 1px solid var(--zikhara-steel-500);
  border-radius: 50%;
  color: var(--zikhara-paper);
  display: flex;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.6875rem;
  height: 52px;
  justify-content: center;
  letter-spacing: 0.08em;
  position: relative;
  width: 52px;
  z-index: 1;
}

.zikhara-sourcing__stage-number::after {
  background: var(--zikhara-molten);
  border-radius: 50%;
  content: "";
  height: 5px;
  position: absolute;
  right: -3px;
  top: 8px;
  width: 5px;
}

.zikhara-sourcing__stage h3,
.zikhara-sourcing__stage p {
  margin: 0;
}

.zikhara-sourcing__stage h3 {
  font-size: clamp(1.25rem, 2.2vw, 1.75rem);
  max-width: 24ch;
  padding-top: 10px;
}

.zikhara-sourcing__stage-copy {
  padding-top: 8px;
}

.zikhara-sourcing__stage-copy p {
  color: var(--zikhara-steel-300);
}

.zikhara-sourcing__stage-copy p + p {
  border-left: 1px solid var(--zikhara-steel-500);
  font-size: 0.875rem;
  margin-top: 16px;
  padding-left: 16px;
}

@media (min-width: 901px) and (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  .zikhara-sourcing__model.is-cinematic {
    /* The pin spacer breaks `.zikhara-sourcing__pattern > section`, so restate the divider. */
    --zikhara-scene-pad: clamp(20px, 3vh, 36px);
    border-bottom: 1px solid var(--zikhara-steel-700);
    box-sizing: border-box;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    height: 100svh;
    min-height: 680px;
    /*
     * The scene is pinned against the viewport top, so the sticky global header
     * sits over its first rows. Clear the header rather than let it cover the
     * heading; the recovered height comes out of head rhythm, never copy.
     */
    padding-block: calc(var(--zikhara-scene-pad) + var(--zikhara-header-h))
      var(--zikhara-scene-pad) !important;
  }

  .zikhara-sourcing__model.is-cinematic .zikhara-sourcing__model-head,
  .zikhara-sourcing__model.is-cinematic .zikhara-sourcing__stage-list {
    margin-inline: auto !important;
    width: min(calc(100% - 32px), 1280px);
  }

  .zikhara-sourcing__model.is-cinematic .zikhara-sourcing__model-head {
    align-items: end;
  }

  /* The description sits beside the heading instead of stacking under it, which
     is what pays for the header clearance without touching the type scale. */
  .zikhara-sourcing__model.is-cinematic .zikhara-sourcing__section-heading {
    align-items: start;
    column-gap: clamp(24px, 3vw, 48px);
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    row-gap: 12px;
  }

  .zikhara-sourcing__model.is-cinematic .zikhara-sourcing__section-heading > * {
    margin-block: 0 !important;
    margin-inline: 0 !important;
    max-width: none;
  }

  .zikhara-sourcing__model.is-cinematic .zikhara-sourcing__section-heading .zikhara-eyebrow,
  .zikhara-sourcing__model.is-cinematic .zikhara-sourcing__section-heading h2 {
    grid-column: 1;
  }

  .zikhara-sourcing__model.is-cinematic .zikhara-sourcing__section-heading p:not(.zikhara-eyebrow) {
    grid-column: 2;
    grid-row: 1 / span 2;
  }

  /*
   * Compact head: the pinned scene has to clear room for all five stages at 768px.
   * The preset font-size class ships `!important`, so matching it is the only way in.
   */
  .zikhara-sourcing__model.is-cinematic .zikhara-sourcing__section-heading h2 {
    font-size: clamp(1.5rem, 2.4vw, 2rem) !important;
  }

  .zikhara-sourcing__model.is-cinematic .zikhara-sourcing__stage-list {
    --zikhara-sourcing-progress: 0;
    display: grid;
    grid-template-rows: repeat(5, minmax(min-content, 1fr));
    margin-top: clamp(14px, 2vh, 24px);
  }

  .zikhara-sourcing__model.is-cinematic .zikhara-sourcing__stage-list::after {
    background: var(--zikhara-molten);
    bottom: 0;
    box-shadow: 0 0 10px color-mix(in srgb, var(--zikhara-molten) 38%, transparent);
    content: "";
    left: 26px;
    position: absolute;
    top: 0;
    /* Floor keeps a small molten signal alive while stage 01 is active. */
    transform: scaleY(max(0.02, var(--zikhara-sourcing-progress)));
    transform-origin: top center;
    width: 1px;
  }

  /*
   * Hierarchy is colour-led rather than opacity-led: dimming the whole row drags
   * 14px/16px body copy under the WCAG 2.2 AA 4.5:1 floor.
   */
  .zikhara-sourcing__model.is-cinematic .zikhara-sourcing__stage {
    align-items: center;
    min-height: 0;
    padding-block: clamp(8px, 1.4vh, 14px);
    transform: translateX(0);
    transform-origin: left center;
    transition: transform var(--zikhara-dur-base) cubic-bezier(0.16, 1, 0.3, 1);
  }

  /* Kept clearly under the compacted h2 so the head still outranks the stages. */
  .zikhara-sourcing__model.is-cinematic .zikhara-sourcing__stage h3 {
    color: var(--zikhara-steel-300);
    font-size: clamp(1.125rem, 1.9vw, 1.5rem);
  }

  .zikhara-sourcing__model.is-cinematic .zikhara-sourcing__stage.is-past h3 {
    color: var(--zikhara-paper-dim);
  }

  .zikhara-sourcing__model.is-cinematic .zikhara-sourcing__stage.is-active {
    transform: translateX(15px);
  }

  /*
   * The detail paragraph keeps its DOM position and is collapsed, not hidden, so
   * it stays in the accessibility tree and expands as its stage becomes active.
   */
  .zikhara-sourcing__model.is-cinematic .zikhara-sourcing__stage-copy {
    display: grid;
    grid-template-rows: auto 0fr;
    row-gap: 0;
    transition:
      grid-template-rows var(--zikhara-dur-slow) cubic-bezier(0.16, 1, 0.3, 1),
      row-gap var(--zikhara-dur-slow) cubic-bezier(0.16, 1, 0.3, 1);
  }

  /* Spacing lives in the gap, not in padding, so the collapsed row measures zero. */
  .zikhara-sourcing__model.is-cinematic .zikhara-sourcing__stage-copy p + p {
    margin-top: 0;
    min-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: opacity var(--zikhara-dur-base) cubic-bezier(0.16, 1, 0.3, 1);
  }

  .zikhara-sourcing__model.is-cinematic .zikhara-sourcing__stage.is-active .zikhara-sourcing__stage-copy {
    grid-template-rows: auto 1fr;
    row-gap: 16px;
  }

  .zikhara-sourcing__model.is-cinematic .zikhara-sourcing__stage.is-active .zikhara-sourcing__stage-copy p + p {
    opacity: 1;
  }

  .zikhara-sourcing__model.is-cinematic .zikhara-sourcing__stage-number {
    transition:
      border-color var(--zikhara-dur-base) cubic-bezier(0.16, 1, 0.3, 1),
      box-shadow var(--zikhara-dur-base) cubic-bezier(0.16, 1, 0.3, 1),
      transform var(--zikhara-dur-base) cubic-bezier(0.16, 1, 0.3, 1);
  }

  .zikhara-sourcing__model.is-cinematic .zikhara-sourcing__stage h3,
  .zikhara-sourcing__model.is-cinematic .zikhara-sourcing__stage-copy p {
    transition: color var(--zikhara-dur-base) cubic-bezier(0.16, 1, 0.3, 1);
  }

  .zikhara-sourcing__model.is-cinematic .zikhara-sourcing__stage.is-past .zikhara-sourcing__stage-number {
    border-color: color-mix(in srgb, var(--zikhara-molten) 30%, var(--zikhara-steel-500));
  }

  .zikhara-sourcing__model.is-cinematic .zikhara-sourcing__stage.is-active .zikhara-sourcing__stage-number {
    border-color: var(--zikhara-molten);
    box-shadow: 0 0 12px color-mix(in srgb, var(--zikhara-molten) 28%, transparent);
    transform: scale(1.06);
  }

  .zikhara-sourcing__model.is-cinematic .zikhara-sourcing__stage.is-active h3,
  .zikhara-sourcing__model.is-cinematic .zikhara-sourcing__stage.is-active .zikhara-sourcing__stage-copy p {
    color: var(--zikhara-paper);
  }

  .zikhara-sourcing__model.is-cinematic.is-complete .zikhara-sourcing__stage-list::after {
    box-shadow: 0 0 14px color-mix(in srgb, var(--zikhara-molten) 54%, transparent);
  }
}

/*
 * Short desktop viewports (1280x720-class laptops and below) still satisfy the
 * cinematic gate, but the stage copy is a fixed height while the budget is not.
 * Recover the difference from head layout and vertical rhythm only — never from
 * copy, type scale, or a scroll region inside the pinned scene. This refines the
 * cinematic tier; it does not gate it, so eligibility stays the four conditions.
 */
@media (min-width: 901px) and (max-height: 720px) and (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  .zikhara-sourcing__model.is-cinematic {
    --zikhara-scene-pad: clamp(12px, 1.8vh, 20px);
    min-height: 600px;
  }

  .zikhara-sourcing__model.is-cinematic .zikhara-sourcing__stage-list {
    margin-top: clamp(8px, 1.2vh, 16px);
  }

  /*
   * Narrowing the column gutters is what buys the rows back at 901px: the stage
   * detail wraps to an extra line once its column drops below roughly 430px, and
   * five rows pay for that. Spacing only — the type scale is fixed.
   */
  .zikhara-sourcing__model.is-cinematic .zikhara-sourcing__stage {
    column-gap: clamp(20px, 2.2vw, 32px);
    padding-block: clamp(5px, 0.9vh, 10px);
  }

  .zikhara-sourcing__model.is-cinematic .zikhara-sourcing__stage.is-active .zikhara-sourcing__stage-copy {
    row-gap: 10px;
  }
}

.zikhara-sourcing__boundaries {
  background: var(--zikhara-ink);
}

.zikhara-sourcing__boundary-copy {
  border-left: 2px solid var(--zikhara-molten);
  padding-left: clamp(20px, 3vw, 36px);
}

.zikhara-sourcing__evidence {
  background: var(--zikhara-ink-raised);
}

.zikhara-sourcing__evidence-grid {
  align-items: start;
  display: grid;
  gap: clamp(48px, 8vw, 112px);
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
}

.zikhara-sourcing__evidence-register {
  border-top: 1px solid var(--zikhara-steel-500);
}

.zikhara-sourcing__register-label {
  margin: 0;
  padding-block: 18px;
}

.zikhara-sourcing__evidence-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.zikhara-sourcing__evidence-list li {
  border-top: 1px solid var(--zikhara-steel-700);
  color: var(--zikhara-paper-dim);
  padding: 18px 0 18px 28px;
  position: relative;
}

.zikhara-sourcing__evidence-list li::before {
  background: var(--zikhara-molten);
  content: "";
  height: 5px;
  left: 2px;
  position: absolute;
  top: 27px;
  width: 5px;
}

.zikhara-sourcing__evidence-note {
  border-top: 1px solid var(--zikhara-steel-500);
  color: var(--zikhara-steel-300);
  font-size: 0.875rem;
  margin: 0;
  padding-top: 20px;
}

@media (max-width: 900px) {
  .zikhara-sourcing__split,
  .zikhara-sourcing__evidence-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .zikhara-sourcing__model-head {
    align-items: start;
    grid-template-columns: minmax(0, 1fr);
  }

  .zikhara-sourcing__model-code {
    margin: 0;
  }

  .zikhara-sourcing__stage {
    grid-template-columns: 56px minmax(190px, 4fr) minmax(0, 6fr);
  }
}

@media (max-width: 720px) {
  .zikhara-sourcing__pattern > section {
    padding-block: 64px;
  }

  .zikhara-sourcing__hero {
    min-height: max(760px, 100svh);
    padding-block: 128px 88px !important;
  }

  .zikhara-sourcing__hero::before {
    font-size: 28vw;
    top: 36%;
  }

  .zikhara-sourcing__hero-grid span:nth-child(1) {
    left: 25%;
  }

  .zikhara-sourcing__hero-grid span:nth-child(2) {
    left: 50%;
  }

  .zikhara-sourcing__hero-grid span:nth-child(3) {
    left: 75%;
  }

  .zikhara-sourcing__hero-grid span:nth-child(4) {
    display: none;
  }

  .zikhara-sourcing__hero-index {
    display: none;
  }

  .zikhara-sourcing__context-item {
    border-left: 0;
    border-top: 1px solid var(--zikhara-steel-500);
    min-height: 0;
  }

  .zikhara-sourcing__stage-list::before {
    left: 20px;
  }

  .zikhara-sourcing__stage {
    gap: 14px 18px;
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .zikhara-sourcing__stage-number {
    height: 40px;
    width: 40px;
  }

  .zikhara-sourcing__stage h3 {
    padding-top: 7px;
  }

  .zikhara-sourcing__stage-copy {
    grid-column: 2;
    padding-top: 0;
  }
}