/* ==========================================================================
   Service detail pages — services/*.html

   These three pages were the last of the site still on the raw Webflow
   export: a bare h1, justified body copy, capability lists as browser
   default bullets, and a sticky "Request a quote" button parked in a 20%
   column of dead space. Everything else had already moved onto the
   projects.css / solutions.css vocabulary.

   The rebuild reuses that vocabulary wholesale — .sl-hero, .sl-section,
   .sl-who, .sl-section-body, .sl-cta, .pj-btn, .pj-eyebrow, .pj-wrap — so
   this sheet only has to define the one component those pages needed and
   the site did not already own: the capability card grid.

   Loaded by the three service detail pages only, after theme.css,
   projects.css and solutions.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Capability cards

   Each service page carries 5–10 capabilities, every one a short label and
   a sentence. As <ul> bullets they read as a wall; as cards they are
   scannable and they use the right-hand half of the page, which the old
   80%/20% split left empty.

   auto-fit rather than a fixed 2 columns: the counts are uneven (5, 7, 9,
   10) and a fixed grid strands the last card at half width on every page.
   minmax(280px, 1fr) lands on two columns from about 700px up and collapses
   to one below that without a media query.
   -------------------------------------------------------------------------- */

.sv-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
  margin-top: 28px;
}

.sv-card {
  background: var(--vd-raised);
  border: 1px solid var(--vd-line);
  border-radius: 16px;
  padding: 24px 26px 26px;
  transition: border-color .2s ease, transform .2s ease;
}

/* The sand edge is the same accent .svc-xlink uses for a sideways link, so
   a hovered card reads as part of the same family rather than as a button. */
.sv-card:hover {
  border-color: var(--vd-sand);
  transform: translate3d(0, -2px, 0);
}

.sv-card h3 {
  margin: 0 0 10px;
  font-family: var(--vd-display);
  font-variation-settings: "wdth" 112;
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.3;
  letter-spacing: -.015em;
  color: var(--vd-ink);
}

.sv-card p {
  margin: 0;
  font-family: var(--vd-body);
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--vd-muted);
}

/* vdim.webflow.css:199 sets a bare <a> to var(--white) at 11px, which renders
   an in-card link as invisible white text on a white card. theme.css:736 fixes
   this for the prose containers it knew about; .sv-card is new, so it needs the
   same treatment here rather than another site-wide theme.css bump. */
.sv-card a {
  color: var(--vd-teal);
  font-size: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(31, 122, 115, .38);
  transition: text-decoration-color .18s ease;
}

.sv-card a:hover {
  text-decoration-color: currentColor;
}

.sv-card a:focus-visible {
  outline: 2px solid var(--vd-teal);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Banner

   theme.css:795 already gives .image-service its missing width. Here it only
   needs to sit flush against the hero above it and the first band below,
   and to stop being a 117px letterbox strip on a phone — at 30vw it read as
   a coloured band rather than a picture.
   -------------------------------------------------------------------------- */

.sv-banner {
  display: block;
  margin: 0;
}

@media (max-width: 700px) {
  .image-service {
    height: 46vw;
    min-height: 200px;
  }
}

/* --------------------------------------------------------------------------
   A capability group needs a lead-in line on the pages that have two groups
   (3D Mapping splits into how we capture and what we produce).
   -------------------------------------------------------------------------- */

.sv-group-note {
  margin: 0;
  max-width: 62ch;
  font-family: var(--vd-body);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--vd-muted);
}

@media (prefers-reduced-motion: reduce) {
  .sv-card,
  .sv-card a {
    transition-duration: .01ms;
  }

  .sv-card:hover {
    transform: none;
  }
}