/* ==========================================================================
   SERVICES — loaded only by /services and /es/services.
   ========================================================================== */
/* --------------------------------------------------------------------------
   Services (.svch, .svc, .spec, .tx, .flow, .svcf, .svcc)

   A spec sheet, not a services grid. The structural refusal is the point of the
   page: no same-size icon cards, no icon tiles, no 01/02/03 numbering (four
   services are a SET, not a sequence, so numbering them would be decoration
   carrying no information), and no eyebrows — each heading carries its own
   weight.

   The only container is a hairline row, inherited from .why__list above rather
   than invented here, which is what keeps a brand-new page inside the
   established world. Brand blue appears exactly once per entry, on the skewed
   cut mark borrowed from .why__mark — the painter's-cut motif.
   -------------------------------------------------------------------------- */

.svch,
.svc,
.svcf,
.svcc {
  position: relative;
  padding-block: var(--section-y);
  /* Every section carrying an .aurora needs this — the layer is at inset:-10px
     and bleeds 10px past the section on each side, widening the document and
     producing a horizontal scrollbar. `clip`, not `hidden`, because hidden
     creates a scroll container and kills position:sticky on .svc__head. */
  overflow-x: clip;
}

.svch { background: var(--surface-0); padding-bottom: 0; }
.svc  { background: var(--surface-0); }
.svcf { background: var(--surface-50); }


/* --- Page head ----------------------------------------------------------- */
/* The measure is constrained on the TEXT, never on the .container element
   itself. Putting max-width on .container overrides its 1280px and re-centres
   the narrower block, which gave the page three different left edges — head,
   entries, and close each starting somewhere else. One left edge down the page. */
.svch__title { max-width: 16ch; }

.svch__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h1);
  line-height: 1.04;
  /* Clash ships tight sidebearings; -0.02em plus a small positive word-space is
     the site-wide setting for large display type. Face-specific, not taste. */
  letter-spacing: -0.02em;
  word-spacing: 0.03em;
  color: var(--ink-950);
  text-wrap: balance;
}

.svch__sub {
  margin-top: 22px;
  max-width: 34em;
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--ink-700);
}

/* .svch__meta is deliberately gone. It read "English and Spanish · Raleigh,
   North Carolina" as an uppercase tracked strip under the standfirst — which is
   the banned eyebrow device relocated rather than removed. Both facts already
   have real homes: bilingual is a spec row on every entry, and the geography is
   in the meta description and the footer. */

/* --- Entries ------------------------------------------------------------- */
.svc__entry { padding-block: 56px; border-top: 1px solid var(--border); }
.svc__entry:first-child { border-top: 0; padding-top: 40px; }

@media (min-width: 1024px) {
  /* Heading column left, register right, so the name stays with the rows it
     governs instead of floating above the whole page width. */
  /* The head column is a PERCENTAGE, not a fixed 18rem, because the lead name
     is sized in vw and a fixed column cannot track it. At 18rem/288px the
     enlarged "AI Receptionist" spilled its glyphs into the register and touched
     the `Books` term. The binding case is Spanish: "Recepcionista" measures
     421px at the 60px cap, against 367px for "Receptionist". 36% holds the
     Spanish word at every width from 1024 up — checked at the low end (1024,
     where the container is narrowest) and at the cap (>=1371, where the font
     stops growing but the container does not). Uniform across all four entries,
     so the register keeps one left edge down the page. */
  .svc__entry {
    display: grid;
    grid-template-columns: minmax(0, 38%) minmax(0, 1fr);
    gap: 64px;
    align-items: start;
  }
  .svc__head { position: sticky; top: calc(var(--nav-h) + 32px); }
  .svc__entry > .tx,
  .svc__entry > .flow { grid-column: 2; }
}

.svc__mark {
  display: block;
  width: 4px;
  height: 26px;
  margin-bottom: 20px;
  background: var(--blue-brand);
  border-radius: 1px;
  transform: skewX(-18deg);
}

.svc__name {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--fs-h2);
  line-height: 1.1;
  letter-spacing: -0.02em;
  word-spacing: 0.03em;
  color: var(--ink-950);
}

.svc__thesis {
  margin-top: 14px;
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--ink-500);
  text-wrap: balance;
}

/* The lead entry. AI Receptionist is the thing the business is actually sold on
   ("speed of response is the product"), so it has to READ as the largest entry,
   not merely be the one that happens to wrap onto two lines. Hierarchy is
   carried by type size and breathing room only — the grid columns stay
   identical to every other entry, because varying the head column would break
   the shared left edge of the value column down the page. */
/* Must clear --fs-h2's own clamp(2rem, 3.5vw, 3rem) by a visible step at EVERY
   width, not just at the caps. A first attempt at 3.6vw resolved to 46.08px
   against 44.8px — measured, a 1.3px difference, which is not a hierarchy. */
.svc__entry--lead .svc__name { font-size: clamp(2.5rem, 4.4vw, 3.5rem); }
.svc__entry--lead .svc__thesis { margin-top: 16px; font-size: var(--fs-lead); }
.svc__entry--lead { padding-bottom: 76px; }

/* --- The register -------------------------------------------------------- */
.spec { margin: 0; }

.spec__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  padding-block: 16px;
  border-top: 1px solid var(--border);
}
.spec__row:first-child { border-top: 0; padding-top: 0; }

@media (min-width: 640px) {
  .spec__row { grid-template-columns: 11rem minmax(0, 1fr); gap: 24px; align-items: baseline; }
  .spec--wide .spec__row { grid-template-columns: 15rem minmax(0, 1fr); }
}

.spec dt {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--ink-500);
  /* Values read as a column, so figures inside them are tabular. Measurement,
     not a "technical" costume — this page uses no monospace face at all. */
  font-variant-numeric: tabular-nums;
}

.spec dd {
  margin: 0;
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--ink-950);
  font-variant-numeric: tabular-nums;
}

/* --- Call transcript ----------------------------------------------------- */
/* The page's one moment of depth. The register is flat by design, so the single
   demonstration inverts to the shared deep surface instead of becoming another
   bordered box — it reads as an artifact lifted out of the system, not a card. */
.tx {
  margin: 36px 0 0;
  padding: 22px;
  background: var(--surface-deep);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card-lg);
  color: #fff;
}

.tx__cap {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.tx__what { font-family: var(--font-heading); font-weight: 600; font-size: var(--fs-body); }

.tx__tag {
  margin-left: auto;
  /* Floored in px: this is the "not real records" label, and it is the first
     thing a scaling system shrinks into illegibility. Same lesson as
     .hero3__disclaimer on the homepage. */
  font-size: max(12px, var(--fs-xs));
  color: rgba(255, 255, 255, 0.72);
}

.tx__log { list-style: none; margin: 0; padding: 18px 0 0; display: grid; gap: 16px; }

/* Both sides shrink to their content. The caller lines did this via margin-left
   auto while the receptionist lines stretched to the panel's full width, so one
   conversation was being sized by two different rules — the asymmetry read as a
   layout accident rather than as speaker direction. Direction is carried by
   which margin is auto, nothing else. */
.tx__line { display: grid; gap: 5px; width: fit-content; max-width: min(44em, 100%); }
.tx__line--ai { margin-right: auto; }
.tx__line--caller { margin-left: auto; text-align: right; justify-items: end; }

.tx__who {
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
}

.tx__say {
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: #fff;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: var(--radius);
  padding: 11px 14px;
}
.tx__line--ai .tx__say { background: rgba(22, 87, 255, 0.20); border-color: rgba(88, 132, 255, 0.38); }

.tx__foot {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.84);
}

/* --- Recovery timeline --------------------------------------------------- */
.flow { margin: 36px 0 0; }

.flow__cap {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 16px;
  padding-bottom: 14px;
}
.flow__cap .tx__what { color: var(--ink-950); }
.flow__cap .tx__tag { color: var(--ink-500); }

.flow__steps { list-style: none; margin: 0; padding: 0; }

.flow__step {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px 20px;
  padding: 14px 0 14px 26px;
  border-top: 1px solid var(--border);
}
@media (min-width: 640px) {
  .flow__step { grid-template-columns: 6.5rem 9rem minmax(0, 1fr); align-items: baseline; }
}

/* The rail: a hairline through the run with a node per step. Drawn with a
   pseudo-element rather than a border so the last step's rail stops at its own
   node instead of running past the end of the sequence. */
.flow__step::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--border);
}
.flow__step:first-child::before { top: 20px; }
.flow__step:last-child::before { bottom: auto; height: 20px; }

.flow__step::after {
  content: "";
  position: absolute;
  left: 0;
  top: 17px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--surface-0);
  border: 1px solid var(--ink-300);
}
.flow__step--won::after { background: var(--success); border-color: var(--success); }

.flow__t { font-size: var(--fs-sm); color: var(--ink-500); font-variant-numeric: tabular-nums; }
.flow__w { font-size: var(--fs-body); font-weight: 500; color: var(--ink-950); }
.flow__d { font-size: var(--fs-sm); line-height: 1.5; color: var(--ink-500); }
/* Not var(--success): #1f9d6b is a 3.45:1 text colour on white and fails AA at
   this size. The dot keeps the brighter token — a 9px shape is not text and
   carries the state on its own — while the WORD gets a darkened value of the
   same hue, 5.47:1 on --surface-0 and 5.15:1 on --surface-50. Text-only, and
   deliberately not a change to the shared token, which is correct elsewhere. */
.flow__step--won .flow__w { color: #17784f; }

/* --- How it gets built --------------------------------------------------- */
.svcf__h,
.svcc__h {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--fs-h2);
  line-height: 1.1;
  letter-spacing: -0.02em;
  word-spacing: 0.03em;
  text-wrap: balance;
}
.svcf__h { color: var(--ink-950); margin-bottom: 40px; }

/* Both joins ramp from the upper side, using the shared band declared with
   .why/.feat/.vid/.ct above — the selector list is extended rather than the
   gradient re-declared here, so all six joins stay one rule.
     .svc  -> .svcf  ramps white to --surface-50
     .svcf -> .svcc  ramps --surface-50 to --surface-deep */
.svc  { --fade-rgb: 247, 248, 250; }
.svcf { --fade-rgb: 7, 12, 22; }

/* --- Close --------------------------------------------------------------- */
/* Shares --surface-deep with the footer below it, so there is no colour step at
   that join — the same continuity the homepage contact section relies on. */
.svcc {
  background: var(--surface-deep);
  color: #fff;
  /* Dark-surface re-declaration of the shared glass and shadow tokens, matching
     how every other dark section on the site re-inks them. */
  --glass-border: rgba(255, 255, 255, 0.16);
  --glass-hi: rgba(255, 255, 255, 0.14);
  --glass-fill: rgba(255, 255, 255, 0.08);
  --glass-fill-hover: rgba(255, 255, 255, 0.14);
  --shadow-rgb: 0, 0, 0;
  --shadow-a1: 0.30;
  --shadow-a2: 0.38;
  --shadow-a3: 0.46;

  /* The --ui-* set must be re-inked too, not just --glass-* and --shadow-*.
     .ui-btn--outline draws its label from --ui-fg, which is --ink-950 in :root;
     on --surface-deep that rendered the phone CTA as a dark pill with an
     invisible label and an invisible icon. Same swap .hdr--over-dark performs
     for the same reason. Re-inking the glass without the ui tokens is the trap:
     the button still LOOKS present, so the failure reads as a styling nuance
     rather than as a conversion action nobody can read. */
  --ui-fg: #fff;
  --ui-muted-fg: rgba(255, 255, 255, 0.72);
  --ui-border: rgba(255, 255, 255, 0.22);
  --ui-input: rgba(255, 255, 255, 0.32);
  --ui-accent: rgba(255, 255, 255, 0.12);
  --ui-bg: transparent;
  --ui-ring: #fff;
}

.svcc__h { color: #fff; max-width: 18ch; }
.svcc__p {
  margin-top: 18px;
  max-width: 34em;
  font-size: var(--fs-lead);
  line-height: 1.6;
  /* Tinted from the surface hue rather than gray, per the contrast rule for
     secondary text on coloured grounds. */
  color: var(--ink-on-deep);
}
.svcc__actions { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 12px; }
.svcc .btn--ghost { color: #fff; }
.svcc .btn--ghost:hover { color: #fff; border-color: rgba(255, 255, 255, 0.4); }