/* Services page — section styles */

.services-layout {
  position: relative;
  /* Safety net for the full-bleed process graphic below — its pipe ends
     intentionally run past the viewport edges (see .svc-process__stage),
     this just stops that from ever creating a horizontal scrollbar. */
  overflow-x: hidden;
}

/* Section backgrounds — tonal progression down the page */

.services-section {
  position: relative;
}

.services-section--base {
  background: var(--color-bg-base);
}

.services-section--mid {
  background: var(--color-bg-mid);
}

.services-section--raised {
  background: var(--color-bg-raised);
}

/* 01 — Thesis / Hero
   Visual target: Services Hero.dc.html (Claude Design project
   6c4b81a4-9541-40f4-a12a-7718aae91a85) — pipe/blockage graphic colours
   and layout proportions transcribed close to the source. Typography is
   mapped onto the site's heading/body fonts rather than the design's own
   (Archivo), per the sitewide 4-font system; the nav is the site's real
   .site-nav, not the standalone mockup nav baked into the design's
   preview. Uses .page-intro from components.css for nav-clearing top
   padding. */

.services-hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  background: radial-gradient(120% 90% at 82% 18%, #eef1f6 0%, #f3f4f7 55%, #eef0f4 100%);
}

.services-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--space-8);
  padding-left: 80px;
}

.services-hero__copy {
  max-width: 640px;
}

.services-hero h1 {
  max-width: none;
  font-size: clamp(2.125rem, 4.4vw, 3.75rem);
  line-height: 1.03;
  letter-spacing: -0.02em;
  text-wrap: balance;
  margin-top: var(--space-4);
}

.services-hero__graphic {
  position: relative;
  width: 100%;
}

.services-hero__graphic svg {
  width: 100%;
  height: auto;
  max-height: 72vh;
  display: block;
  overflow: visible;
}

/* Blockage ring pulse + release flash — js/services-hero.js adds/removes
   the flash circles; the ring pulses continuously via CSS alone. */

@keyframes services-hero-pulse {
  0% { transform: scale(0.6); opacity: 0.5; }
  70% { opacity: 0; }
  100% { transform: scale(1.7); opacity: 0; }
}

@keyframes services-hero-flash {
  0% { transform: scale(0.4); opacity: 0.9; }
  100% { transform: scale(2.6); opacity: 0; }
}

#svcBlockRing {
  transform-box: fill-box;
  transform-origin: center;
  animation: services-hero-pulse 2.2s ease-out infinite;
}

.services-hero__flash {
  transform-box: fill-box;
  transform-origin: center;
  animation: services-hero-flash 0.7s ease-out forwards;
}

@media (prefers-reduced-motion: reduce) {
  #svcBlockRing {
    animation: none;
  }
}

@media (max-width: 880px) {
  .services-hero__grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
    padding-left: 0;
  }

  .services-hero__graphic {
    order: 2;
  }
}

@media (max-width: 720px) {
  .services-hero h1 {
    font-size: var(--text-xl);
  }
}

/* 03 — Impact
   Visual target: Services Impact Section.dc.html — two-column beat
   (copy + team photo) sitting between the process pipeline and the
   "open to new work" enquiry strip. Same grid proportions as
   .services-hero__grid so the two-column beats on this page read as
   one family. */

.svc-impact {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--space-8);
}

.svc-impact__copy {
  max-width: 560px;
}

.svc-impact__para {
  margin-top: var(--space-5);
  font-size: var(--text-md);
  line-height: 1.65;
  color: var(--color-grey-mid);
  max-width: 56ch;
}

.svc-impact__media {
  position: relative;
}

.svc-impact__bar {
  height: 6px;
  background: var(--color-orange);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

.svc-impact__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  box-shadow: 0 34px 60px -30px rgba(20, 22, 28, 0.35);
}

@media (max-width: 880px) {
  .svc-impact {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .svc-impact__copy {
    max-width: none;
  }
}

/* 02 — Process flow
   Five-stage zigzag pipeline (Extract/Transform/Normalise/Load/Insights).
   Node/card positions are percentages of the 1440x700 source graphic, so
   the whole thing scales as a unit down to ~900px; below that the graphic
   gives way to .svc-process__list, a plain stacked list — the absolute
   positions plus fixed-ish card text stop being legible much narrower
   than that. */

.svc-process__header {
  display: flex;
  align-items: center;
}

.svc-process__header-copy {
  max-width: 900px;
}

.svc-process__header h2 {
  text-wrap: balance;
}

/* Heading scaled up to fill the width the old side-by-side lead paragraph
   used to occupy (see removed copy, folded into the CTA at the foot of
   the page instead) — stays left-aligned, just larger. */
.svc-process__heading {
  font-size: clamp(2.25rem, 4.6vw, 3.75rem);
  max-width: 32ch;
}

.svc-process__kicker {
  margin: var(--space-5) 0 0;
  font-family: var(--font-cta);
  font-weight: 600;
  font-size: var(--text-md);
  color: var(--color-text);
}

/* The floating nav pill is ~84px tall including its top offset; the
   section's shared mobile padding (var(--space-8) = 64px) leaves the
   bigger heading only ~5px of clearance the instant this section's top
   edge crosses the viewport top during scroll. Scoped to this header only
   so it doesn't touch the shared section padding used elsewhere. */
@media (max-width: 720px) {
  .svc-process__header {
    padding-top: var(--space-7);
  }
}

/* Full-bleed: escapes .wrap's max-width entirely (the classic 100vw +
   negative-margin breakout) so the graphic spans the viewport, with the
   pipe's horizontal ends running past both screen edges — see the -200/
   1640 endpoints on the path itself, well outside its own 0-1440 viewBox. */
.svc-process__stage {
  position: relative;
  width: 90vw;
  max-height: 78vh;
  left: 50%;
  margin-left: -45vw;
  aspect-ratio: 1440 / 560;
  margin-top: var(--space-8);
  /* Query container for the card text below — see the comment on
     .svc-process__card-eyebrow for why this replaced vw units. */
  container-type: inline-size;
}

.svc-process__pipe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.svc-process__stem {
  position: absolute;
  width: 2px;
  background: #c3d1ea;
  transform: translateX(-50%);
  z-index: 1;
}

/* Transform/Load's stems run sideways (card floats to the left of its
   node rather than above/below it) — same line, rotated axis. */
.svc-process__stem--h {
  width: auto;
  height: 2px;
  transform: translateY(-50%);
}

.svc-process__node {
  position: absolute;
  width: 2.917%;
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  border-radius: 26%;
  background: #0A0B0D;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 18px rgba(10, 11, 13, 0.35);
  z-index: 2;
}

.svc-process__node svg {
  width: 48%;
  height: 48%;
}

.svc-process__card {
  position: absolute;
  width: 16.389%;
  min-width: 168px;
  box-sizing: border-box;
  padding: clamp(14px, 1.25cqw, 18px) clamp(16px, 1.389cqw, 20px);
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: 14px;
  box-shadow: 0 12px 30px -6px rgba(16, 24, 40, 0.1);
  transform: translateX(-50%);
  z-index: 2;
}

/* Transform/Load cards float to the left of their node rather than
   centred above/below it — `left` is a literal left edge here, only the
   vertical axis is centred. */
.svc-process__card--dip {
  transform: translateY(-50%);
}

/* cqw, not vw — the stage's rendered width is NOT reliably the viewport
   width (it's 90vw, further reduced whenever the max-height cap above
   binds), so vw drifted out of sync with the node/stem geometry, which is
   sized in % of this same stage and therefore always tracks its *actual*
   width. cqw (relative to the container-type: inline-size on
   .svc-process__stage) tracks that actual width exactly, however it was
   derived, which is what actually keeps the card in sync with its stem
   at every size — the earlier vw version only happened to work when the
   stage was still exactly 100vw. */
.svc-process__card-eyebrow {
  font-family: var(--font-detail);
  font-weight: 300;
  font-size: clamp(9px, 0.764cqw, 11px);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-grey-mid);
}

.svc-process__card-heading {
  margin-top: 4px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(17px, 1.458cqw, 21px);
  color: var(--color-text);
}

.svc-process__card-copy {
  margin: 6px 0 0;
  font-size: clamp(11px, 0.972cqw, 14px);
  line-height: 1.4;
  color: var(--color-grey-mid);
}

.svc-process__list {
  display: none;
  list-style: none;
  margin: var(--space-8) 0 0;
  padding: 0;
  border-top: 1px solid var(--color-line);
}

.svc-process__list-item {
  padding: var(--space-6) 0;
  border-bottom: 1px solid var(--color-line);
}

.svc-process__list-eyebrow {
  display: block;
  font-family: var(--font-detail);
  font-weight: 300;
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-grey-mid);
}

.svc-process__list-heading {
  margin: 6px 0 0;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-lg);
  color: var(--color-text);
}

.svc-process__list-copy {
  margin: var(--space-2) 0 0;
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--color-grey-mid);
  max-width: 56ch;
}

@media (max-width: 900px) {
  .svc-process__header {
    align-items: flex-start;
  }
}

/* Graphic layout needs real pixels to keep each card clear of its node —
   below this the container is too narrow for the card's fixed-size text
   to fit its vertical budget, so fall back to the plain list instead. */
@media (max-width: 1200px) {
  .svc-process__stage {
    display: none;
  }

  .svc-process__list {
    display: block;
  }
}