:root {
  --ink: #08090b;
  --graphite: #17191c;
  --glass: #30383d;
  --gold: #d7b57c;
  --highlight: #f2dcb1;
  --warm: #eacb91;
  --ivory: #f5f1e9;
  --muted: #ada69a;
  --parallax-x: 0px;
  --parallax-y: 0px;
  color-scheme: dark;
  font-family: Manrope, Inter, Arial, sans-serif;
}
* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  min-height: 100%;
  background: var(--ink);
  color: var(--ivory);
  overflow: hidden;
}
button,
a {
  font: inherit;
}
.experience {
  position: relative;
  width: 100vw;
  height: 100svh;
  min-height: 620px;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 70% 50%, rgba(145,112,64,.15), transparent 45%),
    linear-gradient(118deg, #060707 0%, #0b0c0c 55%, #11110f 100%);
}
.experience:after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.24;
  background-image: linear-gradient(
    rgba(255, 255, 255, 0.015) 1px,
    transparent 1px
  );
  background-size: 100% 4px;
}
.topbar {
  position: absolute;
  z-index: 20;
  left: 4vw;
  right: 4vw;
  top: 28px;
  height: 46px;
  display: flex;
  align-items: center;
  gap: 34px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.brand {
  display: flex;
  align-items: baseline;
  gap: 8px;
  color: var(--ivory);
  text-decoration: none;
  letter-spacing: -0.06em;
}
.brand b {
  font-size: 19px;
}
.brand span {
  font-size: 10px;
  color: var(--gold);
  letter-spacing: 0.16em;
}
.event {
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--muted);
}
.event i {
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 12px var(--gold);
}
.progress {
  margin-left: auto;
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.progress b {
  font-size: 19px;
  color: var(--gold);
}
.progress span {
  font-size: 10px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.copy {
  position: absolute;
  z-index: 10;
  left: 5.5vw;
  top: 16%;
  width: 35vw;
  max-width: 520px;
}
.eyebrow {
  margin: 0 0 22px;
  color: var(--gold);
  font-size: 10px;
  letter-spacing: 0.24em;
}
.copy h1 {
  margin: 0;
  font-size: clamp(54px, 6.25vw, 106px);
  line-height: 0.77;
  letter-spacing: -0.075em;
  font-weight: 820;
  color: #fffdf8;
  text-shadow: 0 12px 45px rgba(0,0,0,.55);
}
.copy h1 span {
  font-weight: 820;
  color: #fffdf8;
}
.copy h1 em {
  font-style: normal;
  color: #f4d898;
  text-shadow: 0 0 30px rgba(226, 180, 99, 0.42);
}
.intro,
.floor-story p {
  max-width: 390px;
  margin: 28px 0 25px;
  color: #d7d4cd;
  font-size: 15px;
  line-height: 1.65;
}
.actions {
  display: flex;
  align-items: center;
  gap: 13px;
}
.actions button,
.scene-controls button {
  border: 0;
  cursor: pointer;
}
.primary {
  min-height: 52px;
  padding: 0 22px;
  background: linear-gradient(
    115deg,
    #94714a,
    #d7b57c 38%,
    #f2dcb1 52%,
    #bd975e 72%,
    #8f6a41
  );
  color: #17120d;
  font-weight: 760;
}
.primary span {
  margin-left: 20px;
}
.secondary {
  min-height: 52px;
  padding: 0 18px;
  color: var(--ivory);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
}
.hint {
  margin-top: 18px;
  font-size: 11px;
  color: #b8b4ab;
  letter-spacing: 0.05em;
}
.floor-story {
  padding-top: 2vh;
}
.floor-story span {
  font-size: 11px;
  color: var(--gold);
  letter-spacing: 0.2em;
}
.floor-story h2 {
  font-size: clamp(30px, 3vw, 50px);
  line-height: 0.98;
  margin: 14px 0 0;
  letter-spacing: -0.04em;
}
.story-lead { margin:12px 0 16px; }
.diagnostic { width:min(430px, 100%); }
.diagnostic-grid { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.diagnostic label { position:relative; display:flex; flex-direction:column; gap:6px; color:#aaa49a; font-size:9px; letter-spacing:.08em; text-transform:uppercase; }
.diagnostic input { width:100%; height:42px; padding:0 34px 0 12px; border:1px solid rgba(215,181,124,.24); border-radius:0; outline:none; color:#fff9ed; background:rgba(19,20,19,.88); font-size:15px; }
.diagnostic input:focus { border-color:#d7b57c; box-shadow:0 0 0 2px rgba(215,181,124,.1); }
.diagnostic label i { position:absolute; right:11px; bottom:13px; color:#9e8a67; font-style:normal; }
.calculate { min-height:43px; margin-top:11px; padding:0 15px; border:1px solid rgba(215,181,124,.55); color:#f2dcb1; background:rgba(33,29,22,.92); cursor:pointer; font-weight:700; }
.calculate span { margin-left:18px; }
.form-error { min-height:14px; margin:7px 0 0; color:#ed8c85; font-size:11px; }
.result { width:min(430px,100%); padding:14px 0 0; border-top:1px solid rgba(215,181,124,.24); }
.result small { color:#b59c72; font-size:8px; letter-spacing:.15em; }
.result > div { display:flex; align-items:center; gap:12px; margin-top:10px; }
.result strong { min-width:115px; color:#f2dcb1; font-size:27px; letter-spacing:-.04em; }
.result span { color:#aaa49a; font-size:10px; line-height:1.3; text-transform:uppercase; }
.result > p,.result details { margin:9px 0 0; color:#bdb7ad; font-size:10px; line-height:1.4; }
.result summary { color:#d7b57c; cursor:pointer; }
.power-action { background:linear-gradient(115deg,#94714a,#d7b57c 42%,#f2dcb1 58%,#8f6a41); color:#17120d; }
.stage {
  position: absolute;
  z-index: 3;
  left: 39vw;
  right: 0;
  top: 8%;
  bottom: 5%;
  perspective: 1300px;
}
.camera {
  position: absolute;
  width: min(61vw, 860px);
  height: min(82vh, 800px);
  left: 50%;
  top: 50%;
  transform: translate(
      calc(-50% + var(--parallax-x)),
      calc(-50% + var(--parallax-y))
    )
    rotateX(1deg) rotateY(-5deg);
  transform-style: preserve-3d;
  transition:
    transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1),
    filter 0.8s;
}
.school {
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(34px 38px 48px rgba(0, 0, 0, 0.78)) drop-shadow(0 0 34px rgba(231, 201, 135, 0.2));
}
.ambient {
  position: absolute;
  border-radius: 50%;
  filter: blur(58px);
  opacity: 0.34;
}
.ambient-a {
  width: 420px;
  height: 420px;
  right: 13%;
  top: 15%;
  background: #f0c979;
  opacity: .34;
}
.ambient-b {
  width: 360px;
  height: 300px;
  left: 20%;
  bottom: 7%;
  background: #7493a0;
  opacity: .46;
}
.ground-shadow {
  fill: rgba(0, 0, 0, 0.66);
}
.ground {
  fill: #17191a;
  stroke: #a78a5c;
  stroke-width: 1.4;
}
.rear-side { fill:#171611; stroke:#8e744a; stroke-width:1.2; }
.roof {
  fill: url(#metal);
  stroke: #e8d6b5;
  stroke-width: 3.2;
  filter: drop-shadow(0 0 9px rgba(239,205,140,.34));
}
.roof-line {
  fill: none;
  stroke: #ead19f;
  stroke-opacity: 0.78;
  stroke-width: 2.6;
}
.ground-orbit { fill:none; stroke:#8e744a; stroke-width:1; opacity:.35; }
.orbit-b { opacity:.18; }
.floor {
  cursor: pointer;
  outline: none;
}
.floor-hit {
  fill: transparent;
  stroke: transparent;
  stroke-width: 2;
  transition:
    fill 0.25s,
    stroke 0.25s;
}
.floor:hover .floor-hit,
.floor:focus .floor-hit {
  fill: rgba(215, 181, 124, 0.055);
  stroke: rgba(215, 181, 124, 0.5);
}
.floor-face { fill:#171816; stroke:#745f3d; stroke-width:1.4; }
.floor-side { fill:#252219; stroke:#a28450; stroke-width:1.2; }
.slab { fill:#332e22; stroke:#b28f58; stroke-width:1.4; filter:drop-shadow(0 4px 5px rgba(0,0,0,.72)); }
.slab-top { fill:url(#metal); opacity:.75; }
.slab-bottom { fill:#211e17; }
.window { fill:#080d0e; stroke:#2e322f; stroke-width:1; }
.window.lit { fill:#6c624b; filter:drop-shadow(0 0 5px rgba(220,188,122,.2)); }
.floor-tag text {
  fill: #b99a61;
  text-anchor: middle;
  font-size: 15px;
  font-weight: 600;
}
.floor-tag .floor-title {
  text-anchor: start;
  font-size: 9px;
  letter-spacing: 0.13em;
  fill: #fff7e7;
  font-weight: 800;
  filter: drop-shadow(0 2px 3px #000);
}
.floor-title { fill:#88795f; font-size:8px; letter-spacing:.12em; opacity:0; transition:opacity .25s; }
.floor:hover .floor-title,.floor:focus .floor-title { opacity:1; }
.room-life {
  stroke: #f6f4e8;
  stroke-width: 1.8;
  fill: none;
  opacity: 1;
}
.person,
.seat {
  fill: #f0d9aa;
  stroke: none;
}
.person.child {
  fill: #cbdade;
}
.desk,
.reception,
.info-desk {
  stroke: #a2aaad;
}
.board {
  fill: #263239;
  stroke: #d4e1e4;
}
.screen-line {
  stroke: #ffe0a1;
  stroke-width: 2;
}
.empty {
  fill: none;
  stroke: #b5aa96;
}
.path-light,
.power-line {
  fill: none;
  stroke: #e3c58d;
  stroke-width: 2;
  opacity: 0.22;
}
.lead-dot {
  fill: #d7b57c;
  stroke: none;
  animation: pulse 3s infinite;
}
.d2 {
  animation-delay: 0.7s;
}
.d3 {
  animation-delay: 1.4s;
}
.reference-card { position:absolute; z-index:5; left:55%; top:12%; width:230px; min-height:132px; padding:20px 22px; pointer-events:none; background:rgba(22,22,20,.94); border:1px solid rgba(177,143,87,.16); box-shadow:0 20px 50px rgba(0,0,0,.46); color:#d7d0c2; }
.reference-card small { display:block; color:#777064; font-size:8px; letter-spacing:.13em; margin-bottom:10px; }
.reference-card strong { display:block; font-size:14px; letter-spacing:.03em; }
.reference-card strong span { color:#d7b57c; }
.reference-card p { margin:12px 0 0; font-size:9px; line-height:1.45; color:#8f897e; }
.power-line {
  transition: opacity 0.5s;
}
.building-label {
  position: absolute;
  right: 3%;
  bottom: 2%;
  font-size: 9px;
  letter-spacing: 0.22em;
  color: #6f706f;
}
.building-label span {
  display: block;
  margin-top: 5px;
  color: #b29a70;
}
.scene-controls {
  position: absolute;
  z-index: 8;
  right: 4vw;
  bottom: 7%;
  display: flex;
  gap: 2px;
}
.scene-controls button {
  padding: 9px 12px;
  background: rgba(13, 15, 17, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #d0ccc3;
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.scene-controls button.active {
  color: var(--gold);
  border-color: rgba(215, 181, 124, 0.5);
}
.statusbar {
  position: absolute;
  z-index: 20;
  bottom: 0;
  left: 0;
  right: 0;
  height: 39px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 4vw;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(6, 7, 8, 0.7);
  font-size: 9px;
  color: #aaa79f;
  letter-spacing: 0.13em;
}
.statusbar b {
  color: #b5a07c;
}
.skip {
  position: absolute;
  z-index: 30;
  right: 4vw;
  top: 90px;
  border: 0;
  background: transparent;
  color: #777;
  font-size: 10px;
  cursor: pointer;
}
.reveal {
  position: absolute;
  z-index: 40;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  pointer-events: none;
  background: #060708;
  transition: opacity 0.45s 0.9s;
}
.reveal i {
  display: block;
  width: 7%;
  height: 0;
  margin: 0 1px;
  background: linear-gradient(#111, #d7b57c 45%, #181818);
  box-shadow: 0 0 30px rgba(215, 181, 124, 0.2);
  transition: height 0.65s;
}
.reveal i:nth-child(1) {
  transition-delay: 0.05s;
}
.reveal i:nth-child(2) {
  transition-delay: 0.15s;
}
.reveal i:nth-child(3) {
  transition-delay: 0.25s;
}
.reveal i:nth-child(4) {
  transition-delay: 0.35s;
}
.reveal i:nth-child(5) {
  transition-delay: 0.45s;
}
.reveal i:nth-child(6) {
  transition-delay: 0.55s;
}
.experience:not(.intro-done) .reveal i {
  height: 58%;
}
.intro-done .reveal {
  opacity: 0;
}
.intro-done .reveal i {
  height: 0;
}
.experience[data-mode="focus"] .camera,
.experience[data-mode="power"] .camera {
  transform: translate(-43%, -42%) scale(1.7) rotateX(0) rotateY(-2deg);
}

/* Reference-matched hero: the whole architectural object stays visible. */
@media (min-width: 801px) {
  .experience {
    background:
      radial-gradient(ellipse at 76% 52%, rgba(184,139,72,.16), transparent 37%),
      linear-gradient(112deg, #070809 0%, #0a0b0c 58%, #101111 100%);
  }
  .copy {
    left: 8.7vw;
    top: 34%;
    width: 31vw;
    max-width: 470px;
  }
  .eyebrow { margin-bottom: 18px; }
  .copy h1 {
    font-size: clamp(48px, 4.15vw, 70px);
    line-height: .94;
    letter-spacing: -.065em;
  }
  .copy h1 em { color: #f0d29a; }
  .intro { max-width: 410px; margin: 22px 0 24px; font-size: 14px; }
  .stage {
    left: 48vw;
    right: 2vw;
    top: 14%;
    bottom: 8%;
  }
  .camera {
    width: min(43vw, 650px);
    height: min(70vh, 650px);
    transform: translate(calc(-50% + var(--parallax-x)), calc(-50% + var(--parallax-y))) rotateX(1deg) rotateY(-4deg);
  }
  .school {
    filter: drop-shadow(22px 30px 38px rgba(0,0,0,.82)) drop-shadow(0 0 24px rgba(224,185,112,.17));
  }
  .scene-controls { right: 3vw; bottom: 5%; }
}
.experience[data-mode="focus"] .floor:not([data-floor="2"]),
.experience[data-mode="power"] .floor:not([data-floor="2"]) {
  opacity: 0.14;
  transition: opacity 0.6s;
}
.experience[data-mode="focus"] .floor[data-floor="2"] .floor-hit {
  fill: rgba(215, 181, 124, 0.08);
  stroke: rgba(215, 181, 124, 0.65);
}
.is-powered .floor[data-floor="2"] .floor-face { fill:#3b3221; }
.is-powered .floor[data-floor="2"] .window { fill:#b1935c; filter:drop-shadow(0 0 8px rgba(220,184,111,.55)); }
.is-powered .floor[data-floor="2"] .power-line {
  opacity: 1;
  filter: url(#warmGlow);
  stroke-width: 3;
}
.is-powered .floor[data-floor="2"] .room-life {
  stroke: #f2dcb1;
  opacity: 1;
}
.experience[data-mode="power"] .floor[data-floor="2"] {
  filter: url(#warmGlow);
}
@keyframes pulse {
  0%,
  60%,
  100% {
    opacity: 0.25;
  }
  20% {
    opacity: 1;
  }
}
@media (max-width: 800px) {
  .experience {
    min-height: 560px;
  }
  .topbar {
    left: 18px;
    right: 18px;
    top: 13px;
    height: 38px;
  }
  .event {
    display: none;
  }
  .brand b {
    font-size: 15px;
  }
  .progress span {
    display: none;
  }
  .copy {
    left: 20px;
    right: 20px;
    top: 62px;
    width: auto;
    max-width: none;
  }
  .eyebrow {
    font-size: 8px;
    margin-bottom: 9px;
  }
  .copy h1 {
    font-size: clamp(36px, 10.8vw, 50px);
    line-height: 0.84;
    width: 52%;
  }
  .intro {
    position: absolute;
    left: 56%;
    top: 25px;
    width: 43%;
    font-size: 11px;
    line-height: 1.45;
    margin: 0;
  }
  .actions {
    margin-top: 12px;
  }
  .primary,
  .secondary {
    min-height: 44px;
    padding: 0 14px;
    font-size: 12px;
  }
  .hint {
    display: none;
  }
  .stage {
    left: 0;
    right: 0;
    top: 27%;
    bottom: 48px;
  }
  .camera {
    width: min(101vw, 550px);
    height: 67vh;
    max-height: 590px;
  }
  .school {
    filter: drop-shadow(16px 18px 24px rgba(0, 0, 0, 0.8));
  }
  .scene-controls {
    right: 14px;
    bottom: 5px;
  }
  .scene-controls button {
    padding: 8px 7px;
    font-size: 8px;
  }
  .building-label {
    display: none;
  }
  .statusbar {
    padding: 0 16px;
  }
  .statusbar span:first-child {
    display: none;
  }
  .skip {
    display: none;
  }
  .reference-card {
    left: auto;
    right: 10px;
    top: 3%;
    width: 176px;
    min-height: 104px;
    padding: 14px 15px;
  }
  .reference-card strong { font-size: 11px; }
  .reference-card p { margin-top: 8px; font-size: 8px; }
  .floor-story {
    padding: 0;
    width: 100%;
  }
  .floor-story h2 {
    font-size: 26px;
  }
  .floor-story p {
    font-size: 11px;
    line-height: 1.4;
    margin: 8px 0;
  }
  .experience[data-mode="focus"] .copy,
  .experience[data-mode="power"] .copy { top:58px; right:16px; }
  .experience[data-mode="focus"] .floor-story,
  .experience[data-mode="power"] .floor-story { width:52%; padding:8px 10px 10px; background:rgba(8,9,11,.84); backdrop-filter:blur(8px); }
  .experience[data-mode="focus"] .floor-story h2,
  .experience[data-mode="power"] .floor-story h2 { font-size:20px; }
  .experience[data-mode="focus"] .story-lead,
  .experience[data-mode="power"] .story-lead { display:none; }
  .diagnostic-grid { grid-template-columns:1fr; gap:5px; }
  .diagnostic label { gap:3px; font-size:7px; }
  .diagnostic input { height:34px; font-size:13px; }
  .diagnostic label i { bottom:10px; }
  .calculate { width:100%; min-height:38px; padding:0 8px; font-size:10px; }
  .result { padding-top:8px; }
  .result > div { margin-top:6px; gap:7px; }
  .result strong { min-width:82px; font-size:20px; }
  .result span { font-size:8px; }
  .result > p,.result details { font-size:8px; }
  .experience[data-mode="focus"] .camera,
  .experience[data-mode="power"] .camera {
    transform: translate(-50%, -28%) scale(1.58);
  }
  .experience[data-mode="focus"] .stage,
  .experience[data-mode="power"] .stage {
    top: 24%;
  }
  .experience[data-mode="focus"] .actions {
    position: fixed;
    z-index: 30;
    left: 16px;
    bottom: 48px;
  }
  .experience[data-mode="power"] .actions {
    position: fixed;
    z-index: 30;
    left: 16px;
    bottom: 48px;
  }
}
@media (max-width: 390px) {
  .copy h1 {
    font-size: 36px;
  }
  .camera {
    height: 64vh;
  }
  .statusbar span:last-child {
    font-size: 7px;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *:before,
  *:after {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }
  .reveal {
    display: none;
  }
  .camera {
    transform: translate(-50%, -50%) !important;
  }
}

/* Gate 3 — unique living-floor scenes and the 3/6 architectural unlock. */
.floor.is-complete .floor-face { fill:#403521; }
.floor.is-complete .window { fill:#d3aa63; stroke:#f4d89f; filter:drop-shadow(0 0 9px rgba(242,202,126,.75)); }
.floor.is-complete .power-line { opacity:1; stroke-width:3; filter:url(#warmGlow); }
.floor.power-flash { animation:floorPower 1.2s ease both; }
@keyframes floorPower { 0%{filter:brightness(1)} 45%{filter:brightness(2.4) drop-shadow(0 0 24px #d7b57c)} 100%{filter:brightness(1)} }

.mission-layer,.vault-layer { position:absolute; z-index:60; inset:0; display:grid; grid-template-columns:54% 46%; background:radial-gradient(circle at 25% 45%,rgba(215,181,124,.16),transparent 32%),rgba(6,7,8,.96); backdrop-filter:blur(16px); }
.mission-layer[hidden],.vault-layer[hidden] { display:none; }
.mission-close { position:absolute; z-index:3; right:34px; top:28px; width:48px; height:48px; border:1px solid rgba(242,220,177,.38); border-radius:50%; color:#f5f1e9; background:rgba(18,18,17,.75); font-size:28px; cursor:pointer; }
.mission-visual { position:relative; min-height:100%; overflow:hidden; border-right:1px solid rgba(215,181,124,.18); background:linear-gradient(140deg,#101416,#08090a 65%); }
.mission-orbit { position:absolute; width:65%; aspect-ratio:1; left:17%; top:18%; border:1px solid rgba(215,181,124,.3); border-radius:50%; box-shadow:0 0 90px rgba(215,181,124,.14),inset 0 0 80px rgba(215,181,124,.08); animation:orbitSpin 18s linear infinite; }
.mission-orbit:before,.mission-orbit:after { content:""; position:absolute; inset:8%; border:1px dashed rgba(215,181,124,.17); border-radius:50%; }
.mission-orbit:after { inset:25%; border-style:solid; }
@keyframes orbitSpin { to{transform:rotate(360deg)} }
.mission-number { position:absolute; left:7%; bottom:5%; color:rgba(242,220,177,.08); font:900 clamp(170px,24vw,390px)/.8 Unbounded,sans-serif; letter-spacing:-.12em; }
.mission-vignette { position:absolute; left:50%; top:50%; width:min(46vw,760px); aspect-ratio:16/10; transform:translate(-50%,-50%); overflow:hidden; border:1px solid rgba(242,220,177,.48); background:#0b0c0d; box-shadow:0 35px 100px #000,0 0 65px rgba(215,181,124,.2),inset 0 0 0 1px rgba(255,255,255,.05); }
.mission-vignette:before { content:""; position:absolute; z-index:3; inset:18px; border:1px solid rgba(245,241,233,.17); pointer-events:none; }
.mission-vignette:after { content:""; position:absolute; z-index:3; left:18px; top:18px; width:72px; height:2px; background:#f0ce8c; box-shadow:0 0 18px #d7b57c; }
.mission-vignette img { width:100%; height:100%; display:block; object-fit:cover; animation:missionImageIn 1.2s cubic-bezier(.2,.75,.2,1) both,missionImageFloat 12s 1.2s ease-in-out infinite alternate; }
.mission-image-shade { position:absolute; z-index:1; inset:0; background:linear-gradient(180deg,rgba(4,5,6,.05),transparent 55%,rgba(3,3,3,.46)),radial-gradient(circle at 50% 45%,transparent 35%,rgba(0,0,0,.38) 100%); pointer-events:none; }
.mission-image-scan { position:absolute; z-index:2; left:0; right:0; top:-25%; height:22%; background:linear-gradient(transparent,rgba(242,220,177,.12),transparent); mix-blend-mode:screen; animation:missionScan 5s ease-in-out infinite; pointer-events:none; }
@keyframes missionImageIn { from{opacity:0;transform:scale(1.08)} to{opacity:1;transform:scale(1)} }
@keyframes missionImageFloat { to{transform:scale(1.035)} }
@keyframes missionScan { 0%,18%{transform:translateY(0);opacity:0} 45%{opacity:.7} 75%,100%{transform:translateY(600%);opacity:0} }
.lead { position:absolute; width:13px; height:13px; border-radius:50%; background:#f2dcb1; box-shadow:0 0 20px #d7b57c; animation:leadTravel 2.8s ease-in-out infinite; }
.lead.l1{left:44px;top:62px}.lead.l2{left:75px;top:120px;animation-delay:.5s}.lead.l3{left:46px;top:185px;animation-delay:1s}
.route { position:absolute; left:58px; top:62px; width:215px; height:126px; border-right:2px solid #d7b57c; border-top:2px solid #d7b57c; transform:skewY(22deg); opacity:.6; }
.desk-shape,.teacher-shape { position:absolute; right:54px; bottom:42px; width:72px; height:82px; border:2px solid #f2dcb1; border-radius:40px 40px 3px 3px; box-shadow:0 0 25px rgba(215,181,124,.45); }
@keyframes leadTravel { 50%{transform:translateX(210px);opacity:1} }
.book { position:absolute; bottom:48px; width:62px; height:92px; border:1px solid #e9ce96; background:linear-gradient(90deg,#735631,#d7b57c,#4d3824); box-shadow:0 0 28px rgba(215,181,124,.3); animation:bookFloat 3s ease-in-out infinite; }
.book.b1{left:56px}.book.b2{left:139px;height:116px;animation-delay:.4s}.book.b3{left:222px;height:78px;animation-delay:.8s}
.method-line { position:absolute; left:65px; right:65px; top:60px; height:2px; background:#f2dcb1; box-shadow:0 0 18px #d7b57c; }
.teacher-shape { right:30px; bottom:115px; width:42px; height:54px; }
@keyframes bookFloat { 50%{transform:translateY(-10px);filter:brightness(1.35)} }
.mission-content { align-self:center; padding:7vw 8vw 6vw 5vw; }
.mission-kicker { color:#d7b57c; font-size:11px; letter-spacing:.22em; }
.mission-content h2 { margin:22px 0; color:#fffdf8; font:800 clamp(42px,4.3vw,72px)/.92 Unbounded,sans-serif; letter-spacing:-.07em; }
.mission-content h2 em { color:#f0cf8f; font-style:normal; text-shadow:0 0 34px rgba(215,181,124,.32); }
.missionText { max-width:590px; color:#c8c2b8; font-size:18px; line-height:1.6; }
.mission-questions { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:30px 0 20px; }
.mission-questions label { display:flex; flex-direction:column; gap:10px; color:#aaa296; font-size:12px; letter-spacing:.05em; }
.mission-questions input,.mission-questions select { width:100%; height:64px; padding:0 20px; border:1px solid rgba(215,181,124,.38); color:#fff8e9; background:#151615; font:700 19px Onest,sans-serif; }
.mission-action,.vault-copy button { min-width:310px; min-height:68px; padding:0 25px; border:1px solid #f1d69d; color:#17120d; background:linear-gradient(115deg,#94714a,#d7b57c 38%,#f2dcb1 52%,#bd975e 72%,#8f6a41); box-shadow:0 12px 38px rgba(215,181,124,.25); font:800 16px Unbounded,sans-serif; cursor:pointer; }
.mission-action span,.vault-copy button span { margin-left:28px; }
.mission-insight { margin:28px 0; padding:26px; border-left:3px solid #d7b57c; background:rgba(215,181,124,.07); }
.mission-insight small { color:#ad956c; letter-spacing:.18em; }
.mission-insight strong { display:block; margin:10px 0; color:#f4d898; font-size:25px; }
.mission-insight p { color:#d1cbc1; font-size:16px; line-height:1.5; }

.vault-layer { grid-template-columns:58% 42%; background:radial-gradient(circle at 37% 48%,rgba(215,181,124,.22),transparent 33%),#070808; }
.vault-rays { position:absolute; left:12%; top:10%; width:50%; height:80%; }
.vault-rays i { position:absolute; left:50%; bottom:50%; width:2px; height:58%; transform-origin:bottom; background:linear-gradient(transparent,#f2dcb1); box-shadow:0 0 20px #d7b57c; }
.vault-rays i:nth-child(1){transform:rotate(-45deg)}.vault-rays i:nth-child(2){transform:rotate(0)}.vault-rays i:nth-child(3){transform:rotate(45deg)}
.vault-door { align-self:center; justify-self:center; display:flex; flex-direction:column; align-items:center; justify-content:center; width:min(38vw,520px); aspect-ratio:.78; border:3px solid #d7b57c; background:linear-gradient(135deg,#29251e,#0d0f10 60%,#514129); box-shadow:0 0 0 14px #111,0 0 0 15px #725b38,0 40px 100px #000,0 0 70px rgba(215,181,124,.28); clip-path:polygon(8% 0,92% 0,100% 8%,100% 92%,92% 100%,8% 100%,0 92%,0 8%); }
.vault-door span { color:#9d855d; font:600 18px Unbounded,sans-serif; letter-spacing:.4em; }
.vault-door b { color:#f5dfae; font:900 clamp(56px,6.5vw,104px)/1 Unbounded,sans-serif; letter-spacing:-.08em; text-shadow:0 0 35px rgba(215,181,124,.48); }
.vault-door small { margin-top:24px; color:#b9aa8e; letter-spacing:.2em; }
.vault-copy { align-self:center; padding-right:7vw; }
.vault-copy>p { color:#d7b57c; font-size:11px; letter-spacing:.22em; }
.vault-copy h2 { margin:18px 0 28px; font:900 clamp(55px,6vw,96px)/.86 Unbounded,sans-serif; letter-spacing:-.08em; }
.vault-copy h2 em { color:#f1d18f; font-style:normal; }
.vault-copy>div { max-width:480px; margin-bottom:30px; color:#c7c0b5; font-size:18px; line-height:1.6; }

@media(max-width:800px){
  .mission-layer,.vault-layer{grid-template-columns:1fr;grid-template-rows:38% 62%;overflow:auto}.mission-close{right:14px;top:12px;width:40px;height:40px}.mission-visual{min-height:0;border-right:0;border-bottom:1px solid rgba(215,181,124,.18)}.mission-vignette{width:88vw;max-width:560px}.mission-vignette:before{inset:9px}.mission-vignette:after{left:9px;top:9px}.mission-orbit{width:54%;left:23%;top:5%}.mission-number{font-size:110px}.mission-content{align-self:start;padding:24px 20px 50px}.mission-kicker{font-size:8px}.mission-content h2{margin:12px 0;font-size:32px}.missionText{font-size:13px;line-height:1.45}.mission-questions{margin:18px 0 14px;gap:8px}.mission-questions label{font-size:9px}.mission-questions input,.mission-questions select{height:48px;padding:0 10px;font-size:14px}.mission-action{min-width:0;width:100%;min-height:58px;font-size:12px}.mission-insight{margin:15px 0;padding:16px}.mission-insight strong{font-size:18px}.mission-insight p{font-size:12px}.vault-layer{grid-template-rows:56% 44%}.vault-rays{left:5%;top:0;width:90%;height:56%}.vault-door{width:58vw;max-width:250px}.vault-door b{font-size:45px}.vault-door span{font-size:10px}.vault-door small{font-size:7px}.vault-copy{padding:10px 22px 40px;text-align:center}.vault-copy h2{margin:8px 0 14px;font-size:43px}.vault-copy>div{margin-bottom:16px;font-size:12px}.vault-copy button{min-width:0;width:100%;min-height:55px;font-size:11px}.book{transform:scale(.72);transform-origin:bottom}.lead{transform:scale(.8)}
}

/* Gate 2 art direction — the diagnostic is a cinematic control console. */
.story-kicker { display:flex; align-items:center; gap:12px; margin-bottom:17px; color:var(--gold); font-size:9px; letter-spacing:.2em; }
.experience[data-mode="focus"] .copy > h1,.experience[data-mode="power"] .copy > h1 { display:none; }
.story-kicker i { width:42px; height:1px; background:linear-gradient(90deg,var(--gold),transparent); }
.story-kicker b { color:#777168; font-size:8px; font-weight:600; }
.floor-story h2 em { color:#efd197; font-style:normal; font-weight:700; }
.diagnostic { position:relative; width:min(490px,100%); padding:20px; border:1px solid rgba(215,181,124,.22); background:linear-gradient(145deg,rgba(28,27,24,.94),rgba(10,11,12,.88)); box-shadow:0 26px 80px rgba(0,0,0,.5),inset 0 1px rgba(255,255,255,.04); backdrop-filter:blur(18px); }
.diagnostic:before { content:""; position:absolute; left:-1px; top:20px; width:2px; height:42px; background:linear-gradient(var(--highlight),var(--gold)); box-shadow:0 0 18px rgba(215,181,124,.7); }
.diagnostic-head { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:16px; }
.diagnostic-head b { color:#f6f1e8; font-size:13px; letter-spacing:.01em; }
.diagnostic-head small { color:#777168; font-size:8px; letter-spacing:.1em; text-transform:uppercase; }
.diagnostic-grid { gap:10px 12px; }
.diagnostic label { gap:7px; }
.diagnostic label > span { color:#9e978d; font-size:9px; letter-spacing:.12em; text-transform:uppercase; }
.field { position:relative; }
.diagnostic input { height:50px; padding:0 55px 0 15px; border:1px solid rgba(255,255,255,.1); border-radius:2px; background:linear-gradient(180deg,rgba(32,34,34,.9),rgba(18,19,19,.94)); font-size:19px; font-weight:650; color:#fffaf0; transition:border-color .2s,box-shadow .2s,background .2s; }
.diagnostic input:hover { border-color:rgba(215,181,124,.36); }
.diagnostic input:focus { border-color:#d7b57c; background:#171713; box-shadow:0 0 0 3px rgba(215,181,124,.08),0 0 24px rgba(215,181,124,.08); }
.diagnostic .field i { position:absolute; right:13px; bottom:17px; color:#8e846f; font-size:10px; letter-spacing:.05em; }
.calculate { width:100%; min-height:50px; display:flex; align-items:center; justify-content:space-between; margin-top:4px; padding:0 17px; border:1px solid rgba(215,181,124,.65); background:linear-gradient(100deg,rgba(75,58,35,.74),rgba(35,29,21,.94)); color:#f4deaf; font-size:11px; letter-spacing:.1em; text-transform:uppercase; transition:transform .2s,filter .2s,background .2s; }
.calculate:hover { transform:translateY(-1px); filter:brightness(1.13); background:linear-gradient(100deg,rgba(109,83,48,.8),rgba(44,34,23,.96)); }
.calculate span,.calculate b { margin:0; }
.calculate b { font-size:18px; font-weight:400; }
.form-error { margin:8px 0 3px; }
.result { width:min(490px,100%); padding:18px 20px 20px; border:1px solid rgba(215,181,124,.25); background:linear-gradient(145deg,rgba(31,28,22,.96),rgba(10,11,12,.94)); box-shadow:0 25px 80px rgba(0,0,0,.55),inset 0 1px rgba(255,255,255,.04); backdrop-filter:blur(18px); }
.result-heading { display:flex!important; justify-content:space-between; margin:0 0 14px!important; }
.result-heading small { color:#d7b57c; }
.result-heading b { color:#6f6a61; font-size:8px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; }
.result-grid { display:grid!important; grid-template-columns:.8fr 1.4fr; gap:1px!important; margin:0!important; background:rgba(215,181,124,.16); }
.result-grid > div { display:block; padding:16px; background:#111210; }
.result-grid .result-accent { background:linear-gradient(135deg,#3d3020,#17140f); }
.result-grid strong { display:block; min-width:0; margin-bottom:8px; font-size:29px; white-space:nowrap; }
.result-grid span { display:block; }
.result details { padding:10px 0; border-bottom:1px solid rgba(255,255,255,.07); }
.result details p { color:#8f897e; line-height:1.55; }
.next-step { display:grid; grid-template-columns:30px 90px 1fr; align-items:start; gap:8px; padding:11px 0 2px; }
.next-step span { color:#d7b57c; font-size:9px; }
.next-step b { color:#eee6d9; font-size:9px; text-transform:uppercase; }
.power-action { margin-top:12px; background:linear-gradient(115deg,#94714a,#d7b57c 40%,#f2dcb1 58%,#9a754a); color:#17120d; box-shadow:0 10px 32px rgba(183,139,74,.22); }

/* Gate 2 typography pass — one strong centered visual axis. */
body,button,input { font-family:Manrope,Inter,Arial,sans-serif; }
.diagnostic,.result { width:min(560px,100%); text-align:center; }
.diagnostic { padding:27px 28px 28px; }
.diagnostic:before { top:27px; height:52px; }
.diagnostic-head { display:block; margin-bottom:23px; text-align:center; }
.diagnostic-head b { display:block; font-size:20px; font-weight:800; letter-spacing:-.025em; }
.diagnostic-head small { display:block; margin-top:7px; font-size:10px; line-height:1.4; letter-spacing:.13em; }
.diagnostic-grid { gap:14px; }
.diagnostic label { align-items:stretch; gap:9px; text-align:center; }
.diagnostic label > span { font-size:10px; font-weight:700; letter-spacing:.1em; }
.diagnostic input { height:60px; padding:0 48px; text-align:center; font-size:27px; font-weight:800; letter-spacing:-.035em; }
.diagnostic .field i { right:16px; bottom:20px; font-size:11px; font-weight:700; }
.calculate { min-height:66px; justify-content:center; margin-top:10px; padding:0 58px; font-size:17px; font-weight:800; line-height:1.15; letter-spacing:-.015em; text-align:center; text-transform:none; }
.calculate span { width:100%; color:inherit; font-size:inherit; font-weight:inherit; letter-spacing:inherit; text-align:center; }
.calculate b { position:absolute; right:25px; font-size:24px; }
.calculate { position:relative; }
.form-error { text-align:center; font-size:12px; }
.result { padding:25px 28px 28px; }
.result-heading { display:block!important; text-align:center; }
.result-heading small { display:block; font-size:11px; font-weight:800; }
.result-heading b { display:block; margin-top:6px; font-size:9px; }
.result-grid { grid-template-columns:1fr 1.35fr; }
.result-grid > div { display:flex; min-height:124px; flex-direction:column; align-items:center; justify-content:center; padding:18px; text-align:center; }
.result-grid strong { font-size:34px; font-weight:800; }
.result-grid span { font-size:11px; line-height:1.45; text-align:center; }
.result details,.result details p { text-align:center; }
.next-step { display:flex; flex-wrap:wrap; justify-content:center; gap:7px 11px; padding:15px 12px 5px; text-align:center; font-size:12px!important; }
.next-step span,.next-step b { font-size:10px; }

@media (min-width:801px) {
  .experience[data-mode="focus"] .copy,.experience[data-mode="power"] .copy { left:5vw; top:11%; width:43vw; max-width:620px; }
  .experience[data-mode="focus"] .eyebrow,.experience[data-mode="power"] .eyebrow { display:none; }
  .experience[data-mode="focus"] .stage,.experience[data-mode="power"] .stage { left:51vw; top:10%; bottom:5%; }
  .experience[data-mode="focus"] .camera,.experience[data-mode="power"] .camera { width:min(47vw,720px); height:min(76vh,720px); transform:translate(-42%,-40%) scale(1.58) rotateX(0) rotateY(-2deg); }
  .experience[data-mode="focus"] .reference-card,.experience[data-mode="power"] .reference-card { opacity:0; }
  .experience[data-mode="focus"] .copy:after,.experience[data-mode="power"] .copy:after { content:"02"; position:absolute; z-index:-1; right:-25px; top:-80px; color:rgba(215,181,124,.035); font-size:240px; font-weight:850; letter-spacing:-.1em; }
  .floor-story h2 { font-size:clamp(43px,3.7vw,64px); margin-top:0; line-height:.92; font-weight:800; }
  .story-lead { max-width:540px; margin:15px auto 20px; font-size:14px; line-height:1.55; }
  .experience[data-mode="focus"] .actions,.experience[data-mode="power"] .actions { position:absolute; left:570px; bottom:0; }
  .experience[data-mode="focus"] .actions .secondary,.experience[data-mode="power"] .actions .secondary { min-height:42px; font-size:10px; }
}

@media (max-width:800px) {
  .experience[data-mode="focus"],.experience[data-mode="power"] { overflow-y:auto; }
  .experience[data-mode="focus"] .copy,.experience[data-mode="power"] .copy { left:14px; right:14px; top:62px; bottom:52px; overflow-y:auto; padding-bottom:180px; scrollbar-width:none; }
  .experience[data-mode="focus"] .floor-story,.experience[data-mode="power"] .floor-story { width:100%; padding:0; background:none; backdrop-filter:none; }
  .story-kicker { margin-bottom:10px; }
  .floor-story h2,.experience[data-mode="focus"] .floor-story h2,.experience[data-mode="power"] .floor-story h2 { width:70%; font-size:30px; line-height:.92; }
  .story-lead,.experience[data-mode="focus"] .story-lead,.experience[data-mode="power"] .story-lead { display:block; width:70%; font-size:10px; }
  .diagnostic,.result { width:100%; margin-top:135px; padding:21px 16px 22px; background:linear-gradient(145deg,rgba(27,26,23,.98),rgba(8,9,10,.98)); }
  .diagnostic-grid { grid-template-columns:1fr 1fr; gap:9px; }
  .diagnostic-head { align-items:start; }
  .diagnostic-head small { max-width:120px; text-align:right; line-height:1.3; }
  .diagnostic-head b { font-size:18px; }
  .diagnostic label > span { font-size:9px; }
  .diagnostic input { height:55px; padding:0 38px; font-size:23px; }
  .diagnostic .field i { right:10px; bottom:18px; }
  .calculate { min-height:62px; padding:0 42px 0 20px; font-size:16px; }
  .calculate b { right:17px; }
  .result-grid { grid-template-columns:1fr 1.45fr; }
  .result-grid > div { padding:13px 10px; }
  .result-grid strong { font-size:25px; }
  .result-grid span { font-size:9px; }
  .experience[data-mode="focus"] .stage,.experience[data-mode="power"] .stage { top:18%; bottom:auto; height:330px; left:22%; pointer-events:none; opacity:.7; }
  .experience[data-mode="focus"] .camera,.experience[data-mode="power"] .camera { width:440px; height:440px; transform:translate(-50%,-31%) scale(1.25); }
  .experience[data-mode="focus"] .reference-card,.experience[data-mode="power"] .reference-card,.experience[data-mode="focus"] .scene-controls,.experience[data-mode="power"] .scene-controls { display:none; }
  .experience[data-mode="focus"] .actions,.experience[data-mode="power"] .actions { position:fixed; left:auto; right:14px; bottom:46px; }
  .experience[data-mode="focus"] .secondary,.experience[data-mode="power"] .secondary { min-height:38px; padding:0 10px; background:rgba(8,9,10,.86); font-size:9px; }
}

/* Reference floor 02 — a real CSS 3D room, independent camera and commercial result. */
.sales-layer{position:absolute;z-index:80;inset:0;display:grid;grid-template-columns:minmax(0,1.55fr) minmax(390px,.75fr);padding-top:72px;background:radial-gradient(circle at 31% 42%,rgba(101,124,126,.18),transparent 31%),radial-gradient(circle at 65% 56%,rgba(214,165,82,.13),transparent 34%),#060708;opacity:0;transform:scale(1.025);transition:opacity .45s,transform .8s cubic-bezier(.2,.8,.2,1)}
.sales-layer[hidden]{display:none}.sales-layer.is-open{opacity:1;transform:none}.sales-head{position:absolute;z-index:9;left:0;right:0;top:0;height:72px;display:flex;align-items:center;padding:0 30px;border-bottom:1px solid rgba(215,181,124,.18);background:rgba(7,8,9,.76);backdrop-filter:blur(18px)}
.sales-head>div:first-child{display:flex;align-items:baseline;gap:13px}.sales-head small{color:#d7b57c;font:700 10px Unbounded,sans-serif;letter-spacing:.18em}.sales-head b{font:700 13px Unbounded,sans-serif;letter-spacing:.05em}.sales-step{margin-left:auto;margin-right:78px;display:flex;align-items:center;gap:12px;color:#9e978d;font-size:9px;letter-spacing:.15em}.sales-step i{width:7px;height:7px;border-radius:50%;background:#d7b57c;box-shadow:0 0 16px #d7b57c;animation:pulse 2s infinite}.sales-head button{position:absolute;right:24px;width:42px;height:42px;border:1px solid rgba(215,181,124,.35);border-radius:50%;color:#fff;background:#171715;font-size:25px;cursor:pointer}
.sales-world{position:relative;min-width:0;overflow:hidden;perspective:1200px;background:linear-gradient(145deg,#111517,#070809 72%)}.sales-world:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,transparent 72%,rgba(4,5,6,.7)),radial-gradient(circle at center,transparent 42%,rgba(0,0,0,.43))}
.room-camera{position:absolute;left:50%;top:49%;width:760px;height:540px;transform-style:preserve-3d;transform:translate(-54%,-48%) rotateX(-4deg) rotateY(12deg) scale(.72);opacity:.2;transition:transform 1.35s cubic-bezier(.16,.82,.22,1),opacity .7s}.is-open .room-camera{transform:translate(-54%,-48%) rotateX(-4deg) rotateY(4deg) scale(1);opacity:1}.room3d{position:absolute;inset:0;transform-style:preserve-3d;filter:drop-shadow(0 45px 55px #000)}
.room-plane{position:absolute;transform-style:preserve-3d;backface-visibility:hidden}.room-back{left:30px;top:20px;width:700px;height:390px;transform:translateZ(-170px);border:1px solid #4c4b44;background:linear-gradient(135deg,rgba(255,255,255,.04),transparent 42%),linear-gradient(#282b2b,#111314);box-shadow:inset 0 0 90px #050606}.room-floor{left:30px;top:410px;width:700px;height:390px;transform-origin:top;transform:translateZ(-170px) rotateX(78deg);background:repeating-linear-gradient(90deg,transparent 0 99px,rgba(215,181,124,.15) 100px),repeating-linear-gradient(0deg,#171a1a 0 74px,#2a2925 75px);border:1px solid #7c6747}.room-floor span{position:absolute;width:6px;height:6px;border-radius:50%;background:#d7b57c;box-shadow:0 0 15px #d7b57c}.room-floor span:nth-child(1){left:15%;top:22%}.room-floor span:nth-child(2){left:48%;top:60%}.room-floor span:nth-child(3){left:78%;top:34%}.room-floor span:nth-child(4){left:64%;top:82%}
.room-left{left:30px;top:20px;width:340px;height:390px;transform-origin:left;transform:translateZ(-170px) rotateY(82deg);background:linear-gradient(90deg,#0b0e10,#293238);border:1px solid #576269}.room-right{right:30px;top:20px;width:340px;height:390px;transform-origin:right;transform:translateZ(-170px) rotateY(-82deg);background:linear-gradient(-90deg,#0b0e10,#292824);border:1px solid #655943}.window-glow{position:absolute;inset:45px 70px;background:linear-gradient(135deg,#91aeb7,#263a42 55%,#d7b57c);box-shadow:0 0 45px rgba(155,196,205,.35);opacity:.7}.room-logo{position:absolute;left:40px;top:32px;color:#d7b57c;font:800 17px Unbounded,sans-serif;letter-spacing:-.07em}.room-logo small{display:block;margin-top:6px;color:#74716b;font:600 7px Onest,sans-serif;letter-spacing:.22em}.smart-board{position:absolute;left:205px;top:55px;width:305px;height:150px;display:flex;flex-direction:column;align-items:center;justify-content:center;border:6px solid #202221;background:radial-gradient(circle,#29383a,#0a0d0e);box-shadow:0 0 0 1px #7d725e,0 0 40px rgba(215,181,124,.17)}.smart-board i{width:42%;height:2px;background:#d7b57c;box-shadow:0 0 12px #d7b57c}.smart-board b{margin-top:20px;color:#f0d498;font:700 16px Unbounded,sans-serif}.smart-board span{margin-top:8px;color:#829093;font-size:9px;letter-spacing:.2em}.wall-light{position:absolute;top:235px;width:120px;height:100px;background:radial-gradient(circle,rgba(242,220,177,.27),transparent 66%)}.light-a{left:100px}.light-b{right:70px}.shelf{position:absolute;left:55px;top:75px;width:210px;height:240px;border:2px solid #706348}.shelf i{display:block;height:33.333%;border-bottom:1px solid #6e5d3f;background:linear-gradient(90deg,transparent,#4d402e 45%,transparent)}
.trial-table{position:absolute;left:245px;top:290px;width:310px;height:180px;transform-style:preserve-3d;transform:translateZ(40px)}.table-top{position:absolute;width:100%;height:135px;transform:rotateX(69deg);background:linear-gradient(135deg,#bea36f,#4f4534);border:2px solid #ead7ae;box-shadow:0 25px 35px #000}.table-leg{position:absolute;top:80px;width:18px;height:100px;background:#6b604d}.leg-a{left:35px}.leg-b{right:35px}
.room-object{position:absolute;z-index:5;border:0;color:#e9dfcf;background:transparent;cursor:pointer;transform-style:preserve-3d}.room-object>span{position:absolute;left:50%;bottom:-31px;min-width:150px;transform:translateX(-50%);padding:7px 10px;border:1px solid rgba(215,181,124,.34);background:rgba(8,9,9,.84);font-size:8px;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}.person-head{position:absolute;left:50%;top:0;width:34px;height:34px;transform:translateX(-50%);border-radius:50%;background:linear-gradient(135deg,#e6c99b,#795f43);box-shadow:0 0 18px rgba(215,181,124,.3)}.person-body{position:absolute;left:50%;top:31px;width:65px;height:98px;transform:translateX(-50%);border-radius:30px 30px 8px 8px;background:linear-gradient(135deg,#536368,#171c1f);border:1px solid #89989a}.client-object{left:150px;top:255px;width:90px;height:140px;transform:translateZ(60px)}.admin-object{right:110px;top:242px;width:90px;height:140px;transform:translateZ(42px)}.admin-object .person-body{background:linear-gradient(135deg,#9c7b4c,#302619)}.crm-object{left:335px;top:218px;width:155px;height:105px;transform:translateZ(85px)}.monitor-screen{display:flex;width:155px;height:95px;flex-direction:column;align-items:center;justify-content:center;border:7px solid #292b29;background:#111819;box-shadow:0 0 0 1px #80745e,0 0 25px rgba(215,181,124,.15)}.monitor-screen b{color:#f1d397;font-size:9px;letter-spacing:.08em}.monitor-screen em{margin-top:8px;color:#8c9290;font-size:7px;font-style:normal}.room-object:after{content:"";position:absolute;inset:-12px;border:1px solid rgba(215,181,124,.0);border-radius:50%;transition:.3s}.room-object:hover:after,.room-object.is-seen:after{border-color:#d7b57c;box-shadow:0 0 25px rgba(215,181,124,.28)}.room-object.is-seen>span{color:#16110c;background:#d7b57c}.route-beam{position:absolute;left:225px;top:325px;width:350px;height:3px;transform:translateZ(65px) rotate(-4deg);background:linear-gradient(90deg,transparent,#d7b57c,transparent);box-shadow:0 0 15px #d7b57c;animation:routeFlow 2.7s infinite}.route-beam i{position:absolute;width:11px;height:11px;top:-4px;border-radius:50%;background:#fff0c9;box-shadow:0 0 19px #d7b57c;animation:routeDot 2.7s infinite}@keyframes routeDot{to{transform:translateX(340px)}}@keyframes routeFlow{50%{filter:brightness(1.8)}}.room-pulse{position:absolute;width:150px;height:150px;border:1px solid rgba(215,181,124,.3);border-radius:50%;animation:roomPulse 3s infinite}.pulse-a{left:120px;top:235px}.pulse-b{right:70px;top:220px;animation-delay:1s}@keyframes roomPulse{to{transform:scale(1.45);opacity:0}}
.object-note{position:absolute;z-index:5;left:28px;bottom:28px;width:300px;padding:18px 20px;border-left:2px solid #d7b57c;background:rgba(8,9,9,.82);backdrop-filter:blur(12px)}.object-note small{color:#8d826f;font-size:7px;letter-spacing:.18em}.object-note b{display:block;margin:7px 0;color:#f1dfbc;font-size:14px}.object-note p{margin:0;color:#aaa49b;font-size:10px;line-height:1.45}.object-note span{display:block;margin-top:9px;color:#d7b57c;font-size:8px;letter-spacing:.13em}
.sales-console{position:relative;z-index:4;overflow-y:auto;padding:5vh 3.2vw 5vh;border-left:1px solid rgba(215,181,124,.18);background:linear-gradient(155deg,rgba(27,26,23,.97),rgba(8,9,10,.99));box-shadow:-30px 0 70px rgba(0,0,0,.45)}.console-intro>p,.sales-offer>p{margin:0 0 13px;color:#d7b57c;font-size:9px;letter-spacing:.18em}.console-intro h2{margin:0;color:#fffaf0;font:800 clamp(30px,2.6vw,46px)/.96 Unbounded,sans-serif;letter-spacing:-.065em}.console-intro h2 em{color:#edce91;font-style:normal}.console-intro>span{display:block;margin:17px 0 24px;color:#aaa49a;font-size:12px;line-height:1.5}.sales-calc{display:grid;grid-template-columns:1fr 1fr;gap:12px}.sales-calc label>span{display:block;margin-bottom:7px;color:#918a7e;font-size:8px;letter-spacing:.1em;text-transform:uppercase}.sales-calc label>div{position:relative}.sales-calc input{width:100%;height:54px;padding:0 39px 0 13px;border:1px solid rgba(215,181,124,.25);outline:0;color:#fff8e9;background:#151716;font-size:20px;font-weight:800}.sales-calc input:focus{border-color:#d7b57c;box-shadow:0 0 0 3px rgba(215,181,124,.08)}.sales-calc label i{position:absolute;right:12px;top:19px;color:#8f8067;font-size:9px;font-style:normal}.sales-error{grid-column:1/-1;min-height:12px;margin:0;color:#e78d83;font-size:10px}.sales-calc>button,.sales-power{grid-column:1/-1;min-height:59px;border:1px solid #ddbf86;color:#17120d;background:linear-gradient(115deg,#94714a,#d7b57c 40%,#f2dcb1 58%,#9a754a);font-weight:800;cursor:pointer}.sales-calc>button b,.sales-power b{margin-left:22px}.sales-offer{animation:offerIn .6s ease both}@keyframes offerIn{from{opacity:0;transform:translateY(18px)}}.offer-metrics{display:grid;grid-template-columns:1fr 1.4fr;border:1px solid rgba(215,181,124,.25)}.offer-metrics>div{display:flex;min-height:82px;flex-direction:column;align-items:center;justify-content:center;background:#111310}.offer-metrics>div+div{border-left:1px solid rgba(215,181,124,.25);background:linear-gradient(145deg,#42331f,#17140f)}.offer-metrics b{color:#f1d397;font-size:26px}.offer-metrics span{margin-top:4px;color:#9c9589;font-size:8px;letter-spacing:.12em;text-transform:uppercase}.sales-offer details{padding:12px 0;color:#968b79;font-size:10px;line-height:1.5}.sales-offer summary{color:#d7b57c;cursor:pointer}.commercial-card{padding:19px;border:1px solid rgba(215,181,124,.31);background:linear-gradient(145deg,rgba(215,181,124,.08),rgba(255,255,255,.015))}.commercial-card small{color:#d7b57c;font-size:8px;letter-spacing:.16em}.commercial-card h3{margin:9px 0 12px;color:#fff7e8;font:700 20px/1.05 Unbounded,sans-serif;letter-spacing:-.04em}.commercial-card ul{margin:0 0 14px;padding-left:17px;color:#bcb5a9;font-size:10px;line-height:1.7}.offer-pending{display:flex;justify-content:space-between;padding:8px 0;border-top:1px solid rgba(255,255,255,.07);font-size:9px}.offer-pending span{color:#8f897e}.offer-pending b{color:#e9cd95;font-size:9px;letter-spacing:.1em}.commercial-card button{width:100%;height:38px;margin-top:8px;border:1px solid #46423b;color:#777169;background:#161716;font-size:9px}.sales-power{width:100%;margin-top:13px}.sales-layer.is-powered .room3d{filter:drop-shadow(0 45px 55px #000) brightness(1.45)}.sales-layer.is-powered .sales-world{box-shadow:inset 0 0 120px rgba(215,181,124,.35)}
@media(max-width:800px){.sales-layer{display:block;overflow-y:auto;padding-top:60px}.sales-head{position:fixed;height:60px;padding:0 14px}.sales-head b{font-size:10px}.sales-step{display:none}.sales-head button{right:12px;width:37px;height:37px}.sales-world{height:48vh;min-height:330px}.room-camera{width:760px;height:540px;transform:translate(-52%,-48%) rotateX(-4deg) rotateY(9deg) scale(.55)}.is-open .room-camera{transform:translate(-52%,-48%) rotateX(-4deg) rotateY(4deg) scale(.62)}.object-note{left:12px;bottom:12px;width:260px;padding:12px 14px}.object-note b{font-size:11px}.object-note p{font-size:9px}.sales-console{overflow:visible;padding:25px 16px 45px;border-left:0;border-top:1px solid rgba(215,181,124,.18)}.console-intro h2{font-size:31px}.sales-calc{gap:9px}.sales-calc input{height:50px;font-size:18px}.offer-metrics b{font-size:22px}}

/* Floor 02 wow pass: a complete premium classroom and a readable sales journey. */
.student,.teacher{position:absolute;z-index:4;transform-style:preserve-3d;filter:drop-shadow(0 12px 10px #000)}
.student{width:46px;height:92px;transform:translateZ(70px)}.student i,.teacher i{position:absolute;left:50%;width:27px;height:27px;transform:translateX(-50%);border-radius:50%;background:linear-gradient(135deg,#f0cf9b,#76573d);box-shadow:inset -5px -4px 8px rgba(0,0,0,.22)}.student b,.teacher b{position:absolute;left:50%;top:25px;width:43px;height:58px;transform:translateX(-50%);border-radius:18px 18px 7px 7px;background:linear-gradient(145deg,#687d84,#1e292d);border:1px solid #8ba0a4}
.student-a{left:274px;top:280px}.student-b{left:366px;top:300px;transform:translateZ(86px) scale(.92)}.student-c{left:464px;top:272px;transform:translateZ(72px) scale(.96)}.student-b b{background:linear-gradient(145deg,#9c7653,#33261d)}.student-c b{background:linear-gradient(145deg,#7e6a8f,#282231)}
.teacher{left:515px;top:140px;width:56px;height:130px;transform:translateZ(18px)}.teacher i{width:31px;height:31px}.teacher b{top:29px;width:52px;height:82px;background:linear-gradient(145deg,#b59054,#3b2a18);border-color:#d2b57c}.teacher em{position:absolute;left:-34px;top:45px;width:53px;height:4px;transform:rotate(-24deg);transform-origin:right;background:#d5b678;box-shadow:0 0 10px rgba(215,181,124,.5)}
.parent-zone{position:absolute;z-index:3;left:76px;top:246px;width:128px;height:120px;transform:translateZ(24px);border:1px solid rgba(215,181,124,.33);background:linear-gradient(145deg,rgba(215,181,124,.08),rgba(7,9,10,.5))}.parent-zone:before,.parent-zone:after{content:"";position:absolute;bottom:9px;width:42px;height:33px;border:1px solid #75674f;background:#242421}.parent-zone:before{left:10px}.parent-zone:after{right:10px}.parent-zone span{position:absolute;left:8px;right:8px;top:8px;color:#bda77f;font-size:6px;letter-spacing:.12em;text-align:center}.parent-figure{position:absolute;left:50%;top:35px;width:30px;height:54px;transform:translateX(-50%);border-radius:15px 15px 5px 5px;background:linear-gradient(#c9a66f,#3e2f21)}
.client-object{left:235px;top:218px;width:330px;height:190px;border:1px solid rgba(215,181,124,.05);transform:translateZ(94px)}.client-object .scene-ring{position:absolute;inset:20px;border:1px solid rgba(215,181,124,.24);border-radius:50%;animation:roomPulse 3s infinite}.client-object>span{bottom:3px}.admin-object{right:70px;top:244px}.crm-object{left:305px;top:190px;transform:translateZ(95px)}
.monitor-screen small{color:#d7b57c;font-size:6px;letter-spacing:.14em}.monitor-screen strong{display:flex;gap:4px;width:75%;margin-top:9px}.monitor-screen strong u{height:4px;flex:1;background:#564a38;text-decoration:none;transition:.35s}.monitor-screen strong u:first-child{background:#d7b57c}.crm-object[data-state="contact"] strong u:nth-child(2),.crm-object[data-state="offer"] strong u{background:#d7b57c;box-shadow:0 0 8px rgba(215,181,124,.7)}
.scene-timeline{position:absolute;z-index:7;left:50%;top:20px;display:flex;transform:translateX(-50%);border:1px solid rgba(215,181,124,.24);background:rgba(7,9,10,.78);backdrop-filter:blur(12px)}.scene-timeline i{padding:9px 14px;color:#6f6c66;font-size:7px;font-style:normal;letter-spacing:.12em}.scene-timeline i+i{border-left:1px solid rgba(215,181,124,.14)}.scene-timeline i.is-active{color:#16110c;background:#d7b57c;box-shadow:0 0 18px rgba(215,181,124,.28)}
.admin-actions{display:flex;gap:7px;margin:10px 0 5px}.admin-actions button{padding:8px 10px;border:1px solid rgba(215,181,124,.4);color:#d9c39d;background:#171817;font-size:8px;cursor:pointer}.admin-actions button:hover,.admin-actions button.is-active{color:#17120d;background:#d7b57c}.offer-copy{color:#bcb5a9!important;font-size:10px!important;letter-spacing:0!important;line-height:1.5}.sales-layer.is-powered .smart-board{box-shadow:0 0 0 1px #f1d397,0 0 75px rgba(215,181,124,.75)}.sales-layer.is-powered .smart-board b{color:#fff3ce;text-shadow:0 0 20px #d7b57c}.sales-layer.is-powered .room-floor span{animation:pulse 1s infinite}.sales-layer.is-powered .monitor-screen strong u{background:#f3d99e;box-shadow:0 0 12px #d7b57c}
.admin-actions[hidden]{display:none}
@media(max-width:800px){.scene-timeline{top:10px}.scene-timeline i{padding:7px 8px;font-size:6px}.student,.teacher,.parent-zone{filter:none}.object-note{width:285px}.admin-actions{flex-wrap:wrap}}

/* Floor 02 working WebGL prototype. The previous CSS diorama is no longer rendered. */
.three-stage{position:absolute;inset:0;background:#dcd9d0;overflow:hidden}.three-stage canvas{display:block;width:100%;height:100%;touch-action:pan-y}.three-loading{position:absolute;inset:0;z-index:6;display:flex;align-items:center;justify-content:center;gap:12px;color:#3c3b37;background:#dedbd3;font-size:11px;letter-spacing:.08em;transition:opacity .45s,visibility .45s}.three-loading i{width:22px;height:22px;border:2px solid rgba(38,76,70,.22);border-top-color:#264c46;border-radius:50%;animation:threeSpin .8s linear infinite}.three-loading.is-done{opacity:0;visibility:hidden}@keyframes threeSpin{to{transform:rotate(1turn)}}.three-badge{position:absolute;left:24px;top:24px;z-index:3;display:flex;align-items:center;gap:10px;padding:8px 11px;color:#f7f3ea;background:rgba(25,35,34,.78);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.22)}.three-badge b{color:#f0c979;font-size:8px;letter-spacing:.15em}.three-badge span{font-size:8px;letter-spacing:.1em}.legacy-state{display:none!important}.scene-timeline{top:22px}.scene-timeline button{display:flex;align-items:center;gap:7px;padding:10px 13px;border:0;border-left:1px solid rgba(215,181,124,.14);color:#9e978d;background:transparent;font:700 7px Onest,sans-serif;letter-spacing:.12em;cursor:pointer}.scene-timeline button:first-child{border-left:0}.scene-timeline button i{padding:0;color:#d7b57c;font-style:normal}.scene-timeline button.is-active{color:#17120d;background:#d7b57c}.scene-timeline button.is-active i{color:#17120d}.sales-world:after{background:linear-gradient(90deg,transparent 88%,rgba(4,5,6,.34));pointer-events:none}.object-note{bottom:24px;max-width:330px}.sales-layer.is-powered .three-stage{filter:brightness(1.06) saturate(1.08)}
@media(max-width:800px){.three-badge{left:10px;top:52px}.three-badge span{display:none}.scene-timeline{left:10px;right:10px;top:9px;transform:none}.scene-timeline button{flex:1;justify-content:center;padding:8px 3px;font-size:6px}.scene-timeline button i{display:none}.object-note{bottom:10px;left:10px;width:min(285px,calc(100% - 20px));padding:11px 13px}.object-note span{display:none}.sales-world:after{display:none}}

/* WOW hero pass: new typography and scale only; the building artwork is untouched. */
:root { font-family:Onest,Arial,sans-serif; }
body,button,input { font-family:Onest,Arial,sans-serif; }
.brand b,.copy h1,.floor-story h2 { font-family:Unbounded,Onest,sans-serif; }

@media (min-width:801px) {
  .experience {
    background:
      radial-gradient(ellipse at 76% 48%,rgba(213,164,83,.22),transparent 38%),
      radial-gradient(ellipse at 52% 110%,rgba(77,91,94,.16),transparent 50%),
      linear-gradient(112deg,#050607 0%,#090a0b 54%,#11110f 100%);
  }
  .topbar { left:3.2vw; right:3.2vw; top:22px; }
  .brand b { font-size:20px; font-weight:800; letter-spacing:-.08em; }
  .event,.progress span { font-size:11px; }
  .progress b { font-size:22px; }
  .copy { left:5.2vw; top:27%; width:41vw; max-width:680px; }
  .eyebrow { margin-bottom:25px; font-size:12px; font-weight:700; letter-spacing:.2em; }
  .copy h1 { font-size:clamp(54px,5vw,88px); line-height:.98; letter-spacing:-.072em; font-weight:800; }
  .copy h1 span { font-weight:800; }
  .copy h1 em { font-weight:800; color:#f3d79f; }
  .intro { max-width:560px; margin:30px 0 30px; font-size:18px; font-weight:500; line-height:1.55; color:#e1ddd5; }
  .primary { min-height:62px; padding:0 28px; font-size:16px; font-weight:800; }
  .hint { margin-top:20px; font-size:12px; }
  .stage { left:44vw; right:-1vw; top:7%; bottom:4%; }
  .camera { width:min(54vw,820px); height:min(84vh,780px); }
  .reference-card { transform:scale(1.08); transform-origin:left top; }
  .scene-controls { bottom:5.5%; }
}

@media (max-width:800px) {
  .experience[data-mode="overview"] .copy { top:64px; }
  .experience[data-mode="overview"] .eyebrow { font-size:8px; font-weight:700; letter-spacing:.14em; }
  .experience[data-mode="overview"] .copy h1 { width:100%; max-width:360px; font-size:clamp(34px,10vw,47px); line-height:1.02; letter-spacing:-.065em; }
  .experience[data-mode="overview"] .intro { position:static; width:100%; max-width:350px; margin:15px 0 0; font-size:13px; font-weight:500; line-height:1.45; }
  .experience[data-mode="overview"] .actions { margin-top:15px; }
  .experience[data-mode="overview"] .primary { min-height:50px; font-size:13px; font-weight:800; }
  .experience[data-mode="overview"] .stage { top:34%; bottom:35px; }
  .experience[data-mode="overview"] .camera { width:min(112vw,590px); height:68vh; }
  .experience[data-mode="overview"] .reference-card { display:none; }
  .experience[data-mode="overview"] .scene-controls { right:10px; bottom:4px; }
  .brand b { font-family:Unbounded,Onest,sans-serif; font-size:13px; }
}

/* Luminous scale pass — stronger hierarchy, legibility and architectural light. */
.experience::before {
  content:"";
  position:absolute;
  z-index:1;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(ellipse at 76% 46%,rgba(242,220,177,.15) 0,rgba(215,181,124,.09) 27%,transparent 55%),
    radial-gradient(ellipse at 77% 86%,rgba(215,181,124,.16),transparent 42%);
  mix-blend-mode:screen;
}
.topbar { height:56px; border-bottom-color:rgba(242,220,177,.25); }
.brand b { text-shadow:0 0 24px rgba(255,244,220,.22); }
.event { color:#d6d0c6; font-weight:600; }
.progress b { text-shadow:0 0 20px rgba(215,181,124,.55); }
.progress span { color:#d6d0c6; font-weight:600; }
.eyebrow { text-shadow:0 0 18px rgba(215,181,124,.4); }
.copy h1 { text-shadow:0 10px 50px rgba(0,0,0,.7),0 0 24px rgba(255,244,220,.08); }
.copy h1 em { text-shadow:0 0 38px rgba(226,180,99,.55); }
.intro { color:#f0ece4; }
.primary { box-shadow:0 16px 46px rgba(215,181,124,.25),0 0 28px rgba(242,220,177,.13); }
.hint { color:#d2cdc3; font-weight:600; }
.ambient-a { opacity:.55; filter:blur(72px); }
.ambient-b { opacity:.58; filter:blur(68px); }
.school {
  filter:drop-shadow(34px 38px 48px rgba(0,0,0,.82)) drop-shadow(0 0 42px rgba(231,201,135,.34));
}
.roof { filter:drop-shadow(0 0 15px rgba(239,205,140,.55)); }
.rear-side { fill:#242016; stroke:#c4a267; stroke-width:1.8; }
.floor-face { fill:#20211e; stroke:#b39765; stroke-width:1.75; }
.floor-side { fill:#332d20; stroke:#d0ac6c; stroke-width:1.7; }
.slab { fill:#49402c; stroke:#d5b170; stroke-width:1.8; filter:drop-shadow(0 5px 8px rgba(0,0,0,.8)) drop-shadow(0 0 5px rgba(215,181,124,.22)); }
.window { fill:#111b1d; stroke:#67706b; stroke-width:1.15; }
.window.lit { fill:#88795a; filter:drop-shadow(0 0 9px rgba(234,203,145,.43)); }
.floor-tag text { fill:#f1ce8f; font-size:19px; font-weight:800; filter:drop-shadow(0 0 7px rgba(215,181,124,.4)); }
.floor-tag .floor-title { fill:#fff9ed; font-size:11px; font-weight:900; letter-spacing:.11em; opacity:1; }
.room-life { stroke:#fff8e8; stroke-width:2.15; filter:drop-shadow(0 0 3px rgba(242,220,177,.35)); }
.path-light,.power-line { stroke:#f0cf91; opacity:.42; }
.reference-card { border-color:rgba(215,181,124,.36); box-shadow:0 24px 70px rgba(0,0,0,.62),0 0 30px rgba(215,181,124,.11); }
.reference-card small { color:#b8ad9c; font-size:10px; }
.reference-card strong { font-size:18px; }
.reference-card p { color:#c4bdb1; font-size:11px; }
.scene-controls button { font-size:11px; color:#e1ddd5; }
.statusbar { height:44px; border-top-color:rgba(242,220,177,.2); color:#d2cdc3; font-size:10px; }
.statusbar b { color:#efd29b; }

.story-kicker { font-size:11px; font-weight:700; }
.story-kicker b { color:#c2baae; font-size:10px; }
.floor-story h2 { text-shadow:0 8px 34px rgba(0,0,0,.65); }
.story-lead { color:#e5e0d7!important; font-size:16px!important; }
.diagnostic,.result {
  border-color:rgba(242,220,177,.42);
  background:linear-gradient(145deg,rgba(42,38,29,.98),rgba(10,12,13,.97));
  box-shadow:0 30px 90px rgba(0,0,0,.68),0 0 42px rgba(215,181,124,.13),inset 0 1px rgba(255,255,255,.09);
}
.diagnostic-head b { font-size:24px; }
.diagnostic-head small { color:#c2baae; font-size:11px; }
.diagnostic label > span { color:#e4ddd1; font-size:12px; line-height:1.25; }
.diagnostic label > span small { display:block; margin-top:3px; color:#a99f91; font-size:9px; font-weight:500; letter-spacing:.02em; text-transform:none; }
.diagnostic input { height:68px; border-color:rgba(242,220,177,.24); background:linear-gradient(180deg,rgba(48,47,42,.96),rgba(20,22,22,.98)); font-size:31px; box-shadow:inset 0 0 22px rgba(242,220,177,.025); }
.diagnostic .field i { bottom:23px; color:#c6ad7e; font-size:12px; }
.calculate { min-height:72px; border-color:rgba(242,220,177,.85); font-size:20px; box-shadow:0 14px 38px rgba(215,181,124,.13),inset 0 1px rgba(255,255,255,.08); }
.result-heading small { font-size:13px; }
.result-heading b { color:#aaa297; font-size:10px; }
.result-grid strong { color:#f7dca5; font-size:39px; text-shadow:0 0 22px rgba(215,181,124,.26); }
.result-grid span { color:#d7d0c4; font-size:12px; }
.result details,.next-step { color:#d1cabf; font-size:12px; }

@media (min-width:801px) {
  .brand b { font-size:23px; }
  .brand span { font-size:12px; }
  .event { font-size:12px; }
  .progress b { font-size:26px; }
  .progress span { font-size:12px; }
  .copy { top:24%; }
  .copy h1 { font-size:clamp(62px,5.45vw,96px); }
  .intro { max-width:620px; font-size:20px; }
  .primary { min-height:68px; padding:0 32px; font-size:18px; }
  .hint { font-size:14px; }
  .stage { left:41vw; right:-3vw; top:3%; bottom:1%; }
  .camera { width:min(61vw,920px); height:min(92vh,860px); }
  .experience[data-mode="focus"] .copy,.experience[data-mode="power"] .copy { left:3.5vw; top:9%; width:46vw; max-width:680px; }
  .experience[data-mode="focus"] .stage,.experience[data-mode="power"] .stage { left:52vw; top:7%; }
  .experience[data-mode="focus"] .camera,.experience[data-mode="power"] .camera { width:min(50vw,760px); height:min(80vh,760px); }
  .diagnostic,.result { width:min(640px,100%); padding:30px 32px 32px; }
}

@media (max-width:800px) {
  .topbar { height:44px; }
  .progress b { font-size:20px; }
  .experience[data-mode="overview"] .copy h1 { font-size:clamp(38px,11.5vw,54px); }
  .experience[data-mode="overview"] .intro { font-size:15px; }
  .experience[data-mode="overview"] .primary { min-height:56px; font-size:15px; }
  .experience[data-mode="overview"] .stage { top:32%; bottom:30px; }
  .experience[data-mode="overview"] .camera { width:min(124vw,650px); height:73vh; }
  .floor-tag text { font-size:21px; }
  .floor-tag .floor-title { font-size:12px; }
  .floor-story h2,.experience[data-mode="focus"] .floor-story h2,.experience[data-mode="power"] .floor-story h2 { width:82%; font-size:34px; }
  .story-lead,.experience[data-mode="focus"] .story-lead,.experience[data-mode="power"] .story-lead { width:86%; font-size:13px!important; }
  .diagnostic,.result { margin-top:145px; padding:24px 17px 25px; }
  .diagnostic-head b { font-size:21px; }
  .diagnostic-head small { font-size:10px; }
  .diagnostic label > span { font-size:10px; }
  .diagnostic label > span small { font-size:8px; }
  .diagnostic input { height:62px; font-size:27px; }
  .calculate { min-height:68px; font-size:18px; }
  .result-grid strong { font-size:29px; }
  .result-grid span { font-size:10px; }
}

/* Entrance CTA — the dominant action on the opening scene. */
#enterButton {
  min-width: 340px;
  min-height: 78px;
  padding: 0 30px 0 42px;
  border: 1px solid rgba(255,239,201,.78);
  border-radius: 11px;
  font-size: 19px;
  font-weight: 900;
  letter-spacing: .035em;
  text-transform: uppercase;
  box-shadow: 0 24px 68px rgba(215,181,124,.42), 0 0 46px rgba(242,220,177,.25), inset 0 1px 0 rgba(255,255,255,.75);
  transition: transform .22s ease, box-shadow .22s ease, filter .22s ease;
}
#enterButton span {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-left: 28px;
  border: 1px solid rgba(35,25,13,.3);
  border-radius: 50%;
  font-size: 20px;
}
#enterButton:hover,
#enterButton:focus-visible {
  transform: translateY(-3px) scale(1.025);
  filter: brightness(1.1);
  box-shadow: 0 30px 82px rgba(215,181,124,.54), 0 0 62px rgba(242,220,177,.36), inset 0 1px 0 rgba(255,255,255,.9);
}
@media (max-width:800px) {
  .experience[data-mode="overview"] #enterButton {
    width: min(100%, 350px);
    min-width: 0;
    min-height: 64px;
    padding: 0 20px 0 26px;
    font-size: 14px;
    letter-spacing: .025em;
  }
  #enterButton span {
    width: 34px;
    height: 34px;
    margin-left: 18px;
    font-size: 17px;
  }
}

/* Composition tune: keep the complete six-floor facade comfortably in view. */
@media (min-width:801px) {
  .experience[data-mode="overview"] .stage {
    left: 34vw;
    right: 0;
  }
  .experience[data-mode="focus"] .stage,
  .experience[data-mode="power"] .stage {
    left: 47vw;
  }
}

@media (max-width:800px) {
  .experience[data-mode="overview"] .stage {
    left: -7%;
    right: 7%;
  }
  .experience[data-mode="focus"] .stage,
  .experience[data-mode="power"] .stage {
    left: 15%;
  }
}