/* ══════════════════════════════════════════════════════════════════════════════
   TOKENS
   ══════════════════════════════════════════════════════════════════════════════ */

/* Breakpoints — CSS cannot use var() inside @media, so these are the declared,
   enforced values. DO NOT introduce new ones:
     1024px  desktop -> stacked: nav becomes the drawer, 2-col grids go 1-col
      560px  small phone: full-width buttons, single-column grids, 44px targets */

/* MyUnclaimedWealth.in is a fixed brand identity, not a theme-adaptive tool — it does not
   follow the visitor's OS dark-mode preference. Premium blue + white, always. */

/* ══════════════════════════════════════════════════════════════════════════════
   RESET + BASE
   ══════════════════════════════════════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f-d);font-size:var(--fs-body);line-height:1.6;-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--b-700);outline-offset:2px;border-radius:4px}
p{margin:0}

/* THE `hidden` ATTRIBUTE HAS TO WIN. Browsers implement it as a UA rule of
   `[hidden]{display:none}`, and ANY author rule that sets an explicit display
   beats it — which quietly breaks every control this design system styles as a
   flex box. Real symptoms this fixed: the guided assistant showed its "← Back"
   button on step 1 (`.wk-jback` is display:inline-flex), and the Problem page's
   diagnostic showed "Next question" before a question had been answered
   (`.btn` is display:inline-flex). Both elements carried the `hidden` attribute
   correctly; the CSS was simply overruling it.
   One rule, declared once, rather than an `[hidden]` variant per component —
   that approach is what let two of them slip through in the first place. */
[hidden]{display:none!important}

/* Skip link — the homepage has none, and these pages have a 5-item nav plus a
   drawer ahead of the content. One rule, real accessibility gain. */
.wk-skip{position:absolute;left:-9999px;top:0;z-index:400;background:var(--white);color:var(--b-800);border:1px solid var(--b-300);border-radius:var(--r-el);padding:12px 18px;font-weight:600;box-shadow:var(--e2)}
.wk-skip:focus{left:var(--gutter);top:12px}

/* ══════════════════════════════════════════════════════════════════════════════
   LAYOUT PRIMITIVES
   ══════════════════════════════════════════════════════════════════════════════ */
.wk-container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.wk-container--wide{max-width:var(--container-wide)}
.wk-frame{padding-inline:var(--frame)}
.wk-section{padding-block:var(--section-pad)}
.wk-section--tight{padding-block:var(--section-pad-tight)}
/* Padding alone doesn't control the rhythm unless the first/last child's own
   margins are collapsed into it — otherwise perceived gaps drift by 90px. */
.wk-section > *:first-child{margin-top:0}
.wk-section > *:last-child{margin-bottom:0}

/* ── SECTION RHYTHM: the doubling fix ────────────────────────────────────────
   Every .wk-section pads its own top AND bottom, so two stacked sections put
   --section-pad twice into one transition — 88px at desktop, measured on a
   Service record where nine consecutive sections all reported 44px top and
   44px bottom with zero margins. That is the excessive gap; it is not that any
   single section is over-padded.

   Fixed at the source of the doubling rather than by halving the scale: the
   FOLLOWING section's top padding is reduced, so one transition carries roughly
   --section-pad plus a small joint instead of two full pads. Section padding,
   typography and alignment are otherwise untouched.

   Scoped to .wk-page. The homepage body carries page-template-default and NOT
   .wk-page, so its approved spacing cannot be reached by these rules.

   The #wk-main in these selectors is not decoration. Several record templates
   pin their own rhythm with `#wk-main > .wk-section.wk-section{padding-block:…}`
   — an id plus two classes — so a class-only rule here matched and then lost.
   Anchoring on the same id beats it by exactly one class, which is the same
   discipline the record templates already use on each other. */
.wk-page #wk-main > .wk-section + .wk-section,
.wk-page .wk-section + .wk-section{padding-top:16px}
/* Conversion panels and the closing frame keep real breathing room before them
   — an ask should not arrive hard on the heels of the section above it. */
.wk-page #wk-main > .wk-section + .wk-v2conversion,
.wk-page #wk-main > .wk-section + .wk-frame,
.wk-page .wk-section + .wk-v2conversion,
.wk-page .wk-section + .wk-frame{padding-top:40px}
@media(max-width:768px){
  .wk-page #wk-main > .wk-section + .wk-section,
  .wk-page .wk-section + .wk-section{padding-top:12px}
  .wk-page #wk-main > .wk-section + .wk-v2conversion,
  .wk-page #wk-main > .wk-section + .wk-frame,
  .wk-page .wk-section + .wk-v2conversion,
  .wk-page .wk-section + .wk-frame{padding-top:30px}
}

/* ══════════════════════════════════════════════════════════════════════════════
   TYPE
   ══════════════════════════════════════════════════════════════════════════════ */
h1,h2,h3,h4{margin:0;font-weight:700;letter-spacing:-.02em;text-wrap:balance;line-height:1.2;color:var(--b-900)}
.wk-h2{font-size:var(--fs-h2);line-height:1.2;letter-spacing:-.024em}
/* `.wk-block h2` (0,1,1) was beating `.wk-h2` (0,1,0), so a section heading placed
   inside a block silently rendered at the 30px sub-heading scale instead of 42px.
   That is why problem and guide pages had visibly smaller section headings than the
   homepage and the service pages while using the same class. Applying .wk-h2 is a
   deliberate statement of level, so it now wins inside a block too; a bare <h2>
   inside a block keeps the intended smaller sub-heading scale. */
.wk-block h2.wk-h2,.wk-block__head h2.wk-h2{font-size:var(--fs-h2)}
.wk-h3{font-size:var(--fs-h3);line-height:1.3;letter-spacing:-.015em}
.wk-accent{color:var(--b-500)}
.wk-grad{color:var(--b-600)}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .wk-grad{background:linear-gradient(165deg,var(--b-900) 0%,var(--b-700) 42%,var(--b-500) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
}
.wk-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-label);font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--b-700);margin:0 0 14px;font-family:var(--f-d)}
.wk-eyebrow::before{content:"";width:20px;height:1.5px;background:var(--b-500);flex:none}
.wk-lede{font-size:var(--fs-body-lg);line-height:1.6;color:var(--ink-2);max-width:56ch;margin-top:10px}
.wk-label{font-family:var(--f-d);font-size:var(--fs-label);font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3)}
.wk-data{font-family:var(--f-m);font-variant-numeric:tabular-nums}
.wk-prose{font-family:var(--f-r);font-size:var(--fs-body-lg);line-height:1.7;color:var(--ink-2);max-width:62ch}
.wk-prose strong{color:var(--ink);font-weight:600}
.wk-prose p{margin:0 0 14px}
.wk-prose p:last-child{margin-bottom:0}
.wk-prose a{color:var(--b-700);box-shadow:inset 0 -1px 0 var(--b-300);transition:box-shadow var(--dur) var(--ease-ui)}
.wk-prose a:hover{box-shadow:inset 0 -2px 0 var(--b-500)}

/* ══════════════════════════════════════════════════════════════════════════════
   BUTTONS
   (resolved: one font-size for every variant. On the homepage .wk-mega-grid a at
   0-1-1 was beating .btn at 0-1-0, which made the header CTA — the most important
   button on the site — the smallest of the 19 buttons on the page.)
   ══════════════════════════════════════════════════════════════════════════════ */
.btn{font-family:var(--f-d);font-size:var(--fs-button);font-weight:600;letter-spacing:-.005em;border-radius:var(--r-pill);padding:0 26px;height:50px;display:inline-flex;align-items:center;justify-content:center;gap:9px;border:1px solid transparent;cursor:pointer;white-space:nowrap;transition:background var(--dur) var(--ease-ui),border-color var(--dur) var(--ease-ui),box-shadow var(--dur) var(--ease-ui),color var(--dur) var(--ease-ui),transform var(--dur) var(--ease-ui)}
.btn .ar{display:inline-block;transition:transform var(--dur-fast) var(--ease-ui)}
.btn:hover .ar{transform:translateX(3px)}
.btn.btn-1{background:linear-gradient(67deg,var(--b-800) 10%,var(--b-500) 94%);color:#fff;box-shadow:var(--e1)}
.btn.btn-1:hover{background:linear-gradient(67deg,var(--b-900) 10%,var(--b-600) 94%);box-shadow:var(--e2);transform:translateY(-1px)}
.btn.btn-1:active{background:var(--b-800)}
.btn.btn-2{background:transparent;color:var(--ink-2);border-color:var(--line-2)}
.btn.btn-2:hover{border-color:var(--b-500);color:var(--b-700);background:var(--b-050)}
.btn.btn-3{background:transparent;color:var(--b-700);padding:0;height:auto;font-size:var(--fs-button)}
.btn-3 span:first-child{box-shadow:inset 0 -1px 0 var(--b-300);transition:box-shadow var(--dur) var(--ease-ui)}
.btn-3:hover span:first-child{box-shadow:inset 0 -2px 0 var(--b-500)}
.btn-sm{height:40px;font-size:var(--fs-button);padding:0 16px}
/* On a dark panel the primary inverts to a white chip and the secondary to a
   light outline — same treatment the homepage's final CTA uses. */
.wk-on-dark .btn.btn-1{background:#fff;color:var(--b-800);box-shadow:none}
.wk-on-dark .btn.btn-1:hover{background:var(--b-050);color:var(--b-900)}
.wk-on-dark .btn.btn-2{background:transparent;border-color:rgba(255,255,255,.42);color:#fff}
.wk-on-dark .btn.btn-2:hover{background:rgba(255,255,255,.14);border-color:#fff;color:#fff}
@media(max-width:560px){.btn{height:52px}}

/* ══════════════════════════════════════════════════════════════════════════════
   HEADER
   Fixed light bar from the first frame; scroll only adds an opaque background,
   a shadow and a condensed height.
   ══════════════════════════════════════════════════════════════════════════════ */
.wk-header{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(255,255,255,.86);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid transparent;transition:background .3s var(--ease-ui),box-shadow .3s var(--ease-ui),border-color .3s var(--ease-ui)}
.wk-header__bar{max-width:var(--container-wide);margin-inline:auto;padding:16px var(--gutter);display:flex;align-items:center;gap:28px}
.wk-header.is-scrolled{background:var(--white);border-color:var(--line);box-shadow:0 12px 30px -20px rgba(18,26,51,.18)}
.wk-header.is-scrolled .wk-header__bar{padding-block:11px}
/* THE BRAND LOCKUP. The emblem is a raster of the supplied artwork, sized by
   HEIGHT rather than width: it is taller than it is wide (471x614), where the
   old coded mark was wider than tall, so matching on width would have made it
   tower over the bar. 30px tall puts it at 23px wide -- a slightly narrower
   footprint than the mark it replaces, at the same optical height.

   "MyUnclaimedWealth.in" is 19 characters against the old 10, so the name gets
   its own element and a nowrap: the constraint is the header bar, and a brand
   that wraps to two lines there would push the bar taller on every page. The
   size steps down once below 1180, where the nav is widest relative to the bar. */
.wk-brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:18px;letter-spacing:-.015em;color:var(--b-900)}
.wk-brand svg{width:34px;height:auto;color:var(--b-500)}
.wk-brand__mark{height:30px;width:auto;flex:none;display:block}
.wk-brand__name{white-space:nowrap}
@media(max-width:1180px){
  .wk-header .wk-brand{font-size:16px;gap:9px}
  .wk-header .wk-brand__mark{height:27px}
}
.wk-nav{display:flex;align-items:center;gap:6px;margin-inline:auto}
.wk-nav__item{position:relative}
.wk-nav__link{display:flex;align-items:center;gap:5px;padding:10px 13px;font-size:var(--fs-nav);font-weight:600;color:var(--ink);border-radius:var(--r-el-sm);transition:color .2s var(--ease-ui),background .2s var(--ease-ui)}
.wk-nav__link:hover,.wk-nav__item.is-open .wk-nav__link{color:var(--b-700);background:var(--b-050)}
.wk-nav__link svg{width:13px;height:13px;transition:transform .2s var(--ease-ui);flex:none}
.wk-nav__item.is-open .wk-nav__link svg{transform:rotate(180deg)}
.wk-header__actions{display:flex;align-items:center;gap:10px}
.wk-burger{display:none;width:40px;height:40px;border-radius:50%;align-items:center;justify-content:center;color:var(--ink)}

/* dropdown / mega panels — one inset, one item shape, one hover, one focus ring.
   (resolved) Wide panels anchor to the trigger's LEFT edge, not its centre: centred
   put the Services panel 74px off-screen at 1230px wide. */
.wk-panel{position:absolute;top:calc(100% + 10px);background:var(--white);border:1px solid var(--line);border-radius:var(--r-panel-sm);box-shadow:var(--e2);opacity:0;visibility:hidden;transition:opacity .22s var(--ease-ui),transform .22s var(--ease-ui);z-index:5;left:0;transform:translateY(6px)}
.wk-nav__item.is-open .wk-panel{opacity:1;visibility:visible;transform:translateY(0)}
.wk-panel--mega{width:min(720px,86vw);padding:18px}
.wk-panel--drop{min-width:272px;padding:14px}
.wk-mega-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px 26px}
.wk-colhead{font-family:var(--f-d);font-size:var(--fs-label);font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--b-700);margin:0 0 12px;padding-bottom:9px;border-bottom:1px solid var(--line)}
.wk-mega-grid ul,.wk-drop-list{list-style:none;margin:0;padding:0}
.wk-mega-grid li{margin-bottom:2px}
.wk-mega-grid a:not(.btn),.wk-drop-list a:not(.btn){display:block;font-size:var(--fs-body-sm);color:var(--ink);font-weight:500;padding:10px 12px;border-radius:10px;line-height:1.35;transition:background .16s var(--ease-ui),color .16s var(--ease-ui),transform .16s var(--ease-ui)}
.wk-mega-grid a:not(.btn):hover,.wk-drop-list a:not(.btn):hover{background:var(--b-050);color:var(--b-700);transform:translateX(2px)}
.wk-mega-grid a:focus-visible,.wk-drop-list a:focus-visible{outline:2px solid var(--b-500);outline-offset:1px;background:var(--b-050)}
.wk-mega-foot{grid-column:1/-1;margin-top:8px;padding-top:14px;border-top:1px solid var(--line)}

/* mobile drawer */
.wk-mobile{position:fixed;inset:0;background:var(--navy-900);z-index:200;display:flex;flex-direction:column;transform:translateX(100%);transition:transform .32s var(--ease-out);visibility:hidden}
.wk-mobile.is-open{transform:translateX(0);visibility:visible}
.wk-mobile__top{display:flex;align-items:center;justify-content:space-between;padding:18px var(--gutter)}
.wk-mobile__close{width:44px;height:44px;border-radius:50%;color:#fff;display:inline-flex;align-items:center;justify-content:center}
.wk-mobile__close:hover{background:rgba(255,255,255,.1)}
.wk-mobile__body{flex:1;overflow-y:auto;padding:8px var(--gutter) 24px}
.wk-macc{border-bottom:1px solid rgba(255,255,255,.12)}
.wk-macc summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:14px;padding:17px 4px;font-size:var(--fs-body-lg);font-weight:600;color:#fff;cursor:pointer}
.wk-macc summary::-webkit-details-marker{display:none}
.wk-macc summary svg{transition:transform .2s var(--ease-ui);color:#8E9AC4;flex:none}
.wk-macc[open] summary svg{transform:rotate(180deg)}
.wk-macc__body{padding:0 4px 16px;display:flex;flex-direction:column;gap:2px}
.wk-macc__body a{padding:11px 10px;border-radius:6px;font-size:var(--fs-body-sm);color:#C7CEE8;transition:background .16s var(--ease-ui),padding-left .16s var(--ease-ui)}
.wk-macc__body a:hover{background:rgba(255,255,255,.06);padding-left:14px}
.wk-mobile__cta{padding:18px var(--gutter);border-top:1px solid rgba(255,255,255,.12)}
.wk-mobile__cta .btn{width:100%}

@media(max-width:1024px){
  .wk-nav{display:none}
  .wk-header__actions .btn{display:none}
  .wk-burger{display:inline-flex}
  /* BUG FIX — the burger sat next to the wordmark instead of in the right corner
     on every tablet and phone. Nothing in the bar was pushing the actions right on
     its own: the only thing doing that job was .wk-nav's `margin-inline:auto`, and
     the nav is display:none at this width, so brand + burger collapsed together on
     the left with just the 28px flex gap between them. The actions group now claims
     the free space itself. Scoped inside this query on purpose — at desktop the nav
     is visible and its auto margins must stay the thing that centres it.
     This bug is also live on the homepage (template-homepage.php, line ~175);
     the same three words fix it there. */
  .wk-header__actions{margin-left:auto}
}
@media(max-width:560px){
  .wk-header .wk-brand{display:inline-flex;align-items:center;min-height:44px}
  .wk-burger{min-width:44px;min-height:44px}
}

/* ══════════════════════════════════════════════════════════════════════════════
   PANEL PRIMITIVE  (hero + closing CTA share this)
   ══════════════════════════════════════════════════════════════════════════════ */
.wk-panelframe{position:relative;overflow:hidden;border-radius:var(--r-panel-lg);background:linear-gradient(150deg,var(--white) 0%,var(--wash) 55%,var(--b-050) 100%);color:var(--ink);border:1px solid var(--line);box-shadow:0 1px 2px rgba(18,26,51,.03),0 30px 70px -34px rgba(42,63,189,.22)}
.wk-panelframe__glow{position:absolute;border-radius:50%;background:var(--b-300);filter:blur(80px);pointer-events:none;opacity:.35}
.wk-panelframe--dark{background:linear-gradient(150deg,var(--b-900) 0%,var(--b-800) 42%,var(--b-600) 100%);border-color:transparent;box-shadow:0 30px 64px -32px rgba(16,26,74,.72);color:#fff}
.wk-panelframe--dark h2,.wk-panelframe--dark h3{color:#fff}
/* --b-500 on this gradient measures 2.4:1; --b-200 is 3.67:1 and clears 3:1
   for text at heading size. --b-050 is 5.08:1 for body copy. */
.wk-panelframe--dark .wk-accent{color:var(--b-200)}
.wk-panelframe--dark p{color:var(--b-050)}
.wk-panelframe--dark .wk-panelframe__glow{opacity:.22;background:rgba(255,255,255,.5)}
@keyframes wkbreathe{0%,100%{opacity:.22;transform:translateX(-50%) scale(1)}50%{opacity:.34;transform:translateX(-50%) scale(1.06)}}
.wk-anim .wk-panelframe--dark .wk-panelframe__glow--breathe{animation:wkbreathe 6s ease-in-out infinite}

/* ══════════════════════════════════════════════════════════════════════════════
   CARDS · CHIPS · ACCORDION  (shared, used by record pages and listings alike)
   ══════════════════════════════════════════════════════════════════════════════ */
.wk-grid{display:grid;gap:16px}
.wk-grid--2{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.wk-grid--3{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.wk-card{background:var(--white);border:1px solid var(--line);border-radius:var(--r-panel-sm);padding:22px;transition:box-shadow var(--dur) var(--ease-ui),border-color var(--dur) var(--ease-ui),transform var(--dur) var(--ease-ui)}
a.wk-card:hover{box-shadow:var(--e2);border-color:var(--b-300);transform:translateY(-2px)}
.wk-card__title{font-size:var(--fs-h4);font-weight:600;letter-spacing:-.01em;margin:0 0 4px;color:var(--b-900)}
.wk-card__text{font-size:var(--fs-caption);color:var(--ink-3);margin:0}

/* ── HUB CARD GRID ────────────────────────────────────────────────────────────
   The card grid every collection hub uses: /services/, /problems/, /guides/.
   Promoted here from archive-service.php, which had defined it locally as
   .wk-svcgrid/.wk-svccard — once a second and third hub needed the same grid,
   a page-local copy per hub was three implementations of one component.
   Renamed off "svc" because problems and guides are not services.
   Built on .wk-card, so hover, border and radius stay with the parent. */
.wk-hubgrid{display:grid;gap:clamp(16px,1.8vw,24px);grid-template-columns:repeat(auto-fit,minmax(320px,1fr));margin-top:30px}
.wk-hubcard{display:flex;flex-direction:column;gap:12px;padding:clamp(22px,2.2vw,30px);text-decoration:none}
.wk-hubcard__top{display:flex;align-items:flex-start;gap:13px}
.wk-hubcard__t{font-size:var(--fs-h3);font-weight:700;letter-spacing:-.012em;color:var(--b-900);margin:0;line-height:1.28}
.wk-hubcard__l{font-size:var(--fs-body-sm);line-height:1.6;color:var(--ink-2);margin:0;max-width:46ch}
.wk-hubcard__go{margin-top:auto;padding-top:6px;font-size:var(--fs-body-sm);font-weight:600;color:var(--b-600);display:inline-flex;align-items:center;gap:6px}
.wk-hubcard:hover .wk-hubcard__go{gap:10px}
.wk-hubnote{margin-top:16px;font-size:var(--fs-body-sm);color:var(--ink-3);max-width:64ch}
/* One breakpoint, not a per-hub patch: below 560px a 320px min-width column
   would overflow the gutter, so collapse to a single column. */
@media(max-width:560px){.wk-hubgrid{grid-template-columns:1fr}}

.wk-chip{display:inline-flex;align-items:center;gap:8px;background:var(--wash);border:1px solid var(--line);border-radius:var(--r-pill);padding:6px 13px;font-size:var(--fs-label);font-weight:600;color:var(--ink-2);transition:background .18s var(--ease-ui),border-color .18s var(--ease-ui),color .18s var(--ease-ui)}
.wk-chip svg{width:14px;height:14px;flex:none;color:var(--b-500)}
.wk-chip--brand{background:var(--b-050);border-color:var(--b-100);color:var(--b-700)}
.wk-chip--brand svg{color:var(--b-600)}
/* A chip that is a link needs to look clickable and answer the keyboard. Same
   shape as a static chip; only the affordance is added. */
a.wk-chip--link{text-decoration:none;color:var(--ink-2)}
a.wk-chip--link:hover{background:var(--b-050);border-color:var(--b-200);color:var(--b-700)}
.wk-chip--ok{background:var(--ok-soft);border-color:#C6E7D4;color:var(--ok)}
.wk-chip--ok svg{color:var(--ok)}
.wk-chip--warn{background:var(--warn-soft);border-color:var(--warn-line);color:var(--warn)}
.wk-chip--warn svg{color:var(--warn)}

.wk-acc{background:var(--white);border:1px solid var(--line);border-radius:14px;margin-bottom:10px;overflow:hidden;transition:border-color var(--dur) var(--ease-ui),box-shadow var(--dur) var(--ease-ui)}
.wk-acc:hover{border-color:var(--b-300)}
.wk-acc[open]{border-color:var(--b-300);box-shadow:var(--e1)}
.wk-acc summary{list-style:none;cursor:pointer;padding:18px 20px;font-size:var(--fs-body-lg);font-weight:600;color:var(--b-900);display:flex;justify-content:space-between;gap:18px;align-items:center;transition:color .18s var(--ease-ui)}
.wk-acc summary::-webkit-details-marker{display:none}
.wk-acc summary:hover{color:var(--b-700)}
.wk-acc__ico{width:32px;height:32px;flex:none;border-radius:10px;background:var(--b-050);border:1px solid var(--b-100);color:var(--b-600);display:flex;align-items:center;justify-content:center;transition:background .28s var(--ease-ui),color .28s var(--ease-ui),border-color .28s var(--ease-ui),transform .28s var(--ease-ui)}
.wk-acc__ico svg{width:16px;height:16px}
.wk-acc[open] .wk-acc__ico{background:linear-gradient(150deg,var(--b-700),var(--b-500));border-color:transparent;color:#fff;transform:rotate(180deg)}
.wk-acc__body{padding:0 20px 20px;font-family:var(--f-r);font-size:var(--fs-body);line-height:1.7;color:var(--ink-2);max-width:70ch}
.wk-acc[open] .wk-acc__body{animation:wkacc .32s var(--ease-out)}
@keyframes wkacc{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.wk-acc[open] .wk-acc__body{animation:none}}

/* ══════════════════════════════════════════════════════════════════════════════
   GUIDED-ASSISTANT CARD  (the homepage's journey component, shared verbatim)
   ══════════════════════════════════════════════════════════════════════════════ */
.wk-jcard{display:flex;flex-direction:column;background:rgba(255,255,255,.72);border:1px solid var(--line);border-radius:var(--r-panel);padding:clamp(18px,2.4vw,26px);text-align:left;position:relative;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:var(--e2)}
.wk-jstep{display:none}
.wk-jstep.is-active{display:flex;flex-direction:column;flex:1;animation:jin .34s var(--ease-out)}
@keyframes jin{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.wk-jstep.is-active{animation:none}}
.wk-jprogress{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.wk-jprogress .txt{font-family:var(--f-d);font-size:var(--fs-label);letter-spacing:.05em;color:var(--ink-3)}
.wk-jbar{display:flex;gap:5px;flex:1;margin-left:16px}
.wk-jbar i{flex:1;height:3px;border-radius:2px;background:var(--line-2);transition:background .3s var(--ease-ui)}
.wk-jbar i.on{background:var(--b-500)}
.wk-jcard h3{color:var(--b-900);font-size:var(--fs-h3);line-height:1.3;margin-bottom:4px}
.wk-jcard .sub{color:var(--ink-3);font-size:var(--fs-caption);margin-bottom:12px}
.wk-jopts{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:14px}
.wk-jopt{display:flex;align-items:center;width:100%;text-align:left;background:var(--wash);border:1px solid var(--line);border-radius:12px;padding:11px 14px;font-family:var(--f-d);font-size:var(--fs-body-sm);line-height:1.4;color:var(--ink-2);cursor:pointer;transition:background .2s var(--ease-ui),border-color .2s var(--ease-ui),transform .2s var(--ease-ui),box-shadow .2s var(--ease-ui)}
.wk-jopt:hover{background:var(--b-050);border-color:var(--b-300);color:var(--ink);transform:translateY(-2px);box-shadow:var(--e1)}
.wk-jopt.is-selected{background:var(--b-600);border-color:var(--b-500);color:#fff;transition:background .3s var(--ease-pop),transform .3s var(--ease-pop);transform:scale(1.015)}
.wk-jback{display:inline-flex;align-self:flex-end;align-items:center;gap:7px;margin-top:auto;font-family:var(--f-d);font-size:var(--fs-label);font-weight:600;color:var(--b-700);background:var(--white);border:1px solid var(--line-2);border-radius:var(--r-pill);padding:8px 15px;transition:background .2s var(--ease-ui),border-color .2s var(--ease-ui),color .2s var(--ease-ui),transform .2s var(--ease-ui)}
.wk-jback:hover{background:var(--b-050);border-color:var(--b-300);color:var(--b-800);transform:translateX(-2px)}
.wk-jrecap{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 12px}
.wk-jchip{display:inline-flex;font-size:var(--fs-label);font-weight:600;color:var(--b-700);background:var(--b-050);border:1px solid var(--b-100);border-radius:var(--r-pill);padding:5px 11px}
.wk-jmicro{display:flex;align-items:center;gap:8px;font-size:var(--fs-label);color:var(--ink-3);margin:0 0 10px}
.wk-jmicro svg{width:15px;height:15px;color:var(--ok);flex:none}
.wk-jfields{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:11px}
.wk-jfield label{display:block;font-family:var(--f-d);font-size:var(--fs-label);letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);margin-bottom:6px}
.wk-jfield input,.wk-jfield textarea,.wk-jfield select{width:100%;background:var(--white);border:1px solid var(--line-2);border-radius:8px;padding:12px 14px;color:var(--ink);font-family:var(--f-d);font-size:var(--fs-button)}
.wk-jfield input::placeholder,.wk-jfield textarea::placeholder{color:var(--ink-3)}
.wk-jfield input:focus,.wk-jfield textarea:focus,.wk-jfield select:focus{outline:0;border-color:var(--b-500);box-shadow:0 0 0 3px var(--b-100)}
.wk-jsubmit{width:100%;margin-bottom:8px}
.wk-jdone{display:none;text-align:center;padding:20px 0}
.wk-jdone.is-active{display:flex;flex-direction:column;justify-content:center;flex:1;animation:jin .3s var(--ease-out)}
.wk-jdone svg{width:44px;height:44px;color:var(--ok);margin:0 auto 16px}
.wk-jdone h3{color:var(--b-900);margin-bottom:8px}
.wk-jdone p{color:var(--ink-2);font-size:var(--fs-body-sm);max-width:38ch;margin-inline:auto}
@media(max-width:560px){
  .wk-jopts,.wk-jfields{grid-template-columns:1fr}
  .wk-jopt{padding:14px 16px}
  .wk-jcard{border-radius:20px}
}

/* ══════════════════════════════════════════════════════════════════════════════
   LEAD MODAL
   ══════════════════════════════════════════════════════════════════════════════ */
.wk-modal{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;padding:clamp(12px,3vw,32px)}
.wk-modal__scrim{position:absolute;inset:0;background:rgba(16,26,74,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);animation:wkfade .24s var(--ease-out)}
.wk-modal__dialog{position:relative;width:100%;max-width:940px;max-height:92vh;overflow:auto;background:var(--white);border-radius:var(--r-panel);box-shadow:0 40px 90px -30px rgba(16,26,74,.5);animation:wkpop .3s var(--ease-out)}
@keyframes wkfade{from{opacity:0}to{opacity:1}}
@keyframes wkpop{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.wk-modal__scrim,.wk-modal__dialog{animation:none}}
.wk-modal__x{position:absolute;top:14px;right:14px;z-index:2;width:40px;height:40px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:var(--ink-2);background:rgba(255,255,255,.9);cursor:pointer;transition:background .2s var(--ease-ui),color .2s var(--ease-ui)}
.wk-modal__x:hover{background:var(--b-050);color:var(--b-700)}
.wk-modal__x svg{width:18px;height:18px}
.wk-modal__grid{display:grid;grid-template-columns:1.05fr .95fr}
.wk-modal__form{padding:clamp(26px,3.4vw,44px)}
.wk-modal__badge{display:inline-flex;align-items:center;gap:7px;font-size:var(--fs-label);font-weight:700;color:var(--b-700);background:var(--b-050);border:1px solid var(--b-100);border-radius:var(--r-pill);padding:6px 13px}
.wk-modal__badge i{width:7px;height:7px;border-radius:50%;background:var(--ok);flex:none}
.wk-modal__form h2{font-size:clamp(23px,2.6vw,30px);line-height:1.2;color:var(--b-900);margin:16px 0 10px;letter-spacing:-.02em}
.wk-modal__lede{font-size:var(--fs-body);line-height:1.65;color:var(--ink-2);margin:0 0 20px}
.wk-modal__form .wk-jfield{margin-bottom:12px}
.wk-modal__submit{width:100%;margin-top:4px}
.wk-modal__err{font-size:var(--fs-caption);color:#C0392B;margin:0 0 10px}
/* The guided assistant's failure message. Same weight as the modal's, but it
   sits on a card rather than in a dialog, so it gets a panel to be noticed. */
.wk-jerr{font-size:var(--fs-body-sm);line-height:1.5;color:#8A2F22;background:#FDF0ED;
  border:1px solid #F3CFC7;border-left:3px solid #C0392B;border-radius:0 var(--r-el) var(--r-el) 0;
  padding:12px 14px;margin:0 0 14px}
.wk-jerr:focus{outline:2px solid var(--acc,#5271FF);outline-offset:2px}
.btn.is-busy{opacity:.6;pointer-events:none}
.wk-modal__done{text-align:center;padding:14px 0 4px}
.wk-modal__done svg{width:42px;height:42px;color:var(--ok);margin:0 auto 12px}
.wk-modal__done h3{font-size:var(--fs-h3);color:var(--b-900);margin-bottom:6px}
.wk-modal__done p{font-size:var(--fs-body-sm);color:var(--ink-2);max-width:34ch;margin-inline:auto}
.wk-modal__proof{padding:clamp(26px,3.4vw,44px);background:linear-gradient(160deg,var(--b-050) 0%,var(--wash) 60%,var(--white) 100%);border-left:1px solid var(--line)}
.wk-modal__prooflabel{font-family:var(--f-d);font-size:var(--fs-label);font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--b-700);margin:0 0 12px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.wk-modal__sources{display:flex;flex-direction:column;gap:9px}
.wk-modal__src{display:flex;align-items:center;gap:9px;font-size:var(--fs-body-sm);font-weight:600;color:var(--ink-2)}
.wk-modal__src i{width:8px;height:8px;border-radius:50%;background:var(--b-500);flex:none}
.wk-modal__note{font-size:var(--fs-label);color:var(--ink-3);margin:10px 0 0;line-height:1.5}
@media(max-width:1024px){
  .wk-modal__grid{grid-template-columns:1fr}
  .wk-modal__proof{border-left:0;border-top:1px solid var(--line)}
}

/* ══════════════════════════════════════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════════════════════════════════════ */
/* The footer’s own CSS moved into parts/wk-footer.php, which carries the
   markup with it, so a change to one cannot miss the other. The homepage
   is a standalone template that loads this part but not the shared shell —
   that split is exactly how the two footers drifted apart. */
/* A top-level nav entry that is a link, not a dropdown: same metrics as
   .wk-nav__link minus the caret spacing, so the bar keeps one rhythm. */
.wk-nav__link--plain{text-decoration:none}
.wk-macc__plain{display:block;padding:14px 0;font-weight:600;color:#fff;text-decoration:none;border-top:1px solid rgba(255,255,255,.12)}
/* v2.0.0: the bar gained the Privacy and Terms links, so it holds four items rather
   than two. space-between would have scattered them; grouped left instead, with the
   CTA pushed right. These belong at top level — inside the 560px query below they
   would only have applied on phones. */

/* ══════════════════════════════════════════════════════════════════════════════
   REVEAL SYSTEM
   Opt-in, and visible by DEFAULT — content is never lost when JS is off, when
   IntersectionObserver is missing, or under reduced-motion. .wk-anim is added to
   <html> by JS only once it has confirmed all three.
   ══════════════════════════════════════════════════════════════════════════════ */
[data-rv]{opacity:1;transform:none}
.wk-anim [data-rv]{opacity:0;transform:translateY(20px);transition:opacity .52s var(--ease-out),transform .52s var(--ease-out)}
.wk-anim [data-rv].is-in{opacity:1;transform:none}
/* Grouped items arrive in sequence. Pure CSS, one shared observer. */
.wk-anim [data-rv-group] > [data-rv]:nth-child(1){transition-delay:0ms}
.wk-anim [data-rv-group] > [data-rv]:nth-child(2){transition-delay:70ms}
.wk-anim [data-rv-group] > [data-rv]:nth-child(3){transition-delay:140ms}
.wk-anim [data-rv-group] > [data-rv]:nth-child(4){transition-delay:210ms}
.wk-anim [data-rv-group] > [data-rv]:nth-child(5){transition-delay:280ms}
.wk-anim [data-rv-group] > [data-rv]:nth-child(6){transition-delay:350ms}
.wk-anim [data-rv-group] > [data-rv]:nth-child(7){transition-delay:420ms}
.wk-anim [data-rv-group] > [data-rv]:nth-child(8){transition-delay:490ms}

/* ══════════════════════════════════════════════════════════════════════════════
   SHARED PAGE COMPONENTS
   Everything below is used by TWO OR MORE templates. Anything used by exactly one
   stays in that template's own <style>. That line is what stops this file drifting
   back into a dumping ground.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── breadcrumb ──
   Visual only. schema.php emits BreadcrumbList for the four CPTs; keep the two in
   agreement — if a level is added here, add it there in the same change. */
.wk-crumb{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:96px var(--frame) 0;max-width:var(--container);margin-inline:auto;font-size:var(--fs-label);color:var(--ink-3)}
.wk-crumb a{color:var(--ink-2);font-weight:500}
.wk-crumb a:hover{color:var(--b-700)}
.wk-crumb svg{width:12px;height:12px;color:var(--line-2);flex:none;transform:rotate(-90deg)}
.wk-crumb [aria-current]{color:var(--ink);font-weight:600}

/* ── page hero ── the lighter hero used by the static pages and the directory */
/* ── RECORD HERO — one baseline for every record type ────────────────────────
   There are four hero class names across the record templates: .wk-phero (page
   heroes and the hubs), .wk-rhero (institution), .wk-prhero (problem) and
   .wk-ghero (guide). Three of them were defined ONLY inside their own template's
   $wk_page_style — and single-service.php borrowed the guide's class name without
   the guide's CSS. So on all 11 service pages `.wk-ghero` matched nothing: the
   hero got no gutter padding and the H1 fell back to the browser default 32px,
   which is why the hero sat flush against the viewport edge while the body sat
   57px in, and why the most commercially important pages had the smallest H1 on
   the site.

   This is the shared baseline. The three templates that define their own hero CSS
   still win on source order (page styles are emitted after this file), so nothing
   about guide, problem or institution pages changes — this only gives the ones
   with no rule a correct floor. */
.wk-phero,.wk-ghero,.wk-prhero,.wk-rhero{padding:18px var(--frame) 0}
/* Print can never inherit a mid-animation state: paper does not scroll. */
@media print{.wk-anim [data-rv]{opacity:1!important;transform:none!important}}
.wk-phero h1,.wk-ghero h1,.wk-prhero h1,.wk-rhero h1{font-size:clamp(30px,4vw,52px);line-height:1.14;letter-spacing:-.03em;text-wrap:balance}
/* ── RECORD HERO PANEL ───────────────────────────────────────────────────────
   The inner panel needs padding or the H1 and lede sit flush against its own
   left edge. Guide, problem and institution each define this locally with these
   exact values; single-service.php borrowed the guide's CLASS NAME without the
   guide's CSS, so on all 11 service pages `.wk-ghero__inner` matched nothing and
   resolved to padding:0 — the heading looked pushed out of its own box.

   .wk-phero__inner is deliberately NOT in this list: it has its own slightly
   roomier rule above and those pages are the visual reference. The three local
   copies still win on source order with identical values, so nothing changes for
   guide, problem or institution — this only gives service the padding it lost. */
.wk-ghero__inner,.wk-prhero__inner,.wk-rhero__inner{max-width:var(--container);margin-inline:auto;padding:clamp(30px,4vw,58px) clamp(22px,3vw,48px)}

/* ── RECORD BODY: INTERNAL RHYTHM ────────────────────────────────────────────
   --section-pad (115px at 1440) is the rhythm for FULL-WIDTH page sections. The
   blocks stacked inside .wk-recmain are not that: they are blocks in a column,
   and each one was carrying a full section's padding top AND bottom. Two adjacent
   paddings meant a 230px gap between every block, and 1035px of the column was
   empty padding against 2088px of real content — a third of the page.

   Stacked siblings need ONE gap between them, not two paddings each. This also
   removes the leading padding, so the first block in the column starts on the
   same line as the first card in the rail beside it (they were ~115px out).
   Shared by all four record types, which all had the same problem. */
.wk-recmain > .wk-section{padding-block:0}
.wk-recmain > .wk-section + .wk-section{margin-top:clamp(40px,4.4vw,64px)}
/* The column still needs to clear whatever follows the two-column body. */
.wk-recbody{padding-bottom:clamp(40px,4.4vw,64px)}
.wk-phero__inner{max-width:var(--container);margin-inline:auto;padding:clamp(30px,4.4vw,64px) clamp(22px,3vw,48px)}
.wk-phero h1{font-size:clamp(32px,4.6vw,58px);line-height:1.1;letter-spacing:-.032em;max-width:20ch}
.wk-phero__lede{margin-top:16px;font-size:var(--fs-body-lg);line-height:1.6;color:var(--ink-2);max-width:54ch}
.wk-phero__actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.wk-phero--center .wk-phero__inner{text-align:center}
/* 26ch suits a headline and strangles a sentence -- it is about 200px, so the
   two-line lede on /services/ would break over five. The homepage caps its
   centred sub-copy at 52ch and that is the number to match. Safe to change:
   this modifier was written and never applied to anything, so nothing else
   depends on the old value. */
/* NO CAP ON A CENTRED HERO HEADING. A hero headline stays on ONE LINE -- the
   owner asked for it by name and it is the rule for every page brought across.
   26ch resolved to 953px here against 1223px of panel, so "One problem, several
   different routes." broke over two lines with 270px of room to spare: the cap
   was doing the wrapping, not the type size.

   max-width:none rather than nowrap on purpose. .wk-phero__inner is already
   capped at var(--container), so the container governs the measure and the
   heading cannot run away on an ultra-wide screen. It also means a narrow
   viewport wraps gracefully instead of overflowing, which nowrap would do at
   the 32px font floor below about 640px -- one line is a desktop rule, not a
   phone one, and this gets both without a media query. */
.wk-phero--center h1{max-width:none;margin-inline:auto}
/* ── THE CENTRED HERO FILLS THE FIRST SCREEN ──────────────────────────────
   Matched to the service template's hero, which is the signed-off one, rather
   than re-derived. Its numbers transfer exactly: the panel's top edge sits
   135px down on BOTH pages -- header, breadcrumb and padding come to the same
   offset -- so the 200 below is the same 200 there, and it was measured, not
   copied on faith.

   min(100dvh - 200px, 560px). The tile grows with the screen up to 560 and
   stops: past that a hero is just a field. 200 rather than 135 because the
   difference is deliberate space BELOW the tile, so its bottom edge is visibly
   inside the screen instead of flush against it, which is what tells a visitor
   there is more page under it.

   dvh, not vh: on a phone 100vh is the viewport with the browser chrome
   RETRACTED, so a vh hero is taller than what can be seen and its buttons hide
   under the address bar. The vh line above it is the fallback for older
   browsers, which ignore the dvh line.

   min-height, not height, so long copy on a narrow screen pushes the tile
   taller rather than overflowing it.

   flex + align-items:center centres the column in the space rather than
   leaving it at the top, and __body takes the full width so the centred text
   still centres on the panel and not on its own content. */
/* ── ONE HERO HEIGHT FOR THE WHOLE SITE ─────────────────────────────────────
   This rule governs ten heroes. It was min(100dvh - 200px, 560px), which caps
   at 560 and therefore stops responding to the window the moment the window is
   taller than 760 -- so on a 900px screen every hero was a fixed 560 while the
   service record, which has its own rule, filled 740. Two pages a nav click
   apart, opening to visibly different amounts of page.

   It is now single-service-v3.php:727's formula exactly. That value was
   measured and signed off on the service template -- the owner asked for a
   taller tile there so the first view did not leave dead space at the bottom --
   and the right way to settle the difference is to spread the decision that was
   made, not to override it with the older number.

   WHY THE SUBTRAHEND MATTERS MORE THAN THE CAP. 160 is the header, the
   breadcrumb and a deliberate strip of the next section left showing. On any
   window under about 940px tall the subtrahend is what binds and the cap never
   comes into it, which is most laptops -- so 200 -> 160 is the change a visitor
   actually sees, and 560 -> 780 only shows up on a tall monitor.

   dvh, not vh: on a phone 100vh is the viewport with the browser chrome
   RETRACTED, so a vh hero is taller than what can be seen and its buttons hide
   under the address bar. The vh line is the fallback for browsers that do not
   know dvh, and has to come first. */
.wk-phero--center .wk-phero__inner{display:flex;align-items:center;
  min-height:min(calc(100vh - 160px), 780px);
  min-height:min(calc(100dvh - 160px), 780px)}
.wk-phero--center .wk-phero__body{width:100%}

/* The hero's internal spacing, also the service template's. The h1 carries no
   bottom margin of its own, so the lede's 16px was the only thing between them;
   22px separates the two without breaking them into unrelated blocks. 620px on
   the lede is v3's measure -- it reads at about 58 characters a line, inside
   the comfortable range -- and replaces the 52ch I had used, which was the
   homepage's number for a different element. balance evens the lines rather
   than leaving a long one above a short one. */
/* ── ONE HERO TYPE SCALE FOR EVERY RECORD TEMPLATE ──────────────────────────
   Three templates were carrying five different headline sizes: the service
   record at 60, the situation record at 50, and the guide at anything from 41
   to 60 because it sized each title to its own length. Opened one after
   another they read as three websites, which is what was reported.

   56px, and the number is not a compromise between 60 and 50 -- it is the
   largest size at which the LONGEST title on the site still sets on two lines.
   That is "The name on my shares does not match my ID. Can I still claim?" at
   62 characters: 62 x 0.5 x 56 = 1736px of line against 1221px of usable
   panel, so 1.42 lines, so two. At 60 it is still two, but the second line
   runs long enough to look like an accident; at 56 both lines sit inside the
   measure with room.

   THE PER-TITLE FIT IS GONE, and it was mine, from the commit before this one.
   It did exactly what it was asked to -- every guide headline on one line, as
   large as its own title allowed -- and the cost was that no two guides shared
   a headline size. Sameness across templates was the more important of the two
   asks, so the earlier one loses.

   text-wrap:pretty, NOT balance. balance evens the lines, which is how "A
   family member has died and / held shares. What happens now?" ended up with a
   short first line above a long second -- 28 characters over 30. Greedy
   wrapping fills the first line and leaves the remainder, which is the shape
   that was asked for; pretty is greedy plus one guard, that the last line is
   never left as a single orphaned word. Browsers without pretty fall back to
   normal, which is greedy, so the important half degrades correctly. */
/* A MEASURE, SO THE HEADLINE STOPS RUNNING WALL TO WALL. With max-width:none a
   56px headline used every pixel of the 1221px panel and broke wherever it ran
   out, which is how "Which documents will I need to recover unclaimed / shares?"
   ended up with one word alone on the second line and no air at either end.

   1080 is derived, not picked: at 56px this typeface sets about half the font
   size per character, so 1080 holds roughly 38 characters -- which is exactly
   where that title wants to break, after "recover", carrying "unclaimed
   shares?" down as a pair. It leaves about 70px of panel either side of the
   longest line, which is the space that was asked for.

   min(100%, ...) rather than a bare 1080, so the cap never exceeds the panel on
   a narrow screen and the percentage takes over instead. */
.wk-phero--center h1,
.wk-v3 .wk-sv--hero h1{font-size:clamp(32px,3.9vw,56px);line-height:1.1;letter-spacing:-.03em;
  text-wrap:pretty;margin-bottom:22px;max-width:min(100%, 1080px);margin-inline:auto}

/* THE LEDE, ALSO ONE SCALE. It was 20px at 660 on the service record, 21px at
   620 on the situation record and 18px uncapped on the guide.

   720 rather than 620: at 620 a 133-character lede -- "Initials, spelling
   changes and married names are common in old records. We help connect the
   recorded name with your current identity." -- broke over three lines with
   the panel half empty either side of it. At 720 the same sentence sets on
   two. 720 is about 72 characters a line at 20px, which is at the top of the
   comfortable range and acceptable for two lines of hero standfirst; it would
   be too wide for body copy, which is why this is scoped to the hero. */
.wk-phero--center .wk-phero__lede,
.wk-v3 .wk-sv--hero .wk-sv__lede{max-width:720px;margin-inline:auto;font-size:20px;
  line-height:1.6;text-wrap:pretty}
.wk-phero--center .wk-phero__actions{margin-top:30px}
.wk-phero--center .wk-phero__actions{justify-content:center}
/* CENTRING AN EYEBROW TAKES TWO RULES, NOT ONE. .wk-eyebrow is inline-flex with a
   20px ::before dash and an 8px gap, so text-align:center centres the BOX and
   leaves the words 14px right of the panel's centre line -- the dash is inside
   the thing it just centred, and the h1 below it is exact, so the eyebrow reads
   as a mistake rather than as a style. Both of the homepage's centred heads ship
   exactly this pair (template-homepage.php:1317-1318, and verbatim again at
   1430-1431); copying only the first line is the documented way to get it wrong.

   text-wrap:balance on the lede for the reason single-service-v3.php:725-731
   gives for the one other centred hero lede on the site: without it the browser
   fills line one and drops the remainder onto line two, which here leaves a
   ten-character orphan. It is already on every heading globally; this element is
   the one piece of centred multi-line copy that never got it. */
.wk-phero--center .wk-eyebrow{justify-content:center}
.wk-phero--center .wk-eyebrow::before{display:none}
/* (the lede's wrapping is set once, above, with the rest of its scale) */
@media(max-width:560px){.wk-phero__actions .btn{width:100%}}

/* ── section head ── icon tile + h2 + optional sub */
/* v2.1.0: margin-bottom was 18px. Sections had generous outer padding (104px)
   but their heading sat almost on the content, which is what read as congested.
   The reference site solves the same problem with a dedicated --section-gap. */
.wk-block__head{display:flex;align-items:flex-start;gap:14px;margin-bottom:var(--section-gap)}
.wk-block__head > div{padding-top:2px}
.wk-block__ico{width:40px;height:40px;flex:none;border-radius:12px;background:var(--b-050);border:1px solid var(--b-100);color:var(--b-600);display:flex;align-items:center;justify-content:center}
.wk-block__ico svg{width:20px;height:20px}
.wk-block h2{font-size:clamp(22px,2.4vw,30px);letter-spacing:-.022em;line-height:1.2}
.wk-block__sub{font-size:var(--fs-body-sm);color:var(--ink-3);margin-top:6px;max-width:60ch}

/* CENTRED SECTION HEAD, as a modifier rather than a per-page patch.

   The homepage centres its section heads and the signed-off design follows it,
   but .wk-block__head is display:flex with an icon tile beside the text, so it
   is structurally left-aligned -- there was no way to centre it without either
   editing the base, which sixteen templates share, or hand-patching each page.
   This is the third option: additive, opt-in, and one class per page when the
   other archives are brought across.

   The numbers are the homepage's own. .wk-s4__top caps at 820px and centres,
   and its heading sits clamp(18px,2vw,24px) above the content. The base here
   uses margin-bottom:var(--section-gap), which is 128px at full width -- five
   times the reference, and a large part of why these pages read as loose.

   display:block undoes the flex so the icon tile, if a page still renders one,
   stacks instead of sitting alongside. Pages using this modifier are expected
   to drop the tile: a centred heading with a square tile above it is a third
   pattern, and the design has two. */
.wk-block__head--center{display:block;text-align:center;
  max-width:820px;margin:0 auto clamp(18px,2vw,24px)}
.wk-block__head--center > div{padding-top:0}
/* The sub-line under a CENTRED head is bigger and darker than the left-aligned
   base on both signed-off pages. The homepage's centred sub-copy is
   15.5px/var(--ink-2) sitting 11-12px under the heading (.wk-s4__lede and
   .wk-svc13__lede); the service template's centred #related sub -- this exact
   class in this exact role -- renders 16px/1.65/#53617d 12px down, from
   record-service.css:299. That sheet is gated on is_singular(), which is why a
   hub page inherits none of it and was left on the base.

   The base's var(--fs-body-sm)/var(--ink-3)/6px is the left-rail caption
   treatment: the smallest, lightest text on the page, six pixels under a 42px
   heading. Tokens rather than the literals either reference uses -- var(--fs-body)
   is the 16px the closest match lands on, var(--ink-2) is what the homepage names
   where record-service.css hardcodes #53617d.

   52ch stays. It is the homepage's cap for centred sub-copy, and v3's wider 62ch
   exists because its sub-lines are seeded per record ("a number chosen to fit
   this sentence would break on the next service whose lede is three words
   longer") -- which does not apply to copy written in this template. */
.wk-block__head--center .wk-block__sub{max-width:52ch;margin-inline:auto;
  margin-top:12px;font-size:var(--fs-body);line-height:1.65;color:var(--ink-2)}

/* ── THE TRUST MARK ──────────────────────────────────────────────────────────
   A shared component rather than a third hand-rolled copy. The two that exist
   are different objects: .wk-heroseal (template-homepage.php) STRADDLES the
   fixed header -- z-index 120 over a z-index-100 bar, a rAF clip-path tracking
   the header underside, and an html.wk-menuopen escape hatch, because a
   hero-anchored mark is above the whole header or below it, never between the
   bar and the panels it opens. .wk-v3seal (single-service-v3.php) is a STAMP ON
   A PANEL: z-index 3, below the header, no script at all, overhanging the hero
   tile's top edge so part of it sits on the page and part on the panel.

   This is the second one. Not a preference -- every page but the homepage opens
   with .wk-crumb (96px of top padding, plus .wk-phero's 18px), so its hero panel
   starts about 134px down and there is no header left to straddle; and every page
   but the homepage uses the shared header, which HAS the
   .wk-header__actions{margin-left:auto} fix on line 213, so the burger really is
   in the top-right corner and the homepage's mobile placement would sit on it.

   TWO THINGS THE CALLING PAGE OWES THIS COMPONENT:
   1. The mark is a SIBLING of the hero panel. .wk-panelframe is overflow:hidden
      for its 36px radius and clips the overhang, which is the whole effect.
   2. The wrapper carries no data-rv. .wk-anim [data-rv] is translateY(20px) while
      revealing, and a transform makes a stacking context -- leave data-rv on the
      panel.

   .wk-sealwrap repeats the panel's own box so `right` is measured from the panel
   edge. .wk-phero is full-bleed inside var(--frame) while .wk-phero__inner caps
   at var(--container) and centres, so above about 1568px the two right edges are
   thirty-odd pixels apart and a mark positioned off the section drifts away from
   the corner exactly where the screen is widest. v3 works around this with a
   --frame term inside its own expression; a wrapper is the honest fix. */
.wk-sealwrap{position:relative}

/* .wk-v3seal's GEOMETRY, VERBATIM. Owner asked for the same size and position as
   the service template, so this is that expression rather than an approximation
   of it.

   An earlier version of this rule deviated on purpose, and the reason has since
   expired: it read "a content-height hero panel is 340-400px tall against v3's
   560, and half the panel is not a stamp". That was true when the hub hero was
   as tall as its contents. The hero now carries v3's own
   min(100dvh - 200px, 560px) tile, so the premise is gone and so is the
   deviation. The mark went from 148px to 192.48 and moved with it.

   RE-BASED, not copied blind. v3 positions against .wk-ghero, whose padding box
   is the full viewport, so its expression carries a 0.48 x --frame term to claw
   back the difference between that and the panel. .wk-sealwrap is the section's
   content box, which already excludes --frame on both sides, and the algebra
   cancels exactly:

     v3     right = 26%(viewport) + 0.48f - seal/2, measured from viewport right
     here   right = 26%(viewport - 2f) - seal/2,    measured from viewport right - f
     and    0.26(vw - 2f) = 0.26vw - 0.52f, which is the same point.

   So the --frame term is not dropped, it is absorbed. Same for the vertical: v3
   counts 135px from the section top and the section's 18px of top padding puts
   the panel edge at y=18, so from the panel edge the constant is 117.

   The tile term matters. Both numbers move with the hero's height -- on a short
   window the tile shrinks, the mark shrinks with it and rides up -- which is why
   this cannot be a fixed ratio: at a 500px tile the overhang is 39% of the mark,
   at 560 it is 33%. */
.wk-pageseal{position:absolute;z-index:3;pointer-events:none;
  --wk-tile:min(calc(100vh - 200px), 560px);
  --wk-tile:min(calc(100dvh - 200px), 560px);
  --wk-seal:max(96px, calc(0.5705 * var(--wk-tile) - 127px));
  width:var(--wk-seal);height:var(--wk-seal);
  right:calc(26% - var(--wk-seal) / 2);
  top:calc(117px + (var(--wk-tile) - 560px) / 2 - 0.9397 * var(--wk-seal))}

/* v3's own short-window rule: below 640px of height there is no room for a hero
   AND a mark hanging off it. Height, not width. */
@media(max-height:640px){.wk-pageseal{display:none}}

/* The frame is rotated, not the artwork -- v3's split, kept, so the plate can be
   swapped without moving anything. The supplied stamp arrived as red ink on an
   opaque white square and the white was keyed out into real transparency (the
   .webp carries a live alpha channel, VP8X flag 0x10), so the ink reads the same
   on the page above the panel edge and on the panel below it. */
.wk-pageseal__art{display:flex;align-items:center;justify-content:center;
  width:100%;height:100%;transform:rotate(-6deg)}
.wk-pageseal__art > img{width:100%;height:100%;object-fit:contain}

/* PHONE: RELOCATE, LIKE v3, RATHER THAN HIDE. The earlier rule hid the mark here
   because a content-height hub hero had no empty corner to overhang. It has one
   now -- the same 560px tile v3 has -- so v3's own phone treatment applies: 96px,
   inside the tile rather than hanging off it. v3's note for the same rule is that
   the overhang is a desktop flourish and legible breadcrumbs are not. */
@media(max-width:700px){.wk-pageseal{--wk-seal:96px;top:10px;right:12px}}

/* ── .wk-sealwrap--mark · THE HOMEPAGE'S SIZE, AS AN OPT-IN ──────────────────
   ADDITIVE. Every rule above keeps its value and every page already using
   .wk-sealwrap is untouched; this is a modifier a page opts into, which is the
   rule for this file -- .wk-block__head is shared by sixteen templates and
   .wk-phero by eleven, so a base rule is never edited to suit one page.

   WHY IT EXISTS. .wk-pageseal sizes itself from the hero's HEIGHT
   (0.5705 x the 560px tile, less 127) and lands on 192.47px. .wk-heroseal on
   the homepage is a flat 130. Two sizes for one mark is two marks, so the
   company pages take the homepage's number and its two breakpoints exactly.

   TOP IS RE-ANCHORED, and that is not cosmetic. The base writes top as
   117px + (tile - 560px)/2 - 0.9397 x seal. The 0.9397 is tuned to 192.47 and
   produces a 5px overhang at 130 -- flush, so the stamp stops reading as
   stamped. The tile term is worse: it lifts the mark by half the hero's height
   shortfall, but the panel's top edge does not move when the hero shortens, so
   on a window under about 760px tall it drives the mark up behind the fixed
   header. Written as the measured fraction, the overhang is 33.2% of the mark
   at every size and every window height, and the mark's top clears the header
   by 15px throughout. */
.wk-sealwrap--mark .wk-pageseal{--wk-seal:130px;top:calc(-0.332 * var(--wk-seal))}
@media(max-width:1024px){.wk-sealwrap--mark .wk-pageseal{--wk-seal:clamp(72px, 9vw, 96px)}}
@media(max-width:700px){.wk-sealwrap--mark .wk-pageseal{top:10px;right:12px}}
@media(max-width:560px){.wk-sealwrap--mark .wk-pageseal{--wk-seal:clamp(44px, 12vw, 64px);top:6px;right:10px}}
/* The base hides the mark below 640px of viewport height, which was right for a
   192px mark reaching 90px above the panel. A 130px mark clears the panel by 43
   and the header by 15 at any height, and the homepage does not hide its mark
   by height either. */
@media(max-height:640px){.wk-sealwrap--mark .wk-pageseal{display:block}}

/* ── .wk-procgrid · THE PROCESS LAYOUT, AS A COMPONENT ───────────────────────
   ADDITIVE, and it exists because the same grid was about to be typed into four
   company templates. single-service-v3.php:446 settled the shape -- a sticky
   text column and the thread beside it, 1fr / 520px, capped at 1100 and
   centred, stacking at 900 -- and single-problem-v3.php then copied it by hand.
   Copy number three is where it becomes a component instead.

   The stack rule travels WITH it. record-service.css taught that twice: a rule
   that overrides a desktop layout and leaves its breakpoint behind holds two
   columns all the way down and crushes the heading column to 148px. */
.wk-procgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,520px);
  gap:clamp(28px,4vw,64px);align-items:start;max-width:1100px;margin-inline:auto}
.wk-procgrid__text{position:sticky;top:104px;align-self:start}
.wk-procgrid__text .wk-h2{font-size:clamp(28px,3.4vw,44px);line-height:1.13;margin:12px 0 0}
.wk-procgrid__text .wk-block__sub{margin:16px 0 0;max-width:40ch}
.wk-procgrid__text > .btn{display:inline-flex;margin-top:30px}
@media(max-width:900px){
  .wk-procgrid{grid-template-columns:1fr;max-width:none;gap:24px}
  .wk-procgrid__text{position:static}
  .wk-procgrid__text .wk-h2{font-size:clamp(26px,6vw,38px)}
}

/* ── .wk-proof3 · THREE SHORT CLAIMS IN A ROW ────────────────────────────────
   Each company page carried a strip of three short reassurances under its hero,
   built three separate times as .wk-cp-proof. One component now, and it is the
   card grid the rest of the site uses rather than a fourth bespoke row.

   Static cards, so no pointer cursor and no colour shift: a lift and a shadow
   say the surface is alive without promising a click the markup cannot keep,
   which is the distinction the file draws by qualifying its own card hover
   with a. */
.wk-proof3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.4vw,18px);
  max-width:1100px;margin-inline:auto}
.wk-proof3 > *{padding:clamp(18px,2vw,24px);
  transition:transform 220ms var(--ease-ui),box-shadow 220ms var(--ease-ui),border-color 220ms var(--ease-ui)}
.wk-proof3 > *:hover{transform:translateY(-3px);border-color:var(--b-200);
  box-shadow:0 22px 44px -30px rgba(42,63,189,.5)}
.wk-proof3 .wk-block__ico{margin-bottom:14px;transition:background 220ms var(--ease-ui)}
.wk-proof3 > *:hover .wk-block__ico{background:var(--b-100)}
.wk-proof3 strong{display:block;font-family:var(--f-d);font-size:var(--fs-h4);font-weight:600;
  letter-spacing:-.012em;color:var(--b-900);margin-bottom:7px}
.wk-proof3 span{display:block;color:var(--ink-2);line-height:1.6;font-size:var(--fs-body-sm)}
@media(max-width:860px){.wk-proof3{grid-template-columns:1fr}}

/* ── .wk-pillrow · A ROW OF SCOPE PILLS ──────────────────────────────────────
   .wk-chip already exists and is the right object; this is only the row that
   holds a set of them, which About and Partner both needed. */
.wk-pillrow{display:flex;flex-wrap:wrap;gap:10px;margin:26px 0 0;padding:0;list-style:none}
.wk-pillrow li{display:inline-flex;align-items:center;padding:9px 15px;border-radius:999px;
  border:1px solid var(--line);background:var(--white);color:var(--b-800);font-weight:600;font-size:var(--fs-body-sm)}

/* ── .wk-quoteblock · A PULLED STATEMENT BESIDE ITS PROSE ────────────────────
   Two columns, because the statement is the thing being remembered and the
   paragraphs are the thing being read. Stacked, the statement stops being a
   statement and becomes a heading. */
.wk-quoteblock{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(24px,3.4vw,56px);align-items:start;max-width:1100px;margin-inline:auto}
.wk-quoteblock blockquote{margin:14px 0 0;font-family:var(--f-d);font-size:clamp(23px,2.5vw,32px);
  line-height:1.24;letter-spacing:-.02em;color:var(--b-900);text-wrap:balance}
.wk-quoteblock__mark{font-family:var(--f-d);font-size:74px;line-height:.6;color:var(--b-200)}
.wk-quoteblock__body p{margin:0 0 16px;color:var(--ink-2);line-height:1.72}
.wk-quoteblock__body p:last-of-type{margin-bottom:0}
@media(max-width:860px){.wk-quoteblock{grid-template-columns:1fr;gap:22px}}

/* ── .wk-principles · A DARK PANEL FOUR-UP ───────────────────────────────────
   Rules, not cards. On .wk-panelframe--dark a bordered card would be a box
   inside a box, so the divisions are hairlines at the opacity .wk-on-dark
   already uses for its secondary button border. */
.wk-principles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:34px;
  border-top:1px solid rgba(255,255,255,.22)}
.wk-principles > div{padding:22px 24px 22px 0;border-bottom:1px solid rgba(255,255,255,.18)}
.wk-principles > div:nth-child(odd){border-right:1px solid rgba(255,255,255,.18)}
.wk-principles > div:nth-child(even){padding-left:26px}
.wk-principles b{display:block;font-family:var(--f-d);font-size:var(--fs-h4);font-weight:600;color:#fff;margin-bottom:6px}
.wk-principles span{display:block;color:#dfe6ff;line-height:1.6;font-size:var(--fs-body-sm)}
@media(max-width:650px){
  .wk-principles{grid-template-columns:1fr}
  .wk-principles > div:nth-child(odd){border-right:0}
  .wk-principles > div:nth-child(even){padding-left:0}
}

/* ── the answer callout ──
   Institution, Problem, Guide and Document all carry a *_direct_answer field, and it
   is the most useful thing on each of those pages, so it gets one strong treatment
   everywhere: brand rail, serif copy, and an amber variant when the editorial copy
   itself opens with CAUTION / WARNING / IMPORTANT. */
.wk-answer{position:relative;background:var(--white);border:1px solid var(--b-100);border-left:4px solid var(--b-500);border-radius:var(--r-panel-sm);padding:24px 26px;box-shadow:var(--e1)}
.wk-answer__label{display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-label);font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--b-700);margin-bottom:12px}
.wk-answer__label svg{width:15px;height:15px;flex:none}
.wk-answer .wk-prose{font-size:var(--fs-body-lg);color:var(--ink)}
.wk-answer--warn{border-color:var(--warn-line);border-left-color:#C8890F;background:var(--warn-soft)}
.wk-answer--warn .wk-answer__label{color:var(--warn)}
.wk-answer--warn .wk-prose{color:#4A3208}
.wk-answer--warn .wk-prose strong{color:#3A2706}

/* ── record body: narrative left, always-populated facts right ──
   Shared by all four CPT templates. The rail is what lets a thin record still read
   as a complete page. --railonly collapses it when the main column has nothing,
   rather than leaving a blank 60% beside a sidebar. */
/* Capped to the same --container as the hero panel. Without this the grid ran the
   full viewport width while the hero stopped at 1440, so past ~1500px the content
   column widened past the hero and pushed the sticky rail out to the window edge —
   the rail read as detached and clipped rather than as part of the page. */
.wk-recbody{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,340px);gap:clamp(28px,4vw,64px);align-items:start;max-width:var(--container);margin-inline:auto}

/* ── ON THIS PAGE ────────────────────────────────────────────────────────────
   A service page runs past 6000px. The rail was three passive link cards; the
   one thing a page that long actually needs is a way to jump within it, so the
   rail leads with a contents list built from the sections that exist. */
.wk-onpage{background:var(--white);border:1px solid var(--line);border-radius:var(--r-panel-sm);padding:18px 20px}
.wk-onpage__head{font-family:var(--f-d);font-size:var(--fs-label);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--b-700);display:flex;align-items:center;gap:8px;margin:0 0 12px}
.wk-onpage ol{list-style:none;margin:0;padding:0;counter-reset:op}
.wk-onpage li{counter-increment:op;border-top:1px solid var(--line)}
.wk-onpage li:first-child{border-top:0}
.wk-onpage a{display:flex;gap:10px;padding:9px 0;font-size:var(--fs-body-sm);line-height:1.45;color:var(--ink-2);text-decoration:none}
.wk-onpage a::before{content:counter(op);font-family:var(--f-m);font-size:11px;font-weight:600;color:var(--b-500);flex:none;padding-top:2px;min-width:14px}
.wk-onpage a:hover{color:var(--b-700)}

/* ── FAQ AS ITS OWN SECTION ──────────────────────────────────────────────────
   The FAQ used to sit inside the narrow content column, below five other blocks.
   Given its own full-width band it gets a readable measure and reads as a real
   part of the page rather than an afterthought. */
.wk-faqband{background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.wk-faqband__in{max-width:920px;margin-inline:auto}
.wk-recmain > * + *{margin-top:clamp(38px,4.6vw,60px)}
.wk-rail{position:sticky;top:104px;display:flex;flex-direction:column;gap:16px}
.wk-recbody--railonly{grid-template-columns:1fr}
.wk-recbody--railonly .wk-rail{position:static;display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:16px;align-items:stretch}
.wk-recbody--railonly .wk-railcard,.wk-recbody--railonly .wk-railcta{display:flex;flex-direction:column}
.wk-recbody--railonly .wk-railcta .btn{margin-top:auto}
@media(max-width:1024px){
  .wk-recbody{grid-template-columns:1fr}
  .wk-rail{position:static;order:-1}
  .wk-recbody--railonly .wk-rail{order:0}
}

/* ── definition row ── the one key/value shape used by cards, rails and fact lists */
.wk-rrow{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);gap:14px;align-items:baseline;padding:13px 0;border-bottom:1px solid var(--line)}
.wk-rrow:last-child{border-bottom:0}
.wk-rrow dt{font-size:var(--fs-label);font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:var(--ink-3);margin:0}
.wk-rrow dd{margin:0;font-size:var(--fs-body-sm);font-weight:600;color:var(--ink);min-width:0;overflow-wrap:anywhere}
.wk-rrow dd.mono{font-family:var(--f-m);font-size:var(--fs-label);letter-spacing:.01em;font-variant-numeric:tabular-nums}
.wk-rrow dd a{color:var(--b-700);display:inline-flex;align-items:center;gap:6px}
.wk-rrow dd a svg{width:13px;height:13px;flex:none;opacity:.7}
.wk-rrow dd a:hover{color:var(--b-800);box-shadow:inset 0 -1px 0 var(--b-300)}
.wk-facts{margin:0;display:grid;gap:0}
.wk-facts .wk-rrow{grid-template-columns:minmax(0,.5fr) minmax(0,1.5fr)}
.wk-facts .wk-rrow dd{font-weight:500;line-height:1.6}

/* ── rail cards ── */
.wk-railcard{background:var(--white);border:1px solid var(--line);border-radius:var(--r-panel-sm);padding:20px}
.wk-railcard__head{display:flex;align-items:center;gap:9px;font-size:var(--fs-label);font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--b-700);margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.wk-railcard__head svg{width:15px;height:15px;flex:none}
.wk-railcard .wk-rrow{grid-template-columns:1fr;gap:4px;padding:11px 0}
.wk-railcard .wk-rrow dd{font-size:var(--fs-body-sm)}
.wk-railcta{background:linear-gradient(155deg,var(--b-800) 0%,var(--b-600) 62%,var(--b-500) 100%);color:#fff;border-radius:var(--r-panel-sm);padding:22px;position:relative;overflow:hidden}
.wk-railcta::before{content:"";position:absolute;top:-60px;right:-50px;width:180px;height:180px;border-radius:50%;background:rgba(255,255,255,.16);filter:blur(44px);pointer-events:none}
.wk-railcta > *{position:relative}
.wk-railcta b{display:block;font-size:var(--fs-h4);letter-spacing:-.01em;margin-bottom:7px}
.wk-railcta p{font-size:var(--fs-body-sm);line-height:1.6;color:rgba(255,255,255,.86);margin:0 0 16px}
.wk-railcta .btn{width:100%}
/* ucp_render_phone_number() emits <p class="ucp-phone-number"><a href="tel:…">.
   It renders nothing until a real number is set under Settings → Contact Numbers,
   so no placeholder is possible here. */
.wk-railcta .ucp-phone-number{margin:12px 0 0;text-align:center;font-size:var(--fs-body-sm);font-weight:600}
.wk-railcta .ucp-phone-number a{color:#fff;box-shadow:inset 0 -1px 0 rgba(255,255,255,.5)}

/* ── linked resource list ── outbound official links, on every CPT template */
.wk-reslist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.wk-reslist a{display:flex;align-items:center;gap:14px;background:var(--white);border:1px solid var(--line);border-radius:14px;padding:15px 17px;transition:border-color .2s var(--ease-ui),box-shadow .2s var(--ease-ui),transform .2s var(--ease-ui)}
.wk-reslist a:hover{border-color:var(--b-300);box-shadow:var(--e1);transform:translateY(-2px)}
.wk-reslist .ico{width:38px;height:38px;flex:none;border-radius:11px;background:var(--b-050);border:1px solid var(--b-100);color:var(--b-600);display:flex;align-items:center;justify-content:center;transition:background .24s var(--ease-ui),color .24s var(--ease-ui),border-color .24s var(--ease-ui)}
.wk-reslist .ico svg{width:18px;height:18px}
.wk-reslist a:hover .ico{background:linear-gradient(150deg,var(--b-700),var(--b-500));border-color:transparent;color:#fff}
.wk-reslist .txt{flex:1;min-width:0}
.wk-reslist b{display:block;font-size:var(--fs-h4);font-weight:600;letter-spacing:-.01em;color:var(--b-900)}
.wk-reslist span{display:block;font-size:var(--fs-label);color:var(--ink-3);margin-top:3px}
.wk-reslist .go{flex:none;width:15px;color:var(--b-500);opacity:0;transform:translateX(-4px);transition:opacity .18s var(--ease-ui),transform .18s var(--ease-ui)}
.wk-reslist a:hover .go{opacity:1;transform:none}

/* ── related content ── */
.wk-relgroup + .wk-relgroup{margin-top:26px}
.wk-relgroup__head{display:flex;align-items:center;gap:10px;font-size:var(--fs-h4);font-weight:700;color:var(--b-900);margin-bottom:12px}
.wk-relgroup__head svg{width:17px;height:17px;color:var(--b-600);flex:none}
.wk-draft{display:inline-flex;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--warn);background:var(--warn-soft);border:1px solid var(--warn-line);border-radius:var(--r-pill);padding:2px 8px;margin-left:8px;vertical-align:middle}

/* ── editor-only notice ── internal fields, gated by current_user_can('edit_post') */
.wk-editnote{max-width:var(--container);margin:0 auto;padding:0 var(--frame)}
.wk-editnote__box{background:var(--warn-soft);border:1px solid var(--warn-line);border-left:4px solid #C8890F;border-radius:var(--r-panel-sm);padding:18px 20px}
.wk-editnote__t{display:flex;align-items:center;gap:9px;font-size:var(--fs-label);font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--warn);margin-bottom:10px}
.wk-editnote__t svg{width:15px;height:15px;flex:none}
.wk-editnote dl{margin:0;display:flex;flex-direction:column;gap:9px}
.wk-editnote dt{font-size:var(--fs-label);font-weight:700;color:#4A3208}
.wk-editnote dd{margin:2px 0 0;font-size:var(--fs-body-sm);color:#4A3208;line-height:1.6}

/* ── guided-assistant section ── the closing lead block on every CPT template */
.wk-assist{padding-inline:var(--frame)}
.wk-assist__inner{max-width:var(--container);margin-inline:auto;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(28px,4vw,64px);align-items:center}
.wk-assist__inner .wk-jcard{background:var(--white)}
.wk-assist .wk-lede{max-width:38ch}
.wk-assist__points{list-style:none;margin:24px 0 0;padding:0;display:flex;flex-direction:column;gap:13px}
.wk-assist__points li{display:flex;align-items:flex-start;gap:11px;font-size:var(--fs-body-sm);color:var(--ink-2);line-height:1.55}
.wk-assist__points svg{width:19px;height:19px;color:var(--ok);flex:none;margin-top:1px}
@media(max-width:1024px){.wk-assist__inner{grid-template-columns:1fr}}
/* No-JS fallback wrapper for the plugin's own [ucp_lead_form], which is a real
   nonce-checked, honeypotted, rate-limited POST form. The assistant enhances the
   lead path; it never stands in front of it. */
.wk-noscript{margin-top:18px;background:var(--white);border:1px solid var(--line);border-radius:var(--r-panel-sm);padding:22px}
.wk-noscript .ucp-lead-form p{margin:0 0 12px}
.wk-noscript label{display:block;font-size:var(--fs-label);letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);margin-bottom:6px}
.wk-noscript input,.wk-noscript textarea{width:100%;background:var(--white);border:1px solid var(--line-2);border-radius:8px;padding:12px 14px;font-family:var(--f-d);font-size:var(--fs-button);color:var(--ink)}
.wk-noscript .ucp-cta-button{font-family:var(--f-d);font-size:var(--fs-button);font-weight:600;border-radius:var(--r-pill);padding:0 26px;height:50px;background:linear-gradient(67deg,var(--b-800) 10%,var(--b-500) 94%);color:#fff;border:0;cursor:pointer}
.wk-noscript .ucp-lead-form-note{font-size:var(--fs-label);color:var(--ink-3)}

/* ── directory ── the Institution listing, reusable by any future index */
.wk-dirbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:24px}
.wk-dirbar__search{position:relative;flex:1;min-width:220px}
.wk-dirbar__search svg{position:absolute;left:15px;top:50%;transform:translateY(-50%);width:17px;height:17px;color:var(--ink-3);pointer-events:none}
.wk-dirbar__search input{width:100%;height:48px;background:var(--white);border:1px solid var(--line-2);border-radius:var(--r-pill);padding:0 18px 0 42px;font-family:var(--f-d);font-size:var(--fs-body-sm);color:var(--ink)}
.wk-dirbar__search input:focus{outline:0;border-color:var(--b-500);box-shadow:0 0 0 3px var(--b-100)}
.wk-filters{display:flex;gap:7px;flex-wrap:wrap}
.wk-filter{display:inline-flex;align-items:center;gap:7px;height:40px;padding:0 15px;border-radius:var(--r-pill);background:var(--white);border:1px solid var(--line-2);font-size:var(--fs-label);font-weight:600;color:var(--ink-2);cursor:pointer;transition:background .18s var(--ease-ui),border-color .18s var(--ease-ui),color .18s var(--ease-ui)}
.wk-filter:hover{border-color:var(--b-300);color:var(--b-700);background:var(--b-050)}
.wk-filter[aria-pressed="true"]{background:var(--b-600);border-color:var(--b-500);color:#fff}
.wk-filter .n{font-family:var(--f-m);font-size:11px;opacity:.7}
.wk-dircount{font-size:var(--fs-label);color:var(--ink-3);margin-bottom:16px}
.wk-dirgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(276px,1fr));gap:16px}
.wk-dircard{position:relative;display:flex;flex-direction:column;background:var(--white);border:1px solid var(--line);border-radius:var(--r-panel-sm);padding:22px;transition:box-shadow .24s var(--ease-ui),border-color .24s var(--ease-ui),transform .24s var(--ease-ui)}
.wk-dircard:hover{border-color:var(--b-300);box-shadow:var(--e2);transform:translateY(-3px)}
.wk-dircard__top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.wk-dircard__ico{width:42px;height:42px;flex:none;border-radius:13px;background:var(--b-050);border:1px solid var(--b-100);color:var(--b-600);display:flex;align-items:center;justify-content:center;transition:background .28s var(--ease-ui),color .28s var(--ease-ui),border-color .28s var(--ease-ui)}
.wk-dircard__ico svg{width:20px;height:20px}
.wk-dircard:hover .wk-dircard__ico{background:linear-gradient(150deg,var(--b-700),var(--b-500));border-color:transparent;color:#fff}
.wk-dircard h3{font-size:var(--fs-h4);letter-spacing:-.014em;line-height:1.35}
.wk-dircard__meta{font-size:var(--fs-label);color:var(--ink-3);margin-top:7px;line-height:1.55}
.wk-dircard__foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.wk-dircard__go{display:inline-flex;align-items:center;gap:7px;font-size:var(--fs-label);font-weight:700;color:var(--b-700)}
.wk-dircard__go svg{width:13px;flex:none;transition:transform .2s var(--ease-ui)}
.wk-dircard:hover .wk-dircard__go svg{transform:translateX(4px)}

/* ── empty state ── never a bare blank area */
.wk-empty{text-align:center;padding:clamp(40px,6vw,72px) 24px;background:var(--white);border:1px dashed var(--line-2);border-radius:var(--r-panel)}
.wk-empty svg{width:38px;height:38px;color:var(--b-300);margin:0 auto 16px}
.wk-empty b{display:block;font-size:var(--fs-h3);color:var(--b-900);letter-spacing:-.015em;margin-bottom:8px}
.wk-empty p{font-size:var(--fs-body-sm);color:var(--ink-2);max-width:44ch;margin:0 auto 20px;line-height:1.6}

/* ── numbered steps ── "what happens next", used by Contact / Partner / Guide */
.wk-steps{list-style:none;counter-reset:wkstep;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.wk-steps li{counter-increment:wkstep;position:relative;padding:16px 0 16px 58px}
.wk-steps li + li{border-top:1px solid var(--line)}
.wk-steps li::before{content:counter(wkstep,decimal-leading-zero);position:absolute;left:0;top:15px;width:38px;height:38px;border-radius:12px;background:var(--b-050);border:1px solid var(--b-100);color:var(--b-700);font-family:var(--f-m);font-size:var(--fs-label);font-weight:700;display:flex;align-items:center;justify-content:center}
.wk-steps b{display:block;font-size:var(--fs-h4);color:var(--b-900);letter-spacing:-.01em;margin-bottom:4px}
.wk-steps span{display:block;font-size:var(--fs-body-sm);color:var(--ink-2);line-height:1.6;max-width:58ch}

/* ── tabs ── FAQ, and any future grouped panel set */
.wk-tabs{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:24px;border-bottom:1px solid var(--line);padding-bottom:16px}
.wk-tab{height:42px;padding:0 17px;border-radius:var(--r-pill);background:var(--white);border:1px solid var(--line-2);font-size:var(--fs-body-sm);font-weight:600;color:var(--ink-2);cursor:pointer;transition:background .18s var(--ease-ui),border-color .18s var(--ease-ui),color .18s var(--ease-ui)}
.wk-tab:hover{border-color:var(--b-300);color:var(--b-700);background:var(--b-050)}
.wk-tab[aria-selected="true"]{background:var(--b-600);border-color:var(--b-500);color:#fff}

/* ── long-form document ── legal pages, with a sticky contents rail */
.wk-doc{display:grid;grid-template-columns:minmax(220px,264px) minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:start}
.wk-doc__toc{position:sticky;top:104px}
.wk-doc__toc p{font-size:var(--fs-label);font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--b-700);margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.wk-doc__toc ol{list-style:none;counter-reset:wktoc;margin:0;padding:0;display:flex;flex-direction:column;gap:1px}
.wk-doc__toc li{counter-increment:wktoc}
.wk-doc__toc a{display:flex;gap:10px;padding:8px 10px;border-radius:8px;font-size:var(--fs-body-sm);color:var(--ink-2);line-height:1.4;transition:background .16s var(--ease-ui),color .16s var(--ease-ui)}
.wk-doc__toc a::before{content:counter(wktoc);font-family:var(--f-m);font-size:11px;color:var(--ink-3);flex:none;padding-top:2px}
.wk-doc__toc a:hover,.wk-doc__toc a.is-current{background:var(--b-050);color:var(--b-700)}
.wk-doc__body{background:var(--white);border:1px solid var(--line);border-radius:var(--r-panel);padding:clamp(26px,3.4vw,48px)}
.wk-doc__body h2{font-size:clamp(20px,2.2vw,26px);letter-spacing:-.02em;margin:38px 0 12px;scroll-margin-top:110px}
.wk-doc__body h2:first-child{margin-top:0}
.wk-doc__body h3{font-size:var(--fs-h4);margin:24px 0 8px}
.wk-doc__body p,.wk-doc__body li{font-size:var(--fs-body);line-height:1.75;color:var(--ink-2)}
.wk-doc__body p{margin:0 0 14px}
.wk-doc__body ul,.wk-doc__body ol{margin:0 0 16px;padding-left:22px}
.wk-doc__body li{margin-bottom:7px}
.wk-doc__body a{color:var(--b-700);box-shadow:inset 0 -1px 0 var(--b-300)}
.wk-doc__body strong{color:var(--ink);font-weight:600}
@media(max-width:1024px){.wk-doc{grid-template-columns:1fr}.wk-doc__toc{position:static;order:-1}}

/* ── blog cards ── */
.wk-posts{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:22px}
.wk-post{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--line);border-radius:var(--r-panel);overflow:hidden;transition:box-shadow .28s var(--ease-ui),border-color .28s var(--ease-ui),transform .28s var(--ease-ui)}
.wk-post:hover{border-color:var(--b-300);box-shadow:var(--e2);transform:translateY(-5px)}
.wk-post__art{position:relative;aspect-ratio:16/9;overflow:hidden;background:linear-gradient(150deg,var(--b-800) 0%,var(--b-600) 58%,var(--b-500) 100%);display:flex;align-items:center;justify-content:center;color:#fff}
.wk-post__art img{width:100%;height:100%;object-fit:cover}
.wk-post__art svg{width:38%;height:auto;opacity:.55;transition:transform .38s var(--ease-ui)}
.wk-post:hover .wk-post__art svg{transform:scale(1.07)}
.wk-post__body{display:flex;flex-direction:column;flex:1;padding:22px 24px 24px}
.wk-post h3{font-size:var(--fs-h3);letter-spacing:-.018em;line-height:1.3}
.wk-post__ex{font-size:var(--fs-body-sm);line-height:1.6;color:var(--ink-2);margin:9px 0 0}
.wk-post__foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:18px;padding-top:16px;border-top:1px solid var(--line);font-size:var(--fs-label);color:var(--ink-3)}
.wk-post__more{display:inline-flex;align-items:center;gap:7px;font-weight:700;color:var(--b-700)}
.wk-post__more svg{width:13px;flex:none;transition:transform .2s var(--ease-ui)}
.wk-post:hover .wk-post__more svg{transform:translateX(4px)}

/* ── pagination ── */
.wk-pager{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:40px}
.wk-pager .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:44px;padding:0 14px;border-radius:var(--r-pill);background:var(--white);border:1px solid var(--line-2);font-size:var(--fs-body-sm);font-weight:600;color:var(--ink-2);transition:background .18s var(--ease-ui),border-color .18s var(--ease-ui),color .18s var(--ease-ui)}
.wk-pager .page-numbers:hover{border-color:var(--b-300);color:var(--b-700);background:var(--b-050)}
.wk-pager .page-numbers.current{background:var(--b-600);border-color:var(--b-500);color:#fff}
.wk-pager .dots{border-color:transparent;background:none}

/* ── two-column split ── copy left, form/panel right (Contact, Partner) */
.wk-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:start}
@media(max-width:1024px){.wk-split{grid-template-columns:1fr}}

/* ── value grid ── the "how we work" / "what you get" tiles */
.wk-vgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px}
.wk-vtile{background:var(--white);border:1px solid var(--line);border-radius:var(--r-panel-sm);padding:24px;transition:border-color .24s var(--ease-ui),box-shadow .24s var(--ease-ui),transform .24s var(--ease-ui)}
.wk-vtile:hover{border-color:var(--b-200);box-shadow:var(--e1);transform:translateY(-2px)}
.wk-vtile__ico{width:42px;height:42px;border-radius:13px;background:var(--b-050);border:1px solid var(--b-100);color:var(--b-600);display:flex;align-items:center;justify-content:center;margin-bottom:16px;transition:background .28s var(--ease-ui),color .28s var(--ease-ui),border-color .28s var(--ease-ui)}
.wk-vtile__ico svg{width:20px;height:20px}
.wk-vtile:hover .wk-vtile__ico{background:linear-gradient(150deg,var(--b-700),var(--b-500));border-color:transparent;color:#fff}
.wk-vtile b{display:block;font-size:var(--fs-h4);color:var(--b-900);letter-spacing:-.012em;margin-bottom:6px}
.wk-vtile p{font-size:var(--fs-body-sm);color:var(--ink-2);line-height:1.6}

/* ── scroll-inked path ─────────────────────────────────────────────────────
   Promoted out of template-homepage.php, where the same shape ("The mechanism")
   was written page-local. A vertical thread ink~s in as the reader scrolls, and
   each marker lights when the ink front passes it.

   The homepage keeps its own inline copy on purpose: it is a standalone
   template that loads neither this part nor wk-page-close, so there is nothing
   here for it to share. Its markers also carry per-reason icon stamps that are
   specific to that section. This copy is the plain one, driven per instance by
   the wk-page-close script rather than by the homepage's global IDs, so any
   number of paths can run on one page. */
/* Geometry: the thread sits at 15px + 1px half-width = 16px from the path's
   left edge, and a 14px marker centres on it at padding-left(52) - 43 + 7 = 16.
   Change one of those three numbers and the markers slide off the thread. */
.wk-path{position:relative;padding-left:52px}
.wk-path__line{position:absolute;left:15px;top:8px;bottom:8px;width:2px}
.wk-path__line svg{width:2px;height:100%;overflow:visible}
.wk-pathline{stroke:var(--line-2);stroke-width:2}
.wk-pathline-draw{stroke:var(--b-500);stroke-width:2;stroke-dasharray:1000;stroke-dashoffset:1000;transition:stroke-dashoffset .28s linear}
.wk-node{position:relative;padding-bottom:34px}
.wk-node:last-child{padding-bottom:0}
.wk-node__dot{position:absolute;left:-43px;top:2px;width:14px;height:14px;border-radius:50%;background:var(--white);border:2.5px solid var(--line-2);transition:border-color .3s var(--ease-ui),background .3s var(--ease-ui),transform .2s var(--ease-pop)}
.wk-node.is-current .wk-node__dot{border-color:var(--b-500);background:var(--b-500)}
.wk-node:hover .wk-node__dot{transform:scale(1.25)}
.wk-node__n{font-family:var(--f-m);font-size:var(--fs-caption);color:var(--ink-3);letter-spacing:.05em;margin-bottom:4px}
.wk-node h3{font-family:var(--f-d);font-size:var(--fs-h4);font-weight:600;color:var(--b-900);line-height:1.32;margin:0 0 6px}
.wk-node p{font-size:var(--fs-body-sm);color:var(--ink-2);line-height:1.65;margin:0;max-width:52ch}
.wk-node:hover h3{color:var(--b-700);transition:color .2s var(--ease-ui)}
/* The stagger: each node arrives a beat after the one above it. */
.wk-path .wk-node[data-rv]:nth-child(2){transition-delay:0ms}
.wk-path .wk-node[data-rv]:nth-child(3){transition-delay:80ms}
.wk-path .wk-node[data-rv]:nth-child(4){transition-delay:160ms}
.wk-path .wk-node[data-rv]:nth-child(5){transition-delay:240ms}
.wk-path .wk-node[data-rv]:nth-child(6){transition-delay:320ms}
.wk-path .wk-node[data-rv]:nth-child(7){transition-delay:400ms}

/* the progress bar + counter that sit beside a path */
.wk-pathbar{display:flex;gap:6px;margin-top:26px;max-width:220px}
.wk-pathbar i{flex:1;height:3px;border-radius:2px;background:var(--line-2);transition:background .3s var(--ease-ui)}
.wk-pathbar i.on{background:var(--b-500)}
.wk-pathnum{display:block;margin-top:10px;font-family:var(--f-m);font-size:var(--fs-caption);color:var(--ink-3);letter-spacing:.05em}

/* The global brake. Every animation and transition on the page collapses to
   effectively zero when the visitor has asked for reduced motion. */
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
/* ── .wk-steprow · A SEQUENCE ACROSS, NOT DOWN ───────────────────────────────
   THE SECOND WAY TO SHOW STEPS, AND IT EXISTS SO THE PAGES STOP MATCHING. The
   site has one sequence object, .wk-path: a vertical scroll-inked thread beside
   a sticky heading. The homepage uses it, the service template uses it, the
   situation template uses it, and the moment About and Contact used it too,
   five pages in a row explained themselves with the identical picture. A
   visitor cannot name that, but they read it as one long page rather than
   several considered ones.

   So this is the short-sequence alternative: three or four steps ACROSS, joined
   by one rule that runs behind the numerals. It suits a sequence that is short
   and reassuring rather than long and procedural -- Contact's three steps are
   "we read it, we connect it, we call you", which is a promise, not a process,
   and a 500px vertical thread overstates it.

   THE LINE IS ONE ::before ON THE ROW, not a border on each item: a border per
   item leaves a gap at every cell boundary, and the inset stops it short of the
   first and last numerals instead of running off both edges. It is hidden the
   moment the row stacks, where a horizontal rule would be pointing sideways at
   nothing. */
.wk-steprow{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(18px,2.4vw,34px);max-width:1100px;margin-inline:auto}
.wk-steprow::before{content:"";position:absolute;left:24px;right:24px;top:23px;height:2px;
  background:linear-gradient(90deg,var(--b-200),var(--b-100));z-index:0}
.wk-steprow > *{position:relative;z-index:1}
.wk-steprow__n{display:flex;align-items:center;justify-content:center;width:46px;height:46px;
  border-radius:50%;background:var(--white);border:2px solid var(--b-200);
  font-family:var(--f-m);font-size:var(--fs-label);font-weight:700;color:var(--b-700);
  margin-bottom:16px;transition:border-color 220ms var(--ease-ui),background 220ms var(--ease-ui),color 220ms var(--ease-ui)}
.wk-steprow > *:hover .wk-steprow__n{background:var(--b-600);border-color:var(--b-600);color:#fff}
.wk-steprow h3{font-family:var(--f-d);font-size:var(--fs-h4);font-weight:600;letter-spacing:-.012em;
  color:var(--b-900);margin:0 0 8px;line-height:1.3}
.wk-steprow p{margin:0;color:var(--ink-2);line-height:1.65;font-size:var(--fs-body-sm)}
@media(max-width:820px){
  .wk-steprow{grid-template-columns:1fr;gap:22px}
  .wk-steprow::before{display:none}
  .wk-steprow__n{margin-bottom:12px}
}

/* ── .wk-splitform · A FORM BESIDE ITS FACTS ─────────────────────────────────
   Contact's own layout, and deliberately one no other page uses. The form and
   the details answer the same question from two directions -- "how do I reach
   you" -- and putting them in one section side by side is what a contact page
   looks like. Separately stacked they were three sections doing one job.

   The form takes the larger share because it is the thing being filled in; the
   details column is four short facts and a strip, and at equal width the email
   would set on a 600px line. */
.wk-splitform{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  gap:clamp(20px,2.6vw,38px);align-items:start;max-width:1160px;margin-inline:auto}
@media(max-width:980px){.wk-splitform{grid-template-columns:1fr}}

/* ── .wk-flowstrip · A FOUR-STAGE HANDOVER, ACROSS A DARK PANEL ──────────────
   THE THIRD AND LAST SEQUENCE OBJECT, and the count is the point. The site now
   has exactly three ways to draw steps and each one belongs to a different kind
   of content:

     .wk-path      vertical, scroll-inked, beside a sticky heading. A long
                   procedure the reader is working through — homepage, service,
                   situation, and About's four-stage approach.
     .wk-steprow   three across on one rule. A short promise rather than a
                   procedure — Contact's "we read it, we connect it, we call".
     .wk-flowstrip four across, divided by hairlines, on a dark panel. A
                   handover between two parties, where the DIVISIONS matter as
                   much as the order because each cell is somebody's turn.

   Partner's referral flow is the third of those, and it is why this exists
   rather than a fourth use of .wk-path: the previous version of that page drew
   it exactly this way and the shape was right, it was only built in hardcoded
   rgba and stranded in one template.

   Hairlines, not cards: on .wk-panelframe--dark a bordered tile would be a box
   inside a box, so the divisions are the 1px .wk-on-dark already uses for its
   secondary button border. */
.wk-flowstrip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:34px;
  border-top:1px solid rgba(255,255,255,.22)}
.wk-flowstrip > div{padding:24px 22px 22px 0}
.wk-flowstrip > div + div{padding-left:22px;border-left:1px solid rgba(255,255,255,.18)}
.wk-flowstrip small{display:block;font-family:var(--f-m);font-size:var(--fs-label);font-weight:700;
  letter-spacing:.08em;color:#aebdff;margin-bottom:12px}
.wk-flowstrip b{display:block;font-family:var(--f-d);font-size:var(--fs-h4);font-weight:600;
  letter-spacing:-.012em;color:#fff;margin-bottom:8px;line-height:1.3}
.wk-flowstrip p{margin:0;color:#dfe6ff;font-size:var(--fs-body-sm);line-height:1.6}
@media(max-width:850px){
  .wk-flowstrip{grid-template-columns:1fr 1fr}
  .wk-flowstrip > div:nth-child(3){border-left:0;padding-left:0;border-top:1px solid rgba(255,255,255,.18)}
  .wk-flowstrip > div:nth-child(4){border-top:1px solid rgba(255,255,255,.18)}
}
@media(max-width:560px){
  .wk-flowstrip{grid-template-columns:1fr}
  .wk-flowstrip > div + div{padding-left:0;border-left:0;border-top:1px solid rgba(255,255,255,.18)}
}


/* ── .ucp-lead-form · THE SHORTCODE'S FORM, WEARING THE SITE'S FIELDS ────────
   [ucp_lead_form] renders bare <p> wrappers holding a <label> and an <input>,
   with no classes on the field at all -- it was written to be painted by the
   plugin's own ucp-frontend stylesheet, a second design system that every
   template dequeued and that was deleted outright on 24 Sep 2026. Nothing else
   styled the form, so Contact and Partner were both shipping raw browser
   inputs: 1px #767676 borders, square corners, 2px of padding.

   These rules are therefore the ONLY thing painting that form, on the only two
   pages that use the shortcode. They were already doing that job before the
   stylesheet was removed -- removing it changed nothing here -- but they are now
   load-bearing without a fallback, which is worth knowing before anyone prunes
   them as "plugin styling that belongs in the plugin".

   That is the whole bug, and it is styling only. The markup, the names, the
   honeypot, the nonce, the duplicate guard and the admin-post action are the
   shortcode's and are not touched here -- which matters, because that form is
   the one that actually POSTs and stores a lead.

   The values are .wk-jfield's, the field the rest of the site uses, so a
   visitor moving between the FAQ's hand-built form and these two sees one
   control. Structural selectors, since there are no classes to hook: the
   wrappers are the form's own <p> children, and :not() keeps the honeypot and
   the two note paragraphs out of the grid.

   TWO COLUMNS, because name and phone are short and sit naturally side by side
   while company and details want the full width. :nth-of-type is safe here --
   the hidden inputs are not <p> and the honeypot is excluded by class. */
.ucp-lead-form{display:grid;grid-template-columns:1fr 1fr;gap:16px 18px;
  max-width:820px;margin-inline:auto;text-align:left}
.ucp-lead-form > p{margin:0;grid-column:1 / -1}
/* :has(), NOT nth-of-type, AND THAT WAS A BUG I SHIPPED. The honeypot is the
   form's FIRST <p> -- display:none removes it from the layout but not from
   nth-of-type -- so :nth-of-type(1) and (2) were selecting the honeypot and the
   name field. Name came out half width and Phone, which should have been beside
   it, went full width underneath. Matching on the field's own id instead is
   immune to anything being inserted before it, and says what it means. */
.ucp-lead-form > p:has(#ucp_name),
.ucp-lead-form > p:has(#ucp_phone){grid-column:auto}
.ucp-lead-form .ucp-hp-field{display:none}

/* Labels in brand ink rather than grey. On a tinted panel a grey label reads as
   disabled, and the competitor forms in this sector all carry their brand
   colour into the field furniture -- it is the cheapest signal that the form is
   part of the page rather than dropped into it. */
.ucp-lead-form label{display:block;font-family:var(--f-d);font-size:var(--fs-label);
  font-weight:700;letter-spacing:.02em;color:var(--b-800);margin-bottom:7px}
.ucp-lead-form input,
.ucp-lead-form textarea{width:100%;font-family:var(--f-d);font-size:var(--fs-body);
  color:var(--b-900);background:var(--white);border:1px solid var(--line-2);border-radius:8px;
  padding:12px 14px;transition:border-color var(--dur) var(--ease-ui),box-shadow var(--dur) var(--ease-ui)}
.ucp-lead-form textarea{min-height:104px;resize:vertical;line-height:1.55}
.ucp-lead-form input::placeholder,
.ucp-lead-form textarea::placeholder{color:var(--ink-3)}
.ucp-lead-form input:hover,
.ucp-lead-form textarea:hover{border-color:var(--b-300)}
.ucp-lead-form input:focus,
.ucp-lead-form textarea:focus{outline:0;border-color:var(--b-500);box-shadow:0 0 0 3px var(--b-100)}

/* The submit is .btn.btn-1's paint on the shortcode's own class name, rather
   than a class added to the markup -- the shortcode owns that button. */
.ucp-lead-form .ucp-cta-button{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  height:54px;padding:0 30px;border:0;border-radius:999px;cursor:pointer;
  font-family:var(--f-d);font-size:var(--fs-body);font-weight:700;color:#fff;
  background:linear-gradient(67deg,var(--b-800) 10%,var(--b-500) 94%);box-shadow:var(--e1);
  transition:background var(--dur) var(--ease-ui),box-shadow var(--dur) var(--ease-ui),transform 160ms var(--ease-pop)}
.ucp-lead-form .ucp-cta-button:hover{background:linear-gradient(67deg,var(--b-900) 10%,var(--b-600) 94%);
  box-shadow:var(--e2);transform:translateY(-1px)}
.ucp-lead-form .ucp-cta-button:focus-visible{outline:2px solid var(--b-700);outline-offset:3px}
.ucp-lead-form .ucp-cta-button[disabled]{opacity:.62;cursor:default;transform:none}

.ucp-lead-form .ucp-lead-form-privacy,
.ucp-lead-form .ucp-lead-form-note{font-size:var(--fs-body-sm);line-height:1.55;color:var(--ink-3)}
.ucp-lead-form .ucp-lead-form-privacy a{color:var(--b-700);font-weight:600}

@media(max-width:620px){
  .ucp-lead-form{grid-template-columns:1fr}
  .ucp-lead-form > p:nth-of-type(1),
  .ucp-lead-form > p:nth-of-type(2){grid-column:1 / -1}
  .ucp-lead-form .ucp-cta-button{width:100%}
}