:root {
      --ink: #18171d;
      --paper: #c8cbe0;
      --white: #ffffff;
      --lime: #c9ff38;
      --purple: #7669e8;
      --surface-blue: #b8bfd8;
      --surface-pink: #f2c4d5;
      --surface-paper: #f5f5f2;
      --radius-card: 8px;
      --radius-control: 4px;
      --ease-ui: cubic-bezier(0.22, 0.8, 0.24, 1);
      --page-pad: 5.2vw;
      --nav-height: 76px;
    }

    * {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
      background: var(--ink);
    }

    body {
      margin: 0;
      color: var(--white);
      background: var(--ink);
      font-family: Arial, "Microsoft YaHei", sans-serif;
      overflow-x: hidden;
    }

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

    button,
    a {
      -webkit-tap-highlight-color: transparent;
    }

    .site-nav {
      position: fixed;
      inset: 0 0 auto;
      z-index: 20;
      height: var(--nav-height);
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 var(--page-pad);
      border-bottom: 1px solid rgba(255, 255, 255, 0.16);
      transition: background-color 220ms ease, border-color 220ms ease;
    }

    .site-nav.is-scrolled {
      background: var(--paper);
      border-color: rgba(255, 255, 255, 0.25);
    }

    .site-nav.is-about {
      background: #f2c4d5;
      color: var(--ink);
      border-color: rgba(23, 22, 28, 0.12);
    }

    .site-nav.is-cases {
      background: #f5f5f2;
      color: var(--ink);
      border-color: rgba(23, 22, 28, 0.1);
    }

    .site-nav.is-cases .nav-link {
      color: rgba(23, 22, 28, 0.68);
    }

    .site-nav.is-cases .nav-link::after {
      background: var(--ink);
    }

    .site-nav.is-contact {
      background: #f5f5f2;
      color: var(--ink);
      border-color: rgba(23, 22, 28, 0.1);
    }

    .site-nav.is-contact .nav-link {
      color: rgba(23, 22, 28, 0.68);
    }

    .site-nav.is-contact .nav-link::after {
      background: var(--ink);
    }

    .site-nav.is-about .nav-link {
      color: rgba(23, 22, 28, 0.68);
    }

    .site-nav.is-about .nav-link::after {
      background: var(--ink);
    }

    .brand {
      display: inline-flex;
      align-items: center;
      gap: 11px;
      min-width: max-content;
    }

    .brand-mark {
      display: grid;
      width: 31px;
      height: 31px;
      place-items: center;
      border-radius: 50%;
      background: var(--purple);
      color: var(--white);
      font: 700 17px/1 Georgia, serif;
    }

    .brand-name {
      font-size: 14px;
      font-weight: 900;
      letter-spacing: 0;
    }

    .nav-right,
    .nav-links {
      display: flex;
      align-items: center;
    }

    .nav-right {
      gap: 34px;
    }

    .nav-links {
      gap: 30px;
    }

    .nav-link {
      position: relative;
      padding: 9px 0;
      color: rgba(255, 255, 255, 0.72);
      font-size: 13px;
      font-weight: 600;
      transition: color 180ms ease;
    }

    .nav-link::after {
      content: "";
      position: absolute;
      right: 0;
      bottom: 4px;
      left: 0;
      height: 1px;
      background: var(--white);
      transform: scaleX(0);
      transform-origin: right;
      transition: transform 220ms ease;
    }

    .nav-link:hover,
    .nav-link:focus-visible {
      color: var(--white);
    }

    .nav-link:hover::after,
    .nav-link:focus-visible::after {
      transform: scaleX(1);
      transform-origin: left;
    }

    .grab-button {
      display: inline-flex;
      min-height: 35px;
      align-items: center;
      justify-content: center;
      padding: 0 17px;
      border-radius: 4px;
      background: var(--lime);
      color: #11120f;
      font-size: 13px;
      font-weight: 900;
      transition: transform 180ms ease, background-color 180ms ease;
    }

    .grab-button:hover,
    .grab-button:focus-visible {
      background: #dbff72;
      transform: translateY(-2px);
    }

    .hero-shell {
      position: relative;
      z-index: 0;
      height: 100vh;
    }

    .hero {
      position: sticky;
      top: 0;
      height: 100vh;
      min-height: 650px;
      overflow: hidden;
      isolation: isolate;
      background-color: var(--paper);
    }

    .hero::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      opacity: 0.24;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Ccircle cx='2' cy='2' r='1' fill='%23ffffff'/%3E%3C/svg%3E");
      pointer-events: none;
    }

    .hero::after {
      content: "";
      position: absolute;
      inset: auto 0 0;
      z-index: 3;
      height: 1px;
      background: rgba(255, 255, 255, 0.35);
    }

    .hero-title {
      position: absolute;
      z-index: 1;
      top: 12.5vh;
      left: 50%;
      width: 100%;
      margin: 0;
      color: rgba(255, 255, 255, 0.96);
      font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
      font-size: clamp(4.2rem, 6vw, 7.5rem);
      font-stretch: condensed;
      font-weight: 900;
      line-height: 0.78;
      letter-spacing: 0;
      text-align: center;
      white-space: nowrap;
      transform: translate(-50%, 30px);
      opacity: 0;
      animation: title-enter 900ms cubic-bezier(0.2, 0.75, 0.25, 1) 120ms forwards;
    }

    .character-stage {
      position: absolute;
      z-index: 2;
      right: 0;
      bottom: -2vh;
      left: 0;
      height: 68vh;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      transform: translateX(2vw);
      pointer-events: none;
    }

    .character-video {
      display: block;
      width: auto;
      height: 100%;
      max-width: 72vw;
      object-fit: contain;
      object-position: center bottom;
      filter: saturate(0.98) contrast(1.02);
      transform: translateY(30px) scale(0.985);
      opacity: 0;
      animation: character-enter 950ms cubic-bezier(0.18, 0.78, 0.24, 1) 260ms forwards;
    }

    .intro-copy {
      position: absolute;
      z-index: 4;
      bottom: 24.5vh;
      left: var(--page-pad);
      width: 330px;
      text-align: left;
      opacity: 0;
      transform: translateY(18px);
      animation: content-enter 680ms ease 720ms forwards;
    }

    .eyebrow {
      margin: 0 0 14px;
      font-size: 11px;
      font-weight: 900;
      line-height: 1.4;
      text-transform: uppercase;
    }

    .intro-copy h2 {
      margin: 0;
      font-size: 20px;
      font-weight: 800;
      line-height: 1.45;
      letter-spacing: 0;
    }

    .profile {
      position: absolute;
      z-index: 4;
      top: 48%;
      right: var(--page-pad);
      width: 278px;
      padding: 3px 0 3px 23px;
      transform: translateY(-50%);
    }

    .profile-line {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      width: 2px;
      background: var(--white);
      opacity: 0;
      transform: scaleY(0);
      transform-origin: top;
      transition: opacity 180ms ease, transform 380ms cubic-bezier(0.2, 0.7, 0.25, 1);
    }

    .profile-row {
      display: grid;
      grid-template-columns: 76px 1fr;
      gap: 12px;
      margin: 0 0 13px;
      font-size: 12px;
      line-height: 1.4;
      opacity: 0;
      transform: translateY(12px);
      transition: opacity 340ms ease, transform 340ms ease;
    }

    .profile.is-greeting .profile-line {
      opacity: 1;
      transform: scaleY(1);
    }

    .profile.is-greeting .profile-row {
      opacity: 1;
      transform: translateY(0);
    }

    .profile.is-greeting .profile-row:nth-child(2) { transition-delay: 260ms; }
    .profile.is-greeting .profile-row:nth-child(3) { transition-delay: 430ms; }
    .profile.is-greeting .profile-row:nth-child(4) { transition-delay: 600ms; }
    .profile.is-greeting .profile-row:nth-child(5) { transition-delay: 770ms; }
    .profile.is-greeting .profile-row:nth-child(6) { transition-delay: 940ms; }

    .profile-row:last-child {
      margin-bottom: 0;
    }

    .profile-label {
      color: rgba(255, 255, 255, 0.62);
    }

    .profile-value {
      font-weight: 800;
    }

    .hero-actions {
      position: absolute;
      z-index: 5;
      bottom: 5vh;
      left: var(--page-pad);
      display: flex;
      gap: 10px;
      opacity: 0;
      transform: translateY(16px);
      animation: content-enter 620ms ease 1040ms forwards;
    }

    .pill-button {
      display: inline-flex;
      min-height: 42px;
      align-items: center;
      justify-content: center;
      padding: 0 19px;
      border: 1px solid rgba(255, 255, 255, 0.62);
      border-radius: 999px;
      background: transparent;
      color: var(--white);
      font-size: 12px;
      font-weight: 800;
      transition: color 180ms ease, background-color 180ms ease, transform 180ms ease;
    }

    .pill-button:first-child {
      border-color: var(--white);
      background: var(--white);
      color: var(--ink);
    }

    .pill-button:hover,
    .pill-button:focus-visible {
      transform: translateY(-2px);
      background: var(--lime);
      border-color: var(--lime);
      color: var(--ink);
    }

    .hero-footer {
      position: absolute;
      z-index: 4;
      right: var(--page-pad);
      bottom: 5.5vh;
      margin: 0;
      font-size: 10px;
      font-weight: 900;
      line-height: 1.4;
      text-align: right;
      opacity: 0;
      animation: simple-fade 500ms ease 1320ms forwards;
    }

    .next-section {
      position: relative;
      z-index: 10;
      height: 100vh;
      min-height: 680px;
      overflow: hidden;
      isolation: isolate;
      padding: 120px var(--page-pad) 34px;
      background: #b8bfd8;
      color: var(--white);
    }

    .next-section::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      opacity: 0.24;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Ccircle cx='2' cy='2' r='1' fill='%23ffffff'/%3E%3C/svg%3E");
      pointer-events: none;
    }

    .projects-heading {
      position: relative;
      z-index: 5;
      width: min(580px, 52vw);
      animation: projects-heading-enter 780ms cubic-bezier(0.22, 0.8, 0.24, 1) both;
    }

    .projects-heading h2 {
      margin: 0;
      font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
      font-size: 5.7rem;
      font-weight: 900;
      line-height: 0.88;
      letter-spacing: 0;
      text-transform: uppercase;
    }

    .projects-heading p {
      margin: 22px 0 0;
      max-width: 330px;
      font-size: 16px;
      font-weight: 800;
      line-height: 1.45;
      animation: content-enter 620ms ease 220ms both;
    }

    .projects-character {
      position: absolute;
      z-index: 2;
      top: 7vh;
      right: 2.5vw;
      width: min(330px, 29vw);
      height: 46vh;
      min-height: 310px;
      pointer-events: none;
      animation: projects-character-float 4.8s ease-in-out infinite;
    }

    .projects-character video {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: contain;
      object-position: center top;
      filter: saturate(0.98) contrast(1.02);
    }

    .carousel-shell {
      position: absolute;
      z-index: 4;
      right: 0;
      bottom: 1vh;
      left: 0;
      height: 56vh;
      min-height: 390px;
      user-select: none;
      touch-action: pan-y;
    }

    .project-ring {
      position: absolute;
      inset: 0;
      perspective: 1150px;
      cursor: grab;
    }

    .project-ring.is-dragging {
      cursor: grabbing;
    }

    .project-card {
      position: absolute;
      top: 48%;
      left: 50%;
      width: clamp(178px, 17vw, 250px);
      aspect-ratio: 0.78;
      overflow: hidden;
      border: 1px solid rgba(255, 255, 255, 0.62);
      border-radius: 7px;
      background: var(--card-color, #ffffff);
      color: var(--card-ink, #19181e);
      transform-origin: center;
      transition: transform 620ms cubic-bezier(0.18, 0.76, 0.22, 1), opacity 420ms ease, filter 420ms ease;
      will-change: transform, opacity;
    }

    .project-card:hover {
      filter: saturate(1.18) brightness(1.05) drop-shadow(0 12px 18px rgba(24, 23, 29, 0.18));
    }

    .project-ring.is-dragging .project-card {
      transition-duration: 90ms;
    }

    .project-card::before,
    .project-card::after {
      content: "";
      position: absolute;
      pointer-events: none;
    }

    .project-card::before {
      top: 20%;
      right: -16%;
      width: 72%;
      aspect-ratio: 1;
      border: 2px solid currentColor;
      border-radius: 50%;
      opacity: 0.18;
      animation: card-orbit-pulse 3.2s ease-in-out infinite;
    }

    .project-card::after {
      right: 10%;
      bottom: 21%;
      width: 34%;
      height: 2px;
      background: currentColor;
      box-shadow: 0 9px 0 currentColor, 0 18px 0 currentColor;
      opacity: 0.3;
      animation: card-scanline 2.4s ease-in-out infinite;
    }

    .project-card[data-active="true"] {
      border-color: rgba(255, 255, 255, 0.95);
      filter: saturate(1.05);
    }

    .project-card[data-active="true"]::before {
      animation-duration: 1.8s;
      opacity: 0.35;
    }

    .card-index {
      position: absolute;
      top: 16px;
      left: 16px;
      font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
      font-size: 38px;
      line-height: 1;
    }

    .card-status {
      position: absolute;
      top: 18px;
      right: 15px;
      font-size: 9px;
      font-weight: 900;
      text-transform: uppercase;
    }

    .card-cross {
      position: absolute;
      top: 42%;
      left: 50%;
      width: 58px;
      height: 58px;
      transform: translate(-50%, -50%);
    }

    .card-cross::before,
    .card-cross::after {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      background: currentColor;
      transform: translate(-50%, -50%);
    }

    .card-cross::before { width: 58px; height: 7px; }
    .card-cross::after { width: 7px; height: 58px; }

    .card-copy {
      position: absolute;
      right: 16px;
      bottom: 16px;
      left: 16px;
      border-top: 1px solid currentColor;
      padding-top: 12px;
    }

    .card-copy strong {
      display: block;
      font-size: 15px;
      line-height: 1.2;
    }

    .card-copy span {
      display: block;
      margin-top: 6px;
      font-size: 9px;
      font-weight: 800;
      opacity: 0.58;
    }

    .carousel-controls {
      position: absolute;
      z-index: 10;
      right: var(--page-pad);
      bottom: 25px;
      display: flex;
      align-items: center;
      gap: 9px;
    }

    .carousel-button {
      display: grid;
      width: 42px;
      height: 42px;
      place-items: center;
      border: 1px solid rgba(255, 255, 255, 0.72);
      border-radius: 50%;
      background: transparent;
      color: var(--white);
      font-size: 20px;
      cursor: pointer;
      transition: background-color 180ms ease, color 180ms ease, transform 180ms ease;
    }

    .carousel-button:not(:hover):not(:focus-visible) {
      animation: carousel-button-breathe 3.5s ease-in-out infinite;
    }

    .carousel-button:hover,
    .carousel-button:focus-visible {
      background: var(--lime);
      border-color: var(--lime);
      color: var(--ink);
      transform: translateY(-2px);
    }

    .carousel-count {
      min-width: 58px;
      font-size: 11px;
      font-weight: 900;
      text-align: center;
    }

    .carousel-hint {
      position: absolute;
      z-index: 8;
      bottom: 36px;
      left: var(--page-pad);
      margin: 0;
      font-size: 9px;
      font-weight: 900;
      opacity: 0.64;
      animation: carousel-hint-pulse 2.6s ease-in-out infinite;
    }

    @keyframes projects-heading-enter {
      from { opacity: 0; transform: translateY(28px); }
      to { opacity: 1; transform: translateY(0); }
    }

    @keyframes projects-character-float {
      0%, 100% { transform: translateY(0) rotate(-2deg); }
      50% { transform: translateY(-10px) rotate(2deg); }
    }

    @keyframes card-orbit-pulse {
      0%, 100% { transform: scale(0.96) rotate(0deg); opacity: 0.14; }
      50% { transform: scale(1.04) rotate(16deg); opacity: 0.3; }
    }

    @keyframes card-scanline {
      0%, 100% { transform: translateX(0); opacity: 0.22; }
      50% { transform: translateX(-5px); opacity: 0.5; }
    }

    @keyframes carousel-button-breathe {
      0%, 100% { box-shadow: 0 0 0 0 rgba(201, 255, 56, 0); }
      50% { box-shadow: 0 0 0 5px rgba(201, 255, 56, 0.18); }
    }

    @keyframes carousel-hint-pulse {
      0%, 100% { opacity: 0.48; }
      50% { opacity: 0.9; }
    }

    .cases-section {
      position: relative;
      z-index: 11;
      height: 100vh;
      min-height: 720px;
      overflow: hidden;
      isolation: isolate;
      background: #f5f5f2;
      color: var(--ink);
    }

    .cases-watermark {
      position: absolute;
      z-index: -1;
      top: 3vh;
      left: 50%;
      margin: 0;
      color: rgba(23, 22, 28, 0.035);
      font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
      font-size: 13rem;
      line-height: 0.8;
      letter-spacing: 0;
      white-space: nowrap;
      transform: translateX(-50%);
      pointer-events: none;
    }

    .cases-character {
      position: absolute;
      z-index: 3;
      top: calc(var(--nav-height) + 5px);
      left: 50%;
      width: min(160px, 13vw);
      height: 19vh;
      min-height: 155px;
      transform: translateX(-50%);
      pointer-events: none;
      animation: cases-character-bob 4.4s ease-in-out infinite;
    }

    .cases-character video {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: contain;
      object-position: center top;
    }

    .cases-header {
      position: absolute;
      z-index: 5;
      top: 21vh;
      right: var(--page-pad);
      left: var(--page-pad);
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      border-bottom: 1px solid rgba(23, 22, 28, 0.14);
      padding-bottom: 18px;
      animation: cases-header-enter 680ms cubic-bezier(0.22, 0.8, 0.24, 1) both;
    }

    .cases-title-group p {
      margin: 0 0 8px;
      font-size: 9px;
      font-weight: 900;
      text-transform: uppercase;
      opacity: 0.5;
    }

    .cases-title-group h2 {
      margin: 0;
      font-size: 42px;
      font-weight: 900;
      line-height: 1;
      letter-spacing: 0;
    }

    .cases-header-controls {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .cases-count {
      min-width: 58px;
      font-size: 10px;
      font-weight: 900;
      text-align: center;
    }

    .cases-button {
      display: grid;
      width: 38px;
      height: 38px;
      place-items: center;
      border: 1px solid rgba(23, 22, 28, 0.36);
      border-radius: 50%;
      background: transparent;
      color: var(--ink);
      font-size: 18px;
      cursor: pointer;
      transition: background-color 180ms ease, transform 180ms ease;
    }

    .cases-button:not(:hover):not(:focus-visible) {
      animation: cases-button-pulse 3.2s ease-in-out infinite;
    }

    .cases-button:hover,
    .cases-button:focus-visible {
      background: var(--lime);
      transform: translateY(-2px);
    }

    .cases-viewport {
      position: absolute;
      z-index: 4;
      top: 31vh;
      right: 0;
      bottom: 7vh;
      left: 0;
      overflow: hidden;
      cursor: grab;
      touch-action: pan-y;
    }

    .cases-viewport.is-dragging {
      cursor: grabbing;
    }

    .case-card {
      position: absolute;
      top: 50%;
      left: 50%;
      display: grid;
      width: min(66vw, 940px);
      height: min(47vh, 430px);
      min-height: 350px;
      overflow: hidden;
      grid-template-columns: 40% 60%;
      border: 1px solid rgba(23, 22, 28, 0.16);
      border-radius: 8px;
      background: var(--case-bg, #d8cab0);
      color: var(--case-ink, #18171d);
      transition: transform 620ms cubic-bezier(0.18, 0.76, 0.22, 1), opacity 420ms ease;
      will-change: transform, opacity;
    }

    .case-card::after {
      content: "";
      position: absolute;
      z-index: 6;
      inset: 10px;
      border: 1px solid currentColor;
      border-radius: 5px;
      opacity: 0;
      pointer-events: none;
      transform: scale(0.97);
      transition: opacity 260ms ease, transform 420ms ease;
    }

    .case-card:hover {
      filter: saturate(1.08) brightness(1.02);
    }

    .case-card:hover::after,
    .case-card[data-active="true"]::after {
      opacity: 0.22;
      transform: scale(1);
    }

    .cases-viewport.is-dragging .case-card {
      transition-duration: 90ms;
    }

    .case-copy {
      position: relative;
      z-index: 2;
      display: flex;
      flex-direction: column;
      min-width: 0;
      overflow: hidden;
      padding: clamp(25px, 3vw, 45px);
    }

    .case-overline {
      margin: 0 0 26px;
      font-size: 9px;
      font-weight: 900;
      text-transform: uppercase;
      opacity: 0.56;
    }

    .case-copy h3 {
      max-width: 100%;
      margin: 0;
      overflow-wrap: anywhere;
      font-size: clamp(26px, 2.45vw, 40px);
      font-weight: 900;
      line-height: 1.04;
      letter-spacing: 0;
    }

    .case-copy > p:not(.case-overline) {
      max-width: 260px;
      margin: 20px 0 0;
      font-size: 12px;
      font-weight: 600;
      line-height: 1.6;
      opacity: 0.66;
    }

    .case-meta {
      display: grid;
      margin-top: auto;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      border-top: 1px solid currentColor;
      padding-top: 13px;
      font-size: 9px;
      font-weight: 900;
      opacity: 0.62;
    }

    .case-visual {
      position: relative;
      overflow: hidden;
      margin: 22px 22px 22px 0;
      border: 1px solid rgba(23, 22, 28, 0.14);
      border-radius: 6px;
      background: var(--case-panel, #f0ece3);
      transition: transform 420ms cubic-bezier(0.22, 0.8, 0.24, 1), box-shadow 420ms ease;
    }

    .case-video {
      position: absolute;
      z-index: 1;
      inset: 34px 0 0;
      width: 100%;
      height: calc(100% - 34px);
      object-fit: cover;
      object-position: center;
      background: #11121a;
      filter: saturate(1.08) contrast(1.04);
      transition: transform 700ms var(--ease-ui), filter 500ms ease;
    }

    .case-video:not(.is-playing) {
      cursor: pointer;
    }

    .case-embed-wrap {
      position: absolute;
      z-index: 1;
      inset: 34px 0 0;
      display: flex;
      flex-direction: column;
      align-items: stretch;
      background: #11121a;
    }

    .case-embed-frame {
      display: block;
      width: 100%;
      aspect-ratio: 16 / 9;
      flex: 0 0 auto;
      border: 0;
      background: #05060a;
      pointer-events: auto;
    }

    .case-embed-wrap {
      cursor: pointer;
    }

    .case-backup-link {
      display: block;
      padding: 9px 12px 10px;
      color: rgba(255, 255, 255, 0.78);
      font-size: 9px;
      font-weight: 700;
      line-height: 1.35;
      text-decoration: underline;
      text-underline-offset: 2px;
      transition: color 180ms ease, background 180ms ease;
    }

    .case-backup-link:hover {
      background: rgba(255, 255, 255, 0.1);
      color: #fff;
    }

    .case-cover {
      position: absolute;
      z-index: 1;
      inset: 34px 0 0;
      display: block;
      width: 100%;
      height: calc(100% - 34px);
      object-fit: cover;
      object-position: center;
      transition: transform 700ms var(--ease-ui), filter 500ms ease;
    }

    .case-card:hover .case-cover {
      transform: scale(1.035);
      filter: saturate(1.05) contrast(1.03);
    }

    .case-card:hover .case-video,
    .case-card[data-active="true"] .case-video {
      transform: scale(1.045);
      filter: saturate(1.18) contrast(1.08);
    }

    .case-visual.has-video::after {
      content: attr(data-label);
      position: absolute;
      z-index: 4;
      right: 16px;
      bottom: 14px;
      padding: 6px 8px;
      border: 1px solid rgba(255, 255, 255, 0.82);
      border-radius: 3px;
      background: rgba(24, 23, 29, 0.72);
      color: var(--white);
      font-size: 8px;
      font-weight: 900;
      letter-spacing: 0.06em;
    }

    .case-visual.has-video.is-playing::after {
      content: attr(data-playing-label);
      opacity: 0.52;
    }

    .case-full-trigger {
      position: absolute;
      z-index: 8;
      top: 43px;
      right: 12px;
      padding: 7px 9px;
      border: 1px solid rgba(255, 255, 255, 0.72);
      border-radius: 3px;
      background: rgba(24, 23, 29, 0.74);
      color: var(--white);
      cursor: pointer;
      font-size: 8px;
      font-weight: 900;
      letter-spacing: 0.04em;
      opacity: 0;
      transform: translateY(-4px);
      transition: opacity 220ms ease, transform 220ms ease, background 180ms ease;
    }

    .case-visual.has-video:hover .case-full-trigger,
    .case-visual.has-video.is-playing .case-full-trigger {
      opacity: 1;
      transform: translateY(0);
    }

    .case-full-trigger:hover {
      background: var(--purple);
    }

    .case-card:hover .case-visual {
      transform: translateY(-5px) rotate(0.6deg);
      box-shadow: 0 15px 22px rgba(23, 22, 28, 0.14);
    }

    .case-browser-bar {
      position: absolute;
      top: 0;
      right: 0;
      left: 0;
      height: 34px;
      border-bottom: 1px solid rgba(23, 22, 28, 0.12);
    }

    .case-browser-bar::before {
      content: "•••";
      position: absolute;
      top: 7px;
      left: 13px;
      font-size: 12px;
      letter-spacing: 3px;
      opacity: 0.35;
      animation: browser-dots-blink 2.6s ease-in-out infinite;
    }

    .case-number {
      position: absolute;
      right: 5%;
      bottom: -10%;
      color: rgba(23, 22, 28, 0.08);
      font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
      font-size: 15rem;
      line-height: 1;
    }

    .case-placeholder-title {
      position: absolute;
      top: 31%;
      left: 10%;
      max-width: 60%;
      font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
      font-size: clamp(34px, 4vw, 64px);
      line-height: 0.9;
      text-transform: uppercase;
      animation: placeholder-title-shift 3.8s ease-in-out infinite;
    }

    .case-placeholder-lines {
      position: absolute;
      right: 8%;
      bottom: 18%;
      width: 23%;
      height: 2px;
      background: currentColor;
      box-shadow: 0 11px 0 currentColor, 0 22px 0 currentColor;
      opacity: 0.28;
      animation: placeholder-lines-scan 2.8s ease-in-out infinite;
    }

    .cases-pagination {
      position: absolute;
      z-index: 8;
      bottom: 2.8vh;
      left: 50%;
      display: flex;
      gap: 7px;
      transform: translateX(-50%);
    }

    .case-lightbox {
      position: fixed;
      z-index: 60;
      inset: 0;
      display: grid;
      place-items: center;
      padding: 5vh 5vw;
      background: rgba(14, 14, 20, 0.9);
      opacity: 0;
      pointer-events: none;
      transition: opacity 260ms ease;
    }

    .case-lightbox.is-open {
      opacity: 1;
      pointer-events: auto;
    }

    .case-lightbox-inner {
      position: relative;
      width: min(1120px, 92vw);
      max-height: 90vh;
      border: 1px solid rgba(255, 255, 255, 0.28);
      background: #11121a;
      box-shadow: 0 24px 70px rgba(0, 0, 0, 0.34);
      transform: translateY(18px) scale(0.98);
      transition: transform 360ms var(--ease-ui);
    }

    .case-lightbox.is-open .case-lightbox-inner {
      transform: translateY(0) scale(1);
    }

    .case-lightbox-video {
      display: block;
      width: 100%;
      max-height: 78vh;
      background: #05060a;
    }

    .case-lightbox-close {
      position: absolute;
      z-index: 2;
      top: 12px;
      right: 12px;
      display: grid;
      width: 38px;
      height: 38px;
      place-items: center;
      border: 1px solid rgba(255, 255, 255, 0.55);
      border-radius: 50%;
      background: rgba(17, 18, 26, 0.7);
      color: #fff;
      cursor: pointer;
      font-size: 24px;
      line-height: 1;
      transition: background 180ms ease, transform 180ms ease;
    }

    .case-lightbox-close:hover {
      background: var(--purple);
      transform: rotate(8deg);
    }

    .case-lightbox-caption {
      margin: 0;
      padding: 12px 16px 14px;
      color: rgba(255, 255, 255, 0.78);
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    @media (max-width: 560px) {
      .case-lightbox { padding: 24px 17px; }
      .case-lightbox-inner { width: 100%; }
      .case-lightbox-video { max-height: 70vh; }
    }

    .case-dot {
      width: 7px;
      height: 7px;
      padding: 0;
      border: 0;
      border-radius: 50%;
      background: rgba(23, 22, 28, 0.2);
      cursor: pointer;
      transition: width 180ms ease, border-radius 180ms ease, background-color 180ms ease;
    }

    .case-dot.is-active {
      width: 28px;
      border-radius: 999px;
      background: var(--ink);
      animation: case-dot-active 1.8s ease-in-out infinite;
    }

    @keyframes cases-header-enter {
      from { opacity: 0; transform: translateY(18px); }
      to { opacity: 1; transform: translateY(0); }
    }

    @keyframes cases-character-bob {
      0%, 100% { transform: translateX(-50%) translateY(0); }
      50% { transform: translateX(-50%) translateY(-8px); }
    }

    @keyframes cases-button-pulse {
      0%, 100% { box-shadow: 0 0 0 0 rgba(201, 255, 56, 0); }
      50% { box-shadow: 0 0 0 4px rgba(201, 255, 56, 0.18); }
    }

    @keyframes browser-dots-blink {
      0%, 100% { opacity: 0.22; }
      50% { opacity: 0.58; }
    }

    @keyframes placeholder-title-shift {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-5px); }
    }

    @keyframes placeholder-lines-scan {
      0%, 100% { transform: translateX(0); opacity: 0.22; }
      50% { transform: translateX(-7px); opacity: 0.44; }
    }

    @keyframes case-dot-active {
      0%, 100% { box-shadow: 0 0 0 0 rgba(23, 22, 28, 0); }
      50% { box-shadow: 0 0 0 4px rgba(23, 22, 28, 0.12); }
    }

    /* Shared visual tokens keep every act in the same design system. */
    .next-section { background: var(--surface-blue); }
    .about-section { background: var(--surface-pink); }
    .cases-section,
    .contact-section { background: var(--surface-paper); }
    .project-card,
    .case-card { border-radius: var(--radius-card); }
    .grab-button,
    .about-contact,
    .contact-send { border-radius: var(--radius-control); }
    .project-card,
    .case-card,
    .contact-card,
    .about-interactive { transition-timing-function: var(--ease-ui); }
    button,
    a,
    input { outline-offset: 3px; }

    .about-section {
      position: relative;
      z-index: 11;
      min-height: 100vh;
      overflow: hidden;
      isolation: isolate;
      padding: 88px var(--page-pad) 34px;
      background: #f2c4d5;
      color: var(--ink);
    }

    .contact-section {
      position: relative;
      z-index: 12;
      min-height: 100vh;
      overflow: hidden;
      isolation: isolate;
      padding: 0 var(--page-pad);
      background: #f5f5f2;
      color: var(--ink);
    }

    .contact-section::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      opacity: 0.23;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Ccircle cx='2' cy='2' r='1' fill='%23dcdcdc'/%3E%3C/svg%3E");
      pointer-events: none;
    }

    .contact-watermark {
      position: absolute;
      z-index: -1;
      top: 4vh;
      left: 50%;
      margin: 0;
      color: rgba(23, 22, 28, 0.03);
      font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
      font-size: 12rem;
      line-height: 0.8;
      letter-spacing: 0;
      white-space: nowrap;
      transform: translateX(-50%);
    }

    .contact-layout {
      display: grid;
      min-height: 100vh;
      grid-template-columns: minmax(290px, 0.54fr) minmax(560px, 1.46fr);
      gap: 2.5vw;
      align-items: center;
    }

    .contact-card {
      position: relative;
      width: min(360px, 25vw);
      aspect-ratio: 0.67;
      overflow: hidden;
      border-radius: 9px;
      background: #5b36ff;
      color: var(--white);
      box-shadow: 0 20px 42px rgba(23, 22, 28, 0.12);
      transform: translateY(2vh) rotate(-2deg);
      perspective: 900px;
      contain: paint;
      transition: transform 420ms cubic-bezier(0.22, 0.8, 0.24, 1), box-shadow 420ms ease;
    }

    .contact-card::before {
      content: "";
      position: absolute;
      z-index: 8;
      inset: 10px;
      border: 1px solid rgba(255, 255, 255, 0.82);
      border-radius: 5px;
      opacity: 0;
      pointer-events: none;
      transform: scale(0.95);
      transition: opacity 300ms ease, transform 420ms cubic-bezier(0.22, 0.8, 0.24, 1);
    }

    .contact-card:hover {
      transform: translateY(calc(2vh - 8px)) rotate(-2deg) scale(1.025);
      box-shadow: 0 28px 54px rgba(23, 22, 28, 0.2), 0 0 0 2px rgba(201, 255, 56, 0.32);
    }

    .contact-card:hover::before {
      opacity: 1;
      transform: scale(1);
      animation: card-frame-pulse 1.35s ease-in-out infinite;
    }

    .contact-card-copy {
      position: absolute;
      z-index: 5;
      top: 37px;
      right: 34px;
      left: 34px;
    }

    .contact-card-copy em {
      display: block;
      margin-bottom: 8px;
      font: italic 22px/1.1 Georgia, serif;
    }

    .contact-card-copy strong {
      display: block;
      font-size: 49px;
      font-weight: 900;
      line-height: 0.95;
      letter-spacing: -1px;
    }

    .contact-card-copy span {
      display: block;
      margin-top: 7px;
      font-size: 14px;
      font-weight: 800;
    }

    .contact-card-orbit,
    .contact-card-orbit::before,
    .contact-card-orbit::after {
      position: absolute;
      border: 2px solid rgba(255, 255, 255, 0.96);
      border-radius: 50%;
      pointer-events: none;
    }

    .contact-card-orbit {
      top: 190px;
      right: -42px;
      width: 380px;
      height: 380px;
      animation: orbit-spin 3.8s linear infinite;
    }

    .contact-card:hover .contact-card-orbit {
      animation-duration: 1.55s;
    }

    .contact-card-orbit::before {
      content: "";
      top: 21px;
      left: 21px;
      width: 332px;
      height: 332px;
      border-color: rgba(255, 255, 255, 0.6);
    }

    .contact-card-orbit::after {
      content: "";
      top: 52px;
      left: 52px;
      width: 270px;
      height: 270px;
      border-color: rgba(201, 255, 56, 0.92);
    }

    .contact-card-video {
      position: absolute;
      z-index: 3;
      right: 0;
      bottom: 3%;
      width: 100%;
      height: 67%;
      object-fit: cover;
      object-position: center 14%;
      filter: saturate(1.05) contrast(1.03);
      transform-origin: 50% 72%;
      transform-style: preserve-3d;
      backface-visibility: visible;
      animation: none;
      transform: none;
      transition: transform 500ms cubic-bezier(0.22, 0.8, 0.24, 1), filter 500ms ease;
      pointer-events: none;
    }

    .contact-card:hover .contact-card-video {
      transform: scale(1.045);
      filter: saturate(1.18) contrast(1.06);
    }

    .contact-visual-spin {
      position: absolute;
      inset: 0;
      z-index: 3;
      overflow: hidden;
      transform-origin: 50% 62%;
      animation: none;
      will-change: transform;
      pointer-events: none;
    }

    .contact-card::after {
      content: "UI / MOTION";
      position: absolute;
      z-index: 6;
      right: 23px;
      bottom: 89px;
      padding: 6px 8px;
      border: 1px solid rgba(255, 255, 255, 0.7);
      border-radius: 999px;
      color: var(--white);
      font-size: 8px;
      font-weight: 900;
      letter-spacing: 0.05em;
      transform: rotate(-14deg);
      animation: ui-chip-float 3.6s ease-in-out infinite;
      pointer-events: none;
    }

    .contact-card-play {
      position: absolute;
      z-index: 6;
      right: 20px;
      top: 46%;
      display: grid;
      width: 47px;
      height: 47px;
      place-items: center;
      border: 2px solid var(--white);
      border-radius: 50%;
      background: transparent;
      color: var(--white);
      font-size: 17px;
    }

    .contact-card-button {
      position: absolute;
      z-index: 7;
      bottom: 19px;
      left: 50%;
      display: inline-flex;
      min-height: 37px;
      align-items: center;
      justify-content: center;
      padding: 0 17px;
      border: 1px solid var(--ink);
      border-radius: 3px;
      background: var(--white);
      color: var(--ink);
      font-size: 11px;
      font-weight: 900;
      transform: translateX(-50%);
      white-space: nowrap;
    }

    .contact-copy {
      position: relative;
      min-width: 0;
      display: flex;
      min-height: 72vh;
      flex-direction: column;
      justify-content: center;
      padding: 78px 7vw;
    }

    .contact-kicker {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      margin: 0 0 20px;
      color: #c9ff38;
      font-size: 10px;
      font-weight: 900;
      text-transform: uppercase;
    }

    .contact-kicker::before {
      content: "";
      width: 30px;
      height: 2px;
      background: #c9ff38;
    }

    .contact-copy h2 {
      max-width: 740px;
      margin: 0;
      color: var(--white);
      font-family: Georgia, "Times New Roman", serif;
      font-size: clamp(3.6rem, 5.8vw, 7.2rem);
      font-weight: 700;
      line-height: 0.86;
      letter-spacing: 0;
    }

    .contact-copy h2 span {
      display: block;
      font-size: 0.86em;
    }

    .contact-copy::before {
      content: "";
      position: absolute;
      inset: 3% -20vw 3% -10vw;
      z-index: -1;
      border-radius: 50%;
      background: #121216;
    }

    .contact-lead {
      max-width: 640px;
      margin: 30px 0 0;
      color: rgba(255, 255, 255, 0.76);
      font-size: 15px;
      font-weight: 600;
      line-height: 1.65;
    }

    .contact-lead strong {
      color: var(--white);
    }

    .contact-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 7px;
      margin-top: 27px;
    }

    .contact-tag {
      display: inline-flex;
      min-height: 25px;
      align-items: center;
      padding: 0 9px;
      border: 1px solid rgba(201, 255, 56, 0.72);
      border-radius: 999px;
      color: var(--white);
      font-size: 9px;
      font-weight: 900;
    }

    .contact-actions {
      display: flex;
      gap: 8px;
      margin-top: 26px;
    }

    .contact-input {
      width: min(285px, 43vw);
      min-height: 46px;
      padding: 0 15px;
      border: 0;
      border-radius: 0;
      background: var(--white);
      color: var(--ink);
      font: 700 12px/1 Arial, "Microsoft YaHei", sans-serif;
    }

    .contact-input::placeholder {
      color: rgba(23, 22, 28, 0.45);
    }

    .contact-send {
      display: inline-flex;
      min-height: 46px;
      align-items: center;
      justify-content: center;
      padding: 0 17px;
      border: 1px solid var(--lime);
      background: var(--lime);
      color: var(--ink);
      font-size: 11px;
      font-weight: 900;
      cursor: pointer;
    }

    .contact-send:hover,
    .contact-send:focus-visible {
      background: var(--white);
    }

    .contact-footnote {
      margin: 20px 0 0;
      color: rgba(255, 255, 255, 0.5);
      font-size: 9px;
      font-weight: 700;
    }

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

    @keyframes card-frame-pulse {
      0%, 100% { opacity: 0.62; }
      50% { opacity: 1; }
    }


    @keyframes ui-chip-float {
      0%, 100% { translate: 0 0; }
      50% { translate: 0 -5px; }
    }

    .about-section::before {
      content: "";
      position: absolute;
      top: 0;
      right: 0;
      left: 0;
      height: 9px;
      background: var(--paper);
    }

    .about-decoration {
      position: absolute;
      z-index: -1;
      top: 7.5vh;
      left: 50%;
      margin: 0;
      color: rgba(23, 22, 28, 0.075);
      font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
      font-size: 15rem;
      font-weight: 900;
      line-height: 0.78;
      letter-spacing: 0;
      text-align: center;
      white-space: nowrap;
      transform: translateX(-50%);
      pointer-events: none;
    }

    .about-layout {
      position: relative;
      z-index: 2;
      display: grid;
      min-height: calc(100vh - 122px);
      grid-template-columns: minmax(0, 1.18fr) minmax(390px, 0.82fr);
      gap: 0;
      align-items: stretch;
    }

    .about-left {
      display: flex;
      min-width: 0;
      flex-direction: column;
      padding-top: 2vh;
      padding-bottom: 3vh;
    }

    .about-copy {
      width: 100%;
      max-width: 780px;
      margin-top: 5vh;
      padding-bottom: 0;
      transform: none;
    }

    .about-kicker {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      margin: 0 0 14px;
      font-size: 10px;
      font-weight: 900;
      text-transform: uppercase;
    }

    .about-kicker::before {
      content: "";
      width: 28px;
      height: 2px;
      background: var(--ink);
    }

    .about-copy h3 {
      margin: 0 0 26px;
      font-size: 36px;
      font-weight: 900;
      line-height: 1.05;
      letter-spacing: 0;
    }

    .about-body {
      columns: 2;
      column-gap: 48px;
      column-rule: 1px solid rgba(23, 22, 28, 0.16);
      font-size: 14px;
      font-weight: 600;
      line-height: 1.92;
    }

    .about-body p {
      margin: 0 0 20px;
      break-inside: avoid;
    }

    .about-body strong {
      font-weight: 900;
      box-shadow: inset 0 -0.55em 0 rgba(201, 255, 56, 0.95);
    }

    .about-signoff {
      padding-top: 3px;
      border-top: 1px solid rgba(23, 22, 28, 0.25);
    }

    .about-visual {
      position: relative;
      min-width: 0;
      min-height: 580px;
    }

    .about-interactive {
      position: absolute;
      z-index: 6;
      top: 25%;
      right: 8%;
      width: min(380px, 27vw);
      padding: 18px 20px 20px;
      border: 1px solid rgba(23, 22, 28, 0.55);
      border-radius: 6px;
      background: rgba(242, 196, 213, 0.9);
      box-shadow: 8px 8px 0 rgba(23, 22, 28, 0.9);
      transform: rotate(3deg);
      transition: transform 260ms ease, box-shadow 260ms ease;
    }

    .about-interactive:hover {
      transform: rotate(0deg) translateY(-5px);
      box-shadow: 12px 12px 0 rgba(23, 22, 28, 0.9);
    }

    .about-interactive-kicker {
      margin: 0 0 13px;
      color: rgba(23, 22, 28, 0.64);
      font-size: 9px;
      font-weight: 900;
      letter-spacing: 0.08em;
    }

    .about-interactive-tabs {
      display: flex;
      flex-wrap: wrap;
      gap: 7px;
    }

    .about-interactive-tab {
      min-height: 27px;
      padding: 0 10px;
      border: 1px solid var(--ink);
      border-radius: 999px;
      background: transparent;
      color: var(--ink);
      font-size: 9px;
      font-weight: 900;
      cursor: pointer;
      transition: background-color 180ms ease, color 180ms ease, transform 180ms ease;
    }

    .about-interactive-tab:hover,
    .about-interactive-tab:focus-visible,
    .about-interactive-tab.is-active {
      background: var(--lime);
      color: var(--ink);
      transform: translateY(-2px);
    }

    .about-interactive-topic {
      margin: 20px 0 7px;
      font-size: 26px;
      font-weight: 900;
      line-height: 1;
    }

    .about-interactive-detail {
      max-width: 270px;
      margin: 0;
      font-size: 12px;
      font-weight: 700;
      line-height: 1.6;
    }

    .about-interactive-cursor {
      position: absolute;
      right: 18px;
      bottom: 16px;
      display: grid;
      width: 33px;
      height: 33px;
      place-items: center;
      border-radius: 50%;
      background: var(--ink);
      color: var(--lime);
      font-size: 18px;
      font-weight: 900;
      animation: about-cursor-bob 2.4s ease-in-out infinite;
    }

    .about-title-wrap {
      position: relative;
      z-index: 3;
      margin: 0;
    }

    .about-title-tag {
      display: inline-block;
      margin: 0 0 13px;
      padding: 6px 9px;
      border-radius: 3px;
      background: var(--lime);
      color: var(--ink);
      font-size: 9px;
      font-weight: 900;
    }

    .about-title-wrap h2 {
      max-width: 900px;
      margin: 0;
      font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
      font-size: clamp(4rem, 5.4vw, 6.6rem);
      font-weight: 900;
      line-height: 0.92;
      letter-spacing: 0;
    }

    .about-title-wrap h2 span {
      box-shadow: inset 0 -0.22em 0 var(--lime);
    }

    .about-character {
      position: absolute;
      z-index: 2;
      right: -2vw;
      bottom: -5vh;
      width: 112%;
      height: 88vh;
      min-height: 580px;
      pointer-events: none;
    }

    .about-character video {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: contain;
      object-position: right bottom;
      filter: saturate(0.98) contrast(1.02);
    }

    .about-contact {
      position: absolute;
      z-index: 5;
      right: 0;
      bottom: 1.5vh;
      display: inline-flex;
      min-height: 42px;
      align-items: center;
      justify-content: center;
      padding: 0 17px;
      border: 1px solid var(--ink);
      border-radius: 4px;
      background: var(--lime);
      color: var(--ink);
      font-size: 11px;
      font-weight: 900;
      transition: transform 180ms ease, background-color 180ms ease;
    }

    .about-contact:hover,
    .about-contact:focus-visible {
      background: var(--white);
      transform: translateY(-2px);
    }

    @keyframes title-enter {
      to { opacity: 1; transform: translate(-50%, 0); }
    }

    @keyframes character-enter {
      to { opacity: 1; transform: translateY(0) scale(1); }
    }

    @keyframes content-enter {
      to { opacity: 1; transform: translateY(0); }
    }

    @keyframes about-cursor-bob {
      0%, 100% { transform: translate(0, 0); }
      50% { transform: translate(3px, -3px); }
    }

    @keyframes simple-fade {
      to { opacity: 1; }
    }

    @media (min-width: 1600px) {
      .hero-title { font-size: clamp(5.2rem, 6vw, 7.5rem); }
      .intro-copy { width: 390px; }
      .intro-copy h2 { font-size: 24px; }
      .profile { width: 310px; }
      .profile-row { font-size: 13px; }
    }

    @media (max-width: 1180px) {
      :root { --page-pad: 4vw; }
      .hero-title { top: 15vh; font-size: 9.6rem; }
      .character-stage { height: 68vh; }
      .intro-copy { width: 285px; }
      .intro-copy h2 { font-size: 17px; }
      .profile { width: 245px; }
      .nav-right { gap: 24px; }
      .nav-links { gap: 21px; }
    }

    @media (max-width: 820px) {
      :root { --page-pad: 24px; --nav-height: 64px; }
      .site-nav { padding: 0 20px; }
      .brand-name { font-size: 12px; }
      .nav-links { display: none; }
      .nav-right { gap: 0; }
      .grab-button { min-height: 32px; padding: 0 13px; font-size: 12px; }
      .hero { min-height: 620px; }
      .hero-title { top: 13.5vh; font-size: 6.2rem; }
      .character-stage { bottom: 0; height: 66vh; }
      .character-video { max-width: none; }
      .intro-copy { bottom: 23vh; width: 230px; }
      .intro-copy h2 { font-size: 15px; }
      .profile { top: 48%; width: 220px; }
      .profile-row { grid-template-columns: 64px 1fr; gap: 8px; font-size: 11px; }
      .hero-footer { display: none; }
      .projects-heading h2 { font-size: 4.4rem; }
      .projects-character { width: 240px; height: 39vh; }
      .carousel-shell { height: 53vh; }
      .project-card { width: clamp(155px, 21vw, 195px); }
      .about-decoration { font-size: 11rem; }
      .about-layout { grid-template-columns: minmax(0, 1fr) minmax(360px, 0.82fr); gap: 2.5vw; }
      .about-left { padding-top: 3vh; }
      .about-interactive { top: 22%; right: 3%; width: min(320px, 34vw); }
      .about-copy h3 { font-size: 31px; }
      .about-body { font-size: 12px; column-gap: 24px; }
      .about-title-wrap h2 { font-size: 3.8rem; }
      .about-character { right: -8vw; width: 123%; }
      .cases-watermark { font-size: 10rem; }
      .cases-character { width: 145px; }
      .case-card { width: 72vw; }
      .contact-card { width: min(330px, 29vw); }
      .contact-layout { grid-template-columns: minmax(260px, 0.56fr) minmax(470px, 1.44fr); gap: 2vw; }
      .contact-copy { padding-right: 5vw; padding-left: 5vw; }
    }

    @media (max-width: 560px) {
      :root { --page-pad: 17px; }
      .brand { gap: 8px; }
      .brand-mark { width: 29px; height: 29px; }
      .hero-title { top: 12.5vh; font-size: 4.5rem; line-height: 0.83; }
      .character-stage { left: 50%; width: 115vw; height: 60vh; transform: translateX(-62%); }
      .intro-copy { top: 22.5%; bottom: auto; left: 17px; width: 44vw; }
      .eyebrow { margin-bottom: 8px; font-size: 8px; }
      .intro-copy h2 { font-size: 12px; line-height: 1.45; }
      .profile { top: 50%; right: 10px; width: 34vw; padding-left: 10px; transform: none; }
      .profile-row { grid-template-columns: 1fr; gap: 1px; margin-bottom: 6px; font-size: 8px; }
      .profile-label { font-size: 7.5px; }
      .hero-actions { right: 17px; bottom: 20px; left: 17px; gap: 7px; }
      .pill-button { min-height: 38px; flex: 1; padding: 0 10px; font-size: 10px; }
      .next-section { min-height: 700px; padding: 92px 17px 18px; }
      .projects-heading { width: 82vw; }
      .projects-heading h2 { font-size: 3.25rem; }
      .projects-heading p { max-width: 235px; margin-top: 14px; font-size: 12px; }
      .projects-character { top: 13vh; right: -29px; width: 185px; height: 31vh; min-height: 220px; }
      .carousel-shell { bottom: 4vh; height: 51vh; min-height: 360px; }
      .project-card { width: 150px; }
      .card-index { font-size: 30px; }
      .carousel-controls { right: 17px; bottom: 13px; }
      .carousel-button { width: 38px; height: 38px; }
      .carousel-hint { bottom: 24px; left: 17px; max-width: 120px; line-height: 1.45; }
      .about-section { min-height: 1280px; padding: 88px 17px 34px; }
      .about-decoration { top: 76px; left: 50%; font-size: 5.5rem; }
      .about-layout { display: flex; min-height: 0; flex-direction: column; gap: 18px; }
      .about-left { order: 1; padding: 22px 0 0; }
      .about-title-wrap { margin: 0; }
      .about-title-wrap h2 { max-width: 350px; font-size: 2.75rem; }
      .about-copy { margin-top: 48px; }
      .about-visual { order: 2; min-height: 420px; }
      .about-interactive { top: 2%; right: 17px; left: 17px; width: auto; padding: 15px 16px 17px; transform: rotate(0deg); }
      .about-interactive-topic { margin-top: 16px; font-size: 22px; }
      .about-interactive-detail { font-size: 11px; }
      .about-character { right: -75px; bottom: -34px; width: 135%; height: 405px; min-height: 0; }
      .about-contact { right: auto; bottom: 10px; left: 0; }
      .about-copy { max-width: none; padding-bottom: 0; transform: none; }
      .about-copy h3 { margin-bottom: 16px; font-size: 29px; }
      .about-body { columns: 1; font-size: 12px; line-height: 1.68; }
      .cases-section { min-height: 850px; }
      .cases-watermark { top: 66px; font-size: 5rem; }
      .cases-character { top: 70px; width: 105px; height: 142px; min-height: 0; }
      .cases-header { top: 215px; right: 17px; left: 17px; padding-bottom: 13px; }
      .cases-title-group h2 { font-size: 31px; }
      .cases-title-group p { font-size: 8px; }
      .cases-header-controls { gap: 6px; }
      .cases-count { min-width: 48px; }
      .cases-button { width: 34px; height: 34px; }
      .cases-viewport { top: 292px; bottom: 56px; }
      .case-card { width: 82vw; height: 480px; min-height: 0; grid-template-columns: 1fr; grid-template-rows: 44% 56%; }
      .case-copy { padding: 22px; }
      .case-overline { margin-bottom: 12px; }
      .case-copy h3 { font-size: 29px; }
      .case-copy > p:not(.case-overline) { margin-top: 10px; font-size: 10px; }
      .case-meta { margin-top: 12px; }
      .case-visual { margin: 0 14px 14px; }
      .case-placeholder-title { font-size: 34px; }
      .case-number { font-size: 10rem; }
      .contact-section { min-height: 980px; padding: 0 17px; }
      .contact-layout { display: flex; min-height: 980px; flex-direction: column; gap: 0; justify-content: center; }
      .contact-card { width: min(300px, 78vw); margin: 70px auto 0; }
      .contact-card-copy { top: 25px; right: 24px; left: 24px; }
      .contact-card-copy em { font-size: 17px; }
      .contact-card-copy strong { font-size: 38px; }
      .contact-card-orbit { top: 148px; right: -34px; width: 290px; height: 290px; }
      .contact-card-orbit::before { width: 246px; height: 246px; }
      .contact-card-orbit::after { width: 202px; height: 202px; }
      .contact-copy { order: -1; width: 100%; padding: 55px 0 0; }
      .contact-copy::before { inset: 30px -30vw -80px -30vw; border-radius: 0; }
      .contact-copy h2 { font-size: 3.25rem; }
      .contact-lead { font-size: 12px; }
      .contact-actions { flex-wrap: wrap; }
      .contact-input { width: calc(100% - 98px); }
    }

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

    .tvc-section { position: relative; min-height: 100vh; padding: 12vh 6vw 10vh; background: #d8ee72; color: var(--ink); overflow: hidden; }
    .tvc-section::before { content: "04"; position: absolute; top: 3vh; right: 5vw; font: 800 clamp(7rem, 18vw, 16rem)/.8 var(--font-display); letter-spacing: -.04em; color: rgba(255,255,255,.34); pointer-events: none; }
    .tvc-layout { position: relative; z-index: 1; max-width: 1280px; margin: 0 auto; }
    .tvc-heading { max-width: 760px; margin-bottom: clamp(38px, 6vh, 76px); }
    .tvc-kicker { display: inline-flex; align-items: center; gap: 10px; font: 700 11px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; }
    .tvc-kicker::before { content: ""; width: 34px; height: 2px; background: currentColor; }
    .tvc-heading h2 { margin: 18px 0 14px; font: 800 clamp(2.5rem, 6vw, 6rem)/.95 var(--font-display); letter-spacing: 0; text-transform: uppercase; }
    .tvc-heading p { max-width: 520px; margin: 0; font-size: clamp(14px, 1.4vw, 18px); line-height: 1.7; }
    .tvc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(34px, 5vw, 68px) clamp(20px, 4vw, 56px); }
    .tvc-item { min-width: 0; }
    .tvc-item:nth-child(3) { grid-column: auto; width: 100%; justify-self: stretch; }
    .tvc-item-title { margin: 0 0 13px; font: 800 clamp(16px, 1.5vw, 22px)/1.15 var(--font-display); letter-spacing: 0; text-transform: uppercase; }
    .tvc-item-title::before { content: attr(data-index); margin-right: 10px; font: 700 10px/1 var(--font-mono); vertical-align: middle; }
    .tvc-card-placeholder { display: grid; place-items: center; color: rgba(23,22,28,.46); background: rgba(255,255,255,.34); border-color: rgba(23,22,28,.28); cursor: default; }
    .tvc-card-placeholder span:first-child { font: 600 10px/1 var(--font-mono); letter-spacing: .12em; }
    .tvc-item-title.is-below { margin: 13px 0 0; }
    .tvc-card { display: block; width: 100%; position: relative; aspect-ratio: 16 / 9; overflow: hidden; border: 2px solid var(--ink); background: #101827; color: #fff; cursor: pointer; transition: transform 320ms cubic-bezier(.2,.75,.2,1), box-shadow 320ms ease; }
    .tvc-card:hover, .tvc-card:focus-visible { transform: translateY(-8px) rotate(-1deg); box-shadow: 14px 14px 0 rgba(23,22,28,.18); outline: none; }
    .tvc-item:nth-child(2) .tvc-card:hover, .tvc-item:nth-child(2) .tvc-card:focus-visible { transform: translateY(-8px) rotate(1deg); }
    .tvc-card::before { content: "PLAY WHEN READY"; position: absolute; inset: 0; display: grid; place-items: center; font: 700 clamp(13px, 1.4vw, 18px)/1 var(--font-mono); letter-spacing: .12em; color: rgba(255,255,255,.72); background: repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 2px, transparent 2px 12px); }
    .tvc-card-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 650ms cubic-bezier(.2,.75,.2,1), filter 320ms ease; }
    .tvc-card.has-video::before { content: ""; z-index: 1; background: rgba(0,0,0,.16); }
    .tvc-card.has-video::after { content: "▶"; position: absolute; z-index: 2; top: 50%; left: 50%; width: 62px; height: 62px; display: grid; place-items: center; padding-left: 4px; border: 2px solid #fff; border-radius: 50%; background: #c9ff38; color: #17161c; font-size: 19px; transform: translate(-50%,-50%); transition: transform 260ms ease, background 260ms ease; }
    .tvc-card.has-video:hover .tvc-card-media, .tvc-card.has-video:focus-visible .tvc-card-media { transform: scale(1.045); filter: saturate(1.08); }
    .tvc-card.has-video:hover::after, .tvc-card.has-video:focus-visible::after { transform: translate(-50%,-50%) scale(1.12); background: #fff; }
    .tvc-card-label { position: absolute; left: 18px; bottom: 16px; z-index: 1; font: 700 12px/1 var(--font-mono); letter-spacing: .1em; }
    .tvc-card-index { position: absolute; top: 16px; right: 18px; z-index: 1; font: 800 28px/1 var(--font-display); }
    @media (max-width: 760px) { .tvc-section { padding: 11vh 17px 8vh; } .tvc-grid { grid-template-columns: 1fr; gap: 30px; } .tvc-item:nth-child(3) { grid-column: auto; width: 100%; } .tvc-heading h2 { font-size: clamp(2.2rem, 12vw, 4rem); } }
    /* Refined TVC editorial cards */
    .cases-title-group p { margin-bottom: 12px; color: rgba(23,22,28,.56); font-size: 10px; font-weight: 500; letter-spacing: .08em; text-transform: none; opacity: 1; }
    .cases-title-group h2 { max-width: 760px; font-size: clamp(25px, 3.2vw, 48px); font-weight: 700; line-height: .98; letter-spacing: .015em; }
    .cases-title-group p { margin-bottom: 14px; color: rgba(23,22,28,.7); font-size: clamp(15px, 1.35vw, 20px); font-weight: 600; line-height: 1.45; letter-spacing: .02em; text-transform: none; opacity: 1; }
    @media (max-width: 760px) { .cases-title-group p { margin-bottom: 11px; font-size: 14px; line-height: 1.45; } }

    @media (max-width: 760px) { .cases-title-group h2 { max-width: 260px; font-size: 27px; line-height: 1.02; } .cases-title-group p { font-size: 9px; } }
    .contact-copy h2 .float-line { display: block; }
    .contact-copy h2 .float-line i { display: inline-block; font-style: normal; transform: translateY(0) rotate(0); transition: transform 420ms cubic-bezier(.2,.8,.2,1), color 260ms ease; }
    .contact-copy h2:hover .float-line i:nth-child(4n + 1) { transform: translateY(-9px) rotate(-3deg); }
    .contact-copy h2:hover .float-line i:nth-child(4n + 2) { transform: translateY(-16px) rotate(2deg); }
    .contact-copy h2:hover .float-line i:nth-child(4n + 3) { transform: translateY(-6px) rotate(4deg); }
    .contact-copy h2:hover .float-line i:nth-child(4n) { transform: translateY(-12px) rotate(-2deg); }
    .contact-copy h2:hover .float-line i { animation: contact-glyph-drift 2.8s ease-in-out infinite; animation-delay: calc(var(--glyph-delay, 0) * 70ms); }
    .contact-copy h2 .float-line i:nth-child(1) { --glyph-delay: 1; } .contact-copy h2 .float-line i:nth-child(2) { --glyph-delay: 2; } .contact-copy h2 .float-line i:nth-child(3) { --glyph-delay: 3; } .contact-copy h2 .float-line i:nth-child(4) { --glyph-delay: 4; } .contact-copy h2 .float-line i:nth-child(5) { --glyph-delay: 5; } .contact-copy h2 .float-line i:nth-child(6) { --glyph-delay: 6; } .contact-copy h2 .float-line i:nth-child(7) { --glyph-delay: 7; } .contact-copy h2 .float-line i:nth-child(8) { --glyph-delay: 8; } .contact-copy h2 .float-line i:nth-child(9) { --glyph-delay: 9; } .contact-copy h2 .float-line i:nth-child(10) { --glyph-delay: 10; } .contact-copy h2 .float-line i:nth-child(11) { --glyph-delay: 11; } .contact-copy h2 .float-line i:nth-child(12) { --glyph-delay: 12; } .contact-copy h2 .float-line i:nth-child(13) { --glyph-delay: 13; } .contact-copy h2 .float-line i:nth-child(14) { --glyph-delay: 14; } .contact-copy h2 .float-line i:nth-child(15) { --glyph-delay: 15; } .contact-copy h2 .float-line i:nth-child(16) { --glyph-delay: 16; } .contact-copy h2 .float-line i:nth-child(17) { --glyph-delay: 17; } .contact-copy h2 .float-line i:nth-child(18) { --glyph-delay: 18; } .contact-copy h2 .float-line i:nth-child(19) { --glyph-delay: 19; }
    @keyframes contact-glyph-drift { 0%, 100% { translate: 0 0; } 50% { translate: 0 -4px; } }
    @media (prefers-reduced-motion: reduce) { .contact-copy h2:hover .float-line i { animation: none; transform: none; } }
    /* Enlarge case character and carousel controls */
    .cases-character { top: calc(var(--nav-height) + 12px); right: 24%; left: auto; width: min(220px, 18vw); height: 27vh; min-height: 210px; }
    .cases-header-controls { gap: 16px; }
    .cases-count { min-width: 72px; font-size: 13px; letter-spacing: .08em; }
    .cases-button { width: 54px; height: 54px; border-width: 1px; font-size: 22px; transition: transform 220ms var(--ease-ui), background-color 220ms ease, box-shadow 220ms ease; }
    .cases-button:hover, .cases-button:focus-visible { transform: translateY(-4px) scale(1.08); background: var(--lime); box-shadow: 0 8px 18px rgba(23,22,28,.14); }
    .cases-button:active { transform: translateY(-1px) scale(.96); }
    @media (max-width: 760px) { .cases-character { top: 62px; right: 50%; left: auto; width: 170px; height: 220px; min-height: 0; transform: translateX(50%); } .cases-header-controls { gap: 9px; } .cases-count { min-width: 58px; font-size: 11px; } .cases-button { width: 46px; height: 46px; font-size: 18px; } }
    /* Refined third-act case cards */
    .cases-section { background: #f7f7f4; }
    .cases-header { border-bottom-color: rgba(23,22,28,.22); }
    .case-card { border: 1px solid rgba(23,22,28,.16); border-radius: 2px; background: #fff !important; color: #17161c !important; box-shadow: 0 16px 36px rgba(23,22,28,.08); }
    .case-card::after { display: none; }
    .case-card:hover { filter: none; }
    .case-copy { padding: clamp(28px, 3.4vw, 52px); }
    .case-overline { margin-bottom: 30px; color: rgba(23,22,28,.52); opacity: 1; letter-spacing: .1em; }
    .case-copy h3 { font-size: clamp(28px, 3vw, 48px); line-height: .98; letter-spacing: -.01em; }
    .case-copy > p:not(.case-overline) { margin-top: 24px; color: rgba(23,22,28,.68); line-height: 1.7; opacity: 1; }
    .case-meta { border-top-color: rgba(23,22,28,.35); color: rgba(23,22,28,.62); opacity: 1; }
    .case-watch-link { align-self: flex-start; margin-top: 28px; border-bottom-color: rgba(23,22,28,.65); color: #17161c; }
    .case-visual { margin: 18px 18px 18px 0; border: 1px solid rgba(23,22,28,.18); border-radius: 2px; background: #f1f1ed; box-shadow: none; transition: border-color 260ms ease; }
    .case-card:hover .case-visual { transform: none; box-shadow: none; border-color: rgba(23,22,28,.65); }
    .case-card:hover .case-cover, .case-card:hover .case-video, .case-card[data-active="true"] .case-video { transform: scale(1.018); filter: none; }
    .case-browser-bar { background: rgba(255,255,255,.84); border-bottom-color: rgba(23,22,28,.12); }
    .case-visual.has-video::after { right: 12px; bottom: 12px; border: 1px solid rgba(255,255,255,.72); border-radius: 2px; background: rgba(23,22,28,.72); font-size: 8px; }
    .case-full-trigger { border-radius: 50%; background: rgba(255,255,255,.94); color: #17161c; box-shadow: 0 4px 14px rgba(0,0,0,.14); }
    .case-number { color: rgba(23,22,28,.34); }
    @media (max-width: 760px) { .case-card { box-shadow: 0 10px 24px rgba(23,22,28,.08); } .case-copy { padding: 22px; } .case-visual { margin: 0 14px 14px; } }
    .tvc-section { min-height: 132vh; background: #e5efb8; }
    .tvc-heading { margin-bottom: clamp(42px, 7vh, 82px); }
    .tvc-grid { gap: clamp(52px, 7vw, 90px) clamp(28px, 4vw, 58px); }
    .tvc-item { position: relative; }
    .tvc-item-title { display: flex; align-items: center; min-height: 32px; margin: 0 0 16px; padding-top: 12px; border-top: 1px solid rgba(23,22,28,.65); font: 600 clamp(14px, 1.2vw, 18px)/1.2 var(--font-display); letter-spacing: 0; text-transform: none; }
    .tvc-item-title::before { min-width: 28px; margin-right: 12px; color: rgba(23,22,28,.55); font: 600 9px/1 var(--font-mono); }
    .tvc-item-title.is-below { margin: 16px 0 0; padding-top: 12px; }
    .tvc-card { border: 1px solid rgba(23,22,28,.38); border-radius: 2px; background: #161616; box-shadow: none; transform: none; }
    .tvc-card:hover, .tvc-card:focus-visible, .tvc-item:nth-child(2) .tvc-card:hover, .tvc-item:nth-child(2) .tvc-card:focus-visible { transform: none; box-shadow: none; border-color: rgba(23,22,28,.9); }
    .tvc-card.has-video::before { background: rgba(0,0,0,.08); transition: background 320ms ease; }
    .tvc-card.has-video:hover::before, .tvc-card.has-video:focus-visible::before { background: rgba(0,0,0,.02); }
    .tvc-card.has-video::after { width: 44px; height: 44px; padding-left: 2px; border: 1px solid rgba(255,255,255,.86); border-radius: 50%; background: rgba(12,12,12,.78); color: #fff; font-size: 13px; backdrop-filter: blur(2px); }
    .tvc-card.has-video:hover::after, .tvc-card.has-video:focus-visible::after { transform: translate(-50%,-50%) scale(1.06); background: #111; }
    .tvc-card.has-video:hover .tvc-card-media, .tvc-card.has-video:focus-visible .tvc-card-media { transform: scale(1.025); filter: saturate(1.03); }
    .tvc-card-index { top: 13px; right: 14px; padding: 5px 7px; background: rgba(12,12,12,.72); color: #fff; font: 600 9px/1 var(--font-mono); }
    .tvc-card-label { left: 14px; bottom: 13px; padding: 6px 8px; background: rgba(12,12,12,.72); color: #fff; font: 600 9px/1 var(--font-mono); letter-spacing: .08em; }
    @media (max-width: 760px) { .tvc-section { min-height: auto; } .tvc-grid { gap: 42px; } .tvc-item-title { margin-bottom: 12px; } .tvc-item-title.is-below { margin-top: 12px; } }
    /* Two-row case carousel: each horizontal step contains two 16:9 cards. */
    .cases-section {
      height: 100vh;
      min-height: 720px;
      overflow: hidden;
    }

    .cases-viewport {
      top: 31vh;
      right: 0;
      bottom: 6vh;
      left: 0;
      overflow: hidden;
      cursor: grab;
      touch-action: pan-y;
    }

    .case-card {
      top: 0;
      left: 0;
      width: clamp(330px, 35vw, 520px);
      height: auto;
      min-height: 0;
      aspect-ratio: 16 / 9;
      transform-origin: center;
      transition: transform 620ms cubic-bezier(0.18, 0.76, 0.22, 1), opacity 420ms ease, filter 240ms ease;
    }

    .cases-character {
      top: calc(var(--nav-height) + 6px);
      right: 6vw;
      left: auto;
      width: min(150px, 13vw);
      height: 18vh;
      min-height: 150px;
      transform: none;
    }

    .case-card[data-active="true"] {
      filter: saturate(1.04);
    }

    .case-video {
      pointer-events: none;
    }

    .case-embed-frame {
      pointer-events: none;
    }

    .case-backup-link {
      position: relative;
      z-index: 3;
    }

    .case-youtube-trigger {
      position: absolute;
      z-index: 7;
      inset: 0;
      display: grid;
      place-items: center;
      cursor: pointer;
      text-decoration: none;
    }

    .case-youtube-trigger::after {
      content: "\25B6";
      display: grid;
      width: 58px;
      height: 58px;
      place-items: center;
      padding-left: 4px;
      border: 2px solid #fff;
      border-radius: 50%;
      background: rgba(18, 18, 22, 0.72);
      color: #fff;
      font-size: 19px;
      box-shadow: 0 8px 24px rgba(18, 18, 22, 0.2);
      transition: transform 220ms ease, background-color 220ms ease;
    }

    .case-youtube-trigger:hover::after,
    .case-youtube-trigger:focus-visible::after {
      transform: scale(1.1);
      background: #17161c;
    }

    .case-watch-link {
      position: relative;
      z-index: 9;
      display: inline-flex;
      align-items: center;
      align-self: flex-start;
      gap: 8px;
      margin-top: 18px;
      color: inherit;
      font-size: 11px;
      font-weight: 800;
      text-decoration: none;
      text-transform: uppercase;
      border-bottom: 1px solid currentColor;
    }

    .case-watch-link::after {
      content: "\2197";
      font-size: 14px;
    }

    .cases-signal {
      position: absolute;
      z-index: 2;
      top: 56%;
      right: 0;
      left: 0;
      height: 104px;
      overflow: hidden;
      border-top: 1px solid rgba(23, 22, 28, 0.12);
      border-bottom: 1px solid rgba(23, 22, 28, 0.12);
      color: rgba(23, 22, 28, 0.46);
      pointer-events: none;
    }

    .cases-signal::before,
    .cases-signal::after {
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      left: 50%;
      width: 1px;
      background: rgba(23, 22, 28, 0.18);
      transform: translateX(-50%);
    }

    .cases-signal::after {
      top: 50%;
      right: 0;
      bottom: auto;
      left: 0;
      width: auto;
      height: 1px;
      background: rgba(23, 22, 28, 0.12);
      transform: translateY(-50%);
    }

    .cases-signal-label {
      position: absolute;
      top: 12px;
      left: var(--page-pad);
      font-size: 9px;
      font-weight: 900;
      letter-spacing: 0.14em;
      text-transform: uppercase;
    }

    .cases-signal-index {
      position: absolute;
      right: var(--page-pad);
      bottom: 10px;
      font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
      font-size: 28px;
      line-height: 0.8;
      letter-spacing: 0.04em;
    }

    .cases-signal-cursor {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 12px;
      height: 12px;
      border: 2px solid var(--purple);
      border-radius: 50%;
      background: var(--lime);
      box-shadow: 0 0 0 7px rgba(118, 105, 232, 0.1), 0 0 0 14px rgba(118, 105, 232, 0.05);
      transform: translate(-50%, -50%);
      animation: cases-signal-ping 2.4s ease-in-out infinite;
    }

    .cases-signal-tick {
      position: absolute;
      top: 50%;
      width: 7px;
      height: 7px;
      border: 1px solid currentColor;
      border-radius: 50%;
      opacity: 0.45;
      transform: translateY(-50%);
    }

    .cases-signal-tick:nth-of-type(1) { left: 18%; }
    .cases-signal-tick:nth-of-type(2) { left: 30%; }
    .cases-signal-tick:nth-of-type(3) { left: 70%; }
    .cases-signal-tick:nth-of-type(4) { left: 82%; }

    @keyframes cases-signal-ping {
      0%, 100% { opacity: 0.72; transform: translate(-50%, -50%) scale(0.8); }
      50% { opacity: 1; transform: translate(-50%, -50%) scale(1.15); }
    }

    @media (max-width: 760px) {
      .cases-section { min-height: 680px; }
      .cases-viewport { top: 29vh; bottom: 8vh; }
      .case-card { width: min(76vw, 430px); }
      .cases-character { top: 70px; right: 24px; left: auto; width: 122px; height: 150px; min-height: 0; transform: none; }
    }

    @media (max-width: 560px) {
      .cases-section { min-height: 650px; }
      .cases-viewport { top: 28vh; bottom: 8vh; }
      .case-card { width: min(86vw, 390px); }
      .case-copy { padding: 18px; }
      .case-copy h3 { font-size: clamp(22px, 7vw, 30px); }
      .case-copy > p:not(.case-overline) { margin-top: 12px; font-size: 10px; }
      .case-meta { gap: 6px; padding-top: 8px; font-size: 8px; }
      .cases-character { top: 70px; right: 17px; width: 105px; height: 142px; }
    }

    /* Poster-like case cards: the visual language follows the second-act project cards. */
    .case-card {
      display: block;
      border-radius: 8px;
      isolation: isolate;
      background: var(--case-bg, #d8cab0);
      box-shadow: 0 12px 0 rgba(23, 22, 28, 0.08);
    }

    .case-card::before {
      content: "";
      position: absolute;
      z-index: 3;
      top: 44%;
      left: 56%;
      width: 32%;
      aspect-ratio: 1;
      border: 2px solid currentColor;
      border-radius: 50%;
      opacity: 0.18;
      transform: translate(-50%, -50%);
      pointer-events: none;
    }

    .case-card::after {
      inset: 10px;
      z-index: 7;
      border-radius: 5px;
      opacity: 0;
    }

    .case-card:hover::after,
    .case-card[data-active="true"]::after {
      opacity: 0.2;
    }

    .case-copy {
      position: absolute;
      z-index: 5;
      inset: 0;
      display: block;
      padding: clamp(16px, 2vw, 26px);
      color: var(--case-ink, #18171d);
      pointer-events: none;
    }

    .case-overline {
      position: absolute;
      top: 9%;
      right: 8%;
      left: auto;
      margin: 0;
      font-size: clamp(9px, 0.8vw, 12px);
      font-weight: 900;
      letter-spacing: 0.03em;
      opacity: 0.76;
      text-align: right;
    }

    .case-copy h3 {
      position: absolute;
      top: 31%;
      left: 8%;
      max-width: 66%;
      margin: 0;
      font-size: clamp(22px, 2.6vw, 38px);
      line-height: 0.98;
      letter-spacing: 0;
      text-transform: uppercase;
    }

    .case-copy > p:not(.case-overline) {
      position: absolute;
      right: 8%;
      bottom: 19%;
      left: 8%;
      max-width: none;
      margin: 0;
      font-size: clamp(9px, 0.9vw, 12px);
      line-height: 1.4;
      opacity: 0.72;
    }

    .case-meta {
      position: absolute;
      right: 8%;
      bottom: 7%;
      left: 8%;
      display: flex;
      justify-content: space-between;
      gap: 12px;
      margin: 0;
      border-top: 1px solid currentColor;
      padding-top: 8px;
      font-size: clamp(7px, 0.65vw, 10px);
      line-height: 1.2;
      opacity: 0.78;
    }

    .case-card:nth-child(3) .case-copy h3 {
      max-width: 72%;
      font-size: clamp(20px, 2.35vw, 34px);
      line-height: 0.94;
    }

    /* Final carousel pass: use the second-act perspective motion, with two rows per step. */
    .case-card {
      top: 50%;
      left: 50%;
      display: grid;
      width: min(44vw, 560px);
      height: auto;
      aspect-ratio: 16 / 9;
      grid-template-columns: 40% 60%;
      border: 1px solid rgba(23, 22, 28, 0.16);
      border-radius: 8px;
      background: var(--case-bg, #d8cab0);
      box-shadow: 0 12px 0 rgba(23, 22, 28, 0.08);
    }

    .case-copy {
      position: relative;
      inset: auto;
      display: flex;
      flex-direction: column;
      padding: clamp(16px, 2vw, 26px);
      pointer-events: none;
    }

    .case-overline {
      position: static;
      margin: 0 0 12px;
      text-align: left;
    }

    .case-copy h3 {
      position: static;
      max-width: 100%;
      font-size: clamp(20px, 2.3vw, 34px);
      line-height: 1;
    }

    .case-copy > p:not(.case-overline) {
      position: static;
      max-width: 100%;
      margin: 12px 0 0;
      font-size: clamp(9px, 0.78vw, 11px);
      line-height: 1.42;
    }

    .case-meta {
      position: static;
      margin-top: auto;
      padding-top: 8px;
      font-size: clamp(7px, 0.6vw, 9px);
    }

    .case-visual {
      position: relative;
      inset: auto;
      margin: 16px 16px 16px 0;
      border: 1px solid rgba(23, 22, 28, 0.14);
      border-radius: 6px;
      background: var(--case-panel, #f0ece3);
    }

    .case-video,
    .case-cover {
      inset: 30px 0 0;
      width: 100%;
      height: calc(100% - 30px);
      opacity: 0.9;
      filter: saturate(1.02) contrast(1.02);
    }

    .case-embed-wrap { inset: 30px 0 0; }

    .case-number {
      top: auto;
      right: 7%;
      bottom: 5%;
      left: auto;
      font-size: clamp(48px, 5vw, 74px);
      opacity: 0.13;
    }

    .case-card::before {
      top: 47%;
      left: 76%;
      width: 22%;
      opacity: 0.16;
    }

    .case-visual::before,
    .case-visual::after {
      display: none;
    }

    @media (max-width: 760px) {
      .case-card { width: min(72vw, 470px); }
    }

    @media (max-width: 560px) {
      .case-card {
        width: min(86vw, 390px);
        grid-template-columns: 42% 58%;
      }
      .case-copy { padding: 13px; }
      .case-overline { margin-bottom: 8px; font-size: 8px; }
      .case-copy h3 { font-size: clamp(18px, 6vw, 27px); }
      .case-copy > p:not(.case-overline) { margin-top: 8px; font-size: 9px; }
      .case-visual { margin: 11px 11px 11px 0; }
    }

    /* Cases follow the second-act single-row ring carousel. */
    .cases-viewport { perspective: 1150px; }
    .case-card {
      top: 50%;
      left: 50%;
      display: block;
      width: clamp(250px, 31vw, 440px);
      aspect-ratio: 16 / 9;
      border: 1px solid rgba(255, 255, 255, 0.62);
      border-radius: 8px;
      background: var(--case-bg, #d8cab0);
      box-shadow: none;
      transition: transform 620ms cubic-bezier(0.18, 0.76, 0.22, 1), opacity 420ms ease, filter 420ms ease;
    }

    .case-card:hover {
      filter: saturate(1.16) brightness(1.04) drop-shadow(0 12px 18px rgba(24, 23, 29, 0.18));
    }

    .case-copy {
      position: absolute;
      z-index: 5;
      inset: 0;
      display: block;
      padding: 16px;
      color: var(--case-ink, #18171d);
    }

    .case-overline {
      position: absolute;
      top: 17px;
      right: 16px;
      left: auto;
      margin: 0;
      font-size: 9px;
      text-align: right;
    }

    .case-copy h3 {
      position: absolute;
      right: 8%;
      bottom: 17%;
      left: 8%;
      max-width: 84%;
      margin: 0;
      font-size: clamp(22px, 2.35vw, 36px);
      line-height: 0.96;
      text-transform: uppercase;
    }

    .case-copy > p:not(.case-overline) {
      position: absolute;
      right: 8%;
      bottom: 7%;
      left: 8%;
      max-width: 84%;
      margin: 0;
      overflow: hidden;
      font-size: 9px;
      line-height: 1.35;
      opacity: 0.68;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .case-meta { display: none; }

    .case-visual {
      position: absolute;
      z-index: 1;
      inset: 0;
      margin: 0;
      border: 0;
      border-radius: 7px;
      background: transparent;
    }

    .case-visual::before {
      content: "+";
      position: absolute;
      z-index: 4;
      top: 40%;
      left: 50%;
      color: currentColor;
      font-family: Arial, sans-serif;
      font-size: clamp(76px, 9vw, 132px);
      font-weight: 200;
      line-height: 0.7;
      opacity: 0.86;
      transform: translate(-50%, -50%);
      pointer-events: none;
    }

    .case-visual::after {
      content: "";
      position: absolute;
      z-index: 3;
      top: 40%;
      left: 50%;
      width: 28%;
      aspect-ratio: 1;
      border: 2px solid currentColor;
      border-radius: 50%;
      opacity: 0.18;
      transform: translate(-50%, -50%);
      pointer-events: none;
    }

    .case-video,
    .case-cover {
      inset: 0;
      width: 100%;
      height: 100%;
      opacity: 1;
      object-fit: cover;
      filter: saturate(0.95) contrast(1.02);
    }

    .case-browser-bar { display: none; }

    .case-number {
      top: 16px;
      right: auto;
      bottom: auto;
      left: 16px;
      z-index: 6;
      color: currentColor;
      font-size: clamp(36px, 4.8vw, 66px);
      line-height: 0.8;
      opacity: 0.96;
    }

    .case-visual.has-video::after {
      content: "";
      top: 40%;
      right: auto;
      bottom: auto;
      left: 50%;
      width: 28%;
      height: auto;
      padding: 0;
      border: 2px solid currentColor;
      border-radius: 50%;
      background: transparent;
      opacity: 0.18;
      transform: translate(-50%, -50%);
    }

    .case-card:hover .case-video,
    .case-card:hover .case-cover { opacity: 1; transform: scale(1.035); }

    @media (max-width: 560px) {
      .case-card { width: min(69vw, 345px); }
      .case-copy { padding: 12px; }
      .case-overline { top: 13px; right: 12px; font-size: 8px; }
      .case-number { top: 12px; left: 12px; font-size: 42px; }
      .case-copy h3 { bottom: 19%; font-size: clamp(19px, 6vw, 28px); }
      .case-copy > p:not(.case-overline) { bottom: 8%; font-size: 8px; }
    }

    .case-visual {
      position: absolute;
      z-index: 1;
      inset: 0;
      margin: 0;
      border: 0;
      border-radius: 0;
      background: var(--case-panel, #f0ece3);
    }

    .case-visual::before,
    .case-visual::after {
      content: "";
      position: absolute;
      z-index: 4;
      top: 44%;
      left: 56%;
      width: 18%;
      height: 2px;
      background: currentColor;
      opacity: 0.7;
      transform: translate(-50%, -50%);
      pointer-events: none;
    }

    .case-visual::after {
      transform: translate(-50%, -50%) rotate(90deg);
    }

    .case-video,
    .case-cover {
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: 0.23;
      filter: saturate(0.86) contrast(0.98);
    }

    .case-cover {
      position: absolute;
    }

    .case-browser-bar {
      top: 0;
      height: 30px;
      border-bottom-color: rgba(23, 22, 28, 0.18);
      opacity: 0.8;
    }

    .case-browser-bar::before {
      top: 5px;
      left: 12px;
      font-size: 11px;
    }

    .case-number {
      top: 8%;
      right: auto;
      bottom: auto;
      left: 8%;
      z-index: 6;
      color: currentColor;
      font-size: clamp(42px, 5.5vw, 76px);
      line-height: 0.78;
      opacity: 0.9;
    }

    .case-visual.has-video::after {
      top: auto;
      right: 8%;
      bottom: 9%;
      left: auto;
      width: auto;
      height: auto;
      padding: 5px 7px;
      border: 1px solid currentColor;
      border-radius: 3px;
      background: transparent;
      color: currentColor;
      font-size: 7px;
      opacity: 0;
      transform: none;
    }

    .case-card:hover .case-visual.has-video::after,
    .case-card[data-active="true"] .case-visual.has-video::after {
      opacity: 0.78;
    }

    .case-card:hover .case-visual {
      transform: none;
      box-shadow: none;
    }

    .case-card:hover .case-video,
    .case-card:hover .case-cover {
      transform: scale(1.03);
      opacity: 0.31;
    }

    .case-embed-wrap {
      inset: 0;
      background: transparent;
    }

    .case-backup-link {
      position: absolute;
      right: 8%;
      bottom: 2%;
      z-index: 8;
      padding: 0;
      color: currentColor;
      font-size: 7px;
      opacity: 0;
    }

    .case-card:hover .case-backup-link,
    .case-card[data-active="true"] .case-backup-link {
      opacity: 0.8;
    }
    /* Restore split case cards and move the carousel lower to leave breathing room above. */
    .cases-viewport { top: 38vh; bottom: 6vh; }
    .case-card {
      top: 50%; left: 50%; display: grid; width: min(66vw, 940px); height: min(42vh, 410px); min-height: 320px;
      aspect-ratio: auto; grid-template-columns: 40% 60%; overflow: hidden; border-radius: 8px;
      background: var(--case-bg, #d8cab0); color: var(--case-ink, #18171d); box-shadow: 0 12px 0 rgba(23,22,28,.08);
    }
    .case-copy { position: relative; inset: auto; z-index: 2; display: flex; flex-direction: column; min-width: 0; overflow: hidden; padding: clamp(22px,3vw,42px); color: var(--case-ink,#18171d); pointer-events: none; }
    .case-overline { position: static; margin: 0 0 22px; font-size: 9px; text-align: left; }
    .case-copy h3 { position: static; max-width: 100%; margin: 0; font-size: clamp(26px,2.45vw,40px); line-height: 1.04; }
    .case-copy > p:not(.case-overline) { position: static; max-width: 260px; margin: 20px 0 0; font-size: 12px; line-height: 1.6; white-space: normal; }
    .case-meta { position: static; display: grid; margin-top: auto; grid-template-columns: 1fr 1fr; gap: 10px; border-top: 1px solid currentColor; padding-top: 13px; font-size: 9px; }
    .case-visual { position: relative; inset: auto; z-index: 1; overflow: hidden; margin: 22px 22px 22px 0; border: 1px solid rgba(23,22,28,.14); border-radius: 6px; background: var(--case-panel,#f0ece3); }
    .case-video, .case-cover { inset: 34px 0 0; width: 100%; height: calc(100% - 34px); opacity: 1; object-fit: cover; filter: saturate(1.02) contrast(1.02); }
    .case-embed-wrap { inset: 34px 0 0; }
    .case-browser-bar { display: block; }
    .case-visual::before, .case-visual::after { display: none; }
    .case-number { top: auto; right: 5%; bottom: -10%; left: auto; font-size: 10rem; opacity: .08; }
    @media (max-width: 760px) {
      .cases-viewport { top: 34vh; }
      .case-card { width: 82vw; height: 390px; grid-template-columns: 42% 58%; }
      .case-copy { padding: 20px; }
      .case-copy h3 { font-size: 29px; }
      .case-copy > p:not(.case-overline) { margin-top: 12px; font-size: 10px; }
      .case-visual { margin: 17px 17px 17px 0; }
    }
    @media (max-width: 560px) {
      .cases-viewport { top: 32vh; }
      .case-card { width: 88vw; height: 360px; grid-template-columns: 1fr; grid-template-rows: 44% 56%; }
      .case-copy { padding: 17px; }
      .case-overline { margin-bottom: 10px; }
      .case-copy h3 { font-size: 27px; }
      .case-copy > p:not(.case-overline) { margin-top: 9px; font-size: 9px; }
      .case-meta { margin-top: auto; padding-top: 8px; font-size: 8px; }
      .case-visual { margin: 0 12px 12px; }
    }
  
    .project-card-gallery { cursor: pointer; background: transparent !important; border-color: rgba(255,255,255,.82); }
    .project-card-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 1; mix-blend-mode: normal; transition: transform 500ms ease, opacity 300ms ease; }
    .project-card-gallery:hover .project-card-cover, .project-card-gallery:focus-visible .project-card-cover { opacity: 1; transform: scale(1.06); }
    .project-card-gallery .card-copy { z-index: 4; text-shadow: 0 1px 0 rgba(255,255,255,.45); }
    .origin-gallery { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 5vw; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 260ms ease, visibility 260ms ease; }
    .origin-gallery.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
    .origin-gallery-backdrop { position: absolute; inset: 0; background: rgba(23,22,28,.72); backdrop-filter: blur(7px); }
    .origin-gallery-panel { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(260px, .55fr); width: min(1080px, 92vw); max-height: 88vh; overflow: hidden; border: 1px solid rgba(255,255,255,.55); border-radius: 10px; background: #f2efe8; color: #17161c; box-shadow: 0 24px 70px rgba(0,0,0,.3); transform: translateY(18px) scale(.98); transition: transform 320ms cubic-bezier(.18,.76,.22,1); }
    .origin-gallery.is-open .origin-gallery-panel { transform: translateY(0) scale(1); }
    .origin-gallery-media { min-height: 420px; aspect-ratio: 2736 / 2048; background: #d9d5cd; display: grid; place-items: center; overflow: hidden; }
    .origin-gallery-image { width: 100%; height: 100%; max-height: 88vh; object-fit: contain; display: block; }
    .origin-gallery-info { display: flex; flex-direction: column; gap: 14px; padding: 34px 28px 24px; }
    .origin-gallery-kicker { margin: 0; font-size: 10px; font-weight: 800; letter-spacing: .14em; opacity: .58; }
    .origin-gallery-info h2 { margin: 0; font-size: clamp(28px, 4vw, 48px); line-height: .95; }
    .origin-gallery-note { margin: 0; min-height: 78px; max-height: 34vh; overflow: auto; padding-right: 6px; font-size: 12px; line-height: 1.8; outline: none; }
    .origin-gallery-note:focus { border-bottom: 1px solid currentColor; }
    .origin-gallery-controls { display: flex; align-items: center; justify-content: space-between; margin-top: auto; border-top: 1px solid rgba(23,22,28,.18); padding-top: 16px; }
    .origin-gallery-controls button { width: 34px; height: 34px; border: 1px solid currentColor; border-radius: 50%; background: transparent; cursor: pointer; font-size: 18px; }
    .origin-gallery-count { font-size: 11px; font-weight: 800; letter-spacing: .1em; }
    .origin-gallery-thumbs { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
    .origin-gallery-thumb { aspect-ratio: 1; border: 1px solid transparent; padding: 0; overflow: hidden; background: #ddd; cursor: pointer; }
    .origin-gallery-thumb.is-active { border-color: #17161c; }
    .origin-gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .origin-gallery-close { position: absolute; z-index: 2; top: 12px; right: 14px; width: 34px; height: 34px; border: 1px solid rgba(23,22,28,.3); border-radius: 50%; background: rgba(242,239,232,.8); color: #17161c; font-size: 23px; line-height: 1; cursor: pointer; }
    @media (max-width: 720px) { .origin-gallery { padding: 18px; } .origin-gallery-panel { grid-template-columns: 1fr; max-height: 92vh; overflow: auto; } .origin-gallery-media { min-height: 48vh; } .origin-gallery-info { padding: 22px 20px 20px; } }

    /* Keep portrait project galleries inside the viewport with controls visible. */
    .origin-gallery-panel {
      width: min(1040px, 92vw);
      height: min(720px, 86vh);
      max-height: 86vh;
      grid-template-columns: minmax(0, 1fr) 310px;
    }
    .origin-gallery-media {
      width: 100%;
      height: 100%;
      min-height: 0;
      aspect-ratio: auto !important;
      padding: 18px;
      box-sizing: border-box;
    }
    .origin-gallery-image {
      width: 100%;
      height: 100%;
      max-height: 100%;
      object-fit: contain;
    }
    .origin-gallery-info {
      min-width: 0;
      min-height: 0;
      overflow: hidden;
    }
    .origin-gallery-note {
      min-height: 0;
      max-height: 250px;
      overflow-y: auto;
    }
    .origin-gallery-controls {
      flex: 0 0 auto;
    }
    .origin-gallery-thumbs {
      flex: 0 0 auto;
      grid-template-columns: repeat(6, minmax(0, 1fr));
    }
    @media (max-width: 720px) {
      .origin-gallery-panel {
        height: min(90vh, 760px);
        max-height: 90vh;
        grid-template-columns: 1fr;
        grid-template-rows: minmax(300px, 55vh) auto;
        overflow-y: auto;
      }
      .origin-gallery-media { min-height: 300px; }
      .origin-gallery-info { overflow: visible; }
      .origin-gallery-note { max-height: 150px; }
    }

    /* Project 05 uses the posters' native portrait ratio. */
    .origin-gallery[data-active-set="summer"] .origin-gallery-panel {
      width: min(760px, 92vw);
      grid-template-columns: minmax(300px, 404px) minmax(280px, 320px);
    }
    .origin-gallery[data-active-set="miami"] .origin-gallery-media { width: auto; height: 100%; aspect-ratio: 3 / 4 !important; justify-self: end; padding: 0; }
    .origin-gallery[data-active-set="miami"] .origin-gallery-image { width: 100%; height: 100%; object-fit: contain !important; }
    .origin-gallery[data-active-set="summer"] .origin-gallery-media {
      width: auto;
      height: 100%;
      aspect-ratio: 1904 / 3392 !important;
      justify-self: end;
      padding: 0;
    }
    .origin-gallery[data-active-set="summer"] .origin-gallery-image {
      width: 100%;
      height: 100%;
      object-fit: contain !important;
    }
    @media (max-width: 720px) {
      .origin-gallery[data-active-set="summer"] .origin-gallery-panel {
        width: min(92vw, 460px);
        height: 90vh;
        grid-template-columns: 1fr;
        grid-template-rows: minmax(420px, 62vh) auto;
      }
      .origin-gallery[data-active-set="summer"] .origin-gallery-media {
        width: auto;
        height: 100%;
        justify-self: center;
      }
    }
    /* Contact finale: graphite + mint editorial treatment */
    .contact-section { background: #1d292b; color: #f4f7f2; }
    .contact-section::before { opacity: .16; background-image: linear-gradient(rgba(201,255,56,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(201,255,56,.08) 1px, transparent 1px); background-size: 38px 38px; }
    .contact-watermark { color: rgba(244,247,242,.055); }
    .contact-card { background: #c9ff38; color: #162022; box-shadow: 0 22px 48px rgba(0,0,0,.24); }
    .contact-card::after { border-color: rgba(22,32,34,.28); }
    .contact-copy::before { background: #162022; }
    .contact-copy h2 { font-family: var(--font-display), Arial, "Microsoft YaHei", sans-serif; font-weight: 760; line-height: .92; letter-spacing: .018em; }
    .contact-copy h2 .float-line i { will-change: transform, color; transition: transform 460ms cubic-bezier(.2,.8,.2,1), color 260ms ease; }
    .contact-copy h2:hover .float-line i { color: #c9ff38; }
    .contact-copy h2:hover .float-line-en i:nth-child(3n) { animation: contact-glyph-stream 2.2s ease-in-out infinite; }
    .contact-copy h2:hover .float-line-en i:nth-child(3n + 1) { animation: contact-glyph-stream 2.2s ease-in-out .16s infinite; }
    .contact-copy h2:hover .float-line-en i:nth-child(3n + 2) { animation: contact-glyph-stream 2.2s ease-in-out .32s infinite; }
    @keyframes contact-glyph-stream { 0%,100% { transform: translate3d(0,0,0); } 35% { transform: translate3d(0,-11px,0) rotate(-2deg); } 70% { transform: translate3d(0,3px,0) rotate(1deg); } }
    .contact-lead { color: rgba(244,247,242,.72); }
    .contact-lead strong { color: #f4f7f2; }
    .contact-tag { border-color: rgba(201,255,56,.72); color: #f4f7f2; }
    .contact-input { background: #f4f7f2; }
    .contact-footnote { color: rgba(244,247,242,.5); }
    @media (prefers-reduced-motion: reduce) { .contact-copy h2:hover .float-line-en i { animation: none; } }    /* About scene: quiet sage editorial palette and fluid type interaction */
    .about-section { background: #e7eee8; color: #172322; }
    .about-section::before { background: #f6f4ec; }
    .about-section::after { content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none; background: radial-gradient(circle at 78% 34%, rgba(201,255,56,.16), transparent 28%), linear-gradient(120deg, rgba(255,255,255,.22), transparent 44%); }
    .about-decoration { color: rgba(23,35,34,.075); }
    .about-title-tag { background: #172322; color: #e7eee8; }
    .about-title-wrap h2 { font-family: var(--font-display), Arial, "Microsoft YaHei", sans-serif; font-weight: 760; letter-spacing: .012em; line-height: .94; }
    .about-title-wrap h2 span { color: #172322; background: linear-gradient(100deg, #172322 0%, #172322 38%, #7f9f91 50%, #172322 62%, #172322 100%); background-size: 220% 100%; background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; transition: background-position 700ms cubic-bezier(.2,.8,.2,1), letter-spacing 420ms ease; }
    .about-title-wrap h2:hover span { background-position: 100% 0; letter-spacing: .035em; }
    .about-title-wrap h2:hover { transform: translateY(-4px); transition: transform 420ms cubic-bezier(.2,.8,.2,1); }
    .about-copy h3 { font-family: var(--font-display), Arial, "Microsoft YaHei", sans-serif; font-weight: 740; }
    .about-body { color: #253332; }
    .about-body strong { box-shadow: inset 0 -0.55em 0 rgba(201,255,56,.76); }
    .about-interactive { background: rgba(246,244,236,.88); border-color: rgba(23,35,34,.46); box-shadow: 12px 12px 0 rgba(23,35,34,.14); }
    .about-interactive-tab.is-active, .about-interactive-tab:hover, .about-interactive-tab:focus-visible { background: #172322; color: #e7eee8; }
    .about-interactive-cursor { background: #172322; color: #c9ff38; }
    .about-contact { background: #172322; color: #e7eee8; }
    .about-contact:hover, .about-contact:focus-visible { background: #c9ff38; color: #172322; }
    @media (prefers-reduced-motion: reduce) { .about-title-wrap h2:hover { transform: none; } .about-title-wrap h2 span { transition: none; } }    /* Editorial type treatment matched to the reference */
    :root { --font-editorial: "Helvetica Neue", Helvetica, Arial, "Microsoft YaHei", "PingFang SC", sans-serif; --font-editorial-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace; }
    body, button, input, textarea, select { font-family: var(--font-editorial); }
    h1, h2, h3, h4, h5, h6, p, a, button, input, textarea, select { letter-spacing: 0; }
    .site-nav, .site-brand, .hero-title, .about-title-wrap h2, .about-copy h3, .tvc-heading h2, .tvc-item-title, .cases-title-group h2, .case-copy h3, .contact-copy h2, .project-card-title { font-family: var(--font-editorial); font-weight: 500; }
    .site-nav { font-size: 12px; }
    .hero-title { font-weight: 500; }
    .about-title-wrap h2, .tvc-heading h2, .cases-title-group h2, .contact-copy h2 { font-weight: 500; line-height: 1.02; }
    .about-copy h3, .tvc-item-title { font-weight: 500; }
    .tvc-kicker, .tvc-card-label, .tvc-card-index, .case-overline, .case-meta, .contact-kicker, .contact-footnote, .about-kicker, .about-interactive-kicker { font-family: var(--font-editorial-mono); font-weight: 500; letter-spacing: .08em; }
    .about-body, .contact-lead, .case-copy > p, .tvc-heading > p { font-family: var(--font-editorial); font-weight: 400; }
    .about-decoration, .cases-watermark, .contact-watermark, .case-number, .tvc-section::before { font-family: var(--font-editorial); font-weight: 500; }    /* Hero profile positioning: larger and closer to the character */
    @media (min-width: 821px) {
      .profile { top: 47%; right: auto; left: 61%; width: 380px; padding-left: 32px; }
      .profile-row { grid-template-columns: 100px 1fr; gap: 18px; margin-bottom: 18px; font-size: 16px; line-height: 1.5; }
      .profile-line { width: 3px; }
      .profile-label { font-size: 15px; }
      .profile-value { font-size: 17px; }
    }
    .hero-profile-photo { position: absolute; z-index: 5; top: 49%; left: 82%; width: clamp(140px, 10vw, 190px); aspect-ratio: 3 / 4; margin: 0; padding: 7px 7px 24px; background: #f7f4ea; border: 1px solid rgba(23,22,28,.28); box-shadow: 12px 16px 0 rgba(23,22,28,.16), 0 18px 32px rgba(23,22,28,.16); transform: translateY(-50%) rotate(4deg); transition: transform 420ms cubic-bezier(.2,.8,.2,1), box-shadow 420ms ease; }
    .hero-profile-photo::before { content: "PERSONAL / 01"; position: absolute; left: 9px; bottom: 7px; color: rgba(23,22,28,.58); font: 500 8px/1 var(--font-editorial-mono, monospace); letter-spacing: .08em; }
    .hero-profile-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 68%; filter: saturate(.86) contrast(1.04); }
    .hero-profile-photo:hover { transform: translateY(calc(-50% - 8px)) rotate(1deg) scale(1.035); box-shadow: 16px 22px 0 rgba(23,22,28,.18), 0 24px 38px rgba(23,22,28,.18); }
    @media (max-width: 1180px) and (min-width: 821px) { .hero-profile-photo { left: 83%; width: 145px; } }
    @media (max-width: 820px) { .hero-profile-photo { top: 54%; left: auto; right: 12px; width: 112px; padding: 5px 5px 18px; transform: translateY(-50%) rotate(3deg); } .hero-profile-photo::before { left: 7px; bottom: 5px; font-size: 6px; } }