:root {
  --ink: #16130F;
  --charcoal: #2B2620;
  --orange: #FF7A1A;
  --gold: #FFC93C;
  --ember: #FF4433;
  --cream: #F5F7FA;
  --paper: #FFFFFF;
  --grey: #736C5E;
  --border: #E3E7EE;
  --max: 1120px;
  /* --orange is a fill colour: at 14px on cream it only reaches 2.6:1, so it
     must never be used for text. --orange-text is the same hue darkened to
     5.0:1 on cream and 5.5:1 on white. Likewise --grey fails on the dark
     footer, so --grey-on-dark carries small print there at 6.0:1. */
  --orange-text: #B34700;
  --grey-on-dark: #9A9184;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: "Inter", -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .brand-word {
  font-family: "Sora", sans-serif;
  margin: 0;
}

a { color: inherit; }

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

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

/* header */
.site-header {
  position: sticky; top: 0; z-index: 20;
  background: var(--cream);
  border-bottom: 1px solid var(--border);
}
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 16px; padding-bottom: 16px;
}
.brand-link { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand-mark { width: 40px; height: 40px; flex-shrink: 0; }
.brand-word { font-weight: 700; font-size: 22px; color: var(--ink); }
.brand-tagline { font-size: 10.5px; letter-spacing: .1em; color: var(--orange-text); text-transform: uppercase; font-weight: 600; }

.nav { display: flex; gap: 28px; align-items: center; }
.nav a {
  text-decoration: none; font-weight: 600; font-size: 14.5px; color: var(--charcoal);
  padding: 6px 0; border-bottom: 2px solid transparent;
}
.nav a.active, .nav a:hover { border-bottom-color: var(--orange); }
.nav-toggle { display: none; }

@media (max-width: 760px) {
  .nav { position: fixed; inset: 68px 0 0 0; background: var(--cream); flex-direction: column; padding: 28px 24px; gap: 20px; transform: translateX(100%); transition: transform .25s ease; }
  .nav.open { transform: translateX(0); }
  .nav-toggle { display: block; background: none; border: none; font-family: "Sora"; font-weight: 600; font-size: 14px; cursor: pointer; color: var(--ink); }
}

/* buttons */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: "Sora", sans-serif; font-weight: 600; font-size: 14.5px;
  background: var(--ink); color: var(--cream); border: none; border-radius: 999px;
  padding: 13px 26px; text-decoration: none; cursor: pointer;
}
/* Every variant restates BOTH background and colour on :hover. A modifier like
   .btn-gradient (0,1,0) loses to .btn:hover (0,2,0), so without its own hover
   rule the background flipped to dark while the dark text stayed - making the
   label invisible. Each variant's :hover must therefore sit after .btn:hover
   and set the pair together. */
.btn:hover { background: var(--charcoal); color: var(--cream); }

.btn-ghost {
  background: transparent; color: var(--ink); border: 1.5px solid var(--border);
}
.btn-ghost:hover { background: transparent; color: var(--ink); border-color: var(--ink); }

.btn-gradient {
  background: linear-gradient(135deg, var(--gold), var(--orange)); color: var(--ink);
}
.btn-gradient:hover {
  background: linear-gradient(135deg, var(--orange), var(--gold)); color: var(--ink);
}

/* hero */
.hero { background: var(--ink); color: var(--cream); padding: 80px 0 130px; position: relative; overflow: hidden; }
.hero .wrap { position: relative; z-index: 2; }
.hero-eyebrow { font-family: "JetBrains Mono", monospace; font-size: 12.5px; letter-spacing: .16em; color: var(--gold); text-transform: uppercase; margin-bottom: 18px; }
.hero h1 { font-size: clamp(32px, 5vw, 52px); font-weight: 700; line-height: 1.15; max-width: 16ch; }
.hero p { font-size: 17px; color: #C9C0AE; max-width: 52ch; margin-top: 18px; line-height: 1.7; }
.hero-actions { display: flex; gap: 14px; margin-top: 32px; flex-wrap: wrap; }
.blob-row { position: absolute; left: 0; right: 0; bottom: -6px; height: 110px; display: flex; z-index: 1; }
.blob { flex: 1; margin: 0 -18px; border-radius: 50% 50% 0 0; background: linear-gradient(180deg, var(--gold), var(--orange)); }
.blob:nth-child(odd) { height: 78%; align-self: flex-end; }
.blob:nth-child(even) { height: 100%; align-self: flex-end; }

/* sections */
section.block { padding: 72px 0; }
.eyebrow { font-family: "JetBrains Mono", monospace; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--orange-text); margin-bottom: 10px; }
.section-head { max-width: 60ch; margin-bottom: 40px; }
.section-head h2 { font-size: clamp(24px, 3vw, 32px); font-weight: 700; line-height: 1.2; }
.section-head p { color: var(--grey); margin-top: 12px; line-height: 1.7; }

/* cards grid */
.grid { display: grid; gap: 20px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .grid-3 { grid-template-columns: 1fr; } }
.grid-2 { grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (max-width: 720px) { .grid-2 { grid-template-columns: 1fr; } }

.stat-card { background: var(--paper); border: 1px solid var(--border); border-radius: 10px; padding: 26px; }
.stat-card .num { font-family: "Sora"; font-weight: 700; font-size: 34px; }
.stat-card .lbl { color: var(--grey); font-size: 13.5px; margin-top: 4px; }

/* member cards - business info leads, photo is a small identifier only */
.member-card {
  background: var(--paper); border: 1.5px solid var(--border); border-radius: 12px;
  padding: 18px 20px; display: flex; gap: 14px; align-items: flex-start;
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.member-card:hover {
  border-color: var(--orange); box-shadow: 0 8px 24px rgba(22,19,15,.08); transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) {
  .member-card { transition: none; }
  .member-card:hover { transform: none; }
}
.member-photo {
  width: 52px; height: 52px; border-radius: 50%; background: var(--border);
  display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0;
}
.member-photo img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.member-initials { font-family: "Sora"; font-weight: 700; font-size: 16px; color: var(--ink); }
.member-info { min-width: 0; flex: 1; }
.member-business { font-family: "Sora"; font-weight: 700; font-size: 16.5px; color: var(--ink); line-height: 1.3; }
.member-category { font-size: 12.5px; color: var(--orange-text); font-weight: 600; margin-top: 6px; }
.member-name { font-size: 13px; color: var(--grey); margin-top: 10px; }
.member-phone { font-family: "JetBrains Mono", monospace; font-size: 12.5px; margin-top: 8px; color: var(--grey); font-weight: 400; }

/* The category chip row was removed - the directory toolbar's Category
   dropdown is the single control for this now (js/directory.js). */

/* ---- full-bleed group photo band ---- */
/* Height follows the photo's own aspect ratio rather than a viewport-relative
   clamp - a vw-based height caps out on wide/zoomed-out screens while the
   image keeps stretching full-width, so the crop ratio drifts and only a
   thin sliver of the photo ends up visible. aspect-ratio keeps the same
   proportion of the image on screen at every width and zoom level. */
.photo-band { position: relative; width: 100%; overflow: hidden; background: var(--ink); }
.photo-band img { width: 100%; aspect-ratio: 2.88 / 1; min-height: 220px; max-height: 620px; object-fit: cover; object-position: center 35%; display: block; }
.photo-band-caption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 24px;
  background: linear-gradient(to top, rgba(22,19,15,.82), rgba(22,19,15,0));
  color: var(--cream); display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.photo-band-caption .eyebrow { color: var(--orange); }
.photo-band-caption h3 { font-family: "Sora"; font-weight: 700; font-size: clamp(16px, 2vw, 20px); margin-top: 4px; }
.photo-band-caption a.btn { flex-shrink: 0; }

/* events */
.event-card {
  display: flex; gap: 20px; background: var(--paper); border: 1px solid var(--border);
  border-radius: 12px; padding: 22px; align-items: flex-start;
}
.event-date {
  font-family: "Sora"; font-weight: 700; text-align: center; flex-shrink: 0;
  background: var(--ink); color: var(--cream); border-radius: 8px; padding: 12px 16px; min-width: 74px;
}
.event-date .d { font-size: 24px; line-height: 1; }
.event-date .m { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; margin-top: 4px; }
.event-title { font-family: "Sora"; font-weight: 700; font-size: 17px; }
.event-meta { font-size: 13px; color: var(--grey); margin-top: 4px; }
.event-desc { font-size: 14px; color: var(--charcoal); margin-top: 10px; line-height: 1.6; }

/* ---- specific asks & gives board ---- */
.sag-card {
  border: 1.5px solid var(--border); border-radius: 12px; background: var(--paper);
  padding: 20px 22px; display: flex; flex-direction: column; gap: 14px;
}
.sag-head { display: flex; gap: 14px; align-items: center; cursor: pointer; }
.sag-photo {
  width: 52px; height: 52px; border-radius: 50%; flex-shrink: 0; object-fit: cover; object-position: top;
  background: var(--ink); color: var(--cream); display: flex; align-items: center; justify-content: center;
  font-family: "Sora"; font-weight: 700; font-size: 16px;
}
.sag-name { font-family: "Sora"; font-weight: 700; font-size: 16px; }
.sag-biz { font-size: 13px; color: var(--orange-text); font-weight: 600; }
.sag-cat { font-size: 12px; color: var(--grey); margin-top: 1px; }
.sag-date { font-size: 11.5px; color: var(--grey); margin-left: auto; white-space: nowrap; align-self: flex-start; }
.sag-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 560px) { .sag-cols { grid-template-columns: 1fr; } }
.sag-col-label {
  font-family: "JetBrains Mono", monospace; font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; margin-bottom: 8px; padding-bottom: 6px; border-bottom: 1.5px solid var(--border);
}
.sag-col-label.ask { color: var(--orange-text); }
.sag-col-label.give { color: #2A5A34; }
.sag-list { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.sag-list li { font-size: 13.5px; line-height: 1.5; padding-left: 18px; position: relative; }
.sag-list li::before { content: "\2192"; position: absolute; left: 0; color: var(--grey); }
.sag-empty { font-size: 13px; color: var(--grey); font-style: italic; }

.sag-gate {
  position: relative; overflow: hidden; border-radius: 16px;
  background: linear-gradient(120deg, var(--ink) 0%, #2E2211 100%);
  padding: 30px 30px; display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap; margin-bottom: 6px;
}
.sag-gate::before {
  content: ""; position: absolute; inset: -40% -10% auto auto; width: 260px; height: 260px;
  background: radial-gradient(circle, var(--gold) 0%, transparent 70%); opacity: .35; pointer-events: none;
}
.sag-gate-icon {
  flex-shrink: 0; width: 52px; height: 52px; border-radius: 50%;
  background: linear-gradient(135deg, var(--gold), var(--orange)); display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 18px rgba(255, 122, 26, .35);
}
.sag-gate-body { display: flex; align-items: center; gap: 18px; flex: 1 1 320px; z-index: 1; }
.sag-gate-text { font-size: 14px; color: var(--grey-on-dark); line-height: 1.6; max-width: 560px; }
.sag-gate-text strong {
  display: block; font-family: "Sora"; font-weight: 700; font-size: 18.5px; margin-bottom: 5px; color: var(--cream);
}
.sag-gate-chips { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.sag-gate-chip {
  font-family: "JetBrains Mono", monospace; font-size: 10.5px; letter-spacing: .04em; color: var(--cream);
  border: 1px solid rgba(255,255,255,.22); border-radius: 999px; padding: 4px 11px; background: rgba(255,255,255,.06);
}
.sag-gate .btn-gradient { z-index: 1; white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; }

.sag-card-teaser { position: relative; }
.sag-cols-blurred { position: relative; }
.sag-blur-lines { display: flex; flex-direction: column; gap: 8px; margin-top: 2px; }
.sag-blur-line {
  height: 12px; border-radius: 6px; filter: blur(5px); user-select: none; pointer-events: none;
  background: linear-gradient(90deg, var(--border) 0%, #D6DBE4 50%, var(--border) 100%);
  background-size: 200% 100%; animation: sagShimmer 2.6s ease-in-out infinite;
}
.sag-blur-line:nth-child(2) { width: 78%; animation-delay: .3s; }
.sag-blur-line:nth-child(3) { width: 56%; animation-delay: .6s; }
@keyframes sagShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.sag-lockbadge {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  display: flex; align-items: center; gap: 6px; background: var(--ink); color: var(--cream);
  font-family: "JetBrains Mono", monospace; font-size: 10.5px; letter-spacing: .04em;
  padding: 8px 16px; border-radius: 999px; box-shadow: 0 4px 14px rgba(22,19,15,.25);
  white-space: nowrap; z-index: 2; text-decoration: none; cursor: pointer;
  border: 1.5px solid transparent; transition: background .15s, border-color .15s, transform .15s;
}
.sag-lockbadge:hover {
  background: var(--gold); color: var(--ink); border-color: var(--gold);
  transform: translate(-50%, -50%) scale(1.05);
}
.sag-lockbadge svg { flex-shrink: 0; }

/* Ask <-> Give match report */
.match-card {
  border: 1.5px solid var(--border); border-radius: 10px; background: var(--paper);
  padding: 14px 18px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.match-side { display: flex; flex-direction: column; gap: 2px; min-width: 160px; }
.match-name { font-family: "Sora"; font-weight: 700; font-size: 14px; }
.match-text { font-size: 13px; color: var(--charcoal); }
.match-arrow { color: var(--orange); flex-shrink: 0; }
.match-arrow svg { width: 20px; height: 20px; }

/* Success stories */
.story-card {
  border: 1.5px solid var(--border); border-radius: 12px; background: var(--paper);
  padding: 22px; display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap;
}
.story-avatar {
  width: 56px; height: 56px; border-radius: 50%; flex-shrink: 0; object-fit: cover; object-position: top;
  background: var(--ink); color: var(--cream); display: flex; align-items: center; justify-content: center;
  font-family: "Sora"; font-weight: 700; font-size: 16px;
}
.story-headline { font-family: "Sora"; font-weight: 700; font-size: 16px; margin-bottom: 6px; }
.story-text { font-size: 14px; line-height: 1.7; color: var(--charcoal); }
.story-meta { display: flex; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.story-amount {
  font-family: "JetBrains Mono", monospace; font-size: 12px; font-weight: 600; color: #2A5A34;
  background: #E8F3E9; border-radius: 999px; padding: 4px 12px;
}
.story-thanks { font-size: 12.5px; color: var(--grey); }

/* forms */
.form-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }
.form-field label { font-size: 13px; font-weight: 600; color: var(--charcoal); }
.form-field input, .form-field textarea, .form-field select {
  font-family: "Inter"; font-size: 14.5px; padding: 12px 14px; border-radius: 8px;
  border: 1.5px solid var(--border); background: var(--paper); color: var(--ink);
}
.form-field input:focus, .form-field textarea:focus, .form-field select:focus {
  outline: none; border-color: var(--orange);
}
.form-note { font-size: 13px; padding: 12px 14px; border-radius: 8px; margin-top: 14px; }
.form-note.ok { background: #E8F3E9; color: #2A5A34; }
.form-note.err { background: #FCE9E6; color: #A7311C; }

/* footer */
.site-footer { background: var(--ink); color: #C9C0AE; padding: 56px 0 32px; margin-top: 80px; }
.footer-grid { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 32px; }
.footer-brand .brand-word { color: var(--cream); }
.footer-note { font-size: 13px; margin-top: 10px; max-width: 40ch; line-height: 1.6; }
.footer-links { display: flex; gap: 40px; flex-wrap: wrap; }
.footer-links h4 { font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--grey-on-dark); margin-bottom: 12px; }
.footer-links a { display: block; text-decoration: none; font-size: 14px; color: #C9C0AE; margin-bottom: 8px; }
.footer-links a:hover { color: var(--gold); }
.footer-meeting { display: block; font-size: 13px; color: var(--grey-on-dark); line-height: 1.6; margin-top: 4px; }
.footer-bottom { border-top: 1px solid #332C22; margin-top: 40px; padding-top: 20px; font-size: 12px; color: var(--grey-on-dark); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.footer-credit { color: var(--grey-on-dark); text-decoration: underline; text-underline-offset: 2px; }
.footer-credit:hover { color: var(--gold); }

/* login / admin */
.auth-shell { max-width: 380px; margin: 100px auto; padding: 0 24px; }
.auth-card { background: var(--paper); border: 1px solid var(--border); border-radius: 14px; padding: 32px; }
.auth-card h1 { font-size: 22px; }
.auth-card p { color: var(--grey); font-size: 14px; margin-top: 8px; line-height: 1.6; }
.google-btn {
  width: 100%; margin-top: 22px; display: flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--paper); border: 1.5px solid var(--border); border-radius: 8px; padding: 12px;
  font-family: "Sora"; font-weight: 600; font-size: 14px; cursor: pointer;
}
.divider { display: flex; align-items: center; gap: 12px; margin: 22px 0; color: var(--grey); font-size: 12px; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }

.admin-shell { display: flex; min-height: 100vh; }
.admin-side { width: 240px; flex-shrink: 0; background: var(--ink); color: var(--cream); padding: 24px 18px; }
.admin-side a { display: block; text-decoration: none; color: #C9C0AE; font-size: 14px; font-weight: 600; padding: 10px 12px; border-radius: 8px; margin-bottom: 4px; }
.admin-side a.active, .admin-side a:hover { background: var(--charcoal); color: var(--cream); }
.admin-main { flex: 1; padding: 32px 40px; max-width: 1000px; }
.admin-table { width: 100%; border-collapse: collapse; margin-top: 20px; }
.admin-table th, .admin-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); font-size: 13.5px; }
.admin-table th { font-family: "JetBrains Mono", monospace; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--grey); }
.pill { font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 999px; text-transform: capitalize; }
.pill.member { background: #E3E7EE; color: var(--charcoal); }
.pill.admin { background: #FFE3C2; color: #8A4A00; }
.pill.superadmin { background: var(--ink); color: var(--cream); }

/* ---- scroll reveal (pattern from ais2026-frontend) ---- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s cubic-bezier(.4,0,.2,1), transform .6s cubic-bezier(.4,0,.2,1); }
.reveal.visible { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: .08s; }
.reveal-d2 { transition-delay: .16s; }
.reveal-d3 { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---- hero social proof ---- */
.hero-proof { display: flex; align-items: center; gap: 14px; margin-top: 30px; }
.hero-avatars { display: flex; }
.hero-av {
  width: 38px; height: 38px; border-radius: 50%; border: 2px solid var(--ink);
  margin-left: -10px; overflow: hidden; background: var(--charcoal);
  display: flex; align-items: center; justify-content: center;
  font-family: "Sora", sans-serif; font-weight: 700; font-size: 12px; color: var(--gold);
}
.hero-av:first-child { margin-left: 0; }
.hero-av img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.hero-proof-count { font-family: "Sora", sans-serif; font-weight: 700; font-size: 14px; color: var(--cream); }
.hero-proof-sub { font-size: 12.5px; color: #9A9184; margin-top: 2px; }

/* ---- horizontal member preview ---- */
.member-scroll {
  display: flex; gap: 14px; overflow-x: auto; padding: 4px 2px 18px;
  scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: var(--border) transparent;
}
.member-scroll .member-card { flex: 0 0 300px; scroll-snap-align: start; }
.member-scroll::-webkit-scrollbar { height: 8px; }
.member-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 99px; }

/* ---- numbered join steps ---- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 780px) { .steps { grid-template-columns: 1fr; } }
.step { background: var(--paper); border: 1.5px solid var(--border); border-radius: 12px; padding: 26px 22px; }
.step-badge {
  width: 34px; height: 34px; border-radius: 50%;
  background: linear-gradient(135deg, var(--gold), var(--orange)); color: var(--ink);
  font-family: "Sora", sans-serif; font-weight: 700; font-size: 15px;
  display: flex; align-items: center; justify-content: center; margin-bottom: 14px;
}
.step h3 { font-size: 16.5px; font-weight: 700; margin-bottom: 8px; }
.step p { font-size: 14px; color: var(--grey); line-height: 1.65; margin: 0; }

/* ---- FAQ accordion ---- */
.faq-list { display: flex; flex-direction: column; gap: 10px; max-width: 760px; }
.faq-item { background: var(--paper); border: 1.5px solid var(--border); border-radius: 10px; overflow: hidden; }
.faq-item[open] { border-color: var(--orange); }
.faq-q {
  font-family: "Sora", sans-serif; font-weight: 600; font-size: 15px; padding: 16px 20px;
  cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 12px; list-style: none;
}
.faq-q::-webkit-details-marker { display: none; }
.faq-chev { flex-shrink: 0; transition: transform .2s; }
.faq-item[open] .faq-chev { transform: rotate(180deg); }
.faq-a { padding: 0 20px 18px; font-size: 14px; color: var(--grey); line-height: 1.7; }
.faq-a a { color: var(--orange-text); font-weight: 600; }

/* ---- leadership team ---- */
.lt-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 860px) { .lt-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .lt-grid { grid-template-columns: 1fr; } }
.lt-card {
  background: var(--paper); border: 1.5px solid var(--border); border-radius: 12px;
  padding: 26px 18px; text-align: center; transition: border-color .2s, box-shadow .2s;
}
.lt-card:hover { border-color: var(--orange); box-shadow: 0 8px 24px rgba(22,19,15,.08); }
.lt-avatar {
  width: 84px; height: 84px; border-radius: 50%; margin: 0 auto 14px; overflow: hidden;
  background: var(--border); display: flex; align-items: center; justify-content: center;
  font-family: "Sora", sans-serif; font-weight: 700; font-size: 26px; color: var(--ink);
}
.lt-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.lt-name { font-family: "Sora", sans-serif; font-weight: 700; font-size: 16px; }
.lt-role { font-size: 12.5px; color: var(--orange-text); font-weight: 600; margin-top: 4px; }
.lt-biz { font-size: 12.5px; color: var(--grey); margin-top: 8px; line-height: 1.5; }

/* ---- meeting detail strip ---- */
.meet-strip {
  display: flex; flex-wrap: wrap; gap: 0; border: 1.5px solid var(--border);
  border-radius: 12px; background: var(--paper); overflow: hidden; max-width: 720px;
}
.meet-cell { flex: 1 1 180px; padding: 22px 24px; border-right: 1.5px solid var(--border); }
.meet-cell:last-child { border-right: none; }
@media (max-width: 620px) {
  .meet-cell { border-right: none; border-bottom: 1.5px solid var(--border); flex-basis: 100%; }
  .meet-cell:last-child { border-bottom: none; }
}
.meet-label {
  font-family: "JetBrains Mono", monospace; font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--grey); margin-bottom: 6px;
}
.meet-value { font-family: "Sora", sans-serif; font-weight: 700; font-size: 18px; }
.meet-sub { font-size: 12.5px; color: var(--grey); margin-top: 3px; }

/* ---- community coverflow: fanned member cards, Testimonial-Motion style ----
   Reuses the same 3D coverflow engine as the Instagram section (js/coverflow.js,
   .cf-wrap/.cf-stage/.cf-card/.cf-prev/.cf-next/.cf-dots) - .cfm-* here only
   adds the portrait card shape and the name/business overlay. The compound
   .cf-card.cfm-card selector (not just .cfm-card) is required to reliably win
   over .cf-card's own width/border-radius/box-shadow/overflow further down
   this file - same specificity, later source order would otherwise win. The
   quote badge pokes out below the card, so clipping (needed for the photo's
   rounded corners) lives on an inner .cfm-media wrapper, not the card itself. */
.cf-wrap.cfm-wrap { max-width: 980px; }
.cf-stage.cfm-stage { height: clamp(280px, 30vw, 340px); }
.cf-card.cfm-card {
  width: clamp(190px, 20vw, 224px); border-radius: 20px;
  overflow: visible; background: none; box-shadow: none;
}
.cfm-media {
  width: 100%; height: 100%; border-radius: 20px; overflow: hidden;
  box-shadow: 0 22px 48px rgba(22,19,15,.2); background: var(--paper); position: relative;
  outline: 3px solid transparent; outline-offset: 3px; transition: outline-color .3s ease;
}
/* A visible ring on top of the scale/dim/tilt already applied in JS -
   otherwise "which card is focused" only shows up in small overlay text. */
.cfm-card.is-center .cfm-media { outline-color: var(--gold); }
.cfm-media img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.cfm-fallback {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  font-family: "Sora", sans-serif; font-weight: 700; font-size: 44px; color: #fff; letter-spacing: -.02em;
}
.cfm-overlay {
  position: absolute; inset: auto 0 0 0; padding: 20px 16px 40px;
  background: linear-gradient(to top, rgba(10,9,7,.92) 0%, rgba(10,9,7,.5) 55%, transparent 100%);
  color: #fff; opacity: 0; transform: translateY(6px);
  transition: opacity .35s ease, transform .35s ease; pointer-events: none;
}
.cfm-card.is-center .cfm-overlay { opacity: 1; transform: translateY(0); }
/* A round badge crops a wide text logo (e.g. "CSM") down to an unreadable
   sliver - a small rounded-rect chip lets the logo's own aspect ratio show
   through instead of fighting it. Fixed width/height (not max-width) on the
   badge is required: it's absolutely positioned with no intrinsic size of
   its own, so an auto/max-width box gives the img an indefinite containing
   block - object-fit:contain then has nothing to fit against and the browser
   falls back to rendering the image at a fraction of its intrinsic size
   (this rendered ~16x12px instead of filling the ~50x20px available area). */
.cfm-logo {
  position: absolute; top: 12px; right: 12px; z-index: 1;
  width: 56px; height: 26px; border-radius: 8px; background: var(--paper);
  padding: 4px 6px; box-shadow: 0 3px 10px rgba(22,19,15,.22);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: scale(.7); transition: opacity .35s ease, transform .35s ease;
}
.cfm-card.is-center .cfm-logo { opacity: 1; transform: scale(1); }
/* Sized to 82%, not 100%, of the padded box on purpose: some uploaded logo
   files have zero internal margin of their own (the artwork touches its own
   canvas edges - e.g. Universal Avenue's "UA" mark), so object-fit:contain
   alone still lets that artwork visually graze the badge's rounded corners.
   This inner safety margin guarantees a clean gutter for every logo,
   regardless of how tightly its source file was exported. */
.cfm-logo img { width: 82%; height: 82%; object-fit: contain; display: block; }
.cfm-overlay-name { font-family: "Sora", sans-serif; font-weight: 700; font-size: 15.5px; line-height: 1.25; }
.cfm-overlay-biz { font-size: 12px; color: var(--gold); font-weight: 600; margin-top: 3px; }
.cfm-overlay-cat { font-size: 11px; color: rgba(255,255,255,.65); margin-top: 1px; }
.cfm-quote {
  position: absolute; bottom: -16px; left: 50%; transform: translateX(-50%) scale(.6);
  width: 34px; height: 34px; border-radius: 50%; background: var(--paper); color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 16px rgba(22,19,15,.22);
  opacity: 0; transition: opacity .35s ease, transform .35s ease;
}
.cfm-card.is-center .cfm-quote { opacity: 1; transform: translateX(-50%) scale(1); }
.cfm-quote svg { width: 14px; height: 14px; }

/* Sign-in gate card - last item in the signed-out coverflow, same "board is
   live, sign in to see it" pattern as gains.html's gate banner. */
.cfm-gate-media {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 10px; padding: 24px 18px;
  background: linear-gradient(160deg, var(--ink) 0%, #2E2211 100%);
}
.cfm-gate-icon {
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--gold), var(--orange));
  display: flex; align-items: center; justify-content: center;
}
.cfm-gate-text { font-size: 13px; color: var(--grey-on-dark); line-height: 1.5; }
.cfm-gate-text strong { display: block; font-family: "Sora", sans-serif; font-weight: 700; font-size: 15px; color: var(--cream); margin-bottom: 2px; }
.cfm-gate-btn { font-size: 13.5px; padding: 9px 22px; }
@media (max-width: 640px) {
  .cf-stage.cfm-stage { height: clamp(230px, 62vw, 280px); }
  .cf-card.cfm-card { width: clamp(160px, 46vw, 190px); }
}
@media (prefers-reduced-motion: reduce) {
  .cfm-overlay, .cfm-quote { transition: none; }
}

/* ---- detail modal (members / events) ---- */
.dm-overlay {
  position: fixed; inset: 0; background: rgba(22,19,15,.55); z-index: 60;
  display: none; align-items: center; justify-content: center; padding: 20px;
}
.dm-overlay.open { display: flex; }
/* Three regions: header and footer hold their place, only .dm-body scrolls.
   The card itself must NOT scroll, or the close button and the primary action
   scroll out of reach on a long profile. */
.dm-card {
  background: var(--paper); border-radius: 18px;
  width: 400px; max-width: 94vw; max-height: 86vh;
  display: flex; flex-direction: column; overflow: hidden;
  position: relative; text-align: center;
  animation: ccIn .3s cubic-bezier(.4,0,.2,1) both;
}
.dm-head {
  flex-shrink: 0; display: flex; align-items: center; gap: 10px;
  padding: 12px 14px 12px 20px; min-height: 58px;
  border-bottom: 1px solid transparent;
  transition: border-color .18s, background .18s;
}
/* Once the body scrolls, the header earns a divider and shows the name. */
.dm-overlay.dm-scrolled .dm-head {
  border-bottom-color: var(--border);
  background: var(--paper);
}
.dm-head-title {
  flex: 1; min-width: 0; text-align: left;
  font-family: "Sora", sans-serif; font-weight: 700; font-size: 15px; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  opacity: 0; transform: translateY(4px);
  transition: opacity .18s, transform .18s;
}
.dm-overlay.dm-scrolled .dm-head-title { opacity: 1; transform: none; }
.dm-close {
  flex-shrink: 0; width: 34px; height: 34px; margin-left: auto;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 1.5px solid var(--border); background: var(--paper);
  font-size: 16px; line-height: 1; cursor: pointer; color: var(--grey);
  transition: border-color .15s, color .15s;
}
.dm-close:hover { border-color: var(--ink); color: var(--ink); }
.dm-close:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* The only scrolling region */
.dm-body {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  padding: 6px 28px 24px;
  overscroll-behavior: contain;
}
/* Footer holds the primary actions, always reachable */
.dm-foot {
  flex-shrink: 0; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
  padding: 16px 20px; border-top: 1px solid var(--border); background: var(--paper);
}
.dm-foot .btn { flex: 1 1 auto; justify-content: center; min-width: 120px; }
@media (max-width: 420px) {
  .dm-body { padding-left: 18px; padding-right: 18px; }
  .dm-foot { padding: 12px 14px; }
  .dm-foot .btn { font-size: 13.5px; padding: 11px 16px; }
}
.dm-avatar {
  width: 108px; height: 108px; border-radius: 50%; overflow: hidden; margin: 0 auto 16px;
  background: var(--border); display: flex; align-items: center; justify-content: center;
  font-family: "Sora", sans-serif; font-size: 30px; font-weight: 700; color: var(--ink);
  box-shadow: 0 0 0 4px var(--paper), 0 0 0 6px var(--orange);
}
.dm-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.dm-name { font-family: "Sora", sans-serif; font-size: 20px; font-weight: 700; }
.dm-role {
  display: inline-block; background: linear-gradient(135deg, var(--gold), var(--orange));
  color: var(--ink); font-size: 11px; font-weight: 700; letter-spacing: .04em;
  padding: 4px 12px; border-radius: 99px; margin-top: 6px; text-transform: uppercase;
}
.dm-biz { font-size: 15px; color: var(--orange-text); font-weight: 600; margin-top: 10px; }
.dm-cat { font-size: 13px; color: var(--grey); margin-top: 4px; }
.dm-bio { font-size: 14px; color: var(--charcoal); line-height: 1.7; margin-top: 14px; text-align: left; }
.dm-referral {
  font-size: 13.5px; color: var(--charcoal); line-height: 1.6; margin-top: 12px;
  text-align: left; background: var(--paper); border: 1px solid var(--border);
  border-radius: 10px; padding: 10px 12px;
}
.dm-referral-label {
  display: block; font-family: "JetBrains Mono", monospace; font-size: 10px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--orange-text);
  font-weight: 700; margin-bottom: 3px;
}
/* .dm-actions is gone - actions now live in .dm-foot so they never scroll. */
.dm-meta {
  display: flex; flex-direction: column; gap: 10px; margin-top: 18px; text-align: left;
}
.dm-meta-row { display: flex; gap: 10px; align-items: baseline; }
.dm-meta-label {
  font-family: "JetBrains Mono", monospace; font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--grey); min-width: 64px;
}
.dm-meta-value { font-size: 14px; font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .dm-card { animation: none; } }

/* ---- meeting role/speaker cards (Education Slot, Feature Presentation, ...) ---- */
.speaker-list { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; text-align: left; }
.speaker-row {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px;
  border: 1.5px solid var(--border); border-radius: 10px; background: var(--paper);
  text-decoration: none; color: inherit; transition: border-color .15s, transform .15s;
}
.speaker-row[data-member-id] { cursor: pointer; }
.speaker-row[data-member-id]:hover, .speaker-row[data-member-id]:focus-visible { border-color: var(--orange); transform: translateY(-1px); }
.speaker-photo {
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; object-fit: cover; object-position: top;
  background: var(--ink); color: var(--cream); display: flex; align-items: center; justify-content: center;
  font-family: "Sora"; font-weight: 700; font-size: 14px;
}
.speaker-info { min-width: 0; }
.speaker-role { font-family: "JetBrains Mono", monospace; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--grey); }
.speaker-name { font-family: "Sora"; font-weight: 700; font-size: 14.5px; }
.speaker-biz { font-size: 12.5px; color: var(--grey); }

/* ---- hero grid ---- */
.hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 24px; align-items: center; }
.hero-grid.no-sun { grid-template-columns: 1fr; }

/* hero photo column (landing page right column) */
.hero-photo-col { position: relative; display: flex; align-items: center; justify-content: center; }
.hero-photo-frame {
  width: 100%; border-radius: 16px; overflow: hidden;
  transform: rotate(1.8deg);
  box-shadow: 0 28px 64px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,201,60,0.18);
  position: relative;
}
.hero-photo-expand { cursor: zoom-in; }
.hero-photo-expand:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }
/* Full-size image inside the shared detail modal */
.dm-full-img { width: 100%; height: auto; display: block; border-radius: 4px; }
.dm-full-caption { font-size: 13.5px; color: var(--charcoal); line-height: 1.6; margin-top: 12px; text-align: left; }
/* When showing a bare image, give the modal card more room */
.dm-card:has(.dm-full-img) { width: min(680px, 94vw); }
.hero-photo-frame img { width: 100%; height: 430px; object-fit: cover; object-position: center top; display: block; }
.hero-photo-badge {
  position: absolute; bottom: 20px; left: 20px;
  background: rgba(22,19,15,0.84); backdrop-filter: blur(10px);
  border: 1px solid rgba(255,201,60,0.3); border-radius: 10px; padding: 11px 17px;
}
.hero-photo-badge-num { font-family: "Sora", sans-serif; font-weight: 700; font-size: 15px; color: var(--gold); }
.hero-photo-badge-sub { font-size: 12px; color: #C9C0AE; margin-top: 3px; }
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-photo-frame img { height: 260px; }
  .hero-photo-frame { transform: none; }
}

/* hero name eyebrow link */
.hero-name-link {
  display: inline-block; margin-bottom: 20px;
  font-family: "JetBrains Mono", monospace; font-size: 12px; letter-spacing: .15em;
  color: var(--gold); text-transform: uppercase; text-decoration: none;
  border-bottom: 1px solid rgba(255,201,60,0.35); padding-bottom: 2px;
  transition: border-color .2s, color .2s;
}
.hero-name-link:hover { border-bottom-color: var(--gold); color: #FFE08A; }

/* ---- sun host (Three.js canvas - used on aaditya.html) ---- */
#sunHost { position: relative; height: 460px; min-width: 0; }
#sunHost canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; touch-action: none; }
@media (max-width: 900px) { #sunHost { display: none; } }

/* ---- Instagram feed section ---- */
.insta-section { border-top: 1px solid var(--border); }
.insta-follow-btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: "Sora", sans-serif; font-weight: 600; font-size: 13.5px;
  color: var(--orange-text); text-decoration: none;
  border: 1.5px solid var(--border); border-radius: 999px; padding: 8px 18px;
  transition: border-color .2s, color .2s;
}
.insta-follow-btn:hover { border-color: var(--orange-text); }
/* ---- Coverflow carousel ---- */
.cf-wrap {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
  user-select: none;
}
/* 3D stage — height matches card width so cards are square (Instagram aspect) */
.cf-stage {
  position: relative;
  height: clamp(200px, 24vw, 260px);
  overflow: hidden;
  transform-style: preserve-3d;
  cursor: grab;
  outline: none;
}
.cf-stage:active { cursor: grabbing; }
/* Cards */
.cf-card {
  position: absolute;
  top: 0;
  left: 50%;
  width: clamp(200px, 24vw, 260px);
  height: 100%;
  overflow: hidden;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 8px 32px rgba(0,0,0,.13);
  will-change: transform, opacity, filter;
  transition: none;
}
/* Image cards (API path) and oEmbed cards - direct-child combinator so this
   only targets the Instagram .cf-card-catcher anchor (a direct child of the
   card), not an unrelated nested link like the community coverflow's Sign In
   button, which this stretched to fill the whole card before the fix. */
.cf-card > a { display: block; width: 100%; height: 100%; }
.cf-card img {
  width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 14px;
  /* Without this, mousedown-and-drag on an <img> starts the browser's own
     native image-drag (a ghost thumbnail follows the cursor) instead of the
     coverflow's swipe - the photo appears to "scroll" on its own while the
     card underneath never moves. -webkit-user-drag covers Chrome/Safari;
     draggable="false" (set on the element itself in JS) covers Firefox. */
  -webkit-user-drag: none; user-drag: none; user-select: none;
}
.cf-card .instagram-media {
  width: 100% !important; min-width: 0 !important; max-width: 100% !important;
  margin: 0 !important; border-radius: 14px !important;
}
/* Sits above the Instagram iframe so touch/pointer events reach the coverflow's
   swipe handler instead of being swallowed by the iframe's own context - a real
   swipe is distinguished from a tap in coverflow.js and only a tap navigates. */
.cf-card-catcher {
  position: absolute; inset: 0; z-index: 5;
  background: transparent; -webkit-tap-highlight-color: transparent;
}
/* Nav arrows */
.cf-prev, .cf-next {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  z-index: 200;
  background: rgba(255,255,255,.85);
  border: 1.5px solid var(--border);
  border-radius: 50%;
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; line-height: 1;
  color: var(--ink);
  cursor: pointer;
  transition: background .15s;
}
.cf-prev:hover, .cf-next:hover { background: #fff; }
.cf-prev { left: 4px; }
.cf-next { right: 4px; }
/* Dot pagination */
.cf-dots {
  display: flex; justify-content: center; gap: 8px;
  margin-top: 18px;
}
.cf-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--border); border: none; padding: 0; cursor: pointer;
  transition: background .2s, transform .2s;
}
.cf-dot.active {
  background: var(--orange-text);
  transform: scale(1.25);
}
@media (max-width: 640px) {
  /* On mobile: compact square cards, 3 fit across the narrow screen.
     Arrows stay visible as a second way to move besides the touch swipe -
     the swipe itself now works reliably via .cf-card-catcher (see above). */
  .cf-stage { height: clamp(110px, 34vw, 160px); }
  .cf-card { width: clamp(110px, 34vw, 160px); }
  .cf-prev, .cf-next { width: 40px; height: 40px; font-size: 20px; }
}

/* footer bottom Instagram link */
.footer-insta {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 600; color: var(--grey-on-dark); text-decoration: none;
  transition: color .2s;
}
.footer-insta:hover { color: var(--cream); }

/* ---- KYC social rows in the detail modal ---- */
.dm-socials { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 14px; }
.dm-social {
  width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid var(--border);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--charcoal); background: var(--paper); transition: border-color .15s, color .15s, background .15s;
}
.dm-social svg { width: 17px; height: 17px; }
.dm-social:hover { border-color: var(--ink); background: var(--ink); color: var(--cream); }
.dm-company {
  margin-top: 18px; padding-top: 16px; border-top: 1.5px solid var(--border);
}
.dm-company-label {
  font-family: "JetBrains Mono", monospace; font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--grey);
}
.dm-company-logo { display: block; max-height: 44px; max-width: 140px; margin-top: 10px; object-fit: contain; }
.dm-address {
  font-size: 13px; color: var(--grey); line-height: 1.6; margin-top: 10px; text-align: left;
}
/* Bios are plain text with real line breaks - keep them. */
.dm-bio { white-space: pre-line; }
.dm-tags {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; justify-content: flex-start;
}
.dm-tag {
  font-size: 11.5px; line-height: 1.4; color: var(--charcoal); background: var(--paper);
  border: 1px solid var(--border); border-radius: 999px; padding: 3px 9px;
}

/* ---- Directory toolbar: search, filter, sort, view toggle ---- */
.dir-toolbar {
  display: flex; gap: 12px; flex-wrap: wrap;
  align-items: flex-end; justify-content: space-between;
  margin-bottom: 16px;
}
.dir-search {
  position: relative; flex: 1 1 320px; min-width: 0;
  display: flex; align-items: center;
}
.dir-search-icon {
  position: absolute; left: 14px; width: 17px; height: 17px;
  color: var(--grey); pointer-events: none;
}
.dir-search input {
  width: 100%; font-family: "Inter", sans-serif; font-size: 14.5px;
  color: var(--ink); background: var(--paper);
  border: 1.5px solid var(--border); border-radius: 999px;
  padding: 11px 40px 11px 40px;
  transition: border-color .15s, box-shadow .15s;
  -webkit-appearance: none; appearance: none;
}
.dir-search input::placeholder { color: var(--grey); }
.dir-search input:focus {
  outline: none; border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(255,201,60,.35);
}
/* Native search widgets clash with the custom clear button */
.dir-search input::-webkit-search-decoration,
.dir-search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.dir-search-clear {
  position: absolute; right: 10px;
  width: 24px; height: 24px; border-radius: 50%;
  border: none; background: var(--border); color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0;
}
.dir-search-clear svg { width: 12px; height: 12px; }
.dir-search-clear:hover { background: var(--grey); color: var(--cream); }

.dir-controls { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.dir-field { display: flex; flex-direction: column; gap: 5px; }
.dir-field-label {
  font-family: "JetBrains Mono", monospace; font-size: 10px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--grey);
  padding-left: 2px;
}
.dir-select {
  font-family: "Inter", sans-serif; font-size: 13.5px; font-weight: 500;
  color: var(--ink); background: var(--paper);
  border: 1.5px solid var(--border); border-radius: 999px;
  padding: 9px 34px 9px 15px; cursor: pointer;
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23736C5E' stroke-width='2.4'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 13px;
  transition: border-color .15s;
}
.dir-select:hover { border-color: var(--grey); }
.dir-select:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(255,201,60,.35); }

.dir-view-toggle {
  display: flex; gap: 3px; padding: 3px;
  background: var(--paper); border: 1.5px solid var(--border); border-radius: 999px;
}
.dir-view-btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: "Inter", sans-serif; font-size: 13px; font-weight: 600;
  color: var(--grey); background: none; border: none; cursor: pointer;
  padding: 7px 14px; border-radius: 999px;
  transition: background .15s, color .15s;
}
.dir-view-btn svg { width: 15px; height: 15px; }
.dir-view-btn:hover { color: var(--ink); }
.dir-view-btn.active { background: var(--ink); color: var(--cream); }

.dir-meta {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  font-family: "JetBrains Mono", monospace; font-size: 11.5px;
  letter-spacing: .06em; color: var(--grey);
  margin-bottom: 14px;
}
.dir-hint kbd {
  font-family: "JetBrains Mono", monospace; font-size: 10.5px;
  background: var(--paper); border: 1px solid var(--border);
  border-bottom-width: 2px; border-radius: 4px;
  padding: 1px 6px; color: var(--charcoal);
}
@media (max-width: 620px) { .dir-hint { display: none; } }

/* Search match highlight */
mark.dir-hl {
  background: rgba(255,201,60,.45); color: inherit;
  border-radius: 3px; padding: 0 1px;
}

/* List view: one full-width row per member */
.member-list { display: flex; flex-direction: column; gap: 10px; }
.member-list .member-card { width: 100%; align-items: center; }
.member-list .member-photo { width: 44px; height: 44px; }
.member-list .member-business { font-size: 15.5px; }
.member-list .member-phone { margin-top: 6px; }

/* Company view: logo-led cards. Not every member has uploaded a logo yet,
   so the fallback initials badge must look intentional, not like a broken
   image - same treatment as the headshot fallback elsewhere on the site. */
.dir-company-grid {
  display: grid;
  /* minmax(256px,...) against .wrap's 1120px max-width caps this at 4 columns -
     narrower cards were cramming 5+ per row and starving every field inside. */
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 18px;
}
.company-card { flex-direction: column; align-items: stretch; padding: 0; overflow: hidden; }
.company-logo {
  height: 110px; padding: 16px;
  display: flex; align-items: center; justify-content: center;
  background: var(--paper); border-bottom: 1px solid var(--border);
}
.company-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
/* A missing logo should still read as an intentional avatar, not an empty
   flat tile - same ink/cream circular-badge treatment as the member photo
   and other initials fallbacks elsewhere on the site, just larger. */
.company-logo-fallback { background: var(--paper); }
.company-initials {
  width: 64px; height: 64px; border-radius: 50%;
  color: var(--cream);
  display: flex; align-items: center; justify-content: center;
  font-family: "Sora"; font-weight: 700; font-size: 20px; letter-spacing: -.02em;
}
.company-card .member-info { padding: 16px 18px 18px; display: flex; flex-direction: column; }
.company-card .member-category { margin-top: 6px; }
.company-member-row {
  display: flex; align-items: center; gap: 10px;
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border);
}
.company-member-photo {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; object-fit: cover; object-position: top;
  color: var(--cream); display: flex; align-items: center; justify-content: center;
  font-family: "Sora"; font-weight: 700; font-size: 11px;
}
.company-member-row .member-name {
  margin: 0; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Company card call-to-action row - Call, Website, LinkedIn. Not every
   member has a website/LinkedIn on file, so these two are optional and the
   Call button alone still fills the row when they're absent. */
.card-cta { display: flex; gap: 8px; margin-top: auto; padding-top: 14px; }
.cta-call {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  background: linear-gradient(135deg, var(--gold), var(--orange)); color: var(--ink);
  font-family: "Inter", sans-serif; font-weight: 700; font-size: 13.5px;
  border-radius: 10px; padding: 0 14px; height: 38px; text-decoration: none;
  transition: filter .15s, transform .15s;
}
.cta-call:hover { filter: brightness(1.05); transform: translateY(-1px); }
.cta-call svg { width: 15px; height: 15px; flex-shrink: 0; }
.cta-icon {
  width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
  border: 1.5px solid var(--border); background: var(--paper); color: var(--charcoal);
  display: flex; align-items: center; justify-content: center;
  transition: border-color .15s, color .15s;
}
.cta-icon:hover { border-color: var(--ink); color: var(--ink); }
.cta-icon svg { width: 16px; height: 16px; }
/* No phone/website/LinkedIn on file - a labelled fallback beats an empty gap. */
.cta-fallback {
  flex: 1; display: flex; align-items: center; justify-content: center;
  height: 38px; border-radius: 10px; border: 1.5px dashed var(--border);
  font-size: 12.5px; color: var(--grey); font-weight: 500;
}

/* Empty state */
.dir-empty {
  grid-column: 1 / -1; text-align: center;
  padding: 56px 20px; background: var(--paper);
  border: 1.5px dashed var(--border); border-radius: 12px;
}
.dir-empty-title { font-family: "Sora", sans-serif; font-weight: 700; font-size: 17px; color: var(--ink); }
.dir-empty-sub { font-size: 14px; color: var(--grey); margin: 8px 0 20px; }

@media (max-width: 720px) {
  .dir-toolbar { flex-direction: column; align-items: stretch; }
  .dir-controls { justify-content: space-between; }
  .dir-field { flex: 1 1 auto; }
  .dir-select { width: 100%; }
  .dir-view-btn span { display: none; }
  .dir-view-btn { padding: 8px 12px; }
}