/* ============================================================
   Core layout & components
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,500;9..144,600&family=Abril+Fatface&family=Cinzel+Decorative:wght@400;700;900&family=Poppins:wght@400;500;600&family=Inter:wght@400;500;600;700&display=swap');

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  transition: background-color .45s ease, color .45s ease;
  -webkit-font-smoothing: antialiased;
}

.serif { font-family: 'Fraunces', Georgia, serif; }

a { color: inherit; }

.wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 28px;
}

/* ---------- Top bar ---------- */
/* ---------- Expertise flip-board (very top strip, airport-departures style) ---------- */
.expertise-ticker {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 61;
  height: 38px;
  overflow: hidden;
  background: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
}
.expertise-ticker-inner {
  display: flex;
  align-items: center;
  gap: 11px;
  white-space: nowrap;
}
.expertise-label {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: .74rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent-contrast);
  opacity: .8;
}
.expertise-delim {
  color: var(--accent-contrast);
  opacity: .5;
  font-size: .8rem;
  font-weight: 300;
}
.flipboard {
  position: relative;
  display: inline-block;
  height: 22px;
  min-width: 260px;
  text-align: left;
  perspective: 500px;
}
.flipboard-card {
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  white-space: nowrap;
  font-family: 'Fraunces', serif;
  font-weight: 700;
  font-size: .9rem;
  letter-spacing: .03em;
  color: var(--accent-contrast);
  transform-origin: 50% 0%;
  backface-visibility: hidden;
  opacity: 0;
  transform: rotateX(90deg);
  transition: transform .5s cubic-bezier(.4,0,.2,1), opacity .32s ease;
  pointer-events: none;
}
.flipboard-card.is-current {
  opacity: 1;
  transform: rotateX(0deg);
  transition: transform .5s cubic-bezier(.2,0,.2,1) .12s, opacity .3s ease .12s;
}
.flipboard-card.is-leaving {
  opacity: 0;
  transform: rotateX(-90deg);
  transition: transform .45s cubic-bezier(.4,0,1,.4), opacity .28s ease;
}
@media (prefers-reduced-motion: reduce) {
  .flipboard-card { transition: opacity .3s ease; transform: none; }
  .flipboard-card.is-leaving { transform: none; }
}

.topbar {
  position: fixed;
  top: 38px; left: 0; right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 28px;
  backdrop-filter: blur(10px);
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  border-bottom: 1px solid transparent;
  transition: border-color .3s ease, background-color .45s ease;
}
.topbar.scrolled { border-bottom: 1px solid var(--border); }

.brand {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 1.15rem;
  letter-spacing: .02em;
}
.brand span { color: var(--accent); }

.nav-links { display: flex; gap: 26px; font-size: .92rem; }
.nav-links a {
  text-decoration: none;
  color: var(--accent);
  opacity: .8;
  transition: opacity .2s ease;
  position: relative;
}
.nav-links a:hover { opacity: 1; }

.topbar-right { display: flex; align-items: center; gap: 14px; }

/* ---------- Theme switcher ---------- */
.theme-switcher { position: relative; }
.theme-toggle-btn {
  display: flex; align-items: center; gap: 8px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
  font-size: .82rem;
  font-family: inherit;
}
.theme-dot {
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.theme-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 300px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 14px;
  box-shadow: var(--shadow);
  display: none;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  z-index: 60;
}
.theme-panel.open { display: grid; }
.theme-swatch {
  cursor: pointer;
  border-radius: 10px;
  padding: 10px 6px 8px;
  text-align: center;
  border: 1px solid transparent;
  background: var(--bg-soft);
  transition: transform .15s ease, border-color .15s ease;
}
.theme-swatch:hover { transform: translateY(-2px); }
.theme-swatch.active { border-color: var(--accent); }
.swatch-dot {
  width: 22px; height: 22px; border-radius: 50%;
  margin: 0 auto 6px;
  border: 2px solid rgba(120,120,120,.15);
}
.swatch-label { font-size: .62rem; color: var(--text-muted); line-height: 1.2; }

/* ---------- Hero ---------- */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding-top: 134px;
  position: relative;
  overflow: hidden;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 56px;
  align-items: center;
  width: 100%;
}
.hero h1 {
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: clamp(2.4rem, 5vw, 3.7rem);
  line-height: 1.08;
  margin: 0 0 18px;
  letter-spacing: -.01em;
}
.hero h1 em {
  font-style: italic;
  color: var(--accent);
}
/* the headline periodically dissolves into "dust" and reforms as a
   different line -- see the inline script beside #heroHeadline in
   index.html, which splits the text into one .dust-char span per
   character (walking into <em> so its styling survives) and animates
   each one out to a randomized scatter point, then back in. */
.dust-word {
  display: inline-block;
  white-space: nowrap;
}
.dust-char {
  display: inline-block;
  white-space: pre;
  transition: transform .55s cubic-bezier(.22,.8,.28,1), opacity .5s ease, filter .5s ease;
  transform: translate(0, 0) rotate(0deg);
  opacity: 1;
  filter: blur(0);
}
.dust-char.dust-out {
  transform: translate(var(--dx, 0), var(--dy, 0)) rotate(var(--rot, 0deg));
  opacity: 0;
  filter: blur(3px);
}
@media (prefers-reduced-motion: reduce) {
  .dust-char { transition: none; }
}
.hero-sub {
  font-size: 1.12rem;
  color: var(--text-muted);
  max-width: 46ch;
  line-height: 1.6;
  margin-bottom: 30px;
}
.hero-sub em, .persona-detail .narrative em {
  font-style: italic;
  color: var(--accent);
}

.phrase-rotator {
  min-height: 2.4em;
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 1.15rem;
  color: var(--text);
  border-left: 3px solid var(--accent);
  padding-left: 18px;
  margin-bottom: 36px;
  max-width: 46ch;
}
.phrase-rotator span { opacity: 0; display: block; animation: fadeSlide .8s ease forwards; }
@keyframes fadeSlide {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.hero-cta-row { display: flex; gap: 14px; flex-wrap: wrap; }
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 24px;
  border-radius: 999px;
  font-size: .92rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, background-color .2s ease;
  font-family: inherit;
}
.btn-primary { background: var(--accent); color: var(--accent-contrast); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.btn-ghost { background: transparent; border-color: var(--border); color: var(--text); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }

/* ---------- Hero portrait : image, then the thought of the day ---------- */
.portrait-frame {
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  background:
    radial-gradient(120% 100% at 50% 0%, color-mix(in srgb, var(--accent) 20%, transparent) 0%, transparent 55%),
    linear-gradient(165deg, var(--bg-soft) 0%, var(--bg-elevated) 55%, var(--bg-soft) 100%);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  padding: 34px 30px 26px;
}
/* thin inset gold hairline -- reads as a painting/portrait frame */
.portrait-frame::before {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 38%, transparent);
  border-radius: 16px;
  pointer-events: none;
}

.bio-download-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
}
.bio-download-label {
  font-family: 'Poppins', sans-serif;
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.bio-download-btns { display: flex; gap: 8px; }
.bio-download-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text);
  font-family: 'Inter', sans-serif;
  font-size: .78rem;
  font-weight: 600;
  text-decoration: none;
  transition: border-color .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.bio-download-btn svg { width: 12px; height: 12px; flex-shrink: 0; }
.bio-download-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--accent) 50%, transparent);
}

.portrait-medallion {
  position: relative;
  width: 56%;
  max-width: 220px;
  aspect-ratio: 1 / 1;
  flex-shrink: 0;
  border-radius: 50%;
  padding: 6px;
  background: linear-gradient(148deg,
    color-mix(in srgb, var(--accent) 92%, white) 0%,
    var(--accent) 45%,
    color-mix(in srgb, var(--accent) 55%, black) 100%);
  box-shadow: 0 24px 50px -20px rgba(0,0,0,.5), 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent);
  transition: transform .35s ease, box-shadow .35s ease;
}
.portrait-frame:hover .portrait-medallion {
  transform: translateY(-4px);
  box-shadow: 0 30px 58px -18px rgba(0,0,0,.55), 0 0 0 1px var(--accent);
}
.portrait-medallion-inner {
  width: 100%; height: 100%;
  border-radius: 50%;
  overflow: hidden;
  background: var(--bg-elevated);
  border: 3px solid var(--bg-elevated);
}
.portrait-medallion-inner img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) contrast(1.03);
  transform: scale(1.01);
  transition: transform .6s ease, filter .6s ease;
}
.portrait-frame:hover .portrait-medallion-inner img {
  transform: scale(1.06);
  filter: grayscale(0) contrast(1.03);
}
@media (prefers-reduced-motion: reduce) {
  .portrait-medallion-inner img { transition: filter .3s ease; }
}
.portrait-medallion-placeholder {
  display: flex; align-items: center; justify-content: center;
  color: color-mix(in srgb, var(--accent) 55%, var(--text-muted));
}
.portrait-coming-soon-text {
  text-align: center;
  font-size: .78rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: -6px;
}

/* thought of the day -- a big illuminated-manuscript-style monogram
   standing beside the line, refreshed daily via Gemini (see
   app/services/daily_thought.py). The mark sits in a fixed-size,
   flex-centered box rather than being sized by font-size/line-height
   alone -- display serif fonts carry wildly different amounts of
   built-in vertical padding around the glyph, and boxing + centering it
   keeps the letter optically centered against the paragraph regardless
   of which font in the stack actually loads. */
.portrait-thought {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  text-align: left;
}
.portrait-thought-mark {
  flex-shrink: 0;
  width: 72px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Abril Fatface', 'Cinzel Decorative', 'Times New Roman', Times, serif;
  font-weight: 400;
  font-size: 4.9rem;
  line-height: 1;
  background: linear-gradient(160deg,
    color-mix(in srgb, var(--accent) 92%, white),
    var(--accent) 55%,
    color-mix(in srgb, var(--accent) 48%, black));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 3px 10px color-mix(in srgb, var(--accent) 35%, transparent));
}
.portrait-thought-text {
  flex: 1 1 auto;
  min-width: 0;
  font-family: 'Poppins', 'Century Gothic', 'Futura', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: .9rem;
  line-height: 1.6;
  color: var(--text);
  transition: opacity .18s ease;
}
/* the little "step to the next passage" button beside the text -- see
   the toggle script inlined in index.html, which cycles a client-side
   array of today's cached passages (no extra Gemini calls per click) */
.portrait-thought-toggle {
  flex-shrink: 0;
  align-self: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border));
  background: color-mix(in srgb, var(--bg-elevated) 85%, transparent);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: transform .3s ease, background .2s ease, border-color .2s ease, color .2s ease;
}
.portrait-thought-toggle:hover,
.portrait-thought-toggle:focus-visible {
  background: var(--accent);
  color: var(--bg-elevated);
  border-color: var(--accent);
  transform: rotate(110deg);
}
.portrait-thought-toggle:active { transform: rotate(200deg); }
.portrait-thought-toggle svg { display: block; }

.portrait-tag {
  width: 100%;
  background: color-mix(in srgb, var(--bg-elevated) 88%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border));
  border-radius: 14px;
  padding: 12px 16px;
  font-size: .82rem;
  letter-spacing: .01em;
  text-align: center;
}

/* ---------- Section connector (electric line + bulb) ---------- */
.section-connector {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 76px;
  position: relative;
}
.connector-line {
  width: 2px;
  flex: 1;
  background: linear-gradient(to bottom, transparent, var(--border) 25%, var(--border) 75%, transparent);
  position: relative;
  overflow: hidden;
}
.connector-line::after {
  content: "";
  position: absolute;
  left: 0;
  top: -20%;
  width: 100%;
  height: 20%;
  background: linear-gradient(to bottom, transparent, var(--bulb-color, var(--accent)), transparent);
  animation: sparkTravel 2.6s ease-in-out infinite;
}
.section-connector .connector-line:last-child::after { animation-delay: 1.3s; }
.connector-bulb {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--bulb-color, var(--accent));
  box-shadow: 0 0 0 4px var(--accent-soft), 0 0 14px 2px var(--bulb-color, var(--accent));
  margin: 3px 0;
  animation: bulbPulse 2.6s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes sparkTravel {
  0% { top: -20%; }
  100% { top: 100%; }
}
@keyframes bulbPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.25); }
}
@media (prefers-reduced-motion: reduce) {
  .connector-line::after, .connector-bulb { animation: none; }
}

/* ---------- Persona path cards ---------- */
.section { padding: 110px 0; }
.section-head { max-width: 640px; margin-bottom: 52px; }
.section-kicker {
  font-size: .78rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent); font-weight: 600; margin-bottom: 12px;
}
.section-head h2 {
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: clamp(1.8rem, 3.2vw, 2.5rem);
  margin: 0 0 14px;
}
.section-head p { color: var(--text-muted); font-size: 1.02rem; line-height: 1.6; }

.persona-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 22px;
}
.persona-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 30px 26px;
  cursor: pointer;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background-color .25s ease;
  position: relative;
  overflow: hidden;
}
.persona-card:hover {
  transform: translateY(-6px);
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, var(--bg-elevated));
  box-shadow: 0 0 0 1px var(--accent), 0 18px 40px -16px var(--accent);
}
.persona-card.active { border-color: var(--accent); box-shadow: var(--shadow); }
.persona-icon {
  width: 46px; height: 46px;
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
}
.persona-card .audience {
  font-size: .74rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--text-muted); margin-bottom: 8px;
}
.persona-card h3 {
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: 1.18rem;
  margin: 0 0 6px;
}
.persona-role-tag {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 12px;
}
.persona-card p { color: var(--text-muted); font-size: .92rem; line-height: 1.55; margin: 0 0 16px; }
.persona-card .go {
  font-size: .82rem; font-weight: 600; color: var(--accent);
  display: inline-flex; align-items: center; gap: 6px;
}

/* ---------- Persona detail panel (revealed on click) ---------- */
.persona-detail {
  margin-top: 40px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 40px;
  display: none;
  box-shadow: var(--shadow);
}
.persona-detail.open { display: block; animation: revealUp .5s ease; }
@keyframes revealUp { from { opacity: 0; transform: translateY(16px);} to { opacity: 1; transform: translateY(0);} }
.persona-detail h3 {
  font-family: 'Fraunces', serif; font-weight: 500;
  font-size: 1.5rem; margin: 0 0 14px;
}
.persona-detail .narrative { color: var(--text-muted); line-height: 1.7; font-size: 1.02rem; max-width: 68ch; margin-bottom: 26px; }
.stat-row { display: flex; gap: 34px; flex-wrap: wrap; margin-bottom: 26px; }
.stat-item .value { font-family: 'Fraunces', serif; font-size: 1.7rem; color: var(--accent); display: block; }
.stat-item .label { font-size: .8rem; color: var(--text-muted); }

/* ---------- Focus areas ---------- */
.focus-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.focus-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-left: 3px solid var(--border);
  border-radius: 14px;
  padding: 22px 20px;
  min-height: 78px;
  display: flex;
  align-items: center;
  cursor: default;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background-color .25s ease;
}
.focus-card .name {
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.35;
  transition: color .25s ease;
}
/* Each tile illuminates in the theme's accent color on hover/focus. */
.focus-card:hover, .focus-card:focus-visible {
  transform: translateY(-4px);
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--bg-elevated));
  box-shadow: 0 0 0 1px var(--accent), 0 18px 40px -16px var(--accent);
}
.focus-card:hover .name, .focus-card:focus-visible .name { color: var(--accent); }

/* ---------- Credentials ---------- */
.cred-head-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 48px;
  margin-bottom: 52px;
}
.cred-head-row .section-head { margin-bottom: 0; }

.cred-portrait-block {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}
.cred-portrait {
  width: 172px;
  height: 172px;
  border-radius: 50%;
  padding: 5px;
  background: linear-gradient(150deg, var(--accent), color-mix(in srgb, var(--accent) 25%, var(--bg-elevated)));
  box-shadow: 0 20px 44px -20px rgba(0,0,0,.4);
  transition: transform .35s ease, box-shadow .35s ease;
}
.cred-portrait-inner {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  background: var(--bg-elevated);
  border: 3px solid var(--bg-elevated);
}
.cred-portrait-inner img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) contrast(1.03);
  transform: scale(1.01);
  transition: transform .6s ease, filter .6s ease;
}
.cred-portrait:hover {
  transform: translateY(-4px);
  box-shadow: 0 26px 52px -18px rgba(0,0,0,.45);
}
.cred-portrait:hover .cred-portrait-inner img {
  transform: scale(1.06);
  filter: grayscale(0) contrast(1.03);
}
@media (prefers-reduced-motion: reduce) {
  .cred-portrait-inner img { transition: filter .3s ease; }
}
.cred-portrait-caption .name {
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: 1.08rem;
}
.cred-portrait-caption .role {
  color: var(--text-muted);
  font-size: .8rem;
  line-height: 1.5;
  max-width: 200px;
  margin-top: 3px;
}

.cred-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.cred-item {
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px 22px;
  background: var(--bg-elevated);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background-color .25s ease;
}
.cred-item:hover {
  transform: translateY(-4px);
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, var(--bg-elevated));
  box-shadow: 0 0 0 1px var(--accent), 0 18px 40px -16px var(--accent);
}
.cred-item .label { font-weight: 600; margin-bottom: 4px; }
.cred-item .detail { color: var(--text-muted); font-size: .9rem; line-height: 1.5; }

/* ---------- Badges, certificates & awards ---------- */

/* The whole grid is on demand -- collapsed behind this pill by default so
   the Recognition section doesn't take up space until someone asks for it. */
.badges-reveal-btn {
  margin-bottom: 4px;
}
.badges-reveal-icon { color: var(--accent); display: flex; }
.badges-reveal-chevron {
  font-size: 1.1rem;
  line-height: 1;
  transition: transform .25s ease;
}
.badges-reveal-btn.is-open .badges-reveal-chevron { transform: rotate(90deg); }

.badge-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 22px;
}
/* higher specificity than ".badge-grid { display: grid }" above, so the
   [hidden] attribute (toggled by badges-panel.js) actually wins instead of
   being silently overridden by it -- otherwise the grid never stays
   collapsed and the reveal button does nothing. */
.badge-grid[hidden] { display: none; }
.badge-grid.open { animation: revealUp .45s ease; }
.badge-card {
  /* also rendered as a <button> so every real badge is keyboard- and
     click-openable -- reset the button chrome back to the card look. */
  appearance: none;
  width: 100%;
  font: inherit;
  color: inherit;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 26px 18px;
  background: var(--bg-elevated);
  text-align: center;
  cursor: pointer;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background-color .25s ease;
}
.badge-card:hover {
  transform: translateY(-4px);
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, var(--bg-elevated));
  box-shadow: 0 0 0 1px var(--accent), 0 18px 40px -16px var(--accent);
}
.badge-icon {
  width: 48px; height: 48px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  display: flex; align-items: center; justify-content: center;
}
.badge-image {
  width: 64px; height: 64px;
  margin: 0 auto 14px;
  object-fit: contain;
  display: block;
}
.badge-icon svg, .badge-lightbox-icon-variant svg { width: 100%; height: 100%; }
/* category tag: a small icon + label naming what kind of credential this
   is (Badge / Certification / Reward / Recognition) -- shown above the
   title on every tile so a visitor knows what they're about to open
   before they click, not just after. */
.badge-category-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 0 auto 10px;
  padding: 3px 10px 3px 7px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.badge-category-tag-icon { width: 13px; height: 13px; display: flex; flex-shrink: 0; }
.badge-category-tag-icon svg { width: 100%; height: 100%; }
.badge-title { font-family: 'Fraunces', serif; font-weight: 500; font-size: .98rem; margin-bottom: 4px; }
.badge-issuer { font-size: .8rem; color: var(--text-muted); }
.badge-placeholder {
  border-style: dashed;
  background: transparent;
  cursor: default;
}
.badge-placeholder:hover { border-color: var(--border); background: transparent; transform: none; box-shadow: none; }
.badge-placeholder .badge-icon { background: transparent; border: 1px dashed var(--border); color: var(--text-muted); }
.badge-placeholder .badge-title { color: var(--text-muted); font-weight: 400; }
.badge-placeholder .badge-issuer { opacity: .75; }

/* ---------- Badge / certificate lightbox: full-size, on demand ---------- */
.badge-lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3vh 3vw;
  opacity: 0;
  transition: opacity .2s ease;
}
/* same fix as .badge-grid[hidden] above -- without this, the lightbox's own
   "display: flex" wins the specificity tie against the browser's [hidden]
   default and the full-viewport overlay sits there invisibly (opacity: 0)
   but still catching every click on the page. */
.badge-lightbox[hidden] { display: none; }
.badge-lightbox.open { opacity: 1; }
body.badge-lightbox-locked { overflow: hidden; }
.badge-lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--bg) 80%, black);
  backdrop-filter: blur(3px);
}
.badge-lightbox-dialog {
  /* the certificate should own the window, not sit in a small centered
     card -- the dialog fills nearly the whole viewport, and the image
     inside it (see .badge-lightbox-media) grows to fill whatever space
     the title/description footer below it doesn't need. */
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  max-width: 1400px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.6);
  padding: 24px;
  overflow: auto;
  transform: scale(.96);
  transition: transform .2s ease;
}
.badge-lightbox.open .badge-lightbox-dialog { transform: scale(1); }
/* no image to fill the window with (a text-only badge) -- shrink back to a
   compact card instead of a mostly-empty full-window box. */
.badge-lightbox.no-image .badge-lightbox-dialog {
  width: auto;
  height: auto;
  max-width: min(480px, 100%);
}
.badge-lightbox.no-image .badge-lightbox-media { flex: 0 0 auto; }
.badge-lightbox-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease;
}
.badge-lightbox-close:hover { border-color: var(--accent); color: var(--accent); }
/* the certificate fills the window -- this wrapper takes all the vertical
   space the footer text below doesn't need, and the image/icon inside it
   scale to fill that space (object-fit: contain, so nothing crops or
   distorts, whatever the certificate's original size or aspect ratio). */
.badge-lightbox-media {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.badge-lightbox-image {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  border-radius: 10px;
  object-fit: contain;
}
.badge-lightbox-image[hidden] { display: none; }
.badge-lightbox-icon {
  width: 96px; height: 96px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  display: flex; align-items: center; justify-content: center;
}
.badge-lightbox-icon[hidden] { display: none; }
/* one of these four sits inside .badge-lightbox-icon at a time, picked by
   badges-panel.js to match the clicked tile's category */
.badge-lightbox-icon-variant { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; }
.badge-lightbox-icon-variant[hidden] { display: none; }
/* title + description always sit below the image/window, as their own
   fixed-height footer strip rather than crowded under a small photo */
.badge-lightbox-body {
  flex: 0 0 auto;
  width: 100%;
  max-width: 70ch;
  text-align: center;
  padding-top: 18px;
}
.badge-lightbox-category {
  display: inline-block;
  margin-bottom: 8px;
  color: var(--accent);
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.badge-lightbox-body h3 {
  font-family: 'Fraunces', serif; font-weight: 500;
  font-size: 1.3rem; margin: 0 0 6px;
}
.badge-lightbox-meta { color: var(--text-muted); font-size: .9rem; margin-bottom: 12px; }
.badge-lightbox-description { color: var(--text); line-height: 1.6; font-size: .96rem; }

/* ---------- Education, experience & enterprise projects logo strip ----------
   Each category is its own elegantly bordered, demarcated panel, fronted by
   a big illuminated initial (matching the hero's monogram treatment) --
   "Education", "Experience" and "Enterprise Projects" all happen to start
   with E, which is what makes the shared drop-cap read as a deliberate
   little motif rather than a coincidence. */
.logo-strip-group {
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 22px 24px 24px;
  background: color-mix(in srgb, var(--accent) 4%, var(--bg-elevated));
}
.logo-strip-group + .logo-strip-group { margin-top: 18px; }
.logo-strip-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 14px;
}
/* the ring reuses the same gold-gradient medallion treatment as the hero
   portrait frame, so the initial reads as a matching insignia rather than
   a plain letter */
.logo-strip-mark-ring {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  padding: 2px;
  background: linear-gradient(148deg,
    color-mix(in srgb, var(--accent) 92%, white) 0%,
    var(--accent) 45%,
    color-mix(in srgb, var(--accent) 55%, black) 100%);
  display: flex;
  box-shadow: 0 10px 22px -10px rgba(0,0,0,.5);
}
.logo-strip-mark-inner {
  flex: 1;
  border-radius: 50%;
  background: var(--bg-elevated);
  display: flex;
  align-items: center;
  justify-content: center;
}
.logo-strip-mark {
  font-family: 'Abril Fatface', 'Cinzel Decorative', 'Times New Roman', Times, serif;
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 1;
  background: linear-gradient(160deg,
    color-mix(in srgb, var(--accent) 92%, white),
    var(--accent) 55%,
    color-mix(in srgb, var(--accent) 48%, black));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.logo-strip-label {
  font-family: 'Fraunces', serif;
  font-size: 1.2rem; letter-spacing: .01em;
  color: var(--text); font-weight: 500;
  margin-left: -2px;
}
/* Every logo -- whatever size or shape it was uploaded at -- shows inside
   the same fixed-height showcase card, so the whole row reads as one
   consistent strip instead of a jumble of different-sized marks. A
   logo-less entry (plain text chip) gets an identical-height card too, so
   it doesn't stick out among the real logos. */
.logo-row { display: flex; flex-wrap: wrap; align-items: stretch; gap: 12px; }
.logo-chip {
  box-sizing: border-box;
  height: 60px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0 20px;
  font-family: 'Fraunces', serif;
  font-size: .95rem;
  color: var(--text-muted);
  background: var(--bg-elevated);
  letter-spacing: .01em;
  transition: transform .2s ease, border-color .2s ease, color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.logo-chip:hover {
  transform: translateY(-3px);
  border-color: var(--accent);
  color: var(--text);
  background: color-mix(in srgb, var(--accent) 10%, var(--bg-elevated));
  box-shadow: 0 0 0 1px var(--accent), 0 14px 30px -16px var(--accent);
}
.logo-chip-img {
  padding: 0 22px;
  background: #fff;
}
.logo-chip-img:hover { background: #fff; }
.logo-chip-img img {
  height: 36px; width: auto; max-width: 170px; object-fit: contain;
  filter: grayscale(.1) saturate(1.2) contrast(1.02);
  opacity: .97;
  transition: filter .25s ease, opacity .25s ease;
}
.logo-chip-img:hover img { filter: grayscale(0) saturate(1.3); opacity: 1; }

/* ---------- Collage carousel (speech gallery) ---------- */
.collage-stage {
  position: relative;
  user-select: none;
}
/* All slides share the same CSS Grid cell (grid-area) instead of being
   position:absolute, so nothing can ever overlap or clip whatever comes
   after it, no matter how many photos or how tall they are. Only the
   active slide (and, briefly, the one fading out) actually renders --
   every other slide is display:none -- so the grid row (and everything
   below it, like the dots) always hugs whichever collage is on screen
   right now instead of sizing to the tallest collage in the whole set. */
.collage-slides {
  display: grid;
}
.collage-slide {
  display: none;
  grid-area: 1 / 1 / 2 / 2;
  opacity: 0;
  pointer-events: none;
}
.collage-slide.active,
.collage-slide.leaving {
  display: block;
}
.collage-slide.active { opacity: 1; pointer-events: auto; }
/* True masonry via CSS columns: each photo card (image + its own caption
   below it, in normal flow -- never on top of the image) flows into
   whichever column has room next, keeping its own aspect ratio with
   nothing cropped and small, uniform gaps between cards. */
.collage-mosaic {
  --collage-gap: 10px;
  column-count: 3;
  column-gap: var(--collage-gap);
  border-radius: 20px;
}
.collage-tile {
  display: inline-block;
  width: 100%;
  break-inside: avoid;
  margin-bottom: var(--collage-gap);
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg-soft);
  opacity: 1;
  filter: blur(0) brightness(1);
  transform: scale(1) translateY(0);
  box-shadow: 0 0 0 0 transparent;
  transition: opacity .45s ease, filter .45s ease, transform .45s ease, box-shadow .3s ease;
  transition-delay: calc(var(--tile-i, 0) * 70ms);
}
.collage-tile:hover, .collage-tile:focus-within {
  box-shadow: 0 0 0 1px var(--accent), 0 18px 40px -16px var(--accent);
}
.collage-tile img {
  width: 100%; height: auto; display: block;
  filter: grayscale(1);
  transition: filter .5s ease;
}
.collage-tile:hover img, .collage-tile:focus-within img { filter: grayscale(0); }
@media (prefers-reduced-motion: reduce) {
  .collage-tile img { transition: filter .3s ease; }
}
.collage-tile-caption {
  padding: 9px 12px 10px;
  font-size: .78rem; line-height: 1.35; color: var(--text-muted);
  background: var(--bg-elevated);
}
.collage-slide.leaving .collage-tile {
  opacity: 0;
  filter: blur(9px) brightness(1.3);
  transform: scale(1.08) translateY(-14px);
}
.collage-tile.enter-start {
  opacity: 0 !important;
  filter: blur(9px) brightness(1.3) !important;
  transform: scale(.92) translateY(14px) !important;
  transition: none !important;
}
.collage-info {
  padding-top: 18px;
  opacity: 1;
  transition: opacity .35s ease .2s;
}
.collage-slide.leaving .collage-info { opacity: 0; transition-delay: 0s; }
.collage-event { font-size: 1.15rem; font-weight: 500; margin-bottom: 4px; }
.collage-caption { font-size: .88rem; color: var(--text-muted); }
.collage-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 22px;
  flex-wrap: wrap;
  gap: 12px;
}
.collage-dots { display: flex; gap: 8px; }
.collage-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  border: none;
  background: var(--border);
  cursor: pointer;
  padding: 0;
  transition: background-color .2s ease, transform .2s ease;
}
.collage-dot.active { background: var(--accent); transform: scale(1.25); }
.collage-dot:hover { background: var(--accent); }
.collage-hint {
  font-size: .78rem;
  color: var(--text-muted);
  letter-spacing: .02em;
}

.gallery-empty {
  border: 1px dashed var(--border);
  border-radius: 16px;
  padding: 40px;
  text-align: center;
  color: var(--text-muted);
  font-size: .92rem;
}

/* ---------- Contact / footer ---------- */
.contact-band {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 80px 0 70px;
  text-align: center;
  background: radial-gradient(ellipse 900px 420px at 50% 0%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 70%);
}
.contact-band .section-kicker { text-align: center; }
.contact-band h2 { font-family: 'Fraunces', serif; font-weight: 500; font-size: 2rem; margin: 0 0 14px; }
.contact-band p { color: var(--text-muted); margin-bottom: 28px; }
.contact-band p.booking-note { font-size: .8rem; margin: 0 0 22px; opacity: .8; }
.booking-cta svg { flex-shrink: 0; }

/* Nav CTA -- always visible (even on mobile, where .nav-links is hidden)
   so "book a call" stays one click away from anywhere on the page. */
.nav-book-cta {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--accent); color: var(--accent-contrast) !important;
  padding: 9px 17px; border-radius: 999px;
  font-size: .84rem; font-weight: 600;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease;
}
.nav-book-cta:hover { transform: translateY(-2px); box-shadow: var(--shadow); }

/* ---------- Self-hosted 30-min booking widget ---------- */
.booking-anchor { scroll-margin-top: 130px; }
.booking-widget {
  text-align: left;
  max-width: 640px;
  margin: 0 auto 22px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 26px 28px;
  box-shadow: 0 26px 60px -30px rgba(0,0,0,.35), 0 0 0 1px color-mix(in srgb, var(--accent) 14%, var(--border));
  transition: transform .3s ease, box-shadow .3s ease;
}
.booking-widget:hover {
  transform: translateY(-3px);
  box-shadow: 0 32px 70px -28px rgba(0,0,0,.4), 0 0 0 1px var(--accent);
}
.booking-widget-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: -26px -28px 20px;
  padding: 20px 28px;
  border-radius: 22px 22px 0 0;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 16%, var(--bg-elevated)), var(--bg-elevated) 75%);
  border-bottom: 1px solid var(--border);
}
.booking-widget-icon {
  width: 44px; height: 44px; flex-shrink: 0;
  border-radius: 13px;
  background: var(--accent); color: var(--accent-contrast);
  display: flex; align-items: center; justify-content: center;
}
.booking-widget-heading { flex: 1; min-width: 0; }
.booking-widget-title { font-family: 'Fraunces', serif; font-size: 1.15rem; font-weight: 500; margin-bottom: 4px; }
.booking-widget-sub { font-size: .82rem; color: var(--text-muted); }
.booking-widget-badge {
  flex-shrink: 0;
  font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  background: var(--accent-soft); color: var(--accent);
  padding: 6px 12px; border-radius: 999px;
  white-space: nowrap;
}
.booking-widget-body { display: grid; grid-template-columns: 170px 1fr; gap: 22px; align-items: start; }
.booking-date-col { display: flex; flex-direction: column; gap: 7px; }
.booking-date-col label { font-size: .78rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; }
.booking-date-col input[type="date"] {
  font-family: inherit; font-size: .9rem; padding: 9px 10px;
  border: 1px solid var(--border); border-radius: 9px; background: var(--bg); color: var(--text);
}
.booking-slots-col { min-height: 44px; }
.booking-slots { display: flex; flex-wrap: wrap; gap: 8px; }
.booking-slots-empty { font-size: .84rem; color: var(--text-muted); padding: 8px 0; }
.booking-slot-btn {
  font-family: inherit; font-size: .84rem; font-weight: 600; cursor: pointer;
  padding: 8px 14px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--bg); color: var(--text); transition: border-color .15s ease, color .15s ease;
}
.booking-slot-btn:hover { border-color: var(--accent); color: var(--accent); }
.booking-form { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 10px; }
.booking-form[hidden] { display: none; } /* the display:flex above would otherwise beat the browser's default [hidden] handling */
.booking-form-selected { font-size: .88rem; font-weight: 600; margin-bottom: 4px; }
.booking-form-row input, .booking-form-row textarea {
  width: 100%; font-family: inherit; font-size: .9rem; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: 9px; background: var(--bg); color: var(--text); resize: vertical;
}
.booking-form-actions { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 4px; }
.booking-error { font-size: .82rem; color: #A23B3B; }
.booking-success {
  display: flex; align-items: flex-start; gap: 12px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--border);
}
.booking-success[hidden] { display: none; } /* same fix as .booking-form -- this was showing "You're booked" before any booking was made */
.booking-success-icon {
  width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: var(--accent-contrast);
  display: flex; align-items: center; justify-content: center; font-size: .84rem; flex-shrink: 0;
}
.booking-success-title { font-weight: 600; margin-bottom: 3px; }
.booking-success-sub { font-size: .84rem; color: var(--text-muted); }

.booking-trust {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 8px 22px;
  max-width: 640px; margin: 0 auto 30px;
  font-size: .8rem; color: var(--text-muted);
}
.booking-trust span { display: inline-flex; align-items: center; gap: 6px; }
.booking-trust svg { flex-shrink: 0; color: var(--accent); }

@media (max-width: 560px) {
  .booking-widget-body { grid-template-columns: 1fr; }
  .booking-form-actions { flex-direction: column-reverse; align-items: stretch; }
  .booking-widget-head { flex-wrap: wrap; }
  .booking-widget-badge { margin-left: 60px; }
}

.email-chip {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 9px 16px;
}
.email-chip-top { display: inline-flex; align-items: center; gap: 7px; }
.email-chip-top svg { flex-shrink: 0; color: var(--accent); }
.email-chip-label { font-weight: 600; font-size: .84rem; }
.email-chip-addr { font-size: .7rem; color: var(--text-muted); margin-left: 21px; }

footer { padding: 40px 0; text-align: center; color: var(--text-muted); font-size: .82rem; }

/* ---------- Reveal-on-scroll ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in-view { opacity: 1; transform: translateY(0); }

/* ---------- AI concierge chat widget ---------- */
.chat-launcher {
  position: fixed; bottom: 26px; right: 26px; z-index: 70;
  width: 58px; height: 58px; border-radius: 50%;
  background: var(--accent); color: var(--accent-contrast);
  border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow);
  transition: transform .2s ease;
}
.chat-launcher:hover { transform: scale(1.06); }

.chat-window {
  position: fixed; bottom: 96px; right: 26px; z-index: 70;
  width: 360px; max-width: calc(100vw - 40px);
  height: 480px; max-height: 70vh;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: var(--shadow);
  display: none;
  flex-direction: column;
  overflow: hidden;
}
.chat-window.open { display: flex; animation: revealUp .35s ease; }
.chat-header {
  padding: 16px 18px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
}
.chat-header strong { font-family: 'Fraunces', serif; font-weight: 500; }
.chat-header small { display: block; color: var(--text-muted); font-size: .74rem; }
.chat-close { background: none; border: none; cursor: pointer; color: var(--text-muted); font-size: 1.1rem; }
.chat-body { flex: 1; overflow-y: auto; padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; }
.chat-msg { max-width: 85%; padding: 10px 14px; border-radius: 14px; font-size: .88rem; line-height: 1.45; }
.chat-msg.bot { background: var(--bg-soft); align-self: flex-start; border-bottom-left-radius: 4px; }
.chat-msg.user { background: var(--accent); color: var(--accent-contrast); align-self: flex-end; border-bottom-right-radius: 4px; }
.chat-input-row { display: flex; gap: 8px; padding: 14px; border-top: 1px solid var(--border); }
.chat-input-row input {
  flex: 1; border: 1px solid var(--border); border-radius: 999px;
  padding: 10px 14px; font-size: .88rem; background: var(--bg);
  color: var(--text); font-family: inherit;
}
.chat-input-row button {
  background: var(--accent); color: var(--accent-contrast);
  border: none; border-radius: 999px; padding: 0 18px; cursor: pointer;
  font-weight: 600;
}

/* ---------- Responsive ---------- */
@media (max-width: 880px) {
  .hero-grid { grid-template-columns: 1fr; }
  .portrait-frame { order: -1; }
  .persona-grid { grid-template-columns: 1fr; }
  .badge-grid { grid-template-columns: repeat(2, 1fr); }
  .cred-list { grid-template-columns: 1fr; }
  .cred-head-row { flex-direction: column; }
  .cred-portrait-block { align-self: center; }
  .focus-grid { grid-template-columns: repeat(2, 1fr); }
  .nav-links { display: none; }
  .collage-mosaic { column-count: 2; }
  .section-connector { height: 56px; }
}
@media (max-width: 560px) {
  .focus-grid { grid-template-columns: 1fr; }
  .expertise-label { display: none; }
  .expertise-delim { display: none; }
  .flipboard { min-width: 200px; }
  .flipboard-card { font-size: .78rem; }
  .portrait-thought-mark { width: 56px; height: 64px; font-size: 3.9rem; }
}