/* ==========================================================================
   PAGE: SERVICES

   Visual system: ALTERNATING FULL-WIDTH ROWS + a numbered timeline —
   deliberately not the card grid used by Solutions, so the two sections read
   as different kinds of content rather than the same page twice.
   ========================================================================== */

/* --------------------------------------------------------------------------
   SERVICE ROW  →  <ServiceRow reverse />
   -------------------------------------------------------------------------- */
.service-row {
  position: relative;
  padding-block: clamp(2.5rem, 1.5rem + 3vw, 3.32rem);
  border-bottom: 1px solid var(--c-border);
}

.service-row:last-of-type {
  border-bottom: 0;
}

/* Alternation is driven by an explicit modifier, NOT :nth-of-type — that
   would count every <section> on the page (the page hero included), so the
   pattern would silently flip if a section were added above. */
.service-row--reverse {
  background: var(--c-surface-alt);
}

.service-row--reverse .service-row__media {
  order: 2;
}

/* Media side — the 3D service icon on a tinted plate rather than a photo,
   because that is the artwork the design actually ships. */
.service-row__media {
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(240px, 26vw, 360px);
  border-radius: var(--r-lg);
  background:
    radial-gradient(90% 90% at 50% 25%, var(--c-white) 0%, rgba(255, 255, 255, 0) 70%),
    linear-gradient(150deg, var(--c-tint-indigo) 0%, var(--c-tint-cyan) 100%);
  overflow: hidden;
}

.service-row--reverse .service-row__media {
  background:
    radial-gradient(90% 90% at 50% 25%, var(--c-white) 0%, rgba(255, 255, 255, 0) 70%),
    linear-gradient(150deg, var(--c-tint-violet) 0%, var(--c-tint-indigo) 100%);
}

.service-row__media img {
  width: clamp(130px, 15vw, 210px);
  height: auto;
  filter: drop-shadow(0 18px 30px rgba(11, 28, 45, 0.16));
}

/* Big watermark numeral in the corner of the media plate. */
.service-row__num {
  position: absolute;
  left: 1.2rem;
  bottom: 0.1rem;
  font-family: var(--font-heading);
  font-size: clamp(4.5rem, 3rem + 5vw, 7.5rem);
  font-weight: var(--fw-bold);
  line-height: 1;
  color: var(--c-white);
  opacity: 0.75;
  pointer-events: none;
  user-select: none;
}

/* Copy side */
.service-row__tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--c-primary);
  margin-bottom: 0.9rem;
}

.service-row__tag svg {
  width: 16px;
  height: 16px;
}

.service-row__title {
  font-family: var(--font-body);
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  line-height: 1.2;
  letter-spacing: -0.44px;
  color: var(--c-ink-900);
  margin-bottom: 1.1rem;
}

.service-row__text {
  max-width: 40rem;
  font-family: var(--font-body);
  font-size: var(--fs-body-lg);
  font-weight: var(--fw-light);
  line-height: var(--lh-relaxed);
  letter-spacing: 0.4px;
  color: var(--c-ink-850);
  margin-bottom: 1.7rem;
}

/* Two-column bullet list of what the service covers. */
.service-row__points {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem 1.5rem;
  margin-bottom: 1.9rem;
}

.service-row__points li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--c-ink-800);
}

.service-row__points svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 0.18rem;
  color: var(--c-primary);
}

/* --------------------------------------------------------------------------
   ENGAGEMENT TIMELINE  →  <Timeline />
   -------------------------------------------------------------------------- */
.timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.5rem;
  margin-top: var(--head-gap);
}

/* The connecting rule sits behind the markers. */
.timeline::before {
  content: "";
  position: absolute;
  top: 22px;
  left: 12%;
  right: 12%;
  height: 2px;
  background: linear-gradient(
    90deg,
    var(--c-border-mid) 0%,
    var(--c-primary) 50%,
    var(--c-border-mid) 100%
  );
  opacity: 0.55;
}

.timeline__step {
  position: relative;
  text-align: center;
  padding-inline: 0.5rem;
}

.timeline__marker {
  width: 46px;
  height: 46px;
  margin: 0 auto 1.1rem;
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  background: var(--c-white);
  border: 2px solid var(--c-primary);
  color: var(--c-primary);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  transition: background var(--t-base), color var(--t-base);
}

.timeline__step:hover .timeline__marker {
  background: var(--c-primary);
  color: var(--c-white);
}

.timeline__title {
  font-family: var(--font-heading);
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  color: var(--c-navy-900);
  margin-bottom: 0.45rem;
}

.timeline__text {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-light);
  line-height: var(--lh-relaxed);
  color: var(--c-ink-500);
  margin: 0;
}

/* ==========================================================================
   SERVICE DETAIL PAGES

   A deliberately different system from the solution detail pages. Where those
   use card grids, horizontal step cards and chip rows, these use a spec table,
   a vertical phase ladder, document tiles, a two-column scope table and a dark
   principle band. Nothing here is shared with solutions.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   SPEC TABLE  →  <SpecTable />
   A definition list rendered as ruled rows — the flattest, most factual block
   on the site, and nothing like the tinted cards used elsewhere.
   -------------------------------------------------------------------------- */
.spec {
  margin: 0;
  border-top: 2px solid var(--c-navy-900);
}

.spec__row {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 1rem;
  padding: 1.05rem 0;
  border-bottom: 1px solid var(--c-border-mid);
}

.spec__key {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--c-ink-400);
  align-self: center;
}

.spec__val {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  color: var(--c-navy-900);
  align-self: center;
}

/* --------------------------------------------------------------------------
   PHASE LADDER  →  <PhaseLadder />
   Vertical, numbered, with the rule running through the markers. The solution
   pages use three horizontal cards; this reads as a sequence you move down.
   -------------------------------------------------------------------------- */
/* A row of numbered steps rather than a vertical ladder. Stacked, five
   phases ran to most of a screen and the dashed connector made the gaps
   compulsory; side by side the same five read at a glance and the section
   costs a third of the height. auto-fit so four or six phases work too. */
.ladder {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  counter-reset: phase;
}

/* Deliberately not a box: the deliverables directly below are white cards on
   a tint, and two bands of identical cards back to back read as one. These
   are numbered steps on the page itself, joined by a dashed run. */
.ladder__step {
  position: relative;
  display: block;
  padding: 0 1.1rem 0 0;
}

/* The connector reaches from one marker to the next, and stops at the last. */
.ladder__step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 17px;
  left: 44px;
  right: -0.1rem;
  height: 2px;
  background: repeating-linear-gradient(
    90deg,
    var(--c-border-mid) 0 6px,
    transparent 6px 12px
  );
}

.ladder__marker {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  background: var(--c-primary);
  color: var(--c-white);
  font-family: var(--font-mono);
  font-size: 0.86rem;
  font-weight: var(--fw-bold);
  margin-bottom: 0.85rem;
  box-shadow: 0 6px 14px rgba(0, 129, 189, 0.28);
  transition: background var(--t-base);
}

.ladder__step:hover .ladder__marker {
  background: var(--c-navy-900);
  box-shadow: 0 6px 14px rgba(11, 28, 45, 0.28);
}

.ladder__title {
  font-family: var(--font-heading);
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  color: var(--c-navy-900);
  margin-bottom: 0.4rem;
}

.ladder__text {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-light);
  line-height: var(--lh-relaxed);
  color: var(--c-ink-850);
  margin: 0;
}

/* --------------------------------------------------------------------------
   DELIVERABLE TILE  →  <Deliverable />
   Styled as a document rather than a card: folded corner, file-type flag.
   -------------------------------------------------------------------------- */
/* Same treatment as "What's included" on the solution pages: white boxes on a
   light band, held by a shadow, with the file type as a filled badge. */
.deliverable {
  position: relative;
  height: 100%;
  padding: 1.4rem 1.35rem 1.4rem;
  background: var(--c-white);
  border: 1px solid transparent;
  border-radius: var(--r-md);
  box-shadow: 0 2px 14px rgba(11, 28, 45, 0.06);
  transition: transform var(--t-base), box-shadow var(--t-base),
    border-color var(--t-base);
}

.deliverable:hover {
  transform: translateY(-4px);
  border-color: transparent;
  box-shadow: var(--sh-card-hover);
}

.deliverable__type {
  --badge: var(--c-primary);
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: var(--fw-bold);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--c-white);
  background: var(--badge);
  border-radius: var(--r-pill);
  padding: 0.28rem 0.62rem;
  margin-bottom: 0.75rem;
  box-shadow: 0 6px 14px rgba(11, 28, 45, 0.16);
}

/* A colour per artefact, so four boxes of grey text are told apart. */
#deliverables [class*="col-"]:nth-child(4n + 2) .deliverable__type { --badge: #16a394; }
#deliverables [class*="col-"]:nth-child(4n + 3) .deliverable__type { --badge: #6d4bd6; }
#deliverables [class*="col-"]:nth-child(4n + 4) .deliverable__type { --badge: #e2811c; }

.deliverable__name {
  font-family: var(--font-body);
  font-size: var(--fs-h4);
  font-weight: var(--fw-medium);
  color: var(--c-navy-900);
  margin-bottom: 0.45rem;
}

.deliverable__text {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-light);
  line-height: var(--lh-relaxed);
  color: var(--c-ink-500);
  margin: 0;
}

/* --------------------------------------------------------------------------
   SCOPE TABLE  →  <ScopeTable />
   What is included, and — just as usefully — what is not.
   -------------------------------------------------------------------------- */
.scope {
  border: 1px solid var(--c-border-mid);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.scope__col {
  padding: 1.75rem 1.6rem 1.9rem;
}

.scope__col + .scope__col {
  border-left: 1px solid var(--c-border-mid);
  background: var(--c-surface-alt);
}

.scope__head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--c-navy-900);
  padding-bottom: 1rem;
  margin-bottom: 1.1rem;
  border-bottom: 1px solid var(--c-border-mid);
}

.scope__badge {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  background: var(--c-primary);
  color: var(--c-white);
}

.scope__badge svg {
  width: 13px;
  height: 13px;
}

.scope__badge--out {
  background: var(--c-ink-400);
}

.scope__list li {
  position: relative;
  padding-left: 1.5rem;
  padding-block: 0.5rem;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-light);
  line-height: var(--lh-relaxed);
  color: var(--c-ink-800);
}

.scope__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.05rem;
  width: 7px;
  height: 7px;
  border-radius: var(--r-pill);
  background: var(--c-primary);
}

.scope__list--out li {
  color: var(--c-ink-500);
}

.scope__list--out li::before {
  background: none;
  width: 9px;
  height: 2px;
  border-radius: 0;
  top: 1.25rem;
  background-color: var(--c-ink-400);
}

/* --------------------------------------------------------------------------
   PRINCIPLE BAND  →  <PrincipleBand />
   One statement, full width, dark. Nothing like it on the solution pages.
   -------------------------------------------------------------------------- */
.principle {
  position: relative;
  padding-block: clamp(2.75rem, 2rem + 2.6vw, 3.32rem);
  background: var(--c-navy-700);
  overflow: hidden;
  isolation: isolate;
}

.principle::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(
    90% 140% at 15% 0%,
    rgba(82, 171, 255, 0.28) 0%,
    rgba(82, 171, 255, 0) 60%
  );
}

.principle__mark {
  width: 44px;
  height: auto;
  color: rgba(255, 255, 255, 0.28);
  margin-bottom: 1.1rem;
}

.principle__text {
  max-width: 52rem;
  font-family: var(--font-body);
  font-size: clamp(1.15rem, 0.95rem + 0.9vw, 1.65rem);
  font-weight: var(--fw-light);
  line-height: 1.55;
  color: var(--c-white);
  margin: 0;
}

/* --------------------------------------------------------------------------
   OTHER SERVICES  →  <ServiceJump />
   Full-width rows, not the small tile grid used for related solutions.
   -------------------------------------------------------------------------- */
.svc-jump {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.35rem 1.5rem;
  background: var(--c-white);
  border: 1px solid var(--c-border-mid);
  border-radius: var(--r-md);
  transition: border-color var(--t-base), box-shadow var(--t-base),
    transform var(--t-base);
}

.svc-jump:hover {
  transform: translateX(4px);
  border-color: transparent;
  box-shadow: var(--sh-card-hover);
}

.svc-jump__icon {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  background: var(--c-tint-indigo);
  color: var(--c-primary);
}

.svc-jump__icon svg {
  width: 21px;
  height: 21px;
}

.svc-jump__name {
  font-family: var(--font-heading);
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  color: var(--c-navy-900);
  margin-bottom: 0.15rem;
}

.svc-jump__text {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-light);
  color: var(--c-ink-500);
  margin: 0;
}

.svc-jump__go {
  margin-left: auto;
  color: var(--c-primary);
  flex-shrink: 0;
}

.svc-jump__go svg {
  width: 18px;
  height: 18px;
  transition: transform var(--t-base);
}

.svc-jump:hover .svc-jump__go svg {
  transform: translateX(4px);
}

/* --------------------------------------------------------------------------
   COMPARISON TABLE  →  <CompareTable />  (services listing)
   -------------------------------------------------------------------------- */
.compare {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--c-border-mid);
  border-radius: var(--r-lg);
  overflow: hidden;
  font-family: var(--font-body);
}

.compare th,
.compare td {
  padding: 1.1rem 1.25rem;
  text-align: left;
  border-bottom: 1px solid var(--c-border-mid);
  vertical-align: top;
}

.compare tr:last-child th,
.compare tr:last-child td {
  border-bottom: 0;
}

.compare thead th {
  background: var(--c-surface-alt);
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  color: var(--c-navy-900);
}

.compare thead th:first-child {
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--c-ink-400);
}

.compare tbody th {
  width: 22%;
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--c-ink-400);
  background: var(--c-white);
}

.compare tbody td {
  font-size: var(--fs-body);
  font-weight: var(--fw-light);
  line-height: var(--lh-relaxed);
  color: var(--c-ink-800);
}

.compare td + td {
  border-left: 1px solid var(--c-border);
}

.compare th + th {
  border-left: 1px solid var(--c-border);
}

.compare__note {
  display: block;
  margin-top: 0.35rem;
  font-size: var(--fs-xs);
  color: var(--c-ink-400);
}