/* ==========================================================================
   How it works - enhancement layer over the existing design.
   Same structure (hero, pipeline timeline + globe, signal library bento);
   bigger type, clearer steps, and a bento with no empty slot.
   Loaded by how-it-works.html only, after sections.css.
   ========================================================================== */

/* ---- Hero ---- */
.hero--3d {
  min-height: 0;
  padding-top: calc(80px + var(--space-4xl));
  padding-bottom: var(--space-3xl);
}

.hero--3d .hero__bg {
  display: none; /* its dot grid rendered as a stray row of ticks under the hero */
}

.hero--3d .hero__heading {
  max-width: 14ch;
  font-size: clamp(3rem, 1.6rem + 4.2vw, 4.75rem);
  line-height: 0.98;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.hero--3d .hero__heading em {
  font-style: italic;
  white-space: nowrap;
  color: var(--color-accent-green);
}

.hero--3d .hero__subtitle {
  max-width: 48ch;
}

.svc-card:focus-visible {
  outline: 2px solid var(--color-accent-green);
  outline-offset: 4px;
  border-radius: 8px;
}

/* ---- Pipeline timeline ---- */
.timeline__header .section-heading {
  font-size: clamp(2.25rem, 1.3rem + 3vw, 3.5rem);
  line-height: 1.05;
  max-width: 18ch;
  text-wrap: balance;
}

.timeline__split {
  gap: var(--space-4xl);
}

.timeline__step {
  gap: var(--space-xl);
  padding: var(--space-xl) 0;
}

.timeline__step-title {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(1.5rem, 1.25rem + 0.8vw, 1.875rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin-bottom: 0.5rem;
}

.timeline__step-duration {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.6rem 0.2rem 0.45rem;
  margin-bottom: 0.65rem;
  border-radius: var(--radius-full);
  background-color: var(--color-accent-green-pale);
  font-size: 0.75rem;
  font-weight: 500;
}

.timeline__step-text {
  font-size: var(--text-base);
  color: var(--color-text-body);
  max-width: 52ch;
}

.timeline__number {
  margin-top: 0.1rem;
}

.timeline__line {
  top: 52px;
  bottom: 52px;
}

.timeline__visual {
  flex: 0 0 440px;
  height: 500px;
}

/* ---- Signal library: bento with no empty slot ---- */
.services__heading {
  font-size: clamp(2.25rem, 1.3rem + 3vw, 3.5rem);
  line-height: 1.05;
}

.services__header {
  margin-bottom: var(--space-3xl);
}

.svc-card__title {
  text-wrap: balance;
}

.services__bento .svc-card--wide {
  grid-column: 2 / 4;
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  grid-template-rows: auto auto 1fr;
  column-gap: var(--space-2xl);
  align-items: start;
}

.svc-card--wide .svc-card__number { grid-column: 1; grid-row: 1; }
.svc-card--wide .svc-card__icon { grid-column: 1; grid-row: 2; }
.svc-card--wide .svc-card__title { grid-column: 1; grid-row: 3; align-self: end; margin-bottom: 0; }
.svc-card--wide .svc-card__desc { grid-column: 2; grid-row: 1 / 3; align-self: end; }
.svc-card--wide .svc-card__cta { grid-column: 2; grid-row: 3; align-self: end; }

#signal-library {
  padding-top: var(--space-4xl);
}

@media (max-width: 1024px) {
  .timeline__split { align-items: flex-start; gap: var(--space-2xl); }
  .timeline__visual { flex: 0 0 320px; height: 380px; }
}

@media (max-width: 768px) {
  .hero--3d {
    padding-top: calc(60px + var(--space-3xl));
    padding-bottom: var(--space-xl);
  }

  .timeline__step { padding: var(--space-lg) 0; }

  .services__bento .svc-card--wide {
    grid-column: auto;
    display: flex;
  }
}