/* ==========================================================================
   CVR — services.css
   "Our areas of expertise". Loads after base.css, which carries the tokens,
   the shared chrome and the expertise panel. No banner: the header sits
   straight on the intro section.
   ========================================================================== */

.services-intro {
  position: relative;
  background-color: var(--color-ink);
  padding-block: calc(var(--space-12) + var(--space-9)) var(--space-11);
  overflow: hidden;
}

.services-intro__title {
  color: var(--color-lime);
  margin-block: -0.22em var(--space-6);
}

.services-intro__lead {
  color: var(--color-white);
  margin: 0;
  max-width: 52ch;
}

/* --------------------------------------------------------------------------
   Panels
   Three full-bleed 16:9 sections. The homepage runs the same component inside
   a pinned stage; here they simply stack.
   -------------------------------------------------------------------------- */

/* 16:9 only once the frame is wide enough to be worth it — at 320 it would
   be 180px tall, far too short for the title block. */
.service-panel .expertise__inner {
  padding-block: var(--space-11);
}

.service-panel .expertise__body {
  gap: var(--space-6);
}

/* the mockup opens a wider gap before the control than between eyebrow and title */
.service-panel .segmented,
.service-panel .expertise__body > .pill {
  margin-top: var(--space-4);
}

@media (min-width: 768px) {
  .service-panel .expertise__inner {
    min-height: 0;
    aspect-ratio: 16 / 9;
  }
}

@media (min-width: 1024px) {
  .services-intro {
    padding-block: calc(var(--space-12) * 2.4) calc(var(--space-12) * 1.1);
  }
  .services-intro__title {
    margin-bottom: var(--space-5);
  }
  .service-panel .expertise__inner {
    /* the mockup's panels are a 1920x1080 frame each */
    min-height: 0;
    aspect-ratio: 16 / 9;
  }
  .service-panel .expertise__body {
    gap: var(--space-8);
  }
  .service-panel .segmented,
  .service-panel .expertise__body > .pill {
    margin-top: var(--space-7);
  }
  .service-panel .expertise__inner {
    /* the mockup sits the block a little below true centre */
    padding-top: calc(var(--space-11) + var(--space-10));
  }
}