/* Artventory section kit — shared tokens, chrome and every section's A/B styles.
   Motion contract: the engine writes --p (0..1 scroll progress) on [data-pin]/[data-prog],
   --i/--n on children of [data-idx]/[data-steps], --l per step, --q per stacked card,
   --fx/--fy on [data-follow], --sx/--sy on [data-spot], --skew/--vel on .av. */
@property --rr{syntax:'<length>';inherits:false;initial-value:0px}
@property --ang{syntax:'<angle>';inherits:false;initial-value:0deg}
:root{--ink:#0B0B0D;--ink2:#16161A;--ink3:#202026;--paper:#EEEDE8;--paper2:#E2E1DB;--card:#F7F6F2;--blue:#1E32F5;--blue-d:#1324C9;--blue-l:#A3ADFF;--red:#E8232B;--yel:#FFCF3F;--mi:#93939A;--mp:#5E5E65;--fd:'Bricolage Grotesque','Helvetica Neue',Arial,sans-serif;--fs:'Instrument Serif',Georgia,'Times New Roman',serif;--fb:'Geist','Helvetica Neue',Arial,sans-serif;--fm:'Geist Mono',ui-monospace,Menlo,monospace;--ez:cubic-bezier(.16,1,.3,1);--io:cubic-bezier(.76,0,.24,1);--g:clamp(16px,4vw,64px)}
html,body{margin:0;background:#0B0B0D}
.av{position:relative;background:var(--ink);color:var(--paper);font-family:var(--fb);overflow-x:clip;-webkit-font-smoothing:antialiased;--skew:0}
.av *{box-sizing:border-box}
.av a{color:inherit;text-decoration:none}
.av ::selection{background:var(--blue);color:#fff}
.av :focus-visible{outline:2px solid var(--blue-l);outline-offset:4px;border-radius:6px}
.av h1,.av h2,.av h3,.av p,.av figure,.av blockquote,.av ul{margin:0;padding:0}
.av li{list-style:none}
.av img{max-width:100%}
.lbl{font-family:var(--fm);font-size:12px;letter-spacing:.06em;text-transform:uppercase;font-weight:400}
.mi{color:var(--mi)}.mp{color:var(--mp)}.mb{color:rgba(255,255,255,.76)}
.ser{font-family:var(--fs);font-style:italic;font-weight:400;letter-spacing:-.02em}
.blue-l{color:var(--blue-l)}.red{color:var(--red)}
.h2{font-family:var(--fd);font-weight:600;font-size:clamp(38px,5.4vw,88px);line-height:.96;letter-spacing:-.045em;text-wrap:balance}
.h3{font-family:var(--fd);font-weight:600;font-size:clamp(26px,2.6vw,40px);line-height:1;letter-spacing:-.035em}
.lead{font-size:18px;line-height:1.5;max-width:440px}
.head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:32px}
.head>div{display:flex;flex-direction:column;gap:22px}
.inv{filter:invert(1)}

/* reveal (armed only while live-scrolling) */
.ml{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
.ml>span{display:block}
html.av-live .ml>span{transform:translate3d(0,112%,0) rotate(3deg);transform-origin:0 0;transition:transform 1.3s var(--ez)}
html.av-live .ml.in>span{transform:none}
html.av-live [data-r]{opacity:0;transform:translate3d(0,44px,0);transition:opacity 1s var(--ez),transform 1.2s var(--ez)}
html.av-live [data-r].in{opacity:1;transform:none}
html.av-live [data-r="clip"]{opacity:1;transform:none;clip-path:inset(100% 0 0 0);transition:clip-path 1.4s var(--ez)}
html.av-live [data-r="clip"].in{clip-path:inset(0 0 0 0)}
html.av-live [data-r="zoom"]{transform:scale(.86) translate3d(0,40px,0)}

/* pins + scroll room */
.pin{position:relative}
.pin-in{position:relative;overflow:hidden}
html.av-live .pin-in{position:sticky;top:0;min-height:0!important}
.sp{display:none}
html.av-live .sp{display:flex;height:58vh;justify-content:space-between;align-items:flex-end;gap:16px;padding:0 var(--g) 36px;background:#0B0B0D;color:#6f6f77;font-family:var(--fm);font-size:12px;letter-spacing:.06em;text-transform:uppercase}
html.av-live .sp.end{align-items:flex-start;padding:36px var(--g) 0}

/* buttons + micro-interactions */
.btn{position:relative;display:inline-flex;align-items:center;gap:14px;height:56px;padding:0 8px 0 24px;border-radius:999px;font-family:var(--fb);font-weight:500;font-size:16px;overflow:hidden;isolation:isolate;border:0;cursor:pointer;white-space:nowrap;transition:color .5s var(--ez)}
.btn .bi{display:inline-flex;width:40px;height:40px;border-radius:999px;align-items:center;justify-content:center;transition:transform .6s var(--ez),background .5s,color .5s;font-size:15px}
.btn::before{content:'';position:absolute;left:50%;top:105%;width:150%;aspect-ratio:1;border-radius:50%;transform:translateX(-50%);transition:top .7s var(--ez);z-index:-1}
.btn:hover::before{top:-25%}
.btn:hover .bi{transform:rotate(45deg)}
.btn-blue{background:var(--blue);color:#fff}.btn-blue .bi{background:#fff;color:var(--blue)}.btn-blue::before{background:var(--paper)}.btn-blue:hover{color:var(--ink)}.btn-blue:hover .bi{background:var(--ink);color:#fff}
.btn-paper{background:var(--paper);color:var(--ink)}.btn-paper .bi{background:var(--ink);color:var(--paper)}.btn-paper::before{background:var(--blue)}.btn-paper:hover{color:#fff}.btn-paper:hover .bi{background:#fff;color:var(--blue)}
.btn-ink{background:var(--ink);color:var(--paper)}.btn-ink .bi{background:var(--paper);color:var(--ink)}.btn-ink::before{background:var(--blue)}.btn-ink:hover{color:#fff}
.btn-ghost{background:transparent;color:inherit;box-shadow:inset 0 0 0 1px rgba(238,237,232,.3);padding:0 24px}.btn-ghost::before{background:var(--paper)}.btn-ghost:hover{color:var(--ink)}
.roll{display:inline-flex;overflow:hidden;position:relative;height:1.25em;line-height:1.25em;vertical-align:bottom}
.roll>span{display:block;transition:transform .55s var(--ez)}
.roll>span+span{position:absolute;left:0;top:100%}
a:hover .roll>span,button:hover .roll>span{transform:translateY(-100%)}
.ul{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .6s var(--ez);padding-bottom:2px}
.ul:hover,a:hover .ul{background-size:100% 1px}
[data-mag]{transition:transform .6s var(--ez)}
.spot{position:relative;isolation:isolate}
.spot::after{content:'';position:absolute;inset:0;border-radius:inherit;background:radial-gradient(460px circle at var(--sx,50%) var(--sy,50%),rgba(30,50,245,.36),rgba(30,50,245,0) 62%);opacity:0;transition:opacity .45s;pointer-events:none;z-index:2}
.spot:hover::after{opacity:1}
[data-tilt]{transition:transform .7s var(--ez)}

/* chrome */
.grain{position:fixed;inset:-50%;z-index:90;pointer-events:none;opacity:.055;animation:gr 1s steps(4) infinite}
@keyframes gr{0%{transform:translate(0,0)}25%{transform:translate(-4%,3%)}50%{transform:translate(3%,-5%)}75%{transform:translate(-2%,4%)}100%{transform:translate(0,0)}}
.cur{display:none}
html.av-cur .cur{display:block}
html.av-cur .av,html.av-cur .av a,html.av-cur .av button{cursor:none}
.cur-dot,.cur-ring{position:fixed;left:0;top:0;z-index:120;pointer-events:none;border-radius:50%}
.cur-dot{width:8px;height:8px;margin:-4px 0 0 -4px;background:#fff;mix-blend-mode:difference;transition:opacity .2s}
.cur-ring{width:44px;height:44px;margin:-22px 0 0 -22px;box-shadow:inset 0 0 0 1px #fff;mix-blend-mode:difference;display:flex;align-items:center;justify-content:center;transition:width .45s var(--ez),height .45s var(--ez),margin .45s var(--ez),background .35s}
.cur.is-link .cur-ring{width:76px;height:76px;margin:-38px 0 0 -38px;background:#fff}
.cur.is-lbl .cur-ring{width:108px;height:108px;margin:-54px 0 0 -54px;background:var(--blue);box-shadow:none;mix-blend-mode:normal}
.cur-lbl{font-family:var(--fm);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#fff;opacity:0;transition:opacity .25s}
.cur.is-lbl .cur-lbl{opacity:1}.cur.is-lbl .cur-dot{opacity:0}
.prog{position:fixed;left:0;right:0;top:0;height:2px;z-index:60;pointer-events:none}
.prog i{display:block;height:100%;background:var(--blue);transform-origin:0 50%;transform:scaleX(0)}
.nav{position:fixed;left:0;right:0;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px var(--g);color:var(--paper);transition:transform .7s var(--ez),color .5s}
.nav.hide{transform:translateY(-120%)}
.nav-logo{height:22px;width:auto;display:block}
.nav-links{display:flex;gap:30px;font-size:15px;align-items:center}
.nav-cta{display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 20px;border-radius:999px;box-shadow:inset 0 0 0 1px currentColor;font-size:15px;transition:background .4s,color .4s,box-shadow .4s}
.nav-cta:hover{background:var(--blue);color:#fff;box-shadow:inset 0 0 0 1px var(--blue)}
@media (max-width:860px){.nav-links .nl{display:none}}
.pre{display:none;position:fixed;inset:0;z-index:200;background:var(--ink);color:var(--paper);flex-direction:column;justify-content:space-between;padding:28px var(--g);transition:transform 1.15s var(--io),border-radius 1.15s var(--io)}
html.av-live .pre{display:flex}
html.av-loaded .pre{transform:translateY(-102%);border-radius:0 0 50% 50%/0 0 22vh 22vh}
html.av-done .pre{display:none}
.pre-row{display:flex;justify-content:space-between;align-items:flex-end;gap:24px}
.pre-mark{align-self:center;width:78px;height:auto}
.pre-mark path{fill:transparent;stroke:#fff;stroke-width:.45;stroke-dasharray:130;stroke-dashoffset:130;animation:pm 1.6s var(--ez) .1s forwards}
@keyframes pm{70%{stroke-dashoffset:0;fill:transparent}100%{stroke-dashoffset:0;fill:#fff}}
.pre-num{font-family:var(--fd);font-weight:700;font-size:clamp(88px,17vw,240px);letter-spacing:-.05em;line-height:.78;font-variant-numeric:tabular-nums}
.pre-bar{flex:1;height:1px;background:rgba(255,255,255,.16);margin-bottom:22px}
.pre-bar i{display:block;height:1px;background:#fff;transform-origin:0 50%;transform:scaleX(0)}
.fx-cv{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.badge{position:relative;width:140px;height:140px;border-radius:50%;background:var(--blue);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:30px;flex:0 0 auto}
.badge svg{position:absolute;inset:0;width:100%;height:100%;animation:spin 16s linear infinite}
.badge:hover svg{animation-duration:5s}
@keyframes spin{to{transform:rotate(360deg)}}
.scroll-ind{display:flex;flex-direction:column;align-items:center;gap:12px;color:#B9B8B2}
.scroll-ind i{width:1px;height:60px;background:linear-gradient(#fff,#fff) 0 -40%/1px 40% no-repeat,rgba(255,255,255,.18);animation:sl 2s var(--ez) infinite}
@keyframes sl{0%{background-position:0 -40%}100%{background-position:0 160%}}
.ctr{font-family:var(--fd);font-weight:700;font-size:clamp(56px,7vw,112px);line-height:.8;letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.ctr small{font-size:.3em;letter-spacing:0;font-weight:500;margin-left:6px;opacity:.55}
.bar{height:2px;background:rgba(127,127,135,.25);position:relative;overflow:hidden}
.bar i{position:absolute;inset:0;background:currentColor;transform-origin:0 50%;transform:scaleX(var(--p,0))}

/* shared art plates (gradient compositions) */
.pl1{background:conic-gradient(from 200deg at 35% 70%,#1E32F5,#8f9cff,#EEEDE8,#FFCF3F,#1E32F5)}
.pl2{background:radial-gradient(circle at 50% 115%,#1E32F5 0 16%,rgba(30,50,245,0) 16.5%),repeating-radial-gradient(circle at 50% 115%,#0B0B0D 0 22px,#25252b 22px 44px)}
.pl3{background:radial-gradient(circle at 70% 30%,#0B0B0D 0 24%,rgba(0,0,0,0) 24.5%),linear-gradient(135deg,#FFCF3F 0 52%,#EEEDE8 52% 100%)}
.pl4{background:radial-gradient(circle at 50% 85%,#ffd06b 0,#E8232B 34%,#3a0808 78%)}
.pl5{background:radial-gradient(circle at 30% 30%,rgba(238,237,232,.95) 0 18%,rgba(238,237,232,0) 18.5%),repeating-linear-gradient(90deg,#1E32F5 0 24px,#3245ff 24px 48px)}
.pl6{background:radial-gradient(circle at 62% 46%,#0B0B0D 0 30%,rgba(0,0,0,0) 30.5%),linear-gradient(180deg,#d9d6cc,#8d8a80)}
.pl7{background:radial-gradient(circle at 28% 32%,#ff8a5b 0 22%,rgba(255,138,91,0) 22.5%),radial-gradient(circle at 70% 72%,#2d6a4f 0 30%,rgba(45,106,79,0) 30.5%),#f4e9d8}
.pl8{background:linear-gradient(180deg,#9cc6ff 0 56%,#1b263b 56% 100%)}
.plate{position:relative;overflow:hidden}
.plate>.pn{position:absolute;left:14px;top:12px;font-family:var(--fm);font-size:10px;letter-spacing:.1em;color:rgba(255,255,255,.92);white-space:nowrap;mix-blend-mode:difference}

/* arc tiles (logo language) */
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;aspect-ratio:1}
.tiles.t2{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.t{transition:transform 1s var(--ez),border-radius 1s var(--ez)}
.t.b{background:var(--blue)}.t.i{background:var(--ink)}.t.e{box-shadow:inset 0 0 0 1.5px currentColor}.t.w{background:var(--paper)}.t.r{background:var(--red)}.t.y{background:var(--yel)}
.q0{border-radius:100% 0 0 0}.q1{border-radius:0 100% 0 0}.q2{border-radius:0 0 100% 0}.q3{border-radius:0 0 0 100%}.c{border-radius:50%}.s{border-radius:6px}.h{border-radius:100% 100% 0 0}
.spin-host:hover .t:nth-child(3n+1){transform:rotate(90deg)}.spin-host:hover .t:nth-child(3n+2){transform:rotate(-90deg)}.spin-host:hover .t:nth-child(3n){transform:rotate(180deg)}
.t:nth-child(2){transition-delay:.04s}.t:nth-child(3){transition-delay:.08s}.t:nth-child(4){transition-delay:.12s}.t:nth-child(5){transition-delay:.16s}.t:nth-child(6){transition-delay:.2s}.t:nth-child(7){transition-delay:.24s}.t:nth-child(8){transition-delay:.28s}.t:nth-child(9){transition-delay:.32s}

/* ============ 01 HERO A — lens reveal ============ */
.h-a{position:relative;min-height:920px;display:flex;flex-direction:column;justify-content:space-between;gap:40px;padding:120px var(--g) 44px;overflow:hidden;background:var(--ink)}
html.av-live .h-a{min-height:100vh}
.h-a>.ha-top,.h-a>.ha-stack,.h-a>.ha-foot{position:relative;z-index:1}
.ha-glow{position:absolute;left:0;top:0;width:640px;height:640px;margin:-320px 0 0 -320px;border-radius:50%;background:radial-gradient(circle,rgba(30,50,245,.6),rgba(30,50,245,0) 66%);pointer-events:none;z-index:0;transform:translate3d(var(--fx,70vw),var(--fy,30vh),0)}
.ha-top{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:#B9B8B2}
.ha-stack{position:relative;transform-origin:18% 70%;transform:translate3d(0,calc(var(--p,0) * -140px),0) scale(calc(1 + var(--p,0) * .08));filter:blur(calc(var(--p,0) * 14px));opacity:calc(1 - var(--p,0) * .9)}
.ha-title{font-family:var(--fd);font-weight:700;font-size:clamp(60px,11.6vw,200px);line-height:.86;letter-spacing:-.058em}
.ha-title .ser{color:var(--blue-l);font-size:1.08em;letter-spacing:-.035em}
.ha-lens{position:absolute;inset:-20px;padding:20px;background:var(--blue);color:#fff;clip-path:circle(var(--rr) at calc(var(--fx,50%) + 20px) calc(var(--fy,50%) + 20px));transition:--rr .7s var(--ez);pointer-events:none}
.ha-lens .ha-title .ser{color:#fff}
.ha-stack:hover .ha-lens{--rr:180px}
.ha-hint{display:inline-flex;align-items:center;gap:10px;margin-top:22px;color:#8d8d94}
.ha-hint i{width:10px;height:10px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 6px rgba(30,50,245,.25);animation:pulse 2s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 0 12px rgba(30,50,245,0)}}
.ha-foot{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap}
.ha-left{display:flex;flex-direction:column;gap:28px;max-width:460px}
.ha-sub{font-size:19px;line-height:1.45;color:#CFCEC8}
.ha-btns{display:flex;gap:12px;flex-wrap:wrap}

/* ============ 01 HERO B — expanding window ============ */
.h-b .pin-in{min-height:940px;background:var(--ink);--e:clamp(0,calc((var(--p,0) - .06) / .72),1)}
.hb-top{position:absolute;left:var(--g);right:var(--g);top:96px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:#B9B8B2;z-index:3;opacity:calc(1 - var(--e) * 2)}
.hb-w{position:absolute;z-index:3;font-family:var(--fd);font-weight:700;font-size:clamp(58px,10.4vw,186px);line-height:.86;letter-spacing:-.058em;white-space:nowrap;pointer-events:none}
.hb-w1{left:var(--g);top:150px;transform:translate3d(calc(var(--e) * -115%),0,0)}
.hb-w2{right:var(--g);bottom:110px;transform:translate3d(calc(var(--e) * 115%),0,0)}
.hb-w2 .ser{color:var(--blue-l)}
.hb-frame{position:absolute;left:50%;top:50%;width:calc(380px + (100% - 380px) * var(--e));height:calc(240px + (100% - 240px) * var(--e));transform:translate(-50%,-50%) rotate(calc((1 - var(--e)) * -4deg));border-radius:calc(30px * (1 - var(--e)));overflow:hidden;z-index:2;box-shadow:0 40px 120px -20px rgba(30,50,245,.55)}
.hb-aur{position:absolute;inset:-35%;background:conic-gradient(from var(--ang),#1E32F5,#0B0B0D 22%,#A3ADFF 42%,#1E32F5 58%,#090940 78%,#1E32F5);filter:blur(56px);animation:aur 14s linear infinite}
@keyframes aur{to{--ang:360deg}}
.hb-dots{position:absolute;inset:0;background:radial-gradient(rgba(255,255,255,.22) 1px,rgba(255,255,255,0) 1.6px) 0 0/18px 18px;opacity:.6}
.hb-logo{position:absolute;left:50%;top:50%;width:calc(150px + 420px * var(--e));max-width:70%;transform:translate(-50%,-50%)}
.hb-end{position:absolute;left:var(--g);right:var(--g);bottom:48px;z-index:4;display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;--k:clamp(0,calc((var(--p,0) - .74) * 5),1);opacity:var(--k);transform:translate3d(0,calc((1 - var(--k)) * 30px),0)}
.hb-end p{font-family:var(--fd);font-weight:500;font-size:clamp(22px,2.4vw,36px);line-height:1.1;letter-spacing:-.03em;max-width:640px;color:#fff}
.hb-hint{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);z-index:3;opacity:calc(1 - var(--e) * 3)}

/* ============ 02 TAGLINE A — word fill with pills ============ */
.t-a .pin-in{min-height:860px;background:var(--ink);display:flex;flex-direction:column;justify-content:center;gap:56px;padding:120px var(--g)}
.ta-p{font-family:var(--fd);font-weight:600;font-size:clamp(34px,5.2vw,86px);line-height:1.06;letter-spacing:-.045em;max-width:1280px}
.ta-p .w,.ta-p .pill{--o:clamp(0,calc(var(--p,1) * var(--n,1) * 1.32 - var(--i,0) - var(--n,1) * .16),1)}
.ta-p .w{opacity:calc(.13 + .87 * var(--o))}
.ta-p .w.em{font-family:var(--fs);font-style:italic;font-weight:400;letter-spacing:-.02em;color:var(--blue-l)}
.ta-p .pill{display:inline-block;width:1.7em;height:.78em;border-radius:999px;vertical-align:-.02em;margin:0 .18em 0 0;transform:scale(var(--o)) rotate(calc((1 - var(--o)) * -20deg))}
.pill.pa{background:conic-gradient(from 120deg,#1E32F5,#A3ADFF,#1E32F5)}
.pill.pb{background:radial-gradient(circle at 30% 50%,#FFCF3F 0 28%,rgba(0,0,0,0) 29%),#E8232B}
.pill.pc{background:repeating-linear-gradient(90deg,#EEEDE8 0 8px,#1E32F5 8px 16px)}
.ta-foot{display:flex;justify-content:space-between;align-items:center;gap:24px;color:var(--mi)}
.ta-foot .bar{flex:1;max-width:320px;color:var(--paper)}

/* ============ 02 TAGLINE B — one line at a time ============ */
.t-b .pin-in{min-height:860px;background:var(--ink)}
.tb-bg{position:absolute;inset:0;background:var(--blue);clip-path:circle(calc(clamp(0,calc((var(--p,0) - .7) * 4),1) * 75%) at 50% 50%)}
.tb-lines{position:absolute;inset:0;display:grid;place-items:center;padding:0 var(--g)}
.tb-lines>*{grid-area:1/1;text-align:center;font-family:var(--fd);font-weight:600;font-size:clamp(40px,6.6vw,116px);line-height:.98;letter-spacing:-.05em;max-width:1200px;text-wrap:balance;opacity:min(clamp(0,calc(var(--l,0) * 4),1),clamp(0,calc((1 - var(--l,0)) * 4),1));transform:translate3d(0,calc((.5 - var(--l,0)) * 70px),0) scale(calc(1 - max(0,calc(var(--l,0) - .5)) * .12));filter:blur(calc(max(0px,calc((.25 - var(--l,0)) * 40px)) + max(0px,calc((var(--l,0) - .75) * 40px))))}
.tb-lines>.last{opacity:clamp(0,calc(var(--l,0) * 4),1);filter:blur(max(0px,calc((.25 - var(--l,0)) * 40px)));transform:translate3d(0,calc(max(0,calc(.5 - var(--l,0))) * 70px),0)}
.tb-lines .ser{color:var(--blue-l)}
.tb-lines>.last .ser{color:#fff}
.tb-top,.tb-bot{position:absolute;left:var(--g);right:var(--g);display:flex;justify-content:space-between;gap:24px;z-index:2;color:var(--mi)}
.tb-top{top:100px}.tb-bot{bottom:40px;align-items:center}
.tb-steps{display:flex;gap:8px}
.tb-steps>*{width:36px;height:3px;border-radius:3px;background:rgba(255,255,255,.2);transition:background .4s}
.tb-steps>.on{background:#fff}

/* ============ 03 WORK A — editorial gallery ============ */
.w-a{padding:160px var(--g) 170px;background:var(--ink)}
.wa-head{margin-bottom:140px}
.wx-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:start}
.wx-item{display:flex;flex-direction:column;gap:14px;will-change:transform}
.wx-1{grid-column:1 / span 6}.wx-2{grid-column:9 / span 4;margin-top:200px}.wx-3{grid-column:4 / span 6;margin-top:220px}.wx-4{grid-column:1 / span 4;margin-top:340px}.wx-5{grid-column:7 / span 6;margin-top:180px}
.wx-cap{display:flex;flex-direction:column;gap:6px}
.wx-cap .lbl{font-size:11px}
.wx-t{font-size:17px;font-weight:500;letter-spacing:-.01em;color:var(--paper)}
.wx-item:hover .wx-t{background-size:100% 1px}
.wx-frame{position:relative;display:block;overflow:hidden;border-radius:4px;background:#141417;isolation:isolate}
.wx-1 .wx-frame{aspect-ratio:1/.93}.wx-2 .wx-frame{aspect-ratio:1.22/1}.wx-3 .wx-frame{aspect-ratio:16/10}.wx-4 .wx-frame{aspect-ratio:1.3/1}.wx-5 .wx-frame{aspect-ratio:1/.9}
.scene{position:absolute;inset:0;transform-origin:50% 50%}
.wx-frame .scene{transform:scale(calc(1.18 - .18 * min(1,calc(var(--p,1) * 1.8))))}
.wx-meta{display:flex;justify-content:space-between;gap:12px;font-family:var(--fm);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--mi);opacity:0;transform:translateY(-6px);transition:opacity .5s var(--ez),transform .5s var(--ez)}
.wx-item:hover .wx-meta{opacity:1;transform:none}
.wa-foot{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;margin-top:160px;padding-top:28px;box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
@media (max-width:760px){.wx-item{grid-column:1 / -1!important;margin-top:72px}.wx-1{margin-top:0}.wx-meta{opacity:1;transform:none}.wa-head{margin-bottom:72px}}
/* scenes (device mockups built in CSS) */
.mk{position:absolute;transition:transform 1.2s var(--ez)}
.sc-tp{background:radial-gradient(circle at 18% 22%,#3f7a4c 0,rgba(63,122,76,0) 34%),radial-gradient(circle at 84% 78%,#2c5a37 0,rgba(44,90,55,0) 38%),repeating-conic-gradient(from 12deg at 46% 54%,#13281a 0 7deg,#1f4229 7deg 13deg,#163020 13deg 21deg)}
.mk-poster{left:23%;top:13%;width:52%;aspect-ratio:3/4;background:#F3F1EA;color:#0B0B0D;transform:rotate(-15deg);box-shadow:0 50px 70px -10px rgba(0,0,0,.6);padding:7%;display:flex;flex-direction:column;justify-content:space-between}
.mk-blobs{display:flex;gap:8%;align-items:flex-end;height:38%}
.mk-blobs i{display:block;width:26%;background:#0B0B0D;border-radius:60% 40% 55% 45%/55% 60% 40% 45%}
.mk-blobs i:nth-child(1){height:70%}.mk-blobs i:nth-child(2){height:100%;border-radius:50% 50% 10% 50%}.mk-blobs i:nth-child(3){height:55%;background:#E8232B}
.mk-poster small{display:block;font-family:var(--fm);font-size:clamp(7px,.6vw,10px);letter-spacing:.08em;text-transform:uppercase;margin-bottom:6px}
.mk-poster b{display:block;font-family:var(--fd);font-weight:800;font-size:clamp(20px,3vw,48px);line-height:.85;letter-spacing:-.05em;text-transform:uppercase}
a:hover .mk-poster,.hov:hover .mk-poster{transform:rotate(-9deg) translate3d(2%,-4%,0) scale(1.04)}
.sc-ep{background:linear-gradient(180deg,#465147 0,#39443b 64%,#a98b6a 64%,#8d6f52 100%)}
.mk-mon{left:16%;top:9%;width:68%;aspect-ratio:16/10;background:#0d0d0f;border-radius:8px;padding:2.4%;box-shadow:0 30px 50px -10px rgba(0,0,0,.5)}
.mk-mon::after{content:'';position:absolute;left:44%;top:100%;width:12%;height:22%;background:linear-gradient(90deg,#b9b9bd,#e6e6ea,#a4a4a8);clip-path:polygon(20% 0,80% 0,100% 100%,0 100%)}
.mk-scr{position:relative;width:100%;height:100%;border-radius:3px;background:radial-gradient(circle at 80% 20%,rgba(30,50,245,.9),rgba(30,50,245,0) 55%),linear-gradient(140deg,#0d1626,#1a2a6c);color:#fff;display:flex;flex-direction:column;justify-content:flex-end;gap:4px;padding:7%;overflow:hidden}
.mk-scr small{font-family:var(--fm);font-size:clamp(6px,.5vw,9px);letter-spacing:.08em;text-transform:uppercase;opacity:.8}
.mk-scr b{font-family:var(--fd);font-weight:600;font-size:clamp(11px,1.3vw,22px);line-height:.95;letter-spacing:-.04em}
.mk-shield{position:absolute;right:10%;top:14%;width:20%;aspect-ratio:.82;border-radius:50% 50% 46% 46%/22% 22% 78% 78%;box-shadow:inset 0 0 0 2px #fff}
.mk-kb{position:absolute;left:26%;top:80%;width:48%;height:6%;border-radius:3px;background:linear-gradient(180deg,#f0f0f2,#c9c9cd);box-shadow:0 8px 14px rgba(0,0,0,.25)}
a:hover .mk-mon,.hov:hover .mk-mon{transform:translateY(-3%) scale(1.03)}
.sc-fi{background:radial-gradient(rgba(255,255,255,.09) 1.2px,rgba(255,255,255,0) 1.8px) 0 0/16px 16px,radial-gradient(circle at 50% 30%,#2a2a2f,#0b0b0d 72%)}
.mk-ph{width:20%;aspect-ratio:9/19;background:#0e0e10;border-radius:22px;padding:.9%;box-shadow:inset 0 0 0 1.5px #3a3a40,0 40px 60px -10px rgba(0,0,0,.7)}
.mk-ph1{left:30%;top:12%;transform:rotate(-9deg)}.mk-ph2{left:52%;top:20%;transform:rotate(7deg)}
.mk-ps{width:100%;height:100%;border-radius:18px;overflow:hidden;background:#F3F1EA;display:flex;flex-direction:column;gap:7%;padding:10% 9%;color:#0B0B0D}
.mk-ptop{display:block;height:24%;margin:-11% -10% 4%;background:radial-gradient(circle at 70% 120%,#ffd06b,rgba(255,208,107,0) 60%),linear-gradient(160deg,#ff6a1a,#c4161c)}
.mk-ps i{display:block;height:5%;border-radius:4px;background:linear-gradient(90deg,#1fbf6a 0 14%,rgba(11,11,13,.12) 14% 18%,rgba(11,11,13,.12) 18% 100%)}
.mk-ps i:nth-child(4){background:linear-gradient(90deg,#E8232B 0 14%,rgba(11,11,13,.12) 14% 18%,rgba(11,11,13,.12) 18% 100%)}
.mk-ph2 .mk-ps{background:linear-gradient(170deg,#ff6a1a,#c4161c);color:#fff;justify-content:flex-end;gap:5%}
.mk-ok{width:34%;aspect-ratio:1;border-radius:50%;background:#fff;color:#1fbf6a;display:flex;align-items:center;justify-content:center;font-size:clamp(12px,1.4vw,22px);font-weight:700}
.mk-ps b{font-family:var(--fd);font-weight:700;font-size:clamp(10px,1.2vw,19px);line-height:.95;letter-spacing:-.04em}
.mk-ps small{font-family:var(--fm);font-size:clamp(5px,.5vw,8px);opacity:.85}
a:hover .mk-ph1,.hov:hover .mk-ph1{transform:rotate(-13deg) translate3d(-6%,-3%,0)}a:hover .mk-ph2,.hov:hover .mk-ph2{transform:rotate(11deg) translate3d(6%,-5%,0)}
.sc-yours{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);background:repeating-linear-gradient(135deg,rgba(255,255,255,.035) 0 1px,rgba(255,255,255,0) 1px 14px),#101013;transition:background .6s}
.sc-yours .ser{font-size:clamp(36px,4vw,64px);color:var(--paper)}
.sc-yours .lbl{color:var(--blue-l)}
a:hover .sc-yours{background:repeating-linear-gradient(135deg,rgba(255,255,255,.06) 0 1px,rgba(255,255,255,0) 1px 14px),var(--blue)}
a:hover .sc-yours .lbl{color:#fff}
.wx-frame .sc-yours{transform:none}
.sc-ie{background:repeating-linear-gradient(58deg,rgba(0,0,0,0) 0 70px,rgba(255,255,255,.55) 70px 76px,rgba(120,120,126,.6) 76px 84px,rgba(0,0,0,0) 84px 170px),radial-gradient(circle at 28% 18%,#f2f2f4,#a3a3a8 32%,#3a3a3e 66%,#151517)}
.mk-lap{left:17%;top:16%;width:66%;transform:perspective(900px) rotateX(18deg) rotateZ(-16deg);transform-origin:50% 100%}
.mk-lscr{position:relative;aspect-ratio:16/10;background:#0e0e10;border-radius:12px 12px 0 0;padding:2.4%;box-shadow:0 30px 60px -10px rgba(0,0,0,.6)}
.mk-lscr::before{content:'';position:absolute;inset:2.4%;border-radius:4px;background:radial-gradient(circle at 50% 55%,#1E32F5 0 24%,rgba(30,50,245,0) 24.5%),#060608}
.mk-aa{position:absolute;left:50%;top:55%;transform:translate(-50%,-50%);font-family:var(--fs);font-style:italic;font-size:clamp(28px,4.4vw,72px);color:#fff;line-height:1}
.mk-lscr b{position:absolute;left:7%;top:10%;font-family:var(--fd);font-weight:600;font-size:clamp(9px,1vw,16px);line-height:.95;letter-spacing:-.03em;color:#fff}
.mk-lbase{height:7%;min-height:10px;margin:0 -7%;background:linear-gradient(180deg,#e9e9ec,#a9a9ae);border-radius:0 0 14px 14px}
a:hover .mk-lap,.hov:hover .mk-lap{transform:perspective(900px) rotateX(10deg) rotateZ(-10deg) translateY(-3%)}

/* ============ 03 WORK B — horizontal case reel ============ */
.w-b .pin-in{min-height:900px;background:var(--paper);color:var(--ink)}
.wb-head{position:absolute;left:var(--g);right:var(--g);top:100px;display:flex;justify-content:space-between;align-items:flex-end;gap:24px;z-index:3}
.wb-track{position:absolute;left:0;top:250px;bottom:96px;display:flex;gap:28px;padding:0 var(--g);transform:translate3d(calc(var(--p,0) * var(--hx,0px) * -1),0,0);will-change:transform}
.wb-card{flex:0 0 auto;height:100%;aspect-ratio:1.18;display:flex;flex-direction:column;gap:14px;transform:skewX(calc(var(--skew,0) * -1deg))}
.wb-frame{position:relative;flex:1;border-radius:8px;overflow:hidden;display:block}
.wb-frame .scene{transform:scale(1.1) translate3d(calc((var(--p,0) - .5) * -6%),0,0)}
.wb-meta{display:flex;align-items:baseline;gap:16px}
.wb-num{font-family:var(--fd);font-weight:800;font-size:44px;line-height:.8;letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1px var(--ink)}
.wb-meta b{font-family:var(--fd);font-weight:600;font-size:22px;letter-spacing:-.025em}
.wb-meta span{font-size:14px;color:var(--mp);margin-left:auto}
.wb-intro{aspect-ratio:.7;justify-content:space-between;padding:8px 0 0}
.wb-intro p{font-size:18px;line-height:1.5;color:var(--mp);max-width:320px}
.wb-cta .wb-frame{background:var(--blue);color:#fff;display:flex;flex-direction:column;justify-content:space-between;padding:32px}
.wb-cta strong{font-family:var(--fd);font-weight:700;font-size:clamp(48px,5vw,88px);line-height:.88;letter-spacing:-.05em}
.wb-bot{position:absolute;left:var(--g);right:var(--g);bottom:40px;display:flex;align-items:center;gap:24px;z-index:3;color:var(--ink)}
.wb-bot .bar{flex:1}

/* ============ 04 SERVICES A — stacked cards ============ */
.s-a{background:var(--blue);color:#fff;padding:150px var(--g) 160px}
.sa-head{margin-bottom:80px}
.sa-list{display:flex;flex-direction:column;gap:28px}
html.av-live .sa-list{gap:14vh}
html.av-live .sa-card{position:sticky}
.sa-in{background:var(--paper);color:var(--ink);border-radius:30px;padding:clamp(24px,3.4vw,52px);display:flex;flex-wrap:wrap;gap:48px;height:460px;transform-origin:50% 0;transform:scale(calc(1 - var(--q,0) * .08)) translate3d(0,calc(var(--q,0) * -20px),0);filter:brightness(calc(1 - var(--q,0) * .32));box-shadow:0 -30px 60px -30px rgba(0,0,40,.35)}
html.av-live .sa-in{height:auto;min-height:74vh}
.sa-text{flex:999 1 480px;min-width:0;display:flex;flex-direction:column;justify-content:space-between;gap:28px}
.sa-top{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.sa-title{font-family:var(--fd);font-weight:700;font-size:clamp(40px,5vw,88px);line-height:.92;letter-spacing:-.05em;text-wrap:balance;max-width:880px}
.sa-desc{font-size:18px;line-height:1.5;max-width:470px;color:var(--mp);margin-top:18px}
.tags{display:flex;flex-wrap:wrap;gap:8px}
.tag{font-size:13px;padding:8px 14px;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(11,11,13,.2);transition:background .3s,color .3s}
.sa-card:hover .tag{background:var(--ink);color:var(--paper)}
.sa-art{flex:1 1 280px;max-width:380px;align-self:center;color:var(--ink)}
.sa-link{display:inline-flex;align-items:center;gap:10px;font-weight:500;margin-top:18px}

/* ============ 04 SERVICES B — scroll index + live preview ============ */
.s-b .pin-in{min-height:900px;background:var(--ink);display:flex;flex-wrap:wrap;gap:56px;padding:110px var(--g) 56px;align-items:center}
.sb-left{flex:999 1 520px;min-width:0;display:flex;flex-direction:column;gap:36px}
.sb-list{display:flex;flex-direction:column}
.sb-item{padding:14px 0;box-shadow:inset 0 -1px 0 rgba(255,255,255,.08)}
.sb-row{display:flex;align-items:baseline;gap:18px}
.sb-row .lbl{width:28px;color:var(--mi)}
.sb-name{font-family:var(--fd);font-weight:600;font-size:clamp(30px,3.6vw,58px);letter-spacing:-.045em;line-height:1;color:#3a3a42;transition:color .5s var(--ez),transform .7s var(--ez);transform-origin:0 50%}
.sb-item.on .sb-name{color:var(--paper);transform:translateX(14px)}
.sb-item.on .sb-row .lbl{color:var(--blue-l)}
.sb-more{display:grid;grid-template-rows:0fr;transition:grid-template-rows .8s var(--ez)}
.sb-item.on .sb-more{grid-template-rows:1fr}
.sb-more>div{overflow:hidden;padding-left:46px}
.sb-more p{color:#B4B4BA;font-size:16px;line-height:1.5;max-width:460px;padding-top:12px}
.sb-more .tags{padding:14px 0 6px}
.sb-more .tag{box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);color:var(--paper)}
.sb-right{flex:1 1 380px;min-width:0;position:relative;aspect-ratio:4/5;max-height:72vh;border-radius:28px;overflow:hidden;background:var(--ink2)}
.sb-arts>*{position:absolute;inset:0;clip-path:inset(100% 0 0 0);transition:clip-path 1.1s var(--io)}
.sb-arts>.on{clip-path:inset(0 0 0 0)}
.sb-cap{position:absolute;left:24px;bottom:22px;right:24px;z-index:3;display:flex;justify-content:space-between;color:#fff}
.sba{display:flex;align-items:center;justify-content:center;padding:12%}
.sba-1{background:linear-gradient(160deg,#1E32F5,#0d1a8f)}
.sba-1 .win{width:100%;aspect-ratio:4/3;background:#F7F6F2;border-radius:12px;overflow:hidden;box-shadow:0 30px 60px rgba(0,0,0,.3);display:flex;flex-direction:column}
.sba-1 .win i{display:block}
.sba-1 .win .wb{height:9%;background:#e3e2dc;display:flex;gap:4%;align-items:center;padding-left:4%}
.sba-1 .win .wh{flex:1;margin:6%;border-radius:8px;background:linear-gradient(120deg,#0B0B0D 0 55%,#1E32F5 55%);animation:shimmer 3s ease-in-out infinite alternate}
.sba-1 .win .wl{height:6%;margin:0 6% 6%;border-radius:4px;background:rgba(11,11,13,.12);width:60%}
@keyframes shimmer{to{background-position:40px 0;filter:hue-rotate(-12deg)}}
.sba-2{background:#111114;flex-direction:column;align-items:stretch;gap:14px;font-family:var(--fm);color:#9da0ff}
.sba-2 i{display:block;height:12px;border-radius:6px;background:currentColor;animation:typer 2.4s var(--ez) infinite alternate;transform-origin:0 50%}
.sba-2 i:nth-child(2){width:70%;color:#EEEDE8;animation-delay:.2s}.sba-2 i:nth-child(3){width:50%;color:#FFCF3F;animation-delay:.4s}.sba-2 i:nth-child(4){width:84%;animation-delay:.6s}.sba-2 i:nth-child(5){width:40%;color:#1fbf6a;animation-delay:.8s}.sba-2 i:nth-child(6){width:62%;color:#EEEDE8;animation-delay:1s}
@keyframes typer{from{transform:scaleX(.15)}to{transform:scaleX(1)}}
.sba-3{background:#EEEDE8}
.sba-3 .rings{position:relative;width:80%;aspect-ratio:1}
.sba-3 .rings i{position:absolute;inset:0;border-radius:50%;box-shadow:inset 0 0 0 1.5px #0B0B0D;animation:spin 18s linear infinite}
.sba-3 .rings i:nth-child(2){inset:14%;border-radius:100% 0 100% 0;background:#1E32F5;box-shadow:none;animation-duration:12s;animation-direction:reverse}
.sba-3 .rings i:nth-child(3){inset:34%;background:#0B0B0D;animation:none}
.sba-4{background:linear-gradient(170deg,#FFCF3F,#ff9b3f)}
.sba-4 .prod{width:62%;aspect-ratio:3/4;background:#F7F6F2;border-radius:16px;box-shadow:0 30px 60px rgba(0,0,0,.25);position:relative;padding:8%;display:flex;flex-direction:column;justify-content:flex-end;gap:8px;transform:rotate(-6deg)}
.sba-4 .prod::before{content:'';position:absolute;left:14%;right:14%;top:12%;height:44%;border-radius:50% 50% 12px 12px;background:#E8232B}
.sba-4 .prod i{display:block;height:8px;border-radius:4px;background:rgba(11,11,13,.15)}
.sba-4 .prod b{position:absolute;right:-10%;top:-8%;width:30%;aspect-ratio:1;border-radius:50%;background:#0B0B0D;color:#fff;display:flex;align-items:center;justify-content:center;font-size:18px;animation:bob 1.8s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-10px) scale(1.08)}}
.sba-5{background:#0B0B0D;align-items:flex-end;gap:5%;padding:16% 12% 22%}
.sba-5 i{display:block;flex:1;border-radius:8px 8px 2px 2px;background:#1E32F5;transform-origin:50% 100%;animation:grow 2.6s var(--ez) infinite alternate}
.sba-5 i:nth-child(1){height:30%}.sba-5 i:nth-child(2){height:46%;animation-delay:.15s}.sba-5 i:nth-child(3){height:40%;animation-delay:.3s}.sba-5 i:nth-child(4){height:68%;animation-delay:.45s}.sba-5 i:nth-child(5){height:90%;background:#A3ADFF;animation-delay:.6s}
@keyframes grow{from{transform:scaleY(.25)}to{transform:scaleY(1)}}

/* ============ 05 PROCESS A — 3D card wheel ============ */
.p-a .pin-in{min-height:920px;background:var(--paper);color:var(--ink);display:flex;flex-direction:column;padding:110px var(--g) 36px}
.pa-stage{position:relative;flex:1;min-height:640px;--f:calc(var(--p,0) * (var(--n,5) - 1))}
.pa-card{position:absolute;left:50%;top:4%;width:clamp(260px,27vw,390px);margin-left:calc(clamp(260px,27vw,390px) / -2);transform-origin:50% 340%;--d:calc(var(--i,0) - var(--f,0));--ad:max(var(--d),calc(var(--d) * -1));transform:rotate(calc(var(--d) * 15deg)) scale(calc(1 - min(var(--ad),2) * .06));opacity:clamp(0,calc(1.7 - var(--ad) * .5),1)}
.pa-in{position:relative;display:block;border-radius:24px;overflow:hidden;background:var(--ink);color:#fff;box-shadow:0 30px 60px -20px rgba(11,11,13,.35)}
.pa-art{position:relative;aspect-ratio:4/3.3;overflow:hidden;display:flex;align-items:flex-end;padding:20px 22px}
.pa-art .num{position:relative;z-index:2;font-family:var(--fd);font-weight:800;font-size:clamp(84px,9vw,140px);line-height:.75;letter-spacing:-.06em}
.pa-art .sh{position:absolute;transition:transform 1.2s var(--ez)}
.pa-in:hover .pa-art .sh{transform:rotate(90deg) scale(1.1)}
.pa-1 .pa-art{background:var(--blue)}.pa-1 .sh{right:-12%;top:-12%;width:64%;aspect-ratio:1;border-radius:0 0 0 100%;background:#A3ADFF}
.pa-2 .pa-art{background:#16161A}.pa-2 .sh{right:8%;top:10%;width:46%;aspect-ratio:1;border-radius:50%;box-shadow:inset 0 0 0 2px #EEEDE8,0 0 0 18px rgba(30,50,245,.35)}
.pa-3 .pa-art{background:var(--red)}.pa-3 .sh{right:6%;top:8%;width:54%;aspect-ratio:1;border-radius:100% 0 100% 0;background:#FFCF3F}
.pa-4 .pa-art{background:#EEEDE8;color:#0B0B0D}.pa-4 .sh{right:8%;top:8%;width:52%;aspect-ratio:1;border-radius:6px;background:repeating-linear-gradient(0deg,#0B0B0D 0 8px,transparent 8px 18px)}
.pa-5 .pa-art{background:linear-gradient(160deg,#1E32F5,#0B0B0D)}.pa-5 .sh{right:6%;top:6%;width:56%;aspect-ratio:1;border-radius:100% 100% 0 0;background:#FFCF3F}
.pa-body{padding:20px 22px 22px;background:var(--card);color:var(--ink);display:flex;flex-direction:column;gap:10px}
.pa-body b{font-family:var(--fd);font-weight:600;font-size:24px;letter-spacing:-.03em}
.pa-body p{font-size:15px;line-height:1.45;color:var(--mp)}
.pa-hint{position:absolute;left:50%;bottom:6px;transform:translateX(-50%)}

/* ============ 05 PROCESS B — 3D deck ============ */
.p-b .pin-in{min-height:920px;background:var(--ink);display:flex;flex-wrap:wrap;gap:56px;padding:110px var(--g) 64px;align-items:center}
.pb-left{flex:1 1 320px;max-width:440px;display:flex;flex-direction:column;gap:30px}
.pb-steps{display:flex;flex-direction:column;gap:2px;margin-top:10px}
.pb-steps>*{display:flex;gap:16px;align-items:center;padding:10px 0;color:#4a4a52;font-family:var(--fd);font-weight:600;font-size:20px;letter-spacing:-.02em;transition:color .5s}
.pb-steps>* i{width:22px;height:2px;background:currentColor;transition:width .6s var(--ez)}
.pb-steps>.on{color:var(--paper)}.pb-steps>.on i{width:52px;background:var(--blue-l)}
.pb-deck{flex:999 1 520px;min-width:0;position:relative;min-height:620px;align-self:stretch;perspective:1500px;--f:min(calc(var(--n,5) - 1),calc(var(--p,0) * (var(--n,5) - 1) * 1.18))}
.pb-card{position:absolute;left:0;right:0;top:12%;height:min(520px,78%);border-radius:30px;padding:clamp(26px,3vw,46px);display:flex;flex-direction:column;justify-content:space-between;--d:calc(var(--i,0) - var(--f,0));transform:translate3d(0,calc(max(0,var(--d)) * -36px + min(0,var(--d)) * 125%),calc(max(0,var(--d)) * -120px)) rotateX(calc(min(0,var(--d)) * -22deg));transform-origin:50% 100%;opacity:clamp(0,calc(1 - max(0,var(--d)) * .26 + min(0,var(--d)) * 1.3),1);z-index:calc(50 - var(--i,0));box-shadow:0 40px 80px -30px rgba(0,0,0,.7)}
.pb-c1{background:var(--blue);color:#fff}.pb-c2{background:var(--paper);color:var(--ink)}.pb-c3{background:var(--red);color:#fff}.pb-c4{background:var(--card);color:var(--ink)}.pb-c5{background:var(--blue-l);color:var(--ink)}
.pb-card .top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.pb-card .big{font-family:var(--fd);font-weight:700;font-size:clamp(48px,6vw,104px);line-height:.88;letter-spacing:-.055em}
.pb-card p{font-size:18px;line-height:1.45;max-width:520px;opacity:.85}
.pb-card ul{display:flex;flex-wrap:wrap;gap:8px}
.pb-card li{font-size:13px;padding:8px 14px;border-radius:999px;box-shadow:inset 0 0 0 1px currentColor}
.pb-card .n{font-family:var(--fd);font-weight:800;font-size:clamp(70px,8vw,130px);line-height:.75;letter-spacing:-.06em;opacity:.2}

/* ============ 06 DELIVERABLES A — filmstrip ============ */
.d-a .pin-in{min-height:920px;background:var(--paper);color:var(--ink);display:flex;flex-direction:column;padding:110px 0 30px}
.da-head{padding-inline:var(--g)}
.film{position:relative;flex:1;min-height:640px}
.film-it{position:absolute;left:0;top:0;height:100%;will-change:transform}
.film-box{position:absolute;left:0;border-radius:16px;overflow:hidden}
.film-cap{position:absolute;left:0;width:min(440px,80vw);display:flex;flex-direction:column;gap:6px}
.film-cap b{font-family:var(--fd);font-weight:600;font-size:24px;letter-spacing:-.025em}
.film-cap span{font-size:15px;color:var(--mp)}
.film-name{position:absolute;left:0;white-space:nowrap;font-family:var(--fd);font-weight:600;font-size:20px;letter-spacing:-.02em;color:var(--mp)}
.film-box .glyph{position:absolute;inset:18%;display:flex;align-items:center;justify-content:center}

/* ============ 06 DELIVERABLES B — depth tunnel ============ */
.d-b .pin-in{min-height:920px;background:var(--ink);perspective:900px}
.db-scene{position:absolute;inset:0;transform-style:preserve-3d;--f:calc(var(--p,0) * (var(--n,8) - 1))}
.db-tile{position:absolute;left:50%;top:50%;width:clamp(170px,20vw,320px);aspect-ratio:4/5;margin:calc(clamp(170px,20vw,320px) * -.625) 0 0 calc(clamp(170px,20vw,320px) * -.5);border-radius:16px;--d:calc(var(--i,0) - var(--f,0));transform:translate3d(var(--tx,0px),var(--ty,0px),calc(var(--d) * -760px));opacity:min(clamp(0,calc(1 + var(--d) * 1.8),1),clamp(0,calc(1 - (var(--d) - 2.6) * .6),1))}
.db-tile:nth-child(8n+1){--tx:-24vw;--ty:-6vw}.db-tile:nth-child(8n+2){--tx:22vw;--ty:-9vw}.db-tile:nth-child(8n+3){--tx:-20vw;--ty:9vw}.db-tile:nth-child(8n+4){--tx:25vw;--ty:7vw}.db-tile:nth-child(8n+5){--tx:-27vw;--ty:-1vw}.db-tile:nth-child(8n+6){--tx:19vw;--ty:-12vw}.db-tile:nth-child(8n+7){--tx:-22vw;--ty:-11vw}.db-tile:nth-child(8n+8){--tx:23vw;--ty:10vw}
.db-names{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;z-index:5}
.db-names p{grid-area:1/1;text-align:center;font-family:var(--fd);font-weight:700;font-size:clamp(44px,7vw,120px);letter-spacing:-.055em;line-height:.9;opacity:0;transform:translate3d(0,30px,0);filter:blur(10px);transition:opacity .6s var(--ez),transform .8s var(--ez),filter .6s}
.db-names p.on{opacity:1;transform:none;filter:none}
.db-names small{display:block;font-family:var(--fb);font-weight:400;font-size:16px;letter-spacing:0;color:#B4B4BA;margin-top:18px}
.db-top{position:absolute;left:var(--g);right:var(--g);top:100px;display:flex;justify-content:space-between;align-items:flex-end;gap:24px;z-index:6}
.db-bot{position:absolute;left:var(--g);right:var(--g);bottom:40px;display:flex;align-items:center;gap:24px;z-index:6;color:var(--paper)}
.db-bot .bar{flex:1}

/* ============ 07 INDUSTRIES A — index list + cursor preview ============ */
.i-a{padding:150px var(--g) 160px;background:var(--ink)}
.ia-list{position:relative;margin-top:90px}
.ia-row{position:relative;display:grid;grid-template-columns:72px minmax(0,1fr) minmax(0,320px) 40px;align-items:center;gap:24px;padding:26px 18px;box-shadow:inset 0 1px 0 rgba(255,255,255,.12);isolation:isolate;overflow:hidden}
.ia-row:last-child{box-shadow:inset 0 1px 0 rgba(255,255,255,.12),inset 0 -1px 0 rgba(255,255,255,.12)}
.ia-row::before{content:'';position:absolute;inset:0;background:var(--blue);transform:scaleY(0);transform-origin:50% 100%;transition:transform .6s var(--ez);z-index:-1}
.ia-row:hover::before{transform:scaleY(1)}
.ia-name{font-family:var(--fd);font-weight:600;font-size:clamp(32px,4.8vw,78px);letter-spacing:-.045em;line-height:1;transition:transform .7s var(--ez)}
.ia-row:hover .ia-name{transform:translateX(22px)}
.ia-line{color:#B4B4BA;font-size:15px;line-height:1.45;opacity:0;transform:translateY(10px);transition:opacity .5s var(--ez),transform .6s var(--ez)}
.ia-row:hover .ia-line{opacity:1;transform:none;color:#fff}
.ia-arr{font-size:24px;transition:transform .6s var(--ez)}
.ia-row:hover .ia-arr{transform:rotate(-45deg)}
.ia-pv{position:absolute;left:0;top:0;width:280px;aspect-ratio:4/5;margin:-175px 0 0 -140px;pointer-events:none;z-index:6;border-radius:14px;overflow:hidden;transform:translate3d(var(--fx,0px),var(--fy,0px),0) rotate(calc(var(--fvx,0) * .5deg)) scale(.6);opacity:0;transition:opacity .4s,transform .1s linear;box-shadow:0 40px 80px rgba(0,0,0,.45)}
.ia-list:hover .ia-pv{opacity:1;transform:translate3d(var(--fx,0px),var(--fy,0px),0) rotate(calc(var(--fvx,0) * .5deg)) scale(1)}
.ia-pv .plate{position:absolute;inset:0;opacity:0;transform:scale(1.15);transition:opacity .45s,transform .9s var(--ez)}
.ia-list:has(.ia-row:nth-child(1):hover) .ia-pv .plate:nth-child(1),.ia-list:has(.ia-row:nth-child(2):hover) .ia-pv .plate:nth-child(2),.ia-list:has(.ia-row:nth-child(3):hover) .ia-pv .plate:nth-child(3),.ia-list:has(.ia-row:nth-child(4):hover) .ia-pv .plate:nth-child(4),.ia-list:has(.ia-row:nth-child(5):hover) .ia-pv .plate:nth-child(5),.ia-list:has(.ia-row:nth-child(6):hover) .ia-pv .plate:nth-child(6),.ia-list:has(.ia-row:nth-child(7):hover) .ia-pv .plate:nth-child(7),.ia-list:has(.ia-row:nth-child(8):hover) .ia-pv .plate:nth-child(8){opacity:1;transform:none}
.ia-pv .pn{z-index:2}
@media (max-width:860px){.ia-row{grid-template-columns:44px minmax(0,1fr) 28px}.ia-line{grid-column:2 / 3;opacity:1;transform:none}.ia-pv{display:none}}

/* ============ 07 INDUSTRIES B — flip cards ============ */
.i-b{padding:150px var(--g) 160px;background:var(--paper);color:var(--ink);position:relative;overflow:hidden}
.ib-ghost{position:absolute;left:0;top:70px;white-space:nowrap;font-family:var(--fd);font-weight:800;font-size:clamp(90px,14vw,240px);letter-spacing:-.05em;line-height:1;color:transparent;-webkit-text-stroke:1px rgba(11,11,13,.08);pointer-events:none}
.ib-grid{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:80px}
@media (max-width:1000px){.ib-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.ib-grid{grid-template-columns:minmax(0,1fr)}}
.ib-card{position:relative;aspect-ratio:3/4;perspective:1200px}
.ib-in{position:absolute;inset:0;transform-style:preserve-3d;transition:transform 1.1s var(--ez)}
.ib-card:hover .ib-in,.ib-card:focus-within .ib-in{transform:rotateY(180deg)}
.ib-f,.ib-b{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:22px;padding:22px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden}
.ib-f{background:var(--card);box-shadow:inset 0 0 0 1px rgba(11,11,13,.06)}
.ib-b{background:var(--blue);color:#fff;transform:rotateY(180deg)}
.ib-top{display:flex;justify-content:space-between;font-family:var(--fm);font-size:12px;color:var(--mp)}
.ib-b .ib-top{color:rgba(255,255,255,.75)}
.ib-art{width:52%;align-self:center;color:var(--ink)}
.ib-f b,.ib-b b{font-family:var(--fd);font-weight:600;font-size:clamp(20px,1.8vw,28px);letter-spacing:-.03em;line-height:1.05}
.ib-b p{font-size:15px;line-height:1.45;opacity:.9}
.ib-b .tags .tag{box-shadow:inset 0 0 0 1px rgba(255,255,255,.4)}

/* ============ 08 WHY A — bento ============ */
.y-a{padding:160px var(--g);background:var(--ink)}
.ya-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px;margin-top:80px}
.ya-c{border-radius:26px;background:var(--ink2);padding:clamp(26px,3vw,40px);min-height:360px;display:flex;flex-direction:column;justify-content:space-between;gap:32px;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.ya-c>*{position:relative;z-index:3}
.ya-w{grid-column:span 4}.ya-n{grid-column:span 2}
@media (max-width:900px){.ya-w,.ya-n{grid-column:span 6}}
.ya-c h3{font-family:var(--fd);font-weight:600;font-size:clamp(26px,2.6vw,40px);letter-spacing:-.04em;line-height:1}
.ya-c p{color:#B4B4BA;font-size:16px;line-height:1.55;max-width:440px;margin-top:12px}
.chain{display:flex;align-items:center;position:relative;padding:8px 0}
.chain::before{content:'';position:absolute;left:12px;right:12px;top:50%;height:1px;background:linear-gradient(90deg,#1E32F5,#A3ADFF);transform-origin:0 50%;transition:transform 1.6s var(--ez) .2s}
html.av-live .ya-c:not(.in) .chain::before{transform:scaleX(0)}
.chain span{position:relative;flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:12px;font-family:var(--fm);font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--paper)}
.chain span::before{content:'';width:24px;height:24px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 6px rgba(30,50,245,.2);transition:transform .8s var(--ez)}
.chain span:nth-child(2)::before{transition-delay:.5s}.chain span:nth-child(3)::before{transition-delay:.8s}.chain span:nth-child(4)::before{transition-delay:1.1s}
html.av-live .ya-c:not(.in) .chain span::before{transform:scale(0)}
.gauge{width:180px;align-self:flex-start}
.gauge .arc{stroke-dasharray:100;stroke-dashoffset:0;transition:stroke-dashoffset 2s var(--ez) .3s}
html.av-live .ya-c:not(.in) .gauge .arc{stroke-dashoffset:100}
.gauge .ndl{transform-origin:60px 60px;transform:rotate(80deg);transition:transform 2s var(--ez) .3s}
html.av-live .ya-c:not(.in) .gauge .ndl{transform:rotate(-90deg)}
.orbit{position:relative;width:150px;height:150px}
.orbit i{position:absolute;inset:0;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);animation:spin 9s linear infinite}
.orbit i::after{content:'';position:absolute;left:50%;top:-5px;width:10px;height:10px;margin-left:-5px;border-radius:50%;background:var(--blue-l)}
.orbit i:nth-child(2){inset:22%;animation-duration:5s;animation-direction:reverse}.orbit i:nth-child(2)::after{background:var(--yel)}
.orbit b{position:absolute;inset:40%;border-radius:50%;background:var(--blue);box-shadow:0 0 30px 8px rgba(30,50,245,.55)}
.clocks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
@media (max-width:640px){.clocks{grid-template-columns:repeat(2,minmax(0,1fr))}}
.clocks div{display:flex;flex-direction:column;gap:6px;padding:14px;border-radius:14px;background:rgba(255,255,255,.04)}
.clocks b{font-family:var(--fd);font-weight:600;font-size:clamp(22px,2.2vw,34px);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.clocks .home{background:rgba(232,35,43,.14)}

/* ============ 08 WHY B — before / after wipe ============ */
.y-b .pin-in{min-height:880px}
.yb-l,.yb-r{position:absolute;inset:0;padding:110px var(--g) 60px;display:flex;flex-direction:column;justify-content:space-between}
.yb-l{background:var(--ink);color:#6b6b74}
.yb-r{background:var(--blue);color:#fff;clip-path:inset(0 0 0 calc((1 - var(--p,0)) * 100%))}
.yb-h{font-family:var(--fd);font-weight:600;font-size:clamp(44px,6.4vw,110px);letter-spacing:-.05em;line-height:.92}
.yb-rows{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 40px}
.yb-rows>div{display:flex;gap:18px;align-items:baseline;padding:22px 0;box-shadow:inset 0 1px 0 currentColor}
.yb-l .yb-rows>div{box-shadow:inset 0 1px 0 rgba(255,255,255,.1)}.yb-r .yb-rows>div{box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
.yb-rows b{font-family:var(--fd);font-weight:600;font-size:clamp(22px,2.4vw,38px);letter-spacing:-.035em;line-height:1.05}
.yb-l .yb-rows b{text-decoration:line-through;text-decoration-thickness:2px;text-decoration-color:rgba(232,35,43,.7)}
.yb-div{position:absolute;top:0;bottom:0;left:calc((1 - var(--p,0)) * 100%);width:2px;background:#fff;z-index:4;pointer-events:none}
.yb-div span{position:absolute;top:50%;left:50%;width:84px;height:84px;margin:-42px 0 0 -42px;border-radius:50%;background:#fff;color:var(--blue);display:flex;align-items:center;justify-content:center;font-family:var(--fm);font-size:11px;letter-spacing:.06em;box-shadow:0 10px 40px rgba(0,0,0,.35)}
@media (max-width:760px){.yb-rows{grid-template-columns:minmax(0,1fr)}}

/* ============ 09 CANADA A — falling maple leaf ============ */
.c-a{position:relative;padding:160px var(--g);background:var(--ink);overflow:hidden}
.ca-grid{display:flex;flex-wrap:wrap;align-items:center;gap:56px}
.ca-text{flex:999 1 560px;min-width:0;display:flex;flex-direction:column;gap:56px;position:relative;z-index:2}
.ca-h{font-family:var(--fd);font-weight:600;font-size:clamp(46px,6.8vw,116px);line-height:.94;letter-spacing:-.05em;text-wrap:balance}
.ca-meta{display:flex;flex-direction:column;gap:18px;max-width:600px}
.ca-line{height:1px;background:rgba(255,255,255,.2)}
.ca-row{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:16px}
.ca-leaf{flex:1 1 380px;display:flex;justify-content:center;position:relative}
.ca-leaf svg{width:min(540px,100%);height:auto;overflow:visible}
.ca-ring{position:absolute;left:50%;top:50%;width:min(620px,110%);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.leaf{fill:var(--red);stroke:var(--red);stroke-width:.45;stroke-linejoin:round;stroke-dasharray:100;stroke-dashoffset:calc((1 - min(1,calc(var(--p,1) * 2))) * 100);fill-opacity:clamp(0,calc((var(--p,1) - .42) * 5),1)}
.ca-g{transform-origin:50% 60%;transform-box:fill-box;transform:translate3d(0,calc((.55 - var(--p,1)) * 90px),0) rotate(calc((var(--p,1) - .62) * -16deg))}
.pin-ico{display:inline-flex;align-items:center;gap:10px}

/* ============ 09 CANADA B — skyline + giant word ============ */
.c-b{position:relative;padding:150px var(--g) 0;background:var(--ink);overflow:hidden}
.cb-big{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);white-space:nowrap;font-family:var(--fd);font-weight:800;font-size:clamp(120px,24vw,420px);letter-spacing:-.06em;line-height:.8;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.1);background:linear-gradient(90deg,var(--red) 0 50%,rgba(232,35,43,0) 50%);background-size:200% 100%;background-position:calc((1 - min(1,calc(var(--p,1) * 1.5))) * 100%) 0;-webkit-background-clip:text;background-clip:text;opacity:.9;pointer-events:none}
.cb-text{position:relative;z-index:2;display:flex;flex-direction:column;gap:40px;max-width:980px}
.cb-h{font-family:var(--fd);font-weight:600;font-size:clamp(44px,6.4vw,108px);line-height:.94;letter-spacing:-.05em;text-wrap:balance}
.cb-meta{display:flex;gap:36px;flex-wrap:wrap;font-size:16px;color:#cfcfd4}
.cb-meta span{display:inline-flex;align-items:center;gap:10px}
.cb-sky{position:relative;z-index:2;margin-top:110px;display:block;width:100%;height:auto;overflow:visible}
.cb-sky .ln{fill:none;stroke:#EEEDE8;stroke-width:1.3;stroke-linejoin:round;stroke-dasharray:100;stroke-dashoffset:calc((1 - min(1,calc(var(--p,1) * 1.7))) * 100)}
.cb-sky .lf{fill:var(--red);opacity:clamp(0,calc((var(--p,1) - .5) * 4),1);transform-box:fill-box;transform-origin:50% 50%;transform:scale(clamp(0,calc((var(--p,1) - .5) * 4),1))}
.cb-ground{height:1px;background:rgba(255,255,255,.2)}

/* ============ 10 TESTIMONIAL A — words come into focus ============ */
.q-a{padding:180px var(--g);background:var(--paper);color:var(--ink)}
.qa-in{display:flex;flex-wrap:wrap;gap:48px}
.qa-side{flex:1 1 240px;max-width:340px;display:flex;flex-direction:column;gap:24px}
.qa-q{flex:999 1 600px;min-width:0;display:flex;flex-direction:column;gap:48px}
.qa-mark{font-family:var(--fs);font-size:200px;line-height:.55;color:var(--blue);height:80px;transform:rotate(calc((1 - var(--p,1)) * -30deg));transform-origin:30% 60%}
.qa-text{font-family:var(--fd);font-weight:500;font-size:clamp(30px,4.1vw,64px);line-height:1.06;letter-spacing:-.04em}
.qa-text .w{--o:clamp(0,calc(var(--p,1) * var(--n,1) * 1.7 - var(--i,0) - var(--n,1) * .45),1);opacity:calc(.12 + .88 * var(--o));filter:blur(calc((1 - var(--o)) * 8px))}
.qa-by{display:flex;align-items:center;gap:16px}
.av-ph{width:56px;height:56px;border-radius:50%;background:var(--paper2);display:flex;align-items:center;justify-content:center;font-family:var(--fm);font-size:11px;color:var(--mp)}

/* ============ 10 TESTIMONIAL B — the card that straightens ============ */
.q-b{position:relative;padding:170px var(--g);background:var(--ink);overflow:hidden}
.qb-ghost{position:absolute;left:0;top:50%;transform:translate3d(calc((var(--p,1) - .5) * -30%),-50%,0);white-space:nowrap;font-family:var(--fs);font-style:italic;font-size:clamp(140px,22vw,380px);line-height:1;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.07);pointer-events:none}
.qb-card{position:relative;z-index:2;max-width:1100px;margin:0 auto;background:var(--card);color:var(--ink);border-radius:32px;padding:clamp(28px,5vw,80px);display:flex;flex-wrap:wrap;gap:48px;align-items:center;--k:min(1,calc(var(--p,1) * 2.1));transform:rotate(calc((1 - var(--k)) * -7deg)) scale(calc(.86 + var(--k) * .14)) translate3d(0,calc((1 - var(--k)) * 80px),0);box-shadow:0 60px 120px -40px rgba(30,50,245,.5)}
.qb-face{flex:0 0 auto;width:clamp(140px,16vw,220px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 50% 38%,#cfcfd6 0 22%,rgba(0,0,0,0) 22.5%),radial-gradient(circle at 50% 100%,#cfcfd6 0 42%,rgba(0,0,0,0) 42.5%),var(--blue);clip-path:circle(calc(var(--k,1) * 50%) at 50% 50%);display:flex;align-items:flex-end;justify-content:center;padding-bottom:10px;font-family:var(--fm);font-size:10px;color:var(--ink)}
.qb-body{flex:999 1 420px;min-width:0;display:flex;flex-direction:column;gap:28px}
.qb-mark{font-family:var(--fs);font-size:140px;line-height:.4;color:var(--blue);height:44px}
.qb-text{font-family:var(--fd);font-weight:500;font-size:clamp(26px,2.9vw,46px);line-height:1.1;letter-spacing:-.035em}
.qb-foot{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.qb-stars{display:flex;gap:4px;color:var(--blue)}

/* ============ 11 BOOKING A — calendar ============ */
.b-a{padding:150px var(--g) 170px;background:var(--blue);color:#fff}
.bk-grid{display:flex;flex-wrap:wrap;gap:64px;align-items:flex-start}
.bk-text{flex:1 1 360px;min-width:0;display:flex;flex-direction:column;gap:34px;max-width:540px}
.bk-meta{display:flex;flex-direction:column;gap:16px;font-size:16px}
.bk-meta div{display:flex;gap:14px;align-items:center}
.bk-w{flex:999 1 580px;min-width:0;background:var(--paper);color:var(--ink);border-radius:30px;padding:clamp(20px,2.6vw,36px);display:flex;flex-direction:column;gap:28px;box-shadow:0 50px 100px -30px rgba(0,0,40,.55)}
.bk-top{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding-bottom:22px;box-shadow:inset 0 -1px 0 rgba(11,11,13,.1)}
.bk-host{display:flex;align-items:center;gap:14px}
.bk-host i{width:44px;height:44px;border-radius:50%;background:var(--ink);display:flex;align-items:center;justify-content:center}
.bk-body{display:flex;flex-wrap:wrap;gap:32px}
.bk-cal{flex:1.4 1 300px;min-width:0}
.bk-side{flex:1 1 220px;min-width:0;display:flex;flex-direction:column;gap:14px}
.bk-mhead{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.bk-mhead b,.bk-side h3{font-family:var(--fd);font-weight:600;font-size:20px;letter-spacing:-.02em}
.bk-navs{display:flex;gap:6px}
.bk-nav{width:40px;height:40px;border-radius:999px;border:0;background:transparent;box-shadow:inset 0 0 0 1px rgba(11,11,13,.2);cursor:pointer;font-size:16px;color:var(--ink);transition:background .25s,color .25s}
.bk-nav:hover:not(:disabled){background:var(--ink);color:#fff}
.bk-nav:disabled{opacity:.3;cursor:default}
.bk-dow{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;font-family:var(--fm);font-size:11px;color:var(--mp);text-align:center;margin-bottom:8px}
.bk-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.bk-d{aspect-ratio:1;min-height:36px;border:0;border-radius:12px;background:transparent;font-family:var(--fb);font-size:15px;color:rgba(11,11,13,.32);cursor:default;padding:0}
.bk-ok{background:rgba(30,50,245,.08);color:var(--blue);font-weight:600;cursor:pointer;transition:background .25s,color .25s,transform .35s var(--ez)}
.bk-ok:hover{background:rgba(30,50,245,.18);transform:translateY(-2px)}
.bk-sel,.bk-sel:hover{background:var(--blue);color:#fff}
.bk-blank{visibility:hidden}
.bk-times{display:flex;flex-direction:column;gap:8px;max-height:380px;overflow:auto;padding:2px 4px 2px 2px}
.bk-t{min-height:48px;border-radius:12px;border:0;background:transparent;box-shadow:inset 0 0 0 1px rgba(11,11,13,.18);font-family:var(--fb);font-size:15px;font-weight:500;color:var(--ink);cursor:pointer;transition:box-shadow .25s,background .25s,color .25s}
.bk-t:hover{box-shadow:inset 0 0 0 1.5px var(--blue);color:var(--blue)}
.bk-tsel,.bk-tsel:hover{background:var(--ink);color:#fff}
.bk-conf{display:flex;flex-direction:column;gap:16px;padding:20px;border-radius:18px;background:rgba(30,50,245,.07)}
.bk-conf strong{font-family:var(--fd);font-weight:600;font-size:24px;letter-spacing:-.03em;line-height:1.1}
.bk-back{border:0;background:transparent;font-family:var(--fb);font-size:14px;color:var(--mp);cursor:pointer;text-align:left;padding:0}
.bk-back:hover{color:var(--ink)}
.bk-foot{font-family:var(--fm);font-size:11px;color:var(--mp);letter-spacing:.04em}

/* ============ 11 BOOKING B — guided conversation ============ */
.b-b{padding:150px var(--g) 170px;background:var(--ink);position:relative;overflow:hidden}
.bb-grid{display:flex;flex-wrap:wrap;gap:64px;align-items:center;position:relative;z-index:2}
.bb-left{flex:1 1 400px;min-width:0;display:flex;flex-direction:column;gap:36px}
.bb-big{font-family:var(--fd);font-weight:700;font-size:clamp(72px,11vw,190px);line-height:.84;letter-spacing:-.06em}
.bb-big .ser{color:var(--blue-l)}
.bb-glow{position:absolute;left:0;top:0;width:700px;height:700px;margin:-350px 0 0 -350px;border-radius:50%;background:radial-gradient(circle,rgba(30,50,245,.45),rgba(30,50,245,0) 65%);transform:translate3d(var(--fx,30vw),var(--fy,40vh),0);pointer-events:none;z-index:1}
.bb-card{flex:999 1 520px;min-width:0;background:var(--ink2);border-radius:30px;padding:clamp(22px,3vw,40px);display:flex;flex-direction:column;gap:30px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.bb-step{display:flex;flex-direction:column;gap:14px}
.bb-step h3{display:flex;gap:14px;align-items:baseline;font-family:var(--fd);font-weight:600;font-size:20px;letter-spacing:-.02em}
.bb-step h3 span{font-family:var(--fm);font-size:12px;color:var(--blue-l);font-weight:400}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{min-height:44px;padding:0 18px;border-radius:999px;border:0;background:transparent;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);color:var(--paper);font-family:var(--fb);font-size:15px;cursor:pointer;transition:background .3s,box-shadow .3s,color .3s,transform .4s var(--ez)}
.chip:hover{box-shadow:inset 0 0 0 1px var(--blue-l);transform:translateY(-2px)}
.chip.on{background:var(--blue);box-shadow:none;color:#fff}
.days{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px}
.day{flex:0 0 auto;width:68px;height:78px;border-radius:16px;border:0;background:rgba(255,255,255,.04);color:var(--paper);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;cursor:pointer;font-family:var(--fb);transition:background .3s,transform .4s var(--ez)}
.day small{font-family:var(--fm);font-size:10px;letter-spacing:.06em;color:var(--mi)}
.day b{font-family:var(--fd);font-weight:600;font-size:24px}
.day:hover{transform:translateY(-3px);background:rgba(255,255,255,.08)}
.day.on{background:var(--paper);color:var(--ink)}.day.on small{color:var(--mp)}
.bb-sum{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding-top:22px;box-shadow:inset 0 1px 0 rgba(255,255,255,.1)}
.bb-sum p{font-size:15px;color:#cfcfd4;line-height:1.45}
.bb-sum p b{color:#fff;font-weight:600}

/* ============ 12 FOOTER A ============ */
.f-a{position:relative;padding:150px var(--g) 28px;display:flex;flex-direction:column;gap:100px;overflow:hidden;background:var(--ink)}
.ft-cta{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:40px}
.ft-big{font-family:var(--fd);font-weight:700;font-size:clamp(56px,9vw,160px);line-height:.86;letter-spacing:-.058em}
.ft-big .ser{color:var(--blue-l);font-size:1.06em}
.ft-circ{width:190px;height:190px;border-radius:50%;background:var(--blue);color:#fff;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;font-weight:500;font-size:17px;flex:0 0 auto;position:relative;overflow:hidden;isolation:isolate}
.ft-circ::before{content:'';position:absolute;inset:0;border-radius:50%;background:var(--paper);transform:scale(0);transition:transform .6s var(--ez);z-index:-1}
.ft-circ:hover::before{transform:scale(1)}
.ft-circ:hover{color:var(--ink)}
.ft-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:40px}
.ft-col{display:flex;flex-direction:column;gap:12px;font-size:16px}
.ft-col .lbl{margin-bottom:6px}
.ft-logo{overflow:hidden}
.ft-logo img{width:100%;height:auto;display:block;transform:translate3d(0,calc((1 - min(1,calc(var(--p,1) * 1.5))) * 75%),0)}
.ft-bot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;font-size:13px;color:var(--mi)}

/* ============ 12 FOOTER B ============ */
.f-b{position:relative;padding:150px var(--g) 28px;background:var(--blue);color:#fff;display:flex;flex-direction:column;gap:90px;overflow:hidden}
.fb-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:40px}
.fb-big{font-family:var(--fd);font-weight:700;font-size:clamp(60px,10vw,176px);line-height:.86;letter-spacing:-.06em}
.swap{display:inline-flex;flex-direction:column;overflow:hidden;height:.92em;vertical-align:top}
.swap>span{display:block;transition:transform .7s var(--ez);line-height:.92}
.swap>span+span{font-family:var(--fs);font-style:italic;font-weight:400;letter-spacing:-.03em}
.swap:hover>span{transform:translateY(-100%)}
.fb-form{flex:0 1 420px;display:flex;flex-direction:column;gap:14px}
.fb-form label{font-family:var(--fm);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.8)}
.fb-field{display:flex;gap:8px;padding:6px;border-radius:999px;background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}
.fb-field input{flex:1;min-width:0;border:0;background:transparent;color:#fff;font-family:var(--fb);font-size:16px;padding:0 16px;outline:none}
.fb-field input::placeholder{color:rgba(255,255,255,.65)}
.fb-field button{height:48px;padding:0 20px;border-radius:999px;border:0;background:#fff;color:var(--blue);font-family:var(--fb);font-weight:600;font-size:15px;cursor:pointer;transition:transform .4s var(--ez)}
.fb-field button:hover{transform:scale(1.04)}
.fb-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:40px;font-size:16px}
.fb-cols div{display:flex;flex-direction:column;gap:12px}
.fb-cols .lbl{color:rgba(255,255,255,.7);margin-bottom:6px}
.fb-logo{position:relative;isolation:isolate}
.fb-logo img{position:relative;z-index:2;width:100%;height:auto;display:block;filter:invert(1);mix-blend-mode:normal}
.fb-light{position:absolute;left:0;top:0;width:520px;height:520px;margin:-260px 0 0 -260px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.75),rgba(255,255,255,0) 62%);transform:translate3d(var(--fx,50%),var(--fy,50%),0);z-index:1;pointer-events:none;opacity:0;transition:opacity .5s}
.fb-logo:hover .fb-light{opacity:1}
.fb-bot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;font-size:13px;color:rgba(255,255,255,.8)}
.mq{overflow:hidden;white-space:nowrap}
.mq-row{display:flex;width:max-content;will-change:transform}
.mq-row span{padding-right:.6em}

@media (prefers-reduced-motion:reduce){.badge svg,.grain,.scroll-ind i,.hb-aur,.orbit i,.sba-2 i,.sba-5 i,.sba-4 .prod b,.sba-3 .rings i,.ha-hint i{animation:none}}

/* ================= ROUND 2 ================= */

/* Tagline A — meaningful inline symbols */
.ta-p .pill{display:inline-flex;align-items:center;justify-content:center;position:relative;overflow:hidden;width:1.9em;vertical-align:-.04em;isolation:isolate}
.ta-p .pill::before,.ta-p .pill::after{content:'';position:absolute}
.pill.p-spark{background:#FFCF3F}
.pill.p-spark::before{inset:-80%;background:repeating-conic-gradient(from 0deg,rgba(255,255,255,.75) 0 5deg,rgba(255,255,255,0) 5deg 22deg);animation:spin 7s linear infinite}
.pill.p-spark::after{left:50%;top:50%;width:.34em;height:.34em;margin:-.17em 0 0 -.17em;border-radius:50%;background:#fff;box-shadow:0 0 .35em .18em #fff;animation:glow 1.6s ease-in-out infinite}
@keyframes glow{50%{transform:scale(1.6);opacity:.75}}
.pill.p-eye{background:var(--paper)}
.pill.p-eye::before{left:50%;top:50%;width:.56em;height:.56em;margin:-.28em 0 0 -.28em;border-radius:50%;background:radial-gradient(circle at 40% 38%,#fff 0 9%,rgba(255,255,255,0) 10%),radial-gradient(circle,#0B0B0D 0 30%,#1E32F5 32% 68%,#A3ADFF 70%);transform:translate(calc(var(--nx,0) * .55em),calc(var(--ny,0) * .12em));transition:transform .25s ease-out}
.pill.p-eye::after{inset:0;background:var(--ink);transform-origin:50% 0;transform:scaleY(0);animation:blink 4.6s infinite}
@keyframes blink{0%,91%,100%{transform:scaleY(0)}94%{transform:scaleY(1)}}
.pill.p-globe{width:.82em;background:radial-gradient(circle at 34% 30%,#7d8bff,#1E32F5 55%,#0d1a8f)}
.pill.p-globe::before{inset:0;border-radius:50%;background:repeating-linear-gradient(90deg,rgba(255,255,255,0) 0 .16em,rgba(255,255,255,.5) .16em .18em);background-size:.34em 100%;animation:globe 2.4s linear infinite}
.pill.p-globe::after{inset:0;border-radius:50%;background:repeating-linear-gradient(0deg,rgba(255,255,255,0) 0 .19em,rgba(255,255,255,.35) .19em .205em)}
@keyframes globe{to{background-position:.34em 0}}
.pill.p-click{background:var(--blue-l)}
.pill.p-click::after{left:46%;top:44%;width:.36em;height:.36em;margin:-.18em 0 0 -.18em;border-radius:50%;box-shadow:0 0 0 .05em var(--ink);animation:ripple 1.8s ease-out infinite}
.pill.p-click::before{left:46%;top:44%;width:.36em;height:.46em;background:var(--ink);clip-path:polygon(0 0,0 82%,24% 64%,40% 100%,56% 93%,40% 58%,70% 58%);animation:press 1.8s ease-in-out infinite;z-index:2}
@keyframes ripple{0%,55%{transform:scale(0);opacity:1}100%{transform:scale(2.6);opacity:0}}
@keyframes press{0%,48%,70%,100%{transform:translate(0,0) scale(1)}55%{transform:translate(0,0) scale(.82)}}
.pill.p-heart{background:var(--red);color:#fff}
.pill.p-heart::before{content:'♥';position:static;font-family:Arial,sans-serif;font-size:.5em;line-height:1;animation:beat 1.1s ease-in-out infinite}
.pill.p-heart::after{inset:0;border-radius:inherit;box-shadow:inset 0 0 0 0 rgba(255,255,255,.6);animation:beatring 1.1s ease-out infinite}
@keyframes beat{0%,40%,100%{transform:scale(1)}15%{transform:scale(1.35)}28%{transform:scale(1.1)}}
@keyframes beatring{0%{box-shadow:inset 0 0 0 .2em rgba(255,255,255,.5)}60%,100%{box-shadow:inset 0 0 0 0 rgba(255,255,255,0)}}
.ta-legend{display:flex;gap:22px;flex-wrap:wrap;color:var(--mi)}
.ta-legend span{display:inline-flex;align-items:center;gap:8px}
.ta-legend i{width:18px;height:9px;border-radius:9px;display:inline-block}

/* Work A — extra motion */
.w-a{position:relative;overflow:hidden}
.wa-ghost{position:absolute;left:0;top:140px;white-space:nowrap;font-family:var(--fd);font-weight:800;font-size:clamp(120px,17vw,300px);letter-spacing:-.06em;line-height:1;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.07);transform:translate3d(calc(var(--p,1) * -45%),0,0);pointer-events:none}
.wa-head,.wx-grid,.wa-bridge{position:relative;z-index:1}
.wx-frame::after{content:'';position:absolute;inset:0;background:var(--blue);transform-origin:50% 0;transform:scaleY(0);z-index:4;pointer-events:none;transition:transform 1.1s var(--io) .35s}
html.av-live .wx-frame:not(.in)::after{transform:scaleY(1);transition:none}
.wx-frame .mk{translate:calc((var(--sx,50%) - 50%) * -.14) calc((var(--sy,50%) - 50%) * -.14)}
.wx-no{font-family:var(--fd);font-weight:800;font-size:44px;line-height:.8;letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.35);transition:color .5s,-webkit-text-stroke-color .5s}
.wx-item:hover .wx-no{color:var(--blue-l);-webkit-text-stroke-color:var(--blue-l)}
.wx-top{display:flex;align-items:flex-end;gap:16px}
.wa-bridge{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-top:180px;padding-top:28px;box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
.wa-more .pin-in{min-height:780px;background:var(--ink);display:flex;flex-direction:column;justify-content:center;gap:44px;padding:100px 0 50px}
.wm-head{padding:0 var(--g);display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.wm-track{display:flex;gap:24px;padding:0 var(--g);width:max-content;transform:translate3d(calc(var(--p,0) * var(--hx,0px) * -1),0,0);will-change:transform}
.wm-card{flex:0 0 clamp(250px,23vw,340px);display:flex;flex-direction:column;gap:12px;transform:translate3d(0,calc(sin((var(--p,0) * 7 + var(--i,0) * .8) * 1rad) * 18px),0) skewX(calc(var(--skew,0) * -1deg))}
.wm-frame{position:relative;display:block;aspect-ratio:4/5;border-radius:12px;overflow:hidden}
.wm-frame .plate{position:absolute;inset:0;transition:transform 1.2s var(--ez)}
.wm-frame:hover .plate{transform:scale(1.08) rotate(-1deg)}
.wm-frame .tiles{position:absolute;left:22%;top:22%;width:56%;color:#fff;mix-blend-mode:difference;transition:transform 1.2s var(--ez)}
.wm-frame:hover .tiles{transform:rotate(-8deg) scale(.92)}
.wm-meta{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.wm-meta b{font-family:var(--fd);font-weight:600;font-size:19px;letter-spacing:-.02em}
.wm-meta span{font-family:var(--fm);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--mi)}
.wm-end .wm-frame{background:var(--blue);color:#fff;display:flex;flex-direction:column;justify-content:space-between;padding:26px}
.wm-end strong{font-family:var(--fd);font-weight:700;font-size:clamp(40px,3.6vw,60px);line-height:.9;letter-spacing:-.05em}
.wm-bot{padding:0 var(--g);display:flex;align-items:center;gap:24px;color:var(--paper)}
.wm-bot .bar{flex:1}

/* Services C — expanding panels */
.s-c{background:var(--ink);padding:150px var(--g) 130px}
.sc-row{display:flex;gap:10px;height:660px;margin-top:70px}
html.av-live .sc-row{height:74vh;min-height:520px}
.sc-p{position:relative;flex:1 1 0;min-width:0;border-radius:26px;overflow:hidden;transition:flex-grow 1s var(--ez);color:#fff;isolation:isolate;outline:none;cursor:pointer}
.sc-p.is-open,.sc-row .sc-p:hover,.sc-row .sc-p:focus-within{flex-grow:4.2}
.sc-row:has(.sc-p:hover) .sc-p.is-open:not(:hover),.sc-row:has(.sc-p:focus-within) .sc-p.is-open:not(:focus-within){flex-grow:1}
.sc-art{position:absolute;inset:0;transform:scale(1.15);opacity:.55;transition:transform 1.2s var(--ez),opacity .8s}
.sc-p.is-open .sc-art,.sc-p:hover .sc-art{transform:scale(1);opacity:1}
.sc-row:has(.sc-p:hover) .sc-p.is-open:not(:hover) .sc-art{transform:scale(1.15);opacity:.55}
.sc-p::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,0) 30%,rgba(0,0,0,0) 45%,rgba(0,0,0,.72));z-index:1;pointer-events:none}
.sc-n{position:absolute;left:22px;top:20px;z-index:2;font-family:var(--fm);font-size:12px;letter-spacing:.06em}
.sc-v{position:absolute;left:18px;bottom:22px;z-index:2;writing-mode:vertical-rl;transform:rotate(180deg);font-family:var(--fd);font-weight:600;font-size:clamp(26px,2.4vw,38px);letter-spacing:-.03em;white-space:nowrap;transition:opacity .4s}
.sc-o{position:absolute;left:28px;right:28px;bottom:26px;z-index:2;display:flex;flex-direction:column;gap:16px;opacity:0;transform:translate3d(0,24px,0);transition:opacity .5s,transform .8s var(--ez);pointer-events:none;max-width:620px}
.sc-p.is-open .sc-o,.sc-p:hover .sc-o,.sc-p:focus-within .sc-o{opacity:1;transform:none;transition-delay:.25s;pointer-events:auto}
.sc-p.is-open .sc-v,.sc-p:hover .sc-v,.sc-p:focus-within .sc-v{opacity:0}
.sc-row:has(.sc-p:hover) .sc-p.is-open:not(:hover) .sc-o{opacity:0;transition-delay:0s}
.sc-row:has(.sc-p:hover) .sc-p.is-open:not(:hover) .sc-v{opacity:1}
.sc-o h3{font-family:var(--fd);font-weight:700;font-size:clamp(36px,4vw,68px);line-height:.92;letter-spacing:-.05em}
.sc-o p{font-size:17px;line-height:1.5;color:rgba(255,255,255,.86);max-width:480px}
.sc-o .tag{box-shadow:inset 0 0 0 1px rgba(255,255,255,.4)}
@media (max-width:860px){.sc-row{flex-direction:column;height:auto!important}.sc-p{flex:none!important;height:96px;transition:height .8s var(--ez)}.sc-p.is-open,.sc-p:hover{height:440px}.sc-v{writing-mode:horizontal-tb;transform:none;left:22px;bottom:auto;top:44px}}

/* Services D — colour-shift slot machine */
.s-d .pin-in{min-height:900px;color:#fff;display:flex;flex-wrap:wrap;align-items:center;gap:48px;padding:110px var(--g) 60px}
.sd-bgs>*{position:absolute;inset:0;opacity:0;transition:opacity .9s var(--ez)}
.sd-bgs>.on{opacity:1}
.sd-bgs{position:absolute;inset:0;z-index:0}
.sd-left,.sd-right{position:relative;z-index:2}
.sd-left{flex:999 1 560px;min-width:0;display:flex;flex-direction:column;gap:30px}
.sd-slot{height:1.02em;overflow:hidden;font-family:var(--fd);font-weight:800;font-size:clamp(72px,11vw,196px);line-height:1.02;letter-spacing:-.06em;--f:min(4,calc(var(--p,0) * 4.7))}
.sd-reel{transform:translate3d(0,calc(var(--f) * -1.02em),0)}
.sd-reel span{display:block;height:1.02em}
.sd-desc{position:relative;min-height:150px}
.sd-desc>*{position:absolute;left:0;top:0;display:flex;flex-direction:column;gap:16px;opacity:0;transform:translate3d(0,20px,0);transition:opacity .6s,transform .8s var(--ez);max-width:560px}
.sd-desc>.on{opacity:1;transform:none}
.sd-desc p{font-size:19px;line-height:1.5;color:rgba(255,255,255,.88)}
.sd-desc .tag{box-shadow:inset 0 0 0 1px rgba(255,255,255,.45)}
.sd-right{flex:1 1 360px;display:flex;justify-content:center}
.sd-blob{position:relative;width:min(500px,80vw);aspect-ratio:1;border-radius:42% 58% 63% 37%/41% 44% 56% 59%;overflow:hidden;animation:morph 9s ease-in-out infinite;transform:rotate(calc(var(--p,0) * 140deg));box-shadow:0 40px 120px rgba(0,0,0,.35);background:rgba(255,255,255,.1)}
@keyframes morph{25%{border-radius:58% 42% 38% 62%/54% 38% 62% 46%}50%{border-radius:38% 62% 56% 44%/62% 52% 48% 38%}75%{border-radius:62% 38% 44% 56%/38% 60% 40% 62%}}
.sd-arts>*{position:absolute;inset:0;opacity:0;transform:scale(1.15) rotate(calc(var(--p,0) * -140deg));transition:opacity .8s,transform 1s var(--ez)}
.sd-arts>.on{opacity:1;transform:scale(1) rotate(calc(var(--p,0) * -140deg))}
.sd-dots{display:flex;gap:8px}
.sd-dots>*{width:34px;height:3px;border-radius:3px;background:rgba(255,255,255,.3);transition:background .4s}
.sd-dots>.on{background:#fff}

/* Shared live visuals for Why C / D */
.vis{position:relative;flex:1;min-height:150px;display:flex;align-items:center;justify-content:center}
.v-team{position:relative;width:200px;height:200px}
.v-team i{position:absolute;left:50%;top:50%;width:54px;height:54px;margin:-27px 0 0 -27px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--fm);font-style:normal;font-size:11px;color:#fff;animation:merge 5.5s var(--ez) infinite}
.v-team i:nth-child(1){background:var(--blue);--x:-70px;--y:-50px}.v-team i:nth-child(2){background:var(--red);--x:70px;--y:-50px;animation-delay:.1s}.v-team i:nth-child(3){background:#2a2a32;--x:-70px;--y:55px;animation-delay:.2s}.v-team i:nth-child(4){background:var(--blue-l);color:var(--ink);--x:70px;--y:55px;animation-delay:.3s}
.v-team b{position:absolute;left:50%;top:50%;width:96px;height:96px;margin:-48px 0 0 -48px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--paper);opacity:0;animation:ring 5.5s var(--ez) infinite}
@keyframes merge{0%,15%{transform:translate(var(--x),var(--y))}45%,70%{transform:translate(0,0) scale(.55);opacity:.95}90%,100%{transform:translate(var(--x),var(--y))}}
@keyframes ring{0%,35%{opacity:0;transform:scale(.6)}45%,70%{opacity:1;transform:scale(1)}85%,100%{opacity:0;transform:scale(1.4)}}
.v-speed{position:relative;width:170px;height:170px}
.v-speed svg{width:100%;height:100%;transform:rotate(-90deg)}
.v-speed .rg{stroke-dasharray:100;animation:fill 3.2s var(--ez) infinite}
@keyframes fill{0%{stroke-dashoffset:100}55%,85%{stroke-dashoffset:0}100%{stroke-dashoffset:0;opacity:0}}
.v-speed span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:44px;color:var(--yel)}
.v-load{position:absolute;left:10%;right:10%;bottom:-18px;height:4px;border-radius:4px;background:rgba(255,255,255,.12);overflow:hidden}
.v-load i{display:block;height:100%;width:100%;background:var(--blue-l);transform-origin:0 50%;animation:loadbar 3.2s var(--ez) infinite}
@keyframes loadbar{0%{transform:scaleX(0)}50%,100%{transform:scaleX(1)}}
.v-flow{width:100%;max-width:420px;height:auto;overflow:visible}
.v-flow .ln{fill:none;stroke:rgba(255,255,255,.18);stroke-width:1.5;stroke-dasharray:4 5}
.v-flow .nd rect{fill:#1d1d24;stroke:rgba(255,255,255,.18)}
.v-flow .nd text{fill:var(--paper);font-family:Geist Mono,monospace;font-size:11px;letter-spacing:.06em}
.v-flow .ai rect{fill:var(--blue);stroke:none}
.v-pkt{fill:var(--blue-l);offset-rotate:0deg;animation:pkt 2.6s linear infinite}
.v-pkt.p2{animation-delay:1.3s;fill:var(--yel)}
@keyframes pkt{from{offset-distance:0%}to{offset-distance:100%}}
.v-chart{width:100%;max-width:380px;overflow:visible}
.v-chart .grid{stroke:rgba(255,255,255,.07)}
.v-chart .ln{fill:none;stroke:var(--blue-l);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:100;animation:draw 3.6s var(--ez) infinite}
.v-chart .ar{fill:url(#vgr);opacity:.6;animation:fadeA 3.6s var(--ez) infinite}
@keyframes draw{0%{stroke-dashoffset:100}55%,90%{stroke-dashoffset:0}100%{stroke-dashoffset:0;opacity:0}}
@keyframes fadeA{0%,30%{opacity:0}60%,90%{opacity:.6}100%{opacity:0}}
.v-btn{position:absolute;right:8%;top:8%;padding:8px 14px;border-radius:999px;background:var(--paper);color:var(--ink);font-size:12px;font-weight:600;animation:btnp 3.6s ease-in-out infinite}
.v-cur{position:absolute;right:4%;top:22%;width:16px;height:20px;background:#fff;clip-path:polygon(0 0,0 82%,24% 64%,40% 100%,56% 93%,40% 58%,70% 58%);animation:curmv 3.6s ease-in-out infinite}
@keyframes btnp{0%,62%,72%,100%{transform:scale(1)}66%{transform:scale(.9);background:var(--blue-l)}}
@keyframes curmv{0%{transform:translate(40px,60px)}55%{transform:translate(-14px,-8px)}62%,68%{transform:translate(-14px,-8px) scale(.85)}75%,100%{transform:translate(-14px,-8px)}}
.v-globe{position:relative;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle at 34% 30%,#2a3cff,#1324C9 55%,#060b45);overflow:hidden;box-shadow:inset -18px -14px 40px rgba(0,0,0,.45),0 0 60px rgba(30,50,245,.35)}
.v-globe::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(255,255,255,0) 0 22px,rgba(255,255,255,.22) 22px 23px);background-size:46px 100%;animation:globe2 4s linear infinite}
.v-globe::after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(255,255,255,0) 0 28px,rgba(255,255,255,.14) 28px 29px)}
@keyframes globe2{to{background-position:46px 0}}
.v-globe i{position:absolute;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:#fff;z-index:2;box-shadow:0 0 0 0 rgba(255,255,255,.6);animation:ping 2.2s ease-out infinite}
.v-globe i.hq{background:var(--red);box-shadow:0 0 0 0 rgba(232,35,43,.7)}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(255,255,255,.55)}100%{box-shadow:0 0 0 14px rgba(255,255,255,0)}}
.v-pulse{width:100%;height:110px;overflow:visible}
.v-pulse .base{fill:none;stroke:rgba(255,255,255,.1);stroke-width:1.5}
.v-pulse .ecg{fill:none;stroke:var(--red);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:22 78;animation:ecg 2.8s linear infinite;filter:drop-shadow(0 0 6px rgba(232,35,43,.8))}
@keyframes ecg{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
.v-steps{display:flex;justify-content:space-between;width:100%;font-family:var(--fm);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--mi)}

/* Why C — living bento */
.y-c{background:var(--ink);padding:150px var(--g)}
.yc-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-rows:300px;gap:14px;margin-top:80px}
.yc-t{position:relative;border-radius:26px;background:var(--ink2);padding:28px;display:flex;flex-direction:column;gap:16px;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.yc-t>*{position:relative;z-index:3}
.yc-t h3{font-family:var(--fd);font-weight:600;font-size:clamp(24px,2.2vw,34px);letter-spacing:-.04em;line-height:1}
.yc-t p{color:#B4B4BA;font-size:15px;line-height:1.5;max-width:420px}
.yc-1{grid-column:span 3;grid-row:span 2}.yc-2,.yc-3{grid-column:span 3}.yc-4,.yc-5,.yc-6{grid-column:span 2}
.yc-1{background:linear-gradient(160deg,#1a1a22,#0f0f14)}
.yc-1 .v-team{transform:scale(1.4)}
@media (max-width:980px){.yc-grid{grid-auto-rows:auto}.yc-1,.yc-2,.yc-3,.yc-4,.yc-5,.yc-6{grid-column:span 6;grid-row:auto;min-height:320px}}

/* Why D — the bento assembles */
.y-d .pin-in{min-height:920px;background:var(--blue);padding:100px var(--g) 46px;display:flex;flex-direction:column;gap:30px}
.yd-grid{flex:1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:12px;perspective:1400px;min-height:560px}
.yd-t{position:relative;border-radius:24px;background:var(--ink);color:var(--paper);padding:24px;display:flex;flex-direction:column;gap:12px;overflow:hidden;--a:clamp(0,calc((var(--p,1) * 1.5 - var(--i,0) * .12) * 1.6),1);transform:translate3d(calc(var(--tx,0px) * (1 - var(--a))),calc(var(--ty,0px) * (1 - var(--a))),calc((1 - var(--a)) * -500px)) rotate(calc(var(--tr,0deg) * (1 - var(--a))));opacity:calc(.15 + var(--a) * .85)}
.yd-t>*{position:relative;z-index:3}
.yd-t h3{font-family:var(--fd);font-weight:600;font-size:clamp(20px,1.8vw,28px);letter-spacing:-.035em;line-height:1.02}
.yd-t p{color:#B4B4BA;font-size:14px;line-height:1.45}
.yd-t .vis{min-height:0}
.yd-t:nth-child(1){grid-column:span 2;grid-row:span 2;--tx:-50vw;--ty:-20vh;--tr:-14deg;background:#0B0B0D}
.yd-t:nth-child(2){--tx:40vw;--ty:-40vh;--tr:12deg}.yd-t:nth-child(3){--tx:60vw;--ty:10vh;--tr:-10deg}.yd-t:nth-child(4){grid-column:span 2;--tx:30vw;--ty:50vh;--tr:8deg}
.yd-t:nth-child(5){--tx:-20vw;--ty:60vh;--tr:16deg;display:none}
.yd-t:nth-child(1) .v-team{transform:scale(1.25)}
.yd-t:nth-child(1) h3{font-size:clamp(30px,3vw,48px)}
.yd-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;color:#fff}
@media (max-width:900px){.yd-grid{grid-template-columns:minmax(0,1fr);grid-template-rows:none}.yd-t,.yd-t:nth-child(1),.yd-t:nth-child(4){grid-column:auto;grid-row:auto;min-height:260px}}

/* Canada C — northern lights + particle leaf */
.c-c{position:relative;background:#05060a;overflow:hidden;min-height:960px;padding:150px var(--g) 90px;display:flex;align-items:center}
html.av-live .c-c{min-height:100vh}
.cc-stars{position:absolute;inset:0;background:radial-gradient(1px 1px at 12% 18%,#fff8,transparent),radial-gradient(1px 1px at 32% 8%,#fff6,transparent),radial-gradient(1.4px 1.4px at 54% 22%,#fff9,transparent),radial-gradient(1px 1px at 72% 12%,#fff6,transparent),radial-gradient(1px 1px at 88% 30%,#fff8,transparent),radial-gradient(1px 1px at 22% 40%,#fff5,transparent),radial-gradient(1.2px 1.2px at 64% 44%,#fff7,transparent),radial-gradient(1px 1px at 92% 6%,#fff6,transparent);opacity:.8}
.cc-aur{position:absolute;left:-20%;right:-20%;top:-30%;height:80%;background:radial-gradient(40% 60% at 30% 60%,rgba(59,214,198,.55),rgba(59,214,198,0) 70%),radial-gradient(35% 55% at 60% 50%,rgba(30,50,245,.7),rgba(30,50,245,0) 70%),radial-gradient(30% 50% at 80% 65%,rgba(163,173,255,.5),rgba(163,173,255,0) 70%);filter:blur(30px);mix-blend-mode:screen;animation:aurora 11s ease-in-out infinite alternate;transform-origin:50% 0}
@keyframes aurora{0%{transform:translateX(-6%) skewX(-8deg) scaleY(1)}50%{transform:translateX(4%) skewX(6deg) scaleY(1.15)}100%{transform:translateX(8%) skewX(-4deg) scaleY(.95)}}
.cc-cv{position:absolute;right:0;top:0;bottom:0;width:58%;pointer-events:none;z-index:1}
.cc-text{position:relative;z-index:2;max-width:640px;display:flex;flex-direction:column;gap:40px}
.cc-h{font-family:var(--fd);font-weight:600;font-size:clamp(44px,6vw,100px);line-height:.94;letter-spacing:-.05em;text-wrap:balance}
.cc-h b{font-weight:700;color:var(--red)}
.cc-facts{display:flex;flex-direction:column;gap:2px}
.cc-facts div{display:flex;align-items:center;gap:14px;padding:14px 0;box-shadow:inset 0 -1px 0 rgba(255,255,255,.1);font-size:16px;color:#d6d6dc}
.cc-facts i{width:8px;height:8px;border-radius:50%;background:var(--red);box-shadow:0 0 12px var(--red);flex:0 0 auto}
.cc-meta{display:flex;gap:28px;flex-wrap:wrap;color:var(--mi)}
.cc-sky{position:absolute;left:0;right:0;bottom:0;height:140px;z-index:1;opacity:.5}
.cc-sky path{fill:#0b0c14;stroke:rgba(255,255,255,.12);stroke-width:1}
@media (max-width:860px){.cc-cv{position:absolute;width:100%;opacity:.45}}

/* Canada D — postcard from Scarborough */
.c-d .pin-in{min-height:920px;background:#111015;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:36px;padding:100px var(--g) 50px;perspective:1800px}
.cd-head{text-align:center;display:flex;flex-direction:column;gap:14px;align-items:center}
.cd-head h2{font-family:var(--fd);font-weight:600;font-size:clamp(34px,4vw,64px);letter-spacing:-.045em;line-height:.98}
.cd-wrap{--in:min(1,calc(var(--p,0) * 3.2));--fl:calc(clamp(0,calc((var(--p,0) - .36) * 3.4),1) * 180deg);--pm:clamp(0,calc((var(--p,0) - .78) * 6),1)}
.cd-card{position:relative;width:min(900px,88vw);aspect-ratio:1.55;transform-style:preserve-3d;transform:translate3d(0,calc((1 - var(--in)) * 40vh),0) rotateX(calc((1 - var(--in)) * 40deg)) rotateZ(calc((1 - var(--in)) * -12deg + 2deg * var(--in))) rotateY(var(--fl))}
.cd-f,.cd-b{position:absolute;inset:0;border-radius:14px;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:0 60px 120px -30px rgba(0,0,0,.7)}
.cd-f{background:linear-gradient(180deg,#2b1d5e 0%,#7a2f6b 32%,#ff6a5c 58%,#ffb38a 70%,#1b1b3a 70.2%,#0e0e22 100%)}
.cd-sun{position:absolute;left:58%;top:42%;width:18%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#fff3c4,#ffcf7a 60%,rgba(255,207,122,0) 72%);animation:sunb 6s ease-in-out infinite}
@keyframes sunb{50%{transform:translateY(-6%) scale(1.04)}}
.cd-f svg{position:absolute;left:0;right:0;bottom:29.6%;width:100%;height:auto}
.cd-f svg path{fill:#120f26}
.cd-water{position:absolute;left:0;right:0;bottom:0;height:30%;background:repeating-linear-gradient(180deg,rgba(255,179,138,.18) 0 2px,rgba(0,0,0,0) 2px 9px);animation:water 3s linear infinite}
@keyframes water{to{background-position:0 18px}}
.cd-title{position:absolute;left:5%;top:7%;color:#fff;display:flex;flex-direction:column;gap:6px}
.cd-title small{font-family:var(--fm);font-size:11px;letter-spacing:.14em;text-transform:uppercase;opacity:.85}
.cd-title b{font-family:var(--fs);font-style:italic;font-weight:400;font-size:clamp(34px,4.4vw,72px);line-height:.9;letter-spacing:-.02em}
.cd-stamp{position:absolute;right:4%;top:6%;width:13%;aspect-ratio:.82;background:var(--paper);padding:5px;border-radius:2px;outline:2px dotted var(--paper);outline-offset:3px;transform:rotate(4deg)}
.cd-stamp div{width:100%;height:100%;background:var(--red);display:flex;align-items:center;justify-content:center}
.cd-stamp svg{width:70%;position:static}
.cd-stamp svg path,.cd-stamp svg polygon{fill:#fff}
.cd-b{background:#F6F2E8;color:#1d1a16;transform:rotateY(180deg);display:grid;grid-template-columns:1.25fr 1fr;gap:5%;padding:6%}
.cd-note{font-family:var(--fs);font-style:italic;font-size:clamp(18px,2.1vw,32px);line-height:1.25;letter-spacing:-.01em;border-right:1px solid rgba(29,26,22,.2);padding-right:6%;display:flex;flex-direction:column;justify-content:space-between}
.cd-note span{font-size:.8em}
.cd-addr{display:flex;flex-direction:column;justify-content:flex-end;gap:16px;position:relative}
.cd-addr i{display:block;height:1px;background:rgba(29,26,22,.3)}
.cd-addr .lbl{color:#6a645a}
.cd-b .cd-stamp{top:0;right:0;width:34%}
.cd-pm{position:absolute;right:16%;top:6%;width:42%;aspect-ratio:1;opacity:calc(var(--pm) * .8);transform:scale(calc(1.8 - var(--pm) * .8)) rotate(-14deg)}
.cd-pm svg{width:100%;height:100%;animation:spin 30s linear infinite}
.cd-hint{color:var(--mi)}

/* Testimonial C — marker highlights */
.q-c{background:var(--paper);color:var(--ink);padding:170px var(--g) 110px;overflow:hidden}
.qc-in{display:flex;flex-wrap:wrap;gap:64px;align-items:center}
.qc-who{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:22px;text-align:center}
.qc-face{position:relative;width:260px;height:260px;display:flex;align-items:center;justify-content:center}
.qc-face svg{position:absolute;inset:0;width:100%;height:100%;animation:spin 18s linear infinite}
.qc-face:hover svg{animation-duration:5s}
.qc-ph{width:190px;height:190px;border-radius:50%;background:radial-gradient(circle at 50% 36%,#d7d6cf 0 20%,rgba(0,0,0,0) 20.5%),radial-gradient(circle at 50% 100%,#d7d6cf 0 44%,rgba(0,0,0,0) 44.5%),var(--blue);display:flex;align-items:flex-end;justify-content:center;padding-bottom:12px;font-family:var(--fm);font-size:10px;color:var(--ink);transition:transform .8s var(--ez)}
.qc-face:hover .qc-ph{transform:scale(1.06)}
.qc-play{position:absolute;right:20px;bottom:20px;width:60px;height:60px;border-radius:50%;border:0;background:var(--ink);color:#fff;font-size:16px;cursor:pointer;transition:transform .5s var(--ez)}
.qc-play:hover{transform:scale(1.12)}
.qc-q{flex:999 1 560px;min-width:0;display:flex;flex-direction:column;gap:36px}
.qc-text{font-family:var(--fd);font-weight:500;font-size:clamp(32px,4.2vw,66px);line-height:1.12;letter-spacing:-.04em}
.hl{background:linear-gradient(var(--blue-l),var(--blue-l)) 0 88%/calc(clamp(0,calc((var(--p,1) - .32 - var(--k,0) * .1) * 5),1) * 100%) 42% no-repeat;padding:0 .06em}
.hl.k2{--k:1}.hl.k3{--k:2}
.qc-logos{margin-top:110px;padding-top:28px;box-shadow:inset 0 1px 0 rgba(11,11,13,.12)}
.qc-logos .mq-row span{display:inline-flex;align-items:center;justify-content:center;width:180px;height:56px;margin-right:14px;padding:0;border-radius:8px;box-shadow:inset 0 0 0 1px rgba(11,11,13,.15);font-family:var(--fm);font-size:11px;color:var(--mp)}

/* Testimonial D — cards dealt onto the table */
.q-d .pin-in{min-height:920px;background:radial-gradient(circle at 50% 60%,#1b1b24,#0B0B0D 70%)}
.qd-head{position:absolute;left:var(--g);top:100px;z-index:20;display:flex;flex-direction:column;gap:16px;max-width:520px}
.qd-table{position:absolute;inset:0}
.qd-c{position:absolute;left:50%;top:54%;width:clamp(260px,26vw,380px);margin-left:calc(clamp(260px,26vw,380px) / -2);transform-origin:50% 50%;--a:clamp(0,calc(var(--p,1) * (var(--n,5) + .6) - var(--i,0)),1);--e:calc(1 - (1 - var(--a)) * (1 - var(--a)));transform:translate3d(calc(var(--x,0px) * var(--e)),calc(-50% + var(--y,0px) * var(--e) + (1 - var(--e)) * 75vh),0) rotate(calc(var(--r,0deg) * var(--e) + (1 - var(--e)) * 50deg));opacity:clamp(0,calc(var(--a) * 4),1);z-index:calc(var(--i,0) + 1)}
.qd-c:nth-child(1){--x:-36vw;--y:-6vh;--r:-9deg}.qd-c:nth-child(2){--x:-13vw;--y:9vh;--r:5deg}.qd-c:nth-child(3){--x:12vw;--y:-10vh;--r:-4deg}.qd-c:nth-child(4){--x:34vw;--y:6vh;--r:8deg}.qd-c:nth-child(5){--x:0px;--y:2vh;--r:-2deg}
.qd-in{border-radius:20px;background:var(--card);color:var(--ink);padding:26px;display:flex;flex-direction:column;gap:22px;box-shadow:0 40px 80px -20px rgba(0,0,0,.6);transition:transform .6s var(--ez)}
.qd-c:hover .qd-in{transform:translateY(-10px) rotate(-1deg) scale(1.03)}
.qd-in q{font-family:var(--fd);font-weight:500;font-size:clamp(18px,1.6vw,24px);line-height:1.25;letter-spacing:-.025em;quotes:'“' '”'}
.qd-by{display:flex;align-items:center;gap:12px;font-size:14px}
.qd-by i{width:38px;height:38px;border-radius:50%;background:var(--paper2);flex:0 0 auto}
.qd-c.cta .qd-in{background:var(--blue);color:#fff}
.qd-c.cta q{font-family:var(--fs);font-style:italic;font-size:clamp(28px,2.6vw,40px)}
.qd-stars{color:var(--blue);letter-spacing:2px;font-size:14px}
@media (max-width:860px){.qd-c{width:78vw;margin-left:-39vw}.qd-c:nth-child(n){--x:0px}.qd-c:nth-child(1){--y:-24vh}.qd-c:nth-child(2){--y:-8vh}.qd-c:nth-child(3){--y:8vh}.qd-c:nth-child(4){--y:22vh}}
@media (prefers-reduced-motion:reduce){.pill::before,.pill::after,.v-team i,.v-team b,.v-speed .rg,.v-load i,.v-pkt,.v-chart .ln,.v-chart .ar,.v-btn,.v-cur,.v-globe::before,.v-globe i,.v-pulse .ecg,.sd-blob,.cc-aur,.cd-sun,.cd-water,.cd-pm svg,.qc-face svg{animation:none}}

/* Showreel stand-in: our work scenes cut together like a video */
.reel{position:absolute;inset:0;overflow:hidden;background:#000}
.reel .scene{opacity:0;animation:reelcut 16s linear infinite}
.reel .scene:nth-child(2){animation-delay:4s}.reel .scene:nth-child(3){animation-delay:8s}.reel .scene:nth-child(4){animation-delay:12s}
@keyframes reelcut{0%{opacity:0;transform:scale(1.22)}3%{opacity:1}25%{opacity:1}28%{opacity:0;transform:scale(1.03)}100%{opacity:0;transform:scale(1.03)}}
.reel-ui{position:absolute;left:24px;right:24px;bottom:20px;display:flex;justify-content:space-between;align-items:center;gap:16px;color:#fff;font-family:var(--fm);font-size:11px;letter-spacing:.08em;text-transform:uppercase;z-index:3;text-shadow:0 1px 8px rgba(0,0,0,.5)}
.reel-ui i{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--red);margin-right:8px;animation:pulse 1.4s ease-in-out infinite}
.reel-bar{position:absolute;left:0;right:0;bottom:0;height:2px;background:rgba(255,255,255,.2);z-index:3}
.reel-bar i{display:block;height:100%;background:#fff;transform-origin:0 50%;animation:reelbar 16s linear infinite}
@keyframes reelbar{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* Hero C — the word becomes the video */
.h-c .pin-in{min-height:940px;background:#000;--e:clamp(0,calc((var(--p,0) - .04) / .62),1);--k:clamp(0,calc((var(--p,0) - .72) * 5),1)}
.hc-mask{position:absolute;inset:0;background:var(--ink);color:#fff;mix-blend-mode:multiply;display:flex;flex-direction:column;align-items:center;justify-content:center;transform:scale(calc(1 + var(--e) * var(--e) * var(--e) * 36));transform-origin:50% 50%;opacity:calc(1 - clamp(0,calc((var(--e) - .5) * 3),1));z-index:2;will-change:transform}
.hc-word{font-family:var(--fd);font-weight:800;font-stretch:75%;font-variation-settings:'wdth' 75,'opsz' 96;font-size:clamp(84px,17.5vw,320px);line-height:.8;letter-spacing:-.04em;text-transform:uppercase;white-space:nowrap}
.hc-ui{position:absolute;left:var(--g);right:var(--g);z-index:4;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:#cfcfd4;opacity:calc(1 - var(--e) * 3)}
.hc-top{top:100px}.hc-bot{bottom:40px;align-items:flex-end}
.hc-shade{position:absolute;inset:0;z-index:3;background:linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,0) 35%,rgba(0,0,0,0) 45%,rgba(0,0,0,.75));opacity:var(--k);pointer-events:none}
.hc-end{position:absolute;left:var(--g);right:var(--g);bottom:56px;z-index:5;display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap;color:#fff;opacity:var(--k);transform:translate3d(0,calc((1 - var(--k)) * 40px),0);pointer-events:none}
.h-c .pin-in[style] .hc-end{pointer-events:auto}
.hc-end h1{font-family:var(--fd);font-weight:700;font-size:clamp(48px,7.4vw,128px);line-height:.88;letter-spacing:-.055em}
.hc-end h1 .ser{color:var(--blue-l)}
.hc-end p{font-size:18px;line-height:1.45;max-width:380px;color:rgba(255,255,255,.88)}
.hc-sound{position:absolute;right:var(--g);top:100px;z-index:5;height:40px;padding:0 16px;border-radius:999px;border:0;background:rgba(255,255,255,.14);color:#fff;font-family:var(--fm);font-size:11px;letter-spacing:.08em;cursor:pointer;opacity:var(--k);backdrop-filter:blur(8px)}

/* Hero D — the corner reel takes over */
.h-d .pin-in{min-height:940px;background:var(--paper);color:var(--ink);--e:clamp(0,calc((var(--p,0) - .05) / .66),1);--ee:calc(var(--e) * var(--e) * (3 - 2 * var(--e)));--k:clamp(0,calc((var(--p,0) - .74) * 5),1)}
.hd-ticker{position:absolute;left:0;right:0;top:84px;z-index:3;opacity:calc(1 - var(--ee) * 2);border-top:1px solid rgba(11,11,13,.12);border-bottom:1px solid rgba(11,11,13,.12);padding:10px 0;font-family:var(--fm);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--mp)}
.hd-title{position:absolute;left:var(--g);top:150px;z-index:1;font-family:var(--fd);font-weight:700;font-size:clamp(60px,9.6vw,172px);line-height:.86;letter-spacing:-.058em;transform:translate3d(0,calc(var(--ee) * -24vh),0) scale(calc(1 - var(--ee) * .1));transform-origin:0 0;opacity:calc(1 - var(--ee) * 1.4)}
.hd-title .ser{color:var(--blue)}
.hd-left{position:absolute;left:var(--g);bottom:48px;z-index:1;display:flex;flex-direction:column;gap:22px;max-width:420px;opacity:calc(1 - var(--ee) * 2.5)}
.hd-left p{font-size:18px;line-height:1.45;color:var(--mp)}
.hd-card{position:absolute;right:calc(var(--g) * (1 - var(--ee)));bottom:calc(48px * (1 - var(--ee)));width:calc(36% + 64% * var(--ee));height:calc(48% + 52% * var(--ee));border-radius:calc(22px * (1 - var(--ee)));overflow:hidden;z-index:2;box-shadow:0 40px 80px -30px rgba(11,11,13,.45)}
.hd-play{position:absolute;left:50%;top:50%;width:96px;height:96px;margin:-48px 0 0 -48px;border-radius:50%;border:0;background:rgba(255,255,255,.92);color:var(--ink);font-family:var(--fm);font-size:11px;letter-spacing:.08em;z-index:4;cursor:pointer;opacity:calc(1 - var(--k));transition:transform .5s var(--ez)}
.hd-play:hover{transform:scale(1.1)}
.hd-shade{position:absolute;inset:0;z-index:3;background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(0,0,0,.72));opacity:var(--k)}
.hd-end{position:absolute;left:var(--g);right:var(--g);bottom:60px;z-index:4;display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap;color:#fff;opacity:var(--k);transform:translate3d(0,calc((1 - var(--k)) * 40px),0)}
.hd-end h2{font-family:var(--fd);font-weight:700;font-size:clamp(40px,5.6vw,96px);line-height:.9;letter-spacing:-.05em;max-width:900px}
.hd-end h2 .ser{color:var(--blue-l)}
@media (max-width:860px){.hd-card{left:calc(var(--g) * (1 - var(--ee)));width:auto;height:calc(36% + 64% * var(--ee))}.hd-left{display:none}}
@media (prefers-reduced-motion:reduce){.reel .scene{animation:none}.reel .scene:first-child{opacity:1}.reel-bar i{animation:none}}

/* ================= ROUND 3 ================= */
/* Tagline A — words come to life: faint, low, blurred and tinted, then rise into place */
.ta-p .w,.ta-p .pill{--o:clamp(0,calc((var(--p,1) * var(--n,1) * 1.32 - var(--i,0) - var(--n,1) * .16) * 1.5),1)}
.ta-p .w{display:inline-block;white-space:pre;opacity:calc(.1 + .9 * var(--o));transform:translate3d(0,calc((1 - var(--o)) * .38em),0) rotate(calc((1 - var(--o)) * 5deg));transform-origin:0 100%;filter:blur(calc((1 - var(--o)) * 7px))}
.ta-p .w:not(.em){color:color-mix(in srgb,#A3ADFF calc((1 - var(--o)) * 80%),#EEEDE8)}
.ta-p .w.em{text-shadow:0 0 calc(var(--o) * 30px) rgba(163,173,255,.45)}

/* Hero E — the reel sits under the headline, then takes the screen */
.h-e .pin-in{min-height:940px;background:var(--ink);--e:clamp(0,calc((var(--p,0) - .03) / .66),1);--ee:calc(var(--e) * var(--e) * (3 - 2 * var(--e)));--k:clamp(0,calc((var(--p,0) - .74) * 5),1)}
.he-title{position:absolute;left:var(--g);right:var(--g);top:96px;z-index:1;display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap;transform:translate3d(0,calc(var(--ee) * -30vh),0);opacity:calc(1 - var(--ee) * 1.6)}
.he-title h1{font-family:var(--fd);font-weight:700;font-size:clamp(56px,9.4vw,168px);line-height:.86;letter-spacing:-.058em}
.he-title h1 .ser{color:var(--blue-l);font-size:1.06em}
.he-side{max-width:340px;display:flex;flex-direction:column;gap:18px;padding-bottom:14px}
.he-side p{font-size:17px;line-height:1.45;color:#cfcfd4}
.he-frame{position:absolute;left:calc(var(--g) * (1 - var(--ee)));right:calc(var(--g) * (1 - var(--ee)));top:calc(53% * (1 - var(--ee)));bottom:calc(var(--g) * .5 * (1 - var(--ee)));border-radius:calc(22px * (1 - var(--ee)));overflow:hidden;z-index:2}
.he-frame .reel{transform:scale(calc(1.12 - .12 * var(--ee)))}
.he-play{position:absolute;left:50%;top:50%;width:104px;height:104px;margin:-52px 0 0 -52px;border-radius:50%;border:0;background:var(--blue);color:#fff;font-family:var(--fm);font-size:11px;letter-spacing:.1em;z-index:4;cursor:pointer;opacity:calc(1 - var(--k));box-shadow:0 0 0 0 rgba(30,50,245,.5);animation:playring 2.4s ease-out infinite}
@keyframes playring{0%{box-shadow:0 0 0 0 rgba(30,50,245,.55)}100%{box-shadow:0 0 0 28px rgba(30,50,245,0)}}
.he-shade{position:absolute;inset:0;z-index:3;background:linear-gradient(180deg,rgba(0,0,0,.25),rgba(0,0,0,0) 30%,rgba(0,0,0,0) 50%,rgba(0,0,0,.78));opacity:var(--k);pointer-events:none}
.he-end{position:absolute;left:var(--g);right:var(--g);bottom:56px;z-index:4;display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap;color:#fff;opacity:var(--k);transform:translate3d(0,calc((1 - var(--k)) * 40px),0)}
.he-end .big{font-family:var(--fd);font-weight:700;font-size:clamp(36px,4.6vw,78px);line-height:.92;letter-spacing:-.05em;max-width:900px}
.he-end .big .ser{color:var(--blue-l)}
.he-tick{position:absolute;left:0;right:0;top:0;z-index:4;padding:12px 0;background:rgba(11,11,13,.35);backdrop-filter:blur(10px);color:#fff;font-family:var(--fm);font-size:12px;letter-spacing:.08em;text-transform:uppercase;opacity:var(--k)}

/* Hero F — a cinematic letterbox opens up */
.h-f .pin-in{min-height:940px;background:var(--ink);--e:clamp(0,calc((var(--p,0) - .03) / .66),1);--ee:calc(var(--e) * var(--e) * (3 - 2 * var(--e)));--k:clamp(0,calc((var(--p,0) - .74) * 5),1)}
.hf-frame{position:absolute;left:0;right:0;top:calc(34% * (1 - var(--ee)));bottom:calc(27% * (1 - var(--ee)));overflow:hidden;z-index:1}
.hf-frame .reel{transform:scale(calc(1.2 - .2 * var(--ee)))}
.hf-frame::before,.hf-frame::after{content:'';position:absolute;left:0;right:0;height:1px;background:rgba(255,255,255,.35);z-index:4;opacity:calc(1 - var(--ee) * 2)}
.hf-frame::before{top:0}.hf-frame::after{bottom:0}
.hf-top,.hf-bot{position:absolute;left:var(--g);right:var(--g);z-index:2;display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.hf-top{bottom:calc(66% + 20px);transform:translate3d(0,calc(var(--ee) * -42vh),0);opacity:calc(1 - var(--ee) * 1.5)}
.hf-bot{top:calc(73% + 20px);align-items:flex-start;transform:translate3d(0,calc(var(--ee) * 42vh),0);opacity:calc(1 - var(--ee) * 1.5)}
.hf-w{font-family:var(--fd);font-weight:700;font-size:clamp(56px,9vw,160px);line-height:.84;letter-spacing:-.058em;white-space:nowrap}
.hf-w .ser{color:var(--blue-l);font-size:1.08em}
.hf-bot .hf-w{order:2}
.hf-side{display:flex;flex-direction:column;gap:16px;max-width:360px;padding-top:8px}
.hf-side p{font-size:17px;line-height:1.45;color:#cfcfd4}
.hf-tc{display:flex;gap:18px;color:#B9B8B2}
.hf-shade{position:absolute;inset:0;z-index:3;background:radial-gradient(120% 90% at 50% 55%,rgba(0,0,0,0) 40%,rgba(0,0,0,.7));opacity:var(--k);pointer-events:none}
.hf-end{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;text-align:center;color:#fff;padding:0 var(--g);opacity:var(--k);transform:scale(calc(.94 + var(--k) * .06))}
.hf-end .big{font-family:var(--fd);font-weight:700;font-size:clamp(40px,5.4vw,96px);line-height:.92;letter-spacing:-.05em;max-width:1000px;text-wrap:balance}
.hf-end .big .ser{color:var(--blue-l)}
@media (max-width:760px){.he-side{display:none}.hf-side{display:none}}

/* ================= ROUND 4 — one-page build ================= */
html.av-live .av[data-bgfade] [data-bg],html.av-live .av[data-bgfade] [data-bg]>.pin-in{background:transparent!important}
.av[data-bgfade]{transition:none}
.nav-logo{transition:filter .5s}
.nav.nav-dark{color:var(--ink)}
.nav.nav-dark .nav-logo{filter:invert(1)}
.nav.nav-dark .nav-cta:hover{color:#fff}

/* ================= ROUND 5 — homepage refinements ================= */
/* Hero: still thumbnail until the real video arrives */
.he-thumb{position:absolute;inset:0;background:radial-gradient(60% 80% at 72% 38%,rgba(30,50,245,.45),rgba(30,50,245,0) 62%),radial-gradient(50% 70% at 18% 78%,rgba(163,173,255,.18),rgba(163,173,255,0) 60%),radial-gradient(30% 40% at 52% 52%,rgba(255,207,63,.12),rgba(255,207,63,0) 70%),linear-gradient(160deg,#1b1d2c,#0c0c10 70%);transform:scale(calc(1.1 - .1 * var(--ee,0)))}
.he-thumb::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 55%,rgba(0,0,0,.35))}
.h-e .he-side .btns{display:flex;gap:12px;flex-wrap:wrap}

/* Idea: one headline, animated once it is properly in view */
.t-a{position:relative}
.ta-in{min-height:820px;display:flex;align-items:center;padding:140px var(--g);background:var(--ink)}
html.av-live .ta-in{min-height:100vh}
.ta-p .w,.ta-p .pill{--o:1;transition:opacity .9s var(--ez),transform 1.1s var(--ez),filter .9s var(--ez),color 1.4s var(--ez);transition-delay:calc(var(--i,0) * 70ms)}
html.av-live .ta-p:not(.in) .w,html.av-live .ta-p:not(.in) .pill{--o:0}
.ta-p .pill{transform:scale(var(--o)) rotate(calc((1 - var(--o)) * -25deg))}
.pill.p-grow{background:#16a35f}
.pill.p-grow::before{left:50%;bottom:22%;width:.9em;height:.5em;margin-left:-.45em;background:linear-gradient(to top,#fff 0 100%,transparent 0) 0 100%/.22em 40% no-repeat,linear-gradient(to top,#fff 0 100%,transparent 0) .34em 100%/.22em 70% no-repeat,linear-gradient(to top,#fff 0 100%,transparent 0) .68em 100%/.22em 100% no-repeat;transform-origin:50% 100%;animation:growbars 2.4s var(--ez) infinite}
@keyframes growbars{0%{transform:scaleY(.25)}55%,85%{transform:scaleY(1)}100%{transform:scaleY(.25)}}

/* Work: still images, kept with the blue curtain reveal */
.ph-img{position:absolute;inset:0;background:linear-gradient(135deg,var(--a,#22252f),var(--b,#121318));transition:transform 1.2s var(--ez)}
.ph-img::before{content:'';position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,255,255,0) 40%,rgba(255,255,255,.06) 50%,rgba(255,255,255,0) 60%)}
.ph-img::after{content:'Project image';position:absolute;left:16px;bottom:14px;font-family:var(--fm);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.45)}
.wx-frame .ph-img{transform:scale(calc(1.14 - .14 * min(1,calc(var(--p,1) * 1.8))))}
.wx-frame:hover .ph-img{transform:scale(1.04)}
.wm-frame:hover .ph-img{transform:scale(1.06)}
.ph1{--a:#2d4234;--b:#121a14}.ph2{--a:#2b3442;--b:#101419}.ph3{--a:#45291f;--b:#170e0b}.ph4{--a:#272c55;--b:#0e1024}.ph5{--a:#3f3a2a;--b:#17150e}.ph6{--a:#3a2a40;--b:#140e17}.ph7{--a:#21393c;--b:#0c1617}.ph8{--a:#40262c;--b:#180d10}
.wa-more .pin-in{gap:0;padding:60px 0}
.wa-more .wm-track{padding-top:20px}

/* Craft: compact panels that fit one screen */
.s-c{padding:110px var(--g) 100px}
.s-c .sc-row{height:440px;margin-top:48px}
html.av-live .s-c .sc-row{height:50vh;min-height:400px}
.s-c .sc-o h3{font-size:clamp(28px,2.8vw,48px);line-height:1}
.s-c .sc-o{gap:14px}
.s-c .sc-o p{font-size:16px}

/* How we work: centred title, cards leave before the next section */
.head-c{justify-content:center;text-align:center}
.head-c>div{align-items:center}
.p-a .pin-in{--x:clamp(0,calc((var(--p,0) - .8) / .2),1)}
.p-a .pa-stage{--f:min(calc(var(--n,5) - 1),calc(var(--p,0) * (var(--n,5) - 1) / .76));opacity:calc(1 - var(--x));transform:translate3d(0,calc(var(--x) * 90px),0) scale(calc(1 - var(--x) * .12))}
.p-a .head{opacity:calc(1 - var(--x) * 1.4);transform:translate3d(0,calc(var(--x) * -40px),0)}

/* What you get: centred title, names on frosted glass */
.db-top.c{justify-content:center;text-align:center}
.db-top.c>div{align-items:center}

/* Why us: three cards that arrive on their own */
.y-d3{padding:150px var(--g);background:var(--blue);color:#fff}
.yd3-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:72px;perspective:1400px}
@media (max-width:900px){.yd3-grid{grid-template-columns:minmax(0,1fr)}}
.yc3{position:relative;border-radius:26px;background:var(--ink);color:var(--paper);padding:30px;min-height:460px;display:flex;flex-direction:column;justify-content:space-between;gap:20px;overflow:hidden;transition:opacity 1s var(--ez),transform 1.4s var(--ez);transition-delay:calc(var(--i,0) * 160ms)}
.yc3>*{position:relative;z-index:3}
.yc3 h3{font-family:var(--fd);font-weight:600;font-size:clamp(26px,2.4vw,38px);letter-spacing:-.04em;line-height:1}
.yc3 p{color:#B4B4BA;font-size:16px;line-height:1.5;margin-top:12px}
.yc3 .vis{min-height:200px}
.yc3:nth-child(1){--tx:-34vw;--ty:12vh;--tr:-12deg}.yc3:nth-child(2){--tx:0px;--ty:40vh;--tr:5deg}.yc3:nth-child(3){--tx:34vw;--ty:12vh;--tr:12deg}
html.av-live .yd3-grid:not(.in) .yc3{opacity:0;transform:translate3d(var(--tx),var(--ty),-400px) rotate(var(--tr))}
/* ================= ROUND 5b — fixes ================= */
.av a.btn-blue{color:#fff}.av a.btn-blue:hover{color:var(--ink)}
.av a.btn-paper{color:var(--ink)}.av a.btn-paper:hover{color:#fff}
.av a.btn-ink{color:var(--paper)}.av a.btn-ink:hover{color:#fff}
.w-a{padding-bottom:0}
.wa-more .pin-in{justify-content:flex-start;padding:10vh 0 0;min-height:620px}
html.av-live .wa-more .pin-in{min-height:100vh}
.s-c .sc-p::after{background:linear-gradient(180deg,rgba(0,0,0,.3),rgba(0,0,0,0) 22%,rgba(0,0,0,0) 34%,rgba(0,0,0,.9) 74%)}
.s-c .sc-p.is-open .sc-art,.s-c .sc-row .sc-p:hover .sc-art{transform:translate3d(0,-20%,0) scale(.8)}
.s-c .sc-v{font-size:clamp(20px,1.7vw,28px);bottom:24px}
.p-a .pin-in{--x:clamp(0,calc((var(--p,0) - .7) / .2),1)}
.p-a .pa-stage{--f:min(calc(var(--n,5) - 1),calc(var(--p,0) * (var(--n,5) - 1) / .68))}
.yc3 .vis{min-height:220px}
.yc3 .v-team{transform:scale(1.15)}
.yc3 .v-chart{aspect-ratio:300/120;height:auto;width:100%}
.yc3 .v-flow{aspect-ratio:420/120;height:auto;width:100%}
.ta-p .w.tl{margin-left:-.12em}
.p-a .pin-in{--x:clamp(0,calc((var(--p,0) - .78) / .2),1)}
.p-a .pa-stage{--f:min(calc(var(--n,5) - 1),calc(var(--p,0) * (var(--n,5) - 1) / .72))}
.p-a .head{opacity:1;transform:none}

/* ================= ROUND 6 ================= */
/* testimonial — centred */
.q-c .qc-in{flex-direction:column;align-items:center;text-align:center;gap:44px}
.q-c .qc-q{flex:none;width:100%;max-width:1100px;align-items:center}
.q-c .qc-text{text-align:center}
.q-c .qc-text .ml{display:block}
.q-c .qc-q figcaption{justify-content:center}
/* footer — animated wordmark */
.ft-logo{overflow:visible}
.ft-mark{display:block;width:100%;height:auto;color:var(--paper);overflow:hidden;cursor:default}
.ft-mark path{fill:currentColor;transform-box:fill-box;transform-origin:50% 100%;transition:transform 1.1s var(--ez),fill .5s,opacity .8s;transition-delay:calc(var(--i,0) * 75ms)}
html.av-live .ft-logo:not(.in) .ft-mark path{transform:translate3d(0,115%,0) rotate(calc(10deg - var(--i,0) * 2deg));fill:var(--blue-l)}
.ft-logo.in .ft-mark path{animation:ftwave 1.2s var(--ez) calc(1.1s + var(--i,0) * 75ms) 1 backwards}
@keyframes ftwave{0%{fill:var(--paper)}40%{fill:var(--blue-l)}100%{fill:var(--paper)}}
.ft-mark path:hover{transform:translate3d(0,-9%,0) rotate(-3deg);fill:var(--blue-l);transition-delay:0s;transition-duration:.45s}
.ft-mark:hover path:not(:hover){opacity:.55;transition-delay:0s}
.ft-sweep{position:relative}
.ft-sweep::after{content:'';position:absolute;left:0;right:0;bottom:-14px;height:2px;background:linear-gradient(90deg,var(--blue),var(--blue-l));transform-origin:0 50%;transform:scaleX(1);transition:transform 1.6s var(--io) .5s}
html.av-live .ft-logo:not(.in) .ft-sweep::after{transform:scaleX(0)}
@media (prefers-reduced-motion:reduce){.ft-logo .ft-mark path{animation:none}}
/* ================= ROUND 7 ================= */
/* craft cards — illustrations sized to the shorter card, kept above the text */
.s-c .sc-row{--ch:440px}
html.av-live .s-c .sc-row{--ch:max(400px,50vh)}
.s-c .sba{padding:30px 26px calc(var(--ch) * .46)}
.s-c .sc-p.is-open .sc-art,.s-c .sc-row .sc-p:hover .sc-art{transform:none}
.s-c .sba-1 .win{width:auto;height:100%;max-width:100%}
.s-c .sba-3 .rings{width:auto;height:100%;max-width:100%}
.s-c .sba-4 .prod{width:auto;height:94%;max-width:78%;padding:7%}
.s-c .sba-4 .prod b{width:26%;font-size:15px}
.s-c .sba-2{justify-content:center;gap:12px}
.s-c .sba-2 i{height:10px}
/* how we work — no exit, cards stay until the section scrolls away */
.p-a .pin-in{--x:0}
.p-a .pa-stage{--f:min(calc(var(--n,5) - 1),calc(var(--p,0) * (var(--n,5) - 1) / .8))}
/* what you walk away with — outlined names */
.db-names p{-webkit-text-stroke:12px #0B0B0D;paint-order:stroke fill;text-shadow:0 0 40px rgba(11,11,13,.55)}
/* ROUND 8 — soft bottom edge on How we work so cards dissolve instead of being cut */
.p-a .pin-in{-webkit-mask-image:linear-gradient(180deg,#000 0,#000 74%,rgba(0,0,0,0) 100%);mask-image:linear-gradient(180deg,#000 0,#000 74%,rgba(0,0,0,0) 100%)}
/* ================= ROUND 9 — craft illustrations ================= */
/* 01 Web design — browser with address bar + spinning globe */
.s-c .sba-1 .win-wrap{position:relative;height:100%;aspect-ratio:4/3;max-width:100%}
.s-c .sba-1 .win-wrap .win{width:100%;height:100%;max-width:none}
.sba-1 .wb{gap:4px!important}
.sba-1 .url{flex:1;min-width:0;height:62%;margin:0 8% 0 5%;border-radius:99px;background:#fff;display:flex;align-items:center;gap:4px;padding:0 7px;overflow:hidden;white-space:nowrap;font-family:var(--fm);font-size:8px;color:#6b6b74}
.sba-1 .url .ug{display:inline-flex;color:#1E32F5}
.sba-1 .url svg{width:9px;height:9px}
.sba-1 svg circle,.sba-1 svg ellipse,.sba-1 svg line{fill:none;stroke:currentColor;stroke-width:2.4}
.sba-1 .globe-b{position:absolute;right:-8%;bottom:-12%;width:31%;aspect-ratio:1;border-radius:50%;background:#0B0B0D;color:#A3ADFF;display:flex;align-items:center;justify-content:center;box-shadow:0 18px 40px rgba(0,0,0,.4),inset 0 0 0 1px rgba(255,255,255,.12);animation:bob 3.4s ease-in-out infinite}
.sba-1 .globe-b svg{width:64%;height:64%}
.sba-1 .globe-b svg *{stroke-width:1.6}
.sba-1 .ptr{position:absolute;left:28%;top:58%;width:16px;height:20px;background:#fff;clip-path:polygon(0 0,0 80%,25% 62%,45% 100%,62% 93%,42% 57%,78% 57%);filter:drop-shadow(0 2px 3px rgba(0,0,0,.4));animation:ptrmove 4.5s var(--ez) infinite}
@keyframes ptrmove{0%,100%{transform:translate(0,0)}40%,62%{transform:translate(70px,-34px)}50%{transform:translate(70px,-34px) scale(.82)}}
/* 02 Custom software — code editor typing, gear, deploy badge */
.sbx-2{background:linear-gradient(160deg,#17172a,#0B0B0D 70%)}
.s-c .sbx-2 .ide{height:100%;aspect-ratio:4/3;max-width:100%;border-radius:12px;background:#15151b;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 30px 60px rgba(0,0,0,.45);display:flex;flex-direction:column;overflow:hidden;font-family:var(--fm)}
.ide-bar{display:flex;align-items:center;gap:5px;padding:0 10px;height:14%;min-height:18px;background:#1f1f28;flex:none}
.ide-bar .d{width:7px;height:7px;border-radius:50%;flex:none}
.ide-tab{margin-left:10px;align-self:flex-end;font-size:9px;color:#A3ADFF;background:#15151b;padding:4px 9px;border-radius:6px 6px 0 0;white-space:nowrap}
.ide-body{flex:1;display:flex;gap:10px;padding:7% 6% 0 0;overflow:hidden}
.ide-gut{display:flex;flex-direction:column;gap:9px;width:24px;flex:none;text-align:right;font-size:8px;line-height:8px;color:#4a4a58}
.ide-code{position:relative;flex:1;min-width:0;display:flex;flex-direction:column;gap:9px}
.ide-code .cl{display:flex;gap:5px;height:8px;padding-left:calc(var(--ind,0) * 14px);clip-path:inset(0 100% 0 0);animation:codetype 6s steps(9,end) infinite;animation-delay:calc(var(--l,0) * .45s)}
.ide-code .cl b{display:block;height:8px;border-radius:4px;flex:none}
.cl .k{background:#c678dd}.cl .f{background:#61afef}.cl .s{background:#98c379}.cl .v{background:#e5c07b}.cl .p{background:#5c6370}.cl .c{background:#3a3f4b}
@keyframes codetype{0%{clip-path:inset(0 100% 0 0)}9%,80%{clip-path:inset(0 0 0 0)}88%,100%{clip-path:inset(0 100% 0 0)}}
.ide-code .caret{width:2px;height:10px;background:#EEEDE8;animation:caretb 1s steps(1) infinite}
@keyframes caretb{50%{opacity:0}}
.sbx-2 .ide-gear{position:absolute;right:8%;top:14%;width:20%;max-width:70px;aspect-ratio:1;animation:spin 9s linear infinite}
.ide-gear svg{width:100%;height:100%;display:block}
.ide-gear .t{fill:none;stroke:#1E32F5;stroke-width:7;stroke-dasharray:5.5 3.3}
.ide-gear .h{fill:none;stroke:#A3ADFF;stroke-width:3}
.sbx-2 .ide-ok{position:absolute;left:8%;bottom:calc(var(--ch,440px) * .46 + 4px);font-family:var(--fm);font-size:10px;color:#0B0B0D;background:#1fbf6a;padding:6px 11px;border-radius:99px;white-space:nowrap;animation:okpop 6s var(--ez) infinite}
@keyframes okpop{0%,58%{opacity:0;transform:translateY(8px) scale(.8)}64%,84%{opacity:1;transform:none}92%,100%{opacity:0;transform:translateY(-6px)}}
/* 05 Digital marketing — ad post with live engagement + reach chart */
.sbx-5{background:linear-gradient(160deg,#1b1640,#0B0B0D 72%)}
.s-c .sbx-5 .mk-wrap{position:relative;height:100%;aspect-ratio:3/4;max-width:100%;transition:transform 1s var(--ez)}
.s-c .sc-p.is-open .mk-wrap,.s-c .sc-row .sc-p:hover .mk-wrap{transform:translateX(-52%)}
.s-c .sc-row:has(.sc-p:hover) .sc-p.is-open:not(:hover) .mk-wrap{transform:none}
.mk-wrap .ad{position:absolute;inset:0;border-radius:12px;background:#F7F6F2;display:flex;flex-direction:column;gap:6%;padding:7%;overflow:hidden;box-shadow:0 30px 60px rgba(0,0,0,.45)}
.ad-top{display:flex;align-items:center;gap:6px}
.ad-av{width:16px;height:16px;border-radius:50%;flex:none;background:linear-gradient(135deg,#1E32F5,#A3ADFF)}
.ad-n{width:34%;height:6px;border-radius:3px;background:#0B0B0D}
.ad-sp{margin-left:auto;font-family:var(--fm);font-size:7px;letter-spacing:.06em;text-transform:uppercase;color:#8a8a92}
.ad-img{position:relative;flex:1;border-radius:8px;background:radial-gradient(circle at 70% 32%,#FFCF3F 0 15%,rgba(255,207,63,0) 16%),linear-gradient(160deg,#E8232B,#ff8a3d);display:flex;align-items:flex-end;justify-content:center;padding-bottom:9%}
.ad-cta{font-family:var(--fb);font-weight:600;font-size:9px;background:#0B0B0D;color:#fff;padding:5px 12px;border-radius:99px;animation:ctapress 3s var(--ez) infinite}
.ad-click{position:absolute;left:50%;bottom:7%;width:26px;height:26px;margin-left:-13px;border-radius:50%;box-shadow:inset 0 0 0 2px #fff;opacity:0;animation:clickring 3s ease-out infinite}
@keyframes ctapress{0%,40%,60%,100%{transform:scale(1)}48%{transform:scale(.88)}}
@keyframes clickring{0%,44%{opacity:0;transform:scale(.4)}50%{opacity:1}80%,100%{opacity:0;transform:scale(2.1)}}
.ad-meta{display:flex;align-items:center;gap:6px;font-family:var(--fb);font-weight:600;font-size:9px;color:#0B0B0D}
.ad-h{color:#E8232B;font-size:12px;line-height:1;animation:heartb 3s ease infinite}
@keyframes heartb{0%,46%,100%{transform:scale(1)}53%{transform:scale(1.5)}62%{transform:scale(1)}}
.ad-c{height:11px;line-height:11px;overflow:hidden;display:inline-flex;flex-direction:column}
.ad-c span{animation:cnt 6s var(--ez) infinite}
@keyframes cnt{0%,28%{transform:translateY(0)}34%,61%{transform:translateY(-100%)}67%,94%{transform:translateY(-200%)}100%{transform:translateY(0)}}
.ad-sh{margin-left:auto;color:#1E32F5}
.mk-wrap .fly{position:absolute;left:62%;bottom:16%;font-family:var(--fb);font-weight:700;font-size:15px;color:#E8232B;opacity:0;animation:flyup 3s ease-out infinite;pointer-events:none}
.mk-wrap .f2{left:74%;animation-delay:.75s;color:#ff6b9a}.mk-wrap .f3{left:55%;animation-delay:1.5s;color:#A3ADFF;font-size:11px}.mk-wrap .f4{left:82%;animation-delay:2.25s}
@keyframes flyup{0%{opacity:0;transform:translate3d(0,0,0) scale(.6)}15%{opacity:1}100%{opacity:0;transform:translate3d(18px,-150px,0) scale(1.25)}}
.mk-wrap .kpi{position:absolute;left:calc(100% + 16px);top:12%;width:150px;padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;display:flex;flex-direction:column;gap:2px}
.kpi small{font-family:var(--fm);font-size:8px;letter-spacing:.08em;text-transform:uppercase;color:#9da0ff}
.kpi b{font-family:var(--fd);font-weight:700;font-size:22px;letter-spacing:-.03em;color:#1fbf6a}
.kpi svg{width:100%;height:38px;margin-top:4px;overflow:visible}
.kpi .ka{fill:rgba(163,173,255,.18)}
.kpi .kl{fill:none;stroke:#A3ADFF;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:100;animation:draw 3.6s var(--ez) infinite}
@media (prefers-reduced-motion:reduce){.sba-1 .globe-b,.sba-1 .ptr,.ide-code .cl,.ide-code .caret,.ide-gear,.ide-ok,.ad-cta,.ad-click,.ad-h,.ad-c span,.mk-wrap .fly,.kpi .kl{animation:none}.ide-code .cl{clip-path:none}.ide-ok{opacity:1}}
/* ROUND 10 — longer hero headline */
.h-e .he-title{flex-wrap:nowrap}
.h-e .he-title h1{font-size:clamp(44px,6.3vw,112px);line-height:.92}
.h-e .he-side{flex:0 0 320px}
@media (max-width:900px){.h-e .he-title{flex-wrap:wrap}.h-e .he-side{flex:1 1 auto}}
.h-e .he-side{flex:0 0 380px;max-width:380px}
.h-e .he-side .btns{flex-wrap:nowrap}
/* ================= ROUND 11 — hero layout options G / H / I ================= */
.h-g .pin-in,.h-h .pin-in,.h-i .pin-in{min-height:940px;background:var(--ink);--e:clamp(0,calc((var(--p,0) - .03) / .66),1);--ee:calc(var(--e) * var(--e) * (3 - 2 * var(--e)))}
html.av-live .h-g .pin-in,html.av-live .h-h .pin-in,html.av-live .h-i .pin-in{height:100vh}
.hx-h1{font-family:var(--fd);font-weight:700;letter-spacing:-.055em;line-height:.92}
.hx-h1 .ser{color:var(--blue-l);font-size:1.08em;letter-spacing:-.025em}
.hx-sub{font-size:18px;line-height:1.5;color:#cfcfd4}
.hx-btns{display:flex;gap:12px;flex-wrap:wrap}
.hx-frame{position:absolute;z-index:2;overflow:hidden}
.hx-dot{width:7px;height:7px;border-radius:50%;background:#1fbf6a;display:inline-block;animation:hxpulse 2.2s ease-out infinite}
@keyframes hxpulse{0%{box-shadow:0 0 0 0 rgba(31,191,106,.55)}80%,100%{box-shadow:0 0 0 9px rgba(31,191,106,0)}}
/* G — centred stage */
.hg-top{position:absolute;left:var(--g);right:var(--g);top:112px;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center;gap:24px;transform:translate3d(0,calc(var(--ee) * -24vh),0);opacity:calc(1 - var(--ee) * 1.8)}
.hg-eyebrow{display:inline-flex;align-items:center;gap:10px;padding:9px 16px;border-radius:99px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);font-family:var(--fm);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#cfcfd4}
.h-g .hx-h1{font-size:clamp(42px,6vw,108px)}
.h-g .hx-sub{max-width:520px}
.h-g .hx-btns{justify-content:center}
.h-g .hx-frame{left:calc(20% * (1 - var(--ee)));right:calc(20% * (1 - var(--ee)));top:calc(71% * (1 - var(--ee)));bottom:calc(-30% * (1 - var(--ee)));border-radius:calc(28px * (1 - var(--ee)))}
/* H — editorial grid */
.hh-top{position:absolute;left:var(--g);right:var(--g);top:92px;z-index:1;display:flex;flex-direction:column;gap:34px;transform:translate3d(0,calc(var(--ee) * -24vh),0);opacity:calc(1 - var(--ee) * 1.8)}
.hh-meta{display:flex;justify-content:space-between;align-items:center;gap:20px;padding-top:14px;box-shadow:inset 0 1px 0 rgba(255,255,255,.14);font-family:var(--fm);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--mi)}
.hh-meta span{display:inline-flex;align-items:center;gap:10px}
.h-h .hx-h1{font-size:clamp(46px,7.4vw,132px)}
.hh-row{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap;padding-top:22px;box-shadow:inset 0 1px 0 rgba(255,255,255,.14)}
.h-h .hx-sub{max-width:440px}
.h-h .hx-frame{left:calc(var(--g) * (1 - var(--ee)));right:calc(var(--g) * (1 - var(--ee)));top:calc(60% * (1 - var(--ee)));bottom:calc(var(--g) * .5 * (1 - var(--ee)));border-radius:calc(22px * (1 - var(--ee)))}
/* I — split with portrait video */
.hi-left{position:absolute;left:var(--g);top:112px;bottom:56px;width:56%;z-index:1;display:flex;flex-direction:column;justify-content:space-between;gap:40px;transform:translate3d(calc(var(--ee) * -14vw),0,0);opacity:calc(1 - var(--ee) * 1.8)}
.hi-lbl{display:inline-flex;align-items:center;gap:10px;font-family:var(--fm);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--mi);margin-bottom:26px}
.h-i .hx-h1{font-size:clamp(46px,7vw,124px)}
.hi-bot{display:flex;flex-direction:column;gap:24px}
.h-i .hx-sub{max-width:440px}
.h-i .hx-frame{left:calc(64% * (1 - var(--ee)));right:calc(var(--g) * (1 - var(--ee)));top:calc(112px * (1 - var(--ee)));bottom:calc(56px * (1 - var(--ee)));border-radius:calc(26px * (1 - var(--ee)))}
.hi-ring{position:absolute;left:calc(64% - 58px);bottom:84px;z-index:3;width:116px;height:116px;opacity:calc(1 - var(--ee) * 3);pointer-events:none}
.hi-ring svg{width:100%;height:100%;animation:spin 16s linear infinite}
.hi-ring text{font-family:var(--fm);font-size:9.5px;letter-spacing:.24em;fill:var(--paper);text-transform:uppercase}
.hi-ring b{position:absolute;inset:34px;border-radius:50%;background:var(--blue)}
@media (max-width:900px){.hi-left{width:auto;right:var(--g)}.h-i .hx-frame{left:calc(var(--g) * (1 - var(--ee)));top:calc(60% * (1 - var(--ee)))}.hi-ring{display:none}.hh-meta span:nth-child(2){display:none}}
/* ROUND 12 — Editorial hero: single rule under the navbar */
.h-h .hh-top{top:86px;gap:40px}
.hh-rule{height:1px;background:rgba(255,255,255,.16);transform-origin:0 50%}
html.av-live .hh-rule{transform:scaleX(0);transition:transform 1.4s var(--io) .1s}
html.av-live .hh-rule.in{transform:none}
/* ROUND 13 — centre tagline symbols on the letters */
.ta-p .pill{vertical-align:baseline;position:relative;top:-.04em;height:.7em}
.ta-p .pill.p-globe{width:.7em;margin-right:.08em}
/* ROUND 14 — symbols align by their bottom edge, never by any text inside them */
.ta-p .pill{display:inline-block!important;overflow:hidden;font-size:inherit;color:transparent;line-height:0;vertical-align:baseline;top:-.02em}

/* ROUND 15 — tagline icons: real eye, spinning earth, thinking brain */
.ta-p .pill.p-eye,.ta-p .pill.p-globe,.ta-p .pill.p-spark{background:none;box-shadow:none;border-radius:0;overflow:visible}
.ta-p .pill.p-eye::after,.ta-p .pill.p-globe::after,.ta-p .pill.p-spark::after{display:none}
.ta-p .pill.p-eye::before,.ta-p .pill.p-globe::before,.ta-p .pill.p-spark::before{all:unset;content:'';position:absolute;inset:0;background-position:center;background-size:contain;background-repeat:no-repeat}
.ta-p .pill.p-eye{width:1.5em;height:.8em;top:.05em}
.ta-p .pill.p-eye::before{background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 120 64%22%3E %3Cdefs%3E%3CclipPath id=%22c%22%3E%3Cpath d=%22M6 32 C30 3, 90 3, 114 32 C90 61, 30 61, 6 32 Z%22%3E%3Canimate attributeName=%22d%22 dur=%224.8s%22 repeatCount=%22indefinite%22 keyTimes=%220;.86;.9;.94;1%22 values=%22M6 32 C30 3, 90 3, 114 32 C90 61, 30 61, 6 32 Z;M6 32 C30 3, 90 3, 114 32 C90 61, 30 61, 6 32 Z;M6 32 C30 31, 90 31, 114 32 C90 33, 30 33, 6 32 Z;M6 32 C30 3, 90 3, 114 32 C90 61, 30 61, 6 32 Z;M6 32 C30 3, 90 3, 114 32 C90 61, 30 61, 6 32 Z%22/%3E%3C/path%3E%3C/clipPath%3E %3CradialGradient id=%22ir%22 cx=%2245%25%22 cy=%2240%25%22 r=%2260%25%22%3E%3Cstop offset=%220%22 stop-color=%22%237d8bff%22/%3E%3Cstop offset=%22.6%22 stop-color=%22%231E32F5%22/%3E%3Cstop offset=%221%22 stop-color=%22%230d1a8f%22/%3E%3C/radialGradient%3E %3CradialGradient id=%22sc%22 cx=%2250%25%22 cy=%2250%25%22 r=%2260%25%22%3E%3Cstop offset=%22.6%22 stop-color=%22%23F7F6F2%22/%3E%3Cstop offset=%221%22 stop-color=%22%23cfcdc4%22/%3E%3C/radialGradient%3E%3C/defs%3E %3Cg clip-path=%22url(%23c)%22%3E%3Crect width=%22120%22 height=%2264%22 fill=%22url(%23sc)%22/%3E %3Cg%3E%3CanimateTransform attributeName=%22transform%22 type=%22translate%22 dur=%224.8s%22 repeatCount=%22indefinite%22 keyTimes=%220;.1;.34;.44;.68;.78;1%22 values=%220 0;-24 1;-24 1;24 1;24 1;0 0;0 0%22 calcMode=%22spline%22 keySplines=%22.6 0 .2 1;0 0 1 1;.6 0 .2 1;0 0 1 1;.6 0 .2 1;0 0 1 1%22/%3E %3Ccircle cx=%2260%22 cy=%2232%22 r=%2219%22 fill=%22url(%23ir)%22/%3E%3Ccircle cx=%2260%22 cy=%2232%22 r=%2219%22 fill=%22none%22 stroke=%22%230B0B0D%22 stroke-opacity=%22.35%22 stroke-width=%222%22/%3E %3Ccircle cx=%2260%22 cy=%2232%22 r=%228.5%22 fill=%22%230B0B0D%22%3E%3Canimate attributeName=%22r%22 dur=%224.8s%22 repeatCount=%22indefinite%22 values=%228.5;7;9.5;8.5%22/%3E%3C/circle%3E %3Ccircle cx=%2254%22 cy=%2225%22 r=%224%22 fill=%22%23fff%22 fill-opacity=%22.95%22/%3E%3Ccircle cx=%2266%22 cy=%2238%22 r=%221.8%22 fill=%22%23fff%22 fill-opacity=%22.7%22/%3E%3C/g%3E %3Cpath d=%22M0 0 H120 V14 C90 6 30 6 0 14 Z%22 fill=%22%230B0B0D%22 fill-opacity=%22.12%22/%3E%3C/g%3E %3Cpath d=%22M6 32 C30 3, 90 3, 114 32 C90 61, 30 61, 6 32 Z%22 fill=%22none%22 stroke=%22%23EEEDE8%22 stroke-width=%223%22%3E%3Canimate attributeName=%22d%22 dur=%224.8s%22 repeatCount=%22indefinite%22 keyTimes=%220;.86;.9;.94;1%22 values=%22M6 32 C30 3, 90 3, 114 32 C90 61, 30 61, 6 32 Z;M6 32 C30 3, 90 3, 114 32 C90 61, 30 61, 6 32 Z;M6 32 C30 31, 90 31, 114 32 C90 33, 30 33, 6 32 Z;M6 32 C30 3, 90 3, 114 32 C90 61, 30 61, 6 32 Z;M6 32 C30 3, 90 3, 114 32 C90 61, 30 61, 6 32 Z%22/%3E%3C/path%3E%3C/svg%3E")}
.ta-p .pill.p-globe{width:.98em;height:.98em;top:.15em;margin:0 .02em}
.ta-p .pill.p-globe::before{background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22%3E %3Cdefs%3E%3CradialGradient id=%22o%22 cx=%2236%25%22 cy=%2230%25%22 r=%2275%25%22%3E%3Cstop offset=%220%22 stop-color=%22%238592ff%22/%3E%3Cstop offset=%22.5%22 stop-color=%22%231E32F5%22/%3E%3Cstop offset=%221%22 stop-color=%22%230a1470%22/%3E%3C/radialGradient%3E %3CradialGradient id=%22sh%22 cx=%2234%25%22 cy=%2228%25%22 r=%2280%25%22%3E%3Cstop offset=%22.45%22 stop-color=%22%23000%22 stop-opacity=%220%22/%3E%3Cstop offset=%221%22 stop-color=%22%23000%22 stop-opacity=%22.5%22/%3E%3C/radialGradient%3E %3CclipPath id=%22c%22%3E%3Ccircle cx=%2250%22 cy=%2250%22 r=%2236%22/%3E%3C/clipPath%3E%3C/defs%3E %3Cellipse cx=%2250%22 cy=%2250%22 rx=%2247%22 ry=%2213%22 transform=%22rotate(-18 50 50)%22 fill=%22none%22 stroke=%22%23EEEDE8%22 stroke-opacity=%22.35%22 stroke-width=%221.4%22 stroke-dasharray=%223 4%22/%3E %3Ccircle cx=%2250%22 cy=%2250%22 r=%2239%22 fill=%22%23A3ADFF%22 fill-opacity=%22.18%22/%3E %3Ccircle cx=%2250%22 cy=%2250%22 r=%2236%22 fill=%22url(%23o)%22/%3E %3Cg clip-path=%22url(%23c)%22%3E%3Cg fill=%22%23A3ADFF%22 fill-opacity=%22.95%22%3E %3CanimateTransform attributeName=%22transform%22 type=%22translate%22 from=%220 0%22 to=%22-120 0%22 dur=%229s%22 repeatCount=%22indefinite%22/%3E %3Cg transform=%22translate(14 0)%22%3E%3Cpath d=%22M8 30 q10 -12 22 -5 q9 6 4 14 q-6 8 -2 16 q-4 9 -12 4 q-7 -8 -14 -6 q-6 -10 2 -23z%22/%3E %3Cpath d=%22M46 50 q9 -7 17 0 q6 9 1 19 q-6 6 -12 2 q-8 -8 -6 -21z%22/%3E %3Cpath d=%22M66 20 q13 -7 23 2 q4 9 -4 13 q-11 2 -15 -5z%22/%3E %3Cpath d=%22M88 58 q9 -3 13 6 q-2 9 -11 6z%22/%3E%3Cpath d=%22M104 30 q8 -4 12 3 q-3 7 -10 4z%22/%3E%3C/g%3E%3Cg transform=%22translate(134 0)%22%3E%3Cpath d=%22M8 30 q10 -12 22 -5 q9 6 4 14 q-6 8 -2 16 q-4 9 -12 4 q-7 -8 -14 -6 q-6 -10 2 -23z%22/%3E %3Cpath d=%22M46 50 q9 -7 17 0 q6 9 1 19 q-6 6 -12 2 q-8 -8 -6 -21z%22/%3E %3Cpath d=%22M66 20 q13 -7 23 2 q4 9 -4 13 q-11 2 -15 -5z%22/%3E %3Cpath d=%22M88 58 q9 -3 13 6 q-2 9 -11 6z%22/%3E%3Cpath d=%22M104 30 q8 -4 12 3 q-3 7 -10 4z%22/%3E%3C/g%3E%3C/g%3E %3Cg fill=%22none%22 stroke=%22%23fff%22 stroke-opacity=%22.22%22 stroke-width=%221%22%3E%3Cellipse cx=%2250%22 cy=%2250%22 rx=%2236%22 ry=%2211%22/%3E%3Cellipse cx=%2250%22 cy=%2250%22 rx=%2236%22 ry=%2225%22/%3E%3Cline x1=%2214%22 y1=%2250%22 x2=%2286%22 y2=%2250%22/%3E %3Cellipse cx=%2250%22 cy=%2250%22 rx=%2218%22 ry=%2236%22%3E%3Canimate attributeName=%22rx%22 values=%2236;0;36%22 dur=%229s%22 repeatCount=%22indefinite%22/%3E%3C/ellipse%3E %3Cellipse cx=%2250%22 cy=%2250%22 rx=%220%22 ry=%2236%22%3E%3Canimate attributeName=%22rx%22 values=%220;36;0%22 dur=%229s%22 repeatCount=%22indefinite%22/%3E%3C/ellipse%3E%3C/g%3E %3Ccircle cx=%2250%22 cy=%2250%22 r=%2236%22 fill=%22url(%23sh)%22/%3E%3C/g%3E %3Cellipse cx=%2238%22 cy=%2234%22 rx=%229%22 ry=%225%22 fill=%22%23fff%22 fill-opacity=%22.22%22 transform=%22rotate(-30 38 34)%22/%3E %3Cg transform=%22rotate(-18 50 50)%22%3E%3Ccircle r=%224%22 fill=%22%23FFCF3F%22%3E%3CanimateMotion dur=%224s%22 repeatCount=%22indefinite%22 path=%22M3 50 A47 13 0 1 0 97 50 A47 13 0 1 0 3 50%22 rotate=%220%22/%3E%3Canimate attributeName=%22r%22 values=%224;3;4%22 dur=%224s%22 repeatCount=%22indefinite%22/%3E%3C/circle%3E%3C/g%3E %3C/svg%3E")}
.ta-p .pill.p-spark{width:1.1em;height:.88em;top:.09em}
.ta-p .pill.p-spark::before{background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 80%22%3E %3Cdefs%3E%3CradialGradient id=%22g%22 cx=%2250%25%22 cy=%2250%25%22 r=%2250%25%22%3E%3Cstop offset=%220%22 stop-color=%22%23FFCF3F%22 stop-opacity=%22.55%22/%3E%3Cstop offset=%221%22 stop-color=%22%23FFCF3F%22 stop-opacity=%220%22/%3E%3C/radialGradient%3E %3ClinearGradient id=%22b%22 x1=%220%22 y1=%220%22 x2=%220%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%23ffe07a%22/%3E%3Cstop offset=%221%22 stop-color=%22%23ffb21f%22/%3E%3C/linearGradient%3E%3C/defs%3E %3Ccircle cx=%2250%22 cy=%2240%22 r=%2240%22 fill=%22url(%23g)%22%3E%3Canimate attributeName=%22opacity%22 values=%22.5;1;.5%22 dur=%222.4s%22 repeatCount=%22indefinite%22/%3E%3C/circle%3E %3Cpath d=%22M30 66 C18 66 10 58 12 48 C4 44 6 30 16 28 C16 18 28 12 36 16 C40 8 54 8 58 14 C66 8 80 12 80 22 C90 24 94 36 88 44 C94 52 88 64 76 62 C72 70 60 70 56 64 C50 68 40 70 30 66 Z%22 fill=%22url(%23b)%22/%3E %3Cg fill=%22none%22 stroke=%22%23c98400%22 stroke-width=%222.4%22 stroke-linecap=%22round%22%3E%3Cpath d=%22M22 34 C28 29 33 38 40 33%22/%3E%3Cpath d=%22M18 47 C26 43 31 52 38 47%22/%3E%3Cpath d=%22M42 22 C47 29 53 24 56 31%22/%3E%3Cpath d=%22M60 20 C66 25 70 20 75 27%22/%3E%3Cpath d=%22M63 39 C69 35 75 41 82 37%22/%3E%3Cpath d=%22M45 44 C51 40 55 49 61 45%22/%3E%3Cpath d=%22M28 58 C34 54 40 60 47 56%22/%3E%3Cpath d=%22M64 54 C69 50 75 56 79 52%22/%3E%3Cpath d=%22M50 13 C49 30 51 48 50 66%22/%3E%3C/g%3E %3Cg fill=%22none%22 stroke=%22%23fff%22 stroke-width=%223%22 stroke-linecap=%22round%22%3E%3Cpath d=%22M22 34 C28 29 33 38 40 33%22 pathLength=%22100%22 stroke-dasharray=%2214 120%22 stroke-dashoffset=%22120%22%3E%3Canimate attributeName=%22stroke-dashoffset%22 values=%22120;-20%22 dur=%222.4s%22 begin=%220s%22 repeatCount=%22indefinite%22/%3E%3C/path%3E%3Cpath d=%22M63 39 C69 35 75 41 82 37%22 pathLength=%22100%22 stroke-dasharray=%2214 120%22 stroke-dashoffset=%22120%22%3E%3Canimate attributeName=%22stroke-dashoffset%22 values=%22120;-20%22 dur=%222.4s%22 begin=%220.6s%22 repeatCount=%22indefinite%22/%3E%3C/path%3E%3Cpath d=%22M42 22 C47 29 53 24 56 31%22 pathLength=%22100%22 stroke-dasharray=%2214 120%22 stroke-dashoffset=%22120%22%3E%3Canimate attributeName=%22stroke-dashoffset%22 values=%22120;-20%22 dur=%222.4s%22 begin=%221.2s%22 repeatCount=%22indefinite%22/%3E%3C/path%3E%3Cpath d=%22M28 58 C34 54 40 60 47 56%22 pathLength=%22100%22 stroke-dasharray=%2214 120%22 stroke-dashoffset=%22120%22%3E%3Canimate attributeName=%22stroke-dashoffset%22 values=%22120;-20%22 dur=%222.4s%22 begin=%221.8s%22 repeatCount=%22indefinite%22/%3E%3C/path%3E%3Cpath d=%22M45 44 C51 40 55 49 61 45%22 pathLength=%22100%22 stroke-dasharray=%2214 120%22 stroke-dashoffset=%22120%22%3E%3Canimate attributeName=%22stroke-dashoffset%22 values=%22120;-20%22 dur=%222.4s%22 begin=%220.9s%22 repeatCount=%22indefinite%22/%3E%3C/path%3E%3C/g%3E %3Ccircle cx=%2240%22 cy=%2233%22 r=%222.6%22 fill=%22%23fff%22 opacity=%220%22%3E%3Canimate attributeName=%22opacity%22 values=%220;1;0%22 dur=%222.4s%22 begin=%220.3s%22 repeatCount=%22indefinite%22/%3E%3Canimate attributeName=%22r%22 values=%221;3.2;1%22 dur=%222.4s%22 begin=%220.3s%22 repeatCount=%22indefinite%22/%3E%3C/circle%3E%3Ccircle cx=%2282%22 cy=%2237%22 r=%222.6%22 fill=%22%23fff%22 opacity=%220%22%3E%3Canimate attributeName=%22opacity%22 values=%220;1;0%22 dur=%222.4s%22 begin=%220.9s%22 repeatCount=%22indefinite%22/%3E%3Canimate attributeName=%22r%22 values=%221;3.2;1%22 dur=%222.4s%22 begin=%220.9s%22 repeatCount=%22indefinite%22/%3E%3C/circle%3E%3Ccircle cx=%2256%22 cy=%2231%22 r=%222.6%22 fill=%22%23fff%22 opacity=%220%22%3E%3Canimate attributeName=%22opacity%22 values=%220;1;0%22 dur=%222.4s%22 begin=%221.5s%22 repeatCount=%22indefinite%22/%3E%3Canimate attributeName=%22r%22 values=%221;3.2;1%22 dur=%222.4s%22 begin=%221.5s%22 repeatCount=%22indefinite%22/%3E%3C/circle%3E%3Ccircle cx=%2247%22 cy=%2256%22 r=%222.6%22 fill=%22%23fff%22 opacity=%220%22%3E%3Canimate attributeName=%22opacity%22 values=%220;1;0%22 dur=%222.4s%22 begin=%222.1s%22 repeatCount=%22indefinite%22/%3E%3Canimate attributeName=%22r%22 values=%221;3.2;1%22 dur=%222.4s%22 begin=%222.1s%22 repeatCount=%22indefinite%22/%3E%3C/circle%3E%3Ccircle cx=%2261%22 cy=%2245%22 r=%222.6%22 fill=%22%23fff%22 opacity=%220%22%3E%3Canimate attributeName=%22opacity%22 values=%220;1;0%22 dur=%222.4s%22 begin=%221.2s%22 repeatCount=%22indefinite%22/%3E%3Canimate attributeName=%22r%22 values=%221;3.2;1%22 dur=%222.4s%22 begin=%221.2s%22 repeatCount=%22indefinite%22/%3E%3C/circle%3E%3Ccircle cx=%2218%22 cy=%2247%22 r=%222.6%22 fill=%22%23fff%22 opacity=%220%22%3E%3Canimate attributeName=%22opacity%22 values=%220;1;0%22 dur=%222.4s%22 begin=%220.6s%22 repeatCount=%22indefinite%22/%3E%3Canimate attributeName=%22r%22 values=%221;3.2;1%22 dur=%222.4s%22 begin=%220.6s%22 repeatCount=%22indefinite%22/%3E%3C/circle%3E%3C/svg%3E")}
.ta-p .pill.p-spark{width:1.28em;height:1.02em;top:.16em}
/* ROUND 16 — one headline size for every section; postcard flips on click */
.av .h2,.av .cd-head h2,.av .bb-big{font-size:clamp(36px,4.4vw,72px)!important;line-height:.98;font-weight:600;letter-spacing:-.045em}
.cd-card{cursor:pointer;outline:none;--tf:0deg;transform:translate3d(0,calc((1 - var(--in)) * 40vh),0) rotateX(calc((1 - var(--in)) * 40deg)) rotateZ(calc((1 - var(--in)) * -12deg + 2deg * var(--in))) rotateY(calc(var(--fl) + var(--tf)))}
.cd-card.tf{--tf:180deg}
.cd-card.flipping{transition:transform .9s var(--ez)}
.cd-card:focus-visible{box-shadow:0 0 0 3px var(--blue-l);border-radius:14px}
/* ================= ROUND 17 — project card options (details on hover) ================= */
.pc{position:relative;display:block;overflow:hidden;isolation:isolate}
.pc .pcx-info{position:absolute;inset:0;z-index:5;pointer-events:none}
.pc .pcx-client{font-family:var(--fm);font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.pc .pcx-title{font-family:var(--fd);font-weight:600;letter-spacing:-.03em;line-height:1.05}
.pc .pcx-tags{display:flex;flex-wrap:wrap;gap:6px}
.pc .pcx-tags i{font-style:normal;font-family:var(--fb);font-size:12px;padding:5px 10px;border-radius:99px}
.pc .pcx-go{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:17px;flex:none}
.wx-item.cardv{gap:0}
.cardv .wx-frame{border-radius:14px}
.wa-more .wm-card{flex-basis:clamp(340px,31vw,500px)}
.wa-more .wm-frame{aspect-ratio:4/3;border-radius:14px}
.wa-more .wm-end strong{font-size:clamp(36px,3vw,52px)}
.wa-more .pin-in{padding-top:12vh}
.wa-more .wm-card{gap:0}
/* option 1 — frosted caption */
.cv-1 .pcx-info{display:flex;align-items:flex-end;padding:14px}
.cv-1 .pcx-panel{width:100%;display:grid;grid-template-columns:1fr auto;gap:8px 16px;align-items:center;padding:18px 18px 18px 20px;border-radius:12px;background:rgba(14,14,18,.55);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);color:#fff;opacity:0;transform:translate3d(0,calc(100% + 24px),0);transition:transform .7s var(--ez),opacity .45s}
.cv-1 .pcx-client{grid-column:1;color:var(--blue-l)}
.cv-1 .pcx-title{grid-column:1;font-size:clamp(18px,1.5vw,24px)}
.cv-1 .pcx-tags{grid-column:1}
.cv-1 .pcx-tags i{box-shadow:inset 0 0 0 1px rgba(255,255,255,.25);color:#e6e6ea}
.cv-1 .pcx-go{grid-column:2;grid-row:1 / span 3;background:var(--blue);color:#fff;transition:transform .6s var(--ez)}
.cv-1 .pc:hover .pcx-panel,.cv-1 .pc:focus-visible .pcx-panel{opacity:1;transform:none}
.cv-1 .pc:hover .pcx-go{transform:rotate(45deg)}
.cv-1 .pc:hover .ph-img{transform:scale(1.07);filter:brightness(.85)}
/* option 2 — blue curtain */
.cv-2 .pcx-panel{position:absolute;left:0;right:0;bottom:0;padding:24px 26px 26px;background:var(--blue);color:#fff;display:flex;flex-direction:column;gap:10px;transform:translate3d(0,101%,0);transition:transform .75s var(--io)}
.cv-2 .pcx-panel>*{opacity:0;transform:translate3d(0,14px,0);transition:opacity .5s,transform .6s var(--ez)}
.cv-2 .pcx-client{color:rgba(255,255,255,.75)}
.cv-2 .pcx-title{font-size:clamp(22px,2vw,34px);max-width:88%}
.cv-2 .pcx-tags i{box-shadow:inset 0 0 0 1px rgba(255,255,255,.5);color:#fff}
.cv-2 .pcx-go{position:absolute;right:22px;top:22px;background:#fff;color:var(--blue);transform:rotate(-45deg) scale(.6)!important;transition:transform .6s var(--ez) .2s,opacity .4s .2s!important}
.cv-2 .pc:hover .pcx-panel,.cv-2 .pc:focus-visible .pcx-panel{transform:none}
.cv-2 .pc:hover .pcx-panel>*{opacity:1;transform:none}
.cv-2 .pc:hover .pcx-panel>:nth-child(2){transition-delay:.12s}.cv-2 .pc:hover .pcx-panel>:nth-child(3){transition-delay:.2s}
.cv-2 .pc:hover .pcx-go{transform:rotate(0) scale(1)!important}
.cv-2 .pc .ph-img{transition:transform 1s var(--io)}
.cv-2 .pc:hover .ph-img{transform:translate3d(0,-10%,0) scale(1.08)}
/* option 3 — editorial corners */
.cv-3 .pcx-info::before{content:'';position:absolute;inset:0;background:linear-gradient(0deg,rgba(6,6,9,.85),rgba(6,6,9,.15) 55%,rgba(6,6,9,.35));opacity:0;transition:opacity .6s var(--ez)}
.cv-3 .pcx-panel{position:absolute;inset:0;padding:20px 22px 22px;display:flex;flex-direction:column;justify-content:space-between;color:#fff}
.cv-3 .pcx-row{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.cv-3 .pcx-client{background:var(--paper);color:var(--ink);padding:7px 12px;border-radius:99px;transform:translate3d(0,-60px,0);transition:transform .7s var(--ez)}
.cv-3 .pcx-go{background:var(--blue);color:#fff;transform:scale(0) rotate(-90deg);transition:transform .7s var(--ez) .05s}
.cv-3 .pcx-bot{display:flex;flex-direction:column;gap:12px}
.cv-3 .pcx-mask{overflow:hidden;display:block;padding-bottom:.08em}
.cv-3 .pcx-title{display:block;font-size:clamp(24px,2.3vw,40px);max-width:90%;transform:translate3d(0,110%,0);transition:transform .8s var(--ez) .08s}
.cv-3 .pcx-tags{opacity:0;transform:translate3d(0,10px,0);transition:opacity .5s .2s,transform .6s var(--ez) .2s}
.cv-3 .pcx-tags i{background:rgba(255,255,255,.14);color:#fff;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.cv-3 .pc::before{content:'';position:absolute;inset:0;z-index:6;border-radius:inherit;box-shadow:inset 0 0 0 0 var(--blue-l);transition:box-shadow .5s var(--ez);pointer-events:none}
.cv-3 .pc:hover::before{box-shadow:inset 0 0 0 2px var(--blue-l)}
.cv-3 .pc:hover .pcx-info::before{opacity:1}
.cv-3 .pc:hover .pcx-client,.cv-3 .pc:hover .pcx-title{transform:none}
.cv-3 .pc:hover .pcx-go{transform:none}
.cv-3 .pc:hover .pcx-tags{opacity:1;transform:none}
.cv-3 .pc:hover .ph-img{transform:scale(1.05)}
/* touch screens: show details */
@media (hover:none){.cv-1 .pcx-panel,.cv-2 .pcx-panel,.cv-2 .pcx-panel>*,.cv-3 .pcx-client,.cv-3 .pcx-title,.cv-3 .pcx-tags,.cv-3 .pcx-go{opacity:1;transform:none}.cv-3 .pcx-info::before{opacity:1}}
.pc .ph-img::after{transition:opacity .3s}.pc:hover .ph-img::after{opacity:0}
.av .db-top .h2{max-width:min(980px,100%)!important}
/* ================= ROUND 18 — responsive polish ================= */
@media (min-width:601px) and (max-aspect-ratio:1/1){.h-h .hx-frame{top:calc(44% * (1 - var(--ee)))}}
@media (max-width:900px){
  .yc3{min-height:300px}
  .yd3-grid{margin-top:48px}
  .y-d3{padding:110px var(--g)}
  .hh-row{gap:20px}
  .wa-more .wm-card{flex-basis:clamp(280px,70vw,440px)}
}
@media (max-width:600px){
  .db-names p{-webkit-text-stroke:7px #0B0B0D;font-size:clamp(36px,11vw,56px)}
  .h-h .hx-h1{font-size:clamp(40px,11vw,56px)}
  .h-h .hx-sub{font-size:16px}
  .hh-row .hx-btns{width:100%}
  .s-c{padding-top:90px}
  .q-c{padding:110px var(--g) 80px}
  .ft-logo{margin-top:-20px}
  .ta-p{font-size:clamp(28px,8.4vw,40px)}
}
@media (max-width:860px){html.av-live .s-c .sc-row,.s-c .sc-row{--ch:440px}.s-c .sba{padding-bottom:calc(var(--ch) * .55)}}
/* ================= ROUND 19 — mouse layer: aura, comet trail, stretchy ring, depth parallax ================= */
.cur-aura,.cur-tr{display:none}
html.av-cur .cur-aura{display:block;position:fixed;left:0;top:0;width:620px;height:620px;margin:-310px 0 0 -310px;border-radius:50%;pointer-events:none;z-index:2;background:radial-gradient(circle,rgba(30,50,245,.30) 0,rgba(110,124,255,.10) 38%,rgba(30,50,245,0) 68%);mix-blend-mode:screen;opacity:0;transition:opacity .8s var(--ez)}
html.av-cur .cur-aura.on{opacity:1}
html.av-cur .cur-tr{display:block;position:fixed;left:0;top:0;z-index:119;pointer-events:none;border-radius:50%;width:calc(7px - var(--k) * .5px);height:calc(7px - var(--k) * .5px);margin:calc((7px - var(--k) * .5px) / -2) 0 0 calc((7px - var(--k) * .5px) / -2);background:#A3ADFF;opacity:calc(.55 - var(--k) * .055);mix-blend-mode:difference}
.cur.is-out .cur-ring,.cur.is-out .cur-dot{opacity:0}
.cur-ring{transition:width .45s var(--ez),height .45s var(--ez),margin .45s var(--ez),background .45s,box-shadow .45s,opacity .3s}
/* depth parallax — content drifts gently against the pointer */
html.av-cur .av .h2,html.av-cur .av .cd-head h2,html.av-cur .hx-h1,html.av-cur .ft-big{translate:calc(var(--mx,0) * -10px) calc(var(--my,0) * -6px)}
html.av-cur .ta-p .pill{translate:calc(var(--mx,0) * (6px + var(--i,0) * .15px)) calc(var(--my,0) * 5px)}
html.av-cur .wx-frame .ph-img,html.av-cur .wm-frame .ph-img{inset:-18px;translate:calc(var(--mx,0) * -14px) calc(var(--my,0) * -10px)}
html.av-cur .pa-stage{translate:calc(var(--mx,0) * -16px) calc(var(--my,0) * -8px)}
html.av-cur .db-scene{translate:calc(var(--mx,0) * -22px) calc(var(--my,0) * -14px)}
html.av-cur .db-names{translate:calc(var(--mx,0) * 10px) calc(var(--my,0) * 6px)}
html.av-cur .qc-face{translate:calc(var(--mx,0) * 14px) calc(var(--my,0) * 10px)}
html.av-cur .ft-mark{translate:calc(var(--mx,0) * -16px) 0}
html.av-cur .cd-wrap{translate:calc(var(--mx,0) * 14px) calc(var(--my,0) * 8px)}
html.av-cur .yd3-grid{translate:calc(var(--mx,0) * -8px) calc(var(--my,0) * -5px)}
html.av-cur .wa-ghost{translate:calc(var(--mx,0) * 30px) 0}
/* ROUND 20 — craft panels: whichever panel is hovered wins; every other panel fully collapses */
.sc-row:has(.sc-p:hover) .sc-p:not(:hover){flex-grow:1}
.sc-row:has(.sc-p:hover) .sc-p:not(:hover) .sc-o{opacity:0;visibility:hidden;transform:translate3d(0,24px,0);transition:opacity .15s,transform .3s,visibility 0s .15s;pointer-events:none}
.sc-row:has(.sc-p:hover) .sc-p:not(:hover) .sc-v{opacity:1;transition-delay:.35s}
.sc-row:has(.sc-p:hover) .sc-p:not(:hover) .sc-art{transform:scale(1.15);opacity:.55}
.s-c .sc-row:has(.sc-p:hover) .sc-p:not(:hover) .mk-wrap{transform:none}
.sc-p .sc-o{white-space:normal}
.sc-p:not(.is-open):not(:hover):not(:focus-within) .sc-o{transition:opacity .15s,transform .3s}
/* ROUND 21 — bigger third project card in the card options */
.w-a .wx-3.cardv{grid-column:2 / span 9}
/* ================= ROUND 22 — craft as a pinned horizontal scroll of open cards ================= */
.s-h{padding:0!important}
.s-h .pin-in{min-height:900px;background:var(--ink);display:flex;flex-direction:column;justify-content:center;gap:44px;padding:100px 0 60px}
html.av-live .s-h .pin-in{height:100vh;min-height:0!important;padding:clamp(80px,11vh,120px) 0 clamp(36px,6vh,64px)}
.s-h .head{padding:0 var(--g);margin:0}
.sh-track{--chh:clamp(400px,56vh,560px);display:flex;align-items:stretch;gap:28px;padding:0 var(--g);width:max-content;transform:translate3d(calc(var(--p,0) * var(--hx,0px) * -1),0,0);will-change:transform}
.s-h .sc-p{flex:0 0 min(1040px,76vw)!important;height:var(--chh);border-radius:28px;cursor:default;--ch:var(--chh);transform:translate3d(0,calc(sin((var(--p,0) * 6 + var(--i,0) * .9) * 1rad) * 10px),0) skewX(calc(var(--skew,0) * -.5deg))}
.s-h .sc-p::after{background:linear-gradient(90deg,rgba(8,8,11,.86) 0,rgba(8,8,11,.6) 34%,rgba(8,8,11,0) 58%)}
.s-h .sc-p .sc-art{opacity:1!important;transform:none!important}
.s-h .sc-p .sba{padding:48px 44px 48px 46%!important}
.s-h .sc-v{display:none}
.s-h .sc-n{position:absolute;left:44px;top:36px;z-index:3;font-family:var(--fm);font-size:12px;letter-spacing:.1em;color:rgba(255,255,255,.7)}
.s-h .sc-o{left:44px;right:auto;top:0;bottom:0;width:38%;max-width:none;justify-content:center;gap:18px;opacity:1!important;transform:none!important;visibility:visible!important;pointer-events:auto}
.s-h .sc-o h3{font-size:clamp(30px,3vw,52px)!important;line-height:.98}
.s-h .sc-o p{font-size:17px}
.s-h .mk-wrap{transform:none!important}
.s-h .mk-wrap .kpi{left:auto;right:-46%;top:auto;bottom:6%}
.s-h .sbx-2 .ide-ok{left:auto;right:8%;bottom:34px}
.s-h .sbx-2 .ide-gear{right:5%;top:8%}
.sh-end{flex:0 0 clamp(300px,30vw,440px);height:var(--chh);border-radius:28px;background:var(--blue);color:#fff;display:flex;flex-direction:column;justify-content:space-between;padding:36px;transition:background .5s var(--ez)}
.sh-end strong{font-family:var(--fd);font-weight:600;font-size:clamp(34px,3.2vw,56px);line-height:.98;letter-spacing:-.045em}
.sh-end .ser{font-weight:400}
.sh-end-cta{align-self:flex-start;padding:12px 18px;border-radius:99px;background:#fff;color:var(--blue);font-weight:500;transition:transform .5s var(--ez)}
.sh-end:hover .sh-end-cta{transform:translateX(8px)}
.sh-bar{margin:0 var(--g);height:2px;background:rgba(255,255,255,.12);border-radius:2px;overflow:hidden}
.sh-bar i{display:block;height:100%;background:var(--blue-l);transform-origin:0 50%;transform:scaleX(var(--p,0))}
@media (max-width:860px){
  .sh-track{--chh:clamp(460px,64vh,560px);gap:16px}
  .s-h .sc-p{flex-basis:84vw!important;height:var(--chh)!important}
  .s-h .sc-p::after{background:linear-gradient(0deg,rgba(8,8,11,.9) 0,rgba(8,8,11,.6) 40%,rgba(8,8,11,0) 62%)}
  .s-h .sc-p .sba{padding:56px 24px calc(var(--chh) * .52) 24px!important}
  .s-h .sc-o{left:22px;right:22px;top:auto;bottom:24px;width:auto;justify-content:flex-end}
  .s-h .sc-o p{font-size:15px}
  .s-h .sc-n{left:24px;top:22px}
  .s-h .mk-wrap .kpi{display:none}
  .sh-end{flex-basis:76vw}
}
/* ROUND 23 — brighter backgrounds for the Software and Marketing craft cards */
.sbx-2{background:radial-gradient(120% 90% at 80% 20%,#2fe0a6 0,#12a37a 38%,#0a5c45 100%)}
.sbx-2 .ide{box-shadow:0 30px 70px rgba(4,40,30,.55),inset 0 0 0 1px rgba(255,255,255,.1)!important}
.sbx-2 .ide-gear .t{stroke:#0B0B0D}.sbx-2 .ide-gear .h{stroke:#fff}
.sbx-5{background:radial-gradient(120% 90% at 78% 22%,#ff6fae 0,#d6337a 40%,#5a1f8f 100%)}
.sbx-5 .kpi{background:rgba(20,8,30,.45)!important}
/* ================= ROUND 24 — loader, hero entrance, mobile fixes, 4:3 work ================= */
/* loader: the wordmark draws itself, fills with light, then the screen splits open */
.pre.pre2{background:transparent;padding:0;display:none;align-items:center;justify-content:center;transform:none!important;border-radius:0!important;transition:none}
html.av-live .pre.pre2{display:flex}
html.av-done .pre.pre2{display:none}
.pre-half{position:absolute;left:0;right:0;height:50.5%;background:var(--ink);transition:transform 1.15s cubic-bezier(.77,0,.18,1)}
.pre-top{top:0}.pre-bot{bottom:0}
html.av-loaded .pre-top{transform:translateY(-100%)}
html.av-loaded .pre-bot{transform:translateY(100%)}
.pre-stage{position:relative;z-index:2;width:min(720px,78vw);display:flex;flex-direction:column;gap:28px;transition:transform 1s var(--ez),opacity .6s var(--ez),filter .8s}
html.av-loaded .pre-stage{transform:scale(1.12);opacity:0;filter:blur(8px)}
.pre-orb{position:absolute;left:50%;top:38%;width:60%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;background:radial-gradient(circle,rgba(30,50,245,.55),rgba(30,50,245,0) 65%);filter:blur(10px);animation:preorb 1.8s var(--ez) both}
@keyframes preorb{0%{opacity:0;transform:scale(.4)}60%{opacity:1}100%{opacity:.8;transform:scale(1.1)}}
.pre-word{position:relative;width:100%;height:auto;overflow:visible}
.pre-word path{fill:var(--paper);fill-opacity:0;stroke:var(--blue-l);stroke-width:.35;stroke-dasharray:1;stroke-dashoffset:1;animation:predraw .9s var(--ez) calc(var(--i) * 70ms) forwards,prefill .55s ease calc(.75s + var(--i) * 70ms) forwards}
@keyframes predraw{to{stroke-dashoffset:0}}
@keyframes prefill{0%{fill-opacity:0;fill:var(--blue-l)}60%{fill-opacity:1;fill:var(--blue-l)}100%{fill-opacity:1;fill:var(--paper);stroke-opacity:0}}
.pre-meta{position:relative;display:flex;align-items:center;gap:18px;font-family:var(--fm);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mi)}
.pre2 .pre-bar{flex:1;margin:0;height:1px;background:rgba(255,255,255,.16)}
.pre2 .pre-bar i{background:var(--blue-l)}
.pre2 .pre-num{font-family:var(--fm);font-weight:500;font-size:12px;letter-spacing:.1em;line-height:1;color:var(--paper)}
@media (max-width:600px){.pre-meta span:first-child{display:none}}
/* hero entrance after the loader: nav drops in, headline lines rise, video wipes up */
html.av-live:not(.av-loaded) .nav{transform:translateY(-130%)}
html.av-live .nav{transition:transform .9s var(--ez) .5s,color .5s}
html.av-live.av-done .nav{transition:transform .7s var(--ez),color .5s}
/* mobile: one big "Let's talk." line */
@media (max-width:600px){
  .av .bb-big{font-size:clamp(60px,20vw,110px)!important;white-space:nowrap;line-height:.9}
  .bb-big .ml{display:inline-block;vertical-align:bottom}
  .bb-big .ml:first-child{margin-right:.2em}
}
/* mobile: hero video stays a wide 16:9 frame instead of a tall full-screen strip */
@media (max-width:600px){
  .h-h .hx-frame{bottom:auto!important;left:calc(var(--g) * (1 - var(--ee)));right:calc(var(--g) * (1 - var(--ee)));height:calc((100vw - var(--g) * 2 * (1 - var(--ee))) * .5625);top:calc(62% * (1 - var(--ee)) + (50% - 28.125vw) * var(--ee))!important;border-radius:calc(18px * (1 - var(--ee)) + 4px)}
}
/* work: every thumbnail 4:3, never taller than the screen */
.cardv .wx-frame{aspect-ratio:4/3!important;width:min(100%,calc(74vh * 4 / 3))}
.wx-item.cardv{align-items:flex-start}
/* ROUND 25 — loader covers the page from the very first frame */
.pre.pre2{display:flex!important;animation:prefailsafe 0s linear 7s forwards}
html.av-static .pre.pre2,html.av-done .pre.pre2{display:none!important}
@keyframes prefailsafe{to{visibility:hidden;opacity:0}}
.pre2 .pre-meta{gap:0}
/* ROUND 26 — sideways tracks finish before the section releases (a short hold at the end) */
.sh-track,.wa-more .wm-track{transform:translate3d(calc(min(1, var(--p,0) / .78) * var(--hx,0px) * -1),0,0)}
.sh-bar i{transform:scaleX(min(1, var(--p,0) / .78))}
/* ROUND 27 — How we work: less space above, shorter cards that scale with screen height */
html.av-live .p-a .pin-in{padding-top:clamp(64px,10vh,110px);padding-bottom:16px}
.p-a .head{margin-bottom:0}
.p-a .pa-stage{min-height:0}
.p-a .pa-card{--cw:clamp(230px,min(24vw,33vh),360px);width:var(--cw);margin-left:calc(var(--cw) / -2);top:2%}
.p-a .pa-art{aspect-ratio:4/2.7;padding:16px 20px}
.p-a .pa-art .num{font-size:clamp(64px,min(7vw,11vh),120px)}
.p-a .pa-body{padding:16px 20px 18px;gap:8px}
.p-a .pa-body b{font-size:clamp(19px,2.6vh,24px)}
.p-a .pa-body p{font-size:clamp(13px,1.75vh,15px);color:#4a4a52}
.p-a .pin-in{-webkit-mask-image:linear-gradient(180deg,#000 0,#000 88%,rgba(0,0,0,0) 100%);mask-image:linear-gradient(180deg,#000 0,#000 88%,rgba(0,0,0,0) 100%)}
/* ROUND 28 — hero: video frame always starts below the subheading + buttons */
.h-h{--hf:clamp(46px,min(7.4vw,11.5vh),132px)}
.h-h .hx-h1{font-size:var(--hf)}
.h-h .hx-frame{top:calc((86px + 1px + 40px + var(--hf) * 1.84 + 40px + 80px + 32px) * (1 - var(--ee)))}
@media (max-width:900px){.h-h .hx-frame{top:calc((86px + 1px + 40px + var(--hf) * 1.84 + 40px + 150px + 28px) * (1 - var(--ee)))}}
/* ROUND 29 — How we work exit: an ink iris grows out of the front card and becomes the next section */
.p-a .pin-in{-webkit-mask-image:none;mask-image:none;--z:clamp(0,calc((var(--p,0) - .8) / .18),1);--ze:calc(var(--z) * var(--z) * (3 - 2 * var(--z)))}
.p-a .pa-stage{--f:min(calc(var(--n,5) - 1),calc(var(--p,0) * (var(--n,5) - 1) / .76));transform:scale(calc(1 - var(--ze) * .1));filter:blur(calc(var(--ze) * 6px))}
.pa-iris{position:absolute;inset:0;z-index:8;pointer-events:none;background:radial-gradient(circle at 50% 44%,#141633 0,#0B0B0D 55%);clip-path:circle(calc(var(--ze) * 120%) at 50% 44%)}
.pa-iris::after{content:'';position:absolute;left:50%;top:44%;width:calc(var(--ze) * 160vmax);aspect-ratio:1;translate:-50% -50%;border-radius:50%;box-shadow:inset 0 0 0 2px rgba(163,173,255,calc(.6 * (1 - var(--ze))))}
html:not(.av-live) .pa-iris{display:none}
/* the next section stays solid ink so the iris hands off seamlessly */
html.av-live .av[data-bgfade] .d-b,html.av-live .av[data-bgfade] .d-b>.pin-in{background:#0B0B0D!important}
/* ROUND 30 — Why choose us fits one laptop screen */
@media (min-width:901px){
  .y-d3{padding:clamp(64px,10vh,130px) var(--g) clamp(48px,8vh,120px);min-height:100vh;display:flex;flex-direction:column;justify-content:center;box-sizing:border-box}
  .y-d3 .h2{line-height:.95}
  .yd3-grid{margin-top:clamp(28px,5vh,64px)}
  .yc3{min-height:clamp(290px,44vh,440px);padding:clamp(20px,2.8vh,30px);gap:clamp(10px,1.6vh,20px)}
  .yc3 .vis{min-height:clamp(110px,18vh,200px)}
  .yc3 h3{font-size:clamp(22px,min(2.2vw,3.8vh),36px)}
  .yc3 p{font-size:clamp(13px,1.8vh,16px);margin-top:8px}
  .yc3 .v-team{transform:scale(clamp(.7,calc(100vh / 1000px),1.1))}
}
/* ROUND 31 — Who we are: postcard visible on entry; exit = the postcard is "delivered" into a sunrise of paper light */
.c-d .pin-in{position:relative}
.c-d .cd-wrap{--in:min(1,calc(.35 + var(--p,0) * 2.6));--fl:calc(clamp(0,calc((var(--p,0) - .28) * 3.4),1) * 180deg);--pm:clamp(0,calc((var(--p,0) - .6) * 6),1);--z:clamp(0,calc((var(--p,0) - .8) / .18),1);--ze:calc(var(--z) * var(--z) * (3 - 2 * var(--z)))}
.c-d .cd-card{transform:translate3d(0,calc((1 - var(--in)) * 24vh),0) rotateX(calc((1 - var(--in)) * 38deg)) rotateZ(calc((1 - var(--in)) * -12deg + 2deg * var(--in))) rotateY(calc(var(--fl) + var(--tf)));scale:calc(1 + var(--ze) * 1.6);opacity:calc(1 - var(--ze) * 1.2)}
.c-d .cd-head,.c-d .cd-hint{opacity:calc(1 - var(--ze) * 2)}
.cd-dawn{position:absolute;inset:0;z-index:9;pointer-events:none;--z:clamp(0,calc((var(--p,0) - .8) / .18),1);--ze:calc(var(--z) * var(--z) * (3 - 2 * var(--z)));background:radial-gradient(circle at 50% 56%,#EEEDE8 0,#EEEDE8 45%,#ffd9b8 62%,#ff9f7a 74%,rgba(255,106,92,.0) 86%);background-size:calc(var(--ze) * 300vmax + 1px) calc(var(--ze) * 300vmax + 1px);background-position:50% 56%;background-repeat:no-repeat;opacity:min(1,calc(var(--z) * 4))}
html:not(.av-live) .cd-dawn{display:none}
/* the testimonial stays solid paper so the sunrise hands off seamlessly */
html.av-live .av[data-bgfade] .q-c{background:#EEEDE8!important}
.q-c{padding-top:clamp(72px,11vh,130px)!important}
/* ROUND 32 — Who we are: title + whole postcard + hint fit one screen */
html.av-live .c-d .pin-in{padding:clamp(64px,9vh,100px) var(--g) clamp(24px,4vh,50px);gap:clamp(18px,3vh,36px)}
html.av-live .c-d .cd-card{width:min(900px,88vw,calc((100vh - clamp(64px,9vh,100px) - clamp(24px,4vh,50px) - 190px) * 1.55))}
/* ROUND 33 — How we work: bigger cards, still clear of the bottom edge */
.p-a .pa-card{--cw:clamp(260px,min(26vw,43vh),390px)}
.p-a .pa-art .num{font-size:clamp(70px,min(7.5vw,12vh),130px)}
.p-a .pa-body b{font-size:clamp(21px,2.9vh,26px)}
.p-a .pa-body p{font-size:clamp(14px,1.95vh,16px)}
/* ROUND 34 — no blank screen after the iris: next section overlaps the last screen of How we work */
.p-a .pin-in{--z:clamp(0,calc((var(--p,0) - .58) / .19),1)}
.p-a .pa-stage{--f:min(calc(var(--n,5) - 1),calc(var(--p,0) * (var(--n,5) - 1) / .56))}
.cd-dawn{}
html.av-live .d-b{margin-top:-100vh;position:relative;z-index:3}
/* ROUND 35 — Who we are: bigger card, text scales with it; exit = testimonial slides over as a paper sheet */
.cd-dawn{display:none!important}
html.av-live .av[data-bgfade] .c-d>.pin-in{background:#111015!important}
html.av-live .c-d .pin-in{padding:clamp(52px,8vh,90px) var(--g) clamp(16px,3vh,40px);gap:clamp(14px,2.4vh,30px);transform-origin:50% 0;--r:clamp(0,calc((var(--p,0) - .69) / .31),1);transform:scale(calc(1 - var(--r) * .08));filter:brightness(calc(1 - var(--r) * .55))}
html.av-live .c-d .cd-hint{display:none}
html.av-live .c-d .cd-card{width:min(1040px,90vw,calc((100vh - clamp(52px,8vh,90px) - clamp(16px,3vh,40px) - 130px) * 1.55))}
.c-d .cd-wrap{--in:min(1,calc(.35 + var(--p,0) * 2.8));--fl:calc(clamp(0,calc((var(--p,0) - .24) * 3.6),1) * 180deg);--pm:clamp(0,calc((var(--p,0) - .5) * 6),1);--z:0;--ze:0}
.c-d .cd-card{container-type:inline-size;scale:1;opacity:1}
.c-d .cd-head,.c-d .cd-hint{opacity:1}
.cd-b{padding:5.5cqw;gap:5cqw}
.cd-note{font-size:2.75cqw;line-height:1.24}
.cd-title b{font-size:6.4cqw}
.cd-title small{font-size:max(10px,1.2cqw)}
/* the testimonial is a paper sheet that slides up over the postcard */
html.av-live .q-c{margin-top:-100vh;position:relative;z-index:4;border-radius:clamp(24px,3vw,44px) clamp(24px,3vw,44px) 0 0;box-shadow:0 -40px 90px rgba(0,0,0,.45)}
/* ROUND 36 — no dark gap after the iris: the next section waits underneath and appears in place */
html.av-live .d-b{margin-top:-200vh;--rv:clamp(0,calc((var(--pp,1) - .74) / .06),1)}
html.av-live .av[data-bgfade] .d-b,html.av-live .av[data-bgfade] .d-b>.pin-in{background:transparent!important}
html.av-live .d-b>.pin-in>*{opacity:var(--rv);transition:none}
html.av-live .d-b .db-top{transform:translate3d(0,calc((1 - var(--rv)) * 30px),0)}
html.av-live .d-b{pointer-events:none}
html.av-live .d-b>.pin-in{pointer-events:auto}
.pa-iris{background:#0B0B0D}
html.live-x{}
html.av-live .av[data-bgfade] .p-a>.pin-in{background:#EEEDE8!important}
/* ROUND 37 — restore the colour blend into Who we are (no solid panel); testimonial stays a solid paper sheet */
html.av-live .av[data-bgfade] .c-d>.pin-in{background:transparent!important}
/* ROUND 38 — receding effect scales the content, not the backdrop, so no side gaps appear */
html.av-live .c-d .pin-in{transform:none;filter:none}
html.av-live .c-d .pin-in>*{transform-origin:50% 0;scale:calc(1 - var(--r,0) * .08);filter:brightness(calc(1 - var(--r,0) * .55))}
html.av-live .c-d .pin-in{box-shadow:inset 0 0 0 100vmax rgba(0,0,0,calc(var(--r,0) * .35))}
/* ================= ROUND 53 — sheet transitions around How we work, new "What you walk away with", booking ================= */
/* shared "sheet" look */
/* 1) craft → How we work: the light section slides up over the craft section (same as the quote section) */
.sh-track{transform:translate3d(calc(min(1, var(--p,0) / .7) * var(--hx,0px) * -1),0,0)}
.sh-bar i{transform:scaleX(min(1, var(--p,0) / .7))}
html.av-live .av[data-bgfade] .s-h>.pin-in{background:#0B0B0D!important;--r:clamp(0,calc((var(--p,0) - .76) / .24),1);box-shadow:inset 0 0 0 100vmax rgba(0,0,0,calc(var(--r) * .35))}
html.av-live .s-h .pin-in>*{transform-origin:50% 0;scale:calc(1 - var(--r,0) * .08);filter:brightness(calc(1 - var(--r,0) * .55))}
html.av-live .p-a{margin-top:-100vh;position:relative;z-index:4}
html.av-live .av[data-bgfade] .p-a>.pin-in{background:#EEEDE8!important;border-radius:clamp(24px,3vw,44px) clamp(24px,3vw,44px) 0 0;box-shadow:0 -40px 90px rgba(0,0,0,.45),inset 0 0 0 100vmax rgba(0,0,0,calc(var(--r,0) * .3))}
/* How we work: remove the old iris exit; the wheel finishes, then the section recedes under the next sheet */
.p-a .pin-in{--z:0;--ze:0;--r:clamp(0,calc((var(--p,0) - .76) / .24),1)}
.p-a .pa-stage{--f:min(calc(var(--n,5) - 1),calc(var(--p,0) * (var(--n,5) - 1) / .7));transform:none;filter:none;opacity:1}
html.av-live .p-a .pin-in>*{transform-origin:50% 0;scale:calc(1 - var(--r,0) * .08);filter:brightness(calc(1 - var(--r,0) * .4))}
/* 2) How we work → What you walk away with: a dark sheet slides up over the light section */
.dk{position:relative}
html.av-live .dk{margin-top:-100vh;z-index:5}
.dk .pin-in{min-height:900px;background:#0B0B0D;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(22px,4vh,44px);padding:clamp(64px,10vh,110px) var(--g) clamp(28px,5vh,56px);
  --r:clamp(0,calc((var(--p,0) - .8) / .2),1)}
html.av-live .av[data-bgfade] .dk,html.av-live .av[data-bgfade] .dk>.pin-in{background:#0B0B0D!important}
html.av-live .dk>.pin-in{border-radius:clamp(24px,3vw,44px) clamp(24px,3vw,44px) 0 0;box-shadow:0 -40px 90px rgba(0,0,0,.5),inset 0 0 0 100vmax rgba(0,0,0,calc(var(--r) * .35))}
html.av-live .dk .pin-in>*{transform-origin:50% 0;scale:calc(1 - var(--r) * .06);filter:brightness(calc(1 - var(--r) * .5))}
/* the new design: a stacked deck of deliverables, dealt one by one into a 4 × 2 grid */
.dk-head{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.dk-head .h2{max-width:900px}
.dk-grid{--gap:16px;--W:min(1240px,calc(100vw - var(--g) * 2),calc(((100vh - 330px) / 2.36) * 4 + var(--gap) * 3));width:var(--W);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap);position:relative}
.dk-card{--cw:calc((var(--W) - var(--gap) * 3) / 4);--ch:calc(var(--cw) * 1.18);height:var(--ch);position:relative;border-radius:18px;background:#16161b;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 30px 60px -24px rgba(0,0,0,.7);overflow:hidden;display:flex;flex-direction:column;
  --c:0;--rw:0;--s:clamp(0,calc((var(--p,0) - .1 - var(--i,0) * .075) / .13),1);--se:calc(var(--s) * var(--s) * (3 - 2 * var(--s)));
  transform:translate3d(calc((1.5 - var(--c)) * (var(--cw) + var(--gap)) * (1 - var(--se))),calc((.5 - var(--rw)) * (var(--ch) + var(--gap)) * (1 - var(--se)) + (1 - var(--se)) * 18px),0) rotate(calc((var(--i,0) - 3.5) * 2.6deg * (1 - var(--se))));
  z-index:calc(20 - var(--i,0))}
.dk-card:nth-child(4n+1){--c:0}.dk-card:nth-child(4n+2){--c:1}.dk-card:nth-child(4n+3){--c:2}.dk-card:nth-child(4n+4){--c:3}
.dk-card:nth-child(n+5){--rw:1}
.dk-art{position:relative;flex:1 1 auto;margin:8px 8px 0;border-radius:12px;overflow:hidden}
.dk-art .plate{position:absolute;inset:0;transform:scale(calc(1.25 - var(--se) * .25));transition:transform 1.2s var(--ez)}
.dk-card:hover .dk-art .plate{transform:scale(1.08)}
.dk-txt{padding:12px 16px 16px;display:flex;flex-direction:column;gap:4px;opacity:calc(.25 + var(--se) * .75)}
.dk-n{font-family:var(--fm);font-size:10px;letter-spacing:.1em;color:var(--blue-l)}
.dk-txt b{font-family:var(--fd);font-weight:600;font-size:clamp(16px,1.35vw,22px);letter-spacing:-.03em;color:var(--paper)}
.dk-txt p{font-size:clamp(11.5px,.9vw,13.5px);line-height:1.4;color:#a9a9b2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
html:not(.av-live) .dk-card{--s:1}
@media (max-width:760px){
  html.av-live .dk{height:auto!important;margin-top:0}
  html.av-live .dk .pin-in{position:relative;height:auto!important;border-radius:0}
  .dk-grid{grid-template-columns:repeat(2,minmax(0,1fr));--W:calc(100vw - var(--g) * 2)}
  .dk-card{--cw:calc((var(--W) - var(--gap)) / 2);--s:1;transform:none}
}
/* 3) What you walk away with → Industries: Industries arrives as the next sheet */
html.av-live .i-a{margin-top:-100vh;position:relative;z-index:6;border-radius:clamp(24px,3vw,44px) clamp(24px,3vw,44px) 0 0;box-shadow:0 -40px 90px rgba(0,0,0,.55),inset 0 1px 0 rgba(163,173,255,.18)}
html.av-live .av[data-bgfade] .i-a{background:#0F0F13!important}
@media (max-width:760px){html.av-live .i-a{margin-top:0}}
/* 4) quote → booking: the paper melts into ink at the bottom of the quote section */
html.av-live .q-c{padding-bottom:calc(110px + 46vh)!important}
html.av-live .q-c::after{content:'';position:absolute;left:0;right:0;bottom:0;height:46vh;pointer-events:none;background:linear-gradient(180deg,rgba(11,11,13,0) 0%,rgba(11,11,13,.18) 30%,rgba(11,11,13,.7) 70%,#0B0B0D 100%)}
/* 5) Let's talk — big, letters rise in */
.b-b>.bb-big{position:relative;z-index:2;font-size:clamp(84px,15vw,260px)!important;line-height:.86;letter-spacing:-.06em;font-weight:700;margin:0 0 clamp(40px,7vh,90px);white-space:nowrap}
.bb-anim .wd{display:inline-block;overflow:hidden;padding:.06em .04em .16em;margin:-.06em -.04em -.16em;vertical-align:bottom}
.bb-anim .wd.ser{font-family:var(--fs);font-style:italic;font-weight:400;color:var(--blue-l);letter-spacing:-.02em}
.bb-anim .ch{display:inline-block;transition:transform 1.1s var(--ez),opacity .8s var(--ez);transition-delay:calc(var(--i,0) * 55ms)}
html.av-live .bb-anim:not(.in) .ch{transform:translate3d(0,110%,0) rotate(10deg);opacity:0}
@media (max-width:600px){.b-b>.bb-big{font-size:clamp(64px,21vw,120px)!important}}
/* ROUND 47 — Cal.com embed in the booking section */
.bb-cal{position:relative;border-radius:24px;background:rgba(255,255,255,.03);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);padding:10px;display:flex;flex-direction:column;gap:10px;min-width:0}
.bb-cal-in{width:100%;height:clamp(560px,78vh,720px);overflow:auto;border-radius:16px}
.bb-cal-in iframe{width:100%;height:100%;border:0;border-radius:16px;background:transparent}
.bb-cal-alt{align-self:center;font-family:var(--fm);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--mi);padding:6px 0}
.bb-cal-alt:hover{color:var(--paper)}
@media (max-width:760px){.bb-cal-in{height:640px}}
.b-b .bb-grid{grid-template-columns:minmax(0,1fr) minmax(0,2.1fr);align-items:start}
.b-b .bb-cal{width:100%}
@media (max-width:900px){.b-b .bb-grid{grid-template-columns:minmax(0,1fr)}}
.b-b .bb-grid{display:grid;gap:clamp(32px,4vw,64px)}
/* ROUND 54 — bring back the scroll colour blend (sheets are solid only where they overlap) */
.bg-mark{position:absolute;left:0;right:0;top:100vh;height:1px;pointer-events:none}
html:not(.av-live) .bg-mark{top:0}
/* Industries: solid only for the sheet part, then the page colour shows through so it can blend into the blue */
html.av-live .av[data-bgfade] .i-a{background:linear-gradient(180deg,#0F0F13 0,#0F0F13 100vh,rgba(15,15,19,0) 140vh)!important}
/* Quote: solid paper while it covers the postcard, then the page colour (paper) blends into the booking ink */
html.av-live .av[data-bgfade] .q-c{background:linear-gradient(180deg,#EEEDE8 0,#EEEDE8 100vh,rgba(238,237,232,0) 100vh)!important}
html.av-live .q-c{padding-bottom:110px!important}
html.av-live .q-c::after{display:none}
/* ROUND 55 — quote → booking: the paper itself darkens to ink on scroll (animated colour blend) */
html.av-live .q-c{--k:clamp(0,calc((var(--p,0) - .56) / .34),1);--ke:calc(var(--k) * var(--k) * (3 - 2 * var(--k)))}
html.av-live .av[data-bgfade] .q-c{background:color-mix(in srgb,#0B0B0D calc(var(--ke) * 100%),#EEEDE8)!important}
html.av-live .q-c .qc-in,html.av-live .q-c .qc-logos{opacity:calc(1 - var(--ke) * .9)}
html.av-live .q-c{--k:clamp(0,calc((var(--p,0) - .5) / .26),1)}
html.av-live .q-c::after{display:block;content:'';position:absolute;left:0;right:0;bottom:0;height:34vh;pointer-events:none;background:linear-gradient(180deg,rgba(11,11,13,0),#0B0B0D)}
html.av-live .q-c{padding-bottom:calc(110px + 20vh)!important}
/* ROUND 56 — no shadow band under Industries; testimonial is dark (no colour transition needed) */
html.av-live .i-a{box-shadow:inset 0 1px 0 rgba(163,173,255,.18)}
html.av-live .q-c{--k:0;--ke:0;padding-bottom:110px!important}
html.av-live .q-c::after{display:none}
html.av-live .q-c .qc-in,html.av-live .q-c .qc-logos{opacity:1}
.q-c,html.av-live .av[data-bgfade] .q-c{background:#0B0B0D!important;color:var(--paper)}
html.av-live .q-c{box-shadow:0 -40px 90px rgba(0,0,0,.55),inset 0 1px 0 rgba(163,173,255,.18)}
.q-c .mp{color:#9a9aa3}
.q-c .qc-text{color:var(--paper)}
.q-c .hl{background-image:linear-gradient(rgba(30,50,245,.85),rgba(30,50,245,.85))}
.q-c .qc-play{background:var(--blue)}
.q-c .qc-ph{background:radial-gradient(circle at 50% 36%,#2a2a33 0 20%,rgba(0,0,0,0) 20.5%),radial-gradient(circle at 50% 100%,#2a2a33 0 44%,rgba(0,0,0,0) 44.5%),var(--blue);color:#cfcfd4}
.q-c .qc-logos{box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
.q-c .qc-logos .mq-row span{box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);color:#8a8a93}
/* ROUND 57 — sheets lose their rounded corners as they reach the top */
html.av-live .p-a>.pin-in,html.av-live .dk>.pin-in,html.av-live .i-a,html.av-live .q-c{border-radius:calc(clamp(24px,3vw,44px) * var(--sh,1)) calc(clamp(24px,3vw,44px) * var(--sh,1)) 0 0!important}
/* ================= ROUND 58 — "What you walk away with" options ================= */
.wy-head{display:flex;flex-direction:column;gap:14px}
/* A — kinetic index: giant list, active row lights up, art panel swaps */
.wa2 .pin-in{min-height:900px;background:#0B0B0D;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(24px,4vw,72px);align-items:center;padding:clamp(70px,10vh,110px) var(--g) clamp(30px,5vh,60px);--f:calc(var(--p,0) * 7.999)}
.wa2-list{display:flex;flex-direction:column;gap:0;margin-top:clamp(18px,3vh,36px)}
.wa2-row{--d:calc(var(--i,0) - var(--f));--ad:max(var(--d),calc(var(--d) * -1));--on:clamp(0,calc(1 - var(--ad)),1);display:flex;align-items:baseline;gap:18px;padding:clamp(4px,.8vh,10px) 0;border-top:1px solid rgba(255,255,255,.08);transform:translate3d(calc(var(--on) * 22px),0,0)}
.wa2-row span{font-family:var(--fm);font-size:11px;color:rgba(163,173,255,calc(.3 + var(--on) * .7));width:24px}
.wa2-row b{font-family:var(--fd);font-weight:600;font-size:clamp(26px,min(3.4vw,5.6vh),58px);letter-spacing:-.045em;line-height:1;color:color-mix(in srgb,#EEEDE8 calc(22% + var(--on) * 78%),#0B0B0D)}
.wa2-row em{font-family:var(--fs);font-size:clamp(14px,1.1vw,18px);color:var(--blue-l);opacity:var(--on);white-space:nowrap;overflow:hidden;max-width:calc(var(--on) * 40ch)}
.wa2-panel{position:relative;aspect-ratio:4/5;max-height:calc(100vh - 160px);width:100%;justify-self:end;border-radius:22px;overflow:hidden;box-shadow:0 40px 80px -30px rgba(0,0,0,.8)}
.wa2-panel .plate{position:absolute;inset:0;--d:calc(var(--i,0) - var(--f));--ad:max(var(--d),calc(var(--d) * -1));opacity:clamp(0,calc(1.4 - var(--ad) * 1.4),1);transform:scale(calc(1 + var(--ad) * .08))}
.wa2-cap{position:absolute;left:18px;bottom:16px;z-index:3;font-family:var(--fm);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#fff;mix-blend-mode:difference}
/* B — scroll-driven marquee rows with art chips */
.wb2{padding:clamp(110px,16vh,180px) 0;background:#0B0B0D;overflow:hidden;display:flex;flex-direction:column;gap:clamp(40px,7vh,80px)}
.wb2 .wy-head{align-items:center;text-align:center;padding:0 var(--g)}
.wb2-rows{display:flex;flex-direction:column;gap:clamp(10px,2vh,22px)}
.wb2-row{display:flex;width:max-content;gap:28px;align-items:center;white-space:nowrap;transform:translate3d(calc(var(--dir,1) * (var(--p,0) - .5) * 70vw - 25%),0,0)}
.wb2-row:nth-child(2){--dir:-1}
.wb2-row b{font-family:var(--fd);font-weight:600;font-size:clamp(48px,8vw,140px);letter-spacing:-.05em;line-height:1;color:var(--paper)}
.wb2-row b.o{color:transparent;-webkit-text-stroke:1.5px rgba(238,237,232,.55)}
.wb2-chip{width:clamp(90px,9vw,160px);aspect-ratio:4/3;border-radius:14px;overflow:hidden;position:relative;flex:none;transform:rotate(-4deg)}
.wb2-chip:nth-of-type(even){transform:rotate(5deg)}
.wb2-chip .plate{position:absolute;inset:0}
.wb2-lines{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px 28px;padding:0 var(--g)}
.wb2-lines div{border-top:1px solid rgba(255,255,255,.12);padding-top:12px;display:flex;flex-direction:column;gap:6px}
.wb2-lines b{font-family:var(--fd);font-weight:600;font-size:17px;color:var(--paper)}
.wb2-lines p{font-size:13.5px;line-height:1.45;color:#9a9aa3}
@media (max-width:760px){.wb2-lines{grid-template-columns:1fr 1fr}}
/* C — spotlight mosaic: all eight tiles dim, each lights up in turn with its name */
.wc2 .pin-in{min-height:900px;background:#0B0B0D;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(20px,3.5vh,40px);padding:clamp(70px,10vh,110px) var(--g) clamp(30px,5vh,60px);--f:calc(var(--p,0) * 7.999)}
.wc2 .wy-head{align-items:center;text-align:center}
.wc2-grid{--W:min(1240px,calc(100vw - var(--g) * 2),calc((100vh - 300px) * 2.1));width:var(--W);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.wc2-tile{--d:calc(var(--i,0) - var(--f));--ad:max(var(--d),calc(var(--d) * -1));--on:clamp(0,calc(1 - var(--ad) * 1.2),1);position:relative;aspect-ratio:16/10;border-radius:16px;overflow:hidden;filter:grayscale(calc(1 - var(--on))) brightness(calc(.32 + var(--on) * .68));transform:translate3d(0,calc(var(--on) * -8px),0);box-shadow:0 0 0 calc(var(--on) * 2px) var(--blue-l)}
.wc2-tile .plate{position:absolute;inset:0}
.wc2-tile i{position:absolute;left:12px;top:10px;font-style:normal;font-family:var(--fm);font-size:10px;color:#fff;mix-blend-mode:difference}
.wc2-names{position:relative;height:clamp(60px,9vh,96px);width:100%;display:grid;place-items:center}
.wc2-name{grid-area:1/1;display:flex;align-items:baseline;gap:18px;--d:calc(var(--i,0) - var(--f));--ad:max(var(--d),calc(var(--d) * -1));opacity:clamp(0,calc(1 - var(--ad) * 2.2),1);transform:translate3d(0,calc(var(--d) * 26px),0)}
.wc2-name b{font-family:var(--fd);font-weight:600;font-size:clamp(34px,min(4.6vw,7vh),76px);letter-spacing:-.05em;color:var(--paper)}
.wc2-name em{font-family:var(--fs);font-size:clamp(15px,1.2vw,20px);color:var(--blue-l)}
@media (max-width:760px){.wa2 .pin-in{grid-template-columns:1fr}.wa2-panel{display:none}.wc2-grid{grid-template-columns:repeat(2,1fr)}}

/* ================= ROUND 59 — three concepts that act out "what you walk away with" ================= */
.wd3 .pin-in{min-height:900px;background:#0B0B0D;display:flex;flex-direction:column;align-items:center;padding:clamp(64px,9vh,100px) var(--g) 0;overflow:hidden}
.wd3 .wy-head{align-items:center;text-align:center;position:relative;z-index:5}
.wd3-stage{position:relative;flex:1;width:100%;--S:min(1,calc((100vh - 260px) / 620px))}
.wd3-box{position:absolute;left:50%;bottom:-2vh;width:calc(380px * var(--S));height:calc(230px * var(--S));translate:-50% 0;z-index:3}
.wd3-front{position:absolute;inset:0;border-radius:10px 10px 0 0;background:linear-gradient(180deg,#1E32F5,#1426b8);box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
.wd3-front span{position:absolute;left:0;right:0;top:34%;text-align:center;font-family:var(--fm);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.85)}
.wd3-flap{position:absolute;top:0;width:50%;height:46%;background:#2a3ed8;transform-origin:50% 0;--o:clamp(0,calc(var(--p,0) / .08),1)}
.wd3-flap.l{left:0;border-radius:6px 0 0 0;transform:perspective(600px) rotateX(calc(var(--o) * -160deg)) translateY(-100%);transform-origin:50% 100%}
.wd3-flap.r{right:0;border-radius:0 6px 0 0;transform:perspective(600px) rotateX(calc(var(--o) * -160deg)) translateY(-100%);transform-origin:50% 100%}
.wd3-back{position:absolute;left:50%;bottom:calc(-2vh + 230px * var(--S) - 6px);width:calc(380px * var(--S));height:28px;translate:-50% 0;background:#0f1b80;border-radius:8px 8px 0 0;z-index:1}
.wd3-item{position:absolute;left:50%;bottom:calc(-2vh + 120px * var(--S));width:calc(170px * var(--S));z-index:2;
  --s:clamp(0,calc((var(--p,0) - .1 - var(--i,0) * .095) / .13),1);--se:calc(1 - (1 - var(--s)) * (1 - var(--s)) * (1 - var(--s)));
  transform:translate(calc(-50% + var(--tx) * var(--se)),calc(var(--ty) * var(--se) + (1 - var(--se)) * 40px)) rotate(calc(var(--tr) * var(--se))) scale(calc(.55 + var(--se) * .45));opacity:clamp(0,calc(var(--s) * 6),1)}
.wd3-item .plate{position:relative;aspect-ratio:4/3;border-radius:12px;box-shadow:0 20px 40px -14px rgba(0,0,0,.7)}
.wd3-item b{display:block;margin-top:8px;text-align:center;font-family:var(--fd);font-weight:600;font-size:calc(17px * var(--S) + 2px);letter-spacing:-.03em;color:var(--paper)}
.wd3-item small{display:block;text-align:center;font-size:calc(11px * var(--S) + 1px);line-height:1.35;color:#9a9aa3;opacity:var(--se)}
.wd3-item:nth-child(1){--tx:calc(-538px * var(--S));--ty:calc(-217px * var(--S));--tr:-9.4deg}
.wd3-item:nth-child(2){--tx:calc(-454px * var(--S));--ty:calc(-314px * var(--S));--tr:-6.7deg}
.wd3-item:nth-child(3){--tx:calc(-303px * var(--S));--ty:calc(-388px * var(--S));--tr:-4.0deg}
.wd3-item:nth-child(4){--tx:calc(-106px * var(--S));--ty:calc(-428px * var(--S));--tr:-1.3deg}
.wd3-item:nth-child(5){--tx:calc(106px * var(--S));--ty:calc(-428px * var(--S));--tr:1.3deg}
.wd3-item:nth-child(6){--tx:calc(303px * var(--S));--ty:calc(-388px * var(--S));--tr:4.0deg}
.wd3-item:nth-child(7){--tx:calc(454px * var(--S));--ty:calc(-314px * var(--S));--tr:6.7deg}
.wd3-item:nth-child(8){--tx:calc(538px * var(--S));--ty:calc(-217px * var(--S));--tr:9.4deg}
.we3 .pin-in{min-height:900px;background:#0B0B0D;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:clamp(30px,5vw,90px);padding:clamp(64px,9vh,100px) var(--g) clamp(20px,4vh,40px)}
.we3 .wy-head .h2{max-width:560px}
.we3-lead{margin-top:20px;max-width:420px;color:#9a9aa3;font-size:17px;line-height:1.5}
.we3-slot{position:relative;justify-self:center;width:min(440px,100%);padding-top:14px}
.we3-slot::before{content:'';position:absolute;left:-14px;right:-14px;top:0;height:16px;border-radius:8px;background:#1b1b22;box-shadow:inset 0 2px 4px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.06);z-index:2}
.we3-paper{--k:clamp(0,calc(var(--p,0) / .86),1);position:relative;background:#F4F1E8;color:#1d1a16;padding:22px 26px 34px;font-family:var(--fm);font-size:clamp(10.5px,1.5vh,12.5px);
  clip-path:inset(0 0 calc((1 - var(--k)) * 100%) 0);transform:translate3d(0,calc((1 - var(--k)) * -40px),0);
  -webkit-mask:linear-gradient(#000 0 0) top/100% calc(100% - 10px) no-repeat,conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/16px 10px repeat-x;mask:linear-gradient(#000 0 0) top/100% calc(100% - 10px) no-repeat,conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/16px 10px repeat-x;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.7)}
.we3-h{text-align:center;display:flex;flex-direction:column;gap:3px;padding-bottom:12px;border-bottom:1px dashed rgba(29,26,22,.35);letter-spacing:.08em;text-transform:uppercase}
.we3-h b{font-family:var(--fd);font-size:20px;letter-spacing:-.02em;text-transform:none}
.we3-row{display:grid;grid-template-columns:22px 1fr auto;gap:8px;padding:clamp(5px,.95vh,9px) 0;border-bottom:1px dotted rgba(29,26,22,.22);align-items:baseline;--s:clamp(0,calc((var(--p,0) * 1.05 - .06 - var(--i,0) * .09) / .06),1);opacity:var(--s)}
.we3-row b{font-family:var(--fd);font-weight:600;font-size:1.25em;letter-spacing:-.02em}
.we3-row small{grid-column:2;font-family:var(--fb);font-size:.95em;color:#6a645a;line-height:1.35}
.we3-row i{font-style:normal;color:#1E32F5}
.we3-tot{display:flex;justify-content:space-between;gap:12px;padding-top:12px;font-weight:500;text-transform:uppercase;letter-spacing:.06em;opacity:clamp(0,calc((var(--p,0) - .8) / .06),1)}
.we3-tot span:last-child{font-family:var(--fs);font-style:italic;text-transform:none;letter-spacing:0;font-size:1.3em;color:#1E32F5}
.we3-stamp{position:absolute;right:16px;bottom:56px;width:120px;aspect-ratio:1;border-radius:50%;border:2.5px solid #1E32F5;color:#1E32F5;display:flex;align-items:center;justify-content:center;text-align:center;font-family:var(--fm);font-size:11px;letter-spacing:.12em;line-height:1.3;text-transform:uppercase;--m:clamp(0,calc((var(--p,0) - .88) / .06),1);opacity:calc(var(--m) * .85);transform:rotate(-14deg) scale(calc(1.8 - var(--m) * .8))}
.we3-stamp::before{content:'';position:absolute;inset:6px;border-radius:50%;border:1px solid currentColor}
.wf3 .pin-in{min-height:900px;background:#0B0B0D;display:flex;flex-direction:column;align-items:center;gap:clamp(18px,3vh,36px);padding:clamp(64px,9vh,100px) var(--g) 0;overflow:hidden;--f:calc(var(--p,0) * 7.999)}
.wf3 .wy-head{align-items:center;text-align:center}
.wf3-drawer{position:relative;flex:1;width:min(980px,100%);perspective:1400px}
.wf3-folder{position:absolute;left:0;right:0;bottom:0;height:calc(100% - 20px);border-radius:16px 16px 0 0;background:var(--fc);
  --d:calc(var(--i,0) - var(--f));--past:clamp(0,calc(var(--d) * -1),1);--now:clamp(0,calc(1 - max(var(--d),calc(var(--d) * -1))),1);
  transform:translate3d(0,calc(var(--i,0) * 26px + 48% - var(--now) * 40% + var(--past) * 60%),0) rotateX(calc(var(--past) * 18deg));transform-origin:50% 100%;
  box-shadow:0 -10px 30px rgba(0,0,0,.45);opacity:calc(1 - var(--past) * .9)}
.wf3-tab{position:absolute;top:-30px;left:calc(var(--i,0) * 11.5%);height:32px;padding:0 16px;border-radius:10px 10px 0 0;background:var(--fc);display:flex;align-items:center;gap:8px;font-family:var(--fm);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ft);white-space:nowrap}
.wf3-body{position:absolute;inset:26px 30px auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:30px;align-items:start;opacity:calc(var(--now) * 1)}
.wf3-body b{display:block;font-family:var(--fd);font-weight:600;font-size:clamp(30px,min(4vw,6vh),64px);letter-spacing:-.05em;line-height:.95;color:var(--ft)}
.wf3-body p{margin-top:12px;font-size:16px;line-height:1.45;color:var(--ft);opacity:.75;max-width:340px}
.wf3-body .plate{aspect-ratio:16/10;border-radius:12px}
.wf3-folder:nth-child(1){--fc:#1E32F5;--ft:#fff}.wf3-folder:nth-child(2){--fc:#EEEDE8;--ft:#0B0B0D}.wf3-folder:nth-child(3){--fc:#FFCF3F;--ft:#0B0B0D}.wf3-folder:nth-child(4){--fc:#24242c;--ft:#EEEDE8}
.wf3-folder:nth-child(5){--fc:#A3ADFF;--ft:#0B0B0D}.wf3-folder:nth-child(6){--fc:#1a1a22;--ft:#EEEDE8}.wf3-folder:nth-child(7){--fc:#d7d3c6;--ft:#0B0B0D}.wf3-folder:nth-child(8){--fc:#1426b8;--ft:#fff}
@media (max-width:760px){.we3 .pin-in{grid-template-columns:1fr}.wf3-body{grid-template-columns:1fr}.wf3-tab{display:none}}
/* r59b: folder stacking fix */
.wf3 .pin-in{--f:min(7,calc(var(--p,0) * 8.2 - .2))}
.wf3-folder{--up:clamp(0,var(--d),6);transform:translate3d(0,calc(6% + clamp(0,var(--d),1) * 44% + var(--up) * 18px + var(--past) * 70%),0) rotateX(calc(var(--past) * 14deg))!important;opacity:calc(1 - var(--past))!important}
/* r60: handover folders on homepage */
.dk.wf3 .pin-in{justify-content:flex-start;gap:clamp(18px,3vh,36px);padding:clamp(64px,9vh,100px) var(--g) 0;overflow:hidden}
.wf3 .wy-head{display:flex;flex-direction:column;gap:14px}
@media (max-width:760px){
  .dk.wf3 .pin-in{padding-bottom:40px}
  .wf3-drawer{flex:none;display:flex;flex-direction:column;gap:14px;perspective:none}
  .wf3-folder{position:relative!important;height:auto;transform:none!important;opacity:1!important;border-radius:16px;box-shadow:none}
  .wf3-body{position:relative;inset:auto;padding:22px;opacity:1;gap:16px}
}
.dk.wf3 .pin-in{--f:min(7,calc(var(--p,0) * 10.6 - .2))}
/* ================= r61: transition into walk-away matches Industries + focus list ================= */
html.av-live .av[data-bgfade] .dk{background:transparent!important}
html.av-live .dk>.pin-in{box-shadow:inset 0 1px 0 rgba(163,173,255,.18),inset 0 0 0 100vmax rgba(0,0,0,calc(var(--r,0) * .35))!important}
.dk.wv .pin-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);align-items:center;justify-content:stretch;gap:clamp(32px,5vw,96px);padding:clamp(70px,11vh,120px) var(--g) clamp(40px,7vh,80px)}
.wv-left{display:flex;flex-direction:column;gap:clamp(22px,4vh,44px);min-width:0}
.wv-head{display:flex;flex-direction:column;gap:14px}
.wv-head .h2{max-width:620px}
.wv-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;counter-reset:none}
.wv-it{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr);align-items:baseline;padding:clamp(3px,.7vh,7px) 0;cursor:default}
.wv-it::before{content:'';position:absolute;left:-18px;top:18%;bottom:18%;width:2px;border-radius:2px;background:var(--blue-l);transform:scaleY(0);transition:transform .6s var(--ez)}
.wv-n{font-family:var(--fm);font-size:11px;letter-spacing:.1em;color:rgba(238,237,232,.28);transition:color .5s}
.wv-t b{display:block;font-family:var(--fd);font-weight:600;font-size:clamp(22px,min(2.7vw,4.3vh),46px);letter-spacing:-.04em;line-height:1.08;color:rgba(238,237,232,.2);transform:translateX(0);transition:color .5s,transform .7s var(--ez)}
.wv-d{display:grid;grid-template-rows:0fr;transition:grid-template-rows .6s var(--ez)}
.wv-d p{overflow:hidden;min-height:0;margin:0;font-size:clamp(13px,1vw,16px);line-height:1.45;color:#a9a9b2;max-width:400px;opacity:0;transition:opacity .4s}
.wv-it.on::before{transform:scaleY(1)}
.wv-it.on .wv-n{color:var(--blue-l)}
.wv-it.on .wv-t b{color:var(--paper);transform:translateX(10px)}
.wv-it.on .wv-d{grid-template-rows:1fr}
.wv-it.on .wv-d p{opacity:1;padding:6px 0 4px 10px;transition-delay:.15s}
.wv-stage{position:relative;height:calc(100vh - clamp(70px,11vh,120px) - clamp(40px,7vh,80px));max-height:760px;min-height:360px;display:flex;flex-direction:column;gap:14px}
.wv-shots{position:relative;flex:1;border-radius:22px;overflow:hidden;background:#16161b;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 40px 80px -30px rgba(0,0,0,.8)}
.wv-shot{position:absolute;inset:0;margin:0;z-index:1;clip-path:inset(100% 0 0 0 round 22px);transition:clip-path .9s var(--ez) .9s}
.wv-shot .plate{position:absolute;inset:0;transform:scale(1.18);transition:transform 1.6s var(--ez) .9s}
.wv-shot.on{z-index:2;clip-path:inset(0 0 0 0 round 22px);transition:clip-path 1s var(--ez)}
.wv-shot.on .plate{transform:scale(1);transition:transform 1.6s var(--ez)}
.wv-shot figcaption{position:absolute;left:18px;bottom:18px;display:flex;align-items:center;gap:10px;padding:8px 14px 8px 8px;border-radius:999px;background:rgba(11,11,13,.55);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);color:var(--paper);opacity:0;transform:translateY(10px);transition:opacity .4s,transform .6s var(--ez)}
.wv-shot.on figcaption{opacity:1;transform:none;transition-delay:.5s}
.wv-shot figcaption span{font-family:var(--fm);font-size:10px;letter-spacing:.1em;text-transform:uppercase;background:var(--blue);color:#fff;padding:5px 9px;border-radius:999px}
.wv-shot figcaption b{font-family:var(--fd);font-weight:600;font-size:15px;letter-spacing:-.02em}
.wv-meta{display:flex;align-items:center;justify-content:space-between;gap:20px;font-family:var(--fm);font-size:11px;letter-spacing:.1em;color:rgba(238,237,232,.4)}
.wv-count b{font-weight:500;color:var(--paper)}
.wv-ticks{display:flex;gap:6px}
.wv-ticks i{width:26px;height:2px;border-radius:2px;background:rgba(255,255,255,.16);transition:background .4s}
.wv-ticks i.on{background:var(--blue-l)}
html:not(.av-live) .wv-it:first-child,html:not(.av-live) .wv-shot:first-child,html:not(.av-live) .wv-ticks i:first-child{}
@media (max-width:760px){
  .dk.wv .pin-in{display:flex;flex-direction:column;align-items:stretch;padding:72px var(--g) 56px;gap:28px}
  .wv-stage{display:none}
  .wv-it{grid-template-columns:34px minmax(0,1fr);padding:14px 0;border-top:1px solid rgba(255,255,255,.08)}
  .wv-it::before{display:none}
  .wv-it .wv-n{color:var(--blue-l)}
  .wv-it .wv-t b{color:var(--paper)!important;transform:none!important;font-size:24px}
  .wv-it .wv-d{grid-template-rows:1fr}
  .wv-it .wv-d p{opacity:1;padding:6px 0 0 0!important}
}
/* r62: industries hover preview can't leak into the next section */
.ia-pv,.ia-pv *{pointer-events:none!important}
.ia-list:not(.fo-in) .ia-pv{opacity:0!important;transition-duration:.2s}
/* r63: industries — hover state driven by cursor position (works while scrolling) + animated SVG previews */
html.av-cur .ia-row:hover::before{transform:scaleY(0)}
html.av-cur .ia-row:hover .ia-name{transform:none}
html.av-cur .ia-row:hover .ia-line{opacity:0;transform:translateY(10px);color:#B4B4BA}
html.av-cur .ia-row:hover .ia-arr{transform:none}
html.av-cur .ia-row.hov::before{transform:scaleY(1)}
html.av-cur .ia-row.hov .ia-name{transform:translateX(22px)}
html.av-cur .ia-row.hov .ia-line{opacity:1;transform:none;color:#fff}
html.av-cur .ia-row.hov .ia-arr{transform:rotate(-45deg)}
html.av-cur .ia-list:hover .ia-pv{transform:translate3d(var(--fx,0px),var(--fy,0px),0) rotate(calc(var(--fvx,0) * .5deg)) scale(.6)}
html.av-cur .ia-list.fo-in .ia-pv{opacity:1;transform:translate3d(var(--fx,0px),var(--fy,0px),0) rotate(calc(var(--fvx,0) * .5deg)) scale(1)}
.ia-art{position:absolute;inset:0;opacity:0;transform:scale(1.12);transition:opacity .4s,transform .9s var(--ez)}
.ia-art.on{opacity:1;transform:none}
.ia-art svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.ia-art svg *{transform-box:fill-box;transform-origin:center}
.ia-art .pn{position:absolute;left:14px;top:12px;font-family:var(--fm);font-size:10px;letter-spacing:.08em;color:rgba(11,11,13,.7);z-index:2}
.ia-art:nth-child(1) .pn,.ia-art:nth-child(4) .pn,.ia-art:nth-child(6) .pn,.ia-art:nth-child(8) .pn{color:rgba(238,237,232,.75)}
.ia-art:not(.on) svg *{animation-play-state:paused!important}
/* 1 retail */
.a-float{animation:aFloat 3s ease-in-out infinite}
.a-drop{animation:aDrop 2.4s cubic-bezier(.55,0,.6,1) infinite;opacity:0}
.a-drop.d2{animation-delay:.8s}.a-drop.d3{animation-delay:1.6s}
.a-pop{animation:aPop 2.4s var(--ez) infinite}
@keyframes aFloat{50%{transform:translateY(-6px)}}
@keyframes aDrop{0%{transform:translateY(-30px) rotate(0);opacity:0}15%{opacity:1}70%{transform:translateY(140px) rotate(160deg);opacity:1}80%,100%{transform:translateY(150px) rotate(180deg);opacity:0}}
@keyframes aPop{0%,60%{transform:scale(0)}72%{transform:scale(1.2)}82%,92%{transform:scale(1)}100%{transform:scale(0)}}
/* 2 home */
.a-ring{animation:aRing 2.6s ease-out infinite}.a-ring.r2{animation-delay:1.3s}
.a-glow{animation:aGlow 2.6s ease-in-out infinite}
.a-shackle{transform-origin:100% 100%;animation:aShackle 2.6s var(--ez) infinite}
@keyframes aRing{0%{transform:scale(.6);opacity:1}100%{transform:scale(1.5);opacity:0}}
@keyframes aGlow{50%{opacity:.45}}
@keyframes aShackle{0%,30%{transform:translateY(-8px)}45%,85%{transform:none}100%{transform:translateY(-8px)}}
/* 3 learning */
.a-page{transform-origin:0 50%;animation:aPage 2.8s cubic-bezier(.6,0,.3,1) infinite}
.a-cap{animation:aFloat 2.8s ease-in-out infinite}
.a-tassel{animation:aSwing 1.4s ease-in-out infinite alternate}
@keyframes aPage{0%,15%{transform:scaleX(1)}55%,100%{transform:scaleX(-1)}}
@keyframes aSwing{to{transform:translateX(5px)}}
/* 4 safety */
.a-tick{stroke-dasharray:30;stroke-dashoffset:30;animation:aTick 4s var(--ez) infinite}
.a-tick.t1{animation-delay:.5s}.a-tick.t2{animation-delay:1s}.a-tick.t3{animation-delay:1.5s}
.a-badge{animation:aPop2 4s var(--ez) infinite}
@keyframes aTick{0%{stroke-dashoffset:30}15%,85%{stroke-dashoffset:0}100%{stroke-dashoffset:30}}
@keyframes aPop2{0%,45%{transform:scale(0) rotate(-20deg)}58%{transform:scale(1.15)}65%,90%{transform:scale(1)}100%{transform:scale(0)}}
/* 5 saas */
.a-bar{transform-origin:50% 100%;animation:aBar 3.2s var(--ez) infinite}
.b0{--h:.35}.b1{--h:.5;animation-delay:.12s!important}.b2{--h:.45;animation-delay:.24s!important}.b3{--h:.75;animation-delay:.36s!important}.b4{--h:.95;animation-delay:.48s!important}
.a-line{stroke-dasharray:260;stroke-dashoffset:260;animation:aLine 3.2s var(--ez) infinite}
.a-rocket{animation:aRocket 3.2s var(--ez) infinite}
.a-flame{animation:aFlame .25s linear infinite alternate}
@keyframes aBar{0%{transform:scaleY(.05)}35%,85%{transform:scaleY(var(--h))}100%{transform:scaleY(.05)}}
@keyframes aLine{0%,10%{stroke-dashoffset:260}50%,85%{stroke-dashoffset:0}100%{stroke-dashoffset:260}}
@keyframes aRocket{0%,40%{transform:translate(0,30px);opacity:0}55%{opacity:1}80%{transform:translate(4px,-6px);opacity:1}100%{transform:translate(10px,-40px);opacity:0}}
@keyframes aFlame{to{transform:scaleY(1.5)}}
/* 6 services */
.a-sign{stroke-dasharray:220;stroke-dashoffset:220;animation:aSign 3.6s ease-in-out infinite}
.a-seal{animation:aPop2 3.6s var(--ez) infinite}
@keyframes aSign{0%,8%{stroke-dashoffset:220}50%,88%{stroke-dashoffset:0}100%{stroke-dashoffset:220}}
/* 7 hospitality */
.a-steam{animation:aSteam 2.4s ease-in-out infinite;opacity:0}.a-steam.s2{animation-delay:.6s}.a-steam.s3{animation-delay:1.2s}
.a-lid{transform-origin:100% 100%;animation:aLid 4.8s var(--ez) infinite}
.a-slot.q1{animation:aBook 4.8s var(--ez) infinite}
@keyframes aSteam{0%{transform:translateY(10px);opacity:0}40%{opacity:1}100%{transform:translateY(-24px);opacity:0}}
@keyframes aLid{0%,55%,100%{transform:none}65%,80%{transform:translate(8px,-18px) rotate(14deg)}}
@keyframes aBook{0%,40%{fill:#0B0B0D;opacity:.12}50%,95%{fill:#1E32F5;opacity:1}}
/* 8 property */
.a-win{opacity:.15;animation:aWin 3s steps(1) infinite}
.w1{animation-delay:.3s}.w2{animation-delay:.6s}.w3{animation-delay:.9s}.w4{animation-delay:1.2s}.w5{animation-delay:1.5s}.w6{animation-delay:1.8s}.w7{animation-delay:2.1s}.w8{animation-delay:2.4s}
.a-pin{animation:aBounce 1.6s cubic-bezier(.5,0,.5,1) infinite}
.a-shadow{animation:aShadow 1.6s cubic-bezier(.5,0,.5,1) infinite}
@keyframes aWin{0%{opacity:.15}20%,70%{opacity:1}}
@keyframes aBounce{50%{transform:translateY(-14px)}}
@keyframes aShadow{50%{transform:scaleX(.6);opacity:.15}}
@media (prefers-reduced-motion:reduce){.ia-art svg *{animation:none!important}}
/* r64: no custom cursor effects over the industries preview */
html.cur-off .cur,html.cur-off .cur-tr,html.cur-off .cur-aura{opacity:0!important;transition:opacity .2s}
html.cur-off .ia-list{cursor:default!important}html.cur-off .ia-list a{cursor:pointer!important}
/* ================= r65: craft cards — SVG animations (moderate builds) ================= */
.s-h .sc-p .sba>*:not(.cr-svg){display:none!important}
.cr-svg{position:absolute;right:2.5%;top:50%;width:55%;height:88%;transform:translateY(-50%);overflow:visible}
.cr-svg *{transform-box:fill-box}
.cr-svg text{font-family:var(--fb);font-weight:600}
.cr-svg .mono{font-family:var(--fm);font-weight:500;letter-spacing:.06em}
.cr-svg .disp{font-family:var(--fd);font-weight:600;letter-spacing:-.03em}
.cr-svg .ser{font-family:var(--fs);font-style:italic;font-weight:400}
@media (max-width:760px){.cr-svg{left:5%;right:5%;width:auto;top:5%;height:46%;transform:none}}
@media (prefers-reduced-motion:reduce){.cr-svg *{animation:none!important}}
.cr-1 .w1{transform-origin:0 50%;animation:cr1_cr1 3.4s cubic-bezier(.2,.8,.2,1) infinite;}
@keyframes cr1{0%,0.7%{transform:scaleX(0);opacity:1}3.3%,92%{transform:scaleX(1);opacity:1}98%,100%{opacity:0}}
.cr-1 .w2{transform-origin:0 50%;animation:cr2_cr1 3.4s cubic-bezier(.2,.8,.2,1) infinite;}
@keyframes cr2{0%,2.0%{transform:scaleX(0);opacity:1}4.7%,92%{transform:scaleX(1);opacity:1}98%,100%{opacity:0}}
.cr-1 .w3{transform-origin:0 50%;animation:cr3_cr1 3.4s cubic-bezier(.2,.8,.2,1) infinite;}
@keyframes cr3{0%,3.3%{transform:scaleX(0);opacity:1}6.0%,92%{transform:scaleX(1);opacity:1}98%,100%{opacity:0}}
.cr-1 .w4{transform-origin:0 50%;animation:cr4_cr1 3.4s cubic-bezier(.2,.8,.2,1) infinite;}
@keyframes cr4{0%,4.0%{transform:scaleX(0);opacity:1}6.7%,92%{transform:scaleX(1);opacity:1}98%,100%{opacity:0}}
.cr-1 .w5{transform-origin:50% 50%;animation:cr5_cr1 3.4s cubic-bezier(.2,.8,.2,1) infinite;}
@keyframes cr5{0%,5.3%{transform:scale(0);opacity:0}6.7%{transform:scale(1.14);opacity:1}8.0%,92%{transform:scale(1);opacity:1}98%,100%{opacity:0}}
.cr-1 .w6{transform-origin:50% 50%;animation:cr6_cr1 3.4s cubic-bezier(.2,.8,.2,1) infinite;}
@keyframes cr6{0%,2.7%{transform:translateY(18px);opacity:0}5.3%,92%{transform:none;opacity:1}98%,100%{opacity:0}}
.cr-1 .w7{transform-origin:50% 50%;animation:cr7_cr1 3.4s cubic-bezier(.2,.8,.2,1) infinite;}
@keyframes cr7{0%,6.7%{transform:translateY(18px);opacity:0}9.3%,92%{transform:none;opacity:1}98%,100%{opacity:0}}
.cr-1 .w8{transform-origin:50% 50%;animation:cr8_cr1 3.4s cubic-bezier(.2,.8,.2,1) infinite;}
@keyframes cr8{0%,7.7%{transform:translateY(18px);opacity:0}10.3%,92%{transform:none;opacity:1}98%,100%{opacity:0}}
.cr-1 .w9{transform-origin:50% 50%;animation:cr9_cr1 3.4s cubic-bezier(.2,.8,.2,1) infinite;}
@keyframes cr9{0%,8.7%{transform:translateY(18px);opacity:0}11.3%,92%{transform:none;opacity:1}98%,100%{opacity:0}}
.cr-1 .w10{transform-origin:50% 50%;animation:cr10_cr1 3.4s cubic-bezier(.2,.8,.2,1) infinite;}
@keyframes cr10{0%,20.7%{transform:scale(0);opacity:0}22.0%{transform:scale(1.14);opacity:1}23.3%,92%{transform:scale(1);opacity:1}98%,100%{opacity:0}}
.cr-1 .w-sun{animation:crSun_cr1 3.4s ease-in-out infinite}@keyframes crSun{0%,3.3%{transform:translateY(30px)}13.3%,100%{transform:none}}
.cr-1 .w-cur{animation:crCur_cr1 3.4s cubic-bezier(.6,0,.2,1) infinite}@keyframes crCur{0%,10.7%{transform:translate(420px,330px);opacity:0}12.0%{opacity:1}16.7%{transform:translate(132px,230px)}17.7%{transform:translate(132px,230px) scale(.8)}18.7%{transform:translate(132px,230px) scale(1)}26.7%{transform:translate(380px,300px);opacity:1}90%,100%{transform:translate(380px,300px);opacity:0}}
.cr-1 .w-rip{transform-origin:50% 50%;animation:crRip_cr1 3.4s ease-out infinite}@keyframes crRip{0%,17.7%{transform:scale(.4);opacity:0}18.0%{opacity:1}22.0%,100%{transform:scale(1.5);opacity:0}}
.cr-1 .w-score{stroke-dasharray:100;animation:crScore_cr1 3.4s cubic-bezier(.2,.8,.2,1) infinite}@keyframes crScore{0%,21.3%{stroke-dashoffset:100}26.7%,92%{stroke-dashoffset:2}100%{stroke-dashoffset:100}}
.cr-1 .w5{transform-origin:50% 50%}
.cr-2 .s1{transform-origin:50% 50%;animation:cr11_cr2 2.9s cubic-bezier(.2,.8,.2,1) infinite;}
@keyframes cr11{0%,1.3%{transform:translateY(18px);opacity:0}4.0%,92%{transform:none;opacity:1}98%,100%{opacity:0}}
.cr-2 .s2{transform-origin:50% 50%;animation:cr12_cr2 2.9s cubic-bezier(.2,.8,.2,1) infinite;}
@keyframes cr12{0%,2.7%{transform:translateY(18px);opacity:0}5.3%,92%{transform:none;opacity:1}98%,100%{opacity:0}}
.cr-2 .s3{transform-origin:50% 50%;animation:cr13_cr2 2.9s cubic-bezier(.2,.8,.2,1) infinite;}
@keyframes cr13{0%,4.0%{transform:translateY(18px);opacity:0}6.7%,92%{transform:none;opacity:1}98%,100%{opacity:0}}
.cr-2 .s4{transform-origin:50% 50%;animation:cr14_cr2 2.9s cubic-bezier(.2,.8,.2,1) infinite;}
@keyframes cr14{0%,11.3%{opacity:0}14.0%,92%{opacity:1}98%,100%{opacity:0}}
.cr-2 .s5{transform-origin:50% 50%;animation:cr15_cr2 2.9s cubic-bezier(.2,.8,.2,1) infinite;stroke-dasharray:1;}
@keyframes cr15{0%,6.7%{stroke-dashoffset:1}11.3%,92%{stroke-dashoffset:0}98%,100%{stroke-dashoffset:1}}
.cr-2 .s6{transform-origin:50% 50%;animation:cr16_cr2 2.9s cubic-bezier(.2,.8,.2,1) infinite;}
@keyframes cr16{0%,12.0%{transform:scale(0);opacity:0}13.3%{transform:scale(1.14);opacity:1}14.7%,92%{transform:scale(1);opacity:1}98%,100%{opacity:0}}
.cr-2 .s7{transform-origin:50% 50%;animation:cr17_cr2 2.9s cubic-bezier(.2,.8,.2,1) infinite;}
@keyframes cr17{0%,16.0%{transform:scale(0);opacity:0}17.3%{transform:scale(1.14);opacity:1}18.7%,92%{transform:scale(1);opacity:1}98%,100%{opacity:0}}
.cr-2 .s-ai{transform-origin:50% 50%;animation:crAi 2s ease-in-out infinite}@keyframes crAi{50%{transform:scale(1.07)}}
.cr-3 .b1{transform-origin:50% 50%;animation:cr18_cr3 3.48s cubic-bezier(.2,.8,.2,1) infinite;stroke-dasharray:1;}
@keyframes cr18{0%,0%{stroke-dashoffset:1}4.7%,92%{stroke-dashoffset:0}98%,100%{stroke-dashoffset:1}}
.cr-3 .b2{transform-origin:50% 50%;animation:cr19_cr3 3.48s cubic-bezier(.2,.8,.2,1) infinite;stroke-dasharray:1;}
@keyframes cr19{0%,1.0%{stroke-dashoffset:1}5.7%,92%{stroke-dashoffset:0}98%,100%{stroke-dashoffset:1}}
.cr-3 .b3{transform-origin:50% 50%;animation:cr20_cr3 3.48s cubic-bezier(.2,.8,.2,1) infinite;stroke-dasharray:1;}
@keyframes cr20{0%,2.0%{stroke-dashoffset:1}6.7%,92%{stroke-dashoffset:0}98%,100%{stroke-dashoffset:1}}
.cr-3 .b4{transform-origin:50% 50%;animation:cr21_cr3 3.48s cubic-bezier(.2,.8,.2,1) infinite;stroke-dasharray:1;}
@keyframes cr21{0%,2.7%{stroke-dashoffset:1}7.3%,92%{stroke-dashoffset:0}98%,100%{stroke-dashoffset:1}}
.cr-3 .b5{transform-origin:50% 50%;animation:cr22_cr3 3.48s cubic-bezier(.2,.8,.2,1) infinite;}
@keyframes cr22{0%,3.3%{transform:scale(0);opacity:0}4.7%{transform:scale(1.14);opacity:1}6.0%,92%{transform:scale(1);opacity:1}98%,100%{opacity:0}}
.cr-3 .b6{transform-origin:50% 50%;animation:cr23_cr3 3.48s cubic-bezier(.2,.8,.2,1) infinite;}
@keyframes cr23{0%,4.3%{transform:scale(0);opacity:0}5.7%{transform:scale(1.14);opacity:1}7.0%,92%{transform:scale(1);opacity:1}98%,100%{opacity:0}}
.cr-3 .b7{transform-origin:50% 50%;animation:cr24_cr3 3.48s cubic-bezier(.2,.8,.2,1) infinite;}
@keyframes cr24{0%,7.3%{transform:scale(0);opacity:0}8.7%{transform:scale(1.14);opacity:1}10.0%,92%{transform:scale(1);opacity:1}98%,100%{opacity:0}}
.cr-3 .b8{transform-origin:50% 50%;animation:cr25_cr3 3.48s cubic-bezier(.2,.8,.2,1) infinite;}
@keyframes cr25{0%,10.0%{transform:scale(0);opacity:0}11.3%{transform:scale(1.14);opacity:1}12.7%,92%{transform:scale(1);opacity:1}98%,100%{opacity:0}}
.cr-3 .b9{transform-origin:50% 50%;animation:cr26_cr3 3.48s cubic-bezier(.2,.8,.2,1) infinite;}
@keyframes cr26{0%,12.0%{transform:scale(0);opacity:0}13.3%{transform:scale(1.14);opacity:1}14.7%,92%{transform:scale(1);opacity:1}98%,100%{opacity:0}}
.cr-3 .b10{transform-origin:50% 50%;animation:cr27_cr3 3.48s cubic-bezier(.2,.8,.2,1) infinite;stroke-dasharray:1;}
@keyframes cr27{0%,14.7%{stroke-dashoffset:1}19.3%,92%{stroke-dashoffset:0}98%,100%{stroke-dashoffset:1}}
.cr-3 .b11{transform-origin:50% 50%;animation:cr28_cr3 3.48s cubic-bezier(.2,.8,.2,1) infinite;}
@keyframes cr28{0%,19.3%{transform:translateY(18px);opacity:0}22.0%,92%{transform:none;opacity:1}98%,100%{opacity:0}}
.cr-3 .b12{transform-origin:50% 50%;animation:cr29_cr3 3.48s cubic-bezier(.2,.8,.2,1) infinite;}
@keyframes cr29{0%,20.3%{transform:translateY(18px);opacity:0}23.0%,92%{transform:none;opacity:1}98%,100%{opacity:0}}
.cr-3 .b13{transform-origin:50% 50%;animation:cr30_cr3 3.48s cubic-bezier(.2,.8,.2,1) infinite;}
@keyframes cr30{0%,21.3%{transform:translateY(18px);opacity:0}24.0%,92%{transform:none;opacity:1}98%,100%{opacity:0}}
.cr-3 .b14{transform-origin:50% 50%;animation:cr31_cr3 3.48s cubic-bezier(.2,.8,.2,1) infinite;}
@keyframes cr31{0%,23.3%{transform:translateY(18px);opacity:0}26.0%,92%{transform:none;opacity:1}98%,100%{opacity:0}}
.cr-3 .b-nib{offset-path:path("M150 330 C190 250 240 360 290 300 S370 250 400 320");offset-rotate:0deg;offset-anchor:10px 8px;animation:crNib_cr3 3.48s cubic-bezier(.2,.8,.2,1) infinite}@keyframes crNib{0%,14.7%{offset-distance:0%;opacity:0}15.0%{opacity:1}19.3%{offset-distance:100%;opacity:1}21.3%,100%{offset-distance:100%;opacity:0}}
.cr-3 .b8{transform-origin:0% 100%}
.cr-4 .e-pan{transform-origin:50% 50%;animation:cr32_cr4 3.27s cubic-bezier(.2,.8,.2,1) infinite;}
@keyframes cr32{0%,16.7%{transform:translateY(18px);opacity:0}19.3%,92%{transform:none;opacity:1}98%,100%{opacity:0}}
.cr-4 .e-bar{transform-origin:0 50%;animation:cr33_cr4 3.27s cubic-bezier(.2,.8,.2,1) infinite;}
@keyframes cr33{0%,19.3%{transform:scaleX(0);opacity:1}22.0%,92%{transform:scaleX(1);opacity:1}98%,100%{opacity:0}}
.cr-4 .e-paid{transform-origin:50% 50%;animation:cr34_cr4 3.27s cubic-bezier(.2,.8,.2,1) infinite;}
@keyframes cr34{0%,24.0%{transform:scale(0);opacity:0}25.3%{transform:scale(1.14);opacity:1}26.7%,92%{transform:scale(1);opacity:1}98%,100%{opacity:0}}
.cr-4 .e-btn{transform-origin:50% 50%;animation:crBtn_cr4 3.27s ease-in-out infinite}@keyframes crBtn{0%,6.0%,8.7%,100%{transform:none}7.3%{transform:scale(.93)}}
.cr-4 .e-fly{animation:crFly_cr4 3.27s cubic-bezier(.5,0,.3,1) infinite}@keyframes crFly{0%,7.3%{transform:translate(155px,300px) scale(1);opacity:0}8.0%{opacity:1}12.7%{transform:translate(420px,92px) scale(.5) rotate(200deg);opacity:1}13.3%,100%{transform:translate(420px,92px) scale(.3);opacity:0}}
.cr-4 .e-badge{transform-origin:50% 50%;animation:crBadge_cr4 3.27s cubic-bezier(.2,.8,.2,1) infinite}@keyframes crBadge{0%,12.7%{transform:scale(0)}14.3%{transform:scale(1.3)}15.7%,92%{transform:scale(1)}98%,100%{transform:scale(0)}}
.cr-4 .e-prod{transform-origin:50% 100%;animation:crProd 3.5s ease-in-out infinite}@keyframes crProd{50%{transform:translateY(-6px) rotate(-4deg)}}
.cr-5 .m-pan{transform-origin:50% 50%;animation:cr35_cr5 3.2s cubic-bezier(.2,.8,.2,1) infinite;}
@keyframes cr35{0%,11.3%{transform:translateY(18px);opacity:0}14.0%,92%{transform:none;opacity:1}98%,100%{opacity:0}}
.cr-5 .m-b1{transform-origin:50% 100%;animation:cr36_cr5 3.2s cubic-bezier(.2,.8,.2,1) infinite;}
@keyframes cr36{0%,13.3%{transform:scaleY(0);opacity:1}16.0%,92%{transform:scaleY(1);opacity:1}98%,100%{opacity:0}}
.cr-5 .m-b2{transform-origin:50% 100%;animation:cr37_cr5 3.2s cubic-bezier(.2,.8,.2,1) infinite;}
@keyframes cr37{0%,14.3%{transform:scaleY(0);opacity:1}17.0%,92%{transform:scaleY(1);opacity:1}98%,100%{opacity:0}}
.cr-5 .m-b3{transform-origin:50% 100%;animation:cr38_cr5 3.2s cubic-bezier(.2,.8,.2,1) infinite;}
@keyframes cr38{0%,15.3%{transform:scaleY(0);opacity:1}18.0%,92%{transform:scaleY(1);opacity:1}98%,100%{opacity:0}}
.cr-5 .m-b4{transform-origin:50% 100%;animation:cr39_cr5 3.2s cubic-bezier(.2,.8,.2,1) infinite;}
@keyframes cr39{0%,16.3%{transform:scaleY(0);opacity:1}19.0%,92%{transform:scaleY(1);opacity:1}98%,100%{opacity:0}}
.cr-5 .m-b5{transform-origin:50% 100%;animation:cr40_cr5 3.2s cubic-bezier(.2,.8,.2,1) infinite;}
@keyframes cr40{0%,17.3%{transform:scaleY(0);opacity:1}20.0%,92%{transform:scaleY(1);opacity:1}98%,100%{opacity:0}}
.cr-5 .m-num{transform-origin:50% 50%;animation:cr41_cr5 3.2s cubic-bezier(.2,.8,.2,1) infinite;}
@keyframes cr41{0%,14.0%{opacity:0}16.7%,92%{opacity:1}98%,100%{opacity:0}}
.cr-5 .m-note{transform-origin:50% 50%;animation:cr42_cr5 3.2s cubic-bezier(.2,.8,.2,1) infinite;}
@keyframes cr42{0%,21.3%{transform:scale(0);opacity:0}22.7%{transform:scale(1.14);opacity:1}24.0%,92%{transform:scale(1);opacity:1}98%,100%{opacity:0}}
.cr-5 .m-b1{transform:scaleY(.35)}
.cr-5 .m-b1{scale:1 0.35;transform-origin:50% 100%}
.cr-5 .m-b2{scale:1 0.5;transform-origin:50% 100%}
.cr-5 .m-b3{scale:1 0.45;transform-origin:50% 100%}
.cr-5 .m-b4{scale:1 0.75;transform-origin:50% 100%}
.cr-5 .m-b5{scale:1 1;transform-origin:50% 100%}
.cr-5 .m-arrow{animation:crArrow_cr5 3.2s cubic-bezier(.6,0,.3,1) infinite}@keyframes crArrow{0%,2.7%{transform:translate(160px,-160px);opacity:0}3.3%{opacity:1}7.3%,92%{transform:none;opacity:1}98%,100%{opacity:0}}
.cr-5 .m-tg{transform-origin:50% 50%;animation:crTg_cr5 3.2s ease-out infinite}@keyframes crTg{0%,7.3%,11.3%,100%{transform:none}8.3%{transform:scale(1.06)}9.7%{transform:scale(.97)}}
.cr-5 .m-h{animation:crHeart 2.4s ease-out infinite;opacity:0}.cr-5 .h2{animation-delay:.8s}.cr-5 .h3{animation-delay:1.6s}@keyframes crHeart{0%{transform:translateY(0) scale(.6);opacity:0}20%{opacity:1}100%{transform:translateY(-120px) scale(1.2);opacity:0}}
.cr-5 .m-sun{animation:crSun2 3s ease-in-out infinite alternate}@keyframes crSun2{to{transform:translateY(16px)}}
.cr-5 .m-cta{transform-origin:50% 50%;animation:crBtn_cr5 3.2s ease-in-out infinite}
/* ================= r66: walk-away stage — SVG scenes ================= */
.wv-shot .ww-svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.ww-svg *{transform-box:fill-box}
.ww-svg text{font-family:var(--fb);font-weight:600}
.ww-svg .mono{font-family:var(--fm);font-weight:500;letter-spacing:.06em}
.ww-svg .disp{font-family:var(--fd);font-weight:600;letter-spacing:-.03em}
.ww-svg .ser{font-family:var(--fs);font-style:italic;font-weight:400}
.wv-shot:not(.on) .ww-svg *{animation:none!important}
.wv-shot .plate{display:none}
@media (prefers-reduced-motion:reduce){.ww-svg *{animation:none!important}}
.ww-1 .i1{transform-origin:50% 50%;animation:ww1_ww1 2.6s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes ww1{0%,0.2%{transform:translateY(22px);opacity:0}3.2%,93%{transform:none;opacity:1}99%,100%{opacity:0}}
.ww-1 .i2{transform-origin:50% 50%;animation:ww2_ww1 2.6s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes ww2{0%,0.8%{transform:translateY(22px);opacity:0}3.8%,93%{transform:none;opacity:1}99%,100%{opacity:0}}
.ww-1 .i3{transform-origin:50% 50%;animation:ww3_ww1 2.6s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes ww3{0%,1.8%{transform:scale(0);opacity:0}3.8%{transform:scale(1.12);opacity:1}4.8%,93%{transform:scale(1);opacity:1}99%,100%{opacity:0}}
.ww-1 .i4{transform-origin:50% 50%;animation:ww4_ww1 2.6s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes ww4{0%,2.4%{transform:scale(0);opacity:0}4.4%{transform:scale(1.12);opacity:1}5.4%,93%{transform:scale(1);opacity:1}99%,100%{opacity:0}}
.ww-1 .i5{transform-origin:50% 50%;animation:ww5_ww1 2.6s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes ww5{0%,2.9%{transform:scale(0);opacity:0}4.9%{transform:scale(1.12);opacity:1}5.9%,93%{transform:scale(1);opacity:1}99%,100%{opacity:0}}
.ww-1 .i6{transform-origin:50% 50%;animation:ww6_ww1 2.6s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes ww6{0%,3.3%{transform:translateX(30px);opacity:0}6.3%,93%{transform:none;opacity:1}99%,100%{opacity:0}}
.ww-1 .i7{transform-origin:0 50%;animation:ww7_ww1 2.6s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes ww7{0%,3.8%{transform:scaleX(0);opacity:1}6.8%,93%{transform:scaleX(1);opacity:1}99%,100%{opacity:0}}
.ww-1 .i8{transform-origin:0 50%;animation:ww8_ww1 2.6s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes ww8{0%,4.1%{transform:scaleX(0);opacity:1}7.1%,93%{transform:scaleX(1);opacity:1}99%,100%{opacity:0}}
.ww-1 .i9{transform-origin:50% 50%;animation:ww9_ww1 2.6s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes ww9{0%,4.6%{transform:scale(0);opacity:0}6.6%{transform:scale(1.12);opacity:1}7.6%,93%{transform:scale(1);opacity:1}99%,100%{opacity:0}}
.ww-1 .i10{transform-origin:50% 50%;animation:ww10_ww1 2.6s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes ww10{0%,4.9%{transform:scale(0);opacity:0}6.9%{transform:scale(1.12);opacity:1}7.9%,93%{transform:scale(1);opacity:1}99%,100%{opacity:0}}
.ww-1 .i11{transform-origin:50% 50%;animation:ww11_ww1 2.6s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes ww11{0%,5.2%{transform:scale(0);opacity:0}7.2%{transform:scale(1.12);opacity:1}8.2%,93%{transform:scale(1);opacity:1}99%,100%{opacity:0}}
.ww-1 .i12{transform-origin:50% 50%;animation:ww12_ww1 2.6s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes ww12{0%,5.5%{transform:scale(0);opacity:0}7.5%{transform:scale(1.12);opacity:1}8.5%,93%{transform:scale(1);opacity:1}99%,100%{opacity:0}}
.ww-1 .i13{transform-origin:50% 50%;animation:ww13_ww1 2.6s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes ww13{0%,6.0%{transform:translateY(-22px);opacity:0}9.0%,93%{transform:none;opacity:1}99%,100%{opacity:0}}
.ww-1 .i4{transform-origin:0 100%}
.ww-2 .qa1{transform-origin:0 50%;animation:ww14_ww2 3.1s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes ww14{0%,0.8%{transform:scaleX(0);opacity:1}3.8%,93%{transform:scaleX(1);opacity:1}99%,100%{opacity:0}}
.ww-2 .qb1{transform-origin:0 50%;animation:ww15_ww2 3.1s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes ww15{0%,2.9%{transform:scaleX(0);opacity:1}5.9%,93%{transform:scaleX(1);opacity:1}99%,100%{opacity:0}}
.ww-2 .qa2{transform-origin:0 50%;animation:ww16_ww2 3.1s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes ww16{0%,1.2%{transform:scaleX(0);opacity:1}4.2%,93%{transform:scaleX(1);opacity:1}99%,100%{opacity:0}}
.ww-2 .qb2{transform-origin:0 50%;animation:ww17_ww2 3.1s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes ww17{0%,3.2%{transform:scaleX(0);opacity:1}6.2%,93%{transform:scaleX(1);opacity:1}99%,100%{opacity:0}}
.ww-2 .qa3{transform-origin:0 50%;animation:ww18_ww2 3.1s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes ww18{0%,1.6%{transform:scaleX(0);opacity:1}4.6%,93%{transform:scaleX(1);opacity:1}99%,100%{opacity:0}}
.ww-2 .qb3{transform-origin:0 50%;animation:ww19_ww2 3.1s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes ww19{0%,3.5%{transform:scaleX(0);opacity:1}6.5%,93%{transform:scaleX(1);opacity:1}99%,100%{opacity:0}}
.ww-2 .qa4{transform-origin:50% 50%;animation:ww20_ww2 3.1s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes ww20{0%,2.0%{transform:translateY(22px);opacity:0}5.0%,93%{transform:none;opacity:1}99%,100%{opacity:0}}
.ww-2 .qb4{transform-origin:50% 50%;animation:ww21_ww2 3.1s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes ww21{0%,3.8%{transform:translateY(22px);opacity:0}6.8%,93%{transform:none;opacity:1}99%,100%{opacity:0}}
.ww-2 .d0{transform-origin:50% 50%;animation:ww22_ww2 3.1s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes ww22{0%,0.0%{transform:translateY(22px);opacity:0}3.0%,93%{transform:none;opacity:1}99%,100%{opacity:0}}
.ww-2 .d1{transform-origin:50% 50%;animation:ww23_ww2 3.1s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes ww23{0%,2.2%{transform:translateX(30px);opacity:0}5.2%,93%{transform:none;opacity:1}99%,100%{opacity:0}}
.ww-2 .d2{transform-origin:50% 50%;animation:ww24_ww2 3.1s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes ww24{0%,5.0%{transform:scale(0);opacity:0}7.0%{transform:scale(1.12);opacity:1}8.0%,93%{transform:scale(1);opacity:1}99%,100%{opacity:0}}
.ww-2 .d0{clip-path:inset(0 round 16px)}.ww-2 .d-scroll{animation:wwScroll_ww2 3.1s cubic-bezier(.6,0,.2,1) infinite}@keyframes wwScroll{0%,10%{transform:none}17%,90%{transform:translateY(-90px)}97%,100%{transform:none}}
.ww-3 .k1{transform-origin:50% 50%;animation:ww25_ww3 2.6s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes ww25{0%,0.4%{transform:translateY(22px);opacity:0}3.4%,93%{transform:none;opacity:1}99%,100%{opacity:0}}
.ww-3 .k2{transform-origin:50% 50%;animation:ww26_ww3 2.6s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes ww26{0%,0.8%{transform:translateY(22px);opacity:0}3.8%,93%{transform:none;opacity:1}99%,100%{opacity:0}}
.ww-3 .k3{transform-origin:50% 50%;animation:ww27_ww3 2.6s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes ww27{0%,1.2%{transform:translateY(22px);opacity:0}4.2%,93%{transform:none;opacity:1}99%,100%{opacity:0}}
.ww-3 .k4{transform-origin:50% 50%;animation:ww28_ww3 2.6s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes ww28{0%,1.6%{transform:translateY(22px);opacity:0}4.6%,93%{transform:none;opacity:1}99%,100%{opacity:0}}
.ww-3 .k5{transform-origin:50% 50%;animation:ww29_ww3 2.6s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes ww29{0%,2.0%{transform:translateY(22px);opacity:0}5.0%,93%{transform:none;opacity:1}99%,100%{opacity:0}}
.ww-3 .k-ok{transform-origin:50% 50%;animation:ww30_ww3 2.6s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes ww30{0%,7.2%{transform:scale(0);opacity:0}9.2%{transform:scale(1.12);opacity:1}10.2%,93%{transform:scale(1);opacity:1}99%,100%{opacity:0}}
.ww-3 .k-mv{animation:wwKan_ww3 2.6s cubic-bezier(.6,0,.2,1) infinite}@keyframes wwKan{0%,1%{transform:translate(0,30px);opacity:0}4%,5%{transform:none;opacity:1}7%{transform:translate(172px,-74px) rotate(-3deg)}10%,93%{transform:translate(344px,0);opacity:1}100%{transform:translate(344px,0);opacity:0}}
.ww-4 .o1{transform-origin:50% 50%;animation:ww31_ww4 2.6s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes ww31{0%,0.2%{transform:scale(0);opacity:0}2.2%{transform:scale(1.12);opacity:1}3.2%,93%{transform:scale(1);opacity:1}99%,100%{opacity:0}}
.ww-4 .o2{transform-origin:50% 50%;animation:ww32_ww4 2.6s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes ww32{0%,0.6%{transform:scale(0);opacity:0}2.6%{transform:scale(1.12);opacity:1}3.6%,93%{transform:scale(1);opacity:1}99%,100%{opacity:0}}
.ww-4 .o3{transform-origin:50% 50%;animation:ww33_ww4 2.6s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes ww33{0%,1.0%{transform:scale(0);opacity:0}3.0%{transform:scale(1.12);opacity:1}4.0%,93%{transform:scale(1);opacity:1}99%,100%{opacity:0}}
.ww-4 .o4{transform-origin:50% 50%;animation:ww34_ww4 2.6s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes ww34{0%,1.4%{transform:scale(0);opacity:0}3.4%{transform:scale(1.12);opacity:1}4.4%,93%{transform:scale(1);opacity:1}99%,100%{opacity:0}}
.ww-4 .o5{transform-origin:50% 50%;animation:ww35_ww4 2.6s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes ww35{0%,2.4%{transform:scale(0);opacity:0}4.4%{transform:scale(1.12);opacity:1}5.4%,93%{transform:scale(1);opacity:1}99%,100%{opacity:0}}
.ww-4 .o6{transform-origin:50% 50%;animation:ww36_ww4 2.6s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes ww36{0%,3.0%{transform:translateX(30px);opacity:0}6.0%,93%{transform:none;opacity:1}99%,100%{opacity:0}}
.ww-4 .o7{transform-origin:50% 50%;animation:ww37_ww4 2.6s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes ww37{0%,4.0%{transform:scale(0);opacity:0}6.0%{transform:scale(1.12);opacity:1}7.0%,93%{transform:scale(1);opacity:1}99%,100%{opacity:0}}
.ww-4 .o8{transform-origin:50% 50%;animation:ww38_ww4 2.6s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes ww38{0%,5.0%{transform:translateX(30px);opacity:0}8.0%,93%{transform:none;opacity:1}99%,100%{opacity:0}}
.ww-4 .o9{transform-origin:50% 50%;animation:ww39_ww4 2.6s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes ww39{0%,6.2%{transform:translateX(30px);opacity:0}9.2%,93%{transform:none;opacity:1}99%,100%{opacity:0}}
.ww-5 .a1{transform-origin:50% 50%;animation:ww40_ww5 2.6s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes ww40{0%,0.2%{transform:translateY(22px);opacity:0}3.2%,93%{transform:none;opacity:1}99%,100%{opacity:0}}
.ww-5 .a2{transform-origin:50% 50%;animation:ww41_ww5 2.6s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes ww41{0%,0.9%{transform:translateY(22px);opacity:0}3.9%,93%{transform:none;opacity:1}99%,100%{opacity:0}}
.ww-5 .a3{transform-origin:50% 50%;animation:ww42_ww5 2.6s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes ww42{0%,1.6%{transform:translateY(22px);opacity:0}4.6%,93%{transform:none;opacity:1}99%,100%{opacity:0}}
.ww-5 .a4{transform-origin:50% 50%;animation:ww43_ww5 2.6s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes ww43{0%,3.6%{transform:translateY(22px);opacity:0}6.6%,93%{transform:none;opacity:1}99%,100%{opacity:0}}
.ww-5 .a5{transform-origin:50% 50%;animation:ww44_ww5 2.6s cubic-bezier(.2,.8,.2,1) infinite;stroke-dasharray:1}
@keyframes ww44{0%,4.2%{stroke-dashoffset:1;opacity:1}9.2%,93%{stroke-dashoffset:0;opacity:1}99%,100%{stroke-dashoffset:1}}
.ww-5 .a-h{animation:wwHeart 2.6s ease-out infinite;opacity:0}.ww-5 .a-h2{animation-delay:.9s}.ww-5 .a-h3{animation-delay:1.7s}@keyframes wwHeart{0%{transform:translateY(20px) scale(.6);opacity:0}25%{opacity:1}100%{transform:translateY(-70px) scale(1.2);opacity:0}}
.ww-6 .n0{transform-origin:50% 50%;animation:ww45_ww6 2.6s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes ww45{0%,0.4%{transform:scale(0);opacity:0}2.4%{transform:scale(1.12);opacity:1}3.4%,93%{transform:scale(1);opacity:1}99%,100%{opacity:0}}
.ww-6 .n1{transform-origin:50% 50%;animation:ww46_ww6 2.6s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes ww46{0%,0.8%{transform:scale(0);opacity:0}2.8%{transform:scale(1.12);opacity:1}3.8%,93%{transform:scale(1);opacity:1}99%,100%{opacity:0}}
.ww-6 .n2{transform-origin:50% 50%;animation:ww47_ww6 2.6s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes ww47{0%,1.2%{transform:scale(0);opacity:0}3.2%{transform:scale(1.12);opacity:1}4.2%,93%{transform:scale(1);opacity:1}99%,100%{opacity:0}}
.ww-6 .n3{transform-origin:50% 50%;animation:ww48_ww6 2.6s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes ww48{0%,1.6%{transform:scale(0);opacity:0}3.6%{transform:scale(1.12);opacity:1}4.6%,93%{transform:scale(1);opacity:1}99%,100%{opacity:0}}
.ww-6 .t1{transform-origin:50% 50%;animation:ww49_ww6 2.6s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes ww49{0%,3.4%{transform:translateY(-22px);opacity:0}6.4%,93%{transform:none;opacity:1}99%,100%{opacity:0}}
.ww-6 .t2{transform-origin:50% 50%;animation:ww50_ww6 2.6s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes ww50{0%,5.2%{transform:translateY(22px);opacity:0}8.2%,93%{transform:none;opacity:1}99%,100%{opacity:0}}
.ww-6 .ai-ring{transform-origin:50% 50%;animation:wwSpin 12s linear infinite}@keyframes wwSpin{to{transform:rotate(360deg)}}.ww-6 .ai-glow{transform-origin:50% 50%;animation:wwGlow 2.4s ease-in-out infinite}@keyframes wwGlow{50%{transform:scale(1.18);opacity:.1}}
.ww-7 .x1{transform-origin:50% 50%;animation:ww51_ww7 2.6s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes ww51{0%,0.2%{transform:translateY(22px);opacity:0}3.2%,93%{transform:none;opacity:1}99%,100%{opacity:0}}
.ww-7 .x2{transform-origin:50% 50%;animation:ww52_ww7 2.6s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes ww52{0%,0.6%{transform:translateY(22px);opacity:0}3.6%,93%{transform:none;opacity:1}99%,100%{opacity:0}}
.ww-7 .x3{transform-origin:50% 50%;animation:ww53_ww7 2.6s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes ww53{0%,1.0%{transform:translateY(22px);opacity:0}4.0%,93%{transform:none;opacity:1}99%,100%{opacity:0}}
.ww-7 .x6{transform-origin:50% 50%;animation:ww54_ww7 2.6s cubic-bezier(.2,.8,.2,1) infinite;stroke-dasharray:1}
@keyframes ww54{0%,4.4%{stroke-dashoffset:1;opacity:1}9.4%,93%{stroke-dashoffset:0;opacity:1}99%,100%{stroke-dashoffset:1}}
.ww-7 .v0{transform-origin:50% 100%;animation:ww55_ww7 2.6s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes ww55{0%,2.0%{transform:scaleY(0);opacity:1}5.0%,93%{transform:scaleY(1);opacity:1}99%,100%{opacity:0}}
.ww-7 .v1{transform-origin:50% 100%;animation:ww56_ww7 2.6s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes ww56{0%,2.3%{transform:scaleY(0);opacity:1}5.3%,93%{transform:scaleY(1);opacity:1}99%,100%{opacity:0}}
.ww-7 .v2{transform-origin:50% 100%;animation:ww57_ww7 2.6s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes ww57{0%,2.6%{transform:scaleY(0);opacity:1}5.6%,93%{transform:scaleY(1);opacity:1}99%,100%{opacity:0}}
.ww-7 .v3{transform-origin:50% 100%;animation:ww58_ww7 2.6s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes ww58{0%,2.9%{transform:scaleY(0);opacity:1}5.9%,93%{transform:scaleY(1);opacity:1}99%,100%{opacity:0}}
.ww-7 .v4{transform-origin:50% 100%;animation:ww59_ww7 2.6s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes ww59{0%,3.2%{transform:scaleY(0);opacity:1}6.2%,93%{transform:scaleY(1);opacity:1}99%,100%{opacity:0}}
.ww-7 .v5{transform-origin:50% 100%;animation:ww60_ww7 2.6s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes ww60{0%,3.5%{transform:scaleY(0);opacity:1}6.5%,93%{transform:scaleY(1);opacity:1}99%,100%{opacity:0}}
.ww-7 .x4,.ww-7 .x5{transform-box:view-box}.ww-7 .x4{stroke-dasharray:100;animation:wwDon_ww7 2.6s cubic-bezier(.2,.8,.2,1) infinite}@keyframes wwDon{0%,1%{stroke-dashoffset:100}8%,93%{stroke-dashoffset:36}100%{stroke-dashoffset:100}}
.ww-7 .x5{stroke-dasharray:100;animation:wwDon2_ww7 2.6s cubic-bezier(.2,.8,.2,1) infinite}@keyframes wwDon2{0%,4%{stroke-dashoffset:100}10%,93%{stroke-dashoffset:78}100%{stroke-dashoffset:100}}
.ww-8 .p-post{transform-origin:50% 50%;animation:ww61_ww8 2.6s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes ww61{0%,4.4%{transform:translateY(-22px);opacity:0}7.4%,93%{transform:none;opacity:1}99%,100%{opacity:0}}
.ww-8 .p-st1{transform-origin:50% 50%;animation:ww62_ww8 2.6s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes ww62{0%,5.8%{transform:scale(0);opacity:0}7.8%{transform:scale(1.12);opacity:1}8.8%,93%{transform:scale(1);opacity:1}99%,100%{opacity:0}}
.ww-8 .p-st2{transform-origin:50% 50%;animation:ww63_ww8 2.6s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes ww63{0%,6.4%{transform:scale(0);opacity:0}8.4%{transform:scale(1.12);opacity:1}9.4%,93%{transform:scale(1);opacity:1}99%,100%{opacity:0}}
.ww-8 .p-lid{transform-origin:0% 100%;animation:wwLid_ww8 2.6s cubic-bezier(.6,0,.2,1) infinite}@keyframes wwLid{0%,1%{transform:none}5%,90%{transform:translate(-30px,-60px) rotate(-24deg)}98%,100%{transform:none}}
.ww-8 .p-prod{animation:wwRise_ww8 2.6s cubic-bezier(.2,.8,.2,1) infinite}@keyframes wwRise{0%,2%{transform:translateY(110px)}8%,90%{transform:none}98%,100%{transform:translateY(110px)}}
/* r67: even spacing above and below "Why choose us" */
section.i-a{padding-bottom:116px!important}
@media (max-width:760px){section.i-a{padding-bottom:48px!important}}
/* r68: tagline reveals faster */
.ta-p .w,.ta-p .pill{transition:opacity .45s var(--ez),transform .55s var(--ez),filter .45s var(--ez),color .7s var(--ez)!important;transition-delay:calc(var(--i,0) * 22ms)!important}
/* r69: pagespeed badge — solid dark card, ring rotates around its own centre */
.cr-1 .w-score{transform-box:view-box}
.cr-1 .w10{filter:drop-shadow(0 18px 30px rgba(0,0,0,.45))}
/* ================= r70: How we work — SVG step animations ================= */
.pa-art .sh{display:none!important}
.pa-svg{position:absolute;right:0;top:0;width:66%;height:100%;overflow:visible;pointer-events:none}
.pa-svg *{transform-box:fill-box}
.pa-svg text{font-family:var(--fm);font-weight:500;letter-spacing:.06em}
@media (prefers-reduced-motion:reduce){.pa-svg *{animation:none!important}}
.ps-1 .lens{animation:psLens 6s cubic-bezier(.6,0,.3,1) infinite}@keyframes psLens{0%{transform:translate(60px,50px)}25%{transform:translate(180px,50px)}50%{transform:translate(100px,130px)}75%{transform:translate(180px,130px)}100%{transform:translate(60px,50px)}}
.ps-1 .d0{animation:psHit0 6s ease-out infinite;transform-origin:50% 50%}@keyframes psHit0{0%,2%{fill:#A3ADFF;opacity:.55;transform:scale(1)}5%{fill:#FFCF3F;opacity:1;transform:scale(1.6)}10%,94%{fill:#FFCF3F;opacity:1;transform:scale(1.2)}100%{fill:#A3ADFF;opacity:.55;transform:scale(1)}}
.ps-1 .d3{animation:psHit3 6s ease-out infinite;transform-origin:50% 50%}@keyframes psHit3{0%,23%{fill:#A3ADFF;opacity:.55;transform:scale(1)}26%{fill:#FFCF3F;opacity:1;transform:scale(1.6)}31%,94%{fill:#FFCF3F;opacity:1;transform:scale(1.2)}100%{fill:#A3ADFF;opacity:.55;transform:scale(1)}}
.ps-1 .d9{animation:psHit9 6s ease-out infinite;transform-origin:50% 50%}@keyframes psHit9{0%,48%{fill:#A3ADFF;opacity:.55;transform:scale(1)}51%{fill:#FFCF3F;opacity:1;transform:scale(1.6)}56%,94%{fill:#FFCF3F;opacity:1;transform:scale(1.2)}100%{fill:#A3ADFF;opacity:.55;transform:scale(1)}}
.ps-1 .d11{animation:psHit11 6s ease-out infinite;transform-origin:50% 50%}@keyframes psHit11{0%,72%{fill:#A3ADFF;opacity:.55;transform:scale(1)}75%{fill:#FFCF3F;opacity:1;transform:scale(1.6)}80%,94%{fill:#FFCF3F;opacity:1;transform:scale(1.2)}100%{fill:#A3ADFF;opacity:.55;transform:scale(1)}}
.ps-1 .d6{animation:psHit6 6s ease-out infinite;transform-origin:50% 50%}@keyframes psHit6{0%,60%{fill:#A3ADFF;opacity:.55;transform:scale(1)}63%{fill:#FFCF3F;opacity:1;transform:scale(1.6)}68%,94%{fill:#FFCF3F;opacity:1;transform:scale(1.2)}100%{fill:#A3ADFF;opacity:.55;transform:scale(1)}}
.ps-2 .m1{transform-origin:50% 50%;animation:pa1_ps2 4.52s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes pa1{0%,2%{transform:scale(0);opacity:0}6%{transform:scale(1.15);opacity:1}10%,90%{transform:scale(1);opacity:1}97%,100%{opacity:0}}
.ps-2 .rd{transform-origin:50% 50%;animation:pa2_ps2 4.52s cubic-bezier(.2,.8,.2,1) infinite;stroke-dasharray:1}
@keyframes pa2{0%,6%{stroke-dashoffset:1;opacity:1}22%,90%{stroke-dashoffset:0;opacity:1}97%,100%{stroke-dashoffset:1;opacity:1}}
.ps-2 .m2{transform-origin:50% 50%;animation:pa3_ps2 4.52s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes pa3{0%,16%{transform:scale(0);opacity:0}20%{transform:scale(1.15);opacity:1}24%,90%{transform:scale(1);opacity:1}97%,100%{opacity:0}}
.ps-2 .m3{transform-origin:50% 50%;animation:pa4_ps2 4.52s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes pa4{0%,24%{transform:scale(0);opacity:0}28%{transform:scale(1.15);opacity:1}32%,90%{transform:scale(1);opacity:1}97%,100%{opacity:0}}
.ps-2 .fl{transform-origin:50% 50%;animation:pa5_ps2 4.52s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes pa5{0%,32%{transform:scale(0);opacity:0}36%{transform:scale(1.15);opacity:1}40%,90%{transform:scale(1);opacity:1}97%,100%{opacity:0}}
.ps-2 .ok{transform-origin:50% 50%;animation:pa6_ps2 4.52s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes pa6{0%,44%{transform:translateY(14px);opacity:0}52%,90%{transform:none;opacity:1}97%,100%{opacity:0}}
.ps-2 .fl{transform-origin:0% 100%}
.ps-3 .cv{transform-origin:50% 50%;animation:pa7_ps3 5.6s cubic-bezier(.2,.8,.2,1) infinite;stroke-dasharray:1}
@keyframes pa7{0%,4%{stroke-dashoffset:1;opacity:1}20%,90%{stroke-dashoffset:0;opacity:1}97%,100%{stroke-dashoffset:1;opacity:1}}
.ps-3 .hd{transform-origin:50% 50%;animation:pa8_ps3 5.6s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes pa8{0%,18%{transform:scale(0);opacity:0}22%{transform:scale(1.15);opacity:1}26%,90%{transform:scale(1);opacity:1}97%,100%{opacity:0}}
.ps-3 .hd2{transform-origin:50% 50%;animation:pa9_ps3 5.6s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes pa9{0%,24%{transform:scale(0);opacity:0}28%{transform:scale(1.15);opacity:1}32%,90%{transform:scale(1);opacity:1}97%,100%{opacity:0}}
.ps-3 .sw1{transform-origin:50% 50%;animation:pa10_ps3 5.6s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes pa10{0%,36%{transform:scale(0);opacity:0}40%{transform:scale(1.15);opacity:1}44%,90%{transform:scale(1);opacity:1}97%,100%{opacity:0}}
.ps-3 .sw2{transform-origin:50% 50%;animation:pa11_ps3 5.6s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes pa11{0%,40%{transform:scale(0);opacity:0}44%{transform:scale(1.15);opacity:1}48%,90%{transform:scale(1);opacity:1}97%,100%{opacity:0}}
.ps-3 .sw3{transform-origin:50% 50%;animation:pa12_ps3 5.6s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes pa12{0%,44%{transform:scale(0);opacity:0}48%{transform:scale(1.15);opacity:1}52%,90%{transform:scale(1);opacity:1}97%,100%{opacity:0}}
.ps-3 .shp{transform-origin:50% 50%;animation:psSpin_ps3 5.6s cubic-bezier(.6,0,.3,1) infinite}@keyframes psSpin{0%,20%{transform:rotate(0)}45%,70%{transform:rotate(90deg)}95%,100%{transform:rotate(180deg)}}
.ps-4 .cl0{transform-origin:0 50%;animation:pa13_ps4 5.24s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes pa13{0%,3%{transform:scaleX(0);opacity:1}11%,90%{transform:scaleX(1);opacity:1}97%,100%{opacity:0}}
.ps-4 .cl1{transform-origin:0 50%;animation:pa14_ps4 5.24s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes pa14{0%,10%{transform:scaleX(0);opacity:1}18%,90%{transform:scaleX(1);opacity:1}97%,100%{opacity:0}}
.ps-4 .cl2{transform-origin:0 50%;animation:pa15_ps4 5.24s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes pa15{0%,17%{transform:scaleX(0);opacity:1}25%,90%{transform:scaleX(1);opacity:1}97%,100%{opacity:0}}
.ps-4 .cl3{transform-origin:0 50%;animation:pa16_ps4 5.24s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes pa16{0%,24%{transform:scaleX(0);opacity:1}32%,90%{transform:scaleX(1);opacity:1}97%,100%{opacity:0}}
.ps-4 .cl4{transform-origin:0 50%;animation:pa17_ps4 5.24s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes pa17{0%,31%{transform:scaleX(0);opacity:1}39%,90%{transform:scaleX(1);opacity:1}97%,100%{opacity:0}}
.ps-4 .cl5{transform-origin:0 50%;animation:pa18_ps4 5.24s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes pa18{0%,38%{transform:scaleX(0);opacity:1}46%,90%{transform:scaleX(1);opacity:1}97%,100%{opacity:0}}
.ps-4 .dep{transform-origin:50% 50%;animation:pa19_ps4 5.24s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes pa19{0%,56%{transform:scale(0);opacity:0}60%{transform:scale(1.15);opacity:1}64%,90%{transform:scale(1);opacity:1}97%,100%{opacity:0}}
.ps-4 .gear{transform-origin:50% 50%;animation:psGear 4s linear infinite}@keyframes psGear{to{transform:rotate(360deg)}}.ps-4 .car{animation:psCar .8s steps(1) infinite}@keyframes psCar{50%{opacity:0}}
.ps-5 .gb0{transform-origin:50% 100%;animation:pa20_ps5 5.36s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes pa20{0%,30%{transform:scaleY(0);opacity:1}38%,90%{transform:scaleY(1);opacity:1}97%,100%{opacity:0}}
.ps-5 .gb1{transform-origin:50% 100%;animation:pa21_ps5 5.36s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes pa21{0%,34%{transform:scaleY(0);opacity:1}42%,90%{transform:scaleY(1);opacity:1}97%,100%{opacity:0}}
.ps-5 .gb2{transform-origin:50% 100%;animation:pa22_ps5 5.36s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes pa22{0%,38%{transform:scaleY(0);opacity:1}46%,90%{transform:scaleY(1);opacity:1}97%,100%{opacity:0}}
.ps-5 .gb3{transform-origin:50% 100%;animation:pa23_ps5 5.36s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes pa23{0%,42%{transform:scaleY(0);opacity:1}50%,90%{transform:scaleY(1);opacity:1}97%,100%{opacity:0}}
.ps-5 .gb4{transform-origin:50% 100%;animation:pa24_ps5 5.36s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes pa24{0%,46%{transform:scaleY(0);opacity:1}54%,90%{transform:scaleY(1);opacity:1}97%,100%{opacity:0}}
.ps-5 .gl{transform-origin:50% 50%;animation:pa25_ps5 5.36s cubic-bezier(.2,.8,.2,1) infinite;stroke-dasharray:1}
@keyframes pa25{0%,44%{stroke-dashoffset:1;opacity:1}60%,90%{stroke-dashoffset:0;opacity:1}97%,100%{stroke-dashoffset:1;opacity:1}}
.ps-5 .ga{transform-origin:50% 50%;animation:pa26_ps5 5.36s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes pa26{0%,58%{transform:scale(0);opacity:0}62%{transform:scale(1.15);opacity:1}66%,90%{transform:scale(1);opacity:1}97%,100%{opacity:0}}
.ps-5 .lv{transform-origin:50% 50%;animation:pa27_ps5 5.36s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes pa27{0%,6%{transform:scale(0);opacity:0}10%{transform:scale(1.15);opacity:1}14%,90%{transform:scale(1);opacity:1}97%,100%{opacity:0}}
.ps-5 .rk{animation:psRk 5.36s cubic-bezier(.5,0,.3,1) infinite}@keyframes psRk{0%{transform:translate(200px,190px);opacity:0}6%{opacity:1}28%{transform:translate(200px,40px);opacity:1}36%,100%{transform:translate(200px,-40px);opacity:0}}.ps-5 .fla{transform-origin:50% 0;animation:psFl .2s linear infinite alternate}@keyframes psFl{to{transform:scaleY(1.6)}}
.pa-svg{width:60%;height:84%;right:3%;top:4%}
/* r71: industries rows without the hover line */
.ia-row{grid-template-columns:72px minmax(0,1fr) 40px}
@media (max-width:860px){.ia-row{grid-template-columns:44px minmax(0,1fr) 28px}}
/* r72: one "Let's talk" — headline sits above the calendar, footer starts with its columns */
.b-b .bb-head{position:relative;z-index:2;margin-bottom:clamp(28px,5vh,56px)}
.f-a .ft-cols{margin-top:0}
.f-a{padding-top:clamp(56px,8vh,96px);box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
/* ================= r73: review fixes ================= */
/* why cards without labels */
.y-d3 .yc3 .vis{margin-top:0}
/* walk-away stage stays landscape on tablets / small laptops */
@media (min-width:761px) and (max-width:1180px){
  .wv-stage{height:auto;min-height:0;align-self:center}
  .wv-shots{flex:none;aspect-ratio:4/3}
  .dk.wv .pin-in{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)}
}
/* work grid: clean two columns on tablets */
@media (min-width:761px) and (max-width:1100px){
  .wx-grid{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:20px;row-gap:56px}
  .w-a .wx-item{grid-column:auto!important;margin-top:0!important}
  .w-a .wx-item:nth-child(even){margin-top:90px!important}
}
/* phones: no tilt on craft cards so neighbours never overlap */
@media (max-width:760px){.s-h .sc-p{transform:none!important}}
/* touch: industry preview lives in the row */
.ia-thumb{display:none}
.ia-touch .ia-row{grid-template-columns:44px minmax(0,1fr) 72px}
.ia-touch .ia-arr{display:none}
.ia-touch .ia-thumb{display:block;position:relative;width:64px;height:80px;border-radius:10px;overflow:hidden;justify-self:end}
.ia-touch .ia-thumb .ia-art{position:absolute;inset:0;opacity:1;transform:none}
.ia-touch .ia-thumb .pn{display:none}
/* ================= r74: "What you walk away with" — centred title + one keyword box ================= */
.dk.wv2 .pin-in{display:flex;flex-direction:column;align-items:center;gap:clamp(20px,3.6vh,40px);padding:clamp(76px,11vh,120px) var(--g) clamp(28px,5vh,56px)}
.wv2-h{text-align:center;max-width:1100px}
.wv2-box{position:relative;flex:1;width:min(1320px,100%);min-height:0;border-radius:28px;background:#141418;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 40px 90px -40px rgba(0,0,0,.8);overflow:hidden}
.wv2-slides{position:absolute;inset:0}
.wv2-slide{position:absolute;inset:0;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(20px,3vw,48px);padding:clamp(20px,2.4vw,32px);pointer-events:none}
.wv2-txt{display:flex;flex-direction:column;justify-content:center;gap:18px;padding:0 0 56px clamp(8px,1.5vw,24px);min-width:0}
.wv2-tag{display:inline-flex;align-items:center;gap:10px;align-self:flex-start;padding:6px 14px 6px 6px;border-radius:999px;background:rgba(255,255,255,.06);font-family:var(--fm);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:rgba(238,237,232,.7);opacity:0;transform:translateY(12px);transition:opacity .25s,transform .45s var(--ez)}
.wv2-tag b{font-weight:500;background:var(--blue);color:#fff;padding:4px 9px;border-radius:999px}
.wv2-k{font-family:var(--fd);font-weight:600;font-size:clamp(44px,min(6.4vw,10vh),120px);line-height:.95;letter-spacing:-.05em;color:var(--paper);opacity:0;transform:translateY(40px);transition:opacity .25s,transform .5s var(--ez)}
.wv2-art{position:relative;border-radius:20px;overflow:hidden;clip-path:inset(100% 0 0 0 round 20px);transition:clip-path .45s var(--ez)}
.wv2-art .ww-svg{position:absolute;inset:0;width:100%;height:100%}
.wv2-art .ww-svg{transform:scale(1.08);transition:transform .8s var(--ez)}
.wv2-slide.on .wv2-tag{opacity:1;transform:none;transition-delay:.05s}
.wv2-slide.on .wv2-k{opacity:1;transform:none;transition-delay:.08s}
.wv2-slide.on .wv2-art{clip-path:inset(0 0 0 0 round 20px)}
.wv2-slide.on .wv2-art .ww-svg{transform:none}
.wv2-slide:not(.on) .ww-svg *{animation:none!important}
.wv2-meta{position:absolute;left:clamp(28px,3.4vw,56px);bottom:clamp(22px,3vh,34px);display:flex;align-items:center;gap:20px;font-family:var(--fm);font-size:11px;letter-spacing:.1em;color:rgba(238,237,232,.45);z-index:3}
.wv2-meta .wv-count b{color:var(--paper);font-weight:500}
/* tablets: a little more room for the keyword */
@media (max-width:1100px){.wv2-slide{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.wv2-k{font-size:clamp(36px,5.6vw,72px)}}
/* phones: simple list, no images */
@media (max-width:760px){
  html.av-live .dk.wv2{height:auto!important;margin-top:0}
  html.av-live .dk.wv2 .pin-in{position:relative;height:auto!important;border-radius:0}
  .dk.wv2 .pin-in{padding:72px var(--g) 56px;align-items:stretch}
  .wv2-h{text-align:left}
  .wv2-box{flex:none;background:none;box-shadow:none;border-radius:0;overflow:visible}
  .wv2-slides{position:relative}
  .wv2-slide{position:relative;display:block;padding:14px 0;border-top:1px solid rgba(255,255,255,.08)}
  .wv2-txt{padding:0;gap:8px}
  .wv2-tag{display:none}
  .wv2-k{opacity:1;transform:none;font-size:26px;letter-spacing:-.03em}
  .wv2-art,.wv2-meta{display:none}
}
.wv2-art::after{content:"";position:absolute;inset:0;border-radius:20px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);pointer-events:none}
/* r75: hero video frame sits under the measured headline block on every screen */
.h-h .hx-frame{top:calc((var(--hh,62vh) + 32px) * (1 - var(--ee)))!important}
@media (max-width:600px){
  .h-h .hx-frame{top:calc((var(--hh,62vh) + 24px) * (1 - var(--ee)) + (50% - 28.125vw) * var(--ee))!important}
}

/* r76: continuous loops — every scene builds, holds ~1.4s, then replays */
@keyframes cr1_cr1{0%,1.54%{transform:scaleX(0);opacity:1}7.28%,92%{transform:scaleX(1);opacity:1}98%,100%{opacity:0}}
@keyframes cr2_cr1{0%,4.41%{transform:scaleX(0);opacity:1}10.37%,92%{transform:scaleX(1);opacity:1}98%,100%{opacity:0}}
@keyframes cr3_cr1{0%,7.28%{transform:scaleX(0);opacity:1}13.24%,92%{transform:scaleX(1);opacity:1}98%,100%{opacity:0}}
@keyframes cr4_cr1{0%,8.82%{transform:scaleX(0);opacity:1}14.78%,92%{transform:scaleX(1);opacity:1}98%,100%{opacity:0}}
@keyframes cr5_cr1{0%,11.69%{transform:scale(0);opacity:0}14.78%{transform:scale(1.14);opacity:1}17.65%,92%{transform:scale(1);opacity:1}98%,100%{opacity:0}}
@keyframes cr6_cr1{0%,5.96%{transform:translateY(18px);opacity:0}11.69%,92%{transform:none;opacity:1}98%,100%{opacity:0}}
@keyframes cr7_cr1{0%,14.78%{transform:translateY(18px);opacity:0}20.51%,92%{transform:none;opacity:1}98%,100%{opacity:0}}
@keyframes cr8_cr1{0%,16.99%{transform:translateY(18px);opacity:0}22.72%,92%{transform:none;opacity:1}98%,100%{opacity:0}}
@keyframes cr9_cr1{0%,19.19%{transform:translateY(18px);opacity:0}24.93%,92%{transform:none;opacity:1}98%,100%{opacity:0}}
@keyframes cr10_cr1{0%,45.66%{transform:scale(0);opacity:0}48.53%{transform:scale(1.14);opacity:1}51.4%,92%{transform:scale(1);opacity:1}98%,100%{opacity:0}}
@keyframes crSun_cr1{0%,7.28%{transform:translateY(30px)}29.34%,100%{transform:none}}
@keyframes crCur_cr1{0%,23.6%{transform:translate(420px,330px);opacity:0}26.47%{opacity:1}36.84%{transform:translate(132px,230px)}39.04%{transform:translate(132px,230px) scale(.8)}41.25%{transform:translate(132px,230px) scale(1)}58.9%{transform:translate(380px,300px);opacity:1}90%,100%{transform:translate(380px,300px);opacity:0}}
@keyframes crRip_cr1{0%,39.04%{transform:scale(.4);opacity:0}39.71%{opacity:1}48.53%,100%{transform:scale(1.5);opacity:0}}
@keyframes crScore_cr1{0%,46.99%{stroke-dashoffset:100}58.9%,92%{stroke-dashoffset:2}100%{stroke-dashoffset:100}}
@keyframes cr11_cr2{0%,3.59%{transform:translateY(18px);opacity:0}11.03%,92%{transform:none;opacity:1}98%,100%{opacity:0}}
@keyframes cr12_cr2{0%,7.45%{transform:translateY(18px);opacity:0}14.62%,92%{transform:none;opacity:1}98%,100%{opacity:0}}
@keyframes cr13_cr2{0%,11.03%{transform:translateY(18px);opacity:0}18.48%,92%{transform:none;opacity:1}98%,100%{opacity:0}}
@keyframes cr14_cr2{0%,31.17%{opacity:0}38.62%,92%{opacity:1}98%,100%{opacity:0}}
@keyframes cr15_cr2{0%,18.48%{stroke-dashoffset:1}31.17%,92%{stroke-dashoffset:0}98%,100%{stroke-dashoffset:1}}
@keyframes cr16_cr2{0%,33.1%{transform:scale(0);opacity:0}36.69%{transform:scale(1.14);opacity:1}40.55%,92%{transform:scale(1);opacity:1}98%,100%{opacity:0}}
@keyframes cr17_cr2{0%,44.14%{transform:scale(0);opacity:0}47.72%{transform:scale(1.14);opacity:1}51.59%,92%{transform:scale(1);opacity:1}98%,100%{opacity:0}}
@keyframes cr18_cr3{0%,0%{stroke-dashoffset:1}10.8%,92%{stroke-dashoffset:0}98%,100%{stroke-dashoffset:1}}
@keyframes cr19_cr3{0%,2.3%{stroke-dashoffset:1}13.1%,92%{stroke-dashoffset:0}98%,100%{stroke-dashoffset:1}}
@keyframes cr20_cr3{0%,4.6%{stroke-dashoffset:1}15.4%,92%{stroke-dashoffset:0}98%,100%{stroke-dashoffset:1}}
@keyframes cr21_cr3{0%,6.21%{stroke-dashoffset:1}16.78%,92%{stroke-dashoffset:0}98%,100%{stroke-dashoffset:1}}
@keyframes cr22_cr3{0%,7.59%{transform:scale(0);opacity:0}10.8%{transform:scale(1.14);opacity:1}13.79%,92%{transform:scale(1);opacity:1}98%,100%{opacity:0}}
@keyframes cr23_cr3{0%,9.89%{transform:scale(0);opacity:0}13.1%{transform:scale(1.14);opacity:1}16.09%,92%{transform:scale(1);opacity:1}98%,100%{opacity:0}}
@keyframes cr24_cr3{0%,16.78%{transform:scale(0);opacity:0}20.0%{transform:scale(1.14);opacity:1}22.99%,92%{transform:scale(1);opacity:1}98%,100%{opacity:0}}
@keyframes cr25_cr3{0%,22.99%{transform:scale(0);opacity:0}25.98%{transform:scale(1.14);opacity:1}29.2%,92%{transform:scale(1);opacity:1}98%,100%{opacity:0}}
@keyframes cr26_cr3{0%,27.59%{transform:scale(0);opacity:0}30.57%{transform:scale(1.14);opacity:1}33.79%,92%{transform:scale(1);opacity:1}98%,100%{opacity:0}}
@keyframes cr27_cr3{0%,33.79%{stroke-dashoffset:1}44.37%,92%{stroke-dashoffset:0}98%,100%{stroke-dashoffset:1}}
@keyframes cr28_cr3{0%,44.37%{transform:translateY(18px);opacity:0}50.57%,92%{transform:none;opacity:1}98%,100%{opacity:0}}
@keyframes cr29_cr3{0%,46.67%{transform:translateY(18px);opacity:0}52.87%,92%{transform:none;opacity:1}98%,100%{opacity:0}}
@keyframes cr30_cr3{0%,48.97%{transform:translateY(18px);opacity:0}55.17%,92%{transform:none;opacity:1}98%,100%{opacity:0}}
@keyframes cr31_cr3{0%,53.56%{transform:translateY(18px);opacity:0}59.77%,92%{transform:none;opacity:1}98%,100%{opacity:0}}
@keyframes crNib_cr3{0%,33.79%{offset-distance:0%;opacity:0}34.48%{opacity:1}44.37%{offset-distance:100%;opacity:1}48.97%,100%{offset-distance:100%;opacity:0}}
@keyframes cr32_cr4{0%,35.75%{transform:translateY(18px);opacity:0}41.31%,92%{transform:none;opacity:1}98%,100%{opacity:0}}
@keyframes cr33_cr4{0%,41.31%{transform:scaleX(0);opacity:1}47.09%,92%{transform:scaleX(1);opacity:1}98%,100%{opacity:0}}
@keyframes cr34_cr4{0%,51.38%{transform:scale(0);opacity:0}54.16%{transform:scale(1.14);opacity:1}57.16%,92%{transform:scale(1);opacity:1}98%,100%{opacity:0}}
@keyframes crBtn_cr4{0%,12.84%,18.62%,100%{transform:none}15.63%{transform:scale(.93)}}
@keyframes crFly_cr4{0%,15.63%{transform:translate(155px,300px) scale(1);opacity:0}17.13%{opacity:1}27.19%{transform:translate(420px,92px) scale(.5) rotate(200deg);opacity:1}28.47%,100%{transform:translate(420px,92px) scale(.3);opacity:0}}
@keyframes crBadge_cr4{0%,27.19%{transform:scale(0)}30.61%{transform:scale(1.3)}33.61%,92%{transform:scale(1)}98%,100%{transform:scale(0)}}
@keyframes cr35_cr5{0%,26.48%{transform:translateY(18px);opacity:0}32.81%,92%{transform:none;opacity:1}98%,100%{opacity:0}}
@keyframes cr36_cr5{0%,31.17%{transform:scaleY(0);opacity:1}37.5%,92%{transform:scaleY(1);opacity:1}98%,100%{opacity:0}}
@keyframes cr37_cr5{0%,33.52%{transform:scaleY(0);opacity:1}39.84%,92%{transform:scaleY(1);opacity:1}98%,100%{opacity:0}}
@keyframes cr38_cr5{0%,35.86%{transform:scaleY(0);opacity:1}42.19%,92%{transform:scaleY(1);opacity:1}98%,100%{opacity:0}}
@keyframes cr39_cr5{0%,38.2%{transform:scaleY(0);opacity:1}44.53%,92%{transform:scaleY(1);opacity:1}98%,100%{opacity:0}}
@keyframes cr40_cr5{0%,40.55%{transform:scaleY(0);opacity:1}46.88%,92%{transform:scaleY(1);opacity:1}98%,100%{opacity:0}}
@keyframes cr41_cr5{0%,32.81%{opacity:0}39.14%,92%{opacity:1}98%,100%{opacity:0}}
@keyframes cr42_cr5{0%,49.92%{transform:scale(0);opacity:0}53.2%{transform:scale(1.14);opacity:1}56.25%,92%{transform:scale(1);opacity:1}98%,100%{opacity:0}}
@keyframes crArrow_cr5{0%,6.33%{transform:translate(160px,-160px);opacity:0}7.73%{opacity:1}17.11%,92%{transform:none;opacity:1}98%,100%{opacity:0}}
@keyframes crTg_cr5{0%,17.11%,26.48%,100%{transform:none}19.45%{transform:scale(1.06)}22.73%{transform:scale(.97)}}
@keyframes crBtn_cr5{0%,14.06%,20.39%,100%{transform:none}17.11%{transform:scale(.93)}}
@keyframes ww1_ww1{0%,0.77%{transform:translateY(22px);opacity:0}12.31%,93%{transform:none;opacity:1}99%,100%{opacity:0}}
@keyframes ww2_ww1{0%,3.08%{transform:translateY(22px);opacity:0}14.62%,93%{transform:none;opacity:1}99%,100%{opacity:0}}
@keyframes ww3_ww1{0%,6.92%{transform:scale(0);opacity:0}14.62%{transform:scale(1.12);opacity:1}18.46%,93%{transform:scale(1);opacity:1}99%,100%{opacity:0}}
@keyframes ww4_ww1{0%,9.23%{transform:scale(0);opacity:0}16.92%{transform:scale(1.12);opacity:1}20.77%,93%{transform:scale(1);opacity:1}99%,100%{opacity:0}}
@keyframes ww5_ww1{0%,11.15%{transform:scale(0);opacity:0}18.85%{transform:scale(1.12);opacity:1}22.69%,93%{transform:scale(1);opacity:1}99%,100%{opacity:0}}
@keyframes ww6_ww1{0%,12.69%{transform:translateX(30px);opacity:0}24.23%,93%{transform:none;opacity:1}99%,100%{opacity:0}}
@keyframes ww7_ww1{0%,14.62%{transform:scaleX(0);opacity:1}26.15%,93%{transform:scaleX(1);opacity:1}99%,100%{opacity:0}}
@keyframes ww8_ww1{0%,15.77%{transform:scaleX(0);opacity:1}27.31%,93%{transform:scaleX(1);opacity:1}99%,100%{opacity:0}}
@keyframes ww9_ww1{0%,17.69%{transform:scale(0);opacity:0}25.38%{transform:scale(1.12);opacity:1}29.23%,93%{transform:scale(1);opacity:1}99%,100%{opacity:0}}
@keyframes ww10_ww1{0%,18.85%{transform:scale(0);opacity:0}26.54%{transform:scale(1.12);opacity:1}30.38%,93%{transform:scale(1);opacity:1}99%,100%{opacity:0}}
@keyframes ww11_ww1{0%,20.0%{transform:scale(0);opacity:0}27.69%{transform:scale(1.12);opacity:1}31.54%,93%{transform:scale(1);opacity:1}99%,100%{opacity:0}}
@keyframes ww12_ww1{0%,21.15%{transform:scale(0);opacity:0}28.85%{transform:scale(1.12);opacity:1}32.69%,93%{transform:scale(1);opacity:1}99%,100%{opacity:0}}
@keyframes ww13_ww1{0%,23.08%{transform:translateY(-22px);opacity:0}34.62%,93%{transform:none;opacity:1}99%,100%{opacity:0}}
@keyframes ww14_ww2{0%,2.58%{transform:scaleX(0);opacity:1}12.26%,93%{transform:scaleX(1);opacity:1}99%,100%{opacity:0}}
@keyframes ww15_ww2{0%,9.35%{transform:scaleX(0);opacity:1}19.03%,93%{transform:scaleX(1);opacity:1}99%,100%{opacity:0}}
@keyframes ww16_ww2{0%,3.87%{transform:scaleX(0);opacity:1}13.55%,93%{transform:scaleX(1);opacity:1}99%,100%{opacity:0}}
@keyframes ww17_ww2{0%,10.32%{transform:scaleX(0);opacity:1}20.0%,93%{transform:scaleX(1);opacity:1}99%,100%{opacity:0}}
@keyframes ww18_ww2{0%,5.16%{transform:scaleX(0);opacity:1}14.84%,93%{transform:scaleX(1);opacity:1}99%,100%{opacity:0}}
@keyframes ww19_ww2{0%,11.29%{transform:scaleX(0);opacity:1}20.97%,93%{transform:scaleX(1);opacity:1}99%,100%{opacity:0}}
@keyframes ww20_ww2{0%,6.45%{transform:translateY(22px);opacity:0}16.13%,93%{transform:none;opacity:1}99%,100%{opacity:0}}
@keyframes ww21_ww2{0%,12.26%{transform:translateY(22px);opacity:0}21.94%,93%{transform:none;opacity:1}99%,100%{opacity:0}}
@keyframes ww22_ww2{0%,0.0%{transform:translateY(22px);opacity:0}9.68%,93%{transform:none;opacity:1}99%,100%{opacity:0}}
@keyframes ww23_ww2{0%,7.1%{transform:translateX(30px);opacity:0}16.77%,93%{transform:none;opacity:1}99%,100%{opacity:0}}
@keyframes ww24_ww2{0%,16.13%{transform:scale(0);opacity:0}22.58%{transform:scale(1.12);opacity:1}25.81%,93%{transform:scale(1);opacity:1}99%,100%{opacity:0}}
@keyframes wwScroll_ww2{0%,32.26%{transform:none}54.84%,90%{transform:translateY(-90px)}97%,100%{transform:none}}
@keyframes ww25_ww3{0%,1.54%{transform:translateY(22px);opacity:0}13.08%,93%{transform:none;opacity:1}99%,100%{opacity:0}}
@keyframes ww26_ww3{0%,3.08%{transform:translateY(22px);opacity:0}14.62%,93%{transform:none;opacity:1}99%,100%{opacity:0}}
@keyframes ww27_ww3{0%,4.62%{transform:translateY(22px);opacity:0}16.15%,93%{transform:none;opacity:1}99%,100%{opacity:0}}
@keyframes ww28_ww3{0%,6.15%{transform:translateY(22px);opacity:0}17.69%,93%{transform:none;opacity:1}99%,100%{opacity:0}}
@keyframes ww29_ww3{0%,7.69%{transform:translateY(22px);opacity:0}19.23%,93%{transform:none;opacity:1}99%,100%{opacity:0}}
@keyframes ww30_ww3{0%,27.69%{transform:scale(0);opacity:0}35.38%{transform:scale(1.12);opacity:1}39.23%,93%{transform:scale(1);opacity:1}99%,100%{opacity:0}}
@keyframes wwKan_ww3{0%,3.85%{transform:translate(0,30px);opacity:0}15.38%,19.23%{transform:none;opacity:1}26.92%{transform:translate(172px,-74px) rotate(-3deg)}38.46%,93%{transform:translate(344px,0);opacity:1}100%{transform:translate(344px,0);opacity:0}}
@keyframes ww31_ww4{0%,0.77%{transform:scale(0);opacity:0}8.46%{transform:scale(1.12);opacity:1}12.31%,93%{transform:scale(1);opacity:1}99%,100%{opacity:0}}
@keyframes ww32_ww4{0%,2.31%{transform:scale(0);opacity:0}10.0%{transform:scale(1.12);opacity:1}13.85%,93%{transform:scale(1);opacity:1}99%,100%{opacity:0}}
@keyframes ww33_ww4{0%,3.85%{transform:scale(0);opacity:0}11.54%{transform:scale(1.12);opacity:1}15.38%,93%{transform:scale(1);opacity:1}99%,100%{opacity:0}}
@keyframes ww34_ww4{0%,5.38%{transform:scale(0);opacity:0}13.08%{transform:scale(1.12);opacity:1}16.92%,93%{transform:scale(1);opacity:1}99%,100%{opacity:0}}
@keyframes ww35_ww4{0%,9.23%{transform:scale(0);opacity:0}16.92%{transform:scale(1.12);opacity:1}20.77%,93%{transform:scale(1);opacity:1}99%,100%{opacity:0}}
@keyframes ww36_ww4{0%,11.54%{transform:translateX(30px);opacity:0}23.08%,93%{transform:none;opacity:1}99%,100%{opacity:0}}
@keyframes ww37_ww4{0%,15.38%{transform:scale(0);opacity:0}23.08%{transform:scale(1.12);opacity:1}26.92%,93%{transform:scale(1);opacity:1}99%,100%{opacity:0}}
@keyframes ww38_ww4{0%,19.23%{transform:translateX(30px);opacity:0}30.77%,93%{transform:none;opacity:1}99%,100%{opacity:0}}
@keyframes ww39_ww4{0%,23.85%{transform:translateX(30px);opacity:0}35.38%,93%{transform:none;opacity:1}99%,100%{opacity:0}}
@keyframes ww40_ww5{0%,0.77%{transform:translateY(22px);opacity:0}12.31%,93%{transform:none;opacity:1}99%,100%{opacity:0}}
@keyframes ww41_ww5{0%,3.46%{transform:translateY(22px);opacity:0}15.0%,93%{transform:none;opacity:1}99%,100%{opacity:0}}
@keyframes ww42_ww5{0%,6.15%{transform:translateY(22px);opacity:0}17.69%,93%{transform:none;opacity:1}99%,100%{opacity:0}}
@keyframes ww43_ww5{0%,13.85%{transform:translateY(22px);opacity:0}25.38%,93%{transform:none;opacity:1}99%,100%{opacity:0}}
@keyframes ww44_ww5{0%,16.15%{stroke-dashoffset:1;opacity:1}35.38%,93%{stroke-dashoffset:0;opacity:1}99%,100%{stroke-dashoffset:1}}
@keyframes ww45_ww6{0%,1.54%{transform:scale(0);opacity:0}9.23%{transform:scale(1.12);opacity:1}13.08%,93%{transform:scale(1);opacity:1}99%,100%{opacity:0}}
@keyframes ww46_ww6{0%,3.08%{transform:scale(0);opacity:0}10.77%{transform:scale(1.12);opacity:1}14.62%,93%{transform:scale(1);opacity:1}99%,100%{opacity:0}}
@keyframes ww47_ww6{0%,4.62%{transform:scale(0);opacity:0}12.31%{transform:scale(1.12);opacity:1}16.15%,93%{transform:scale(1);opacity:1}99%,100%{opacity:0}}
@keyframes ww48_ww6{0%,6.15%{transform:scale(0);opacity:0}13.85%{transform:scale(1.12);opacity:1}17.69%,93%{transform:scale(1);opacity:1}99%,100%{opacity:0}}
@keyframes ww49_ww6{0%,13.08%{transform:translateY(-22px);opacity:0}24.62%,93%{transform:none;opacity:1}99%,100%{opacity:0}}
@keyframes ww50_ww6{0%,20.0%{transform:translateY(22px);opacity:0}31.54%,93%{transform:none;opacity:1}99%,100%{opacity:0}}
@keyframes ww51_ww7{0%,0.77%{transform:translateY(22px);opacity:0}12.31%,93%{transform:none;opacity:1}99%,100%{opacity:0}}
@keyframes ww52_ww7{0%,2.31%{transform:translateY(22px);opacity:0}13.85%,93%{transform:none;opacity:1}99%,100%{opacity:0}}
@keyframes ww53_ww7{0%,3.85%{transform:translateY(22px);opacity:0}15.38%,93%{transform:none;opacity:1}99%,100%{opacity:0}}
@keyframes ww54_ww7{0%,16.92%{stroke-dashoffset:1;opacity:1}36.15%,93%{stroke-dashoffset:0;opacity:1}99%,100%{stroke-dashoffset:1}}
@keyframes ww55_ww7{0%,7.69%{transform:scaleY(0);opacity:1}19.23%,93%{transform:scaleY(1);opacity:1}99%,100%{opacity:0}}
@keyframes ww56_ww7{0%,8.85%{transform:scaleY(0);opacity:1}20.38%,93%{transform:scaleY(1);opacity:1}99%,100%{opacity:0}}
@keyframes ww57_ww7{0%,10.0%{transform:scaleY(0);opacity:1}21.54%,93%{transform:scaleY(1);opacity:1}99%,100%{opacity:0}}
@keyframes ww58_ww7{0%,11.15%{transform:scaleY(0);opacity:1}22.69%,93%{transform:scaleY(1);opacity:1}99%,100%{opacity:0}}
@keyframes ww59_ww7{0%,12.31%{transform:scaleY(0);opacity:1}23.85%,93%{transform:scaleY(1);opacity:1}99%,100%{opacity:0}}
@keyframes ww60_ww7{0%,13.46%{transform:scaleY(0);opacity:1}25.0%,93%{transform:scaleY(1);opacity:1}99%,100%{opacity:0}}
@keyframes wwDon_ww7{0%,3.85%{stroke-dashoffset:100}30.77%,93%{stroke-dashoffset:36}100%{stroke-dashoffset:100}}
@keyframes wwDon2_ww7{0%,15.38%{stroke-dashoffset:100}38.46%,93%{stroke-dashoffset:78}100%{stroke-dashoffset:100}}
@keyframes ww61_ww8{0%,16.92%{transform:translateY(-22px);opacity:0}28.46%,93%{transform:none;opacity:1}99%,100%{opacity:0}}
@keyframes ww62_ww8{0%,22.31%{transform:scale(0);opacity:0}30.0%{transform:scale(1.12);opacity:1}33.85%,93%{transform:scale(1);opacity:1}99%,100%{opacity:0}}
@keyframes ww63_ww8{0%,24.62%{transform:scale(0);opacity:0}32.31%{transform:scale(1.12);opacity:1}36.15%,93%{transform:scale(1);opacity:1}99%,100%{opacity:0}}
@keyframes wwLid_ww8{0%,3.85%{transform:none}19.23%,90%{transform:translate(-30px,-60px) rotate(-24deg)}98%,100%{transform:none}}
@keyframes wwRise_ww8{0%,7.69%{transform:translateY(110px)}30.77%,90%{transform:none}98%,100%{transform:translateY(110px)}}
@keyframes pa1_ps2{0%,2.65%{transform:scale(0);opacity:0}7.96%{transform:scale(1.15);opacity:1}13.27%,90%{transform:scale(1);opacity:1}97%,100%{opacity:0}}
@keyframes pa2_ps2{0%,7.96%{stroke-dashoffset:1;opacity:1}29.2%,90%{stroke-dashoffset:0;opacity:1}97%,100%{stroke-dashoffset:1;opacity:1}}
@keyframes pa3_ps2{0%,21.24%{transform:scale(0);opacity:0}26.55%{transform:scale(1.15);opacity:1}31.86%,90%{transform:scale(1);opacity:1}97%,100%{opacity:0}}
@keyframes pa4_ps2{0%,31.86%{transform:scale(0);opacity:0}37.17%{transform:scale(1.15);opacity:1}42.48%,90%{transform:scale(1);opacity:1}97%,100%{opacity:0}}
@keyframes pa5_ps2{0%,42.48%{transform:scale(0);opacity:0}47.79%{transform:scale(1.15);opacity:1}53.1%,90%{transform:scale(1);opacity:1}97%,100%{opacity:0}}
@keyframes pa6_ps2{0%,58.41%{transform:translateY(14px);opacity:0}69.03%,90%{transform:none;opacity:1}97%,100%{opacity:0}}
@keyframes pa7_ps3{0%,4.29%{stroke-dashoffset:1;opacity:1}21.43%,90%{stroke-dashoffset:0;opacity:1}97%,100%{stroke-dashoffset:1;opacity:1}}
@keyframes pa8_ps3{0%,19.29%{transform:scale(0);opacity:0}23.57%{transform:scale(1.15);opacity:1}27.86%,90%{transform:scale(1);opacity:1}97%,100%{opacity:0}}
@keyframes pa9_ps3{0%,25.71%{transform:scale(0);opacity:0}30.0%{transform:scale(1.15);opacity:1}34.29%,90%{transform:scale(1);opacity:1}97%,100%{opacity:0}}
@keyframes pa10_ps3{0%,38.57%{transform:scale(0);opacity:0}42.86%{transform:scale(1.15);opacity:1}47.14%,90%{transform:scale(1);opacity:1}97%,100%{opacity:0}}
@keyframes pa11_ps3{0%,42.86%{transform:scale(0);opacity:0}47.14%{transform:scale(1.15);opacity:1}51.43%,90%{transform:scale(1);opacity:1}97%,100%{opacity:0}}
@keyframes pa12_ps3{0%,47.14%{transform:scale(0);opacity:0}51.43%{transform:scale(1.15);opacity:1}55.71%,90%{transform:scale(1);opacity:1}97%,100%{opacity:0}}
@keyframes psSpin_ps3{0%,21.43%{transform:rotate(0)}48.21%,75.0%{transform:rotate(90deg)}95%,100%{transform:rotate(180deg)}}
@keyframes pa13_ps4{0%,3.44%{transform:scaleX(0);opacity:1}12.6%,90%{transform:scaleX(1);opacity:1}97%,100%{opacity:0}}
@keyframes pa14_ps4{0%,11.45%{transform:scaleX(0);opacity:1}20.61%,90%{transform:scaleX(1);opacity:1}97%,100%{opacity:0}}
@keyframes pa15_ps4{0%,19.47%{transform:scaleX(0);opacity:1}28.63%,90%{transform:scaleX(1);opacity:1}97%,100%{opacity:0}}
@keyframes pa16_ps4{0%,27.48%{transform:scaleX(0);opacity:1}36.64%,90%{transform:scaleX(1);opacity:1}97%,100%{opacity:0}}
@keyframes pa17_ps4{0%,35.5%{transform:scaleX(0);opacity:1}44.66%,90%{transform:scaleX(1);opacity:1}97%,100%{opacity:0}}
@keyframes pa18_ps4{0%,43.51%{transform:scaleX(0);opacity:1}52.67%,90%{transform:scaleX(1);opacity:1}97%,100%{opacity:0}}
@keyframes pa19_ps4{0%,64.12%{transform:scale(0);opacity:0}68.7%{transform:scale(1.15);opacity:1}73.28%,90%{transform:scale(1);opacity:1}97%,100%{opacity:0}}
@keyframes pa20_ps5{0%,33.58%{transform:scaleY(0);opacity:1}42.54%,90%{transform:scaleY(1);opacity:1}97%,100%{opacity:0}}
@keyframes pa21_ps5{0%,38.06%{transform:scaleY(0);opacity:1}47.01%,90%{transform:scaleY(1);opacity:1}97%,100%{opacity:0}}
@keyframes pa22_ps5{0%,42.54%{transform:scaleY(0);opacity:1}51.49%,90%{transform:scaleY(1);opacity:1}97%,100%{opacity:0}}
@keyframes pa23_ps5{0%,47.01%{transform:scaleY(0);opacity:1}55.97%,90%{transform:scaleY(1);opacity:1}97%,100%{opacity:0}}
@keyframes pa24_ps5{0%,51.49%{transform:scaleY(0);opacity:1}60.45%,90%{transform:scaleY(1);opacity:1}97%,100%{opacity:0}}
@keyframes pa25_ps5{0%,49.25%{stroke-dashoffset:1;opacity:1}67.16%,90%{stroke-dashoffset:0;opacity:1}97%,100%{stroke-dashoffset:1;opacity:1}}
@keyframes pa26_ps5{0%,64.93%{transform:scale(0);opacity:0}69.4%{transform:scale(1.15);opacity:1}73.88%,90%{transform:scale(1);opacity:1}97%,100%{opacity:0}}
@keyframes pa27_ps5{0%,6.72%{transform:scale(0);opacity:0}11.19%{transform:scale(1.15);opacity:1}15.67%,90%{transform:scale(1);opacity:1}97%,100%{opacity:0}}
/* ================= r77: Why choose us — new card animations ================= */
.yc3 .vis .wy-svg{width:100%;height:auto;max-height:100%;aspect-ratio:360/200;overflow:visible}
.wy-svg *{transform-box:fill-box}
.wy-svg text{font-family:var(--fm);font-weight:500;letter-spacing:.08em}
.wy-svg .disp{font-family:var(--fd);font-weight:600;letter-spacing:-.02em}
html.av-live .yd3-grid:not(.in) .wy-svg *{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.wy-svg *{animation:none!important}}
.wy-1 .tr{transform-origin:50% 50%;animation:wy1 4.2s cubic-bezier(.2,.8,.2,1) infinite;stroke-dasharray:1}
@keyframes wy1{0%,4%{stroke-dashoffset:1;opacity:1}18%,90%{stroke-dashoffset:0;opacity:1}97%,100%{stroke-dashoffset:1;opacity:1}}
.wy-1 .f0{transform-origin:50% 50%;animation:wyF0 4.2s cubic-bezier(.2,.8,.2,1) infinite}@keyframes wyF0{0%,4%{transform:scale(0)}9%{transform:scale(1.12)}12%,90%{transform:scale(1)}97%,100%{transform:scale(0)}}
.wy-1 .f1{transform-origin:50% 50%;animation:wyF1 4.2s cubic-bezier(.2,.8,.2,1) infinite}@keyframes wyF1{0%,20%{transform:scale(0)}25%{transform:scale(1.12)}28%,90%{transform:scale(1)}97%,100%{transform:scale(0)}}
.wy-1 .f2{transform-origin:50% 50%;animation:wyF2 4.2s cubic-bezier(.2,.8,.2,1) infinite}@keyframes wyF2{0%,36%{transform:scale(0)}41%{transform:scale(1.12)}44%,90%{transform:scale(1)}97%,100%{transform:scale(0)}}
.wy-1 .f3{transform-origin:50% 50%;animation:wyF3 4.2s cubic-bezier(.2,.8,.2,1) infinite}@keyframes wyF3{0%,52%{transform:scale(0)}57%{transform:scale(1.12)}60%,90%{transform:scale(1)}97%,100%{transform:scale(0)}}
.wy-1 .tok{animation:wyTok 4.2s cubic-bezier(.6,0,.4,1) infinite}@keyframes wyTok{0%,2%{transform:translate(45px,92px);opacity:0}5%{opacity:1}20%{transform:translate(135px,92px)}36%{transform:translate(225px,92px)}52%{transform:translate(315px,92px);opacity:1}58%,100%{transform:translate(315px,92px);opacity:0}}
.wy-1 .ok{transform-origin:50% 50%;animation:wy2 4.2s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes wy2{0%,62%{transform:scale(0);opacity:0}65%{transform:scale(1.15);opacity:1}69%,90%{transform:scale(1);opacity:1}97%,100%{opacity:0}}
.wy-2 .b0{transform-origin:50% 100%;animation:wy3 4.2s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes wy3{0%,2%{transform:scaleY(0);opacity:1}9%,90%{transform:scaleY(1);opacity:1}97%,100%{opacity:0}}
.wy-2 .b1{transform-origin:50% 100%;animation:wy4 4.2s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes wy4{0%,6%{transform:scaleY(0);opacity:1}13%,90%{transform:scaleY(1);opacity:1}97%,100%{opacity:0}}
.wy-2 .b2{transform-origin:50% 100%;animation:wy5 4.2s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes wy5{0%,10%{transform:scaleY(0);opacity:1}17%,90%{transform:scaleY(1);opacity:1}97%,100%{opacity:0}}
.wy-2 .b3{transform-origin:50% 100%;animation:wy6 4.2s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes wy6{0%,14%{transform:scaleY(0);opacity:1}21%,90%{transform:scaleY(1);opacity:1}97%,100%{opacity:0}}
.wy-2 .b4{transform-origin:50% 100%;animation:wy7 4.2s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes wy7{0%,18%{transform:scaleY(0);opacity:1}25%,90%{transform:scaleY(1);opacity:1}97%,100%{opacity:0}}
.wy-2 .b5{transform-origin:50% 100%;animation:wy8 4.2s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes wy8{0%,22%{transform:scaleY(0);opacity:1}29%,90%{transform:scaleY(1);opacity:1}97%,100%{opacity:0}}
.wy-2 .ln{transform-origin:50% 50%;animation:wy9 4.2s cubic-bezier(.2,.8,.2,1) infinite;stroke-dasharray:1}
@keyframes wy9{0%,10%{stroke-dashoffset:1;opacity:1}24%,90%{stroke-dashoffset:0;opacity:1}97%,100%{stroke-dashoffset:1;opacity:1}}
.wy-2 .ar{transform-origin:50% 50%;animation:wy10 4.2s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes wy10{0%,20%{opacity:0}27%,90%{opacity:1}97%,100%{opacity:0}}
.wy-2 .pt{transform-origin:50% 50%;animation:wy11 4.2s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes wy11{0%,30%{transform:scale(0);opacity:0}33%{transform:scale(1.15);opacity:1}37%,90%{transform:scale(1);opacity:1}97%,100%{opacity:0}}
.wy-2 .kp{transform-origin:50% 50%;animation:wy12 4.2s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes wy12{0%,38%{transform:translateY(14px);opacity:0}45%,90%{transform:none;opacity:1}97%,100%{opacity:0}}
.wy-2 .rp{transform-origin:50% 50%;animation:wyRp 1.4s ease-out infinite}@keyframes wyRp{0%{transform:scale(.6);opacity:1}100%{transform:scale(2.6);opacity:0}}
.wy-3 .pin{transform-origin:50% 50%;animation:wy13 4.6s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes wy13{0%,4%{transform:translateY(-60px);opacity:0}8%{transform:translateY(6px);opacity:1}13%,90%{transform:none;opacity:1}97%,100%{opacity:0}}
.wy-3 .c1{transform-origin:50% 50%;animation:wy14 4.6s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes wy14{0%,26%{transform:translateY(14px);opacity:0}33%,90%{transform:none;opacity:1}97%,100%{opacity:0}}
.wy-3 .c2{transform-origin:50% 50%;animation:wy15 4.6s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes wy15{0%,42%{transform:translateY(14px);opacity:0}49%,90%{transform:none;opacity:1}97%,100%{opacity:0}}
.wy-3 .c3{transform-origin:50% 50%;animation:wy16 4.6s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes wy16{0%,56%{transform:scale(0);opacity:0}59%{transform:scale(1.15);opacity:1}63%,90%{transform:scale(1);opacity:1}97%,100%{opacity:0}}
.wy-3 .r1{transform-origin:50% 50%;animation:wyRing 1.4s ease-out 0s infinite;opacity:0}
.wy-3 .r2{transform-origin:50% 50%;animation:wyRing 1.4s ease-out 0.7s infinite;opacity:0}
@keyframes wyRing{0%{transform:scale(.4);opacity:.9}100%{transform:scale(2.4);opacity:0}}
/* r78: phones — no "Next up" card, no horizontal "more work" strip; three extra projects join the main list */
.wx-mob{display:none}
@media (max-width:760px){
  .w-a .wx-4{display:none!important}
  .w-a .wx-mob{display:flex}
  .wa-more{display:none!important}
}
/* r79: phones — "What you walk away with" slides up over "How we work" (which stays put), like desktop */
@media (max-width:760px){
  html.av-live .dk.wv2{margin-top:-100vh!important;position:relative;z-index:5}
  html.av-live .dk.wv2 .pin-in{background:#0B0B0D;box-shadow:inset 0 1px 0 rgba(163,173,255,.18),0 -30px 60px rgba(0,0,0,.35)}
}
/* r80: phones — the list stays put once fully shown, and Industries slides up over it */
@media (max-width:760px){
  html.av-live .dk.wv2{padding-bottom:100vh}
  html.av-live .dk.wv2 .pin-in{position:sticky!important;top:min(0px,calc(100vh - var(--sth,100vh)))}
  html.av-live .i-a{margin-top:-100vh!important;position:relative;z-index:6}
}
@media (max-width:760px){html.av-live .dk.wv2{padding-bottom:0;height:calc(var(--sth,100vh) + 100vh)!important}}
/* r81: phones — hero is a normal block with a square video under the buttons; tighter tagline */
@media (max-width:760px){
  html.av-live .h-h{height:auto!important}
  html.av-live .h-h .pin-in,.h-h .pin-in{position:relative!important;height:auto!important;min-height:0!important;--e:0!important;--ee:0!important;padding:86px var(--g) 40px;display:flex;flex-direction:column;gap:28px}
  .h-h .hh-top{position:relative!important;left:auto;right:auto;top:auto!important;transform:none!important;opacity:1!important}
  .h-h .hx-frame{position:relative!important;inset:auto!important;top:auto!important;left:auto!important;right:auto!important;bottom:auto!important;width:100%!important;height:auto!important;aspect-ratio:1/1;border-radius:20px!important}
  .ta-in,html.av-live .ta-in{min-height:0!important;padding:56px var(--g) 64px}
}
@media (max-width:760px){.w-a{padding-top:72px}}
/* r82: portfolio cards — the reveal wipe keeps the card's rounded corners */
html.av-live .wx-frame[data-r="clip"]{clip-path:inset(100% 0 0 0 round 14px)}
html.av-live .wx-frame[data-r="clip"].in{clip-path:inset(0 0 0 0 round 14px)}
.cardv .wx-frame .ph-img,.cardv .wx-frame .pcx-info{border-radius:inherit}
.cardv .wx-frame::after,.wm-frame::after{border-radius:inherit}.wm-frame{border-radius:14px}
/* r83: project cards are not links (nothing to open yet) */
.pc{cursor:default}
/* phones: industry names match the "What you walk away with" list size */
@media (max-width:760px){.ia-touch .ia-name,.ia-name{font-size:26px!important;letter-spacing:-.03em;line-height:1.1}.ia-touch .ia-row{padding-top:16px;padding-bottom:16px}}
/* r84: phones — equal space above and below "Why choose us" (150px each) */
@media (max-width:760px){
  section.i-a{padding-bottom:84px!important}
  .y-d3{padding-bottom:56px!important}
  html.av-live .c-d .pin-in,.c-d .pin-in{justify-content:flex-start!important;padding-top:94px!important}
}
/* r85: project-card top pill matches the tag pills; phones end the work list with the blue "Yours could be here" card */
.cv-3 .pcx-client{background:rgba(255,255,255,.14)!important;color:#fff!important;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.wm-endcard{background:var(--blue)!important;color:#fff;display:flex!important;flex-direction:column;justify-content:space-between;padding:26px;text-decoration:none}
.wm-endcard strong{font-family:var(--fd);font-weight:700;font-size:clamp(40px,11vw,60px);line-height:.9;letter-spacing:-.05em}
.wm-endcard .ser{font-family:var(--fs);font-style:italic;font-weight:400}
/* r86: phones — one spacing rhythm: ~120px between sections, headings start ~88px below the top (clear of the nav) */
@media (max-width:760px){
  html.av-live .h-h .pin-in,.h-h .pin-in{padding-bottom:64px!important}
  .ta-in,html.av-live .ta-in{padding-top:56px!important;padding-bottom:48px!important}
  .w-a{padding-bottom:32px!important}
  html.av-live .s-h .pin-in,.s-c.s-h{padding-top:0!important}
  html.av-live .s-h .pin-in{padding-top:88px!important}
  html.av-live .p-a .pin-in,.p-a .pin-in{padding-top:88px!important}
  html.av-live .dk.wv2 .pin-in,.dk.wv2 .pin-in{padding-top:88px!important}
  section.i-a{padding-top:88px!important;padding-bottom:48px!important}
  .y-d3{min-height:0!important;padding-top:72px!important;padding-bottom:32px!important}
  html.av-live .c-d{height:auto!important}
  html.av-live .c-d .pin-in,.c-d .pin-in{position:relative!important;height:auto!important;min-height:0!important;padding-top:88px!important;padding-bottom:32px!important;transform:none!important;filter:none!important}
  .b-b{padding-top:88px!important;padding-bottom:40px!important}
  .f-a{padding-top:56px!important}
}
/* ================= r87: phone structure — stacked cards instead of pinned scroll tricks ================= */
@media (max-width:760px){
  /* sections that the next one slides over: content scrolls normally, then holds while the next sheet covers it */
  html.av-live [data-stick-end]{height:calc(var(--sth,100vh) + 100vh)!important}
  html.av-live [data-stick-end]>.pin-in{position:sticky!important;top:min(0px,calc(100vh - var(--sth,100vh)))!important;height:auto!important;min-height:0!important}
  /* What we do: vertical stack of service cards */
  html.av-live .s-h .pin-in{padding:88px 0 56px!important;overflow:visible}
  .s-h .head{padding:0 var(--g)}
  .sh-track{transform:none!important;flex-direction:column!important;width:auto!important;padding:0 var(--g)!important;gap:16px!important;margin-top:28px}
  .s-h .sc-p{flex:none!important;width:100%!important;transform:none!important;--chh:520px}
  .sh-bar{display:none!important}
  .sh-end{width:100%!important;min-height:220px}
  /* How we work: vertical list of step cards */
  html.av-live .p-a .pin-in{padding:88px var(--g) 56px!important}
  .p-a .pa-stage{position:relative!important;height:auto!important;display:flex!important;flex-direction:column;gap:16px;margin-top:28px;perspective:none}
  .p-a .pa-card{position:relative!important;left:auto!important;top:auto!important;margin:0!important;width:100%!important;transform:none!important;opacity:1!important;filter:none!important;visibility:visible!important}
  .p-a .pa-in{transform:none!important}
  .p-a .pa-art{aspect-ratio:16/8!important}
  /* the sheets that slide over them */
  html.av-live .p-a{margin-top:-100vh!important}
}
@media (max-width:760px){
  html.av-live .yd3-grid:not(.in) .yc3{transform:translate3d(0,40px,0)!important}
  .yc3{transition-duration:.7s!important}
}
/* r88: navbar gets a subtle dark glass once you scroll; text stays light on it */
.nav::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(11,11,13,.72);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);box-shadow:inset 0 -1px 0 rgba(255,255,255,.06);opacity:0;transition:opacity .35s}
.nav.nav-solid::before{opacity:1}
.nav.nav-solid{padding-top:14px;padding-bottom:14px}
html.av-live .nav{transition:transform .7s var(--ez),color .5s,padding .35s var(--ez)}
.nav.nav-solid.nav-dark{color:var(--paper)}
.nav.nav-solid.nav-dark .nav-logo{filter:none}
/* phones: no light page colour peeking past the rounded corners of the Industries sheet */
@media (max-width:760px){
  html.av-live .av[data-bgfade] .dk.wv2{background:linear-gradient(180deg,transparent 0,transparent 64px,#0B0B0D 64px)!important}
  /* walk-away list: items arrive one by one, quickly */
  html.av-live .wv2-slides .wv2-slide{transition:opacity .35s var(--ez),transform .45s var(--ez);transition-delay:calc(var(--i,0) * 55ms)}
  html.av-live .wv2-slides:not(.in) .wv2-slide{opacity:0;transform:translate3d(0,18px,0)}
}
/* r89: phones — postcard sits fully in view right under the heading; tap flips it */
@media (max-width:760px){
  .c-d .cd-wrap{--in:1!important;--fl:0deg!important;--pm:1!important;--z:0!important;--ze:0!important}
  html.av-live .c-d .pin-in,.c-d .pin-in{overflow:visible!important;gap:20px!important;padding-bottom:56px!important}
  html.av-live .c-d .cd-card,.c-d .cd-card{width:calc(100vw - var(--g) * 2)!important;transform:rotateZ(-2deg) rotateY(var(--tf))!important}
  html.av-live .c-d .cd-hint{display:block;margin-top:6px}
}