/* ── About page — hero, story, timeline, leadership, investors, values ── */

/* ── OUR STORY ── */
.story {
  background: var(--nav-bg);
  padding: clamp(140px, 16vw, 220px) 0 clamp(80px, 10vw, 160px);
}
.story-inner {
  width: 100%;
  max-width: 100%;
  padding: 0 var(--edge-pad);
}

/* ── Office photo pair ── */
.office-photo-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(12px, 1.5vw, 24px);
  margin-bottom: clamp(60px, 8vw, 100px);
}

.office-photo {
  width: 100%;
  height: clamp(220px, 28vw, 480px);
  object-fit: cover;
  border-radius: 8px;
  display: block;
}

@media (max-width: 768px) {
  .office-photo-pair {
    grid-template-columns: 1fr;
  }
}

/* ── Key facts strip ── */
.story-facts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: clamp(28px, 3.5vw, 48px) 0;
  margin-bottom: clamp(48px, 6vw, 80px);
}
.story-fact {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 clamp(16px, 2vw, 32px);
  border-left: 1px solid rgba(255, 255, 255, 0.08);
}
.story-fact:first-child {
  padding-left: 0;
  border-left: none;
}
.story-fact:last-child {
  padding-right: 0;
}
.story-fact-num {
  font-size: clamp(28px, 3.5vw, 52px);
  font-weight: 700;
  color: var(--warm-white);
  line-height: 1;
  letter-spacing: -0.03em;
}
.story-fact-label {
  font-size: clamp(12px, 1.1vw, 15px);
  font-weight: 500;
  color: rgba(240, 237, 232, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ══════════════════════════════
   ABOUT PAGE — Light theme
   ══════════════════════════════ */
.page-about {
  background: var(--cream);
}

/* About hero — full-width image with text overlay */
.about-hero {
  position: relative;
  width: 100%;
  /* svh = visible viewport height (excludes iOS Safari URL bar /
     iPad bottom chrome). Using vh here caused the stats strip to
     sit behind the Safari toolbar on iPad. vh fallback first for
     older browsers. */
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}

/* Stats strip when hosted inside the hero — readable on photo background.
   Higher specificity (.page-about .about-hero) overrides the dark
   .page-about .story-facts rules further down this file. */
.page-about .about-hero .story-facts {
  border-top-color: rgba(255, 255, 255, 0.22);
  border-bottom-color: rgba(255, 255, 255, 0.22);
  margin: clamp(28px, 3vw, 44px) 0 0;
  padding: clamp(20px, 2.5vw, 32px) 0;
}
.page-about .about-hero .story-fact {
  border-left-color: rgba(255, 255, 255, 0.22);
}
.page-about .about-hero .story-fact-num {
  color: #fff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5), 0 2px 16px rgba(0, 0, 0, 0.35);
}
.page-about .about-hero .story-fact-label {
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

.about-hero-bg {
  position: absolute;
  inset: 0;
}

.about-hero-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 60%;
}

/* Bottom-up scrim — pushes the lower half of the photo dark enough that
   white text/stats stay readable over any portion of the underlying
   skyline image. */
.about-hero-overlay {
  position: absolute;
  inset: 0;
  background:
    /* Stops were nudged darker (was 78/66/32/10) so the area where the
       headline + sub + stats sit clears WCAG AA comfortably even when
       the image's bright window/light highlights line up behind text. */
    linear-gradient(
      to top,
      rgba(9, 21, 26, 0.88) 0%,
      rgba(9, 21, 26, 0.78) 28%,
      rgba(9, 21, 26, 0.45) 58%,
      rgba(9, 21, 26, 0.15) 82%,
      transparent 100%
    );
}

.about-hero-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  /* Top padding reserves room for the fixed nav (100px desktop /
     56px mobile via base.css's responsive rule). The bottom padding
     clamps so it shrinks on shorter viewports (iPad landscape at
     1024px height) without dead space on tall desktops.
     Horizontal padding uses max() with env() so headline + stats
     clear the iPhone Dynamic Island in landscape; env() is 0 on
     devices without a notch. */
  padding-top: clamp(120px, 12vw, 160px);
  padding-bottom: clamp(40px, 5vw, 76px);
  padding-left: max(var(--edge-pad), env(safe-area-inset-left));
  padding-right: max(var(--edge-pad), env(safe-area-inset-right));
}

.about-hero-headline {
  font-size: clamp(36px, 4.8vw, 68px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.06;
  color: #fff;
  margin: 0;
  max-width: 680px;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55), 0 2px 16px rgba(0, 0, 0, 0.35);
}

.about-hero-sub {
  font-size: clamp(14px, 1.3vw, 18px);
  font-weight: 400;
  color: rgba(255, 255, 255, 0.92);
  max-width: 540px;
  line-height: 1.5;
  margin: clamp(12px, 1.5vw, 20px) 0 0;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5), 0 2px 16px rgba(0, 0, 0, 0.35);
}

/* Compact hero treatment for narrow phones AND short-viewport landscape
   phones. iPhone landscape (852×393) is wider than 768 but only 393px
   tall, so without the height clause its desktop padding pushed the
   headline above the navbar. */
@media (max-width: 768px), (max-height: 500px) {
  .about-hero {
    /* Hero fills the full viewport on mobile. Height auto + min-height
       100svh means it's exactly the visible viewport in normal cases
       (svh excludes the iOS Safari URL bar so content can't end up
       below the fold), and grows if the content somehow needs more
       vertical space. */
    height: auto;
    min-height: 100svh;
  }
  .about-hero-headline {
    font-size: clamp(28px, 7vw, 40px);
    font-weight: 700;
    max-width: 360px;
    /* Match desktop's 2-layer shadow (was previously dimmed to 0.2,
       which made the headline read as faint over the skyline image). */
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55), 0 2px 16px rgba(0, 0, 0, 0.35);
  }
  .about-hero-content {
    /* Keep desktop's bottom-anchored composition (content sits over
       the lower portion of the hero image). Top padding was sized for
       the 100px desktop navbar; with the 56px mobile navbar in
       base.css, 76px is the minimum safe-area gap so content clears
       the bar without dead space below it. */
    padding-top: 76px;
    padding-bottom: clamp(24px, 4vw, 36px);
  }
  .about-hero-sub {
    font-size: clamp(13px, 3.5vw, 15px);
    max-width: 320px;
  }
  /* Compact the stats strip on mobile — the desktop margins above
     plus the four-up grid push the row outside the viewport on a
     phone. Two columns + smaller numbers/labels gives us a single
     fold-safe stats block. */
  .page-about .about-hero .story-facts {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 14px;
    margin: 20px 0 0;
    padding: 16px 0;
  }
  .page-about .about-hero .story-fact-num {
    font-size: clamp(26px, 7vw, 34px);
  }
  .page-about .about-hero .story-fact-label {
    font-size: 11px;
  }
}

/* ── Short-viewport landscape phones (iPhone landscape, 852×393) ──
   At only ~393px of viewport height there's no room to fit headline
   + sub + 4 stats with the desktop's bottom-anchored composition —
   content overflows upward past the nav. Take .about-hero-content
   out of absolute positioning so the hero grows naturally with
   content and stacks top-down. iPhone portrait (> 500px tall)
   keeps the desktop composition; only landscape gets restructured. */
@media (max-height: 500px) {
  .about-hero {
    overflow: visible;
  }
  .about-hero-content {
    position: relative;
    inset: auto;
    justify-content: flex-start;
    z-index: 3;
  }
}

/* About investors — standalone section above footer */
.about-investors {
  background: var(--cream);
  padding: clamp(72px, 8vw, 104px) var(--edge-pad) clamp(72px, 8vw, 104px);
  text-align: center;
  overflow: hidden;
  position: relative;
}

.about-investors .investors-constrained {
  margin-top: 0;
  padding-top: 0;
  padding-bottom: 0;
}
.about-investors .investors-eyebrow {
  margin-bottom: clamp(40px, 5vw, 72px);
}

/* Story section */
.page-about .story {
  background: var(--cream);
  padding-top: clamp(48px, 5vw, 72px);
}

/* Facts strip */
.page-about .story-facts {
  border-top-color: rgba(16, 32, 39, 0.1);
  border-bottom-color: rgba(16, 32, 39, 0.1);
}
.page-about .story-fact {
  border-left-color: rgba(16, 32, 39, 0.1);
}
.page-about .story-fact-num {
  color: var(--nav-bg);
}
.page-about .story-fact-label {
  color: rgba(16, 32, 39, 0.65);
}

/* Footer stays dark — no overrides needed */


/* Note: .values styles are in base.css (shared with careers page) */

/* Careers CTA section (standalone, after investors) */
.about-careers-cta {
  background:
    radial-gradient(ellipse 78% 58% at 50% 42%, rgba(255, 255, 255, 0.45) 0%, transparent 72%),
    var(--cream);
  padding: clamp(128px, 14vw, 192px) var(--edge-pad);
  position: relative;
  overflow: hidden;
}
.about-careers-cta-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  text-align: center;
}
.about-careers-cta-headline {
  font-size: clamp(38px, 5.4vw, 80px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--nav-bg);
  margin: 0 0 clamp(20px, 1.8vw, 32px) 0;
  text-wrap: balance;
}
.about-careers-cta-em {
  font-weight: 700;
  color: var(--gold);
}
.about-careers-cta-body {
  font-size: clamp(18px, 1.35vw, 22px);
  font-weight: 400;
  line-height: 1.5;
  color: rgba(16, 32, 39, 0.72);
  margin: 0 auto clamp(32px, 3.4vw, 48px);
  max-width: 620px;
}
.about-careers-cta-btn {
  display: inline-flex;
  align-items: center;
  background: var(--gold);
  color: var(--nav-bg);
  padding: 16px 36px;
  border-radius: 0;
  font-size: clamp(16px, 1.15vw, 18px);
  font-weight: 500;
  letter-spacing: -0.005em;
  text-decoration: none;
  transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
  box-shadow: 0 2px 14px rgba(183, 150, 93, 0.18);
}
.about-careers-cta-btn:hover {
  background: var(--gold-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 22px rgba(183, 150, 93, 0.28);
}
@media (prefers-reduced-motion: reduce) {
  .about-careers-cta-btn,
  .about-careers-cta-btn:hover {
    transform: none !important;
    transition: none !important;
  }
}
@media (max-width: 768px) {
  .about-careers-cta {
    padding: clamp(88px, 14vw, 120px) var(--edge-pad);
  }
  .about-careers-cta-headline {
    font-size: clamp(32px, 8.2vw, 52px);
    letter-spacing: -0.03em;
    line-height: 1.02;
  }
  .about-careers-cta-body {
    font-size: clamp(16px, 4.2vw, 18px);
    max-width: none;
    margin-bottom: clamp(28px, 6.5vw, 40px);
  }
  .about-careers-cta-btn {
    padding: 14px 28px;
  }
}



/* ══════════════════════════════════════
   LEADERSHIP SECTION (About page)
   ══════════════════════════════════════ */

.leadership {
  margin-top: clamp(56px, 7vw, 96px);
}

.leadership-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--gold-dark);
  margin-bottom: clamp(16px, 2vw, 24px);
}

.leadership-eyebrow::before {
  content: '';
  width: 28px;
  height: 1.5px;
  background: var(--gold-dark);
  flex-shrink: 0;
}

.leadership-headline {
  font-size: clamp(28px, 3.5vw, 48px);
  font-weight: 700;
  color: var(--teal);
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin-bottom: clamp(48px, 6vw, 80px);
}

.leadership-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(32px, 4vw, 56px);
}

.leadership-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(24px, 3vw, 36px);
  align-items: start;
}

.leadership-photo {
  width: clamp(150px, 15vw, 220px);
  aspect-ratio: 1;
  border-radius: var(--radius-img);
  overflow: hidden;
  background: #d5d1cc;
  flex-shrink: 0;
}

.leadership-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.leadership-info {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-top: 4px;
}

.leadership-name {
  font-size: clamp(24px, 2.2vw, 32px);
  font-weight: 700;
  color: var(--teal);
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0 0 8px 0;
}

.leadership-title {
  font-size: clamp(15px, 1.2vw, 18px);
  font-weight: 600;
  color: var(--gold-dark);
  letter-spacing: 0.01em;
  margin: 0 0 clamp(14px, 1.5vw, 22px) 0;
}

.leadership-bio {
  font-size: clamp(15px, 1.15vw, 18px);
  font-weight: 400;
  color: rgba(16, 32, 39, 0.65);
  line-height: 1.65;
  margin: 0 0 clamp(14px, 1.5vw, 20px) 0;
  max-width: 44ch;
}

@media (max-width: 900px) {
  .leadership-grid {
    grid-template-columns: 1fr;
    gap: clamp(40px, 6vw, 56px);
  }
}

@media (max-width: 480px) {
  .leadership-card {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .leadership-photo {
    width: clamp(100px, 28vw, 140px);
  }
}

/* ── Mobile: fix story-facts grid (cascade override) ── */
@media (max-width: 900px) {
  .story-facts {
    grid-template-columns: repeat(2, 1fr);
    row-gap: clamp(24px, 3vw, 36px);
  }
  .story-fact:nth-child(3) {
    border-left: none;
    padding-left: 0;
  }
}