:root {
  --case-bg: #eeece5;
  --case-fg: #181817;
  --case-accent: #8f918e;
  --case-surface: #d8d6cf;
  --case-pad: clamp(20px, 3.2vw, 56px);
  --case-line: color-mix(in srgb, var(--case-fg) 22%, transparent);
  --ease: cubic-bezier(.2,.75,.2,1);
}

@view-transition { navigation: auto; }
::view-transition-old(case-image),
::view-transition-new(case-image) { animation-duration: 700ms; animation-timing-function: var(--ease); }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; overflow-x: hidden; color: var(--case-fg); background: var(--case-bg); font-family: "Arial Narrow", "Helvetica Neue", "Microsoft YaHei", Arial, sans-serif; -webkit-font-smoothing: antialiased; transition: color 700ms var(--ease), background 700ms var(--ease); }
a { color: inherit; text-decoration: none; }
img { display: block; }
::selection { color: var(--case-bg); background: var(--case-accent); }

.case-ambient { position: fixed; z-index: -3; inset: 0; background: var(--case-bg); transition: background 700ms var(--ease); }
.case-ambient::after { content: ""; position: absolute; inset: -20%; opacity: .16; background: radial-gradient(circle at var(--px, 60%) var(--py, 35%), var(--case-accent), transparent 26%); filter: blur(90px); }
.case-grid { position: fixed; z-index: -2; inset: 0; opacity: .055; pointer-events: none; background-image: linear-gradient(to right, var(--case-fg) 1px, transparent 1px), linear-gradient(to bottom, var(--case-fg) 1px, transparent 1px); background-size: 48px 48px; }

.case-loader { position: fixed; z-index: 1000; inset: 0; display: flex; align-items: flex-end; justify-content: space-between; padding: var(--case-pad); color: var(--case-fg); background: var(--case-bg); font-size: 10px; letter-spacing: .15em; transform-origin: top; transition: clip-path 800ms cubic-bezier(.76,0,.24,1), visibility 800ms; clip-path: inset(0); }
.case-loader b { font-size: clamp(100px, 25vw, 400px); letter-spacing: -.1em; line-height: .65; }
.case-page.is-ready .case-loader { clip-path: inset(0 0 100%); visibility: hidden; }

.case-progress { position: fixed; z-index: 120; top: 0; left: 0; width: 100%; height: 2px; }
.case-progress span { display: block; width: 100%; height: 100%; background: var(--case-accent); transform: scaleX(0); transform-origin: left; }
.case-cursor { position: fixed; z-index: 999; top: 0; left: 0; width: 36px; height: 36px; margin: -18px; border: 1px solid var(--case-fg); border-radius: 50%; pointer-events: none; mix-blend-mode: difference; transition: width 250ms var(--ease), height 250ms var(--ease), margin 250ms var(--ease); }
.case-cursor i { position: absolute; top: 50%; left: 50%; width: 3px; height: 3px; margin: -1.5px; border-radius: 50%; background: var(--case-fg); }
.case-cursor.is-hover { width: 66px; height: 66px; margin: -33px; }

.case-header { position: fixed; z-index: 100; top: 0; left: 0; width: 100%; display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; padding: 20px var(--case-pad); font-size: 9px; letter-spacing: .1em; }
.case-brand { display: flex; align-items: flex-start; gap: 11px; justify-self: start; }
.case-brand > b { display: grid; place-items: center; width: 34px; height: 34px; color: var(--case-bg); background: var(--case-fg); font-size: 13px; letter-spacing: -.06em; transition: color 700ms, background 700ms; }
.case-brand span { padding-top: 3px; line-height: 1.25; }
.case-header__title { display: flex; gap: 12px; padding-top: 4px; }
.case-header__title b { color: var(--case-accent); }
.case-close { justify-self: end; display: flex; align-items: center; gap: 12px; }
.case-close i { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--case-line); border-radius: 50%; font-size: 16px; font-style: normal; }

section { position: relative; padding-left: var(--case-pad); padding-right: var(--case-pad); }
.case-label { font-size: 9px; letter-spacing: .15em; }

.case-hero { min-height: 100svh; padding-top: 110px; padding-bottom: 28px; overflow: hidden; }
.case-hero__eyebrow { display: flex; justify-content: space-between; width: 38%; margin-left: auto; font-size: 9px; letter-spacing: .14em; }
.case-hero__title { position: relative; z-index: 3; margin: 6vh 0 0; font-size: clamp(110px, var(--hero-title-size, 24vw), 420px); font-weight: 800; letter-spacing: -.095em; line-height: .7; }
.case-hero__title span { display: inline-block; }
.case-hero__title i { position: absolute; top: .12em; margin-left: .08em; color: var(--case-accent); font-size: 10px; font-style: normal; font-weight: 400; letter-spacing: .12em; }
.case-hero__cn { position: relative; z-index: 4; margin: 24px 0 0 1vw; font-size: 13px; letter-spacing: .16em; }
.case-hero__media { position: absolute; z-index: 2; top: 13%; right: 5%; width: min(55vw, 880px); height: 72%; overflow: hidden; view-transition-name: case-image; }
.case-hero__media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); }
.case-hero__media::after { content: ""; position: absolute; inset: 0; border: 1px solid color-mix(in srgb, var(--case-fg) 18%, transparent); }
.case-hero__line { position: absolute; z-index: 2; background: color-mix(in srgb, var(--case-fg) 35%, transparent); }
.line-x { top: 50%; left: 0; width: 100%; height: 1px; }
.line-y { top: 0; left: 50%; width: 1px; height: 100%; }
.case-hero__coordinate { position: absolute; z-index: 3; padding: 5px 7px; color: var(--case-bg); background: var(--case-fg); font-size: 7px; letter-spacing: .12em; }
.c1 { left: 14px; top: 14px; }.c2 { right: 14px; bottom: 14px; }
.case-hero__meta { position: absolute; z-index: 4; left: var(--case-pad); bottom: 30px; display: grid; grid-template-columns: repeat(3, minmax(120px, 1fr)); gap: 5vw; }
.case-hero__meta div { display: flex; flex-direction: column; gap: 7px; }
.case-hero__meta span { font-size: 7px; letter-spacing: .15em; opacity: .6; }
.case-hero__meta b { font-size: 9px; letter-spacing: .1em; }
.case-scroll { position: absolute; z-index: 4; right: var(--case-pad); bottom: 26px; display: flex; align-items: center; gap: 14px; font-size: 8px; letter-spacing: .14em; }
.case-scroll i { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--case-line); border-radius: 50%; font-style: normal; }

.case-overview { min-height: 100svh; padding-top: 110px; padding-bottom: 110px; color: var(--case-bg); background: var(--case-fg); }
.case-overview__statement { max-width: 1250px; margin: 13vh 0 12vh; font-size: clamp(50px, 8.8vw, 150px); font-weight: 600; letter-spacing: -.07em; line-height: .95; }
.case-overview__facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2vw; margin-left: 35%; }
.case-overview__facts div { display: flex; flex-direction: column; gap: 12px; padding-top: 12px; border-top: 1px solid color-mix(in srgb, var(--case-bg) 28%, transparent); }
.case-overview__facts span { font-size: 7px; letter-spacing: .14em; opacity: .55; }
.case-overview__facts b { font-size: 9px; letter-spacing: .08em; }
.case-stats { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 13vh; border-top: 1px solid color-mix(in srgb, var(--case-bg) 28%, transparent); }
.case-stat { min-height: 190px; padding: 18px 20px 20px 0; border-right: 1px solid color-mix(in srgb, var(--case-bg) 28%, transparent); }
.case-stat + .case-stat { padding-left: 20px; }
.case-stat:last-child { border-right: 0; }
.case-stat b { display: block; font-size: clamp(54px, 8vw, 120px); letter-spacing: -.075em; line-height: .9; }
.case-stat span { display: block; margin-top: 34px; font-size: 8px; letter-spacing: .13em; opacity: .6; }

.case-brief { min-height: 100svh; display: grid; grid-template-columns: .7fr 3fr 1.1fr; gap: 5vw; align-items: center; padding-top: 110px; padding-bottom: 110px; }
.case-brief__index { align-self: start; font-size: 9px; letter-spacing: .15em; }
.case-brief__block span { font-size: 8px; letter-spacing: .14em; opacity: .6; }
.case-brief__block h2 { margin: 30px 0 0; font-size: clamp(46px, 7vw, 118px); font-weight: 600; letter-spacing: -.065em; line-height: 1.02; }
.case-brief__block--small { align-self: end; padding-bottom: 8vh; }
.case-brief__block p { margin: 28px 0 0; font-size: 14px; line-height: 1.8; }

.case-showcase { min-height: 175svh; padding: 0; }
.case-showcase__sticky { position: sticky; top: 0; width: 100%; height: 100svh; overflow: hidden; }
.case-showcase__sticky img { width: 100%; height: 100%; object-fit: cover; transform: scale(var(--showcase-scale, 1.08)) translateY(var(--showcase-y, 0px)); }
.case-showcase__shade { position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 55%, rgba(0,0,0,.45)); }
.case-showcase__caption { position: absolute; left: var(--case-pad); bottom: 28px; color: #fff; font-size: 8px; letter-spacing: .14em; }
.case-showcase__zoom { position: absolute; z-index: 4; right: var(--case-pad); bottom: 24px; display: flex; align-items: center; gap: 12px; padding: 10px 14px; color: #111; background: #fff; border: 0; border-radius: 99px; font: inherit; font-size: 9px; letter-spacing: .1em; cursor: pointer; }
.case-showcase__zoom i { font-style: normal; transition: transform 250ms var(--ease); }
.case-showcase__zoom:hover i { transform: translate(3px,-3px); }
.case-showcase__reticle { position: absolute; top: 50%; left: 50%; width: 90px; height: 90px; border: 1px solid rgba(255,255,255,.55); border-radius: 50%; transform: translate(-50%,-50%); }
.case-showcase__reticle i { position: absolute; background: rgba(255,255,255,.55); }
.case-showcase__reticle i:first-child { top: 50%; left: -30px; width: 150px; height: 1px; }
.case-showcase__reticle i:last-child { top: -30px; left: 50%; width: 1px; height: 150px; }

.case-process { min-height: 100svh; padding-top: 120px; padding-bottom: 120px; color: var(--case-bg); background: var(--case-fg); }
.case-process__head { display: grid; grid-template-columns: 2.4fr 1fr; gap: 8vw; align-items: end; margin-top: 90px; }
.case-process__head h2 { margin: 0; font-size: clamp(52px, 8vw, 130px); font-weight: 600; letter-spacing: -.07em; line-height: .94; }
.case-process__head p { margin: 0; font-size: 8px; letter-spacing: .13em; line-height: 1.7; opacity: .55; }
.case-process__list { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 100px; border-top: 1px solid color-mix(in srgb, var(--case-bg) 25%, transparent); }
.case-process__item { min-height: 300px; padding: 18px 24px 24px 0; border-right: 1px solid color-mix(in srgb, var(--case-bg) 25%, transparent); }
.case-process__item + .case-process__item { padding-left: 24px; }
.case-process__item:last-child { border-right: 0; }
.case-process__item > span { font-size: 8px; letter-spacing: .12em; opacity: .55; }
.case-process__item h3 { margin: 60px 0 28px; font-size: clamp(25px, 3vw, 46px); letter-spacing: -.045em; }
.case-process__item p { margin: 0; font-size: 12px; line-height: 1.75; opacity: .7; }

.case-development { min-height: 110svh; display: grid; grid-template-columns: 1.35fr 1fr; padding: 0; }
.case-development__visual { position: relative; min-height: 100svh; overflow: hidden; }
.case-development__visual img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.18); }
.case-development__diagram { position: absolute; inset: 0; display: grid; place-items: center; }
.d-ring { position: absolute; border: 1px solid rgba(255,255,255,.55); border-radius: 50%; }.d1 { width: 40%; aspect-ratio: 1; }.d2 { width: 64%; aspect-ratio: 1; border-style: dashed; }.d-axis { position: absolute; width: 1px; height: 82%; background: rgba(255,255,255,.45); }
.case-development__diagram b { display: grid; place-items: center; width: 92px; height: 92px; color: #111; background: var(--case-accent); border-radius: 50%; text-align: center; font-size: 11px; letter-spacing: .08em; }
.case-development__copy { display: flex; flex-direction: column; justify-content: center; padding: 100px var(--case-pad); }
.case-development__copy h2 { margin: 10vh 0 35px; font-size: clamp(42px, 5.6vw, 88px); font-weight: 600; letter-spacing: -.06em; line-height: 1.02; }
.case-development__copy > p { max-width: 560px; margin: 0; font-size: 14px; line-height: 1.8; }
.case-metrics { display: grid; grid-template-columns: repeat(2, 1fr); margin-top: 9vh; border-top: 1px solid var(--case-line); }
.case-metric { padding: 14px 12px 22px 0; border-bottom: 1px solid var(--case-line); }
.case-metric:nth-child(odd) { border-right: 1px solid var(--case-line); }.case-metric:nth-child(even) { padding-left: 14px; }
.case-metric span { font-size: 7px; letter-spacing: .13em; opacity: .55; }.case-metric b { display: block; margin-top: 12px; font-size: 18px; letter-spacing: -.03em; }

.case-cmf { min-height: 100svh; padding-top: 120px; padding-bottom: 120px; color: var(--case-bg); background: var(--case-fg); }
.case-cmf__head { display: grid; grid-template-columns: 2.2fr 1fr; gap: 9vw; align-items: end; margin-top: 90px; }
.case-cmf__head h2 { margin: 0; font-size: clamp(50px, 7.4vw, 120px); font-weight: 600; letter-spacing: -.07em; line-height: .96; }
.case-cmf__head p { margin: 0; font-size: 13px; line-height: 1.75; opacity: .7; }
.case-palette { display: grid; grid-template-columns: repeat(3, 1fr); height: 36vh; min-height: 280px; margin-top: 11vh; }
.case-swatch { position: relative; padding: 18px; color: var(--swatch-text); background: var(--swatch); }
.case-swatch span { font-size: 8px; letter-spacing: .13em; }.case-swatch b { position: absolute; left: 18px; bottom: 18px; font-size: 11px; letter-spacing: .1em; }
.case-materials { display: flex; justify-content: space-between; padding-top: 20px; border-top: 1px solid color-mix(in srgb, var(--case-bg) 24%, transparent); margin-top: 30px; font-size: 8px; letter-spacing: .13em; }

.case-outcome { min-height: 80svh; display: grid; grid-template-columns: 1fr 4fr; grid-template-rows: auto 1fr auto; gap: 4vw; padding-top: 120px; padding-bottom: 80px; }
.case-outcome__copy { align-self: center; margin: 0; font-size: clamp(48px, 8vw, 132px); font-weight: 600; letter-spacing: -.07em; line-height: .96; }
.case-outcome__note { grid-column: 2; max-width: 520px; font-size: 10px; line-height: 1.7; opacity: .55; }

.case-next { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; color: var(--case-bg); background: var(--case-accent); overflow: hidden; }
.case-next__label { font-size: 9px; letter-spacing: .15em; }
.case-next__link { position: relative; display: flex; align-items: flex-start; width: max-content; max-width: 100%; margin: 10vh 0 30px; font-size: clamp(100px, 23vw, 390px); font-weight: 800; letter-spacing: -.1em; line-height: .68; }
.case-next__link i { display: grid; place-items: center; width: .26em; height: .26em; margin-left: .06em; color: var(--case-accent); background: var(--case-bg); border-radius: 50%; font-size: .35em; font-style: normal; font-weight: 400; letter-spacing: 0; transition: transform 300ms var(--ease); }
.case-next__link:hover i { transform: rotate(45deg); }
.case-next > p { margin: 0; font-size: 12px; letter-spacing: .13em; }

.case-footer { display: grid; grid-template-columns: 1fr 1fr auto; padding: 22px var(--case-pad); color: var(--case-bg); background: var(--case-fg); font-size: 8px; letter-spacing: .13em; }
.reveal { opacity: 0; transform: translateY(30px); transition: opacity 750ms var(--ease), transform 750ms var(--ease); }.reveal.is-visible { opacity: 1; transform: none; }

.case-lightbox { width: min(96vw, 1500px); height: 94svh; max-width: none; max-height: none; margin: auto; padding: 54px 18px 18px; color: #102c3a; background: #f4fbfe; border: 0; overflow: hidden; }
.case-lightbox::backdrop { background: rgba(3,15,22,.82); backdrop-filter: blur(12px); }
.case-lightbox > button { position: absolute; z-index: 2; top: 14px; right: 18px; display: flex; align-items: center; gap: 10px; padding: 0; color: inherit; background: none; border: 0; font: inherit; font-size: 9px; letter-spacing: .12em; cursor: pointer; }
.case-lightbox > button i { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid rgba(16,44,58,.25); border-radius: 50%; font-size: 15px; font-style: normal; }
.case-lightbox__viewport { width: 100%; height: calc(100% - 24px); overflow: auto; overscroll-behavior: contain; }
.case-lightbox__viewport img { width: min(100%, 1200px); height: auto; margin: 0 auto; }
.case-lightbox > p { margin: 8px 0 0; text-align: center; font-size: 8px; letter-spacing: .12em; opacity: .55; }

body[data-layout="service"] .case-hero__media,
body[data-layout="service"] .case-development__visual { background: #f4fbfe; }
body[data-layout="service"] .case-hero__media img,
body[data-layout="service"] .case-development__visual img { object-fit: contain; padding: clamp(14px, 2vw, 30px); transform: none; }
body[data-layout="service"] .case-showcase { background: #eef8fc; }
body[data-layout="service"] .case-showcase__sticky img { object-fit: contain; padding: clamp(20px, 4vw, 70px); background: #eef8fc; }
body[data-layout="service"] .case-showcase__shade { display: none; }
body[data-layout="service"] .case-showcase__caption { color: #102c3a; }
body[data-layout="service"] .case-showcase__reticle { display: none; }
body[data-layout="service"] .case-development__diagram { background: linear-gradient(90deg, transparent, rgba(17,183,230,.08)); }

@media (max-width: 900px) {
  .case-header { grid-template-columns: 1fr 1fr; }.case-header__title { display: none; }
  .case-hero__eyebrow { width: 55%; }.case-hero__title { margin-top: 11vh; font-size: 28vw; }
  .case-hero__media { top: 24%; right: 0; width: 78vw; height: 58%; }
  .case-hero__meta { grid-template-columns: repeat(2, minmax(110px, 1fr)); }.case-hero__meta div:last-child { display: none; }
  .case-overview__facts { margin-left: 0; }
  .case-brief { grid-template-columns: 1fr; align-content: center; }.case-brief__block { margin-top: 12vh; }.case-brief__block--small { width: min(460px,100%); margin-left: auto; padding: 0; }
  .case-process__list { grid-template-columns: repeat(2, 1fr); }.case-process__item:nth-child(2) { border-right: 0; }.case-process__item:nth-child(-n+2) { border-bottom: 1px solid color-mix(in srgb, var(--case-bg) 25%, transparent); }
  .case-development { grid-template-columns: 1fr; }.case-development__visual { min-height: 80svh; }.case-development__copy { min-height: 85svh; }
}

@media (max-width: 620px) {
  :root { --case-pad: 18px; }
  .case-cursor { display: none; }.case-header { padding-top: 15px; }.case-brand span, .case-close span { display: none; }
  .case-hero { padding-top: 90px; }.case-hero__eyebrow { width: 70%; }.case-hero__title { margin-top: 9vh; font-size: var(--mobile-title-size, 24vw); }
  .case-hero__cn { margin-top: 12px; font-size: 10px; }.case-hero__media { top: 29%; width: 90vw; height: 50%; }
  .case-hero__meta { left: 18px; bottom: 24px; gap: 20px; }.case-scroll span { display: none; }
  .case-overview { padding-top: 90px; padding-bottom: 90px; }.case-overview__statement { margin: 12vh 0; font-size: 13vw; }
  .case-overview__facts { grid-template-columns: 1fr; gap: 28px; }.case-stats { grid-template-columns: 1fr; }.case-stat, .case-stat + .case-stat { min-height: 0; padding: 22px 0; border-right: 0; border-bottom: 1px solid color-mix(in srgb, var(--case-bg) 28%, transparent); }
  .case-stat b { font-size: 20vw; }.case-stat span { margin-top: 14px; }
  .case-brief { padding-top: 90px; padding-bottom: 90px; }.case-brief__block h2 { font-size: 12vw; }
  .case-process { padding-top: 90px; padding-bottom: 90px; }.case-process__head { grid-template-columns: 1fr; margin-top: 70px; }.case-process__head h2 { font-size: 13vw; }.case-process__head p { display: none; }
  .case-process__list { grid-template-columns: 1fr; margin-top: 70px; }.case-process__item, .case-process__item + .case-process__item { min-height: 0; padding: 22px 0 30px; border-right: 0; border-bottom: 1px solid color-mix(in srgb, var(--case-bg) 25%, transparent); }.case-process__item h3 { margin: 35px 0 20px; font-size: 9vw; }
  .case-development__visual { min-height: 67svh; }.case-development__copy { min-height: 90svh; padding: 80px 18px; }.case-development__copy h2 { margin-top: 10vh; font-size: 12vw; }
  .case-cmf { padding-top: 90px; padding-bottom: 90px; }.case-cmf__head { grid-template-columns: 1fr; margin-top: 70px; }.case-cmf__head h2 { font-size: 12vw; }.case-cmf__head p { margin-top: 30px; }.case-palette { grid-template-columns: 1fr; height: 70vh; }.case-materials { flex-direction: column; gap: 12px; }
  .case-outcome { grid-template-columns: 1fr; min-height: 90svh; padding-top: 90px; }.case-outcome__copy, .case-outcome__note { grid-column: 1; }.case-outcome__copy { font-size: 13vw; }.case-outcome__note { align-self: end; }
  .case-next__link { font-size: var(--mobile-next-size, 24vw); }.case-footer { grid-template-columns: 1fr auto; }.case-footer span:nth-child(2) { display: none; }
  .case-showcase__zoom { right: 18px; bottom: 18px; }.case-lightbox { width: 100vw; height: 100svh; padding-left: 8px; padding-right: 8px; }
}

@media (pointer: coarse) { .case-cursor { display: none; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *,*::before,*::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }