/**
* Private Equity page (slug: private-equity) corrections over the carried
* Webflow baseline.
*
* The PE markup reuses the live Webflow classes verbatim, so webflow.css styles
* it pixel-for-pixel. This file only holds the WP-context delta: the dark
* `.section_home-hero.sub-hero` hero carries its own top padding that already
* clears the fixed header, so the interior-page `#main { padding-top:120px }`
* (home-figma.css) is redundant here — zero it so the hero starts flush like
* the live site. Must out-specify home-figma's `body:not(.home) #main` (1,1,1).
*
* Loaded only on the Private Equity page, after home-figma.css, so it wins.
*/
body:not(.home) #main.main-wrapper {
padding-top: 0;
}
/* Anastasiia #6.2 — the hero eyebrow sits on the purple hero, where the base
`.text-style-eyebrow` colour (dark, correct on light pages) is unreadable.
Figma 4069:809 = #fdfdfc (token neutral/shades/50). Scoped to the sub-hero so
only the PE hero eyebrow turns near-white (the CTA eyebrow keeps its colour). */
.section_home-hero.sub-hero .pe-text-style-eyebrow {
color: #fdfdfc;
}
/* Hero top padding = 300px to match the DESKTOP Figma frame (carried CSS gives
240; Figma `Section` 4069:806 = 300/726/180/140). Desktop only — the mobile
Figma frame (4627:9565) wants ~72px top, so leave the carried mobile value. */
@media screen and (min-width: 992px) {
.section_home-hero.sub-hero .home-hero.padding-vertical {
padding-top: 300px;
}
/* Anastasiia #6.3 — the base `.section_home-hero { min-height: 61.438rem }`
(983px) forces the PE sub-hero ~75px taller than its content, leaving empty
purple below the two white geometric squares. The squares are bottom-anchored
to the inner `.padding-vertical.home-hero` (~908px), so they stop short of the
section's bottom edge. Drop the min-height so the section collapses to its
content height and the squares sit flush with the bottom — matching Figma
4069:806 (section bottom = figures bottom). */
.section_home-hero.sub-hero {
min-height: auto;
}
}
/* Challenge section = ONE white bordered card (Figma 4069:824: padding 60,
1px #E6E9EE border, radius 6, bg #FFFFFF) holding a row of two text columns
(gap 40) — the live site splits this into two borderless cards; this restores
the Figma design. */
.pe-challenge-card {
box-sizing: border-box;
display: flex;
gap: 40px;
align-items: flex-start;
width: 100%;
padding: 60px;
background-color: #ffffff;
border: 1px solid #e6e9ee;
border-radius: 6px;
}
.pe-challenge-card .pe-challenge-col {
flex: 1 1 0;
margin: 0;
color: #1a1a1a;
font-size: 16px;
line-height: 24px;
text-align: left;
}
@media screen and (max-width: 767px) {
.pe-challenge-card {
flex-direction: column;
/* Anastasiia (mobile QA, node 4627:9580) — "remove the unnecessary spacing".
On mobile the two challenge text columns stack, so the 24px column gap +
the 32px side padding left the checklist looser/taller than Figma (which
is one tight list, padding 32/24). Tighten the stacked gap to 12px and
bring the side padding to 24px so it reads as one continuous list. */
gap: 12px;
padding: 32px 24px;
}
/* Diagnostic CTA card stacks on mobile (Figma 5641:25715: column, padding
32, gap 40) — the carried CSS keeps it a row with ~100/116 padding. */
.pe-cta_component {
flex-direction: column;
gap: 40px;
padding: 32px;
}
/* Hero shape graphic: on mobile the Figma frame (4627:9577) stacks it BELOW
the text/CTA (~257×259), not absolutely overlapping the copy as the
carried desktop layout does. Pull it back into flow under the column. */
.section_home-hero.sub-hero .pe-hero_img-wrapper {
position: relative;
inset: auto;
width: 257px;
height: 259px;
margin: 24px auto 0;
align-self: center;
}
/* Diagnostic magnifier: Figma mobile (5641:25724) shows it 262px BELOW the
text; the carried CSS collapses it to 0×0 absolute. Put it in flow. */
.pe-cta_component .div-block-48,
.pe-cta_component .div-block-47 {
position: static;
display: block;
width: 100%;
text-align: center;
}
.pe-cta_component .image-2 {
position: static;
float: none;
display: block;
width: 240px;
height: 240px;
max-width: none;
margin: 0 auto;
}
}
/* ─── Anastasiia QA (2026-06-22) ─────────────────────────────────────────── */
/* #7: the PE hero CTA "BOOK A DIAGNOSTIC CALL" rendered with an underlined
label (inherited anchor decoration) — remove it. */
.button-pe.openpopup.open-popup-trigger { text-decoration: none; }
/* #8.2: the PE mobile hero button "GET YOUR FREE DIAGNOSIS" rendered BLACK
(the .is-tertiary style) while the desktop .button-pe is white. Match the
desktop look — off-white-gray bg + black text (same primitives tokens). */
.button.is-tertiary.is-home-hero.mobilebutmain {
background-color: var(--_primitives---colors--off-white-gray);
border: 1px solid var(--_primitives---colors--off-white-gray);
color: var(--_primitives---colors--black);
}
/* #8.3 (Anastasiia QA 2026-06-22): the PE hero geo-shape wrapper rendered
horizontally CENTRED (~x67) and a bit high. Figma mobile (frame 4627:9565)
places the 258×258 shape container flush to the hero's right edge, lower —
at x132,y483 in the 390-wide hero. The wrapper is the right SIZE (257×259);
only its position was off. Right-align it (margin-left:auto), bleed the 24px
hero padding (margin-right:-24), and drop it to y≈483 (margin-top:76). */
@media (max-width: 767px) {
.home-hero_img-wrapper.pe-hero_img-wrapper {
margin: 76px -24px 0 auto !important;
}
/* #8.3 cont. (Anastasiia — QA-failed 2×) — the geo shape must reach the
BOTTOM of the purple hero; the carried `.home-hero.padding-vertical` adds
70px bottom padding, leaving a purple gap UNDER the shape. Figma's hero
frame (4627:9565) is 742px tall with padding-bottom 0 and the geo bottom
at 741 — i.e. flush, no gap. Zero the bottom padding on mobile so the
section ends exactly at the geo's bottom. */
.section_home-hero.sub-hero .home-hero.padding-vertical {
padding-bottom: 0;
}
}
/* ─── A1 = Anastasiia #2 — PE hero frame lines too bright on purple ──────────
The carried global frame lines read at full #e6e9ee (230,233,238) over the
purple hero: the vertical rails (.pinstripes overlay, z-index:4) and the
horizontal navbar line (.ld-top-stripe, z-index:3). Figma 4069:804 draws them
faint — rgba(253,253,252,0.2), sampled (125,110,246) over the #5d4af5 hero
(matches the footer's .ld-footer::before pattern). pe.css loads only on PE.
Fix: lift the opaque purple hero above those overlays so they're hidden in the
hero region, then redraw both lines faint via the hero's own pseudo-elements.
(Other purple sections — ideal-partners, dark logo strip — are A2/A3.) */
.section_home-hero.sub-hero {
position: relative;
z-index: 5;
}
/* hide the carried navbar line on PE — redrawn faint via ::after below */
.ld-top-stripe { display: none; }
/* horizontal navbar line, faint (all viewports; pill-centred y) */
.section_home-hero.sub-hero::after {
content: "";
position: absolute;
z-index: 0;
top: 66px;
left: 0;
right: 0;
border-top: 1px solid rgba(253, 253, 252, 0.2);
pointer-events: none;
}
@media (max-width: 991px) {
.section_home-hero.sub-hero::after { top: 49px; }
}
/* vertical rails at the container-large edges — desktop only (global rails are
display:none on tablet/mobile, so match that) */
@media (min-width: 992px) {
.section_home-hero.sub-hero::before {
content: "";
position: absolute;
z-index: 0;
top: 0;
bottom: 0;
left: calc(50% - 640px);
right: calc(50% - 640px);
border-left: 1px solid rgba(253, 253, 252, 0.2);
border-right: 1px solid rgba(253, 253, 252, 0.2);
pointer-events: none;
}
}
/* mobile/tablet — the global pinstripes draw no rails below 992px, but Figma's
mobile hero (4627:9565) keeps the faint side rails (its "Border" sits at x8 /
width 374, i.e. inset 8px on both edges). Draw them on the hero so the purple
frame runs down the left + right edges on mobile too. */
@media (max-width: 991px) {
.section_home-hero.sub-hero::before {
content: "";
position: absolute;
z-index: 0;
top: 0;
bottom: 0;
left: 8px;
right: 8px;
border-left: 1px solid rgba(253, 253, 252, 0.2);
border-right: 1px solid rgba(253, 253, 252, 0.2);
pointer-events: none;
}
}
/* ─── row13 (Anastasiia) — "Our Role in Your Playbook" cards missing stroke ──
The 3×2 card grid (.home-deliver_card-item) renders borderless; Figma gives
each card a 1px #e6e9ee stroke + 6px radius (same as .pe-challenge-card).
pe.css is PE-only, so this is scoped to the Private Equity page. */
.home-deliver_card-item {
border: 1px solid #e6e9ee;
border-radius: 6px;
}
/* ─── row11 (Anastasiia) — "What Makes Us Different" dividers misalign ───────
The two columns (.home-data_list-left/right) hold item/divider/item/divider/
item; items are 80px (1-line) or 104px (2-line desc), so the dividers land at
different heights across the columns. Items are only ever 80 or 104px → give
them a uniform min-height so every row is 104px and the dividers line up
(matches Figma's equal rows). Desktop two-column layout only. */
@media (min-width: 768px) {
.home-data_list-item { min-height: 104px; }
}
/* ─── A2 = Anastasiia row12 — "Ideal Partners" purple block: faint rails ─────
The purple #5d4af5 fill is a CHILD layer (.pe-how_bg-wrapper, baseline
position:absolute; inset:0; z-index:-1) inside .section_home-how. Do NOT touch
that wrapper — making it position:relative collapses it to height:0 and the
purple stops painting (white heading on light page = invisible ghost text).
Instead lift the whole SECTION above the .pinstripes overlay (z-index:4) so the
bright #e6e9ee rails are hidden in its region (the wrapper keeps filling it
purple), then redraw the faint Figma rails rgba(253,253,252,0.2) on the section.
.section_home-how is unique to the Ideal Partners section on this page. */
.section_home-how.top-border-line {
position: relative;
z-index: 5;
}
@media (min-width: 992px) {
.section_home-how.top-border-line::before {
content: "";
position: absolute;
z-index: 0;
top: 0;
bottom: 0;
left: calc(50% - 640px);
right: calc(50% - 640px);
border-left: 1px solid rgba(253, 253, 252, 0.2);
border-right: 1px solid rgba(253, 253, 252, 0.2);
pointer-events: none;
}
}
/* ─── B3 (Anastasiia row12) — Ideal Partners caption too close to the divider ─
The "We are the behind-the-scenes…" caption (.text-block-2) sits flush against
the last list divider (gap 0). Figma puts a ~68px gap above it. */
.idealpartners-how .text-block-2 {
margin-top: 64px;
}
/* ─── #4 cont. (Anastasiia mobile QA, node 4627:9580) — tighten the Challenge
section's spacers to Figma: heading→subtitle 12px (carried .spacer-24 = 18px on
mobile) and the gaps around the card 20px (carried .spacer-60 = 34px). Scoped via
:has(.pe-challenge-card) so the shared spacer classes stay intact everywhere else
(incl. the "Our Role" deliver section on this same page). */
@media (max-width: 767px) {
.home-deliver_component:has(.pe-challenge-card) .spacer-24 { padding-top: 12px; }
.home-deliver_component:has(.pe-challenge-card) .spacer-60 { padding-top: 20px; }
}
/* ─── Anastasiia Design Audit (xlsx) — PE mobile ────────────────────────────
Three flagged items on the PE page below desktop. */
/* R38 (row 38) — "What It Looks Like in Practice": the section title is
display:none below desktop (so the section opened with empty space above the
first card). Desktop shows it (block, 40px/500). Un-hide it on tablet+mobile. */
@media (max-width: 991px) {
.section_pe-features .home-features_component h2.text-align-center { display: block; }
}
@media (max-width: 767px) {
/* R38 cont. — card titles (Before / Engagement / After) read too light at
400; make them bolder so they stand as card headings. */
.home-features_list-card-h3 { font-weight: 600; }
/* R39 (row 39) — "Ideal Partners": the bullet list is wrapped in a card on
mobile (1px white border, 5px radius, 21px side padding); desktop has none
(border 0, padding 0). Match desktop: no border, no card, no side margins. */
.idealpartner-list-wrapper {
border: none;
border-radius: 0;
padding: 0;
}
/* R40 (row 40) — diagnostic CTA ("Let's start with a diagnostic"): the primary
"Book a diagnostic Call" should be full-width with no violet border, and the
secondary "Schedule 15-Min Assessment" is not needed on mobile (it is already
hidden on desktop). */
.pe-cta_component .button.diagnostic-cta {
width: 100%;
border-color: transparent;
}
.pe-cta_component .button.is-secondary.mobilebutmain {
display: none;
}
}
/* ─── R6 (Anastasiia Design Audit, re-fix after QA-fail) — PE "Challenge PE Firms
Face" list. The points are split into two
halves
(a desktop 2-column layout); on mobile they stack and the flex gap between the
two columns broke the list into two groups with an oversized gap in the middle.
Figma (4627-9580) renders the whole list as ONE continuous text block. Collapse
the inter-column gap + paragraph margins on mobile so the bullets read as a
single uninterrupted list (line-height supplies the per-item spacing). */
@media (max-width: 767px) {
.pe-challenge-card {
gap: 0;
}
.pe-challenge-col {
margin: 0;
}
}