/* ============================================================================
   Pavesen v2 - "Editorial" refinement layer
   ----------------------------------------------------------------------------
   Loaded LAST in <head>, after every page's inline <style>, so it wins the
   cascade on equal specificity without needing !important (used only where an
   inline style= attribute has to be beaten).

   Brief: same palette, same logo, same graphics, same copy. What changes is
   the CRAFT - the tells that make a page read as generated:

     1. filled cards + gold left-bars      -> hairline-ruled editorial columns
     2. hover lift (translateY + shadow)   -> flat colour transitions
     3. rounded corners on a prestige site -> square corners, clean plates
     4. one uniform 80px section rhythm    -> varied, breathing scale
     5. eyebrow + 48px gold bar, x453      -> tracked micro-caps + diamond rule
     6. lining figures, tight body copy    -> old-style figures, editorial type
     7. floating AND rotating hero object  -> drift only, original tempo
     8. flat single-tone navy              -> deeper tonal grounds

   Nothing here introduces a new hue. Every colour is the existing navy, the
   existing gold, or a tonal step between them.
   ============================================================================ */

:root {
  /* tonal steps derived from the existing palette - no new hues */
  --abyss:      #00070f;   /* deepest ground - CTA band, press strip */
  --navy-deep:  #000d24;   /* the mid bands, deepened from #00102d      */
  --navy-lift:  #011a3a;   /* the one band that lifts, for contrast     */
  --ink:        #00070f;   /* alias kept: existing rules reference it   */
  --navy-mid:   #011a3a;                    /* existing lift tone, formalised   */
  --gold-soft:  #c9ad63;                    /* gold at reading weight on dark   */
  --gold-ghost: rgba(167,136,49,0.42);

  /* hairlines - the single most important token in this layer */
  --rule-dark:   rgba(167,136,49,0.20);
  --rule-dark-2: rgba(255,255,255,0.09);
  --rule-light:  rgba(0,18,51,0.13);
  --rule-light-2:rgba(0,18,51,0.08);

  /* vertical rhythm */
  --pad-sec:   clamp(4.5rem, 9vw, 8rem);
  --pad-tight: clamp(3rem, 6vw, 5rem);

  --ease-ed: cubic-bezier(0.22, 0.61, 0.24, 1);
}

/* ---------------------------------------------------------------------------
   1. TYPE - old-style figures, balanced wrapping, editorial measure
   ------------------------------------------------------------------------ */

body {
  font-size: 16.5px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.t-hero, .t-h1, .t-h2, .cta-hl, .pv-faq-q, .sc-title, .pv-pull-quote,
.sc-num, .pil-num, .pv-card-num, .adv-pillar-num {
  font-feature-settings: "onum" 1, "liga" 1, "dlig" 1, "kern" 1;
  font-variant-numeric: oldstyle-nums;
}

.t-hero, .t-h1 {
  line-height: 1.06;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.t-h2 {
  line-height: 1.14;
  letter-spacing: -0.012em;
  text-wrap: balance;
}
.t-hero em, .t-h1 em, .t-h2 em, .cta-hl em {
  font-style: italic;
  font-weight: 300;
}

/* Body copy: a touch larger, a touch tighter. Reads set, not generated. */
.t-body, .t-body-dark, .pv-faq-a, .pv-card-body, .pv-svc-item-body {
  font-size: 1.005rem;
  line-height: 1.78;
}
.t-body p + p, .t-body-dark p + p { margin-top: 1.15rem; }

/* Eyebrows: smaller, far wider tracking, lighter weight, leading hairline.
   This one change re-reads 596 instances as editorial rather than UI. */
.t-eyebrow {
  /* !important: several eyebrows carry an inline display:block that would
     otherwise drop the hairline */
  display: inline-flex !important;
  align-items: center;
  gap: 0.95em;
  font-size: 0.685rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}
.t-eyebrow::before {
  content: "";
  width: 34px;
  height: 1px;
  flex: none;
  background: currentColor;
  opacity: 0.75;
}
/* centred contexts: hairline both sides so it reads as a rule, not an arrow */
.pv-intro-inner .t-eyebrow, .pv-advisors .t-eyebrow, .pv-cta .t-eyebrow,
.pv-page-hero .t-eyebrow, .center .t-eyebrow, .t-eyebrow.center {
  justify-content: center;
}
.pv-intro-inner .t-eyebrow::after, .pv-advisors .t-eyebrow::after,
.pv-cta .t-eyebrow::after, .pv-page-hero .t-eyebrow::after,
.center .t-eyebrow::after, .t-eyebrow.center::after {
  content: "";
  width: 34px;
  height: 1px;
  flex: none;
  background: currentColor;
  opacity: 0.75;
}
/* the hero eyebrow already carries its own drawn line - don't double it */
.pv-hero-eyebrow .t-eyebrow::before { display: none; }

/* The 48px gold bar appears 453 times. Kept, but redrawn as an ornament:
   a hairline with a small rotated diamond at its head. */
.gold-rule {
  position: relative;
  width: 68px;
  height: 1px;
  background: var(--gold-ghost);
  margin: 20px 0 28px;
  overflow: visible;
}
.gold-rule::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 5px;
  height: 5px;
  background: var(--gold);
  transform: translate(-1px, -50%) rotate(45deg);
}
.gold-rule.center::before { left: 50%; transform: translate(-50%, -50%) rotate(45deg); }
.gold-rule.center { background: linear-gradient(90deg, transparent, var(--gold-ghost) 22%, var(--gold-ghost) 78%, transparent); width: 96px; }

/* The eyebrow now carries its own hairline, so the bar sitting directly under
   it is a doubled rule. Drop it and let the eyebrow hold the space; the rule
   that follows a HEADING is kept, where it reads as a deliberate ornament. */
.t-eyebrow + .gold-rule { display: none; }
.t-eyebrow:has(+ .gold-rule) { margin-bottom: 1.45rem; }
.t-h2 + .gold-rule, .t-h1 + .gold-rule { margin-top: 1.6rem; margin-bottom: 2.2rem; }
/* with the bar gone, the heading needs to hold its own space above the copy */
.t-h1 + div, .t-h1 + p, .t-h2 + div, .t-h2 + p { margin-top: 1.7rem; }

/* ---------------------------------------------------------------------------
   2. SURFACES - tonal depth, flat and clean
   ------------------------------------------------------------------------ */

/* No grain. The base sheet ships a fixed noise overlay on body::before; it is
   switched off here rather than edited, so the original page CSS is untouched
   and this is a one-line revert if it is ever wanted back. */
body::before { display: none !important; }

/* varied vertical rhythm instead of a uniform 80px everywhere */
.pv-section { padding: var(--pad-sec) 0; }
.pv-cta { padding: clamp(5.5rem, 11vw, 9rem) 0 clamp(4.5rem, 9vw, 7.5rem); }

/* hairline seams between bands - a set page, not stacked blocks */
.pv-intro, .pv-approach { border-top: 1px solid var(--rule-light-2); }
.pv-serve, .pv-damage, .pv-advisors, .pv-dark { border-top: 1px solid var(--rule-dark); }

/* deepen the darkest bands so the navy has tonal range */
.pv-cta { background: var(--navy); }
.pv-damage { background: var(--navy-lift); }

/* ---------------------------------------------------------------------------
   3. BUTTONS - square, no lift. The translateY(-2px)+shadow hover is the
      single most recognisable generated micro-interaction on the web.
   ------------------------------------------------------------------------ */

.btn-primary, .btn-ghost, .btn-blue {
  border-radius: 0;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  font-weight: 500;
  padding: 1.15em 2.5em;
  transition: background 0.35s var(--ease-ed),
              color 0.35s var(--ease-ed),
              border-color 0.35s var(--ease-ed);
}
.btn-primary:hover, .btn-ghost:hover, .btn-blue:hover {
  transform: none;
  box-shadow: none;
}
.btn-primary { border: 1px solid var(--gold); }
.btn-primary:hover { background: var(--gold2); border-color: var(--gold2); }
.btn-ghost { border-color: var(--gold-ghost); color: var(--gold-soft); }
.btn-ghost:hover { background: var(--gold); border-color: var(--gold); color: var(--navy); }
.btn-blue:hover { transform: none; }

/* ---------------------------------------------------------------------------
   4. CARDS -> HAIRLINE COLUMNS
      Filled panel + 1px border + 2px gold left bar + hover-fill is the house
      style of every generated page on the internet. Replaced with ruled
      editorial columns: no fill, no box, one hairline, air.
   ------------------------------------------------------------------------ */

/* --- "Who we serve" 2-up (homepage) --- */
.pv-serve-cards {
  gap: 0 clamp(2rem, 4.5vw, 4rem);
  margin-top: clamp(2.5rem, 5vw, 3.75rem);
}
.pv-serve-card {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--rule-dark);
  padding: 2.6rem 0 2.9rem;
  transition: none;
}
.pv-serve-card:hover { background: transparent; border-color: var(--gold-ghost); }
.pv-serve-card::before { display: none; }
/* column divider on the right-hand cell */
@media (min-width: 641px) {
  .pv-serve-card:nth-child(even) {
    border-left: 1px solid var(--rule-dark);
    padding-left: clamp(2rem, 4.5vw, 4rem);
  }
}
/* the "Learn more ->" tag: static, quiet, in the flow - not a hover reveal */
.pv-serve-card::after {
  position: static;
  display: block;
  opacity: 0.55;
  margin-top: 1.5rem;
  font-size: 0.655rem;
  letter-spacing: 0.24em;
  color: var(--gold-soft);
  transition: opacity 0.35s var(--ease-ed), letter-spacing 0.45s var(--ease-ed);
}
.pv-serve-card:hover::after { opacity: 1; letter-spacing: 0.3em; }
.sc-num {
  font-size: 1.55rem;
  font-style: italic;
  color: var(--gold);
  opacity: 0.85;
  margin-bottom: 1.1rem;
  letter-spacing: 0.02em;
}
.sc-title {
  font-size: 1.62rem;
  font-weight: 400;
  line-height: 1.2;
  margin-bottom: 0.95rem;
  letter-spacing: -0.005em;
}
.pv-serve-card:hover .sc-title { color: var(--gold-soft); }
.sc-title { transition: color 0.35s var(--ease-ed); }

/* --- generic 3-up card grid (used across ~139 instances) --- */
.pv-cards-grid {
  gap: 0 clamp(1.8rem, 3.5vw, 3.2rem);
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}
.pv-card {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--rule-dark);
  padding: 2.4rem 0 2.6rem;
  transition: border-color 0.35s var(--ease-ed);
}
.pv-card:hover { background: transparent; border-top-color: var(--gold-ghost); }
.pv-card::before { display: none; }
@media (min-width: 901px) {
  .pv-cards-grid > .pv-card:not(:first-child) {
    border-left: 1px solid var(--rule-dark);
    padding-left: clamp(1.8rem, 3.5vw, 3.2rem);
  }
}
.pv-card-num {
  font-size: 1.5rem;
  font-style: italic;
  opacity: 0.85;
  margin-bottom: 0.9rem;
}
.pv-card-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.42rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.25;
  margin-bottom: 0.8rem;
}

/* --- inline-styled fact / info panels (need !important - inline style attr) --- */
.pv-info-card-dark, .pv-fact-card {
  background: transparent !important;
  border: 0 !important;
  border-top: 1px solid var(--rule-dark) !important;
  border-left: 0 !important;
  padding: 2rem 0 2.1rem !important;
  transition: border-color 0.35s var(--ease-ed) !important;
}
.pv-info-card-dark:hover, .pv-fact-card:hover {
  background: transparent !important;
  border-top-color: var(--gold-ghost) !important;
}

/* --- normalised panels ---------------------------------------------------
   287 elements across the site were filled cards drawn with inline
   background + 1px border + an onmouseover handler. normalise-inline.py
   converted them to .pv-panel / .pv-hov; they are drawn here instead, in the
   same hairline language as everything else. This is what stops one boxed
   card appearing in the middle of a run of ruled rows. */
.pv-panel {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--rule-dark);
  padding: 2.1rem 0 2.2rem;
  transition: border-color 0.35s var(--ease-ed);
}
.pv-panel:hover { border-top-color: var(--gold-ghost); }
/* panels sitting on a light band need the light hairline */
.pv-intro .pv-panel, .pv-approach .pv-panel,
.on-light .pv-panel, .pv-light .pv-panel { border-top-color: var(--rule-light); }
.pv-intro .pv-panel:hover, .pv-approach .pv-panel:hover,
.on-light .pv-panel:hover, .pv-light .pv-panel:hover { border-top-color: rgba(167,136,49,0.55); }

/* where a panel is a link, give it the same quiet affordance as a serve card */
a.pv-panel { display: block; text-decoration: none; color: inherit; }
a.pv-panel .pv-card-title, a.pv-panel .sc-title { transition: color 0.35s var(--ease-ed); }
a.pv-panel:hover .pv-card-title, a.pv-panel:hover .sc-title { color: var(--gold-soft); }

/* panels that were laid out as flex columns keep their rhythm */
.pv-panel[style*="flex-direction"] { gap: 0.85rem; }

/* ruled rows that only ever had an inline hover tint */
.pv-hov { transition: border-color 0.35s var(--ease-ed), color 0.35s var(--ease-ed); }
a.pv-hov:hover { color: inherit; }

/* --- case-study register (case-studies.html) -----------------------------
   .cs-card was a filled grid with per-category background tints that differ
   by a few percent of alpha over navy - invisible as coding, but enough to
   make the grid look patchy. Same hairline treatment; the gold .cs-cat label
   already carries the category far more legibly than the tint did. */
.cs-grid { gap: 0 clamp(1.8rem, 3.5vw, 3rem); }
.cs-card,
.cs-card[data-category] {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--rule-dark);
  padding: 2.2rem 0 2.4rem;
  gap: 0.95rem;
  transition: border-color 0.35s var(--ease-ed);
}
.cs-card:hover, .cs-card[data-category]:hover {
  background: transparent;
  border-top-color: var(--gold-ghost);
}
@media (min-width: 901px) {
  .cs-grid > .cs-card:not(:nth-child(3n + 1)) {
    border-left: 1px solid var(--rule-dark);
    padding-left: clamp(1.8rem, 3.5vw, 3rem);
  }
}
.cs-cat { font-size: 0.635rem; font-weight: 500; letter-spacing: 0.24em; }
.cs-title { font-size: 1.42rem; font-weight: 500; line-height: 1.25; }
.cs-quote { font-size: 1.02rem; line-height: 1.75; }
.cs-btn {
  border-radius: 0;
  font-size: 0.665rem;
  letter-spacing: 0.18em;
  padding: 0.85em 1.4em;
  border-color: var(--rule-dark);
  transition: background 0.3s var(--ease-ed), color 0.3s var(--ease-ed), border-color 0.3s var(--ease-ed);
}
.cs-btn[data-filter].cs-active { background: var(--gold); color: var(--navy); border-color: var(--gold); }

/* --- homepage pillar strip: drop the boxed dividers for hairlines --- */
.pv-stats {
  border-top: 1px solid var(--rule-dark);
  border-bottom: 1px solid var(--rule-dark);
  padding: 0;
}
.pv-pillar-box {
  padding: clamp(2.2rem, 4vw, 3rem) clamp(1.6rem, 3vw, 2.4rem) clamp(2.2rem, 4vw, 3rem) 0 !important;
  border-right: 0 !important;
}
@media (min-width: 769px) {
  .pv-pillar-box + .pv-pillar-box {
    border-left: 1px solid var(--rule-dark-2) !important;
    padding-left: clamp(1.6rem, 3vw, 2.4rem) !important;
  }
}

/* --- advisor stat trio: unbox it --- */
.adv-pillars {
  border: 0;
  border-top: 1px solid var(--rule-dark);
  gap: 0;
  margin-top: clamp(3rem, 6vw, 4.5rem);
}
.adv-pillar {
  padding: clamp(2rem, 4vw, 2.8rem) 1.5rem;
  border-right: 0;
}
@media (min-width: 601px) {
  .adv-pillar + .adv-pillar { border-left: 1px solid var(--rule-dark-2); }
}
.adv-pillar-num {
  font-size: 3rem;
  font-weight: 300;
  line-height: 1;
  margin-bottom: 0.7rem;
  color: var(--gold-soft);
}
.adv-pillar-lbl {
  font-size: 0.645rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  line-height: 1.8;
}

/* --- approach pillars: hairline list, larger serif numeral --- */
.approach-pil {
  gap: clamp(1.4rem, 2.5vw, 2.2rem);
  padding: clamp(1.8rem, 3vw, 2.4rem) 0;
  border-bottom: 1px solid var(--rule-dark-2);
}
.pv-approach .approach-pil { border-bottom: 1px solid var(--rule-light-2) !important; }
.pil-num {
  font-size: 1.5rem;
  font-style: italic;
  opacity: 0.8;
  min-width: 2.1rem;
  padding-top: 0.15rem;
}
.approach-pil:hover .pil-num { opacity: 1; }
.pil-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.35rem;
  font-weight: 500;
  letter-spacing: 0 !important;
  text-transform: none;
  line-height: 1.25;
  margin-bottom: 0.6rem;
}

/* --- service bullet lists: the round gold dot -> a rotated diamond tick --- */
.pv-svc-dot {
  width: 7px;
  height: 7px;
  min-width: 7px;
  border-radius: 0;
  transform: rotate(45deg);
  margin-top: 11px;
}
.pv-svc-item { gap: 1.1rem; margin-bottom: 1.9rem; }
.pv-svc-item-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.24rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  margin-bottom: 0.35rem;
}

/* --- small uppercase kickers inside info panels (inline-styled) --- */
.pv-info-card-dark > div:first-child,
.damage-pt .dp-title {
  font-size: 0.655rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.26em !important;
  margin-bottom: 0.85rem !important;
}

/* ---------------------------------------------------------------------------
   5. IMAGERY - square it, frame it with corner ticks
   ------------------------------------------------------------------------ */

.pv-img-wrap, .pv-img-wrap img,
.approach-img-wrap, .approach-img-wrap img,
.dmg-img-wrap, .dmg-img-wrap img {
  border-radius: 0 !important;
}
/* No added corner ticks here: these composites already carry their own baked-in
   offset frame and crosshair grid, and a second frame just fights them. The
   tick device is reserved for the hero, where the plate is bare. */
.pv-img-wrap, .approach-img-wrap, .dmg-img-wrap { position: relative; }

/* ---------------------------------------------------------------------------
   6. NAVIGATION
   ------------------------------------------------------------------------ */

.pv-nav {
  /* No band of its own: the masthead sits ON the hero so there is no seam
     across the top of the page. It only takes a surface once you scroll,
     which is also when it needs one for legibility. */
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom: 1px solid transparent;
  transition: background 0.45s var(--ease-ed), border-color 0.45s var(--ease-ed),
              -webkit-backdrop-filter 0.45s var(--ease-ed), backdrop-filter 0.45s var(--ease-ed);
}
.pv-nav.scrolled {
  background: rgba(0, 12, 31, 0.94);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  backdrop-filter: saturate(150%) blur(14px);
  border-bottom-color: var(--rule-dark);
}
.pv-nav-links a {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  color: rgba(255, 255, 255, 0.66);
}
.pv-nav-links a:hover, .pv-nav-links a.active { color: var(--gold-soft); }
/* the width-growing underline is a generated-UI staple - use a fixed tick */
.pv-nav-links a::after {
  bottom: -7px;
  left: 50%;
  width: 0;
  transition: width 0.35s var(--ease-ed), left 0.35s var(--ease-ed);
}
.pv-nav-links a:hover::after, .pv-nav-links a.active::after { width: 14px; left: calc(50% - 7px); }
.pv-nav-cta {
  border-radius: 0;
  font-size: 0.665rem;
  letter-spacing: 0.2em;
  padding: 0.95em 1.75em;
}
.pv-nav-tel { letter-spacing: 0.06em !important; font-size: 0.775rem !important; }

/* ---------------------------------------------------------------------------
   7. HERO
   ------------------------------------------------------------------------ */

/* Deeper ground, so the cube sits in darkness rather than on flat mid-navy.
   No corner frame - the plate is left clean. */
.pv-hero {
  background: radial-gradient(96% 82% at 76% 32%, rgba(167,136,49,0.10), transparent 60%),
              linear-gradient(152deg, #001233 0%, #000913 62%, var(--abyss) 100%);
}
.pv-hero-sub {
  font-size: 1.055rem;
  line-height: 1.72;
  color: rgba(245, 243, 239, 0.7);
  max-width: 46ch;
}
.pv-hero-actions { gap: 1rem 1.4rem; }

/* the cube: kept (brand graphic). The original floated AND rotated at 8s; the
   rotation is the generic part, so it is gone. The tempo is not - that bob is
   what gives the plate life, and slowing it turned the cube into furniture.
   Same 8s, same three-stop rhythm as the original, translation only. */
.pv-hero-cube {
  animation: pvDrift 8s ease-in-out infinite;
  filter: drop-shadow(0 30px 70px rgba(0, 0, 0, 0.45))
          drop-shadow(0 0 90px rgba(167, 136, 49, 0.1));
}
@keyframes pvDrift {
  0%, 100% { transform: translateY(0); }
  33%      { transform: translateY(-18px); }
  66%      { transform: translateY(-8px); }
}
/* the ghosted background cubes drift slower than the hero - they are texture */
.pv-page-cube, .pv-serve-cube, .pv-advisors-cube { animation: pvDrift 14s ease-in-out infinite; }

/* interior page hero */
.pv-page-hero {
  background: radial-gradient(110% 120% at 50% 0%, rgba(167,136,49,0.07), transparent 60%),
              linear-gradient(170deg, #001233 0%, var(--abyss) 100%);
}
.pv-page-hero::after {
  background: linear-gradient(90deg, transparent, var(--gold-ghost) 30%, var(--gold-ghost) 70%, transparent);
}

/* ---------------------------------------------------------------------------
   8. PULL QUOTES + FAQ
   ------------------------------------------------------------------------ */

.pv-pull-quote {
  font-size: clamp(1.35rem, 2.3vw, 1.95rem);
  line-height: 1.42;
  letter-spacing: -0.005em;
}
.pv-quote-source {
  font-size: 0.665rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  color: var(--gold-ghost);
}

.pv-faq-item { padding: clamp(1.7rem, 3vw, 2.3rem) 0; border-bottom: 1px solid var(--rule-dark); }
.pv-faq-q {
  /* size left to each page: 1.62rem here forced the questions up from 1.55rem
     and wrapped 12 of them onto a second line holding one or two words */
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.005em;
  margin-bottom: 0.9rem;
}

/* ---------------------------------------------------------------------------
   9. CTA BAND + FOOTER + PRESS STRIP
   ------------------------------------------------------------------------ */

.pv-cta::after { background: linear-gradient(90deg, transparent, var(--gold-ghost) 25%, var(--gold-ghost) 75%, transparent); }
.pv-cta::before { width: 900px; height: 520px; background: radial-gradient(ellipse, rgba(167,136,49,0.07) 0%, transparent 66%); }
.cta-hl {
  /* size left to each page - same trap as .t-h2 and .pv-faq-q: this rule loads
     after the pages' own <style> block and at equal specificity, so a bigger
     value here silently overrode every closing headline (43.2px -> 46.4px) and
     wrapped five of them onto a second line holding two or three words */
  line-height: 1.22;
  letter-spacing: -0.012em;
  margin: 1.4rem auto 1.1rem;
}
.cta-sub { font-size: 1.005rem; line-height: 1.75; margin-bottom: clamp(2.6rem, 5vw, 3.4rem); }

.pv-press-strip {
  background: var(--navy);
  border-top: 1px solid var(--rule-dark);
  border-bottom: 0;
  padding: clamp(2.2rem, 4vw, 2.9rem) 40px;
}
.pv-press-eyebrow { font-size: 0.6rem; font-weight: 500; letter-spacing: 0.3em; margin-bottom: 1.5rem; color: rgba(167,136,49,0.9); }
.pv-press-outlet { font-size: 1.1rem; color: rgba(255, 255, 255, 0.5); }

.pv-footer { border-top: 1px solid var(--rule-dark); padding: clamp(3.5rem, 7vw, 5.5rem) 0 2.5rem; }
.pv-fcol-title { font-size: 0.62rem; font-weight: 500; letter-spacing: 0.28em; margin-bottom: 1.4rem; }
.pv-flinks a { font-size: 0.845rem; color: rgba(255, 255, 255, 0.5); transition: color 0.3s var(--ease-ed); }
.pv-flinks a:hover { color: var(--gold-soft); }
.pv-footer-tag { font-size: 0.85rem; line-height: 1.75; }
.pv-footer-btm { border-top: 1px solid var(--rule-dark-2); padding-top: 1.9rem; }
.pv-social-links a {
  border-radius: 0;
  border-color: var(--rule-dark);
  transition: color 0.3s var(--ease-ed), border-color 0.3s var(--ease-ed);
}
.pv-social-links a:hover { transform: none; border-color: var(--gold); color: var(--gold); }
.pv-copyright { font-size: 0.735rem; letter-spacing: 0.05em; }

/* ---------------------------------------------------------------------------
   10. MOTION - real scroll reveal, slow and restrained.
       The original ships a 100ms timer that force-reveals everything, so the
       page currently has no entrance at all. This gives it one.
   ------------------------------------------------------------------------ */

/* Keyed off .pv-in, not the original .revealed, so the page's own 100ms
   force-reveal timer stays inert instead of firing everything at once. */
html.pv-reveal-on [data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.95s var(--ease-ed), transform 0.95s var(--ease-ed);
}
html.pv-reveal-on [data-reveal].pv-in { opacity: 1; transform: none; }
html.pv-reveal-on [data-reveal-delay="1"] { transition-delay: 0.09s; }
html.pv-reveal-on [data-reveal-delay="2"] { transition-delay: 0.18s; }
html.pv-reveal-on [data-reveal-delay="3"] { transition-delay: 0.27s; }

/* --- entrance overlay ---------------------------------------------------
   Restored to the original spinning cube. The only thing kept from the
   restyle is the background colour, matched to --ground so the overlay does
   not flash a different navy before the page beneath appears. Everything
   else comes from css/page-transition.css, untouched. */
.pv-loader { background: var(--ground) !important; }

@media (prefers-reduced-motion: reduce) {
  html.pv-reveal-on [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .pv-hero-cube, .pv-page-cube, .pv-serve-cube, .pv-advisors-cube { animation: none !important; }
  .pv-hero-eyebrow, .pv-hero-headline, .pv-hero-sub, .pv-hero-actions { animation: none !important; opacity: 1 !important; transform: none !important; }
  html { scroll-behavior: auto; }
}

/* ---------------------------------------------------------------------------
   11. RESPONSIVE CORRECTIONS for the hairline treatment
   ------------------------------------------------------------------------ */

@media (max-width: 900px) {
  .pv-cards-grid > .pv-card { border-left: 0; padding-left: 0; }
}
@media (max-width: 768px) {
  .pv-pillar-box {
    border-left: 0 !important;
    padding: 1.9rem 0 !important;
    border-bottom: 1px solid var(--rule-dark-2) !important;
  }
  .pv-pillar-box:last-child { border-bottom: 0 !important; }
  .pv-serve-card { padding: 2.1rem 0 2.3rem; }
}
@media (max-width: 640px) {
  .pv-serve-cards { gap: 0; }
  .pv-serve-card:nth-child(even) { border-left: 0; padding-left: 0; }
}
@media (max-width: 480px) {
  /* Inherited bug: the base sheet declares `repeat(2,1fr) !important` at
     <=768px AFTER its own `1fr !important` at <=480px, so the later rule wins
     and phones get two 175px columns. This layer loads last, so it lands. */
  .pv-stats-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 600px) {
  .adv-pillar + .adv-pillar { border-left: 0; border-top: 1px solid var(--rule-dark-2); }
  .adv-pillars .adv-pillar { border-bottom: 0; }
}


/* ---------------------------------------------------------------------------
   12. TONAL GROUNDS
   Deeper navy grounds carried over from the v3 study. Backgrounds only - every
   text, gold and rule value stays exactly as it is above, so nothing about
   legibility changes except that it improves against the darker ground.
   These bands are set with inline style attributes across the site, so they
   can only be reached with !important.
   ------------------------------------------------------------------------ */

/* ---------------------------------------------------------------------------
   GUARD: an inline style may declare a dark background and then OVERRIDE it
   with a light one in the same attribute, e.g.
       style="background:#00102d;background:var(--slate);"
   The second declaration wins, so that section is genuinely LIGHT and its text
   is dark. An attribute selector matching the FIRST value forces it dark and
   leaves navy text on navy - measured at 1.04:1 on
   reputation-management-cost-uk.html, an invisible heading. So every
   [style*="background:#<dark>"] selector below is guarded against a later light
   declaration in the same attribute.
   ------------------------------------------------------------------------ */
[style*="background:#00102d"]:not([style*="--slate"]):not([style*="--white"]):not([style*="--light"]):not(.pv-paper) { background: var(--navy-deep) !important; }
[style*="background:#0d1f38"]:not([style*="--slate"]):not([style*="--white"]):not([style*="--light"]):not(.pv-paper) { background: var(--navy-lift) !important; }
[style*="background:#00061a"]:not([style*="--slate"]):not([style*="--white"]):not([style*="--light"]):not(.pv-paper),
[style*="background:#00040e"]:not([style*="--slate"]):not([style*="--white"]):not([style*="--light"]):not(.pv-paper) { background: var(--abyss) !important; }

/* the CTA band and the press strip are the floor of the page */
.pv-cta { background: var(--navy); }
.pv-footer { background: var(--navy); }

/* ============================================================================
   SITEWIDE GROUND - #000e26
   ----------------------------------------------------------------------------
   Every DARK surface across all 99 pages takes the single ground colour.

   Light sections are deliberately NOT touched here. 84 pages carry
   `var(--slate)` panels, and roughly 990 elements inside them set their text to
   `var(--navy)` or `#3a4a5c` - mostly as inline styles. Darkening those grounds
   without inverting all of that text would render it invisible, so that is a
   separate, verified pass rather than something to slip into a colour change.

   Applied as background-color, never by redefining --navy: that token is also
   the text colour on gold buttons and on light panels.
   ============================================================================ */

:root { --ground: #000e26; }

body,
.pv-hero, .pv-page-hero, .pv-stats, .pv-serve, .pv-damage, .pv-advisors,
.pv-dark:not(.pv-paper), .pv-cta, .pv-press-strip, .pv-footer, .pv-lp-quote,
.article-hero, .ledger-hero, .pv-confirm-inner,
[style*="background:#00102d"]:not([style*="--slate"]):not([style*="--white"]):not([style*="--light"]):not(.pv-paper), [style*="background: #00102d"]:not([style*="--slate"]):not([style*="--white"]):not([style*="--light"]):not(.pv-paper),
[style*="background:#001233"]:not([style*="--slate"]):not([style*="--white"]):not([style*="--light"]):not(.pv-paper), [style*="background: #001233"]:not([style*="--slate"]):not([style*="--white"]):not([style*="--light"]):not(.pv-paper),
[style*="background:#011a3a"]:not([style*="--slate"]):not([style*="--white"]):not([style*="--light"]):not(.pv-paper), [style*="background: #011a3a"]:not([style*="--slate"]):not([style*="--white"]):not([style*="--light"]):not(.pv-paper),
[style*="background:#001a3a"]:not([style*="--slate"]):not([style*="--white"]):not([style*="--light"]):not(.pv-paper), [style*="background: #001a3a"]:not([style*="--slate"]):not([style*="--white"]):not([style*="--light"]):not(.pv-paper),
[style*="background:#0d1f38"]:not([style*="--slate"]):not([style*="--white"]):not([style*="--light"]):not(.pv-paper), [style*="background: #0d1f38"]:not([style*="--slate"]):not([style*="--white"]):not([style*="--light"]):not(.pv-paper),
[style*="background:#00061a"]:not([style*="--slate"]):not([style*="--white"]):not([style*="--light"]):not(.pv-paper), [style*="background:#00040e"]:not([style*="--slate"]):not([style*="--white"]):not([style*="--light"]):not(.pv-paper) {
  background-color: var(--ground) !important;
  background-image: none !important;
}

/* the interior page hero keeps a hairline foot, not a gradient */
.pv-page-hero::after {
  background: linear-gradient(90deg, transparent, var(--gold-ghost) 30%, var(--gold-ghost) 70%, transparent) !important;
}

/* ============================================================================
   LIGHT BANDS RESTORED
   ----------------------------------------------------------------------------
   The all-dark pass converted every light panel and inverted ~1,000 text
   declarations with it. That removed the thing that gave the old pages their
   structure: an alternating dark / off-white rhythm. The conversion layers are
   gone; the light bands render from the pages' own CSS again, with their own
   dark text, exactly as they did before.

   What is KEPT from that work: the dark surfaces still take --ground #000e26,
   and the genuine legibility fixes below, which were failing WCAG before any
   of this started.
   ============================================================================ */

/* text that was already below 3:1 - gold and white set too faint to read */
.pv-quote-source, .ledger-card-read, .ledger-card-num,
.pv-globe-loc-tag, .cs-loc, .pv-press-outlet { color: rgba(255,255,255,0.62) !important; }
.ledger-card-read, .ledger-card-num, .pv-quote-source { color: var(--gold-soft) !important; }
.pv-copyright, .pv-copyright span, #pv-year { color: rgba(255,255,255,0.62) !important; }
[style*="rgba(167,136,49,0.2"], [style*="rgba(167,136,49,0.3"],
[style*="rgba(167,136,49,.2"],  [style*="rgba(167,136,49,.3"] { color: var(--gold-soft) !important; }

/* these sit on gold and must stay dark */
.btn-primary, .pv-nav-cta, .pv-nav-cta:hover, .pv-cta .btn-primary,
.cs-btn.cs-active, .cs-btn:hover, .pv-submit, .skip-nav, .pv-success-download {
  color: var(--navy) !important;
}


/* ---- advisor bio emphasis --------------------------------------------------
   `.pv-leader-bio` sets font-weight:300, and <strong> defaults to `bolder`,
   which relative to 300 computes to 400 - all but invisible. DM Sans 600 is
   self-hosted, so setting it explicitly gets a real bold rather than a
   synthesised one.
   -------------------------------------------------------------------------- */
.pv-leader-bio strong { font-weight: 600; color: #fff; }

/* ---------------------------------------------------------------------------
   THE TOKEN FORMS - the gap that left 78 sections a lighter blue
   ----------------------------------------------------------------------------
   The ground rules above match the HEX spellings, `[style*="background:#001233"]`
   and so on. But 49 sections write the same colours as TOKENS -
   `style="background:var(--navy)"` (#001233) and `var(--navy2)` (#00102d) - and
   no hex selector can see those. They kept rendering 4-7 points lighter than
   #000e26, which was invisible while they sat in long runs of near-identical
   darks and became obvious the moment paper bands appeared beside them.
   `var(--navy)` does not match `var(--navy2)` as a substring: the closing paren
   makes them distinct, so the two selectors do not collide.
   ------------------------------------------------------------------------ */
[style*="background:var(--navy)"]:not(.pv-paper),
[style*="background: var(--navy)"]:not(.pv-paper),
[style*="background:var(--navy2)"]:not(.pv-paper),
[style*="background: var(--navy2)"]:not(.pv-paper),
[style*="background:var(--navy-deep)"]:not(.pv-paper),
[style*="background-color:var(--navy)"]:not(.pv-paper),
[style*="background-color:var(--navy2)"]:not(.pv-paper) {
  background-color: var(--ground) !important;
  background-image: none !important;
}

/* And the CLASS forms. These seven set the same lighter navies from each page's
   own <style> block rather than inline, so neither the hex nor the token
   selectors reach them. With these the site has exactly one dark tone. */
.pv-body-section:not(.pv-paper),
.pv-dark-section:not(.pv-paper),
.pv-approach-lp:not(.pv-paper),
.pv-faq:not(.pv-paper),
.pv-policy:not(.pv-paper),
.article-back:not(.pv-paper),
.ledger-grid-section:not(.pv-paper) {
  background-color: var(--ground) !important;
  background-image: none !important;
}
