/* ArcBridge, redesign-4. Chapters on changing grounds, one strand field behind them.

   Grounds. Each chapter names one; the script cross-fades the root tokens between them
   as chapters take the viewport. Without the script, or under reduced motion, each
   chapter paints its own ground instead, so the page is complete either way. */
:root{
  --porcelain:#EDF0EA; --spruce:#1F4D43; --ink:#0F2A25; --blush:#F4C7B8; --saffron:#F2B632;
  --deep:#10231F; --sea:#7FB7A8;

  --bg:var(--porcelain); --fg:var(--deep); --fg2:#435750; --line:rgba(16,35,31,.16);
  --btn:var(--deep); --btnfg:var(--porcelain);

  --serif:'Newsreader','Songti SC','STSong','Noto Serif SC','Source Han Serif SC',Georgia,serif;
  --sans:'Schibsted Grotesk','PingFang SC','Hiragino Sans GB','Noto Sans SC','Microsoft YaHei',system-ui,-apple-system,'Segoe UI',sans-serif;

  --gut:clamp(16px,4.2vw,64px);
  --max:1400px;
  --sec:clamp(96px,13vw,200px);

  /* a type scale on a 1.25 step from an 18px body, the display sizes fluid */
  --t-s:.875rem; --t-b:1.125rem; --t-l:1.3125rem; --t-h3:clamp(1.375rem,1.1rem + .9vw,1.875rem);
  --t-h2:clamp(2.25rem,1.3rem + 3.6vw,4.75rem); --t-d:clamp(2.875rem,1.2rem + 6.2vw,7.25rem);
  --ease:cubic-bezier(.2,.7,.1,1);
}
[data-ground=porcelain]{--g-bg:var(--porcelain);--g-fg:var(--deep);--g-fg2:#435750;--g-line:rgba(16,35,31,.16);--g-btn:var(--deep);--g-btnfg:var(--porcelain)}
[data-ground=spruce]{--g-bg:var(--spruce);--g-fg:#F2F5F0;--g-fg2:#C1D5CD;--g-line:rgba(237,240,234,.2);--g-btn:var(--saffron);--g-btnfg:var(--deep)}
[data-ground=ink]{--g-bg:var(--ink);--g-fg:#F2F5F0;--g-fg2:#B9CCC4;--g-line:rgba(237,240,234,.18);--g-btn:var(--saffron);--g-btnfg:var(--deep)}
[data-ground=blush]{--g-bg:var(--blush);--g-fg:var(--deep);--g-fg2:#4D3A33;--g-line:rgba(16,35,31,.2);--g-btn:var(--deep);--g-btnfg:var(--blush)}
[data-ground=saffron]{--g-bg:var(--saffron);--g-fg:var(--deep);--g-fg2:#3A3312;--g-line:rgba(16,35,31,.24);--g-btn:var(--deep);--g-btnfg:var(--saffron)}

html:not(.motion) [data-ground]{
  --bg:var(--g-bg); --fg:var(--g-fg); --fg2:var(--g-fg2); --line:var(--g-line); --btn:var(--g-btn); --btnfg:var(--g-btnfg);
  background:var(--bg); color:var(--fg);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:400 var(--t-b)/1.6 var(--sans);
  font-kerning:normal;-webkit-font-smoothing:antialiased;overflow-x:clip}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
:focus-visible{outline:2px solid currentColor;outline-offset:4px;border-radius:4px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:fixed;left:16px;top:-80px;z-index:60;background:var(--deep);color:var(--porcelain);padding:12px 18px;border-radius:999px;text-decoration:none}
.skip:focus{top:16px}

.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}
main{position:relative;z-index:1}
/* a chapter never widens the page: anything entering from the side is clipped at its edge */
.ch{position:relative;padding-block:var(--sec);overflow-x:clip}

#strands{position:fixed;inset:0;z-index:0;pointer-events:none;width:100vw;height:100vh}

/* ---------- type ---------- */
.hero-h,.ed-h,.routes-h,.plat-h,.mem-h,.caps-h,.cos-h,.ful-h,.mkt-h,.std-h,.eng-h,.info-h,.faq-h,.end-h,.co-n,.pcard h3,.route h3,.cap-n{
  font-family:var(--serif);font-weight:380;font-optical-sizing:auto;letter-spacing:-.018em;text-wrap:balance}
h2{font-size:var(--t-h2);line-height:1.02}
h3{font-size:var(--t-h3);line-height:1.18;font-weight:500}
p{max-width:64ch;text-wrap:pretty}
:lang(zh-CN) body{line-height:1.85}
:lang(zh-CN) :is(h1,h2,h3,.co-n,.cap-n,.eng-v,.ful-fig b){letter-spacing:0;font-weight:600;line-height:1.3}
:lang(zh-CN) p{max-width:36em}
:lang(ms) :is(h1,h2,h3){hyphens:auto;-webkit-hyphens:auto}

.tlink{position:relative;text-decoration:none;font-weight:500;padding-block:4px;
  background:linear-gradient(currentColor,currentColor) left bottom/100% 1px no-repeat;transition:background-size .5s var(--ease)}
.tlink:hover{background-size:0 1px;background-position:right bottom}

.btn{--mx:0px;--my:0px;display:inline-flex;align-items:center;gap:.6em;min-height:52px;padding:0 26px;border-radius:999px;
  background:var(--btn);color:var(--btnfg);text-decoration:none;font-weight:600;font-size:1rem;letter-spacing:.005em;
  position:relative;overflow:hidden;isolation:isolate;transform:translate(var(--mx),var(--my));transition:transform .5s var(--ease)}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:currentColor;opacity:0;transform:translateY(101%);
  border-radius:inherit;transition:transform .55s var(--ease),opacity .2s}
.btn:hover::before{transform:none;opacity:.14}
.btn span{display:inline-block;transition:transform .5s var(--ease)}
.btn-lt{--btn:var(--saffron);--btnfg:var(--deep)}
.btn-dk{--btn:var(--deep);--btnfg:var(--porcelain)}
.btn-xl{min-height:64px;padding:0 36px;font-size:1.125rem}

/* ---------- the bar ---------- */
.bar{position:fixed;inset:0 0 auto;z-index:40;display:flex;align-items:center;gap:24px;height:76px;padding-inline:var(--gut);
  color:var(--fg);transition:transform .6s var(--ease),background-color .4s,box-shadow .4s}
.bar.is-solid{background:var(--bg);box-shadow:0 1px 0 var(--line)}
.bar.is-hidden{transform:translateY(-100%)}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;font-weight:700;font-size:1.125rem;letter-spacing:-.01em}
.brand img{width:38px;height:38px;border-radius:10px;background:#fff;padding:3px}
.bar-links{display:flex;gap:4px;margin-inline:auto}
.bar-links a{position:relative;padding:10px 14px;text-decoration:none;font-size:.9375rem;font-weight:500;border-radius:999px;overflow:hidden}
.bar-links a span{position:relative;z-index:1}
.bar-links a::before{content:"";position:absolute;inset:0;border-radius:inherit;background:currentColor;opacity:0;transform:scale(.6);transition:opacity .3s,transform .45s var(--ease)}
.bar-links a:hover::before{opacity:.09;transform:none}
.bar-act{display:flex;align-items:center;gap:10px}
.pill{display:inline-flex;align-items:center;min-height:44px;padding:0 20px;border-radius:999px;background:var(--btn);color:var(--btnfg);
  text-decoration:none;font-weight:600;font-size:.9375rem;transform:translate(var(--mx,0),var(--my,0));transition:transform .5s var(--ease),background-color .4s,color .4s}
.lang{position:relative}
.lang summary{list-style:none;cursor:pointer;min-width:44px;min-height:44px;display:grid;place-items:center;border-radius:999px;
  box-shadow:inset 0 0 0 1px var(--line);font-weight:600;font-size:.875rem}
.lang summary::-webkit-details-marker{display:none}
.lang div{position:absolute;right:0;top:calc(100% + 8px);min-width:190px;padding:8px;border-radius:18px;background:var(--porcelain);color:var(--deep);
  box-shadow:0 20px 50px -20px rgba(16,35,31,.45)}
.lang div a{display:block;padding:10px 14px;border-radius:12px;text-decoration:none}
.lang div a:hover,.lang div a[aria-current]{background:rgba(31,77,67,.1)}
.burger{display:none;width:48px;height:48px;border:0;border-radius:999px;background:transparent;color:inherit;cursor:pointer;position:relative;
  box-shadow:inset 0 0 0 1px var(--line)}
.burger i{position:absolute;left:15px;right:15px;height:1.5px;background:currentColor;transition:transform .4s var(--ease)}
.burger i:first-of-type{top:20px}.burger i:last-of-type{top:27px}
.burger[aria-expanded=true] i:first-of-type{transform:translateY(3.5px) rotate(45deg)}
.burger[aria-expanded=true] i:last-of-type{transform:translateY(-3.5px) rotate(-45deg)}
.sheet{position:fixed;inset:0;z-index:35;background:var(--spruce);color:var(--porcelain);padding:110px var(--gut) 40px;display:flex;flex-direction:column;
  justify-content:space-between;clip-path:circle(0 at calc(100% - 44px) 38px);transition:clip-path .7s var(--ease)}
.sheet.is-open{clip-path:circle(150% at calc(100% - 44px) 38px)}
.sheet nav{display:flex;flex-direction:column}
.sheet nav a{font-family:var(--serif);font-size:clamp(2rem,8vw,3rem);line-height:1.2;text-decoration:none;padding-block:6px;
  opacity:0;transform:translateY(30px);transition:opacity .5s,transform .7s var(--ease)}
.sheet.is-open nav a{opacity:1;transform:none}
.sheet.is-open nav a:nth-child(2){transition-delay:.04s}.sheet.is-open nav a:nth-child(3){transition-delay:.08s}
.sheet.is-open nav a:nth-child(4){transition-delay:.12s}.sheet.is-open nav a:nth-child(5){transition-delay:.16s}
.sheet.is-open nav a:nth-child(6){transition-delay:.2s}.sheet.is-open nav a:nth-child(7){transition-delay:.24s}
.sheet-lang{display:flex;gap:18px;flex-wrap:wrap}
.sheet-lang a{text-decoration:none;opacity:.75}.sheet-lang a[aria-current]{opacity:1;text-decoration:underline}

/* chapter marker: where the reader is, and how far through the page */
.chap{position:fixed;left:var(--gut);bottom:18px;z-index:30;display:flex;align-items:center;gap:14px;font-size:.8125rem;font-weight:500;
  padding:8px 14px;border-radius:999px;background:var(--bg);box-shadow:0 0 0 1px var(--line);
  color:var(--fg);pointer-events:none;opacity:0;transition:opacity .5s}
.chap.is-on{opacity:1}
.chap-bar{display:block;width:72px;height:2px;background:var(--line);border-radius:2px;overflow:hidden}
.chap-bar b{display:block;height:100%;width:100%;background:currentColor;transform-origin:left;transform:scaleX(var(--p,0))}
.chap-t{max-width:40vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- hero ---------- */
.hero{min-height:100svh;padding-block:0;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden}
.hero-in{position:relative;padding-top:120px;padding-bottom:clamp(40px,6vh,72px);display:grid;gap:clamp(20px,3vh,32px)}
.hero-eye{font-size:1rem;font-weight:500;color:var(--fg2)}
.hero-h{font-size:var(--t-d);line-height:.98;max-width:13.5em}
:lang(zh-CN) .hero-h{max-width:12em;line-height:1.2}
:lang(ms) .hero-h{font-size:clamp(2.6rem,1.1rem + 5.4vw,6.5rem)}
.wd{display:inline-block;overflow:hidden;vertical-align:top;padding-block:.14em .2em;margin-block:-.14em -.2em}
.wd>span{display:inline-block}
.hero-foot{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:24px 64px;align-items:end}
.hero-lede{font-size:var(--t-l);line-height:1.5;color:var(--fg2);max-width:34em}
.hero-act{display:flex;align-items:center;gap:28px;flex-wrap:wrap;justify-self:end}
.hero-chips{display:flex;flex-wrap:wrap;gap:8px;padding-top:8px;border-top:1px solid var(--line)}
.hero-chips li{padding:8px 14px;border-radius:999px;font-size:.875rem;font-weight:500;box-shadow:inset 0 0 0 1px var(--line);transition:background-color .4s,color .4s}
.motion .hero-chips{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;padding:0}

/* the operating record, hung from the bridge once the arch has settled */
.span{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1px;margin:0 var(--gut);background:var(--line);border-block:1px solid var(--line)}
.span-i{background:var(--bg);padding:18px 16px}
.span dt{font-size:.8125rem;color:var(--fg2);line-height:1.35}
.span dd{font-family:var(--serif);font-size:clamp(2.25rem,4vw,3.5rem);line-height:1;margin-top:10px;font-weight:360}
.span dd i{font-style:normal;font-family:var(--sans);font-size:.875rem;margin-left:6px;color:var(--fg2)}
.span sup,.span-note sup{font-size:.7em}
.span-note{font-size:.8125rem;color:var(--fg2);padding-block:18px 32px;max-width:none}
.span-note{max-width:var(--max)}

/* ---------- editorial ---------- */
.ed{padding:0;color:#F2F5F0}
.ed-stage{position:relative}
.ed-f{position:relative;min-height:92svh;display:flex;align-items:flex-end;overflow:hidden}
.ed-img,.ed-img img{position:absolute;inset:0;width:100%;height:100%}
.ed-img img{object-fit:cover}
.ed-f::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,42,37,0) 35%,rgba(15,42,37,.82) 100%)}
.ed-cap{position:relative;z-index:1;padding-block:clamp(40px,10vh,110px);display:grid;gap:18px}
.ed-eye{font-weight:500;opacity:.85}
.ed-h{font-size:var(--t-h2);line-height:1.04;max-width:16em}
.ed-s{font-size:var(--t-l);max-width:36em;opacity:.9}
.ed-note{font-size:.8125rem;opacity:.78;margin-top:6px}

/* ---------- routes ---------- */
.routes-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:40px 80px;align-items:center;min-height:calc(100svh - 2*var(--sec) + 120px)}
.routes-h{font-size:var(--t-h2);max-width:9em}
.routes-l{display:grid;gap:10px}
.route{padding:26px 0 26px 28px;border-left:2px solid var(--line);transition:border-color .5s,opacity .5s,transform .7s var(--ease)}
.route h3{font-size:clamp(2rem,1.2rem + 2.4vw,3.5rem);line-height:1.05;margin-bottom:10px}
.route p{color:var(--fg2);max-width:32em}
.routes-close{grid-column:1/-1;font-family:var(--serif);font-size:var(--t-h3);font-style:italic;max-width:28em}
.motion .route{opacity:.32}
.motion .route.is-on{opacity:1;border-color:var(--saffron);transform:translateX(12px)}

/* ---------- platforms ---------- */
.plat{padding-bottom:calc(var(--sec)*.6)}
.plat-head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:24px 64px;align-items:end;margin-bottom:56px}
.plat-h{font-size:var(--t-h2)}
.plat-lede{color:var(--fg2)}
.plat-rail{overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;padding-block:24px;margin-block:-12px}
.plat-rail::-webkit-scrollbar{display:none}
.plat-track{display:flex;gap:20px;padding-inline:var(--gut);width:max-content}
.pcard{--tone:var(--spruce);--tonefg:var(--porcelain);position:relative;flex:0 0 auto;width:clamp(280px,30vw,400px);min-height:clamp(380px,52vh,480px);
  scroll-snap-align:start;display:flex;flex-direction:column;justify-content:flex-end;gap:12px;padding:28px;border-radius:28px;
  background:var(--tone);color:var(--tonefg);text-decoration:none;overflow:hidden;
  transition:transform .7s var(--ease),border-radius .7s var(--ease)}
.pcard:hover{transform:translateY(-10px) rotate(-.6deg);border-radius:40px}
.t-sea{--tone:#CFE3DB;--tonefg:var(--deep)}
.t-saffron{--tone:var(--saffron);--tonefg:var(--deep)}
.t-blush{--tone:var(--blush);--tonefg:var(--deep)}
.pcard .glyph{position:absolute;left:0;right:0;top:0;width:100%;height:58%;fill:none;stroke:currentColor;stroke-width:1.2;opacity:.55}
.pcard .glyph path{stroke-dasharray:260;stroke-dashoffset:0;transition:stroke-dashoffset 1.2s var(--ease)}
.pcard:hover .glyph path{stroke-dashoffset:520;transition-delay:calc(var(--k)*40ms)}
.pcard-k{font-size:.8125rem;font-weight:600;opacity:.8;min-height:1em}
.pcard h3{font-size:clamp(1.5rem,1.1rem + 1vw,2rem);line-height:1.1}
.pcard p{font-size:.9375rem;line-height:1.5;opacity:.86}
.plat-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px;margin-top:48px}
.plat-cats{display:flex;flex-wrap:wrap;gap:8px 24px}
.plat-cats li{font-weight:500;padding-left:18px;position:relative}
.plat-cats li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:8px;border-radius:50%;background:var(--spruce)}
.plat-cats li:nth-child(2)::before{background:var(--sea)}.plat-cats li:nth-child(3)::before{background:var(--saffron)}.plat-cats li:nth-child(4)::before{background:#D9876D}

/* ---------- memory ---------- */
.mem-in{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:48px 80px;align-items:start}
.mem-h{grid-column:1/-1;font-size:var(--t-d);line-height:1;max-width:11em}
.mem-body{display:grid;gap:24px;font-size:var(--t-l);line-height:1.55}
.mem-body .scrub{font-family:var(--serif);font-size:clamp(1.5rem,1rem + 1.4vw,2.25rem);line-height:1.3;max-width:26em}
.mem-body .scrub .wd{overflow:visible}
.mem-fig{border-radius:28px;overflow:hidden;aspect-ratio:4/5}
.mem-fig picture,.mem-fig img{width:100%;height:100%;object-fit:cover}
.mem-fig img{object-position:0% 50%}

/* ---------- capabilities ---------- */
.caps-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px 80px;align-items:center;min-height:calc(100svh - 2*var(--sec) + 160px)}
.caps-say{display:grid;gap:24px;justify-items:start}
.caps-h{font-size:var(--t-h2)}
.caps-p{color:var(--fg2);font-size:var(--t-l)}
.caps-l{border-top:1px solid var(--line)}
.cap{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 24px;padding:18px 0;border-bottom:1px solid var(--line);text-decoration:none;
  transition:padding .6s var(--ease),opacity .4s}
.cap-n{font-size:clamp(1.75rem,1.1rem + 1.8vw,2.75rem);line-height:1.1}
.cap-t{align-self:center;font-size:.9375rem;color:var(--fg2);text-align:right;max-width:18em}
.cap-d{grid-column:1/-1;font-size:.9375rem;color:var(--fg2);max-height:0;overflow:hidden;opacity:0;transition:max-height .6s var(--ease),opacity .4s}
.motion .caps-l.is-live .cap{opacity:.38}
.motion .caps-l.is-live .cap.is-on,.cap:focus-visible{opacity:1}
.cap.is-on{padding-left:18px}
.cap.is-on .cap-n{color:var(--saffron)}
.cap.is-on .cap-d{max-height:5em;opacity:1}
html:not(.motion) .cap:hover .cap-n{color:var(--saffron)}
html:not(.motion) .cap-d{max-height:none;opacity:1}

/* ---------- companies ---------- */
.cos-head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:24px 64px;align-items:end;margin-bottom:56px}
.cos-h{font-size:var(--t-h2)}
.cos-p{color:var(--fg2)}
.cos-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.co{--sx:50%;--sy:50%;position:relative;display:flex;flex-direction:column;gap:14px;min-height:clamp(380px,56vh,540px);padding:clamp(28px,3vw,44px);
  border-radius:32px;text-decoration:none;overflow:hidden;isolation:isolate;transition:transform .7s var(--ease)}
.co::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .4s;
  background:radial-gradient(420px circle at var(--sx) var(--sy),rgba(255,255,255,.22),transparent 60%)}
.co:hover::before{opacity:1}
.co-0{background:var(--spruce);color:#F2F5F0}
.co-1{background:var(--deep);color:#F2F5F0}
.co-tag{font-size:.875rem;font-weight:500;opacity:.8}
.co-n{font-size:clamp(3.5rem,2rem + 6vw,8rem);line-height:.9;margin-top:auto;letter-spacing:-.03em}
.co p{max-width:30em;opacity:.88}
.co-go{font-weight:600;display:inline-flex;align-items:center;gap:10px}
.co-go::after{content:"";width:28px;height:1.5px;background:currentColor;transition:width .5s var(--ease)}
.co:hover .co-go::after{width:56px}

/* ---------- FULGEO ---------- */
.ful-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px 80px;align-items:start}
.ful-eye{grid-column:1/-1;font-weight:600;font-size:.9375rem}
.ful-h{font-size:var(--t-h2);grid-column:1;grid-row:2/span 2;max-width:12em}
.ful-fig{grid-column:2;display:flex;align-items:flex-start;gap:10px;font-family:var(--serif);line-height:.82}
.ful-fig b{font-size:clamp(6rem,3rem + 11vw,15rem);font-weight:340;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.ful-cur,.ful-per{font-family:var(--sans);font-size:1rem;font-weight:600;padding-top:1.2em}
.ful-per{align-self:flex-end;padding:0 0 .6em}
.ful-m,.ful-s{grid-column:2;font-size:var(--t-l)}
.ful-s{color:var(--fg2);font-size:var(--t-b)}
.ful-l{grid-column:1;display:grid;gap:12px;margin-top:12px}
.ful-l li{display:flex;gap:12px;align-items:center;font-weight:500}
.ful-l svg{flex:0 0 24px;width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:30;stroke-dashoffset:0}
.ful-act{grid-column:2;display:flex;gap:28px;align-items:center;flex-wrap:wrap;margin-top:16px}

/* ---------- market entry ---------- */
.mkt-head{display:grid;gap:20px;max-width:52em}
.mkt-eye{font-weight:600;font-size:.9375rem}
.mkt-h{font-size:var(--t-h2)}
.mkt-p{color:var(--fg2);font-size:var(--t-l)}
.mkt-map{position:relative;margin-top:64px;height:clamp(300px,42vw,520px)}
.mkt-arc{position:absolute;inset:0 0 48px;width:100%;height:calc(100% - 48px);overflow:visible}
.mkt-arc path{fill:none;vector-effect:non-scaling-stroke}
.mkt-ghost{stroke:var(--line);stroke-width:1.5;stroke-dasharray:3 7}
.mkt-line{stroke:var(--spruce);stroke-width:3;stroke-linecap:round}
.mkt-end{position:absolute;bottom:0;font-family:var(--serif);font-size:var(--t-h3)}
.mkt-a{left:0}.mkt-b{right:0}
.mkt-steps li{position:absolute;display:grid;justify-items:center;gap:12px;width:min(260px,26vw);text-align:center;transform:translate(-50%,-14px);font-weight:500;line-height:1.35}
.mkt-steps i{width:18px;height:18px;border-radius:50%;background:var(--saffron);box-shadow:0 0 0 6px var(--bg),0 0 0 7px var(--spruce)}
.mkt-act{margin-top:56px}

/* ---------- standard ---------- */
.std-head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:24px 64px;align-items:end;margin-bottom:56px}
.std-h{font-size:var(--t-h2)}
.std-p{color:var(--fg2)}
.std-row{display:flex;gap:16px;min-height:360px}
.std-c{flex:1 1 0;display:flex;flex-direction:column;justify-content:flex-end;gap:14px;padding:32px;border-radius:28px;background:rgba(255,255,255,.34);
  box-shadow:inset 0 0 0 1px var(--line);transition:flex-grow .8s var(--ease),background-color .5s;cursor:default;outline-offset:-4px}
.std-c h3{font-size:clamp(1.5rem,1.1rem + 1.2vw,2.25rem)}
.std-c p{color:var(--fg2);max-width:28em}
.std-c.is-open{flex-grow:2.2;background:var(--deep);color:#F2F5F0}
.std-c.is-open p{color:#C8D7D0}
.std-act{margin-top:40px}

/* ---------- engine ---------- */
.eng-in{display:grid;gap:40px;min-height:calc(100svh - 2*var(--sec) + 160px);align-content:center}
.eng-eye{font-weight:500;color:var(--fg2)}
.eng-rows{display:grid;max-width:min(62%,860px);border-top:1px solid var(--line)}
.eng-r{display:grid;grid-template-columns:minmax(0,5.4em) minmax(0,1fr);align-items:baseline;gap:8px 40px;padding:22px 0;border-bottom:1px solid var(--line);
  font-size:clamp(2.25rem,1rem + 3vw,4.25rem);transition:opacity .6s,padding .7s var(--ease)}
.eng-v{font-family:var(--serif);font-weight:380;line-height:1;letter-spacing:-.02em;transition:color .5s,transform .7s var(--ease);white-space:nowrap}
.eng-r p{font-size:var(--t-l);line-height:1.45;color:var(--fg2);max-width:26em;transition:color .5s}
.motion .eng-rows.is-live .eng-r{opacity:.3}
.motion .eng-rows.is-live .eng-r.is-done{opacity:.62}
.motion .eng-rows.is-live .eng-r.is-on{opacity:1;padding-left:18px}
.eng-r.is-on .eng-v{color:var(--saffron)}
.eng-r.is-on p{color:var(--fg)}
:lang(zh-CN) .eng-v{font-weight:600}
.eng-act{margin-top:8px}

/* ---------- company information ---------- */
.info-in{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:32px 80px;align-items:start}
.info-h{font-size:var(--t-d);line-height:1}
.info-p{font-size:var(--t-l);margin-bottom:24px}
.info-rec{display:grid;border-top:1px solid var(--line);margin-bottom:28px}
.info-rec li{padding:14px 0;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums}

/* ---------- questions ---------- */
.faq-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:32px 80px;align-items:start}
.faq-h{font-size:var(--t-h2);position:sticky;top:120px}
.qa{border-top:1px solid var(--line)}
.qa:last-child{border-bottom:1px solid var(--line)}
.qa summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:24px;padding:24px 0;font-size:var(--t-l);font-weight:500;line-height:1.35}
.qa summary::-webkit-details-marker{display:none}
.qa summary i{flex:0 0 28px;height:28px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--line);position:relative;transition:transform .5s var(--ease),background-color .3s}
.qa summary i::before,.qa summary i::after{content:"";position:absolute;left:8px;right:8px;top:13.25px;height:1.5px;background:currentColor}
.qa summary i::after{transform:rotate(90deg);transition:transform .5s var(--ease)}
.qa[open] summary i{transform:rotate(180deg);background:var(--fg);color:var(--bg)}
.qa[open] summary i::after{transform:rotate(0)}
.qa-a{overflow:hidden}
.qa-a p{padding-bottom:26px;color:var(--fg2)}

/* ---------- closing ---------- */
.end{min-height:92svh;display:flex;align-items:center}
.end-in{display:grid;gap:28px}
.end-eye{font-weight:600}
.end-h{font-size:clamp(3rem,1.2rem + 7.4vw,9rem);line-height:.96;max-width:10em}
:lang(zh-CN) .end-h{line-height:1.2}
.end-p{font-size:var(--t-l);max-width:36em}
.end-act{display:flex;align-items:center;gap:32px;flex-wrap:wrap}

/* ---------- footer ---------- */
.foot{position:relative;z-index:1;padding-block:80px 40px}
html.motion .foot{color:var(--fg)}
.foot-in{display:grid;grid-template-columns:120px 1fr 1fr;gap:40px 64px}
.foot-brand img{width:96px;height:auto;border-radius:18px;background:#fff;padding:6px}
.foot-nav{display:grid;gap:10px;align-content:start}
.foot-nav a,.foot-lang a{text-decoration:none;opacity:.86}
.foot-nav a:hover,.foot-lang a:hover{opacity:1;text-decoration:underline}
.foot-lang{grid-column:2/-1;display:flex;gap:20px}
.foot-disc,.foot-rec{grid-column:1/-1;font-size:.8125rem;color:var(--fg2);max-width:90ch}
.foot-rec span{display:block;margin-top:6px}

/* ---------- motion states ----------
   Only when the script is running and motion is allowed. Everything here is a starting
   pose that home.js animates away from. */
.motion .hero-h .wd>span{opacity:0}
.hero-h .wd{perspective:800px}
.motion .hero-eye>span{display:inline-block}
.motion .hero-eye>span,.motion .hero-lede,.motion .hero-act{opacity:0;transform:translateY(18px)}
.motion.is-ready .hero-eye>span,.motion.is-ready .hero-lede,.motion.is-ready .hero-act{opacity:1;transform:none;
  transition:opacity .9s,transform 1.1s var(--ease)}
.motion.is-ready .hero-eye>span{transition-delay:.2s}.motion.is-ready .hero-lede{transition-delay:.9s}.motion.is-ready .hero-act{transition-delay:1.05s}

@media (min-width:1000px){
  /* hung from the bridge: the script positions each figure on the curve */
  .motion .hero{min-height:100vh}
  .motion .span.is-hung{position:absolute;inset:0;margin:0;background:none;border:0;display:block;pointer-events:none}
  .motion .span.is-hung .span-i{position:absolute;background:none;padding:0;width:150px;transform:translateX(-50%);text-align:center;opacity:0}
  .motion .span.is-hung .span-i::before{content:"";position:absolute;left:50%;bottom:100%;width:1px;height:var(--drop,80px);background:currentColor;opacity:.4;
    transform-origin:top;transform:scaleY(var(--hang,0))}
  .motion .span.is-hung dd{margin-top:0;margin-bottom:6px}
  .motion .span.is-hung .span-i{display:flex;flex-direction:column-reverse}
  .motion .span-note{position:absolute;bottom:0;left:0;right:0;margin:auto;opacity:0}
}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .bar-links{display:none}
  .burger{display:block}
  .bar{justify-content:space-between}
}
@media (max-width:900px){
  .hero-foot,.routes-in,.plat-head,.mem-in,.caps-in,.cos-head,.ful-in,.std-head,.info-in,.faq-in{grid-template-columns:1fr}
  .hero-act{justify-self:start}
  .ful-h,.ful-fig,.ful-m,.ful-s,.ful-l,.ful-act{grid-column:1;grid-row:auto}
  .cos-grid{grid-template-columns:1fr}
  .std-row{flex-direction:column;min-height:0}
  .std-c{min-height:0;flex:0 0 auto}
  .cap{grid-template-columns:1fr}
  .cap-t{text-align:left}
  .std-c.is-open{flex-grow:1}
  .eng-h,.eng-l{grid-template-columns:1fr 1fr}
  .faq-h{position:static}
  .mkt-map{height:auto;margin-top:40px}
  .mkt-arc,.mkt-end{display:none}
  .mkt-steps{display:grid;gap:18px;border-left:2px solid var(--spruce);padding-left:24px}
  .mkt-steps li{position:static;transform:none;width:auto;text-align:left;justify-items:start;display:flex;gap:14px;align-items:center}
  .mkt-steps i{flex:0 0 14px;width:14px;height:14px;margin-left:-32px}
  .foot-in{grid-template-columns:1fr 1fr}
  .foot-brand{grid-column:1/-1}
  .foot-lang{grid-column:1/-1;flex-wrap:wrap}
  .chap{display:none}
  .mem-fig{aspect-ratio:4/3}
}
@media (max-width:560px){
  .bar{height:66px}
  .pill{display:none}
  .hero-in{padding-top:96px}
  .span{grid-template-columns:1fr 1fr}
  .pcard{width:82vw}
  .eng-h,.eng-l{grid-template-columns:1fr}
  .end-act,.hero-act{gap:20px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
}
/* without the script the steps cannot be placed on the arc, so they are set as the
   list a phone gets */
html:not(.motion) .mkt-map{height:auto;margin-top:40px}
html:not(.motion) .mkt-arc,html:not(.motion) .mkt-end{display:none}
html:not(.motion) .mkt-steps{display:grid;gap:18px;border-left:2px solid var(--spruce);padding-left:24px}
html:not(.motion) .mkt-steps li{position:static;transform:none;width:auto;text-align:left;display:flex;gap:14px;align-items:center}
html:not(.motion) .mkt-steps i{flex:0 0 14px;width:14px;height:14px;margin-left:-32px}

/* ---------- scrolling is not hovering ----------
   While the page moves, content slides under a pointer that has not moved. Nothing
   inside the page responds to that: hover styles and hover handlers wait until the
   scroll settles and the pointer itself moves. */
.is-scrolling main{pointer-events:none}

/* the chapter marker steps aside for the footer */
.chap.is-off{opacity:0!important}

/* the corridor line a phone draws down the side of the steps */
.mkt-rail{display:none}

/* ---------- phones get the chapters too ---------- */
@media (max-width:999px){
  .motion .span.is-grid{position:absolute;left:var(--gut);right:var(--gut);top:46svh;margin:0;display:grid;grid-template-columns:1fr 1fr;
    gap:0;background:none;border:0}
  .motion .span.is-grid .span-i{background:none;padding:12px 0;border-top:1px solid var(--line);opacity:0}
  .motion .span.is-grid dd{font-size:2.25rem;margin-top:4px}
  .motion .span-note{position:absolute;left:0;right:0;bottom:0;opacity:0;padding-bottom:20px}
  .motion .hero{min-height:100svh}
  .motion .ed-f{min-height:100svh}
  .motion :is(.routes,.caps,.eng,.mem,.mkt){padding-block:88px 40px}
  .motion .routes-in,.motion .caps-in,.motion .eng-in{min-height:0;gap:24px}
  .motion .route{padding:14px 0 14px 18px}
  .motion .route h3{font-size:1.875rem;margin-bottom:6px}
  .motion .route p{font-size:1rem}
  .motion .routes-close{font-size:1.25rem}
  .motion .caps-say{gap:14px}
  .motion .caps-p{font-size:1.0625rem}
  .motion .cap{padding:11px 0}
  .motion .cap-n{font-size:1.625rem}
  .motion .cap-t{display:none}
  .motion .mem-in{gap:20px}
  .motion .mem-h{font-size:clamp(2.25rem,9vw,3rem)}
  .motion .mem-body .scrub{font-size:1.25rem}
  .motion .mem-fig{order:-1;aspect-ratio:auto;height:30svh;grid-row:1}
  .eng-rows{max-width:none}
  .eng-r{grid-template-columns:1fr;gap:6px;padding:14px 0;font-size:clamp(2rem,8.5vw,2.75rem)}
  .eng-r p{font-size:1rem}
  .motion .mkt-steps{border-left:0;position:relative}
  .motion .mkt-rail{display:block;position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--spruce);transform-origin:top;transform:scaleY(0)}
  .motion .mkt-map{position:relative;padding-left:24px}
  .motion .mkt-steps{padding-left:0}
  .motion .mkt-steps i{margin-left:-31px}
  .motion .mkt-steps li{font-size:1.125rem}
  /* the companies and the standard stack like cards dealt onto a table */
  .motion .cos-grid,.motion .std-row{display:block}
  .motion .co,.motion .std-c{position:sticky;top:calc(84px + var(--i,0)*18px);margin-bottom:18px;transform-origin:top center}
  .motion .co{min-height:62svh}
  .motion .std-c{min-height:36svh;background:var(--porcelain)}
  .motion .std-c.is-open{background:var(--deep)}
  .motion .pcard{width:78vw;min-height:44svh}
  .motion .plat{padding-block:88px 40px}
  .motion .plat-head{margin-bottom:28px}
}

/* ---------- the headline's three phrases ----------
   What the engine is and the two fields it runs each carry their own colour. With
   motion the colour sweeps in once the words have landed. Contrast against porcelain:
   5.5, 4.2 and 4.9 to 1, all display sizes. */
.hero-h .k0{--kc:#1F6B5A}.hero-h .k1{--kc:#A06400}.hero-h .k2{--kc:#AE4731}
.hero-h .k>span{color:var(--kc)}
.motion .hero-h .k{--sweep:100%}
.motion .hero-h .k>span{color:transparent;background:linear-gradient(90deg,var(--kc) 0 50%,var(--fg) 50% 100%) var(--sweep) 0/200% 100% no-repeat;
  -webkit-background-clip:text;background-clip:text}

/* ---------- pinned chapters fit the screen ----------
   A pinned chapter is exactly one screen tall and centres its contents; home.js scales
   the contents down (--z) if a screen is too small to hold them at full size. */
.motion .pin{height:100svh;min-height:0;padding-block:calc(76px + 2vh) 3vh;display:flex;flex-direction:column;justify-content:center}
.motion .pin>*{zoom:var(--z,1);flex-shrink:0}
.motion .pin.ed{padding:0;display:block}
.motion .routes-in,.motion .caps-in,.motion .eng-in{min-height:0}
.motion .plat-head{margin-bottom:clamp(18px,4vh,48px)}
.motion .plat-h{font-size:min(var(--t-h2),7.2vh)}
.motion .pcard{min-height:clamp(240px,42vh,470px)}
.motion .plat-foot{margin-top:clamp(14px,3vh,40px)}
.motion .mem-h{font-size:min(var(--t-d),10.5vh)}
.motion .mem-in{gap:clamp(18px,4vh,48px) 80px}
.motion .mem-body .scrub{font-size:min(clamp(1.5rem,1rem + 1.4vw,2.25rem),3.8vh)}
.motion .mem-fig{aspect-ratio:auto;height:min(56vh,560px)}
.motion .mkt-h{font-size:min(var(--t-h2),7vh)}
.motion .mkt-map{height:clamp(200px,34vh,440px);margin-top:clamp(20px,4vh,64px)}
.motion .mkt-act{margin-top:clamp(14px,3vh,56px)}
.motion .routes-h{font-size:min(var(--t-h2),8vh)}
.motion .eng-r{font-size:min(clamp(2.25rem,1rem + 3vw,4.25rem),7vh);padding-block:min(22px,2.4vh)}

/* ---------- routes: each carries its own colour ---------- */
.motion .route[data-i="0"].is-on{border-color:#F2B632}
.motion .route[data-i="1"].is-on{border-color:#A8E0D0}
.motion .route[data-i="2"].is-on{border-color:#F6B8A4}
.motion .route.is-all{transform:none}

/* ---------- capabilities: six rows across the full width, a band under each ---------- */
.caps-in{grid-template-columns:1fr;gap:clamp(20px,4vh,48px)}
.caps-say{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);align-items:end;gap:14px 64px;justify-items:start}
.caps-say .caps-h{grid-row:1/span 2}
.caps-l{border-top:0}
.cap{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr) minmax(0,1.35fr);align-items:center;border-bottom:0;padding:10px 0}
.cap-t{text-align:left;max-width:none}
.cap-d{grid-column:auto;max-height:none;opacity:0;transform:translateX(-12px);transition:opacity .5s,transform .7s var(--ease)}
.cap.is-on .cap-d{max-height:none;opacity:1;transform:none}
.motion .caps-l{display:grid;grid-template-rows:repeat(6,minmax(0,1fr));height:min(54vh,560px)}
.motion .caps-l li{display:grid}
.motion .cap-n{font-size:min(clamp(1.75rem,1.1rem + 1.8vw,2.75rem),5vh)}
.motion .caps-h{font-size:min(var(--t-h2),7vh)}

/* ---------- the close, beside the mark ---------- */
@media (min-width:1000px){
  .end-in>*{max-width:min(46rem,54vw)}
  .end-h{font-size:clamp(3rem,1.2rem + 5vw,6.75rem);max-width:7.5em}
}

@media (max-width:999px){
  .caps-say{grid-template-columns:1fr}
  .caps-say .caps-h{grid-row:auto}
  .cap{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:4px 14px}
  .cap-t,.cap-d{grid-column:2;grid-row:1;font-size:.875rem;line-height:1.35}
  .motion .cap-t{display:block;transition:opacity .4s}
  .motion .cap.is-on .cap-t{opacity:0}
  .motion .caps-l{height:50svh}
  .motion .cap-n{font-size:1.5rem}
  .motion .pin{padding-block:calc(66px + 2vh) 3vh}
  .motion .mem-fig{height:28svh}
}

/* the hero is a pinned chapter too: one screen tall, its words at the foot of it */
.motion .pin.hero{padding:0;justify-content:flex-end;overflow:hidden}
.motion .pin.hero>.span,.motion .pin.hero>.span-note{zoom:1}
@media (max-width:999px){
  .motion .eng-in{padding-top:18svh;gap:14px}
  .motion .eng-r{font-size:1.75rem;padding-block:8px;gap:2px}
  .motion .eng-r p{font-size:.9375rem;line-height:1.4}
  .motion .span.is-grid{top:38svh}
  .motion .span.is-grid dd{font-size:1.875rem}
  .motion .span-note{font-size:.75rem;padding-bottom:14px}
  .motion .caps-l{height:46svh}
  .motion .caps-p{font-size:1rem}
}
@media (max-width:999px){
  /* on a phone the lit row takes the room its description needs, and the others give it up */
  .motion .caps-l{display:flex;flex-direction:column}
  .motion .caps-l li{flex:1 1 0;min-height:0;transition:flex-grow .6s var(--ease)}
  .motion .caps-l li:has(.is-on){flex-grow:2.6}
  .motion .cap{height:100%;align-items:center}
  .motion .cap-d{font-size:.8125rem}
}

/* ---------- the headline reads over the threads ----------
   The field behind it stays exactly as it is. The words carry their own ground: a soft
   halo in the page colour, cut close around every letter, so a thread passing behind a
   stroke disappears there instead of crossing it. A little more weight helps the thin
   serif hold its shape. */
.hero-h{font-weight:430;text-shadow:0 0 1px var(--bg),0 0 3px var(--bg),0 0 8px var(--bg),0 0 18px var(--bg),0 0 34px var(--bg)}
.hero-lede,.hero-eye{text-shadow:0 0 2px var(--bg),0 0 8px var(--bg),0 0 18px var(--bg)}
.hero-lede{color:var(--fg)}
/* while a phrase's colour is sweeping in it is painted through its own letters, which a
   shadow would cover; once the sweep has landed it becomes ordinary coloured text */
.motion .hero-h .k:not(.is-set)>span{text-shadow:none}
.motion .hero-h .k.is-set>span{background:none;color:var(--kc)}

/* ---------- capabilities read over their bands ---------- */
.caps .cap-n,.caps .cap-t,.caps .cap-d,.caps-h,.caps-p{text-shadow:0 0 2px var(--bg),0 0 8px var(--bg),0 0 16px var(--bg)}
.caps .cap-t,.caps .cap-d{color:var(--fg);font-weight:500}
.motion .caps-l.is-live .cap{opacity:.62}
.motion .caps-l.is-live .cap.is-on{opacity:1}
@media (max-width:999px){
  .motion .mem-fig{height:40svh}
}

/* =====================================================================
   Inner pages. The same grounds, type and field as the homepage; the
   chapters below are the ones every standard page is built from.
   ===================================================================== */
.bar-links a[aria-current]::before{opacity:.1;transform:none}

/* ---------- hero, and the photograph it opens onto ---------- */
.p-h1{font-size:clamp(2.75rem,1.1rem + 5.4vw,6.5rem);line-height:1;max-width:14em}
:lang(ms) .p-h1{font-size:clamp(2.5rem,1rem + 4.8vw,5.75rem)}
.p-hero .hero-foot{grid-template-columns:minmax(0,1fr) auto}
.p-photo{position:relative;height:62vh;margin:40px var(--gut) 0;border-radius:28px;overflow:hidden}
.p-photo picture,.p-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.p-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,42,37,0) 55%,rgba(15,42,37,.7))}
.p-photo-cap{position:absolute;left:0;right:0;bottom:0;z-index:1;color:#F2F5F0;font-size:.8125rem;padding-block:20px;opacity:.85}
.motion .p-hero .p-photo{position:absolute;inset:0;margin:0;height:auto;border-radius:0;z-index:2;
  clip-path:inset(44% 38% 44% 38% round 32px);visibility:hidden}

/* ---------- what the service includes: modules assemble ---------- */
.p-ev-in{display:grid;gap:clamp(20px,4vh,48px)}
.p-ev-say{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:16px 64px;align-items:end}
.p-ev-h{font-size:min(var(--t-h2),7.4vh)}
.p-ev-lead{font-size:var(--t-l);color:var(--fg2);text-shadow:0 0 2px var(--bg),0 0 10px var(--bg)}
.p-mods{display:flex;flex-wrap:wrap;gap:12px 14px}
.p-mod{padding:clamp(12px,1.8vh,20px) clamp(18px,2vw,30px);border-radius:999px;background:var(--fg);color:var(--bg);
  font-family:var(--serif);font-size:clamp(1.25rem,.9rem + 1.3vw,2.25rem);line-height:1.1;white-space:nowrap;will-change:transform}
.p-mod:nth-child(3n+2){background:transparent;color:var(--fg);box-shadow:inset 0 0 0 1.5px var(--fg)}
.p-mod:nth-child(4n+3){background:var(--saffron);color:var(--deep)}
.p-ev-foot{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:16px 40px}
.p-ev-note{color:var(--fg2);max-width:46em;text-shadow:0 0 2px var(--bg),0 0 10px var(--bg)}

/* ---------- plain-English guide: one statement at a time ---------- */
.p-story-in{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:32px 80px;align-items:center}
.p-story-h{font-size:min(var(--t-h2),7vh)}
.p-story-l{display:grid;gap:40px}
.p-st-k{font-family:var(--sans);font-size:1rem;font-weight:600;letter-spacing:0;margin-bottom:14px}
.p-st-p{font-family:var(--serif);font-size:min(clamp(1.75rem,1rem + 2.4vw,3.5rem),6.4vh);line-height:1.15;max-width:22em;
  text-shadow:0 0 2px var(--bg),0 0 10px var(--bg),0 0 22px var(--bg)}
.motion .p-story-l{position:relative;gap:0;padding-left:34px}
.motion .p-st{grid-area:1/1;opacity:0;transform:translateY(40px);transition:opacity .6s,transform .9s var(--ease);pointer-events:none}
.motion .p-st.is-on{opacity:1;transform:none;pointer-events:auto}
.motion .p-st.is-past{transform:translateY(-40px)}
.p-ticks{position:absolute;left:0;top:0;bottom:0;width:2px;display:grid;gap:8px}
.p-ticks i{display:block;background:var(--line);border-radius:2px;transition:background-color .5s}
.p-ticks i.is-on{background:var(--fg)}

/* ---------- inside the operating layer: a line through the stages ---------- */
.p-sys-in{display:grid;gap:clamp(24px,5vh,56px)}
.p-sys-say{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:16px 64px;align-items:end}
.p-sys-h{font-size:min(var(--t-h2),7.4vh)}
.p-sys-intro{color:var(--fg2)}
.p-line{position:relative;height:2px;background:var(--line);border-radius:2px}
.p-line-fill{position:absolute;inset:0;transform-origin:left;transform:scaleX(var(--f,0));background:var(--saffron);border-radius:2px}
.p-line-dot{position:absolute;top:50%;left:calc(var(--f,0)*100%);width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;
  background:var(--saffron);box-shadow:0 0 0 6px color-mix(in srgb,var(--saffron) 25%,transparent)}
.p-stages{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:32px;margin-top:-14px}
.p-stage-b{display:flex;align-items:center;gap:12px;padding:0;border:0;background:none;color:inherit;cursor:pointer;
  font:inherit;font-family:var(--serif);font-size:min(clamp(1.75rem,1.1rem + 1.8vw,2.75rem),5.6vh);line-height:1.1;text-align:left}
.p-stage-b i{flex:0 0 12px;height:12px;border-radius:50%;box-shadow:inset 0 0 0 2px currentColor;transition:background-color .4s}
.p-stage-d{margin-top:16px;display:grid;gap:12px;color:var(--fg2)}
.p-stage-t{font-family:var(--sans);font-size:1rem;font-weight:600;color:var(--fg)}
.p-chips{display:flex;flex-wrap:wrap;gap:8px}
.p-chips li{padding:6px 12px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line);font-size:.875rem;color:var(--fg)}
.motion .p-stage{opacity:.4;transition:opacity .5s}
.motion .p-stage.is-on,.motion .p-stage.is-done{opacity:1}
.motion .p-stage-d{opacity:0;transform:translateY(16px);transition:opacity .5s,transform .7s var(--ease)}
.motion .p-stage.is-on .p-stage-d,.motion .p-stage.is-done .p-stage-d{opacity:1;transform:none}
.p-stage.is-on .p-stage-b i{background:var(--saffron);box-shadow:none}
.p-stage.is-on .p-stage-b{color:var(--saffron)}

/* ---------- choose the route: three routes dealt as cards ---------- */
.p-del-head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:24px 64px;align-items:end;margin-bottom:48px}
.p-del-h{font-size:var(--t-h2)}
.p-del-lead{color:var(--fg2)}
.p-routes{display:flex;gap:16px;min-height:clamp(360px,52vh,520px)}
.p-route{flex:1 1 0;display:flex;flex-direction:column;justify-content:flex-end;gap:14px;padding:clamp(24px,2.6vw,40px);border-radius:28px;
  color:var(--deep);transition:flex-grow .8s var(--ease);min-width:0}
.p-route.r0{background:var(--saffron)}.p-route.r1{background:#CFE3DB}.p-route.r2{background:var(--blush)}.p-route.r3{background:var(--porcelain)}
.p-route h3{font-family:var(--serif);font-weight:380;font-size:clamp(2rem,1.2rem + 2.2vw,3.5rem);line-height:1}
.p-route p{max-width:26em}
.p-route-go{font-weight:600;text-decoration:none;display:inline-flex;align-items:center;gap:10px}
.p-route-go::after{content:"";width:28px;height:1.5px;background:currentColor;transition:width .5s var(--ease)}
.p-route-go:hover::after{width:56px}
.p-route.is-open{flex-grow:1.8}

/* ---------- what comes next ---------- */
.p-next-k{font-weight:600;color:var(--fg2);margin-bottom:12px}
.p-next-go{display:inline-grid;gap:8px;text-decoration:none;transform:translate(var(--mx,0),var(--my,0));transition:transform .6s var(--ease)}
.p-next-n{font-weight:600;color:var(--saffron)}
.p-next-t{font-family:var(--serif);font-weight:380;font-size:clamp(2.5rem,1rem + 5.6vw,7rem);line-height:1;letter-spacing:-.02em;max-width:14em;
  background:linear-gradient(currentColor,currentColor) left 100%/0 2px no-repeat;padding-bottom:.08em;transition:background-size .7s var(--ease)}
.p-next-go:hover .p-next-t{background-size:100% 2px}
.p-fam{display:flex;flex-wrap:wrap;gap:8px 10px;margin-top:48px}
.p-fam a{display:inline-block;padding:8px 14px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line);text-decoration:none;font-size:.9375rem}
.p-fam a[aria-current]{background:var(--fg);color:var(--bg)}
.p-fam a:hover{box-shadow:inset 0 0 0 1px var(--fg)}

@media (max-width:999px){
  .p-ev-say,.p-story-in,.p-sys-say,.p-del-head{grid-template-columns:1fr}
  .p-stages{grid-template-columns:1fr;gap:18px;margin-top:0}
  .p-line{display:none}
  .motion .p-stages{position:relative;padding-left:26px}
  .motion .p-stages::before{content:"";position:absolute;left:5px;top:6px;bottom:6px;width:2px;background:var(--line)}
  .motion .p-stages::after{content:"";position:absolute;left:5px;top:6px;width:2px;height:calc(var(--f,0)*(100% - 12px));background:var(--saffron)}
  .p-stage-b i{margin-left:-26px;background:var(--bg)}
  .p-stage-b{font-size:1.625rem}
  .motion .p-stage-d{margin-top:8px}
  .p-stage-d p{font-size:.9375rem}
  .p-routes{display:block;min-height:0}
  .p-route{min-height:44svh;margin-bottom:16px}
  .motion .p-route{position:sticky;top:calc(84px + var(--i,0)*18px)}
  .p-mod{font-size:1.25rem;white-space:normal}
  .p-st-p{font-size:1.625rem}
  .p-hero .hero-foot{grid-template-columns:1fr}
}
/* every chapter heading is set in the display face, whatever chapter it belongs to */
main h2{font-family:var(--serif);font-weight:380;font-optical-sizing:auto;letter-spacing:-.018em;text-wrap:balance}
:lang(zh-CN) main h2{letter-spacing:0;font-weight:600}

/* ---------- small shared pieces ---------- */
.p-kicker{font-weight:600;font-size:.9375rem;margin-bottom:12px}
.p-note{font-size:.8125rem;color:var(--fg2);max-width:60em}
.tick{flex:0 0 22px;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:30;stroke-dashoffset:0}
.p-mods-ticked .p-mod{display:inline-flex;align-items:center;gap:10px}

/* ---------- worked examples ---------- */
.p-ex-h{font-size:var(--t-h2);margin-bottom:40px;max-width:16em}
.p-ex-l{display:flex;flex-wrap:wrap;gap:14px}
.p-ex-l li{font-family:var(--serif);font-size:clamp(1.5rem,1rem + 1.8vw,2.75rem);padding:18px 30px;border-radius:999px;box-shadow:inset 0 0 0 1.5px var(--fg)}

/* ---------- FULGEO: three visibility jobs over the capture ---------- */
.p-proof-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:32px 64px;align-items:center}
.p-proof-h{font-size:min(var(--t-h2),6.6vh);margin-bottom:14px}
.p-proof-intro{color:var(--fg2);margin-bottom:clamp(16px,3vh,32px)}
.p-jobs{display:grid;gap:4px;border-top:1px solid var(--line)}
.p-job{border-bottom:1px solid var(--line);padding:clamp(10px,1.6vh,18px) 0}
.p-job-b{display:flex;align-items:baseline;gap:18px;width:100%;padding:0;border:0;background:none;color:inherit;font:inherit;cursor:pointer;text-align:left}
.p-job-t{font-family:var(--serif);font-size:min(clamp(2rem,1.2rem + 2vw,3.25rem),6vh);line-height:1;min-width:2.6em;transition:color .5s}
.p-job-h{font-weight:600;font-size:1.0625rem}
.p-job-p{color:var(--fg2);max-height:0;overflow:hidden;opacity:0;transition:max-height .6s var(--ease),opacity .5s,margin .6s var(--ease)}
.p-job.is-on .p-job-t{color:var(--saffron)}
.p-job.is-on .p-job-p{max-height:5em;opacity:1;margin-top:8px}
html:not(.motion) .p-job-p{max-height:none;opacity:1}
.p-shot{border-radius:22px;overflow:hidden;background:#fff;box-shadow:0 40px 80px -40px rgba(16,35,31,.55);color:var(--deep)}
.p-shot-bar{display:flex;gap:7px;padding:12px 16px;background:#E7ECE6}
.p-shot-bar i{width:11px;height:11px;border-radius:50%;background:#C6D0CA}
.p-shot-v{position:relative;height:min(46vh,480px);overflow:hidden}
.p-shot-v picture,.p-shot-v img{width:100%;height:100%;object-fit:cover;object-position:50% 0%;transition:object-position 1.2s var(--ease),transform 1.2s var(--ease)}
.p-scan{position:absolute;left:0;right:0;height:26%;top:-26%;pointer-events:none;
  background:linear-gradient(180deg,rgba(242,182,50,0),rgba(242,182,50,.22) 70%,rgba(242,182,50,.7) 100%)}
.motion .p-scan{animation:p-scan 3.6s var(--ease) infinite}
@keyframes p-scan{0%{top:-26%}70%,100%{top:100%}}
.p-shot figcaption{padding:16px 20px;display:grid;gap:8px;font-size:.9375rem;background:#fff}
.p-shot figcaption .p-note{color:#4B5A55}

/* ---------- FULGEO: a statement beside its photograph ---------- */
.p-say-in{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:40px 72px;align-items:center}
.p-say-h{font-size:var(--t-h2);margin-bottom:24px}
.p-say-p{font-family:var(--serif);font-size:clamp(1.5rem,1rem + 1.5vw,2.5rem);line-height:1.25;max-width:22em}
.p-say-fig{border-radius:28px;overflow:hidden;aspect-ratio:4/5}
.p-say-fig picture,.p-say-fig img{width:100%;height:100%;object-fit:cover}

/* ---------- FULGEO: plans ---------- */
.p-plans-h{font-size:var(--t-h2);margin-bottom:40px}
.p-plan-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px}
.p-plan{padding:clamp(28px,3vw,44px);border-radius:28px;display:grid;align-content:start;gap:16px;min-height:340px}
.p-plan.p0{background:var(--saffron);color:var(--deep)}
.p-plan.p1{background:var(--deep);color:#F2F5F0}
.p-plan.p2{background:#CFE3DB;color:var(--deep)}
.p-plan h3{font-family:var(--serif);font-weight:380;font-size:clamp(2rem,1.2rem + 2vw,3.25rem);line-height:1}
.p-plan ul{display:grid;gap:10px;margin-top:8px}
.p-plan li{display:flex;gap:12px;align-items:center}
.p-plans-note{margin-top:28px}

/* ---------- FULGEO: the agent's decision ---------- */
.p-agent-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:32px 64px;align-items:center}
.p-agent-h{font-size:min(var(--t-h2),6.4vh);margin-bottom:14px}
.p-agent-lede{color:var(--fg2);margin-bottom:clamp(14px,2.6vh,28px);font-size:.9375rem}
.p-ladder{display:grid;gap:clamp(6px,1.2vh,12px)}
.p-ladder li{display:flex;gap:14px;align-items:center;font-family:var(--serif);font-size:min(clamp(1.25rem,.9rem + 1vw,1.875rem),4vh);line-height:1.2;
  padding-left:calc(var(--i)*clamp(10px,2vw,34px));transition:opacity .5s,color .5s}
.p-ladder i{flex:0 0 10px;height:10px;border-radius:50%;box-shadow:inset 0 0 0 1.5px currentColor;transition:background-color .4s}
.p-ladder li.is-on i{background:var(--saffron);box-shadow:none}
.p-ladder li.is-on:last-child{color:var(--saffron)}
.p-agent-r{display:grid;gap:clamp(12px,2.4vh,24px);padding:clamp(18px,2.4vw,32px);border-radius:26px;box-shadow:inset 0 0 0 1px var(--line);
  background:color-mix(in srgb,var(--bg) 70%,transparent)}
.p-req-k{font-size:.8125rem;font-weight:600;color:var(--fg2);margin-bottom:8px}
.p-req-q{margin:0;font-family:var(--serif);font-size:min(clamp(1.25rem,.9rem + 1vw,1.875rem),4vh);line-height:1.3}
.p-req-q p::before{content:"\201C"}.p-req-q p::after{content:"\201D"}
.p-req-q .caret{display:inline-block;width:2px;height:1em;background:var(--saffron);vertical-align:-.12em;margin-left:2px;animation:p-caret 1s steps(2) infinite}
@keyframes p-caret{50%{opacity:0}}
.p-kinds{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.p-kinds li{font-size:.8125rem;padding:5px 12px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line)}
.p-kinds li:first-child{background:var(--fg);color:var(--bg);box-shadow:none}
.p-flow{position:relative;display:grid;grid-template-columns:repeat(var(--n,5),minmax(0,1fr));gap:6px;padding-top:24px}
.p-flow::before{content:"";position:absolute;left:0;right:0;top:6px;height:2px;background:var(--line)}
.p-flow li{position:relative;font-size:.875rem;font-weight:600;transition:opacity .4s,color .4s}
.p-flow li i{position:absolute;top:-24px;left:0;width:14px;height:14px;border-radius:50%;background:var(--bg);box-shadow:inset 0 0 0 2px var(--fg2)}
.p-flow li.is-on{color:var(--saffron)}
.p-flow li.is-on i{background:var(--saffron);box-shadow:none}
.p-flow-dot{position:absolute;top:0;left:calc(var(--f,0)*(100% - 14px));width:14px;height:14px;border-radius:50%;background:var(--saffron);
  box-shadow:0 0 0 6px color-mix(in srgb,var(--saffron) 30%,transparent)}
.p-checks ul{display:grid;gap:8px}
.p-checks li{display:flex;gap:10px;align-items:center;font-size:.9375rem;transition:opacity .4s}
.p-checks li .tick{color:var(--saffron)}
.motion .p-agent .p-ladder li,.motion .p-agent .p-flow li,.motion .p-agent .p-checks li{opacity:.3}
.motion .p-agent .p-ladder li.is-on,.motion .p-agent .p-flow li.is-on,.motion .p-agent .p-checks li.is-on{opacity:1}
.motion .p-checks li .tick{stroke-dashoffset:30;transition:stroke-dashoffset .6s var(--ease)}
.motion .p-checks li.is-on .tick{stroke-dashoffset:0}
.p-verdict{font-family:var(--serif);font-size:min(clamp(1.125rem,.9rem + .7vw,1.5rem),3.4vh);line-height:1.35;transition:opacity .6s,transform .8s var(--ease)}
.motion .p-verdict{opacity:0;transform:translateY(12px)}
.motion .p-verdict.is-on{opacity:1;transform:none}
.p-agent-more{padding-top:0}
.p-ready{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-bottom:40px}
.p-ready h3{font-family:var(--serif);font-weight:380;font-size:var(--t-h3);margin-bottom:10px}
.p-ready p{color:var(--fg2)}
.p-agent-act{display:flex;flex-wrap:wrap;gap:28px;align-items:center}
.p-refs{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:28px;font-size:.9375rem}
.p-refs a{text-decoration:underline;text-underline-offset:4px}

/* ---------- FULGEO: the two checks ---------- */
.p-check-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px 72px;align-items:center}
.p-check-h{font-size:var(--t-h2);margin-bottom:18px}
.p-check-say p{max-width:34em;margin-top:10px}
.p-check-f{display:grid;gap:14px;justify-items:start}
.p-check-f label{font-weight:600}
.p-field{position:relative;width:100%;border-radius:999px;overflow:hidden;background:#fff;box-shadow:0 20px 50px -30px rgba(16,35,31,.6),inset 0 0 0 1.5px var(--deep)}
.p-field input{width:100%;border:0;background:transparent;padding:22px 28px;font:inherit;font-size:clamp(1.125rem,1rem + .6vw,1.5rem);color:var(--deep);outline:none}
.p-field:focus-within{box-shadow:0 20px 50px -30px rgba(16,35,31,.6),inset 0 0 0 2.5px var(--deep)}
.p-field-scan{position:absolute;top:0;bottom:0;width:30%;left:-30%;pointer-events:none;
  background:linear-gradient(90deg,rgba(242,182,50,0),rgba(242,182,50,.35),rgba(242,182,50,0))}
.motion .p-field:focus-within .p-field-scan{animation:p-sweep 1.8s var(--ease) infinite}
@keyframes p-sweep{to{left:100%}}

/* ---------- a way out ---------- */
.p-ext-h{font-size:var(--t-h2);margin-bottom:20px;max-width:16em}
.p-ext-p{max-width:40em;color:var(--fg2);margin-bottom:12px}
.p-ext-l{margin-top:32px;border-top:1px solid var(--line)}
.p-ext-l a{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:26px 0;border-bottom:1px solid var(--line);text-decoration:none;
  font-family:var(--serif);font-size:clamp(1.5rem,1rem + 2vw,3rem);line-height:1.1}
.p-ext-l a i{flex:0 0 48px;height:48px;border-radius:50%;box-shadow:inset 0 0 0 1.5px currentColor;position:relative;transition:transform .6s var(--ease),background-color .4s}
.p-ext-l a i::before{content:"";position:absolute;left:15px;top:15px;width:14px;height:14px;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor}
.p-ext-l a i::after{content:"";position:absolute;left:14px;top:23px;width:20px;height:1.5px;background:currentColor;transform:rotate(-45deg);transform-origin:left}
.p-ext-l a:hover i{transform:rotate(45deg) scale(1.08)}

@media (max-width:999px){
  .p-proof-in,.p-say-in,.p-agent-in,.p-check-in,.p-ready{grid-template-columns:1fr}
  .p-shot-v{height:28svh}
  .p-job-t{font-size:1.625rem}
  .motion .p-proof .p-proof-intro{display:none}
  .p-say-fig{aspect-ratio:4/3}
  .p-flow{grid-template-columns:repeat(var(--n,5),minmax(0,1fr));font-size:.75rem}
  .p-flow li{font-size:.75rem}
  /* on a phone the ladder and the agent share the screen in turn */
  .motion .p-agent-in{display:grid;grid-template-columns:1fr}
  .motion .p-agent.has-req .p-agent-l,.motion .p-agent.has-req .p-agent-r{grid-area:1/1;transition:opacity .6s,transform .8s var(--ease)}
  .motion .p-agent.has-req .p-agent-r{opacity:0;transform:translateY(30px);pointer-events:none}
  .motion .p-agent.has-req.is-req .p-agent-l{opacity:0;transform:translateY(-30px);pointer-events:none}
  .motion .p-agent.has-req.is-req .p-agent-r{opacity:1;transform:none;pointer-events:auto}
}

/* ---------- company pages ---------- */
.p-ov-in{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:32px 80px;align-items:start}
.p-ov-h{font-size:var(--t-h2);position:sticky;top:120px}
.p-ov-body{display:grid;gap:28px}
.p-ov-lead{font-family:var(--serif);font-size:clamp(1.625rem,1rem + 1.8vw,2.75rem);line-height:1.25;max-width:24em}
.p-ov-lead .wd{overflow:visible}
.p-ov-p{font-size:var(--t-l);color:var(--fg2);max-width:38em}
.p-ov-act{display:flex;flex-wrap:wrap;gap:28px;align-items:center}
.p-model-h{font-size:min(var(--t-h2),7vh);max-width:14em}
.p-model-lead{color:var(--fg2);max-width:40em}
.p-caps .cap-t{display:none}
.p-caps .cap{grid-template-columns:minmax(0,1fr) minmax(0,2.4fr)}
.p-cos .co{min-height:clamp(320px,48vh,480px)}
.p-cos .co-n{margin-top:0}
.p-cos .co p{margin-top:auto}

.p-lead-in{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:32px 64px;align-items:center}
.p-lead-h{font-size:min(var(--t-h2),6.6vh)}
.p-lead-lede{color:var(--fg2);margin-top:16px;max-width:30em}
.p-people{display:grid;gap:48px}
.p-person{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:32px;align-items:center}
.p-portrait{display:block;border-radius:26px;overflow:hidden;aspect-ratio:4/5;height:auto;max-height:68vh}
.p-portrait img{width:100%;height:100%;object-fit:cover;object-position:var(--fx,50%) 0%}
.p-role{font-weight:600;font-size:.9375rem;color:var(--fg2);margin-bottom:10px}
.p-person-n{font-family:var(--serif);font-weight:380;font-size:min(clamp(2rem,1.2rem + 2.2vw,3.5rem),6vh);line-height:1.05;margin-bottom:16px}
.p-bio{font-size:min(1.0625rem,2.3vh);line-height:1.6;max-width:34em}
.motion .p-people{display:grid}
.motion .p-person{grid-area:1/1}
.motion .p-person .p-portrait{clip-path:inset(100% 0 0 0 round 26px);transition:clip-path 1s var(--ease)}
.motion .p-person .p-person-say>*{opacity:0;transform:translateY(24px);transition:opacity .5s,transform .8s var(--ease)}
.motion .p-person.is-on .p-portrait,.motion .p-person.is-past .p-portrait{clip-path:inset(0 0 0 0 round 26px)}
.motion .p-person.is-on{z-index:2}
.motion .p-person.is-on .p-person-say>*{opacity:1;transform:none}
.motion .p-person.is-on .p-person-say>:nth-child(2){transition-delay:.08s}
.motion .p-person.is-on .p-person-say>:nth-child(3){transition-delay:.16s}
.p-names{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.p-names li{font-size:.875rem;padding:6px 12px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line);transition:background-color .4s,color .4s}
.p-names li.is-on{background:var(--fg);color:var(--bg)}

.p-gov-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px 80px;align-items:center}
.p-gov-h{font-size:var(--t-h2);margin-bottom:24px}
.p-gov-p{margin-bottom:16px;max-width:36em}
.p-gov-q{margin:0;font-family:var(--serif);font-size:clamp(2rem,1.2rem + 2.6vw,4rem);line-height:1.1;letter-spacing:-.015em}
.p-gov-q .wd{overflow:visible}
.p-gov-q p::before{content:"\201C"}.p-gov-q p::after{content:"\201D"}

.p-rec-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:40px 80px;align-items:start}
.p-rec-h{font-size:var(--t-h2);margin-bottom:20px}
.p-ledger{border-top:1px solid var(--line)}
.p-ledger div{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:16px 32px;padding:20px 0;border-bottom:1px solid var(--line)}
.p-ledger dt{color:var(--fg2);font-weight:500}
.p-ledger dd{font-family:var(--serif);font-size:clamp(1.25rem,1rem + .8vw,1.75rem);font-variant-numeric:tabular-nums;line-height:1.25}

/* ---------- platforms hub ---------- */
.p-atlas-cats{margin-bottom:40px}
.p-atlas-l dd{font-family:var(--sans);font-size:1rem;color:var(--fg2)}
.p-atlas-l dt{font-family:var(--serif);font-weight:380;font-size:clamp(1.25rem,1rem + 1vw,2rem);color:var(--fg);line-height:1.15}
.p-atlas-h{font-family:var(--serif);font-weight:380;font-size:var(--t-h3);margin:56px 0 20px}
.p-offers li{font-size:clamp(1.125rem,.9rem + .8vw,1.625rem);padding:12px 22px}
.p-atlas-note{margin-top:32px}
.p-atlas-act{margin-top:32px}

/* ---------- the discovery form ---------- */
.p-form-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:40px 80px;align-items:start}
.p-form-say{position:sticky;top:120px;display:grid;gap:14px}
.p-form-h{font-size:var(--t-h2)}
.p-form-sub{font-family:var(--serif);font-size:var(--t-h3)}
.p-form-p{color:var(--fg2)}
.p-f{display:grid;grid-template-columns:1fr 1fr;gap:10px 28px}
.p-f-row{position:relative;display:grid;gap:6px;margin:0;padding:14px 0 0;border:0}
.p-f-wide,.p-f-pick,.p-f-go,.p-f-sent{grid-column:1/-1}
.p-f-row label,.p-f-row legend{font-weight:600;font-size:.9375rem;padding:0}
.p-f-row input,.p-f-row textarea{width:100%;border:0;border-bottom:1.5px solid var(--line);background:transparent;padding:10px 0 12px;
  font:inherit;font-family:var(--serif);font-size:clamp(1.25rem,1rem + .7vw,1.75rem);color:var(--fg);outline:none;border-radius:0;resize:vertical}
.p-f-row i{position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--saffron);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease)}
.p-f-row:focus-within i{transform:none}
.p-f-row input:user-invalid,.p-f-row textarea:user-invalid{border-bottom-color:#AE4731}
.p-picks{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.p-pick{position:relative;cursor:pointer}
.p-pick input{position:absolute;opacity:0;inset:0;cursor:pointer}
.p-pick span{display:inline-block;padding:12px 20px;border-radius:999px;box-shadow:inset 0 0 0 1.5px var(--line);font-family:var(--serif);font-size:1.25rem;
  transition:background-color .35s,color .35s,box-shadow .35s,transform .5s var(--ease)}
.p-pick:hover span{box-shadow:inset 0 0 0 1.5px var(--fg)}
.p-pick input:checked+span{background:var(--fg);color:var(--bg);box-shadow:none;transform:translateY(-2px)}
.p-pick input:focus-visible+span{outline:2px solid var(--fg);outline-offset:3px}
.p-f-go{display:flex;flex-wrap:wrap;gap:28px;align-items:center;justify-content:flex-end;margin-top:20px}
.p-draft{border:0;background:none;color:inherit;font:inherit;font-weight:600;cursor:pointer;padding:4px 0}
.p-f-sent{font-weight:600;min-height:1.5em}

@media (max-width:999px){
  .p-ov-in,.p-lead-in,.p-gov-in,.p-rec-in,.p-form-in{grid-template-columns:1fr}
  .p-ov-h,.p-form-say{position:static}
  .p-person{grid-template-columns:1fr;gap:16px}
  .p-portrait{aspect-ratio:auto;height:34svh;max-height:none}
  .motion .p-lead-lede{display:none}
  .p-bio{font-size:.9375rem;line-height:1.5}
  .p-person-n{font-size:1.875rem;margin-bottom:8px}
  .p-f{grid-template-columns:1fr}
  .p-f-go{justify-content:flex-start}
  .p-ledger div{grid-template-columns:1fr;gap:4px}
}
/* a close that is a full sentence rather than a question is set a size smaller */
.end-h.end-h-long{font-size:clamp(2.25rem,1rem + 3.6vw,4.75rem);max-width:15em;line-height:1.05}
@media (min-width:1000px){ .end-in>.end-h-long{max-width:min(15em,58vw)} }
.p-fam-big a{font-family:var(--serif);font-size:clamp(1.25rem,1rem + 1vw,2rem);padding:14px 24px}

/* =====================================================================
   Critique pass. Readability, contrast, and the parts that jumped.
   ===================================================================== */

/* ---------- every line of text reads over the threads ----------
   The homepage headline's halo, carried to all text that sits straight on a ground:
   a soft glow in the ground's own colour, cut close around each letter, so a thread
   passing behind a stroke vanishes there instead of crossing it. Text on its own
   panel (cards, buttons, fields, photographs) has its own ground and keeps none. */
main .ch :is(h1,h2,h3,p,li,dt,dd,blockquote,summary,legend,label,figcaption,.cap-n,.cap-t,.cap-d,.eng-v,.p-job-t,.p-job-h,.p-next-t,.p-next-n),
.foot :is(a,p,span){
  text-shadow:0 0 1px var(--bg),0 0 4px var(--bg),0 0 10px var(--bg),0 0 22px var(--bg)}
main .ch :is(.hero-h,.p-h1,.end-h,.mem-h,.info-h){
  text-shadow:0 0 1px var(--bg),0 0 3px var(--bg),0 0 8px var(--bg),0 0 18px var(--bg),0 0 34px var(--bg)}
:is(.pcard,.p-route,.co,.p-plan,.std-c,.btn,.pill,.p-mod,.p-shot,.ed,.p-pick,.p-field,.p-fam,.hero-chips,.p-photo,.p-ex-l,.p-kinds,.p-chips,.p-say-fig,.mem-fig,.p-portrait,.lang,.sheet,.p-agent-r,.p-names,.chap,.plat-cats,.p-story-v2 .p-st,.p-story-v3 .p-st,.p-sys-v2 .p-stage,.p-log,.p-fan-c,.p-flip) :is(*),
.p-names li,
:is(.pcard,.p-route,.co,.p-plan,.std-c,.btn,.pill,.p-mod,.p-shot,.p-pick,.p-ex-l li,.p-kinds li,.p-chips li,.p-orb-i,.p-fan-c,.p-flip li,.p-log li,.p-venn i,.p-sys-v2 .p-stage,.p-story-v2 .p-st,.p-story-v3 .p-st){text-shadow:none!important}
.motion .hero-h .k:not(.is-set)>span{text-shadow:none!important}

/* ---------- what is not lit is still legible ----------
   A dimmed row reads as "not now", never as "not there": at least 4.5 to 1 on every
   ground, with the emphasis carried by colour and position instead of by fading. */
.motion .route{opacity:.68}
.motion .eng-rows.is-live .eng-r{opacity:.66}
.motion .eng-rows.is-live .eng-r.is-done{opacity:.82}
.motion .caps-l.is-live .cap{opacity:.72}
.motion .p-stage{opacity:.7}
.motion .p-agent .p-ladder li,.motion .p-agent .p-flow li,.motion .p-agent .p-checks li{opacity:.64}
.motion .eng-h.is-live .eng-v{opacity:.66}

/* ---------- the bar has a ground of its own when nothing animates it ---------- */
html:not(.motion) .bar{background:var(--porcelain);color:var(--deep);box-shadow:0 1px 0 rgba(16,35,31,.16);--btn:var(--deep);--btnfg:var(--porcelain)}
html{scroll-padding-top:88px}

/* ---------- Chinese display type ----------
   No Han serif is shipped, and the system fallbacks (SimSun on Windows) are thin and
   faux-bolded, so Chinese display text is set in the sans at a true weight. Lines
   break by the strict rules, and no Latin tracking reaches Han characters. */
:root:lang(zh-CN){--serif:'Newsreader','PingFang SC','Hiragino Sans GB','Noto Sans SC','Microsoft YaHei',sans-serif}
:lang(zh-CN){line-break:strict;word-break:normal}
:lang(zh-CN) :is(.p-next-t,.p-gov-q,.co-n,.hero-h,.end-h,.p-route h3,.p-plan h3,.p-person-n){letter-spacing:0}

/* ---------- a photograph keeps its own orientation ----------
   An upright portrait put in a wide frame is cropped through the face. A portrait
   stays upright at every width and simply gets smaller. */
@media (max-width:999px){
  .p-portrait{aspect-ratio:4/5;height:auto;width:min(58vw,30svh*.8);max-height:none}
  .p-person{grid-template-columns:auto minmax(0,1fr);align-items:end;gap:16px}
  .p-person-say{align-self:end}
  .motion .p-lead .p-names{margin-top:14px}
}
@media (max-width:560px){
  .p-person{grid-template-columns:1fr}
  .p-portrait{width:min(56vw,26svh*.8)}
}

/* ---------- the footer lets the field through ----------
   It used to paint a solid panel over the canvas, which cut the mark in half at its
   top edge. Its ground now arrives the way every chapter's does, and the field steps
   back behind its links. */
html.motion .foot{background:transparent}

/* ---------- route cards: one link each, the route's own name ---------- */
.p-route-a{text-decoration:none;color:inherit}
.p-route-a::after{content:"";position:absolute;inset:0;border-radius:inherit}
.p-route{position:relative}
.p-route-go{width:44px;height:44px;border-radius:50%;box-shadow:inset 0 0 0 1.5px currentColor;position:relative;transition:transform .6s var(--ease),background-color .4s}
.p-route-go::before{content:"";position:absolute;left:13px;top:21px;width:18px;height:1.5px;background:currentColor}
.p-route-go::after{content:"";position:absolute;left:21px;top:16px;width:10px;height:10px;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;transform:rotate(45deg)}
.p-route:hover .p-route-go,.p-route:focus-within .p-route-go{transform:translateX(8px)}
.p-route:focus-within{outline:2px solid var(--deep);outline-offset:4px}

/* ---------- FULGEO tiers ---------- */
.p-price{font-family:var(--serif);font-size:clamp(1.75rem,1.2rem + 1.6vw,2.75rem);line-height:1}
.p-plan-go{margin-top:auto;font-weight:600;text-decoration:none;display:inline-flex;align-items:center;gap:10px}
.p-plan-go::after{content:"";width:28px;height:1.5px;background:currentColor;transition:width .5s var(--ease)}
.p-plan-go:hover::after{width:56px}
.p-tiers .p-plan{min-height:clamp(320px,46vh,460px)}

/* ---------- the service's modules, as an index ---------- */
.p-ev-v1 .p-mods{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 48px;border-top:1px solid var(--line)}
.p-ev-v1 .p-mod{background:none!important;color:var(--fg)!important;box-shadow:none!important;border-radius:0;padding:clamp(12px,2vh,20px) 0;
  border-bottom:1px solid var(--line);white-space:normal;position:relative}
.p-ev-v1 .p-mod::before{content:"";position:absolute;left:0;bottom:-1px;height:2px;width:var(--w,0%);background:var(--saffron);transition:width .8s var(--ease)}
@media (max-width:999px){ .p-ev-v1 .p-mods{grid-template-columns:1fr} }

/* ---------- the plain-English guide, three at once ---------- */
@media (min-width:1000px){
  .p-story-v1 .p-story-in{grid-template-columns:1fr;gap:clamp(24px,5vh,56px)}
  .motion .p-story-v1 .p-story-l{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;padding-left:0}
  .motion .p-story-v1 .p-st{grid-area:auto;opacity:.18;transform:translateY(30px);pointer-events:auto;border-top:2px solid var(--line);padding-top:24px}
  .motion .p-story-v1 .p-st.is-on,.motion .p-story-v1 .p-st.is-past{opacity:1;transform:none;border-top-color:var(--fg)}
  .p-story-v1 .p-st-p{font-size:min(clamp(1.5rem,1rem + 1.4vw,2.5rem),5vh)}
  .p-story-v1 .p-ticks{display:none}
}
/* company information sets the founders as a directory: all four at once */
.p-lead-dir .p-lead-in{grid-template-columns:1fr}
.p-lead-dir .p-people{grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.p-lead-dir .p-person{grid-area:auto!important;grid-template-columns:1fr;align-items:start;gap:16px}
.p-lead-dir .p-portrait{clip-path:none!important;width:100%;max-height:none}
.p-lead-dir .p-person-say>*{opacity:1!important;transform:none!important}
.p-lead-dir .p-person-n{font-size:clamp(1.5rem,1rem + 1vw,2rem)}
.p-lead-dir .p-bio{font-size:.9375rem}
@media (max-width:999px){ .p-lead-dir .p-people{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .p-lead-dir .p-people{grid-template-columns:1fr} .p-lead-dir .p-portrait{width:min(56vw,26svh*.8)} }

/* =====================================================================
   What the service includes, in eight designs (page.js evidence()).
   ===================================================================== */
/* 2: orbit */
.p-orbit{position:relative;height:clamp(260px,44vh,440px)}
.p-orb{position:absolute;inset:0}
.p-orb-i{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);white-space:nowrap;
  font-family:var(--serif);font-size:clamp(1.25rem,.9rem + 1.2vw,2.125rem);padding:12px 22px;border-radius:999px;
  background:var(--bg);box-shadow:inset 0 0 0 1.5px var(--fg);will-change:transform}
.p-orb-i:nth-child(3n+1){background:var(--fg);color:var(--bg);box-shadow:none}
.p-orb-i:nth-child(4n+2){background:var(--saffron);color:var(--deep);box-shadow:none}
html:not(.motion) .p-orb{position:static;display:flex;flex-wrap:wrap;gap:12px}
html:not(.motion) .p-orb-i{position:static;transform:none}
html:not(.motion) .p-orbit{height:auto}

/* 3: a hand of cards */
.p-fan{position:relative;height:clamp(300px,46vh,460px)}
.p-fan-c{position:absolute;left:50%;top:50%;width:clamp(170px,15vw,230px);height:clamp(230px,34vh,320px);margin:calc(clamp(230px,34vh,320px)/-2) 0 0 calc(clamp(170px,15vw,230px)/-2);
  border-radius:22px;padding:20px;display:flex;align-items:flex-end;overflow:hidden;background:var(--tone);color:var(--tonefg);
  box-shadow:0 30px 60px -30px rgba(16,35,31,.5);transform-origin:50% 120%}
.p-fan-c{--tone:var(--spruce);--tonefg:var(--porcelain)}
.p-fan-c.t-sea{--tone:#CFE3DB;--tonefg:var(--deep)}.p-fan-c.t-saffron{--tone:var(--saffron);--tonefg:var(--deep)}.p-fan-c.t-blush{--tone:var(--blush);--tonefg:var(--deep)}
.p-fan-c .glyph{position:absolute;left:0;right:0;top:0;width:100%;height:55%;fill:none;stroke:currentColor;stroke-width:1.2;opacity:.5}
.p-fan-c span{position:relative;font-family:var(--serif);font-size:clamp(1.25rem,1rem + .8vw,1.75rem);line-height:1.1}
html:not(.motion) .p-fan{height:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px}
html:not(.motion) .p-fan-c{position:static;margin:0;width:auto}

/* 4: two lanes */
.p-lanes{display:grid;gap:clamp(8px,2vh,20px);margin-inline:calc(var(--gut)*-1)}
.p-lane{overflow:hidden;white-space:nowrap}
.p-lane-t{display:inline-flex;gap:clamp(24px,3vw,56px);will-change:transform}
.p-lane-t span{font-family:var(--serif);font-size:clamp(2.5rem,1.2rem + 4.6vw,6.5rem);line-height:1.05;color:var(--fg)}
.p-lane-t span.o{color:transparent;-webkit-text-stroke:1.2px var(--fg);text-shadow:none!important}

/* 5: a configuration log */
.p-log{max-width:760px;border-radius:22px;overflow:hidden;background:var(--deep);color:#DDE8E2;box-shadow:0 40px 80px -40px rgba(16,35,31,.6)}
.p-log-bar{display:flex;gap:7px;padding:12px 16px;background:#18322C}
.p-log-bar i{width:11px;height:11px;border-radius:50%;background:#3F6258}
.p-log-l{display:grid;gap:6px;padding:clamp(18px,3vh,32px) clamp(20px,2.6vw,36px);font-family:var(--serif);font-size:clamp(1.25rem,1rem + .9vw,1.875rem)}
.p-log-l li{display:flex;gap:14px;align-items:center;min-height:1.9em;text-shadow:none!important}
.p-log-l li .tick{color:var(--saffron)}
.motion .p-log-l li .tick{stroke-dashoffset:30;transition:stroke-dashoffset .5s var(--ease)}
.motion .p-log-l li.is-done .tick{stroke-dashoffset:0}
.p-log-l .caret{display:inline-block;width:.55em;height:1.1em;background:var(--saffron);vertical-align:-.15em;margin-left:2px;animation:p-caret 1s steps(2) infinite}

/* 6: tiles turn over */
.p-flip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.p-flip li{perspective:900px;height:clamp(96px,15vh,150px)}
.p-flip-in{position:relative;display:block;width:100%;height:100%;transform-style:preserve-3d;will-change:transform}
.p-flip-f,.p-flip-b{position:absolute;inset:0;border-radius:20px;backface-visibility:hidden;-webkit-backface-visibility:hidden;display:flex;align-items:center;padding:0 22px}
.p-flip-f{background:var(--tone,var(--spruce));color:var(--tonefg,var(--porcelain));overflow:hidden}
.p-flip-f.t-sea{--tone:#CFE3DB;--tonefg:var(--deep)}.p-flip-f.t-saffron{--tone:var(--saffron);--tonefg:var(--deep)}.p-flip-f.t-blush{--tone:var(--blush);--tonefg:var(--deep)}
.p-flip-f .glyph{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.2;opacity:.55}
.p-flip-b{transform:rotateY(180deg);background:var(--bg);box-shadow:inset 0 0 0 1.5px var(--fg);font-family:var(--serif);font-size:clamp(1.25rem,1rem + .9vw,2rem);line-height:1.1}
html:not(.motion) .p-flip-in{transform:rotateY(180deg)}
@media (max-width:999px){ .p-flip{grid-template-columns:1fr 1fr} .p-flip li{height:84px} .p-flip-b{font-size:1.125rem;padding:0 14px} }

/* 7: the spotlight */
.p-spot{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:24px 56px;align-items:center}
.p-spot-big{font-family:var(--serif);font-size:clamp(2.75rem,1.4rem + 5vw,7rem);line-height:1;letter-spacing:-.02em;min-height:2.1em;display:flex;align-items:center}
.p-spot-l{display:grid;gap:2px;border-top:1px solid var(--line)}
.p-spot-i{padding:10px 0;border-bottom:1px solid var(--line);font-size:1.0625rem;transition:color .4s,padding .6s var(--ease)}
.p-spot-i.is-on{color:var(--saffron);padding-left:14px;font-weight:600}
html:not(.motion) .p-spot-big{display:none}
@media (max-width:999px){ .p-spot{grid-template-columns:1fr} .p-spot-big{font-size:clamp(2.25rem,10vw,3.5rem);min-height:2.2em} }


/* =====================================================================
   What this means for the business, in eight designs. The stepper is the
   same for all (is-on on the statement being read, is-past behind it);
   each design is how the three statements take the screen.
   ===================================================================== */
.p-story:not(.p-story-v0) .p-ticks{display:none}
/* 2: a conversation, one line answering the last */
.motion .p-story-v2 .p-story-l{display:grid;gap:14px;padding-left:0}
.motion .p-story-v2 .p-st{grid-area:auto;max-width:min(40em,78%);padding:18px 24px;border-radius:26px 26px 26px 6px;background:var(--fg);color:var(--bg);
  transform:translateY(30px) scale(.94);transform-origin:0 100%}
.motion .p-story-v2 .p-st:nth-child(even){justify-self:end;border-radius:26px 26px 6px 26px;background:var(--saffron);color:var(--deep);transform-origin:100% 100%}
.motion .p-story-v2 .p-st.is-on,.motion .p-story-v2 .p-st.is-past{opacity:1;transform:none}
.p-story-v2 .p-st-p{font-size:min(clamp(1.5rem,1rem + 1.4vw,2.5rem),4.8vh);line-height:1.2}
.p-story-v2 .p-st-k{font-size:.8125rem;margin-bottom:6px;opacity:.8}
/* 3: a stack of sheets, the top one lifted away */
.motion .p-story-v3 .p-story-l{padding-left:0}
.motion .p-story-v3 .p-st{padding:clamp(24px,3vw,44px);border-radius:26px;background:var(--porcelain);color:var(--deep);box-shadow:0 30px 60px -30px rgba(16,35,31,.5);
  opacity:1;transform:translateY(22px) scale(.95);z-index:1}
.motion .p-story-v3 .p-st.is-on{transform:none;z-index:3}
.motion .p-story-v3 .p-st.is-past{transform:translateY(-120%) rotate(-7deg);opacity:0;z-index:4}
.motion .p-story-v3 .p-st.is-on~.p-st{z-index:2}
.p-story-v3 .p-st-p{text-shadow:none}
/* 4: one paragraph, the statement being read marked in it */
.motion .p-story-v4 .p-story-l{display:block;padding-left:0}
.motion .p-story-v4 .p-st{display:inline;grid-area:auto;opacity:1;transform:none}
.motion .p-story-v4 .p-st-k{display:none}
.motion .p-story-v4 .p-st-p{display:inline;background:linear-gradient(var(--saffron),var(--saffron)) left 88%/0% .42em no-repeat;transition:background-size 1s var(--ease),opacity .5s;opacity:.46}
.motion .p-story-v4 .p-st.is-on .p-st-p{background-size:100% .42em;opacity:1}
.motion .p-story-v4 .p-st.is-past .p-st-p{opacity:1}
.p-story-v4 .p-st-p::after{content:" "}
/* 5: each statement unmasked left to right, and kept */
.motion .p-story-v5 .p-story-l{display:grid;gap:clamp(14px,3vh,32px);padding-left:0}
.motion .p-story-v5 .p-st{grid-area:auto;opacity:1;transform:none;clip-path:inset(0 100% 0 0);transition:clip-path 1.1s var(--ease)}
.motion .p-story-v5 .p-st.is-on,.motion .p-story-v5 .p-st.is-past{clip-path:inset(0 0 0 0)}
.p-story-v5 .p-st-p{font-size:min(clamp(1.375rem,1rem + 1.4vw,2.5rem),4.6vh)}
/* 6: from out of focus into place */
.motion .p-story-v6 .p-story-l{padding-left:0}
.motion .p-story-v6 .p-st{transform:scale(1.35);filter:blur(10px)}
.motion .p-story-v6 .p-st.is-on{transform:none;filter:none}
.motion .p-story-v6 .p-st.is-past{transform:scale(.7);filter:blur(6px);opacity:0}
.p-story-v6 .p-st{transition:opacity .6s,transform 1s var(--ease),filter .8s}
/* 7: the three as tabs, the reading under them */
.motion .p-story-v7 .p-story-in{grid-template-columns:1fr}
.motion .p-story-v7 .p-story-l{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 24px;padding-left:0}
.motion .p-story-v7 .p-st{display:contents}
.motion .p-story-v7 .p-st-k{grid-row:1;padding:0 0 16px;border-bottom:2px solid var(--line);transition:border-color .5s,color .5s;opacity:.7}
.motion .p-story-v7 .p-st.is-on .p-st-k{border-color:var(--saffron);opacity:1}
.motion .p-story-v7 .p-st-p{grid-row:2;grid-column:1/-1;margin-top:28px;opacity:0;transform:translateY(24px);transition:opacity .5s,transform .8s var(--ease);max-width:26em}
.motion .p-story-v7 .p-st.is-on .p-st-p{opacity:1;transform:none}
@media (max-width:999px){
  .motion .p-story-v7 .p-st-k{font-size:.8125rem}
  .motion .p-story-v2 .p-st{max-width:92%}
}

/* =====================================================================
   Inside the operating layer, in eight designs. The stepper sets is-on and
   is-done on the stages, --f (progress) and --si (stage) on the list.
   ===================================================================== */
.p-sys:not(.p-sys-v0) .p-line{display:none}
/* 1: a timeline down the page */
@media (min-width:1000px){
  .p-sys-v1 .p-stages{grid-template-columns:1fr;gap:clamp(10px,2vh,22px);position:relative;padding-left:34px;margin-top:0}
  .p-sys-v1 .p-stages::before{content:"";position:absolute;left:5px;top:10px;bottom:10px;width:2px;background:var(--line)}
  .p-sys-v1 .p-stages::after{content:"";position:absolute;left:5px;top:10px;width:2px;height:calc(var(--f,0)*(100% - 20px));background:var(--saffron)}
  .p-sys-v1 .p-stage{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:32px;align-items:start}
  .p-sys-v1 .p-stage-b i{margin-left:-34px;background:var(--bg)}
  .p-sys-v1 .p-stage-d{margin-top:4px}
}
/* 2: each stage a panel laid over the last */
.motion .p-sys-v2 .p-stages{display:grid;grid-template-columns:1fr;margin-top:0;padding:0}
.motion .p-sys-v2 .p-stages::before,.motion .p-sys-v2 .p-stages::after{display:none}
.motion .p-sys-v2 .p-stage{grid-area:1/1;opacity:1;padding:clamp(28px,3.4vw,48px);border-radius:28px;background:var(--fg);color:var(--bg);
  box-shadow:0 30px 60px -30px rgba(16,35,31,.55);transform:translateY(110%);transition:transform .9s var(--ease)}
.motion .p-sys-v2 .p-stage.is-on{transform:none}
.motion .p-sys-v2 .p-stage.is-done{transform:translateY(calc(-16px * (var(--k,1)))) scale(.95);filter:brightness(.92)}
.motion .p-sys-v2 .p-stage .p-stage-d{opacity:1;transform:none;color:var(--bg)}
.motion .p-sys-v2 .p-stage .p-stage-b{color:var(--bg);font-size:min(clamp(2.25rem,1.4rem + 2.6vw,3.75rem),7vh)}
.motion .p-sys-v2 .p-stage .p-stage-t{color:var(--bg)}
.p-sys-v2 .p-stage-b i{display:none}
.p-sys-v2 .p-chips li{color:var(--bg);box-shadow:inset 0 0 0 1px var(--bg)}
.motion .p-sys-v2 .p-sys-in{overflow:hidden;padding-bottom:8px}
/* 3: a dial fills as the stages pass */
.p-sys-v3 .p-sys-in{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);align-items:center}
.p-sys-v3 .p-sys-say{grid-column:1/-1}
.p-sys-v3 .p-stages{grid-template-columns:1fr;margin-top:0;position:relative}
.p-sys-v3 .p-sys-in::before{content:"";grid-row:2;width:min(34vh,340px);aspect-ratio:1;border-radius:50%;justify-self:center;
  background:conic-gradient(var(--saffron) calc(var(--f,0)*360deg),var(--line) 0);
  -webkit-mask:radial-gradient(closest-side,transparent 78%,#000 79%);mask:radial-gradient(closest-side,transparent 78%,#000 79%)}
.motion .p-sys-v3 .p-stage{grid-area:1/1;opacity:0;transform:translateX(40px);transition:opacity .5s,transform .8s var(--ease)}
.motion .p-sys-v3 .p-stage.is-on{opacity:1;transform:none}
.p-sys-v3 .p-stage-b{font-size:min(clamp(2.25rem,1.4rem + 2.6vw,3.75rem),7vh)}
@media (max-width:999px){ .p-sys-v3 .p-sys-in{grid-template-columns:1fr} .p-sys-v3 .p-sys-in::before{width:22svh;grid-row:auto} }
/* 4: the stages slide past as panels */
.motion .p-sys-v4 .p-sys-in{overflow:hidden}
.motion .p-sys-v4 .p-stages{display:flex;width:calc(var(--n,3)*100%);gap:0;margin-top:0;padding:0;transform:translateX(calc(-100% * var(--si,0) / var(--n,3)));transition:transform 1s var(--ease)}
.motion .p-sys-v4 .p-stages::before,.motion .p-sys-v4 .p-stages::after{display:none}
.motion .p-sys-v4 .p-stage{flex:0 0 calc(100% / var(--n,3));opacity:1;padding-right:6vw}
.motion .p-sys-v4 .p-stage-b{font-size:min(clamp(2.75rem,1.4rem + 4vw,5.5rem),9vh)}
.motion .p-sys-v4 .p-stage-d{opacity:1;transform:none;max-width:40em}
.p-sys-v4 .p-stage-b i{display:none}
/* 5: a bar rises under each stage as it is reached */
@media (min-width:1000px){
  .p-sys-v5 .p-stages{align-items:end;margin-top:0}
  .p-sys-v5 .p-stage{display:flex;flex-direction:column-reverse;gap:18px}
  .p-sys-v5 .p-stage::before{content:"";display:block;height:clamp(60px,14vh,150px);border-radius:14px;background:var(--line);transform-origin:bottom;transition:background-color .6s}
  .p-sys-v5 .p-stage.is-on::before,.p-sys-v5 .p-stage.is-done::before{background:var(--saffron)}
  .p-sys-v5 .p-stage:nth-child(2)::before{height:clamp(90px,20vh,210px)}
  .p-sys-v5 .p-stage:nth-child(3)::before{height:clamp(120px,26vh,270px)}
  .p-sys-v5 .p-stage-b i{display:none}
}
/* 6: flying through the stages */
.motion .p-sys-v6 .p-stages{display:grid;grid-template-columns:1fr;margin-top:0;padding:0;perspective:900px}
.motion .p-sys-v6 .p-stages::before,.motion .p-sys-v6 .p-stages::after{display:none}
.motion .p-sys-v6 .p-stage{grid-area:1/1;opacity:0;transform:translateZ(-400px);filter:blur(8px);transition:opacity .6s,transform 1s var(--ease),filter .8s}
.motion .p-sys-v6 .p-stage.is-on{opacity:1;transform:none;filter:none}
.motion .p-sys-v6 .p-stage.is-done{opacity:0;transform:translateZ(300px);filter:blur(6px)}
.motion .p-sys-v6 .p-stage .p-stage-d{opacity:1;transform:none}
.p-sys-v6 .p-stage-b{font-size:min(clamp(2.5rem,1.4rem + 3.4vw,4.75rem),8vh)}
.p-sys-v6 .p-stage-b i{display:none}
/* 7: all three in view, the one being read in focus */
.motion .p-sys-v7 .p-stage{opacity:1;filter:blur(2.5px) saturate(.4);transition:filter .6s,transform .8s var(--ease);transform:scale(.97)}
.motion .p-sys-v7 .p-stage.is-on{filter:none;transform:none}
.motion .p-sys-v7 .p-stage.is-done{filter:saturate(.7);transform:none}
.motion .p-sys-v7 .p-stage .p-stage-d{opacity:1;transform:none}
.p-sys-v7 .p-stage{border-top:3px solid var(--line);padding-top:20px}
.p-sys-v7 .p-stage.is-on{border-top-color:var(--saffron)}
@media (max-width:999px){ .motion .p-sys-v7 .p-stage{filter:none;opacity:.7} .motion .p-sys-v7 .p-stage.is-on{opacity:1} }


/* =====================================================================
   Choose the route, in six designs.
   ===================================================================== */
/* 1: the routes as a stair */
@media (min-width:1000px){
  .p-del-v1 .p-routes{align-items:flex-start;min-height:0}
  .p-del-v1 .p-route{min-height:clamp(300px,42vh,420px)}
  .p-del-v1 .p-route:nth-child(2){margin-top:60px}.p-del-v1 .p-route:nth-child(3){margin-top:120px}
}
/* 2: the routes as rows across the page */
.p-del-v2 .p-routes{display:grid;gap:0;min-height:0;border-top:1px solid var(--line)}
.p-del-v2 .p-route{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) auto;align-items:center;gap:24px 48px;background:none!important;color:var(--fg);
  border-radius:0;border-bottom:1px solid var(--line);padding:clamp(22px,3.4vh,36px) 0;min-height:0;position:relative}
.p-del-v2 .p-route::before{content:"";position:absolute;left:0;top:-1px;height:2px;width:0;transition:width .9s var(--ease)}
.p-del-v2 .p-route.r0::before{background:var(--saffron)}.p-del-v2 .p-route.r1::before{background:#7FB7A8}.p-del-v2 .p-route.r2::before{background:#D9876D}
.p-del-v2 .p-route:hover::before,.p-del-v2 .p-route.is-open::before{width:100%}
.p-del-v2 .p-route p{color:var(--fg2)}
@media (max-width:999px){ .p-del-v2 .p-route{grid-template-columns:1fr;position:relative!important;top:auto!important;min-height:0!important} }
/* 3: the routes swing in on a pivot */
.p-del-v3 .p-route{transform-origin:50% 140%}
/* 4: three circles that overlap where the routes share the capability */
.p-venn{position:relative;height:clamp(220px,34vh,360px);margin:0 auto 32px;max-width:640px}
.p-venn i{position:absolute;top:0;width:58%;aspect-ratio:1;max-height:100%;border-radius:50%;mix-blend-mode:multiply;opacity:.85}
.p-venn .c0{left:0;background:var(--saffron)}.p-venn .c1{left:21%;background:#9FCFC0}.p-venn .c2{left:42%;background:#EFA58F}
[data-ground=spruce] .p-venn i,[data-ground=ink] .p-venn i{mix-blend-mode:screen;opacity:.55}
.p-del-v4 .p-routes{min-height:0}
.p-del-v4 .p-route{background:none!important;color:var(--fg);padding:0 0 0 18px;border-left:3px solid;border-radius:0}
.p-del-v4 .p-route.r0{border-color:var(--saffron)}.p-del-v4 .p-route.r1{border-color:#7FB7A8}.p-del-v4 .p-route.r2{border-color:#D9876D}
.p-del-v4 .p-route p{color:var(--fg2)}
/* 5: titles first, the rest of each card unrolls under it */
.p-del-v5 .p-route{clip-path:inset(0 0 var(--u,62%) 0 round 28px);justify-content:flex-start}
.p-del-v5 .p-route h3{margin-bottom:8px}
html:not(.motion) .p-del-v5 .p-route{clip-path:none}

/* ---------- questions, in four designs ---------- */
/* 1: one wide column of questions set large */
.faq-v1 .faq-in{grid-template-columns:1fr}
.faq-v1 .faq-h{position:static}
.faq-v1 .qa summary{font-family:var(--serif);font-size:clamp(1.375rem,1rem + 1.2vw,2.25rem);font-weight:380}
/* 2: the questions as cards in two columns */
.faq-v2 .faq-in{grid-template-columns:1fr}
.faq-v2 .faq-h{position:static}
.faq-v2 .faq-l{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:14px;align-items:start}
.faq-v2 .qa{border:0;border-radius:22px;padding:0 24px;background:var(--bg);box-shadow:inset 0 0 0 1.5px var(--line)}
.faq-v2 .qa[open]{box-shadow:inset 0 0 0 1.5px var(--fg)}
.faq-v2 .qa:last-child{border:0}
/* 3: answers hang from a gold rule */
.faq-v3 .qa-a p{border-left:2px solid var(--saffron);padding-left:18px;margin-bottom:24px}
.faq-v3 .qa summary i{border-radius:6px}

/* ---------- what comes next, in four designs ---------- */
/* 1: the next page's name runs across the screen */
.p-next-v1 .p-next-go{display:block;overflow:hidden;white-space:nowrap}
.p-next-v1 .p-next-t{display:inline-block;max-width:none;padding-right:.6em;will-change:transform}
/* 2: set to the right, with a way on */
.p-next-v2 .wrap{text-align:right}
.p-next-v2 .p-next-go{justify-items:end}
.p-next-v2 .p-fam{justify-content:flex-end}
.p-next-v2 .p-next-t::after{content:"";display:inline-block;width:.7em;height:.7em;margin-left:.25em;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg) translate(-.1em,.1em)}
/* 3: the family as a list, the next one leading it */
.p-next-v3 .p-fam{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:0 32px;border-top:1px solid var(--line)}
.p-next-v3 .p-fam a{border-radius:0;box-shadow:none;border-bottom:1px solid var(--line);display:block;padding:14px 0;font-family:var(--serif);font-size:1.25rem}
.p-next-v3 .p-fam a[aria-current]{background:none;color:var(--saffron)}

/* ---------- the close, in four designs ---------- */
.end-v1 .end-in{justify-items:start}
.end-v2 .end-in{justify-items:center;text-align:center;align-self:end;padding-bottom:4vh}
.end-v2{align-items:flex-end}
.end-v2 .end-in>*{max-width:min(22em,90vw)!important}
.end-v2 .end-act{justify-content:center}
.end-v3 .end-h{font-size:clamp(3rem,1.4rem + 6vw,8rem)}


/* ---------- FULGEO proof, in four designs ---------- */
.p-proof-v1 .p-proof-in{grid-template-columns:minmax(0,6fr) minmax(0,5fr)}
.p-proof-v1 .p-shot{order:-1}
.p-proof-v2 .p-proof-in{grid-template-columns:1fr;gap:clamp(14px,3vh,28px)}
.p-proof-v2 .p-jobs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 24px;border-top:0}
.p-proof-v2 .p-job{border-bottom:0;border-top:2px solid var(--line)}
.p-proof-v2 .p-job.is-on{border-top-color:var(--saffron)}
.p-proof-v2 .p-proof-intro{display:none}
.p-proof-v2 .p-shot-v{height:min(30vh,320px)}
.p-proof-v2 .p-proof-say{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:0 48px;align-items:end}
.p-proof-v2 .p-proof-say .p-jobs{grid-column:1/-1;margin-top:18px}
.p-proof-v3 .p-shot{transform:perspective(1400px) rotateY(var(--ry,-16deg)) rotateX(var(--rx,5deg));transform-origin:100% 50%}
@media (max-width:999px){ .p-proof-v1 .p-proof-in,.p-proof-v2 .p-proof-say{grid-template-columns:1fr} .p-proof-v2 .p-jobs{grid-template-columns:1fr} .p-proof-v3 .p-shot{transform:none} }

/* ---------- FULGEO tiers, in four designs ---------- */
.p-tiers-v1 .p-plan-row{grid-template-columns:1fr;gap:0;border-top:1px solid var(--line)}
.p-tiers-v1 .p-plan{background:none!important;color:var(--fg)!important;border-radius:0;min-height:0!important;border-bottom:1px solid var(--line);
  grid-template-columns:minmax(0,1fr) minmax(0,1.4fr) auto;align-items:start;gap:14px 40px;padding:clamp(22px,3vh,34px) 0}
.p-tiers-v1 .p-plan h3{grid-row:span 3}
.p-tiers-v1 .p-plan-go{grid-column:3;grid-row:1}
@media (min-width:1000px){
  .p-tiers-v2 .p-plan-row{grid-template-columns:1fr 1.25fr 1fr;align-items:center}
  .p-tiers-v2 .p-plan.p1{min-height:clamp(420px,58vh,560px)!important;box-shadow:0 40px 90px -40px rgba(16,35,31,.6)}
  .p-tiers-v2 .p-plan.p1 .p-price{font-size:clamp(2.5rem,1.4rem + 3vw,4.5rem)}
}
.p-tiers-v3 .p-plan{box-shadow:0 30px 70px -40px rgba(16,35,31,.55)}
@media (max-width:999px){ .p-tiers-v1 .p-plan{grid-template-columns:1fr} .p-tiers-v1 .p-plan h3{grid-row:auto} .p-tiers-v1 .p-plan-go{grid-column:auto;grid-row:auto} }

/* ---------- company chapters in their own forms ---------- */
/* the operating model: a square of four on About, four columns on company information */
@media (min-width:1000px){
  .p-model-v1 .eng-rows{display:grid;grid-template-columns:1fr 1fr;gap:0 48px;max-width:none;border-top:0}
  .p-model-v1 .eng-r{border-top:1px solid var(--line)}
  .p-model-v2 .eng-rows{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;max-width:none;border-top:0}
  .p-model-v2 .eng-r{grid-template-columns:1fr;border-bottom:0;border-top:3px solid var(--line);padding-top:20px;align-content:start}
  .p-model-v2 .eng-r.is-on{border-top-color:var(--saffron)}
}
/* six capabilities as tiles on About */
.p-caps-v1 .caps-l{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:none!important;gap:14px;height:auto!important}
.p-caps-v1 .cap{display:flex;flex-direction:column;justify-content:space-between;gap:14px;min-height:clamp(120px,19vh,210px);padding:22px 24px!important;border-radius:22px;
  box-shadow:inset 0 0 0 1.5px var(--line);transition:background-color .5s,color .5s,box-shadow .5s,transform .7s var(--ease)}
.p-caps-v1 .cap.is-on{background:var(--saffron);color:var(--deep);box-shadow:none;transform:translateY(-6px)}
.p-caps-v1 .cap.is-on .cap-n{color:var(--deep)}
.p-caps-v1 .cap .cap-d{opacity:.8!important;transform:none!important;font-size:.875rem}
.p-caps-v1 .cap.is-on :is(.cap-n,.cap-d){text-shadow:none}
@media (max-width:999px){ .p-caps-v1 .caps-l{grid-template-columns:1fr 1fr} .p-caps-v1 .cap{min-height:0;padding:14px!important} .p-caps-v1 .cap-d{display:none} .p-caps-v1 .cap.is-on .cap-d{display:block} }
/* the operating companies split the screen on About, as rows on company information */
.p-cos-v1 .cos-grid{gap:0;margin-inline:calc(var(--gut)*-1)}
.p-cos-v1 .co{border-radius:0;min-height:clamp(380px,62vh,620px)}
.p-cos-v2 .cos-grid{grid-template-columns:1fr;gap:0;border-top:1px solid var(--line)}
.p-cos-v2 .co{background:none!important;color:var(--fg)!important;border-radius:0;min-height:0!important;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);
  gap:24px 48px;align-items:center;padding:clamp(24px,4vh,40px) 0;border-bottom:1px solid var(--line)}
.p-cos-v2 .co p{margin:0!important}
@media (max-width:999px){ .p-cos-v2 .co{grid-template-columns:1fr} }
/* the governance quote runs as a band on company information */
.p-gov-v2 .p-gov-in{grid-template-columns:1fr}
.p-gov-band{overflow:hidden;white-space:nowrap;margin-inline:calc(var(--gut)*-1)}
.p-gov-band span[aria-hidden]{display:inline-block;will-change:transform;font-size:clamp(2.5rem,1.4rem + 4vw,5.5rem)}
.p-gov-band p::before,.p-gov-band p::after{content:none}
/* the record as tiles on company information, where it opens the page */
.p-rec-v2 .p-rec-in{grid-template-columns:1fr}
.p-rec-v2 .p-ledger{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:14px;border-top:0}
.p-rec-v2 .p-ledger div{grid-template-columns:1fr;border:0;border-radius:22px;padding:22px 24px;box-shadow:inset 0 0 0 1.5px var(--line)}
.p-rec-v2 .p-ledger dd{font-size:clamp(1.375rem,1rem + 1vw,2rem)}
/* the overview on company information reads as a plain statement */
.p-ov-v2 .p-ov-in{grid-template-columns:1fr}
.p-ov-v2 .p-ov-h{position:static}
.p-ov-v2 .p-ov-lead{font-style:italic;max-width:30em}

/* ---------- the form reads as a form ----------
   A field drawn only as an underline over the threads was hard to find. The form sits
   on its own panel, and every field is a white box with a visible edge, a label above
   it and a strong focus ring, so where to type is never in question. */
.p-f{background:#FFFFFF;color:var(--deep);border-radius:28px;padding:clamp(22px,3vw,40px);
  box-shadow:0 40px 90px -50px rgba(16,35,31,.55),0 0 0 1px rgba(16,35,31,.08);gap:18px 20px}
.p-f :is(label,legend,p,span){text-shadow:none!important}
.p-f-row{padding:0}
.p-f-row label,.p-f-row legend{color:var(--deep);font-size:.9375rem;margin-bottom:2px}
.p-f-row input,.p-f-row textarea{background:#F6F8F4;border:1.5px solid #B9C6BF;border-radius:14px;padding:14px 16px;
  font-family:var(--sans);font-size:1.0625rem;color:var(--deep);transition:border-color .25s,box-shadow .25s,background-color .25s}
.p-f-row input::placeholder,.p-f-row textarea::placeholder{color:#6B7B74}
.p-f-row input:hover,.p-f-row textarea:hover{border-color:#7E918A}
.p-f-row input:focus,.p-f-row textarea:focus{background:#fff;border-color:var(--deep);box-shadow:0 0 0 4px rgba(242,182,50,.45)}
.p-f-row i{display:none}
.p-f-row input:user-invalid,.p-f-row textarea:user-invalid{border-color:#AE4731;box-shadow:0 0 0 3px rgba(174,71,49,.18)}
.p-pick span{box-shadow:inset 0 0 0 1.5px #B9C6BF;background:#F6F8F4;color:var(--deep);font-family:var(--sans);font-size:1rem;padding:10px 18px}
.p-pick:hover span{box-shadow:inset 0 0 0 1.5px var(--deep)}
.p-pick input:checked+span{background:var(--deep);color:#fff}
.p-f-go{margin-top:6px}
.p-draft{color:var(--deep)}
.p-f-sent{color:var(--deep)}
.p-form .p-f .btn{--btn:var(--deep);--btnfg:#fff}
@media (max-width:999px) and (max-height:760px){
  .p-caps-v1 .cap{padding:10px 12px!important;gap:4px}
  .p-caps-v1 .cap-n{font-size:1.25rem!important}
  .p-caps-v1 .cap.is-on .cap-d{display:none}
  .p-caps-v1 .caps-say .btn{display:none}
}

/* ---------- the founders on a phone: full width, one after another ---------- */
@media (max-width:999px){
  .motion .p-lead.is-flow{height:auto;display:block;padding-block:88px 60px}
  .motion .p-lead.is-flow .p-lead-in>*{zoom:1}
  .motion .p-lead.is-flow .p-people{display:grid;gap:56px}
  .motion .p-lead.is-flow .p-person{grid-area:auto;grid-template-columns:1fr;gap:18px}
  .motion .p-lead.is-flow .p-person .p-person-say>*{opacity:1;transform:none}
  .p-lead .p-portrait,.p-lead-dir .p-portrait{width:100%;max-width:520px;aspect-ratio:4/5;height:auto}
  .motion .p-lead.is-flow .p-names{display:none}
  .motion .p-lead.is-flow .p-lead-lede{display:block}
  .p-lead .p-person-n{font-size:clamp(1.875rem,8vw,2.5rem)}
  .p-lead .p-bio{font-size:1rem;line-height:1.6}
}
@media (max-width:560px){ .p-lead-dir .p-people{grid-template-columns:1fr} }

/* ---------- card text reads over the card's own drawing ----------
   Each coloured card carries a line drawing. On a short phone card the drawing ran
   into the words, so the drawing keeps to the top of the card and the words carry a
   halo in the card's own colour, the way text on a ground carries the ground's. */
.pcard .glyph,.p-fan-c .glyph{height:46%;opacity:.42}
.pcard :is(h3,p,.pcard-k),.p-fan-c span{
  text-shadow:0 0 1px var(--tone),0 0 4px var(--tone),0 0 10px var(--tone),0 0 20px var(--tone)!important}
.pcard p{opacity:1}
@media (max-width:999px){
  .pcard .glyph,.p-fan-c .glyph{height:38%;opacity:.34}
  .pcard{justify-content:flex-end;gap:10px}
}

/* ---------- nothing decorative shows through behind words ----------
   1. Outlined pills and panels were see-through, so the threads crossed their text.
      They take a solid face in their ground's colour. */
.p-mod:nth-child(3n+2),.p-ex-l li,.p-chips li,.p-kinds li,.p-fam a,.hero-chips li,.plat-cats li,.p-names li,.std-c,.p-agent-r,.p-job,.p-ext-l a{background-color:var(--bg)}
.p-kinds li:first-child,.p-fam a[aria-current],.p-names li.is-on{background-color:var(--fg)}
.std-c{background:color-mix(in srgb,var(--bg) 88%,#fff)}
.std-c.is-open{background:var(--deep)}
.p-agent-r{background:var(--bg)}
/* 2. Designs that set a card as a plain row on the ground keep the ground's halo. */
:is(.p-del-v2,.p-del-v4) .p-route :is(h3,p,a),
.p-tiers-v1 .p-plan :is(h3,p,li,a),
.p-cos-v2 .co :is(span,p),
.p-caps-v1 .cap:not(.is-on) :is(.cap-n,.cap-d){
  text-shadow:0 0 1px var(--bg),0 0 4px var(--bg),0 0 10px var(--bg),0 0 22px var(--bg)!important}
/* 3. Words set on a photograph carry a dark halo of their own, whatever the picture
      behind them happens to be at that point. */
.ed-cap :is(p,h2),.p-photo-cap{text-shadow:0 0 2px rgba(10,24,21,.7),0 0 12px rgba(10,24,21,.55),0 0 28px rgba(10,24,21,.45)!important}
.p-flip-f .glyph{opacity:.4}
.p-route-go::before{left:12px;top:21px;width:19px}
.p-route-go::after{left:19px;top:17px;width:9px;height:9px;transform:rotate(45deg)}
.p-route-go::before,.p-route-go::after{box-sizing:content-box}