/* ==========================================================================
   SERVICE AREA — loaded only by /service-area and /es/service-area.
   ========================================================================== */
/* --------------------------------------------------------------------------
   Service Area (.sah, .saq, .sav, .sacc)

   The page's whole argument is that distance is not a variable, so the
   component is a COLUMN OF VERDICTS: every question gets a short answer, every
   short answer says the same thing, and reading straight down the verdicts
   makes the case before a single elaboration is read.

   That is why the verdict sits in its own fixed-width column under a
   full-width question rather than inline with it — a verdict wrapped into
   running prose cannot be scanned as a column, and the column IS the argument.

   There is NO MAP here, and there must not be one. Pins imply a presence that
   does not exist (the work is fully remote, nobody travels), and NC-scale
   geography renders as a smudge — the homepage globe already proved that on
   this site, which is why its nodes are a Fibonacci spiral and not real
   lat/lng. A city list built to rank is the other default and is equally out.
   -------------------------------------------------------------------------- */

.sah,
.saq,
.sav,
.sacc {
  position: relative;
  padding-block: var(--section-y);
  /* .sacc carries an .aurora at inset:-10px, which bleeds 10px past the
     section on each side and widens the document without this. `clip` rather
     than `hidden` — hidden creates a scroll container. No sticky column on
     this page, but the rule stays uniform with Process and Services. */
  overflow-x: clip;
}

.sah { background: var(--surface-0); padding-bottom: 8px; }
/* Tight top: the head and the first question are one statement, and the first
   row has to break the fold. */
.saq { background: var(--surface-0); padding-top: 40px; }
/* The --fade-rgb declarations here are INERT, exactly as they are on Process
   and Contact: the shared blend-band rule in base.css selects only
   .why/.feat/.vid/.ct/.svc/.svcf::after, so this page has hard section cuts.
   Adding these selectors to that list is a one-line change that would also
   change Process and Contact, and that visual decision has not been taken.
   Kept so the triplets are already correct if it ever is. */
.sav { background: var(--surface-50); --fade-rgb: 247, 248, 250; }
.sacc { --fade-rgb: 7, 12, 22; }

/* --- Page head ----------------------------------------------------------- */
.sah__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h1);
  line-height: 1.04;
  letter-spacing: -0.02em;
  word-spacing: 0.03em;
  color: var(--ink-950);
  text-wrap: balance;
}
/* Two-tone thesis line: the coverage is present, the visit is absent, and the
   color split enacts that. Do not flatten the two clauses to one color —
   same rule as the homepage .why thesis.

   --ink-500 and NOT the --ink-300 that DESIGN.md nominates for "the absent half
   of a two-tone thesis". Measured on this page: --ink-300 on --surface-0 is
   2.54:1, which fails the 3:1 WCAG minimum for large text, and this is half of
   the page's only h1. --ink-500 measures 5.98:1 against the first clause's
   18.72:1 — the present/absent split stays obvious and both halves pass.
   The homepage .why thesis still uses --ink-300 and therefore still carries the
   2.54:1 failure; that is a pre-existing finding on a shipped page, raised
   rather than changed here. */
.sah__title span { color: var(--ink-500); }

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

/* --- Section heads ------------------------------------------------------- */
.saq__head,
.sav__head { max-width: 40em; margin-bottom: 44px; }

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

.saq__h,
.sav__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;
  color: var(--ink-950);
}

.saq__p,
.sav__p {
  margin-top: 14px;
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--ink-700);
}

/* --- The question column ------------------------------------------------- */
/* The lists are bound to their own content width, because the hairline is the
   container in this system and a rule that runs 370px past the last word reads
   as an unfinished table rather than as a row. The width is the grid's own sum:
   the 16rem verdict column + the 40px gap + the 30em elaboration measure. Bind
   the list, never widen the measure to meet the rule. */
.saq__list,
.sav__list { max-width: calc(16rem + 40px + 28.125rem); }

.saq__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  padding-block: 28px;
  border-top: 1px solid var(--border);
  align-items: start;
}
.saq__row:last-child { border-bottom: 1px solid var(--border); }

/* The question is the row's name, so it is a heading and it is quiet. The
   verdict beneath it is the loud element — hierarchy here runs answer-first,
   because the answers are the content and the questions are the prompts. */
.saq__q {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: 1.45;
  color: var(--ink-700);
}

.saq__v {
  font-family: var(--font-heading);
  font-weight: 600;
  /* The documented Title step, not a new one. The verdict only has to dominate
     its own row, and it already does that on three axes at this size: face
     (Clash against the question's Satoshi), weight (600 against 500) and size
     (1.375rem against 1.0625rem). An invented step between Title and Headline
     would buy nothing the face change has not already bought. */
  font-size: var(--fs-h3);
  line-height: 1.15;
  letter-spacing: -0.02em;
  word-spacing: 0.03em;
  color: var(--ink-950);
  text-wrap: balance;
}

.saq__e {
  font-size: var(--fs-sm);
  line-height: 1.65;
  color: var(--ink-500);
  /* 30em, NOT 64ch. `ch` is the advance width of "0", and Satoshi's figures are
     wide enough that a 64ch cap renders ~96-105 characters a line at 1440 —
     measured, not estimated — which is well past the 65-75 readable band. This
     is the same defect the Process review found on .clk__d: the cap was applied
     in the unit that hides it. Express prose measures here in em. */
  max-width: 30em;
}

/* Base rules first, media query after — a @media block adds no specificity and
   this trap has already cost this project two silent layout failures. */
@media (min-width: 900px) {
  /* The question spans BOTH columns rather than taking a term column of its
     own. The Spanish questions are the binding case — "Mis clientes llaman en
     español. ¿Eso funciona fuera de Raleigh?" is ~60 characters and would run
     five or six lines inside any term column narrow enough to leave the
     elaboration a sensible measure. Full width costs one line and cannot
     overflow in either language. */
  .saq__row {
    /* 16rem, matched by .sav__row below so both sections put their value column
       on the same left edge. The two sections read as one register down the
       page; two value edges 30px apart read as a mistake. 16rem rather than
       15rem because the Spanish verdicts are the long ones — "En los dos
       idiomas, en todas partes." — and the extra rem buys a cleaner wrap. */
    grid-template-columns: 16rem minmax(0, 1fr);
    column-gap: 40px;
    row-gap: 14px;
  }
  .saq__q { grid-column: 1 / -1; grid-row: 1; }
  .saq__v { grid-column: 1; grid-row: 2; }
  .saq__e { grid-column: 2; grid-row: 2; }
}

/* --- What does change ---------------------------------------------------- */
.sav__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  padding-block: 24px;
  border-top: 1px solid var(--border);
  align-items: start;
}
.sav__row:last-child { border-bottom: 1px solid var(--border); }

.sav__t {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: 1.45;
  color: var(--ink-950);
}
.sav__d {
  font-size: var(--fs-sm);
  line-height: 1.65;
  color: var(--ink-500);
  max-width: 30em;   /* em, not ch — see the note on .saq__e */
}

@media (min-width: 720px) {
  /* 16rem + 40px gap, identical to .saq__row, so the value columns of the two
     sections land on one left edge. */
  .sav__row { grid-template-columns: 16rem minmax(0, 1fr); column-gap: 40px; }
}

/* --- Close --------------------------------------------------------------- */
/* All three token groups are re-inked, never one or two: leaving --ui-* at
   their light values draws .ui-btn--outline as --ink-950 on --surface-deep and
   the phone CTA becomes an unreadable dark pill that still looks present. */
.sacc {
  background: var(--surface-deep);
  color: #fff;
  --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;
  --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;
}

.sacc__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;
  color: #fff;
  max-width: 18ch;
}
.sacc__p {
  margin-top: 18px;
  max-width: 34em;
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--ink-on-deep);
}
.sacc__actions { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 12px; }