/* ============================================================
   LuminAI (HK) — 綽智創科（香港）
   Static marketing site. Vanilla CSS. No framework.

   Layout geometry, type scale, grid, spacing and the motion-hero
   layer stack are MEASURED off the reference site's own stylesheet
   (see README, "Panel rebuild"). The wordmark-level custom rules
   from that stylesheet are reproduced below value-for-value:

     .panel            <- reference .about-section
     .panel__grid      <- reference .about-grid
     .panel__headline  <- reference .about-headline   (h2 58/500/.98)
     .panel__intro     <- reference .about-intro      (18/1.45/420)
     .panel__feature   <- reference .about-feature    (h3 30/400/1.08)
     .panel__overline  <- reference .about-overline   (13/1.4)
     .panel__detail    <- reference .about-detail     (16/1.5/320)
     .panel__bio       <- reference .about-bio        (max 420, bottom)
     .panel__disciplines <- reference .about-disciplines (6 cols, hairline)
     .hands-*          <- reference .hands-*
     .bottom-gradient  <- reference .bottom-gradient  (220px, z 20)

   Brand (LuminAI) differs only in: the wordmark, its copy, and the
   teal/mint accent used where the reference palette is neutral.
   ============================================================ */

/* ---------- Design tokens (reference names + brand accents) ---------- */
:root {
  --color-white: #ffffff;
  --color-black: #000000;
  --color-brand-black: #000000;
  --color-brand-text-muted: #6e6e73;   /* reference --color-brand-text-muted */
  --color-zinc-800: #27272a;           /* reference --color-zinc-800 */

  /* Brand accents (ours; reference is neutral here) */
  --teal: #14b8a6;
  --teal-ink: #0b7a6d;
  --mint: #6ee7b7;

  --soft: #f4f4f6;                     /* reference grey pill #F4F4F6 */
  --line: rgba(0, 0, 0, 0.08);
  --line-strong: rgba(0, 0, 0, 0.22);
  --line-faint: rgba(0, 0, 0, 0.03);

  --font-display: "Outfit", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "Inter", "PingFang TC", "PingFang SC", "Hiragino Sans",
    "Microsoft JhengHei", "Microsoft YaHei", "Noto Sans TC", "Noto Sans SC",
    ui-sans-serif, system-ui, sans-serif;

  --maxw: 1320px;
  --gutter: clamp(20px, 5vw, 48px);
  --radius-pill: 999px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background-color: var(--color-white);          /* reference body */
  color: var(--color-brand-black);               /* reference body */
  font-family: var(--font-sans);                 /* reference body */
  font-size: 16px;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;           /* reference body */
  -moz-osx-font-smoothing: grayscale;            /* reference body */
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.02em;
  margin: 0;
}
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

/* Language-specific leading so CJK doesn't look cramped */
html[lang="zh-Hant"] body,
html[lang="zh-Hans"] body { line-height: 1.8; }
html[lang="zh-Hant"] h1, html[lang="zh-Hant"] h2, html[lang="zh-Hant"] h3,
html[lang="zh-Hans"] h1, html[lang="zh-Hans"] h2, html[lang="zh-Hans"] h3 {
  line-height: 1.16;
  letter-spacing: 0;
}

::selection { background: var(--color-black); color: var(--color-white); }

/* ---------- Accessibility helpers ---------- */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  z-index: 200;
  background: var(--color-black);
  color: #fff;
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  text-decoration: none;
  font-size: 14px;
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 14px; }
:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- Layout ---------- */
.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ============================================================
   NAVIGATION  (brand · black "Menu" pill · grey link pill ·
   language switcher · dark store pill) — geometry measured off
   the reference site: transparent fixed layer, p-8 gutters,
   46px black pill with a 36px white circle, 44px grey pill.
   ============================================================ */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  padding: 32px var(--gutter) 0;
  background: transparent;
  pointer-events: none;
  transition: opacity 0.3s var(--ease);
}
.nav__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* --- row 1: full logo lockup (left) — Menu pill (true centre) — store
   badge (right). A 3-column grid keeps the Menu pill optically centred
   however wide the logo or the badge grow. --- */
.nav__row { display: flex; align-items: center; pointer-events: auto; }
.nav__row--top {
  /* Reference nav (measured 390x844): the logo and the Menu pill read as ONE
     centred cluster — logo x58-213, pill x225-332, group centre 195 = viewport
     centre. So the row is a centred flex, logo immediately left of the pill,
     12px apart, and the (now removed) store badge slot is skipped entirely. */
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
}
.nav__row--top .nav__end { display: none; }
.nav__center { display: flex; justify-content: center; }
.nav__end { display: flex; align-items: center; justify-content: flex-end; }

/* --- row 2: section links (left, wide screens) + language switcher, which
   the client asked to be CENTRED. A 3-column grid with equal 1fr side tracks
   puts the language pill in the exact horizontal middle of the header at every
   viewport; the section links stay pinned to the left column and vanish
   (display:none) below 980px without moving the pill off-centre. --- */
.nav__row--bottom {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
}
.nav__row--bottom .nav-links { grid-column: 1; justify-self: start; }
.nav__row--bottom .lang { grid-column: 2; justify-self: center; }

.brand { display: inline-flex; align-items: center; text-decoration: none; flex: 0 0 auto; }
/* Full lockup — mark AND wordmark — as a single self-hosted image, so the
   complete logo is always shown and never degrades to the mark alone. */
.brand__lockup {
  display: block;
  height: 58px;
  width: auto;
  filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8));
}
.brand__word {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 18px;
  letter-spacing: -0.025em;
  white-space: nowrap;
}
.brand__sub {
  display: block;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 10px;
  letter-spacing: 0.02em;
  color: var(--color-brand-text-muted);
  margin-top: 1px;
}

.nav-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 4px 20px 4px 4px;
  background: var(--color-black);
  border: 1px solid var(--line-faint);
  border-radius: var(--radius-pill);
  color: #fff;
  transition: background 0.25s var(--ease);
}
.nav-pill:hover { background: var(--color-zinc-800); }
.nav-plus {
  flex: 0 0 auto;
  width: 36px; height: 36px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: var(--color-black);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.nav-plus svg { transition: transform 0.4s var(--ease); }
.nav-plus[aria-expanded="true"] svg { transform: rotate(135deg); }
.nav-pill__label { font-size: 11.5px; font-weight: 500; padding-right: 2px; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 22px;
  min-height: 44px;
  padding: 0 24px;
  background: var(--soft);
  border: 1px solid var(--line-faint);
  border-radius: var(--radius-pill);
}
.nav-link {
  text-decoration: none;
  font-size: 11.5px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.6);
  white-space: nowrap;
  transition: color 0.25s var(--ease);
}
.nav-link:hover { color: var(--color-black); }

.lang {
  display: flex;
  align-items: center;
  gap: 2px;
  border: 1px solid var(--line-faint);
  border-radius: var(--radius-pill);
  padding: 4px;
  background: #fff;
}
.lang__link {
  display: inline-block;
  padding: 6px 10px;
  border-radius: var(--radius-pill);
  font-size: 11.5px;
  font-weight: 500;
  text-decoration: none;
  color: var(--color-brand-text-muted);
  white-space: nowrap;
  transition: background 0.25s var(--ease), color 0.25s var(--ease);
}
.lang__link:hover { background: var(--soft); color: var(--color-black); }
.lang__link[aria-current="page"] { background: var(--color-black); color: #fff; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 20px 0 6px;
  border-radius: var(--radius-pill);
  background: var(--color-black);
  color: #fff;
  text-decoration: none;
  flex: 0 0 auto;
  font-size: 11.5px;
  font-weight: 500;
  transition: background 0.25s var(--ease);
}
.badge__dot {
  flex: 0 0 auto;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: #fff;
  color: var(--color-black);
  display: grid;
  place-items: center;
}
.badge__text { white-space: nowrap; }
.badge:hover { background: var(--teal-ink); }

@media (max-width: 1180px) { .nav-links { gap: 16px; padding: 0 18px; } }
@media (max-width: 980px) { .nav-links { display: none; } }
@media (max-width: 720px) {
  .nav { padding: 20px var(--gutter) 0; }
  .brand__lockup { height: 48px; }
  .badge__text { display: none; }
  .badge { padding: 0 6px; }
}
@media (max-width: 460px) {
  .nav__row--top { gap: 8px; }
  .nav__row--bottom { gap: 8px; }
  .brand__lockup { height: 42px; }
  /* The Menu pill keeps its label at every size — the client asked to still
     see a "Menu" affordance, centred, not an unlabelled circle. */
  .nav-pill { padding: 4px 14px 4px 4px; gap: 8px; min-height: 44px; }
  .nav-plus { width: 34px; height: 34px; }
  .lang { padding: 3px; }
  .lang__link { padding: 5px 8px; font-size: 11px; }
}

/* Overlay menu opened by "+" */
.nav-menu {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(255, 255, 255, 0.98);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  padding: calc(80px + var(--gutter)) var(--gutter) var(--gutter);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s var(--ease), visibility 0.35s var(--ease);
}
.nav-menu.is-open { opacity: 1; visibility: visible; }
.nav-menu__list { width: 100%; max-width: var(--maxw); margin: 0 auto; }
.nav-menu__item { border-top: 1px solid var(--line); }
.nav-menu__item:last-child { border-bottom: 1px solid var(--line); }
.nav-menu__link {
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding: clamp(14px, 3vw, 24px) 0;
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.6rem, 6vw, 3rem);
  letter-spacing: -0.02em;
  transition: color 0.25s var(--ease), padding-left 0.3s var(--ease);
}
.nav-menu__link:hover { color: var(--teal); padding-left: 10px; }
.nav-menu__num {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--color-brand-text-muted);
  letter-spacing: 0.06em;
}
html[lang="zh-Hant"] .nav-menu__link,
html[lang="zh-Hans"] .nav-menu__link { letter-spacing: 0; }

/* ============================================================
   HERO  —  full-viewport motion hero, cloned from the reference:
   fixed background colour-field video, centred two-tone headline,
   a fixed hands overlay (human + robotic hand, luma-matte keyed
   into a canvas in script.js), a fixed 220px bottom gradient and
   an editorial foot row with pills.
   Reference hero: "relative flex h-screen w-full flex-col
   justify-between overflow-hidden".
   ============================================================ */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: #fff;
}

/* --- layer 0: fixed background colour-field video --- */
.hero__bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}
.hero__bg-poster,
.hero__bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- layer 30: centred headline --- */
.hero__center {
  position: relative;
  z-index: 30;
  display: flex;
  flex: 1;
  min-height: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
}
.hero__center-inner {
  margin-top: 6rem;
  width: 100%;
  max-width: var(--maxw);
  padding: 0 16px;
  text-align: center;
  transform: translateY(2.5rem);
}
.hero__title,
.hero__tagline {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 0.9;
  letter-spacing: -0.025em;
  font-size: 7.5vw;
  color: var(--color-black);
}
.hero__tagline .is-muted { color: rgba(0, 0, 0, 0.25); font-weight: 300; margin-right: 6px; }
@media (min-width: 768px) {
  .hero__center { padding: 0 48px; }
  .hero__center-inner { margin-top: 0; transform: translateY(3.5rem); }
  .hero__title, .hero__tagline { font-size: 5.8vw; }
  .hero__tagline { margin-top: 6px; }
  .hero__tagline .is-muted { margin-right: 8px; }
}
@media (min-width: 1024px) {
  .hero__title, .hero__tagline { font-size: 4.6vw; }
}
html[lang="zh-Hant"] .hero__title,
html[lang="zh-Hans"] .hero__title { letter-spacing: 0; }
html[lang="zh-Hant"] .hero__tagline,
html[lang="zh-Hans"] .hero__tagline { letter-spacing: 0; line-height: 1.1; }

/* --- layer 30: editorial foot row (eyebrow + line | rule | pills) --- */
.hero__foot {
  position: relative;
  z-index: 30;
  width: 100%;
  flex-shrink: 0;
  padding: 40px 32px;
}
.hero__foot-inner {
  margin: 0 auto;
  display: flex;
  max-width: var(--maxw);
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;
}
.hero__col { max-width: 300px; }
.hero__eyebrow {
  margin-bottom: 8px;
  font-size: 11.5px;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.5);
}
.hero__lede {
  font-size: 19px;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: var(--color-black);
}
.hero__rule { display: none; height: 64px; width: 1px; background: rgba(0, 0, 0, 0.08); }
.tags { display: flex; flex-wrap: wrap; gap: 10px; }
.tag {
  display: inline-block;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(0, 0, 0, 0.15);
  background: #fff;
  padding: 14px 24px;
  font-size: 11.5px;
  font-weight: 400;
  color: var(--color-black);
  white-space: nowrap;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease), color 0.3s var(--ease);
}
.tag:hover { border-color: var(--color-black); background: var(--color-black); color: #fff; }
@media (min-width: 768px) {
  .hero__foot { padding: 56px 64px; }
  .hero__foot-inner { flex-direction: row; align-items: flex-end; }
  .hero__col { max-width: 340px; }
  .hero__lede { font-size: 21px; }
}
@media (min-width: 1024px) { .hero__rule { display: block; } }

/* --- layer 60: pinned hands overlay ---
   Composition follows the reference's COMPLETE-HEADLINE state (its mobile
   frame, which is the client's target): the hands sit in their own band
   BELOW the finished headline, centred, with white space above and below,
   and never cross the headline box.
   The source clip is 3:1 (1920x640) with the painted hands only in its
   middle/lower band; the frame is therefore clipped to a window of that
   source and anchored under the headline. Vertical values are set from the
   live reference + our own measured boxes at 1440x900, 1280x800, 1024x768
   and 390x844 (the band between the headline's bottom and the foot row). */
.hands-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  overflow: hidden;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}
/* The frame's own box IS the visible hands band. It is anchored from the
   BOTTOM (a fixed offset above the foot row) so its top edge stays below the
   COMPLETE headline at every tested size AND in all three languages — the
   Chinese headlines are taller/lower than the English one, so the band is
   sized for the tallest case. The 3:1 source inside is bottom-anchored and
   horizontally centred, so the hands keep their natural scale; `overflow:hidden`
   crops the transparent headroom of the source. */
.hands-frame {
  position: absolute;
  left: 50%;
  top: auto;
  bottom: var(--hands-bottom, calc(282px - 14.665vw));
  width: var(--hands-w, 100%);
  height: var(--hands-h, calc(100vw * 0.2933));
  margin-left: calc(var(--hands-w, 100%) / -2);
  overflow: hidden;
  transform: translateY(-50%);
  transform-origin: 50% 50%;
  will-change: transform;
}
.hands-poster,
.hands-canvas {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: var(--hands-w, 100%);
  height: auto;
  aspect-ratio: 3 / 1;
  transform: translateX(-50%);
  display: block;
}
.hands-canvas { opacity: 0; }
.hands-frame[data-ready="true"] .hands-poster { opacity: 0; }
.hands-frame[data-ready="true"] .hands-canvas { opacity: 1; }
.hands-source { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* Band geometry. The window shows the bottom 88% of the 3:1 source
   (0.2933 = 0.88 / 3), i.e. it crops the transparent top of the clip.
   base / phone (<=639px): full-width hands, band centred under the headline.
   640-1023px: slightly narrower so the band clears the headline and foot.
   >=1024px: band bottom pinned ~5px above the foot row, band top below the
   headline (headline centre ~50%+3.5rem, foot row ~187px tall). */
@media (min-width: 640px) {
  .hands-frame {
    --hands-w: min(100%, 52vh);
    --hands-h: 15.25vh;        /* 0.2933 x 52vh */
    --hands-bottom: calc(200px - 7.63vh);
  }
}
@media (min-width: 1024px) {
  .hands-frame {
    --hands-w: min(100%, calc(136vh - 540px));
    --hands-h: calc(39.89vh - 158.4px);   /* 0.2933 x (136vh - 540px) */
    --hands-bottom: calc(273.9px - 19.95vh);
  }
}
/* Below ~640px the band is full-bleed and the arms run off the viewport
   edges (as on the reference). On wider screens the band must be narrower
   than the viewport so the hands fit under the headline, so the arms are
   faded out at the band's own edges instead of being sliced off. */
@media (min-width: 640px) {
  .hands-frame {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  }
}

/* --- layer 20: fixed bottom gradient --- */
.bottom-gradient {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: 220px;
  z-index: 20;
  pointer-events: none;
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0.8) 52%, #ffffff);
}

/* ============================================================
   PANELS  —  every content section is one 100vh panel with the
   same 2x2 grid the reference uses for its "about" section:
   headline + cognition feature on row 1, bio + movement feature
   on row 2, a six-column discipline strip pinned to the bottom.
   Values below are the reference's own.
   ============================================================ */
.panel {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 28px;
  width: 100%;
  height: 100vh;
  height: 100svh;
  padding: 132px 48px 36px;
  color: #000;
  background: transparent;
  overflow: hidden;
}
.panel + .panel { border-top: 1px solid var(--line); }

.panel__grid {
  flex: 1;
  display: grid;
  grid-template: "headline cognition" 1fr "bio movement" / 1.25fr 1fr;
  gap: 24px 72px;
  min-height: 0;
}
.panel__headline { grid-area: headline; }
.panel__headline h2 {
  font-family: var(--font-display);
  font-size: 58px;
  font-weight: 500;
  line-height: 0.98;
}
.panel__headline h2 span { display: block; }
.panel__headline h2 span:last-child { color: var(--color-black); }
.panel__headline h2 span:first-child { color: rgba(0, 0, 0, 0.28); }

.panel__intro {
  max-width: 420px;
  color: var(--color-brand-text-muted);
  margin-top: 22px;
  font-size: 18px;
  line-height: 1.45;
}

.panel__feature--cognition { grid-area: cognition; }
.panel__feature--movement { grid-area: movement; }
.panel__feature { text-align: right; }
.panel__overline { color: var(--color-brand-text-muted); font-size: 13px; line-height: 1.4; }
.panel__feature h3 {
  font-family: var(--font-display);
  margin-top: 12px;
  font-size: 30px;
  font-weight: 400;
  line-height: 1.08;
}
.panel__feature h3 a { text-decoration: none; border-bottom: 1px solid var(--line-strong); }
.panel__feature h3 a:hover { color: var(--teal-ink); }
.panel__detail {
  max-width: 320px;
  color: var(--color-brand-text-muted);
  margin-top: 14px;
  margin-left: auto;
  font-size: 16px;
  line-height: 1.5;
}

.panel__bio { grid-area: bio; align-self: end; max-width: 420px; }
.panel__bio > p + p { margin-top: 14px; font-size: 16px; line-height: 1.5; }
.panel__bio a { color: var(--color-black); text-decoration: none; border-bottom: 1px solid var(--teal); }
.panel__bio a:hover { color: var(--teal-ink); }

.panel__disciplines {
  font-family: var(--font-display);
  border-top: 1px solid #00000026;
  flex-shrink: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 22px 0 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.2;
  list-style: none;
}
.panel__disciplines li:last-child { text-align: right; }

/* reference: @media (min-width:768px) and (max-height:780px),
   (min-width:768px) and (max-width:1023px) */
@media (min-width: 768px) and (max-height: 780px),
       (min-width: 768px) and (max-width: 1023px) {
  .panel { gap: 24px; padding-top: 104px; padding-bottom: 24px; }
  .panel__grid { gap: 20px 64px; }
  .panel__headline h2 { font-size: 48px; }
  .panel__intro { margin-top: 16px; font-size: 16px; }
  .panel__feature h3 { margin-top: 10px; font-size: 28px; }
  .panel__detail { margin-top: 12px; font-size: 14px; }
  .panel__bio > p + p { margin-top: 12px; font-size: 15px; }
}

/* reference: @media (max-width:767px) */
@media (max-width: 767px) {
  .panel { gap: 24px; padding: 148px 24px 24px; }
  .panel__grid {
    grid-template-rows: auto auto 1fr;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas: "headline headline" "cognition movement" "bio bio";
    gap: 24px 20px;
  }
  .panel__headline h2 { font-size: 38px; }
  .panel__intro { max-width: 360px; margin-top: 16px; font-size: 16px; }
  .panel__feature, .panel__disciplines li:last-child { text-align: left; }
  .panel__overline { font-size: 12px; }
  .panel__feature h3 { margin-top: 12px; font-size: 22px; }
  .panel__detail { margin-top: 12px; font-size: 13px; line-height: 1.4; }
  .panel__bio > p + p { margin-top: 10px; font-size: 14px; line-height: 1.45; }
  .panel__disciplines {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px 16px;
    padding-top: 16px;
    font-size: 14px;
  }
}

/* reference: @media (max-width:767px) and (max-height:740px) */
@media (max-width: 767px) and (max-height: 740px) {
  .panel { gap: 16px; padding-top: 136px; padding-bottom: 20px; }
  .panel__grid { gap: 16px; }
  .panel__headline h2 { font-size: 36px; }
  .panel__intro { margin-top: 12px; font-size: 14px; }
  .panel__feature h3 { margin-top: 8px; font-size: 22px; }
  .panel__detail { margin-top: 8px; font-size: 12px; }
  .panel__bio > p + p { margin-top: 8px; font-size: 13px; }
  .panel__disciplines { gap: 8px 12px; padding-top: 12px; font-size: 12px; }
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  border-top: 1px solid var(--line);
  padding: clamp(48px, 6vw, 72px) 0 40px;
  /* Same reason as .facts: the motion-hero decorative layers are position:fixed
     and bleed past the panels, so the footer must sit above them (client reported
     the footer text being painted over). */
  position: relative;
  z-index: 30;
  background: var(--color-white);
}
.footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 64px);
  margin-bottom: clamp(40px, 6vw, 64px);
}
@media (max-width: 780px) {
  .footer__top { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}
.footer__brand { display: flex; align-items: center; gap: 12px; }
.footer__brand img { width: 40px; height: 40px; border-radius: 10px; }
.footer__tag { margin-top: 16px; font-size: 14px; color: var(--color-brand-text-muted); max-width: 34ch; }
.footer h4 {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-brand-text-muted);
  margin-bottom: 16px;
}
.footer ul { display: grid; gap: 10px; }
.footer a { text-decoration: none; font-size: 14.5px; }
.footer a:hover { color: var(--teal-ink); }
.footer__bottom {
  border-top: 1px solid var(--line);
  padding-top: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  justify-content: space-between;
  font-size: 13px;
  color: var(--color-brand-text-muted);
}
.footer__bottom p { font-size: 13px; }

/* ============================================================
   COMPANY FACTS
   GEO layer: plain declarative sentences, one fact per line, that
   AI answer engines can quote verbatim. Deliberately quiet — it
   reads as a footnote, not as new marketing.
   ============================================================ */
.facts {
  border-top: 1px solid var(--line);
  padding: clamp(40px, 5vw, 64px) 0;
  /* The motion-hero panel stack above uses z-index 10 (panels) and 20
     (decorative .hands-overlay / .bottom-gradient layers) and those
     overlays bleed past the last panel's box — so this block has to sit
     above them or its first lines get painted over. */
  position: relative;
  z-index: 30;
  background: var(--color-white);
}
.facts__title {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-brand-text-muted);
  margin-bottom: 18px;
}
.facts__lede {
  font-size: clamp(17px, 1.6vw, 21px);
  line-height: 1.5;
  max-width: 68ch;
  margin-bottom: 22px;
}
.facts__list {
  display: grid;
  gap: 10px;
  max-width: 80ch;
  font-size: 15px;
  line-height: 1.55;
  color: var(--color-brand-text-muted);
}
.facts__list li { position: relative; padding-left: 18px; }
.facts__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--teal);
}

/* ============================================================
   SCROLL REVEAL  (subtle; disabled for reduced-motion)
   ============================================================ */
[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.75s var(--ease), transform 0.75s var(--ease);
  will-change: opacity, transform;
}
[data-reveal].is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  /* No autoplay: the hands poster stays visible, the canvas is never revealed. */
  .hands-frame { transform: translateY(-50%) !important; }
}