/* Two-state Techish/Normal board. Both text sets live in the DOM; toggling
   the `services--normal` class on the section flips theme + copy at once.
   Default (no class) renders the light/Techish state. */

.services {
  position: relative;
  padding-top: var(--space-40);
  padding-bottom: var(--space-40);
  background-color: #e5e5e5; /* Figma frame fill, not part of the shared token set */
  /* Mobile fill is a different crop of the same photo (nearly full height, a
     narrower horizontal slice) shown at 20% opacity — the Figma fill's own
     opacity, baked into the asset's alpha channel. The 51.4% figure is the
     fraction of the section's own box the image occupies, matching the
     Figma imageTransform's box-space mapping; percentages in background-size
     resolve against the element's own box, so this stays correct at any
     rendered section height. */
  background-image: url("../../img/services-legos-mobile.png");
  background-image: image-set(
    url("../../img/services-legos-mobile.avif") type("image/avif"),
    url("../../img/services-legos-mobile.webp") type("image/webp"),
    url("../../img/services-legos-mobile.png") type("image/png")
  );
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: 100% 51.4%;
  transition: background-color 0.4s ease;
}

.services--normal {
  background-color: var(--dozen-dark);
}

.services__inner {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.services__kicker {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
  font-style: italic;
  font-size: 1.5rem; /* 24px — fixed mobile value, not the fluid h4 token */
  line-height: 1.2;
  color: var(--dozen-blue);
  transition: color 0.4s ease;
}

.services--normal .services__kicker {
  color: var(--dozen-teal);
}

.services__lockup {
  display: flex;
  flex-direction: column;
  gap: 34.54px;
  margin-top: 13.06px;
  text-align: left;
}

.services__heading {
  font-size: var(--h1-size);
  line-height: 1.2;
  color: var(--dozen-dark);
  transition:
    color 0.4s ease,
    font-size 0.4s ease;
}

.services--normal .services__heading {
  color: var(--off-white);
}

.services__subline {
  font-family: var(--font-body);
  font-weight: var(--weight-body);
  font-size: var(--p-size);
  line-height: var(--p-leading);
  font-style: normal;
  color: var(--dozen-dark);
  transition: color 0.4s ease;
}

.services--normal .services__subline {
  color: var(--pure-white);
}

.services__grid {
  display: flex;
  flex-direction: column;
  gap: 34.54px;
  margin-top: 34.54px;
}

.services__row {
  display: flex;
  flex-direction: column;
  gap: 34.54px;
}

.services__item {
  display: flex;
  flex: none;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-10);
  text-align: left;
}

.services__name {
  font-size: 1.5rem; /* 24px — fixed mobile value, not the fluid h4 token */
  /* These are definitions rather than headings, so the element is a p. base.css
     gives h1-h4 the heading face and weight, so both have to be stated here
     instead of inherited, or the names silently render in the body face. */
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
  line-height: 1.2;
  font-style: italic;
  color: var(--dozen-dark);
  transition: color 0.4s ease;
}

.services--normal .services__name {
  color: var(--pure-white);
}

.services__caption {
  display: block;
  font-style: italic;
  color: var(--dozen-blue);
  transition: color 0.4s ease;
}

.services--normal .services__caption {
  color: var(--dozen-teal);
}

/* Only the active register is in the document. Both used to sit in the DOM at
   once, which read as one garbled line to anything that strips tags:
   "Engineering Building", "Security Safety". The hidden attribute is the single
   source of truth for which one is present; the class below still drives colour.
   This rule is author-origin on purpose, because any author display rule on
   these spans would silently beat the UA rule that makes hidden work. */
.services__variant[hidden] {
  display: none;
}

/* Two-state slider, replacing the board's earlier static pill: the ::before
   pill sits under the active label and slides across on toggle, blue/white on
   Techish, teal/dark on Normal. Both pairings clear AA. */
.services__toggle {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-self: center;
  margin-top: var(--space-40);
  padding: var(--space-10);
  border: 0;
  border-radius: 100px;
  background-color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
}

.services__toggle::before {
  content: "";
  position: absolute;
  inset-block: var(--space-10);
  left: var(--space-10);
  width: calc(50% - var(--space-10));
  border-radius: 60px;
  background-color: var(--dozen-blue);
  transition:
    transform 0.4s ease,
    background-color 0.4s ease;
}

.services--normal .services__toggle::before {
  transform: translateX(100%);
  background-color: var(--dozen-teal);
}

.services__toggle-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-20) var(--space-40);
  border-radius: 60px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 1.25rem;
  line-height: 1;
  letter-spacing: -0.7px;
  color: var(--dozen-dark);
  transition: color 0.4s ease;
}

.services__toggle-pill--techish {
  color: var(--pure-white);
}

.services--normal .services__toggle-pill--techish {
  color: var(--dozen-dark);
}

html:not(.js) .services__toggle {
  display: none;
}

@media (min-width: 1024px) {
  .services {
    padding-top: var(--space-120);
    padding-bottom: var(--space-240);
    background-image: url("../../img/services-legos.png");
    background-image: image-set(
      url("../../img/services-legos.avif") type("image/avif"),
      url("../../img/services-legos.webp") type("image/webp"),
      url("../../img/services-legos.png") type("image/png")
    );
    background-size: 100% auto; /* pinned to the 1440-wide design at the board width */
  }

  .services__inner {
    gap: 70px;
    /* Figma's content frame is a fixed 558px, taller than its hugged content */
    min-height: 558px;
    justify-content: center;
  }

  .services__kicker {
    display: none; /* desktop design has no kicker above the heading */
  }

  .services__lockup {
    gap: 13px;
    margin-top: 0;
    text-align: center;
  }

  /* Reserve the taller of the two heading sizes so the lockup height — and the
     grid below it — stays put when the heading swaps between h2 and h1. */
  .services__heading {
    font-size: var(--h2-size);
    line-height: var(--h2-leading);
    min-height: max(
      calc(var(--h2-leading) * var(--h2-size)),
      calc(var(--h1-leading) * var(--h1-size))
    );
  }

  .services--normal .services__heading {
    font-size: var(--h1-size);
    line-height: var(--h1-leading);
  }

  /* Reserve two lines: the Normal subline wraps to two, the Techish one to one,
     so pinning both keeps the grid from shifting on toggle. */
  .services__subline {
    font-family: var(--font-heading);
    font-weight: var(--weight-heading);
    font-size: var(--h3-size);
    line-height: var(--h3-leading);
    min-height: calc(2 * var(--h3-leading) * 1em);
    font-style: italic;
    color: var(--dozen-blue);
  }

  .services--normal .services__subline {
    color: var(--dozen-teal);
  }

  /* All 8 terms share one grid of equal columns; both rows flatten into it via
     display: contents so widths and heights match across the whole board. */
  .services__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: clamp(1rem, 2vw, 2rem);
    row-gap: 58px;
    margin-top: 0;
  }

  .services__row {
    display: contents;
  }

  .services__item {
    min-width: 0;
    align-items: center;
    text-align: center;
  }

  .services__name {
    font-size: var(--h4-size);
    line-height: var(--h4-leading);
  }

  .services--normal .services__name {
    color: var(--off-white);
  }

  /* Reserve three lines so every cell is the same height and toggling
     Techish/Normal never reflows a definition or shifts a term. */
  .services__caption {
    display: block;
    line-height: 1.40625;
    min-height: calc(3 * 1.40625em);
  }

  .services__toggle {
    margin-top: 0;
  }
}