/* Official PSC-inspired light theme. Loaded after the old demo styles. */
:root {
  --psc-blue: #075fb8;
  --psc-blue-dark: #064f99;
  --psc-green: #446c61;
  --psc-teal: #00bfa6;
  --psc-line: #d7e3ef;
  --psc-soft: #f3f8fc;
  --bg: #ffffff;
  --bg-panel: #ffffff;
  --bg-panel-2: #f4f8fb;
  --border: rgba(7, 95, 184, 0.16);
  --border-strong: rgba(7, 95, 184, 0.28);
  --text: #162033;
  --text-muted: #536174;
  --text-faint: #7a8797;
  --ok: #07835f;
  --ok-bg: rgba(0, 191, 166, 0.12);
  --warn-bg: rgba(255, 211, 90, 0.18);
  --bad-bg: rgba(248, 113, 113, 0.12);
  --radius: 8px;
  --radius-sm: 6px;
}

body {
  background: #fff;
  background-image:
    linear-gradient(180deg, rgba(243, 248, 252, 0.78), rgba(255, 255, 255, 0.95) 360px),
    radial-gradient(circle at 85% 12%, rgba(0, 191, 166, 0.08), transparent 34%);
  color: var(--text);
}

h1, h2, h3, h4 { letter-spacing: 0; }
a { color: var(--psc-blue); }

.psc-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.58rem clamp(1rem, 4vw, 3rem);
  background: var(--psc-blue);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 600;
}

.psc-topbar a {
  color: #fff;
  text-decoration: none;
}

.psc-lang {
  border: 0;
  background: transparent;
  color: #fff;
  font: inherit;
  font-weight: 700;
  padding: 0.2rem 0.35rem;
  cursor: pointer;
  border-bottom: 2px solid transparent;
}

.psc-lang.active {
  border-bottom-color: #fff;
}

.psc-topbar__links,
.psc-topbar__orgs {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.nav {
  top: 0;
  min-height: 112px;
  padding: 1.35rem clamp(1rem, 5vw, 4rem);
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid var(--psc-line);
  box-shadow: 0 10px 28px rgba(20, 45, 70, 0.08);
  backdrop-filter: blur(12px);
}

.nav__brand {
  color: var(--text);
  gap: 1rem;
  font-size: 1.12rem;
}

.nav__brand span {
  white-space: nowrap;
}

.nav__logo {
  width: clamp(210px, 20vw, 360px);
  height: auto !important;
  max-height: 92px;
  max-width: none;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  object-fit: contain;
}

.nav__links a,
.nav__links button {
  color: #2d3442;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
}

.nav__links a:hover,
.nav__links a.active,
.nav__links button:hover {
  color: #fff;
  background: var(--psc-blue);
}

.nav-toggle {
  background: #fff;
  color: var(--psc-blue);
  border-color: var(--psc-line);
}

main,
.hero {
  max-width: 1240px;
}

.hero {
  margin-top: 0;
  border-bottom: 1px solid var(--psc-line);
}

.hero--video {
  isolation: isolate;
  min-height: clamp(560px, 82vh, 760px);
  border-radius: 0 0 34px 34px;
}

.hero--video > *:not(.hero__video-bg):not(.hero__video-overlay) {
  position: relative;
  z-index: 2;
}

.hero__video-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.34;
  filter: saturate(1.08) contrast(1.04);
  pointer-events: none;
}

.hero__video-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.84) 43%, rgba(255, 255, 255, 0.72) 100%),
    radial-gradient(circle at 18% 20%, rgba(0, 191, 166, 0.15), transparent 32%),
    radial-gradient(circle at 82% 24%, rgba(238, 74, 132, 0.12), transparent 34%);
  pointer-events: none;
}

.hero::before {
  background:
    linear-gradient(90deg, rgba(7, 95, 184, 0.06), transparent 42%),
    radial-gradient(circle at 80% 12%, rgba(0, 191, 166, 0.09), transparent 32%);
}

.hero__eyebrow,
.kicker,
.tag,
.stat__label,
.auth-tab,
.badge {
  letter-spacing: 0.03em;
}

.hero__eyebrow,
.kicker {
  color: var(--psc-blue);
}

.hero h1,
.hero h2 {
  color: var(--text);
}

.hero p,
.muted,
.profile-line,
.footer,
footer.site-footer {
  color: var(--text-muted);
}

.panel,
.card,
.staff-card,
.slot-card,
.profile-card,
.metric,
.schedule-filters,
.login-card,
.form-card,
.booking-card,
.dashboard-card,
.auth-card,
.notice,
.gallery figure {
  background: rgba(255, 255, 255, 0.94) !important;
  border: 1px solid var(--psc-line) !important;
  box-shadow: 0 18px 42px rgba(22, 54, 82, 0.08) !important;
}

.gallery figure img,
.image-card img,
.photo-card img {
  object-fit: cover;
}

/* Clean cinematic gallery: dark carousel, images only. */
#gallery {
  position: relative;
  margin: clamp(1.5rem, 4vw, 3rem) auto !important;
  padding: clamp(1rem, 3vw, 2rem) 0 !important;
  background: transparent !important;
}

#gallery .section-title {
  display: none !important;
}

#gallery::before,
#gallery::after {
  display: none !important;
}

#gallery .gallery-nav {
  position: absolute;
  top: 50%;
  z-index: 3;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: #fff;
  color: #222;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25);
  font-size: 1.8rem;
  line-height: 1;
  transform: translateY(-50%);
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

#gallery .gallery-nav:hover {
  transform: translateY(-50%) scale(1.08);
  box-shadow: 0 16px 34px rgba(7, 95, 184, 0.2);
}

#gallery .gallery-nav--prev {
  left: clamp(0.75rem, 3vw, 3.2rem);
}

#gallery .gallery-nav--next {
  right: clamp(0.75rem, 3vw, 3.2rem);
}

#gallery .gallery {
  display: flex !important;
  justify-content: flex-start;
  align-items: center;
  gap: clamp(1rem, 2vw, 1.6rem) !important;
  grid-auto-rows: unset !important;
  grid-template-columns: none !important;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 clamp(4rem, 8vw, 5.5rem);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: clamp(4rem, 8vw, 5.5rem);
  scrollbar-width: none;
}

#gallery .gallery::-webkit-scrollbar {
  display: none;
}

#gallery .gallery figure,
#gallery .gallery .g-wide,
#gallery .gallery .g-tall {
  flex: 0 0 clamp(190px, 20vw, 270px);
  grid-column: auto !important;
  grid-row: auto !important;
  height: clamp(170px, 19vw, 245px);
  margin: 0 !important;
  overflow: hidden;
  scroll-snap-align: center;
  border: 0 !important;
  border-radius: 8px !important;
  background: #111 !important;
  box-shadow: 0 20px 42px rgba(0, 0, 0, 0.38) !important;
  opacity: 0.62;
  transform: translateY(18px) scale(0.92);
  transition: opacity 0.55s ease, transform 0.55s ease, box-shadow 0.55s ease;
}

#gallery .gallery figure.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  box-shadow: 0 28px 58px rgba(0, 0, 0, 0.45) !important;
}

#gallery .gallery figure:nth-child(2n).is-visible {
  transform: translateY(-12px) scale(1.08);
}

#gallery .gallery img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block;
  filter: saturate(1.05) contrast(1.02);
  transform: scale(1.08);
  transition: transform 0.8s ease, filter 0.8s ease;
}

#gallery .gallery figure:hover img,
#gallery .gallery figure.is-visible img {
  transform: scale(1);
}

#gallery .gallery figcaption {
  display: none !important;
}

.steam-chat {
  display: none !important;
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 88;
  font-family: var(--font-body);
}

/* Responsive FAQ and authenticated live support center */
.support-center { position:fixed; right:1rem; bottom:1rem; z-index:96; font-family:var(--font-body); }
.support-launcher { display:flex; align-items:center; gap:.65rem; min-height:54px; padding:.68rem 1.15rem .68rem .7rem; border:0; border-radius:999px; background:linear-gradient(135deg,#0869c8,#0755a1); color:#fff; font-weight:850; cursor:pointer; box-shadow:0 18px 42px rgba(7,95,184,.34); transition:transform .2s ease,box-shadow .2s ease; }
.support-launcher:hover { transform:translateY(-2px); box-shadow:0 22px 48px rgba(7,95,184,.42); }
.support-launcher__icon { display:grid; place-items:center; width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.18); font-size:1.2rem; }
.support-panel { position:absolute; right:0; bottom:calc(100% + .8rem); width:min(430px,calc(100vw - 2rem)); height:min(680px,calc(100svh - 7rem)); display:none; overflow:hidden; border:1px solid #d8e4f0; border-radius:20px; background:#fff; box-shadow:0 30px 90px rgba(20,51,81,.28); }
.support-center.open .support-panel { display:flex; flex-direction:column; animation:support-in .2s ease-out; }
@keyframes support-in { from { opacity:0; transform:translateY(12px) scale(.98); } }
.support-header { display:flex; justify-content:space-between; gap:1rem; padding:1.15rem 1.2rem; background:linear-gradient(135deg,#0869c8,#064c93); color:#fff; }
.support-header strong,.support-header span { display:block; }.support-header strong{font-size:1.08rem}.support-header span{margin-top:.18rem;color:#dbeeff;font-size:.82rem}
.support-close { flex:0 0 34px; height:34px; border:1px solid rgba(255,255,255,.38); border-radius:50%; background:rgba(255,255,255,.12); color:#fff; font-size:1.35rem; cursor:pointer; }
.support-home,.support-live { min-height:0; overflow-y:auto; padding:1rem; }
.support-search { display:flex; align-items:center; gap:.55rem; padding:0 .8rem; border:1px solid #d8e4f0; border-radius:12px; background:#f7fbff; }
.support-search input { width:100%; min-height:44px; border:0!important; background:transparent!important; outline:0; }
.support-home h3 { margin:1.15rem 0 .7rem; font-size:.98rem; }
.support-faq { display:grid; gap:.55rem; }
.support-faq details { border:1px solid #dfe8f1; border-radius:12px; background:#fff; overflow:hidden; }
.support-faq summary { display:flex; justify-content:space-between; gap:1rem; padding:.8rem .9rem; font-weight:750; cursor:pointer; list-style:none; }.support-faq summary::-webkit-details-marker{display:none}
.support-faq details[open] summary span { transform:rotate(45deg); }.support-faq summary span{color:#0869c8;font-size:1.2rem;transition:transform .2s}
.support-faq details p { margin:0; padding:0 .9rem .9rem; color:#516579; font-size:.91rem; line-height:1.55; }
.support-live-card { width:100%; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:.8rem; margin-top:1rem; padding:.9rem; border:1px solid #b9d9f7; border-radius:14px; background:linear-gradient(135deg,#edf7ff,#f8fcff); color:#15324d; text-align:left; cursor:pointer; }
.support-live-card strong,.support-live-card small { display:block; }.support-live-card small{margin-top:.2rem;color:#5f7386;line-height:1.35}.support-live-card__icon{color:#12a66a;font-size:.75rem}
.support-back { margin-bottom:.8rem; border:0; background:transparent; color:#0869c8; font-weight:750; cursor:pointer; }
.support-live { flex:1; display:flex; flex-direction:column; }.support-live[hidden]{display:none}.support-auth{flex:0 0 auto}
.support-login { padding:1rem; border:1px solid #dbe7f2; border-radius:14px; background:#f7fbff; text-align:center; }.support-login__lock{display:grid;place-items:center;width:42px;height:42px;margin:0 auto .6rem;border-radius:50%;background:#dceeff;color:#0869c8}.support-login p{color:#5d7183;font-size:.9rem;line-height:1.5}
.support-identity { display:flex; align-items:center; gap:.65rem; padding:.7rem .8rem; border-radius:12px; background:#edf9f4; }.support-identity strong,.support-identity small{display:block}.support-identity small{margin-top:.12rem;color:#557266}.support-status-dot{width:10px;height:10px;border-radius:50%;background:#18ad71;box-shadow:0 0 0 4px rgba(24,173,113,.13)}
.support-thread { flex:1; min-height:180px; overflow-y:auto; margin-top:.7rem; padding:.8rem; border-radius:14px; background:#f4f8fc; }
.support-message { width:fit-content; max-width:86%; margin:0 0 .65rem; padding:.65rem .75rem; border-radius:14px 14px 14px 4px; background:#fff; box-shadow:0 3px 12px rgba(30,65,98,.08); }.support-message p{margin:0;white-space:pre-wrap;overflow-wrap:anywhere}.support-message time{display:block;margin-top:.25rem;color:#748699;font-size:.7rem;text-align:right}
.support-message--mine { margin-left:auto; border-radius:14px 14px 4px 14px; background:#0869c8; color:#fff; }.support-message--mine time{color:#d8ebff}
.support-compose { display:grid; grid-template-columns:1fr auto; gap:.55rem; margin-top:.65rem; }.support-compose textarea{resize:none;min-height:46px;max-height:110px;padding:.7rem;border:1px solid #ccdbe8;border-radius:12px;font:inherit}.support-compose button{align-self:end;min-height:46px;padding:0 1rem;border:0;border-radius:12px;background:#0869c8;color:#fff;font-weight:800;cursor:pointer}.support-state{text-align:center;color:#65798c;font-size:.88rem}.support-state--error{color:#c33434}

@media (max-width:600px) {
  .support-center { right:.65rem; bottom:.65rem; left:.65rem; }
  .support-launcher { margin-left:auto; min-height:50px; padding:.55rem .95rem .55rem .55rem; }
  .support-launcher__icon { width:34px; height:34px; }
  .support-panel { position:fixed; inset:auto .45rem .45rem .45rem; width:auto; height:min(82svh,720px); border-radius:18px; }
  .support-center.open .support-launcher { visibility:hidden; }
  .support-header { padding:1rem; }.support-home,.support-live{padding:.8rem}
  .support-compose { grid-template-columns:1fr; }.support-compose button{width:100%}
}

.steam-chat__toggle {
  min-width: 116px;
  min-height: 48px;
  padding: 0.7rem 1.05rem;
  border: 1px solid var(--psc-blue) !important;
  border-radius: 8px;
  background: var(--psc-blue) !important;
  color: #fff !important;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 16px 36px rgba(7, 95, 184, 0.26);
}

.steam-chat__panel {
  position: absolute;
  right: 0;
  bottom: calc(100% + 0.75rem);
  width: min(380px, calc(100vw - 2rem));
  max-height: min(620px, calc(100vh - 7rem));
  display: none;
  overflow: hidden;
  border: 1px solid var(--psc-line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 26px 70px rgba(22, 54, 82, 0.24);
}

.steam-chat.open .steam-chat__panel {
  display: flex;
  flex-direction: column;
}

.steam-chat__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem;
  background: var(--psc-blue);
  color: #fff;
}

.steam-chat__header strong,
.steam-chat__header span {
  display: block;
}

.steam-chat__header strong {
  font-size: 1.02rem;
}

.steam-chat__header span {
  margin-top: 0.18rem;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.86rem;
}

.steam-chat__close {
  width: 32px;
  height: 32px;
  border: 1px solid rgba(255, 255, 255, 0.45) !important;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.12) !important;
  color: #fff !important;
  cursor: pointer;
}

.steam-chat__messages {
  min-height: 165px;
  max-height: 300px;
  overflow-y: auto;
  padding: 1rem;
  background:
    radial-gradient(circle at 12% 0%, rgba(0, 191, 166, 0.08), transparent 36%),
    #fff;
}

.steam-chat__message {
  width: fit-content;
  max-width: 92%;
  margin: 0 0 0.7rem;
  padding: 0.68rem 0.78rem;
  border: 1px solid var(--psc-line);
  border-radius: 8px;
  color: var(--text);
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.steam-chat__message--bot {
  background: var(--psc-soft);
}

.steam-chat__message--user {
  margin-left: auto;
  background: var(--psc-blue);
  border-color: var(--psc-blue);
  color: #fff;
}

.steam-chat__quick {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  padding: 0 1rem 0.85rem;
  background: #fff;
}

.steam-chat__quick button {
  padding: 0.48rem 0.65rem;
  border: 1px solid var(--psc-line);
  border-radius: 999px;
  background: #fff;
  color: var(--psc-blue);
  font-weight: 700;
  cursor: pointer;
}

.steam-chat__form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.55rem;
  padding: 0.9rem 1rem 1rem;
  border-top: 1px solid var(--psc-line);
  background: var(--psc-soft);
}

.steam-chat__form input {
  min-height: 42px;
}

.steam-chat__form button {
  min-height: 42px;
  padding-inline: 0.9rem;
  border-radius: 8px;
}

@media (max-width: 860px) {
  #gallery {
    margin-inline: auto !important;
    padding-block: 2.2rem !important;
  }

  #gallery .gallery-nav {
    width: 34px;
    height: 34px;
    font-size: 1.5rem;
  }

  #gallery .gallery {
    padding-inline: 3.2rem;
    scroll-padding-inline: 3.2rem;
  }

  #gallery .gallery figure,
  #gallery .gallery .g-wide,
  #gallery .gallery .g-tall {
    flex-basis: min(64vw, 270px);
    height: clamp(170px, 48vw, 240px);
  }

  .steam-chat {
    right: 0.8rem;
    bottom: 0.8rem;
  }

  .steam-chat__toggle {
    min-width: 96px;
  }
}

/* v33 final video visibility override: this must stay at the end. */
.hero__video-bg {
  opacity: 0.56 !important;
  transform: scale(1.03) !important;
  animation: none !important;
}

.hero__video-overlay {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.88) 0%, rgba(255, 255, 255, 0.72) 44%, rgba(255, 255, 255, 0.48) 100%),
    radial-gradient(circle at 18% 20%, rgba(0, 191, 166, 0.12), transparent 33%),
    radial-gradient(circle at 82% 24%, rgba(238, 74, 132, 0.1), transparent 34%) !important;
}

@media (max-width: 860px) {
  .hero__video-bg {
    opacity: 0.4 !important;
  }

  .hero__video-overlay {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.68)),
      radial-gradient(circle at 20% 10%, rgba(0, 191, 166, 0.12), transparent 34%) !important;
  }
}

/* v34: phone-first polish. Keeps desktop intact, fixes small-screen spacing. */
@media (max-width: 780px) {
  html,
  body {
    width: 100%;
    overflow-x: hidden;
  }

  .psc-topbar {
    min-height: 36px;
    padding: 0.35rem 0.8rem;
  }

  .psc-topbar__links {
    width: 100%;
    justify-content: center;
  }

  .psc-lang {
    min-height: 30px;
    min-width: 48px;
  }

  .nav {
    position: sticky;
    top: 0;
    z-index: 70;
    min-height: 72px;
    padding: 0.65rem 0.9rem;
  }

  .nav__brand {
    max-width: calc(100% - 58px);
    gap: 0.55rem;
    font-size: 0.95rem;
  }

  .nav__brand span {
    max-width: 8.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .nav__logo {
    width: min(46vw, 170px);
    max-height: 48px;
  }

  .nav-toggle {
    display: inline-flex !important;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    flex: 0 0 auto;
  }

  .nav-toggle span {
    width: 20px;
    height: 2px;
    display: block;
    border-radius: 999px;
    background: currentColor;
  }

  .nav__links {
    position: fixed;
    top: 108px;
    left: 0.75rem;
    right: 0.75rem;
    z-index: 90;
    display: grid !important;
    gap: 0.45rem;
    padding: 0.75rem;
    border: 1px solid var(--psc-line);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 22px 48px rgba(22, 54, 82, 0.2);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-10px);
    transition: opacity 0.18s ease, transform 0.18s ease;
  }

  .nav.open .nav__links {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }

  .nav__links a,
  .nav__links button {
    width: 100%;
    min-height: 42px;
    justify-content: center;
    text-align: center;
  }

  .hero {
    display: grid;
    grid-template-columns: 1fr !important;
    gap: 1.25rem;
    min-height: auto !important;
    padding: 2rem 1rem 1.6rem !important;
    text-align: left;
  }

  .hero > div:first-of-type {
    max-width: 100%;
  }

  .hero h1 {
    font-size: clamp(2.1rem, 13vw, 3.4rem);
    line-height: 0.98;
  }

  .hero p.lead {
    max-width: 100%;
    font-size: 1rem;
  }

  .hero__cta {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.7rem;
  }

  .hero__cta .btn {
    width: 100%;
  }

  .hero__canvas-wrap {
    width: min(100%, 360px);
    min-height: 300px;
    aspect-ratio: 1 / 1;
    margin: 0 auto;
    transform: none !important;
  }

  .hero__steam-logo {
    width: min(82%, 280px);
    min-width: 190px;
  }

  .hero__video-bg {
    opacity: 0.3 !important;
    object-position: center;
  }

  .hero__video-overlay {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.74)),
      radial-gradient(circle at 20% 10%, rgba(0, 191, 166, 0.12), transparent 34%) !important;
  }

  main > .section,
  main > .panel,
  main > .schedule-filters,
  .auth-shell {
    width: calc(100% - 1rem) !important;
    max-width: none !important;
    margin-inline: auto !important;
  }

  .section {
    padding-block: 1.25rem;
  }

  .section-title {
    gap: 0.6rem;
  }

  .filters,
  .form-grid,
  .teacher-booking-grid,
  .stats,
  .staff-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0.8rem !important;
  }

  .panel,
  .card,
  .schedule-filters,
  .slot-card,
  .staff-card,
  .auth-shell > .panel,
  details.account-settings {
    width: 100%;
    padding: 1rem !important;
    border-radius: 8px !important;
  }

  input,
  select,
  textarea {
    width: 100%;
    min-height: 46px;
    font-size: 16px !important;
  }

  textarea {
    min-height: 108px;
  }

  .btn,
  button[type="submit"] {
    width: 100%;
    min-height: 48px;
  }

  .schedule-grid,
  #schedule-list,
  #my-bookings,
  #staff-bookings {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.8rem;
  }

  .slot-card {
    grid-template-columns: 1fr !important;
  }

  .slot-date {
    width: 100%;
    min-height: auto;
  }

  #gallery {
    padding-block: 2rem !important;
  }

  #gallery .gallery {
    padding-inline: 2.6rem;
    scroll-padding-inline: 2.6rem;
  }

  #gallery .gallery figure,
  #gallery .gallery .g-wide,
  #gallery .gallery .g-tall {
    flex-basis: min(78vw, 320px);
    height: clamp(190px, 58vw, 275px);
  }

  #gallery .gallery-nav {
    width: 38px;
    height: 38px;
  }

  .accessibility-widget {
    right: 0;
    top: auto;
    bottom: 5.4rem;
  }

  .accessibility-toggle {
    min-width: 46px;
    min-height: 46px;
  }

  .steam-chat {
    right: 0.65rem;
    bottom: 0.65rem;
  }

  .steam-chat__panel {
    width: calc(100vw - 1.3rem);
    max-height: calc(100vh - 7rem);
  }

  footer.site-footer,
  .site-footer {
    padding: 1.25rem 1rem 5.5rem;
    text-align: center;
  }
}

@media (max-width: 390px) {
  .hero h1 {
    font-size: clamp(1.95rem, 12vw, 2.8rem);
  }

  .nav__logo {
    width: min(43vw, 150px);
  }

  .nav__brand span {
    max-width: 7rem;
  }
}

/* v32: full-screen official layout and gentle motion. */
body {
  min-width: 0;
}

main {
  width: 100%;
  max-width: none !important;
  margin: 0;
  padding-inline: 0;
}

main > .section,
main > .panel,
main > .schedule-filters {
  width: min(1240px, calc(100% - clamp(2rem, 7vw, 6rem)));
  margin-inline: auto;
}

.hero {
  width: 100%;
  max-width: none !important;
  margin-inline: 0 !important;
  padding-inline: clamp(1.5rem, 9vw, 7.5rem) !important;
  overflow: hidden;
}

.hero > div:first-of-type {
  max-width: 650px;
}

.hero--video {
  min-height: min(780px, calc(100vh - 150px));
  border-radius: 0;
}

.hero__video-bg {
  transform: scale(1.06);
  animation: hero-video-drift 24s ease-in-out infinite alternate;
}

.hero__video-overlay {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.88) 43%, rgba(255, 255, 255, 0.68) 100%),
    radial-gradient(circle at 18% 20%, rgba(0, 191, 166, 0.18), transparent 33%),
    radial-gradient(circle at 82% 24%, rgba(238, 74, 132, 0.14), transparent 34%),
    radial-gradient(circle at 62% 82%, rgba(255, 211, 90, 0.12), transparent 30%);
}

.hero h1 em {
  display: inline-block;
  transition: color 0.25s ease, transform 0.25s ease;
}

.hero h1:hover em {
  color: var(--psc-blue);
  transform: translateY(-3px);
}

#gallery {
  width: 100vw;
  max-width: none !important;
  margin: 0 calc(50% - 50vw) clamp(2rem, 5vw, 4rem) !important;
  padding: clamp(3rem, 7vw, 5.5rem) 0 !important;
  background:
    radial-gradient(circle at 12% 20%, rgba(68, 108, 97, 0.18), transparent 28%),
    radial-gradient(circle at 88% 28%, rgba(238, 74, 132, 0.12), transparent 30%),
    linear-gradient(120deg, rgba(248, 252, 255, 0.98), rgba(255, 255, 255, 0.96)) !important;
}

#gallery .gallery {
  max-width: min(1240px, calc(100% - 7rem));
  padding-inline: 0;
  scroll-padding-inline: 0;
}

#gallery .gallery-nav--prev {
  left: clamp(1rem, 4vw, 4.5rem);
}

#gallery .gallery-nav--next {
  right: clamp(1rem, 4vw, 4.5rem);
}

#gallery .gallery figure,
#gallery .gallery .g-wide,
#gallery .gallery .g-tall {
  flex-basis: clamp(230px, 24vw, 340px);
  height: clamp(190px, 22vw, 285px);
}

.motion-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.75s ease, transform 0.75s ease;
}

.motion-reveal.is-in-view {
  opacity: 1;
  transform: translateY(0);
}

@keyframes hero-video-drift {
  0% { transform: scale(1.06) translate3d(-1.2%, -1%, 0); }
  50% { transform: scale(1.1) translate3d(1.4%, 1%, 0); }
  100% { transform: scale(1.07) translate3d(-0.6%, 1.2%, 0); }
}

@media (max-width: 860px) {
  main > .section,
  main > .panel,
  main > .schedule-filters {
    width: min(100% - 1.2rem, 720px);
  }

  .hero {
    padding-inline: 1rem !important;
  }

  .hero--video {
    min-height: auto;
  }

  #gallery {
    margin-inline: calc(50% - 50vw) !important;
    padding-block: 2.5rem !important;
  }

  #gallery .gallery {
    max-width: 100%;
    padding-inline: 3.1rem;
    scroll-padding-inline: 3.1rem;
  }

  #gallery .gallery figure,
  #gallery .gallery .g-wide,
  #gallery .gallery .g-tall {
    flex-basis: min(70vw, 320px);
    height: clamp(180px, 54vw, 260px);
  }
}

/* v33: keep the video visually fixed and easier to see. */
.hero--video {
  background: #fff;
}

.hero__video-bg {
  opacity: 0.56;
  transform: scale(1.03) !important;
  animation: none !important;
}

.hero__video-overlay {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.88) 0%, rgba(255, 255, 255, 0.72) 44%, rgba(255, 255, 255, 0.48) 100%),
    radial-gradient(circle at 18% 20%, rgba(0, 191, 166, 0.12), transparent 33%),
    radial-gradient(circle at 82% 24%, rgba(238, 74, 132, 0.1), transparent 34%) !important;
}

@media (max-width: 860px) {
  .hero__video-bg {
    opacity: 0.38;
  }

  .hero__video-overlay {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.68)),
      radial-gradient(circle at 20% 10%, rgba(0, 191, 166, 0.12), transparent 34%) !important;
  }
}

input,
select,
textarea {
  background: #fff !important;
  color: var(--text) !important;
  border: 1px solid #b9cadc !important;
}

input::placeholder,
textarea::placeholder {
  color: #7a8797 !important;
}

select option {
  color: var(--text);
  background: #fff;
}

.btn,
button[type="submit"],
.btn--primary {
  background: var(--psc-blue) !important;
  color: #fff !important;
  border-color: var(--psc-blue) !important;
  box-shadow: 0 10px 24px rgba(7, 95, 184, 0.18);
}

.btn:hover,
button[type="submit"]:hover,
.btn--primary:hover {
  background: var(--psc-blue-dark) !important;
}

.btn--secondary,
.btn--ghost {
  background: #fff !important;
  color: var(--psc-blue) !important;
  border-color: var(--psc-blue) !important;
  box-shadow: none;
}

.btn--danger {
  background: #d51d2a !important;
  border-color: #d51d2a !important;
}

.status,
.badge,
.pill,
.chip {
  background: var(--psc-soft) !important;
  border-color: var(--psc-line) !important;
  color: var(--text-muted) !important;
}

.approved,
.status--approved,
.badge--approved {
  background: var(--ok-bg) !important;
  color: var(--ok) !important;
}

.accessibility-widget {
  position: fixed;
  right: 0;
  top: 34vh;
  z-index: 90;
  display: flex;
  align-items: flex-start;
  font-family: var(--font-body);
}

.accessibility-toggle {
  width: 58px;
  min-height: 58px;
  border: 0;
  background: var(--psc-blue);
  color: #fff;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 12px 28px rgba(7, 95, 184, 0.28);
}

.accessibility-panel {
  width: 252px;
  display: none;
  padding: 1.1rem;
  background: #fff;
  color: var(--text);
  border: 1px solid var(--psc-blue);
  box-shadow: 0 20px 45px rgba(20, 45, 70, 0.18);
}

.accessibility-widget.open .accessibility-panel {
  display: block;
}

.accessibility-panel strong {
  display: block;
  margin-bottom: 0.8rem;
  font-size: 1.06rem;
}

.accessibility-panel button {
  width: 100%;
  display: block;
  margin: 0.35rem 0;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--psc-line);
  background: var(--psc-soft);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

html.a11y-large { font-size: 112%; }
html.a11y-small { font-size: 92%; }
html.a11y-gray { filter: grayscale(1); }
html.a11y-contrast body { background: #000 !important; color: #fff !important; }
html.a11y-contrast .panel,
html.a11y-contrast .card,
html.a11y-contrast .staff-card,
html.a11y-contrast .slot-card,
html.a11y-contrast .profile-card,
html.a11y-contrast .metric,
html.a11y-contrast .schedule-filters,
html.a11y-contrast .auth-card {
  background: #000 !important;
  color: #fff !important;
  border-color: #fff !important;
}

@media (max-width: 780px) {
  .psc-topbar {
    align-items: flex-start;
    flex-direction: column;
    font-size: 0.8rem;
  }

  .nav {
    min-height: 82px;
    padding: 0.95rem 1rem;
  }

  .nav__brand {
    max-width: calc(100% - 60px);
    font-size: 1rem;
  }

  .nav__logo {
    width: clamp(155px, 45vw, 230px);
    height: auto !important;
    max-height: 62px;
  }

  .nav__links {
    background: #fff;
    border-top: 1px solid var(--psc-line);
  }

  .nav__links a,
  .nav__links button {
    padding: 0.8rem 0.9rem;
  }

  .accessibility-widget {
    top: auto;
    bottom: 1rem;
  }

  .accessibility-panel {
    width: min(250px, calc(100vw - 70px));
  }
}

@media (max-width: 430px) {
  .nav {
    min-height: 74px;
  }

  .nav__brand {
    gap: 0.7rem;
  }

  .nav__logo {
    width: min(48vw, 185px);
    height: auto !important;
    max-height: 52px;
  }
}

/* Bigger official-style header logo and a real moving 3D hero stage. */
.hero__canvas-wrap {
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(circle at 26% 18%, rgba(27, 176, 201, 0.14), transparent 34%),
    radial-gradient(circle at 78% 26%, rgba(238, 74, 132, 0.12), transparent 30%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(247, 251, 253, 0.94)) !important;
}

.hero__canvas-wrap::before,
.hero__canvas-wrap::after {
  display: block !important;
  z-index: 2;
  pointer-events: none;
}

.hero__canvas-wrap #hero-canvas {
  position: absolute;
  inset: 0;
  z-index: 5;
  width: 100%;
  height: 100%;
  opacity: 1;
  pointer-events: none;
}

.hero__steam-logo {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 4;
  width: min(74%, 390px);
  min-width: 250px;
  height: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  transform: translate(-50%, -50%) rotate(-4deg);
  box-shadow: none;
  filter: drop-shadow(0 18px 22px rgba(12, 35, 58, 0.16));
  pointer-events: none;
  will-change: transform;
  object-fit: contain;
  opacity: 1;
  animation: steam-fallback-drift 8s ease-in-out infinite alternate;
  transition: opacity 0.2s ease;
}

.hero__steam-logo.is-fallback-visible {
  z-index: 5;
  opacity: 1;
}

.hero__steam-logo.is-3d-loaded {
  display: none;
}

@keyframes steam-fallback-drift {
  0% { transform: translate(calc(-50% - 90px), calc(-50% + 62px)) rotate(-7deg); }
  24% { transform: translate(calc(-50% + 88px), calc(-50% - 78px)) rotate(5deg); }
  52% { transform: translate(calc(-50% + 110px), calc(-50% + 48px)) rotate(-3deg); }
  76% { transform: translate(calc(-50% - 70px), calc(-50% - 58px)) rotate(6deg); }
  100% { transform: translate(calc(-50% + 20px), calc(-50% + 24px)) rotate(-4deg); }
}

@media (max-width: 860px) {
  .hero--video {
    min-height: auto;
    border-radius: 0 0 22px 22px;
  }

  .hero__video-bg {
    opacity: 0.22;
  }

  .hero__video-overlay {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.86));
  }

  .hero__steam-logo {
    width: min(78%, 300px);
    min-width: 190px;
  }
}

/* Language switcher fix: keep only EN/LT visible in the blue strip. */
.psc-topbar {
  position: relative;
  justify-content: flex-start;
  min-height: 42px;
}

.psc-topbar__links {
  position: static;
  z-index: 2;
  flex-wrap: nowrap;
  gap: 0.45rem;
}

.psc-topbar__orgs {
  display: none !important;
  justify-content: center;
  gap: 1rem;
  padding-left: 0;
  text-align: center;
}

.psc-lang {
  min-height: 28px;
  padding: 0.28rem 0.65rem;
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff !important;
  line-height: 1;
}

.psc-lang:hover,
.psc-lang.active {
  border-color: #fff;
  background: #fff;
  color: var(--psc-blue) !important;
}

@media (max-width: 700px) {
  .psc-topbar {
    align-items: stretch;
    flex-direction: column;
    gap: 0.5rem;
  }

  .psc-topbar__links {
    position: static;
    justify-content: center;
    transform: none;
  }

  .psc-topbar__orgs {
    justify-content: center;
    padding-left: 0;
    font-size: 0.8rem;
  }
}

/* Mobile reliability: prevent wide form controls/cards from pushing outside the screen. */
*, *::before, *::after {
  box-sizing: border-box;
}

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

input,
select,
textarea,
button {
  max-width: 100%;
}

.form-grid,
.teacher-booking-grid,
.filters,
.stat-row {
  min-width: 0;
}

.field,
.panel,
.card,
.slot-card,
.section-title,
.nav,
.nav__links,
.nav__brand {
  min-width: 0;
}

.slot-card,
.slot-card__meta,
.slot-card__lab,
.profile-line,
.message,
.empty {
  overflow-wrap: anywhere;
}

@media (max-width: 860px) {
  main,
  .hero,
  .section,
  .auth-shell {
    width: 100%;
    max-width: 100%;
  }

  .teacher-booking-grid,
  .form-grid,
  .filters,
  .stat-row {
    grid-template-columns: 1fr !important;
  }

  .field--wide,
  .field--full,
  .profile-avatar-row {
    grid-column: 1 / -1;
  }

  .section-title {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.75rem;
  }

  .panel,
  .card {
    padding: 1rem !important;
  }

  .btn,
  button[type="submit"] {
    width: 100%;
    justify-content: center;
  }
}
/* v33 final video visibility override: this must stay at the end. */
.hero__video-bg {
  opacity: 0.56 !important;
  transform: scale(1.03) !important;
  animation: none !important;
}

.hero__video-overlay {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.88) 0%, rgba(255, 255, 255, 0.72) 44%, rgba(255, 255, 255, 0.48) 100%),
    radial-gradient(circle at 18% 20%, rgba(0, 191, 166, 0.12), transparent 33%),
    radial-gradient(circle at 82% 24%, rgba(238, 74, 132, 0.1), transparent 34%) !important;
}

@media (max-width: 860px) {
  .hero__video-bg {
    opacity: 0.4 !important;
  }

  .hero__video-overlay {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.68)),
      radial-gradient(circle at 20% 10%, rgba(0, 191, 166, 0.12), transparent 34%) !important;
  }
}

/* v34 final mobile overrides: keep this at the end of the file. */
@media (max-width: 780px) {
  .nav {
    position: sticky !important;
    top: 0;
    z-index: 70;
    min-height: 72px !important;
    padding: 0.65rem 0.9rem !important;
  }

  .nav__logo {
    width: min(46vw, 170px) !important;
    max-height: 48px !important;
  }

  .nav__links {
    position: fixed !important;
    top: 108px !important;
    left: 0.75rem !important;
    right: 0.75rem !important;
    display: grid !important;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-10px);
  }

  .nav.open .nav__links {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }

  .hero {
    width: 100% !important;
    max-width: 100% !important;
    min-height: auto !important;
    grid-template-columns: 1fr !important;
    padding: 2rem 1rem 1.6rem !important;
  }

  .hero__canvas-wrap {
    width: min(100%, 360px) !important;
    min-height: 300px !important;
    aspect-ratio: 1 / 1;
    margin-inline: auto !important;
  }

  .hero h1 {
    font-size: clamp(2rem, 12vw, 3.35rem) !important;
    line-height: 0.98 !important;
  }

  main > .section,
  main > .panel,
  main > .schedule-filters,
  .auth-shell {
    width: calc(100% - 1rem) !important;
    max-width: none !important;
  }

  .teacher-booking-grid,
  .form-grid,
  .filters,
  .stats,
  .staff-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .panel,
  .card,
  .schedule-filters,
  .slot-card,
  .staff-card {
    padding: 1rem !important;
  }

  .slot-card {
    grid-template-columns: 1fr !important;
  }

  input,
  select,
  textarea {
    font-size: 16px !important;
  }

  .hero__video-bg {
    opacity: 0.3 !important;
  }
}

/* v36: landing page as slide-by-slide screens with stronger video and polished copy. */
body.landing-page {
  scroll-snap-type: y proximity;
}

body.landing-page .hero,
body.landing-page main > .section,
body.landing-page main > .panel,
body.landing-page main > .partners {
  scroll-snap-align: start;
  scroll-margin-top: 0;
}

body.landing-page .hero {
  min-height: calc(100svh - 154px) !important;
}

body.landing-page .hero__video-bg {
  opacity: 0.82 !important;
  filter: saturate(1.12) contrast(1.08) brightness(0.96) !important;
}

body.landing-page .hero__video-overlay {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.7) 36%, rgba(255, 255, 255, 0.16) 100%),
    radial-gradient(circle at 18% 20%, rgba(0, 191, 166, 0.1), transparent 33%),
    radial-gradient(circle at 82% 24%, rgba(238, 74, 132, 0.08), transparent 34%) !important;
}

body.landing-page #gallery {
  min-height: 78svh;
  display: flex;
  align-items: center;
}

body.landing-page #schedule {
  min-height: 86svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

body.landing-page .hero > div:first-of-type {
  padding: clamp(1rem, 2vw, 1.5rem);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.58);
  backdrop-filter: blur(8px);
  box-shadow: 0 24px 60px rgba(22, 54, 82, 0.08);
}

body.landing-page .hero__canvas-wrap {
  background:
    radial-gradient(circle at 24% 16%, rgba(39, 183, 215, 0.16), transparent 32%),
    radial-gradient(circle at 78% 22%, rgba(255, 79, 134, 0.12), transparent 34%),
    rgba(255, 255, 255, 0.45) !important;
  backdrop-filter: blur(4px);
}

@media (max-width: 780px) {
  body.landing-page {
    scroll-snap-type: y proximity;
  }

  body.landing-page .hero {
    min-height: calc(100svh - 108px) !important;
  }

  body.landing-page .hero__video-bg {
    opacity: 0.58 !important;
  }

  body.landing-page .hero__video-overlay {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.48)),
      radial-gradient(circle at 20% 10%, rgba(0, 191, 166, 0.1), transparent 34%) !important;
  }

  body.landing-page .hero > div:first-of-type {
    padding: 0.85rem;
    background: rgba(255, 255, 255, 0.68);
  }

  body.landing-page #gallery,
  body.landing-page #schedule {
    min-height: auto;
    display: block;
  }
}

/* Staff support inbox */
.staff-support{margin-top:24px}.staff-chat-counters{display:flex;align-items:center;gap:8px}.staff-chat-new-count{padding:6px 10px;border-radius:999px;background:#fff0ed;color:#b42318;font-size:12px;font-weight:850}.staff-chat-alert{display:flex;align-items:center;gap:10px;margin:0 0 14px;padding:13px 16px;border:1px solid #ffb6ad;border-radius:13px;background:linear-gradient(90deg,#fff1ef,#fffaf5);color:#8e221c}.staff-chat-alert:before{width:10px;height:10px;border-radius:50%;background:#e5483f;box-shadow:0 0 0 5px rgba(229,72,63,.14);content:""}.staff-chat-alert strong{font-size:14px}.staff-chat-alert span{font-size:13px}.staff-chat-layout{display:grid;grid-template-columns:minmax(240px,32%) 1fr;min-height:470px;border:1px solid #dbe5f0;border-radius:18px;overflow:hidden;background:#fff}.staff-chat-list{border-right:1px solid #dbe5f0;background:#f7fafe;overflow:auto}.staff-chat-item{display:grid;width:100%;gap:4px;padding:16px;text-align:left;border:0;border-bottom:1px solid #e4ebf3;background:transparent;color:#14213d;cursor:pointer}.staff-chat-item:hover,.staff-chat-item.active{background:#e9f3ff}.staff-chat-item.active{box-shadow:inset 4px 0 #0868c9}.staff-chat-item.has-unread{background:#fff1ef;box-shadow:inset 4px 0 #e5483f}.staff-chat-item.has-unread:hover{background:#ffe6e2}.staff-chat-item span{display:flex;align-items:center;justify-content:space-between;gap:8px;font-weight:800}.staff-chat-unread{padding:2px 7px;border-radius:999px;background:#d82929;color:#fff;font-size:10px;line-height:1.3}.staff-chat-item small,.staff-chat-item time{color:#66758a}.staff-chat-item time{font-size:11px}.staff-chat-room{min-width:0;padding:18px}.staff-chat-person{display:flex;flex-direction:column;gap:3px;padding-bottom:14px;border-bottom:1px solid #e4ebf3}.staff-chat-person span{color:#66758a;font-size:13px}.staff-chat-thread{height:330px;padding:18px 4px;overflow:auto;display:flex;flex-direction:column;gap:10px}.staff-chat-thread .support-message__sender{display:block;margin-bottom:3px;color:#66758a;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.04em}.staff-chat-thread .support-message--mine .support-message__sender{color:#d8ebff}.staff-chat-compose{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:end}.staff-chat-compose textarea{width:100%;resize:vertical;min-height:56px;padding:12px;border:1px solid #cbd8e6;border-radius:12px;font:inherit}.staff-chat-notice{position:fixed;right:22px;bottom:22px;z-index:1200;max-width:320px;padding:14px 18px;border-radius:12px;background:#083d7a;color:#fff;font-weight:800;box-shadow:0 12px 30px rgba(8,61,122,.28);opacity:0;transform:translateY(16px);pointer-events:none;transition:.2s ease}.staff-chat-notice.is-visible{opacity:1;transform:translateY(0)}
.staff-manual-booking{margin:1.25rem 0;padding:1rem 1.15rem}.staff-manual-booking summary{cursor:pointer;color:#083d7a;font-weight:800}.staff-manual-booking[open] summary{margin-bottom:.5rem}.staff-manual-booking p{color:#526579}

/* Staff workspace: a calmer, full-size admin dashboard. */
#staff-dashboard{padding-top:clamp(2rem,4vw,3.5rem);padding-bottom:clamp(3rem,6vw,5rem)}
#staff-dashboard>.section-title{margin:0 0 1.5rem;padding:1.45rem 1.6rem;border:1px solid #d8e5f2;border-radius:20px;background:linear-gradient(135deg,#fff 0%,#f2f8ff 100%);box-shadow:0 12px 30px rgba(22,64,105,.08)}
#staff-dashboard>.section-title h1{font-size:clamp(1.65rem,3vw,2.25rem);letter-spacing:-.035em;color:#102846}
#staff-dashboard .profile-line{margin:.35rem 0 0;color:#58708c;font-size:.92rem}
#staff-dashboard .stat-row{grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin:0 0 1.25rem}
#staff-dashboard .stat{position:relative;min-height:112px;padding:1.15rem 1.25rem;border:1px solid #dce7f2;border-radius:16px;background:#fff;box-shadow:0 8px 24px rgba(25,65,104,.06);overflow:hidden}
#staff-dashboard .stat:before{content:"";position:absolute;inset:0 auto 0 0;width:5px;background:#0878cf}
#staff-dashboard .stat:nth-child(2):before{background:#00a98f}#staff-dashboard .stat:nth-child(3):before{background:#f19a32}
#staff-dashboard .stat .n{font-size:2.25rem;line-height:1;color:#112d4f}#staff-dashboard .stat .l{margin-top:.45rem;font-weight:700;color:#60748b}
#staff-dashboard .tabs{margin:0 0 1rem}#staff-dashboard .tabs .tab{padding:.55rem .9rem;border-radius:999px;background:#edf5ff;color:#125997;font-size:.82rem;font-weight:800}
#staff-dashboard>.filters{display:grid;grid-template-columns:160px 190px minmax(220px,1fr);gap:.85rem;margin:0 0 1.2rem;padding:1rem;border:1px solid #dbe6f1;border-radius:16px;background:#fff;box-shadow:0 8px 22px rgba(25,65,104,.05)}
#staff-dashboard>.filters .field{margin:0}#staff-dashboard>.filters input,#staff-dashboard>.filters select{min-height:44px;background:#fbfdff}
#staff-dashboard #booking-list{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1rem;margin-bottom:2rem}
#staff-dashboard #booking-list .slot-card{min-height:250px;padding:1.15rem;border:1px solid #dce6f0;border-radius:16px;box-shadow:0 8px 22px rgba(25,65,104,.06)}
#staff-dashboard #booking-list .slot-card__actions{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:1rem}
#staff-dashboard .staff-manual-booking{margin:0 0 1.4rem;padding:1.2rem 1.3rem;border:1px solid #cfe0f1;border-radius:18px;background:linear-gradient(135deg,#fff,#f5faff);box-shadow:0 8px 24px rgba(25,65,104,.06)}
#staff-dashboard .staff-manual-booking summary{font-size:1rem}#staff-dashboard .staff-manual-booking #staff-booking-form{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.85rem;margin-top:1rem}
#staff-dashboard .staff-manual-booking .field{margin:0}#staff-dashboard .staff-manual-booking input,#staff-dashboard .staff-manual-booking select{min-height:44px;background:#fff}
#staff-dashboard .staff-support{margin-top:2.25rem;padding:1.35rem;border:1px solid #d7e4f0;border-radius:20px;background:#fff;box-shadow:0 12px 30px rgba(25,65,104,.07)}
#staff-dashboard .staff-support .section-title{margin-bottom:1rem}#staff-dashboard .staff-support h2{font-size:1.35rem;color:#102846}
#staff-dashboard .staff-chat-layout{min-height:500px;border-radius:14px}#staff-dashboard .staff-chat-item{padding:17px}#staff-dashboard .staff-chat-room{padding:20px}#staff-dashboard .staff-chat-thread{height:350px;padding:16px 6px}
#staff-dashboard .staff-chat-compose textarea{min-height:62px;font-size:.95rem}
@media(max-width:860px){#staff-dashboard>.section-title{padding:1.1rem}#staff-dashboard .stat-row{gap:.65rem}#staff-dashboard>.filters{grid-template-columns:1fr 1fr}#staff-dashboard>.filters .field:last-child{grid-column:1/-1}#staff-dashboard .staff-manual-booking #staff-booking-form{grid-template-columns:1fr 1fr}#staff-dashboard .staff-chat-layout{min-height:440px}}
@media(max-width:560px){#staff-dashboard>.section-title{align-items:flex-start!important;gap:1rem}#staff-dashboard .stat-row{grid-template-columns:1fr}#staff-dashboard>.filters,#staff-dashboard .staff-manual-booking #staff-booking-form{grid-template-columns:1fr}#staff-dashboard>.filters .field:last-child{grid-column:auto}#staff-dashboard .staff-support{padding:.9rem}#staff-dashboard .staff-chat-room{padding:12px}}

/* Dashboard navigation and workspace structure. */
#staff-dashboard .staff-workspace{display:grid;grid-template-columns:230px minmax(0,1fr);gap:1.25rem;align-items:start}
#staff-dashboard .staff-sidebar{position:sticky;top:20px;padding:1.1rem;border:1px solid #d7e4f0;border-radius:20px;background:linear-gradient(165deg,#092e59,#0b5ba8);color:#fff;box-shadow:0 18px 38px rgba(13,61,108,.2)}
#staff-dashboard .staff-sidebar__brand{display:flex;flex-direction:column;gap:.35rem;padding:.35rem .45rem 1rem;border-bottom:1px solid rgba(255,255,255,.18)}
#staff-dashboard .staff-sidebar__brand span{width:max-content;padding:.2rem .46rem;border-radius:999px;background:#0cc5ae;color:#053a36;font-size:.68rem;font-weight:900;letter-spacing:.09em}.staff-sidebar__brand strong{font-size:1.06rem}
#staff-dashboard .staff-sidebar__nav{display:grid;gap:.35rem;margin:1rem 0}.staff-sidebar__nav a{display:flex;padding:.72rem .8rem;border-radius:10px;color:rgba(255,255,255,.82);font-size:.9rem;font-weight:750;text-decoration:none;transition:.2s ease}.staff-sidebar__nav a:hover,.staff-sidebar__nav a.active{background:rgba(255,255,255,.15);color:#fff;transform:translateX(2px)}
#staff-dashboard .staff-sidebar__tip{display:grid;gap:.4rem;margin-top:1.2rem;padding:.8rem;border-radius:12px;background:rgba(0,0,0,.16);font-size:.79rem;line-height:1.45;color:rgba(255,255,255,.82)}.staff-sidebar__tip strong{color:#7bf2e3}
#staff-dashboard .staff-workspace-main{min-width:0}.staff-workspace-main>.staff-overview{margin:0}.staff-workspace-main>.staff-bookings-workspace{padding-top:.25rem}
#staff-dashboard .workspace-heading{display:flex;justify-content:space-between;align-items:end;gap:1rem;margin:2rem 0 1rem}.workspace-heading span{color:#0878cf;font-size:.7rem;font-weight:900;letter-spacing:.12em}.workspace-heading h2{margin:.28rem 0 0;color:#102846;font-size:1.55rem}.workspace-heading p{max-width:360px;margin:0;color:#60748b;font-size:.88rem;line-height:1.45}
@media(max-width:980px){#staff-dashboard .staff-workspace{grid-template-columns:1fr}#staff-dashboard .staff-sidebar{position:relative;top:auto;display:grid;grid-template-columns:190px 1fr;gap:1rem;align-items:center}.staff-sidebar__brand{border-bottom:0!important;border-right:1px solid rgba(255,255,255,.18);padding:0 1rem 0 0!important}.staff-sidebar__nav{grid-template-columns:repeat(4,1fr);margin:0!important}.staff-sidebar__nav a{justify-content:center;padding:.58rem .4rem;font-size:.78rem}.staff-sidebar__tip{display:none!important}}
@media(max-width:620px){#staff-dashboard .staff-sidebar{display:block;padding:.85rem}.staff-sidebar__brand{border-right:0!important;border-bottom:1px solid rgba(255,255,255,.18)!important;padding:0 0 .75rem!important}.staff-sidebar__nav{grid-template-columns:1fr 1fr;margin:.75rem 0 0!important}.staff-sidebar__nav a{justify-content:flex-start;font-size:.82rem}.workspace-heading{align-items:flex-start!important;flex-direction:column}.workspace-heading p{max-width:none}}
@media(max-width:720px){.staff-chat-layout{grid-template-columns:1fr}.staff-chat-list{max-height:190px;border-right:0;border-bottom:1px solid #dbe5f0}.staff-chat-room{padding:12px}.staff-chat-thread{height:300px}.staff-chat-compose{grid-template-columns:1fr}.staff-chat-compose .btn{width:100%}}

/* Clear identity and presence state for the staff live-chat inbox. */
.staff-chat-item__top{display:grid!important;grid-template-columns:38px minmax(0,1fr) auto;align-items:center!important;justify-content:initial!important;gap:10px}.staff-chat-item__name{display:flex!important;min-width:0;align-items:center!important;justify-content:initial!important;gap:7px;font-weight:850}.staff-chat-avatar{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:linear-gradient(145deg,#0c75cf,#08a0a0);color:#fff;font-size:12px;font-style:normal;font-weight:900;letter-spacing:.04em;box-shadow:0 5px 14px rgba(7,104,193,.22)}.staff-chat-avatar--large{width:46px;height:46px;font-size:14px}.staff-chat-online{display:inline-flex;align-items:center;gap:4px;padding:3px 7px;border-radius:999px;background:#e7f8ef;color:#137a4a;font-size:10px;font-style:normal;font-weight:850}.staff-chat-online:before{width:6px;height:6px;border-radius:50%;background:#1db56c;content:""}.staff-chat-item.has-unread .staff-chat-avatar{background:linear-gradient(145deg,#e14b45,#f38a37);box-shadow:0 5px 15px rgba(211,69,57,.26)}.staff-chat-item.has-unread .staff-chat-item__name{color:#9e261e}.staff-chat-person{display:flex!important;align-items:flex-start!important;justify-content:space-between;gap:12px;padding:0 0 14px}.staff-chat-person__identity{display:flex;align-items:center;gap:11px;min-width:0}.staff-chat-person__identity>div{display:grid;gap:3px}.staff-chat-person__identity strong{font-size:16px}.staff-chat-person__status{display:flex;align-items:center;gap:6px;color:#75869a;font-size:11px;font-weight:750}.staff-chat-person__status b{display:block;width:8px;height:8px;border-radius:50%;background:#a7b5c3}.staff-chat-person__status.is-online{color:#137a4a}.staff-chat-person__status.is-online b{background:#1db56c;box-shadow:0 0 0 4px rgba(29,181,108,.12)}.staff-chat-back{flex:0 0 auto;padding:8px 10px;border:1px solid #c6dced;border-radius:9px;background:#fff;color:#0868c9;font:inherit;font-size:12px;font-weight:800;cursor:pointer}.staff-chat-back:hover{border-color:#0868c9;background:#eef7ff}.staff-chat-thread .support-message--staff{border:1px solid #d7e6f2;background:#fff;color:#172b4d}.staff-chat-thread .support-message--mine{background:linear-gradient(135deg,#0869c8,#0756aa)}
.staff-chat-auto{display:inline-flex;align-items:center;gap:6px;color:#37718b;font-size:11px;font-weight:800;white-space:nowrap}.staff-chat-auto i{width:7px;height:7px;border-radius:50%;background:#17ad72;box-shadow:0 0 0 4px rgba(23,173,114,.12);animation:staff-refresh-pulse 1.6s infinite}.staff-chat-counters{flex-wrap:wrap;justify-content:flex-end}@keyframes staff-refresh-pulse{50%{opacity:.35;transform:scale(.72)}}
@media(max-width:560px){.staff-chat-person{align-items:flex-start;flex-direction:column}.staff-chat-back{width:100%}.staff-chat-online{display:none}}

/* Cinematic landing hero: the STEAM mark floats directly over the film. */
body.landing-page .hero__video-bg {
  opacity: .94 !important;
  filter: saturate(1.18) contrast(1.12) brightness(.82) !important;
  transform: scale(1.025);
}

body.landing-page .hero__video-overlay {
  background:
    linear-gradient(90deg, rgba(5,18,36,.76) 0%, rgba(7,23,43,.46) 43%, rgba(4,15,29,.18) 72%, rgba(3,12,24,.34) 100%),
    linear-gradient(180deg, rgba(3,12,24,.08), rgba(3,12,24,.38)) !important;
}

body.landing-page .hero > div:first-of-type {
  color:#fff;
  background:linear-gradient(135deg,rgba(8,25,48,.64),rgba(8,25,48,.18)) !important;
  border:1px solid rgba(255,255,255,.16);
  border-radius:22px;
  backdrop-filter:blur(7px);
  box-shadow:0 28px 80px rgba(0,0,0,.24);
}

body.landing-page .hero h1,
body.landing-page .hero .lead { color:#fff; text-shadow:0 3px 22px rgba(0,0,0,.5); }
body.landing-page .hero__eyebrow { color:#67e2ee; }
body.landing-page .hero .btn--ghost { color:#fff; border-color:rgba(255,255,255,.72); background:rgba(255,255,255,.08); }

body.landing-page .hero__canvas-wrap {
  isolation:isolate;
  overflow:visible;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  backdrop-filter:none !important;
  box-shadow:none !important;
  transform:none !important;
}

body.landing-page .hero__canvas-wrap::before,
body.landing-page .hero__canvas-wrap::after { display:none !important; }

body.landing-page .hero__canvas-wrap #hero-canvas {
  filter:drop-shadow(0 22px 28px rgba(0,0,0,.42));
}

body.landing-page .hero__steam-logo {
  width:min(72%,390px);
  filter:drop-shadow(0 20px 24px rgba(0,0,0,.48));
}

@media(max-width:780px){
  body.landing-page .hero__video-bg{opacity:.88 !important;filter:saturate(1.12) contrast(1.08) brightness(.72) !important}
  body.landing-page .hero__video-overlay{background:linear-gradient(180deg,rgba(4,16,31,.36),rgba(4,16,31,.66)) !important}
  body.landing-page .hero>div:first-of-type{background:linear-gradient(145deg,rgba(7,24,46,.7),rgba(7,24,46,.34)) !important;border-radius:18px}
  body.landing-page .hero__canvas-wrap{min-height:220px;max-height:290px}
  body.landing-page .hero__steam-logo{width:min(70%,280px);min-width:170px}
}

/* The header already carries the brand; keep the cinematic hero uncluttered. */
body.landing-page .hero--video {
  grid-template-columns:minmax(0,820px) !important;
  justify-content:flex-start;
}

body.landing-page .hero--video > div:first-of-type {
  width:min(100%,820px);
}

@media(max-width:780px){
  body.landing-page .hero--video{grid-template-columns:1fr !important}
}

/* Cinematic motion and colour grade. */
body.landing-page .hero--video {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:#061426;
}

body.landing-page .hero__video-bg {
  transform-origin:center center;
  animation:cinematic-camera 22s ease-in-out infinite alternate;
}

body.landing-page .hero__video-overlay {
  overflow:hidden;
}

body.landing-page .hero__video-overlay::before,
body.landing-page .hero__video-overlay::after {
  content:"";
  position:absolute;
  width:52vw;
  height:52vw;
  min-width:420px;
  min-height:420px;
  border-radius:50%;
  filter:blur(80px);
  opacity:.2;
  mix-blend-mode:screen;
  will-change:transform;
}

body.landing-page .hero__video-overlay::before {
  left:-16vw;
  top:-30vw;
  background:radial-gradient(circle,#00c9ba 0%,rgba(0,201,186,.35) 34%,transparent 68%);
  animation:cinematic-light-a 16s ease-in-out infinite alternate;
}

body.landing-page .hero__video-overlay::after {
  right:-19vw;
  bottom:-34vw;
  background:radial-gradient(circle,#ef4b82 0%,rgba(239,75,130,.3) 30%,rgba(255,195,68,.12) 48%,transparent 70%);
  animation:cinematic-light-b 19s ease-in-out infinite alternate;
}

body.landing-page .hero--video > div:first-of-type {
  position:relative;
  z-index:3;
  animation:cinematic-content-in .9s cubic-bezier(.2,.75,.25,1) both;
}

body.landing-page .hero__eyebrow { animation:cinematic-content-in .7s .08s both; }
body.landing-page .hero h1 { animation:cinematic-content-in .8s .16s both; }
body.landing-page .hero .lead { animation:cinematic-content-in .8s .25s both; }
body.landing-page .hero__cta { animation:cinematic-content-in .8s .34s both; }

body.landing-page .hero h1 em {
  color:#37dfd1;
  text-shadow:0 0 28px rgba(55,223,209,.34);
  animation:cinematic-accent 4.5s ease-in-out infinite;
}

body.landing-page .hero .btn--primary {
  box-shadow:0 12px 32px rgba(0,105,199,.3),0 0 0 1px rgba(255,255,255,.12) inset;
}

body.landing-page .hero .btn--primary:hover,
body.landing-page .hero .btn--ghost:hover {
  transform:translateY(-3px);
}

@keyframes cinematic-camera {
  0% { transform:scale(1.035) translate3d(-.6%,0,0); }
  50% { transform:scale(1.095) translate3d(1.1%,-.8%,0); }
  100% { transform:scale(1.055) translate3d(-.3%,.6%,0); }
}

@keyframes cinematic-light-a {
  from { transform:translate3d(-4%,0,0) scale(.9); opacity:.14; }
  to { transform:translate3d(36%,24%,0) scale(1.18); opacity:.28; }
}

@keyframes cinematic-light-b {
  from { transform:translate3d(8%,6%,0) scale(.92); opacity:.12; }
  to { transform:translate3d(-28%,-22%,0) scale(1.15); opacity:.24; }
}

@keyframes cinematic-content-in {
  from { opacity:0; transform:translate3d(0,24px,0); }
  to { opacity:1; transform:translate3d(0,0,0); }
}

@keyframes cinematic-accent {
  0%,100% { color:#37dfd1; text-shadow:0 0 20px rgba(55,223,209,.22); }
  50% { color:#72e7f1; text-shadow:0 0 34px rgba(39,183,215,.48); }
}

@media(max-width:780px){
  body.landing-page .hero__video-overlay::before,
  body.landing-page .hero__video-overlay::after{width:90vw;height:90vw;min-width:280px;min-height:280px;filter:blur(58px);opacity:.15}
  body.landing-page .hero__video-bg{animation-duration:28s}
}

@media(prefers-reduced-motion:reduce){
  body.landing-page .hero__video-bg,
  body.landing-page .hero__video-overlay::before,
  body.landing-page .hero__video-overlay::after,
  body.landing-page .hero--video>div:first-of-type,
  body.landing-page .hero__eyebrow,
  body.landing-page .hero h1,
  body.landing-page .hero .lead,
  body.landing-page .hero__cta,
  body.landing-page .hero h1 em{animation:none !important}
}

/* Scroll-driven laboratory photo story. */
.gallery-title-actions{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;justify-content:flex-end}
.gallery-skip{display:inline-flex;align-items:center;min-height:40px;padding:.55rem .9rem;border:1px solid rgba(7,95,184,.22);border-radius:999px;background:#fff;color:#075fb8;font-size:.84rem;font-weight:800;text-decoration:none;box-shadow:0 8px 24px rgba(13,48,82,.08);transition:transform .2s ease,box-shadow .2s ease}
.gallery-skip:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(7,95,184,.17)}

@media(min-width:861px){
  #gallery.gallery-cinematic{position:relative;display:block!important;height:560vh;max-width:none!important;width:100%;padding-inline:clamp(1rem,4vw,4rem)!important;background:linear-gradient(180deg,#f7fbff 0%,#071426 12%,#071426 88%,#f7fbff 100%);overflow:clip}
  #gallery.gallery-cinematic .section-title{position:sticky;top:18px;z-index:8;width:min(1180px,calc(100% - 2rem));margin:0 auto;color:#fff;padding:1rem 1.15rem;border:1px solid rgba(255,255,255,.14);border-radius:18px;background:rgba(5,18,35,.68);backdrop-filter:blur(14px);box-shadow:0 18px 55px rgba(0,0,0,.22)}
  #gallery.gallery-cinematic .section-title h2{color:#fff}
  #gallery.gallery-cinematic .tag{color:#bceef2;border-color:rgba(99,226,238,.34);background:rgba(0,191,166,.12)}
  #gallery.gallery-cinematic .gallery-skip{color:#fff;border-color:rgba(255,255,255,.28);background:rgba(255,255,255,.1);box-shadow:none}
  #gallery.gallery-cinematic .gallery{position:sticky;top:0;width:min(1180px,100%);height:100vh;margin:0 auto;display:block!important;overflow:hidden!important;scroll-snap-type:none!important;border-radius:0;background:transparent}
  #gallery.gallery-cinematic .gallery figure,#gallery.gallery-cinematic .gallery .g-wide,#gallery.gallery-cinematic .gallery .g-tall{position:absolute!important;left:50%;top:50%;width:min(82vw,980px)!important;height:min(67vh,650px)!important;margin:0!important;transform:translate3d(-50%,calc(-50% + var(--photo-y,100vh)),0) scale(var(--photo-scale,.86))!important;opacity:var(--photo-opacity,0)!important;border-radius:28px!important;overflow:hidden;box-shadow:0 38px 95px rgba(0,0,0,.52);transition:opacity .18s linear;will-change:transform,opacity;z-index:2}
  #gallery.gallery-cinematic .gallery figure::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 48%,rgba(2,10,20,.72));pointer-events:none}
  #gallery.gallery-cinematic .gallery figure img{width:100%;height:100%;object-fit:cover;transform:scale(1.08)!important;filter:saturate(1.14) contrast(1.08) brightness(.9)}
  #gallery.gallery-cinematic .gallery figure.is-cinematic-active img{transform:scale(1)!important;transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
  #gallery.gallery-cinematic .gallery figcaption{z-index:3;font-size:clamp(1rem,1.5vw,1.35rem);padding:1.25rem 1.5rem;background:transparent}
  #gallery.gallery-cinematic .gallery-nav{display:none!important}
}

/* Unified visual palette: cinematic navy, soft white and STEAM teal only. */
body.landing-page{background:#f7fafc!important}

body.landing-page .hero--video{
  border-radius:0!important;
  border-bottom:4px solid #12bfae!important;
  background:#071525!important;
}

body.landing-page .hero__video-overlay{
  background:linear-gradient(90deg,rgba(5,18,35,.7) 0%,rgba(5,18,35,.38) 48%,rgba(5,18,35,.16) 100%)!important;
}

body.landing-page .hero__video-overlay::before,
body.landing-page .hero__video-overlay::after,
body.landing-page .hero--video::after{display:none!important}

#gallery.gallery-cinematic{
  background:#071525!important;
}

#gallery.gallery-cinematic .gallery{
  background:radial-gradient(circle at 50% 48%,#14384b 0%,#0b2436 46%,#071525 100%)!important;
}

#gallery.gallery-cinematic .gallery::before{
  background:radial-gradient(circle at center,transparent 56%,rgba(0,0,0,.3))!important;
}

#gallery.gallery-cinematic .section-title{
  background:rgba(7,21,37,.82)!important;
  border-color:rgba(35,214,195,.24)!important;
}

body.landing-page #schedule{
  position:relative;
  z-index:25;
  margin-top:0!important;
  padding-top:clamp(4rem,8vw,7rem)!important;
  background:#f7fafc!important;
  border-top:4px solid #12bfae;
}

body.landing-page #schedule::before{
  content:none!important;
}

body.landing-page #schedule .schedule-filters,
body.landing-page #schedule .slot-card{
  background:#fff!important;
}

body.landing-page #schedule .tag{
  color:#087f75!important;
  border-color:rgba(18,191,174,.34)!important;
  background:rgba(18,191,174,.07)!important;
}

@media(max-width:860px){
  body.landing-page .hero__video-overlay{background:linear-gradient(180deg,rgba(5,18,35,.26),rgba(5,18,35,.62))!important}
  body.landing-page #schedule{padding-top:3.5rem!important}
}

/* Keep the camera canvas locked to the viewport throughout the journey. */
@media(min-width:861px){
  #gallery.gallery-cinematic.journey-active .gallery{position:fixed!important;inset:0!important;top:0!important;left:0!important;width:100vw!important;height:100vh!important;z-index:20!important}
  #gallery.gallery-cinematic.journey-active .section-title{position:fixed!important;top:16px!important;left:50%!important;transform:translateX(-50%)!important;z-index:60!important}
  #gallery.gallery-cinematic.journey-finished .gallery{position:absolute!important;top:auto!important;bottom:0!important}
}

/* Firefox-safe loaded collage with continuous overlap and clearer images. */
@media(min-width:861px){
  #gallery.gallery-cinematic{height:390vh!important;min-height:390vh!important;perspective:none!important}
  #gallery.gallery-cinematic .gallery{background:radial-gradient(circle at 50% 46%,rgba(35,98,126,.54),rgba(4,17,31,.92) 78%)!important}
  #gallery.gallery-cinematic .gallery::before{background:linear-gradient(120deg,rgba(0,191,166,.08),transparent 38%,rgba(239,75,130,.06) 74%,transparent),radial-gradient(circle at center,transparent 58%,rgba(0,0,0,.32))!important}
  #gallery.gallery-cinematic .gallery figure,#gallery.gallery-cinematic .gallery .g-wide,#gallery.gallery-cinematic .gallery .g-tall{width:min(72vw,1080px)!important;height:min(76vh,720px)!important}
  #gallery.gallery-cinematic .gallery figure::before{background:radial-gradient(circle at center,transparent 52%,rgba(2,9,18,.32) 100%),linear-gradient(180deg,rgba(2,9,18,.03),rgba(2,9,18,.32))!important}
  #gallery.gallery-cinematic .gallery figure::after{background:linear-gradient(180deg,transparent 58%,rgba(2,9,18,.48))!important}
  #gallery.gallery-cinematic .gallery figure img{filter:saturate(1.08) contrast(1.03) brightness(.98)!important}
}

/* Tighter journey and native-resolution presentation. */
@media(min-width:861px){
  #gallery.gallery-cinematic{height:440vh!important;min-height:440vh!important;background:linear-gradient(180deg,#eef5fa 0%,#071525 5%,#071525 95%,#eef5fa 100%)!important}
  #gallery.gallery-cinematic .gallery figure,#gallery.gallery-cinematic .gallery .g-wide,#gallery.gallery-cinematic .gallery .g-tall{width:min(58vw,880px)!important;height:min(64vh,600px)!important}
  #gallery.gallery-cinematic .gallery figure img{transform:scale(1.015)!important;filter:saturate(1.06) contrast(1.04) brightness(.9)!important;image-rendering:auto}
}

@media(max-width:860px){.gallery-title-actions{justify-content:flex-start}.gallery-skip{font-size:.78rem;min-height:38px}.section-title{align-items:flex-start}}

/* Reliable full-screen photo journey: no JavaScript activation required. */
@media(min-width:861px){
  #gallery.gallery-cinematic{height:auto!important;min-height:0!important;padding:0!important;background:#061321!important;overflow:visible!important}
  #gallery.gallery-cinematic .section-title{position:sticky!important;top:14px;z-index:30;width:min(1180px,calc(100% - 2rem));margin:0 auto -82px!important;transform:translateY(18px)}
  #gallery.gallery-cinematic .gallery{position:relative!important;top:auto!important;width:100%!important;height:auto!important;max-width:none!important;overflow:visible!important;margin:0!important;display:block!important;background:#061321!important}
  #gallery.gallery-cinematic .gallery figure,#gallery.gallery-cinematic .gallery .g-wide,#gallery.gallery-cinematic .gallery .g-tall{position:sticky!important;left:auto!important;top:0!important;width:100%!important;height:100vh!important;margin:0!important;transform:none!important;opacity:1!important;border-radius:0!important;box-shadow:none!important;overflow:hidden!important;z-index:auto!important;scroll-snap-align:start}
  #gallery.gallery-cinematic .gallery figure img{width:100%!important;height:100%!important;object-fit:cover!important;transform:scale(1.08)!important;filter:saturate(1.12) contrast(1.1) brightness(.72)!important;animation:photo-breathe 12s ease-in-out infinite alternate}
  #gallery.gallery-cinematic .gallery figure:nth-child(even) img{animation-direction:alternate-reverse}
  #gallery.gallery-cinematic .gallery figure::before{content:"";position:absolute;inset:0;z-index:2;background:radial-gradient(circle at center,transparent 30%,rgba(2,9,18,.6) 100%),linear-gradient(180deg,rgba(2,9,18,.12),rgba(2,9,18,.58));pointer-events:none}
  #gallery.gallery-cinematic .gallery figure::after{z-index:2;background:linear-gradient(180deg,transparent 42%,rgba(2,9,18,.76))!important}
  #gallery.gallery-cinematic .gallery figcaption{position:absolute;left:clamp(1rem,6vw,7rem);right:auto;bottom:clamp(2rem,8vh,6rem);z-index:4;max-width:760px;padding:0!important;background:transparent!important;color:#fff;font-size:clamp(1.45rem,3vw,3.2rem)!important;font-weight:800;text-shadow:0 4px 28px rgba(0,0,0,.72)}
  #gallery.gallery-cinematic .gallery-nav{display:none!important}
}

@keyframes photo-breathe{from{transform:scale(1.08) translate3d(-1%,0,0)}to{transform:scale(1.17) translate3d(1.5%,-1%,0)}}

@media(prefers-reduced-motion:reduce){#gallery.gallery-cinematic .gallery figure img{animation:none!important;transform:scale(1.04)!important}}

/* Never let the generic section reveal hide the full-screen photo story. */
#gallery.gallery-cinematic,
#gallery.gallery-cinematic.motion-reveal,
#gallery.gallery-cinematic.motion-reveal.is-in-view {
  opacity:1!important;
  visibility:visible!important;
  transform:none!important;
}

/* Scroll-controlled camera journey through the laboratory photo collage. */
@media(min-width:861px){
  #gallery.gallery-cinematic{height:620vh!important;min-height:620vh!important;position:relative!important;overflow:visible!important;background:linear-gradient(180deg,#eef5fa 0%,#071525 8%,#071525 92%,#eef5fa 100%)!important;perspective:1200px}
  #gallery.gallery-cinematic .section-title{position:sticky!important;top:16px!important;z-index:50!important;margin:0 auto -96px!important;transform:translateY(18px)!important}
  #gallery.gallery-cinematic .gallery{position:sticky!important;top:0!important;height:100vh!important;width:100%!important;overflow:hidden!important;background:radial-gradient(circle at 50% 48%,rgba(20,74,102,.48),rgba(3,13,25,.96) 72%)!important;perspective:1100px!important;transform-style:preserve-3d}
  #gallery.gallery-cinematic .gallery::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(120deg,rgba(0,191,166,.1),transparent 34%,rgba(239,75,130,.08) 70%,transparent),radial-gradient(circle at center,transparent 42%,rgba(0,0,0,.58));pointer-events:none}
  #gallery.gallery-cinematic .gallery figure,#gallery.gallery-cinematic .gallery .g-wide,#gallery.gallery-cinematic .gallery .g-tall{position:absolute!important;left:50%!important;top:50%!important;width:min(66vw,980px)!important;height:min(68vh,660px)!important;margin:0!important;transform:translate3d(calc(-50% + var(--journey-x,0vw)),calc(-50% + var(--journey-y,0vh)),0) rotate(var(--journey-rotate,0deg)) scale(var(--journey-scale,.3))!important;opacity:var(--journey-opacity,0)!important;border-radius:22px!important;box-shadow:0 38px 100px rgba(0,0,0,.62)!important;will-change:transform,opacity;transition:opacity .08s linear!important;overflow:hidden!important}
  #gallery.gallery-cinematic .gallery figure img{animation:none!important;transform:scale(1.06)!important;width:100%!important;height:100%!important;object-fit:cover!important;filter:saturate(1.12) contrast(1.08) brightness(.84)!important}
  #gallery.gallery-cinematic .gallery figcaption{font-size:clamp(1.1rem,2vw,2rem)!important;bottom:1.4rem!important;left:1.6rem!important}
}

/* Keep hero copy directly on the film — no rounded glass panel. */
body.landing-page .hero--video > div:first-of-type {
  padding:0 !important;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  backdrop-filter:none !important;
  box-shadow:none !important;
}

@media(max-width:780px){
  body.landing-page .hero--video>div:first-of-type{padding:0 !important;background:transparent !important}
}

/* Film texture, lens light and stronger cinematic depth. */
body.landing-page .hero--video::before,
body.landing-page .hero--video::after {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
}

body.landing-page .hero--video::before {
  z-index:2;
  opacity:.16;
  background-image:
    repeating-radial-gradient(circle at 18% 27%,transparent 0,rgba(255,255,255,.14) .6px,transparent 1.2px,transparent 4px),
    repeating-radial-gradient(circle at 72% 63%,transparent 0,rgba(0,0,0,.18) .7px,transparent 1.3px,transparent 5px);
  background-size:7px 7px,9px 9px;
  animation:film-grain .28s steps(2) infinite;
  mix-blend-mode:soft-light;
}

body.landing-page .hero--video::after {
  z-index:2;
  inset:-20% -35%;
  background:
    linear-gradient(112deg,transparent 34%,rgba(120,226,255,.02) 42%,rgba(255,255,255,.15) 49%,rgba(255,198,109,.05) 55%,transparent 64%),
    radial-gradient(ellipse at center,transparent 42%,rgba(1,8,18,.34) 78%,rgba(1,7,15,.72) 100%);
  transform:translateX(-20%);
  animation:lens-sweep 13s ease-in-out infinite;
}

body.landing-page .hero--video > div:first-of-type { z-index:4; }

body.landing-page .hero__cta .btn {
  position:relative;
  overflow:hidden;
}

body.landing-page .hero__cta .btn::after {
  content:"";
  position:absolute;
  inset:-60% auto -60% -45%;
  width:28%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-18deg);
  animation:button-glint 5.8s ease-in-out infinite;
}

@keyframes film-grain {
  0%{transform:translate3d(0,0,0)}
  25%{transform:translate3d(-1.5%,1%,0)}
  50%{transform:translate3d(1%,-1.5%,0)}
  75%{transform:translate3d(1.5%,1.5%,0)}
  100%{transform:translate3d(-1%,0,0)}
}

@keyframes lens-sweep {
  0%,18%{transform:translateX(-22%);opacity:.45}
  48%,62%{transform:translateX(18%);opacity:.9}
  100%{transform:translateX(30%);opacity:.48}
}

@keyframes button-glint {
  0%,72%{left:-45%;opacity:0}
  77%{opacity:.75}
  88%,100%{left:125%;opacity:0}
}

@media(max-width:780px){
  body.landing-page .hero--video::before{opacity:.09;animation-duration:.45s}
  body.landing-page .hero--video::after{inset:-12% -55%;animation-duration:17s}
}

@media(prefers-reduced-motion:reduce){
  body.landing-page .hero--video::before,
  body.landing-page .hero--video::after,
  body.landing-page .hero__cta .btn::after{animation:none !important}
  body.landing-page .hero--video::before{opacity:.07}
}

/* Final gallery sizing: remove the long empty tail and protect image detail. */
@media(min-width:861px){
  #gallery.gallery-cinematic{height:390vh!important;min-height:390vh!important;background:linear-gradient(180deg,#eef5fa 0%,#071525 4%,#071525 96%,#eef5fa 100%)!important}
  #gallery.gallery-cinematic .gallery{background:radial-gradient(circle at 50% 46%,rgba(35,98,126,.54),rgba(4,17,31,.92) 78%)!important}
  #gallery.gallery-cinematic .gallery::before{background:linear-gradient(120deg,rgba(0,191,166,.08),transparent 38%,rgba(239,75,130,.06) 74%,transparent),radial-gradient(circle at center,transparent 58%,rgba(0,0,0,.32))!important}
  #gallery.gallery-cinematic .gallery figure,#gallery.gallery-cinematic .gallery .g-wide,#gallery.gallery-cinematic .gallery .g-tall{width:min(72vw,1080px)!important;height:min(76vh,720px)!important}
  #gallery.gallery-cinematic .gallery figure::before{background:radial-gradient(circle at center,transparent 52%,rgba(2,9,18,.32) 100%),linear-gradient(180deg,rgba(2,9,18,.03),rgba(2,9,18,.32))!important}
  #gallery.gallery-cinematic .gallery figure::after{background:linear-gradient(180deg,transparent 58%,rgba(2,9,18,.48))!important}
  #gallery.gallery-cinematic .gallery figure img{transform:scale(1.015)!important;filter:saturate(1.08) contrast(1.03) brightness(.98)!important;image-rendering:auto}
}

/* Final colour authority. */
body.landing-page .hero--video{border-radius:0!important;border-bottom:4px solid #12bfae!important;background:#071525!important}
body.landing-page .hero__video-overlay{background:linear-gradient(90deg,rgba(5,18,35,.7),rgba(5,18,35,.18))!important}
body.landing-page .hero__video-overlay::before,body.landing-page .hero__video-overlay::after,body.landing-page .hero--video::after{display:none!important}
#gallery.gallery-cinematic{background:#071525!important}
#gallery.gallery-cinematic .gallery{background:radial-gradient(circle at 50% 48%,#14384b,#0b2436 48%,#071525 100%)!important}
#gallery.gallery-cinematic .gallery::before{background:radial-gradient(circle at center,transparent 58%,rgba(0,0,0,.3))!important}
body.landing-page #schedule{background:#f7fafc!important;border-top:4px solid #12bfae!important}

/* Soft cinematic transition from the navy gallery into the light schedule. */
body.landing-page #schedule{
  border-top:0!important;
  margin-top:0!important;
}

body.landing-page #schedule::after{
  content:"";
  position:absolute;
  left:50%;
  right:auto;
  width:100vw;
  top:0;
  height:clamp(120px,18vw,250px);
  transform:translate(-50%,-99%);
  z-index:0;
  pointer-events:none;
  background:linear-gradient(180deg,
    #071525 0%,
    #102638 18%,
    #334757 40%,
    #71808c 62%,
    #b7c0c7 82%,
    #f7fafc 100%);
}

body.landing-page #schedule{padding-top:clamp(3rem,5vw,5rem)!important}

body.landing-page #schedule > *{position:relative;z-index:1}

/* Laboratory identity colours: shared by public, teacher and staff cards. */
.slot-card--laboratory{position:relative;overflow:hidden;border-color:color-mix(in srgb,var(--lab-color) 42%,#d6e2ee)!important;background:linear-gradient(145deg,#fff 0 76%,var(--lab-soft) 100%)!important}
.slot-card--laboratory::before{content:"";position:absolute;inset:0 auto 0 0;width:6px;background:var(--lab-color)}
.slot-card--laboratory .slot-card__date{color:var(--lab-color)!important}
.slot-card--laboratory .slot-card__lab{display:flex;align-items:center;gap:.55rem}
.slot-card--laboratory .slot-card__lab::before{content:"";flex:0 0 auto;width:.72rem;height:.72rem;border-radius:50%;background:var(--lab-color);box-shadow:0 0 0 4px var(--lab-soft)}
.laboratory-legend{display:flex;align-items:center;flex-wrap:wrap;gap:.65rem .8rem;margin:0 0 1.15rem;padding:.85rem 1rem;border:1px solid #d6e2ee;border-radius:14px;background:#fff;box-shadow:0 8px 24px rgba(25,65,104,.05)}
.laboratory-legend__title{margin-right:.25rem;color:#10213b;font-weight:800}
.laboratory-legend__item{display:inline-flex;align-items:center;gap:.42rem;border-radius:999px;padding:.36rem .62rem;color:#10213b;background:var(--lab-soft);font-size:.82rem;font-weight:700}
.laboratory-legend__item i{width:.65rem;height:.65rem;border-radius:50%;background:var(--lab-color)}
@media(max-width:640px){.laboratory-legend{align-items:stretch}.laboratory-legend__title{flex-basis:100%}.laboratory-legend__item{width:100%;border-radius:10px}}

@media(max-width:860px){
  body.landing-page #schedule::after{height:130px}
}

/* Shared STEAM Centre footer. */
footer.site-footer.steam-footer{
  margin-top:0!important;
  padding:0!important;
  color:#dbe8f2!important;
  border:0!important;
  background:#061525!important;
}
.steam-footer .partners{
  display:flex!important;
  justify-content:center!important;
  gap:clamp(1rem,3vw,3rem)!important;
  max-width:1180px;
  margin:0 auto!important;
  padding:1.35rem 1rem!important;
  background:transparent;
  border-bottom:1px solid rgba(181,218,235,.18);
}
.steam-footer .partners .chip{height:64px!important;padding:0!important;background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important}
.steam-footer .partners .chip img{max-width:220px!important;filter:none!important}
.steam-footer .partners .chip:nth-child(1) img{content:url("../images/partner-logo-1.png")}
.steam-footer .partners .chip:nth-child(2) img{content:url("../images/partner-logo-2.png")}
.steam-footer .partners .chip:nth-child(3) img{content:url("../images/partner-logo-3.png")}
.steam-footer .partners .chip:nth-child(4) img{content:url("../images/partner-logo-4.png")}
.steam-footer .partners .chip{display:none!important}
.steam-footer .partners{padding:1.6rem 1rem!important}
.steam-footer__partner{display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
.steam-footer__partner img{display:block;width:min(260px,72vw);height:auto;opacity:.94;transition:opacity .2s ease,transform .2s ease}
.steam-footer__partner:hover img{opacity:1;transform:translateY(-2px)}
.steam-footer__main{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr;
  gap:2rem;
  width:min(1180px,calc(100% - 2rem));
  margin:0 auto;
  padding:3rem 0 2.35rem;
}
.steam-footer__brand img{width:172px;height:auto;filter:brightness(0) invert(1);opacity:.95}
.steam-footer__brand p{max-width:300px;margin:.9rem 0 0;color:#aac1d1;line-height:1.65}
.steam-footer h3{margin:0 0 .8rem;color:#fff;font-size:.92rem;letter-spacing:.08em;text-transform:uppercase}
.steam-footer address{font-style:normal;line-height:1.8;color:#c5d7e4}
.steam-footer a{color:#c5d7e4;text-decoration:none}
.steam-footer a:hover{color:#37d7c6;text-decoration:underline}
.steam-footer__links,.steam-footer__socials{display:grid;gap:.52rem}
.steam-footer__socials{grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}
.steam-footer__socials a{display:flex;align-items:center;justify-content:center;min-height:40px;border:1px solid rgba(181,218,235,.28);border-radius:10px;font-weight:700;font-size:.88rem;transition:.2s ease}
.steam-footer__socials a:hover{background:#00bfa6;color:#061525;text-decoration:none;border-color:#00bfa6}
.steam-footer__bottom{border-top:1px solid rgba(181,218,235,.18);padding:1rem;overflow:hidden}
.steam-footer__bottom p{width:min(1180px,calc(100% - 2rem));margin:0 auto;color:#91aabd;font-size:.82rem}
@media(max-width:760px){
  .steam-footer .partners{justify-content:flex-start;overflow-x:auto}.steam-footer .partners .chip{flex:0 0 auto}
  .steam-footer__main{grid-template-columns:1fr;gap:1.65rem;padding:2.2rem 0}
  .steam-footer__socials{max-width:330px}
}
/* Public monthly availability calendar */
.availability-calendar{margin:1.25rem 0 1.75rem;padding:clamp(1rem,2.4vw,1.6rem);border:1px solid #ccdeef;border-radius:24px;background:linear-gradient(145deg,#fff 0%,#f4f9fe 100%);box-shadow:0 18px 42px rgba(24,65,105,.09)}
.availability-calendar__toolbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1rem}
.availability-calendar__eyebrow{display:block;margin-bottom:.25rem;color:#0870c9;font:700 .72rem/1.2 var(--font-mono);letter-spacing:.12em}
.availability-calendar__toolbar h3{margin:0;color:#102846;font-size:clamp(1.35rem,2.4vw,1.9rem);text-transform:capitalize}
.availability-calendar__nav{display:flex;gap:.5rem}
.availability-calendar__nav button{display:grid;width:42px;height:42px;place-items:center;border:1px solid #b9d1e8;border-radius:12px;background:#fff;color:#075eae;font-size:1.7rem;line-height:1;cursor:pointer;transition:.2s ease}
.availability-calendar__nav button:hover:not(:disabled){border-color:#0870c9;background:#eaf5ff;transform:translateY(-1px)}
.availability-calendar__nav button:disabled{cursor:not-allowed;opacity:.35}
.availability-calendar__legend{display:flex;flex-wrap:wrap;gap:.7rem 1.25rem;margin:0 0 1.1rem;color:#4c627b;font-size:.82rem}
.availability-calendar__legend span{display:inline-flex;align-items:center;gap:.4rem}
.availability-calendar__legend span::before{width:.72rem;height:.72rem;border-radius:50%;content:""}
.availability-calendar__legend .legend-free::before{background:#22c55e}.availability-calendar__legend .legend-scheduled::before{background:#f59e0b}.availability-calendar__legend .legend-disabled::before{background:#aebdcc}
.availability-calendar__weekdays,.availability-calendar__days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:.5rem}
.availability-calendar__weekdays{margin-bottom:.5rem}
.availability-calendar__weekdays span{text-align:center;color:#60758c;font-size:.75rem;font-weight:800;text-transform:uppercase}
.availability-calendar__blank{min-height:1px}
.availability-day{position:relative;display:flex;min-width:0;min-height:88px;flex-direction:column;align-items:flex-start;justify-content:space-between;padding:.7rem;border:1px solid;border-radius:14px;text-align:left;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.availability-day:hover:not(:disabled){z-index:1;transform:translateY(-2px);box-shadow:0 8px 18px rgba(25,70,110,.13)}
.availability-day--free{border-color:#86efac;background:#ecfdf5;color:#166534}.availability-day--scheduled{border-color:#fcd34d;background:#fffbeb;color:#92400e}.availability-day--disabled{border-color:#dce5ed;background:#f3f6f8;color:#98a7b5;cursor:not-allowed}
.availability-day.is-selected{outline:3px solid #0870c9;outline-offset:2px;box-shadow:0 9px 22px rgba(8,112,201,.18)}
.availability-day__number{font-size:1.12rem;font-weight:800}.availability-day__status{max-width:100%;font-size:.7rem;font-weight:700;line-height:1.25}.availability-day__count{position:absolute;top:.55rem;right:.55rem;display:grid;min-width:1.35rem;height:1.35rem;padding:0 .3rem;place-items:center;border-radius:999px;background:#f59e0b;color:#fff;font-size:.68rem;font-weight:800}
.availability-calendar__details{display:flex;align-items:center;justify-content:space-between;gap:1.25rem;margin-top:1.2rem;padding:1rem 1.1rem;border:1px solid #d5e4f1;border-radius:15px;background:#fff;color:#425b74}
.availability-calendar__details p,.availability-calendar__details ul{margin:.35rem 0 0}.availability-calendar__details ul{padding-left:1.2rem}.availability-calendar__details li{margin:.25rem 0}.availability-calendar__selected-title{display:block;color:#102846;text-transform:capitalize}.availability-calendar__hint{margin:0!important}.availability-calendar__cta{flex:0 0 auto;text-align:center}
@media(max-width:640px){.availability-calendar{padding:.8rem;border-radius:17px}.availability-calendar__toolbar{align-items:flex-end}.availability-calendar__legend{gap:.5rem .8rem}.availability-calendar__weekdays,.availability-calendar__days{gap:.25rem}.availability-day{min-height:52px;padding:.4rem;border-radius:9px}.availability-day__number{font-size:.92rem}.availability-day__status{display:none}.availability-day__count{top:.22rem;right:.22rem;min-width:1rem;height:1rem;font-size:.56rem}.availability-calendar__details{align-items:stretch;flex-direction:column}.availability-calendar__cta{width:100%}}

/* Long-course activity picker */
.activity-picker-field{min-width:0}
.activity-native-select--enhanced{position:absolute!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important;border:0!important}
.activity-picker{margin-top:.45rem;border:1px solid #c9dced;border-radius:18px;background:#f7fbff;box-shadow:inset 0 1px 0 #fff}
.activity-picker[hidden]{display:none!important}
.activity-picker__toolbar{display:flex;align-items:center;gap:.75rem;padding:.85rem;border-bottom:1px solid #d7e5f1}
.activity-picker__toolbar input{min-width:0;flex:1;background:#fff}
.activity-picker__count{flex:0 0 auto;padding:.35rem .58rem;border-radius:999px;background:#e4f1fc;color:#075eae;font-size:.72rem;font-weight:800}
.activity-picker__options{display:grid;max-height:560px;gap:.7rem;padding:.85rem;overflow:auto;overscroll-behavior:contain}
.activity-picker__empty{margin:0;padding:1rem;text-align:center;color:#60758c}
.activity-option{overflow:hidden;border:1px solid #d0dfec;border-radius:14px;background:#fff;transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease}
.activity-option--long{border-left:6px solid #62a83d;background:linear-gradient(90deg,#f0f9ea 0,#fff 34%)}
.activity-option--short{border-left:6px solid #3f73bd;background:linear-gradient(90deg,#edf3fc 0,#fff 34%)}
.activity-option--robotics{border-left:6px solid #e7b900;background:linear-gradient(90deg,#fff8d7 0,#fff 34%)}
.activity-option--ai{border-left:6px solid #2878d0;background:linear-gradient(90deg,#eaf3ff 0,#fff 34%)}
.activity-option--physics{border-left:6px solid #35a365;background:linear-gradient(90deg,#eaf8ef 0,#fff 34%)}
.activity-option--biology{border-left:6px solid #e94291;background:linear-gradient(90deg,#fff0f7 0,#fff 34%)}
.booking-time-field{padding:1rem;border:1px solid #b9d8f2;border-radius:14px;background:#f5faff}.booking-time-field label{color:#075eae;font-weight:850}.booking-time-field select:disabled{cursor:not-allowed;background:#edf2f6;color:#7b8997}
.date-field--clickable{cursor:pointer}
.activity-card--long{border-left:6px solid #62a83d!important}.activity-card--short{border-left:6px solid #3f73bd!important}
.activity-option:hover{border-color:#83b8e5;box-shadow:0 8px 20px rgba(24,84,136,.09);transform:translateY(-1px)}
.activity-option.is-selected{border-color:#0870c9;box-shadow:0 0 0 3px rgba(8,112,201,.13)}
.activity-option__select{display:grid;width:100%;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.8rem;padding:1rem;border:0;background:transparent;color:#10213b;text-align:left;cursor:pointer}
.activity-option__radio{display:grid;width:22px;height:22px;place-items:center;border:2px solid #9cb7ce;border-radius:50%;background:#fff}
.activity-option.is-selected .activity-option__radio{border:6px solid #0870c9}
.activity-option__heading{display:grid;min-width:0;gap:.45rem}
.activity-option__heading strong{font-size:.98rem;line-height:1.35}
.activity-option__meta{display:flex;flex-wrap:wrap;gap:.38rem}
.activity-option__meta span{padding:.24rem .48rem;border-radius:999px;background:#edf5fb;color:#49647d;font-size:.7rem;font-weight:750}
.activity-option__choose-label{align-self:start;padding:.36rem .58rem;border-radius:9px;background:#edf5fb;color:#075eae;font-size:.73rem;font-weight:800}
.activity-option.is-selected .activity-option__choose-label{background:#0870c9;color:#fff}
.activity-option__details{border-top:1px solid #e1ebf3}
.activity-option__details summary{padding:.7rem 1rem;color:#075eae;font-size:.78rem;font-weight:800;cursor:pointer;list-style-position:inside}
.activity-option__details div{padding:0 1rem 1rem;color:#435a70;font-size:.82rem;line-height:1.65}
@media(max-width:640px){.activity-picker__toolbar{align-items:stretch;flex-direction:column}.activity-picker__count{align-self:flex-start}.activity-picker__options{max-height:70vh;padding:.6rem}.activity-option__select{grid-template-columns:auto minmax(0,1fr);padding:.8rem}.activity-option__choose-label{display:none}.activity-option__details summary,.activity-option__details div{padding-left:.8rem;padding-right:.8rem}}

/* Staff booking editor uses the same detailed long-course picker. */
.staff-activity-picker-field{grid-column:1/-1}
.staff-manual-booking .activity-picker__options{grid-template-columns:repeat(2,minmax(0,1fr));max-height:640px}
@media(max-width:900px){.staff-manual-booking .activity-picker__options{grid-template-columns:1fr}}