:root {
  --bg: #0a0a0a;
  --bg-deep: #050505;
  --bg-soft: #101010;
  --panel: rgba(255, 255, 255, 0.035);
  --panel-strong: rgba(255, 255, 255, 0.055);
  --text: #f5f1e8;
  --text-muted: rgba(245, 241, 232, 0.72);
  --text-dim: rgba(245, 241, 232, 0.55);
  --gold-deep: #8c6a2f;
  --gold: #c9a24a;
  --gold-light: #f2d27a;
  --gold-gradient: linear-gradient(90deg, #8c6a2f 0%, #c9a24a 24%, #f2d27a 50%, #c9a24a 76%, #8c6a2f 100%);
  --line: rgba(201, 162, 74, 0.18);
  --line-strong: rgba(201, 162, 74, 0.42);
  --shadow: 0 24px 78px rgba(0, 0, 0, 0.42);
  --header-height: 104px;
  --max-width: 1280px;
  --font-title: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-subtitle: Georgia, "Times New Roman", serif;
  --font-body: Aptos, "Segoe UI", Arial, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: var(--header-height); }
body {
  min-height: 100vh;
  padding-top: var(--header-height);
  overflow-x: hidden;
  background:
    radial-gradient(circle at 12% 0%, rgba(201, 162, 74, 0.075), transparent 34rem),
    radial-gradient(circle at 88% 10%, rgba(242, 210, 122, 0.045), transparent 32rem),
    var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.65;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    linear-gradient(rgba(201, 162, 74, 0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201, 162, 74, 0.028) 1px, transparent 1px);
  background-size: 96px 96px;
  opacity: 0.22;
  mask-image: radial-gradient(circle at 72% 18%, #000 0, #000 24rem, transparent 54rem);
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
::selection { background: rgba(201, 162, 74, 0.38); color: #fff; }

/* Header */
.site-header { position: fixed; inset: 0 0 auto 0; z-index: 9999; }
.nav-container {
  height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 1rem clamp(1.25rem, 4vw, 4.5rem);
  background: rgba(10, 10, 10, 0.9);
  border-bottom: 1px solid rgba(201, 162, 74, 0.14);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: height 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}
.nav-container.is-scrolled { height: 84px; background: rgba(10, 10, 10, 0.96); box-shadow: 0 12px 35px rgba(0, 0, 0, 0.38); }
.logo-link { display: inline-flex; align-items: center; flex: 0 0 auto; position: relative; z-index: 10002; }
.site-logo { width: auto; height: 72px; object-fit: contain; transition: height 0.3s ease; }
.nav-container.is-scrolled .site-logo { height: 58px; }
.nav-links { display: flex; align-items: center; justify-content: flex-end; gap: clamp(0.9rem, 1.7vw, 1.75rem); }
.nav-links a { color: rgba(245, 241, 232, 0.84); font-size: 0.92rem; letter-spacing: 0.045em; white-space: nowrap; transition: color 0.25s ease, transform 0.25s ease; }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--gold-light); transform: translateY(-1px); }
.nav-button { padding: 0.78rem 1.12rem; border: 1px solid transparent; border-radius: 999px; color: #0f0f12 !important; background: var(--gold-gradient); font-family: var(--font-subtitle); font-weight: 600; letter-spacing: 0.06em; box-shadow: 0 12px 30px rgba(201, 169, 110, 0.24); }
.nav-toggle { display: none; }
.hamburger { display: none; width: 34px; height: 24px; flex-direction: column; justify-content: space-between; position: relative; z-index: 10002; cursor: pointer; }
.hamburger span { display: block; width: 100%; height: 3px; border-radius: 999px; background: var(--gold); transition: transform 0.3s ease, opacity 0.3s ease; }

/* Shared typography and controls */
.section-inner { width: min(100% - 2.5rem, var(--max-width)); margin: 0 auto; position: relative; z-index: 2; }
.section-block { padding: clamp(5.5rem, 9vw, 8.5rem) 0; position: relative; border-bottom: 1px solid rgba(201, 162, 74, 0.12); }
.eyebrow, .module-label {
  display: inline-block;
  color: transparent;
  background: var(--gold-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 0.72rem;
  line-height: 1.2;
  font-weight: 800;
}
h1, h2, h3 { font-family: var(--font-title); color: var(--text); font-weight: 700; text-wrap: balance; }
h1 { font-size: clamp(4.2rem, 6.6vw, 7.4rem); line-height: 0.96; letter-spacing: -0.055em; }
h2 { font-size: clamp(3rem, 4.8vw, 5.7rem); line-height: 1.01; letter-spacing: -0.045em; }
h3 { font-size: clamp(1.75rem, 2.35vw, 2.55rem); line-height: 1.06; letter-spacing: -0.025em; }
.section-heading { max-width: 880px; }
.section-heading h2 { margin-top: 0.8rem; }
.section-copy { max-width: 720px; margin-top: 1.5rem; color: var(--text-muted); font-size: clamp(1rem, 1.25vw, 1.13rem); line-height: 1.78; }
.section-copy p + p { margin-top: 1rem; }
.button { min-height: 58px; display: inline-flex; align-items: center; justify-content: center; padding: 1rem 1.6rem; border-radius: 999px; font-family: var(--font-subtitle); font-size: clamp(1rem, 1.2vw, 1.12rem); font-weight: 600; letter-spacing: 0.06em; text-align: center; transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; }
.button:hover { transform: translateY(-3px); }
.button-primary { color: #0f0f12; background: var(--gold-gradient); border: 1px solid transparent; box-shadow: 0 12px 30px rgba(201, 169, 110, 0.24); }
.button-secondary { color: var(--text); border: 1px solid rgba(201, 162, 74, 0.56); background: rgba(201, 162, 74, 0.04); }

/* Hero */
.about-hero {
  --parallax-y: 0px;
  min-height: min(820px, calc(100vh - var(--header-height)));
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  padding: clamp(3.25rem, 5vw, 5.25rem) 0;
  border-bottom: 1px solid rgba(201, 162, 74, 0.16);
  background:
    radial-gradient(circle at 73% 36%, rgba(201, 162, 74, 0.13), transparent 31rem),
    linear-gradient(180deg, rgba(255,255,255,0.012), transparent 56%);
}
.about-hero::before {
  content: "";
  position: absolute;
  inset: -8% 0;
  transform: translate3d(0, var(--parallax-y), 0) scale(1.05);
  background:
    radial-gradient(circle at 68% 50%, transparent 0 11rem, rgba(201, 162, 74, 0.1) 11.1rem 11.2rem, transparent 11.3rem 18rem, rgba(201, 162, 74, 0.055) 18.1rem 18.2rem, transparent 18.3rem),
    linear-gradient(90deg, rgba(5,5,5,0.82), transparent 55%, rgba(5,5,5,0.2));
  pointer-events: none;
}
.hero-grid { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(480px, 0.82fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: center; }
.hero-copy { position: relative; z-index: 4; }
.hero-copy h1 { max-width: 820px; margin-top: 1rem; text-shadow: 0 18px 52px rgba(0, 0, 0, 0.58); }
.hero-copy h1 em { display: block; color: var(--gold-light); font-style: italic; font-weight: 400; }
.hero-summary { max-width: 700px; margin-top: 1.65rem; color: rgba(245, 241, 232, 0.79); font-size: clamp(1.02rem, 1.28vw, 1.17rem); line-height: 1.72; }
.hero-summary p + p { margin-top: 0.9rem; }
.hero-portraits { min-height: 580px; position: relative; isolation: isolate; }
.hero-portrait { --float-y: 0px; position: absolute; overflow: hidden; border: 1px solid rgba(201, 162, 74, 0.26); background: #0b0b0b; box-shadow: var(--shadow); transform: translate3d(0, var(--float-y), 0); will-change: transform; }
.hero-portrait img { width: 100%; height: 100%; object-fit: cover; filter: contrast(1.02) brightness(0.86); transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1), filter 0.45s ease; }
.hero-portrait:hover img { transform: scale(1.025); filter: contrast(1.04) brightness(0.93); }
.hero-portrait figcaption { position: absolute; inset: auto 1rem 1rem auto; padding: 0.42rem 0.72rem; border: 1px solid rgba(201, 162, 74, 0.34); border-radius: 999px; background: rgba(5,5,5,0.72); color: var(--gold-light); font-family: var(--font-subtitle); font-size: 0.9rem; letter-spacing: 0.05em; backdrop-filter: blur(8px); }
.hero-portrait-primary { width: min(72%, 450px); aspect-ratio: 1 / 1.08; top: 0; right: 0; border-radius: 30px 30px 6px 30px; z-index: 2; }
.hero-portrait-secondary { width: min(52%, 325px); aspect-ratio: 1 / 1.08; left: 0; bottom: 0; border-radius: 6px 28px 28px 28px; z-index: 3; }
.hero-orbit { position: absolute; border: 1px solid rgba(201, 162, 74, 0.22); border-radius: 50%; pointer-events: none; }
.hero-orbit-one { width: 430px; height: 430px; right: -6%; top: 14%; }
.hero-orbit-two { width: 310px; height: 310px; left: 3%; bottom: 3%; opacity: 0.52; }
.hero-index { position: absolute; right: clamp(1.25rem, 3vw, 3rem); bottom: 1.4rem; color: rgba(201,162,74,0.45); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.28em; text-transform: uppercase; }

/* Made for this moment */
.moment-section {
  background:
    radial-gradient(circle at 82% 18%, rgba(201, 162, 74, 0.055), transparent 26rem),
    linear-gradient(180deg, rgba(255,255,255,0.012), transparent);
}
.moment-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(3rem, 7vw, 7rem);
  align-items: start;
}
.moment-copy { max-width: 760px; }
.question-ledger { padding-top: 0.4rem; }
.question-ledger .module-label { margin-bottom: 1.4rem; }
.question-ledger ol { list-style: none; border-top: 1px solid rgba(201, 162, 74, 0.24); }
.question-ledger li {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: 1.2rem;
  align-items: center;
  padding: 1.28rem 0;
  border-bottom: 1px solid rgba(201, 162, 74, 0.15);
}
.question-ledger li span { color: var(--gold); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.12em; }
.question-ledger li strong { font-family: var(--font-subtitle); font-size: clamp(1.06rem, 1.3vw, 1.22rem); line-height: 1.42; font-weight: 600; }
.moment-conclusion {
  margin-top: clamp(3.6rem, 6vw, 5.6rem);
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
  padding: clamp(2rem, 3.5vw, 3rem);
  border: 1px solid rgba(201, 162, 74, 0.24);
  border-radius: 20px;
  background:
    radial-gradient(circle at 100% 0%, rgba(201, 162, 74, 0.1), transparent 24rem),
    rgba(255,255,255,0.022);
}
.moment-conclusion > p:first-child { font-family: var(--font-title); font-size: clamp(2.25rem, 3.5vw, 4rem); line-height: 1.02; font-weight: 700; letter-spacing: -0.038em; }
.moment-conclusion > p:last-child { color: var(--gold-light); font-family: var(--font-subtitle); font-size: clamp(1.18rem, 1.7vw, 1.5rem); line-height: 1.55; font-style: italic; }

/* Los Angeles complexity */
.la-section {
  --parallax-y: 0px;
  overflow: hidden;
  background: #070707;
}
.la-section::before {
  content: "";
  position: absolute;
  inset: -12% 0;
  transform: translate3d(0, var(--parallax-y), 0);
  background:
    radial-gradient(circle at 82% 38%, rgba(201,162,74,0.11), transparent 30rem),
    radial-gradient(circle at 18% 72%, rgba(201,162,74,0.045), transparent 24rem);
  pointer-events: none;
}
.la-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(560px, 1.22fr);
  gap: clamp(3rem, 6vw, 6rem);
  align-items: center;
}
.la-intelligence-visual {
  min-height: 520px;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(201, 162, 74, 0.24);
  border-radius: 24px;
  background:
    linear-gradient(90deg, rgba(5,5,5,0.84), rgba(5,5,5,0.14) 34%, rgba(5,5,5,0.22) 72%, rgba(5,5,5,0.7)),
    linear-gradient(180deg, rgba(5,5,5,0.2), rgba(5,5,5,0.76)),
    url("/assets/golden_city_grid_at_night.png") center / cover no-repeat,
    #080706;
  box-shadow: 0 28px 86px rgba(0,0,0,0.4);
  isolation: isolate;
}
.la-visual-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(rgba(242,210,122,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(242,210,122,0.055) 1px, transparent 1px),
    radial-gradient(circle at 62% 48%, rgba(242,210,122,0.13), transparent 24rem);
  background-size: 74px 74px, 74px 74px, auto;
  opacity: 0.45;
  mask-image: radial-gradient(circle at 62% 48%, #000 0, #000 18rem, transparent 34rem);
}
.la-visual-title {
  position: absolute;
  left: 1.4rem;
  top: 1.35rem;
  z-index: 5;
  color: rgba(245,241,232,0.88);
  font-family: var(--font-title);
  font-size: clamp(1.55rem, 2.2vw, 2.4rem);
  line-height: 1;
  font-weight: 700;
}
.la-node {
  position: absolute;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 0.58rem;
  padding: 0.62rem 0.82rem;
  border: 1px solid rgba(201,162,74,0.38);
  border-radius: 999px;
  background: rgba(5,5,5,0.78);
  color: var(--gold-light);
  font-family: var(--font-subtitle);
  font-size: 0.9rem;
  line-height: 1;
  white-space: nowrap;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.la-node i {
  width: 0.52rem;
  height: 0.52rem;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #fff0b1;
  box-shadow: 0 0 0 0.34rem rgba(242,210,122,0.09), 0 0 18px rgba(242,210,122,0.58);
}
.la-node-one { left: 10%; top: 29%; }
.la-node-two { right: 8%; top: 22%; }
.la-node-three { left: 18%; bottom: 17%; }
.la-node-four { right: 9%; bottom: 25%; }
.la-route {
  position: absolute;
  z-index: 3;
  height: 1px;
  transform-origin: left center;
  overflow: hidden;
  background: linear-gradient(90deg, rgba(201,162,74,0.12), rgba(242,210,122,0.72), rgba(201,162,74,0.12));
}
.la-route::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 -25%;
  width: 24%;
  background: linear-gradient(90deg, transparent, rgba(255,245,199,0.95), transparent);
  animation: laRouteShine 4.8s ease-in-out infinite;
}
.la-route-one { width: 48%; left: 25%; top: 38%; transform: rotate(-9deg); }
.la-route-two { width: 42%; left: 29%; top: 58%; transform: rotate(12deg); }
.la-route-three { width: 33%; left: 48%; top: 47%; transform: rotate(77deg); }
@keyframes laRouteShine { 0%, 18% { transform: translateX(0); opacity: 0; } 32% { opacity: 1; } 70%, 100% { transform: translateX(520%); opacity: 0; } }

/* Executive outcomes and institutional influence */
.institution-section { --parallax-y: 0px; overflow: hidden; background: #070707; }
.institution-section::before { content: ""; position: absolute; inset: -12% 0; transform: translate3d(0, var(--parallax-y), 0); background: radial-gradient(circle at 84% 28%, rgba(201,162,74,0.09), transparent 28rem); pointer-events: none; }
.institution-layout { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: clamp(3rem, 7vw, 7rem); align-items: center; }
.outcome-strip { display: flex; flex-wrap: wrap; gap: 0.65rem; margin-top: 1.7rem; }
.outcome-strip span { padding: 0.66rem 0.82rem; border: 1px solid rgba(201,162,74,0.25); border-radius: 999px; color: rgba(245,241,232,0.84); background: rgba(201,162,74,0.035); font-family: var(--font-subtitle); font-size: 0.94rem; }
.influence-panel { padding: clamp(1.6rem, 3vw, 2.5rem); border: 1px solid rgba(201, 162, 74, 0.22); border-radius: 22px; background: radial-gradient(circle at 100% 0%, rgba(201,162,74,0.11), transparent 20rem), rgba(255,255,255,0.025); box-shadow: 0 24px 70px rgba(0,0,0,0.25); }
.influence-panel .module-label { margin-bottom: 1.5rem; }
.influence-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border-top: 1px solid rgba(201, 162, 74, 0.18); }
.influence-grid span { padding: 1rem 0.75rem 1rem 0; border-bottom: 1px solid rgba(201, 162, 74, 0.13); color: rgba(245, 241, 232, 0.86); font-family: var(--font-subtitle); font-size: 1.02rem; }
.influence-grid span:nth-child(even) { padding-left: 1rem; border-left: 1px solid rgba(201, 162, 74, 0.13); }

/* How we fit with internal teams */
.team-fit-section { background: linear-gradient(180deg, rgba(255,255,255,0.012), transparent); }
.team-fit-layout { display: grid; grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr); gap: clamp(3rem, 7vw, 7rem); align-items: start; }
.team-fit-comparison { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid rgba(201,162,74,0.22); border-radius: 22px; overflow: hidden; background: rgba(255,255,255,0.02); }
.team-fit-comparison article { padding: clamp(1.6rem, 2.7vw, 2.3rem); }
.team-fit-comparison article + article { border-left: 1px solid rgba(201,162,74,0.18); background: radial-gradient(circle at 100% 0%, rgba(201,162,74,0.08), transparent 18rem); }
.team-fit-comparison ul { list-style: none; margin-top: 1.35rem; border-top: 1px solid rgba(201,162,74,0.18); }
.team-fit-comparison li { position: relative; padding: 1rem 0 1rem 1.25rem; border-bottom: 1px solid rgba(201,162,74,0.12); color: var(--text-muted); font-size: 0.98rem; line-height: 1.58; }
.team-fit-comparison li::before { content: ""; position: absolute; left: 0; top: 1.48rem; width: 0.42rem; height: 0.42rem; border-radius: 50%; background: var(--gold); box-shadow: 0 0 12px rgba(201,162,74,0.42); }

/* Philosophy */
.philosophy-heading { max-width: 980px; margin-bottom: clamp(3.2rem, 6vw, 5rem); }
.principle-list { border-top: 1px solid rgba(201, 162, 74, 0.24); }
.principle { display: grid; grid-template-columns: 4rem minmax(260px, 0.72fr) minmax(0, 1fr); gap: clamp(1.4rem, 3.5vw, 4rem); align-items: start; padding: clamp(1.8rem, 3vw, 2.7rem) 0; border-bottom: 1px solid rgba(201, 162, 74, 0.14); }
.principle-number { color: var(--gold); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.12em; padding-top: 0.45rem; }
.principle h3 { font-size: clamp(1.75rem, 2.45vw, 2.75rem); }
.principle p { max-width: 690px; color: var(--text-muted); font-size: clamp(1rem, 1.18vw, 1.1rem); line-height: 1.72; }

/* Founders */
.founders-section { background: linear-gradient(180deg, #070707, #0a0a0a); }
.founders-intro { max-width: none; margin-bottom: clamp(3rem, 6vw, 5rem); }
.founders-intro h2 { margin-top: 0.8rem; }
.founders-intro > p:not(.eyebrow) { max-width: 1120px; margin-top: 1.4rem; color: var(--text-muted); font-size: clamp(1.05rem, 1.35vw, 1.22rem); line-height: 1.72; }
.founder-requirements { margin-top: 2rem; padding: 1.5rem 0 0; border-top: 1px solid rgba(201, 162, 74, 0.24); }
.founder-requirements > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.4rem, 2.8vw, 2.5rem); margin-top: 1rem; }
.founder-requirements span { display: block; padding: 0.85rem 0 0.85rem 1rem; border-left: 2px solid rgba(201, 162, 74, 0.6); color: rgba(245, 241, 232, 0.88); font-family: var(--font-subtitle); font-size: clamp(1rem, 1.15vw, 1.08rem); line-height: 1.5; }
.founder-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.4rem, 2.8vw, 2.5rem); }
.founder-card { overflow: hidden; border: 1px solid rgba(201, 162, 74, 0.2); border-radius: 22px; background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.015)); transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease; }
.founder-card:hover { transform: translateY(-5px); border-color: rgba(201, 162, 74, 0.45); box-shadow: 0 30px 78px rgba(0,0,0,0.32); }
.founder-photo-wrap { aspect-ratio: 1.38 / 1; overflow: hidden; background: #0b0b0b; border-bottom: 1px solid rgba(201, 162, 74, 0.18); }
.founder-photo-wrap img { width: 100%; height: 100%; object-fit: cover; object-position: center 31%; filter: brightness(0.9) contrast(1.03); transition: transform 0.6s ease; }
.founder-card:hover .founder-photo-wrap img { transform: scale(1.02); }
.founder-content { padding: clamp(1.6rem, 3vw, 2.5rem); }
.founder-name { color: var(--gold-light); font-family: var(--font-title); font-size: clamp(2.3rem, 3.3vw, 3.7rem); line-height: 1; font-weight: 700; }
.founder-content h3 { margin-top: 0.65rem; font-size: clamp(1.55rem, 2vw, 2.15rem); }
.founder-role { margin-top: 0.3rem; color: var(--gold-light); font-family: var(--font-subtitle); font-size: 1.04rem; font-style: italic; }
.founder-content > p:not(.founder-name):not(.founder-role) { margin-top: 1.1rem; color: var(--text-muted); font-size: clamp(0.98rem, 1.08vw, 1.06rem); line-height: 1.72; }
.together-equation { margin-top: clamp(2.4rem, 4vw, 3.8rem); display: grid; grid-template-columns: minmax(0, 0.9fr) auto minmax(0, 0.9fr) auto minmax(280px, 1.25fr); gap: clamp(1rem, 2vw, 2rem); align-items: center; padding: clamp(1.8rem, 3vw, 2.6rem) 0; border-top: 1px solid rgba(201,162,74,0.28); border-bottom: 1px solid rgba(201,162,74,0.2); }
.equation-person { min-height: 118px; padding-left: 1rem; border-left: 2px solid rgba(201,162,74,0.52); }
.equation-person strong { display: block; color: var(--gold-light); font-family: var(--font-title); font-size: clamp(1.9rem, 2.5vw, 2.8rem); line-height: 1; }
.equation-person span { display: block; margin-top: 0.7rem; color: var(--text-muted); font-size: 0.97rem; line-height: 1.58; }
.equation-symbol { color: rgba(201,162,74,0.6); font-family: var(--font-title); font-size: clamp(2.3rem, 3.8vw, 4rem); font-weight: 400; }
.together-equation blockquote { color: var(--text); font-family: var(--font-title); font-size: clamp(2rem, 3.15vw, 3.65rem); line-height: 1.02; font-style: italic; letter-spacing: -0.03em; }
.background-section { margin-top: clamp(4rem, 7vw, 6rem); padding-top: clamp(2.4rem, 4vw, 3.4rem); border-top: 1px solid rgba(201, 162, 74, 0.22); }
.background-heading { max-width: 900px; margin-bottom: clamp(2.2rem, 4vw, 3.2rem); }
.background-heading h2 { margin-top: 0.8rem; }
.background-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.background-item { padding: 1.5rem; border-left: 2px solid rgba(201, 162, 74, 0.48); background: rgba(255,255,255,0.02); }
.background-item p:last-child { margin-top: 0.9rem; color: var(--text-muted); font-size: 1rem; line-height: 1.7; }

/* Difference */
.difference-section { --parallax-y: 0px; overflow: hidden; }
.difference-section::before { content: ""; position: absolute; inset: -10% 0; transform: translate3d(0, var(--parallax-y), 0); background: radial-gradient(circle at 28% 50%, rgba(201,162,74,0.075), transparent 30rem); pointer-events: none; }
.difference-section .section-heading { max-width: 900px; margin-bottom: clamp(3rem, 5vw, 4.4rem); }
.difference-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid rgba(201, 162, 74, 0.24); border-bottom: 1px solid rgba(201, 162, 74, 0.18); }
.difference-card { min-height: 360px; padding: 1.5rem 1.2rem; border-right: 1px solid rgba(201, 162, 74, 0.14); background: linear-gradient(180deg, rgba(255,255,255,0.025), transparent); transition: background 0.3s ease, transform 0.3s ease; }
.difference-card:last-child { border-right: 0; }
.difference-card:hover { background: rgba(201, 162, 74, 0.045); transform: translateY(-4px); }
.difference-card > span { color: var(--gold); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.12em; }
.difference-card h3 { margin-top: 2.5rem; font-size: clamp(1.48rem, 1.72vw, 1.9rem); }
.difference-card p { margin-top: 1rem; color: var(--text-muted); font-size: 0.94rem; line-height: 1.68; }

/* CTA */
.about-cta { border-bottom: 0; }
.cta-panel { min-height: 390px; display: grid; place-items: center; text-align: center; padding: clamp(2.2rem, 5vw, 4.8rem); border: 1px solid rgba(201, 162, 74, 0.25); border-radius: 22px; background: radial-gradient(circle at 50% 0%, rgba(201, 162, 74, 0.12), transparent 28rem), linear-gradient(180deg, rgba(255,255,255,0.028), rgba(255,255,255,0.012)); box-shadow: 0 28px 90px rgba(0,0,0,0.38); }
.cta-panel h2 { max-width: 930px; margin-top: 0.8rem; font-size: clamp(2.8rem, 4.6vw, 5.4rem); }
.cta-panel > p:not(.eyebrow) { max-width: 780px; margin-top: 1rem; color: var(--text-muted); font-size: clamp(1.08rem, 1.45vw, 1.3rem); }
.cta-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.85rem; margin-top: 1.8rem; }

/* Footer */
.site-footer { padding: clamp(3rem, 6vw, 5rem) clamp(1.25rem, 6vw, 6rem) 2rem; background: radial-gradient(circle at 70% 0%, rgba(201, 162, 74, 0.08), transparent 28rem), #050505; border-top: 1px solid rgba(201, 162, 74, 0.14); }
.footer-inner { width: min(100%, var(--max-width)); margin: 0 auto; display: grid; grid-template-columns: 1.2fr 1fr 1fr 0.8fr; gap: 2rem; }
.footer-brand h2 { color: var(--gold-light); font-family: var(--font-title); font-size: 2.25rem; line-height: 1; margin-bottom: 0.7rem; }
.footer-brand p, .footer-contact, .footer-legal { color: var(--text-dim); }
.footer-links, .footer-socials { display: grid; gap: 0.7rem; align-content: start; }
.footer-links a, .footer-socials a, .footer-contact a { color: rgba(245, 241, 232, 0.78); transition: color 0.25s ease; }
.footer-links a:hover, .footer-socials a:hover, .footer-contact a:hover { color: var(--gold-light); }
.footer-contact address { margin-top: 0.8rem; font-style: normal; line-height: 1.6; }
.footer-legal { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0.8rem 1.5rem; padding-top: 2rem; margin-top: 1rem; border-top: 1px solid rgba(201, 162, 74, 0.1); font-size: 0.9rem; }

/* Motion */
.parallax-section { --parallax-y: 0px; transform-style: preserve-3d; }
.parallax-float { --float-y: 0px; }
.js .reveal { opacity: 0; transform: translate3d(0, 26px, 0); transition: opacity 0.82s cubic-bezier(0.22,1,0.36,1) var(--reveal-delay, 0s), transform 0.82s cubic-bezier(0.22,1,0.36,1) var(--reveal-delay, 0s); }
.js .reveal.is-visible { opacity: 1; transform: translate3d(0, 0, 0); }
.js .hero-portrait.reveal { transform: translate3d(0, calc(var(--float-y) + 26px), 0); }
.js .hero-portrait.reveal.is-visible { transform: translate3d(0, var(--float-y), 0); }

/* Responsive */
@media (max-width: 1180px) {
  .hero-grid, .moment-layout, .la-layout, .institution-layout, .team-fit-layout { grid-template-columns: 1fr; }
  .about-hero { min-height: auto; }
  .hero-copy { max-width: 900px; }
  .hero-portraits { width: min(100%, 780px); min-height: 620px; margin: 0 auto; }
  .moment-conclusion { grid-template-columns: 1fr; }
  .la-intelligence-visual { min-height: 480px; }
  .difference-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); border-bottom: 0; }
  .difference-card { min-height: 260px; border-bottom: 1px solid rgba(201,162,74,0.14); }
  .difference-card:nth-child(2n) { border-right: 0; }
  .difference-card:last-child { grid-column: 1 / -1; }
}

@media (max-width: 980px) {
  :root { --header-height: 92px; }
  body { padding-top: var(--header-height); }
  .nav-container { height: var(--header-height); padding: 0.9rem 1.25rem; }
  .site-logo { height: 58px; }
  .hamburger { display: flex; }
  .nav-links { position: fixed; top: 0; right: 0; bottom: 0; width: min(82vw, 380px); height: 100vh; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 1.35rem; padding: 7rem 2rem 2.5rem; background: rgba(7,7,7,0.98); border-left: 1px solid rgba(201,162,74,0.16); box-shadow: -24px 0 60px rgba(0,0,0,0.44); transform: translateX(100%); transition: transform 0.35s ease; z-index: 10001; }
  .nav-links a { width: 100%; white-space: normal; font-size: 1rem; }
  .nav-button { text-align: center; margin-top: 0.5rem; }
  #nav-toggle:checked ~ .nav-links { transform: translateX(0); }
  #nav-toggle:checked + .hamburger span:nth-child(1) { transform: translateY(10.5px) rotate(45deg); }
  #nav-toggle:checked + .hamburger span:nth-child(2) { opacity: 0; }
  #nav-toggle:checked + .hamburger span:nth-child(3) { transform: translateY(-10.5px) rotate(-45deg); }
  .founder-grid, .background-grid { grid-template-columns: 1fr; }
  .team-fit-comparison { grid-template-columns: 1fr; }
  .team-fit-comparison article + article { border-left: 0; border-top: 1px solid rgba(201,162,74,0.18); }
  .together-equation { grid-template-columns: 1fr; align-items: start; }
  .equation-symbol { line-height: 0.75; }
  .principle { grid-template-columns: 3rem minmax(0, 1fr); }
  .principle p { grid-column: 2; }
  .footer-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  :root { --header-height: 86px; }
  .section-inner { width: min(100% - 2rem, var(--max-width)); }
  .section-block { padding: 4.7rem 0; }
  h1 { font-size: clamp(3.35rem, 15vw, 5.3rem); line-height: 1; }
  h2 { font-size: clamp(2.65rem, 11.5vw, 4.3rem); }
  .about-hero { padding: 3.5rem 0 4rem; }
  .hero-grid { gap: 2.4rem; }
  .hero-summary { font-size: 1rem; }
  .hero-portraits { min-height: 410px; }
  .hero-portrait-primary { width: 72%; }
  .hero-portrait-secondary { width: 52%; }
  .hero-orbit-one { width: 290px; height: 290px; }
  .hero-orbit-two { width: 210px; height: 210px; }
  .moment-conclusion { margin-top: 3rem; gap: 1.5rem; }
  .la-intelligence-visual { min-height: 390px; border-radius: 18px; }
  .la-node { padding: 0.5rem 0.62rem; font-size: 0.75rem; }
  .la-node-one { left: 5%; top: 29%; }
  .la-node-two { right: 4%; top: 21%; }
  .la-node-three { left: 6%; bottom: 15%; }
  .la-node-four { right: 4%; bottom: 24%; }
  .la-route { opacity: 0.7; }
  .influence-grid { grid-template-columns: 1fr; }
  .influence-grid span:nth-child(even) { padding-left: 0; border-left: 0; }
  .principle { grid-template-columns: 2.25rem minmax(0, 1fr); gap: 0.8rem; }
  .founder-requirements > div { grid-template-columns: 1fr; }
  .founder-photo-wrap { aspect-ratio: 1 / 1; }
  .together-equation blockquote { font-size: clamp(2.1rem, 10vw, 3.3rem); }
  .difference-grid { grid-template-columns: 1fr; }
  .difference-card, .difference-card:last-child { grid-column: auto; min-height: 0; border-right: 0; padding: 1.4rem 0; }
  .difference-card h3 { margin-top: 1.5rem; }
  .cta-actions { width: 100%; display: grid; }
  .button { width: 100%; }
  .footer-inner { grid-template-columns: 1fr; }
  .footer-legal { display: grid; }
}

@media (max-height: 820px) and (min-width: 1181px) {
  .about-hero { min-height: calc(100vh - var(--header-height)); padding: 2.4rem 0; }
  .hero-copy h1 { font-size: clamp(3.8rem, 5.8vw, 6.4rem); }
  .hero-summary { margin-top: 1.25rem; font-size: 1rem; line-height: 1.62; }
  .hero-portraits { min-height: 500px; }
  .hero-portrait-primary { width: min(68%, 390px); }
  .hero-portrait-secondary { width: min(48%, 275px); }
  .hero-orbit-one { width: 360px; height: 360px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
  .js .reveal, .js .reveal.is-visible, .js .hero-portrait.reveal, .js .hero-portrait.reveal.is-visible { opacity: 1; transform: none !important; }
  .parallax-section::before, .parallax-float { transform: none !important; }
  .la-route::after { animation: none !important; }
}


/* =========================================================
   ABOUT PAGE V3 — TRANSCRIPT FEEDBACK PASS
   ========================================================= */

/* Give the trust-question side equal visual authority. */
@media (min-width: 1181px) {
  .moment-layout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
  }

  .question-ledger {
    min-height: 100%;
    padding: clamp(1.7rem, 2.7vw, 2.45rem);
    border: 1px solid rgba(201, 162, 74, 0.28);
    border-radius: 22px;
    background:
      radial-gradient(circle at 100% 0%, rgba(201, 162, 74, 0.15), transparent 22rem),
      linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.018));
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.3);
  }

  .question-ledger .module-label {
    margin-bottom: 1.55rem;
    font-size: 0.76rem;
  }

  .question-ledger li {
    grid-template-columns: 3.5rem minmax(0, 1fr);
    min-height: 76px;
    padding: 1.12rem 0;
  }

  .question-ledger li strong {
    color: rgba(245, 241, 232, 0.96);
    font-size: clamp(1.12rem, 1.42vw, 1.32rem);
  }
}

.moment-conclusion {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-color: rgba(201, 162, 74, 0.36);
  background:
    radial-gradient(circle at 88% 12%, rgba(201, 162, 74, 0.17), transparent 24rem),
    linear-gradient(135deg, rgba(255, 255, 255, 0.044), rgba(255, 255, 255, 0.018));
}

.moment-conclusion > p:last-child {
  color: rgba(245, 241, 232, 0.94);
  font-size: clamp(1.3rem, 2vw, 1.72rem);
  font-weight: 600;
  font-style: normal;
}

/* Connect every Los Angeles condition to every other condition. */
.la-visual-title {
  left: 50%;
  width: calc(100% - 2.8rem);
  transform: translateX(-50%);
  text-align: center;
}

.la-trust-web {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}

.la-trust-web line {
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
}

.la-web-base line {
  stroke: url(#la-web-gradient);
  stroke-width: 1.15;
  opacity: 0.68;
}

.la-web-shine line {
  stroke: rgba(255, 244, 198, 0.92);
  stroke-width: 1.6;
  stroke-dasharray: 8 92;
  opacity: 0.72;
  animation: laWebShine 6.4s linear infinite;
}

.la-web-shine line:nth-child(2) { animation-delay: -1.05s; }
.la-web-shine line:nth-child(3) { animation-delay: -2.1s; }
.la-web-shine line:nth-child(4) { animation-delay: -3.15s; }
.la-web-shine line:nth-child(5) { animation-delay: -4.2s; }
.la-web-shine line:nth-child(6) { animation-delay: -5.25s; }

@keyframes laWebShine {
  from { stroke-dashoffset: 100; }
  to { stroke-dashoffset: 0; }
}



/* Anchor the labels to the same coordinates used by the SVG web. */
.la-node-one { left: 10%; top: 29%; }
.la-node-two { left: 68%; right: auto; top: 22%; }
.la-node-three { left: 18%; bottom: auto; top: 74%; }
.la-node-four { left: 66%; right: auto; bottom: auto; top: 66%; }

/* Outcome chips should visibly activate on hover. */
.outcome-strip span {
  transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}

@media (hover: hover) and (pointer: fine) {
  .outcome-strip span:hover {
    transform: translateY(-3px);
    color: #fff7d6;
    border-color: rgba(242, 210, 122, 0.72);
    background: rgba(201, 162, 74, 0.13);
    box-shadow: 0 0 0 1px rgba(242, 210, 122, 0.07), 0 14px 34px rgba(201, 162, 74, 0.16), 0 0 24px rgba(242, 210, 122, 0.12);
  }
}

/* Align the paired internal-team and Icon Element rows. */
.team-fit-comparison article {
  display: grid;
  grid-template-rows: auto 1fr;
}

.team-fit-comparison ul {
  display: grid;
  grid-template-rows: repeat(4, 94px);
}

.team-fit-comparison li {
  height: 94px;
  display: flex;
  align-items: center;
}

/* Simplify the founder combination statement. */
.together-equation {
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 0.78fr) minmax(360px, 1.44fr);
}

.together-statement {
  color: var(--text);
  font-family: var(--font-title);
  font-size: clamp(1.75rem, 2.35vw, 2.75rem);
  line-height: 1.04;
  font-weight: 700;
  letter-spacing: -0.028em;
}

@media (min-width: 1181px) {
  .together-statement {
    white-space: nowrap;
  }
}

/* Make founder names in Background and Experience read as real headings. */
.background-item .background-name {
  color: var(--gold-light);
  background: none;
  -webkit-text-fill-color: currentColor;
  text-transform: none;
  letter-spacing: -0.02em;
  font-family: var(--font-title);
  font-size: clamp(2rem, 2.8vw, 3.05rem);
  line-height: 1;
  font-weight: 700;
}

/* Keep difference-card body copy on one shared horizontal baseline. */
@media (min-width: 761px) {
  .difference-card {
    display: grid;
    grid-template-rows: auto 7.4rem 1fr;
    align-content: start;
  }

  .difference-card h3 {
    height: 7.4rem;
    margin-top: 1.65rem;
    display: flex;
    align-items: flex-end;
  }

  .difference-card p {
    margin-top: 0.8rem;
  }
}

@media (max-width: 1180px) {
  .question-ledger {
    padding: clamp(1.4rem, 3vw, 2.1rem);
    border: 1px solid rgba(201, 162, 74, 0.24);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.025);
  }

  .together-equation {
    grid-template-columns: 1fr;
  }

  .together-statement {
    max-width: 760px;
  }
}

@media (max-width: 760px) {
  .moment-conclusion {
    grid-template-columns: 1fr;
  }

  .la-visual-title {
    width: calc(100% - 1.6rem);
  }

  .team-fit-comparison ul {
    grid-template-rows: none;
  }

  .team-fit-comparison li {
    height: auto;
    min-height: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .la-web-shine line {
    animation: none !important;
    opacity: 0.22;
  }
}


/* =========================================================
   ABOUT V4 — LAYOUT REPAIR PASS
   Keeps paired bullets beside their text and prevents
   founder/differentiation content from overlapping or clipping.
   ========================================================= */

/* Comparison bullets sit beside the first line of each item. */
.team-fit-comparison li {
  position: relative;
  display: grid;
  grid-template-columns: 0.5rem minmax(0, 1fr);
  column-gap: 0.85rem;
  align-items: start;
  height: 94px;
  padding: 1rem 0;
}

.team-fit-comparison li::before {
  position: static;
  width: 0.42rem;
  height: 0.42rem;
  margin-top: 0.58em;
  align-self: start;
}

/* Founder summary uses a deliberate two-line conclusion instead of overflowing. */
.together-equation {
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 0.72fr) minmax(0, 1.56fr);
  overflow: hidden;
}

.together-equation > * {
  min-width: 0;
}

.together-statement {
  max-width: 100%;
  font-size: clamp(1.55rem, 2vw, 2.35rem);
  line-height: 1.08;
  white-space: normal;
  text-wrap: balance;
  overflow-wrap: normal;
}

.together-statement span {
  display: block;
}

/* Reserve a clean title row so body copy cannot collide with headings. */
@media (min-width: 761px) {
  .difference-card {
    display: grid;
    grid-template-rows: auto minmax(10.25rem, auto) 1fr;
    align-content: start;
  }

  .difference-card h3 {
    height: auto;
    min-height: 0;
    margin: 0;
    padding-top: 2rem;
    align-self: end;
    line-height: 1.06;
  }

  .difference-card p {
    margin-top: 1rem;
  }
}

@media (max-width: 1180px) {
  .together-equation {
    grid-template-columns: 1fr;
    overflow: visible;
  }

  .together-statement span {
    display: inline;
  }

  .together-statement span + span::before {
    content: " ";
  }
}

@media (max-width: 760px) {
  .team-fit-comparison li {
    height: auto;
    min-height: 0;
  }

  .difference-card {
    display: block;
  }

  .difference-card h3 {
    padding-top: 0;
  }
}


/* =========================================================
   ABOUT V5 — FINAL VISUAL REFINEMENT
   Sharpens the moment statement, places the organization at
   the center of the LA trust web, and tightens difference cards.
   ========================================================= */

/* Replace the oversized rounded callout with an editorial signal band. */
.moment-conclusion {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) 1px minmax(0, 1.12fr);
  gap: clamp(1.75rem, 4vw, 4rem);
  align-items: center;
  margin-top: clamp(3.6rem, 6vw, 5.6rem);
  padding: clamp(2rem, 3.5vw, 3rem) clamp(0.15rem, 1vw, 0.8rem);
  border: 0;
  border-top: 1px solid rgba(201, 162, 74, 0.38);
  border-bottom: 1px solid rgba(201, 162, 74, 0.22);
  border-radius: 0;
  background:
    linear-gradient(90deg, rgba(201, 162, 74, 0.045), transparent 28%, transparent 72%, rgba(201, 162, 74, 0.045));
  overflow: hidden;
}

.moment-conclusion::before {
  content: "THE GAP";
  position: absolute;
  left: 0.2rem;
  top: 0.72rem;
  color: var(--gold);
  font-size: 0.66rem;
  line-height: 1;
  font-weight: 900;
  letter-spacing: 0.24em;
}

.moment-conclusion::after {
  content: "";
  position: absolute;
  left: 0;
  top: -1px;
  width: clamp(5rem, 12vw, 10rem);
  height: 2px;
  background: var(--soft-gold-gradient);
}

.moment-conclusion-rule {
  align-self: stretch;
  width: 1px;
  min-height: 7.5rem;
  background: linear-gradient(180deg, transparent, rgba(242, 210, 122, 0.58), transparent);
}

.moment-conclusion > .moment-conclusion-primary,
.moment-conclusion > .moment-conclusion-secondary {
  margin: 0;
  font-family: var(--font-title);
  font-style: normal;
  font-weight: 700;
  letter-spacing: -0.032em;
  text-wrap: balance;
}

.moment-conclusion > .moment-conclusion-primary {
  color: var(--text);
  font-size: clamp(2.15rem, 3.1vw, 3.65rem);
  line-height: 1.02;
}

.moment-conclusion > .moment-conclusion-secondary {
  color: rgba(245, 241, 232, 0.9);
  font-size: clamp(1.7rem, 2.45vw, 2.75rem);
  line-height: 1.12;
}

.moment-conclusion-secondary strong {
  color: var(--gold-light);
  font-weight: 700;
}

/* A true two-way LA trust web with the organization at its center. */
.la-web-base line {
  marker-start: url(#la-web-arrow);
  marker-end: url(#la-web-arrow);
  stroke-width: 1.05;
  opacity: 0.48;
}

.la-web-flow line {
  vector-effect: non-scaling-stroke;
  fill: none;
  stroke: rgba(255, 244, 198, 0.82);
  stroke-width: 1.35;
  stroke-linecap: round;
  stroke-dasharray: 4 96;
  opacity: 0.58;
}

.la-web-flow-forward line {
  animation: laWebFlowForward 7.6s linear infinite;
}

.la-web-flow-backward line {
  stroke: rgba(201, 162, 74, 0.72);
  stroke-dasharray: 3 97;
  animation: laWebFlowBackward 7.6s linear infinite;
}

.la-web-flow line:nth-child(2) { animation-delay: -0.76s; }
.la-web-flow line:nth-child(3) { animation-delay: -1.52s; }
.la-web-flow line:nth-child(4) { animation-delay: -2.28s; }
.la-web-flow line:nth-child(5) { animation-delay: -3.04s; }
.la-web-flow line:nth-child(6) { animation-delay: -3.8s; }
.la-web-flow line:nth-child(7) { animation-delay: -4.56s; }
.la-web-flow line:nth-child(8) { animation-delay: -5.32s; }
.la-web-flow line:nth-child(9) { animation-delay: -6.08s; }
.la-web-flow line:nth-child(10) { animation-delay: -6.84s; }

@keyframes laWebFlowForward {
  from { stroke-dashoffset: 100; }
  to { stroke-dashoffset: 0; }
}

@keyframes laWebFlowBackward {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: 100; }
}

.la-node-center {
  left: 50%;
  top: 50%;
  z-index: 7;
  transform: translate(-50%, -50%);
  padding: 0.78rem 1rem;
  border-color: rgba(242, 210, 122, 0.68);
  background:
    radial-gradient(circle at 50% 0%, rgba(201, 162, 74, 0.2), transparent 7rem),
    rgba(5, 5, 5, 0.9);
  color: #fff3c1;
  font-weight: 700;
  box-shadow:
    0 0 0 1px rgba(242, 210, 122, 0.06),
    0 18px 42px rgba(0, 0, 0, 0.38),
    0 0 34px rgba(201, 162, 74, 0.12);
}

.la-node-center i {
  width: 0.62rem;
  height: 0.62rem;
  box-shadow:
    0 0 0 0.42rem rgba(242, 210, 122, 0.1),
    0 0 24px rgba(242, 210, 122, 0.72);
}

/* Keep all five differentiators compact, aligned, and intentionally top-weighted. */
@media (min-width: 761px) {
  .difference-card {
    min-height: 315px;
    display: grid;
    grid-template-rows: auto auto 1fr;
    align-content: start;
    padding: 1.45rem 1.3rem 1.65rem;
  }

  .difference-card > span {
    align-self: start;
  }

  .difference-card h3 {
    min-height: 4.65rem;
    height: auto;
    margin: 1.35rem 0 0;
    padding: 0;
    display: flex;
    align-items: flex-end;
    align-self: auto;
    font-size: clamp(1.38rem, 1.58vw, 1.78rem);
    line-height: 1.04;
  }

  .difference-card p {
    margin: 0.72rem 0 0;
    align-self: start;
  }
}

@media (max-width: 1180px) {
  .moment-conclusion {
    grid-template-columns: 1fr;
    gap: 1.25rem;
    padding-top: 2.65rem;
  }

  .moment-conclusion-rule {
    width: 100%;
    min-height: 1px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(242, 210, 122, 0.58), transparent);
  }
}

@media (max-width: 760px) {
  .moment-conclusion > .moment-conclusion-primary {
    font-size: clamp(2rem, 10vw, 3rem);
  }

  .moment-conclusion > .moment-conclusion-secondary {
    font-size: clamp(1.45rem, 7.5vw, 2.2rem);
  }

  .la-node-center {
    padding: 0.58rem 0.72rem;
    font-size: 0.72rem;
  }

  .difference-card {
    min-height: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .la-web-flow line {
    animation: none !important;
    opacity: 0.2;
  }
}

/* =========================================================
   ABOUT V6 — BALANCED GUTTERS, CENTRAL ORGANIZATION NODE,
   BIDIRECTIONAL LA TRUST WEB, AND COMMUNITY ADVISOR NETWORK
   ========================================================= */

:root {
  --about-page-gutter: clamp(1.25rem, 3.6vw, 4rem);
}

/* Use one parent gutter so left and right margins are always identical. */
.section-block {
  padding-left: var(--about-page-gutter);
  padding-right: var(--about-page-gutter);
}

.section-block > .section-inner {
  width: min(100%, var(--max-width));
}

.moment-conclusion {
  width: 100%;
  padding-left: clamp(1.5rem, 3vw, 3rem);
  padding-right: clamp(1.5rem, 3vw, 3rem);
}

.moment-conclusion::before {
  left: clamp(1.5rem, 3vw, 3rem);
}

.moment-conclusion::after {
  left: clamp(1.5rem, 3vw, 3rem);
}

.la-intelligence-visual {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* Community Advisor Network — visible in the LA story without creating another card. */
.la-network-note {
  max-width: 720px;
  margin-top: 1.8rem;
  padding-left: 1.15rem;
  border-left: 2px solid rgba(201, 162, 74, 0.48);
}

.la-network-note .module-label {
  margin-bottom: 0.7rem;
}

.la-network-note > p:last-child {
  color: rgba(245, 241, 232, 0.8);
  font-size: clamp(0.98rem, 1.15vw, 1.08rem);
  line-height: 1.7;
}

/* Make the organization unmistakably different from the surrounding conditions. */
.la-node-center {
  width: clamp(7.8rem, 12vw, 9.35rem);
  aspect-ratio: 1;
  min-height: 0;
  padding: 1rem;
  flex-direction: column;
  justify-content: center;
  gap: 0.62rem;
  border-width: 1.5px;
  border-radius: 50%;
  text-align: center;
  white-space: normal;
  background:
    radial-gradient(circle at 50% 30%, rgba(242, 210, 122, 0.22), transparent 46%),
    linear-gradient(145deg, rgba(23, 20, 14, 0.98), rgba(5, 5, 5, 0.96));
  box-shadow:
    0 0 0 7px rgba(201, 162, 74, 0.055),
    0 22px 54px rgba(0, 0, 0, 0.46),
    0 0 38px rgba(242, 210, 122, 0.16);
}

.la-node-center > i {
  display: none;
}

.la-organization-icon {
  width: 2.25rem;
  height: 2.25rem;
  color: var(--gold-light);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 9px rgba(242, 210, 122, 0.28));
}

.la-node-center strong {
  max-width: 7ch;
  color: #fff3c1;
  font-family: var(--font-subtitle);
  font-size: clamp(0.82rem, 1.05vw, 1rem);
  line-height: 1.12;
  font-weight: 700;
}

/* Every outer relationship and every organization relationship reads in both directions. */
.la-web-base line {
  marker-start: url(#la-web-arrow);
  marker-end: url(#la-web-arrow);
  stroke-width: 1.2;
  opacity: 0.72;
}

.la-web-flow-forward line,
.la-web-flow-backward line {
  stroke-width: 1.55;
  opacity: 0.82;
}

.la-web-flow-forward line {
  animation-duration: 6.2s;
}

.la-web-flow-backward line {
  animation-duration: 6.2s;
}

/* Five paired rows now remain aligned after adding Community Advisor Network. */
.team-fit-comparison ul {
  grid-template-rows: repeat(5, 94px);
}

@media (max-width: 1180px) {
  :root {
    --about-page-gutter: clamp(1.15rem, 3vw, 2rem);
  }
}

@media (max-width: 760px) {
  :root {
    --about-page-gutter: 1rem;
  }

  .moment-conclusion {
    padding-left: 1.2rem;
    padding-right: 1.2rem;
  }

  .moment-conclusion::before,
  .moment-conclusion::after {
    left: 1.2rem;
  }

  .la-node-center {
    width: 6.2rem;
    padding: 0.72rem;
    gap: 0.38rem;
  }

  .la-organization-icon {
    width: 1.7rem;
    height: 1.7rem;
  }

  .la-node-center strong {
    font-size: 0.7rem;
  }

  .team-fit-comparison ul {
    grid-template-rows: none;
  }
}


/* =========================================================
   ABOUT V7 — COMPACT, CENTERED ORGANIZATION NODE
   ========================================================= */

/* Keep the central institution distinct without covering the trust web. */
.la-node-center {
  width: clamp(6.35rem, 9.2vw, 7.35rem);
  min-width: 0;
  aspect-ratio: 1;
  padding: 0.65rem;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.38rem;
  text-align: center;
}

.la-organization-icon {
  width: clamp(1.65rem, 2.35vw, 1.95rem);
  height: clamp(1.65rem, 2.35vw, 1.95rem);
  flex: 0 0 auto;
  display: block;
  margin: 0 auto;
  overflow: visible;
}

.la-node-center strong {
  width: 100%;
  max-width: 7.4ch;
  margin: 0 auto;
  display: block;
  text-align: center;
  font-size: clamp(0.72rem, 0.9vw, 0.86rem);
  line-height: 1.08;
}

@media (max-width: 760px) {
  .la-node-center {
    width: 5.15rem;
    padding: 0.5rem;
    gap: 0.28rem;
  }

  .la-organization-icon {
    width: 1.35rem;
    height: 1.35rem;
  }

  .la-node-center strong {
    max-width: 7ch;
    font-size: 0.61rem;
    line-height: 1.05;
  }
}

/* =========================================================
   ABOUT V8 — SMALLER, PRECISELY CENTERED ORGANIZATION NODE
   ========================================================= */

.la-node-center {
  left: 50% !important;
  top: 50% !important;
  width: clamp(5rem, 6.8vw, 5.65rem) !important;
  min-width: 0 !important;
  aspect-ratio: 1 / 1 !important;
  margin: 0 !important;
  padding: 0.42rem !important;
  display: grid !important;
  grid-template-rows: auto auto !important;
  place-items: center !important;
  align-content: center !important;
  justify-content: center !important;
  row-gap: 0.18rem !important;
  transform: translate(-50%, -50%) !important;
  text-align: center !important;
  white-space: normal !important;
}

.la-node-center .la-organization-icon {
  width: clamp(1.25rem, 1.65vw, 1.48rem) !important;
  height: clamp(1.25rem, 1.65vw, 1.48rem) !important;
  margin: 0 auto !important;
  display: block !important;
  align-self: center !important;
  justify-self: center !important;
}

.la-node-center strong {
  width: auto !important;
  max-width: 6.8ch !important;
  margin: 0 auto !important;
  display: block !important;
  align-self: center !important;
  justify-self: center !important;
  color: #fff3c1 !important;
  font-size: clamp(0.59rem, 0.74vw, 0.69rem) !important;
  line-height: 0.98 !important;
  text-align: center !important;
}

@media (max-width: 760px) {
  .la-node-center {
    width: 4.35rem !important;
    padding: 0.34rem !important;
    row-gap: 0.12rem !important;
  }

  .la-node-center .la-organization-icon {
    width: 1.05rem !important;
    height: 1.05rem !important;
  }

  .la-node-center strong {
    max-width: 6.5ch !important;
    font-size: 0.52rem !important;
    line-height: 0.96 !important;
  }
}

/* =========================================================
   ABOUT V9 — OPTICALLY CENTERED ORGANIZATION NODE
   Centers the node within the usable map field beneath the title,
   and centers its icon/text as one locked unit.
   ========================================================= */

.la-node-center {
  left: 50% !important;
  top: 54% !important;
  width: clamp(4.8rem, 6.4vw, 5.35rem) !important;
  aspect-ratio: 1 / 1 !important;
  padding: 0 !important;
  display: block !important;
  transform: translate(-50%, -50%) !important;
  border-radius: 50% !important;
  overflow: hidden !important;
}

.la-node-center-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.18rem;
  padding: 0.48rem;
  text-align: center;
}

.la-node-center .la-organization-icon {
  width: clamp(1.18rem, 1.5vw, 1.38rem) !important;
  height: clamp(1.18rem, 1.5vw, 1.38rem) !important;
  margin: 0 !important;
  flex: 0 0 auto;
  display: block !important;
  transform: none !important;
}

.la-node-center strong {
  width: 100% !important;
  max-width: 6.7ch !important;
  margin: 0 !important;
  display: block !important;
  font-size: clamp(0.57rem, 0.7vw, 0.66rem) !important;
  line-height: 0.98 !important;
  text-align: center !important;
  transform: none !important;
}

@media (max-width: 760px) {
  .la-node-center {
    top: 54% !important;
    width: 4.05rem !important;
  }

  .la-node-center-content {
    gap: 0.12rem;
    padding: 0.38rem;
  }

  .la-node-center .la-organization-icon {
    width: 0.98rem !important;
    height: 0.98rem !important;
  }

  .la-node-center strong {
    font-size: 0.49rem !important;
    line-height: 0.96 !important;
  }
}

/* =========================================================
   ABOUT V10 — TRUE CENTER + CENTERED ORGANIZATION LABEL
   Places the organization node at the exact geometric center
   of the map and prevents the label from clipping.
   ========================================================= */
.la-node-center {
  left: 50% !important;
  top: 50% !important;
  width: clamp(4.55rem, 5.9vw, 4.95rem) !important;
  aspect-ratio: 1 / 1 !important;
  transform: translate(-50%, -50%) !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  overflow: visible !important;
}

.la-node-center-content {
  position: static !important;
  inset: auto !important;
  width: 100% !important;
  height: 100% !important;
  display: grid !important;
  grid-template-rows: auto auto !important;
  place-items: center !important;
  align-content: center !important;
  justify-content: center !important;
  gap: 0.14rem !important;
  padding: 0.42rem !important;
  text-align: center !important;
  transform: none !important;
}

.la-node-center .la-organization-icon {
  width: clamp(1.08rem, 1.35vw, 1.25rem) !important;
  height: clamp(1.08rem, 1.35vw, 1.25rem) !important;
  margin: 0 auto !important;
  display: block !important;
  justify-self: center !important;
  align-self: center !important;
}

.la-node-center strong {
  width: auto !important;
  max-width: none !important;
  margin: 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  color: #fff3c1 !important;
  font-size: clamp(0.49rem, 0.61vw, 0.57rem) !important;
  line-height: 0.94 !important;
  letter-spacing: -0.015em !important;
  text-align: center !important;
  white-space: nowrap !important;
  transform: none !important;
}

.la-node-center strong span {
  display: block !important;
  width: auto !important;
  margin: 0 auto !important;
  text-align: center !important;
}

@media (max-width: 760px) {
  .la-node-center {
    left: 50% !important;
    top: 50% !important;
    width: 3.85rem !important;
  }

  .la-node-center-content {
    gap: 0.1rem !important;
    padding: 0.32rem !important;
  }

  .la-node-center .la-organization-icon {
    width: 0.92rem !important;
    height: 0.92rem !important;
  }

  .la-node-center strong {
    font-size: 0.43rem !important;
    line-height: 0.94 !important;
  }
}


/* =========================================================
   ABOUT V12 — TOP-ALIGNED MAP + TRUE CENTER CONNECTIONS
   Keeps the Los Angeles visual aligned with the top of its
   section and lets organization lines terminate behind the
   exact center of the circle so they visibly meet its edge.
   ========================================================= */
@media (min-width: 1181px) {
  .la-layout {
    align-items: start;
  }

  .la-intelligence-visual {
    align-self: start;
    margin-top: 0;
  }
}

/* =========================================================
   ABOUT V13 — CENTER-PENETRATING ORGANIZATION CONNECTIONS
   Continue the Culture and Stakeholder Response paths visibly
   inside the organization node so both aim at its true center.
   ========================================================= */
.la-center-connection-overlay {
  position: absolute;
  inset: 0;
  z-index: 8;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.la-center-connection-overlay line {
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
}

.la-center-link {
  stroke: rgba(242, 210, 122, 0.72);
  stroke-width: 1.25;
}

.la-center-link-flow {
  stroke: rgba(255, 244, 198, 0.96);
  stroke-width: 1.6;
  stroke-dasharray: 3 97;
  animation: laCenterLinkFlow 3.8s linear infinite;
}

.la-center-link-stakeholder.la-center-link-flow {
  animation-delay: -1.9s;
}

.la-node-center-content {
  position: relative !important;
  z-index: 9 !important;
}

@keyframes laCenterLinkFlow {
  from { stroke-dashoffset: 100; }
  to { stroke-dashoffset: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .la-center-link-flow {
    animation: none;
  }
}

/* =========================================================
   ABOUT V14 — CLEAN CENTER CONNECTIONS
   Replaces the V13 short inner segments with two continuous
   Culture/Stakeholder paths that run directly to the true
   center of the organization node. Both directions animate
   along the same geometry, so there are no kinks or duplicate
   reverse lines.
   ========================================================= */
.la-center-connection-overlay {
  position: absolute;
  inset: 0;
  z-index: 8;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.la-center-connection-overlay line {
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
}

.la-center-connection-base line {
  stroke: rgba(242, 210, 122, 0.58);
  stroke-width: 1.2;
}

.la-center-connection-flow line {
  fill: none;
  stroke-linecap: round;
  stroke-width: 1.55;
  stroke-dasharray: 4 96;
  opacity: 0.78;
}

.la-center-connection-flow-forward line {
  stroke: rgba(255, 244, 198, 0.96);
  animation: laCenterConnectionForward 6.2s linear infinite;
}

.la-center-connection-flow-backward line {
  stroke: rgba(201, 162, 74, 0.86);
  stroke-dasharray: 3 97;
  animation: laCenterConnectionBackward 6.2s linear infinite;
}

.la-center-connection-flow line:nth-child(2) {
  animation-delay: -3.1s;
}

.la-node-center-content {
  position: relative !important;
  z-index: 9 !important;
}

@keyframes laCenterConnectionForward {
  from { stroke-dashoffset: 100; }
  to { stroke-dashoffset: 0; }
}

@keyframes laCenterConnectionBackward {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: 100; }
}

@media (prefers-reduced-motion: reduce) {
  .la-center-connection-flow line {
    animation: none !important;
  }
}

/* =========================================================
   ABOUT V15 — MASKED CENTER CONNECTIONS
   The Culture and Stakeholder Response paths still aim at the
   exact center coordinate, but the organization node now paints
   above them with a fully opaque surface. This prevents any line
   from appearing across the circle while preserving the correct
   center-seeking angle and two-way motion.
   ========================================================= */
.la-center-connection-overlay {
  z-index: 4 !important;
  overflow: hidden !important;
}

.la-node-center {
  z-index: 10 !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 50% 28%, #312713 0%, #171209 42%, #070707 100%) !important;
  isolation: isolate;
}

.la-node-center-content {
  position: relative !important;
  z-index: 2 !important;
}

/* =========================================================
   ABOUT V16 — ORGANIZATION NODE POSITION ADJUSTMENT
   Moves only the central organization node slightly left and
   slightly down. All organization connection endpoints use the
   matching 48% / 52% coordinate in the SVG markup.
   ========================================================= */
.la-node-center {
  left: 46% !important;
  top: 52% !important;
}

@media (max-width: 760px) {
  .la-node-center {
    left: 48% !important;
    top: 52% !important;
  }
}


/* =========================================================
   ABOUT V18 — WIDE-SCREEN GAP-BAND FEATHERING
   Softens the hard horizontal cutoff on large displays.
   ========================================================= */
@media (min-width: 1181px) {
  .moment-conclusion {
    padding-left: clamp(4rem, 6vw, 6.5rem);
    padding-right: clamp(4rem, 6vw, 6.5rem);
    background:
      linear-gradient(90deg,
        transparent 0%,
        rgba(201, 162, 74, 0.028) 8%,
        rgba(12, 11, 10, 0.72) 18%,
        rgba(12, 11, 10, 0.72) 82%,
        rgba(201, 162, 74, 0.028) 92%,
        transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
  }

  .moment-conclusion::before,
  .moment-conclusion::after {
    left: clamp(4rem, 6vw, 6.5rem);
  }
}