/* =================================================================
   INTUITIVE ROBOTICS — editorial. Restraint over effects.
   Inter Tight (headings) + Inter (body). Monochrome; imagery is the colour.
   Section blocks appear below in page order. Responsive + reduced-motion at the end.
   ================================================================= */

:root {
  --bg:      #000;
  --text:    #ededee;
  --text-2:  rgba(237, 237, 238, 0.62);
  --text-3:  rgba(237, 237, 238, 0.40);
  --line:    rgba(255, 255, 255, 0.13);
  --line-2:  rgba(255, 255, 255, 0.24);
  --accent:  #ff4d17;
  --sans:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --heading: "Inter Tight", var(--sans);
  --display: "Space Grotesk", var(--sans);
  --container: 1180px;
  --pad:     48px;
  --ease:    cubic-bezier(0.4, 0, 0.2, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; -webkit-text-size-adjust: 100%; }
body { font-family: var(--sans); background: var(--bg); color: var(--text); line-height: 1.6; font-size: 16px; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; }
em { font-style: normal; }
::selection { background: rgba(255, 255, 255, 0.85); color: #000; }
img, svg, video, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 1px solid var(--text); outline-offset: 4px; }
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--pad); }

/* ---------- type ---------- */
.kicker { font-size: 14px; font-weight: 500; letter-spacing: 0.02em; color: var(--text-3); }
.h2 { font-family: var(--heading); font-weight: 300; font-size: clamp(2.15rem, 3.85vw, 3.5rem); line-height: 1.02; letter-spacing: -0.032em; color: #fff; text-wrap: balance; }
.h2 em { color: var(--text-3); }

/* ---------- CTAs — primary in a box; secondary text + chevron ---------- */
.cta__mob { display: none; }
.link-cta { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 0.9rem; font-weight: 500; letter-spacing: 0.01em; line-height: 1; color: var(--text-2); padding: 6px 2px 6px 0; border-radius: 0; transition: color 0.22s var(--ease); }
.link-cta::after { content: "\203A"; font-size: 1.15em; line-height: 1; transition: transform 0.22s var(--ease); }
.link-cta:hover { color: #fff; }
.link-cta:hover::after { transform: translateX(2px); }
.link-cta--fill { color: #0a0a0b; padding: 11px 16px 11px 18px; border: 1px solid #ededee; border-radius: 2px; background: #ededee; transition: color 0.22s var(--ease), background 0.22s var(--ease), border-color 0.22s var(--ease); }
.link-cta--fill:hover { color: #0a0a0b; background: #fff; border-color: #fff; }

/* ---------- reveal (subtle) ---------- */

/* ---------- block (editorial sections) ---------- */
.block { padding: clamp(80px, 12vh, 140px) 0; }
.block__head { margin-bottom: 48px; }

/* ---------- scene (full-bleed media + copy at the bottom) ---------- */
.scene { position: relative; isolation: isolate; overflow: hidden; min-height: 100vh; display: flex; align-items: flex-end; padding: clamp(80px, 12vh, 140px) 0; }

.list { margin-top: 28px; display: grid; gap: 10px; max-width: 520px; color: var(--text-2); }
.list li { padding-top: 10px; border-top: 1px solid var(--line); }

/* ---------- nav — progressive blur on scroll (JS sets --nav-t 0..1) ---------- */
.nav { --nav-t: 0; position: fixed; top: 0; left: 0; right: 0; z-index: 900; pointer-events: none; }
.nav__frost { position: absolute; left: 0; right: 0; top: 0; height: clamp(124px, 17vh, 172px); opacity: var(--nav-t); /* no backdrop blur: re-blurring the moving film under it every scroll frame dropped frames */ /* near-solid behind the logo and links, so page text scrolling under them does not show through */ background: linear-gradient(180deg, rgba(0, 0, 0, 0.94) 0%, rgba(0, 0, 0, 0.9) 45%, rgba(0, 0, 0, 0.5) 72%, rgba(0, 0, 0, 0) 100%); }
.nav__inner { position: relative; display: flex; align-items: center; justify-content: space-between; height: 72px; pointer-events: auto; }
/* logo: "I" stays, "ntuitive" retracts on scroll, orange dot is the mark */
.nav__brand { position: relative; display: inline-flex; align-items: center; height: 32px; font-family: var(--heading); font-weight: 400; font-size: 20px; letter-spacing: -0.02em; color: #fff; opacity: 0; transform: translateY(8px); transition: opacity 0.58s var(--ease) 0.06s, transform 0.58s var(--ease) 0.06s; }
/* the name reads at the top of the page; on scroll it gives way to the logo glyph,
   which sits in the same spot so the swap happens in place */

.nav__mark { position: absolute; left: 0; top: 50%; height: 30px; width: auto; /* the brand collapses to zero width once the word retracts, and the global img{max-width:100%} would then resolve to zero — opt this one out */ max-width: none; opacity: 0; transform: translateY(calc(-50% + 4px)); transition: opacity 0.34s var(--ease), transform 0.42s cubic-bezier(0.22, 1, 0.36, 1); pointer-events: none; }
.nav--logo-retract .nav__mark { opacity: 1; transform: translateY(-50%); }
.nav--logo-in .nav__brand { opacity: 1; transform: none; }
.nav__word { display: inline-flex; align-items: baseline; overflow: hidden; white-space: nowrap; max-width: 12ch; transition: max-width 0.48s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.28s var(--ease); }
.nav--logo-retract .nav__word { max-width: 0; opacity: 0; }
.nav__actions { display: flex; align-items: center; gap: 30px; }
.nav__link { font-size: 13px; letter-spacing: 0.02em; color: var(--text-2); opacity: 0; visibility: hidden; transform: translateY(-5px); transition: opacity 0.4s var(--ease), transform 0.4s var(--ease), visibility 0s linear 0.4s; }
.nav__link--cta { color: var(--text); font-size: 15px; font-weight: 500; }
.nav__link:hover { color: #fff; }
.nav--cta-visible .nav__link, .nav:focus-within .nav__link { opacity: 1; visibility: visible; transform: none; transition: opacity 0.4s var(--ease), transform 0.4s var(--ease), visibility 0s; }
.nav--cta-visible .nav__link:nth-child(2) { transition-delay: 0.07s; }

/* ---------- hero (video bg; content sits low-left like the reference) ---------- */
.hero { position: relative; isolation: isolate; overflow: hidden; min-height: min(100vh, 920px); display: flex; align-items: center; padding-top: clamp(152px, 23vh, 252px); padding-bottom: clamp(60px, 10vh, 120px); background: var(--bg); }

/* load sequence — title, then copy, actions, partners */

/* ---------- statement — words light up as you scroll through ---------- */

/* ---------- stages — full-bleed sticky scrub (kardashev pattern) ---------- */

                    /* video wins over stills once it has metadata */

.scale { margin-top: 36px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; max-width: 900px; }

/* ---------- why — full-bleed scene ---------- */

/* ---------- milestones — brand | facts | facts (3 | 4 | 5 of 12 columns) ---------- */

/* ---------- product showcase — full-bleed photo, copy bottom-left ---------- */

/* ---------- numbers — stats left, diagram right ---------- */

.fig p { margin-top: 8px; color: var(--text-2); max-width: 30ch; }

/* dashed measure lines grow up from the base when the plate reveals */
.dline { position: absolute; left: var(--x); bottom: 0; width: 0; height: 0; border-left: 1px dashed var(--line-2); transition: height 1.1s var(--ease) 0.2s; }

/* ---------- output — heading above, 16:9 frame pinned, HTML annotations ---------- */

/* ---------- products — 4-tile mosaic ---------- */

/* ---------- cost — lead + two comparison columns ---------- */

/* ---------- next — scene with a single CTA ---------- */

/* ---------- modal video player — native controls, minimal chrome ---------- */

/* ---------- footer — dot field canvas, big CTA, form + info ---------- */
.footer { position: relative; isolation: isolate; overflow: hidden; padding: clamp(120px, 18vh, 200px) 0 40px; border-top: 1px solid var(--line); }
.footer__grid-fx { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; }
.footer__fade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.2) 40%, rgba(0, 0, 0, 0.75) 100%); pointer-events: none; }

.footer__grid { display: grid; margin-top: 64px; padding-top: 40px; border-top: 1px solid var(--line); }
.cform { display: grid; gap: 18px; }
.cform__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.cform__field { display: grid; gap: 6px; font-size: 12px; color: var(--text-3); }
.cform__field input, .cform__field textarea, .cform__field select { font: inherit; font-size: 15px; color: var(--text); background: transparent; border: 0; border-bottom: 1px solid var(--line-2); padding: 8px 0; border-radius: 0; transition: border-color 0.22s var(--ease); }
.cform__field input:focus, .cform__field textarea:focus, .cform__field select:focus { border-bottom-color: #fff; }
.cform__field textarea { resize: vertical; min-height: 96px; }
.cform__actions { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 6px; }
.cform__status { font-size: 14px; color: var(--text-2); }
.cform__status.is-error { color: #ff8a65; }
.cform__status.is-ok { color: #fff; }

.footer__base { margin-top: 64px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 13px; color: var(--text-3); }

/* skip layout/paint for far-off sections until they approach */
 .scene, .footer { content-visibility: auto; contain-intrinsic-size: auto 100vh; }

/* ---------- contact page ---------- */
.contact { padding-top: clamp(140px, 22vh, 220px); }
.contact__grid { display: grid; grid-template-columns: 7fr 5fr; gap: 64px; align-items: start; }
.contact__info { display: grid; gap: 28px; align-content: start; font-size: 14px; color: var(--text-2); }
.contact__block .kicker { margin-bottom: 6px; }
.contact__block a:not(.link-cta):hover { color: #fff; }
.contact__hours { margin-top: 6px; color: var(--text-3); }

/* ---------- legal pages ---------- */
.legal { padding-top: clamp(140px, 22vh, 220px); min-height: 100vh; }
.legal__body { margin: 32px 0 48px; max-width: 68ch; color: var(--text-2); display: grid; gap: 16px; }
.legal__body h2 { font-family: var(--heading); font-weight: 400; font-size: 1.25rem; color: #fff; margin-top: 16px; }

/* ---------- about page (about.html) — founders, locations map, facts ---------- */
.about { padding-top: clamp(140px, 22vh, 220px); }
.about__back { margin-top: clamp(56px, 8vh, 88px); }
.founders { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.founder { margin: 0; background: var(--bg); padding: 0 0 22px; }
.founder__img { aspect-ratio: 1; overflow: hidden; }
.founder__img img { width: 100%; height: 100%; object-fit: cover; }
.founder figcaption { padding: 18px 18px 0; display: grid; gap: 4px; }
.founder__name { font-family: var(--display); font-weight: 500; font-size: 16px; letter-spacing: 0.01em; color: #fff; }
.founder__role { font-size: 13px; color: var(--text-3); }
.founder__line { margin-top: 6px; font-size: 14px; line-height: 1.5; color: var(--text-2); }

/* site markers on the about map: orange dot, ring and radar pulse */
.locmap__dot { position: absolute; width: 6px; height: 6px; background: var(--accent); border-radius: 1px; transform: translate(-50%, -50%); }
.locmap__ring { position: absolute; width: 18px; height: 18px; border: 1px solid rgba(255, 77, 23, 0.45); border-radius: 50%; transform: translate(-50%, -50%); }
/* radar pulse — two rings expanding out of each marker, offset half a cycle apart.
   They live on the ring, so they inherit its counter-scale and stay a constant size
   on screen however far the map is zoomed. --ping-delay staggers the sites. */
.locmap__ring::before,
.locmap__ring::after { content: ""; position: absolute; inset: -1px; border: 1px solid var(--accent); border-radius: 50%; opacity: 0; animation: locmap-ping 3.4s var(--ease) infinite; animation-delay: var(--ping-delay, 0s); }
.locmap__ring::after { animation-delay: calc(var(--ping-delay, 0s) + 1.7s); }
@keyframes locmap-ping {
  0%   { transform: scale(0.55); opacity: 0; }
  12%  { opacity: 0.5; }
  100% { transform: scale(3.6); opacity: 0; }
}

/* facts — a quieter figure row than .figs (this section already carries two blocks) */
.about__facts { margin-top: clamp(56px, 8vh, 88px); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; padding-top: 28px; border-top: 1px solid var(--line); }
.fact__n { font-family: var(--heading); font-weight: 300; font-size: clamp(1.9rem, 3vw, 2.6rem); line-height: 1; letter-spacing: -0.03em; color: #fff; font-variant-numeric: tabular-nums; }
.about__facts p { margin-top: 6px; font-size: 14px; color: var(--text-2); }

/* ===== responsive + reduced motion — keep at the END of the file; later tasks add rules above this line ===== */
@media (max-width: 980px) {
  :root { --pad: 28px; }
  .cta__full { display: none; }
  .cta__mob { display: inline; }
  .nav__actions { gap: 18px; }
  .nav__inner { height: 64px; }
  .nav__mark { height: 26px; }
  .hero { min-height: 0; padding-top: clamp(120px, 20vh, 180px); }
  
  
  .scale { grid-template-columns: 1fr; gap: 14px; }
  
  
  
  .founders { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .about__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  
  
  
  
  
  
  
  
  
  .contact__grid { grid-template-columns: 1fr; gap: 40px; }
  
  
}
@media (max-width: 600px) {
  .cform__row { grid-template-columns: 1fr; }
  .founders { grid-template-columns: 1fr; }
  .locmap__ring { width: 14px; height: 14px; }
  
  
}
@media (prefers-reduced-motion: reduce) {
  
  .nav__brand, .nav__word, .nav__link { transition: none; }
  
  html { scroll-behavior: auto; }
  .dline { transition: none; }
  .locmap__ring::before, .locmap__ring::after { animation: none; }
  
  
}

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- vscrub — full-screen film that plays with scroll ---------- */
.vscrub { position: relative; background: #000; }
.vscrub__shell { height: var(--vscrub-len, 300vh); }
.vscrub__sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.vscrub__vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 980px), (prefers-reduced-motion: reduce) {
  .vscrub__shell { height: auto; }
  .vscrub__sticky { position: relative; height: 100svh; }
}

/* nav: logo always shown; the name retracts on scroll (terafab-style) */
.nav__mark { position: static; opacity: 1; transform: none; margin-right: 10px; }
.nav--logo-retract .nav__mark { transform: none; }
/* terafab-style retract: the name slides left into the logo while its track closes, fading at the edge */
.nav__word { transition: max-width 0.62s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.4s var(--ease) 0.12s; }
.nav__word-in { display: inline-flex; align-items: baseline; transition: transform 0.62s cubic-bezier(0.65, 0, 0.35, 1); }
.nav--logo-retract .nav__word { opacity: 1; -webkit-mask-image: linear-gradient(90deg, #000 30%, transparent 100%); mask-image: linear-gradient(90deg, #000 30%, transparent 100%); }
.nav--logo-retract .nav__word-in { transform: translateX(-100%); }
@media (prefers-reduced-motion: reduce) { .nav__word, .nav__word-in { transition: none; } }
/* balance: logo height matches the name's cap height + ascender, not taller */
.nav__brand { font-size: 22px; }
.nav__mark { height: 24px; margin-right: 8px; }
@media (max-width: 980px) { .nav__brand { font-size: 20px; } .nav__mark { height: 22px; } }
/* terafab-style: logo a touch taller than the name; grows a little once the name has retracted */
.nav__mark { height: 30px; transform-origin: left center; transition: transform 0.48s cubic-bezier(0.22, 1, 0.36, 1); }
.nav--logo-retract .nav__mark { transform: scale(1.12); }
@media (max-width: 980px) { .nav__mark { height: 26px; } }

/* hero: light pulses travelling along the neurons (canvas over the film) */
.vscrub__pulses { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; mix-blend-mode: screen; }
@media (prefers-reduced-motion: reduce) { .vscrub__pulses { display: none; } }

/* hero split: headline grows out of the brain, brain eases to the right (see main.js "hero split") */
.brain-text { position: absolute; z-index: 2; left: clamp(24px, 7vw, 128px); top: 50%; max-width: min(40vw, 36rem); pointer-events: none; }
.brain-text > * { opacity: 0; transform: translateX(28vw) scale(0.5); filter: blur(14px); transform-origin: 100% 50%;
  transition: opacity 0.9s var(--ease), transform 1.3s cubic-bezier(0.16, 1, 0.3, 1), filter 1s var(--ease); }
.brain-text { transform: translateY(-50%); }
.brain-text__title { font-family: var(--heading); font-weight: 300; font-size: clamp(1.6rem, 2.4vw, 2.4rem); line-height: 1.15; letter-spacing: -0.03em; color: #fff; }

.brain-text__cta { display: inline-flex; margin-top: 32px; }

.brain-text__cta { transition-delay: 0.16s; }
.hero--split .brain-text { pointer-events: auto; }
.hero--split .brain-text > * { opacity: 1; transform: none; filter: none; }
#hero .vscrub__vid, #hero .vscrub__pulses { transition: transform 1.4s cubic-bezier(0.22, 1, 0.36, 1); }
.hero--split .vscrub__vid, .hero--split .vscrub__pulses { transform: translateX(24vw) scale(0.86); }
@media (max-width: 980px), (prefers-reduced-motion: reduce) {
  .brain-text { top: auto; bottom: 12svh; transform: none; left: 24px; right: 24px; max-width: none; pointer-events: auto; }
  .brain-text > * { opacity: 1; transform: none; filter: none; transition: none; }
}
.cform__field select { appearance: none; cursor: pointer; }
.cform__field select option { background: #000; color: #fff; }
.brain-text__cta { transition-delay: 0.12s; }

/* Navi product spin (AI turntable film, loops while on screen): text left, film right, film edges fade into the page */
.navi { position: relative; background: #000; overflow: hidden; }

/* product sections alternate: --flip puts the media on the left */

/* scene 2: statement on the left while the eyes blink, gone once the camera pushes into the eye (see main.js "eyes text") */
.eyes-text { position: absolute; z-index: 2; left: clamp(24px, 7vw, 128px); bottom: 14svh; max-width: min(32vw, 30rem); margin: 0; pointer-events: none;
  font-family: var(--heading); font-weight: 300; font-size: clamp(1.35rem, 2vw, 2rem); line-height: 1.2; letter-spacing: -0.02em; color: #fff;
  opacity: 0; transform: translateY(14px); filter: blur(10px); transition: opacity 0.9s var(--ease), transform 1.1s cubic-bezier(0.16, 1, 0.3, 1), filter 0.9s var(--ease); }
#robot-film .eyes-text.on { opacity: 1; transform: none; filter: none; }
.eyes-text { text-shadow: 0 2px 22px rgba(0, 0, 0, 0.9); }
.eyes-text::before { content: ""; position: absolute; z-index: -1; inset: -56px -80px; background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0) 72%); }
@media (max-width: 980px) { .eyes-text { left: 24px; right: 24px; max-width: none; bottom: 10svh; } }
@media (prefers-reduced-motion: reduce) { .eyes-text { transition: none; } }

/* space film: intro statement at Earth, then the three steps one after another (see main.js "space text") */
.space-text { position: absolute; z-index: 2; left: clamp(24px, 7vw, 128px); top: 50%; width: min(42vw, 40rem); pointer-events: none; transform: translateY(-50%); display: grid; text-shadow: 0 2px 26px rgba(0, 0, 0, 0.85); }
.space-text::before { content: ""; position: absolute; z-index: -1; inset: -56px -72px; background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0) 72%); transition: opacity 0.4s var(--ease); }
.space-text:not(:has(.space-msg.on))::before { opacity: 0; }   /* the shade behind the text only while text is on screen */
.space-text--steps::before { inset: -80px -110px; background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.6) 45%, rgba(0, 0, 0, 0) 75%); }   /* darker: the steps sit over the bright galaxy */
.space-text--steps { text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 2px 26px rgba(0, 0, 0, 0.85); }
.space-msg { grid-area: 1 / 1; align-self: center; }
.space-msg > * { margin: 0; opacity: 0; transform: translateY(16px); filter: blur(10px);
  transition: opacity 0.7s var(--ease), transform 1.1s cubic-bezier(0.16, 1, 0.3, 1), filter 0.7s var(--ease); }
.space-msg__title { font-family: var(--heading); font-weight: 300; font-size: clamp(2.05rem, 3.2vw, 3.2rem); line-height: 1.15; letter-spacing: -0.03em; color: #fff; }
.space-msg__copy { margin-top: 18px !important; font-size: clamp(1.25rem, 1.75vw, 1.65rem); line-height: 1.4; text-wrap: pretty; color: rgba(255, 255, 255, 0.82); }
.space-msg.on > * { opacity: 1; transform: none; filter: none; }
.space-msg.on > :nth-child(2) { transition-delay: 0.08s; }
.space-msg.on > :nth-child(3) { transition-delay: 0.16s; }
@media (max-width: 980px) { .space-text { left: 24px; right: 24px; width: auto; top: auto; bottom: 10svh; transform: none; } }
@media (prefers-reduced-motion: reduce) { .space-msg > * { transition: none; } }

/* Join us: on hover/focus the three choices slide out to the right, one after another, as if coming out of the button */
.join { display: inline-flex; align-items: center; position: relative; }
.join__btn { position: relative; z-index: 1; }
.join__opts { display: flex; align-items: center; gap: 22px; margin: 0 0 0 26px; padding: 0; list-style: none; }
.join__opts a { position: relative; display: inline-block; padding: 6px 0; font-size: 0.95rem; font-weight: 400; letter-spacing: 0.01em; line-height: 1;
  color: rgba(255, 255, 255, 0.72); white-space: nowrap; transition: color 0.25s var(--ease); }
.join__opts a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: 0 50%; transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1); }
.join__opts a:hover, .join__opts a:focus-visible { color: #fff; }
.join__opts a:hover::after, .join__opts a:focus-visible::after { transform: scaleX(1); }
.join__opts li + li::before { content: ""; position: absolute; left: -11px; top: 50%; width: 3px; height: 3px; margin-top: -1.5px; border-radius: 50%; background: rgba(255, 255, 255, 0.35); }
.join__opts li { position: relative; }
.join__opts li { opacity: 0; transform: translateX(-28px) scale(0.92); pointer-events: none;
  transition: opacity 0.28s var(--ease), transform 0.45s cubic-bezier(0.16, 1, 0.3, 1); }
.join:hover .join__opts li, .join:focus-within .join__opts li { opacity: 1; transform: none; pointer-events: auto; }
.join:hover .join__opts li:nth-child(2), .join:focus-within .join__opts li:nth-child(2) { transition-delay: 0.06s; }
.join:hover .join__opts li:nth-child(3), .join:focus-within .join__opts li:nth-child(3) { transition-delay: 0.12s; }
.join .join__opts li { transition-delay: 0s; }
/* touch screens have no hover: show the choices under the button */
@media (hover: none), (max-width: 980px) {
  .join { flex-wrap: wrap; gap: 8px; }
  .join__opts { margin: 0; flex-wrap: wrap; }
  .join__opts li { opacity: 1; transform: none; pointer-events: auto; }
}
@media (prefers-reduced-motion: reduce) { .join__opts li { transition: none; } }

/* scene 2 key statements: same size as the others; key words in cyan over a soft dark fade (no box) */
.eyes-text--key .kw { color: #ff7a45; text-shadow: 0 0 18px rgba(255, 122, 69, 0.55), 0 2px 18px rgba(0, 0, 0, 0.9); }
.eyes-text--key::before { inset: -110px -140px -90px -160px; background: radial-gradient(ellipse at 62% 58%, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0.4) 45%, rgba(0, 0, 0, 0) 72%); }
.eyes-text--key { left: auto; right: clamp(24px, 7vw, 128px); text-align: right; }
@media (max-width: 980px) { .eyes-text--key { left: 24px; right: 24px; text-align: left; } }
/* key lines (factory and meadow): the scene behind is bright and busy, so they are larger and heavier on a smoked-glass card,
   with a faint light edge, and one light sweep as the card comes in */
.eyes-text--key { font-size: clamp(1.3rem, 2.15vw, 2.25rem); font-weight: 400; line-height: 1.18;
  padding: 0.55em 0.8em; border-radius: 18px; overflow: hidden; text-align: left;
  background: linear-gradient(140deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.02) 60%), rgba(8, 10, 14, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.14); -webkit-backdrop-filter: blur(6px) saturate(1.2); backdrop-filter: blur(6px) saturate(1.2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 18px 50px rgba(0, 0, 0, 0.45);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); }
.eyes-text--key .kw { font-weight: 500; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6), 0 0 18px rgba(255, 122, 69, 0.45); }
.eyes-text--key::before { inset: 0; transform: translateX(-120%);
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.26) 50%, transparent 70%); }
#robot-film .eyes-text--key.on::before { transform: translateX(120%); transition: transform 1.4s cubic-bezier(0.45, 0, 0.25, 1) 1.05s; }
@media (max-width: 980px) { .eyes-text--key { left: 16px; right: 16px; } }
@media (min-width: 981px) { .eyes-text--key { max-width: min(37.5vw, 36rem); } .eyes-text.eyes-text--low { bottom: 8svh; } }
@media (prefers-reduced-motion: reduce) { .eyes-text--key::before { display: none; } }

/* targets: scale we are aiming for, four big numbers above the products */
.targets { background: #000; padding: clamp(96px, 14vw, 180px) 0 clamp(72px, 10vw, 140px); }
.targets__title { max-width: 18ch; margin-top: 18px; }
.targets .kw { color: #ff7a45; }
.targets__grid { list-style: none; margin: clamp(48px, 7vw, 96px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(24px, 3vw, 48px); }
.targets__item { display: flex; flex-direction: column; gap: 14px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, 0.14); }
.targets__num { font-family: var(--heading); font-weight: 300; font-size: clamp(2.8rem, 5vw, 4.6rem); line-height: 1; letter-spacing: -0.04em; color: #fff; font-variant-numeric: tabular-nums; }
.targets__label { font-size: clamp(1.05rem, 1.25vw, 1.2rem); line-height: 1.45; text-wrap: pretty; color: var(--text-2); max-width: 26ch; }
.targets__note { margin-top: auto; font-size: 0.88rem; letter-spacing: 0.14em; text-transform: uppercase; color: #ff7a45; }
@media (max-width: 980px) { .targets__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .targets__grid { grid-template-columns: 1fr; } }

/* showroom: garage-style carousel. Robots stand on a circular track; the front one is big and bright, the others sit back on the ring */
.showroom { position: relative; background: #000; padding: clamp(72px, 10vw, 140px) 0 clamp(64px, 8vw, 120px); overflow: hidden; }
.showroom__heading { margin-top: 18px; }
.showroom__stage { position: relative; height: clamp(360px, 46vw, 700px); margin-top: clamp(8px, 2vw, 32px); cursor: grab; outline: none; touch-action: pan-y; user-select: none; }
.showroom__stage.is-drag { cursor: grabbing; }
.showroom__defs { position: absolute; }
.showroom__track { position: absolute; left: 50%; top: 0; width: 0; height: 0; transform: translate(-50%, -50%); border-radius: 50%;   /* size/position set by main.js to match the ring */
  border: 1px solid rgba(255, 122, 69, 0.22); box-shadow: 0 0 60px rgba(255, 122, 69, 0.10) inset, 0 0 40px rgba(255, 122, 69, 0.06);
  background: radial-gradient(ellipse at 50% 50%, rgba(255, 122, 69, 0.10), rgba(0, 0, 0, 0) 65%); }
.showroom__ring { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; }
.showroom__item { position: absolute; left: 50%; top: 0; width: clamp(280px, 40vw, 760px); aspect-ratio: 16 / 9; transform-origin: 50% 88%; will-change: transform, opacity, filter; }
.showroom__item::after { content: ""; position: absolute; left: 20%; right: 20%; bottom: 6%; height: 12%; border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(255, 122, 69, 0.35), rgba(0, 0, 0, 0) 70%); opacity: var(--glow, 0); pointer-events: none; }
.showroom__vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; filter: url(#showroom-black);
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 72%, transparent 100%); mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 72%, transparent 100%); }
.showroom__hit { position: absolute; inset: 15% 25%; z-index: 1; background: none; border: 0; padding: 0; cursor: pointer; }
.showroom__info { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: clamp(16px, 4vw, 64px); margin-top: clamp(8px, 2vw, 24px); }
.showroom__text { text-align: center; min-height: 12rem; }
.showroom__text > * { transition: opacity 0.35s var(--ease), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
.showroom__text.is-swap > :not(.showroom__dots) { opacity: 0; transform: translateY(10px); }
.showroom__eyebrow { margin: 0; font-size: 0.92rem; letter-spacing: 0.16em; text-transform: uppercase; color: #ff7a45; }
.showroom__name { margin: 12px 0 0; font-family: var(--heading); font-weight: 300; font-size: clamp(2.2rem, 4vw, 3.6rem); line-height: 1; letter-spacing: -0.035em; color: #fff; }
.showroom__copy { margin: 16px auto 0; max-width: 44ch; font-size: clamp(0.98rem, 1.15vw, 1.1rem); line-height: 1.5; color: var(--text-2); }
.showroom__dots { display: flex; justify-content: center; gap: 10px; margin-top: 26px; }
.showroom__dot { width: 26px; height: 2px; padding: 0; border: 0; background: rgba(255, 255, 255, 0.25); cursor: pointer; transition: background 0.3s var(--ease), width 0.3s var(--ease); }
.showroom__dot[aria-selected="true"] { width: 44px; background: #ff7a45; }
.showroom__arrow { width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.22); background: none; color: #fff; font-size: 1.6rem; line-height: 1; cursor: pointer;
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease), color 0.25s var(--ease); }
.showroom__arrow:hover, .showroom__arrow:focus-visible { border-color: #fff; background: #fff; color: #000; }
@media (max-width: 700px) { .showroom__item { width: 86vw; } .showroom__arrow { width: 42px; height: 42px; } .showroom__text { min-height: 14rem; } }

/* showroom v2: whole showroom fits one screen; only the focused robot shows, its specs float around it */
.showroom { height: 100svh; min-height: 560px; display: flex; flex-direction: column; padding: clamp(64px, 8vh, 96px) 0 clamp(16px, 3vh, 32px); box-sizing: border-box; }
.showroom__heading { font-size: clamp(1.8rem, 3vw, 2.6rem); }
.showroom__stage { flex: 1 1 auto; height: auto; min-height: 0; margin-top: 0; }
.showroom__item { width: min(46vw, 118vh, 820px); }
.showroom__info { margin-top: 0; }
.showroom__text { min-height: 0; }
.showroom__copy { display: none; }
.showroom__name { font-size: clamp(1.9rem, 3.2vw, 3rem); }
.showroom__dots { margin-top: 16px; }
.showroom__specs { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; pointer-events: none; z-index: 200; }
.showroom__spec { position: absolute; width: min(22vw, 300px); font-size: clamp(0.9rem, 1.05vw, 1.02rem); line-height: 1.4; color: rgba(255, 255, 255, 0.86);
  opacity: 0; transition: opacity 0.45s var(--ease), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); }
.showroom__spec::before { content: ""; position: absolute; top: 0.7em; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: #ff7a45; box-shadow: 0 0 12px rgba(255, 122, 69, 0.8); }
.showroom__spec::after { content: ""; position: absolute; top: 0.7em; height: 1px; width: clamp(28px, 4vw, 70px); background: linear-gradient(90deg, rgba(255, 122, 69, 0.7), rgba(255, 122, 69, 0)); }
.showroom__spec--l1, .showroom__spec--l2 { left: clamp(24px, 6vw, 120px); text-align: right; padding-right: 22px; transform: translateX(-16px); }
.showroom__spec--l1::before, .showroom__spec--l2::before { right: 0; }
.showroom__spec--l1::after, .showroom__spec--l2::after { left: 100%; transform: scaleX(-1); transform-origin: 0 50%; background: linear-gradient(90deg, rgba(255, 122, 69, 0), rgba(255, 122, 69, 0.7)); transform: none; margin-left: 4px; }
.showroom__spec--r1, .showroom__spec--r2 { right: clamp(24px, 6vw, 120px); padding-left: 22px; transform: translateX(16px); }
.showroom__spec--r1::before, .showroom__spec--r2::before { left: 0; }
.showroom__spec--r1::after, .showroom__spec--r2::after { right: 100%; margin-right: 4px; background: linear-gradient(90deg, rgba(255, 122, 69, 0), rgba(255, 122, 69, 0.7)); }
.showroom__spec--l1, .showroom__spec--r1 { top: 26%; }
.showroom__spec--l2, .showroom__spec--r2 { top: 54%; }
.showroom__specs.on .showroom__spec { opacity: 1; transform: none; }
.showroom__specs.on .showroom__spec--l2 { transition-delay: 0.08s; }
.showroom__specs.on .showroom__spec--r1 { transition-delay: 0.16s; }
.showroom__specs.on .showroom__spec--r2 { transition-delay: 0.24s; }
@media (max-width: 900px) {
  .showroom__item { width: 88vw; }
  .showroom__specs { inset: auto 0 18px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; padding: 0 24px; }
  .showroom__spec { position: relative; left: auto; right: auto; top: auto; width: auto; text-align: left; padding: 0 0 0 16px; transform: none; font-size: 0.88rem; }
  .showroom__spec::before { left: 0; right: auto; }
  .showroom__spec::after { display: none; }
}
.showroom { scroll-margin-top: 0; }   /* it fills the screen and has its own top space for the nav */

/* showroom specs hug the robot at any width (--iw = robot film width, set by main.js); bigger robot on large screens */
.showroom__item { width: min(46vw, 118vh, 1180px); }
.showroom__spec--l1, .showroom__spec--l2 { left: auto; right: calc(50% + var(--iw, 700px) * 0.34 + 24px); }
.showroom__spec--r1, .showroom__spec--r2 { right: auto; left: calc(50% + var(--iw, 700px) * 0.34 + 24px); }
@media (max-width: 900px) {
  .showroom__item { width: 88vw; }
  .showroom__spec--l1, .showroom__spec--l2, .showroom__spec--r1, .showroom__spec--r2 { left: auto; right: auto; }
}
/* hero on phones/tablets: soft dark fade under the headline and Join us links so they read over the bright brain */
@media (max-width: 980px) {
  .brain-text::before { content: ""; position: absolute; z-index: -1; left: -24px; right: -24px; top: -28svh; bottom: -12svh;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.5) 55%, rgba(0, 0, 0, 0) 100%); pointer-events: none; }
}

/* last scene: lab glide; statement on the left over a soft dark fade, cyan key words */
.lab-text { position: absolute; z-index: 2; left: clamp(24px, 6vw, 110px); top: 50%; transform: translateY(-50%); max-width: min(36vw, 34rem); pointer-events: none; text-shadow: 0 2px 22px rgba(0, 0, 0, 0.85); }
.lab-text::before { content: ""; position: absolute; z-index: -1; inset: -90px -140px; background: radial-gradient(ellipse at 40% 50%, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.35) 50%, rgba(0, 0, 0, 0) 75%); }
.lab-text > * { margin: 0; opacity: 0; transform: translateY(14px); filter: blur(8px); transition: opacity 0.9s var(--ease), transform 1.1s cubic-bezier(0.16, 1, 0.3, 1), filter 0.9s var(--ease); }
.lab-text .kw { color: #ff7a45; }
.lab-text__title { margin-top: 0 !important; font-family: var(--heading); font-weight: 300; font-size: clamp(2.4rem, 4.2vw, 4rem); line-height: 1.04; letter-spacing: -0.03em; color: #fff; }
.lab-text__sub { margin-top: clamp(18px, 2.4vh, 26px) !important; font-size: clamp(1.2rem, 1.6vw, 1.55rem); font-weight: 500; letter-spacing: 0.01em; line-height: 1.3; color: #fff; }
.lab-text__copy { margin-top: clamp(14px, 2vh, 20px) !important; max-width: 36ch; font-size: clamp(1.02rem, 1.25vw, 1.2rem); line-height: 1.6; color: rgba(255, 255, 255, 0.75); }
#lab-film.lab-on .lab-text > * { opacity: 1; transform: none; filter: none; }
#lab-film.lab-on .lab-text > :nth-child(2) { transition-delay: 0.08s; }
#lab-film.lab-on .lab-text > :nth-child(3) { transition-delay: 0.16s; }
#lab-film.lab-on .lab-text > :nth-child(4) { transition-delay: 0.24s; }
@media (max-width: 980px) { .lab-text { left: 24px; right: 24px; max-width: none; top: auto; bottom: 10svh; transform: none; } }
@media (prefers-reduced-motion: reduce) { .lab-text > * { transition: none; } }

/* review fixes: keyboard users see the Join us links; visible carousel focus; tappable dots; modal fits short screens;
   text stays readable without JavaScript */
.brain-text:focus-within { pointer-events: auto; }
.brain-text:focus-within > * { opacity: 1; transform: none; filter: none; }
.showroom__stage:focus-visible { outline: 1px solid rgba(255, 255, 255, 0.6); outline-offset: -8px; }
.showroom__dot { height: 24px; padding: 11px 0; background-clip: content-box; }

html:not(.js) .vscrub__shell { height: auto; }
html:not(.js) :is(.brain-text > *, .eyes-text, .space-msg > *, .lab-text > *) { opacity: 1; transform: none; filter: none; }
/* showroom: only the robot and its name (no spec callouts, no type label) */
.showroom__specs { display: none; }
/* Join us: glass pill with a cyan edge glow and a light sweep on hover; arrow slides */
.join__btn.link-cta--fill { position: relative; overflow: hidden; isolation: isolate; padding: 13px 22px 13px 24px; border-radius: 999px;
  color: #fff; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 122, 69, 0.55); backdrop-filter: blur(8px);
  box-shadow: 0 0 0 1px rgba(255, 122, 69, 0.08) inset, 0 0 24px rgba(255, 122, 69, 0.18); letter-spacing: 0.02em;
  transition: color 0.3s var(--ease), background 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.4s var(--ease); }
.join__btn.link-cta--fill::before { content: ""; position: absolute; z-index: -1; inset: 0; transform: translateX(-120%);
  background: linear-gradient(100deg, transparent 20%, rgba(255, 122, 69, 0.35) 50%, transparent 80%); transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
.join__btn.link-cta--fill::after { transition: transform 0.3s var(--ease); }
.join:hover .join__btn, .join__btn:focus-visible { color: #fff; background: rgba(255, 122, 69, 0.14); border-color: #ff7a45;
  box-shadow: 0 0 0 1px rgba(255, 122, 69, 0.25) inset, 0 0 34px rgba(255, 122, 69, 0.4); }
.join:hover .join__btn::before, .join__btn:focus-visible::before { transform: translateX(120%); }
.join:hover .join__btn::after { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) { .join__btn.link-cta--fill::before { display: none; } }

/* ACMS: our ground-truth engine. Logo left, text right; no boxes, cyan key words */
.acms { background: #000; padding: clamp(96px, 13vw, 170px) 0; }
.acms__inner { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.6fr); gap: clamp(32px, 6vw, 110px); align-items: center; }
.acms__brand { display: flex; justify-content: center; }
.acms__logo { width: clamp(120px, 14vw, 200px); height: auto; filter: drop-shadow(0 0 40px rgba(255, 122, 69, 0.18)); }
.acms .kw { color: #ff7a45; }
.acms__kicker { letter-spacing: 0.16em; text-transform: uppercase; }
.acms__title { margin-top: 16px; max-width: 22ch; font-size: clamp(1.9rem, 3.2vw, 3rem); }
.acms__sub { margin: 18px 0 0; font-size: clamp(1.1rem, 1.4vw, 1.3rem); text-wrap: balance; color: #fff; }
.acms__points { list-style: none; margin: clamp(28px, 4vw, 44px) 0 0; padding: 0; display: grid; gap: 22px; max-width: 70ch; }
.acms__points li { position: relative; padding-left: 22px; font-size: clamp(1.06rem, 1.25vw, 1.2rem); line-height: 1.55; color: var(--text-2); }
.acms__points li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 7px; height: 7px; border-radius: 50%; background: #ff7a45; box-shadow: 0 0 12px rgba(255, 122, 69, 0.7); }
.acms__points b { color: #fff; font-weight: 500; }
@media (max-width: 800px) { .acms__inner { grid-template-columns: 1fr; } .acms__brand { justify-content: flex-start; } }

/* family scene statement: top left, on the same glass card as the factory lines (see "key lines") */
.eyes-text--top { left: clamp(24px, 7vw, 128px); right: auto; top: clamp(96px, 16vh, 170px); bottom: auto; text-align: left;
  max-width: min(40vw, 36rem); background-color: rgba(8, 10, 14, 0.5); /* deeper tint: the meadow and its mist are brighter than the factory */ }
@media (max-width: 980px) { .eyes-text--top { left: 16px; right: 16px; max-width: none; top: 90px; } }
.showroom__dot, .showroom__dot[aria-selected="true"] { background-clip: content-box; }

/* footer: call to join on the left, full Intuitive logo (mark + name) on the right, legal line below */
.footer__row { display: flex; align-items: center; justify-content: space-between; gap: clamp(32px, 6vw, 96px); padding: clamp(56px, 8vw, 110px) 0 clamp(32px, 4vw, 56px); }
.footer__title { max-width: 16ch; }
.footer__cta .join { margin-top: 32px; }
.footer__brand { display: flex; justify-content: flex-end; flex-shrink: 0; }
@media (max-width: 980px) { .footer__row { flex-direction: column; align-items: flex-start; } .footer__brand { justify-content: flex-start; } }
.footer__logo { width: clamp(190px, 20vw, 300px); height: auto; }
.footer__base { justify-content: center; text-align: center; }

/* home: the nav lines up with the film text (logo over its left edge), not with the 1180px container */
.nav--film .nav__inner { max-width: none; padding-inline: clamp(24px, 7vw, 128px); }
@media (max-width: 980px) { .nav--film .nav__inner { padding-inline: 24px; } }

/* ---------- text motion (main.js "text motion" splits these into words) ----------
   Film captions: words focus in one after another (blur to sharp, small rise), then key words light up orange;
   they leave together, faster. Headings rise word by word out of a mask. Kickers and step labels wipe in.
   Robot names cascade in letter by letter. */
.w, .w__in { display: inline-block; }
:is(.space-msg, .lab-text, .brain-text) .split .w__in, .eyes-text.split .w__in {
  opacity: 0; transform: translateY(0.42em); filter: blur(7px);
  transition: opacity 0.3s cubic-bezier(0.4, 0, 1, 1), transform 0.3s cubic-bezier(0.4, 0, 1, 1), filter 0.3s cubic-bezier(0.4, 0, 1, 1); }
:is(.space-msg.on, #lab-film.lab-on, .hero--split) .split .w__in, .eyes-text.split.on .w__in {
  opacity: 1; transform: none; filter: none; transition-delay: calc(var(--d) * 1ms);
  transition-duration: 0.55s, 0.95s, 0.7s; transition-timing-function: var(--ease), cubic-bezier(0.16, 1, 0.3, 1), var(--ease); }
/* key words land white, flare, then settle orange */
:is(.space-msg.on, #lab-film.lab-on, .hero--split) .split .kw .w__in, .eyes-text.split.on .kw .w__in, .h2.split.in-view .kw .w__in {
  animation: kw-ignite 1s var(--ease) both; animation-delay: calc(var(--d) * 1ms + 450ms); }
@keyframes kw-ignite { from { color: #fff; text-shadow: none; } 40% { color: #ffd0b8; text-shadow: 0 0 24px rgba(255, 150, 105, 0.95); } to { color: #ff7a45; } }
/* the blocks themselves no longer blur: their words do. Captions come in quick and leave quicker */
.eyes-text.split { filter: none; transition: opacity 0.35s cubic-bezier(0.4, 0, 1, 1), transform 0.35s cubic-bezier(0.4, 0, 1, 1); }
#robot-film .eyes-text.split.on { transition: opacity 0.45s var(--ease), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1); }
.space-msg > .split, .lab-text > .split { opacity: 1; transform: none; filter: none; transition: none; }
.brain-text > .split { filter: none; }
@media (max-width: 980px), (prefers-reduced-motion: reduce) { .brain-text .split .w__in { opacity: 1; transform: none; filter: none; transition: none; } }
/* headings: each word rises out of its own mask (padding keeps ascenders, descenders and italics unclipped) */
.js .h2.split { opacity: 1; transform: none; }
.h2.split .w { overflow: hidden; vertical-align: top; padding: 0.1em 0.06em 0.14em; margin: -0.1em -0.06em -0.14em; }
.h2.split .w__in { transform: translateY(115%); transition: transform 1.05s cubic-bezier(0.16, 1, 0.3, 1); transition-delay: calc(var(--d) * 1ms); }
.h2.split.in-view .w__in { transform: none; }
/* kickers wipe in left to right */
.js .kicker.reveal { clip-path: inset(-0.2em calc(100% - 1px) -0.2em -0.2em); /* a 1px sliver: a zero-width clip hides it from the reveal observer */
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease), clip-path 1.1s cubic-bezier(0.65, 0, 0.35, 1); }
.js .kicker.reveal.in-view { clip-path: inset(-0.2em); }
/* robot names */
.showroom__name .ch { display: inline-block; animation: ch-in 0.8s cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: calc(var(--k) * 32ms); }
@keyframes ch-in { from { opacity: 0; transform: translateY(0.45em); filter: blur(6px); } }
@media (prefers-reduced-motion: reduce) {
  .w__in, .showroom__name .ch { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; animation: none !important; }
  .eyes-text.split { transition: none; }
  .js .kicker.reveal { clip-path: none; }
}

/* coming-soon robot (showroom): its film is pre-blurred; a glass tag with a faint light edge sits over it */
.showroom__soon { position: absolute; left: 50%; top: 46%; z-index: 2; transform: translate(-50%, -50%); pointer-events: none; white-space: nowrap;
  padding: 10px 20px; border-radius: 999px; font-size: 0.85rem; letter-spacing: 0.24em; text-transform: uppercase; color: #fff;
  background: rgba(8, 10, 14, 0.35); border: 1px solid rgba(255, 255, 255, 0.18); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 10px 30px rgba(0, 0, 0, 0.4); }

/* investors / careers / collab pages: text beside a large picture slot, then the form */
.page-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(28px, 5vw, 72px); align-items: center; padding-top: clamp(24px, 4vw, 48px); }
.page-hero__lead { margin-top: 22px; max-width: 46ch; font-size: clamp(1.05rem, 1.3vw, 1.2rem); line-height: 1.55; color: var(--text-2); }
.page-hero__media { margin: 0; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 18px; border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5); }
.page-hero__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.page-form { max-width: 760px; margin-top: clamp(48px, 7vw, 96px); }
@media (max-width: 860px) { .page-hero { grid-template-columns: 1fr; } }
/* lab: still image in place of the old film */
.lab-still { position: relative; height: 100svh; min-height: 560px; overflow: hidden; background: #000; }
.lab-still__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lab-still::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(0,0,0,.9), rgba(0,0,0,.7) 30%, rgba(0,0,0,.25) 50%, rgba(0,0,0,0) 66%), linear-gradient(0deg, #000, rgba(0,0,0,0) 18%); }
@media (max-width: 980px) { .lab-still::after { background: linear-gradient(0deg, rgba(0,0,0,.85), rgba(0,0,0,.3) 55%, rgba(0,0,0,0)); } }
/* eyes + chip captions: larger */
.eyes-text--big { font-size: clamp(1.6rem, 2.55vw, 2.65rem); max-width: min(42vw, 40rem); text-wrap: pretty; }
/* meadow: one word carries the line, the rest sits small around it */
.eyes-text--contrast { font-size: clamp(1.2rem, 1.7vw, 1.75rem); }
.eyes-text .eyes-hero { display: block; font-size: 3.4em; line-height: 0.95; font-weight: 600; letter-spacing: -0.045em; margin: 0.04em 0 0.06em -0.04em; }
@media (max-width: 980px) { .eyes-text--big { max-width: none; right: 16px; } }
.eyes-text--slide { font-size: clamp(2.4rem, 4.4vw, 4.8rem); line-height: 1.08; font-weight: 500; width: fit-content; max-width: none; }
.eyes-text--slide .w { display: block; width: fit-content; }   /* one word per line */   /* words slide in from the box edge, not from across the screen */
/* factory captions: large, filling the bottom-right corner */
@media (min-width: 981px) { .eyes-text.eyes-text--corner { right: clamp(20px, 3vw, 56px); bottom: 6svh; width: min(56vw, 54rem); max-width: none; font-size: clamp(1.6rem, 2.6vw, 2.8rem); } #robot-film .eyes-text--corner:not(.eyes-text--low) .eyes-hero { font-size: 4.2em; } #robot-film .eyes-text--corner:not(.eyes-text--low) { width: fit-content; right: clamp(16px, 2vw, 40px); } }
.eyes-text--corner .eyes-hero { font-size: 2.8em; }
@media (max-width: 980px) { .eyes-text--corner { font-size: clamp(1.35rem, 5vw, 1.75rem); } }
/* meadow: no glass box, words fly in from the screen edge */
#robot-film .eyes-text--slide { overflow: visible; background: none !important; border: 0; border-radius: 0; padding: 0; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.55), 0 4px 28px rgba(0, 0, 0, 0.6); }
#robot-film .eyes-text--slide::before, #robot-film .eyes-text--slide::after { display: none; }
/* meadow: the orange word stands out like the factory headline words */
#robot-film .eyes-text--slide .kw { display: block; font-size: 2.2em; line-height: 0.95; font-weight: 600; letter-spacing: -0.045em; margin: 0.02em 0 0.04em -0.04em; }
/* meadow text fills the left half of the screen, top to bottom */
@media (min-width: 981px) { #robot-film .eyes-text--slide { font-size: min(11.5svh, 6.8vw); top: 80px; line-height: 1.02; } }
/* about: outline map of Europe + Asia. Scroll drives it: it starts on all of Europe and Asia and zooms in
   on the two sites. JS sets --s (zoom, 1 to 4) and --p (1 to 0, region names fade with it) on .regionmap__sticky. */
.regionmap { margin-top: clamp(80px, 12vw, 160px); }
.regionmap__shell { height: 240vh; }
.regionmap__sticky { --s: 1; --p: 1; position: sticky; top: 0; height: 100vh; padding-top: 96px; padding-bottom: 32px; display: flex; flex-direction: column; justify-content: center; }
.regionmap .h2 { margin-top: 18px; max-width: 18ch; }
.regionmap__map { position: relative; width: min(100%, calc((100vh - 300px) * 1.875)); margin: clamp(24px, 4vh, 48px) auto 0; aspect-ratio: 1200 / 640; overflow: hidden; background: #000; }
.regionmap__zoom { position: absolute; inset: 0; transform: scale(var(--s)); transform-origin: 52.6% 74.5%; will-change: transform; }
.regionmap__zoom img { display: block; width: 100%; height: auto;
  -webkit-mask-image: radial-gradient(ellipse 58% 56% at 52% 52%, #000 45%, transparent 100%); mask-image: radial-gradient(ellipse 58% 56% at 52% 52%, #000 45%, transparent 100%); }   /* soft edges hide the map cut lines */
/* names, markers and labels keep their size on screen while the map zooms */
.regionmap__name { position: absolute; transform: translate(-50%, -50%) scale(calc(1 / var(--s))); font-size: clamp(11px, 1.1vw, 15px); letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255, 255, 255, 0.45);
  opacity: clamp(0, calc((var(--p) - 0.55) * 4), 1); }
.regionmap__glow { position: absolute; width: clamp(150px, 21vw, 300px); aspect-ratio: 1; transform: translate(-50%, -50%) scale(calc(1 / var(--s))); border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 77, 23, 0.18) 0%, rgba(255, 77, 23, 0.06) 42%, transparent 68%); }
.regionmap__pin { position: absolute; width: 0; height: 0; transform: scale(calc(1 / var(--s))); }
.regionmap__site { position: absolute; left: 14px; bottom: 2px; font-size: clamp(11px, 1vw, 14px); color: #fff; white-space: nowrap; }
.regionmap__pin--below .regionmap__site { bottom: auto; top: 2px; }
@media (max-width: 980px), (prefers-reduced-motion: reduce) {   /* still: a little zoomed in so the two sites stay apart */
  .regionmap__shell { height: auto; }
  .regionmap__sticky { --s: 1.4; --p: 1; position: static; height: auto; display: block; padding: 0; }
  .regionmap__map { width: 100%; }
}
/* hero: Join us sits in the bottom-left corner of the first screen */
.hero-cta { position: absolute; z-index: 3; left: clamp(24px, 7vw, 128px); bottom: clamp(28px, 7svh, 72px); opacity: 0; transform: translateY(12px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.hero-cta { pointer-events: none; transition-delay: 0.2s; }   /* appears together with the brain text */
.hero--split .hero-cta, html:not(.js) .hero-cta { opacity: 1; transform: none; pointer-events: auto; }
@media (max-width: 980px), (prefers-reduced-motion: reduce) { .hero-cta { opacity: 1; transform: none; pointer-events: auto; } }
@media (max-width: 980px) { .hero-cta { left: 24px; bottom: 24px; } #hero .brain-text { bottom: calc(24px + 104px); } }
/* Earth to galaxy: all three steps stay on screen together */
.space-msg--steps .space-msg__title { font-size: clamp(1.4rem, 2.1vw, 2.1rem); line-height: 1.08; }
.space-msg--steps .space-msg__copy { margin-top: 2px !important; font-size: clamp(1.02rem, 1.3vw, 1.3rem); }
.space-msg--steps .space-msg__copy + .space-msg__title { margin-top: clamp(20px, 3.2vh, 34px) !important; }
.space-msg--steps > * { transform: none; filter: none; transition: none; }   /* the steps appear as they are, no effect */
/* the line on top of the steps: bold white, a little larger than the step titles */
.space-msg--steps .space-msg__lead { font-family: var(--heading); font-weight: 600; font-size: clamp(1.7rem, 2.7vw, 2.75rem); line-height: 1.14;
  letter-spacing: -0.03em; color: #fff; margin-bottom: clamp(20px, 3.6vh, 38px); }
.space-msg--steps .space-msg__lead .kw { color: #ff7a45; }   /* highlight words in the orange used by the other captions */
/* galaxy text, desktop: bold line at top-left, the three steps side by side along the bottom, space stays clear in the middle */
@media (min-width: 981px) {
  .lay-row.space-text--steps { left: clamp(24px, 6vw, 110px); right: clamp(24px, 6vw, 110px); top: 140px; bottom: 7vh; width: auto; transform: none; }
  .lay-row.space-text--steps::before { inset: -140px calc(-1 * clamp(24px, 6vw, 110px)) -7vh; background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 15%, rgba(0,0,0,0) 36%, rgba(0,0,0,0) 56%, rgba(0,0,0,0.85) 100%); }   /* reaches the screen edges, so no box edge shows */
  .lay-row .space-msg--steps { height: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto 1fr auto auto; column-gap: clamp(28px, 4vw, 72px); }
  .lay-row .space-msg__lead { grid-column: 1 / -1; text-align: left; margin: 0 !important; }
  .lay-row .space-msg--steps .space-msg__title { grid-row: 3; align-self: end; margin-top: 0 !important; }   /* titles sit on their text, whatever their line count */
  .lay-row .space-msg__copy { grid-row: 4; }
  .lay-row .space-msg__title:nth-of-type(2), .lay-row .space-msg__copy:nth-of-type(3) { grid-column: 1; }
  .lay-row .space-msg__title:nth-of-type(4), .lay-row .space-msg__copy:nth-of-type(5) { grid-column: 2; }
  .lay-row .space-msg__title:nth-of-type(6), .lay-row .space-msg__copy:nth-of-type(7) { grid-column: 3; }
}
/* a line inside a caption with its own time: fades in when the film reaches its data-t0 (lead lines: Earth in the middle at 81 s, Mars in at 86 s) */
.space-line { opacity: 0; transition: opacity 1.2s var(--ease); }
.space-line.on { opacity: 1; }
/* a step paragraph with its own time stays hidden until then, even while the steps caption is on (Step 1: Sun at 93 s, Step 2: galaxy at 99.5 s, Step 3: galaxy starts to leave at 103.5 s) */
.space-msg--steps > .space-line { transition: opacity 1.2s var(--ease); }
.space-msg.on > .space-line:not(.on) { opacity: 0; }
.space-text--steps:not(:has(.space-line.on))::before { opacity: 0; }   /* no shade before the first line is in */
#hero.hero--gone .hero-cta { opacity: 0; pointer-events: none; transition: opacity 0.3s var(--ease); }   /* hidden once the hero scrolls away, so it never shows behind the header */
/* forms: spam trap field, off screen for people (bots fill it and are dropped by api/send.php) */
.cform__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }