/* AI value creation for private equity: the page's own styles (13 Oct 2026, a proposal for Xavi). The page is the home's
   in look: its base, nav, sheet, questions and Selected work are linked from components/ as they are, and nothing of them is
   restyled here but what three panels need where the home counts five. What follows is what no linkable file holds: the
   hero, the closing and the footer (the home keeps those in its own page, so they're repeated here, as the newsletter's
   stylesheet does), and this page's sections.
   The book's rules hold: the tokens and their pairs, PP Neue Montreal at 400 and 500, spacing from its scale, no shadows,
   no opacity on a brand colour. No warm colour on the page's own grounds. The four figures bring their own styles
   (fig1.css to fig4.css), each scoped to its figure. */

/* PP Neue Montreal from homepage/fonts/ (git-ignored; the web licence is unconfirmed). These come after base.css's, whose
   paths are relative to the homepage page itself, so they're the ones used here, as on the careers page. */
@font-face{font-family:"PP Neue Montreal";src:url(../fonts/PPNeueMontreal-Book.otf) format("opentype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"PP Neue Montreal";src:url(../fonts/PPNeueMontreal-Medium.otf) format("opentype");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"PP Neue Montreal";src:url(../fonts/PPNeueMontreal-Bold.otf) format("opentype");font-weight:700;font-style:normal;font-display:swap}

.pe body{overflow-x:clip}   /* a row that runs to the screen's edges (the cases, on a phone) mustn't widen the page */

.pe main .lead{text-wrap:pretty}                           /* no word left alone on a last line, where the browser can */
/* a link inside a sentence: the sentence's own ink, a hairline under it. Every outside figure carries one, to its source */
.pe main .lead a,.pe .faq-a a,.pe-sources a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}
.pe main .lead a:hover,.pe .faq-a a:hover,.pe-sources a:hover{text-decoration-thickness:2px}

/* ---------- 1. the hero: the home hero's own measures (components/hero/hero.css), without its footage. Four things and a
   record, in four sizes of type: Detail, display, lead and button. The ground is the silk alone (silk-bg.js), drawn deeper
   where the words are; until it draws, and without WebGL, the plain Fathom ground. ---------- */
.pe-hero{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;background:var(--fathom);color:var(--white)}
.pe-hero .silk{position:absolute;inset:0;width:100%;height:100%;display:block}
.pe-hero .hero-in{position:relative;z-index:2;width:100%;padding-block:calc(var(--nav) + 64px) clamp(48px,7vh,88px)}
.pe-hero-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:end}
.pe-hero-copy{grid-column:1/span 7;min-width:0}
.pe-hero-copy > .detail{color:var(--mist)}                 /* the hero's one Sea Mist element, as in the book's web mock (hero.css) */
.pe-hero h1{margin:clamp(20px,2.083vw,40px) 0 clamp(20px,1.667vw,32px)}
.pe-hero h1 .soft{color:var(--grey)}                       /* two tones, the reverse of the home's: here the phrase is what must be read, so it's the white part */
.pe-hero .lead{color:var(--grey);max-width:40ch}
.pe-hero .ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:var(--head)}
/* scrolling away, the copy never enters the nav's bar (private-equity.js sets --cut, the bar's foot in the copy's own box):
   whole 32 px below the bar, gone at its foot. The home's (hero.css, hero.js) */
.pe-hero .hero-in > div.cut{-webkit-mask-image:linear-gradient(to bottom,transparent var(--cut),#000 calc(var(--cut) + var(--cut-soft,32px)));
  mask-image:linear-gradient(to bottom,transparent var(--cut),#000 calc(var(--cut) + var(--cut-soft,32px)))}
/* the record: at the right of the copy, its foot on the pill's. A heading in Detail, then two rows on white hairlines:
   the figure in Medium and its label in Book, both at the lead's size, and the sector in Detail at the row's end. The unit
   ("days") is Book, as the book sets a figure's unit */
.pe-record{grid-column:8/span 5;min-width:0}
.pe-record > .detail{margin-bottom:16px}
.pe-record li{display:grid;grid-template-columns:4.6em minmax(0,1fr) auto;column-gap:16px;align-items:baseline;padding-block:16px;border-top:1px solid var(--white);font-size:var(--t-lead);line-height:1.3}
.pe-record li:last-child{padding-bottom:0}
.pe-record b{font-weight:500;white-space:nowrap}
.pe-record b small{font-size:inherit;font-weight:400}
.pe-record li .detail{text-align:right}
/* a figure that counts (the record's two here, and Selected work's three): its digits stay in the page as they're
   published, kept in place without ink (not visibility:hidden, so a screen reader and innerText still read the published
   figure), and the running value is drawn over them in the figure's own colour, set from the right in the same box, so
   nothing moves and nothing the page says changes (private-equity.js). Only under html.motion: if the page takes it off
   because the shared script never came, a zero drawn over the digits goes with it and the figures stand as written */
html.motion .pe-n[data-v]{position:relative;display:inline-block;-webkit-text-fill-color:transparent}
html.motion .pe-n[data-v]::after{content:attr(data-v);content:attr(data-v) / "";position:absolute;right:0;top:0;-webkit-text-fill-color:currentColor}
/* the first view: the record comes in whole, with the pill (base.css names the pill's entrance; a .detail inside .hero-in
   would otherwise rise with the eyebrow, and the record's three would leave its figures behind) */
html.motion .pe-record{transition:opacity .9s ease .55s,transform 1s cubic-bezier(.2,.7,.2,1) .55s}
html.motion:not(.revealed) .pe-record{opacity:0;transform:translateY(10px)}
html.motion .hero-in .pe-record .detail{transition:none}
html.motion:not(.revealed) .hero-in .pe-record .detail{opacity:1;transform:none}
@media (max-width:1180px){.pe-hero-copy{grid-column:1/span 6}.pe-record{grid-column:7/span 6}}
/* stacked: the record follows the pill, inside the hero. On a phone the hero is then taller than the screen: the first
   screen holds the eyebrow, the title, the subline and the pill, and the record comes up under them */
@media (max-width:980px){
  .pe-hero-copy,.pe-record{grid-column:1/-1}
  .pe-record{margin-top:var(--head)}
}
@media (max-width:760px){
  .pe-hero .hero-in{padding-top:calc(var(--nav) + 40px);padding-bottom:40px}
  .pe-record li{grid-template-columns:4.6em minmax(0,1fr);row-gap:4px;padding-block:12px}
  .pe-record li .detail{grid-column:1/-1;grid-row:1;text-align:left}
}

/* ---------- 2. in short: the answer and the table ---------- */
.pe-short .rail .photo{aspect-ratio:4/3;margin-top:12px;align-self:stretch}   /* as For funds' on the home; here it stays on a phone, over the answer and its table */
.pe-short .sub{text-wrap:pretty}
.pe-short .lead{margin-top:24px;max-width:58ch}
.pe-short h3{margin-top:var(--head)}
/* a table, the book's way (design-system §9): a Detail line in Deep Teal over a 1 px Fathom rule; rows in Book, parted by
   1 px Coastal Grey hairlines; no stripes, no vertical rules, no fills. The row's own header is in Medium.
   The Detail line is the table's title. Its two column heads, "Who" and "What they do", are in the table for a screen
   reader and for the engines, and not drawn: under a title that says "Who does what" they read as the same words twice */
.pe-who{width:100%;margin-top:12px;border-collapse:collapse;text-align:left}
.pe-who thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.pe-who th{font-weight:500}                                /* a browser's own table head is bold: unseen, it would still fetch the Bold file */
.pe-who tbody th,.pe-who td{padding:20px 0;border-bottom:1px solid var(--grey);vertical-align:top;font-size:var(--t-lead);line-height:1.45}
.pe-who tbody tr:first-child > *{border-top:1px solid var(--fathom)}
.pe-who tbody th{width:36%;padding-right:24px}
.pe-who td{color:var(--deep);text-wrap:pretty}
/* on a phone: four stacked pairs, the "who" over its sentence */
@media (max-width:760px){
  .pe-who,.pe-who tbody,.pe-who tr,.pe-who tbody th,.pe-who td{display:block}
  .pe-who tbody{border-top:1px solid var(--fathom)}
  .pe-who tr{padding-block:16px;border-bottom:1px solid var(--grey)}
  .pe-who tbody th,.pe-who td,.pe-who tbody tr:first-child > *{width:auto;padding:0;border:0}
  .pe-who td{margin-top:4px}
}

/* ---------- 3 to 7: the four figures' places. Each takes the full width its section gives: the container for figure 1,
   the stage for the others. Until a figure is in, its place takes no room ---------- */
.pe-market .head-side,.pe .work .head-side{grid-column:8/span 5}        /* a lead of two sentences beside the title: a column wider than the home's, so it keeps near the title's own height */
/* base.css sets a head from its foot (align-items:end), which holds while the title's side is the taller, as on the home.
   Where the lead is the taller, that pushes the eyebrow down, so the head is set from the top and the eyebrow starts where
   every other section's does: #market's lead at every width (four lines), and Selected work's in a window of 1220 px or
   less, where it runs to four lines (from 1221 it has three, and is the shorter of the two) */
.pe-market .head{align-items:start}
@media (min-width:981px) and (max-width:1220px){.pe .work .head{align-items:start}}
.pe-fig:empty{display:none}
.pe-note{margin-top:var(--head);max-width:44ch}                         /* at most 64 characters a line, as the questions' answers are held */
.pe-fig:empty + .pe-note{margin-top:0}
.pe-sprint .rail .lead{color:var(--grey)}                                  /* on Fathom: white the title, Coastal Grey the rest */
/* a title of two sentences: in the rail each starts a line of its own, so the break falls where the sense does (as Who we
   are's does on the home), and the rail takes the column beside it so the first keeps to two lines. Stacked, it runs on */
@media (min-width:981px){.pe-counted > .wrap > .rail{grid-column:1/span 5}.pe-counted .rail .h2 .sent{display:block}}
@media (max-width:980px){
  .pe-market .head-side,.pe .work .head-side{grid-column:1/-1}
  .pe .stage:empty{display:none}
}

/* ---------- 6. selected work: the home's module with three panels. Its styles count five (work.css): the row's two sizes
   and each photo's crop are written here for three, in this page's order. A narrow panel and the open one keep the home's
   ratio, 1 to 2.6 ---------- */
.pe .wk-panels .wkp-panel:nth-child(1){--wkp-px:50%;--wkp-py:55%;--wkp-fx:.5;--wkp-fy:.55}    /* machined rings: the ring in the middle */
.pe .wk-panels .wkp-panel:nth-child(2){--wkp-py:25%;--wkp-fx:.36;--wkp-fy:.2}                 /* the wall of diagrams: the home's third. Its narrow band is a little further right than the home's (.3): this panel is wider, and at .3 its left edge cut through a colleague's face */
.pe .wk-panels .wkp-panel:nth-child(3){--wkp-py:45%;--wkp-fx:.56;--wkp-fy:.45}                /* the port: the home's first */
@container wk-panels (min-width:1184px){
  .pe .wk-panels.wkp-on .wkp-list{--wkp-n:calc((100cqw - 2*var(--wkp-g))/4.6);--wkp-o:calc(100cqw - 2*var(--wkp-g) - 2*var(--wkp-n))}
}

/* ---------- 8. who we are: the home's block (components/about/about.css) on white, each portrait three quarters of its
   column (180 px at 1440, where the home's is 240), uncropped in its own 4:5 frame, in its own black and white, with no
   effect on a face. Under each: the name, the role, a line and the link, on shared rows so the three stay level ---------- */
.pe-team .people{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto auto auto 1fr auto;column-gap:var(--gap)}
.pe-team .person{display:grid;grid-row:span 5;grid-template-rows:subgrid;justify-items:start}
.pe-team .photo{width:75%;aspect-ratio:4/5;border-radius:var(--r);background:var(--grey);margin-bottom:20px}
.pe-team .person h3{font-size:clamp(18px,1.39vw,26px);font-weight:400;line-height:1.25;letter-spacing:-.01em}
.pe-team .role{margin-top:4px;font-size:clamp(15px,1.042vw,20px);font-weight:500;line-height:1.4;color:var(--deep)}
.pe-team .bio{margin-top:12px;font-size:clamp(15px,1.042vw,20px);line-height:1.5;text-wrap:pretty}
.pe-team .person .link{margin-top:16px;font-size:clamp(15px,1.042vw,20px)}
/* the training arm: one strip under the three, parted by a hairline. Its title stands under the first person and its
   sentence under the other two, on the people's own columns */
.pe-teach{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--gap);align-items:start;margin-top:var(--head);padding-top:24px;border-top:1px solid var(--edge)}
.pe-teach > div{grid-column:2/span 2}
.pe-teach p{font-size:clamp(15px,1.042vw,20px);line-height:1.5;color:var(--deep);max-width:48ch}
.pe-teach .link{display:inline-block;margin-top:12px;margin-right:24px;font-size:clamp(15px,1.042vw,20px)}
@media (max-width:980px){.pe-team .people,.pe-teach{max-width:768px}}
/* on a phone: the three as a list, each portrait beside its words, as on the home; the strip's title over its sentence */
@media (max-width:760px){
  .pe-team .people{display:block}
  .pe-team .person{display:grid;grid-template-columns:104px minmax(0,1fr);grid-template-rows:auto auto auto 1fr;column-gap:16px;justify-items:start}
  .pe-team .person+.person{margin-top:28px}
  .pe-team .photo{width:100%;grid-row:1/span 4;align-self:start;margin-bottom:0}
  .pe-team .person h3{font-size:20px}
  .pe-team .bio{margin-top:8px}
  .pe-team .person .link{margin-top:8px;display:inline-block;padding-block:12px;margin-bottom:-12px}
  .pe-teach{display:block}
  .pe-teach > div{margin-top:8px}
  .pe-teach .link{padding-block:12px;margin-block:0 -12px}
}

/* ---------- 9. the sources, under the questions: a Detail line and an open, numbered list ---------- */
.pe-sources{margin-top:var(--head)}
.pe-sources ol{margin-top:12px;padding-left:20px;list-style:decimal;display:flex;flex-direction:column;gap:8px;max-width:64ch}
.pe-sources ol li{padding-left:4px}
.pe-sources p{margin-top:16px}
@media (max-width:760px){.pe-sources ol{gap:12px}}

/* the sheet is the home's, in its own colours and with its own picture; nothing of it is restyled. One thing is this page's
   words' doing: its lead ends on "KPI." alone on a line, so that line is balanced */
.pe .sheet-copy .lead{text-wrap:balance}

/* ---------- 10. closing: the home's (src/homepage/template.html), on the silk (data-silk). One row, the email ---------- */
.closing{position:relative;overflow:hidden}
.closing .wrap{position:relative;z-index:1;padding-block:calc(var(--sec) + var(--head))}
.closing .copy{grid-column:1/span 6;display:flex;flex-direction:column;gap:24px;align-items:flex-start}
.closing .display{max-width:17ch}                          /* the home's is 12ch for "your operation"; this title is longer and keeps its two lines */
.closing .lead{color:var(--grey);max-width:40ch}
.closing .btn{margin-top:8px}
.contact-rows{align-self:stretch;margin-top:24px;max-width:520px}
.contact-rows div{display:grid;grid-template-columns:96px minmax(0,1fr);gap:16px;padding-block:16px;border-top:1px solid var(--grey)}
.contact-rows dd{font-size:17px}
.contact-rows a{text-decoration:none}
.contact-rows a:hover{text-decoration:underline;text-underline-offset:6px}
@media (max-width:900px){.closing .copy{grid-column:1/-1}}
@media (max-width:760px){.contact-rows a{display:inline-block;padding-block:12px;margin-block:-12px}}   /* a taller target, without moving anything */

/* ---------- footer: the home's (its rules live in the home's own page, so they're repeated here), without the
   description's line and the offices' column ---------- */
.footer{padding-block:var(--head);font-size:15px}
.footer .grid{row-gap:40px}
.footer .brand{grid-column:1/span 4;display:flex;flex-direction:column;gap:20px;align-items:flex-start}
.footer .brand img{height:32px;width:auto}
.footer .col{grid-column:span 2;display:flex;flex-direction:column;gap:12px}
.footer .col.first{grid-column:9/span 2}                   /* two columns where the home has three: they keep the right edge */
.footer .col ul{display:flex;flex-direction:column;gap:8px}
.footer a{text-decoration:none}
.footer a:hover{text-decoration:underline;text-underline-offset:6px}
.footer .legal{grid-column:1/-1;border-top:1px solid var(--edge);padding-top:20px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:13px;color:var(--deep)}
@media (max-width:900px){.footer .brand{grid-column:1/-1}.footer .col,.footer .col.first{grid-column:span 6}}
/* on a phone every footer line is a 40 px row, so a link is easy to hit and the lists keep one rhythm */
@media (max-width:760px){.footer .col{gap:4px}.footer .col ul{gap:0}.footer .col li,.footer .col li a{display:flex;align-items:center;min-height:40px}}

/* ---------- Prove it once: the home's For funds diagram (components/diagrams/portfolio/), as the home has it. Its steps'
   words stand in the markup as a list, which the diagram reads for its caption: a reader and a search engine find them
   whole there, and the eye reads them one at a time in the caption, so the list itself is not drawn ---------- */
.pe-steps{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}