/* =========================================================================
   Private Equity / Preferential Issue page
   Navy + gold + cream palette, Poppins type, shared banner gradient; a
   two-paragraph intro and a responsive grid of deal (transaction) cards.
   ========================================================================= */
.pe-page {
  --pe-navy: #09264b;
  --pe-gold: #c79a49;
  --pe-gold-2: #d8b45b;
  --pe-cream: #faf8f2;
  --pe-text: #41506c;
  --pe-line: rgba(10, 46, 92, 0.1);

  background: var(--pe-cream);
  color: var(--pe-navy);
  font-family: "Poppins", sans-serif;
}
body.home-page .pe-page { padding-top: 0 !important; }
.pe-page * { box-sizing: border-box; }

.pe-shell { width: min(1200px, calc(100% - 48px)); margin-inline: auto; }
.pe-page h1 { margin: 0; line-height: 1.2; font-weight: 700; font-size: clamp(1.8rem, 4vw, 3rem); }
.pe-page em { color: var(--pe-gold); font-style: normal; }

/* ---- banner ----------------------------------------------------------- */
.pe-banner {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: 34vh;
  padding: 140px 0 56px;
  color: #fff;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  overflow: hidden;
}
.pe-banner::before,
.pe-banner::after {
  content: "";
  position: absolute;
  z-index: -1;
  border: 1px solid rgba(215, 179, 103, 0.22);
  transform: rotate(45deg);
}
.pe-banner::before { width: 300px; height: 300px; left: -110px; top: -190px; }
.pe-banner::after  { width: 230px; height: 230px; right: -80px; bottom: -150px; }
.pe-banner-pattern {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.3;
  background-image: linear-gradient(90deg, transparent 49.8%, rgba(255,255,255,.08) 50%, transparent 50.2%);
  background-size: 72px 100%;
  mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent);
}
/* Thin gold accent line along the bottom of the banner. */
.pe-banner::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  height: 4px;
  border: 0;
  transform: none;
  background: linear-gradient(90deg, #70875b, var(--pe-gold), #70875b);
}
.pe-banner-inner { max-width: 860px; }
.pe-banner h1 em { color: var(--pe-gold-2); }
.pe-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 18px;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}
.pe-breadcrumb a { color: inherit; text-decoration: none; transition: color .2s ease; }
.pe-breadcrumb a:hover { color: var(--pe-gold-2); }

/* ---- kicker / eyebrow pill (matches About / Home) --------------------- */
.pe-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 18px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(10, 46, 92, 0.14);
  background: rgba(255, 255, 255, 0.75);
  font-family: "Poppins", sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #1a4a7a;
}
.pe-kicker--center { margin-inline: auto; }
.pe-kicker-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #7cb342;
  animation: pePulse 2.2s ease infinite;
}
@keyframes pePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(124, 179, 66, 0.45); }
  60%      { box-shadow: 0 0 0 6px rgba(124, 179, 66, 0); }
}

/* ---- intro (centered heading, then comfortable body text) ------------- */
.pe-intro {
  padding: 72px 0 40px;
  max-width: 920px;
  margin-inline: auto;
}
.pe-intro-head {
  text-align: center;
  margin-bottom: 36px;
}
.pe-intro-head .pe-kicker { margin-inline: auto; }
.pe-intro-heading {
  margin: 0;
  color: var(--pe-navy);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 600;
  line-height: 1;
  font-size: clamp(2.6rem, 5vw, 4.2rem);
}
.pe-intro-heading em { color: #70875b; font-style: italic; }
/* Gold-green rule under the heading, like the deals divider. */
.pe-intro-head::after {
  content: "";
  display: block;
  width: 90px;
  height: 3px;
  margin: 22px auto 0;
  border-radius: 4px;
  background: linear-gradient(90deg, #70875b, var(--pe-gold));
}
.pe-intro-body { max-width: 820px; margin-inline: auto; }
.pe-intro-body p { margin: 0; color: var(--pe-text); line-height: 1.9; font-size: 1.04rem; }
.pe-intro-body p + p { margin-top: 20px; }

/* ---- deals section heading (cards themselves use transactions.css) ---- */
.pe-deals-section {
  padding: 70px 0 96px;
  background:
    radial-gradient(circle at 85% 8%, rgba(199, 154, 73, 0.08), transparent 32%),
    linear-gradient(180deg, #fffdf8 0%, var(--pe-cream) 60%);
}
.pe-deals-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 46px;
}
.pe-deals-head h2 {
  margin: 14px 0 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 600;
  font-size: clamp(2.1rem, 3.6vw, 3rem);
  line-height: 1;
  color: var(--pe-navy);
}
.pe-deals-head h2 em { color: var(--pe-gold); font-style: italic; }
.pe-deals-head .pe-deals-sub {
  margin: 16px auto 0;
  max-width: 560px;
  color: var(--pe-text);
  font-size: 0.98rem;
  line-height: 1.7;
}
/* A gold rule under the deals heading, like the About section divider. */
.pe-deals-head::after {
  content: "";
  display: block;
  width: 90px;
  height: 3px;
  margin: 20px auto 0;
  border-radius: 4px;
  background: linear-gradient(90deg, #70875b, var(--pe-gold));
}
/* The deal cards reuse the Transactions ".transactions-page__grid" +
   ".transaction-detail-card" styles loaded from transactions.css.
   PE cards carry less text than Transactions cards, so we relax the fixed
   heights and pin the footer to the bottom to remove the large empty gap. */
.pe-deals-section .transaction-detail-card {
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding-bottom: 0;
}
.pe-deals-section .transaction-detail-card h3 { min-height: 0; }
.pe-deals-section .transaction-detail-card__amount { min-height: 0; }
.pe-deals-section .transaction-detail-card__role { min-height: 0; margin-bottom: 4px; }
/* Push the footer to the card bottom and keep consistent breathing room. */
.pe-deals-section .transaction-detail-card__footer {
  margin-top: auto;
}
/* Let the amount (deal detail) wrap nicely since PE text can be longer. */
.pe-deals-section .transaction-detail-card__amount {
  font-size: 16px;
  line-height: 1.35;
  margin-bottom: 4px;
}

/* ---- responsive ------------------------------------------------------- */
@media (max-width: 768px) {
  .pe-banner { min-height: 30vh; padding: 120px 0 48px; }
  .pe-intro { padding: 54px 0 30px; }
  .pe-intro-head { margin-bottom: 26px; }
  .pe-deals-section { padding: 48px 0 68px; }
  .pe-deals-head { margin-bottom: 32px; }
}