/* Services as one story: Amihan, an invented perfume house, from a blank page to number one.
   Story chrome uses the site's two fonts and red. Amihan's own identity (Fraunces, its five colours) lives only inside its artefacts. */
@font-face{font-family:"Amihan Serif";src:url(/assets/fonts/Fraunces.woff2) format("woff2");font-weight:100 900;font-display:swap}
.story{--r-red:#f10000;--r-mute:#8d8d8d;--r-line:rgba(255,255,255,.12);
  --a-cream:#f2ede3;--a-gold:#d8a23a;--a-clay:#b4583c;--a-teal:#16302e;--a-night:#0b1514;
  --brand:Georgia,"Times New Roman",serif;position:relative;background:#000;color:#fff}
.story.near{--brand:"Amihan Serif",Georgia,"Times New Roman",serif}
.br-f{font-family:var(--brand);font-weight:300;font-variation-settings:"opsz" 144}

/* ---------- intro ---------- */
.story-intro{padding:clamp(110px,18vh,200px) var(--pad) clamp(60px,10vh,120px)}
.story-h{font:400 clamp(64px,10vw,180px)/.86 var(--dsp);text-transform:uppercase;letter-spacing:.005em;margin:0}
.story-h span{display:block}
.story-h .red{color:var(--r-red)}

/* ---------- the HUD: one strip at the bottom of the screen for the whole story ---------- */
.hud{position:sticky;top:0;height:0;z-index:30;pointer-events:none}
.hud-in{position:absolute;left:var(--pad);right:var(--pad);top:calc(100vh - 62px);top:calc(100svh - 62px);height:42px;display:flex;align-items:center;gap:clamp(14px,2vw,28px);padding:0 18px;border-radius:99px;background:rgba(9,9,10,.74);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid var(--r-line);font:600 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--r-mute);opacity:var(--ho,0);transform:translateY(calc((1 - var(--ho,0)) * 24px));will-change:opacity,transform}
.hud-in b{color:#fff;font-weight:600;font-variant-numeric:tabular-nums}
.hud-brand{display:flex;align-items:center;gap:8px;color:#fff;font-family:var(--brand);font-weight:400;font-size:15px;letter-spacing:0;text-transform:none}
.hud-brand svg{color:var(--a-gold)}
.hud-track{flex:1;display:flex;gap:6px;align-self:stretch;align-items:center}
.hud-track i{position:relative;flex:1;height:2px;background:rgba(255,255,255,.14)}
.hud-track i::after{content:"";position:absolute;inset:0;background:#fff;transform:scaleX(var(--f,0));transform-origin:left}
.hud-track i.on::after{background:var(--r-red)}
.hud-track em{position:absolute;left:0;bottom:7px;font-style:normal;font-size:10px;white-space:nowrap;transition:color .3s}
.hud-track i.on em{color:#fff}
.hud-day,.hud-orders{white-space:nowrap}

/* ---------- chapters: a tall track with a sticky stage ---------- */
.ch{position:relative;height:var(--len,400vh)}
.ch[data-ch=design]{--len:440vh}.ch[data-ch=build]{--len:340vh}.ch[data-ch=three]{--len:460vh}.ch[data-ch=growth]{--len:500vh}
.ch-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:grid;grid-template-columns:minmax(300px,30%) 1fr;align-items:center;gap:4vw;padding:0 var(--pad) 70px}
.ch-copy,.ch-vis{opacity:var(--in,1);transform:translateY(calc((1 - var(--in,1)) * 40px))}
.ch-copy{position:relative;z-index:2}
.ch-vis{position:relative;height:100%;width:100%;min-width:0;display:grid;place-items:center}

/* the chapter card: a title that fills the screen, then gives way to the chapter */
.ch-card{position:absolute;inset:0;z-index:5;display:grid;place-content:center;justify-items:center;text-align:center;gap:10px;pointer-events:none;opacity:var(--cc,0);visibility:var(--ccv,hidden)}
.cc-n{font:600 13px/1 var(--sans);letter-spacing:.3em;color:var(--r-red)}
.cc-t{font:400 clamp(110px,21vw,380px)/.8 var(--dsp);text-transform:uppercase;letter-spacing:.005em;transform:scale(calc(1 + (1 - var(--cc,0)) * .08))}
.cc-d{font:400 clamp(28px,3vw,48px)/1 var(--dsp);text-transform:uppercase;color:var(--r-red)}
.cc-l{margin-top:6px;font-size:clamp(16px,1.3vw,20px);color:#cfcfcf}

.ch-meta{display:flex;align-items:center;gap:16px;margin-bottom:18px}
.ch-i{font:600 12px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--r-red);white-space:nowrap}
.ch-bar{flex:1;max-width:120px;height:2px;background:rgba(255,255,255,.16);position:relative;overflow:hidden}
.ch-bar i{position:absolute;inset:0;background:#fff;transform:scaleX(var(--f,0));transform-origin:left}
.ch-t{font:400 clamp(56px,6.6vw,118px)/.86 var(--dsp);text-transform:uppercase;letter-spacing:.005em;margin:0}
.ch-p{margin:18px 0 26px;max-width:32ch;font-size:clamp(16px,1.25vw,20px);line-height:1.45;color:#e6e6e6}
.ch-list,.ch-steps{margin:0;padding:0;list-style:none;border-top:1px solid var(--r-line)}
.ch-list li{padding:11px 0;border-bottom:1px solid var(--r-line);font-size:15px;color:var(--r-mute);transition:color .4s,padding .5s cubic-bezier(.16,1,.3,1)}
.ch-list li.on{color:#fff;padding-left:14px;box-shadow:inset 2px 0 0 var(--r-red)}
.ch-steps li{display:grid;grid-template-columns:40px 1fr;padding:12px 0;border-bottom:1px solid var(--r-line);color:var(--r-mute);transition:color .4s}
.ch-steps b{font:600 12px/22px var(--sans);letter-spacing:.14em;transition:color .4s}
.ch-steps span{font-size:16px;line-height:22px}
.ch-steps em{grid-column:2;font-style:normal;font-size:14px;line-height:1.4;color:#cfcfcf;max-height:0;opacity:0;overflow:hidden;transition:max-height .5s cubic-bezier(.16,1,.3,1),opacity .4s,margin .5s}
.ch-steps li.on{color:#fff}
.ch-steps li.on b{color:var(--r-red)}
.ch-steps li.on em{max-height:3em;opacity:1;margin-top:6px}
.ch-steps li.done{color:#d4d4d4}
.ch-link{display:inline-flex;gap:10px;margin-top:24px;color:#fff;font-size:15px;text-underline-offset:5px}
.ch-link:hover{color:var(--r-red)}
.ch-try{margin:22px 0 0;font-size:14px;color:var(--r-mute)}
.ch-try::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--r-red);margin-right:10px;vertical-align:1px;animation:sttry 1.8s infinite}
@keyframes sttry{0%{box-shadow:0 0 0 0 rgba(241,0,0,.6)}70%{box-shadow:0 0 0 8px rgba(241,0,0,0)}100%{box-shadow:0 0 0 0 rgba(241,0,0,0)}}

/* ---------- the bottle (drawn; swapped for the Blender render once it exists) ---------- */
.btl{position:absolute;left:50%;bottom:var(--bb,8%);height:var(--bh,80%);aspect-ratio:160/262;transform:translateX(-50%);font-style:normal}
.pg-img,.st-art,.q-art,.st-ci,.th-fb{position:relative}
.btl svg,.btl img{display:block;width:100%;height:100%;object-fit:contain}
.btl img{filter:drop-shadow(0 24px 30px rgba(0,0,0,.28))}

/* ---------- 01 DESIGN: the canvas ---------- */
.cv{width:100%;height:min(76vh,760px);display:grid;grid-template-rows:40px 1fr;background:#0e0e10;border:1px solid rgba(255,255,255,.12);border-radius:14px;overflow:hidden;box-shadow:0 60px 120px -30px rgba(0,0,0,.9)}
.cv-top{display:flex;align-items:center;gap:16px;padding:0 14px;border-bottom:1px solid rgba(255,255,255,.08);font-size:13px;color:#a5a5a8}
.cv-dots{display:flex;gap:7px}.cv-dots i{width:11px;height:11px;border-radius:50%;background:#2e2e32}.cv-dots i:first-child{background:#5a1616}
.cv-file{flex:1;text-align:center}.cv-file em{font-style:normal;color:#555;margin:0 4px}.cv-file b{color:#fff;font-weight:500}
.cv-tool{font:600 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--r-mute);border:1px solid rgba(255,255,255,.14);padding:5px 8px;border-radius:5px}
.cv-body{display:grid;grid-template-columns:170px 1fr 180px;min-height:0}
.cv-layers{margin:0;padding:12px 0;list-style:none;border-right:1px solid rgba(255,255,255,.08);font-size:12.5px;color:#8a8a8e}
.cv-layers li{padding:8px 16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:background .3s,color .3s,box-shadow .3s}
.cv-layers .cv-lh{font:600 10.5px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:#5d5d61;padding-bottom:12px}
.cv-layers li.on{background:rgba(241,0,0,.10);color:#fff;box-shadow:inset 2px 0 0 var(--r-red)}
.cv-board{position:relative;min-width:0;overflow:hidden;background:#1b1b1e;background-image:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1px);background-size:22px 22px;container-type:size}
.cv-props{margin:0;padding:12px 16px;border-left:1px solid rgba(255,255,255,.08);display:grid;align-content:start;gap:16px}
.cv-props div{display:grid;gap:6px}
.cv-props dt{font:600 10.5px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:#5d5d61}
.cv-props dd{margin:0;display:flex;align-items:center;gap:8px;font-size:12.5px;color:#e4e4e6;font-variant-numeric:tabular-nums}
.cp-sw{width:14px;height:14px;border-radius:3px;background:var(--sw,#f2ede3);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
.dz-s{position:absolute;inset:0;display:grid;place-items:center;padding:5%;will-change:opacity,transform}
.cv-cur{position:absolute;left:0;top:0;z-index:6;display:flex;align-items:flex-start;gap:2px;pointer-events:none;will-change:transform}
.cv-cur b{margin-top:14px;padding:3px 7px;border-radius:4px;background:var(--r-red);color:#fff;font:600 11px/1.2 var(--sans)}

/* A: the logo, constructed on its grid */
.lg{width:100%;height:100%;overflow:visible}
.lg-guides{opacity:var(--gd,1)}
.lg-petals path{fill:var(--a-cream);fill-opacity:var(--pf,1);stroke:var(--a-cream);stroke-width:1.1;stroke-dasharray:1;stroke-dashoffset:0;stroke-linejoin:round}
.lg-core{fill:var(--a-gold)}
.lg-notes{opacity:var(--nt,1)}
.lg-notes path{fill:none;stroke:rgba(255,255,255,.35);stroke-width:.6}
.lg-notes text{fill:var(--r-red);font:600 7.5px var(--sans);letter-spacing:.06em}
.lg-wm{fill:var(--a-cream);font:300 60px var(--brand);font-variation-settings:"opsz" 144;letter-spacing:var(--ls,0);opacity:var(--wm,1)}
.lg-sub{fill:#8d8d8d;font:600 8.5px var(--sans);letter-spacing:.42em;opacity:var(--wm,1)}

/* B: colour and type */
.dz-sys{align-content:center;gap:4cqh;grid-template-rows:auto auto;place-items:stretch;padding:7cqh 6cqw}
.sw-row{display:grid;grid-template-columns:repeat(5,1fr);gap:1.6cqw;height:40cqh}
.sw{display:flex;flex-direction:column;justify-content:flex-end;gap:4px;padding:1.6cqw;border-radius:10px;background:var(--c);color:var(--t,#f2ede3);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);transform:translateY(calc((1 - var(--k,1)) * 30px));opacity:var(--k,1)}
.sw b{font:500 clamp(11px,1.6cqw,16px)/1.1 var(--sans)}
.sw span{font:500 clamp(9px,1.2cqw,12px)/1 ui-monospace,SFMono-Regular,Menlo,monospace;opacity:.75}
.ty-row{display:grid;grid-template-columns:1fr 1fr 1.1fr;gap:1.6cqw;height:28cqh}
.ty{display:grid;align-content:end;gap:4px;padding:1.6cqw;border-radius:10px;background:#111113;border:1px solid rgba(255,255,255,.08);color:#9a9a9e;font-size:clamp(10px,1.2cqw,13px);transform:translateY(calc((1 - var(--k,1)) * 30px));opacity:var(--k,1)}
.ty b{color:#fff;font-weight:500;font-size:clamp(11px,1.4cqw,15px)}
.ty-a{font:400 clamp(30px,7cqh,64px)/1 var(--sans);color:#fff;letter-spacing:-.03em}
.ty-a.br-f{font-family:var(--brand);font-weight:300}
.ty-lock{background:var(--a-teal);display:flex;align-items:center;justify-content:center;gap:1.2cqw;color:var(--a-cream)}
.ty-lock svg{width:clamp(20px,5cqh,44px);height:clamp(20px,5cqh,44px);color:var(--a-gold)}
.ty-lock span{font-size:clamp(22px,5.4cqh,50px);line-height:1}

/* C + D: the home page, wireframe then final */
.dz-page{padding:3cqh 4cqw}
.pgf{position:relative;width:min(92cqw,calc(82cqh * 1.6));aspect-ratio:1440/900;container-type:inline-size;box-shadow:0 30px 60px -20px rgba(0,0,0,.7)}
.pgf-l{position:absolute;left:0;bottom:100%;margin-bottom:8px;font:500 11px/1 var(--sans);color:#8a8a8e;white-space:nowrap}
.pg-stack{position:absolute;inset:0;overflow:hidden;border-radius:2px}
.pg{position:absolute;inset:0;overflow:hidden;background:var(--a-cream);color:var(--a-night);font-family:var(--sans)}
.pg-fin{clip-path:inset(0 0 calc(100% - var(--wipe,100%)) 0)}
.pg-nav{display:flex;align-items:center;gap:3cqw;padding:2.2cqw 4cqw;font-size:1.1cqw}
.pg-logo{display:flex;align-items:center;gap:.7cqw;font:300 2.1cqw/1 var(--brand);font-variation-settings:"opsz" 144}
.pg-logo svg{width:2cqw;height:2cqw;color:var(--a-gold)}
.pg-links{display:flex;gap:2.4cqw;margin-left:auto}
.pg-cart{border:1px solid rgba(11,21,20,.3);padding:.5cqw 1.3cqw;border-radius:99px}
.pg-hero{display:grid;grid-template-columns:1fr 1fr;gap:3cqw;align-items:center;padding:.6cqw 4cqw 2.6cqw}
.pg-k{display:block;font:600 .85cqw/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--a-clay)}
.pg-copy h5{font:300 6.4cqw/.92 var(--brand);font-variation-settings:"opsz" 144;letter-spacing:-.025em;margin:1cqw 0 1.4cqw}
.pg-copy p{font-size:1.3cqw;line-height:1.45;color:#3d4544;max-width:26em;margin:0 0 2cqw}
.pg-btn{display:inline-block;background:var(--a-teal);color:var(--a-cream);padding:1.1cqw 2.2cqw;border-radius:99px;font:600 1.1cqw/1 var(--sans)}
.pg-img{display:grid;place-items:end center;aspect-ratio:1.3;border-radius:1cqw;overflow:hidden;background:#e5ddcf}
.pg-img .btl{--bh:84%;--bb:5%}
.pg-sun,.st-art,.ff{background:radial-gradient(circle at 64% 34%,#f6d27e 0 11%,rgba(246,210,126,.35) 11.5% 16%,transparent 16.5%),linear-gradient(180deg,#e7b24e 0%,#c46d3e 46%,#3f3a2c 72%,#16302e 100%)}
.pg-row{display:grid;grid-template-columns:repeat(3,1fr);gap:2cqw;padding:0 4cqw}
.pg-card .pg-img{aspect-ratio:2.1;place-items:center}
.pg-card .pg-img .btl{--bh:82%;--bb:9%}
.pg-card b{display:block;margin-top:.9cqw;font:400 1.5cqw/1 var(--brand)}
.pg-card span{font-size:1.05cqw;color:#5b6362}
/* the wireframe: same layout, text becomes bars, images become crossed boxes */
.pg-w{background:#fbfaf8}
.pg-w *{color:transparent!important;border-color:#d4d0c8!important}
.pg-w svg,.pg-w .btl{visibility:hidden}
.pg-w .pg-logo span,.pg-w .pg-links span,.pg-w .pg-cart,.pg-w .pg-k,.pg-w .pg-card b,.pg-w .pg-card span{background:#dcd8d1;border-radius:3px}
.pg-w .pg-copy h5{width:fit-content;background:repeating-linear-gradient(180deg,#d4d0c8 0 .74em,transparent .74em .92em)}
.pg-w .pg-copy p{width:fit-content;background:repeating-linear-gradient(180deg,#e2ded7 0 1em,transparent 1em 1.45em)}
.pg-w .pg-btn{background:#cfcbc4}
.pg-w .pg-img{background:linear-gradient(to top right,transparent calc(50% - .5px),#d4d0c8 calc(50% - .5px) calc(50% + .5px),transparent calc(50% + .5px)),linear-gradient(to top left,transparent calc(50% - .5px),#d4d0c8 calc(50% - .5px) calc(50% + .5px),transparent calc(50% + .5px)),#efece7;box-shadow:inset 0 0 0 1px #d4d0c8}
.pg-w .pg-hero,.pg-w .pg-row,.pg-w .pg-nav{outline:1px dashed rgba(241,0,0,.45);outline-offset:-.6cqw}
.pg-scan{position:absolute;left:0;right:0;top:var(--wipe,0%);height:2px;margin-top:-1px;background:var(--r-red);box-shadow:0 0 22px 4px rgba(241,0,0,.55),0 0 2px #fff;opacity:var(--so,0);pointer-events:none;z-index:3}

/* ---------- 02 BUILD: the store in a browser ---------- */
.bd{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto;align-content:center;gap:14px;place-items:stretch}
.br{position:relative;min-width:0;border-radius:14px;background:#141416;border:1px solid rgba(255,255,255,.16);overflow:hidden;box-shadow:0 60px 120px -30px rgba(0,0,0,.9),0 0 0 1px #000;transform-origin:50% 100%;will-change:transform}
.br-top{display:flex;align-items:flex-end;gap:14px;height:44px;padding:0 12px;background:#0b0b0c}
.br-dots{display:flex;gap:7px;align-self:center}
.br-dots i{width:11px;height:11px;border-radius:50%;background:#2e2e32}
.br-dots i:first-child{background:#5a1616}
.br-tab{position:relative;display:flex;align-items:center;gap:8px;height:36px;padding:0 16px 0 12px;border-radius:10px 10px 0 0;background:#1c1c1f;color:#fff;font:500 13px/1 var(--sans);white-space:nowrap;min-width:0;overflow:hidden}
.br-tab span{overflow:hidden;text-overflow:ellipsis}
.br-tab em{font-style:normal;font-size:11px;letter-spacing:.06em;color:var(--r-red);border:1px solid rgba(241,0,0,.5);padding:3px 6px;border-radius:5px}
.fav{width:15px;height:15px;color:var(--a-gold);flex:none}
.br-bar{position:relative;display:flex;align-items:center;gap:10px;height:42px;padding:0 12px;background:#1c1c1f;border-bottom:1px solid rgba(255,255,255,.06)}
.br-nav{display:flex;gap:2px;color:#6a6a6e;font-size:17px}
.br-nav i{font-style:normal;width:24px;text-align:center}
.br-url{flex:1;min-width:0;display:flex;align-items:center;gap:8px;height:30px;padding:0 14px;border-radius:99px;background:#0d0d0f;color:#77777b;font:400 13px/1 var(--sans);white-space:nowrap;overflow:hidden}
.br-url b{color:#fff;font-weight:500}
.br-load{position:absolute;left:0;bottom:-1px;height:2px;width:100%;background:var(--r-red);box-shadow:0 0 12px var(--r-red);transform:scaleX(var(--ld,0));transform-origin:left;opacity:var(--ldo,0);transition:opacity .4s}
.br-view{position:relative;height:min(56vh,560px);overflow:hidden;background:var(--a-cream)}
.br-site{position:absolute;left:0;top:0;width:var(--vw,1200px);transform:scale(var(--k,1));transform-origin:0 0;container-type:inline-size;background:var(--a-cream);color:var(--a-night);font-family:var(--sans)}
.b-in{transition:opacity .6s var(--d,0s),transform .9s cubic-bezier(.16,1,.3,1) var(--d,0s)}
.js .br-site:not(.ready) .b-in{opacity:0;transform:translateY(28px);transition:none}
.st-nav{display:flex;align-items:center;gap:24px;padding:22px 48px;border-bottom:1px solid rgba(11,21,20,.1)}
.st-logo{display:flex;align-items:center;gap:10px;font:300 30px/1 var(--brand);font-variation-settings:"opsz" 144}
.st-logo svg{width:26px;height:26px;color:var(--a-gold)}
.st-links{display:flex;gap:28px;margin-left:auto;font-size:15px}
.st-cart{display:flex;align-items:center;gap:8px;font-size:15px}
.st-cart em{font-style:normal;background:var(--a-teal);color:var(--a-cream);font-size:12px;min-width:22px;height:22px;border-radius:11px;display:grid;place-items:center;transition:transform .3s,background .3s}
.st-cart em.bump{transform:scale(1.35);background:var(--a-gold);color:var(--a-night)}
.st-hero{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;padding:44px 48px}
.st-k{display:block;font:600 12px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--a-clay)}
.st-copy h4{font:300 98px/.9 var(--brand);font-variation-settings:"opsz" 144;letter-spacing:-.03em;margin:16px 0 22px}
.st-copy p{font-size:18px;line-height:1.5;color:#3d4544;max-width:30ch;margin:0 0 28px}
.st-btn{display:inline-block;border:0;background:var(--a-teal);color:var(--a-cream);font:600 15px/1 var(--sans);padding:16px 26px;border-radius:99px;cursor:pointer}
.st-art{display:grid;place-items:end center;aspect-ratio:1/1.02;border-radius:18px;overflow:hidden;padding-bottom:5%}
.st-art .btl{--bh:76%;--bb:6%}
.st-quiz{display:grid;grid-template-columns:1fr 1.1fr;gap:26px 40px;margin:0 48px 48px;padding:36px;border-radius:20px;background:var(--a-teal);color:var(--a-cream)}
.q-h{grid-column:1/-1}
.q-h .st-k{color:var(--a-gold)}
.q-h h5{font:300 56px/1 var(--brand);font-variation-settings:"opsz" 144;letter-spacing:-.02em;margin:10px 0 0}
.q-opts{display:grid;gap:12px;align-content:start}
.q-o{display:flex;align-items:center;gap:16px;padding:12px;border:1px solid rgba(242,237,227,.2);border-radius:14px;color:var(--a-cream);font:500 17px/1.2 var(--sans);text-align:left;cursor:pointer;transition:background .3s,border-color .3s}
.q-o:hover{border-color:rgba(242,237,227,.5)}
.q-o.on{background:rgba(242,237,227,.1);border-color:var(--a-gold)}
.q-o:focus-visible,.s-add:focus-visible{outline:2px solid var(--a-gold);outline-offset:2px}
.q-o i{width:58px;height:58px;border-radius:10px;flex:none}
.q0{background:radial-gradient(circle at 70% 30%,#fff3c9 0 12%,transparent 13%),linear-gradient(180deg,#f0c76e 0 46%,#4a8a8c 46% 100%)}
.q1{background:repeating-linear-gradient(105deg,rgba(255,255,255,.28) 0 1px,transparent 1px 7px),linear-gradient(180deg,#7d8a86,#3b4643)}
.q2{background:radial-gradient(ellipse 18% 30% at 50% 44%,#ffd27a 0 40%,rgba(255,160,60,.4) 41% 70%,transparent 71%),linear-gradient(180deg,#3a1f14,#120a07)}
.q-res{display:grid;grid-template-columns:.78fr 1fr;gap:22px;align-items:center;padding:20px;border-radius:16px;background:var(--a-night)}
.q-art{display:grid;place-items:center;aspect-ratio:.82;border-radius:12px;background:radial-gradient(circle at 50% 36%,var(--qg,#d8a23a) 0,rgba(0,0,0,0) 62%),#0f1e1d;transition:background .5s}
.q-art .btl{--bh:82%;--bb:9%}
.q-name{display:block;font:300 48px/1 var(--brand);font-variation-settings:"opsz" 144;margin:10px 0 8px}
.q-notes{margin:0 0 10px;font-size:15px;line-height:1.45;color:rgba(242,237,227,.75)}
.q-price{display:block;font-size:14px;margin-bottom:18px}
.s-add{background:var(--a-gold);color:var(--a-night)}
.s-add:active{transform:scale(.97)}
.q-res.swap .q-art .btl,.q-res.swap .q-txt{animation:qswap .6s cubic-bezier(.16,1,.3,1)}
@keyframes qswap{from{opacity:0;transform:translateY(14px)}}
.st-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;padding:0 48px 56px}
.st-ci{display:grid;place-items:center;aspect-ratio:4/3.3;border-radius:14px;background:#e7e0d3}
.st-ci .btl{--bh:80%;--bb:10%}
.st-card b{display:block;margin-top:12px;font:400 24px/1.1 var(--brand)}
.st-card span{font-size:14px;color:#5b6362}
.fly{position:fixed;left:0;top:0;z-index:400;width:12px;height:12px;border-radius:50%;background:var(--a-gold);pointer-events:none}
@container (max-width:899px){
  .st-copy h4{font-size:66px}.st-hero{gap:30px;padding:36px}.st-nav{padding:20px 36px}.st-quiz{margin:0 36px 40px;padding:28px}.st-grid{padding:0 36px 44px}
  .st-links{display:none}.st-cart{margin-left:auto}.q-h h5{font-size:44px}
}
@container (max-width:599px){
  .st-hero{grid-template-columns:1fr;padding:22px 18px 26px;gap:18px}
  .st-nav{padding:14px 18px}.st-logo{font-size:24px}
  .st-copy h4{font-size:52px;margin:10px 0 12px}.st-copy p{font-size:15px;margin-bottom:0}.st-hero .st-btn{display:none}
  .st-art{aspect-ratio:1.5}
  .st-quiz{grid-template-columns:1fr;margin:0 14px 24px;padding:20px;gap:16px}.q-h h5{font-size:36px}
  .q-o{font-size:15px;padding:9px}.q-o i{width:44px;height:44px}
  .q-res{grid-template-columns:.7fr 1fr;padding:14px;gap:14px}.q-name{font-size:34px}.q-notes{font-size:13px}
  .st-grid{grid-template-columns:1fr 1fr;gap:12px;padding:0 14px 28px}.st-grid .st-card:nth-child(3){display:none}
}

/* speed, measured live */
.perf{display:flex;align-items:center;gap:clamp(16px,2.4vw,34px);padding:14px 18px;border:1px solid var(--r-line);border-radius:14px;background:#0a0a0b}
.perf-h{display:grid;gap:6px;flex:none}
.perf-h span{font:600 12px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase}
.perf-h em{font-style:normal;font-size:12px;color:var(--r-mute)}
.perf-main{display:flex;align-items:center;gap:12px}
.perf-main div{display:grid;gap:4px}
.perf-main span{font-size:12px;color:var(--r-mute);white-space:nowrap}
.perf-ring{width:46px;height:46px;transform:rotate(-90deg);flex:none}
.perf-ring circle{fill:none;stroke:rgba(255,255,255,.12);stroke-width:5}
.perf-ring .perf-arc{stroke:var(--r-red);stroke-dasharray:100;stroke-dashoffset:calc(100 - var(--a,0));stroke-linecap:round}
.perf-ms{font:400 38px/.9 var(--dsp);font-variant-numeric:tabular-nums}
.perf-rows{display:flex;gap:clamp(16px,2vw,30px);margin:0 0 0 auto}
.perf-rows div{display:grid;gap:6px}
.perf-rows dt{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--r-mute);white-space:nowrap}
.perf-rows dd{margin:0;font:600 15px/1 var(--sans);font-variant-numeric:tabular-nums}

/* the first order */
.toast{position:absolute;right:18px;top:calc(50% - min(28vh,280px) + 40px);z-index:4;display:flex;align-items:center;gap:12px;padding:12px 16px 12px 12px;border-radius:14px;background:rgba(14,14,16,.92);border:1px solid rgba(255,255,255,.14);box-shadow:0 30px 60px -10px rgba(0,0,0,.8);font-size:13px;opacity:var(--t,0);transform:translateY(calc((1 - var(--t,0)) * -16px)) scale(calc(.96 + var(--t,0) * .04));pointer-events:none}
.toast-i{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;background:#95bf47;color:#0b1514;flex:none}
.toast b{display:block;font-weight:600;margin-bottom:3px}
.toast span{color:#a5a5a8}
.toast em{align-self:flex-start;font-style:normal;font-size:11px;color:var(--r-mute);margin-left:6px}

/* ---------- 03 3D & MOTION ---------- */
.th{place-items:center}
.th-seq,.th-film{position:absolute;inset:0;display:grid;place-items:center;will-change:transform,opacity}
.th-cv,.th-fb{width:min(100%,80vh);aspect-ratio:1;display:block}
.th-fb{display:none;place-items:center;background:radial-gradient(circle at 50% 46%,rgba(216,162,58,.16),transparent 58%)}
.th.nofr .th-cv{display:none}.th.nofr .th-fb{display:grid}
.btl-xl{--bh:78%;--bb:11%}
.th-fb .b-part{transform-box:fill-box;will-change:transform}
.th-hud{position:absolute;top:9vh;right:0;display:grid;gap:8px;justify-items:end;font:600 12px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--r-mute)}
.th-f b{color:#fff;font-weight:600;font-variant-numeric:tabular-nums}
.th-tl{position:absolute;left:8%;right:8%;bottom:4vh;height:1px;background:rgba(255,255,255,.18)}
.th-tl b{position:absolute;top:-4px;width:9px;height:9px;margin-left:-4.5px;background:#000;border:1px solid rgba(255,255,255,.55);transform:rotate(45deg)}
.th-tl b.on{background:var(--r-red);border-color:var(--r-red)}
.th-head{position:absolute;top:-10px;bottom:-10px;width:1px;background:var(--r-red);left:var(--ph,0%);box-shadow:0 0 12px rgba(241,0,0,.8)}
.th-film{opacity:0;visibility:hidden;align-content:center;gap:14px}
.ph{position:relative;height:min(72vh,700px);aspect-ratio:9/18.6;padding:9px;border-radius:46px;background:linear-gradient(150deg,#3a3a3f 0%,#121214 22%,#0a0a0b 60%,#26262a 100%);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.16),inset 0 0 0 4px #050505,0 70px 140px -20px rgba(0,0,0,.9),0 0 160px rgba(216,162,58,.14)}
.ph video,.ff{position:absolute;inset:9px;width:calc(100% - 18px);height:calc(100% - 18px);border-radius:37px;object-fit:cover;background:#0b1514}
.ff{display:none;overflow:hidden}
.th.nofilm .ff{display:block}.th.nofilm .ph video{display:none}
.ff-sun{position:absolute;left:58%;top:calc(30% + (1 - var(--fp,0)) * 12%);width:30%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#ffe7a8 0 40%,rgba(255,214,120,.4) 41% 60%,transparent 61%);opacity:.9}
.ff-sea{position:absolute;left:0;right:0;bottom:0;height:34%;background:linear-gradient(180deg,#2c4d4b,#0b1514);box-shadow:0 -1px 0 rgba(255,231,168,.5)}
.ff .btl{position:absolute;left:50%;bottom:16%;height:44%;transform:translateX(-50%) scale(calc(1 + var(--fp,0) * .14));transform-origin:50% 100%}
.ff-w{position:absolute;left:0;right:0;top:12%;text-align:center;font:300 clamp(30px,4.4vh,44px)/1 var(--brand);font-variation-settings:"opsz" 144;color:var(--a-cream)}
.ff-w span{display:inline-block;opacity:calc(var(--fp,0) * 4 - 1);transform:translateY(calc((1 - min(1, var(--fp,0) * 3)) * 16px))}
.ff-w span+span{opacity:calc(var(--fp,0) * 4 - 2)}
.ff-petals b{position:absolute;width:9px;height:16px;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;background:#f6e7b0;opacity:.9;left:var(--x);top:calc(var(--y) + var(--fp,0) * 40%);transform:rotate(calc(var(--r) + var(--fp,0) * 220deg))}
.ff-petals b:nth-child(1){--x:14%;--y:4%;--r:20deg}.ff-petals b:nth-child(2){--x:72%;--y:-6%;--r:-30deg}.ff-petals b:nth-child(3){--x:40%;--y:10%;--r:60deg}.ff-petals b:nth-child(4){--x:86%;--y:18%;--r:-80deg}.ff-petals b:nth-child(5){--x:24%;--y:26%;--r:10deg}
.reel{position:absolute;inset:9px;border-radius:37px;overflow:hidden;pointer-events:none;color:#fff;background:linear-gradient(180deg,transparent 64%,rgba(0,0,0,.55))}
.reel-r{position:absolute;right:12px;bottom:92px;display:grid;gap:16px;justify-items:center}
.reel-r span{display:grid;justify-items:center;gap:4px;font:600 11px/1 var(--sans);font-variant-numeric:tabular-nums}
.reel-r span:first-child svg{color:#ff3b4a}
.reel-b{position:absolute;left:16px;right:60px;bottom:22px;display:grid;gap:6px;font-size:12.5px}
.reel-who{display:flex;align-items:center;gap:6px;font-weight:600}
.reel-who svg{color:var(--a-gold)}
.reel-v{font-size:11px;color:rgba(255,255,255,.75)}
.reel-v b{color:#fff;font-variant-numeric:tabular-nums}
.film-cap{margin:0;font-size:12px;color:var(--r-mute);text-align:center}
.film-cap b{font:600 11px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:#fff;margin-right:8px}

/* ---------- 04 GROWTH ---------- */
.gr{display:block}
.g-scene{position:absolute;inset:0;display:grid;align-content:center;will-change:transform,opacity}
.g-find{grid-template-columns:1.12fr .88fr;gap:18px;align-items:center}
.g-panel{position:relative;min-width:0;background:#0b0b0d;border:1px solid var(--r-line);border-radius:18px;padding:20px;box-shadow:0 50px 100px -30px rgba(0,0,0,.9)}
.g-head{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.g-brand{font:600 15px/1 var(--sans);letter-spacing:-.01em;flex:none}
.g-q{flex:1;min-width:0;display:flex;align-items:center;height:40px;padding:0 16px;border-radius:99px;background:#18181b;border:1px solid rgba(255,255,255,.08);font-size:14px;color:#fff;white-space:nowrap;overflow:hidden}
.g-typed{font-style:normal}
.g-caret{width:1.5px;height:17px;background:#fff;margin-left:2px;animation:gcar 1s steps(1) infinite}
@keyframes gcar{50%{opacity:0}}
.g-rank{display:flex;justify-content:space-between;align-items:center;padding:0 4px 10px;font:600 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--r-mute)}
.g-pos{font:400 30px/1 var(--dsp);letter-spacing:.02em;color:var(--r-red);font-variant-numeric:tabular-nums}
.g-results{--rh:clamp(52px,6.8vh,64px);position:relative;height:calc(var(--rh) * 7);margin:0;padding:0;list-style:none}
.g-results li{position:absolute;left:0;right:0;top:0;height:calc(var(--rh) - 4px);display:grid;align-content:center;gap:3px;padding:0 12px;border-radius:10px;transform:translateY(calc(var(--y,0) * var(--rh)));transition:transform .9s cubic-bezier(.65,0,.2,1),opacity .5s,background .5s;overflow:hidden}
.g-results cite{font-style:normal;font-size:11.5px;line-height:1;color:#7d7d80}
.g-results b{font:500 15px/1.2 var(--sans);color:#c9c9cc;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.g-results span{font-size:12.5px;line-height:1.2;color:#808083;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.g-results li.dim{opacity:.45}
.g-us{background:rgba(241,0,0,.08);box-shadow:inset 0 0 0 1px rgba(241,0,0,.45);z-index:2}
.g-results .g-us b{color:#fff}
.g-results .g-us cite{color:var(--r-red)}
.g-results .g-us.top{background:rgba(241,0,0,.14);box-shadow:inset 0 0 0 1px var(--r-red),0 0 40px rgba(241,0,0,.25)}
.g-src{margin-left:auto;font-size:12px;color:var(--r-mute);white-space:nowrap}
.g-src b{color:#fff;font-weight:600;font-variant-numeric:tabular-nums}
.g-ask{width:fit-content;max-width:88%;margin:0 0 18px auto;padding:12px 16px;border-radius:18px 18px 4px 18px;background:#1b1b1e;font-size:14px;line-height:1.4;color:#fff}
.g-ans{min-height:12em}
.g-out{margin:0;font-size:15px;line-height:1.6;color:#d4d4d6}
.g-out mark{background:none;color:#fff;font-weight:600;box-shadow:inset 0 -2px 0 var(--r-red)}
.g-out .cur{display:inline-block;width:8px;height:8px;margin-left:3px;border-radius:50%;background:#fff;vertical-align:1px}
.g-cite{display:inline-flex;align-items:center;gap:8px;margin-top:14px;padding:6px 12px 6px 6px;border:1px solid rgba(241,0,0,.5);border-radius:99px;font-size:12.5px;color:#fff;opacity:var(--co,0);transform:translateY(calc((1 - var(--co,0)) * 8px))}
.g-cite i{width:18px;height:18px;border-radius:50%;background:var(--r-red);font:700 10px/18px var(--sans);text-align:center;font-style:normal}
.g-sheet{justify-items:center}
.xl{width:100%;max-width:860px;background:#0b0b0d;border:1px solid var(--r-line);border-radius:18px;overflow:hidden;box-shadow:0 50px 100px -30px rgba(0,0,0,.9)}
.xl-top{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 16px;background:#121214;border-bottom:1px solid var(--r-line);font-size:13px}
.xl-file{display:flex;align-items:center;gap:9px;font-weight:500}
.xl-file::before{content:"X";width:18px;height:18px;border-radius:4px;background:var(--r-red);color:#fff;font:700 11px/18px var(--sans);text-align:center}
.xl-note{color:var(--r-mute);font-size:12px}
.xl-fx{display:flex;align-items:center;gap:14px;padding:8px 16px;border-bottom:1px solid var(--r-line);font:500 13px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace}
.xl-ref{width:36px;color:#fff;padding-right:12px;border-right:1px solid var(--r-line)}
.xl-fx i{color:var(--r-mute)}
.xl-formula{color:#fff}
.xl-grid{position:relative;display:grid;grid-template-columns:38px 1.7fr 1fr 1fr 1fr;font-size:14px}
.xl-c{padding:11px 14px;border-right:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#d8d8da}
.xl-col,.xl-row,.xl-corner{background:#131315;color:#6d6d70;font-size:11px;text-align:center;padding:6px 0}
.xl-th{color:var(--r-mute);font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.xl-n{text-align:right;font-variant-numeric:tabular-nums}
.xl-d{color:var(--r-red);font-weight:600}
.xl-c.hit{background:rgba(241,0,0,.10);color:#fff}
.xl-sel{position:absolute;left:0;top:0;width:0;height:0;border:2px solid var(--r-red);box-shadow:0 0 18px rgba(241,0,0,.4);pointer-events:none;opacity:0;transition:transform .45s cubic-bezier(.16,1,.3,1),width .45s,height .45s,opacity .3s}
.xl-sel::after{content:"";position:absolute;right:-4px;bottom:-4px;width:6px;height:6px;background:var(--r-red);border:1px solid #000}
.xl-chart{display:grid;grid-template-columns:auto 1fr;align-items:end;gap:20px;padding:16px;border-top:1px solid var(--r-line)}
.xl-ct{font:600 11px/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--r-mute);max-width:12ch}
.xl-bars{display:flex;align-items:flex-end;gap:6px;height:clamp(60px,10vh,96px)}
.xl-bars i{flex:1;height:calc(var(--h) * var(--g,0) * 1%);min-height:2px;border-radius:3px 3px 0 0;background:linear-gradient(var(--r-red),rgba(241,0,0,.3))}
/* the summit */
.g-top{place-content:center;justify-items:center;text-align:center;gap:clamp(10px,2vh,24px)}
.gt-k{margin:0;font:600 12px/1.4 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--r-mute)}
.gt-n{margin:0;display:flex;align-items:flex-start;font:400 clamp(200px,40vh,420px)/.78 var(--dsp);color:var(--r-red);text-shadow:0 0 120px rgba(241,0,0,.35)}
.gt-n span{font-size:.42em;line-height:1;margin:.06em .04em 0 0}
.gt-n b{font-weight:400;display:inline-block;transform:scale(calc(.6 + var(--tp,1) * .4));opacity:var(--tp,1)}
.gt-stats{display:flex;gap:clamp(20px,4vw,64px);margin:0}
.gt-stats div{display:grid;gap:8px}
.gt-stats dt{font:600 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--r-mute)}
.gt-stats dd{margin:0;font:400 clamp(30px,3.4vw,52px)/.9 var(--dsp);font-variant-numeric:tabular-nums}


/* no JS: the tracks collapse and every stage shows its finished state */
html:not(.js) .ch{height:auto}
html:not(.js) .ch-stage{position:relative;height:auto;min-height:100vh;padding-block:12vh}
html:not(.js) .ch-card,html:not(.js) .hud,html:not(.js) .g-find,html:not(.js) .g-sheet,html:not(.js) .th-seq,html:not(.js) .dz-logo,html:not(.js) .dz-sys{display:none}
html:not(.js) .th,html:not(.js) .toast{display:none}

/* ---------- phones ---------- */
@media (max-width:900px){
  .ch[data-ch=design]{--len:380vh}.ch[data-ch=build]{--len:280vh}.ch[data-ch=three]{--len:380vh}.ch[data-ch=growth]{--len:460vh}
  .ch-stage{grid-template-columns:1fr;grid-template-rows:auto 1fr;align-items:start;gap:0;padding:max(70px,9vh) var(--pad) 66px}
  .ch-meta{margin-bottom:10px}
  .ch-t{font-size:clamp(48px,13vw,72px)}
  .ch-p{margin:8px 0 0;font-size:15px}
  .ch-list,.ch-link,.ch-try{display:none}
  .ch-steps,.gr-fixes{display:flex;flex-wrap:wrap;gap:6px;border:0;margin-top:12px}
  .ch-steps li,.gr-fixes li{display:none;border:1px solid var(--r-line);border-radius:99px;padding:6px 10px;font-size:12px}
  .ch-steps li.on,.gr-fixes li.on{display:block;padding-left:10px;box-shadow:none;border-color:var(--r-red);color:#fff}
  .ch-steps li b{margin-right:6px}.ch-steps li em{display:none}.ch-steps li span{font-size:12px}
  .ch-vis{min-height:0}
  .hud-in{top:calc(100vh - 54px);top:calc(100svh - 54px);height:38px;padding:0 14px;gap:12px}
  .hud-brand,.hud-track em{display:none}
  .cv{height:min(56vh,520px)}
  .cv-body{grid-template-columns:1fr}
  .cv-layers,.cv-props,.cv-tool{display:none}
  .cv-cur b{display:none}
  .bd{padding-top:14px;gap:10px;align-content:start}
  .br-top{height:40px}.br-tab{font-size:12px;padding:0 10px;gap:6px}.br-tab em{display:none}.br-nav{display:none}
  .br-view{height:min(48vh,440px)}
  .perf{gap:14px;padding:10px 14px}.perf-h,.perf-rows div:nth-child(2){display:none}
  .perf-ms{font-size:30px}.perf-ring{width:36px;height:36px}
  .toast{top:64px;right:10px;left:10px}
  .th-cv,.th-fb{width:min(100%,52vh)}
  .th-hud{top:1vh}
  .th-tl{bottom:2vh}
  .ph{height:min(54vh,520px)}
  .g-scene{padding:12px 0 8px}
  .g-find{grid-template-columns:1fr}
  .g-serp,.g-ai{grid-area:1/1;will-change:transform,opacity}
  .g-panel{padding:14px;border-radius:16px}
  .g-results{--rh:clamp(46px,6.4vh,56px)}
  .g-results b{font-size:13.5px}.g-results span{font-size:11.5px}
  .g-out{font-size:14px}
  .xl-grid{grid-template-columns:24px 1.5fr 1fr 1fr .9fr;font-size:12px}
  .xl-c{padding:9px 7px}
  .xl-grid>.xl-c:nth-child(5n+2){white-space:normal;line-height:1.25}
  .xl-th{letter-spacing:.02em;font-size:10px}
  .xl-top{padding:10px 12px}.xl-note{font-size:11px}
  .xl-chart{grid-template-columns:1fr;gap:8px;padding:12px}
  .gt-n{font-size:clamp(160px,30vh,260px)}
  .gt-stats{flex-direction:column;gap:14px}
}
@media (prefers-reduced-motion:reduce){.ch-try::before,.g-caret{animation:none}.b-in,.g-results li,.xl-sel,.q-res.swap .q-art .btl,.q-res.swap .q-txt{transition:none;animation:none}}

/* ---------- services as a sticky index: one title and counter pinned for the whole run,
   copy on the left, the live demo on the right. Phones: title on top, demo, then copy ---------- */
.ch[data-ch=design]{--len:260vh}.ch[data-ch=build]{--len:220vh}.ch[data-ch=three]{--len:280vh}.ch[data-ch=growth]{--len:320vh}
.sv-pin{position:sticky;top:0;z-index:4;height:100vh;height:100svh;margin-bottom:-100vh;margin-bottom:-100svh;pointer-events:none}
.sv-pin .sv-t{position:absolute;left:var(--pad);top:9vh;height:.9em;margin:0;white-space:nowrap}
.sv-t>span{position:absolute;left:0;top:0;opacity:0;transform:translateY(.3em);transition:opacity .45s,transform .7s cubic-bezier(.16,1,.3,1)}
.sv-t>span.on{opacity:1;transform:none}
.sv-t em{font-style:normal}.sv-t .sv-s{display:none}
.sv-n{position:absolute;left:var(--pad);bottom:7vh;margin:0;display:flex;align-items:center;gap:18px;font:400 15px/1 var(--sans);color:var(--mute)}
.sv-n b{min-width:1ch;font-weight:400;color:#fff}
.sv-n>i{position:relative;width:110px;height:1px;background:rgba(255,255,255,.22)}
.sv-n>i>i{position:absolute;inset:0;background:#fff;transform:scaleX(0);transform-origin:left}
.ch-stage{padding-bottom:0}
.ch-copy{align-self:center;padding-top:6vh}
.ch-t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ch-p{margin:0;max-width:34ch;font-size:clamp(15px,1.1vw,17px);line-height:1.6;color:#d6d6d6}
.story .ch-copy .tools{margin:34px 0 0;border:0}
.story .ch-copy .tools li{display:block;padding:0;border:0;box-shadow:none;color:var(--mute);font-size:inherit;line-height:inherit;transition:color .4s}
.story .ch-copy .tools li.on,.story .ch-copy .tools li.done{padding-left:0;color:#fff}
.story .ch-copy .tools b,.story .ch-copy .tools em{display:none}
.story .ch-copy .tools span{font-size:inherit;line-height:inherit}
.ch-link{margin-top:30px;font-size:14px;color:var(--mute)}
@media (max-width:900px){
  .ch[data-ch=design]{--len:240vh}.ch[data-ch=build]{--len:200vh}.ch[data-ch=three]{--len:260vh}.ch[data-ch=growth]{--len:300vh}
  .sv-pin .sv-t{top:max(64px,8vh);font-size:clamp(56px,16vw,96px)}
  .sv-t .sv-l{display:none}.sv-t .sv-s{display:inline}
  .sv-n{display:none}
  .ch-stage{grid-template-rows:1fr auto;align-items:stretch;padding:calc(max(64px,8vh) + 11vw) var(--pad) 4vh}
  .ch-vis{order:1}
  .ch-copy{order:2;align-self:end;padding-top:14px}
  .ch-p{max-width:none;font-size:14px}
  .story .ch-copy .tools{display:flex;flex-wrap:wrap;gap:0 14px;margin-top:10px;font-size:14px;line-height:1.6}
}
@media (prefers-reduced-motion:reduce){.sv-t>span{transition:none}}