/* C1 — ink opening: the painting first with one line of text; the title arrives by itself a moment later (no scrolling needed). */
@property --m0{syntax:'<percentage>';inherits:true;initial-value:28%}
@property --m1{syntax:'<percentage>';inherits:true;initial-value:62%}
.v-c1 .c-p1{--t1:1;--t2:1;--so:1;--lo:0}
.v-c1 .c-wash{width:100%;object-position:26% 60%;scale:1.05;
  -webkit-mask-image:linear-gradient(to left,transparent var(--m0),#000 var(--m1));mask-image:linear-gradient(to left,transparent var(--m0),#000 var(--m1))}
.v-c1.js .c-wash > img,.v-c1.js .c-wash > canvas{animation:c1-clear 2.6s cubic-bezier(.2,.6,.2,1) both}
@keyframes c1-clear{from{filter:blur(22px)}to{filter:blur(0)}}
.c1-mist{position:absolute;inset:-10% -20%;z-index:1;pointer-events:none;opacity:.9;
  background:radial-gradient(38% 30% at 22% 38%,rgba(246,241,232,.92),transparent 72%),radial-gradient(34% 26% at 58% 62%,rgba(246,241,232,.8),transparent 72%),radial-gradient(30% 24% at 82% 30%,rgba(246,241,232,.7),transparent 72%)}
.v-c1.js .c1-mist{animation:c1-drift 38s ease-in-out infinite alternate}
@keyframes c1-drift{from{transform:translate3d(-6%,0,0)}to{transform:translate3d(8%,-2%,0)}}
.v-c1 .c-col>span{animation:none!important}
.v-c1 .c-col:nth-child(1)>span{transform:translateY(calc(-103% * (1 - var(--t1))))}
.v-c1 .c-col:nth-child(2)>span{transform:translateY(calc(-103% * (1 - var(--t2))))}
.v-c1 .c-side,.v-c1 .c-hint{opacity:var(--so)}   /* client logos are there from the first frame */
/* the method, written on the painting: each stream is a person, the lake is the company's system, the red tree is where they meet */
.c1-tags{position:absolute;inset:0;z-index:2;pointer-events:none}
.c1-tag{position:absolute;transform:translate(-50%,-100%);display:flex;flex-direction:column;align-items:center;white-space:nowrap}
.c1-tag b{font-family:var(--serif);font-weight:400;font-size:clamp(13px,1.08vw,17px);letter-spacing:.2em;color:#241B18;background:rgba(246,241,232,.9);padding:.5em .8em .5em 1em;line-height:1}
.c1-tag i{width:1px;height:clamp(16px,2.4svh,26px);background:#241B18}
.c1-tag u{width:7px;height:7px;border-radius:50%;background:#C25B3F;margin-bottom:-3.5px}
.c1-tag.is-name b{font-size:clamp(15px,1.3vw,21px);color:#A3492B;letter-spacing:.34em;padding-right:.7em}
.v-c1.js .c1-tag{animation:c1-tag .8s cubic-bezier(.2,.7,.2,1) both;animation-delay:var(--at)}
@keyframes c1-tag{from{opacity:0;transform:translate(-50%,calc(-100% + 10px))}}
@media(max-width:860px){.c1-tags{display:none}.v-c1 .c-wash{--m0:0%;--m1:0%;opacity:.45}}
@media(prefers-reduced-motion:reduce){.v-c1.js .c-wash > img,.v-c1.js .c-wash > canvas,.v-c1.js .c1-mist,.v-c1.js .c1-tag{animation:none}}
.c1-mist{display:none}                                  /* the painting has its own drifting mist now; this older overlay only greyed out the notes */
.c1-tag.is-lake{opacity:var(--lo)}                      /* the title lands where the lake is, so this note steps aside completely */
/* opening state set before any script runs, so nothing jumps when the opening starts */
@media(min-width:861px) and (prefers-reduced-motion:no-preference){.js.v-c1 .c-p1{--t1:0;--t2:0;--so:0;--lo:1}}

/* ── Home, 2026-10-08: the scroll has three panels (hero / 壹 cases / 貳 workshop collage); the two offers carry their own links. ── */
@media(min-width:861px){.c-scroll.hm-three{height:360vh}}
.hm-head{display:flex;flex-direction:column;align-items:center;gap:22px;flex:none;position:relative;z-index:2}
.hm-head .num{font-family:var(--serif);font-weight:300;font-size:clamp(40px,5vw,84px);color:var(--terra);padding-top:9svh;line-height:1}
.hm-vlabel{writing-mode:vertical-rl;text-orientation:upright;font-size:clamp(15px,1.2vw,19px);letter-spacing:.5em;color:var(--terra);font-weight:500}
/* frame 2: the two cases on the night panel */
.hm-cases>img{width:58%!important;opacity:.2!important}
.hm-case-grid{flex:1 1 0;min-width:0;align-self:stretch;display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(32px,4.6vw,84px);row-gap:clamp(18px,3svh,32px);align-content:center;padding:calc(var(--nav-h,76px) + 2svh) 0 6svh;position:relative;z-index:2}
.hm-cases .x-case{color:var(--c-paper);border-top-color:rgba(246,241,232,.5)}
.hm-cases :is(.x-case-brand,.x-case-cap,.x-case-sum,.x-case-stat,.x-case-label,.x-case-stat small){color:inherit}
.hm-cases .x-case-cap{border-bottom-color:rgba(246,241,232,.22)}
.hm-cases .x-link{color:var(--terra)}
.hm-cases .x-case-stat{font-size:min(22svh,13vw)}
@media(min-width:861px) and (max-height:800px){.hm-cases .x-case-stat{font-size:min(16svh,13vw)}.hm-case-grid{row-gap:12px;padding-bottom:4svh}}
.hm-scale{display:inline-block;margin-left:1.1em;padding-left:1.1em;border-left:1px solid rgba(246,241,232,.4);font-size:.86em;letter-spacing:.08em;line-height:1.2}
@media(max-width:860px){.hm-sep{display:none}.hm-own{display:block}.hm-scale{display:block;margin:10px 0 0;padding:0;border:0;font-size:.74em}}
.hm-cases .x-case-stat .num{font-size:inherit;color:inherit;padding-top:0}
.hm-all{grid-column:1 / -1;justify-self:start}
/* the two cases share one structure so their rows line up: label, name + scale, the big figure (reach), a second figure (result), one line of summary */
@media(min-width:861px){.hm-case-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.hm-cases .x-case-stat.hm-stat2{font-size:min(9.5svh,5.2vw);margin-top:clamp(12px,2svh,22px);gap:.22em;line-height:1}
.hm-cases .hm-stat2 i{font-style:normal;font-size:.62em;color:var(--terra);transform:translateY(-.12em)}
.hm-cases .hm-stat2 small{font-size:.26em;margin-left:.6em}
.hm-cases .hm-stat2 .num + small{margin-left:.1em}.hm-cases .hm-stat2 small + i{margin-left:.3em}
.hm-cases .x-case-cap{margin-top:clamp(10px,1.6svh,20px);padding-bottom:clamp(10px,1.6svh,20px)}
.hm-cases .x-case-sum{margin:clamp(12px,1.8svh,22px) 0 clamp(10px,1.6svh,18px)}
/* frame 3: workshop collage on paper */
.hm-collage{display:flex;flex-direction:row-reverse;align-items:flex-start;gap:clamp(24px,3.4vw,64px);padding:0 clamp(28px,5vw,100px)}
.hm-collage h2{font-family:var(--serif);font-weight:300;font-size:min(7.2svh,6.4vw);line-height:1.28;white-space:nowrap;padding-top:9svh;color:var(--ink);flex:none}
.hm-mwrap{flex:1 1 0;min-width:0;align-self:stretch;display:flex;flex-direction:column;padding:calc(var(--nav-h,76px) + 3svh) 0 6svh}
/* the collage fills whatever box is left beside the title; tiles are cropped to fit (object-fit), so it has no fixed shape.
   Two layouts: three rows by default, two rows when the window is much wider than tall. */
.hm-mosaic{flex:1 1 0;min-height:0;display:grid;gap:8px;grid-template-columns:repeat(24,minmax(0,1fr));grid-template-rows:1.35fr 1fr 1fr}
.hm-band{display:contents}
.hm-band figure{margin:0;min-width:0;min-height:0;overflow:hidden;background:var(--paper-deep)}
.hm-band :is(img,video){display:block;width:100%;height:100%;object-fit:cover;object-position:50% 35%}
.hm-t-r11{grid-area:1/1/2/15}.hm-t-vid{grid-area:1/15/2/20}.hm-t-b06{grid-area:1/20/2/25}
.hm-t-a15{grid-area:2/1/3/5}.hm-t-r08{grid-area:2/5/3/13}.hm-t-b08{grid-area:2/13/3/17}.hm-t-b03{grid-area:2/17/3/21}.hm-t-a11{grid-area:2/21/3/25}
.hm-t-b05{grid-area:3/1/4/5}.hm-t-r01{grid-area:3/5/4/15}.hm-t-b00{grid-area:3/15/4/20}.hm-t-b01{grid-area:3/20/4/25}
@media(min-width:861px) and (min-aspect-ratio:7/4){
  .hm-mosaic{grid-template-columns:repeat(60,minmax(0,1fr));grid-template-rows:1.25fr 1fr}
  .hm-t-a11,.hm-t-b01{display:none}
  .hm-t-r11{grid-area:1/1/2/25}.hm-t-vid{grid-area:1/25/2/34}.hm-t-b06{grid-area:1/34/2/43}.hm-t-a15{grid-area:1/43/2/52}.hm-t-b05{grid-area:1/52/2/61}
  .hm-t-r08{grid-area:2/1/3/20}.hm-t-b08{grid-area:2/20/3/27}.hm-t-b03{grid-area:2/27/3/35}.hm-t-r01{grid-area:2/35/3/51}.hm-t-b00{grid-area:2/51/3/61}
}
.hm-more{margin-top:clamp(20px,2.2vw,30px);display:inline-flex}
/* workshop row: the upstream part of the same painting (each stream is a person); the red tree stays with the adoption row */
.x-photo.is-wash.hm-upstream img{left:0;top:-36%}
@media(max-width:860px){
  .c-panel.hm-cases,.c-panel.hm-collage{height:auto;min-height:0;flex-direction:column;align-items:stretch;padding:72px 16px 64px;gap:28px}
  .hm-head{flex-direction:row;align-items:baseline;gap:14px}
  .hm-head .num{padding-top:0;font-size:34px}
  .hm-vlabel{writing-mode:horizontal-tb;font-size:16px;letter-spacing:.4em}
  .hm-case-grid{grid-template-columns:1fr;row-gap:64px;padding:0}
  .hm-cases .x-case-stat{font-size:34vw}
  .hm-cases .x-case-stat.hm-stat2{font-size:15vw}
  .hm-cases>img{width:100%!important;opacity:.14!important}
  .hm-collage h2{writing-mode:horizontal-tb;white-space:normal;padding-top:0;font-size:8.6vw;line-height:1.4}
  .hm-mwrap{padding:0;display:block}
  .hm-mosaic{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:none;gap:6px;grid-auto-flow:dense}
  .hm-band figure{grid-area:auto;aspect-ratio:4/5}
  .hm-band figure.is-wide{grid-column:1 / -1;aspect-ratio:3/2}
}
/* English home: text runs horizontally and the track unrolls left to right, so the same three panels are laid out differently.
   This file is loaded on the English home only for the hm- block; everything above is scoped to .v-c1 (Chinese home). */
@media(min-width:861px){
  html[lang="en"] .hm-cases{justify-content:flex-start;gap:clamp(12px,2.2svh,26px);padding:calc(var(--nav-h,76px) + 3svh) var(--gx) 5svh}
  html[lang="en"] .hm-head{flex-direction:row;align-items:baseline}
  html[lang="en"] .hm-head .num{padding-top:0;font-size:clamp(22px,2.2vw,38px)}
  html[lang="en"] .hm-case-grid{padding:0;width:100%}
  html[lang="en"] .hm-collage{flex-direction:row;align-items:stretch;padding:0 var(--gx)}
  html[lang="en"] .hm-ctext{flex:0 0 min(30%,440px);display:flex;flex-direction:column;gap:clamp(14px,2.4svh,28px);padding-top:calc(var(--nav-h,76px) + 3svh)}
  html[lang="en"] .hm-collage h2{white-space:normal;padding-top:0;font-size:clamp(30px,3.4vw,64px);line-height:1.04;letter-spacing:-.02em;text-wrap:balance}
}
html[lang="en"] .hm-scale{display:block;margin:8px 0 0;padding:0;border:0;font-size:.74em;letter-spacing:.01em}
html[lang="en"] .hm-cases .x-case-stat small{letter-spacing:.04em}
html[lang="en"] .hm-cases .x-case-stat .num{font-size:inherit;padding:0}   /* c.css sizes the English panel number (.c-p2 .num); the case figures must not pick that up */
@media(min-width:861px){
  html[lang="en"] .hm-cases .x-case-stat{font-size:min(13svh,9vw);margin-top:clamp(8px,1.4svh,16px)}
  html[lang="en"] .hm-cases .x-case-stat.hm-stat2{font-size:min(7svh,4vw)}
  html[lang="en"] .hm-cases .x-case{padding-top:clamp(14px,2svh,24px)}
  html[lang="en"] .hm-case-grid{row-gap:clamp(10px,1.6svh,18px)}
}
@media(min-width:861px) and (max-height:800px){
  html[lang="en"] .hm-cases .x-case-stat{font-size:min(10svh,9vw)}
  html[lang="en"] .hm-cases .x-case-stat.hm-stat2{font-size:min(6svh,4vw)}
  html[lang="en"] .hm-cases{padding-bottom:3svh}
  html[lang="en"] .hm-cases .x-case-sum{display:none}
}
@media(max-width:860px){
  html[lang="en"] .c-panel.hm-cases{padding:72px 16px 64px}
  html[lang="en"] .hm-head .num{font-size:22px}
  html[lang="en"] .hm-ctext{display:flex;flex-direction:column;gap:14px}
  html[lang="en"] .hm-collage h2{letter-spacing:-.01em;line-height:1.15}
}