/* Small enhancements without custom build */
  .container-max { max-width: 1120px; width: 100%; margin-left: auto; margin-right: auto; }
  .proseish { max-width: none; }
  .proseish p { margin-top: .75rem; margin-bottom: .75rem; }
  .proseish h2 { margin-top: 2rem; margin-bottom: .75rem; font-weight: 700; }
  .proseish h3 { margin-top: 1.25rem; margin-bottom: .5rem; font-weight: 700; }
  .card { border: 1px solid rgb(226 232 240); border-radius: 1rem; background: white; }
  .muted { color: rgb(71 85 105); }
  .badge { display:inline-flex; align-items:center; padding:.25rem .6rem; border-radius:9999px; font-size:.75rem; border:1px solid rgb(226 232 240); }
  .link { text-decoration: underline; text-underline-offset: 3px; }

  /* Slider */
  .slider { position: relative; overflow: hidden; border-radius: 1rem; }
  .slide { position: absolute; inset: 0; opacity: 0; transition: opacity 500ms ease; }
  .slide.is-active { opacity: 1; position: relative; }
  .slide img { width: 100%; height: 420px; object-fit: cover; display: block; }
  @media (max-width: 768px) { .slide img { height: 260px; } }
  .slider-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(2,6,23,.72), rgba(2,6,23,.18), rgba(2,6,23,0)); }
  .slider-content { position: absolute; left: 1.25rem; right: 1.25rem; bottom: 1.25rem; z-index: 10; }
  .slider-dot { width: .6rem; height: .6rem; border-radius: 9999px; background: rgba(255,255,255,.45); }
  .slider-dot.is-active { background: rgba(255,255,255,1); }

/* Overlapping collage (Venue page) */
.collage-wrap { display:flex; justify-content:center; margin: 1.25rem 0 2rem; }
.collage { position: relative; width: min(820px, 100%); height: 440px; }
.collage img { position:absolute; border-radius: 18px; object-fit: cover; box-shadow: 0 18px 40px rgba(0,0,0,.22); }
.collage .img-1 { width: 320px; height: 240px; left: 0; top: 20px; z-index: 2; }
.collage .img-2 { width: 520px; height: 300px; left: 220px; top: 0; z-index: 1; }
.collage .img-3 { width: 420px; height: 270px; left: 90px; top: 190px; z-index: 3; }

@media (max-width: 860px) {
  .collage { height: 520px; }
  .collage .img-1 { width: 260px; height: 200px; left: 0; top: 10px; }
  .collage .img-2 { width: 100%; height: 260px; left: 0; top: 120px; }
  .collage .img-3 { width: 320px; height: 220px; left: 20px; top: 390px; }
}

/* Mobile nav animation + hamburger -> X */
.nav-toggle .burger { position: relative; width: 22px; height: 14px; display: inline-block; }
.nav-toggle .burger span { position: absolute; left: 0; right: 0; height: 2px; border-radius: 9999px; background: currentColor; transition: transform 220ms ease, opacity 180ms ease, top 220ms ease; }
.nav-toggle .burger span:nth-child(1) { top: 0; }
.nav-toggle .burger span:nth-child(2) { top: 6px; }
.nav-toggle .burger span:nth-child(3) { top: 12px; }

.nav-toggle.is-open .burger span:nth-child(1) { top: 6px; transform: rotate(45deg); }
.nav-toggle.is-open .burger span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open .burger span:nth-child(3) { top: 6px; transform: rotate(-45deg); }

/* Mobile dropdown panel */
.mobile-nav { max-height: 0; opacity: 0; transform: translateY(-6px); overflow: hidden; pointer-events: none; transition: max-height 260ms ease, opacity 220ms ease, transform 220ms ease; }
.mobile-nav.is-open { max-height: 520px; opacity: 1; transform: translateY(0); pointer-events: auto; }

/* Speakers marquee */
.speakers-marquee{
  position:relative;
  overflow:hidden;
  border-radius:18px;
}
.speakers-marquee::before,
.speakers-marquee::after{
  content:"";
  position:absolute;
  top:0;
  width:64px;
  height:100%;
  z-index:2;
  pointer-events:none;
}
.speakers-marquee::before{
  left:0;
  background:linear-gradient(to right, rgba(248,250,252,1), rgba(248,250,252,0));
}
.speakers-marquee::after{
  right:0;
  background:linear-gradient(to left, rgba(248,250,252,1), rgba(248,250,252,0));
}

.speakers-track{
  display:flex;
  gap:14px;
  align-items:stretch;
  padding:10px 6px;
  width:max-content;
  animation:speakers-scroll 28s linear infinite;
}

/* Pause on hover */
.speakers-marquee:hover .speakers-track{ animation-play-state:paused; }

@keyframes speakers-scroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}

.speaker-card{
  flex:0 0 auto;
  width:260px;
  background:#ffffff;
  border:1px solid rgba(15,23,42,0.08);
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 1px 0 rgba(15,23,42,0.04);
}

.speaker-img{
  height:200px;
  background:rgba(143,188,143,0.15); /* theme tint */
}
.speaker-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.speaker-meta{
  padding:12px 12px 14px;
}
.speaker-name{
  font-weight:800;
  letter-spacing:-0.01em;
  color:#0f172a;
  line-height:1.2;
}
.speaker-role{
  margin-top:4px;
  font-size:13px;
  color:rgba(15,23,42,0.65);
}

@media (max-width: 640px){
  .speakers-marquee::before,
  .speakers-marquee::after{ width:36px; }
  .speaker-card{ width:210px; }
  .speaker-img{ height:160px; }
  .speakers-track{ animation-duration:22s; }
}

@media (prefers-reduced-motion: reduce){
  .speakers-track{ animation:none; }
}

/* =============================
   Speakers page (scoped styles)
   ============================= */

.speakers-page{
  --pageBg: #f3f6f8;
  --text: #0f172a;
  --muted: #64748b;
  --line: rgba(15,23,42,.10);
  --cardBg: #ffffff;
  --shadow: 0 10px 28px rgba(2,6,23,.10);
  --radius: 14px;
  --radius2: 12px;
  --max: 1100px;

  /* BIOMED green */
  --green: #94bd93;
  --greenDark: #6f9e75;
  --greenDarker: #5f8f66;
  --btnGreen: #8FBC8F;
  --btnGreenHover: #6da06d;

  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color: var(--text);
  background: var(--pageBg);
  overflow-x:hidden;
}

.speakers-page *{box-sizing:border-box}
.speakers-page a{color:inherit}

.speakers-page .container{max-width:var(--max); margin:0 auto; padding:34px 18px 64px}

/* Top navigation (reference style) */
.speakers-page .nav{
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255,255,255,.92);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(10px);
}
.speakers-page .navInner{
  max-width: var(--max);
  margin: 0 auto;
  padding: 14px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}

.speakers-page .brand{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  font-weight: 800;
  letter-spacing:.2px;
  color: var(--text);
}
.speakers-page .brandMark{
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: var(--green);
  display:inline-block;
}
.speakers-page .brandText{
  display:flex;
  align-items:baseline;
  gap:2px;
  line-height: 1;
  font-size: 22px;
}
.speakers-page .brandText .brandDark{color: var(--text)}
.speakers-page .brandText .brandGreen{color: var(--greenDark)}

.speakers-page .navToggle{
  display:none;
  border:1px solid var(--line);
  background: #fff;
  color: var(--text);
  border-radius: 10px;
  padding: 9px 10px;
  font-weight: 600;
}

.speakers-page .navLinks{
  display:flex;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.speakers-page .navLinks a{
  text-decoration:none;
  color: rgba(15,23,42,.82);
  font-size: 13.5px;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
  transition: border-color .12s ease, color .12s ease;
  white-space:nowrap;
}
.speakers-page .navLinks a:hover{color: var(--text); border-color: rgba(15,23,42,.20)}
.speakers-page .navLinks a[aria-current="page"]{border-color: rgba(15,23,42,.45)}

.speakers-page .contactBtn{
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 8px 14px;
  border-radius: 10px;
  background: var(--btnGreen);
  color: #0b1b10;
  font-weight: 700;
  border: 1px solid rgba(15,23,42,.08);
  box-shadow: 0 8px 18px rgba(2,6,23,.10);
}
.speakers-page .contactBtn:hover{background: var(--btnGreenHover)}

/* Mobile */
@media (max-width: 980px){
  .speakers-page .navToggle{display:inline-flex; align-items:center; gap:8px}
  .speakers-page .navLinks{display:none; width:100%; padding-top: 12px; gap:12px}
  .speakers-page .navInner{flex-wrap:wrap}
  .speakers-page .navLinks.isOpen{display:flex; justify-content:flex-start}
  .speakers-page .navLinks a{padding: 8px 10px; border: 1px solid var(--line); border-radius: 999px}
  .speakers-page .navLinks a[aria-current="page"]{border-color: rgba(15,23,42,.35)}
  .speakers-page .contactBtn{padding: 8px 12px}
}

/* Top */
.speakers-page .hero{
  position:relative;
  padding: 0;
  border: 0;
  margin-top: 18px;
}
.speakers-page h1{
  margin:0 0 10px;
  font-size: 28px;
  line-height:1.15;
  letter-spacing:-.01em;
  color: var(--text);
}
.speakers-page .sub{
  margin:0;
  color: rgba(15,23,42,.78);
  max-width: 72ch;
  font-size: 14.5px;
  line-height: 1.65;
}

.speakers-page .panel{
  max-width: 760px;
  margin: 0 auto;
  background: var(--cardBg);
  border: 1px solid rgba(15,23,42,.08);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px 22px;
}

.speakers-page .panelTitle{margin:0 0 10px}

.speakers-page .metaRow{display:flex; flex-wrap:wrap; gap:10px; margin:14px 0 0}
.speakers-page .pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(15,23,42,.02);
  color: rgba(15,23,42,.70);
  font-size: 12.5px;
}

/* Controls */
.speakers-page .controls{max-width:760px; margin: 18px auto 14px; display:flex; gap:12px; align-items:center; flex-wrap:wrap}
.speakers-page .search{
  flex:1 1 260px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  border-radius: 12px;
  border:1px solid rgba(15,23,42,.12);
  background: #fff;
  color: var(--text);
  box-shadow: 0 8px 18px rgba(2,6,23,.06);
}
.speakers-page .search input{
  width:100%;
  border:0;
  outline:none;
  background:transparent;
  color: var(--text);
  font-size:14.5px;
  font-weight: 500;
}
.speakers-page .search input::placeholder{color:rgba(100,116,139,.55)}

.speakers-page .tagbar{display:flex; gap:8px; flex-wrap:wrap}

.speakers-page .tag{
  cursor:pointer;
  user-select:none;
  border-radius: 999px;
  padding:9px 12px;
  font-size:13px;
  color: rgba(15,23,42,.70);
  border:1px solid rgba(15,23,42,.12);
  background: #fff;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
  white-space:nowrap;
}

/* The project uses .spkTag for these pills; mirror the .tag styling */
.speakers-page .spkTag{
  cursor:pointer;
  user-select:none;
  border-radius: 999px;
  padding:9px 12px;
  font-size:13px;
  color: rgba(15,23,42,.70);
  border:1px solid rgba(15,23,42,.12);
  background: #fff;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
  white-space:nowrap;
}

.speakers-page .spkTag:hover{
  background: rgba(15,23,42,.03);
}

/* Active pill = theme green (THIS is what you want) */
.speakers-page .spkTag[aria-pressed="true"]{
  background: rgb(143 188 143 / 1) !important;
  border-color: rgb(143 188 143 / 1) !important;
  color: #0f172a !important;
}

.speakers-page .spkTag[aria-pressed="true"]:hover{
  background: rgba(143,188,143,.85) !important;
  border-color: rgba(143,188,143,.85) !important;
}

/* Force the ACTIVE state for the real filter buttons (the ones that get .is-active)
   Matches: button.spkTag.px-3.py-2.rounded-full.border.border-slate-200.bg-white.text-sm.is-active
   Specificity ~ (0,9,1)
*/
button.spkTag.px-3.py-2.rounded-full.border.border-slate-200.bg-white.text-sm.is-active{
  --tw-bg-opacity: 1;
  background-color: rgb(143 188 143 / var(--tw-bg-opacity, 1)) !important;
  border-color: rgb(143 188 143 / var(--tw-bg-opacity, 1)) !important;
  color: #0f172a !important;
}

button.spkTag.px-3.py-2.rounded-full.border.border-slate-200.bg-white.text-sm.is-active:hover{
  background-color: rgb(143 188 143 / 0.85) !important;
  border-color: rgb(143 188 143 / 0.85) !important;
}

/* Speakers filter buttons (All / Keynote / Invited) */
.speakers-page .speaker-filters{
  margin-left:auto;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.speakers-page .speaker-filter-btn{
  cursor:pointer;
  user-select:none;
  border-radius:9999px;
  padding:9px 14px;
  font-size:13px;
  font-weight:600;
  color: rgba(15,23,42,.78);
  border:1px solid rgba(15,23,42,.12);
  background:#fff;
  white-space:nowrap;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}

.speakers-page .speaker-filter-btn:hover{
  background: rgba(15,23,42,.03);
}

/* Only the ACTIVE filter is green */
.speakers-page .speaker-filter-btn.is-active,
.speakers-page .speaker-filter-btn[aria-pressed="true"]{
  background: rgb(143 188 143 / 1) !important;
  border-color: rgb(143 188 143 / 1) !important;
  color: #0f172a !important;
}

.speakers-page .speaker-filter-btn.is-active:hover,
.speakers-page .speaker-filter-btn[aria-pressed="true"]:hover{
  background: rgba(143,188,143,.85) !important;
  border-color: rgba(143,188,143,.85) !important;
}

/* Fallback: if HTML uses different classes/attrs, still make ONLY the active one green */
.speakers-page .speaker-filters button.is-active,
.speakers-page .speaker-filters button.active,
.speakers-page .speaker-filters button[aria-pressed="true"],
.speakers-page .speaker-filters button[aria-selected="true"],
.speakers-page .speaker-filters .tag.is-active,
.speakers-page .speaker-filters .tag.active,
.speakers-page .speaker-filters .tag[aria-pressed="true"],
.speakers-page .speaker-filters .tag[aria-selected="true"]{
  background: rgb(143 188 143 / 1) !important;
  border-color: rgb(143 188 143 / 1) !important;
  color: #0f172a !important;
}

.speakers-page .speaker-filters button.is-active:hover,
.speakers-page .speaker-filters button.active:hover,
.speakers-page .speaker-filters button[aria-pressed="true"]:hover,
.speakers-page .speaker-filters button[aria-selected="true"]:hover,
.speakers-page .speaker-filters .tag.is-active:hover,
.speakers-page .speaker-filters .tag.active:hover,
.speakers-page .speaker-filters .tag[aria-pressed="true"]:hover,
.speakers-page .speaker-filters .tag[aria-selected="true"]:hover{
  background: rgba(143,188,143,.85) !important;
  border-color: rgba(143,188,143,.85) !important;
}

/* Ensure NON-active filters stay white even if other global styles exist */
.speakers-page .speaker-filters button:not(.is-active):not(.active):not([aria-pressed="true"]):not([aria-selected="true"]),
.speakers-page .speaker-filters .tag:not(.is-active):not(.active):not([aria-pressed="true"]):not([aria-selected="true"]){
  background: #fff;
}

@media (max-width: 768px){
  .speakers-page .speaker-filters{justify-content:flex-start;}
}


/* Speaker list */
.speakers-page .list{max-width: 760px; margin: 0 auto; display:flex; flex-direction:column; gap:14px}
.speakers-page .card{
  display:grid;
  grid-template-columns: 160px 1fr;
  gap:16px;
  padding: 14px;
  border-radius: var(--radius);
  background: var(--cardBg);
  border:1px solid rgba(15,23,42,.08);
  box-shadow: var(--shadow);
  position:relative;
  overflow:hidden;
}
.speakers-page .media{
  border-radius: var(--radius2);
  overflow:hidden;
  background: rgba(15,23,42,.03);
  border:1px solid rgba(15,23,42,.08);
  min-height: 160px;
}
.speakers-page .media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.speakers-page .content{padding: 6px 4px 4px; display:flex; flex-direction:column; gap:10px}
.speakers-page .topline{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap}
.speakers-page .name{font-size: 18px; letter-spacing:-.01em; margin:0}
.speakers-page .role{color: rgba(15,23,42,.70); margin: 2px 0 0; font-size: 13px; line-height: 1.35}

.speakers-page .badges{display:flex; gap:8px; flex-wrap:wrap; align-items:center; justify-content:flex-end}
.speakers-page .badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:7px 10px;
  border-radius: 999px;
  font-size: 12px;
  color: rgba(15,23,42,.75);
  border: 1px solid rgba(15,23,42,.12);
  background: rgba(15,23,42,.02);
  white-space:nowrap;
}
.speakers-page .badge[data-type="keynote"]{border-color: rgba(111,158,117,.40); background: rgba(148,189,147,.22); color: rgba(15,23,42,.80)}
.speakers-page .badge[data-type="invited"]{border-color: rgba(15,23,42,.18); background: rgba(15,23,42,.03)}

.speakers-page .bio{margin:0; color: rgba(15,23,42,.82); font-size: 14px; line-height: 1.65}
.speakers-page .links{display:flex; gap:10px; flex-wrap:wrap; margin-top: 4px}
.speakers-page .linkBtn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:9px 12px;
  border-radius: 999px;
  border:1px solid rgba(15,23,42,.12);
  background: #fff;
  color: rgba(15,23,42,.85);
  text-decoration:none;
  font-size: 13px;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}

.speakers-page .empty{
  padding: 18px;
  border-radius: var(--radius);
  border:1px dashed rgba(15,23,42,.22);
  color: rgba(15,23,42,.65);
  background: #fff;
  display:none;
}

/* Footer (reference style) */
.speakers-page .siteFooter{margin-top: 56px}

.speakers-page .footerTop{
  background: var(--green);
  color: rgba(15,23,42,.88);
  padding: 34px 0;
}
.speakers-page .footerTopInner{
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 18px;
  display:grid;
  grid-template-columns: 1.15fr 1fr 1fr 1fr;
  gap: 22px;
}

.speakers-page .footerHeading{font-weight: 800; margin:0 0 12px; font-size: 14px}
.speakers-page .footerText{margin:0; font-size: 12.5px; line-height: 1.55; color: rgba(15,23,42,.80)}

.speakers-page .footerList{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px}
.speakers-page .footerList a{text-decoration:none; color: rgba(15,23,42,.82); font-size: 12.8px}
.speakers-page .footerList a:hover{text-decoration: underline}

.speakers-page .footerBottomBar{
  background: var(--greenDark);
  color: rgba(15,23,42,.82);
  padding: 16px 0;
  border-top: 1px solid rgba(15,23,42,.10);
}
.speakers-page .footerBottomInner{
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 18px;
  display:flex;
  flex-wrap:wrap;
  gap: 12px;
  align-items:center;
  justify-content:space-between;
  font-size: 12.5px;
}

.speakers-page .footerBottomLinks{display:flex; gap:16px; flex-wrap:wrap}
.speakers-page .footerBottomLinks a{text-decoration:none; color: rgba(15,23,42,.82)}
.speakers-page .footerBottomLinks a:hover{text-decoration: underline}

@media (max-width: 980px){
  .speakers-page .footerTopInner{grid-template-columns: 1fr 1fr}
}
@media (max-width: 560px){
  .speakers-page .footerTopInner{grid-template-columns: 1fr}
}

@media (max-width: 780px){
  .speakers-page .card{grid-template-columns: 1fr;}
  .speakers-page .media{min-height: 220px}
  .speakers-page .badges{justify-content:flex-start}
  .speakers-page .list{max-width: 100%;}
}

@media (prefers-reduced-motion: reduce){
  .speakers-page .tag, .speakers-page .linkBtn{transition:none}
  .speakers-page .tag:hover, .speakers-page .linkBtn:hover{transform:none}
}

/* Floating scroll-to-top button */
.scroll-top{
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgb(143 188 143 / 1);
  color: #0f172a;
  border: 1px solid rgba(15, 23, 42, .08);
  box-shadow: 0 14px 40px rgba(2, 6, 23, 0.18);
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
  z-index: 80;
}

.scroll-top:hover{
  background: rgba(143,188,143,.88);
}

.scroll-top.is-visible{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

@media (prefers-reduced-motion: reduce){
  .scroll-top{ transition: none; }
}