/* ==========================================================================
   In focus: AI-ready organisations, "the orbit" (design option C)
   Copy on the left. On the right, AI at the core of the organisation, five
   steps on its orbit, and the disconnected pilot left outside it. The copy and
   the orbit sit side by side when there is room for both; from 51em the orbit
   drops below the copy at its design size (760 x 600) with the steps placed
   beside their nodes; below that a cropped orbit is followed by the steps as a
   list, so nothing has to scroll sideways. Values from the design file.
   ========================================================================== */

.orbit {
  --orbit-teal: #8fcfc3;
  --orbit-gold: #c9ab6f;
  --orbit-muted: #a9b9ba;
  --orbit-copy: #b7c4c4;
}

/* The design's faint 48px grid, faded out towards the section's edges. */
.orbit::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(243, 239, 230, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(243, 239, 230, 0.035) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent);
  pointer-events: none;
}

.orbit__grid {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4rem 5rem;
}

/* --- Copy -------------------------------------------------------------------- */
.orbit__copy {
  flex: 1 1 26rem;
  min-width: 0;
  max-width: 32.5rem;
}

.orbit__eyebrow {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.75rem;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--orbit-teal);
}

.orbit__eyebrow::before {
  content: "";
  width: 2.5rem;
  border-top: 1px solid currentColor;
}

.orbit__title {
  font-family: var(--font-display);
  font-size: clamp(3.25rem, 5.4vw, 5rem);
  font-weight: 500;
  line-height: 0.96;
  letter-spacing: -0.015em;
  color: var(--fg);
}

.orbit__title em {
  font-style: italic;
  font-weight: 400;
  color: var(--orbit-teal);
}

.orbit__lede {
  margin-top: 1.75rem;
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 1.1rem + 0.9vw, 1.75rem);
  line-height: 1.28;
  color: var(--fg);
  text-wrap: pretty;
}

.orbit__text {
  margin-top: 1.5rem;
  line-height: 1.7;
  color: var(--orbit-copy);
  text-wrap: pretty;
}

.orbit__link {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  margin-top: 1.75rem;
  padding: 0.875rem 0 0.5rem;
  border-bottom: 1px solid currentColor;
  font-size: 0.9375rem;
  line-height: 1.375rem;
  font-weight: 500;
  color: var(--fg);
  text-decoration: none;
  transition: color var(--dur-fast);
}

.orbit__link:hover {
  color: var(--orbit-teal);
}

/* --- The orbit ----------------------------------------------------------------- */
.orbit__visual {
  flex: 1 1 47.5rem;
  min-width: 0;
}

.orbit__svg {
  display: block;
  overflow: visible;
}

.orbit-ring { fill: none; stroke: rgba(243, 239, 230, 0.14); }
.orbit-arc { fill: none; stroke: rgba(243, 239, 230, 0.32); }
.orbit-spokes line { stroke: rgba(243, 239, 230, 0.26); }
.orbit-leaders line { stroke: rgba(201, 171, 111, 0.5); }
.orbit-core { fill: var(--yr-deepteal); }
.orbit-nodes circle { fill: var(--bg); stroke: rgba(201, 171, 111, 0.55); }
.orbit-dots circle { fill: var(--orbit-gold); }

.orbit-pilot circle {
  fill: none;
  stroke: rgba(243, 239, 230, 0.6);
  stroke-width: 1.2;
  stroke-dasharray: 3 4;
}

.orbit-pilot line {
  stroke: rgba(243, 239, 230, 0.4);
  stroke-dasharray: 3 4;
}

.orbit-ai {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  fill: #d9e6e2;
}

.orbit-core-text {
  font-family: var(--font-display);
  font-size: 22px;
  font-style: italic;
  fill: var(--fg);
}

.orbit-pilot-text {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  fill: var(--orbit-muted);
}

/* --- The five steps ------------------------------------------------------------- */
.orbit__steps {
  display: grid;
  gap: 1.5rem;
  margin-top: 2rem;
}

.orbit__step {
  margin-bottom: 0.25rem;
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1.75rem;
  font-weight: 500;
  color: var(--fg);
}

.orbit__num {
  margin-right: 0.75rem;
  color: var(--orbit-gold);
  font-variant-numeric: lining-nums;
}

.orbit__steps p {
  font-size: 0.875rem;
  line-height: 1.3125rem;
  color: var(--orbit-muted);
}

/* Small screens: the orbit cropped to its circle and arc, the steps listed below. */
.orbit__svg--wide {
  display: none;
}

.orbit__svg--tall {
  width: 100%;
  max-width: 26rem;
  height: auto;
  margin-inline: auto;
}

/* From 51em the orbit has room at its design size: the steps sit beside their nodes. */
@media (min-width: 51em) {
  .orbit__frame {
    position: relative;
    width: 760px;
    height: 600px;
    margin-left: auto;
  }

  .orbit__svg--tall {
    display: none;
  }

  .orbit__svg--wide {
    display: block;
    width: 760px;
    height: 600px;
  }

  .orbit__steps {
    position: absolute;
    inset: 0;
    display: block;
    margin: 0;
  }

  .orbit__steps li {
    position: absolute;
    left: 480px;
    width: 280px;
  }

  .orbit__steps li:nth-child(1) { top: 62px; }
  .orbit__steps li:nth-child(2) { top: 174px; }
  .orbit__steps li:nth-child(3) { top: 286px; }
  .orbit__steps li:nth-child(4) { top: 398px; }
  .orbit__steps li:nth-child(5) { top: 510px; }
}