/* ============================================================
   Sandbox Web Studio — design foundation
   Preserved: colour palette + alignment (spacing scale, section scaffolding).
   Content components removed — build pages freely on top of these tokens.
   theme: warm sand · paper: oklch(95% 0.02 80) · accent: oklch(58% 0.16 55)
   display: Fraunces · body: Geist · v2.0.0 (clean slate)
   ============================================================ */

/* ---------- tokens ---------- */
:root {
  --color-paper:    oklch(95%   0.020 80);
  --color-paper-2:  oklch(92%   0.022 80);
  --color-paper-3:  oklch(89%   0.024 80);
  --color-ink:      oklch(20%   0.018 55);
  --color-ink-2:    oklch(42%   0.015 55);
  --color-rule:     oklch(84%   0.022 80);
  --color-rule-2:   oklch(79%   0.024 80);
  --color-muted:    oklch(50%   0.014 55);
  --color-neutral:  oklch(38%   0.012 55);
  --color-accent:   oklch(58%   0.16  55);
  --color-accent-ink: oklch(96% 0.02  80);
  --color-focus:    oklch(56%   0.20  55);
  --color-dark:     oklch(22%   0.018 55);
  --color-dark-2:   oklch(27%   0.020 55);
  --color-dark-ink: oklch(92%   0.014 75);

  --font-display: "Fraunces", ui-serif, Georgia, serif;
  --font-body:    "Geist", ui-sans-serif, system-ui, sans-serif;
  --font-mono:    "Geist Mono", ui-monospace, monospace;

  --space-3xs: 0.125rem;
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --space-4xl: 9rem;

  --text-xs:   0.64rem;
  --text-sm:   0.8rem;
  --text-base: 1rem;
  --text-md:   1.25rem;
  --text-lg:   1.5625rem;
  --text-xl:   1.9531rem;
  --text-2xl:  2.4414rem;
  --text-display: clamp(2.6rem, 5vw + 1rem, 4.6rem);

  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.7,  0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 120ms;
  --dur-short: 220ms;
  --dur-long:  420ms;

  --z-base: 1;
  --z-raised: 10;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-gate: 350;
  --z-modal: 400;
  --z-toast: 500;
  --z-tooltip: 600;
}

/* ---------- reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; scroll-behavior: smooth; scroll-snap-type: y proximity; }
body { overflow-x: clip; }
html, body { margin: 0; padding: 0; }

body {
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: 2px;
}

::selection { background: var(--color-accent); color: var(--color-accent-ink); }

.skip-link {
  position: absolute;
  left: var(--space-md);
  top: -100px;
  z-index: var(--z-tooltip);
  background: var(--color-ink);
  color: var(--color-paper);
  padding: var(--space-sm) var(--space-lg);
  border-radius: 999px;
  text-decoration: none;
  transition: top var(--dur-short) var(--ease-out);
}
.skip-link:focus-visible { top: var(--space-md); }

/* ---------- alignment · section scaffolding ---------- */
.section {
  padding: var(--space-3xl) clamp(1rem, 4vw, 1.5rem);
  scroll-margin-top: 5rem;
  scroll-snap-align: start;
}
.section__inner {
  max-width: 78rem;
  margin-inline: auto;
}
.section__head { margin-bottom: var(--space-2xl); max-width: 46rem; }
.section__label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-muted);
  margin: 0 0 var(--space-sm);
}
.section__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-2xl);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-md);
  overflow-wrap: anywhere;
  min-width: 0;
}
.section__sub {
  font-size: var(--text-md);
  color: var(--color-ink-2);
  margin: 0;
  max-width: 42rem;
}

/* ---------- nav · N5 floating pill ---------- */
.nav {
  position: fixed;
  top: var(--space-md);
  left: 0;
  right: 0;
  z-index: var(--z-sticky);
  display: flex;
  justify-content: center;
  padding-inline: var(--space-md);
  pointer-events: none;
}
.nav__pill {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  background: oklch(95% 0.02 80 / 0.82);
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  border: 1px solid var(--color-rule);
  border-radius: 999px;
  padding: var(--space-xs) var(--space-sm);
  box-shadow: 0 1px 2px oklch(20% 0.018 55 / 0.06);
  pointer-events: auto;
}
.nav__brand {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-md);
  letter-spacing: -0.01em;
  text-decoration: none;
  padding: var(--space-xs) var(--space-sm);
  border-radius: 999px;
  white-space: nowrap;
}
.nav__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-accent);
  display: inline-block;
}
.nav__brand-end { color: var(--color-accent); }
.nav__links {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 2px;
}
.nav__links a {
  display: block;
  padding: var(--space-xs) var(--space-sm);
  border-radius: 999px;
  text-decoration: none;
  font-size: var(--text-sm);
  color: var(--color-ink-2);
  white-space: nowrap;
  transition: background-color var(--dur-micro) var(--ease-out),
              color var(--dur-micro) var(--ease-out);
}
.nav__links a:hover { color: var(--color-ink); }
.nav__links a.is-active { background: var(--color-ink); color: var(--color-paper); }
.nav__cta {
  text-decoration: none;
  background: var(--color-accent);
  color: var(--color-accent-ink);
  font-size: var(--text-sm);
  font-weight: 500;
  padding: var(--space-xs) var(--space-md);
  border-radius: 999px;
  white-space: nowrap;
  transition: transform var(--dur-micro) var(--ease-out);
}
.nav__cta:hover { transform: translateY(-1px); }
.nav__cta:active { transform: translateY(0); }
.nav__toggle {
  display: none;
  background: none;
  border: 0;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.nav__toggle span {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--color-ink);
  border-radius: 2px;
  transition: transform var(--dur-short) var(--ease-in-out);
}
.nav__toggle[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:last-child  { transform: translateY(-4px) rotate(-45deg); }

/* ---------- home page video background ---------- */
.page {
  position: relative;
}
.home {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  scroll-snap-align: start;
}
.page__bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--color-dark);
}
.page__video,
.bg__frames {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.bg__frames {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--color-dark);
  animation: bg-zoom 26s var(--ease-in-out) infinite alternate;
  will-change: transform;
}
@keyframes bg-zoom {
  from { transform: scale(1.03); }
  to   { transform: scale(1.1); }
}
.bg__layer {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  z-index: 1;
  will-change: opacity, background-image;
}
.bg__layer--a { opacity: 1; }
@media (hover: none) { .page__video, .bg__frames { filter: none; } }
.page__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
    oklch(95% 0.02 80 / 0.35) 0%,
    oklch(95% 0.02 80 / 0.06) 50%,
    oklch(20% 0.018 55 / 0.28) 100%);
}

/* ---------- products · 3D carousel ---------- */
.product {
  scroll-margin-top: 0;
  min-height: 100vh;
  min-height: 100svh;
  padding-top: var(--space-3xl);
}
.product__stage {
  max-width: 100rem;
  margin-inline: auto;
  padding-inline: clamp(0.5rem, 2vw, 1.5rem);
}
.carousel {
  position: relative;
  height: clamp(340px, calc(var(--cw, 560px) * 0.625 + 170px), 820px);
  perspective: 1500px;
  perspective-origin: 50% 50%;
  overflow: hidden;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}
.carousel.is-grabbing { cursor: grabbing; }
.carousel__wheel {
  position: absolute;
  inset: 0;
}
.carousel__card {
  position: absolute;
  left: 50%;
  top: 50%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: var(--cw, clamp(420px, 52vw, 760px));
  padding: 12px 12px 24px;
  background: var(--color-paper);
  border: 1px solid var(--color-rule);
  border-radius: 30px;
  box-shadow: 0 24px 56px -20px oklch(20% 0.018 55 / 0.38);
  will-change: transform, opacity;
  cursor: pointer;
  touch-action: manipulation;
  transition: filter var(--dur-long) var(--ease-out),
              box-shadow var(--dur-long) var(--ease-out);
}
.carousel__card:focus-visible { outline-offset: 3px; }
.card__shot {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 20px;
  background: var(--color-paper-2);
}
.card__cap {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-lg) var(--space-sm) 0;
}
.card__name {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 500;
  letter-spacing: -0.01em;
}
.card__tag {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-muted);
  white-space: nowrap;
}
.carousel__card.is-far {
  filter: blur(2px) brightness(0.82) saturate(0.88);
  box-shadow: 0 8px 20px -12px oklch(20% 0.018 55 / 0.25);
}
.carousel__card.is-center {
  filter: none;
  box-shadow: 0 28px 60px -20px oklch(20% 0.018 55 / 0.45);
}
.carousel__hud {
  position: absolute;
  bottom: var(--space-md);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: var(--space-md);
  background: oklch(95% 0.02 80 / 0.78);
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  border: 1px solid var(--color-rule);
  border-radius: 999px;
  padding: var(--space-2xs);
  pointer-events: auto;
}
.carousel__progress {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  color: var(--color-ink-2);
  min-width: 4.5ch;
  text-align: center;
}
.carousel__btn {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid var(--color-rule-2);
  background: var(--color-paper);
  color: var(--color-ink);
  font-size: var(--text-base);
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--dur-micro) var(--ease-out),
              border-color var(--dur-micro) var(--ease-out),
              transform var(--dur-micro) var(--ease-out);
}
.carousel__btn:hover { border-color: var(--color-ink); }
.carousel__btn:active { transform: translateY(1px); }
.carousel__hint {
  position: absolute;
  bottom: var(--space-xs);
  left: 0;
  right: 0;
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-muted);
  margin: 0;
  pointer-events: none;
}
.product__note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  max-width: 46rem;
  margin: var(--space-lg) auto 0;
  padding: 0 clamp(1rem, 4vw, 1.5rem);
}
.product__note-mark {
  color: var(--color-accent);
  font-size: var(--text-base);
  line-height: 1;
}
.product__note-text {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-md);
  color: var(--color-ink-2);
  text-align: center;
  letter-spacing: 0.01em;
}
@media (max-width: 40rem) {
  .carousel__hint { display: none; }
  .carousel__card { padding: 8px 8px 16px; border-radius: 20px; }
  .card__cap { padding: var(--space-md) var(--space-xs) 0; }
  .card__name { font-size: var(--text-xl); }
  .card__shot { border-radius: 14px; }
}
@media (hover: none) { .page__video { filter: none; } }

/* ---------- fullscreen viewer ---------- */
.viewer {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  visibility: hidden;
  opacity: 0;
  transition: opacity var(--dur-long) var(--ease-out),
              visibility 0s linear var(--dur-long);
}
.viewer.is-open { visibility: visible; opacity: 1; transition-delay: 0s; }
.viewer.is-closing { opacity: 0; }
.viewer__backdrop {
  position: absolute;
  inset: 0;
  background: oklch(16% 0.016 55 / 0.82);
  backdrop-filter: blur(14px) saturate(0.9);
  -webkit-backdrop-filter: blur(14px) saturate(0.9);
}
.viewer__panel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
}
.viewer__frame {
  position: absolute;
  inset: 0;
  overflow: hidden;
  display: grid;
  place-items: center;
  touch-action: none;
}
.viewer__img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  border-radius: 0;
  background: var(--color-paper);
  transform: translate(0, 0) scale(1);
  transform-origin: 50% 50%;
  cursor: zoom-in;
  user-select: none;
  -webkit-user-select: none;
}
.viewer__img.is-zoomed { cursor: grab; }
.viewer__meta {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-2xl) clamp(1rem, 3vw, 2rem) var(--space-lg);
  color: var(--color-dark-ink);
  background: linear-gradient(to top,
    oklch(16% 0.016 55 / 0.88),
    oklch(16% 0.016 55 / 0.3) 55%,
    transparent);
  pointer-events: none;
}
.viewer__caption {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  min-width: 0;
}
.viewer__index {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  color: oklch(92% 0.014 75 / 0.55);
}
.viewer__name {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.viewer__controls {
  display: flex;
  gap: var(--space-2xs);
  flex-shrink: 0;
  pointer-events: auto;
}
.viewer__btn {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid oklch(92% 0.014 75 / 0.25);
  background: oklch(92% 0.014 75 / 0.08);
  color: var(--color-dark-ink);
  font-size: var(--text-md);
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--dur-micro) var(--ease-out),
              border-color var(--dur-micro) var(--ease-out),
              transform var(--dur-micro) var(--ease-out);
}
.viewer__btn:hover { background: oklch(92% 0.014 75 / 0.16); border-color: oklch(92% 0.014 75 / 0.5); }
.viewer__btn:active { transform: translateY(1px); }

/* ---------- services · paper-fold card grid (one transition) ----------
   Hallmark · component: service cards · genre: editorial · theme: atelier-preserved
   states: default · hover · focus-visible · active · open · reduced-motion
   contrast: pass · pre-emit critique: P5 H4 E4 S5 R4 V5 */
.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
  width: min(72rem, 100%);
  margin-inline: auto;
  margin-top: var(--space-xl);
}
.scard {
  position: relative;
  height: 23rem;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  perspective: 1400px;
}
.scard:focus-visible {
  outline: none;
  border-radius: 20px;
  box-shadow: 0 0 0 2px var(--color-paper), 0 0 0 4px var(--color-focus);
}
.scard__front,
.scard__back {
  position: absolute;
  inset: 0;
  border-radius: 20px;
  overflow: hidden;
  background: var(--color-paper-2);
  border: 1px solid var(--color-rule-2);
  box-shadow: 0 20px 40px -24px oklch(20% 0.018 55 / 0.4);
}
.scard__front { z-index: 2; }
.scard__back {
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--space-lg);
}
.scard__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.scard__front::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    oklch(20% 0.018 55 / 0.85),
    oklch(20% 0.018 55 / 0.28) 45%,
    oklch(20% 0.018 55 / 0.12));
}
.scard__num {
  position: absolute;
  top: var(--space-sm);
  left: var(--space-sm);
  z-index: 1;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  color: var(--color-accent-ink);
  background: oklch(22% 0.018 55 / 0.5);
  border: 1px solid oklch(92% 0.014 75 / 0.25);
  border-radius: 999px;
  padding: var(--space-2xs) var(--space-sm);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.scard__hint {
  position: absolute;
  top: var(--space-sm);
  right: var(--space-sm);
  z-index: 1;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--color-dark-ink);
  opacity: 0.85;
}
.scard__title {
  position: absolute;
  left: var(--space-md);
  right: var(--space-md);
  bottom: var(--space-md);
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}
.scard__name {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-lg);
  line-height: 1.1;
  color: var(--color-accent-ink);
}
.scard__tag {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--color-accent-ink);
  opacity: 0.85;
}
.scard__back .scard__tag { color: var(--color-accent); opacity: 1; }
.scard__back .scard__name {
  color: var(--color-ink);
  font-size: var(--text-md);
  margin-top: var(--space-2xs);
}
.scard__specs-label {
  margin: var(--space-md) 0 var(--space-2xs);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--color-muted);
}
.scard__specs {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}
.scard__specs li {
  position: relative;
  padding-left: 1.2em;
  font-size: var(--text-sm);
  line-height: 1.45;
  color: var(--color-ink-2);
}
.scard__specs li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  font-size: var(--text-xs);
  color: var(--color-accent);
}
.scard__notes {
  margin-top: auto;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-accent-ink);
  background: var(--color-accent);
  border: 0;
  border-radius: 999px;
  padding: var(--space-sm) var(--space-lg);
  cursor: pointer;
  transition: transform var(--dur-micro) var(--ease-out),
              box-shadow var(--dur-micro) var(--ease-out);
}
.scard__notes:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -14px oklch(58% 0.16 55 / 0.6);
}

/* ---------- card transition · soft paper fold (every card) ---------- */
.scard__front {
  transform-origin: 50% 0% 0;
  transition: transform 0.95s var(--ease-in-out);
}
.scard:hover .scard__front,
.scard.is-open .scard__front { transform: rotateX(97deg); }

/* reduced motion · the fold degrades to a clean fade */
@media (prefers-reduced-motion: reduce) {
  .scard__front,
  .scard__back,
  .scard__img {
    transition: opacity 0.3s ease !important;
    transform: none !important;
  }
  .scard:hover .scard__front,
  .scard.is-open .scard__front { opacity: 0; }
  .scard:hover .scard__back,
  .scard.is-open .scard__back { opacity: 1; }
}

/* ---------- service motifs · live demonstrations ---------- */
.motif {
  position: relative;
  width: 130px;
  height: 90px;
}
.motif * { position: absolute; }

/* AI solutions · neural core */
.motif--ai .core {
  left: 50%;
  top: 50%;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 18px oklch(58% 0.16 55 / 0.9);
}
.motif--ai .ring {
  left: 50%;
  top: 50%;
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border-radius: 50%;
  border: 1px solid oklch(58% 0.16 55 / 0.6);
  animation: ring-out 2.6s var(--ease-in-out) infinite;
}
.motif--ai .ring:nth-child(3) { animation-delay: 0.9s; }
.motif--ai .ring:nth-child(4) { animation-delay: 1.8s; }
@keyframes ring-out {
  0% { transform: scale(0.4); opacity: 1; }
  100% { transform: scale(3.2); opacity: 0; }
}

/* AI automation · workflow pipeline */
.motif--auto .node {
  top: 50%;
  width: 18px;
  height: 18px;
  margin-top: -9px;
  border-radius: 5px;
  background: oklch(92% 0.014 75 / 0.14);
  border: 1px solid oklch(92% 0.014 75 / 0.35);
}
.motif--auto .node:nth-child(1) { left: 0; }
.motif--auto .node:nth-child(2) { left: 38px; }
.motif--auto .node:nth-child(3) { left: 76px; }
.motif--auto .node:nth-child(4) { left: 114px; }
.motif--auto .node.is-lit { background: oklch(58% 0.16 55 / 0.4); border-color: var(--color-accent); }
.motif--auto .flow {
  left: 0;
  top: 50%;
  width: 10px;
  height: 10px;
  margin-top: -5px;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 12px oklch(58% 0.16 55 / 0.8);
  animation: flow-x 3s var(--ease-in-out) infinite;
}
@keyframes flow-x {
  0% { left: 2px; opacity: 0; }
  12% { opacity: 1; }
  88% { opacity: 1; }
  100% { left: 118px; opacity: 0; }
}

/* AI chatbots · conversation */
.motif--chat .bubble {
  left: 0;
  width: 84px;
  height: 22px;
  border-radius: 10px;
  background: oklch(92% 0.014 75 / 0.12);
  border: 1px solid oklch(92% 0.014 75 / 0.3);
  animation: bubble-in 3s var(--ease-in-out) infinite;
}
.motif--chat .bubble.is-user {
  left: auto;
  right: 0;
  border-color: oklch(58% 0.16 55 / 0.5);
  background: oklch(58% 0.16 55 / 0.2);
  animation-delay: 1.2s;
}
.motif--chat .bubble:nth-child(1) { top: 4px; }
.motif--chat .bubble:nth-child(2) { top: 38px; }
.motif--chat .bubble:nth-child(3) { top: 72px; }
@keyframes bubble-in {
  0% { transform: scale(0.8); opacity: 0.4; }
  15% { transform: scale(1); opacity: 1; }
  85% { transform: scale(1); opacity: 1; }
  100% { transform: scale(0.9); opacity: 0.4; }
}

/* web applications · browser build */
.motif--web .win {
  left: 6px;
  top: 8px;
  right: 6px;
  height: 16px;
  border-radius: 6px;
  background: oklch(92% 0.014 75 / 0.1);
  border: 1px solid oklch(92% 0.014 75 / 0.25);
}
.motif--web .win::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 4px;
  width: 34px;
  height: 6px;
  border-radius: 3px;
  background: oklch(92% 0.014 75 / 0.25);
}
.motif--web .shade {
  left: 6px;
  height: 7px;
  border-radius: 4px;
  background: oklch(92% 0.014 75 / 0.22);
}
.motif--web .shade:nth-of-type(2) { top: 38px; width: 66px; }
.motif--web .shade:nth-of-type(3) { top: 52px; width: 94px; }
.motif--web .shade:nth-of-type(4) { top: 66px; width: 78px; }
.motif--web .bar {
  left: 6px;
  top: 78px;
  width: 118px;
  height: 4px;
  border-radius: 3px;
  background: oklch(58% 0.16 55 / 0.2);
  overflow: hidden;
}
.motif--web .bar::after {
  content: "";
  position: absolute;
  left: -30px;
  top: 0;
  width: 30px;
  height: 100%;
  border-radius: inherit;
  background: var(--color-accent);
  animation: load-bar 2.2s var(--ease-in-out) infinite;
}
@keyframes load-bar {
  0% { left: -30px; }
  60% { left: 118px; }
  100% { left: 118px; }
}

/* custom software · code lines */
.motif--code .line {
  left: 4px;
  height: 5px;
  border-radius: 3px;
  background: oklch(92% 0.014 75 / 0.3);
  animation: code-fade 2.4s var(--ease-in-out) infinite;
}
.motif--code .line:nth-child(1) { top: 8px; width: 70px; }
.motif--code .line:nth-child(2) { top: 26px; width: 96px; animation-delay: 0.3s; }
.motif--code .line:nth-child(3) { top: 44px; width: 84px; animation-delay: 0.6s; }
.motif--code .line:nth-child(4) { top: 62px; width: 58px; animation-delay: 0.9s; }
.motif--code .cursor {
  left: 4px;
  top: 60px;
  width: 8px;
  height: 9px;
  border-radius: 2px;
  background: var(--color-accent);
  animation: cursor-hop 2.4s var(--ease-in-out) infinite;
}
@keyframes cursor-hop {
  0%, 30% { left: 4px; top: 60px; }
  35%, 65% { left: 4px; top: 42px; }
  70%, 100% { left: 4px; top: 24px; }
}
@keyframes code-fade { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }

/* SEO growth · rising bars */
.motif--seo .bar {
  bottom: 0;
  width: 16px;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(to top, oklch(58% 0.16 55 / 0.2), oklch(58% 0.16 55 / 0.75));
  animation: seo-grow 3s var(--ease-in-out) infinite;
  transform-origin: bottom;
}
.motif--seo .bar:nth-child(1) { left: 14px; height: 30px; }
.motif--seo .bar:nth-child(2) { left: 44px; height: 46px; animation-delay: 0.4s; }
.motif--seo .bar:nth-child(3) { left: 74px; height: 62px; animation-delay: 0.8s; }
.motif--seo .bar:nth-child(4) { left: 104px; height: 78px; animation-delay: 1.2s; }
@keyframes seo-grow {
  0% { transform: scaleY(0.3); opacity: 0.5; }
  35% { transform: scaleY(1); opacity: 1; }
  80%, 100% { transform: scaleY(1); opacity: 1; }
}

/* cloud solutions · stacked layers */
.motif--cloud .layer {
  left: 12px;
  right: 12px;
  height: 16px;
  border-radius: 8px;
  background: oklch(92% 0.014 75 / 0.12);
  border: 1px solid oklch(92% 0.014 75 / 0.28);
  animation: cloud-drift 4s var(--ease-in-out) infinite;
}
.motif--cloud .layer:nth-child(1) { top: 6px; width: 60px; left: 35px; }
.motif--cloud .layer:nth-child(2) { top: 34px; width: 100px; left: 15px; animation-delay: 0.6s; }
.motif--cloud .layer:nth-child(3) { top: 62px; animation-delay: 1.2s; }
@keyframes cloud-drift {
  0%, 100% { transform: translateX(-3px); }
  50% { transform: translateX(3px); }
}

/* UI/UX · wireframe */
.motif--ux .frame {
  left: 6px;
  top: 6px;
  right: 6px;
  bottom: 6px;
  border-radius: 8px;
  border: 1px solid oklch(92% 0.014 75 / 0.4);
}
.motif--ux .grid {
  left: 14px;
  height: 6px;
  border-radius: 3px;
  background: oklch(92% 0.014 75 / 0.3);
}
.motif--ux .grid:nth-of-type(2) { top: 22px; width: 50px; }
.motif--ux .grid:nth-of-type(3) { top: 40px; width: 80px; }
.motif--ux .grid:nth-of-type(4) { top: 58px; width: 68px; }
.motif--ux .grid:nth-of-type(5) { top: 76px; width: 90px; }
.motif--ux .cursor {
  left: 6px;
  top: 10px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 10px oklch(58% 0.16 55 / 0.9);
  animation: ux-drive 4s var(--ease-in-out) infinite;
}
@keyframes ux-drive {
  0%, 8% { left: 8px; top: 10px; }
  25% { left: 58px; top: 40px; }
  42% { left: 30px; top: 58px; }
  58% { left: 70px; top: 76px; }
  75% { left: 100px; top: 34px; }
  100% { left: 8px; top: 10px; }
}

/* mobile apps · phone screen */
.motif--mobile .phone {
  left: 50%;
  top: 6px;
  width: 42px;
  height: 70px;
  margin-left: -21px;
  border-radius: 8px;
  border: 1px solid oklch(92% 0.014 75 / 0.4);
  background: oklch(92% 0.014 75 / 0.1);
  animation: phone-bob 4.5s var(--ease-in-out) infinite;
}
.motif--mobile .phone::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 10px;
  width: 16px;
  height: 3px;
  margin-left: -8px;
  border-radius: 2px;
  background: oklch(58% 0.16 55 / 0.9);
  box-shadow: 0 0 8px oklch(58% 0.16 55 / 0.6);
}
.motif--mobile .line {
  left: 50%;
  width: 26px;
  height: 4px;
  margin-left: -13px;
  border-radius: 2px;
  background: oklch(92% 0.014 75 / 0.3);
}
.motif--mobile .line:nth-child(2) { top: 26px; }
.motif--mobile .line:nth-child(3) { top: 36px; width: 18px; margin-left: -9px; }
.motif--mobile .line:nth-child(4) { top: 46px; }
@keyframes phone-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

/* e-commerce · shopping bag */
.motif--shop .bag {
  left: 50%;
  top: 26px;
  width: 48px;
  height: 42px;
  margin-left: -24px;
  border-radius: 6px 6px 14px 14px;
  border: 1px solid oklch(92% 0.014 75 / 0.4);
  background: oklch(92% 0.014 75 / 0.1);
}
.motif--shop .bag::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -14px;
  width: 22px;
  height: 16px;
  margin-left: -11px;
  border: 1px solid oklch(58% 0.16 55 / 0.85);
  border-bottom: 0;
  border-radius: 14px 14px 0 0;
}
.motif--shop .label {
  left: 50%;
  top: 42px;
  width: 9px;
  height: 9px;
  margin-left: -4.5px;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 12px oklch(58% 0.16 55 / 0.9);
  animation: price-pulse 2.2s var(--ease-in-out) infinite;
}
@keyframes price-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* social media & marketing · post card */
.motif--social .avatar {
  left: 8px;
  top: 8px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: oklch(58% 0.16 55 / 0.25);
  border: 1px solid oklch(58% 0.16 55 / 0.65);
}
.motif--social .dot {
  left: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: oklch(92% 0.014 75 / 0.45);
  animation: dot-pop 3s var(--ease-in-out) infinite;
}
.motif--social .dot:nth-child(2) { top: 46px; }
.motif--social .dot:nth-child(3) { top: 66px; animation-delay: 0.4s; }
.motif--social .bar {
  left: 26px;
  height: 6px;
  border-radius: 3px;
  background: oklch(92% 0.014 75 / 0.3);
}
.motif--social .bar:nth-child(4) { top: 47px; width: 72px; }
.motif--social .bar:nth-child(5) { top: 67px; width: 56px; }
@keyframes dot-pop {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.45); }
}

/* support & maintenance · shield check */
.motif--care .shield {
  left: 50%;
  top: 8px;
  width: 46px;
  height: 54px;
  margin-left: -23px;
  background: oklch(92% 0.014 75 / 0.14);
  clip-path: polygon(50% 0%, 100% 22%, 100% 66%, 50% 100%, 0% 66%, 0% 22%);
  filter: drop-shadow(0 0 1px oklch(92% 0.014 75 / 0.4));
  animation: shield-pulse 3.4s var(--ease-in-out) infinite;
}
.motif--care .tick {
  left: 50%;
  top: 20px;
  width: 15px;
  height: 26px;
  margin-left: -11px;
  border-right: 3px solid var(--color-accent);
  border-bottom: 3px solid var(--color-accent);
  border-radius: 2px;
  transform: rotate(45deg);
  box-shadow: 0 0 12px oklch(58% 0.16 55 / 0.7);
}
@keyframes shield-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.65; }
}

/* ---------- service experiment · fullscreen expansion ---------- */
.labmodal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  place-items: center;
  padding: clamp(0.75rem, 3vw, 2rem);
  visibility: hidden;
  opacity: 0;
  transition: opacity var(--dur-long) var(--ease-out),
              visibility var(--dur-long);
}
.labmodal.is-open { visibility: visible; opacity: 1; }
.labmodal.is-closing { opacity: 0; }
.labmodal__backdrop {
  position: absolute;
  inset: 0;
  background: oklch(20% 0.018 55 / 0.55);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.labmodal__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(72rem, 100%);
  max-height: min(90vh, 58rem);
  overflow: hidden;
  border-radius: 22px;
  background: var(--color-paper);
  border: 1px solid var(--color-rule-2);
  box-shadow: 0 40px 90px -30px oklch(20% 0.018 55 / 0.6);
  transform: translateY(24px) scale(0.97);
  transition: transform var(--dur-long) var(--ease-out);
}
.labmodal.is-open .labmodal__panel { transform: translateY(0) scale(1); }
.labmodal__visual {
  flex: 0 0 auto;
  height: clamp(180px, 22vh, 260px);
  background: var(--color-dark);
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
}
.labmodal__visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 18% 30%, oklch(58% 0.16 55 / 0.28), transparent 46%),
    radial-gradient(circle at 85% 85%, oklch(58% 0.16 55 / 0.18), transparent 42%);
}
.labmodal__visual .motif { width: 210px; height: 140px; z-index: 1; }
.labmodal__num {
  position: absolute;
  top: var(--space-md);
  left: var(--space-lg);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: oklch(92% 0.014 75 / 0.6);
  z-index: 2;
}
.labmodal__name {
  position: absolute;
  bottom: var(--space-md);
  left: var(--space-lg);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-xl);
  letter-spacing: -0.01em;
  color: var(--color-dark-ink);
  z-index: 2;
}
.labmodal__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: var(--space-xl);
  display: grid;
  gap: var(--space-lg);
}
.labmodal__head { border-bottom: 1px solid var(--color-rule); padding-bottom: var(--space-md); }
.labmodal__tag {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-accent);
  margin: 0 0 var(--space-xs);
}
.labmodal__blurb {
  font-family: var(--font-display);
  font-size: var(--text-md);
  line-height: 1.45;
  margin: 0;
}
.labmodal__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
}
.labmodal__block h4 {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-muted);
  margin: 0 0 var(--space-sm);
}
.labmodal__block p {
  font-size: var(--text-sm);
  color: var(--color-ink-2);
  margin: 0 0 var(--space-sm);
  line-height: 1.7;
}
.labmodal__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-sm);
}
.labmodal__list li {
  display: flex;
  gap: var(--space-sm);
  align-items: flex-start;
  font-size: var(--text-sm);
}
.labmodal__list li::before {
  content: "✓";
  color: var(--color-accent);
  font-family: var(--font-mono);
  font-weight: 500;
  line-height: 1.5;
}
.labmodal__tech {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}
.labmodal__chip {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  color: var(--color-ink);
  background: var(--color-paper-2);
  border: 1px solid var(--color-rule-2);
  border-radius: 999px;
  padding: var(--space-2xs) var(--space-sm);
}
.labmodal__cta {
  justify-self: start;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-decoration: none;
  color: var(--color-accent-ink);
  background: var(--color-accent);
  border-radius: 999px;
  padding: var(--space-sm) var(--space-xl);
  transition: transform var(--dur-micro) var(--ease-out),
              box-shadow var(--dur-micro) var(--ease-out);
}
.labmodal__cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -14px oklch(58% 0.16 55 / 0.6);
}
.labmodal__controls {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  display: flex;
  gap: var(--space-2xs);
  z-index: 3;
}
.labmodal__btn {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid oklch(92% 0.014 75 / 0.35);
  background: oklch(22% 0.018 55 / 0.55);
  color: var(--color-dark-ink);
  font-size: var(--text-sm);
  line-height: 1;
  cursor: pointer;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: background-color var(--dur-micro) var(--ease-out),
              border-color var(--dur-micro) var(--ease-out);
}
.labmodal__btn:hover { border-color: var(--color-accent); color: var(--color-accent); }

@media (max-width: 60rem) {
  .cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 40rem) {
  .cards { grid-template-columns: 1fr; gap: var(--space-md); margin-top: var(--space-lg); }
  .scard { height: 24rem; }
  .labmodal__cols { grid-template-columns: 1fr; gap: var(--space-lg); }
  .labmodal__body { padding: var(--space-lg); }
  .labmodal__name { font-size: var(--text-md); }
}
@media (max-height: 30rem) {
  .labmodal__visual { height: 7rem; }
  .labmodal__body { padding: var(--space-lg); }
}

/* ---------- responsive base ---------- */
@media (max-width: 40rem) {
  .viewer__meta { flex-wrap: wrap; row-gap: var(--space-xs); }
  .viewer__name { font-size: var(--text-base); }
  .viewer__controls { gap: 2px; }
  .viewer__btn { width: 36px; height: 36px; }
  .section { padding-block: var(--space-2xl); }
  .section__title { font-size: var(--text-xl); }
}

@media (max-width: 60rem) {
  /* nav collapses into dropdown */
  .nav__links {
    position: fixed;
    top: calc(var(--space-md) + 58px);
    right: var(--space-md);
    flex-direction: column;
    background: var(--color-paper);
    border: 1px solid var(--color-rule);
    border-radius: 16px;
    padding: var(--space-sm);
    gap: var(--space-2xs);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity var(--dur-short) var(--ease-out),
                transform var(--dur-short) var(--ease-out),
                visibility 0s linear var(--dur-short);
  }
  .nav__links.is-open {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
  }
  .nav__links a { font-size: var(--text-base); padding: var(--space-sm) var(--space-lg); }
  .nav__cta { display: none; }
  .nav__toggle { display: flex; }
}

/* ---------- reduced motion base ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 150ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 150ms !important;
  }
  html { scroll-behavior: auto; }
  .page__video { display: none; }
}

/* ============================================================
   Process · connected map of 3D flip cards
   journey: idea → launch → growth · editorial · theme: atelier-preserved
   states: default · hover · focus-visible · flipped · reduced-motion
   ============================================================ */
.flow {
  position: relative;
  max-width: 78rem;
  margin-inline: auto;
  margin-top: var(--space-xl);
  padding: var(--space-xl) 0 var(--space-2xl);
}
.flow__connectors {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}
.flow__spine {
  stroke: var(--color-rule-2);
  stroke-width: 1.5;
  fill: none;
  stroke-dasharray: 2 6;
}
.flow__link {
  stroke: var(--color-accent);
  stroke-width: 1.5;
  fill: none;
  opacity: 0.85;
}
.flow__dot {
  fill: var(--color-paper);
  stroke: var(--color-accent);
  stroke-width: 2;
  opacity: 0.45;
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity 0.3s var(--ease-out), fill 0.3s var(--ease-out), transform 0.35s var(--ease-out);
}
.flow__dot.is-active {
  opacity: 1;
  fill: var(--color-accent);
  transform: scale(1.6);
}
.flow__node { fill: none; stroke: var(--color-accent); stroke-width: 2; }
.flow__node--end { fill: var(--color-accent); stroke: none; }

.flow__list {
  position: relative;
  z-index: 1;
}

.frow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(2.5rem, 8vw, 6rem);
  margin-bottom: var(--space-2xl);
  perspective: 1600px;
}
.frow:last-child { margin-bottom: 0; }

.fcard {
  position: relative;
  height: 23rem;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform 0.95s var(--ease-in-out);
}
.fcard.is-flipped { transform: rotateY(180deg); }
.fcard.is-flipping .fcard__front {
  box-shadow: 0 34px 56px -30px oklch(20% 0.018 55 / 0.55);
}
.fcard:focus-visible {
  outline: none;
  border-radius: 20px;
  box-shadow: 0 0 0 2px var(--color-paper), 0 0 0 4px var(--color-focus);
}

.fcard__front,
.fcard__back {
  position: absolute;
  inset: 0;
  border-radius: 20px;
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  background: var(--color-paper-2);
  border: 1px solid var(--color-rule-2);
  box-shadow: 0 20px 40px -24px oklch(20% 0.018 55 / 0.4);
  transition: box-shadow var(--dur-long) var(--ease-out);
}
.fcard__back { transform: rotateY(180deg); }

.fcard__front {
  display: flex;
  flex-direction: column;
  padding: var(--space-lg);
  background:
    radial-gradient(120% 100% at 100% 0%, oklch(92% 0.022 80 / 0.8), transparent 55%),
    var(--color-paper-2);
}
.fcard__front::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 42%, oklch(95% 0.02 80 / 0.6) 50%, transparent 58%);
  opacity: 0;
  transition: opacity var(--dur-long) var(--ease-out);
}
.fcard.is-flipping .fcard__front::after { opacity: 1; }

/* front image layer · full-bleed photo with legibility scrim */
.fcard__front--img { background: var(--color-dark); }
.fcard__img {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.fcard__img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, oklch(18% 0.012 55 / 0.42) 0%, oklch(18% 0.012 55 / 0.26) 45%, oklch(18% 0.012 55 / 0.88) 100%);
}
.fcard__front--img .fcard__num { z-index: 1; opacity: 0.5; }
.fcard__front--img .fcard__phase {
  position: relative;
  z-index: 1;
  color: oklch(93% 0.014 75 / 0.94);
  border-color: oklch(93% 0.014 75 / 0.28);
  background: oklch(16% 0.015 55 / 0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.fcard__front--img .fcard__body { position: relative; z-index: 1; }
.fcard__front--img .fcard__title { color: var(--color-dark-ink); }
.fcard__front--img .fcard__sub { color: oklch(93% 0.014 75 / 0.78); }
.fcard__front--img .fcard__hint {
  position: relative;
  z-index: 1;
  color: oklch(93% 0.014 75 / 0.62);
}

.fcard__back::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 42%, oklch(95% 0.02 80 / 0.55) 50%, transparent 58%);
  opacity: 0;
  transition: opacity var(--dur-long) var(--ease-out);
}
.fcard.is-flipping .fcard__back::after { opacity: 1; }

.fcard__num {
  position: absolute;
  top: 0.25rem;
  right: var(--space-md);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 5rem;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--color-accent);
  opacity: 0.16;
  pointer-events: none;
}
.fcard__phase {
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-accent);
  border: 1px solid var(--color-rule-2);
  background: var(--color-paper);
  border-radius: 999px;
  padding: var(--space-2xs) var(--space-sm);
}
.fcard__body { margin-top: auto; max-width: 24rem; }
.fcard__title {
  margin: 0 0 var(--space-2xs);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-lg);
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--color-ink);
}
.fcard__sub {
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--color-ink-2);
}
.fcard__hint {
  margin-top: var(--space-md);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--color-muted);
  transition: color var(--dur-short) var(--ease-out);
}
.fcard:hover .fcard__hint,
.fcard:focus-visible .fcard__hint { color: var(--color-accent); }

.fcard--right { grid-column: 2; }

.fcard__back {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 1.15rem;
  overflow: hidden;
}
.fcard__back-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.125rem;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--color-ink);
}
.fcard__detail {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--color-ink-2);
}
.fgroup__label {
  margin: 0.15rem 0 0.2rem;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-accent);
}
.fgroup__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.fgroup__list li {
  position: relative;
  padding-left: 1.2em;
  font-size: 0.8rem;
  line-height: 1.35;
  color: var(--color-ink-2);
}
.fgroup__list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  font-size: var(--text-xs);
  color: var(--color-accent);
}
.fcard__outcome {
  margin-top: auto;
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-accent-ink);
  background: var(--color-accent);
  border-radius: 999px;
  padding: 0.2rem 0.7rem;
}

/* final · grow with us */
.fcard--final .fcard__front {
  background:
    radial-gradient(120% 120% at 100% 0%, oklch(34% 0.12 55 / 0.55), transparent 55%),
    var(--color-dark);
  border-color: var(--color-dark-2);
}
.fcard--final .fcard__title { color: var(--color-dark-ink); }
.fcard--final .fcard__sub { color: oklch(92% 0.014 75 / 0.72); }
.fcard--final .fcard__phase {
  color: var(--color-accent-ink);
  border-color: oklch(92% 0.014 75 / 0.3);
  background: oklch(92% 0.014 75 / 0.08);
}
.fcard--final .fcard__num { color: var(--color-accent); opacity: 0.22; }
.fcard--final .fcard__hint { color: oklch(92% 0.014 75 / 0.55); }
.fcard--final .fcard__hint:hover { color: var(--color-accent); }

/* GSAP present → inline transform drives the flip, no CSS transition fight */
.flow.js-flip .fcard { transition: box-shadow var(--dur-long) var(--ease-out); }

/* client avatar · scroll-driven pilot that follows the flow line */
.flow__pilot {
  --pilot-size: 3rem;
  position: absolute;
  top: 0;
  left: 0;
  width: var(--pilot-size);
  height: var(--pilot-size);
  margin: calc(var(--pilot-size) / -2) 0 0 calc(var(--pilot-size) / -2);
  z-index: 3;
  will-change: transform;
  pointer-events: none;
}
.flow__pilot-avatar {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--color-paper);
  box-shadow:
    0 0 0 1px var(--color-accent),
    0 10px 22px -8px oklch(20% 0.018 55 / 0.55);
}
.flow__pilot::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid var(--color-accent);
  opacity: 0;
  animation: pilot-ping 2.4s var(--ease-out) infinite;
}
@keyframes pilot-ping {
  0% { transform: scale(0.75); opacity: 0.7; }
  70% { transform: scale(1.25); opacity: 0; }
  100% { opacity: 0; }
}

/* ---------- process · responsive ---------- */
@media (max-width: 60rem) {
  .fcard { height: 23rem; }
}
@media (max-width: 40rem) {
  .flow { padding-top: var(--space-lg); }
  .frow {
    grid-template-columns: 1fr;
    padding-left: 3.25rem;
    column-gap: 0;
    margin-bottom: var(--space-lg);
  }
  .fcard--right { grid-column: 1; }
  .fcard { height: 22rem; }
  .flow__pilot { --pilot-size: 2.5rem; }
}

/* ---------- process · reduced motion: flip degrades to a fade ---------- */
@media (prefers-reduced-motion: reduce) {
  .fcard, .flow.js-flip .fcard { transition: none !important; }
  .fcard__front, .fcard__back {
    backface-visibility: visible !important;
    -webkit-backface-visibility: visible !important;
    transition: opacity 0.3s ease !important;
    transform: none !important;
  }
  .fcard.is-flipped .fcard__front { opacity: 0; }
  .fcard.is-flipped .fcard__back { opacity: 1; }
  .flow__pilot { display: none; }
}

/* ============================================================
   Blog · standalone page (blog.html)
   editorial · theme: atelier-preserved
   ============================================================ */
.blog-page {
  padding-top: calc(var(--space-3xl) + 4rem);
}
.blog-hero {
  max-width: 78rem;
  margin-inline: auto;
  padding: var(--space-2xl) clamp(1rem, 4vw, 1.5rem);
}
.blog-hero__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-display);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-md);
}
.blog-hero__sub {
  max-width: 42rem;
  margin: 0;
  font-size: var(--text-md);
  color: var(--color-ink-2);
}
.blog-grid {
  max-width: 78rem;
  margin-inline: auto;
  padding: var(--space-lg) clamp(1rem, 4vw, 1.5rem) var(--space-4xl);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg);
}
.bcard {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  background: var(--color-paper-2);
  border: 1px solid var(--color-rule-2);
  border-radius: 22px;
  padding: var(--space-lg);
  scroll-margin-top: 7rem;
  transition: transform var(--dur-short) var(--ease-out),
              box-shadow var(--dur-short) var(--ease-out),
              border-color var(--dur-short) var(--ease-out);
}
.bcard:target {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px oklch(58% 0.16 55 / 0.25);
}
.bcard:hover {
  transform: translateY(-4px);
  border-color: var(--color-rule);
  box-shadow: 0 22px 44px -26px oklch(20% 0.018 55 / 0.45);
}
.bcard--featured {
  grid-column: 1 / -1;
  background:
    radial-gradient(120% 120% at 100% 0%, oklch(58% 0.16 55 / 0.12), transparent 55%),
    var(--color-paper-2);
}
.bcard__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
}
.bcard__cat,
.bcard__read {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-accent);
}
.bcard__date {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-muted);
}
.bcard__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-lg);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0;
}
.bcard--featured .bcard__title { font-size: var(--text-2xl); }
.bcard__excerpt {
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.65;
  color: var(--color-ink-2);
}
.bcard__more {
  margin-top: auto;
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  text-decoration: none;
  color: var(--color-ink);
  border-bottom: 1px solid var(--color-rule-2);
  padding-bottom: var(--space-2xs);
  transition: color var(--dur-micro) var(--ease-out),
              border-color var(--dur-micro) var(--ease-out);
}
.bcard__more:hover { color: var(--color-accent); border-color: var(--color-accent); }

@media (max-width: 50rem) {
  .blog-grid { grid-template-columns: 1fr; }
  .bcard--featured { grid-column: 1; }
  .bcard--featured .bcard__title { font-size: var(--text-lg); }
}
@media (max-width: 40rem) {
  .blog-page { padding-top: calc(var(--space-2xl) + 4rem); }
  .blog-grid { padding-bottom: var(--space-3xl); }
}