/* V2 — collision-safe composition.
   Character overlaps are reserved for the green path. Project imagery,
   content cards, headings and controls each own a protected visual zone. */

.work-fragment{display:none}

/* Hero → Profile shared-element transition. The paper section moves at the
   document speed while the green stage and Han Ye art hold in depth. */
.concept-page{height:auto;overflow:clip;--hero-stage:900px}
.hero{height:var(--hero-stage);overflow:visible;border-radius:0;background:transparent}
.hero__sticky-layer{position:absolute;inset:0 0 auto;width:100%;height:calc(var(--hero-stage) * 2);background:var(--green)}
.hero__sticky-frame{position:sticky;top:0;height:var(--hero-stage);overflow:hidden;border-radius:0 0 36px 36px}
.hero__shade{position:absolute;z-index:1;inset:0;background:var(--ink);opacity:0;pointer-events:none}
.hero__title,.hero__markers,.hero__orbit{z-index:2}
.journey{z-index:3;overflow:visible;border-radius:36px 36px 0 0}
.journey__intro{z-index:4}
.journey__intro-art-wrap{position:absolute;z-index:6;top:calc(-1 * var(--hero-stage));right:-115px;bottom:0;left:-115px;pointer-events:none}
.journey__intro-art-sticky{position:sticky;top:0;display:flex;height:var(--hero-stage);align-items:flex-end;justify-content:flex-end;overflow:visible}
.journey__intro-art{position:relative;z-index:1;width:615px;height:970px;margin:0 75px -770px 0;transform:scale(.9);transform-origin:center;will-change:transform}
.journey__intro-art-inner,.journey__intro-art-inner .hanye{width:100%;height:100%}
.journey__intro-art-inner .hanye{position:static;object-fit:contain;transform:none}
.character[data-inline-character]{display:block;overflow:visible}
.character[data-inline-character] g{transform-box:view-box}
.character-stack{display:block;object-fit:unset}
.character-stack__body,.character-stack>.cast-lower__layer{position:absolute;inset:0;display:block;width:100%;height:100%;will-change:transform}
.character-stack__body>.character-layer{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;will-change:transform}
.intro-copy{z-index:8;width:650px}

.luca{width:330px;height:235px;right:35px;top:185px}
.cast-upper{width:560px;aspect-ratio:1015/1550;max-height:900px;left:-18px;top:380px}
.cast-mid{width:770px;aspect-ratio:1024/1536;max-height:1160px;left:-95px;top:2825px}

.story-card{
  width:520px;
  height:610px;
  padding:14px;
  display:grid;
  grid-template-rows:276px 1fr;
  gap:0;
  overflow:hidden;
}
.story-card--one{right:115px;top:720px}
.story-card--two{left:110px;top:1450px}
.story-card--three{left:470px;top:2250px}
.story-card--four{right:115px;top:3330px}
.story-card__media{min-height:0;overflow:hidden;border-radius:11px;background:transparent}
.story-card__media img{width:100%;height:100%;object-fit:contain;object-position:center;background:transparent}
.story-card__copy{display:flex;min-height:0;flex-direction:column;padding:20px 20px 14px}
.story-card h3{font-size:39px;line-height:.96;letter-spacing:-.045em;margin:13px 0 12px}
.story-card p{font-size:16px;line-height:1.28;max-width:440px}
.story-card a{padding-top:11px;font-size:15px}
.card-index{font-size:12px}

.journey__end-title{left:720px;top:3975px;width:600px;text-align:left}
.journey__end-title h2{font-size:62px;line-height:.92}
.river-note--one{left:600px;top:430px;transform:rotate(8deg)}
.river-note--three{left:785px;top:3045px;transform:rotate(-8deg)}

.collab{z-index:4;padding-top:245px}
.collab__transition{position:absolute;z-index:0;top:0;left:0;width:100%;height:210px;overflow:hidden}
.collab__transition i{position:absolute;display:block;border-radius:50% 50% 0 0/100% 100% 0 0}
.collab__transition i:nth-child(1){left:-120px;top:-140px;width:820px;height:330px;background:var(--green-deep);transform:rotate(3deg)}
.collab__transition i:nth-child(2){right:-160px;top:-130px;width:980px;height:340px;background:var(--green-dark);transform:rotate(-3deg)}
.collab__transition i:nth-child(3){left:330px;top:-85px;width:790px;height:270px;background:var(--green)}
.collab>.eyebrow,.collab h2,.collab__copy,.collab__actions,.collab__mark{position:relative;z-index:2}
.collab__mark{position:absolute;top:247px}
.collab h2{font-size:128px;margin:60px 0 38px}
.collab__services{position:absolute;z-index:2;left:50%;bottom:50px;transform:translateX(-50%);margin:0}

.feature{height:857px;padding:38px 24px;background:var(--paper)}
.feature__frame{height:781px;display:grid;grid-template-columns:390px minmax(0,1fr);gap:22px;overflow:visible;border-radius:0;background:transparent}
.feature__frame:after{content:none}
.feature__panel{display:flex;min-width:0;flex-direction:column;border-radius:28px;background:#fff;padding:42px 38px 34px;box-shadow:0 16px 45px rgba(31,38,31,.08)}
.feature__heading{font-size:38px;line-height:1;letter-spacing:-.05em;font-weight:400;margin:22px 0 0}
.feature__descriptions{position:relative;flex:1;margin-top:35px}
.feature__descriptions article{position:absolute;inset:0;opacity:0;transform:translateY(18px);transition:opacity .45s ease,transform .6s cubic-bezier(.22,.61,.36,1);pointer-events:none}
.feature__descriptions article.is-active{opacity:1;transform:none;pointer-events:auto}
.feature__descriptions span{font-size:13px;letter-spacing:.12em}
.feature__descriptions h3{font-size:46px;line-height:1.02;letter-spacing:-.055em;font-weight:400;margin:23px 0 18px}
.feature__descriptions p{font-size:18px;line-height:1.35;color:#5d625d}
.feature__descriptions a{display:inline-block;margin-top:25px;border-bottom:1px solid var(--ink);padding-bottom:4px;font-size:15px}
.feature__controls{display:grid;grid-template-columns:48px 1fr 48px;align-items:center;gap:13px;border-top:1px solid #c9c9c2;padding-top:20px}
.feature__controls>button{width:48px;height:48px;border:1px solid var(--ink);border-radius:50%;background:transparent;font-size:20px;cursor:pointer}
.feature__dots{display:flex;justify-content:center;gap:6px}
.feature__dots button{border:0;border-radius:99px;background:#e9e7de;padding:8px 10px;color:#6e736d;font-size:12px;cursor:pointer}
.feature__dots button.is-active{background:var(--ink);color:#fff}
.feature__autoplay{grid-column:1/-1!important;width:100%!important;height:36px!important;border:0!important;border-radius:8px!important;background:#eeece4!important;font-size:12px!important}
.feature__stage{position:relative;min-width:0;overflow:hidden;border-radius:28px;background:#202420;padding:22px}
.feature__stage{touch-action:pan-y;cursor:grab;user-select:none}
.feature__stage:active{cursor:grabbing}
.feature__stage:focus-visible,.feature__controls button:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.feature__track{height:100%;display:flex;gap:18px;will-change:transform;transition:transform 520ms cubic-bezier(.32,.72,0,1)}
.feature__track.is-jumping{transition:none}
.feature__slide{position:relative;flex:0 0 calc(100% - 88px);height:100%;margin:0;display:grid;place-items:center;border-radius:16px;overflow:hidden;background:#f1eee5}
.feature__slide img{width:100%;height:100%;object-fit:contain;border-radius:16px;background:#f1eee5}
.feature__slide[aria-hidden="true"]{pointer-events:none}

.proof{overflow:hidden}
.metric-card{height:800px}
.metric-card--green{top:470px}
.metric-card--coral{top:940px}
.metric-card b{font-size:235px;margin-top:62px}
.metric-card p{position:absolute;right:52px;top:330px;width:285px;margin:0;font-size:18px;line-height:1.28}
.cast-lower{width:400px;aspect-ratio:1704/923;max-height:590px;right:-10px;top:895px}
.cast-lower__layer{transform-origin:center}

/* Contact details sit below the display headline so the QR remains large,
   quiet and scannable instead of becoming another decorative overlay. */
.footer{height:1050px}
.footer__top,.footer__title,.footer__contact,.footer__bottom{z-index:2}
.footer__top{position:relative}
.footer__contact{position:absolute;top:520px;left:50%;display:flex;align-items:center;justify-content:space-between;border-top:1px solid rgba(36,40,37,.5);padding-top:28px;transform:translateX(-50%)}
.footer__contact-copy{display:flex;flex-direction:column;align-items:flex-start}
.footer__contact-copy>p{font-size:13px;letter-spacing:.16em}
.footer__phone{display:inline-block;margin-top:14px;color:var(--ink);font-size:52px;line-height:1;letter-spacing:-.045em}
.footer__contact-copy>span{margin-top:18px;font-size:17px;letter-spacing:.03em}
.footer__qr{width:214px;margin:0;display:grid;justify-items:center;gap:10px}
.footer__qr img{display:block;width:184px;height:184px;border:12px solid #fff;border-radius:18px;background:#fff}
.footer__qr figcaption{font-size:13px;letter-spacing:.11em}
.footer__bottom{z-index:3}
.footer__bottom a{color:inherit}
.footer:after{z-index:0}

.selected{height:auto;min-height:2360px;padding-bottom:110px;overflow:hidden}
.work-grid{height:auto;grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-rows:90px;grid-template-rows:none;gap:20px}
.project{display:flex;flex-direction:column}
.project img{width:100%;height:auto;min-height:0;flex:1;object-fit:cover;background:transparent}
.project figcaption{position:static;left:auto;right:auto;bottom:auto;width:100%;min-height:62px;flex:0 0 62px;border-radius:0;background:#fff;border-top:1px solid #dddcd6;padding:0 16px}
.project--hero{grid-column:1/9;grid-row:1/6}
.project--portrait-a{grid-column:9/13;grid-row:1/9}
.project--catalog{grid-column:1/5;grid-row:6/9}
.project--mobile{grid-column:5/9;grid-row:6/10}
.project--portrait-b{grid-column:1/5;grid-row:10/19}
.project--campaign{grid-column:5/13;grid-row:10/15}
.project--print{grid-column:5/8;grid-row:15/19}
.project--social{grid-column:8/13;grid-row:15/19}

.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

/* Motion layer. The static layout remains the source of truth; motion only
   touches compositor-friendly transform and opacity values. */
html.lenis,html.lenis body{height:auto}
html.lenis{scroll-behavior:auto}
.lenis:not(.lenis-autoToggle).lenis-stopped{overflow:clip}
.lenis [data-lenis-prevent],.lenis [data-lenis-prevent-touch],.lenis [data-lenis-prevent-wheel]{overscroll-behavior:contain}
.lenis.lenis-smooth iframe{pointer-events:none}

.clip-line{display:block;overflow:hidden}
.clip-line>i{display:block;font:inherit;font-style:normal;letter-spacing:inherit}
.hero h1 .clip-line,.collab h2 .clip-line{line-height:inherit}

.character,.character-stack__body,.character-layer,.cast-lower__layer,.story-card,.metric-card,.feature__panel,.feature__stage,.project,.footer__title{will-change:transform,opacity}
.story-card__media img,.project img{will-change:transform}

.rail{display:block;overflow:hidden;justify-content:initial}
.rail__track{display:flex;width:max-content;height:100%;will-change:transform}
.rail__segment{height:100%;display:flex;flex:none;align-items:center;gap:45px;padding-right:45px}

.pill-button,.header-cta,.feature__controls button{transition:transform 180ms cubic-bezier(.23,1,.32,1),box-shadow 220ms cubic-bezier(.23,1,.32,1)}
.project{transition:box-shadow 220ms cubic-bezier(.23,1,.32,1)}
.pill-button:active,.header-cta:active,.feature__controls button:active{transform:scale(.97)}
.header-cta b svg,.footer__title-mark svg{display:block;width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.header-cta b svg{width:18px;height:18px}
.footer__title-mark svg{width:54px;height:54px}
.project img{transition:transform 560ms cubic-bezier(.23,1,.32,1)}

@media (hover:hover) and (pointer:fine){
  .pill-button:hover,.header-cta:hover{transform:translateY(-3px)}
  .pill-button:hover i,.header-cta:hover b{transform:rotate(12deg)}
  .pill-button i,.header-cta b{transition:transform 240ms cubic-bezier(.23,1,.32,1)}
  .project:hover{box-shadow:0 24px 54px rgba(28,35,28,.11)}
  .project:hover img{transform:scale(1.025)}
}

@media (prefers-reduced-motion:reduce){
  .feature__track,.feature__slide,.feature__descriptions article{transition:none}
  .character,.character-stack__body,.character-layer,.cast-lower__layer,.story-card,.metric-card,.feature__panel,.feature__stage,.project,.footer__title{will-change:auto}
  .pill-button,.header-cta,.feature__controls button,.project,.project img{transition:opacity 160ms ease-out}
  .pill-button:hover,.header-cta:hover,.pill-button:hover i,.header-cta:hover b,.project:hover img{transform:none}
}

html[data-motion-disabled] .hero__sticky-layer{height:var(--hero-stage)}
html[data-motion-disabled] .hero__sticky-frame,html[data-motion-disabled] .journey__intro-art-sticky{position:relative}
html[data-motion-disabled] .journey__intro-art{transform:none}