/* ============================================================
   Rakeen Logo Lab v2 — Gallery styles
   ------------------------------------------------------------
   Focused on three logo treatments (Mono Reveal, Ink Pour,
   Spotlight Sweep), each with five sub-variants, plus a
   spinners gallery built from the Rakeen R-mark and wordmark.
   ============================================================ */

/* ---------- Base / layout -------------------------------- */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  background: var(--bg-page);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--t-base);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }

code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--ink-8);
  padding: 1px 6px;
  border-radius: 5px;
}

/* ---------- Hero ----------------------------------------- */

.lab-hero {
  padding: 96px 24px 56px;
}
.lab-hero__inner {
  max-width: 1180px;
  margin: 0 auto;
}
.lab-hero__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: var(--ls-eyebrow);
  color: var(--text-mute);
  text-transform: uppercase;
  margin-bottom: 18px;
}
.lab-hero__title {
  font-family: var(--font-display);
  font-weight: var(--w-700);
  font-size: clamp(36px, 5vw, 58px);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  margin: 0 0 18px;
  color: var(--text);
  max-width: 22ch;
}
.lab-hero__lead {
  font-size: var(--t-md);
  line-height: var(--lh-relax);
  color: var(--text-soft);
  max-width: 64ch;
  margin: 0;
}

/* ---------- Tabs (sticky) -------------------------------- */

.lab-tabs {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(243, 248, 248, 0.82);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--ink-5);
}
.lab-tabs__inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
}
.lab-tabs__inner::-webkit-scrollbar { display: none; }
.lab-tabs__link {
  flex: 0 0 auto;
  padding: 8px 14px;
  border-radius: var(--r-pill);
  font-size: var(--t-sm);
  font-weight: var(--w-500);
  color: var(--text-soft);
  background: transparent;
  transition: color var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease-out);
}
.lab-tabs__link:hover { color: var(--text); background: var(--ink-5); }
.lab-tabs__link.is-active {
  color: var(--paper);
  background: var(--rk-ink);
}
.lab-tabs__sep {
  width: 1px;
  height: 18px;
  background: var(--ink-12);
  margin: 0 6px;
  flex: 0 0 auto;
}

/* ---------- Main / stages -------------------------------- */

.lab-main {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}
.lab-stage {
  padding: 96px 0 64px;
  border-bottom: 1px solid var(--ink-5);
}
.lab-stage:last-of-type { border-bottom: 0; }
.lab-stage__head {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 24px;
  align-items: baseline;
  margin-bottom: 56px;
}
.lab-stage__index {
  grid-row: 1 / 3;
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  color: var(--text-mute);
  letter-spacing: var(--ls-wide);
  padding-top: 14px;
}
.lab-stage__title {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-size: clamp(28px, 3.6vw, 42px);
  font-weight: var(--w-700);
  letter-spacing: var(--ls-title);
  line-height: var(--lh-tight);
}
.lab-stage__desc {
  margin: 0;
  font-size: var(--t-md);
  line-height: var(--lh-relax);
  color: var(--text-soft);
  max-width: 64ch;
}

/* ---------- Sub-variant block ---------------------------- */

.subvariant {
  margin-bottom: 48px;
}
.subvariant:last-child { margin-bottom: 0; }
.subvariant__head {
  margin-bottom: 18px;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px 16px;
}
.subvariant__chip {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
  letter-spacing: var(--ls-wide);
  color: var(--text-mute);
  background: var(--ink-5);
  padding: 4px 10px;
  border-radius: var(--r-pill);
  text-transform: uppercase;
}
.subvariant__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--t-xl);
  font-weight: var(--w-600);
  letter-spacing: var(--ls-tight);
  color: var(--text);
}
.subvariant__desc {
  flex: 1 1 100%;
  margin: 0;
  font-size: var(--t-sm);
  line-height: var(--lh-relax);
  color: var(--text-soft);
  max-width: 72ch;
}

/* ---------- Card grid ------------------------------------ */

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 18px;
}

/* ---------- Shared card chrome --------------------------- */

.rk-card {
  background: var(--paper-2);
  border-radius: var(--r-lg);
  padding: 24px 22px 20px;
  box-shadow: var(--shadow-1);
  display: flex;
  flex-direction: column;
  min-height: 210px;
  transition: box-shadow var(--dur-3) var(--ease-out);
  position: relative;
  overflow: hidden;
}
.rk-card:hover { box-shadow: var(--shadow-2); }

.rk-card__logo {
  position: relative;
  height: 52px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
}
.rk-card__logo svg {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
}

.rk-card__name {
  font-family: var(--font-display);
  font-size: var(--t-md);
  font-weight: var(--w-600);
  letter-spacing: var(--ls-tight);
  color: var(--text);
  margin: 0 0 6px;
}
.rk-card__desc {
  font-size: var(--t-sm);
  line-height: var(--lh-relax);
  color: var(--text-soft);
  margin: 0;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.rk-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--ink-5);
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
  color: var(--text-mute);
}
.rk-card__audience { letter-spacing: var(--ls-wide); text-transform: uppercase; }
.rk-card__ver { color: var(--text-soft); }

.rk-logo > svg { width: 100% !important; height: 100% !important; }


/* ============================================================
   MONO REVEAL — 5 sub-variants
   ============================================================ */

/* --- A · Classic: deep-ink silhouette → tri-color bloom (blue, green, navy stagger) --- */
.variant--mono-classic .rk-logo svg path[fill="#3A5DC0" i],
.variant--mono-classic .rk-logo svg .cls-1,
.variant--mono-classic .rk-logo svg path[fill="#063B2B" i],
.variant--mono-classic .rk-logo svg .cls-2,
.variant--mono-classic .rk-logo svg path[fill="#0C2144" i],
.variant--mono-classic .rk-logo svg .cls-3 { fill: var(--rk-ink); }
.variant--mono-classic .rk-logo svg path { transition: fill 420ms var(--ease-out); }
.variant--mono-classic .rk-card:hover .rk-logo svg path[fill="#3A5DC0" i],
.variant--mono-classic .rk-card:hover .rk-logo svg .cls-1 { fill: #3A5DC0; transition-delay: 0ms; }
.variant--mono-classic .rk-card:hover .rk-logo svg path[fill="#063B2B" i],
.variant--mono-classic .rk-card:hover .rk-logo svg .cls-2 { fill: #063B2B; transition-delay: 80ms; }
.variant--mono-classic .rk-card:hover .rk-logo svg path[fill="#0C2144" i],
.variant--mono-classic .rk-card:hover .rk-logo svg .cls-3 { fill: #0C2144; transition-delay: 160ms; }


/* --- B · Scatter Assembly --------------------------------------------
   Each brand-color group is translated/rotated apart and held at a low
   opacity. Hover springs them back to perfect alignment with overshoot. */
.variant--mono-scatter .rk-logo svg path {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  opacity: 0.55;
  transition: transform 520ms var(--ease-spring), opacity 360ms var(--ease-out);
}
.variant--mono-scatter .rk-logo svg path[fill="#3A5DC0" i],
.variant--mono-scatter .rk-logo svg .cls-1 {
  transform: translate(-10px, -6px) rotate(-4deg);
}
.variant--mono-scatter .rk-logo svg path[fill="#063B2B" i],
.variant--mono-scatter .rk-logo svg .cls-2 {
  transform: translate(8px, 12px) rotate(6deg) scale(0.92);
}
.variant--mono-scatter .rk-logo svg path[fill="#0C2144" i],
.variant--mono-scatter .rk-logo svg .cls-3 {
  transform: translate(12px, -4px) rotate(-2deg) scale(1.08);
}
.variant--mono-scatter .rk-card:hover .rk-logo svg path {
  transform: translate(0, 0) rotate(0deg) scale(1) !important;
  opacity: 1;
}


/* --- C · Neon Activate ------------------------------------------------
   Rest = thin blue stroke, no fill (neon sign off). Hover ignites: a
   two-flicker glow, fills bloom, soft halo lingers. */
.variant--mono-neon .rk-logo svg path {
  fill: transparent;
  stroke: rgba(58, 93, 192, 0.38);
  stroke-width: 1.2;
  vector-effect: non-scaling-stroke;
  transition: fill 220ms var(--ease-out), stroke 220ms var(--ease-out);
}
.variant--mono-neon .rk-logo {
  transition: filter 380ms var(--ease-out);
  filter: drop-shadow(0 0 0 transparent);
}
.variant--mono-neon .rk-card:hover .rk-logo svg path[fill="#3A5DC0" i],
.variant--mono-neon .rk-card:hover .rk-logo svg .cls-1 {
  fill: #3A5DC0; stroke: transparent;
}
.variant--mono-neon .rk-card:hover .rk-logo svg path[fill="#063B2B" i],
.variant--mono-neon .rk-card:hover .rk-logo svg .cls-2 {
  fill: #063B2B; stroke: transparent;
}
.variant--mono-neon .rk-card:hover .rk-logo svg path[fill="#0C2144" i],
.variant--mono-neon .rk-card:hover .rk-logo svg .cls-3 {
  fill: #0C2144; stroke: transparent;
}
.variant--mono-neon .rk-card:hover .rk-logo {
  animation: rk-neon-on 720ms var(--ease-out) forwards;
}
@keyframes rk-neon-on {
  0%   { filter: drop-shadow(0 0 0 transparent); }
  12%  { filter: drop-shadow(0 0 10px rgba(58, 93, 192, 0.75)); }
  22%  { filter: drop-shadow(0 0 2px rgba(58, 93, 192, 0.30)); }
  38%  { filter: drop-shadow(0 0 14px rgba(58, 93, 192, 0.85)); }
  52%  { filter: drop-shadow(0 0 6px rgba(58, 93, 192, 0.45)); }
  100% { filter:
    drop-shadow(0 0 10px rgba(58, 93, 192, 0.50))
    drop-shadow(0 0 18px rgba(58, 93, 192, 0.28)); }
}


/* --- D · Mist Wake ---------------------------------------------------- */
.variant--mono-mist .rk-logo svg path[fill="#3A5DC0" i],
.variant--mono-mist .rk-logo svg .cls-1,
.variant--mono-mist .rk-logo svg path[fill="#063B2B" i],
.variant--mono-mist .rk-logo svg .cls-2,
.variant--mono-mist .rk-logo svg path[fill="#0C2144" i],
.variant--mono-mist .rk-logo svg .cls-3 {
  fill: #7da8a8;
}
.variant--mono-mist .rk-logo svg path { transition: fill 420ms var(--ease-out); }
.variant--mono-mist .rk-card:hover .rk-logo svg path[fill="#3A5DC0" i],
.variant--mono-mist .rk-card:hover .rk-logo svg .cls-1 { fill: #3A5DC0; transition-delay: 0ms; }
.variant--mono-mist .rk-card:hover .rk-logo svg path[fill="#063B2B" i],
.variant--mono-mist .rk-card:hover .rk-logo svg .cls-2 { fill: #063B2B; transition-delay: 80ms; }
.variant--mono-mist .rk-card:hover .rk-logo svg path[fill="#0C2144" i],
.variant--mono-mist .rk-card:hover .rk-logo svg .cls-3 { fill: #0C2144; transition-delay: 160ms; }


/* --- E · Kinetic Type -------------------------------------------------
   The logo is gently alive at rest — each color group drifts on its
   own sub-pixel rhythm. Hover stills everything and snaps to crisp
   brand color. Inverts the usual pattern. */
.variant--mono-kinetic .rk-logo svg path {
  transform-box: fill-box;
  transform-origin: 50% 50%;
}
.variant--mono-kinetic .rk-logo svg path[fill="#3A5DC0" i],
.variant--mono-kinetic .rk-logo svg .cls-1 {
  fill: #6a83cd;
  animation: rk-kinetic-blue 2.6s ease-in-out infinite;
  transition: fill 240ms var(--ease-out);
}
.variant--mono-kinetic .rk-logo svg path[fill="#063B2B" i],
.variant--mono-kinetic .rk-logo svg .cls-2 {
  fill: #4a6b5e;
  animation: rk-kinetic-green 3.1s ease-in-out infinite;
  transition: fill 240ms var(--ease-out);
}
.variant--mono-kinetic .rk-logo svg path[fill="#0C2144" i],
.variant--mono-kinetic .rk-logo svg .cls-3 {
  fill: #3e4763;
  animation: rk-kinetic-navy 3.5s ease-in-out infinite;
  transition: fill 240ms var(--ease-out);
}
@keyframes rk-kinetic-blue {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(1.5px, -1px); }
}
@keyframes rk-kinetic-green {
  0%, 100% { transform: translate(0, 0) rotate(0); }
  50%      { transform: translate(-1px, 1.5px) rotate(0.6deg); }
}
@keyframes rk-kinetic-navy {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(1px, 1px); }
}
.variant--mono-kinetic .rk-card:hover .rk-logo svg path {
  animation-play-state: paused;
  transform: translate(0, 0) rotate(0) !important;
  transition: transform 320ms var(--ease-spring), fill 240ms var(--ease-out);
}
.variant--mono-kinetic .rk-card:hover .rk-logo svg path[fill="#3A5DC0" i],
.variant--mono-kinetic .rk-card:hover .rk-logo svg .cls-1 { fill: #3A5DC0; }
.variant--mono-kinetic .rk-card:hover .rk-logo svg path[fill="#063B2B" i],
.variant--mono-kinetic .rk-card:hover .rk-logo svg .cls-2 { fill: #063B2B; }
.variant--mono-kinetic .rk-card:hover .rk-logo svg path[fill="#0C2144" i],
.variant--mono-kinetic .rk-card:hover .rk-logo svg .cls-3 { fill: #0C2144; }


/* ============================================================
   INK POUR — 5 sub-variants
   ------------------------------------------------------------
   Each card has TWO stacked logos: .rk-logo--outline (stroke
   only, always visible) and .rk-logo--fill (original colors,
   masked via clip-path until hover).
   ============================================================ */

[class*="variant--ink-"] .rk-card__logo { position: relative; }
[class*="variant--ink-"] .rk-logo--outline,
[class*="variant--ink-"] .rk-logo--fill {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
}
[class*="variant--ink-"] .rk-logo--outline svg path {
  fill: none !important;
  stroke: var(--rk-ink);
  stroke-width: 1.1;
  vector-effect: non-scaling-stroke;
  opacity: 0.55;
  transition: opacity 420ms var(--ease-out);
}
[class*="variant--ink-"] .rk-card:hover .rk-logo--outline svg path {
  opacity: 0;
}

/* --- A · Top → Bottom --- */
.variant--ink-top .rk-logo--fill {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 900ms var(--ease-out);
}
.variant--ink-top .rk-card:hover .rk-logo--fill {
  clip-path: inset(0 0 0 0);
}

/* --- B · Bottom → Top --- */
.variant--ink-bottom .rk-logo--fill {
  clip-path: inset(100% 0 0 0);
  transition: clip-path 900ms var(--ease-out);
}
.variant--ink-bottom .rk-card:hover .rk-logo--fill {
  clip-path: inset(0 0 0 0);
}

/* --- C · Left → Right --- */
.variant--ink-left .rk-logo--fill {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1100ms var(--ease-out);
}
.variant--ink-left .rk-card:hover .rk-logo--fill {
  clip-path: inset(0 0 0 0);
}

/* --- D · Radial Bloom --- */
.variant--ink-radial .rk-logo--fill {
  clip-path: circle(0% at 50% 50%);
  transition: clip-path 950ms var(--ease-snap);
}
.variant--ink-radial .rk-card:hover .rk-logo--fill {
  clip-path: circle(110% at 50% 50%);
}

/* --- E · Per-Group Stagger: each color group fills on its own --- */
.variant--ink-sequenced .rk-logo--fill { display: none; }
.variant--ink-sequenced .rk-logo--fill-blue,
.variant--ink-sequenced .rk-logo--fill-green,
.variant--ink-sequenced .rk-logo--fill-navy {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 600ms var(--ease-out);
}
.variant--ink-sequenced .rk-logo--fill-blue svg path[fill="#063B2B" i],
.variant--ink-sequenced .rk-logo--fill-blue svg .cls-2,
.variant--ink-sequenced .rk-logo--fill-blue svg path[fill="#0C2144" i],
.variant--ink-sequenced .rk-logo--fill-blue svg .cls-3 { opacity: 0 !important; }
.variant--ink-sequenced .rk-logo--fill-green svg path[fill="#3A5DC0" i],
.variant--ink-sequenced .rk-logo--fill-green svg .cls-1,
.variant--ink-sequenced .rk-logo--fill-green svg path[fill="#0C2144" i],
.variant--ink-sequenced .rk-logo--fill-green svg .cls-3 { opacity: 0 !important; }
.variant--ink-sequenced .rk-logo--fill-navy svg path[fill="#3A5DC0" i],
.variant--ink-sequenced .rk-logo--fill-navy svg .cls-1,
.variant--ink-sequenced .rk-logo--fill-navy svg path[fill="#063B2B" i],
.variant--ink-sequenced .rk-logo--fill-navy svg .cls-2 { opacity: 0 !important; }
.variant--ink-sequenced .rk-card:hover .rk-logo--fill-blue {
  clip-path: inset(0 0 0 0); transition-delay: 0ms;
}
.variant--ink-sequenced .rk-card:hover .rk-logo--fill-green {
  clip-path: inset(0 0 0 0); transition-delay: 200ms;
}
.variant--ink-sequenced .rk-card:hover .rk-logo--fill-navy {
  clip-path: inset(0 0 0 0); transition-delay: 400ms;
}


/* ============================================================
   SPOTLIGHT SWEEP — 5 sub-variants
   ------------------------------------------------------------
   Two stacked logos: .rk-logo--mono (light ink monochrome,
   always visible) and .rk-logo--color (original colors, masked
   by a sweeping gradient until hover, then fully visible).
   ============================================================ */

[class*="variant--sweep-"] .rk-card__logo {
  position: relative;
  isolation: isolate;
}
[class*="variant--sweep-"] .rk-logo--mono,
[class*="variant--sweep-"] .rk-logo--color {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
}
[class*="variant--sweep-"] .rk-logo--mono svg path {
  fill: var(--ink-35) !important;
}

/* --- A · Diagonal (110°) --- */
.variant--sweep-diagonal .rk-logo--color {
  -webkit-mask-image: linear-gradient(110deg,
    transparent 0%, transparent 35%, #000 50%, transparent 65%, transparent 100%);
          mask-image: linear-gradient(110deg,
    transparent 0%, transparent 35%, #000 50%, transparent 65%, transparent 100%);
  -webkit-mask-size: 240% 100%; mask-size: 240% 100%;
  -webkit-mask-position: 140% 0; mask-position: 140% 0;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  transition: -webkit-mask-position 900ms var(--ease-out),
                      mask-position 900ms var(--ease-out),
              -webkit-mask-image 0ms 900ms linear,
                      mask-image 0ms 900ms linear;
}
.variant--sweep-diagonal .rk-card:hover .rk-logo--color {
  -webkit-mask-position: -40% 0; mask-position: -40% 0;
  -webkit-mask-image: linear-gradient(110deg, #000, #000);
          mask-image: linear-gradient(110deg, #000, #000);
}

/* --- B · Horizontal (90°) --- */
.variant--sweep-horizontal .rk-logo--color {
  -webkit-mask-image: linear-gradient(90deg,
    transparent 0%, transparent 35%, #000 50%, transparent 65%, transparent 100%);
          mask-image: linear-gradient(90deg,
    transparent 0%, transparent 35%, #000 50%, transparent 65%, transparent 100%);
  -webkit-mask-size: 240% 100%; mask-size: 240% 100%;
  -webkit-mask-position: 140% 0; mask-position: 140% 0;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  transition: -webkit-mask-position 900ms var(--ease-out),
                      mask-position 900ms var(--ease-out),
              -webkit-mask-image 0ms 900ms linear,
                      mask-image 0ms 900ms linear;
}
.variant--sweep-horizontal .rk-card:hover .rk-logo--color {
  -webkit-mask-position: -40% 0; mask-position: -40% 0;
  -webkit-mask-image: linear-gradient(90deg, #000, #000);
          mask-image: linear-gradient(90deg, #000, #000);
}

/* --- C · Vertical Wipe (180°) --- */
.variant--sweep-vertical .rk-logo--color {
  -webkit-mask-image: linear-gradient(180deg,
    transparent 0%, transparent 35%, #000 50%, transparent 65%, transparent 100%);
          mask-image: linear-gradient(180deg,
    transparent 0%, transparent 35%, #000 50%, transparent 65%, transparent 100%);
  -webkit-mask-size: 100% 240%; mask-size: 100% 240%;
  -webkit-mask-position: 0 140%; mask-position: 0 140%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  transition: -webkit-mask-position 900ms var(--ease-out),
                      mask-position 900ms var(--ease-out),
              -webkit-mask-image 0ms 900ms linear,
                      mask-image 0ms 900ms linear;
}
.variant--sweep-vertical .rk-card:hover .rk-logo--color {
  -webkit-mask-position: 0 -40%; mask-position: 0 -40%;
  -webkit-mask-image: linear-gradient(180deg, #000, #000);
          mask-image: linear-gradient(180deg, #000, #000);
}

/* --- D · Wide Beam (110° wider stripe) --- */
.variant--sweep-wide .rk-logo--color {
  -webkit-mask-image: linear-gradient(110deg,
    transparent 0%, transparent 20%, #000 50%, transparent 80%, transparent 100%);
          mask-image: linear-gradient(110deg,
    transparent 0%, transparent 20%, #000 50%, transparent 80%, transparent 100%);
  -webkit-mask-size: 260% 100%; mask-size: 260% 100%;
  -webkit-mask-position: 140% 0; mask-position: 140% 0;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  transition: -webkit-mask-position 1100ms var(--ease-out),
                      mask-position 1100ms var(--ease-out),
              -webkit-mask-image 0ms 1100ms linear,
                      mask-image 0ms 1100ms linear;
}
.variant--sweep-wide .rk-card:hover .rk-logo--color {
  -webkit-mask-position: -60% 0; mask-position: -60% 0;
  -webkit-mask-image: linear-gradient(110deg, #000, #000);
          mask-image: linear-gradient(110deg, #000, #000);
}

/* --- E · Double Pass — sweep across, return, then settle --- */
.variant--sweep-double .rk-logo--color {
  -webkit-mask-image: linear-gradient(110deg,
    transparent 0%, transparent 35%, #000 50%, transparent 65%, transparent 100%);
          mask-image: linear-gradient(110deg,
    transparent 0%, transparent 35%, #000 50%, transparent 65%, transparent 100%);
  -webkit-mask-size: 240% 100%; mask-size: 240% 100%;
  -webkit-mask-position: 140% 0; mask-position: 140% 0;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  animation: none;
}
.variant--sweep-double .rk-card:hover .rk-logo--color {
  animation: rk-double-sweep 1400ms var(--ease-in-out) forwards;
}
@keyframes rk-double-sweep {
  0%   { -webkit-mask-position: 140% 0; mask-position: 140% 0; }
  45%  { -webkit-mask-position: -40% 0; mask-position: -40% 0; }
  60%  { -webkit-mask-position: -40% 0; mask-position: -40% 0; }
  95%  {
    -webkit-mask-position: 140% 0; mask-position: 140% 0;
    -webkit-mask-image: linear-gradient(110deg,
      transparent 0%, transparent 35%, #000 50%, transparent 65%, transparent 100%);
            mask-image: linear-gradient(110deg,
      transparent 0%, transparent 35%, #000 50%, transparent 65%, transparent 100%);
  }
  100% {
    -webkit-mask-position: 0 0; mask-position: 0 0;
    -webkit-mask-image: linear-gradient(110deg, #000, #000);
            mask-image: linear-gradient(110deg, #000, #000);
  }
}


/* ============================================================
   SPINNERS — 10 loaders
   ============================================================ */

.spinner-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 18px;
}
.spinner-cell {
  background: var(--paper-2);
  border-radius: var(--r-lg);
  padding: 26px 20px 20px;
  box-shadow: var(--shadow-1);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  min-height: 220px;
  justify-content: space-between;
}
.spinner-cell__stage {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 88px;
  width: 100%;
}
.spinner-cell__caption {
  text-align: center;
}
.spinner-cell__title {
  font-family: var(--font-display);
  font-size: var(--t-sm);
  font-weight: var(--w-600);
  letter-spacing: var(--ls-tight);
  margin: 0 0 4px;
}
.spinner-cell__note {
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
  color: var(--text-mute);
  margin: 0;
}

/* ---- Common spinner sizing helpers ---- */
.spin {
  --size: 64px;
  width: var(--size);
  height: var(--size);
  display: inline-block;
  position: relative;
}
.spin-logo {
  --size: 64px;
  width: var(--size);
  height: var(--size);
  display: inline-block;
  position: relative;
}
.spin-logo svg {
  width: 100%;
  height: 100%;
  display: block;
}

@keyframes rk-spin { to { transform: rotate(360deg); } }


/* ---- 1. Tri-arc ---- */
.spin--tri-arc { color: var(--rk-blue); }
.spin--tri-arc svg { width: 100%; height: 100%; }
.spin--tri-arc .arc {
  fill: none;
  stroke-width: 4;
  stroke-linecap: round;
  transform-origin: 50% 50%;
}
.spin--tri-arc .arc-1 { stroke: #3A5DC0; animation: rk-spin 1.2s linear infinite; }
.spin--tri-arc .arc-2 { stroke: #063B2B; animation: rk-spin 1.8s linear infinite reverse; }
.spin--tri-arc .arc-3 { stroke: #0C2144; animation: rk-spin 2.4s linear infinite; }


/* ---- 2. Dot Triad ---- */
.spin--dot-triad {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: auto;
  height: auto;
}
.spin--dot-triad .dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  animation: rk-dot-pulse 1.3s ease-in-out infinite;
}
.spin--dot-triad .dot:nth-child(1) { background: #3A5DC0; }
.spin--dot-triad .dot:nth-child(2) { background: #063B2B; animation-delay: 180ms; }
.spin--dot-triad .dot:nth-child(3) { background: #0C2144; animation-delay: 360ms; }
@keyframes rk-dot-pulse {
  0%, 100% { transform: scale(0.7); opacity: 0.5; }
  50%      { transform: scale(1.15); opacity: 1; }
}


/* ---- 3. Conic Ring ---- */
.spin--conic-ring {
  --size: 64px;
  border-radius: 50%;
  background: conic-gradient(from 0deg,
    rgba(58, 93, 192, 0) 0%,
    rgba(58, 93, 192, 0.05) 20%,
    rgba(58, 93, 192, 0.65) 80%,
    rgba(58, 93, 192, 1) 100%);
  -webkit-mask: radial-gradient(circle, transparent 56%, #000 58%);
          mask: radial-gradient(circle, transparent 56%, #000 58%);
  animation: rk-spin 1.1s linear infinite;
}


/* ============================================================
   LOGO-BASED SPINNERS (use Rakeen R-mark and wordmark)
   ============================================================ */

/* The R-mark and wordmark ship blue (#3a5dc0). We let CSS recolor
   via fill on .spin-logo svg path. */

/* ---- 4. R-Pulse — breathing scale + opacity ---- */
.spin--r-pulse {
  --size: 68px;
}
.spin--r-pulse svg path { fill: var(--rk-blue); }
.spin--r-pulse {
  animation: rk-r-pulse 1.4s var(--ease-in-out) infinite;
  transform-origin: 50% 50%;
}
@keyframes rk-r-pulse {
  0%, 100% { transform: scale(0.88); opacity: 0.6; }
  50%      { transform: scale(1.08); opacity: 1; }
}


/* ---- 5. R-Rotate — full 360° gentle spin ---- */
.spin--r-rotate {
  --size: 64px;
  animation: rk-spin 1.8s var(--ease-in-out) infinite;
  transform-origin: 50% 50%;
}
.spin--r-rotate svg path { fill: var(--rk-blue); }


/* ---- 6. R-Trace — outline draw using stroke-dashoffset ---- */
.spin--r-trace {
  --size: 68px;
}
.spin--r-trace svg path {
  fill: none;
  stroke: var(--rk-blue);
  stroke-width: 3;
  stroke-linejoin: round;
  stroke-linecap: round;
  stroke-dasharray: 1200;
  stroke-dashoffset: 1200;
  animation: rk-r-trace 2s var(--ease-in-out) infinite;
}
@keyframes rk-r-trace {
  0%   { stroke-dashoffset: 1200; opacity: 0; }
  10%  { opacity: 1; }
  55%  { stroke-dashoffset: 0; opacity: 1; }
  85%  { stroke-dashoffset: 0; opacity: 0; }
  100% { stroke-dashoffset: 1200; opacity: 0; }
}


/* ---- 7. R-Orbit — three dots orbit a centered R ---- */
.spin--r-orbit {
  --size: 92px;
  position: relative;
}
.spin--r-orbit .orbit-center {
  position: absolute;
  inset: 22%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.spin--r-orbit .orbit-center svg path { fill: var(--rk-blue); }
.spin--r-orbit .orbit-track {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  animation: rk-spin 2.6s linear infinite;
}
.spin--r-orbit .orbit-track .dot {
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  top: -4.5px;
  left: 50%;
  margin-left: -4.5px;
}
.spin--r-orbit .orbit-track--a { animation-duration: 1.6s; }
.spin--r-orbit .orbit-track--a .dot { background: #3A5DC0; }
.spin--r-orbit .orbit-track--b {
  inset: 12%;
  animation-duration: 2.4s;
  animation-direction: reverse;
}
.spin--r-orbit .orbit-track--b .dot { background: #063B2B; width: 7px; height: 7px; margin-left: -3.5px; top: -3.5px; }
.spin--r-orbit .orbit-track--c {
  inset: 4%;
  animation-duration: 3.2s;
}
.spin--r-orbit .orbit-track--c .dot { background: #0C2144; width: 6px; height: 6px; margin-left: -3px; top: -3px; }


/* ---- 8. R-Flip — flips on Y-axis with a slight pause ---- */
.spin--r-flip {
  --size: 64px;
  perspective: 200px;
}
.spin--r-flip .flip-inner {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  animation: rk-r-flip 2s var(--ease-in-out) infinite;
}
.spin--r-flip svg path { fill: var(--rk-blue); }
@keyframes rk-r-flip {
  0%   { transform: rotateY(0deg); }
  45%  { transform: rotateY(180deg); }
  55%  { transform: rotateY(180deg); }
  100% { transform: rotateY(360deg); }
}


/* ---- 9. Wordmark Reveal — letters fade in left-to-right ---- */
.spin--wm-reveal {
  --size: 140px;
  width: var(--size);
  height: calc(var(--size) * 1);
}
.spin--wm-reveal svg path { fill: var(--rk-ink); }
/* The Rakeen wordmark SVG has 6 paths. Visual order R, a, k, e, e, n.
   File order: a(1), e1(2), e2(3), n(4), R(5), k(6). So animation
   delays are mapped: 5→1, 1→2, 6→3, 2→4, 3→5, 4→6 */
.spin--wm-reveal svg path { opacity: 0; animation: rk-wm-letter 2.6s var(--ease-in-out) infinite; }
.spin--wm-reveal svg path:nth-of-type(5) { animation-delay: 0ms; }   /* R */
.spin--wm-reveal svg path:nth-of-type(1) { animation-delay: 120ms; } /* a */
.spin--wm-reveal svg path:nth-of-type(6) { animation-delay: 240ms; } /* k */
.spin--wm-reveal svg path:nth-of-type(2) { animation-delay: 360ms; } /* e */
.spin--wm-reveal svg path:nth-of-type(3) { animation-delay: 480ms; } /* e */
.spin--wm-reveal svg path:nth-of-type(4) { animation-delay: 600ms; } /* n */
@keyframes rk-wm-letter {
  0%, 100% { opacity: 0; transform: translateY(2px); }
  20%      { opacity: 1; transform: translateY(0); }
  70%      { opacity: 1; transform: translateY(0); }
  85%      { opacity: 0; transform: translateY(-2px); }
}


/* ---- 10. Wordmark Shimmer — full wordmark with gradient sheen ---- */
.spin--wm-shimmer {
  --size: 140px;
  width: var(--size);
  height: calc(var(--size) * 1);
  position: relative;
  -webkit-mask: linear-gradient(#000, #000);
          mask: linear-gradient(#000, #000);
}
.spin--wm-shimmer svg path { fill: var(--rk-ink); }
.spin--wm-shimmer::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    transparent 0%, transparent 35%,
    rgba(58, 93, 192, 0.6) 50%,
    transparent 65%, transparent 100%);
  -webkit-mask: var(--wm-mask, none);
          mask: var(--wm-mask, none);
  background-size: 240% 100%;
  background-position: 200% 0;
  animation: rk-wm-shimmer 1.8s linear infinite;
  pointer-events: none;
  mix-blend-mode: screen;
}
@keyframes rk-wm-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -100% 0; }
}


/* ============================================================
   MORE STROKE-TRACE EXAMPLES
   ============================================================ */

/* ---- R · Loop Trace — draw-in, retract from start, repeat ---- */
.spin--r-loop-trace { --size: 68px; }
.spin--r-loop-trace svg path {
  fill: none;
  stroke: var(--rk-blue);
  stroke-width: 3;
  stroke-linejoin: round;
  stroke-linecap: round;
  stroke-dasharray: var(--len, 600);
  stroke-dashoffset: var(--len, 600);
  animation: rk-r-loop-trace 2.4s var(--ease-in-out) infinite;
}
@keyframes rk-r-loop-trace {
  0%   { stroke-dashoffset: var(--len, 600); }
  45%  { stroke-dashoffset: 0; }
  55%  { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: calc(-1 * var(--len, 600)); }
}

/* ---- R · Color Trace — cycle through brand colors ---- */
.spin--r-color-trace { --size: 68px; }
.spin--r-color-trace svg path {
  fill: none;
  stroke-width: 3;
  stroke-linejoin: round;
  stroke-linecap: round;
  stroke-dasharray: var(--len, 600);
  stroke-dashoffset: var(--len, 600);
  stroke: #3A5DC0;
  animation: rk-r-color-trace 3.6s var(--ease-in-out) infinite;
}
@keyframes rk-r-color-trace {
  0%   { stroke-dashoffset: var(--len, 600); stroke: #3A5DC0; }
  25%  { stroke-dashoffset: 0; stroke: #3A5DC0; }
  35%  { stroke-dashoffset: 0; stroke: #063B2B; }
  55%  { stroke-dashoffset: 0; stroke: #063B2B; }
  65%  { stroke-dashoffset: 0; stroke: #0C2144; }
  85%  { stroke-dashoffset: 0; stroke: #0C2144; }
  100% { stroke-dashoffset: var(--len, 600); stroke: #3A5DC0; }
}

/* ---- Wordmark · Stroke Trace — each letter drawn in sequence ---- */
.spin--wm-stroke {
  --size: 140px;
  width: var(--size);
  height: var(--size);
}
.spin--wm-stroke svg path {
  fill: none;
  stroke: var(--rk-blue);
  stroke-width: 1.5;
  stroke-linejoin: round;
  stroke-linecap: round;
  stroke-dasharray: var(--len, 200);
  stroke-dashoffset: var(--len, 200);
  animation: rk-wm-stroke 3.4s var(--ease-in-out) infinite;
}
.spin--wm-stroke svg path:nth-of-type(5) { animation-delay: 0ms; }    /* R */
.spin--wm-stroke svg path:nth-of-type(1) { animation-delay: 140ms; }  /* a */
.spin--wm-stroke svg path:nth-of-type(6) { animation-delay: 280ms; }  /* k */
.spin--wm-stroke svg path:nth-of-type(2) { animation-delay: 420ms; }  /* e */
.spin--wm-stroke svg path:nth-of-type(3) { animation-delay: 560ms; }  /* e */
.spin--wm-stroke svg path:nth-of-type(4) { animation-delay: 700ms; }  /* n */
@keyframes rk-wm-stroke {
  0%   { stroke-dashoffset: var(--len, 200); opacity: 0; }
  10%  { opacity: 1; }
  40%  { stroke-dashoffset: 0; opacity: 1; }
  78%  { stroke-dashoffset: 0; opacity: 1; }
  92%  { opacity: 0; }
  100% { stroke-dashoffset: var(--len, 200); opacity: 0; }
}


/* ============================================================
   MORE ORBIT EXAMPLES
   ============================================================ */

/* ---- R · Comet — head + 3 fading tail dots, all rotate together ---- */
.spin--r-comet {
  --size: 92px;
  position: relative;
}
.spin--r-comet .orbit-center {
  position: absolute;
  inset: 22%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.spin--r-comet .orbit-center svg path { fill: var(--rk-blue); }
.spin--r-comet .comet-track {
  position: absolute;
  inset: 0;
  animation: rk-spin 1.4s linear infinite;
}
.spin--r-comet .head,
.spin--r-comet .tail {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  background: var(--rk-blue);
}
.spin--r-comet .head {
  width: 9px; height: 9px;
  margin: -4.5px 0 0 -4.5px;
  transform: rotate(0deg) translateY(-40px);
  transform-origin: center;
}
.spin--r-comet .tail-1 {
  width: 7px; height: 7px;
  margin: -3.5px 0 0 -3.5px;
  transform: rotate(-22deg) translateY(-40px);
  transform-origin: center;
  opacity: 0.55;
}
.spin--r-comet .tail-2 {
  width: 5px; height: 5px;
  margin: -2.5px 0 0 -2.5px;
  transform: rotate(-44deg) translateY(-40px);
  transform-origin: center;
  opacity: 0.30;
}
.spin--r-comet .tail-3 {
  width: 4px; height: 4px;
  margin: -2px 0 0 -2px;
  transform: rotate(-66deg) translateY(-40px);
  transform-origin: center;
  opacity: 0.12;
}

/* ---- R · Halo Ring — partial arc orbits around the R ---- */
.spin--r-halo-ring {
  --size: 88px;
  position: relative;
}
.spin--r-halo-ring .halo {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    var(--rk-blue) 0deg,
    var(--rk-blue) 60deg,
    rgba(58, 93, 192, 0.35) 75deg,
    transparent 90deg,
    transparent 360deg
  );
  -webkit-mask: radial-gradient(circle,
    transparent 60%, #000 62%, #000 76%, transparent 78%);
          mask: radial-gradient(circle,
    transparent 60%, #000 62%, #000 76%, transparent 78%);
  animation: rk-spin 1.6s linear infinite;
}
.spin--r-halo-ring .center {
  position: absolute;
  inset: 28%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.spin--r-halo-ring .center svg path { fill: var(--rk-blue); }

/* ---- R · Counter Orbit — two dots, opposite directions ---- */
.spin--r-counter-orbit {
  --size: 88px;
  position: relative;
}
.spin--r-counter-orbit .orbit-center {
  position: absolute;
  inset: 26%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.spin--r-counter-orbit .orbit-center svg path { fill: var(--rk-blue); }
.spin--r-counter-orbit .orbit-track {
  position: absolute;
  inset: 0;
  border-radius: 50%;
}
.spin--r-counter-orbit .orbit-track .dot {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  top: -4px;
  left: 50%;
  margin-left: -4px;
}
.spin--r-counter-orbit .orbit-cw {
  animation: rk-spin 1.6s linear infinite;
}
.spin--r-counter-orbit .orbit-cw .dot { background: #3A5DC0; }
.spin--r-counter-orbit .orbit-ccw {
  animation: rk-spin 1.6s linear infinite reverse;
}
.spin--r-counter-orbit .orbit-ccw .dot {
  background: #0C2144;
  top: auto;
  bottom: -4px;
}


/* ============================================================
   MORE WORDMARK-REVEAL EXAMPLES
   ============================================================ */

/* Shared sizing for the new wordmark-stagger variants */
.spin--wm-wave,
.spin--wm-pop,
.spin--wm-color-sweep {
  --size: 140px;
  width: var(--size);
  height: var(--size);
}

/* ---- Wordmark · Wave — sine-bob each letter ---- */
.spin--wm-wave svg path {
  fill: var(--rk-ink);
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: rk-wm-wave 1.8s var(--ease-in-out) infinite;
}
.spin--wm-wave svg path:nth-of-type(5) { animation-delay: 0ms; }
.spin--wm-wave svg path:nth-of-type(1) { animation-delay: 90ms; }
.spin--wm-wave svg path:nth-of-type(6) { animation-delay: 180ms; }
.spin--wm-wave svg path:nth-of-type(2) { animation-delay: 270ms; }
.spin--wm-wave svg path:nth-of-type(3) { animation-delay: 360ms; }
.spin--wm-wave svg path:nth-of-type(4) { animation-delay: 450ms; }
@keyframes rk-wm-wave {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}

/* ---- Wordmark · Pop — scale-in with spring overshoot ---- */
.spin--wm-pop svg path {
  fill: var(--rk-ink);
  transform-box: fill-box;
  transform-origin: 50% 50%;
  opacity: 0;
  animation: rk-wm-pop 2.6s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
}
.spin--wm-pop svg path:nth-of-type(5) { animation-delay: 0ms; }
.spin--wm-pop svg path:nth-of-type(1) { animation-delay: 90ms; }
.spin--wm-pop svg path:nth-of-type(6) { animation-delay: 180ms; }
.spin--wm-pop svg path:nth-of-type(2) { animation-delay: 270ms; }
.spin--wm-pop svg path:nth-of-type(3) { animation-delay: 360ms; }
.spin--wm-pop svg path:nth-of-type(4) { animation-delay: 450ms; }
@keyframes rk-wm-pop {
  0%   { transform: scale(0); opacity: 0; }
  18%  { transform: scale(1.18); opacity: 1; }
  32%  { transform: scale(1); }
  78%  { transform: scale(1); opacity: 1; }
  92%  { transform: scale(0.8); opacity: 0; }
  100% { transform: scale(0); opacity: 0; }
}

/* ---- Wordmark · Color Sweep — letters flash brand blue in sequence ---- */
.spin--wm-color-sweep svg path {
  fill: var(--rk-ink);
  animation: rk-wm-color-sweep 2.4s var(--ease-in-out) infinite;
}
.spin--wm-color-sweep svg path:nth-of-type(5) { animation-delay: 0ms; }
.spin--wm-color-sweep svg path:nth-of-type(1) { animation-delay: 140ms; }
.spin--wm-color-sweep svg path:nth-of-type(6) { animation-delay: 280ms; }
.spin--wm-color-sweep svg path:nth-of-type(2) { animation-delay: 420ms; }
.spin--wm-color-sweep svg path:nth-of-type(3) { animation-delay: 560ms; }
.spin--wm-color-sweep svg path:nth-of-type(4) { animation-delay: 700ms; }
@keyframes rk-wm-color-sweep {
  0%, 70%, 100% { fill: var(--rk-ink); }
  30%, 40%      { fill: #3A5DC0; }
}


/* ---------- Footer --------------------------------------- */

.lab-foot {
  max-width: 1180px;
  margin: 0 auto;
  padding: 40px 24px 64px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--t-xs);
  color: var(--text-mute);
}
.lab-foot__mono { font-family: var(--font-mono); }


/* ---------- Reduced motion ------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  [class*="variant--ink-"] .rk-logo--outline svg path { opacity: 0; }
  .variant--ink-top   .rk-logo--fill { clip-path: inset(0 0 0 0); }
  .variant--ink-bottom .rk-logo--fill { clip-path: inset(0 0 0 0); }
  .variant--ink-left  .rk-logo--fill { clip-path: inset(0 0 0 0); }
  .variant--ink-radial .rk-logo--fill { clip-path: circle(110% at 50% 50%); }
  .variant--ink-sequenced .rk-logo--fill-blue,
  .variant--ink-sequenced .rk-logo--fill-green,
  .variant--ink-sequenced .rk-logo--fill-navy { clip-path: inset(0 0 0 0); }
  [class*="variant--sweep-"] .rk-logo--color {
    -webkit-mask-image: linear-gradient(#000, #000) !important;
            mask-image: linear-gradient(#000, #000) !important;
    -webkit-mask-position: 0 0 !important; mask-position: 0 0 !important;
    animation: none !important;
  }
  .spin--wm-reveal svg path { opacity: 1; }
  .spin--wm-pop svg path { opacity: 1; transform: scale(1); }
  .spin--wm-stroke svg path { stroke-dashoffset: 0; opacity: 1; }
  .spin--r-loop-trace svg path,
  .spin--r-color-trace svg path { stroke-dashoffset: 0; }
}


/* ---------- Responsive ----------------------------------- */

@media (max-width: 720px) {
  .lab-hero { padding: 64px 20px 40px; }
  .lab-main { padding: 0 20px; }
  .lab-stage { padding: 64px 0 48px; }
  .lab-stage__head {
    grid-template-columns: 1fr;
    column-gap: 0;
    row-gap: 8px;
  }
  .lab-stage__index { grid-row: auto; padding-top: 0; }
  .card-grid { grid-template-columns: 1fr; }
  .spinner-grid { grid-template-columns: repeat(2, 1fr); }
}