/* ============================================================
   频率融合 HARMONIZE MUSIC — style.css
   Design system based on instrument.com
   ============================================================ */

/* ── Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Instrument+Serif&family=Noto+Serif+SC:wght@400;500;700;900&display=swap');

/* ── Design Tokens ────────────────────────────────────────── */
:root {
  /* Colors */
  --bg:             #ffffff;
  --fg:             #070708;
  --accent-bg:      #070708;
  --accent-fg:      #ffffff;
  --muted:          rgba(7, 7, 8, 0.35);  /* lighter gray — clearly distinct from black */
  --border:         #e5e5e5;
  --red:            #E8272A;

  /* Typography */
  --font-sans:      'Instrument Sans', Helvetica, Arial, sans-serif;
  /* 思源宋体 — via Google Fonts (Noto Serif SC) */
  --font-serif:     "Noto Serif SC", "Source Han Serif CN", "Source Han Serif SC",
                    "思源宋体 CN", serif;

  /* Easing */
  --ease:           cubic-bezier(.73,.24,.68,.82);
  --ease-out:       cubic-bezier(0, 0, .3, 1);
  --duration:       0.3s;

  /* Layout */
  --nav-h:          51px;
  --radius:         24px;
  --grid-gap:       8px;

  /* Fixed mobile spacing (locked to 480px layout) */
  --space-8:  6px;
  --space-16: 12px;
  --space-24: 16px;
  --space-32: 20px;
  --space-48: 28px;
  --space-64: 36px;
  --space-80: 44px;
  --space-96: 52px;

  /* Side spacing */
  --side:     20px;
}

/* ── Force mobile layout on all devices ───────────────────── */
html {
  /* Make media queries always see mobile width */
  overflow-x: hidden;
}
body {
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
  /* On desktop, add subtle border to frame the content */
  box-shadow: none;
}
@media (min-width: 481px) {
  body { box-shadow: 0 0 0 1px var(--border); min-height: 100vh; }
  html { background: #f5f5f5; }
}

/* ── Reset ────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--fg);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  /* breathing background color transition */
  transition: background-color 0.9s cubic-bezier(0.4, 0, 0.2, 1),
              color 0.9s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: background-color;
}
/* Light rose background state — homepage scroll (white → #ffe5e5) */
body.bg-rose {
  background-color: #ffe5e5;
}
/* Custom background state — case page bg-change with custom color */
body.bg-custom {
  background-color: var(--custom-bg, #ffffff);
}
/* Vibrant red background state — about page (triggered by JS on scroll) */
body.bg-red {
  background-color: #ED3031;
  --fg:     #ffffff;
  --muted:  rgba(255, 255, 255, 0.65);
  --border: rgba(255, 255, 255, 0.18);
}
/* Header on rose background: frosted pink to match bg */
body.bg-rose .global-header.scrolled {
  background: rgba(255, 229, 229, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: transparent;
}
body.bg-rose .global-header {
  border-bottom-color: transparent;
}
/* Header on red background: frosted red (not dark) to avoid black flash during transition */
body.bg-red .global-header.scrolled {
  background: rgba(237, 48, 49, 0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom-color: transparent;
}
/* Also keep unscrolled header on red bg transparent */
body.bg-red .global-header {
  border-bottom-color: transparent;
}
/* Header on custom background: match the custom bg color */
body.bg-custom .global-header.scrolled {
  background: color-mix(in srgb, var(--custom-bg, #ffffff) 92%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: transparent;
}
body.bg-custom .global-header {
  border-bottom-color: transparent;
}
/* ── Mobile menu open: header fully transparent, logo + X always dark ── */
body.menu-open .global-header,
body.menu-open .global-header.scrolled {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom-color: transparent !important;
}
body.menu-open .global-logo-link img {
  filter: none !important;
}
body.menu-open .menu-button {
  color: rgba(7, 7, 8, 0.68);
}
/* Logo: invert dark logo to white when page background is dark */
body.bg-dark .global-logo-link img {
  filter: brightness(0) invert(1);
  transition: filter 0.9s cubic-bezier(0.4, 0, 0.2, 1);
}
body.bg-dark .menu-button:not(.is-open) { color: #ffffff; }
/* Dark bg: switch all case content text to white */
body.bg-dark .case-breadcrumb__link,
body.bg-dark .case-breadcrumb__sep,
body.bg-dark .case-breadcrumb__current,
body.bg-dark .case-breadcrumb__tag,
body.bg-dark .case-meta__title,
body.bg-dark .case-meta__summary,
body.bg-dark .block-heading h2,
body.bg-dark .block-body p,
body.bg-dark .block-section-label__eyebrow,
body.bg-dark .block-section-label__text,
body.bg-dark .block-quote__text,
body.bg-dark .block-quote__name,
body.bg-dark .block-quote__role,
body.bg-dark .block-stats .stat-value,
body.bg-dark .block-stats .stat-label,
body.bg-dark .case-stat__value,
body.bg-dark .case-stat__label {
  color: #ffffff;
  transition: color 0.9s cubic-bezier(0.4, 0, 0.2, 1);
}
body.bg-dark .case-breadcrumb__link { color: rgba(255,255,255,0.7); }
body.bg-dark .case-breadcrumb__sep { color: rgba(255,255,255,0.4); }
body.bg-dark .block-divider { background: rgba(255,255,255,0.15); }
body.bg-dark .case-stats { border-top-color: rgba(255,255,255,0.15); }
body.bg-dark .case-breadcrumb { border-top-color: rgba(255,255,255,0.15); }
body.bg-dark .case-breadcrumb__row { border-bottom-color: rgba(255,255,255,0.15); }
.global-logo-link img {
  transition: filter 0.9s cubic-bezier(0.4, 0, 0.2, 1);
}
a { color: inherit; text-decoration: none; }
img { display: block; width: 100%; height: auto; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
ul { list-style: none; }

/* ── Utility ──────────────────────────────────────────────── */
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap;
}


/* ════════════════════════════════════════════════════════════
   NAVIGATION — instrument.com structure
════════════════════════════════════════════════════════════ */

/* Page-load entrance: header slides in from above */
@keyframes header-slide-in {
  from { transform: translateY(-110%); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}

.global-header {
  animation: header-slide-in 0.72s 0.08s cubic-bezier(0.22, 1, 0.36, 1);
  position: sticky;
  top: 0;
  z-index: 1003;
  height: var(--nav-h);
  background: rgba(255,255,255,0);
  display: flex;
  align-items: center;
  transition: background 0.9s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.9s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.38s cubic-bezier(0.4, 0, 0.2, 1);
  border-bottom: 1px solid transparent;
  will-change: background, transform;
}
/* Hide header on scroll-down, reveal on scroll-up (instrument.com style) */
.global-header.header-hidden {
  transform: translateY(-100%);
}
.global-header.scrolled {
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: transparent;
}

/* Logo — left side, absolute */
.global-logo-link {
  position: absolute;
  left: var(--side);
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  height: var(--nav-h);
  text-decoration: none;
}
.global-logo-link img {
  height: 32px;
  width: auto;
  display: block;
}

/* Nav wrapper */
.global-nav {
  width: 100%;
  position: relative;
}

/* Desktop large nav — flex row */
.global-nav-large {
  display: flex;
  align-items: center;
  height: var(--nav-h);
  width: 100%;
}

/* Left primary links */
.gnl-primary {
  display: flex;
  align-items: center;
  gap: 30px;
  padding-left: calc(var(--side) + 170px);
  list-style: none;
  flex-shrink: 0;
}

/* Shared link styles — 12px uppercase like instrument.com */
.gnl-primary a,
.gnl-secondary a {
  font-size: 12px;
  font-family: var(--font-sans);
  font-weight: 400;
  letter-spacing: 1.34px;
  text-transform: uppercase;
  color: var(--fg);
  padding: 12px 5px;
  transition: opacity 0.2s;
  white-space: nowrap;
}
.gnl-primary a:hover,
.gnl-secondary a:hover { opacity: 0.5; }

/* Center marquee ticker */
.gnl-marquee {
  flex: 1;
  overflow: hidden;
  height: 20px;
  font-size: 11px;
  font-family: var(--font-sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg);
  opacity: 0.45;
  -webkit-mask-image: linear-gradient(to right, transparent 0, black 60px, black calc(100% - 60px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, black 60px, black calc(100% - 60px), transparent 100%);
}
.gnl-marquee-track {
  display: flex;
  white-space: nowrap;
  animation: marquee-scroll 32s linear infinite;
}
.gnl-marquee-track span { flex-shrink: 0; }
@keyframes marquee-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Right secondary links */
.gnl-secondary {
  display: flex;
  align-items: center;
  gap: 30px;
  padding-right: var(--side);
  list-style: none;
  flex-shrink: 0;
}

/* ── Hamburger button ── */
.menu-button {
  display: none;
  position: fixed;
  right: 20px;
  top: 0;
  height: var(--nav-h);
  align-items: center;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--fg);
  padding: 0;
  line-height: 0;
  z-index: 1020;
  /* 与 logo 保持同步的颜色过渡 */
  transition: color 0.9s cubic-bezier(0.4, 0, 0.2, 1);
}
/* 红色背景时汉堡图标变白，与 logo 同色 */
/* Toggle icons: hamburger ↔ close */
.menu-button .icon-close { display: none; }
.menu-button.is-open .icon-hamburger { display: none; }
.menu-button.is-open .icon-close { display: block; }

/* ── Mobile nav panel — instrument.com frosted-glass full-screen ── */
.global-nav-small {
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  overflow-y: auto;
  padding: 0 30px;
  z-index: 1000;
  /* Hidden by default — animate opacity + slide in from top */
  opacity: 0;
  pointer-events: none;
  transform: translateY(-12px);
  transition: opacity 0.32s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}
.global-nav-small.open {
  opacity: 1;
  pointer-events: all;
  transform: translateY(0);
}

/* Main links list */
.gnl-links {
  list-style: none;
  margin-top: 110px;
  flex: 1;
}
/* Main nav items — stagger animation base state */
.gnl-links > li {
  border-bottom: 1px solid rgba(7, 7, 8, 0.1);
  padding: 10px 0;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.38s ease, transform 0.38s ease;
}
.gnl-links > li.item-visible {
  opacity: 1;
  transform: translateY(0);
}
.gnl-links > li > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-sans);
  font-size: 34px;
  font-weight: 400;
  letter-spacing: -0.8px;
  color: rgba(7, 7, 8, 0.68);
  text-decoration: none;
  transition: color 0.15s;
}
.gnl-links > li > a:hover { color: rgba(7, 7, 8, 0.38); }

/* Sub-menu — indented, no dividers, no arrow, dark gray, one size up */
.gnl-sub {
  list-style: none;
  padding: 4px 0 6px 24px;
}
.gnl-sub > li {
  border-bottom: none !important;
  padding: 5px 0;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.32s ease, transform 0.32s ease;
}
.gnl-sub > li.item-visible {
  opacity: 1;
  transform: translateY(0);
}
.gnl-sub > li a {
  display: block;
  font-family: var(--font-sans);
  font-size: 22px;
  font-weight: 400;
  letter-spacing: -0.4px;
  color: rgba(7, 7, 8, 0.55);
  text-decoration: none;
  transition: color 0.15s;
}
.gnl-sub > li a:hover { color: rgba(7, 7, 8, 0.85); }

/* CSS arrow  —→  */
.gnl-arrow {
  display: block;
  position: relative;
  width: 35px;
  height: 7px;
  border-bottom: 1px solid rgba(7, 7, 8, 0.45);
  flex-shrink: 0;
}
.gnl-arrow::before {
  content: '';
  position: absolute;
  right: 0;
  bottom: -5px;
  width: 8px;
  height: 8px;
  border-right: 1px solid rgba(7, 7, 8, 0.45);
  border-top: 1px solid rgba(7, 7, 8, 0.45);
  transform: rotate(45deg);
}

/* (gnl-social removed — replaced by .gnl-brand) */
.gnl-social {
  display: none;
}
.gnl-social a {
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: 1.7px;
  text-transform: uppercase;
  color: rgba(7, 7, 8, 0.5);
  text-decoration: none;
  transition: opacity 0.15s;
}
.gnl-social a:hover { opacity: 0.8; }

@media (max-width: 99999px) { /* forced mobile */
  .global-nav-large { display: none; }
  .menu-button { display: flex; }
  .global-logo-link { left: 20px; }
}


/* ════════════════════════════════════════════════════════════
   HERO — Video Reel (always 16:9, like instrument.com)
════════════════════════════════════════════════════════════ */
.hero {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #111;
  cursor: pointer;
  border-radius: 24px;
}

/* Placeholder: behind video (DOM order ensures this, no explicit z-index needed) */
.hero-placeholder {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #111 0%, #1a1a1a 50%, #0a0a0a 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-placeholder::after {
  content: '视频展示位 — 建议规格：1920×1080，MP4';
  font-size: 11px;
  font-family: var(--font-sans);
  color: rgba(255,255,255,0.15);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Video: after placeholder in DOM, so naturally on top */
.hero video {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}

/* Play icon — solid black circle on top of everything */
.hero-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: #070708;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  transition: transform 0.35s var(--ease);
}
.hero:hover .hero-play {
  transform: translate(-50%, -50%) scale(1.08);
}
.hero-play svg {
  width: 20px;
  height: 20px;
  fill: white;
  transform: translateX(2px);
}


/* ════════════════════════════════════════════════════════════
   TEXT TOUT — intro section
════════════════════════════════════════════════════════════ */
.text-tout {
  padding: var(--space-96) var(--side);
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-16);
}
/* Button gets extra breathing room above to separate from text */
.text-tout .tout-btn {
  margin-top: var(--space-32);
}
/* Company name line — heaviest serif weight, single line */
.tout-company {
  font-family: var(--font-serif);
  font-size: 24px;
  font-weight: 900;
  line-height: 1.2;
  white-space: nowrap;
}
.tout-company strong {
  font-weight: 900;
  font-family: var(--font-serif);
}
/* Body text — smaller than company title, ≥3 lines, breathing room on right */
.tout-body {
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7;
  padding-right: 2em;
}
.tout-desc {
  font-size: 15px;
  color: var(--muted);
  max-width: 480px;
  line-height: 1.7;
}

/* CTA button — black pill, white text, gray arrow (instrument.com style) */
.tout-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--fg);
  color: var(--bg);
  border-radius: 999px;
  padding: 14px 26px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.03em;
  text-decoration: none;
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
  cursor: pointer;
}
.tout-btn:hover {
  opacity: 0.82;
  transform: translateY(-1px);
}
.tout-btn__label { color: var(--bg); }
.tout-btn__arrow {
  display: flex;
  align-items: center;
  opacity: 0.45;
  transition: transform 0.2s var(--ease), opacity 0.2s;
}
.tout-btn:hover .tout-btn__arrow {
  transform: translateX(3px);
  opacity: 0.65;
}


/* ════════════════════════════════════════════════════════════
   FEATURED WORK GRID (homepage)
════════════════════════════════════════════════════════════ */
.featured-work-section {
  padding: var(--space-64) 0 var(--space-96);
}

.section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 0 var(--side);
  margin-bottom: var(--space-32);
}
.section-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.section-link {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--fg);
  padding-bottom: 1px;
  opacity: 0.6;
  transition: opacity 0.2s;
}
.section-link:hover { opacity: 1; }

/* Filter tabs */
.filter-nav {
  display: flex;
  gap: var(--space-8);
  padding: 0 var(--side);
  margin-bottom: var(--space-32);
  flex-wrap: wrap;
}
.filter-btn {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 8px 16px;
  border-radius: 100px;
  border: 1px solid var(--border);
  color: var(--muted);
  transition: all 0.2s;
  cursor: pointer;
  background: none;
}
.filter-btn:hover {
  border-color: var(--fg);
  color: var(--fg);
}
.filter-btn.active {
  background: var(--fg);
  color: var(--bg);
  border-color: var(--fg);
}

/* ── Work page — category filter bar ────────────────────── */
.wk-filter-bar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 0 24px;
  margin-bottom: 32px;
}
.wk-filter-btn {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 9px 20px;
  border-radius: 100px;
  border: none;
  cursor: pointer;
  background: #ebebeb;
  color: #555;
  transition: background 0.18s, color 0.18s;
  white-space: nowrap;
}
.wk-filter-btn:hover:not(.active) {
  background: #ddd;
  color: #222;
}
.wk-filter-btn.active {
  background: #111;
  color: #fff;
}

/* Work cards grid */
.featured-work-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--grid-gap);
  padding: 0 var(--side);
}

@media (max-width: 99999px) { /* forced mobile */
  .featured-work-grid { grid-template-columns: 1fr; }
}

/* Work card */
.work-card {
  display: block;
  text-decoration: none;
  color: var(--fg);
  cursor: pointer;
}
.work-card__media {
  border-radius: var(--radius);
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #f0f0f0;
  position: relative;
}
.work-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.05);
  transition: transform 0.5s var(--ease);
}
.work-card:hover .work-card__media img {
  transform: scale(1);
}

/* Image placeholder */
.img-placeholder {
  width: 100%; height: 100%;
  background: #f0f0ee;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
  color: #aaa;
  font-size: 12px;
  letter-spacing: 0.04em;
  transform: scale(1.05);
  transition: transform 0.5s var(--ease);
}
.work-card:hover .img-placeholder {
  transform: scale(1);
}

.work-card__body {
  padding: 12px 0 32px;
}
/* Title only — matches instrument.com: 20px sans, normal weight */
.work-card__title {
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: normal;
  color: var(--fg);
  margin-bottom: 6px;
}
/* Category tag — #hashtag style */
.work-card__tag {
  font-size: 12px;
  font-family: var(--font-sans);
  font-weight: 400;
  letter-spacing: 1.34px;
  text-transform: uppercase;
  color: var(--muted);
}
.work-card__tag::before { content: '#'; }

/* Small thumb cards */
.work-card.work-card--thumb .work-card__media {
  aspect-ratio: 4 / 3;
}
.work-card.work-card--thumb .work-card__title {
  font-size: 15px;
}


/* ════════════════════════════════════════════════════════════
   WORK PAGE
════════════════════════════════════════════════════════════ */

/* Page hero */
.page-hero {
  padding: var(--space-96) var(--side) var(--space-48);
  border-bottom: 1px solid var(--border);
}
.page-hero__eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--space-16);
}
.page-hero__title {
  font-family: var(--font-serif);
  font-size: 52px;
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: -0.03em;
}
.page-hero__sub {
  font-size: 14px;
  color: var(--muted);
  margin-top: var(--space-16);
  letter-spacing: 0.04em;
}

/* Work features section — large top cards */
.work-features {
  padding: var(--space-64) var(--side) var(--space-48);
}
.work-features-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--grid-gap);
}
@media (max-width: 99999px) { /* forced mobile */
  .work-features-grid { grid-template-columns: 1fr; }
}

/* Card grid — all remaining cases */
.card-grid {
  padding: 0 var(--side) var(--space-96);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: var(--grid-gap);
  row-gap: var(--space-48);
}
@media (max-width: 99999px) { /* forced mobile */
  .card-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 99999px) { /* forced mobile */
  .card-grid { grid-template-columns: 1fr; }
}


/* ════════════════════════════════════════════════════════════
   CASE DETAIL PAGE
════════════════════════════════════════════════════════════ */

/* Breadcrumb */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: var(--space-24) var(--side);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.breadcrumb a { transition: color 0.2s; }
.breadcrumb a:hover { color: var(--fg); }
.breadcrumb__sep { opacity: 0.4; }
.breadcrumb__current { color: var(--fg); }

/* Text hero — case title */
.text-hero {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  padding: var(--space-48) var(--side) var(--space-64);
}
.text-hero__eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.text-hero__title {
  font-family: var(--font-serif);
  font-size: 36px;
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.025em;
  max-width: 900px;
}
.text-hero__sub {
  font-size: 15px;
  color: var(--muted);
  max-width: 560px;
  line-height: 1.7;
}

/* Stats row */
.stats-row {
  display: flex;
  gap: 0;
  padding: var(--space-48) var(--side);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.stat-item {
  flex: 1;
  padding: 0 var(--space-32) 0 0;
  border-right: 1px solid var(--border);
  margin-right: var(--space-32);
}
.stat-item:last-child {
  border-right: none;
  margin-right: 0;
}
.stat-value {
  font-family: var(--font-serif);
  font-size: 28px;
  font-weight: 400;
  line-height: 1;
  color: var(--red);
}
.stat-label {
  font-size: 12px;
  color: var(--muted);
  margin-top: 8px;
  letter-spacing: 0.04em;
}
@media (max-width: 99999px) { /* forced mobile */
  .stats-row { flex-wrap: wrap; }
  .stat-item {
    flex: 0 0 50%;
    border-right: none;
    padding: var(--space-16) 0;
    border-bottom: 1px solid var(--border);
  }
}

/* Text block */
.text-block {
  padding: var(--space-64) var(--side);
  max-width: 800px;
}
.text-block__body {
  font-size: 17px;
  line-height: 1.75;
  color: var(--fg);
}
.text-block__body p + p { margin-top: 1em; }

/* Media component — full-width image/video */
.media-component {
  padding: 0 var(--side);
  margin: var(--space-48) 0;
}
.media-component__inner {
  border-radius: var(--radius);
  overflow: hidden;
  background: #f0f0ee;
}
.media-component--full {
  padding: 0;
}
.media-component--full .media-component__inner {
  border-radius: 0;
}
.media-component__inner img {
  width: 100%; height: auto;
  display: block;
}
.media-placeholder {
  aspect-ratio: 16/9;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 12px;
  background: #f0f0ee;
  color: #aaa;
  font-size: 13px;
  letter-spacing: 0.04em;
}
.media-placeholder--tall { aspect-ratio: 4/3; }
.media-placeholder--square { aspect-ratio: 1/1; }

/* Card carousel — multi-image row */
.card-carousel {
  padding: 0 var(--side);
  margin: var(--space-48) 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--grid-gap);
}
.card-carousel--3col { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 99999px) { /* forced mobile */
  .card-carousel { grid-template-columns: 1fr; }
  .card-carousel--3col { grid-template-columns: 1fr 1fr; }
}
.carousel-item {
  border-radius: var(--radius);
  overflow: hidden;
  background: #f0f0ee;
  aspect-ratio: 3/4;
}
.carousel-item img {
  width: 100%; height: 100%;
  object-fit: cover;
}

/* Tags */
.tags-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: var(--space-16) var(--side);
}
.tag {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 100px;
  border: 1px solid var(--border);
  color: var(--muted);
}

/* Next case */
.next-case {
  border-top: 1px solid var(--border);
  padding: var(--space-64) var(--side);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-32);
}
.next-case__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--space-8);
}
.next-case__title {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
  transition: opacity 0.2s;
}
.next-case:hover .next-case__title { opacity: 0.6; }
.next-case__arrow {
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 1.5px solid var(--fg);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background 0.2s, color 0.2s;
}
.next-case:hover .next-case__arrow {
  background: var(--fg);
  color: var(--bg);
}


/* ════════════════════════════════════════════════════════════
   ABOUT PAGE
════════════════════════════════════════════════════════════ */
.about-hero {
  padding: var(--space-96) var(--side) var(--space-64);
  border-bottom: 1px solid var(--border);
}
.about-hero__eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--space-24);
}
.about-hero__title {
  font-family: var(--font-serif);
  font-size: 36px;
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.025em;
  max-width: 800px;
  margin-bottom: var(--space-24);
}
.about-hero__desc {
  font-size: 17px;
  color: var(--muted);
  max-width: 600px;
  line-height: 1.75;
}

/* Key numbers */
.numbers-section {
  padding: var(--space-64) var(--side);
  border-bottom: 1px solid var(--border);
}
.numbers-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.number-item {
  background: var(--bg);
  padding: var(--space-48) var(--space-32);
  text-align: center;
}
.number-value {
  font-family: var(--font-serif);
  font-size: 36px;
  font-weight: 400;
  line-height: 1;
  color: var(--red);
}
.number-label {
  font-size: 13px;
  color: var(--muted);
  margin-top: 10px;
  letter-spacing: 0.04em;
}
@media (max-width: 99999px) { /* forced mobile */
  .numbers-grid { grid-template-columns: 1fr; }
}

/* About image */
.about-image-section {
  padding: var(--space-64) var(--side);
}
.about-image-section img {
  border-radius: var(--radius);
}
.about-image-placeholder {
  aspect-ratio: 16/7;
  border-radius: var(--radius);
  background: #f0f0ee;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
  color: #aaa;
  font-size: 13px;
}

/* Services */
.services-section {
  padding: var(--space-64) var(--side) var(--space-96);
  background: #fafaf8;
}
.services-section .section-header {
  padding: 0;
  margin-bottom: var(--space-48);
}
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.service-item {
  background: var(--bg);
  padding: var(--space-48) var(--space-32);
}
.service-num {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--red);
  margin-bottom: var(--space-16);
}
.service-name {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.2;
  margin-bottom: var(--space-24);
}
.service-list li {
  font-size: 13px;
  color: var(--muted);
  padding: 6px 0;
  border-top: 1px solid var(--border);
  line-height: 1.5;
}
@media (max-width: 99999px) { /* forced mobile */
  .services-grid { grid-template-columns: 1fr; }
}

/* Distribution */
.distribution-section {
  padding: var(--space-80) var(--side);
  border-top: 1px solid var(--border);
}
.distribution-section .section-header {
  padding: 0;
  margin-bottom: var(--space-48);
}
.dist-image {
  border-radius: var(--radius);
  overflow: hidden;
}
.dist-placeholder {
  aspect-ratio: 21/9;
  border-radius: var(--radius);
  background: #f0f0ee;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #aaa;
  font-size: 13px;
}


/* ════════════════════════════════════════════════════════════
   CTA SECTION
════════════════════════════════════════════════════════════ */
.cta-section {
  background: var(--fg);
  color: var(--bg);
  padding: var(--space-96) var(--side);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-32);
}
.cta-eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--red);
}
.cta-title {
  font-family: var(--font-serif);
  font-size: 28px;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.02em;
  max-width: 600px;
}
.cta-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bg);
  border-bottom: 1.5px solid rgba(255,255,255,0.4);
  padding-bottom: 3px;
  transition: border-color 0.2s;
}
.cta-link:hover { border-color: var(--bg); }


/* ════════════════════════════════════════════════════════════
   FOOTER
════════════════════════════════════════════════════════════ */
.global-footer {
  background: #070708;
  color: #f5f4ef;
  padding: var(--space-64) var(--side) 0;
}
/* Logo row */
.footer-top {
  padding-bottom: var(--space-48);
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.footer-logo-img {
  height: 40px;
  width: auto;
  display: block;
}
/* SEE MORE eyebrow label */
.footer-section-label {
  display: block;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.7px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.28);
  margin-top: var(--space-48);
  margin-bottom: 18px;
}
/* SEE MORE nav links */
.footer-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.footer-nav a {
  font-family: var(--font-sans);
  font-size: 21px;
  font-weight: 400;
  letter-spacing: -0.2px;
  color: rgba(255,255,255,0.5);
  text-decoration: none;
  padding: 4px 0;
  transition: color 0.2s;
}
.footer-nav a:hover { color: rgba(255,255,255,0.9); }
/* SEE MORE section — border below nav */
.footer-see-more {
  padding-bottom: var(--space-48);
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
/* Copyright bar — doubled padding (space-48 each side) */
.footer-bottom {
  padding: var(--space-48) 0;
  font-family: var(--font-sans);
  font-size: 11px;
  color: rgba(255,255,255,0.25);
  letter-spacing: 0.04em;
}
/* Mobile menu bottom brand text */
.gnl-brand {
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: rgba(7, 7, 8, 0.35);
  padding: 28px 0 44px;
}


/* ════════════════════════════════════════════════════════════
   SCROLL REVEAL ANIMATIONS
   Only active when <html class="js"> — set by inline script.
   Without JS, all content stays fully visible.
════════════════════════════════════════════════════════════ */
/* Default reveal: slide up + fade */
html.js .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.7s var(--ease-out),
    transform 0.7s var(--ease-out);
}
html.js .reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

/* Blur reveal: for company intro text — from blur to clear, no movement */
html.js .reveal-blur {
  opacity: 0;
  filter: blur(10px);
  transform: none;
  transition:
    opacity 0.65s cubic-bezier(0.4, 0, 0.2, 1),
    filter  0.65s cubic-bezier(0.4, 0, 0.2, 1);
}
html.js .reveal-blur.visible {
  opacity: 1;
  filter: blur(0);
}

/* Card reveal: scale + fade, no translate — instrument.com style */
html.js .work-card.reveal {
  opacity: 0;
  transform: scale(0.95);
  transition:
    opacity 0.45s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
html.js .work-card.reveal.visible {
  opacity: 1;
  transform: scale(1);
}


/* ════════════════════════════════════════════════════════════
   BUTTON
════════════════════════════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 14px 28px;
  border-radius: 100px;
  transition: all 0.25s var(--ease);
  cursor: pointer;
}
.btn-primary {
  background: var(--fg);
  color: var(--bg);
  border: 1.5px solid var(--fg);
}
.btn-primary:hover {
  background: transparent;
  color: var(--fg);
}
.btn-outline {
  background: transparent;
  color: var(--fg);
  border: 1.5px solid var(--fg);
}
.btn-outline:hover {
  background: var(--fg);
  color: var(--bg);
}
.btn-outline-white {
  background: transparent;
  color: var(--bg);
  border: 1.5px solid rgba(255,255,255,0.4);
}
.btn-outline-white:hover {
  background: var(--bg);
  color: var(--fg);
  border-color: var(--bg);
}


/* ════════════════════════════════════════════════════════════
   ABOUT PAGE — CAREERS-STYLE HERO
════════════════════════════════════════════════════════════ */
.careers-hero {
  padding: 120px 24px 40px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
/* SVG logo in hero — white on red bg, auto-inverts on white bg */
.careers-hero__logo {
  display: block;
  width: 100%;
  max-width: 310px;          /* similar footprint to original 64px+46px text stack */
  height: auto;
  transition: filter 0.9s cubic-bezier(0.4, 0, 0.2, 1);
}
body:not(.bg-red) .careers-hero__logo {
  filter: invert(1);         /* white logo → black when page turns white */
}
.careers-hero__sub {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 400;
  color: var(--fg);
  margin-top: 20px;
  letter-spacing: 0.4px;
  line-height: 24px;
  opacity: 0.75;
}

/* ════════════════════════════════════════════════════════════
   ABOUT PAGE — COMPANY INTRO SECTION
════════════════════════════════════════════════════════════ */
.about-intro {
  /* Figma: intro section at x=24 in Main, 61px below hero bottom */
  padding: 61px 24px 48px;
}
.about-intro__lead {
  font-family: var(--font-serif);
  font-size: 24px;
  font-weight: 500;
  color: var(--fg);
  line-height: 32px;
  letter-spacing: -0.62px;
  margin-bottom: 28px;       /* gap between lead and first body paragraph */
}
.about-intro__body {
  font-family: var(--font-sans);
  font-size: 16px;           /* +1 size: 14→16px */
  font-weight: 400;
  color: var(--muted);
  line-height: 28px;         /* line-height scaled up from 24px */
  letter-spacing: 0.3px;
  margin-bottom: 20px;       /* gap between body paragraphs */
}
.about-intro__body:last-of-type { margin-bottom: 0; }
.about-intro__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 48px;
  padding: 13px 26px;
  border: 1.5px solid transparent;
  border-radius: 100px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  background: white;
  color: #070708;
  text-decoration: none;
  letter-spacing: 0.02em;
  /* smooth transition when background switches */
  transition: background 0.9s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.2s;
}
/* White page: light gray fill, no border — no hard outline */
body:not(.bg-red) .about-intro__btn {
  background: rgba(0, 0, 0, 0.07);
  border-color: transparent;
}
.about-intro__btn:hover { opacity: 0.65; }
/* Arrow inside button — always gray */
.btn-arrow {
  color: rgba(7, 7, 8, 0.32);
  transition: color 0.9s cubic-bezier(0.4, 0, 0.2, 1);
}


/* ════════════════════════════════════════════════════════════
   ABOUT PAGE — PHOTO RAIL (auto-scroll marquee, right → left)
════════════════════════════════════════════════════════════ */
.photo-rail {
  padding: 40px 0;     /* breathing room above and below */
  overflow: hidden;
}
/* Two identical groups; CSS animation translates -50% = one group width → seamless loop */
.photo-rail__track {
  display: flex;
  align-items: center;   /* vertically center square and landscape items */
  gap: 16px;
  width: max-content;
  animation: rail-scroll 38s linear infinite;
}
.photo-rail__track:hover { animation-play-state: paused; }

@keyframes rail-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.photo-item {
  flex-shrink: 0;
  width: 220px;
  border-radius: var(--radius);
  overflow: hidden;
  background: #ece9e4;
  position: relative;
}
.photo-item--sq  { aspect-ratio: 1 / 1; }
.photo-item--ls  { aspect-ratio: 4 / 3; }
/* Both img and video fill the slot */
.photo-item img,
.photo-item video {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

/* Placeholder when no media */
.photo-item__ph {
  width: 100%; height: 100%;
  background: #ece9e4;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #bbb;
  font-size: 12px;
  letter-spacing: 0.06em;
}


/* ════════════════════════════════════════════════════════════
   ABOUT PAGE — SERVICES ACCORDION (instrument.com/careers style)
════════════════════════════════════════════════════════════ */
.services-accordion {
  padding: 85px 24px 80px;   /* top 85px + photo-rail 40px = 125px → matches image margin-top */
}
.sva-header {
  border-top: 1px solid var(--border);
  padding: 4px 0 0;          /* halved again — tightest gap between line and eyebrow */
}
.sva-eyebrow {
  font-family: var(--font-sans);
  font-size: 8.8px;
  font-weight: 400;
  letter-spacing: 1.32px;
  line-height: 16px;
  text-transform: uppercase;
  color: var(--muted);
}
/* Square image above services heading — 125px above, 80px below (heading centered in gap) */
.sva-hero-img {
  margin: 125px 0 80px;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 1 / 1;
  width: 100%;
}
.sva-hero-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.sva-heading {
  font-family: var(--font-sans);
  font-size: 42px;
  font-weight: 500;
  color: var(--fg);
  line-height: 1.15;         /* 1.15 × 42px ≈ 48px — prevents line overlap */
  letter-spacing: -0.62px;
  margin-top: 0;             /* spacing handled by sva-hero-img margin-bottom */
  margin-bottom: 80px;       /* equal to image margin-bottom — centers heading in the gap */
}
.sva-list { list-style: none; }
.sva-item {
  border-top: 1px solid var(--border);
}
.sva-trigger {
  width: 100%;
  display: flex;
  align-items: center;             /* vertically centers text and ⊕ icon */
  justify-content: space-between;
  gap: 16px;
  padding: 20px 0;
  font-family: var(--font-sans);
  font-size: 18px;                 /* +1 size: 17→18px */
  font-weight: 500;
  color: var(--muted);             /* gray when collapsed */
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  line-height: 24px;
  letter-spacing: 0;
  transition: color 0.32s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s;
}
.sva-trigger:hover { opacity: 0.65; }
/* Active/open trigger: black title */
.sva-item.is-open .sva-trigger {
  color: var(--fg);
}

/* Circular ⊕ icon — 20% smaller than before (28→22px) */
.sva-icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  position: relative;
  opacity: 0.7;
  transition: opacity 0.2s;
}
.sva-trigger:hover .sva-icon { opacity: 1; }
.sva-icon::before,
.sva-icon::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  background: currentColor;
  transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1),
              opacity  0.32s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Horizontal bar — always visible */
.sva-icon::before {
  width: 8px; height: 1.5px;
  transform: translate(-50%, -50%);
}
/* Vertical bar — disappears on open */
.sva-icon::after {
  width: 1.5px; height: 8px;
  transform: translate(-50%, -50%);
}
.sva-item.is-open .sva-icon::after {
  transform: translate(-50%, -50%) scaleY(0);
  opacity: 0;
}

.sva-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.sva-item.is-open .sva-body { grid-template-rows: 1fr; }
.sva-body__inner {
  overflow: hidden;
  padding: 0;
  transition: padding 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.sva-item.is-open .sva-body__inner {
  padding: 24px 0 40px;    /* generous top AND bottom whitespace when open */
}

/* Expanded content: pairs of bold title + description */
.sva-entry {
  margin-bottom: 42px;     /* +50%: 28→42px */
}
.sva-entry:last-child { margin-bottom: 0; }
.sva-entry__title {
  font-family: var(--font-sans);
  font-size: 15px;         /* +1 size: 14→15px */
  font-weight: 600;
  color: var(--fg);
  margin-bottom: 8px;
  line-height: 1.5;
}
.sva-entry__desc {
  font-family: var(--font-sans);
  font-size: 15px;         /* +1 size: 14→15px */
  line-height: 1.8;
  color: var(--muted);
  max-width: 580px;
}


/* ════════════════════════════════════════════════════════════
   WORK PAGE — 过往案例
   Layout: intro text → 4 large featured cards → 8 small grid
   ════════════════════════════════════════════════════════════ */

/* ── Intro ─────────────────────────────────────────────── */
.wk-intro {
  padding: 72px 24px;
}
.wk-intro__text {
  font-family: var(--font-sans);
  font-size: 28px;
  font-weight: 400;
  line-height: 1.28;
  letter-spacing: -0.6px;
  color: var(--fg);
}

/* ── Large featured cards section ───────────────────────── */
.wk-featured {
  padding: 0 24px;
}

.wk-lg {
  margin-bottom: 56px;   /* gap between large cards */
}
.wk-lg:last-child { margin-bottom: 80px; }

.wk-lg__link {
  display: block;
  text-decoration: none;
  color: inherit;
}

/* Cover image — full-width square */
.wk-lg__media {
  aspect-ratio: 1 / 1;
  border-radius: var(--radius);
  overflow: hidden;
  background: #ece9e4;
  margin-bottom: 20px;
}
.wk-lg__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.wk-lg__link:hover .wk-lg__media img { transform: scale(1.03); }

/* Card text area */
.wk-lg__body { }

.wk-lg__tag {
  display: block;
  font-family: var(--font-sans);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 12px;
}
.wk-lg__title {
  font-family: var(--font-sans);
  font-size: 22px;
  font-weight: 500;
  color: var(--fg);
  line-height: 1.3;
  letter-spacing: -0.4px;
  margin-bottom: 10px;
}
.wk-lg__desc {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 0.01em;
  color: var(--muted);
  margin-bottom: 24px;
}
/* Dark pill CTA button */
.wk-lg__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px 26px;
  background: var(--fg);
  color: var(--bg);
  border-radius: 100px;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.01em;
  transition: opacity 0.2s;
}
.wk-lg__link:hover .wk-lg__cta { opacity: 0.75; }

/* Placeholder when no cover image */
.wk-card__ph {
  width: 100%; height: 100%;
  background: #ece9e4;
  display: flex; align-items: center; justify-content: center;
  color: #bbb; font-size: 12px;
}

/* ── Small showcase grid — 2 columns ────────────────────── */
.wk-showcase {
  padding: 0 24px 80px;
}
.wk-showcase__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px 8px;   /* row-gap 56px, col-gap 8px */
}

.wk-sm {
  display: block;
  text-decoration: none;
  color: inherit;
}
.wk-sm__media {
  aspect-ratio: 1 / 1;
  border-radius: 16px;
  overflow: hidden;
  background: #ece9e4;
  margin-bottom: 14px;
  transition: opacity 0.2s;
}
.wk-sm:hover .wk-sm__media { opacity: 0.8; }
.wk-sm__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.wk-sm__name {
  display: block;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--fg);
  line-height: 1.4;
}


/* ════════════════════════════════════════════════════════════
   CASE DETAIL v2 — block-based content system
════════════════════════════════════════════════════════════ */

/* ── Case hero image ─────────────────────────────────────── */
.case-hero {
  padding: 0 24px;
  margin-top: 20px;
}
.case-hero__img {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius);
  overflow: hidden;
  background: #ece9e4;
}
.case-hero__img img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

/* ── Case breadcrumb nav (between hero and meta) ─────────── */
.case-breadcrumb {
  margin: 34px 0 0;
  padding: 0 24px;
  border-top: 0.5px solid rgba(0,0,0,0.1);
}
.case-breadcrumb__row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 -24px;
  padding: 13px 24px;
  border-bottom: 0.5px solid rgba(0,0,0,0.1);
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
}
.case-breadcrumb__link {
  color: var(--fg);
  text-decoration: none;
  font-weight: 500;
  transition: opacity 0.15s;
}
.case-breadcrumb__link:hover { opacity: 0.6; }
.case-breadcrumb__sep {
  color: var(--muted);
  opacity: 0.45;
  font-weight: 300;
}
.case-breadcrumb__current {
  color: var(--muted);
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.case-breadcrumb__tag {
  color: var(--muted);
  letter-spacing: 0.12em;
}

/* ── Case metadata ──────────────────────────────────────── */
.case-meta {
  padding: 28px 24px 48px;
}
.case-meta__back {
  display: none; /* replaced by breadcrumb */
}
.case-meta__cat {
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 14px;
}
.case-meta__title {
  font-family: var(--font-sans);
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -0.6px;
  line-height: 1.18;
  margin-bottom: 20px;
  color: var(--fg);
}
.case-meta__summary {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.75;
  color: var(--muted);
  max-width: 560px;
}

/* Stats row inside case meta */
.block-stats {
  margin: 24px 0;
}
.case-stats {
  display: flex;
  gap: 0;
  padding-top: 32px;
  margin-top: 32px;
  border-top: 0.5px solid rgba(0,0,0,0.12);
  transition: border-color 0.9s cubic-bezier(0.4, 0, 0.2, 1);
  flex-wrap: wrap;
}
.case-stat {
  flex: 1;
  min-width: 100px;
  padding-right: 24px;
  padding-bottom: 16px;
}
.case-stat__value {
  font-family: var(--font-sans);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.4px;
  color: var(--fg);
  margin-bottom: 4px;
}
.case-stat__label {
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.04em;
}

/* ── Content blocks wrapper ─────────────────────────────── */
.case-blocks {
  padding: 0 24px;
}

/* Image block — all ratios + rounded corners */
.block-image-group {
  margin: 24px 0;
}
.block-image-group > .block-image:first-child { margin-top: 0; }
.block-image-group > .block-image:last-child { margin-bottom: 0; }
.block-image {
  margin: 24px 0;
  border-radius: var(--radius);
  overflow: hidden;
  background: #ece9e4;
}
.block-image[data-ratio="1:1"]  { aspect-ratio: 1 / 1; }
.block-image[data-ratio="4:3"]  { aspect-ratio: 4 / 3; }
.block-image[data-ratio="16:9"] { aspect-ratio: 16 / 9; }
.block-image[data-ratio="3:4"]  { aspect-ratio: 3 / 4; }
.block-image.ratio-auto { aspect-ratio: unset; background: transparent; }
.block-image img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.block-image.ratio-auto img { height: auto; object-fit: contain; }

/* Video block */
.block-video {
  margin: 24px 0;
  border-radius: var(--radius);
  overflow: hidden;
  background: #111;
}
.block-video[data-ratio="16:9"] { aspect-ratio: 16 / 9; }
.block-video[data-ratio="1:1"]  { aspect-ratio: 1 / 1; }
.block-video[data-ratio="4:3"]  { aspect-ratio: 4 / 3; }
.block-video video {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

/* Heading block */
.block-heading {
  margin: 24px 0;
}
.block-heading h2 {
  font-family: var(--font-sans);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.5px;
  line-height: 1.22;
  color: var(--fg);
}

/* Body text block */
.block-body {
  margin: 24px 0;
}
.block-body p {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.78;
  color: var(--muted);
}

/* Divider block */
.block-divider {
  height: 1px;
  background: rgba(0,0,0,0.12);
  margin: 48px 0;
  transition: background 0.9s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Background transition trigger (invisible, detected by IntersectionObserver) */
.block-bg-trigger {
  height: 2px;
  margin: 0;
  pointer-events: none;
}

/* ── Case next navigation ───────────────────────────────── */
.case-next {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 48px 24px;
  border-top: 0.5px solid var(--border);
  margin-top: 56px;
  text-decoration: none;
  color: inherit;
  transition: opacity 0.22s;
}
.case-next:hover { opacity: 0.68; }
.case-next__label {
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
.case-next__title {
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.3px;
  line-height: 1.25;
  color: var(--fg);
}
.case-next__arrow {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.22s, color 0.22s, border-color 0.22s;
}
.case-next:hover .case-next__arrow {
  background: var(--fg);
  color: var(--bg);
  border-color: var(--fg);
}

/* ── Full-bleed modifier (image & video) ────────────────── */
.case-blocks .block-image.bleed,
.case-blocks .block-video.bleed {
  margin-left: -24px;
  margin-right: -24px;
  border-radius: 0;
}

/* ── 2-column image grid ─────────────────────────────────── */
.block-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 24px 0;
}
.block-2col__item {
  border-radius: var(--radius);
  overflow: hidden;
  background: #ece9e4;
  aspect-ratio: 1 / 1;
}
.block-2col__item img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
/* 4:3 variant */
.block-2col[data-ratio="4:3"] .block-2col__item { aspect-ratio: 4 / 3; }
/* 3:4 variant */
.block-2col[data-ratio="3:4"] .block-2col__item { aspect-ratio: 3 / 4; }

/* ── Section label block ─────────────────────────────────── */
.block-section-label {
  margin: 24px 0;
}
.block-section-label__eyebrow {
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 16px;
}
.block-section-label__text {
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.72;
  letter-spacing: -0.3px;
  color: var(--fg);
}

/* ── Quote block ─────────────────────────────────────────── */
.block-quote {
  margin: 24px 0;
  padding: 36px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.block-quote__text {
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: -0.4px;
  color: var(--fg);
  margin-bottom: 24px;
}
.block-quote__text::before { content: '\201C'; }
.block-quote__text::after  { content: '\201D'; }
.block-quote__attribution {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--muted);
  line-height: 1.55;
}
.block-quote__attribution strong {
  font-weight: 500;
  color: var(--fg);
  display: block;
}