/* ============================================================================
   Pavesen v4 - composition
   ----------------------------------------------------------------------------
   Loads after refine.css and inherits all of it. v2 fixed the tells; the page
   was still band / band / band, with the light sections mostly empty and no
   moment anywhere in the scroll. This layer only changes COMPOSITION:

     1. the two light sections become full-bleed spreads - the image runs to the
        viewport edge and is cropped past the baked-in frame, instead of a small
        picture floating in an empty column
     2. the pull quote is pulled out of the sidebar and given the page's one
        real moment: a full-bleed statement band, type only
     3. display type gets a proper scale jump, so headings lead
     4. slow parallax on the bleed images

   Hero, palette, type colours and every word are untouched.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1. SCALE - headings on the homepage carry more weight
   ------------------------------------------------------------------------ */

.v4 .t-h2 {
  font-size: clamp(2.3rem, 4.4vw, 3.75rem);
  line-height: 1.08;
  letter-spacing: -0.018em;
}
.v4 .t-eyebrow { margin-bottom: 0.4rem; }

/* ---------------------------------------------------------------------------
   2. FULL-BLEED SPREAD
   No negative margins: the section itself is the grid, so the figure genuinely
   reaches the viewport edge at every width.
   ------------------------------------------------------------------------ */

.v4-spread {
  display: grid;
  grid-template-columns: 1fr;
  background: var(--slate, #e2e4df);
  color: var(--navy);
  border-top: 1px solid var(--rule-light-2);
}
@media (min-width: 1000px) {
  /* explicit placement rather than `order` - unambiguous, and it lets the
     flipped spread swap the track sizes too, so the copy column stays wide */
  .v4-spread { grid-template-columns: 47% 1fr; align-items: stretch; }
  .v4-spread__fig  { grid-column: 1; grid-row: 1; }
  .v4-spread__body { grid-column: 2; grid-row: 1; }

  .v4-spread--flip { grid-template-columns: 1fr 47%; }
  .v4-spread--flip .v4-spread__fig  { grid-column: 2; grid-row: 1; }
  .v4-spread--flip .v4-spread__body { grid-column: 1; grid-row: 1; }
}

.v4-spread__fig {
  position: relative;
  overflow: hidden;
  margin: 0;
  min-height: clamp(320px, 54vw, 700px);
  background: #00101f;
}
.v4-spread__fig img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The 1.22 zoom existed only to crop past the composite's baked-in frame and
     transparent margin. declutter.py removed both, so that zoom is now pure
     loss of picture. Just enough scale to give the parallax headroom.
     `scale` and `translate` as separate properties so the parallax can move the
     image without having to restate the zoom. */
  scale: 1.06;
  will-change: translate;
  filter: brightness(0.94) contrast(1.05) saturate(0.96);
}
/* a hairline of gold where the plate meets the paper */
.v4-spread__fig::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; right: 0;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--gold-ghost) 22%, var(--gold-ghost) 78%, transparent);
}
@media (min-width: 1000px) {
  .v4-spread--flip .v4-spread__fig::after { right: auto; left: 0; }
}

.v4-spread__body {
  display: flex;
  align-items: center;
  padding: clamp(3.2rem, 8vw, 7rem) clamp(1.5rem, 5vw, 5.5rem);
}
.v4-spread__inner { max-width: 44ch; }
.v4-spread__inner .t-body { margin-top: 1.7rem; }
.v4-spread__cta { margin-top: 2.6rem; }
/* align the copy with the page's text column rather than centring it in the cell */
@media (min-width: 1280px) {
  .v4-spread .v4-spread__body { padding-left: clamp(3.5rem, 5vw, 6rem); padding-right: 3rem; }
  .v4-spread--flip .v4-spread__body { padding-right: clamp(3.5rem, 5vw, 6rem); padding-left: 3rem; justify-content: flex-end; }
}

/* ---------------------------------------------------------------------------
   3. THE STATEMENT
   The one moment on the page. Type only - for a firm selling discretion, a
   held line of type says more than another photograph would.
   ------------------------------------------------------------------------ */

.v4-statement {
  position: relative;
  /* a step down from the band above it, but still blue - not black */
  background: var(--navy-deep);
  padding: clamp(6rem, 15vw, 12rem) 0;
  text-align: center;
  overflow: hidden;
}
.v4-statement::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(58% 58% at 50% 50%, rgba(167,136,49,0.10), transparent 70%);
  pointer-events: none;
}
.v4-statement .container { position: relative; z-index: 1; }

.v4-statement__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  margin-bottom: clamp(2.2rem, 4vw, 3.2rem);
  color: var(--gold);
}
.v4-statement__mark::before,
.v4-statement__mark::after {
  content: "";
  width: clamp(40px, 9vw, 110px);
  height: 1px;
  background: currentColor;
  opacity: 0.5;
}
.v4-statement__mark i {
  width: 6px; height: 6px;
  background: var(--gold);
  transform: rotate(45deg);
  flex: none;
}

.v4-statement__q {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 300;
  font-style: italic;
  font-size: clamp(1.7rem, 3.6vw, 3rem);
  line-height: 1.3;
  letter-spacing: -0.014em;
  color: #fff;
  max-width: 19em;
  margin: 0 auto;
  text-wrap: balance;
}

/* ---------------------------------------------------------------------------
   4. THE STAKES - three points across, not stacked in a sidebar
   ------------------------------------------------------------------------ */

.v4-points {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 clamp(1.8rem, 3.5vw, 3.4rem);
  margin-top: clamp(2.4rem, 5vw, 3.6rem);
}
@media (min-width: 900px) { .v4-points { grid-template-columns: repeat(3, 1fr); } }
.v4-point {
  padding: clamp(1.9rem, 3.4vw, 2.5rem) 0 clamp(2rem, 3.6vw, 2.6rem);
  border-top: 1px solid var(--rule-dark);
}
@media (min-width: 900px) {
  .v4-point + .v4-point {
    border-left: 1px solid var(--rule-dark);
    padding-left: clamp(1.8rem, 3.5vw, 3.4rem);
  }
}
.v4-point__h {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.655rem;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gold-soft);
  margin-bottom: 0.9rem;
}
.v4-point__p { font-size: 0.985rem; line-height: 1.78; color: rgba(255,255,255,0.58); }

/* ---------------------------------------------------------------------------
   5. FIGURES - the advisor numbers, given room
   ------------------------------------------------------------------------ */

.v4 .adv-pillar-num { font-size: clamp(3rem, 5.4vw, 4.4rem); }
.v4 .adv-pillar { padding: clamp(2.4rem, 4.5vw, 3.4rem) 1.5rem; }

/* ---------------------------------------------------------------------------
   6. MOTION - slow parallax on the bleed plates
   ------------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .v4-spread__fig img { translate: none !important; }
}

/* ---------------------------------------------------------------------------
   7. RESPONSIVE
   ------------------------------------------------------------------------ */

@media (max-width: 999px) {
  .v4-spread__fig { min-height: clamp(280px, 62vw, 460px); }
  .v4-spread__fig::after { top: auto; bottom: 0; left: 0; right: 0; width: auto; height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold-ghost) 22%, var(--gold-ghost) 78%, transparent); }
}

/* ============================================================================
   v4b - the boutique pass
   ----------------------------------------------------------------------------
   What still read as generic after the composition work, and what each fix is:

     photography sat as stock dropped into a template  -> duotoned into the brand
     display type was set, but not *typeset*           -> hanging punctuation,
                                                          optical alignment
     buttons were rectangles with uppercase labels     -> engraved weight, a
                                                          secondary that is a rule
     the press row read as a faint afterthought        -> a credential line
     spacing was even                                  -> air where it earns it
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1. DUOTONE
   The composites are colour photographs with a baked-in crosshair grid; against
   a navy/gold identity they read as bought, not commissioned. Grayscaling them
   and tinting through the brand makes them look art-directed, unifies the two
   plates with each other, and pushes the baked grid back into the image so it
   reads as an overlay rather than an artefact. Filter only - no asset changes.
   ------------------------------------------------------------------------ */

/* The photographs run as shot. A duotone was trialled here and rejected -
   the images are better without anything laid over them. The only treatment
   is a hair of brightness/contrast so they seat against the page. */
.v4-spread__fig img {
  filter: brightness(0.96) contrast(1.04) !important;
}
.v4-spread__fig::after { z-index: 3; }

/* ---------------------------------------------------------------------------
   2. TYPESETTING
   ------------------------------------------------------------------------ */

/* the opening quote hangs into the margin so the first letter, not the mark,
   sits on the optical left edge - the oldest tell of typeset vs typed */
.v4-statement__q {
  text-indent: -0.42em;
  padding-left: 0.42em;
  max-width: 18.5em;
}

/* display type: let the serif breathe and stop it going airless at size */
.v4 .t-hero, .v4 .t-h2 { font-feature-settings: "onum" 1, "liga" 1, "dlig" 1, "kern" 1, "swsh" 0; }
.v4 .t-h2 em, .v4 .t-hero em { letter-spacing: -0.005em; }

/* body copy: a shade darker and tighter measure. Light grey at 300 reads thin;
   private-client material reads settled. */
.v4 .t-body, .v4 .t-body-dark { max-width: 60ch; }
.v4-spread__inner .t-body p { color: #34455a; }
.v4 .pv-card-body, .v4 .v4-point__p { max-width: 42ch; }

/* ---------------------------------------------------------------------------
   3. BUTTONS - engraved, not clicked
   ------------------------------------------------------------------------ */

.v4 .btn-primary {
  font-size: 0.665rem;
  letter-spacing: 0.26em;
  padding: 1.35em 3em;
  border: 1px solid var(--gold);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09);
}
.v4 .btn-primary:hover {
  background: var(--gold2);
  border-color: var(--gold2);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
}
/* secondary stops being a box: a rule with a label sitting on it */
.v4 .btn-ghost {
  border: 0;
  background: transparent;
  padding: 1.35em 0;
  /* No margin. These buttons live in centred wrap-flex rows, and a margin is
     part of the flex item's outer box: a left-only one throws the label
     off-centre once the row wraps, a symmetric one throws the whole group
     off-centre while it is still on one line. Separation from the primary is
     the container's column-gap instead - see section 21 in v4-site.css. */
  margin: 0;
  font-size: 0.665rem;
  letter-spacing: 0.26em;
  color: var(--gold-soft);
  position: relative;
}
.v4 .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), transform 0.5s var(--ease-ed);
  transform-origin: left;
}
.v4 .btn-ghost:hover {
  background: transparent;
  color: #fff;
}
.v4 .btn-ghost:hover::after { opacity: 1; }
.v4 .pv-hero-actions { gap: 1rem 2.4rem; align-items: center; }

/* ---------------------------------------------------------------------------
   4. THE CREDENTIAL LINE
   ------------------------------------------------------------------------ */

.v4 .pv-press-strip { padding: clamp(2.8rem, 5vw, 4rem) 40px; }
.v4 .pv-press-eyebrow { font-size: 0.575rem; letter-spacing: 0.4em; color: rgba(167,136,49,0.9); margin-bottom: 1.9rem; }
.v4 .pv-press-outlet {
  font-size: 1.2rem;
  font-style: normal;
  color: rgba(255, 255, 255, 0.62);
  padding: 0.3rem 2.1rem;
  letter-spacing: 0.015em;
}
.v4 .pv-press-outlet + .pv-press-outlet::before { height: 15px; background: rgba(167,136,49,0.3); }

/* ---------------------------------------------------------------------------
   5. AIR - generous where the page should slow down
   ------------------------------------------------------------------------ */

.v4 .pv-section { padding: clamp(5.5rem, 11vw, 10rem) 0; }
.v4 .pv-cta { padding: clamp(7rem, 14vw, 12rem) 0 clamp(6rem, 12vw, 10rem); }
.v4 .cta-hl { font-size: clamp(2rem, 4vw, 3.4rem); margin-top: 1.9rem; }
.v4 .cta-sub { margin-top: 1.9rem; }

/* ---------------------------------------------------------------------------
   6. THE HAIRLINE, REFINED
   A single flat rule everywhere is a template. A rule that fades at its ends
   is drawn.
   ------------------------------------------------------------------------ */

.v4 .pv-serve-card,
.v4 .v4-point,
.v4 .pv-card {
  border-top-color: transparent;
  background-image: linear-gradient(90deg, var(--gold-ghost), rgba(167,136,49,0.10) 62%, transparent);
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: top left;
}

/* ---------------------------------------------------------------------------
   7. THE SCROLL CUE - one quiet mark that the page continues
   ------------------------------------------------------------------------ */

.v4 .pv-hero { position: relative; }
.v4 .pv-hero::after {
  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;
}
@keyframes v4Cue {
  0%, 100% { transform: scaleY(0.35); opacity: 0.2; }
  50%      { transform: scaleY(1);    opacity: 0.6; }
}
@media (prefers-reduced-motion: reduce) {
  .v4 .pv-hero::after { animation: none; transform: scaleY(1); opacity: 0.45; }
}



/* ---------------------------------------------------------------------------
   8. THE PHOTOGRAPHS, CLEANED
   The supplied composites are the same photograph laid over itself in offset
   rectangular panels at different exposures, with a decorative navy block
   behind and a white measurement grid over the top. declutter.py recovers the
   photograph: it reads the grid lattice out of the transparent margin (where
   there is no picture content to confuse it), crops to the photo's own
   rectangle to drop the block, and inpaints the grid bands.
   The panel seams are baked in and cannot be recovered, so the crop is steered
   to the most tonally consistent part of each frame.
   ------------------------------------------------------------------------ */

.v4-spread__fig img[src*="who-we-serve"]      { object-position: 50% 50%; }
.v4-spread__fig img[src*="pavesens-approach"] { object-position: 50% 50%; }

/* ============================================================================
   v4c - one continuous navy
   ----------------------------------------------------------------------------
   The page alternated navy / paper / navy / paper, and carried a lighter blue
   (#011a3a) for two bands. Both were working against it: the light bands read
   as marketing rather than private-client, and the constant ground changes were
   the "jumping" problem in another form.

   Now: ONE ground, in variants. #001233 dominant, #000d24 where a section needs
   to sit back, #00081a for the single statement. No paper. No light blue.
   The photographs are the relief instead - which is also why they had to be
   fixed first. Sections are divided by hairlines, not by colour changes.
   ============================================================================ */

.v4 { background: var(--navy); }

/* ---- the spreads stay on paper --------------------------------------------
   Reverted 2026-08-07. The all-dark page lost the light bands the original
   site used to break up the scroll, and the homepage was the last page still
   missing them. The two spreads sit exactly where the original's two slate
   bands sat (.pv-intro and .pv-approach), so restoring paper here restores
   the original rhythm rather than inventing a new one.

   The flip spread still carries .pv-approach, so its light-ground colours
   come from the page's own stylesheet - the rules that used to fight it are
   deleted rather than re-overridden. The first spread replaced .pv-intro and
   lost that hook, so its colours are restated here, matching .pv-intro's
   original values exactly.
   ------------------------------------------------------------------------ */
.v4 .v4-spread {
  background: var(--slate);
  color: var(--navy);
  border-top: 1px solid rgba(0, 18, 51, 0.10);
}

.v4 .v4-spread .t-h2 { color: var(--navy); }
.v4 .v4-spread .t-eyebrow { color: var(--gold); }
.v4 .v4-spread .t-body,
.v4 .v4-spread .t-body p,
.v4 .v4-spread .t-body-dark { color: #3a4a5c; }

/* ---- flatten the remaining ground changes ---------------------------------- */
.v4 .pv-damage,                      /* was the light blue #011a3a */
.v4 .pv-advisors,                    /* was the light blue #011a3a */
.v4 [style*="background:#011a3a"],
.v4 [style*="background:#00102d"] { background: var(--navy-deep) !important; }
.v4 .pv-serve { background: var(--navy) !important; }
.v4 .v4-statement { background: #00081a; }
.v4 .pv-cta, .v4 .pv-press-strip, .v4 .pv-footer { background: var(--navy); }

/* seams are hairlines, not colour steps */
.v4 .pv-section, .v4 .v4-statement, .v4 .pv-cta { border-top: 1px solid var(--rule-dark); }
.v4 .pv-press-strip { border-top: 1px solid var(--rule-dark); }

/* ---- the cube: seat it in blue, not black, and give it its life back -------- */
.v4 .pv-hero {
  background:
    radial-gradient(46% 52% at 74% 46%, rgba(20, 58, 112, 0.42), transparent 68%),
    radial-gradient(90% 80% at 76% 34%, rgba(167, 136, 49, 0.10), transparent 62%),
    linear-gradient(152deg, #001233 0%, #000d24 58%, #000a1c 100%);
}

/* ---- restraint: one gold button, not five ---------------------------------- */
/* A page of solid gold CTAs reads as a funnel. Private-client work asks once.
   The hero and the closing band keep the solid; everything between them is a
   quiet rule. */
.v4 .pv-serve .btn-primary,
.v4 .pv-damage .btn-primary {
  background: transparent;
  border: 0;
  box-shadow: none;
  color: var(--gold-soft);
  padding: 1.35em 0;
  position: relative;
}
.v4 .pv-serve .btn-primary::after,
.v4 .pv-damage .btn-primary::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);
}
.v4 .pv-serve .btn-primary:hover,
.v4 .pv-damage .btn-primary:hover {
  background: transparent;
  color: #fff;
}
.v4 .pv-serve .btn-primary:hover::after,
.v4 .pv-damage .btn-primary:hover::after { opacity: 1; }


/* ============================================================================
   v4d - ONE ground
   ----------------------------------------------------------------------------
   Even after dropping the paper bands, the page still carried three flat navies
   (#001233, #000d24, #00081a) plus a long hero gradient - and that still read
   as too many shades. So: a single ground, #001233, for the entire page below
   the hero. Sections are separated by hairlines alone.

   The statement band keeps its presence without changing colour - it earns it
   from the gold radial and the air around it, not from a darker rectangle.
   The hero keeps a gradient because the cube needs something to sit in, but
   it is now a short two-stop rather than a long ramp through several tones.
   ============================================================================ */

.v4,
.v4 .pv-stats,
.v4 .pv-serve,
.v4 .pv-damage,
.v4 .pv-advisors,
.v4 .pv-dark,
.v4 .pv-cta,
.v4 .pv-press-strip,
.v4 .pv-footer,
.v4 .v4-statement,
.v4 [style*="background:#00102d"],
.v4 [style*="background:#011a3a"],
.v4 [style*="background:#0d1f38"],
.v4 [style*="background:#001233"] { background-color: var(--navy) !important; background-image: none !important; }

/* the one moment: presence from light, not from a different rectangle */
.v4 .v4-statement { position: relative; }
.v4 .v4-statement::before {
  background: radial-gradient(54% 56% at 50% 50%, rgba(167, 136, 49, 0.14), transparent 72%) !important;
}

/* hero: short gradient, plus the lift that seats the cube */
.v4 .pv-hero {
  background-image:
    radial-gradient(44% 50% at 74% 46%, rgba(20, 58, 112, 0.40), transparent 68%),
    radial-gradient(86% 76% at 76% 34%, rgba(167, 136, 49, 0.09), transparent 62%),
    linear-gradient(163deg, #001233 0%, #000e26 100%) !important;
}

/* ============================================================================
   v4e - more picture, still full height
   ----------------------------------------------------------------------------
   Measured: the suit plate was showing 63% of its frame, the watch only 49%.
   The plate stretches to the height of the copy beside it, so a landscape
   photograph in a tall narrow column gets cropped hard - and the approach
   column is 1149px tall, which is why the watch was worst.

   Keeping the full-height bleed (which is the point of the spreads), the only
   honest levers are: widen the image column, and shorten the copy column.
   Both, plus dropping the scale to near 1.
   ============================================================================ */

@media (min-width: 1000px) {
  .v4-spread { grid-template-columns: 56% 1fr; }
  .v4-spread--flip { grid-template-columns: 1fr 56%; }
  /* the copy no longer needs a wide gutter now that it has less width to fill */
  .v4 .v4-spread__body { padding: clamp(2.4rem, 4.5vw, 3.8rem) clamp(2rem, 3.6vw, 3.4rem); }
  .v4 .v4-spread .v4-spread__body { padding-left: clamp(2.6rem, 3.8vw, 4rem); padding-right: clamp(1.6rem, 2.6vw, 2.6rem); }
  .v4 .v4-spread--flip .v4-spread__body { padding-right: clamp(2.6rem, 3.8vw, 4rem); padding-left: clamp(1.6rem, 2.6vw, 2.6rem); }
}

/* the three method pillars were the single biggest contributor to that 1149px */
.v4 .v4-spread .approach-pil { padding: clamp(1.1rem, 2vw, 1.5rem) 0; }
.v4 .v4-spread .approach-pillars { margin-top: 1.3rem !important; }
.v4 .v4-spread .t-body p + p { margin-top: 0.9rem; }
.v4 .v4-spread .v4-spread__cta { margin-top: 1.8rem; }
.v4 .v4-spread .entry, .v4 .v4-spread__inner .t-body { margin-top: 1.3rem; }

/* almost no zoom - just enough for the parallax to move against */
.v4-spread__fig img { scale: 1.02; }

/* ============================================================================
   v4f - artefacts and air
   ----------------------------------------------------------------------------
   Two things reading as unfinished rather than restrained:

   1. The decorative cube repeats sat at section edges and were hard-CLIPPED by
      the section boundary, so they looked like a rendering mistake rather than
      atmosphere. They are now faded out with a radial mask, so they read as a
      glow in the ground. The hero cube stays the one solid statement of that
      asset - three sharp copies of it on one page dilutes it.

   2. Section padding was stacking: up to 160px below one section plus 160px
      above the next, leaving 300px+ voids that read as empty, not generous.
   ============================================================================ */

.v4 .pv-advisors-cube,
.v4 .pv-page-cube {
  opacity: 0.07;
  -webkit-mask-image: radial-gradient(closest-side, #000 30%, transparent 78%);
          mask-image: radial-gradient(closest-side, #000 30%, transparent 78%);
  filter: blur(1px);
}

.v4 .pv-section { padding: clamp(4.5rem, 8vw, 7.5rem) 0; }
.v4 .pv-cta { padding: clamp(5.5rem, 10vw, 8.5rem) 0 clamp(5rem, 9vw, 7.5rem); }
.v4 .v4-statement { padding: clamp(5rem, 11vw, 9rem) 0; }
.v4 .actions--after-register { margin-top: clamp(2rem, 4vw, 2.8rem); }

/* the register's column rule ran past the final row */
.v4 .register { position: relative; }
.v4 .register__item:last-child { border-bottom: 0; }

/* ============================================================================
   v4g - break the template
   ----------------------------------------------------------------------------
   The remaining "AI" read was not colour or imagery. It was repetition:

     - SIX of seven headings used the identical italic-gold-last-word device
       ("Who We *Serve*", "Reputation *Damage*", "Pavesen's *Approach*",
       "Private *Advisors*"...). A formula applied without exception.
     - FIVE sections ran the same four beats: eyebrow, heading, body, CTA.

   A designer varies. A generator repeats. So:

     1. the gold italic is spent ONCE, on the hero - it is the brand line. Every
        other <em> stays italic (it is real emphasis) but drops the gold, so
        gold returns to being an accent rather than a tic.
     2. two section heads go asymmetric - the label sits in a margin rail beside
        the heading instead of stacked above it.
     3. the advisors block stops being centred.
   ============================================================================ */

/* ---- 1. one gold italic on the page, not six ---------------------------- */
.v4 .t-h2 em {
  /* colour reverted to the page's own gold - see v4-site.css section 1 */
  opacity: 1;
}
.v4 .v4-spread .t-h2 em { opacity: 1; }
/* the hero keeps it - that line is the brand */
.v4 .t-hero em { color: var(--gold-soft); opacity: 1; }

/* ---- 2. eyebrows STACK above their heading ------------------------------
   The label-beside-heading device was tried on "Who We Serve" and "Private
   Advisors" and rejected on both ("THE TEAM needs to go above PRIVATE
   ADVISERS", then "CLIENTELE should surely be above Who We Serve"). Removed
   rather than exempted - every eyebrow on the site now stacks, which is what
   the other 97 pages already do. The variety this was reaching for is carried
   by the spreads and the statement band instead.
   ------------------------------------------------------------------------ */

/* ---- 3. the advisors block stops being centred --------------------------- */
@media (min-width: 980px) {
  .v4 .pv-advisors-grid { max-width: none; margin: 0; text-align: left; }
  .v4 .pv-advisors-grid .t-body { margin-left: 0; max-width: 54ch; }
  .v4 .pv-advisors-grid .gold-rule.center { margin-left: 0; }
  .v4 .pv-advisors .t-eyebrow { justify-content: flex-start; }
  .v4 .pv-advisors .t-eyebrow::after { display: none; }
  /* the figures become a ruled row across the full measure, not three cells
     floating under a centred paragraph */
  .v4 .adv-pillars { margin-top: clamp(3rem, 6vw, 4.5rem); }
  .v4 .adv-pillar { text-align: left; padding-left: 0; padding-right: 2rem; }
  .v4 .adv-pillar + .adv-pillar { padding-left: clamp(1.6rem, 3vw, 2.6rem); }
}

/* ============================================================================
   v4h - the stat row
   ----------------------------------------------------------------------------
   "15+ / Global / 100%" set as three giant display numerals is the most
   recognisable generated-agency device on the page. The numbers themselves are
   the client's copy and stay, but rendering them as a hero statistics row is a
   styling choice - and a tell. A firm states facts; it does not put them in
   72pt. So: down to a reading size, set as a ruled fact line beside its label
   rather than stacked above it.
   ============================================================================ */

@media (min-width: 720px) {
  .v4 .adv-pillars { display: grid; grid-template-columns: repeat(3, 1fr); }
  .v4 .adv-pillar {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    padding: clamp(1.4rem, 2.6vw, 2rem) 2rem clamp(1.4rem, 2.6vw, 2rem) 0;
  }
  .v4 .adv-pillar + .adv-pillar { padding-left: clamp(1.6rem, 3vw, 2.6rem); }
}
.v4 .adv-pillar-num {
  font-size: clamp(1.6rem, 2.4vw, 2.1rem);
  margin-bottom: 0;
  color: var(--gold-soft);
  letter-spacing: 0;
}
.v4 .adv-pillar-lbl {
  font-size: 0.63rem;
  letter-spacing: 0.2em;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.52);
}
/* the <br> stays: hiding it welds the words together, as there is no
   whitespace in the markup to fall back on */

/* ============================================================================
   v4i - lose the halos
   ----------------------------------------------------------------------------
   Three radial glows were doing too much: a tight one behind the cube, a gold
   bloom on the statement band, and another on the closing CTA. Read as haze.
   The statement and the CTA now hold their own on type and space alone. The
   hero keeps only enough lift to stop the cube sitting in black - broad and
   low, so it reads as depth in the ground rather than a light behind an object.
   ============================================================================ */

.v4 .pv-hero {
  background-image:
    radial-gradient(78% 86% at 72% 48%, rgba(16, 46, 92, 0.20), transparent 76%),
    linear-gradient(163deg, #001233 0%, #000e26 100%) !important;
}

.v4 .v4-statement::before { background: none !important; }
.v4 .pv-cta::before { display: none !important; }
.v4 .pv-cta::after { background: linear-gradient(90deg, transparent, var(--gold-ghost) 30%, var(--gold-ghost) 70%, transparent); }

/* ============================================================================
   v4j - advisors section repairs
   ----------------------------------------------------------------------------
   De-centring that block introduced three faults:

   1. the ornament rule stretched to full width - `flex: 1 0 100%` was applied
      to every child div, and flex-basis overrode its 96px width
   2. the paragraph stayed centred at 600px because the markup carries an
      INLINE `margin:0 auto`, which no class selector can beat without
      !important - so the copy sat indented while the button sat at the margin,
      which is what read as "messed up"
   3. the decorative cube repeats were a faint smudge clipped by the section
      edge. At 7% they add nothing and the hero already makes that statement,
      so they are gone rather than dimmed further.
   ============================================================================ */

/* 1. the ornament left the flex row entirely - on one baseline with the
      heading it read as a stray mark floating after the word */
.v4 .pv-advisors .pv-advisors-grid > [data-reveal]:first-child > .gold-rule {
  display: none;
}

/* 2. beat the inline margin:0 auto so the copy shares the heading's margin */
@media (min-width: 980px) {
  .v4 .pv-advisors-grid .t-body {
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 62ch !important;
  }
}

/* 3. the decorative cube repeats go - EXCEPT the one behind Who We Serve.
   I removed all three because three copies of the stone on one page dilutes
   the hero. The user asked for this one back: "could we not have the faint
   cube in the background of this section as we did on the original site?"
   Restored at the original 0.18 / mix-blend-mode: screen, with no mask or
   blur, exactly as the original site had it. The advisors and page-hero
   repeats stay off. */
.v4 .pv-advisors-cube,
.v4 .pv-page-cube { display: none !important; }

.v4 .pv-serve-cube {
  display: block !important;
  /* 0.12, the original's value. The 0.18 in the same stylesheet belongs to
     .pv-advisors-cube - easy to misread, and 0.18 renders noticeably brighter
     because `screen` blend lifts more against the darker #000e26 ground. */
  opacity: 0.12;
  filter: none;
  -webkit-mask-image: none;
          mask-image: none;
}

/* ============================================================================
   v4k - advisors: use the width; and no halo at all
   ----------------------------------------------------------------------------
   De-centring the advisors block left the whole right half of the section empty,
   which read as broken rather than asymmetric. Centred it filled the measure;
   left-aligned it filled about half. The answer is not to re-centre it but to
   give the second column something: the copy sits left, the figures stack right
   as a ruled register. Asymmetric AND balanced.

   And the hero radial is gone entirely. Two rounds of "too much halo" - a wide
   soft glow behind a glass object is exactly the look being complained about.
   The ground is a plain gradient; the cube sits on brand navy, not on black,
   so it needs no light behind it.
   ============================================================================ */

.v4 .pv-hero {
  background-image: linear-gradient(163deg, #001336 0%, #001030 46%, #000c22 100%) !important;
}

@media (min-width: 980px) {
  .v4 .pv-advisors-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    column-gap: clamp(3rem, 6vw, 6.5rem);
    align-items: start;
  }
  .v4 .pv-advisors-grid > [data-reveal]:first-child { grid-column: 1; }
  .v4 .pv-advisors-grid .t-body { max-width: none !important; }

  /* the figures become a stacked register in the second column */
  .v4 .pv-advisors-grid .adv-pillars {
    grid-column: 2;
    display: block;
    margin-top: 0.6rem;
    border-top: 1px solid var(--rule-dark);
  }
  .v4 .pv-advisors-grid .adv-pillar {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1.5rem;
    padding: clamp(1.1rem, 2.2vw, 1.6rem) 0;
    border-left: 0 !important;
    border-bottom: 1px solid var(--rule-dark-2);
  }
  .v4 .pv-advisors-grid .adv-pillar:last-child { border-bottom: 0; }
  .v4 .pv-advisors-grid .adv-pillar-lbl { text-align: right; }
}

/* ============================================================================
   v4l - one blue, and gold not yellow
   ----------------------------------------------------------------------------
   1. ONE GROUND. The hero still carried a gradient while everything below it
      was flat, so there were effectively two blues and the join showed. The
      whole page is now a single flat #001233 - the brand navy, the colour under
      the masthead. No gradient, no radial, nothing to read as a second shade.

   2. GOLD, NOT YELLOW. The hero line was switched to the lighter #c9ad63, which
      reads yellow at display size. Large display type goes back to the brand
      gold #a78831. The lighter tint stays only on small tracked caps, where it
      is doing legibility work rather than colour work.
   ============================================================================ */

.v4,
.v4 .pv-hero { background-image: none !important; background-color: var(--navy) !important; }

.v4 .t-hero em { color: var(--gold) !important; }
.v4 .adv-pillar-num { color: var(--gold); }


/* ============================================================================
   v4m - the ground is #000e26
   ----------------------------------------------------------------------------
   Every section background, hero included, is this single value. Set as
   background-COLOR on surfaces rather than by redefining --navy, because --navy
   is also the text colour on the gold buttons - redefining the token would
   quietly recolour those too.
   ============================================================================ */

/* --ground now defined sitewide in refine.css */

html.js body.v4,
.v4,
.v4 .pv-hero,
.v4 .pv-stats,
.v4 .pv-section,
.v4 .pv-serve,
.v4 .pv-damage,
.v4 .pv-advisors,
.v4 .pv-dark,
.v4 .pv-cta,
.v4 .pv-press-strip,
.v4 .pv-footer,
.v4 .v4-statement,
.v4 [style*="background:#00102d"],
.v4 [style*="background:#011a3a"],
.v4 [style*="background:#0d1f38"],
.v4 [style*="background:#001233"],
.v4 [style*="background:#00061a"],
.v4 [style*="background:#00040e"] {
  background-color: var(--ground) !important;
  background-image: none !important;
}

/* the figure plate sits behind the photograph while it loads */
.v4 .v4-spread__fig { background-color: var(--slate); }

/* ============================================================================
   v4n - advisors: label back above the heading
   ----------------------------------------------------------------------------
   The one-baseline treatment stays on "Who We Serve" but comes off the advisors
   block: THE TEAM sits above PRIVATE ADVISORS, stacked.
   ============================================================================ */

@media (min-width: 980px) {
  .v4 .pv-advisors .pv-advisors-grid > [data-reveal]:first-child {
    display: block;
  }
  .v4 .pv-advisors .pv-advisors-grid > [data-reveal]:first-child .t-eyebrow {
    display: inline-flex !important;
    margin-bottom: 1.15rem;
  }
  .v4 .pv-advisors .pv-advisors-grid > [data-reveal]:first-child .t-eyebrow::before {
    display: block;
  }
  .v4 .pv-advisors .pv-advisors-grid > [data-reveal]:first-child .t-h2 {
    margin-top: 0;
  }
}

/* the ornament between heading and copy is display:none here, so `.t-h2 + div`
   lands on it and the paragraph gets no gap - set it directly */
.v4 .pv-advisors .pv-advisors-grid > [data-reveal]:first-child .t-body { margin-top: 1.7rem !important; }
.v4 .pv-advisors .pv-advisors-grid > [data-reveal]:first-child .t-body + div { margin-top: 2.2rem; }


/* ============================================================================
   The measurement grid on the composites is DELIBERATE brand design, not an
   artefact. declutter.py was used to strip it and that was wrong - the original
   composites are restored, shown centred and uncropped rather than scaled past.
   The de-cluttered files remain in images/*-clean.webp, unreferenced.
   ============================================================================ */
/* 0.92 leaves a margin of paper around the composite so it reads as a
   plate set on the band, not as a panel butted against it */
.v4-spread__fig img { scale: 0.92 !important; object-fit: contain !important; }
.v4-spread__fig { background-color: var(--slate); }

/* The sitewide pass forces .btn-primary to navy because it normally sits on
   gold. In v4 the mid-page CTAs are line-buttons on the dark ground, so that
   rule turns them invisible. Re-assert them here - v4.css loads after. */
.v4 .pv-serve .btn-primary,
.v4 .pv-damage .btn-primary { color: var(--gold-soft) !important; background: transparent !important; }
.v4 .pv-serve .btn-primary:hover,
.v4 .pv-damage .btn-primary:hover { color: #fff !important; }
/* on the paper spreads the line button measures 1.70:1 - solid gold instead */
.v4 .v4-spread .btn-primary { color: var(--navy) !important; background: var(--gold) !important;
  border: 1px solid var(--gold) !important; padding: 1.35em 3em !important; }
.v4 .v4-spread .btn-primary::after { display: none !important; }
/* the solid ones keep dark text on gold */
.v4 .pv-hero .btn-primary, .v4 .pv-cta .btn-primary, .v4 .pv-advisors .btn-primary,
.v4 .mast__cta, .v4 .pv-nav-cta { color: var(--navy) !important; background: var(--gold) !important; }


/* ============================================================================
   v4p - Pavesen's Approach: image left, copy right
   ----------------------------------------------------------------------------
   The two spreads mirrored each other so the page alternated image-left /
   image-right. The user wants the approach spread to match the first one:
   "I think the image should be on the left hand side and the text sections on
   the right." So the --flip modifier is neutralised - the class stays on the
   element (no markup change) and every part of the mirroring is undone here:
   track order, the gold hairline's edge, and the copy column's padding, which
   was mirrored to keep the text off the outer margin.

   Explicit `grid-column` throughout, never `order` - `order` silently failed on
   this markup once before and rendered the copy on top of the image.
   ============================================================================ */

@media (min-width: 1000px) {
  /* 56%, matching the base spread - v4e widened the image column from 47%
     so the plate keeps more of its frame; pinning the flip back to 47% here
     would have quietly shrunk the watch plate by 129px */
  .v4 .v4-spread--flip { grid-template-columns: 56% 1fr; }
  .v4 .v4-spread--flip .v4-spread__fig  { grid-column: 1; grid-row: 1; }
  .v4 .v4-spread--flip .v4-spread__body { grid-column: 2; grid-row: 1; }
  /* the hairline sits where the plate meets the paper - now the right edge */
  .v4 .v4-spread--flip .v4-spread__fig::after { left: auto; right: 0; }
}
@media (min-width: 1280px) {
  .v4 .v4-spread--flip .v4-spread__body {
    padding-left: clamp(3.5rem, 5vw, 6rem);
    padding-right: 3rem;
    justify-content: flex-start;
  }
}