/* Layout concept: one fixed WebGL "water" field is the stage; DOM copy floats over it in a long
   scroll whose position drives the scene state (Active Theory style). The brand's own theme is kept:
   ivory paper, SENECA red as the only committed colour, four step inks (sand 启, red 调, orange 阻,
   cocoa 燃), Open Sans bold display with coloured emphasis, Noto Sans SC glyph tiles, pill buttons,
   product photography. Single light tone by brand decision (no dark theme). */
:root{
  color-scheme: light;
  --paper:#FBF5F1; --paper-2:#F4F1EC; --linen:#E9E0D3; --white:#FFFFFF;
  --ink:#2E2620; --ink-2:#5C5148; --mute:#8C8078;
  --red:#BC1226; --red-deep:#8A1220; --red-soft:#D63347;
  --sand:#EBCBA5; --sand-ink:#7A5A2E;
  --orange:#F08E12; --orange-ink:#A85600;
  --cocoa:#3D2E1E; --cocoa-ink:#6B4226;
  --leaf:#3F7A22; --leaf-soft:#7FB043;
  --line:rgba(46,38,32,.14); --line-2:rgba(46,38,32,.08);
  --veil:rgba(251,245,241,.78);
  --accent:var(--red); --accent-ink:var(--red); --tile:var(--red); --tile-ink:#fff;
  --f-display:"Open Sans","Noto Sans SC",system-ui,sans-serif;
  --f-body:"Open Sans","Noto Sans SC",system-ui,sans-serif;
  --f-cjk:"Noto Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --gutter:clamp(20px,5vw,80px);
  --pad-l:max(var(--gutter),env(safe-area-inset-left,0px));
  --pad-r:max(var(--gutter),env(safe-area-inset-right,0px));
  --ease:cubic-bezier(.16,1,.3,1);
  --r:20px;
  --z-canvas:1; --z-content:2; --z-nav:10; --z-menu:15; --z-loader:20;
}
[data-step="1"]{--accent:var(--sand-ink);--accent-ink:var(--sand-ink);--tile:var(--sand);--tile-ink:var(--ink)}
[data-step="2"]{--accent:var(--red);--accent-ink:var(--red);--tile:var(--red);--tile-ink:#fff}
[data-step="3"]{--accent:var(--orange-ink);--accent-ink:var(--orange-ink);--tile:var(--orange);--tile-ink:var(--ink)}
[data-step="4"]{--accent:var(--cocoa-ink);--accent-ink:var(--cocoa-ink);--tile:var(--cocoa);--tile-ink:#fff}

*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper-2);color:var(--ink);font-family:var(--f-body);font-size:16px;line-height:1.75;overflow-x:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit}
img{max-width:100%;height:auto;display:block}
:focus-visible{outline:2px solid var(--red);outline-offset:4px;border-radius:4px}
::selection{background:var(--red);color:#fff}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--linen);border-radius:8px;border:2px solid var(--paper-2)}
::-webkit-scrollbar-track{background:var(--paper-2)}
input,button,textarea{font:inherit;color:inherit}

#gl{position:fixed;inset:0;width:100%;height:100%;z-index:var(--z-canvas);display:block;background:var(--paper)}
#gl-fallback{position:fixed;inset:0;z-index:var(--z-canvas);background:
  linear-gradient(90deg,var(--paper) 30%,rgba(251,245,241,.4) 70%,rgba(251,245,241,.15)),
  var(--photo,none) right top/cover no-repeat, var(--paper)}

/* ---------- loader ---------- */
#loader{position:fixed;inset:0;z-index:var(--z-loader);background:var(--paper);display:grid;place-items:center;transition:opacity .8s var(--ease),visibility .8s}
#loader.done{opacity:0;visibility:hidden}
#loader .in{display:grid;justify-items:center;gap:22px}
#loader .logo{height:26px;width:auto}
#loader .four{display:flex;gap:10px}
#loader .four .g{opacity:.18;transform:translateY(6px);animation:fill 1.4s var(--ease) infinite alternate}
#loader .four .g:nth-child(2){animation-delay:.18s}#loader .four .g:nth-child(3){animation-delay:.36s}#loader .four .g:nth-child(4){animation-delay:.54s}
@keyframes fill{to{opacity:1;transform:none}}
#loader .pct{font:600 12px/1 var(--f-body);letter-spacing:.3em;color:var(--ink-2);font-variant-numeric:tabular-nums}

/* ---------- glyph tiles ---------- */
.g{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:12px;font:700 24px/1 var(--f-cjk);background:var(--tile);color:var(--tile-ink);flex:none;letter-spacing:0}
.g[data-s="1"]{background:var(--sand);color:var(--ink)}
.g[data-s="2"]{background:var(--red);color:#fff}
.g[data-s="3"]{background:var(--orange);color:var(--ink)}
.g[data-s="4"]{background:var(--cocoa);color:#fff}
.g.sm{width:32px;height:32px;border-radius:9px;font-size:17px}
.g.lg{width:72px;height:72px;border-radius:18px;font-size:40px}
.g.xl{width:clamp(88px,10vw,120px);height:clamp(88px,10vw,120px);border-radius:26px;font-size:clamp(52px,6vw,72px)}

/* ---------- nav ---------- */
.nav{position:fixed;top:env(safe-area-inset-top,0px);left:0;right:0;z-index:var(--z-nav);display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px var(--pad-r) 16px var(--pad-l);background:linear-gradient(var(--veil),rgba(251,245,241,.55));backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line-2);transition:padding .4s var(--ease),background .4s}
.nav.scrolled{padding-block:10px;background:rgba(251,245,241,.92)}
.nav .mark{display:inline-flex;align-items:center}
.nav .mark img{height:22px;width:auto}
.nav ul{list-style:none;margin:0;padding:0;display:flex;gap:clamp(14px,2.2vw,30px);align-items:center}
.nav ul a{text-decoration:none;font-size:13.5px;font-weight:600;letter-spacing:.04em;color:var(--ink-2);transition:color .3s;padding:6px 0;position:relative}
.nav ul a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.nav ul a:hover,.nav ul a[aria-current="page"]{color:var(--red)}
.nav ul a[aria-current="page"]::after{transform:scaleX(1)}
.nav ul a.lang{border:1px solid var(--line);padding:7px 14px;border-radius:999px;color:var(--ink);font-family:var(--f-cjk);font-weight:400}
.nav ul a.lang::after{display:none}
.nav ul a.lang:hover{border-color:var(--red);color:var(--red)}
.nav .menu{display:none;appearance:none;background:none;border:1px solid var(--line);border-radius:999px;width:44px;height:44px;cursor:pointer;place-items:center}
.nav .menu span{display:block;width:18px;height:2px;background:var(--ink);box-shadow:0 -6px 0 var(--ink),0 6px 0 var(--ink);border-radius:2px}
#menu{position:fixed;inset:0;z-index:var(--z-menu);background:var(--paper);display:grid;grid-template-rows:auto 1fr auto;padding:calc(18px + env(safe-area-inset-top,0px)) var(--pad-r) calc(24px + env(safe-area-inset-bottom,0px)) var(--pad-l);transform:translateY(-100%);opacity:0;transition:transform .6s var(--ease),opacity .4s;visibility:hidden}
#menu.open{transform:none;opacity:1;visibility:visible}
#menu .top{display:flex;justify-content:space-between;align-items:center}
#menu .top img{height:22px;width:auto}
#menu .close{appearance:none;background:none;border:1px solid var(--line);border-radius:999px;width:44px;height:44px;cursor:pointer;font-size:22px;line-height:1;color:var(--ink)}
#menu .four{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;align-content:center}
#menu .four a{text-decoration:none;display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;padding:16px;border:1px solid var(--line);border-radius:16px;background:var(--white)}
#menu .four a b{display:block;font-size:15px;letter-spacing:.08em}
#menu .four a small{color:var(--ink-2);font-size:12.5px}
#menu .rest{display:flex;flex-wrap:wrap;gap:10px 22px;justify-content:center;font-weight:600;font-size:15px}
#menu .rest a{text-decoration:none}
@media (max-width:860px){.nav ul{display:none}.nav .menu{display:grid}}

/* ---------- content shell ---------- */
main{position:relative;z-index:var(--z-content)}
section{position:relative;padding-block:clamp(72px,11vh,140px)}
.wrap{width:100%;max-width:1180px;margin-inline:auto;padding-left:var(--pad-l);padding-right:var(--pad-r)}   /* width:100% so a grid parent (the hero) cannot shrink it to its content */
.wrap.narrow{max-width:860px}
h1,h2,h3,h4{font-family:var(--f-display);font-weight:700;text-wrap:balance;margin:0;line-height:1.12;letter-spacing:-.015em}
h1{font-size:clamp(2.3rem,5.4vw,4.4rem);line-height:1.04;letter-spacing:-.02em}
h2{font-size:clamp(1.75rem,3.3vw,2.75rem)}
h3{font-size:clamp(1.15rem,1.6vw,1.35rem);line-height:1.3;letter-spacing:-.005em}
h4{font-size:.92rem;font-weight:700;letter-spacing:.02em;color:var(--accent-ink)}
h1 em,h2 em,h3 em,.em{font-style:normal;color:var(--accent-ink)}
h1 .red,h2 .red{font-style:normal;color:var(--red)}
h1 .leaf,h2 .leaf,.leaf{font-style:normal;color:var(--leaf)}
h1 .sand,h2 .sand{font-style:normal;color:var(--sand-ink)}
h1 .cocoa,h2 .cocoa{font-style:normal;color:var(--cocoa-ink)}
h1 .orange,h2 .orange{font-style:normal;color:var(--orange-ink)}
p{margin:0;max-width:62ch;text-wrap:pretty}
.lede{font-size:clamp(16px,1.25vw,18.5px);color:var(--ink-2);line-height:1.7}
.muted{color:var(--ink-2)}
.small{font-size:14px;line-height:1.65}
.lbl{font:600 12px/1 var(--f-body);letter-spacing:.2em;text-transform:uppercase;color:var(--red)}
.cjk{font-family:var(--f-cjk)}
.stack{display:grid;gap:18px}
.stack.tight{gap:10px}
.head{display:grid;gap:16px;max-width:52ch;margin-bottom:clamp(28px,5vh,56px)}
.head.center{text-align:center;margin-inline:auto;justify-items:center}
.btn{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-size:14px;font-weight:600;letter-spacing:.04em;padding:15px 28px;border-radius:999px;border:1px solid var(--line);color:var(--red);background:rgba(255,255,255,.55);transition:border-color .3s,background .3s,color .3s,transform .5s var(--ease),box-shadow .5s;cursor:pointer}
.btn:hover{border-color:var(--red);background:var(--white);transform:translateY(-2px);box-shadow:0 10px 28px -14px rgba(138,18,32,.45)}
.btn.solid{background:var(--red);color:#fff;border-color:var(--red)}
.btn.solid:hover{background:var(--red-deep);border-color:var(--red-deep);color:#fff}
.btn.onred{background:#fff;color:var(--red);border-color:#fff}
.btn.onred:hover{background:var(--paper);color:var(--red-deep)}
.btn svg{width:16px;height:16px;flex:none}
.cta{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.arrow{text-decoration:none;color:var(--red);font-weight:600;font-size:14px;letter-spacing:.03em;display:inline-flex;gap:8px;align-items:center}
.arrow svg{width:16px;height:16px;transition:transform .4s var(--ease)}
.arrow:hover svg{transform:translateX(4px)}
hr.rule{border:0;border-top:1px solid var(--line);margin:0}

/* reveal: visible at rest; JS adds .pre then .in */
.rv.pre{opacity:0;transform:translateY(22px);filter:blur(6px)}
.rv.in{opacity:1;transform:none;filter:none;transition:opacity 1.1s var(--ease),transform 1.1s var(--ease),filter 1.1s var(--ease)}
.rv.in.d1{transition-delay:.1s}.rv.in.d2{transition-delay:.2s}.rv.in.d3{transition-delay:.3s}.rv.in.d4{transition-delay:.4s}

/* page transitions: the field keeps running while the DOM leaves */
body.leaving main,body.leaving .nav,body.leaving footer{opacity:0;transform:translateY(-14px);filter:blur(5px);transition:opacity .42s ease,transform .42s var(--ease),filter .42s}
body.warm main,body.warm footer{animation:enter 1s var(--ease)}
@keyframes enter{from{opacity:0;transform:translateY(18px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}

/* ---------- hero ---------- */
.hero{min-height:100svh;display:grid;align-content:end;padding-top:140px;padding-bottom:0}
.hero .wrap{display:grid;gap:clamp(18px,3vh,28px);padding-bottom:clamp(40px,7vh,72px)}
.hero h1{max-width:12em}
.hero .lede{max-width:34em}
.hint{display:inline-flex;align-items:center;gap:12px;font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2)}
.hint::after{content:"";width:1px;height:36px;background:linear-gradient(var(--ink-2),transparent);animation:drip 2.2s var(--ease) infinite}
@keyframes drip{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* the day rhythm bar: four steps in time order, hover re-inks the field */
.rhythm{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line);background:linear-gradient(rgba(251,245,241,.3),rgba(251,245,241,.75))}
.rhythm li a{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;align-items:center;text-decoration:none;padding:20px 18px;border-right:1px solid var(--line-2);transition:background .35s,transform .5s var(--ease)}
.rhythm li:last-child a{border-right:0}
.rhythm li a:hover{background:rgba(255,255,255,.55);transform:translateY(-2px)}
.rhythm li a[aria-current="page"]{background:rgba(255,255,255,.7)}
.rhythm li a .g{grid-row:span 2}
.rhythm li a small{font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);align-self:end}
.rhythm li a small i{font-style:normal}
.rhythm li a b{font-size:15px;letter-spacing:.08em;align-self:start}
.rhythm li a b i{font-style:normal;font-weight:400;color:var(--ink-2);letter-spacing:.02em;font-size:13.5px;display:block}
.hero .rhythm{margin-inline:calc(-1*var(--pad-l)) calc(-1*var(--pad-r))}
.hero .rhythm li a{padding-inline:clamp(14px,2vw,28px)}
.hero .rhythm li:first-child a{padding-left:var(--pad-l)}
.hero .rhythm li:last-child a{padding-right:var(--pad-r)}
@media (max-width:860px){.rhythm li a small i{display:none}.rhythm li a{grid-template-columns:1fr;padding:14px 10px;gap:8px}.rhythm li a .g{grid-row:auto}.rhythm li a b i{display:none}.rhythm li a b{font-size:12.5px}.rhythm li a small{font-size:11px;letter-spacing:.08em}}

/* product hero (step pages) */
.hero.product .wrap{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:end;column-gap:clamp(24px,5vw,80px)}
.hero.product .copy{display:grid;gap:clamp(16px,2.6vh,24px)}
.hero.product .art{align-self:stretch;display:grid;align-content:end;justify-items:end}
.hero.product .art img{width:min(100%,520px);border-radius:var(--r) var(--r) 0 0;box-shadow:0 30px 60px -40px rgba(46,38,32,.5);transform:translateY(1px)}
.hero.product .rhythm{grid-column:1/-1}
@media (max-width:860px){.hero.product .wrap{grid-template-columns:1fr}.hero.product .art{display:none}}
.tag{display:inline-flex;align-items:center;gap:10px;background:var(--tile);color:var(--tile-ink);font-weight:600;font-size:13px;letter-spacing:.05em;padding:9px 16px;border-radius:999px}
.stats{display:flex;flex-wrap:wrap;gap:12px 0;margin:0;padding:0;list-style:none}
.stats li{display:grid;gap:2px;padding-right:28px;margin-right:28px;border-right:1px solid var(--line)}
.stats li:last-child{border-right:0;margin-right:0;padding-right:0}
.stats b{font-size:clamp(1.8rem,2.6vw,2.4rem);line-height:1;color:var(--accent-ink);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.stats span{font-size:13px;letter-spacing:.02em;color:var(--ink-2)}
.pills{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;list-style:none}
.pills li{background:var(--white);border:1px solid var(--line-2);padding:8px 16px;border-radius:999px;font-size:14px;box-shadow:0 8px 20px -16px rgba(46,38,32,.5)}
.pills.dark li{background:var(--ink);color:var(--paper);border-color:var(--ink)}

/* ---------- layouts ---------- */
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,6vw,100px);align-items:start}
.split .sticky{position:sticky;top:120px;align-self:start;display:grid;gap:18px}
.split.even{grid-template-columns:1fr 1fr;align-items:center}
.split.flip{direction:rtl}.split.flip>*{direction:ltr}
@media (max-width:860px){.split,.split.even{grid-template-columns:1fr}.split .sticky{position:static}.split.flip{direction:ltr}}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:clamp(18px,3vw,32px)}
.cols.two{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:760px){.cols.two{grid-template-columns:1fr}}
.photo{border-radius:var(--r);overflow:hidden;background:var(--linen)}
.photo img{width:100%;height:100%;object-fit:cover}
.photo.tall{aspect-ratio:4/5}.photo.wide{aspect-ratio:16/10}.photo.sq{aspect-ratio:1}
.panel{background:rgba(255,255,255,.72);border:1px solid var(--line-2);border-radius:var(--r);padding:clamp(22px,3vw,36px);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.rule-quote{border-left:1px solid var(--red);padding-left:clamp(18px,2.5vw,32px);display:grid;gap:18px}
.rule-quote p{font-size:clamp(16px,1.3vw,19px);line-height:1.75}
.rule-quote p+p{border-top:1px solid var(--line);padding-top:18px}

/* steps as a day (home) */
.day{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;position:relative}
.day::before{content:"";position:absolute;left:0;right:0;top:36px;height:1px;background:linear-gradient(90deg,var(--sand),var(--cocoa) 40%,var(--orange) 70%,var(--red));opacity:.8}
.day li{display:grid;gap:12px;padding:0 clamp(12px,2vw,28px) 0 0;position:relative}
.day li .g{box-shadow:0 0 0 8px var(--paper-2)}
.day li .when{font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2)}
.day li h3{font-size:1.25rem}
.day li p{font-size:15px;color:var(--ink-2)}
.day li a{text-decoration:none}
@media (max-width:860px){.day{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 18px}.day::before{display:none}.day li .g{box-shadow:none}}
@media (max-width:420px){.day{grid-template-columns:1fr}}

/* the range: staggered editorial grid, photos lead */
.range-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3.5vw,44px);align-items:start}
.range-grid .prod:nth-child(even){transform:translateY(clamp(32px,7vh,96px))}
.prod{text-decoration:none;display:grid;gap:16px;color:inherit}
.prod .photo{aspect-ratio:4/5;position:relative;box-shadow:0 30px 60px -40px rgba(46,38,32,.45)}
.prod .photo img{transition:transform 1.2s var(--ease)}
.prod:hover .photo img{transform:scale(1.035)}
.prod .meta{display:grid;grid-template-columns:auto 1fr auto;gap:4px 16px;align-items:center}
.prod .meta .g{grid-row:span 2}
.prod .meta b{font-size:17px;letter-spacing:.14em}
.prod .meta .sub{font-size:14px;color:var(--ink-2);grid-column:2}
.prod .meta .arrow{grid-row:span 2;align-self:center}
.prod p{font-size:15px;color:var(--ink-2)}
@media (max-width:640px){.range-grid{grid-template-columns:1fr}.range-grid .prod:nth-child(even){transform:none}}

/* big quote */
.quote .wrap{text-align:center;display:grid;gap:22px;justify-items:center}
.quote h2{font-size:clamp(1.8rem,3.8vw,3.2rem);max-width:18em}
.quote .four{display:flex;gap:14px;align-items:center}
.quote .four i{width:18px;height:1px;background:var(--line)}
.quote .mark{font:700 clamp(3rem,6vw,5rem)/0.5 Georgia,serif;color:var(--red);height:.5em}

/* rows: name left, origin right */
.rows{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.rows li{display:grid;grid-template-columns:1fr auto;gap:6px 24px;align-items:baseline;padding:22px 0;border-bottom:1px solid var(--line);transition:padding-left .5s var(--ease)}
.rows li:hover{padding-left:10px}
.rows li b{font-size:clamp(1.15rem,1.8vw,1.5rem);letter-spacing:.01em}
.rows li span{font-size:13.5px;letter-spacing:.03em;color:var(--ink-2);text-align:right}
.rows li p{grid-column:1/-1;font-size:15px;color:var(--ink-2)}
@media (max-width:560px){.rows li{grid-template-columns:1fr}.rows li span{text-align:left}}

/* numbered list where the order is the information (steps, phases) */
.seq{list-style:none;margin:0;padding:0;display:grid;gap:0;counter-reset:seq}
.seq>li{display:grid;grid-template-columns:auto 1fr;gap:6px 20px;padding:24px 0;border-top:1px solid var(--line);counter-increment:seq;align-items:start}
.seq>li::before{content:counter(seq,decimal-leading-zero);font-size:13px;font-weight:700;letter-spacing:.12em;color:var(--accent-ink);padding-top:6px;font-variant-numeric:tabular-nums}
.seq>li h3,.seq>li h4{grid-column:2}
.seq>li p,.seq>li ul{grid-column:2}
.seq>li:last-child{border-bottom:1px solid var(--line)}
.ticks{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.ticks li{display:grid;grid-template-columns:18px 1fr;gap:12px;align-items:start;font-size:15px}
.ticks li::before{content:"";width:18px;height:18px;margin-top:4px;border-radius:50%;background:var(--accent-ink);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Ccircle cx='9' cy='9' r='8.5' fill='none' stroke='black'/%3E%3Cpath d='M5 9.3l2.6 2.6L13 6.6' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%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 18 18'%3E%3Ccircle cx='9' cy='9' r='8.5' fill='none' stroke='black'/%3E%3Cpath d='M5 9.3l2.6 2.6L13 6.6' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.ticks li b{display:block;grid-column:2}
.ticks li span{color:var(--ink-2);font-size:14.5px;grid-column:2}   /* the sub-line stays in the text column, never the 18px icon column */
.chain{display:flex;flex-wrap:wrap;gap:8px 0;align-items:center;font-size:14.5px;color:var(--ink-2)}
.chain span{display:inline-flex;align-items:center}
.chain span::after{content:"";width:22px;height:1px;background:var(--accent-ink);margin:0 12px;position:relative}
.chain span:last-child::after{content:none}

/* ingredient cards with photos */
.ing{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:clamp(16px,2.5vw,28px)}
.ing article{display:grid;gap:12px;align-content:start}
.ing .photo{aspect-ratio:5/4}
.ing h3{font-size:1.25rem}
.ing .alt{font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-ink)}
.ing ul{margin:0;padding-left:18px;font-size:14.5px;color:var(--ink-2);display:grid;gap:4px}
.ing p{font-size:14.5px;color:var(--ink-2)}

/* two-column ledger (product details) */
.ledger{display:grid;grid-template-columns:auto 1fr;gap:14px 28px;margin:0;font-size:15px}
.ledger dt{font-weight:600;letter-spacing:.06em;color:var(--ink-2);font-size:13px;text-transform:uppercase;padding-top:2px}
.ledger dd{margin:0}
.ledger dt,.ledger dd{padding-bottom:14px;border-bottom:1px solid var(--line-2)}
@media (max-width:560px){.ledger{grid-template-columns:1fr;gap:4px}.ledger dt{padding-bottom:0;border:0}}

/* meters (bean comparison) */
.meter{display:grid;grid-template-columns:1fr auto;gap:6px 14px;align-items:center;font-size:14px}
.meter i{display:flex;gap:4px}
.meter i b{width:22px;height:6px;border-radius:3px;background:var(--linen)}
.meter i b.on{background:var(--accent-ink)}

/* faq */
.faq{display:grid}
.faq details{border-bottom:1px solid var(--line)}
.faq details:first-child{border-top:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center;padding:22px 0;font-weight:600;font-size:clamp(1.05rem,1.5vw,1.25rem);letter-spacing:-.005em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";width:12px;height:12px;flex:none;border-right:2px solid var(--red);border-bottom:2px solid var(--red);transform:rotate(45deg) translate(-2px,-2px);transition:transform .4s var(--ease)}
.faq details[open] summary::after{transform:rotate(-135deg) translate(-3px,-1px)}
.faq details p{padding:0 0 22px;color:var(--ink-2);font-size:15.5px}

/* timeline (journey) */
.tl{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;position:relative}
.tl::before{content:"";position:absolute;left:0;right:0;top:22px;height:1px;background:var(--line)}
.tl li{display:grid;gap:10px;padding-right:clamp(12px,2vw,28px)}
.tl li .g{box-shadow:0 0 0 8px var(--paper-2)}
.tl li b{font-size:14px;letter-spacing:.14em}
.tl li p{font-size:14.5px;color:var(--ink-2)}
@media (max-width:760px){.tl{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 16px}.tl::before{display:none}.tl li .g{box-shadow:none}}

/* consultation band */
.band{background:var(--red);color:#fff;padding-block:clamp(64px,10vh,120px)}
.band .wrap{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(28px,6vw,96px);align-items:center}
.band h2{color:#fff}
.band p{color:rgba(255,255,255,.92)}
.band .small{color:rgba(255,255,255,.88)}
.band ::selection{background:#fff;color:var(--red)}
.band :focus-visible{outline-color:#fff}
.band form{display:grid;gap:12px}
.band label{display:grid;gap:6px;font-size:12.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.92)}
.band input,.band select{width:100%;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.35);border-radius:14px;padding:14px 16px;color:#fff;font-size:16px;letter-spacing:.02em;transition:background .3s,border-color .3s}
.band input::placeholder{color:rgba(255,255,255,.93)}
.band input:focus,.band select:focus{background:rgba(255,255,255,.2);border-color:#fff;outline:none}
.band select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='white' stroke-width='1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:16px}
.band select option{color:var(--ink);background:#fff}
.band .row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.band .sent{display:grid;gap:10px;padding:22px 24px;border:1px solid rgba(255,255,255,.4);border-radius:var(--r);background:rgba(255,255,255,.1)}
.band .sent b{font-size:18px}
.band .err{font-size:13.5px;color:#fff;background:rgba(0,0,0,.18);padding:8px 12px;border-radius:10px}
@media (max-width:860px){.band .wrap{grid-template-columns:1fr}.band .row{grid-template-columns:1fr}}

footer{position:relative;z-index:var(--z-content);background:var(--paper);border-top:1px solid var(--line);padding:40px var(--pad-r) calc(32px + env(safe-area-inset-bottom,0px)) var(--pad-l)}
footer .in{max-width:1180px;margin-inline:auto;display:grid;grid-template-columns:auto 1fr auto;gap:24px 40px;align-items:center}
footer img{height:20px;width:auto}
footer ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 22px;font-size:13.5px;font-weight:600;letter-spacing:.04em}
footer ul a{text-decoration:none;color:var(--ink-2)}
footer ul a:hover{color:var(--red)}
footer .copy{font-size:12.5px;letter-spacing:.03em;color:var(--ink-2);grid-column:1/-1}
footer .glyphs{display:flex;gap:8px}
@media (max-width:760px){footer .in{grid-template-columns:1fr}}

.note{font-size:13px;color:var(--ink-2);line-height:1.6}
.note+.note{margin-top:4px}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv.pre{opacity:1;transform:none;filter:none}
  .rv.in{transition:none}
  .hint::after,#loader .four .g{animation:none;opacity:1;transform:none}
  body.warm main,body.warm footer{animation:none}
  .btn,.prod .photo img,.rows li,.nav,.nav a,.rhythm li a,#menu{transition:none}
}

/* ---------- page components (programme / product pages) ---------- */
.rows.systems li{grid-template-columns:auto 1fr;align-items:center;gap:8px 18px}
.rows.systems li .g{grid-row:span 3}
.rows.systems li .chain,.rows.systems li p{grid-column:2}
.rows.systems li b{font-size:1.25rem}
.chain.plus span::after{content:"+";width:auto;height:auto;background:none;color:var(--accent-ink);font-weight:700;margin:0 10px}
.chain.plus span:last-child::after{content:none}
.chain.big{font-size:clamp(15px,1.3vw,18px);color:var(--ink);font-weight:600}
.daystep{padding-block:clamp(28px,5vh,60px)}
.dayintro{padding-bottom:0}
.when{display:flex;align-items:center;gap:16px}
.when .t{display:grid;gap:2px}
.when .t small{font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2)}
.when .t b{font-size:clamp(1.3rem,2vw,1.7rem);letter-spacing:.08em}
.when h3{font-size:clamp(1.05rem,1.4vw,1.25rem)}
.stats.col{flex-direction:column;gap:18px}
.stats.col li{border:0;padding:0;margin:0}
.seq.glyph>li{grid-template-columns:auto auto 1fr}
.seq.glyph>li .g{grid-row:span 4;margin-top:2px}
.seq.glyph>li h3,.seq.glyph>li h4,.seq.glyph>li p,.seq.glyph>li ul{grid-column:3}
.seq.plain>li::before{content:none}
.seq.plain>li{grid-template-columns:1fr}
.seq.plain>li h3,.seq.plain>li p,.seq.plain>li ul{grid-column:1}
.panel h4,.k{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-ink);font-weight:700}
.panel .lbl{color:var(--accent-ink)}
.harms{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:10px;counter-reset:h}
.harms li{counter-increment:h;display:flex;gap:12px;align-items:baseline;padding:12px 14px;border:1px solid var(--line-2);border-radius:12px;background:rgba(255,255,255,.55);font-size:15px}
.harms li::before{content:counter(h,decimal-leading-zero);font-weight:700;color:var(--accent-ink);font-size:12px;letter-spacing:.1em;font-variant-numeric:tabular-nums}
.vs{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.vs div{padding:18px 20px;border-radius:14px;background:rgba(255,255,255,.6);border:1px solid var(--line-2);display:grid;gap:4px}
.vs small{font-size:11.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2)}
.vs b{font-size:1.25rem;letter-spacing:-.01em}
.vs div.bad b{color:var(--accent-ink)}
@media (max-width:480px){.vs{grid-template-columns:1fr}}
.photo figcaption,.cap{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);padding-top:10px}
figure{margin:0}
.source{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-ink);font-weight:700}
.hero .copy .lede{max-width:30em}
.hero.product h1{max-width:10em}
.mt{margin-top:clamp(28px,5vh,56px)}
.mt-s{margin-top:16px}
.dl{display:grid;grid-template-columns:auto 1fr;gap:8px 20px;font-size:14.5px;margin:0}
.dl dt{color:var(--accent-ink);font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.dl dd{margin:0;color:var(--ink-2)}
.tri{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.tri div{display:grid;gap:6px;padding:18px;border-radius:14px;background:rgba(255,255,255,.6);border:1px solid var(--line-2);text-align:center}
.tri div .g{margin-inline:auto}
.tri b{font-size:15px;letter-spacing:.06em}
@media (max-width:640px){.tri{grid-template-columns:1fr}}
.flow{list-style:none;margin:0;padding:0;display:grid;gap:0}
.flow li{display:grid;grid-template-columns:auto 1fr;gap:4px 16px;padding:18px 0;border-top:1px solid var(--line);align-items:start}
.flow li .g{grid-row:span 3}
.flow li b{font-size:1.15rem}
.flow li i{font-style:normal;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-ink);font-weight:700}
.flow li p{font-size:14.5px;color:var(--ink-2)}
.flow li:last-child{border-bottom:1px solid var(--line)}
.beans{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,3vw,32px)}
@media (max-width:640px){.beans{grid-template-columns:1fr}}
.ing.four{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:860px){.ing.four{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ing.dense{grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr))}
.photo.logo img{object-fit:contain;padding:14%}
.ing.dense article{gap:8px}
.ing.dense .photo{aspect-ratio:4/3}
.grid-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:10px}
.grid-list li{padding:14px 16px;border-radius:12px;background:rgba(255,255,255,.55);border:1px solid var(--line-2);display:grid;gap:2px}
.grid-list li b{font-size:15px}
.grid-list li span{font-size:13.5px;color:var(--ink-2)}
.grid-list li.hi{background:var(--tile);border-color:var(--tile);color:var(--tile-ink)}
.grid-list li.hi span{color:inherit;opacity:.85}

.tag.leaf{background:var(--leaf);color:#fff}
.tags{display:flex;gap:10px;flex-wrap:wrap}
.rhythm.proof li a{grid-template-columns:1fr;gap:4px}
.rhythm.proof li a b{font-size:14px;letter-spacing:.02em}
.rhythm.proof li a small{align-self:auto}
@media (max-width:860px){.rhythm.proof{grid-template-columns:repeat(2,minmax(0,1fr))}.rhythm.proof li:nth-child(-n+2) a{border-bottom:1px solid var(--line-2)}.rhythm.proof li:nth-child(2) a{border-right:0}}
.group{display:grid;gap:14px}
.group .pills li{border-color:var(--line)}
.group.orange{--accent-ink:var(--orange-ink)}
.group.leaf{--accent-ink:var(--leaf)}
.group .k{color:var(--accent-ink)}
.group .chain span::after{background:var(--accent-ink)}
.stats.four li{padding-right:24px;margin-right:24px}
.stats.four b{font-size:clamp(1.5rem,2.2vw,2rem)}

/* ---------- Chinese pages: same system, CJK metrics ---------- */
html[lang="zh-CN"] body{font-family:var(--f-cjk);line-height:1.9;font-size:16px}
html[lang="zh-CN"] h1,html[lang="zh-CN"] h2,html[lang="zh-CN"] h3,html[lang="zh-CN"] h4{font-family:var(--f-cjk);letter-spacing:.02em;line-height:1.25}
html[lang="zh-CN"] h1{font-size:clamp(2.1rem,4.8vw,3.9rem);line-height:1.18}
html[lang="zh-CN"] .lbl,html[lang="zh-CN"] .k,html[lang="zh-CN"] .hero .who .t b,html[lang="zh-CN"] .rhythm li a small,html[lang="zh-CN"] .day li .when,html[lang="zh-CN"] .hint,html[lang="zh-CN"] .band label,html[lang="zh-CN"] .ing .alt,html[lang="zh-CN"] .ledger dt,html[lang="zh-CN"] .source,html[lang="zh-CN"] .cap,html[lang="zh-CN"] .photo figcaption{letter-spacing:.12em}
html[lang="zh-CN"] .btn,html[lang="zh-CN"] .tag,html[lang="zh-CN"] .nav ul a,html[lang="zh-CN"] .arrow{letter-spacing:.06em;font-size:15px}
html[lang="zh-CN"] .rhythm li a b,html[lang="zh-CN"] .prod .meta b,html[lang="zh-CN"] .when .t b{letter-spacing:.1em}
html[lang="zh-CN"] p{max-width:40em}

/* ---------- finish-review batch ---------- */
.byline{display:flex;align-items:center;gap:12px;font-size:15px;color:var(--ink-2)}
.byline>span>b{color:var(--accent-ink);letter-spacing:.06em;font-size:13.5px;text-transform:uppercase}
.byline>span>b::after{content:" · ";color:var(--ink-2);letter-spacing:0}
.pills.facts li{background:color-mix(in srgb,var(--tile) 16%,#fff);border-color:color-mix(in srgb,var(--tile) 55%,transparent);box-shadow:none;font-weight:600}
.pills.facts li b{color:var(--accent-ink);font-weight:800;font-variant-numeric:tabular-nums;margin-right:5px}
.hero .copy .pills.facts+.pills{margin-top:-6px}
.note.onred{color:rgba(255,255,255,.88);font-size:13px}
/* rhythm bar as one timeline: a single rule, four times as positions, the current step at full weight */
.rhythm{border-top:0;background:none;position:relative;padding-top:6px}
.rhythm::before{content:"";position:absolute;left:var(--pad-l);right:var(--pad-r);top:calc(6px + 22px);height:1px;background:var(--line)}
.rhythm li a{grid-template-columns:1fr;gap:6px 0;padding:0 18px 22px 0;border-right:0;background:none;opacity:.78;transition:opacity .35s,transform .5s var(--ease)}
.rhythm li a .g{grid-row:auto;position:relative;z-index:1}
.rhythm li a small{align-self:auto;margin-top:6px}
.rhythm li a:hover{background:none;opacity:1}
.rhythm li a[aria-current="page"]{background:none;opacity:1}
.rhythm li a[aria-current="page"] .g{width:52px;height:52px;border-radius:14px;font-size:28px;margin-top:-4px}
.rhythm:not(:has([aria-current="page"])) li a{opacity:1}
.hero .rhythm li:first-child a{padding-left:var(--pad-l)}
.hero .rhythm li:last-child a{padding-right:var(--pad-r)}
.hero .rhythm{margin-top:12px}
.rhythm.proof::before{display:none}
.rhythm.proof li a{opacity:1;padding-top:14px;border-top:1px solid var(--line)}
@media (max-width:860px){.rhythm li a{padding:0 10px 14px 0}.hero .rhythm li:first-child a{padding-left:var(--pad-l)}.rhythm.proof{gap:0 12px}.rhythm.proof li a{padding-right:0}.rhythm.proof li:nth-child(2) a{border-right:0}}
.when .t b{order:0}.when .t small{order:1}