/* ============================================================
   SERVICE PAGE (shared by every service page, loaded after site.css and
   before that page's own CSS). Moved out of strategy-page.css 2026-10-18 so
   all six service pages share one layout. Prefix svt- (and hw- for the How
   it works lab). Developer notes: assets/service-page-template.md.
   Holds:
     - the SERVICE PAGE TEMPLATE layout (Even split) and its type
     - HOW IT WORKS: the three steps, with the five lab approaches
   A page's own visual, deliverable and their motions live in its own file.
   Once-only motions hook onto [data-svt-in] (service-page.js): html.svt-on
   is set only when motion is allowed, and .svt-in is added once the element
   is in view - so put "before" states under html.svt-on and the finished
   state as the plain rule, and with reduced motion or no script everything
   shows its finished state.
   ============================================================ */

/* ============================================================
   SERVICE PAGE TEMPLATE: Even split (James picked it 2026-10-18 from ten
   layouts; the others and the Layout lab are deleted). Made to be reused by
   every service page, so it lays out generic slots, never one page's
   pieces, and stays inside the standard 1240px wrap (1180px content edges):
     .svt-page   the three beats
     .svt-hero > .wrap.svt-hin > .svt-copy (.svt-id breadcrumb + h1, .svt-big,
                 .svt-sub) + .svt-vis (the page's signature visual)
     .svt-get  > .wrap.svt-gin > .svt-gcopy (h2 + p) + .svt-deliv (the deliverable)
     .svt-how  > .wrap > .svt-steps.rv (h2 + ol of three li: .svt-n, h3, p)
   Two equal halves throughout: copy | visual, then deliverable | copy (a
   zigzag), then the steps. On phones everything stacks in reading order.
   Each page gives its own visual and deliverable a width rule of their own
   (they sit centred in their half, up to about 440px).
   ============================================================ */
#site .svt-page { --svt-ink: #0B1B33; --svt-mu: #4A5A72; --svt-ln: rgba(11,27,51,.14); --svt-ln2: rgba(11,27,51,.08);
  --svt-mono: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace; }
#site .svt-page ol { list-style: none; margin: 0; padding: 0; }
#site .svt-hin { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; gap: 36px clamp(40px, 5vw, 80px);
  padding-block: clamp(48px, 5.4vw, 88px) clamp(32px, 3.4vw, 56px); }
#site .svt-vis { justify-self: center; }
#site .svt-get { padding: clamp(32px, 4vw, 64px) 0 clamp(64px, 6.5vw, 96px); }
#site .svt-gin { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; gap: 40px clamp(40px, 5vw, 80px); }
#site .svt-deliv { order: -1; justify-self: center; width: min(100%, 420px); }
#site .svt-how { padding-bottom: clamp(88px, 9vw, 136px); }

/* the template's type: the page title is a small label (the breadcrumb's
   last step), then the big line and the sub line; the "what you get"
   heading and its line */
#site .svt-id { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
#site .svt-id h1 { margin: 0; font-size: 14px; font-weight: 600; line-height: 1.6; letter-spacing: 0; color: var(--svt-ink); }
#site .svt-big { margin: clamp(22px, 2.4vw, 32px) 0 0; font-size: clamp(2.2rem, 4vw, 3.6rem); font-weight: 600; line-height: 1.02; letter-spacing: -.045em; color: var(--svt-ink); }
#site .svt-sub { margin: clamp(22px, 2.4vw, 30px) 0 0; max-width: 50ch; font-size: clamp(1.05rem, 1.4vw, 1.2rem); line-height: 1.6; color: #42536E; }
#site .svt-gcopy h2 { margin: 0; text-wrap: pretty; font-size: clamp(2rem, 3.4vw, 2.9rem); line-height: 1.02; letter-spacing: -.042em; color: var(--svt-ink); }
#site .svt-gcopy p { margin: clamp(20px, 2.2vw, 28px) 0 0; max-width: 38ch; font-size: clamp(1.05rem, 1.4vw, 1.18rem); line-height: 1.6; color: var(--svt-mu); }

@media (max-width: 900px) {
  #site .svt-hin { grid-template-columns: minmax(0, 1fr); padding-bottom: 48px; }
  #site .svt-vis { justify-self: start; }
  #site .svt-get { padding: 32px 0 72px; }
  #site .svt-gin { grid-template-columns: minmax(0, 1fr); }
  /* heading first on phones; leave room for anything fanned behind the deliverable */
  #site .svt-deliv { order: 0; justify-self: start; width: min(86%, 400px); }
  #site .svt-how { padding-bottom: 80px; }
}
@media (max-width: 640px) {
  #site .svt-big { font-size: clamp(1.9rem, 8.2vw, 2.3rem); line-height: 1.05; }
}
/* phones: the breadcrumb sits 28px under the bar, not 48-64px (2026-10-20) */
@media (max-width: 760px) {
  #site .svt-hin { padding-top: 28px; }
}

/* ============================================================
   HOW IT WORKS (part of the template). James 2026-10-18 picked Blocks
   from a five-way lab (Cards, Stepper, Navy panel, Numbered list, Blocks;
   the lab and the other four are deleted): one ruled white box of three
   cells, each with a small brand-block icon building the staircase 1-2-3.
   ============================================================ */
#site .svt-steps h2 { margin: 0 0 clamp(20px, 2.4vw, 32px); font-size: clamp(1.6rem, 2.4vw, 2.1rem); font-weight: 600; line-height: 1.1; letter-spacing: -.03em; color: var(--svt-ink); }
#site .svt-steps ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); }
#site .svt-steps li { position: relative; padding: clamp(24px, 2.6vw, 36px); border: 1px solid var(--svt-ln2); border-radius: 10px; background: #fff;
  box-shadow: 0 1px 2px rgba(11,27,51,.04), 0 18px 40px -28px rgba(11,27,51,.3); }
#site .svt-n { display: block; margin: 0 0 clamp(18px, 2.2vw, 28px); font-size: clamp(2.4rem, 3.4vw, 3rem); font-weight: 600; line-height: 1; letter-spacing: -.04em; color: var(--cb); }
#site .svt-steps h3 { margin: 0; font-size: 18px; font-weight: 600; line-height: 1.35; letter-spacing: -.015em; color: var(--svt-ink); }
#site .svt-steps p { margin: 8px 0 0; max-width: 32ch; font-size: 15.5px; line-height: 1.55; color: var(--svt-mu); }
@media (max-width: 900px) {
  #site .svt-steps ol { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  #site .svt-steps li { padding: 22px 22px 24px; }
  #site .svt-n { margin-bottom: 14px; font-size: 2.2rem; }
}

/* ---------- Blocks: one ruled box of three cells; each step has a small
   brand-block icon (drawn in CSS) that builds the logo's staircase - one,
   two, then three blocks ---------- */
#site .svt-steps ol { gap: 0; border: 1px solid var(--svt-ln); border-radius: 10px; background: #fff; }
#site .svt-steps li { padding: calc(clamp(24px, 2.6vw, 36px) + 62px) clamp(24px, 2.6vw, 36px) clamp(24px, 2.6vw, 36px);
  border: 0; border-left: 1px solid var(--svt-ln); border-radius: 0; background: none; box-shadow: none; }
#site .svt-steps li:first-child { border-left: 0; }
#site .svt-steps li::before { content: ""; position: absolute; left: clamp(24px, 2.6vw, 36px); top: clamp(24px, 2.6vw, 36px); width: 18px; height: 18px; border-radius: 3px; background: var(--cb); }
#site .svt-steps li:nth-child(2)::before { box-shadow: 21px 15px 0 rgba(44,95,216,.74); }
#site .svt-steps li:nth-child(3)::before { box-shadow: 21px 15px 0 rgba(44,95,216,.74), 42px 30px 0 rgba(44,95,216,.5); }
#site .svt-n { margin-bottom: 10px; font-family: var(--svt-mono); font-size: 14px; font-weight: 500; letter-spacing: 0; }
#site .svt-steps h3 { font-size: 20px; }
@media (max-width: 900px) {
  #site .svt-steps ol { gap: 0; }
  #site .svt-steps li { padding: 84px 22px 24px; border-left: 0; border-top: 1px solid var(--svt-ln); }
  #site .svt-steps li:first-child { border-top: 0; }
  #site .svt-steps li::before { left: 22px; top: 24px; }
  #site .svt-n { font-size: 14px; }
}