/* ============================================================
   Lotus Capital Partners — About page
   (reuses tokens + .hero / .approach from header.css & sections.css)
   ============================================================ */

/* hero eyebrow over the still image */
.hero-eyebrow {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255,255,255,.82);
  margin: 0 0 18px;
}
.about-hero { min-height: 65vh; }
.about-hero .hero-content { max-width: 960px; }
.about-hero .hero-title { font-size: clamp(34px, 4.6vw, 56px); max-width: none; }

/* ---------------- Whom We Serve ---------------- */
.serve { background: var(--paper-tint); }   /* Whom We Serve — gray */
#our-name { background: #fff; }             /* Our Name — white so the lotus video blends in */
.serve-inner { max-width: var(--maxw); margin: 0 auto; padding: 128px 40px; }
.serve-head { max-width: 760px; margin: 0 0 56px; }
.serve-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; text-wrap: balance;
}
.serve-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
.serve-card { position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: #0a1626; }
.serve-card img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease); }
.serve-card:hover img { transform: scale(1.06); }
.serve-shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(8,15,27,.85) 0%, rgba(8,15,27,.2) 46%, rgba(8,15,27,0) 70%); }
.serve-name {
  position: absolute; left: 18px; right: 14px; bottom: 18px; z-index: 1;
  font-family: var(--serif); font-weight: 500; font-size: 18px; line-height: 1.2; color: #fff; margin: 0;
}
@media (max-width: 980px) { .serve-grid { grid-template-columns: repeat(2, 1fr); } .serve-inner { padding: 80px 24px; } }

/* ---------------- Our Differentiators ---------------- */
.diff { background: var(--paper-tint); }
.diff-inner { max-width: var(--maxw); margin: 0 auto; padding: 128px 40px; }
.diff-head { max-width: 760px; margin: 0 0 60px; }
.diff-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 22px; text-wrap: balance;
}
.diff-lede { font-family: var(--sans); font-size: 18px; line-height: 1.62; color: var(--ink-soft); margin: 0; max-width: 64ch; }
.diff-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 52px 44px; }
.diff-num { display: block; font-family: var(--serif); font-weight: 500; font-size: 34px; color: var(--lotus-blue); line-height: 1; margin-bottom: 16px; }
.diff-item h3 { font-family: var(--sans); font-size: 18px; font-weight: 600; letter-spacing: .01em; color: var(--ink); margin: 0 0 12px; }
.diff-item p { font-family: var(--sans); font-size: 15px; line-height: 1.6; color: var(--ink-soft); margin: 0; }
@media (max-width: 980px) { .diff-grid { grid-template-columns: 1fr 1fr; gap: 40px 32px; } .diff-inner { padding: 80px 24px; } }
@media (max-width: 600px) { .diff-grid { grid-template-columns: 1fr; } }

/* ---------------- Our Core Principles ---------------- */
.principles { background: #fff; }
.principles-inner { max-width: var(--maxw); margin: 0 auto; padding: 128px 40px; }
.principles-head { max-width: 840px; margin: 0 0 56px; }
.principles-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 24px; text-wrap: balance;
}
.principles-lede { font-family: var(--sans); font-size: 18px; line-height: 1.68; color: var(--ink-soft); margin: 0 0 16px; }
.principles-lede:last-child { margin-bottom: 0; }
.principles-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.principle-card { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: #0a1626; }
.principle-card img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease); }
.principle-card:hover img { transform: scale(1.06); }
.principle-shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(8,15,27,.9) 0%, rgba(8,15,27,.28) 50%, rgba(8,15,27,0) 74%); }
.principle-name {
  position: absolute; left: 20px; right: 16px; bottom: 20px; z-index: 1;
  font-family: var(--serif); font-weight: 500; font-size: 19px; line-height: 1.22; color: #fff; margin: 0;
}
@media (max-width: 980px) { .principles-grid { grid-template-columns: 1fr 1fr; } .principles-inner { padding: 80px 24px; } }

/* ---------------- Leadership ---------------- */
.leadership { background: var(--paper-tint); }
.leadership-inner { max-width: var(--maxw); margin: 0 auto; padding: 128px 40px; }
.leadership-head { margin: 0 0 48px; }
.leadership-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;
}
.leadership-card { display: grid; grid-template-columns: 380px 1fr; gap: 60px; align-items: start; }
.leadership-photo img { width: 100%; height: auto; display: block; }
.lead-name { font-family: var(--serif); font-weight: 500; font-size: 30px; letter-spacing: -.01em; color: var(--ink); margin: 0 0 6px; }
.lead-role { font-family: var(--sans); font-size: 15px; font-weight: 600; color: var(--lotus-blue); letter-spacing: .01em; margin: 0 0 10px; }
.lead-contact { font-family: var(--sans); font-size: 15px; margin: 0 0 28px; }
.lead-contact a { color: var(--ink-soft); border-bottom: 1px solid var(--line); padding-bottom: 1px; transition: color .2s ease; }
.lead-contact a:hover { color: var(--lotus-blue); }
.lead-text p { font-family: var(--sans); font-size: 16px; line-height: 1.72; color: var(--ink-soft); margin: 0 0 18px; }
.lead-text p:last-child { margin-bottom: 0; }
@media (max-width: 860px) {
  .leadership-card { grid-template-columns: 1fr; gap: 30px; }
  .leadership-photo img { max-width: 340px; }
  .leadership-inner { padding: 80px 24px; }
}

/* ============ GS typographic match — uniform across all pages ============ */
/* Section headings — GS Sans Condensed 400 / 60px */
.serve-title, .diff-title, .principles-title, .leadership-title {
  font-family: "Oswald", "Helvetica Neue", Helvetica, Arial, sans-serif;  /* condensed display sans, self-hosted */
  font-weight: 400;
  font-size: 56px;
  line-height: 1.08;
  letter-spacing: .005em;
  color: rgba(0, 0, 0, 0.95);
}
@media (max-width: 768px) {
  .serve-title, .diff-title, .principles-title, .leadership-title { font-size: 40px; }
}
/* Body paragraph text — GS Sans 400 / 18px / 28px */
.diff-lede, .principles-lede, .lead-text p {
  font-family: "Goldman Sans", Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 28px;
  color: rgba(0, 0, 0, 0.8);
}

/* ============ Differentiators — NY skyline backdrop + glass cards ============ */
.diff { position: relative; background: #0a1626; overflow: hidden; }
.diff-bg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: .92; }
.diff::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8,15,27,.66) 0%, rgba(8,15,27,.54) 26%, rgba(8,15,27,.3) 54%, rgba(8,15,27,.08) 80%, rgba(8,15,27,0) 100%); }
.diff-inner { position: relative; z-index: 1; }
.diff .section-eyebrow { color: #9fb6e2; }
.diff-title { color: #fff; }
.diff-lede { color: rgba(255,255,255,.85); }
.diff-item {
  background: linear-gradient(180deg, rgba(46,72,133,.86), rgba(19,37,76,.92));
  border: 1px solid rgba(255,255,255,.22);
  -webkit-backdrop-filter: blur(16px) saturate(130%); backdrop-filter: blur(16px) saturate(130%);
  border-radius: 0; padding: 32px 28px;
  box-shadow: 0 22px 48px -24px rgba(4,10,20,.55), inset 0 1px 0 rgba(255,255,255,.2);
  transition: background .3s var(--ease), transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.diff-item:hover {
  background: linear-gradient(180deg, rgba(54,84,152,.9), rgba(26,46,92,.94));
  transform: translateY(-5px); border-color: rgba(255,255,255,.34);
  box-shadow: 0 34px 66px -26px rgba(4,10,20,.62), inset 0 1px 0 rgba(255,255,255,.24);
}
.diff-num { color: #a9c0ea; }
.diff-item h3 { color: #fff; }
.diff-item p { color: rgba(255,255,255,.82); }

/* ============ Core Principles — hover reveal (matches Featured Deals tiles) ============ */
.principle-front { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 20px 16px 20px 20px; transition: opacity .3s ease; }
.principle-front .principle-name { position: static; margin: 0; }
.principle-card:hover .principle-front { opacity: 0; }
.principle-back {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  background: #fff; padding: 26px 24px 28px;
  transform: translateY(101%); transition: transform .55s var(--ease);
}
.principle-card:hover .principle-back { transform: translateY(0); }
.principle-back-title { font-family: "Oswald", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; font-size: 21px; letter-spacing: .005em; color: var(--ink); margin: 0 0 12px; line-height: 1.15; }
.principle-back p { font-family: "Goldman Sans", Helvetica, Arial, sans-serif; font-size: 14.5px; line-height: 1.58; color: var(--ink-soft); margin: 0; }

/* ============ Leadership — LinkedIn link ============ */
.lead-contact { margin-bottom: 10px; }
.lead-social { margin: 0 0 28px; }
.lead-social a { display: inline-flex; align-items: center; gap: 9px; font-family: var(--sans); font-size: 14px; font-weight: 600; color: var(--lotus-blue); text-decoration: none; }
.lead-social a svg { transition: transform .2s ease; }
.lead-social a:hover { color: var(--lotus-blue-dark); }
.lead-social a:hover svg { transform: scale(1.08); }

/* Client pass: halve the space above each eyebrow-titled section
   (About / Our Clients / What Sets Us Apart / Our Foundation / Our Team) */
#our-name .approach-inner,
#whom-we-serve .serve-inner,
#our-differentiators .diff-inner,
#our-core-principles .principles-inner,
#leadership .leadership-inner { padding-top: 64px; padding-bottom: 64px; }
@media (max-width: 980px) {
  #our-name .approach-inner,
  #whom-we-serve .serve-inner,
  #our-differentiators .diff-inner,
  #our-core-principles .principles-inner,
  #leadership .leadership-inner { padding-top: 40px; padding-bottom: 40px; }
}

/* Client pass: Whom We Serve cards ~20% larger. The section container widens to
   1700px (viewport-capped) so each of the 5 cards grows ~20% on large screens;
   the heading keeps the site's standard 1440 alignment rail. */
.serve-inner { max-width: 1700px; }
.serve-head { max-width: 1360px; margin-left: auto; margin-right: auto; }