/* ===========================================================
   SIRC — Social Impact Research Consortium
   Mock-up stylesheet — placeholder layout, brand colors/fonts
   from SIRC Style Guide.docx
   =========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  --charcoal: #3a2c24;
  --gray: #65605d;
  --orange: #c3661c;
  --green: #378b48;
  --blue: #2574b3;
  --amber: #f0a030;
  --light-gray: #e7e6e5;
  --off-white: #f5f5f4;

  --font-heading: 'Arial Rounded MT Bold', 'Baloo 2', 'Arial Rounded MT', Arial, sans-serif;
  --font-body: 'Segoe UI', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  --max-width: 1100px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--charcoal);
  background: #ffffff;
  line-height: 1.6;
  /* hands horizontal touch gestures to the swipe-navigation script instead
     of the browser's own edge-swipe back/forward gesture, which otherwise
     competes for the touch and makes swipes feel unreliable near the
     edges — vertical scrolling (pan-y) stays native */
  touch-action: pan-y;
}

/* faint swipe hints — shown only on the main nav pages the swipe gesture
   actually works on, pointing only toward a neighbor that exists (see
   nav.js), and only on narrow/touch-sized viewports where swiping applies.
   Also tappable (real <a> links) as a fallback for visitors who'd rather
   tap than swipe — padded out to a proper touch target despite the small
   faint icon, since the icon itself is too small to comfortably tap. */
.swipe-hint {
  display: none;
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--amber);
  opacity: 0.4;
  z-index: 5;
  transition: opacity 0.15s ease;
}
.swipe-hint:hover,
.swipe-hint:active { opacity: 0.8; text-decoration: none; }
.swipe-hint-left { left: 0; }
.swipe-hint-right { right: 0; }
/* keyed on touch capability, not viewport width — a max-width breakpoint
   made the arrows vanish on phones rotated to landscape (same device,
   suddenly a wider viewport that no longer matched), and would incorrectly
   show them to a desktop mouse user who just narrowed their browser window */
@media (hover: none) and (pointer: coarse) {
  .swipe-hint { display: flex; }
}

img { max-width: 100%; display: block; }

a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  color: var(--charcoal);
  line-height: 1.2;
  margin: 0 0 0.5em;
}

h1 { font-size: 2.6rem; }
h2 { font-size: 1.9rem; }
h3 { font-size: 1.3rem; }

p { margin: 0 0 1em; }

.wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- placeholder tag ---------- */
.placeholder-note {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--orange);
  background: #fdf1e6;
  border: 1px dashed var(--orange);
  border-radius: 6px;
  padding: 3px 10px;
  margin-bottom: 10px;
}

/* ---------- header / nav ---------- */
.site-header {
  border-bottom: 1px solid var(--light-gray);
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 10;
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-top: 14px;
  padding-bottom: 14px;
}

.site-logo img { height: 56px; width: auto; }

.site-search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
  max-width: 320px;
  min-width: 0;
  background: var(--off-white);
  border: 1px solid var(--light-gray);
  border-radius: 999px;
  padding: 8px 16px;
}
.site-search svg { flex-shrink: 0; color: var(--gray); }
.site-search input {
  border: none;
  background: transparent;
  outline: none;
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--charcoal);
  width: 100%;
  min-width: 0;
}
.site-search input::placeholder { color: var(--gray); }

.search-results {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 8px;
  background: #fff;
  border: 1px solid var(--light-gray);
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(58, 44, 36, 0.14);
  max-height: 320px;
  overflow-y: auto;
  z-index: 20;
  text-align: left;
}
.search-results.open { display: block; }
.search-results a {
  display: block;
  padding: 10px 16px;
  border-bottom: 1px solid var(--light-gray);
}
.search-results a:last-child { border-bottom: none; }
.search-results a:hover { background: var(--off-white); text-decoration: none; }
.search-results .result-title {
  display: block;
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--charcoal);
}
.search-results .no-results {
  padding: 14px 16px;
  color: var(--gray);
  font-size: 0.85rem;
}

.site-nav ul {
  list-style: none;
  display: flex;
  gap: 20px;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}

.site-nav a {
  color: var(--charcoal);
  font-weight: 600;
  font-size: 0.9rem;
  white-space: nowrap;
}

.site-nav a:hover { color: var(--orange); text-decoration: none; }

.site-nav a.active { color: var(--orange); }

.nav-cta {
  background: var(--orange);
  color: #fff !important;
  padding: 9px 18px;
  border-radius: 999px;
  font-weight: 700 !important;
}
.nav-cta:hover { background: #a8560f; text-decoration: none !important; }

/* hamburger toggle (hidden on desktop) */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 26px;
  height: 18px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
}
.nav-toggle span {
  display: block;
  height: 3px;
  width: 100%;
  background: var(--charcoal);
  border-radius: 2px;
}

/* ---------- buttons ---------- */
.btn {
  display: inline-block;
  padding: 12px 26px;
  border-radius: 999px;
  font-weight: 700;
  font-family: var(--font-body);
  cursor: pointer;
  border: 2px solid transparent;
}

.btn-primary {
  background: var(--orange);
  color: #fff;
}
.btn-primary:hover { background: #a8560f; text-decoration: none; }

.btn-secondary {
  background: transparent;
  border-color: var(--charcoal);
  color: var(--charcoal);
}
.btn-secondary:hover { background: var(--charcoal); color: #fff; text-decoration: none; }

/* ring-colored buttons (Home page) */
.btn-orange { background: var(--orange); color: #fff; }
.btn-blue { background: var(--blue); color: #fff; }
.btn-green { background: var(--green); color: #fff; }
.btn-yellow { background: var(--amber); color: var(--charcoal); }
.btn-orange:hover,
.btn-blue:hover,
.btn-green:hover,
.btn-yellow:hover { filter: brightness(0.9); text-decoration: none; }

/* small icon-only mark above the Home hero title */
.hero-icon-mark {
  height: 72px;
  width: auto;
  margin: 0 auto 24px;
}

/* animated logo centerpiece on the Home hero */
.hero-mark {
  max-width: 520px;
  margin: 0 auto 32px;
}
.hero-mark svg { width: 100%; height: auto; display: block; }

/* logo (left half) / animated tagline (right half) row on the Home hero */
.hero-split {
  display: flex;
  align-items: center;
  gap: 40px;
  margin-top: 24px;
}
.hero-split-left, .hero-split-right {
  flex: 1 1 50%;
  min-width: 0;
}
.hero-split-right { text-align: left; }

.hero-split-lead {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--orange);
  margin: 0 0 10px;
}

.hero-split-list {
  list-style: none;
  padding-left: 0;
  color: var(--charcoal);
  line-height: 1.8;
  margin: 0 0 14px;
}

/* list lines render statically for now — animation tabled below, not deleted,
   in case it gets reactivated later */
.hero-split-list li { opacity: 1; }

/* each list line appears in full, one after another — starts once the logo
   mark's animation has fully finished (dot-4 lands at 2.403s)
.hero-split-list li {
  opacity: 0;
  animation: sirc-fade-line 0.35s ease forwards;
}
.hero-split-list li:nth-child(1) { animation-delay: 2.550s; }
.hero-split-list li:nth-child(2) { animation-delay: 3.050s; }
.hero-split-list li:nth-child(3) { animation-delay: 3.550s; }
.hero-split-list li:nth-child(4) { animation-delay: 4.050s; }
.hero-split-list li:nth-child(5) { animation-delay: 4.550s; }
.hero-split-list li:nth-child(6) { animation-delay: 5.050s; }
.hero-split-list li:nth-child(7) { animation-delay: 5.550s; }
.hero-split-list li:nth-child(8) { animation-delay: 6.050s; }
@keyframes sirc-fade-line { to { opacity: 1; } }
*/

/* ---------- hero ---------- */
.hero {
  background: linear-gradient(180deg, var(--off-white) 0%, #fff 100%);
  padding: 72px 0 64px;
  text-align: center;
}

.hero img.hero-logo { max-width: 460px; width: 100%; margin: 0 auto 28px; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* stays the site's standard fixed h1 size (2.6rem, same as every other page's
   h1) instead of shrinking with viewport width — on narrow screens the line
   break below keeps "Social Impact" / "Research Consortium" from overflowing
   instead of scaling the whole heading down */
.hero-org-name-break { display: none; }
@media (max-width: 600px) {
  .hero-org-name-break { display: inline; }
  /* controlling the gap via the h1's own line-height barely moved the
     needle (its half-leading is only a small fraction of the font size) —
     an explicit margin gives direct, predictable control over the space
     instead. inline-block (not block) so the element still shrinks to fit
     its text — nav.js's width-matching script measures this element's
     rendered width to scale its font-size to match line 1, and a block
     element would report the full container width instead of the text's
     actual width, breaking that calculation. inline-block also still
     centers correctly under the page's text-align:center. */
  .hero-org-name-line2 { display: inline-block; vertical-align: top; margin-top: 6px; }
}

.hero .tagline {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--orange);
  font-size: 1.125rem;
  margin-bottom: 20px;
}

.hero p.lead {
  max-width: 680px;
  margin: 0 0 30px;
  font-size: 1.15rem;
  color: var(--gray);
  text-align: left;
}

.hero-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* ---------- rings divider ---------- */
.rings-divider {
  height: 4px;
  background: linear-gradient(90deg, var(--orange), var(--green), var(--blue));
  border: none;
  margin: 0;
}

/* ---------- nav dropdown (Our Lens section) ---------- */
.has-dropdown { position: relative; }
.dropdown-toggle::after {
  content: "\25BE";
  font-size: 0.7em;
  margin-left: 4px;
}
.dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  padding-top: 10px;
}
.has-dropdown:hover .dropdown-menu,
.has-dropdown:focus-within .dropdown-menu {
  display: block;
}
.dropdown-menu-inner {
  background: #fff;
  border: 1px solid var(--light-gray);
  border-radius: 10px;
  box-shadow: 0 10px 24px rgba(58, 44, 36, 0.14);
  padding: 8px;
  min-width: 190px;
  max-width: 260px;
}
.dropdown-menu-inner a {
  display: block;
  padding: 10px 14px;
  border-radius: 6px;
  color: var(--charcoal);
  font-weight: 600;
  font-size: 0.9rem;
}
.dropdown-menu-inner a:hover { background: var(--off-white); color: var(--orange); text-decoration: none; }
.dropdown-menu-inner a.active { color: var(--orange); }

/* ---------- section ---------- */
.section { padding: 64px 0; }
.section.alt { background: var(--off-white); }
.section-intro { max-width: 720px; margin: 0 auto 40px; text-align: center; }
.section-intro h2 { margin-bottom: 14px; }
.section-intro p { color: var(--gray); font-size: 1.05rem; }

/* ---------- pillar / value / card grid ---------- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
}

.card {
  background: #fff;
  border: 1px solid var(--light-gray);
  border-radius: 14px;
  padding: 28px;
  border-top: 4px solid var(--orange);
}
.card:nth-child(5n+2) { border-top-color: var(--green); }
.card:nth-child(5n+3) { border-top-color: var(--blue); }
.card:nth-child(5n+4) { border-top-color: var(--amber); }
.card:nth-child(5n+5) { border-top-color: var(--gray); }

.card h3 { margin-bottom: 10px; }
.card p { color: var(--gray); margin-bottom: 0; font-size: 0.97rem; }
.card .pillar-num {
  font-family: var(--font-heading);
  color: var(--light-gray);
  font-size: 2.2rem;
  line-height: 1;
  margin-bottom: 8px;
}

/* clickable pillar cards */
a.card {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
a.card:hover {
  box-shadow: 0 8px 20px rgba(58, 44, 36, 0.1);
  transform: translateY(-3px);
  text-decoration: none;
}
.card-link {
  display: inline-block;
  margin-top: 14px;
  color: var(--orange);
  font-weight: 700;
  font-size: 0.88rem;
}
a.card:hover .card-link { text-decoration: underline; }

/* kept in the markup so it's easy to re-enable, but not clickable for now */
a.card.card-disabled {
  pointer-events: none;
  cursor: default;
}

/* page title accent — echoes the logo's smallest ring */
h1.accent-orange { color: var(--orange); }

/* small amber kicker line above section headings — a quieter echo of the
   timeline's rising line, for pages that aren't a literal sequence */
.section-kicker {
  width: 56px;
  height: 3px;
  background: var(--amber);
  border-radius: 2px;
  margin-bottom: 16px;
}

/* ---------- logo marquee (Collaborative Partnership) ---------- */
.logo-marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.logo-marquee-track {
  display: flex;
  width: max-content;
  gap: 28px;
  animation: marquee-scroll 26s linear infinite;
}
.logo-marquee:hover .logo-marquee-track { animation-play-state: paused; }
.logo-slot {
  flex-shrink: 0;
  width: 168px;
  height: 76px;
  border: 1px dashed var(--light-gray);
  border-radius: 10px;
  background: var(--off-white);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray);
  font-size: 0.8rem;
  font-weight: 600;
  text-align: center;
}
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* static partner row — used while there are only a handful of partners;
   swap back to .logo-marquee once there are enough logos to justify scrolling */
.partner-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 28px;
}
.partner-logo-img {
  max-height: 76px;
  width: auto;
  max-width: 200px;
  object-fit: contain;
}
/* TAP//AZ's mark carries a subtitle line ("An affiliate of...") that eats
   into its canvas height, so at a matched max-height it reads smaller than
   the others — bump it up so it feels like the same visual scale */
.partner-logo-img[src*="tapaz"] {
  max-height: 100px;
  max-width: 280px;
}
/* the AZMB Legacy Fund mark is a wide, short lockup — at the default box it's
   width-capped well short of the shared height, so it reads small next to
   Clearinghouse; widen its box so it lands at roughly the same height */
.partner-logo-img[src*="acf-azmb"] {
  max-height: 108px;
  max-width: 312px;
}

/* ---------- timeline (echoes the logo's rising line-and-dots) ---------- */
.timeline {
  position: relative;
  max-width: 640px;
  margin: 0 auto;
}

/* intro line under an h1, used across the content pages (Opportunity,
   Intention, Values, People) — shares .timeline's own max-width/centering
   exactly, so its box's left edge lines up with the dots and its right edge
   lines up with the same right edge as the h3/p content below it (both are
   the same 640px column, not the wider .wrap around it) */
.page-intro {
  max-width: 640px;
  margin: 0 auto 32px;
  text-align: left;
  color: var(--gray);
  font-size: 1.05rem;
}
.timeline::before {
  content: "";
  position: absolute;
  left: 19px;
  top: 20px;
  bottom: 20px;
  width: 2px;
  background: var(--amber);
}
.timeline-item {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 24px;
  padding-bottom: 36px;
  color: inherit;
  text-decoration: none;
}
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item:hover { text-decoration: none; }
.timeline-dot {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--amber);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.95rem;
  border: 3px solid #fff;
}
.timeline-content { padding-top: 6px; pointer-events: auto; cursor: pointer; }
.timeline-content h3 { margin-bottom: 0; }
/* description is collapsed by default — hovering or clicking opens it (via
   nav.js) and it stays open until clicked again, since the parent link is
   pointer-events:none (disabled) */
.timeline-content p {
  color: var(--gray);
  margin: 0;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.35s ease, opacity 0.25s ease, margin-top 0.3s ease;
}
.timeline-content.open p {
  /* generous fixed cap (matches .bio-wrap.open / .reveal-panel's 3000px) —
     240px was tuned for short one-line descriptions and clipped the much
     longer paragraphs now used on Values */
  max-height: 3000px;
  opacity: 1;
  margin-top: 8px;
}

/* kept in the markup so it's easy to re-enable, but not clickable for now */
a.timeline-item.timeline-disabled {
  pointer-events: none;
  cursor: default;
}

@media (max-width: 600px) {
  .timeline::before { left: 15px; }
  .timeline-dot { width: 32px; height: 32px; font-size: 0.85rem; }
  .timeline-item { gap: 16px; }
}

/* static variant: content is always visible, no hover/click reveal — used
   wherever the timeline provides layout (dot + connecting line) only, not
   the Activities-style click-to-reveal description (Premise, Purpose, Network) */
.timeline-static .timeline-content { cursor: default; }
.timeline-static .timeline-content h3 { margin-bottom: 0.5em; }
.timeline-static .timeline-content p {
  max-height: none;
  opacity: 1;
  margin: 0 0 1em;
}
.timeline-static .timeline-content p:last-child { margin-bottom: 0; }

.spaced-list li { margin-bottom: 14px; }
.spaced-list li:last-child { margin-bottom: 0; }
.spaced-list strong { color: inherit; }

/* collapsed by default — hovering the trigger opens the list and it stays
   open (even after the mouse leaves) until clicked, same pattern as the
   Activities timeline / People bios (see nav.js) */
.timeline-content p.reveal-trigger {
  color: var(--orange);
  font-weight: 700;
  cursor: pointer;
  margin: 0;
}
/* indented checklist variant — used for Values on the Purpose page, aligned
   with the bulleted list under Vision (same 20px indent) but with an orange
   checkmark standing in for the bullet, and the trigger text unbolded.
   Named distinctly from the unrelated, unused .values-list rule below
   (leftover from a retired About-page layout) to avoid colliding with its
   flex/gap rules. */
.value-checklist {
  padding-left: 20px;
}
.value-checklist p.reveal-trigger {
  position: relative;
  padding-left: 26px;
  font-weight: 400;
  color: var(--orange);
  line-height: 1.8;
}
.value-checklist p.reveal-trigger::before {
  content: "\2713";
  position: absolute;
  left: 0;
  color: var(--orange);
  font-weight: 700;
}
.value-checklist .reveal-panel {
  padding-left: 26px;
}
/* the description's own bottom margin would double up with the panel's
   margin-bottom below (overflow:hidden traps a child's margin inside its
   box), so it's zeroed here and the panel's own margin-bottom carries the
   full gap instead — kept equal to the panel's existing margin-top (16px,
   set on .reveal-wrap.open .reveal-panel) so the space above and below the
   open description matches exactly */
.value-checklist .reveal-panel p { margin: 0; }
.value-checklist .reveal-wrap.open .reveal-panel { margin-bottom: 16px; }
/* suppress the browser's default tap-highlight overlay — without this,
   tapping anywhere in the clickable wrap (including list items scrolled
   past on mobile) flashes a translucent blue box over that element */
.reveal-wrap, .reveal-wrap * {
  -webkit-tap-highlight-color: transparent;
}
.reveal-panel {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  margin-top: 0 !important;
  transition: max-height 0.4s ease, opacity 0.3s ease, margin-top 0.3s ease;
}
.reveal-wrap.open .reveal-panel {
  /* generous fixed cap (matches .bio-wrap.open's 3000px) rather than a value
     tuned to one viewport — on mobile the same text wraps into far more
     lines, and a tighter cap (900px) clipped the last definition */
  max-height: 3000px;
  opacity: 1;
  margin-top: 16px !important;
}

/* people variant: a circular headshot stands in for the numbered dot (Network).
   Widened from the shared 640px .timeline column (headshots and bios felt
   cramped at that width) — both edges move outward from center by the same
   amount, so it stays centered in the page rather than shifting lopsided. */
.timeline-people {
  max-width: 800px;
}
.people-section-heading {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}
.timeline-people .timeline-dot {
  width: 154px;
  height: 154px;
  background: none;
  border: none;
  padding: 0;
}
.timeline-people .timeline-dot .avatar-frame { width: 154px; height: 154px; margin: 0; }
.timeline-people::before { display: none; }
.timeline-people .timeline-content { padding-top: 0; }
.timeline-people .timeline-content h3 { margin-bottom: 2px; color: var(--orange); }
.page-intro-people { max-width: 800px; padding-left: 0; }

/* Get Involved page — no dots/timeline to align past, so the intro shares
   the form's own 640px box, inset by the form's 6px border width so the
   text lines up with the inside edge of the border rather than its outside */
.page-intro-connect { padding-left: 11px; padding-right: 11px; }
@media (max-width: 600px) {
  .timeline-people .timeline-dot,
  .timeline-people .timeline-dot .avatar-frame { width: 115px; height: 115px; }
  .timeline-people::before { left: 35px; }
}

/* breadcrumb back-link on subpages */
.breadcrumb {
  display: block;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--gray);
  margin-bottom: 6px;
}
.breadcrumb:hover { color: var(--orange); }

/* resource cards (Best Practices page) */
.resource-tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 3px 10px;
  border-radius: 999px;
  margin-bottom: 12px;
}
.resource-tag.internal { background: #eaf3ec; color: var(--green); }
.resource-tag.external { background: #eaf1f8; color: var(--blue); }

/* ---------- values list (About page) ---------- */
.values-list { display: flex; flex-direction: column; gap: 18px; }

.value-item {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 20px;
  padding: 22px 0;
  border-bottom: 1px solid var(--light-gray);
}
.value-item:last-child { border-bottom: none; }
.value-item h3 { color: var(--orange); margin: 0; }
.value-item p { color: var(--gray); margin: 0; }

@media (max-width: 700px) {
  .value-item { grid-template-columns: 1fr; }
}

/* ---------- philosophy / coming soon block ---------- */
.coming-soon-box {
  border: 2px dashed var(--light-gray);
  border-radius: 16px;
  padding: 40px;
  text-align: center;
  color: var(--gray);
  background: var(--off-white);
}
.coming-soon-box h3 { color: var(--charcoal); }

/* ---------- team ---------- */
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 32px;
}

.team-card {
  text-align: center;
}
.avatar-frame {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto 18px;
  border: 4px solid var(--amber);
}
.avatar-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
  display: block;
}
/* each source photo frames the face differently, so the crop is tuned per image */
.avatar-frame img[src*="chase-treisman"] { object-position: center 38%; }
.avatar-frame img[src*="andrew-gordon"] { object-position: center 12%; }
.avatar-frame img[src*="doug-bystry"] { object-position: center 20%; }
.avatar-frame img[src*="yves-mombeleur"] { object-position: center 10%; }
.team-card h3 { margin-bottom: 2px; }
.role {
  color: var(--charcoal);
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 2px;
}
.org {
  color: var(--charcoal);
  font-size: 0.9rem;
  margin-bottom: 12px;
}
.team-card p.bio { color: var(--gray); font-size: 0.92rem; text-align: left; }

.bio-wrap {
  position: relative;
  max-height: 7.36rem; /* 5 lines at font-size 0.92rem, line-height 1.6 */
  overflow: hidden;
  cursor: pointer;
  transition: max-height 0.4s ease;
}
.bio-wrap::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 44px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff);
  pointer-events: none;
  transition: opacity 0.3s ease;
}
/* hovering opens the bio and it stays open (even after the mouse leaves)
   until clicked — click always toggles (see nav.js) */
.bio-wrap.open {
  max-height: 3000px;
}
.bio-wrap.open::after {
  opacity: 0;
}
.bio-hint {
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--orange);
  margin-top: 6px;
}
.bio-wrap.open + .bio-hint {
  display: none;
}

/* ---------- form (Connect page) ---------- */
.form-box {
  max-width: 640px;
  margin: 0 auto;
  background: #fff;
  border: 6px solid var(--amber);
  border-radius: 16px;
  padding: 40px;
}

/* honeypot spam trap — invisible to real visitors, left blank; bots that
   auto-fill every field trip it and get silently dropped on submit */
.hp-field {
  position: absolute;
  left: -9999px;
  top: -9999px;
  height: 0;
  width: 0;
  overflow: hidden;
}

.form-row { margin-bottom: 20px; }
.form-row label {
  display: block;
  font-weight: 600;
  margin-bottom: 6px;
  font-size: 0.92rem;
}
.form-row input,
.form-row select,
.form-row textarea {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--light-gray);
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--charcoal);
  background: var(--off-white);
}
.form-row textarea { resize: vertical; min-height: 100px; }

/* custom multi-select: click an option to select, double-click to remove */
.multiselect { position: relative; }
.multiselect-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--light-gray);
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--charcoal);
  background: var(--off-white);
  cursor: pointer;
}
.multiselect-toggle svg { flex-shrink: 0; color: var(--gray); margin-left: 8px; }
.multiselect-error .multiselect-toggle { border-color: var(--orange); }
.field-error { border-color: var(--orange) !important; }
.multiselect-toggle-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}
.multiselect-panel {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 8px;
  background: #fff;
  border: 1px solid var(--light-gray);
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(58, 44, 36, 0.14);
  max-height: 280px;
  overflow-y: auto;
  z-index: 20;
  padding: 6px;
}
.multiselect-panel.open { display: block; }
.multiselect-option {
  position: relative;
  padding: 10px 30px 10px 12px;
  border-radius: 8px;
  font-size: 0.92rem;
  color: var(--charcoal);
  cursor: pointer;
  user-select: none;
}
.multiselect-option:hover { background: var(--off-white); }
.multiselect-option.selected {
  background: var(--off-white);
  color: var(--orange);
  font-weight: 700;
}
.multiselect-option.selected::after {
  content: "\2713";
  position: absolute;
  top: 10px;
  right: 12px;
}

/* two-line variant with a description under the label (currently just
   Sector) — the checkmark above is positioned absolutely so it doesn't
   land awkwardly below the description text */
.multiselect-option-label { display: block; }
.multiselect-option-desc {
  display: block;
  font-size: 0.78rem;
  color: var(--gray);
  font-weight: 400;
  margin-top: 2px;
}
.multiselect-option.selected .multiselect-option-desc {
  color: var(--gray);
  font-weight: 400;
}
.multiselect-other-input {
  width: 100%;
  margin-top: 4px;
  padding: 9px 12px;
  border: 1px solid var(--light-gray);
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--charcoal);
  background: var(--off-white);
}
.multiselect-hint {
  font-size: 0.78rem;
  color: var(--gray);
  margin: 6px 0 0;
}

.form-disclaimer {
  font-size: 0.82rem;
  color: var(--gray);
  margin-top: 14px;
  text-align: center;
}

/* ---------- research empty state ---------- */
.empty-state {
  text-align: center;
  padding: 80px 24px;
}
.empty-state .rings-icon { width: 90px; margin: 0 auto 24px; }
.empty-state h2 { margin-bottom: 14px; }
.empty-state p { color: var(--gray); max-width: 560px; margin: 0 auto 28px; }

/* ---------- footer ---------- */
.site-footer {
  background: var(--charcoal);
  color: var(--off-white);
  padding: 32px 0 18px;
  margin-top: 28px;
}
.site-footer .wrap {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 24px;
}
.footer-cta { flex-shrink: 0; }
.footer-cta .btn { white-space: nowrap; }
.site-footer h4 {
  color: #fff;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 8px;
}
.site-footer p, .site-footer a {
  color: var(--light-gray);
  font-size: 0.88rem;
  line-height: 1.3;
}
.site-footer a:hover { color: var(--amber); }

.footer-email { margin: 0 0 12px; }

.footer-partners {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.footer-partners a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.footer-partners svg { flex-shrink: 0; }

.footer-bottom {
  max-width: var(--max-width);
  margin: 18px auto 0;
  padding: 12px 24px 0;
  border-top: 1px solid rgba(255,255,255,0.15);
  font-size: 0.8rem;
  color: var(--gray);
}

/* ---------- responsive nav ---------- */
/* Below this width the nav links no longer reliably fit on one line
   next to the logo, so swap them for a hamburger-triggered panel
   instead of letting them wrap to a second line. */
@media (max-width: 860px) {
  .nav-toggle { display: flex; }

  .site-search { max-width: 90px; padding: 8px 10px; }

  .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border-top: 1px solid var(--light-gray);
    border-bottom: 1px solid var(--light-gray);
    box-shadow: 0 14px 24px rgba(58, 44, 36, 0.1);
  }
  .site-nav.open { display: block; }

  .site-nav ul {
    flex-direction: column;
    gap: 0;
    padding: 8px 0;
  }
  .site-nav li { width: 100%; }
  .site-nav a { display: block; padding: 14px 24px; white-space: normal; }
  .site-nav a.nav-cta { display: inline-block; padding: 9px 18px; margin: 8px 24px; }

  /* once the logo/text row stacks: gap and the mark's own bottom margin are
     both halved (40px->20px, 32px->16px) to close up the excess vertical
     space; text left-aligns to the orange ring's own left edge rather than
     the box edge, so it lines up with the logo instead of the logo (centered,
     capped at 520px) looking disjointed from edge-hung text. 0.0854 is the
     ring's measured left edge as a fraction of the mark's rendered width
     (getBoundingClientRect on #ring-orange vs .hero-mark — includes its
     stroke and round linecap, so more reliable than computing it from the
     path's raw center/radius/stroke-width by hand). min(520px, 100%) mirrors
     .hero-mark's own max-width so this stays accurate whether the mark is
     still full-width or already capped. */
  .hero-split { flex-direction: column; gap: 20px; }
  .hero-mark { margin-bottom: 16px; }
  .hero-split-right {
    text-align: left;
    padding-left: calc((100% - min(520px, 100%)) / 2 + min(520px, 100%) * 0.0854);
  }

  /* the Our Lens dropdown becomes an always-expanded indented list
     instead of a hover panel, since there's no hover on touch */
  .has-dropdown .dropdown-menu {
    display: block;
    position: static;
    padding-top: 0;
  }
  .dropdown-toggle::after { display: none; }
  .dropdown-menu-inner {
    border: none;
    box-shadow: none;
    border-radius: 0;
    padding: 0 0 8px 24px;
    min-width: 0;
  }
  .dropdown-menu-inner a { padding: 10px 0; }
}

/* ---------- print ---------- */
/* Printing was rendering the mobile layout (hamburger nav, stacked hero,
   collapsed accordion text) because print engines compute the responsive
   breakpoints against their own printable-area width, which can land
   below 860px depending on the browser/OS print driver. These rules force
   the desktop layout back regardless of that computed width, and expand
   every hover/click-to-reveal section so its full text prints instead of
   only what happened to be open on screen. */
@media print {
  @page {
    size: letter;
    margin: 0.5in;
  }

  /* desktop nav, unconditionally */
  .nav-toggle { display: none !important; }
  .site-search { display: none !important; }
  .site-nav {
    display: block !important;
    position: static !important;
    box-shadow: none !important;
    border: none !important;
  }
  .site-nav ul { flex-direction: row !important; gap: 20px !important; }
  .site-nav li { width: auto !important; }
  .site-nav a { display: inline !important; padding: 0 !important; }
  .site-header { position: static !important; }

  /* desktop hero layout, unconditionally */
  .hero-split { flex-direction: row !important; gap: 40px !important; }
  .hero-split-right { padding-left: 0 !important; }
  .hero-org-name-break { display: none !important; }
  .hero-org-name-line2 { font-size: inherit !important; }

  /* swipe hints and the mobile nav-dropdown expansion are screen-only */
  .swipe-hint { display: none !important; }

  /* expand every hover/click-to-reveal section so the full content prints,
     not just whatever was left open on screen */
  .timeline-content p,
  .reveal-panel,
  .bio-wrap {
    max-height: none !important;
    opacity: 1 !important;
    overflow: visible !important;
  }
  .bio-wrap::after { display: none !important; }
  .bio-hint { display: none !important; }

  /* multiselect panels default to display:none (only shown via a JS-toggled
     .open class), so this needs an explicit display, not just the
     max-height/opacity overrides above */
  .multiselect-panel {
    display: block !important;
    position: static !important;
    box-shadow: none !important;
    border: none !important;
    max-height: none !important;
    overflow: visible !important;
  }
  .multiselect-toggle { display: none !important; }
  .multiselect-hint { display: none !important; }

  /* the footer was getting cut off mid-block across a page break, and its
     dark background + light text is only legible if the browser's "print
     background graphics" option happens to be on — printing it as plain
     dark text on white instead sidesteps that entirely, and keeping it
     together as one unit stops it splitting across two pages */
  .site-footer {
    break-inside: avoid;
    page-break-inside: avoid;
    background: #fff !important;
    border-top: 1px solid var(--light-gray);
    margin-top: 24px;
    padding-top: 16px;
  }
  .site-footer h4,
  .site-footer p,
  .site-footer a,
  .footer-bottom {
    color: var(--charcoal) !important;
  }
  .footer-bottom { border-top-color: var(--light-gray) !important; }
}