/* scoped by scripts/v4/sync-assets.mjs: group */
/* pages_group · ../../group/index.html About KONST: quiet editorial layout on the 12-column grid, hairline dividers */
body.gp:where([data-v4~="group"]){--g:var(--col-gap,24px)}
/* section rhythm and section heads use the site system (.sec = var(--sec), main .sh = 60px) */

/* hero */
:where(body[data-v4~="group"]) .gp-hero{padding-block:72px 0}
:where(body[data-v4~="group"]) .gp-hero .crumb{position:static;margin:0 0 72px}
:where(body[data-v4~="group"]) .gp-hrow{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--g);row-gap:33px;align-items:end;padding-bottom:72px;border-bottom:1px solid var(--line)}
:where(body[data-v4~="group"]) .gp-ht{grid-column:1/8;display:grid;gap:24px}
:where(body[data-v4~="group"]) .gp-h1{font:500 clamp(45px,5.8vw,84px)/1.08 var(--font);color:var(--ink)}
:where(body[data-v4~="group"]) .gp-hd{grid-column:8/13;display:grid;gap:27px;justify-items:start}
:where(body[data-v4~="group"]) .gp-hd .lead{font-size:18px;line-height:1.8;color:var(--body);max-width:none}
:where(body[data-v4~="group"]) .gp-hd .actions{display:flex;flex-wrap:wrap;gap:12px}
:where(body[data-v4~="group"]) .gp-pics{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--g);row-gap:var(--g);padding-block:48px 0}
:where(body[data-v4~="group"]) .gp-pics .photo{border-radius:18px;aspect-ratio:2/1;height:auto}
:where(body[data-v4~="group"]) .gp-p1{grid-column:1/-1}
:where(body[data-v4~="group"]) .gp-p1 img{object-position:center 42%}
@media (max-width:981px){:where(body[data-v4~="group"]) .gp-ht,:where(body[data-v4~="group"]) .gp-hd{grid-column:1/-1}:where(body[data-v4~="group"]) .gp-hero .crumb{margin-bottom:39px}:where(body[data-v4~="group"]) .gp-hrow{padding-bottom:48px}}
@media (max-width:759px){:where(body[data-v4~="group"]) .gp-hero{padding-top:39px}:where(body[data-v4~="group"]) .gp-h1{font-size:45px}:where(body[data-v4~="group"]) .gp-hd .lead{font-size:15px}:where(body[data-v4~="group"]) .gp-pics{padding-top:30px}:where(body[data-v4~="group"]) .gp-pics .photo{aspect-ratio:3/2}}

/* brand spirit: brand orange band, white type, blooming line mark */
:where(body[data-v4~="group"]) .gp-spirit{padding-block:var(--sec);background:#FE5000;color:#fff}
:where(body[data-v4~="group"]) .gp-sp{display:grid;gap:39px}
:where(body[data-v4~="group"]) .gp-spirit .eyebrow.on-dark{color:rgba(255,255,255,.86)}
:where(body[data-v4~="group"]) .gp-spirit .eyebrow.on-dark::before{background:#fff}
:where(body[data-v4~="group"]) .gp-sp-top{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--g);row-gap:24px;align-items:end}
:where(body[data-v4~="group"]) .gp-sp-en{grid-column:1/-1;grid-row:1;font:500 clamp(48px,7.4vw,108px)/1.02 var(--latin);color:#fff;margin:0}
:where(body[data-v4~="group"]) .gp-sp-en span{color:#FFD9C2}
:where(body[data-v4~="group"]) .gp-bloom{grid-column:10/13;grid-row:1;justify-self:end;align-self:end;width:min(100%,204px);height:auto;overflow:visible;margin-bottom:0}
:where(body[data-v4~="group"]) .gp-sp-foot{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--g);row-gap:12px;padding-top:30px;border-top:1px solid rgba(255,255,255,.36)}
:where(body[data-v4~="group"]) .gp-sp-zh{grid-column:1/6;font-size:21px;line-height:1.6;color:#fff}
:where(body[data-v4~="group"]) .gp-sp-p{grid-column:8/13;font-size:15px;line-height:1.85;color:rgba(255,255,255,.9)}
@media (max-width:1260px){:where(body[data-v4~="group"]) .gp-bloom{grid-column:1/-1;grid-row:1;justify-self:end;width:156px;margin:0}:where(body[data-v4~="group"]) .gp-sp-en{grid-row:2}}
@media (max-width:981px){:where(body[data-v4~="group"]) .gp-sp-zh,:where(body[data-v4~="group"]) .gp-sp-p{grid-column:1/-1}}
@media (max-width:759px){:where(body[data-v4~="group"]) .gp-sp{gap:27px}:where(body[data-v4~="group"]) .gp-sp-en{font-size:45px}:where(body[data-v4~="group"]) .gp-sp-zh{font-size:18px}:where(body[data-v4~="group"]) .gp-bloom{width:120px}}
/* dial mark, one slot missing (icon-system vocabulary): 2-unit monoline on the 48 grid, flat terminals, mitre joins,
   white strokes, light-peach square centre. On reveal the ring strokes draw in sequence (the up-right slot stays empty),
   the forward stroke draws out last, then a peach pulse runs along it every few seconds.
   Fully drawn and static under reduced motion or without JS. */
:where(body[data-v4~="group"]) .gp-bloom .dz-r,:where(body[data-v4~="group"]) .gp-bloom .dz-f,:where(body[data-v4~="group"]) .gp-bloom .dz-u{fill:none;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter}
:where(body[data-v4~="group"]) .gp-bloom .dz-r,:where(body[data-v4~="group"]) .gp-bloom .dz-f{stroke:#fff}
:where(body[data-v4~="group"]) .gp-bloom .dz-u{stroke:#FFD6B0;opacity:0}
:where(body[data-v4~="group"]) .gp-bloom .dz-c{fill:#FFD6B0}
:where(body[data-v4~="group"]) .gp-bloom .dz-c{transform-box:view-box;transform-origin:50% 50%}
@media (prefers-reduced-motion:no-preference){
 html.js :where(body[data-v4~="group"]) .gp-bloom:not(.in) .dz-r,html.js :where(body[data-v4~="group"]) .gp-bloom:not(.in) .dz-f{stroke-dasharray:1 1;stroke-dashoffset:1}
 html.js :where(body[data-v4~="group"]) .gp-bloom:not(.in) .dz-c{opacity:0}
 :where(body[data-v4~="group"]) .gp-bloom.in .dz-c{animation:dzC .5s cubic-bezier(.22,1,.36,1) both}
 :where(body[data-v4~="group"]) .gp-bloom.in .dz-r{stroke-dasharray:1 1;animation:dzD .45s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(.2s + var(--i) * 55ms)}
 :where(body[data-v4~="group"]) .gp-bloom.in .dz-f{stroke-dasharray:1 1;animation:dzD .8s cubic-bezier(.65,0,.35,1) 1.25s both}
 :where(body[data-v4~="group"]) .gp-bloom.in .dz-u{stroke-dasharray:.14 1.2;animation:dzU 4.2s cubic-bezier(.45,0,.55,1) 2.4s infinite}
}
@keyframes dzC{from{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}
@keyframes dzD{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes dzU{0%{stroke-dashoffset:.14;opacity:1}38%{stroke-dashoffset:-1;opacity:1}39%,100%{stroke-dashoffset:-1;opacity:0}}

/* perspective: heading cols 1-6, prose cols 8-12 (no photo) */
:where(body[data-v4~="group"]) .gp-2{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--g);row-gap:39px;align-items:start}
:where(body[data-v4~="group"]) .gp-2l{grid-column:1/7}
:where(body[data-v4~="group"]) .gp-2l .sh{margin-bottom:0}
:where(body[data-v4~="group"]) .gp-2r{grid-column:8/13;font-size:18px;line-height:1.9}
:where(body[data-v4~="group"]) .gp-2r blockquote{margin:39px 0 0;padding:27px 0 0;border:0;border-top:1px solid var(--ink);font-size:21px;line-height:1.6;color:var(--ink)}
@media (min-width:981px){:where(body[data-v4~="group"]) .gp-2l{position:sticky;top:120px}}
@media (max-width:981px){:where(body[data-v4~="group"]) .gp-2l,:where(body[data-v4~="group"]) .gp-2r{grid-column:1/-1}:where(body[data-v4~="group"]) .gp-2r{font-size:15px}}

/* mission / vision */
:where(body[data-v4~="group"]) .gp-mv{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--g)}
:where(body[data-v4~="group"]) .gp-card{display:grid;gap:12px;align-content:start;background:#fff;border-radius:18px;padding:36px 33px 39px}
:where(body[data-v4~="group"]) .gp-card .ic{width:39px;height:39px;color:var(--orange);margin-bottom:27px}
:where(body[data-v4~="group"]) .gp-card .k{font:500 12px/1.4 var(--latin);text-transform:uppercase;color:var(--orange-d);padding-bottom:15px;border-bottom:1px solid var(--line)}
:where(body[data-v4~="group"]) .gp-card h3{font-size:21px;line-height:1.45;margin-top:6px}
:where(body[data-v4~="group"]) .gp-card p{font-size:15px;line-height:1.8}
@media (max-width:981px){:where(body[data-v4~="group"]) .gp-mv{grid-template-columns:1fr}:where(body[data-v4~="group"]) .gp-card{padding:27px 24px 30px}:where(body[data-v4~="group"]) .gp-card .ic{margin-bottom:12px}}

/* three brands */
:where(body[data-v4~="group"]) .gp-brands{border-top:1px solid var(--line)}
:where(body[data-v4~="group"]) .gp-brand{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--g);row-gap:27px;align-items:center;padding-block:48px;border-bottom:1px solid var(--line)}
:where(body[data-v4~="group"]) .gp-brand .ill{grid-column:1/7;background:var(--warm);border-radius:18px;padding:36px 48px;display:flex;justify-content:center}
:where(body[data-v4~="group"]) .gp-brand .ill svg{width:100%;max-width:459px;height:auto}
:where(body[data-v4~="group"]) .gp-brand .body{grid-column:8/13;display:grid;gap:12px;justify-items:start}
:where(body[data-v4~="group"]) .gp-brand .n{font:500 12px/1.4 var(--latin);color:var(--muted)}
:where(body[data-v4~="group"]) .gp-brand .name{font:500 clamp(30px,2.9vw,42px)/1.15 var(--latin);color:var(--ink)}
:where(body[data-v4~="group"]) .gp-brand .role{font-size:18px;color:var(--ink);font-weight:500;margin-bottom:6px}
:where(body[data-v4~="group"]) .gp-brand p{font-size:15px;line-height:1.8}
:where(body[data-v4~="group"]) .gp-brand .flow{color:var(--orange-d);font-weight:500;padding-top:12px;border-top:1px solid var(--line);justify-self:stretch}
:where(body[data-v4~="group"]) .gp-brand .actions{margin-top:9px}
@media (max-width:981px){:where(body[data-v4~="group"]) .gp-brand .ill,:where(body[data-v4~="group"]) .gp-brand .body{grid-column:1/-1}:where(body[data-v4~="group"]) .gp-brand{padding-block:33px}:where(body[data-v4~="group"]) .gp-brand .ill{padding:24px}}

/* evidence: four stats across the 12 columns (3 each), note underneath (no photo) */
:where(body[data-v4~="group"]) .gp-ev{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--g)}
:where(body[data-v4~="group"]) .gp-evr{grid-column:1/-1;display:grid;gap:27px}
body.gp:where([data-v4~="group"]) .gp-ev .stats{grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--g);border-top:0}
body.gp:where([data-v4~="group"]) .gp-ev .stats>div{border-top:1px solid rgba(20,18,16,.14);border-left:0;padding:24px 0 30px}
body.gp:where([data-v4~="group"]) .gp-ev .stats .v{font-size:clamp(39px,4vw,57px)}
@media (max-width:981px){body.gp:where([data-v4~="group"]) .gp-ev .stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:759px){body.gp:where([data-v4~="group"]) .gp-ev .stats .v{font-size:33px}}

/* milestones timeline: one connecting line, a node per milestone */
:where(body[data-v4~="group"]) .gp-tl{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--g);position:relative}
:where(body[data-v4~="group"]) .gp-tl::before{content:"";position:absolute;left:0;right:0;top:6px;height:1px;background:var(--line-2)}
:where(body[data-v4~="group"]) .gp-tl li{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:9px;padding:45px 24px 0 0}
:where(body[data-v4~="group"]) .gp-tl .dot{position:absolute;left:0;top:0;width:12px;height:12px;border-radius:50%;background:#fff;border:2px solid var(--ink)}
:where(body[data-v4~="group"]) .gp-tl li.now .dot{background:var(--orange);border-color:var(--orange);box-shadow:0 0 0 6px rgba(254,80,0,.16)}
:where(body[data-v4~="group"]) .gp-tl .d{font:500 27px/1 var(--latin);color:var(--ink)}
:where(body[data-v4~="group"]) .gp-tl li.now .d{color:var(--orange)}
:where(body[data-v4~="group"]) .gp-tl .k{font:500 12px/1.4 var(--latin);text-transform:uppercase;color:var(--muted);margin-top:9px}
:where(body[data-v4~="group"]) .gp-tl h3{font-size:18px;line-height:1.55;min-height:3.1em}
:where(body[data-v4~="group"]) .gp-tl .link{margin-top:auto}
:where(body[data-v4~="group"]) .gp-tl h3{margin-bottom:15px}
:where(body[data-v4~="group"]) .gp-mpics{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--g);row-gap:var(--g);margin-top:72px;align-items:start}
/* two equal 3:2 photos (the handshake keeps every face in frame at its native ratio) */
:where(body[data-v4~="group"]) .gp-mpics>figure{grid-column:span 6}
:where(body[data-v4~="group"]) .gp-mpics .photo{border-radius:18px;aspect-ratio:3/2}
:where(body[data-v4~="group"]) .gp-mpics .gp-hs img{object-position:center 30%}
@media (max-width:981px){
 :where(body[data-v4~="group"]) .gp-tl{grid-template-columns:1fr;row-gap:36px;padding-left:36px}
 :where(body[data-v4~="group"]) .gp-tl::before{left:6px;right:auto;top:6px;bottom:6px;width:1px;height:auto}
 :where(body[data-v4~="group"]) .gp-tl li{padding:0}
 :where(body[data-v4~="group"]) .gp-tl .dot{left:-36px}
 :where(body[data-v4~="group"]) .gp-tl .d{font-size:21px}
 :where(body[data-v4~="group"]) .gp-tl h3{min-height:0;margin-bottom:0}
 :where(body[data-v4~="group"]) .gp-tl .link{margin-top:6px}
 :where(body[data-v4~="group"]) .gp-mpics>figure{grid-column:1/-1}
 :where(body[data-v4~="group"]) .gp-mpics{margin-top:48px}
}

:where(body[data-v4~="group"]) *,:where(body[data-v4~="group"]) *::before,:where(body[data-v4~="group"]) *::after{letter-spacing:0!important}
:where(body[data-v4~="group"]) .gp-hero{padding-bottom:120px}
@media (max-width:1101px){:where(body[data-v4~="group"]) .gp-hero{padding-bottom:96px}}
@media (max-width:759px){:where(body[data-v4~="group"]) .gp-hero{padding-bottom:60px}}
/* milestone count: four nodes on one line (desktop); the mobile rule above stays a single column */
@media (min-width:981px){:where(body[data-v4~="group"]) .gp-tl.n4{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* section rhythm (2026-09-28): white hero, orange spirit, white perspective / mission / brands (one hairline between),
   grey evidence band, white milestones, orange CTA. Mission cards sit on #F6F5F2 in a white section;
   a white section that follows a tinted band gets no hairline at the band edge. */
:where(body[data-v4~="group"]) .gp-mvsec .gp-card{background:#F6F5F2}
body.gp:where([data-v4~="group"]) .sec:is(.tint,.warm)+.sec::before{display:none}
body.gp:where([data-v4~="group"]) .sec:is(.tint,.warm)+.sec{border-top:0}