/* ==========================================================================
   Propel Digital — the marketing site.

   Laid out after a flagship product page: a photo hero with a website
   rising out of it, a tab bar that follows you down the page, a white
   design gallery, then warm-dark "bento" groups of feature cards whose
   little screens animate once they scroll into view.

   Bilingual copy is written twice in the markup (.zh / .en) and this file
   hides the one not in use.
   ========================================================================== */

:root{
  --bg:#000;
  --ink:#fff;
  --ink-2:#C9C5C1;
  --ink-3:#8E8A86;
  --warm:#1D1A19;          /* the bento sections */
  --card:#2E2A28;
  --card-2:#38332F;
  --line:rgba(255,255,255,.12);
  --line-2:rgba(255,255,255,.22);
  --wa:#25D366;
  --ok:#5BD38A;
  --max:1280px;
  --gut:clamp(16px,2.6vw,32px);
  --overlap:clamp(90px,16vw,240px);
  --f:"Inter Tight","Noto Sans HK",-apple-system,"PingFang HK","Microsoft JhengHei",system-ui,sans-serif;
  --f-hk:"Noto Sans HK","Inter Tight",-apple-system,"PingFang HK",sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
}

/* ---------------------------------------------------------------- language */
html[data-lang="zh"] .en,
html[data-lang="en"] .zh{display:none !important}

/* -------------------------------------------------------------------- base */
*,*::before,*::after{box-sizing:border-box}
/* hidden wins over any display set below (the form's reply box, the viewer) */
[hidden]{display:none !important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:84px;background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.55 var(--f);-webkit-font-smoothing:antialiased}
html[data-lang="zh"] body{font-family:var(--f-hk)}
img{display:block;max-width:100%}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
h1,h2,h3,h4,p,ol,ul{margin:0}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}
main{overflow-x:clip}
.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
/* a Chinese phrase that should wrap as one piece, not mid-phrase */
.nb{display:inline-block}

/* ----------------------------------------------------------------- buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  min-height:56px;padding:0 30px;border:1px solid #fff;border-radius:4px;
  background:#fff;color:#000;text-decoration:none;white-space:nowrap;
  font:500 15px/1 var(--f);letter-spacing:.04em;text-transform:uppercase;
  transition:background-color .25s,color .25s,border-color .25s;
}
html[data-lang="zh"] .btn{font-family:var(--f-hk);font-weight:700;letter-spacing:.08em;font-size:16px}
.btn:hover{background:transparent;color:#fff}
.btn-arrow i{font-style:normal;font-size:18px;transition:transform .3s var(--ease)}
.btn-arrow:hover i{transform:translateX(5px)}
.btn-sec{background:transparent;color:inherit;border-color:currentColor}
.btn-sec:hover{background:currentColor}
.btn-sec:hover>*{color:#000}
[data-tone="light"] .btn-sec:hover>*{color:#fff}
.btn-sm{min-height:40px;padding:0 18px;font-size:13px}
html[data-lang="zh"] .btn-sm{font-size:14px}
.btn-line{background:transparent;color:#fff}
.btn-line:hover{background:#fff;color:#000}

/* on the narrowest phones a long English label wraps instead of pushing
   its button past the screen edge */
@media (max-width:420px){
  .btn{max-width:100%;white-space:normal;text-align:center;line-height:1.25;padding-top:12px;padding-bottom:12px}
}

/* the three pulsing dots on the gallery button */
.dots{display:inline-flex;align-items:center;gap:3px}
.dots i{display:block;border-radius:50%;background:currentColor;animation:dot 1.6s var(--ease) infinite}
.dots i:nth-child(1){width:9px;height:9px}
.dots i:nth-child(2){width:6px;height:6px;animation-delay:.15s}
.dots i:nth-child(3){width:4px;height:4px;animation-delay:.3s}
@keyframes dot{50%{transform:scale(.55);opacity:.5}}

/* ------------------------------------------------------------------ header */
/* sits over the hero and scrolls away with it; the sub-bar takes over */
.hdr{
  position:absolute;top:0;left:0;right:0;z-index:40;height:72px;padding:env(safe-area-inset-top) var(--gut) 0;
  display:flex;align-items:center;justify-content:space-between;
}
.logo{display:flex;align-items:center;gap:10px;min-height:44px;text-decoration:none;font:500 18px/1 var(--f);letter-spacing:-.02em}
.logo svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:6}
.hdr-r{display:flex;align-items:center;gap:6px}
.lang-btn{display:inline-flex;align-items:center;gap:8px;padding:8px 10px;border:0;background:none;font-size:14px;font-weight:500}
.lang-btn:hover{text-decoration:underline;text-underline-offset:4px}
.lang-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5}
.hdr-cta{margin:0 6px}
.burger{width:44px;height:44px;border:0;background:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px}
.burger span{display:block;width:24px;height:1.5px;background:#fff;transition:transform .3s var(--ease)}
.burger[aria-expanded="true"] span:first-child{transform:translateY(4.25px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-4.25px) rotate(-45deg)}
body.menu-open .hdr{position:fixed;background:#000}
.menu{position:fixed;inset:72px 0 0;z-index:39;background:#000;padding:24px var(--gut) calc(40px + env(safe-area-inset-bottom));overflow:auto}
.menu:not([hidden]){animation:menuIn .35s var(--ease)}
@keyframes menuIn{from{opacity:0;transform:translateY(-10px)}}
.menu nav{max-width:var(--max);margin:0 auto;display:flex;flex-direction:column}
.menu a{padding:14px 0;border-bottom:1px solid var(--line);text-decoration:none;font:400 clamp(30px,5vw,54px)/1.15 var(--f);letter-spacing:-.03em;transition:color .2s,padding-left .3s var(--ease)}
html[data-lang="zh"] .menu a{font-family:var(--f-hk);font-weight:500;letter-spacing:0}
.menu a:hover{padding-left:12px;color:var(--ink-2)}
body.menu-open{overflow:hidden}
@media (max-width:560px){.hdr-cta{display:none}.logo span{font-size:16px}}

/* ----------------------------------------------------------------- sub-bar */
.subbar{
  position:fixed;top:calc(12px + env(safe-area-inset-top));left:var(--gut);right:var(--gut);z-index:45;
  display:flex;align-items:center;justify-content:space-between;gap:12px;pointer-events:none;
  opacity:0;transform:translateY(-14px);transition:opacity .35s var(--ease),transform .35s var(--ease);
}
.subbar.show{opacity:1;transform:none}
.subbar.show>*{pointer-events:auto}
.sb-pill{
  position:relative;isolation:isolate;display:inline-flex;align-items:center;gap:10px;height:46px;padding:0 18px;
  border:0;border-radius:999px;text-decoration:none;font-size:13px;font-weight:500;letter-spacing:.02em;
  color:#fff;transition:color .3s;
}
/* the frosted glass lives on a pseudo-element: on iOS a backdrop-filter on
   the element itself can stop its links from taking taps */
.sb-pill::before{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
  background:rgba(38,36,34,.78);-webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4);
  box-shadow:0 6px 24px -10px rgba(0,0,0,.5);transition:background-color .3s;
}
.subbar[data-tone="light"] .sb-pill{color:#111}
.subbar[data-tone="light"] .sb-pill::before{background:rgba(255,255,255,.9);box-shadow:0 6px 24px -12px rgba(0,0,0,.25),0 0 0 1px rgba(0,0,0,.05)}
.sb-home svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:6}
.sb-home span{text-transform:uppercase;letter-spacing:.06em}
.sb-tabs{padding:0 5px;gap:0}
.sb-tabs a{position:relative;z-index:1;padding:9px 15px;border-radius:999px;text-decoration:none;white-space:nowrap;opacity:.75;transition:opacity .25s}
.sb-tabs a.on,.sb-tabs a:hover{opacity:1}
.sb-ind{position:absolute;top:5px;bottom:5px;left:0;width:0;border-radius:999px;background:rgba(255,255,255,.14);transition:left .45s var(--ease),width .45s var(--ease),opacity .3s;opacity:0}
.subbar[data-tone="light"] .sb-ind{background:#EDEDED}
.sb-cta{text-transform:uppercase;letter-spacing:.06em}
.sb-drop{display:none}
.sb-drop svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;transition:transform .3s var(--ease)}
.sb-drop[aria-expanded="true"] svg{transform:rotate(180deg)}
@media (max-width:860px){
  .sb-home,.sb-cta{display:none}
  .subbar{justify-content:center}
  .sb-drop{display:inline-flex;min-width:min(100%,320px);justify-content:center;font-size:16px;height:52px}
  /* the tab pill becomes the dropdown's panel */
  .sb-tabs{position:absolute;top:60px;left:50%;width:min(100%,320px);transform:translateX(-50%);height:auto;
    flex-direction:column;align-items:stretch;padding:8px;border-radius:20px;display:none}
  .sb-tabs.open{display:flex;animation:menuIn .25s var(--ease)}
  .sb-tabs a{padding:13px 16px;font-size:16px;text-align:center}
  .sb-tabs a.on{background:rgba(255,255,255,.12)}
  .subbar[data-tone="light"] .sb-tabs a.on{background:#EDEDED}
  .sb-ind{display:none}
}

/* the phone-only button pinned to the bottom */
.mcta{
  display:none;position:fixed;left:var(--gut);right:var(--gut);bottom:calc(12px + env(safe-area-inset-bottom));z-index:44;
  min-height:56px;align-items:center;justify-content:center;border-radius:6px;background:#fff;color:#000;text-decoration:none;
  font:600 16px/1 var(--f);letter-spacing:.06em;box-shadow:0 10px 30px -10px rgba(0,0,0,.6);
  opacity:0;transform:translateY(20px);transition:opacity .35s var(--ease),transform .35s var(--ease);pointer-events:none;
}
html[data-lang="zh"] .mcta{font-family:var(--f-hk);font-weight:700;letter-spacing:.1em}
.mcta.show{opacity:1;transform:none;pointer-events:auto}
@media (max-width:860px){.mcta{display:flex}}

/* -------------------------------------------------------------------- hero */
/* flow-root keeps the preview's negative bottom margin inside the hero, so
   the hero (and its black) ends partway up the preview and the white gallery
   shows behind the rest of it */
.hero{position:relative;z-index:2;display:flow-root;background:#000;padding-top:72px}
.hero-bg{position:absolute;inset:0 0 0 0;overflow:hidden}
.hero-bg img{width:100%;height:100%;object-fit:cover;filter:brightness(.42) saturate(.85);animation:heroZoom 2.4s var(--ease) both}
.hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,0) 30%,rgba(0,0,0,0) 70%,#000)}
@keyframes heroZoom{from{transform:scale(1.12)}}
.hero-c{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center;padding:clamp(72px,12vh,140px) var(--gut) 0}
.eyebrow{font:italic 400 clamp(20px,1.8vw,26px)/1 "Instrument Serif",serif;animation:rise .9s .1s var(--ease) both}
html[data-lang="zh"] .eyebrow{font:500 clamp(16px,1.4vw,19px)/1 var(--f-hk);letter-spacing:.2em}
.hero-h{margin-top:20px;font:400 clamp(44px,6.6vw,96px)/1.02 var(--f);letter-spacing:-.045em}
/* each line slides up from behind its own edge, one after the other */
.ln{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .02em .1em;margin-bottom:-.1em}
.ln>span{display:inline-block;animation:lineUp 1.1s var(--ease) both;text-wrap:balance}
.ln:nth-of-type(1)>span{animation-delay:.15s}
.ln:nth-of-type(2)>span{animation-delay:.28s}
@keyframes lineUp{from{transform:translateY(105%)}}
html[data-lang="zh"] .hero-h{font-family:var(--f-hk);font-weight:500;letter-spacing:-.02em;line-height:1.16;font-size:clamp(36px,6vw,88px)}
.hero-c>.btn{margin-top:36px;animation:rise 1s .32s var(--ease) backwards}
@keyframes rise{from{opacity:0;transform:translateY(26px)}}

.subnav{
  position:relative;isolation:isolate;display:inline-flex;gap:2px;margin-top:clamp(48px,8vh,88px);padding:5px;border-radius:999px;
  animation:rise 1s .44s var(--ease) both;
}
.subnav::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:rgba(255,255,255,.12);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.subnav a{padding:10px 18px;border-radius:999px;text-decoration:none;font-size:14px;font-weight:500;white-space:nowrap;transition:background-color .2s}
.subnav a:hover{background:rgba(255,255,255,.14)}
@media (max-width:700px){.subnav{display:none}}

.hero-asset{
  --rise:0px;--sc:1;
  position:relative;z-index:1;max-width:1100px;margin:clamp(48px,7vh,72px) auto calc(var(--overlap) * -1);padding:0 var(--gut);
  transform:translateY(var(--rise)) scale(var(--sc));transform-origin:50% 0;animation:rise 1.2s .5s var(--ease) both;
}
.device{display:block;border-radius:14px;overflow:hidden;background:#151515;color:inherit;text-decoration:none;box-shadow:0 50px 100px -40px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.08);transition:box-shadow .4s var(--ease)}
.device:hover{box-shadow:0 50px 100px -40px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.22)}
.device-bar{display:flex;align-items:center;gap:6px;height:34px;padding:0 14px;background:#1C1C1C}
.device-bar i{width:10px;height:10px;border-radius:50%;background:#3A3A3A}
.device-bar span{margin:0 auto;padding:4px 40px;border-radius:6px;background:#262626;color:#9A9A9A;font-size:12px}
/* the bar says the preview can be opened; the address stays centred */
.device-bar{position:relative}
.device-go{position:absolute;right:14px;top:50%;transform:translateY(-50%);font-style:normal;font-size:11.5px;font-weight:600;letter-spacing:.02em;color:#8A8A8A;transition:color .2s}
.device-go span{margin:0;padding:0;background:none;color:inherit;font-size:inherit}
.device:hover .device-go{color:#fff}
@media (max-width:640px){.device-bar span{padding:4px 18px}.device-go{right:12px;font-size:11px}}

/* --------------------------------------------------- website thumbnails */
/* Each one is a small website, sized in container units so it scales as
   one picture: 100cqw is the thumbnail's own width. */
.site{
  position:relative;width:100%;aspect-ratio:16/10;overflow:hidden;container-type:inline-size;font-family:var(--f);
  transition:transform .8s var(--ease);
}
.site img{position:absolute;object-fit:cover}
.site .nv{position:absolute;top:0;left:0;right:0;z-index:2;display:flex;justify-content:space-between;align-items:center;padding:3.4cqw 4.4cqw;font-size:2.5cqw;line-height:1}
.site .nv b{font-weight:700;letter-spacing:.02em}
.site .nv i{font-style:normal;opacity:.75;white-space:pre}
.site .txt{position:absolute;z-index:2}
.site h4{font-weight:400}
.site small{display:block;font-size:2.5cqw;line-height:1.3}
.site .pill{display:inline-block;margin-top:3cqw;padding:1.8cqw 3.6cqw;border-radius:99px;font-size:2.4cqw;font-weight:700;line-height:1}

.s-barber{background:#252523;color:#F3EBDE}
.s-barber img{left:0;top:0;width:100%;height:100%;filter:brightness(.6) saturate(.85)}
.s-barber .nv{left:0;right:0;justify-content:center;border:0;padding-top:4.6cqw}
.s-barber .nv b{font:400 3.6cqw/1 "Limelight",cursive;letter-spacing:.04em;color:#fff}
.s-barber .nv i{display:none}
.s-barber .txt{left:0;right:0;bottom:7cqw;text-align:center}
.s-barber small{color:#EADBC6;opacity:.85;letter-spacing:.3em;margin-bottom:2.4cqw}
.s-barber h4{font:400 11.5cqw/1 "Limelight",cursive;letter-spacing:.01em;color:#fff}
.s-barber .pill{background:#C59452;color:#252523;border-radius:0;letter-spacing:.12em;font-size:2.1cqw}

.s-cake{background:#F6D7DD;color:#5B1E2C}
.s-cake img{right:6cqw;bottom:-8cqw;width:38cqw;height:38cqw;border-radius:50%}
.s-cake .txt{left:4.4cqw;top:15cqw}
.s-cake h4{font:400 9.6cqw/.98 "Instrument Serif",serif;letter-spacing:-.01em}
.s-cake h4 em{font-style:italic}
.s-cake small{margin-top:3cqw}
.s-cake .pill{background:#5B1E2C;color:#F6D7DD}

.s-cafe{color:#fff;background:#3b2a20}
.s-cafe img{inset:0;width:100%;height:100%}
.s-cafe::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,0) 35%,rgba(0,0,0,.55))}
.s-cafe .txt{left:4.4cqw;bottom:5cqw}
.s-cafe h4{font:400 10.4cqw/.92 "Instrument Serif",serif;letter-spacing:-.01em}
.s-cafe small{margin-top:2cqw;opacity:.9;letter-spacing:.06em}
.s-cafe .nv b{letter-spacing:.14em}

.s-flower{background:#EEE7D8;color:#2E392B}
.s-flower img{right:6cqw;bottom:0;width:32cqw;height:48cqw;border-radius:16cqw 16cqw 0 0}
.s-flower .txt{left:4.4cqw;top:17cqw}
.s-flower h4{font:400 9cqw/1 "Instrument Serif",serif}
.s-flower small{margin-top:3cqw}

.s-food{background:#0E1011;color:#F4EFE6}
.s-food::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,10,11,.42),rgba(8,10,11,.78))}
.s-food img{left:0;top:0;width:100%;height:100%}
.s-food .nv{left:0;right:0;justify-content:center;border:0}
.s-food .nv b{font:400 3cqw/1 "Fraunces",serif;letter-spacing:.32em;color:#F4EFE6}
.s-food .nv i{display:none}
.s-food .txt{left:0;right:0;top:34%;text-align:center}
.s-food small{color:#C9A66B;letter-spacing:.26em;font-size:2.2cqw;margin-bottom:2cqw}
.s-food h4{font:400 9.5cqw/1.08 "Fraunces",serif;letter-spacing:-.01em;color:#F4EFE6}
.s-food h4 em{font-style:italic}
.s-food .pill{position:absolute;left:50%;bottom:7cqw;transform:translateX(-50%);background:transparent;border:1px solid rgba(244,239,230,.55);color:#F4EFE6;border-radius:999px;font-size:2.1cqw;letter-spacing:.16em;font-weight:500}

.s-pet{background:#BFE0F2;color:#0F355A}
.s-pet img{right:-4cqw;bottom:-6cqw;width:46cqw;height:46cqw;border-radius:50%;border:1.6cqw solid #fff}
.s-pet .txt{left:4.4cqw;top:16cqw}
.s-pet h4{font:800 11.5cqw/.92 var(--f);letter-spacing:-.04em}
.s-pet small{margin-top:3cqw;font-weight:500}

.s-yoga{background:#A7B598;color:#21301E}
.s-yoga img{left:0;top:0;width:48%;height:100%}
.s-yoga .txt{left:54%;top:8cqw;right:4cqw}
.s-yoga h4{font:italic 400 14cqw/.9 "Instrument Serif",serif;letter-spacing:-.02em}
.s-yoga small{margin-top:2cqw;font:500 2.2cqw/1.3 var(--f);letter-spacing:.12em;text-transform:uppercase}
.s-yoga ul{margin-top:4.6cqw;padding:0;list-style:none;font:500 2.4cqw/1.2 var(--f)}
.s-yoga li{display:flex;gap:2.4cqw;padding:1.8cqw 0;border-top:1px solid rgba(33,48,30,.25)}
.s-yoga li span{opacity:.6}

/* the four designs in the gallery: photo-led, light type, floating glass.
   Each is a whole scene, so the thumbnails read as a set. */
.s-sam,.s-still,.s-poppy,.s-ml{font-family:"Inter Tight",var(--f)}
.s-sam h4,.s-still h4,.s-poppy h4,.s-ml h4{font-weight:400;letter-spacing:-.03em}

.s-sam{background:linear-gradient(118deg,#E3D2B8 0 34%,#D3BC9B 34% 52%,#C7AC87 52%)}
.s-sam::after{content:"";position:absolute;left:0;right:0;bottom:0;height:7.5cqw;background:linear-gradient(180deg,#7A5337,#5C3D27)}
.s-sam .mon{position:absolute;left:15cqw;top:5cqw;width:70cqw;height:40.5cqw;overflow:hidden;border:.8cqw solid #15110D;border-radius:1.3cqw;background:#15110D;color:#fff;box-shadow:0 4cqw 7cqw -3cqw rgba(50,28,10,.75)}
.s-sam .mon img{inset:0;width:100%;height:100%;filter:brightness(.5) saturate(.85) sepia(.28)}
.s-sam .nv{padding:2.2cqw 2.8cqw;font-size:1.5cqw}
.s-sam h4{position:absolute;left:2.8cqw;top:7.6cqw;font-size:6cqw;line-height:1}
.s-sam .neck{position:absolute;left:47cqw;top:45.5cqw;width:6cqw;height:10cqw;background:linear-gradient(90deg,#3A3631,#57524B,#3A3631)}
.s-sam .base{position:absolute;left:41cqw;top:54cqw;width:18cqw;height:1.2cqw;border-radius:.4cqw;background:#2C2925;z-index:1}
.s-sam .cs{position:absolute;left:2.8cqw;right:2.8cqw;bottom:2.6cqw;display:grid;grid-template-columns:repeat(3,1fr);gap:1.2cqw}
.s-sam .cs span{display:block;padding:1.5cqw;border:1px solid rgba(255,255,255,.26);border-radius:.9cqw;background:rgba(255,255,255,.14);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);font-size:1.75cqw;line-height:1.2}
.s-sam .cs small{margin-bottom:.8cqw;font-size:1.2cqw;opacity:.75}
.s-sam .cs b{display:block;margin-top:.8cqw;font-size:2.2cqw;font-weight:500}
.s-sam .cs .on{background:#C4692C;border-color:#C4692C}

.s-still{color:#fff;background:#59646B}
.s-still>img{inset:0;width:100%;height:100%;filter:saturate(.38) brightness(.98)}
.s-still::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(30,38,44,.5),rgba(30,38,44,.12) 56%,rgba(30,38,44,.34))}
.s-still>*:not(img){z-index:2}
.s-still .bar{position:absolute;left:0;right:0;top:0;display:flex;gap:.8cqw;align-items:center;padding:1.5cqw 2.4cqw}
.s-still .bar i{width:1cqw;height:1cqw;border-radius:50%;background:rgba(255,255,255,.55)}
.s-still .bar u{margin-left:auto;margin-right:auto;padding:.5cqw 5cqw;border-radius:99px;background:rgba(255,255,255,.16);font-size:1.3cqw;text-decoration:none}
.s-still .nv{top:4.2cqw;font-size:1.9cqw}
.s-still .nv b{font:italic 400 3.4cqw/1 "Instrument Serif",serif}
.s-still h4{position:absolute;left:0;right:0;top:12.5cqw;text-align:center;font-size:6.8cqw;line-height:1.02}
.s-still h4 span{opacity:.62}
.s-still .today{position:absolute;left:23cqw;right:23cqw;bottom:0;padding:2.2cqw 2.6cqw 3cqw;border-radius:1.6cqw 1.6cqw 0 0;background:rgba(245,247,245,.9);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#1D2420}
.s-still .today small{font-size:1.6cqw;opacity:.6}
.s-still ul{margin:1cqw 0 0;padding:0;list-style:none;font-size:2.1cqw}
.s-still li{display:flex;gap:2cqw;padding:1.15cqw 0;border-top:1px solid rgba(29,36,32,.13)}
.s-still li span{opacity:.55;font-variant-numeric:tabular-nums}
.s-still li em{margin-left:auto;font-style:normal;opacity:.55}

.s-poppy{background:#D8DCCB;color:#23291F}
.s-poppy .side{position:absolute;left:68cqw;top:0;bottom:0;right:0;background:#23291F;color:#F4F1EA}
.s-poppy .side img{left:0;top:0;width:100%;height:60%}
.s-poppy .side p{position:absolute;left:7.6cqw;right:1.6cqw;bottom:3.4cqw;margin:0;font-size:2.9cqw;line-height:1.05;letter-spacing:-.02em}
.s-poppy .side small{margin-bottom:1cqw;font-size:1.6cqw;letter-spacing:0;opacity:.68}
.s-poppy .sheet{position:absolute;left:5cqw;top:5cqw;bottom:5cqw;width:68cqw;border-radius:2.2cqw;background:#fff;box-shadow:0 3cqw 7cqw -3cqw rgba(35,41,31,.5)}
.s-poppy .nv{padding:2.6cqw 3cqw;font-size:1.6cqw}
.s-poppy h4{position:absolute;left:3cqw;top:7.2cqw;font-size:6.2cqw;line-height:1}
.s-poppy .ph{position:absolute;left:1.6cqw;right:1.6cqw;bottom:1.6cqw;top:22.4cqw;border-radius:1.5cqw;overflow:hidden}
.s-poppy .ph img{inset:0;width:100%;height:100%}
.s-poppy .ph span{position:absolute;padding:1.1cqw 1.5cqw;border-radius:1cqw;background:rgba(255,255,255,.94);font-size:1.55cqw;line-height:1.25;box-shadow:0 1cqw 2.4cqw rgba(35,41,31,.2)}
.s-poppy .ph b{display:block;font-size:1.9cqw;font-weight:600}
.s-poppy .t1{left:2cqw;bottom:2cqw;transform:rotate(-3deg)}
.s-poppy .t2{right:2cqw;top:2cqw;transform:rotate(3deg)}

.s-ml{color:#fff;background:#2A180F}
.s-ml>img{inset:0;width:100%;height:100%;filter:saturate(.9) brightness(.82)}
.s-ml .nv{z-index:2;font-size:1.9cqw}
.s-ml .pane{position:absolute;left:7cqw;right:7cqw;top:15cqw;bottom:0;padding:4cqw 4.4cqw;border-radius:2cqw 2cqw 0 0;background:rgba(38,22,12,.58);-webkit-backdrop-filter:blur(14px) saturate(1.1);backdrop-filter:blur(14px) saturate(1.1)}
.s-ml .pane small{font-size:1.7cqw;opacity:.72}
.s-ml h4{margin-top:1.5cqw;font-size:7.2cqw;line-height:1}
.s-ml .cs{position:absolute;left:4.4cqw;right:4.4cqw;bottom:4cqw;display:grid;grid-template-columns:repeat(3,1fr);gap:1.4cqw}
.s-ml .cs span{display:block;padding:1.9cqw;min-height:14cqw;border-radius:1cqw;background:#F7F1E6;color:#28180E;font-size:1.65cqw;line-height:1.25}
.s-ml .cs b{display:block;margin-bottom:2cqw;font-size:3cqw;font-weight:500;letter-spacing:-.02em}
.s-ml .cs .on{background:#F0B445}
.s-ml .cs .dk{background:#1A100A;color:#F7F1E6}

.s-mono{background:#F4F4F1;color:#111}
.s-mono h4{position:absolute;left:3cqw;top:7cqw;font:800 25cqw/1 var(--f);letter-spacing:-.07em}
.s-mono img{left:4.4cqw;bottom:4.4cqw;width:calc(100% - 8.8cqw);height:22cqw}
.s-mono small{position:absolute;right:4.4cqw;top:16cqw;font-size:2.2cqw;letter-spacing:.1em}

.s-nail{background:#0E0E0E;color:#F6B4C9}
.s-nail img{right:0;top:0;width:54%;height:100%}
.s-nail .txt{left:4.4cqw;top:50%;transform:translateY(-50%)}
.s-nail h4{font:400 10.6cqw/.95 "Instrument Serif",serif}
.s-nail small{margin-top:3cqw;color:#fff;opacity:.75}
.s-nail .pill{border:1px solid #F6B4C9;color:#F6B4C9}

.s-music{background:#1B2954;color:#F5D547}
.s-music img{right:4.4cqw;bottom:4.4cqw;width:36cqw;height:36cqw;border-radius:2cqw}
.s-music .txt{left:4.4cqw;top:16cqw}
.s-music h4{font:700 10cqw/.95 var(--f);letter-spacing:-.04em}
.s-music small{margin-top:3cqw;color:#fff;opacity:.8}

.s-photo{background:#E6E3DD;color:#151515}
.s-photo .txt{left:4.4cqw;top:7cqw;width:36%}
.s-photo h4{font:800 6.4cqw/1 var(--f);letter-spacing:-.03em}
.s-photo small{margin-top:2cqw;opacity:.7}
.s-photo .lnk{display:inline-block;margin-top:14cqw;font-size:2.5cqw;font-weight:700;border-bottom:1px solid}
.s-photo .pics{position:absolute;right:4.4cqw;top:4.4cqw;bottom:4.4cqw;width:52%;display:grid;grid-template-columns:1fr 1fr;gap:2cqw}
.s-photo .pics img{position:static;width:100%;height:100%}
.s-photo .pics img:last-child{margin-top:8cqw;height:calc(100% - 8cqw)}

.s-bakery{background:#E8D6B6;color:#5A3314}
.s-bakery img{left:0;right:0;bottom:0;width:100%;height:30cqw}
.s-bakery .txt{left:4.4cqw;top:11cqw}
.s-bakery h4{font:400 15cqw/1 "Anton",var(--f);letter-spacing:.02em}
.s-bakery small{margin-top:1cqw;font-weight:500;letter-spacing:.04em}

.s-launch{background:radial-gradient(120% 90% at 80% 10%,#F2C46D,#E0743A 55%,#7A2E14);color:#fff}
.s-launch .txt{left:0;right:0;top:15cqw;text-align:center}
.s-launch small{letter-spacing:.2em;opacity:.9}
.s-launch h4{margin-top:1.5cqw;font:800 10cqw/1 var(--f);letter-spacing:-.05em}
.s-launch .cd{display:flex;justify-content:center;gap:2cqw;margin-top:3.4cqw}
.s-launch .cd span{min-width:10cqw;padding:2cqw 0;border-radius:1.4cqw;background:rgba(0,0,0,.28);font:700 5cqw/1 var(--f)}
.s-launch .pill{background:#fff;color:#7A2E14}

/* ----------------------------------------------------- section headings */
.h-sub{font:400 clamp(32px,3.6vw,52px)/1.08 var(--f);letter-spacing:-.035em}
html[data-lang="zh"] .h-sub{font-family:var(--f-hk);font-weight:500;letter-spacing:-.01em;line-height:1.22}

/* ---------------------------------------------------------- design gallery */
.tpl{position:relative;z-index:1;background:#fff;color:#111;padding:calc(var(--overlap) + clamp(64px,8vw,112px)) 0 clamp(80px,10vw,128px)}
.tpl-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px 40px;flex-wrap:wrap}
.tpl-head .btn-sec{min-height:52px}
/* Laid out like a website awards gallery: a filter row with counts, then
   cards that are a screenshot on top and a credit line underneath. Every
   card opens its site in the viewer (demos.js). */
.tpl-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 28px;margin-top:clamp(36px,4vw,56px);padding-bottom:22px;border-bottom:1px solid #E6E6E2}
.tpl-filter{display:flex;flex-wrap:wrap;gap:8px}
.tpl-filter button{display:inline-flex;align-items:center;gap:9px;height:40px;padding:0 15px;border:1px solid #DCDCD7;border-radius:8px;background:#fff;color:#111;font:500 14px/1 var(--f);transition:background-color .2s,color .2s,border-color .2s}
.tpl-filter button:hover{border-color:#111}
.tpl-filter b{font-size:11.5px;font-weight:600;color:#8A8A84;font-variant-numeric:tabular-nums}
.tpl-filter button[aria-pressed="true"]{background:#111;border-color:#111;color:#fff}
.tpl-filter button[aria-pressed="true"] b{color:rgba(255,255,255,.62)}
.tpl-count{font-size:14px;color:#6B6B6B}
.tpl-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(32px,3.4vw,48px) clamp(16px,1.8vw,24px);margin-top:clamp(28px,3vw,40px)}
.tpl-i{display:block;text-decoration:none}
.tpl-frame{position:relative;border-radius:10px;overflow:hidden;box-shadow:0 0 0 1px rgba(0,0,0,.08);transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.tpl-i:hover .tpl-frame{transform:translateY(-4px);box-shadow:0 0 0 1px rgba(0,0,0,.08),0 28px 40px -26px rgba(0,0,0,.5)}
.tpl-i:hover .site{transform:scale(1.035)}
.tpl-live{position:absolute;left:10px;top:10px;z-index:3;display:inline-flex;align-items:center;gap:7px;padding:6px 10px 6px 9px;border-radius:999px;background:rgba(17,17,17,.74);color:#fff;font:600 11px/1 var(--f);letter-spacing:.04em;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);opacity:0;transform:translateY(-4px);transition:opacity .3s,transform .3s var(--ease)}
.tpl-live::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 3px rgba(91,211,138,.25)}
.tpl-i:hover .tpl-live,.tpl-i:focus-visible .tpl-live{opacity:1;transform:none}
@media (hover:none){.tpl-live{opacity:1;transform:none}}
.tpl-meta{display:flex;align-items:center;gap:10px;margin-top:14px}
.tpl-meta .tpl-av{width:28px;height:28px;font-size:12px;box-shadow:0 0 0 1px rgba(0,0,0,.1)}
.tpl-name{flex:1;min-width:0;display:flex;flex-wrap:wrap;gap:3px 10px;font:500 13px/1.3 var(--f);letter-spacing:.12em;text-transform:uppercase}
.tpl-name>span{color:#767676;letter-spacing:.04em;text-transform:none}
html[data-lang="zh"] .tpl-name>span{font-family:var(--f-hk)}
.tpl-pages{flex:none;padding:5px 8px;border-radius:6px;background:#F1F1EE;color:#555;font:600 11px/1.2 var(--f);letter-spacing:.02em;white-space:nowrap}
.tpl-pages:empty{display:none}
.tpl-i.more{display:none}
.tpl.expanded .tpl-i.more,.tpl.filtered .tpl-i.more{display:block;animation:rise .7s var(--ease) both}
.tpl .tpl-i.off{display:none}
.tpl.filtered .btn-wide-line{display:none}
.btn-wide-line{display:flex;width:100%;margin-top:clamp(40px,5vw,64px);background:transparent;color:#111;border-color:#111}
.btn-wide-line:hover{background:#111;color:#fff}
.tpl-dots{display:none}
@media (max-width:760px){
  /* on a phone the gallery is a swipeable row that turns by itself */
  .tpl-grid{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;margin-left:calc(var(--gut)*-1);margin-right:calc(var(--gut)*-1);padding:0 var(--gut);scrollbar-width:none}
  .tpl-grid::-webkit-scrollbar{display:none}
  .tpl-i,.tpl-i.more{display:block;flex:none;width:84%;scroll-snap-align:center}
  .tpl-filter{flex-wrap:nowrap;overflow-x:auto;margin:0 calc(var(--gut)*-1);padding:0 var(--gut);scrollbar-width:none}
  .tpl-filter::-webkit-scrollbar{display:none}
  .tpl-filter button{flex:none}
  .tpl-count{font-size:13px}
  .btn-wide-line{display:none}
  .tpl-dots{display:flex;justify-content:center;gap:6px;margin-top:24px}
  .tpl-dots button{position:relative;width:8px;height:8px;padding:0;border:0;border-radius:99px;background:#D4D4D4;overflow:hidden;transition:width .35s var(--ease)}
  .tpl-dots button.on{width:36px}
  .tpl-dots button.on::after{content:"";position:absolute;inset:0;background:#111;transform-origin:0 50%;animation:fill var(--dur,5s) linear forwards}
  .tpl-dots.paused button.on::after{animation-play-state:paused}
}
@keyframes fill{from{transform:scaleX(0)}}

/* -------------------------------------------------------------- statement */
/* one big sentence with photos set into it like words; the photo pills open
   from nothing to full width as the line scrolls in */
.state{background:#fff;color:#111;padding:clamp(24px,4vw,48px) 0 clamp(72px,9vw,120px)}
.state-t{text-align:center;font:400 clamp(38px,6.6vw,104px)/1.12 var(--f);letter-spacing:-.045em}
html[data-lang="zh"] .state-t{font-family:var(--f-hk);font-weight:500;letter-spacing:-.02em;line-height:1.3;font-size:clamp(34px,6vw,92px)}
.pic{display:inline-block;width:0;height:.78em;margin:0 .06em;vertical-align:-.08em;border-radius:999px;overflow:hidden;transition:width 1.2s .25s var(--ease)}
.pic+.pic{transition-delay:.45s}
.pic img{width:100%;height:100%;object-fit:cover}
.state-t.in .pic{width:1.9em}
.state-t.in .en .pic:last-child,.state-t.in .zh .nb:nth-child(3) .pic{transition-delay:.5s}

/* ------------------------------------------------------------- works with */
.works{background:#fff;color:#111;padding-bottom:clamp(80px,10vw,128px)}
.works-t{text-align:center;font-size:14px;color:#6B6B6B}
.works-row{margin-top:24px;overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.works-track{display:flex;gap:clamp(40px,5vw,72px);width:max-content;margin:0;padding:0;list-style:none;animation:mq 40s linear infinite}
.works-row:hover .works-track{animation-play-state:paused}
.works-track li{font:700 clamp(20px,2vw,26px)/1 var(--f);letter-spacing:-.02em;color:#9A9A9A;white-space:nowrap;transition:color .25s}
.works-track li:hover{color:#111}
html[data-lang="zh"] .works-track li{font-family:var(--f-hk)}

/* ----------------------------------------------------------- before/after */
.ba{padding-top:clamp(96px,11vw,150px)}
.ba-box{
  --pos:50%;position:relative;margin-top:clamp(40px,5vw,64px);height:clamp(420px,46vw,560px);border-radius:16px;overflow:hidden;
  user-select:none;touch-action:pan-y;
}
.ba-side{position:absolute;inset:0;padding:clamp(20px,3vw,36px)}
.ba-before{background:#0B141A}
.ba-after{background:#F4F1EA;color:#111;clip-path:inset(0 0 0 var(--pos))}
.ba-lbl{position:relative;z-index:2;display:inline-block;padding:8px 14px;border-radius:99px;font-size:13px;font-weight:600}
.ba-before .ba-lbl{background:rgba(255,255,255,.1)}
.ba-after .ba-lbl{position:absolute;right:clamp(20px,3vw,36px);background:#111;color:#fff}
.chaos{position:absolute;inset:70px 0 0;padding:0 clamp(20px,3vw,36px)}
.cb{position:absolute;max-width:62%;padding:10px 14px;border-radius:12px 12px 12px 3px;background:#202C33;font-size:clamp(13px,1.2vw,15px);box-shadow:0 10px 24px -10px rgba(0,0,0,.6)}
.cb.c1{left:5%;top:2%}.cb.c2{left:22%;top:16%}.cb.c3{left:8%;top:31%}.cb.c4{left:30%;top:45%}
.cb.c5{left:6%;top:59%}.cb.c6{left:24%;top:72%}.cb.c7{left:9%;top:86%;background:#3B1F22}
.in .cb{animation:buzz 3.2s var(--ease) infinite}
.in .cb.c2{animation-delay:.4s}.in .cb.c3{animation-delay:.8s}.in .cb.c4{animation-delay:1.2s}
.in .cb.c5{animation-delay:1.6s}.in .cb.c6{animation-delay:2s}.in .cb.c7{animation-delay:2.4s}
@keyframes buzz{0%,80%,100%{transform:none}84%{transform:translateX(-3px) rotate(-1deg)}88%{transform:translateX(3px) rotate(1deg)}92%{transform:translateX(-2px)}}
.ba-before .ba-lbl::after{content:"99+";margin-left:10px;padding:2px 7px;border-radius:99px;background:#25D366;color:#063A1E;font-size:11px;font-weight:800}
.calm{position:absolute;inset:70px clamp(20px,3vw,36px) clamp(20px,3vw,36px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:1fr auto;gap:14px}
.calm-card{padding:18px;border-radius:12px;background:#fff;box-shadow:0 10px 30px -18px rgba(0,0,0,.35);align-self:start}
.cc-t{font-weight:700;font-size:15px;margin-bottom:8px}
.calm-card p:not(.cc-t){display:flex;justify-content:space-between;gap:8px;padding:8px 0;border-top:1px solid #EEE;font-size:14px}
.calm-card .addr{display:block !important;color:#555}
.cc-slots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.cc-slots span{padding:9px 0;text-align:center;border-radius:8px;border:1px solid #E3E3E3;font-weight:600;font-size:14px}
.cc-slots .x{color:#BBB;background:#F4F4F4;border-color:#F4F4F4;text-decoration:line-through}
.cc-slots .on{background:#111;border-color:#111;color:#fff}
.calm-ok{grid-column:1/-1;align-self:end;padding:14px 18px;border-radius:12px;background:#DDF5E6;color:#14653A;font-weight:600;font-size:14.5px}
.ba-handle{position:absolute;top:0;bottom:0;left:var(--pos);z-index:3;width:2px;margin-left:-1px;background:#fff;pointer-events:none}
.ba-handle span{position:absolute;top:50%;left:50%;width:52px;height:52px;margin:-26px 0 0 -26px;display:grid;place-items:center;border-radius:50%;background:#fff;color:#111;font-weight:700;letter-spacing:2px;box-shadow:0 10px 30px -8px rgba(0,0,0,.5)}
.ba-range{position:absolute;inset:0;z-index:4;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;-webkit-appearance:none;appearance:none}
.ba-box:focus-within .ba-handle span{outline:2px solid #5B8DFF;outline-offset:3px}
@media (max-width:760px){
  .ba-box{height:560px}
  .calm{grid-template-columns:minmax(0,1fr);grid-template-rows:auto;align-content:start;overflow:hidden}
  .calm-card:nth-child(3){display:none}
  .cb{max-width:78%}
}

/* ------------------------------------------------------------------ story */
/* The section is tall; its stage is sticky, so the phone stays put while
   the page scrolls past, and script.js moves data-step from 0 to 5. */
.story{position:relative;height:460vh;height:460svh;margin-top:clamp(64px,8vw,110px)}
.story-stage{position:sticky;top:0;height:100vh;height:100svh;display:flex;align-items:center;overflow:hidden}
.story-in{display:grid;grid-template-columns:minmax(0,540px) auto;justify-content:center;gap:32px clamp(48px,9vw,160px);align-items:center}
.story-k{font:500 13px/1 var(--f);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
html[data-lang="zh"] .story-k{font-family:var(--f-hk);letter-spacing:.24em}
.story-steps{position:relative;min-height:clamp(250px,26vw,320px);margin-top:28px;padding:0;list-style:none}
.story-steps li{position:absolute;inset:0 0 auto;opacity:0;transform:translateY(28px);transition:opacity .6s var(--ease),transform .6s var(--ease);pointer-events:none}
.story-steps time{display:block;font:300 clamp(56px,7vw,104px)/1 var(--f);letter-spacing:-.05em;font-variant-numeric:tabular-nums;color:rgba(255,255,255,.35)}
.story-steps h3{margin-top:14px;font:500 clamp(28px,3.2vw,46px)/1.1 var(--f);letter-spacing:-.035em}
html[data-lang="zh"] .story-steps h3{font-family:var(--f-hk);font-weight:500;letter-spacing:-.01em;line-height:1.25}
.story-steps p{margin-top:14px;max-width:26em;font-size:17px;color:var(--ink-2)}
.story-bar{position:relative;width:min(100%,360px);height:2px;margin-top:20px;border-radius:2px;background:rgba(255,255,255,.14);overflow:hidden}
.story-bar i{position:absolute;inset:0;background:#fff;transform-origin:0 50%;transform:scaleX(var(--p,0))}
.story-stage[data-step="0"] .story-steps li:nth-child(1),
.story-stage[data-step="1"] .story-steps li:nth-child(2),
.story-stage[data-step="2"] .story-steps li:nth-child(3),
.story-stage[data-step="3"] .story-steps li:nth-child(4),
.story-stage[data-step="4"] .story-steps li:nth-child(5),
.story-stage[data-step="5"] .story-steps li:nth-child(6){opacity:1;transform:none}

/* drawn at one fixed size and scaled as a whole picture (--k, set by
   script.js from the screen height), so the screens inside never reflow;
   the negative margins hand the space the scaling saves back to the layout */
.story-phone{--ph:600px;position:relative;height:600px;width:290px;padding:12px;border-radius:45px;background:#111;
  transform:scale(var(--k,1));transform-origin:50% 0;
  margin:0 calc((var(--k,1) - 1) * 145px) calc((var(--k,1) - 1) * 600px);
  box-shadow:0 0 0 1.5px #333,0 60px 120px -40px rgba(0,0,0,.9),0 0 120px -20px rgba(168,230,199,.12)}
.sp-notch{position:absolute;top:22px;left:50%;z-index:3;width:30%;height:22px;margin-left:-15%;border-radius:99px;background:#000}
.sp-screen{position:relative;height:100%;border-radius:calc(var(--ph) * .062);overflow:hidden;background:#fff;color:#111;font-size:13px}
.scr{position:absolute;inset:0;padding:54px 16px 16px;display:flex;flex-direction:column;gap:10px;opacity:0;transform:scale(.96);transition:opacity .55s var(--ease),transform .55s var(--ease)}
.story-stage[data-step="0"] .s0,.story-stage[data-step="1"] .s1,.story-stage[data-step="2"] .s2,
.story-stage[data-step="3"] .s3,.story-stage[data-step="4"] .s4,.story-stage[data-step="5"] .s5{opacity:1;transform:none}
.m-btn{margin-top:auto;padding:13px 0;border-radius:10px;background:#111;color:#fff;text-align:center;font-weight:700}

/* 0 · search */
.g-q{display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:99px;box-shadow:0 1px 6px rgba(0,0,0,.18);font-size:14px}
.g-q b{color:#4285F4;font:700 16px/1 var(--f)}
.g-card{padding:14px;border-radius:12px;border:1px solid #E6E6E6}
.g-n{font-size:17px;font-weight:700;color:#1A0DAB}
.g-r{display:flex;gap:6px;margin-top:4px}.g-r span{color:#E37400;font-weight:600}.g-r small{color:#777}
.g-m,.g-o{margin-top:4px;color:#555}.g-o{color:#188038}
.g-btns{display:flex;gap:6px;margin-top:12px}
.g-btns span{flex:1;padding:8px 0;text-align:center;border-radius:99px;border:1px solid #DADCE0;color:#1A73E8;font-weight:600;font-size:12.5px}
.g-btns span:first-child{background:#E8F0FE;border-color:#E8F0FE}
.g-map{position:relative;flex:1;border-radius:12px;background:
  linear-gradient(28deg,transparent 46%,#fff 46%,#fff 50%,transparent 50%),
  linear-gradient(-62deg,transparent 60%,#fff 60%,#fff 63%,transparent 63%),
  repeating-linear-gradient(0deg,#E8E4DA 0 30px,#F2EFE8 30px 32px)}
.g-map i{position:absolute;left:50%;top:40%;width:24px;height:24px;margin-left:-12px;border-radius:50% 50% 50% 0;background:#E1442F;transform:rotate(-45deg)}

/* 1 · the shop's site */
.s1{padding-top:0;gap:0}
.m-hero{position:relative;height:46%;margin:0 -16px 10px;overflow:hidden;background:#2A1C15}
.m-hero img{width:100%;height:100%;object-fit:cover;opacity:.7}
.m-hero b{position:absolute;left:16px;bottom:14px;color:#F2E4CF;font:400 44px/.88 "Anton",var(--f)}
.m-row{display:flex;justify-content:space-between;padding:12px 2px;border-bottom:1px solid #EEE;font-weight:600}
.m-row small{color:#888;font-weight:500}

/* 2 · booking */
.b-t{font-weight:700;font-size:15px}
.b-days{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.b-days span{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 0;border-radius:10px;border:1px solid #E6E6E6;color:#888;font-size:11px}
.b-days b{color:#111;font:600 17px/1 var(--f)}
.b-days .on{background:#111;border-color:#111}.b-days .on b{color:#fff}
.b-slots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.b-slots span{padding:11px 0;text-align:center;border-radius:8px;border:1px solid #E6E6E6;font-weight:600}
.b-slots .x{color:#BBB;background:#F4F4F4;border-color:#F4F4F4;text-decoration:line-through}
.b-slots .on{background:#111;border-color:#111;color:#fff}
.story-stage[data-step="2"] .b-slots .on{animation:press 2.4s var(--ease) .4s}

/* 3 · WhatsApp */
.s3{background:#0B141A;color:#E9EDEF}
.w-top{margin:0 -16px;padding:0 16px 12px;border-bottom:1px solid rgba(255,255,255,.08);font-weight:700}
.w-msg{align-self:flex-start;max-width:88%;margin-top:8px;padding:12px 14px;border-radius:2px 12px 12px 12px;background:#202C33;line-height:1.55}
.w-msg small{color:#53BDEB}
.story-stage[data-step="3"] .w-msg{animation:msgIn .6s var(--ease) .2s both}
@keyframes msgIn{from{opacity:0;transform:translateY(14px)}}

/* 4 · lock screen */
.s4{background:radial-gradient(120% 80% at 30% 0%,#3D5A80,#1B2333 60%,#0D111A);color:#fff;align-items:center;padding-top:70px}
.l-time{font:300 64px/1 var(--f);letter-spacing:-.03em}
.l-date{margin-bottom:18px;opacity:.8}
.l-note{position:relative;isolation:isolate;width:100%;padding:12px 14px;border-radius:16px;display:grid;grid-template-columns:1fr auto;gap:2px 8px}
.l-note::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:rgba(255,255,255,.16);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.l-note b{font-size:13px}.l-note span{grid-column:1;font-size:13px;opacity:.9}.l-note small{grid-row:1;grid-column:2;opacity:.6}
.l-note.dim{opacity:.6}
.story-stage[data-step="4"] .l-note:not(.dim){animation:noteIn .7s var(--ease) .25s both}
@keyframes noteIn{from{opacity:0;transform:translateY(-18px) scale(.96)}}

/* 5 · review */
.s5{align-items:center;justify-content:center;text-align:center}
.r-t{font-size:18px;font-weight:700;margin-top:40px}
.r-s{color:#666}
.r-stars{display:flex;gap:6px;margin:18px 0 6px}
.r-stars i{width:34px;height:34px;background:#E3E3E3;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 1l2.7 5.6 6.1.9-4.4 4.3 1 6.1L10 15l-5.4 2.9 1-6.1L1.2 7.5l6.1-.9z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 1l2.7 5.6 6.1.9-4.4 4.3 1 6.1L10 15l-5.4 2.9 1-6.1L1.2 7.5l6.1-.9z'/%3E%3C/svg%3E") center/contain no-repeat;transition:background-color .3s}
.story-stage[data-step="5"] .r-stars i{background:#F5B301}
.story-stage[data-step="5"] .r-stars i:nth-child(2){transition-delay:.12s}
.story-stage[data-step="5"] .r-stars i:nth-child(3){transition-delay:.24s}
.story-stage[data-step="5"] .r-stars i:nth-child(4){transition-delay:.36s}
.story-stage[data-step="5"] .r-stars i:nth-child(5){transition-delay:.48s}
.s5 .m-btn{width:100%;background:#1A73E8}

@media (max-width:860px){
  /* phone first, the words underneath, both inside one screen height */
  .story-in{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center;gap:18px}
  .story-txt{width:100%}
  .story-stage{padding-top:56px}  /* clear of the floating tab dropdown */
  .story-phone{order:-1}
  .story-steps{min-height:170px;margin-top:12px}
  .story-steps time{font-size:38px}
  .story-steps h3{margin-top:6px;font-size:24px}
  .story-steps p{margin:8px auto 0;font-size:15px}
  .story-bar{margin:10px auto 0}
  .story-k{display:none}
}

/* ------------------------------------------------------------------ bento */
.bento-bg{background:var(--warm)}
.bento{padding-top:clamp(96px,11vw,150px)}
.b-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px 64px;align-items:end}
.b-body{max-width:30em;font-size:17px;color:var(--ink-2)}
.b-head .btn{margin-top:28px}
.b-group{display:grid;gap:20px;margin-top:20px}
.b-group.b-1{margin-top:clamp(40px,5vw,64px)}
.b-3{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto auto}
.b-3 .b-tall{grid-row:span 2}
.b-row{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:clamp(40px,5vw,64px)}
.b-card{
  position:relative;display:flex;flex-direction:column;overflow:hidden;
  padding:clamp(26px,3vw,40px) clamp(24px,3vw,40px) 0;border-radius:16px;background:linear-gradient(180deg,var(--card-2),var(--card));
}
.b-wide{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:24px 40px;min-height:clamp(380px,40vw,520px);padding-bottom:0}
.b-wide .b-txt{align-self:center;padding-bottom:40px}
.b-txt h3{font:500 clamp(20px,1.8vw,24px)/1.25 var(--f);letter-spacing:-.02em}
html[data-lang="zh"] .b-txt h3{font-family:var(--f-hk);font-weight:700;letter-spacing:0}
.b-txt p{margin-top:12px;max-width:30em;color:var(--ink-2)}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px;padding:0;list-style:none}
.tags li{padding:7px 13px;border-radius:999px;border:1px solid var(--line-2);font-size:13px}
.b-asset{position:relative;margin-top:auto;padding-top:32px;min-height:250px;display:flex;align-items:flex-end;justify-content:center}
.b-wide .b-asset{margin-top:0;align-self:end;min-height:100%;padding-top:40px}
@media (max-width:900px){
  .b-head,.b-wide,.b-3,.b-row{grid-template-columns:minmax(0,1fr)}
  .b-3 .b-tall{grid-row:auto}
  .b-wide .b-txt{padding-bottom:0}
}

/* the little screens inside the cards. Each loops once its card is in view
   (.in), so nothing animates off-screen. */
.paper{background:#fff;color:#111;border-radius:14px;box-shadow:0 30px 60px -24px rgba(0,0,0,.6)}

/* booking */
.a-book .ab-panel{position:relative;width:min(100%,380px);padding:20px;border-radius:14px 14px 0 0;background:#fff;color:#111;box-shadow:0 30px 60px -24px rgba(0,0,0,.6)}
.ab-t{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-weight:700}
.ab-t b{font-weight:500;font-size:13px;color:#777}
.ab-days{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin-top:14px}
.ab-days>span{display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 0;border-radius:10px;border:1px solid #E6E6E6;font:600 16px/1 var(--f)}
.ab-days small{font:500 11px/1 var(--f-hk);color:#888}
.ab-days .on{background:#111;border-color:#111;color:#fff}
.ab-days .on small{color:#bbb}
.ab-slots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:12px}
.ab-slots span{padding:10px 0;text-align:center;border-radius:8px;border:1px solid #E6E6E6;font:600 14px/1 var(--f);font-variant-numeric:tabular-nums}
.ab-slots .x{color:#BBB;background:#F4F4F4;border-color:#F4F4F4;text-decoration:line-through}
.ab-btn{margin-top:14px;padding:13px 0;border-radius:8px;background:#111;color:#fff;text-align:center;font-weight:700;font-size:14px}
.ab-toast{position:absolute;right:max(4%,calc(50% - 230px));top:34px;display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:12px;background:#fff;color:#111;font-size:13px;font-weight:600;box-shadow:0 16px 40px -12px rgba(0,0,0,.5);opacity:0}
.ab-toast b{width:24px;height:24px;display:grid;place-items:center;border-radius:50%;background:#DDF5E6;color:#14653A}
.cursor{position:absolute;left:70%;top:70%;width:22px;height:22px;opacity:0;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 2l16 9-7 2-3 7z' fill='%23111' stroke='%23fff' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.in .ab-slots .pick{animation:pick 7s var(--ease) infinite}
.in .ab-btn{animation:press 7s var(--ease) infinite}
.in .ab-toast{animation:toastIn 7s var(--ease) infinite}
.in .a-book .cursor{animation:cur 7s var(--ease) infinite}
@keyframes pick{0%,18%{background:#fff;color:#111;border-color:#E6E6E6}22%,88%{background:#111;color:#fff;border-color:#111}100%{background:#fff;color:#111;border-color:#E6E6E6}}
@keyframes press{0%,42%{transform:none}45%{transform:scale(.96)}48%,100%{transform:none}}
@keyframes toastIn{0%,48%{opacity:0;transform:translateY(10px)}54%,86%{opacity:1;transform:none}94%,100%{opacity:0;transform:translateY(-6px)}}
@keyframes cur{
  0%{opacity:0;left:92%;top:96%}
  8%{opacity:1}
  17%{left:calc(50% + 120px);top:60%}
  20%{transform:scale(.8)}22%{transform:none}
  40%{left:calc(50% + 20px);top:86%}
  45%{transform:scale(.8)}47%{transform:none}
  80%{opacity:1;left:calc(50% + 20px);top:86%}
  92%,100%{opacity:0;left:92%;top:96%}
}

/* WhatsApp order */
.a-chat .phone{width:min(100%,300px);padding:12px 12px 0;border-radius:30px 30px 0 0;background:#0B141A;box-shadow:0 0 0 8px #111,0 30px 60px -24px rgba(0,0,0,.7);display:flex;flex-direction:column;gap:12px;min-height:330px}
.b-tall .a-chat .phone{min-height:460px}
.ch-top{display:flex;flex-direction:column;padding:8px 6px 10px;border-bottom:1px solid rgba(255,255,255,.08)}
.ch-top b{font-size:15px}
.ch-top small{color:#8696A0;font-size:12px}
.ch-msg{max-width:86%;padding:9px 12px;border-radius:10px;font-size:13px;line-height:1.45}
.ch-msg.me{align-self:flex-end;background:#005C4B;border-top-right-radius:2px}
.ch-msg.them{align-self:flex-start;background:#202C33;border-top-left-radius:2px}
.ch-typing{align-self:flex-start;display:flex;gap:4px;padding:12px 14px;border-radius:10px;background:#202C33}
.ch-typing i{width:6px;height:6px;border-radius:50%;background:#8696A0;animation:dot 1s infinite}
.ch-typing i:nth-child(2){animation-delay:.15s}.ch-typing i:nth-child(3){animation-delay:.3s}
.a-chat .ch-msg,.a-chat .ch-typing{opacity:0}
.in .a-chat .me{animation:msgMe 8s var(--ease) infinite}
.in .a-chat .ch-typing{animation:typing 8s var(--ease) infinite}
.in .a-chat .them{animation:msgThem 8s var(--ease) infinite}
@keyframes msgMe{0%,6%{opacity:0;transform:translateY(12px)}12%,90%{opacity:1;transform:none}100%{opacity:0}}
@keyframes typing{0%,20%{opacity:0;display:flex}24%,44%{opacity:1}48%,100%{opacity:0}}
@keyframes msgThem{0%,46%{opacity:0;transform:translateY(12px)}52%,90%{opacity:1;transform:none}100%{opacity:0}}

/* QR menu */
.a-menu{gap:14px;align-items:flex-end}
.a-menu .qr{display:grid;grid-template-columns:repeat(3,22px);gap:4px;padding:12px;border-radius:12px 12px 0 0;background:#fff;align-self:flex-end}
.a-menu .qr i{height:22px;border-radius:3px;background:#111}
.a-menu .qr i:nth-child(2),.a-menu .qr i:nth-child(4),.a-menu .qr i:nth-child(8){background:#E5E5E5}
.a-menu .mn{flex:1;max-width:240px;padding:10px 14px;border-radius:12px 12px 0 0;background:#fff;color:#111}
.mn p{display:flex;align-items:center;justify-content:space-between;padding:9px 0;border-bottom:1px solid #EEE;font-size:13.5px;font-weight:600}
.mn p:last-child{border:0}
.mn b{width:24px;height:24px;display:grid;place-items:center;border-radius:50%;background:#111;color:#fff}
.mn small{font-size:11px;padding:3px 8px;border-radius:99px;background:#F2F2F2;color:#888}
.in .mn .sold{animation:soldOut 6s var(--ease) infinite}
@keyframes soldOut{0%,40%{color:#111}50%,100%{color:#BBB}}

/* customer record */
.a-crm .crm{width:min(100%,300px);padding:18px;border-radius:14px 14px 0 0;background:#fff;color:#111}
.crm-n{display:flex;flex-direction:column}
.crm-n b{font-size:17px}
.crm-n small{color:#777;font-size:12.5px}
.crm-l{display:flex;justify-content:space-between;margin-top:14px;font-size:13px}
.a-crm .meter{height:8px;margin-top:8px;border-radius:99px;background:#EEE;overflow:hidden}
.a-crm .meter i{display:block;height:100%;width:30%;border-radius:inherit;background:#111;transform-origin:0 50%;transform:scaleX(0);transition:transform 1.4s .3s var(--ease)}
.in .a-crm .meter i{transform:scaleX(1)}
.crm-r{margin-top:14px;padding:8px 10px;border-radius:8px;background:#FFF4D6;color:#7A5300;font-size:12.5px;font-weight:600}

/* the "editor" */
.a-edit .ed-frame{position:relative;width:min(100%,560px);border-radius:12px 12px 0 0;overflow:hidden;box-shadow:0 30px 60px -24px rgba(0,0,0,.7)}
.ed-grid{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;
  background-image:linear-gradient(rgba(91,141,255,.35) 1px,transparent 1px),linear-gradient(90deg,rgba(91,141,255,.35) 1px,transparent 1px);background-size:8.33% 12.5%}
.ed-sel{position:absolute;z-index:4;left:3.4%;top:44%;width:34%;height:34%;border:1.5px solid #5B8DFF;opacity:0}
.ed-sel i{position:absolute;width:8px;height:8px;background:#fff;border:1.5px solid #5B8DFF}
.ed-sel i:nth-child(1){left:-5px;top:-5px}.ed-sel i:nth-child(2){right:-5px;top:-5px}.ed-sel i:nth-child(3){left:-5px;bottom:-5px}.ed-sel i:nth-child(4){right:-5px;bottom:-5px}
.ed-sel span{position:absolute;left:-1px;top:-24px;padding:3px 7px;border-radius:4px;background:#5B8DFF;color:#fff;font-size:11px;white-space:nowrap}
.in .ed-grid{animation:edGrid 7s var(--ease) infinite}
.in .ed-sel{animation:edSel 7s var(--ease) infinite}
.in .a-edit .s-barber h4{animation:edText 7s var(--ease) infinite;transform-origin:0 100%}
@keyframes edGrid{0%,10%{opacity:0}18%,70%{opacity:1}80%,100%{opacity:0}}
@keyframes edSel{0%,22%{opacity:0;transform:scale(.96)}28%,80%{opacity:1;transform:none}88%,100%{opacity:0}}
@keyframes edText{0%,40%{transform:none}52%,80%{transform:scale(1.12)}92%,100%{transform:none}}

/* brand kits */
.a-brand{min-height:330px}
.b-tall .a-brand{min-height:440px}
.b-tall .a-brand{--gap:104px}
.b-tall .bk1{bottom:300px}.b-tall .bk2{bottom:196px}.b-tall .bk3{bottom:92px}
.bk{position:absolute;left:50%;width:min(86%,330px);margin-left:max(-43%,-165px);display:flex;align-items:center;gap:12px;padding:18px;border-radius:12px;background:#fff;color:#111;box-shadow:0 20px 40px -16px rgba(0,0,0,.6);transition:transform .8s var(--ease)}
.bk .aa{font:800 38px/1 var(--f);letter-spacing:-.04em}
.bk .aa.serif{font:400 42px/1 "Instrument Serif",serif}
.bk .aa.hk{font:900 34px/1 var(--f-hk)}
.bk .aa.hk .en{font:400 40px/1 "Anton",var(--f);letter-spacing:.01em}
.bk .sw{display:flex;flex:1}
.bk .sw i{flex:1;height:38px}
.bk .sw i:first-child{border-radius:6px 0 0 6px}.bk .sw i:last-child{border-radius:0 6px 6px 0}
.bk em{font-style:normal;padding:8px 10px;background:#2A1C15;color:#F2E4CF;font-size:11px;font-weight:700;letter-spacing:.1em}
.bk em.r{border-radius:99px;background:#5B1E2C;color:#F6D7DD;letter-spacing:0}
.bk em.r2{border-radius:4px;background:#C3311E;color:#FFD84A;font-family:var(--f-hk)}
.bk em.r2 .en{font-family:var(--f);letter-spacing:.1em}
.bk1{bottom:150px;background:#F7EFE3}
.bk2{bottom:84px;background:#FBEFF1}
.bk3{bottom:18px;background:#FFF8DF}
.in .bk1{animation:bk1 9s var(--ease) infinite}
.in .bk2{animation:bk2 9s var(--ease) infinite}
.in .bk3{animation:bk3 9s var(--ease) infinite}
/* --gap is the distance between kits, so the shuffle lines up at any spacing */
@keyframes bk1{0%,28%{transform:none;z-index:1}33%,61%{transform:translateY(calc(var(--gap,66px) * 2));z-index:3}66%,95%{transform:translateY(var(--gap,66px));z-index:2}100%{transform:none}}
@keyframes bk2{0%,28%{transform:none;z-index:2}33%,61%{transform:translateY(calc(var(--gap,66px) * -1));z-index:1}66%,95%{transform:translateY(var(--gap,66px));z-index:3}100%{transform:none}}
@keyframes bk3{0%,28%{transform:none;z-index:3}33%,61%{transform:translateY(calc(var(--gap,66px) * -1));z-index:2}66%,95%{transform:translateY(calc(var(--gap,66px) * -2));z-index:1}100%{transform:none}}

/* motion */
.a-motion .mo-site{position:relative;width:min(100%,420px);height:230px;border-radius:12px 12px 0 0;overflow:hidden;background:#E8D6B6;color:#5A3314}
.mo-nv{display:flex;justify-content:space-between;padding:14px 16px;font-size:11px}
.mo-nv span{opacity:.7;white-space:pre}
.mo-row{display:flex;width:max-content;white-space:nowrap;font:400 54px/1 "Anton",var(--f);letter-spacing:.02em;animation:mq 14s linear infinite;animation-play-state:paused}
.in .mo-row{animation-play-state:running}
.mo-row span{padding-right:0}
.a-motion img{position:absolute;left:0;right:0;bottom:0;width:100%;height:110px;object-fit:cover}
@keyframes mq{to{transform:translateX(-50%)}}

/* every screen */
.a-screens{min-height:270px}
.sc-desk{width:min(84%,360px);border-radius:10px 10px 0 0;overflow:hidden;box-shadow:0 0 0 6px #111,0 30px 60px -24px rgba(0,0,0,.7);margin-right:60px}
.sc-phone{position:absolute;right:max(4%,calc(50% - 200px));bottom:0;width:110px;height:200px;padding:6px 6px 0;border-radius:20px 20px 0 0;background:#111;transform:translateY(30px);transition:transform 1s .2s var(--ease)}
.in .sc-phone{transform:none}
.sc-ph-in{height:100%;border-radius:15px 15px 0 0;background:#EEE7D8;color:#2E392B;padding:12px 8px;overflow:hidden}
.sc-ph-in p{font-size:7px;font-weight:700}
.sc-ph-in h4{margin-top:10px;font:400 17px/1 "Instrument Serif",serif}
.sc-ph-in img{width:100%;height:96px;object-fit:cover;margin-top:10px;border-radius:30px 30px 0 0}

/* Google Maps & reviews */
.a-map{min-height:270px}
.map{position:absolute;inset:32px 0 0;border-radius:12px 12px 0 0;overflow:hidden;
  background:
    linear-gradient(28deg,transparent 46%,#fff 46%,#fff 50%,transparent 50%),
    linear-gradient(-62deg,transparent 60%,#fff 60%,#fff 63%,transparent 63%),
    linear-gradient(90deg,transparent 30%,#FAD989 30%,#FAD989 33%,transparent 33%),
    repeating-linear-gradient(0deg,#E8E4DA 0 38px,#F2EFE8 38px 40px),
    #EEE9DF}
.pin{position:absolute;left:50%;top:34%;width:30px;height:30px;margin-left:-15px;border-radius:50% 50% 50% 0;background:#E1442F;transform:rotate(-45deg)}
.pin::after{content:"";position:absolute;left:9px;top:9px;width:12px;height:12px;border-radius:50%;background:#fff}
.in .pin{animation:pin 2.4s var(--ease) infinite}
@keyframes pin{0%,100%{transform:rotate(-45deg) translate(0,0)}50%{transform:rotate(-45deg) translate(5px,-5px)}}
.rev{position:relative;z-index:1;width:min(90%,280px);padding:16px 18px;border-radius:12px 12px 0 0;background:#fff;color:#111;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:4px 12px}
.rev .count{grid-row:span 2;font:600 36px/1 var(--f)}
.stars{position:relative;display:block;width:96px;height:17px;background:linear-gradient(90deg,#DDD 0 100%);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 1l2.7 5.6 6.1.9-4.4 4.3 1 6.1L10 15l-5.4 2.9 1-6.1L1.2 7.5l6.1-.9z'/%3E%3C/svg%3E") 0 0/19.2px 17px repeat-x;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 1l2.7 5.6 6.1.9-4.4 4.3 1 6.1L10 15l-5.4 2.9 1-6.1L1.2 7.5l6.1-.9z'/%3E%3C/svg%3E") 0 0/19.2px 17px repeat-x}
.stars i{position:absolute;inset:0;background:#F5B301;transform-origin:0 50%;transform:scaleX(0);transition:transform 1.6s .2s var(--ease)}
.in .stars i{transform:scaleX(.98)}
.rev small{color:#777;font-size:12px}

/* search result */
.a-seo .serp{width:min(100%,330px);padding:18px;border-radius:14px 14px 0 0;background:#fff;color:#111}
.serp .q{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:99px;border:1px solid #E3E3E3;font-size:14px;min-height:42px}
.serp .q svg{width:16px;height:16px;flex:none;fill:none;stroke:#777;stroke-width:2}
.typed::after{content:"";display:inline-block;width:1.5px;height:1em;margin-left:2px;vertical-align:-.15em;background:#111;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.serp .res{display:flex;flex-direction:column;gap:3px;margin-top:16px;padding-top:14px;border-top:1px solid #EEE;opacity:0;transform:translateY(8px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.serp.done .res{opacity:1;transform:none}
.res small{color:#1D6B3B;font-size:12px}
.res b{color:#1A0DAB;font-weight:500;font-size:16px}
.res>span{color:#555;font-size:13px}

/* analytics */
.a-stats .st{width:min(100%,320px);padding:18px;border-radius:14px 14px 0 0;background:#fff;color:#111}
.st-t{font-size:13px;color:#777}
.st-n{display:flex;align-items:baseline;gap:10px;margin-top:4px}
.st-n b{font:600 32px/1 var(--f);font-variant-numeric:tabular-nums}
.st-n em{font-style:normal;color:#14874A;font-size:13px;font-weight:600}
.bars{display:flex;align-items:flex-end;gap:8px;height:90px;margin-top:14px}
.bars i{flex:1;height:var(--h);border-radius:4px 4px 0 0;background:#111;transform-origin:50% 100%;transform:scaleY(0);transition:transform 1s var(--ease)}
.bars i:last-child{background:#5BD38A}
.in .bars i{transform:none}
.in .bars i:nth-child(2){transition-delay:.08s}.in .bars i:nth-child(3){transition-delay:.16s}.in .bars i:nth-child(4){transition-delay:.24s}
.in .bars i:nth-child(5){transition-delay:.32s}.in .bars i:nth-child(6){transition-delay:.4s}.in .bars i:nth-child(7){transition-delay:.48s}
.st-src{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.st-src span{padding:4px 8px;border-radius:99px;background:#F2F2F2;font-size:11.5px;color:#555}

/* ---------------------------------------------------------- trade picker */
.pick{padding-top:clamp(96px,11vw,150px)}
.pick-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:20px 48px;margin-top:clamp(40px,5vw,64px);align-items:start}
.pick-chips{display:flex;flex-wrap:wrap;gap:10px;align-content:flex-start}
.pick-chips button{
  padding:12px 18px;border-radius:999px;border:1px solid var(--line-2);background:transparent;font-size:15px;
  transition:background-color .25s,color .25s,border-color .25s,transform .25s var(--ease);
}
.pick-chips button:hover{border-color:#fff;transform:translateY(-2px)}
.pick-chips button[aria-checked="true"]{background:#fff;color:#000;border-color:#fff}
.pick-panel{position:sticky;top:96px;border-radius:16px;overflow:hidden;background:linear-gradient(180deg,var(--card-2),var(--card))}
.pick-frame{position:relative;padding:28px 28px 0}
.pick-frame .site{border-radius:10px 10px 0 0;box-shadow:0 30px 60px -24px rgba(0,0,0,.7);animation:pickIn .6s var(--ease)}
@keyframes pickIn{from{opacity:0;transform:translateY(18px) scale(.98)}}
.pick-info{padding:28px}
.pick-type{font:500 clamp(22px,2vw,28px)/1.2 var(--f);letter-spacing:-.02em}
html[data-lang="zh"] .pick-type{font-family:var(--f-hk);font-weight:700;letter-spacing:0}
.pick-note{margin-top:8px;color:var(--ink-2)}
.pick-feats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:22px 0 26px;padding:0;list-style:none}
.pick-feats li{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:10px;background:rgba(255,255,255,.06);font-size:14.5px;animation:pickIn .5s var(--ease) both}
.pick-feats li:nth-child(2){animation-delay:.06s}.pick-feats li:nth-child(3){animation-delay:.12s}.pick-feats li:nth-child(4){animation-delay:.18s}
.pick-btns{display:flex;flex-wrap:wrap;gap:12px}
.pick-frame[data-demo]{cursor:pointer}
.pick-feats li::before{content:"✓";flex:none;width:22px;height:22px;display:grid;place-items:center;border-radius:50%;background:#DDF5E6;color:#14653A;font-size:12px;font-weight:800}
@media (max-width:900px){
  .pick-grid{grid-template-columns:minmax(0,1fr)}
  .pick-panel{position:static}
  /* the chips become one swipeable row so the panel stays near them */
  .pick-chips{flex-wrap:nowrap;overflow-x:auto;margin:0 calc(var(--gut)*-1);padding:0 var(--gut) 4px;scrollbar-width:none}
  .pick-chips::-webkit-scrollbar{display:none}
  .pick-chips button{flex:none}
}
@media (max-width:520px){.pick-feats{grid-template-columns:minmax(0,1fr)}.pick-frame{padding:18px 18px 0}.pick-info{padding:22px 18px}}

/* ------------------------------------------------------------ more ways */
.related{padding-top:clamp(96px,11vw,150px)}
.rel-scroll{margin-top:clamp(36px,5vw,56px);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;cursor:grab}
.rel-scroll::-webkit-scrollbar{display:none}
.rel-scroll.drag{cursor:grabbing;scroll-snap-type:none}
.rel-scroll.drag *{pointer-events:none;user-select:none}
.rel-track{display:flex;gap:20px;width:max-content;padding:0 max(var(--gut),calc((100vw - var(--max))/2 + var(--gut)))}
.rel-card{
  position:relative;flex:none;width:clamp(280px,30vw,400px);aspect-ratio:4/5;padding:28px;border-radius:16px;overflow:hidden;
  scroll-snap-align:start;scroll-margin-left:max(var(--gut),calc((100vw - var(--max))/2 + var(--gut)));
  background:linear-gradient(180deg,var(--card-2),var(--card));text-decoration:none;display:flex;flex-direction:column;
}
.rel-eye{font:500 12px/1 var(--f);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
html[data-lang="zh"] .rel-eye{font-family:var(--f-hk);letter-spacing:.2em}
.rel-card h3{margin-top:14px;font:500 24px/1.2 var(--f);letter-spacing:-.02em}
html[data-lang="zh"] .rel-card h3{font-family:var(--f-hk);font-weight:500;letter-spacing:0}
.rel-card img{position:absolute;left:28px;right:28px;bottom:76px;width:calc(100% - 56px);height:48%;object-fit:cover;border-radius:10px;transition:transform .8s var(--ease)}
.rel-card:hover img{transform:scale(1.04)}
.rel-arrow{position:absolute;right:28px;bottom:24px;font-style:normal;font-size:22px;transition:transform .3s var(--ease)}
.rel-card:hover .rel-arrow{transform:translateX(6px)}
.rel-bar{position:relative;height:2px;margin-top:32px;background:rgba(255,255,255,.14);border-radius:2px;overflow:hidden}
.rel-bar i{position:absolute;top:0;bottom:0;left:0;width:30%;background:#fff;border-radius:2px;transition:left .15s linear}

/* --------------------------------------------------------------- manifesto */
/* one paragraph whose words come into focus as it scrolls through; the
   words are wrapped in spans by script.js */
.mani{padding-top:clamp(110px,13vw,180px)}
.mani-k{font:500 13px/1 var(--f);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
html[data-lang="zh"] .mani-k{font-family:var(--f-hk);letter-spacing:.24em}
.mani-t{max-width:20em;margin-top:28px;font:400 clamp(32px,4.4vw,64px)/1.15 var(--f);letter-spacing:-.035em}
html[data-lang="zh"] .mani-t{max-width:15em;font-family:var(--f-hk);font-weight:500;letter-spacing:0;line-height:1.4;font-size:clamp(28px,3.8vw,56px)}
.mani-t .w{opacity:.14;filter:blur(3px);transition:opacity .5s var(--ease),filter .5s var(--ease)}
.mani-t .w.lit{opacity:1;filter:none}

/* ---------------------------------------------------------------- steps */
.steps{padding-top:clamp(96px,11vw,150px)}
.steps-in{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:32px 64px;align-items:start}
.steps-in .h-sub{position:sticky;top:110px}
/* each step is a card that sticks a little lower than the one before, so
   they pile up as the page scrolls; script.js shrinks and dims the ones
   underneath (--sh) */
.st-list{padding:0 0 4vh;list-style:none;counter-reset:s}
.st-list li{
  --i:0;--sh:0;counter-increment:s;position:sticky;top:calc(110px + var(--i) * 18px);
  display:flex;flex-direction:column;justify-content:space-between;gap:28px;min-height:clamp(190px,22vw,240px);margin-bottom:18px;
  padding:clamp(24px,3vw,36px);border-radius:16px;border:1px solid var(--line);background:linear-gradient(160deg,#3A3431,#262220);
  box-shadow:0 -20px 40px -24px rgba(0,0,0,.7);transform-origin:50% 0;
  transform:scale(calc(1 - var(--sh) * .05));filter:brightness(calc(1 - var(--sh) * .35));
}
.st-list li:nth-child(2){--i:1}.st-list li:nth-child(3){--i:2}.st-list li:nth-child(4){--i:3}.st-list li:nth-child(5){--i:4}.st-list li:nth-child(6){--i:5}
.st-list li::before{content:counter(s,decimal-leading-zero);font:300 clamp(40px,4vw,56px)/1 var(--f);letter-spacing:-.04em;color:rgba(255,255,255,.4);font-variant-numeric:tabular-nums}
.st-list h3{font:400 clamp(20px,1.9vw,26px)/1.35 var(--f);letter-spacing:-.015em;max-width:24em}
html[data-lang="zh"] .st-list h3{font-family:var(--f-hk);font-weight:500;letter-spacing:0}
.st-list li:last-child{margin-bottom:0}
@media (max-width:860px){.steps-in{grid-template-columns:minmax(0,1fr)}.steps-in .h-sub{position:static}.st-list li{top:calc(84px + var(--i) * 14px)}}

/* -------------------------------------------------------------- support */
.support{padding-top:clamp(96px,11vw,150px)}
.sup-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:clamp(36px,5vw,56px)}
.sup-card{position:relative;display:block;min-height:200px;padding:32px 32px 72px;border-radius:16px;text-decoration:none}
.sup-card h3{font:500 24px/1.2 var(--f);letter-spacing:-.02em}
html[data-lang="zh"] .sup-card h3{font-family:var(--f-hk);font-weight:500;letter-spacing:0}
.sup-card p{margin-top:12px;color:var(--ink-2)}
.sup-card i{position:absolute;right:28px;bottom:24px;font-style:normal;font-size:22px;transition:transform .3s var(--ease)}
.sup-card:hover i{transform:translateX(6px)}
@media (max-width:700px){.sup-links{grid-template-columns:minmax(0,1fr)}}

.qa{margin-top:clamp(48px,6vw,72px);border-top:1px solid var(--line-2)}
.qa details{border-bottom:1px solid var(--line-2)}
.qa summary{position:relative;padding:24px 48px 24px 0;cursor:pointer;list-style:none;font-size:18px;font-weight:500}
.qa summary::-webkit-details-marker{display:none}
.qa summary::before,.qa summary::after{content:"";position:absolute;right:6px;top:50%;width:16px;height:1.5px;background:#fff;transition:transform .3s var(--ease)}
.qa summary::after{transform:rotate(90deg)}
.qa details[open] summary::after{transform:rotate(0)}
.qa details p{max-width:46em;padding:0 48px 26px 0;color:var(--ink-2)}
.qa details[open] p{animation:fadeIn .4s var(--ease)}
@keyframes fadeIn{from{opacity:0;transform:translateY(-6px)}}
@media (max-width:520px){.qa summary{font-size:16.5px}.qa details p{padding-right:0}}

/* ------------------------------------------------------------ conversion */
.conv{padding:clamp(112px,13vw,180px) 0 clamp(80px,10vw,128px)}
.conv-in{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:40px 64px;align-items:center}
.cta-h{font:400 clamp(48px,7vw,108px)/.98 var(--f);letter-spacing:-.05em}
html[data-lang="zh"] .cta-h{font-family:var(--f-hk);font-weight:500;letter-spacing:-.02em;line-height:1.12;font-size:clamp(34px,5.6vw,88px)}
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:20px 28px;margin-top:40px}
.cta-row p{font-size:15px;color:var(--ink-2)}
.conv-asset{border-radius:16px;overflow:hidden;aspect-ratio:4/5}
.conv-asset img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.conv-asset:hover img{transform:scale(1.04)}
@media (max-width:860px){.conv-in{grid-template-columns:minmax(0,1fr)}.conv-asset{aspect-ratio:16/11}}

/* --------------------------------------------------------------- contact */
.contact{padding-top:clamp(64px,8vw,96px);padding-bottom:clamp(80px,10vw,128px)}
.contact-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,.6fr);gap:20px}
.form{display:flex;flex-direction:column;gap:20px;padding:clamp(22px,3vw,40px);border-radius:16px;background:linear-gradient(180deg,#232120,#1A1817);border:1px solid var(--line)}
.form>.btn{align-self:flex-start}
.f2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.f{display:flex;flex-direction:column;gap:8px;min-width:0;margin:0;padding:0;border:0}
.f>span,.f legend{padding:0;font-size:14px;font-weight:500;color:var(--ink-2)}
.f input,.f select,.f textarea{
  width:100%;min-width:0;padding:14px 0;border:0;border-bottom:1px solid var(--line-2);border-radius:0;background:transparent;
  font-size:17px;transition:border-color .2s;-webkit-appearance:none;appearance:none;
}
.f select{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.6'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 2px center/18px}
.f select option{background:#1C1C1C;color:#fff}
.f textarea{resize:vertical;min-height:96px}
.f input::placeholder,.f textarea::placeholder{color:#6E6E6E}
.f input:focus,.f select:focus,.f textarea:focus{outline:none;border-bottom-color:#fff}
.f .bad{border-bottom-color:#FF7A6B}
.needs{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.needs label{position:relative}
.needs input{position:absolute;opacity:0;pointer-events:none}
.needs span{display:inline-block;padding:9px 14px;border-radius:999px;border:1px solid var(--line-2);font-size:14px;cursor:pointer;transition:background-color .2s,color .2s,border-color .2s;user-select:none}
.needs span:hover{border-color:#fff}
.needs input:checked+span{background:#fff;color:#000;border-color:#fff}
.needs input:focus-visible+span{outline:2px solid #fff;outline-offset:2px}
.form-err{color:#FF7A6B;font-size:14px}
.form-sent{display:flex;align-items:flex-start;gap:14px;padding:18px;border-radius:10px;background:#DDF5E6;color:#14653A;font-weight:500}
.form-sent b{flex:none;width:28px;height:28px;display:grid;place-items:center;border-radius:50%;background:#14653A;color:#fff;font-size:14px}
.form>.btn.sending{opacity:.55;cursor:progress}
.form-out{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:18px;border-radius:10px;background:#0E0E0E;border:1px solid var(--line)}
.form-out pre{width:100%;margin:0;font:14px/1.6 var(--f-hk);white-space:pre-wrap;word-break:break-word;color:var(--ink-2)}
.next{padding:clamp(22px,3vw,32px);border-radius:16px;border:1px solid var(--line-2);align-self:start}
.next h3{font:500 20px/1.3 var(--f)}
html[data-lang="zh"] .next h3{font-family:var(--f-hk);font-weight:700}
.next ol{margin-top:18px;padding:0;list-style:none;counter-reset:n}
.next li{counter-increment:n;display:flex;gap:14px;padding:14px 0;border-top:1px solid var(--line);font-size:15px;color:var(--ink-2)}
.next li::before{content:counter(n,decimal-leading-zero);color:#fff;font-variant-numeric:tabular-nums}
.contact-links{display:flex;flex-direction:column;gap:8px;margin-top:18px}
.contact-links:empty{display:none}
.contact-links a{display:flex;justify-content:space-between;align-items:center;padding:14px 0;border-top:1px solid var(--line);text-decoration:none}
.contact-links small{color:var(--ink-3);font-size:14px}
@media (max-width:900px){.contact-grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){.f2{grid-template-columns:minmax(0,1fr)}.form>.btn{align-self:stretch}}

/* ---------------------------------------------------------------- footer */
.ftr{padding:clamp(48px,6vw,72px) 0 calc(28px + env(safe-area-inset-bottom));border-top:1px solid var(--line)}
.ftr-top{display:flex;align-items:center;gap:20px;padding-bottom:40px;border-bottom:1px solid var(--line-2)}
.ftr-top .logo svg{width:36px;height:36px}
.ftr-tag{font:400 clamp(22px,2.4vw,28px)/1.2 var(--f);letter-spacing:-.02em}
html[data-lang="zh"] .ftr-tag{font-family:var(--f-hk);font-weight:500;letter-spacing:0}
.ftr-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px;padding:40px 0 56px}
.ftr-cols h4{margin-bottom:16px;font-size:15px;font-weight:500}
.ftr-cols a{display:block;padding:7px 0;color:var(--ink-3);text-decoration:none;font-size:14.5px;transition:color .2s}
.ftr-cols a:hover{color:#fff}
.ftr-bot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;padding-top:24px;border-top:1px solid var(--line-2);font-size:14px}
.ftr-bot .lang-btn{padding-left:0}
@media (max-width:760px){.ftr-cols{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:860px){.ftr{padding-bottom:calc(96px + env(safe-area-inset-bottom))}}

/* ------------------------------------------------------- pointer details */
/* Only with a mouse (script.js adds .fine). A round badge follows the
   pointer over the gallery; dark cards carry a soft light under it; main
   buttons lean toward it. */
.cur-view{position:fixed;left:0;top:0;z-index:60;pointer-events:none;will-change:transform}
.cur-view span{display:grid;place-items:center;width:92px;height:92px;margin:-46px 0 0 -46px;border-radius:50%;background:#111;color:#fff;
  font:600 13px/1 var(--f);letter-spacing:.08em;transform:scale(0);transition:transform .35s var(--ease)}
html[data-lang="zh"] .cur-view span{font-family:var(--f-hk);letter-spacing:.12em;font-size:14px}
.cur-view.on span{transform:scale(1)}
.fine .tpl-i,.fine .device,.fine #pickFrame{cursor:none}

.fine .b-card::after,.fine .rel-card::after{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;opacity:0;transition:opacity .4s;
  background:radial-gradient(520px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.07),transparent 42%);
}
.fine .b-card:hover::after,.fine .rel-card:hover::after{opacity:1}

.fine .mag{transition:transform .35s var(--ease),background-color .25s,color .25s,border-color .25s;transform:translate(var(--bx,0),var(--by,0))}


/* ------------------------------------------------- round-9 motion pieces */
/* pinned sideways scroll: on wide screens script.js adds .hscroll (not
   .pin, which is the map marker), makes the
   section as tall as the cards are wide, and slides the track with the
   scroll; phones keep the native swipe */
.related.hscroll .rel-sticky{position:sticky;top:0;height:100vh;height:100svh;display:flex;flex-direction:column;justify-content:center}
.related.hscroll .rel-scroll{overflow:hidden;cursor:default;scroll-snap-type:none}
.related.hscroll .rel-track{will-change:transform}

/* the footer wordmark: letters rise in once, then lift under the pointer */
.ftr-word{display:flex;justify-content:space-between;margin:8px 0 28px;font:500 clamp(48px,12.4vw,190px)/.9 var(--f);letter-spacing:-.06em;white-space:nowrap;overflow:hidden;padding-bottom:.06em}
.ftr-word span{display:inline-block;transform:translateY(105%);transition:transform .9s var(--ease),color .3s}
.ftr-word.in span{transform:none}
.ftr-word.in span:hover{transform:translateY(-.08em);color:#A8E6C7;transition-duration:.35s}

/* the header logo draws its P once on load */
.logo-draw svg path{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1.3s .1s var(--ease) forwards}
@keyframes draw{to{stroke-dashoffset:0}}

/* a light that runs round the border of support cards and the picker
   panel while hovered (needs @property; elsewhere the border just stays) */
@property --ang{syntax:"<angle>";inherits:false;initial-value:0deg}
.sup-card,.pick-panel{border:1px solid transparent}
.sup-card{background:linear-gradient(var(--warm),var(--warm)) padding-box,linear-gradient(var(--line-2),var(--line-2)) border-box}
.pick-panel{background:linear-gradient(180deg,var(--card-2),var(--card)) padding-box,linear-gradient(var(--line),var(--line)) border-box}
.fine .sup-card:hover{background:linear-gradient(var(--card),var(--card)) padding-box,conic-gradient(from var(--ang),transparent 0 55%,#A8E6C7 70%,#FFCFB0 82%,transparent 95%) border-box;animation:spin 3s linear infinite}
.fine .pick-panel:hover{background:linear-gradient(180deg,var(--card-2),var(--card)) padding-box,conic-gradient(from var(--ang),transparent 0 55%,#A8E6C7 70%,#FFCFB0 82%,transparent 95%) border-box;animation:spin 4s linear infinite}
@keyframes spin{to{--ang:360deg}}

/* ------------------------------------------------- English-first details */
/* The page opens in English. A small label sits above each main heading —
   Traditional Chinese on the English page, English on the Chinese one —
   and one word per English heading is set in italic serif. */
.kick{display:block;margin-bottom:20px;font:500 13px/1.2 var(--f-hk);letter-spacing:.34em;color:var(--ink-3)}
.kick .zh{font-family:var(--f);letter-spacing:.18em;text-transform:uppercase;font-size:12px}
[data-tone="light"] .kick{color:#6B6B6B}
.cta-h .kick{margin-bottom:28px}
.hero-h em,.h-sub em,.cta-h em,.ftr-tag em,.state-t em{font-family:"Instrument Serif",Georgia,serif;font-style:italic;font-weight:400;letter-spacing:-.01em;font-size:1.06em}
/* a whisper of Chinese next to an English label */
.hk{font:500 .62em/1 var(--f-hk);font-style:normal;letter-spacing:.3em;opacity:.65;margin-left:.7em;vertical-align:.12em;white-space:nowrap}
.eyebrow .hk{font-size:.6em}
.ftr-tag .hk{font-size:.5em;letter-spacing:.24em}
@media (max-width:520px){.ftr-tag .hk{display:block;margin:10px 0 0}}

/* ------------------------------------------------------------ odds & ends */
.toast{
  position:fixed;left:50%;bottom:calc(84px + env(safe-area-inset-bottom));z-index:70;max-width:calc(100% - 32px);
  padding:12px 18px;border-radius:6px;background:#fff;color:#000;font-size:14px;font-weight:500;
  transform:translate(-50%,20px);opacity:0;pointer-events:none;transition:opacity .3s,transform .3s var(--ease);
}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* scroll reveal, only once script.js has marked the page, so nothing stays
   hidden if the script fails */
.js .rv{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js .rv.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  .js .rv{opacity:1;transform:none}
  .a-chat .ch-msg{opacity:1}
  .hero-asset{transform:none !important}
  .mani-t .w{opacity:1;filter:none}
  .st-list li{transform:none;filter:none}
  .ftr-word span{transform:none}
  .logo-draw svg path{stroke-dashoffset:0}
}

/* the hero device shows the real Closet page, live */
.device-shot{position:relative;width:100%;aspect-ratio:16/10;overflow:hidden;background:#fff;pointer-events:none}
.device-shot iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;pointer-events:none;background:#fff;color-scheme:light}