/* =========================================================
   SERVICES — the four landing pages, and the hub above them.

   These pages exist for the search engine as much as for the
   visitor: one page per thing somebody types into Google.
   They borrow the site's type scale and hairlines and add
   only the four blocks the archive never needed — a card
   grid, a checked list, a stack table and a FAQ.
   ========================================================= */

/* ---------------------------------------------------------
   CARD GRID — the hub, and the "related" block at the foot
   of every service page.
   --------------------------------------------------------- */
.svc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: clamp(1rem, 2vw, 1.8rem);
  margin-top: clamp(2rem, 4vw, 3.5rem);
}

.svc-card {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: clamp(1.4rem, 2.4vw, 2.2rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-raised);
  transition: border-color var(--dur-s) var(--ease),
              transform var(--dur-m) var(--ease);
}
.svc-card:hover { border-color: var(--accent); transform: translateY(-4px); }

/* The discipline colour rides the card, same three as the archive. */
.svc-card[data-disc="ux"]      { --svc: var(--c-ux); }
.svc-card[data-disc="front"]   { --svc: var(--c-front); }
.svc-card[data-disc="graphic"] { --svc: var(--c-graphic); }
.svc-card[data-disc="ai"]      { --svc: var(--accent-warm); }
.svc-card:hover { border-color: var(--svc, var(--accent)); }

.svc-card__n {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--svc, var(--fg-dim));
}
.svc-card__t {
  font-size: clamp(1.35rem, 1rem + 1.1vw, 2rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  font-variation-settings: "wght" 500, "wdth" 98;
}
.svc-card__d { color: var(--fg-dim); font-size: 0.97em; }
.svc-card__go {
  margin-top: auto;
  padding-top: 0.4rem;
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--svc, var(--accent));
}

/* ---------------------------------------------------------
   CHECKED LIST — "what this includes", two columns when there
   is room for two.
   --------------------------------------------------------- */
.svc-checks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 0 clamp(1.5rem, 4vw, 4rem);
  margin-top: var(--stack);
}
.svc-checks li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.85rem;
  align-items: start;
  padding-block: 0.75rem;
  border-top: 1px solid var(--line-soft);
}
.svc-checks li::before {
  content: "↳";
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  line-height: 1.7;
  color: var(--accent);
}
.svc-checks b { font-variation-settings: "wght" 500; }
.svc-checks span { display: block; color: var(--fg-dim); font-size: 0.95em; }

/* ---------------------------------------------------------
   STACK TABLE — tool on the left, what it is used for on the
   right. Scrolls inside itself on a narrow screen.
   --------------------------------------------------------- */
.svc-stack { margin-top: var(--stack); border-top: 1px solid var(--line); }
.svc-stack div {
  display: grid;
  grid-template-columns: minmax(140px, 22%) 1fr;
  gap: 1rem clamp(1rem, 3vw, 3rem);
  padding-block: 1rem;
  border-bottom: 1px solid var(--line-soft);
}
.svc-stack dt {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--fg);
  padding-top: 0.2rem;
}
.svc-stack dd { color: var(--fg-dim); }

/* ---------------------------------------------------------
   PROOF ROW — the projects that back the claim above.
   --------------------------------------------------------- */
.svc-proof {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr));
  gap: clamp(0.8rem, 1.6vw, 1.4rem);
  margin-top: var(--stack);
}
.svc-proof a {
  display: grid;
  gap: 0.55rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color var(--dur-s) var(--ease), background var(--dur-s) var(--ease);
}
.svc-proof a:hover { border-color: var(--accent); background: var(--bg-raised); }
.svc-proof strong { font-variation-settings: "wght" 500; line-height: 1.15; }
.svc-proof span {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--fg-dim);
}

/* ---------------------------------------------------------
   PLAIN FAQ — the accordion from the home page answers the
   questions people actually type. Nothing new needed beyond
   a little room above it.
   --------------------------------------------------------- */
.svc-faq { margin-top: clamp(1.6rem, 3vw, 2.6rem); }

/* A quiet aside for the limits of a claim: says what a thing
   does not do, which is the part that earns the rest. */
.svc-limit {
  margin-top: var(--stack);
  padding: clamp(1.1rem, 2vw, 1.8rem);
  border-left: 2px solid var(--accent-warm);
  background: var(--bg-raised);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.svc-limit h3 {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--accent-warm);
  margin-bottom: 0.7rem;
}
.svc-limit p + p { margin-top: 0.7rem; }

@media (max-width: 700px) {
  .svc-stack div { grid-template-columns: 1fr; gap: 0.25rem; }
}