/* ============================================================================
   Pavesen - v4 language, site-wide
   ----------------------------------------------------------------------------
   The homepage got a full compositional rebuild. Its interior templates cannot
   take that markup (they have no paired image/copy spreads to bleed), but they
   CAN take the language, which is what makes the homepage read as designed
   rather than generated. This layer carries the transferable half:

     1. ONE gold italic per page. The italic-gold-last-word device was applied
        to every heading on every page - a formula without exception, which is
        the loudest generated tell on the site. It now appears once, on the page
        hero. Every other <em> keeps its italic (real emphasis) and drops the
        gold, which puts gold back to being an accent.
     2. CTA restraint. A page of solid gold buttons reads as a funnel. The page
        hero and the closing band keep the solid; every CTA between them is a
        quiet rule.
     3. Engraved buttons, a proper type scale, and hanging punctuation on pull
        quotes.

   PRESENTATION ONLY. Nothing here touches copy, titles, meta, canonicals or
   schema - the meta and schema currently rank and are deliberately untouched.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1. one gold italic
   ------------------------------------------------------------------------ */

/* REVERTED. The gold italic was spent once per page to break the
   every-heading formula; the user prefers it on every heading: "the headings
   are all in white + grey now, I liked it more with the white + gold." So the
   suppression is gone and heading <em>s take the brand gold again, from each
   page's own `.t-h2 em { color: var(--gold) }`. On a light band that resolves
   to the darker #786123 (see section 7) rather than #a78831. */

/* the page hero keeps it - one per page, where it names the subject */
.pv-v4 .pv-page-hero .t-h1 em,
.pv-v4 .pv-page-hero .t-hero em,
.pv-v4 .pv-hero .t-hero em,
.pv-v4 .article-hero h1 em,
.pv-v4 .ledger-hero h1 em {
  color: var(--gold) !important;
  opacity: 1;
}

/* ---------------------------------------------------------------------------
   2. CTA restraint - applied only where the ground is known to be dark
   ----------------------------------------------------------------------------
   Enumerating LIGHT containers to exclude kept missing one, and a gold rule on
   an off-white band measures 1.70:1. Inverted: the solid gold button is the
   default everywhere, because it is legible on both grounds, and the quiet rule
   is opted INTO only inside containers that are definitely dark.
   ------------------------------------------------------------------------ */

.pv-v4 .pv-dark .btn-primary,   .pv-v4 .pv-dark .btn-ghost,
.pv-v4 .pv-serve .btn-primary,  .pv-v4 .pv-serve .btn-ghost,
.pv-v4 .pv-damage .btn-primary, .pv-v4 .pv-damage .btn-ghost,
.pv-v4 .pv-advisors .btn-primary, .pv-v4 .pv-advisors .btn-ghost {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--gold-soft) !important;
  padding: 1.35em 0 !important;
  position: relative;
}
.pv-v4 .pv-dark .btn-primary::after,   .pv-v4 .pv-dark .btn-ghost::after,
.pv-v4 .pv-serve .btn-primary::after,  .pv-v4 .pv-serve .btn-ghost::after,
.pv-v4 .pv-damage .btn-primary::after, .pv-v4 .pv-damage .btn-ghost::after,
.pv-v4 .pv-advisors .btn-primary::after, .pv-v4 .pv-advisors .btn-ghost::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0.95em;
  height: 1px;
  background: var(--gold);
  opacity: 0.45;
  transition: opacity 0.4s var(--ease-ed);
}
.pv-v4 .pv-dark .btn-primary:hover, .pv-v4 .pv-serve .btn-primary:hover,
.pv-v4 .pv-damage .btn-primary:hover, .pv-v4 .pv-advisors .btn-primary:hover,
.pv-v4 .pv-dark .btn-ghost:hover, .pv-v4 .pv-serve .btn-ghost:hover,
.pv-v4 .pv-damage .btn-ghost:hover, .pv-v4 .pv-advisors .btn-ghost:hover { color: #fff !important; }

/* engraved solid, the default */
.pv-v4 .btn-primary {
  background: var(--gold);
  border: 1px solid var(--gold);
  color: var(--navy);
  padding: 1.35em 3em;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09);
}
.pv-v4 .pv-nav-cta { padding: 0.95em 1.75em !important; box-shadow: none !important; }
.pv-v4 .pv-hero-actions { gap: 1rem 2.4rem; align-items: center; }

/* ---------------------------------------------------------------------------
   3. scale and typesetting
   ------------------------------------------------------------------------ */

/* NO FONT-SIZE HERE - deliberately.
   `.pv-v4 .t-h2` (0,2,0) outranks every page's own `.t-h2` (0,1,0), so one
   sitewide size silently overrode per-page tuning: reputation-management-cost-uk
   sets its h2 to 2.6rem for an 820px column and was forced to 2.8rem; the page
   hero h1 went 4rem -> 4.2rem; FAQ questions 1.55rem -> 1.62rem. Measured
   against the untouched original that pushed 29 headings across 25 pages onto
   an extra line, 22 of them ending in a one-or-two-word widow. Each page was
   already fitted to its own column width. Only tracking and leading are
   refined here - they change colour and rhythm without moving a line break
   (tighter tracking in fact buys a little room back). */
.pv-v4 .pv-page-hero .t-h1 { letter-spacing: -0.015em; }
.pv-v4 .t-h2 { line-height: 1.1; letter-spacing: -0.016em; }

/* hanging punctuation: the first letter, not the quote mark, on the optical edge.
   The padding-left cancels the negative indent so only the quote mark hangs. */
.pv-v4 .pv-pull-quote, .pv-v4 blockquote {
  text-indent: -0.42em;
  padding-left: 0.42em;
}
/* `.article-pull` is the one of these that carries its own inset - 28px, set by
   each Ledger article to clear a 3px gold rule. Declaring padding-left here
   REPLACED that 28px with 0.42em, so the quote sat hard against its own rule on
   25 pull-quotes across 8 articles. The compensation has to be added to the
   existing inset rather than substituted for it. */
.pv-v4 .article-pull {
  text-indent: -0.42em;
  padding-left: calc(28px + 0.42em);
}
.pv-v4 .pv-pull-quote { font-size: clamp(1.35rem, 2.3vw, 1.95rem); line-height: 1.42; }

/* the Ledger index sets its own .pv-cta to slate; the sitewide dark rule
   overrode the background but not the navy text inside it */
/* the Ledger's slate CTA: its text was written for a light ground */
/* The heading itself was missed the first time round: on reputation-ledger/
   index.html the band's own CSS colours .cta-hl navy for a slate ground, the
   sitewide rule turned that ground dark, and the headline measured 1.04:1 -
   invisible. The em and the sub-copy were fixed then; the h2 was not. */
.pv-v4 .pv-cta .cta-hl { color: #fff !important; }
.pv-v4 .pv-cta .cta-hl em { color: var(--gold-soft) !important; }
.pv-v4 .pv-cta .cta-sub, .pv-v4 .pv-cta .cta-sub a { color: rgba(255,255,255,0.66) !important; }

/* ---------------------------------------------------------------------------
   4. CTA ALIGNMENT - grid-closing CTAs centre, column-closing CTAs do not
   ----------------------------------------------------------------------------
   REVISED. The first version of this rule was argued from a count: 245 CTAs
   left-aligned sitewide against 1 centred, so the centred one was treated as an
   outlier and brought into line. That count was the wrong measure - it lumped
   together two different situations, and almost all 245 were CTAs closing a
   single left-aligned TEXT COLUMN, where left is obviously right.

   The discriminator is what the CTA closes:

     - closes a text column  -> follows that column (left). It belongs to the
       copy above it and hanging it centre would orphan it.
     - closes a FULL-WIDTH MULTI-COLUMN GRID -> centred. There is no text column
       to hang off; left-aligning parks it under the first column, so it reads
       as belonging to that column rather than closing the section, and leaves
       the rest of the width empty beneath.
     - inside a band that is itself centred (.pv-cta) -> centred, as before.

   On the homepage that means Who We Serve (2x2 grid) and Reputation Damage
   (3-column grid) both centre - which is also what the original site did for
   Who We Serve. The hero, the two spreads and the advisors block all close text
   columns and stay left.
   ------------------------------------------------------------------------ */

/* Matched via :has() on the button, deliberately UNSCOPED by depth. An earlier
   version tried `> .container > div:has(...)` to restrict this to full-width
   wrappers; that patch silently failed to apply and the unscoped form is in
   fact the correct one, so it stays. Verified: .pv-serve and .pv-damage exist
   on the homepage only, one per build, and the unscoped rule lands right on
   both because it centres each button in ITS OWN wrapper -
     v4: the wrapper spans the container under a full-width grid -> centres in
         the section, which is what a grid-closing CTA wants;
     v2: the wrapper sits inside the grid's copy column -> centres in that
         column, which is what a paired-panel CTA wants (rule 4b).
   One selector, both readings, because the markup differs. Do not "fix" the
   depth scoping without re-measuring BOTH builds against their own wrappers -
   measuring against the section makes v2 look left-aligned when it is not. */
.pv-v4 .pv-serve div:has(> .btn-primary),
.pv-v4 .pv-serve div:has(> .btn-ghost),
.pv-v4 .pv-damage div:has(> .btn-primary),
.pv-v4 .pv-damage div:has(> .btn-ghost) {
  text-align: center !important;
}

/* ---------------------------------------------------------------------------
   4b. PAIRED-PANEL CTAs CENTRE WITHIN THEIR OWN COLUMN
   ----------------------------------------------------------------------------
   User's call, twice: "buttons like 'EXPLORE SERVICES' and 'ABOUT PAVESEN'
   might look better centre. Same with 'ABOUT PAVESEN' under 'Private
   Advisors'." All three close a copy column that sits BESIDE something else -
   a full-bleed photograph in the two spreads, the figures register in the
   advisors block. In that arrangement the copy column reads as a panel in its
   own right, and a button centred in the panel closes it more definitely than
   one tucked under the first word.

   CENTRED IN THE COLUMN, not in the section - centring these against the
   section would drag the spread buttons out under the photograph.

   This does not extend to CTAs closing a full-width text block (the ~245 of
   them on the interior pages): there the column IS the measure, so centring
   would just detach the button from its copy.
   ------------------------------------------------------------------------ */

.pv-v4 .v4-spread__cta { text-align: center; }

/* The advisors CTA, and WHY IT NEEDED A TYPOGRAPHIC FIX RATHER THAN A NUDGE.
   It measured dead centre - button 446, column 446, block 446 - and still read
   as sitting right. Measuring the paragraph line by line found the cause: the
   last line is a runt, 289px against a 511px measure, centred at 334. The eye
   anchors on the line directly above the button, so a correctly centred button
   appears 112px too far right.

   `text-wrap: balance` evens the rag - the last line goes 289px -> 434px and the
   gap falls to 39px - and the centred button then reads as centred.
   (`text-wrap: pretty` does nothing here; it only rescues single-word runts.)
   Scoped to this paragraph, not to body copy generally: `balance` is meant for
   short blocks and browsers cap it by line count. */
.pv-v4 .pv-advisors .pv-advisors-grid > [data-reveal]:first-child .t-body {
  text-wrap: balance;
}
.pv-v4 .pv-advisors .t-body + div:has(> .btn-primary),
.pv-v4 .pv-advisors .t-body + div:has(> .btn-ghost) {
  text-align: center;
  /* OPTICAL CENTRING, same correction as .pv-about-intro. `text-align: center`
     centres on the wrapper (centre 446), but the copy is ragged-right and the
     line the eye anchors on sits at 407, so a geometrically centred button
     reads 38px too far right. Padding the wrapper moves the centring axis left
     by half the padding, landing it on the text's optical axis. A percentage so
     it tracks the column at every width. */
  padding-right: 14.9%;
}

/* about.html's intro is the same shape: a left-hand copy column with the CTA
   beneath it. Same treatment - the button stays in that column (it must not
   centre across the page) and centres under the copy, with the rag balanced
   first so the last line is not a runt. Measured: last line 344px of a 486px
   measure, its centre 73px left of the column's; balance closes that to 33px. */
.pv-v4 .pv-about-intro p:last-of-type { text-wrap: balance; }
.pv-v4 .pv-about-intro div:has(> .btn-primary),
.pv-v4 .pv-about-intro div:has(> .btn-ghost) {
  text-align: center;
  /* OPTICAL CENTRING, not arithmetic. `text-align: center` centres on the
     paragraph BOX (centre 435), but the copy is ragged-right and never fills
     it - the mean line centre is 405 and the last line before the button sits
     at 402. Centred on the box, the button reads 30px too far right, which is
     what the user kept seeing. Padding the wrapper shifts the centring axis
     left by half the padding, landing the button on the text's optical axis.
     Expressed as a percentage so it tracks the column at every width. */
  padding-right: 12.2%;
}

/* ---------------------------------------------------------------------------
   5. ONE GOLD ITALIC - closing the inline-style hole
   ----------------------------------------------------------------------------
   Rule 1 above sets non-hero heading <em>s to `color: inherit`, but 12 pages
   carry the gold as an INLINE style attribute (<em style="color:var(--gold);">)
   and an inline style beats any stylesheet rule without !important. So the
   device that was supposed to appear once per page was appearing two or three
   times on those pages - the exact repetition the rule exists to stop.

   Scoped deliberately: the page hero keeps its gold italic (it is the brand
   line) and so does the closing .pv-cta headline, which reads as the bookend to
   it. Everything between them inherits.
   ------------------------------------------------------------------------ */

/* REMOVED with rule 1. This suppressed the inline gold on non-hero headings;
   the user wants gold on every heading, so it now does the opposite of what is
   wanted. Worth noting why it had to GO rather than be out-ranked: at (0,3,2)
   - three class-level parts because `:not()` and `[style*=]` each count as one,
   plus two elements - it beat the light-band override at (0,3,1) and quietly
   won. Third time in this session that `:not()` specificity caused a silent
   loss; when an !important rule in a later file does not take, count the
   class-level parts first. */
/* the hero is never touched by the above, but state it so it cannot regress */
.pv-v4 .pv-page-hero em[style*="gold"],
.pv-v4 .pv-hero em[style*="gold"],
.pv-v4 .article-hero em[style*="gold"],
.pv-v4 .ledger-hero em[style*="gold"] { color: var(--gold) !important; opacity: 1; }

/* ---------------------------------------------------------------------------
   5b. AN <em> THAT STARTS ITS OWN LINE KEEPS ITS GOLD
   ----------------------------------------------------------------------------
   Rule 5 was too blunt. The device worth suppressing is the last-word tic -
   "Reputation *Damage*", "How we work *in the UK*" - gold trailing emphasis
   inside a sentence, repeated on every heading. But 15 pages use a different
   construction: a heading breaks with <br> and the gold <em> becomes a pull-out
   line of its own, e.g. on services.html

       Our team provides every service to answer a single question:<br>
       <em>What do people find when they search for your name or your brand?</em>

   That is a deliberate typographic move, not a formula, and the user called it
   out as better than the flattened version. `br + em` distinguishes the two
   exactly: an em that BEGINS a line is a pull-out and keeps the gold; an em
   that trails a sentence inherits.
   ------------------------------------------------------------------------ */

/* :not(.cta-hl) is carried through from rule 5 deliberately - without it this
   block computes LOWER specificity than the rule it is meant to override and
   silently loses. */
.pv-v4 h1:not(.cta-hl) br + em[style*="gold"],
.pv-v4 .t-h1:not(.cta-hl) br + em[style*="gold"],
.pv-v4 h2:not(.cta-hl) br + em[style*="gold"],
.pv-v4 .t-h2:not(.cta-hl) br + em[style*="gold"],
.pv-v4 h3:not(.cta-hl) br + em[style*="gold"],
.pv-v4 .t-h3:not(.cta-hl) br + em[style*="gold"],
.pv-v4 .t-hero:not(.cta-hl) br + em[style*="gold"] {
  color: var(--gold) !important;
  opacity: 1;
}

/* ---------------------------------------------------------------------------
   6. PAPER BANDS - breaking up long runs of dark sections
   ----------------------------------------------------------------------------
   Measured across all 99 pages: 65 of them had four or more consecutive dark
   bands, 27 had seven or more, and six had no light band at all. The user
   counted six in a row plus the footer on ai-reputation-management. This is
   PRE-EXISTING - the untouched original measures the same - but it makes the
   long pages read as one undifferentiated dark scroll.

   `plan_bands.py` renders every page, finds runs longer than three, and adds
   `pv-paper` to the section nearest the middle of each run. Three is the
   homepage's own rhythm (it runs 1, 3, 3). The hero, the closing CTA, the
   footer, the press strip and the pull-quote band are never promoted, and
   nothing under 260px is - a short strip flipped to paper reads as a stripe.

   THE HARD PART IS NOT THE BACKGROUND, IT IS THE TEXT. These sections were
   written for a dark ground and carry ~1,500 inline `color:` declarations in
   24 distinct light values. An inline style beats a stylesheet, so every one
   needs !important. Three tiers are kept so the hierarchy survives: near-opaque
   white becomes navy, mid becomes body grey, faint becomes muted grey.
   ------------------------------------------------------------------------ */

.pv-v4 .pv-paper {
  background-color: var(--slate) !important;
  background-image: none !important;
  color: #3a4a5c;
}

/* EVERY descendant goes dark first, then the exceptions are re-asserted above
   it. Enumerating the light values was tried and failed: it caught the ~1,500
   inline declarations but not the page-level class rules that also set white
   text, and it left 584 elements unreadable. A catch-all cannot miss one.
   Specificity does the layering - `.pv-paper *` is (0,2,0), so every rule below
   with a class or an element name outranks it. */
.pv-v4 .pv-paper,
.pv-v4 .pv-paper * { color: #3a4a5c !important; }

/* headings and display type */
.pv-v4 .pv-paper h1, .pv-v4 .pv-paper h2, .pv-v4 .pv-paper h3, .pv-v4 .pv-paper h4,
.pv-v4 .pv-paper .t-h1, .pv-v4 .pv-paper .t-h2, .pv-v4 .pv-paper .t-h3,
.pv-v4 .pv-paper .t-hero, .pv-v4 .pv-paper .cta-hl, .pv-v4 .pv-paper .pv-faq-q,
.pv-v4 .pv-paper .sc-title, .pv-v4 .pv-paper .pil-title, .pv-v4 .pv-paper .pv-leader-name,
.pv-v4 .pv-paper strong, .pv-v4 .pv-paper b {
  color: var(--navy) !important;
}
.pv-v4 .pv-paper h2 em, .pv-v4 .pv-paper h3 em,
.pv-v4 .pv-paper .t-h2 em, .pv-v4 .pv-paper .t-h3 em,
.pv-v4 .pv-paper h1 em, .pv-v4 .pv-paper .t-h1 em { color: #786123 !important; }

/* gold stays gold - it is the brand accent and reads on both grounds */
.pv-v4 .pv-paper .t-eyebrow, .pv-v4 .pv-paper .pv-card-num, .pv-v4 .pv-paper .sc-num,
.pv-v4 .pv-paper .pil-num, .pv-v4 .pv-paper .adv-pillar-num,
.pv-v4 .pv-paper [style*="color:var(--gold)"],
.pv-v4 .pv-paper [style*="color: var(--gold)"] { color: var(--gold) !important; }

/* links keep the gold so they stay findable in body copy */
.pv-v4 .pv-paper p a, .pv-v4 .pv-paper li a { color: var(--gold) !important; }

/* hairlines: white at 4-10% is invisible on paper */
.pv-v4 .pv-paper [style*="rgba(255,255,255,0.0"],
.pv-v4 .pv-paper [style*="rgba(255,255,255,0.1"],
.pv-v4 .pv-paper [style*="rgba(255,255,255,0.2"] { border-color: rgba(0, 18, 51, 0.10) !important; }
.pv-v4 .pv-paper hr,
.pv-v4 .pv-paper .pv-faq-item,
.pv-v4 .pv-paper .sc-row { border-color: rgba(0, 18, 51, 0.10) !important; }

/* a card that carries its own dark ground stays dark, and its text stays light -
   the blanket inversion above would otherwise put navy text on navy */
.pv-v4 .pv-paper .pv-dark,
.pv-v4 .pv-paper .pv-info-card-dark,
.pv-v4 .pv-paper [style*="background:#00102d"],
.pv-v4 .pv-paper [style*="background:#001233"],
.pv-v4 .pv-paper [style*="background:#000e26"] { color: rgba(255, 255, 255, 0.75) !important; }
.pv-v4 .pv-paper .pv-dark *,
.pv-v4 .pv-paper .pv-info-card-dark *,
.pv-v4 .pv-paper [style*="background:#00102d"] *,
.pv-v4 .pv-paper [style*="background:#001233"] *,
.pv-v4 .pv-paper [style*="background:#000e26"] * { color: rgba(255, 255, 255, 0.75) !important; }
.pv-v4 .pv-paper .pv-dark h2, .pv-v4 .pv-paper .pv-dark h3,
.pv-v4 .pv-paper .pv-info-card-dark h2, .pv-v4 .pv-paper .pv-info-card-dark h3 { color: #fff !important; }

/* buttons: the solid gold default is legible on paper; the line treatment is not */
.pv-v4 .pv-paper .btn-primary {
  background: var(--gold) !important;
  border: 1px solid var(--gold) !important;
  color: var(--navy) !important;
}
.pv-v4 .pv-paper .btn-primary::after { display: none !important; }
.pv-v4 .pv-paper .btn-ghost { color: var(--navy) !important; border-color: rgba(0, 18, 51, 0.3) !important; }

/* A control with its own GOLD ground keeps its navy label. The catch-all above
   is (0,2,0) and sits in a later stylesheet than the page's own
   `.cs-btn.cs-active` (also (0,2,0)), so it was winning and painting the active
   filter's label body-grey on gold - 2.68:1. */
.pv-v4 .pv-paper .cs-btn.cs-active, .pv-v4 .pv-paper .cs-btn:hover,
.pv-v4 .pv-paper [style*="background:var(--gold)"],
.pv-v4 .pv-paper [style*="background: var(--gold)"],
.pv-v4 .pv-paper [style*="background:#a78831"] { color: var(--navy) !important; }

/* ---------------------------------------------------------------------------
   7. GOLD ON LIGHT GROUNDS
   ----------------------------------------------------------------------------
   Brand gold #a78831 measures 2.64:1 on the slate band - it fails AA, and it
   failed on the original site too. It was tolerable while light bands were
   rare; after section 6 added 82 of them it applied to 242 elements, so it had
   to be dealt with rather than spread.

   #786123 is NOT a different colour. It is the same gold - hue 44.2 degrees,
   saturation 55%, both identical to #a78831 - taken from 42% lightness down to
   30%. That is the smallest change that clears AA: 4.64:1 on #e2e4df. Gold on
   the DARK ground is untouched and stays #a78831, where it already measures
   comfortably.

   `pv-lightband` is written onto every section that RENDERS light - 243 of
   them - rather than matched by class name, because `.pv-section` is used for
   both light and dark sections and no selector can tell them apart.
   ------------------------------------------------------------------------ */

.pv-v4 .pv-lightband {
  --gold: #786123;
  --gold-soft: #8a7130;
}

.pv-v4 .pv-lightband .t-eyebrow,
.pv-v4 .pv-lightband .pv-card-num, .pv-v4 .pv-lightband .sc-num,
.pv-v4 .pv-lightband .pil-num, .pv-v4 .pv-lightband .adv-pillar-num,
.pv-v4 .pv-lightband .pv-num, .pv-v4 .pv-lightband .cs-num,
.pv-v4 .pv-lightband p a, .pv-v4 .pv-lightband li a,
.pv-v4 .pv-lightband [style*="color:var(--gold)"],
.pv-v4 .pv-lightband [style*="color: var(--gold)"],
.pv-v4 .pv-lightband [style*="color:#a78831"],
.pv-v4 .pv-lightband [style*="color:var(--gold-soft)"] {
  color: #786123 !important;
}

/* the one-per-page gold italic, where it falls on a light band */
.pv-v4 .pv-lightband h1 br + em[style*="gold"],
.pv-v4 .pv-lightband .t-h1 br + em[style*="gold"],
.pv-v4 .pv-lightband h2 br + em[style*="gold"],
.pv-v4 .pv-lightband .t-h2 br + em[style*="gold"],
.pv-v4 .pv-lightband h3 br + em[style*="gold"],
.pv-v4 .pv-lightband .t-h3 br + em[style*="gold"] { color: #786123 !important; }

/* a solid gold button keeps the brand gold - navy text on it is 8.4:1, and the
   button is a filled shape, not text on the band */
.pv-v4 .pv-lightband .btn-primary {
  /* the literal brand gold, NOT var(--gold) - this block redefines --gold to
     the darker light-ground variant, and var(--gold2) is the hover tone, so
     both would give the button the wrong fill */
  background: #a78831 !important;
  border-color: #a78831 !important;
  color: #001233 !important;
}
.pv-v4 .pv-lightband .btn-primary:hover {
  background: #c4a042 !important;
  border-color: #c4a042 !important;
}

/* ---------------------------------------------------------------------------
   8. THE LAST EIGHT PAGES
   ----------------------------------------------------------------------------
   What survived section 7, all of it pre-existing and all of it a too-faint
   alpha rather than a wrong hue. Measured on the real grounds:
     white 0.30 on #000e26 = 2.61 -> 0.46 gives 4.63
     rgba(42,58,76,0.45) on #e2e4df = 2.30 -> 0.80 gives 5.35
     gold 0.50, inline, on a light band - the section 7 selector matched
     `color:var(--gold)` but not a literal rgba, so it was missed
   ------------------------------------------------------------------------ */

/* the footer copyright line, 5 pages */
.pv-v4 .pv-footer-copy,
.pv-v4 .pv-footer-copy * { color: rgba(255, 255, 255, 0.46) !important; }

/* literal gold rgba written inline - section 7 only caught var(--gold) */
.pv-v4 .pv-lightband [style*="color:rgba(167,136,49"],
.pv-v4 .pv-lightband [style*="color: rgba(167,136,49"],
.pv-v4 .pv-lightband [style*="color:rgba(167, 136, 49"] { color: #786123 !important; }

/* muted labels on the ledger article grounds */
.pv-v4 [style*="color:rgba(42,58,76,0.45)"],
.pv-v4 [style*="color: rgba(42,58,76,0.45)"],
.pv-v4 [style*="color:rgba(42, 58, 76, 0.45)"] { color: rgba(42, 58, 76, 0.8) !important; }

/* The decorative arrows on about.html sit at 0.14 and reveal to full opacity on
   hover - they are ornament, not content, so they are hidden from assistive
   tech rather than darkened, which would make them read as live links. */
.pv-v4 .pv-lightband [style*="rgba(167,136,49,0.14)"],
.pv-v4 [style*="color:rgba(167,136,49,0.14)"] { speak: none; }

/* ---------------------------------------------------------------------------
   9. FADED GOLD ON THE DARK GROUND
   ----------------------------------------------------------------------------
   The last sub-3:1 text on the site, all of it pre-existing and all the same
   mistake: brand gold dropped to a low alpha to make it recessive. On #000e26
   that reads 1.16 at 0.14 alpha and 2.21 at 0.5 - invisible to faint. Gold at
   full opacity is 5.69:1, so the recession has to come from SIZE and TRACKING,
   which these elements already have (0.62rem, 0.16em), not from opacity.

   Raised to 0.85 (4.37:1) rather than 1.0, which keeps them visibly secondary
   to the white text beside them while staying legible.
   ------------------------------------------------------------------------ */

.pv-v4 [style*="color:rgba(167,136,49,0.5)"],
.pv-v4 [style*="color:rgba(167,136,49,0.65)"],
.pv-v4 [style*="color:rgba(167,136,49,0.45)"],
.pv-v4 [style*="color: rgba(167,136,49,0.5)"],
.pv-v4 [style*="color: rgba(167,136,49,0.65)"],
.pv-v4 [style*="color: rgba(167,136,49,0.45)"] { color: rgba(167,136,49,0.9) !important; }

/* the globe's location list: the number and arrow marked an item at 0.22 and
   0.14, which is below the threshold of being visible at all. The active item
   still separates itself - it gets full gold plus the .active treatment. */
.pv-v4 .pv-globe-loc-n { color: rgba(167,136,49,0.9) !important; }
.pv-v4 .pv-globe-loc-arr { color: rgba(167, 136, 49, 0.75) !important; }
.pv-v4 .pv-globe-loc.active .pv-globe-loc-n,
.pv-v4 .pv-globe-loc.active .pv-globe-loc-arr { color: var(--gold) !important; }

/* class-defined muted labels in the ledger articles */
.pv-v4 .article-subject-label { color: rgba(42, 58, 76, 0.8) !important; }

/* the globe's "drag to rotate" affordance hint sat at 0.18 (1.23:1) - it is a
   transient instruction that disappears on first interaction, so it has to be
   readable while it is there */
.pv-v4 #pvGlobeHint { color: rgba(167,136,49,0.9) !important; }

/* Leading-dot decimals. The source mixes `rgba(167,136,49,0.45)` and
   `rgba(167,136,49,.45)`, and a selector written for one silently misses the
   other - this single prefix catches every dot-decimal gold alpha at once. */
.pv-v4 [style*="color:rgba(167,136,49,."],
.pv-v4 [style*="color: rgba(167,136,49,."],
.pv-v4 [style*="color:rgba(167, 136, 49, ."] { color: rgba(167,136,49,0.9) !important; }
.pv-v4 .pv-lightband [style*="color:rgba(167,136,49,."],
.pv-v4 .pv-lightband [style*="color: rgba(167,136,49,."] { color: #786123 !important; }

/* heading italics on a light band take the darker gold, matching section 7 */
.pv-v4 .pv-lightband h1 em, .pv-v4 .pv-lightband h2 em, .pv-v4 .pv-lightband h3 em,
.pv-v4 .pv-lightband .t-h1 em, .pv-v4 .pv-lightband .t-h2 em, .pv-v4 .pv-lightband .t-h3 em,
.pv-v4 .pv-lightband .cta-hl em { color: #786123 !important; }

/* ---------------------------------------------------------------------------
   10. THE LAST NON-GROUND NAVIES, AND GOLD INSIDE A DARK CARD
   ----------------------------------------------------------------------------
   Section 9 grounded the SECTIONS. These four are inner elements, so no section
   selector reached them: the cookie notice (93 pages), the ledger article image
   plate, the contact form panel and the ledger card. All were #001233 or
   #00102d against a #000e26 page.

   `.pv-nav` is deliberately excluded - it renders rgb(0,12,31) because it is a
   translucent bar composited over whatever is beneath it, not a flat surface.
   ------------------------------------------------------------------------ */

.pv-v4 .cookie-notice,
.pv-v4 .article-featured-img,
.pv-v4 .pv-form-wrap,
.pv-v4 .ledger-card { background-color: var(--ground) !important; }

/* ----------------------------------------------------------------------------
   A dark card sitting INSIDE a light band keeps the BRAND gold. Section 7
   redefines --gold to the darker #786123 for the whole band, which is right for
   text on the paper but wrong for the contact form's labels, the resources
   cards and the comparison table row - all of which sit on their own dark
   ground inside that band. The literal hex is required: var(--gold) resolves to
   the darker value here, and var(--gold2) is the hover tone.
   ------------------------------------------------------------------------ */

.pv-v4 .pv-lightband .pv-form-wrap,
.pv-v4 .pv-lightband .pv-form-wrap *,
.pv-v4 .pv-lightband [style*="background:var(--navy"] *,
.pv-v4 .pv-lightband [style*="background:#00"] *,
.pv-v4 .pv-lightband [style*="background:var(--ground"] *,
.pv-v4 .pv-lightband .pv-dark *,
.pv-v4 .pv-lightband .ledger-card * {
  --gold: #a78831;
}
.pv-v4 .pv-lightband .pv-form-wrap .t-eyebrow,
.pv-v4 .pv-lightband .pv-form-wrap label,
.pv-v4 .pv-lightband [style*="background:var(--navy"] .t-eyebrow,
.pv-v4 .pv-lightband [style*="background:#00"] .t-eyebrow,
.pv-v4 .pv-lightband [style*="background:var(--ground"] .t-eyebrow,
.pv-v4 .pv-lightband [style*="background:var(--navy"] [style*="color:var(--gold)"],
.pv-v4 .pv-lightband [style*="background:#00"] [style*="color:var(--gold)"],
.pv-v4 .pv-lightband [style*="background:var(--ground"] [style*="color:var(--gold)"] {
  color: #a78831 !important;
}

/* ---------------------------------------------------------------------------
   11. A SPANNING ITEM RESURRECTING A COLLAPSED GRID COLUMN
   ----------------------------------------------------------------------------
   `.pv-approach-grid` correctly collapses to `grid-template-columns: 1fr` below
   900px, but its LAST item carries `grid-column: span 2`. A span wider than the
   explicit track count makes the grid create an IMPLICIT second column, and the
   auto-placed items then flow into it - so the "collapsed" grid rendered two
   165px columns on a 390px phone, with each step 719px tall. Pre-existing: the
   original measures identically.

   Resetting the span is the fix; the collapse rule itself was never the problem.
   ------------------------------------------------------------------------ */
@media (max-width: 900px) {
  .pv-v4 .pv-approach-grid > * { grid-column: auto !important; }
}

@media (hover: hover) {
/* ---------------------------------------------------------------------------
   12. THE INFORMATION CARDS - a warm hover, not a cold one
   ----------------------------------------------------------------------------
   `.pv-info-card-light:hover` washed the card with `rgba(0,18,51,0.08)` - navy
   at 8%. Over the warm paper band that composites to rgb(208,211,209): a
   desaturated cold grey with no relationship to the palette. The user's word
   was "horrible", and the arithmetic agrees - it is the only cold tone on an
   otherwise warm surface.

   Replaced with the same weight of BRAND GOLD, which lands on rgb(222,222,211)
   - a warm parchment shift that reads as the page's own material. The gold
   hairline does the rest of the work.

   Kept deliberately faint: these cards are `cursor: default`, so they are
   informational, not clickable. A strong hover on a non-interactive element
   promises something that will not happen.
   ------------------------------------------------------------------------ */

.pv-v4 .pv-info-card-light:hover {
  /* no background wash - see section 20. A whole-box colour change reads as
     tacky on a card holding a label and a paragraph; the label carries it. */
  border-color: rgba(167, 136, 49, 0.42) !important;
}
}

/* ---------------------------------------------------------------------------
   13. THE HOVER SYSTEM - restoring what normalise-inline.py removed
   ----------------------------------------------------------------------------
   The v2 pass stripped 743 inline onmouseover/onmouseout handlers and replaced
   them with a `.pv-hov` class. That class only ever carried a TRANSITION - no
   hover state - so every one of those elements silently lost its feedback:
   cards stopped responding, the Related Resources rows lost the gold treatment
   that spread from their left ribbon, and the dimmed roman numerals stopped
   coming up to solid gold. The user is right that this made the site worse.

   The 743 handlers reduced to 16 behaviours, which are really four:
     gold border + faint gold wash + brighter text   (~525)
     border only, to gold                             (~48)
     a dimmed child coming up to full gold            (~24)
     a faint white wash                               (~135)
   Rebuilt here as ONE system rather than 16 literal restorations, so every
   card on the site now answers the pointer the same way.

   Grounds are handled separately: brand gold on the dark, the darker #786123
   on the paper bands, matching section 7.
   ------------------------------------------------------------------------ */

.pv-v4 .pv-hov,
.pv-v4 .pv-panel,
.pv-v4 .pv-fact-card,
.pv-v4 .pv-lp-card,
.pv-v4 .pv-risk-card,
.pv-v4 .pv-scenario,
.pv-v4 .pv-approach-step,
.pv-v4 .svc-row {
  transition: border-color 0.35s var(--ease-ed, ease),
              background-color 0.35s var(--ease-ed, ease),
              color 0.35s var(--ease-ed, ease);
}
/* the dimmed numerals and labels inside them */
.pv-v4 .pv-hov > *, .pv-v4 .pv-panel > *, .pv-v4 .pv-fact-card > *,
.pv-v4 .pv-lp-card > *, .pv-v4 .pv-risk-card > *, .pv-v4 .pv-scenario > *,
.pv-v4 .pv-approach-step > *, .pv-v4 .svc-row > * {
  transition: opacity 0.35s var(--ease-ed, ease), color 0.35s var(--ease-ed, ease);
}@media (hover: hover) {
/* ---- on the dark ground ---- */
.pv-v4 .pv-hov:hover,
.pv-v4 .pv-panel:hover,
.pv-v4 .pv-fact-card:hover,
.pv-v4 .pv-lp-card:hover,
.pv-v4 .pv-risk-card:hover,
.pv-v4 .pv-scenario:hover,
.pv-v4 .pv-approach-step:hover,
.pv-v4 .svc-row:hover {
  border-color: rgba(167, 136, 49, 0.45) !important;
}
}@media (hover: hover) {
/* a dimmed child comes up to full - this is the numeral going solid gold */
.pv-v4 .pv-hov:hover > *, .pv-v4 .pv-panel:hover > *, .pv-v4 .pv-fact-card:hover > *,
.pv-v4 .pv-lp-card:hover > *, .pv-v4 .pv-risk-card:hover > *, .pv-v4 .pv-scenario:hover > *,
.pv-v4 .pv-approach-step:hover > *, .pv-v4 .svc-row:hover > * {
  opacity: 1 !important;
}
}@media (hover: hover) {
.pv-v4 a.pv-hov:hover {
  color: rgba(255, 255, 255, 0.96) !important;
}
}@media (hover: hover) {
.pv-v4 .pv-hov:hover > span {
  color: var(--gold) !important;
}
}@media (hover: hover) {
/* the Related Resources rows keep their gold left ribbon and the rest of the
   border rises to meet it, which is the effect the inline handler produced */
.pv-v4 a.pv-hov:hover {
  border-left-color: var(--gold) !important;
}
}@media (hover: hover) {
/* ---- on the paper bands ---- */
.pv-v4 .pv-lightband .pv-hov:hover,
.pv-v4 .pv-lightband .pv-panel:hover,
.pv-v4 .pv-lightband .pv-fact-card:hover,
.pv-v4 .pv-lightband .pv-lp-card:hover,
.pv-v4 .pv-lightband .pv-risk-card:hover,
.pv-v4 .pv-lightband .pv-scenario:hover,
.pv-v4 .pv-lightband .pv-approach-step:hover,
.pv-v4 .pv-lightband .svc-row:hover {
  border-color: rgba(120, 97, 35, 0.45) !important;
}
}@media (hover: hover) {
.pv-v4 .pv-lightband a.pv-hov:hover {
  color: var(--navy) !important; border-left-color: #786123 !important;
}
}@media (hover: hover) {
.pv-v4 .pv-lightband .pv-hov:hover > span {
  color: #786123 !important;
}
}

/* ---------------------------------------------------------------------------
   14. THE SECONDARY BUTTON ON A PAPER BAND
   ----------------------------------------------------------------------------
   `.btn-ghost` is transparent with a `rgba(0,18,51,0.3)` hairline. On the dark
   ground that reads as a quiet outline; on the paper band the fill is just the
   paper showing through and the border is a pale grey line, so it renders as a
   weak white box sitting beside a solid gold primary. The user's read - "surely
   that's not supposed to be the case" - is fair.

   The site's own secondary treatment everywhere else is a RULE, not a box: a
   label sitting on a gold hairline. Applying that here removes the box, keeps
   the hierarchy against the solid primary, and matches the language.
   ------------------------------------------------------------------------ */

.pv-v4 .pv-lightband .btn-ghost {
  border: 0 !important;
  background: transparent !important;
  color: var(--navy) !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin: 0; /* spacing lives on the container - see section 21 */
  position: relative;
}
.pv-v4 .pv-lightband .btn-ghost::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0.75em;
  height: 1px;
  background: #786123;
  opacity: 0.55;
  transition: opacity 0.35s var(--ease-ed, ease);
}@media (hover: hover) {
.pv-v4 .pv-lightband .btn-ghost:hover::after { opacity: 1; }
}@media (hover: hover) {
.pv-v4 .pv-lightband .btn-ghost:hover { color: #786123 !important; }
}

/* ---------------------------------------------------------------------------
   15. THE BOUNDARY CARDS - the last filled cards on the site
   ----------------------------------------------------------------------------
   `.pv-sanctions-boundary` and `.pv-boundary-card` (32 instances, 3 pages)
   escaped the v2 pass that turned filled cards into hairline-ruled columns, so
   they still carry all three of the tells that pass existed to remove:

     a 3-4px GOLD LEFT BAR - the documentation/callout pattern
     a filled, bordered box wrapped around 60-100 word paragraphs
     `transform: translateY(-2px)` on hover - the lift-and-shadow tic

   Boxing long-form prose is the specific problem: a box promises something
   short and scannable, and these hold three full paragraphs. Given the same
   hairline treatment as every other panel, they read as editorial sections
   rather than alerts.

   The muted "what we do not do" card keeps its lower contrast - that
   distinction is meaningful - but earns it from type colour rather than from a
   grey left bar.
   ------------------------------------------------------------------------ */

.pv-v4 .pv-sanctions-boundary {
  background: transparent !important;
  border: 0 !important;
  border-top: 1px solid rgba(167, 136, 49, 0.4) !important;
  border-bottom: 1px solid var(--rule-dark, rgba(255,255,255,0.08)) !important;
  padding: 2.6rem 0 2.8rem !important;
}
.pv-v4 .pv-boundary-card {
  background: transparent !important;
  border: 0 !important;
  border-top: 1px solid var(--rule-dark, rgba(255,255,255,0.10)) !important;
  padding: 2.1rem 0 2.2rem !important;
  transform: none !important;
}
.pv-v4 .pv-boundary-card.muted {
  border-top-color: rgba(255, 255, 255, 0.07) !important;
}@media (hover: hover) {
/* flat hover, in the same language as every other panel - no lift */
.pv-v4 .pv-boundary-card:hover,
.pv-v4 .pv-boundary-card.muted:hover {
  background: transparent !important;
  transform: none !important;
  border-top-color: rgba(167, 136, 49, 0.5) !important;
}
}
/* the grid needs a gap now that the boxes are gone */
.pv-v4 .pv-boundary-grid { gap: 0 clamp(2rem, 4vw, 3.4rem) !important; }
@media (min-width: 900px) {
  .pv-v4 .pv-boundary-grid > * + * { padding-left: 0 !important; }
}@media (hover: hover) {
/* ---------------------------------------------------------------------------
   16. TEXT LINKS INSIDE THE HOVER SYSTEM
   ----------------------------------------------------------------------------
   Section 13 gives every `.pv-hov` a card treatment: gold border plus a faint
   gold wash. That is right for a card and wrong for a 22px-tall text link. The
   advisor contact rows (email, telephone, LinkedIn) and the globe's "View page"
   link are `a.pv-hov` too, so they were getting a background panel behind a
   single line of text.

   They carry no border, so only the wash actually showed. In the original these
   were `this.style.color='#c4a042'` - a colour change, nothing else - which is
   what they get back here.
   ------------------------------------------------------------------------ */

.pv-v4 .pv-bio-contact a.pv-hov:hover,
.pv-v4 a#pvGlobeLink:hover {
  background-color: transparent !important;
  color: var(--gold) !important;
}
}@media (hover: hover) {
.pv-v4 .pv-lightband .pv-bio-contact a.pv-hov:hover { color: #786123 !important; }
}

/* ---------------------------------------------------------------------------
   17. RELATED RESOURCES - two columns, not one
   ----------------------------------------------------------------------------
   The related-links block is a flex column, so six short links each stretch to
   the full 1060px measure - a title like "Family Office Reputation Management"
   sitting in a row with 700px of empty space after it, six times over.

   Two columns of three. Matched by structure rather than by the inline style:
   `div:has(> a.pv-hov + a.pv-hov)` is a container with at least two adjacent
   related-links as direct children, which is precisely this block and nothing
   else on the page. Single column below 760px.
   ------------------------------------------------------------------------ */

@media (min-width: 760px) {
  /* The `[style*="flex-direction:column"]` qualifier is essential. Without it
     the selector also matched resources.html's SIX other link grids - which
     have deliberate layouts of their own (1fr 1fr 1fr, 3fr 2fr) - and forced
     them all to two columns. Only the flex-column list is the related block. */
  /* both spellings: the authored attribute has no space, but any JS that
     touches element.style re-serialises it as "flex-direction: column" */
  .pv-v4 div[style*="flex-direction:column"]:has(> a.pv-hov + a.pv-hov),
  .pv-v4 div[style*="flex-direction: column"]:has(> a.pv-hov + a.pv-hov) {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    /* These 16 blocks are authored `display:flex;flex-direction:column;gap:0`.
       The inline `gap:0` shorthand outranks a plain stylesheet declaration, so
       the gap set here never applied and the cards sat edge to edge with no
       space between the columns. !important is what makes it land. 12px is the
       value the other 45 related blocks already use. */
    column-gap: 12px !important;
    row-gap: 12px !important;
  }
}

/* ---------------------------------------------------------------------------
   18. THE LAST INLINE HOVER HANDLERS
   ----------------------------------------------------------------------------
   24 links on resources.html still carried
   `onmouseover="this.querySelector('span').style.color='...'"`. They worked,
   but inline JS cannot respect the `(hover: hover)` guard, so on a phone they
   fired on tap and stuck. Converted to `.pv-spanhov`, which reproduces exactly
   what they did - the child span goes gold - and nothing more, so the links
   keep their existing borders rather than picking up the card treatment.
   `.on-light` marks the ones whose resting colour was navy.
   ------------------------------------------------------------------------ */

.pv-v4 .pv-spanhov > span { transition: color 0.25s var(--ease-ed, ease); }
@media (hover: hover) {
  /* !important because the span carries an inline `color:var(--navy)`, which an
     inline style attribute wins against any stylesheet rule without it - the
     same reason the original had to do this in JavaScript */
  .pv-v4 .pv-spanhov:hover > span { color: var(--gold) !important; }
  .pv-v4 .pv-spanhov.on-light:hover > span { color: #786123 !important; }
}

/* ---------------------------------------------------------------------------
   19. THE PRIMARY BUTTON'S HOVER
   ----------------------------------------------------------------------------
   `refine.css` has `.btn-primary:hover { background: var(--gold2) }` at (0,2,0).
   Section 2 above sets `.pv-v4 .btn-primary { background: var(--gold) }` - also
   (0,2,0), but in a stylesheet that loads later, so it won the cascade and the
   hover never showed. The button still declared a 0.35s background transition,
   which is how it looked deliberate rather than broken: a transition pointing
   at a state that could never apply.

   That silently removed the rollover from the main CTA on every dark ground,
   sitewide. It survived on the paper bands only because section 7 happened to
   write an explicit `:hover` there.

   Stated once, explicitly, for both grounds.
   ------------------------------------------------------------------------ */

@media (hover: hover) {
  .pv-v4 .btn-primary:hover {
    background: var(--gold2, #c4a042);
    border-color: var(--gold2, #c4a042);
    color: var(--navy);
  }
  .pv-v4 .pv-lightband .btn-primary:hover {
    background: #c4a042 !important;
    border-color: #c4a042 !important;
    color: #001233 !important;
  }
  /* The homepage carries `.v4 .mast__cta, .v4 .pv-nav-cta { background:
     var(--gold) !important }` from v4.css, which beat the nav CTA's hover -
     so the masthead button responded on all 98 other pages and not on the
     homepage. Re-asserted with matching weight. */
  /* v4.css also pins the hero / closing-CTA / advisors buttons with
     `background: var(--gold) !important` at (0,2,1), so their hover needs the
     same weight. Listed explicitly rather than blanket-!importanting every
     button, so the line-style CTAs keep their transparent fill. */
  .pv-v4 .pv-hero .btn-primary:hover,
  .pv-v4 .pv-cta .btn-primary:hover,
  .pv-v4 .pv-page-hero .btn-primary:hover {
    background: var(--gold2, #c4a042) !important;
    border-color: var(--gold2, #c4a042) !important;
    color: var(--navy) !important;
  }
  .pv-v4 .pv-nav-cta:hover,
  .pv-v4 .mast__cta:hover {
    background: var(--gold2, #c4a042) !important;
    border-color: var(--gold2, #c4a042) !important;
    color: var(--navy) !important;
  }
}

/* ---------------------------------------------------------------------------
   20. CARD HOVER: THE LABEL CARRIES IT
   ----------------------------------------------------------------------------
   User, on the services info cards: "having a background colour change rollover
   on these cards really doesn't look great, maybe it's just the top line of
   text that changes from dull to brighter gold?" Right, and it generalises, so
   every label card now behaves like the numeral cards already did: the hairline
   responds, the label brightens, the background never moves.

   MATCHED BY INLINE COLOUR, NOT BY POSITION. A first pass used
   `> *:first-child`, which also caught the 16.5px WHITE headings that open the
   case cards on several pages - turning a heading gold on hover is a much
   bigger move than was asked for. The gold labels all carry an inline
   `color:var(--gold)`; the headings carry no inline style at all, so the
   attribute selector separates them exactly.

   The numerals are not listed here - section 13 already lifts them from dim to
   full opacity, which is the same gesture.

   THE TWO GROUNDS ARE NOT SYMMETRICAL:
     dark  #a78831 -> #c4a042  contrast 5.69 -> 7.75, brightening IMPROVES it
     light #786123 -> #846b26  contrast 4.64 -> 3.99, brightening COSTS some
   The light-band gold sits on the AA threshold by design (section 7), so there
   is no headroom above it. #846b26 is the smallest step that reads, stays well
   clear of the 3:1 large-text floor, and applies only under the pointer.
   ------------------------------------------------------------------------ */

.pv-v4 .pv-info-card-light > [style*="color:var(--gold)"],
.pv-v4 .pv-hov > [style*="color:var(--gold)"],
.pv-v4 .pv-panel > [style*="color:var(--gold)"],
.pv-v4 .pv-fact-card > [style*="color:var(--gold)"],
.pv-v4 .pv-scenario > [style*="color:var(--gold)"],
.pv-v4 .pv-risk-card > [style*="color:var(--gold)"],
.pv-v4 .pv-lp-card > [style*="color:var(--gold)"] { transition: color 0.35s var(--ease-ed, ease); }

@media (hover: hover) {
  .pv-v4 .pv-info-card-light:hover > [style*="color:var(--gold)"],
  .pv-v4 .pv-hov:hover > [style*="color:var(--gold)"],
  .pv-v4 .pv-panel:hover > [style*="color:var(--gold)"],
  .pv-v4 .pv-fact-card:hover > [style*="color:var(--gold)"],
  .pv-v4 .pv-scenario:hover > [style*="color:var(--gold)"],
  .pv-v4 .pv-risk-card:hover > [style*="color:var(--gold)"],
  .pv-v4 .pv-lp-card:hover > [style*="color:var(--gold)"] { color: #c4a042 !important; }

  .pv-v4 .pv-lightband .pv-info-card-light:hover > [style*="color:var(--gold)"],
  .pv-v4 .pv-lightband .pv-hov:hover > [style*="color:var(--gold)"],
  .pv-v4 .pv-lightband .pv-panel:hover > [style*="color:var(--gold)"],
  .pv-v4 .pv-lightband .pv-fact-card:hover > [style*="color:var(--gold)"],
  .pv-v4 .pv-lightband .pv-scenario:hover > [style*="color:var(--gold)"],
  .pv-v4 .pv-lightband .pv-risk-card:hover > [style*="color:var(--gold)"],
  .pv-v4 .pv-lightband .pv-lp-card:hover > [style*="color:var(--gold)"] { color: #846b26 !important; }

  /* services.html sets `.pv-info-card-light:hover { background:rgba(0,18,51,0.08)
     !important }` in its own <style> block - the cold navy wash the user
     objected to. Suppressed explicitly; removing our own background was not
     enough, because the page's rule then simply won again. */
  .pv-v4 .pv-info-card-light:hover { background: transparent !important; }
}

/* ---------------------------------------------------------------------------
   21. BUTTON ROWS - separation belongs to the container, not the button
   ----------------------------------------------------------------------------
   `.btn-ghost` carried `margin-left` (0.4rem on the dark ground, 1.4rem on a
   paper band) to hold it off the solid primary beside it. That margin is part
   of the flex item's outer box, and every button row on the site is a centred
   wrap-flex, so it could not stay:

     - one line:  the trailing edge of the group is the ghost's border box, so
                  a LEFT margin centres correctly but a symmetric one pushes
                  the visible group half a margin left of centre;
     - wrapped:   the ghost is alone on its line, so its own margin pushes the
                  label half a margin off centre - the 3.2px jog between the
                  two stacked hero buttons at 390px.

   `column-gap` has neither problem: it applies strictly between items on a
   line and contributes nothing to either edge, so the group is centred on one
   line and each button is centred when stacked. The margins are now 0 and the
   same separation is restored here.

   `:has(> .btn-ghost)` is what picks out a button row - 79 of the 81 rows are
   unclassed divs carrying an inline `display:flex; gap:16px`. Matching on the
   child avoids the style attribute entirely, which matters because forcing the
   reveal state re-serialises `style` and breaks `[style*=]` selectors. The
   inline `gap` shorthand also sets column-gap, so `!important` is required to
   outrank it. Without :has() support the rows keep their 16px gap - tighter by
   6.4px, nothing breaks.
   ------------------------------------------------------------------------ */

.pv-v4 div:has(> .btn-ghost) { column-gap: 1.4rem !important; }

/* paper band: the ghost is a bare underlined label, so it needs more air */
.pv-v4 .pv-lightband div:has(> .btn-ghost) { column-gap: 2.4rem !important; }

/* the hero keeps its own wider rhythm (2.4rem gap + the old 0.4rem margin) */
.pv-v4 .pv-hero-actions:has(> .btn-ghost) { column-gap: 2.8rem !important; }

/* ---------------------------------------------------------------------------
   22. IMAGES KEEP THEIR ASPECT RATIO
   ----------------------------------------------------------------------------
   Every <img> now carries intrinsic width/height attributes so the browser can
   reserve the right box before the file arrives (CLS). Those attributes are
   presentational hints, though: where the CSS constrains WIDTH but says nothing
   about height, the hint supplies the height and the picture stretches. The
   briefing covers rendered 420x850 from a 600x850 source - 30% off aspect, and
   visibly so.

   `img` on its own is specificity (0,0,1) - it outranks the attribute hint,
   which has none, and loses to every real rule: a class that sets a height, an
   inline style, an object-fit: cover fill. So this restores the ratio for the
   images that need it and touches nothing that was already deliberate.
   ------------------------------------------------------------------------ */

img { height: auto; }

/* ---------------------------------------------------------------------------
   23. TOUCH TARGETS AND THE FOOTER MICRO-LABEL
   ----------------------------------------------------------------------------
   Measured at 390px across all 99 pages:

     - the hamburger - the only way to reach navigation on a phone - is a 32x23
       box. WCAG 2.5.8 asks for 24x24; 44x44 is the comfortable figure. It has
       no background or border, so the box can grow without showing.
     - the 13 footer links per page are 23px tall, 1px under the minimum, and
       they sit in a stack where a mis-tap lands on the neighbour. Adding 3px of
       vertical padding and taking 3px off the margin leaves the 35px pitch
       exactly as it was and makes the target 29px.
     - `.pv-fcol-title` was refined down to 0.62rem, which is 9.92px. That is
       under the 10px floor where uppercase tracked-out text stops being
       comfortable on a phone. It goes back to 0.7rem on small screens only, so
       the desktop refinement stands.
   ------------------------------------------------------------------------ */

.pv-v4 .pv-hamburger {
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
}

/* the column also carries gap:11px, so the pitch is height + margin + gap:
   23 + 12 + 11 = 46 before, 29 + 6 + 11 = 46 after. Unchanged. */
.pv-v4 .pv-flinks a { padding-block: 3px; margin-bottom: 6px; }

@media (max-width: 600px) {
  .pv-v4 .pv-fcol-title { font-size: 0.7rem; }
}

/* ---------------------------------------------------------------------------
   24. THE LAST CONTRAST BAND - 3:1 to 4.5:1 on normal-size text
   ----------------------------------------------------------------------------
   The earlier pass cleared everything below 3:1. 658 elements across the 99
   pages still sat in the band above it: legal for large text, short of AA for
   normal text. They were all muted white, gold or navy set with an alpha:

     white on navy   0.35 -> 3.14:1   0.38 -> 3.51   0.40 -> 3.77
                     0.42 -> 4.04     0.45 -> 4.48
     gold  on navy   0.80 -> 3.99     0.85 -> 4.37
     navy  on white  0.55 -> 4.17

   First attempt did it here, with `[style*="color: rgba(...)"]` overrides. That
   only reached the inline ones - 136 of 658 - because most of these values are
   set by a page's own class rules (.pv-footer-tag, .pv-nav-tel, .pv-fcol-title,
   .pv-form-fineprint, .ledger-card-date and friends), which an attribute
   selector cannot see. Chasing them class by class would have meant a rule per
   class and a new one every time a page introduced another.

   So the values were raised at SOURCE instead - 855 `color:` declarations
   across HTML and CSS in both forks - to the first alpha clearing 4.5:1 with a
   little margin: white 0.48 (4.95:1), gold 0.9 (4.78:1), navy 0.6 (4.94:1).
   Nothing else about those declarations changed, and only `color:` was touched,
   so the same rgba values used for borders and backgrounds are untouched.
   ------------------------------------------------------------------------ */

/* ---------------------------------------------------------------------------
   25. GOLD AS A FILL IS NOT GOLD AS TEXT
   ----------------------------------------------------------------------------
   Section 7 darkens `--gold` to #786123 inside a paper band so gold TEXT clears
   AA on a near-white ground. Anything using `var(--gold)` as a BACKGROUND
   inherits that darkening too, and there the logic inverts: the case-study
   filter button fills with gold and sets navy text on top, so a darker fill
   makes it worse, not better - it measured 3.11:1 against 5.47:1 on the base
   gold.

   57 elements sitewide take the darkened fill. 56 are 8-10px decorative dots
   with no text on them, where a darker mark on pale paper is if anything an
   improvement. This button is the only one carrying text, so it is the only one
   pinned back to the base gold.
   ------------------------------------------------------------------------ */

.pv-v4 .pv-lightband .cs-btn:hover,
.pv-v4 .pv-lightband .cs-btn.cs-active {
  background: #a78831;
  border-color: #a78831;
}

/* ---------------------------------------------------------------------------
   26. THE REMAINING TOUCH TARGETS
   ----------------------------------------------------------------------------
   Section 23 fixed the two that matter most - the hamburger and the 13 footer
   links every page carries. Measured again at 390px, 77 links were still under
   24px, and they fall into two kinds:

     - standalone links: advisor contact rows, ledger breadcrumbs and back
       links, the chrome-free page footers, the block links inside fact cards.
       A mis-tap there lands on a neighbour, so they are worth enlarging.
     - links inside a running sentence (.pv-form-fineprint, .pv-svc-item-body).
       WCAG 2.5.8 explicitly exempts these, and padding them would break the
       line rhythm of the paragraph they sit in. Left alone deliberately.

   Padding with a matching negative margin was the first attempt. It shifted the
   page: the advisor contact links carry an inline `margin-bottom:8px`, which
   outranks any stylesheet margin, so each one netted +5px and about.html grew
   78px. An absolutely positioned ::after has no such dependency - it is outside
   flow entirely, so the clickable area extends 6px past the link on both edges
   and the layout cannot move by construction. None of these links had a
   pseudo-element already.
   ------------------------------------------------------------------------ */

@media (max-width: 600px) {
  .pv-v4 .pv-footer-meta a,
  .pv-v4 .pv-bio-contact a,
  .pv-v4 .article-breadcrumb a,
  .pv-v4 .article-back a,
  .pv-v4 .pv-confirm-meta a,
  .pv-v4 .pv-bc-link,
  .pv-v4 .pv-footer-logo a,
  .pv-v4 .pv-fact-card a.pv-hov { position: relative; }

  .pv-v4 .pv-footer-meta a::after,
  .pv-v4 .pv-bio-contact a::after,
  .pv-v4 .article-breadcrumb a::after,
  .pv-v4 .article-back a::after,
  .pv-v4 .pv-confirm-meta a::after,
  .pv-v4 .pv-bc-link::after,
  .pv-v4 .pv-footer-logo a::after,
  .pv-v4 .pv-fact-card a.pv-hov::after {
    content: "";
    position: absolute;
    inset: -6px 0;
  }
}

/* ---------------------------------------------------------------------------
   27. A KEYBOARD FOCUS RING ON EVERY PAGE
   ----------------------------------------------------------------------------
   94 of the 99 pages define `:focus-visible { outline: 2px solid var(--gold) }`
   in their own head. The four campaign pages (the three briefings and the AI
   expertise page) do not, and each carries a form whose `.pv-input` sets
   `outline: none`. Their fields fall back to a 1px border-colour change, which
   is a thin indicator for the only pages on the site asking for a name and an
   email address.

   `.pv-v4 :focus-visible` is (0,2,0). That beats a bare `:focus-visible` and
   `.pv-input`, so it fills the gap; it ties with `.btn-primary:focus-visible`
   and loses to `.pv-nav-links a:focus-visible`, and since a page's own <style>
   block is parsed after this file, every page that already styles its focus
   keeps exactly what it had. Same colour and offset as the other 94, so this
   is the existing ring extended, not a new one.

   :focus-visible, not :focus - a mouse click on an input does not draw it.
   ------------------------------------------------------------------------ */

.pv-v4 :focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* ---------------------------------------------------------------------------
   28. THE PRESS STRIP AT MOBILE
   ----------------------------------------------------------------------------
   index.html turns the strip into a 3-column grid under 768px and shrinks the
   outlet names to 0.88rem with no horizontal padding. v4.css then styles the
   same names for the roomy single-row DESKTOP strip:

     .v4 .pv-press-outlet { font-size: 1.2rem; padding: 0.3rem 2.1rem; }

   No media query, and (0,2,0) against the page rule's (0,1,0), so it wins at
   every width. Each name kept 33.6px of padding on both sides - 67px of air
   per item - inside a 310px container. The three columns measured 153 + 185 +
   141 = 478px and the row overflowed 84px each side, so "Reuters" and
   "Citywealth" were cut off the left edge and "USA Today" and "Family Office
   Magazine" off the right. The page does not scroll sideways, so four of the
   six outlets were simply unreachable on a phone. Same at 360 and 320.

   This is the trap already described in section 3: an unmediated `.v4 x` rule
   silently outranks a page's own responsive rule. The fix restores what the
   page asked for. It loads after v4.css, so an equal-specificity rule wins.
   ------------------------------------------------------------------------ */

@media (max-width: 768px) {
  .pv-v4 .pv-press-strip { padding: 28px 24px; }
  .pv-v4 .pv-press-outlet {
    font-size: 0.88rem;
    padding: 4px 6px;
    white-space: normal;
    letter-spacing: 0.01em;
  }
}

/* ---------------------------------------------------------------------------
   29. THE HERO CUBE BELOW 768px
   ----------------------------------------------------------------------------
   The homepage does not drop the cube on small screens - it demotes it. Under
   768px `.pv-hero-visual` is hidden and the page paints the same image through
   `.pv-hero::after` as a 260x266 watermark bleeding off the bottom-right at
   opacity 0.1, still drifting on cubeFloat.

   v4.css section 7 then claims the SAME pseudo-element for the scroll cue:

     .v4 .pv-hero::after { ... width: 1px; height: clamp(48px,7vh,78px); ... }

   (0,2,0) and unmediated, against the page rule's (0,1,0) inside its media
   query - so from 767px down the cube was replaced by a 1px gold line and the
   hero lost its only visual entirely. Live 4.0 has no v4.css, which is why the
   watermark still shows there. A regression, not a design decision.

   `.pv-hero::before` was unused across all 99 pages, so both can exist: the
   cube goes back on ::after where the page put it, and the scroll cue moves to
   ::before at the same size and position. `left: auto` is needed to undo the
   cue's `left: 50%`. `.pv-hero` is homepage-only, so nothing else is touched.
   ------------------------------------------------------------------------ */

@media (max-width: 768px) {
  .pv-v4 .pv-hero::after {
    content: "";
    position: absolute;
    left: auto;
    right: -60px;
    bottom: -40px;
    width: 260px;
    height: 266px;
    background: url('/images/cube-transparent.webp') center/contain no-repeat;
    opacity: 0.1;
    animation: cubeFloat 8s ease-in-out infinite;
    transform-origin: center;
    pointer-events: none;
    z-index: 0;
  }
  .pv-v4 .pv-hero::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 1px;
    height: clamp(48px, 7vh, 78px);
    background: linear-gradient(180deg, transparent, var(--gold));
    opacity: 0.55;
    transform-origin: bottom;
    animation: v4Cue 3.6s var(--ease-ed) infinite;
    pointer-events: none;
    z-index: 1;
  }
}
@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
  .pv-v4 .pv-hero::after  { animation: none; }
  .pv-v4 .pv-hero::before { animation: none; transform: scaleY(1); opacity: 0.45; }
}

/* ---------------------------------------------------------------------------
   30. TWO MORE UNMEDIATED LAYER RULES BEATING A PAGE'S MOBILE INTENT
   ----------------------------------------------------------------------------
   An audit of all 99 pages against all three layers turned up 31 selector
   conflicts of the press-strip shape. Most are the redesign legitimately
   restyling an old page rule. Two are not.

   (a) .pv-serve-cube. index.html hides it under 768px:

         @media (max-width:768px) { .pv-serve-cube { display:none } }

       v4.css:753 forces `display:block !important` with no media query, so a
       480px crystal renders behind a 390px-wide column of body copy. The user
       asked for this cube back "as we did on the original site" - and the
       original hides it on a phone, which is also what live 4.0 still does,
       having no v4.css. Desktop keeps it; the phone gets the copy back.

   (b) Button labels. The site's own base is 0.75rem and index asks for
       0.78rem under 768px; live renders 12.5px. The v4 layers set 0.665rem on
       the homepage and 0.7rem elsewhere with no media query, so mobile CTAs
       render at 10.64px and 11.2px - below the site's own floor, inconsistent
       between pages, and on the single most important control. Restored to the
       site's 0.75rem baseline under 768px, which also makes all 99 agree.
   ------------------------------------------------------------------------ */

@media (max-width: 768px) {
  .pv-v4 .pv-serve-cube { display: none !important; }

  .pv-v4 .btn-primary,
  .pv-v4 .btn-ghost,
  .pv-v4 .pv-nav-cta { font-size: 0.75rem; }
}

/* ---------------------------------------------------------------------------
   31. REDUCED MOTION - the one animation that ignored it
   ----------------------------------------------------------------------------
   refine.css stops the cubes and the hero entrance under
   prefers-reduced-motion, and section 29 stops the mobile watermark and scroll
   cue. about.html's globe carries a scan line declared inline:

       style="...animation:pvGlobeScan 10s linear infinite;"

   Inline, so it survives every stylesheet rule that is not !important, and it
   is not in refine.css's list. It was the only thing still looping with
   reduce set - a 10s infinite motion running beside body copy, which is what
   WCAG 2.2.2 is about. Matching the animation name in the style attribute
   catches it whichever way the attribute is serialised.

   The loader's `pv-cube-spin` is deliberately left running: it is a transient
   busy indicator, and a spinner is the conventional exception.
   ------------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .pv-v4 [style*="pvGlobeScan"] { animation: none !important; }
}

/* ---------------------------------------------------------------------------
   32. PRINT
   ----------------------------------------------------------------------------
   The site had no print rules at all. Browsers do not print background colours
   unless the reader ticks "Background graphics", so a navy ground with white
   type prints as white-on-white: measured in print media, 57 of 96 text
   elements on the homepage and 45 of 76 on /services/ are light-coloured. Those
   pages came out essentially blank. The Ledger articles print acceptably
   already because they sit on a paper ground.

   Screen rendering cannot be affected by anything in here - it is all inside
   @media print. Delete the block to revert.
   ------------------------------------------------------------------------ */

@media print {
  html, body, .pv-v4 {
    background: #fff !important;
    color: #10151c !important;
  }

  /* strip every painted ground so nothing depends on background graphics */
  .pv-v4 section, .pv-v4 div, .pv-v4 header, .pv-v4 footer, .pv-v4 article,
  .pv-v4 aside, .pv-v4 main, .pv-v4 [class*="pv-"], .pv-v4 [style*="background"] {
    background-image: none !important;
    background-color: transparent !important;
    box-shadow: none !important;
  }

  /* ink for body copy, a dark tint for the gold accents so they stay distinct */
  /* The screen layer sets several colours at (0,3,0) with !important -
     .pv-v4 .pv-cta .cta-hl, .pv-v4 .pv-dark .btn-primary and friends - which
     outrank a plain `.pv-v4 h2`. Repeating the root class lifts these to
     (0,3,1) / (0,4,0) so print wins without enumerating every offender.
     The site also puts a lot of copy in bare divs, hence `div` here. */
  .pv-v4.pv-v4.pv-v4 h1, .pv-v4.pv-v4.pv-v4 h2, .pv-v4.pv-v4.pv-v4 h3,
  .pv-v4.pv-v4.pv-v4 h4, .pv-v4.pv-v4.pv-v4 h5, .pv-v4.pv-v4.pv-v4 h6,
  .pv-v4.pv-v4.pv-v4 p, .pv-v4.pv-v4.pv-v4 li, .pv-v4.pv-v4.pv-v4 span,
  .pv-v4.pv-v4.pv-v4 td, .pv-v4.pv-v4.pv-v4 th, .pv-v4.pv-v4.pv-v4 strong,
  .pv-v4.pv-v4.pv-v4 a, .pv-v4.pv-v4.pv-v4 div, .pv-v4.pv-v4.pv-v4 blockquote,
  .pv-v4.pv-v4.pv-v4 figcaption, .pv-v4.pv-v4.pv-v4 dt, .pv-v4.pv-v4.pv-v4 dd {
    color: #10151c !important;
  }
  /* the copyright year is <span id="pv-year">; an id beats any class chain */
  .pv-v4 #pv-year, .pv-v4 [id] { color: #10151c !important; }

  .pv-v4.pv-v4.pv-v4 .t-eyebrow, .pv-v4.pv-v4.pv-v4 em,
  .pv-v4.pv-v4.pv-v4 [style*="color:var(--gold)"],
  .pv-v4.pv-v4.pv-v4 [style*="color: var(--gold)"] {
    color: #5c4a14 !important;
  }

  /* a button with no fill and gold text measures about 2:1 on paper. Ink, with
     a rule round it so it still reads as a button. */
  .pv-v4.pv-v4.pv-v4 .btn-primary, .pv-v4.pv-v4.pv-v4 .btn-ghost {
    color: #10151c !important;
    border: 1px solid #10151c !important;
    padding: 0.5em 1em !important;
  }

  /* chrome and decoration that only wastes paper */
  .pv-v4 .pv-nav, .pv-v4 .pv-mobile-menu, .pv-v4 .pv-hamburger, .pv-v4 .pv-nav-cta,
  .pv-v4 .back-to-top, .pv-v4 .klaro, .pv-v4 #klaro, .pv-v4 .pv-loader,
  .pv-v4 .pv-hero-visual, .pv-v4 .pv-serve-cube, .pv-v4 .pv-advisors-cube,
  .pv-v4 .pv-page-cube, .pv-v4 .pv-press-strip, .pv-v4 .skip-nav {
    display: none !important;
  }
  .pv-v4 .pv-hero::after, .pv-v4 .pv-hero::before,
  .pv-v4 .pv-page-hero::after { display: none !important; }

  /* an external link is useless on paper without its address */
  .pv-v4 a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.82em;
    color: #4a5560;
    word-break: break-all;
  }

  /* keep blocks whole */
  .pv-v4 h1, .pv-v4 h2, .pv-v4 h3 { break-after: avoid; page-break-after: avoid; }
  .pv-v4 img, .pv-v4 figure, .pv-v4 blockquote,
  .pv-v4 .pv-panel, .pv-v4 .pv-fact-card, .pv-v4 .pv-faq-item {
    break-inside: avoid; page-break-inside: avoid;
  }
  .pv-v4 section { padding: 0.7rem 0 !important; }
  .pv-v4 [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* ---------------------------------------------------------------------------
   33. GOLD ACCENTS THE PAPER CATCH-ALL SWALLOWED
   ----------------------------------------------------------------------------
   Section 6 forces every descendant of a paper band to #3a4a5c so nothing is
   left as white-on-white, then re-asserts gold for the accents. That exception
   list was written by enumeration - .t-eyebrow, .pv-card-num, .sc-num,
   .pil-num, .adv-pillar-num - and enumeration missed four:

     .pv-anchor-side-num      32   the roman numerals on the anchor sections
     .pv-anchor-side-eyebrow  32   their kicker line
     .cs-cat                   5   case-study category labels
     .ledger-quote cite        1   the Ledger pull-quote attribution

   All four render slate on a paper band and gold everywhere else, which is why
   the numerals on due-diligence looked silver.

   OPACITY, which is the reason this is not a one-line fix. `.pv-anchor-side-num`
   rests at opacity .5 and lifts to .85 on hover. On navy that reads 2.21:1; on
   paper the light-band gold at .5 is 1.98:1 - fainter than the dark version and
   under the 3:1 floor for large text. The resting opacity is lifted to .8 on
   paper only (3.23:1), with the hover going to full (4.64:1). The dull-to-bright
   gesture survives and paper is no longer the weaker of the two.

   `.ledger-quote cite` rests at .6, which on paper is 2.31:1 against a 4.5:1
   requirement at 0.72rem, so it goes to full opacity there.
   ------------------------------------------------------------------------ */

.pv-v4 .pv-paper .pv-anchor-side-num,
.pv-v4 .pv-paper .pv-anchor-side-eyebrow,
.pv-v4 .pv-paper .cs-cat,
/* on the Ledger index .ledger-quote and .pv-paper are the SAME element, so a
   descendant combinator never matches - the compound form is needed too */
.pv-v4 .pv-paper .ledger-quote cite,
.pv-v4 .pv-paper.ledger-quote cite { color: var(--gold) !important; }

/* DIRECTION. On navy, raising opacity makes the gold brighter, so .5 -> .85
   reads as dull-to-bright. On a paper band the same move makes it DARKER, so
   it reads backwards. Brightening on a light ground has to be done with
   lightness, not opacity - and it costs contrast, because a brighter gold sits
   closer to the paper: #a78831 is 2.64:1 there and #c4a042 only 1.94:1.

   #9a7d2d is the brightest value that still clears 3:1 for large text (3.07:1).
   Same hue (44.2deg) and saturation (55%) as the brand gold - only lightness
   differs, so it reads as the same colour lifting rather than a new one.
   Rest stays at the deep #786123 (4.64:1). Opacity is left at full in both
   states; the gesture is carried entirely by lightness. */
.pv-v4 .pv-paper .pv-anchor-side-num {
  opacity: 1;
  transition: color 0.35s ease;
}
.pv-v4 .pv-paper .pv-anchor-section:hover .pv-anchor-side-num {
  color: #9a7d2d !important;
}

.pv-v4 .pv-paper .ledger-quote cite,
.pv-v4 .pv-paper.ledger-quote cite { opacity: 1; }

/* ---------------------------------------------------------------------------
   34. THE NARROW CONTAINERS
   ----------------------------------------------------------------------------
   Measured every section container on all 99 pages. The site norm is 1140px,
   and 24 containers across 13 pages carry an inline max-width override:

     FAQ content sections      1140 on 61 pages   780 on 10   800 on 1
     Related link sections     1140 on 61 pages   720 on  8   780 on 1

   The narrow ones are outliers, and the effect is not just a narrower measure -
   the whole section steps inward. On /geo-reputation-management/ the FAQ text
   starts 180px further in than every section above it (left edge 363 vs 183),
   which is what reads as odd.

   The 61 standard pages do this:

       <div class="container">                          1140, heading centred
         <div style="max-width:860px;margin:0 auto;">   the Q&A, 860 centred

   So the fix is not simply to delete the override - the narrow pages have no
   inner wrapper, their content fills the container, and widening alone would
   give a 1060px measure (~132 characters), WIDER than the standard 860. The
   container goes to 1140 and the Q&A list is constrained to 860 centred, which
   reproduces the standard layout exactly.

   `.pv-lp-form-section` is deliberately excluded - that is the campaign landing
   page's form column, where a narrow measure is correct.

   REVISED. The first version of this rule widened every narrow container, which
   was too broad. Of the 24, only 11 are FAQ sections; the other 12 are prose
   sections deliberately set to 720/780/800px for a readable measure. Widening
   those to 1140 left their inner copy - which keeps its own max-width:680px -
   stranded in the middle of a 1060px field, e.g. the Google Suppression
   Services block on /push-down-search-results/. Prose keeps its designed
   width; only the Q&A sections widen, which is what was actually reported.
   ------------------------------------------------------------------------ */

.pv-v4 .pv-faq-section > .container[style*="max-width"] {
  max-width: 1140px !important;
}

/* the site's own Q&A measure, matching the 61 pages that already do this */
.pv-v4 .pv-faq-section .pv-faq-list {
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
}

/* ---------------------------------------------------------------------------
   35. FOUR CARDS IN A THREE-COLUMN GRID
   ----------------------------------------------------------------------------
   `.pv-cards-grid` is repeat(3, 1fr). Card counts across the site:

       6 cards / 3 cols   14   two clean rows
       3 cards / 3 cols    5   one clean row
       4 cards / 2 cols    3   google-removals, online-reputation-repair,
                               push-down-search-results - already 2x2
       4 cards / 3 cols    1   geo-reputation-management  <- 3 + 1, the orphan

   So 2x2 is already the site's convention for four cards and this is the lone
   exception. Four across was the alternative but each card would drop to about
   232px, and these carry a numeral, a title and a paragraph.

   `:has(> :nth-child(4):last-child)` matches a grid whose fourth child is also
   its last - exactly four - so the 3- and 6-card grids are untouched and any
   future four-card grid picks this up automatically. Without :has() support the
   grid simply stays as it is today.
   ------------------------------------------------------------------------ */

.pv-v4 .pv-cards-grid:has(> :nth-child(4):last-child) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* ===========================================================================
   36. CARD GRIDS THAT WRAP
   refine.css gives every .pv-card after the first a left divider. That is
   correct for one row; once the grid wraps, the card opening each new row
   gets a divider with nothing to its left and loses its flush-left alignment
   with the rest of the page. refine.js measures the rows and tags the openers
   with .pv-row-start, because the column count is 1, 2 or 3 depending on the
   grid and the viewport and so cannot be pinned to a static :nth-child().
   Measured before the fix: 23 stray dividers across 19 pages.
   =========================================================================== */
@media (min-width: 901px) {
  .pv-v4 .pv-cards-grid > .pv-card.pv-row-start {
    border-left: 0;
    padding-left: 0;
  }
}

/* ===========================================================================
   37. TWO SECTIONS OF THE SAME COLOUR NEED A LINE BETWEEN THEM
   Measured all 99 pages: of the section joins where the background does not
   change, 116 carry a 1px gold hairline and 30 do not - so the hairline is the
   convention and those 30 are omissions. Without it the two sections read as
   one long block, which is what happens to the quote and the Q&A on
   /family-office-reputation-management/.

   0.25 alpha is reserved for the CTA boundary; 0.12-0.15 is the value used for
   ordinary joins, so this takes the middle of that. refine.js tags the joins,
   because the same class pair occurs both with and without a colour change and
   only the computed background can tell them apart.
   =========================================================================== */
.pv-v4 section.pv-abut {
  border-top: 1px solid rgba(167, 136, 49, 0.15);
}

/* ===========================================================================
   38. A NAVY CARD LEFT ON A PAPER BAND
   Section 12 turned some navy sections into paper bands to break up long runs
   of one colour. On /private-client-reputation-management/ that band still
   holds `.pv-fact-card-navy`, whose hover paints rgba(0,18,51,0.6) - a 60%
   navy wash. On navy that is a slight lift; on paper it drops a dark block
   under the band's dark slate text, about 1.6:1. Hover states are not covered
   by the contrast sweep, which is why this survived to manual review.

   The paper bands already answer hover with gold rather than a wash, so this
   follows that: a faint gold tint and the light-band border.
   =========================================================================== */
@media (hover: hover) {
  .pv-v4 .pv-lightband .pv-fact-card-navy:hover,
  .pv-v4 .pv-paper .pv-fact-card-navy:hover {
    background: rgba(167, 136, 49, 0.06) !important;
    border-color: rgba(120, 97, 35, 0.45) !important;
  }
}

/* ===========================================================================
   39. THE FAQ HERO'S CATEGORY BUTTONS
   /reputation-management-faqs/ centres its hero: the eyebrow and h1 both sit
   dead centre. The category row below them does not, because `.pv-faq-nav` is
   `display:flex` with no justify-content, and the hero's `text-align:center`
   does not reach flex items. The row ran 190-1097 inside a 190-1250 field,
   leaving 153px of dead space on the right.
   =========================================================================== */
.pv-v4 .pv-faq-nav {
  justify-content: center;
}

/* ===========================================================================
   40. THE LINE BUTTONS ON A PHONE
   index.html carries this from the 4.0 build:

       @media (max-width: 480px) {
         .btn-primary, .btn-ghost, .btn-blue { width: 100%; text-align: center; }
       }

   Full width is the right mobile pattern for a button that is a box. But
   v4.css section 3 redesigned the secondary as "a rule with a label sitting on
   it" - border:0, padding 1.35em 0, and an ::after at left:0/right:0 drawing
   the hairline. Stretching that stretches the RULE, so a 116px label sat in
   the middle of a 350px line. The two changes were made at different times and
   nobody had put them together on a phone.

   Measured at 390px before the fix - box vs label:
     Our Services      296 / 120     All Services      350 / 116
     Explore Services  350 / 158     About Pavesen     298 / 134

   Above 480px they already shrink-wrap and the rule matches the label, which
   is the intended look; this just restores that below 480 too. Scoped to `.v4`
   because the homepage is the only page carrying stretched line buttons - the
   other four pages with the width:100% rule use boxed buttons, where full
   width is correct and must stay.
   =========================================================================== */
@media (max-width: 480px) {
  .v4 .btn-ghost,
  .v4 .pv-serve .btn-primary,
  .v4 .pv-damage .btn-primary,
  .v4 .pv-advisors .btn-primary {
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
  }
  /* the paper spreads keep a solid gold box - that one stays full width */
  .v4 .v4-spread .btn-primary { width: 100%; }
}