@font-face {
  font-family: "Selecta";
  src: url("assets/fonts/Selecta-Regular.otf") format("opentype");
  font-display: swap;
  font-style: normal;
  font-weight: 400;
}

@font-face {
  font-family: "Selecta";
  src: url("assets/fonts/Selecta-Medium.otf") format("opentype");
  font-display: swap;
  font-style: normal;
  font-weight: 500;
}

@font-face {
  font-family: "Selecta";
  src: url("assets/fonts/Selecta-Bold.otf") format("opentype");
  font-display: swap;
  font-style: normal;
  font-weight: 600;
}

@font-face {
  font-family: "Kalice";
  src: url("assets/fonts/Kalice-Trial-Regular.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 400;
}

/* Suisse Int'l Mono — badges, code, technical labels. */
@font-face {
  font-display: swap;
  font-family: "Suisse Intl Mono";
  font-style: normal;
  font-weight: 400;
  src: url("assets/fonts/SuisseIntlMono-Regular-WebTrial.woff2") format("woff2");
}
@font-face {
  font-display: swap;
  font-family: "Suisse Intl Mono";
  font-style: normal;
  font-weight: 700;
  src: url("assets/fonts/SuisseIntlMono-Bold-WebTrial.woff2") format("woff2");
}

/* Suisse Int'l — primary display + body face. */
@font-face {
  font-display: swap;
  font-family: "Suisse Intl";
  font-style: normal;
  font-weight: 400;
  src: url("assets/fonts/SuisseIntlTrial-Regular.woff2") format("woff2");
}
@font-face {
  font-display: swap;
  font-family: "Suisse Intl";
  font-style: normal;
  font-weight: 450;
  src: url("assets/fonts/SuisseIntlTrial-Book.woff2") format("woff2");
}
@font-face {
  font-display: swap;
  font-family: "Suisse Intl";
  font-style: normal;
  font-weight: 500;
  src: url("assets/fonts/SuisseIntlTrial-Medium.woff2") format("woff2");
}
@font-face {
  font-display: swap;
  font-family: "Suisse Intl";
  font-style: normal;
  font-weight: 600;
  src: url("assets/fonts/SuisseIntlTrial-Semibold.woff2") format("woff2");
}
@font-face {
  font-display: swap;
  font-family: "Suisse Intl";
  font-style: normal;
  font-weight: 700;
  src: url("assets/fonts/SuisseIntlTrial-Bold.woff2") format("woff2");
}
@font-face {
  font-display: swap;
  font-family: "Suisse Intl";
  font-style: normal;
  font-weight: 800 900;
  src: url("assets/fonts/SuisseIntlTrial-Black.woff2") format("woff2");
}

@property --glass-angle-1 {
  syntax: "<angle>";
  inherits: false;
  initial-value: -75deg;
}

@property --glass-angle-2 {
  syntax: "<angle>";
  inherits: false;
  initial-value: -45deg;
}

:root {
  color-scheme: light;

  --font-display:
    "Suisse Intl", "Inter", "Selecta", system-ui,
    -apple-system, "Helvetica Neue", "Segoe UI", sans-serif;
  --font-body:
    "Suisse Intl", "Inter", "Selecta", system-ui,
    -apple-system, "Helvetica Neue", "Segoe UI", sans-serif;

  --bg: #f4f3f3;
  --paper: #ffffff;
  --surface: rgba(255, 255, 255, 0.5);
  --surface-strong: rgba(255, 255, 255, 0.86);
  --ink: #191919;
  --muted: rgba(25, 25, 25, 0.62);
  --fg-muted: rgba(25, 25, 25, 0.62);
  --soft: rgba(25, 25, 25, 0.36);
  --line: rgba(25, 25, 25, 0.12);
  --line-bright: rgba(255, 255, 255, 0.72);
  --shadow-soft: 0 40px 80px rgba(0, 0, 0, 0.045);
  --shadow-card:
    0 31px 46px rgba(0, 0, 0, 0.07),
    inset -2px -2px 2px rgba(0, 0, 0, 0.2),
    inset 4px 4px 4px rgba(0, 0, 0, 0.03);
  --radius-xl: 35px;
  --radius-card: 32px;

  /* Container width tiers — pick by content type, not by section name. */
  --max-narrow:  900px;   /* tight editorial text statement */
  --max:        1120px;   /* default for most sections */
  --max-wide:   1280px;   /* multi-column showcases */
  --max-cinema: 1440px;   /* cinematic / full-impact strips */

  /* Standard horizontal safe-area padding for every section. */
  --gutter: clamp(20px, 4vw, 32px);

  /* Section heading size tiers. Pick by visual weight, not by selector
     name, so the three patterns stay consistent across the page. */
  --h2-strip:   clamp(24px, 2.4vw, 34px);  /* small strip / mosaic sub-heads */
  --h2-feature: clamp(36px, 4vw, 60px);    /* split / two-column showcases */
  --h2-display: clamp(44px, 5vw, 68px);    /* main section headlines */

  /* ── Typography tokens ─────────────────────────────────────────────
     One source of truth for the type system. Pick by role, not by pixel
     value, so the same role reads consistently across sections. */

  /* Type scale (font-size). Display tiers above (--h2-*) cover h1/h2;
     these tokens cover h3, lead, body, and micro labels. */
  --t-h3:        clamp(20px, 1.6vw, 24px);   /* card titles, h3 */
  --t-lead:      clamp(17px, 1.4vw, 19px);   /* hero subtitle, section lead */
  --t-body:      16px;                       /* primary body */
  --t-small:     15px;                       /* secondary body, card outcomes */
  --t-caption:   14px;                       /* secondary captions, meta */
  --t-label:     13px;                       /* eyebrows, nav labels, footer */
  --t-micro:     12px;                       /* micro eyebrows, chip labels */
  --t-tiny:      11px;                       /* fine print */

  /* Line-height scale — 6 roles. Number values (not px) so they scale. */
  --lh-display:  0.9;    /* h1, hero — very tight */
  --lh-heading:  1.05;   /* h2 / large section heads */
  --lh-subhead:  1.25;   /* card titles, lead-ins */
  --lh-body:     1.5;    /* primary body */
  --lh-relaxed:  1.6;    /* long-form reading copy */
  --lh-tight:    1.4;    /* compact UI text */

  /* Letter-spacing scale — 3 roles (positive eyebrow + display tightening). */
  --track-hero:     -0.03em;   /* 超大标题 48px+ */
  --track-display:  -0.02em;   /* 大标题 / 数字展示 */
  --track-sub:      -0.025em;  /* 中型标题 22–46px */
  --track-tight:    -0.015em;  /* UI 文字 / 小标题 */
  --track-eyebrow:   0.02em;   /* eyebrow / 小标签 */
  --track-label:     0.06em;   /* 全大写小标签 */
  --track-badge:     0.08em;   /* mono badge */

  /* Font-weight scale. */
  --fw-black:    900;
  --fw-bold:     700;
  --fw-semi:     600;
  --fw-medium:   500;
  --fw-book:     450;
  --fw-regular:  400;

  /* Reading widths — applied with max-width on text columns. */
  --read-narrow:   620px;   /* essay body, section sub copy */
  --read-default:  720px;   /* compact lead, contact body */
  --read-wide:     800px;   /* quote stages, hero subtitle */

  /* Title-group → next content gap. Single source of truth for the
     "headline block to body block" rhythm across every section. */
  --title-group-end: clamp(40px, 5vw, 60px);

  /* Bento image-overlay darkening — uniform across all image-bg cards
     that overlay text. Tweak here to dial the dim level globally. */
  --bento-overlay: rgba(0, 0, 0, 0.4);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  letter-spacing: 0;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

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

.site-header {
  align-items: center;
  display: flex;
  gap: 24px;
  justify-content: space-between;
  left: 0;
  padding: 24px clamp(20px, 4vw, 32px);
  position: fixed;
  right: 0;
  top: 0;
  z-index: 20;
}

.site-header,
.brand,
.brand-logo-img,
.brand-text,
.nav-links,
.nav-links a,
.header-cta,
.header-cta::after,
.footer-icon-btn,
.footer-icon-btn::after,
.glass-button-shadow,
.glass-button-shadow::after {
  transition-duration: 280ms;
  transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
}

/* Suppress all header transitions during initial header-theme snap
   (prevents the "scale from large to small" flash on page load when
   header-on-dark is toggled by the first updateHeaderTheme() call). */
body.header-notrans *,
body.header-notrans *::before,
body.header-notrans *::after {
  transition: none !important;
}

.brand {
  align-items: center;
  align-self: center;
  color: var(--ink);
  display: flex;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: var(--fw-semi);
  letter-spacing: 0;
  min-height: 50px;
  min-width: 140px;
  position: relative;
  top: 0;
}

.brand-logo-img {
  display: block;
  flex: 0 0 auto;
  height: 20px;
  opacity: 0.3;
  transition:
    height 600ms cubic-bezier(0.25, 1, 0.5, 1) 500ms,
    opacity 400ms ease,
    filter 400ms ease;
  width: auto;
}

.brand-text {
  align-items: baseline;
  display: inline-flex;
  margin-left: 12px;
  opacity: 0;
  overflow: hidden;
  transition: opacity 150ms ease;
  white-space: nowrap;
}

.brand-letter {
  display: inline-block;
  opacity: 0;
  transition:
    transform 200ms ease,
    opacity 200ms ease;
}

.brand-letter-d {
  transform: translateX(-35px);
}

.brand-letter-e1,
.brand-letter-n1 {
  transform: translateX(-65px);
}

.brand-letter-n2,
.brand-letter-i {
  transform: translateX(-90px);
}

.brand-letter-s,
.brand-space,
.brand-letter-l,
.brand-letter-u {
  transform: translateX(-110px);
}

.brand:hover .brand-logo-img,
.brand:focus-visible .brand-logo-img {
  height: 17px;
  opacity: 1;
  transition:
    height 600ms cubic-bezier(0.25, 1, 0.5, 1),
    opacity 400ms ease,
    filter 400ms ease;
}

.brand:hover .brand-text,
.brand:focus-visible .brand-text {
  opacity: 0.72;
  transition: opacity 400ms ease 450ms;
}

.brand:hover .brand-letter,
.brand:focus-visible .brand-letter {
  opacity: 1;
  transform: translateX(0);
  transition:
    transform 500ms cubic-bezier(0.25, 1, 0.5, 1) 300ms,
    opacity 400ms ease 300ms;
}

.brand:hover .brand-letter-e1,
.brand:focus-visible .brand-letter-e1 {
  transition-delay: 320ms;
}

.brand:hover .brand-letter-n1,
.brand:focus-visible .brand-letter-n1 {
  transition-delay: 340ms;
}

.brand:hover .brand-letter-n2,
.brand:focus-visible .brand-letter-n2 {
  transition-delay: 360ms;
}

.brand:hover .brand-letter-i,
.brand:focus-visible .brand-letter-i {
  transition-delay: 380ms;
}

.brand:hover .brand-letter-s,
.brand:focus-visible .brand-letter-s {
  transition-delay: 400ms;
}

.brand:hover .brand-letter-l,
.brand:focus-visible .brand-letter-l {
  transition-delay: 420ms;
}

.brand:hover .brand-letter-u,
.brand:focus-visible .brand-letter-u {
  transition-delay: 440ms;
}

@media (min-width: 768px) {
  .brand {
    min-height: 60px;
    min-width: 200px;
    top: -4px;
  }

  .brand-logo-img {
    height: 28px;
  }

  .brand:hover .brand-logo-img,
  .brand:focus-visible .brand-logo-img {
    height: 20px;
  }
}

.nav-links {
  align-items: center;
  display: flex;
  font-size: var(--t-caption);
  gap: 6px;
  padding: 6px 6px 6px;
}

.nav-links a {
  align-items: center;
  background: transparent;
  border-radius: 999px;
  color: rgba(25, 25, 25, 0.58);
  display: flex;
  font-size: var(--t-caption);
  font-weight: var(--fw-medium);
  letter-spacing: 0;
  line-height: 1;
  padding: 10px 14px;
  transition:
    background-color 280ms cubic-bezier(0.2, 0, 0, 1),
    color 280ms cubic-bezier(0.2, 0, 0, 1);
}

.nav-links a:hover {
  background: rgba(25, 25, 25, 0.055);
  color: var(--ink);
}

.nav-links a.active {
  color: var(--ink);
}

.nav-link-external {
  align-items: center;
  display: inline-flex;
  gap: 4px;
}

.nav-link-arrow {
  display: inline-block;
  font-size: var(--t-label);
  line-height: 1;
  opacity: 0.7;
  transition: transform 240ms cubic-bezier(0.2, 0, 0, 1);
}

.nav-links a:hover .nav-link-arrow {
  transform: translate(1px, -1px);
}

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

body.header-on-dark .brand-logo-img {
  filter: invert(1);
  opacity: 0.72;
}

body.header-on-dark .brand:hover .brand-logo-img,
body.header-on-dark .brand:focus-visible .brand-logo-img {
  opacity: 1;
}

body.header-on-dark .brand:hover .brand-text,
body.header-on-dark .brand:focus-visible .brand-text {
  opacity: 0.84;
}

body.header-on-dark .nav-links {
  background: rgba(18, 18, 20, 0.52);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -1px 0 rgba(0, 0, 0, 0.18),
    0 8px 32px rgba(0, 0, 0, 0.18);
}

body.header-on-dark .nav-links a {
  color: rgba(255, 255, 255, 0.68);
}

body.header-on-dark .nav-links a:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}

body.header-on-dark .nav-links a.active {
  color: #ffffff;
}

/* Dark-mode nav pill border — matches header-cta dark treatment, reduces white ring */
body.header-on-dark .nav-glass-root .nav-links::after {
  background:
    conic-gradient(
      from var(--glass-angle-1) at 50% 50%,
      rgba(255, 255, 255, 0.16),
      transparent 5% 40%,
      rgba(255, 255, 255, 0.12) 50%,
      transparent 60% 95%,
      rgba(255, 255, 255, 0.16)
    ),
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
  box-shadow: inset 0 0 0 calc(var(--glass-border-width) / 2) rgba(255, 255, 255, 0.06);
}

.header-cta,
.button,
.filter-button,
.project-links a,
.social-links a,
.detail-back,
.nav-links,
.footer-icon-btn,
.case-deck-facade-icon {
  --glass-angle-1: -75deg;
  --glass-angle-2: -45deg;
  --glass-border-width: clamp(1px, 0.0625em, 4px);
  --glass-shadow-background: linear-gradient(180deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.1));
  --glass-shadow-top: 0.5em;
  --glass-shadow-left: 0.125em;
  --glass-shadow-blur: clamp(2px, 0.125em, 12px);
  --glass-shadow:
    inset 0 0.125em 0.125em rgba(0, 0, 0, 0.05),
    inset 0 -0.125em 0.125em rgba(255, 255, 255, 0.5),
    0 0.25em 0.125em -0.125em rgba(0, 0, 0, 0.2),
    0 0 0.1em 0.25em inset rgba(255, 255, 255, 0.2),
    0 0 0 0 #ffffff;
  --glass-shadow-hover:
    inset 0 0.125em 0.125em rgba(0, 0, 0, 0.05),
    inset 0 -0.125em 0.125em rgba(255, 255, 255, 0.5),
    0 0.15em 0.05em -0.1em rgba(0, 0, 0, 0.25),
    0 0 0.05em 0.1em inset rgba(255, 255, 255, 0.5),
    0 0 0 0 #ffffff;
  --glass-shadow-active:
    inset 0 0.125em 0.125em rgba(0, 0, 0, 0.05),
    inset 0 -0.125em 0.125em rgba(255, 255, 255, 0.5),
    0 0.125em 0.125em -0.125em rgba(0, 0, 0, 0.2),
    0 0 0.1em 0.25em inset rgba(255, 255, 255, 0.2),
    0 0.225em 0.05em 0 rgba(0, 0, 0, 0.05),
    0 0.25em 0 0 rgba(255, 255, 255, 0.75),
    inset 0 0.25em 0.05em 0 rgba(0, 0, 0, 0.15);
  background: rgba(245, 245, 245, 0.40);
  border: 0;
  border-radius: 999px;
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  backdrop-filter: blur(16px) saturate(180%);
  color: #323232;
  cursor: pointer;
  display: inline-flex;
  font-weight: var(--fw-medium);
  align-items: center;
  justify-content: center;
  letter-spacing: 0;
  line-height: 1;
  isolation: isolate;
  overflow: visible;
  position: relative;
  text-align: center;
  text-shadow: 0 0.05em 0.05em rgba(0, 0, 0, 0.05);
  transition:
    transform 400ms cubic-bezier(0.25, 1, 0.5, 1),
    box-shadow 400ms cubic-bezier(0.25, 1, 0.5, 1),
    -webkit-backdrop-filter 400ms cubic-bezier(0.25, 1, 0.5, 1),
    backdrop-filter 400ms cubic-bezier(0.25, 1, 0.5, 1),
    text-shadow 400ms cubic-bezier(0.25, 1, 0.5, 1);
  -webkit-tap-highlight-color: transparent;
}

.header-cta::before,
.button::before,
.filter-button::before,
.project-links a::before,
.social-links a::before,
.detail-back::before,
.nav-links::before,
.footer-icon-btn::before,
.case-deck-facade-icon::before {
  background: var(--glass-shadow-background);
  border-radius: inherit;
  box-sizing: border-box;
  content: "";
  filter: blur(var(--glass-shadow-blur));
  height: calc(100% - 0.25em);
  left: var(--glass-shadow-left);
  opacity: 1;
  padding: 0.125em;
  pointer-events: none;
  position: absolute;
  top: var(--glass-shadow-top);
  transition:
    opacity 520ms cubic-bezier(0.25, 1, 0.5, 1),
    filter 400ms cubic-bezier(0.25, 1, 0.5, 1),
    top 400ms cubic-bezier(0.25, 1, 0.5, 1);
  width: calc(100% - 0.25em);
  z-index: -1;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
}

.header-cta::after,
.button::after,
.filter-button::after,
.project-links a::after,
.social-links a::after,
.detail-back::after,
.nav-links::after,
.footer-icon-btn::after,
.case-deck-facade-icon::after {
  background:
    conic-gradient(
      from var(--glass-angle-1) at 50% 50%,
      rgba(0, 0, 0, 0.5),
      transparent 5% 40%,
      rgba(0, 0, 0, 0.5) 50%,
      transparent 60% 95%,
      rgba(0, 0, 0, 0.5)
    ),
    linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5));
  border-radius: inherit;
  box-shadow: inset 0 0 0 calc(var(--glass-border-width) / 2) rgba(255, 255, 255, 0.5);
  box-sizing: border-box;
  content: "";
  inset: calc(var(--glass-border-width) / -2);
  padding: var(--glass-border-width);
  pointer-events: none;
  position: absolute;
  transition:
    transform 400ms cubic-bezier(0.25, 1, 0.5, 1),
    --glass-angle-1 500ms;
  z-index: 2;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
}

.header-cta {
  font-size: var(--t-body);
  font-weight: var(--fw-semi);
  min-height: 46px;
  min-width: 145px;
  padding: 0 24px;
}


body.header-on-dark .header-cta {
  --glass-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 -1px 0 rgba(0, 0, 0, 0.2),
    0 8px 24px rgba(0, 0, 0, 0.18),
    0 0 0 0 #ffffff;
  --glass-shadow-hover:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -1px 0 rgba(0, 0, 0, 0.16),
    0 6px 18px rgba(0, 0, 0, 0.22),
    0 0 0 0 #ffffff;
  background: rgba(18, 18, 20, 0.52);
  box-shadow: var(--glass-shadow);
  color: #ffffff;
  text-shadow: none;
}

body.header-on-dark .header-cta::after {
  background:
    conic-gradient(
      from var(--glass-angle-1) at 50% 50%,
      rgba(255, 255, 255, 0.07),
      transparent 5% 40%,
      rgba(255, 255, 255, 0.05) 50%,
      transparent 60% 95%,
      rgba(255, 255, 255, 0.07)
    ),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
  box-shadow: inset 0 0 0 calc(var(--glass-border-width) / 2) rgba(255, 255, 255, 0.06);
  opacity: 1;
}

body.header-on-dark .header-cta:hover {
  background: rgba(28, 28, 32, 0.60);
  color: #ffffff;
  box-shadow: var(--glass-shadow-hover);
}

body.header-on-dark .glass-button-root:has(.header-cta) .glass-button-shadow::after {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.36));
  opacity: 0.9;
}

.glass-button-root {
  --glass-shadow-cutoff-fix: 2em;
  --glass-shadow-offset-top: calc(var(--glass-shadow-cutoff-fix) - 0.42em);
  --glass-shadow-offset-left: calc(var(--glass-shadow-cutoff-fix) - 0.875em);
  align-items: center;
  align-self: center;
  background: transparent;
  border-radius: 999vw;
  display: inline-flex;
  isolation: isolate;
  pointer-events: none;
  position: relative;
  transition:
    transform 400ms cubic-bezier(0.25, 1, 0.5, 1),
    filter 400ms cubic-bezier(0.25, 1, 0.5, 1);
  z-index: 2;
}

.glass-button-root > .header-cta,
.glass-button-root > .button,
.glass-button-root > .footer-icon-btn {
  pointer-events: auto;
  z-index: 2;
}

.glass-button-root > .header-cta::before,
.glass-button-root > .button::before,
.glass-button-root > .footer-icon-btn::before,
.nav-glass-root > .nav-links::before {
  display: none;
}

.glass-button-shadow {
  filter: blur(clamp(3px, 0.14em, 14px));
  height: calc(100% + var(--glass-shadow-cutoff-fix));
  left: calc(0% - var(--glass-shadow-cutoff-fix) / 2);
  overflow: visible;
  pointer-events: none;
  position: absolute;
  top: calc(0% - var(--glass-shadow-cutoff-fix) / 2);
  transition: filter 400ms cubic-bezier(0.25, 1, 0.5, 1);
  width: calc(100% + var(--glass-shadow-cutoff-fix));
}

.glass-button-shadow::after {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.24), rgba(0, 0, 0, 0.11));
  border-radius: 999vw;
  box-sizing: border-box;
  content: "";
  height: calc(100% - var(--glass-shadow-cutoff-fix) - 0.25em);
  left: var(--glass-shadow-offset-left);
  opacity: 1;
  padding: 0.125em;
  position: absolute;
  top: var(--glass-shadow-offset-top);
  transition:
    top 400ms cubic-bezier(0.25, 1, 0.5, 1),
    opacity 400ms cubic-bezier(0.25, 1, 0.5, 1);
  width: calc(100% - var(--glass-shadow-cutoff-fix) - 0.25em);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
}

.glass-button-root:has(.header-cta:hover) .glass-button-shadow,
.glass-button-root:has(.button:hover) .glass-button-shadow,
.glass-button-root:has(.nav-links:hover) .glass-button-shadow,
.glass-button-root:has(.footer-icon-btn:hover) .glass-button-shadow {
  filter: blur(clamp(2px, 0.08em, 7px));
}

.glass-button-root:has(.header-cta:hover) .glass-button-shadow::after,
.glass-button-root:has(.button:hover) .glass-button-shadow::after,
.glass-button-root:has(.footer-icon-btn:hover) .glass-button-shadow::after {
  opacity: 1;
  top: calc(var(--glass-shadow-cutoff-fix) - 0.68em);
}

.glass-button-root:has(.nav-links:hover) .glass-button-shadow::after {
  opacity: 0.45;
  top: calc(var(--glass-shadow-cutoff-fix) - 0.68em);
}

.glass-button-root:has(.header-cta:active) .glass-button-shadow,
.glass-button-root:has(.button:active) .glass-button-shadow,
.glass-button-root:has(.nav-links a:active) .glass-button-shadow,
.glass-button-root:has(.footer-icon-btn:active) .glass-button-shadow {
  filter: blur(clamp(2px, 0.125em, 12px));
}

.glass-button-root:has(.header-cta:active) .glass-button-shadow::after,
.glass-button-root:has(.button:active) .glass-button-shadow::after,
.glass-button-root:has(.nav-links a:active) .glass-button-shadow::after,
.glass-button-root:has(.footer-icon-btn:active) .glass-button-shadow::after {
  opacity: 0.66;
  top: calc(var(--glass-shadow-cutoff-fix) - 0.36em);
}

/* Nav-glass-root: keep the pill measured by font-size so the shadow
   geometry (which uses em units) reads consistently with the CTA.
   Cutoff-fix is dialled down so the floor shadow sits proportionally
   under the shorter 46px pill the same way it does under the taller
   60px Email button (otherwise the same em-based shadow looks
   relatively heavier under a smaller host). */
.nav-glass-root {
  --glass-shadow-cutoff-fix: 1.85em;
  align-items: center;
  font-size: var(--t-body);
  left: 50%;
  min-height: 46px;
  /* Position relative to .site-header (which is itself fixed) so the
     pill follows the header's actual height and stays aligned with the
     brand and CTA at every breakpoint. Using top: 24px with position:
     fixed offset the pill above the flex-centred brand/CTA on desktop
     where .brand min-height is 60px. */
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 25;
}

.nav-glass-root .nav-links {
  pointer-events: auto;
  z-index: 2;
}

.button-content {
  align-items: center;
  color: inherit;
  display: inline-flex;
  height: 100%;
  justify-content: center;
  line-height: 1;
  mix-blend-mode: normal;
  padding-inline: 0;
  position: relative;
  text-shadow: inherit;
  transition: text-shadow 400ms cubic-bezier(0.25, 1, 0.5, 1);
  -webkit-user-select: none;
  user-select: none;
  white-space: nowrap;
  width: 100%;
  z-index: 2;
}

.button-content::after {
  background: linear-gradient(var(--glass-angle-2), transparent 0%, rgba(255, 255, 255, 0.5) 40% 50%, transparent 55%);
  background-position: 0%;
  background-repeat: no-repeat;
  background-size: 200% 200%;
  border-radius: 999vw;
  content: "";
  inset: calc(var(--glass-border-width) / 2);
  mix-blend-mode: screen;
  opacity: 0.28;
  pointer-events: none;
  position: absolute;
  transition:
    background-position 500ms cubic-bezier(0.25, 1, 0.5, 1),
    opacity 500ms cubic-bezier(0.25, 1, 0.5, 1),
    --glass-angle-2 500ms cubic-bezier(0.25, 1, 0.5, 1);
  z-index: 1;
}

.header-cta:hover .button-content::after,
.button:hover .button-content::after {
  background-position: 25%;
  opacity: 0.5;
}

.header-cta:active .button-content::after,
.button:active .button-content::after {
  --glass-angle-2: -15deg;
  background-position: 50% 15%;
  opacity: 0.38;
}

.header-cta:hover,
.button:hover,
.filter-button:hover,
.project-links a:hover,
.social-links a:hover,
.detail-back:hover,
.nav-links:hover,
.footer-icon-btn:hover {
  --glass-angle-1: -125deg;
  --glass-shadow-blur: clamp(2px, 0.0625em, 6px);
  --glass-shadow-top: 0.125em;
  --glass-shadow-hover:
    inset 0 0.125em 0.125em rgba(0, 0, 0, 0.03),
    inset 0 -0.125em 0.125em rgba(255, 255, 255, 0.3),
    0 0.1em 0.04em -0.08em rgba(0, 0, 0, 0.12),
    0 0 0.04em 0.08em inset rgba(255, 255, 255, 0.28),
    0 0 0 0 #ffffff;
  box-shadow: var(--glass-shadow-hover);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  backdrop-filter: blur(28px) saturate(180%);
  text-shadow: 0.025em 0.025em 0.025em rgba(0, 0, 0, 0.06);
}

.header-cta:hover::after,
.button:hover::after,
.filter-button:hover::after,
.project-links a:hover::after,
.social-links a:hover::after,
.detail-back:hover::after,
.nav-links:hover::after,
.footer-icon-btn:hover::after {
  --glass-angle-1: -125deg;
}

.header-cta:active,
.button:active,
.filter-button:active,
.project-links a:active,
.social-links a:active,
.detail-back:active,
.nav-links:has(a:active),
.footer-icon-btn:active {
  --glass-shadow-blur: clamp(2px, 0.125em, 12px);
  --glass-shadow-top: 0.5em;
  box-shadow: var(--glass-shadow-active);
  text-shadow: 0.025em 0.1em 0.05em rgba(0, 0, 0, 0.08);
  transform: translateY(1px);
}

.header-cta:active::after,
.button:active::after,
.filter-button:active::after,
.project-links a:active::after,
.social-links a:active::after,
.detail-back:active::after,
.nav-links:has(a:active)::after,
.footer-icon-btn:active::after {
  --glass-angle-1: -75deg;
}

.header-cta:active::before,
.button:active::before,
.filter-button:active::before,
.project-links a:active::before,
.social-links a:active::before,
.detail-back:active::before,
.footer-icon-btn:active::before {
  opacity: 0.75;
}

.hero {
  background: var(--bg);
  min-height: 100vh;
  overflow: hidden;
  padding: 200px 20px 100px;
  position: relative;
  text-align: center;
}

.hero-content {
  margin: 0 auto;
  max-width: min(92vw, 1440px);
  position: relative;
  z-index: 2;
}

/* Hero entrance — gated on fonts being loaded.
   Pre-fonts-ready: every element stays in its initial state (invisible,
   blurred, lifted). JS (gateHeroEntranceOnFonts) adds .fonts-ready to
   <html> on document.fonts.ready or after a 1.5s safety timeout,
   whichever comes first. This prevents the Inter font swap from
   happening MID-animation, which is what caused the 76 px headline to
   appear to jump in size on first load. */
.announcement-pill,
.hero-copy,
.hero-subtitle,
.hero-actions,
.hero-showcase {
  filter: blur(12px);
  opacity: 0;
  transform: translateY(24px);
}

.hero-copy {
  filter: blur(6px);
}

html.fonts-ready .announcement-pill,
html.fonts-ready .hero-actions {
  animation: hero-fade-in 1300ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* Showcase container fades in quickly as a stage — cards handle their own entrance */
html.fonts-ready .hero-showcase {
  animation: hero-fade-in 360ms ease 1060ms forwards;
}

html.fonts-ready .announcement-pill {
  animation-delay: 500ms;
}

html.fonts-ready .hero-copy {
  /* Headline runs two parallel entrance animations so the blur clears
     in the first 600 ms and the 1px → 0 snap is masked by ongoing rise. */
  animation:
    hero-copy-deblur 600ms cubic-bezier(0.33, 1, 0.68, 1) 660ms forwards,
    hero-copy-rise 1300ms cubic-bezier(0.22, 1, 0.36, 1) 660ms forwards;
}

html.fonts-ready .hero-subtitle {
  animation: hero-fade-in 1300ms cubic-bezier(0.22, 1, 0.36, 1) 820ms forwards;
}

html.fonts-ready .hero-actions {
  animation-delay: 980ms;
}

/* Per-card staggered entrance: left → center → right
   Left  = TikTok  = :nth-child(3), first to land
   Center= AfterShip= :nth-child(1), settles last as the anchor
   Right = Yuanbao = :nth-child(2), trails in from the opposite side */
html.fonts-ready .showcase-card:nth-child(3) {
  animation: showcase-card-in 780ms cubic-bezier(0.22, 1, 0.36, 1) 1160ms both;
}
html.fonts-ready .showcase-card:nth-child(1) {
  animation: showcase-card-in 900ms cubic-bezier(0.16, 1, 0.3, 1) 1360ms both;
}
html.fonts-ready .showcase-card:nth-child(2) {
  animation: showcase-card-in 780ms cubic-bezier(0.22, 1, 0.36, 1) 1540ms both;
}

.announcement-pill {
  align-items: center;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.5);
  border: none;
  border-radius: 999px;
  box-shadow:
    0 0 0 0.5px rgba(0, 0, 0, 0.10),
    inset 0 0 0 0.5px rgba(255, 255, 255, 0.6),
    0 2px 2px -1px rgba(0, 0, 0, 0.04),
    0 4px 4px -2px rgba(0, 0, 0, 0.03);
  color: rgba(20, 20, 20, 0.78);
  display: inline-flex;
  font-size: var(--t-label);
  font-weight: var(--fw-semi);
  gap: 9px;
  letter-spacing: 0;
  line-height: 1;
  margin-bottom: 26px;
  padding: 6px 16px 6px 6px;
  text-decoration: none;
  transition:
    background 300ms cubic-bezier(0.2, 0, 0, 1),
    box-shadow 300ms cubic-bezier(0.2, 0, 0, 1),
    color 300ms cubic-bezier(0.2, 0, 0, 1);
  vertical-align: middle;
}

/* Left badge chip */
.pill-badge {
  align-items: center;
  background: #191919;
  border-radius: 999px;
  color: #ffffff;
  display: inline-flex;
  flex-shrink: 0;
  font-size: var(--t-tiny);
  font-weight: var(--fw-semi);
  height: 28px;
  justify-content: center;
  letter-spacing: 0;
  padding: 0 10px;
}

/* Trailing arrow */
.announcement-pill::after {
  background-color: currentColor;
  content: "";
  display: inline-block;
  flex-shrink: 0;
  height: 12px;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M3 8h10M9 4l4 4-4 4'/></svg>") no-repeat center / contain;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M3 8h10M9 4l4 4-4 4'/></svg>") no-repeat center / contain;
  transition: transform 300ms cubic-bezier(0.2, 0, 0, 1);
  width: 12px;
}

.announcement-pill:hover,
.announcement-pill:focus-visible {
  background: rgba(255, 255, 255, 0.68);
  box-shadow:
    0 0 0 0.5px rgba(0, 0, 0, 0.10),
    inset 0 0 0 0.5px rgba(255, 255, 255, 0.72),
    0 2px 2px -1px rgba(0, 0, 0, 0.04),
    0 4px 4px -2px rgba(0, 0, 0, 0.04),
    0 8px 8px -4px rgba(0, 0, 0, 0.03),
    0 16px 16px -8px rgba(0, 0, 0, 0.02);
  color: rgba(20, 20, 20, 0.95);
}

.announcement-pill:hover::after,
.announcement-pill:focus-visible::after {
  transform: translateX(3px);
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  font-family: var(--font-display);
  font-size: 96px;
  font-weight: var(--fw-semi);
  letter-spacing: var(--track-display);
  line-height: 0.92;
  margin-bottom: 24px;
}

h2 {
  font-family: var(--font-display);
  font-size: 64px;
  font-weight: var(--fw-semi);
  letter-spacing: var(--track-hero);
  line-height: 1.0;
  margin-bottom: 22px;
}

h3 {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: var(--fw-semi);
  letter-spacing: 0;
  line-height: 1.08;
  margin-bottom: 12px;
}

/* hero-copy expands to exactly 100vw so text-align:center has the full
   viewport as its reference. calc(-50vw + 50%) offsets the left margin
   to escape .hero-content's max-width, aligning the block's left edge
   with the viewport left edge. Any phrase that overflows clips equally
   on both sides under .hero { overflow:hidden }. */
.hero-copy {
  color: var(--ink);
  display: flex;
  flex-direction: column;
  /* align-items: stretch (default) — each line fills the full 100vw so that
     text-align:center (cascaded from .hero) correctly centres the content.
     align-items:center was collapsing lines to content-width, defeating
     text-align and causing the right-edge clip. */
  font-family: var(--font-display);
  font-size: clamp(48px, 5.6vw, 76px);
  font-weight: var(--fw-semi);
  letter-spacing: var(--track-hero);
  line-height: 0.9;
  margin: 0 0 28px calc(-50vw + 50%);
  max-width: 100vw;
  width: 100vw;
}

/* Hero rotator — strict two-line editorial layout.
   Line 1 ("Designing the systems") is static.
   Line 2 ("for [phrase]") behaves as one centered typographic unit:
   - "for" is a persistent absolute element that only animates its
     x-position. It never fades, blurs, or remounts.
   - The dynamic phrase morphs in place via opacity/blur/translateY.
   - JS measures the active phrase width and recomputes the x-offsets
     for both "for" and the phrase so the group stays centered with a
     fixed gap. */
/* .hero-copy is now 100vw wide, so text-align:center centres inline
   content within the full viewport — no transforms needed. */
.hero-rotator-line {
  display: block;
  white-space: nowrap;
}

.hero-rotator-line + .hero-rotator-line {
  margin-top: 0.16em;
}

.hero-rotator-line-dynamic {
  align-items: center;
  display: flex;
  justify-content: center;
  position: relative;
}

/* "for + phrase" group: inline-flex so the pair scales as one unit.
   The group's width = "for" + current morph width — and because the
   parent line is justify-content:center, the group re-centers on the
   line automatically as morph width animates. */
/* JS-centred: initHeroRotator() measures forGroup.getBoundingClientRect()
   and applies an exact translateX so the group is always centred on the
   viewport. No CSS position tricks needed — transform is set by JS. */
.hero-for-group {
  align-items: center;
  display: inline-flex;
}

.hero-for {
  flex-shrink: 0;
}

/* Morph container — strict clip window equal to one row exactly.
   Width is driven by --morph-w (set by JS to the active phrase
   width); both width and the track's translateY co-animate on the
   same easing so "for + phrase" re-centers as one continuous motion.
   No internal padding — any padding would offset the track inside
   the clip window and expose the row above as a sliver. */
.hero-morph {
  display: block;
  /* flex-shrink: 0 prevents the inline-flex parent from squishing this
     below its measured width, which would clip letters at the right edge. */
  flex-shrink: 0;
  height: 1.15em;
  overflow: hidden;
  /* Width is snapped instantly by JS — no CSS transition here so the
     slide is purely vertical with no diagonal drift. */
  width: var(--morph-w, max-content);
  /* Subtle alpha fade at top and bottom edges so the entering phrase's top
     edge and the exiting phrase's bottom edge feather into view during the
     vertical slide instead of revealing on a hard clip line. Top fade
     scales with line-height (8% of 1.15em); bottom fade is a fixed 3 px so
     descenders (p, y, g) at rest don't get noticeably clipped. */
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    #000 8%,
    #000 calc(100% - 3px),
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    #000 8%,
    #000 calc(100% - 3px),
    transparent 100%
  );
}

/* One continuous vertical scroll. No opacity toggles — the slide
   alone carries the swap. */
.hero-morph-track {
  display: block;
  text-align: left;
  transition: transform 1100ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.hero-morph-track > span {
  display: block;
  /* Row height MUST exactly equal .hero-morph height and the JS STEP_EM
     or adjacent rows will bleed into the clip window. */
  height: 1.15em;
  line-height: 1.15;
  white-space: nowrap;
}

/* Pre-JS state: only the active (last) phrase contributes width, so
   max-content of the track equals exactly that phrase's width and the
   morph stays tight to the visible content. Other phrases keep their
   1.15em row height so track-level translateY positioning still lands
   correctly. JS init removes this class once it has snapped --morph-w
   to a measured pixel value. */
.hero-morph-track.is-collapsed > span:not(:last-child) {
  overflow: hidden;
  visibility: hidden;
  width: 0;
}

/* Visually-hidden readout for screen readers. */
.hero-morph-readout {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

@media (max-width: 539px) {
  .hero-rotator-line {
    white-space: normal;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-morph-track {
    transition: none;
  }
}

.hero-subtitle {
  color: var(--muted);
  font-size: clamp(18px, 1.6vw, 21px);
  font-weight: var(--fw-book);
  letter-spacing: 0;
  line-height: 1.5;
  margin: 0 auto 32px;
  max-width: 800px;
  text-wrap: balance;
}

.hero-actions,
.contact-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

.text-cta {
  color: rgba(25, 25, 25, 0.62);
  display: inline-flex;
  font-family: var(--font-display);
  font-size: var(--t-caption);
  font-weight: var(--fw-medium);
  letter-spacing: var(--track-tight);
  line-height: 1;
  transition:
    color 220ms cubic-bezier(0.2, 0, 0, 1),
    transform 220ms cubic-bezier(0.2, 0, 0, 1);
}

.text-cta:hover {
  color: var(--ink);
  transform: translateY(-1px);
}

.button {
  align-items: center;
  font-family: var(--font-display);
  font-size: var(--t-body);
  font-weight: var(--fw-semi);
  letter-spacing: 0;
  min-height: 60px;
  min-width: 158px;
  padding: 0 28px;
}

.button.primary {
  background: linear-gradient(-75deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.05));
  color: var(--ink);
}

.hero-showcase {
  cursor: grab;
  height: clamp(500px, 50vw, 690px);
  margin: 70px auto 0;
  max-width: 1000px;
  position: relative;
  z-index: 1;
}

.hero-showcase:active {
  cursor: grabbing;
}

.showcase-card {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.38)),
    var(--paper);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: clamp(24px, 3vw, 38px);
  box-shadow: var(--shadow-card);
  color: inherit;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: clamp(340px, 40vw, 500px);
  min-height: clamp(340px, 40vw, 500px);
  overflow: hidden;
  padding: 0;
  position: absolute;
  text-align: left;
  top: 50%;
  border-width: 1px;
  width: clamp(260px, 29vw, 370px);
  will-change: transform, opacity;
  opacity: 0;
  transition:
    transform 640ms cubic-bezier(0.25, 1, 0.5, 1),
    opacity 420ms ease,
    box-shadow 420ms cubic-bezier(0.25, 1, 0.5, 1);
}

.showcase-card::before {
  background:
    linear-gradient(180deg, rgba(25, 25, 25, 0.02), rgba(25, 25, 25, 0.66)),
    linear-gradient(160deg, rgba(255, 255, 255, 0.44), transparent 38%);
  border-radius: inherit;
  content: "";
  inset: 0;
  position: absolute;
  z-index: 0;
}

.showcase-card img,
.showcase-card-video {
  display: block;
  height: 100%;
  inset: 0;
  object-fit: cover;
  object-position: center center;
  position: absolute;
  transform: scale(1.03);
  transition: transform 700ms cubic-bezier(0.25, 1, 0.5, 1);
  width: 100%;
  max-width: none;
  max-height: none;
}

.showcase-generated {
  background:
    radial-gradient(circle at 28% 26%, rgba(154, 214, 134, 0.5), transparent 24%),
    radial-gradient(circle at 76% 68%, rgba(110, 147, 238, 0.32), transparent 28%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.26)),
    #dfe5da;
  height: 100%;
  inset: 0;
  position: absolute;
  transform: scale(1.03);
  width: 100%;
}

.showcase-card > * {
  position: relative;
  z-index: 1;
}

.showcase-card > .showcase-generated {
  position: absolute;
  z-index: 0;
}

.showcase-card span {
  color: rgba(255, 255, 255, 0.72);
  font-size: var(--t-caption);
  font-weight: var(--fw-medium);
  margin-bottom: 8px;
}

.showcase-card strong {
  color: #ffffff;
  display: block;
  font-size: 72px;
  font-weight: var(--fw-regular);
  letter-spacing: var(--track-display);
  line-height: 0.9;
}

.showcase-card p {
  color: rgba(255, 255, 255, 0.72);
  font-size: 17px;
  line-height: 1.35;
  margin: 16px 0 0;
  max-width: 320px;
}

.showcase-card[data-position="left"] {
  left: 50%;
  transform: translate(-92%, -48%) rotate(-10deg);
}

.showcase-card[data-position="center"] {
  left: 50%;
  transform: translate(-50%, -50%) rotate(0deg);
  z-index: 2;
}

.showcase-card[data-position="right"] {
  left: 50%;
  transform: translate(-8%, -48%) rotate(10deg);
}

.showcase-card[data-position="hidden"] {
  left: 50%;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -44%) scale(0.92);
}

.showcase-card[data-position="center"]:hover {
  box-shadow:
    0 40px 70px rgba(0, 0, 0, 0.16),
    inset -2px -2px 2px rgba(0, 0, 0, 0.2),
    inset 4px 4px 4px rgba(0, 0, 0, 0.03);
  transform: translate(-50%, -52%) rotate(0deg);
}

.showcase-card[data-position="center"]:hover img {
  transform: scale(1.07);
}

.showcase-dots {
  bottom: 20px;
  display: flex;
  gap: 8px;
  justify-content: center;
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
  z-index: 4;
}

.showcase-dot {
  background: rgba(25, 25, 25, 0.22);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  height: 8px;
  padding: 0;
  transition:
    background 300ms ease,
    transform 300ms cubic-bezier(0.25, 1, 0.5, 1);
  width: 8px;
}

.showcase-dot.active {
  background: var(--ink);
  transform: scale(1.22);
}

.scroll-cue {
  bottom: 32px;
  color: rgba(25, 25, 25, 0.58);
  font-size: var(--t-caption);
  font-weight: var(--fw-medium);
  left: 50%;
  letter-spacing: 0;
  position: absolute;
  transform: translateX(-50%);
  z-index: 2;
}

.section {
  background: var(--bg);
  margin: 0 auto;
  max-width: none;
  padding: clamp(96px, 10vw, 160px) var(--gutter);
  scroll-margin-top: 110px;
}

.section > * {
  margin-left: auto;
  margin-right: auto;
  max-width: var(--max);
}

.philosophy-section,
.personal-section {
  background: var(--bg);
}

.work-section {
  padding-top: 160px;
}

.work-page-main {
  min-height: 100vh;
  padding-top: clamp(140px, 14vw, 200px);
}

/* Work index — page header (mirrors .methods-header) */
.work-index-header {
  margin: 0 auto clamp(40px, 4vw, 56px);
  max-width: var(--max);
  padding: clamp(140px, 14vw, 200px) clamp(24px, 3vw, 32px) 0;
}

.work-index-title {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(40px, 4.4vw, 56px);
  font-weight: var(--fw-semi);
  letter-spacing: 0;
  line-height: 1.05;
  margin: 0 0 14px;
}

.work-index-lede {
  color: rgba(0, 0, 0, 0.6);
  font-family: var(--font-display);
  font-size: clamp(15px, 1.2vw, 17px);
  font-weight: var(--fw-regular);
  letter-spacing: 0;
  line-height: 1.5;
  margin: 0;
}

/* Light variant — clean light-gray canvas behind the customer card
   grid, with simplified hero (left-aligned eyebrow + headline). */
.work-page-light {
  background: var(--bg);
}

.work-page-light .work-page-section {
  margin: 0 auto;
  max-width: var(--max);
  padding: clamp(140px, 14vw, 200px) clamp(24px, 3vw, 32px) clamp(96px, 10vw, 140px);
}

/* Page hero — uses the base section's top padding for fixed-header
   clearance. Its bottom padding zeroes out so the title-group--lead's
   own margin-bottom (var(--title-group-end)) is the only thing
   driving the gap into the featured carousel. */
.work-page-light .work-page-hero {
  padding-bottom: 0;
}

/* Hero column matches .project-carousel-shell's column (max-width
   var(--max), centered) so 'Selected Work' sits at the same x as
   the featured carousel's left edge. */
.work-page-light .work-page-hero-header {
  margin: 0 auto;
  max-width: var(--max);
}

/* Now that the page hero owns the header-clearance top padding, the
   featured carousel and the work-grid section no longer need their
   own 140-200px top — collapse to a normal inter-section gap. Both
   transitions (hero -> carousel, carousel -> grid) are now driven by
   the same var(--title-group-end) rhythm so the page reads as one
   consistent stack. */
.work-page-light .project-carousel-section--light {
  padding-bottom: 0;
  margin-bottom: var(--title-group-end);
}

.work-page-light .work-section.work-page-section {
  padding-top: 0;
}

/* Work filter pill-switcher — spacing; left-align to content edge */
.work-filter-switcher {
  margin-bottom: clamp(28px, 3vw, 40px);
  margin-left: 0;
  margin-right: auto;
}

/* Linear-style quiet filter pills: low contrast, no heavy border, no
   colour states; active state uses a subtle dark fill. */
.work-page-light .filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-start;
  margin-bottom: clamp(28px, 3vw, 40px);
  margin-left: -14px;
  padding-bottom: 0;
}

.work-page-light .filters .filter-button {
  background: rgba(0, 0, 0, 0.05);
  border: 0;
  border-radius: 999px;
  box-shadow: none;
  color: rgba(25, 25, 25, 0.55);
  cursor: pointer;
  font-family: var(--font-display);
  font-size: var(--t-label);
  font-weight: var(--fw-medium);
  letter-spacing: 0;
  min-height: 0;
  padding: 7px 14px;
  transition:
    background 220ms cubic-bezier(0.22, 1, 0.36, 1),
    color 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.work-page-light .filters .filter-button::before,
.work-page-light .filters .filter-button::after {
  display: none;
}

.work-page-light .filters .filter-button:hover {
  background: rgba(0, 0, 0, 0.04);
  box-shadow: none;
  color: var(--ink);
}

.work-page-light .filters .filter-button.active {
  background: rgba(15, 15, 15, 0.92);
  box-shadow: none;
  color: #ffffff;
}

.work-page-section {
  padding-top: 168px;
}

.work-page-section .section-heading {
  max-width: 920px;
}


/* .section-heading layout/typography handled by .title-group--center.
   Sub-copy color/size shared with .contact-section p only. */
.contact-section p {
  color: var(--muted);
  font-size: 17px;
  font-weight: var(--fw-medium);
  letter-spacing: 0;
  line-height: 1.55;
}

.eyebrow {
  color: rgba(25, 25, 25, 0.5);
  font-size: 17px;
  font-weight: var(--fw-medium);
  letter-spacing: 0;
  line-height: 1.25;
  margin: 0 0 18px;
}

.compact {
  max-width: var(--read-default);
}

/* ====================== */
/* BREATHING STATEMENT    */
/* ====================== */

.breathing-section {
  align-items: center;
  background: var(--bg);
  display: flex;
  justify-content: center;
  min-height: 100svh;
  padding: 80px 24px;
  text-align: center;
}

.breathing-inner {
  margin: 0 auto;
  max-width: var(--max-narrow);
}

.breathing-line {
  color: var(--ink);
  display: block;
  font-family: "Kalice", Georgia, serif;
  font-size: clamp(32px, 4.2vw, 60px);
  font-weight: var(--fw-regular);
  letter-spacing: 0;
  line-height: 1.25;
  margin: 0;
}

/* Krea-style per-word fly-in. JS splits each .breathing-line text into
   `.breathing-word` spans and sets --word-index. On scroll-in, the
   parent gets .is-revealed and each word animates in sequence with
   a 45 ms stagger × index delay. Blur clears on its own shorter
   timeline so the 1px → 0 'snap to sharp' lands while the word is
   still rising — same trick as the hero headline. */
.breathing-word {
  display: inline-block;
  filter: blur(8px);
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 640ms cubic-bezier(0.2, 0.6, 0.1, 1),
    transform 640ms cubic-bezier(0.2, 0.6, 0.1, 1),
    filter 420ms cubic-bezier(0.33, 1, 0.68, 1);
  transition-delay: calc(var(--word-index, 0) * 45ms);
  will-change: opacity, transform, filter;
}

.breathing-line.is-revealed .breathing-word {
  filter: blur(0);
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .breathing-word {
    filter: none;
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.breathing-line-1 {
  margin-bottom: 0.15em;
}

.breathing-line-2 {
  color: var(--muted);
}

/* On-dark variant — used when breathing lines sit over a dark / video
   background (e.g., personal section). Inverts the ink/muted hierarchy
   to a pure white + soft white-with-alpha. */
.breathing-line--on-dark.breathing-line-1 {
  color: #ffffff;
}

.breathing-line--on-dark.breathing-line-2 {
  color: #ffffff;
}

/* Employer logo section — Granola-inspired layout (compact heading, bordered cards, 1/3 side fades) */
.employer-logo-section {
  background: var(--bg);
  display: flex;
  flex-direction: column;
  gap: 24px; /* fixed headline-to-rail distance */
  margin: 0 auto;
  max-width: 80rem; /* max-w-7xl */
  overflow: visible;
  padding: clamp(72px, 8vw, 120px) clamp(16px, 2vw, 32px) clamp(64px, 7vw, 104px);
}

/* This section drives its own headline-to-rail gap via flex `gap`,
   so cancel the shared .title-group--center bottom margin. */
.employer-logo-section .employer-logo-heading {
  margin-bottom: 0;
}

.employer-logo-heading {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0 auto;
  max-width: 56rem; /* max-w-4xl */
  text-align: center;
}

.employer-logo-rail {
  margin: 0 auto;
  max-width: 100%;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.logo-fade {
  height: 100%;
  pointer-events: none;
  position: absolute;
  top: 0;
  width: 33.3333%; /* w-1/3 — Granola spec */
  z-index: 2;
}

.logo-fade-left {
  background: linear-gradient(to left, transparent, var(--bg));
  left: 0;
}

.logo-fade-right {
  background: linear-gradient(to right, transparent, var(--bg));
  right: 0;
}

@media (min-width: 1024px) {
  .employer-logo-section {
    gap: 4rem; /* lg:gap-16 */
  }
}

.marquee {
  display: flex;
  gap: var(--gap);
  overflow: hidden;
  user-select: none;
}

.marquee__content {
  align-items: center;
  animation: marquee-scroll var(--duration) linear infinite;
  display: flex;
  flex-shrink: 0;
  gap: var(--gap);
  justify-content: space-around;
}

/* Granola-style logo wall — fixed-size cards, every logo renders at uniform
   height anchored on AfterShip. Card height ~112px on desktop matches Granola's
   p-2 + 96-tall image envelope. */
.employer-logo-card {
  align-items: center;
  background: transparent;
  border: 1px solid rgba(25, 25, 25, 0.1);
  border-radius: 10px;
  box-shadow: none;
  display: flex;
  flex: 0 0 auto;
  height: 96px; /* mobile baseline */
  justify-content: center;
  padding: 1rem 1.25rem;
  transition:
    background-color 260ms cubic-bezier(0.2, 0, 0, 1),
    border-color 260ms cubic-bezier(0.2, 0, 0, 1),
    opacity 260ms cubic-bezier(0.2, 0, 0, 1);
  width: 220px;
}

@media (min-width: 768px) {
  .employer-logo-card {
    height: 112px; /* Granola-like envelope */
    width: 260px;
  }
}

.employer-logo-card:hover {
  background: rgba(255, 255, 255, 0.6);
  border-color: rgba(25, 25, 25, 0.18);
}

/* AfterShip is the visual anchor — all "compact" SVGs (no internal padding)
   render at this height. Cards keep generous breathing room around the logo. */
.employer-logo-img {
  display: block;
  filter: brightness(0);
  height: 26px; /* mobile baseline — anchored on AfterShip */
  max-width: 140px;
  object-fit: contain;
  opacity: 0.7;
  transition: opacity 260ms cubic-bezier(0.2, 0, 0, 1);
  width: auto;
}

@media (min-width: 768px) {
  .employer-logo-img {
    height: 32px;
    max-width: 168px;
  }
}

.employer-logo-card:hover .employer-logo-img {
  opacity: 1;
}

.employer-logo-lockup {
  align-items: center;
  color: #171717;
  display: inline-flex;
  font-size: 30px;
  font-weight: var(--fw-semi);
  gap: 14px;
  justify-content: center;
  letter-spacing: 0;
  line-height: 1;
  opacity: 0.82;
  white-space: nowrap;
}

.employer-logo-lockup .employer-logo-img {
  opacity: 1;
}

/* Per-logo optical-balance adjustments. Anchor: AfterShip — middle-density
   wordmark, 4.83:1, no internal padding. Other logos deviate on density,
   stroke weight, or SVG packing — corrections below preserve PERCEIVED scale,
   not geometric scale.

   Rule of thumb: dense/bold logos shrink, thin/padded logos grow. Two
   height tiers (32px / 26-28px) plus one transform-only exception (vivo). */

/* CapCut — filled ▶ icon + bold sans = +30% black density vs AfterShip */
.employer-logo-img-capcut {
  height: 28px;
}

/* Tencent — long wordmark + dense character row dominates horizontally */
.employer-logo-img-tencent {
  height: 26px;
}

/* TikTok — bold sans + filled ♪ icon, slight optical reduction */
.employer-logo-img-tiktok {
  transform: scale(0.96);
  transform-origin: center;
}

/* Yuanbao — CJK characters read denser than Latin + ingot icon */
.employer-logo-img-yuanbao {
  transform: scale(1.10);
  transform-origin: center;
}

/* vivo — SVG viewBox has ~50% transparent padding around the wordmark.
   This is an asset-level issue corrected at render time. */
.employer-logo-img-vivo {
  transform: scale(2.405);
  transform-origin: center;
}

/* ── Yuanbao AI Agent — Bento Grid ─────────────────────────────────── */

/* Yuanbao card — UI screenshot inside a gray container with a fixed
   32px padding on all sides; .craft-rail-card-caption sits below for
   label + body. Container height is fixed at 400px; container width
   is intrinsic: image height = 100% of content box (336px), image
   width follows aspect ratio, container width = image width + 64px
   padding. No min-width or max-width clamp — the card is exactly
   "UI width + fixed padding". */
.yuanbao-card {
  color: inherit;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  scroll-snap-align: start;
}

.yuanbao-card-visual {
  align-items: center;
  background: #ececec;
  border: 0.5px solid rgba(0, 0, 0, 0.05);
  border-radius: 24px;
  box-sizing: border-box;
  display: flex;
  height: 400px;
  justify-content: center;
  overflow: hidden;
  padding: 32px 76px;
  position: relative;
}

/* Fill variant — for illustrations (not UI screenshots). Image bleeds
   to the container edges with no inner padding. Container's 24px radius
   + overflow:hidden clips the image to the rounded shape, so the image
   itself doesn't need its own radius. */
.yuanbao-card-visual--fill {
  aspect-ratio: 16 / 9;
  padding: 0;
}

.yuanbao-card-visual--fill .yuanbao-card-img {
  border-radius: 0;
}

.yuanbao-card-img {
  border-radius: 12px;
  display: block;
  height: 100%;
  object-fit: contain;
  width: auto;
}

/* Text-toolbar variant — square 400x400 card. The 3 toolbar PNGs are
   rendered at half their natural pixel size (height: 54px, half of
   the source 108px) and left-anchored, so the longer right portion
   of each toolbar bleeds out past the card's right edge. The
   "peeking-in from the side" framing is the intent. */
.yuanbao-card-visual--toolbar {
  justify-content: flex-start;
  padding: 0 0 0 32px;
  width: 400px;
}

.yuanbao-toolbar-stack {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  gap: 16px;
  height: auto;
  justify-content: center;
  width: auto;
}

.yuanbao-toolbar-stack img {
  border-radius: 8px;
  display: block;
  flex: 0 0 auto;
  height: 54px;
  width: auto;
}

@media (max-width: 600px) {
  .yuanbao-bento-section .rail-grid {
    gap: 8px;
  }

  .yuanbao-card-visual {
    height: 320px;
    padding: 24px 38px;
  }
}

/* ── End Yuanbao Bento ─────────────────────────────────────────────── */

/* ── Craft rail — Douyin / CapCut / vivo selected work ────────────── */

/* ============================================================
   RAIL — shared section component
   Used by: AfterShip · Brand & Web (asbrand), Tencent · Yuanbao,
   Selected craft. Single source of truth for the
   "section + title-group + horizontal-scroll grid + paddle nav"
   pattern. Individual card visuals (.craft-rail-card,
   .yuanbao-card) stay separate because their content models
   genuinely differ.
   ============================================================ */
.rail-section {
  padding: clamp(72px, 8vw, 120px) var(--gutter);
}

.rail-shell {
  margin: 0 auto;
  max-width: var(--max);
}

/* Carousel breaks out of the section gutter to span the full
   viewport; --rail-padding keeps the first card's left edge
   aligned with the heading column above. */
.rail-carousel {
  --rail-padding: max(var(--gutter), calc((100vw - var(--max)) / 2));
  margin: 0;
  max-width: none;
  position: relative;
}

.rail-grid {
  display: grid;
  gap: clamp(16px, 1.5vw, 24px);
  grid-auto-flow: column;
  margin-left: calc(-1 * var(--gutter));
  margin-right: calc(-1 * var(--gutter));
  overflow-x: auto;
  overflow-y: hidden;
  padding: 4px var(--rail-padding);
  scroll-padding-inline: var(--rail-padding);
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.rail-grid::-webkit-scrollbar {
  display: none;
}

/* Tight-gap variant — for denser visual cards (e.g., Yuanbao bento).
   align-items: start prevents cards from stretching to the tallest row
   height, which would leave empty space below shorter card captions. */
.rail-grid--tight {
  align-items: start;
  gap: clamp(12px, 1vw, 16px);
}

/* Adaptive-width variant — card visual width follows each image's natural
   aspect ratio instead of being forced to 16:9. Height stays uniform at
   400px so the row stays aligned; the container shrinks to fit-content so
   the image drives the width. Used for Design Language, Design System,
   CapCut DL, and Douyin AR rails where images mix 16:9 and 4:3. */
.rail-grid--adaptive .craft-rail-card-visual {
  aspect-ratio: unset;
  width: fit-content;
}

.rail-grid--adaptive .craft-rail-card-visual img {
  height: 100%;
  width: auto;
}

/* Trailing space on the last card so the scroll can reach the
   final snap target regardless of card width (cards are now sized
   by aspect-ratio × height, so widths vary). The formula assumes
   a 280px minimum card width and gives the rail enough room to
   left-snap any final card to the rail-padding column. */
.rail-grid > :last-child {
  margin-inline-end: max(0px, calc(100vw - var(--rail-padding) - 280px));
}

/* Paddle nav — right-aligned to the content column. Each button sits
   inside a .glass-button-root wrapper and uses the shared
   .footer-icon-btn glass treatment; .rail-nav-btn here is just the
   sizing override (twice the footer-icon-btn default) and the
   disabled-state plumbing. */
.rail-nav {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-top: clamp(20px, 2vw, 28px);
  padding-right: max(0px, calc(var(--rail-padding) - var(--gutter)));
}

/* Compound .footer-icon-btn.rail-nav-btn selector keeps specificity
   above the bare .footer-icon-btn size rule that ships later in the
   file (footer-icon-btn { height: 44px ... } at L5935). Same trick
   on the svg child override. */
.footer-icon-btn.rail-nav-btn {
  font-size: 20px;
  height: 52px;
  width: 52px;
}

.footer-icon-btn.rail-nav-btn svg {
  height: 24px;
  width: 24px;
  stroke-width: 2.2;
}

/* The .glass-button-shadow halo geometry (cutoff-fix, offsets, blur)
   is all em-based, and the em context lives on .glass-button-root —
   which has no font-size of its own, so it inherits body's 16px and
   the drop shadow stays a fixed ~32px halo no matter how big the
   button gets. Set font-size on the root to match the button so the
   shadow scales up in proportion. */
.rail-nav .glass-button-root {
  font-size: 20px;
}

/* Rail nav arrows on light backgrounds keep the shared glass treatment —
   no overrides needed here; the default footer-icon-btn glass system applies. */

.glass-button-root:has(.rail-nav-btn:disabled) {
  opacity: 0.3;
  pointer-events: none;
}

/* Card — height-uniform thumbnail on top, Apple-style caption below.
   The visual locks to a unified height; each card's width follows
   from its aspect-ratio (set per-card via --card-aspect, default 16:9).
   3 AfterShip videos pass `--card-aspect: 1` for square framing;
   long screenshots (homepage / pricing) take the 16:9 default. */
.craft-rail-card {
  color: inherit;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  scroll-snap-align: start;
  text-decoration: none;
}

.craft-rail-card-visual {
  background: #ececec;
  border: 0.5px solid rgba(0, 0, 0, 0.06);
  border-radius: 24px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.04), 0 2px 6px rgba(0, 0, 0, 0.03);
  height: 400px;
  overflow: hidden;
  position: relative;
  transition: border-radius 0.4s ease-out, box-shadow 0.4s ease-out;
  /* aspect-ratio + fixed height reserves the visual's width pre-image-load,
     so caption text never expands the card to its own paragraph width.
     Individual cards can override via inline style (JS-rendered) or via
     --card-aspect on the parent card (e.g. square video cards). */
  aspect-ratio: var(--card-aspect, 16/9);
  width: auto;
}

.craft-rail-card:hover .craft-rail-card-visual {
  border-radius: 36px;
  box-shadow: 0 28px 60px rgba(0, 0, 0, 0.08), 0 6px 14px rgba(0, 0, 0, 0.05);
}

.craft-rail-card-visual img,
.craft-rail-card-video {
  background: transparent;
  display: block;
  height: 100%;
  object-fit: cover;
  width: auto;
}

.craft-rail-card-caption {
  box-sizing: border-box;
  padding: 20px 4px 0;
  width: 100%;
}

.craft-rail-card-title {
  color: var(--ink);
  font-size: 17px;
  font-weight: var(--fw-semi);
  letter-spacing: 0;
  line-height: 1.4;
  margin: 0 0 6px;
}

.craft-rail-card-desc {
  color: rgba(25, 25, 25, 0.55);
  font-size: 17px;
  font-weight: var(--fw-book);
  letter-spacing: 0;
  line-height: 1.5;
  margin: 0;
}

/* Hover play/pause toggle — appears at the bottom-right of the visual
   area on card hover. Mirrors the .personal-play dark-glass button:
   triangle by default, two pause bars (::before/::after) when the
   parent card has .is-playing. */
.craft-rail-card-play {
  align-items: center;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  bottom: 16px;
  color: #ffffff;
  cursor: pointer;
  display: inline-flex;
  height: 44px;
  justify-content: center;
  opacity: 0;
  padding: 0;
  pointer-events: none;
  position: absolute;
  right: 16px;
  transition:
    background 220ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 220ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
  width: 44px;
  z-index: 2;
}

.craft-rail-card:hover .craft-rail-card-play,
.craft-rail-card-play:focus-visible {
  opacity: 1;
  pointer-events: auto;
}

.craft-rail-card-play:hover {
  background: rgba(0, 0, 0, 0.62);
  transform: scale(1.04);
}

.craft-rail-card-play svg {
  display: block;
  height: 14px;
  margin-left: 2px;
  width: 14px;
}

/* Pause glyph — replaces the triangle when the card is .is-playing. */
.craft-rail-card.is-playing .craft-rail-card-play svg {
  display: none;
}

.craft-rail-card.is-playing .craft-rail-card-play::before,
.craft-rail-card.is-playing .craft-rail-card-play::after {
  background: currentColor;
  border-radius: 1px;
  content: "";
  display: block;
  height: 14px;
  width: 3px;
}

.craft-rail-card.is-playing .craft-rail-card-play::before {
  margin-right: 4px;
}

/* ── End Rail ──────────────────────────────────────────────────────── */

/* Career chapters — left vertical list of stops drives a single right
   card that swaps cover + heading + body + CTA via a crossfade. Active
   row marked in dark ink, others muted. */
.chapter-panel {
  align-items: start;
  display: grid;
  gap: clamp(28px, 4vw, 56px);
  grid-template-columns: minmax(220px, 0.7fr) minmax(0, 1.7fr);
  margin-top: clamp(32px, 4vw, 56px);
}

.chapter-panel-rail {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.chapter-panel-arrows {
  display: flex;
  gap: 8px;
}

.chapter-arrow {
  align-items: center;
  background: rgba(25, 25, 25, 0.04);
  border: 1px solid rgba(25, 25, 25, 0.08);
  border-radius: 999px;
  color: rgba(25, 25, 25, 0.6);
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  height: 40px;
  justify-content: center;
  padding: 0;
  transition:
    background 220ms cubic-bezier(0.22, 1, 0.36, 1),
    color 220ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 220ms cubic-bezier(0.22, 1, 0.36, 1);
  width: 40px;
}

.chapter-arrow:hover:not([disabled]) {
  background: rgba(25, 25, 25, 0.1);
  color: var(--ink);
}

.chapter-arrow[disabled] {
  cursor: default;
  opacity: 0.35;
}

.chapter-arrow svg {
  height: 16px;
  width: 16px;
}

/* Left rail list — vertical stack of clickable rows. Active row in
   solid ink; inactive rows muted; hover lifts toward ink. */
.chapter-panel-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.chapter-panel-list button {
  background: transparent;
  border: 0;
  color: rgba(25, 25, 25, 0.45);
  cursor: pointer;
  display: block;
  font-family: var(--font-display);
  font-size: clamp(18px, 1.6vw, 22px);
  font-weight: var(--fw-semi);
  letter-spacing: var(--track-display);
  line-height: 1.3;
  padding: 10px 0;
  text-align: left;
  transition: color 220ms cubic-bezier(0.22, 1, 0.36, 1);
  width: 100%;
}

.chapter-panel-list button:hover {
  color: rgba(25, 25, 25, 0.75);
}

.chapter-panel-list button.is-active {
  color: var(--ink);
}

/* Right-side card — single panel that crossfades when the active row
   changes. Image on the left half (square), copy on the right half. */
.chapter-panel-card {
  background: #ffffff;
  border: 1px solid rgba(25, 25, 25, 0.06);
  border-radius: 32px;
  box-shadow: 0 32px 64px -24px rgba(0, 0, 0, 0.12);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  overflow: hidden;
  transition:
    opacity 220ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.chapter-panel-card.is-switching {
  opacity: 0;
  transform: translateY(6px);
}

.chapter-panel-card.is-entering {
  animation: chapter-card-in 420ms cubic-bezier(0.2, 0, 0, 1) forwards;
}

@keyframes chapter-card-in {
  0% {
    opacity: 0;
    transform: translateY(8px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.chapter-card-visual {
  aspect-ratio: 1 / 1;
  background: linear-gradient(135deg, #f0f1ef 0%, #e3e4e1 100%);
  height: 100%;
  overflow: hidden;
  position: relative;
}

.chapter-card-visual img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.chapter-card-copy {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: 14px;
  justify-content: center;
  padding: clamp(24px, 2.4vw, 36px);
}

.chapter-card-eyebrow {
  color: rgba(25, 25, 25, 0.5);
  font-family: var(--font-display);
  font-size: var(--t-micro);
  font-weight: var(--fw-medium);
  letter-spacing: var(--track-eyebrow);
  margin: 0;
}

.chapter-card-title {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(22px, 2vw, 28px);
  font-weight: var(--fw-semi);
  letter-spacing: var(--track-sub);
  line-height: 1.15;
  margin: 0;
}

.chapter-card-body {
  color: var(--muted);
  font-family: var(--font-display);
  font-size: var(--t-small);
  font-weight: var(--fw-regular);
  letter-spacing: 0;
  line-height: 1.55;
  margin: 0;
  max-width: 42ch;
}

.chapter-card-cta {
  align-items: center;
  align-self: flex-start;
  background: var(--ink);
  border-radius: 999px;
  color: #ffffff;
  display: inline-flex;
  font-family: var(--font-display);
  font-size: var(--t-label);
  font-weight: var(--fw-medium);
  gap: 8px;
  letter-spacing: 0;
  margin-top: 8px;
  padding: 11px 20px;
  transition: opacity 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.chapter-card-cta:hover {
  opacity: 0.85;
}

@media (max-width: 880px) {
  .chapter-panel {
    gap: 28px;
    grid-template-columns: 1fr;
  }
  .chapter-panel-card {
    grid-template-columns: 1fr;
  }
  .chapter-card-visual {
    aspect-ratio: 16 / 10;
  }
}

/* Footer — Warp.co pattern. Multi-column nav grid above, oversized
   striped DENNIS wordmark below. Light background, accent-red wordmark
   filled with horizontal stripes via background-clip:text. */
/* Warp-style footer: flat link grid + quiet bottom bar. No dividers —
   separation is whitespace only. */
.portfolio-footer {
  background: var(--bg);
  margin-top: clamp(80px, 10vw, 140px);
  overflow: hidden;
  padding: 0 clamp(24px, 5vw, 40px) 0;   /* top spacing moved to grid */
  position: relative;
}

/* Divider that aligns left/right with the footer content columns */
.portfolio-footer-rule {
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  margin: 0 auto;
  max-width: var(--max-wide);
}

.portfolio-footer-grid {
  display: grid;
  gap: clamp(40px, 5vw, 64px) clamp(32px, 4vw, 56px);
  grid-template-columns: minmax(0, 1.2fr) repeat(3, minmax(0, 1fr));
  margin: 0 auto;
  max-width: var(--max-wide);
  padding-bottom: clamp(56px, 6vw, 88px);
  padding-top: clamp(36px, 4vw, 56px);   /* spacing below the rule */
}

.portfolio-footer-brand {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.portfolio-footer-mark {
  display: inline-block;
  transition: opacity 220ms cubic-bezier(0.22, 1, 0.36, 1);
  width: fit-content;
}

.portfolio-footer-mark:hover {
  opacity: 0.7;
}

.portfolio-footer-mark img {
  display: block;
  height: 28px;
  width: auto;
}

.portfolio-footer-copyright {
  color: rgba(25, 25, 25, 0.5);
  font-family: var(--font-display);
  font-size: var(--t-label);
  font-weight: var(--fw-regular);
  letter-spacing: 0;
  line-height: 1.55;
  margin: 0;
  max-width: 240px;
}

.portfolio-footer-column {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Footer column heading */
.portfolio-footer-column h3 {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--t-small);
  font-weight: var(--fw-medium);
  letter-spacing: var(--track-eyebrow);
  line-height: 1.6;
  margin: 0 0 6px;
}

.portfolio-footer-column a {
  color: rgba(25, 25, 25, 0.6);
  font-family: var(--font-display);
  font-size: var(--t-caption);
  font-weight: var(--fw-book);
  letter-spacing: 0;
  line-height: 1.6;
  transition: opacity 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.portfolio-footer-column a:hover {
  opacity: 0.7;
}

/* Oversized DENNIS wordmark — stripe-filled, bottom-cropped like Warp.
   Font large enough to bleed left+right beyond viewport; footer overflow:hidden
   crops all three edges. ~35% glyph height buried below footer floor. */
.portfolio-footer-wordmark {
  -webkit-background-clip: text;
  background-clip: text;
  background-image: repeating-linear-gradient(
    0deg,
    rgba(25, 25, 25, 0.08) 0px,
    rgba(25, 25, 25, 0.08) 3px,
    transparent 3px,
    transparent 6px
  );
  background-size: 100% 6px;
  color: transparent;
  /* inline-block + left:50% + translateX(-50%) ensures the (much wider than
     viewport) text is symmetrically centered on the footer's content center —
     more reliable than text-align:center on a block, which can drift due to
     ancestor padding, scrollbar gutter, or text-align inheritance quirks. */
  display: inline-block;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-display);
  font-size: clamp(160px, 28vw, 560px);
  font-weight: 800;
  letter-spacing: var(--track-hero);
  /* line-height: 1 so the element box covers the full glyph; otherwise the
     mask only applies inside the box and overflowing ascenders escape it. */
  line-height: 1;
  /* Bury the lower half below the footer floor — combined with the mask
     fade below, lets the letters dissolve into the background. */
  margin: 0 0 -0.5em;
  padding-bottom: 0;
  white-space: nowrap;
  user-select: none;
  /* Decorative — extending glyphs would otherwise block clicks on the
     footer columns above. */
  pointer-events: none;
  /* Vertical fade — top quarter solid, then dissolve to transparent before
     the cropped baseline (Warp-style soft transition into the bg). */
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 25%, transparent 60%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 25%, transparent 60%);
}

@media (max-width: 1024px) {
  .portfolio-footer-grid {
    grid-template-columns: minmax(0, 1fr) repeat(2, minmax(0, 1fr));
  }
  .portfolio-footer-brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 600px) {
  .portfolio-footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .portfolio-footer-brand {
    grid-column: 1 / -1;
  }
  .portfolio-footer-wordmark {
    font-size: clamp(160px, 48vw, 360px);
  }
}

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

.philosophy-grid article {
  background: #ffffff;
  border: 1px solid rgba(25, 25, 25, 0.06);
  border-radius: 28px;
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.78),
    0 24px 48px rgba(0, 0, 0, 0.045);
  min-height: 280px;
  padding: 26px;
}

.philosophy-grid span,
.profile-flow span,
.partner-grid span {
  color: var(--soft);
  display: block;
  font-size: var(--t-micro);
  font-weight: var(--fw-medium);
  letter-spacing: var(--track-eyebrow);
  margin-bottom: 18px;
}

.philosophy-grid h3 {
  font-size: clamp(28px, 3.2vw, 42px);
  letter-spacing: var(--track-tight);
  line-height: 0.98;
  margin-bottom: 18px;
}

.philosophy-grid p,
.profile-flow p,
.partner-grid p {
  color: var(--muted);
  font-size: var(--t-body);
  letter-spacing: var(--track-display);
  line-height: 1.4;
  margin: 0;
}

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-bottom: 36px;
}

.filter-button {
  align-items: center;
  color: rgba(25, 25, 25, 0.62);
  font: inherit;
  font-size: var(--t-body);
  min-height: 46px;
  padding: 0 20px;
}

.filter-button.active {
  background: linear-gradient(-75deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.05));
  color: var(--ink);
  box-shadow: var(--glass-shadow-active);
}

/* Work page card grid — 2-column case-study index.
   No fixed card height — cover scales via aspect-ratio: 16/9
   so it always fills proportionally as container width changes.
   Grid goes 2-col → 1-col at 760px (mobile). */
.project-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* ─── Skeleton / shimmer loading ─────────────────────────────── */

@keyframes skeleton-scan {
  0%   { transform: translateX(-250%); }
  100% { transform: translateX(250%); }
}

@keyframes skeleton-fade-out {
  to { opacity: 0; pointer-events: none; }
}

/* Work page — skeleton cards */
.skeleton-card {
  background: #f3f3f1;
  border-radius: 24px;
  overflow: hidden;
  position: relative;
}

.skeleton-card::after {
  animation: skeleton-scan 1.6s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  background: linear-gradient(
    105deg,
    transparent 20%,
    rgba(255, 255, 255, 0.52) 50%,
    transparent 80%
  );
  content: '';
  inset: 0;
  pointer-events: none;
  position: absolute;
}

.skeleton-card:nth-child(2)::after { animation-delay: 0.18s; }
.skeleton-card:nth-child(3)::after { animation-delay: 0.36s; }
.skeleton-card:nth-child(4)::after { animation-delay: 0.09s; }
.skeleton-card:nth-child(5)::after { animation-delay: 0.27s; }
.skeleton-card:nth-child(6)::after { animation-delay: 0.22s; }

.skeleton-media {
  aspect-ratio: 16 / 9;
  background: #e8e8e6;
  border-radius: 18px;
  margin: 16px 16px 0;
}

.skeleton-body {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 14px 16px 22px;
}

.skeleton-line {
  background: #e4e4e2;
  border-radius: 4px;
}

.skeleton-line-sm  { height: 10px; width: 36%; }
.skeleton-line-lg  { height: 20px; width: 70%; margin-top: 2px; }
.skeleton-line-md  { height: 10px; width: 54%; }
.skeleton-line-cta { height: 10px; width: 22%; margin-top: 6px; }

/* Project cards — staggered fade-in after skeleton swap */
@keyframes card-appear {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.project-grid.is-loaded .project-card {
  animation: card-appear 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.project-grid.is-loaded .project-card:nth-child(1) { animation-delay: 0ms; }
.project-grid.is-loaded .project-card:nth-child(2) { animation-delay: 40ms; }
.project-grid.is-loaded .project-card:nth-child(3) { animation-delay: 80ms; }
.project-grid.is-loaded .project-card:nth-child(4) { animation-delay: 120ms; }
.project-grid.is-loaded .project-card:nth-child(5) { animation-delay: 160ms; }
.project-grid.is-loaded .project-card:nth-child(6) { animation-delay: 200ms; }
.project-grid.is-loaded .project-card:nth-child(n+7) { animation-delay: 240ms; }

/* Methods page — sweep overlay on static items */
.methods-item {
  position: relative;
}

.methods-item::after {
  animation:
    skeleton-scan 1.4s ease-in-out var(--sk-delay, 0s) 1,
    skeleton-fade-out 0.3s ease-out calc(var(--sk-delay, 0s) + 1.4s) forwards;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(250, 250, 248, 0.78) 50%,
    transparent 100%
  );
  content: '';
  inset: 0;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  animation-fill-mode: both;
}

/* Rail / chapter card image containers — shimmer sweep on slow loads */
.craft-rail-card-visual::before,
.yuanbao-card-visual::before,
.chapter-card-visual::before {
  animation:
    skeleton-scan 1.5s ease-in-out var(--sk-delay, 0s) 2,
    skeleton-fade-out 0.35s ease-out calc(var(--sk-delay, 0s) + 3s) forwards;
  animation-fill-mode: both;
  background: linear-gradient(
    105deg,
    transparent 20%,
    rgba(255, 255, 255, 0.48) 50%,
    transparent 80%
  );
  content: '';
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 2;
}

/* Stagger sweep by card position */
.rail-grid > *:nth-child(2) .craft-rail-card-visual::before,
.yuanbao-bento-section .yuanbao-card:nth-child(2) .yuanbao-card-visual::before,
.chapter-grid .chapter-card:nth-child(2) .chapter-card-visual::before { --sk-delay: 0.15s; }
.rail-grid > *:nth-child(3) .craft-rail-card-visual::before,
.yuanbao-bento-section .yuanbao-card:nth-child(3) .yuanbao-card-visual::before,
.chapter-grid .chapter-card:nth-child(3) .chapter-card-visual::before { --sk-delay: 0.30s; }
.rail-grid > *:nth-child(4) .craft-rail-card-visual::before,
.yuanbao-bento-section .yuanbao-card:nth-child(4) .yuanbao-card-visual::before { --sk-delay: 0.12s; }
.rail-grid > *:nth-child(5) .craft-rail-card-visual::before,
.yuanbao-bento-section .yuanbao-card:nth-child(5) .yuanbao-card-visual::before { --sk-delay: 0.24s; }
.rail-grid > *:nth-child(n+6) .craft-rail-card-visual::before { --sk-delay: 0.20s; }

/* ─── End skeleton ────────────────────────────────────────────── */

.project-card {
  background: #f7f7f5;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 24px;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  transition:
    transform 420ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.project-card:hover {
  border-color: rgba(0, 0, 0, 0.14);
  transform: translateY(-3px);
}

.project-open {
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 0;
  text-align: left;
  width: 100%;
}

/* Image area: 16px inset on all four sides, 18px radius, fixed
   220px height. Image fills via object-fit: cover. Cards without a
   deck cover render an abstract gradient placeholder. */
.project-media {
  aspect-ratio: 16 / 9;
  background: #ececea;
  border-radius: 18px;
  flex-shrink: 0;
  margin: 16px 16px 0;
  overflow: hidden;
  position: relative;
}

.project-media img,
.detail-cover-link img {
  display: block;
  height: 100%;
  object-fit: cover;
  transition: transform 640ms cubic-bezier(0.22, 1, 0.36, 1);
  width: 100%;
}

.project-media img[src*="senseface"],
.detail-cover-link img[src*="senseface"] {
  object-position: top center;
}

.project-card:hover .project-media img,
.project-card:hover .project-card-abstract {
  transform: scale(1.03);
}

.project-card-abstract {
  height: 100%;
  transition: transform 640ms cubic-bezier(0.22, 1, 0.36, 1);
  width: 100%;
}

.project-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 16px 20px 28px;
}

.project-card-eyebrow {
  color: rgba(0, 0, 0, 0.48);
  font-family: var(--font-display);
  font-size: var(--t-micro);
  font-weight: var(--fw-medium);
  letter-spacing: var(--track-eyebrow);
  margin: 0 0 10px;
}

.project-card-title {
  color: var(--ink);
  display: -webkit-box;
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: var(--fw-semi);
  -webkit-line-clamp: 2;
  letter-spacing: 0;
  line-height: 1.1;
  line-clamp: 2;
  margin: 0;
  overflow: hidden;
  -webkit-box-orient: vertical;
}

.project-card-outcome {
  color: rgba(0, 0, 0, 0.58);
  display: -webkit-box;
  font-family: var(--font-display);
  font-size: var(--t-small);
  font-weight: var(--fw-regular);
  -webkit-line-clamp: 2;
  letter-spacing: 0;
  line-height: 1.45;
  line-clamp: 2;
  margin: 10px 0 0;
  overflow: hidden;
  -webkit-box-orient: vertical;
}

.project-card-cta {
  color: rgba(0, 0, 0, 0.72);
  font-family: var(--font-display);
  font-size: var(--t-caption);
  font-weight: var(--fw-semi);
  letter-spacing: 0;
  margin-top: auto;
  padding-top: 36px;
  transition: color 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.project-card:hover .project-card-cta {
  color: var(--ink);
}


.project-links,
.social-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.project-links {
  border-top: 1px solid rgba(25, 25, 25, 0.06);
  margin: 0;
  padding: 0 28px 28px;
}

.project-links a,
.social-links a {
  align-items: center;
  color: rgba(25, 25, 25, 0.72);
  font-size: var(--t-caption);
  min-height: 36px;
  padding: 0 14px;
}

.social-links a {
  --glass-shadow-blur: clamp(2px, 0.08em, 7px);
  --glass-shadow-top: 0.24em;
  --glass-shadow-left: 0.08em;
}

/* Operating Model — "Four moves" as editorial operating principles.
   Asymmetric 3-column grid: 01 + 04 dominate (each spans 2 cols), 02 + 03
   are compact (1 col). Card surfaces are intentionally restrained — no
   glass, no shadow, no rounded card. Borders + oversized faded numerals
   carry the structural rhythm. */
/* Operating System — editorial instructional panels (Krea-style rhythm).
   Centered heading + 2×2 grid of low-contrast panels. No shadows, no
   gradients, no UI cards. Soft 1px borders carry the structural frame
   and oversized faded numerals act as the architectural anchors. */
.profile-section {
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  margin: 0 auto;
  max-width: var(--max);
  padding: clamp(80px, 9vw, 128px) var(--gutter);
  text-align: center;
}

.profile-section > * {
  max-width: none;
}

/* Bio block on home page — sits inside .title-group--center, so layout
   and spacing come from there. Only the narrow column width is section-
   specific (bio reads tighter than other sub copy). */
.profile-copy {
  max-width: var(--max-narrow);
}

.profile-flow {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  text-align: left;
}

.profile-flow article {
  background: transparent;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 20px;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 240px;
  padding: clamp(36px, 4vw, 56px) clamp(28px, 3vw, 48px);
  position: relative;
}

.profile-flow .move-numeral {
  color: rgba(25, 25, 25, 0.1);
  display: block;
  font-family: var(--font-display);
  font-size: clamp(64px, 7.5vw, 96px);
  font-weight: var(--fw-semi);
  letter-spacing: var(--track-display);
  line-height: 0.9;
  margin: 0 0 clamp(44px, 5vw, 72px);
}

.profile-flow h3 {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.2vw, 28px);
  font-weight: var(--fw-semi);
  letter-spacing: var(--track-sub);
  line-height: 1.15;
  margin: 0 0 10px;
}

.profile-flow p {
  color: rgba(25, 25, 25, 0.5);
  font-size: var(--t-caption);
  font-weight: var(--fw-regular);
  letter-spacing: 0;
  line-height: 1.55;
  margin: 0;
  max-width: 320px;
}

@media (max-width: 760px) {
  .profile-flow {
    grid-template-columns: 1fr;
  }
  .profile-flow article {
    min-height: 200px;
    padding: 32px 28px;
  }
  .profile-flow article[data-move="02"],
  .profile-flow article[data-move="04"] {
    border-left: 0;
  }
}

.partner-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 18px;
}

.partner-grid article {
  background: #ffffff;
  border: 1px solid rgba(25, 25, 25, 0.06);
  border-radius: 22px;
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.7),
    0 12px 28px rgba(0, 0, 0, 0.035);
  min-height: 178px;
  padding: 22px;
}

.partner-grid span {
  margin-bottom: 14px;
}

/* Dedicated /work/<slug> case-study page — full-bleed light canvas. */
.work-case-page {
  background: var(--bg);
}

.work-case-main {
  margin: 0 auto;
  max-width: 1040px;
  padding: 0 clamp(24px, 3vw, 40px);
}

.work-case-footer {
  margin-top: clamp(40px, 5vw, 80px);
}

.project-detail-shell {
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  margin: 0 auto;
  max-width: 1280px;
  padding: 0;
}

.detail-header {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-bottom: 34px;
}

.detail-header span,
.detail-note {
  color: var(--muted);
  font-size: var(--t-caption);
  font-weight: var(--fw-medium);
}

.detail-back {
  color: var(--ink);
  font: inherit;
  font-size: var(--t-caption);
  min-height: 42px;
  padding: 0 18px;
}

.detail-hero {
  display: grid;
  gap: 0;
  grid-template-columns: 1fr;
  margin-bottom: clamp(40px, 5vw, 64px);
}

.detail-hero h2 {
  margin-bottom: 18px;
}

.detail-hero p {
  color: var(--muted);
  font-size: 22px;
  letter-spacing: 0;
  line-height: 1.4;
  margin-bottom: 0;
  max-width: 760px;
}

.detail-facts {
  background: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 24px;
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.7),
    0 16px 36px rgba(0, 0, 0, 0.04);
  padding: 22px;
}

.detail-facts strong,
.detail-facts span {
  display: block;
  font-size: var(--t-body);
  line-height: 1.45;
}

.detail-facts span {
  color: var(--muted);
  margin-top: 12px;
}

.detail-stage {
  background: #ffffff;
  border-radius: 28px;
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.detail-stage iframe {
  animation: detail-media-in 420ms cubic-bezier(0.2, 0, 0, 1) both;
  aspect-ratio: 16 / 9;
  border: 0;
  display: block;
  min-height: 520px;
  width: 100%;
}

.detail-cover-link {
  animation: detail-media-in 420ms cubic-bezier(0.2, 0, 0, 1) both;
  display: block;
}

.generated-cover {
  aspect-ratio: 16 / 11;
}

.generated-cover span,
.generated-cover strong {
  display: none;
}

.detail-note {
  margin: 18px 0 0;
}

.detail-links {
  border: 0;
  margin-top: 22px;
  padding: 0;
}

/* Operating-model sub copy reads tighter than the default --read-narrow,
   so cap it at 460px. Color/weight/centering inherited from .title-group--center. */
.operating-model-section .profile-copy > p:not(.eyebrow) {
  max-width: 460px;
}

.social-links {
  margin-top: 26px;
}

.profile-social-links {
  border-top: 1px solid rgba(25, 25, 25, 0.08);
  margin-top: 32px;
  padding-top: 24px;
}

.profile-stats {
  display: grid;
  gap: 14px;
}

.profile-stats div,
.timeline article {
  background: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 26px;
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.7),
    0 16px 36px rgba(0, 0, 0, 0.04);
  padding: 24px;
}

.profile-stats strong {
  color: var(--ink);
  display: block;
  font-family: var(--font-display);
  font-size: 54px;
  font-weight: var(--fw-semi);
  letter-spacing: var(--track-tight);
  line-height: 0.94;
}

.profile-stats span {
  color: var(--muted);
  display: block;
  font-size: var(--t-small);
  font-weight: var(--fw-medium);
  letter-spacing: var(--track-display);
  line-height: 1.3;
  margin-top: 10px;
}

.timeline {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.timeline span {
  color: var(--soft);
  display: block;
  font-size: var(--t-label);
  font-weight: var(--fw-medium);
  letter-spacing: var(--track-eyebrow);
  margin-bottom: 18px;
}

.timeline p {
  color: var(--muted);
  font-size: var(--t-body);
  letter-spacing: var(--track-display);
  line-height: 1.45;
  margin-bottom: 0;
}

.contact-section {
  align-items: center;
  background: #ffffff;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-soft);
  display: flex;
  gap: 32px;
  justify-content: space-between;
  margin: 0 auto 120px;
  max-width: var(--max);
  padding: 64px;
}

.contact-section > div:first-child {
  max-width: var(--read-default);
}

.contact-section h2 {
  font-size: 56px;
}

/* Off the clock — full-bleed cinematic quote panel (Krea ocean-quote
   pattern). Background prefers a real ocean/seawater video; while the
   asset is absent, the gradient + animated tint approximates the same
   atmospheric water feel. Overlay layers carry text legibility. */
.personal-section {
  background: #0a1626;
  height: 100vh;
  /* Full-bleed: break out of any inherited container width and stretch
     edge-to-edge regardless of parent padding. */
  left: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  margin-top: clamp(96px, 12vw, 160px);
  min-height: 600px;
  overflow: hidden;
  padding: 0;
  position: relative;
  right: 50%;
  width: 100vw;
}

/* Background still image — visible by default (poster frame). */
.personal-bg-image {
  display: block;
  height: 100%;
  inset: 0;
  object-fit: cover;
  object-position: center 35%;
  position: absolute;
  transition: opacity 420ms cubic-bezier(0.22, 1, 0.36, 1);
  width: 100%;
  z-index: 0;
}

/* Background video — sits above the image, hidden until play is hit. */
.personal-bg-video-wrap {
  inset: 0;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  transition: opacity 420ms cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 1;
}

.personal-bg-video {
  display: block;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  width: 100%;
}

/* When playing, fade the video in and image out. */
.personal-section.is-playing .personal-bg-video-wrap {
  opacity: 1;
}
.personal-section.is-playing .personal-bg-image {
  opacity: 0;
}

/* Legibility overlay — soft bottom-left vignette + subtle top fade. */
.personal-overlay {
  background:
    radial-gradient(ellipse at 20% 70%, rgba(8, 22, 44, 0.55), transparent 55%),
    linear-gradient(180deg, rgba(8, 18, 32, 0.18) 0%, rgba(8, 18, 32, 0.34) 100%);
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 2;
}

/* Content stage — holds quote, attribution, and controls. */
.personal-stage {
  inset: 0;
  position: absolute;
  z-index: 3;
}

/* Subtle dark-blue overlay — only a hint of color over the video,
   carries text legibility without dirtying the ocean. */
.personal-panel::before {
  background:
    radial-gradient(ellipse at 50% 100%, rgba(8, 22, 44, 0.45), transparent 65%),
    linear-gradient(180deg, rgba(10, 22, 38, 0.18) 0%, rgba(8, 18, 32, 0.32) 100%);
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}

/* Soft vignette + very faint film grain — keeps the ocean clean. */
.personal-panel::after {
  background:
    radial-gradient(ellipse at center, transparent 50%, rgba(0, 0, 0, 0.35) 100%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.04 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-blend-mode: normal, overlay;
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 2;
}

/* When the video loads, it covers the gradient — fade the gradient out
   gracefully so we don't double the atmosphere. */
.personal-video:where(:not([poster=""])) ~ .personal-panel::before {
  /* no-op for now; gradient kept as base layer below video */
}

@media (prefers-reduced-motion: reduce) {
  .personal-panel::before {
    animation: none;
  }
}

/* Breathing-statement quote — two lines, dead-centered over the video. */
.personal-content {
  align-items: center;
  display: flex;
  flex-direction: column;
  inset: 0;
  justify-content: center;
  margin: 0;
  /* Extra bottom padding biases the flex-centered text upward — large display
     type at geometric center reads as sinking, so lift the optical center. */
  padding: 0 clamp(24px, 4vw, 64px) clamp(56px, 8vh, 120px);
  position: absolute;
  text-align: center;
  z-index: 3;
}

.personal-content .breathing-line {
  max-width: 1400px;
  text-wrap: balance;
}

/* Bottom-left "Off the clock" — quiet liquid-glass icon + label */
.personal-action {
  align-items: center;
  bottom: clamp(32px, 4.4vw, 64px);
  color: rgba(255, 255, 255, 0.82);
  display: inline-flex;
  font-family: var(--font-display);
  font-size: var(--t-small);
  font-weight: var(--fw-semi);
  gap: 12px;
  left: clamp(28px, 6vw, 88px);
  letter-spacing: 0;
  position: absolute;
  z-index: 3;
}

.personal-action-icon {
  align-items: center;
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  backdrop-filter: blur(14px) saturate(120%);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.86);
  display: inline-flex;
  height: 36px;
  justify-content: center;
  width: 36px;
}

.personal-action-icon svg {
  display: block;
  height: 13px;
  width: 13px;
}

/* Play / pause toggle — dark-glass round button, aligned with header-on-dark CTA system.
   Note: ::before and ::after are reserved for the pause-icon bars (two CSS rects),
   so border shimmer is approximated via inset box-shadow rings instead. */
.personal-play {
  align-items: center;
  background: rgba(0, 0, 0, 0.32);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  color: #ffffff;
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  height: 44px;
  justify-content: center;
  padding: 0;
  transition:
    background 220ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
  width: 44px;
}

.personal-play:hover {
  background: rgba(0, 0, 0, 0.50);
  transform: scale(1.04);
}

.personal-play svg {
  display: block;
  height: 14px;
  margin-left: 2px; /* optical center for the triangle */
  width: 14px;
}

/* Pause icon glyph — drawn via two CSS bars so we avoid a second SVG. */
.personal-section.is-playing .personal-play svg {
  display: none;
}
.personal-section.is-playing .personal-play::before,
.personal-section.is-playing .personal-play::after {
  background: currentColor;
  border-radius: 1px;
  content: "";
  display: block;
  height: 14px;
  width: 3px;
}
.personal-section.is-playing .personal-play::before {
  margin-right: 4px;
}

/* Pagination dots — hidden */
.personal-dots {
  display: none;
}

.personal-dot {
  background: rgba(255, 255, 255, 0.28);
  border-radius: 50%;
  display: block;
  height: 5px;
  transition: background 220ms cubic-bezier(0.22, 1, 0.36, 1);
  width: 5px;
}

.personal-dot.active {
  background: rgba(255, 255, 255, 0.78);
}

/* Bottom-right arrow controls — restrained 56px */
.personal-controls {
  align-items: center;
  bottom: clamp(28px, 4vw, 56px);
  display: flex;
  gap: 10px;
  position: absolute;
  right: clamp(28px, 6vw, 88px);
  z-index: 3;
}

.personal-control {
  align-items: center;
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  backdrop-filter: blur(14px) saturate(120%);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.82);
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  height: 56px;
  justify-content: center;
  padding: 0;
  transition: background 220ms cubic-bezier(0.22, 1, 0.36, 1);
  width: 56px;
}

.personal-control:hover {
  background: rgba(255, 255, 255, 0.16);
  color: #ffffff;
}

.personal-control svg {
  display: block;
  height: 16px;
  width: 16px;
}

@media (max-width: 720px) {
  .personal-section {
    height: auto;
    min-height: 86vh;
  }
  .personal-dots {
    display: none; /* arrows + action sit side-by-side, dots redundant */
  }
}

.site-footer {
  align-items: center;
  background: transparent;
  color: #737373;
  display: flex;
  font-size: var(--t-label);
  justify-content: space-between;
  isolation: isolate;
  margin-bottom: -1px;
  min-height: 96px;
  padding: 24px clamp(22px, 4vw, 32px);
  position: relative;
  z-index: 3;
}

.site-footer::before,
.site-footer::after {
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
}

.site-footer::before {
  background: #111111;
  z-index: -2;
}

.site-footer::after {
  background: var(--bg);
  border-top: 1px solid #dddddd;
  border-bottom-left-radius: 46px;
  border-bottom-right-radius: 46px;
  box-shadow: 0 36px 70px rgba(0, 0, 0, 0.34);
  z-index: -1;
}

/* Selected Work — Krea-inspired cinematic composition.
   Vertical flow: editorial header → dominant visual → minimal caption →
   restrained pagination. The visual is the hero; everything else stays
   restrained so the cinematic frame can carry the storytelling. */
.dark-reveal {
  background:
    radial-gradient(circle at 18% 22%, rgba(255, 255, 255, 0.04), transparent 36%),
    radial-gradient(circle at 84% 8%, rgba(120, 160, 220, 0.05), transparent 32%),
    #070707;
  align-items: stretch;
  display: flex;
  overflow: hidden;
  padding: clamp(96px, 12vh, 160px) 0 clamp(56px, 7vh, 96px);
  position: relative;
}

/* Light variant of the project carousel — used at the top of work.html
   as the "Featured" hero. Inherits all the carousel internals (image,
   caption overlay, arrows, progress) untouched since those sit on top
   of the project image. Only the section background and header text
   colours flip to dark-on-light. Top padding is bumped to clear the
   fixed site-header (matches work-page-section's hero clearance). */
.project-carousel-section--light {
  align-items: stretch;
  background: var(--bg);
  display: flex;
  margin: 0 auto;
  max-width: var(--max);
  overflow: hidden;
  padding: 0 clamp(24px, 3vw, 32px) clamp(56px, 7vh, 96px);
  position: relative;
  width: 100%;
}

.project-carousel-section--light .project-carousel-header-lead .eyebrow {
  color: rgba(25, 25, 25, 0.62);
}

.project-carousel-section--light .project-carousel-header-lead h2 {
  color: var(--ink);
}

.project-carousel-section--light .project-carousel-header-aside p {
  color: rgba(25, 25, 25, 0.52);
}

/* Progress bar + carousel arrows on the light section — flip the
   white-on-dark defaults to dark-on-light so the controls remain
   legible regardless of the slide's background colour. */
.project-carousel-section--light .project-carousel-progress {
  background: rgba(0, 0, 0, 0.08);
}

.project-carousel-section--light .project-carousel-progress-fill {
  background: rgba(0, 0, 0, 0.75);
}

.project-carousel-section--light .carousel-arrow {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: rgba(0, 0, 0, 0.32);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: none;
  color: #ffffff;
}

.project-carousel-section--light .carousel-arrow::before,
.project-carousel-section--light .carousel-arrow::after {
  display: none;
}

.project-carousel-section--light .carousel-arrow:hover {
  background: rgba(0, 0, 0, 0.50);
  box-shadow: none;
  color: #ffffff;
  transform: scale(1.04);
}

.project-carousel-section--light .carousel-arrow-icon {
  height: 20px;
  width: 20px;
}

.project-carousel-shell {
  display: flex;
  flex-direction: column;
  /* Match the .onb-section-header bottom-rhythm — same gap as the
     homepage onboarding-systems block uses between its title group
     and the media card below. */
  gap: clamp(40px, 5vw, 60px);
  margin: 0 auto;
  max-width: var(--max);
  padding: 0;
  width: 100%;
}

/* Typography mirrors .onb-section-header on the homepage so the work
   page's Featured strip reads as the same section-header component. */

.project-carousel-header-lead .eyebrow {
  color: rgba(255, 255, 255, 0.6);
}

.project-carousel-header-lead h2 {
  color: #ffffff;
  font-family: var(--font-display);
  font-size: var(--h2-feature);
  font-weight: var(--fw-semi);
  letter-spacing: 0;
  margin: 12px 0 0;
}

.project-carousel-header-aside {
  align-self: end;
  padding-bottom: 8px;
}

.project-carousel-header-aside p {
  color: rgba(255, 255, 255, 0.52);
  font-size: var(--t-caption);
  font-weight: var(--fw-regular);
  letter-spacing: 0;
  line-height: 1.55;
  margin: 0;
  max-width: 280px;
  text-wrap: balance;
}

@media (max-width: 760px) {
  .project-carousel-header-aside {
    padding-bottom: 0;
  }
  .project-carousel-header-aside p {
    max-width: 360px;
  }
}

/* Stage — Krea-style cinematic media viewer.
   Single rounded container at 16:7 aspect, with title/progress/arrows
   all overlaid absolutely. Image fills via object-fit cover, bottom-up
   gradient overlay carries the title legibility. */
.project-carousel-main {
  aspect-ratio: 21 / 9;
  border-radius: clamp(28px, 2.6vw, 36px);
  overflow: hidden;
  position: relative;
  transition: border-radius 0.4s ease-out;
  width: 100%;
}

.project-carousel-main:hover {
  border-radius: clamp(36px, 3.4vw, 48px);
}

.project-carousel-visual {
  border-radius: inherit;
  color: #ffffff;
  display: block;
  inset: 0;
  overflow: hidden;
  position: absolute;
  text-decoration: none;
  transition:
    opacity 180ms cubic-bezier(0.2, 0, 0, 1),
    transform 180ms cubic-bezier(0.2, 0, 0, 1),
    border-radius 0.4s ease-out;
  z-index: 1;
}

/* Overlay title was removed from the cover, so the legibility scrim
   is no longer needed — the cover image stays clean edge-to-edge. */

@media (max-width: 760px) {
  .project-carousel-main {
    aspect-ratio: 4 / 5;
  }
}

.project-carousel-section.is-visible .project-carousel-visual {
  animation: carousel-enter 520ms cubic-bezier(0.2, 0, 0, 1) forwards;
}

.project-carousel-visual.is-switching {
  animation: none !important;
  opacity: 0;
  transform: scale(0.985);
}

.project-carousel-visual.is-entering {
  animation: carousel-image-in 420ms cubic-bezier(0.2, 0, 0, 1) forwards !important;
}

/* Two stacked image slots inside .project-carousel-visual. Only the
   .is-active slot is at opacity 1 / scale 1; the other sits at
   opacity 0 / scale 1.04 ready for entry. Swapping the class fades
   them past each other (linear opacity matches Krea's dissolve spec)
   while the incoming Ken Burns eases scale 1.04 → 1. */
.project-carousel-image {
  background: rgba(255, 255, 255, 0.03);
  border-radius: inherit;
  height: 100%;
  inset: 0;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  transform: scale(1.04);
  transition:
    border-radius 0.4s ease-out,
    opacity 700ms linear,
    transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
  width: 100%;
}

.project-carousel-image.is-active {
  opacity: 1;
  transform: scale(1);
}

.project-carousel-image img {
  display: block;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  width: 100%;
}

/* Caption overlay — bottom-left, white text over gradient. Pointer-events
   pass through so the underlying visual <a> remains the click target;
   the inline CTA captures clicks on itself. */
.project-carousel-caption {
  bottom: 0;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  gap: 10px;
  left: 0;
  max-width: 70%;
  opacity: 0;
  padding: clamp(28px, 4vw, 56px);
  pointer-events: none;
  position: absolute;
  transition:
    opacity 320ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
  transform: translateY(8px);
  z-index: 3;
}

.project-carousel-section.is-visible .project-carousel-caption,
.project-carousel-caption.is-entering {
  opacity: 1;
  transform: translateY(0);
}

.project-carousel-caption.is-switching {
  opacity: 0;
  transform: translateY(-4px);
  transition-duration: 220ms;
}

.project-carousel-caption-text {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.project-carousel-caption .eyebrow {
  color: rgba(255, 255, 255, 0.7);
  font-size: var(--t-label);
  font-weight: var(--fw-medium);
  letter-spacing: var(--track-label);
  margin: 0;
}

.project-carousel-caption h3 {
  color: #ffffff;
  font-family: var(--font-display);
  font-size: clamp(22px, 2.6vw, 34px);
  font-weight: var(--fw-semi);
  letter-spacing: 0;
  line-height: 1.1;
  margin: 0;
  max-width: 18ch;
  text-wrap: balance;
}

.project-carousel-cta {
  align-items: center;
  color: rgba(255, 255, 255, 0.78);
  display: inline-flex;
  flex-shrink: 0;
  font-size: var(--t-label);
  font-weight: var(--fw-medium);
  gap: 8px;
  letter-spacing: 0;
  margin-top: 6px;
  pointer-events: auto;
  text-decoration: none;
  transition: color 220ms cubic-bezier(0.2, 0, 0, 1);
  width: fit-content;
}

.project-carousel-cta:hover {
  color: #ffffff;
}

.project-carousel-cta span {
  display: inline-block;
  opacity: 0.8;
  transition:
    opacity 220ms cubic-bezier(0.2, 0, 0, 1),
    transform 220ms cubic-bezier(0.2, 0, 0, 1);
}

.project-carousel-cta:hover span {
  opacity: 1;
  transform: translateX(4px);
}

/* Vertical progress indicator — left edge, fills top to bottom over the
   autoplay window. Resets on slide change via JS class toggle. */
.project-carousel-progress {
  background: rgba(255, 255, 255, 0.32);
  border-radius: 999px;
  height: 110px;
  left: clamp(20px, 2.4vw, 42px);
  overflow: hidden;
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  z-index: 3;
}

.project-carousel-progress-fill {
  background: rgba(255, 255, 255, 0.95);
  border-radius: inherit;
  display: block;
  height: 100%;
  transform-origin: bottom center;
  transform: scaleY(0);
  width: 100%;
}

.project-carousel-progress-fill.is-running {
  animation: carousel-progress var(--carousel-progress-duration, 7000ms) linear forwards;
}

@keyframes carousel-progress {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}

/* Arrows — restrained liquid-glass navigation hardware. Frosted lens,
   subtle translucency, calm material depth. No bloom, no glow, no scale
   bounce. Sits at the cinematic information horizon (bottom-right). */
.project-carousel-nav-arrows {
  align-items: center;
  bottom: clamp(28px, 3.4vw, 48px);
  display: flex;
  gap: 10px;
  position: absolute;
  right: clamp(28px, 3.4vw, 48px);
  z-index: 3;
}

.carousel-arrow {
  --glass-angle-1: -75deg;
  --glass-border-width: clamp(1px, 0.0625em, 4px);
  --glass-shadow:
    inset 0 0.125em 0.125em rgba(0, 0, 0, 0.05),
    inset 0 -0.125em 0.125em rgba(255, 255, 255, 0.5),
    0 0.25em 0.125em -0.125em rgba(0, 0, 0, 0.2),
    0 0 0.1em 0.25em inset rgba(255, 255, 255, 0.2);
  --glass-shadow-hover:
    inset 0 0.125em 0.125em rgba(0, 0, 0, 0.05),
    inset 0 -0.125em 0.125em rgba(255, 255, 255, 0.5),
    0 0.15em 0.05em -0.1em rgba(0, 0, 0, 0.25),
    0 0 0.05em 0.1em inset rgba(255, 255, 255, 0.5);
  align-items: center;
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  backdrop-filter: blur(20px) saturate(150%);
  background: linear-gradient(-75deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.05));
  border: 0;
  border-radius: 999px;
  box-shadow: var(--glass-shadow);
  color: rgba(0, 0, 0, 0.85);
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  height: 46px;
  isolation: isolate;
  justify-content: center;
  overflow: visible;
  padding: 0;
  position: relative;
  transition:
    transform 240ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 400ms cubic-bezier(0.25, 1, 0.5, 1),
    -webkit-backdrop-filter 400ms cubic-bezier(0.25, 1, 0.5, 1),
    backdrop-filter 400ms cubic-bezier(0.25, 1, 0.5, 1);
  width: 46px;
}

/* Blurred drop-shadow layer below the button */
.carousel-arrow::before {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.1));
  border-radius: inherit;
  box-sizing: border-box;
  content: "";
  filter: blur(clamp(2px, 0.125em, 12px));
  height: calc(100% - 0.25em);
  left: 0.125em;
  opacity: 1;
  pointer-events: none;
  position: absolute;
  top: 0.5em;
  transition:
    filter 400ms cubic-bezier(0.25, 1, 0.5, 1),
    top 400ms cubic-bezier(0.25, 1, 0.5, 1);
  width: calc(100% - 0.25em);
  z-index: -1;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
}

/* Rotating border shimmer — same conic-gradient system as main glass buttons */
.carousel-arrow::after {
  background:
    conic-gradient(
      from var(--glass-angle-1) at 50% 50%,
      rgba(0, 0, 0, 0.5),
      transparent 5% 40%,
      rgba(0, 0, 0, 0.5) 50%,
      transparent 60% 95%,
      rgba(0, 0, 0, 0.5)
    ),
    linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5));
  border-radius: inherit;
  box-shadow: inset 0 0 0 calc(var(--glass-border-width) / 2) rgba(255, 255, 255, 0.5);
  box-sizing: border-box;
  content: "";
  inset: calc(var(--glass-border-width) / -2);
  padding: var(--glass-border-width);
  pointer-events: none;
  position: absolute;
  transition: --glass-angle-1 500ms;
  z-index: 2;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
}

.carousel-arrow:hover {
  --glass-angle-1: -125deg;
  -webkit-backdrop-filter: blur(0.01em);
  backdrop-filter: blur(0.01em);
  box-shadow: var(--glass-shadow-hover);
  color: var(--ink);
  transform: translateY(-1px);
}

.carousel-arrow:hover::before {
  filter: blur(clamp(2px, 0.0625em, 6px));
  top: 0.125em;
}

.carousel-arrow:focus-visible {
  outline: 2px solid rgba(25, 25, 25, 0.32);
  outline-offset: 2px;
}

.carousel-arrow-icon {
  display: block;
  height: 18px;
  position: relative;
  width: 18px;
  z-index: 3;
}

@media (max-width: 540px) {
  .project-carousel-caption {
    max-width: 100%;
    padding: clamp(20px, 5vw, 28px);
  }
  .project-carousel-progress {
    height: 6px;
    left: clamp(20px, 5vw, 28px);
    top: auto;
    bottom: 100px;
    transform: none;
    width: 64px;
  }
  .project-carousel-progress-fill {
    transform: scaleX(0);
    transform-origin: left center;
  }
  .project-carousel-progress-fill.is-running {
    animation-name: carousel-progress-h;
  }
  @keyframes carousel-progress-h {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
  }
  .carousel-arrow {
    height: 42px;
    width: 42px;
  }
  .carousel-arrow-icon {
    height: 16px;
    width: 16px;
  }
}

.shelf-generated-cover {
  aspect-ratio: auto;
  height: 100%;
  min-height: 0;
  width: 100%;
}

.shelf-generated-cover span,
.shelf-generated-cover strong {
  display: none;
}

.page-transitioning {
  opacity: 0;
  transition: opacity 160ms cubic-bezier(0.2, 0, 0, 1);
}

/* Editorial typography reveal — opacity + blur + translateY.
   Triggered by IntersectionObserver in script.js when the element scrolls
   into view. Add data-reveal-step to stagger siblings inside a group. */
.reveal {
  --reveal-step: 0;
  filter: blur(12px);
  opacity: 0;
  transform: translateY(24px);
  transition:
    filter 1200ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 1200ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 1200ms cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(140ms * var(--reveal-step));
  will-change: opacity, filter, transform;
}

.reveal.is-revealed {
  filter: blur(0);
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal.is-revealed {
    filter: none;
    opacity: 1;
    transform: none;
    transition: none;
  }
}

@media (max-width: 980px) {
  h1 {
    font-size: 78px;
  }

  h2,
  .contact-section h2 {
    font-size: 52px;
  }

  .hero-copy {
    font-size: 58px;
    line-height: 64px;
  }

  .showcase-card strong {
    font-size: 58px;
  }

    .philosophy-grid,
  .profile-flow,
  .partner-grid,
  .timeline {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }


  .directory-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .profile-section {
    grid-template-columns: 1fr;
  }

}

@media (max-width: 760px) {
  .site-header {
    padding: 18px 18px;
  }

  .nav-links {
    display: none;
  }

  .header-cta {
    min-height: 40px;
    min-width: 126px;
    padding: 0 18px;
  }

  .hero {
    border-bottom-left-radius: 18px;
    border-bottom-right-radius: 18px;
    padding: 132px 16px 82px;
  }

  h1 {
    font-size: 78px;
  }

  .hero-copy {
    font-size: 36px;
    line-height: 38px;
    margin-bottom: 30px;
  }

  .hero-subtitle {
    font-size: 18px;
    margin-bottom: 26px;
  }

  .button {
    min-height: 56px;
    min-width: 150px;
  }

  .hero-showcase {
    height: 470px;
    margin-top: 54px;
  }

  .showcase-card {
    min-height: 360px;
    width: 268px;
  }

  .showcase-card[data-position="left"] {
    transform: translate(-85%, -48%) rotate(-9deg);
  }

  .showcase-card[data-position="right"] {
    transform: translate(-15%, -48%) rotate(9deg);
  }

  .section {
    padding: 88px 18px;
  }

    .employer-logo-card {
    height: 92px;
    padding: 0.875rem 1rem;
    width: 208px;
  }

  .employer-logo-img {
    height: 28px;
    max-width: 148px;
  }

  .employer-logo-img-capcut {
    height: 24px;
  }

  .employer-logo-img-tencent {
    height: 22px;
  }

  .employer-logo-lockup {
    font-size: 26px;
    gap: 12px;
  }

  .work-section {
    padding-top: 88px;
  }

  .project-grid,
  .philosophy-grid,
  .profile-flow,
  .partner-grid,
  .timeline,
  .detail-hero,
  .directory-columns {
    grid-template-columns: 1fr;
  }

  .profile-section,
  .contact-section,
  .project-detail-shell {
    border-radius: 24px;
    margin-left: 18px;
    margin-right: 18px;
    padding: 32px 22px;
  }

  .philosophy-grid article,
  .profile-flow article,
  .partner-grid article {
    min-height: auto;
  }

  .contact-section {
    align-items: flex-start;
    flex-direction: column;
  }

  .portfolio-footer {
    margin-top: 56px;
    padding: 56px 22px 0;
  }

  .contact-actions,
  .hero-actions {
    width: 100%;
  }

  .contact-actions .button,
  .hero-actions .button {
    width: 100%;
  }

  .contact-actions .glass-button-root,
  .hero-actions .glass-button-root {
    flex: 1 1 150px;
  }

  .site-footer {
    align-items: flex-start;
    border-bottom-left-radius: 28px;
    border-bottom-right-radius: 28px;
    flex-direction: column;
    gap: 12px;
    min-height: 156px;
    padding-top: 86px;
  }

  .detail-stage iframe {
    min-height: 360px;
  }

  .dark-reveal {
    min-height: 100vh;
    padding: 78px 0 36px;
  }

  .project-carousel-shell {
    padding: 0 18px;
  }

  .project-carousel-header-lead h2 {
    font-size: 40px;
  }

  .project-carousel-caption h3 {
    font-size: 18px;
  }
}

@media (max-height: 820px) and (min-width: 761px) {
  .dark-reveal {
    padding-bottom: 48px;
    padding-top: 88px;
  }

  .project-carousel-main {
    aspect-ratio: 16 / 6.4;
  }
}

@media (max-width: 500px) {
  .showcase-card[data-position="left"],
  .showcase-card[data-position="right"] {
    opacity: 0.42;
  }

  .filters {
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 4px;
  }

  .filter-button {
    white-space: nowrap;
  }
}

@media (max-width: 520px) {
  h1 {
    font-size: 62px;
  }

  h2,
  .contact-section h2 {
    font-size: 40px;
  }

  .hero-copy {
    font-size: 36px;
    line-height: 38px;
    margin-bottom: 30px;
  }

    .employer-logo-card {
    height: 80px;
    padding: 0.75rem 0.875rem;
    width: 184px;
  }

  .employer-logo-img {
    height: 24px;
    max-width: 128px;
  }

  .employer-logo-img-capcut {
    height: 21px;
  }

  .employer-logo-img-tencent {
    height: 19px;
  }

  .employer-logo-lockup {
    font-size: 23px;
    gap: 10px;
  }

  .section-heading p:not(.eyebrow),
  .profile-copy p,
  .contact-section p {
    font-size: 18px;
  }

  .showcase-card strong {
    font-size: 48px;
  }

  .detail-hero p {
    font-size: 18px;
  }

  .generated-cover strong {
    display: none;
  }
}

@keyframes marquee-scroll {
  0% {
    transform: translate(0);
  }

  100% {
    transform: translateX(calc(-100% - var(--gap)));
  }
}

@keyframes hero-fade-in {
  0% {
    filter: blur(12px);
    opacity: 0;
    transform: translateY(24px);
  }

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

/* Showcase card entrance: rises from below with blur clearing */
@keyframes showcase-card-in {
  0% {
    opacity: 0;
    filter: blur(6px);
    transform-origin: bottom center;
  }
  60% {
    filter: blur(0);
  }
  100% {
    opacity: 1;
    filter: blur(0);
  }
}

@keyframes hero-copy-deblur {
  0%   { filter: blur(6px); }
  100% { filter: blur(0); }
}

@keyframes hero-copy-rise {
  0% {
    opacity: 0;
    transform: translateY(24px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes detail-in {
  0% {
    opacity: 0;
    transform: translateY(18px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes detail-media-in {
  0% {
    opacity: 0;
    transform: translateY(18px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes carousel-enter {
  0% {
    opacity: 0;
    transform: translateY(16px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes carousel-text-in {
  0% {
    opacity: 0;
    transform: translateY(12px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes carousel-image-in {
  0% {
    opacity: 0;
    transform: scale(0.98);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

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

/* ===========================================================
   SYSTEMS PAGE
   Editorial archive of product systems, team systems, AI-native
   workflows, automation, narrative, and operating principles.
   Alternating white / soft-stone bands carry the editorial pacing.
   =========================================================== */

.systems-page {
  background: var(--bg);
}

.systems-main {
  margin: 0 auto;
  max-width: 1440px;
  padding: 0 clamp(24px, 3vw, 48px);
}

/* --- Hero --- */
.sys-hero {
  padding: clamp(160px, 18vw, 240px) 0 clamp(96px, 10vw, 140px);
}

.sys-hero-eyebrow {
  color: rgba(25, 25, 25, 0.5);
  font-family: var(--font-display);
  font-size: var(--t-label);
  font-weight: var(--fw-medium);
  letter-spacing: var(--track-eyebrow);
  margin: 0 0 28px;
}

.sys-hero-headline {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(44px, 5.4vw, 84px);
  font-weight: var(--fw-semi);
  letter-spacing: var(--track-tight);
  line-height: 0.96;
  margin: 0;
}

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

.sys-hero-line + .sys-hero-line {
  margin-top: 6px;
}

/* Hero morph — the dynamic phrase swaps in place while the trailing
   word "scale." stays persistent. Because the line is centered and
   the morph element is inline-block, animating only the morph's
   width re-centers the whole "teams, and [phrase] scale." group
   smoothly, with the persistent "scale." gliding right/left to keep
   the group balanced. */
.sys-hero-morph {
  display: inline-block;
  height: 1em;
  overflow: visible;
  position: relative;
  vertical-align: top;
  white-space: nowrap;
  width: var(--sys-morph-w, 12ch);
  transition: width 1600ms cubic-bezier(0.22, 1, 0.36, 1);
}

.sys-hero-morph-layer {
  filter: blur(12px);
  left: 0;
  opacity: 0;
  position: absolute;
  top: 0;
  transform: translateY(10px);
  transition:
    opacity 1600ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 1600ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 1600ms cubic-bezier(0.22, 1, 0.36, 1);
  white-space: nowrap;
}

.sys-hero-morph-layer.is-active {
  filter: blur(0);
  opacity: 1;
  transform: translateY(0);
}

.sys-hero-morph-layer.is-exiting {
  filter: blur(8px);
  opacity: 0;
  transform: translateY(-8px);
}

.sys-hero-body {
  color: var(--muted);
  font-family: var(--font-display);
  font-size: clamp(18px, 1.6vw, 22px);
  font-weight: var(--fw-regular);
  letter-spacing: 0;
  line-height: 1.45;
  margin: clamp(40px, 5vw, 64px) 0 0;
  max-width: var(--read-narrow);
}

/* --- Generic section frame --- */
.sys-section {
  padding: clamp(96px, 10vw, 140px) 0;
  position: relative;
}

.sys-band {
  background: var(--bg);
  border-radius: 0;
  left: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  padding-left: clamp(24px, 3vw, 48px);
  padding-right: clamp(24px, 3vw, 48px);
  position: relative;
  right: 50%;
  width: 100vw;
}

.sys-band > * {
  margin-left: auto;
  margin-right: auto;
  max-width: 1440px;
}

.sys-section-head {
  margin-bottom: clamp(56px, 6vw, 96px);
  max-width: var(--read-default);
}

.sys-eyebrow {
  color: rgba(25, 25, 25, 0.45);
  font-family: var(--font-display);
  font-size: var(--t-micro);
  font-weight: var(--fw-medium);
  letter-spacing: var(--track-eyebrow);
  margin: 0 0 20px;
}

.sys-section-title {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(36px, 4.5vw, 64px);
  font-weight: var(--fw-semi);
  letter-spacing: 0;
  line-height: 1.05;
  margin: 0;
}

.sys-section-lede {
  color: var(--muted);
  font-family: var(--font-display);
  font-size: clamp(18px, 1.6vw, 22px);
  font-weight: var(--fw-regular);
  letter-spacing: 0;
  line-height: 1.5;
  margin: 24px 0 0;
  max-width: 56ch;
}

.sys-section-link {
  font-family: var(--font-display);
  font-size: var(--t-caption);
  font-weight: var(--fw-medium);
  letter-spacing: 0;
  margin: 28px 0 0;
}

.sys-section-link a {
  color: rgba(25, 25, 25, 0.7);
  transition: color 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.sys-section-link a:hover {
  color: var(--ink);
}

/* --- 02 · Product systems — architectural typography-led list.
   Each ecosystem is a 4-column row: large index numeral, body meta,
   and a quiet textural panel on the right. No cinematic showcase
   imagery; the texture supports the meta, not the other way around. */
.sys-products-list {
  display: flex;
  flex-direction: column;
  gap: clamp(64px, 8vw, 112px);
  list-style: none;
  margin: 0;
  padding: 0;
}

.sys-product {
  align-items: start;
  display: grid;
  gap: clamp(32px, 4vw, 64px);
  grid-template-columns: 56px minmax(0, 1.4fr) minmax(0, 0.9fr);
}

.sys-product-index {
  color: rgba(25, 25, 25, 0.32);
  font-family: var(--font-display);
  font-size: var(--t-caption);
  font-weight: var(--fw-semi);
  letter-spacing: var(--track-label);
  padding-top: 6px;
}

.sys-product-meta {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 44ch;
}

.sys-product-eyebrow {
  color: rgba(25, 25, 25, 0.55);
  font-family: var(--font-display);
  font-size: var(--t-label);
  font-weight: var(--fw-medium);
  letter-spacing: var(--track-label);
  margin: 0;
}

.sys-product-title {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(32px, 3.6vw, 48px);
  font-weight: var(--fw-semi);
  letter-spacing: 0;
  line-height: 1.05;
  margin: 0;
}

.sys-product-line {
  color: var(--muted);
  font-family: var(--font-display);
  font-size: var(--t-body);
  font-weight: var(--fw-regular);
  letter-spacing: 0;
  line-height: 1.5;
  margin: 0;
}

.sys-product-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
}

.sys-product-tags li {
  color: rgba(25, 25, 25, 0.55);
  font-family: var(--font-display);
  font-size: var(--t-label);
  font-weight: var(--fw-medium);
  letter-spacing: 0;
}

.sys-product-tags li::before {
  background: rgba(25, 25, 25, 0.3);
  border-radius: 50%;
  content: "";
  display: inline-block;
  height: 4px;
  margin-right: 10px;
  vertical-align: middle;
  width: 4px;
}

/* Quiet textural panel — small atmospheric surface, not a hero
   image. Aspect-locked so all four products read at the same scale. */
.sys-product-textural {
  aspect-ratio: 1.2 / 1;
  background: linear-gradient(135deg, #f1efe9 0%, #e6e3dc 100%);
  border-radius: 16px;
  overflow: hidden;
  width: 100%;
}

.sys-product-textural img {
  display: block;
  filter: saturate(0.94);
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.sys-product-textural-inner {
  height: 100%;
  width: 100%;
}

.sys-textural-aftership {
  background:
    radial-gradient(ellipse at 30% 30%, rgba(120, 156, 255, 0.45) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 80%, rgba(255, 192, 200, 0.32) 0%, transparent 55%),
    linear-gradient(135deg, #1f2a44 0%, #2c3a5e 100%);
}

/* --- 03 · Team systems — editorial instruction tiles.
   Borderless, soft background contrast, larger numerals, lots of
   negative space. Reads as ideas, not feature cards. */
.sys-team-grid {
  display: grid;
  gap: clamp(8px, 1vw, 16px);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.sys-team-panel {
  background: transparent;
  border: 0;
  border-radius: 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-height: 260px;
  padding: clamp(32px, 3.4vw, 48px) clamp(28px, 3vw, 40px);
  transition: background 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.sys-team-panel:hover {
  background: rgba(25, 25, 25, 0.025);
}

.sys-team-numeral {
  color: rgba(25, 25, 25, 0.24);
  font-family: var(--font-display);
  font-size: clamp(44px, 4.4vw, 64px);
  font-weight: var(--fw-semi);
  letter-spacing: 0;
  line-height: 1;
}

.sys-team-title {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(22px, 2vw, 26px);
  font-weight: var(--fw-semi);
  letter-spacing: 0;
  line-height: 1.15;
  margin: 0;
}

.sys-team-line {
  color: var(--muted);
  font-family: var(--font-display);
  font-size: var(--t-small);
  font-weight: var(--fw-regular);
  letter-spacing: 0;
  line-height: 1.5;
  margin: 0;
  margin-top: auto;
}

/* --- 04 · AI-native workflows — vertical operating stack.
   No hairlines, no tags — just a numeric index, a title, and a
   single quiet line. Typography and spacing carry the systems
   feeling. */
.sys-layer-stack {
  display: flex;
  flex-direction: column;
  list-style: none;
  margin: 0;
  padding: 0;
}

.sys-layer {
  align-items: baseline;
  display: grid;
  gap: clamp(20px, 3vw, 40px);
  grid-template-columns: 64px minmax(0, 1fr);
  padding: clamp(28px, 3vw, 40px) 0;
}

.sys-layer + .sys-layer {
  border-top: 1px solid rgba(25, 25, 25, 0.06);
}

.sys-layer-index {
  color: rgba(25, 25, 25, 0.4);
  font-family: var(--font-display);
  font-size: var(--t-label);
  font-weight: var(--fw-semi);
  letter-spacing: var(--track-label);
}

.sys-layer-title {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(24px, 2.6vw, 36px);
  font-weight: var(--fw-semi);
  letter-spacing: 0;
  line-height: 1.05;
  margin: 0 0 10px;
}

.sys-layer-line {
  color: var(--muted);
  font-family: var(--font-display);
  font-size: clamp(15px, 1.3vw, 18px);
  font-weight: var(--fw-regular);
  letter-spacing: 0;
  line-height: 1.45;
  margin: 0;
  max-width: 52ch;
}

/* --- 05 · Automation layers — quiet infrastructure list.
   No boxes, no nodes — a vertical roll-call with a left rail of
   small node-tag labels and a quiet single-line description. */
.sys-quiet-list {
  display: flex;
  flex-direction: column;
  list-style: none;
  margin: 0;
  padding: 0;
}

.sys-quiet-row {
  align-items: baseline;
  display: grid;
  gap: clamp(20px, 3vw, 40px);
  grid-template-columns: 64px minmax(0, 1fr) minmax(0, 1.4fr);
  padding: clamp(24px, 2.6vw, 36px) 0;
}

.sys-quiet-row + .sys-quiet-row {
  border-top: 1px solid rgba(25, 25, 25, 0.06);
}

.sys-quiet-tag {
  color: rgba(25, 25, 25, 0.34);
  font-family: var(--font-display);
  font-size: var(--t-micro);
  font-weight: var(--fw-medium);
  letter-spacing: var(--track-label);
}

.sys-quiet-title {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(19px, 1.7vw, 22px);
  font-weight: var(--fw-semi);
  letter-spacing: var(--track-display);
  line-height: 1.2;
  margin: 0;
}

.sys-quiet-line {
  color: var(--muted);
  font-family: var(--font-display);
  font-size: var(--t-small);
  font-weight: var(--fw-regular);
  letter-spacing: 0;
  line-height: 1.45;
  margin: 0;
}

/* --- 06 · Narrative systems — staggered editorial chapters.
   Asymmetric grid: lead chapters span wider, narrow chapters
   carry quieter ideas. Typography dominates; containers are
   borderless. */
.sys-chapters {
  display: grid;
  gap: clamp(28px, 3.4vw, 48px) clamp(24px, 3vw, 40px);
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.sys-chapter {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 0;
}

.sys-chapter-lead {
  grid-column: span 4;
}

.sys-chapter-narrow {
  grid-column: span 2;
}

.sys-chapter-wide {
  grid-column: span 6;
}

.sys-chapter-eyebrow {
  color: rgba(25, 25, 25, 0.5);
  font-family: var(--font-display);
  font-size: var(--t-micro);
  font-weight: var(--fw-medium);
  letter-spacing: var(--track-eyebrow);
  margin: 0;
}

.sys-chapter-title {
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: var(--fw-semi);
  letter-spacing: 0;
  line-height: 1.05;
  margin: 0;
}

.sys-chapter-lead .sys-chapter-title {
  font-size: clamp(28px, 3vw, 40px);
}

.sys-chapter-narrow .sys-chapter-title {
  font-size: clamp(20px, 1.8vw, 24px);
}

.sys-chapter-wide .sys-chapter-title {
  font-size: clamp(36px, 4vw, 56px);
}

/* --- 07 · Operating principles — dark cinematic --- */
.sys-principles {
  background: #0a0a10;
  color: #ffffff;
  left: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  min-height: 78vh;
  overflow: hidden;
  padding: clamp(120px, 14vw, 200px) clamp(24px, 3vw, 48px);
  position: relative;
  right: 50%;
  width: 100vw;
}

.sys-principles-grain {
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.05 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  inset: 0;
  mix-blend-mode: overlay;
  opacity: 0.45;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}

.sys-principles::before {
  background:
    radial-gradient(ellipse at 22% 28%, rgba(60, 76, 140, 0.42) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 76%, rgba(180, 90, 130, 0.22) 0%, transparent 55%);
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}

.sys-principles-wordmark {
  color: rgba(255, 255, 255, 0.06);
  font-family: var(--font-display);
  font-size: clamp(180px, 28vw, 460px);
  font-weight: var(--fw-black);
  left: -2vw;
  letter-spacing: var(--track-sub);
  line-height: 0.82;
  position: absolute;
  pointer-events: none;
  right: -2vw;
  text-align: center;
  top: 50%;
  transform: translateY(-50%);
  user-select: none;
  white-space: nowrap;
  z-index: 1;
}

.sys-principles-inner {
  margin: 0 auto;
  max-width: 1440px;
  position: relative;
  z-index: 2;
}

.sys-principles-eyebrow {
  color: rgba(255, 255, 255, 0.55);
  font-family: var(--font-display);
  font-size: var(--t-micro);
  font-weight: var(--fw-medium);
  letter-spacing: var(--track-eyebrow);
  margin: 0 0 clamp(56px, 7vw, 96px);
}

.sys-principles-stage {
  min-height: clamp(160px, 22vw, 260px);
  position: relative;
}

.sys-principle {
  color: #ffffff;
  font-family: var(--font-display);
  font-size: clamp(36px, 5vw, 80px);
  font-weight: var(--fw-semi);
  inset: 0;
  letter-spacing: 0;
  line-height: 1;
  margin: 0;
  opacity: 0;
  position: absolute;
  transform: translateY(28px);
  transition:
    opacity 900ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
}

.sys-principle.is-active {
  opacity: 1;
  transform: translateY(0);
}

.sys-principles-dots {
  display: flex;
  gap: 8px;
  margin-top: clamp(56px, 7vw, 96px);
}

.sys-principle-dot {
  background: rgba(255, 255, 255, 0.16);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  height: 3px;
  padding: 0;
  transition:
    background 260ms cubic-bezier(0.22, 1, 0.36, 1),
    width 320ms cubic-bezier(0.22, 1, 0.36, 1);
  width: 18px;
}

.sys-principle-dot.is-active {
  background: rgba(255, 255, 255, 0.7);
  width: 28px;
}

/* --- 08 · Off the clock — embedded ocean quote, smaller and lower.
   The video/image dominates; the quote sits low in the frame, calmer
   and more environmental than a hero manifesto. */
.sys-off-clock {
  margin-top: 0;
}

.sys-off-clock-stage {
  display: block;
}

.sys-off-clock-content {
  bottom: clamp(132px, 16vw, 200px);
  left: clamp(28px, 6vw, 88px);
  max-width: var(--read-narrow);
  right: clamp(28px, 6vw, 88px);
  top: auto;
}

.sys-off-clock-mark {
  bottom: clamp(312px, 28vw, 420px);
  font-size: clamp(56px, 5.4vw, 80px);
  left: clamp(28px, 6vw, 88px);
  top: auto;
}

.sys-off-clock-quote {
  font-size: clamp(28px, 2.6vw, 46px) !important;
  font-weight: var(--fw-medium) !important;
  letter-spacing: var(--track-sub) !important;
  line-height: 1.18 !important;
  max-width: var(--read-narrow);
}

.sys-off-clock-attribution h3 {
  font-size: 17px !important;
}

.sys-off-clock-attribution p {
  font-size: 14px !important;
}

/* --- 09 · Footer override on systems page --- */
.sys-footer {
  background: #ffffff;
}

.sys-footer-grid {
  align-items: end;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(32px, 4vw, 64px);
  grid-template-columns: none;
  justify-content: space-between;
}

.sys-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.sys-footer-links a {
  color: rgba(25, 25, 25, 0.6);
  font-family: var(--font-display);
  font-size: var(--t-caption);
  font-weight: var(--fw-medium);
  letter-spacing: 0;
  transition: color 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.sys-footer-links a:hover {
  color: var(--ink);
}

.sys-footer-wordmark {
  margin-top: clamp(48px, 6vw, 96px);
}

/* --- Responsive --- */
@media (max-width: 960px) {
  .sys-product {
    gap: 24px;
    grid-template-columns: 48px minmax(0, 1fr);
  }
  .sys-product-textural {
    aspect-ratio: 16 / 10;
    grid-column: 1 / -1;
    margin-top: 8px;
  }
  .sys-team-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sys-quiet-row {
    grid-template-columns: 48px minmax(0, 1fr);
  }
  .sys-quiet-row .sys-quiet-line {
    grid-column: 2 / -1;
  }
  .sys-chapter-lead,
  .sys-chapter-narrow,
  .sys-chapter-wide {
    grid-column: span 6;
  }
}

@media (max-width: 600px) {
  .sys-team-grid {
    grid-template-columns: 1fr;
  }
  .sys-layer {
    grid-template-columns: 48px minmax(0, 1fr);
  }
  .sys-off-clock-content {
    bottom: clamp(112px, 18vw, 160px);
  }
  .sys-off-clock-mark {
    bottom: clamp(232px, 36vw, 320px);
  }
}


/* ===========================================================
   ESSAY PAGE — AI-native workflows
   Simple editorial article: text column 620px, media tiles span
   the wider 1180px content; alternating media-left / media-right
   rhythm between sections; quiet typography, no card chrome.
   =========================================================== */

.essay-page {
  background: #f7f7f5;
}

.essay-main {
  margin: 0 auto;
  max-width: 1180px;
  padding: 0 clamp(24px, 3vw, 40px);
}

.essay-article {
  display: flex;
  flex-direction: column;
}

/* --- Hero --- */
.essay-hero {
  align-items: end;
  display: grid;
  gap: clamp(40px, 5vw, 80px);
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  padding: clamp(160px, 18vw, 220px) 0 clamp(72px, 8vw, 112px);
}

.essay-hero-text {
  max-width: var(--read-narrow);
}

.essay-breadcrumb {
  color: rgba(25, 25, 25, 0.5);
  font-family: var(--font-display);
  font-size: var(--t-micro);
  font-weight: var(--fw-medium);
  letter-spacing: var(--track-eyebrow);
  margin: 0 0 32px;
}

.essay-breadcrumb a {
  color: inherit;
  transition: color 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.essay-breadcrumb a:hover {
  color: var(--ink);
}

.essay-hero-headline {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(56px, 7vw, 104px);
  font-weight: var(--fw-semi);
  letter-spacing: var(--track-tight);
  line-height: 0.94;
  margin: 0 0 28px;
}

.essay-hero-sub {
  color: rgba(25, 25, 25, 0.62);
  font-family: var(--font-display);
  font-size: clamp(18px, 1.5vw, 20px);
  font-weight: var(--fw-regular);
  letter-spacing: 0;
  line-height: 1.5;
  margin: 0 0 40px;
}

.essay-meta {
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0 0 28px;
  padding: 24px 0 0;
}

.essay-meta div {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.essay-meta dt {
  color: rgba(25, 25, 25, 0.5);
  font-family: var(--font-display);
  font-size: var(--t-tiny);
  font-weight: var(--fw-medium);
  letter-spacing: var(--track-eyebrow);
}

.essay-meta dd {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--t-caption);
  font-weight: var(--fw-medium);
  letter-spacing: 0;
  margin: 0;
}

.essay-tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.essay-tag-row li {
  background: rgba(0, 0, 0, 0.04);
  border-radius: 999px;
  color: rgba(25, 25, 25, 0.65);
  font-family: var(--font-display);
  font-size: var(--t-micro);
  font-weight: var(--fw-medium);
  letter-spacing: 0;
  padding: 6px 12px;
}

.essay-hero-figure {
  margin: 0;
}

/* --- Editorial tile — generic flat rounded screenshot-like panel.
   No window chrome, no decorative borders. Light surface, subtle
   inset hairline. Used for hero + every layer section. */
.essay-tile {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 14px;
  display: block;
  overflow: hidden;
  padding: 24px;
  position: relative;
}

.essay-tile-doc .essay-tile-row-title {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--t-body);
  font-weight: var(--fw-semi);
  letter-spacing: var(--track-display);
  margin-bottom: 8px;
}

.essay-tile-doc .essay-tile-row-meta {
  color: rgba(25, 25, 25, 0.45);
  font-family: var(--font-display);
  font-size: var(--t-tiny);
  font-weight: var(--fw-medium);
  letter-spacing: var(--track-label);
  margin-bottom: 18px;
}

.essay-tile-line {
  background: var(--bg, rgba(25, 25, 25, 0.08));
  border-radius: 3px;
  display: block;
  height: 5px;
  margin-top: 8px;
  width: var(--w, 80%);
}

.essay-tile-divider {
  background: rgba(0, 0, 0, 0.05);
  height: 1px;
  margin: 18px 0 4px;
  width: 100%;
}

/* L1 — cluster pills floating in a panel */
.essay-tile-cluster {
  height: 280px;
  position: relative;
}

.essay-pill {
  background: rgba(25, 25, 25, 0.06);
  border-radius: 999px;
  color: rgba(25, 25, 25, 0.62);
  font-family: var(--font-display);
  font-size: var(--t-micro);
  font-weight: var(--fw-medium);
  left: var(--x, 0);
  letter-spacing: 0;
  padding: 6px 12px;
  position: absolute;
  top: var(--y, 0);
  white-space: nowrap;
}

.essay-pill.is-warm {
  background: rgba(214, 41, 62, 0.08);
  color: rgba(170, 30, 50, 0.85);
}

/* L2 — code crop */
.essay-tile-code {
  background: #1c1b22;
  border-color: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.78);
  font-family: "ui-monospace", "SF Mono", monospace;
  font-size: var(--t-label);
  line-height: 1.6;
  padding: 0;
}

.essay-tile-code-bar {
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  gap: 6px;
  padding: 12px 16px;
}

.essay-tile-code-bar span {
  background: rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  display: inline-block;
  height: 8px;
  width: 8px;
}

.essay-tile-code-bar em {
  color: rgba(255, 255, 255, 0.45);
  font-family: var(--font-display);
  font-size: var(--t-tiny);
  font-style: normal;
  font-weight: var(--fw-medium);
  letter-spacing: var(--track-label);
  margin-left: 8px;
}

.essay-tile-code-row {
  padding: 4px 20px;
  white-space: pre;
}

.essay-tile-code-row:first-of-type {
  padding-top: 16px;
}

.essay-tile-code-row:last-of-type {
  padding-bottom: 20px;
}

.essay-tile-code-indent {
  padding-left: 20px;
}

.essay-token-keyword { color: #c594ff; }
.essay-token-fn { color: #82d4ff; }
.essay-token-tag { color: #ffb38a; }

/* L3 — preview surface */
.essay-tile-preview {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 240px;
}

.essay-tile-preview-bar {
  align-items: center;
  background: rgba(25, 25, 25, 0.04);
  border-radius: 8px;
  color: rgba(25, 25, 25, 0.6);
  display: flex;
  font-family: var(--font-display);
  font-size: var(--t-micro);
  font-weight: var(--fw-medium);
  gap: 8px;
  padding: 8px 12px;
}

.essay-status-dot {
  background: #5cd28d;
  border-radius: 50%;
  height: 8px;
  width: 8px;
}

.essay-tile-preview-frame {
  background:
    linear-gradient(180deg, rgba(25, 25, 25, 0.04), rgba(25, 25, 25, 0.02));
  border: 1px solid rgba(0, 0, 0, 0.04);
  border-radius: 10px;
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 8px;
  min-height: 140px;
  padding: 16px;
}

/* L4 — conversational thread */
.essay-tile-thread {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 240px;
}

.essay-thread-row {
  align-items: flex-start;
  display: flex;
  gap: 10px;
}

.essay-thread-reply {
  padding-left: 36px;
}

.essay-avatar {
  background: linear-gradient(135deg, #b8d4ff 0%, #6ea8ff 100%);
  border-radius: 50%;
  flex-shrink: 0;
  height: 24px;
  width: 24px;
}

.essay-avatar.is-alt {
  background: linear-gradient(135deg, #ffd8b8 0%, #ff9d6e 100%);
}

.essay-bubble {
  background: rgba(25, 25, 25, 0.04);
  border-radius: 12px;
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
}

.essay-bubble.is-alt {
  background: rgba(25, 25, 25, 0.84);
}

/* L5 — reusable system grid */
.essay-tile-system {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, 1fr);
  min-height: 280px;
  padding: 20px;
}

.essay-tile-system > span {
  background: rgba(25, 25, 25, 0.04);
  border: 1px solid rgba(25, 25, 25, 0.06);
  border-radius: 8px;
}

.essay-tile-system > span.is-filled {
  background: linear-gradient(135deg, #1c1b22 0%, #2c2b35 100%);
  border-color: transparent;
}

/* --- Intro --- */
.essay-intro {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin: 0;
  max-width: var(--read-narrow);
  padding: clamp(64px, 7vw, 96px) 0 clamp(96px, 11vw, 140px);
}

.essay-intro p {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: var(--fw-regular);
  letter-spacing: 0;
  line-height: 1.5;
  margin: 0;
}

.essay-intro p:last-child {
  color: rgba(25, 25, 25, 0.6);
}

/* --- Sections (L1–L5) — 50/50 text + media, alternating sides --- */
.essay-section {
  align-items: center;
  display: grid;
  gap: clamp(40px, 5vw, 72px);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  padding: clamp(72px, 8vw, 112px) 0;
}

.essay-section-media-left .essay-section-text {
  order: 2;
}

.essay-section-media-left .essay-section-figure {
  order: 1;
}

.essay-section-block {
  display: block;
  max-width: var(--read-narrow);
  padding: clamp(64px, 7vw, 96px) 0;
}

.essay-section-text {
  max-width: 480px;
}

.essay-section-mark {
  color: rgba(25, 25, 25, 0.5);
  font-family: var(--font-display);
  font-size: var(--t-micro);
  font-weight: var(--fw-medium);
  letter-spacing: var(--track-eyebrow);
  margin: 0 0 18px;
}

.essay-section-headline {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(28px, 3vw, 40px);
  font-weight: var(--fw-semi);
  letter-spacing: 0;
  line-height: 1.05;
  margin: 0 0 18px;
}

.essay-section-body {
  color: rgba(25, 25, 25, 0.62);
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: var(--fw-regular);
  letter-spacing: 0;
  line-height: 1.55;
  margin: 0;
}

.essay-section-figure {
  margin: 0;
}

/* --- Pull quote --- */
.essay-pull {
  padding: clamp(96px, 11vw, 140px) 0;
}

.essay-pull p {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(32px, 4vw, 56px);
  font-weight: var(--fw-semi);
  letter-spacing: 0;
  line-height: 1.08;
  margin: 0;
  max-width: var(--read-wide);
}

/* --- Principles list --- */
.essay-list {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.4vw, 32px);
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
}

.essay-list li {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(22px, 2vw, 28px);
  font-weight: var(--fw-semi);
  letter-spacing: var(--track-sub);
  line-height: 1.15;
}

/* --- Operating stack — quiet dl rows --- */
.essay-stack-dl {
  display: flex;
  flex-direction: column;
  margin: 24px 0 0;
}

.essay-stack-dl div {
  display: grid;
  gap: clamp(16px, 2vw, 32px);
  grid-template-columns: 180px minmax(0, 1fr);
  padding: 20px 0;
}

.essay-stack-dl div + div {
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.essay-stack-dl dt {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--t-caption);
  font-weight: var(--fw-semi);
  letter-spacing: 0;
}

.essay-stack-dl dd {
  color: rgba(25, 25, 25, 0.6);
  font-family: var(--font-display);
  font-size: var(--t-body);
  font-weight: var(--fw-regular);
  letter-spacing: 0;
  line-height: 1.5;
  margin: 0;
}

/* --- Ending --- */
.essay-end {
  padding: clamp(96px, 12vw, 160px) 0;
}

.essay-end p {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(28px, 3vw, 40px);
  font-weight: var(--fw-semi);
  letter-spacing: 0;
  line-height: 1.1;
  margin: 0;
  max-width: var(--read-narrow);
}

/* --- Essay footer override --- */
.essay-footer {
  background: transparent;
  margin-top: clamp(40px, 5vw, 80px);
}

/* --- Responsive --- */
@media (max-width: 880px) {
  .essay-hero,
  .essay-section,
  .essay-section-media-left {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .essay-section-media-left .essay-section-text,
  .essay-section-media-left .essay-section-figure {
    order: 0;
  }
  .essay-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .essay-stack-dl div {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}

/* ── Footer circular glass icon buttons ── */
.footer-icon-btn {
  font-size: var(--t-body);
  height: 44px;
  padding: 0;
  width: 44px;
}

.footer-icon-btn svg {
  display: block;
  flex-shrink: 0;
  height: 18px;
  width: 18px;
}

/* Tune the shadow cutoff for circular buttons — matches header-cta geometry */
.glass-button-root:has(.footer-icon-btn) {
  --glass-shadow-cutoff-fix: 1.8em;
  font-size: var(--t-body);
}

/* Kill container bottom padding when slim-footer is the last child */
.case-article:has(.slim-footer),
.methods-main:has(.slim-footer),
.work-page-main:has(.slim-footer),
.method-article:has(.slim-footer) {
  padding-bottom: 0;
}

/* ── Slim footer (Wabi-style): logo · nav + copyright · contact ──
   Full-viewport-width breakout so it spans edge-to-edge on every page,
   regardless of the container it lives in.                              */
.slim-footer {
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  box-sizing: border-box;
  left: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  padding: 10px clamp(24px, 4vw, 64px);
  position: relative;
  right: 50%;
  width: 100vw;
}

.slim-footer-inner {
  align-items: center;
  display: flex;
  gap: 20px;
  justify-content: space-between;
  margin: 0 auto;
  max-width: 1300px;
}

.slim-footer-brand {
  display: flex;
  flex-shrink: 0;
}

.slim-footer-brand img {
  display: block;
  height: 15px;
  opacity: 0.28;
  transition: opacity 220ms cubic-bezier(0.22, 1, 0.36, 1);
  width: auto;
}

.slim-footer-brand:hover img {
  opacity: 0.5;
}

.slim-footer-nav {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  justify-content: center;
}

.slim-footer-contact {
  align-items: center;
  display: flex;
  flex-shrink: 0;
  gap: 7px;
}

.slim-footer-icons {
  align-items: center;
  display: flex;
  flex-shrink: 0;
  gap: 8px;
}

.slim-footer-nav a,
.slim-footer-nav .slim-footer-copy,
.slim-footer-contact a {
  color: rgba(0, 0, 0, 0.36);
  font-family: var(--font-display);
  font-size: var(--t-micro);
  font-weight: var(--fw-medium);
  letter-spacing: 0;
  transition: color 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.slim-footer-nav a:hover,
.slim-footer-contact a:hover {
  color: rgba(0, 0, 0, 0.68);
}

.slim-footer-nav [aria-hidden="true"],
.slim-footer-contact [aria-hidden="true"] {
  color: rgba(0, 0, 0, 0.16);
  font-size: 10px;
  pointer-events: none;
  user-select: none;
}

@media (max-width: 560px) {
  .slim-footer-inner {
    flex-direction: column;
    gap: 10px;
    text-align: center;
  }
  .slim-footer-brand { display: none; }
  .slim-footer-nav,
  .slim-footer-contact { justify-content: center; }
}

/* --- Responsive --- */
@media (max-width: 700px) {
  .method-stack-dl div {
    gap: 6px;
    grid-template-columns: 1fr;
  }
  .methods-link {
    gap: 16px;
    margin: 0;
    padding: 20px 0;
  }
  .methods-item-thumb {
    aspect-ratio: 16 / 9;
    width: 86px;
  }
}

/* ========================================
   CAREER TIMELINE
   Replaces heavy chapter-panel system — editorial row list
   ======================================== */

/* ── AfterShip tabbed showcase ──────────────────────────────────────────── */

.aftership-showcase-section {
  background: var(--bg);
  padding: clamp(80px, 8vw, 120px) var(--gutter);
}

.aftership-showcase-shell {
  margin: 0 auto;
  max-width: var(--max-wide);
}

/* ── Block 1: framed header — spacing handled by inner .title-group--lead. ── */

/* Preview wrap: panel + tab bar stacked */
.aftership-preview-wrap {
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.07);
}

.aftership-preview {
  position: relative;
  width: 100%;
  /* Matches Krea's krea2 big-card aspect (963 / 480 ≈ 2 / 1). */
  aspect-ratio: 2 / 1;
  overflow: hidden;
}

.aftership-preview-item {
  inset: 0;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  /* Cross-fade lengthened from 360 → 480ms to feel closer to Krea's
     ~500ms dissolve. */
  transition: opacity 480ms cubic-bezier(0.22, 1, 0.36, 1);
}

.aftership-preview-item.is-active {
  opacity: 1;
  pointer-events: auto;
}

/* Ken Burns — each time a preview becomes active, its inner canvas
   eases from a subtle 1.04 zoom back to 1, mirroring Krea's
   scale(1.3 → 1) Ken Burns on slide entry. 1.04 instead of 1.3 because
   an iframe inside the wrapper is more sensitive to overscaling than
   a raster image. */
.aftership-preview-item.is-active .aftership-preview-inner {
  animation: aftab-ken-burns 800ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes aftab-ken-burns {
  from { transform: scale(1.04); }
  to   { transform: scale(1); }
}

/* ── Canvas background (all panels) ── */
.aftership-preview-inner {
  background-color: #ececec;
  background-image: url('assets/tts-api-bento-background-blurred.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 100%;
  overflow: hidden;
  position: relative;
  width: 100%;
}

/* AI operations workbench — dedicated background */
.aftership-preview-item[data-aftab="pod-ai"] .aftership-preview-inner {
  background-image: url('assets/copilot-inbox-bg.webp');
}

/* Creator commerce — dedicated background */
.aftership-preview-item[data-aftab="affiliates"] .aftership-preview-inner {
  background-image: url('assets/copilot-waitlist-modal-bg.webp');
}

/* ── Prototype embed panel ── */
/* 白框从顶部 padding 开始，固定 800px 高度延伸到面板下方，
   .aftership-preview (overflow:hidden) 负责截断底部 */
.aftership-preview-embed {
  overflow: visible !important;
}

/* Top-right circular link button — opens the corresponding live
   prototype in a new tab. Sits above the canvas + embed frame. */
.aftership-preview-link {
  align-items: center;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  color: #111;
  display: inline-flex;
  height: 40px;
  justify-content: center;
  position: absolute;
  right: 20px;
  top: 20px;
  opacity: 0.5;
  transition: opacity 200ms ease, transform 200ms ease, box-shadow 200ms ease;
  width: 40px;
  z-index: 3;
}

.aftership-preview-link:hover {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
  opacity: 1;
  transform: translateY(-1px);
}

.aftership-preview-link svg {
  height: 18px;
  width: 18px;
}

.aft-embed-frame {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-bottom: none;
  border-radius: 12px 12px 0 0;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.12);
  overflow: hidden;
  position: absolute;
  top: 80px;
  left: 8%;
  right: 8%;
  /* height is set dynamically by scaleFrames() in script.js */
}

.aft-embed-frame iframe {
  border: 0;
  display: block;
  width: 1280px;
  height: 900px;
  transform-origin: top left;
  /* transform scale set by scaleFrames() */
}

/* ── Floating mock cards ── */
.aft-card {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: 14px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.07), 0 0 0 0.5px rgba(0,0,0,0.04);
  font-family: var(--font-display);
  position: absolute;
}

/* Card header bar (like ElevenLabs toolbar at top) */
.aft-card-header {
  align-items: center;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  display: flex;
  gap: 8px;
  padding: 10px 14px;
}

.aft-card-dot {
  background: rgba(0,0,0,0.15);
  border-radius: 50%;
  height: 6px;
  width: 6px;
}

.aft-card-dot-green { background: #4ade80; }
.aft-card-dot-amber { background: #fb923c; }

.aft-card-label {
  color: rgba(0,0,0,0.45);
  font-size: var(--t-tiny);
  font-weight: var(--fw-medium);
  letter-spacing: var(--track-label);
  margin-left: auto;
}

.aft-card-title {
  color: #111;
  font-size: var(--t-micro);
  font-weight: var(--fw-semi);
}

.aft-card-body {
  padding: 12px 14px;
}

/* ── Pod AI cards ── */
.aft-decision-row {
  align-items: flex-start;
  border-bottom: 1px solid rgba(0,0,0,0.05);
  display: flex;
  gap: 10px;
  padding: 9px 0;
}

.aft-decision-row:last-child { border-bottom: 0; padding-bottom: 0; }
.aft-decision-row:first-child { padding-top: 0; }

.aft-decision-badge {
  border-radius: 5px;
  flex-shrink: 0;
  font-size: 9px;
  font-weight: var(--fw-semi);
  height: 18px;
  line-height: 18px;
  text-align: center;
  width: 18px;
}

.aft-badge-warn  { background: #fef3c7; color: #d97706; }
.aft-badge-up    { background: #dcfce7; color: #16a34a; }
.aft-badge-info  { background: #dbeafe; color: #2563eb; }

.aft-decision-text {
  color: rgba(0,0,0,0.7);
  font-size: var(--t-micro);
  line-height: 1.45;
}

.aft-decision-meta {
  color: rgba(0,0,0,0.35);
  font-size: 10px;
  margin-top: 2px;
}

/* ── Tracking cards ── */
.aft-step-row {
  align-items: center;
  border-bottom: 1px solid rgba(0,0,0,0.05);
  display: flex;
  gap: 10px;
  padding: 8px 0;
}

.aft-step-row:last-child { border-bottom: 0; padding-bottom: 0; }
.aft-step-row:first-child { padding-top: 0; }

.aft-step-circle {
  align-items: center;
  border: 1.5px solid rgba(0,0,0,0.15);
  border-radius: 50%;
  color: rgba(0,0,0,0.35);
  display: flex;
  flex-shrink: 0;
  font-size: 10px;
  font-weight: var(--fw-semi);
  height: 22px;
  justify-content: center;
  width: 22px;
}

.aft-step-circle.done  { background: #111; border-color: #111; color: #fff; }
.aft-step-circle.active { background: #111; border-color: #111; box-shadow: 0 0 0 3px rgba(0,0,0,0.12); color: #fff; }

.aft-step-name {
  color: rgba(0,0,0,0.5);
  font-size: var(--t-micro);
}

.aft-step-name.done, .aft-step-name.active { color: #111; font-weight: var(--fw-medium); }

.aft-step-tag {
  background: rgba(0,0,0,0.05);
  border-radius: 4px;
  color: rgba(0,0,0,0.4);
  font-size: 10px;
  margin-left: auto;
  padding: 2px 6px;
}

.aft-step-tag.active { background: #111; color: #fff; }

.aft-metric-grid {
  display: grid;
  gap: 1px;
  grid-template-columns: 1fr 1fr;
}

.aft-metric-cell {
  background: rgba(0,0,0,0.025);
  padding: 10px 12px;
}

.aft-metric-cell:first-child { border-radius: 8px 0 0 8px; }
.aft-metric-cell:last-child  { border-radius: 0 8px 8px 0; }

.aft-metric-val {
  color: #111;
  font-size: 20px;
  font-weight: var(--fw-semi);
  letter-spacing: var(--track-display);
}

.aft-metric-lbl {
  color: rgba(0,0,0,0.4);
  font-size: 10px;
  margin-top: 2px;
}

/* ── Affiliates cards ── */
.aft-creator-row {
  align-items: center;
  border-bottom: 1px solid rgba(0,0,0,0.05);
  display: flex;
  gap: 10px;
  padding: 8px 0;
}

.aft-creator-row:last-child { border-bottom: 0; padding-bottom: 0; }
.aft-creator-row:first-child { padding-top: 0; }

.aft-creator-avatar {
  background: rgba(0,0,0,0.08);
  border-radius: 50%;
  flex-shrink: 0;
  height: 28px;
  width: 28px;
}

.aft-creator-name {
  color: #111;
  font-size: var(--t-micro);
  font-weight: var(--fw-medium);
}

.aft-creator-meta {
  color: rgba(0,0,0,0.4);
  font-size: 10px;
  margin-top: 1px;
}

.aft-creator-score {
  background: #f0fdf4;
  border-radius: 6px;
  color: #16a34a;
  font-size: var(--t-tiny);
  font-weight: var(--fw-semi);
  margin-left: auto;
  padding: 3px 8px;
}

.aft-creator-score.mid { background: #fefce8; color: #ca8a04; }

.aft-outreach-pill {
  background: #111;
  border-radius: 8px;
  color: #fff;
  font-size: var(--t-tiny);
  font-weight: var(--fw-medium);
  padding: 8px 14px;
  text-align: center;
  width: 100%;
}

/* Feature columns = primary navigation */
.aftership-features {
  display: grid;
  gap: 0;
  grid-template-columns: repeat(2, 1fr);
  align-items: start;
  margin-top: 20px;
}

.aftership-feature {
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 28px 32px 28px 0;
  text-align: left;
  transition:
    opacity 280ms,
    transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
}
.aftership-feature:not(:first-child) { padding-left: 32px; }

/* Dim inactive */
.aftership-feature:not(.is-active) { opacity: 0.42; }
.aftership-feature:not(.is-active):hover {
  opacity: 0.7;
  transform: translateY(-2px);
}

/* Progress bar track — slimmed from 4 → 3 px so the bar reads as a
   delicate timing cue, not a heavy divider. */
.aftership-feature-indicator {
  background: rgba(0, 0, 0, 0.1);
  border-radius: 2px;
  height: 3px;
  margin-bottom: 20px;
  overflow: hidden;
  width: 100%;
}

/* Animated fill — driven by CSS animation set via JS. The base
   transition handles the smooth collapse back to scaleX(0) once the
   animation is removed on deactivation. */
.aftership-feature-progress {
  background: #111;
  border-radius: 2px;
  height: 100%;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 120ms ease-in;
  width: 100%;
}

@keyframes aftab-progress {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

.aftership-feature.is-active .aftership-feature-progress {
  animation: aftab-progress var(--aftab-duration, 5s) linear forwards;
}

.aftership-feature-title {
  color: #111;
  font-family: var(--font-display);
  font-size: var(--t-body);
  font-weight: var(--fw-semi);
  letter-spacing: 0;
  line-height: 1.25;
  margin: 0 0 8px;
}

.aftership-feature-desc {
  color: rgba(0, 0, 0, 0.55);
  font-family: var(--font-display);
  font-size: var(--t-caption);
  font-weight: var(--fw-book);
  line-height: 1.6;
  margin: 0;
}

/* ── Work badges ── */
.work-badges {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-left: 6px;
  vertical-align: middle;
}

.work-badge {
  border: 1px solid rgba(0, 0, 0, 0.75);
  border-radius: 5px;
  color: rgba(0, 0, 0, 0.8);
  display: inline-block;
  font-family: "Suisse Intl Mono", ui-monospace, monospace;
  font-size: 10px;
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-badge);
  line-height: 1;
  padding: 4px 5px;
  text-transform: uppercase;
  vertical-align: middle;
}

/* Responsive */
@media (max-width: 900px) {
  .aftership-preview {
    aspect-ratio: 4 / 3;
  }

  .aftership-features {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .aftership-feature {
    border-right: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    padding: 20px 0;
  }

  .aftership-feature:last-child { border-bottom: 0; }
  .aftership-feature:not(:first-child) { padding-left: 0; }

  .aftership-feature {
    border-right: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    padding: 20px 0;
  }

  .aftership-feature:last-child { border-bottom: 0; }
  .aftership-feature:not(:first-child) { padding-left: 0; }
}

/* ── end AfterShip tabbed showcase ────────────────────────────────────── */

/* ================================================================
   PILL TAB SWITCHER — shared component
   Used by: Effect House showcase, Onboarding project switcher,
            Onboarding sub-switcher.
   Size overrides live in each component's own section.
   ================================================================ */
.pill-switcher {
  align-items: center;
  background: transparent;
  border-radius: 9999px;
  box-shadow: rgba(0, 0, 0, 0.075) 0px 0px 0px 0.5px inset;
  display: flex;
  padding: 0;
  position: relative;
  width: max-content;
}

.pill-indicator {
  background: #fff;
  border-radius: 9999px;
  box-shadow: rgba(0, 0, 0, 0.38) 0px 0px 1px 0px,
              rgba(0, 0, 0, 0.05) 0px 4px 6px 0px;
  pointer-events: none;
  position: absolute;
  transition:
    left 0.26s cubic-bezier(0.4, 0, 0.2, 1),
    width 0.26s cubic-bezier(0.4, 0, 0.2, 1),
    top 0.26s cubic-bezier(0.4, 0, 0.2, 1),
    height 0.26s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: left, width;
  z-index: 0;
}

.pill-btn {
  align-items: center;
  background: transparent;
  border: none;
  border-radius: 9999px;
  color: rgba(0, 0, 0, 0.42);
  cursor: pointer;
  display: flex;
  font-family: var(--font-body);
  font-size: var(--t-caption);
  font-weight: var(--fw-semi);
  height: 40px;
  justify-content: center;
  outline: none;
  padding: 0 18px;
  position: relative;
  transition: color 0.22s ease;
  user-select: none;
  white-space: nowrap;
  z-index: 1;
}

.pill-btn.is-active {
  color: var(--ink);
}

/* ================================================================
   EFFECT HOUSE SHOWCASE  — pill tab + image switcher
   ================================================================ */
.eh-showcase-section {
  padding: clamp(100px, 12vw, 160px) var(--gutter) clamp(80px, 9vw, 140px);
}

/* ── Pill tab nav ── */
.eh-tabs-wrapper {
  display: flex;
  justify-content: center;
  margin: 0 auto 36px;
  padding: 8px 24px;
}

/* Size override — EH tabs are slightly larger than the 40px base */
.eh-tab-btn {
  font-size: var(--t-small);
  height: 48px;
  padding: 0 22px;
}

/* ── Image frame ── */
.eh-image-switcher {
  width: 100%;
  padding: 0 clamp(0px, 8vw, 120px);
  max-width: calc(var(--max) + 240px);
  margin: 0 auto;
}

/* Visual treatment mirrors .onb-showcase-card — same gray hairline
   container, fully rounded corners, 16/9 aspect. Acts as a shared
   shell that the 3 .eh-panel images swap inside. */
.eh-image-frame {
  aspect-ratio: 16 / 9;
  background: #ececec;
  border: 0.5px solid rgba(0, 0, 0, 0.05);
  border-radius: 24px;
  overflow: hidden;
  position: relative;
}

.eh-panel {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 480ms cubic-bezier(0.22, 1, 0.36, 1);
}

.eh-panel.is-active {
  opacity: 1;
  pointer-events: auto;
}

.eh-panel.is-active img,
.eh-panel.is-active .eh-panel-video {
  animation: aftab-ken-burns 800ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.eh-panel img,
.eh-panel-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 768px) {
  .eh-showcase-section { padding: 60px 0 0; }
  .eh-image-frame {
    aspect-ratio: 4 / 3;
  }
  .eh-image-switcher { padding: 0; }
}
/* ── end Effect House showcase ─────────────────────────────────────────── */

/* ── Effect House Design System bento ──────────────────────────────────── */

/* ── Effect House Design System rail visuals ────────────────────────────
   Section structure (rail-section / rail-grid / craft-rail-card) is
   shared with AfterShip · Brand & Web. Only the 5 CSS-art fills
   below are specific to this section; they sit inside .craft-rail-card-visual
   and bleed to the container edges. */

.eh-ds-visual {
  height: 100%;
  width: 100%;
}

.eh-ds-visual-color {
  background:
    linear-gradient(135deg,
      #7c3aed 0%,
      #4f46e5 22%,
      #0ea5e9 44%,
      #10b981 66%,
      #f59e0b 82%,
      #ef4444 100%);
  opacity: 0.8;
}

.eh-ds-visual-type {
  background: #e0e0e0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.eh-ds-visual-type::before {
  content: "Aa";
  color: rgba(0, 0, 0, 0.22);
  font-family: var(--font-display);
  font-size: clamp(96px, 16vw, 160px);
  font-weight: var(--fw-semi);
  letter-spacing: 0;
  line-height: 1;
}

.eh-ds-visual-elevation {
  background: #e0e0e0;
  display: grid;
  gap: 16px;
  align-items: center;
  justify-items: center;
  align-content: center;
  padding: 36px;
}

.eh-ds-visual-elevation::before,
.eh-ds-visual-elevation::after {
  content: "";
  border-radius: 12px;
  display: block;
  width: 70%;
}

.eh-ds-visual-elevation::before {
  background: #ffffff;
  box-shadow: 0 6px 18px rgba(0,0,0,0.10), 0 1px 4px rgba(0,0,0,0.06);
  height: 72px;
}

.eh-ds-visual-elevation::after {
  background: #ffffff;
  box-shadow: 0 3px 10px rgba(0,0,0,0.07), 0 1px 2px rgba(0,0,0,0.04);
  height: 56px;
}

.eh-ds-visual-components {
  background:
    radial-gradient(ellipse at 20% 60%, rgba(99, 102, 241, 0.18) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 30%, rgba(16, 185, 129, 0.12) 0%, transparent 55%),
    #e0e0e0;
}

.eh-ds-visual-icons {
  background: #e0e0e0;
  background-image:
    radial-gradient(circle, rgba(0,0,0,0.10) 1px, transparent 1px);
  background-size: 32px 32px;
}

/* ── end Effect House Design System ─────────────────────────────────────── */

/* ── Onboarding showcase ─────────────────────────────────────────────────── */

.onb-showcase-section {
  padding: clamp(64px, 8vw, 120px) var(--gutter);
}

/* Single content shell — mirrors .aftership-showcase-shell so the
   header and the card below share an identical container width and
   the two sections visually line up flush. */
.onb-showcase-shell {
  margin: 0 auto;
  max-width: var(--max-wide);
}

/* .onb-section-header layout/spacing handled by .title-group--lead. */

/* ── Gray card container — unified with the rest of the site's gray
       cards (#ececec + 0.5 px hairline) and widened to var(--max-wide)
       so it sits flush under the new section header. ── */
.onb-showcase-card {
  aspect-ratio: 2 / 1;
  background: #ececec;
  border: 0.5px solid rgba(0, 0, 0, 0.05);
  border-radius: 24px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: clamp(20px, 2.5vw, 32px) 8% 0;
}

/* ── Top row ── */
.onb-card-top {
  align-items: flex-start;
  display: flex;
  justify-content: space-between;
  margin-bottom: clamp(48px, 5vw, 72px);
  margin-left: calc(clamp(12px, 1.5vw, 20px) - 8%);
  margin-right: calc(clamp(12px, 1.5vw, 20px) - 8%);
}

.onb-card-title {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(15px, 1.4vw, 18px);
  font-weight: var(--fw-semi);
  letter-spacing: 0;
  line-height: 1.25;
  margin: 0 0 4px;
}

.onb-card-desc {
  color: var(--fg-muted);
  font-size: var(--t-caption);
  line-height: 1.55;
  margin: 0;
}

/* ── Project switcher — now sits BELOW the showcase card, centered,
       with a 20 px gap. Inside-card placement was the old behaviour;
       its slot in .onb-card-top is now occupied by .onb-sub-switcher. ── */
/* Position override only — base styles from .pill-switcher */
.onb-project-switcher {
  flex-shrink: 0;
  margin: 36px auto 0;
}

/* ── Panels (iframe area) ── */
.onb-panels {
  flex: 1;
  min-height: 0;
  position: relative;
}

.onb-panel {
  animation: onb-panel-breathe 1.6s ease-in-out infinite;
  background: #ffffff;
  border-radius: 12px 12px 0 0;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  transition: opacity 480ms cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes onb-panel-breathe {
  0%, 100% { background-color: #ffffff; }
  50%      { background-color: #f0f0f0; }
}

.onb-panel.is-loaded {
  animation: none;
  background: transparent;
}

.onb-panel.is-active {
  opacity: 1;
  pointer-events: auto;
  position: relative;
}

.onb-panel.is-active img {
  animation: aftab-ken-burns 800ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.onb-panel iframe,
.onb-panel img {
  border-radius: 12px 12px 0 0;
  display: block;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  width: 100%;
}

.onb-panel iframe {
  border: none;
}

.onb-panel img {
  border: 0.5px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.07), 0 0 0 0.5px rgba(0, 0, 0, 0.05);
}

/* BTP / Notification (and equivalent returns sub-tabs) — natural aspect ratio,
   no border. These are UI detail shots, not full-page screenshots. */
[data-onbpanel="tracking-btp"] img,
[data-onbpanel="tracking-notification"] img,
[data-onbpanel="returns-ai"] img,
[data-onbpanel="returns-wizard"] img,
[data-onbpanel="returns-preview"] img {
  border: none;
  box-shadow: none;
  height: 100%;
  margin: 0 auto;
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
  object-position: center top;
  width: auto;
}

/* ── Sub-switcher — now sits inside .onb-card-top in the top-right
       corner of the showcase card (was at the bottom of the card). ── */
.onb-sub-switcher {
  display: flex;
  flex-shrink: 0;
  justify-content: flex-end;
}

/* Hidden by default, shown when parent project is active — only delta from .pill-switcher */
.onb-sub-group {
  display: none;
}

.onb-sub-group.is-active {
  display: flex;
}

@media (max-width: 768px) {
  .onb-showcase-card {
    aspect-ratio: 4 / 3;
  }
}

.career-timeline-section {}

/* .career-timeline-header layout/spacing handled by .title-group--center.
   Section's max-width comes from .section > * (var(--max)). */
.career-timeline-header.title-group--center {
  margin-bottom: clamp(56px, 7vw, 96px);
}

/* Effect House showcase reuses .career-timeline-header for layout but the
   tab switcher sits much closer to the headline than the career timeline
   nodes do, so tighten the gap here. */
.eh-showcase-section .career-timeline-header.title-group--center {
  margin-bottom: clamp(24px, 3vw, 40px);
}

/* ========================================
   CAREER MILESTONE — horizontal node layout
   ======================================== */

.career-ms {
  align-items: flex-start;
  display: flex;
  margin: 0 auto;
  max-width: var(--max-wide);
  padding: 0;
}

/* Pre-history hint — hidden */
.career-ms-past {
  display: none;
}

/* Wrapper for the 4 nodes — holds the solid line */
.career-ms-nodes {
  display: flex;
  flex: 1;
  position: relative;
}

/* Solid line — full width, dots sit flush at each end */
.career-ms-nodes::before {
  background: rgba(25, 25, 25, 0.06);
  content: '';
  height: 10px;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 0;
}

.career-ms-nodes::after {
  display: none;
}

/* Individual node */
.career-ms-node {
  align-items: center;
  display: flex;
  flex: 1;
  flex-direction: column;
  position: relative;
}

/* Black dot on the line */
.career-ms-dot {
  background: var(--ink);
  border-radius: 50%;
  flex-shrink: 0;
  height: 10px;
  position: relative;
  width: 10px;
  z-index: 1;
}

/* Vertical stem — dotted, centered on dot */
.career-ms-stem {
  background: repeating-linear-gradient(
    to bottom,
    rgba(25, 25, 25, 0.22) 0,
    rgba(25, 25, 25, 0.22) 2px,
    transparent 2px,
    transparent 5px
  );
  flex-shrink: 0;
  height: 56px;
  width: 1px;
}

/* Align stem center to dot center for edge nodes */
.career-ms-node:first-child .career-ms-stem {
  margin-left: 4px;
}
.career-ms-node:last-child .career-ms-stem {
  margin-right: 4px;
}

/* Text block below stem */
.career-ms-content {
  padding: 12px 8px 0;
  text-align: center;
}

/* First node — dot flush left, flex: 0.5 so middle dots land at W/3 and 2W/3 */
.career-ms-node:first-child {
  align-items: flex-start;
  flex: 0.5;
}
.career-ms-node:first-child .career-ms-content {
  padding-left: 0;
  text-align: left;
}

/* Last node — dot flush right, flex: 0.5 */
.career-ms-node:last-child {
  align-items: flex-end;
  flex: 0.5;
}
.career-ms-node:last-child .career-ms-content {
  padding-right: 0;
  text-align: right;
}

.career-ms-years {
  display: none;
}

/* Theme headline — top line of each career stop, e.g. 'Design at OS
   scale'. Takes the prominent slot the company name used to own. */
.career-ms-theme {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(20px, 2vw, 26px);
  font-weight: var(--fw-semi);
  letter-spacing: var(--track-tight);
  line-height: 1.15;
  margin-bottom: 8px;
  max-width: 220px;
}

/* Company — now the middle, smaller line under the theme. */
.career-ms-co {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--t-small);
  font-weight: var(--fw-semi);
  text-wrap: balance;
  letter-spacing: 0;
  line-height: 1.35;
  margin-bottom: 6px;
  max-width: 220px;
}

.career-ms-co a {
  align-items: center;
  color: inherit;
  display: inline-flex;
  gap: 3px;
  text-decoration: none;
  transition: opacity 150ms ease;
}

.career-ms-co a:hover {
  opacity: 0.55;
}

.career-ms-co .ms-arrow {
  display: none;
}

.career-ms-role {
  color: var(--muted);
  font-family: var(--font-display);
  font-size: clamp(13px, 1vw, 14px);
  font-weight: var(--fw-medium);
  line-height: 1.55;
  max-width: 220px;
}

/* Mobile: stack vertically */
@media (max-width: 680px) {
  .career-ms {
    flex-direction: column;
    gap: 0;
  }

  .career-ms-past {
    border-left: 1px dashed rgba(25, 25, 25, 0.18);
    border-top: none;
    flex: 0 0 32px;
    height: 32px;
    margin-left: 12px;
    margin-top: 0;
    width: 0;
  }

  .career-ms-past::before {
    content: '···';
    left: -6px;
    top: -4px;
    transform: rotate(90deg);
    transform-origin: left center;
  }

  .career-ms-nodes {
    flex-direction: column;
  }

  .career-ms-nodes::before {
    background: var(--ink);
    height: calc(100% - 10px);
    left: 12px;
    top: 5px;
    width: 1px;
  }

  .career-ms-node {
    align-items: flex-start;
    flex-direction: row;
    gap: 0;
    padding-bottom: clamp(24px, 4vw, 32px);
  }

  .career-ms-dot {
    flex-shrink: 0;
    margin-top: 0;
    margin-left: 8px;
  }

  .career-ms-stem {
    border-left: none;
    border-top: 1px dashed rgba(25, 25, 25, 0.22);
    height: 0;
    width: 16px;
    margin-top: 5px;
  }

  .career-ms-content {
    padding: 0 0 0 0;
    text-align: left;
  }

  .career-ms-role {
    max-width: none;
  }
}

/* ========================================
   CURRENT SCOPE — editorial 3-column
   Replaces the feature-card "Explore" layout
   ======================================== */

/* Apple-style heading overrides scoped to leadership scope section */

/* .compact caps the container at 720px for sub-copy readability, but
   the large h2 needs more room — override to let the heading breathe. */
.leadership-scope-section .section-heading {
  max-width: var(--max-narrow); /* 900px — enough for 'Current leadership scope' at 68px */
}

.leadership-scope-section .section-heading .eyebrow {
  color: rgba(25, 25, 25, 0.72);
  letter-spacing: var(--track-label);
}

/* Editorial lead-in emphasis inside any title-group sub — used when the
   sub paragraph starts with a short bolded clause (e.g., "Three capability
   hubs."). Falls back to ink color + 600 weight so the prefix pops out of
   the muted body color. */
.title-group > p:not(.eyebrow) > strong {
  color: var(--ink);
  font-weight: var(--fw-semi);
}

/* Three capability cards — cream tiles with a square SVG visual area
   stacked above a short title + body. Layout: 3 columns, 16px gap.
   Visual area is a 1:1 square with generous interior padding.
   Vertical spacing from the title group above is handled entirely by
   .title-group--center's margin-bottom (var(--title-group-end)); no
   extra padding here. */
.scope-cards {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(3, 1fr);
  margin: 0 auto;
  max-width: var(--max);
}

.scope-card {
  background: #ececec;
  border: 0.5px solid rgba(0, 0, 0, 0.05);
  border-radius: 24px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
}

.scope-card-visual {
  align-items: center;
  aspect-ratio: 1;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  padding: 40px;
  width: 100%;
}

.scope-card-visual img,
.scope-card-visual svg {
  height: auto;
  max-width: 200px;
  width: 100%;
}

.scope-card-title {
  color: rgb(0, 0, 0);
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: var(--fw-semi);
  letter-spacing: 0;
  line-height: 26px;
  margin: 0 0 6px;
  padding: 0 28px;
}

.scope-card-body {
  color: rgb(119, 113, 105);
  font-family: var(--font-display);
  font-size: var(--t-small);
  font-weight: var(--fw-book);
  letter-spacing: 0;
  line-height: 22px;
  margin: 0;
  padding: 0 28px;
}

.scope-card > .scope-card-body:last-child {
  padding-bottom: 28px;
}

@media (max-width: 860px) {
  .scope-cards {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

/* ========================================
   WORKING PRINCIPLES
   Replaces the 4-move framework — 3 concrete principles
   ======================================== */

/* ── Concentric circles container ── */
.op-circles-outer {
  display: flex;
  justify-content: center;
  margin: clamp(32px, 4vw, 48px) auto clamp(28px, 3.5vw, 44px);
}

.op-circles-container {
  aspect-ratio: 1 / 1;
  max-width: 500px;
  position: relative;
  width: 100%;
}

/* Individual circle button */
.op-circle-btn {
  aspect-ratio: 1 / 1;
  background: transparent;
  border: 1px dashed rgba(0, 0, 0, 0.2);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  left: 50%;
  outline: none;
  position: absolute;
  transform: translateX(-50%);
  transition: border-color 0.28s ease, border-style 0.28s ease;
}

.op-circle-btn:hover {
  border-color: rgba(0, 0, 0, 0.45);
}

.op-circle-btn.is-active {
  border-style: solid;
  border-color: var(--ink);
}

/* Label inside circle — pushed to bottom */
.op-circle-label {
  align-items: center;
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
  margin-top: auto;
  pointer-events: none;
  z-index: 3;
}

.op-circle-label span {
  color: var(--soft);
  font-family: var(--font-display);
  font-size: var(--t-label);
  font-weight: var(--fw-medium);
  letter-spacing: 0;
  transition: color 0.28s ease;
  white-space: nowrap;
}

.op-circle-btn.is-active .op-circle-label span,
.op-circle-btn:hover .op-circle-label span {
  color: var(--ink);
}

/* Double dot below label:
   dot-outer = page bg colour, "erases" the arc line to create a break
   dot-inner = gray dot floating on top as the node indicator */
.op-dot-outer {
  background: var(--bg); /* matches page background — masks the circle border */
  border-radius: 50%;
  bottom: -6px;
  height: 12px;
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
  width: 12px;
  z-index: 1;
}

.op-dot-inner {
  background: var(--soft);
  border-radius: 50%;
  bottom: -3px;
  height: 6px;
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
  transition: background 0.28s ease;
  width: 6px;
  z-index: 3;
}

.op-circle-btn.is-active .op-dot-inner {
  background: var(--ink);
}

/* Content area */
.op-content-area {
  margin: 0 auto clamp(12px, 1.5vw, 20px);
  max-width: 680px;
  min-height: 110px;
  position: relative;
  text-align: center;
}

.op-content-panel {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 10px;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  transform: scale(0.96);
  transition: opacity 0.32s ease, transform 0.32s ease;
}

.op-content-panel.is-active {
  opacity: 1;
  pointer-events: auto;
  position: relative;
  transform: scale(1);
}

.op-panel-title {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: var(--fw-semi);
  letter-spacing: var(--track-sub);
  line-height: 1.15;
  margin: 0;
  text-wrap: balance;
}

.op-panel-body {
  color: var(--muted);
  font-family: var(--font-body);
  font-size: clamp(15px, 1.4vw, 17px);
  font-weight: var(--fw-book);
  line-height: 1.6;
  margin: 0;
  white-space: nowrap;
}

/* Nav buttons */
.op-nav {
  display: flex;
  gap: 10px;
  justify-content: center;
}

/* Disabled state — dim the whole glass wrapper */
.glass-button-root:has(.op-nav-btn:disabled) {
  opacity: 0.3;
  pointer-events: none;
}

@media (max-width: 680px) {
  .op-circles-container {
    max-width: 300px;
  }
}

/* ========================================
   BENTO GRID
   16-col × 9-row capability wall
   ======================================== */

.work-fragments {
  background: var(--bg);
  padding: clamp(64px, 7vw, 100px) var(--gutter);
}

.work-fragments-inner {
  margin: 0 auto;
  max-width: var(--max-wide);
}

/* Mirrors .onb-section-header — eyebrow + headline lead on the left,
   supporting copy aside on the right, bottom-aligned. Layout/sizing
   tokens identical so the two sections read as the same component. */
/* Layout/spacing handled by .title-group--lead. Section-specific width:
   this header sits in a --max-wide shell, so it inherits that container. */
.work-fragments-header {
  max-width: var(--max-wide);
}

.work-fragments-header-aside p {
  color: rgba(0, 0, 0, 0.6);
  font-family: var(--font-display);
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.6;
  margin: 0;
}

/* =============================================
   Bento grid — 16-col × 9-row named-area layout

   Layout map:
   ┌─────────────────────┬──────────────────────┬──────────┐
   │ users × 7 cols      │ effecthouse × 6 cols │ douyin×3 │  rows 1–4  (64px each)
   ├─────────────────────┴──────────────────────┴──────────┤
   │ band2 — flex wrapper (full 16 cols)                   │  row 5     (auto / 16:9)
   │   [languages+ainative] | [openhouse 56.25%] | [years+products]  │
   ├────────────────┬────────────────┬──────┬──────────────┤
   │ originos × 3  │ systems × 3    │clock2│ aftership × 5│ team × 3   rows 6–9  (52px each)
   └────────────────┴────────────────┴──────┴──────────────┴──────────┘
   ============================================= */

.bento-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(16, 1fr);
  /* ─────────────────────────────────────────────────────────────────────
     3-band layout  ·  16 columns  ·  9 rows

     Band 1  rows 1–4  3 cards  ·  users 7  effecthouse 6  douyin 3
     Band 2  row  5    flex wrapper (.bento-band2) spans full 16 cols
                         openhouse centered via flex: 0 0 56.25% + aspect-ratio: 16/9
                         sides (languages+ainative left, years+products right) flex: 1 each
     Band 3  rows 6–9  5 cards  ·  originos 3  systems 3  clock 2  aftership 5  team 3

     Row heights:
       Band 1  64px × 4  — fixed
       Band 2  auto      — height set by openhouse aspect-ratio (pure CSS 16:9)
       Band 3  52px × 4  — fixed
  ───────────────────────────────────────────────────────────────────── */
  grid-template-rows:
    64px   /* row 1 — band 1 */
    64px   /* row 2 */
    64px   /* row 3 */
    64px   /* row 4 */
    auto   /* row 5 — band 2 wrapper (height = openhouse 16:9) */
    52px   /* row 6 — band 3 */
    52px   /* row 7 */
    52px   /* row 8 */
    52px;  /* row 9 */
  grid-template-areas:
    /* Band 1 — 3 cards (streak 7, upscale 6, train 3) */
    "users users users users users users effecthouse effecthouse effecthouse effecthouse effecthouse effecthouse douyin douyin douyin douyin"
    "users users users users users users effecthouse effecthouse effecthouse effecthouse effecthouse effecthouse douyin douyin douyin douyin"
    "users users users users users users effecthouse effecthouse effecthouse effecthouse effecthouse effecthouse douyin douyin douyin douyin"
    "users users users users users users effecthouse effecthouse effecthouse effecthouse effecthouse effecthouse douyin douyin douyin douyin"
    /* Band 2 — flex wrapper, full width */
    "band2 band2 band2 band2 band2 band2 band2 band2 band2 band2 band2 band2 band2 band2 band2 band2"
    /* Band 3 — 4 cards (clock widened 3→5 to fit two faces; aftership 7→5) */
    "originos originos originos originos originos originos clock clock clock clock clock aftership aftership aftership aftership aftership"
    "originos originos originos originos originos originos clock clock clock clock clock aftership aftership aftership aftership aftership"
    "originos originos originos originos originos originos clock clock clock clock clock aftership aftership aftership aftership aftership"
    "originos originos originos originos originos originos clock clock clock clock clock aftership aftership aftership aftership aftership";
}

/* --- Base cell --- */
.bento-cell {
  background: #ececec;
  border: 0.5px solid rgba(0, 0, 0, 0.05);
  border-radius: 24px;
  overflow: hidden;
  position: relative;
}

/* --- Skeleton loader —————————————————————————————————————————
   ::after overlay covers the card while is-loading is set.
   Fades to opacity:0 and animation stops once JS removes the class.
   The sweep is subtle: #e8e8e8 → #f0f0f0 (≈4% Δ luminance).
   ——————————————————————————————————————————————————————————— */
@keyframes bento-shimmer {
  0%   { background-position: 200% 50%; }
  100% { background-position: -200% 50%; }
}

.bento-cell::after {
  border-radius: inherit;
  bottom: 0;
  content: '';
  left: 0;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
  transition: opacity 0.5s ease;
  z-index: 20;
}

.bento-cell.is-loading::after {
  animation: bento-shimmer 1.8s ease-in-out infinite;
  background: linear-gradient(
    105deg,
    #e8e8e8 35%,
    #f1f1f1 50%,
    #e8e8e8 65%
  );
  background-size: 300% 100%;
  /* Extend 1px beyond padding-box so the shimmer covers the border area too.
     overflow:hidden on .bento-cell clips it back to the border-radius shape,
     preventing the dark background-image gradient from leaking at the edges. */
  inset: -1px;
  opacity: 1;
}

/* --- Grid area assignments (band 1 + 3 direct grid children) --- */
.bento-band2     { grid-area: band2; }   /* wrapper for band 2 */
.bento-users    { grid-area: users; }
.bento-clock     { grid-area: clock; }
.bento-effecthouse   { grid-area: effecthouse; }
.bento-douyin     { grid-area: douyin; }
/* ======================
   BAND 2 — centered flex wrapper
   openhouse is physically centered: sides get equal flex:1 space on both sides.
   openhouse width = 56.25% of band2 (≈ 9/16 of full grid width).
   height is set purely by CSS aspect-ratio: 16/9 — no JS needed.
   ====================== */
.bento-band2 {
  align-items: stretch;
  display: flex;
  gap: 14px;
  min-height: 0;
}

.bento-band2-side {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.bento-band2-side > .bento-cell {
  flex: 1;
  min-height: 0;
}

.bento-openhouse {
  aspect-ratio: 16 / 9;
  flex: 0 0 56.25%;
  min-width: 0;
  position: relative;   /* needed for absolute-positioned video child */
}

.bento-openhouse--video {
  background: url('/assets/bento-openhouse-poster.webp') center/cover no-repeat #ececec;
  padding: 0 !important;
  overflow: hidden;
  /* Drop the shared .bento-cell border — its 0.5px outline reads as a thin
     dark ring at the top edge / rounded corners since the video bleeds 1px
     past the padding-box but the border still paints over it. */
  border: 0;
}
.bento-openhouse-video {
  position: absolute;
  /* Pull 1px outside the cell's content edge on all sides so the rounded
     corner of the parent (24px) fully covers the video edge with no sub-pixel
     gap visible at top/bottom corners. The parent's overflow:hidden +
     border-radius clip the bleed. */
  inset: -1px;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  object-fit: cover;
  display: block;
  border-radius: inherit;
  opacity: 0;
  transition: opacity 480ms ease;
}
.bento-openhouse-video.is-playing {
  opacity: 1;
}

/* Black overlay that fades in around the 5s loop point and fades back
   out after the video seeks to 0. Masks the hard cut between the
   end-of-loop frame and the opening frame so the seam looks like a
   short dip-to-black rather than a snap. CSS transition matches the
   JS FADE_DURATION_MS in initBentoOpenhouseVideo(). */
.bento-openhouse-fade {
  background: #000;
  border-radius: inherit;
  inset: -1px;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  transition: opacity 250ms ease;
  z-index: 1;
}

.bento-openhouse--video.is-fading .bento-openhouse-fade {
  opacity: 1;
}
.bento-aftership     { grid-area: aftership; }
.bento-originos     { grid-area: originos; }
/* ======================
   Entrance animation
   Cells start hidden (scale 0.5, opacity 0).
   IntersectionObserver adds .bento-entered to .bento-grid
   when the section scrolls into view; CSS transitions each
   cell in with a stagger driven by --bi (set via JS).
   ====================== */
.bento-grid .bento-cell {
  opacity: 0;
  transform: scale(0.5);
  transition:
    opacity  0.7s cubic-bezier(0.25, 1, 0.5, 1),
    transform 0.7s cubic-bezier(0.25, 1, 0.5, 1);
  transition-delay: calc(var(--bi, 0) * 50ms);
}

.bento-grid.bento-entered .bento-cell {
  opacity: 1;
  transform: scale(1);
}

/* --- Shared text tokens — all small bento copy unified at 13px / 600 --- */
.bento-eyebrow {
  color: rgba(0, 0, 0, 0.55);
  font-family: var(--font-display);
  font-size: var(--t-label);
  font-weight: var(--fw-semi);
  letter-spacing: 0;
  margin: 0;
}

.bento-label {
  color: rgba(0, 0, 0, 0.55);
  font-family: var(--font-display);
  font-size: var(--t-label);
  font-weight: var(--fw-semi);
  letter-spacing: 0;
  line-height: 1.4;
  margin: 0;
}

.bento-body {
  color: rgba(0, 0, 0, 0.55);
  font-family: var(--font-display);
  font-size: var(--t-label);
  font-weight: var(--fw-semi);
  line-height: 1.55;
  margin: 0;
}

.bento-stat-large {
  background: linear-gradient(200deg, rgb(80, 80, 80) 0%, rgb(10, 10, 10) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: var(--font-display);
  font-size: clamp(44px, 4.8vw, 80px);
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-tight);
  line-height: 1;
  margin: 0 0 4px;
}

/* Inline arrow inside .bento-stat-large — gives precise stroke-width
   control vs. the heavier Unicode '→' which inherits the 600 weight. */
.bento-stat-large .stat-arrow {
  display: inline-block;
  height: 0.6em;
  width: 0.85em;
  vertical-align: 0.04em;
  margin: 0 4px;
}

.bento-heading-gradient {
  background: linear-gradient(200deg, rgb(240, 240, 240) 0%, rgb(255, 255, 255) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: var(--font-display);
  font-size: clamp(44px, 4.8vw, 80px);
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-tight);
  line-height: 1;
  margin: 4px 0 0;
}

/* ── Bento heading / label variant modifiers ─────────────────────────
   Replace ad-hoc inline overrides with reusable variant classes. */

/* Mid-size solid heading (28-46px). Use when a card needs a heading
   smaller than the default 44-80px display but you don't want the
   light gradient (e.g., "Global Leadership"). */
.bento-heading-md {
  color: rgba(0, 0, 0, 0.88);
  font-family: var(--font-display);
  font-size: clamp(28px, 3vw, 46px);
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-display);
  line-height: var(--lh-heading);
  margin: 0 0 6px;
}

/* Aftership card is now 5 cols (was 7) — narrower → "Global Leadership"
   wraps to two lines at the default md size. Dial down so it sits on
   one line again. */
.bento-aftership .bento-heading-md {
  font-size: clamp(24px, 2.4vw, 34px);
}

/* Mid-size gradient heading (28-46px) — used for "AI-native". */
.bento-heading-gradient.is-md {
  font-size: clamp(28px, 3vw, 46px);
  line-height: var(--lh-heading);
}

/* Stat-size gradient (44-72px) — slightly tighter than the base
   clamp(44, 4.8vw, 80) so the number reads as a stat rather than a
   display heading. Used for "8+". */
.bento-heading-gradient.is-stat {
  font-size: clamp(44px, 4.2vw, 72px);
  margin: 0;
}

/* Eyebrow tag variant — sentence-case descriptive label (no uppercase
   tracking). Used when the eyebrow runs as a sentence rather than a
   single short tag. */
.bento-eyebrow.is-tag {
  font-size: var(--t-label);
  letter-spacing: 0;
  text-transform: none;
}

/* ── Dark-bg bento cells ─────────────────────────────────────────────
   Image-background cells with overlay text inherit white text colors.
   .bento-douyin (#ececec) and .bento-effecthouse / .bento-originos
   (image-only, no text) are NOT in this list — they're light bg or
   text-free. Overriding the gradient on .bento-stat-large here matches
   the prior inline pattern (gradient invisible on dark bg → solid white). */
:is(.bento-users, .bento-ainative, .bento-languages,
    .bento-products, .bento-aftership)
  :is(.bento-eyebrow, .bento-label, .bento-body) {
  color: rgba(255, 255, 255, 0.92);
}

:is(.bento-users, .bento-ainative, .bento-languages,
    .bento-products, .bento-aftership)
  .bento-heading-md {
  color: #fff;
}

:is(.bento-users, .bento-ainative, .bento-languages,
    .bento-products, .bento-aftership)
  .bento-stat-large {
  background: none;
  color: #fff;
  -webkit-text-fill-color: #fff;
}

/* --- Shared image fill --- */
.bento-bg-img {
  display: block;
  height: 100%;
  left: 0;
  object-fit: cover;
  object-position: center;
  position: absolute;
  top: 0;
  transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
  width: 100%;
}

.bento-cell:hover .bento-bg-img {
  transform: scale(1.04);
}

/* Caption strip at bottom of image cells */
.bento-img-caption {
  bottom: 0;
  left: 0;
  padding: 36px 16px 14px;
  position: absolute;
  right: 0;
  z-index: 2;
  background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 100%);
}

/* ======================
   WAVE cell
   Narrow stat card (2/16 cols = 12.5%).
   Layout: eyebrow top·center → number fills → no body text.
   ====================== */
.bento-years {
  align-items: center;
  background: #ececec;
  display: flex;
  flex-direction: column;
  gap: 4px;
  justify-content: center;
  padding: 12px 10px;
  text-align: center;
}
/* Constrain bleeding-number inside the cards that share band 1 / band 2
   right-side proportions (~4 cols wide). 600M+ in bento-douyin and 5+
   in bento-years use the same scaled clamp so they read as visually
   aligned stat tiles. */
:is(.bento-years, .bento-douyin) .bleeding-number {
  font-size: clamp(40px, 4.2vw, 72px);
}
.bento-douyin .bleeding-number {
  font-size: clamp(40px, 4vw, 68px);
}

.wave-bars {
  align-items: flex-end;
  display: flex;
  height: 50%;
  gap: 5px;
  width: 80%;
}

.wave-bar {
  animation: bento-audio-wave 1.3s ease-in-out infinite alternate;
  background: rgba(0, 0, 0, 0.45);
  border-radius: 2px;
  flex: 1;
  min-height: 20%;
}

.wave-bar:nth-child(1) { animation-delay: 0s; }
.wave-bar:nth-child(2) { animation-delay: 0.18s; }
.wave-bar:nth-child(3) { animation-delay: 0.36s; }
.wave-bar:nth-child(4) { animation-delay: 0.54s; }
.wave-bar:nth-child(5) { animation-delay: 0.72s; }
.wave-bar:nth-child(6) { animation-delay: 0.90s; }

@keyframes bento-audio-wave {
  from { height: 20%; opacity: 0.45; }
  to   { height: 100%; opacity: 0.85; }
}

/* ======================
   STREAK cell — content centered both H and V on the image, no bottom
   gradient (matches Krea's "Industry-leading inference speed" pattern).
   ====================== */
.bento-users {
  align-items: center;
  display: flex;
  justify-content: center;
  padding: 20px 24px;
  text-align: center;
}

.bento-users-overlay {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  position: relative;
  z-index: 2;
}

/* ======================
   Dark hero / panel cards — openhouse, aftership, originos — centered
   composition: title block centered both H and V, no top-vs-bottom
   space-between split.
   ====================== */
.bento-openhouse,
.bento-aftership,
.bento-originos {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: center;
  padding: 20px 24px;
  text-align: center;
}

.bento-openhouse > div,
.bento-aftership > div,
.bento-originos > div {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* ======================
   CLOCK cell
   ====================== */
.bento-clock {
  align-items: center;
  background: #ececec;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 24px 24px 20px;
  text-align: center;
}

.bento-clock-title {
  color: #111;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: var(--fw-semi);
  letter-spacing: 0;
  line-height: 1.2;
  margin: 0;
  white-space: nowrap;
}

/* Faces row — two clocks side by side, sized to fit the card width. */
.bento-clock-faces {
  align-items: center;
  display: flex;
  flex: 1;
  gap: clamp(16px, 2vw, 28px);
  justify-content: center;
  padding: 8px 0;
  width: 100%;
}

.bento-clock-face {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  justify-content: center;
}

/* Night (SF) face — sits inside its own dark dial card so the dial
   tone doesn't conflict with the parent card's light background.
   Subtle blue-purple tint (#1c1d2a) for a "midnight" feel rather than
   pure neutral black. */
.bento-clock-face.is-night {
  background: #1c1d2a;
  border-radius: 50%;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.04),
    0 4px 12px rgba(0, 0, 0, 0.18);
}

.clock-svg {
  display: block;
  flex-shrink: 0;
  height: clamp(108px, 11vw, 132px);
  width: clamp(108px, 11vw, 132px);
}

.bento-clock-sub {
  color: rgba(0, 0, 0, 0.55);
  font-family: var(--font-display);
  font-size: var(--t-label);
  font-weight: var(--fw-semi);
  letter-spacing: 0;
  line-height: 1.4;
  margin: 0;
}

/* Hand <g> wrappers — rotate around viewBox center (100,100) */
.clock-hand-group {
  transform-origin: 100px 100px;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ======================
   UPSCALE cell
   ::before fills the card with the gif; no fallback bg so no black bleed.
   inset: -2px prevents sub-pixel gaps at card edges.
   ====================== */
.bento-effecthouse {
  overflow: hidden;
  padding: 0;
}

/* Video loop replaces the GIF — same bleed trick as ::before */
.bento-effecthouse-video {
  height: calc(100% + 4px);
  left: -2px;
  object-fit: cover;
  object-position: 75% center;
  position: absolute;
  top: -2px;
  width: calc(100% + 4px);
}

/* ======================
   TRAIN cell
   Stat card (3/16 cols = 18.75%).
   Layout: eyebrow top·center → large number center → label below.
   ====================== */
.bento-douyin {
  align-items: center;
  background: #ececec;
  display: flex;
  flex-direction: column;
  gap: 6px;
  justify-content: center;
  padding: 14px 12px;
  text-align: center;
}

/* ======================
   NOTRAIN cell
   Philosophy card (3/16 cols = 18.75%).
   Layout: label·top center → body text center (dark image bg).
   ====================== */
.bento-languages {
  align-items: center;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 16px 14px;
  text-align: center;
}

/* ======================
   MINIMALIST cell + reflection
   ====================== */
.bento-ainative {
  align-items: center;
  background: #141820;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  padding: 16px 18px;
  text-align: center;
}

.minimalist-container {
  flex: 1;
  overflow: hidden;
  position: relative;
}

.minimalist-stage {
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -52%);
  width: 88%;
}

.minimalist-main {
  border-radius: 6px;
  display: block;
  position: relative;
  width: 100%;
  z-index: 1;
}

.minimalist-reflect {
  border-radius: 6px;
  display: block;
  filter: blur(1.5px);
  margin-top: 3px;
  -webkit-mask-image: linear-gradient(to top, transparent 15%, rgba(0, 0, 0, 0.55) 70%);
  mask-image: linear-gradient(to top, transparent 15%, rgba(0, 0, 0, 0.55) 70%);
  opacity: 0.45;
  transform: scaleY(-1);
  width: 100%;
}

/* minimalist-card: pure CSS diagram representing systems thinking */
.minimalist-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  height: 100%;
  position: relative;
  width: 100%;
  overflow: hidden;
}

.minimalist-card::before,
.minimalist-card::after {
  content: "";
  position: absolute;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Top bar — "header" of the card */
.minimalist-card::before {
  top: 16px;
  left: 16px;
  right: 16px;
  height: 10px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 4px;
  border: none;
}

/* Bottom area — grid of rows */
.minimalist-card::after {
  top: 38px;
  left: 16px;
  right: 16px;
  bottom: 16px;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.06) 0px,
      rgba(255, 255, 255, 0.06) 8px,
      transparent 8px,
      transparent 18px
    );
  border: none;
  border-radius: 4px;
}

/* Label overlay for video card (display:block parent, so needs absolute positioning) */
.bleeding-ticker {
  display: flex;
  align-items: center;
  justify-content: center;
}

.bleeding-number {
  background: linear-gradient(200deg, rgb(120, 120, 120) 0%, rgb(10, 10, 10) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: block;
  font-family: var(--font-display);
  font-size: clamp(52px, 5.5vw, 96px);
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-display);
  line-height: 1;
  margin: 0;
}

/* ======================
   MODELS cell
   Narrow stat card (2/16 cols = 12.5%).
   Layout: large number center → label below.
   ====================== */
.bento-products {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 10px;
  text-align: center;
}
/* Constrain stat size inside the narrow models card */
.bento-products .bento-stat-large {
  font-size: clamp(36px, 3.8vw, 64px);
}

/* ======================
   Responsive — tablet (8-col, ≤900px)
   Band 2 wrapper fills full row; internally openhouse stays centered.
   ====================== */
@media (max-width: 900px) {
  .bento-grid {
    gap: 8px;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(10, auto);
    height: auto;
    grid-template-areas:
      /* Band 1 */
      "users users users users users users users users"
      "users users users users users users users users"
      "users users users users users users users users"
      "effecthouse effecthouse effecthouse effecthouse douyin douyin douyin douyin"
      "effecthouse effecthouse effecthouse effecthouse douyin douyin douyin douyin"
      /* Band 2 — flex wrapper, full row */
      "band2 band2 band2 band2 band2 band2 band2 band2"
      /* Band 3 */
      "originos originos originos originos originos originos originos originos"
      "originos originos originos originos originos originos originos originos"
      "clock clock aftership aftership aftership aftership aftership aftership"
      "clock clock aftership aftership aftership aftership aftership aftership";
  }

  /* band2 flex: openhouse wider (60%), sides stack vertically */
  .bento-band2     { gap: 8px; }
  .bento-band2-side { gap: 8px; }
  .bento-openhouse     { flex: 0 0 60%; }

  .bento-cell       { min-height: 80px; }
  .bento-users     { min-height: 140px; }
  .bento-effecthouse,
  .bento-douyin      { min-height: 120px; }
  .bento-originos   { min-height: 130px; }
  .bento-clock    { min-height: 110px; }
  .bento-aftership      { min-height: 130px; }
  .bento-languages,
  .bento-ainative,
  .bento-years,
  .bento-products     { min-height: 100px; }
}

/* ======================
   Responsive — mobile (2-col, ≤600px)
   Band 2 stacks vertically: openhouse full-width on top, side cols as a 2-col row below.
   ====================== */
@media (max-width: 600px) {
  .bento-grid {
    gap: 6px;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    height: auto;
    grid-template-areas:
      "users  users"
      "users  users"
      "effecthouse douyin"
      "band2   band2"
      "originos   systems"
      "clock   clock"
      "aftership   aftership"
      "aftership   aftership";
  }

  /* band2 stacks: openhouse full-width, then sides row */
  .bento-band2      { flex-direction: column; gap: 6px; }
  .bento-band2-side { flex-direction: row; gap: 6px; }
  .bento-openhouse      { flex: 0 0 auto; width: 100%; }

  .bento-cell       { min-height: 100px; }
  .bento-users     { min-height: 160px; }
  .bento-effecthouse,
  .bento-douyin      { min-height: 120px; }
  .bento-languages,
  .bento-ainative { min-height: 130px; }
  .bento-years,
  .bento-products     { min-height: 100px; }
  .bento-aftership      { min-height: 120px; }
}

/* ========================================
   SCROLL SNAP — proximity rhythm
   Snaps only when near a target; never locks the page between sections.
   Four key snap points: hero / selected work / principles / personal
   ======================================== */

/* Hero: full-viewport height */
.hero {
  min-height: 100svh;
}

/* ========================================
   Section title group — two layout patterns, single-column each
   .title-group--center      — centered alignment
   .title-group--lead        — left-aligned alignment
   Direct children: <p class="eyebrow"> + <h2> + <p> (sub).
   Token sizes for h2 come from --h2-strip / --h2-feature; per-section
   rules can override (e.g., employer-logo uses --h2-strip).
   ======================================== */
/* === Variant: --center (single-column, centered) === */
.title-group--center {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: var(--title-group-end);
  text-align: center;
}

/* === Variant: --lead (left-aligned, single column) === */
.title-group--lead {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  margin-bottom: var(--title-group-end);
  text-align: left;
}

/* === Shared element styles (apply to BOTH --center and --lead) === */

/* Eyebrow */
.title-group .eyebrow {
  color: rgba(25, 25, 25, 0.72);
}

/* Headline — one tier for every section header (use --h2-display).
   The employer-logo header drops two tiers to --h2-strip via its
   own scoped override below. Hero and breathing-line statements
   live outside title-group and have their own scales. */
.title-group--center > h1,
.title-group--center > h2 {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--h2-display);
  font-weight: var(--fw-semi);
  letter-spacing: var(--track-display);
  line-height: 1.05;
  margin: 0;
  text-wrap: balance;
}

/* Left-aligned section headlines step one tier down from centered
   ones — centered headlines act as 'section anchors' (bigger, more
   declarative), while lead-aligned headlines sit closer to body copy
   and benefit from a slightly tighter scale. */
.title-group--lead > h1,
.title-group--lead > h2 {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--h2-feature);
  font-weight: var(--fw-semi);
  letter-spacing: var(--track-display);
  line-height: 1.05;
  margin: 0;
}

/* Employer-logo header — one tier below the main section headlines
   (--h2-feature instead of --h2-display) and a slightly looser
   line-height because the copy wraps to 2 lines and the default
   1.05 packs the wrapped lines too tightly. */
.title-group--center.employer-logo-heading > h2 {
  font-size: clamp(24px, 2.6vw, 38px);
  line-height: 1.15;
}

/* Subhead — the muted paragraph below the headline.
   Applies to: centred sub, left-aligned sub, sub inside the lead wrapper,
   and aside body text in --lead split layout. */
.title-group--center > p:not(.eyebrow),
.title-group--lead > p:not(.eyebrow) {
  color: var(--muted);
  font-size: 17px;
  font-weight: var(--fw-book);
  letter-spacing: 0;
  line-height: 1.55;
  margin: 16px 0 0;
  text-wrap: balance;
}

/* Width caps and alignment per variant
   --center keeps the narrow reading width so centred lines stay tight;
   --lead inherits the container's max-width so the sub flows to the
   same width as the content below it (preview, rail, grid, etc.). */
.title-group--center > p:not(.eyebrow) {
  margin-left: auto;
  margin-right: auto;
  max-width: var(--read-narrow);
}