/* ================================================
   style.css — Utu Legacy Impact Partners v3
   Color Palette: Black · Deep Wine · Gold

   Table of Contents:
   1.  CSS Variables
   2.  Reset & Base
   3.  Navigation + Hamburger Menu
   4.  Hero Section
   5.  Buttons
   6.  Shared Section Styles
   7.  About Section
   8.  Business Lines Section (Sector Cards)
   9.  Unique Value Proposition Section
   10. The Market Section (Cards)
   11. Our Strategy Section (Goal Badges + Cards)
   12. Case Studies Section
   13. Founder's Corner Section
   14. Contact Section
   15. Footer
   16. Responsive — Mobile
================================================ */


/* ================================================
   1. CSS VARIABLES
================================================ */
:root {
  --gold:          #C9A84C;
  --gold-light:    #E2C97E;
  --gold-pale:     #F5EDD5;

  --wine:          #6B1F35;
  --wine-dark:     #4A1224;
  --wine-mid:      #8C2A44;

  --black:         #0C0C0C;
  --charcoal:      #1A1A1A;

  --off-white:     #FAF7F2;
  --surface:       #F2EDE4;

  --text-dark:     #1A1A1A;
  --text-mid:      #5A4A3A;
  --text-muted:    #8A7A6A;
  --text-light:    #E8DCC8;

  --border:        rgba(201, 168, 76, 0.22);
  --border-strong: rgba(201, 168, 76, 0.5);
  --border-dark:   rgba(201, 168, 76, 0.12);
}


/* ================================================
   2. RESET & BASE
================================================ */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Jost', sans-serif;
  background: var(--off-white);
  color: var(--text-dark);
  font-size: 15px;
  line-height: 1.8;
}

strong { font-weight: 500; color: var(--wine); }


/* ================================================
   3. NAVIGATION + HAMBURGER MENU
   The nav is always visible (fixed).
   On desktop: links sit inline on the right.
   On all screens: hamburger button toggles
   .nav-open on <nav>, which drops the link list
   down below the bar.
================================================ */
nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 5%;
  background: rgba(12, 12, 12, 0.97);
  border-bottom: 1px solid var(--border-dark);
  backdrop-filter: blur(10px);
  flex-wrap: wrap; /* Allows dropdown to push below */
}

/* Brand wordmark */
.nav-logo {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1rem;
  letter-spacing: 0.1em;
  color: var(--gold);
  text-decoration: none;
  z-index: 201;
}

.nav-logo-sub {
  color: var(--text-light);
  font-weight: 300;
  opacity: 0.65;
}

/* ── Hamburger button ──────────────────────────
   Three horizontal bars that animate to an X
   when the menu is open (.nav-open class on nav).
   Always visible — it IS the menu trigger.
────────────────────────────────────────────── */
.hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  background: none;
  border: 1px solid var(--border-strong);
  padding: 6px;
  cursor: pointer;
  z-index: 201;
  flex-shrink: 0;
}

/* Each bar of the hamburger icon */
.hamburger span {
  display: block;
  width: 100%;
  height: 1.5px;
  background: var(--gold);
  transition: transform 0.3s ease, opacity 0.3s ease;
  transform-origin: center;
}

/* Animate hamburger → X when .nav-open is on nav */
nav.nav-open .hamburger span:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}
nav.nav-open .hamburger span:nth-child(2) {
  opacity: 0;
}
nav.nav-open .hamburger span:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

/* ── Nav link list ─────────────────────────────
   Hidden by default (max-height: 0).
   Expands smoothly when .nav-open is on nav.
   Full width dropdown below the logo/button row.
────────────────────────────────────────────── */
.nav-links {
  list-style: none;
  width: 100%;           /* Full width below the bar */
  max-height: 0;         /* Collapsed by default */
  overflow: hidden;
  transition: max-height 0.35s ease, padding 0.3s ease;
  display: flex;
  flex-direction: column;
  background: rgba(12, 12, 12, 0.98);
  border-top: none;
}

/* Expanded state — toggled by main.js */
nav.nav-open .nav-links {
  max-height: 420px;
  padding: 0.5rem 0 1rem;
  border-top: 1px solid var(--border-dark);
}

.nav-links li {
  width: 100%;
}

.nav-links a {
  display: block;
  padding: 0.7rem 5%;
  color: var(--text-light);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-decoration: none;
  text-transform: uppercase;
  opacity: 0.65;
  transition: color 0.2s, opacity 0.2s, background 0.2s;
}

.nav-links a:hover,
.nav-links a.active {
  color: var(--gold);
  opacity: 1;
  background: rgba(201, 168, 76, 0.06);
}


/* ================================================
   4. HERO SECTION
================================================ */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 0 5%;
  background: var(--black);
  position: relative;
  overflow: hidden;
}

.hero-accent {
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: 40%;
  background: var(--wine-dark);
  border-left: 1px solid var(--border-dark);
  opacity: 0.55;
}

.hero-ring {
  position: absolute;
  right: 7%; top: 50%;
  transform: translateY(-50%);
  width: 300px; height: 300px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Inner logo circle — swap text for <img src="logo.png" /> */
.hero-ring-inner {
  width: 190px; height: 190px;
  border-radius: 50%;
  background: var(--wine-dark);
  border: 1px solid var(--border-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  overflow: hidden;
}

.hero-content {
  max-width: 600px;
  position: relative;
  z-index: 1;
}

.hero-eyebrow {
  font-size: 0.7rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.hero-eyebrow::before {
  content: '';
  display: block;
  width: 30px; height: 1px;
  background: var(--gold);
  flex-shrink: 0;
}

.hero-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2.3rem, 4.5vw, 3.8rem);
  font-weight: 300;
  line-height: 1.2;
  color: #fff;
  margin-bottom: 2.5rem;
}

.hero-title em {
  font-style: italic;
  color: var(--gold-light);
}


/* ================================================
   5. BUTTONS
================================================ */
.btn-group { display: flex; gap: 1rem; flex-wrap: wrap; }

.btn-primary {
  display: inline-block;
  padding: 0.85rem 2.2rem;
  background: var(--gold);
  color: var(--black);
  font-family: 'Jost', sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.2s;
}
.btn-primary:hover { background: var(--gold-light); }

.btn-outline {
  display: inline-block;
  padding: 0.85rem 2.2rem;
  border: 1px solid var(--gold);
  color: var(--gold);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}
.btn-outline:hover { background: var(--gold); color: var(--black); }


/* ================================================
   6. SHARED SECTION STYLES
================================================ */
section { padding: 6rem 5%; }

.section-label {
  font-size: 0.67rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.65rem;
}
.section-label::before {
  content: '';
  display: block;
  width: 22px; height: 1px;
  background: var(--gold);
  flex-shrink: 0;
}

.section-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  font-weight: 300;
  color: var(--text-dark);
  line-height: 1.25;
  margin-bottom: 1.5rem;
}

.section-intro {
  font-size: 0.92rem;
  color: var(--text-mid);
  max-width: 680px;
  margin-bottom: 3rem;
  font-weight: 300;
  line-height: 1.85;
}

.divider {
  width: 40px; height: 1px;
  background: var(--gold);
  margin: 1.2rem 0 1.8rem;
}


/* ================================================
   7. ABOUT SECTION — Slide 2
================================================ */
.about { background: var(--black); }
.about .section-label       { color: var(--gold); }
.about .section-label::before { background: var(--gold); }
.about .section-title       { color: #fff; }

.about-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 5rem;
  align-items: start;
  margin-top: 2rem;
}

/* Photo/logo placeholder */
.about-photo {
  aspect-ratio: 3 / 4;
  background: var(--wine-dark);
  border: 1px solid var(--border-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  overflow: hidden;
}

.about-text p {
  color: var(--text-light);
  margin-bottom: 1.3rem;
  font-size: 0.92rem;
  font-weight: 300;
  opacity: 0.85;
  line-height: 1.85;
}

.lines-intro {
  color: var(--gold-light) !important;
  font-weight: 400 !important;
  opacity: 1 !important;
  margin-bottom: 1rem !important;
}

/* Business lines as mini horizontal cards */
.bizlines-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.bizline-card {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem 1.2rem;
  background: rgba(201, 168, 76, 0.06);
  border: 1px solid var(--border-dark);
  border-left: 3px solid var(--gold);
}

.bizline-num {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.1rem;
  color: var(--gold);
  flex-shrink: 0;
  line-height: 1.4;
}

.bizline-text {
  font-size: 0.82rem;
  color: var(--text-light);
  font-weight: 300;
  line-height: 1.6;
  opacity: 0.85;
}

.summary-text {
  border-left: 2px solid var(--gold);
  padding-left: 1.2rem;
  font-style: italic;
  color: var(--gold-light) !important;
  opacity: 0.9 !important;
}


/* ================================================
   8. BUSINESS LINES — Slides 4 & 5
   Icon cards for each sector.
================================================ */
#business-lines { background: var(--surface); }

/* Grid of sector icon cards */
.sector-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1rem;
  margin-top: 2rem;
}

.sector-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 2rem 1.2rem;
  background: #fff;
  border: 1px solid var(--border);
  border-bottom: 3px solid var(--wine);
  gap: 0.75rem;
  transition: transform 0.2s, border-color 0.2s;
}

.sector-card:hover {
  transform: translateY(-4px);
  border-bottom-color: var(--gold);
}

.sector-icon {
  font-size: 1.6rem;
  color: var(--wine);
  line-height: 1;
}

.sector-name {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-dark);
  letter-spacing: 0.02em;
  line-height: 1.4;
}


/* ================================================
   9. UNIQUE VALUE PROPOSITION — Slide 6
================================================ */
.uvp { background: var(--wine-dark); }
.uvp .section-label         { color: var(--gold-light); }
.uvp .section-label::before { background: var(--gold-light); }
.uvp .section-title         { color: #fff; }

.uvp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
  margin-top: 2.5rem;
}

.uvp-card {
  padding: 2.5rem 2rem;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(201,168,76,0.25);
  border-top: 3px solid var(--gold);
  transition: background 0.2s;
}
.uvp-card:hover { background: rgba(255,255,255,0.08); }

.uvp-icon {
  font-size: 1.8rem;
  margin-bottom: 1rem;
}

.uvp-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--gold-light);
  margin-bottom: 0.75rem;
  letter-spacing: 0.04em;
}

.uvp-text {
  font-size: 0.83rem;
  color: var(--text-light);
  line-height: 1.8;
  font-weight: 300;
  opacity: 0.8;
}

.clients-wrap { margin-top: 3.5rem; }

.clients-label {
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.2rem;
}

.clients-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}

.client-tag {
  display: inline-block;
  padding: 0.5rem 1.3rem;
  border: 1px solid var(--border-strong);
  color: var(--gold-light);
  font-size: 0.78rem;
  letter-spacing: 0.05em;
}

.rooted-in {
  margin-top: 3rem;
  padding: 1.8rem 2rem;
  border-left: 3px solid var(--gold);
  background: rgba(201,168,76,0.06);
}

.rooted-in p {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.15rem;
  font-weight: 300;
  font-style: italic;
  color: var(--gold-light);
  line-height: 1.7;
}


/* ================================================
   10. THE MARKET SECTION — Slide 7
   Four bold evidence cards at the top.
   Two insight cards (Trends + Sector cap) below.
================================================ */
.market { background: var(--black); }
.market .section-label         { color: var(--gold); }
.market .section-label::before { background: var(--gold); }
.market .section-title         { color: #fff; }

/* Four evidence cards */
.market-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.2rem;
  margin-top: 2.5rem;
  margin-bottom: 3rem;
}

.market-card {
  padding: 2rem 1.8rem;
  background: var(--charcoal);
  border: 1px solid var(--border-dark);
  border-top: 3px solid var(--gold);
  transition: background 0.2s;
}
.market-card:hover { background: #222; }

.market-card-icon {
  font-size: 1.8rem;
  margin-bottom: 1rem;
  line-height: 1;
}

.market-card-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--gold-light);
  margin-bottom: 0.75rem;
  line-height: 1.35;
}

.market-card-text {
  font-size: 0.82rem;
  color: var(--text-light);
  line-height: 1.75;
  font-weight: 300;
  opacity: 0.7;
}

/* Two insight detail cards below the evidence cards */
.market-insights {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.market-insight-card {
  padding: 2rem 2rem;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border-dark);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.market-insight-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--gold);
  border-bottom: 1px solid var(--border-dark);
  padding-bottom: 0.5rem;
}

.market-insight-card p {
  font-size: 0.85rem;
  color: var(--text-light);
  line-height: 1.85;
  font-weight: 300;
  opacity: 0.75;
}

/* Numbered list inside Trends insight card */
.market-list {
  list-style: decimal;
  padding-left: 1.3rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.market-list li {
  font-size: 0.85rem;
  color: var(--text-light);
  font-weight: 300;
  line-height: 1.7;
  opacity: 0.75;
}


/* ================================================
   11. OUR STRATEGY — Slide 8
   Goal badges + four pillar cards.
================================================ */
#strategy { background: var(--off-white); }

/* Three prominent goal badges */
.strategy-goals {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 3rem;
}

.goal-badge {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.5rem;
  background: var(--wine);
  border-left: 4px solid var(--gold);
  flex: 1;
  min-width: 220px;
}

.goal-num {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.6rem;
  color: var(--gold);
  flex-shrink: 0;
  line-height: 1;
}

.goal-text {
  font-size: 0.85rem;
  color: var(--gold-light);
  font-weight: 300;
  line-height: 1.4;
}

/* Four strategy pillar cards */
.strategy-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1px;
  background: var(--border);
}

.strategy-card {
  padding: 2.2rem 1.8rem;
  background: var(--off-white);
  border-top: 3px solid var(--gold);
  transition: background 0.2s;
}
.strategy-card:hover { background: var(--gold-pale); }

.strategy-card-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--wine);
  margin-bottom: 1rem;
  line-height: 1.3;
}

.strategy-sub {
  font-size: 0.78rem;
  color: var(--gold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}

.strategy-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.strategy-list li {
  font-size: 0.83rem;
  color: var(--text-mid);
  font-weight: 300;
  line-height: 1.6;
  padding-left: 1rem;
  position: relative;
}
.strategy-list li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: var(--gold);
}
.strategy-list li strong { color: var(--wine); font-weight: 500; }


/* ================================================
   12. CASE STUDIES SECTION — Slide 10
================================================ */
.case-studies { background: var(--surface); }

.placeholder-block {
  margin-top: 2rem;
  padding: 4rem 2rem;
  border: 1px dashed var(--border-strong);
  text-align: center;
}

.placeholder-text {
  font-size: 0.88rem;
  color: var(--text-muted);
  font-style: italic;
}


/* ================================================
   13. FOUNDER'S CORNER — Slide 11
================================================ */
.founders { background: var(--black); }
.founders .section-label         { color: var(--gold); }
.founders .section-label::before { background: var(--gold); }
.founders .section-title         { color: #fff; }

.founders-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2.5rem;
  margin-top: 2.5rem;
}

.founder-card {
  display: flex;
  gap: 1.8rem;
  align-items: flex-start;
  padding: 2rem;
  background: var(--charcoal);
  border: 1px solid var(--border-dark);
}

.founder-photo {
  width: 90px; height: 110px;
  flex-shrink: 0;
  background: var(--wine-dark);
  border: 1px solid var(--border-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  color: var(--gold);
  text-transform: uppercase;
  overflow: hidden;
}

.founder-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.25rem;
  font-weight: 400;
  color: #fff;
  margin-bottom: 0.25rem;
}

.founder-role {
  font-size: 0.73rem;
  color: var(--gold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.founder-divider {
  width: 30px; height: 1px;
  background: var(--wine-mid);
  margin: 0.75rem 0;
}

.founder-bio {
  font-size: 0.83rem;
  color: var(--text-light);
  line-height: 1.75;
  font-weight: 300;
  opacity: 0.7;
}


/* ================================================
   14. CONTACT SECTION — Slide 12
================================================ */
#contact { background: var(--off-white); }

#contact .section-title { color: var(--wine); }

.contact-wrap {
  max-width: 640px;
  margin: 2rem auto 0;
  text-align: center;
}

.contact-wrap > p {
  color: var(--text-mid);
  font-size: 0.9rem;
  margin-bottom: 2.5rem;
  font-weight: 300;
}

.highlight-email { color: var(--wine); font-weight: 500; }

.contact-fields { display: grid; gap: 1rem; text-align: left; }

.field-group {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr 1fr;
}

input, textarea {
  width: 100%;
  padding: 0.9rem 1rem;
  background: #fff;
  border: 1px solid var(--border-strong);
  color: var(--text-dark);
  font-family: 'Jost', sans-serif;
  font-size: 0.85rem;
  font-weight: 300;
  outline: none;
  transition: border-color 0.2s;
  border-radius: 0;
}

input::placeholder, textarea::placeholder { color: var(--text-muted); }
input:focus, textarea:focus { border-color: var(--gold); }

textarea { resize: vertical; min-height: 130px; }

.form-status { font-size: 0.85rem; margin-top: 0.5rem; min-height: 1.2rem; }
.form-status.success { color: #3a7a50; }
.form-status.error   { color: #a0281e; }

.submit-row { margin-top: 1.5rem; text-align: center; }

.submit-row button {
  padding: 0.9rem 3rem;
  background: var(--wine);
  color: var(--gold-light);
  border: none;
  font-family: 'Jost', sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s;
}
.submit-row button:hover { background: var(--wine-mid); }


/* ================================================
   15. FOOTER
================================================ */
footer {
  padding: 2.5rem 5%;
  background: var(--black);
  border-top: 1px solid var(--border-dark);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
}

.footer-brand { display: flex; flex-direction: column; gap: 0.35rem; }

.footer-logo {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.05rem;
  color: var(--gold);
  letter-spacing: 0.1em;
}

.footer-tagline {
  font-size: 0.72rem;
  color: var(--text-light);
  opacity: 0.45;
  letter-spacing: 0.06em;
  font-style: italic;
}

.footer-links { display: flex; gap: 2rem; }

.footer-links a {
  font-size: 0.72rem;
  color: var(--text-light);
  text-decoration: none;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.45;
  transition: color 0.2s, opacity 0.2s;
}
.footer-links a:hover { color: var(--gold); opacity: 1; }

.footer-copy {
  font-size: 0.68rem;
  color: var(--text-light);
  opacity: 0.3;
}


/* ================================================
   16. RESPONSIVE — Mobile (max-width: 680px)
================================================ */
@media (max-width: 680px) {

  /* Stack about grid */
  .about-grid { grid-template-columns: 1fr; gap: 2.5rem; }

  /* Stack business line cards */
  .bizlines-grid { grid-template-columns: 1fr; }

  /* Stack form field pairs */
  .field-group { grid-template-columns: 1fr; }

  /* Hide hero decorative elements */
  .hero-accent, .hero-ring { display: none; }

  /* Stack market insight cards */
  .market-insights { grid-template-columns: 1fr; }

  /* Stack strategy goals */
  .strategy-goals { flex-direction: column; }
  .goal-badge { min-width: unset; }

  /* Stack founder cards */
  .founder-card { flex-direction: column; }
  .founder-photo { width: 100%; height: 160px; }
}