:root {
  --ink: #050714;
  --panel: rgba(5, 9, 25, .88);
  --panel-soft: rgba(10, 15, 40, .76);
  --white: #f8fbff;
  --muted: #c4c9df;
  --blue: #19d9ff;
  --electric: #3977ff;
  --pink: #ff2dcc;
  --purple: #9f43ff;
  --gold: #ffb12c;
  --green: #61f5a1;
  --radius: 1.5rem;
  --shadow: 0 1.5rem 5rem rgba(0, 0, 0, .55);
  font-family: "Segoe UI", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--white);
  background: var(--ink);
  color-scheme: dark;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  background: var(--ink);
}

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  background-color: var(--ink);
  background-image:
    linear-gradient(180deg, rgba(3, 5, 16, .32), rgba(3, 5, 16, .88) 48%, #050714 85%),
    url("assets/wallpaper.png");
  background-position: center top;
  background-repeat: no-repeat;
  background-size: min(1800px, 145vw) auto;
  background-attachment: fixed, fixed;
}

body.modal-open { overflow: hidden; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
a { color: inherit; }

.skip-link {
  position: fixed;
  z-index: 1000;
  top: .8rem;
  left: .8rem;
  padding: .7rem 1rem;
  color: #050714;
  background: var(--blue);
  border-radius: .5rem;
  transform: translateY(-180%);
  transition: transform .2s ease;
}

.skip-link:focus { transform: translateY(0); }

.site-shell {
  min-height: 100vh;
  opacity: 1;
  transition: opacity .65s ease;
}

.intro-gate.is-open + .site-shell {
  opacity: .34;
  filter: blur(7px);
}

.site-header {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(92vw, 1440px);
  margin: 0 auto;
  padding: 1.2rem 0;
}

.brand img {
  display: block;
  width: clamp(11rem, 20vw, 18rem);
  height: auto;
  filter: drop-shadow(0 0 1rem rgba(24, 201, 255, .32));
}

.header-cta {
  padding: .65rem 1rem;
  border: 1px solid rgba(35, 216, 255, .52);
  border-radius: 999px;
  color: var(--white);
  background: rgba(5, 10, 26, .72);
  text-decoration: none;
  font-weight: 700;
  backdrop-filter: blur(12px);
  box-shadow: 0 0 1.5rem rgba(17, 201, 255, .11);
}

.hero-section {
  position: relative;
  display: grid;
  grid-template-columns: minmax(17rem, .78fr) minmax(25rem, 1.22fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
  width: min(92vw, 1440px);
  min-height: min(78vh, 880px);
  margin: 0 auto;
  padding: clamp(2rem, 6vw, 5.5rem) 0 clamp(6rem, 10vw, 10rem);
}

.hero-copy {
  position: relative;
  z-index: 2;
  padding: clamp(1.4rem, 3vw, 2.5rem);
  border: 1px solid rgba(70, 215, 255, .17);
  border-radius: var(--radius);
  background: linear-gradient(145deg, rgba(5, 8, 23, .92), rgba(9, 7, 29, .74));
  box-shadow: var(--shadow), inset 0 0 3rem rgba(30, 95, 255, .07);
  backdrop-filter: blur(18px);
}

.eyebrow {
  margin: 0 0 .45rem;
  color: var(--blue);
  font-size: .76rem;
  font-weight: 900;
  letter-spacing: .2em;
  line-height: 1.2;
  text-transform: uppercase;
}

.neon-blue { text-shadow: 0 0 1rem rgba(25, 217, 255, .55); }
.neon-pink { color: #ff75df; text-shadow: 0 0 1rem rgba(255, 45, 204, .48); }
h1, h2, h3, p { overflow-wrap: break-word; }

.hero-copy h1 {
  max-width: 12ch;
  margin: 0;
  font-size: clamp(2.7rem, 5.5vw, 6rem);
  line-height: .94;
  letter-spacing: -.055em;
}

.hero-copy h1 span {
  color: transparent;
  background: linear-gradient(100deg, var(--blue), #a478ff 48%, #ff52d5);
  background-clip: text;
  -webkit-background-clip: text;
  filter: drop-shadow(0 0 1.4rem rgba(52, 157, 255, .25));
}

.hero-lede {
  max-width: 38rem;
  margin: 1.3rem 0 1.7rem;
  color: var(--muted);
  font-size: clamp(1rem, 1.55vw, 1.25rem);
  line-height: 1.68;
}

.neon-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  min-height: 3rem;
  padding: .78rem 1.15rem;
  border: 1px solid rgba(75, 223, 255, .72);
  border-radius: 999px;
  color: var(--white);
  background: rgba(9, 15, 38, .92);
  text-decoration: none;
  font-weight: 850;
  letter-spacing: .01em;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.neon-button:hover, .neon-button:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 0 1rem rgba(25, 217, 255, .42), inset 0 0 1rem rgba(25, 217, 255, .08);
}

.button-primary {
  border-color: #73eaff;
  background: linear-gradient(105deg, #084ec5, #753bd1 54%, #c321a2);
  box-shadow: 0 0 1.5rem rgba(55, 117, 255, .32), 0 0 2.5rem rgba(255, 45, 204, .13);
}

.button-secondary { background: rgba(5, 10, 26, .82); }
.hero-button { width: fit-content; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; }

.baxter-tile {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(65, 205, 255, .56);
  border-radius: clamp(1rem, 2vw, 2rem);
  background: #030612;
  box-shadow: var(--shadow), 0 0 3rem rgba(37, 102, 255, .2), 0 0 4rem rgba(242, 37, 212, .1);
  cursor: pointer;
  transform: rotate(1deg);
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s ease;
}

.baxter-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(130deg, transparent 25%, rgba(255,255,255,.17) 45%, transparent 58%);
  transform: translateX(-120%);
  transition: transform .65s ease;
}

.baxter-tile:hover, .baxter-tile:focus-visible {
  outline: 0;
  transform: rotate(0deg) translateY(-8px) scale(1.012);
  box-shadow: var(--shadow), 0 0 3rem rgba(25, 217, 255, .37), 0 0 4.5rem rgba(255, 45, 204, .2);
}

.baxter-tile:hover::after { transform: translateX(120%); }
.baxter-tile img { display: block; width: 100%; height: auto; }

.play-label {
  position: absolute;
  z-index: 2;
  right: 1.2rem;
  bottom: 1.2rem;
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .7rem 1rem;
  border: 1px solid rgba(255,255,255,.55);
  border-radius: 999px;
  color: #fff;
  background: rgba(2, 5, 18, .82);
  box-shadow: 0 0 1.6rem rgba(31, 203, 255, .4);
  font-weight: 900;
  backdrop-filter: blur(12px);
}

.play-icon {
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  padding-left: .12rem;
  border-radius: 50%;
  color: #061021;
  background: var(--blue);
  box-shadow: 0 0 1rem var(--blue);
}

.roles-section {
  position: relative;
  z-index: 2;
  padding: clamp(4.5rem, 9vw, 8rem) max(4vw, calc((100vw - 1440px) / 2));
  background:
    radial-gradient(circle at 15% 20%, rgba(27, 180, 255, .11), transparent 29rem),
    radial-gradient(circle at 85% 70%, rgba(245, 43, 207, .1), transparent 32rem),
    linear-gradient(180deg, rgba(5, 7, 20, .82), #050714 22%);
}

.section-heading { max-width: 50rem; margin-bottom: 2.5rem; }
.section-heading h2 { margin: 0; font-size: clamp(2.5rem, 5vw, 5.2rem); letter-spacing: -.045em; line-height: 1; }
.section-heading > p:last-child { color: var(--muted); font-size: 1.12rem; line-height: 1.6; }

.role-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1rem;
}

.role-card {
  position: relative;
  display: flex;
  grid-column: span 4;
  min-height: 22rem;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(1.3rem, 2.2vw, 2rem);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--role-colour) 45%, transparent);
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 25% 10%, color-mix(in srgb, var(--role-colour) 25%, transparent), transparent 45%),
    linear-gradient(145deg, rgba(13, 19, 43, .95), rgba(5, 8, 22, .96));
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, .25), inset 0 0 2.5rem rgba(255,255,255,.02);
  text-decoration: none;
  transform: translateY(0);
  transition: transform .35s cubic-bezier(.2,.8,.2,1), border-color .25s ease, box-shadow .3s ease;
}

.js .role-card { opacity: 0; transform: translateY(5rem) scale(.88); }
.js .role-card.is-visible { animation: role-bounce-in .8s var(--delay) cubic-bezier(.17,.89,.32,1.35) both; }

.role-card:hover, .role-card:focus-visible {
  z-index: 2;
  outline: 0;
  transform: translateY(-10px) rotate(-.4deg);
  border-color: var(--role-colour);
  box-shadow: 0 1.5rem 4rem rgba(0,0,0,.38), 0 0 2.5rem color-mix(in srgb, var(--role-colour) 24%, transparent);
}

.sheriff { --role-colour: var(--gold); }
.scientist { --role-colour: var(--green); }
.physicist { --role-colour: var(--blue); }
.explains { --role-colour: var(--pink); }
.fun { --role-colour: #bd83ff; }
.promote { --role-colour: #ff6f61; }

.role-number {
  position: absolute;
  top: 1.1rem;
  right: 1.3rem;
  color: color-mix(in srgb, var(--role-colour) 68%, white);
  font-size: .75rem;
  font-weight: 900;
  letter-spacing: .2em;
}

.role-icon {
  position: absolute;
  top: 1.5rem;
  left: 1.5rem;
  display: grid;
  width: 5rem;
  height: 5rem;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--role-colour) 60%, transparent);
  border-radius: 1.4rem;
  color: var(--role-colour);
  background: color-mix(in srgb, var(--role-colour) 10%, transparent);
  box-shadow: 0 0 2rem color-mix(in srgb, var(--role-colour) 22%, transparent), inset 0 0 1.2rem color-mix(in srgb, var(--role-colour) 10%, transparent);
  font-family: Georgia, serif;
  font-size: 2.5rem;
  font-weight: 800;
  text-shadow: 0 0 1rem var(--role-colour);
}

.role-card h3 { margin: 0; font-size: clamp(1.55rem, 2.4vw, 2.25rem); letter-spacing: -.025em; }
.role-card p { min-height: 3.2em; margin: .8rem 0 1.35rem; color: var(--muted); line-height: 1.55; }
.role-link { color: var(--role-colour); font-weight: 900; }
.role-link b { margin-left: .3rem; }

.real-baxter-section {
  position: relative;
  z-index: 2;
  padding: clamp(1.5rem, 4vw, 3rem) max(4vw, calc((100vw - 1440px) / 2)) clamp(3.5rem, 7vw, 6rem);
  background: linear-gradient(180deg, rgba(5,7,20,.72), #050714);
}

.real-baxter-tile {
  display: grid;
  grid-template-columns: minmax(15rem, .72fr) minmax(0, 1.28fr);
  align-items: stretch;
  max-width: 62rem;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid rgba(255, 69, 211, .44);
  border-radius: clamp(1.25rem, 3vw, 2rem);
  background: linear-gradient(135deg, rgba(25, 217, 255, .1), rgba(255, 45, 204, .13)), rgba(7, 10, 28, .95);
  box-shadow: 0 1.5rem 4.5rem rgba(0,0,0,.4), 0 0 2rem rgba(255,45,204,.13);
  text-decoration: none;
  transition: transform .3s ease, border-color .25s ease, box-shadow .3s ease;
}

.real-baxter-tile:hover, .real-baxter-tile:focus-visible {
  outline: 0;
  transform: translateY(-7px);
  border-color: var(--pink);
  box-shadow: 0 1.8rem 5rem rgba(0,0,0,.48), 0 0 2.8rem rgba(255,45,204,.24);
}

.real-baxter-tile > img { width: 100%; height: 100%; min-height: 20rem; object-fit: cover; }
.real-baxter-copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(1.35rem, 3vw, 2.5rem); }
.real-baxter-copy .eyebrow { margin-bottom: .75rem; }
.real-baxter-copy strong { max-width: 20ch; font-size: clamp(1.75rem, 3.5vw, 3rem); line-height: 1; letter-spacing: -.04em; }
.real-baxter-copy > span:not(.eyebrow) { max-width: 38rem; margin-top: 1.2rem; color: var(--muted); font-size: 1.08rem; line-height: 1.65; }
.real-baxter-copy > b { margin-top: 1.35rem; color: var(--blue); font-size: 1rem; }

.meet-baxter-main { width: min(92vw, 1320px); margin: 0 auto; padding: clamp(3rem, 7vw, 7rem) 0 clamp(5rem, 9vw, 8rem); }
.meet-baxter-hero { display: grid; grid-template-columns: minmax(20rem, .9fr) minmax(0, 1.1fr); align-items: center; gap: clamp(2rem, 6vw, 5rem); }
.meet-baxter-photo { margin: 0; overflow: hidden; border: 2px solid var(--blue); border-radius: clamp(1.25rem, 3vw, 2rem); background: #030512; box-shadow: 0 0 .5rem var(--blue), 0 0 2.5rem rgba(255,45,204,.28), var(--shadow); transform: rotate(-1deg); }
.meet-baxter-photo img { display: block; width: 100%; height: auto; }
.meet-baxter-photo figcaption { padding: .8rem 1rem; color: var(--muted); background: rgba(5,8,23,.96); font-size: .8rem; text-align: center; }
.meet-baxter-copy { padding: clamp(1.4rem, 3vw, 2.5rem); border: 1px solid rgba(70,215,255,.17); border-radius: var(--radius); background: linear-gradient(145deg, rgba(5,8,23,.94), rgba(16,7,37,.86)); box-shadow: var(--shadow); backdrop-filter: blur(18px); }
.meet-baxter-copy h1 { max-width: 10ch; margin: 0; font-size: clamp(3.1rem, 7vw, 6.6rem); line-height: .9; letter-spacing: -.06em; }
.meet-baxter-copy h1 span { color: var(--pink); text-shadow: 0 0 2rem rgba(255,45,204,.3); }
.meet-baxter-copy > p:not(.eyebrow) { max-width: 44rem; color: var(--muted); line-height: 1.7; }
.meet-baxter-lede { font-size: clamp(1.05rem, 1.7vw, 1.28rem); }
.meeting-coming-soon { margin: 1.7rem 0; padding: 1.25rem; border: 1px solid rgba(255,69,211,.35); border-radius: 1rem; background: linear-gradient(120deg, rgba(255,45,204,.12), rgba(25,217,255,.08)); }
.coming-soon-badge { display: inline-block; padding: .35rem .55rem; border: 1px solid rgba(255,119,223,.55); border-radius: 999px; color: #ff8be4; font-size: .65rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.meeting-coming-soon h2 { margin: .7rem 0 .4rem; font-size: clamp(1.45rem, 3vw, 2.2rem); }
.meeting-coming-soon p { margin: 0; color: var(--muted); line-height: 1.6; }

.site-footer {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 2rem;
  width: min(92vw, 1440px);
  margin: 0 auto;
  padding: 2rem 0 2.5rem;
  border-top: 1px solid rgba(87, 199, 255, .16);
  color: #8991ad;
  font-size: .86rem;
}
.site-footer img { width: 10rem; }
.site-footer p { margin: 0; }

.intro-gate, .video-modal {
  position: fixed;
  z-index: 100;
  inset: 0;
  display: grid;
  place-items: center;
  padding: clamp(.65rem, 2vw, 2rem);
  visibility: hidden;
  opacity: 0;
  transition: opacity .35s ease, visibility .35s ease;
}

.intro-gate.is-open, .video-modal.is-open { visibility: visible; opacity: 1; }
.video-modal[hidden] { display: none; }

.intro-backdrop, .modal-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: rgba(1, 3, 12, .88);
  backdrop-filter: blur(13px);
}

.video-frame {
  position: relative;
  z-index: 2;
  width: min(93vw, 1100px);
  padding: clamp(.55rem, 1.5vw, 1rem);
  border: 2px solid var(--blue);
  border-radius: clamp(1rem, 2.2vw, 2rem);
  background: linear-gradient(145deg, rgba(9, 17, 45, .98), rgba(15, 5, 37, .98));
  box-shadow: 0 0 .5rem var(--blue), 0 0 2rem rgba(25, 217, 255, .32), 0 0 3.5rem rgba(255, 45, 204, .23), var(--shadow);
}

.video-frame::before {
  content: "";
  position: absolute;
  pointer-events: none;
  inset: -.35rem;
  border: 2px solid rgba(255, 45, 204, .8);
  border-radius: inherit;
  clip-path: polygon(0 0, 38% 0, 43% 6%, 76% 6%, 80% 0, 100% 0, 100% 100%, 65% 100%, 61% 94%, 21% 94%, 17% 100%, 0 100%);
  filter: drop-shadow(0 0 .65rem rgba(255, 45, 204, .72));
}

.video-shell {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: clamp(.7rem, 1.7vw, 1.35rem);
  background: #02040d;
}

.video-shell video { display: block; width: 100%; height: 100%; object-fit: cover; }
.video-vignette { position: absolute; pointer-events: none; inset: 0; box-shadow: inset 0 0 4rem rgba(0,0,0,.5); }

.frame-charm {
  position: absolute;
  z-index: 5;
  display: grid;
  place-items: center;
  filter: drop-shadow(0 0 .6rem currentColor);
  line-height: 1;
}
.charm-paw-one { top: -1.1rem; left: 5%; color: var(--blue); font-size: 2rem; transform: rotate(-20deg); }
.charm-paw-two { right: 5%; bottom: -1.15rem; color: var(--pink); font-size: 2rem; transform: rotate(18deg); }
.charm-bone { top: 25%; right: -1.65rem; color: var(--pink); font-size: 2.2rem; transform: rotate(48deg); }
.charm-ball { bottom: 20%; left: -1rem; width: 1.55rem; height: 1.55rem; border: .3rem solid var(--blue); border-radius: 50%; color: transparent; box-shadow: 0 0 .7rem var(--blue); }

.intro-controls, .replay-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1rem .4rem .2rem;
}
.intro-controls h1, .replay-controls h2 { margin: 0; font-size: clamp(1.55rem, 3vw, 2.5rem); line-height: 1; }
.intro-controls p:last-child { margin: .45rem 0 0; color: var(--muted); }
.control-buttons { display: flex; align-items: center; gap: .65rem; flex-wrap: wrap; justify-content: flex-end; }
.replay-frame { width: min(93vw, 980px); }

/* Role video-library pages */
.role-page {
  background-image:
    linear-gradient(180deg, rgba(3, 5, 16, .64), #050714 34rem),
    url("assets/wallpaper.png");
  background-size: min(1800px, 180vw) auto;
}

.role-page .site-header {
  padding-bottom: .7rem;
  border-bottom: 1px solid rgba(79, 196, 255, .14);
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .65rem 1rem;
  border: 1px solid rgba(80, 211, 255, .38);
  border-radius: 999px;
  background: rgba(4, 9, 25, .78);
  text-decoration: none;
  font-weight: 800;
  backdrop-filter: blur(12px);
}

.back-link:hover, .back-link:focus-visible {
  border-color: var(--blue);
  box-shadow: 0 0 1.2rem rgba(25, 217, 255, .24);
}

.library-main {
  width: min(92vw, 1440px);
  margin: 0 auto;
  padding: clamp(3.5rem, 7vw, 7rem) 0 7rem;
}

.library-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 2rem;
  max-width: 68rem;
  margin-bottom: clamp(3rem, 6vw, 5.5rem);
}

.library-badge {
  display: grid;
  width: clamp(5.5rem, 10vw, 8rem);
  height: clamp(5.5rem, 10vw, 8rem);
  place-items: center;
  border: 2px solid var(--role-colour);
  border-radius: 2rem;
  color: var(--role-colour);
  background: color-mix(in srgb, var(--role-colour) 12%, rgba(5, 8, 24, .92));
  box-shadow: 0 0 2.5rem color-mix(in srgb, var(--role-colour) 31%, transparent), inset 0 0 1.5rem color-mix(in srgb, var(--role-colour) 12%, transparent);
  font-family: Georgia, serif;
  font-size: clamp(2.8rem, 6vw, 5rem);
  font-weight: 900;
  text-shadow: 0 0 1.3rem var(--role-colour);
  transform: rotate(3deg);
}

.library-hero h1 {
  max-width: 11ch;
  margin: 0;
  font-size: clamp(3.2rem, 8vw, 7rem);
  line-height: .9;
  letter-spacing: -.06em;
}

.library-hero h1 span { color: var(--role-colour); text-shadow: 0 0 2.2rem color-mix(in srgb, var(--role-colour) 30%, transparent); }
.library-hero .library-intro { max-width: 42rem; margin: 1.35rem 0 0; color: var(--muted); font-size: clamp(1.05rem, 1.7vw, 1.28rem); line-height: 1.65; }

.video-library-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 1.35rem;
}

.video-library-heading h2 { margin: 0; font-size: clamp(1.9rem, 3.5vw, 3.2rem); letter-spacing: -.035em; }
.video-library-heading p { margin: 0 0 .3rem; color: var(--muted); }

.video-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.15rem;
}

.video-card {
  position: relative;
  min-height: 19rem;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--role-colour) 37%, rgba(255,255,255,.08));
  border-radius: 1.35rem;
  background:
    linear-gradient(155deg, color-mix(in srgb, var(--role-colour) 12%, transparent), transparent 48%),
    rgba(6, 10, 28, .9);
  box-shadow: 0 1rem 3rem rgba(0,0,0,.24);
}

button.video-card {
  width: 100%;
  padding: 0;
  color: inherit;
  font: inherit;
  text-align: left;
}

.video-card::before {
  content: "";
  position: absolute;
  inset: 0 0 5.5rem;
  background:
    radial-gradient(circle at center, color-mix(in srgb, var(--role-colour) 22%, transparent), transparent 45%),
    repeating-linear-gradient(135deg, transparent 0 18px, rgba(255,255,255,.018) 18px 19px);
}

.video-placeholder-icon {
  position: absolute;
  top: calc(50% - 2.8rem);
  left: 50%;
  display: grid;
  width: 4.4rem;
  height: 4.4rem;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--role-colour) 65%, transparent);
  border-radius: 50%;
  color: var(--role-colour);
  background: rgba(5, 8, 23, .82);
  box-shadow: 0 0 1.8rem color-mix(in srgb, var(--role-colour) 20%, transparent);
  font-size: 1.45rem;
  transform: translate(-50%, -50%);
  z-index: 2;
}

.video-card-copy {
  position: absolute;
  inset: auto 0 0;
  padding: 1.15rem 1.25rem 1.25rem;
  border-top: 1px solid rgba(255,255,255,.07);
  background: rgba(4, 7, 20, .86);
  backdrop-filter: blur(10px);
  z-index: 3;
}

.video-card-copy span { color: var(--role-colour); font-size: .7rem; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
.video-card-copy h3 { margin: .35rem 0 0; font-size: 1.15rem; }

.age-badge {
  position: absolute;
  z-index: 4;
  top: .8rem;
  right: .8rem;
  display: grid;
  gap: .05rem;
  padding: .5rem .65rem;
  border: 1px solid #ff668f;
  border-radius: .75rem;
  color: #fff;
  background: rgba(124, 8, 45, .92);
  box-shadow: 0 0 1.2rem rgba(255, 48, 111, .42);
  text-align: center;
  text-transform: uppercase;
}

.age-badge strong { font-size: 1rem; line-height: 1; }
.age-badge small { font-size: .52rem; font-weight: 900; letter-spacing: .08em; }

.video-card-poster {
  position: absolute;
  z-index: 0;
  inset: 0 0 5.5rem;
  width: 100%;
  height: calc(100% - 5.5rem);
  object-fit: cover;
  object-position: center 20%;
  filter: brightness(.72) saturate(.9);
  transition: transform .35s ease, filter .35s ease;
}

.video-card-play {
  cursor: pointer;
  transition: transform .3s ease, border-color .25s ease, box-shadow .3s ease;
}

.video-card-play::before {
  z-index: 1;
  background: linear-gradient(180deg, transparent 38%, rgba(4, 7, 20, .55)), radial-gradient(circle at center, color-mix(in srgb, var(--role-colour) 17%, transparent), transparent 48%);
}

.video-card-play:hover, .video-card-play:focus-visible {
  outline: 0;
  transform: translateY(-7px);
  border-color: var(--role-colour);
  box-shadow: 0 1.5rem 3.5rem rgba(0,0,0,.35), 0 0 2rem color-mix(in srgb, var(--role-colour) 22%, transparent);
}

.video-card-play:hover .video-card-poster, .video-card-play:focus-visible .video-card-poster {
  transform: scale(1.045);
  filter: brightness(.88) saturate(1.08);
}

.sweet-link-callout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  margin-top: 1.15rem;
  padding: 1rem 1.1rem 1rem 1.3rem;
  border: 1px solid rgba(255, 100, 197, .42);
  border-radius: 1.2rem;
  background: linear-gradient(115deg, rgba(255, 38, 172, .16), rgba(61, 213, 255, .12)), rgba(6, 10, 28, .92);
  box-shadow: 0 0 2rem rgba(255, 31, 171, .12);
}

.sweet-link-callout div { display: grid; gap: .2rem; }
.sweet-kicker { color: #ff78cf; font-size: .68rem; font-weight: 900; letter-spacing: .15em; text-transform: uppercase; }
.sweet-link-callout strong { font-size: clamp(1rem, 2vw, 1.35rem); }

.candy-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  min-height: 3.15rem;
  padding: .72rem 1.05rem;
  border: 1px solid #ff78cf;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(100deg, #ee168e, #743cff 55%, #009fd8);
  box-shadow: 0 0 1.4rem rgba(255, 31, 171, .28);
  font-size: .86rem;
  font-weight: 900;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease;
}

.candy-button:hover, .candy-button:focus-visible { transform: translateY(-2px) rotate(-1deg); box-shadow: 0 0 2rem rgba(255, 31, 171, .48); }

.featured-link-callout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  margin-top: 1.15rem;
  padding: 1rem 1.1rem 1rem 1.3rem;
  border: 1px solid color-mix(in srgb, var(--role-colour) 46%, rgba(71, 210, 255, .45));
  border-radius: 1.2rem;
  background: linear-gradient(115deg, rgba(255, 111, 97, .15), rgba(45, 116, 255, .14)), rgba(6, 10, 28, .92);
  box-shadow: 0 0 2rem rgba(47, 151, 255, .12);
}

.featured-link-callout div { display: grid; gap: .2rem; }
.featured-link-kicker { color: #69dcff; font-size: .68rem; font-weight: 900; letter-spacing: .15em; text-transform: uppercase; }
.featured-link-callout strong { font-size: clamp(1rem, 2vw, 1.35rem); }

.featured-link-button {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  min-height: 3.15rem;
  padding: .72rem 1.05rem;
  border: 1px solid #62d9ff;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(100deg, #0876e8, #7043ed 55%, #e82a9b);
  box-shadow: 0 0 1.4rem rgba(45, 171, 255, .3);
  font-size: .86rem;
  font-weight: 900;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease;
}

.featured-link-button:hover, .featured-link-button:focus-visible { transform: translateY(-2px); box-shadow: 0 0 2rem rgba(45, 171, 255, .5); }

.role-replay-frame { width: min(92vw, 820px); }
.library-video-shell { aspect-ratio: auto; display: grid; max-height: 70vh; place-items: center; }
.library-video-shell video { width: 100%; height: auto; max-height: 70vh; object-fit: contain; }

.age-gate-frame { width: min(92vw, 540px); }
.age-gate-frame .charm-bone { width: auto; height: auto; border: 0; color: #ff668f; font-size: 1rem; font-weight: 950; }
.age-gate-card { padding: clamp(1.2rem, 4vw, 2.25rem); }
.age-gate-card h2 { margin: .15rem 0 .75rem; font-size: clamp(1.8rem, 6vw, 3rem); line-height: 1.02; }
.age-gate-card > p:not(.eyebrow) { margin: 0; color: var(--muted); line-height: 1.6; }
.age-gate-form { display: grid; gap: .7rem; margin-top: 1.3rem; }
.age-gate-form label { font-size: .76rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.age-input-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .7rem; }
.age-input-row input {
  min-width: 0;
  border: 1px solid rgba(115, 234, 255, .5);
  border-radius: .85rem;
  padding: .75rem 1rem;
  color: var(--text);
  background: rgba(2, 5, 18, .92);
  box-shadow: inset 0 0 1rem rgba(25, 217, 255, .08);
  font: inherit;
  font-size: 1.2rem;
}
.age-input-row input:focus { outline: 2px solid var(--blue); outline-offset: 2px; }
.age-gate-message { min-height: 1.4rem; margin: 0; color: #ff8eaf; font-size: .88rem; font-weight: 800; }
.age-gate-cancel { justify-self: start; padding: .2rem 0; border: 0; color: var(--muted); background: none; font: inherit; font-size: .82rem; text-decoration: underline; cursor: pointer; }
.age-gate-cancel:hover, .age-gate-cancel:focus-visible { color: #fff; }

.role-switcher {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
  margin-top: 4rem;
  padding-top: 1.4rem;
  border-top: 1px solid rgba(255,255,255,.08);
}

.role-switcher a {
  padding: .62rem .85rem;
  border: 1px solid rgba(88, 203, 255, .22);
  border-radius: 999px;
  color: #cbd1e5;
  background: rgba(6, 10, 27, .72);
  text-decoration: none;
  font-size: .86rem;
  font-weight: 760;
}

.role-switcher a[aria-current="page"] { border-color: var(--role-colour); color: var(--white); box-shadow: 0 0 1rem color-mix(in srgb, var(--role-colour) 18%, transparent); }

@keyframes role-bounce-in {
  0% { opacity: 0; transform: translateY(5rem) scale(.88); }
  65% { opacity: 1; transform: translateY(-.7rem) scale(1.02); }
  82% { transform: translateY(.35rem) scale(.99); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 980px) {
  body { background-size: auto min(68rem, 100vh); }
  .hero-section { grid-template-columns: 1fr; padding-top: 3rem; }
  .hero-copy { max-width: 42rem; }
  .baxter-tile { max-width: 48rem; justify-self: center; }
  .role-card { grid-column: span 6; min-height: 20rem; }
  .video-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .real-baxter-tile, .meet-baxter-hero { grid-template-columns: 1fr; }
  .real-baxter-tile > img { max-height: 28rem; }
  .meet-baxter-photo { width: min(100%, 42rem); margin: 0 auto; }
}

@media (max-width: 650px) {
  .site-header { padding-top: .8rem; }
  .header-cta { font-size: .8rem; }
  .hero-section { min-height: auto; padding: 2.5rem 0 6rem; }
  .hero-copy { padding: 1.25rem; }
  .hero-copy h1 { font-size: clamp(2.65rem, 14vw, 4.2rem); }
  .hero-actions { align-items: stretch; flex-direction: column; }
  .hero-actions .hero-button { width: 100%; }
  .play-label { right: .7rem; bottom: .7rem; padding: .45rem .7rem; font-size: .8rem; }
  .play-icon { width: 1.7rem; height: 1.7rem; }
  .role-card { grid-column: span 12; min-height: 19rem; }
  .site-footer { grid-template-columns: 1fr; gap: .7rem; }
  .site-footer p { max-width: 34rem; }
  .intro-controls, .replay-controls { align-items: flex-start; flex-direction: column; gap: .8rem; padding-top: .75rem; }
  .control-buttons { width: 100%; justify-content: stretch; }
  .control-buttons .neon-button { flex: 1; font-size: .86rem; }
  .frame-charm { display: none; }
  .library-hero { grid-template-columns: 1fr; align-items: start; }
  .library-badge { grid-row: 1; }
  .video-library-heading { align-items: flex-start; flex-direction: column; gap: .4rem; }
  .video-grid { grid-template-columns: 1fr; }
  .video-card { min-height: 17rem; }
  .sweet-link-callout, .featured-link-callout { align-items: stretch; flex-direction: column; }
  .age-input-row { grid-template-columns: 1fr; }
}

@media (max-height: 710px) and (min-width: 651px) {
  .video-frame { width: min(82vw, 860px); }
  .intro-controls { padding-top: .65rem; }
  .intro-controls p:last-child { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}