/* ==========================================================================
   RepX Theme — 2026 Redesign layer
   Handle: repx-redesign (enqueued LAST, after every conditional stylesheet).
   Rules of this file:
     • Token-only. No literal hex/rgb anywhere below :root — every color is var(--…).
       This keeps the file identical on Local, staging and prod, and inert to the
       recolor hex-remap (mu-plugin repx-color-palette.php never touches this handle).
     • Each phase appends one fenced block, opened by a "== P<n> <name> ==" comment and
       closed by a "== /P<n> ==" comment. Rollback of a phase = delete its block.
       (Never quote a comment delimiter inside a comment — it ends the comment early and
       the parser then drops the next rule; that is how the :root block once went missing.)
     • Load order is guaranteed by inc/enqueue.php: repx_enqueue_redesign() runs at
       wp_enqueue_scripts priority 110 with deps on every enqueued style handle.
   ========================================================================== */

/* == P0 tokens == */
:root {
  /* Header geometry — single source for every offset that used to be a magic number
     (7rem / 8rem template padding, the 88px breadcrumb hack, .reading-progress top:65px). */
  --header-h: 4rem;
  /* The header's real stacking value. The compiled bundle also declares
     --z-header: 50, but nothing reads it — .site-header hardcodes 1000 and
     .reading-progress hardcodes 1001. 1000 is the value that is actually true. */
  --z-header: 1000;

  /* --color-muted is consumed three times by the /contact booking indicator and
     is defined NOWHERE in the served bundle, so all three fell back to a literal:
     the pending step's label, the ring around its number, and the connector
     between steps. The fallback (#d8cfbe in the recolor, #E6EBF1 in the source
     bundle) measures 1.32:1 on the cream ground — an upcoming-step indicator
     that cannot be seen, on the page that takes bookings. Defining the token
     once fixes all three and works whichever copy of the rule wins the cascade,
     since the fallback stops being read at all. Secondary ink is 4.84:1 and
     stays lighter and bluer than the active step's body ink (7.73:1), so the
     pending/active hierarchy still reads. For a hairline, use --color-border. */
  --color-muted: var(--color-text-secondary);

  /* Callout grounds (blog modules) — darker than cream, so inks inside them switch
     to --color-text-heading / --color-text-body (see P1). */
  --color-callout-lavender: #d2d0df;
  --color-callout-sage: #ced7bf;

  /* Hero grounds — cream's tonal siblings, one per page via body.ground--* (P3/P4).
     All clear WCAG AA with the standard inks (secondary ink 4.49–4.57:1). */
  --hero-cream: #f2ede3;
  --hero-gray: #e8e6e3;
  --hero-lavender: #e6e4ee;
  --hero-blue: #dfe8ef;
  --hero-sage: #e4e9dc;
  --hero-ground: var(--hero-cream);

  /* Values the served theme uses as literals; named here so new CSS can reference them. */
  --web-muted-ink: #8c887f;
  --web-violet-hover: #2f7cb0;
  --web-hero-gradient: linear-gradient(160deg, #544453 0%, #463747 35%, #5a4658 65%, #544453 100%);
  --web-ease-stripe: cubic-bezier(0.215, 0.61, 0.355, 1);
  --web-icon-gradient: linear-gradient(135deg, var(--color-primary-violet), var(--color-primary-teal));

  /* Reading measure for long-form columns. */
  --measure: 42.5rem; /* 680px */

  /* Fold discipline — vertical rhythm keyed to viewport HEIGHT as well as width, so a
     1440×720 laptop (1920×1080 at 125%) keeps the primary CTA above the fold.
     Consumed by later phases; defining them here changes nothing yet. */
  --space-section-fold: clamp(2.5rem, 7vh, 5rem);
  --hero-pt: clamp(1.75rem, 4.5vh, 3.25rem);
  --hero-pb: clamp(1.5rem, 4vh, 2.75rem);
  --fold-gap: clamp(1rem, 2.5vh, 1.75rem);
  --crumb-pad: clamp(1.5rem, 3.5vh, 2.25rem);
}

/* Hero ground assignment. Templates opt in with a body class; nothing is painted
   until a hero rule reads --hero-ground (P3/P4). */
body.ground--cream    { --hero-ground: var(--hero-cream); }
body.ground--gray     { --hero-ground: var(--hero-gray); }
body.ground--lavender { --hero-ground: var(--hero-lavender); }
body.ground--blue     { --hero-ground: var(--hero-blue); }
body.ground--sage     { --hero-ground: var(--hero-sage); }
/* == /P0 == */

/* == P1 blog == */
/* Breadcrumbs — shared part (template-parts/breadcrumbs.php). The band owns its own
   symmetric vertical gap so it reads centered whether the hero below is white or tinted. */
.breadcrumbs { padding: var(--crumb-pad) 0; }
.breadcrumbs__list { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0; padding: 0; font-size: var(--fs-small); color: var(--web-muted-ink); }
.breadcrumbs__item { display: flex; align-items: center; min-width: 0; }
.breadcrumbs__item + .breadcrumbs__item::before { content: "/"; margin-right: 0.5rem; color: var(--color-bg-muted); }
.breadcrumbs__link, .breadcrumbs__text { color: var(--color-text-secondary); text-decoration: none; transition: color var(--transition-fast); }
.breadcrumbs__link:hover { color: var(--color-text-heading); }
.breadcrumbs__current { color: var(--color-text-heading); font-weight: var(--fw-medium); max-width: 40ch; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* On posts the legacy class stays for header clearance; drop its band chrome so the trail sits
   on the page ground, and let the crumb bar be the whole gap above the post header. */
.breadcrumbs.single-post__breadcrumbs { background: transparent; border-bottom: 0; padding-bottom: 0; }
.single-post__breadcrumbs + .single-post__header { padding-top: var(--crumb-pad); }

/* Post header type — mockup scale (Kent, 2026-09-02; supersedes the 08-30 42/26/20 scale).
   Specificity 0,2,0 so it wins over the inlined blog-recolor rules (0,1,0). */
.single-post .single-post__title { font-size: clamp(2.25rem, 5vw, 3.5rem); font-weight: var(--fw-bold); line-height: 1.08; letter-spacing: -0.025em; color: var(--color-text-heading); margin: 0 0 1.25rem; text-wrap: balance; }
.single-post .single-post__excerpt { font-size: clamp(1.125rem, 2.2vw, 1.375rem); font-weight: var(--fw-light); line-height: 1.5; color: var(--color-text-secondary); max-width: 40rem; }
.single-post .prose h2 { font-size: clamp(1.5rem, 3vw, 1.875rem); font-weight: var(--fw-bold); line-height: 1.2; letter-spacing: -0.015em; color: var(--color-text-heading); margin: 3.5rem 0 1rem; scroll-margin-top: calc(var(--header-h) + 2rem); }
.single-post .prose h3 { font-size: 1.1875rem; font-weight: var(--fw-semibold); line-height: 1.3; letter-spacing: 0; color: var(--color-text-heading); margin: 2.5rem 0 0.75rem; scroll-margin-top: calc(var(--header-h) + 2rem); }
.single-post .prose h2:first-child { margin-top: 0; }

/* Buttons inside article prose: keep .prose a link styling off them. */
.prose .btn, .repx-inline-cta .btn, .blog-next-steps .btn { text-decoration: none; white-space: nowrap; }
.prose .btn--primary, .prose .btn--primary:hover { color: var(--color-white); }

/* Key Takeaways — lavender callout ground. The tint is darker than cream, so the label and
   audience inks switch to heading/body plum (brand blue would fall to 2.05:1 here). */
.single-post .blog-takeaways { max-width: var(--measure); margin: 0 0 2.5rem; padding: 2rem; background: var(--color-callout-lavender); border: 0; border-radius: var(--radius-xl); }
.single-post .blog-takeaways--accordion .blog-takeaways__trigger { padding: 0; background: transparent; }
.single-post .blog-takeaways__trigger-text, .single-post .blog-takeaways__heading { font-size: var(--fs-small); font-weight: var(--fw-bold); letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-heading); }
.single-post .blog-takeaways__trigger-text i, .single-post .blog-takeaways__heading i, .single-post .blog-takeaways__audience i, .single-post .blog-takeaways--accordion .accordion__icon { color: var(--color-text-heading); }
.single-post .blog-takeaways__audience { color: var(--color-text-body); text-transform: none; letter-spacing: 0; font-weight: var(--fw-regular); font-size: var(--fs-caption); margin: 1rem 0 1.25rem; padding-bottom: 1.25rem; border-bottom: 1px solid color-mix(in oklab, var(--color-text-heading) 20%, transparent); }
.single-post .blog-takeaways__list li { color: var(--color-text-body); }
.single-post .blog-takeaways__list li::before { background: var(--color-text-heading); }
.single-post .blog-takeaways__tldr { border-top: 1px solid color-mix(in oklab, var(--color-text-heading) 20%, transparent); }
.single-post .blog-takeaways__tldr-label { color: var(--color-text-heading); letter-spacing: 0.12em; }
.single-post .blog-takeaways__tldr p { color: var(--color-text-body); }

/* Stat callout — slot 3. Figure leads; hairline top rule in heading ink, thin bottom rule. */
.blog-stat-callout { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.5rem; align-items: center; max-width: var(--measure); margin: 2.5rem 0; padding: 1.25rem 0; border-top: 2px solid var(--color-text-heading); border-bottom: 1px solid var(--color-border); }
.blog-stat-callout__figure { font-size: 3.25rem; font-weight: var(--fw-extrabold); letter-spacing: -0.045em; line-height: 0.85; color: var(--color-text-heading); font-variant-numeric: tabular-nums; }
.blog-stat-callout__body { font-size: var(--fs-caption); line-height: 1.55; color: var(--color-text-body); }
.blog-stat-callout__claim { display: block; }
.blog-stat-callout__source { display: block; margin-top: 0.4rem; font-size: var(--fs-small); color: var(--web-muted-ink); text-decoration: none; }
.blog-stat-callout__source:hover { color: var(--color-text-heading); }

/* Inline CTA (slot 5, injected) — sage callout ground replaces the white shadowed card. Inks
   move to plum for AA on the tint; the embedded form keeps its own field styling. */
.single-post .repx-inline-cta { max-width: var(--measure); background: var(--color-callout-sage); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: none; }
.single-post .repx-inline-cta__heading { color: var(--color-text-heading); font-size: 1.0625rem; font-weight: var(--fw-bold); line-height: 1.35; }
.single-post .repx-inline-cta__subtext, .single-post .repx-inline-cta__trust { color: var(--color-text-body); }

/* Next steps — slot 8. Three cards, hairline borders that turn brand blue on hover. */
.blog-next-steps { max-width: var(--measure); margin: 3rem 0 0; padding-top: 1.75rem; border-top: 1px solid var(--color-border); }
.blog-next-steps__label { font-size: var(--fs-small); font-weight: var(--fw-bold); letter-spacing: 0.12em; text-transform: uppercase; color: var(--web-muted-ink); margin-bottom: 1.25rem; }
.blog-next-steps__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.blog-next-steps__grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.blog-next-step { display: flex; flex-direction: column; gap: 0.45rem; padding: 1.125rem 1.25rem; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-white); text-decoration: none; transition: border-color var(--transition-fast), transform var(--transition-fast); }
.blog-next-step:hover { border-color: var(--color-primary-violet); transform: translateY(-2px); }
.blog-next-step:focus-visible { outline: 2px solid var(--color-primary-violet); outline-offset: 2px; }
.blog-next-step__kind { font-size: 0.6875rem; font-weight: var(--fw-bold); letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-primary-violet); }
.blog-next-step__title { font-size: 0.9375rem; font-weight: var(--fw-semibold); line-height: 1.4; color: var(--color-text-heading); }
.blog-next-step__meta { font-size: var(--fs-small); color: var(--web-muted-ink); margin-top: auto; }

@media (max-width: 47.999rem) {
  .blog-stat-callout { gap: 1rem; }
  .blog-stat-callout__figure { font-size: 2.5rem; }
  .blog-next-steps__grid, .blog-next-steps__grid--2 { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .blog-next-step, .breadcrumbs__link { transition: none; }
  .blog-next-step:hover { transform: none; }
}

/* ---- P1b: article furniture (mockup blog-post.html) ---------------------------------- */
/* Takeaways list: check marks, not dots. */
.single-post .blog-takeaways__list li { padding-left: 1.6rem; font-size: var(--fs-caption); line-height: 1.6; }
.single-post .blog-takeaways__list li::before { content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 0.75rem; width: auto; height: auto; top: 0.3em; border-radius: 0; background: transparent; color: var(--color-success); }

/* TL;DR — own module: hairline border on the page ground, muted label. */
.blog-tldr { max-width: var(--measure); margin: 0 0 2.5rem; padding: 1.75rem 2rem; border: 1px solid var(--color-border); border-radius: var(--radius-xl); background: transparent; }
.blog-tldr__label { display: block; font-size: var(--fs-small); font-weight: var(--fw-bold); letter-spacing: 0.12em; text-transform: uppercase; color: var(--web-muted-ink); margin-bottom: 0.875rem; }
.blog-tldr__text { font-size: var(--fs-caption); line-height: 1.7; color: var(--color-text-body); margin: 0; }

/* Quotes — the coral mark replaces the blue rule and tinted panel; light, large type. */
.single-post .prose blockquote, .single-post .pull-quote { position: relative; margin: 3rem 0; padding: 0; max-width: var(--measure); border: 0; border-radius: 0; background: transparent; font-style: normal; font-size: clamp(1.25rem, 2.4vw, 1.5rem); font-weight: var(--fw-light); line-height: 1.4; letter-spacing: -0.01em; color: var(--color-text-heading); }
.single-post .prose blockquote::before { content: "\201C"; display: block; font-family: Georgia, serif; font-size: 3.5rem; line-height: 0.6; color: var(--color-accent-pink); margin-bottom: 0.75rem; }
.single-post .pull-quote__mark { font-family: Georgia, serif; font-size: 3.5rem; line-height: 0.6; color: var(--color-accent-pink); margin-bottom: 0.75rem; }
.single-post .prose blockquote p, .single-post .pull-quote__text { font-size: inherit; font-weight: inherit; line-height: inherit; color: inherit; margin: 0 0 0.875rem; }
.single-post .prose blockquote em, .single-post .prose blockquote i { font-style: normal; }
/* Attribution: a <cite>, or the last paragraph when the quote has more than one (the site's
   convention is "– Source" as a trailing paragraph). Single-paragraph quotes are left alone. */
.single-post .prose blockquote cite, .single-post .prose blockquote p:last-child:not(:only-child), .single-post .pull-quote__author { display: block; font-size: var(--fs-caption); font-style: normal; font-weight: var(--fw-semibold); color: var(--web-muted-ink); margin: 0; }
.single-post .pull-quote__author-title { font-size: var(--fs-small); color: var(--web-muted-ink); }
.single-post .pull-quote__footer { margin-top: 0; }

/* Inline notability tool card — white card with hairline border and an eyebrow (not the sage CTA). */
.single-post .repx-inline-cta--notability { background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-xl); }
.single-post .repx-inline-cta__eyebrow { display: flex; align-items: center; gap: 0.5rem; font-size: var(--fs-small); font-weight: var(--fw-bold); letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-primary-violet); margin-bottom: 0.75rem; }
.single-post .repx-inline-cta--notability .repx-inline-cta__heading { font-size: 1.25rem; letter-spacing: -0.01em; }
.single-post .repx-inline-cta--notability .repx-inline-cta__subtext { color: var(--color-text-secondary); }
.single-post .repx-notability-cta__label { font-size: 0.875rem; font-weight: var(--fw-medium); color: var(--color-text-heading); }

/* Further reading — label + hairline list with a trailing arrow; meta sits under the title. */
.single-post .blog-related-resources { max-width: var(--measure); margin: 3rem 0; padding: 0; background: transparent; border: 0; border-radius: 0; }
.single-post .blog-related-resources__heading { font-size: var(--fs-small); font-weight: var(--fw-bold); letter-spacing: 0.12em; text-transform: uppercase; color: var(--web-muted-ink); margin: 0 0 1rem; padding: 0; border: 0; }
.single-post .blog-related-resources__heading i { display: none; }
.single-post .blog-related-resources__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--color-border); }
.single-post .blog-related-resources__item { margin: 0; padding: 0; border: 0; border-bottom: 1px solid var(--color-border); }
.single-post .blog-related-resources__link { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 1rem 2.25rem 1rem 0; text-decoration: none; transition: padding var(--transition-fast); }
.single-post .blog-related-resources__link:hover { padding-left: 0.5rem; }
.single-post .blog-related-resources__link::after { content: "\f061"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 0.7rem; color: var(--color-primary-violet); position: absolute; right: 0.25rem; top: 50%; transform: translateY(-50%); }
.single-post .blog-related-resources__title { font-size: var(--fs-caption); font-weight: var(--fw-semibold); color: var(--color-text-heading); }
.single-post .blog-related-resources__meta, .single-post .blog-related-resources__meta a { font-size: var(--fs-small); color: var(--web-muted-ink); text-decoration: none; }

/* Tags + share — uppercase muted labels, outline circles on the page ground. */
.single-post .single-post__tags { max-width: var(--measure); margin: 3rem 0 0; padding-top: 2rem; border-top: 1px solid var(--color-border); background: transparent; }
.single-post .single-post__tags-label, .single-post .single-post__share-label { font-size: var(--fs-small); font-weight: var(--fw-bold); letter-spacing: 0.12em; text-transform: uppercase; color: var(--web-muted-ink); }
.single-post .single-post__share-bottom { max-width: var(--measure); margin-top: 1.5rem; padding: 0; background: transparent; border: 0; border-radius: 0; }
.single-post .single-post__share-btn { background: transparent; color: var(--color-text-secondary); font-size: 0.8rem; }
.single-post .single-post__share-btn:hover { border-color: var(--color-primary-violet); color: var(--color-primary-violet); background: color-mix(in oklab, var(--color-primary-violet) 6%, transparent); }

/* Author card — cream, generous radius, no accent rule. */
.single-post .author-byline { max-width: var(--measure); margin-top: 3.5rem; padding: 2rem; gap: 1.5rem; background: var(--color-bg-light); border: 0; border-radius: var(--radius-xl); }
.single-post .author-byline__avatar { width: 72px; height: 72px; }
.single-post .author-byline__label { font-size: var(--fs-small); font-weight: var(--fw-bold); letter-spacing: 0.12em; text-transform: uppercase; color: var(--web-muted-ink); }
.single-post .author-byline__name { font-size: 1.125rem; margin: 0.25rem 0; }
.single-post .author-byline__title { font-size: var(--fs-caption); color: var(--color-text-secondary); }
.single-post .author-byline__bio { font-size: var(--fs-caption); line-height: 1.65; }
.single-post .author-byline__link { font-size: var(--fs-small); font-weight: var(--fw-semibold); color: var(--color-primary-violet); }
.single-post .author-byline__link:hover { color: var(--color-text-heading); }

/* Sidebar: TOC as a hairline rail, CTA as a solid plum card (no WebGL canvas). */
.single-post .sidebar-toc { padding: 0; background: transparent; border: 0; border-radius: 0; }
.single-post .sidebar-toc .sidebar-widget__title { font-size: var(--fs-small); font-weight: var(--fw-bold); letter-spacing: 0.12em; text-transform: uppercase; color: var(--web-muted-ink); padding: 0; margin: 0 0 0.75rem; border: 0; }
.single-post .sidebar-toc .sidebar-widget__title i { color: var(--web-muted-ink); }
.single-post .sidebar-toc__list { border-left: 1px solid var(--color-border); counter-reset: none; max-height: min(46vh, 420px); overflow-y: auto; overscroll-behavior: contain; }
.single-post .sidebar-toc__item { margin: 0; }
.single-post .sidebar-toc__link { display: block; padding: 0.45rem 0 0.45rem 1rem; margin-left: -1px; border-left: 2px solid transparent; font-size: var(--fs-small); line-height: 1.4; color: var(--color-text-secondary); text-decoration: none; }
.single-post .sidebar-toc__link::before { content: none; }
.single-post .sidebar-toc__link:hover { color: var(--color-text-heading); background: transparent; }
.single-post .sidebar-toc__link.is-active { border-left-color: var(--color-primary-violet); color: var(--color-text-heading); font-weight: var(--fw-semibold); background: transparent; }
.single-post .sidebar-cta { text-align: left; padding: 1.75rem; background: var(--web-hero-gradient); border: 0; border-radius: var(--radius-xl); }
.single-post .sidebar-cta__canvas { display: none; }
.single-post .sidebar-cta__icon { width: 2.5rem; height: 2.5rem; margin: 0 0 1rem; border-radius: var(--radius-md); background: color-mix(in oklab, var(--color-white) 12%, transparent); color: var(--color-white); display: flex; align-items: center; justify-content: center; }
.single-post .sidebar-cta__title { font-size: 1.0625rem; line-height: 1.3; color: var(--color-white); margin: 0 0 0.5rem; text-align: left; }
.single-post .sidebar-cta__text { font-size: var(--fs-small); line-height: 1.6; color: color-mix(in oklab, var(--color-white) 75%, transparent); margin: 0 0 1.25rem; text-align: left; }
.single-post .sidebar-cta__btn { width: 100%; }
.single-post .sidebar-cta__note { font-size: 0.6875rem; color: color-mix(in oklab, var(--color-white) 60%, transparent); text-align: center; margin: 0.75rem 0 0; }

/* Footer — light: cream ground, hairline top, plum headings, secondary-ink links, outline social. */
.site-footer { background: var(--color-bg-light); color: var(--color-text-secondary); border-top: 1px solid var(--color-border); padding: 4rem 0 2rem; }
.site-footer__brand-logo { filter: none; }
.site-footer__heading { color: var(--color-text-heading); font-size: var(--fs-small); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: 0.05em; }
.site-footer__desc, .site-footer__address, .site-footer__links a, .site-footer__legal a { color: var(--color-text-secondary); }
.site-footer__address strong { color: var(--color-text-heading); }
.site-footer__links a:hover, .site-footer__legal a:hover, .site-footer__bottom a:hover { color: var(--color-text-heading); }
/* The number and its icon live in the bundle at 0,2,0 as rgba(255,255,255,.65)
   and .5 — invisible since the footer went light. Matching that specificity is
   the whole point of these selectors; a rule on .site-footer__phone alone loses
   to them.
   The colour is --color-text-secondary, not the brand blue: the address above
   it and every other footer link already use it, and on this cream ground it
   measures 4.84:1 where --color-primary-violet (#3a99db served) measures
   2.66:1 and fails as text. */
.site-footer__phone { font-weight: var(--fw-semibold); }
.site-footer__phone a { color: var(--color-text-secondary); }
.site-footer__phone a:hover { color: var(--color-text-heading); }
.site-footer__phone i { color: var(--color-text-secondary); }
.site-footer__social a { background: transparent; border: 1px solid var(--color-border); color: var(--color-text-secondary); }
.site-footer__social a:hover { border-color: var(--color-primary-violet); color: var(--color-primary-violet); background: color-mix(in oklab, var(--color-primary-violet) 6%, transparent); }
.site-footer__bottom, .site-footer__disclaimer, .site-footer__company-note { border-top-color: var(--color-border); color: var(--web-muted-ink); }
.site-footer__bottom a { color: var(--web-muted-ink); }

/* ---- P1c: review notes (Kent, 2026-09-02) ------------------------------------------- */
/* Breadcrumbs: one baseline for links and the current item; current item muted, not dark. */
/* Everything in the trail is plain inline text on one baseline. The current item is NOT
   ellipsis-truncated: overflow:hidden changes the line box and drops it a few px below the
   links no matter how the flex items are aligned. Long titles simply wrap. */
.breadcrumbs__list { line-height: 1.5; align-items: baseline; row-gap: 0.25rem; }
.breadcrumbs__item { display: inline; }
.breadcrumbs__item + .breadcrumbs__item::before { display: inline; margin: 0 0.5rem 0 0; }
.breadcrumbs__link, .breadcrumbs__text, .breadcrumbs__current { display: inline; line-height: inherit; vertical-align: baseline; }
.breadcrumbs__current { color: var(--web-muted-ink); font-weight: var(--fw-regular); max-width: none; white-space: normal; overflow: visible; text-overflow: clip; }

/* Byline dates: "Updated" and "Originally published" share one light ink and weight. */
.single-post .single-post__meta-details, .single-post .single-post__meta-details a, .single-post .blog-last-updated, .single-post .blog-last-updated i { color: var(--web-muted-ink); font-weight: var(--fw-regular); }
.single-post .post-meta__sep { color: var(--color-border); }

/* Further Reading already ends on its own hairline — the tags block must not add a second one. */
.single-post .single-post__tags { border-top: 0; padding-top: 0; margin-top: 2rem; }

/* Share row: label then icons, left-aligned. */
.single-post .single-post__share-bottom { justify-content: flex-start; gap: 1rem; }

/* FAQ → author card: the FAQ carries .section padding; collapse the gap. */
.single-post .blog-faq.section { padding-bottom: 0; }
.single-post .author-byline { margin-top: 2rem; }

/* Similar Articles header sits flush left with the grid. */
.related-posts__header { text-align: left; }

/* Footer column links at regular weight, like the mockup. */
.site-footer__links a { font-weight: var(--fw-regular); }

/* Header chips: category = light brand tint + blue text; template = cream hairline pill,
   sentence case (no uppercase, no per-template colors). */
.single-post .single-post__badges { gap: 0.5rem; margin-bottom: 1.5rem; }
.single-post .single-post__category, .single-post .single-post__template-badge { display: inline-flex; align-items: center; padding: 0.3rem 0.75rem; margin: 0; font-size: var(--fs-small); font-weight: var(--fw-semibold); line-height: 1; letter-spacing: 0; text-transform: none; border-radius: var(--radius-pill); text-decoration: none; white-space: nowrap; }
.single-post .single-post__category { background: color-mix(in oklab, var(--color-primary-violet) 10%, transparent); color: var(--color-primary-violet); border: 0; }
.single-post .single-post__category:hover { background: color-mix(in oklab, var(--color-primary-violet) 16%, transparent); }
.single-post .single-post__template-badge { background: var(--color-bg-light); color: var(--color-text-secondary); border: 1px solid var(--color-border); }

/* ---- P1d: review notes round 3 -------------------------------------------------------- */
/* Generic assessment CTA (GF form): white card with hairline border, never a tinted ground. */
.single-post .repx-inline-cta { background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-xl); }
.single-post .repx-inline-cta__heading { font-size: 1.25rem; letter-spacing: -0.01em; }
.single-post .repx-inline-cta__subtext { color: var(--color-text-secondary); }
/* FA Solid only renders at weight 900 — never set a weight on the icon itself. */
.single-post .blog-last-updated i { font-weight: 900; }
/* Long-form furniture must stay left-aligned even when legacy content markup leaks alignment. */
.single-post .blog-related-resources, .single-post .blog-next-steps, .single-post .single-post__tags, .single-post .single-post__share-bottom, .single-post .author-byline { text-align: left; }
.single-post .blog-related-resources__link { align-items: flex-start; }
/* Legacy in-body CTA (div.sales-cta from the old site, baked into ~post content): cream card. */
.single-post .prose .sales-cta { max-width: var(--measure); margin: 3rem 0; padding: 2rem; background: var(--color-bg-light); border-radius: var(--radius-xl); text-align: left; }
.single-post .prose .sales-cta .wrapper { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem; }
.single-post .prose .sales-cta-text { flex: 1 1 24rem; min-width: 0; }
.single-post .prose .sales-cta-image { display: none; }
.single-post .prose .sales-cta-heading, .single-post .prose .sales-cta h2, .single-post .prose .sales-cta h3 { font-size: 1.25rem; font-weight: var(--fw-bold); letter-spacing: -0.01em; line-height: 1.3; color: var(--color-text-heading); margin: 0 0 0.5rem; }
.single-post .prose .sales-cta p { font-size: var(--fs-caption); line-height: 1.6; color: var(--color-text-secondary); margin: 0 0 1rem; }
.single-post .prose .sales-cta p:last-child { margin-bottom: 0; }
.single-post .prose .sales-cta a { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.625rem 1.5rem; border-radius: var(--radius-pill); background: var(--color-primary-violet); color: var(--color-white); font-size: 0.9375rem; font-weight: var(--fw-semibold); text-decoration: none; white-space: nowrap; }
.single-post .prose .sales-cta a:hover { background: var(--web-violet-hover); color: var(--color-white); }
.single-post .prose .sales-cta a br { display: none; }
.single-post .prose .sales-cta a svg { width: 0.75em; height: 0.75em; }
.single-post .prose .sales-cta__link i { font-size: 0.75em; }

/* Inside the post's main column every module fills the column: the mockup's 680px measure
   was its column width, but the theme's column is wider, so a fixed measure left the
   takeaways / TL;DR / CTA / further-reading short of the right edge. */
.single-post .single-post__main { --measure: none; }
.single-post .single-post__main .prose--wide { --measure: none; }

/* ---- P1e: layout variants (mockup blog-layouts.html) ---------------------------------- */
/* Thought leadership — wide measure, larger body; quotes follow the shared coral treatment.
   Specificity 0,4,0 to beat the theme's 3-class blockquote rule. */
.single-post.single-post--thought-leadership .prose--wide { max-width: 50rem; --measure: 50rem; font-size: 1.125rem; line-height: 1.8; }
.single-post.single-post--thought-leadership .prose--wide blockquote, .single-post.single-post--thought-leadership .prose--wide blockquote p { max-width: 50rem; padding: 0; margin: 3rem 0; border: 0; border-radius: 0; background: transparent; font-size: clamp(1.25rem, 2.4vw, 1.5rem); font-weight: var(--fw-light); line-height: 1.4; color: var(--color-text-heading); }
.single-post.single-post--thought-leadership .prose--wide blockquote p { margin: 0 0 0.875rem; }

/* How-to — steps: uppercase count label, large title, numbered hairline list. */
.single-post .blog-steps { max-width: var(--measure); margin: 0 0 3.5rem; padding: 0; background: transparent; border: 0; }
.single-post .blog-steps__inner { padding: 0; }
.single-post .blog-steps__collapsible { border: 0; background: transparent; }
.single-post .blog-steps__summary { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.5rem; padding: 0; margin: 0; background: transparent; border: 0; cursor: pointer; }
.single-post .blog-steps__summary-icon { order: 0; width: auto; height: auto; background: transparent; color: var(--color-primary-violet); font-size: var(--fs-small); }
.single-post .blog-steps__summary-meta { order: 1; font-size: var(--fs-small); font-weight: var(--fw-bold); letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-primary-violet); }
.single-post .blog-steps__toggle-icon { order: 2; margin-left: auto; color: var(--web-muted-ink); }
.single-post .blog-steps__summary-title { order: 3; flex: 1 0 100%; font-size: clamp(1.375rem, 2.6vw, 1.625rem); font-weight: var(--fw-bold); line-height: 1.25; letter-spacing: -0.015em; color: var(--color-text-heading); margin: 0.25rem 0 1.5rem; }
.single-post .blog-steps__list { list-style: none; counter-reset: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
.single-post .blog-steps__item { display: grid; grid-template-columns: 2.25rem 1fr; gap: 1.25rem; padding: 1.5rem 0; margin: 0; border: 0; border-top: 1px solid var(--color-border); background: transparent; }
.single-post .blog-steps__item:last-child { border-bottom: 1px solid var(--color-border); }
.single-post .blog-steps__number { width: auto; height: auto; background: transparent; border: 0; border-radius: 0; font-size: 1.125rem; font-weight: var(--fw-extrabold); letter-spacing: -0.02em; line-height: 1.3; color: var(--color-primary-violet); font-variant-numeric: tabular-nums; }
.single-post .blog-steps__step-title { font-size: 1.0625rem; font-weight: var(--fw-semibold); line-height: 1.35; color: var(--color-text-heading); margin: 0 0 0.4rem; }
.single-post .blog-steps__step-text { font-size: var(--fs-caption); line-height: 1.7; color: var(--color-text-body); margin: 0; }

/* Listicle — intro with hairline, numbered items alternating cream. */
.single-post .listicle-intro { max-width: var(--measure); font-size: 1.0625rem; line-height: 1.75; color: var(--color-text-body); margin: 0 0 2.5rem; padding-bottom: 2rem; border-bottom: 1px solid var(--color-border); }
.single-post .listicle-items { max-width: var(--measure); margin: 0 0 1rem; }
.single-post .listicle-item, .single-post .listicle-item--alt { display: grid; grid-template-columns: 3.5rem 1fr; gap: 1.5rem; padding: 2rem; margin: 0 0 0.5rem; border: 0; border-radius: var(--radius-lg); background: transparent; box-shadow: none; }
.single-post .listicle-item:nth-child(odd) { background: var(--color-bg-light); }
.single-post .listicle-item__number { width: 3.5rem; height: 3.5rem; border-radius: var(--radius-pill); border: 1px solid var(--color-border); background: var(--color-white); display: flex; align-items: center; justify-content: center; font-size: 1.375rem; font-weight: var(--fw-extrabold); letter-spacing: -0.02em; color: var(--color-primary-violet); }
.single-post .listicle-item:nth-child(even) .listicle-item__number { background: var(--color-bg-light); border-color: transparent; }
.single-post .listicle-item__title { font-size: 1.0625rem; font-weight: var(--fw-semibold); line-height: 1.35; color: var(--color-text-heading); margin: 0 0 0.5rem; }
.single-post .listicle-item__content, .single-post .listicle-item__content p { font-size: var(--fs-caption); line-height: 1.75; color: var(--color-text-body); margin: 0; }

/* Roundup — criteria note, two-up hairline cards. */
.single-post .roundup-criteria { max-width: var(--measure); margin: 0 0 2.5rem; padding: 1.5rem 1.75rem; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: transparent; display: block; }
.single-post .roundup-criteria__icon { display: none; }
.single-post .roundup-criteria__title { font-size: var(--fs-small); font-weight: var(--fw-bold); letter-spacing: 0.12em; text-transform: uppercase; color: var(--web-muted-ink); margin: 0 0 0.625rem; }
.single-post .roundup-criteria__content, .single-post .roundup-criteria__content p { font-size: var(--fs-caption); line-height: 1.7; color: var(--color-text-body); margin: 0; }
.single-post .roundup-grid { max-width: var(--measure); margin: 0 0 3.5rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.single-post .roundup-card { display: flex; flex-direction: column; padding: 1.5rem; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-white); box-shadow: none; transition: transform var(--transition-slow), box-shadow var(--transition-slow); }
.single-post .roundup-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.single-post .roundup-card__number { font-size: var(--fs-small); font-weight: var(--fw-bold); color: var(--web-muted-ink); font-variant-numeric: tabular-nums; background: transparent; width: auto; height: auto; }
.single-post .roundup-card__category { display: inline-flex; padding: 0.25rem 0.625rem; border-radius: var(--radius-pill); font-size: 0.6875rem; font-weight: var(--fw-semibold); letter-spacing: 0.02em; text-transform: none; background: var(--color-bg-light); color: var(--color-text-secondary); }
.single-post .roundup-card__title { font-size: 1rem; font-weight: var(--fw-semibold); line-height: 1.35; color: var(--color-text-heading); margin: 0.5rem 0; }
.single-post .roundup-card__title a { color: inherit; text-decoration: none; }
.single-post .roundup-card__title a:hover { color: var(--color-primary-violet); }
.single-post .roundup-card__desc { font-size: var(--fs-small); line-height: 1.7; color: var(--color-text-body); margin: 0; }

/* Statistics — the lead number in a cream panel, two-up hairline stat cards, dashed provenance. */
.single-post .stat-highlight-carousel, .single-post .stat-highlight { max-width: var(--measure); }
.single-post .stat-highlight { padding: 2.25rem 2rem; margin: 0 0 2rem; background: var(--color-bg-light); border: 0; border-radius: var(--radius-xl); box-shadow: none; text-align: left; }
.single-post .stat-highlight__value { display: block; font-size: clamp(3rem, 7vw, 4.5rem); font-weight: var(--fw-extrabold); line-height: 1; letter-spacing: -0.03em; color: var(--color-primary-violet); background: none; -webkit-text-fill-color: currentColor; }
.single-post .stat-highlight__label { font-size: 1.0625rem; line-height: 1.6; color: var(--color-text-heading); margin: 0.875rem 0 0.5rem; max-width: 34rem; text-transform: none; letter-spacing: 0; font-weight: var(--fw-regular); }
.single-post .stat-highlight__source, .single-post .stat-highlight__source a { font-size: var(--fs-small); color: var(--web-muted-ink); }
.single-post .stat-grid { max-width: var(--measure); margin: 0 0 3.5rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.single-post .stat-card { padding: 1.5rem; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-white); box-shadow: none; text-align: left; }
.single-post .stat-card:hover { transform: none; box-shadow: none; border-color: var(--color-primary-violet); }
.single-post .stat-card__value { display: block; font-size: 2rem; font-weight: var(--fw-extrabold); line-height: 1; letter-spacing: -0.02em; color: var(--color-text-heading); background: none; -webkit-text-fill-color: currentColor; }
.single-post .stat-card__label { font-size: var(--fs-caption); line-height: 1.6; color: var(--color-text-body); margin: 0.75rem 0; text-transform: none; letter-spacing: 0; font-weight: var(--fw-regular); }
.single-post .stat-card__meta, .single-post .stat-card__source, .single-post .stat-card__year { font-size: var(--fs-small); color: var(--web-muted-ink); }
.single-post .stat-card__source a { color: var(--color-primary-violet); text-decoration: none; }
.single-post .stat-card__source a:hover { text-decoration: underline; }
.single-post .stat-methodology { max-width: var(--measure); margin: 0 0 2.5rem; display: flex; gap: 0.75rem; padding: 0.875rem 1rem; border: 1px dashed var(--color-border); border-radius: var(--radius-md); background: transparent; font-size: var(--fs-small); line-height: 1.6; color: var(--web-muted-ink); }
.single-post .stat-methodology i { color: var(--color-accent-orange); margin-top: 0.2em; flex: none; }

@media (max-width: 47.999rem) {
  .single-post .roundup-grid, .single-post .stat-grid { grid-template-columns: 1fr; }
  .single-post .listicle-item, .single-post .listicle-item--alt { grid-template-columns: 1fr; gap: 1rem; padding: 1.5rem; }
  .single-post .blog-steps__item { grid-template-columns: 1fr; gap: 0.75rem; }
}
/* == /P1 == */

/* == P2 breadcrumbs, page.php, header offset == */

/* --- Fixed-header clearance -------------------------------------------------
   The header is out of flow, so the first element of every template has to make
   room for it. Until now each hero spent 7-9rem of its own padding doing that.
   The crumb bar is now the first element on every inner page, so it owns the
   clearance in one token and the hero below keeps only its own air. Pages with
   no trail (LPs, home, 404, thank-you, coming-soon) are untouched. */
.site-header { z-index: var(--z-header); }
.site-header__inner { height: var(--header-h); }
.breadcrumbs { padding-top: calc(var(--header-h) + var(--crumb-pad)); }

/* A hero directly under the crumb bar: clearance has moved out of its padding. */
.breadcrumbs + :is(.hero, .about-hero, .repuscore-hero, .author-hub-hero, .author-profile-hero, .editor-apply-hero) { padding-top: var(--hero-pt); }
/* A plain light section has no band edge of its own, so the crumb bar's own
   bottom padding is the whole gap between trail and content. */
.breadcrumbs + :is(.section--light, .pg__header) { padding-top: 0; }

/* Anchor scrolling and the progress bar read the same token, ending the
   65px / 88px / 96px / 100px disagreement between blog, guide and pillar CSS. */
html { scroll-padding-top: calc(var(--header-h) + 1rem); }
.reading-progress { top: var(--header-h); z-index: calc(var(--z-header) + 1); }
.admin-bar .reading-progress { top: calc(var(--header-h) + 32px); }
@media (max-width: 782px) { .admin-bar .reading-progress { top: calc(var(--header-h) + 46px); } }
/* --- Default page template (page.php) — per page-default.html ---------------
   These pages get no styling from blog.css (it is enqueued only on blog
   templates), so the whole prose treatment has to live here. */
.pg__header { padding: var(--hero-pt) 0 0; }
.pg__header-inner { max-width: 51.25rem; }
.pg__eyebrow { font-size: var(--fs-small); font-weight: var(--fw-bold); letter-spacing: 0.12em; text-transform: uppercase; color: var(--web-muted-ink); margin: 0 0 1rem; }
.pg__title { font-size: clamp(2.25rem, 5vw, 3.25rem); font-weight: var(--fw-bold); line-height: 1.1; letter-spacing: -0.025em; color: var(--color-text-heading); margin: 0 0 1.25rem; text-wrap: balance; }
.pg__standfirst { font-size: clamp(1.0625rem, 2vw, 1.25rem); font-weight: var(--fw-light); line-height: 1.55; color: var(--color-text-secondary); margin: 0; }
.pg__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--color-border); font-size: var(--fs-small); color: var(--web-muted-ink); }
.pg__meta i { font-weight: 900; }

.pg__layout { display: grid; grid-template-columns: minmax(0, 1fr) 16.25rem; gap: 4rem; align-items: start; padding: 3.5rem 0 5rem; }
.pg__main { min-width: 0; max-width: 45rem; }

.pg__prose { max-width: none; font-size: 1.0625rem; line-height: 1.75; color: var(--color-text-body); }
.pg__prose > p { margin: 0 0 1.5rem; }
.pg__prose h2 { font-size: clamp(1.5rem, 3vw, 1.875rem); font-weight: var(--fw-bold); line-height: 1.2; letter-spacing: -0.015em; color: var(--color-text-heading); margin: 3.5rem 0 1rem; }
.pg__prose h2:first-child { margin-top: 0; }
.pg__prose h3 { font-size: 1.1875rem; font-weight: var(--fw-semibold); line-height: 1.3; color: var(--color-text-heading); margin: 2.5rem 0 0.75rem; }
.pg__prose h4 { font-size: 1rem; font-weight: var(--fw-semibold); color: var(--color-text-heading); margin: 2rem 0 0.625rem; }
.pg__prose a { color: var(--color-primary-violet); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.pg__prose a:hover { color: var(--color-text-heading); text-decoration-thickness: 2px; }
.pg__prose strong { font-weight: var(--fw-semibold); color: var(--color-text-heading); }
.pg__prose ul, .pg__prose ol { margin: 0 0 1.5rem; padding-left: 0; list-style: none; }
.pg__prose li { position: relative; padding-left: 1.75rem; margin-bottom: 0.75rem; line-height: 1.7; }
.pg__prose ul > li::before { content: ""; position: absolute; left: 0.4rem; top: 0.72em; width: 5px; height: 5px; border-radius: 50%; background: var(--color-primary-violet); }
.pg__prose ol { counter-reset: pgol; }
.pg__prose ol > li { counter-increment: pgol; }
.pg__prose ol > li::before { content: counter(pgol) "."; position: absolute; left: 0; top: 0; font-weight: var(--fw-bold); color: var(--color-primary-violet); font-size: var(--fs-small); line-height: 1.9; }
.pg__prose ol ol, .pg__prose ul ul { margin: 0.75rem 0 0; }
.pg__prose figure { margin: 2.5rem 0; }
.pg__prose img { max-width: 100%; height: auto; border-radius: var(--radius-lg); }
.pg__prose figcaption { font-size: var(--fs-small); color: var(--web-muted-ink); margin-top: 0.625rem; }
.pg__prose table { width: 100%; border-collapse: collapse; margin: 2rem 0; font-size: var(--fs-caption); }
.pg__prose th, .pg__prose td { padding: 0.75rem 1rem; text-align: left; border-bottom: 1px solid var(--color-border); }
.pg__prose th { font-weight: var(--fw-semibold); color: var(--color-text-heading); }
.pg__prose blockquote { margin: 2.5rem 0; padding: 0 0 0 1.5rem; border-left: 2px solid var(--color-border); color: var(--color-text-secondary); font-style: normal; }

/* Contents rail + sidebar CTA. */
.pg__sidebar { position: sticky; top: calc(var(--header-h) + 1.5rem); display: flex; flex-direction: column; gap: 1.5rem; }
.pg__toc-label { font-size: var(--fs-small); font-weight: var(--fw-bold); letter-spacing: 0.12em; text-transform: uppercase; color: var(--web-muted-ink); margin: 0 0 1rem; }
.pg__toc { border-left: 1px solid var(--color-border); }
.pg__toc ol { list-style: none; padding: 0; margin: 0; }
.pg__toc li { margin: 0; }
.pg__toc a { display: block; padding: 0.45rem 0 0.45rem 1rem; margin-left: -1px; border-left: 2px solid transparent; font-size: var(--fs-small); line-height: 1.4; color: var(--color-text-secondary); text-decoration: none; transition: color var(--transition-fast), border-color var(--transition-fast); }
.pg__toc a:hover { color: var(--color-text-heading); }
.pg__toc a.is-active { border-left-color: var(--color-primary-violet); color: var(--color-text-heading); font-weight: var(--fw-semibold); }
.pg__aside-cta { background: var(--color-bg-light); border-radius: var(--radius-xl); padding: 1.5rem; }
.pg__aside-cta__heading { font-size: 1rem; font-weight: var(--fw-semibold); line-height: 1.3; color: var(--color-text-heading); margin: 0 0 0.5rem; }
.pg__aside-cta p { font-size: var(--fs-small); line-height: 1.6; color: var(--color-text-secondary); margin: 0 0 1rem; }
.pg__aside-cta .btn { width: 100%; text-decoration: none; }

@media (max-width: 64rem) {
  .pg__layout { grid-template-columns: 1fr; gap: 2.5rem; padding-top: 2.5rem; }
  .pg__main { max-width: none; }
  .pg__sidebar { position: static; flex-direction: row; flex-wrap: wrap; }
  .pg__sidebar > * { flex: 1 1 17.5rem; }
}
/* == /P2 == */

/* == P2c recolor overrides moved out of the mu-plugin (step C2) == */
/* These were inline styles printed by mu-plugins/repx-color-palette.php right after
   the bundle, all flagged !important. Moving them here puts every redesign rule in
   one file and leaves the mu-plugin doing one job: swapping recolored files.
   Only .about-hero--animated keeps the flag, because the compiled bundle sets the
   same property with !important inside two responsive.css media queries and
   non-important CSS cannot beat that from any specificity. It goes at step A, when
   the bundle is rebuilt from the warm sources. */
:root {
  /* Page ground and nav ground, named so the inlined critical CSS can declare the
     same tokens and paint the first frame in the final colors. */
  --color-ground: var(--hero-cream);
  --color-header-bg: var(--color-white);
  /* Hero fallback gradients (mobile / no WebGL) in the brand's deep blue. */
  --hero-gradient: linear-gradient(160deg, #16314a 0%, #21425f 38%, #2d5a7d 74%, #16314a 100%);
  --about-hero-gradient: linear-gradient(160deg, #16314a 0%, #21425f 40%, #2d5a7d 75%, #16314a 100%);
}

/* Warm bone everywhere except the article templates, which stay white. Same split
   the mu-plugin computed in PHP, expressed with WordPress's own body classes. */
body { background-color: var(--color-ground); }
body.blog,
body.archive,
body.search,
body.single-post,
body.page-template-template-author-hub,
body.page-template-template-author-profile { --color-ground: var(--color-white); }

/* Global nav solid: the theme default rgba(255,255,255,.85) tints warm over the bone
   ground. .is-scrolled keeps its own box-shadow, only the ground is pinned. */
.site-header { background-color: var(--color-header-bg); }
.site-header.is-scrolled { background-color: var(--color-header-bg); }

.hero { background: var(--hero-gradient); }
.about-hero--animated { background: var(--about-hero-gradient) !important; }
/* == /P2c == */

/* == P3 services + reading progress == */

/* --- Reading progress -------------------------------------------------------
   The bar's markup is in header.php on every page, but its styling lived in
   blog.css, which is only enqueued on blog templates — so it existed and did
   nothing everywhere else. Guides carried a second implementation instead
   (.guide-progress), which measured whole-document scroll and sat at z-index
   600 beneath the opaque z-index 1000 header, where nobody could see it. One
   implementation now, styled here so it reaches every template. The blog.css
   copy stays until step A rebuilds the bundle; these rules load later and win.
   Position and stacking come from the P2 header tokens. */
.reading-progress { position: fixed; left: 0; width: 100%; height: 3px; pointer-events: none; opacity: 0; transition: opacity 0.3s ease; }
.reading-progress.is-visible { opacity: 1; }
.reading-progress__bar {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg,
    var(--color-primary-violet) 0%,
    var(--color-primary-teal) 40%,
    var(--color-accent-pink) 70%,
    var(--color-accent-orange) 100%);
  transition: width 0.1s linear;
  will-change: width;
}

/* --- Service hero, light ----------------------------------------------------
   The services hub and the 18 detail pages leave the dark animated gradient for
   a tinted ground. Which tint is a body class keyed to the section
   (repx_hero_ground_body_class), so all three Wikipedia services share one.
   fold.css deliberately does NOT zero this hero's top padding under the crumb
   bar: unlike a white hero, the tinted band's own top edge is the boundary the
   eye reads, so the bar keeps its gap and the band keeps its padding. */
/* A page that has been assigned a hero ground takes the design's page model:
   white paper with exactly one tinted band, rather than the warm bone ground the
   recolor applies site-wide. Scoped to the ground-- classes, so it reaches the
   service family now and every later template as its ground is assigned —
   without touching the pages that have not been redesigned yet. */
body.ground--cream,
body.ground--gray,
body.ground--lavender,
body.ground--blue,
body.ground--sage { --color-ground: var(--color-white); }

.sv-hero { position: relative; overflow: hidden; background: var(--hero-ground); padding: var(--hero-pt) 0 var(--hero-pb); }
.sv-hero > .container { position: relative; z-index: 2; }
.sv-hero__inner { max-width: 32rem; text-align: left; }
.sv-hero__inner--wide { max-width: 48rem; }
.sv-hero__eyebrow { display: block; font-size: var(--fs-small); font-weight: var(--fw-bold); letter-spacing: 0.12em; text-transform: uppercase; color: var(--web-muted-ink); margin-bottom: 1rem; }
.sv-back { display: inline-flex; align-items: center; gap: 0.5rem; font-size: var(--fs-small); font-weight: var(--fw-bold); letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-primary-violet); text-decoration: none; margin-bottom: 1.75rem; }
.sv-back:hover { color: var(--color-text-heading); }
.sv-back i { font-weight: 900; }
.sv-hero__title { font-size: clamp(2.25rem, min(5vw, 6.4vh), 3.5rem); font-weight: var(--fw-bold); line-height: 1.05; letter-spacing: -0.035em; color: var(--color-text-heading); margin: 0 0 1.25rem; text-wrap: balance; }
/* The headline is one string in the mockup. The service config happens to store
   it as headline + headline_accent, and the old dark hero coloured the accent
   half white; on the tinted ground it is simply the rest of the sentence. */
.sv-hero__title-accent { color: inherit; }
.sv-hero__lead { font-size: clamp(1rem, 2vw, 1.1875rem); font-weight: var(--fw-light); line-height: 1.6; color: var(--color-text-secondary); margin: 0 0 2rem; max-width: 27rem; }
.sv-hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; }
.sv-hero__actions .btn { text-decoration: none; }
@media (max-width: 48rem) {
  .sv-hero__inner, .sv-hero__inner--wide { max-width: none; }
  .sv-hero__actions .btn { width: 100%; justify-content: center; }
}

/* --- Section system ---------------------------------------------------------
   The archetype alternates white and cream bands, and every band opens with the
   same heading block: a small uppercase eyebrow, a title, an optional lead.
   Left-aligned by default; the two bands that are centred say so. Grid items
   carry a hairline top rule instead of a card border — that is the whole visual
   difference between this and the old template's boxes-and-tinted-squares. */
.hr-section { padding: clamp(4.5rem, 9vw, 7rem) 0; }
.hr-section--cream { background: var(--color-bg-light); }
.hr-section--dark { background: var(--web-hero-gradient); color: var(--color-white); }
.hr-head { max-width: 44rem; margin-bottom: 3.5rem; }
.hr-head--center { margin-inline: auto; text-align: center; }
.hr-head__eyebrow { display: block; font-size: var(--fs-small); font-weight: var(--fw-bold); letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-primary-violet); margin-bottom: 1rem; }
.hr-head__title { font-size: clamp(1.875rem, 4vw, 2.75rem); font-weight: var(--fw-bold); line-height: 1.12; letter-spacing: -0.025em; color: var(--color-text-heading); margin: 0 0 0.875rem; text-wrap: balance; }
.hr-head__sub { font-size: clamp(1rem, 2vw, 1.1875rem); font-weight: var(--fw-light); line-height: 1.6; color: var(--color-text-secondary); margin: 0; }
.hr-section--dark .hr-head__title { color: var(--color-white); }
.hr-section--dark .hr-head__sub { color: color-mix(in oklab, var(--color-white) 72%, transparent); }
.hr-section--dark .hr-head__eyebrow { color: var(--color-primary-teal); }

/* Two-column split: heading left, prose right. */
.sv-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4rem; align-items: start; }
.sv-split .hr-head { margin-bottom: 0; }
.sv-prose p { font-size: 1.0625rem; line-height: 1.7; color: var(--color-text-secondary); margin: 0 0 1.25rem; max-width: 36rem; }
.sv-prose p:last-child { margin-bottom: 0; }
.sv-prose h3 { font-size: 1.125rem; font-weight: var(--fw-semibold); letter-spacing: -0.01em; color: var(--color-text-heading); margin: 2rem 0 0.625rem; }

/* Ratings row — hairline rules top and bottom, no badges. */
.sv-trust { display: flex; flex-wrap: wrap; gap: 2.5rem; margin-top: 3rem; padding: 1.5rem 0; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); font-size: var(--fs-caption); color: var(--web-muted-ink); }
.svc-detail-guarantee #notability-calculator-root { margin-top: 3rem; }
.sv-trust span { display: inline-flex; align-items: baseline; gap: 0.45rem; }
.sv-trust b { color: var(--color-success); font-weight: var(--fw-semibold); letter-spacing: 0.04em; }

/* Benefit / included grids — hairline rule, plain icon, no tinted square. */
.sv-benefits { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2.5rem 2rem; }
.sv-included { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem 2rem; }
/* The service grids are fed from config and the item counts differ across the 16
   services — benefits run 4, 6 or 8, what's-included 6 or 7, testimonials 2 or 3.
   repx_grid_cols() picks the column count that leaves the fewest empty cells and
   stamps it here, so no service ends on a widowed row. */
.sv-grid--2up { grid-template-columns: repeat(2, 1fr); }
.sv-grid--3up { grid-template-columns: repeat(3, 1fr); }
.sv-grid--4up { grid-template-columns: repeat(4, 1fr); }
.sv-benefit { padding-top: 1.5rem; border-top: 1px solid var(--color-border); }
.sv-benefit__icon { font-size: 1.125rem; font-weight: 900; color: var(--color-primary-violet); margin-bottom: 1rem; display: block; }
.sv-benefit__title { font-size: 1rem; font-weight: var(--fw-semibold); letter-spacing: -0.01em; color: var(--color-text-heading); margin: 0 0 0.5rem; }
.sv-benefit__text { font-size: var(--fs-caption); line-height: 1.6; color: var(--color-text-secondary); margin: 0; }

/* Stats — numerals on the page, not in a card. */
.sv-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; margin-top: 3.5rem; padding-top: 2.5rem; border-top: 1px solid var(--color-border); }
.sv-stat__n { font-size: clamp(1.875rem, 4vw, 2.5rem); font-weight: var(--fw-bold); line-height: 1; letter-spacing: -0.035em; color: var(--color-primary-violet); }
.sv-stat__l { font-size: var(--fs-caption); color: var(--color-text-secondary); margin-top: 0.5rem; }

/* Service levels. */
.sv-levels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; align-items: start; }
.sv-level { position: relative; display: flex; flex-direction: column; height: 100%; background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-xl); padding: 2rem; }
.sv-level--featured { border-color: var(--color-primary-violet); }
.sv-level__flag { position: absolute; top: 0; right: 2rem; transform: translateY(-50%); background: var(--color-primary-violet); color: var(--color-white); padding: 0.3rem 0.875rem; border-radius: var(--radius-pill); font-size: var(--fs-small); font-weight: var(--fw-bold); letter-spacing: 0.08em; text-transform: uppercase; }
.sv-level__n { font-size: var(--fs-small); font-weight: var(--fw-bold); letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-primary-violet); margin-bottom: 0.75rem; }
.sv-level__title { font-size: 1.375rem; font-weight: var(--fw-bold); letter-spacing: -0.02em; color: var(--color-text-heading); margin: 0 0 0.5rem; }
.sv-level__desc { font-size: var(--fs-caption); line-height: 1.6; color: var(--color-text-secondary); margin: 0 0 1.5rem; }
.sv-level__list { list-style: none; padding: 0; margin: 0 0 1.5rem; display: flex; flex-direction: column; gap: 0.75rem; }
.sv-level__list li { display: flex; gap: 0.75rem; font-size: var(--fs-caption); line-height: 1.5; color: var(--color-text-body); }
.sv-level__list i { color: var(--color-success); font-size: 0.72rem; font-weight: 900; margin-top: 0.35em; flex: none; }
.sv-level__best { font-size: var(--fs-caption); line-height: 1.6; color: var(--color-text-secondary); margin: 0 0 1.75rem; padding-top: 1.25rem; border-top: 1px solid var(--color-border); }
.sv-level__best strong { color: var(--color-text-heading); font-weight: var(--fw-semibold); }
.sv-level .btn { width: 100%; margin-top: auto; text-decoration: none; }

/* Process steps — numbered, blue rule on top. */
.sv-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; }
.sv-step { padding-top: 1.5rem; border-top: 2px solid var(--color-primary-violet); }
.sv-step__n { font-size: var(--fs-small); font-weight: var(--fw-bold); letter-spacing: 0.14em; color: var(--color-primary-violet); margin-bottom: 1rem; }
.sv-step__title { font-size: 1.0625rem; font-weight: var(--fw-semibold); letter-spacing: -0.01em; color: var(--color-text-heading); margin: 0 0 0.625rem; }
.sv-step__text { font-size: var(--fs-caption); line-height: 1.6; color: var(--color-text-secondary); margin: 0; }

/* Testimonials. */
.sv-quotes { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.sv-quote { background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-xl); padding: 2rem; }
.sv-quote__stars { color: var(--color-success); letter-spacing: 0.1em; font-size: 0.9rem; margin-bottom: 1rem; }
.sv-quote blockquote { margin: 0 0 1.25rem; padding: 0; border: 0; background: none; font-size: 1.125rem; font-weight: var(--fw-light); line-height: 1.5; letter-spacing: -0.01em; color: var(--color-text-heading); font-style: normal; }
.sv-quote__who { font-size: var(--fs-caption); color: var(--color-primary-violet); }
.sv-quote__who strong { display: block; font-weight: var(--fw-semibold); color: var(--color-text-heading); }

/* FAQ column and the closing CTA band. */
.hr-faq { max-width: 44rem; margin-inline: auto; }
.hr-close { padding: clamp(5rem, 10vw, 8rem) 0; background: var(--web-hero-gradient); text-align: center; color: var(--color-white); }
.hr-close__inner { max-width: 38rem; margin-inline: auto; }
.hr-close__title { font-size: clamp(2rem, 4.5vw, 3rem); font-weight: var(--fw-bold); line-height: 1.12; letter-spacing: -0.03em; color: var(--color-white); margin: 0 0 1.25rem; text-wrap: balance; }
.hr-close__sub { font-size: 1.125rem; font-weight: var(--fw-light); line-height: 1.6; color: color-mix(in oklab, var(--color-white) 75%, transparent); margin: 0 0 2.5rem; }
.hr-close__row { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem 2rem; margin-top: 2rem; font-size: var(--fs-caption); color: color-mix(in oklab, var(--color-white) 70%, transparent); }
.hr-close__row span { display: inline-flex; align-items: center; gap: 0.5rem; }
.hr-close__row i { font-weight: 900; }
.hr-close__trust { max-width: 32rem; margin: 2rem auto 0; font-size: var(--fs-caption); line-height: 1.65; color: color-mix(in oklab, var(--color-white) 70%, transparent); }
.hr-close .btn { text-decoration: none; }

@media (max-width: 67.5rem) {
  .sv-benefits, .sv-steps, .sv-included, .sv-stats,
  .sv-grid--3up, .sv-grid--4up { grid-template-columns: repeat(2, 1fr); }
  .sv-levels, .sv-quotes, .sv-grid--2up { grid-template-columns: 1fr; }
  .sv-split { grid-template-columns: 1fr; gap: 2rem; }
}
@media (max-width: 45rem) {
  .sv-benefits, .sv-steps, .sv-included,
  .sv-grid--2up, .sv-grid--3up, .sv-grid--4up { grid-template-columns: 1fr; }
  .sv-trust { gap: 1.25rem 2rem; }
}

/* --- The five optional components + "What We Can't Do" ----------------------
   Ported from the design kit's service.css (2026-09-02 resend), token-for-token.
   Their two grid modifiers (.sv-benefits--3up, .sv-quotes--3up) are not carried
   over: the item counts vary more widely than the two pages they were cut
   against, so repx_grid_cols() picks .sv-grid--Nup from the count instead. */

/* answer — the direct-answer block under the hero. Verbatim machine retrieval
   is its job, so nothing competes inside it: no box, no icon, no card. */
.sv-answer { max-width: 46rem; padding-top: clamp(1.25rem, 3vh, 1.75rem); border-top: 3px solid var(--color-text-heading); }
.sv-answer__label { display: block; font-size: var(--fs-small); font-weight: var(--fw-bold); letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-primary-violet); margin-bottom: 1rem; }
.sv-answer__text { font-size: clamp(1.1875rem, 2.4vw, 1.5rem); font-weight: var(--fw-light); line-height: 1.5; letter-spacing: -0.015em; color: var(--color-text-heading); margin: 0; text-wrap: pretty; }

/* comparison — a real table styled as a hairline layout. The asymmetry is mark
   colour + ink weight + one tint, not a card. */
.sv-compare { width: 100%; border-collapse: collapse; table-layout: fixed; text-align: left; }
.sv-compare th, .sv-compare td { padding: 1.125rem 1.5rem; vertical-align: top; }
.sv-compare thead th { font-size: var(--fs-small); font-weight: var(--fw-bold); letter-spacing: 0.12em; text-transform: uppercase; color: var(--web-muted-ink); padding-bottom: 0.875rem; border-bottom: 1px solid var(--color-border); }
.sv-compare thead th:last-child { color: var(--color-primary-violet); border-bottom: 2px solid var(--color-primary-violet); }
.sv-compare tbody td { font-size: var(--fs-caption); line-height: 1.6; border-bottom: 1px solid var(--color-border); }
.sv-compare tbody td:first-child { color: var(--web-muted-ink); }
.sv-compare tbody td:last-child { color: var(--color-text-heading); font-weight: var(--fw-medium); background: color-mix(in oklab, var(--color-primary-violet) 7%, transparent); }
.sv-compare tbody tr:last-child td { border-bottom: 0; }
.sv-compare__cell { display: grid; grid-template-columns: 1rem minmax(0, 1fr); gap: 0.75rem; align-items: start; }
.sv-compare__mark { font-size: 0.75rem; font-weight: 900; margin-top: 0.25em; }
.sv-compare__mark--no { color: var(--color-danger); }
.sv-compare__mark--yes { color: var(--color-success); }
.sv-compare__intro { margin-bottom: clamp(2rem, 5vh, 3rem); }
/* The last row is the price. A red cross against "Free" would read as "free is
   bad" rather than "free is not enough", so it is a footer summary line. */
.sv-compare tfoot td { font-size: 1rem; font-weight: var(--fw-semibold); color: var(--color-text-heading); border-top: 1px solid var(--color-border); border-bottom: 0; padding-top: 1.25rem; }
.sv-compare tfoot td:first-child { color: var(--web-muted-ink); }

/* personas — the established hairline grid; the per-card CTA is a bottom-pinned
   text link, so three of them do not read as three competing buttons. */
.sv-personas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem 2rem; }
.sv-persona { display: flex; flex-direction: column; padding-top: 1.5rem; border-top: 1px solid var(--color-border); }
.sv-persona__icon { font-size: 1.125rem; font-weight: 900; color: var(--color-primary-violet); margin-bottom: 1rem; display: block; }
.sv-persona__label { font-size: 1.0625rem; font-weight: var(--fw-semibold); line-height: 1.35; letter-spacing: -0.015em; color: var(--color-text-heading); margin: 0 0 0.625rem; text-wrap: pretty; }
.sv-persona__text { font-size: var(--fs-caption); line-height: 1.65; color: var(--color-text-secondary); margin: 0 0 1.5rem; }
.sv-persona__cta { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: auto; font-size: var(--fs-caption); font-weight: var(--fw-semibold); color: var(--color-primary-violet); text-decoration: none; }
.sv-persona__cta:hover { color: var(--web-violet-hover); }
.sv-persona__cta i { font-size: 0.7rem; font-weight: 900; }

/* ai_callout — emphasis inside a band: tinted panel, no border, no shadow. The
   lavender ground drops secondary ink below comfortable contrast, so the prose
   uses body ink, the same correction the blog callouts make. */
.sv-callout { background: var(--color-callout-lavender); border-radius: var(--radius-xl); padding: clamp(2rem, 4vh, 2.75rem) clamp(1.75rem, 4vw, 3rem); }
.sv-callout__badge { display: inline-flex; align-items: center; background: var(--color-white); border-radius: var(--radius-pill); padding: 0.35rem 0.875rem; font-size: var(--fs-small); font-weight: var(--fw-bold); letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-primary-violet); margin-bottom: 1.25rem; }
.sv-callout__title { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: var(--fw-bold); line-height: 1.15; letter-spacing: -0.025em; color: var(--color-text-heading); margin: 0 0 1.5rem; max-width: 34rem; text-wrap: balance; }
.sv-callout__body { max-width: 46rem; }
.sv-callout__body p { font-size: 1.0625rem; line-height: 1.7; color: var(--color-text-body); margin: 0 0 1.125rem; }
.sv-callout__body p:last-child { margin-bottom: 0; }

/* reference_table — the header array drives the width; nothing counts columns. */
.sv-ref { width: 100%; border-collapse: collapse; text-align: left; }
.sv-ref thead th { font-size: var(--fs-small); font-weight: var(--fw-bold); letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-primary-violet); padding: 0 1.5rem 0.875rem 0; border-bottom: 2px solid var(--color-text-heading); }
.sv-ref tbody th { width: 22%; font-size: 1rem; font-weight: var(--fw-semibold); letter-spacing: -0.01em; color: var(--color-text-heading); padding: 1.375rem 1.5rem 1.375rem 0; vertical-align: top; border-bottom: 1px solid var(--color-border); text-align: left; }
.sv-ref tbody td { font-size: var(--fs-caption); line-height: 1.65; color: var(--color-text-secondary); padding: 1.375rem 1.5rem 1.375rem 0; vertical-align: top; border-bottom: 1px solid var(--color-border); }
.sv-ref thead th:last-child, .sv-ref tbody td:last-child { padding-right: 0; }
.sv-ref tbody tr:last-child :is(th, td) { border-bottom: 0; }

/* limits — "What We Can't Do". Deliberately plain: no icons, no red, no panel.
   A cross or a warning box frames candor as fine print, and these statements
   are the thing being extracted. The closing rule makes it read as a finite set. */
.sv-limits { list-style: none; padding: 0; margin: 0; border-bottom: 1px solid var(--color-border); }
.sv-limits__item { padding: clamp(1.125rem, 2.5vh, 1.5rem) 0; border-top: 1px solid var(--color-border); }
.sv-limits__item > * { max-width: 54rem; }
.sv-limits__text { font-size: clamp(1rem, 2vw, 1.1875rem); font-weight: var(--fw-light); line-height: 1.55; letter-spacing: -0.01em; color: var(--color-text-heading); margin: 0; text-wrap: pretty; }

/* Fields the full config carries that the archetype's markup did not: a tier
   price line and, on the featured tier, why it is the popular one. Both sit
   above the feature list so a tier reads price -> promise -> contents. */
.sv-level__price { font-size: var(--fs-caption); font-weight: var(--fw-semibold); color: var(--color-text-heading); margin: 0 0 0.875rem; padding-bottom: 0.875rem; border-bottom: 1px solid var(--color-border); }
.sv-level__why { font-size: var(--fs-caption); line-height: 1.6; color: var(--color-primary-violet); margin: 0 0 1.5rem; }

/* A section lead can carry more than one paragraph. .hr-head__sub is margin-zero
   by design, so the gap goes between siblings. */
.hr-head__sub + .hr-head__sub { margin-top: 1rem; }

/* Both tables stay real tables; below 720px they scroll rather than reflow, so
   the row/column relationship survives. */
@media (max-width: 67.5rem) {
  .sv-personas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sv-compare th, .sv-compare td { padding: 1rem; }
  .sv-ref tbody th { width: auto; }
}
@media (max-width: 45rem) {
  .sv-personas { grid-template-columns: 1fr; }
  .sv-compare { table-layout: auto; }
  .sv-scroll { overflow-x: auto; }
  .sv-scroll > table { min-width: 34rem; }
}
/* == /P3 == */

/* == P4 home == */
/* --- Homepage hero, light ---------------------------------------------------
   Ported from home-redesign.css. The dark WebGL mesh gradient is gone: the hero
   sits on the page's tinted ground (lavender), the headline is heading ink
   rather than white, and the lead-capture panel becomes a white hairline card.
   The panel keeps every id, name and class its JS reads — .hero__form-panel and
   the .repx-custom-form internals are untouched, .hr-hero__panel only restyles
   the shell. */
/* Home is the one converted page with no crumb bar, so nothing else clears the
   fixed header — the hero has to do it itself or the headline sits under the
   nav. The design's own header is sticky, which is why the mockup needs no
   equivalent. */
.hr-hero { background: var(--hero-ground); padding: calc(var(--header-h) + clamp(1.5rem, 4vh, 3rem)) 0 clamp(3rem, 6vh, 5.5rem); position: relative; }
.hr-hero__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) 28.75rem; gap: 5rem; align-items: center; }
.hr-hero .hero__content { max-width: none; }
/* home-redesign.css sizes this at up to 4.5rem, but fold.css then caps every
   display headline at 3.25rem and adds a viewport-height term. The kit loads
   fold.css last, so the smaller clamp is what the archetype actually renders —
   port that, not the base value. The inherited text-shadow was for white type
   on the dark mesh and reads as a smudge on the tint. */
.hr-hero .hero__headline { font-size: clamp(2rem, min(4.6vw, 6.4vh), 3.25rem); font-weight: var(--fw-bold); line-height: 1.05; letter-spacing: -0.035em; color: var(--color-text-heading); margin: 0 0 var(--fold-gap); text-wrap: balance; text-shadow: none; }
/* One colour: the archetype's headline is a single string. */
.hr-hero .hero__headline-accent { color: inherit; opacity: 1; }
.hr-hero .hero__service-label { font-size: clamp(1.125rem, 2.2vw, 1.375rem); font-weight: var(--fw-semibold); color: var(--color-text-heading); margin: 0 0 1rem; }
.hr-hero .hero__subtitle { font-size: clamp(1rem, 2vw, 1.1875rem); font-weight: var(--fw-light); line-height: 1.6; color: var(--color-text-secondary); margin: 0; max-width: 34rem; }
.hr-hero__panel { background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-xl); padding: 2rem 1.75rem; box-shadow: none; }
.hr-hero__panel-title { font-size: 1.375rem; font-weight: var(--fw-bold); letter-spacing: -0.02em; color: var(--color-text-heading); margin: 0; }
.hr-hero__panel-sub { font-size: var(--fs-caption); color: var(--color-text-secondary); margin: 0.375rem 0 1.5rem; }

/* Proof strip — hairline rules, marks in the success ink, dot separators. */
.hr-proof { border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); padding: 1.5rem 0; overflow: hidden; }
.hr-proof__track { display: flex; align-items: center; justify-content: center; gap: 2.5rem; font-size: var(--fs-caption); color: var(--web-muted-ink); flex-wrap: wrap; }
.hr-proof__mark { display: inline-flex; align-items: baseline; gap: 0.45rem; }
.hr-proof__mark b { color: var(--color-success); font-weight: var(--fw-semibold); letter-spacing: 0.04em; }
.hr-proof__dot { width: 4px; height: 4px; border-radius: 50%; background: var(--color-primary-violet); flex: none; }

/* Typographic statement. The floor on the clamp is low enough that the line
   shrinks to fit at 375px rather than forcing horizontal scroll. */
.hr-statement { padding: clamp(3rem, 7vh, 5rem) 0; text-align: center; }
.hr-statement p { font-size: clamp(1.05rem, 3.4vw, 2.5rem); font-weight: var(--fw-semibold); line-height: 1.15; letter-spacing: -0.03em; color: var(--color-text-heading); margin: 0; white-space: nowrap; }

@media (max-width: 67.5rem) {
  .hr-hero__grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .hr-hero .hero__subtitle { max-width: none; }
}

/* --- The rest of the homepage, from home-redesign.css ----------------------- */
:root {
  /* RepuScore gauge bands. Kit tokens; the live tool owns its own colours. */
  --web-score-good: #4fae7e;
  --web-score-mixed: #e0a13c;
  --web-score-risk: #d96a5a;
  --web-score-track: #eee6da;
}

/* Problem agitation — typographic columns on the dark ground, no glass cards. */
.hr-problems { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3rem; }
.hr-problem { padding-top: 1.75rem; border-top: 1px solid color-mix(in oklab, var(--color-white) 18%, transparent); }
.hr-problem__icon { font-size: 1.25rem; font-weight: 900; color: var(--color-primary-teal); margin-bottom: 1.25rem; display: block; }
.hr-problem__title { font-size: 1.25rem; font-weight: var(--fw-semibold); line-height: 1.25; letter-spacing: -0.015em; color: var(--color-white); margin: 0 0 0.75rem; }
.hr-problem__text { font-size: var(--fs-caption); line-height: 1.65; color: color-mix(in oklab, var(--color-white) 68%, transparent); margin: 0 0 1.25rem; }
.hr-problem__link { display: inline-flex; align-items: center; gap: 0.5rem; font-size: var(--fs-caption); font-weight: var(--fw-semibold); color: var(--color-white); text-decoration: none; transition: gap var(--transition-base); }
.hr-problem__link:hover { gap: 0.75rem; color: var(--color-white); }
.hr-problem__link i { font-size: 0.7rem; font-weight: 900; color: var(--color-primary-teal); }

/* Service cards — hairline, white, tinted icon chip. */
.hr-services { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.hr-service { display: flex; flex-direction: column; background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-xl); padding: 1.75rem; text-decoration: none; transition: border-color var(--transition-base), transform var(--transition-base); }
.hr-service:hover { border-color: var(--color-primary-violet); transform: translateY(-3px); }
.hr-service__icon { width: 2.5rem; height: 2.5rem; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; font-size: 1rem; margin-bottom: 1.25rem; }
.hr-service__icon i { font-weight: 900; }
.hr-service__icon--violet { background: color-mix(in oklab, var(--color-primary-violet) 10%, transparent); color: var(--color-primary-violet); }
.hr-service__icon--teal { background: color-mix(in oklab, var(--color-primary-teal) 12%, transparent); color: var(--color-primary-teal); }
.hr-service__icon--green { background: color-mix(in oklab, var(--color-accent-orange) 12%, transparent); color: var(--color-accent-orange); }
.hr-service__icon--coral, .hr-service__icon--pink { background: color-mix(in oklab, var(--color-accent-pink) 10%, transparent); color: var(--color-accent-pink); }
.hr-service__icon--blue, .hr-service__icon--orange { background: color-mix(in oklab, var(--color-primary-violet) 10%, transparent); color: var(--color-primary-violet); }
.hr-service__title { font-size: 1.0625rem; font-weight: var(--fw-semibold); letter-spacing: -0.01em; color: var(--color-text-heading); margin: 0 0 0.5rem; }
/* The card title wraps its own link, which would otherwise take the theme's
   link blue and leave every card heading blue instead of heading ink. */
.hr-service__title a, .hr-case__title a { color: inherit; text-decoration: none; }
/* The RepuScore heading's second half is a span the theme accents in blue. On
   this band it is the rest of the same sentence, as in the hero. */
.repuscore-promo__accent { color: inherit; }
.hr-service__text { font-size: var(--fs-caption); line-height: 1.6; color: var(--color-text-secondary); margin: 0 0 1.25rem; }
.hr-service__more { margin-top: auto; font-size: var(--fs-small); font-weight: var(--fw-bold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-primary-violet); }
.hr-service--cta { background: var(--color-text-heading); border-color: var(--color-text-heading); justify-content: center; }
.hr-service--cta .hr-service__title { color: var(--color-white); font-size: 1.25rem; }
.hr-service--cta .hr-service__text { color: color-mix(in oklab, var(--color-white) 65%, transparent); }
.hr-service--cta .btn { align-self: flex-start; text-decoration: none; }

/* Transformation stories. */
.hr-cases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.hr-case { display: flex; flex-direction: column; background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-xl); overflow: hidden; text-decoration: none; transition: border-color var(--transition-base), transform var(--transition-base); }
.hr-case:hover { border-color: var(--color-primary-violet); transform: translateY(-3px); }
.hr-case__bar { height: 3px; }
.hr-case__bar--1 { background: linear-gradient(to right, var(--color-primary-violet), var(--color-primary-teal)); }
.hr-case__bar--2 { background: linear-gradient(to right, var(--color-primary-teal), var(--color-accent-pink)); }
.hr-case__bar--3 { background: linear-gradient(to right, var(--color-accent-pink), var(--color-accent-orange)); }
.hr-case__body { padding: 1.75rem; display: flex; flex-direction: column; flex: 1; }
.hr-case__industry { font-size: var(--fs-small); font-weight: var(--fw-bold); letter-spacing: 0.12em; text-transform: uppercase; color: var(--web-muted-ink); margin-bottom: 1.5rem; }
.hr-case__metric { font-size: clamp(2.5rem, 5vw, 3.25rem); font-weight: var(--fw-bold); line-height: 1; letter-spacing: -0.035em; color: var(--color-primary-violet); }
.hr-case__metric-label { font-size: var(--fs-caption); line-height: 1.45; color: var(--color-text-secondary); margin: 0.625rem 0 1.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--color-border); }
.hr-case__title { font-size: 1.0625rem; font-weight: var(--fw-semibold); color: var(--color-text-heading); margin: 0 0 0.5rem; }
.hr-case__excerpt { font-size: var(--fs-caption); line-height: 1.6; color: var(--color-text-secondary); margin: 0 0 1.25rem; }
.hr-case__more { margin-top: auto; font-size: var(--fs-small); font-weight: var(--fw-bold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-primary-violet); }

/* Pathways — the value ladder. */
.hr-paths { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; max-width: 56rem; margin-inline: auto; }
.hr-path { display: flex; flex-direction: column; background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-xl); padding: 2rem; position: relative; }
.hr-path--featured { border-color: var(--color-primary-violet); }
.hr-path__flag { position: absolute; top: 0; right: 2rem; transform: translateY(-50%); background: var(--color-primary-violet); color: var(--color-white); padding: 0.3rem 0.875rem; border-radius: var(--radius-pill); font-size: var(--fs-small); font-weight: var(--fw-bold); letter-spacing: 0.08em; text-transform: uppercase; }
.hr-path__label { font-size: var(--fs-small); font-weight: var(--fw-bold); letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-primary-violet); margin-bottom: 1rem; display: block; }
.hr-path__title { font-size: 1.5rem; font-weight: var(--fw-bold); letter-spacing: -0.02em; color: var(--color-text-heading); margin: 0 0 0.5rem; }
.hr-path__desc { font-size: var(--fs-caption); line-height: 1.6; color: var(--color-text-secondary); margin: 0 0 1.75rem; }
.hr-path__features { list-style: none; padding: 0; margin: 0 0 2rem; display: flex; flex-direction: column; gap: 0.875rem; }
.hr-path__features li { display: flex; gap: 0.75rem; font-size: var(--fs-caption); color: var(--color-text-body); }
.hr-path__features i { color: var(--color-success); font-size: 0.75rem; font-weight: 900; margin-top: 0.3em; flex: none; }
.hr-path .btn { width: 100%; margin-top: auto; text-decoration: none; }

/* Trust stats — numerals over a hairline. */
.hr-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2.5rem; border-top: 1px solid var(--color-border); padding-top: 3rem; }
.hr-stat__n { font-size: clamp(2.5rem, 5.5vw, 3.5rem); font-weight: var(--fw-bold); line-height: 1; letter-spacing: -0.04em; color: var(--color-text-heading); display: block; }
.hr-stat__l { font-size: var(--fs-caption); color: var(--color-text-secondary); margin-top: 0.625rem; display: block; }

.hr-cta-row { margin-top: 3.5rem; text-align: center; }

/* RepuScore band. The gauge, legend and trust row already matched the archetype
   from the earlier Option B build — what it lacked was the section heading
   system, and its band colours were inline hex on the SVG and the legend dots.
   Those are classes reading the score tokens now, so the recolor pipeline and
   any future palette change reach them. The animation hooks
   (#repuscore-promo-arc, #repuscore-promo-val, #reputation-tool and the
   data-cta attribute) are untouched — main.js and the inline scroll animation
   both depend on them. */
.hr-score { max-width: 44rem; margin-inline: auto; text-align: center; }
.hr-score__gauge { position: relative; width: 20rem; max-width: 80%; margin: 2.5rem auto 0.5rem; }
.hr-score__gauge svg { display: block; width: 100%; height: auto; }
.hr-score__track { stroke: var(--web-score-track); }
.hr-score__arc { stroke: var(--web-score-mixed); }
.hr-score__value { position: absolute; left: 0; right: 0; top: 54%; transform: translateY(-50%); text-align: center; font-size: 3.25rem; font-weight: var(--fw-bold); line-height: 1; letter-spacing: -0.03em; color: var(--color-text-heading); }
.hr-score__out { position: absolute; left: 0; right: 0; top: 80%; text-align: center; font-size: var(--fs-caption); color: var(--web-muted-ink); }
.hr-score__legend, .hr-score__trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem; font-size: var(--fs-caption); color: var(--color-text-secondary); }
.hr-score__legend { margin: 1rem 0 2.5rem; }
.hr-score__trust { margin-top: 1.5rem; }
.hr-score__legend i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 0.5rem; vertical-align: middle; }
.hr-score__legend i.is-good { background: var(--web-score-good); }
.hr-score__legend i.is-mixed { background: var(--web-score-mixed); }
.hr-score__legend i.is-risk { background: var(--web-score-risk); }
.hr-score__trust span { display: inline-flex; align-items: center; gap: 0.4rem; }
.hr-score__trust svg { width: 15px; height: 15px; flex: none; stroke: var(--web-score-good); }
.hr-score__more { margin-top: 2rem; font-size: var(--fs-caption); color: var(--color-text-secondary); }
.hr-score .btn { text-decoration: none; }

@media (max-width: 67.5rem) {
  .hr-problems, .hr-services, .hr-cases { grid-template-columns: repeat(2, 1fr); }
  .hr-stats { grid-template-columns: repeat(2, 1fr); }
  .hr-paths { grid-template-columns: 1fr; }
}
@media (max-width: 45rem) {
  .hr-problems, .hr-services, .hr-cases { grid-template-columns: 1fr; }
  .hr-statement p { white-space: normal; }
}

/* --- About -----------------------------------------------------------------
   The stat bar leaves the hero and becomes a hairline strip under it, so the
   tinted band ends where the copy does. Everything else reuses the section
   system: .sv-hero for the hero, .sv-split for Our Story, .hr-service for the
   service cards, .sv-trust for the ratings row. */
.ab-statbar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; padding: 2.5rem 0; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
/* The ratings row runs straight on from the stat bar — one stacked block under
   the hero, not two strips with a gap between them. */
.ab-statbar + .sv-trust { margin-top: 0; border-top: 0; }
/* The approach steps sit below the split, with air between them and the prose
   column above. */
.ab-steps { margin-top: 3.5rem; }
.ab-pills { display: flex; flex-wrap: wrap; gap: 0.625rem; margin-top: 2rem; }
.ab-pill { display: inline-flex; padding: 0.5rem 1rem; border: 1px solid var(--color-border); border-radius: var(--radius-pill); font-size: var(--fs-caption); color: var(--color-text-body); text-decoration: none; transition: border-color var(--transition-fast), color var(--transition-fast); }
.ab-pill:hover { border-color: var(--color-primary-violet); color: var(--color-primary-violet); }
.ab-langs { display: flex; flex-wrap: wrap; gap: 0.625rem; margin-top: 2.5rem; }
.ab-lang { padding: 0.4rem 0.875rem; border: 1px solid var(--color-border); border-radius: var(--radius-pill); font-size: var(--fs-caption); color: var(--color-text-secondary); }
.ab-team { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.ab-person { background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-xl); padding: 2rem; }
.ab-person__initials { width: 3.25rem; height: 3.25rem; border-radius: 50%; background: var(--color-bg-light); border: 1px solid var(--color-border); display: flex; align-items: center; justify-content: center; font-size: 1rem; font-weight: var(--fw-bold); letter-spacing: 0.02em; color: var(--color-primary-violet); margin-bottom: 1.25rem; }
.ab-person__name { font-size: 1.1875rem; font-weight: var(--fw-bold); letter-spacing: -0.02em; color: var(--color-text-heading); margin: 0 0 0.25rem; }
.ab-person__role { font-size: var(--fs-caption); font-weight: var(--fw-semibold); color: var(--color-primary-violet); margin: 0 0 1rem; }
.ab-person__bio { font-size: var(--fs-caption); line-height: 1.6; color: var(--color-text-secondary); margin: 0 0 1.25rem; }
.ab-person__li { display: inline-flex; align-items: center; gap: 0.5rem; font-size: var(--fs-caption); font-weight: var(--fw-semibold); color: var(--color-primary-violet); text-decoration: none; }
.ab-values { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2.5rem 3rem; }
.ab-value { padding-top: 1.5rem; border-top: 1px solid var(--color-border); }
.ab-value__title { font-size: 1.25rem; font-weight: var(--fw-bold); letter-spacing: -0.02em; color: var(--color-text-heading); margin: 0 0 0.625rem; }
.ab-value__text { font-size: var(--fs-caption); line-height: 1.65; color: var(--color-text-secondary); margin: 0; }

@media (max-width: 67.5rem) {
  .ab-team { grid-template-columns: 1fr; }
  .ab-statbar { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 45rem) { .ab-values { grid-template-columns: 1fr; } }
/* == /P4 == */

/* == P5 hubs == */
/* The three hub templates — tools, resources, ORM. One shell, different
   collections: a light hero, then rule-topped section heads over card grids.
   Ported from the kit's hubs.css, token-only (its one literal gradient becomes
   the icon-gradient token defined in P0). */
.hb__hero { background: var(--hero-ground); padding: calc(var(--header-h) + clamp(1.5rem, 4vh, 3rem)) 0 clamp(2.5rem, 5vh, 3rem); }
.hb__eyebrow { display: block; font-size: var(--fs-small); font-weight: var(--fw-bold); letter-spacing: 0.12em; text-transform: uppercase; color: var(--web-muted-ink); margin-bottom: 1rem; }
.hb__title { font-size: clamp(2.25rem, 5vw, 3.5rem); font-weight: var(--fw-bold); line-height: 1.08; letter-spacing: -0.025em; color: var(--color-text-heading); margin: 0 0 1.25rem; max-width: 17ch; text-wrap: balance; }
.hb__standfirst { font-size: clamp(1.125rem, 2.2vw, 1.375rem); font-weight: var(--fw-light); line-height: 1.5; color: var(--color-text-secondary); margin: 0; max-width: 40rem; }

.hb__section { padding: 0 0 4.5rem; }
.hb__section-head { max-width: 42.5rem; padding: 3rem 0 2rem; border-top: 1px solid var(--color-border); margin-bottom: 0; }
.hb__section-title { font-size: clamp(1.5rem, 3vw, 1.875rem); font-weight: var(--fw-bold); line-height: 1.2; letter-spacing: -0.015em; color: var(--color-text-heading); margin: 0 0 0.625rem; }
.hb__section-sub { font-size: 1.0625rem; line-height: 1.7; color: var(--color-text-secondary); margin: 0; }

.hb__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.hb-card { display: flex; flex-direction: column; padding: 1.75rem; background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-lg); text-decoration: none; transition: transform var(--transition-slow), box-shadow var(--transition-slow); }
.hb-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.hb-card__icon { width: 3rem; height: 3rem; border-radius: var(--radius-md); background: var(--web-icon-gradient); display: flex; align-items: center; justify-content: center; color: var(--color-white); font-size: 1.25rem; margin-bottom: 1.25rem; }
.hb-card__icon i { font-weight: 900; }
.hb-card__kicker { font-size: 0.6875rem; font-weight: var(--fw-bold); letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-primary-violet); margin-bottom: 0.75rem; }
.hb-card h3 { font-size: 1.0625rem; font-weight: var(--fw-semibold); line-height: 1.3; color: var(--color-text-heading); margin: 0 0 0.625rem; }
.hb-card h3 a { color: inherit; text-decoration: none; }
.hb-card p { font-size: var(--fs-small); line-height: 1.7; color: var(--color-text-body); margin: 0 0 1.5rem; }
.hb-card__link { margin-top: auto; font-size: var(--fs-small); font-weight: var(--fw-semibold); color: var(--color-primary-violet); display: inline-flex; align-items: center; gap: 0.4rem; transition: gap var(--transition-fast); }
.hb-card:hover .hb-card__link { gap: 0.6rem; }

/* Topic rail — the "Browse by Topic" row on the Resources hub. */
.hb__topics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.hb-topic { display: flex; flex-direction: column; gap: 0.4rem; padding: 1.25rem 1.375rem; border: 1px solid var(--color-border); border-radius: var(--radius-lg); text-decoration: none; transition: border-color var(--transition-fast), background var(--transition-fast); }
.hb-topic:hover { border-color: var(--color-primary-violet); background: var(--color-bg-light); }
.hb-topic strong, .hb-topic__title { font-size: var(--fs-caption); font-weight: var(--fw-semibold); color: var(--color-text-heading); margin: 0; }
.hb-topic span, .hb-topic__text { font-size: var(--fs-small); line-height: 1.55; color: var(--web-muted-ink); margin: 0; }
/* Card internals the theme names differently from the kit. */
.hb-card__title { font-size: 1.0625rem; font-weight: var(--fw-semibold); line-height: 1.3; color: var(--color-text-heading); margin: 0 0 0.625rem; }
.hb-card__text { font-size: var(--fs-small); line-height: 1.7; color: var(--color-text-body); margin: 0 0 1.5rem; }
.hb__close-title { font-size: clamp(1.75rem, 3.4vw, 2.5rem); font-weight: var(--fw-bold); letter-spacing: -0.02em; color: var(--color-white); margin: 0 0 1rem; text-wrap: balance; }
.hb__close-text { font-size: 1.0625rem; font-weight: var(--fw-light); line-height: 1.65; color: color-mix(in oklab, var(--color-white) 75%, transparent); margin: 0 auto 2rem; max-width: 52ch; }

/* Dual-CTA close, used by the ORM hub. */
.hb__close { padding: 5rem 0; background: var(--color-text-heading); text-align: center; color: var(--color-white); }
.hb__close h2 { font-size: clamp(1.75rem, 3.4vw, 2.5rem); font-weight: var(--fw-bold); letter-spacing: -0.02em; color: var(--color-white); margin: 0 0 1rem; text-wrap: balance; }
.hb__close p { font-size: 1.0625rem; font-weight: var(--fw-light); line-height: 1.65; color: color-mix(in oklab, var(--color-white) 75%, transparent); margin: 0 auto 2rem; max-width: 52ch; }
.hb__close-row { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }
.hb__close .btn { text-decoration: none; }
.hb__close .btn--ghost { background: transparent; border: 1px solid color-mix(in oklab, var(--color-white) 35%, transparent); color: var(--color-white); }
.hb__close .btn--ghost:hover { background: color-mix(in oklab, var(--color-white) 10%, transparent); border-color: color-mix(in oklab, var(--color-white) 55%, transparent); }

@media (max-width: 64rem) {
  .hb__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hb__topics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 43.75rem) { .hb__grid, .hb__topics { grid-template-columns: 1fr; } }

/* --- Results hub (/results) — case-study archive with the service filter ---- */
.rs__hero { background: var(--hero-ground); padding: calc(var(--header-h) + clamp(1.5rem, 4vh, 3rem)) 0 clamp(2.5rem, 5vh, 3rem); }
.rs__eyebrow { display: block; font-size: var(--fs-small); font-weight: var(--fw-bold); letter-spacing: 0.12em; text-transform: uppercase; color: var(--web-muted-ink); margin-bottom: 1rem; }
.rs__title { font-size: clamp(2.25rem, 5vw, 3.5rem); font-weight: var(--fw-bold); line-height: 1.08; letter-spacing: -0.025em; color: var(--color-text-heading); margin: 0 0 1.25rem; text-wrap: balance; max-width: 16ch; }
.rs__standfirst { font-size: clamp(1.125rem, 2.2vw, 1.375rem); font-weight: var(--fw-light); line-height: 1.5; color: var(--color-text-secondary); margin: 0; max-width: 38.75rem; }

.rs__filter { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding: 1.5rem 0; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.rs__filter-label { font-size: var(--fs-small); font-weight: var(--fw-bold); letter-spacing: 0.12em; text-transform: uppercase; color: var(--web-muted-ink); margin-right: 0.5rem; }
.rs__chip { appearance: none; font-family: inherit; font-size: var(--fs-small); font-weight: var(--fw-medium); padding: 0.45rem 0.875rem; border-radius: var(--radius-pill); border: 1px solid var(--color-border); background: transparent; color: var(--color-text-secondary); cursor: pointer; white-space: nowrap; transition: border-color var(--transition-fast), color var(--transition-fast), background var(--transition-fast); }
.rs__chip:hover { border-color: var(--color-primary-violet); color: var(--color-primary-violet); }
/* The template's own filter JS toggles --active; the kit calls it is-active. */
.rs__chip.is-active, .rs__chip.rs__chip--active { background: var(--color-text-heading); border-color: var(--color-text-heading); color: var(--color-white); font-weight: var(--fw-semibold); }
.rs__chip-count { opacity: 0.55; margin-left: 0.35rem; }
.rs__count { font-size: var(--fs-small); color: var(--web-muted-ink); padding: 1.5rem 0 0; }

.rs__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; padding: 1.5rem 0 6rem; }
.rs-card { display: flex; flex-direction: column; padding: 1.75rem; background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-lg); text-decoration: none; transition: transform var(--transition-slow), box-shadow var(--transition-slow); }
.rs-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.rs-card__tags { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-bottom: 1rem; }
.rs-card__tag { display: inline-flex; padding: 0.25rem 0.625rem; border-radius: var(--radius-pill); font-size: 0.6875rem; font-weight: var(--fw-semibold); background: var(--color-bg-light); color: var(--color-text-secondary); }
.rs-card__tag--service { background: color-mix(in oklab, var(--color-primary-violet) 10%, transparent); color: var(--color-primary-violet); }
.rs-card__title { font-size: 1.1875rem; font-weight: var(--fw-semibold); line-height: 1.3; color: var(--color-text-heading); margin: 0 0 0.75rem; }
.rs-card__title a { color: inherit; text-decoration: none; }
.rs-card__desc { font-size: var(--fs-small); line-height: 1.7; color: var(--color-text-body); margin: 0 0 1.5rem; }
.rs-card__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; margin: auto 0 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--color-border); }
.rs-card__figure { display: block; font-size: 1.125rem; font-weight: var(--fw-extrabold); letter-spacing: -0.02em; line-height: 1.1; color: var(--color-text-heading); }
.rs-card__label { display: block; font-size: 0.6875rem; line-height: 1.35; color: var(--web-muted-ink); margin-top: 0.3rem; }
.rs-card__link { font-size: var(--fs-small); font-weight: var(--fw-semibold); color: var(--color-primary-violet); display: inline-flex; align-items: center; gap: 0.4rem; text-decoration: none; transition: gap var(--transition-fast); }
.rs-card:hover .rs-card__link { gap: 0.6rem; }
.rs__empty { grid-column: 1 / -1; padding: 3rem 0; font-size: var(--fs-caption); color: var(--web-muted-ink); }

@media (max-width: 68.75rem) { .rs__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 43.75rem) { .rs__grid { grid-template-columns: 1fr; } }

/* --- Case study single ------------------------------------------------------
   The metric row lives once, in .cs__topline under the hero. The old template
   printed it twice, and printed the standfirst twice with it. */
.cs__hero { background: var(--hero-ground); padding: clamp(2rem, 4vh, 2.5rem) 0 0; }
.cs__hero-inner { max-width: 51.25rem; }
.cs__tag { display: inline-flex; padding: 0.3rem 0.75rem; font-size: var(--fs-small); font-weight: var(--fw-semibold); line-height: 1; border-radius: var(--radius-pill); background: color-mix(in oklab, var(--color-primary-violet) 10%, transparent); color: var(--color-primary-violet); text-decoration: none; margin-bottom: 1.5rem; }
.cs__title { font-size: clamp(2.25rem, 5vw, 3.5rem); font-weight: var(--fw-bold); line-height: 1.08; letter-spacing: -0.025em; color: var(--color-text-heading); margin: 0 0 1.25rem; text-wrap: balance; }
.cs__standfirst { font-size: clamp(1.125rem, 2.2vw, 1.375rem); font-weight: var(--fw-light); line-height: 1.5; color: var(--color-text-secondary); margin: 0; max-width: 42.5rem; }
.cs__topline { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin: 3rem 0 0; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.cs__topline-item { padding: 1.75rem 2rem 1.75rem 0; }
.cs__topline-item + .cs__topline-item { padding-left: 2rem; border-left: 1px solid var(--color-border); }
.cs__topline-figure { display: block; font-size: clamp(2rem, 4vw, 2.75rem); font-weight: var(--fw-extrabold); line-height: 1; letter-spacing: -0.03em; color: var(--color-primary-violet); }
.cs__topline-label { display: block; font-size: var(--fs-small); color: var(--web-muted-ink); margin-top: 0.625rem; }

.cs__section-band { padding: clamp(3rem, 6vw, 4.5rem) 0; }
.cs__section { max-width: 47.5rem; }
.cs__eyebrow { font-size: var(--fs-small); font-weight: var(--fw-bold); letter-spacing: 0.12em; text-transform: uppercase; color: var(--web-muted-ink); margin-bottom: 0.75rem; }
.cs__h2 { font-size: clamp(1.5rem, 3vw, 1.875rem); font-weight: var(--fw-bold); line-height: 1.2; letter-spacing: -0.015em; color: var(--color-text-heading); margin: 0 0 1.5rem; scroll-margin-top: calc(var(--header-h) + 2rem); }
.cs__section p, .cs__p { font-size: 1.0625rem; line-height: 1.75; color: var(--color-text-body); margin: 0 0 1.5rem; }
.cs__section p:last-child { margin-bottom: 0; }

/* Impact — before then after. */
.impact { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.impact__row { padding: 1.75rem; border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.impact__metric { font-size: var(--fs-caption); font-weight: var(--fw-semibold); color: var(--color-text-heading); margin: 0 0 1.25rem; }
.impact__pair { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; }
.impact__side { min-width: 0; }
.impact__side-label { display: block; font-size: 0.6875rem; font-weight: var(--fw-bold); letter-spacing: 0.1em; text-transform: uppercase; color: var(--web-muted-ink); margin-bottom: 0.375rem; }
.impact__side-value { display: block; font-size: 1.5rem; font-weight: var(--fw-bold); line-height: 1.1; letter-spacing: -0.02em; color: var(--web-muted-ink); }
.impact__side--after .impact__side-value { color: var(--color-success); }
.impact__arrow { color: var(--color-bg-muted); font-size: 0.875rem; }

/* Solution steps and timeline. */
.cs__steps { list-style: none; counter-reset: cstep; padding: 0; margin: 2.5rem 0 0; display: flex; flex-direction: column; }
.cs__step { counter-increment: cstep; display: grid; grid-template-columns: 2.25rem 1fr; gap: 1.25rem; padding: 1.5rem 0; border-top: 1px solid var(--color-border); }
.cs__step:last-child { border-bottom: 1px solid var(--color-border); }
.cs__step::before { content: counter(cstep); width: 2.25rem; height: 2.25rem; border-radius: var(--radius-pill); background: var(--color-bg-light); display: flex; align-items: center; justify-content: center; font-size: var(--fs-small); font-weight: var(--fw-bold); color: var(--color-primary-violet); }
.cs__step h3 { font-size: 1.0625rem; font-weight: var(--fw-semibold); line-height: 1.35; color: var(--color-text-heading); margin: 0.3rem 0 0.5rem; }
.cs__step p { font-size: var(--fs-caption); line-height: 1.7; color: var(--color-text-body); margin: 0; }
.timeline { list-style: none; padding: 0; margin: 2.5rem 0 0; }
.timeline__item { position: relative; display: grid; grid-template-columns: 6.5rem 1fr; gap: 1.5rem; padding: 0 0 2rem; }
.timeline__item::before { content: ""; position: absolute; left: 6.5rem; top: 0.45rem; width: 9px; height: 9px; margin-left: -4px; border-radius: 50%; background: var(--color-primary-violet); }
.timeline__item::after { content: ""; position: absolute; left: 6.5rem; top: 1.1rem; bottom: -0.35rem; width: 1px; background: var(--color-border); }
.timeline__item:last-child { padding-bottom: 0; }
.timeline__item:last-child::after { display: none; }
.timeline__when { font-size: var(--fs-caption); font-weight: var(--fw-bold); color: var(--color-text-heading); text-align: right; padding-right: 1.25rem; }
.timeline__what { font-size: var(--fs-caption); line-height: 1.7; color: var(--color-text-body); padding-left: 1rem; }

/* Takeaways. */
.cs__takeaways { background: var(--color-bg-light); border-radius: var(--radius-xl); padding: 2rem; }
.cs__takeaways-list, .cs__takeaways ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.875rem; }
.cs__takeaways li { display: flex; gap: 0.75rem; font-size: var(--fs-caption); line-height: 1.65; color: var(--color-text-body); }
.cs__takeaways li i { color: var(--color-success); margin-top: 0.3em; font-size: 0.75rem; font-weight: 900; flex: none; }

@media (max-width: 56.25rem) {
  .cs__topline { grid-template-columns: 1fr; }
  .cs__topline-item + .cs__topline-item { padding-left: 0; border-left: 0; border-top: 1px solid var(--color-border); }
  .impact { grid-template-columns: 1fr; }
}
@media (max-width: 40rem) {
  .timeline__item { grid-template-columns: 1fr; gap: 0.5rem; padding-left: 1.5rem; }
  .timeline__item::before, .timeline__item::after { left: 0; }
  .timeline__when { text-align: left; padding-right: 0; }
  .timeline__what { padding-left: 0; }
}
/* == /P5 == */

/* == P5 pricing == */
/* Pricing (template-pricing.php).
   Read order on this page:
   1. hero states the pricing model and offers the conversion path
   2. the jump nav lists all six services with their entry price
   3. every service renders in full; three tiers compare on one horizontal band
   4. allocation detail is collapsed — it answers a second question, not the first
   The breadcrumb bar above already clears the fixed header, so the hero adds
   none of its own. */
.pr__hero { padding: 2.5rem 0; }
.pr__title { font-size: clamp(2rem, min(4.6vw, 6.4vh), 3.25rem); font-weight: var(--fw-bold); line-height: 1.08; letter-spacing: -0.025em; color: var(--color-text-heading); margin: 0 0 1.25rem; max-width: 18ch; text-wrap: balance; }
.pr__standfirst { font-size: clamp(1.125rem, 2.2vw, 1.375rem); font-weight: var(--fw-light); line-height: 1.5; color: var(--color-text-secondary); margin: 0; max-width: 620px; }
.pr__hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: 1.75rem; }
.pr__hero-note { font-size: var(--fs-small); line-height: 1.6; color: var(--web-muted-ink); margin: 0; max-width: 46ch; }

/* Jump nav: above the fold, links not filters. Plain anchors — the global
   scroll-padding-top clears the header, so this needs no script. */
.pr__jump { padding: 1.5rem 0 0; }
.pr__jump-label { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 1rem; font-size: 0.6875rem; font-weight: var(--fw-bold); letter-spacing: 0.12em; text-transform: uppercase; color: var(--web-muted-ink); }
.pr__jump-label i { font-size: 0.75rem; color: var(--color-primary-violet); }
.pr__jump ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; }
.pr__jump a { display: flex; flex-direction: column; gap: 0.3rem; padding: 0.875rem 1.125rem; background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-lg); text-decoration: none; transition: border-color var(--transition-fast), background-color var(--transition-fast); }
.pr__jump a:hover { border-color: var(--color-text-heading); background: var(--color-bg-light); }
.pr__jump-name { font-size: 0.9375rem; font-weight: var(--fw-semibold); color: var(--color-text-heading); line-height: 1.3; }
.pr__jump-from { font-size: var(--fs-small); color: var(--web-muted-ink); font-variant-numeric: tabular-nums; }

/* Category block */
.pr__cat { padding: 4rem 0; scroll-margin-top: calc(var(--header-h) + 1.5rem); }
.pr__cat + .pr__cat { border-top: 1px solid var(--color-border); }
.pr__cat-head { max-width: 680px; margin-bottom: 2.5rem; }
.pr__cat-title { display: flex; align-items: center; gap: 0.75rem; font-size: clamp(1.75rem, 3.4vw, 2.25rem); font-weight: var(--fw-bold); line-height: 1.15; letter-spacing: -0.02em; color: var(--color-text-heading); margin: 0 0 0.75rem; }
.pr__cat-icon { font-size: 0.8em; flex: none; }
.pr__cat-icon--orange { color: var(--color-accent-orange); }
.pr__cat-icon--violet { color: var(--color-primary-violet); }
.pr__cat-icon--teal { color: var(--color-accent-teal); }
.pr__cat-icon--pink { color: var(--color-accent-pink); }
.pr__cat-icon--navy { color: var(--color-primary-navy); }
.pr__cat-sub { font-size: 1.0625rem; line-height: 1.7; color: var(--color-text-secondary); margin: 0; }

/* Tier cards. The price band comes first at a fixed height, so the three
   amounts and the three billing models read across as one line before any
   prose is involved. */
.pr__tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; align-items: stretch; }
.pr-tier { position: relative; display: flex; flex-direction: column; padding: 1.75rem; background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-xl); }
.pr-tier--featured { border-color: var(--color-text-heading); box-shadow: var(--shadow-card); }
.pr-tier__flag { position: absolute; top: -0.6rem; left: 1.75rem; display: inline-flex; padding: 0.25rem 0.75rem; border-radius: var(--radius-pill); background: var(--color-text-heading); color: var(--color-white); font-size: 0.6875rem; font-weight: var(--fw-semibold); letter-spacing: 0.02em; }
.pr-tier__band { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; min-height: 2.75rem; padding-bottom: 1rem; margin-bottom: 1rem; border-bottom: 1px solid var(--color-border); }
.pr-tier__price { display: flex; align-items: baseline; gap: 0.35rem; margin: 0; }
.pr-tier__from { font-size: var(--fs-small); color: var(--web-muted-ink); }
.pr-tier__amount { font-size: 2rem; font-weight: var(--fw-extrabold); line-height: 1; letter-spacing: -0.03em; color: var(--color-text-heading); font-variant-numeric: tabular-nums; }
.pr-tier__amount--custom { font-size: 1.375rem; font-weight: var(--fw-semibold); letter-spacing: -0.01em; }
.pr-tier__unit { font-size: var(--fs-small); color: var(--web-muted-ink); }
/* The taxonomy the old page mixed silently: retainers, one-off projects and
   scoped work all wore the same price treatment, so a $7k project read as $7k
   a month. Name it on the card. */
.pr-tier__billing { font-size: 0.6875rem; font-weight: var(--fw-bold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-primary-violet); white-space: nowrap; }
.pr-tier__billing.is-once { color: var(--color-accent-orange); }
.pr-tier__billing.is-scoped { color: var(--web-muted-ink); }
.pr-tier__name { font-size: 1.1875rem; font-weight: var(--fw-bold); letter-spacing: -0.015em; color: var(--color-text-heading); margin: 0 0 0.5rem; }
.pr-tier__desc { font-size: var(--fs-small); line-height: 1.65; color: var(--color-text-secondary); margin: 0 0 1.25rem; min-height: calc(1.65em * 4); }
.pr-tier__features { list-style: none; padding: 0; margin: 0 0 1.5rem; display: flex; flex-direction: column; gap: 0.55rem; }
.pr-tier__feature { display: flex; gap: 0.6rem; font-size: var(--fs-small); line-height: 1.5; color: var(--color-text-body); }
.pr-tier__feature i { color: var(--color-success); font-size: 0.7rem; margin-top: 0.28em; flex: none; }
/* "Everything in X, plus:" is a section divider, not a feature. Read it as one. */
.pr-tier__feature.is-inherit { display: block; font-size: 0.6875rem; font-weight: var(--fw-bold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--web-muted-ink); padding-bottom: 0.55rem; border-bottom: 1px solid var(--color-border); }
.pr-tier__feature.is-inherit i { display: none; }
.pr-tier__feature.is-caveat { color: var(--web-muted-ink); padding-top: 0.55rem; border-top: 1px solid var(--color-border); }
.pr-tier__feature.is-caveat i { color: var(--color-bg-muted); }
.pr-tier__cta { margin-top: auto; width: 100%; }

.pr__note { display: flex; gap: 0.6rem; font-size: var(--fs-small); line-height: 1.7; color: var(--web-muted-ink); margin: 1.5rem 0 0; max-width: 70ch; }
.pr__note i { color: var(--color-primary-violet); margin-top: 0.35em; flex: none; }
.pr__note a { color: var(--color-primary-violet); text-decoration: none; font-weight: var(--fw-semibold); }
.pr__note a:hover { text-decoration: underline; }

/* Allocation: collapsed by default. A <details> rather than a scripted
   accordion, so the browser owns the open state and the aria wiring. */
.pr__alloc { margin-top: 2.5rem; border-top: 1px solid var(--color-border); }
.pr__alloc-summary { display: flex; align-items: center; gap: 0.75rem; padding: 1.25rem 0; font-size: var(--fs-small); font-weight: var(--fw-bold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-heading); cursor: pointer; list-style: none; }
.pr__alloc-summary::-webkit-details-marker { display: none; }
.pr__alloc-summary i { color: var(--color-primary-violet); font-size: 0.7rem; transition: transform var(--transition-fast); }
.pr__alloc[open] .pr__alloc-summary i { transform: rotate(90deg); }
.pr__alloc-count { margin-left: auto; font-weight: var(--fw-medium); letter-spacing: 0; text-transform: none; color: var(--web-muted-ink); }
.pr__alloc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3rem; padding: 0.5rem 0 2rem; }
.pr__alloc-phase { font-size: 0.6875rem; font-weight: var(--fw-bold); letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-primary-violet); margin: 0 0 0.5rem; }
.pr__alloc-title { font-size: 1.0625rem; font-weight: var(--fw-semibold); color: var(--color-text-heading); margin: 0 0 0.375rem; }
.pr__alloc-sub { font-size: var(--fs-small); color: var(--color-text-secondary); margin: 0 0 1.5rem; }
.pr__bar { margin-bottom: 1rem; }
.pr__bar-top { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 0.4rem; }
.pr__bar-name { font-size: var(--fs-small); color: var(--color-text-body); }
.pr__bar-pct { font-size: var(--fs-small); font-weight: var(--fw-bold); color: var(--color-text-heading); font-variant-numeric: tabular-nums; }
.pr__bar-track { height: 6px; border-radius: 3px; background: var(--color-bg-light); }
.pr__bar-fill { height: 100%; border-radius: 3px; background: var(--color-primary-violet); }

@media (max-width: 64rem) {
  .pr__tiers { grid-template-columns: 1fr; }
  .pr-tier__desc { min-height: 0; }
  .pr__alloc-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .pr__jump ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 37.5rem) {
  .pr__jump ul { grid-template-columns: 1fr; }
  .pr__cat-title { flex-wrap: wrap; }
}
/* == /P5 pricing == */

/* == P5 trust == */
/* Testimonials (template-testimonials.php) and Ethics (template-ethics.php).
   Both pages reuse the section, heading, quote, benefit and step components
   earlier phases built; what is new here is the light hero the two dark
   animated heroes were replaced with, and the do/refuse pair. */
.tr__hero { padding: 2.5rem 0 1rem; }
.tr__title { font-size: clamp(2rem, min(4.6vw, 6.4vh), 3.25rem); font-weight: var(--fw-bold); line-height: 1.08; letter-spacing: -0.025em; color: var(--color-text-heading); margin: 0 0 1.25rem; max-width: 24ch; text-wrap: balance; }
.tr__standfirst { font-size: clamp(1.0625rem, 2vw, 1.25rem); font-weight: var(--fw-light); line-height: 1.6; color: var(--color-text-secondary); margin: 0; max-width: 68ch; }
/* The answer-first paragraph AI assistants tend to quote. Ruled rather than
   boxed, so it reads as the page's opening claim and not as a callout. */
.tr__lede { border-left: 2px solid var(--color-primary-violet); padding-left: 1.5rem; }
.tr__lede p { font-size: 1.0625rem; line-height: 1.75; color: var(--color-text-body); margin: 0; }
.tr__leads { margin-bottom: 0; }
.sv-quote--lead blockquote { font-size: 1.125rem; line-height: 1.6; }
.sv-quote--highlight { border-color: var(--color-text-heading); }

/* What we do / what we refuse. Two columns, one rule between them: the point
   is that the second list is as considered as the first, so it gets equal
   weight and the same typography, distinguished only by its marks. */
.tr__dodont { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3rem; margin-top: 2.5rem; }
.tr-dd + .tr-dd { border-left: 1px solid var(--color-border); padding-left: 3rem; }
.tr-dd__heading { display: flex; align-items: center; gap: 0.6rem; font-size: 1.0625rem; font-weight: var(--fw-bold); letter-spacing: -0.01em; color: var(--color-text-heading); margin: 0 0 1.25rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--color-border); }
.tr-dd__heading i { color: var(--color-success); font-size: 0.9em; }
.tr-dd--dont .tr-dd__heading i { color: var(--web-muted-ink); }
.tr-dd__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.9rem; }
.tr-dd__list li { display: flex; gap: 0.7rem; font-size: var(--fs-small); line-height: 1.6; color: var(--color-text-body); }
.tr-dd__list li i { color: var(--color-success); font-size: 0.7rem; margin-top: 0.35em; flex: none; }
.tr-dd--dont .tr-dd__list li i { color: var(--web-muted-ink); }

@media (max-width: 64rem) {
  .tr__dodont { grid-template-columns: 1fr; gap: 2.5rem; }
  .tr-dd + .tr-dd { border-left: 0; padding-left: 0; border-top: 1px solid var(--color-border); padding-top: 2.5rem; }
}
/* == /P5 trust == */

/* == P5 list == */
/* archive.php (category / tag / author / date) and search.php. Both are list
   surfaces: they share the hero, the chip row, the result row and the pager.
   A row rather than a card because these pages answer "which of these is the
   one I want", and a single column of titles is faster to scan than a grid. */
.ls__hero { padding: 2.5rem 0 1.5rem; }
.ls__title { font-size: clamp(2rem, 4.4vw, 3rem); font-weight: var(--fw-bold); line-height: 1.1; letter-spacing: -0.025em; color: var(--color-text-heading); margin: 0 0 1rem; max-width: 24ch; text-wrap: balance; }
.ls__standfirst { font-size: 1.125rem; font-weight: var(--fw-light); line-height: 1.6; color: var(--color-text-secondary); margin: 0; max-width: 620px; }
.ls__standfirst p { margin: 0; }
.ls__count { font-size: var(--fs-small); color: var(--web-muted-ink); margin: 1.5rem 0 0; font-variant-numeric: tabular-nums; }

.ls__search { display: flex; gap: 0.625rem; max-width: 560px; margin-top: 2rem; }
.ls__search input { flex: 1; min-width: 0; padding: 0.75rem 1rem; border: 1px solid var(--color-border); border-radius: var(--radius-pill); background: var(--color-bg-light); font-family: inherit; font-size: var(--fs-caption); color: var(--color-text-heading); }
.ls__search input:focus { outline: none; border-color: var(--color-primary-violet); background: var(--color-white); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary-violet) 16%, transparent); }
.ls__search button { flex: none; }

/* Chips are links here, not buttons: the category is in the URL, so a chip is
   somewhere you can go and a filtered archive is something you can send. */
.ls__filter { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding: 1.5rem 0; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); margin-top: 2.5rem; }
.ls__chip { display: inline-flex; align-items: center; font-size: var(--fs-small); font-weight: var(--fw-medium); padding: 0.45rem 0.875rem; border-radius: var(--radius-pill); border: 1px solid var(--color-border); background: transparent; color: var(--color-text-secondary); text-decoration: none; white-space: nowrap; transition: border-color var(--transition-fast), color var(--transition-fast), background-color var(--transition-fast); }
.ls__chip:hover { border-color: var(--color-primary-violet); color: var(--color-primary-violet); }
.ls__chip.is-active { background: var(--color-text-heading); border-color: var(--color-text-heading); color: var(--color-white); font-weight: var(--fw-semibold); }
.ls__chip-count { opacity: 0.55; margin-left: 0.35rem; font-variant-numeric: tabular-nums; }

.ls__list { display: flex; flex-direction: column; padding: 0 0 1rem; }
.ls-row { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 2rem; padding: 1.75rem 0; border-bottom: 1px solid var(--color-border); text-decoration: none; transition: padding-left var(--transition-fast); }
.ls-row:hover { padding-left: 0.5rem; }
.ls-row__body { display: block; min-width: 0; }
.ls-row__type { display: block; font-size: 0.6875rem; font-weight: var(--fw-bold); letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-primary-violet); padding-top: 0.2rem; }
.ls-row__type--page { color: var(--color-primary-teal); }
.ls-row__type--case { color: var(--color-success); }
.ls-row__type--tool { color: var(--color-accent-orange); }
.ls-row__type--guide { color: var(--color-accent-pink); }
.ls-row__title { display: block; font-size: 1.1875rem; font-weight: var(--fw-semibold); line-height: 1.3; color: var(--color-text-heading); margin: 0 0 0.5rem; }
.ls-row:hover .ls-row__title { color: var(--color-primary-violet); }
/* Clamped, not truncated: the whole excerpt is in the document, two lines of
   it are on screen. */
.ls-row__excerpt { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: var(--fs-caption); line-height: 1.7; color: var(--color-text-body); margin: 0 0 0.625rem; max-width: 70ch; }
.ls-row__meta { display: block; font-size: var(--fs-small); color: var(--web-muted-ink); }
/* An archive with one row per type hides its type column, so the row collapses
   to a single column rather than leaving a 9rem gutter. */
.ls-row--plain { grid-template-columns: minmax(0, 1fr); }

.ls__empty { padding: 3rem 0 4rem; max-width: 60ch; }
.ls__empty h2 { font-size: 1.375rem; font-weight: var(--fw-bold); color: var(--color-text-heading); margin: 0 0 0.75rem; }
.ls__empty p { font-size: var(--fs-caption); line-height: 1.7; color: var(--color-text-secondary); margin: 0 0 1.5rem; }
.ls__empty ul { list-style: none; padding: 0; margin: 0 0 1.5rem; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.ls__empty ul a { display: inline-flex; padding: 0.4rem 0.875rem; border-radius: var(--radius-pill); border: 1px solid var(--color-border); font-size: var(--fs-small); font-weight: var(--fw-medium); color: var(--color-text-secondary); text-decoration: none; }
.ls__empty ul a:hover { border-color: var(--color-primary-violet); color: var(--color-primary-violet); }

/* WordPress emits the pager as .nav-links with .page-numbers children, so the
   pill treatment attaches to those rather than to markup we do not control. */
.ls__pager { padding: 2rem 0 4rem; }
.ls__pager .nav-links { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; }
.ls__pager .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ls__pager .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 2.25rem; height: 2.25rem; padding: 0 0.6rem; border-radius: var(--radius-pill); border: 1px solid var(--color-border); color: var(--color-text-secondary); font-size: var(--fs-small); font-weight: var(--fw-medium); text-decoration: none; }
.ls__pager .page-numbers:hover { border-color: var(--color-primary-violet); color: var(--color-primary-violet); }
.ls__pager .page-numbers.current { background: var(--color-text-heading); border-color: var(--color-text-heading); color: var(--color-white); font-weight: var(--fw-semibold); }
.ls__pager .page-numbers.dots { border-color: transparent; }
.ls__pager .screen-reader-text.pagination-heading { display: none; }

@media (max-width: 47.5rem) {
  .ls-row { grid-template-columns: 1fr; gap: 0.5rem; }
  .ls-row__type { padding-top: 0; }
  .ls__search { flex-direction: column; }
  .ls__search button { width: 100%; justify-content: center; }
}
/* == /P5 list == */

/* == P5 author == */
/* Author hub (template-author-hub.php) and profile (template-author-profile.php).
   .ms__* is the plain page hero the smaller surfaces share — authors, programs
   and the legal pages all open the same way. */
.ms__hero { padding: 2.5rem 0 1.5rem; }
.ms__title { font-size: clamp(2rem, 4.4vw, 3rem); font-weight: var(--fw-bold); line-height: 1.1; letter-spacing: -0.025em; color: var(--color-text-heading); margin: 0 0 1rem; max-width: 24ch; text-wrap: balance; }
.ms__standfirst { font-size: 1.125rem; font-weight: var(--fw-light); line-height: 1.6; color: var(--color-text-secondary); margin: 0; max-width: 620px; }

.au__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; padding: 2rem 0 4rem; }
.au-card { display: flex; gap: 1.25rem; padding: 1.75rem; border: 1px solid var(--color-border); border-radius: var(--radius-lg); text-decoration: none; background: var(--color-white); transition: border-color var(--transition-fast), transform var(--transition-fast); }
.au-card:hover { border-color: var(--color-text-heading); transform: translateY(-2px); }
.au-card__avatar { width: 56px; height: 56px; flex: none; border-radius: var(--radius-pill); object-fit: cover; background: var(--color-bg-light); }
/* Initials, not a generic person glyph: on an author page a placeholder icon
   reads as "no author", which is the opposite of the point. */
.au-card__avatar--initials { display: flex; align-items: center; justify-content: center; font-size: var(--fs-caption); font-weight: var(--fw-bold); letter-spacing: 0.02em; color: var(--web-muted-ink); }
.au-card__body { display: block; min-width: 0; }
.au-card__name { display: block; font-size: 1.0625rem; font-weight: var(--fw-semibold); color: var(--color-text-heading); margin-bottom: 0.2rem; }
.au-card:hover .au-card__name { color: var(--color-primary-violet); }
.au-card__role { display: block; font-size: var(--fs-small); color: var(--color-text-secondary); margin-bottom: 0.625rem; }
.au-card__text { display: block; font-size: var(--fs-small); line-height: 1.65; color: var(--color-text-body); margin-bottom: 0.75rem; }
.au-card__count { display: block; font-size: var(--fs-small); color: var(--web-muted-ink); font-variant-numeric: tabular-nums; }

/* Profile identity block. The headshot leads at 140px rather than the old
   400px hero portrait: the page's job is the credentials below it. */
.au__id { padding: 2.5rem 0 1rem; }
.au__id-grid { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 2.5rem; align-items: start; }
.au__avatar { width: 140px; height: 140px; border-radius: var(--radius-pill); object-fit: cover; background: var(--color-bg-light); }
.au__id-text { min-width: 0; }
.au__name { font-size: clamp(1.75rem, 3.4vw, 2.5rem); font-weight: var(--fw-bold); line-height: 1.1; letter-spacing: -0.025em; color: var(--color-text-heading); margin: 0 0 0.4rem; }
.au__role { font-size: var(--fs-caption); color: var(--color-text-secondary); margin: 0 0 1.25rem; }
.au__summary { font-size: 1.0625rem; font-weight: var(--fw-light); line-height: 1.7; color: var(--color-text-body); margin: 0; max-width: 68ch; }
.au__highlights { list-style: none; padding: 1.25rem 0 0; margin: 1.25rem 0 0; border-top: 1px solid var(--color-border); display: flex; flex-wrap: wrap; gap: 0.75rem 2rem; }
.au__highlights li { display: flex; align-items: center; gap: 0.5rem; font-size: var(--fs-small); font-weight: var(--fw-medium); color: var(--color-text-secondary); }
.au__highlights li i { color: var(--color-primary-violet); font-size: 0.85em; }

/* The profile's own sections keep the left-aligned heading block; a centred
   one would read as a new page rather than the next fact about one person. */
.author-profile__section .hr-head { text-align: left; }

@media (max-width: 64rem) {
  .au__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 47.5rem) {
  .au__grid { grid-template-columns: 1fr; }
  .au__id-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .au__avatar { width: 96px; height: 96px; }
}
/* == /P5 author == */

/* == P5 utility == */
/* 404.php, template-coming-soon.php and the legal template. One centred column
   on the page ground: these pages have one job each and no content to rank. */
/* Neither the 404 nor coming-soon has a breadcrumb bar — a 404 has no place in
   a hierarchy — so unlike every other converted template there is nothing above
   to clear the fixed header, and .ut has to do it itself. The guard is there in
   case a later .ut page does get a trail. */
.ut { padding: calc(var(--header-h) + 3rem) 0 4rem; }
.breadcrumbs + .ut { padding-top: 3rem; }
.ut__inner { max-width: 620px; }
.ut__code { font-size: clamp(3.5rem, 10vw, 6rem); font-weight: var(--fw-extrabold); line-height: 1; letter-spacing: -0.04em; color: var(--color-bg-muted); margin: 0 0 1rem; }
.ut__title { font-size: clamp(1.875rem, 4vw, 2.75rem); font-weight: var(--fw-bold); line-height: 1.1; letter-spacing: -0.025em; color: var(--color-text-heading); margin: 0 0 1rem; text-wrap: balance; }
.ut__body { font-size: 1.0625rem; line-height: 1.7; color: var(--color-text-secondary); margin: 0 0 2rem; }
.ut__actions { display: flex; flex-wrap: wrap; gap: 1rem; }
.ut__badges { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.5rem; }
.ut__badge { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.75rem; border-radius: var(--radius-pill); border: 1px solid var(--color-border); font-size: var(--fs-small); font-weight: var(--fw-semibold); color: var(--color-text-secondary); }

/* The arcade keeps a dark panel of its own. arcade-404.css hard-codes
   color:#fff on the HUD and the control hints, so on the new light ground they
   would render white on white — and that stylesheet also drives a live widget
   whose canvas and overlay hooks are not ours to re-theme. */
.ut__game { margin: 2.5rem 0 0; border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; }
/* The panel has no bottom margin of its own, so anything following it sits flush
   against the border. */
.ut__actions--after-game { margin-top: 2rem; }
.ut__game-bar { display: flex; align-items: center; gap: 0.625rem; padding: 0.75rem 1.125rem; background: var(--color-bg-light); border-bottom: 1px solid var(--color-border); font-size: var(--fs-small); font-weight: var(--fw-semibold); color: var(--color-text-heading); }
.ut__game-body { padding: 1.75rem 1.25rem; background: var(--color-primary-navy); }

.ut__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; margin-top: 2rem; }
.ut-card { display: flex; gap: 1rem; padding: 1.5rem; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-white); text-decoration: none; transition: border-color var(--transition-fast); }
.ut-card:hover { border-color: var(--color-text-heading); }
.ut-card__icon { flex: none; width: 2.25rem; height: 2.25rem; border-radius: var(--radius-pill); background: var(--color-bg-light); display: flex; align-items: center; justify-content: center; color: var(--color-primary-violet); }
.ut-card__text { display: block; min-width: 0; font-size: var(--fs-small); line-height: 1.6; color: var(--color-text-body); }

/* Legal pages ride the page.php shell; only the dateline and the clause rules
   are their own. Each h2 is a clause, so a rule above it makes the document
   scannable without numbering anything. */
.lg__updated { font-size: var(--fs-small); color: var(--web-muted-ink); margin: 1.5rem 0 0; }
.lg__prose { font-size: 1rem; line-height: 1.75; }
.lg__prose h2 { font-size: 1.375rem; margin: 3rem 0 0.875rem; padding-top: 2rem; border-top: 1px solid var(--color-border); }
.lg__prose h2:first-child { padding-top: 0; border-top: 0; margin-top: 0; }

@media (max-width: 47.5rem) {
  .ut__cards { grid-template-columns: 1fr; }
}
/* == /P5 utility == */

/* == P5 sweep == */
/* The service hub's cards are whole-card links, where the homepage wraps only
   the title. Keeping the <a> on the card preserves the hit area, so the "Learn
   more" affordance is a span and inherits the card's own hover. */
.hr-service--link { text-decoration: none; display: flex; flex-direction: column; }
.hr-service--link .hr-service__title { color: var(--color-text-heading); }
.hr-service--link:hover .hr-service__title { color: var(--color-primary-violet); }
.hr-service--link .hr-service__more { margin-top: auto; }
/* == /P5 sweep == */

/* == P5 resource article == */
/* template-resource-article.php. Content-only by design — no header band,
   because the WordPress title on these pages is an admin label and the content
   carries its own h1. It borrows the page shell's prose measure so a resource
   article and a plain page read at the same width. */
.ra__main { padding: 2rem 0 4rem; }
/* == /P5 resource article == */

/* == P5 blog hub == */
/* index.php. Cards here, rows on the archives: a hub is a browse surface where
   the thumbnail is doing work, while an archive answers "which of these is the
   one I want" and reads faster as a single column. The category tag row and the
   pager are the archive's own components, so following a chip does not land you
   on what looks like a different site. */
.bl-search { display: flex; align-items: center; gap: 0.75rem; margin-top: 2rem; max-width: 32rem; background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-pill); padding: 0.4rem 0.4rem 0.4rem 1.125rem; transition: border-color var(--transition-fast); }
.bl-search:focus-within { border-color: var(--color-primary-violet); }
.bl-search > i { color: var(--web-muted-ink); font-size: 0.875rem; flex: none; }
.bl-search input { flex: 1; min-width: 0; border: 0; background: none; font-family: inherit; font-size: var(--fs-caption); color: var(--color-text-body); padding: 0.5rem 0; }
.bl-search input:focus { outline: none; }
.bl-search .btn { flex: none; }

.bl__section { padding-top: 3.5rem; }
.bl__section .hr-head { margin-bottom: 2.5rem; }
.bl-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }

/* The whole card is one link, so every child is a span and the layout is the
   anchor's own. */
.bl-card { display: flex; flex-direction: column; background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-xl); overflow: hidden; text-decoration: none; transition: border-color var(--transition-base), transform var(--transition-base); }
.bl-card:hover { border-color: var(--color-primary-violet); transform: translateY(-3px); }
.bl-card__thumb { display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; background: var(--color-bg-light); border-bottom: 1px solid var(--color-border); overflow: hidden; }
.bl-card__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bl-card__thumb-icon { font-size: 1.5rem; color: var(--color-bg-muted); }
.bl-card__body { display: flex; flex-direction: column; flex: 1; padding: 1.5rem; }
.bl-card__title { display: block; font-size: 1.0625rem; font-weight: var(--fw-semibold); line-height: 1.3; letter-spacing: -0.015em; color: var(--color-text-heading); margin: 0 0 0.625rem; text-wrap: pretty; }
.bl-card:hover .bl-card__title { color: var(--color-primary-violet); }
.bl-card__excerpt { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; font-size: var(--fs-caption); line-height: 1.6; color: var(--color-text-secondary); margin: 0 0 1.5rem; }
.bl-card__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem; margin-top: auto; padding-top: 1.125rem; border-top: 1px solid var(--color-border); font-size: var(--fs-small); color: var(--web-muted-ink); }
.bl-card__avatar { display: flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; border-radius: var(--radius-pill); background: var(--color-bg-light); border: 1px solid var(--color-border); font-size: 0.6rem; font-weight: var(--fw-bold); color: var(--color-primary-violet); flex: none; overflow: hidden; }
.bl-card__avatar--photo { background: none; border: 0; }
.bl-card__avatar-img { width: 100%; height: 100%; border-radius: var(--radius-pill); object-fit: cover; display: block; }

/* Category tag. The tone comes from repx_get_category_visual(), so a category's
   appearance is declared once. Four tones, not six: as served,
   --color-accent-orange is the same #66ad4e as --color-success and
   --color-accent-pink the same #e44d42 as --color-danger, so an "orange" tag
   and a "green" one were rendering identically.

   The kit's treatment — the brand colour as text on a 10-12% tint of itself —
   measures 2.46:1 to 3.74:1 on a white card and fails as text at every tone.
   Each tone therefore darkens its own hue for the label and keeps the tint for
   the hue signal; the mix percentages are per-tone because the four hues start
   at different lightnesses, and each was chosen as the lightest that clears
   4.5:1. Measured against the served palette: violet 4.79, teal 4.51,
   green 4.95, coral 4.93. Re-measure if those tokens move. */
.bl-tag { align-self: flex-start; padding: 0.25rem 0.625rem; border-radius: var(--radius-sm); font-size: var(--fs-small); font-weight: var(--fw-bold); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 0.875rem; }
.bl-tag--violet { background: color-mix(in srgb, var(--color-primary-violet) 18%, var(--color-white)); color: color-mix(in srgb, var(--color-primary-violet) 70%, black); }
.bl-tag--teal { background: color-mix(in srgb, var(--color-primary-teal) 18%, var(--color-white)); color: color-mix(in srgb, var(--color-primary-teal) 85%, black); }
.bl-tag--green { background: color-mix(in srgb, var(--color-success) 18%, var(--color-white)); color: color-mix(in srgb, var(--color-success) 65%, black); }
.bl-tag--coral { background: color-mix(in srgb, var(--color-danger) 18%, var(--color-white)); color: color-mix(in srgb, var(--color-danger) 75%, black); }
.bl-tag--neutral { background: var(--color-bg-light); color: var(--color-text-heading); }

/* The hub's chip row opens the page, so it takes the archive's rules without
   the extra top margin the archive needs under its own header. */
.bl__pager { padding-bottom: 0; }

@media (max-width: 64rem) {
  .bl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 47.5rem) {
  .bl-grid { grid-template-columns: 1fr; }
  .bl-search { flex-wrap: wrap; border-radius: var(--radius-lg); }
  .bl-search .btn { width: 100%; justify-content: center; }
}
/* == /P5 blog hub == */

/* --- About: company fact sheet (#company-facts) ------------------------------
   Token-only. Two-column on wide screens: heading left, definition list right.
   ----------------------------------------------------------------------------- */
.ab-facts__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 2.5rem 4rem; align-items: start; }
.ab-facts__note { margin-top: 0.75rem; color: var(--color-text-secondary); font-size: var(--fs-small); max-width: 34ch; }
.ab-facts__list { margin: 0; border-top: 1px solid var(--color-border); }
.ab-facts__row { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: 0 1.5rem; padding: 0.85rem 0; border-bottom: 1px solid var(--color-border); }
.ab-facts__row dt { margin: 0; color: var(--color-text-secondary); font-size: var(--fs-small); font-weight: var(--fw-semibold); }
.ab-facts__row dd { margin: 0; color: var(--color-text-heading); font-variant-numeric: tabular-nums; }
@media (max-width: 45rem) {
  .ab-facts__grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .ab-facts__row { grid-template-columns: 1fr; gap: 0.15rem; }
}

/* --- Service group hubs (/services/repair, /services/wikipedia) --------------
   template-service-group.php. Token-only. Reuses sv-hero, sv-answer, sv-ref,
   hr-service and case-study-card; only the grids and the linked table cell
   are new.
   ----------------------------------------------------------------------------- */
.sg-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.sg-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sg-decision .sv-ref td a { color: var(--color-text-heading); font-weight: var(--fw-semibold); text-decoration: underline; text-decoration-color: var(--color-border); text-underline-offset: 3px; }
.sg-decision .sv-ref td a:hover, .sg-decision .sv-ref td a:focus-visible { text-decoration-color: currentColor; }
.sg-decision__foot { margin: 1rem 0 0; color: var(--color-text-secondary); font-size: var(--fs-small); max-width: 70ch; }
.sg-cases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.sg-cases__more { margin-top: 1.5rem; }
.mega-menu__column-heading--link, .mobile-menu__sub-heading--link { color: inherit; text-decoration: none; }
.mega-menu__column-heading--link:hover, .mega-menu__column-heading--link:focus-visible, .mobile-menu__sub-heading--link:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 64rem) { .sg-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sg-cases { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 45rem) { .sg-grid, .sg-grid--4, .sg-cases { grid-template-columns: 1fr; } }

/* == P5 contact hero == */
/* The contact hero moved off the dark animated gradient onto the shared light .sv-hero
   ground. Its .contact-hero__* pills in repx-bundle.css are still written for that dark
   background — white text on white-alpha fills with a blur — so on cream they render as
   near-invisible ghosts. These restate them for a light ground using the same treatment
   as .ls__chip, and drop the centring the old centred hero required.
   Scoped under .sv-hero so nothing else that may use these classes is affected.
   Token-only: no literal colours, so the recolor hex-remap is a no-op on this block. */
.sv-hero .contact-hero__quick-info {
	justify-content: flex-start;
	gap: var(--space-sm);
	margin-top: var(--fold-gap);
}
/* One row, one pill size: the trust pills and the contact pills shipped with different
   padding, which reads as two kinds of thing when they sit side by side. Both are set to
   the .ls__chip metrics so the four render as a single, even line. */
.sv-hero .contact-hero__trust-pill,
.sv-hero .contact-hero__pill {
	padding: 0.45rem 0.875rem;
	font-size: var(--fs-small);
	border-radius: var(--radius-pill);
}
.sv-hero .contact-hero__trust-pill,
.sv-hero .contact-hero__pill {
	background: transparent;
	border: 1px solid var(--color-border);
	color: var(--color-text-secondary);
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}
.sv-hero .contact-hero__pill:hover {
	background: transparent;
	border-color: var(--color-text-heading);
	color: var(--color-text-heading);
}
/* The bundle stacks these full-width and centred below 45rem — written for the old centred
   hero. With a left-aligned hero that reads as four loose bars, so they stay a wrapping row. */
@media (max-width: 45rem) {
	.sv-hero .contact-hero__quick-info {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		justify-content: flex-start;
	}
	.sv-hero .contact-hero__pill {
		width: auto;
		max-width: none;
		justify-content: flex-start;
	}
}
/* == /P5 contact hero == */

/* == P5 case study related == */
/* single-case_study.php renders the related cards with a .cs-related__grid / .cs-card__* family
   that had NO rules anywhere — not in redesign.css, not in the bundle. The section was raw
   unstyled markup: no card boundary, no grid, and the two hero stats ran together as one
   sentence ("10% Negative Sentiment Remaining 30 Days Initial Improvements").
   Metrics follow the house card language (.bl-card, line ~1479) so this reads as the same
   system. Token-only: no literal colours. */

.cs-related__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.5rem;
	margin-top: 2.5rem;
}

/* A surface is what separates one case study from the next — on the cream band these were
   invisible as discrete objects. */
.cs-card {
	display: flex;
	flex-direction: column;
	padding: 1.75rem;
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-xl);
	transition: border-color var(--transition-base), transform var(--transition-base);
}
.cs-card:hover { border-color: var(--color-primary-violet); transform: translateY(-3px); }

.cs-card__tag {
	align-self: flex-start;
	font-size: var(--fs-small);
	font-weight: var(--fw-bold);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	line-height: 1.2;
	color: var(--web-muted-ink);
	margin-bottom: 0.875rem;
}

.cs-card__title {
	font-size: 1.0625rem;
	font-weight: var(--fw-semibold);
	line-height: 1.3;
	letter-spacing: -0.015em;
	color: var(--color-text-heading);
	margin: 0 0 1.125rem;
	text-wrap: pretty;
}
.cs-card:hover .cs-card__title { color: var(--color-primary-violet); }

/* Two metrics on one line read as a single run-on sentence. Stacking them, with the figure
   carrying the weight and colour, makes each one legible as its own claim. */
.cs-card__stats {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin: 0 0 1.125rem;
	padding: 0.875rem 0;
	border-top: 1px solid var(--color-border);
	border-bottom: 1px solid var(--color-border);
}
.cs-card__stat {
	display: flex;
	align-items: baseline;
	gap: 0.45rem;
	font-size: var(--fs-small);
	line-height: 1.45;
	color: var(--color-text-secondary);
	text-wrap: pretty;
}
.cs-card__stat strong {
	flex: none;
	font-weight: var(--fw-extrabold);
	letter-spacing: -0.01em;
	color: var(--color-primary-violet);
	font-variant-numeric: tabular-nums;
}

/* Clamped so cards keep an even height regardless of excerpt length. */
.cs-card__desc {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
	font-size: var(--fs-caption);
	line-height: 1.6;
	color: var(--color-text-secondary);
	margin: 0 0 1.5rem;
}

/* margin-top:auto pins the link to the bottom so it aligns across cards of unequal length. */
.cs-card__link {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin-top: auto;
	font-size: var(--fs-small);
	font-weight: var(--fw-semibold);
	color: var(--color-primary-violet);
	text-decoration: none;
}
.cs-card__link:hover { text-decoration: underline; text-underline-offset: 3px; }
.cs-card__link svg { transition: transform var(--transition-fast); }
.cs-card:hover .cs-card__link svg { transform: translateX(3px); }

@media (max-width: 64rem) { .cs-related__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 45rem) { .cs-related__grid { grid-template-columns: 1fr; gap: 1.25rem; } }
/* == /P5 case study related == */

/* == P5 thank you == */
/* /thank-you moved off the dark animated-gradient hero onto the shared light .sv-hero.
   Its legacy .thank-you-top__* and .ty-* classes in repx-bundle.css are all hardcoded
   white-on-dark (white text on white-alpha fills), so they were
   dropped rather than carried over — on cream they render as invisible ghosts, the same
   failure the contact hero hit. These are the replacements.
   Token-only: no literal colours, so the recolor hex-remap is a no-op on this block. */

/* Icon colour note: the brand blue (--color-primary-violet) measures 2.66:1 on the cream
   band, so it is never used for a glyph that carries meaning. The small icons take
   --color-text-secondary (4.84:1), matching the text beside them; the confirmation mark
   mixes brand blue toward the heading colour for 4.00:1 while still reading as brand. */

/* Fixed-header clearance. Everywhere else on the site the .breadcrumbs element supplies
   it (.breadcrumbs { padding-top: calc(var(--header-h) + var(--crumb-pad)) }), but this
   page renders no breadcrumbs — it is noindex,nofollow, and a crumb trail on a conversion
   confirmation is noise. Without that offset the hero starts at y=0 and the confirmation
   mark sits behind the fixed header. */
.thank-you-page .sv-hero {
	padding-top: calc(var(--header-h) + var(--hero-pt));
}

/* The band heading introduces a short support list, not a page section. At the site-wide
   .hr-head__title scale (up to 2.75rem) it outweighs the confirmation it sits beneath and
   turns one line of content into a full screen. */
.thank-you-page .hr-head {
	margin-bottom: 2rem;
}
.thank-you-page .hr-head__title {
	font-size: clamp(1.25rem, 2vw, 1.5rem);
	letter-spacing: -0.01em;
	line-height: 1.25;
}

/* Confirmation mark. Sits above the eyebrow in State 1 only — the one place on the site
   where a status glyph is the point, so it is deliberately larger than an inline icon. */
.ty__mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3.25rem;
	height: 3.25rem;
	margin-bottom: var(--space-md);
	border-radius: 50%;
	background: color-mix(in oklab, var(--color-primary-violet) 12%, transparent);
	color: color-mix(in oklab, var(--color-primary-violet) 60%, var(--color-text-heading));
	font-size: 1.5rem;
	line-height: 1;
}

/* Echo of the address the confirmation went to. Quiet — it is a receipt, not a headline. */
.ty__sent-to {
	margin: 0;
	font-size: var(--fs-small);
	color: var(--color-text-secondary);
}
.ty__sent-to strong {
	font-weight: var(--fw-semibold);
	color: var(--color-text-heading);
	overflow-wrap: anywhere;
}

/* Prep list. A hairline-ruled stack rather than a card grid: it reads correctly with one
   item and with five, where a grid of one card reads as a mistake. */
.ty__prep {
	list-style: none;
	margin: 0;
	padding: 0;
	max-width: var(--measure);
	border-top: 1px solid var(--color-border);
}
.ty__prep-item {
	display: flex;
	align-items: flex-start;
	gap: 0.875rem;
	padding: 1.125rem 0;
	border-bottom: 1px solid var(--color-border);
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--color-text-body);
	text-wrap: pretty;
}
.ty__prep-item i {
	flex: none;
	margin-top: 0.28em;
	font-size: 1rem;
	color: var(--color-text-secondary);
}

/* Calendly wrapper. Width only — never overflow or a fixed height, either of which can
   clip the Schedule Event button and make the booking impossible to complete. */
.ty__calendly {
	max-width: 60rem;
	margin: 0 auto;
}

/* Assurance block, shared by all three states. */
.ty__assurance {
	/* Same measure as .ty__prep so the two hairlines line up. In State 2 it sits under a
	   wider Calendly widget, where a narrower footnote block is correct anyway. */
	max-width: var(--measure);
	margin-top: 3rem;
	padding-top: 1.75rem;
	border-top: 1px solid var(--color-border);
}
.ty__assurance-line {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	margin: 0 0 1rem;
	font-size: var(--fs-small);
	line-height: 1.6;
	color: var(--color-text-secondary);
}
.ty__assurance-line i {
	flex: none;
	color: var(--color-text-secondary);
}

/* Same metrics as .ls__chip and the contact-hero pills, so the three pages agree. */
.ty__chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm);
}
.ty__chip {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.45rem 0.875rem;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-pill);
	background: transparent;
	font-size: var(--fs-small);
	font-weight: var(--fw-medium);
	line-height: 1.2;
	color: var(--color-text-secondary);
}
.ty__chip i {
	color: var(--color-text-secondary);
}
/* == /P5 thank you == */