/* ============================================================================
   Service landing pages (New build / Rescue / Retainer)
   Loaded only by /new-build, /rescue, /retainer on top of site.css + page.css.
   All rules are scoped under .page-svc and prefixed .svc- so nothing here can
   leak into the homepage or the case-study detail pages. Per-page brand tone
   comes from the --svc-tone custom property set on the body variant class.
   ========================================================================== */

.page-svc--build     { --svc-tone: #2e5c8a; --svc-tone-soft: #46739e; }
.page-svc--rescue    { --svc-tone: #c4513a; --svc-tone-soft: #d06b54; }
.page-svc--retainer  { --svc-tone: #3e8a6c; --svc-tone-soft: #57a184; }
/* Editorial guide pages share the build/rescue tones. */
.page-svc--wordpress { --svc-tone: #2e5c8a; --svc-tone-soft: #46739e; }
.page-svc--laravel   { --svc-tone: #c4513a; --svc-tone-soft: #d06b54; }

/* Force a plain white canvas on these pages (site.css defaults body to the
   cream --paper tint). The hero and body sections have no background of their
   own, so this shows through as clean white. */
.page-svc { background: #fff; }

/* ---- Hero ------------------------------------------------------------- */
/* Heading accent recolours to the page tone. */
.page-svc .page-hero h1 .svc-hl { color: var(--svc-tone); }

.page-svc .page-hero .tagline {
  max-width: 46ch;
  font-size: 1.12rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

/* Hero CTA row (site.css .section-cta-row lives in home.css only, so define
   our own spacing here). */
.svc-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  margin: 26px 0 4px;
}
.svc-cta-aside {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--ink-soft);
  font-size: .96rem;
}

/* Buttons use the site-standard .btn-primary / .btn-primary--hot from site.css
   with no overrides here, so the CTAs match the rest of the site exactly. */

/* ---- Animation mount -------------------------------------------------- */
/* Sits in the left column under the pull-quote. Populated by
   /assets/js/service-illustrations.js, which finds .svc-illo[data-illo] and
   renders + scales to the container width. No tint, border or box — it reads on
   the plain white page. Holds a little height so the page doesn't reflow before
   the scene loads. */
.svc-illo {
  margin: 4px 0 20px;
  width: 100%;
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  overflow: hidden;
}
.svc-illo canvas,
.svc-illo svg { max-width: 100%; height: auto; display: block; }

/* ---- Sidebar pull-quote ---------------------------------------------- */
/* Higher specificity than page.css's `.page-sidebar .sidebar-quote` so the
   left rule recolours to the page tone. */
.page-svc .page-sidebar .sidebar-quote { border-left-color: var(--svc-tone); }
.page-svc .page-sidebar .sidebar-quote cite { color: var(--ink-soft); }

.svc-sidebar-cta {
  margin-top: 4px;
  font-family: var(--font-sans);
  font-size: .82rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--svc-tone);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.svc-sidebar-cta:hover { color: var(--svc-tone-soft); }

/* ---- Prose helpers ---------------------------------------------------- */
/* Numbered "how it works" steps. */
.svc-steps { list-style: none; margin: 0 0 4px; padding: 0; counter-reset: svc-step; }
.svc-steps li {
  position: relative;
  padding: 2px 0 16px 52px;
  margin: 0;
  min-height: 40px;
}
.svc-steps li::before {
  counter-increment: svc-step;
  content: counter(svc-step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: .8rem;
  letter-spacing: .02em;
  color: var(--svc-tone);
  background: color-mix(in srgb, var(--svc-tone) 12%, transparent);
  border-radius: 9px;
}
.svc-steps li strong { color: var(--ink); }

/* Tick-marked "what you get" list. */
.svc-points { list-style: none; margin: 0 0 6px; padding: 0; }
.svc-points li {
  position: relative;
  padding: 0 0 12px 30px;
}
.svc-points li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 8px;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--svc-tone);
  transform: rotate(45deg);
}

/* Pain -> remedy pair, used on the editorial guide pages. Pain sits on a
   neutral ink rule (kept tone-agnostic so it reads the same on the red Laravel
   page and the blue WordPress page); the fix carries the page tone. */
.svc-pain,
.svc-fix {
  margin: 0 0 10px;
  padding: 10px 0 10px 16px;
  border-left: 3px solid;
  line-height: 1.5;
}
.svc-pain { border-left-color: var(--ink-mute); color: var(--ink-soft); }
.svc-fix  { border-left-color: var(--svc-tone); color: var(--ink); }
.svc-pain .svc-lbl,
.svc-fix .svc-lbl {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  display: inline-block;
  margin-right: 8px;
}
.svc-pain .svc-lbl { color: var(--ink-mute); }
.svc-fix  .svc-lbl { color: var(--svc-tone); }

/* Reassurance line — soft tinted panel closing a section. */
.svc-reassure {
  margin: 8px 0 0;
  padding: 18px 22px;
  border-left: 3px solid var(--svc-tone);
  background: color-mix(in srgb, var(--svc-tone) 6%, var(--paper));
  border-radius: 0 10px 10px 0;
  font-family: var(--font-serif);
  font-size: 1.08rem;
  line-height: 1.5;
  color: var(--ink);
}

/* Closing CTA band inside the prose column. */
.svc-close {
  margin-top: 34px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}
.svc-close h2 { margin-top: 0; }

/* ---- retainer pricing summary — solid tiles, matches the homepage boxes ---- */
.svc-tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 10px 0 8px; }
.svc-tier { display: flex; flex-direction: column; background: var(--tier-bg, #3e8a6c); color: #fff; border-radius: 16px; padding: 22px 20px; }
.svc-tier .svc-tier-tag { align-self: flex-start; background: rgba(255,255,255,.92); color: #1a1c24; font: 600 .68rem/1 'IBM Plex Sans', system-ui, sans-serif; text-transform: uppercase; letter-spacing: .06em; padding: 4px 8px; border-radius: 4px; margin-bottom: 12px; }
.svc-tier .svc-tier-name { font-family: 'Fraunces', serif; font-weight: 900; font-size: 1.18rem; margin: 0 0 2px; color: #fff; }
.svc-tier .svc-tier-hours { font-size: .82rem; opacity: .85; margin: 0 0 14px; color: #fff; }
.svc-tier .svc-tier-price { font-family: 'Fraunces', serif; font-weight: 800; font-size: 1.5rem; line-height: 1; margin: 0 0 14px; color: #fff; white-space: nowrap; }
.svc-tier .svc-tier-price small { font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: .78rem; font-weight: 600; opacity: .82; }
.svc-tier .svc-tier-desc { font-size: .92rem; line-height: 1.45; margin: 0; color: rgba(255,255,255,.95); }
.svc-tiers-note { font-size: .9rem; color: var(--ink-soft, #34363d); margin: 6px 0 26px; }
@media (max-width: 720px) { .svc-tiers { grid-template-columns: 1fr; gap: 12px; } }

/* ---- localhost-only article/draft pages ---- */
.page-svc--vibe { --svc-tone: #6855a8; }
.page-svc--wpadmin { --svc-tone: #2e5c8a; }
.page-svc--cms { --svc-tone: #2f7d84; }
.page-svc--web { --svc-tone: #a8712e; }
.page-svc--bench { --svc-tone: #3e8a6c; }
.page-svc--aiadmin { --svc-tone: #4b5fa6; }
.page-svc--aicx { --svc-tone: #2f8f6f; }
.page-svc--agency { --svc-tone: #9c4f86; }

/* ---- localhost-only meta layer (gated in PHP by isLocalPreview; never ships) ---- */
.page-svc .meta-panel {
  margin: 6px 0 30px; padding: 18px 20px;
  background: #fbf3d9; border: 2px dashed #b8902f; border-radius: 10px;
  font-family: var(--font-sans); font-size: .9rem; line-height: 1.55; color: #4a3d1a;
}
.page-svc .meta-panel h3 { font-family: var(--font-sans); font-size: 1rem; margin: 16px 0 6px; color: #6b5410; }
.page-svc .meta-panel h3:first-of-type { margin-top: 4px; }
.page-svc .meta-panel p { margin: 0 0 10px; }
.page-svc .meta-panel blockquote { margin: 0 0 10px; padding-left: 14px; border-left: 3px solid #d8b968; color: #5a4a1e; font-style: italic; }
.page-svc .meta-panel .meta-tag {
  display: inline-block; font-size: .64rem; letter-spacing: .1em; text-transform: uppercase;
  font-weight: 700; color: #8a6d15; background: #f2e3b0; padding: 3px 8px; border-radius: 4px; margin-bottom: 12px;
}
.page-svc .meta-note {
  display: block; margin: -6px 0 18px; padding: 8px 12px;
  background: #fbf3d9; border-left: 3px solid #b8902f; border-radius: 0 6px 6px 0;
  font-family: var(--font-sans); font-size: .82rem; line-height: 1.5; color: #5a4a1e;
}
.page-svc .meta-note::before {
  content: "META"; display: block; font-size: .58rem; letter-spacing: .11em; font-weight: 700; color: #8a6d15; margin-bottom: 3px;
}

/* Vibe page: restyle the stat bubbles as a light, rounded, dashed-outline card,
   deliberately dropping the coloured left-border look the article itself calls
   out as an LLM tell. Applies to every .svc-stat on the vibe page. */
.page-svc--vibe .svc-stat {
  background: color-mix(in srgb, var(--svc-tone) 4%, #fff);
  border: 3px dashed color-mix(in srgb, var(--svc-tone) 38%, #fff);
  border-radius: 12px;
  padding: 16px 18px;
}
/* 2x2 grid for the adoption-vs-trust stat quartet. */
.svc-stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 18px 0; }
.svc-stat-grid .svc-stat { margin: 0; height: 100%; }
@media (max-width: 620px) { .svc-stat-grid { grid-template-columns: 1fr; } }
/* Inline brand-colour highlight for prose, used sparingly. */
.page-svc .page-prose .svc-key { color: var(--svc-tone); }
/* First paragraph of an article reads as large body (matches the site type scale). */
.page-svc .page-prose > p:first-of-type { font-size: var(--text-lg); }
/* Inline literal-prompt token. */
.page-svc .page-prose .svc-prompt {
  font-style: italic;
  background: color-mix(in srgb, var(--svc-tone) 7%, #fff);
  border-radius: 6px;
  padding: 1px 8px;
}
/* Real verbatim prompts pulled from Robin's own logs. */
.page-svc .page-prose .svc-said {
  margin: 4px 0 18px;
  padding: 12px 16px;
  background: color-mix(in srgb, var(--svc-tone) 5%, #fff);
  border: 1px dashed color-mix(in srgb, var(--svc-tone) 30%, #fff);
  border-radius: 10px;
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--ink);
  line-height: 1.5;
}
.page-svc .page-prose .svc-said .svc-said-lbl {
  display: block;
  font-family: var(--font-sans);
  font-style: normal;
  font-size: .66rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--svc-tone);
  margin-bottom: 5px;
}
.page-svc .page-prose .svc-said .svc-said-note {
  display: block;
  margin-top: 7px;
  font-family: var(--font-sans);
  font-style: normal;
  font-size: .78rem;
  color: var(--ink-mute);
}
.svc-draft-flag { display: inline-block; background: #6855a8; color: #fff; font: 600 .68rem/1 'IBM Plex Sans', system-ui, sans-serif; text-transform: uppercase; letter-spacing: .06em; padding: 5px 9px; border-radius: 4px; margin-bottom: 14px; }
.svc-stat { background: color-mix(in srgb, var(--svc-tone) 8%, #fff); border-left: 3px solid var(--svc-tone); border-radius: 0 8px 8px 0; padding: 14px 16px; margin: 18px 0; }
.svc-stat strong { color: var(--svc-tone); }
.svc-stat .src { display: block; font-size: .78rem; color: var(--ink-mute); margin-top: 4px; }