/* ============================================================
   Lotus Capital Partners — Home page sections
   (uses the design tokens defined in header.css :root)
   ============================================================ */

/* Shared section bits */
.section-eyebrow {
  font-family: var(--sans);
  font-size: 14px;   /* client-approved +2px, sitewide */
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--lotus-blue);
  margin: 0 0 22px;
}

/* Scroll reveal */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .8s cubic-bezier(.22,.61,.36,1),
              transform .8s cubic-bezier(.22,.61,.36,1);
}
.reveal.in { opacity: 1; transform: none; }

/* ---------------- Our Approach (2-column) ---------------- */
/* Serving Clients — value + brand gradients (was flat tint).
   All layers live in the section BACKGROUND so they paint behind the copy and never
   touch positioning — the left half's full-bleed photo stays absolutely positioned
   against the section, so this must NOT introduce a new containing block. */
.approach {
  background:
    /* faint concentric ring, top-right, drawn as thin radial bands */
    radial-gradient(circle at 99% -4%, transparent 298px, rgba(58, 90, 156, .12) 300px, rgba(58, 90, 156, .12) 302px, transparent 304px),
    radial-gradient(circle at 99% -4%, transparent 244px, rgba(58, 90, 156, .05) 246px, rgba(58, 90, 156, .05) 286px, transparent 288px),
    /* brand glows on the right, behind the copy */
    radial-gradient(64% 82% at 95% 6%, rgba(58, 90, 156, .11), transparent 60%),
    radial-gradient(56% 74% at 84% 106%, rgba(33, 153, 232, .09), transparent 62%),
    radial-gradient(44% 58% at 100% 100%, rgba(17, 19, 23, .045), transparent 66%),
    /* base vertical value */
    linear-gradient(180deg, #f7f8fa 0%, #eef1f6 62%, #e9edf4 100%);
}
.approach-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 128px 40px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 88px;
  align-items: center;
}

/* left column — scroll-driven rotating lotus */
.approach-left {
  display: flex;
  align-items: center;
  justify-content: center;
}
.lotus-video {
  width: 100%;
  max-width: 480px;
  height: auto;
  display: block;
}
/* still fallback — shown on phones where scroll-scrub video won't render frames */
.lotus-still { display: none; width: 100%; max-width: 480px; height: auto; }
@media (max-width: 768px) {
  .lotus-video { display: none; }
  .lotus-still { display: block; }
}

.approach-right { max-width: 620px; }
.approach-title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1.08;
  letter-spacing: -.012em;
  color: var(--ink);
  margin: 0 0 30px;
  text-wrap: balance;
}
.approach-body p {
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.66;
  color: var(--ink-soft);
  margin: 0 0 22px;
}
.approach-body p:last-child { margin-bottom: 0; }

@media (max-width: 900px) {
  .approach-inner {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 80px 24px;
  }
  .approach-left { min-height: 260px; order: 2; }
  .approach-right { order: 1; max-width: none; }
}

/* ---------------- Our Business ---------------- */
/* Our Business — full-bleed: two videos edge to edge, "Our Business" centered
   in white over them. Keeps roughly the section's prior height. */
.business { background: #0a1626; position: relative; overflow: hidden; }
.business-inner {
  max-width: none;
  margin: 0;
  padding: 0;
  position: relative;
  height: 840px;                 /* ~matches the prior section height */
}
.business-head {
  position: absolute; inset: 0;
  z-index: 4;
  display: flex; justify-content: center; align-items: flex-start;
  padding-top: 40px;
  margin: 0; max-width: none;
  pointer-events: none;
  text-align: center;
}
/* soft scrim near the top so the white title reads over bright video */
.business-head::before {
  content: "";
  position: absolute; left: 50%; top: 0;
  width: 760px; height: 240px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse 60% 100% at 50% 0%, rgba(8, 15, 27, .5), rgba(8, 15, 27, 0) 78%);
}
.business-title {
  position: relative;
  font-family: "Oswald", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-size: clamp(40px, 5.6vw, 78px);
  line-height: 1.02;
  letter-spacing: -.012em;
  color: #fff;
  margin: 0;
}
.business-lede {
  font-family: var(--sans);
  font-size: 19px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0;
  max-width: 60ch;
}

.business-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  height: 100%;
}

.biz-card {
  position: relative;
  aspect-ratio: auto;
  height: 100%;
  background: #0a1626;
  overflow: hidden;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.biz-card:hover {
  box-shadow: 0 30px 50px -28px rgba(15, 23, 42, .35);
}

.biz-media {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
}
.biz-media img,
.biz-media .biz-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s var(--ease);
}
.biz-card:hover .biz-media img,
.biz-card:hover .biz-media .biz-video { transform: scale(1.05); }
/* subtle blue wash + tag legibility */
.biz-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(11, 22, 38, .68) 0%, rgba(11, 22, 38, .18) 46%, rgba(11, 22, 38, .06) 100%);
}
/* frosted-glass panel holding title + copy + actions, over the video */
.biz-body {
  position: absolute;
  left: 20px; bottom: 20px;
  right: auto;
  width: min(78%, 486px);           /* narrower than the card */
  z-index: 2;
  padding: 26px 28px 24px;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, rgba(46, 72, 133, .82), rgba(24, 42, 82, .88));   /* brand-blue glass */
  -webkit-backdrop-filter: blur(18px) saturate(130%);
          backdrop-filter: blur(18px) saturate(130%);
  border: 1px solid rgba(255, 255, 255, .22);
  box-shadow: 0 18px 40px -22px rgba(4, 10, 20, .5), inset 0 1px 0 rgba(255, 255, 255, .2);
}
/* Capital Placement (first card) aligns to the right of its column */
.biz-card:first-child .biz-body {
  left: auto; right: 20px;
}
.biz-tag {
  font-family: "Oswald", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: clamp(27px, 2.7vw, 36px);
  letter-spacing: .01em;
  line-height: 1.1;
  color: #fff;
  margin: 0 0 13px;
}
.biz-desc {
  font-family: var(--sans);
  font-size: 15.5px;
  line-height: 1.58;
  color: rgba(255, 255, 255, .88);
  margin: 0 0 18px;
}
.biz-actions {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, .22);
}
.biz-link {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  color: #dbe7ff;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.biz-link span { transition: transform .24s var(--ease); }
.biz-link:hover span { transform: translateX(5px); }
.biz-download {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, .78);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: color .2s ease;
}
.biz-download:hover { color: #fff; }

@media (max-width: 860px) {
  /* stack the two video cards with the title as a normal heading above them,
     so "Our Business" no longer overlaps the first card */
  /* white section on phones (was dark navy) — also turns the inter-card gap white
     instead of black. The title flips to dark so it stays legible. */
  .business { background: #fff; }
  .business-title { color: #14233f; }
  .business-inner { height: auto; padding: 0; }
  .business-head { position: static; padding: 42px 20px 22px; }
  .business-head::before { display: none; }
  .business-grid { grid-template-columns: 1fr; grid-auto-rows: auto; gap: 18px; }
  .biz-card { height: 680px; }
  /* centre the glass panel (equal margins) on both cards — the desktop rule
     right-aligns the first one; text inside stays left-aligned. */
  .biz-body,
  .biz-card:first-child .biz-body { left: 16px; right: 16px; width: auto; }
  .biz-actions { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* ---------------- $40B scroll-zoom through text ---------------- */
.zoom-track {
  position: relative;
  height: 250vh;            /* scroll distance for the zoom (shorter = faster) */
}
.zoom-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  background: #0a1626;
}
.zoom-image {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1);
  will-change: transform;
}
.zoom-mask {
  position: absolute;
  inset: 0;
  transform-origin: 50% 52%;
  will-change: transform, opacity;
}
.zoom-svg { width: 100%; height: 100%; display: block; }
.zoom-text {
  font-family: "Source Serif 4", Georgia, "Times New Roman", serif;  /* original serif (pre-Goldman-Sans) */
  font-weight: 700;
  font-size: 275px;   /* sized so "40 Billion" fits inside the slice-cropped frame on narrow windows */
  letter-spacing: -0.01em;
}
.zoom-hint {
  position: absolute;
  left: 50%;
  bottom: 34px;
  transform: translateX(-50%);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--lotus-blue);
  margin: 0;
  animation: zoomHintPulse 2.2s ease-in-out infinite;
}
@keyframes zoomHintPulse { 0%,100% { opacity: .35; } 50% { opacity: 1; } }

/* ---------------- $40B reveal (white) ---------------- */
/* $40B reveal — layered background (was flat white). Concentric rings radiate from
   behind the figure; brand glows + a soft value gradient add depth. All in the
   background stack so the dark copy stays crisp. */
.stat-reveal {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 50%, transparent 186px, rgba(58, 90, 156, .09) 188px, rgba(58, 90, 156, .09) 190px, transparent 192px),
    radial-gradient(circle at 50% 50%, transparent 286px, rgba(58, 90, 156, .06) 288px, rgba(58, 90, 156, .06) 290px, transparent 292px),
    radial-gradient(circle at 50% 50%, transparent 396px, rgba(58, 90, 156, .045) 398px, rgba(58, 90, 156, .045) 400px, transparent 402px),
    radial-gradient(circle at 50% 50%, transparent 516px, rgba(58, 90, 156, .03) 518px, rgba(58, 90, 156, .03) 520px, transparent 522px),
    radial-gradient(52% 62% at 10% 2%, rgba(58, 90, 156, .12), transparent 60%),
    radial-gradient(52% 64% at 92% 100%, rgba(33, 153, 232, .11), transparent 62%),
    radial-gradient(40% 55% at 50% 50%, rgba(255, 255, 255, .9), transparent 60%),
    linear-gradient(180deg, #f6f8fc 0%, #eef2f8 60%, #e9eef6 100%);
}
.stat-reveal-inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 120px 40px;
  text-align: center;
}
.stat-figure {
  font-family: "Oswald", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-size: clamp(52px, 6.4vw, 92px);
  line-height: 1;
  letter-spacing: .005em;
  color: var(--ink);
  margin: 0 0 14px;
}
.stat-sub {
  font-family: "Oswald", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: clamp(22px, 2.6vw, 32px);
  line-height: 1.16;
  letter-spacing: .01em;
  color: var(--ink-soft);
  margin: 0 0 30px;
  text-wrap: balance;
}
.stat-desc {
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.66;
  color: var(--ink-soft);
  margin: 0 auto;
  max-width: none;
}
.stat-btn {
  display: inline-block;
  padding: 14px 30px;
  border: 1px solid var(--lotus-blue);
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  color: var(--lotus-blue);
  transition: background .24s var(--ease), color .24s var(--ease), border-color .24s var(--ease);
}
.stat-btn:hover { background: var(--lotus-blue); color: #fff; }

/* ---------------- Featured Deals (heading placeholder) ---------------- */
/* Featured Deals — 100px wider each side than the standard max width, on a soft
   brand gradient so the section isn't plain. */
.deals {
  background:
    radial-gradient(58% 46% at 8% 0%, rgba(58, 90, 156, .10), transparent 60%),
    radial-gradient(54% 44% at 96% 30%, rgba(33, 153, 232, .09), transparent 62%),
    radial-gradient(60% 50% at 50% 108%, rgba(58, 90, 156, .08), transparent 66%),
    linear-gradient(180deg, #eef1f6 0%, #e7ecf4 55%, #eef2f8 100%);
}
:root { --deals-maxw: 1640px; }
.deals-head {
  max-width: var(--deals-maxw);
  margin: 0 auto;
  padding: 110px 40px 40px;
}
.deals-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}
.deals-title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.05;
  letter-spacing: -.015em;
  color: var(--ink);
  margin: 0;
}
.deals-lede {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0;
  max-width: 42ch;
}

/* ---- deals grid ---- */
.deals-grid {
  max-width: var(--deals-maxw);
  margin: 0 auto;
  padding: 0 40px 0;   /* the See-All footer below provides the bottom spacing */
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}

.deal-card {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: #0a1626;
  isolation: isolate;
}

/* Featured Deals — scroll entrance. Armed by JS (.deals-armed) so cards stay
   visible if the script never runs; each row cascades via a per-column delay. */
.deals-armed .deal-card {
  opacity: 0;
  transform: translateY(32px) scale(.985);
  transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);
}
.deals-armed .deal-card.in { opacity: 1; transform: none; }
.deals-armed .deal-card:nth-child(3n+2).in { transition-delay: .09s; }
.deals-armed .deal-card:nth-child(3n).in   { transition-delay: .18s; }
@media (prefers-reduced-motion: reduce) {
  .deals-armed .deal-card { opacity: 1 !important; transform: none !important; transition: none !important; }
}
a.deal-card { display: block; color: inherit; text-decoration: none; cursor: pointer; }
/* persistent corner badge marking a card as clickable */
.deal-linkmark {
  position: absolute; top: 14px; right: 14px; z-index: 3;
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; color: #fff;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.30);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: background .3s var(--ease), transform .3s var(--ease), border-color .3s var(--ease);
}
.deal-linkmark svg { width: 15px; height: 15px; }
a.deal-card:hover .deal-linkmark { background: var(--lotus-blue); border-color: var(--lotus-blue); transform: translateY(-2px); }
/* "View Deal" button revealed on the hover panel */
.deal-view {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 16px;
  padding: 10px 20px; background: var(--lotus-blue); color: #fff;
  font-family: var(--sans); font-size: 13px; font-weight: 600; letter-spacing: .02em;
}
.deal-view span { transition: transform .24s var(--ease); }
a.deal-card:hover .deal-view span { transform: translateX(5px); }
.deal-card > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.14);           /* rest: a tighter crop */
  transition: transform .8s var(--ease);
}
/* zoom OUT on hover to the full cover crop — the image still fills the card (meets
   all edges, no letterbox bars), showing as much of the scene as possible without gaps. */
.deal-card:hover > img { transform: scale(1); }

/* branded fallback for deals without a photo */
.deal-card.noimg { background: radial-gradient(125% 95% at 50% 0%, #24385f 0%, #122139 48%, #0a1626 100%); }
.deal-card.noimg::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: url(../assets/lotus_front_sq.png) center 40% / 60% no-repeat;
  opacity: .12;
}
.deal-card.noimg .deal-front, .deal-card.noimg .deal-back { z-index: 1; }

.deal-shade {
  position: absolute;
  inset: 0;
  /* strong only near the bottom for text legibility; fully clear across the top half */
  background: linear-gradient(to top, rgba(8,15,27,.9) 0%, rgba(8,15,27,.55) 16%, rgba(8,15,27,0) 46%);
  transition: background .5s var(--ease);
  pointer-events: none;
}
.deal-card:hover .deal-shade {
  background: linear-gradient(to top, rgba(8,15,27,.92) 0%, rgba(8,15,27,.5) 22%, rgba(8,15,27,0) 50%);
}

.deal-status {
  position: absolute;
  top: 15px;
  left: 15px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 11px;
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(255,255,255,.13);
  border: 1px solid rgba(255,255,255,.22);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.deal-status::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #cfd6e2;
}
.status-coming::before  { background: #d8a657; }
.status-inmarket::before{ background: #6aa0f0; }
.status-closing::before { background: #5fbf86; }

/* front: always-visible name + amount on the image */
.deal-front {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: 22px 22px 22px;
  color: #fff;
  transition: opacity .3s ease, transform .55s var(--ease);
}
/* on hover the front rides UP with the rising info panel (same distance,
   duration and ease, so they travel as one sheet) and the amount stays
   visible above it. --lift = the card's own panel height, set by JS. */
.deal-card:hover .deal-front { transform: translateY(calc(-1 * var(--lift, 0px))); }
.deal-card:hover .deal-shade {
  background: linear-gradient(to top, rgba(8,15,27,.85) 42%, rgba(8,15,27,.4) 70%, rgba(8,15,27,0) 96%);
}
/* amount leads the card and carries the weight; name sits beneath it.
   Sized against the card itself (container units) so the number stands at
   ~1/5th of the card's height at every column width. */
.deal-card { container-type: inline-size; }
.deal-amount {
  font-family: var(--serif);
  font-size: 54px;            /* fallback — matches the 17cqw container size below */
  font-size: 17cqw;           /* client-tuned: "$150M" ≈ half the card width */
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -.015em;
  color: #fff;
  margin: 0 0 6px;
}
.deal-name {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 19px;
  line-height: 1.3;
  letter-spacing: .005em;
  color: rgba(255,255,255,.9);
  margin: 0;
  text-wrap: balance;
}
/* (container units above keep the amount at ~1/5 card height on phones too) */

/* back: white card that slides up on hover with the full spec details */
.deal-back {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 3;
  background: #fff;
  padding: 22px 22px 24px;
  transform: translateY(101%);
  transition: transform .55s var(--ease);
}
.deal-card:hover .deal-back { transform: translateY(0); }
.deal-specs { list-style: none; margin: 0; padding: 0; }
.deal-specs li:first-child {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.22;
  letter-spacing: -.01em;
  color: var(--ink);
  margin-bottom: 12px;
}
.deal-specs li:not(:first-child) {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.4;
  color: var(--ink-soft);
  padding: 8px 0;
  border-top: 1px solid var(--line);
}
.deal-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  padding: 10px 20px;
  border: 1px solid var(--lotus-blue);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--lotus-blue);
  transition: background .2s var(--ease), color .2s var(--ease);
}
.deal-link span { transition: transform .24s var(--ease); }
.deal-link:hover { background: var(--lotus-blue); color: #fff; }
.deal-link:hover span { transform: translateX(5px); }

/* ---- view all ---- */
.deals-foot {
  max-width: var(--deals-maxw);
  margin: 0 auto;
  padding: 56px 40px 110px;
  text-align: center;
}
.deals-all {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 34px;
  border: 1px solid var(--lotus-blue);
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  color: var(--lotus-blue);
  transition: background .24s var(--ease), color .24s var(--ease), border-color .24s var(--ease);
}
.deals-all span { transition: transform .24s var(--ease); }
.deals-all:hover { background: var(--lotus-blue); color: #fff; }
.deals-all:hover span { transform: translateX(5px); }
button.deals-all { cursor: pointer; background: transparent; }

/* Phones collapse to the first 20 cards until "See All Deals" is pressed;
   PC shows every deal and needs no button (client request). */
@media (max-width: 640px) {
  .deals-grid:not(.deals-show-all) .deal-card:nth-child(n+21) { display: none; }
}
@media (min-width: 641px) {
  .deals-foot { display: none; }
  .deals-grid { padding-bottom: 110px; }   /* the foot carried the section's bottom space */
}
.deals-foot[hidden] { display: none; }

@media (max-width: 860px)  {
  .deals-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .deals-head, .deals-grid, .deals-foot { padding-left: 24px; padding-right: 24px; }
  .deal-name { font-size: 20px; }
}

@media (max-width: 700px) {
  .zoom-text { font-size: 130px; }
  .stat-reveal-inner { padding: 80px 24px; }
}

/* ===== Homepage phone refinements ===== */
/* Featured Deals: keep two columns on phones; shrink the flip-panel text so the
   specs fit inside the 4/5 card, and let unusually long ones scroll in place. */
@media (max-width: 640px) {
  .deals-grid { gap: 12px; }
  .deal-front { padding: 14px 14px 14px; }
  .deal-amount { font-size: 19cqw; }   /* phones keep the size tuned earlier so long numbers ($263.8M) still fit */
  .deal-name { font-size: 16px; }
  .deal-back { top: 0; padding: 14px 13px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .deal-specs li:first-child { font-size: 13px; line-height: 1.2; margin-bottom: 7px; }
  .deal-specs li:not(:first-child) { font-size: 11px; line-height: 1.3; padding: 5px 0; }
  .deal-view { margin-top: 9px; padding: 7px 12px; font-size: 11px; }
  /* tighten the gap between the See-All button and the News section
     (press-inner top is trimmed in the max-width:640 block below #990) */
  .deals-foot { padding-top: 36px; padding-bottom: 36px; }
}
/* Tighten the gap between the $40B reveal and Featured Deals on phones */
@media (max-width: 700px) {
  .stat-reveal-inner { padding-bottom: 24px !important; }
  .deals-head { padding-top: 44px; }
}
.deal-card.is-flipped .deal-front { opacity: 0; }
.deal-card.is-flipped .deal-back { transform: translateY(0); }
/* $40B: run the same scroll fly-through on phones. The JS (fitZoomText) already
   adapts the "40 Billion" text to a portrait viewBox. Two mobile-specific needs:
   (1) size the TRACK in svh (a stable unit) so the URL bar hiding never shifts
       layout and jerks the scroll progress forward past the readable first frame;
   (2) make the track tall enough that a single momentum flick can't blow straight
       through the readable "40 Billion" frame into the zoomed middle. */
@media (max-width: 760px) {
  .zoom-track { height: 320vh; height: 320svh; }
  .zoom-stage { height: 100vh; height: 100dvh; }
}

/* ================= FOOTER ================= */
.site-footer {
  position: relative;
  overflow: hidden;
  color: #fff;
  /* subtle brand-blue glow fading into deep navy */
  background:
    radial-gradient(120% 130% at 12% -10%, #34528d 0%, #1c2d4f 44%, #0b1424 100%);
}
.footer-glow {
  position: absolute;
  right: -10%;
  bottom: -40%;
  width: 60%;
  height: 120%;
  background: radial-gradient(closest-side, rgba(58,90,156,.35), transparent 70%);
  pointer-events: none;
}
.footer-statement {
  position: relative;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 84px 40px 52px;
}
.footer-statement p {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(34px, 4.6vw, 60px);
  line-height: 1.06;
  letter-spacing: -.015em;
  color: #fff;
  margin: 0;
}
.footer-statement em { font-style: italic; color: rgba(255,255,255,.82); }

.footer-inner {
  position: relative;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 84px 40px 56px;
  display: grid;
  grid-template-columns: 1.5fr repeat(4, 1fr);
  gap: 56px;
}

.footer-logo { height: 54px; width: auto; display: block; margin-bottom: 24px; }   /* client: bigger footer logo */
.footer-tagline {
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255,255,255,.66);
  margin: 0 0 26px;
  max-width: 34ch;
}
.footer-cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 26px;
  border: 1px solid #fff;
  background: #fff;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--lotus-blue);
  transition: background .24s var(--ease), color .24s var(--ease), border-color .24s var(--ease);
}
.footer-cta span { transition: transform .24s var(--ease); }
.footer-cta:hover { background: var(--lotus-blue); color: #fff; border-color: var(--lotus-blue); }
.footer-cta:hover span { transform: translateX(5px); }

.footer-connect {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: 30px;
}
.footer-connect a {
  font-family: var(--sans);
  font-size: 13.5px;
  color: rgba(255,255,255,.6);
  transition: color .2s ease;
}
.footer-connect a:hover { color: #fff; }

.footer-cols {
  grid-column: 2 / -1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
}
.footer-col { display: flex; flex-direction: column; gap: 11px; }
.footer-head {
  font-family: var(--sans);
  font-size: 16px;   /* client: larger footer section titles */
  font-weight: 700;
  letter-spacing: .03em;
  color: #fff;
  margin-bottom: 5px;
}
.footer-col a:not(.footer-head) {
  font-family: var(--sans);
  font-size: 14px;
  color: rgba(255,255,255,.58);
  transition: color .2s ease;
}
.footer-col a:hover { color: #fff; }

.footer-bottom {
  position: relative;
  border-top: 1px solid rgba(255,255,255,.12);
}
.footer-bottom > * { }
.footer-bottom {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 24px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.footer-bottom p {
  font-family: var(--sans);
  font-size: 13px;
  color: rgba(255,255,255,.5);
  margin: 0;
}
.footer-legal { display: flex; gap: 26px; }
.footer-legal a {
  font-family: var(--sans);
  font-size: 13px;
  color: rgba(255,255,255,.5);
  transition: color .2s ease;
}
.footer-legal a:hover { color: #fff; }

@media (max-width: 1000px) {
  .footer-inner { grid-template-columns: 1fr; gap: 48px; padding: 64px 24px 40px; }
  .footer-cols { grid-column: 1 / -1; grid-template-columns: repeat(2, 1fr); gap: 36px; }
  .footer-bottom { padding: 22px 24px; }
}
@media (max-width: 520px) {
  .footer-cols { grid-template-columns: 1fr 1fr; gap: 28px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* ================= RECOGNITION & NEWS ================= */
.press { background: #fff; }
.press-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 120px 40px;
}
.press-head { margin: 0 0 56px; }
.press-title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1.08;
  letter-spacing: -.012em;
  color: var(--ink);
  margin: 0;
}
.press-grid {
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  column-gap: 72px;
  row-gap: 0;
  align-items: stretch;   /* each row's recognition + news cell match height */
}
.press-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  margin-top: 26px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--lotus-blue);
}
.press-more span { transition: transform .24s var(--ease); }
.press-more:hover span { transform: translateX(5px); }
.press-col-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--lotus-blue);
  margin: 0 0 8px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}

/* recognition list */
.rec-list { display: flex; flex-direction: column; }
.rec-item {
  display: flex;
  gap: 20px;
  align-items: center;
  padding: 22px 20px;
  margin: 0 -20px;
  border-radius: 4px;
  border-bottom: 1px solid var(--line);
  transition: background .28s var(--ease);
}
.rec-item:hover { background: var(--lotus-blue); border-bottom-color: transparent; }
.rec-thumb {
  width: 96px;
  height: 96px;
  flex-shrink: 0;
  object-fit: cover;
  display: block;
  background: var(--paper-tint);
}
.rec-text { display: block; }
.rec-award {
  display: block;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 21px;
  line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--ink);
  transition: color .2s ease;
}
.rec-desc {
  display: block;
  font-family: var(--sans);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 8px 0 12px;
  transition: color .2s ease;
}
.rec-source {
  display: block;
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #9aa0aa;
  transition: color .2s ease;
}
.rec-item:hover .rec-award,
.rec-item:hover .rec-desc { color: #fff; }
.rec-item:hover .rec-source { color: rgba(255,255,255,.75); }

/* news scrollable feed — fills the column so it matches the recognition height */
.press-col-news { display: flex; flex-direction: column; }
.news-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding-right: 16px;
  scrollbar-width: thin;
  scrollbar-color: #c9ced8 transparent;
}
.news-scroll::-webkit-scrollbar { width: 6px; }
.news-scroll::-webkit-scrollbar-thumb { background: #c9ced8; border-radius: 3px; }
.news-scroll::-webkit-scrollbar-track { background: transparent; }
.news-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.news-headline {
  display: block;
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--ink);
  transition: color .2s ease;
}
.news-item:hover .news-headline { color: var(--lotus-blue); }
.news-source {
  display: block;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: .03em;
  color: #9aa0aa;
  margin-top: 7px;
}

@media (max-width: 860px) {
  .press-inner { padding: 80px 24px; }
  .press-grid { grid-template-columns: 1fr; gap: 48px; }
  .news-scroll { max-height: none; overflow: visible; padding-right: 0; }
}

/* ============ US Rates ticker (theFinancials.com widget — added as-is) ============ */
.us-rates { width: 100%; overflow: hidden; line-height: 0; background: #3a5a9c; }
.us-rates #scrollingText {
  display: flex !important;
  justify-content: center;
  flex-wrap: wrap;
  background: #3a5a9c;
}
.us-rates .symbolValue { color: #fff !important; }
/* match the site typeface (override the widget's injected font) */
.us-rates, .us-rates * { font-family: var(--sans) !important; }
.us-rates .symbolName { font-weight: 500 !important; letter-spacing: .01em; }
.us-rates .symbolValue { font-weight: 600 !important; }
/* larger, more legible figures */
/* Figures + inter-item spacing scale continuously with the viewport so the ticker
   packs tighter as the window narrows and stays on ONE row far longer before
   wrapping (7 tiles). Caps at 15px on wide screens, floors at 9.5px. */
.us-rates #scrollingText { flex-wrap: nowrap; }   /* the +2pt font must not wrap the 7 tiles into two rows (phone block re-enables wrap) */
.us-rates .symbolName, .us-rates .symbolValue { font-size: clamp(11.5px, calc(1.02vw + 2px), 17px) !important; }   /* +2pt */
.us-rates .topRowContainer { display: flex !important; align-items: baseline; justify-content: center; gap: clamp(3px, .45vw, 8px); width: auto !important; padding: 0 clamp(4px, .72vw, 10px); }
/* remove the light border around each rate tile */
.us-rates .quotes, .us-rates .tile { border: 0 !important; }
/* make the bar 10px thicker (5px top + 5px bottom on the default 10px padding) */
.us-rates .quotes { padding: 28px clamp(1px, .3vw, 4px) !important; }   /* bar ~20% taller (46px -> ~56px); slimmer sides so the bigger text still fits one row */
/* darken a tile while hovering so it's clearly "selected" */
.us-rates .tile { cursor: pointer; }
.us-rates .tile:hover .quotes { background: #2c4575 !important; transition: background .18s ease; }

/* hover chart-preview popup → clean rounded card, no border, soft drop shadow */
#preview { border: 0 !important; border-radius: 8px !important; overflow: hidden !important; box-shadow: 0 14px 34px rgba(8, 15, 27, .32) !important; }
#preview img, #previewImage { border: 0 !important; border-radius: 8px !important; display: block !important; }
/* 601-1399px: the 7 inline tiles cannot fit (labels wrapped inside tiles and the
   widget's line-height:0 crushed the lines onto each other) — stack label over
   value instead, one centered row of 7, sized to the window */
@media (min-width: 601px) and (max-width: 1399px) {
  .us-rates .tile, .us-rates .tile * { line-height: 1.25 !important; }
  .us-rates #scrollingText { flex-wrap: nowrap; }
  .us-rates .tile { flex: 1 1 0 !important; }
  .us-rates .quotes { padding: 16px 2px !important; float: none !important; width: 100% !important; }
  .us-rates .topRowContainer { display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 100% !important; padding: 0 !important; }
  .us-rates .symbolName { font-size: clamp(10px, 1.05vw, 13px) !important; white-space: nowrap; }
  .us-rates .symbolValue { font-size: clamp(12px, 1.35vw, 16px) !important; white-space: nowrap; }
}
@media (max-width: 600px) {
  /* rates ticker wraps into a centered row of 4 then a row of 3 */
  .us-rates, .us-rates * { line-height: 1.3 !important; }   /* undo the wrapper's line-height:0 so stacked text doesn't overlap */
  .us-rates #scrollingText { flex-wrap: wrap !important; justify-content: center !important; padding: 8px 0 12px !important; }
  .us-rates .tile { flex: 0 0 23% !important; max-width: 23% !important; }   /* <25% so the row of 4 keeps visible side margins and reads as centered */
  .us-rates .quotes, .us-rates #scrollingText .quotes { padding: 10px 2px !important; float: none !important; width: 100% !important; }   /* the widget floats .quotes so it shrink-wraps flush-left with all the slack on the right — fill the tile so labels center */
  .us-rates .topRowContainer { display: flex !important; flex-direction: column !important; justify-content: center; align-items: center; gap: 2px; padding: 0 !important; width: 100% !important; }   /* fill the tile (desktop sets width:auto, which shrink-wraps flush-left) so the label truly centers */
  .us-rates .symbolName { font-size: 10.5px !important; line-height: 1.25 !important; white-space: nowrap; }
  .us-rates .symbolValue { font-size: 12.5px !important; line-height: 1.25 !important; white-space: nowrap; }
}
@media (max-width: 380px) {
  .us-rates .symbolName { font-size: 9.5px !important; }
  .us-rates .symbolValue { font-size: 11.5px !important; }
  .us-rates .quotes { padding: 9px 1px !important; }
}

/* ============ GS typographic match (homepage) ============ */
/* Section headings — Oswald (condensed display sans), self-hosted */
.approach-title, .deals-title, .press-title {
  font-family: "Oswald", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: 56px;
  line-height: 1.08;
  letter-spacing: .005em;
  color: rgba(0, 0, 0, 0.95);
}
@media (max-width: 768px) {
  .approach-title, .deals-title, .press-title { font-size: 40px; }
}
/* Body paragraph text — GS Sans 400 / 18px / 28px */
.approach-body p, .business-lede, .deals-lede, .stat-desc {
  font-family: "Goldman Sans", Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 28px;
  color: rgba(0, 0, 0, 0.8);
}

/* Serving Clients — left media, full-bleed to the left edge + full section height */
.serving-media { width: 100%; overflow: hidden; }
.serving-media img, .serving-media video { width: 100%; height: 100%; object-fit: cover; display: block; aspect-ratio: 4 / 3; }

/* Serving Clients: even 50/50 columns. The photo runs nearly the full height of
   the section with a 20px frame top/bottom/sides, so the gradient reads around it. */
.approach--bleed { position: relative; }
.approach--bleed .approach-inner {
  align-items: stretch;
  min-height: 660px;           /* the photo column is tall, near the section height */
  padding-top: 0; padding-bottom: 0;
}
.approach--bleed .approach-left {
  display: block;
  padding: 20px;               /* the frame — background reads on all four sides */
}
.approach--bleed .approach-right {
  align-self: center;          /* copy stays vertically centered beside the photo */
  padding: 48px 0;             /* keep breathing room around the copy */
}
.approach--bleed .serving-media { height: 100%; }
.approach--bleed .serving-media img,
.approach--bleed .serving-media video { aspect-ratio: auto; height: 100%; }

/* entrance: the photo slides in from the left, the copy lifts up just after */
.approach--bleed.is-armed .serving-media {
  opacity: 0; transform: translateX(-32px) scale(.99);
  transition: opacity .85s cubic-bezier(.22,.61,.36,1), transform .85s cubic-bezier(.22,.61,.36,1);
}
.approach--bleed.is-armed .approach-right {
  opacity: 0; transform: translateY(26px);
  transition: opacity .8s ease .14s, transform .8s cubic-bezier(.22,.61,.36,1) .14s;
}
.approach--bleed.is-armed.in .serving-media,
.approach--bleed.is-armed.in .approach-right { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .approach--bleed.is-armed .serving-media,
  .approach--bleed.is-armed .approach-right { opacity: 1; transform: none; transition: none; }
}

@media (max-width: 900px) {
  .approach--bleed .approach-inner { align-items: center; min-height: 0; padding: 80px 24px; }
  .approach--bleed .approach-left { padding: 0; min-height: 0; }
  .approach--bleed .approach-right { padding: 0; }
  .approach--bleed .serving-media { height: auto; }
  .approach--bleed .serving-media img,
  .approach--bleed .serving-media video { aspect-ratio: 4 / 3; height: auto; }
}

/* ============ News / Recognition magazine cards ============
   Lives here (not pages.css) because the homepage news strip uses these classes
   and index.html loads sections.css only. */
.news-mag { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.nm-card {
  position: relative; display: block; overflow: hidden; border-radius: 14px;
  aspect-ratio: 16 / 10; background: #0a1626;
  opacity: 0; transform: translateY(18px);
  transition: opacity .6s var(--ease), transform .6s var(--ease), box-shadow .35s var(--ease);
}
.nm-card.in { opacity: 1; transform: none; }
.nm-card:hover { box-shadow: 0 22px 54px rgba(10,22,38,.22); }
.nm-card--feature { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; min-height: 460px; }
.nm-media { position: absolute; inset: 0; }
.nm-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.nm-card:hover .nm-media img { transform: scale(1.06); }
.nm-shade {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(8,15,27,.94) 0%, rgba(8,15,27,.46) 46%, rgba(8,15,27,.10) 72%, rgba(8,15,27,.18) 100%);
  transition: background .35s var(--ease);
}
.nm-card--text { background: linear-gradient(135deg, #0a1626 0%, #16294a 58%, #24437c 130%); }
.nm-card--text::before {
  content: ""; position: absolute; right: -70px; top: -70px; width: 300px; height: 300px; border-radius: 50%;
  background: radial-gradient(circle, rgba(159,182,226,.28), transparent 68%);
}
.nm-meta { position: absolute; top: 16px; left: 16px; right: 16px; display: flex; align-items: center; gap: 10px; z-index: 2; }
.nm-pub {
  background: var(--lotus-blue); color: #fff; font-family: var(--sans);
  font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  padding: 6px 11px; border-radius: 999px; white-space: nowrap;
}
.nm-date { color: rgba(255,255,255,.88); font-family: var(--sans); font-size: 12.5px; font-weight: 500; text-shadow: 0 1px 5px rgba(5,12,22,.65); }
.nm-title {
  position: absolute; left: 18px; right: 18px; bottom: 16px; z-index: 2; color: #fff;
  font-family: "Oswald", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400;
  font-size: 20px; line-height: 1.26; letter-spacing: .005em; text-wrap: balance;
  transition: color .3s var(--ease);
}
.nm-card--feature .nm-title { font-size: clamp(24px, 2.6vw, 34px); left: 24px; right: 24px; bottom: 22px; }
.nm-card:hover .nm-title { color: #cfe0ff; }
@media (max-width: 1040px) {
  .news-mag { grid-template-columns: 1fr 1fr; }
  .nm-card--feature { grid-column: span 2; grid-row: auto; min-height: 0; aspect-ratio: 16 / 9; }
}
@media (max-width: 640px) {
  .news-mag { grid-template-columns: 1fr; gap: 16px; }
  .nm-card--feature { grid-column: auto; aspect-ratio: 16 / 10; }
  .nm-title { font-size: 18px; }
  /* less air above the News heading on phones (after the See-All button) */
  .press-inner { padding-top: 40px; }
}

/* homepage news-only strip */
.press-list { display: flex; flex-direction: column; max-width: 940px; }
.press-foot { margin-top: 30px; }

/* recognition as magazine cards */
.news-mag--rec { grid-template-columns: 1fr 1fr; }
.news-mag--rec .nm-card { aspect-ratio: 16 / 9; }
.nm-desc {
  display: block; margin-top: 9px;
  font-family: "Goldman Sans", Helvetica, Arial, sans-serif;
  font-size: 14px; font-weight: 400; letter-spacing: 0;
  color: rgba(255,255,255,.85); line-height: 1.5; max-width: 60ch;
}
.news-mag--rec .nm-title { font-size: 22px; left: 22px; right: 22px; bottom: 20px; }
@media (max-width: 760px) {
  .news-mag--rec { grid-template-columns: 1fr; }
  /* taller cards on phones so the featured image shows above the title/description
     instead of being fully covered by the text overlay */
  .news-mag--rec .nm-card { aspect-ratio: 4 / 5; }
  .news-mag--rec .nm-title { font-size: 19px; left: 18px; right: 18px; bottom: 18px; }
  .news-mag--rec .nm-desc { font-size: 13.5px; margin-top: 7px; }
}

/* homepage news grid (no feature card) */
.news-mag--home { }
.news-mag--home .nm-title { font-size: 18px; }

/* ---- Homepage news: bento layout ----
   4-col grid; card 1 is a big 2x2 feature, cards 2/5/6 are wide (span 2),
   cards 3/4 are square. Tiles cleanly into a 4x3 bento. */
.news-mag--home {
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 244px;         /* taller rows so single-row cards show their image */
  grid-auto-flow: row dense;
  gap: 16px;
}
.news-mag--home .nm-card {
  aspect-ratio: auto;
  height: 100%;
  border-radius: 16px;
}
.news-mag--home .nm-card:nth-child(1) { grid-column: span 2; grid-row: span 2; }
.news-mag--home .nm-card:nth-child(2) { grid-column: span 2; }
.news-mag--home .nm-card:nth-child(5) { grid-column: span 2; }
.news-mag--home .nm-card:nth-child(6) { grid-column: span 2; }
/* the big feature gets a larger title */
.news-mag--home .nm-card:nth-child(1) .nm-title { font-size: clamp(22px, 2.3vw, 30px); left: 24px; right: 24px; bottom: 22px; }

@media (max-width: 900px) {
  .news-mag--home { grid-template-columns: 1fr 1fr; grid-auto-rows: 230px; }
  .news-mag--home .nm-card:nth-child(1) { grid-column: span 2; grid-row: span 1; }
  .news-mag--home .nm-card:nth-child(2),
  .news-mag--home .nm-card:nth-child(5),
  .news-mag--home .nm-card:nth-child(6) { grid-column: span 2; }
  .news-mag--home .nm-card:nth-child(3),
  .news-mag--home .nm-card:nth-child(4) { grid-column: span 1; }
}
@media (max-width: 560px) {
  .news-mag--home { grid-template-columns: 1fr; grid-auto-rows: 220px; }
  .news-mag--home .nm-card { grid-column: span 1 !important; grid-row: span 1 !important; }
}