/* ==========================================================================
   MCBcDNA — UC Berkeley
   Corporate design system v3
   Inter throughout · white / deep navy / azure / orange (from the club logo)
   ========================================================================== */

/* Fonts loaded from HTML <link> (avoid @import — it blocks CSS parsing). */

:root {
  --paper: #fdfcf9;
  --paper-warm: #f5f1e8;
  --ink: #16191f;
  --ink-soft: #3d4350;
  --muted: #6e7480;
  --hairline: #e7e2d6;

  /* Palette sampled from the MCBcDNA logo: azure-blue helix (#00a0e8), orange helix (#e88a00) */
  --navy: #0a2540;
  --navy-deep: #061a2f;
  --gold: #d97b00;
  --gold-bright: #f09a1a;
  --gold-pale: #f6ddb0;
  --teal: #0091d4;
  --teal-bright: #2ab2ea;
  --sky: #0091d4;

  --maxw: 1180px;
  --display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --text: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

  --ease-out: cubic-bezier(.22,.61,.36,1);
  --shadow-card: 0 1px 2px rgba(22,25,31,.05), 0 10px 34px rgba(22,25,31,.07);
  --shadow-lift: 0 2px 6px rgba(22,25,31,.08), 0 20px 50px rgba(22,25,31,.14);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; border-radius: 4px; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--text);
  font-size: 16.5px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
::selection { background: rgba(240,154,26,.28); }

/* (paper-grain overlay removed in v3 for a cleaner, flatter look) */

/* ============ TYPE ============ */
h1, h2, h3 {
  font-family: var(--display);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.06;
  letter-spacing: -0.028em;
}
h1 { font-size: clamp(2.7rem, 6vw, 4.6rem); }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.7rem); margin-bottom: 24px; }
h3 { font-size: 1.32rem; font-weight: 650; letter-spacing: -0.015em; }
h4 {
  font-family: var(--text); font-weight: 600;
  font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted);
}
p { font-size: 1.02rem; color: var(--ink-soft); }
a { color: var(--sky); text-decoration: none; transition: color .15s ease; }
a:hover { color: #006da0; }
em.accent { font-family: var(--display); font-style: normal; font-weight: 700; color: var(--gold); }

.kicker {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 0.71rem; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--sky);
  margin-bottom: 22px;
}
.kicker::before {
  content: ""; width: 30px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--teal) 0 55%, var(--gold) 55% 100%);
}
.center .kicker::before { display: none; }

.lead {
  font-family: var(--display);
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 760px;
}
.center { text-align: center; }
.center .lead { margin-left: auto; margin-right: auto; }

/* ============ NAV ============ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background: rgba(253,252,249,0.9);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--hairline);
  transition: transform .4s var(--ease-out);
}
.nav.hidden { transform: translateY(-100%); }
.nav-wrap {
  max-width: var(--maxw); margin: 0 auto; padding: 13px 32px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: 12px; color: var(--ink); }
.brand img.logo {
  width: 42px; height: 42px; object-fit: contain; flex-shrink: 0;
  filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='r' color-interpolation-filters='sRGB'><feColorMatrix type='matrix' values='1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  -1 -1 -1 3 0'/></filter></svg>#r");
}
.brand .brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand .brand-text strong {
  font-family: var(--display); font-weight: 600; font-size: 1.15rem; color: var(--ink);
}
.brand .brand-text small {
  font-size: 0.64rem; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--muted);
}
.nav-links { display: flex; gap: 32px; align-items: center; }
.nav-links a {
  position: relative;
  color: var(--ink-soft); font-size: 0.82rem; font-weight: 500;
  letter-spacing: 0.04em; padding: 6px 0;
  transition: color .22s ease;
}
.nav-links a:not(.nav-cta)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  border-radius: 2px; background: linear-gradient(90deg, var(--teal), var(--gold));
  transform: scaleX(0); transform-origin: center;
  transition: transform .3s var(--ease-out);
}
.nav-links a:hover { color: var(--ink); }
.nav-links a:not(.nav-cta):hover::after,
.nav-links a:not(.nav-cta).active::after { transform: scaleX(1); }
.nav-links a.active { color: var(--ink); }
.nav-links a.nav-cta {
  border: 1px solid var(--ink); border-radius: 999px;
  padding: 8px 22px; color: var(--ink);
  transition: background .22s ease, color .22s ease, transform .22s ease, box-shadow .22s ease;
}
.nav-links a.nav-cta:hover { background: var(--ink); color: #fff; transform: translateY(-1px); box-shadow: 0 6px 18px rgba(20,20,30,.16); }
.nav-links a.nav-cta.active { background: var(--ink); color: #fff; }

.nav-toggle {
  display: none; background: transparent; border: 0; cursor: pointer;
  padding: 10px; -webkit-appearance: none; appearance: none;
}
.nav-toggle .bars { display: block; width: 22px; height: 2px; background: var(--ink); position: relative; }
.nav-toggle .bars::before, .nav-toggle .bars::after {
  content: ""; position: absolute; left: 0; right: 0; height: 2px; background: var(--ink);
  transition: transform .2s ease, top .2s ease, bottom .2s ease;
}
.nav-toggle .bars::before { top: -7px; }
.nav-toggle .bars::after { bottom: -7px; }
.nav-toggle[aria-expanded="true"] .bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .bars::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .bars::after { bottom: 0; transform: rotate(-45deg); }

@media (max-width: 760px) {
  .nav-wrap { padding: 10px 18px; }
  .nav-toggle { display: inline-flex; }
  .nav-links {
    display: none; flex-direction: column; align-items: stretch;
    flex-basis: 100%; gap: 0;
    margin: 8px -18px -10px; padding: 4px 0 10px;
    border-top: 1px solid var(--hairline);
    background: var(--paper);
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 13px 22px; }
  .nav-links a.active { border-bottom-color: transparent; box-shadow: inset 3px 0 0 var(--gold); }
  .nav-links a.nav-cta { margin: 10px 22px 4px; text-align: center; }
}

/* ============ LAYOUT ============ */
main { padding-top: 69px; }
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 32px; }
section { padding: 72px 0; }
section.tight { padding: 52px 0; }
@media (max-width: 760px) {
  section { padding: 48px 0; }
  section.tight { padding: 40px 0; }
}
/* a divider means the two sections it sits between don't each need full padding */
.divider + section, section:has(+ .divider) { padding-top: 40px; padding-bottom: 40px; }
.divider {
  max-width: 560px; margin: 0 auto; padding: 0 32px; position: relative;
}
.divider hr {
  border: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--hairline) 22%, var(--hairline) 78%, transparent);
  position: relative; overflow: visible;
}
/* centered brand dot so the rule reads as an intentional separator, not a gap */
.divider hr::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 7px; height: 7px; border-radius: 50%;
  transform: translate(-50%, -50%);
  background: var(--gold); box-shadow: 0 0 0 5px var(--paper), 0 0 14px rgba(198,160,74,.55);
}

/* ============ HERO ============ */
.hero {
  position: relative;
  min-height: calc(100vh - 69px);
  background: var(--navy-deep);
  color: #fff;
  display: flex; align-items: flex-end;
  overflow: hidden;
}
.hero.short { min-height: 58vh; }
.hero .hero-bg {
  position: absolute; left: 0; right: 0; top: -18%; height: 136%;
  overflow: hidden; will-change: transform;
}
.hero .hero-bg img {
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0.52; filter: saturate(0.75) contrast(1.03);
  animation: kenburns 22s var(--ease-out) both;
  transform-origin: center 30%;
}
@keyframes kenburns {
  from { transform: scale(1.07); }
  to { transform: scale(1); }
}
.hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,21,38,.3) 0%, rgba(11,21,38,.5) 50%, rgba(11,21,38,.94) 100%);
}
/* helix watermark, echoing the logo */
.hero::before {
  content: ""; position: absolute; z-index: 1;
  right: -60px; bottom: 30px;
  width: 560px; height: 90px; opacity: .16;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 32' fill='none'%3E%3Cpath d='M2 6C30 6 45 26 70 26S108 6 134 6s38 20 64 20' stroke='white' stroke-width='2'/%3E%3Cpath d='M2 26C30 26 45 6 70 6s38 20 64 20 38-20 64-20' stroke='white' stroke-width='2'/%3E%3C/svg%3E") center / contain no-repeat;
  pointer-events: none;
}
@media (max-width: 760px) { .hero::before { display: none; } }
.hero .hero-content {
  position: relative; z-index: 2;
  max-width: var(--maxw); width: 100%;
  margin: 0 auto; padding: 150px 32px 96px;
}
.hero .kicker { color: rgba(255,255,255,.78); }
.hero .kicker::before { background: rgba(255,255,255,.55); }
.hero h1 { color: #fff; max-width: 900px; }
.hero h1 .line { display: block; }
.hero h1 .line span {
  display: block;
  opacity: 0; transform: translateY(30px);
  animation: lineup 1s var(--ease-out) forwards;
}
.hero h1 .line:nth-child(2) span { animation-delay: .14s; }
.hero h1 .line:nth-child(3) span { animation-delay: .28s; }
@keyframes lineup { to { opacity: 1; transform: translateY(0); } }
/* emphasized word: large serif italic with layered blue + gold swash */
.hero h1 { position: relative; }
/* soft blue glow behind the headline for depth */
.hero h1::before {
  content: ""; position: absolute; z-index: -1;
  left: -14%; top: -22%; width: 86%; height: 160%;
  background: radial-gradient(ellipse 52% 52% at 32% 55%, rgba(143,182,204,.22), rgba(143,182,204,0) 70%);
  pointer-events: none;
}
.hero h1 em {
  font-family: "Fraunces", Georgia, serif;
  font-style: italic; font-weight: 500;
  font-size: 1.14em; line-height: 1.05;
  color: #fff; letter-spacing: 0.005em;
  padding: 0 .1em .2em 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 24' preserveAspectRatio='none'%3E%3Cpath d='M10 17C104 10 236 7 316 12C230 13 104 16 10 20Z' fill='%238FB6CC' fill-opacity='.85'/%3E%3Cpath d='M2 10C88 2 214 0 298 6C212 5 90 8 2 13Z' fill='%23C6A04A' fill-opacity='.95'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 0% .24em;
  animation: swashIn .9s var(--ease-out) .7s forwards;
}
@keyframes swashIn { to { background-size: 100% .24em; } }
@media (prefers-reduced-motion: reduce) {
  .hero h1 em { animation: none; background-size: 100% .24em; }
}
/* two-tone headings: orange + blue */
h2 .tt-o { color: var(--gold); }
h2 .tt-b { color: var(--sky); }
.hero .sub {
  margin-top: 26px; max-width: 600px;
  font-size: 1.08rem; line-height: 1.75; color: rgba(255,255,255,.85);
  opacity: 0; animation: fadeup 1s var(--ease-out) .5s forwards;
}
.hero .hero-cta {
  margin-top: 40px; display: flex; gap: 14px; flex-wrap: wrap;
  opacity: 0; animation: fadeup 1s var(--ease-out) .68s forwards;
}
@keyframes fadeup {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero .hero-bg img { animation: none; }
  .hero h1 .line span, .hero .sub, .hero .hero-cta { animation: none; transform: none; opacity: 1; }
}

/* ============ MARQUEE ============ */
.marquee {
  background: var(--navy-deep);
  border-top: 1px solid rgba(255,255,255,.08);
  overflow: hidden; padding: 17px 0;
  position: relative; z-index: 3;
}
.marquee .track {
  display: flex; gap: 0; width: max-content;
  animation: marquee 36s linear infinite;
}
.marquee span {
  font-size: 0.74rem; font-weight: 600; letter-spacing: 0.26em;
  text-transform: uppercase; color: rgba(255,255,255,.6);
  white-space: nowrap; padding: 0 18px;
}
.marquee span i {
  font-style: normal; color: var(--gold-bright); padding-right: 36px;
}
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee .track { animation: none; } }

/* ============ BUTTONS ============ */
.btn {
  display: inline-block;
  font-family: var(--text); font-weight: 600;
  font-size: 0.85rem; letter-spacing: 0.03em;
  padding: 15px 32px; border-radius: 999px;
  border: 1px solid var(--ink); color: var(--ink); background: transparent;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .18s ease, box-shadow .18s ease;
  cursor: pointer;
}
.btn:hover { background: var(--ink); color: #fff; transform: translateY(-2px); box-shadow: var(--shadow-card); }
.btn.primary { background: var(--ink); color: #fff; }
.btn.primary:hover { background: var(--navy); border-color: var(--navy); }
.btn.gold {
  background: linear-gradient(105deg, var(--gold) 0%, var(--gold-bright) 100%);
  border-color: transparent; color: #fff;
}
.btn.gold:hover {
  background: linear-gradient(105deg, var(--gold-bright) 0%, var(--gold-bright) 100%);
  border-color: transparent; color: #fff;
}
/* newsletter CTA — club colors, swaps on hover */
.btn.newsletter {
  background: var(--gold-bright); border-color: var(--gold-bright); color: var(--navy);
  font-weight: 700;
}
.btn.newsletter:hover {
  background: var(--teal); border-color: var(--teal); color: #fff;
  transform: translateY(-2px);
}
.btn.light { border-color: rgba(255,255,255,.65); color: #fff; }
.btn.light:hover { background: #fff; color: var(--ink); border-color: #fff; }
.btn.light.solid { background: #fff; color: var(--ink); border-color: #fff; }
.btn.light.solid:hover { background: transparent; color: #fff; }

/* ============ STATEMENT ============ */
.statement { text-align: center; }
.statement .lead {
  font-size: clamp(1.35rem, 2.8vw, 1.9rem);
  color: var(--ink);
  max-width: 900px; margin: 0 auto;
  line-height: 1.5;
}
.statement .lead em { color: var(--gold); }
.statement .note { margin-top: 28px; font-size: 0.9rem; color: var(--muted); font-style: normal; }

/* ============ VALUES ============ */
.values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; margin-top: 40px; }
@media (max-width: 880px) { .values { grid-template-columns: 1fr; } }
.value { display: flex; flex-direction: column; }
.value .photo {
  aspect-ratio: 4 / 3; overflow: hidden; border-radius: 12px;
  background: var(--paper-warm); margin-bottom: 24px;
}
.value .photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out); }
.value:hover .photo img { transform: scale(1.05); }
.value .num { font-family: var(--display); font-style: normal; font-size: 1rem; color: var(--gold); margin-bottom: 8px; }
.value h3 { margin-bottom: 10px; }
.value p { color: var(--muted); font-size: 0.97rem; }

/* ============ STAT BAND ============ */
.stat-band {
  background: var(--navy-deep); color: #fff;
  padding: 80px 0;
  position: relative; overflow: hidden;
}
.stat-band::before {
  content: ""; position: absolute; inset: -30%;
  background:
    radial-gradient(46% 60% at 18% 20%, rgba(0,160,232,.17), transparent 60%),
    radial-gradient(42% 56% at 85% 85%, rgba(198,160,74,.14), transparent 60%),
    radial-gradient(36% 48% at 65% 10%, rgba(143,182,204,.10), transparent 60%);
  animation: bandDrift 26s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes bandDrift {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(4%, 6%) scale(1.08); }
}
@media (prefers-reduced-motion: reduce) { .stat-band::before { animation: none; } }
.stat-band::after {
  content: ""; position: absolute;
  right: -80px; top: 40px;
  width: 620px; height: 100px; opacity: .07;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 32' fill='none'%3E%3Cpath d='M2 6C30 6 45 26 70 26S108 6 134 6s38 20 64 20' stroke='white' stroke-width='2'/%3E%3Cpath d='M2 26C30 26 45 6 70 6s38 20 64 20 38-20 64-20' stroke='white' stroke-width='2'/%3E%3C/svg%3E") center / contain no-repeat;
  pointer-events: none;
}
.stat-band .container { position: relative; }
.stat-band .grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 56px;
  align-items: start;
}
@media (max-width: 860px) { .stat-band .grid { grid-template-columns: 1fr; gap: 44px; } }
.stat-band .stat {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(3.4rem, 8vw, 5.8rem); line-height: 1;
  color: var(--gold-bright); letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.stat-band .stat-label {
  margin-top: 16px; font-size: 0.93rem; line-height: 1.65;
  color: rgba(255,255,255,.72); max-width: 320px;
}
.stat-band .stat-note {
  margin-top: 64px; padding-top: 44px;
  border-top: 1px solid rgba(255,255,255,.13);
  font-family: var(--display); font-size: 1.18rem; line-height: 1.75;
  color: rgba(255,255,255,.87); max-width: 860px;
}

/* ============ FEATURE ROWS ============ */
.feature {
  display: grid; grid-template-columns: 1.05fr 1fr; gap: 64px; align-items: center;
  padding: 48px 0;
}
.feature + .feature { border-top: 1px solid var(--hairline); }
.feature.reverse .feature-img { order: 2; }
@media (max-width: 820px) {
  .feature, .feature.reverse { grid-template-columns: 1fr; gap: 30px; padding: 48px 0; }
  .feature.reverse .feature-img { order: 0; }
}
.feature-img {
  aspect-ratio: 4 / 3; overflow: hidden; border-radius: 12px;
  background: var(--paper-warm);
  box-shadow: var(--shadow-card);
}
.feature-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out); }
.feature:hover .feature-img img { transform: scale(1.04); }
.feature-img.contain img { object-fit: contain; padding: 20px; transition: none; }
.feature:hover .feature-img.contain img { transform: none; }
.feature .idx {
  font-family: var(--display); font-style: normal;
  font-size: 1.05rem; color: var(--gold); margin-bottom: 12px; display: block;
}
.feature h2 { margin-bottom: 14px; }
.feature .q {
  font-family: var(--display); font-style: normal;
  font-size: 1.14rem; color: var(--sky); margin-bottom: 14px;
}
.feature p { color: var(--muted); }
.feature p + p { margin-top: 14px; }
.feature .btn { margin-top: 28px; }

/* ============ TEAM ============ */
.team { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; margin-top: 40px; }
@media (max-width: 980px) { .team { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px) { .team { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 440px) { .team { grid-template-columns: 1fr; } }
.member { display: flex; flex-direction: column; }
.member .photo {
  aspect-ratio: 1 / 1; border-radius: 12px; overflow: hidden;
  background: linear-gradient(150deg, #fdeeda, #d9f0fb);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-style: normal;
  font-size: 2.7rem; font-weight: 500; color: var(--navy);
  margin-bottom: 15px;
  transition: box-shadow .25s ease, transform .25s ease;
}
.member:hover .photo { transform: translateY(-4px); box-shadow: var(--shadow-card); }
.member .photo img { width: 100%; height: 100%; object-fit: cover; }
.member .name { font-weight: 600; font-size: 1.02rem; color: var(--ink); }
.member .role {
  font-family: var(--display); font-style: normal; font-weight: 600;
  color: var(--sky); font-size: 0.88rem; margin-top: 1px;
}
.member .meta { font-size: 0.8rem; color: var(--muted); margin-top: 5px; line-height: 1.5; }

/* ============ WHY GRID ============ */
.why-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 68px; margin-top: 52px; }
@media (max-width: 880px) { .why-grid { grid-template-columns: 1fr; gap: 52px; } }
.why-col h3 { font-size: 1.7rem; margin-bottom: 12px; }
.why-col p.intro { color: var(--muted); margin-bottom: 28px; font-size: 0.97rem; }
.logo-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.logo-tile {
  background: #fff; border: 1px solid var(--hairline); border-radius: 10px;
  padding: 16px; min-height: 86px;
  display: flex; align-items: center; justify-content: center; text-align: center;
  font-weight: 600; font-size: 0.8rem; color: var(--navy);
  transition: border-color .15s ease, box-shadow .2s ease, transform .2s ease;
}
.logo-tile:hover { border-color: var(--gold-pale); box-shadow: var(--shadow-card); transform: translateY(-2px); }
.logo-tile img {
  max-height: 50px; width: auto; height: auto; object-fit: contain;
  filter: grayscale(1) opacity(.72); transition: filter .25s ease;
}
.logo-tile:hover img { filter: grayscale(0) opacity(1); }
.speakers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.speaker { text-align: center; }
.speaker .portrait {
  width: 82%; max-width: 118px; aspect-ratio: 1/1; border-radius: 50%;
  overflow: hidden; background: var(--paper-warm);
  margin: 0 auto 14px; border: 1px solid var(--hairline);
  box-shadow: var(--shadow-card);
}
.speaker .portrait img { width: 100%; height: 100%; object-fit: cover; }
.speaker .speaker-name { font-weight: 600; font-size: 0.9rem; color: var(--ink); line-height: 1.35; }
.speaker .speaker-title { font-size: 0.82rem; color: var(--muted); margin-top: 3px; line-height: 1.4; }
.speaker .speaker-org {
  display: inline-block; margin-top: 8px;
  font-weight: 600; font-size: 0.67rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--gold);
}

/* ============ SPEAKER CAROUSEL (auto-rotating) ============ */
.spk-carousel {
  overflow: hidden; position: relative; margin-top: 46px;
  padding: 22px 0 26px;
  /* soft fade at both edges */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.spk-carousel .ctrack {
  display: flex; width: max-content;
  animation: cscroll 60s linear infinite;
}
/* pause on hover (CSS) and via .paused class (JS reinforcement) */
.spk-carousel:hover .ctrack,
.spk-carousel.paused .ctrack { animation-play-state: paused; }
@keyframes cscroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .spk-carousel .ctrack { animation: none; } }

.spk-cell {
  width: 214px; flex: 0 0 auto; margin-right: 20px;
  position: relative; isolation: isolate;
  background: linear-gradient(180deg, #ffffff 0%, #fbf7ef 100%);
  border-radius: 18px;
  padding: 28px 18px 22px; text-align: center;
  box-shadow: 0 6px 18px rgba(20,22,34,.06);
  transition: transform .35s var(--ease-out), box-shadow .35s ease;
}
/* gradient hairline border via mask */
.spk-cell::before {
  content: ""; position: absolute; inset: 0; border-radius: 18px; padding: 1px;
  background: linear-gradient(150deg, rgba(143,182,204,.6), rgba(198,160,74,.5));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: .5; transition: opacity .35s ease; pointer-events: none;
}
.spk-cell:hover {
  transform: translateY(-9px) scale(1.03);
  box-shadow: 0 24px 46px rgba(20,22,34,.18);
  z-index: 2;
}
.spk-cell:hover::before { opacity: 1; }
/* gradient ring portrait */
.spk-cell .portrait {
  width: 98px; height: 98px; border-radius: 50%; margin: 0 auto 15px;
  padding: 3px; background: linear-gradient(135deg, var(--sky) 0%, var(--gold) 100%);
  box-shadow: 0 4px 14px rgba(20,22,34,.12);
}
.spk-cell .portrait img {
  width: 100%; height: 100%; object-fit: cover; border-radius: 50%;
  border: 3px solid #fff; background: var(--paper-warm);
}
.spk-cell .n { font-weight: 700; font-size: 0.92rem; color: var(--ink); line-height: 1.3; }
.spk-cell .t { font-size: 0.78rem; color: var(--muted); margin-top: 4px; line-height: 1.4; }
.spk-cell .o {
  display: inline-block; margin-top: 11px;
  padding: 4px 11px; border-radius: 999px;
  background: rgba(120,168,198,.12);
  font-weight: 700; font-size: 0.64rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--navy);
}

/* ============ OUTCOMES ============ */
.outcomes {
  display: grid; grid-template-columns: 1fr 1fr; gap: 68px;
  align-items: center; margin-top: 44px;
}
@media (max-width: 800px) { .outcomes { grid-template-columns: 1fr; gap: 34px; } }
.donut-wrap { display: flex; justify-content: center; }
.donut { width: 100%; max-width: 330px; height: auto; overflow: visible; }
.donut circle[stroke]:not(:first-child) { transition: stroke-width .25s ease; }
/* interactive pie */
.donut .seg {
  cursor: pointer;
  transition: transform .22s var(--ease-out), opacity .22s ease;
  transform-origin: 100px 100px;
}
.donut.has-hl .seg { opacity: .35; }
.donut.has-hl .seg.hl { opacity: 1; transform: scale(1.06); }
.donut .pie-labels { pointer-events: none; }
.legend-item[data-i] { cursor: pointer; transition: background .15s ease, padding-left .15s ease; border-radius: 8px; }
.legend-item.hl { background: var(--paper-warm); padding-left: 10px; }
.legend-item.hl .lbl { color: var(--ink); font-weight: 600; }
.donut text.center-num { font-family: var(--display); font-size: 30px; font-weight: 500; fill: var(--ink); }
.donut text.center-label { font-family: var(--text); font-size: 9px; font-weight: 600; letter-spacing: 2.4px; fill: var(--muted); }
.legend { display: grid; gap: 0; }
.legend-item {
  display: grid; grid-template-columns: 12px 1fr auto; gap: 16px; align-items: center;
  padding: 19px 0; border-bottom: 1px solid var(--hairline);
}
.legend-item:last-child { border-bottom: none; }
.legend .swatch { width: 12px; height: 12px; border-radius: 50%; }
.legend .lbl { font-weight: 500; font-size: 0.96rem; color: var(--ink-soft); }
.legend .pct { font-family: var(--display); font-size: 1.5rem; color: var(--ink); }

/* ============ FUN STRIP (polaroid gallery) ============ */
.fun { background: transparent; overflow: hidden; }
.fun-strip {
  display: flex; gap: 30px; margin-top: 60px;
  justify-content: center; flex-wrap: wrap;
}
.polaroid {
  background: #fff; padding: 14px 14px 18px;
  border-radius: 6px;
  box-shadow: var(--shadow-card);
  width: 250px; flex-shrink: 0;
  transition: transform .35s var(--ease-out), box-shadow .35s ease;
}
.polaroid:hover { transform: translateY(-6px); box-shadow: var(--shadow-lift); z-index: 2; position: relative; }
.polaroid .ph { aspect-ratio: 1/1; overflow: hidden; border-radius: 3px; background: var(--paper-warm); }
.polaroid .ph img { width: 100%; height: 100%; object-fit: cover; }
.polaroid figcaption {
  font-family: var(--display); font-style: normal;
  text-align: center; font-size: 1rem; color: var(--ink-soft);
  padding-top: 13px;
}
@media (max-width: 640px) {
  .fun-strip { gap: 18px; }
  .polaroid { width: calc(50% - 18px); min-width: 150px; padding: 9px 9px 12px; }
}

/* ============ COLLAGE ============ */
.collage {
  display: grid; grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 170px; gap: 4px; margin-top: 52px;
}
.collage .tile { overflow: hidden; border-radius: 0; background: var(--paper-warm); }
.collage .tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease-out); }
.collage .tile:hover img { transform: scale(1.06); }
.collage .t1 { grid-column: span 2; grid-row: span 2; }
.collage .t2 { grid-column: span 2; }
.collage .t3 { grid-column: span 2; }
.collage .t4 { grid-column: span 2; }
.collage .t5 { grid-column: span 2; grid-row: span 2; }
.collage .t6 { grid-column: span 2; }
.collage .t7 { grid-column: span 2; grid-row: span 2; }
.collage .t8 { grid-column: span 2; }
@media (max-width: 800px) { .collage { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 125px; } }
@media (max-width: 480px) {
  .collage { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 135px; }
  .collage .tile { grid-column: span 1 !important; grid-row: span 1 !important; }
  .collage .t1, .collage .t5 { grid-column: span 2 !important; }
}

/* ============ PROSE FEATURE (side accent for text sections) ============ */
.prose-feature .container { position: relative; padding-left: 44px; }
/* the vertical navy→gold accent line, draws in on reveal */
.prose-feature .container::before {
  content: ""; position: absolute; left: 3px; top: 16px; bottom: 12px; width: 4px;
  border-radius: 4px;
  background: linear-gradient(180deg, var(--navy) 0%, var(--gold) 100%);
  transform: scaleY(0); transform-origin: top;
  transition: transform 1.05s var(--ease-out) .12s, box-shadow .3s ease;
}
.prose-feature.in-view .container::before { transform: scaleY(1); }
/* gold node at the top of the line */
.prose-feature .container::after {
  content: ""; position: absolute; left: 0; top: 8px; width: 10px; height: 10px;
  border-radius: 50%; background: var(--gold);
  opacity: 0; transform: scale(0);
  transition: opacity .5s ease .85s, transform .5s var(--ease-out) .85s;
}
.prose-feature.in-view .container::after { opacity: 1; transform: scale(1); }
.prose-feature .container:hover::before { box-shadow: 0 0 16px rgba(198,160,74,.45); }
@media (max-width: 640px) { .prose-feature .container { padding-left: 30px; } }

/* ============ PHOTO ANNOTATION (hand-drawn arrow + label) ============ */
.prog-photo { position: relative; }
/* overlaid on the top of the photo so it never collides with the heading */
.photo-note {
  position: absolute; z-index: 4; pointer-events: none;
  top: 12px; left: 14px; width: 190px;
}
.photo-note .pn-text {
  display: inline-block;
  font-family: "Fraunces", Georgia, serif; font-style: italic; font-weight: 600;
  font-size: 1.45rem; line-height: 1;
  color: #ffd770;
  text-shadow: 0 1px 8px rgba(0,0,0,.55), 0 0 2px rgba(0,0,0,.4);
  transform: rotate(-5deg);
  opacity: 0; transition: opacity .5s ease .5s;
}
.photo-note .pn-arrow {
  position: absolute; left: 96px; top: 30px;
  width: 78px; height: 62px; overflow: visible;
  filter: drop-shadow(0 1px 4px rgba(0,0,0,.4));
}
.photo-note .pn-arrow path {
  stroke-dasharray: 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset .7s var(--ease-out);
}
.photo-note .pn-arrow .pn-head { transition-delay: .6s; }
/* draw in when the section reveals */
.prog.in-view .photo-note .pn-text { opacity: 1; }
.prog.in-view .photo-note .pn-arrow path { stroke-dashoffset: 0; }
.prog.in-view .photo-note .pn-line { transition-delay: .15s; }
.prog.in-view .photo-note .pn-head { transition-delay: .8s; }
@media (max-width: 760px) {
  .photo-note { top: 8px; left: 10px; }
  .photo-note .pn-text { font-size: 1.25rem; }
  .photo-note .pn-arrow { left: 84px; top: 26px; }
}

/* ============ POLAROID WALL (scattered, taped) ============ */
.polaroid-wall {
  display: flex; flex-wrap: nowrap; justify-content: center;
  align-items: flex-start; gap: 26px; margin-top: 58px;
  padding: 46px 34px 40px;
  /* corkboard */
  background: #c69e6e url("images/cork.jpg");
  background-size: 380px 380px;
  border: 12px solid #7c5934;
  border-radius: 14px;
  box-shadow:
    inset 0 0 0 3px rgba(60,38,14,.35),
    inset 0 4px 22px rgba(70,44,16,.4),
    0 20px 48px rgba(20,20,30,.2);
}
.polaroid-wall .pola { flex: 0 1 246px; }
@media (max-width: 900px) {
  .polaroid-wall { flex-wrap: wrap; }
  .polaroid-wall .pola { flex: 0 1 42%; }
}
.polaroid-wall .pola {
  background: #fff; padding: 14px 14px 0; border-radius: 2px; width: 244px;
  position: relative;
  box-shadow: 0 12px 28px rgba(22,22,32,.16), 0 2px 6px rgba(22,22,32,.10);
  transition: transform .4s var(--ease-out), box-shadow .4s ease;
}
.polaroid-wall .pola::before {
  content: ""; position: absolute; top: -12px; left: 50%;
  transform: translateX(-50%) rotate(-3deg);
  width: 84px; height: 24px; background: rgba(206,192,158,.5);
  box-shadow: 0 1px 2px rgba(0,0,0,.08); border-radius: 1px;
}
.polaroid-wall .pola .ph { aspect-ratio: 1/1; overflow: hidden; background: var(--paper-warm); }
.polaroid-wall .pola .ph img { width: 100%; height: 100%; object-fit: cover; }
.polaroid-wall .pola figcaption {
  font-family: var(--display); text-align: center;
  font-size: 1.06rem; color: var(--ink-soft); padding: 13px 6px 16px;
}
.polaroid-wall .pola {
  transition: rotate .4s var(--ease-out), translate .4s var(--ease-out), scale .4s var(--ease-out), box-shadow .4s ease,
              opacity .9s cubic-bezier(.25,.55,.25,1), transform .9s cubic-bezier(.25,.55,.25,1);
}
.polaroid-wall .pola:nth-child(odd)  { rotate: -2.4deg; }
.polaroid-wall .pola:nth-child(even) { rotate: 2.1deg; }
.polaroid-wall .pola:nth-child(3n)   { rotate: -1deg; margin-top: 22px; }
.polaroid-wall .pola:nth-child(5n)   { rotate: 3deg; }
.polaroid-wall .pola:hover {
  rotate: 0deg; translate: 0 -9px; scale: 1.035; z-index: 3;
  box-shadow: 0 22px 44px rgba(22,22,32,.24);
}
@media (max-width: 640px) {
  .polaroid-wall { gap: 26px 22px; }
  .polaroid-wall .pola { width: 43%; min-width: 148px; }
  .polaroid-wall .pola:nth-child(3n) { margin-top: 0; }
}

/* ============ LIFE COLLAGE (contained mosaic, text overlaid) ============ */
.life { padding: 0; }
.life-wrap {
  width: 94vw; max-width: none;
  margin-left: calc(50% - 47vw); margin-right: calc(50% - 47vw);
  padding: 0;
}
@media (max-width: 620px) {
  .life-wrap { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
  .life-frame { border-radius: 0; }
}
.life-frame {
  position: relative; border-radius: 16px; overflow: hidden;
  box-shadow: 0 24px 60px rgba(20,20,30,.16);
}
.life-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: clamp(128px, 13.5vw, 178px); gap: 5px;
  grid-auto-flow: dense;
}
.life-grid .tile { overflow: hidden; position: relative; background: #0d0d10; }
.life-grid .tile img {
  width: 100%; height: 100%; object-fit: cover;
  filter: brightness(.95) saturate(1.03);
  transition: transform 1s var(--ease-out), filter 1s ease;
}
.life-grid .tile:hover img { transform: scale(1.05); filter: brightness(1.02) saturate(1.07); }
.life-grid .big1 { grid-column: 1 / 3; grid-row: 1 / 3; }
.life-grid .big2 { grid-column: 3 / 5; grid-row: 3 / 5; }
.life-grid .big3 { grid-column: 1 / 3; grid-row: 5 / 7; }
.life-overlay {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 24px;
  background: radial-gradient(ellipse 60% 62% at 50% 50%, rgba(8,8,12,.72) 0%, rgba(8,8,12,.44) 44%, rgba(8,8,12,.12) 74%, rgba(8,8,12,0) 100%);
}
.life-overlay .kicker { color: rgba(255,255,255,.82); }
.life-overlay h2 {
  margin: 6px 0 0; color: #fff;
  font-size: clamp(1.9rem, 4.4vw, 3rem);
  text-shadow: 0 2px 30px rgba(0,0,0,.55);
}
.life-overlay .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); margin: 18px auto 0; }
.life-overlay p {
  color: rgba(255,255,255,.9); max-width: 460px; margin: 16px auto 0;
  text-shadow: 0 1px 14px rgba(0,0,0,.6);
}
@media (max-width: 620px) {
  .life-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: clamp(118px, 30vw, 168px); }
  .life-grid .big1, .life-grid .big2, .life-grid .big3 { grid-column: 1 / 3; grid-row: auto / span 2; }
  .life-overlay p { font-size: 0.95rem; }
}

/* ============ EMBEDS (Airtable / Google Forms) ============ */
.embed-wrap {
  max-width: 940px; margin: 40px auto 0;
  border-radius: 16px; overflow: hidden; background: #fff;
  border: 1px solid var(--hairline, #e5e9ee);
  box-shadow: 0 24px 60px rgba(20,20,30,.12);
}
.embed-frame { display: block; width: 100%; height: 720px; border: 0; background: #fff; }
.portal-shell .portal-cal {
  max-width: none;
  width: 100%;
  margin: 0;
  border-radius: 12px;
  box-shadow: var(--shadow-card);
}
.portal-shell .portal-cal .embed-frame {
  height: min(82vh, 820px);
  min-height: 560px;
}
@media (max-width: 620px) {
  .portal-shell .portal-cal .embed-frame { min-height: 480px; height: 70vh; }
}

/* wide variant — breaks out of .container, inset slightly from the edges */
.embed-wrap.full {
  max-width: none;
  width: 94vw;
  margin-left: calc(50% - 47vw);
  margin-right: calc(50% - 47vw);
}
@media (max-width: 620px) {
  .embed-wrap.full { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); border-radius: 0; border-left: 0; border-right: 0; }
}
.embed-wrap.full .embed-frame { height: 1000px; }
@media (max-width: 620px) {
  .embed-wrap.full .embed-frame { height: 720px; }
}
.form-embed .embed-frame { height: 1150px; }
@media (max-width: 620px) {
  .embed-wrap { margin-top: 26px; border-radius: 12px; }
  .embed-frame { height: 600px; }
  .form-embed .embed-frame { height: 1250px; }
}

/* ============ TIMELINE ============ */
.timeline { max-width: 720px; margin: 52px auto 0; position: relative; padding-left: 40px; }
.timeline::before {
  content: ""; position: absolute; left: 11px; top: 8px; bottom: 8px;
  width: 1px; background: var(--hairline);
}
.timeline-item { position: relative; padding: 0 0 46px 20px; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item::before {
  content: ""; position: absolute; left: -35px; top: 7px;
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--paper); border: 2px solid var(--gold);
  transition: background .25s ease;
}
.timeline-item:hover::before { background: var(--gold); }
.timeline-item .step {
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--gold);
}
.timeline-item h3 { font-size: 1.35rem; margin: 6px 0 8px; }
.timeline-item p { color: var(--muted); font-size: 0.97rem; }

/* ============ CRITERIA ============ */
.criteria { display: grid; grid-template-columns: repeat(3, 1fr); gap: 38px; margin-top: 52px; }
@media (max-width: 880px) { .criteria { grid-template-columns: 1fr; } }
.criteria > div { border-top: 2px solid var(--gold); padding-top: 22px; }
.criteria h3 { font-size: 1.3rem; margin-bottom: 10px; }
.criteria p { color: var(--muted); font-size: 0.97rem; }

/* ============ CALLOUT ============ */
.callout {
  background: var(--navy-deep); color: #fff;
  border-radius: 18px;
  padding: 60px 48px; text-align: center;
  position: relative; overflow: hidden;
}
.callout::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(90% 130% at 85% -10%, rgba(0,160,232,.16), transparent 60%);
  pointer-events: none;
}
.callout::after {
  content: ""; position: absolute;
  left: -40px; bottom: -14px;
  width: 420px; height: 68px; opacity: .12;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 32' fill='none'%3E%3Cpath d='M2 6C30 6 45 26 70 26S108 6 134 6s38 20 64 20' stroke='white' stroke-width='2'/%3E%3Cpath d='M2 26C30 26 45 6 70 6s38 20 64 20 38-20 64-20' stroke='white' stroke-width='2'/%3E%3C/svg%3E") center / contain no-repeat;
  pointer-events: none;
}
.callout > * { position: relative; }
.callout h2 { color: #fff; }
.callout p { color: rgba(255,255,255,.78); max-width: 620px; margin: 0 auto 32px; }
.callout .cta-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.sched-partner {
  text-align: center;
  margin: 28px 0 0;
  font-size: 0.9rem;
  color: var(--muted);
}
.sched-partner a { font-weight: 600; }

/* ============ COFFEE CHAT PANEL ============ */
.chat-panel {
  display: grid; grid-template-columns: 1fr 1fr; gap: 68px; align-items: center;
  background: var(--paper-warm);
  border: 1px solid var(--hairline); border-radius: 18px;
  padding: 60px;
}
@media (max-width: 820px) { .chat-panel { grid-template-columns: 1fr; gap: 30px; padding: 34px 26px; } }
.chat-panel h2 { margin-bottom: 14px; }
.chat-panel p { color: var(--muted); }
.chat-panel ul { margin: 20px 0 28px; padding-left: 0; list-style: none; }
.chat-panel li {
  padding: 11px 0 11px 32px; position: relative;
  color: var(--ink-soft); font-size: 0.97rem;
  border-bottom: 1px solid var(--hairline);
}
.chat-panel li:last-child { border-bottom: none; }
.chat-panel li::before { content: "→"; position: absolute; left: 2px; color: var(--gold); }
.chat-panel .panel-img {
  aspect-ratio: 4/3; border-radius: 12px; overflow: hidden;
  box-shadow: var(--shadow-card);
}
.chat-panel .panel-img img { width: 100%; height: 100%; object-fit: cover; }

/* ============ PROFESSIONAL DEVELOPMENT PROGRAM ============ */
.prog { background: transparent; }
.prog-grid {
  display: grid; grid-template-columns: 0.9fr 1.5fr; gap: 68px;
  align-items: start; margin-top: 14px;
}
@media (max-width: 900px) { .prog-grid { grid-template-columns: 1fr; gap: 40px; } }
.prog-intro { position: sticky; top: 100px; }
@media (max-width: 900px) { .prog-intro { position: static; } }
.prog-intro p { color: var(--muted); margin-bottom: 24px; }
.prog-intro .prog-photo {
  aspect-ratio: 4/3; border-radius: 12px; overflow: visible;
  box-shadow: var(--shadow-card); margin-bottom: 26px;
}
.prog-intro .prog-photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; }
.prog-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 640px) { .prog-cards { grid-template-columns: 1fr; } }
.prog-card {
  background: #fff; border: 1px solid var(--hairline); border-radius: 16px;
  padding: 32px 28px;
  transition: transform .3s var(--ease-out), box-shadow .3s ease, border-color .3s ease;
}
.prog-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lift);
  border-color: var(--gold-pale);
}
.prog-card .n {
  font-family: var(--display); font-style: normal;
  font-size: 1.05rem; color: var(--gold);
}
.prog-card h3 { font-size: 1.28rem; margin: 8px 0 10px; }
.prog-card p { color: var(--muted); font-size: 0.94rem; }

/* ============ PHOTO RAIL (horizontal scroll gallery) ============ */
.rail-section { overflow: hidden; }
.rail {
  display: flex; gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding: 52px 32px 16px;
  margin: 0 calc((100vw - min(var(--maxw), 100vw)) / -2);
  padding-left: max(32px, calc((100vw - var(--maxw)) / 2 + 32px));
  padding-right: max(32px, calc((100vw - var(--maxw)) / 2 + 32px));
  scrollbar-width: none;
  cursor: grab;
}
.rail.dragging { cursor: grabbing; scroll-snap-type: none; }
.rail::-webkit-scrollbar { display: none; }
.rail figure { flex: 0 0 auto; scroll-snap-align: start; }
.rail .ph {
  height: 330px; width: auto; min-width: 300px;
  border-radius: 14px; overflow: hidden; background: var(--paper-warm);
}
@media (max-width: 640px) { .rail .ph { height: 240px; } }
.rail .ph img {
  height: 100%; width: auto; max-width: none; display: block;
  user-select: none; -webkit-user-drag: none;
}
.rail figcaption {
  font-family: var(--display); font-style: normal;
  font-size: 0.95rem; color: var(--muted); padding-top: 12px;
}
.rail-hint {
  text-align: center; margin-top: 18px;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--muted);
}

/* ============ AUTO CAROUSEL ============ */
.carousel-wrap { max-width: 980px; margin: 52px auto 0; }
.carousel {
  position: relative; aspect-ratio: 16 / 10;
  border-radius: 18px; overflow: hidden;
  background: var(--navy-deep);
  box-shadow: var(--shadow-lift);
}
.carousel .slide {
  position: absolute; inset: 0;
  opacity: 0; transition: opacity 1.1s var(--ease-out);
  pointer-events: none;
}
.carousel .slide.active { opacity: 1; pointer-events: auto; }
.carousel .slide img, .carousel .slide video {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 32%; display: block;
}
.carousel .slide figcaption {
  position: absolute; left: 24px; bottom: 20px; right: 24px;
  font-family: var(--display); font-style: normal;
  font-size: 1.1rem; color: #fff;
  text-shadow: 0 1px 14px rgba(0,0,0,.55);
}
.carousel-dots {
  display: flex; gap: 9px; justify-content: center; margin-top: 22px;
}
.carousel-dots button {
  width: 8px; height: 8px; border-radius: 50%;
  border: 0; padding: 0; cursor: pointer;
  background: var(--hairline);
  transition: background .25s ease, transform .25s ease;
}
.carousel-dots button.active { background: var(--gold); transform: scale(1.35); }

/* ============ SCHEDULE LIST ============ */
.sched { max-width: 860px; margin: 52px auto 0; }
.sched-item {
  display: grid; grid-template-columns: 150px 1fr auto;
  gap: 28px; align-items: baseline;
  padding: 26px 6px; border-bottom: 1px solid var(--hairline);
  transition: background .2s ease, padding-left .2s ease;
}
.sched-item:hover { background: var(--paper-warm); padding-left: 16px; border-radius: 10px; }
@media (max-width: 640px) { .sched-item { grid-template-columns: 1fr; gap: 4px; } }
.sched-item .date {
  font-size: 0.76rem; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--gold);
}
.sched-item h3 { font-size: 1.35rem; }
.sched-item .where { font-size: 0.88rem; color: var(--muted); }
.sched-item .about { grid-column: 2; font-size: 0.92rem; color: var(--muted); margin-top: 2px; }
@media (max-width: 640px) { .sched-item .about { grid-column: 1; } }
.sched-note { text-align: center; margin-top: 28px; margin-bottom: 0; color: var(--muted); font-style: normal; font-size: 0.95rem; }
.page-schedule section:has(.speaker-list) { padding-bottom: 28px; }
.page-schedule section.tight { padding-top: 20px; }

/* ============ SPONSORS ============ */
.sponsors { background: transparent; }
.sponsor-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 48px;
}
@media (max-width: 900px) { .sponsor-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .sponsor-grid { grid-template-columns: 1fr; } }
.sponsor-tile {
  background: #fff; border: 1px solid var(--hairline); border-radius: 14px;
  min-height: 132px; padding: 26px;
  display: flex; align-items: center; justify-content: center; text-align: center;
  font-family: var(--display); font-size: 1.25rem; color: var(--navy);
  transition: transform .3s var(--ease-out), box-shadow .3s ease, border-color .3s ease;
}
.sponsor-tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); border-color: var(--teal); }
.sponsor-tile img { max-height: 62px; max-width: 100%; width: auto; height: auto; object-fit: contain; }
.sponsor-cta { text-align: center; margin-top: 44px; }
.sponsor-cta p { color: var(--muted); margin-bottom: 22px; }

/* ============ SPEAKER SERIES ============ */
.series-hero {
  background: var(--navy-deep); color: #fff;
  border-radius: 20px; padding: 64px 48px; margin-top: 8px;
  position: relative; overflow: hidden; text-align: center;
}
.series-hero::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(60% 90% at 15% 0%, rgba(22,165,196,.28), transparent 60%),
    radial-gradient(60% 90% at 88% 110%, rgba(240,165,44,.26), transparent 60%);
  pointer-events: none;
}
.series-hero > * { position: relative; }
.series-hero .kicker { color: var(--gold-pale); justify-content: center; }
.series-hero .kicker::before { background: var(--gold-pale); }
.series-hero h2 { color: #fff; font-size: clamp(2.4rem, 5vw, 3.8rem); margin-bottom: 14px; }
.series-hero p { color: rgba(255,255,255,.82); max-width: 860px; margin: 0 auto; }
.series-hero p + p { margin-top: 16px; }
.series-links {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 12px;
  margin-top: 28px;
}
.series-links a {
  display: inline-flex; align-items: center;
  padding: 10px 16px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.28);
  color: #fff; font-size: 0.88rem; font-weight: 600;
  text-decoration: none; transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.series-links a:hover {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.55);
  transform: translateY(-1px);
}
.series-hero .where {
  margin-top: 24px; font-size: 0.82rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255,255,255,.6);
}


/* month group headers */
.month-row {
  display: flex; align-items: center; gap: 18px;
  margin: 34px 0 2px;
}
.month-row:first-child { margin-top: 0; }
.month-row .m {
  font-size: 0.74rem; font-weight: 600; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--navy);
}
.month-row::after { content: ""; flex: 1; height: 1px; background: var(--hairline); }

.speaker-list { display: grid; gap: 16px; margin-top: 36px; }
.spk {
  display: grid; grid-template-columns: 128px 1fr auto; gap: 30px; align-items: center;
  background: #fff; border: 1px solid var(--hairline); border-radius: 16px;
  padding: 26px 30px;
  transition: transform .3s var(--ease-out), box-shadow .3s ease, border-color .3s ease;
}
.spk:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); border-color: var(--teal); }
@media (max-width: 760px) {
  .spk { grid-template-columns: 84px 1fr; gap: 20px; }
  .spk .spk-when { grid-column: 2; grid-row: 2; text-align: left; }
}
.spk-face {
  width: 128px; height: 128px; border-radius: 50%; overflow: hidden;
  background: var(--paper-warm); border: 1px solid var(--hairline);
  display: flex; align-items: center; justify-content: center;
}
@media (max-width: 760px) { .spk-face { width: 84px; height: 84px; } }
.spk-face img { width: 100%; height: 100%; object-fit: cover; }
.spk-face.two { border: 0; gap: 0; }
.spk-face.two { position: relative; }
.spk-face.two img { position: absolute; width: 66%; height: 66%; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--hairline); background: var(--paper-warm); }
.spk-face.two img:first-child { left: 0; top: 0; z-index: 2; }
.spk-face.two img:last-child { right: 0; bottom: 0; }
.spk-face .tba { font-family: var(--display); font-size: 2.4rem; color: var(--muted); }
.spk-info .spk-name { font-family: var(--display); font-size: 1.5rem; font-weight: 700; color: var(--gold); line-height: 1.15; }
.spk-info .spk-role { color: var(--teal); font-weight: 600; font-size: 0.9rem; margin: 4px 0 8px; }
.spk-info .spk-bio { color: var(--muted); font-size: 0.94rem; }
.spk-when {
  text-align: left; align-self: center;
  border-left: 1px solid var(--hairline);
  padding-left: 28px; min-width: 168px;
}
@media (max-width: 760px) {
  .spk .spk-when { border-left: 0; padding-left: 0; min-width: 0; margin-top: 6px; }
}
.spk-when .d {
  font-family: var(--display); font-size: 1.55rem; color: var(--navy); line-height: 1;
}
.spk-when .t { font-size: 0.82rem; color: var(--muted); margin-top: 6px; }
.spk-when .loc {
  margin-top: 9px; font-size: 0.66rem; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--gold);
}

/* ---- schedule page: phone layout ---- */
@media (max-width: 560px) {
  .series-hero { padding: 40px 22px; border-radius: 16px; }
  .series-hero h2 { font-size: clamp(1.8rem, 8vw, 2.4rem); }
  .spk { padding: 20px 18px; gap: 16px; }
  .spk-info .spk-name { font-size: 1.25rem; }
  .spk-info .spk-role { font-size: 0.85rem; }
  .spk-info .spk-bio { font-size: 0.9rem; }
  .spk-when .d { font-size: 1.35rem; }
  .month-row { margin: 26px 0 2px; }
}
@media (max-width: 400px) {
  .container { padding: 0 18px; }
}

/* ============ OFFICER PROFILE ============ */
.member .name a { color: inherit; text-decoration: none; border-bottom: 1.5px solid transparent; transition: border-color .2s ease, color .2s ease; }
.member:hover .name a { color: var(--teal); border-bottom-color: var(--teal); }
.profile-head {
  display: grid; grid-template-columns: 200px 1fr; gap: 44px; align-items: center;
}
@media (max-width: 640px) { .profile-head { grid-template-columns: 1fr; gap: 24px; text-align: center; } }
.profile-avatar {
  width: 200px; height: 200px; border-radius: 20px; overflow: hidden;
  background: linear-gradient(150deg, #dcf2fc, #fdeeda);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-style: normal; font-size: 4.4rem; color: var(--navy);
}
@media (max-width: 640px) { .profile-avatar { margin: 0 auto; } }
.profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.profile-head .role { font-family: var(--display); font-style: normal; font-weight: 600; color: var(--sky); font-size: 1.1rem; }
.profile-detail { border-top: 2px solid var(--teal); padding-top: 22px; }
.profile-detail + .profile-detail { margin-top: 30px; }
.profile-detail h3 { font-size: 1.05rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--navy); margin-bottom: 10px; }
.profile-detail p { color: var(--ink-soft); }

/* ============ FOOTER ============ */
footer { background: var(--navy-deep); color: #aeb6c2; overflow: hidden; position: relative; }
/* signature brand stripe — azure to orange, at the very bottom of every page */
footer::after {
  content: ""; display: block; height: 3px;
  background: linear-gradient(90deg, var(--teal) 0%, var(--teal-bright) 45%, var(--gold-bright) 75%, var(--gold) 100%);
}
.foot-word { display: none; }
footer .foot-wrap { padding-top: 76px; }
.foot-word .word {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(3.4rem, 11vw, 9rem); line-height: 0.95;
  color: rgba(255,255,255,.1);
  letter-spacing: -0.01em;
  user-select: none;
}
.foot-wrap {
  max-width: var(--maxw); margin: 0 auto; padding: 48px 32px 44px;
  display: grid; grid-template-columns: 2.2fr 1fr 1fr; gap: 56px;
}
@media (max-width: 700px) { .foot-wrap { grid-template-columns: 1fr; gap: 32px; } }
footer h4 { color: #fff; margin-bottom: 16px; }
footer p, footer a, footer li { font-size: 0.9rem; color: #aeb6c2; line-height: 1.8; }
footer a:hover { color: var(--gold-bright); }
footer ul { list-style: none; }
footer .brand { color: #fff; margin-bottom: 18px; }
footer .brand .brand-text strong { color: #fff; }
footer .brand .brand-text small { color: #8f99a8; }
footer .copy {
  max-width: var(--maxw); margin: 0 auto; padding: 22px 32px 38px;
  font-size: 0.78rem; color: #7c8696;
  border-top: 1px solid rgba(255,255,255,.1);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}

/* ============ EM PORTAL ============ */
.portal-shell { max-width: 1180px; margin: 0 auto; padding: 60px 32px 110px; }
.portal-shell section { padding: 0; }
.login-card {
  max-width: 420px; margin: 40px auto 0;
  background: #fff; border: 1px solid var(--hairline); border-radius: 14px;
  padding: 44px 40px; box-shadow: var(--shadow-card);
}
.login-card h1 { font-size: 1.7rem; margin-bottom: 6px; }
.login-card .sub { color: var(--muted); font-size: 0.93rem; margin-bottom: 28px; }
.field { margin-bottom: 18px; }
.field label {
  display: block; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-soft); margin-bottom: 7px;
}
.field input:not([type="radio"]):not([type="checkbox"]):not([type="file"]):not([type="hidden"]),
.field select,
.field textarea {
  width: 100%; padding: 12px 14px;
  border: 1px solid var(--hairline); border-radius: 9px;
  font-family: var(--text); font-size: 0.95rem; color: var(--ink);
  background: var(--paper); outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field input:not([type="radio"]):not([type="checkbox"]):not([type="file"]):not([type="hidden"]):focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--teal); box-shadow: 0 0 0 3px rgba(0,145,212,.14);
}
.field textarea { min-height: 84px; resize: vertical; }
.form-err { color: #c0392b; font-size: 0.88rem; margin: 10px 0 0; min-height: 1.2em; }
.login-or {
  display: flex; align-items: center; gap: 12px;
  margin: 16px 0 14px; color: var(--muted); font-size: 0.72rem;
  text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700;
}
.login-or::before, .login-or::after {
  content: ""; flex: 1; height: 1px; background: var(--hairline);
}
.login-google {
  display: flex; justify-content: center; min-height: 44px;
  margin-bottom: 2px;
}
.login-help {
  display: block; width: 100%; text-align: center;
  appearance: none; background: none; border: 0; cursor: pointer;
  font-family: var(--text); font-size: 0.84rem; font-weight: 600;
  color: var(--sky); padding: 6px 0 0; margin-top: 4px;
}
.login-help:hover { color: #006da0; text-decoration: underline; }
.login-help-note {
  text-align: center; font-size: 0.85rem; color: var(--ink-soft);
  background: var(--paper-warm); border: 1px solid var(--hairline);
  border-radius: 9px; padding: 10px 14px; margin-top: 10px;
}
.btn.block { display: block; width: 100%; text-align: center; }
.btn.sm { padding: 9px 20px; font-size: 0.8rem; }

.portal-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  flex-wrap: wrap; margin-bottom: 30px;
}
.portal-bar .who { font-size: 0.93rem; color: var(--muted); flex: 0 1 auto; }
.portal-bar .who strong { color: var(--ink); }
/* Directory: title on the button row; hide title when selecting so actions stay one line */
#tab-directory > .portal-bar {
  flex-wrap: nowrap;
  align-items: center;
  gap: 12px;
}
#tab-directory > .portal-bar .who {
  flex: 0 0 auto;
  white-space: nowrap;
}
#tab-directory > .portal-bar.is-selecting .who {
  display: none;
}
#tab-directory > .portal-bar .portal-actions {
  margin-left: auto;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  justify-content: flex-end;
}
#tab-directory > .portal-bar.is-selecting .portal-actions {
  margin-left: 0;
  flex: 1 1 auto;
  width: 100%;
  justify-content: space-between;
  /* row-reverse: bulk actions on the left, steady buttons on the right */
  flex-direction: row-reverse;
}
#tab-directory > .portal-bar .portal-actions-steady,
#tab-directory > .portal-bar .portal-actions-bulk {
  flex-wrap: nowrap;
}
/* Hug the right edge: steady buttons stay flush-right; bulk ghosts reserve
   space to their left so selection never splits the main cluster. */
.portal-actions {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
  margin-left: auto;
  flex-direction: row-reverse;
}
.portal-actions-steady,
.portal-actions-bulk {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
}
/* Keep slot so the bar doesn't jump — reserved space sits left of the cluster */
.portal-actions .bulk-ghost {
  visibility: hidden !important;
  pointer-events: none;
}

.task-table-wrap {
  background: #fff; border: 1px solid var(--hairline); border-radius: 14px;
  overflow-x: auto; box-shadow: var(--shadow-card);
}
.task-table { width: 100%; border-collapse: collapse; min-width: 760px; }
.task-table th {
  text-align: left; padding: 14px 18px;
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted); border-bottom: 1px solid var(--hairline);
  background: var(--paper-warm);
}
.task-table td {
  padding: 15px 18px; border-bottom: 1px solid var(--hairline);
  font-size: 0.92rem; color: var(--ink-soft); vertical-align: top;
}
.task-table tr:last-child td { border-bottom: 0; }
.task-table td .t-name { font-weight: 600; color: var(--ink); }
.task-table td .t-desc-wrap { margin-top: 3px; max-width: 420px; }
.task-table td .t-desc {
  font-size: 0.85rem; color: var(--muted);
  white-space: pre-wrap; word-break: break-word; line-height: 1.4;
}
.task-table td .t-desc.clamped {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  overflow: hidden;
}
.t-desc-toggle {
  display: inline-block; margin-top: 4px; padding: 0;
  border: 0; background: none; color: #006da0;
  font: inherit; font-size: 0.8rem; font-weight: 600; cursor: pointer;
}
.t-desc-toggle:hover { text-decoration: underline; }
.task-filters {
  display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: flex-end;
  margin: 0 0 14px; padding: 12px 14px;
  background: var(--paper-warm); border: 1px solid var(--hairline); border-radius: 12px;
  overflow: visible;
}
.task-filters .tf-search {
  flex: 1 1 160px; min-width: 140px; max-width: 240px;
  padding: 7px 10px; border-radius: 8px; height: 34px; box-sizing: border-box;
  border: 1px solid var(--hairline); font-family: inherit; font-size: 0.85rem;
  background: #fff; color: var(--ink);
}
.task-filters .tf-open-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  align-self: flex-end;
  height: 34px;
  padding: 0 14px 0 12px;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  box-sizing: border-box;
  transition: border-color .15s var(--ease-out), background .15s var(--ease-out), color .15s var(--ease-out), box-shadow .15s var(--ease-out);
}
.task-filters .tf-open-toggle:hover {
  border-color: #c9c2b3;
  box-shadow: 0 1px 3px rgba(22,25,31,.06);
}
.task-filters .tf-open-toggle:has(input:focus-visible) {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}
.task-filters .tf-open-toggle input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}
.task-filters .tf-open-box {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  border: 2px solid #b8b3a6;
  border-radius: 5px;
  background: #fff;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color .15s var(--ease-out), background .15s var(--ease-out);
}
.task-filters .tf-open-box::after {
  content: "";
  width: 5px;
  height: 9px;
  margin-top: -1px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0);
  transform-origin: center;
  transition: transform .12s var(--ease-out);
}
.task-filters .tf-open-toggle:has(input:checked) {
  background: rgba(0,145,212,.08);
  border-color: var(--teal);
  color: var(--navy);
  box-shadow: 0 0 0 1px rgba(0,145,212,.18);
}
.task-filters .tf-open-toggle:has(input:checked) .tf-open-box {
  background: var(--teal);
  border-color: var(--teal);
}
.task-filters .tf-open-toggle:has(input:checked) .tf-open-box::after {
  transform: rotate(45deg) scale(1);
}
.task-filters .tf-open-text {
  line-height: 1.15;
  display: flex;
  align-items: center;
}
.task-filters #tf-clear {
  flex: 0 0 auto;
  align-self: flex-end;
  height: 34px;
}
.task-filters .tf-field,
.task-filters .tf-assignee-wrap {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted);
  flex: 0 1 140px;
  min-width: 120px;
}
.task-filters .tf-field select {
  width: 100%;
  height: 34px;
  padding: 6px 10px;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
}
.task-filters .tf-label { line-height: 1.2; }
.tf-assignee-wrap { flex: 0 1 150px; min-width: 130px; }
.tf-ms-btn {
  display: block; width: 100%; box-sizing: border-box;
  height: 34px; padding: 6px 28px 6px 10px;
  border: 1px solid var(--hairline); border-radius: 8px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23444' d='M1 1l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 10px center;
  color: var(--ink); font-family: inherit; font-size: 0.85rem;
  font-weight: 500; letter-spacing: 0; text-transform: none;
  text-align: left; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tf-ms-btn.is-open { border-color: #007aff; box-shadow: 0 0 0 3px rgba(0,122,255,0.25); }
.tf-ms-menu {
  position: fixed; z-index: 500;
  max-height: min(300px, 55vh);
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  box-shadow: 0 12px 40px rgba(22,25,31,0.14);
  padding: 6px;
  display: flex; flex-direction: column; gap: 1px;
}
.tf-ms-menu[hidden] { display: none !important; }
.tf-ms-menu label {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; border-radius: 6px;
  font-size: 0.84rem; font-weight: 500; letter-spacing: 0;
  text-transform: none; color: var(--ink); cursor: pointer;
  white-space: nowrap;
  flex: 0 0 auto;
}
.tf-ms-menu label[hidden],
.tf-ms-group[hidden],
.tf-asg-empty[hidden] { display: none !important; }
.tf-ms-menu label:hover { background: var(--paper-warm); }
.tf-ms-menu input { accent-color: #0a84ff; }
.tf-ss-menu label {
  align-items: center;
  gap: 10px;
}
.tf-ss-menu input[type="radio"],
.field .tf-ss-menu input[type="radio"],
.panel .tf-ss-menu input[type="radio"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  min-height: 16px !important;
  max-width: 16px !important;
  max-height: 16px !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: 0 0 16px !important;
  align-self: center !important;
  aspect-ratio: 1 / 1 !important;
  border: 1.5px solid #b8b3a6 !important;
  border-radius: 50% !important;
  background: #fff !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  position: relative;
  cursor: pointer;
}
.tf-ss-menu input[type="radio"]:checked,
.field .tf-ss-menu input[type="radio"]:checked,
.panel .tf-ss-menu input[type="radio"]:checked {
  border-color: #0a84ff !important;
  background:
    radial-gradient(circle at center, #0a84ff 0 3.5px, #fff 4px) !important;
  box-shadow: none !important;
}
.tf-ss-menu label:has(input[type="radio"]:checked) {
  background: rgba(10, 132, 255, 0.08);
  color: var(--ink);
}

/* Custom select wrapper — replaces native <select> chrome */
.cs-wrap {
  position: relative;
  width: 100%;
  display: block;
}
select.cs-native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.cs-wrap > .cs-btn {
  width: 100%;
}
.cs-compact {
  min-width: 120px;
  width: auto;
  display: inline-block;
  vertical-align: middle;
}
.cs-compact > .cs-btn {
  height: 32px;
  font-size: 0.8rem;
  padding-right: 26px;
}
.cs-btn.prog-select.p-not { color: var(--muted); }
.cs-btn.prog-select.p-in  { color: #006da0; }
.cs-btn.prog-select.p-done{ color: #1e7d3e; }
td .cs-wrap { min-width: 130px; }
.cs-action-menu {
  padding: 4px;
  min-width: 180px;
}
.cs-action-menu .cs-action-item {
  display: block;
  width: 100%;
  box-sizing: border-box;
  appearance: none;
  border: 0;
  background: transparent;
  text-align: left;
  padding: 8px 12px;
  border-radius: 6px;
  font-family: inherit;
  font-size: 0.84rem;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
}
.cs-action-menu .cs-action-item:hover {
  background: var(--paper-warm);
}
.cs-action-menu .cs-action-item[data-value="remove"] {
  color: #c0392b;
}
.cs-action-menu .cs-action-item[data-value="remove"]:hover {
  background: #fdecea;
}
.role-chips-cell .cs-wrap,
#am-role-picker .cs-wrap {
  margin-top: 6px;
  width: 100%;
}
.tf-ms-group {
  padding: 8px 10px 4px;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--muted);
  flex: 0 0 auto;
}
.tf-asg-menu {
  min-width: 240px;
  max-width: 300px;
  max-height: min(340px, 60vh);
  padding: 0;
  gap: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.tf-asg-search-row {
  flex: 0 0 auto;
  padding: 8px 8px 6px;
  border-bottom: 1px solid var(--hairline);
}
.tf-asg-menu-search {
  width: 100%; box-sizing: border-box;
  padding: 7px 10px; border-radius: 7px;
  border: 1px solid var(--hairline);
  background: #fff;
  color: var(--ink); font-family: inherit; font-size: 0.82rem;
  outline: none;
}
.tf-asg-menu-search::placeholder { color: var(--muted); }
.tf-asg-menu-search:focus {
  border-color: #007aff;
  box-shadow: 0 0 0 3px rgba(0,122,255,0.18);
  background: #fff;
}
.tf-asg-menu-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 4px 6px 6px;
  display: flex; flex-direction: column; gap: 1px;
}
.tf-asg-empty {
  padding: 12px 10px;
  font-size: 0.8rem; color: var(--muted);
  text-align: center;
}
.req { color: #c0392b; }
.task-table .due.overdue { color: #c0392b; font-weight: 600; }
.badge {
  display: inline-block; padding: 3px 11px; border-radius: 999px;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em;
}
.badge.highest {
  background: #c62828; color: #fff;
  box-shadow: 0 0 0 1px #8e0000 inset;
}
.badge.high   { background: #fdeeda; color: #b35f00; }
.badge.medium { background: #e2f3fc; color: #006da0; }
.badge.low    { background: #eef0f2; color: var(--muted); }
.prog-select {
  padding: 7px 10px; border-radius: 8px; border: 1px solid var(--hairline);
  font-family: var(--text); font-size: 0.85rem; font-weight: 600; color: var(--ink);
  background: #fff; cursor: pointer;
}
.prog-select.p-not { color: var(--muted); }
.prog-select.p-in  { color: #006da0; }
.prog-select.p-done{ color: #1e7d3e; }
.pill-note {
  display: inline-block; background: var(--paper-warm); border: 1px solid var(--hairline);
  border-radius: 999px; padding: 4px 14px; font-size: 0.78rem; color: var(--muted);
}
.empty-state { padding: 60px 20px; text-align: center; color: var(--muted); }
.panel {
  background: #fff; border: 1px solid var(--hairline); border-radius: 14px;
  padding: 30px; margin-bottom: 26px; box-shadow: var(--shadow-card);
}
.panel h3 { margin-bottom: 18px; }
.calendar-sync {
  margin-top: 28px;
  padding-top: 8px;
  max-width: 36rem;
}
.calendar-sync h3 {
  margin: 0 0 8px;
  padding-top: 0;
  font-size: 1.05rem;
  line-height: 1.25;
}
.calendar-sync-lead {
  margin: 0 0 14px;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--ink-soft);
}
.calendar-sync-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 14px;
}
.calendar-sync-details {
  margin: 0 0 14px;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  padding: 0;
  background: #fff;
}
.calendar-sync-details summary {
  cursor: pointer;
  list-style: none;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink-soft);
  padding: 11px 14px;
  user-select: none;
}
.calendar-sync-details summary::-webkit-details-marker { display: none; }
.calendar-sync-details summary::before {
  content: "▸";
  display: inline-block;
  margin-right: 8px;
  color: var(--muted);
  transition: transform .15s ease;
}
.calendar-sync-details[open] summary::before { transform: rotate(90deg); }
.calendar-sync-details[open] summary {
  border-bottom: 1px solid var(--hairline);
}
.calendar-sync-details .calendar-sync-url-row,
.calendar-sync-details .calendar-sync-steps {
  margin-left: 14px;
  margin-right: 14px;
}
.calendar-sync-url-row {
  display: flex;
  gap: 8px;
  margin: 12px 0 10px;
  align-items: center;
}
.calendar-sync-url-row input {
  flex: 1;
  min-width: 0;
  font-size: 0.8rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.calendar-sync-steps {
  margin: 0 14px 12px 1.35rem;
  padding: 0;
  font-size: 0.84rem;
  color: var(--ink-soft);
  line-height: 1.55;
}
.calendar-sync-warn {
  margin: 0 0 8px;
  padding: 10px 12px;
  border-left: 3px solid var(--gold, #b8912f);
  background: var(--paper-warm, #f7f5f1);
  border-radius: 0 8px 8px 0;
  font-size: 0.84rem;
  color: var(--ink-soft);
  line-height: 1.45;
}
.calendar-sync-note {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--muted);
}
.calendar-sync .form-err { margin-top: 10px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 22px; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }
.form-grid .wide { grid-column: 1 / -1; }
.assignee-checks { display: flex; flex-wrap: wrap; gap: 8px; }
.assignee-checks label {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--hairline); border-radius: 999px;
  padding: 6px 14px; font-size: 0.85rem; cursor: pointer; user-select: none;
  text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--ink-soft);
}
.assignee-checks label:has(input:checked) { border-color: var(--teal); background: #e2f3fc; color: #006da0; }
/* nav dropdown (EM Portal) */
.nav-item-drop { position: relative; display: inline-flex; }
.nav-item-drop .drop {
  display: none; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  padding-top: 10px; z-index: 60;
}
.nav-item-drop.authed:hover .drop, .nav-item-drop.authed:focus-within .drop { display: block; }
.nav-item-drop.force-closed .drop { display: none !important; }
.nav-item-drop .drop-inner {
  display: flex;
  flex-direction: column;
  background: #fff; border: 1px solid var(--hairline); border-radius: 10px;
  box-shadow: var(--shadow-lift); overflow: hidden; min-width: 200px;
}
.nav-item-drop .drop button {
  display: block; width: 100%; text-align: left;
  appearance: none; background: none; border: 0; cursor: pointer;
  font-family: var(--text); font-size: 0.84rem; font-weight: 500; color: var(--ink-soft);
  padding: 11px 16px;
  white-space: nowrap;
  letter-spacing: normal;
  text-transform: none;
  line-height: 1.35;
}
.nav-item-drop .drop button:hover { background: var(--paper-warm); color: var(--ink); }

/* compact admin panels: half-height, table stays visible below */
.panel.compact { max-height: 48vh; overflow-y: auto; padding: 22px 26px; }
.panel.compact h3 { font-size: 1.05rem; margin-bottom: 12px; }
.panel.compact .field { margin-bottom: 10px; }
.panel.compact .field label { font-size: 0.68rem; margin-bottom: 4px; }
.panel.compact .field input:not([type="radio"]):not([type="checkbox"]):not([type="file"]):not([type="hidden"]),
.panel.compact .field select,
.panel.compact .field textarea {
  padding: 8px 11px; font-size: 0.87rem;
}
.panel.compact .field textarea { min-height: 52px; }
.panel.compact .form-grid { grid-template-columns: 1fr 1fr 1fr; gap: 0 16px; }
@media (max-width: 760px) { .panel.compact .form-grid { grid-template-columns: 1fr; } }

/* assignee search with chips */
.assignee-search { position: relative; }
.assignee-search .chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.assignee-search .chips:empty { display: none; }
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  background: #e2f3fc; color: #006da0; border: 1px solid rgba(0,145,212,.3);
  border-radius: 999px; padding: 4px 12px; font-size: 0.82rem; font-weight: 600;
}
.chip button {
  appearance: none; background: none; border: 0; cursor: pointer;
  color: inherit; font-size: 0.95rem; line-height: 1; padding: 0;
}
.assignee-search .suggest {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 30;
  background: #fff; border: 1px solid var(--hairline); border-radius: 10px;
  box-shadow: var(--shadow-lift); overflow: hidden; margin-top: 4px;
  display: none;
}
.assignee-search .suggest.open { display: block; }
.assignee-search .suggest button {
  display: block; width: 100%; text-align: left;
  appearance: none; background: none; border: 0; cursor: pointer;
  font-family: var(--text); font-size: 0.87rem; color: var(--ink-soft);
  padding: 9px 14px;
}
.assignee-search .suggest button:hover, .assignee-search .suggest button.hl { background: var(--paper-warm); color: var(--ink); }

/* portal tabs */
.portal-tabs {
  display: flex; gap: 4px; flex-wrap: wrap;
  border-bottom: 1px solid var(--hairline);
  margin-bottom: 30px;
}
.portal-tabs button {
  appearance: none; background: none; border: 0; cursor: pointer;
  font-family: var(--text); font-size: 0.9rem; font-weight: 600;
  color: var(--muted); padding: 12px 18px;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color .15s ease, border-color .15s ease;
}
.portal-tabs button:hover { color: var(--ink); }
.portal-tabs button.active { color: var(--ink); border-bottom-color: var(--teal); }

/* directory */
.dir-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 980px) { .dir-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .dir-grid { grid-template-columns: 1fr; } }
.dir-card {
  background: #fff; border: 1px solid var(--hairline); border-radius: 14px;
  padding: 22px 24px; box-shadow: var(--shadow-card);
}
.dir-card .d-name { font-weight: 700; color: var(--ink); font-size: 1.05rem; }
.dir-card .d-role { color: var(--sky); font-weight: 600; font-size: 0.78rem; margin-bottom: 8px; }
.dir-card .d-line {
  font-size: 0.86rem; color: var(--ink-soft); padding: 4px 0;
  display: flex; align-items: baseline; gap: 8px;
}
.dir-card .d-line .k {
  color: var(--muted); font-size: 0.72rem; text-transform: uppercase;
  letter-spacing: .08em; white-space: nowrap; flex: none;
}
.dir-card .d-line .k::after { content: ":"; }
.dir-card .d-line > :not(.k) { min-width: 0; overflow-wrap: anywhere; }
.dir-card .d-fam { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--hairline); font-size: 0.83rem; color: var(--muted); }

/* tabling */
.slot-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
@media (max-width: 800px) { .slot-grid { grid-template-columns: 1fr; } }
.slot-card {
  background: #fff; border: 1px solid var(--hairline); border-radius: 14px;
  padding: 22px 24px; box-shadow: var(--shadow-card);
}
.slot-card .s-title { font-weight: 700; color: var(--ink); }
.slot-card .s-meta { font-size: 0.86rem; color: var(--muted); margin: 3px 0 12px; }
.cap-bar { height: 6px; border-radius: 3px; background: var(--paper-warm); overflow: hidden; margin-bottom: 8px; }
.cap-bar > div { height: 100%; background: var(--teal); border-radius: 3px; transition: width .3s ease; }
.cap-bar.full > div { background: var(--gold); }
.slot-card .s-names { font-size: 0.84rem; color: var(--ink-soft); min-height: 1.4em; margin-bottom: 14px; }

/* publicity + attendance */
.stat-chips { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 24px; }
.stat-chip {
  background: #fff; border: 1px solid var(--hairline); border-radius: 12px;
  padding: 14px 22px; box-shadow: var(--shadow-card);
}
.stat-chip .n { font-size: 1.5rem; font-weight: 700; color: var(--navy); line-height: 1.1; }
.stat-chip .l { font-size: 0.7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.rank-num { font-weight: 700; color: var(--muted); }
.ev-row-actions {
  white-space: nowrap;
  text-align: left !important;
}
.ev-row-actions .btn { margin: 0; }
.code-chip {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background: var(--paper-warm); border: 1px solid var(--hairline);
  border-radius: 7px; padding: 2px 9px; font-size: 0.85rem; font-weight: 600; color: var(--navy);
  letter-spacing: .08em;
}
.att-check { color: #1e7d3e; font-weight: 700; }
.att-miss { color: var(--muted); }

/* publicity proof photos */
.proof-thumb {
  display: inline-block; width: 52px; height: 52px; border-radius: 8px;
  overflow: hidden; border: 1px solid var(--hairline); background: var(--paper-warm);
  cursor: zoom-in; vertical-align: middle;
}
.proof-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.proof-none { color: var(--muted); font-size: 0.82rem; }
.file-field input[type="file"] { font-size: 0.85rem; }
.file-preview {
  margin-top: 8px; display: none; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 0.82rem; color: var(--muted);
}
.file-preview.show { display: flex; }
.file-preview img { width: 46px; height: 46px; object-fit: cover; border-radius: 7px; border: 1px solid var(--hairline); }
.proof-stack { display: inline-flex; gap: 4px; flex-wrap: wrap; }

/* reimbursement dropzone */
.rb-dropzone {
  position: relative;
  border: 1.5px dashed var(--hairline);
  border-radius: 12px;
  background: #fafbfd;
  transition: border-color .15s ease, background .15s ease;
  cursor: pointer;
}
.rb-dropzone:hover,
.rb-dropzone:focus-within { border-color: var(--teal); background: #f3fafc; }
.rb-dropzone.dragover {
  border-color: var(--teal);
  background: #eaf7fb;
  box-shadow: inset 0 0 0 1px var(--teal);
}
.rb-dropzone input[type="file"] {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); border: 0;
  opacity: 0; pointer-events: none;
}
.rb-dropzone-inner {
  pointer-events: none;
  padding: 28px 20px;
  text-align: center;
  display: flex; flex-direction: column; gap: 6px; align-items: center;
}
.rb-dropzone-inner strong {
  font-size: 0.95rem; font-weight: 650; color: var(--ink);
}
.rb-dropzone-inner span {
  font-size: 0.8rem; color: var(--muted); line-height: 1.4; max-width: 36em;
}
#rb-file-err,
#pub-file-err { margin-top: 8px; min-height: 0; }
.file-preview .rb-file-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 10px; border: 1px solid var(--hairline); border-radius: 8px;
  background: #fff; color: var(--ink); max-width: 100%;
}
.file-preview .rb-file-chip .rb-file-ext {
  flex-shrink: 0; font-size: 0.68rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--teal);
  background: #eaf7fb; border-radius: 5px; padding: 3px 6px;
}
.file-preview .rb-file-chip .rb-file-name {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 180px;
}
.file-preview .rb-file-chip .rb-file-rm {
  appearance: none; border: 0; background: none; cursor: pointer;
  color: var(--muted); font-size: 1rem; line-height: 1; padding: 0 2px;
}
.file-preview .rb-file-chip .rb-file-rm:hover { color: var(--ink); }
.proof-file {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 8px; border: 1px solid var(--hairline); border-radius: 7px;
  background: #fff; font-size: 0.75rem; font-weight: 650; color: var(--ink);
  text-decoration: none; vertical-align: middle;
}
.proof-file:hover { border-color: var(--teal); color: var(--teal); }

/* reimbursement notes */
.rb-note-admin {
  width: min(260px, 28vw); min-width: 160px; min-height: 64px;
  resize: both; padding: 8px 10px;
  border: 1px solid var(--hairline); border-radius: 8px;
  font-family: inherit; font-size: 0.82rem; line-height: 1.45;
  background: #fff; color: var(--ink);
}
.rb-note-view {
  max-width: 260px; font-size: 0.82rem; line-height: 1.45; color: var(--ink);
  white-space: pre-wrap; word-break: break-word;
}
.rb-note-view.is-collapsed {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden; white-space: normal;
}
.rb-note-toggle {
  appearance: none; border: 0; background: none; padding: 0; margin-top: 4px;
  font: inherit; font-size: 0.76rem; font-weight: 650; color: var(--teal);
  cursor: pointer;
}
.rb-note-toggle:hover { text-decoration: underline; }
.lightbox {
  position: fixed; inset: 0; z-index: 300; display: none;
  align-items: center; justify-content: center;
  background: rgba(10,21,38,.86); padding: 30px; cursor: zoom-out;
}
.lightbox.show { display: flex; }
.lightbox img { max-width: 92vw; max-height: 88vh; border-radius: 12px; box-shadow: var(--shadow-lift); }

/* confirmation modal */
.confirm-overlay {
  position: fixed; inset: 0; z-index: 320; display: none;
  align-items: center; justify-content: center;
  background: rgba(10,21,38,.6); backdrop-filter: blur(3px); padding: 24px;
}
.confirm-overlay.show { display: flex; }
.confirm-card {
  background: var(--paper, #fff); border-radius: 16px; max-width: 440px; width: 100%;
  padding: 28px 26px 22px; box-shadow: var(--shadow-lift);
  animation: confirm-pop .18s var(--ease-out, ease);
}
@keyframes confirm-pop { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
.confirm-card h3 { margin: 0 0 8px; font-size: 1.25rem; }
.confirm-card p { margin: 0 0 22px; color: var(--muted); font-size: 0.95rem; line-height: 1.5; }
.confirm-actions { display: flex; justify-content: flex-end; gap: 10px; }

.toast {
  position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%);
  background: var(--navy); color: #fff; border-radius: 10px;
  padding: 12px 24px; font-size: 0.9rem; box-shadow: var(--shadow-lift);
  opacity: 0; pointer-events: none; transition: opacity .25s ease; z-index: 200;
}
.toast.show { opacity: 1; }
.setup-note {
  background: #fdf6e8; border: 1px solid #f0dcb4; border-radius: 12px;
  padding: 18px 22px; font-size: 0.9rem; color: #7a5a12; margin-bottom: 26px;
}

/* ============ REVEAL ============ */
.reveal {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition: opacity 1s ease, transform 1s cubic-bezier(.25, .55, .25, 1);
  will-change: opacity, transform;
}
/* schedule page keeps the gentler fade (never fully disappears) */
.page-schedule .reveal { opacity: .4; }
/* when fading out, drop the stagger delays so the exit feels unified and smooth */
.reveal:not(.in-view), .reveal-stagger:not(.in-view) > .reveal { transition-delay: 0s !important; }
.reveal.in-view { opacity: 1; transform: none; }
.reveal-stagger.in-view > .reveal:nth-child(1) { transition-delay: 0s; }
.reveal-stagger.in-view > .reveal:nth-child(2) { transition-delay: .05s; }
.reveal-stagger.in-view > .reveal:nth-child(3) { transition-delay: .10s; }
.reveal-stagger.in-view > .reveal:nth-child(4) { transition-delay: .15s; }
.reveal-stagger.in-view > .reveal:nth-child(5) { transition-delay: .20s; }
.reveal-stagger.in-view > .reveal:nth-child(6) { transition-delay: .25s; }
.reveal-stagger.in-view > .reveal:nth-child(7) { transition-delay: .30s; }
.reveal-stagger.in-view > .reveal:nth-child(8) { transition-delay: .35s; }
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.in-view { opacity: 1; transform: none; transition: none; }
}
/* Mobile safety: never let the scroll-reveal JS hide content on phones.
   If the observer doesn't fire on a given mobile browser, everything still shows. */
@media (max-width: 760px) {
  .reveal, .reveal-stagger > .reveal { opacity: 1 !important; transform: none !important; }
}

/* ============ SITE BACKGROUND ============ */
/* warm paper with soft blue/gold corner light + fine grain — calm & premium */
.bg-aurora {
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(95% 85% at 0% 0%, rgba(108,158,196,.44), rgba(108,158,196,0) 58%),
    radial-gradient(70% 70% at 30% 12%, rgba(120,168,198,.22), rgba(120,168,198,0) 60%),
    radial-gradient(80% 76% at 100% 100%, rgba(214,170,72,.22), rgba(214,170,72,0) 55%),
    linear-gradient(135deg, #e7eef4 0%, #f2f2ec 52%, #f8efdc 100%);
}
.bg-aurora::after {
  content: ""; position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: .035; mix-blend-mode: multiply;
}
.bg-aurora span { display: none; }

/* ============ PREMIUM POLISH ============ */
/* slightly softer, longer reveal */
.reveal { transition: opacity 1s ease, transform 1s cubic-bezier(.25, .55, .25, 1); }

/* kicker accent line draws in as the section reveals */
.reveal .kicker::before {
  transform: scaleX(0); transform-origin: left;
  transition: transform .6s var(--ease-out) .12s;
}
.reveal.in-view .kicker::before { transform: scaleX(1); }

/* centered section headers get a subtle gold accent that scales in */
.center h2 { position: relative; }
.center h2::after {
  content: ""; display: block; width: 46px; height: 3px; margin: 18px auto 0;
  border-radius: 3px; background: linear-gradient(90deg, var(--teal), var(--gold));
  transform: scaleX(0); transform-origin: center; opacity: 0;
  transition: transform .65s var(--ease-out) .12s, opacity .5s ease .12s;
}
.reveal.in-view .center h2::after,
section:not(.reveal) .center h2::after { transform: scaleX(1); opacity: 1; }

/* hero helix watermark drifts gently */
.hero::before { animation: heroDrift 15s ease-in-out 1s infinite alternate; }
@keyframes heroDrift { from { transform: translateX(0); } to { transform: translateX(-16px); } }

/* buttons: premium press feedback + focus ring */
.btn { transition: background .25s var(--ease-out), color .25s var(--ease-out), transform .25s var(--ease-out), box-shadow .25s var(--ease-out), border-color .25s ease; }
.btn:active { transform: translateY(0) scale(.985); }
.btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* keep accents visible even if the observer never fires on mobile */
@media (max-width: 760px) {
  .reveal .kicker::before { transform: none !important; }
  .center h2::after { transform: scaleX(1) !important; opacity: 1 !important; }
}
@media (prefers-reduced-motion: reduce) {
  .hero::before { animation: none; }
  .reveal .kicker::before, .center h2::after { transition: none; transform: none; opacity: 1; }
}

/* ============ PORTAL — MOBILE ============ */
@media (max-width: 720px) {
  .portal-shell { padding: 34px 16px 80px; }

  /* tabs scroll sideways instead of wrapping into a block */
  .portal-tabs {
    flex-wrap: nowrap; overflow-x: auto; gap: 0;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .portal-tabs::-webkit-scrollbar { display: none; }
  .portal-tabs button { white-space: nowrap; padding: 12px 14px; font-size: 0.85rem; }

  /* one field per row, full-width controls */
  .panel { padding: 20px 16px; border-radius: 12px; }
  .form-grid { grid-template-columns: 1fr !important; gap: 0; }
  .form-grid .field { grid-column: 1 / -1 !important; }
  .field input:not([type="radio"]):not([type="checkbox"]):not([type="file"]):not([type="hidden"]),
  .field select,
  .field textarea { width: 100%; box-sizing: border-box; }
  .field input[type="file"] { font-size: 0.82rem; }

  /* action buttons stack full-width so they're tappable */
  .portal-bar { flex-direction: column; align-items: stretch; gap: 12px; margin-bottom: 22px; }
  .portal-actions {
    width: 100%; margin-left: 0; flex-direction: column-reverse; align-items: stretch;
  }
  .portal-actions-steady,
  .portal-actions-bulk { width: 100%; }
  .portal-actions .btn { flex: 1 1 auto; text-align: center; }

  /* tables keep their own horizontal scroll */
  .task-table-wrap { border-radius: 12px; }
  .task-table { min-width: 640px; }

  .stat-chips { grid-template-columns: 1fr 1fr; }
  .dir-grid { grid-template-columns: 1fr !important; }
  .login-card { padding: 30px 22px; }
  .pill-note { display: inline-block; line-height: 1.5; }
}

/* ---- directory tools: search / filter / sort ---- */
.dir-tools {
  display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: flex-end;
  margin: 0 0 18px; padding: 12px 14px;
  background: #fff; border: 1px solid var(--hairline); border-radius: 12px;
  box-shadow: var(--shadow-card);
  overflow: visible;
}
.dir-tools #dir-search {
  flex: 1 1 180px; min-width: 160px;
  padding: 8px 12px; border: 1px solid var(--hairline); border-radius: 8px;
  font-family: inherit; font-size: 0.9rem; height: 36px; box-sizing: border-box;
}
.dir-filter,
.dir-sort-label {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted);
  flex: 0 1 140px; min-width: 120px;
  position: relative;
}
.dir-sort-label {
  margin-left: auto;
  flex: 0 1 180px;
  min-width: 160px;
}
.dir-tools .tf-label {
  line-height: 1.2;
}
.dir-tools .tf-ms-btn {
  height: 36px;
}

/* ---- directory: clickable name + expandable detail ---- */
.d-name-btn {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; background: none; border: 0; padding: 0; cursor: pointer;
  font-family: inherit; text-align: left; color: inherit;
}
.d-name-btn .d-name { transition: color .2s ease; }
.d-name-btn:hover .d-name { color: var(--gold); }
.d-name-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 6px; }
.dir-card.open { box-shadow: var(--shadow-lift); }
.d-more {
  margin-top: 10px; padding-top: 12px;
  border-top: 1px dashed var(--hairline);
  animation: d-open .22s var(--ease-out);
}
.d-more[hidden] { display: none; }
@keyframes d-open { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.dir-card { cursor: pointer; transition: box-shadow .2s ease, transform .2s ease; }
.dir-card:hover { box-shadow: var(--shadow-lift); transform: translateY(-2px); }
.dir-card a, .dir-card button { cursor: pointer; }

/* ============ SPEAKER SERIES — CARD GRID ============ */
.spk-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 18px; margin-top: 42px;
}
@media (max-width: 1040px) { .spk-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 780px)  { .spk-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .spk-grid { grid-template-columns: 1fr; } }

.spk-card {
  background: #fff; border: 1px solid var(--hairline); border-radius: 14px;
  padding: 22px 18px 24px; text-align: center;
  display: flex; flex-direction: column; align-items: center;
  box-shadow: 0 2px 10px rgba(20,20,30,.05);
  transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.spk-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }

.sc-date {
  display: inline-block; background: var(--navy); color: var(--gold);
  font-size: 0.72rem; font-weight: 800; letter-spacing: .1em;
  padding: 6px 14px; border-radius: 999px;
}
.sc-time {
  margin-top: 10px; font-size: 0.78rem; font-weight: 700;
  color: var(--muted); letter-spacing: .02em;
}

.sc-face { margin: 16px 0 14px; display: flex; justify-content: center; }
.sc-face img, .sc-initials {
  width: 88px; height: 88px; border-radius: 50%; object-fit: cover;
  border: 2px solid var(--gold); background: var(--paper-warm);
}
.sc-face.two img { width: 74px; height: 74px; }
.sc-face.two img:last-child { margin-left: -14px; }
.sc-initials {
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; color: var(--navy); font-size: 1.4rem; letter-spacing: .02em;
}

.sc-name {
  font-weight: 700; color: var(--ink); font-size: 1rem;
  line-height: 1.3; margin-bottom: 8px;
}
.sc-role {
  font-size: 0.82rem; color: var(--muted); line-height: 1.5;
}
/* multi-select checkbox on cards */
.card-sel { position: absolute; top: 12px; right: 12px; z-index: 2; }
.card-sel input { width: 16px; height: 16px; cursor: pointer; }
.dir-card, .slot-card { position: relative; }
.row-sel { width: 16px; height: 16px; cursor: pointer; }

/* roles table — fits without horizontal scrolling */
.roles-wrap { overflow-x: visible; }
.roles-table { min-width: 0; width: 100%; table-layout: fixed; }
.roles-table th, .roles-table td { padding: 8px 4px; text-align: center; font-size: 0.78rem; }
.roles-table th:first-child, .roles-table td:first-child { text-align: left; width: 22%; padding-left: 10px; }
.roles-table th:last-child,  .roles-table td:last-child  { text-align: right; width: 12%; padding-right: 10px; }
.roles-table th { font-size: 0.66rem; letter-spacing: .04em; line-height: 1.25; }
.roles-table input[type="checkbox"] { width: 15px; height: 15px; }
.roles-table .role-name-input {
  width: 100% !important; padding: 6px 8px; border: 1px solid var(--hairline);
  border-radius: 7px; font-family: inherit; font-size: 0.8rem; box-sizing: border-box;
}
.role-row-actions { white-space: nowrap; }
.btn-icon {
  border: 0; background: transparent; cursor: pointer; padding: 2px 6px;
  font-size: 1rem; line-height: 1; opacity: 0.75;
}
.btn-icon:hover { opacity: 1; }
@media (max-width: 700px) {
  .roles-wrap { overflow-x: auto; }
  .roles-table { min-width: 640px; }
}

/* Manage Accounts modal — side-by-side */
.acct-modal {
  gap: 0;
  width: min(1280px, calc(100vw - 28px)) !important;
  max-height: calc(100vh - 80px) !important;
}
.acct-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex: 0 0 auto; margin-bottom: 14px;
}
.acct-modal-head h3 { margin: 0; }
.acct-modal-body {
  display: grid;
  grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
  gap: 16px;
  flex: 1 1 auto;
  min-height: 0;
  align-items: stretch;
}
.acct-add-section,
.acct-list-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  min-height: 0;
  height: 100%;
}
.acct-list-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex: 0 0 auto;
}
.acct-list-head h4 {
  margin: 0; font-size: 0.95rem; font-weight: 700; color: var(--ink);
}
.acct-list-head #acct-search {
  flex: 0 1 240px; min-width: 140px; padding: 8px 12px;
  border: 1px solid var(--hairline); border-radius: 8px;
  font-family: inherit; font-size: 0.85rem; background: #fff;
}
.acct-table-wrap {
  box-shadow: none !important;
  margin: 0 !important;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: #fff;
  flex: 1 1 auto;
  min-height: 280px;
  max-height: none !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}
.acct-table,
.acct-table.task-table {
  width: 100% !important;
  min-width: 0 !important;
  table-layout: fixed;
  border-collapse: collapse;
}
.acct-table thead th {
  position: sticky; top: 0; z-index: 2;
  font-size: 0.68rem; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--muted); padding: 8px 10px;
  border-bottom: 1px solid var(--hairline);
  text-align: left; background: var(--paper-warm);
  font-weight: 700;
}
.acct-table tbody td {
  vertical-align: middle; padding: 10px;
  border-bottom: 1px solid var(--hairline);
}
.acct-table tbody tr:last-child td { border-bottom: 0; }
.acct-table th:nth-child(1), .acct-table td:nth-child(1) { width: 26%; }
.acct-table th:nth-child(2), .acct-table td:nth-child(2) { width: 38%; }
.acct-table th:nth-child(3), .acct-table td:nth-child(3) { width: 18%; }
.acct-table th:nth-child(4), .acct-table td:nth-child(4) { width: 18%; }
.acct-identity { min-width: 0; }
.acct-name {
  font-weight: 650; font-size: 0.88rem; color: var(--ink);
  line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.acct-user {
  display: block; margin-top: 2px;
  font-size: 0.72rem; color: var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.acct-roles-col, .acct-big-col, .acct-actions { min-width: 0; }
.acct-table .cs-wrap,
.acct-table .cs-compact {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}
.acct-table .cs-btn {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.acct-action-select,
.acct-role-add,
#am-role-add {
  width: 100%;
  max-width: 100%;
  height: 32px;
  padding: 4px 8px;
  border: 1px solid var(--hairline);
  border-radius: 7px;
  background: #fff;
  color: var(--ink);
  font-family: inherit;
  font-size: 0.78rem;
  cursor: pointer;
  box-sizing: border-box;
}
.acct-big-input {
  width: 100%; min-width: 0; padding: 6px 8px;
  border: 1px solid var(--hairline); border-radius: 7px;
  font-family: inherit; font-size: 0.8rem; box-sizing: border-box;
  background: #fff;
}
.acct-add-card {
  flex: 1 1 auto;
  min-height: 280px;
  margin: 0;
  padding: 14px;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: var(--paper-warm);
  overflow: auto;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
.acct-add-card #add-member-form {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
}
.acct-add-card .acct-footer {
  margin-top: auto;
  padding-top: 12px;
}
.acct-add-grid {
  grid-template-columns: 1fr !important;
  gap: 10px !important;
}
.acct-add-roles,
.acct-add-full { grid-column: 1 / -1; }
.acct-footer { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
@media (max-width: 900px) {
  .acct-modal-body {
    grid-template-columns: 1fr;
  }
  .acct-add-section { order: 1; }
  .acct-list-section { order: 2; min-height: 260px; }
  .acct-table-wrap { max-height: min(40vh, 320px) !important; }
}
.roles-save-bar {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
  margin: 0 0 16px;
}
.roles-save-bar[hidden] { display: none !important; }
.roles-footer {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
  margin-top: 4px; padding-top: 4px;
}
.req { color: #c0392b; font-weight: 700; }
.role-chips-cell {
  display: flex; flex-direction: column; align-items: stretch; gap: 6px;
  min-width: 0;
}
.role-search-picker {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  width: 100%; min-width: 0; min-height: 38px;
  padding: 6px 8px; box-sizing: border-box;
  border: 1px solid var(--hairline); border-radius: 8px; background: #fff;
}
.role-search-picker #am-role-add {
  flex: 1 1 160px;
  min-width: 140px;
  max-width: 240px;
}
.role-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.role-chip {
  position: relative; display: inline-flex; align-items: center; gap: 3px;
  padding: 3px 7px; border-radius: 999px; background: var(--paper-warm);
  border: 1px solid var(--hairline); font-size: 0.68rem; font-weight: 600;
  color: var(--ink-soft); max-width: 140px;
}
.role-chip-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.role-chip-x {
  display: none; border: 0; background: transparent; cursor: pointer;
  font-size: 0.9rem; line-height: 1; padding: 0 1px; color: var(--muted);
}
.role-chip:hover .role-chip-x { display: inline; }
.panel-overlay .acct-modal > .acct-modal-head { flex: 0 0 auto; }
.panel-overlay .acct-modal > .acct-modal-body {
  flex: 1 1 auto;
  min-height: 0;
}

/* Fixed portal modals — page behind stays put; content scrolls inside */
body.portal-modal-open { overflow: hidden; }
.panel-overlay {
  position: fixed; inset: 0; z-index: 280;
  display: none; align-items: center; justify-content: center;
  padding: 28px 18px;
  background: rgba(10, 21, 38, 0.45);
  backdrop-filter: blur(3px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.panel-overlay .panel-modal {
  width: min(720px, 100%);
  max-height: calc(100vh - 56px);
  overflow: hidden;
  display: flex; flex-direction: column;
  margin: auto;
  box-shadow: var(--shadow-lift);
}
.panel-overlay .panel-modal-wide { width: min(960px, 100%); }
.panel-overlay .panel-modal-wide.acct-modal {
  width: min(1280px, calc(100vw - 28px)) !important;
}
.panel-overlay .panel-modal-xl { width: min(1120px, 100%); }
.panel-overlay .panel-modal > h3 { flex: 0 0 auto; }
.panel-overlay .panel-modal > form,
.panel-overlay .panel-modal > .pill-note { flex: 0 0 auto; }
.panel-overlay .panel-scroll {
  flex: 1 1 auto;
  min-height: 0;
  max-height: min(52vh, 480px);
  overflow: auto;
}
.panel-overlay .panel.compact {
  max-height: calc(100vh - 100px);
  overflow-y: auto;
  padding: 22px 26px;
}
@media (max-width: 760px) {
  .panel-overlay { padding: 16px 10px; }
  .panel-overlay .panel-modal { max-height: calc(100vh - 72px); }
}

/* Tabling bulk-slot preview */
.slot-preview {
  margin: 14px 0 16px;
  padding: 12px 14px;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: rgba(10, 21, 38, 0.03);
}
.slot-preview-list {
  margin: 0;
  padding-left: 1.15rem;
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--ink, #222831);
}
.slot-preview-list li { margin: 0.2rem 0; }

/* ============ PARTNERS / SPONSORS ============ */
.sponsor-row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 34px 60px; margin-top: 22px;
  --sponsor-scale: 1;
}
/* Each logo gets its own height so they carry equal optical weight
   rather than being forced to one raw pixel height. */
.sponsor { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.sponsor img {
  height: calc(var(--h, 80) * 1px * var(--sponsor-scale));
  width: auto; display: block;
  transition: transform .3s var(--ease-out);
}
.sponsor:hover img { transform: translateY(-3px) scale(1.03); }
.sponsor.s-sutardja { --h: 52; }
.sponsor.s-genesis  { --h: 84; }
.sponsor.s-tamarind { --h: 92; }
.sponsor.s-mithrl   { --h: 78; }
.sponsor.s-kopra    { --h: 79; }
#partners .lead {
  max-width: 920px;
}
#partners .center { margin-bottom: 0; }
#partners .center h2 { margin-bottom: 10px; }
.sponsor-label {
  text-align: center;
  margin: 22px 0 0;
  font-size: 0.82rem;
  color: var(--muted);
}
.sponsor-cta {
  text-align: center; margin-top: 28px;
  font-size: 0.82rem; color: var(--muted);
}
.sponsor-cta a { font-weight: 600; }
@media (max-width: 980px) { .sponsor-row { --sponsor-scale: .82; gap: 30px 46px; } }
@media (max-width: 760px) { .sponsor-row { --sponsor-scale: .66; gap: 26px 34px; margin-top: 22px; } }