/* Dorm Room Fund — the two pages the Webflow build does not have yet.

   Everything here sits on top of the build's own shared stylesheet
   (../site-src/assets/dormroomfund.webflow.shared.*.css), which carries the
   variables, the type ramp, the nav, the footer, and the section-card classes.
   This file has two halves:

   1. The build's page-level interaction layer, lifted verbatim from the inline
      <style> blocks on the mirrored pages. Webflow keeps these per page rather
      than in the shared stylesheet, so a new page has to carry them itself.
      The signature move throughout is the diagonal wipe: a ::before layer
      parked off the bottom-left corner at translate(-105%, 105%) sliding home
      over .85s on cubic-bezier(.22,1,.36,1), with the label color crossfading
      as the new ground arrives under it. Orange things wipe to ink, ink things
      wipe to orange, purple CTAs wipe out toward the top-right.

   2. The blocks these two pages introduce (value cards, FAQ, quote cards, role
      cards), written in the same idiom so they read as Webflow output.       */

/* ------------------------------------------------------------------ 1. */

@keyframes navFixedUp {from {
    opacity: 0;
    transform: translateY(20px);
  }
to {
    opacity: 1;
    transform: translateY(0);
  }

}
.nav_fixed {
  opacity: 0;
  animation: navFixedUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.4s both;
}
/* Apply button: orange at rest, ink wipes in from bottom-left */
.button.is-navbar4-button::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--_theme---background--primary, #1c1525);
  transform: translate(-105%, 105%);
  transition: transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}
.button.is-navbar4-button:hover::before {
  transform: translate(0, 0);
}
.button.is-navbar4-button:hover {
  color: var(--_theme---text--primary, #d9d5df);
}
/* Menu button: ink at rest, orange wipes in from bottom-left */
.menu-icon4::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--_theme---background--accent, #ff6a33);
  transform: translate(-105%, 105%);
  transition: transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}
.navbar4_menu-button:hover .menu-icon4::before {
  transform: translate(0, 0);
}
.navbar4_menu-button:hover .menu-icon4_line-top, .navbar4_menu-button:hover .menu-icon4_line-bottom, .navbar4_menu-button:hover .menu-icon4_line-middle-top, .navbar4_menu-button:hover .menu-icon4_line-middle-base {
  background-color: var(--_theme---background--primary, #1c1525);
}
.menu-icon4_line-top, .menu-icon4_line-bottom, .menu-icon4_line-middle-top, .menu-icon4_line-middle-base {
  transition: background-color 0.35s ease;
}
.navbar4_link {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: color 0.35s ease;
}
.navbar4_link::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--_theme---background--accent, #ff6a33);
  transform: translate(-105%, 105%);
  transition: transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}
.navbar4_link:hover::before {
  transform: translate(0, 0);
}
.navbar4_link:hover {
  color: var(--_theme---background--primary, #1c1525);
}
/* The two page buttons. is-primary: solid orange that wipes out to an orange
   outline. is-light: lavender that wipes out to ink. */
.btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  padding: 0 28px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
  text-decoration: none;
  cursor: pointer;
}
.btn::before {
  content: "";
  position: absolute;
  inset: -1.5px;
  z-index: -1;
  border-radius: inherit;
  transition: transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}
.btn:hover::before {
  transform: translate(105%, -105%);
}
.btn.is-primary {
  color: var(--_theme---text--inverse, #1c1525);
  border: 1.5px solid var(--_theme---background--accent, #ff6a33);
  transition: color 0.35s ease;
}
.btn.is-primary::before {
  background: var(--_theme---background--accent, #ff6a33);
}
.btn.is-primary:hover {
  color: var(--_theme---background--accent, #ff6a33);
}
.btn.is-light {
  color: var(--_theme---text--inverse, #1c1525);
  background: var(--_theme---background--primary, #1c1525);
  transition: color 0.35s ease;
}
.btn.is-light::before {
  background: var(--_theme---background--lightest, #f1eff4);
}
.btn.is-light:hover {
  color: var(--_theme---text--primary, #d9d5df);
}
/* Footer */
.footer_cta, .footer_nav-link {
  isolation: isolate;
}
.footer_logo {
  transition: background 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.footer_logo.is-on {
  background: var(--_theme---background--card, #9378ee);
}
.door-toggle_svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  display: block;
}
.door-toggle_frame {
  fill: var(--_theme---background--primary, #1c1525);
  transition: fill 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.door-toggle_panel {
  fill: var(--_theme---background--secondary, #b8b0c4);
  transition:
    fill 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.footer_logo.is-on .door-toggle_panel {
  fill: var(--_theme---background--accent, #ff6a33);
  transform: translate(68px, -46px);
}
.footer_logo:not(.is-on):hover .door-toggle_panel {
  transform: translate(12px, -8px);
}
.footer_cta {
  transition: color 0.35s ease;
}
.footer_cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--_theme---background--card, #9378ee);
  transition: transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}
.footer_cta:hover::before {
  transform: translate(105%, -105%);
}
.footer_cta:hover {
  color: var(--_theme---text--primary, #d9d5df);
}
.footer_nav-link {
  transition: color 0s;
}
.footer_nav-link::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--_theme---background--accent, #ff6a33);
  transform: translate(-105%, 105%);
  transition: transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}
.footer_nav-link:hover::before {
  transform: translate(0, 0);
}
.footer_nav-link:hover {
  color: var(--_theme---background--primary, #1c1525);
}
.footer_legal-link {
  transition: color 0.25s ease;
}
.footer_legal-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 100%;
  height: 1.5px;
  background: var(--_theme---background--card, #9378ee);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.footer_legal-link:hover {
  color: var(--_theme---background--card, #9378ee);
}
.footer_legal-link:hover::after {
  transform: scaleX(1);
}
.footer_social-btn {
  transition: color 0.25s ease;
}
.footer_social-btn:hover {
  color: var(--_theme---text--primary, #d9d5df);
}


/* Hero copy rises in, same as the homepage hero_text */
@keyframes heroTextUp {from {
    opacity: 0;
    transform: translateY(20px);
  }
to {
    opacity: 1;
    transform: translateY(0);
  }

}
.page-hero_inner > * {
  opacity: 0;
  animation: heroTextUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.page-hero_inner > *:nth-child(1) {
  animation-delay: 0s;
}
.page-hero_inner > *:nth-child(2) {
  animation-delay: 0.3s;
}
.page-hero_inner > *:nth-child(3) {
  animation-delay: 0.5s;
}
/* ------------------------------------------------------------------ 2. */

/* Section header: heading plus one supporting line, used the way the build's
   partner-section_heading is used. */
.section-head {
  display: flex;
  flex-flow: column;
  gap: 12px;
  max-width: 44rem;
}
.section-head_text {
  font-size: 18px;
  line-height: 1.5;
  opacity: 0.7;
}
/* ---- Value cards: the three How We Work statements, each its own band ---- */
.value-stack {
  display: flex;
  flex-flow: column;
  gap: var(--_layout---spacing--global-padding);
  margin: 0 var(--_layout---spacing--global-padding) var(--_layout---spacing--global-padding);
  /* no top margin: the hero band above already carries the 12px, and the gap
     between bands must equal the gap to the viewport's sides (Hunter 9/2) */
}
.value-card {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 3rem 4rem;
  align-items: start;
  padding: var(--_layout---spacing--huge) var(--_layout---spacing--xxlarge);
  border-radius: var(--_sizes---border-radius--large);
  position: relative;
}
.value-card.is-light {
  background: var(--_theme---background--light);
  color: var(--neutral--ink);
}
.value-card.is-secondary {
  background: var(--_theme---background--secondary);
  color: var(--neutral--ink);
}
.value-card.is-outline {
  border: 2px solid #d9d5df1a;
  color: var(--_theme---text--primary);
}
.value-card_head {
  display: flex;
  flex-flow: column;
  gap: 1.25rem;
}
.value-card_num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
  border: 1.5px solid currentColor;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition:
    color 0.35s ease,
    border-color 0.35s ease;
}
.value-card_num::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--_theme---background--accent, #ff6a33);
  transform: translate(-105%, 105%);
  transition: transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}
.value-card:hover .value-card_num::before {
  transform: translate(0, 0);
}
.value-card:hover .value-card_num {
  color: var(--neutral--ink);
  border-color: transparent;
}
.value-card_body {
  font-size: clamp(1.125rem, 1.6vw, 1.375rem);
  line-height: 1.5;
  max-width: 34em;
  padding-top: 0.35rem;
}
.value-card.is-outline .value-card_body {
  opacity: 0.85;
}
/* ---- FAQ ---- */
.faq-section {
  margin: var(--_layout---spacing--global-padding);
  padding: var(--_layout---spacing--huge) var(--_layout---spacing--xxlarge);
  display: flex;
  flex-flow: column;
  gap: 2.5rem;
  border-radius: var(--_sizes---border-radius--large);
  background: var(--_theme---background--secondary);
  color: var(--neutral--ink);
}
.faq-list {
  display: flex;
  flex-flow: column;
  gap: 8px;
}
.faq-item {
  border-radius: var(--_sizes---border-radius--large);
  background: var(--_theme---background--light);
  overflow: hidden;
}
.faq-item_q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.5rem 1.75rem;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
  font-size: clamp(1.25rem, 1.6vw, 1.5rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: var(--letter-spacing--tighter);
}
.faq-item_icon {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid #1c152540;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition:
    border-color 0.35s ease,
    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.faq-item_icon::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--_theme---background--accent, #ff6a33);
  transform: translate(-105%, 105%);
  transition: transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}
.faq-item_icon svg {
  width: 14px;
  height: 14px;
  display: block;
}
.faq-item_q:hover .faq-item_icon::before, .faq-item.is-open .faq-item_icon::before {
  transform: translate(0, 0);
}
.faq-item_q:hover .faq-item_icon, .faq-item.is-open .faq-item_icon {
  border-color: transparent;
}
.faq-item.is-open .faq-item_icon {
  transform: rotate(45deg);
}
.faq-item_a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.faq-item.is-open .faq-item_a {
  grid-template-rows: 1fr;
}
.faq-item_a > div {
  overflow: hidden;
}
.faq-item_a p {
  margin: 0;
  padding: 0 1.75rem 1.75rem;
  max-width: 62ch;
  font-size: 17px;
  line-height: 1.6;
  color: #1c1525d1;
}
.role-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.role-card {
  display: flex;
  flex-flow: column;
  gap: 1.5rem;
  min-height: 300px;
  padding: 1.75rem;
  border-radius: var(--_sizes---border-radius--large);
  background: var(--_theme---background--light);
}
.role-card_title {
  margin-top: auto;
  font-size: clamp(1.25rem, 1.7vw, 1.5rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: var(--letter-spacing--tighter);
}
.role-card_body {
  font-size: 16px;
  line-height: 1.5;
  opacity: 0.8;
}
/* ---- Closing CTA: the build's own portfolio-cta-section, plus a text link ---- */
.cta-link {
  color: var(--_theme---text--primary);
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
  position: relative;
  padding-bottom: 3px;
}
.cta-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1.5px;
  background: var(--_theme---background--accent, #ff6a33);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.cta-link:hover::after {
  transform: scaleX(1);
}
.cta-actions {
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
}


/* ---- Responsive, in the build's own breakpoints ---- */
@media (max-width: 991px) {.value-card {
    grid-template-columns: 1fr;
    gap: 2rem;
    padding: 4rem 3rem;
  }
.role-grid {
    grid-template-columns: 1fr 1fr;
  }
.faq-section {
    padding: 4rem 3rem;
  }

}

@media (max-width: 767px) {.value-card, .faq-section {
    padding: 3rem 1.5rem;
  }
.role-grid {
    grid-template-columns: 1fr;
  }
.faq-item_q {
    padding: 1.25rem 1.25rem;
  }
.faq-item_a p {
    padding: 0 1.25rem 1.25rem;
  }

}

@media (prefers-reduced-motion: reduce) {.nav_fixed, .page-hero_inner > * {
    animation: none;
    opacity: 1;
  }
.btn::before, .navbar4_link::before, .value-card_num::before, .faq-item_icon::before, .footer_cta::before, .footer_nav-link::before, .button.is-navbar4-button::before, .menu-icon4::before {
    transition: none;
  }

}
/* ------------------------------------------------------------------ 3.
   Join page survivors of the 2026-08-30 pass. The rest of that section was
   superseded by the recomposition (section 5) and removed 2026-08-31 after
   Hunter's comment round; what remains is only what join.html still uses. */

/* ---- What partners do: four across ----
   The .role-card geometry is unchanged; only the count differs. */
.role-grid.is-four {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
/* The three-up card pins its title to the bottom with margin-top:auto, which
   works when the bodies match. These four do not, so the titles staggered.
   Top-align the whole stack instead and let the cards run to equal height. */
.role-grid.is-four .role-card {
  min-height: 250px;
  justify-content: flex-start;
  gap: 1rem;
}
.role-grid.is-four .role-card_title {
  margin-top: 0.25rem;
}
/* ---- FAQ: the region list inside the first answer ---- */
/* .faq-item_a p carries the 28px side padding, so the list has to match it or
   it hangs outside the answer. */
.faq-regions {
  list-style: none;
  margin: 0;
  padding: 0 28px 28px;
  display: flex;
  flex-flow: column;
  gap: 0.75rem;
}
.faq-item_a p:has(+ .faq-regions) {
  padding-bottom: 1rem;
}
.faq-regions li {
  font-size: 16px;
  line-height: 1.5;
  color: #1c1525d1;
}
.faq-regions b {
  display: block;
  margin-bottom: 2px;
  color: var(--neutral--ink);
  font-weight: var(--font-weight--medium);
}
@media (max-width: 991px) {
  .role-grid.is-four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .role-grid.is-four { grid-template-columns: 1fr; }
  .faq-regions { padding: 0 1.25rem 1.25rem; }
}

/* ------------------------------------------------------------------ 4.
   How We Work — the three pillar graphics.

   Through-line: three states of one door. Recognised before it is drawn, walked through hundreds of times, opening onto more.

   Colour contract, and the reason the three read as one instrument:
     purple  #9378EE  what DRF already believes. Whole. Never moves.
     lavender#D9D5DF  what the founder can show now. Thin, partial, low alpha.
     orange  #FF6A33  exactly once per graphic, on the founder's own position.

   Every panel is an ink plate regardless of the card behind it; three ink
   plates down the page are the visual spine.                                */

.value-card.has-fig {
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: center;
}
.value-card_col { display: flex; flex-flow: column; gap: 1.5rem; }
.value-card.has-fig .value-card_body { padding-top: 0; }
.value-card.has-fig.is-stacked {
  grid-template-columns: 1fr;
}
.pillar-fig {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--_sizes---border-radius--medium);
  background: var(--neutral--ink);
  overflow: hidden;
}
.value-card.is-outline .pillar-fig { box-shadow: inset 0 0 0 1px #d9d5df1a; }
.pillar-fig.is-wide { aspect-ratio: 3 / 1; }
.pillar-fig_svg { display: block; width: 100%; height: 100%; }
/* ---- Pillar 1: the draft and the fill ---- */
.pf-fill { fill: var(--brand--purple); }
.pf-knock { fill: var(--neutral--ink); opacity: .92; }
.pf-draft {
  stroke: var(--neutral--lavender);
  stroke-opacity: .45;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pf-live { fill: var(--brand--orange); }
/* ---- Pillar 2: the worn path ----
   Static by construction. The routes are generated once and never move, so
   this graphic is identical with JS off and under reduced motion. */
.pf-route { fill: none; stroke: var(--neutral--lavender); stroke-opacity: .09; stroke-width: 1; }
.pf-route.is-yours { stroke: var(--brand--orange); stroke-opacity: .95; stroke-width: 2; }
.pf-gate { transform: translate(calc(var(--x) * 1200px), 45px); }
.pf-jamb { fill: var(--neutral--lavender-muted); opacity: .55; transform: skewY(-31.6deg); }
.pf-labels { position: absolute; left: 0; right: 0; bottom: 14px; height: 0; }
.pf-label {
  position: absolute; bottom: 0; left: calc(var(--x) * 100%); transform: translateX(-50%);
  font-size: 12px; color: var(--neutral--lavender); opacity: .5; white-space: nowrap;
}
/* ---- Pillar 3: the room behind the door ---- */
.pf-door-frame { fill: var(--neutral--lavender); }
.pf-door-panel { fill: var(--neutral--ink); transition: transform .7s cubic-bezier(.34,1.56,.64,1), fill .6s ease; }
.pf-door.is-open .pf-door-panel { fill: var(--brand--purple); transform: translate(68px, -46px); }
.pf-door.is-open .pf-door-frame, .pf-door.was-open .pf-door-frame { fill: var(--brand--purple); }
.pf-hero-frame { fill: var(--brand--purple); }
.pf-hero-panel { fill: var(--brand--orange); }
.pf-help {
  position: absolute; left: 6%; bottom: 8%;
  max-width: 62%;
  font-size: 14px; line-height: 1.4;
  color: var(--_theme---text--primary);
  opacity: 0; transition: opacity .5s ease;
}
.pf-help.is-on { opacity: .9; }


@media (max-width: 991px) {.value-card.has-fig { grid-template-columns: 1fr; }
.pillar-fig { aspect-ratio: 5 / 4; }
.pillar-fig.is-wide { aspect-ratio: 2 / 1; }

}

@media (max-width: 767px) {.pf-label { font-size: 10px; }
.pillar-fig.is-wide { aspect-ratio: 3 / 2; }

}


/* The still frame is the real frame: nothing here needs motion to make its
   point, so reduced motion simply stops the loops. */
@media (prefers-reduced-motion: reduce) {.pf-door-panel, .pf-help { transition: none; }

}


/* ------------------------------------------------------------------ 5.
   Join the Investor Team, recomposed 2026-08-31.

   The previous pass invented its own component set (stat boxes, ink deadline
   plates, bullet rows) and ran eleven thin bands; every real page in this
   build is FOUR generous sections. This version is assembled from the build's
   own molecules, all already in the shared stylesheet:

     team-leader-card    the intro prose and the two student quote features
     partner-section     what partners do (muted card, light tiles)
     team-alumni-section what you'll receive + short alumni quotes (tiles)
     section_cta         how to apply (the one lavender band = the one bright,
                         most-important moment, exactly like home's closing)
     portfolio-cta-section  the closing ask (elevated), as on the portfolio page

   pages.css only adds the hover layer those molecules carry inline on
   our-team.html, plus typographic modifiers. Nothing here invents a surface,
   a ground, or an interaction the build does not already have.              */

/* On our-team the alumni tiles are links and carry a hover flood; here they
   are static list items, so they get no hover state. Hunter 8/31. */

/* ---- Intro: one team-leader-card at full width ---- */
.section_leadership.is-single .leadership-grid { grid-template-columns: 1fr; }
.team-leader-card.is-intro {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: 2.5rem 4rem;
  align-items: start;
}
.intro-lead {
  margin: 0;
  font-size: clamp(1.5rem, 2.3vw, 2.125rem);
  line-height: 1.3;
  letter-spacing: var(--letter-spacing--tighter);
  font-weight: var(--font-weight--medium);
}
.intro-rest { display: flex; flex-flow: column; gap: 1.25rem; max-width: 62ch; }
.intro-rest p { margin: 0; font-size: 18px; line-height: 1.55; color: #1c1525d1; }
.intro-apply {
  grid-column: 1 / -1;
  margin-top: 1rem;
  padding-top: 2.5rem;
  border-top: 1px solid #1c152526;
  display: flex; align-items: center; justify-content: space-between;
  gap: 2rem; flex-wrap: wrap;
}
.intro-apply .cta_text { max-width: 32em; }

/* ---- What you'll receive: alumni tiles doing list duty ---- */
.team-alumni-item.is-receive { padding: 1.75rem; grid-row-gap: 8px; }
.is-receive .team-alumni_name { font-size: 17px; line-height: 1.35; }
.receive-body { font-size: 15px; line-height: 1.5; opacity: .72; }

/* ---- In their words: stats as type, quotes as leader cards ---- */
/* Hunter 8/31 round 4: the whole section is one bento grid — stats and
   testimonials intermingled at the section's 8px gutter. Source order is
   the phone order; the areas below scatter the three orange stat cards
   diagonally and give Hari's long quote a 4-col double-row anchor cell. */
.section_leadership.is-words {
  color: var(--_theme---text--primary);
}
.words-bento {
  display: grid; gap: 8px;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-template-areas:
    "s1 s1 eq eq eq eq"
    "hq hq hq hq s2 s2"
    "hq hq hq hq t1 t1"
    "a1 a1 s3 s3 t2 t2";
  padding-top: 3rem;
}
.words-bento > :nth-child(1) { grid-area: s1; }
.words-bento > :nth-child(2) { grid-area: eq; }
.words-bento > :nth-child(3) { grid-area: hq; }
.words-bento > :nth-child(4) { grid-area: s2; }
.words-bento > :nth-child(5) { grid-area: t1; }
.words-bento > :nth-child(6) { grid-area: a1; }
.words-bento > :nth-child(7) { grid-area: s3; }
.words-bento > :nth-child(8) { grid-area: t2; }
/* Hunter 8/31 round 3: the shared team-leader-card brings 6rem/5rem padding
   ("mega"); unify every card in this register at the stat cards' 1.75rem. */
.is-words .team-leader-card { color: var(--_theme---text--secondary); padding: 1.75rem; }
/* Hunter 8/31: three distinct orange cards, copy left-aligned, values
   counting up on scroll (script in build.py's TAIL). Ink on orange, the
   same pairing as every accent surface in the build. */
.join-stat {
  display: flex; flex-flow: column; justify-content: space-between;
  gap: 2.25rem; min-height: 220px;
  padding: 1.75rem;
  border-radius: var(--_sizes---border-radius--large);
  background: var(--_theme---background--accent, #FF6A33);
  color: var(--neutral--ink);
}
.join-stat_value {
  font-family: var(--font-family--heading);
  font-size: clamp(2.75rem, 4.5vw, 4.25rem);
  line-height: 1;
  letter-spacing: var(--letter-spacing--tightest);
}
.join-stat_label {
  margin-top: auto; max-width: 26ch;
  font-size: 15px; line-height: 1.45;
  color: #1c1525b2;
}
/* Hunter 8/31: the shared stylesheet's 4px orange blockquote rule feels
   off-brand here — remove it, and seat the person below their words. */
.quote-bio blockquote { margin: 0; border-left: 0; padding-left: 0; }
.is-words .team-leader_header.is-below {
  margin-top: 1.75rem; padding-top: 1.5rem;
  border-top: 1px solid #1c152526;
  display: flex; align-items: center; gap: 12px;
}
.quote-avatar {
  flex: none; width: 48px; height: 48px; border-radius: 12px;
  background: var(--_theme---background--card, #9378EE);
  color: var(--neutral--ink);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: var(--font-weight--medium);
}
.team-leader_photo.is-quote-photo {
  flex: none; width: 48px; height: 48px; border-radius: 12px; object-fit: cover;
}
/* the alumni tiles sit on ink, so their person row rules in lavender alpha */
.is-quote .quote-person {
  margin-top: auto; padding-top: 1rem;
  border-top: 1px solid #d9d5df26;
  display: flex; align-items: center; gap: 10px;
}
.is-quote .quote-person .quote-avatar,
.is-quote .quote-person .is-quote-photo { width: 40px; height: 40px; font-size: 13px; }
.is-quote .team-alumni_name { font-size: 15px; }
.is-quote .team-alumni_role { font-size: 12.5px; }
.is-below .team-leader_name { font-size: 16px; margin: 0; }
.is-below .team-leader_title { font-size: 13.5px; opacity: .6; }
.team-alumni-item.is-quote { padding: 1.75rem; grid-row-gap: 12px; }
.alumni-quote_text { font-size: 15px; line-height: 1.55; opacity: .92; }


/* ---- How to apply: the lavender band, all type, no plates ---- */
.section_cta.is-apply {
  padding: var(--_layout---spacing--huge) var(--_layout---spacing--xxlarge);
  display: flex; flex-flow: column; gap: 2.5rem;
}
.apply-star {
  color: var(--_theme---background--accent);
  font-size: 12px; margin-right: 8px;
}
/* Hunter 8/31: the two regions in two distinct orange cards. */
.apply-deadlines {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  padding-top: 1rem;
}
.apply-deadline {
  display: flex; flex-flow: column; gap: .5rem;
  padding: 1.75rem;
  border-radius: var(--_sizes---border-radius--large);
  background: var(--_theme---background--accent, #FF6A33);
  color: var(--neutral--ink);
}
.apply-deadline .apply-star { color: var(--neutral--ink); }
.apply-deadline_region { font-size: 15px; font-weight: var(--font-weight--semi-bold); }
.apply-deadline_date {
  font-family: var(--font-family--heading);
  font-size: clamp(1.75rem, 2.7vw, 2.625rem);
  line-height: 1.05;
  letter-spacing: var(--letter-spacing--tighter);
}
.apply-deadline_meta { font-size: 15px; line-height: 1.5; color: #1c1525b2; max-width: 40ch; }
.apply-sub {
  font-size: clamp(1.25rem, 1.6vw, 1.5rem);
  font-weight: var(--font-weight--semi-bold);
  letter-spacing: var(--letter-spacing--tighter);
  margin-bottom: .5rem;
}
/* Hunter 8/31 round 3: the four steps run horizontally on desktop, each a
   ruled column — numeral, then title, then body. */
.apply-steps {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2rem;
}
.apply-step {
  display: flex; flex-flow: column; align-items: flex-start; gap: .85rem;
  padding-top: 1.5rem; border-top: 1px solid #1c152526;
}
/* Hunter 8/31: no bordered chips — solid punchy-purple numerals. */
.apply-step .value-card_num {
  border: none;
  background: var(--_theme---background--card, #9378EE);
  color: var(--neutral--ink);
}
.apply-step .value-card_num::before { content: none; }
.apply-step_title { font-size: 19px; font-weight: var(--font-weight--semi-bold); margin: 0; }
.apply-step_body { margin-top: 6px; font-size: 16px; line-height: 1.55; color: #1c1525d1; max-width: 62ch; }
.apply-lead { margin-top: 1.25rem; font-size: 17px; font-weight: var(--font-weight--semi-bold); }
.apply-note { margin-top: .5rem; font-style: italic; font-size: 14.5px; line-height: 1.6; color: #1c1525b2; max-width: 66ch; }
.apply-qual {
  padding: 1.25rem 0; border-top: 1px solid #1c152526;
  font-size: 18px; line-height: 1.5; max-width: 52rem;
}
.apply-qual i { font-style: italic; color: #1c1525b2; }

/* Hunter 8/31: wider hero measure so the headline never widows, and the
   closing ask runs its full line instead of wrapping at 46rem. */
.page-hero.is-wide .page-hero_inner { max-width: 66rem; }
/* How We Work: the H1 needs a 1060px+ measure to sit on two lines at 82px (Hunter 9/2) */
.page-hero.is-wider .page-hero_inner { max-width: 72rem; }
.portfolio-cta-section.is-join .portfolio-cta-heading { max-width: none; }

/* ---- FAQ: the contact line the doc closes on ---- */
.faq-contact { padding-top: 1rem; font-size: 16px; color: #1c1525b2; }
.faq-contact a {
  color: var(--neutral--ink);
  font-weight: var(--font-weight--semi-bold);
  text-decoration: none;
  border-bottom: 1.5px solid var(--_theme---background--accent);
}

@media (max-width: 991px) {
  .team-leader-card.is-intro { grid-template-columns: 1fr; }
  .words-bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "s1 eq"
      "hq hq"
      "s2 t1"
      "a1 s3"
      "t2 t2";
  }
  .apply-deadlines { grid-template-columns: 1fr; }
  .apply-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .section_cta.is-apply { padding: 4rem 3rem; }
}
@media (max-width: 767px) {
  .words-bento {
    grid-template-columns: 1fr;
    grid-template-areas: "s1" "eq" "hq" "s2" "t1" "a1" "s3" "t2";
    padding-top: 1.5rem;
  }
  .section_cta.is-apply { padding: 3rem 1.5rem; }
  .apply-steps { grid-template-columns: 1fr; gap: 0; }
  .intro-apply { flex-direction: column; align-items: flex-start; }
}

/* ------------------------------------------------------------------ 6.
   How We Work V2 (2026-09-02): the content check.

   Same molecules as V1 (value-card.has-fig, pillar-fig), two additions only:
   .is-flip mirrors a band so the slots alternate sides down the page, and
   .is-placeholder dresses the empty graphic slot as an honest placeholder —
   the ink plate V1's graphics sit on, a dashed inset, and the doc's own
   visual brief inside it, so the reviewer judges the slot's intent.        */

.value-card.has-fig.is-v2 { align-items: center; }
.value-card.is-flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.value-card.is-flip .pillar-fig { order: -1; }

.pillar-fig.is-placeholder {
  display: flex; flex-flow: column; justify-content: center; gap: .5rem;
  padding: 2rem 2.25rem;
  color: var(--_theme---text--primary, #d9d5df);
  outline: 1.5px dashed #d9d5df26;
  outline-offset: -12px;
}
.pf-ph_kicker {
  font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  font-weight: var(--font-weight--medium);
  color: var(--_theme---text--super-muted, #b8b0c4);
}
.pf-ph_title {
  font-family: var(--font-family--heading);
  font-size: clamp(1.375rem, 2vw, 1.875rem);
  line-height: 1.1;
  letter-spacing: var(--letter-spacing--tighter);
}
.pf-ph_brief {
  margin: .5rem 0 0; max-width: 40ch;
  font-size: 14.5px; line-height: 1.5; opacity: .72;
}

@media (max-width: 991px) {
  .value-card.is-flip { grid-template-columns: 1fr; }
  .value-card.is-flip .pillar-fig { order: 0; }
  .pillar-fig.is-placeholder { padding: 1.5rem; }
}

/* ------------------------------------------------------------------ 7.
   How We Work V2, pillar 1: the chart card (Figma node 8097:5520).

   One full-bleed plate on the elevated ground, copy top-left inside it, the
   chart across the whole card in the Figma frame's own 1400x836 coordinates.
   Geometry lives in the SVG viewBox so it scales with the card; the labels
   are HTML positioned in percentages so their type does not shrink with it.

   The resting state below IS the finished chart. The dotted trajectory,
   circle, arrow and label are static; chart_script.py scrubs the rest from
   scroll position (the dot leaves the circle and tracks the dotted line,
   the purple line filling behind it, pills rising as it passes); at the end
   the origin runs the Figma card's idle pulse: swell 0->12->0 on
   cubic-bezier(.445,.05,.55,.95), orange flash fading on
   cubic-bezier(.5,0,.5,1), two per 5s.                                    */

.value-card.is-chart {
  display: block; padding: 0; position: relative; overflow: hidden;
  aspect-ratio: 1400 / 836;
  background: var(--neutral--elevated, #3e344c);
  color: var(--_theme---text--primary, #d9d5df);
}
.is-chart .chart-copy, .is-deck .chart-copy, .is-network .chart-copy {
  position: absolute; z-index: 2;
  left: var(--_layout---spacing--xxlarge, 80px); top: 7.297%; width: 30.14%; min-width: 18rem;  /* Hunter 9/2: match the hero card's inner padding */
  display: flex; flex-flow: column; gap: 1.5rem;
}
.chart-copy h2 { font-size: clamp(1.875rem, 2.95vw, 2.625rem); line-height: 1.15; letter-spacing: -0.03em; margin: 0; }
/* Hunter 9/2 (comment 9jqoigd2): the plate subcopy read heavier than the
   hero's. Same face, weight and size; the difference was 1.3 leading against
   the hero's 1.5, so it takes the hero's 1.5. The homepage's 60% lavender was
   tried and was "way too hard to read" (qgf4r9lg): full lavender, 7.9:1. */
.chart-copy .value-card_body { font-size: 18px; line-height: 1.5; padding-top: 0; max-width: none; color: var(--_theme---text--primary, #d9d5df); }
.chart-copy p { margin: 0; }
.chart { position: absolute; inset: 0; }
.chart_svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }

/* geometry, at rest = complete */
/* no vector-effect here: Chromium computes non-scaling-stroke dashes in screen
   space, so the drawn tip ran at 1/scale ahead of the dot (Hunter's 9/2 note) */
.chart_curve {
  fill: none; stroke: var(--brand--purple, #9378ee); stroke-width: 2;
  stroke-dasharray: 1; stroke-dashoffset: 0;
}
.chart_arc {
  fill: none; stroke: var(--_theme---text--primary, #d9d5df); stroke-width: 1.5;
  stroke-dasharray: 1.5 6; stroke-linecap: round; opacity: .55;
}
.chart_origin {
  fill: none; stroke: var(--_theme---text--primary, #d9d5df); stroke-width: 2;
  stroke-dasharray: 2.6 6.1; stroke-linecap: round; opacity: .55;
}
.chart_end { fill: var(--brand--purple, #9378ee); }
.chart_ring { fill: none; stroke: var(--brand--purple, #9378ee); stroke-width: 0; opacity: .7; transform-box: fill-box; transform-origin: center; }
.chart_flash { fill: var(--_theme---background--accent, #ff6a33); opacity: 0; }
.chart_arrow path {
  fill: none; stroke: var(--_theme---background--accent, #ff6a33); stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0;
}

/* labels: pills knock the curve out where they sit, like the Figma frames */
.chart_label {
  position: absolute; z-index: 1;
  padding: 8px 16px; border-radius: 999px;
  background: var(--neutral--elevated, #3e344c);
  font-size: 14px; line-height: 1.1; letter-spacing: .02em;
  text-transform: uppercase; font-weight: var(--font-weight--medium);
  color: var(--_theme---text--primary, #d9d5df);
  white-space: nowrap;
  transition: opacity .35s ease, transform .55s cubic-bezier(.22, 1, .36, 1);
}
.chart_invest {
  position: absolute; z-index: 1; transform: translateY(-50%);
  font-size: 18px; line-height: 1.3; font-weight: var(--font-weight--medium);
  color: var(--_theme---background--accent, #ff6a33);
  white-space: nowrap; transition: opacity .5s ease;
}

/* driven by scroll: the dotted line and the circle are the static base view;
   the arrow draws on, its label fades in behind it, the pills wait their turn */
.chart.is-driven .chart_label:not(.is-on) { opacity: 0; transform: translateY(8px); }
.chart.is-driven:not(.is-invest) .chart_invest { opacity: 0; }

/* idle pulse once the dot has arrived, 2.5s per pulse, from the Figma keyframes */
.chart.is-live .chart_ring { animation: hwwRing 2.5s cubic-bezier(.445, .05, .55, .95) infinite; }
.chart.is-live .chart_flash { animation: hwwFlash 2.5s linear infinite; }
@keyframes hwwRing {
  0%     { stroke-width: 0;    transform: scale(1); }
  31.2%  { stroke-width: 12px; transform: scale(1.3); }
  62.5%, 100% { stroke-width: 0; transform: scale(1.65); }
}
@keyframes hwwFlash {
  0%, 31%  { opacity: 0; }
  31.2%    { opacity: 1; animation-timing-function: cubic-bezier(.5, 0, .5, 1); }
  71.2%, 100% { opacity: 0; }
}

@media (max-width: 991px) {
  .value-card.is-chart { aspect-ratio: auto; }
  .is-chart .chart-copy { position: static; width: auto; min-width: 0; max-width: 34em; padding: 2rem var(--_layout---spacing--xxlarge, 2rem) 1rem; }
  .chart { position: relative; aspect-ratio: 1400 / 836; }
}
@media (max-width: 767px) {
  .is-chart .chart-copy { padding: 1.5rem var(--_layout---spacing--xxlarge, 1.5rem) .5rem; }
  .chart_label { font-size: 10px; padding: 5px 9px; }
  .chart_invest { font-size: 12px; }
}

/* ------------------------------------------------------------------ 8.
   How We Work V2, pillar 2: the deck (Figma node 8097:4489).

   Same plate as pillar 1 (copy top-left, 1400x717 frame). Seven cards,
   249x346 in the frame, each with its own tilt, dealt so the last lands on
   top. Sizes are container-query units of the plate so the cards scale
   with it and the type scales with the cards. The CSS resting state is the
   finished pile; deck_script.py drives the deal from scroll position.       */

.value-card.is-deck {
  display: block; padding: 0; position: relative; overflow: hidden;
  aspect-ratio: 1400 / 717;
  background: var(--neutral--elevated, #3e344c);
  color: var(--_theme---text--primary, #d9d5df);
}
.is-deck .chart-copy { top: 8.508%; }
.deck { position: absolute; inset: 0; container-type: inline-size; }
.deck_card {
  position: absolute; left: var(--x); top: var(--y);
  width: 17.786%; aspect-ratio: 249 / 346;
  transform: translate(-50%, -50%) rotate(var(--r));
  padding: clamp(10px, 1.407cqw, 20px); box-sizing: border-box;  /* 19.7px of a 1400 frame */
  border-radius: clamp(8px, 1.057cqw, 15px);
  background: var(--brand--purple, #9378ee);
  border: 1.2px solid color-mix(in srgb, var(--brand--purple, #9378ee), var(--_theme---text--primary, #d9d5df) 30%);
  box-shadow: 3.7px 8.6px 0 rgba(0, 0, 0, .35);
  color: #fff;
  font-family: var(--font-family--heading);
  font-weight: var(--font-weight--medium);
  font-size: clamp(11px, 1.571cqw, 22px);
  line-height: 1.3;
  will-change: transform;
}
.deck.is-driven .deck_card { backface-visibility: hidden; }

@media (max-width: 991px) {
  .value-card.is-deck { aspect-ratio: auto; }
  .is-deck .chart-copy { position: static; width: auto; min-width: 0; max-width: 34em; padding: 2rem var(--_layout---spacing--xxlarge, 2rem) 1rem; }
  .deck { position: relative; aspect-ratio: 1 / 1; }
  .deck_card {
    left: var(--mx); top: var(--my);
    width: 31.39%;
    padding: clamp(10px, 2.48cqw, 20px);
    border-radius: clamp(8px, 1.87cqw, 15px);
    font-size: clamp(11px, 2.77cqw, 22px);
  }
}
@media (max-width: 767px) {
  .is-deck .chart-copy { padding: 1.5rem var(--_layout---spacing--xxlarge, 1.5rem) .5rem; }
}

/* ------------------------------------------------------------------ 9.
   How We Work V2, pillar 3: the homepage network mechanic, four pills.

   The shared stylesheet carries network-avatars and the hidden network-source;
   the flying-avatar rules below are the homepage's
   own inline styles, with px/vw sizes turned into container units of the
   plate so the whole thing scales inside a card instead of a section. The
   one new molecule is .net-pill: four of them stacked where the homepage has
   its single count card, each popping when its number ticks.             */

.value-card.is-network {
  display: block; padding: 0; position: relative; overflow: hidden;
  aspect-ratio: 1400 / 836;
  background: var(--neutral--elevated, #3e344c);
  color: var(--_theme---text--primary, #d9d5df);
  container-type: inline-size;
}
.is-network .chart-copy { top: 7.297%; }
.net-portal { position: absolute; inset: 0; pointer-events: none; }

/* the stack sits where the homepage card sits, pushed right of the copy.
   Four nodes butted into one column (gap 0),
   each its own colour, ink type on all four. Hunter 9/2 (comment t382ugzf):
   number left, label right, padding equal on every side. */
.net-stack {
  position: absolute; z-index: 3;
  left: 64%; top: 56%; transform: translate(-50%, -50%);
  width: clamp(230px, 24cqw, 340px);
  display: flex; flex-flow: column; gap: 0;  /* Hunter 9/2 (xmcnoe7u): no space between the nodes */
  filter: drop-shadow(0 30px 60px #00000073);
}
.net-pill {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1em;
  padding: clamp(14px, 1.4cqw, 20px);
  border-radius: clamp(14px, 1.3cqw, 18px);
  color: var(--neutral--ink, #1c1525);
  font-size: clamp(12px, 1.15cqw, 16px);
  font-weight: var(--font-weight--medium);
  letter-spacing: var(--letter-spacing--tighter);
  font-variant-numeric: tabular-nums;
}
.net-pill.is-c1 { background: var(--brand--purple, #9378ee); }
.net-pill.is-c2 { background: var(--_theme---background--accent, #ff6a33); }
.net-pill.is-c3 { background: var(--_theme---background--light, #d9d5df); }
.net-pill.is-c4 { background: var(--_theme---background--secondary, #b8b0c4); }
.net-pill_num { font-size: 1.6em; line-height: 1; font-weight: var(--font-weight--semi-bold); text-align: left; }
.net-pill_label { text-align: right; line-height: 1.15; }
.net-pill.is-tick { animation: hwwTick .45s cubic-bezier(.34, 1.56, .64, 1); position: relative; z-index: 1; }
/* the tick pop at a fifth of its old size (xmcnoe7u): 1.05 -> 1.01 */
@keyframes hwwTick { 0% { transform: scale(1); } 35% { transform: scale(1.01); } 100% { transform: scale(1); } }

/* avatar layer + flying avatars, from the homepage */
.network-avatars.is-hww {
  --edge-fade: clamp(60px, 9cqw, 130px);
  -webkit-mask-image: linear-gradient(to right, transparent, black var(--edge-fade), black calc(100% - var(--edge-fade)), transparent),
                      linear-gradient(to top, transparent, black var(--edge-fade));
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, black var(--edge-fade), black calc(100% - var(--edge-fade)), transparent),
              linear-gradient(to top, transparent, black var(--edge-fade));
  mask-composite: intersect;
}
.network-avatar {
  position: absolute; left: 0; top: 0;
  width: clamp(88px, 11cqw, 160px);
  display: flex; flex-direction: column; gap: 6px;
  will-change: transform, opacity;
}
.network-avatar_photo {
  width: 100%; aspect-ratio: 3 / 4;
  object-fit: cover; object-position: top;
  border-radius: 12px;
  background: var(--_theme---background--elevated, #3e344c);
  display: block;
}
.network-avatar_line { margin: 0; font-size: clamp(12px, 1.4cqw, 20px); line-height: 1.3; letter-spacing: -0.01em; }
.network-avatar_who { display: block; font-weight: var(--font-weight--semi-bold); color: var(--_theme---text--primary, #d9d5df); }
.network-avatar_do  { display: block; font-weight: 400; color: #a892f2; }

@media (max-width: 991px) {
  .value-card.is-network { aspect-ratio: auto; }
  .is-network .chart-copy { position: static; width: auto; min-width: 0; max-width: 34em; padding: 2rem var(--_layout---spacing--xxlarge, 2rem) 1rem; }
  .net-portal { position: relative; aspect-ratio: 1 / 1; }
  .net-stack { left: 50%; top: 52%; width: clamp(210px, 54cqw, 300px); }
  .network-avatar { width: clamp(80px, 22cqw, 120px); }
  .network-avatar_line { font-size: 12px; }
}