/* ==========================================================================
   Service pages ×5 (one template, five configs) — resources/views/pages/service.blade.php
   Reuses the page kit (page.css: pg-hero/pg-story/pg-sheet/pg-do/pg-faq/pg-close) and
   businesses.css (.biz-card) directly. This file only adds what's specific to a service
   page: problem cards, the deliverable vector figure, the "how I work" timeline, client
   work cards and the pricing tiers. Tone = var(--tone-*) from base.css [data-tone].
   Plan: design-runs/2026-09-28-site-v3/pages/00-plan.md §1
   ========================================================================== */

/* ---- Hero: r2 review — a proper 2×2 evidence grid for the 4 facts (scoped to .svc-page,
   the kit's own .pg-facts stays untouched for other pages). Ruled cells, slightly bigger text. */

.svc-page .pg-facts {
  gap: 0;
  border: 1px solid var(--slate-200);
  border-radius: var(--r-md);
  overflow: hidden;
}

.svc-page .pg-facts li {
  padding: 14px 16px;
  border-top: 0;
  border-bottom: 1px solid var(--slate-200);
  font-size: 1.0625rem;
}

.svc-page .pg-facts li:last-child,
.svc-page .pg-facts li:nth-last-child(2):nth-child(odd) { border-bottom: 0; }

@media (min-width: 560px) {
  .svc-page .pg-facts li { border-right: 1px solid var(--slate-200); }
  .svc-page .pg-facts li:nth-child(even) { border-right: 0; }
  .svc-page .pg-facts li:nth-last-child(-n + 2) { border-bottom: 0; }
}

/* Addendum (google-ads review): on phones/tablets, the CTA row comes right after the lede,
   before the portrait — the sales action shouldn't wait behind facts + a ~400px photo. */
@media (max-width: 1199.98px) {
  .svc-page .pg-hero__actions { order: 4; }
  .svc-page .pg-hero__media { order: 5; }
  .svc-page .pg-facts { order: 6; }
}

/* r4: fact rows land ~52–56px tall on phones. (The portrait now sizes itself from the kit's
   hero stage — owner 2026-09-29: bigger, centred, tools around him.) */
@media (max-width: 639.98px) {
  .svc-page .pg-facts li { padding: 15px 16px; }
}

/* ---- r4 review: phones — vertical economy across every section. Padding goes down,
   font sizes don't (all body text here stays ≥16px). ---- */
@media (max-width: 639.98px) {
  /* Section padding −15–20% (kit floor is 48px; 40px is a 17% cut). */
  .svc-page .pg-section { padding-block: 40px; }

  /* H2s capped ~42–46px so they never grow past this even near the 640px edge. */
  .svc-page .pg-h2 { font-size: clamp(2.25rem, 1.15rem + 4vw, 2.875rem); }

  /* Timeline: gap between steps down another 8–10px. */
  .svc-step { padding-bottom: 10px; }
  .svc-step::before { bottom: -2px; }

  /* Pricing: tier cards ~10% shorter; the quote card loses one padding layer. */
  .svc-tier { padding: 20px 18px; gap: 10px; }
  .svc-quote { padding: 16px; gap: 16px; }

  /* FAQ help card: −15% vertical padding only (scoped here, the kit's .pg-help stays 22px
     everywhere else). */
  .svc-page .pg-help { padding-block: 19px; }
}

/* Hero media: the kit's stage (page.css) — owner feedback 2026-09-29 overrides the r4
   "2 small tiles" review: he wants the portrait big and centred in its half, with the
   service's real tools in front of and behind him. */

/* ---- 01 Is this you: a compact ruled row list + a photo fading into the section ------- */

.svc-problems { background: var(--paper); }
.svc-problems .pg-story__text .pg-lede { max-width: 38rem; }

/* Addendum: desktop split text ~52% / image ~48% (the list is the main information), and the
   scene photo ~10% smaller than the kit's default column so it doesn't dominate. */
@media (min-width: 1024px) {
  .svc-problems .pg-story__grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); }
  .svc-problems .pg-story__media { max-width: 90%; margin-left: auto; }
}

/* r1 review: was a loose 2-col card stack (1404px desktop) — now a thin ruled row list, one
   column (the text column here is already only ~45% of page width beside the photo, so 2
   columns wrapped every sentence to 3 lines and undid the compaction — plan §1 allows either). */
.svc-problem-grid {
  display: grid;
  gap: 0;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--slate-200);
}

/* Addendum (google-ads review): rows land 44–52px tall (icon 32px + 8px padding-block). */
.svc-problem-row {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding-block: 8px;
  border-bottom: 1px solid var(--slate-200);
}

.svc-problem-row__icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--tone-line);
  border-radius: 50%;
  background: var(--tone-bg);
  color: var(--tone-mark);
}

.svc-problem-row__icon svg { width: 16px; height: 16px; }

/* Specificity note: a plain `.svc-problem-row__text` loses to the kit's own
   `.pg-story__text p:not(.eyebrow)` (this row sits inside .pg-story__text), which forces its
   larger clamp() font-size, 1.65 line-height and an 18px top margin — the exact cause of the
   r1 review's 1404px section. `.svc-problems .svc-problem-grid .svc-problem-row__text` (3
   classes) always wins regardless of stylesheet order. */
.svc-problems .svc-problem-grid .svc-problem-row__text {
  max-width: none;
  margin: 0;
  color: var(--slate-700);
  font-size: 1rem;
  line-height: 1.4;
}

.svc-problem-row__text strong { color: var(--ink-900); font-weight: 700; }

/* ---- 02 What's included: pg-sheet reused for the 6 features │ a boxed hand-built vector --- */

/* r4 review: <1200 the 6 capabilities stay the dominant, full-width object (3×2 ≥900) with
   the vector secondary below. ≥1200: a real 65/35 two-column composition — the grid narrows
   to 2 cols inside its 65%, the vector grows into its 35% (no longer an "orphan card"). */
.svc-features { background: var(--warm-50); }
.svc-features .pg-sheet { background: var(--paper); margin: 0; padding: 24px 22px 20px; }
.svc-features .pg-sheet__title { margin-bottom: 14px; font-size: 1.5rem; }
.svc-features .pg-sheet__cell { padding: 20px; gap: 4px 14px; }

.svc-features__layout {
  display: grid;
  gap: clamp(20px, 2.5vw, 28px);
}

@media (min-width: 900px) {
  .svc-features .pg-sheet__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1200px) {
  .svc-features__layout { grid-template-columns: minmax(0, 1.86fr) minmax(0, 1fr); align-items: start; gap: 32px; }
  .svc-features .pg-sheet__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* The diagram grows into its full 35% column instead of staying capped at the <1200
     "secondary" size — 1.5–2× its previous area, nodes/labels stay readable. */
  .svc-features__layout .svc-vector--compact { max-width: none; margin: 0; padding: 26px 26px 24px; }
  .svc-features__layout .svc-vector--compact .svc-vector__art { max-height: none; width: 100%; }
  .svc-features__layout .svc-vector--compact .svc-nodes { transform: none; }
}

/* r3 review (wordpress): the first 2 capabilities get more visual weight, so 6 items don't
   read as a flat spec table — tone-coloured icon + bigger label, same facts, no new claims. */
.svc-features .pg-sheet__cell:nth-child(-n + 2) .pg-sheet__icon { background: var(--tone-mark); }
.svc-features .pg-sheet__cell:nth-child(-n + 2) dt { color: var(--tone-ink); font-size: 0.9375rem; }
.svc-features .pg-sheet__cell:nth-child(-n + 2) dd { color: var(--ink-900); font-weight: 500; }

/* The vector is secondary <1200: a compact card, capped short, centred below the grid. */
.svc-vector--compact {
  max-width: 640px;
  margin: clamp(14px, 2vw, 20px) auto 0;
}

.svc-vector--compact .svc-vector__art { max-height: 170px; width: auto; margin-inline: auto; }
.svc-vector--compact .svc-nodes { transform: scale(0.92); transform-origin: center; }

/* r4 review: phones — items 1–2 emphasised full-width cards, items 3–6 compact ≥16px rows
   (icon + bold title + one line, same pattern as .svc-problem-row). Padding −15–20% overall. */
@media (max-width: 639.98px) {
  .svc-features .pg-sheet { padding: 14px 12px 12px; }

  .svc-features .pg-sheet__cell:nth-child(-n + 2) {
    grid-column: 1 / -1;
    padding: 16px;
    border: 1px solid var(--tone-line);
    border-radius: var(--r-lg);
    background: var(--tone-bg);
  }

  .svc-features .pg-sheet__cell:nth-child(-n + 2) dt { font-size: 1.0625rem; }
  .svc-features .pg-sheet__cell:nth-child(-n + 2) dd { font-size: 1rem; }

  .svc-features .pg-sheet__cell:nth-child(n + 3) {
    grid-template-columns: 28px minmax(0, 1fr);
    grid-template-areas: "icon text";
    gap: 10px;
    padding: 10px 2px;
    border: 0;
    border-bottom: 1px solid var(--slate-200);
    border-radius: 0;
    background: none;
  }

  .svc-features .pg-sheet__cell:nth-child(n + 3) .pg-sheet__icon { grid-area: icon; width: 28px; height: 28px; }
  .svc-features .pg-sheet__cell:nth-child(n + 3) .pg-sheet__icon svg { width: 14px; height: 14px; }

  .svc-features .pg-sheet__cell:nth-child(n + 3) dt {
    grid-area: text;
    display: inline;
    margin: 0;
    color: var(--ink-900);
    font-size: 1rem;
    font-weight: 700;
    text-transform: none;
    letter-spacing: normal;
  }

  .svc-features .pg-sheet__cell:nth-child(n + 3) dt::after { content: ". "; }

  .svc-features .pg-sheet__cell:nth-child(n + 3) dd {
    grid-area: text;
    display: inline;
    margin: 0;
    color: var(--slate-700);
    font-size: 1rem;
    line-height: 1.4;
  }

  /* +20px padding, slightly larger labels, per item 1's phone spec. */
  .svc-vector--compact { padding: 20px 18px 16px; margin-top: 16px; }
  .svc-vector--compact .svc-vector__art { max-height: 140px; }
  .svc-vector--compact .svc-vector__caption strong { font-size: 1.125rem; }
  .svc-vector--compact .svc-vector__caption span { font-size: 1rem; }
}

.svc-vector {
  margin: 0;
  padding: 16px 18px 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--r-xl);
  background: color-mix(in srgb, var(--paper) 70%, var(--warm-50));
}

.svc-vector__caption { display: grid; gap: 4px; margin: 0 0 18px; }
.svc-vector__caption strong { color: var(--ink-900); font-size: 1.0625rem; font-weight: 700; }
.svc-vector__caption span { color: var(--slate-700); font-size: 1rem; line-height: 1.5; }

.svc-vector__art { display: block; width: 100%; height: auto; color: var(--tone-mark); }
.svc-vector__art .svc-vector__line { stroke: var(--slate-300); }
.svc-vector__art .svc-vector__ink { stroke: var(--ink-900); fill: var(--ink-900); }
.svc-vector__art .svc-vector__tone { stroke: var(--tone-mark); fill: var(--tone-mark); }
.svc-vector__art .svc-vector__tonebg { fill: var(--tone-bg); stroke: var(--tone-edge); }

.svc-vector__logos {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

.svc-vector__logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 8px;
  border: 1px solid var(--slate-200);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink-900);
  font-size: 0.8125rem;
  font-weight: 600;
}

.svc-vector__logo span { display: grid; place-items: center; width: 18px; height: 18px; }
.svc-vector__logo svg { width: 16px; height: 16px; }

/* Node-chain vector (Ads tree / AI automation): circular tiles + a dashed connector. */
.svc-nodes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
}

.svc-node {
  display: grid;
  justify-items: center;
  gap: 8px;
  width: 92px;
  text-align: center;
}

.svc-node__mark {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 1px solid var(--tone-line);
  border-radius: 14px;
  background: var(--tone-bg);
  color: var(--tone-mark);
}

.svc-node__mark svg,
.svc-node__mark span { width: 26px; height: 26px; }

.svc-node__label { color: var(--ink-900); font-size: 0.8125rem; font-weight: 600; line-height: 1.25; }

.svc-node-line {
  flex: 1 1 24px;
  min-width: 16px;
  height: 0;
  margin: 0 4px 22px;
  border-top: 2px dashed var(--slate-300);
}

@media (max-width: 479.98px) {
  .svc-nodes { justify-content: center; }
  .svc-node { width: 78px; }
  .svc-node-line { flex-basis: 12px; }
}

/* ---- 03 How I work: numbered icon timeline │ a tilted framed photo -------------------- */

.svc-steps { background: var(--paper); }

.svc-steps__grid {
  display: grid;
  gap: 40px;
  align-items: start;
}

.svc-step-list {
  display: grid;
  gap: 0;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

.svc-step {
  position: relative;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 18px;
  padding-bottom: 28px;
}

.svc-step::before {
  content: "";
  position: absolute;
  top: 52px;
  bottom: 4px;
  left: 25px;
  border-left: 2px dashed var(--slate-300);
}

.svc-step:last-child::before { display: none; }
.svc-step:last-child { padding-bottom: 0; }

.svc-step__node {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 1px solid var(--tone-line);
  border-radius: 50%;
  background: var(--tone-bg);
  color: var(--tone-mark);
  box-shadow: 0 10px 20px -14px rgb(15 23 42 / 0.4);
}

.svc-step__node svg { width: 24px; height: 24px; }

/* Performance-marketing review: compact rows on phones — smaller node, tighter gaps. */
@media (max-width: 639.98px) {
  .svc-step { grid-template-columns: 40px minmax(0, 1fr); gap: 14px; padding-bottom: 18px; }
  .svc-step::before { top: 40px; left: 19px; }
  .svc-step__node { width: 40px; height: 40px; }
  .svc-step__node svg { width: 19px; height: 19px; }
  .svc-step__title { margin-top: 0; font-size: 1.0625rem; }
  .svc-step__text { margin-top: 3px; }
}

.svc-step__title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin: 4px 0 0;
  color: var(--ink-900);
  font-size: 1.1875rem;
  font-weight: 700;
  line-height: 1.3;
}

.svc-step__num {
  color: var(--tone-ink);
  font-family: var(--font-serif);
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
}

.svc-step__text {
  margin: 6px 0 0;
  color: var(--slate-700);
  font-size: 1rem;
  line-height: 1.55;
  text-wrap: pretty;
}

/* A paper-matted, gently tilted photo — distinct from section 01's fade treatment. */
.svc-steps__media { position: relative; padding: 24px 0; }

.svc-frame {
  display: block;
  width: min(100%, 380px);
  margin: 0 auto;
  padding: 12px;
  border-radius: var(--r-lg);
  background: var(--paper);
  box-shadow: var(--shadow-panel);
  transform: rotate(-3deg);
}

.svc-frame img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.svc-note--steps {
  position: absolute;
  top: -6px;
  right: 4%;
  z-index: 1;
  font-size: 1.0625rem;
  transform: rotate(4deg);
}

@media (min-width: 1024px) {
  /* r3: a deliberate 2-column composition — timeline ~60%, photo ~38%, vertically centred
     against the timeline (addendum: photo 10–15% smaller, tighter to the timeline). */
  .svc-steps__grid { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(56px, 6vw, 72px); align-items: center; }
  .svc-frame { transform: rotate(3deg); width: min(100%, 330px); }
}

/* ---- 04 Proof: businesses (biz-card reused) │ client-work cards ------------------------ */

.svc-proof { background: var(--warm-50); }

.svc-proof__honesty {
  max-width: 46rem;
  margin: -4px 0 0;
  color: var(--slate-600);
  font-size: 0.9375rem;
  line-height: 1.5;
  font-style: italic;
}

/* r2 review: "his businesses, not a portfolio grid" — give the rating more weight and cap
   decorative tags at 2 (none on phones), without editing the owner-spec .biz-card component. */
.svc-proof .biz-card__rating { gap: 8px; }
.svc-proof .biz-card__rating strong { font-size: 1.3125rem; }
.svc-proof .biz-card__g svg,
.svc-proof .biz-card__star { width: 20px; height: 20px; }
.svc-proof .biz-card__tags li:nth-child(n + 3) { display: none; }

@media (max-width: 639.98px) {
  .svc-proof .biz-card__tags { display: none; }
}

/* Addendum (google-ads review): grid columns match the card count — 3 cards stretch full
   width instead of sitting in the shared kit's fixed 4-column track with a dead 4th slot. */
@media (min-width: 1200px) {
  .svc-proof .biz__grid[data-count="1"] { grid-template-columns: minmax(0, 420px); justify-content: center; }
  .svc-proof .biz__grid[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .svc-proof .biz__grid[data-count="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Addendum (ai-automation review): ≤2 total proof items — one even row of evidence cards
   (business + client together), not a 1/4-width card with dead space beside it. */
.svc-evidence {
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 640px) {
  .svc-evidence { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
}

.svc-evidence-card {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 22px;
  border: 1px solid var(--color-border);
  border-radius: var(--r-xl);
  background: var(--paper);
  box-shadow: var(--shadow-panel);
}

.svc-evidence-card--client {
  border-style: dashed;
  border-color: var(--slate-300);
  background: color-mix(in srgb, var(--paper) 60%, var(--warm-50));
  box-shadow: none;
}

.svc-evidence-card__kicker {
  margin: 0;
  color: var(--slate-600);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.svc-evidence-card__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.svc-evidence-card__name { margin: 0; color: var(--ink-900); font-size: 1.1875rem; font-weight: 700; }

.svc-evidence-card__rating {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--ink-900);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
}

.svc-evidence-card__rating span:first-child { display: grid; }
.svc-evidence-card__rating span:first-child svg { width: 16px; height: 16px; }
.svc-evidence-card__rating svg:last-of-type { color: var(--amber-500); }
.svc-evidence-card__rating:hover { text-decoration: underline; text-underline-offset: 3px; }

.svc-evidence-card__place {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  color: var(--slate-600);
  font-size: 0.875rem;
}

.svc-evidence-card__place svg { flex-shrink: 0; color: var(--slate-400); }

.svc-evidence-card__line { margin: 4px 0 0; color: var(--slate-700); font-size: 0.9375rem; line-height: 1.5; }

.svc-evidence-card__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px; /* gate: ≥44px targets */
  margin-top: 6px;
  color: var(--blue-700);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  width: fit-content;
}

.svc-evidence-card__link:hover { color: var(--blue-800); }

.svc-proof__subtitle {
  margin: clamp(40px, 5vw, 64px) 0 0;
  color: var(--slate-600);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.svc-proof__subtitle--first { margin-top: clamp(20px, 2.5vw, 28px); }
/* r4 review: the gap before "Client builds" tightens, so it reads as the next beat, not a
   new chapter — Client builds still carries the visual weight via .svc-evidence-card--build. */
.svc-proof__subtitle--tight { margin-top: clamp(24px, 3vw, 36px); }

/* r4 review: "Sites I run" is one contained card (border+bg), 2×2 on desktop, rows
   8–12px shorter — deliberately lighter than "Client builds" below it. */
.svc-sites {
  display: grid;
  gap: 0;
  margin: 14px 0 0;
  padding: 2px 18px;
  list-style: none;
  border: 1px solid var(--color-border);
  border-radius: var(--r-xl);
  background: var(--paper);
}

@media (min-width: 768px) {
  .svc-sites { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; padding: 4px 22px; }
  .svc-site-row:nth-last-child(-n + 2) { border-bottom: 0; }
}

.svc-site-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  padding-block: 7px;
  border-bottom: 1px solid var(--slate-200);
}

.svc-site-row:last-child { border-bottom: 0; }

.svc-site-row__thumb { display: block; width: 44px; height: 44px; overflow: hidden; border-radius: var(--r-md); }
.svc-site-row__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }

.svc-site-row__name { color: var(--ink-900); font-size: 1rem; font-weight: 700; }

.svc-site-row__rating {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--ink-900);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.svc-site-row__rating span:first-child { display: grid; }
.svc-site-row__rating span:first-child svg { width: 15px; height: 15px; }
.svc-site-row__rating svg:last-of-type { color: var(--amber-500); }
.svc-site-row__rating:hover { text-decoration: underline; text-underline-offset: 3px; }

.svc-site-row__link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 44px; /* gate: ≥44px targets */
  color: var(--blue-700);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}

.svc-site-row__link:hover { color: var(--blue-800); }

@media (max-width: 639.98px) {
  .svc-site-row { grid-template-columns: 40px minmax(0, 1fr); grid-template-areas: "thumb name" "thumb rating" "thumb link"; row-gap: 4px; }
  .svc-site-row__thumb { grid-area: thumb; width: 40px; height: 40px; align-self: start; }
  .svc-site-row__name { grid-area: name; }
  .svc-site-row__rating { grid-area: rating; }
  .svc-site-row__link { grid-area: link; }
}

/* "Client builds" (wordpress): the .svc-evidence-card carries a real screenshot and more
   visual weight than the sites list above — these ARE the WordPress/Laravel proof. */
.svc-evidence--builds { margin-top: 16px; }

@media (min-width: 640px) {
  .svc-evidence--builds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.svc-evidence-card--build { padding: 0; overflow: hidden; }
.svc-evidence-card--build .svc-evidence-card__shot { display: block; }
.svc-evidence-card--build .svc-evidence-card__shot img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }
.svc-evidence-card--build .svc-evidence-card__kicker,
.svc-evidence-card--build .svc-evidence-card__top,
.svc-evidence-card--build .svc-evidence-card__line,
.svc-evidence-card--build .svc-evidence-card__link { margin-inline: 20px; }
.svc-evidence-card--build .svc-evidence-card__kicker { margin-top: 16px; }
.svc-evidence-card--build .svc-evidence-card__link { margin-block: 6px 18px; }

.svc-clients {
  display: grid;
  gap: 14px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 640px) {
  .svc-clients { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
}

/* Visibly secondary to the biz-card proof above: lighter border, no photo, smaller name. */
.svc-client {
  display: grid;
  gap: 10px;
  padding: 18px;
  border: 1px dashed var(--slate-300);
  border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--paper) 60%, var(--warm-50));
}

.svc-client__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.svc-client__name { margin: 0; color: var(--ink-900); font-size: 1.0625rem; font-weight: 700; }

.svc-client__status {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border: 1px solid var(--tone-line);
  border-radius: 999px;
  background: var(--tone-bg);
  color: var(--tone-ink);
  font-size: 0.75rem;
  font-weight: 700;
}

.svc-client__place {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--slate-600);
  font-size: 0.875rem;
}

.svc-client__summary { margin: 0; color: var(--slate-700); font-size: 0.9375rem; line-height: 1.5; }

.svc-client__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
}

.svc-client__tags li {
  padding: 4px 10px;
  border: 1px solid var(--slate-200);
  border-radius: 999px;
  color: var(--slate-700);
  font-size: 0.75rem;
  font-weight: 600;
}

.svc-client__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px; /* gate: ≥44px targets */
  margin-top: 4px;
  color: var(--blue-700);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  width: fit-content;
}

.svc-client__link:hover { color: var(--blue-800); }

.svc-proof__asof { margin-top: 12px; color: var(--slate-600); font-size: 0.8125rem; text-align: right; }

.svc-proof__more { display: flex; flex-wrap: wrap; gap: 0 28px; margin: 8px 0 0; }
.svc-proof__more .pg-link { margin-top: 0; }

/* ---- 05 Pricing: three tiers │ a "from" card │ a custom-quote card --------------------- */

.svc-pricing { background: var(--paper); }

.svc-tiers {
  display: grid;
  gap: 18px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 768px) {
  .svc-tiers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.svc-tier {
  display: grid;
  align-content: start;
  gap: 14px;
  padding: 26px 22px;
  border: 1px solid var(--color-border);
  border-radius: var(--r-xl);
  background: var(--warm-50);
}

.svc-tier__name {
  margin: 0;
  color: var(--tone-ink);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.svc-tier__price {
  margin: 0;
  color: var(--ink-900);
  font-family: var(--font-serif);
  font-size: clamp(1.75rem, 1.5rem + 1vw, 2.25rem);
  font-weight: 600;
  line-height: 1.1;
}

.svc-tier__price sub { color: var(--slate-600); font-family: var(--font-sans); font-size: 0.9375rem; font-weight: 500; }

.svc-tier__scope { margin: 0; color: var(--slate-700); font-size: 1rem; line-height: 1.5; }

/* "What sets your quote" (tiers type): the same icon-row list the from/custom cards use. */
/* r4 review: "What sets your quote" + "How quoting works" side by side under the tiers,
   using the full width instead of one half-width block. */
.svc-pricing__lower {
  display: grid;
  gap: 20px;
  margin-top: clamp(20px, 2.5vw, 28px);
}

@media (min-width: 900px) {
  .svc-pricing__lower { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}

.svc-scope {
  margin: 0;
  padding: 20px 22px;
  border: 1px solid var(--color-border);
  border-radius: var(--r-xl);
  background: var(--warm-50);
}

.svc-scope--terms { background: var(--paper); }
.svc-scope--terms .svc-pricing__notes { margin: 0; padding: 0; border: 0; background: none; }

.svc-scope__title {
  margin: 0 0 14px;
  color: var(--ink-900);
  font-size: 1.0625rem;
  font-weight: 700;
}

.svc-pricing__notes {
  display: grid;
  gap: 12px;
  max-width: 46rem;
  margin: 28px 0 0;
  padding: 18px 20px;
  border-left: 3px solid var(--tone-edge);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  background: var(--warm-50);
}

.svc-pricing__notes li {
  display: flex;
  gap: 10px;
  color: var(--slate-700);
  font-size: 1rem;
  line-height: 1.5;
}

.svc-pricing__notes svg { flex-shrink: 0; margin-top: 2px; color: var(--tone-mark); }

/* Single "from ₹X" card (WordPress) or a custom-quote card (AI Automation). */
.svc-quote {
  display: grid;
  gap: 20px;
  margin: clamp(20px, 2.5vw, 28px) 0 0;
  padding: 24px;
  border: 1px solid var(--color-border);
  border-radius: var(--r-xl);
  background: var(--warm-50);
}

/* r3 review (wordpress): a more decisive price:scope ratio (~35:65), price dominant. */
@media (min-width: 768px) {
  .svc-quote { grid-template-columns: minmax(0, 0.58fr) minmax(0, 1fr); align-items: start; gap: 28px; }
}

/* r3 review (ai-automation): the CTA lives with the price, left column, not orphaned below. */
.svc-quote__left { display: grid; gap: 18px; align-content: start; }
.svc-quote__left .why-btn { width: fit-content; }

.svc-quote__price {
  margin: 0;
  color: var(--ink-900);
  font-family: var(--font-serif);
  font-size: clamp(2rem, 1.7rem + 1vw, 2.75rem);
  font-weight: 600;
  line-height: 1.1;
}

.svc-quote__price span { display: block; margin-top: 6px; color: var(--slate-600); font-family: var(--font-sans); font-size: 0.9375rem; font-weight: 500; }

.svc-quote__list {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.svc-quote__list li {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  color: var(--slate-700);
  font-size: 1rem;
  line-height: 1.45;
}

.svc-quote__list strong { display: block; color: var(--ink-900); font-weight: 700; }

.svc-quote__icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--tone-line);
  border-radius: 50%;
  background: var(--tone-bg);
  color: var(--tone-mark);
}

.svc-quote__icon svg { width: 20px; height: 20px; }

.svc-pricing__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.svc-pricing__cta--center { justify-content: center; }

/* ---- 06 Tools: a compact strip (r3 review — was a full editorial section for 4–6 pills) --- */

.svc-tools-strip {
  padding-block: clamp(28px, 3.5vw, 44px);
  background: var(--warm-50);
}

.svc-tools-strip__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 28px; }

.svc-tools-strip__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  color: var(--slate-600);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.svc-tools-strip__title {
  margin: 0;
  color: var(--ink-900);
  font-family: var(--font-serif);
  font-size: 1.1875rem;
  font-weight: 600;
  flex: 0 0 auto;
}

.svc-tools-strip__list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin: 0 0 0 auto;
  padding: 0;
  list-style: none;
}

.svc-tools-strip__list li {
  display: flex;
  align-items: center;
  gap: 10px;
}

.svc-tools-strip__logo { display: grid; place-items: center; width: 26px; height: 26px; flex-shrink: 0; }
.svc-tools-strip__logo svg { width: 24px; height: 24px; }

.svc-tools-strip__text { display: grid; line-height: 1.2; }
.svc-tools-strip__text strong { color: var(--ink-900); font-size: 0.9375rem; font-weight: 700; }
.svc-tools-strip__text span { color: var(--slate-600); font-size: 0.8125rem; }

@media (max-width: 767.98px) {
  .svc-tools-strip { padding-block: clamp(18px, 4vw, 26px); }
  .svc-tools-strip__inner { flex-direction: column; align-items: flex-start; gap: 6px 14px; }
  .svc-tools-strip__list { margin-left: 0; gap: 8px 14px; }
}

/* ---- Related services: a 2×2 compact card grid, ~64–72px per card -------------------- */

.svc-related__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.svc-related-card {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 14px 16px;
  border: 1px solid var(--tone-line);
  border-radius: var(--r-lg);
  background: var(--tone-bg);
  color: inherit;
  text-decoration: none;
  transition: border-color var(--t-fast) var(--ease-out);
}

.svc-related-card:hover { border-color: var(--tone-edge); }
.svc-related-card:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

.svc-related-card__icon {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--paper);
  color: var(--tone-mark);
}

.svc-related-card__icon svg { width: 18px; height: 18px; }

.svc-related-card__name {
  flex: 1 1 auto;
  color: var(--ink-900);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.25;
}

.svc-related-card__arrow { flex-shrink: 0; color: var(--tone-ink); }

/* Caption under the tilted project frame in "How I work" (owner rule: no repeated portraits). */
.svc-frame { margin: 0; }
.svc-frame__cap {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 4px 2px;
  color: var(--slate-700);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.4;
}
.svc-frame__cap svg { flex-shrink: 0; color: var(--tone-mark, var(--blue-600)); }

/* Gate: body copy ≥16px on phones (final sweep 2026-09-29). */
@media (max-width: 639.98px) {
  .svc-proof__honesty, .svc-evidence-card__line { font-size: 1rem; }
}