/* services.css — the four /services/<slug>/ pages.
 *
 * These pages are deliberately built out of the case page's own components. The
 * hero, the sticky rail, the picture column, the labelled blocks, the numbered
 * rows and the work grid all come from styles.css and case.css, which is why a
 * service page reads as the same site as a case study rather than a brochure
 * bolted onto it.
 *
 * Only three things here have no case-page equivalent: the three-step "How it
 * runs" band, the questions, and the links to the other three services. Every
 * value reads from the same custom properties the rest of the site uses, so a
 * token change moves these pages with everything else.
 */

/* The vertical rhythm, the rail alignment and the stacked work-card captions all
   started here and now live in case.css: the same three faults were on the eight
   case pages and on /partners/, which are built out of the same components and
   load the same file. Fixing them in one place keeps a service page and a case
   page reading as the same site. */

/* --- hero ------------------------------------------------------------------
   A case page's subheading is a services list, so case.css sets it uppercase and
   letterspaced like a label. Here the subheading is the promise off the homepage
   card — a sentence — and a sentence set in tracked caps reads as shouting. */
.svc-hero-sub {
  max-width: 34ch;
  font-size: clamp(17px, 1.7vw, 25px);
  letter-spacing: -0.02em;
  text-transform: none;
  opacity: 0.72;
}

/* --- the board -------------------------------------------------------------
   case.css crops the picture column to 16/10 because it is showing website
   screenshots. The four boards are drawn at 1800x1013, so a 16/10 crop would
   shave the top and bottom off artwork that was composed to fit exactly. */
.case-picture .svc-shot {
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background-color: transparent;
}

/* The rail's label/value rows stack (.line-flex.vertical) so a long value like
   "Companies where the site is the first meeting" wraps under its label instead
   of squeezing into half a column. */
.case-sticky .project-bottom-line .line-flex.vertical + .line-flex.vertical {
  margin-top: 4px;
}

/* --- how it runs -----------------------------------------------------------
   Three steps across the inverted band. Same construction as the case pages'
   Numbers row — hairline over each cell so the three read as one measured row —
   because it is the same job: several short facts sitting side by side.

   The hairline is currentColor rather than --c-text-2, which is a fixed black
   alpha and would be invisible against this band's dark ground. */
.svc-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--page-margin--divider-medium);
}

.svc-step {
  border-top: 1px solid currentColor;
  padding-top: 18px;
}

.svc-step__n {
  display: block;
  font-family: var(--font--second-font);
  font-size: var(--font--work-title);
  letter-spacing: 0.06em;
  opacity: 0.55;
}

.svc-step__title {
  margin: 14px 0 0;
  font-size: var(--font--h4);
  font-weight: var(--font-weight--600);
  letter-spacing: -0.4px;
}

.svc-step__body {
  margin: 12px 0 0;
  font-size: var(--font--h6);
  line-height: var(--line-height--paragraph-line-height);
  opacity: 0.72;
}

/* --- the questions ---------------------------------------------------------
   Written out, not folded into a toggle. This site sells AI visibility, and an
   answer hidden behind a click is an answer the assistants may never read.
   Two columns so three or four questions do not run the page long. */
.svc-faq {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--page-margin--divider-medium) var(--page-margin--divider-large);
}

.svc-q {
  border-top: 1px solid var(--c-text-2);
  padding-top: 18px;
}

.svc-q__ask {
  margin: 0;
  font-size: var(--font--h5);
  font-weight: var(--font-weight--600);
  letter-spacing: -0.3px;
}

.svc-q__say {
  margin: 12px 0 0;
  max-width: 52ch;
  font-size: var(--font--h6);
  line-height: var(--line-height--paragraph-line-height);
  opacity: 0.78;
}

/* --- the other three -------------------------------------------------------
   Full-width rows rather than cards. There is no artwork for a service that is
   not this page's own, and three empty cards would be three empty cards. */
.svc-next {
  display: flex;
  flex-direction: column;
}

.svc-next__item {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 24px;
  align-items: baseline;
  padding: 26px 0;
  border-top: 1px solid var(--c-text-2);
  color: inherit;
  text-decoration: none;
  transition: opacity 0.25s ease, padding-left 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.svc-next__item:last-child {
  border-bottom: 1px solid var(--c-text-2);
}

/* The row shifts a few pixels on hover instead of changing colour. It is the
   quietest way to say "this is a link" on a page that has no other list links,
   and it matches the restraint of the work cards' 1.04 scale. */
.svc-next__item:hover,
.svc-next__item:focus-visible {
  padding-left: 10px;
}

.svc-next__title {
  font-size: var(--font--h4);
  font-weight: var(--font-weight--600);
  letter-spacing: -0.4px;
}

.svc-next__promise {
  font-size: var(--font--h6);
  line-height: var(--line-height--paragraph-line-height);
  opacity: 0.6;
}

/* --- tablet ---------------------------------------------------------------- */
@media screen and (max-width: 991px) {
  .svc-steps {
    grid-template-columns: 1fr;
    gap: var(--page-margin--divider-small);
  }

  .svc-faq {
    grid-template-columns: 1fr;
    gap: var(--page-margin--divider-small);
  }
}

/* --- phone ----------------------------------------------------------------- */
@media screen and (max-width: 767px) {
  .svc-hero-sub {
    max-width: none;
  }

  .svc-next__item {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 22px 0;
  }

  /* No hover on a touch screen, and the shift would only ever be seen as a
     stuck indent after a tap. */
  .svc-next__item:hover {
    padding-left: 0;
  }
}