/* Services: the working part of the world.

   What it replaces: four identical col-lg-3 cards in one straight row. That is the flattest
   arrangement left on the page, and after Products it is the last thing that reads as a brochure.

   What it is: four stations along a route through the working area. They sit at different sizes and
   different heights, the lead station is larger than the rest, one crosses the container's left
   edge, and a drawn route runs between them with the work travelling along it. The route and the
   travelling light are what "specialists visibly doing things" means here: the section is not four
   labels, it is a place with something moving through it.

   The sentient texture stays exactly as it was, at full colour, scroll-linked: it is the one part
   of the earlier pass that was liked, so this builds on it rather than replacing it.

   Loads after body.css, every selector under .services-world. */

.services-world {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding: clamp(4rem, 9vw, 8rem) 0 clamp(4.5rem, 10vw, 9rem);
}

/* the gradient wash goes; the texture stays */
.services-world > .orb-body-pool {
  display: none;
}

.services-inner {
  position: relative;
  z-index: 2;
  width: min(100% - 2.5rem, 82rem);
  margin: 0 auto;
}

/* Off the centre axis, and to the right: Products leans left, so the page alternates rather than
   settling into a new symmetry of its own. It sits INSIDE the field and shares its top row with the
   lead station, because right-aligned on a row of its own it left half a 1440 frame empty and that
   read as a gap rather than as space. */
.services-world .section-header {
  position: relative;
  grid-column: 7 / span 6;
  grid-row: 1;
  align-self: center;
  text-align: right;
  margin: 0;
  padding: clamp(1rem, 2.5vw, 2rem) clamp(1rem, 2.5vw, 2rem) clamp(1.2rem, 3vw, 2.2rem);
}

/* The cards carry their own glass, the header carried nothing, and at full colour the texture
   under it runs to rgb(189,125,67). Measured 1.08 against a floor of 3 before this. A local band,
   flat fill with the falloff in a mask so there is no edge to see, rather than dimming the texture
   the whole section is built on. */
.services-world .section-header::before {
  content: '';
  position: absolute;
  inset: -18% -12%;
  z-index: -1;
  border-radius: 24px;
  background: rgba(4, 1, 11, 0.84);
  -webkit-mask-image: radial-gradient(58% 62% at 62% 50%, #000 0%, #000 46%, rgba(0, 0, 0, 0.6) 70%, rgba(0, 0, 0, 0) 100%);
  mask-image: radial-gradient(58% 62% at 62% 50%, #000 0%, #000 46%, rgba(0, 0, 0, 0.6) 70%, rgba(0, 0, 0, 0) 100%);
}

/* The continuation is gone with the box that needed it. It carried the painting's bottom edge on
   below the image and dissolved it, because the image used to stop partway down the section. Now
   the image covers the section, so this would have started AT the section's bottom edge and painted
   a gradient down over the contact section instead. */

/* ---------- the field ---------- */

.services-field {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(1rem, 2vw, 1.75rem);
  align-items: start;
}

.services-route {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  overflow: visible;
}

.service-station {
  position: relative;
  z-index: 1;
}

/* Four different places, not four equal tiles. Each one sits at its own width, column and height,
   so the eye travels the route instead of scanning a row. */
/* Named, not positional. nth-of-type counted the header as a div and shuffled every station into
   the wrong column and row; the classes cannot drift. */
.service-station.is-lead   { grid-column: 1 / span 6;  grid-row: 1; margin-top: 0; }
.service-station.is-mobile { grid-column: 7 / span 4;  grid-row: 2; margin-top: clamp(1rem, 3vw, 2.5rem); }
.service-station.is-web    { grid-column: 2 / span 4;  grid-row: 3; margin-top: clamp(1rem, 3vw, 2.5rem); }
.service-station.is-cloud  { grid-column: 8 / span 5;  grid-row: 4; margin-top: clamp(0.5rem, 2vw, 1.5rem); }

/* The lead station is a different KIND of object, not the same card at a different size: a wide
   plaque that crosses the container's left edge, with the icon beside the words rather than a
   centred stack above them, and no rounded left side because it comes out of the frame. */
.service-station.is-lead {
  margin-left: calc(50% - 50vw);
  padding-left: max(0px, calc(50vw - 50%));
}

@media (min-width: 992px) {
  .service-station.is-lead .service-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      'icon title'
      'icon body';
    align-items: center;
    column-gap: clamp(1.2rem, 2.5vw, 2rem);
    text-align: left;
    padding: clamp(1.8rem, 3vw, 2.6rem) clamp(1.6rem, 3vw, 2.4rem);
  }

  .service-station.is-lead .service-card i {
    grid-area: icon;
    margin: 0;
    font-size: 3.4rem;
  }

  .service-station.is-lead .service-card h3 {
    grid-area: title;
    align-self: end;
    margin: 0 0 0.35rem;
    font-size: 1.6rem;
  }

  .service-station.is-lead .service-card p {
    grid-area: body;
    align-self: start;
    margin: 0;
    max-width: 42ch;
  }
}

.service-station.is-lead .service-card {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-left: 0;
}

/* the station's own footing on the ground, matching Products so the page has one vocabulary */
.service-station .service-card {
  position: relative;
}

.service-station .service-card::after {
  content: '';
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: -22px;
  height: 44px;
  border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(0, 190, 255, 0.22), rgba(4, 1, 11, 0) 72%);
  pointer-events: none;
}

.service-station.is-lead .service-card::after {
  background: radial-gradient(50% 50% at 50% 50%, rgba(255, 0, 255, 0.22), rgba(4, 1, 11, 0) 72%);
}

/* A station lights as the work reaches it. Driven from scroll by services.js, never on a timer. */
.service-station .service-card {
  transition: border-color 500ms ease, box-shadow 500ms ease;
}

.service-station.is-working .service-card {
  border-color: rgba(0, 212, 255, 0.55);
  box-shadow: 0 0 34px rgba(0, 212, 255, 0.18), 0 24px 60px rgba(4, 1, 11, 0.6);
}

.service-station.is-lead.is-working .service-card {
  border-color: rgba(255, 0, 255, 0.6);
  box-shadow: 0 0 34px rgba(255, 0, 255, 0.2), 0 24px 60px rgba(4, 1, 11, 0.6);
}

/* ---------- narrow frames ---------- */

@media (max-width: 991.98px) {
  .services-world .section-header {
    text-align: left;
    margin-right: 0;
  }

  /* stacked, the plaque becomes a card again but keeps its own left-aligned type */
  .service-station.is-lead .service-card {
    text-align: left;
  }

  .services-field {
    grid-template-columns: repeat(6, 1fr);
  }

  .services-world .section-header { grid-column: 1 / -1; grid-row: 1; }

  /* still staggered, still alternating, still one crossing the edge */
  .service-station.is-lead   { grid-column: 1 / span 6; grid-row: 2; margin-top: clamp(1.5rem, 6vw, 3rem); }
  .service-station.is-mobile { grid-column: 2 / span 5; grid-row: 3; margin-top: clamp(1.5rem, 6vw, 3rem); }
  .service-station.is-web    { grid-column: 1 / span 5; grid-row: 4; margin-top: clamp(1.5rem, 6vw, 3rem); }
  .service-station.is-cloud  { grid-column: 2 / span 5; grid-row: 5; margin-top: clamp(1.5rem, 6vw, 3rem); }

  .service-station.is-lead {
    font-size: 1em;
  }
}

/* ---------- reduced motion ---------- */

/* The route is still drawn, because it is structure rather than motion: what stops is the light
   travelling along it, and every station is lit rather than waiting its turn. */
html[data-motion="still"] .services-route .services-route-pulse {
  display: none;
}

html[data-motion="still"] .service-station .service-card {
  transition: none;
}