/* =========================================================
   Xoriant — Orian page (Figma "Orian" 597:1669, 1920 wide)
   Depends on base.css (tokens), header.css, footer.css.
   vw values below are (design px / 19.2).
   ========================================================= */

/* ---------- Sticky-hero mechanics (same pattern as HI/AI page) ---------- */
/* ScrollTrigger snapping fights CSS smooth scrolling; nav.js smooth-scrolls anchors itself. */
html { scroll-behavior: auto; }

.hero {
  position: sticky;
  top: 0;
  z-index: 0;
  height: 100vh;
  min-height: min(560px, 100vh);
  max-height: 100vh;
  overflow: hidden;
  background: linear-gradient(180deg, #17303a 0%, #0c1b22 100%);
  color: #fff;
}
.page-below {
  position: relative;
  z-index: 1;
  background: #fff;
}
/* 85px curve (Figma 597:1678) — spans 881→966, i.e. overlaps the hero foot. */
.page-below__curve {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  margin-bottom: min(-1px, -1.04vw);
  height: clamp(28px, 4.43vw, 85px);
  pointer-events: none;
}
.page-below__curve svg { width: 100%; height: 100%; display: block; }
.hero__title .split-line { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }

/* ---------- HERO ---------- */
.hero--orian .hero__bg { position: absolute; inset: 0; overflow: hidden; }
.hero--orian .hero__img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 62%;
  will-change: transform;
}
/* Figma stacks a 20% and a 40% black wash over the image. */
.hero--orian .hero__tint {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(5,18,24,0.42) 0%, rgba(5,18,24,0.22) 40%, rgba(5,18,24,0.22) 75%, rgba(5,18,24,0.36) 100%);
}
.hero--orian .hero__content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: clamp(16px, 1.72vw, 33px);
  /* Title top sits at 365 of a 914 hero: a touch above centre. */
  padding: 0 var(--gutter) clamp(24px, 3.5vw, 68px);
}
.hero--orian .hero__title {
  color: #fff;
  font-size: clamp(56px, 5.2vw, 100px);
  line-height: 1;
  text-shadow: 0 2px 30px rgba(0,0,0,0.25);
}
.hero--orian .hero__eyebrow {
  color: #fff;
  font-weight:600;
  font-size: clamp(13px, 1.25vw, 24px);
  letter-spacing: 0.33em;
  text-transform: uppercase;
  line-height: 1.36;
  text-shadow: 0 1px 12px rgba(0,0,0,0.25);
}

/* ---------- Shared display heading ---------- */
.orian-h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-h2);
  line-height: 1;
  letter-spacing: -0.005em;
  text-align: center;
  margin: 0 auto;
}
article.cap-card.cap-card--harness.reveal-up.card-1 {
    background: linear-gradient(347deg, rgba(156, 106, 107, 0.00) 0%, rgba(156, 106, 107, 0.30) 100%), #FFF;
}

article.cap-card.cap-card--business.reveal-up.card-2 {
    background: linear-gradient(167deg, rgba(226, 206, 103, 0.30) 0%, rgba(226, 206, 103, 0.00) 100%), #FFF;
}

.orian-h2 br { display: none; }
@media (min-width: 769px) { .orian-h2 br { display: block; } }

/* ---------- SECTION: Intro ---------- */
.intro {
  padding: clamp(56px, 6.25vw, 120px) 0 0;
  text-align: center;
}
.intro__body {
  margin: clamp(28px, 2.9vw, 56px) auto 0;
  max-width: 900px;
  font-weight: 400;
  font-size: clamp(18px, 1.4vw, 27px);
  line-height: 1.8;
  color: var(--ink);
}

/* ---------- SECTION: Three capability cards ---------- */
.caps { padding: clamp(56px, 5.9vw, 113px) 0 0; }
.caps__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 455px));
  justify-content: center;
  gap: clamp(16px, 1vw, 19px);
}
.cap-card {
  position: relative;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  min-height: clamp(460px, 36vw, 690px);
  box-shadow: 0 4px 69.5px rgba(0,0,0,0.11);
  display: flex;
  flex-direction: column;
}
/* A soft tint bleeds down from each image (Figma card backgrounds). */
.cap-card::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 70%;
  pointer-events: none;
  background: linear-gradient(180deg, var(--tint, transparent) 0%, rgba(255,255,255,0) 100%);
}
.cap-card--harness { --tint: rgba(205, 178, 190, 0.45); }
.cap-card--business { --tint: rgba(234, 219, 170, 0.45); }
.cap-card--engineering { --tint: rgba(214, 214, 214, 0.5); }
.cap-card__media {
  position: relative;
  z-index: 1;
  aspect-ratio: 455 / 276;
  overflow: hidden;
}
.cap-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease-out);
}
.cap-card:hover .cap-card__media img { transform: scale(1.05); }
.cap-card__body {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: clamp(32px, 2.8vw, 54px) clamp(24px, 2.4vw, 46px) clamp(32px, 2.8vw, 54px);
}
.cap-card__title {
  font-size: clamp(34px, 2.6vw, 50px);
  line-height: 1;
  color: var(--ink);
}
.cap-card__sub {
  margin-top: clamp(12px, 0.9vw, 17px);
  font-weight:600;
  font-size: clamp(12px, 0.78vw, 15px);
  line-height: 1.36;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
}
.cap-card__text {
  margin-top: clamp(24px, 2.1vw, 40px);
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink);
  text-align: left;
  width: 100%;
}

/* ---------- SECTION: How Orian powers each stage ---------- */
.stages { padding: clamp(80px, 8.54vw, 164px) 0 0; }
.stages__intro { text-align: center; }
.stages__eyebrow {
  margin-top: clamp(22px, 2vw, 38px);
  font-weight:600;
  font-size: clamp(13px, 1.04vw, 20px);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  line-height: 1.36;
  color: var(--ink);
}
.stages__body {
  margin: clamp(20px, 2vw, 38px) auto 0;
  max-width: 876px;
  font-weight:400;
  font-size: clamp(16px, 1.05vw, 20px);
  line-height: 1.8;
  color: var(--ink);
}

/* The pinned stage. GSAP pins .stage for four viewport-heights of scroll and
   steps data-stage from 1 to 5; every [data-stage] swap element is stacked in
   the same grid cell so the layout never shifts between states. */
.stage {
  position: relative;
  height: 100vh;
  height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
/* QA flags (?noanim / ?nopin): fixed-height hero and an unpinned stage so a
   headless full-page capture matches the Figma frame. */
html.qa .hero { height: 914px; max-height: none; }
html.qa .orb { transition: none; }
/* QA flag: one stage, in flow, unpinned. */
.stage.is-static { height: auto; min-height: 0; padding: 60px 0; }

/* The composition is 1375 x 821 in Figma. It is sized by width but must also
   fit the viewport height, so the width is capped from the height as well.
   Everything inside is sized in cqw off this box. */
.stage__inner {
  container-type: inline-size;
  /* Capped at 1000px (≈73% of the Figma composition) so the type lands at the
     same scale as the other pages, and by the viewport height so the pinned
     block never clips at the bottom. */
  width: min(1000px, 100% - var(--gutter) * 2, calc((100vh - 180px) * 1375 / 821));
}
/* cqw units resolve against the nearest *ancestor* container, so the grid has
   to live one level below .stage__inner. */
.stage__grid {
  display: grid;
  grid-template-columns: 50.65cqw 1fr;
  column-gap: 4.73cqw;
  align-items: start;
}
.stage__wheel {
  position: relative;
  /* Wheel top sits 131px below the title top. */
  margin-top: 9.53cqw;
}
.fw {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  transform-origin: 50% 50%;
}
.fw-wedge { opacity: 0; }
.fw-wedge.is-on { opacity: 1; }
.fw-t { transition: none; }

.stage__copy { position: relative; }
.stage__head { text-align: center; }
.stage__title {
  font-size: 2.545cqw;
  line-height: 1;
  color: var(--ink);
  display: grid;
}
.stage__eyebrow {
  margin-top: 0.32cqw;
  font-weight:600;
  font-size: 1.4545cqw;
  line-height: 1.36;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
  display: grid;
}
/* stacked swap items */
.stage__swap {
  grid-area: 1 / 1;
  opacity: 0;
  pointer-events: none;
  will-change: opacity, transform;
}
.stage__swap.is-on { opacity: 1; pointer-events: auto; }

.stage__venn {
  position: relative;
  width: 100%;
  aspect-ratio: 751 / 690;
  margin-top: 4.07cqw;
}
.orb {
  position: absolute;
  width: 29.09cqw;
  height: 29.09cqw;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.6cqw;
  padding: 3cqw;
  text-align: center;
  color: var(--ink);
  transition: background-color 0.6s var(--ease-out), color 0.6s var(--ease-out);
}
.orb__label {
  font-weight:600;
  font-size: 1.4545cqw;
  line-height: 1.36;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.orb__text {
  display: grid;
  width: 77%;
  font-size: 1.818cqw;
  line-height: 1.36;
}
.orb--enables {
  left: 46.73%;
  top: 0;
  z-index: 1;
  background: rgba(185, 241, 80, 0.8);
  border: 0.22cqw solid #fff;
  box-shadow: 11px -11px 27.9px rgba(0,0,0,0.06);
}
.orb--output {
  left: 23.44%;
  top: 61%;
  z-index: 2;
  background: rgba(207, 207, 207, 0.52);
  border: 0.22cqw solid #fff;
  box-shadow: -16px 20px 62.7px rgba(0,0,0,0.06);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.orb--human {
  left: 0;
  top: 0;
  z-index: 3;
  background: rgba(255, 255, 255, 0.17);
  border: 1px solid #fff;
  box-shadow: -6px -4px 62.7px rgba(0,0,0,0.06);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
/* Per-stage colour of the "Orian enables" orb (Figma variants 1–5). */
.stage[data-stage="1"] .orb--enables { background: rgba(185, 241, 80, 0.8); }
.stage[data-stage="2"] .orb--enables { background: rgba(144, 190, 2, 1); }
.stage[data-stage="3"] .orb--enables { background: rgba(55, 100, 138, 0.8); color: #fff; }
.stage[data-stage="4"] .orb--enables { background: rgba(111, 205, 221, 0.8); }
.stage[data-stage="5"] .orb--enables { background: rgba(218, 212, 206, 0.8); }

/* ---------- SECTION: Built for the hard part ---------- */
.hard { padding: clamp(40px, 4vw, 80px) 0 clamp(70px, 7.13vw, 137px); }
.hard__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 740px));
  justify-content: center;
  align-items: start;
  margin-top: clamp(40px, 5vw, 96px);
}
.hard__col { text-align: center; }
.hard__label {
  font-size: clamp(24px, 1.56vw, 30px);
  line-height: 1;
  color: var(--ink);
}
.hard__label .no { color: #fd0000; }
.hard__list {
  margin-top: clamp(18px, 1.3vw, 25px);
  padding: clamp(32px, 2.7vw, 52px) clamp(24px, 3.6vw, 70px) clamp(32px, 2.7vw, 52px) clamp(24px, 3.5vw, 66px);
  text-align: left;
  font-size: clamp(15px, 0.94vw, 18px);
  line-height: 1.6;
  color: var(--ink);
  min-height: clamp(0px, 22vw, 420px);
}
.hard__list li {
  position: relative;
  padding-left: clamp(24px, 1.77vw, 34px);
}
.hard__list li + li { margin-top: 1.36em; }
.hard__list li::before {
  content: '-';
  position: absolute;
  left: 0; top: 0;
}
.hard__list--is {
  background: linear-gradient(180deg, #f3fff5 0%, rgba(243,255,245,0) 100%);
  box-shadow: 0 4px 32.8px rgba(0,0,0,0.11);
  border-radius: 6px;
}
.hard__list--not {
  margin-top: clamp(30px, 2.24vw, 43px);
  min-height: clamp(0px, 20.6vw, 396px);
  padding-top: clamp(28px, 2.1vw, 40px);
  background: #f2f2f2;
  border-radius: 6px;
  color: var(--grey);
}

/* ---------- SECTION: What it looks like in practice ---------- */
.practice { padding: 0 clamp(16px, 1.72vw, 33px); }
.practice__panel {
  max-width: 1853px;
  margin-inline: auto;
  padding: clamp(40px, 2.92vw, 56px) var(--gutter) clamp(28px, 1.82vw, 35px);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(248,249,249,0) 0%, #eef6fa 70%);
  text-align: center;
}
.practice__body {
  margin: clamp(20px, 1.88vw, 36px) auto 0;
  max-width: 876px;
  font-weight:400;
  font-size: clamp(16px, 1.05vw, 20px);
  line-height: 1.6;
  color: var(--ink);
}
.practice__body br { display: none; }
@media (min-width: 769px) { .practice__body br { display: inline; } }
.stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 455px));
  justify-content: center;
  gap: clamp(16px, 1vw, 19px);
  margin-top: clamp(44px, 4.64vw, 89px);
}
.stat { display: flex; flex-direction: column; align-items: center; }
.stat__who {
  font-weight:600;
  font-size: clamp(12px, 0.78vw, 15px);
  line-height: 1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
}
.stat__num {
  margin-top: clamp(24px, 2.4vw, 46px);
  font-size: clamp(56px, 5.2vw, 100px);
  line-height: 0.78;
  color: var(--ink);
}
.stat__what {
  margin-top: clamp(16px, 1.4vw, 27px);
  font-size: clamp(16px, 0.94vw, 18px);
  line-height: 1.5;
  color: var(--ink);
}
.stat__result {
  width: 100%;
  margin-top: clamp(24px, 2.1vw, 40px);
  min-height: clamp(84px, 6vw, 116px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 20px;
  border-radius: 6px;
  background: linear-gradient(180deg, #e3f6e6 0%, #14bb30 62%);
  color: #fff;
  font-size: clamp(16px, 0.94vw, 18px);
  line-height: 1.5;
}

/* ---------- CTA (same as HI/AI page) ---------- */
.cta {
  position: relative;
  margin-top: clamp(70px, 7.55vw, 145px);
  min-height: clamp(560px, 50.6vw, 971px);
  padding: clamp(120px, 7.6vw, 146px) 0 clamp(300px, 30vw, 520px);
  overflow: hidden;
  isolation: isolate;
  text-align: center;
  background: linear-gradient(180deg, #edf6fc 0%, #d2e7f6 60%, #bfdcf1 100%);
}
.cta__bg { position: absolute; inset: 0; z-index: -1; }
.cta__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center bottom; }
.cta__title { max-width: 831px; margin-inline: auto; line-height: 1.08; }
.cta__body {
  max-width: 900px;
  margin: 28px auto 0;
  font-size: clamp(17px, 1.25vw, 24px);
  line-height: 1.7;
  color: var(--ink);
}
.cta__actions {
  margin-top: 48px;
  display: flex;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
}
.cta__curve { height: clamp(40px, 4.43vw, 85px); z-index: 2; }

@media (max-width: 768px) {
  .cta { min-height: 520px; padding: 64px 0 230px; }
  .cta__title { font-size: 36px; line-height: 1; letter-spacing: -0.01em; max-width: none; }
  .cta__body { margin-top: 20px; font-size: 16px; line-height: 1.7; }
  .cta__actions { margin-top: 40px; flex-direction: column; align-items: center; gap: 12px; }
  .cta__actions .btn { height: 40px; }
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1100px) {
  .caps__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cap-card { min-height: 0; }
  .cap-card__text { font-size: 16px; line-height: 1.7; }
  .hard__list { font-size: 17px; line-height: 1.5; min-height: 0; }
  .hard__list--not { min-height: 0; }
}

@media (max-width: 980px) {
  .caps__grid { grid-template-columns: minmax(0, 455px); }
  .cap-card { min-height: 0; }
  .stats { grid-template-columns: minmax(0, 455px); gap: 40px; }
}

/* ---------- Stage: stacked layout (Figma "mobile-view" 610:5037, 320 wide) ---------- */
@media (max-width: 768px) {
  .stage {
    height: auto;
    min-height: 100svh;
    align-items: flex-start;
    padding: 48px 0 8px;
  }
  .stage__inner { width: min(100% - var(--gutter) * 2, 420px); }
  .stage__grid { grid-template-columns: 1fr; row-gap: 0; }
  /* Sized off the visible height so the whole block fits while pinned.
     Bumped from 27svh — the rest of the block's spacing below is trimmed
     by a comparable amount so the larger wheel still fits one screen. */
  .stage__wheel {
    width: min(320px, 100%, 33svh);
    margin: 0 auto;
  }
  .stage__head { margin-top: clamp(10px, 2.2svh, 32px); }
  .stage__title { font-size: clamp(24px, 3.8svh, 32px); }
  .stage__eyebrow { font-size: clamp(11px, 1.7svh, 15px); margin-top: 6px; letter-spacing: 0.18em; }

  /* Circles become three stacked cards. */
  .stage__venn {
    aspect-ratio: auto;
    display: flex;
    flex-direction: column;
    gap: clamp(6px, 1.1svh, 18px);
    margin-top: clamp(8px, 1.65svh, 32px);
  }
  .orb {
    position: static;
    width: 100%;
    height: auto;
    border-radius: 10px;
    padding: clamp(8px, 1.35svh, 20px) 12px;
    gap: clamp(4px, 0.9svh, 12px);
    border-width: 1px;
  }
  .orb--human { background: rgba(255,255,255,0.17); box-shadow: 0 4px 62.7px rgba(0,0,0,0.06); border-color: #fff; }
  .orb--enables { border-width: 1px; }
  .orb__label { font-size: clamp(12px, 1.8svh, 17px); }
  .orb__text { width: 100%; font-size: clamp(13px, 1.9svh, 17px); line-height: 1.3; }
}

@media (max-width: 600px) {
  /* Hero is 449 tall at 320 (mobile frame) and the curve flattens. */
  .hero.hero--orian { height: clamp(400px, 140.3vw, 620px); min-height: 0; }
  .hero--orian .hero__content { gap: 22px; padding-top: 0; padding-bottom: 8px; }
  .hero--orian .hero__title { font-size: 56px; line-height: 0.9; }
  .hero--orian .hero__eyebrow { font-size: 13px; letter-spacing: 0.28em; }
  .page-below__curve { height: clamp(14px, 4.43vw, 85px); margin-bottom: -1px; }
  .page-below__curve {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1920 85' preserveAspectRatio='none'%3E%3Cpath d='M0,85 L0,50 Q960,-30 1920,50 L1920,85 Z' fill='%23fff'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
  }
  .page-below__curve svg { display: none; }
  .cta__curve { height: clamp(14px, 4.43vw, 85px); }

  .orian-h2 { font-size: 36px; line-height: 1; }
  .intro { padding-top: 44px; }
  .intro__body { margin-top: 24px; font-size: 18px; line-height: 1.6; }
  .caps { padding-top: 48px; }
  .cap-card__media { aspect-ratio: 272 / 200; }
  .cap-card__body { padding: 36px 20px 40px; }
  .cap-card__title { font-size: 44px; }
  .cap-card__sub { margin-top: 12px; font-size: 13px; }
  .cap-card__text { margin-top: 24px; font-size: 16px; line-height: 1.7; }

  .stages { padding-top: 64px; }
  .stages__eyebrow { margin-top: 20px; font-size: 13px; }
  .stages__body { margin-top: 18px; font-size: 17px; line-height: 1.6; }

  .hard { padding: 60px 0 64px; }
  .hard__grid { grid-template-columns: 1fr; gap: 32px; margin-top: 36px; }
  .hard__label { font-size: 28px; }
  .hard__list { padding: 28px 22px; font-size: 16px; line-height: 1.5; }
  .hard__list--not { margin-top: 18px; padding-top: 28px; }

  .practice { padding: 0 var(--gutter); }
  .practice__panel { padding: 40px 0px 0px; }
  .practice__body { margin-top: 18px; font-size: 17px; line-height: 1.6; }
  .stats { margin-top: 40px; gap: 36px; }
  .stat__num { margin-top: 22px; font-size: 50px; }
  .stat__what { margin-top: 16px; font-size: 17px; }
  .stat__result { margin-top: 24px; min-height: 96px; font-size: 16px; }
  .cta { margin-top: 64px; }
}

/* QA flag wins over the mobile min-height so the unpinned stage stays in flow. */
html.qa .stage.is-static { height: auto; min-height: 0; }


@media(min-width:1400px){

  .orb--human {
    left: -45px;
}

.orb--output {
            left: 17.44%;
        top: 58%;
}

}