/* 首頁 v2 — cinematic scroll inside the C2 system (GSAP + ScrollTrigger, no scroll hijacking) */
.v2 .pre{position:fixed;inset:0;z-index:100;background:var(--ink);color:var(--ver);display:flex;align-items:flex-end;padding:0 var(--g) 6vh;animation:pre-out .5s ease-in 2.8s forwards}
.pre__n{font-weight:200;font-size:clamp(96px,18vw,320px);line-height:.85;font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.pre__line{position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--ver);transform-origin:left;transform:scaleX(0)}
@keyframes pre-out{to{opacity:0;visibility:hidden}}
@media (prefers-reduced-motion:reduce){.v2 .pre{display:none}}

/* hero */
.v2-hero{position:relative;min-height:calc(100svh - 75px);display:grid;grid-template-rows:auto 1fr auto;padding:clamp(28px,5vh,56px) var(--g) clamp(28px,5vh,48px);overflow:hidden}
.v2-hero__thread{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.v2-hero__thread path{fill:none;stroke:var(--ver);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.v2-eyebrow{color:var(--ver);position:relative}
.v2-title{align-self:center;font-weight:200;font-size:clamp(52px,11.4vw,224px);line-height:1.02;letter-spacing:-.01em;position:relative;word-break:keep-all}
.v2-title .ln{display:block;overflow:hidden;padding-bottom:.06em}
.v2-title .ln:last-of-type{padding-left:.9em}
.v2-title em{font-style:normal;color:var(--ver)}
.v2-title .ch{display:inline-block;will-change:transform}
.v2-hero__foot{position:relative;display:grid;grid-template-columns:minmax(0,26em) auto;gap:32px;align-items:end;justify-content:space-between}
.v2-hero .lead{font-size:18px;line-height:1.85;color:var(--paper)}
.v2-hero .cta--line:hover{background:var(--paper);color:var(--ink)}
.v2-cue{position:absolute;right:var(--g);top:50%;writing-mode:vertical-rl;color:var(--mute-ink)}

/* statement — words light up with scroll */
.v2-state{padding:clamp(120px,20vh,240px) var(--g)}
.v2-state__text{font-weight:200;font-size:clamp(30px,4.4vw,80px);line-height:1.45;max-width:17em}
.v2-state__text .w{display:inline}

/* map — signature (pinned on desktop) */
.v2-map__pin{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,3vw,56px);align-items:center;padding:clamp(32px,6vh,72px) var(--g);min-height:100svh}
.v2-map__left h2{font-weight:200;font-size:clamp(44px,5.4vw,100px);line-height:1.08;margin:20px 0 32px}
.v2-map__left .label{color:var(--mute-ink)}
.v2-map__count{font-variant-numeric:tabular-nums;color:var(--mute-ink)}
.v2-map__count b{font-weight:200;font-size:clamp(56px,6vw,104px);color:var(--ver);line-height:1}
.v2-map__hint{margin-top:20px;color:var(--mute-ink);font-size:15px;max-width:18em}
.v2-map__map{width:min(100%,calc((100svh - 120px)*.684));justify-self:center}
.v2-map .journey{fill:none;stroke:var(--ver);stroke-width:2.6;stroke-linecap:round}
.v2-map .place.is-step circle{fill:var(--ver);stroke:var(--ver)}
.v2-map__stops{position:relative;aspect-ratio:4/5;max-height:70svh}
.stop{position:absolute;inset:0;margin:0;display:flex;flex-direction:column}
.stop a{display:block;flex:1;overflow:hidden;min-height:0}
.stop img{width:100%;height:100%;object-fit:cover}
.stop figcaption{padding-top:14px}.stop .label{color:var(--mute-ink);display:block}
.stop b{display:block;font-size:clamp(18px,1.5vw,24px);font-weight:700;line-height:1.4;margin-top:4px}

/* numbers */
.v2-nums{padding:clamp(96px,14vh,180px) var(--g)}
.v2-nums__grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:2px solid var(--ink)}
.v2-nums__grid>div{padding:28px 24px 0 0}.v2-nums__grid>div+div{border-left:1px solid var(--line);padding-left:24px}
.v2-nums b{display:block;font-weight:200;font-size:clamp(64px,8.4vw,160px);line-height:1;color:var(--ver);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.v2-nums span{display:block;margin-top:14px;color:var(--mute)}

/* works — horizontal on desktop */
.v2-works{background:var(--paper)}
.v2-works__pin{min-height:100svh;display:flex;flex-direction:column;justify-content:center;gap:clamp(28px,5vh,56px);padding:clamp(40px,7vh,80px) 0;overflow:hidden}
.v2-works__head{display:flex;align-items:end;justify-content:space-between;gap:24px;padding:0 var(--g)}
.v2-works__head h2{font-weight:200;font-size:clamp(44px,5.4vw,100px);line-height:1.08;margin-top:16px}
.v2-works__head .label{color:var(--mute)}
.v2-works__track{display:flex;gap:clamp(20px,2.4vw,40px);padding:0 var(--g);width:max-content;will-change:transform}
.hcard{display:block;width:clamp(260px,24vw,400px);text-decoration:none;flex:none}
.hcard__img{display:block;aspect-ratio:4/5;overflow:hidden;background:var(--paper-2)}
.hcard__img img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.22,1,.36,1)}
.hcard:hover .hcard__img img{transform:scale(1.05)}
.hcard .label{display:block;margin-top:16px;color:var(--mute)}
.hcard b{display:block;font-size:clamp(17px,1.3vw,21px);line-height:1.45;margin-top:4px}
.hcard:hover b{color:var(--ver)}

/* services hover image */
.v2-peek{position:fixed;left:0;top:0;width:260px;pointer-events:none;z-index:25;opacity:0;transform:translate(-50%,-50%) scale(.85);transition:opacity .2s cubic-bezier(.22,1,.36,1),transform .3s cubic-bezier(.22,1,.36,1)}
.v2-peek.is-on{opacity:1;transform:translate(-50%,-50%) scale(1)}
.v2-peek img{width:100%;aspect-ratio:4/5;object-fit:cover;box-shadow:0 30px 60px -24px rgba(21,17,14,.55)}

/* stories thread through the heading */
.stories .sec__head>div{position:relative}
.v2-st__thread{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:1}
.v2-st__thread path{fill:none;stroke:var(--ver);stroke-width:3;stroke-linecap:round}

/* close */
.v2-close h2 span:last-child{padding-left:1.1em}
.mag{will-change:transform}

@media (max-width:900px){
  .v2-hero__foot{grid-template-columns:1fr}
  .v2-cue{display:none}
  .v2-title .ln:last-of-type{padding-left:0}
  .v2-map__pin{grid-template-columns:1fr;min-height:0}
  .v2-map__map{width:100%;max-width:420px}
  .v2-map__stops{aspect-ratio:auto;max-height:none;display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(var(--g)*-1);padding:0 var(--g)}
  .stop{position:relative;inset:auto;flex:none;width:72vw;scroll-snap-align:start}
  .stop a{aspect-ratio:4/5;flex:none}
  .v2-nums__grid{grid-template-columns:1fr 1fr}
  .v2-nums__grid>div:nth-child(3){border-left:0;padding-left:0}
  .v2-nums__grid>div:nth-child(n+3){margin-top:28px}
  .v2-works__head{flex-direction:column;align-items:start}
  .v2-works__pin{min-height:0}
  .v2-works__track{width:auto;overflow-x:auto;scroll-snap-type:x mandatory}
  .hcard{width:68vw;scroll-snap-align:start}
  .v2-close h2 span:last-child{padding-left:0}
}
.v2-map__stops.is-static{aspect-ratio:auto;max-height:none;display:grid;grid-template-columns:1fr 1fr;gap:16px}
.v2-map__stops.is-static .stop{position:relative;inset:auto}
.v2-map__stops.is-static .stop a{aspect-ratio:4/5;flex:none}

/* Lenis: native smooth-scroll must be off while it drives the wheel */
html.lenis-on{scroll-behavior:auto}
html.lenis-on.lenis-stopped{overflow:hidden}
.v2-close__data{margin-top:24px;font-size:17px;font-weight:700;max-width:40em}
.v2-close h2{font-size:clamp(36px,8vw,150px)}
.v2-state__em{display:block;font-style:normal;color:var(--ver);margin-top:.5em}
.v2-state__em .seg{display:inline-block;white-space:nowrap}
/* affordance without words: places not yet tied breathe softly; stops once pulled */
@media (prefers-reduced-motion:no-preference) and (hover:hover){
  .v2-map .place:not(.hq):not(.is-kept) circle{transform-box:fill-box;transform-origin:center;animation:breathe 2.4s ease-in-out infinite}
  .v2-map .place:nth-of-type(2n) circle{animation-delay:-1.2s}
}
@keyframes breathe{50%{transform:scale(1.45)}}
/* map stops: each photo at its own proportions (16:9 / 3:2 / 1:1), stacked in one cell — no forced 4:5 crop */
.v2-map__stops{display:grid;aspect-ratio:auto;max-height:none;align-items:center}
.stop{position:relative;inset:auto;grid-area:1/1;display:block}
.stop a{display:block;aspect-ratio:auto}
.stop img{width:100%;height:auto;max-height:62svh;object-fit:contain;object-position:left bottom}
.hcard__img{aspect-ratio:1}                                   /* works covers are square */
@media (max-width:900px){.v2-map__stops{display:flex}.stop{grid-area:auto}.stop img{max-height:none}}
/* services: project image sits in its own column, never over the text */
.v2-svc .svc a{grid-template-columns:80px minmax(0,1fr) minmax(0,1.1fr) 112px}
.v2-svc .svc .th{display:block;width:112px;aspect-ratio:1;overflow:hidden;background:var(--paper-2);justify-self:end}
.v2-svc .svc .th img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.22,1,.36,1)}
.v2-svc .svc a:hover .th img{transform:scale(1.06)}
@media (max-width:900px){.v2-svc .svc a{grid-template-columns:44px minmax(0,1fr) 84px}.v2-svc .svc .th{grid-row:1/3;grid-column:3;width:84px}}

/* FAQ (parity with the live homepage's visible FAQ) — native details, readable without JS */
.v2-faq__list{max-width:880px;border-bottom:1px solid var(--line,currentColor)}
.v2-faq details{border-top:1px solid var(--line,currentColor);padding:20px 0}
.v2-faq summary{cursor:pointer;font-weight:700;font-size:clamp(17px,1.5vw,20px);line-height:1.6;text-wrap:pretty;list-style:none;display:flex;justify-content:space-between;gap:24px}
.v2-faq summary::-webkit-details-marker{display:none}
.v2-faq summary::after{content:"+";font-weight:200;font-size:1.4em;line-height:1;color:var(--ver)}
.v2-faq details[open] summary::after{content:"–"}
.v2-faq summary:focus-visible{outline:2px solid var(--ver);outline-offset:4px}
.v2-faq details p{margin:12px 0 0;max-width:68ch;line-height:1.85;text-wrap:pretty}