/* ============================================================
 * Yui Yu Portfolio — Main styles
 * Consensys-inspired: dark canvas, sticky scrub, marquee, big stat type
 * ============================================================ */
@import url("design-system/colors_and_type.css?v=20261105r");

/* ---- Theme overrides (Tweaks) — default from DESIGN.md ---- */
:root {
  --accent: #4ade80;
  --accent-hover: #22c55e;
  --accent-soft: rgba(74, 222, 128, 0.14);
  --border-accent: rgba(74, 222, 128, 0.4);
  --fg-on-accent: #0a0a0a;
}

/* Dark theme override */
[data-theme="dark"] {
  --bg: #0a0a0a;
  --bg-elev-1: #191919;
  --bg-elev-2: #1a1c20;
  --bg-elev-3: #363a3f;
  --fg: #dadbdf;
  --fg-2: #7d8187;
  --fg-3: #7d8187;
  --fg-4: rgba(125, 129, 135, 0.48);
  --fg-on-accent: #0a0a0a;
  --border: #212327;
  --border-strong: #363a3f;
  --glass-bg: rgba(26, 28, 32, 0.72);
  --glass-border: #212327;
}

[data-accent="lime"] {
  --accent: #c1ff14;
  --accent-hover: #d5ff4a;
  --accent-soft: rgba(193, 255, 20, 0.16);
  --border-accent: rgba(193, 255, 20, 0.48);
  --fg-on-accent: #0e0e10;
}

[data-accent="lime"] .pill-nav__cta,
[data-accent="lime"] .btn--primary,
[data-accent="lime"] .stack-marker,
[data-accent="lime"] .stat-num {
  color: var(--fg-on-accent);
}

[data-accent="lime"] .pill-nav__cta {
  color: #0e0e10;
}

[data-accent="lime"] .btn--primary {
  color: #0e0e10;
}

[data-accent="amber"] {
  --accent: #ff9e3d;
  --accent-hover: #ffb766;
  --accent-soft: rgba(255, 158, 61, 0.16);
  --border-accent: rgba(255, 158, 61, 0.48);
}

[data-accent="mono"] {
  --accent: #1a1a1a;
  --accent-hover: #363636;
  --accent-soft: rgba(26, 26, 26, 0.08);
  --border-accent: rgba(26, 26, 26, 0.24);
  --fg-on-accent: #ffffff;
}

[data-theme="dark"][data-accent="mono"] {
  --accent: #ffffff;
  --accent-hover: #e8e8e8;
  --accent-soft: rgba(255, 255, 255, 0.1);
  --border-accent: rgba(255, 255, 255, 0.32);
  --fg-on-accent: #0a0a0a;
}

[data-font="geist"] {
  --font-display: "Geist", "Manrope", sans-serif;
  --font-sans: "Geist", "Manrope", sans-serif;
}

[data-font="space"] {
  --font-display: "Space Grotesk", "Manrope", sans-serif;
  --font-sans: "Space Grotesk", "Manrope", sans-serif;
}

[data-font="serif"] {
  --font-display: "Instrument Serif", "GT Sectra", serif;
  --ls-display: -0.015em;
  --ls-h1: -0.01em;
}

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

html {
  scroll-behavior: smooth;
  overflow-x: clip;
}

body {
  overflow-x: clip;
  background: var(--bg);
  color: var(--fg);
}

button {
  font-family: inherit;
  cursor: pointer;
  border: 0;
  background: none;
  color: inherit;
}

img,
svg {
  display: block;
  max-width: 100%;
}

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

/* Reduced motion */
[data-motion="minimal"] .marquee-track,
[data-motion="minimal"] .gallery__track {
  animation: none !important;
}

[data-motion="minimal"] .stack-progress-fill {
  transition: none !important;
}

/* ---- Utility ---- */
.container {
  max-width: var(--container-max);
  width: 100%;
  margin-inline: auto;
  padding-inline: 4px;
}

.container--wide {
  max-width: 1920px;
  width: 100%;
  padding-inline: var(--section-px);
}

.container--narrow {
  max-width: 880px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--fg-3);
  text-transform: uppercase;
}

.eyebrow::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent);
}

.h-display {
  font-family: var(--font-display);
  font-size: clamp(40px, 6.4vw, 104px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
}

.h-section {
  font-family: var(--font-display);
  font-size: clamp(36px, 4.8vw, 72px);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.025em;
}

.h-card {
  font-family: var(--font-display);
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.015em;
}

.body-lead {
  font-size: clamp(17px, 1.4vw, 21px);
  line-height: 1.55;
  color: var(--fg-2);
}

.body-lead strong {
  color: var(--fg);
  font-weight: 600;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: 0;
  padding: 15px 23px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: all var(--duration-fast) var(--ease-in-out);
}

.btn .arrow {
  transition: transform var(--duration-fast) var(--ease-in-out);
}

.btn:hover .arrow {
  transform: translateX(4px);
}

.btn:active {
  transform: scale(0.98);
}

.btn--primary {
  background: var(--accent);
  color: #0e0e10;
}

.btn--primary:hover {
  background: var(--accent-hover);
}

.btn--ghost {
  background: transparent;
  border-color: rgba(0, 0, 0, 0.16);
  color: var(--fg);
}

.btn--ghost:hover {
  border-color: var(--glass-border-top);
}

/* ============================================================
 * PILL NAV
 * ============================================================ */
/* (Legacy .site-header removed — Nav.jsx/PillNav is no longer mounted; the
   live header is .hero__nav-pill below.) */
.pill-nav-wrap {
  display: none;
}

/* ============================================================
 * HERO — Figma 74:615
 * ============================================================ */

.hero {
  opacity: 0;
  margin-bottom: -85px;
}

.hero.is-revealed {
  opacity: 1;
  transition: opacity var(--duration-slow) var(--ease-in-out);
}

/* Tall wrapper: the hero pins (sticky) inside it while the split-text
   reveal plays, then releases and the page continues.
   z-index lifts the hero's FIXED header above later sections (Works z2 etc)
   so the fixed header stays clickable/visible the whole way down. The hero's
   own content is scrolled out of view by then, so nothing else is affected.
   ── The pin distance = .hero-pin height − .hero height (100dvh).
   The colour-wave reveal consumes that entire distance before the page moves. */
.hero-pin {
  position: relative;
  z-index: 40;
  /* 100dvh = the hero itself fills the viewport;
     + 100vh  = extra scroll distance consumed by the colour reveal */
  height: calc(100dvh + 100vh);
}

.hero {
  position: sticky;
  top: 0;
  width: 100%;
  background: #ffffff;
  overflow: clip;
  /* Fill exactly one viewport — the pin wrapper is taller, so scrolling
     through the extra height drives the colour reveal while the hero
     stays fixed.  100dvh accounts for mobile browser chrome. */
  height: 100dvh;
  padding: 20px;
}

/* ---- Premium entrance: text rises + de-blurs, staggered ---- */
@keyframes heroEnter {
  from {
    opacity: 0;
    transform: translateY(34px);
    filter: blur(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

/* inner text elements start hidden so there is no flash before reveal */
.hero__brand,
.hero__stroke-star,
.hero__nav-pill__inner,
.hero__title-line,
.hero__desc,
.hero__cta-row {
  opacity: 0;
}

.hero.is-revealed .hero__brand,
.hero.is-revealed .hero__stroke-star,
/* nav pill renders outside .hero — driven by the mirrored body class instead */
body.hero-revealed .hero__nav-pill__inner,
.hero.is-revealed .hero__title-line,
.hero.is-revealed .hero__desc,
.hero.is-revealed .hero__cta-row {
  animation: heroEnter var(--duration-hero) cubic-bezier(0.22, 0.75, 0.2, 1) both;
}

.hero.is-revealed .hero__brand {
  animation-delay: 0.10s;
}

.hero.is-revealed .hero__stroke-star {
  animation-delay: 0.22s;
}

body.hero-revealed .hero__nav-pill__inner {
  animation-delay: 0.16s;
}

.hero.is-revealed .hero__title-line:nth-child(1) {
  animation-delay: 0.30s;
}

.hero.is-revealed .hero__title-line:nth-child(2) {
  animation-delay: 0.42s;
}

.hero.is-revealed .hero__title-line:nth-child(3) {
  animation-delay: 0.54s;
}

.hero.is-revealed .hero__desc {
  animation-delay: 0.46s;
}

.hero.is-revealed .hero__cta-row {
  animation-delay: 0.58s;
}

/* "Product" runs the entrance AND the continuous flowing gradient */
.hero.is-revealed .hero__title-line--accent {
  animation: heroEnter var(--duration-hero) cubic-bezier(0.22, 0.75, 0.2, 1) both,
    productFlow 7s linear infinite;
  animation-delay: 0.42s, 0s;
}

/* ---- Scroll parallax: containers drift up + fade as you scroll ---- */
.hero__brand-row,
.hero__title-block,
.hero__desc-col {
  will-change: transform, opacity;
}

.hero__brand-row {
  transform: translateY(calc(var(--hs, 0) * -170px));
  opacity: calc(1 - var(--hs, 0) * 0.85);
}

.hero__title-block {
  transform: translateY(calc(var(--hs, 0) * -340px));
  opacity: calc(1 - var(--hs, 0) * 0.95);
}

.hero__desc-col {
  transform: translateY(calc(var(--hs, 0) * -240px));
  opacity: calc(1 - var(--hs, 0) * 0.9);
}

/* Cursor-trail work frames (hero only) */
.hero__frames {
  position: absolute;
  inset: 0;
  z-index: 3;
  /* above title text (z-index 2) so it can cover text */
  pointer-events: none;
  /* never block nav / links */
}

.hero__frame {
  position: absolute;
  width: clamp(180px, 17vw, 340px);
  aspect-ratio: 1 / 1;
  /* square */
  border-radius: 0;
  /* no rounded corners */
  overflow: hidden;
  background: rgba(0, 0, 0, 0.04);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.28);
  will-change: transform, opacity, filter;
  /* constant size; silky de-blur fade in, hold, then very fast blur-out */
  animation: heroTrail var(--duration-hero) var(--ease-out-expo) forwards;
}

.hero__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* subtle Ken-Burns drift for a premium, alive feel */
  animation: heroFrameZoom var(--duration-hero) ease-out forwards;
  will-change: transform;
}

.hero__frame--empty {
  background: rgba(0, 0, 0, 0.03);
  border: 1px dashed rgba(0, 0, 0, 0.18);
  box-shadow: none;
}

@keyframes heroTrail {

  /* constant size; silky de-blur fade in, hold, then very fast blur-out */
  0% {
    opacity: 0;
    filter: blur(16px);
    transform: translate(-50%, -50%);
  }

  26% {
    opacity: 1;
    filter: blur(0);
    transform: translate(-50%, -50%);
  }

  84% {
    opacity: 1;
    filter: blur(0);
    transform: translate(-50%, -50%);
  }

  100% {
    opacity: 0;
    filter: blur(14px);
    transform: translate(-50%, -50%);
  }
}

@keyframes heroFrameZoom {
  from {
    transform: scale(1);
  }

  to {
    transform: scale(1.08);
  }
}

/* Hide the negative-circle cursor while photo frames are showing */
body.hero-cursor-hide .cursor-blob {
  opacity: 0;
}

/* Eyebrow */
.hero__eyebrow-wrap {
  position: absolute;
  top: 5px;
  left: 20px;
  z-index: 2;
}

.hero__eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.96px;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.48);
}

/* Main CSS grid — Figma: 5 cols, 4 rows */
.hero__grid {
  display: grid;
  grid-template-columns:
    clamp(200px, 31.25vw, 600px) clamp(80px, 8.33vw, 160px) 0px 1fr clamp(200px, 26vw, 500px);
  grid-template-rows:
    clamp(80px, 8.33vw, 160px) clamp(50px, 5.21vw, 100px) clamp(50px, 5.21vw, 100px) 1fr;
  column-gap: clamp(8px, 0.87vw, 16.7px);
  row-gap: clamp(8px, 0.87vw, 16.7px);
  height: 100%;
}

/* Col 1 Row 1 — Brand + stroke star */
.hero__brand-row {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.04vw, 20px);
  align-self: start;
}

.hero__brand {
  width: clamp(140px, 18.35vw, 352px);
  height: clamp(80px, 10.42vw, 200px);
  flex-shrink: 0;
  position: relative;
}

.hero__brand-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left center;
  display: block;
}

.hero__stroke-star {
  width: clamp(60px, 10.42vw, 200px);
  height: clamp(60px, 10.42vw, 200px);
  flex-shrink: 0;
  position: relative;
  isolation: isolate;
}

/* ---- 3.7 Fixed top-left brand — visible only while the BIG hero Yui is
        off-screen (body.big-yui-hidden, driven by IntersectionObserver).
        Opacity transition only — never display:none. ---- */
.site-brand {
  position: fixed;
  top: 18px;
  left: 20px;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
  transition:
    opacity var(--duration-base) var(--ease-in-out),
    transform var(--duration-base) var(--ease-in-out),
    color var(--duration-base) var(--ease-in-out);
}

.site-brand::before {
  content: '';
  position: absolute;
  inset: -8px -14px;
  border-radius: 16px;
  z-index: -1;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.76);
  -webkit-backdrop-filter: blur(16px) saturate(155%);
  backdrop-filter: blur(16px) saturate(155%);
  opacity: 0;
  transition: opacity 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

body.yui-hero-overlap:not(.brand-on-dark) .site-brand::before {
  opacity: 1;
}
body.big-yui-hidden .site-brand {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.site-brand__text {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 30px;
  line-height: 1;
  letter-spacing: -1.2px;
  color: #17171a;
  /* dark over the light hero/marquee */
  transition: color var(--duration-base) var(--ease-in-out);
}

body.brand-on-dark .site-brand__text {
  color: #ffffff;
  /* white once the dark sections scroll under */
}

.site-brand__star {
  width: 30px;
  height: 30px;
  object-fit: contain;
  animation: brandStarFloat 4.5s ease-in-out infinite;
  will-change: transform;
}

@keyframes brandStarFloat {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-4px);
  }
}

/* Text wordmark fallback — shown only if the SVG fails to load */
.hero__brand-text {
  display: none;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(80px, 10.4vw, 200px);
  line-height: 1;
  letter-spacing: clamp(-3px, -0.4vw, -8px);
  color: #17171a;
}

.hero__brand--text {
  width: auto;
  /* shrink-wrap the text so the star sits beside it */
}

.hero__brand--text .hero__brand-text {
  display: flex;
  align-items: center;
  height: 100%;
}

/* Holographic star — user's PNG asset */
.hero__stroke-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  /* gentle breathing float — vertical only, no rotation */
  animation: starFloat 4.5s ease-in-out infinite;
  will-change: transform;
}

@keyframes starFloat {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }
}

/* Col 5 Row 1 — Nav pill, fixed to top-right */
.hero__nav-pill {
  position: fixed;
  top: 20px;
  right: 20px;
  /* fixed 500px on large screens; below that the width tracks the viewport.
     Min never goes below the content width, so nothing can overflow. */
  width: clamp(424px, 34vw, 500px);
  z-index: 50;
}

.hero__nav-pill__inner {
  display: flex;
  align-items: center;
  /* spacing between buttons FILLS the pill, adapting to its width */
  justify-content: space-between;
  gap: 12px;
  border: 1px solid rgba(0, 0, 0, 0.16);
  /* see-through frosted glass that LIGHTENS the backdrop, so the dark
     button text stays readable even over dark sections */
  background: rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(22px) brightness(1.55) saturate(1.2);
  -webkit-backdrop-filter: blur(22px) brightness(1.55) saturate(1.2);
  padding: 8px;
  /* the box always encloses its content — the CTA can never stick out */
  height: auto;
  min-height: 56px;
  transition: background var(--duration-base) var(--ease-in-out),
    border-color var(--duration-base) var(--ease-in-out);
}

/* Over dark sections (Works / How I Work / Contact): dark glass + white text
   so the header is clearly visible the whole way down */
body.brand-on-dark .hero__nav-pill__inner {
  background: rgba(13, 13, 16, 0.45);
  border-color: rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(22px) saturate(1.2);
  -webkit-backdrop-filter: blur(22px) saturate(1.2);
}

body.brand-on-dark .hero__nav-pill__item {
  color: #ffffff;
}

body.brand-on-dark .hero__nav-pill__item:hover {
  background: rgba(255, 255, 255, 0.12);
}

.hero__nav-pill__items {
  flex: 1;
  /* take remaining width… */
  min-width: 0;
  /* …but never push the CTA out */
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  /* gaps flex with screen size */
  gap: 0;
  padding: 0 4px;
}

.hero__nav-pill__item {
  padding: 8px 16px 8px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  color: #17171a;
  text-align: center;
  white-space: nowrap;
  transition: background var(--duration-fast) var(--ease-in-out);
}

.hero__nav-pill__item:hover {
  background: rgba(0, 0, 0, 0.05);
}

.hero__nav-pill__cta {
  flex-shrink: 0;
  /* CTA keeps its size; right padding stays constant */
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #4ade80;
  color: #1e1e22;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  padding: 8px 16px 8px 16px;
  border-radius: 0;
  /* square button, matching the design */
  margin-left: 4px;
  white-space: nowrap;
  transition: background var(--duration-fast) var(--ease-in-out);
}

.hero__nav-pill__cta:hover {
  background: #22c55e;
}

/* Col 5 Row 2 — Description + CTAs */
.hero__desc-col {
  grid-column: 5;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 0.89vw, 17px);
  align-self: start;
}

.hero__desc {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(13px, 0.94vw, 18px);
  line-height: 2;
  color: #0e0e10;
  /* Constrain so the right edge stops at the "a" of "Contact" above;
     wrap when content exceeds it (the <br> still forces the first break). */
  max-width: clamp(200px, 22vw, 423px);
  white-space: normal;
  word-break: break-word;
}

.hero__desc-bold {
  color: #0e0e10;
  font-weight: 500;
}

/* Col 1–3 Row 3–4 — Title */
.hero__title-block {
  grid-column: 1 / span 3;
  grid-row: 3 / span 2;
  align-self: start;
  position: relative;
  z-index: 2;
}

.hero__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(44px, 6.46vw, 124px);
  /* uniform baseline rhythm = visually even spacing across the 3 lines */
  line-height: 1.04;
  letter-spacing: clamp(-2px, -0.3vw, -5.76px);
  color: #1e1e22;
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
}

.hero__title-line {
  display: block;
  white-space: nowrap;
}

/* "Designing" and "that actually ships." are light weight */
.hero__title-line:nth-child(1),
.hero__title-line:nth-child(3) {
  font-weight: 300;
}

/* "Product" — serif italic (matches footer's "something") + flowing gradient */
.hero__title-line--accent {
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin-top: clamp(2px, 0.31vw, 6px);
  background-image: linear-gradient(100deg, #4ADE80, #8EEAB0, #4ADE80, #8EEAB0, #4ADE80);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: productFlow 7s linear infinite;
}

@keyframes productFlow {
  to {
    background-position: 250% 50%;
  }
}

/* ---- 3.5 Scroll-linked split text reveal (title + hero description) ---- */
.stxc {
  will-change: opacity;
}

/* When "Product" is split into chars, the flowing gradient must live on each
   char (a parent background-clip:text can't be faded per-char) */
.hero__title-line--accent.is-split {
  background-image: none;
}

.hero__title-line--accent.is-split .stxc {
  background-image: linear-gradient(100deg, #4ADE80, #8EEAB0, #4ADE80, #8EEAB0, #4ADE80);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: productFlow 7s linear infinite;
}

/* CTA row */
.hero__cta-row {
  display: flex;
  align-items: center;
  gap: clamp(16px, 1.6vw, 30px);
  flex-wrap: wrap;
  padding-top: clamp(10px, 1.04vw, 20px);
}

.hero__cta-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(14px, 1.04vw, 20px);
  letter-spacing: 0.14px;
  color: #25252a;
  text-decoration: none;
  line-height: 1.085;
}

.hero__cta-link:hover .hero__cta-arrow {
  transform: translateX(4px);
}

.hero__cta-text {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.hero__cta-arrow {
  color: #1e1e22;
  text-decoration: none;
  display: inline-block;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}


/* ============================================================
 * HERO — DIAMOND VISUAL REDESIGN (.hero--diamond)
 * White canvas + scroll-brightening split type + original 5-layer
 * holographic diamond with larger dynamics & 45° halftone dot glow
 * ============================================================ */

.hero--diamond {
  background: #ffffff;
  position: sticky;
  top: 0;
  width: 100%;
  height: 100dvh;
  padding: 0;
  overflow: clip;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---- Diamond stage: viscous fluid/particle field + 12 finely-spaced diamonds ---- */
.hero__diamond-stage {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  will-change: transform, opacity;
  transform: translateY(calc(var(--hs, 0) * -140px));
  opacity: calc(1 - var(--hs, 0) * 0.85);
}

.hero__diamond-entrance {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
}

.hero--diamond.is-revealed .hero__diamond-entrance {
  animation: diamondStageIn 2.6s cubic-bezier(0.22, 0.75, 0.2, 1) 0.08s both;
}

/* Live Retina WebGL canvas: Layer 1 light-particle diamond (z:3) + viscous soap-film micro-particles */
.hero__diamond-particles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  pointer-events: none;
}

/* 28 ultra-close holographic diamond contours driven by GPU-composited viscous chain */
.hero__diamond-layer {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  will-change: transform;
}

.hero__diamond-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.hero__diamond-img.hero__diamond-core {
  filter: saturate(1.75) contrast(1.10) drop-shadow(0 0 28px rgba(46, 196, 255, 0.28));
  animation: diamondCoreHue 54s linear infinite;
}

@keyframes diamondCoreHue {
  0% {
    filter: saturate(1.75) contrast(1.10) hue-rotate(0deg) drop-shadow(0 0 28px rgba(46, 224, 172, 0.26));
  }
  50% {
    filter: saturate(1.75) contrast(1.10) hue-rotate(18deg) drop-shadow(0 0 32px rgba(46, 196, 255, 0.30));
  }
  100% {
    filter: saturate(1.75) contrast(1.10) hue-rotate(0deg) drop-shadow(0 0 28px rgba(46, 224, 172, 0.26));
  }
}

/* ---- Diamond hero: text content overlay on white canvas ---- */
.hero--diamond .hero__content {
  position: relative;
  z-index: 4;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto 1fr 16.5px;
  padding: clamp(20px, 3vw, 48px);
  gap: 0;
}

/* Brand top-left */
.hero--diamond .hero__brand {
  grid-column: 1;
  grid-row: 1;
  width: auto;
  height: auto;
  align-self: start;
}

.hero--diamond .hero__brand-text {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(36px, 4vw, 64px);
  line-height: 1;
  letter-spacing: -2px;
  color: #17171a;
}

/* Title block — left side, vertically centered */
.hero--diamond .hero__title-block {
  grid-column: 1;
  grid-row: 2;
  align-self: center;
  position: relative;
  z-index: 2;
  padding-right: 20px;
  transform: translateY(calc(var(--hs, 0) * -220px));
  opacity: calc(1 - var(--hs, 0) * 0.92);
}

.hero--diamond .hero__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(40px, 5.5vw, 100px);
  line-height: 0.94;
    letter-spacing: -0.068em;
  color: #1e1e22;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.hero--diamond .hero__title-line {
  display: block;
  white-space: nowrap;
}

.hero--diamond .hero__title-line--1,
.hero--diamond .hero__title-line--3,
.hero--diamond .hero__title-line--4 {
  font-weight: 300;
  color: #1e1e22;
}

.hero--diamond .hero__title-line--2 {
  position: relative;
  top: 0.084em;
}

@media (min-width: 1025px) {
  .hero--diamond .hero__title-block {
    top: -36px;
  }

  .hero--diamond .hero__title {
    font-size: calc(clamp(40px, 5.5vw, 100px) + 20px);
  }

  .hero--diamond .hero__title-line--2 {
    top: 10px;
  }

  .hero--diamond .hero__desc-col {
    position: relative;
    left: -32px;
    top: -100px;
  }
}
.hero--diamond .hero__title-line--accent {
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-weight: 500;
  letter-spacing: -0.04em;
  background-image: linear-gradient(100deg, #22c55e, #4ADE80, #67e8f9, #a78bfa, #4ADE80);
  background-size: 280% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: productFlowDiamond 7.5s linear infinite;
}

.hero--diamond .hero__title-line--accent.is-split {
  background-image: none;
  animation: none;
}

.hero--diamond .hero__title-line--accent.is-split .stxc {
  background-image: linear-gradient(100deg, #22c55e, #4ADE80, #38bdf8, #a78bfa, #4ADE80);
  background-size: 280% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: productFlowDiamond 7.5s linear infinite;
}

.hero--diamond .hero__product-sizer {
  display: inline;
}

.hero--diamond .hero__title-line--accent.has-product-particles {
  background-image: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}

.hero--diamond .hero__title-line--accent.has-product-particles .hero__product-sizer,
.hero--diamond .hero__title-line--accent.has-product-particles .stxc {
  background-image: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  animation: none !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}

.hero--diamond .hero__title-line--accent.has-product-particles .hero__product-sizer {
  opacity: 0 !important;
  pointer-events: none;
}

.hero--diamond .hero__product-particles {
  position: absolute;
  left: -26px;
  top: -26px;
  display: block;
  pointer-events: none;
  z-index: 2;
}

@keyframes productFlowDiamond {
  to { background-position: 280% 50%; }
}

/* Description — right side */
.hero--diamond .hero__desc-col {
  grid-column: 2;
  grid-row: 2;
  align-self: end;
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.2vw, 20px);
  padding-bottom: clamp(40px, 6vh, 100px);
  padding-left: clamp(20px, 4vw, 80px);
  max-width: 420px;
  justify-self: end;
  transform: translateY(calc(var(--hs, 0) * -170px));
  opacity: calc(1 - var(--hs, 0) * 0.88);
}

.hero--diamond .hero__desc {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(13px, 1vw, 16px);
  line-height: 1.95;
  color: #0e0e10;
  max-width: 360px;
}

.hero--diamond .hero__desc-bold {
  color: #0e0e10;
  font-weight: 600;
}

/* CTA links on white */
.hero--diamond .hero__cta-row {
  display: flex;
  align-items: center;
  gap: clamp(16px, 1.6vw, 28px);
  flex-wrap: wrap;
  padding-top: clamp(8px, 0.6vw, 12px);
}

.hero--diamond .hero__cta-link {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(13px, 1vw, 16px);
  letter-spacing: 0.14px;
  color: #1e1e22;
  text-decoration: none;
  transition: color 0.25s ease;
}

.hero--diamond .hero__cta-link:hover {
  color: #16a34a;
}

.hero--diamond .hero__cta-text {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(30, 30, 34, 0.28);
}

.hero--diamond .hero__cta-arrow {
  color: #1e1e22;
}

/* Meta tags bottom-left */
.hero__meta-left {
  grid-column: 1;
  grid-row: 3;
  align-self: end;
  display: flex;
  gap: 24px;
}

.hero__meta-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(23, 23, 26, 0.44);
}

/* ---- Diamond hero entrance animations (on inner elements so --hs parallax on wrappers stays live) ---- */
.hero--diamond .hero__brand,
.hero--diamond .hero__title-line,
.hero--diamond .hero__desc,
.hero--diamond .hero__cta-row,
.hero--diamond .hero__meta-left {
  opacity: 0;
}

.hero--diamond.is-revealed .hero__brand {
  animation: heroEnterDiamond 0.9s cubic-bezier(0.22, 0.75, 0.2, 1) 0.12s both;
}

.hero--diamond.is-revealed .hero__title-line--1 {
  animation: heroEnterDiamond 0.95s cubic-bezier(0.22, 0.75, 0.2, 1) 0.24s both;
}

.hero--diamond.is-revealed .hero__title-line--2 {
  animation: heroEnterDiamond 0.95s cubic-bezier(0.22, 0.75, 0.2, 1) 0.34s both;
}

.hero--diamond.is-revealed .hero__title-line--3 {
  animation: heroEnterDiamond 0.95s cubic-bezier(0.22, 0.75, 0.2, 1) 0.44s both;
}

.hero--diamond.is-revealed .hero__title-line--4 {
  animation: heroEnterDiamond 0.95s cubic-bezier(0.22, 0.75, 0.2, 1) 0.54s both;
}

.hero--diamond.is-revealed .hero__desc {
  animation: heroEnterDiamond 0.9s cubic-bezier(0.22, 0.75, 0.2, 1) 0.46s both;
}

.hero--diamond.is-revealed .hero__cta-row {
  animation: heroEnterDiamond 0.9s cubic-bezier(0.22, 0.75, 0.2, 1) 0.58s both;
}

.hero--diamond.is-revealed .hero__meta-left {
  animation: heroEnterDiamond 0.8s cubic-bezier(0.22, 0.75, 0.2, 1) 0.64s both;
}

@keyframes heroEnterDiamond {
  from {
    opacity: 0;
    transform: translateY(30px);
    filter: blur(6px);
  }
  to {
    opacity: var(--yui-alpha, 1);
    transform: translateY(0);
    filter: blur(var(--yui-blur, 0px));
  }
}

@keyframes diamondStageIn {
  from {
    opacity: 0;
    transform: scale(0.72) rotate(-14deg);
    filter: blur(18px);
  }
  to {
    opacity: 1;
    transform: scale(1) rotate(0deg);
    filter: blur(0);
  }
}

/* ---- Responsive: mobile layout ---- */
@media (max-width: 768px) {
  .hero.hero--diamond {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: stretch;
      justify-content: flex-start;
      padding: 0;
      margin-bottom: 0;
      overflow: clip;
    }
  .hero--diamond .hero__content {
    flex: 1 1 auto;
      height: auto;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      padding: 14px 20px 48px;
  }

  .hero--diamond .hero__brand {
    margin: 0 0 60px 0;
      align-self: flex-start;
    }
    
    .hero--diamond .hero__brand-text {
      line-height: 0.92;
  }

  .hero--diamond .hero__title-block {
    align-self: flex-start;
      margin-top: auto;
      margin-bottom: 60px;
    padding-right: 0;
    transform: none;
      opacity: 1;
  }

  .hero--diamond .hero__title {
    font-size: clamp(36px, 10vw, 56px);
  }

  .hero--diamond .hero__desc-col {
    padding: 0;
      margin: 0;
      gap: 60px;
    max-width: 100%;
    align-self: stretch;
    justify-self: start;
    transform: none;
      opacity: 1;
  }

                .hero--diamond .hero__desc {
                  margin: 0;
                }
        
                .hero--diamond .hero__cta-row {
                  padding-top: 0;
                  padding-bottom: 0;
                  margin: 0;
                  line-height: 1.2;
  }

  .hero__diamond-layer--mobile-trim {
    display: none;
  }
}


/* Diagonal marquee band — only TOP edge shows inside hero; body extends past clip */
/* Sticky context: marquee pins while Projects scroll under it */
.mq-sticky {
  position: relative;
  padding-top: 6px;
  z-index: 41;
  overflow-x: clip;
}

/* Rotated band + black transition triangle — scrolls normally; the sticky
   Projects Container rises up and covers it. */
.hero__marquee {
  position: relative;
  z-index: 1;
  /* extend beyond the viewport edges so the diagonal fills full width */
  margin-left: -150px;
  margin-right: -150px;
  /* extra top space so the 3° rotation never pokes above the box on wide screens */
  padding-top: calc(2.8vw + 20px);
  transform: rotate(3deg);
  transform-origin: center center;
  pointer-events: none;
}

@media (max-width: 768px) {
  .mq-sticky {
    padding-top: 0;
  }

  .hero__marquee {
    padding-top: 2.62vw;
  }
}
.hero__marquee-band {
  /* Figma: gradient #8eeab0 → #d8f9f2, left to right */
  background: linear-gradient(to right, #8eeab0, #d8f9f2);
  overflow: hidden;
  padding: clamp(16px, 1.51vw, 29px) 0;
}

/* Solid black transition wedge below the 3°-rotated band:
   50vw * sin(3°) ≈ 2.62vw drop on the right + lift on the left, so height scales
   with vw to keep ~85px of pure black clearance below the band's lowest corner. */
.hero__marquee-tri {
  height: calc(5.8vw + 104px);
  background: #000;
}

.hero__marquee-track {
  display: flex;
  width: max-content;
  animation: marqueeScroll 38s linear infinite;
  align-items: center;
  gap: clamp(28px, 2.92vw, 56px);
}

.hero__marquee-item {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(30px, 3.33vw, 64px);
  letter-spacing: -1.28px;
  color: #ffffff;
  white-space: nowrap;
  padding-right: clamp(28px, 2.92vw, 56px);
}

.hero__marquee-item::after {
  content: " ✦";
  color: #4ade80;
  font-size: 0.5em;
  vertical-align: middle;
}


/* ============================================================
 * MARQUEE
 * ============================================================ */
.marquee-strip {
  padding: 32px 0;
  background: var(--bg);
  overflow: hidden;
  background: linear-gradient(to right, #8eeab0, #d8f9f2);
}

.marquee-strip--big {
  padding: 56px 0;
}

.marquee {
  position: relative;
  overflow: hidden;
}

.marquee-track {
  display: flex;
  width: max-content;
  animation: marqueeScroll 38s linear infinite;
}

.marquee--rev .marquee-track {
  animation-direction: reverse;
}

.marquee--slow .marquee-track {
  animation-duration: 60s;
}

.marquee-strip:hover .marquee-track {
  animation-play-state: paused;
}

.marquee-group {
  display: flex;
  align-items: center;
  gap: 56px;
  padding-right: 56px;
  white-space: nowrap;
}

.marquee-item {
  display: inline-flex;
  align-items: center;
  gap: 56px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(28px, 4.8vw, 64px);
  letter-spacing: -0.02em;
  color: #ffffff;
}

.marquee-item::after {
  content: "✦";
  color: var(--accent);
  font-size: 0.5em;
}

.marquee-item--ghost {
  color: var(--fg-3);
}

.marquee-item--ghost::after {
  color: var(--fg-4);
}

.marquee--small .marquee-item {
  font-size: 14px;
  font-weight: 500;
  color: #ffffff;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.marquee--small .marquee-item::after {
  font-size: 0.8em;
}

@keyframes marqueeScroll {
  from {
    transform: translateX(0);
  }

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

/* ============================================================
 * INTRO / ABOUT
 * ============================================================ */
.intro {
  padding: var(--section-pt) 0 var(--section-pb);
}

.intro__shell {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 80px;
  align-items: start;
}

@media (max-width: 880px) {
  .intro__shell {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

.intro__copy {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.4vw, 48px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.022em;
  color: var(--fg);
}

.intro__copy .muted {
  color: var(--fg-3);
}

.intro__copy .acc {
  color: var(--accent);
}

.intro__meta {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding-top: 12px;
}

.intro__meta p {
  font-size: 16px;
  line-height: 1.65;
  color: var(--fg-2);
  max-width: 52ch;
}

.intro__meta p strong {
  color: var(--fg);
  font-weight: 600;
}

/* ============================================================
 * STATS — big M / k / T style
 * ============================================================ */
.stats {
  padding: var(--section-pb) 0 var(--section-pt);
  border-top: 1px solid var(--border);
}

.stats__head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: var(--sp-8);
}

.stats__title {
  max-width: 24ch;
}

.stats__sub {
  font-size: 14px;
  color: var(--fg-3);
  max-width: 40ch;
}

.stats__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

@media (max-width: 860px) {
  .stats__grid {
    grid-template-columns: 1fr;
  }
}

.stat {
  padding: 56px 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
}

.stat+.stat {
  border-left: 1px solid var(--border);
}

@media (max-width: 860px) {
  .stat+.stat {
    border-left: 0;
    border-top: 1px solid var(--border);
  }
}

.stat__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--fg-3);
  text-transform: uppercase;
}

.stat__num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(56px, 9vw, 144px);
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--fg);
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.stat__num .unit {
  font-size: 0.45em;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: -0.02em;
}

.stat__caption {
  font-size: 14px;
  color: var(--fg-2);
  line-height: 1.5;
  max-width: 30ch;
}

/* ============================================================
 * PSCROLL — Figma 69:4041 fullscreen projects showcase
 * ============================================================ */
.pscroll {
  position: relative;
  color: #fff;
  z-index: 2;
  /* Overlaps only the lower edge of the #000 wedge (> 2.62vw so left never gaps,
     leaving ~85px clearance below the rotated green band on the right) */
  margin-top: calc(-2.8vw - 24px);
}

.pscroll__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  overflow: hidden;
  z-index: 2;
  /* covers the marquee (z-index 1) as it scrolls up */
}

/* Black gradient at the Container's top edge — soft transition over the marquee */
.pscroll__sticky::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 150px;
  background: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.7) 40%, rgba(0, 0, 0, 0) 100%);
  z-index: 3;
  pointer-events: none;
}

/* Dark backdrop behind the showcase */
.pscroll__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: #0d0d10;
}

/* ── CENTER: framed media card (ref.digital style) ── */
.pscroll__media {
  position: relative;
  z-index: 1;
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(40px, 5vw, 80px) clamp(16px, 2vw, 40px);
}

.pscroll__media-frame {
  display: block;
  width: 100%;
  max-width: clamp(480px, 54vw, 1040px);
  aspect-ratio: 16 / 9;
  background: #000;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
  animation: mediaSwap var(--duration-base) var(--ease-out-expo);
  text-decoration: none;
  cursor: pointer;
}

.pscroll__media-frame img,
.pscroll__media-frame video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.pscroll__media-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #0d1015 0%, #1a1e26 50%, #0d1015 100%);
}

@keyframes mediaSwap {
  from {
    opacity: 0;
    transform: scale(0.985);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* ── LEFT panel: dark-left gradient + blur + project names ── */
.pscroll__left {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  /* Compact title list pinned to the far LEFT (media card sits centre) */
  width: clamp(200px, 18vw, 320px);
  margin-left: 0;
  display: flex;
  align-items: center;
  padding: clamp(48px, 5.5vw, 80px) clamp(12px, 1.2vw, 24px) clamp(48px, 5.5vw, 80px) clamp(20px, 2.5vw, 48px);
  background: transparent;
}

/* ── RIGHT panel: dark-right gradient + details ── */
.pscroll__right {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  /* Figma: right Container ≈ 435px */
  width: clamp(290px, 22.7vw, 435px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(48px, 5.5vw, 80px) clamp(24px, 3.17vw, 61px) clamp(48px, 5.5vw, 80px) clamp(16px, 1.22vw, 23.46px);
  background: linear-gradient(to left, rgba(0, 0, 0, 0.8) 23.558%, rgba(0, 0, 0, 0) 100%);
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}

/* Eyebrow in dark context */
.pscroll .eyebrow-exact .text {
  color: rgba(255, 255, 255, 0.48);
}

/* Counter */
.pscroll__counter {
  margin: 28px 0 20px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.48);
}

.pscroll__counter-cur {
  color: #fff;
}

.pscroll__counter-sep,
.pscroll__counter-tot {
  color: rgba(255, 255, 255, 0.48);
}

/* Detail panel content */
.pscroll__desc-wrap {
  display: flex;
  flex-direction: column;
  gap: 0;
  animation: pscroll-fade 0.35s var(--ease-out-expo);
}

@keyframes pscroll-fade {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.pscroll__chips {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.pscroll .chip {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.24);
  color: #ffffff;
}

.pscroll .chip--accent {
  background: rgba(74, 222, 128, 0.18);
  border-color: rgba(74, 222, 128, 0.48);
  color: #ffffff;
}

.pscroll__sub-title {
  font-family: var(--font-display);
  font-size: clamp(18px, 1.6vw, 26px);
  font-weight: 700;
  color: #fff;
  margin: 0 0 12px;
  line-height: 1.25;
}

.pscroll__desc {
  --indent-bar-w: clamp(3px, 0.21vw, 4px);
  --indent-bar-gap: clamp(10px, 0.625vw, 12px);
  font-family: var(--font-display);
  font-size: clamp(13px, 0.855vw, 15px);
  font-weight: 400;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.86);
  margin: 0 0 100px;
  padding-left: calc(var(--indent-bar-w) + var(--indent-bar-gap));
  text-indent: calc(-1 * (var(--indent-bar-w) + var(--indent-bar-gap)));
}

.pscroll__desc::before {
  content: "";
  display: inline-block;
  width: var(--indent-bar-w);
  height: 0.92em;
  margin-right: var(--indent-bar-gap);
  background-color: var(--accent);
  vertical-align: -0.1em;
}

.pscroll__footer {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 18px;
  flex-wrap: nowrap;
}

.pscroll__metrics {
  display: flex;
  align-items: flex-start;
  gap: clamp(12px, calc(1.4vw - 4px), 20px);
  flex-wrap: nowrap;
  min-width: 0;
  flex: 0 1 auto;
  margin: 0;
}

.pscroll__metric {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  min-width: 0;
}

.pscroll__metric--left {
  align-items: flex-start;
  text-align: left;
}

.pscroll__metric-num {
  display: inline-flex;
  align-items: baseline;
  font-family: var(--font-display);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.68);
  line-height: 1;
  white-space: nowrap;
}

.pscroll__metric-num--shift-l4 {
  transform: translateX(-4px);
}

.pscroll__metric-label {
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.68);
  vertical-align: baseline;
}

.pscroll__metric-value {
  --metric-val-size: clamp(32px, 3.125vw, 60px);
  display: inline-block;
  font-size: var(--metric-val-size);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff;
  line-height: 1;
  vertical-align: baseline;
}

.pscroll__metric-sym {
  font-size: clamp(24px, 2.0833vw, 40px);
  font-weight: 400;
  line-height: 1;
  vertical-align: baseline;
}

.pscroll__metric-sym--plus {
  display: inline-block;
  position: relative;
  top: -0.34em;
  color: var(--accent);
}

.pscroll__metric-sym--arrow {
  display: inline-block;
  position: relative;
  top: calc(0.3365em - 0.354 * var(--metric-val-size));
}

.pscroll__metric-unit {
  font-size: 15px;
  font-weight: 600;
  color: #4ade80;
  vertical-align: baseline;
}

.pscroll__metric-cap {
  --indent-bar-w: 2px;
  --indent-bar-gap: 6px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--accent);
  text-align: left;
  padding-left: calc(var(--indent-bar-w) + var(--indent-bar-gap));
  text-indent: calc(-1 * (var(--indent-bar-w) + var(--indent-bar-gap)));
}

.pscroll__metric-cap::before {
  content: "";
  display: inline-block;
  width: var(--indent-bar-w);
  height: 0.92em;
  margin-right: var(--indent-bar-gap);
  background-color: var(--accent);
  vertical-align: -0.1em;
}

.pscroll__metric-cap-plain {
  color: #fff;
}

.pscroll__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: clamp(32px, 3.125vw, 60px);
  font-family: var(--font-display);
  font-size: clamp(32px, 2.81vw, 54px);
  font-weight: 600;
  line-height: 1;
  color: var(--accent);
  text-decoration: none;
  padding: 0;
  width: fit-content;
  flex-shrink: 0;
  white-space: nowrap;
}

.pscroll__cta-arrow {
  display: inline-block;
  color: var(--accent);
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.pscroll__cta:hover .pscroll__cta-arrow {
  transform: translateX(4px);
}

/* ── LEFT: project title list ── */
.pscroll__titles {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  /* Figma: 20px gap between list items */
  gap: clamp(10px, 1.04vw, 20px);
  width: 100%;
  overflow: hidden;
}

.pscroll__group {
  margin-bottom: 0;
}

.pscroll__title-item {
  /* block, not flex: each of these anchors wraps a single span, and as a flex
     item that span's display:-webkit-box would be blockified to flow-root,
     which silently kills the -webkit-line-clamp safety net below. */
  display: block;
  padding: 4px 0;
  text-decoration: none;
}

.pscroll__title-item.is-link {
  cursor: pointer;
}


.pscroll__title-item--co {
  padding: 0 0 2px;
}

.pscroll__title-item--co:not(.is-active):not(.is-parent) {
  display: none;
}

.pscroll__title-item.is-active .pscroll__title-co,
.pscroll__title-item.is-parent .pscroll__title-co {
  display: block;
}

.pscroll__title-item .pscroll__title-co {
  display: none;
}

.pscroll__title-item.is-link:hover .pscroll__title-text {
  color: #fff;
}

.pscroll__title-text {
  font-family: var(--font-display);
  /* compact left-rail titles (media card is the hero now) */
  font-size: clamp(18px, 1.66vw, 32px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.0176em;
  color: rgba(255, 255, 255, 0.15);
  transition: color var(--duration-base) var(--ease-out-expo);
  /* Safety net: wrap to at most two lines, then clip with an ellipsis.
     Previously nowrap + the container's overflow:hidden cut mid-glyph with no
     visual cue that anything was missing. min-width:0 is required for a flex
     item to shrink below its content width. */
  white-space: normal;
  min-width: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pscroll__title-item.is-active .pscroll__title-text,
.pscroll__title-item.is-parent .pscroll__title-text {
  color: #ffffff;
}

.pscroll__title-co {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: transparent;
  transition: color var(--duration-base) var(--ease-out-expo);
  flex-shrink: 0;
}

.pscroll__title-item.is-active .pscroll__title-co,
.pscroll__title-item.is-parent .pscroll__title-co {
  color: var(--accent);
}

/* Sub-project rows */
.pscroll__sub-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 0 5px 24px;
  text-decoration: none;
}

.pscroll__sub-item.is-link {
  cursor: pointer;
}

.pscroll__sub-item.is-link:hover .pscroll__sub-text {
  color: #fff;
}

.pscroll__sub-item.is-link:hover .pscroll__sub-arrow {
  color: #4ade80;
}

.pscroll__sub-arrow {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.2);
  flex-shrink: 0;
  transition: color var(--duration-base) var(--ease-in-out);
}

.pscroll__sub-item.is-active .pscroll__sub-arrow {
  color: #4ade80;
}

.pscroll__sub-text {
  font-family: var(--font-display);
  font-size: clamp(12px, 0.83vw, 16px);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.2);
  transition: color var(--duration-base) var(--ease-out-expo);
  /* Sub rows keep their flex parent (the ↳ arrow must stay on the first line),
     so a flex item here cannot use -webkit-line-clamp — it would be blockified.
     Single line plus a real ellipsis instead; sub labels are short enough that
     two lines were never needed (widest is 83px against 206px available). */
  white-space: nowrap;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pscroll__sub-item.is-active .pscroll__sub-text {
  color: #fff;
}

.pscroll__sub-chip {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 3px;
  border: 1px solid transparent;
  color: transparent;
  transition: color var(--duration-base) var(--ease-in-out), border-color var(--duration-base) var(--ease-in-out);
  flex-shrink: 0;
}

.pscroll__sub-item.is-active .pscroll__sub-chip {
  color: rgba(255, 255, 255, 0.68);
  border-color: rgba(255, 255, 255, 0.16);
}

/* Responsive */
@media (max-width: 900px) {

  /* KEEP the sticky scroll-scrub: the panel pins for 100vh per item so
     every work stays browsable by scrolling, on tablet and phone alike. */
  .pscroll__sticky {
    flex-direction: column;
    height: 100dvh;
    overflow: hidden;
    justify-content: flex-start;
  }

  /* stacked: titles → media card → description, compact so it fits 100dvh */
  .pscroll__left {
    width: 100%;
    background: none;
    backdrop-filter: none;
    padding: clamp(50px, 7.5dvh, 64px) 20px 0;
    align-items: flex-start;
  }

  .pscroll__titles {
    gap: 4px;
  }

  .pscroll__title-item {
    padding: 2px 0;
  }

  .pscroll__sub-item {
    padding: 2px 0 2px 18px;
  }

  /* Collapse the list to the current entry only. Stacked on one screen the
     full list costs ~200px of height while the inactive rows carry no
     information — that space goes to the media card and the description.
     .is-active is the current main project; .is-parent is its group while a
     sub-project is current, so the active sub keeps its parent + company
     line for context instead of floating on its own. */
  .pscroll__title-item:not(.is-active):not(.is-parent),
  .pscroll__sub-item:not(.is-active) {
    display: none;
  }

  .pscroll__title-text {
    font-size: clamp(20px, 4.6vw, 30px);
  }

  .pscroll__sub-text {
    font-size: clamp(12px, 3.2vw, 15px);
  }

  .pscroll__media {
    width: 100%;
    flex: 0 0 auto;
    /* Side inset trimmed from 20px: at 16:9 the card is width-bound on narrow
       screens, so horizontal padding is the only thing capping its height. */
    padding: clamp(8px, 1.5dvh, 12px) 12px;
  }

  .pscroll__media-frame {
    /* height-capped so titles + card + description + metrics fit one screen */
    width: min(100%, calc(34dvh * 1.7778));
    margin-inline: auto;
  }

  .pscroll__right {
    width: 100%;
    background: none;
    border-right: none;
    padding: 4px 20px clamp(12px, 2.5dvh, 20px);
    justify-content: flex-start;
    flex: 1;
    min-height: 0;
  }

  .pscroll__counter {
    margin: 8px 0 6px;
  }

  .pscroll__desc-wrap {
    gap: 0;
  }

  .pscroll__chips {
    gap: 6px;
    margin-bottom: clamp(6px, 1.2dvh, 10px);
  }

  .pscroll__sub-title {
    margin-bottom: clamp(4px, 1dvh, 8px);
  }

  .pscroll__desc {
    font-size: 13px;
    line-height: 1.55;
    margin-bottom: clamp(16px, 3.5dvh, 36px);
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .pscroll__metrics {
    gap: 12px;
  }
}

@media (max-width: 900px) and (max-height: 640px) {
  .pscroll__media-frame {
    width: min(100%, calc(28dvh * 1.7778));
  }

  .pscroll__desc {
    -webkit-line-clamp: 3;
    margin-bottom: 14px;
  }
}

@media (min-width: 901px) and (max-height: 740px) {
  .pscroll__desc {
    margin-bottom: clamp(28px, 6vh, 100px);
  }
}

/* At 901–1100 the three columns are all near their clamp() floors, so the left
   list is at its tightest while still showing all rows. Drop the sub-projects
   here and keep the main titles; the current sub-project is still named in the
   right-hand panel. */
@media (min-width: 901px) and (max-width: 1100px) {
  .pscroll__sub-item {
    display: none;
  }
}

/* ── Shared eyebrow component ── */
.eyebrow-exact {
  display: flex;
  align-items: center;
  gap: 8px;
}

.eyebrow-exact .dot {
  width: 6px;
  height: 6px;
  background: #4ade80;
  border-radius: 3px;
  box-shadow: 0px 0px 12px 0px #1e7afb;
  flex-shrink: 0;
}

.eyebrow-exact .text {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 500;
  font-size: 12px;
  line-height: 18.6px;
  color: rgba(0, 0, 0, 0.48);
  letter-spacing: 0.96px;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ============================================================
 * STACK — sticky scrub section
 * ============================================================ */
/* ============================================================
 * STACK — sui.io style scroll-driven card reveal
 * Section height = N × 100vh; inner container is sticky at 100vh.
 * JS translates each card from translateX(100%) → translateX(0)
 * as the user scrolls, creating a slide-in-from-right effect.
 * ============================================================ */
.stack {
  position: relative;
  background: var(--bg);
  border-top: 1px solid var(--border);
  /* height is set inline by JSX: N * 100vh */
}

.stack__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* .stack__bg (aurora) is absolute inside here */
  isolation: isolate;
}

/* Header bar — single eyebrow only, no duplicate h2 */
.stack__header-bar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 40px;
  padding: 32px 64px;
  border-bottom: 1px solid var(--border);
  position: relative;
  z-index: 1;
}

.stack__sub {
  font-size: 13px;
  color: var(--fg-3);
  line-height: 1.5;
  max-width: 52ch;
}

/* Cards wrap — fills remaining height, clips overflow */
.stack__cards-wrap {
  position: relative;
  flex: 1;
  overflow: hidden;
  z-index: 1;
}

/* Individual card — absolutely stacked, JS drives translateX */
.stack-card {
  position: absolute;
  inset: 0;
  will-change: transform;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  z-index: 1;
}

/* Top bar: number badge + solution title */
.stack-card__topbar {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px 64px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.stack-card__num {
  width: 44px;
  height: 44px;
  background: #4ade80;
  border: 1px solid rgba(0, 0, 0, 0.08);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 16px;
  font-weight: 700;
  color: #ffffff;
  flex-shrink: 0;
}

.stack-card__headline {
  font-family: 'JetBrains Mono', monospace;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.081em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.72);
}

/* Main two-column area */
.stack-card__main {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
}

.stack-card__col {
  padding: 48px 64px;
  display: flex;
  flex-direction: column;
  gap: 60px;
}

.stack-card__col--problem {
  border-right: 1px solid rgba(0, 0, 0, 0.08);
}

.stack-card__label {
  font-family: 'JetBrains Mono', monospace;
  font-size: clamp(14px, 1.7vw, 24px);
  font-weight: 400;
  letter-spacing: 0.058em;
  text-transform: uppercase;
  color: #4ade80;
  line-height: 1;
}

.stack-card__problem {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.3vw, 48px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.012em;
  color: #000000;
}

.stack-card__body {
  font-family: var(--font-sans);
  font-size: clamp(16px, 2.2vw, 32px);
  line-height: 1.5;
  color: rgba(0, 0, 0, 0.72);
}

/* Footer: tags + counter */
.stack-card__footer {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 64px;
  border-top: 1px solid var(--border);
}

.stack-card__tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.stack-card__counter {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.1em;
  color: rgba(0, 0, 0, 0.24);
  white-space: nowrap;
}

.stack-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  color: var(--fg-2);
  font-family: var(--font-mono);
}

.stack-tag::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
}

@media (max-width: 768px) {
  .stack__header-bar {
    padding: 24px 20px;
    gap: 16px;
  }

  .stack__sub {
    display: none;
  }

  .stack-card__topbar {
    padding: 12px 20px;
    gap: 12px;
  }

  .stack-card__num {
    width: 36px;
    height: 36px;
    font-size: 14px;
  }

  .stack-card__headline {
    font-size: clamp(13px, 3.6vw, 15px);
  }

  .stack-card__main {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  .stack-card__col {
    padding: clamp(14px, 2.5dvh, 24px) 20px;
    gap: clamp(10px, 2dvh, 20px);
  }

  .stack-card__col--problem {
    flex: 0 0 auto;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }

  .stack-card__col--solution {
    flex: 1 1 auto;
    min-height: 0;
  }

  .stack-card__problem {
    font-size: clamp(20px, 5.2vw, 28px);
    line-height: 1.2;
  }

  .stack-card__body {
    font-size: clamp(13.5px, 3.8vw, 18px);
    line-height: 1.55;
  }

  .stack-card__footer {
    padding: 12px 20px;
    gap: 12px;
  }

  .stack-card__tags {
    gap: 6px;
  }

  .stack-tag {
    padding: 4px 9px;
    font-size: 10px;
  }
}

/* ============================================================
 * JOURNEY (timeline)
 * ============================================================ */
.journey {
  padding: var(--section-pt) 0 var(--section-pb);
  border-top: 1px solid var(--border);
}

.journey__head {
  margin-bottom: var(--gap-section);
}

.journey__title {
  max-width: 16ch;
}

.journey__list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--border);
}

.journey-row {
  padding: 32px 8px;
  border-bottom: 1px solid var(--border);
  display: grid;
  grid-template-columns: 200px 280px 1fr;
  gap: 32px;
  align-items: start;
  transition: background 240ms, padding 240ms;
  position: relative;
}

@media (max-width: 880px) {
  .journey-row {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 24px 8px;
  }
}

.journey-row:hover {
  background: color-mix(in srgb, var(--fg) 3%, transparent);
}

.journey-row__date {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--fg-3);
  text-transform: uppercase;
  padding-top: 6px;
}

.journey-row__role {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.journey-row__company {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--fg);
}

.journey-row__title {
  font-size: 14px;
  color: var(--fg-2);
  font-weight: 500;
}

.journey-row__desc {
  font-size: 15px;
  line-height: 1.65;
  color: var(--fg-2);
  max-width: 64ch;
}

.journey-row__desc strong {
  color: var(--fg);
  font-weight: 600;
}

/* ============================================================
 * SKILLS / TOOLS
 * ============================================================ */
.skills {
  padding: var(--section-pt) 0 var(--section-pb);
  border-top: 1px solid var(--border);
}

.skills__head {
  margin-bottom: var(--gap-section);
}

.skills__title {
  max-width: 14ch;
}

.skills__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

@media (max-width: 880px) {
  .skills__grid {
    grid-template-columns: 1fr;
  }
}

.skills-card {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-top-color: var(--glass-border-top);
  border-radius: 20px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  box-shadow: var(--glass-shadow);
  transition: border-color 240ms, background 240ms, box-shadow 240ms;
}

.skills-card:hover {
  border-color: rgba(255, 255, 255, 0.14);
  border-top-color: rgba(255, 255, 255, 0.18);
  background: rgba(12, 12, 18, 0.82);
}

.skills-card__num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--accent);
  text-transform: uppercase;
}

.skills-card__title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--fg);
}

.skills-card__list {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.skills-card__list .chip {
  background: var(--bg);
}

/* ============================================================
 * CONTACT / FOOTER
 * ============================================================ */
.contact {
  padding: var(--section-pt) 0 var(--section-pb);
  border-top: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}

.contact__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  text-align: center;
  position: relative;
  z-index: 2;
}

.contact__eyebrow {
  color: var(--fg-3);
}

.contact__title {
  font-family: var(--font-display);
  font-size: clamp(40px, 7vw, 112px);
  font-weight: 700;
  line-height: 0.96;
  letter-spacing: -0.035em;
  color: var(--fg);
  max-width: 18ch;
}

.contact__title .acc {
  color: var(--accent);
}

.contact__sub {
  font-size: 17px;
  color: var(--fg-2);
  max-width: 56ch;
  line-height: 1.55;
}

.contact__cta-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 8px;
}

.contact__socials {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 24px;
}

.contact__social {
  padding: 10px 16px;
  background: var(--bg-elev-1);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 13px;
  color: var(--fg-2);
  font-weight: 500;
  transition: all 160ms;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.contact__social:hover {
  color: var(--fg);
  border-color: var(--border-accent);
  background: var(--bg-elev-2);
}

.contact__inline {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--fg-2);
}

.contact__inline-row {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.contact__inline-key {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-3);
}

.contact__bg-text {
  position: absolute;
  left: 50%;
  bottom: -10%;
  transform: translateX(-50%);
  font-family: var(--font-display);
  font-size: clamp(160px, 30vw, 480px);
  font-weight: 800;
  letter-spacing: -0.05em;
  color: var(--fg);
  opacity: 0.025;
  pointer-events: none;
  z-index: 1;
  white-space: nowrap;
  line-height: 0.8;
}

.footer {
  padding: 40px 4vw 56px;
}

/* ---- 3.6 Footer contact block + staggered entrance ---- */
.ft {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 48px;
  padding: 64px 0 96px;
}

.ft__title {
  margin: 0;
  max-width: 14ch;
  font-family: var(--font-display, 'Manrope', sans-serif);
  font-weight: 800;
  font-size: clamp(48px, 6.5vw, 96px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--fg);
}

.ft__word {
  display: inline-block;
}

.ft__word--serif {
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-weight: 400;
}

.ft__blocks {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 240px;
  padding-bottom: 8px;
}

.ft__block {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ft__key {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.96px;
  color: var(--fg);
  opacity: 0.48;
  /* follows the active theme instead of a fixed white */
}

.ft__val {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 500;
  color: var(--fg);
  text-decoration: none;
}

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

/* Entrance: the wrapper itself stays put (neutralise the generic reveal);
   words & blocks rise in one after another (spec tokens: 600ms /
   ease-out-expo / 80ms stagger via --i) */
html.reveal-armed .ft[data-reveal] {
  opacity: 1;
  transform: none;
  filter: none;
}

html.reveal-armed .ft .ft__word,
html.reveal-armed .ft .ft__block {
  opacity: 0;
  transform: translateY(32px);
  transition:
    opacity var(--duration-slow) var(--ease-out-expo),
    transform var(--duration-slow) var(--ease-out-expo);
  transition-delay: calc(var(--i, 0) * var(--stagger-unit));
}

html.reveal-armed .ft.is-revealed .ft__word,
html.reveal-armed .ft.is-revealed .ft__block {
  opacity: 1;
  transform: none;
}

@media (max-width: 880px) {
  .ft {
    flex-direction: column;
    align-items: flex-start;
    gap: 48px;
    padding: 48px 0 64px;
  }

  .ft__title {
    max-width: 100%;
  }
}

.footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.footer__brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-weight: 600;
  color: var(--fg-2);
  font-size: 13px;
}

.footer__meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--fg-3);
  text-transform: uppercase;
}

.footer__links {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 12px 20px;
}

.footer__links a {
  font-size: 13px;
  color: var(--fg-3);
}

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

/* ============================================================
 * REVEAL ANIMATIONS
 * Base state is VISIBLE. The hidden-then-reveal effect is only
 * "armed" (html.reveal-armed) when JS confirms the animation
 * timeline is running — so content is never trapped invisible
 * in throttled / capture contexts with a frozen timeline.
 * ============================================================ */
[data-reveal] {
  opacity: 1;
  transform: none;
}

html.reveal-armed [data-reveal] {
  opacity: 0;
  transform: translateY(32px);
  filter: blur(10px);
  transition: opacity var(--duration-hero) var(--ease-out-expo),
    transform var(--duration-hero) var(--ease-out-expo),
    filter var(--duration-slow) var(--ease-out-expo);
  will-change: opacity, transform, filter;
}

html.reveal-armed [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
  filter: blur(0);
}

html.reveal-armed [data-reveal-delay="1"] {
  transition-delay: calc(var(--stagger-unit) * 1);
}

html.reveal-armed [data-reveal-delay="2"] {
  transition-delay: calc(var(--stagger-unit) * 2);
}

html.reveal-armed [data-reveal-delay="3"] {
  transition-delay: calc(var(--stagger-unit) * 3);
}

html.reveal-armed [data-reveal-delay="4"] {
  transition-delay: calc(var(--stagger-unit) * 4);
}

html.reveal-armed [data-reveal-delay="5"] {
  transition-delay: calc(var(--stagger-unit) * 5);
}

html.reveal-armed [data-reveal="stagger-up"] {
  transform: translateY(60px);
}

html.reveal-armed [data-reveal="stagger-up"].is-revealed {
  transform: none;
}

html.reveal-armed [data-reveal="scale-in"] {
  transform: scale(0.96);
}

html.reveal-armed [data-reveal="scale-in"].is-revealed {
  transform: none;
}

/* Focal metric number reveal — minimal slide-up paired with JS count-up */
.case-result__value,
.result-cell__num,
.compare-row__val,
.pscroll__metric-value {
  opacity: 1;
  transform: none;
}

html.reveal-armed .case-result__value,
html.reveal-armed .result-cell__num,
html.reveal-armed .compare-row__val,
html.reveal-armed .pscroll__metric-value {
  opacity: 0;
  transform: translateY(var(--sp-xl));
  filter: blur(8px);
  transition: opacity var(--duration-slow) var(--ease-out-expo),
    transform var(--duration-slow) var(--ease-out-expo),
    filter var(--duration-slow) var(--ease-out-expo);
  transition-delay: calc(var(--stagger-unit) * var(--metric-index, 0));
  will-change: opacity, transform, filter;
}

html.reveal-armed .case-result__value.is-revealed,
html.reveal-armed .result-cell__num.is-revealed,
html.reveal-armed .compare-row__val.is-revealed,
html.reveal-armed .pscroll__metric-value.is-revealed {
  opacity: 1;
  transform: none;
  filter: blur(0);
}

/* Motion tweak: minimal disables reveal entirely */
[data-motion="minimal"].reveal-armed [data-reveal],
[data-motion="minimal"].reveal-armed .case-result__value,
[data-motion="minimal"].reveal-armed .result-cell__num,
[data-motion="minimal"].reveal-armed .compare-row__val,
[data-motion="minimal"].reveal-armed .pscroll__metric-value {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  transition: none !important;
}

/* ============================================================
 * SUI.IO-STYLE AURORA — layered fixed blobs, mix-blend-mode: screen
 * Five elliptical orbs create overlapping colour zones across the
 * full page height.  All in the existing green/teal palette.
 * ============================================================ */
main {
  position: relative;
  z-index: 1;
}

.bg-orb {
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  mix-blend-mode: screen;
}

/* Orb 1 — bright green, hero top-left (most prominent, sui.io hero glow) */
.bg-orb--1 {
  width: 900px;
  height: 700px;
  top: -180px;
  left: -200px;
  background: radial-gradient(ellipse at center,
      rgba(74, 222, 128, 0.18) 0%,
      rgba(74, 222, 128, 0.06) 45%,
      transparent 70%);
  filter: blur(90px);
  animation: orbDrift1 12s ease-in-out alternate infinite;
}

/* Orb 2 — teal/cyan, right side mid — creates green+teal mixing = sui.io feel */
.bg-orb--2 {
  width: 750px;
  height: 900px;
  top: 20vh;
  right: -220px;
  background: radial-gradient(ellipse at center,
      rgba(45, 212, 191, 0.15) 0%,
      rgba(6, 182, 212, 0.06) 45%,
      transparent 70%);
  filter: blur(110px);
  animation: orbDrift2 17s ease-in-out alternate infinite;
}

/* Orb 3 — emerald, bottom-left — anchors the footer zone */
.bg-orb--3 {
  width: 1000px;
  height: 800px;
  bottom: -250px;
  left: -180px;
  background: radial-gradient(ellipse at center,
      rgba(16, 185, 129, 0.12) 0%,
      rgba(5, 150, 105, 0.05) 50%,
      transparent 70%);
  filter: blur(120px);
  animation: orbDrift3 22s ease-in-out alternate infinite;
}

/* Orb 4 — lime accent, dead-center of viewport — fills the middle gap */
.bg-orb--4 {
  width: 600px;
  height: 600px;
  top: 35vh;
  left: 30vw;
  background: radial-gradient(ellipse at center,
      rgba(163, 230, 53, 0.07) 0%,
      transparent 65%);
  filter: blur(100px);
  animation: orbDrift4 19s ease-in-out alternate infinite;
}

/* Orb 5 — cyan edge, top-right — creates the "two light sources" sui.io feel */
.bg-orb--5 {
  width: 700px;
  height: 550px;
  top: -80px;
  right: 5vw;
  background: radial-gradient(ellipse at center,
      rgba(34, 211, 238, 0.10) 0%,
      transparent 65%);
  filter: blur(100px);
  animation: orbDrift5 15s ease-in-out alternate infinite;
}

@keyframes orbDrift1 {
  from {
    transform: translate(0, 0) scale(1);
  }

  to {
    transform: translate(70px, 50px) scale(1.12);
  }
}

@keyframes orbDrift2 {
  from {
    transform: translate(0, 0) scale(1);
  }

  to {
    transform: translate(-60px, 80px) scale(1.18);
  }
}

@keyframes orbDrift3 {
  from {
    transform: translate(0, 0) scale(1);
  }

  to {
    transform: translate(50px, -60px) scale(1.10);
  }
}

@keyframes orbDrift4 {
  from {
    transform: translate(0, 0) scale(1);
  }

  to {
    transform: translate(-40px, -50px) scale(1.14);
  }
}

@keyframes orbDrift5 {
  from {
    transform: translate(0, 0) scale(1);
  }

  to {
    transform: translate(-80px, 60px) scale(1.08);
  }
}

/* Floating decorative orb */
.deco-orb {
  position: absolute;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--accent-soft), transparent 65%);
  filter: blur(40px);
  pointer-events: none;
  z-index: 0;
  animation: orbFloat 22s ease-in-out infinite;
}

@keyframes orbFloat {

  0%,
  100% {
    transform: translate(0, 0);
  }

  33% {
    transform: translate(40px, -30px);
  }

  66% {
    transform: translate(-30px, 40px);
  }
}

/* 3D-ish geometric decoration */
.geo-deco {
  position: absolute;
  pointer-events: none;
  z-index: 0;
}

.geo-deco svg {
  display: block;
}

/* ============================================================
 * Tweaks panel — additional overrides
 * ============================================================ */
.tweaks-swatch-row {
  display: flex;
  gap: 8px;
}

.tweaks-swatch {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: border-color 160ms, transform 160ms;
}

.tweaks-swatch:hover {
  transform: scale(1.05);
}

.tweaks-swatch.is-active {
  border-color: var(--fg);
}

/* ============================================================
 * CASE STUDY pages
 * ============================================================ */
.case-hero > .container,
.case-section > .container,
.case-next > .container,
.case-hero ~ .footer > .container {
  padding-inline: clamp(64px, 8vw, 128px);
}

.case-hero {
  min-height: min(var(--hero-min-h, clamp(680px, 80vh, 780px)), 100vh);
  max-height: 100vh;
  padding: 32px 0 44px;
  position: relative;
  overflow: hidden;
  border-bottom: 0;
  color: #ffffff;
  display: flex;
  flex-direction: column;
}

.case-hero > .container {
  position: static;
  flex: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
}

.case-hero > .container > :not(.case-hero__art) {
  position: relative;
  z-index: 2;
}

.case-hero__back {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 9999px;
  background: rgba(34, 37, 42, 0.76);
  border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: #ffffff;
  margin-bottom: 48px;
  transition: color var(--duration-fast) var(--ease-in-out),
    background-color var(--duration-fast) var(--ease-in-out),
    border-color var(--duration-fast) var(--ease-in-out),
    transform var(--duration-fast) var(--ease-in-out);
}

.case-hero__back:hover {
  color: var(--accent);
  background: rgba(26, 28, 32, 0.88);
  border-color: var(--border-accent);
  transform: translateX(-2px);
}

.case-hero__meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 44px;
}

.case-hero__meta > .chip {
  flex-shrink: 0;
}

.case-hero__meta.case-hero__meta--wrap-1-2 {
  row-gap: 4px;
}

.case-hero__meta.case-hero__meta--wrap-1-2::before {
  content: "";
  flex-basis: 100%;
  height: 0;
  order: 1;
}

.case-hero__meta.case-hero__meta--wrap-1-2 > .chip:first-child {
  order: 0;
}

.case-hero__meta.case-hero__meta--wrap-1-2 > .chip:nth-child(n + 2) {
  order: 2;
}

.case-result + .case-hero__meta {
  margin-bottom: 0;
}

.case-hero .chip {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(26px);
  -webkit-backdrop-filter: blur(26px);
  color: #ffffff;
}

.case-hero .chip--accent {
  background: rgba(74, 222, 128, 0.18);
  border-color: rgba(74, 222, 128, 0.48);
  color: #ffffff;
}

.case-hero__title {
  --indent-bar-w: clamp(4px, 0.42vw, 6px);
  --indent-bar-gap: clamp(16px, 1.5vw, 22px);
  font-family: var(--font-display);
  font-size: clamp(28px, calc(4.8vw - 4px), 68px);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.03em;
  color: #ffffff;
  max-width: 22ch;
  margin-bottom: 12px;
  padding-left: calc(var(--indent-bar-w) + var(--indent-bar-gap));
  text-indent: calc(-1 * (var(--indent-bar-w) + var(--indent-bar-gap)));
  text-wrap: balance;
}

.case-hero__title::before {
  content: "";
  display: inline-block;
  width: var(--indent-bar-w);
  height: calc(1.06em * 0.8);
  height: 0.8lh;
  margin-right: var(--indent-bar-gap);
  background-color: var(--accent);
  vertical-align: -4%;
}

.case-hero__back+ :not(.case-hero__art) {
  margin-top: auto;
}
.case-hero__title .acc {
  color: var(--accent);
}

.case-hero__lead {
  font-size: clamp(12px, calc(1.35vw - 4px), 16px);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.86);
  max-width: none;
}

.case-hero__lead strong {
  color: #ffffff;
  font-weight: 600;
}

.case-hero .case-result {
  --case-result-plain: #ffffff;
  gap: clamp(24px, 3.2vw, 56px);
  margin-top: 48px;
}

.case-hero__strip {
  --strip-border: rgba(255, 255, 255, 0.2);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: 18px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--strip-border);
  border-radius: 16px;
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  overflow: hidden;
}

.case-hero__strip:has(.case-hero__strip-cell:nth-child(3):last-child) {
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 880px) {
  .case-hero__strip,
  .case-hero__strip:has(.case-hero__strip-cell:nth-child(3):last-child) {
    grid-template-columns: repeat(2, 1fr);
  }
}

.case-hero__strip-cell {
  padding: 12px 18px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.case-hero__strip-cell + .case-hero__strip-cell {
  border-left: 1px solid var(--strip-border);
}

@media (max-width: 880px) {
  .case-hero__strip-cell:nth-child(2n + 1) {
    border-left: 0;
  }

  .case-hero__strip-cell:nth-child(n + 3) {
    border-top: 1px solid var(--strip-border);
  }
}

@media (max-width: 600px) {
  .case-hero__strip,
  .case-hero__strip:has(.case-hero__strip-cell:nth-child(3):last-child) {
    grid-template-columns: 1fr;
    margin-top: 16px;
    border-radius: 12px;
  }

  .case-hero__strip-cell {
    padding: 10px 14px;
  }

  .case-hero__strip-cell + .case-hero__strip-cell {
    border-left: 0;
    border-top: 1px solid var(--strip-border);
  }
}

.case-hero__strip-key {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.68);
}

.case-hero__strip-val {
  font-size: 15px;
  color: #ffffff;
  font-weight: 500;
  line-height: 1.45;
}

/* Section frames */
.case-section {
  padding: 96px 0;
  border-bottom: 1px solid var(--border);
  position: relative;
  line-break: strict;
  overflow-wrap: break-word;
}

.u-nowrap {
  white-space: nowrap;
}

.case-section--quiet {
  padding: 80px 0;
}

.case-section__head {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 48px;
  align-items: start;
  margin-bottom: 48px;
}

@media (max-width: 1024px) {
  .case-section__head {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-bottom: 32px;
  }
}

.case-section__kicker {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 6px;
}

.case-section__kicker .step {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

.case-section__kicker .role {
  font-size: 13px;
  color: var(--fg-3);
}

.case-section__title {
  font-family: var(--font-display);
  font-size: clamp(21px, 3vw, 40px);
  font-weight: 700;
  line-height: 1.24;
  letter-spacing: -0.022em;
  color: var(--fg);
  max-width: 100%;
  text-wrap: balance;
}

.case-section__body {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 48px;
  align-items: start;
}

@media (max-width: 1024px) {
  .case-section__body {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .case-section__body-spacer {
    display: none;
  }
}

.case-section__body-spacer {}

.case-prose {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 40em;
}

.case-prose p {
  font-size: 17px;
  line-height: 1.78;
  color: var(--fg-2);
  text-wrap: pretty;
}

.case-prose p strong {
  color: var(--fg);
  font-weight: 600;
}

/* Bulleted list — used in prose & strategy rows */
.case-list {
  list-style: none;
  margin: 4px 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 34.375em;
}

.case-prose > .case-list {
  max-width: 100%;
}

.case-list li {
  position: relative;
  padding-left: 22px;
  font-size: 16px;
  line-height: 1.72;
  color: var(--fg-2);
  text-wrap: pretty;
}

.case-list li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 0.7em;
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: var(--accent);
}

.strat-row__body+.case-list {
  margin-top: 12px;
}

/* Hypothesis cards */
.hypo-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr 1fr;
  margin-top: 32px;
}

@media (max-width: 720px) {
  .hypo-grid {
    grid-template-columns: 1fr;
  }
}

.hypo-card {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-top-color: var(--glass-border-top);
  border-radius: 18px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: var(--glass-shadow);
  transition: border-color 240ms, background 240ms;
}

@media (max-width: 720px) {
  .hypo-card {
    padding: 24px 22px;
  }
}

.hypo-card:hover {
  border-color: var(--border-accent);
  border-top-color: var(--border-accent);
  background: rgba(74, 222, 128, 0.12);
}

.hypo-card__num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--accent);
  text-transform: uppercase;
}

.hypo-card__title {
  font-family: var(--font-display);
  font-size: clamp(18px, 1.5vw, 19px);
  font-weight: 600;
  line-height: 1.32;
  color: var(--fg);
  letter-spacing: -0.012em;
  text-wrap: balance;
}

.hypo-card__body {
  font-size: 15px;
  line-height: 1.68;
  color: var(--fg-2);
  max-width: 42em;
  text-wrap: pretty;
}

.hypo-grid:not([style*="1fr"]) .hypo-card:not([style*="1 / -1"]) .hypo-card__body {
  max-width: 21em;
}

/* Strategy stack — like the home stack but simpler */
.strat-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.strat-row {
  background: var(--bg-elev-1);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 36px;
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 32px;
  align-items: start;
  transition: border-color 240ms, transform 240ms var(--ease-out-expo),
    background 240ms;
}

.strat-row:hover {
  border-color: var(--border-accent);
  transform: translateY(-2px);
  background: var(--bg-elev-2);
}

@media (max-width: 720px) {
  .strat-row {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 24px 22px;
  }
}

.strat-row__marker {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--accent);
  font-weight: 600;
  padding-top: 6px;
}

.strat-row__title {
  font-family: var(--font-display);
  font-size: clamp(18px, 1.7vw, 24px);
  font-weight: 600;
  line-height: 1.28;
  color: var(--fg);
  letter-spacing: -0.015em;
  margin-bottom: 12px;
  text-wrap: balance;
}

.strat-row__body {
  font-size: 16px;
  line-height: 1.72;
  color: var(--fg-2);
  max-width: 34.375em;
  text-wrap: pretty;
}

.strat-row__body + .strat-row__body {
  margin-top: 8px;
}

.strat-row__body strong {
  color: var(--fg);
  font-weight: 600;
}

.strat-row--rejected {
  opacity: 0.7;
}

.strat-row--rejected .strat-row__marker {
  color: var(--fg-3);
}

.strat-row--rejected .strat-row__title::after {
  content: "未採用";
  display: inline-block;
  margin-left: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--fg-3);
  padding: 3px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-weight: 500;
  vertical-align: middle;
  text-transform: uppercase;
}

.strat-row--chosen .strat-row__title::after {
  content: "採用";
  display: inline-block;
  margin-left: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--accent);
  padding: 3px 10px;
  border: 1px solid var(--border-accent);
  background: var(--accent-soft);
  border-radius: 999px;
  font-weight: 600;
  vertical-align: middle;
  text-transform: uppercase;
}

.strat-row--split {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sp-2xl);
  align-items: start;
}

.strat-row__col {
  display: flex;
  flex-direction: column;
  gap: var(--sp-md);
  min-width: 0;
}

.strat-row--split .strat-row__marker {
  padding-top: 0;
}

.strat-row--split .strat-row__title {
  margin-bottom: var(--sp-xs);
}

.strat-row--split .strat-row__body {
  max-width: 19.5em;
}

.strat-row--split .case-note {
  margin-top: 0;
  max-width: 22.5em;
}

.strat-row__figure {
  width: 100%;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
}

.strat-row__figure img,
.strat-row__figure video {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 720px) {
  .strat-row--split {
    grid-template-columns: 1fr;
    gap: var(--sp-xl);
  }
}

/* Section-level split — media on one side, stacked strategy cards on the other */
.case-split {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: var(--sp-xl);
  align-items: stretch;
}

.case-split__col {
  display: flex;
  flex-direction: column;
  gap: var(--sp-md);
  min-width: 0;
}

.case-split__figure {
  flex: 1;
  width: 100%;
  border-radius: 20px;
  overflow: hidden;
  background: #000000;
  border: 1px solid var(--border);
}

.case-split__figure img,
.case-split__figure video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
  transform: scale(1.06);
}

.case-split .strat-row {
  padding: 24px 26px;
  grid-template-columns: 28px 1fr;
  gap: 12px;
}

.case-split .strat-row__title {
  font-size: clamp(18px, 1.3vw, 20px);
}

.case-split .strat-row__body {
  max-width: 19.5em;
}

@media (max-width: 1080px) {
  .case-section__body--split {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .case-section__body--split > .case-section__body-spacer {
    display: none;
  }
}

@media (max-width: 720px) {
  .case-split {
    grid-template-columns: 1fr;
    gap: var(--sp-xl);
    align-items: start;
  }

  .case-split__figure {
    flex: none;
    aspect-ratio: 4 / 5;
  }

  .case-split .strat-row {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 24px 22px;
  }
}


/* Funnel viz */
.funnel {
  background: var(--bg-elev-1);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 40px;
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.funnel__caption {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-bottom: 18px;
}

.funnel__row {
  position: relative;
  display: grid;
  grid-template-columns: 200px 1fr 140px;
  gap: 20px;
  align-items: center;
  padding: 16px 0;
  border-top: 1px solid var(--border);
}

.funnel__row:first-of-type {
  border-top: 0;
}

@media (max-width: 720px) {
  .funnel {
    padding: 24px 16px;
    border-radius: 20px;
  }

  .funnel__row {
    grid-template-columns: 1fr auto;
    gap: 8px 12px;
  }

  .funnel__row> :nth-child(2) {
    grid-column: 1 / -1;
    order: 3;
  }

  .funnel__row.is-break {
    padding-bottom: 28px;
  }

  .funnel__row.is-break::after {
    top: auto;
    bottom: 4px;
    right: 0;
  }
}

.funnel__label {
  font-size: 15px;
  color: var(--fg);
  font-weight: 500;
}

.funnel__bar {
  position: relative;
  height: 36px;
  background: var(--bg-elev-2);
  border-radius: 6px;
  overflow: hidden;
}

.funnel__bar-fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: linear-gradient(90deg,
      var(--accent),
      color-mix(in srgb, var(--accent) 50%, transparent));
  border-radius: 6px;
  transition: width 1200ms var(--ease-out-expo);
}

.funnel__row.is-break .funnel__bar-fill {
  background: linear-gradient(90deg,
      #ff6b6b,
      color-mix(in srgb, #ff6b6b 40%, transparent));
}

.funnel__row.is-break::after {
  content: "↓ 最大斷點";
  position: absolute;
  right: 4px;
  bottom: -2px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: #ff6b6b;
}

.funnel__value {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--fg-2);
  text-align: right;
  white-space: nowrap;
}

/* Results */
.result-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin-top: 16px;
}

@media (max-width: 880px) {
  .result-grid {
    grid-template-columns: 1fr;
  }
}

.result-cell {
  padding: 48px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.result-cell+.result-cell {
  border-left: 1px solid var(--border);
}

@media (max-width: 880px) {
  .result-cell {
    padding: 32px 24px;
  }

  .result-cell+.result-cell {
    border-left: 0;
    border-top: 1px solid var(--border);
  }
}

.result-cell__num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(40px, 7vw, 88px);
  line-height: 0.9;
  letter-spacing: -0.035em;
  color: var(--fg);
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.result-cell__num .unit {
  font-size: 0.4em;
  color: var(--accent);
  font-weight: 600;
}

.result-cell__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-3);
}

.result-cell__sub {
  font-size: 14px;
  line-height: 1.65;
  color: var(--fg-2);
  max-width: 24em;
  text-wrap: pretty;
}

/* Comparison table for funnel comparison */
.compare-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  margin-top: 32px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

@media (max-width: 720px) {
  .compare-grid {
    grid-template-columns: 1fr;
  }
}

.compare-row {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.compare-row:nth-child(2n) {
  border-left: 1px solid var(--border);
}

.compare-row:nth-child(n + 3) {
  border-top: 1px solid var(--border);
}

@media (max-width: 720px) {
  .compare-row {
    padding: 20px 20px;
  }

  .compare-row:nth-child(2n) {
    border-left: 0;
  }

  .compare-row + .compare-row {
    border-top: 1px solid var(--border);
  }
}

.compare-row__label {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg-3);
  letter-spacing: 0.08em;
}

.compare-row__val {
  font-family: var(--font-display);
  font-size: clamp(24px, 4.5vw, 32px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--accent);
}

/* Case footer / next */
.case-next {
  padding: 96px 0;
  border-bottom: 1px solid var(--border);
}

.case-next__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.case-next__card--next {
  grid-column: 2;
}

@media (max-width: 720px) {
  .case-next__inner {
    grid-template-columns: 1fr;
  }

  .case-next__card--next {
    grid-column: auto;
  }
}

.case-next__card {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-top-color: var(--glass-border-top);
  border-radius: 24px;
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: var(--glass-shadow);
  transition: border-color 240ms, transform 240ms var(--ease-out-expo),
    background 240ms;
  text-decoration: none;
  color: inherit;
}

.case-next__card:hover {
  border-color: var(--border-accent);
  border-top-color: var(--border-accent);
  /* light green wash on hover */
  background: rgba(74, 222, 128, 0.12);
  transform: translateY(-3px);
}

.case-next__card:hover .case-next__arrow {
  transform: translate(6px, -6px);
  color: var(--accent);
}

@media (max-width: 720px) {
  .case-next__card {
    padding: 28px 24px;
  }
}

.case-next__kicker {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-3);
}

.case-next__title {
  font-family: var(--font-display);
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: -0.018em;
  color: var(--fg);
  text-wrap: balance;
}

.case-next__arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--fg-3);
  transition: transform 240ms var(--ease-out-expo), color 240ms;
  margin-top: 8px;
}

/* Pull-quote / callout */
/* ── Case-page chip ──
   .chip had no styling of its own and rendered as plain 16px text. It now
   borrows .stack-tag's box and type wholesale (same padding, radius, border,
   size, mono face, accent dot) so tags read the same on the case pages as on
   the home page. Used by the hero meta, the capability tags and the flow
   chain below. */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  color: var(--fg-2);
  font-family: var(--font-mono);
}

.chip::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}

.chip--accent {
  background: var(--accent-soft);
  border-color: var(--border-accent);
  color: var(--fg);
}

/* ── Pull quote ──
   The only genuinely new visual in this pass. .callout (accent fill + 20px
   radius + 32/36 padding) is too loud to appear five times in one page and
   would outweigh the section ledes; this sits between body copy and lede. */
.case-quote {
  margin: 32px 0;
  padding-left: 24px;
  border-left: 3px solid var(--accent);
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 600;
  line-height: 1.52;
  letter-spacing: -0.012em;
  color: var(--fg);
  max-width: 32em;
  text-wrap: balance;
}

/* ── Result figures ──
   Same visual language as .pscroll__metric-* on the home page so a number
   means the same thing in Work and inside a case. Colours move to the light
   theme's tokens; line-height is 1 rather than the panel's 0.54, which only
   existed to seat a superscript unit span that these do not have. */
.case-result {
  --case-result-plain: var(--fg);
  display: flex;
  align-items: flex-start;
  gap: clamp(12px, calc(1.4vw - 4px), 20px);
  flex-wrap: wrap;
  margin-top: 32px;
}

[data-theme="dark"] .case-result {
  --case-result-plain: #ffffff;
}

.case-result__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  min-width: 0;
}

.case-result__item--left {
  align-items: flex-start;
  text-align: left;
}

.case-result__value {
  --case-result-val-size: clamp(32px, 3.125vw, 60px);
  display: inline-block;
  font-family: var(--font-display);
  font-size: var(--case-result-val-size);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--case-result-plain);
  vertical-align: baseline;
  white-space: nowrap;
}

.case-result__sym {
  font-size: clamp(24px, 2.0833vw, 40px);
  font-weight: 400;
  line-height: 1;
  vertical-align: baseline;
}

.case-result__sym--plus {
  display: inline-block;
  position: relative;
  top: -0.34em;
  color: var(--accent);
}

.case-result__sym--arrow {
  display: inline-block;
  position: relative;
  top: calc(0.3365em - 0.354 * var(--case-result-val-size));
}

.case-result__cap {
  --indent-bar-w: 2px;
  --indent-bar-gap: 6px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--accent);
  text-align: left;
  padding-left: calc(var(--indent-bar-w) + var(--indent-bar-gap));
  text-indent: calc(-1 * (var(--indent-bar-w) + var(--indent-bar-gap)));
}

.case-result__cap::before {
  content: "";
  display: inline-block;
  width: var(--indent-bar-w);
  height: 0.92em;
  margin-right: var(--indent-bar-gap);
  background-color: var(--accent);
  vertical-align: -0.1em;
}

.case-result__cap-plain {
  color: var(--case-result-plain);
}

/* ── Signal chain ── chips joined by arrows */
.case-flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
}

.case-flow__arrow {
  font-size: 14px;
  color: var(--fg-3);
}

/* The chip dot reads as a list bullet, which is right for the capability tags
   but noise inside a directed sequence — the arrows already do the joining. */
.case-flow .chip::before {
  display: none;
}

/* ── Source / footnote under a figure ── one step down from .case-prose p
   (17px, --fg-2) in both size and weight of colour */
/* .case-prose p is (0,1,1) and was winning over a bare .case-note (0,1,0),
   so source notes inside prose rendered at the body's 17px instead of 14px.
   The compound selector settles it wherever the note appears. */
.case-note,
.case-prose p.case-note {
  font-size: 14px;
  line-height: 1.7;
  color: var(--fg-3);
  margin-top: 12px;
  text-wrap: pretty;
}

/* ── L2 fold ── native <details>: collapsed by default, expands in flow so
   nothing below it jumps, and needs no JS */
.case-fold {
  margin-top: 32px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.case-fold summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  color: var(--fg);
}

.case-fold summary::-webkit-details-marker {
  display: none;
}

.case-fold__chevron {
  font-size: 14px;
  color: var(--fg-3);
  transition: transform var(--duration-base) var(--ease-in-out);
}

.case-fold[open] .case-fold__chevron {
  transform: rotate(180deg);
}

.case-fold__body {
  padding-bottom: 24px;
}

/* single-field variant of the hero meta strip */
.case-hero__strip--single {
  grid-template-columns: 1fr;
}

.callout {
  background: var(--accent-soft);
  border: 1px solid var(--border-accent);
  border-radius: 20px;
  padding: 32px 36px;
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

@media (max-width: 720px) {
  .callout {
    padding: 24px 22px;
  }
}

.callout__kicker {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

.callout__body {
  font-family: var(--font-display);
  font-size: clamp(19px, 2.4vw, 28px);
  font-weight: 600;
  line-height: 1.42;
  color: var(--fg);
  letter-spacing: -0.015em;
  text-wrap: balance;
}

/* Case hero artwork — full-bleed background visual that dissolves on scroll */
.case-hero__art {
  --hero-fade-start: 40%;
  --hero-fade-end: 58%;
  position: absolute;
  inset: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border-radius: 0;
  /* Pure black base (#000000) */
  background-color: #000000;
  border: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

[data-theme="dark"] .case-hero__art {
  background-color: #000000;
}

.case-hero__art img,
.case-hero__art video,
.case-hero__art image-slot {
  position: absolute;
  top: 0;
    left: 0;
    right: 0;
    bottom: auto;
  width: 100%;
  height: calc(var(--hero-fade-end, 58%) + 24px);
  object-fit: cover;
  object-position: center;
  display: block;
  opacity: 1;
  filter: saturate(0.88) contrast(1.02);
  transform-origin: center top;
  will-change: opacity, transform, filter;
}

/* Hide unfilled image-slot drop prompt when used as a hero background */
.case-hero__art image-slot:not([data-filled]) {
  opacity: 0 !important;
}

/* Pure black mask (#000000): fades smoothly from top of meta chips to bottom of hero title */
.case-hero__art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, 0.7) var(--hero-fade-start, 40%),
      #000000 var(--hero-fade-end, 58%)
  );
  pointer-events: none;
}

/* Generic image slot block inside case study */
.case-image {
  margin: 32px 0;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 20px;
  overflow: hidden;
  background: var(--bg-elev-1);
  border: 1px solid var(--border);
  position: relative;
}

.case-image image-slot {
  width: 100%;
  height: 100%;
}

.case-image--tall {
  aspect-ratio: 4 / 5;
  max-width: 480px;
}

.case-image--wide {
  aspect-ratio: 21 / 9;
}

.case-image-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin: 32px 0;
}

.case-image-grid .case-image {
  margin: 0;
}

@media (max-width: 1024px) {
  .case-hero > .container,
  .case-section > .container,
  .case-next > .container,
  .case-hero ~ .footer > .container {
    padding-inline: var(--sp-4xl);
  }
}

@media (max-width: 880px) {
  .case-hero > .container,
  .case-section > .container,
  .case-next > .container,
  .case-hero ~ .footer > .container {
    padding-inline: var(--sp-3xl);
  }

  .case-hero {
    min-height: min(var(--hero-min-h, clamp(580px, 74vh, 680px)), 100vh);
    max-height: 100vh;
    padding: 28px 0 20px;
  }

  .case-section {
    padding: 64px 0;
  }

  .case-section--quiet {
    padding: 56px 0;
  }

  .case-next {
    padding: 64px 0;
  }
}

@media (max-width: 720px) {
  .case-image-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .case-hero > .container,
  .case-section > .container,
  .case-next > .container,
  .case-hero ~ .footer > .container {
    padding-inline: clamp(20px, 6vw, 32px);
  }

  .case-hero {
    min-height: min(var(--hero-min-h, clamp(520px, 70vh, 620px)), 100vh);
    max-height: none;
    padding: 24px 0 20px;
  }

  .case-hero__back {
    margin-bottom: 24px;
  }

  .case-hero__meta {
    margin-bottom: 32px;
  }

  .case-hero__title {
    margin-bottom: 10px;
  }

  .case-section {
    padding: 48px 0;
  }

  .case-section--quiet {
    padding: 40px 0;
  }

  .case-result {
    gap: 16px;
    margin-top: 24px;
  }

  .case-hero .case-result {
    gap: 20px;
    margin-top: 36px;
  }

  .strat-row {
    padding: 24px 24px;
    border-radius: 16px;
  }

  .hypo-card {
    padding: 24px 24px;
  }

  .callout {
    padding: 24px 24px;
    border-radius: 16px;
  }

  .case-quote {
    font-size: 18px;
    padding-left: 16px;
    margin: 24px 0;
  }

  .case-image {
    border-radius: 16px;
    margin: 24px 0;
  }

  .case-next {
    padding: 48px 0;
  }

  .case-next__card {
    padding: 28px 24px;
    border-radius: 20px;
  }

  .case-next__title {
    font-size: clamp(17.5px, 4.6vw, 21px);
  }
}

/* ============================================================
 * CURSOR IMAGE PREVIEW
 * ============================================================ */
.cursor-preview {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 9990;
  will-change: transform;
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease-in-out);
}

.cursor-preview.is-active {
  opacity: 1;
}

.cursor-preview__frame {
  width: 280px;
  aspect-ratio: 4 / 3;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-top-color: var(--glass-border-top);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--glass-shadow);
  position: relative;
  transform: scale(0.92);
  transition: transform 320ms var(--ease-out-expo);
}

.cursor-preview.is-active .cursor-preview__frame {
  transform: scale(1);
}

.cursor-preview__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cursor-preview__placeholder {
  width: 100%;
  height: 100%;
  background:
    linear-gradient(135deg, var(--bg-elev-2) 0%, var(--bg-elev-3) 100%);
  position: relative;
  overflow: hidden;
}

.cursor-preview__placeholder::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 30% 40%, var(--accent-soft) 0%, transparent 60%);
}

.cursor-preview__label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 10px 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-2);
  background: linear-gradient(to top, rgba(8, 8, 12, 0.9), transparent);
}

/* Hide preview when custom cursor is disabled */
body:not(.has-custom-cursor) .cursor-preview {
  display: none;
}

/* ============================================================
 * CUSTOM CURSOR — buttermax liquid blob
 * Large gradient blob + mix-blend-mode: difference = negative-film inversion.
 * Border-radius morphs organically; hue rotates continuously; velocity
 * stretches the blob toward the mouse (liquid squish via RAF transform).
 * ============================================================ */
/* ============================================================
 * CUSTOM CURSOR — velocity-scaling circle
 * Simple accent-coloured circle; grows as the mouse speeds up.
 * Color switches per project card via cursor:accent events.
 * No blend-mode inversion — native cursor arrow stays visible.
 * ============================================================ */
.cursor-blob {
  position: fixed;
  top: 0;
  left: 0;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: #ffffff;
  opacity: 0.9;
  mix-blend-mode: difference;
  pointer-events: none;
  z-index: 9999;
  will-change: transform, width, height;
  transition: opacity var(--duration-fast) var(--ease-in-out), mix-blend-mode 0s;
}

/* Over images: disable inversion so photos look normal */
.cursor-blob.over-image {
  mix-blend-mode: normal;
  opacity: 0.25;
  background: #ffffff;
}

/* ============================================================
 * RESPONSIVE — 4 tiers
 *   超大網  ≥1920px   (ultra-wide / large monitor)
 *   大網    1025–1919 (desktop, default fluid clamps)
 *   中網    601–1024  (tablet / large phone)
 *   小網    ≤600      (phone)
 * ============================================================ */

/* ---- 超大網 ≥1920：cap growth, keep things centred ---- */
@media (min-width: 1920px) {
  .hero {
    max-width: 1920px;
    margin-inline: auto;
  }

  .hero__nav-pill {
    right: max(20px, calc((100vw - 1920px) / 2 + 20px));
  }
}

/* ---- Mobile / tablet header (ref.digital style) ---- */
.mnav {
  display: none;
}

.mnav-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: #f5f4f1;
  display: flex;
  flex-direction: column;
  padding: 18px 20px 28px;
  animation: mnavIn var(--duration-base) var(--ease-out-expo);
}

@keyframes mnavIn {
  from {
    opacity: 0;
    transform: translateY(-12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.mnav-overlay__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.mnav-overlay__logo {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(64px, 22vw, 200px);
  line-height: 0.9;
  letter-spacing: clamp(-6px, -1vw, -2px);
  color: #111;
}

.mnav-overlay__close {
  background: none;
  border: none;
  cursor: pointer;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  letter-spacing: 1px;
  color: #111;
  padding: 6px 0;
}

.mnav-overlay__links {
  display: flex;
  flex-direction: column;
  gap: clamp(6px, 1.5vh, 14px);
  margin-top: auto;
  margin-bottom: 8vh;
}

.mnav-overlay__links a {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(28px, 7vw, 56px);
  line-height: 1.15;
  color: #111;
  text-decoration: none;
}

.mnav-overlay__links a:active {
  color: #4ade80;
}

/* ---- 中網 ≤1024：collapse hero grid, scale type, fix nav ---- */
@media (max-width: 1024px) {

  /* Hero becomes a single stacked column; no pinning on touch layouts */
  .hero-pin {
    height: auto;
  }

  .hero {
    position: static;
    height: auto;
    min-height: calc(clamp(520px, 46vw, 884px) + 28vh);
    padding: 96px 24px clamp(110px, 18vh, 160px);
    overflow: visible;
  }

  .hero__grid {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(24px, 5vw, 48px);
    height: auto;
  }

  .hero__brand-row {
    order: 1;
  }

  .hero__title-block {
    order: 2;
  }

  .hero__desc-col {
    order: 3;
    transform: none;
    opacity: 1;
  }

  .hero__brand-row {
    transform: none;
    opacity: 1;
  }

  .hero__title-block {
    transform: none;
    opacity: 1;
  }

  /* Big wordmark hugs its text; star sits right beside it, smaller than the type */
  .hero__brand {
    width: auto;
    height: auto;
  }

  .hero__brand-text {
    font-size: clamp(96px, 16vw, 150px);
  }

  .hero__brand-row {
    gap: clamp(14px, 3vw, 28px);
    align-items: center;
  }

  .hero__stroke-star {
    width: clamp(48px, 9vw, 84px);
    height: clamp(48px, 9vw, 84px);
  }

  .hero__title {
    font-size: clamp(44px, 9vw, 92px);
    line-height: 1.05;
  }

  .hero__title-line {
    white-space: normal;
  }

  /* allow wrapping on narrow */

  .hero__desc-col {
    width: 100%;
  }

  .hero__desc {
    max-width: 60ch;
    white-space: normal;
  }

  /* ref.digital-style header: small brand + MENU button; pill hidden */
  .hero__nav-pill {
    display: none;
  }

  .site-brand {
    display: none;
  }

  .mnav {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 70;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    pointer-events: none;
  }

                .mnav::before {
                  content: '';
                  position: absolute;
                  top: 0;
                  left: 0;
                  width: min(100%, 280px);
                  height: 96px;
                  z-index: -1;
                  pointer-events: none;
                  background: radial-gradient(ellipse 170px 72px at 44px 26px,
                      rgba(255, 255, 255, 0.90) 0%,
                      rgba(255, 255, 255, 0.64) 48%,
                      rgba(255, 255, 255, 0) 100%);
                  -webkit-backdrop-filter: blur(16px) saturate(155%);
                  backdrop-filter: blur(16px) saturate(155%);
                  -webkit-mask-image: radial-gradient(ellipse 175px 74px at 44px 26px,
                      #000 0%,
                      rgba(0, 0, 0, 0.82) 38%,
                      rgba(0, 0, 0, 0.25) 68%,
                      transparent 100%);
                  mask-image: radial-gradient(ellipse 175px 74px at 44px 26px,
                      #000 0%,
                      rgba(0, 0, 0, 0.82) 38%,
                      rgba(0, 0, 0, 0.25) 68%,
                      transparent 100%);
                  opacity: 0;
                  transition: opacity 0.28s cubic-bezier(0.22, 1, 0.36, 1);
                }
        
                body.yui-hero-overlap:not(.brand-on-dark) .mnav::before {
                  opacity: 1;
                }
  .mnav__brand {
    pointer-events: none;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 24px;
    letter-spacing: -1px;
    color: #17171a;
    text-decoration: none;
    /* 3.7: hidden while the big hero Yui is on screen (opacity only) */
    opacity: 0;
    transition:
      opacity var(--duration-base) var(--ease-in-out),
      color var(--duration-base) var(--ease-in-out);
  }

  body.big-yui-hidden .mnav__brand {
    opacity: 1;
    pointer-events: auto;
  }

  .mnav__toggle {
    pointer-events: auto;
    background: none;
    border: none;
    cursor: pointer;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    letter-spacing: 1px;
    color: #17171a;
    padding: 8px 0;
    transition: color var(--duration-base) var(--ease-in-out);
  }

  body.brand-on-dark .mnav__brand,
  body.brand-on-dark .mnav__toggle {
    color: #fff;
  }

  /* Cursor-trail frames are a desktop/pointer nicety — disable on touch */
  .hero__frames {
    display: none;
  }

  .hero__marquee-item {
    font-size: clamp(30px, 6vw, 52px);
  }

  /* Projects / Stack already collapse via their own rules; keep the
     proportional marquee → container overlap so nothing clips */
  .pscroll {
    margin-top: calc(-2.8vw - 24px);
  }
}

/* ---- 小網 ≤600：phone — single column, simplified nav ---- */
@media (max-width: 600px) {
  .hero {
    min-height: calc(clamp(460px, 46vw, 640px) + 24vh);
    padding: 80px 18px clamp(100px, 16vh, 140px);
  }

                .hero.hero--diamond {
                  min-height: calc(clamp(460px, 46vw, 640px) + 24vh);
                  padding: 0;
                  margin-bottom: 0;
                }
        
                .hero--diamond .hero__content {
                  padding: 12px 16px 48px;
                }
        
                .hero--diamond .hero__title-block {
                  margin-top: auto;
                  margin-bottom: 60px;
                }
  .hero__brand-text {
    font-size: clamp(72px, 24vw, 112px);
  }

  .hero__stroke-star {
    width: clamp(40px, 13vw, 60px);
    height: clamp(40px, 13vw, 60px);
  }

                .hero__title,
                .hero--diamond .hero__title {
    font-size: clamp(32px, 10.8vw, 56px);
  }

                .hero__desc,
                .hero--diamond .hero__desc {
    font-size: 15px;
    line-height: 1.78;
  }

  /* Full-width compact bar — all links stay visible & tappable */
  .hero__nav-pill {
    left: 10px;
    right: 10px;
    width: auto;
  }

  .hero__nav-pill__inner {
    gap: 6px;
    padding: 5px;
    height: auto;
    min-height: 46px;
  }

  .hero__nav-pill__items {
    gap: 0;
    padding: 0;
  }

  .hero__nav-pill__item {
    min-width: 0;
    padding: 7px 7px;
    font-size: 11px;
    letter-spacing: -0.2px;
  }

  .hero__nav-pill__cta {
    padding: 7px 10px;
    font-size: 11px;
    margin-left: 0;
  }

                .hero__cta-row,
                .hero--diamond .hero__cta-row {
    gap: 18px;
    padding-top: 0;
  }

  .hero__marquee-item {
    font-size: clamp(26px, 8vw, 40px);
  }

  .hero__marquee-tri {
    height: calc(5.8vw + 68px);
  }

  .ft {
    gap: 32px;
    padding: 36px 0 48px;
  }

  .ft__title {
    font-size: clamp(36px, 11vw, 52px);
    margin-right: 0 !important;
  }

  .ft__blocks {
    min-width: 0;
    width: 100%;
  }

  .ft__val {
    word-break: break-word;
  }

  /* Tighten generic section padding */
  .container {
    padding-inline: 16px;
  }
}

/* ============================================================
 * prefers-reduced-motion — single consolidated block.
 *
 * Deliberately the LAST block in this file. Several rules here are plain
 * class selectors competing with equally specific base rules further up
 * (.pscroll sets color:#fff and margin-top:-100px), so source order is what
 * lets them win — placed earlier, the static Works list rendered white-on-
 * white.
 *
 * !important is load-bearing on the hero rules, not defensive: those compete
 * with `.hero.is-revealed .hero__brand` (0,3,0) against their own (0,1,0), so
 * order alone cannot save them. Without it every `animation: none` silently
 * lost the cascade and the full hero entrance played for users who had opted
 * out. `opacity: 1` could not rescue it either — a running CSS animation
 * outranks normal declarations regardless of specificity.
 * ============================================================ */
@media (prefers-reduced-motion: reduce) {

  .hero__brand,
  .hero__stroke-star,
  .hero__diamond-entrance,
  .hero__nav-pill__inner,
  .hero__title-line,
  .hero__desc,
  .hero__cta-row,
  .hero__meta-left {
    opacity: 1 !important;
    animation: none !important;
  }

  .hero__brand-row,
  .hero__diamond-stage,
  .hero__title-block,
  .hero__desc-col {
    transform: none !important;
    opacity: 1 !important;
  }

  /* merged in from the old second block (was at :688) */
  .hero__stroke-img,
  .hero__diamond-img {
    animation: none !important;
  }

  /* merged in from the old third block (was at :899) — split-text chars start
     at opacity 0.2 and are driven by JS, so they must be forced opaque */
  .stxc {
    opacity: 1 !important;
  }

  /* ---- Works: no pin, no scroll-jack ----
     Projects renders <StaticProjects> in this mode, so the sticky three-column
     panel is not in the DOM at all. These rules style the static list and
     neutralise the shared .pscroll base styles it still inherits. The height
     override needs !important because React sets it inline. */
  /* Keeps the dark backdrop of the normal Works panel (.pscroll__bg is
     #0d0d10) rather than re-colouring it: every .pscroll__* text class is
     written for a dark ground, so dropping the backdrop would have rendered
     the whole list white-on-white. */
  .pscroll--static {
    height: auto !important;
    margin-top: 0;
    background: #0d0d10;
    color: #fff;
    padding: var(--sp-9) var(--gutter);
  }

  .pscroll-static__eyebrow {
    margin-bottom: var(--sp-6);
  }

  .pscroll-static__list {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--sp-9);
    max-width: var(--container-max);
  }

  .pscroll-static__item {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
  }

  .pscroll-static__counter {
    font-family: var(--font-mono);
    font-size: var(--t-caption-sm);
    letter-spacing: var(--ls-caption-sm);
    color: var(--fg-3);
  }

  .pscroll-static__media img,
  .pscroll-static__media video {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background: #000;
  }

  .pscroll-static__body {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  /* the marquee wrapper no longer needs to pin over a tall Works section */
  .mq-sticky {
    position: static;
  }
}