/* ───────────────────────────────────────────────────────────────────────────
   services.css — ONLY the few components the homepage doesn't already have.
   Everything structural is reused from the homepage (styles.css):
     • section headers  → .rule + .section-meta-row + .t-meta
     • hero / CTA        → .two-col-head
     • numbered blocks   → .steps / .step  (accent .num comes from styles.css)
     • the 3 services    → .pillars / .pillar
     • spacing rhythm    → .sp-120
   Accent is inherited from the homepage's own components (accent step numbers,
   pillar graphics). Nothing here re-themes the site.
   All values use the live homepage tokens.
   ─────────────────────────────────────────────────────────────────────────── */

/* Spacing helpers the homepage doesn't already define (it ships .sp-120) */
.sp-48 { height: var(--space-12); }
.sp-80 { height: var(--space-20); }

/* ── Breadcrumb (homepage has none) — same language as .t-meta ── */
.breadcrumb {
  display: flex; gap: var(--space-3); align-items: baseline;
  padding: var(--space-6) 0 0;
}
/* typography comes from .t-meta; only breadcrumb-specific rules here */
.breadcrumb a { text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb .sep { color: var(--color-text); }

/* ── Page-load entrance, matching the homepage's own (.wc-nav already
      animates via styles.css) — breadcrumb + hero content fade/slide in. ── */
@media (prefers-reduced-motion: no-preference) {
  .breadcrumb {
    animation: loadDown 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: 90ms;
  }
  .breadcrumb + .two-col-head .left > *,
  .breadcrumb + .two-col-head .right > * {
    animation: loadUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  /* The H1 is the LCP candidate on these pages — it must paint immediately
     rather than sit at opacity:0 while the entrance animation runs, or
     Lighthouse/Chrome can fail to register an LCP at all (NO_LCP) under
     throttled conditions. Slide it in via transform only, opacity stays 1. */
  .breadcrumb + .two-col-head .left > *:nth-child(1) {
    opacity: 1;
    animation-name: loadUpOpaque;
    animation-delay: 150ms;
  }
  .breadcrumb + .two-col-head .left > *:nth-child(2) { animation-delay: 250ms; }
  .breadcrumb + .two-col-head .left > *:nth-child(3) { animation-delay: 350ms; }
  .breadcrumb + .two-col-head .right > *:nth-child(1) { animation-delay: 250ms; }
  .breadcrumb + .two-col-head .right > *:nth-child(2) { animation-delay: 350ms; }
  @keyframes loadUpOpaque {
    from { transform: translateY(20px); }
    to   { transform: none; }
  }

  /* The first section below the hero often sits inside the initial viewport,
     so scroll-fx.js deliberately skips it (it assumes load-in covers anything
     already visible) — give it one explicitly, so it isn't left static. */
  .breadcrumb + .two-col-head + .sp-120 + div {
    animation: loadUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: 450ms;
  }
  .breadcrumb + .two-col-head + .sp-120 + div + * {
    animation: loadUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: 550ms;
  }
  /* Detail pages have a spacer between the section header and the actual
     card grid — animate the real content, not the empty spacer. */
  .breadcrumb + .two-col-head + .sp-120 + div + .sp-48 + * {
    animation: loadUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: 650ms;
  }
}

/* ── Detail-page hero — homepage's .two-col-head grid, title+intro stacked
      left, service illustration (same pillar-gfx used elsewhere) on the right ── */
.detail-hero .left p {
  max-width: 640px; color: var(--color-text);
  font-size: var(--fs-body-lg); line-height: 1.5;
}
.detail-hero .right { display: flex; align-items: center; justify-content: center; align-self: center; }
.detail-hero .gfx svg { display: block; width: auto; height: clamp(260px, 20vw, 480px); }
@media (max-width: 900px) {
  .detail-hero .right { justify-content: flex-start; align-self: start; margin-top: var(--space-6); }
}

/* ── Services as numbered rows (overview) — matches the wireframe:
      Number · [Title + tag chips] · Description · Arrow. Whole row links to detail. ── */
/* No top border — the "01 — What we do" section bar above provides the top rule */
.service-row {
  display: grid;
  grid-template-columns: 290px minmax(190px, 0.9fr) minmax(0, 1.2fr) 48px;
  gap: var(--space-12);
  align-items: center;
  padding: var(--space-12) 0;
  border-bottom: 1px solid var(--color-border);
  text-decoration: none;
}
.service-row:last-child { border-bottom: none; }
/* Illustration in place of the number (full colour, not muted) */
.service-row .gfx { display: flex; align-items: center; justify-content: center; }
.service-row .gfx svg { height: min(18vw, 220px); width: auto; }
.s-name {
  font-family: var(--font-serif); font-weight: 400;
  font-size: var(--fs-heading-02); line-height: 1.0;
  letter-spacing: -0.02em; color: var(--color-text);
  font-optical-sizing: auto; font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 1;
}
.s-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-5); }
.s-tag {
  font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--color-text);
  border: 1px solid var(--color-border); border-radius: 999px;
  padding: var(--space-2) var(--space-3); white-space: nowrap;
}
.s-desc {
  font-family: var(--font-sans); font-size: var(--fs-body-sm);
  line-height: 1.55; color: var(--color-text); padding-top: var(--space-2);
}
/* Arrow as a Lucide icon button, matching the pill button style */
.s-arrow { justify-self: end; align-self: center; }
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px;
  border: 1px solid var(--color-text); border-radius: 999px;
  color: var(--color-text);
  transition: background 0.15s ease, color 0.15s ease;
}
.icon-btn svg { width: 1.15em; height: 1.15em; display: block; }
.service-row:hover .icon-btn { background: var(--color-accent); border-color: var(--color-accent); color: #FFFFFF; }

/* Stack early — before the 4-column row gets cramped. Illustration on top. */
@media (max-width: 1180px) {
  .service-row {
    grid-template-columns: 1fr;
    gap: var(--space-6);
    align-items: start;
    padding: var(--space-11, 44px) 0;
  }
  .service-row .gfx { justify-self: start; margin-bottom: var(--space-2); }
  .service-row .gfx svg { height: min(22vw, 180px); }
  .s-head, .s-desc { grid-column: 1; }
  .s-desc { padding-top: 0; max-width: 680px; }
  .s-arrow { display: none; }
}
@media (max-width: 600px) {
  .service-row .gfx svg { height: min(34vw, 150px); }
}

/* ── "Other ways we help" — simple side-by-side links: illustration + title only ── */
.other-services { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-8); }
.other-service {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: var(--space-6); text-decoration: none;
  padding: var(--space-10) var(--space-8);
  border: 1px solid var(--color-border); border-radius: 16px;
  transition: border-color .2s ease;
}
.other-service:hover { border-color: var(--color-text); }
.other-service .gfx { display: flex; align-items: center; justify-content: center; }
.other-service .gfx svg { height: min(16vw, 160px); width: auto; }
.other-service .s-name { margin: 0; font-size: var(--fs-heading-04); }
@media (max-width: 600px) {
  .other-services { grid-template-columns: 1fr; }
  .other-service .gfx svg { height: min(34vw, 140px); }
}

/* ── "What's included" icon in place of the step number — avoids doubling up
      with the numbered steps in "How it runs" below ── */
.step-icon { color: var(--color-accent); line-height: 1; }
.step-icon-svg { width: 48px; height: 48px; display: block; }

/* ── "How it runs" animated rail — per design_handoff_process_timeline spec.
      Fonts/colours/spacing below stay ours (unchanged); only the node/connector
      animation behaviour is reproduced from the handoff. Driven by rail-timeline.js. ── */
.steps.steps-rail { border-top: none; }
/* Rail cells span the full column edge-to-edge (no padding/border/gap) so the
   connector is a single continuous line — text content keeps its own inset below. */
.steps.steps-rail .step { padding: 0; position: relative; }
.steps.steps-rail .step + .step { border-left: none; padding-left: 0; }
/* Rail row is lifted out of flow and pinned (via JS) to the vertical centre
   of each step's number, so the line runs through the numbers, not above them. */
.rail-cell { display: flex; align-items: center; height: 18px; position: absolute; left: 0; right: 0; top: 0; pointer-events: none; }
.rail-node { display: none; }
.rail-connector {
  position: relative; flex: 1 1 auto; height: 2px;
  background: transparent;
}
.rail-fill {
  position: absolute; left: 0; top: 0; height: 2px; width: 0;
  background: var(--color-accent);
  transition: width .18s linear;
}
.step-content {
  display: flex; flex-direction: column; gap: var(--space-4);
  padding: var(--space-7) var(--space-10) var(--space-9) 0;
  opacity: 0.28;
  transition: opacity .5s ease;
}
.step-content.is-reached { opacity: 1; }
.steps.steps-rail .step:last-child .step-content { padding-right: 0; }
.steps.steps-rail .num { color: var(--color-text); transition: color .3s ease; align-self: flex-start; }
.steps.steps-rail .num.is-active { color: var(--color-accent); }
/* Stacked (matches the homepage's own .steps breakpoint) — drop the rail
   entirely and show plain, fully-visible steps rather than an animation
   that no longer reads as a horizontal sequence. */
@media (max-width: 900px) {
  .steps.steps-rail .rail-cell { display: none; }
  .steps.steps-rail .step-content { opacity: 1 !important; padding-left: 0; }
}

/* ── Step meta ("Week 1–2" etc.) as a pill — same chip recipe as .s-tag ── */
.step-meta-pill {
  align-self: flex-start;
  margin-top: var(--space-2);
  font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--color-text);
  border: 1px solid var(--color-border); border-radius: 999px;
  padding: var(--space-2) var(--space-4); white-space: nowrap;
}

/* ── 3-up variant of the homepage .steps grid (What's included = 6 items) —
      each item as a card, same recipe as the homepage's .assess panel ── */
.steps.cols-3 {
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  border-top: none;
}
.steps.cols-3 .step {
  border: 1px solid var(--color-border);
  background: var(--color-surface-dark);
  border-radius: 16px;
  padding: var(--space-8);
}
.steps.cols-3 .step:nth-child(3n+1) { padding-left: var(--space-8); }
.steps.cols-3 .step:nth-child(n+4) { padding-top: var(--space-8); }
@media (max-width: 900px) {
  .steps.cols-3 { grid-template-columns: 1fr; }
  .steps.cols-3 .step:nth-child(n+4) { padding-top: var(--space-8); }
}

/* ── AI Readiness assessment page ── */
.readiness-hero-right {
  display: flex; flex-direction: column; gap: var(--space-6);
  border: 1px solid var(--color-border); border-radius: 16px;
  padding: var(--space-8); background: var(--color-surface-dark);
  align-self: start;
}
.readiness-what-list { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.readiness-what-list li { display: grid; grid-template-columns: 28px 1fr; gap: var(--space-3); align-items: baseline; }
.readiness-what-list .n { font-family: var(--font-mono); font-size: var(--fs-label); color: var(--color-text); opacity: .5; }
.readiness-what-list .t { font-family: var(--font-sans); font-size: var(--fs-body-sm); line-height: 1.5; color: var(--color-text); }
.readiness-credit {
  text-align: right; font-family: var(--font-mono); font-size: var(--fs-label);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text); opacity: .5;
}
@media (max-width: 900px) {
  .readiness-hero-right { margin-top: var(--space-8); }
}

/* Question progress bar: dimension label (left) + step dots (right) */
.assess-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-7); flex-wrap: wrap; gap: var(--space-4); }
.assess-bar-meta { display: flex; gap: var(--space-3); align-items: baseline; }
.assess-bar .step-dots { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.assess-bar .dot { width: 20px; height: 4px; background: var(--color-border); }
.assess-bar .dot.active, .assess-bar .dot.done { background: var(--color-text); }
.readiness-nav { display: flex; justify-content: space-between; align-items: center; margin-top: var(--space-8); }

/* Result: archetype blurb (gfx + headline reuse the homepage's own .assess-result recipe) */
.readiness-result-blurb { max-width: 480px; font-size: var(--fs-body-lg); line-height: 1.5; color: var(--color-text); }

/* Dimension score bars */
.dim-bar-row { display: flex; align-items: center; gap: var(--space-5); padding: var(--space-5) 0 var(--space-3); border-top: 1px solid var(--color-border); }
.dim-bar-row .name { flex: 0 0 140px; font-family: var(--font-sans); font-weight: 500; color: var(--color-text); }
.dim-bar { display: flex; gap: var(--space-2); flex: 1; }
.dim-bar .cell { flex: 1; height: 8px; background: var(--color-border); border-radius: 999px; }
.dim-bar .cell.filled { background: var(--color-accent); }
.dim-bar-row .score { flex: 0 0 48px; text-align: right; font-family: var(--font-mono); font-size: var(--fs-label); color: var(--color-text); }
.dim-commentary { padding: 0 0 var(--space-5); font-family: var(--font-sans); font-size: var(--fs-body-sm); color: var(--color-text); opacity: .7; }
@media (max-width: 900px) {
  .dim-bar-row .name { flex-basis: 100px; }
}

/* ── Image placeholder (service pages leave a slot; homepage has no hero image) ── */
.ph-box {
  position: relative; width: 100%;
  border: 1px solid var(--color-border);
  background: var(--color-surface-dark); overflow: hidden;
}
.ph-box-x { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--color-border); }
.ph-box-label {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  font-family: var(--font-mono); font-size: var(--fs-label);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-text); opacity: 0.4;
}

/* ── Related work — 2-up, homepage tokens ── */
.work-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: var(--space-14) var(--space-12);
  border-top: 1px solid var(--color-border); padding-top: var(--space-9);
}
.work-card { text-decoration: none; display: block; color: inherit; }
.work-card .wc-thumb { margin-bottom: var(--space-6); }
.work-card .wc-meta {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-bottom: var(--space-3); border-bottom: 1px solid var(--color-border); margin-bottom: var(--space-4);
}
.work-card .wc-tag, .work-card .wc-year {
  font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.08em; text-transform: uppercase;
}
.work-card .wc-tag { color: var(--color-accent); }
.work-card .wc-year { color: var(--color-text); }
.work-card .wc-title {
  font-family: var(--font-serif); font-weight: 400; font-size: var(--fs-heading-04);
  line-height: 1.1; letter-spacing: -0.02em; color: var(--color-text);
}
.work-card .wc-desc {
  font-family: var(--font-sans); font-size: var(--fs-body-sm); line-height: 1.5;
  color: var(--color-text); margin-top: var(--space-3);
}

@media (max-width: 900px) {
  .work-grid { grid-template-columns: 1fr; }
}