/* ──────────────────────────────────────────
   Fonts
   ────────────────────────────────────────── */

@font-face {
  font-family: 'Fraunces';
  src: url('../fonts/[BAŞLIK] Fraunces/Fraunces/Fraunces-VariableFont_SOFT,WONK,opsz,wght.ttf') format('truetype');
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: 'Fraunces';
  src: url('../fonts/[BAŞLIK] Fraunces/Fraunces/Fraunces-Italic-VariableFont_SOFT,WONK,opsz,wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Stack Sans Text';
  src: url('../fonts/StackSansText-VariableFont_wght.ttf') format('truetype');
  font-weight: 200 700;
  font-display: swap;
}

@font-face {
  font-family: 'Stack Sans Headline';
  src: url('../fonts/[METİN] Stack Sans Headline/Stack_Sans_Headline/StackSansHeadline-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: 'Bomstad Display';
  src: url('../fonts/[LOGO] Bomstad Display/WOFF & WOFF2/BomstadDisplay-Regular.woff2') format('woff2'),
       url('../fonts/[LOGO] Bomstad Display/WOFF & WOFF2/BomstadDisplay-Regular.woff') format('woff');
  font-weight: 400;
  font-display: swap;
}

/* ──────────────────────────────────────────
   Tokens
   ────────────────────────────────────────── */

:root {
  --color-bg: #050a04;
  --color-surface: #061508;
  --color-text: #f0f0ec;
  --color-text-muted: rgba(240, 240, 236, 0.65);
  --color-accent: #b4e550;
  --color-accent-hover: #c8f06a;
  --color-warn: #f0db4d;
  --color-error: #e07070;

  --font-heading: 'Fraunces', 'Georgia', serif;
  --font-headline: 'Stack Sans Headline', 'Helvetica Neue', sans-serif;
  --font-body: 'Stack Sans Text', 'Helvetica Neue', sans-serif;
  --font-logo: 'Bomstad Display', 'Georgia', serif;

  --text-hero: clamp(3rem, 1.5rem + 5vw, 6rem);
  --text-subtitle: clamp(0.875rem, 0.8rem + 0.3vw, 1.125rem);

  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);

  --focus-ring: 2px solid var(--color-accent);
  --focus-ring-offset: 3px;
}

/* ──────────────────────────────────────────
   Accessibility primitives
   ────────────────────────────────────────── */

.skip-link {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translate(-50%, -120%);
  padding: 0.85rem 1.4rem;
  background: var(--color-accent);
  color: var(--color-surface);
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  border-radius: 0 0 12px 12px;
  text-decoration: none;
  z-index: 10000;
  transition: transform 0.18s var(--ease-out-expo);
}

.skip-link:focus,
.skip-link:focus-visible {
  transform: translate(-50%, 0);
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

:focus { outline: none; }

:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
  border-radius: 4px;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ──────────────────────────────────────────
   Reset
   ────────────────────────────────────────── */

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* legacy Edge */
  background: var(--color-surface);
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none; /* Chromium / Safari */
}

body {
  scrollbar-width: none;
}

body {
  background: transparent;
  color: var(--color-text);
  font-family: var(--font-body);
  overflow-x: hidden;
}

/* ──────────────────────────────────────────
   Scroll Container
   ────────────────────────────────────────── */

.scroll-container {
  height: 300vh;
  position: relative;
}

/* ──────────────────────────────────────────
   Hero
   ────────────────────────────────────────── */

.hero {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  min-height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.hero__content {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 52rem;
  padding: 0 2rem;
}

.hero__heading {
  font-family: var(--font-heading);
  font-size: var(--text-hero);
  font-weight: 300;
  font-style: italic;
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--color-text);
  font-variation-settings: 'opsz' 72, 'WONK' 1, 'SOFT' 0;
}

.hero__heading em {
  font-style: italic;
  color: var(--color-accent);
}

.hero__subtitle {
  margin-top: 1.75rem;
  font-family: var(--font-body);
  font-size: var(--text-subtitle);
  font-weight: 350;
  line-height: 1.65;
  color: var(--color-text-muted);
  letter-spacing: 0.01em;
}

/* ──────────────────────────────────────────
   Scroll Hint
   ────────────────────────────────────────── */

.hero__scroll-hint {
  margin-top: 2.5rem;
  display: flex;
  justify-content: center;
}

.hero__scroll-dot {
  animation: scroll-bounce 2s ease-in-out infinite;
}

@keyframes scroll-bounce {
  0%, 100% { cy: 10; opacity: 0.5; }
  50%      { cy: 26; opacity: 0.15; }
}

/* ──────────────────────────────────────────
   Hero Background — WebGL Canvas
   ────────────────────────────────────────── */

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
  display: block;
}

.hero__stars {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  pointer-events: none;
  display: block;
}

.hero__logo {
  position: absolute;
  z-index: 1;
  height: auto;
  opacity: 0;
  pointer-events: none;
}

/* ──────────────────────────────────────────
   Story Section — scroll-driven narrative
   ────────────────────────────────────────── */

.story {
  position: relative;
  background: var(--color-surface);
  z-index: 2;
  height: 950vh;
  margin-top: -70vh;
}

/* Mobile-only bridge paragraph between the connect and map mottos */
.story__bridge {
  display: none;
}

/* ──────────────────────────────────────────
   People — as the globe scene glides up and out, this section rises from below,
   carrying the big "The people behind labra" heading up to centre with it.
   z-index below the story so the globe slides up OVER it.
   ────────────────────────────────────────── */

.people {
  position: relative;
  z-index: 1;
  height: 70vh;
  background: var(--color-surface);
}

.people__heading {
  font-family: var(--font-heading);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(2.5rem, 7vw, 6rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  text-align: center;
  text-wrap: balance;
  color: var(--color-text);
  padding: 0 1rem;
  max-width: 92vw;
}

.people__heading em { font-style: italic; color: var(--color-accent); }

.story__globe-wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(340px, 46vw, 640px);
  height: clamp(340px, 46vw, 640px);
  pointer-events: none;
  will-change: transform;
}

.story__globe {
  width: 100%;
  height: 100%;
  display: block;
  /* pointer-events/touch-action toggled by globe.js only while interactive,
     so the (large, possibly invisible) canvas never blocks page scrolling. */
  pointer-events: none;
  touch-action: auto;
  cursor: grab;
}

.story__globe:active {
  cursor: grabbing;
}

.story__globe-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.story__globe-labels {
  position: absolute;
  inset: 0;
  overflow: visible;
  pointer-events: none;
}

.story__lab-label {
  position: absolute;
  top: 0;
  left: 0;
  font-family: var(--font-body);
  font-size: clamp(0.58rem, 0.72vw, 0.78rem);
  font-weight: 500;
  color: var(--color-text);
  white-space: nowrap;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.9);
  will-change: transform, opacity;
}

/* ── Regional search pill ── */
.story__pill {
  position: absolute;
  top: clamp(7vh, 11vh, 14vh);
  left: clamp(2rem, 6vw, 7rem);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 1.5rem;
  border: 1px solid rgba(180, 229, 80, 0.4);
  border-radius: 999px;
  background: rgba(6, 21, 8, 0.9);
  box-shadow: 0 0 40px -12px rgba(180, 229, 80, 0.5);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
}

.story__pill svg { color: var(--color-accent); flex-shrink: 0; }

.story__pill span {
  font-family: var(--font-headline);
  font-size: clamp(1rem, 1.4vw, 1.4rem);
  font-weight: 600;
  color: var(--color-text);
  letter-spacing: 0.01em;
}

/* ── Section motto (top-right, during the regional tour) ── */
.story__motto {
  position: absolute;
  top: 11vh;
  right: clamp(2rem, 6vw, 7rem);
  text-align: right;
  font-family: var(--font-heading);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(2.8rem, 5.6vw, 5.8rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--color-text);
  pointer-events: none;
}

.story__motto-line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.1em;
}

.story__motto-inner {
  display: inline-block;
  will-change: transform;
}

.story__motto em {
  font-style: italic;
  color: var(--color-accent);
}

/* Connection-scene motto sits bottom-right — clear of the top-left buttons. */
.story__motto--connect {
  top: auto;
  bottom: clamp(6vh, 10vh, 13vh);
}

/* Closing motto sits dead-centre — over the globe's mid-Atlantic core, where the
   labels fan outward and leave the centre clear, with the globe turning behind it. */
.story__motto--map {
  top: 50%;
  left: 50%;
  right: auto;
  transform: translate(-50%, -50%);
  text-align: center;
  width: max-content;
  max-width: 92vw;
}

/* Scrolly-act wrapper: transparent on desktop (display:contents → generates no
   box), so the desktop sticky-stage layout is byte-for-byte unchanged. It only
   becomes a pinned, scroll-driven scene on mobile. */
.story__act,
.story__act-pin { display: contents; }
.story__act-white { display: none; }

/* ── Connection bar (search + connecting status) ── */
.story__cbar {
  position: absolute;
  top: clamp(7vh, 11vh, 14vh);
  left: clamp(2rem, 6vw, 7rem);
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex-wrap: wrap;
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
}

.story__cpill {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 1.4rem;
  border: 1px solid rgba(180, 229, 80, 0.4);
  border-radius: 999px;
  background: rgba(6, 21, 8, 0.9);
  box-shadow: 0 0 40px -12px rgba(180, 229, 80, 0.5);
  white-space: nowrap;
}

.story__cpill svg { color: var(--color-accent); flex-shrink: 0; }

.story__cpill .label {
  font-family: var(--font-headline);
  font-size: clamp(0.95rem, 1.3vw, 1.3rem);
  font-weight: 600;
  color: var(--color-text);
}

.story__cpill--connecting {
  border-color: rgba(240, 219, 77, 0.55);
  box-shadow: 0 0 40px -12px rgba(240, 219, 77, 0.6);
}

.story__cpill--connecting .label { color: #f0db4d; }

.story__connect-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #f0db4d;
  box-shadow: 0 0 9px 2px rgba(240, 219, 77, 0.8);
  animation: connpulse 1.2s ease-in-out infinite;
}

@keyframes connpulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.35; transform: scale(0.7); }
}

/* ── Minimal skeleton cards (schema preview — fields, no real data yet) ── */
.story__skel {
  position: absolute;
  width: clamp(190px, 17vw, 248px);
  padding: 1rem 1.2rem;
  border: 1px solid rgba(240, 240, 236, 0.14);
  border-radius: 12px;
  background: rgba(6, 21, 8, 0.86);
  box-shadow: 0 20px 50px -24px rgba(0, 0, 0, 0.7);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
}

.story__skel-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
}

.story__skel-row span {
  font-family: var(--font-body);
  font-size: clamp(0.58rem, 0.7vw, 0.72rem);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.story__skel-row i {
  display: block;
  flex: 1;
  max-width: 42%;
  height: 0.5rem;
  border-radius: 3px;
  background: rgba(180, 229, 80, 0.2);
}

.story__intro-text {
  position: absolute;
  bottom: clamp(3rem, 5vw, 6rem);
  left: clamp(2rem, 5vw, 6rem);
  right: 30%;
  will-change: transform;
}

.story__intro-text p {
  font-family: var(--font-body);
  font-size: clamp(1.25rem, 1rem + 2vw, 2.5rem);
  font-weight: 500;
  line-height: 1.35;
  color: var(--color-text);
  max-width: 100%;
  text-wrap: pretty;
}

.story__intro-text strong {
  font-weight: 700;
}

.story__intro-text strong.acc {
  color: var(--color-accent);
}

.story__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ──────────────────────────────────────────
   Team
   ────────────────────────────────────────── */

/* ──────────────────────────────────────────
   Product — scroll-driven laptop showcase
   ────────────────────────────────────────── */

.product {
  position: relative;
  z-index: 2;
  background: var(--color-surface);
  height: 580vh;
}

.product__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 5vw;
  overflow: hidden;
  perspective: 3400px;
  perspective-origin: 68% 50%;
}

/* ── Nav menu (left side, hidden initially) ── */
.product__nav {
  position: absolute;
  left: 6vw;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  will-change: opacity, transform;
  z-index: 2;
}

.product__nav ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.product__nav-item {
  display: flex;
  flex-direction: column;
  cursor: pointer;
  overflow: hidden;
}

.product__label {
  font-family: var(--font-headline);
  font-size: clamp(2.2rem, 4vw, 4.5rem);
  font-weight: 800;
  color: var(--color-text);
  line-height: 1.3;
  letter-spacing: -0.02em;
  opacity: 0.25;
}

/* Per-feature screenshot cards are a mobile-only affordance; on desktop the
   3D panel carries the screens. display:none + loading=lazy → never fetched. */
.product__shot {
  display: none;
}

.product__item-desc {
  font-family: var(--font-body);
  font-size: clamp(0.85rem, 1vw, 1.05rem);
  font-weight: 400;
  color: var(--color-text-muted);
  line-height: 1.5;
  max-width: 34ch;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  margin: 0;
}

/* ── 3D UI stage ──
   .product__laptop  = layout slot (GSAP slides/scales it, 2D only)
   .product__tilt    = 3D pose (base tilt + pointer tilt, preserve-3d)
   .product__screen  = the panel itself (bezel, specular edge, clipping)
   glow / shadow / chips live at different translateZ depths for parallax. */
.product__laptop {
  position: relative;
  width: min(56%, 109vh);
  aspect-ratio: 1551 / 1105;
  transform-style: preserve-3d;
  z-index: 1;
}

.product__tilt {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  will-change: transform;
}

.product__glow {
  position: absolute;
  inset: -14%;
  background: radial-gradient(closest-side, rgba(180, 229, 80, 0.13), transparent 72%);
  transform: translateZ(-150px);
  pointer-events: none;
}

.product__shadow {
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: -8%;
  height: 12%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, 0.6), transparent 70%);
  filter: blur(18px);
  transform: translateZ(-70px);
  pointer-events: none;
}

.product__screen {
  position: absolute;
  inset: 0;
  margin: 0;
  border-radius: 18px;
  overflow: hidden;
  /* overflow alone is unreliable under a preserve-3d ancestor in Chrome —
     the zoomed (132%) screenshots leaked past the panel edge without this */
  clip-path: inset(0 round 18px);
  background: var(--color-surface);
  border: 1px solid rgba(240, 240, 236, 0.10);
  box-shadow:
    inset 0 1px 0 rgba(240, 240, 236, 0.09),
    0 30px 80px -24px rgba(0, 0, 0, 0.65),
    0 0 70px -28px rgba(180, 229, 80, 0.20);
  transform: translateZ(0);
}

.product__ui {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  opacity: 0;
  transition: opacity 0.45s var(--ease-out-expo);
  background: var(--color-surface);
}

.product__ui.is-front {
  opacity: 1;
}

/* Tall mockups pan vertically, wide ones horizontally — hover-driven in JS.
   Both render ~30% closer than a plain cover fit: panning carries the rest,
   so the zoom buys legibility for the UI details. */
.product__screen.is-tall .product__ui {
  object-position: center top;
  width: 132%;
  left: -16%;
}

.product__screen.is-wide .product__ui {
  object-position: right top;
  height: 132%;
  top: -16%;
}

.product__sheen {
  position: absolute;
  top: -2%;
  bottom: -2%;
  left: -50%;
  width: 200%;
  background: linear-gradient(115deg, transparent 38%, rgba(240, 240, 236, 0.05) 49%, transparent 60%);
  transform: translateX(-12%);
  will-change: transform;
  pointer-events: none;
}

.product__pan-hint {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.38rem 0.75rem;
  border-radius: 999px;
  background: rgba(5, 10, 4, 0.78);
  border: 1px solid rgba(240, 240, 236, 0.16);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  opacity: 0;
  transition: opacity 0.3s var(--ease-out-expo);
  pointer-events: none;
}

.product__pan-hint.is-visible {
  opacity: 1;
}

.product__disclaimer {
  position: absolute;
  left: 50%;
  bottom: -2.2rem;
  transform: translateX(-50%);
  font-family: var(--font-body);
  font-size: clamp(0.65rem, 0.72vw, 0.82rem);
  font-weight: 400;
  color: var(--color-text-muted);
  background: transparent;
  padding: 0.35rem 0.8rem;
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.35s var(--ease-out-expo);
  z-index: 2;
  pointer-events: none;
}

.product__disclaimer.is-visible {
  opacity: 1;
}

/* ──────────────────────────────────────────
   Team
   ────────────────────────────────────────── */

.team {
  position: relative;
  z-index: 3;
  background: var(--color-surface);
  margin-top: -60vh;
}

.team__aurora {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.team__heading-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(6rem, 14vh, 12rem) 1rem;
  z-index: 1;
}

.team__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  width: 100%;
  height: clamp(460px, 62vh, 750px);
}

.team__grid::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 35%;
  background: linear-gradient(to bottom, transparent, #061508);
  pointer-events: none;
  z-index: 3;
}

.team__member {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  background: transparent;
}

/* thin vertical separators between members */
.team__member {
  border-left: 1px solid rgba(180, 229, 80, 0.10);
}
.team__member:nth-child(2) {
  border-left: none; /* KA is first visually (order:1) */
}


.team__photo {
  position: absolute;
  left: 50%;
  bottom: -120px;
  transform: translateX(-50%);
  width: 115%; /* scale knob: image width vs cell — bigger % = bigger person */
  height: auto;
  display: block;
  filter: grayscale(0.2) brightness(0.85);
  transition: filter 0.5s var(--ease-out-expo);
}

/* Reorder: KA(2) - ES(1) - FA(3) - NS(4) */
.team__member:nth-child(1) { order: 2; } /* ES → pos 2 */
.team__member:nth-child(2) { order: 1; } /* KA → pos 1 */
.team__member:nth-child(3) { order: 3; } /* FA → pos 3 */
.team__member:nth-child(4) { order: 4; } /* NS → pos 4 */

/* Uniform 4:5 portraits — no per-member framing needed (object-fit cover). */

/* Per-member horizontal nudges (close inter-cell gaps) — DESKTOP ONLY.
   Scoped to min-width:769px so the high-specificity nth-child transforms
   don't leak past the mobile object-fit rule (mobile is fixed-square). */
@media (min-width: 769px) {
  /* Emirhan: enlarge from the top-left anchor so it grows toward bottom-right
     while the top edge stays aligned with the others. */
  .team__member:nth-child(1) .team__photo {
    transform-origin: left top;
    transform: translateX(calc(-50% + 5px)) scale(1.04);
  }
  .team__member:nth-child(2) .team__photo { transform: translateX(calc(-50% + 14px)); } /* Kübra */
}

/* overlay — hidden by default, no per-cell shadow */
.team__overlay {
  display: none;
}

/* info block — top of card, centered */
.team__info {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 1.6rem 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.2rem;
  opacity: 0;
  transform: translateY(-12px);
  transition:
    opacity 0.45s var(--ease-out-expo),
    transform 0.45s var(--ease-out-expo);
  pointer-events: none;
  z-index: 4;
}

.team__role {
  font-family: var(--font-headline);
  font-size: clamp(0.75rem, 0.95vw, 0.99rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-accent);
}

.team__name {
  font-family: var(--font-heading);
  font-size: clamp(1.33rem, 1.95vw, 2.1rem);
  font-weight: 300;
  font-style: italic;
  line-height: 1.15;
  color: var(--color-text);
}

.team__uni {
  font-family: var(--font-body);
  font-size: clamp(0.75rem, 0.88vw, 0.98rem);
  font-weight: 400;
  color: var(--color-text-muted);
  margin-top: 0.15rem;
}

.team__links {
  position: absolute;
  bottom: 6%;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 0.7rem;
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 0.45s var(--ease-out-expo),
    transform 0.45s var(--ease-out-expo);
  z-index: 4;
}

.team__member:hover .team__links {
  opacity: 1;
  transform: translateY(0);
}

.team__links a {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  transition: color 0.3s;
  pointer-events: auto;
}

.team__links a:hover {
  color: var(--color-accent);
}

/* ── Hover state: grid hover dims everyone, hovered member stays clear ── */
.team__grid:hover .team__photo {
  filter: grayscale(1) brightness(0.5) blur(4px);
}

.team__grid:hover .team__member:hover .team__photo {
  filter: grayscale(0.2) brightness(0.85) blur(0px);
}

.team__member:hover .team__info {
  opacity: 1;
  transform: translateY(0);
}

/* ──────────────────────────────────────────
   Responsive
   ────────────────────────────────────────── */

/* ──────────────────────────────────────────
   Closing — motto + waitlist
   ────────────────────────────────────────── */

.closing {
  position: relative;
  z-index: 3;
  background: var(--color-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 70vh;
  padding: 12vh 0;
  margin-top: 20vh;
  overflow: hidden;
}

/* Star-field bookend: the page opens under stars and closes under them too */
.closing__stars {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.closing__stage {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 3rem;
  padding: 4rem 2rem;
}

.closing__motto {
  font-family: var(--font-heading);
  font-size: clamp(2.5rem, 7vw, 6rem);
  font-weight: 300;
  font-style: italic;
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-wrap: balance;
  color: var(--color-text);
}

/* Mask for the line reveal (driven by story.js on desktop) */
.closing__motto-line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.08em; /* descenders of the italic g/y stay unclipped */
}

.closing__motto-inner {
  display: block;
}

.closing__motto em {
  color: var(--color-accent);
  font-style: italic;
}

.closing__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

/* ── Waitlist: single-stage inline form — quiet dark field, lime send ── */
.closing__waitlist {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
}

.closing__waitlist-form {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.35rem 0.35rem 1.35rem;
  border-radius: 999px;
  background: rgba(10, 31, 18, 0.55);
  border: 1px solid rgba(180, 229, 80, 0.28);
  transition:
    border-color 0.35s var(--ease-out-expo),
    box-shadow 0.35s var(--ease-out-expo);
}

.closing__waitlist-form:hover,
.closing__waitlist-form:focus-within {
  border-color: rgba(180, 229, 80, 0.55);
  box-shadow: 0 0 28px -10px rgba(180, 229, 80, 0.35);
}

.closing__waitlist-input {
  width: min(280px, 56vw);
  padding: 0.7rem 0;
  font-family: var(--font-body);
  font-size: 0.92rem;
  color: var(--color-text);
  background: transparent;
  border: none;
  outline: none;
}

/* The form's :focus-within glow is the focus indicator — suppress the
   global focus-ring so it doesn't draw a second sharp frame inside the pill. */
.closing__waitlist-input:focus-visible {
  outline: none;
}

.closing__waitlist-input::placeholder {
  color: var(--color-text-muted);
}

.closing__waitlist-send {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: none;
  background: var(--color-accent);
  color: #061508;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.3s, transform 0.25s var(--ease-out-expo);
}

.closing__waitlist-send:hover {
  background: var(--color-accent-hover);
  transform: scale(1.06);
}

.closing__waitlist-send:active {
  transform: scale(0.96);
}

.closing__send-check {
  display: none;
}

.closing__waitlist-form.is-done .closing__send-arrow {
  display: none;
}

.closing__waitlist-form.is-done .closing__send-check {
  display: block;
}

.closing__waitlist-msg {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 500;
  min-height: 1.2em;
  color: var(--color-text-muted);
  transition: opacity 0.25s var(--ease-out-expo);
}

.closing__waitlist-msg.is-success { color: var(--color-accent); }
.closing__waitlist-msg.is-error { color: var(--color-error); }

.closing__waitlist-hint {
  font-family: var(--font-body);
  font-size: 0.78rem;
  color: var(--color-text-muted);
  letter-spacing: 0.01em;
}

/* ── Logo ── */
.closing__logo {
  height: clamp(48px, 8vw, 80px);
  width: auto;
}

/* ──────────────────────────────────────────
   Footer
   ────────────────────────────────────────── */

.site-footer {
  background: var(--color-surface);
  padding: 2rem;
  text-align: center;
}

.footer__copy {
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

.site-footer__links {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  margin-bottom: 0.8rem;
  flex-wrap: wrap;
}

.site-footer__links a {
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color 0.2s var(--ease-out-expo);
}

.site-footer__links a:hover {
  color: var(--color-text);
}

/* ──────────────────────────────────────────
   Mobile (≤ 768 px)
   Sadeleştirilmiş mobile: scroll-driven sticky sections become natural-flow stacks,
   heavy WebGL canvases (globe + aurora) are hidden, the page reads top → bottom.
   ────────────────────────────────────────── */

@media (max-width: 768px) {

  /* ── Hero — canvases are dead on mobile (scripts bail at ≤768px); a static
     layered gradient carries the atmosphere instead. ── */
  .hero {
    position: relative;
    min-height: 100svh;
    background:
      radial-gradient(120% 70% at 50% 108%, rgba(15, 59, 10, 0.30), transparent 60%),
      radial-gradient(80% 45% at 50% 110%, rgba(180, 229, 80, 0.06), transparent 68%),
      radial-gradient(140% 90% at 50% -20%, #0a1f1a, transparent 75%),
      var(--color-bg);
  }

  /* The aurora canvas runs on mobile too (low pixel ratio); the static
     gradient beneath doubles as its loading/reduced-motion fallback. Its
     bottom edge dissolves via mask so the hero melts into the story instead
     of cutting at the section border. */
  .hero__bg {
    -webkit-mask-image: linear-gradient(180deg,
      #000 48%, rgba(0, 0, 0, 0.75) 66%, rgba(0, 0, 0, 0.38) 82%, transparent 98%);
    mask-image: linear-gradient(180deg,
      #000 48%, rgba(0, 0, 0, 0.75) 66%, rgba(0, 0, 0, 0.38) 82%, transparent 98%);
  }

  /* Star-convergence intro: with the motion layer alive the hero pins for one
     extra screen and native scroll drives the stars into the labra wordmark
     (stars.js). The story then slides up OVER the resting hero — that overlap
     is what makes the section handoff feel continuous. */
  .m-motion .scroll-container {
    height: 220svh;
  }

  .m-motion .hero {
    position: sticky;
    top: 0;
    height: 100lvh;
    min-height: 100svh;
  }

  .hero__heading {
    font-size: clamp(2.4rem, 1rem + 8.5vw, 3.4rem);
  }

  .hero__subtitle {
    margin-top: 1.25rem;
    font-size: 1rem;
    max-width: 30ch;
    margin-inline: auto;
  }

  .hero__subtitle br {
    display: none;
  }

  .hero__scroll-hint {
    margin-top: 3rem;
  }

  /* ── Scroll container collapses (no 300vh scroll-hijack) ── */
  .scroll-container {
    height: auto;
  }

  /* Touch scroll governor: mobile has no Lenis run-ahead cap, so an aggressive
     flick could momentum-scroll straight to the footer. Snap stops at each
     section so a flick advances one section at a time. `proximity` (not
     mandatory) means no fighting inside the tall pinned story scene, which
     carries no snap point of its own. */
  html { scroll-snap-type: y proximity; }
  .product,
  .team,
  .closing {
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  /* ── Story: kill the 950vh sticky stage; the scrolly becomes a guided
     narrative — intro (word reveal) → motto → globe → motto → motto. ── */
  .story {
    position: relative;
    height: auto;
    margin-top: 0;
    padding: clamp(7rem, 22vw, 11rem) 1.5rem clamp(4rem, 10vw, 6rem);
  }

  /* The story sheet's own top edge dissolves while it slides over the
     pinned hero — no hard section border anywhere in the handoff. */
  /* True overlap (like desktop): the story sheet is pulled up over the
     pinned hero, so its dissolving top always has the HERO behind it — not
     the page background — and the hero's own bottom edge stays hidden
     beneath the already-opaque part of the sheet. */
  .m-motion .story {
    margin-top: -26svh;
    -webkit-mask-image: linear-gradient(180deg,
      transparent 0, rgba(0, 0, 0, 0.3) 7svh, rgba(0, 0, 0, 0.72) 14svh, #000 22svh);
    mask-image: linear-gradient(180deg,
      transparent 0, rgba(0, 0, 0, 0.3) 7svh, rgba(0, 0, 0, 0.72) 14svh, #000 22svh);
  }

  /* Soft handoff from the hero: the dark hero tone + a faint lime breath
     bleed into the story's surface instead of cutting at the section edge. */
  .story::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 34vh;
    background:
      radial-gradient(120% 55% at 50% -10%, rgba(15, 59, 10, 0.35), transparent 70%),
      linear-gradient(180deg, var(--color-bg), transparent 75%);
    pointer-events: none;
  }

  .story__stage {
    position: relative;
    height: auto;
    flex-direction: column;
    align-items: flex-start;
    overflow: visible;
  }

  /* Search pills + connect bar say nothing without the desktop choreography;
     the draggable globe with its flowing signal web tells the story instead. */
  .story__cards,
  .story__skel,
  .story__pill,
  .story__cbar {
    display: none;
  }

  /* Generous breathing room: each beat gets its own moment; the globe sits
     fully isolated — nothing reads directly above or below it. */
  .story__intro-text     { order: 1; position: relative; inset: auto; width: 100%; }
  .story__motto--layer   { order: 2; margin-top: 14vh; }
  .story__globe-wrap     { order: 3; margin-top: 8vh; margin-bottom: 8vh; }
  .story__motto--connect { order: 4; margin-top: 0; }
  .story__bridge         { order: 5; margin-top: 2.5rem; }

  /* One heading is enough on mobile — the map line lives in the paragraph */
  .story__motto--map {
    display: none;
  }

  .story__bridge {
    display: block;
    max-width: 34ch;
    margin-inline: auto;
    text-align: center;
    font-family: var(--font-headline);
    font-weight: 700;
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--color-text-muted);
  }

  .story__bridge em {
    font-style: normal;
    color: var(--color-accent);
  }

  .story__intro-text p {
    font-size: clamp(1.75rem, 7.8vw, 2.5rem);
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -0.01em;
  }

  .story__intro-text .w.w-b {
    font-weight: 800;
  }

  .story__intro-text .w.w-acc {
    color: var(--color-accent);
  }

  /* Focus-band reveal (mobile-motion.js): blurred outside the mid-viewport
     band, sharp inside it. Opacity/blur are written continuously per frame —
     no transition, the scroll itself IS the easing. */
  .story__intro-text .w {
    display: inline-block;
    opacity: 0.18;
    filter: blur(9px);
    will-change: opacity, filter;
  }

  /* Draggable globe — static block in the narrative flow */
  .story__globe-wrap {
    position: relative;
    inset: auto;
    transform: none;
    width: 74%;
    height: auto;          /* defeat the leaked desktop fixed height (→ egg) */
    align-self: center;
    aspect-ratio: 1 / 1;
    opacity: 1;
    touch-action: pan-y;
  }

  .story__globe,
  .story__globe-lines {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .story__globe-labels {
    position: absolute;
    inset: 0;
    pointer-events: none;
  }

  .story__lab-label {
    font-size: 0.56rem;
    white-space: nowrap;   /* names are short now — never truncate */
  }

  /* Mottos: centered editorial display statements (Fraunces italic, inherited),
     each introduced by a short lime beat-rule. Replaces the cramped left-rule
     blocks that read as bolted-on next to the globe. */
  .story__motto {
    position: static;
    transform: none;
    text-align: center;
    align-self: center;
    width: 100%;
    max-width: 15ch;
    font-size: clamp(2.1rem, 9vw, 3rem);
    line-height: 1.14;
  }

  .story__motto::before {
    content: '';
    display: block;
    width: 34px;
    height: 2px;
    margin: 0 auto 1.35rem;
    background: var(--color-accent);
    opacity: 0.6;
    border-radius: 2px;
  }

  /* ── Story scrolly-act: a pinned scene whose timeline is driven by scroll
     (mobile-motion.js → initStoryScene). Without JS (.m-motion absent) it stays
     a plain flex column so the beats just stack and read normally. ── */
  .story__act {
    display: block;
    position: relative;
    order: 2;
    width: 100%;
  }
  .story__act-pin {
    display: flex;
    flex-direction: column;
  }
  .story__act-white {
    display: block;
    position: absolute;
    inset: 0;
    background: #f4f5ef;
    opacity: 0;
    pointer-events: none;
    z-index: 0;
  }

  /* JS alive: pin the scene full-bleed; the beats become scroll-driven layers. */
  .m-motion .story__act {
    width: 100vw;
    margin-left: -1.5rem;     /* cancel .story side padding → full-bleed white */
    height: 400svh;           /* scroll track: 4 beats (white-globe-white-globe) */
  }
  .m-motion .story__act-pin {
    position: sticky;
    top: 0;
    width: 100%;
    height: 100svh;
    display: block;
    overflow: hidden;
    /* Match the story surface (not --color-bg) so the dark phase of the scene
       blends seamlessly into the section instead of a hard green→black edge. */
    background: var(--color-surface);
    z-index: 1;
  }

  /* Text beats: LEFT-aligned to the intro paragraph's edge (1.5rem) — sidesteps
     the centring struggle entirely and reads as one consistent voice. Vertically
     centred via a full-height flex column. */
  .m-motion .story__act .story__motto,
  .m-motion .story__act .story__bridge {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 1.5rem;
    right: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    margin: 0;
    text-align: left;
    opacity: 0;
    will-change: opacity;
    z-index: 2;
  }
  .m-motion .story__act .story__motto { color: #0b1206; }
  .m-motion .story__act .story__motto::before { display: none; }
  .m-motion .story__act .story__motto em { color: #3f7d12; }
  /* The bridge paragraph is dropped from the mobile scene — it echoed the intro
     paragraph; the product UI now follows the connection globe directly. */
  .m-motion .story__act .story__bridge { display: none; }
  .m-motion .story__act .story__bridge { color: #36412f; }
  /* One flex child holding all the inline text, so <em>one map.</em> stays in
     the paragraph flow instead of being blockified onto its own line. */
  .m-motion .story__act .story__bridge > span { display: block; width: 100%; }
  .m-motion .story__act .story__bridge em { color: #3f7d12; }

  .m-motion .story__act .story__globe-wrap {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 56vw;
    height: auto;          /* defeat the desktop fixed height that leaks into
                              mobile (it forced a non-square box → egg globe) */
    aspect-ratio: 1 / 1;
    margin: 0;
    opacity: 0;
    transform: translate(-50%, -50%);
    will-change: opacity, transform;
    z-index: 2;
  }

  /* People heading sits inside the team section on mobile (no overlap mechanics) */
  .people {
    display: none;
  }

  /* ── Product: kill the 580vh sticky stage; each feature gets its own
     screenshot card in a vertical flow. The 3D panel is desktop-only. ── */
  .product {
    height: auto;
    padding: clamp(4rem, 10vw, 6rem) 1.25rem;
  }

  .product__stage {
    position: relative;
    height: auto;
    flex-direction: column;
    overflow: visible;
    padding-right: 0;
    perspective: none;
  }

  /* The laptop shell stays (it carries the disclaimer); only the 3D scene goes. */
  .product__laptop {
    width: 100%;
    aspect-ratio: auto;
    order: 2;
  }

  .product__tilt {
    display: none;
  }

  .product__nav {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    opacity: 1;
    max-width: 100%;
    padding: 0;
    width: 100%;
  }

  .product__nav ul {
    gap: 2.5rem;
  }

  /* On mobile every nav item shows its description (no scroll-driven reveal) */
  .product__nav-item {
    overflow: visible;
  }

  .product__nav-item .product__label {
    font-size: clamp(1.5rem, 6.5vw, 2rem);
    opacity: 1;
  }

  .product__nav-item .product__item-desc {
    max-height: none;
    opacity: 1;
    margin-top: 0.4rem;
    font-size: 0.9rem;
    max-width: 100%;
    line-height: 1.5;
  }

  .product__shot {
    display: block;
    margin: 1rem 0 0;
    border-radius: 14px;
    overflow: hidden;
    aspect-ratio: 1551 / 1105;
    border: 1px solid rgba(240, 240, 236, 0.12);
    background: var(--color-surface);
    box-shadow: 0 14px 40px -18px rgba(0, 0, 0, 0.6);
  }

  .product__shot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
  }

  /* ── Product accordion (only when mobile-motion.js is alive; without JS the
     rules above keep everything expanded and readable) ── */
  .m-motion .product__nav ul {
    gap: 0;
  }

  .m-motion .product__nav-item {
    position: relative;
    padding: 1.05rem 2.4rem 1.05rem 1.1rem;
    border-top: 1px solid rgba(180, 229, 80, 0.14);
    cursor: pointer;
    border-radius: 0;
    transition:
      background-color 0.45s var(--ease-out-expo),
      border-radius 0.45s var(--ease-out-expo);
  }

  .m-motion .product__nav-item:first-child {
    border-top: none;
  }

  .m-motion .product__nav-item::after {
    content: '+';
    position: absolute;
    top: 0.95rem;
    right: 1rem;
    font-family: var(--font-headline);
    font-size: 1.5rem;
    font-weight: 300;
    color: rgba(240, 240, 236, 0.55);
    transition: transform 0.35s var(--ease-out-expo), color 0.35s;
  }

  /* Open drawer inverts: off-white surface, dark ink — the contrast moment */
  .m-motion .product__nav-item.is-open {
    background: var(--color-text);
    padding: 1.05rem 2.4rem 1.35rem 1.1rem;
    border-top-color: transparent;
    border-radius: 18px;
  }

  .m-motion .product__nav-item.is-open::after {
    transform: rotate(45deg);
    color: rgba(6, 21, 8, 0.6);
  }

  .m-motion .product__nav-item .product__label {
    display: block;
    transition: color 0.4s var(--ease-out-expo);
  }

  .m-motion .product__nav-item.is-open .product__label {
    color: #061508;
  }

  .m-motion .product__nav-item .product__item-desc {
    max-height: 0;
    opacity: 0;
    margin: 0;
    overflow: hidden;
    transition:
      max-height 0.5s var(--ease-out-expo),
      opacity 0.4s var(--ease-out-expo),
      margin 0.4s var(--ease-out-expo);
  }

  .m-motion .product__nav-item.is-open .product__item-desc {
    max-height: 12rem;
    opacity: 1;
    margin-top: 0.45rem;
    color: rgba(6, 21, 8, 0.78);
  }

  .m-motion .product__shot {
    max-height: 0;
    opacity: 0;
    margin: 0;
    border-width: 0;
    transition:
      max-height 0.55s var(--ease-out-expo),
      opacity 0.45s var(--ease-out-expo),
      margin 0.45s var(--ease-out-expo);
  }

  .m-motion .product__nav-item.is-open .product__shot {
    max-height: 80vh;
    opacity: 1;
    margin-top: 1rem;
    border-width: 1px;
  }

  .product__disclaimer {
    position: static;
    display: block;            /* static reverts the span to inline → center
                                  wouldn't apply; block + auto margins fix it */
    transform: none;
    white-space: normal;
    text-align: center;
    max-width: 32ch;
    margin: 1.75rem auto 0;
    opacity: 1;
    font-size: 0.65rem;
    padding: 0;
  }

  /* ── Team: tap accordion — photo thumb left, details + contact expand. ── */
  .team {
    margin-top: 0;
    padding: clamp(2rem, 6vw, 4rem) 0 3rem;
  }

  .team__aurora {
    display: none;
  }

  .team__heading-wrap {
    padding: 2.5rem 1.25rem 1.6rem;
  }

  .people__heading {
    font-size: clamp(2rem, 7vw, 3.5rem);
  }

  /* Frameless contiguous strips — hairline separators only, no cards.
     A tapped row morphs into a white ID card (mirrors the product drawer). */
  .team__grid {
    display: flex;
    flex-direction: column;
    gap: 0;
    height: auto;
    padding: 0 1.25rem;
  }

  .team__grid::after {
    display: none;
  }

  /* Rows follow DOM order: Emirhan → Kübra → Fatih A. → Nefise.
     nth-child matches the desktop reorder rules' specificity so this wins. */
  .team__member:nth-child(-n+4) {
    order: 0;
  }

  .team__member {
    position: relative;
    display: grid;
    grid-template-columns: 56px 1fr;
    column-gap: 0.95rem;
    align-items: center;
    padding: 0.95rem 2.2rem 0.95rem 0.85rem;
    min-height: 0;
    overflow: hidden;
    border: none !important;
    border-top: 1px solid rgba(180, 229, 80, 0.14) !important;
    border-radius: 0;
    background: transparent;
    cursor: pointer;
    transition:
      background-color 0.45s var(--ease-out-expo),
      border-radius 0.45s var(--ease-out-expo),
      padding 0.45s var(--ease-out-expo),
      grid-template-columns 0.45s var(--ease-out-expo);
  }

  .team__member:first-child {
    border-top: none !important;
  }

  .team__member:last-child {
    border-bottom: 1px solid rgba(180, 229, 80, 0.14) !important;
  }

  /* ── ID card state ── */
  .team__member.is-open {
    background: var(--color-text);
    border-radius: 18px;
    border-top-color: transparent !important;
    padding: 1.2rem 2.2rem 1.25rem 0.85rem;
    align-items: start;
    grid-template-columns: 124px 1fr;
  }

  .team__member.is-open + .team__member {
    border-top-color: transparent !important;
  }

  .m-motion .team__member::after {
    content: '+';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 0.5rem;
    font-family: var(--font-headline);
    font-size: 1.3rem;
    font-weight: 300;
    color: rgba(240, 240, 236, 0.5);
    transition: transform 0.35s var(--ease-out-expo), color 0.35s, top 0.35s;
  }

  .m-motion .team__member.is-open::after {
    top: 1.4rem;
    transform: translateY(-50%) rotate(45deg);
    color: rgba(6, 21, 8, 0.55);
  }

  .team__member picture {
    grid-column: 1;
    grid-row: 1;
    position: relative;
    width: 56px;
    height: 56px;
    border-radius: 10px;
    overflow: hidden;
    background: radial-gradient(120% 120% at 50% 0%, rgba(180, 229, 80, 0.14), rgba(6, 21, 8, 0.6));
    transition:
      width 0.45s var(--ease-out-expo),
      height 0.45s var(--ease-out-expo),
      border-radius 0.45s var(--ease-out-expo);
  }

  /* Open card: the photo grows into a row-height square on the left and the
     details column (role/name/uni/links) shifts into the right-side space.
     Solid dark plate behind the cutout — no gradient against the white card. */
  .team__member.is-open picture {
    grid-row: 1 / span 2;
    width: 124px;
    height: 124px;
    border-radius: 14px;
    align-self: center;
    background: var(--color-accent);
  }

  /* Uniform square mobile portraits fill the frame — no per-member framing. */
  .team__member .team__photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    transform: none;
    filter: grayscale(0.1) brightness(0.95);
  }

  .team__overlay {
    display: none;
  }

  .team__info {
    grid-column: 2;
    grid-row: 1;
    position: static;
    padding: 0;
    align-items: flex-start;
    text-align: left;
    gap: 0.12rem;
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }

  /* Collapsed: just the name, generous size */
  .team__name {
    font-size: 1.35rem;
    transition: color 0.4s var(--ease-out-expo);
  }

  .team__role { font-size: 0.6rem; }
  .team__uni  { font-size: 0.78rem; }

  /* ID card typography: role on top, BOLD Stack Sans name, institution under */
  .team__member.is-open .team__name {
    font-family: var(--font-headline);
    font-style: normal;
    font-weight: 700;
    font-size: clamp(1.1rem, 4.6vw, 1.35rem);
    letter-spacing: -0.01em;
    color: #061508;
    white-space: nowrap;
  }

  .team__member.is-open .team__role {
    color: rgba(6, 21, 8, 0.6);
  }

  .team__member.is-open .team__uni {
    color: rgba(6, 21, 8, 0.72);
  }

  .team__links {
    grid-column: 2;
    grid-row: 2;
    position: static;
    justify-content: flex-start;
    gap: 0.8rem;
    padding: 0;
    margin-top: 0.85rem;
    opacity: 1;
    transform: none;
  }

  .team__links svg {
    width: 30px;
    height: 30px;
  }

  .team__member.is-open .team__links a {
    color: rgba(6, 21, 8, 0.65);
  }

  .team__member.is-open .team__links a:hover,
  .team__member.is-open .team__links a:active {
    color: #061508;
  }

  /* Collapsing parts only when JS is alive — without it rows stay complete.
     Collapsed row = thumb + name only; the card reveals role + uni + links. */
  .m-motion .team__role,
  .m-motion .team__uni {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    margin-top: 0;
    transition:
      max-height 0.45s var(--ease-out-expo),
      opacity 0.4s var(--ease-out-expo),
      margin 0.4s var(--ease-out-expo),
      color 0.4s var(--ease-out-expo);
  }

  .m-motion .team__member.is-open .team__role {
    max-height: 1.4rem;
    opacity: 1;
  }

  .m-motion .team__member.is-open .team__uni {
    max-height: 3rem;
    opacity: 1;
    margin-top: 0.2rem;
  }

  .m-motion .team__links {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    margin-top: 0;
    transition:
      max-height 0.45s var(--ease-out-expo),
      opacity 0.4s var(--ease-out-expo),
      margin 0.4s var(--ease-out-expo);
  }

  .m-motion .team__member.is-open .team__links {
    max-height: 56px;
    opacity: 1;
    margin-top: 0.85rem;
  }

  /* No hover-dim choreography on touch */
  .team__grid:hover .team__photo {
    filter: grayscale(0.1) brightness(0.95);
  }

  /* ── Closing ── */
  .closing {
    margin-top: 0;
    padding: 10vh 1.5rem;
  }

  .closing__stage {
    gap: 2.25rem;
    padding: 2rem 0;
  }

  .closing__logo {
    height: clamp(36px, 10vw, 56px);
  }

  .closing__motto {
    font-size: clamp(2rem, 8vw, 3.5rem);
  }

  .closing__waitlist-btn {
    font-size: 0.85rem;
    padding: 0.85rem 1.6rem;
  }

  .closing__waitlist.is-open .closing__waitlist-form {
    max-width: 220px;
  }

  .closing__waitlist-input {
    width: 150px;
    font-size: 0.85rem;
  }

  .closing__waitlist-hint {
    font-size: 0.75rem;
    padding: 0 1rem;
  }

  .site-footer {
    padding: 2.5rem 1.5rem;
  }

  .site-footer__links {
    gap: 1.75rem;
  }

  .site-footer__links a {
    padding: 0.5rem 0.25rem;
  }

  /* ── Mobile motion layer (driven by scripts/mobile-motion.js) ──
     Scroll reveals on transform/opacity only; hero gets a one-shot entrance. */
  .m-reveal {
    opacity: 0;
    transform: translateY(18px);
    transition:
      opacity 0.65s var(--ease-out-expo),
      transform 0.65s var(--ease-out-expo);
  }

  .m-reveal.is-in {
    opacity: 1;
    transform: none;
  }

  .m-motion .hero__heading {
    animation: m-hero-in 0.9s var(--ease-out-expo) both;
  }

  .m-motion .hero__subtitle {
    animation: m-hero-in 0.9s var(--ease-out-expo) 0.18s both;
  }

  .m-motion .hero__scroll-hint {
    animation: m-hero-in 0.9s var(--ease-out-expo) 0.36s both;
  }

  @keyframes m-hero-in {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: none; }
  }

  .closing__waitlist-input {
    width: min(230px, 54vw);
  }
}

/* Phone-only nudges (≤ 480 px) */
@media (max-width: 480px) {
  .hero__heading {
    font-size: clamp(2rem, 1rem + 7vw, 2.8rem);
  }

  .closing__waitlist-input {
    width: min(190px, 52vw);
    font-size: 0.85rem;
  }
}

/* ──────────────────────────────────────────
   Reduced motion
   Mandatory for vestibular safety. Every keyframe/transition
   collapses to instant; the JS canvases query this same media at runtime.
   ────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .hero__scroll-dot,
  .story__connect-dot {
    animation: none !important;
  }

  /* Static reveals: anything that hides itself behind a transition becomes
     visible immediately so the page is fully readable without motion. */
  .story__pill,
  .story__cbar,
  .story__skel,
  .product__nav,
  .product__laptop,
  .product__tilt,
  .team__info,
  .team__links {
    opacity: 1 !important;
    transform: none !important;
  }

  /* Decorative depth layers carry no information without motion. */
  .product__sheen,
  .product__pan-hint {
    display: none !important;
  }

  /* Decorative WebGL surfaces serve no information on a reduced-motion page;
     hide them so the GPU is not engaged. */
  .closing__motto-inner,
  .closing__logo,
  .closing__actions {
    opacity: 1 !important;
    transform: none !important;
  }

  .closing__stars,
  .hero__bg,
  .hero__stars,
  .story__globe,
  .story__globe-lines,
  .team__aurora {
    display: none !important;
  }
}