:root {
  --org-navy: #10192e;
  --org-navy-2: #172541;
  --org-ink: #10192e;
  --org-paper: #f7f2e9;
  --org-lime: #d6ff36;
  --org-coral: #ff664c;
  --org-violet: #855cff;
  --org-cyan: #50d8de;
}

body[data-page="organization"] { background: var(--org-paper); }

.org-hero {
  position: relative;
  min-height: 850px;
  overflow: hidden;
  padding: 142px 0 0;
  background:
    radial-gradient(circle at 82% 24%, rgba(133, 92, 255, .34), transparent 28rem),
    radial-gradient(circle at 16% 82%, rgba(80, 216, 222, .12), transparent 24rem),
    var(--org-navy);
  color: #fff;
}

.org-hero-grid {
  position: absolute;
  inset: 0;
  opacity: .15;
  background-image: linear-gradient(rgba(255,255,255,.22) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.22) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: linear-gradient(to bottom, #000, transparent 86%);
}

.org-hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  gap: 7%;
  align-items: center;
}

.org-hero-copy h1 {
  max-width: 720px;
  margin: 0;
  font: 800 clamp(4.7rem, 8vw, 8.7rem)/.76 var(--display);
  letter-spacing: -.105em;
}

.org-hero-copy h1 em { color: var(--org-lime); font-style: normal; }
.org-hero-copy > p:not(.kicker) { max-width: 590px; margin: 34px 0 0; color: #c7cfdd; font-size: .98rem; line-height: 1.75; }

.org-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.org-hero-actions a { display: flex; align-items: center; justify-content: space-between; min-width: 190px; gap: 24px; padding: 15px 17px; background: var(--org-lime); color: var(--org-ink); font-size: .72rem; font-weight: 800; text-decoration: none; }
.org-hero-actions a + a { border: 1px solid rgba(255,255,255,.46); background: transparent; color: #fff; }
.org-hero-actions a:hover,.org-hero-actions a:focus-visible { background: #fff; color: var(--org-ink); }

.org-hero-visual {
  position: relative;
  min-height: 570px;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 180px 0 0 0;
  overflow: hidden;
  background: #080c16;
  box-shadow: 26px 26px 0 rgba(214,255,54,.12);
}

.org-hero-visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(16,25,46,.84), transparent 48%), linear-gradient(90deg, transparent 55%, rgba(133,92,255,.22)); }
.org-hero-visual img { width: 100%; height: 100%; min-height: 570px; object-fit: cover; object-position: 58% center; filter: saturate(.82) contrast(1.08); }

.org-hero-seal {
  position: absolute;
  z-index: 2;
  top: 24px;
  right: 24px;
  display: grid;
  width: 128px;
  height: 128px;
  place-items: center;
  align-content: center;
  border-radius: 50%;
  background: var(--org-lime);
  color: var(--org-ink);
  text-align: center;
  transform: rotate(7deg);
}

.org-hero-seal strong { font: 800 2.1rem var(--display); letter-spacing: -.1em; }
.org-hero-seal span { font: 600 .52rem/1.3 var(--mono); letter-spacing: .04em; }

.org-hero-caption { position: absolute; z-index: 2; right: 25px; bottom: 22px; left: 25px; display: flex; justify-content: space-between; gap: 12px; color: #fff; font: 500 .55rem var(--mono); letter-spacing: .08em; }

.org-stat-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 58px;
  border-top: 1px solid rgba(255,255,255,.2);
}

.org-stat-grid div { min-height: 122px; padding: 22px 20px; border-right: 1px solid rgba(255,255,255,.2); }
.org-stat-grid div:first-child { padding-left: 0; }
.org-stat-grid div:last-child { border-right: 0; }
.org-stat-grid strong { display: block; color: var(--org-lime); font: 800 2.7rem var(--display); letter-spacing: -.09em; }
.org-stat-grid span { display: block; max-width: 190px; margin-top: 7px; color: #aeb8c9; font-size: .66rem; line-height: 1.45; }

.org-positioning { background: var(--org-paper); }
.org-positioning-grid { display: grid; grid-template-columns: .45fr 1.55fr; gap: 8%; align-items: start; }
.org-positioning h2,.org-section-heading h2,.org-directory-heading h2,.org-values-grid h2 { color: var(--org-ink); }
.org-positioning h2 em,.org-section-heading h2 em,.org-directory-heading h2 em,.org-values-grid h2 em { color: var(--org-coral); }
.org-positioning-grid > div > p { max-width: 680px; margin: 30px 0 0; color: #566075; font-size: .96rem; line-height: 1.75; }

.org-structure-section { position: relative; overflow: hidden; background: var(--org-navy); color: #fff; }
.org-structure-section::before { content: ""; position: absolute; width: 520px; height: 520px; border-radius: 50%; right: -230px; top: 120px; background: rgba(133,92,255,.16); filter: blur(4px); }

.org-section-heading,.org-directory-heading { position: relative; display: flex; justify-content: space-between; align-items: end; gap: 60px; }
.org-section-heading h2 { color: #fff; }
.org-section-heading > p,.org-directory-heading > p { max-width: 390px; margin: 0 0 5px; color: #aeb8c9; font-size: .83rem; line-height: 1.7; }

.org-layer-stack { position: relative; margin-top: 74px; }
.org-layer-stack::before { content: ""; position: absolute; top: 0; bottom: 0; left: 82px; width: 1px; background: linear-gradient(var(--org-lime), var(--org-violet), var(--org-coral)); }

.org-layer { position: relative; display: grid; grid-template-columns: 180px minmax(0,1fr); gap: 26px; padding-bottom: 30px; }
.org-layer-index { position: relative; z-index: 1; align-self: start; min-height: 118px; padding: 20px; border: 1px solid #3a4863; background: var(--org-navy); }
.org-layer-index::after { content: ""; position: absolute; top: 26px; right: -35px; width: 35px; height: 1px; background: #3a4863; }
.org-layer-index span { display: block; color: var(--org-lime); font: 800 1.65rem var(--display); letter-spacing: -.06em; }
.org-layer-index strong { display: block; margin-top: 13px; color: #dbe2ee; font: 600 .57rem/1.45 var(--mono); letter-spacing: .07em; }

.org-layer-content { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.org-layer-content.single { grid-template-columns: 1fr; }
.org-layer-content.two-column { grid-template-columns: repeat(2,1fr); }
.org-layer-content.four-column { grid-template-columns: repeat(4,1fr); }

.org-role-card { min-height: 218px; padding: 24px; border: 1px solid #34415a; background: rgba(23,37,65,.8); }
.org-role-card > span { color: var(--org-lime); font: 600 .52rem var(--mono); letter-spacing: .08em; }
.org-role-card h3 { margin: 58px 0 12px; color: #fff; font: 800 1.22rem/.98 var(--display); letter-spacing: -.055em; }
.org-role-card p { margin: 0; color: #aeb8c9; font-size: .7rem; line-height: 1.6; }
.org-role-card ul { margin: 18px 0 0; padding: 0; list-style: none; color: #c7cfdd; font-size: .67rem; line-height: 1.7; }
.org-role-card li::before { content: "↳"; margin-right: 8px; color: var(--org-lime); }
.org-role-card.featured { min-height: 250px; border-color: var(--org-lime); background: linear-gradient(120deg, rgba(214,255,54,.1), rgba(23,37,65,.96) 55%); }
.org-role-card.featured h3 { margin-top: 32px; font-size: 2rem; }
.org-role-card.growth-card { border-color: var(--org-coral); background: linear-gradient(115deg, rgba(255,102,76,.12), rgba(23,37,65,.96) 60%); }
.org-role-card.growth-card h3 { margin-top: 28px; font-size: 1.8rem; }
.org-responsibility-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.org-role-card small { display: block; margin-top: 21px; color: var(--org-coral); font: 600 .52rem var(--mono); letter-spacing: .05em; }

.org-flow-section { background: var(--org-lime); color: var(--org-ink); }
.org-flow-section .org-section-heading h2 { color: var(--org-ink); }
.org-flow-section .org-section-heading > p { color: #394257; }
.org-flow-section .kicker { color: var(--org-ink); }
.org-flow { display: grid; grid-template-columns: repeat(6,1fr); margin: 65px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--org-ink); }
.org-flow li { position: relative; min-height: 170px; padding: 23px 16px; border-right: 1px solid var(--org-ink); }
.org-flow li:last-child { border-right: 0; }
.org-flow li:not(:last-child)::after { content: "→"; position: absolute; z-index: 2; top: 50%; right: -13px; display: grid; width: 26px; height: 26px; place-items: center; border-radius: 50%; background: var(--org-ink); color: var(--org-lime); font-size: .72rem; }
.org-flow span { color: #5a6141; font: 500 .6rem var(--mono); }
.org-flow strong { display: block; margin-top: 68px; font: 800 .9rem/1.08 var(--display); letter-spacing: -.045em; }
.org-flow-caption { margin: 30px 0 0; text-align: center; font: 600 .63rem var(--mono); letter-spacing: .07em; }
.org-flow-caption b { margin: 0 10px; }

.org-directory-section { background: #eef0f8; color: var(--org-ink); }
.org-directory-heading > p { color: #596378; }
.org-directory-controls { display: grid; grid-template-columns: 330px minmax(0,1fr); gap: 28px; align-items: end; margin-top: 60px; padding: 22px; border: 1px solid #d8dbea; background: #fff; }
.org-directory-controls label span { display: block; margin-bottom: 8px; color: #697287; font: 600 .52rem var(--mono); letter-spacing: .06em; }
.org-directory-controls input { width: 100%; border: 1px solid #c8cddd; padding: 12px 13px; color: var(--org-ink); font: 500 .75rem var(--sans); }
.org-filter-list { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.org-filter-list button { border: 1px solid #c8cddd; padding: 11px 13px; background: transparent; color: var(--org-ink); font: 700 .62rem var(--sans); cursor: pointer; }
.org-filter-list button:hover,.org-filter-list button:focus-visible,.org-filter-list button.is-active { border-color: var(--org-ink); background: var(--org-ink); color: #fff; }
.org-directory-status { min-height: 1.2em; margin: 18px 0 12px; color: #697287; font: 500 .6rem var(--mono); text-align: right; }

.org-team-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; }
.org-team-card { position: relative; overflow: hidden; min-height: 415px; border: 1px solid #d8dbea; background: #fff; }
.org-team-photo { position: relative; height: 218px; overflow: hidden; background: linear-gradient(135deg, var(--profile-a), var(--profile-b)); }
.org-team-photo::before { content: ""; position: absolute; width: 185px; height: 185px; left: 50%; bottom: -57px; border-radius: 50%; transform: translateX(-50%); background: rgba(255,255,255,.15); box-shadow: 0 -50px 0 -18px rgba(255,255,255,.2); }
.org-team-photo img { width: 100%; height: 100%; object-fit: cover; }
.org-team-initials { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255,255,255,.95); font: 800 3rem var(--display); letter-spacing: -.1em; }
.org-team-layer { position: absolute; z-index: 2; top: 13px; left: 13px; padding: 6px 8px; background: var(--org-lime); color: var(--org-ink); font: 600 .48rem var(--mono); letter-spacing: .05em; }
.org-team-copy { padding: 20px; }
.org-team-copy > span { color: #7a8397; font: 600 .5rem var(--mono); letter-spacing: .05em; }
.org-team-copy h3 { margin: 11px 0 7px; color: var(--org-ink); font: 800 1.1rem/.98 var(--display); letter-spacing: -.05em; }
.org-team-copy p { margin: 0; color: #596378; font-size: .67rem; line-height: 1.5; }
.org-team-name { display: block; margin-top: 14px; color: var(--org-coral); font-size: .63rem; font-weight: 800; }
.org-team-contact { display: flex; gap: 7px; margin-top: 17px; }
.org-team-contact a,.org-team-contact span { display: grid; width: 36px; height: 36px; place-items: center; border: 1px solid #c8cddd; border-radius: 50%; color: var(--org-ink); font: 800 .58rem var(--sans); }
.org-team-contact a { background: var(--org-ink); color: #fff; }
.org-team-contact a:hover,.org-team-contact a:focus-visible { background: var(--org-lime); color: var(--org-ink); }
.org-team-contact span { opacity: .35; cursor: not-allowed; }
.org-team-card[hidden] { display: none; }
.org-empty-directory { grid-column: 1/-1; padding: 60px 20px; border: 1px dashed #b8bece; background: rgba(255,255,255,.45); text-align: center; }
.org-empty-directory strong { display: block; font: 800 1.4rem var(--display); }
.org-empty-directory span { display: block; margin-top: 10px; color: #697287; font-size: .72rem; }

.org-values-section { background: var(--org-coral); color: var(--org-ink); }
.org-values-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9%; align-items: start; }
.org-values-grid h2 { color: var(--org-ink); }
.org-values-grid h2 em { color: #fff; }
.org-values-list { border-top: 1px solid var(--org-ink); }
.org-values-list p { display: grid; grid-template-columns: 44px 1fr; gap: 12px; margin: 0; padding: 19px 0; border-bottom: 1px solid var(--org-ink); font: 800 .95rem var(--display); letter-spacing: -.03em; }
.org-values-list span { font: 500 .58rem var(--mono); }
.org-join-banner { background: var(--org-violet); }

@media (max-width: 1050px) {
  .org-hero-inner { grid-template-columns: 1.15fr .85fr; gap: 4%; }
  .org-layer-content.four-column { grid-template-columns: repeat(2,1fr); }
  .org-flow { grid-template-columns: repeat(3,1fr); }
  .org-flow li:nth-child(3) { border-right: 0; }
  .org-flow li:nth-child(n+4) { border-top: 1px solid var(--org-ink); }
  .org-team-grid { grid-template-columns: repeat(3,1fr); }
}

@media (max-width: 760px) {
  .org-hero { min-height: 0; padding-top: 124px; }
  .org-hero-inner { grid-template-columns: 1fr; }
  .org-hero-copy h1 { font-size: 4.55rem; }
  .org-hero-visual { min-height: 420px; margin-top: 42px; border-radius: 110px 0 0; }
  .org-hero-visual img { min-height: 420px; }
  .org-hero-seal { width: 98px; height: 98px; }
  .org-stat-grid { grid-template-columns: 1fr 1fr; margin-top: 42px; }
  .org-stat-grid div { min-height: 105px; border-bottom: 1px solid rgba(255,255,255,.2); }
  .org-stat-grid div:nth-child(even) { border-right: 0; }
  .org-positioning-grid,.org-values-grid { grid-template-columns: 1fr; gap: 38px; }
  .org-section-heading,.org-directory-heading { display: block; }
  .org-section-heading > p,.org-directory-heading > p { margin-top: 26px; }
  .org-layer-stack::before { left: 23px; }
  .org-layer { grid-template-columns: 1fr; gap: 11px; padding-left: 42px; }
  .org-layer-index { min-height: 0; }
  .org-layer-index::after { top: 27px; right: auto; left: -43px; width: 43px; }
  .org-layer-content,.org-layer-content.two-column,.org-layer-content.four-column { grid-template-columns: 1fr; }
  .org-role-card h3 { margin-top: 32px; }
  .org-responsibility-grid { grid-template-columns: 1fr; gap: 0; }
  .org-flow { grid-template-columns: 1fr 1fr; }
  .org-flow li:nth-child(3) { border-right: 1px solid var(--org-ink); }
  .org-flow li:nth-child(even) { border-right: 0; }
  .org-flow li:nth-child(n+3) { border-top: 1px solid var(--org-ink); }
  .org-flow li:nth-child(3)::after { display: grid; }
  .org-flow li:nth-child(even)::after { display: none; }
  .org-directory-controls { grid-template-columns: 1fr; }
  .org-filter-list { justify-content: flex-start; }
  .org-team-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 520px) {
  .org-hero-copy h1 { font-size: 3.75rem; }
  .org-positioning-grid > div,.org-section-heading > div,.org-directory-heading > div,.org-values-grid > div { min-width: 0; }
  .org-positioning h2,.org-section-heading h2,.org-directory-heading h2,.org-values-grid h2 { font-size: 2.7rem; overflow-wrap: anywhere; }
  .org-hero-actions a { width: 100%; }
  .org-stat-grid strong { font-size: 2.15rem; }
  .org-layer { padding-left: 32px; }
  .org-layer-stack::before { left: 15px; }
  .org-layer-index::after { left: -33px; width: 33px; }
  .org-flow { grid-template-columns: 1fr; }
  .org-flow li { min-height: 120px; border-right: 0; border-top: 1px solid var(--org-ink); }
  .org-flow li:first-child { border-top: 0; }
  .org-flow li:not(:last-child)::after { top: auto; right: 17px; bottom: -13px; content: "↓"; }
  .org-team-grid { grid-template-columns: 1fr; }
  .org-team-card { min-height: 390px; }
}

@media (prefers-reduced-motion: reduce) {
  .org-hero-actions a,.org-filter-list button,.org-team-contact a { transition: none; }
}
