/* =====================================================================
   Services — Page Styles
   Own components (bento, process diagram), on top of style.css for the
   header, hero and footer. Illustrations follow the case study ones:
   white strokes and fills at low opacity, one blue accent.
   ===================================================================== */

/* ── Hero ─────────────────────────────────────────────────────────── */
.hero-heading { gap: 0; line-height: 64px; }
.hero-heading .heading-row,
.hero-heading .heading-row span { white-space: normal; }

.hero-cta-group {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
}

.svc-link {
  color: #137fec;
  font-family: 'Figtree', sans-serif;
  font-size: 16px;
  line-height: 24px;
  text-underline-offset: 4px;
}
.svc-link:hover { color: #0f6dd0; }

/* ── Sections ─────────────────────────────────────────────────────── */
.svc-defs { position: absolute; width: 0; height: 0; color: #ffffff; }

.svc-section {
  width: 100%;
  max-width: 1100px;
  padding: 0 20px;
  margin-top: 120px;
  color: #ffffff;
}

.svc-title {
  font-family: 'Figtree', sans-serif;
  font-weight: 500;
  font-size: 32px;
  line-height: 48px;
  color: #ffffff;
}

.svc-lead {
  margin-top: 8px;
  max-width: 640px;
  font-family: 'Figtree', sans-serif;
  font-size: 18px;
  line-height: 27px;
  color: #8d9bad;
}

/* ── Bento ────────────────────────────────────────────────────────── */
.bento {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 40px;
}

.bento-card {
  background-color: #1c1c1c;
  border: 1px solid #333333;
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 360px;
  color: #ffffff;
}

.bento-text { padding: 32px 32px 0; }

.bento-name {
  font-family: 'Figtree', sans-serif;
  font-weight: 500;
  font-size: 20px;
  line-height: 30px;
  color: #ffffff;
}

.bento-desc {
  margin-top: 8px;
  font-family: 'Figtree', sans-serif;
  font-size: 16px;
  line-height: 24px;
  color: #8d9bad;
}

/* Illustrations bleed off the bottom edge, like the case study cards */
.bento-illu {
  margin-top: auto;
  padding-top: 24px;
}
.bento-illu svg {
  display: block;
  width: 100%;
  height: auto;
}

/* ── Process diagram ──────────────────────────────────────────────── */
/* Four panels side by side, each showing its quarter of one drawing.
   No gap between them, so the line runs on uninterrupted. */
.process {
  margin-top: 40px;
  padding: 40px 0;
  background-color: #1c1c1c;
  border: 1px solid #333333;
  border-radius: 20px;
  overflow: hidden;
}

.process-nav { display: none; }

.process-track {
  display: grid;
  /* minmax(0, 1fr): long words must not widen a column, or the four
     quarters of the drawing scale differently and the line breaks */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: auto auto auto;
  padding: 0 40px;
}

/* Each phase spans the three shared rows (head, drawing, details), so the
   drawings sit at the same height in every panel and the seams line up */
.process-col {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
  /* Never wider than its track, even when a word is longer than the column */
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
}
.process-track:focus-visible { outline: 2px solid #137fec; outline-offset: -2px; }

.process-head,
.process-body { padding-right: 24px; }

.process-num {
  font-family: 'Figtree', sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 21px;
  color: #137fec;
}

.process-name {
  margin-top: 4px;
  font-family: 'Figtree', sans-serif;
  font-weight: 500;
  font-size: 20px;
  line-height: 30px;
  color: #ffffff;
}

.process-goal {
  margin-top: 4px;
  font-family: 'Figtree', sans-serif;
  font-size: 14px;
  line-height: 21px;
  color: #8d9bad;
}

.process-line {
  display: block;
  width: 100%;
  height: auto;
  margin: 24px 0;
  color: #ffffff;
}

.process-verb {
  display: block;
  font-family: 'Figtree', sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 27px;
  color: #ffffff;
}

.process-list {
  margin-top: 16px;
  padding-left: 16px;
  font-family: 'Figtree', sans-serif;
  font-size: 16px;
  line-height: 24px;
  color: #c0cbda;
}
.process-list li + li { margin-top: 8px; }
.process-list li::marker { color: #137fec; }

/* ── Ways to work together ────────────────────────────────────────── */
.ways {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 32px;
}

.way {
  padding: 32px;
  border-radius: 20px;
  border: 1px solid #333333;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0) 60%), #1c1c1c;
}

.way-name {
  font-family: 'Figtree', sans-serif;
  font-weight: 500;
  font-size: 20px;
  line-height: 30px;
  color: #ffffff;
}

.way-desc {
  margin-top: 8px;
  font-family: 'Figtree', sans-serif;
  font-size: 16px;
  line-height: 24px;
  color: #8d9bad;
}

/* ── Closing CTA ──────────────────────────────────────────────────── */
.svc-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
  padding: 64px 24px;
  border: 1px dashed #404040;
  border-radius: 20px;
}
.svc-cta .svc-lead { margin-top: 0; }

.svc-note {
  font-family: 'Figtree', sans-serif;
  font-size: 14px;
  line-height: 21px;
  color: #8d9bad;
}

/* ── Light theme (not active yet) ─────────────────────────────────── */
[data-theme="light"] .svc-defs,
[data-theme="light"] .process-line,
[data-theme="light"] .bento-card { color: #111111; }

/* ── Tablet ───────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .bento { grid-template-columns: repeat(2, 1fr); }

  .ways { grid-template-columns: 1fr; }

  .process-name { font-size: 18px; line-height: 27px; }
}

/* ── Mobile ───────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .svc-section { margin-top: 80px; }
  .svc-title { font-size: 24px; line-height: 36px; }

  .bento { grid-template-columns: 1fr; }
  .bento-card { min-height: 0; }

  /* The diagram becomes a strip you swipe, one phase per stop */
  .process { padding: 24px 0 32px; }

  .process-nav {
    display: flex;
    gap: 8px;
    padding: 0 24px 24px;
  }

  .process-dot {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 8px 0 0;
    border: 0;
    border-top: 2px solid #333333;
    background: none;
    cursor: pointer;
    text-align: left;
    transition: border-color 0.25s;
  }
  .process-dot-num {
    font-family: 'Figtree', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 21px;
    color: #555f6d;
    transition: color 0.25s;
  }
  .process-dot-name { display: none; }
  .process-dot[aria-current="step"] { border-top-color: #137fec; }
  .process-dot[aria-current="step"] .process-dot-num { color: #137fec; }

  .process-track {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 86%;
    padding: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .process-track::-webkit-scrollbar { display: none; }

  /* Panels a little narrower than the card, so the next phase peeks in */
  .process-col {
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
  /* The last phase lines up with the right edge, the previous one peeking in */
  .process-col:last-child { scroll-snap-align: end; }

  .process-head,
  .process-body { padding: 0 24px; }

  /* Panels that are not in view step back */
  .process-head,
  .process-body { transition: opacity 0.3s; }
  .process-col:not(.is-active) .process-head,
  .process-col:not(.is-active) .process-body { opacity: 0.35; }
}