/* KIDTECHLABS site styles.
   Rebuilt from the published v40 stylesheet: same tokens, type scale, shapes and
   breakpoints (900px / 820px nav / 640px / 360px), with overflow and touch fixes. */

:root {
  color-scheme: light;
  /* the brand colours = the header's rope-ladder menu (coral, yellow, sky blue, ink, white); no green */
  --coral: #ff784f;
  --yellow: #ffd54a;
  --blue: #65c8f0;
  --ink: #1e2942;
  --paper: #fff;
  --muted-foreground: #4f5a70;
  --border: #e4e5eb;
  --input: #c7ccd6;
  --body-font: "DM Sans", system-ui, sans-serif;
  --heading-font: "Outfit", system-ui, sans-serif;
  --focus: #427899;
  --home-header-height: 112px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 30px; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { overflow-x: clip; }
body {
  background: var(--paper);
  color: var(--ink);
  font: 400 1rem/1.7 var(--body-font);
  -webkit-font-smoothing: antialiased;
  margin: 0;
  min-height: 100vh;
}
h1, h2, h3, h4 { font-family: var(--heading-font); letter-spacing: -0.035em; margin: 0; font-weight: 500; line-height: 1.12; }
h1 { font-size: clamp(2.7rem, 6.2vw, 5.65rem); }
h2 { font-size: clamp(2rem, 3.5vw, 3.45rem); }
h3 { font-size: 1.65rem; }
p { color: var(--muted-foreground); margin: 1.2rem 0; }
a { color: inherit; text-decoration: none; }
button, a, input, textarea, select { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; font: inherit; }
a, button { touch-action: manipulation; }
:is(a, button, input, textarea, select, [tabindex]):focus-visible { outline: 3px solid var(--focus); outline-offset: 5px; }
img { max-width: 100%; height: auto; display: block; }
.multiline { white-space: pre-line; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.wrap { width: min(1180px, 100% - 88px); margin-inline: auto; }
.skip-link { background: var(--ink); color: #fff; z-index: 100; padding: 12px 20px; position: absolute; top: -100px; left: 20px; border-radius: 0 0 10px 10px; }
.skip-link:focus { top: 10px; }

/* ---------- Brand (v68): the concept-sheet robot pushing the puffy wordmark from just behind the K, the tagline ----------
   One inline SVG (build.py BRAND_LOGO: the robot is the 3D rig projected by logo_art.py) at fixed sizes, plus the
   tagline in the page's own font: no web font, no layout shift. No outlines: soft gradients, a soft shadow behind the
   robot and under its feet (it reads on the white header and on the footer's coral tint). At page open the header
   logo comes in from past the left edge (three/logo-intro.js, a transform: no layout shift, no scrollbar). Later
   scenes/logo.js lays the live 3D robot (three/logo-robot.js) over the drawing: a canvas larger than the drawing
   (room to jump onto the letters), absolutely positioned, no pointer events, so the nav stays clickable.
   data-layer="behind" puts the canvas under the letters (where the robot pushes from). The tagline shows in the
   footer and in the header on wide screens. */
.brand { flex-shrink: 0; max-width: 100%; min-height: 44px; display: inline-flex; align-items: center; text-decoration: none !important; }
.brand-lockup { position: relative; display: flex; flex-direction: column; isolation: isolate; }
.brand-art { position: relative; display: block; }
.brand-logo { position: relative; z-index: 1; display: block; width: 285.3px; height: 37.8px; overflow: visible; }
/* (v63: the robot is as tall as the letters, so the whole lockup scales up: the wordmark as large as the fixed
   header allows - 1.4x the drawing on wide screens; the tagline is sized with it, as wide as the wordmark) */
.brand-lockup { --tag-size: 12.9px; }
@media (max-width: 1099px) { .brand-logo { width: 248.6px; height: 32.9px; } .brand-lockup { --tag-size: 11.2px; } }
@media (max-width: 900px) { .brand-logo { width: 228.3px; height: 30.2px; } .brand-lockup { --tag-size: 10.3px; } }
@media (max-width: 820px) { .brand-logo { width: 240.5px; height: 31.9px; } .brand-lockup { --tag-size: 10.9px; } }
@media (max-width: 360px) { .brand-logo { width: 203.8px; height: 27px; } .brand-lockup { --tag-size: 9.2px; } }
/* (sized with the drawing, as on the reference: it runs about as wide as the wordmark) */
.brand-tag { display: block; margin: 2px 0 0 var(--tag-indent, 17%); font: 600 var(--tag-size, 9.2px)/1.2 var(--heading-font); letter-spacing: 0.01em; color: var(--ink); white-space: nowrap; }
.site-header .brand-tag { display: none; }
@media (min-width: 1100px) { .site-header .brand-tag { display: block; } }
.wm-kid { --c: var(--coral); --s: #d4552e; --h: #ffc1a6; }
.wm-tech { --c: var(--ink); --s: #0f1626; --h: #5a6b92; }
.wm-labs { --c: var(--blue); --s: #3a9ccb; --h: #c4ecfb; }
.bl-l .wl-b { stroke: var(--c); }
.bl-l .wl-s { stroke: var(--s); }
.bl-l .wl-h { stroke: var(--h); stroke-width: 3.2; opacity: 0.5; }
.bl-l .wl-tile { fill: var(--yellow); stroke: none; }
.bl-l { transform-box: fill-box; transform-origin: 50% 100%; }
.bl-bot { transition: opacity 0.25s ease-out; }
/* v68: the robot drawn from the 3D rig (logo_art.py): soft shading, no outline */
.bl-bot .rb-cream { fill: url(#kl-cream); }
.bl-bot .rb-navy { fill: url(#kl-navy); }
.bl-bot .rb-eye { fill: url(#kl-eye); }
.bl-bot .rb-rim { fill: #d5c7ab; }
.bl-bot .rb-shine { fill: #fff; }
.bl-bot .rb-coral { fill: url(#kl-coral); }
.bl-bot .rb-yellow { fill: url(#kl-yellow); }
.bl-bot .rb-sky { fill: url(#kl-sky); }
.bl-bot .rb-seam { fill: none; stroke: #c8b99c; stroke-width: 0.16; stroke-linecap: round; }
.bl-bot .rb-shadow { fill: url(#kl-gs); }
.bl-bot .rb-bevel { fill: none; stroke: #fff; stroke-opacity: 0.6; stroke-width: 0.22; stroke-linecap: round; }
.bl-bot .rb-soft { filter: url(#kl-soft); }
.logo-stage { position: absolute; left: -5.89%; top: -111.11%; width: 111.78%; height: 222.22%; pointer-events: none; z-index: 2; opacity: 0; transition: opacity 0.25s ease-out; }
.logo-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.brand-lockup[data-logo="3d"] .logo-stage { opacity: 1; }
.brand-lockup[data-logo="3d"] .bl-bot { opacity: 0; }
.brand-lockup[data-layer="behind"] .logo-stage { z-index: 0; }
.bl-shift { transition: opacity 0.18s ease-out; }
/* v68: the entrance at page open (three/logo-intro.js): hidden until it starts; the dust puffs at its feet */
html.kl-intro:not(.kl-intro-run) .site-header .brand-lockup { visibility: hidden; }
html.kl-intro-run .site-header .brand-lockup { will-change: transform; }
html.kl-intro-fast .site-header .bl-bot .rb-soft { filter: none; }
.bl-dust circle { fill: #d8ccb6; }
@media print, (forced-colors: active), (prefers-reduced-motion: reduce) {
  .logo-stage { display: none !important; }
  .brand-lockup[data-logo] .bl-bot { opacity: 1; }
  .bl-l { transform: none !important; }
}
@media (forced-colors: active) { .bl-bot .rb-cream { fill: Canvas; stroke: CanvasText; stroke-width: 0.15; } .bl-l .wl-b { stroke: CanvasText; } .bl-l .wl-s, .bl-l .wl-h { display: none; } }

/* ---------- Header + rope-ladder navigation ---------- */
.site-header { justify-content: space-between; align-items: center; gap: 30px; min-height: 112px; display: flex; position: relative; z-index: 40; }
.navigation { align-items: center; gap: 22px; font-size: 0.95rem; font-weight: 500; display: flex; }
.menu-toggle { display: none; flex-shrink: 0; padding: 10px; color: var(--ink); }
.menu-toggle svg { display: block; margin: auto; }
.nav-group { position: relative; }
.nav-trigger {
  min-height: 46px; color: var(--ink); font: inherit; background: none; border: 1px solid transparent; border-radius: 10px;
  justify-content: space-between; align-items: center; gap: 9px; padding: 10px 12px; display: flex;
  transition: background 0.18s, box-shadow 0.18s;
}
.nav-trigger:hover, .nav-trigger[data-active="true"] { background: color-mix(in srgb, var(--coral) 17%, var(--paper)); }
.nav-trigger[aria-expanded="true"] { background: var(--coral); border-color: var(--ink); box-shadow: 0 4px 0 var(--ink); }
.nav-trigger svg { transition: transform 0.18s; flex-shrink: 0; }
.nav-trigger[aria-expanded="true"] svg { transform: rotate(180deg); }
/* v60: "Home", the first top-level item: a plain link styled as the menu triggers (no chevron, no dropdown) */
.nav-home { text-decoration: none !important; }
.navigation .nav-contact {
  border: 1.5px solid var(--ink); background: var(--coral); min-height: 46px; box-shadow: 0 4px 0 var(--ink);
  border-radius: 99px; padding: 11px 22px; display: inline-flex; align-items: center; justify-content: center;
  transition: transform 0.18s, box-shadow 0.18s;
}
.navigation .nav-contact:hover, .navigation .nav-contact[aria-current="page"] { box-shadow: 0 6px 0 var(--ink); transform: translateY(-2px); }

.ladder-dropdown {
  --unroll: 560ms;
  overscroll-behavior: contain; isolation: isolate; scrollbar-width: thin; width: 355px; max-height: calc(100dvh - 140px);
  padding: 4px 9px 14px; position: absolute; top: calc(100% + 15px); right: 0; overflow: hidden auto;
}
.ladder-dropdown[hidden] { display: none; }
.ladder-motion { transform-origin: 50% 0; animation: ladder-settle var(--unroll) ease-out both; position: relative; }
.ladder-viewport { animation: ladder-reveal var(--unroll) linear both; }
.ladder-list { z-index: 1; perspective: 850px; margin: 0; padding: 14px 0 7px; list-style: none; position: relative; }
.ladder-motion::before, .ladder-motion::after {
  content: ""; border: 1px solid var(--ink); border-radius: 4px; width: 5px; position: absolute; top: 0; bottom: 24px;
  background: repeating-linear-gradient(35deg, var(--yellow) 0 3px, color-mix(in srgb, var(--ink) 65%, var(--yellow)) 3px 6px);
  transform-origin: 50% 0; animation: ladder-rope-release var(--unroll) linear both;
}
.ladder-motion::before { left: 20px; }
.ladder-motion::after { right: 20px; }
.ladder-rung {
  transform-origin: 50% -12px; width: 100%; margin: 0 0 14px; position: relative; backface-visibility: hidden;
  animation: ladder-rung-release 0.32s cubic-bezier(0.2, 0.7, 0.25, 1) both; animation-delay: var(--delay, 0ms);
}
.navigation .ladder-link {
  border: 1.5px solid var(--ink); background: var(--paper); min-height: 50px; color: var(--ink); border-radius: 9px;
  box-shadow: 0 5px 0 var(--ink), 0 9px 15px #1e294215; align-items: center; gap: 14px; padding: 12px 36px;
  font-size: 0.92rem; line-height: 1.35; display: flex; position: relative; transition: transform 0.15s, box-shadow 0.15s;
}
.ladder-rung:nth-child(3n+1) .ladder-link { background: var(--coral); }
.ladder-rung:nth-child(3n+2) .ladder-link { background: var(--yellow); }
.ladder-rung:nth-child(3n+3) .ladder-link { background: var(--blue); }
.navigation .ladder-link:is(:hover, :focus-visible) { box-shadow: 0 7px 0 var(--ink), 0 11px 15px #1e294220; transform: translateY(-2px); }
.navigation .ladder-link[aria-current="page"] { text-decoration: underline; text-underline-offset: 4px; }
.navigation .ladder-link::before, .navigation .ladder-link::after {
  content: ""; border: 2px solid var(--ink); background: var(--yellow); border-radius: 50%; width: 7px; height: 7px;
  margin-top: -3.5px; position: absolute; top: 50%;
}
.navigation .ladder-link::before { left: 16px; }
.navigation .ladder-link::after { right: 16px; }
.rung-number { font-variant-numeric: tabular-nums; opacity: 0.8; font-size: 0.75rem; font-weight: 700; }
.ladder-roll {
  z-index: 3; border: 2px solid var(--ink); opacity: 0; transform-origin: 50% center; height: 30px; pointer-events: none;
  background: linear-gradient(180deg, var(--yellow) 0%, var(--coral) 25%, var(--paper) 36%, var(--coral) 45%, var(--coral) 70%, var(--ink) 100%);
  border-radius: 12px; position: absolute; top: 0; left: -2px; right: -2px; box-shadow: rgba(30, 41, 66, 0.17) 0 4px 7px;
  animation: ladder-roll-down var(--unroll) linear both;
}
.ladder-roll::before, .ladder-roll::after { content: ""; border: 2px solid var(--ink); background: var(--yellow); border-radius: 50%; width: 12px; position: absolute; top: 3px; bottom: 3px; }
.ladder-roll::before { left: 4px; }
.ladder-roll::after { right: 4px; }
.ladder-dropdown[data-state="closing"] { pointer-events: none; animation: ladder-rewind 0.28s ease-in both; }
.ladder-dropdown[data-state="closing"] * { animation-play-state: paused; }
/* Keyboard users get the links immediately, without the unroll. */
.ladder-dropdown:focus-within, .ladder-dropdown:focus-within .ladder-viewport, .ladder-dropdown:focus-within .ladder-motion,
.ladder-dropdown:focus-within .ladder-rung, .ladder-dropdown:focus-within .ladder-motion::before, .ladder-dropdown:focus-within .ladder-motion::after {
  clip-path: none; opacity: 1; transform: none; animation: none !important;
}
.ladder-dropdown:focus-within .ladder-roll { display: none; }
@media (min-width: 821px) {
  .nav-group::after { content: ""; height: 20px; position: absolute; top: 100%; left: 0; right: 0; }
}
@keyframes ladder-reveal { 0% { clip-path: inset(0 -15px calc(100% - 40px)); } 100% { clip-path: inset(0 -15px -15px); } }
@keyframes ladder-rope-release { 0% { transform: scaleY(0); } 100% { transform: scaleY(1); } }
@keyframes ladder-rung-release {
  0% { opacity: 0; transform: translateY(-26px) rotateX(-105deg); }
  20% { opacity: 1; }
  68% { opacity: 1; transform: translateY(5px) rotateX(10deg); }
  86% { transform: translateY(-2px) rotateX(-4deg); }
  100% { opacity: 1; transform: translateY(0) rotateX(0); }
}
@keyframes ladder-roll-down {
  0% { opacity: 1; top: 0; transform: scaleY(0.8); }
  12% { transform: scaleY(1); }
  82% { opacity: 1; transform: scaleY(1); }
  94% { opacity: 1; transform: scaleY(0.65); }
  100% { opacity: 0; top: calc(100% - 29px); transform: scaleY(0.1); }
}
@keyframes ladder-settle { 0%, 55% { transform: rotate(0); } 76% { transform: rotate(1.2deg); } 90% { transform: rotate(-0.55deg); } 100% { transform: rotate(0); } }
@keyframes ladder-rewind {
  0% { clip-path: inset(0 -15px -15px); opacity: 1; transform: scaleY(1); }
  100% { clip-path: inset(0 -15px 100%); opacity: 0; transform: scaleY(0.94); }
}
.mobile-ladder-roll { display: none; }

/* ---------- Buttons, links, shared blocks ---------- */
.eyebrow { text-transform: uppercase; letter-spacing: 0.15em; color: var(--ink); margin: 0 0 20px; font-size: 0.75rem; font-weight: 700; }
.button {
  background: var(--ink); min-height: 52px; color: var(--paper); border: 1px solid transparent; border-radius: 99px;
  justify-content: center; align-items: center; padding: 12px 28px; font-size: 0.94rem; font-weight: 600; line-height: 1.4;
  display: inline-flex; text-align: center; transition: transform 0.2s, background 0.2s;
}
.button:hover { transform: translateY(-2px); }
.button.coral { background: var(--coral); color: var(--ink); border-color: var(--ink); box-shadow: 0 4px 0 var(--ink); }
.button.outline { border-color: var(--ink); color: var(--ink); background: transparent; }
.button-row { flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 28px; display: flex; }
.text-link { border-bottom: 1px solid var(--ink); margin-top: 10px; padding: 0 0 4px; font-weight: 600; display: inline-block; }
.text-link:hover { border-color: var(--coral); }
button.text-link { background: none; border-width: 0 0 1px; color: inherit; cursor: pointer; }
.section { padding-block: 105px; }
.section-heading { text-align: center; max-width: 680px; margin: 0 auto 58px; }
.section-heading p:not(.eyebrow) { max-width: 540px; margin: 22px auto 0; }
.split { grid-template-columns: 1fr 1fr; align-items: center; gap: 85px; display: grid; }
.split p:not(.eyebrow) { max-width: 490px; }
.image-frame { border-radius: 10px 90px 10px 10px; padding: 22px; }
.image-frame img { aspect-ratio: 1.17 / 1; width: 100%; object-fit: cover; border-radius: 6px 65px 6px 6px; }
.navy { background: var(--ink); color: #fff; }
.coral-bg, .step-number.coral, .solution-image.coral, .image-frame.coral { background: var(--coral); }
.yellow { background: var(--yellow); }
.blue { background: var(--blue); }
.small-label { text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted-foreground); margin-bottom: 18px; font-size: 0.76rem; font-weight: 600; display: block; }

/* ---------- Home: chapters ---------- */
.hero { text-align: center; position: relative; }
.hero h1 { letter-spacing: -0.045em; line-height: 1.02; }
.hero-copy { max-width: 620px; margin: 24px auto; font-size: 1.12rem; line-height: 1.7; }
.home-intro { min-height: calc(100svh - var(--home-header-height)); scroll-margin-top: var(--home-header-height); flex-direction: column; justify-content: center; padding-block: 64px 90px; display: flex; }
.home-intro .headline-workshop { width: 100%; }
.hero .button-row .button { min-height: 72px; }
.hero-foot { color: var(--muted-foreground); flex-wrap: wrap; justify-content: center; gap: 20px; padding: 9px 0 11px; font-size: 0.8rem; display: flex; margin: 0; }
.hero-foot span + span::before { content: "·"; margin-right: 20px; }

/* Headline with miniature climbers */
.headline-workshop { isolation: isolate; position: relative; }
.headline-workshop h1 { z-index: 2; position: relative; }
.headline-line { white-space: pre; display: block; }
.headline-animation { pointer-events: none; position: absolute; inset: -70px 0 -10px; overflow: visible; }
.headline-animation canvas { width: 100%; height: 100%; display: block; }
.headline-back { z-index: 1; }
.headline-front { z-index: 3; }

/* Hover scenes (torch, phone, train) */
.hover-scene { pointer-events: none; opacity: 0; z-index: 3; transition: opacity 0.15s; display: block; position: absolute; }
.hover-scene[data-active="true"] { opacity: 1; }
.hover-scene canvas { width: 100%; height: 100%; display: block; }
.discovery-button { isolation: isolate; position: relative; overflow: visible; transition: box-shadow 0.3s, background 0.3s; }
.discovery-button:is(:hover, :focus-visible) { background: #fffdf7; box-shadow: 0 0 0 2px #ffd54a55, 0 5px 18px #65c8f020; }
.discovery-label { z-index: 4; align-self: center; position: relative; transition: color 0.18s linear; }
/* Flying-car scene (scenes/torch.js): the button outline is the car's track and the label's
   letters its landing pad. The canvas overflows the pill (room above for the kick-flip and the
   descent, a little around for the jets) without affecting layout; the link keeps every click.
   While the car's gas and wheels move the letters, they are drawn in 3D exactly over the HTML
   text, which turns transparent (still in place for screen readers and selection). */
.hover-torch { inset: -62px -26px -14px -26px; transition: opacity 0.4s; }
.discovery-button[data-letters="3d"] .discovery-label { color: transparent; }
@media print { .hover-torch { display: none; } .discovery-button[data-letters] .discovery-label { color: inherit; } }
.talk-button { position: relative; overflow: visible; }
.hover-phone { width: 115px; height: 108px; top: calc(50% - 22px); left: calc(100% - 2px); }

/* Arena chapter: the cylinder stage takes most of the screen; the sector story is a compact strip
   under it, or a side column on wide screens (below). scenes/arena.js frames the camera from the
   block's measured silhouette, so the cylinder fills whatever stage it gets. */
.home-arena { flex-direction: column; min-height: 100svh; padding: 10px 12px 0; display: flex; }
.vision-workshop {
  text-align: left; isolation: isolate; background: #fafafb; border: 1px solid #dfe4e8; border-radius: 24px; width: 100%;
  position: relative; overflow: hidden; box-shadow: rgba(34, 54, 74, 0.33) 0 22px 55px -38px;
  flex-direction: column; flex: 1 1 0%; min-height: 420px; margin: 0; display: flex;
}
.vision-stage {
  touch-action: pan-y; cursor: grab; outline-offset: -4px; position: relative; overflow: hidden; width: 100%;
  background: radial-gradient(at 50% 52%, #fff 25%, #f4f4f6 78%); flex: 1 1 0%; min-height: 300px;
  -webkit-user-select: none; user-select: none;
}
.vision-stage:active { cursor: grabbing; }
.vision-stage:focus-visible { outline: 2px solid var(--blue); }
.arena-label { z-index: 2; color: var(--ink); letter-spacing: 0.19em; text-transform: uppercase; pointer-events: none; font-size: clamp(0.65rem, 0.56vw, 0.78rem); font-weight: 700; position: absolute; top: 20px; left: 24px; margin: 0; }
.arena-label::before { content: ""; background: var(--coral); vertical-align: 1px; border-radius: 50%; width: 6px; height: 6px; margin-right: 9px; display: inline-block; }
.arena-label small { letter-spacing: 0.01em; text-transform: none; color: #657386; margin-top: 5px; font-size: clamp(0.76rem, 0.66vw, 0.92rem); font-weight: 400; display: block; }
.arena-reset { z-index: 4; color: var(--ink); cursor: pointer; background: rgba(255, 255, 255, 0.92); border: 1px solid #cad3dc; border-radius: 20px; padding: 8px 12px; font-size: 0.7rem; position: absolute; top: 16px; right: 18px; min-height: 36px; }
.arena-reset[hidden] { display: none; }
.arena-reset span { margin-left: 7px; }
.vision-workshop[data-focused="true"] .arena-label { max-width: 52%; }
.vision-canvas { opacity: 0; transition: opacity 0.45s; position: absolute; inset: 0; }
.vision-canvas canvas { width: 100%; height: 100%; display: block; }
.vision-poster { object-fit: contain; width: 100%; height: 100%; transition: opacity 0.45s; position: absolute; inset: 0; }
.vision-workshop[data-ready="true"] .vision-canvas { opacity: 1; }
.vision-workshop[data-ready="true"] .vision-poster { opacity: 0; pointer-events: none; }
.sector-markers { pointer-events: none; opacity: 0; z-index: 1; position: absolute; inset: 0; }
.vision-workshop[data-ready="true"] .sector-markers { opacity: 1; }
.sector-markers > span {
  text-align: center; color: var(--ink); letter-spacing: 0.015em; background: rgba(255, 255, 255, 0.95); border: 1px solid #cbd4db;
  border-radius: 4px; width: max-content; max-width: 210px; padding: 5px 9px; font-size: clamp(10.5px, 0.74vw, 14px); font-weight: 600;
  line-height: 1.25; position: absolute; top: 0; left: 0; box-shadow: rgba(36, 54, 78, 0.04) 0 2px 5px; transition: opacity 0.2s;
}
.sector-markers > span::after { content: ""; background: #838997; width: 1px; height: 9px; position: absolute; top: 100%; left: 50%; }
.sector-markers > span[data-selected="true"] { color: #8e5048; background: #fff4f1; border-color: #ff9372; }
.vision-workshop[data-focused="true"] .sector-markers > span[data-selected="false"] { opacity: 0; }
/* The drag hint: along the bottom on narrow stages, in the free top-right corner on wider ones (the
   close-up swaps it for the reset button). The arrow is the first span; the text span (content
   hook) keeps the hint's own size. */
.arena-hint { color: #526477; letter-spacing: 0.015em; pointer-events: none; opacity: 0; white-space: nowrap; background: rgba(255, 255, 255, 0.91); border-radius: 20px; align-items: center; gap: 8px; padding: 5px 10px; font-size: 0.72rem; transition: opacity 0.3s; display: flex; position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); margin: 0; }
.arena-hint > span:first-child { font-size: 1.1rem; line-height: 1; }
.vision-workshop[data-ready="true"] .arena-hint { opacity: 1; }
.vision-workshop[data-focused="true"] .arena-hint { opacity: 0; }
@media (min-width: 700px) {
  .arena-hint { z-index: 2; top: 18px; right: 20px; bottom: auto; left: auto; transform: none; font-size: clamp(0.72rem, 0.62vw, 0.84rem); }
}
.arena-sector-story { z-index: 3; background: #fff; border-top: 1px solid #e2e7e9; padding: 12px max(24px, 50% - 590px) 13px; position: relative; flex: 0 0 auto; }
.sector-invitation { color: var(--ink); font-family: var(--heading-font); letter-spacing: -0.02em; margin: 0 0 9px; font-size: 1.12rem; font-weight: 500; }
.sector-choices { flex-wrap: wrap; gap: 6px; display: flex; }
.sector-choices button { color: #526477; background: none; border: 1px solid #d4dde3; border-radius: 20px; align-items: center; gap: 7px; padding: 7px 12px; font-size: 0.7rem; line-height: 1.2; transition: background 0.2s, border-color 0.2s; display: inline-flex; min-height: 34px; }
/* each chip carries its bay's accent colour (the slice's stripe in the 3D block) */
.sector-choices button::before { content: ""; background: var(--bay, #c4ced6); border-radius: 50%; flex: none; width: 7px; height: 7px; }
.sector-choices button[data-sector="0"], .sector-choices button[data-sector="3"], .sector-choices button[data-sector="5"] { --bay: #65c8f0; }
.sector-choices button[data-sector="1"], .sector-choices button[data-sector="6"] { --bay: #ffd54a; }
.sector-choices button[data-sector="2"], .sector-choices button[data-sector="4"] { --bay: #ff784f; }
.sector-choices button:hover { background: #f5f7f8; border-color: #a2b3c2; }
.sector-choices button[aria-pressed="true"] { color: var(--ink); background: #ffebe5; border-color: #ff9372; }
.sector-choices button:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.sector-description { color: #687789; max-width: none; min-height: 1.7em; margin: 9px 0 0; font-size: 0.8rem; line-height: 1.7; }
.sector-description strong { color: var(--ink); font-weight: 500; }
/* Wide screens (landscape desktops, laptops, tablets): the story becomes a side column, so the stage
   keeps the full height of the screen and the cylinder its full size. */
@media (min-width: 700px) and (min-aspect-ratio: 3/2) {
  .home-arena { height: 100svh; min-height: 480px; }
  .vision-workshop { flex-direction: row; min-height: 0; }
  .vision-stage { min-height: 0; }
  .arena-sector-story {
    flex: 0 0 clamp(236px, 20vw, 340px); border-top: 0; border-left: 1px solid #e2e7e9; padding: 24px clamp(16px, 1.7vw, 30px);
    flex-direction: column; justify-content: center; display: flex; overflow-y: auto; scrollbar-width: thin;
  }
  .sector-invitation { font-size: clamp(1.1rem, 1.4vw, 1.55rem); line-height: 1.2; margin-bottom: clamp(12px, 1.8vh, 20px); }
  .sector-choices { flex-direction: column; flex-wrap: nowrap; gap: clamp(4px, 0.7vh, 7px); }
  .sector-choices button { justify-content: flex-start; width: 100%; padding: 7px 14px; font-size: clamp(0.7rem, 0.8vw, 0.84rem); min-height: clamp(32px, 4.3vh, 40px); }
  .sector-description { min-height: 5.1em; margin-top: clamp(12px, 1.8vh, 20px); font-size: clamp(0.76rem, 0.85vw, 0.88rem); line-height: 1.6; }
}

/* Robot keeper chapter (home): heading + the penalty game stage. The poster is the first
   paint and the static fallback; HUD styles live in scenes/keeper.css (loaded with the game). */
.home-keeper { flex-direction: column; min-height: 100svh; padding: 26px 18px 18px; display: flex; scroll-margin-top: 0; }
.keeper-heading { text-align: center; padding: 14px 0 22px; }
.keeper-heading .eyebrow { margin-bottom: 12px; }
.keeper-heading h2 { font-size: clamp(2rem, 3.4vw, 3.3rem); }
.keeper-intro { max-width: 560px; margin: 12px auto 0; font-size: 1.05rem; }
.keeper-game { flex: 1 1 0%; display: flex; flex-direction: column; position: relative; min-height: 0; width: min(100%, 1300px); margin-inline: auto; }
.keeper-stage {
  position: relative; flex: 1 1 0%; min-height: 420px; overflow: hidden; isolation: isolate; border-radius: 28px;
  border: 1px solid #dfe4e8; box-shadow: rgba(34, 54, 74, 0.33) 0 22px 55px -38px; outline-offset: -4px;
  background: linear-gradient(180deg, #b2e3f8 0%, #e7f6fd 47%, #6a984f 47%, #618a4d 100%);
  touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
}
.keeper-stage:focus-visible { outline: 3px solid var(--blue); }
.keeper-canvas { position: absolute; inset: 0; opacity: 0; transition: opacity 0.45s; }
.keeper-canvas canvas { width: 100%; height: 100%; display: block; touch-action: pan-y; }
.keeper-game[data-ready="true"] .keeper-canvas { opacity: 1; }
.keeper-poster { position: absolute; inset: 0; pointer-events: none; transition: opacity 0.45s; }
.keeper-game[data-ready="true"] .keeper-poster { opacity: 0; }
.keeper-poster-goal {
  position: absolute; left: 50%; top: calc(47% - min(13vw, 150px)); width: min(40vw, 450px); height: min(13vw, 150px); transform: translateX(-50%);
  border: 6px solid #fff; border-bottom: 0; border-radius: 4px 4px 0 0;
  background: repeating-linear-gradient(90deg, #ffffff55 0 2px, transparent 2px 12px), repeating-linear-gradient(0deg, #ffffff55 0 2px, transparent 2px 12px);
}
.keeper-poster-keeper { position: absolute; left: 50%; top: calc(47% - min(9vw, 100px)); width: min(3.4vw, 38px); height: min(9vw, 100px); transform: translateX(-50%); border-radius: 8px 8px 4px 4px; background: linear-gradient(180deg, var(--coral) 0 34%, #fff 34% 70%, var(--ink) 70%); }
.keeper-poster-ball { position: absolute; left: 50%; bottom: 14%; width: 34px; height: 34px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle at 50% 50%, var(--ink) 0 28%, #fff 30%); box-shadow: 0 6px 10px -6px rgba(30, 41, 66, 0.6); }
.keeper-fallback {
  display: none; position: absolute; z-index: 5; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(380px, calc(100% - 40px));
  margin: 0; padding: 18px 22px; border-radius: 18px; background: #fff; color: var(--ink); text-align: center; font-size: 0.95rem; line-height: 1.55;
  border: 1.5px solid var(--ink); box-shadow: 0 5px 0 var(--ink);
}
.keeper-game[data-scene-error="true"] .keeper-fallback { display: block; }
.keeper-hud, .keeper-plate, .keeper-message, .keeper-hint, .keeper-ball-zone { display: none; }
.keeper-final[hidden] { display: none; }

/* About chapter (home) */
.home-about .image-frame { margin: 0; }

/* Approach chapter */
.approach-section { background: color-mix(in srgb, var(--yellow) 14%, var(--paper)); }
.steps { grid-template-columns: repeat(3, 1fr); gap: 65px; display: grid; }
.step-number { width: 58px; height: 58px; font-family: var(--heading-font); border-radius: 50%; place-items: center; margin-bottom: 24px; font-size: 1.2rem; display: grid; }
.steps h3 { font-size: 1.7rem; }
.steps p { font-size: 0.96rem; }
.discovery-heading { outline-offset: 10px; border-radius: 10px; font-size: clamp(1.6rem, 3.7vw, 3.25rem); margin-bottom: 12px; }
.wave-line { justify-content: center; align-items: center; gap: 0; min-height: 1.4em; padding-left: 1.04em; display: flex; position: relative; }
.wave-words { white-space: nowrap; display: inline-block; outline-offset: 6px; border-radius: 6px; }
.wave-letter { transform-origin: 50% 80%; display: inline-block; will-change: transform; }
.maker-reader, .maker-discoverer {
  pointer-events: none; opacity: 0; flex: 0 0 0.86em; width: 0.86em; height: 0.82em; margin-left: 0.18em; display: inline-block; position: relative;
  transform: translateY(3px) scale(0.88); transition: opacity 0.16s, transform 0.22s;
}
.maker-reader canvas, .maker-discoverer canvas, .maker-reader img, .maker-discoverer img { position: absolute; inset: -30% -25%; width: 150%; height: 160%; display: block; object-fit: contain; }
.wave-line[data-active="true"] .maker-reader, .wave-line[data-active="true"] .maker-discoverer { opacity: 1; transform: none; }
.approach-section .section-heading > p { margin-top: 20px; }

/* Solutions chapter + train */
.section-title-row { justify-content: space-between; align-items: flex-end; gap: 35px; margin-bottom: 46px; display: flex; }
.section-title-row .text-link { flex-shrink: 0; }
.solution-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 38px; display: grid; }
.solution-card { display: block; }
.solution-image { border-radius: 18px; margin-bottom: 25px; padding: 14px; overflow: hidden; }
.solution-image img { aspect-ratio: 1.3 / 1; object-fit: cover; border-radius: 10px; width: 100%; transition: transform 0.35s; }
.solution-card:hover .solution-image img { transform: scale(1.035); }
.solution-card h3 { font-size: 1.55rem; }
.solution-card p { margin: 12px 0 4px; font-size: 0.95rem; line-height: 1.7; }
.solution-card .text-link { font-size: 0.9rem; }
.solutions-title { --train-height: 200px; --train-top: -205px; position: relative; }
.solutions-title .train-trigger {
  left: 0; top: calc(var(--train-top) + var(--train-height) * 0.76); z-index: 4; background: var(--paper); outline-offset: 5px;
  letter-spacing: 0.055em; white-space: nowrap; margin: 0; padding: 7px 16px 7px 0; font-size: clamp(1.5rem, 1.8vw, 2rem);
  font-weight: 800; line-height: 1.15; display: inline-block; position: absolute; transform: translateY(-50%); text-transform: uppercase;
  font-family: var(--body-font); color: var(--ink);
}
.solutions-title .train-trigger .train-heading-text { display: inline-block; }
.solutions-title .hover-train { top: var(--train-top); height: var(--train-height); overflow: visible; }
.solutions-title .multiline, .hover-train canvas { z-index: 1; position: relative; }
.hover-train > canvas { clip-path: inset(0); }
.train-carriage-controls { z-index: 2; pointer-events: none; position: absolute; inset: 0; overflow: hidden; }
.train-carriage-button { pointer-events: auto; touch-action: pan-y; cursor: pointer; background: none; border: 0; border-radius: 8px; padding: 0; position: absolute; }
.train-carriage-button:hover { background: rgba(101, 200, 240, 0.1); }
.train-carriage-button:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; background: rgba(101, 200, 240, 0.12); }
.train-carriage-button[hidden], .train-explore-hint[hidden] { display: none; }
.hover-train[data-active="false"] .train-carriage-controls, .hover-train[data-exiting="true"] .train-carriage-controls { visibility: hidden; }
.train-explore-hint { color: #526579; letter-spacing: 0.02em; font: 500 12px/1.4 var(--body-font); position: absolute; bottom: 0; right: 18px; margin: 0; }
.hover-train[data-inspecting="true"] { z-index: 8; }
.hover-train[data-exiting="true"] { opacity: 1; transition: none; }
.hover-train[data-phase="exited"] { opacity: 0; transition: none; }
.train-lab-popover {
  z-index: 10; pointer-events: auto; touch-action: pan-y; text-align: center; color: var(--ink); background: #fff; border: 1px solid #dce5e9;
  border-radius: 16px; flex-direction: column; padding: 12px 12px 0; display: flex; position: absolute; box-shadow: rgba(23, 44, 67, 0.125) 0 10px 30px;
  animation: lab-appear 0.2s ease-out both; width: clamp(180px, 60vw, 226px);
}
.train-lab-popover::after { content: ""; left: var(--pointer-x, 50%); background: #fff; border-bottom: 1px solid #dce5e9; border-right: 1px solid #dce5e9; width: 12px; height: 12px; position: absolute; top: 100%; transform: translate(-50%, -6px) rotate(45deg); }
.train-lab-title { font-size: 13px; font-weight: 750; line-height: 1.25; display: block; }
.train-lab-model { background: radial-gradient(#eaf4f8, transparent 70%); border-radius: 8px; flex: 0 0 auto; height: 114px; margin-top: 4px; display: block; position: relative; }
.train-lab-loading { justify-content: center; align-items: center; padding: 8px; font-size: 12px; line-height: 1.4; display: flex; position: absolute; inset: 0; }
.train-lab-caption { margin: 3px 0 6px; font-size: 11px; line-height: 1.4; display: block; color: #4f5a70; }
.train-lab-caption strong { display: block; color: var(--ink); font-weight: 600; font-size: 12px; }
.train-lab-resume { color: #263951; background: #fff; border: 0; border-top: 1px solid #e8edf0; border-radius: 0 0 14px 14px; width: calc(100% + 24px); margin: 0 -12px; min-height: 44px; font-size: 12px; font-weight: 650; line-height: 1.3; display: block; }
.train-lab-resume:focus-visible { outline: 2px solid var(--focus); outline-offset: -3px; }
@keyframes lab-appear { 0% { opacity: 0; translate: 0 5px; } 100% { opacity: 1; translate: 0; } }

/* Audiences + CTA */
.audiences { grid-template-columns: 1fr 1fr; gap: 28px; display: grid; }
.audience { border-radius: 16px 65px 16px 16px; padding: 46px; }
.audience:nth-child(2) { border-radius: 65px 16px 16px; }
.audience h3 { font-size: 2.3rem; }
.audience p:not(.eyebrow) { color: var(--ink); max-width: 390px; }
.cta { text-align: center; background: color-mix(in srgb, var(--coral) 70%, var(--paper)); border-radius: 18px; margin-top: 105px; margin-bottom: 90px; padding: 70px 30px; position: relative; }
.cta h2 { font-size: clamp(2.3rem, 4vw, 3.8rem); }
.cta p:not(.eyebrow) { max-width: 500px; margin: 22px auto; color: var(--ink); opacity: 0.82; }

/* Home chapter rhythm: full-height chapters. (UX audit 2026-10-20: the proximity scroll-snap that used to
   pull the page to each chapter start is off. With chapters one screen tall, Chrome snapped every wheel
   notch, gentle trackpad scroll and arrow-key step back to where it started: from the top of the page
   1, 2 or 3 notches all returned to the hero, and only a fast 6-notch spin got through to the arena.
   Free scrolling lets visitors read at their own pace; the chapters still fill the screen.) */
.home .home-chapter-tall { min-height: 100svh; }
.home [data-home-chapter="approach"] { align-items: center; display: flex; }
.home [data-home-chapter="solutions"] { flex-direction: column; justify-content: center; padding-top: 210px; display: flex; }
.home [data-home-chapter="audiences"] { align-content: center; margin-block: 0; padding-block: 70px; }
.home .cta { flex-direction: column; justify-content: center; align-items: center; min-height: min(100svh, 760px); margin-block: 40px 60px; display: flex; }
html.chapter-scroll { scroll-snap-type: none; }
/* Short desktop windows (laptops): keep each chapter on one screen. */
@media (min-width: 901px) and (max-height: 800px) {
  .home [data-home-chapter="approach"] .section { padding-block: 44px; }
  .home [data-home-chapter="solutions"] { padding-block: 160px 34px; }
  .home-solutions .solutions-title { margin-bottom: 24px; --train-height: 145px; --train-top: -155px; }
  .home-solutions .solutions-title h2 { font-size: 2rem; }
  .home-solutions .solution-image { margin-bottom: 16px; padding: 10px; }
  .home-solutions .solution-image img { aspect-ratio: auto; height: 24svh; max-height: 190px; }
  .home-solutions .solution-card h3 { font-size: 1.3rem; }
  .home-solutions .solution-card p { font-size: 0.87rem; line-height: 1.5; }
  .home-keeper { padding-top: 14px; }
  .keeper-heading { padding: 4px 0 12px; }
  .keeper-heading .eyebrow { margin-bottom: 6px; }
  .keeper-heading h2 { font-size: 2.15rem; }
  .keeper-intro { margin-top: 6px; font-size: 0.95rem; }
  .keeper-stage { min-height: 360px; }
}
/* Portrait phones/tablets: the arena circle is width-limited, so size the stage to the
   circle instead of stretching it to a mostly empty full screen: room for the title and the back
   tag above it, the block itself (~0.6 of the stage width tall at the fill arena.js uses) and the
   hint (phones) below. */
@media (max-width: 900px) and (orientation: portrait) {
  .home-arena { min-height: 0; }
  .vision-workshop { min-height: 0; flex: none; }
  .vision-stage { flex: none; height: calc(64px + 60vw); min-height: 0; }
  .home-keeper { min-height: 0; }
  .keeper-game { flex: none; }
  .keeper-stage { flex: none; height: clamp(470px, 132vw, 760px); min-height: 0; }
}
/* portrait phones: the title spans the top centre, so the back tag and the block start below it */
@media (max-width: 640px) and (orientation: portrait) {
  .vision-stage { height: calc(136px + 64vw); }
}
/* Phones and tablets: natural section heights read better than forced full-screen chapters. */
@media (max-width: 900px) {
  .home .home-chapter-tall { min-height: 0; }
  .home [data-home-chapter="audiences"] { padding-block: 10px 0; }
  .home .cta { min-height: 0; margin-block: 60px 50px; }
}

/* ---------- Footer ---------- */
.site-footer { background: color-mix(in srgb, var(--coral) 12%, var(--paper)); margin-top: 40px; }
.footer-main { grid-template-columns: 1.2fr 1fr 1.2fr; gap: 40px; padding-block: 65px; display: grid; }
.footer-main h3 { font-family: var(--body-font); letter-spacing: 0; margin: 8px 0 22px; font-size: 0.9rem; font-weight: 600; }
.footer-main p { font-size: 0.95rem; }
.footer-main > div:first-child p { max-width: 240px; }
.footer-main > div > a:not(.brand) { width: fit-content; margin: 9px 0; font-size: 0.91rem; display: block; padding-block: 2px; }
.footer-main a:hover { text-decoration: underline; }
.footer-bottom { color: var(--muted-foreground); border-top: 1px solid color-mix(in srgb, var(--coral) 25%, var(--paper)); justify-content: space-between; gap: 15px; padding-block: 22px; font-size: 0.78rem; display: flex; }

/* ---------- Inner pages ---------- */
.page-intro { text-align: center; padding-top: 56px; padding-bottom: 68px; }
.page-intro h1 { font-size: clamp(2.7rem, 5.5vw, 5rem); }
.page-intro > p:not(.eyebrow) { max-width: 620px; margin: 28px auto 0; font-size: 1.08rem; }
.about-photo { max-width: 1040px; position: relative; }
.about-photo > img { object-fit: cover; object-position: center 44%; border-radius: 140px 20px 20px; width: 100%; max-height: 530px; aspect-ratio: 1.96 / 1; }
.photo-caption { background: var(--yellow); font-family: var(--heading-font); border-radius: 3px; padding: 15px 24px; position: absolute; bottom: 22px; right: -15px; transform: rotate(-3deg); margin: 0; color: var(--ink); box-shadow: 3px 4px 0 var(--ink); }
.mission-grid { grid-template-columns: 1fr 1fr; gap: 100px; display: grid; }
.mission-grid h2 { font-size: 2.5rem; }
.mission-grid p { margin-top: 25px; }
.story-section { background: color-mix(in srgb, var(--blue) 23%, var(--paper)); }
.story-copy { color: var(--muted-foreground); font-size: 1.03rem; line-height: 1.9; }
.story-copy p { margin-top: 0; }
.strength-grid { grid-template-columns: repeat(3, 1fr); gap: 45px; display: grid; }
.strength-grid article { border-top: 1px solid var(--border); padding-top: 25px; }
.strength-grid h3 { font-size: 1.5rem; }
.strength-grid p { font-size: 0.95rem; }

.all-solutions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 65px 50px; }
.all-solutions .solution-image img { aspect-ratio: 1.65 / 1; }
.solutions-catalog { padding-bottom: 100px; }
.gallery-section { background: color-mix(in srgb, var(--yellow) 15%, var(--paper)); }
.lab-gallery { grid-template-columns: repeat(4, 1fr); gap: 20px; display: grid; }
.lab-gallery figure { margin: 0; }
.lab-gallery img { aspect-ratio: 1 / 1; object-fit: cover; border-radius: 12px; width: 100%; }
.lab-gallery figcaption { font-family: var(--heading-font); margin-top: 15px; font-size: 1.08rem; }

.detail-intro { padding-top: 30px; }
.breadcrumb { color: var(--muted-foreground); margin-bottom: 45px; font-size: 0.86rem; display: inline-block; padding-block: 6px; }
.breadcrumb:hover { color: var(--ink); }
.detail-intro h1 { font-size: clamp(2.8rem, 5vw, 4.6rem); }
.detail-summary { margin: 24px 0 30px; font-size: 1.06rem; }
.detail-body { grid-template-columns: 1.2fr 1fr; gap: 100px; display: grid; }
.detail-body p { line-height: 1.9; }
.detail-body aside { background: color-mix(in srgb, var(--yellow) 22%, var(--paper)); border-radius: 20px; padding: 38px; align-self: start; }
.detail-body aside h3 { font-size: 1.5rem; }
.clean-list { margin: 20px 0 32px; padding: 0; list-style: none; }
.clean-list li { padding: 10px 0 10px 24px; position: relative; }
.clean-list li::before { content: "•"; position: absolute; left: 3px; }
.skill-tags { flex-wrap: wrap; gap: 8px; margin-top: 22px; display: flex; }
.skill-tags span { background: var(--paper); border-radius: 8px; padding: 6px 12px; font-size: 0.85rem; }
.school-note { border-block: 1px solid var(--border); grid-template-columns: 1fr 1.2fr; align-items: center; gap: 55px; padding-block: 35px; display: grid; }
.school-note h3 { font-size: 1.75rem; }
.school-note p { margin: 0; }

/* AI & Robotics title: the carriers' scene lives inside the intro's title, at the same
   modest size as the other lab titles. Room above holds the lifted letters and the drone;
   room below is the carriers' yard. The scene fades out at the column edges. */
.robotics-title { position: relative; font-size: clamp(2.5rem, 4.3vw, 4.15rem); padding-top: 1.75em; padding-bottom: 1.2em; margin-top: -8px; }
.rt-s { position: absolute; left: 0; top: 0; z-index: 2; pointer-events: none; visibility: hidden; white-space: pre; will-change: transform; }
.detail-intro .robotics-title h1 { font-size: 1em; position: relative; z-index: 1; white-space: nowrap; margin: 0; }
.rt-word { display: inline-block; }
.rt-letter { display: inline-block; will-change: transform; }
.rt-stage { position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 0; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.rt-stage canvas { display: block; }
@media (max-width: 900px) { .robotics-title { font-size: clamp(2.4rem, 7.4vw, 3.7rem); } }
/* Phones: one line, as large as the other lab titles where it fits (the title is 7.2em wide). */
@media (max-width: 640px) { .robotics-title { font-size: min(2.8rem, calc((100vw - 40px) / 7.3)); padding-top: 1.85em; } }

/* AI & Robotics special scene */
.robot-detail-visual { flex-direction: column; gap: 16px; min-width: 0; display: flex; }
.robot-vision { border-left: 2px solid var(--blue); max-width: 460px; color: var(--muted-foreground); margin: 28px 0 32px; padding-left: 18px; font-size: 0.97rem; }
.robot-detail-visual .image-frame { border-radius: 16px; padding: 8px; background: #b9e8f4; }
.robot-detail-visual .image-frame img { aspect-ratio: 1.42 / 1; object-position: center; max-height: none; border-radius: 10px; }
.detail-intro.has-robot > .split { grid-template-columns: 1fr 1.18fr; gap: 64px; align-items: start; }
.detail-intro.has-robot > .split > div:first-child { padding-top: 10px; }
.maker-scene { isolation: isolate; position: relative; }
.maker-canvas { width: 100%; height: 100%; display: block; position: relative; }
.maker-canvas canvas { width: 100%; height: 100%; display: block; }
.maker-fallback { pointer-events: none; place-items: center; display: grid; position: absolute; inset: 0; transition: opacity 0.4s; }
.maker-scene[data-ready="true"] .maker-fallback { opacity: 0; }
.maker-outcomes { background: linear-gradient(150deg, #f4f4f6, #fff); border-radius: 18px; overflow: hidden; }
.maker-outcomes .maker-canvas { height: 250px; }
.fallback-mat {
  background: repeating-linear-gradient(0deg, transparent 0, transparent 11px, #ffffff55 12px), repeating-linear-gradient(90deg, #4c90b3 0, #4c90b3 11px, #ffffff55 12px);
  border: 3px solid #37617f; border-radius: 4px; width: 66%; height: 120px; transform: perspective(600px) rotateX(52deg) rotate(-23deg);
}
.maker-hooks { background: linear-gradient(rgba(244, 247, 247, 0.2), transparent); border-radius: 0 0 14px 14px; height: 98px; margin-top: -3px; margin-bottom: 8px; overflow: hidden; }
.maker-hooks .maker-canvas { height: 98px; }
.kit-card:has(.maker-hooks) .small-label { margin-top: 0; }

/* ---------- Kits ---------- */
.kit-tabs { display: flex; flex-wrap: wrap; gap: 6px; padding: 5px; background: #edeef0; border-radius: 14px; width: fit-content; max-width: 100%; margin: 0 auto 34px; }
.kit-tabs [role="tab"] {
  border: 0; background: transparent; color: var(--muted-foreground); border-radius: 10px; padding: 10px 18px; font-size: 0.92rem; font-weight: 500;
  min-height: 44px; transition: color 0.15s cubic-bezier(0.4, 0, 0.2, 1), background 0.15s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.kit-tabs [role="tab"]:hover { color: var(--ink); }
.kit-tabs [role="tab"][aria-selected="true"] { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(30, 41, 66, 0.12), 0 0 0 1px rgba(30, 41, 66, 0.06); }
.catalog-count { border-bottom: 1px solid var(--border); margin: 0 0 35px; padding-bottom: 15px; font-size: 0.84rem; color: var(--muted-foreground); }
.kit-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 55px 35px; display: grid; }
.kit-card[hidden] { display: none; }
.kit-picture { background: #edeef0; border: 0; border-radius: 18px; width: 100%; padding: 0; display: block; overflow: hidden; cursor: zoom-in; }
.kit-picture img { aspect-ratio: 1.2 / 1; object-fit: cover; width: 100%; transition: transform 0.35s; }
.kit-picture:hover img { transform: scale(1.035); }
.kit-card .small-label { margin: 22px 0 10px; }
.kit-card h2 { font-size: 1.7rem; }
.kit-card > p:not(.small-label) { margin: 14px 0 0; font-size: 0.94rem; }
.kit-card button.text-link { margin-top: 18px; font-size: 0.88rem; padding-inline: 0; min-height: 32px; }

/* Dialog */
.kit-dialog { border: 0; padding: 0; background: transparent; max-width: min(36rem, calc(100vw - 32px)); width: 100%; overflow: visible; color: var(--ink); }
.kit-dialog::backdrop { background: rgba(0, 0, 0, 0.5); animation: fade-in 0.15s ease both; }
.kit-dialog[data-closing]::backdrop { animation: fade-out 0.15s ease both; }
.kit-dialog-panel { position: relative; background: #fff; border-radius: 24px; padding: 28px; max-height: 90dvh; overflow-y: auto; box-shadow: 0 20px 60px rgba(30, 41, 66, 0.25); animation: dialog-in 0.2s ease both; overscroll-behavior: contain; }
.kit-dialog[data-closing] .kit-dialog-panel { animation: dialog-out 0.2s ease both; }
.kit-dialog-close { position: absolute; z-index: 2; top: 12px; right: 12px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border); background: rgba(255, 255, 255, 0.94); opacity: 0.7; transition: opacity 0.15s; display: grid; place-items: center; color: var(--ink); box-shadow: 0 2px 8px rgba(30, 41, 66, 0.12); }
.kit-dialog-close:hover, .kit-dialog-close:focus-visible { opacity: 1; }
.kit-dialog-image { object-fit: contain; background: #f6f6f7; border-radius: 12px; width: 100%; height: 250px; margin-bottom: 10px; }
.kit-dialog h2 { font-size: 1.9rem; margin-top: 18px; padding-right: 40px; }
.kit-dialog p { margin: 12px 0 22px; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes dialog-in { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: none; } }
@keyframes dialog-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: scale(0.95); } }
body.dialog-open { overflow: hidden; }

/* ---------- Contact ---------- */
.contact-layout { grid-template-columns: 1fr 1.35fr; gap: 85px; padding-bottom: 65px; display: grid; }
.contact-info > div { margin-bottom: 35px; }
.contact-value { font-family: var(--heading-font); letter-spacing: -0.02em; overflow-wrap: anywhere; font-size: clamp(1.2rem, 2.1vw, 1.8rem); display: inline-block; padding-block: 2px; }
.contact-value:hover { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px; text-decoration-color: var(--coral); }
.contact-aside { border-radius: 8px 45px 8px 8px; margin-top: 45px; padding: 30px; }
.contact-aside h3 { font-size: 1.4rem; }
.contact-aside p { color: var(--ink); margin-bottom: 0; font-size: 0.92rem; }
.enquiry-form { background: color-mix(in srgb, var(--blue) 12%, var(--paper)); border-radius: 22px; padding: 36px; }
.enquiry-form h2 { margin-bottom: 28px; font-size: 1.9rem; }
.field { flex-direction: column; gap: 9px; margin-bottom: 24px; display: flex; min-width: 0; }
.field label { font-size: 0.875rem; font-weight: 500; line-height: 1.4; }
.field label span { color: var(--muted-foreground); font-weight: 400; }
.field input, .field textarea, .field select {
  width: 100%; font: inherit; font-size: 1rem; color: var(--ink); background: #fff; border: 1px solid var(--input); border-radius: 10px;
  transition: color 0.15s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.15s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.15s;
}
.field input, .field select { height: 46px; padding: 0 12px; }
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%231e2942' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 38px; }
.field textarea { padding: 12px; line-height: 1.6; resize: vertical; min-height: 120px; }
.field :is(input, textarea, select):focus-visible { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(72, 123, 175, 0.35); }
.form-grid { grid-template-columns: 1fr 1fr; gap: 20px; display: grid; }
.form-note { margin: 18px 0 0; font-size: 0.8rem; line-height: 1.5; }
.form-status { color: var(--ink); margin: 14px 0 0; font-size: 0.88rem; background: #fff; border-radius: 10px; padding: 12px 14px; border: 1px solid var(--border); }
.form-status:empty { display: none; }
.enquiry-form .button { border: 1.5px solid var(--ink); }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .wrap { width: calc(100% - 48px); }
  .section { padding-block: 75px; }
  .split { gap: 40px; }
  .navigation { gap: 10px; }
  .nav-trigger { padding: 10px 7px; }
  .navigation .nav-contact { padding: 11px 16px; }
  .ladder-dropdown { width: 325px; }
  .steps { gap: 30px; }
  .solution-grid { gap: 24px; }
  .audience { padding: 32px; }
  .mission-grid, .detail-body, .contact-layout { gap: 45px; }
  .lab-gallery { grid-template-columns: repeat(2, 1fr); gap: 28px; }
  .kit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 45px 28px; }
  .strength-grid { grid-template-columns: repeat(2, 1fr); }
  .enquiry-form { padding: 25px; }
  .form-grid { grid-template-columns: 1fr; gap: 0; }
  .cta { margin-top: 75px; margin-bottom: 65px; }
  .about-photo > img { border-top-left-radius: 90px; }
  .footer-main { grid-template-columns: 1fr 1fr; }
  .footer-main > div:first-child { grid-column: 1 / -1; }
  .detail-intro.has-robot > .split { grid-template-columns: 1fr; gap: 32px; }
  .detail-intro.has-robot > .split > div:first-child { padding-top: 0; }
}

@media (max-width: 820px) {
  :root { --home-header-height: 86px; }
  .site-header { min-height: 86px; }
  .menu-toggle {
    border: 1.5px solid var(--ink); background: var(--yellow); box-shadow: 0 3px 0 var(--ink); border-radius: 10px;
    min-width: 46px; min-height: 46px; display: block;
  }
  .navigation { display: none; }
  .navigation.open {
    background: color-mix(in srgb, var(--paper) 96%, var(--blue)); border: 1.5px solid var(--ink); overscroll-behavior: contain;
    max-height: calc(100dvh - 105px); box-shadow: 0 6px 0 var(--ink), 0 16px 32px #1e294219; border-radius: 16px;
    flex-direction: column; align-items: stretch; gap: 16px; padding: 22px 20px 25px; display: flex; position: absolute;
    top: 78px; left: 0; right: 0; overflow: auto; perspective: 950px; animation: main-ladder-reveal 0.66s linear both;
  }
  .navigation.open::before, .navigation.open::after {
    content: ""; border: 1px solid var(--ink); background: repeating-linear-gradient(35deg, var(--yellow) 0 3px, var(--ink) 3px 6px);
    transform-origin: 50% 0; pointer-events: none; border-radius: 5px; width: 5px; position: absolute; top: 8px; bottom: 14px;
    animation: ladder-rope-release 0.6s linear both;
  }
  .navigation.open::before { left: 29px; }
  .navigation.open::after { right: 29px; }
  .navigation.open > .nav-group, .navigation.open > .nav-contact, .navigation.open > .nav-home {
    z-index: 1; transform-origin: 50% -15px; position: relative;
    animation: ladder-rung-release 0.36s cubic-bezier(0.2, 0.7, 0.25, 1) both; animation-delay: var(--main-delay, 0.27s);
  }
  .navigation.open .mobile-ladder-roll {
    z-index: 4; pointer-events: none; border: 1.5px solid var(--ink); border-radius: 12px; height: 25px; display: block; position: absolute;
    top: 0; left: 13px; right: 13px; box-shadow: rgba(30, 41, 66, 0.17) 0 3px 6px;
    background: linear-gradient(180deg, var(--yellow), var(--coral) 38%, var(--paper) 44%, var(--coral) 53%, var(--ink));
    animation: ladder-roll-down 0.66s linear both;
  }
  .nav-trigger { border: 1px solid var(--ink); background: var(--yellow); width: 100%; box-shadow: 0 3px 0 var(--ink); padding: 12px 15px; min-height: 50px; }
  .nav-group[data-group="solutions"] .nav-trigger { background: var(--coral); }
  .nav-group[data-group="kits"] .nav-trigger { background: var(--blue); }
  .navigation .nav-home { background: var(--paper); justify-content: center; }
  .nav-trigger:hover, .nav-trigger[data-active="true"] { filter: brightness(1.02); }
  .navigation .nav-contact { text-align: center; border-radius: 10px; margin-bottom: 5px; min-height: 50px; }
  .ladder-dropdown { width: 100%; max-height: none; padding: 18px 4px 1px; position: static; overflow: visible; }
  .ladder-rung { width: 100%; margin-left: 0; }
  .navigation .ladder-link { gap: 10px; min-height: 48px; padding: 12px 33px; font-size: 0.875rem; }
}
@keyframes main-ladder-reveal { 0% { clip-path: inset(0 -12px calc(100% - 38px)); } 100% { clip-path: inset(0 -12px -35px); } }

@media (max-width: 640px) {
  .wrap { width: calc(100% - 36px); }
  .site-header { gap: 16px; }
  .section { padding-block: 60px; }
  .split { grid-template-columns: 1fr; gap: 35px; }
  .image-frame { padding: 16px; }
  .button { min-height: 49px; padding: 12px 20px; }
  .button-row { gap: 10px; }
  .hero-copy { font-size: 1rem; }
  .hero .eyebrow { letter-spacing: 0.08em; }
  /* the heading as large as the width allows: the 3D makerspace spans ~8.7em (the widest row
     plus the stairs and landings at both ends), kept ~5px clear of the screen edges */
  .hero .headline-workshop h1 { font-size: clamp(1.4rem, calc((100vw - 10px) / 8.72), 3.4rem); }
  .hero .button { font-size: 0.85rem; }
  .hero .button-row .button { min-height: 70px; padding-inline: 20px; }
  /* phones: the hero starts right under the header (it no longer floats in the middle of a
     tall screen), so the eyebrow, the whole diorama, the copy and the buttons share the first
     screen; it keeps its full height, so the arena below stays out of view while the heading starts */
  .home-intro { justify-content: flex-start; padding-block: clamp(14px, 2.8svh, 26px) 40px; }
  .home-intro .hero-copy { margin-block: clamp(22px, 4.2svh, 40px) 0; }
  .home-intro .button-row { margin-top: clamp(24px, 3.8svh, 36px); }
  .hero-foot { gap: 9px; padding: 10px 5px; font-size: 0.68rem; }
  .hero-foot > span + span::before, .hero-foot > span:last-child { display: none; }

  .home-arena { padding: 8px 6px 0; }
  .vision-workshop { border-radius: 20px; }
  .vision-stage { min-height: 280px; }
  .arena-label { letter-spacing: 0.14em; font-size: 0.55rem; top: 16px; left: 16px; }
  .arena-label small { font-size: 0.65rem; }
  .arena-label::before { width: 5px; height: 5px; margin-right: 7px; }
  .arena-reset { padding: 6px 10px; font-size: 0.66rem; top: 12px; right: 12px; min-height: 40px; }
  .arena-hint { gap: 5px; font-size: 0.62rem; bottom: 8px; }
  .sector-markers > span { letter-spacing: 0; max-width: 78px; padding: 3px 5px; font-size: 8px; line-height: 1.2; }
  .sector-markers > span::after { height: 5px; }
  .arena-sector-story { padding: 12px 14px; }
  .sector-invitation { font-size: 1.08rem; margin-bottom: 9px; }
  .sector-choices { gap: 6px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; padding-bottom: 6px; margin-inline: -14px; padding-inline: 14px; scroll-padding-inline: 14px; scroll-snap-type: x proximity; }
  .sector-choices button { padding: 8px 12px; font-size: 0.72rem; flex-shrink: 0; min-height: 44px; scroll-snap-align: start; }
  .sector-description { min-height: 3.4em; margin-top: 8px; }
  .home-keeper { padding: 8px 8px 0; }
  .keeper-heading { padding: 34px 12px 16px; }
  .keeper-heading .eyebrow { margin-bottom: 10px; }
  .keeper-intro { font-size: 0.98rem; margin-top: 10px; }
  .keeper-stage { border-radius: 20px; }

  .section-heading { margin-bottom: 38px; }
  .section-title-row { flex-direction: column; align-items: flex-start; gap: 15px; margin-bottom: 35px; }
  .solution-grid, .all-solutions, .steps, .audiences, .mission-grid, .strength-grid, .detail-body, .contact-layout { grid-template-columns: 1fr; }
  .solution-grid { gap: 44px; }
  .solution-image img { aspect-ratio: 1.5 / 1; }
  .step-number { width: 48px; height: 48px; margin-bottom: 16px; }
  .audience { padding: 32px; }
  .audience h3 { font-size: 2rem; }
  .discovery-heading { font-size: clamp(1.25rem, 5.65vw, 1.5rem); }
  .solutions-title { --train-height: 145px; --train-top: -150px; }
  .solutions-title .train-trigger { letter-spacing: 0.035em; padding: 6px 10px 6px 0; font-size: clamp(1.15rem, 5.3vw, 1.4rem); }
  .home [data-home-chapter="solutions"] { padding-top: 155px; }
  .hover-phone { width: 95px; height: 100px; }
  .cta { margin-top: 60px; margin-bottom: 50px; padding: 50px 20px; }

  .page-intro { padding: 30px 0 45px; }
  .page-intro > p:not(.eyebrow) { font-size: 1rem; }
  .about-photo > img { aspect-ratio: 1.2 / 1; border-radius: 70px 15px 15px; }
  .photo-caption { padding: 8px 14px; font-size: 0.8rem; bottom: 14px; right: 0; }
  .mission-grid { gap: 42px; }
  .mission-grid h2 { font-size: 2rem; }
  .all-solutions { gap: 42px; }
  .solutions-catalog { padding-bottom: 65px; }
  .lab-gallery { gap: 18px; }
  .lab-gallery figcaption { font-size: 0.9rem; }
  .detail-body { gap: 35px; }
  .detail-body aside { padding: 25px; }
  .detail-intro .split { gap: 35px; }
  .detail-intro .eyebrow { margin-bottom: 15px; }
  .breadcrumb { margin-bottom: 30px; }
  .school-note { grid-template-columns: 1fr; gap: 20px; }
  .robot-detail-visual .image-frame img { aspect-ratio: 1.05 / 1; }
  .maker-outcomes .maker-canvas { height: 205px; }
  .maker-hooks, .maker-hooks .maker-canvas { height: 108px; }

  .kit-grid { grid-template-columns: 1fr; gap: 40px; }
  .kit-picture img { aspect-ratio: 1.4 / 1; }
  .kit-tabs { width: 100%; display: grid; grid-template-columns: 1fr 1fr; }
  .kit-tabs [role="tab"] { padding: 10px 13px; font-size: 0.88rem; }
  .kit-dialog-panel { padding: 22px 18px; border-radius: 20px; }
  .kit-dialog-image { height: 210px; }
  .kit-dialog h2 { font-size: 1.6rem; }

  .contact-layout { gap: 18px; }
  .contact-value { font-size: 1.45rem; }
  .enquiry-form { padding: 24px 20px; }
  .contact-aside { margin-top: 25px; }

  .footer-main { grid-template-columns: 1fr; gap: 20px; padding-block: 42px; }
  .footer-main > div:first-child { margin-bottom: 8px; }
  .footer-bottom { flex-direction: column; gap: 6px; }
}

@media (max-width: 640px) and (max-height: 700px) {
  .home-intro { padding-block: 12px 32px; }
  .home-intro .hero-copy { margin-block: 18px; font-size: 0.94rem; }
  .home-intro .button-row { margin-top: 18px; }
  .home-intro .button-row .button { min-height: 54px; }
}

@media (max-width: 360px) {
  .solutions-title { --train-height: 120px; --train-top: -130px; }
  .home-intro .button-row { flex-wrap: nowrap; gap: 8px; }
  .home-intro .button-row .button { padding-inline: 13px; font-size: 0.78rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, ::before, ::after { transition: none !important; animation: none !important; }
  .ladder-roll, .mobile-ladder-roll { display: none !important; }
  .wave-letter { transform: none !important; }
  .navigation .ladder-link:hover, .navigation .nav-contact:hover, .button:hover { transform: none; }
}

/* ---------- UX audit (2026-10-20): touch targets, notch-safe content column, form status links ---------- */
/* Phones and tablets: every text link gets a ~44 px tall tap area. The underline and the layout stay
   exactly where they are; an invisible margin around the link takes the tap. Footer links (stacked
   close together) get real padding instead, so neighbouring tap areas never overlap. */
@media (pointer: coarse) {
  a.text-link, button.text-link, .breadcrumb, .form-status a { position: relative; }
  a.text-link::after, button.text-link::after, .breadcrumb::after, .form-status a::after { content: ""; position: absolute; inset: -8px -6px; }
  .footer-main > div > a:not(.brand) { margin: 0; padding-block: 10px; }
  .footer-main h3 { margin-bottom: 12px; }
  .contact-value { min-height: 44px; display: inline-flex; align-items: center; }
}
/* Notched phones in landscape (the page uses viewport-fit=cover): the content column keeps clear of the
   notch and the rounded corners, while full-bleed backgrounds still run edge to edge. */
@supports (width: max(1px, env(safe-area-inset-left, 0px))) {
  .wrap { width: min(1180px, 100% - 2 * max(44px, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px))); }
  .footer-bottom { padding-bottom: max(22px, env(safe-area-inset-bottom, 0px)); }
  @media (max-width: 900px) { .wrap { width: calc(100% - 2 * max(24px, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px))); } }
  @media (max-width: 640px) { .wrap { width: calc(100% - 2 * max(18px, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px))); } }
}
/* ---------- Arena + keeper controls (UX audit 2026-10-20) ---------- */
/* Touch: every arena control is at least 44 px tall (the reset pill and the bay buttons in every layout). */
@media (pointer: coarse) {
  .arena-reset { min-height: 44px; padding-block: 6px; display: inline-flex; align-items: center; }
  .sector-choices button { min-height: 44px; }
}
/* Phones: the bay buttons are one clean scrolling strip (no scrollbar, gentle snapping); a soft fade on
   the side that has more buttons shows there is more to scroll (arena.js sets data-scroll). */
@media (max-width: 640px) {
  .sector-choices { scrollbar-width: none; overscroll-behavior-x: contain; scroll-snap-type: x proximity; }
  .sector-choices::-webkit-scrollbar { display: none; }
  .sector-choices[data-scroll="start"] { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); }
  .sector-choices[data-scroll="middle"] { -webkit-mask-image: linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 48px), transparent); }
  .sector-choices[data-scroll="end"] { -webkit-mask-image: linear-gradient(90deg, transparent, #000 48px); mask-image: linear-gradient(90deg, transparent, #000 48px); }
}
/* Landscape phones: each game stage fits the screen (it was 420-480 px tall on a 390 px screen, so the
   keeper's HUD and ball were cut off), and the arena's side column stays compact around its 44 px buttons. */
@media (orientation: landscape) and (max-height: 560px) {
  .home-keeper { min-height: 0; }
  .keeper-game { flex: none; }
  .keeper-stage { flex: none; min-height: 0; height: min(500px, calc(100svh - 20px)); }
  /* keeper only: the whole stage takes the swipe (touch-action: none), so in landscape it leaves a
     strip of page at each side, under the thumbs, for scrolling (in portrait the page above and
     below the shorter stage does that) */
  .keeper-stage { width: min(100%, calc(100vw - 128px), calc((100svh - 20px) * 1.9)); margin-inline: auto; }
}
@media (orientation: landscape) and (max-height: 560px) and (min-width: 700px) and (min-aspect-ratio: 3/2) {
  .home-arena { height: auto; min-height: 0; }
  .vision-workshop { flex: none; height: calc(100svh - 20px); min-height: 0; }
  .arena-sector-story { justify-content: flex-start; padding-block: 12px; }
  .sector-invitation { font-size: 1rem; margin-bottom: 8px; }
  .sector-description { min-height: 0; margin-top: 8px; font-size: 0.74rem; line-height: 1.45; }
}
/* Notched phones in landscape: the arena and the keeper cards (with their title, HUD and buttons) keep
   clear of the notch and the rounded corners. */
@supports (padding: max(1px, env(safe-area-inset-left, 0px))) {
  .home-arena { padding-left: max(12px, env(safe-area-inset-left, 0px)); padding-right: max(12px, env(safe-area-inset-right, 0px)); }
  .home-keeper { padding-left: max(18px, env(safe-area-inset-left, 0px)); padding-right: max(18px, env(safe-area-inset-right, 0px)); padding-bottom: max(18px, env(safe-area-inset-bottom, 0px)); }
  @media (max-width: 640px) {
    .home-arena { padding-left: max(6px, env(safe-area-inset-left, 0px)); padding-right: max(6px, env(safe-area-inset-right, 0px)); }
    .home-keeper { padding-left: max(8px, env(safe-area-inset-left, 0px)); padding-right: max(8px, env(safe-area-inset-right, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px); }
  }
}

/* the contact form's "nothing opened?" links */
.form-status a { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }

/* Hero film: the makerspace-letters animation made in Higgsfield, looping silently.
   The real heading stays in the DOM (visually hidden) for search and screen readers. */
.hero-film { position: relative; width: min(100%, 1240px); margin: 6px auto 4px; aspect-ratio: 16 / 9; }
.hero-film-video { display: block; width: 100%; height: 100%; object-fit: cover; background: var(--paper); }
@media (max-width: 640px) { .hero-film { width: calc(100% + 24px); margin-inline: -12px; } }

/* ---------- Our solutions, one view (home): heading row, the Vande Bharat bridge band and the
   metro hub share one screen and one snap point. The band (train.js host, placed with
   --train-top / --train-height inside .solutions-title) fills the title row's reserved bottom
   strip, directly over the hub, so the bridge reads as the horizon above the metro city; its
   boards hang inside the band (61-87% of its height), clear of the hub below. The hub's outer
   size is set here: --metro-stage-h (stage) and --metro-chips (station row) make
   band + hub fit 100svh (the header is not sticky). */
.home .home-solutions.solutions-combined {
  --sol-band: 200px;                       /* train band height (train.js frames to it) */
  --sol-pad-top: clamp(12px, 2.2svh, 26px);
  --sol-pad-bottom: clamp(12px, 2svh, 24px);
  --sol-head: 40px;                        /* heading row: the H2 on one line beside the link */
  --sol-head-gap: 8px;                     /* heading row -> band */
  --sol-band-gap: 6px;                     /* band -> hub (the band's hint sits in its last 14px) */
  --metro-chips: 71px;                     /* station chips row under the stage (one row) */
  --sol-above-stage: calc(var(--sol-pad-top) + var(--sol-head) + var(--sol-head-gap) + var(--sol-band) + var(--sol-band-gap));
  /* (- 2px: the hub's 1px border, top and bottom) */
  --metro-stage-h: clamp(380px, calc(100svh - var(--sol-above-stage) - var(--metro-chips) - var(--sol-pad-bottom) - 2px), 700px);
  min-height: 100svh; padding-block: var(--sol-pad-top) var(--sol-pad-bottom); justify-content: center;
}
.home .solutions-combined .solutions-title {
  --train-height: var(--sol-band);
  --train-top: calc(100% - var(--sol-band));   /* the band fills the reserved bottom strip */
  flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 24px; margin: 0;
  min-height: calc(var(--sol-head) + var(--sol-head-gap) + var(--sol-band));
  padding-bottom: calc(var(--sol-head-gap) + var(--sol-band));
}
.home .solutions-combined .solutions-heading { min-width: 0; }
.home .solutions-combined .solutions-title h2 {
  white-space: normal; font-size: clamp(1.55rem, 2.3vw, 2.15rem); line-height: 1.12; letter-spacing: -0.03em;
}
.home .solutions-combined .solutions-title .text-link { margin: 0 0 3px; font-size: 0.92rem; }
.home .solutions-combined #lab-metro { margin-top: var(--sol-band-gap); }
/* (metro.css sizes .metro-stage with var(--metro-stage-h, ...) and .metro-stops with
   var(--metro-chips-h, auto) / var(--metro-chips-pad, ...), inherited from this section) */
@media (min-width: 1000px) {
  .home .home-solutions.solutions-combined { --metro-chips-h: var(--metro-chips); }
}
/* one snap point for the combined view: the section's own (start); not the hub's centre */
.chapter-scroll .solutions-combined #lab-metro { scroll-snap-align: none; }
/* short desktop windows: the 145px band (train.css uses the same breakpoint) */
@media (min-width: 641px) and (max-height: 800px) {
  .home .home-solutions.solutions-combined { --sol-band: 145px; --sol-head: 36px; --sol-head-gap: 6px; }
  .home .solutions-combined .solutions-title h2 { font-size: clamp(1.45rem, 2.1vw, 1.85rem); }
}
/* desktop hub between 821 and 999px: the station chips wrap onto two rows */
@media (min-width: 821px) and (max-width: 999px) {
  .home .home-solutions.solutions-combined { --metro-chips: 120px; }
}
/* phones and tablets: the hub's map is portrait and its card, mission board and chips follow
   the stage, so only heading + band + stage have to share the first screen */
@media (max-width: 820px) {
  .home .home-solutions.solutions-combined {
    --metro-stage-h: clamp(340px, min(132vw, calc(100svh - var(--sol-above-stage) - 10px)), 600px);
    padding-bottom: 40px;
  }
}
@media (max-width: 900px) {
  .home .home-solutions.solutions-combined { min-height: 0; }
}
@media (max-width: 640px) {
  .home .home-solutions.solutions-combined { --sol-band: 145px; --sol-head: 48px; --sol-head-gap: 6px; --sol-pad-top: 14px; --sol-band-gap: 10px; }
  .home .solutions-combined .solutions-title { gap: 12px; }
  /* the phone boards hang to the band's last few px: the "Tap a carriage" hint sits just
     under the band (in the band -> hub gap), clear of the KIDTECHLABS board and of the hub */
  .home .solutions-combined .train-explore-hint { bottom: -6px; }
  .home .solutions-combined .solutions-title h2 { font-size: clamp(1.15rem, 5.3vw, 1.38rem); }
  .home .solutions-combined .solutions-title .text-link { font-size: 0.8rem; margin-bottom: 1px; }
}
@media (max-width: 360px) {
  .home .home-solutions.solutions-combined { --sol-band: 120px; }
}

/* ---------- Our solutions without the big heading: the row above the bridge band now carries only
   "See all our solutions" (right). Its height shrinks to the link's, and the freed height goes to
   the metro stage (--metro-stage-h is computed from --sol-head). */
.home .home-solutions.solutions-combined { --sol-head: 26px; }
.home .solutions-combined .solutions-title { justify-content: flex-end; }
.home .solutions-combined .solutions-heading { flex: 0 0 0; width: 0; }
.home .solutions-combined .solutions-title .text-link { position: relative; z-index: 5; line-height: 1.2; }
@media (min-width: 641px) and (max-height: 800px) {
  .home .home-solutions.solutions-combined { --sol-head: 24px; }
}
@media (max-width: 640px) {
  .home .home-solutions.solutions-combined { --sol-head: 22px; }
}

/* Owner (2026-10-19): remove the "Lab stations" list under the metro map. The links stay for
   keyboards and screen readers (visually hidden); the freed height goes to the 3D stage. */
.home .home-solutions.solutions-combined { --metro-chips: 0px; --metro-chips-h: 0px; }
@media (max-width: 999px) { .home .home-solutions.solutions-combined { --metro-chips: 0px; } }
.home #lab-metro .metro-stops {
  position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important;
  overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; border: 0 !important;
}

/* Owner (2026-10-19): remove the station info pop-up card over the metro map (it covered the 3D).
   Once the 3D is running the cards are visually hidden (kept for screen readers; the static
   no-WebGL fallback still shows them as the lab list). A second tap on a station opens its lab. */
.home #lab-metro[data-ready="true"] .metro-cards {
  position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important;
  overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; border: 0 !important;
}

/* ---------- Owner (2026-10-20): "Fill this entire section with the metro stations 3D animation".
   One immersive view: the Vande Bharat bridge band on top flows straight into the full-bleed 3D
   city below (edge to edge, no card frame or shadow); the stage takes every pixel the screen has
   left under the band, so band + city are exactly one screen (100svh) and one snap point on every
   size, phones included (one finger still scrolls the page; two fingers explore the city).
   "See all our solutions" is a small link over the city's top right corner (the map's tools move
   to its top left on desktops). Only the title row keeps the content column ("OUR SOLUTIONS"). */
.home .home-solutions.solutions-combined {
  --sol-head: 0px; --sol-head-gap: 0px; --sol-pad-top: 0px; --sol-pad-bottom: 0px; --sol-band-gap: 0px;
  --metro-stage-h: max(340px, calc(100svh - var(--sol-band)));
  position: relative; min-height: 100svh; padding: 0; justify-content: flex-start;
}
.home .solutions-combined .solutions-title { margin-inline: auto; }
.home .solutions-combined .metro-hub { width: 100%; border: 0; border-radius: 0; box-shadow: none; background: transparent; }
.home .solutions-combined .metro-stage { background: linear-gradient(180deg, #fff 0%, #f4f9fb 30%, #eaf2f7 100%); }
/* the band's fading arch flows into the city: a soft paper fade at the stage's top edge, and a
   shorter one at its foot into the next chapter (above the canvas, under every overlay) */
.home .solutions-combined .metro-stage::before, .home .solutions-combined .metro-stage::after {
  content: ""; position: absolute; left: 0; right: 0; z-index: 1; pointer-events: none;
}
.home .solutions-combined .metro-stage::before { top: 0; height: clamp(14px, 2.4svh, 26px); background: linear-gradient(180deg, var(--paper), rgba(255, 255, 255, 0)); }
.home .solutions-combined .metro-stage::after { bottom: 0; height: 12px; background: linear-gradient(0deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0)); }
.home .solutions-combined .solutions-all {
  position: absolute; z-index: 6; right: 16px; top: calc(var(--sol-band) + 14px);
  display: inline-flex; align-items: center; gap: 4px; min-height: 36px; margin: 0; padding: 7px 14px 7px 15px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.95); border: 1px solid #d4dde3; color: var(--ink); white-space: nowrap;
  font: 600 0.8rem/1.2 var(--body-font); letter-spacing: 0.005em; box-shadow: 0 6px 16px -10px rgba(23, 44, 67, 0.45);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.home .solutions-combined .solutions-all span { color: #c9532f; font-weight: 700; }
.home .solutions-combined .solutions-all:hover { border-color: var(--ink); box-shadow: 0 2px 0 var(--ink); }
.home .solutions-combined .solutions-all:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
@media (min-width: 821px) {
  .home .solutions-combined .metro-hub .metro-tools { top: 14px; left: 16px; right: auto; }
}
/* (the map's buttons appear with the 3D, in their final place: nothing moves when it arrives) */
.home .solutions-combined .metro-hub:not([data-ready="true"]) .metro-ui { visibility: hidden; }
@media (max-width: 820px) {
  .home .solutions-combined .solutions-all { right: 8px; top: calc(var(--sol-band) + 8px); min-height: 32px; padding: 6px 11px 6px 12px; font-size: 0.74rem; }
  .home .solutions-combined .metro-glimpse { top: 50px; }
}
/* without the 3D (no WebGL, a module error, no JavaScript) the hub is the lab list: the link sits
   above it, in the flow */
.home .solutions-combined:has(.metro-hub[data-fallback="true"], .metro-hub[data-scene-error="true"]) .solutions-all {
  position: static; align-self: flex-end; margin: 10px 18px 0;
}
.home .solutions-combined .metro-hub[data-fallback="true"] .metro-cards,
.home .solutions-combined .metro-hub[data-scene-error="true"] .metro-cards { width: min(1180px, 100% - 32px); margin-inline: auto; }
/* while the 3D loads the card list never takes room under the stage (no shift when it arrives) */
@media (scripting: enabled) {
  .home #lab-metro:not([data-fallback="true"]):not([data-scene-error="true"]) .metro-cards {
    position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important;
    overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; border: 0 !important;
  }
}

/* ---------- Controls audit (2026-10-20) */
/* keyboard: the visually hidden station list shows itself while one of its links has focus, as a
   compact strip over the map's bottom left (Tab no longer lands on invisible links) */
.home #lab-metro .metro-stops:focus-within {
  position: absolute !important; z-index: 8; left: calc(16px + env(safe-area-inset-left, 0px)); bottom: 16px;
  width: auto !important; height: auto !important; max-width: min(720px, calc(100% - 32px)); margin: 0 !important;
  padding: 10px 12px !important; overflow: visible !important; clip: auto !important; white-space: normal !important;
  border: 1px solid #d4dde3 !important; border-radius: 16px; background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 14px 30px -16px rgba(23, 44, 67, 0.5);
}
.home #lab-metro .metro-stops:focus-within ol { display: flex; flex-wrap: wrap; gap: 6px; }
.home #lab-metro .metro-stops:focus-within .metro-stop { width: auto; min-height: 36px; padding: 4px 11px 4px 4px; font-size: 0.74rem; }
.home #lab-metro .metro-stops:focus-within .metro-stop-lines { display: none; }
.home #lab-metro .metro-stops:focus-within .metro-stops-hint { display: none; }
.home #lab-metro:has(.metro-stops:focus-within) .metro-hint { opacity: 0; }
/* "See all our solutions": a 44 px target on touch screens, clear of a notch / rounded corner */
.home .solutions-combined .solutions-all { right: calc(16px + env(safe-area-inset-right, 0px)); }
@media (max-width: 820px) {
  .home .solutions-combined .solutions-all { right: calc(8px + env(safe-area-inset-right, 0px)); min-height: 44px; padding: 8px 14px 8px 15px; }
  /* the ride bar spans the map's width here: it sits under "See all" (whose box used to cover its ✕),
     and the map's toast under the ride bar */
  .home .solutions-combined .metro-ridebar { top: 60px; }
  .home .solutions-combined .metro-toast { top: 122px; }
}
@media (pointer: coarse) { .home .solutions-combined .solutions-all { min-height: 44px; } }
@media (min-width: 821px) {
  .home .solutions-combined .metro-hub .metro-tools { left: calc(16px + env(safe-area-inset-left, 0px)); }
}
/* ---------- Campus v2 (2026-10-28): the campus stage directly under "Less memorising. More discovering."
   (inside "Our solutions", under its bridge band) is full-bleed and one visible viewport tall minus the
   site navigation (--home-header-height: 112px, 86px under 820px); svh keeps it steady while mobile
   browser bars come and go, vh where svh is unknown. The 3D frames the campus to fill whatever shape
   that makes (scenes/campus.js). */
.home .home-solutions.solutions-combined #lab-metro.campus-hub { --metro-stage-h: max(300px, calc(100vh - var(--home-header-height))); }
@supports (height: 100svh) {
  .home .home-solutions.solutions-combined #lab-metro.campus-hub { --metro-stage-h: max(300px, calc(100svh - var(--home-header-height))); }
}
.home .solutions-combined #lab-metro.campus-hub .metro-stage { width: 100%; }
/* (the campus has its own toolbar: metro.css's tool row is not used) */
.home .solutions-combined .campus-hub .metro-tools { display: none; }

/* Arena (owner, 2026-10-20): no bay panel; the 3D cylinder is the whole section (tap a bay, Enter or
   the arrow keys on the stage). On narrow stages the drag hint wraps to two centred lines instead of
   running off both edges. */
@media (max-width: 699px) {
  .arena-hint { white-space: normal; text-align: center; justify-content: center; width: max-content; max-width: calc(100% - 24px); line-height: 1.35; }
}

/* ==========================================================================================
   AI & Robotics Makerspace (home, under the arena) -- BEGIN makerspace block (v2: full screen)
   The lab fills the section edge to edge, one viewport tall (the site header scrolls away with
   the page, so nothing persistent is subtracted). A compact overlay (.ms-hud) carries the title,
   the modes and the navigation; station information opens on demand: a side panel on wide
   screens, a bottom sheet on phones. Everything here exists before the 3D arrives (the plan
   drawing is the loading picture and the no-WebGL overview); css/scenes/makerspace.css adds
   the 3D-only pieces.
   ========================================================================================== */
.home-makerspace { position: relative; margin: 0; padding: 0; scroll-margin-top: -30px; }   /* (cancels html's scroll-padding-top: flush with the viewport) */
.ms-app {
  --ms-line: #e2e7e9; --ms-soft: #f4f6f7; --ms-text: #435468; --ms-gut: max(14px, env(safe-area-inset-left, 0px));
  --ms-panel-w: clamp(330px, 29vw, 430px); --ms-peek: 142px;   /* (phones: the collapsed sheet shows the title and a line) */
  position: relative; width: 100%; height: 100vh; height: 100svh; min-height: 480px; overflow: hidden; isolation: isolate;
  background: radial-gradient(130% 95% at 50% 46%, #fffdf9 28%, #efe8de 100%); color: var(--ink); text-align: left;
}
.ms-app :is(button, a, input, [tabindex]):focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.ms-stage { position: absolute; inset: 0; outline-offset: -4px; touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.ms-stage:focus-visible { outline: 3px solid var(--focus); }
.ms-canvas { position: absolute; inset: 0; opacity: 0; transition: opacity 0.7s; }
.ms-app[data-ready="true"] .ms-canvas { opacity: 1; }
/* "Explore in 3D" (touch): the canvas takes every gesture, the page does not scroll under it */
.ms-app[data-explore3d="true"] :is(.ms-stage, .ms-canvas, .ms-canvas canvas) { touch-action: none; }

/* the plan drawing: first paint + loading (a line drawing), and the overview without WebGL (filled) */
.ms-plan { position: absolute; inset: 0; display: grid; place-items: center; padding: max(150px, 17%) 5% max(96px, 11%); transition: opacity 0.7s; pointer-events: none; }
.ms-plan-svg { width: 100%; height: 100%; overflow: visible; }
.ms-app[data-ready="true"] .ms-plan { opacity: 0; }
.ms-plan-svg path, .ms-plan-svg circle { fill: none; stroke: #93a2b2; stroke-width: 0.045; stroke-linejoin: round; stroke-linecap: round; }
.ms-plan-svg .msp-floor { stroke: #7d8da0; }
.ms-plan-svg .msp-loop { stroke: #c5ced7; }
.ms-plan-svg .msp-team { stroke: var(--team-edge, var(--team)); stroke-opacity: 0.55; }
.ms-plan-svg .msp-st path { stroke: #6f8093; }
.ms-plan-svg .msp-badge { fill: var(--accent); stroke: var(--ink); stroke-width: 0.07; }
.ms-plan-svg .msp-arrow { stroke: var(--coral); stroke-width: 0.08; }
@media (prefers-reduced-motion: no-preference) {
  .ms-app:not([data-fallback="true"]) .ms-plan-svg path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: msp-draw 1.6s cubic-bezier(0.45, 0, 0.2, 1) forwards; }
  .ms-app:not([data-fallback="true"]) .ms-plan-svg :is(.msp-wall, .msp-glass) { animation-delay: 0.25s; }
  .ms-app:not([data-fallback="true"]) .ms-plan-svg .msp-st path { animation-delay: 0.55s; }
  .ms-app:not([data-fallback="true"]) .ms-plan-svg :is(.msp-sill, .msp-arrow) { animation-delay: 0.8s; }
}
@keyframes msp-draw { to { stroke-dashoffset: 0; } }
.ms-app:is([data-fallback="true"], [data-scene-error="true"]) .ms-plan { opacity: 1; }
.ms-app:is([data-fallback="true"], [data-scene-error="true"]) .ms-plan-svg path { stroke: #a7b2bd; stroke-width: 0.03; }
.ms-app:is([data-fallback="true"], [data-scene-error="true"]) .ms-plan-svg .msp-plinth.msp-top { fill: #e9e3d8; }
.ms-app:is([data-fallback="true"], [data-scene-error="true"]) .ms-plan-svg .msp-plinth.msp-side { fill: #d8cfc1; }
.ms-app:is([data-fallback="true"], [data-scene-error="true"]) .ms-plan-svg .msp-floor { fill: #f5f1ea; }
.ms-app:is([data-fallback="true"], [data-scene-error="true"]) .ms-plan-svg .msp-loop { fill: #fffdfa; stroke: #c9c2b5; stroke-dasharray: 0.03 0.018; }
.ms-app:is([data-fallback="true"], [data-scene-error="true"]) .ms-plan-svg .msp-loop-in { fill: #f5f1ea; }
.ms-app:is([data-fallback="true"], [data-scene-error="true"]) .ms-plan-svg .msp-entry { fill: #e4ddd1; stroke: none; }
.ms-app:is([data-fallback="true"], [data-scene-error="true"]) .ms-plan-svg .msp-team { fill: var(--team); fill-opacity: 0.18; stroke-opacity: 0.6; transition: fill-opacity 0.2s; }
.ms-app[data-fallback="true"][data-teams="true"] .ms-plan-svg .msp-team { fill-opacity: 0.55; stroke-opacity: 1; stroke-width: 0.06; }
.ms-app[data-fallback="true"] .ms-plan-svg :is(.msp-st, .msp-label) { pointer-events: auto; cursor: pointer; }
#ms-explode-range { min-height: 46px; }
.ms-app[data-fallback="true"] .ms-canvas { pointer-events: none; }   /* (the plan underneath takes the taps) */
.ms-app:is([data-fallback="true"], [data-scene-error="true"]) .ms-plan-svg :is(.msp-wall, .msp-sill).msp-side { fill: #f7f5f0; }
.ms-app:is([data-fallback="true"], [data-scene-error="true"]) .ms-plan-svg :is(.msp-wall, .msp-sill).msp-side-e { fill: #ebe7df; }
.ms-app:is([data-fallback="true"], [data-scene-error="true"]) .ms-plan-svg :is(.msp-wall, .msp-sill).msp-top { fill: var(--ink); stroke: var(--ink); }
.ms-app:is([data-fallback="true"], [data-scene-error="true"]) .ms-plan-svg .msp-glass { fill: #cfe9f6; stroke: #9fc9de; }
.ms-app:is([data-fallback="true"], [data-scene-error="true"]) .ms-plan-svg .msp-st .msp-top { fill: #fff; }
.ms-app:is([data-fallback="true"], [data-scene-error="true"]) .ms-plan-svg .msp-st .msp-side { fill: #e7ebef; }
.ms-app:is([data-fallback="true"], [data-scene-error="true"]) .ms-plan-svg .msp-st .msp-side-e { fill: #d9dfe5; }
.ms-app:is([data-fallback="true"], [data-scene-error="true"]) .ms-plan-svg .msp-st :is(.msp-table.msp-top, .msp-bench.msp-top) { fill: #e3c8a6; }
.ms-app:is([data-fallback="true"], [data-scene-error="true"]) .ms-plan-svg .msp-st .msp-seat.msp-top { fill: var(--accent); }
.ms-app:is([data-fallback="true"], [data-scene-error="true"]) .ms-plan-svg .msp-zone { fill: color-mix(in srgb, var(--accent) 10%, transparent); stroke-dasharray: 0.04 0.03; }
.ms-app:is([data-fallback="true"], [data-scene-error="true"]) .ms-plan-svg .msp-track { stroke: var(--ink); stroke-width: 0.12; }
.ms-plan-svg .msp-st[data-on="true"] .msp-top { fill: color-mix(in srgb, var(--accent) 45%, #fff) !important; }
.ms-fallback { display: none; margin: 0; padding: 10px var(--ms-gut, 14px); background: #fff8f3; color: var(--ink); font-size: 0.86rem; text-align: center; border-top: 1px solid #f1dfd5; }
.home-makerspace:has(.ms-app:is([data-fallback="true"], [data-scene-error="true"])) .ms-fallback { display: block; }

/* station labels: full names, in screen space, collision-free (placed by the scene; also over the plan) */
.ms-labels { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.ms-label {
  position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; gap: 5px; max-width: min(220px, 62vw); min-height: 24px;
  padding: 3px 9px 3px 7px; border: 1px solid rgba(30, 41, 66, 0.1); border-radius: 999px; background: rgba(255, 255, 255, 0.62); color: #44546a;
  font: 600 0.7rem/1.2 var(--body-font); letter-spacing: 0.01em; white-space: nowrap; pointer-events: auto; cursor: pointer;
  box-shadow: 0 3px 10px -8px rgba(30, 41, 66, 0.5); backdrop-filter: blur(3px); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
  opacity: 0; visibility: hidden; transition: opacity 0.25s, background 0.15s, border-color 0.15s, color 0.15s; will-change: transform;
}
.ms-label::after { content: ""; position: absolute; inset: -11px -4px; }   /* (a 46 px tall target, invisible) */
.ms-label-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: inset 0 0 0 1px rgba(30, 41, 66, 0.55); }
.ms-label[data-shown="true"] { opacity: 0.88; visibility: visible; }
/* the one in front: the hovered or focused name, or the one nearest the middle of the view */
.ms-label[data-shown="true"]:is([data-prom="true"], :hover, :focus-visible) { opacity: 1; background: rgba(255, 255, 255, 0.94); color: var(--ink); border-color: rgba(30, 41, 66, 0.28); }
.ms-label:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
/* while the view moves (a drag, a pinch, a flight) the names step back */
.ms-app[data-moving="true"] .ms-label[data-shown="true"]:not(:focus-visible) { opacity: 0.4; transition-duration: 0.12s; }
/* no room for the name: a small dot on the station (the name is its accessible name; hover / focus shows it) */
.ms-label[data-shown="dot"] {
  opacity: 0.9; visibility: visible; width: 22px; height: 22px; min-height: 0; padding: 0; justify-content: center; gap: 0; border-radius: 50%;
  border: 0; background: transparent; box-shadow: none; backdrop-filter: none;
}
.ms-label[data-shown="dot"] .ms-label-dot { width: 11px; height: 11px; box-shadow: 0 0 0 2px #fff, 0 2px 6px rgba(30, 41, 66, 0.5); }
.ms-app[data-moving="true"] .ms-label[data-shown="dot"]:not(:focus-visible) { opacity: 0.45; }
.ms-label[data-shown="dot"]:focus-visible { outline-offset: 0; border-radius: 50%; }
.ms-label[data-shown="dot"]::after { inset: -12px; border-radius: 50%; }
.ms-label[data-shown="dot"] { z-index: 1; }
.ms-label[data-shown="dot"] .ms-label-text {
  position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); padding: 4px 9px; border-radius: 999px; background: var(--ink); color: #fff;
  font-size: 0.74rem; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.15s;
}
.ms-label[data-shown="dot"]:is(:hover, :focus-visible) .ms-label-text { opacity: 1; }
.ms-label:hover, .ms-label:focus-visible, .ms-label[data-selected="true"] { border-color: var(--ink); background: #fff; }
.ms-label[data-selected="true"] { box-shadow: 0 0 0 2px var(--accent), 0 8px 18px -10px rgba(30, 41, 66, 0.6); }
/* the robot rack: a quieter label (placed after the eight stations), a quieter directory entry; both
   only once the scene has a rack (the plan view always draws it) */
.ms-label-minor { padding-block: 2px; font-size: 0.64rem; color: #55657a; background: rgba(255, 255, 255, 0.5); }
.ms-label-minor .ms-label-dot { width: 6px; height: 6px; border-radius: 1.5px; }
.ms-label-minor[data-shown="dot"] .ms-label-dot { width: 9px; height: 9px; border-radius: 50%; }
.ms-dir-minor { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--ms-line); }
.ms-app:not([data-rack="true"]) :is(.ms-label, .ms-dir-item)[data-station="rack"] { display: none; }
.ms-leaders { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; overflow: visible; }
.ms-leaders line { stroke: rgba(30, 41, 66, 0.55); stroke-width: 1.3; }
.ms-leaders circle { fill: var(--ink); }

/* the overlay: title, modes, navigation, view tools, journey bar (only its pieces take pointer events) */
.ms-hud { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.ms-hud > * { pointer-events: auto; }
/* the title: a small, quiet pill in the corner ("pill"); once the visitor explores, only an "i" chip
   ("chip") that reopens the full intro ("open"). The heading always stays in the page (visually hidden
   while it is a chip) */
.ms-head {
  position: absolute; left: var(--ms-gut); top: max(14px, env(safe-area-inset-top, 0px)); max-width: min(470px, 34vw); margin: 0; padding: 7px 13px 8px;
  border-radius: 14px; background: rgba(255, 255, 255, 0.7); box-shadow: 0 6px 18px -14px rgba(30, 41, 66, 0.5); backdrop-filter: blur(6px);
}
.ms-head .eyebrow { display: inline; margin: 0; font-size: 0.6rem; letter-spacing: 0.12em; color: #6b7b8c; }
.ms-head .eyebrow::after { content: " \00b7 "; }
.ms-head h2 { display: inline; font-size: 0.92rem; line-height: 1.3; font-weight: 700; }
.ms-note { display: none; margin: 7px 0 0; color: #4f5f71; font-size: 0.84rem; line-height: 1.4; }
.ms-head-chip { display: none; width: 44px; height: 44px; padding: 0; border: 0; background: none; place-items: center; cursor: pointer; color: var(--ink); }
.ms-head-chip > span {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(255, 255, 255, 0.82); border: 1px solid rgba(30, 41, 66, 0.25);
  font: 700 0.86rem/1 var(--heading-font); box-shadow: 0 4px 12px -8px rgba(30, 41, 66, 0.6); transition: background 0.15s, border-color 0.15s;
}
.ms-head-chip:hover > span, .ms-head-chip[aria-expanded="true"] > span { background: #fff; border-color: var(--ink); }
.ms-head-chip:focus-visible { outline: 3px solid var(--focus); outline-offset: -4px; border-radius: 50%; }
.ms-app:is([data-intro="chip"], [data-intro="open"]) .ms-head { padding: 0; background: none; box-shadow: none; backdrop-filter: none; max-width: none; }
.ms-app:is([data-intro="chip"], [data-intro="open"]) .ms-head-chip { display: grid; }
.ms-app[data-intro="chip"] .ms-intro { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ms-app[data-intro="open"] .ms-intro {
  position: absolute; left: 0; top: 50px; width: min(340px, calc(100vw - 2 * var(--ms-gut))); padding: 12px 15px 13px; border-radius: 16px;
  background: rgba(255, 255, 255, 0.96); box-shadow: 0 18px 40px -24px rgba(30, 41, 66, 0.6);
}
.ms-app[data-intro="open"] .ms-intro .eyebrow { display: block; margin-bottom: 5px; }
.ms-app[data-intro="open"] .ms-intro .eyebrow::after { content: none; }
.ms-app[data-intro="open"] .ms-intro h2 { display: block; font-size: 1.12rem; line-height: 1.2; }
.ms-app[data-intro="open"] .ms-note { display: block; }
/* in a close-up the panel names the station: the title box steps aside (it returns with the overview) */
.ms-head { transition: opacity 0.25s, visibility 0s; }
.ms-app[data-view="station"] .ms-head { opacity: 0; visibility: hidden; transition: opacity 0.2s, visibility 0s 0.2s; }
.ms-top { position: absolute; right: var(--ms-gut); top: max(14px, env(safe-area-inset-top, 0px)); display: flex; align-items: center; gap: 8px; }
.ms-modes { display: inline-flex; gap: 3px; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, 0.92); box-shadow: 0 8px 22px -16px rgba(30, 41, 66, 0.6); }
.ms-mode {
  min-height: 44px; padding: 8px 16px; border: 0; border-radius: 999px; background: transparent; color: var(--ms-text);
  font: 600 0.84rem/1.2 var(--body-font); white-space: nowrap; transition: background 0.2s, color 0.2s, box-shadow 0.2s;
}
.ms-mode:hover { color: var(--ink); background: rgba(30, 41, 66, 0.05); }
.ms-mode[aria-pressed="true"] { background: var(--ink); color: #fff; }
.ms-mode-short { display: none; }
.ms-teams {
  display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 8px 15px 8px 12px; border-radius: 999px; border: 1px solid #cfd8df;
  background: rgba(255, 255, 255, 0.94); color: var(--ink); font: 600 0.8rem/1.2 var(--body-font); white-space: nowrap;
}
.ms-teams:hover { border-color: var(--ink); }
.ms-teams[aria-pressed="true"] { background: #ffe3d8; border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.ms-teams-dots { display: inline-flex; }
.ms-teams-dots i { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid #fff; margin-left: -3px; }
.ms-teams-dots i:first-child { margin-left: 0; }
.ms-icon {
  display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: 12px; border: 1px solid #cfd8df;
  background: rgba(255, 255, 255, 0.95); color: var(--ink); box-shadow: 0 6px 14px -10px rgba(30, 41, 66, 0.55); transition: border-color 0.2s;
}
.ms-icon:hover { border-color: var(--ink); }
.ms-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ms-expand[aria-pressed="true"] { background: var(--ink); color: #fff; }
.ms-nav { position: absolute; left: var(--ms-gut); bottom: max(14px, env(safe-area-inset-bottom, 0px)); display: flex; flex-wrap: wrap; align-items: center; gap: 8px; max-width: calc(100% - 2 * var(--ms-gut) - 60px); }
.ms-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; padding: 8px 16px; border-radius: 999px;
  border: 1px solid #c9d2da; background: rgba(255, 255, 255, 0.96); color: var(--ink); font: 600 0.84rem/1.2 var(--body-font); white-space: nowrap;
  box-shadow: 0 6px 16px -12px rgba(30, 41, 66, 0.55); transition: border-color 0.2s, background 0.2s, transform 0.2s;
}
.ms-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.ms-btn:hover { border-color: var(--ink); }
.ms-btn-primary { background: var(--coral); border-color: var(--ink); box-shadow: 0 3px 0 var(--ink); }
.ms-btn-quiet { border-color: transparent; background: transparent; box-shadow: none; color: #4f5f71; }
.ms-btn[aria-pressed="true"], .ms-choose[aria-expanded="true"] { background: #fff1ea; border-color: var(--ink); }
.ms-btn:disabled { opacity: 0.45; cursor: default; }
.ms-back[hidden], .ms-info[hidden] { display: none !important; }
.ms-pins, .ms-teamtags { display: none; }
.ms-tools { position: absolute; right: var(--ms-gut); bottom: max(14px, env(safe-area-inset-bottom, 0px)); display: none; flex-direction: column; gap: 6px; }
.ms-explore3d, .ms-hint, .ms-wheel-hint, .ms-outside-hint, .ms-outbar { display: none; }
/* v3 navigation pieces (camera mode, view menu, joystick, eye height, station card, gesture hint,
   focus mark, Resume / Level chips): only with the 3D (css/scenes/makerspace.css shows them) */
:is(.ms-cam, .ms-viewmenu, .ms-joy, .ms-height, .ms-pickcard, .ms-ghint, .ms-focusmark, .ms-resume, .ms-level, .ms-3dnav) { display: none; }
/* every control answers a single tap: no double-tap zoom wait on touch screens */
.ms-app :is(button, input, a) { touch-action: manipulation; }
.ms-loading {
  position: absolute; left: 50%; bottom: max(80px, 12%); transform: translateX(-50%); display: flex; align-items: center; gap: 10px; padding: 8px 15px;
  border-radius: 999px; background: rgba(255, 255, 255, 0.94); border: 1px solid #e0e5e9; color: #5b6b7d; font-size: 0.78rem; white-space: nowrap; transition: opacity 0.4s;
}
.ms-progress { position: relative; width: 96px; height: 4px; border-radius: 4px; background: #e7ebee; overflow: hidden; }
.ms-progress i { position: absolute; inset: 0; transform-origin: 0 50%; transform: scaleX(var(--ms-progress, 0.04)); background: var(--coral); border-radius: 4px; transition: transform 0.3s; }
.ms-app:is([data-ready="true"], [data-fallback="true"], [data-scene-error="true"]) .ms-loading { opacity: 0; pointer-events: none; }
.ms-lost { position: absolute; left: 50%; top: 50%; z-index: 6; transform: translate(-50%, -50%); width: min(380px, calc(100% - 32px)); padding: 16px 18px; border-radius: 18px; background: #fff; border: 1.5px solid var(--ink); box-shadow: 0 5px 0 var(--ink); text-align: center; }
.ms-lost[hidden] { display: none; }
.ms-lost p { margin: 0 0 12px; color: var(--ink); font-size: 0.92rem; }

/* journey bar: the tour (narration + controls) or the build steps, centred just above the bottom row
   (navigation on the left, view tools on the right), clear of both */
.ms-journey { position: absolute; left: 50%; bottom: calc(max(14px, env(safe-area-inset-bottom, 0px)) + 58px); transform: translateX(-50%); width: min(820px, calc(100% - 2 * var(--ms-gut) - 120px)); display: none; }
.ms-app:is([data-mode="tour"], [data-mode="build"]) .ms-journey { display: block; }
.ms-tourbar, .ms-steps { display: none; padding: 12px 14px; border-radius: 18px; background: rgba(255, 255, 255, 0.96); box-shadow: 0 12px 30px -18px rgba(30, 41, 66, 0.6); }
.ms-app[data-mode="tour"] .ms-tourbar, .ms-app[data-mode="build"] .ms-steps { display: block; }
.ms-tour-status { margin: 0; color: #6b7b8c; font: 700 0.68rem/1.3 var(--body-font); letter-spacing: 0.12em; text-transform: uppercase; }
.ms-tour-text, .ms-step-text { margin: 4px 0 10px; color: var(--ink); font-size: 0.9rem; line-height: 1.45; }
.ms-tour-buttons { display: flex; flex-wrap: wrap; gap: 6px; }
.ms-steps ol { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 5px; margin: 0; padding: 0; list-style: none; }
.ms-step {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; width: 100%; min-height: 50px; padding: 5px 3px; border-radius: 12px;
  border: 1px solid #d4dde3; background: #fff; color: #34465a; font: 600 0.72rem/1.15 var(--body-font); transition: background 0.2s, border-color 0.2s;
}
.ms-step:hover { border-color: #93a2b2; }
.ms-step[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.ms-step-num { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #eef2f5; color: var(--ink); font: 700 0.7rem/1 var(--heading-font); }
.ms-step[aria-pressed="true"] .ms-step-num { background: var(--coral); }

/* the station directory (all eight full names): a popover over the bottom left; a sheet on phones */
.ms-directory {
  position: absolute; z-index: 6; left: var(--ms-gut); bottom: calc(max(14px, env(safe-area-inset-bottom, 0px)) + 56px); width: min(380px, calc(100% - 2 * var(--ms-gut)));
  max-height: calc(100% - 200px); overflow: auto; overscroll-behavior: contain; padding: 14px 14px 12px; border-radius: 20px; background: #fff;
  box-shadow: 0 24px 60px -24px rgba(30, 41, 66, 0.6); display: none;
}
.ms-app[data-dir="open"] .ms-directory { display: block; }
.ms-dir-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ms-dir-head h3 { font-size: 1.15rem; }
.ms-dir-close { width: 44px; height: 44px; box-shadow: none; }
.ms-dir-intro, .ms-dir-note { margin: 6px 0 10px; color: #4f5f71; font-size: 0.82rem; line-height: 1.45; }
.ms-dir-note { margin: 10px 0 0; color: #6b7b8c; font-size: 0.76rem; }
.ms-dir-list { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.ms-dir-item { display: flex; align-items: flex-start; gap: 10px; width: 100%; min-height: 48px; padding: 8px 10px; border: 1px solid transparent; border-radius: 12px; background: none; color: var(--ink); text-align: left; }
.ms-dir-item:hover { background: var(--ms-soft); }
.ms-dir-item[aria-pressed="true"] { border-color: color-mix(in srgb, var(--accent) 70%, var(--ink)); background: color-mix(in srgb, var(--accent) 12%, #fff); }
.ms-dir-dot { flex: none; width: 12px; height: 12px; margin-top: 4px; border-radius: 50%; background: var(--accent); box-shadow: inset 0 0 0 1.5px rgba(30, 41, 66, 0.7); }
.ms-dir-text strong { display: block; font: 600 0.9rem/1.25 var(--body-font); }
.ms-dir-sum { display: block; margin-top: 2px; color: #5b6b7d; font-size: 0.78rem; line-height: 1.35; }

/* the information panel: on demand; a side panel on wide screens */
.ms-panel {
  position: absolute; z-index: 5; right: var(--ms-gut); top: max(14px, env(safe-area-inset-top, 0px)); bottom: max(14px, env(safe-area-inset-bottom, 0px));
  width: var(--ms-panel-w); display: flex; flex-direction: column; border-radius: 22px; background: #fff; box-shadow: 0 30px 70px -30px rgba(30, 41, 66, 0.6);
  transform: translateX(calc(100% + 30px)); visibility: hidden; transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), visibility 0s 0.35s;
}
.ms-app[data-panel="open"] .ms-panel, .ms-app[data-panel="peek"] .ms-panel { transform: none; visibility: visible; transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1); }
.ms-panel-bar { display: flex; align-items: center; justify-content: flex-end; padding: 8px 8px 0; flex: none; }
.ms-handle { display: none; }
.ms-panel-close { width: 44px; height: 44px; box-shadow: none; }
.ms-panel-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding: 0 22px 24px; }
/* with the panel open, the view tools and the journey bar keep to the free area */
@media (min-width: 761px) {
  .ms-app[data-panel="open"] .ms-tools { right: calc(var(--ms-panel-w) + 2 * var(--ms-gut)); }
  .ms-app[data-panel="open"] .ms-journey { left: calc((100% - var(--ms-panel-w) - var(--ms-gut)) / 2); width: min(760px, calc(100% - var(--ms-panel-w) - 3 * var(--ms-gut) - 120px)); }
  .ms-app[data-panel="open"] .ms-top { right: calc(var(--ms-panel-w) + 2 * var(--ms-gut)); }
}
/* tablets and narrower desktops (and wider ones with the panel open): short mode names and the teams
   switch as its dots (full names stay their accessible names); build steps in two rows beside the panel */
@media (min-width: 761px) and (max-width: 1100px) {
  .ms-mode { padding-inline: 11px; }
  .ms-mode-long { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .ms-mode-short { display: inline; }
  .ms-teams { padding-inline: 12px; }
  .ms-teams-label { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (min-width: 1101px) and (max-width: 1240px) {
  .ms-app[data-panel="open"] .ms-mode { padding-inline: 11px; }
  .ms-app[data-panel="open"] .ms-mode-long { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .ms-app[data-panel="open"] .ms-mode-short { display: inline; }
  .ms-app[data-panel="open"] .ms-teams { padding-inline: 12px; }
  .ms-app[data-panel="open"] .ms-teams-label { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (min-width: 761px) and (max-width: 1100px) {
  .ms-app[data-panel="open"] .ms-steps ol { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.ms-card { display: none; }
.ms-card[data-active="true"] { display: block; }
.ms-app[data-scene-error="true"] .ms-card { display: block; margin-bottom: 26px; }
.ms-card-head { padding: 2px 0 4px; border-bottom: 3px solid var(--accent); }
.ms-kicker { margin: 0 !important; color: #6b7b8c; font: 700 0.66rem/1.2 var(--body-font); letter-spacing: 0.14em; text-transform: uppercase; }
.ms-card h3 { margin-top: 4px; font-size: clamp(1.3rem, 1.6vw, 1.65rem); line-height: 1.12; }
.ms-summary { margin: 8px 0 10px; color: var(--ink); font-size: 0.96rem; line-height: 1.45; }
.ms-label-sm { display: block; margin: 16px 0 6px; color: var(--ink); font: 700 0.68rem/1.3 var(--body-font); letter-spacing: 0.13em; text-transform: uppercase; }
.ms-five { margin: 6px 0 0; }
.ms-part { padding: 10px 0; border-top: 1px solid #edf0f2; }
.ms-part:first-child { border-top: 0; }
.ms-part dt { margin-bottom: 3px; color: var(--ink); font: 700 0.68rem/1.3 var(--body-font); letter-spacing: 0.12em; text-transform: uppercase; }
.ms-part dd { margin: 0; color: #4f5f71; font-size: 0.88rem; line-height: 1.55; }
.ms-part-supervision dd { padding: 9px 11px; border-radius: 12px; background: #eaf6fc; color: #1e2942; box-shadow: inset 3px 0 0 #65c8f0; }
.ms-look-hint { margin: 0 0 8px !important; color: #6b7b8c; font-size: 0.8rem; }
.ms-details { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ms-detail {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 5px 12px 5px 6px; border: 1px solid #d4dde3; border-radius: 12px;
  background: #fff; color: var(--ink); font: 600 0.84rem/1.25 var(--body-font); text-align: left;
}
.ms-detail:hover { border-color: #a2b3c2; background: #f8fafb; }
.ms-detail[aria-pressed="true"] { border-color: color-mix(in srgb, var(--accent) 70%, var(--ink)); background: color-mix(in srgb, var(--accent) 14%, #fff); }
.ms-detail-num { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--ink); background: #fff; font: 700 0.78rem/1 var(--heading-font); }
.ms-detail[aria-pressed="true"] .ms-detail-num { background: var(--accent); }
.ms-detail-text { display: none; margin: 4px 4px 8px 44px; color: #4f5f71; font-size: 0.86rem; line-height: 1.5; }
.ms-detail-text[data-selected="true"] { display: block; }
.ms-extra { margin: 12px 0 4px; padding: 12px 14px; border-radius: 14px; background: var(--ms-soft); }
.ms-extra .ms-label-sm { margin-top: 0; }
.ms-extra[hidden] { display: none !important; }
.ms-extra input[type="range"] { width: 100%; min-height: 44px; margin: 0; accent-color: var(--coral); }
.ms-extra-hint, .ms-explode-parts, .ms-demo-note { margin: 4px 0 0; font-size: 0.78rem; color: #5b6b7d; line-height: 1.45; }
.ms-demo-title { margin: 0 0 8px; color: var(--ink); font: 600 0.95rem/1.3 var(--body-font); }
.ms-demo-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.ms-demo-steps { display: flex; flex-wrap: wrap; gap: 5px; margin: 10px 0 0; padding: 0; list-style: none; }
.ms-demo-steps[hidden] { display: none; }
.ms-demo-steps button { min-height: 44px; padding: 6px 11px; border-radius: 10px; border: 1px solid #c9d2da; background: #fff; color: var(--ink); font: 600 0.76rem/1.2 var(--body-font); }
.ms-demo-steps button[aria-current="step"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.ms-demo-caption { min-height: 1.4em; margin: 8px 0 0; color: var(--ink); font-size: 0.86rem; line-height: 1.45; }
.ms-callout { margin: 0 0 14px; padding: 11px 13px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--accent, #ff784f) 55%, #fff); background: color-mix(in srgb, var(--accent, #ff784f) 10%, #fff); }
.ms-callout[hidden] { display: none; }
.ms-callout p { margin: 3px 0 0; color: var(--ink); font-size: 0.88rem; line-height: 1.45; }
.ms-callout .ms-kicker { margin: 0 !important; }
.ms-callout-dots { display: flex; gap: 4px; margin-top: 9px; }
.ms-callout-dots i { flex: 1 1 0; height: 4px; border-radius: 4px; background: #dfe5ea; }
.ms-callout-dots i[data-on="true"] { background: var(--ink); }
.ms-sequences { display: none; }
.ms-sequences ol { margin: 0 0 12px; padding-left: 1.3em; font-size: 0.86rem; color: #4f5f71; }
.ms-app[data-scene-error="true"] .ms-sequences { display: block; }
.ms-3d-only { display: none; }
.ms-app[data-three="true"] .ms-3d-only:not([hidden]) { display: block; }

/* "Expand view": the section takes the whole screen (native full screen, or a fixed overlay) */
.ms-app:fullscreen { width: 100vw; height: 100vh; min-height: 0; }
.ms-app[data-expanded="true"]:not(:fullscreen) { position: fixed; inset: 0; z-index: 1000; width: 100vw; height: 100vh; height: 100dvh; min-height: 0; }
body.ms-expanded { overflow: hidden; }
html.ms-expanded { overflow: hidden; overscroll-behavior: none; }

/* tablets / short laptop windows: the title box narrows */
@media (max-width: 1100px) { .ms-head { max-width: min(330px, 40vw); } }
/* phones and narrow tablets: the title runs across the top, the modes under it; the panel becomes a
   bottom sheet (peek or open); the directory is a sheet too */
@media (max-width: 760px) {
  .ms-app { --ms-gut: max(10px, env(safe-area-inset-left, 0px)); min-height: 520px; }
  /* phones: the title alone, on one or two short lines beside the 3D switch, then just the chip */
  .ms-head { left: var(--ms-gut); top: max(10px, env(safe-area-inset-top, 0px)); max-width: calc(100% - 2 * var(--ms-gut) - 136px); padding: 6px 11px 7px; border-radius: 12px; }
  .ms-head .eyebrow { display: none; }
  .ms-head h2 { font-size: 0.8rem; line-height: 1.25; }
  .ms-app[data-explore3d="true"] .ms-head { display: none; }
  .ms-note { font-size: 0.76rem; margin-top: 4px; }
  .ms-top { left: var(--ms-gut); right: var(--ms-gut); top: auto; bottom: calc(max(10px, env(safe-area-inset-bottom, 0px)) + 54px); justify-content: space-between; }
  .ms-modes { flex: 1 1 auto; }
  .ms-mode { flex: 1 1 0; padding: 8px 6px; font-size: 0.8rem; text-align: center; }
  .ms-mode-long { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .ms-mode-short { display: inline; }
  .ms-teams { padding: 8px 10px; }
  .ms-teams-label { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .ms-teams[aria-pressed="true"] .ms-teams-dots i { width: 11px; height: 11px; border-color: var(--ink); }
  .ms-expand { display: none; }
  .ms-nav { left: var(--ms-gut); right: var(--ms-gut); bottom: max(10px, env(safe-area-inset-bottom, 0px)); max-width: none; flex-wrap: nowrap; }
  .ms-nav .ms-btn { flex: 1 1 auto; padding-inline: 12px; }
  /* in a close-up the row also holds Back (and Info): "Choose a station" shrinks to its icon (the name stays its label) */
  .ms-app[data-view="station"] .ms-choose { flex: 0 0 44px; padding: 0; }
  .ms-app[data-view="station"] .ms-choose > span { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .ms-journey { left: var(--ms-gut); right: var(--ms-gut); width: auto; transform: none; bottom: calc(max(10px, env(safe-area-inset-bottom, 0px)) + 108px); }
  .ms-tourbar, .ms-steps { padding: 10px 11px; }
  .ms-tour-text, .ms-step-text { font-size: 0.82rem; margin-bottom: 8px; }
  .ms-steps ol { display: flex; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; gap: 5px; }
  .ms-steps li { flex: 0 0 auto; scroll-snap-align: start; }
  .ms-step { width: 74px; }
  .ms-tour-buttons .ms-btn { flex: 1 1 auto; padding-inline: 10px; }
  .ms-plan { padding: 130px 3% 170px; }
  .ms-label { font-size: 0.68rem; padding: 3px 8px 3px 6px; }
  .ms-directory { left: 0; right: 0; bottom: 0; width: auto; max-height: 78%; border-radius: 22px 22px 0 0; padding-bottom: max(16px, env(safe-area-inset-bottom, 0px)); }
  .ms-panel {
    left: 0; right: 0; top: auto; bottom: 0; width: auto; height: min(64%, 560px); border-radius: 22px 22px 0 0;
    transform: translateY(105%); padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .ms-app[data-panel="peek"] .ms-panel { transform: translateY(calc(100% - var(--ms-peek))); }
  .ms-app[data-panel="open"] .ms-panel { transform: none; }
  .ms-panel-bar { position: relative; justify-content: center; padding: 6px 8px 2px; }
  .ms-handle { display: grid; place-items: center; width: 132px; height: 44px; border: 0; background: none; touch-action: none; cursor: grab; }
  .ms-handle span { width: 44px; height: 5px; border-radius: 5px; background: #c3ccd5; }
  .ms-panel-close { position: absolute; right: 8px; top: 2px; }
  .ms-panel-scroll { padding: 0 16px 20px; }
  .ms-app[data-panel="peek"] .ms-panel-scroll { overflow: hidden; }
}
/* (v60) portrait phones and tablets: the lab is seen square-on from its open front, a wide room, so a full-height
   stage left a tall empty band around it. The stage is as tall as the room needs (its contained
   height, about 0.62 x the width, plus the top buttons, the bottom controls and room for the tour /
   build card and the station sheet above them) and the page goes on
   below. "Touch to explore" and full screen still take the whole screen (makerspace.css / above). */
@media (max-width: 760px) and (orientation: portrait) {
  .ms-app { height: min(100vh, calc(66vw + 360px)); height: min(100svh, calc(66vw + 360px)); min-height: 470px; }
}
@media (min-width: 761px) and (max-width: 1100px) and (orientation: portrait) {
  .ms-app { height: min(100vh, calc(50vw + 280px)); height: min(100svh, calc(50vw + 280px)); }
}
@media (max-width: 380px) { .ms-mode { font-size: 0.74rem; padding-inline: 4px; } .ms-teams-dots i { width: 8px; height: 8px; } .ms-nav .ms-btn { font-size: 0.78rem; } }
/* phones on their side: a slim title, the controls along the edges */
@media (max-height: 500px) and (orientation: landscape) {
  .ms-app { min-height: 300px; --ms-panel-w: min(360px, 46vw); }
  .ms-head { padding: 5px 10px; max-width: min(300px, 36vw); }
  .ms-head .eyebrow { display: none; }
  .ms-head h2 { font-size: 0.78rem; }
  .ms-top { top: max(8px, env(safe-area-inset-top, 0px)); bottom: auto; left: auto; }
  .ms-plan { padding: 64px 22% 64px; }
  .ms-panel { width: var(--ms-panel-w); left: auto; right: var(--ms-gut); top: 8px; bottom: 8px; height: auto; border-radius: 18px; transform: translateX(calc(100% + 20px)); }
  .ms-app:is([data-panel="peek"], [data-panel="open"]) .ms-panel { transform: none; }
  .ms-handle { display: none; }
  .ms-app[data-panel="peek"] .ms-panel-scroll { overflow-y: auto; }
  .ms-journey { left: auto; right: auto; left: 50%; transform: translateX(-50%); width: min(560px, 60vw); bottom: 8px; }
  /* tour / build steps: the journey bar takes the bottom; Back and Info move up to the (free) top left */
  .ms-app:is([data-mode="tour"], [data-mode="build"]) .ms-nav { top: max(8px, env(safe-area-inset-top, 0px)); bottom: auto; }
  .ms-app:is([data-mode="tour"], [data-mode="build"]) .ms-choose { display: none; }
  /* with the panel open, the free strip keeps navigation and view tools only */
  .ms-app[data-panel="open"] :is(.ms-top, .ms-explore3d) { display: none !important; }
}
/* narrow screens: slimmer, more see-through names (four at most, the rest dots: see the scene) */
@media (max-width: 640px) {
  .ms-label { gap: 4px; min-height: 20px; padding: 2px 7px 2px 5px; font-size: 0.64rem; letter-spacing: 0.005em; background: rgba(255, 255, 255, 0.5); border-color: rgba(30, 41, 66, 0.08); box-shadow: none; }
  .ms-label::after { inset: -13px -4px; }   /* (a 46 px tall target) */
  .ms-label-dot { width: 6px; height: 6px; }
  .ms-label-minor { padding-block: 2px; font-size: 0.62rem; }
}
@media (prefers-reduced-motion: reduce) { .ms-panel, .ms-label, .ms-canvas, .ms-plan { transition: none !important; } }
/* END makerspace block */
/* ---------- Lab pages: "Back to Metro" (2026-10-23), near the top of every lab page. A plain link to
   the home page's metro section (/#lab-metro, made relative on export); the metro restores the
   station and view it was left at when there is one to restore. */
.lab-backbar { margin: 0 0 6px; }
.lab-back-metro {
  display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 8px 16px 8px 12px; border-radius: 999px;
  background: var(--ink); color: #fff; font: 600 0.9rem/1.2 var(--body-font); text-decoration: none;
  box-shadow: 0 3px 0 var(--coral); transition: transform 0.15s, box-shadow 0.15s;
}
.lab-back-metro svg { flex: 0 0 auto; color: var(--yellow); }
.lab-back-metro::after {
  content: ""; flex: 0 0 auto; width: 27px; height: 6px; border-radius: 3px;
  background: linear-gradient(90deg, var(--coral) 0 33%, var(--blue) 33% 66%, var(--yellow) 66% 100%);
}
.lab-back-metro:hover { transform: translateY(-1px); box-shadow: 0 4px 0 var(--coral); }
.lab-back-metro:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--coral); }
.lab-back-metro:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; box-shadow: 0 0 0 6px var(--ink); }
.detail-intro .lab-backbar + .breadcrumb, .detail-intro .lab-backbar + script + .breadcrumb { margin-top: 4px; }
@media (prefers-reduced-motion: reduce) { .lab-back-metro { transition: none; } .lab-back-metro:hover, .lab-back-metro:active { transform: none; } }