/* ---------------------------------------------------------------------------
   commercial-service-pages.css  -  the root level commercial service pages
   (/crm-reactivation-agency/ and siblings), programme 2, 2026-10-29.

   LOCK 1. This file is loaded ONLY by those pages. The home page carries its
   own inline styles and loads nothing but /assets/fonts.css, so no rule here
   can reach it. Nothing in site.css or service-pages.css is modified; this
   file only adds. Table styling is deliberately NOT redefined, because
   service-pages.css already scopes .svc-page .svc-table and both files are
   loaded together.

   Every rule is scoped under .svc-page, set on <main> of the generated pages.
   Variables come from site.css (--line, --bg-2, --bg-card, --text, --text-60,
   --text-40, --g3, --font-display).
--------------------------------------------------------------------------- */

/* Hero ---------------------------------------------------------------------
   The entity line and the review date are content, not decoration: Lock 5
   requires the legal entity on every page and the brief requires a visible
   last reviewed date matching dateModified. Neither is ever hidden. */
.svc-page .svc-hero h1{font-family:var(--font-display);font-size:clamp(30px,5vw,50px);
  line-height:1.1;letter-spacing:-.02em;margin:10px 0 18px;max-width:20ch}
.svc-page .svc-entity{color:var(--text-60);font-size:15px;line-height:1.65;
  max-width:62ch;margin:0 0 10px}
.svc-page .svc-reviewed{color:var(--text-40);font-size:12.5px;letter-spacing:.04em;
  margin:0}

/* The 40 to 80 word answer block. First thing under the H1, deliberately
   large, because it is the passage an answer engine is most likely to lift. */
.svc-page .svc-answer{font-size:clamp(17px,2.1vw,20px);line-height:1.6;
  color:var(--text);max-width:68ch;margin:0;padding:22px 24px;
  border-left:2px solid var(--g3);background:var(--bg-2);border-radius:0 14px 14px 0}

/* Lede paragraph that opens a section, answering its own H2 first. */
.svc-page .svc-lede{color:var(--text-60);font-size:16px;line-height:1.7;
  max-width:70ch;margin:0 0 22px}

/* Fit: two columns that stack on a phone ----------------------------------- */
.svc-page .svc-split{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.svc-page .svc-split h3{font-size:15px;letter-spacing:.02em;margin:0 0 14px;
  color:var(--text)}

/* Lists --------------------------------------------------------------------
   One shared list style. The strong lead-in carries the qualifier and the
   rest of the item carries the reason, so each bullet holds a fact. */
.svc-page .svc-list{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.svc-page .svc-list li{position:relative;padding:13px 16px 13px 38px;
  border:1px solid var(--line);border-radius:12px;background:var(--bg-card);
  color:var(--text-60);font-size:14.5px;line-height:1.65}
.svc-page .svc-list li strong{color:var(--text);font-weight:600}
.svc-page .svc-list li::before{content:"";position:absolute;left:16px;top:21px;
  width:7px;height:7px;border-radius:50%;background:var(--g3)}
/* Disqualifiers are mandatory on every page and must read as disqualifiers. */
.svc-page .svc-not li::before{background:var(--text-40);border-radius:1px;
  width:8px;height:2px;top:24px}

/* Numbered process ---------------------------------------------------------
   A real <ol>, so the order survives with the styling stripped off, which is
   how a language model reads it. */
.svc-page .svc-steps{list-style:none;counter-reset:svcstep;padding:0;margin:0;
  display:grid;gap:14px}
.svc-page .svc-steps > li{counter-increment:svcstep;position:relative;
  padding:18px 20px 18px 62px;border:1px solid var(--line);border-radius:14px;
  background:var(--bg-card)}
.svc-page .svc-steps > li::before{content:counter(svcstep);position:absolute;
  left:20px;top:18px;width:28px;height:28px;border-radius:50%;
  display:grid;place-items:center;background:var(--bg-2);
  border:1px solid var(--line-2);color:var(--g3);font-size:13px;font-weight:600}
.svc-page .svc-steps h3{font-size:15.5px;margin:0 0 8px;color:var(--text)}
.svc-page .svc-steps p{color:var(--text-60);font-size:14.5px;line-height:1.65;
  margin:0 0 8px}
.svc-page .svc-needs{color:var(--text-40);font-size:13.5px;margin:0}
.svc-page .svc-needs strong{color:var(--text-60)}

/* Depth section ------------------------------------------------------------ */
.svc-page [data-svc="depth"] h3{font-size:16px;margin:30px 0 12px;color:var(--text)}
.svc-page [data-svc="depth"] p{color:var(--text-60);font-size:15px;line-height:1.72;
  max-width:72ch}

/* Proof --------------------------------------------------------------------
   Lock 3. When a page has no registered outcome it says so in this block,
   plainly and without styling that softens it. */
.svc-page .svc-gap{color:var(--text);font-size:15.5px;line-height:1.7;max-width:70ch;
  padding:18px 20px;border:1px solid var(--line-2);border-radius:12px;
  background:var(--bg-2);margin:0 0 26px}

/* FAQ ----------------------------------------------------------------------
   Deliberately NOT an accordion. The brief requires the answers visible in
   the HTML rather than hidden behind a details element. */
.svc-page .svc-qa{padding:18px 0;border-bottom:1px solid var(--line)}
.svc-page .svc-qa:last-child{border-bottom:0}
.svc-page .svc-qa h3{font-size:16px;margin:0 0 9px;color:var(--text);line-height:1.45}
.svc-page .svc-qa p{color:var(--text-60);font-size:14.8px;line-height:1.7;margin:0;
  max-width:74ch}

/* Sources ------------------------------------------------------------------ */
.svc-page .svc-sources{color:var(--text-60);font-size:13.5px;line-height:1.75;
  padding-left:20px;margin:0;display:grid;gap:9px}
.svc-page .svc-sources a{color:var(--text-40);text-decoration:underline;
  text-underline-offset:2px;word-break:break-word}
.svc-page .svc-sources a:hover{color:var(--g3)}

/* CTA and the plain text twin pointer -------------------------------------- */
.svc-page .svc-cta{margin:30px 0 0;padding:26px;border:1px solid var(--line-2);
  border-radius:16px;background:var(--bg-2)}
.svc-page .svc-cta p{margin:0 0 16px;color:var(--text);font-size:16px;line-height:1.65;
  max-width:64ch}
.svc-page .svc-cta p:last-child{margin:0}
.svc-page .svc-twin{margin:22px 0 0;color:var(--text-40);font-size:13px;line-height:1.7}
.svc-page .svc-twin a{color:var(--text-60);text-decoration:underline;
  text-underline-offset:2px}

/* Accessibility ------------------------------------------------------------
   WCAG 2.4.7. The generated pages add links inside tables and lists, so the
   focus ring is set here rather than relying on the browser default against
   a dark background. */
.svc-page a:focus-visible,.svc-page .btn:focus-visible{outline:2px solid var(--g3);
  outline-offset:3px;border-radius:4px}

/* Responsive ---------------------------------------------------------------
   375 to 1920. Only the two column fit block needs to change; everything else
   is single column already and the table wrapper scrolls on its own. */
@media (max-width:760px){
  .svc-page .svc-split{grid-template-columns:1fr;gap:22px}
  .svc-page .svc-answer{padding:18px 18px;font-size:16.5px}
  .svc-page .svc-steps > li{padding:16px 16px 16px 56px}
  .svc-page .svc-cta{padding:20px}
}

/* Users who ask for less motion get none. No animation is defined above, so
   this only guards anything inherited from site.css inside these sections. */
@media (prefers-reduced-motion:reduce){
  .svc-page *{animation:none !important;transition:none !important}
}