/* /fund/private-investors/ — the bespoke page's own CSS. Loaded after investor-type.css, which
   still supplies the frame, the sticky rail, the grounds and the entrance motion; everything
   here is composition for the six moments and nothing is shared with another audience page.

   Sizing is on @container page, like every other Tier 2 page. */

/* ---- 1 hero: copy left, the photograph bleeding off the right edge of the page ---- */
.pi-hero{position:relative;background:var(--brand-paper);padding:96px 0 104px;overflow:clip;--pi-bleed:32px}
.pi-hero__g{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:0 40px;align-items:center}
.pi-hero__copy{grid-column:1 / span 6}
.pi-h1{font-size:58px;line-height:1.03;letter-spacing:-.032em;color:var(--brand-navy);max-width:17ch;margin-top:14px}
.pi-hero__l{margin-top:26px;font-size:19px;line-height:1.58;color:var(--text-secondary);max-width:40ch}
.pi-hero__act{margin-top:38px;display:flex;flex-wrap:wrap;align-items:center;gap:16px 32px}
.pi-tel{font-family:var(--font-sans);font-size:15px;color:var(--sky-800);text-decoration:none;border-bottom:1px solid rgba(46,127,184,.35);padding-bottom:2px}
.pi-tel:hover{color:var(--sun-700)}
/* The photograph bleeds to the RIGHT PAGE EDGE and no further: an over-extended box would make
   object-fit:cover compose the crop against an area that is mostly off-canvas, and the visible
   sliver would then show whatever happens to sit at the source's left edge. Bleeding by exactly
   the page margin keeps the crop honest against what is actually on screen. */
.pi-hero__ph{grid-column:8 / span 5;margin:0;width:calc(100% + 32px + max(0px, (100vw - 1440px) / 2));height:520px}
.pi-hero__ph img{display:block;width:100%;height:100%;object-fit:cover;object-position:70% 50%}

/* ---- 2 why: one composition ---- */
.pi-why__g{display:grid;grid-template-columns:repeat(11,minmax(0,1fr));gap:40px}
.pi-why__st{grid-column:1 / span 6}
.pi-st{font-size:46px;line-height:1.12;letter-spacing:-.026em;color:var(--brand-navy);margin:12px 0 0}
.pi-why__p{grid-column:8 / span 4;align-self:end;padding-bottom:6px}
.pi-why__p p{font-family:var(--font-sans);font-size:16px;line-height:1.66;color:var(--text-secondary);margin:0}
.pi-why__p p+p{margin-top:16px}
.pi-wide{position:relative;margin:64px 0 0}
.pi-wide img{display:block;width:100%;aspect-ratio:21 / 9;object-fit:cover;border-radius:6px}
.pi-wide figcaption{position:absolute;left:24px;bottom:20px;font-family:var(--font-sans);font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#fff}
.pi-wide::after{content:"";position:absolute;left:0;right:0;bottom:0;height:45%;border-radius:0 0 6px 6px;background:linear-gradient(180deg,transparent 0%,rgba(0,25,45,.62) 100%);pointer-events:none}

/* ---- 3 participate: two equal editorial paths, hairline centred in the gutter ---- */
.pi-part__g{margin-top:56px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 64px}
/* Both paths must render identically weighted, so BOTH boxes widen into the gutter by their own
   padding: A takes margin-right:-32px, B takes margin-left:-32px. Compensating only one of them
   leaves that path 32px wider with a visibly larger photograph, which reads as emphasis. */
.pi-path{padding-right:32px;margin-right:-32px}
.pi-path+.pi-path{padding:0 0 0 32px;margin:0 0 0 -32px;border-left:1px solid rgba(0,43,84,.16)}
.pi-path__ph img{display:block;width:100%;aspect-ratio:3 / 2;object-fit:cover;border-radius:6px}
.pi-path__ph{margin:0 0 24px}
.pi-path__k{font-family:var(--font-sans);font-size:10.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--sky-800);margin:0}
.pi-path__n{font-size:31px;line-height:1.12;letter-spacing:-.02em;color:var(--brand-navy);margin:10px 0 0}
.pi-path__l{font-family:var(--font-display);font-weight:400;font-size:19px;line-height:1.45;color:var(--text-primary);margin:12px 0 0;max-width:26ch}
.pi-path__d{margin:26px 0 28px;border-top:2px solid var(--brand-navy)}
.pi-path__d>div{padding:16px 0;border-bottom:1px solid var(--line)}
.pi-path__d dt{font-family:var(--font-sans);font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted)}
.pi-path__d dd{font-family:var(--font-sans);font-size:15.5px;line-height:1.6;color:var(--text-secondary);margin:7px 0 0}

/* ---- 4 the Navy signature moment: four large rows ---- */
.pi-uw__hd{max-width:none}
.pi-uw__h{font-size:44px;line-height:1.06;letter-spacing:-.026em;color:var(--text-inverse);margin:14px 0 0;max-width:20ch}
.pi-uw__sf{font-family:var(--font-sans);font-size:17px;line-height:1.6;color:rgba(198,222,243,.9);margin:20px 0 0;max-width:52ch}
.pi-uw__l{list-style:none;margin:56px 0 0;padding:0;border-top:1px solid rgba(145,195,235,.3)}
.pi-uw__r{display:grid;grid-template-columns:auto minmax(0,4fr) minmax(0,7fr);gap:0 40px;padding:26px 0;border-bottom:1px solid rgba(145,195,235,.22);align-items:baseline}
.pi-uw__n{font-family:var(--font-display);font-size:20px;color:var(--brand-accent);width:44px}
.pi-uw__t{font-size:27px;line-height:1.14;letter-spacing:-.018em;color:var(--text-inverse);margin:0}
.pi-uw__d{font-family:var(--font-sans);font-size:16px;line-height:1.62;color:rgba(198,222,243,.86);margin:0;max-width:60ch}

/* ---- 5 working: text-led and quiet ---- */
.pi-work__g{display:grid;grid-template-columns:repeat(11,minmax(0,1fr));gap:48px 40px}
.pi-work__hd{grid-column:1 / span 5;position:sticky;top:128px;align-self:start}
.pi-promo{font-family:var(--font-display);font-weight:500;font-size:33px;line-height:1.18;letter-spacing:-.02em;color:var(--brand-navy);margin:16px 0 0;max-width:17ch}
.pi-work__l{grid-column:7 / span 5}
.pi-work__i+.pi-work__i{margin-top:34px}
.pi-work__i h3{font-size:22px;line-height:1.18;letter-spacing:-.014em;color:var(--brand-navy);margin:0}
.pi-work__i p{font-family:var(--font-sans);font-size:16px;line-height:1.66;color:var(--text-secondary);margin:10px 0 0;max-width:52ch}
.pi-work__tel{font-family:var(--font-sans);font-size:15px;color:var(--text-muted);margin:40px 0 0;padding-top:22px;border-top:1px solid var(--line)}
.pi-work__tel a{color:var(--sky-800);text-decoration:none;border-bottom:1px solid rgba(46,127,184,.35);padding-bottom:2px}
.pi-work__tel a:hover{color:var(--sun-700)}

/* ---- 6 before investing: three concise rows ---- */
.pi-before__l{margin:52px 0 0;border-top:2px solid var(--brand-navy)}
.pi-before__r{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,8fr);gap:10px 56px;padding:24px 0;border-bottom:1px solid var(--line);align-items:baseline}
.pi-before__r dt{font-family:var(--font-display);font-weight:500;font-size:23px;line-height:1.18;letter-spacing:-.014em;color:var(--brand-navy)}
.pi-before__r dd{font-family:var(--font-sans);font-size:16px;line-height:1.64;color:var(--text-secondary);margin:0;max-width:62ch}

/* ---- the close: the phone number is the largest thing in it ---- */
.pi-cl{position:relative;isolation:isolate;color:var(--text-inverse)}
.pi-cl::before{content:"";position:absolute;top:0;bottom:0;left:-1600px;right:-1600px;background:var(--brand-navy);z-index:-1}
.pi-cl__g{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:40px;padding:112px 0 116px;align-items:start}
.pi-cl__copy{grid-column:1 / span 6}
.pi-cl__h{font-size:46px;line-height:1.04;letter-spacing:-.028em;color:var(--text-inverse);max-width:13ch}
.pi-cl__l{font-family:var(--font-sans);font-size:17px;line-height:1.62;color:rgba(198,222,243,.88);margin:22px 0 0;max-width:46ch}
.pi-cl__act{grid-column:8 / span 5;justify-self:start}
.pi-cl__tel{display:block;font-family:var(--font-display);font-weight:400;font-size:44px;line-height:1.05;letter-spacing:-.02em;color:var(--text-inverse);text-decoration:none}
.pi-cl__tel:hover{color:var(--brand-accent)}
.pi-cl__k{font-family:var(--font-sans);font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--sky-300);margin:12px 0 32px}
.pi-cl__act .ds-btn--primary{background:var(--brand-accent);border-color:var(--brand-accent);color:var(--brand-navy)}
.pi-cl__act .ds-btn--primary:hover{background:var(--sun-700);border-color:var(--sun-700);color:var(--brand-navy)}

/* ---- responsive ---- */
@container page (max-width:1180px){
  .pi-h1{font-size:48px}
  .pi-st{font-size:39px}
  .pi-uw__h{font-size:38px}
}
@container page (max-width:1000px){
  .pi-why__st{grid-column:1 / span 7}
  .pi-why__p{grid-column:1 / span 9;align-self:auto;margin-top:8px}
  .pi-work__hd{grid-column:1 / -1;position:static}
  .pi-work__l{grid-column:1 / -1}
  .pi-promo{max-width:24ch}
}
@container page (max-width:900px){
  .pi-hero{padding:56px 0 0}
  .pi-hero__g,.pi-cl__g{grid-template-columns:minmax(0,1fr);gap:40px}
  .pi-hero__copy,.pi-cl__copy,.pi-cl__act{grid-column:1 / -1}
  .pi-hero__ph{grid-column:1 / -1;width:calc(100% + var(--pi-bleed,32px) * 2);margin:0 0 0 calc(var(--pi-bleed,32px) * -1);height:340px}
  .pi-h1{font-size:38px}
  .pi-st{font-size:32px}
  .pi-why__g,.pi-work__g{grid-template-columns:minmax(0,1fr);gap:28px}
  .pi-why__st,.pi-why__p{grid-column:1 / -1}
  .pi-wide img{aspect-ratio:16 / 9}
  .pi-part__g{grid-template-columns:minmax(0,1fr);gap:56px}
  .pi-path,.pi-path+.pi-path{padding:0;margin:0;border-left:0}
  .pi-path+.pi-path{border-top:1px solid rgba(0,43,84,.16);padding-top:48px}
  .pi-uw__h{font-size:31px}
  .pi-uw__r{grid-template-columns:auto minmax(0,1fr);gap:8px 24px}
  .pi-uw__d{grid-column:2}
  .pi-before__r{grid-template-columns:minmax(0,1fr);gap:8px}
  .pi-cl__h{font-size:34px}
  .pi-cl__tel{font-size:34px}
}
@container page (max-width:620px){
  .pi-hero__g,.pi-cl__g,.pi-why__g,.pi-work__g,.pi-part__g,.pi-uw__r,.pi-before__r{grid-template-columns:minmax(0,1fr);column-gap:0}
  .pi-h1{font-size:32px}
  .pi-st{font-size:27px}
  .pi-uw__n{width:auto}
  .pi-uw__d{grid-column:1}
}