/* service-page.css — the first screen of the rebuilt service pages and the persona
   pages (hero kind "service", site/service_pages.py). Copy + calls to action on the
   left, an "at a glance" clay card on the right (who it's for / what's included /
   outcome). Below 1000px the card moves under the copy; the composition is otherwise
   identical at every size. Tokens only (clay.css), so html[data-theme] reaches every
   colour; no motion of its own (the shared data-rise reveal honours reduced motion). */

.svc-hero { padding-bottom: clamp(36px, 4vw, 56px); }
.svc-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  gap: clamp(32px, 4.5vw, 80px);
  align-items: center;   /* text and the At-a-glance card balance on one centre line (was end: the
                            heading sat at the card's foot with an empty band above it) */
}
.svc-hero__grid--solo { grid-template-columns: minmax(0, 1fr); }
.svc-hero h1 { max-width: 20ch; font-size: clamp(2.125rem, 3.7vw, 3.5rem); line-height: 1.07; overflow-wrap: break-word; }
.svc-hero__lede { margin-top: 22px; max-width: 58ch; }
.svc-hero__acts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.svc-hero__card { padding: clamp(24px, 2.4vw, 34px); }
.svc-glance { margin: 18px 0 0; border-top: 1px solid var(--line); }
.svc-glance__row { padding: 14px 0 15px; border-bottom: 1px solid var(--line); }
.svc-glance__row:last-child { border-bottom: 0; padding-bottom: 2px; }
.svc-glance__k { font: 500 10.5px/1.6 Inter, sans-serif; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-faint); }
.svc-glance__v { margin: 6px 0 0; font: 400 15px/1.6 Inter, sans-serif; color: var(--ink); }

@media (max-width: 1000px) {
  .svc-hero__grid { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .svc-hero__card { max-width: 640px; }
}
@media (max-width: 520px) {
  .svc-hero__acts .btn { flex: 1 1 100%; justify-content: center; }
}

/* ── imp-services (17 Oct): the body of a service / persona page ──────────────────────
   .svc-body wraps the sections between the hero and the closing band (site/service_pages.py
   layout()). One rail card — Schedule a Call + the response promise (once per page),
   "On this page" on long pages, the sibling services. >= 1100px: the card sits in the
   right column, under the hero's "At a glance" card and the same width, and sticks while
   the page scrolls; every section shell inside leaves that column free. Below: the same
   card in the flow under the hero (its button hidden — the hero's is just above). */
.svc-body { --svc-g: clamp(32px, 4.5vw, 80px); position: relative; }
.svc-rail__card { padding: clamp(20px, 2vw, 26px); display: grid; gap: 18px; }
.svc-rail__cta { display: grid; gap: 12px; }
.svc-rail__btn { justify-content: center; }
.svc-rail__promise { margin: 0; }
.svc-rail__nav { display: grid; gap: 6px; border-top: 1px solid var(--line); padding-top: 14px; }
.svc-rail__list { list-style: none; margin: 0; padding: 0; display: grid; }
.svc-rail__list a { display: flex; align-items: center; min-height: 28px; padding: 3px 0;
  font: 400 14px/1.35 Inter, sans-serif; color: var(--ink-muted); text-decoration: none; }
.svc-rail__list a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.svc-rail__list a:focus-visible { outline: 2px solid var(--bronze-bright); outline-offset: 2px; border-radius: 4px; }
.svc-toc .svc-rail__list { counter-reset: toc; }
.svc-toc .svc-rail__list a::before { counter-increment: toc; content: counter(toc, decimal-leading-zero);
  flex: 0 0 auto; width: 2.1em; font: 500 10.5px/1 Inter, sans-serif; letter-spacing: .12em; color: var(--ink-faint); }
.svc-body [id^="s-"] { scroll-margin-top: calc(var(--head-h, 88px) + 24px); }

/* links in the body: at least 24px tall (WCAG 2.5.8) without moving the text */
.svc-body .prose a, .svc-body .index-row__list a, .svc-body .faq a, .svc-body .acc a,
.svc-body p.body a, .svc-body p.small a { padding-block: .3em; }
.svc-body .index-row__list a { display: inline-block; min-height: 24px; }

@media (max-width: 1099.98px) {
  .svc-rail .shell { padding-top: 0; }
  .svc-rail__card { max-width: 640px; margin-top: clamp(4px, 1vw, 12px); }
  .svc-rail__btn { display: none; }
}

@media (min-width: 1100px) {
  .svc-rail { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
  .svc-rail__shell { height: 100%; }
  .svc-rail__card {
    position: sticky; top: calc(var(--head-h, 88px) + 20px);
    width: calc((100% - var(--svc-g)) * .4); margin: clamp(20px, 2.4vw, 32px) 0 0 auto;
    max-height: calc(100vh - var(--head-h, 88px) - 40px); overflow: auto; overscroll-behavior: contain;
    pointer-events: auto;
  }
  /* every section in the zone keeps the right column free (its own left edge unchanged) */
  .svc-body > section > .shell, .svc-body > section > .shell--narrow, .svc-body > * > section > .shell {
    max-width: var(--shell);
    padding-right: calc(var(--gutter) + var(--svc-g) + (min(100%, var(--shell)) - 2 * var(--gutter) - var(--svc-g)) * .4);
  }
  .svc-body .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* index rows in the narrower column: the tablet arrangement (clay.css @1100), cells pinned */
  .svc-body .index-row { grid-template-columns: 56px minmax(0, 1fr) 40px; }
  .svc-body .index-row__no { grid-column: 1; grid-row: 1; }
  .svc-body .index-row__title { grid-column: 2; grid-row: 1; }
  .svc-body .index-row__body { grid-column: 2 / 3; grid-row: 2; margin-top: 8px; }
  .svc-body .index-row__arrow { grid-column: 3; grid-row: 1; }
}

/* ── "Who we help" (the hubs; block type personas) — hairline rows linking the persona pages */
.svc-who__head { display: grid; gap: 10px; margin-bottom: clamp(18px, 2.4vw, 30px); }
.svc-who__h { font-size: clamp(1.625rem, 2.6vw, 2.25rem); }
.svc-who__list { list-style: none; margin: 0; padding: 0; display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.svc-who__item { min-width: 0; border-bottom: 1px solid var(--line); }
.svc-who__item + .svc-who__item { border-left: 1px solid var(--line); }
.svc-who__link { position: relative; display: grid; align-content: start; gap: 10px; height: 100%;
  padding: clamp(20px, 2.4vw, 30px) clamp(18px, 2vw, 28px) clamp(20px, 2.4vw, 30px) clamp(0px, .6vw, 8px);
  color: inherit; text-decoration: none; }
.svc-who__item + .svc-who__item .svc-who__link { padding-left: clamp(18px, 2vw, 28px); }
.svc-who__t { font: 300 clamp(1.25rem, 1.7vw, 1.5rem)/1.22 Newsreader, Georgia, serif; color: var(--ink);
  letter-spacing: -.01em; padding-right: 28px; }
.svc-who__d { font: 400 14.5px/1.6 Inter, sans-serif; color: var(--ink-muted); }
.svc-who__go { position: absolute; top: clamp(20px, 2.4vw, 30px); right: clamp(14px, 1.6vw, 22px); color: var(--bronze-deep); }
.svc-who__link:hover .svc-who__t { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.svc-who__link:focus-visible { outline: 2px solid var(--bronze-bright); outline-offset: -2px; border-radius: 6px; }
@media (max-width: 900px) {
  .svc-who__list { grid-template-columns: minmax(0, 1fr); }
  .svc-who__item + .svc-who__item { border-left: 0; }
  .svc-who__link, .svc-who__item + .svc-who__item .svc-who__link { padding-left: 0; }
}

/* persona pages: the cell that fills a short client-story row (includes/content-blocks.php) */
.cb-case--ask { justify-content: flex-start; }
.cb-case--ask .cb-case__ask { align-self: flex-start; margin-top: auto; }