/* ============================================================================
   Tony McChrystal v2 - composition layer
   ----------------------------------------------------------------------------
   refine.css fixed the TELLS (cards, hovers, corners, tracking). This fixes the
   COMPOSITION. The page was band / band / band: every section the same width,
   the same centred stack, the same four beats - eyebrow, heading, body, CTA.
   Tasteful, but flat, and repetition is the thing that actually reads as
   generated. A designer varies; a generator repeats.

   Ported from ~/pavesen-site-v4 (css/v4.css), adapted to this site.

     1. The About section becomes a full-bleed spread - the portrait runs to the
        viewport edge, the copy sits in the facing column.
     2. The philosophy band becomes THE STATEMENT: the page's one moment. Type
        only, held on the deepest ground, with air around it.
     3. Display type gets a scale jump, so headings lead rather than label.
     4. Two section heads run label and heading on one baseline instead of
        stacking, so the four-beat rhythm is broken.

   Loaded after refine.css. Palette, copy, logo and images untouched.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1. SCALE
   ------------------------------------------------------------------------ */

.pv-v4 .t-h2 {
  font-size: clamp(2.05rem, 3.9vw, 3.15rem);
  line-height: 1.08;
  letter-spacing: -0.018em;
}
.pv-v4 .t-eyebrow { margin-bottom: 0.4rem; }
.pv-v4 .cta-hl { font-size: clamp(1.9rem, 3.4vw, 2.9rem); }

/* ---------------------------------------------------------------------------
   2. FULL-BLEED SPREAD (About)
   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;
  padding: 0;
  background: var(--slate);
  color: var(--navy);
  border-top: 1px solid var(--rule-light-2);
  border-bottom: 1px solid var(--rule-light-2);
}
@media (min-width: 1000px) {
  /* explicit placement rather than `order` - unambiguous, and it lets a flipped
     spread swap the track sizes too, so the copy column stays wide */
  .v4-spread { grid-template-columns: 44% 1fr; align-items: stretch; }
  .v4-spread__fig  { grid-column: 1; grid-row: 1; }
  .v4-spread__body { grid-column: 2; grid-row: 1; }
}

.v4-spread__fig {
  position: relative;
  overflow: hidden;
  margin: 0;
  min-height: clamp(340px, 52vw, 660px);
  background: #00101f;
}
.v4-spread__fig img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Crop off the BOTTOM, never the top. The zoom that gives the parallax its
     headroom was growing from the centre, which took 27px off the top of a
     picture that only had ~58px of air above his hair - so his head read as
     clipped against the plate edge. Anchored to the top, the same zoom grows
     downward into the jacket, where there is room to spare. */
  object-position: 50% 0%;
  scale: 1.08;
  transform-origin: 50% 0%;
  will-change: translate;
  /* set, not stripped: the hero portrait is in colour, so greyscaling this one
     would make the two pictures of the same man look like different builds */
  filter: contrast(1.04) saturate(0.94) brightness(0.98);
}
/* 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 (max-width: 999px) {
  .v4-spread__fig::after { top: auto; left: 0; height: 1px; width: auto; background: linear-gradient(90deg, transparent, var(--gold-ghost) 25%, var(--gold-ghost) 75%, transparent); }
  /* Stacked, the plate is wide and short, so `cover` throws away most of the
     picture's height. At 399px it cut him across the mouth - a portrait has to
     break at the shoulders or the chest, never the face. Taller plate, and the
     crop still comes off the bottom. */
  .v4-spread__fig { min-height: clamp(430px, 80vw, 700px); }
}

.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: 46ch; }
.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; }
}

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

.v4-statement {
  position: relative;
  padding: clamp(5rem, 11vw, 9rem) 0 clamp(4rem, 8vw, 6.5rem);
  overflow: hidden;
}
.v4-statement::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(58% 58% at 50% 46%, rgba(167,136,49,0.10), transparent 70%);
  pointer-events: none;
}
.v4-statement > .container { position: relative; z-index: 1; }
.v4-statement .pv-advisors-grid { max-width: 900px; }
.pv-v4 .v4-statement .t-h2 {
  font-size: clamp(2.2rem, 4.6vw, 3.6rem);
  line-height: 1.14;
  max-width: 20em;
  margin-left: auto;
  margin-right: auto;
}
.v4-statement .t-body {
  max-width: 54ch;
  margin-left: auto;
  margin-right: auto;
  font-size: 1.06rem;
}

/* ---------------------------------------------------------------------------
   4. THE FACT REGISTER
   Three giant display figures centred under a heading is the single most
   recognisable generated-agency device there is. These are facts, so they are
   set as a quiet ruled line: left-aligned, at reading scale, not a statistics
   row. refine.css already unboxed them; this settles the type.
   ------------------------------------------------------------------------ */

.pv-v4 .adv-pillars { text-align: left; }
.pv-v4 .adv-pillar { padding-left: 0; padding-right: clamp(1.2rem, 2.4vw, 2rem); }
@media (min-width: 601px) {
  .pv-v4 .adv-pillars .adv-pillar + .adv-pillar { padding-left: clamp(1.6rem, 3vw, 2.4rem); }
}
.pv-v4 .adv-pillar-num {
  font-size: clamp(1.55rem, 2.6vw, 2.05rem);
  font-style: italic;
  color: var(--gold-soft);
  margin-bottom: 0.55rem;
}
.pv-v4 .adv-pillar-lbl { color: rgba(255,255,255,0.55); }

/* the Pavesen register keeps its centred reading - it sits under a centred
   logo lockup, where left-aligning would fight the block above it */
.pv-v4 .pv-pavesen-pillars .adv-pillar { text-align: center; padding-left: 1.5rem; padding-right: 1.5rem; }

/* ---------------------------------------------------------------------------
   5. BREAKING THE FOUR-BEAT RHYTHM
   Two section heads run their label and heading on one baseline instead of
   stacking eyebrow / rule / heading / body a fifth and sixth time.
   ------------------------------------------------------------------------ */

@media (min-width: 900px) {
  .v4-hdr-inline {
    display: grid;
    grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
    align-items: baseline;
    gap: clamp(2rem, 5vw, 4.5rem);
    margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
  }
  .v4-hdr-inline .t-eyebrow { margin-bottom: 0; padding-top: 0.55rem; }
  .v4-hdr-inline .t-h2 { margin-top: 0; }
}

/* ---------------------------------------------------------------------------
   6. CTA RESTRAINT
   A page of solid gold buttons reads as a funnel. The hero and the closing band
   keep the solid; the CTA in between is a quiet rule.
   ------------------------------------------------------------------------ */

.pv-v4 .v4-spread__cta .btn-blue {
  background: transparent;
  border: 0;
  color: var(--navy);
  padding: 1.35em 0;
  position: relative;
}
.pv-v4 .v4-spread__cta .btn-blue::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0.95em;
  height: 1px;
  background: var(--gold);
  opacity: 0.55;
  transition: opacity 0.4s var(--ease-ed);
}
.pv-v4 .v4-spread__cta .btn-blue:hover { background: transparent; color: #786123; }
.pv-v4 .v4-spread__cta .btn-blue:hover::after { opacity: 1; }

/* the Pavesen band closes a centred block - its pair of buttons stays, but the
   secondary one drops to a rule so the two do not read as equal weight */
.pv-v4 .pv-pavesen-actions { gap: 1rem 2.4rem; align-items: center; }

/* ---------------------------------------------------------------------------
   7. GOLD DISCIPLINE
   Large display gold is #a78831. The lighter #c9ad63 reads yellow at size, and
   is used only on small tracked caps, where it is doing legibility work.
   ------------------------------------------------------------------------ */

.pv-v4 .t-h2 em, .pv-v4 .t-hero em, .pv-v4 .cta-hl em { color: var(--gold); }
.pv-v4 .on-light .t-h2 em, .pv-v4 .v4-spread .t-h2 em { color: #786123; }

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


/* ---------------------------------------------------------------------------
   8. AIR, NOT VOIDS
   ----------------------------------------------------------------------------
   Every band ran the full section rhythm top AND bottom, so two consecutive
   dark sections stacked 256px of empty navy between them - and 300px either
   side of the statement. Same content, a page that no longer scrolls through
   holes. A band that follows another band opens tighter; the statement keeps
   its air, because that air is the point.
   ------------------------------------------------------------------------ */

.pv-v4 .pv-section + .pv-section:not(.v4-statement):not(.v4-spread) { padding-top: var(--pad-tight); }
.pv-v4 .pv-section:has(+ .pv-section):not(.v4-statement):not(.v4-spread) { padding-bottom: var(--pad-tight); }
.pv-v4 .pv-section:has(+ .pv-press-strip) { padding-bottom: var(--pad-tight); }
.pv-v4 .pv-section-hdr { margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }

/* the Pavesen shield watermark was hard-clipped by the section boundary, which
   reads as a rendering fault rather than as atmosphere. Faded at the edges. */
.pv-v4 .pv-pavesen-watermark {
  opacity: 0.035;
  -webkit-mask-image: radial-gradient(closest-side, #000 20%, transparent 68%);
  mask-image: radial-gradient(closest-side, #000 20%, transparent 68%);
}

/* the footer brand column was centred while the two columns beside it were
   left-aligned - a mixed alignment inside one grid row */
@media (min-width: 861px) {
  .pv-v4 .pv-footer-brand { text-align: left; }
  .pv-v4 .pv-footer-brand .tm-logo { justify-content: flex-start; }
  .pv-v4 .pv-footer-brand .tm-word { align-items: flex-start; }
  .pv-v4 .pv-footer-brand .pv-footer-tag { margin-left: 0; margin-right: 0; max-width: 34ch; }
}

/* ---------------------------------------------------------------------------
   9. THE FACT REGISTER CENTRES ONCE IT STACKS
   ----------------------------------------------------------------------------
   Left-aligning the register is right while it is three columns across: the
   rule above each fact gives the column its edge, and the eye reads along the
   line. Stacked into one column below 600px that reasoning disappears - the
   facts sit under a centred eyebrow, a centred statement and centred body copy,
   and a left-aligned run of three is then the only thing on the band that is
   not centred.

   The side padding has to go with it. `.pv-v4 .adv-pillar` carries a right
   padding that is invisible while the text hangs off the left edge, but pushes
   centred text off-centre by half of it.
   ------------------------------------------------------------------------ */

@media (max-width: 600px) {
  .pv-v4 .v4-statement .adv-pillars,
  .pv-v4 .v4-statement .adv-pillar { text-align: center; }
  .pv-v4 .v4-statement .adv-pillar { padding-left: 0; padding-right: 0; }
}