/* GTG org chart. All motion lives in assets/js/main.js (GSAP); CSS only describes states.
   Connector lines read CSS variables (--draw, --stub, --drop) inside transform so GSAP can draw them. */

@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-var-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("../fonts/manrope-var.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}

:root {
  --bg: #0b1210;
  --surface: #131d19;
  --surface-2: #1a2621;
  --avatar: #24322c;
  --line: #22312b;
  --line-2: #33443d;
  --wire: #6f7f78;
  --ink: #f2f5f3;
  --muted: #9aa8a2;
  --green-1: #8de59c;
  --green-2: #2fae57;
  --green: #6fd986;
  --slate-1: #c0c9ce;
  --slate-2: #7d8a93;
  --on-accent: #07110c;

  --gutter: 16px;
  --max: 1720px;
  --av: 56px;          /* team avatar */
  --av-lead: 72px;
  --av-staff: 60px;
  --team-gap: 14px;
  --lead-w: 340px;
  --staff-w: 300px;
  --lead-gap: 48px;
  --drop: 36px;
  --col-gap: 14px;
}

html {
  background: var(--bg);
  color: var(--ink);
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  font: 400 15px/1.5 "Manrope", system-ui, sans-serif;
  font-variant-numeric: lining-nums;
}
*, *::before, *::after { box-sizing: border-box; }
img, svg { display: block; max-width: 100%; }

.sr {
  position: absolute; left: 0; top: 0; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: var(--gutter); top: -60px; z-index: 10;
  padding: 10px 16px; border-radius: 8px;
  background: var(--green); color: var(--on-accent); font-weight: 700; text-decoration: none;
}
.skip:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }

/* ------------------------------------------------------------------ masthead */
.masthead {
  max-width: var(--max);
  margin: 0 auto;
  padding: 40px var(--gutter) 0;
  display: grid;
  gap: 28px;
}
.title {
  margin: 0;
  font-family: "Archivo", sans-serif;
  font-stretch: 75%;
  font-weight: 800;
  font-size: clamp(2rem, 11vw, 5.6rem);  /* a 2.6rem floor made "Organizational" 10px too wide at 320 */
  line-height: 1.05;
  letter-spacing: 0.005em;
  text-transform: uppercase;
}
.title__line { display: inline-block; overflow: hidden; vertical-align: top; }
.title__word { display: inline-block; }
.title__word--accent { color: var(--green); }
.subtitle {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
}
.subtitle span { white-space: nowrap; }

.find { width: min(100%, 380px); }
.find__label { display: block; margin-bottom: 8px; color: var(--muted); font-size: 13px; font-weight: 600; }
.find__row {
  display: flex; align-items: center;
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: 12px;
}
.find__row:focus-within { border-color: var(--green); }
.find__icon { flex: none; width: 18px; height: 18px; margin-left: 14px; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; }
.find__input {
  flex: 1; min-width: 0;
  padding: 12px 10px;
  border: 0; background: transparent; color: var(--ink);
  font: 500 15px/1.3 "Manrope", sans-serif;
}
.find__input:focus { outline: none; }
.find__input::placeholder { color: #7f8d87; }
.find__next {
  flex: none; margin: 5px; padding: 8px 14px;
  border: 0; border-radius: 8px;
  background: var(--green); color: var(--on-accent);
  font: 700 13px/1 "Manrope", sans-serif; cursor: pointer;
}
.find__next:disabled { background: var(--surface-2); color: var(--muted); cursor: default; }
.find__status { min-height: 1.5em; margin: 8px 0 0; color: var(--muted); font-size: 13px; }

/* ------------------------------------------------------------------ person card */
/* Avatar overlaps the left end of a coloured name tab; an optional panel underneath holds the account. */
.person { position: relative; z-index: 1; --size: var(--av); }
.person--lead { --size: var(--av-lead); }
.person--staff { --size: var(--av-staff); }
.person__head { position: relative; min-height: var(--size); }
.person__photo {
  position: absolute; left: 0; top: 0; z-index: 2;
  width: var(--size); height: var(--size);
  border-radius: 50%;
  border: 3px solid var(--bg);
  background: var(--avatar);
  object-fit: cover;
}
.person__photo--initials {
  display: grid; place-items: center;
  color: var(--green);
  font: 800 calc(var(--size) * 0.34) / 1 "Archivo", sans-serif;
  font-stretch: 80%;
  letter-spacing: 0.02em;
}
.person__photo--vacant {
  display: grid; place-items: center;
  background: var(--bg);
  border: 1.5px dashed var(--wire);
}
.person__photo--vacant svg { width: 52%; height: 52%; fill: none; stroke: var(--muted); stroke-width: 1.6; stroke-linecap: round; }
.person__tab {
  display: flex; flex-direction: column; justify-content: center;
  min-height: calc(var(--size) * 0.72);
  margin: calc(var(--size) * 0.14) 0 0 calc(var(--size) / 2 + 1px);
  padding: 7px 12px 8px calc(var(--size) / 2 + 10px);
  border-radius: 8px;
  background: linear-gradient(100deg, var(--slate-1), var(--slate-2));
  color: var(--on-accent);
}
.person--lead .person__tab,
.person--mgr .person__tab { background: linear-gradient(100deg, var(--green-1), var(--green-2)); }
.person__name {
  font-family: "Archivo", sans-serif;
  font-stretch: 75%;
  font-weight: 800;
  font-size: 15px;
  line-height: 1.08;
  letter-spacing: 0.015em;
  text-transform: uppercase;
}
.person__role { margin-top: 3px; font-size: 12px; font-weight: 600; line-height: 1.3; }
.person--lead .person__name { font-size: 19px; }
.person--lead .person__role { font-size: 13px; }

.is-vacant .person__tab { background: transparent; border: 1.5px dashed var(--wire); color: var(--ink); }
.is-vacant .person__name { color: var(--ink); }
.is-vacant .person__role { color: var(--muted); }

.person__desc {
  margin: 0 0 0 calc(var(--size) / 2 - 1px);
  padding: 8px 12px 9px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 2px solid var(--wire);
  border-radius: 0 8px 8px 0;
  font-size: 12.5px;
  line-height: 1.4;
}
.person__acct { display: block; font-weight: 700; }
.person__area { display: block; margin-top: 2px; color: var(--muted); }

/* search: non-matches sink under a veil of page colour (opacity on the card itself would let the trace show
   through it); --dim is set by main.js */
.person::after {
  content: "";
  position: absolute; inset: -4px; z-index: 3;
  border-radius: 10px;
  background: var(--bg);
  opacity: var(--dim, 0);
  pointer-events: none;
}
/* the whole card opens the details dialog */
.person__open {
  position: absolute; inset: 0; z-index: 4;
  padding: 0; border: 0; background: transparent;
  cursor: pointer;
}
.person__open:focus-visible { outline: none; }
.person:has(.person__open:hover) .person__tab { outline: 2px solid var(--wire); outline-offset: 2px; }
.person:has(.person__open:focus-visible) .person__tab { outline: 2px solid var(--green); outline-offset: 3px; }
/* search: the card being shown */
.person.is-current .person__tab { outline: 2px solid var(--ink); outline-offset: 3px; }

/* ------------------------------------------------------------------ leadership */
.lead {
  position: relative;
  display: grid;
  row-gap: 26px;
  max-width: var(--max);
  margin: 56px auto 0;
  padding-inline: var(--gutter);
  /* the staff entrance starts 20px to the right; reset off-screen, it widened the phone page by 4px */
  overflow-x: clip;
}
.lead__trunk {
  position: absolute;
  left: calc(var(--gutter) + var(--av-lead) / 2 - 1px);
  top: calc(var(--av-lead) / 2);
  bottom: calc(var(--av-staff) / 2);
  width: 2px;
  background: var(--wire);
  transform-origin: 50% 0;
}
.lead__boss { position: relative; max-width: var(--lead-w); }
.lead__staff {
  position: relative;
  max-width: var(--staff-w);
  margin-left: calc(var(--av-lead) / 2 + 26px);
}
.lead__staff::before {
  content: "";
  position: absolute;
  top: calc(var(--av-staff) / 2 - 1px);
  left: -26px;
  width: 26px;
  height: 2px;
  background: var(--wire);
  transform: scaleX(var(--stub, 1));
  transform-origin: 0 50%;
}

/* ------------------------------------------------------------------ regions */
.regions {
  max-width: var(--max);
  margin: 0 auto;
  padding-inline: var(--gutter);
}
.regions__heading {
  margin: 72px 0 16px;
  font: 800 1.75rem/1.1 "Archivo", sans-serif;
  font-stretch: 75%;
  letter-spacing: 0.02em;
  text-align: center;
  text-transform: uppercase;
}
.jump ul {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
  width: fit-content; max-width: 100%;
  margin: 0 auto; padding: 0; list-style: none;
}
.jump a {
  display: inline-block;
  padding: 7px 14px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  color: var(--ink);
  font-size: 13px; font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
}
.jump a:hover { border-color: var(--green); color: var(--green); }

.regions__grid {
  position: relative;
  display: grid;
  gap: 48px;
  margin-top: 36px;
}
.regions__bus { display: none; }
.region { position: relative; scroll-margin-top: 24px; }
.region__name {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin: 0 0 16px;
  padding: 6px 6px 6px 16px;
  border: 1.5px solid var(--green-2);
  border-radius: 999px;
  background: var(--bg);
  color: var(--green);
  font: 800 15px/1.1 "Archivo", sans-serif;
  font-stretch: 80%;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.region__count {
  display: grid; place-items: center;
  min-width: 26px; height: 26px; padding: 0 7px;
  border-radius: 999px;
  background: var(--green);
  color: var(--on-accent);
  font-size: 13px; letter-spacing: 0;
}
.team { display: grid; gap: var(--team-gap); margin: 0; padding: 0; list-style: none; }
.team > li { position: relative; }
/* the trace: avatar centre to the next avatar centre; it runs along each panel's left border */
.team > li::after {
  content: "";
  position: absolute; z-index: 0;
  left: calc(var(--av) / 2 - 1px);
  top: calc(var(--av) / 2);
  bottom: calc(-1 * (var(--team-gap) + var(--av) / 2));
  width: 2px;
  background: var(--wire);
  transform: scaleY(var(--draw, 1));
  transform-origin: 50% 0;
}
.team > li:last-child::after { bottom: 0; }
.team > li:last-child:not(:has(.person__desc))::after { display: none; }

/* ------------------------------------------------------------------ details dialog */
/* The <dialog> fills the screen; its own scrim and panel are what main.js fades/moves (::backdrop can't be tweened). */
html.is-modal { overflow: hidden; }
.pm {
  position: fixed; inset: 0;
  width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: 16px;
  border: 0; background: transparent; color: var(--ink);
}
.pm[open] { display: grid; place-items: center; }
.pm::backdrop { background: transparent; }
.pm__scrim { position: fixed; inset: 0; background: rgba(4, 8, 6, 0.8); }
.pm__panel {
  position: relative;
  width: min(100%, 560px);
  max-height: calc(100dvh - 32px);
  overflow: auto;
  padding: 24px 20px 20px;
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
  --size: 88px;
}
.pm__close {
  position: absolute; top: 12px; right: 12px; z-index: 3;
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border: 1px solid var(--line-2); border-radius: 10px;
  background: var(--surface); color: var(--ink);
  cursor: pointer;
}
.pm__close:hover { background: var(--surface-2); }
.pm__close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

.pm__head { position: relative; min-height: var(--size); margin: 30px 0 0; }
.pm__photo {
  position: absolute; left: 0; top: 0; z-index: 2;
  width: var(--size); height: var(--size);
  border-radius: 50%;
  border: 4px solid var(--surface);
  background: var(--avatar);
  overflow: hidden;
}
.pm__photo img { width: 100%; height: 100%; object-fit: cover; }
.pm__photo--initials {
  display: grid; place-items: center;
  color: var(--green);
  font: 800 calc(var(--size) * 0.34) / 1 "Archivo", sans-serif; font-stretch: 80%;
}
.pm__photo--vacant { display: grid; place-items: center; background: var(--surface); border: 1.5px dashed var(--wire); }
.pm__photo--vacant svg { width: 50%; height: 50%; fill: none; stroke: var(--muted); stroke-width: 1.6; stroke-linecap: round; }
.pm__tab {
  min-height: calc(var(--size) * 0.76);
  margin: calc(var(--size) * 0.12) 0 0 calc(var(--size) / 2 + 1px);
  padding: 10px 14px 11px calc(var(--size) / 2 + 14px);
  border-radius: 10px;
  background: linear-gradient(100deg, var(--slate-1), var(--slate-2));
  color: var(--on-accent);
  display: flex; flex-direction: column; justify-content: center;
}
.pm[data-kind="lead"] .pm__tab,
.pm[data-kind="mgr"] .pm__tab { background: linear-gradient(100deg, var(--green-1), var(--green-2)); }
.pm[data-kind="vacant"] .pm__tab { background: transparent; border: 1.5px dashed var(--wire); color: var(--ink); }
.pm__name {
  margin: 0;
  font: 800 22px/1.05 "Archivo", sans-serif; font-stretch: 75%;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
.pm__role { margin: 4px 0 0; font-size: 13.5px; font-weight: 600; line-height: 1.3; }

.pm__facts { display: grid; gap: 4px; margin: 22px 0 0; font-size: 14.5px; }
.pm__facts dt, .pm__label {
  color: var(--muted);
  font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
}
.pm__facts dt:not(:first-child) { margin-top: 10px; }
.pm__facts dd { margin: 0; }
.pm__acct { display: block; font-weight: 700; }
.pm__area { display: block; color: var(--muted); }
.pm__offices { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.pm__offices li { display: flex; align-items: baseline; gap: 10px; }
.pm__code {
  flex: none;
  padding: 2px 7px; border-radius: 6px;
  background: var(--surface-2); color: var(--ink);
  font-size: 12px; font-weight: 700; letter-spacing: 0.04em;
}

.pm__contact { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.pm__label { margin: 0 0 4px; }
.pm__lines { margin: 0; padding: 0; list-style: none; }
.pm__lines li {
  display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.pm__lines li > div { min-width: 0; }
.pm__lines li:last-child { border-bottom: 0; }
.pm__lines li.pm__none { display: block; color: var(--muted); font-size: 14px; }
.pm__lines svg { width: 20px; height: 20px; fill: none; stroke: var(--muted); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pm__k { display: block; color: var(--muted); font-size: 12px; font-weight: 600; }
/* anywhere, not break-word: break-word left the domain unbreakable on phones and the panel cut it off.
   The <wbr> before "@" (main.js) is still the first break taken. */
.pm__v { display: block; font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
/* phones: the action button moves up beside the label, so the value gets the full width */
@media (max-width: 479px) {
  .pm__lines li { grid-template-areas: "icon k act" "icon v v"; row-gap: 4px; }
  .pm__lines li > div { display: contents; }
  .pm__lines li > svg { grid-area: icon; align-self: start; margin-top: 2px; }
  .pm__k { grid-area: k; }
  .pm__v { grid-area: v; justify-self: start; max-width: 100%; }
  .pm__lines li > :last-child { grid-area: act; }
  .pm__act { padding: 5px 10px; }
}
a.pm__v { color: var(--ink); text-decoration: underline; text-decoration-color: var(--wire); text-underline-offset: 3px; }
a.pm__v:hover { color: var(--green); text-decoration-color: currentColor; }
.pm__act {
  padding: 7px 12px;
  border: 1px solid var(--line-2); border-radius: 8px;
  background: transparent; color: var(--ink);
  font: 600 13px/1.2 "Manrope", sans-serif;
  white-space: nowrap; text-decoration: none; cursor: pointer;
}
.pm__act:hover { border-color: var(--green); color: var(--green); }

/* ------------------------------------------------------------------ back to top (phones, after a search; main.js shows it) */
.totop {
  position: fixed; z-index: 20;
  right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 10px 16px 10px 12px;
  border: 0; border-radius: 999px;
  background: var(--green); color: var(--on-accent);
  font: 700 14px/1 "Manrope", sans-serif; white-space: nowrap;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  cursor: pointer;
}
.totop[hidden] { display: none; }
.totop svg { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
@media (min-width: 900px) { .totop { display: none; } }

/* ------------------------------------------------------------------ footer */
.foot {
  max-width: var(--max);
  margin: 88px auto 0;
  padding: 24px var(--gutter) 40px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}
.foot p { margin: 0; }

/* ================================================================== breakpoints (after the base rules) */
@media (min-width: 640px) {
  :root { --gutter: 32px; }
  .pm__panel { padding: 28px 28px 24px; --size: 104px; }
  .pm__name { font-size: 26px; }
  .pm__facts { grid-template-columns: max-content minmax(0, 1fr); gap: 12px 24px; }
  .pm__facts dt:not(:first-child) { margin-top: 0; }
  .pm__facts dt { padding-top: 3px; }
  .regions__grid { grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 48px 24px; }
}

@media (min-width: 900px) {
  :root { --av-lead: 84px; --av-staff: 64px; }
  .masthead { padding-top: 56px; }
  .person--lead .person__name { font-size: 21px; }
  /* leaders on a centred trunk, staff branch off to its left */
  .lead { grid-template-columns: 1fr var(--lead-w) 1fr; column-gap: var(--lead-gap); margin-top: 72px; }
  .lead__trunk { left: 50%; margin-left: -1px; }
  .lead__boss { grid-column: 2; grid-row: var(--row); max-width: none; }
  .lead__staff { grid-column: 1; grid-row: var(--row); justify-self: end; width: 100%; margin-left: 0; }
  .lead__staff::before { left: 100%; width: calc(var(--lead-gap) + var(--lead-w) / 2); transform-origin: 100% 50%; }
}

@media (min-width: 1200px) {
  /* title and search side by side only once "ORGANIZATIONAL" (min-content) + search fit */
  .masthead { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
}

@media (min-width: 1400px) {
  :root { --av: 50px; --gutter: 40px; }
  .person__name { font-size: 14px; }
  /* one row of seven regions hanging from a bus, like the source chart */
  .lead { padding-bottom: calc(var(--drop) + 8px); }
  .lead__trunk { bottom: 0; }
  .regions__heading { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); }
  .jump { display: none; }
  .regions__grid {
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0 var(--col-gap);
    margin-top: 0;
    padding-top: var(--drop);
  }
  .regions__bus {
    display: block;
    position: absolute; top: 0;
    left: calc((100% - 6 * var(--col-gap)) / 14);
    right: calc((100% - 6 * var(--col-gap)) / 14);
    height: 2px;
    background: var(--wire);
  }
  .region::before {
    content: "";
    position: absolute;
    top: calc(-1 * var(--drop)); left: 50%;
    width: 2px; height: var(--drop); margin-left: -1px;
    background: var(--wire);
    transform: scaleY(var(--drop-s, 1));
    transform-origin: 50% 0;
  }
  .region__name { font-size: 14px; padding-left: 12px; }
}