/* ===========================================================================
   SERVICES — /services (src/services.js)

   Rebuilt from a Tailwind-CDN reference. The CSP allows neither the CDN script
   nor an inline <style>, so the same look is carried on the site's own tokens.
   The palette already matched: cyber-cyan is --color-tertiary and
   primary-container is --color-primary, and the three fonts are already
   --font-headline / --font-body / --font-label.

   Spacing is deliberately not re-invented here. Every vertical gap is
   --section-y or --section-y-tight, every grid gap is --grid-gap, and the rail
   is --content-max / --content-pad — the same values the rest of the site
   uses, so the rhythm carries across a page boundary.

   Everything is scoped under .svc so none of it can leak.
   =========================================================================== */

.svc {
  --svc-void: #060d17;
  --svc-deep: #020e21;
  --svc-band: var(--color-primary);
  --svc-card: #0e1c2f;
  --svc-card-hi: #132033;
  --svc-edge: rgb(var(--color-tertiary-rgb) / 0.15);
  --svc-hair: rgb(var(--color-secondary-rgb) / 0.07);

  padding: var(--section-y) 0;
  color: var(--ink);
}

.svc-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--content-pad);
}

/* Alternating grounds, one tonal step apart. */
.svc-band {
  background: var(--svc-band);
}
.svc-deep {
  background: var(--svc-deep);
}

/* --- Shared atoms ---------------------------------------------------------- */

.svc-text--cyan {
  color: var(--accent);
}
.svc-text--ok {
  color: var(--status-ok);
}
.svc-text--warn {
  color: var(--status-warn);
}
.svc-text--bad {
  color: var(--status-bad);
}
.svc-text--info {
  color: var(--status-info);
}

.svc-icon {
  width: 1.05rem;
  height: 1.05rem;
  flex: none;
}
.svc-icon--lg {
  width: 1.4rem;
  height: 1.4rem;
}
.svc-icon--cyan {
  color: var(--accent);
}
.svc-icon--ok {
  color: var(--status-ok);
}
.svc-icon--warn {
  color: var(--status-warn);
}
.svc-icon--bad {
  color: var(--status-bad);
}
.svc-icon--info {
  color: var(--status-info);
}

.svc-dot {
  width: 0.45rem;
  height: 0.45rem;
  flex: none;
  border-radius: 50%;
  background: var(--accent);
}
/* Stated rather than inherited from the base, so the set is complete and a
   change to the default cannot silently retune the ones written as cyan. */
.svc-dot--cyan {
  background: var(--accent);
}
.svc-dot--ok {
  background: var(--status-ok);
}
.svc-dot--warn {
  background: var(--status-warn);
}
.svc-dot--bad {
  background: var(--status-bad);
}
.svc-dot--info {
  background: var(--status-info);
}
.svc-dot--live {
  animation: svc-live 2.4s ease-in-out infinite;
}
@keyframes svc-live {
  50% {
    opacity: 0.25;
  }
}

/* The monospace register: kickers, chips, codes, spec labels. */
.svc-kicker,
.svc-eyebrow,
.svc-chip,
.svc-card-phase,
.svc-card-label,
.svc-metric-label,
.svc-tier-num,
.svc-tier-spec dt,
.svc-tier-foot,
.svc-phase-takes {
  font-family: var(--font-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.svc-kicker {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.6rem;
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 700;
}

/* --- Buttons --------------------------------------------------------------- */

.svc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 50px;
  padding: 0 1.5rem;
  border: 1px solid transparent;
  border-radius: 10px;
  font-size: 0.95rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color 0.2s,
    border-color 0.2s,
    color 0.2s,
    transform 0.2s,
    box-shadow 0.2s;
}
.svc-btn--primary {
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: 0 0 24px rgb(var(--color-tertiary-rgb) / 0.35);
}
.svc-btn--primary:hover {
  background: var(--color-secondary);
  color: var(--on-accent);
  transform: translateY(-1px);
}
.svc-btn--ghost {
  background: rgb(var(--color-secondary-rgb) / 0.05);
  border-color: var(--svc-edge);
  color: var(--ink);
}
.svc-btn--ghost:hover {
  background: var(--svc-card-hi);
  color: var(--accent);
}
.svc-btn--block {
  width: 100%;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 700;
}
.svc-btn:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

.svc-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex: none;
  color: var(--accent);
  font-size: 0.92rem;
  font-weight: 600;
  text-decoration: none;
}
.svc-link:hover {
  color: var(--color-secondary);
}
/* The arrow nudges on hover — the one bit of motion on an otherwise still
   link, so it reads as a direction rather than decoration. */
.svc-arrow {
  transition: transform 0.2s ease;
}
.svc-link:hover .svc-arrow,
.svc-card-foot a:hover .svc-arrow {
  transform: translateX(3px);
}

/* --- Section heads --------------------------------------------------------- */

.svc-head {
  max-width: 62ch;
  margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem);
}
.svc-head h2 {
  margin: 0 0 0.6rem;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  line-height: 1.2;
}
.svc-head p {
  margin: 0;
  color: var(--muted);
}
.svc-head--split {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 2rem;
  max-width: none;
}
.svc-head--split > div {
  max-width: 62ch;
}

/* ===========================================================================
   HERO
   =========================================================================== */

.svc-hero {
  position: relative;
  overflow: hidden;
  background: var(--svc-void);
  border-bottom: 1px solid var(--svc-edge);
}

/* Grid mesh plus two coloured washes. All CSS — the reference put this in an
   inline style attribute, which build.mjs rejects. */
.svc-hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 75% 20%, rgb(var(--color-tertiary-rgb) / 0.2), transparent 50%),
    radial-gradient(circle at 15% 85%, rgb(59 130 246 / 0.16), transparent 45%),
    linear-gradient(rgb(var(--color-tertiary-rgb) / 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgb(var(--color-tertiary-rgb) / 0.05) 1px, transparent 1px);
  background-size:
    100% 100%,
    100% 100%,
    48px 48px,
    48px 48px;
}

.svc-hero-lead {
  max-width: 54rem;
}

.svc-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 1.25rem;
  padding: 0.35rem 0.8rem;
  border-radius: 6px;
  background: rgb(29 42 62 / 0.8);
  border: 1px solid var(--svc-edge);
  color: var(--accent);
  font-size: 0.68rem;
  font-weight: 700;
}

.svc-hero h1 {
  margin: 0 0 1.1rem;
  font-size: clamp(2.1rem, 5.4vw, 4rem);
  line-height: 1.08;
  letter-spacing: -0.035em;
}
/* Gradient text needs a colour first: without background-clip support,
   transparent text would vanish entirely. */
.svc-hero-accent {
  color: var(--accent);
}
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .svc-hero-accent {
    background: linear-gradient(90deg, var(--accent), var(--tertiary-300), var(--primary-200));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

.svc-lede {
  max-width: 68ch;
  margin: 0 0 2rem;
  color: var(--muted);
  font-size: clamp(1rem, 1.4vw, 1.12rem);
  line-height: 1.7;
}

.svc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

/* --- Assurance metrics ----------------------------------------------------- */

.svc-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--grid-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.svc-metric {
  padding: clamp(1rem, 2vw, 1.4rem);
  border-radius: 14px;
  background: rgb(14 28 47 / 0.7);
  border: 1px solid var(--svc-hair);
  transition:
    border-color 0.2s,
    transform 0.2s;
}
.svc-metric:hover {
  border-color: var(--svc-edge);
  transform: translateY(-2px);
}
.svc-metric-head {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0 0 0.55rem;
}
.svc-metric-label {
  font-size: 0.64rem;
  font-weight: 700;
}
.svc-metric-value {
  margin: 0 0 0.3rem;
  font-family: var(--font-headline);
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  font-weight: 700;
}
.svc-metric-note {
  margin: 0;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.45;
}

/* ===========================================================================
   ENGAGEMENT CARDS
   =========================================================================== */

.svc-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--grid-gap);
}

.svc-card {
  display: flex;
  flex-direction: column;
  padding: clamp(1.35rem, 2.6vw, 2rem);
  border-radius: 16px;
  background: rgb(14 28 47 / 0.8);
  border: 1px solid var(--svc-hair);
  transition:
    background-color 0.25s,
    border-color 0.25s,
    transform 0.25s;
}
.svc-card:hover {
  background: var(--svc-card-hi);
  border-color: var(--svc-edge);
  transform: translateY(-3px);
}

.svc-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.svc-chip {
  padding: 0.28rem 0.65rem;
  border-radius: 6px;
  background: rgb(var(--color-tertiary-rgb) / 0.12);
  color: var(--accent);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: none;
}
.svc-card-phase {
  color: var(--muted);
  font-size: 0.62rem;
  white-space: nowrap;
}

.svc-card h3 {
  margin: 0 0 0.6rem;
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  transition: color 0.25s;
}
.svc-card:hover h3 {
  color: var(--accent);
}

.svc-card-body {
  margin: 0 0 1.35rem;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.65;
}

.svc-card-label {
  margin: 0 0 0.75rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--svc-hair);
  color: var(--tertiary-300);
  font-size: 0.62rem;
  font-weight: 700;
}

/* Shared by the card deliverables and by both scope columns. */
.svc-gives {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.svc-gives li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.88rem;
  line-height: 1.5;
}
.svc-gives .svc-icon {
  margin-top: 0.12em;
}

/* Pinned to the foot, so a row of cards lines up on its footer however long
   the copy above runs. */
.svc-card-foot {
  margin: auto 0 0;
  padding-top: 1.35rem;
}
.svc-card-foot a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--accent);
  font-family: var(--font-label);
  font-size: 0.72rem;
  font-weight: 700;
  text-decoration: none;
}
.svc-card-foot a:hover {
  color: var(--color-secondary);
}

/* ===========================================================================
   PHASES
   =========================================================================== */

.svc-phases {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--grid-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* The trail behind the numbers, so four cards read as one sequence. Drawn on
   the list rather than per card, so it never doubles up in a gap. */
.svc-phases::before {
  content: '';
  position: absolute;
  top: 3.1rem;
  left: 8%;
  right: 8%;
  height: 1px;
  background: linear-gradient(
    90deg,
    rgb(var(--color-tertiary-rgb) / 0.5),
    rgb(59 130 246 / 0.4),
    rgb(16 185 129 / 0.5)
  );
  pointer-events: none;
}

.svc-phase {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  padding: clamp(1.15rem, 2.2vw, 1.6rem);
  border-radius: 14px;
  background: var(--svc-card);
  border: 1px solid var(--svc-hair);
  transition:
    border-color 0.2s,
    transform 0.2s;
}
.svc-phase:hover {
  border-color: var(--svc-edge);
  transform: translateY(-2px);
}

.svc-phase-num {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: 1.1rem;
  border-radius: 10px;
  background: var(--neutral-800);
  border: 1px solid var(--svc-edge);
  color: var(--accent);
  font-family: var(--font-label);
  font-size: 1rem;
  font-weight: 700;
}
.svc-phase--last .svc-phase-num {
  color: var(--status-ok);
  border-color: rgb(16 185 129 / 0.35);
}

.svc-phase h3 {
  margin: 0 0 0.45rem;
  font-size: 1.1rem;
}
.svc-phase p {
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.6;
}
.svc-phase-takes {
  margin: auto 0 0;
  padding-top: 1.1rem;
  color: var(--tertiary-300);
  font-size: 0.62rem;
  font-weight: 700;
}
.svc-phase--last .svc-phase-takes {
  color: var(--status-ok);
}

/* ===========================================================================
   DEPLOYMENT TIERS
   =========================================================================== */

.svc-tiers {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--grid-gap);
}

.svc-tier {
  display: flex;
  flex-direction: column;
  padding: clamp(1.15rem, 2.2vw, 1.6rem);
  border-radius: 14px;
  background: var(--svc-card);
  border: 1px solid var(--svc-hair);
  transition:
    border-color 0.2s,
    transform 0.2s;
}
.svc-tier:hover {
  border-color: var(--svc-edge);
  transform: translateY(-2px);
}

.svc-tier-num {
  padding: 0.2rem 0.5rem;
  border-radius: 5px;
  background: var(--svc-card-hi);
  color: var(--accent);
  font-size: 0.6rem;
  font-weight: 700;
}
.svc-tier h3 {
  margin: 0 0 1.1rem;
  font-size: 1.15rem;
}

.svc-tier-spec {
  margin: 0;
}
.svc-tier-spec dt {
  margin: 0 0 0.15rem;
  color: var(--muted);
  font-size: 0.58rem;
  font-weight: 600;
}
.svc-tier-spec dt + dd {
  margin: 0 0 0.9rem;
}
.svc-tier-spec dd {
  margin: 0;
  font-size: 0.87rem;
  line-height: 1.45;
}

.svc-tier-foot {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: auto 0 0;
  padding-top: 1.1rem;
  color: var(--muted);
  font-size: 0.6rem;
  font-weight: 600;
}

/* ===========================================================================
   SCOPE
   =========================================================================== */

.svc-scope {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--grid-gap);
}

.svc-scope-col {
  padding: clamp(1.35rem, 2.6vw, 2rem);
  border-radius: 16px;
  background: var(--svc-card);
  border: 1px solid var(--svc-hair);
}

.svc-scope-head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0 0 1.35rem;
  font-family: var(--font-headline);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: none;
}
.svc-scope-mark {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  flex: none;
  border-radius: 7px;
}
.svc-scope-mark--in {
  background: rgb(16 185 129 / 0.18);
  color: var(--status-ok);
}
.svc-scope-mark--out {
  background: rgb(245 158 11 / 0.18);
  color: var(--status-warn);
}
.svc-scope-col .svc-gives li {
  font-size: 0.92rem;
}

/* ===========================================================================
   RESPONSIVE
   Column counts step down together so the gaps stay on the same rhythm.
   =========================================================================== */

@media (max-width: 1100px) {
  .svc-metrics,
  .svc-tiers {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* Two rows of phases would leave the trail running through open space. */
  .svc-phases {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .svc-phases::before {
    display: none;
  }
}

@media (max-width: 760px) {
  .svc-cards,
  .svc-scope {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 560px) {
  .svc-metrics,
  .svc-tiers,
  .svc-phases {
    grid-template-columns: minmax(0, 1fr);
  }
  .svc-actions .svc-btn {
    width: 100%;
  }
  /* Stacked, the duration and the phase label crowd each other. */
  .svc-card-top {
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  .svc-head--split {
    align-items: flex-start;
  }
  .svc-eyebrow {
    white-space: normal;
  }
}

@media (min-width: 1600px) {
  .svc-card-body,
  .svc-phase p {
    font-size: 0.95rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .svc-dot--live {
    animation: none;
  }
  .svc-card:hover,
  .svc-metric:hover,
  .svc-phase:hover,
  .svc-tier:hover {
    transform: none;
  }
}