:root {
  --ink: #17141c;
  --paper: #f3eee4;
  --card: #fffdf8;
  --yellow: #f5d547;
  --terracotta: #a83b20;
  --muted: #4c4656;
  --line: #17141c;
  --day-x: 0px;
  --day-y: 0px;
  --ease: cubic-bezier(0.22, 0.8, 0.2, 1);
  --fast: 150ms;
  --std: 280ms;
  --enter: 800ms;
  --band: clamp(36px, 4vw, 52px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
body {
  position: relative;
  isolation: isolate;
  margin: 0;
  overflow-x: clip;
  background: var(--paper);
  color: var(--ink);
  font-family: Manrope, ui-sans-serif, system-ui, sans-serif;
  font-size: 1.05rem;
  line-height: 1.45;
}
img { max-width: 100%; height: auto; }
h1, h2, h3 {
  font-family: "Familjen Grotesk", Manrope, sans-serif;
  letter-spacing: -0.045em;
  line-height: 0.9;
  font-weight: 700;
}
h2 {
  margin: 0 0 18px;
  max-width: none;
  font-size: clamp(1.85rem, 1.05rem + 2.1vw, 3.15rem);
  text-wrap: balance;
}
h2 .door { width: 22px; height: 30px; margin-right: 8px; vertical-align: -4px; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
.skip {
  position: absolute; left: 12px; top: -48px; z-index: 4;
  background: var(--ink); color: var(--paper); padding: 8px 12px; font-weight: 800;
}
.skip:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.daydream {
  position: fixed;
  z-index: 0;
  inset: -14vmax;
  overflow: hidden;
  pointer-events: none;
  transform: translate3d(var(--day-x), var(--day-y), 0);
  transition: transform 900ms cubic-bezier(0.18, 0.78, 0.18, 1), opacity 700ms var(--ease);
  contain: strict;
}
body > :not(.daydream):not(.svg-defs) { position: relative; z-index: 1; }
/* The open campus menu hangs into the next section. That section is also z-index 1, so its type was painting through the menu. */
body > header.hero:has(.campus-picker[open]) { z-index: 4; }
.daydream-field {
  position: absolute;
  display: block;
  border-radius: 50%;
  opacity: 0.48;
  transition: opacity 900ms var(--ease), transform 1100ms var(--ease);
}
.daydream-peach {
  width: 58vmax;
  height: 48vmax;
  left: -12vmax;
  top: -10vmax;
  background: radial-gradient(ellipse, rgb(211 105 72 / 28%) 0, rgb(229 151 116 / 18%) 38%, transparent 72%);
}
.daydream-blue {
  width: 54vmax;
  height: 52vmax;
  right: -14vmax;
  top: -4vmax;
  background: radial-gradient(ellipse, rgb(105 163 218 / 28%) 0, rgb(164 202 237 / 16%) 42%, transparent 72%);
}
.daydream-gold {
  width: 52vmax;
  height: 42vmax;
  left: 27%;
  bottom: -24vmax;
  background: radial-gradient(ellipse, rgb(245 213 71 / 30%) 0, rgb(245 213 71 / 13%) 42%, transparent 72%);
}
.daydream-shadow {
  position: absolute;
  width: 54vmax;
  height: 48vmax;
  right: 4vmax;
  top: 8vmax;
  opacity: 0.038;
  background:
    linear-gradient(90deg, transparent 0 15%, var(--ink) 15% 19%, transparent 19% 45%, var(--ink) 45% 49%, transparent 49% 75%, var(--ink) 75% 79%, transparent 79%),
    linear-gradient(0deg, transparent 0 18%, var(--ink) 18% 22%, transparent 22% 54%, var(--ink) 54% 58%, transparent 58%);
  -webkit-mask-image: radial-gradient(ellipse, #000 14%, rgb(0 0 0 / 72%) 48%, transparent 76%);
  mask-image: radial-gradient(ellipse, #000 14%, rgb(0 0 0 / 72%) 48%, transparent 76%);
  transform: translate3d(var(--day-x), var(--day-y), 0) perspective(900px) rotateX(58deg) rotateZ(-12deg);
  transition: opacity 900ms var(--ease), transform 1100ms var(--ease);
}
html[data-daydream="hero"] .daydream-peach { opacity: 0.52; transform: translate3d(2vw, 3vh, 0) scale(1.03); }
html[data-daydream="hero"] .daydream-blue { opacity: 0.42; transform: translate3d(-2vw, 2vh, 0) scale(1.02); }
html[data-daydream="hero"] .daydream-gold { opacity: 0.36; transform: translate3d(3vw, -4vh, 0); }
html[data-daydream="hero"] .daydream-shadow { opacity: 0.046; }
html[data-daydream="rooms"] .daydream-peach { opacity: 0.52; transform: translate3d(7vw, 18vh, 0) scale(1.05); }
html[data-daydream="rooms"] .daydream-blue { opacity: 0.3; transform: translate3d(-5vw, 12vh, 0) scale(0.94); }
html[data-daydream="rooms"] .daydream-gold { opacity: 0.48; transform: translate3d(5vw, -18vh, 0) scale(1.12); }
html[data-daydream="rooms"] .daydream-shadow { opacity: 0.055; transform: translate3d(var(--day-x), calc(var(--day-y) + 7vh), 0) perspective(900px) rotateX(60deg) rotateZ(-8deg); }
html[data-daydream="chat"] .daydream-peach { opacity: 0.58; transform: translate3d(18vw, 28vh, 0) scale(0.82); }
html[data-daydream="chat"] .daydream-blue { opacity: 0.28; transform: translate3d(-15vw, 24vh, 0) scale(0.8); }
html[data-daydream="chat"] .daydream-gold { opacity: 0.55; transform: translate3d(4vw, -30vh, 0) scale(0.86); }
html[data-daydream="chat"] .daydream-shadow { opacity: 0.025; transform: translate3d(var(--day-x), calc(var(--day-y) + 12vh), 0) perspective(900px) rotateX(62deg) rotateZ(-5deg); }
html[data-daydream="owner"] .daydream-peach { opacity: 0.38; transform: translate3d(14vw, 34vh, 0) scale(0.92); }
html[data-daydream="owner"] .daydream-blue { opacity: 0.22; transform: translate3d(-10vw, 30vh, 0) scale(0.88); }
html[data-daydream="owner"] .daydream-gold { opacity: 0.62; transform: translate3d(16vw, -37vh, 0) scale(1.14); }
html[data-daydream="owner"] .daydream-shadow { opacity: 0.032; transform: translate3d(var(--day-x), calc(var(--day-y) + 16vh), 0) perspective(900px) rotateX(64deg) rotateZ(-3deg); }
html[data-daydream="scout"] .daydream { opacity: 0.2; }
html.reality-active .daydream-gold { opacity: 0.84; transform: translate3d(3vw, -34vh, 0) scale(1.18); }
html.reality-active .daydream-peach { opacity: 0.66; }

.wrap { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }
.door { display: inline-block; }

.hero {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
  display: grid;
  gap: 10px;
  padding: 18px 0 8px;
  align-items: end;
  overflow: visible;
}
.brand { display: flex; align-items: center; gap: 10px; margin: 0; font-weight: 800; }
.brand img { width: 64px; height: auto; }
h1 {
  margin: 10px 0 0;
  font-size: clamp(3.4rem, 12vw, 7.6rem);
}
.home-line { position: relative; display: inline-block; isolation: isolate; }
.home-line::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 1.08em;
  height: 0.075em;
  right: 0.02em;
  bottom: 0.015em;
  background: var(--terracotta);
  clip-path: polygon(0 34%, 18% 12%, 39% 35%, 61% 8%, 81% 31%, 100% 18%, 98% 86%, 77% 70%, 58% 94%, 36% 72%, 15% 96%, 1% 72%);
  transform: rotate(-1.2deg);
}
.offer {
  margin-top: 12px;
  max-width: 34rem;
  font-size: clamp(1.2rem, 2vw + 0.6rem, 1.7rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.25;
}
.independent {
  font-weight: 800;
  background: linear-gradient(var(--yellow), var(--yellow)) left 90% / 100% 0.34em no-repeat;
}
.promise { margin-top: 8px; color: var(--muted); font-weight: 600; }
.stage { position: relative; }
.figure {
  position: relative;
  margin: 8px 0 0;
  justify-self: center;
  perspective: 900px;
  --door-energy: 0;
  --ambient-x: 0px;
  --ambient-y: 0px;
  --shadow-x: 0px;
  --shadow-scale: 1;
}
.figure::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 12% -8% 10% 18%;
  background:
    linear-gradient(90deg, transparent 0 42%, rgb(23 20 28 / 8%) 42% 46%, transparent 46%),
    linear-gradient(0deg, transparent 0 57%, rgb(23 20 28 / 7%) 57% 61%, transparent 61%);
  -webkit-mask-image: radial-gradient(ellipse, #000 12%, transparent 72%);
  mask-image: radial-gradient(ellipse, #000 12%, transparent 72%);
  opacity: calc(0.18 + var(--door-energy) * 0.12);
  transform: perspective(620px) rotateX(58deg) translate3d(var(--ambient-x), var(--ambient-y), 0);
  pointer-events: none;
}
.figure::after {
  content: "";
  position: absolute;
  z-index: 0;
  width: 86%;
  aspect-ratio: 1;
  left: 18%;
  top: 18%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 58% 48%, rgb(245 213 71 / 34%), transparent 54%),
    radial-gradient(circle at 42% 62%, rgb(211 105 72 / 16%), transparent 62%),
    radial-gradient(circle at 35% 68%, rgb(177 208 239 / 24%), transparent 68%);
  opacity: calc(0.22 + var(--door-energy) * 0.46);
  transform: translate3d(var(--ambient-x), var(--ambient-y), 0) scale(calc(0.92 + var(--door-energy) * 0.12));
  transition: opacity var(--std) var(--ease), transform var(--std) var(--ease);
  pointer-events: none;
}
.ambient {
  position: absolute;
  z-index: 0;
  inset: 6% 8% 10%;
  background:
    radial-gradient(circle at 58% 46%, rgb(245 213 71 / 48%), transparent 42%),
    radial-gradient(circle at 36% 72%, rgb(197 218 246 / 40%), transparent 58%);
  transform: translate3d(var(--ambient-x), var(--ambient-y), 0);
  transition: transform var(--std) var(--ease);
  pointer-events: none;
}
.light-spill {
  position: absolute;
  z-index: 2;
  width: 82%;
  height: 24%;
  left: 42%;
  top: 48%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 24% 50%, rgb(255 231 118 / 58%), rgb(245 213 71 / 16%) 38%, transparent 72%);
  opacity: calc(var(--door-energy) * 0.72);
  transform: perspective(420px) rotateX(64deg) translate3d(var(--shadow-x), 0, 26px) scaleX(calc(0.86 + var(--door-energy) * 0.22));
  transform-origin: left center;
  transition: opacity var(--std) var(--ease), transform var(--std) var(--ease);
  pointer-events: none;
}
.ground-pad {
  position: absolute;
  z-index: 0;
  left: 11%;
  right: 11%;
  bottom: 0;
  height: 30px;
  transform-origin: 50% 60%;
  pointer-events: none;
}
.ground {
  position: absolute;
  z-index: 0;
  left: 11%;
  right: 11%;
  bottom: 0;
  height: 30px;
  background:
    radial-gradient(ellipse at 50% 55%, rgb(23 20 28 / 46%) 0 7%, rgb(23 20 28 / 22%) 26%, transparent 70%),
    radial-gradient(ellipse at 60% 58%, rgb(245 213 71 / 24%), transparent 64%);
  transform: translate3d(var(--shadow-x), 0, 0) scaleX(var(--shadow-scale));
  transition: transform var(--std) var(--ease), opacity var(--std) var(--ease);
  pointer-events: none;
}
.figure .ground {
  inset: 0;
  z-index: auto;
  height: auto;
}
/* Entrance, idle, and pointer each own one wrapper so their transforms compose. */
.mascot-rise,
.tilt,
[data-tilt],
.mascot-idle {
  position: relative;
  z-index: 1;
  display: block;
  width: fit-content;
  margin-inline: auto;
  transform-style: preserve-3d;
}
.mascot-rise { --jump-y: -12px; --jump-z: 14px; --jump-scale: 1.025; transform-origin: 50% 100%; }
.mascot-idle { transform-origin: 50% 92%; }
html.mascot-play .mascot-rise { animation: mascot-greet 1.8s linear both; }
html.mascot-play .mascot-idle { animation: mascot-live 9.6s 1.8s ease-in-out infinite; }
html.mascot-play .ground-pad { animation: mascot-ground 1.8s linear both, mascot-ground-live 9.6s 1.8s ease-in-out infinite; }
.figure.mascot-offscreen .mascot-rise,
.figure.mascot-offscreen .mascot-idle,
.figure.mascot-offscreen .ground-pad,
.figure.mascot-hidden .mascot-rise,
.figure.mascot-hidden .mascot-idle,
.figure.mascot-hidden .ground-pad { animation-play-state: paused; }
.figure img { width: min(176px, 48vw); margin-inline: auto; }
.door-glow {
  position: absolute;
  z-index: 2;
  width: 27%;
  aspect-ratio: 0.78;
  left: 61%;
  top: 50%;
  border-radius: 48% 48% 42% 42%;
  background: radial-gradient(ellipse at 50% 48%, rgb(255 244 164 / 68%), rgb(245 213 71 / 18%) 48%, transparent 72%);
  opacity: calc(var(--door-energy) * 0.72);
  transform: translate(-50%, -50%) scale(calc(0.86 + var(--door-energy) * 0.18));
  transition: opacity var(--std) var(--ease), transform var(--std) var(--ease);
  pointer-events: none;
}
.where {
  display: flex; align-items: center; gap: 8px;
  margin: 8px 0 0;
  width: fit-content;
  border: 0;
  padding: 4px 6px 4px 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
  font-weight: 800; letter-spacing: 0.04em; font-size: 1.15rem;
}
.where::-webkit-details-marker { display: none; }
.where .door { width: 18px; height: 24px; }
.campus-picker { position: relative; z-index: 30; width: fit-content; }
.campus-picker[open] { width: min(28rem, 100%); }
.campus-chevron { width: 12px; fill: none; stroke: currentColor; stroke-width: 1.8; transition: transform var(--std) var(--ease); }
.campus-picker[open] .campus-chevron { transform: rotate(180deg); }
.campus-panel {
  position: relative;
  z-index: 40;
  width: min(28rem, 100%);
  margin-top: 8px;
  padding: 18px;
  border: 2px solid var(--ink);
  border-radius: 22px;
  background: var(--card);
  box-shadow: 0 24px 58px rgb(23 20 28 / 18%);
  transform-origin: 34px 0;
}
.campus-picker[open] .campus-panel { animation: campus-panel-in 220ms var(--ease) both; }
.campus-panel-title { font: 700 1.45rem/1 "Familjen Grotesk", Manrope, sans-serif; letter-spacing: -0.035em; }
.campus-search-label { display: block; margin-top: 14px; font-size: 0.78rem; font-weight: 800; color: var(--muted); }
.campus-panel input {
  width: 100%;
  min-height: 46px;
  margin-top: 6px;
  border: 1.5px solid var(--ink);
  border-radius: 12px;
  padding: 0 12px;
  background: var(--paper);
  color: var(--ink);
  font: 600 0.9rem/1.2 Manrope, sans-serif;
}
.campus-options { margin-top: 12px; border-block: 1px solid rgb(23 20 28 / 14%); }
.campus-options li + li { border-top: 1px solid rgb(23 20 28 / 11%); }
.campus-option {
  width: 100%;
  min-height: 58px;
  padding: 9px 2px;
  border: 0;
  background: transparent;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  text-align: left;
  font: inherit;
}
.campus-option strong, .campus-option small { display: block; }
.campus-option strong { font-size: 0.9rem; }
.campus-option small { margin-top: 2px; color: var(--muted); font-size: 0.74rem; }
.campus-option.is-current { cursor: pointer; }
.campus-option:disabled { cursor: not-allowed; opacity: 0.62; }
.campus-state { flex: 0 0 auto; max-width: 8rem; color: var(--muted); font-size: 0.68rem; font-weight: 700; text-align: right; }
.campus-check { display: inline-grid; width: 18px; height: 18px; place-items: center; margin-right: 4px; border-radius: 50%; background: var(--yellow); color: var(--ink); }
.campus-empty { margin-top: 12px; font-weight: 800; }
.campus-request { display: grid; gap: 6px; margin-top: 14px; color: var(--muted); font-size: 0.78rem; font-weight: 700; }
.campus-request button {
  min-height: 42px;
  border: 1.5px solid var(--ink);
  border-radius: 12px;
  background: transparent;
  color: var(--muted);
  font: 700 0.78rem/1.2 Manrope, sans-serif;
  cursor: not-allowed;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 8px;
  padding: 8px 12px;
  text-align: center;
}
.campus-request .soon { white-space: nowrap; }
.actions { display: grid; gap: 10px; margin-top: 10px; }
.spark-wrap { display: flex; border-radius: 18px; cursor: not-allowed; }
.spark-wrap > .btn:disabled { pointer-events: none; }
.spark-wrap .btn { width: 100%; }
.btn {
  min-height: 52px; width: 100%;
  border: 2px solid var(--ink); border-radius: 16px;
  padding: 0 16px; font: 800 1rem/1.1 Manrope, sans-serif;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: transform var(--fast) var(--ease);
}
.btn:disabled, .quiet:disabled { cursor: not-allowed; }
.btn-primary { background: var(--ink); color: var(--paper); }
.btn-secondary { background: transparent; color: var(--ink); }
.soon {
  background: var(--yellow); color: var(--ink); border-radius: 999px;
  font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 7px;
}
.quiet {
  margin-top: 4px; border: 0; background: none; padding: 10px 0;
  min-height: 44px;
  color: var(--muted); font-weight: 700; text-decoration: underline; text-underline-offset: 3px;
}

.band { padding: var(--band) 0; }
.rooms-band { perspective: 1200px; padding-top: clamp(18px, 2.4vw, 28px); padding-bottom: clamp(28px, 3vw, 40px); }
.spaces { display: grid; gap: 18px; }
.spaces li {
  position: relative;
  background: var(--card);
  border-radius: 28px;
  overflow: visible;
  box-shadow: 0 10px 24px rgb(23 20 28 / 8%);
  transform-style: preserve-3d;
  transition: box-shadow var(--std) var(--ease);
}
.room-sketch {
  position: absolute;
  z-index: 3;
  width: 112%;
  height: auto;
  left: -6%;
  top: -5%;
  overflow: visible;
  color: var(--terracotta);
  opacity: 0;
  pointer-events: none;
}
.room-sketch use {
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.room-art {
  position: relative;
  z-index: 1;
  display: block;
  overflow: hidden;
  border-radius: 28px 28px 0 0;
  transform-style: preserve-3d;
  transform: perspective(900px) rotateX(var(--room-rx, 0deg)) rotateY(var(--room-ry, 0deg)) translate3d(0, var(--room-y, 0px), var(--room-z, 0px));
  transform-origin: center 72%;
  transition: transform 420ms cubic-bezier(0.18, 0.82, 0.2, 1), box-shadow 420ms var(--ease);
}
.room-art::before,
.room-art::after {
  content: "";
  position: absolute;
  pointer-events: none;
}
.room-art::before {
  z-index: 2;
  left: 18%;
  right: 18%;
  bottom: 5%;
  height: 12%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgb(23 20 28 / 34%), transparent 70%);
  opacity: var(--room-shadow, 0.34);
  transform: translate3d(var(--room-shadow-x, 0px), 0, 0) scaleX(var(--room-shadow-scale, 1));
  transition: opacity var(--std) var(--ease), transform var(--std) var(--ease);
}
.room-art::after {
  z-index: 3;
  inset: 0;
  background: radial-gradient(240px circle at var(--room-light-x, 70%) var(--room-light-y, 38%), rgb(255 242 170 / 24%), transparent 64%);
  opacity: var(--room-light, 0);
  transition: opacity var(--std) var(--ease);
}
.spaces img { width: 100%; aspect-ratio: 1; object-fit: cover; background: #d5d2cc; display: block; }
.room-door-light {
  position: absolute;
  width: 31%;
  aspect-ratio: 0.78;
  border-radius: 48%;
  background: radial-gradient(ellipse, rgb(255 231 118 / 55%), rgb(245 213 71 / 12%) 48%, transparent 72%);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.82);
  transition: opacity var(--std) var(--ease), transform var(--std) var(--ease);
  pointer-events: none;
}
.spaces li:nth-child(1) .room-door-light { left: 76%; top: 40%; }
.spaces li:nth-child(2) .room-door-light { left: 84%; top: 42%; }
.spaces li:nth-child(3) .room-door-light { left: 43%; top: 69%; width: 25%; }
.spaces li:nth-child(1) { --room-seq: 0ms; }
.spaces li:nth-child(2) { --room-seq: 110ms; }
.spaces li:nth-child(3) { --room-seq: 220ms; }
.spaces h3 { margin: 14px 16px 4px; font-size: 1.7rem; }
.spaces p { margin: 0 16px 16px; font-weight: 600; }
.rooms-band.room-complete .room-sketch { opacity: 0; }
.rooms-band.room-cinematic .spaces li .room-sketch {
  animation: sketch-presence 1320ms var(--room-seq) var(--ease) both;
}
.rooms-band.room-cinematic .spaces li .room-sketch use {
  animation: sketch-draw 1320ms var(--room-seq) var(--ease) both;
}
.rooms-band.room-cinematic .spaces li .room-art {
  animation: room-escape 1080ms calc(170ms + var(--room-seq)) cubic-bezier(0.16, 0.84, 0.2, 1) both;
}
.rooms-band.room-cinematic .spaces li {
  animation: room-card-shadow 1080ms calc(170ms + var(--room-seq)) var(--ease) both;
}

.chat-stage {
  position: relative;
  isolation: isolate;
  width: min(100%, 340px);
  perspective: 780px;
}
/* The opening is its own row so it cannot cross the headline, bubbles, or card. */
.band-chat {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) 20px;
  align-items: start;
  overflow: clip;
  padding-top: clamp(32px, 4vw, 48px);
  padding-bottom: 8px;
}
.band-chat .chat-copy,
.band-chat .calm-wrap {
  width: 100%;
  margin-inline: 0;
}
.chat-copy { grid-column: 2; grid-row: 1; position: relative; z-index: 4; }
.calm-wrap { grid-column: 2; grid-row: 3; position: relative; z-index: 4; }
.chat-emphasis { position: relative; display: inline; }
.chat-emphasis::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: -0.03em;
  right: 0.06em;
  bottom: -0.02em;
  height: 0.12em;
  background: var(--terracotta);
  clip-path: polygon(0 28%, 13% 8%, 31% 32%, 48% 4%, 66% 30%, 84% 10%, 100% 34%, 98% 84%, 81% 64%, 63% 92%, 46% 68%, 27% 94%, 11% 66%, 1% 86%);
  transform: rotate(-0.8deg);
}
.reality-break {
  grid-column: 1 / -1;
  grid-row: 2;
  position: relative;
  z-index: 1;
  height: 196px;
  margin-top: 14px;
  perspective: 900px;
  pointer-events: none;
  overflow: hidden;
}
.break-world,
.break-paper,
.break-lips { position: absolute; inset: 0; }
.break-world {
  z-index: 0;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 46% 62%, rgb(255 214 120 / 75%) 0%, rgb(188 86 48 / 40%) 26%, transparent 54%),
    linear-gradient(180deg, #141218 0%, #2a211f 36%, #6a4334 62%, #1c181e 100%);
}
.break-paper { z-index: 2; }
.break-recess {
  position: absolute;
  z-index: 0;
  inset: 0;
  background:
    linear-gradient(90deg, rgb(8 9 13 / 55%), transparent 18% 82%, rgb(8 9 13 / 58%)),
    linear-gradient(rgb(8 9 13 / 42%), transparent 28% 68%, rgb(8 9 13 / 62%));
  box-shadow: inset 0 28px 26px rgb(8 9 13 / 48%), inset 0 -34px 32px rgb(8 9 13 / 55%);
}
.break-world-glow { position: absolute; z-index: 1; inset: 0; background: radial-gradient(ellipse at 42% 62%, rgb(255 236 170 / 55%), transparent 46%); }
.break-city { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; width: 100%; height: 84%; overflow: hidden; }
.break-city path, .break-city circle { vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.break-city-back { fill: rgb(22 18 24 / 42%); stroke: rgb(255 253 248 / 42%); stroke-width: 2; }
.break-city-detail { fill: none; stroke: rgb(255 253 248 / 55%); stroke-width: 1.7; }
.break-city-light { fill: var(--yellow); stroke: var(--ink); stroke-width: 2; }
.break-marker path { fill: var(--terracotta); stroke: var(--card); stroke-width: 2; }
.break-marker circle { fill: var(--yellow); stroke: none; }
.break-object {
  position: absolute;
  z-index: 3;
  width: 118px;
  left: 46%;
  top: 68%;
  transform: translate3d(-50%, -62%, 0);
  transform-origin: 50% 85%;
}
.break-object svg { position: relative; z-index: 2; display: block; width: 100%; overflow: visible; }
.break-object svg path { stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.break-object-floor { fill: #27232a; }
.break-object-roof { fill: #e6d6c3; }
.break-object-left { fill: #bd6747; }
.break-object-right { fill: #96432e; }
.break-object-window { fill: #89a9c4; }
.break-object-door { fill: var(--yellow); }
.break-object-glow {
  position: absolute;
  z-index: 1;
  width: 80%;
  aspect-ratio: 1;
  right: -16%;
  bottom: -2%;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(255 238 139 / 88%), rgb(245 213 71 / 24%) 38%, transparent 70%);
}
.break-object-shadow {
  position: absolute;
  z-index: 0;
  left: 8%;
  right: 4%;
  bottom: -3%;
  height: 18%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgb(8 9 13 / 78%), transparent 70%);
  transform: translateZ(-10px) scaleX(0.82);
}
.break-paper { background: var(--paper); }
.break-paper-top {
  clip-path: polygon(0 0, 100% 0, 100% 22%, 82% 19.2%, 50% 14%, 18% 19.2%, 0 22%);
}
.break-paper-bottom {
  clip-path: polygon(0 78%, 18% 81.7%, 50% 88%, 82% 81.7%, 100% 78%, 100% 100%, 0 100%);
}
.break-lips { z-index: 4; width: 100%; height: 100%; overflow: visible; }
.bubbles { position: relative; z-index: 4; width: 100%; height: 210px; }
.bubbles p {
  position: absolute;
  background: var(--ink); color: var(--paper);
  border-radius: 16px 16px 16px 4px;
  padding: 10px 12px; font-weight: 700;
  transform: rotate(var(--rest-rotate, 0deg));
}
.bubbles p:nth-child(1) { top: 0; left: 0; --rest-rotate: 0deg; }
.bubbles p:nth-child(2) { top: 48px; left: 42px; }
.bubbles p:nth-child(3) { top: 102px; left: 6px; --rest-rotate: -2deg; }
.bubbles p:nth-child(4) { top: 150px; left: 56px; --rest-rotate: 1.5deg; }
.band-chat.paper-active .break-paper-top { animation: reality-top 1480ms cubic-bezier(0.18, 0.82, 0.2, 1) both; }
.band-chat.paper-active .break-paper-bottom { animation: reality-bottom 1480ms cubic-bezier(0.18, 0.82, 0.2, 1) both; }
.band-chat.paper-active .break-lips { animation: reality-lips 1480ms var(--ease) both; }
.band-chat.paper-active .break-object { animation: break-object-rise 1480ms cubic-bezier(0.18, 0.82, 0.2, 1) both; }
.band-chat.paper-active .break-world-glow { animation: reality-glow 1480ms var(--ease) both; }
html.paper-pending .band-chat:not(.paper-active):not(.paper-complete) .break-paper-top {
  clip-path: polygon(0 0, 100% 0, 100% 62%, 82% 62%, 50% 62%, 18% 62%, 0 62%);
}
html.paper-pending .band-chat:not(.paper-active):not(.paper-complete) .break-paper-bottom {
  clip-path: polygon(0 46%, 18% 46%, 50% 46%, 82% 46%, 100% 46%, 100% 100%, 0 100%);
}
html.paper-pending .band-chat:not(.paper-active):not(.paper-complete) .break-lips,
html.paper-pending .band-chat:not(.paper-active):not(.paper-complete) .break-object { opacity: 0; }
.calm {
  margin-top: 14px; background: var(--card); border-radius: 28px; padding: 22px;
  box-shadow: 0 14px 30px rgb(23 20 28 / 8%);
}
.facts { display: grid; gap: 10px; margin-top: 14px; }
.facts div { display: grid; grid-template-columns: 9.5rem 1fr; gap: 8px; align-items: baseline; }
.facts dt { font-weight: 800; }
.facts dd { margin: 0; color: var(--muted); }
.calm h3 { margin: 12px 0 8px; font-size: 1.8rem; }
.door-lg { width: 36px; height: 48px; }

.lead { font-size: 1.15rem; font-weight: 700; }
.points { margin-top: 16px; display: grid; gap: 8px; font-size: 1.2rem; font-weight: 800; }
.points li { font-weight: 600; }
.owner { overflow: clip; padding-bottom: clamp(20px, 2.6vw, 32px); }
.owner-grid { display: grid; gap: 20px; align-items: center; }
.building {
  position: relative;
  justify-self: center;
  width: min(100%, 620px);
  margin: 0;
  perspective: 1000px;
  isolation: isolate;
}
.building::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 9%;
  right: 5%;
  bottom: -2%;
  height: 15%;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 48% 45%, rgb(23 20 28 / 38%) 0 8%, rgb(23 20 28 / 21%) 30%, transparent 72%),
    radial-gradient(ellipse at 64% 52%, rgb(245 213 71 / 18%), transparent 68%);
  opacity: 0.42;
  transform: scaleX(0.86);
  pointer-events: none;
}
.building-stage {
  position: relative;
  z-index: 1;
  display: block;
  transform-origin: 50% 88%;
  transform-style: preserve-3d;
  transform: perspective(1000px) rotateX(0.45deg) rotateY(-0.8deg);
}
.building img { position: relative; z-index: 1; width: 100%; border-radius: 28px; display: block; box-shadow: 0 18px 34px rgb(23 20 28 / 12%); }
.window-light {
  position: absolute;
  z-index: 2;
  width: 17%;
  aspect-ratio: 0.88;
  border-radius: 36%;
  background: radial-gradient(ellipse, rgb(255 225 132 / 62%), rgb(245 213 71 / 15%) 54%, transparent 72%);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.84);
  pointer-events: none;
}
.window-light-one { left: 77%; top: 25%; }
.window-light-two { left: 77%; top: 46%; }
.window-light-three { left: 77%; top: 67%; }
.student-indicators {
  position: absolute;
  z-index: 4;
  inset: 0;
  pointer-events: none;
}
.student-indicator {
  position: absolute;
  width: 12px;
  height: 28px;
  border-radius: 8px 8px 5px 5px;
  background: var(--ink);
  opacity: 0;
  transform: translateY(8px) scale(0.82);
  box-shadow: 2px 10px 10px rgb(23 20 28 / 24%);
}
.student-indicator::before {
  content: "";
  position: absolute;
  left: 2px;
  top: -8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ink);
}
.student-one { left: 19%; bottom: 14%; }
.student-two { left: 27%; bottom: 10%; width: 10px; height: 24px; background: #496882; }
.student-two::before { width: 7px; height: 7px; background: #496882; }
.student-three { right: 13%; bottom: 13%; width: 11px; height: 25px; background: #c96f49; }
.student-three::before { width: 7px; height: 7px; background: #c96f49; }
.owner-route {
  position: absolute;
  z-index: 3;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  transform: perspective(900px) rotateX(12deg) translate3d(0, 2%, 10px);
  transform-origin: 50% 78%;
}
.route-line {
  fill: none;
  stroke: var(--yellow);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 310;
  stroke-dashoffset: 310;
  vector-effect: non-scaling-stroke;
}
.route-marker {
  fill: var(--yellow);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}
.route-marker circle { fill: var(--ink); }
.scout-figure { position: relative; display: grid; justify-items: center; perspective: 900px; }
.scout-figure::before {
  content: "";
  position: absolute;
  z-index: 0;
  width: 88%;
  height: 74%;
  top: 3%;
  background:
    linear-gradient(90deg, transparent 0 43%, rgb(245 213 71 / 8%) 43% 47%, transparent 47%),
    radial-gradient(ellipse at 52% 30%, rgb(245 213 71 / 25%), transparent 62%);
  -webkit-mask-image: radial-gradient(ellipse, #000 18%, transparent 74%);
  mask-image: radial-gradient(ellipse, #000 18%, transparent 74%);
  transform: perspective(620px) rotateX(4deg) rotateY(-5deg);
  pointer-events: none;
}
.spot {
  position: absolute;
  width: 78%;
  height: 68%;
  top: 1%;
  background: radial-gradient(ellipse at 56% 32%, rgb(245 213 71 / 38%), rgb(245 213 71 / 10%) 40%, transparent 72%);
  pointer-events: none;
}
.scout-figure .ground { bottom: 1%; width: 70%; left: 15%; right: auto; height: 26px; background: radial-gradient(ellipse, rgb(0 0 0 / 72%) 0 8%, rgb(0 0 0 / 34%) 32%, transparent 72%); }

.scout {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #17141c;
  color: var(--paper);
}
.scout::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0 0 auto;
  height: 2px;
  background: linear-gradient(90deg, transparent 8%, rgb(245 213 71 / 58%), transparent 92%);
  transform: scaleX(0);
  transform-origin: center;
}
.scout-depth { position: absolute; z-index: 0; pointer-events: none; opacity: 0; }
.scout-depth-back {
  inset: 0;
  background:
    radial-gradient(circle at 24% 48%, rgb(245 213 71 / 18%), transparent 24%),
    radial-gradient(circle at 78% 30%, rgb(73 104 130 / 34%), transparent 34%),
    linear-gradient(118deg, transparent 42%, rgb(245 213 71 / 6%) 42% 44%, transparent 44%);
}
.scout-depth-mid {
  left: -5%;
  right: -5%;
  bottom: -2%;
  height: 54%;
  background: #1f2934;
  clip-path: polygon(0 62%, 13% 45%, 25% 58%, 38% 32%, 52% 55%, 67% 36%, 82% 59%, 100% 42%, 100% 100%, 0 100%);
  opacity: 0;
}
.scout-depth-front {
  left: -6%;
  right: -6%;
  bottom: -15%;
  height: 38%;
  background: #0d0b11;
  clip-path: polygon(0 44%, 16% 30%, 34% 48%, 52% 22%, 68% 43%, 84% 28%, 100% 46%, 100% 100%, 0 100%);
  opacity: 0;
}
.scout .wrap { position: relative; z-index: 2; }
.scout .lead { color: #e6e1ee; font-weight: 600; }
.scout-grid img { position: relative; width: min(220px, 60vw); margin: 0 auto 8px; display: block; }
.scout .btn { width: auto; min-width: 220px; margin-top: 16px; background: var(--yellow); color: var(--ink); border-color: var(--yellow); }
.scout .soon { background: var(--ink); color: var(--yellow); }
.scout-cta-light { position: relative; display: inline-block; isolation: isolate; }
.scout-cta-light::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 10px -14px -12px;
  border-radius: 24px;
  background: radial-gradient(ellipse, rgb(245 213 71 / 36%), transparent 70%);
  opacity: 0;
  transform: scale(0.88);
  pointer-events: none;
}
.scout.in::before { animation: scout-seam 1200ms var(--ease) both; }
.scout.in .scout-depth-back { animation: scout-world-back 1200ms var(--ease) both; }
.scout.in .scout-depth-mid { animation: scout-world-mid 1200ms 100ms var(--ease) both; }
.scout.in .scout-depth-front { animation: scout-world-front 1200ms 180ms var(--ease) both; }

.foot { padding: 18px 0 32px; color: var(--muted); font-weight: 700; }
.foot-nav { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 0 0 10px; font-size: 0.92rem; }
.foot-nav a { color: var(--muted); font-weight: 700; }

@media (min-width: 740px) {
  .spaces { grid-template-columns: repeat(3, 1fr); align-items: stretch; }
  .spaces h3 { font-size: clamp(1.25rem, 1.6vw, 1.7rem); }
}
@media (min-width: 800px) {
  .band-chat {
    grid-template-columns: minmax(24px, 1fr) minmax(0, 540px) minmax(0, 540px) minmax(24px, 1fr);
    column-gap: 28px;
    align-items: start;
    padding-bottom: 0;
  }
  .chat-copy { grid-column: 2; grid-row: 1; padding-right: 8px; }
  .calm-wrap { grid-column: 3; grid-row: 1; padding-left: 8px; }
  .reality-break { height: 252px; margin-top: 12px; }
  .break-object { width: clamp(148px, 13vw, 188px); left: 42%; top: 70%; }
  .calm { margin-top: 0; }
  .owner-grid { grid-template-columns: minmax(260px, 0.82fr) minmax(420px, 1.18fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
  .scout-grid { display: grid; grid-template-columns: 280px 1fr; gap: 18px; align-items: center; }
  .scout-grid img { width: 260px; margin: 0; }
}

@media (min-width: 980px) {
  .hero { width: min(1180px, calc(100% - 80px)); padding-top: 22px; padding-bottom: 8px; }
  .stage {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(280px, 0.95fr);
    grid-template-areas: "intro figure" "go figure";
    column-gap: 12px;
    align-items: end;
  }
  .intro { grid-area: intro; }
  .go { grid-area: go; }
  .figure { grid-area: figure; margin: 0; justify-self: end; align-self: end; }
  h1 { font-size: clamp(5.4rem, 7.4vw, 7.8rem); }
  .offer { font-size: 1.7rem; max-width: 34rem; }
  .figure img { width: auto; height: min(72vh, 620px); max-width: 100%; }
  .actions { grid-template-columns: auto auto; justify-content: start; }
  .btn, .spark-wrap .btn { width: auto; }
}

@media (hover: hover) and (pointer: fine) {
  .spark-target {
    position: relative;
    isolation: isolate;
    border-radius: 18px;
  }
  .spark-target::before,
  .spark-target::after {
    content: "";
    position: absolute;
    pointer-events: none;
  }
  .spark-target::before {
    z-index: 2;
    inset: -2px;
    border-radius: inherit;
    background: radial-gradient(88px circle at var(--spark-x, 50%) var(--spark-y, 50%), rgb(255 229 91 / 34%), transparent 68%);
    opacity: 0;
    transition: opacity 180ms var(--ease);
  }
  .spark-target::after {
    z-index: 3;
    inset: -3px;
    padding: 2px;
    border-radius: inherit;
    background: conic-gradient(from 0turn, transparent 0 76%, rgb(255 235 125 / 18%) 80%, var(--yellow) 87%, transparent 94%);
    opacity: 0;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
  }
  .spark-target:hover::before { opacity: 1; }
  .spark-target:hover::after { animation: spark-sweep 620ms var(--ease) both; }
  .spark-badge { border-radius: 999px; }
  .btn:not(:disabled):hover { transform: translateY(-1px); }
  .btn:not(:disabled):active { transform: translateY(2px); }
  .spaces li:hover { box-shadow: 0 22px 42px rgb(23 20 28 / 15%); }
  .spaces li:hover .room-art { box-shadow: 0 18px 34px rgb(23 20 28 / 16%); }
  .spaces li:hover .room-door-light { opacity: 0.72; transform: translate(-50%, -50%) scale(1.06); }
}

.will-rise { opacity: 0; transform: translateY(14px); }
.will-rise.in {
  opacity: 1;
  transform: none;
  transition: opacity 700ms var(--ease), transform 700ms var(--ease);
  transition-delay: var(--d, 0ms);
}
.building.in::before { animation: building-shadow 2200ms var(--ease) both; }
.building.in .building-stage { animation: building-enter 2200ms cubic-bezier(0.16, 0.84, 0.2, 1) both; }
.building.in .window-light { animation: window-on 700ms 620ms var(--ease) both; }
.building.in .window-light-two { animation-delay: 820ms; }
.building.in .window-light-three { animation-delay: 1020ms; }
.building.in .student-indicator { animation: student-arrive 620ms 1180ms var(--ease) both; }
.building.in .student-two { animation-delay: 1320ms; }
.building.in .student-three { animation-delay: 1460ms; }
.building.in .route-line { animation: route-travel 780ms 1440ms var(--ease) both; }
.building.in .route-marker { animation: marker-land 560ms 1880ms cubic-bezier(0.18, 0.82, 0.2, 1) both; }
.scout.in .spot { animation: scout-spot 1100ms 180ms var(--ease) both; }
.scout.in .scout-figure img { animation: scout-character 1100ms 120ms cubic-bezier(0.16, 0.84, 0.2, 1) both; }
.scout.in .scout-cta-light::before { animation: scout-cta 1000ms 420ms var(--ease) both; }

@media (min-width: 800px) {
  .mascot-rise { --jump-y: -18px; --jump-z: 28px; --jump-scale: 1.035; }
}
@media (min-width: 1100px) {
  .mascot-rise { --jump-y: -26px; --jump-z: 48px; --jump-scale: 1.05; }
}
@keyframes mascot-greet {
  0% { transform: translate3d(0, 6px, -28px) rotateX(2.5deg) scale(0.97); animation-timing-function: ease-in; }
  16.5% { transform: translate3d(0, 12px, -18px) rotateX(4.5deg) scale(0.985, 0.95); animation-timing-function: cubic-bezier(0.16, 0.84, 0.28, 1); }
  40% { transform: translate3d(0, var(--jump-y), var(--jump-z)) rotateX(-4.5deg) rotateZ(-1deg) scale(var(--jump-scale)); animation-timing-function: cubic-bezier(0.2, 0.7, 0.25, 1); }
  47% { transform: translate3d(0, calc(var(--jump-y) * 0.28), calc(var(--jump-z) * 0.4)) rotateX(-1.5deg) rotateZ(0.5deg) scale(1.015); animation-timing-function: cubic-bezier(0.4, 0, 0.7, 0.4); }
  62% { transform: translate3d(0, 5px, 6px) rotateX(2.2deg) scale(1.015, 0.955); animation-timing-function: cubic-bezier(0.16, 0.8, 0.24, 1); }
  72% { transform: translate3d(0, -3px, 8px) rotateX(-0.6deg) scale(1.008); animation-timing-function: ease-out; }
  78% { transform: none; animation-timing-function: ease-in-out; }
  90% { transform: translate3d(0, -1px, 12px) rotateX(-2.8deg) rotateZ(1deg) scale(1.01); animation-timing-function: ease-out; }
  100% { transform: none; }
}
@keyframes mascot-live {
  0%, 100% { transform: translateY(0) rotate(0deg) scale(1); }
  16% { transform: translateY(-4px) rotate(-0.8deg) scale(1.006, 0.996); }
  34% { transform: translateY(-1px) rotate(0.85deg) scale(0.997, 1.005); }
  52% { transform: translateY(-5px) rotate(-0.35deg) scale(1.004, 0.998); }
  68% { transform: translateY(-1px) rotate(0.25deg) scale(1); }
  80% { transform: translateY(1px) rotate(1deg) scale(1.002, 0.992); }
  88% { transform: translateY(-2px) rotate(-0.7deg) scale(1.008, 0.994); }
  95% { transform: translateY(0) rotate(0.15deg) scale(1); }
}
@keyframes mascot-ground {
  0%, 16% { transform: scaleX(0.78) scaleY(0.86); opacity: 0.62; }
  40% { transform: scaleX(0.52) scaleY(0.7); opacity: 0.32; }
  47% { transform: scaleX(0.7); opacity: 0.48; }
  62% { transform: scaleX(1.16) scaleY(1); opacity: 0.92; }
  72% { transform: scaleX(0.94); opacity: 0.72; }
  90% { transform: scaleX(0.9); opacity: 0.64; }
  100% { transform: none; opacity: 1; }
}
@keyframes mascot-ground-live {
  0%, 100% { transform: none; opacity: 1; }
  16% { transform: scaleX(0.94); opacity: 0.84; }
  34% { transform: scaleX(1.03); opacity: 0.96; }
  52% { transform: scaleX(0.92); opacity: 0.8; }
  80% { transform: scaleX(1.05); opacity: 1; }
  88% { transform: scaleX(0.96); opacity: 0.86; }
}
@keyframes campus-panel-in {
  from { opacity: 0; transform: translateY(-5px) scale(0.97); }
  to { opacity: 1; transform: none; }
}
@keyframes spark-sweep {
  0% { opacity: 0; transform: rotate(-0.16turn); }
  18% { opacity: 1; }
  75% { opacity: 0.9; }
  100% { opacity: 0; transform: rotate(0.84turn); }
}
@keyframes room-escape {
  0%, 12% { transform: perspective(900px) rotateX(0deg) rotateY(0deg) translate3d(0, 0, 0) scale(1); box-shadow: 0 0 0 rgb(23 20 28 / 0%); }
  44% { transform: perspective(900px) rotateX(1.35deg) rotateY(-0.9deg) translate3d(0, -29px, 74px) scale(1.042); box-shadow: 0 34px 52px rgb(23 20 28 / 24%); }
  70% { transform: perspective(900px) rotateX(-0.35deg) rotateY(0.3deg) translate3d(0, -9px, 20px) scale(1.014); box-shadow: 0 20px 36px rgb(23 20 28 / 15%); }
  100% { transform: perspective(900px) rotateX(0deg) rotateY(0deg) translate3d(0, 0, 0) scale(1); box-shadow: 0 0 0 rgb(23 20 28 / 0%); }
}
@keyframes room-card-shadow {
  0%, 100% { box-shadow: 0 10px 24px rgb(23 20 28 / 8%); }
  44% { box-shadow: 0 34px 58px rgb(23 20 28 / 20%); }
}
@keyframes sketch-presence {
  0% { opacity: 0.08; transform: scale(0.97) rotate(-0.6deg); }
  18%, 36% { opacity: 0.92; transform: scale(1.015) rotate(0.3deg); }
  58% { opacity: 0.62; transform: scale(1.035) rotate(-0.2deg); }
  82% { opacity: 0.14; transform: scale(1.01); }
  100% { opacity: 0.06; transform: none; }
}
@keyframes sketch-draw {
  0% { stroke-dasharray: 760; stroke-dashoffset: 760; }
  28%, 68% { stroke-dasharray: 760; stroke-dashoffset: 0; }
  100% { stroke-dasharray: 760; stroke-dashoffset: -760; }
}
@keyframes reality-top {
  0%, 10% { clip-path: polygon(0 0, 100% 0, 100% 62%, 82% 62%, 50% 62%, 18% 62%, 0 62%); }
  100% { clip-path: polygon(0 0, 100% 0, 100% 22%, 82% 19.2%, 50% 14%, 18% 19.2%, 0 22%); }
}
@keyframes reality-bottom {
  0%, 10% { clip-path: polygon(0 46%, 18% 46%, 50% 46%, 82% 46%, 100% 46%, 100% 100%, 0 100%); }
  100% { clip-path: polygon(0 78%, 18% 81.7%, 50% 88%, 82% 81.7%, 100% 78%, 100% 100%, 0 100%); }
}
@keyframes reality-lips {
  0%, 28% { opacity: 0; }
  52%, 100% { opacity: 1; }
}
@keyframes reality-glow {
  0%, 22% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes break-object-rise {
  0%, 24% { opacity: 0; transform: translate3d(-50%, -30%, 0) scale(0.9); }
  100% { opacity: 1; transform: translate3d(-50%, -62%, 0) scale(1); }
}
@keyframes window-on {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.84); }
  to { opacity: 0.7; transform: translate(-50%, -50%) scale(1); }
}
@keyframes building-enter {
  0% { opacity: 0; transform: perspective(1000px) translate3d(24px, 34px, -70px) rotateX(8deg) rotateY(-7deg) scale(0.94); }
  48% { opacity: 1; transform: perspective(1000px) translate3d(-4px, -7px, 22px) rotateX(-1.2deg) rotateY(1.4deg) scale(1.012); }
  72% { transform: perspective(1000px) translate3d(0, -2px, 5px) rotateX(0.4deg) rotateY(-0.4deg) scale(1.003); }
  100% { opacity: 1; transform: perspective(1000px) rotateX(0.45deg) rotateY(-0.8deg); }
}
@keyframes building-shadow {
  0% { opacity: 0; transform: translateX(24px) scaleX(0.54); }
  52% { opacity: 0.36; transform: translateX(-3px) scaleX(1.04); }
  100% { opacity: 0.42; transform: none; }
}
@keyframes student-arrive {
  from { opacity: 0; transform: translateY(9px) scale(0.76); }
  to { opacity: 0.78; transform: translateY(0) scale(1); }
}
@keyframes route-travel {
  from { stroke-dashoffset: 310; opacity: 0.2; }
  to { stroke-dashoffset: 0; opacity: 1; }
}
@keyframes marker-land {
  0% { opacity: 0; transform: translateY(-14px) scale(0.55); }
  64% { opacity: 1; transform: translateY(1px) scale(1.04); }
  100% { opacity: 1; transform: none; }
}
@keyframes scout-spot {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes scout-character {
  from { opacity: 0; transform: translate3d(-14px, 24px, -30px) rotateY(4deg) scale(0.96); }
  58% { opacity: 1; transform: translate3d(3px, -5px, 16px) rotateY(-1deg) scale(1.012); }
  to { opacity: 1; transform: none; }
}
@keyframes scout-cta {
  0% { opacity: 0; transform: scale(0.88); }
  55% { opacity: 1; transform: scale(1.04); }
  100% { opacity: 0.54; transform: scale(1); }
}
@keyframes scout-seam {
  from { transform: scaleX(0); opacity: 0; }
  to { transform: scaleX(1); opacity: 1; }
}
@keyframes scout-world-back {
  from { opacity: 0; transform: scale(1.08); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes scout-world-mid {
  from { opacity: 0; transform: translateY(36px) scale(1.05); }
  to { opacity: 0.54; transform: none; }
}
@keyframes scout-world-front {
  from { opacity: 0; transform: translateY(46px) scale(1.08); }
  to { opacity: 0.9; transform: none; }
}

@media (max-width: 799px) {
  .break-city-back { opacity: 0.45; }
  .break-marker { display: none; }
  .rooms-band.room-cinematic .spaces li:nth-child(2) .room-art,
  .rooms-band.room-cinematic .spaces li:nth-child(2),
  .rooms-band.room-cinematic .spaces li:nth-child(2) .room-sketch,
  .rooms-band.room-cinematic .spaces li:nth-child(2) .room-sketch use,
  .rooms-band.room-cinematic .spaces li:nth-child(3) .room-art,
  .rooms-band.room-cinematic .spaces li:nth-child(3),
  .rooms-band.room-cinematic .spaces li:nth-child(3) .room-sketch,
  .rooms-band.room-cinematic .spaces li:nth-child(3) .room-sketch use { animation: none; }
  .rooms-band.room-cinematic .spaces li:nth-child(1) .room-sketch { animation: sketch-presence 1200ms var(--ease) both; }
  .rooms-band.room-cinematic .spaces li:nth-child(1) .room-sketch use { animation: sketch-draw 1200ms var(--ease) both; }
  .rooms-band.room-cinematic .spaces li:nth-child(1) .room-art { animation: room-escape-mobile 1050ms 120ms cubic-bezier(0.16, 0.84, 0.2, 1) both; }
  .rooms-band.room-cinematic .spaces li:nth-child(1) { animation: room-card-shadow 1050ms 120ms var(--ease) both; }
}
@media (max-width: 620px) {
  .daydream { inset: -20vmax; }
  .daydream-field { opacity: 0.34; }
  .room-sketch { width: 108%; left: -4%; top: -3%; }
  .reality-break { height: 180px; }
  .break-object { width: 92px; left: 42%; }
  .facts div { grid-template-columns: 7.8rem 1fr; }
  .student-indicator { transform: scale(0.82); }
  .route-line { stroke-width: 5; }
}
@keyframes room-escape-mobile {
  0%, 12% { transform: perspective(900px) translate3d(0, 0, 0) scale(1); }
  46% { transform: perspective(900px) translate3d(0, -16px, 34px) scale(1.025); box-shadow: 0 24px 38px rgb(23 20 28 / 18%); }
  72% { transform: perspective(900px) translate3d(0, -5px, 10px) scale(1.008); }
  100% { transform: perspective(900px) translate3d(0, 0, 0) scale(1); box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .daydream { transform: none; transition: none; }
  .daydream-field, .daydream-shadow { transition: none; }
  .tilt, .scout-figure img,
  .mascot-rise, .mascot-idle, .ground-pad { animation: none; }
  .will-rise, .will-rise.in { opacity: 1; transform: none; transition: none; }
  .spaces li:hover, .spaces li:hover img, .btn:active { transform: none; }
  .door-glow,
  .figure::before,
  .figure::after,
  .light-spill,
  .room-door-light,
  .window-light,
  .scout-cta-light::before { display: none; }
  .band-chat.paper-active .bubbles p,
  .band-chat.paper-active .calm,
  .scout.in .spot { animation: none; }
  .room-sketch, .room-sketch use,
  .band-chat.paper-active .break-paper-top,
  .band-chat.paper-active .break-paper-bottom,
  .band-chat.paper-active .break-lips,
  .band-chat.paper-active .break-object,
  .band-chat.paper-active .break-world-glow { animation: none !important; }
  .bubbles p { transform: rotate(var(--rest-rotate, 0deg)); }
}

html.is-low-power .rooms-band.room-cinematic .room-art,
html.is-low-power .rooms-band.room-cinematic .spaces li,
html.is-low-power .building.in::before,
html.is-low-power .building.in .building-stage,
html.is-low-power .building.in .window-light,
html.is-low-power .building.in .student-indicator,
html.is-low-power .building.in .route-line,
html.is-low-power .building.in .route-marker,
html.is-low-power .scout.in .scout-depth,
html.is-low-power .scout.in .scout-figure img,
html.is-low-power .scout.in::before,
html.is-low-power .scout.in .spot,
html.is-low-power .scout.in .scout-cta-light::before,
html.is-low-power .mascot-rise,
html.is-low-power .mascot-idle,
html.is-low-power .ground-pad {
  animation: none;
}