/* ============================================================================
   pages.css: the rules that belong to one page, not to the whole site.

   Loaded per page with the front-matter "css" key, so a service page never
   downloads the /projects carousel or the business-card layout. Everything in
   site.css is shared chrome; everything here is scoped to a page shell:

     .room-page     the Webflow "room" shell: /projects, /project/<slug>, /404
     .welcome-page  the contact page: film, plates, mission select, form
     .card-page     /aj-8qf3xa, the private business card

   Class names describe the design. The Webflow-era names kept are behaviour
   hooks the JS queries: .toai-form-root, .toai-rv / .toai-in.
   ========================================================================== */

/* ==========================================================================
   1. The room shell: corner frame, buttons, background plate
   ========================================================================== */

.room-page {
  --room-max: 1400px;
  --room-pad: 60px;
  --room-h2: 64px;
  --room-h3: 48px;
  --room-h4: 32px;
  --room-h5: 20px;
  background: var(--void);
  color: var(--white);
}

@media (max-width: 991px) {
  .room-page {
    --room-pad: 40px;
    --room-h2: 48px;
    --room-h3: 32px;
  }
}

@media (max-width: 767px) {
  .room-page {
    /* Never less than the 30px frame bars: at 20px the copy ran underneath
       them and was clipped on both edges at 390 wide. */
    --room-pad: 40px;
    --room-h2: 32px;
    --room-h3: 32px;
    --room-h4: 24px;
  }
}

/*
 * The letterboxing frame. The live build drew it with eighteen empty divs; the
 * bars and the angled cheeks are pseudo-elements here, so the markup is four
 * elements and one real link.
 */
.frame {
  position: fixed;
  inset: 0;
  z-index: 25;
  pointer-events: none;
  overflow: hidden;
}

.frame::before,
.frame::after {
  content: '';
  position: absolute;
  top: 0;
  width: 30px;
  height: 100%;
  background: var(--void);
}

.frame::before {
  left: 0;
}

.frame::after {
  right: 0;
}

.frame-bar {
  position: absolute;
  left: 0;
  width: 100%;
  height: 30px;
  background: var(--void);
  display: flex;
  justify-content: center;
}

.frame-bar--top {
  top: 0;
}

.frame-bar--bottom {
  bottom: 0;
}

/* The 200x50 plate that hangs off the bar, with its two rotated cheeks. */
.frame-tab {
  position: absolute;
  width: 200px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--void);
  color: var(--white);
  font-family: var(--font-ui);
  font-size: var(--room-h5);
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  pointer-events: auto;
}

 /* The plate hangs a few pixels clear of the bar, as the live frame does. */
.frame-bar--top .frame-tab {
  top: 6px;
}

.frame-bar--bottom .frame-tab {
  bottom: 6px;
}

.frame-tab::before,
.frame-tab::after {
  content: '';
  position: absolute;
  width: 50px;
  height: 50px;
  background: var(--void);
  z-index: -1;
}

.frame-bar--top .frame-tab::before {
  left: -27px;
  top: 10px;
  transform: rotate(-40deg);
}

.frame-bar--top .frame-tab::after {
  right: -27px;
  top: 10px;
  transform: rotate(40deg);
}

.frame-bar--bottom .frame-tab::before {
  left: -27px;
  bottom: 10px;
  transform: rotate(40deg);
}

.frame-bar--bottom .frame-tab::after {
  right: -27px;
  bottom: 10px;
  transform: rotate(-40deg);
}

.frame-tab--quiet {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--white);
  pointer-events: none;
}

/* The top plate is a div that homeText() promotes to a link, as the live
   toaihometext-1.0.1.js does. */
.frame-tab[role='link']:hover {
  color: var(--cyan);
}

/* The four corner ticks, each one L shaped. */
.frame-tick {
  position: absolute;
  width: 28px;
  height: 28px;
}

.frame-tick::before,
.frame-tick::after {
  content: '';
  position: absolute;
  background: rgba(255, 255, 255, 0.5);
}

.frame-tick::before {
  width: 28px;
  height: 1px;
}

.frame-tick::after {
  width: 1px;
  height: 28px;
}

.frame-tick--tl { top: 15px; left: 15px; }
.frame-tick--tr { top: 15px; right: 15px; }
.frame-tick--bl { bottom: 15px; left: 15px; }
.frame-tick--br { bottom: 15px; right: 15px; }

.frame-tick--tl::before,
.frame-tick--tr::before { top: 0; }
.frame-tick--bl::before,
.frame-tick--br::before { bottom: 0; }
.frame-tick--tl::before,
.frame-tick--bl::before { left: 0; }
.frame-tick--tr::before,
.frame-tick--br::before { right: 0; }

.frame-tick--tl::after,
.frame-tick--tr::after { top: 0; }
.frame-tick--bl::after,
.frame-tick--br::after { bottom: 0; }
.frame-tick--tl::after,
.frame-tick--bl::after { left: 0; }
.frame-tick--tr::after,
.frame-tick--br::after { right: 0; }

/*
 * The bracketed room button. Four corner ticks again, drawn as a border image
 * rather than eight divs.
 */
.room-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  color: var(--white);
  font-family: var(--font-ui);
  font-size: var(--fs-body-sm);
  font-weight: 500;
  line-height: 1;
  letter-spacing: var(--ls-tight);
  text-transform: uppercase;
  text-decoration: none;
  /* The live button rests on a red wash behind blurred glass and deepens to an
     inset glow on hover. Two stacked divs there, two declarations here. */
  background: rgba(226, 40, 40, 0.16);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: box-shadow 0.3s cubic-bezier(0.645, 0.045, 0.355, 1),
    color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}

/* Corner brackets: 12px arms in each corner, from one gradient stack. */
.room-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--white), var(--white)), linear-gradient(var(--white), var(--white)),
    linear-gradient(var(--white), var(--white)), linear-gradient(var(--white), var(--white)),
    linear-gradient(var(--white), var(--white)), linear-gradient(var(--white), var(--white)),
    linear-gradient(var(--white), var(--white)), linear-gradient(var(--white), var(--white));
  background-repeat: no-repeat;
  background-size: 12px 1px, 1px 12px, 12px 1px, 1px 12px, 12px 1px, 1px 12px, 12px 1px, 1px 12px;
  background-position:
    left top, left top,
    right top, right top,
    right bottom, right bottom,
    left bottom, left bottom;
}

.room-btn:hover {
  color: var(--white);
  box-shadow: inset 0 0 15px 6px rgba(226, 40, 40, 0.31);
}

.room-btn--corner {
  position: absolute;
  top: 20px;
  right: 10px;
  z-index: 30;
}

@media (max-width: 767px) {
  .room-btn--corner {
    top: 10px;
    right: 0;
  }
}

/* ==========================================================================
   2. /project/<slug>: the case study
   ========================================================================== */

.case {
  position: relative;
  width: 100%;
  padding: var(--room-pad);
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
}

.case-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.case-veil {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: rgba(7, 7, 7, 0.5);
  -webkit-backdrop-filter: blur(80px);
  backdrop-filter: blur(80px);
}

.case-wrap {
  position: relative;
  width: 100%;
  max-width: var(--room-max);
}

.case-block {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 50px;
  width: 100%;
  padding-bottom: 60px;
}

.case-head {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 826px;
  margin-top: 80px;
}

.case-kicker {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--white);
  text-transform: uppercase;
}

.case-h1 {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--room-h2);
  font-weight: 400;
  line-height: 1.4;
  color: var(--white);
  text-transform: uppercase;
}

.case-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 60px;
  width: 100%;
  max-width: 826px;
}

.case-hero {
  width: 100%;
  height: 500px;
  object-fit: cover;
}

.case-prose {
  font-size: 16px;
  line-height: 1.4;
  color: #bdc0c0;
}

.case-prose p {
  margin: 0 0 1em;
}

.case-prose p:last-child {
  margin-bottom: 0;
}

.case-prose ul,
.case-prose ol {
  margin: 0;
  padding-left: 22px;
}

.case-prose li + li {
  margin-top: 0.7em;
}

.case-part {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  width: 100%;
}

.case-part-label {
  font-family: var(--font-ui);
  font-size: var(--room-h5);
  line-height: 1;
  color: var(--white);
  text-transform: uppercase;
}

.case-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  width: 100%;
}

.case-img {
  width: 100%;
  height: 400px;
  object-fit: contain;
}

@media (max-width: 991px) {
  .case-head { margin-top: 100px; }
  .case-hero { height: 400px; }
  .case-prose { font-size: 14px; }
  .case-part { gap: 18px; }
  .case-part-label { font-size: 18px; }
  .case-grid { gap: 30px; }
  .case-img { height: 300px; }
}

@media (max-width: 767px) {
  .case-head { gap: 7px; }
  .case-kicker { font-size: 14px; }
  .case-h1 { font-size: var(--room-h4); line-height: 1.2; }
  .case-body { gap: 54px; }
  .case-hero { height: 250px; }
  .case-part-label { line-height: 1.4; }
  .case-grid { grid-template-columns: 1fr; gap: 20px; }
  .case-img { height: 200px; }
}

/* ==========================================================================
   3. /404
   ========================================================================== */

.nf {
  position: relative;
  width: 100%;
  min-height: 100vh;
  padding: var(--room-pad);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.nf-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.nf-veil {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: rgba(7, 7, 7, 0.5);
  -webkit-backdrop-filter: blur(80px);
  backdrop-filter: blur(80px);
}

.nf-wrap {
  position: relative;
  width: 100%;
  max-width: var(--room-max);
}

.nf-block {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 70px;
  width: 100%;
}

.nf-icon {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.nf-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
}

.nf-h1 {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--room-h5);
  font-weight: 400;
  line-height: 1;
  color: var(--white);
  text-transform: uppercase;
}

.nf-text {
  max-width: 1110px;
  font-size: 16px;
  line-height: 1.5;
  text-align: center;
  color: #bdc0c0;
}

.nf-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  font-family: var(--font-body);
  font-weight: 500;
  line-height: 1;
  color: var(--white);
  text-transform: uppercase;
  text-decoration: none;
  background: transparent;
  border: 0;
  transition: color 0.4s cubic-bezier(0.645, 0.045, 0.355, 1),
    background-color 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.nf-btn:hover {
  color: var(--void);
  background: #fff;
}

.nf-btn:active {
  color: var(--cyan);
}

@media (max-width: 991px) {
  .nf-text { font-size: 14px; }
  .nf-block { gap: 48px; }
}

/* ==========================================================================
   4. /projects: the backdrop and the mission select

   Only what sits in front of the reel lives here. The title card and the reel
   itself (the panels, the pinned mode, the cut) are reel.css, which /projects
   loads after this file.
   ========================================================================== */

.mission {
  position: relative;
  width: 100%;
}

/*
 * Cross-fading blurred plates, one per mission. Fixed to the viewport, as the
 * live room is: the plates are a backdrop, not a page-height background, so a
 * tall stack does not stretch them. projects.js lights them in step with the
 * reel.
 */
.mission-sky {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.mission-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.mission-bg.is-on {
  opacity: 1;
}

/*
 * No JS: show the first plate so the page is never a black field. With JS the
 * module owns the plates from the first frame, and leaving this rule on would
 * keep plate 1 permanently lit underneath every cross-fade.
 */
html:not(.js) .mission-bg:first-child {
  opacity: 1;
}

/*
 * The control room's mission select, at the top of the page above the reel.
 * Amir, 2026-09-21: "the select mission box should also be at the top of the
 * projects page". Same block as /welcome; this only gives it the page's
 * measure and lifts it over the fixed plates behind it.
 */
.mission-intro {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--room-max);
  margin: 0 auto;
  padding: 40px var(--room-pad) 0;
}

@media (prefers-reduced-motion: reduce) {
  .mission-bg {
    transition: none;
  }
}

/* ==========================================================================
   5. /welcome: film, plates, mission select, contact form
   ========================================================================== */

.welcome-page {
  --cyan-ui: var(--cyan-hot);
  background: var(--void);
  color: var(--white);
}

/* ---- the opening film: FIRST CLASS ----------------------------------- */

/*
 * Amir, 2026-10-11: "put the first class animation on top of the contact us
 * page for now and write our main services rotating on it ending with a
 * contact us".
 *
 * The block is the film's own shape, so the whole frame is on screen: 16:9,
 * and 9:16 where hero.js sends the portrait cut (the same media query, and the
 * same one the <picture> chooses its poster by). It is never taller than the
 * screen; only then does the picture cover the box from the centre, as the
 * service pages' opening shots do. The poster is frame 0 and paints first;
 * hero.js lays the clip over it once the page has loaded, while the film is on
 * screen. Nothing is laid on the footage but the gradient at its foot, for
 * the words: no vignette, no tint, no blur.
 */
.fc {
  /* the longest line of the seven in em, set in Orbitron 700 (measured):
     no line is ever wider than the column */
  --fc-fit: 12.5;
  /* the line's foot above the column's: at least --fc-foot, and where the
     film ends at the foot of the screen, enough to leave the scroll cue its
     band, so the cue never has to climb over the words to find a free spot
     (site.js 11). --fc-cue is that band on a room page: the cue's glow tops
     out 117px above the foot of the screen (measured, .room-page .toai-cue).
     --fc-under is how much screen is left below the film. */
  --fc-foot: 26px;
  --fc-cue: 130px;
  --fc-under: max(0px, calc(100vh - 56.25vw));

  position: relative;
  /* over the atmosphere canvas (site.css .atmos, fixed at z 3), under the
     corner frame (z 25) */
  z-index: 5;
  isolation: isolate;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 100vh;
  overflow: hidden;
  background: var(--void);
}

@supports (height: 100svh) {
  .fc {
    --fc-under: max(0px, calc(100svh - 56.25vw));
    max-height: 100svh;
  }
}

/* a browser with no aspect-ratio: the same box, written out */
@supports not (aspect-ratio: 1) {
  .fc {
    height: 56.25vw;
  }
}

/* The block answers to .svc-hero only so that hero.js finds it. site.css
   dresses that name for the service pages (their padding, the scroll cue's
   band, the rule under the block); none of it is this block's. */
body.welcome-page .fc.svc-hero {
  padding: 0;
  border: 0;
}

.fc-media {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background: var(--void);
  pointer-events: none;
}

.fc-poster,
.fc-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

/* the clip comes up over its own first frame once it is really playing
   (hero.js adds .is-live on the video's first "playing") */
.fc-video {
  opacity: 0;
  transition: opacity 0.6s ease;
}

.fc-media.is-live .fc-video {
  opacity: 1;
}

/* Nothing is laid over the film (Amir, 2026-10-12: "don't change the color"):
   no gradient and no shade, on any screen. The picture keeps exactly the
   colour it was finished in, and the line carries its own shadow instead. */

/* A phone held sideways (the query site.css hides the scroll cue by): there
   is no cue to leave room for, so the line keeps to the foot. */
@media (orientation: landscape) and (max-height: 600px) {
  .fc {
    --fc-cue: 0px;
  }
}

/* The column the old film stood in: 60px and the room's padding in from the
   block's edges, so EXIT ROOM is where it was and the line starts on the
   page's own left edge. */
.fc-wrap {
  position: absolute;
  inset: 60px var(--room-pad, 60px);
  max-width: var(--room-max, 1400px);
  margin-inline: auto;
  pointer-events: none;
}

.fc-wrap .room-btn {
  pointer-events: auto;
}

/*
 * The line. Seven words in one cell, one of them on at a time; welcome.js
 * turns them. Each word's box is the whole cell plus room at either end for
 * its shadow (the padding, taken back by the line's negative margin), so the
 * wipe's edge is in the same place on the word leaving and the word arriving.
 */
.fc-line {
  position: absolute;
  left: 0;
  /* 0.13em: the face's descent, which hangs below the line box */
  bottom: max(var(--fc-foot), calc(var(--fc-cue) + 0.13em - 60px - var(--fc-under)));
  display: grid;
  max-width: calc(100% + 1.2em);
  margin: 0 -0.6em;
  color: var(--white);
  font-family: var(--font-display);
  font-size: min(var(--fs-hero), calc((100vw - 2 * var(--room-pad, 60px)) / var(--fc-fit)));
  font-weight: 700;
  line-height: 1;
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  /* with nothing over the film, the shadow is all that holds the line off a
     bright frame: a tight dark edge and a wide soft one */
  text-shadow: 0 0.02em 0.05em rgba(0, 0, 0, 0.85), 0 0.04em 0.18em rgba(0, 0, 0, 0.7), 0 0 0.7em rgba(0, 0, 0, 0.6);
  -webkit-user-select: none;
  user-select: none;
}

.fc-word {
  position: relative;
  grid-area: 1 / 1;
  align-self: end;
  padding: 0 0.6em;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
  visibility: hidden;
}

/*
 * The change is a wipe, left to right, on the reel's curve: the word leaving
 * is cut away from the left as the next is uncovered behind the same edge,
 * and a hairline of the page's cyan rides that edge and is gone when it
 * lands. No fade, no rise. clip-path only while it runs: at rest the word is
 * unclipped.
 */
.fc-word.is-on {
  visibility: visible;
  animation: fcIn 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}

.fc-word.is-out {
  visibility: visible;
  animation: fcOut 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}

.fc-word.is-on::after {
  content: '';
  position: absolute;
  inset: -0.12em 0;
  background: var(--cyan-hot);
  pointer-events: none;
  animation: fcEdge 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

@keyframes fcIn {
  from { clip-path: inset(-0.6em 100% -0.6em 0); }
  to { clip-path: inset(-0.6em 0 -0.6em 0); }
}

@keyframes fcOut {
  from { clip-path: inset(-0.6em 0 -0.6em 0); }
  to { clip-path: inset(-0.6em 0 -0.6em 100%); visibility: hidden; }
}

/* the hairline is out before the edge slows at the far end (the curve covers
   nine tenths of the way in the first third of the time), so it is never seen
   standing in the empty cell beside a short word */
@keyframes fcEdge {
  from { clip-path: inset(0 100% 0 -2px); opacity: 0.9; }
  30% { opacity: 0.9; }
  55% { opacity: 0; }
  to { clip-path: inset(0 0 0 calc(100% - 2px)); opacity: 0; }
}

/* a plain cut, no wipe: reduced motion switched on or off with the page open */
.fc-line.is-cut .fc-word,
.fc-line.is-cut .fc-word::after {
  animation: none;
}

.fc-line.is-cut .fc-word::after {
  opacity: 0;
}

/* CONTACT US is the one word that is a link (to the form, below). Its box is
   the whole cell, as every word's is; what takes the press is the words
   themselves, with a little air above and below for a thumb. */
.fc-word--cta {
  text-decoration: underline;
  text-decoration-color: var(--cyan-hot);
  text-decoration-thickness: 0.05em;
  text-underline-offset: 0.17em;
}

.fc-word--cta > span {
  padding: 0.3em 0;
}

.fc-word--cta.is-on > span {
  pointer-events: auto;
  cursor: pointer;
}

@media (hover: hover) {
  .fc-word--cta:hover {
    color: var(--cyan-hot);
  }
}

/* the same six services and the link, for a screen reader and the keyboard:
   the turning line is aria-hidden */
.fc-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  list-style: none;
}

/* reached with the keyboard, the link shows itself: top left of the column,
   across from EXIT ROOM */
.fc-sr--link:focus-visible {
  top: 20px;
  left: 0;
  width: auto;
  height: auto;
  padding: 10px 14px;
  overflow: visible;
  clip-path: none;
  background: var(--void);
  color: var(--white);
  font-family: var(--font-ui);
  font-size: var(--fs-body-sm);
  letter-spacing: var(--ls-tight);
  text-transform: uppercase;
  outline: 1px solid var(--cyan-hot);
  outline-offset: 2px;
  pointer-events: auto;
}

/* the form stops clear of the frame's top bar and its plate */
.welcome-page #contact {
  scroll-margin-top: 72px;
}

/* A phone held upright: the film's portrait frames, and the long names on two
   lines so the type stays large. --fc-fit is the widest of those lines. */
@media (max-width: 600px) and (orientation: portrait) {
  .fc {
    --fc-fit: 8.6;
    --fc-foot: 4px;
    --fc-under: max(0px, calc(100vh - 177.78vw));
    aspect-ratio: 9 / 16;
  }

  @supports (height: 100svh) {
    .fc {
      --fc-under: max(0px, calc(100svh - 177.78vw));
    }
  }

  @supports not (aspect-ratio: 1) {
    .fc {
      height: 177.78vw;
    }
  }

  .fc-sr--link:focus-visible {
    top: 54px;
  }

  .fc-word {
    white-space: normal;
    text-wrap: balance;
  }
}

/* Without the script the line cannot turn: it rests on the link. */
html:not(.js) .fc-word {
  visibility: hidden;
  animation: none;
}

html:not(.js) .fc-word--cta {
  visibility: visible;
}

html:not(.js) .fc-word--cta > span {
  pointer-events: auto;
}

/* Reduced motion: no turning and no clip. The line rests on CONTACT US and
   the film stays on its poster (hero.js never starts it; this is the belt). */
@media (prefers-reduced-motion: reduce) {
  .fc-video {
    display: none;
  }

  .fc-word,
  .fc-word::after {
    animation: none !important;
  }

  .fc-word::after {
    opacity: 0;
  }

  .fc-word:not(.fc-word--cta) {
    visibility: hidden !important;
  }

  .fc-word--cta {
    visibility: visible;
  }

  .fc-word--cta > span {
    pointer-events: auto;
    cursor: pointer;
  }
}

/* ---- the spoken welcome film (off the page since 2026-10-11) ----------- */

/* Kept for its return: the film is being remade, and FIRST CLASS stands in
   its place for now. Nothing on /welcome matches these rules meanwhile. */

.film {
  position: relative;
  width: 100%;
  height: 100vh;
  padding: 60px var(--room-pad, 60px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.film-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.film-veil {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: rgba(7, 7, 7, 0.5);
  -webkit-backdrop-filter: blur(80px);
  backdrop-filter: blur(80px);
}

.film-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  max-width: var(--room-max, 1400px);
  overflow: hidden;
}

.film-stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  container-type: inline-size;
}

.film-stage mux-player,
.film-stage video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.film-stage mux-player[hidden] {
  display: none;
}

/*
 * The facade: the same Mux poster frame and the same round play control the
 * player paints before it is pressed, so the page looks identical while the
 * 280 KB player bundle waits for the visitor. welcome.js swaps in the real
 * player on the first press.
 */
.film-facade {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: #000;
  cursor: pointer;
}

.film-facade-poster {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* The player's own centre control, measured off the live player: a 90px black
   disc with 24px of padding around its 18:14 play glyph, which the player
   drops to a bare 40px glyph once it is narrower than 480px. */
.film-facade-play {
  position: absolute;
  left: 50%;
  top: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 90px;
  height: 90px;
  padding: 24px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: #000;
  color: #fff;
}

.film-facade-play svg {
  width: 42px;
  height: 33px;
  fill: currentColor;
  transform: translate(3px, 0);
}

@container (max-width: 479.98px) {
  .film-facade-play {
    width: 40px;
    height: 40px;
    padding: 0;
    background: transparent;
  }

  .film-facade-play svg {
    width: 40px;
    height: 31px;
  }
}

.film-facade.is-loading .film-facade-play {
  opacity: 0.7;
}

@media (max-width: 991px) {
  .film { height: 80vh; }
}

/* ---- the plate wall --------------------------------------------------- */

.plates {
  position: relative;
  width: 100%;
  min-height: 100vh;
  padding: 60px var(--room-pad, 60px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.plates-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 150%;
  object-fit: cover;
  filter: brightness(60%) blur(50px);
}

.plates-wrap {
  position: relative;
  width: 100%;
  max-width: var(--room-max, 1400px);
}

.plates-block {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  min-height: 600px;
}

@media (max-width: 991px) {
}

/* ---- the contact form -------------------------------------------------- */

.toai-form-root {
  --form-cyan: #00f5ff;
  --form-panel: #0c0c1a;
  --form-border: rgba(0, 245, 255, 0.2);
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 40px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-terminal);
  touch-action: pan-y;
}

.cform {
  position: relative;
  width: 100%;
  max-width: 640px;
}

.cform-head {
  position: relative;
  margin-bottom: 40px;
}

.cform-head::before {
  content: '// CONTACT';
  display: block;
  margin-bottom: 12px;
  font-family: var(--font-terminal);
  font-size: 11px;
  letter-spacing: var(--ls-label);
  color: rgba(0, 245, 255, 0.4);
  animation: cformBlink 2s infinite;
}

@keyframes cformBlink {
  0%, 90%, 100% { opacity: 1; }
  95% { opacity: 0; }
}

/* The headline is the page's H1 on /welcome (luxury copy pass, 2026-10-05). */
.cform-head h1,
.cform-head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(24px, 5vw, 42px);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: var(--ls-wide);
  color: #fff;
  text-transform: uppercase;
}

.cform-head h1 span,
.cform-head h2 span {
  color: var(--form-cyan);
  text-shadow: 0 0 20px rgba(0, 245, 255, 0.5);
}

.cform-head p {
  margin: 14px 0 0;
  font-size: 13px;
  line-height: 1.7;
  letter-spacing: var(--ls-tight);
  color: rgba(255, 255, 255, 0.4);
}

.cform-call {
  margin-top: 14px;
  font-family: var(--font-terminal);
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: var(--ls-tight);
  color: rgba(255, 255, 255, 0.7);
}

.cform-call a {
  color: var(--form-cyan);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 1px solid rgba(0, 245, 255, 0.4);
  padding-bottom: 1px;
}

.cform-call a:hover {
  text-shadow: 0 0 10px rgba(0, 245, 255, 0.8);
}

.cform-corner {
  position: absolute;
  width: 16px;
  height: 16px;
  border-style: solid;
  border-color: var(--form-cyan);
  opacity: 0.6;
}

.cform-corner--tl { top: -8px; left: -8px; border-width: 2px 0 0 2px; }
.cform-corner--tr { top: -8px; right: -8px; border-width: 2px 2px 0 0; }
.cform-corner--bl { bottom: -8px; left: -8px; border-width: 0 0 2px 2px; }
.cform-corner--br { bottom: -8px; right: -8px; border-width: 0 2px 2px 0; }

.cform-panel {
  position: relative;
  padding: 40px;
  background: var(--form-panel);
  border: 1px solid var(--form-border);
  box-shadow: 0 0 40px rgba(0, 245, 255, 0.05), inset 0 0 40px rgba(0, 0, 0, 0.3);
  clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px));
}

.cform-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.cform-field {
  position: relative;
  margin-bottom: 24px;
}

.cform-field label {
  display: block;
  margin-bottom: 8px;
  font-size: 10px;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--form-cyan);
  opacity: 0.8;
}

.cform-field label::before {
  content: '> ';
  opacity: 0.5;
}

.cform-field input,
.cform-field select,
.cform-field textarea {
  width: 100%;
  padding: 12px 16px;
  font-family: var(--font-terminal);
  font-size: 14px;
  color: #fff;
  background: rgba(0, 245, 255, 0.03);
  border: 1px solid rgba(0, 245, 255, 0.15);
  border-bottom-color: rgba(0, 245, 255, 0.4);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.3s, background 0.3s, box-shadow 0.3s;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);
}

.cform-field select {
  cursor: pointer;
  padding-right: 40px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2300f5ff' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
}

.cform-field select option {
  background: #0c0c1a;
  color: #fff;
}

.cform-field textarea {
  height: 120px;
  line-height: 1.6;
  resize: none;
}

.cform-field input::placeholder,
.cform-field textarea::placeholder {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.2);
}

.cform-field input:focus,
.cform-field select:focus,
.cform-field textarea:focus {
  border-color: var(--form-cyan);
  background: rgba(0, 245, 255, 0.06);
  box-shadow: 0 0 20px rgba(0, 245, 255, 0.08);
}

.cform-rule {
  height: 1px;
  margin: 28px 0;
  background: linear-gradient(90deg, transparent, var(--form-border), transparent);
}

/* .toai-submit-wrap and .toai-submit-btn are behaviour hooks: site.js resets
   the button label through them after a failed send. */
.toai-submit-wrap {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 8px;
}

.toai-submit-btn {
  padding: 16px 36px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: #07070f;
  background: var(--form-cyan);
  border: 0;
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s;
  clip-path: polygon(12px 0%, 100% 0%, calc(100% - 12px) 100%, 0% 100%);
}

.toai-submit-btn:hover {
  background: #fff;
  box-shadow: 0 0 30px rgba(0, 245, 255, 0.6);
}

.toai-submit-btn:disabled {
  opacity: 0.6;
  cursor: progress;
}

.cform-status {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 24px;
  padding: 10px 16px;
  border: 1px solid rgba(0, 245, 255, 0.1);
  font-size: 10px;
  letter-spacing: var(--ls-wide);
  color: rgba(0, 245, 255, 0.4);
}

.cform-dot {
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--form-cyan);
  box-shadow: 0 0 8px var(--form-cyan);
  animation: cformPulse 2s infinite;
}

@keyframes cformPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.8); }
}

@media (max-width: 520px) {
  .cform-row { grid-template-columns: 1fr; }
  .cform-panel { padding: 28px 20px; }
  .toai-submit-wrap { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .cform-head::before,
  .cform-dot {
    animation: none;
  }
}

/* ---- selected results -------------------------------------------------- */

.results {
  margin: 36px 0;
  font-family: var(--font-ui);
  color: #fff;
}

.results-h {
  margin: 0 0 12px;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.2;
}

.results-lede {
  margin: 0 0 22px;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
}

.results-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
}

.results-card {
  padding: 22px 20px;
  background: rgba(0, 245, 255, 0.03);
  border: 1px solid rgba(0, 245, 255, 0.22);
  border-radius: 8px;
  transition: transform 0.2s, box-shadow 0.2s;
}

.results-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 22px rgba(0, 245, 255, 0.12);
}

.results-num {
  margin-bottom: 10px;
  font-size: 34px;
  font-weight: 700;
  line-height: 1;
  color: var(--cyan-hot);
}

.results-label {
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.78);
}

.results-win {
  margin-top: 12px;
  font-size: 11px;
  letter-spacing: var(--ls-tight);
  text-transform: uppercase;
  color: var(--cyan-hot);
}

/* ---- mission select ---------------------------------------------------- */

.ms-sec {
  margin: 40px 0;
}

.ms {
  position: relative;
  padding: 24px 26px 20px;
  font-family: var(--font-ui);
  color: #fff;
  background: rgba(8, 11, 20, 0.55);
  border: 1px solid rgba(0, 245, 255, 0.28);
}

.ms-scan {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(rgba(0, 245, 255, 0.035) 0 1px, transparent 1px 3px);
}

.ms-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 13px;
  border-bottom: 1px solid rgba(0, 245, 255, 0.2);
}

.ms-h {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 900;
  letter-spacing: var(--ls-brand);
}

.ms-caret {
  color: var(--cyan-hot);
  animation: msBlink 1s step-end infinite;
}

@keyframes msBlink {
  50% { opacity: 0; }
}

.ms-right {
  font-size: 11px;
  letter-spacing: var(--ls-wide);
  color: rgba(255, 255, 255, 0.5);
}

.ms-grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 22px;
}

.ms-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.ms-tile {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 14px;
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.015);
  border: 1px solid rgba(0, 245, 255, 0.12);
  border-left: 2px solid transparent;
  transition: background 0.18s, border-color 0.18s, box-shadow 0.18s;
}

.ms-tile.is-on {
  background: rgba(0, 245, 255, 0.08);
  border-left-color: var(--cyan-hot);
  box-shadow: inset 0 0 22px rgba(0, 245, 255, 0.08);
}

.ms-n {
  min-width: 26px;
  font-family: var(--font-terminal);
  font-size: 15px;
  color: var(--cyan-hot);
}

.ms-c {
  flex: 1;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: var(--ls-tight);
}

.ms-st {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 9px;
  letter-spacing: 1.5px;
  white-space: nowrap;
  color: var(--cyan-hot);
}

.ms-st--archive {
  color: rgba(255, 255, 255, 0.4);
}

.ms-panel {
  position: relative;
  padding: 22px 22px 20px;
  background: rgba(0, 245, 255, 0.02);
  border: 1px solid rgba(0, 245, 255, 0.25);
}

.ms-panel-n {
  margin-bottom: 6px;
  font-family: var(--font-terminal);
  font-size: 12px;
  letter-spacing: var(--ls-label);
  color: var(--cyan-hot);
}

.ms-panel-t {
  margin-bottom: 16px;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: var(--ls-tight);
}

.ms-lab {
  margin-bottom: 8px;
  font-size: 10px;
  letter-spacing: var(--ls-wide);
  color: var(--cyan-hot);
}

.ms-obj {
  margin-bottom: 18px;
  font-size: 13px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.8);
}

.ms-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}

.ms-chip {
  padding: 6px 10px;
  font-size: 10px;
  letter-spacing: var(--ls-tight);
  color: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(0, 245, 255, 0.25);
}

.ms-deploy {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 26px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: var(--ls-label);
  color: #05060b;
  text-decoration: none;
  background: var(--cyan-hot);
  box-shadow: 0 0 24px rgba(0, 245, 255, 0.4);
}

.ms-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 16px;
  padding-top: 12px;
  font-size: 10px;
  letter-spacing: var(--ls-wide);
  color: rgba(255, 255, 255, 0.45);
  border-top: 1px solid rgba(0, 245, 255, 0.2);
}

@media (max-width: 760px) {
  .ms-grid { grid-template-columns: 1fr; }
  .ms-head { flex-direction: column; align-items: flex-start; gap: 8px; }
  .ms-foot { flex-direction: column; align-items: flex-start; gap: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .ms-caret { animation: none; }
}

/* The welcome page reuses the service-page type scale for its briefing copy. */
.welcome-page .svc-section {
  position: relative;
  z-index: 2;
}

/* It is the only page that puts a .wrap inside the corner frame, and the
   shared 24px gutter is narrower than the frame's 30px bars. */
@media (max-width: 767px) {
  .welcome-page .wrap {
    padding-left: var(--room-pad);
    padding-right: var(--room-pad);
  }
}

/* ==========================================================================
   6. /aj-8qf3xa: the private business card
   ========================================================================== */

.card-page {
  --card-max: 440px;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom)
    env(safe-area-inset-left);
  background: radial-gradient(120% 90% at 50% -12%, #0b0b10 0%, var(--void) 55%);
  color: var(--white);
  font-family: var(--font-body);
  text-rendering: optimizeLegibility;
}

.card-wrap {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: var(--card-max);
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0 auto;
  padding: 0 20px 34px;
}

.card-hud {
  padding: 16px 0 4px;
  font-size: 10px;
  letter-spacing: 0.26em;
  text-align: center;
  white-space: nowrap;
  color: var(--label);
}

.card-hud .tick,
.card-foot .tick {
  color: var(--cyan);
}

.card-hero {
  position: relative;
  flex: 0 0 auto;
  min-height: 52vh;
  min-height: 52svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 6px 0;
}

.card-fx {
  position: absolute;
  left: -14%;
  top: -4%;
  width: 128%;
  height: 108%;
  z-index: 0;
  pointer-events: none;
}

.card-outer {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 1.586 / 1;
  container-type: inline-size;
  border-radius: 16px;
  cursor: pointer;
  outline: none;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.card-outer:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 6px;
  border-radius: 18px;
}

.card-ground {
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: -7%;
  height: 26%;
  z-index: 0;
  background: radial-gradient(50% 100% at 50% 50%, rgba(0, 0, 0, 0.72), transparent 72%);
  filter: blur(16px);
}

.card-glow {
  position: absolute;
  inset: -4%;
  z-index: 0;
  filter: blur(22px);
  background: radial-gradient(45% 55% at 28% 38%, rgba(35, 186, 231, 0.07), transparent 62%),
    radial-gradient(45% 55% at 72% 64%, rgba(226, 24, 189, 0.06), transparent 62%);
}

.card-scene {
  position: absolute;
  inset: 0;
  z-index: 1;
  perspective: 1200px;
}

.card-tilt,
.card-flip {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}

.card-tilt {
  will-change: transform;
}

.card-face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 16px;
  backface-visibility: hidden;
  font-family: var(--font-body);
  color: var(--white);
  padding: 7.5cqw 8cqw;
  background: linear-gradient(150deg, #141417 0%, #0a0a0c 42%, #050506 100%);
  border: 1px solid var(--rule);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), inset 0 0 0 1px rgba(255, 255, 255, 0.02),
    inset 7px 0 34px -24px rgba(35, 186, 231, 0.6), inset -7px 0 34px -24px rgba(226, 24, 189, 0.5),
    inset 0 -34px 70px -46px rgba(0, 0, 0, 0.85);
  transition: transform 0.7s cubic-bezier(0.2, 0.75, 0.25, 1.08);
  will-change: transform;
}

.card-face--front { transform: rotateY(0deg); }
.card-face--back { transform: rotateY(180deg); }
.card-flip.is-flipped .card-face--front { transform: rotateY(-180deg); }
.card-flip.is-flipped .card-face--back { transform: rotateY(0deg); }

.card-sheen {
  position: absolute;
  inset: -45%;
  z-index: 2;
  pointer-events: none;
  mix-blend-mode: screen;
  background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, 0.09) 50%, transparent 58%);
  transform: translate3d(var(--gx, 0px), var(--gy, 0px), 0);
}

.card-top {
  position: relative;
  z-index: 3;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.card-wordmark {
  position: relative;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 7cqw;
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--white);
}

.card-wordmark i {
  display: block;
  position: relative;
  width: 70%;
  height: 2px;
  margin-top: 1.7cqw;
  background: var(--cyan);
  box-shadow: 0 0 8px rgba(35, 186, 231, 0.55);
}

.card-wordmark i::after {
  content: '';
  position: absolute;
  right: -1.6cqw;
  top: 50%;
  transform: translateY(-50%);
  width: 1.4cqw;
  height: 1.4cqw;
  min-width: 4px;
  min-height: 4px;
  border-radius: 50%;
  background: var(--magenta);
  box-shadow: 0 0 6px rgba(226, 24, 189, 0.7);
}

.card-logo {
  width: 14cqw;
  min-width: 40px;
  height: auto;
  margin: -1cqw -1cqw 0 0;
}

.card-mid {
  position: relative;
  z-index: 3;
  margin-top: auto;
}

.card-name {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 12cqw;
  line-height: 0.92;
  letter-spacing: 0.01em;
  color: var(--white);
}

.card-role {
  margin-top: 2.4cqw;
  font-size: 2.9cqw;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--label);
}

.card-bot {
  position: relative;
  z-index: 3;
  margin-top: 3.2cqw;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  font-size: 2.7cqw;
  letter-spacing: 0.16em;
  color: var(--label);
}

.card-web { color: var(--cyan); }

.card-back-head {
  position: relative;
  z-index: 3;
  font-size: 2.8cqw;
  letter-spacing: 0.2em;
  color: var(--label);
}

.card-rule {
  position: relative;
  z-index: 3;
  height: 2px;
  margin: 3cqw 0 5.5cqw;
  background: linear-gradient(90deg, var(--cyan), rgba(35, 186, 231, 0));
  box-shadow: 0 0 8px rgba(35, 186, 231, 0.35);
}

.card-rows {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 3.4cqw;
}

.card-row {
  display: grid;
  grid-template-columns: 26% 1fr;
  align-items: baseline;
  column-gap: 3cqw;
}

.card-row .k {
  font-size: 2.8cqw;
  letter-spacing: 0.14em;
  color: var(--label);
}

.card-row .v {
  font-size: 3.5cqw;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--white);
}

.card-mono-logo {
  position: absolute;
  right: 7cqw;
  bottom: 6cqw;
  z-index: 3;
  width: 12cqw;
  min-width: 34px;
  height: auto;
  opacity: 0.95;
}

.card-hint {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 15px;
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--label);
  background: rgba(18, 20, 28, 0.55);
  border: 1px solid var(--rule);
  border-radius: 999px;
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.card-hint::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 8px var(--cyan);
  animation: cardPulse 2.4s ease-in-out infinite;
}

.card-hint.is-gone {
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
}

.card-actions {
  display: flex;
  flex-direction: column;
  gap: 11px;
  margin-top: 8px;
}

.card-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  min-height: 52px;
  padding: 0 16px;
  font-family: var(--font-body);
  font-size: 12.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--bright);
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: 11px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.06s ease;
}

.card-btn:hover { border-color: #3d4150; color: var(--white); }
.card-btn:active { transform: translateY(1px); }
.card-btn:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }

.card-btn--primary {
  font-weight: 500;
  letter-spacing: 0.16em;
  color: var(--cyan);
  background: rgba(35, 186, 231, 0.06);
  border-color: var(--cyan);
}

.card-btn--primary:hover,
.card-btn--primary:active {
  color: var(--void);
  background: var(--cyan);
  border-color: var(--cyan);
}

.card-btn--quiet {
  color: var(--label);
  background: transparent;
}

.card-btn--quiet:hover { color: var(--white); }

.card-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 11px;
}

.card-qr-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(7, 7, 7, 0.94);
}

.card-qr-overlay[hidden] { display: none; }

.card-qr-box {
  width: 100%;
  max-width: 320px;
  text-align: center;
}

.card-qr-label {
  margin-bottom: 14px;
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--label);
}

.card-qr-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
  background: #fff;
}

.card-qr-url {
  margin-top: 14px;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--bright);
}

.card-qr-close { margin-top: 18px; }

.card-proof { margin-top: 26px; }
.card-inds { margin-top: 26px; }

.card-lbl {
  margin-bottom: 11px;
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--label);
}

.card-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.card-chip {
  flex: 1 1 88px;
  min-width: 88px;
  padding: 13px 12px;
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: 11px;
}

.card-chip-num {
  font-family: var(--font-ui);
  font-size: 21px;
  font-weight: 700;
  line-height: 1;
  color: var(--cyan);
}

.card-chip-cap {
  margin-top: 7px;
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--label);
}

.card-marq {
  margin-top: 12px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}

.card-marq-track {
  display: flex;
  width: max-content;
  animation: cardMarq 28s linear infinite;
}

.card-marq-half {
  display: flex;
  align-items: center;
}

.card-ind {
  font-size: 11px;
  letter-spacing: 0.18em;
  white-space: nowrap;
  color: var(--bright);
}

.card-dot {
  flex: 0 0 auto;
  width: 4px;
  height: 4px;
  margin: 0 16px;
  border-radius: 50%;
  background: var(--cyan);
  opacity: 0.75;
  box-shadow: 0 0 5px rgba(35, 186, 231, 0.5);
}

@keyframes cardMarq {
  to { transform: translateX(-50%); }
}

.card-foot {
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
  text-align: center;
}

.card-foot-line {
  max-width: 100%;
  overflow: hidden;
  font-size: 9.5px;
  letter-spacing: 0.14em;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--label);
}

.card-tag {
  margin-top: 9px;
  font-size: 12px;
  font-variant: small-caps;
  letter-spacing: 0.05em;
  color: var(--bright);
}

@media (max-width: 400px) {
  .card-foot-line { font-size: 8.5px; letter-spacing: 0.1em; }
}

@keyframes cardRise {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: none; }
}

@keyframes cardPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.3; transform: scale(0.75); }
}

.js .card-rise {
  opacity: 0;
  animation: cardRise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  animation-delay: calc(var(--i, 0) * 70ms);
}

@media (prefers-reduced-motion: reduce) {
  .js .card-rise { animation: none; opacity: 1; transform: none; }
  .card-face { transition: none; }
  .card-hint::before { animation: none; }
  .card-sheen { display: none; }
  .card-marq { -webkit-mask-image: none; mask-image: none; }
  .card-marq-track { animation: none; width: auto; }
  .card-marq-half { flex-wrap: wrap; row-gap: 9px; justify-content: center; }
  .card-marq-half + .card-marq-half { display: none; }
}

/* ==========================================================================
   7. /robot: the ROBOAI room
   ========================================================================== */

/*
 * The live page is one 95vh section: a full-bleed still behind a Spline scene
 * that fills the viewport, with EXIT ROOM in the corner. The .spline-wrap and
 * spline-viewer rules are the page's own custom code, carried over as they are.
 */
.spline {
  position: relative;
  width: 100%;
  height: 95vh;
  padding: 60px var(--room-pad);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.spline-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.spline-wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  touch-action: none;
}

.spline-wrap spline-viewer {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100vh;
  touch-action: none;
  pointer-events: all;
}

/* The live EXIT ROOM sits 40px in from the top right, not 20/10 like the
   in-page room buttons, and slides to the corner on smaller screens. */
.room-btn--loose {
  top: 40px;
  right: 40px;
}

@media (max-width: 991px) {
  .spline { height: 90vh; }
  .room-btn--loose { top: 0; right: 0; }
}

@media (max-width: 767px) {
  .room-btn--loose { top: 10px; }
}

/* ==========================================================================
   8. touch targets on the room pages

   The same rule as site.css section 20: a coarse pointer gets a 44px hit area
   around controls that are drawn shorter, without moving anything. The form
   fields are the exception: 41 and 43px tall, they grow the last 3px, which
   is the only pixel that changes and only on a touch screen.
   ========================================================================== */

@media (pointer: coarse) {
  .room-btn::after,
  .nf-btn::after {
    content: '';
    position: absolute;
    inset: -5px 0;
  }

  .cform-field input,
  .cform-field select,
  .cform-field textarea {
    min-height: 44px;
  }
}