/* ==========================================================================
   Mid Group AI, professional services
   --------------------------------------------------------------------------
   The services arm is the entry offer and previously had no page at all: three
   cards inside a homepage anchor, and a nav dropdown containing a mailto and a
   Calendly link. This page gives it depth to match the platform.

   Orange (--orange) is the services arm's colour throughout, matching the
   chooser on the homepage, so a visitor who picked that arm stays oriented.

   The three offerings are laid out as alternating asymmetric blocks rather
   than a three-card grid. Three parallel items in a row of equal cards is
   exactly the pattern that made the old site read as generated; alternating
   sides gives each offering its own moment and lets the page breathe.
   ========================================================================== */

/* ----- Hero: single column, no split. Deliberately unlike the homepage. ----- */
.svc-hero { padding-block: 84px 64px; max-width: 800px; }
.svc-hero h1 { margin-bottom: 20px; }
.svc-hero .lede { margin-bottom: 30px; max-width: 34em; }
.svc-hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; }

/* ----- Sequence: a real process, so numbering carries real information ----- */
.svc-process { background: var(--panel); border-block: 1px solid var(--border); }
.svc-process .container { padding-block: 68px 72px; }
.svc-steps {
  list-style: none;
  margin: 34px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
  counter-reset: step;
}
.svc-steps li { counter-increment: step; position: relative; padding-top: 20px; }
.svc-steps li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  top: 0;
  left: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--orange);
}
/* Hairline connecting the steps, because they are genuinely sequential. */
.svc-steps li::after {
  content: "";
  position: absolute;
  top: 6px;
  left: 26px;
  right: -26px;
  height: 1px;
  background: var(--border);
}
.svc-steps li:last-child::after { display: none; }
.svc-steps h3 { font-size: 17px; margin: 0 0 7px; }
.svc-steps p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--muted); }

/* ----- Offerings: alternating asymmetric blocks ----- */
.offer { padding-block: 84px; border-bottom: 1px solid var(--border); }
.offer:last-of-type { border-bottom: none; }
.offer-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: start; }
/* Every second offering flips, so the eye never settles into a rhythm. */
.offer:nth-of-type(even) .offer-grid { grid-template-columns: 0.95fr 1.05fr; }
.offer:nth-of-type(even) .offer-copy { order: 2; }
.offer:nth-of-type(even) .offer-panel { order: 1; }

.offer h2 { margin-bottom: 16px; }
.offer-copy > p { font-size: 17px; line-height: 1.65; color: var(--muted); margin: 0 0 18px; max-width: 40em; }
.offer-copy > p b { color: var(--ink); font-weight: 600; }

/* The arm colour is carried by the ground, not by a strip on the edge. */
.offer-out {
  margin: 26px 0 0;
  padding: 20px 22px;
  background: color-mix(in srgb, var(--orange) 8%, transparent);
  border-radius: var(--r-sm);
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--ink);
}
.offer-out b { font-weight: 700; }

/* The panel carries real content rather than a placeholder image. When
   photography and screen recordings exist, a <figure> replaces it here. */
.offer-panel {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: 0 24px 56px -40px rgba(10, 14, 24, 0.5);
}
.offer-panel-h {
  padding: 15px 20px;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.offer-panel ul { list-style: none; margin: 0; padding: 6px 0; }
.offer-panel li {
  padding: 13px 20px;
  border-bottom: 1px solid var(--border);
  font-size: 15px;
  line-height: 1.5;
  color: var(--muted);
}
.offer-panel li:last-child { border-bottom: none; }
.offer-panel li b { display: block; color: var(--ink); font-weight: 600; margin-bottom: 2px; }

/* ----- Governance note: the bridge to the platform arm ----- */
.svc-bridge { background: var(--band-bg); color: var(--band-ink); }
.svc-bridge .container { padding-block: 66px 70px; display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: center; }
.svc-bridge h2 {
  font-family: var(--font-display);
  font-stretch: var(--wide);
  color: var(--band-ink);
  margin-bottom: 14px;
}
.svc-bridge p { font-size: 16.5px; line-height: 1.6; color: var(--band-muted); margin: 0 0 22px; max-width: 40em; }
.svc-bridge .arrow-link { color: var(--blue2); }
.svc-bridge .arrow-link:hover { color: var(--band-ink); }
.bridge-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.bridge-points li {
  font-size: 15px;
  line-height: 1.5;
  color: var(--band-muted);
  padding-left: 20px;
  position: relative;
}
.bridge-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 8px;
  height: 2px;
  border-radius: var(--r-xs);
  background: var(--blue2);
}

/* ----- Responsive ----- */
@media (max-width: 960px) {
  .svc-steps { grid-template-columns: repeat(2, 1fr); gap: 30px 26px; }
  .svc-steps li:nth-child(2)::after { display: none; }
  .offer-grid,
  .offer:nth-of-type(even) .offer-grid { grid-template-columns: 1fr; gap: 36px; }
  .offer:nth-of-type(even) .offer-copy,
  .offer:nth-of-type(even) .offer-panel { order: 0; }
  .svc-bridge .container { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 640px) {
  .svc-hero { padding-block: 56px 44px; }
  .offer { padding-block: 56px; }
  .svc-steps { grid-template-columns: 1fr; gap: 26px; }
  .svc-steps li::after { display: none; }
  .svc-hero-ctas .btn-audit { width: 100%; }
}

/* ==========================================================================
   Detail pages: /services/agentic-workflows, /services/training,
   /services/workflow-audit
   --------------------------------------------------------------------------
   The overview page can carry three offerings in one alternating rhythm. A
   detail page cannot: eight sections of the same block would land straight
   back in the pattern this stylesheet exists to avoid. Everything below adds
   a section archetype with a different shape, so each page can be assembled
   from a different sequence of them and no two neighbours ever match.
   ========================================================================== */

/* ----- Explicit side control for the offering blocks -----
   The alternating rule above keys off a section's position among ALL sections
   on the page, which is exactly right on the overview page where the three
   offerings sit in a fixed run. The detail pages interleave other section
   types between them, so position stops meaning anything and each block
   states its side. Same specificity as the nth-of-type rule, declared later,
   so these win. */
.offer.offer-left .offer-grid { grid-template-columns: 1.05fr 0.95fr; }
.offer.offer-left .offer-copy { order: 1; }
.offer.offer-left .offer-panel { order: 2; }
.offer.offer-right .offer-grid { grid-template-columns: 0.95fr 1.05fr; }
.offer.offer-right .offer-copy { order: 2; }
.offer.offer-right .offer-panel { order: 1; }

/* Tinted offering block, for a page whose neighbours are both on the page
   background and would otherwise run together as one long stretch. */
.offer-band { background: var(--panel); border-top: 1px solid var(--border); }

/* An offering's bottom rule plus the next band's top rule reads as a 2px
   seam. Drop the second one. */
.offer + .svc-band,
.offer + .svc-process { border-top: none; }

/* Read-on link at the foot of an offering block on the overview page, so the
   detail pages are reachable from the section they expand rather than only
   from the nav. Blue is the site's link colour everywhere and is not an arm
   signal; orange at text size does not clear contrast on this background. */
.offer-more { margin: 20px 0 0; font-size: 15.5px; }
.offer-more a { color: var(--blue); font-weight: 600; }

/* Links inside an offering block. Without this they inherit the surrounding
   text colour and are invisible until hover, which is a failure of both
   affordance and contrast. */
.offer-copy > p a,
.offer-out a { color: var(--blue); font-weight: 600; }

/* ----- Breadcrumb -----
   Doubles as the hero's section marker on a detail page. A visitor lands here
   from the overview or from search and needs the way back; an eyebrow above a
   breadcrumb would be two labels saying the same thing. */
.svc-crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 18px;
}
.svc-crumb::before {
  content: "";
  flex: none;
  width: 22px;
  height: 2px;
  border-radius: var(--r-xs);
  background: var(--orange);
}
.svc-crumb a { color: var(--muted); }
.svc-crumb-sep { color: var(--border); }
.svc-crumb-now { color: var(--ink); }

/* ----- Generic tinted band -----
   .svc-process is the numbered sibling of this; this one carries the sections
   that are not a sequence, so a band of tint is available without implying an
   order the content does not have. */
.svc-band { background: var(--panel); border-block: 1px solid var(--border); }
.svc-band .container { padding-block: 72px 78px; }

/* ----- Editorial prose -----
   One stretch per page where the reader is just reading: no card, no grid, no
   parallel items. It is the only section that can carry an argument, and it
   is what keeps a page of blocks from reading as a specification sheet. */
.svc-prose-inner { max-width: 760px; margin: 0 auto; padding: 80px 28px 84px; }
.svc-prose-inner > p { font-size: 18px; line-height: 1.7; color: var(--muted); margin: 0 0 20px; }
.svc-prose-inner > p:first-of-type { font-size: 21px; line-height: 1.55; color: var(--ink); }
.svc-prose-inner > p:last-child { margin-bottom: 0; }
.svc-prose-inner b { color: var(--ink); font-weight: 600; }
.svc-prose-inner a { color: var(--blue); font-weight: 600; }

/* A pull quote earns its emphasis from the display face and the width axis,
   so it needs no rule down the side. */
.svc-pull {
  margin: 40px 0;
  padding: 0;
  font-family: var(--font-display);
  font-stretch: var(--wide);
  font-size: clamp(20px, 2.6vw, 27px);
  line-height: 1.25;
  letter-spacing: -0.012em;
  color: var(--ink);
}
.svc-pull p { margin: 0; font-size: inherit; line-height: inherit; color: inherit; }

/* Dark variant. Each detail page gets exactly one place where it stops
   describing the service and states a position; on a dark ground that reads
   as a deliberate pause rather than as one more section. */
.svc-prose-band { background: var(--band-bg); }
.svc-prose-band h2 { color: var(--band-ink); }
.svc-prose-band .svc-prose-inner > p { color: var(--band-muted); }
.svc-prose-band .svc-prose-inner > p:first-of-type { color: var(--band-ink); }
.svc-prose-band .svc-prose-inner b { color: var(--band-ink); }
.svc-prose-band .svc-prose-inner a { color: var(--blue2); }
.svc-prose-band .svc-pull { color: var(--band-ink); }

/* ----- Labelled rows -----
   Full-width horizontal bands, label left and prose right, hairline between.
   Unordered on purpose: these are reference items with no sequence, so they
   get no numbers, and the horizontal reading direction is the opposite of the
   card grids elsewhere on the page. */
.svc-rows { list-style: none; margin: 38px 0 0; padding: 0; border-top: 1px solid var(--border); }
.svc-rows li {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 10px 44px;
  align-items: start;
  padding: 26px 0;
  border-bottom: 1px solid var(--border);
}
.svc-rows h3 { margin: 0; font-size: 19px; }
.svc-rows p { margin: 0; font-size: 16px; line-height: 1.62; color: var(--muted); max-width: 46em; }

/* ----- Before / after comparison -----
   Genuinely tabular: two columns, paired rows, a header for each column, so
   it is marked up as a table and a screen reader gets the pairing. A pair of
   card lists side by side would lose the row-by-row correspondence, which is
   the entire point of the section. The column meaning is carried by its
   header text, never by the accent rule alone. */
.svc-compare {
  width: 100%;
  margin: 32px 0 0;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  text-align: left;
}
.svc-compare-cap {
  caption-side: top;
  text-align: left;
  font-size: 16px;
  line-height: 1.55;
  color: var(--muted);
  padding-bottom: 16px;
  max-width: 44em;
}
.svc-compare th {
  padding: 15px 22px;
  background: var(--card);
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.svc-compare th + th { color: var(--ink); border-left: 1px solid var(--border); box-shadow: inset 0 3px 0 var(--orange); }
.svc-compare td {
  width: 50%;
  padding: 17px 22px;
  vertical-align: top;
  background: var(--card);
  border-bottom: 1px solid var(--border);
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--muted);
}
.svc-compare td + td { color: var(--ink); border-left: 1px solid var(--border); }
.svc-compare tbody tr:last-child td { border-bottom: none; }

/* ----- Read-on strip -----
   Sits after the closing call to action as quiet navigation between the three
   service pages. Rows rather than cards, so it reads as a way out of the page
   and never competes with the call to action above it. */
.svc-next { background: var(--panel); border-top: 1px solid var(--border); }
.svc-next .container { padding-block: 44px 52px; }
/* The strip is labelled by a real heading so the section stays in the outline,
   but it is a signpost rather than a section title, so it takes the eyebrow
   scale instead of the display face. */
.svc-next h2 {
  font-family: var(--font-sans);
  font-stretch: normal;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.09em;
  max-width: none;
}
.svc-next-list { list-style: none; margin: 20px 0 0; padding: 0; }
.svc-next-list li { border-top: 1px solid var(--border); }
.svc-next-list li:last-child { border-bottom: 1px solid var(--border); }
.svc-next-list a {
  display: grid;
  grid-template-columns: 280px 1fr auto;
  gap: 6px 44px;
  align-items: baseline;
  padding: 22px 4px;
  color: var(--ink);
}
.svc-next-list a::after { content: "\2192"; color: var(--muted); font-size: 17px; }
.svc-next-list a:hover::after { color: var(--blue2); }
.svc-next-k { font-family: var(--font-display); font-stretch: var(--wide); font-weight: 700; font-size: 20px; letter-spacing: -0.01em; }
.svc-next-v { font-size: 15px; line-height: 1.5; color: var(--muted); }
.svc-next-list a:hover .svc-next-v { color: var(--muted); }

/* ----- Responsive ----- */
@media (max-width: 960px) {
  .offer.offer-left .offer-grid,
  .offer.offer-right .offer-grid { grid-template-columns: 1fr; gap: 36px; }
  .offer.offer-left .offer-copy,
  .offer.offer-left .offer-panel,
  .offer.offer-right .offer-copy,
  .offer.offer-right .offer-panel { order: 0; }
}
@media (max-width: 760px) {
  .svc-rows li { grid-template-columns: 1fr; gap: 8px; }
  .svc-next-list a { grid-template-columns: 1fr auto; }
  .svc-next-v { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .svc-prose-inner { padding: 56px 28px 60px; }
  .svc-band .container { padding-block: 54px 58px; }

  /* The table collapses to stacked pairs. The column headings move into each
     cell through data-label, so the "now" and "after" of a pair stay labelled
     once the columns are gone. */
  .svc-compare,
  .svc-compare tbody,
  .svc-compare tr,
  .svc-compare td { display: block; width: 100%; }
  .svc-compare caption { display: block; }
  .svc-compare thead { position: absolute; left: -9999px; }
  .svc-compare tr { border-bottom: 1px solid var(--border); }
  .svc-compare tbody tr:last-child { border-bottom: none; }
  .svc-compare td,
  .svc-compare td + td { border: none; padding: 15px 18px 0; }
  .svc-compare tr td:last-child { padding-bottom: 17px; }
  .svc-compare td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 5px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .svc-compare td + td::before { color: var(--ink); }
}