/* ==========================================================================
   UP AL — Services
   Typography-led, not illustrated: a full-width intro, then a single
   editorial list of services set in a deliberately narrow reading column.
   The remaining width is left quiet on purpose — the section's only
   "visual" is confident type, generous vertical rhythm and the ambient
   glow already behind the whole page, plus a handful of extremely subtle
   accents (a glass wash and a small gradient tick on the open row) that
   never compete with the content itself.

   The step list keeps its own identity — a timeline rail (connecting line
   + numbered nodes) and a single-open accordion — rather than reusing Why
   UP AL's divided-row pattern, so the two numbered lists on the page still
   read as two different things, not a repeated component.
   ========================================================================== */

.services {
  position: relative;
  padding-block: var(--space-10);
  scroll-margin-top: var(--header-height);
  border-top: 1px solid var(--color-border-soft);
  /* Keeps the ambient orb's bleed (it's intentionally positioned half
     outside this section's box) from ever painting into the section
     that follows. */
  overflow: hidden;
  overflow: clip;
}

/* Ambient light source — sits behind the intro + journey content. Content
   is lifted onto its own stack level so it always paints above the orb.
   With no media frame left to carry its own halo, this soft glow is now
   the section's only piece of "lighting" — a quiet backdrop the reading
   column sits on top of, never a shape of its own. */

.services__orb {
  width: 700px;
  height: 700px;
  inset-inline-start: -260px;
  bottom: -220px;
  background: radial-gradient(circle, rgba(158, 207, 247, 0.13), transparent 70%);
  opacity: 0.8;
}

.services__intro,
.services__journey {
  position: relative;
  z-index: 1;
}

/* ---------- Intro ---------- */

.services__intro {
  max-width: 680px;
}

.services__heading {
  font-size: var(--fs-h2);
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-tight);
  color: var(--color-text-primary);
  text-wrap: balance;
  margin-block-end: var(--space-5);
}

.services__lead {
  font-size: var(--fs-lead);
  font-weight: var(--fw-regular);
  line-height: var(--lh-relaxed);
  color: var(--color-text-secondary);
  max-width: 60ch;
}

/* ---------- Journey layout ----------
   A single reading column, deliberately capped well short of the
   container's full width. The unused width isn't filled with anything —
   that quiet margin (and the orb glowing behind the column) is the
   section's entire "visual," in place of a media frame. */

.services__journey {
  margin-block-start: var(--space-9);
}

.services__list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 720px;
}

/* ---------- Step list: timeline rail ---------- */

.services__step {
  position: relative;
  display: flex;
  gap: var(--space-5);
  padding: var(--space-7) var(--space-5);
  margin-inline: calc(var(--space-5) * -1);
  border-radius: var(--radius-md);
}

/* A glass wash on the open row (and a faint preview of it on hover/focus
   of any row) — the one "glass accent" in the section, kept extremely
   subtle: a hairline border, a soft tint and a whisper of blur, nothing
   that reads as its own object. Padding above + this negative margin
   means the highlight breathes past the text on both sides rather than
   hugging it, while the text itself stays perfectly aligned with the
   heading/lead above.

   Hover and "open" are deliberately two different depths, not one binary
   state: hovering previews the same material at half strength (a quiet
   "this responds to you"), while the genuinely open row gets the full
   wash plus a top light-catch and a short, tight contact shadow — just
   enough to read as gently lifted off the page, never floating. */

.services__step::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  border: 1px solid transparent;
  background: radial-gradient(120% 90% at 18% -10%, rgba(255, 255, 255, 0.05), transparent 55%),
    linear-gradient(160deg, rgba(255, 255, 255, 0.03), transparent 60%), var(--color-bg-elevated);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  opacity: 0;
  box-shadow: none;
  transition: opacity var(--duration-slow) var(--ease-premium), border-color var(--duration-slow) var(--ease-premium),
    box-shadow var(--duration-slow) var(--ease-premium);
  pointer-events: none;
}

.services__step:hover::before,
.services__step:focus-within::before {
  opacity: 0.5;
}

.services__step.is-expanded::before {
  opacity: 1;
  border-color: var(--color-border);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 14px 30px -24px rgba(0, 0, 0, 0.55);
}

/* ---------- Rail: connecting line + numbered node ---------- */

.services__step-rail {
  position: relative;
  z-index: 1;
  flex: none;
  width: 2.25rem;
  display: flex;
  justify-content: center;
}

.services__step-rail::before {
  content: "";
  position: absolute;
  top: calc(var(--space-7) * -1);
  bottom: calc(var(--space-7) * -1);
  inset-inline-start: calc(50% - 0.5px);
  width: 1px;
  background-color: var(--color-border);
}

.services__step:first-child .services__step-rail::before {
  background: linear-gradient(to bottom, transparent, var(--color-border) 30%);
}

.services__step:last-child .services__step-rail::before {
  background: linear-gradient(to bottom, var(--color-border) 70%, transparent);
}

.services__step-node {
  position: relative;
  z-index: 1;
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  margin-block-start: 0.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: var(--color-bg);
  border: 1px solid var(--color-border-strong);
  transition: border-color var(--duration-base) var(--ease-premium), box-shadow var(--duration-base) var(--ease-premium),
    transform var(--duration-base) var(--ease-premium);
}

.services__step:hover .services__step-node {
  border-color: var(--color-text-muted);
  transform: scale(1.06);
}

.services__step.is-expanded .services__step-node {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 4px var(--color-accent-soft);
  transform: scale(1);
}

.services__step-node-number {
  font-size: 0.8125rem;
  font-weight: var(--fw-semibold);
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
  transition: color var(--duration-base) var(--ease-premium);
}

.services__step.is-expanded .services__step-node-number {
  color: var(--color-accent);
}

/* ---------- Body: title trigger + collapsible description ---------- */

.services__step-body {
  position: relative;
  z-index: 1;
  flex: 1;
  min-width: 0;
}

.services__step-heading {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

.services__step-trigger {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  width: 100%;
  background: none;
  border: none;
  margin: 0;
  padding-block-start: 0.3rem;
  font-family: inherit;
  color: inherit;
  text-align: start;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.services__step-title {
  flex: 1;
  font-size: clamp(1.375rem, 1.25rem + 0.6vw, 1.625rem);
  font-weight: var(--fw-semibold);
  color: var(--color-text-primary);
  line-height: var(--lh-snug);
}

.services__step-chevron {
  flex: none;
  width: 15px;
  height: 15px;
  margin-inline-start: var(--space-2);
  color: var(--color-text-muted);
  transform: rotate(0deg);
  transition: transform var(--duration-base) var(--ease-premium), color var(--duration-base) var(--ease-premium);
}

.services__step:hover .services__step-chevron {
  color: var(--color-text-secondary);
}

.services__step-trigger[aria-expanded="true"] .services__step-chevron {
  transform: rotate(180deg);
  color: var(--color-accent);
}

/* Panel — animated via grid-template-rows (0fr -> 1fr) rather than
   max-height, for a precise, jitter-free open/close on any content length.
   Duration comes from the shared --duration-base token, which the site's
   global reduced-motion override already zeroes out. */

.services__step-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--duration-base) var(--ease-premium);
}

.services__step.is-expanded .services__step-panel {
  grid-template-rows: 1fr;
}

.services__step-panel-inner {
  overflow: hidden;
  min-height: 0;
}

/* A small gradient tick — the same "charged metal" material as the
   header/CTA chrome and Our Process's card accent — marking the seam
   between the title and its answer. The section's one deliberate piece
   of "gentle gradient," reused rather than invented, and only ever this
   small. It draws in just after the row starts opening (a short delay
   on the way in, none on the way out) rather than simply appearing, so
   the reveal reads as one authored sequence instead of a single flip. */

.services__step-accent {
  display: block;
  width: 0;
  height: 2px;
  margin-block: var(--space-3) var(--space-2);
  border-radius: 1px;
  background: var(--gradient-chrome-blue);
  opacity: 0;
  box-shadow: var(--glow-underline);
  transition: width var(--duration-base) var(--ease-premium), opacity var(--duration-base) var(--ease-premium);
}

.services__step.is-expanded .services__step-accent {
  width: 28px;
  opacity: 0.75;
  transition-delay: 90ms;
}

.services__step-desc {
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-relaxed);
  color: var(--color-text-secondary);
  max-width: 52ch;
}

/* ---------- Scroll reveal stagger ---------- */

.services__list .services__step:nth-child(1) { transition-delay: 20ms; }
.services__list .services__step:nth-child(2) { transition-delay: 55ms; }
.services__list .services__step:nth-child(3) { transition-delay: 90ms; }
.services__list .services__step:nth-child(4) { transition-delay: 125ms; }

/* ---------- Small screens ----------
   Matches the same padding-block reduction used across every other
   section at this breakpoint (Why, Process, Portfolio, Testimonials,
   Contact) so the whole page keeps one consistent vertical rhythm. */

@media (max-width: 560px) {
  .services {
    padding-block: var(--space-8);
  }

  .services__step {
    gap: var(--space-4);
    padding: var(--space-6) var(--space-4);
    margin-inline: calc(var(--space-4) * -1);
  }

  .services__step-rail::before {
    top: calc(var(--space-6) * -1);
    bottom: calc(var(--space-6) * -1);
  }

  .services__step-title {
    font-size: 1.1875rem;
  }
}