/* New Brand Order — case-study template (projekt.html). Loaded after style.css. */
.cx-page{--cream2:#E8E1D3;--cream3:#F8F4EC;--r:clamp(16px,1.7vw,28px);overflow-x:clip}
.cx.cs{padding:0}
.cx h1,.cx h2,.cx h3{letter-spacing:-.01em;line-height:1.02}
.cx .seal{width:14px;height:14px;margin:0;vertical-align:middle;flex-shrink:0}
.cx-mini{font-size:11px;letter-spacing:.16em;text-transform:uppercase;opacity:.6;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.cx-mini .ph,.cx-note .ph{opacity:1}

/* header: transparent over dark sections, paper glass elsewhere */
.cx-top{position:fixed;left:0;right:0;top:0;transition:background .5s var(--ease),color .5s var(--ease),backdrop-filter .5s}
.cx-top.is-over{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;color:var(--paper)}
.cx-top.is-over .btn--ink{background:var(--paper);color:var(--ink)}
.cx-top.is-over .btn--ink:hover{color:var(--paper)}
.cx-back{transition:opacity .3s}.cx-back:hover{opacity:.6}

/* HERO — , */
.cx-hero{background:var(--night);color:var(--paper);padding:clamp(108px,17vh,180px) var(--g) clamp(36px,7vh,80px);text-align:center;overflow:hidden}
.cx-hero__in{display:flex;flex-direction:column;align-items:center;gap:clamp(16px,2.6vh,28px);will-change:transform,opacity}
.cx-note{display:flex;align-items:center;gap:10px;font-size:12px;opacity:.75}
.cx-chips{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.cx-chips li{padding:7px 14px;border-radius:99px;border:1px solid rgba(241,236,225,.28);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.cx-title{font-size:clamp(44px,min(13vw,calc(190vw / var(--len))),230px);font-weight:700;letter-spacing:-.01em!important;line-height:.98!important;max-width:100%}
.cx-w{display:inline-block;overflow:hidden;white-space:nowrap;padding:.14em .02em .06em;margin:-.14em 0 -.06em;vertical-align:top}
.cx-c{display:inline-block;transform:translate3d(0,105%,0);transition:transform 1.1s var(--ease) calc(var(--i,0) * 45ms + .1s)}
.is-ready .cx-c{transform:none}
.cx-in{opacity:0;transform:translateY(14px);transition:opacity .9s var(--ease) .45s,transform .9s var(--ease) .45s}
.is-ready .cx-in{opacity:1;transform:none}
.cx-facts{display:flex;justify-content:center;gap:clamp(22px,4.5vw,72px);flex-wrap:wrap}
.cx-facts dt,.cx-side dt{font-size:11px;letter-spacing:.16em;text-transform:uppercase;opacity:.55;margin-bottom:6px}
.cx-facts dd{font-family:Frama;font-weight:700;font-size:clamp(16px,1.3vw,19px);margin:0}
.cx-lead{font-size:clamp(16px,1.35vw,20px);line-height:1.5;max-width:36ch;opacity:.8}
.cx-down{display:inline-flex;align-items:center;gap:10px;font-size:13px;opacity:.75;transition:opacity .3s}
.cx-down:hover{opacity:1}
.cx-down .seal{width:16px;height:16px;color:var(--coral);animation:cx-pulse 2.4s var(--ease) infinite}
@keyframes cx-pulse{0%,100%{transform:scale(1)}50%{transform:scale(.72)}}

/* cover grows from an inset card to full width */
.cx-coverwrap{position:relative;margin-top:-2px;padding:2px var(--g) 0;background:linear-gradient(var(--night) 0 50%,var(--paper) 50%)}
.cx-cover{margin:0 auto;max-width:1680px;aspect-ratio:16/9;overflow:hidden;border-radius:18px;background:#1B1430;transform-origin:50% 0;will-change:transform}
.cx-cover img{width:100%;height:100%;object-fit:cover;display:block}

/* shared section frame */
.cx-sec{padding:clamp(80px,15vh,170px) var(--g) 0;max-width:1680px;margin:0 auto}
.cx-lbl{display:flex;align-items:center;gap:10px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;margin-bottom:clamp(20px,4vh,40px)}
.cx-lbl .seal{color:var(--coral)}
.cx-lbl span{opacity:.45}
.cx-body{font-size:clamp(16px,1.2vw,19px);line-height:1.62;opacity:.8;max-width:58ch}
.cx-h{font-size:clamp(34px,4.6vw,80px);font-weight:700}
.cx-h3{font-size:clamp(24px,2vw,34px);font-weight:700;margin:14px 0 14px}
.cx-head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:0 18px;align-items:start}
.cx-head .cx-lbl,.cx-head .cx-mini{grid-column:1/7}.cx-head .cx-body{grid-column:7/13}

/* media frame + inner drift (transform only) + hover zoom (scale property, so it never fights the drift) */
.cx-media{position:relative;overflow:hidden;border-radius:var(--r);background:#E2DACB;isolation:isolate}
.cx-par{position:absolute;inset:-8% 0;background-repeat:no-repeat;will-change:transform;transition:scale 1.2s var(--ease)}
.cx-par img{width:100%;height:100%;object-fit:cover;display:block}
.cx-media:hover .cx-par{scale:1.04}

/* 01 PREHĽAD — text left, sticky facts right */
.cx-over{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:0 18px;align-items:start}
.cx-over__main{grid-column:1/8}
.cx-side{grid-column:9/13;position:sticky;top:110px}
.cx-side dl>div{padding:16px 0;border-top:1px solid var(--line)}
.cx-side dl>div:last-child{border-bottom:1px solid var(--line)}
.cx-side dd{margin:0;font-family:Frama;font-weight:700;font-size:17px}
.cx-side dd span{display:block}

/* gallery: 2-up then full width */
.cx-gal{display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,1.1vw,18px);padding:clamp(70px,12vh,140px) var(--g) 0;max-width:1680px;margin:0 auto}
.cx-gal .is-sq{aspect-ratio:6/5}
.cx-gal .is-wide{grid-column:1/-1;aspect-ratio:16/8}

/* 02 VÝZVA — three cards */
.cx-cards{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:clamp(28px,5vh,56px)}
.cx-cards li{display:flex;flex-direction:column;gap:18px;min-height:clamp(300px,30vw,440px);padding:clamp(22px,2.2vw,34px);border-radius:var(--r);background:var(--cream2);transition:background .6s var(--ease),color .6s var(--ease),translate .6s var(--ease)}
.cx-cards i{font-style:normal;font-family:Frama;font-weight:100;font-size:22px;color:var(--coral);transition:color .6s}
.cx-cards h3{font-size:clamp(22px,1.9vw,32px);line-height:1.12;max-width:14ch}
.cx-cards p{margin-top:auto;font-size:15px;line-height:1.55;opacity:.75;max-width:34ch}
@media (hover:hover){.cx-cards li:hover{background:var(--night);color:var(--paper);translate:0 -6px}.cx-cards li:hover i{color:var(--lilac)}}

/* 03 STRATÉGIA — one big statement */
.cx-strat__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px 18px;align-items:start}
.cx-strat .cx-h{grid-column:1/7;max-width:14ch}
.cx-strat .cx-body{grid-column:7/13}
.cx-band{padding:clamp(60px,10vh,120px) var(--g) 0;max-width:1680px;margin:0 auto}
.cx-band .is-band{aspect-ratio:21/9}

/* 04 IDENTITA — palette mosaic, type specimen + logo pair */
.cx-pal{list-style:none;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);grid-auto-rows:minmax(110px,1fr);min-height:clamp(420px,40vw,620px);border-radius:var(--r);overflow:hidden;margin-top:clamp(28px,5vh,56px)}
.cx-pal li{display:flex;grid-column:1}
.cx-pal li:first-child{grid-column:2}
.cx-pal .cx-sw{position:relative;flex:1;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;gap:12px;padding:clamp(16px,1.6vw,26px)}
.cx-pal b{font-family:Frama;font-weight:700;font-size:clamp(16px,1.3vw,20px)}
.cx-pal__v{display:flex;flex-direction:column;gap:2px;font-size:14px;font-variant-numeric:tabular-nums}
.cx-pal__v small{font-size:11px;opacity:.7;letter-spacing:.04em}
.cx-id__pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;margin-top:14px}
.cx-id__pair.is-solo{grid-template-columns:1fr}
.cx-id__pair.is-solo .cx-glyphs{grid-template-columns:repeat(13,minmax(0,1fr))}
.cx-type{background:var(--night);color:var(--paper);border-radius:var(--r);padding:clamp(22px,2.2vw,34px);display:flex;flex-direction:column}
.cx-type__aa{font-family:Frama;font-weight:700;font-size:clamp(110px,12vw,210px);line-height:.9;letter-spacing:-.01em;margin:clamp(14px,3vh,30px) 0 18px}
.cx-type__name{font-size:13px;opacity:.7;line-height:1.5;max-width:44ch;margin-bottom:24px}
.cx-type__name b{display:block;font-family:Frama;font-size:20px;opacity:1;margin-bottom:4px}
.cx-glyphs{list-style:none;display:grid;grid-template-columns:repeat(9,minmax(0,1fr));margin-top:auto;border-top:1px solid rgba(241,236,225,.18);border-left:1px solid rgba(241,236,225,.18)}
.cx-glyphs li{aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-family:Frama;font-weight:700;font-size:clamp(14px,1.3vw,20px);border-right:1px solid rgba(241,236,225,.18);border-bottom:1px solid rgba(241,236,225,.18);transition:background .25s,color .25s}
.cx-glyphs li:hover{background:var(--coral);color:var(--paper)}
.cx-logo{margin:0;display:flex;flex-direction:column;background:var(--cream2);border-radius:var(--r);overflow:hidden}
.cx-logo .cx-media{flex:1;min-height:340px;border-radius:0}
.cx-logo figcaption{padding:16px 22px}

/* 05 VÝSTUPY — sticky list, scrolling images */
.cx-del{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:0 18px;align-items:start}
.cx-del__stick{grid-column:1/6;position:sticky;top:110px}
.cx-del .cx-h{margin-bottom:clamp(22px,4vh,40px)}
.cx-list{list-style:none;border-top:1px solid var(--line)}
.cx-list li{display:flex;gap:18px;align-items:baseline;padding:15px 0;border-bottom:1px solid var(--line);font-family:Frama;font-weight:700;font-size:clamp(19px,1.6vw,26px);letter-spacing:-.01em}
.cx-list i{font-style:normal;font-weight:100;font-size:.72em;color:var(--coral);min-width:2ch}
.cx-del__media{grid-column:7/13;display:flex;flex-direction:column;gap:14px}
.cx-del__media .is-tall{aspect-ratio:4/5}
.cx-del__media .is-sq{aspect-ratio:1}

/* web / platform (only when the project had one) */
.cx-web{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:4vw;align-items:center}
.cx-device{position:relative;border-radius:18px;background:#1A1622;padding:34px 12px 12px;box-shadow:0 40px 70px -40px rgba(13,13,18,.6)}
.cx-device>span{position:absolute;top:14px;width:9px;height:9px;border-radius:50%;background:rgba(241,236,225,.25)}
.cx-device>span:nth-child(1){left:16px}.cx-device>span:nth-child(2){left:31px}.cx-device>span:nth-child(3){left:46px}
.cx-device .is-screen{aspect-ratio:16/10;border-radius:8px}

/* system in use — horizontal strip moved by scroll */
.cx-strip{padding-top:clamp(80px,15vh,170px);overflow:hidden}
.cx-strip__head{display:flex;justify-content:space-between;align-items:flex-end;gap:18px 40px;flex-wrap:wrap;padding:0 var(--g);max-width:1680px;margin:0 auto}
.cx-strip .cx-h{font-size:clamp(28px,3.4vw,58px);max-width:18ch;text-align:right}
.cx-strip__win{margin-top:clamp(28px,5vh,56px);overflow:hidden}
.cx-track{list-style:none;display:flex;gap:14px;padding:0 var(--g);width:max-content;will-change:transform}
.cx-track li{flex:0 0 clamp(220px,24vw,380px);aspect-ratio:3/4;border-radius:var(--r);overflow:hidden;background:#E2DACB}
.cx-track li>*{width:100%;height:100%;display:block;object-fit:cover;background-repeat:no-repeat}

/* 06 VÝSLEDOK — numbers + testimonial card */
.cx-res__grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(18px,3vw,48px);align-items:stretch}
.cx-metrics{list-style:none;display:flex;flex-direction:column}
.cx-metrics li{padding:18px 0 22px;border-top:1px solid var(--ink)}
.cx-metrics b{display:block;font-family:Frama;font-weight:700;font-size:clamp(50px,5.6vw,100px);line-height:1;letter-spacing:-.01em}
.cx-metrics span{display:block;margin-top:8px;font-size:15px;opacity:.7}
.cx-quote{margin:0;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);background:var(--night);color:var(--paper);border-radius:var(--r);overflow:hidden}
.cx-quote__img{position:relative;min-height:360px}
.cx-quote__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cx-quote__txt{padding:clamp(24px,2.6vw,42px);display:flex;flex-direction:column;justify-content:space-between;gap:28px}
.cx-quote .cx-mini{color:var(--lilac);opacity:1}
.cx-quote blockquote{font-family:Frama;font-weight:700;font-size:clamp(21px,1.8vw,30px);line-height:1.22;letter-spacing:-.005em}
.cx-quote figcaption{display:flex;align-items:center;gap:12px;font-size:14px;line-height:1.35}
.cx-quote figcaption i{width:44px;height:44px;border-radius:50%;background:var(--coral);color:var(--paper);display:flex;align-items:center;justify-content:center;font-style:normal;font-family:Frama;font-weight:700;flex-shrink:0}
.cx-quote figcaption b{display:block;font-family:Frama}
.cx-quote figcaption span{opacity:.75}.cx-quote figcaption b{opacity:1}

/* team credits */
.cx-team ul{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(18px,3vw,48px);margin-top:20px}
.cx-team li{display:flex;justify-content:space-between;align-items:baseline;gap:18px;padding:18px 0;border-top:1px solid var(--line)}
.cx-team span{font-size:14px;opacity:.6}
.cx-team b{display:inline-flex;align-items:center;gap:8px;font-family:Frama;font-weight:700;font-size:18px;transition:transform .5s var(--ease)}
.cx-team b .seal{color:var(--coral);opacity:0;transform:scale(.4);transition:opacity .4s,transform .5s var(--ease)}
.cx-team li:hover b .seal{opacity:1;transform:none}

/* CTA — dark card + coral side card */
.cx-cta{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,.36fr);gap:14px;padding:clamp(90px,16vh,180px) var(--g) 0;max-width:1680px;margin:0 auto}
.cx-cta__main{background:var(--night);color:var(--paper);border-radius:calc(var(--r) + 6px);padding:clamp(28px,4.4vw,72px);min-height:clamp(380px,38vw,560px);display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;gap:28px}
.cx-cta__main h2{font-size:clamp(42px,5.8vw,104px);font-weight:700;line-height:1}
.cx-cta__main h2 span{color:var(--lilac)}
.cx-cta__main p{opacity:.72;max-width:36ch}
.cx-cta__side{background:var(--coral);color:var(--paper);border-radius:calc(var(--r) + 6px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:28px;font-family:Frama;font-weight:700;font-size:20px;transition:background .5s var(--ease)}
.cx-cta__side svg{width:min(52%,180px);aspect-ratio:1;transition:transform .9s var(--ease)}
.cx-cta__side:hover svg{transform:scale(.86)}
.cx-cta__side span::after{content:"→";display:inline-block;margin-left:.35em;transition:transform .5s var(--ease)}
.cx-cta__side:hover span::after{transform:translateX(5px)}

/* NEXT PROJECT — pinned coral panel, name rises, ring fills, then we move on */
.cx-next{position:relative;height:200vh;background:var(--coral);color:var(--paper);margin-top:clamp(90px,16vh,180px)}
.cx-next__pin{position:sticky;top:0;height:100vh;height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(18px,3vh,30px);overflow:hidden}
.cx-next__k{position:absolute;top:clamp(84px,13vh,120px);left:0;right:0;text-align:center;font-size:12px;letter-spacing:.16em;text-transform:uppercase}
.cx-next__thumb{display:block;width:clamp(220px,30vw,460px);aspect-ratio:16/10;border-radius:18px;overflow:hidden;box-shadow:0 40px 80px -40px rgba(15,9,32,.55);transform:scale(.7) rotate(-4deg);will-change:transform;margin-top:-10vh}
.cx-next__thumb img{width:100%;height:100%;object-fit:cover;display:block}
.cx-next__go{display:flex;align-items:center;gap:12px;font-size:13px;letter-spacing:.08em;text-transform:uppercase}
.cx-next__pct{font-family:Frama;font-weight:700;font-size:15px;letter-spacing:0;font-variant-numeric:tabular-nums;min-width:4ch}
.cx-ring{width:30px;height:30px;transform:rotate(-90deg)}
.cx-ring circle{fill:none;stroke:rgba(241,236,225,.35);stroke-width:3}
.cx-ring .cx-ring__v{stroke:var(--paper);stroke-dasharray:100;stroke-dashoffset:100}
.cx-next__name{position:absolute;left:0;right:0;bottom:-.1em;text-align:center;white-space:nowrap;font-family:Frama;font-weight:700;line-height:1;letter-spacing:-.01em;font-size:clamp(56px,min(19vw,calc(150vw / var(--len,8))),340px);transform:translate3d(0,78%,0);will-change:transform}

/* wipe between projects */
.cx-wipe{position:fixed;inset:0;z-index:300;background:var(--night);color:var(--coral);display:flex;align-items:center;justify-content:center;pointer-events:none;transform:scaleY(0);transform-origin:50% 100%;transition:transform .65s var(--ease)}
.cx-wipe svg{width:64px;height:64px;opacity:.9}
.cx-wipe.is-on{transform:none}
.cx-arrive .cx-wipe{transform:none;transition:none}
.cx-arrive.cx-arrived .cx-wipe{transform:scaleY(0);transform-origin:50% 0;transition:transform .85s var(--ease) .1s}

/* chapter pill */
.cx-toc{position:fixed;left:50%;bottom:18px;z-index:40;transform:translate(-50%,24px);opacity:0;pointer-events:none;transition:opacity .5s var(--ease),transform .6s var(--ease);max-width:calc(100vw - 32px)}
.cx-toc.is-on{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.cx-toc__in{position:relative;display:flex;gap:2px;padding:5px;border-radius:99px;background:rgba(15,9,32,.88);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);overflow-x:auto;scrollbar-width:none;box-shadow:0 18px 40px -20px rgba(15,9,32,.6)}
.cx-toc__in::-webkit-scrollbar{display:none}
.cx-toc a{position:relative;z-index:1;padding:10px 16px;border-radius:99px;font-size:13px;color:var(--paper);opacity:.62;white-space:nowrap;transition:color .4s,opacity .4s}
.cx-toc a:hover{opacity:1}
.cx-toc a.on{color:var(--ink);opacity:1}
.cx-toc__pill{position:absolute;left:0;top:5px;bottom:5px;width:0;border-radius:99px;background:var(--paper);transition:transform .55s var(--ease),width .55s var(--ease)}

/* reading rail */
.cx-rail{position:fixed;right:calc(var(--g) * .6);top:50%;height:24vh;width:1px;transform:translateY(-50%);background:rgba(255,255,255,.35);mix-blend-mode:difference;z-index:30;pointer-events:none}
.cx-rail i{position:absolute;left:-3px;top:0;width:7px;height:7px;border-radius:50%;background:#fff}

/* reveal */
.cx .rv{opacity:0;transform:translateY(30px);transition:opacity .9s var(--ease) var(--d,0s),transform 1s var(--ease) var(--d,0s)}
.cx .rv.in{opacity:1;transform:none}

.cx-par video,.cx-cover video,.cx-track video,.cx-quote__img video{width:100%;height:100%;object-fit:cover;display:block}
.cx-quote__img video{position:absolute;inset:0}
.cx-res__grid.is-solo,.cx-res__grid.is-quote{grid-template-columns:1fr}
.cx-res__grid.is-solo .cx-metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));column-gap:clamp(18px,3vw,48px)}
.cx-quote blockquote.is-long{font-size:clamp(18px,1.45vw,24px);line-height:1.3}
/* curated tiles: own ratio, never cropped; widgets sit on a background */
.cx-tile{position:relative;overflow:hidden;border-radius:var(--r);background:#E2DACB}
.cx-tile>img,.cx-tile>video{display:block;width:100%;height:100%;object-fit:cover}
.cx-tile.is-pad{display:flex;align-items:center;justify-content:center;gap:4%;padding:8%}
.cx-tile.is-pad>img{width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;border-radius:6px;box-shadow:0 34px 60px -32px rgba(2,48,25,.5);transition:transform 1s var(--ease)}
.cx-tile.is-pad.is-tight{padding:4.5%}
.cx-tile.is-duo>img{max-width:46%}
.cx-tile.is-duo.is-stack{flex-direction:column}
.cx-tile.is-duo.is-stack>img{max-width:86%;max-height:46%}
.cx-tile.is-duo:hover>img:first-child{transform:translateY(-6px) rotate(-1.2deg)}
.cx-tile.is-duo:hover>img:last-child{transform:translateY(6px) rotate(1.2deg)}
.cx-tile.is-icon{flex-direction:column;justify-content:flex-start;gap:clamp(10px,1.2vw,16px);padding:16% 8% 8%}
.ic-rings{position:absolute;left:50%;top:31%;width:150%;aspect-ratio:1;transform:translate(-50%,-50%);background:repeating-radial-gradient(circle,rgba(255,255,255,.2) 0 1px,transparent 1.5px 7%);-webkit-mask:radial-gradient(circle,#000 18%,transparent 62%);mask:radial-gradient(circle,#000 18%,transparent 62%);pointer-events:none}
.cx-appicon{position:relative;width:30%;aspect-ratio:1;border-radius:23%;background:#fff;display:grid;place-items:center;overflow:hidden;box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 40px 70px -26px rgba(52,24,120,.6),0 12px 24px -12px rgba(52,24,120,.35);animation:sc-float 7s ease-in-out infinite}
.cx-appicon::after{content:"";position:absolute;inset:0;background:linear-gradient(160deg,rgba(255,255,255,0) 55%,rgba(0,0,0,.05) 100%);pointer-events:none}
.cx-appicon svg{width:80%;height:80%}
.ic-name{color:#fff;font-weight:500;font-size:clamp(14px,1.3vw,20px);letter-spacing:-.01em;text-shadow:0 2px 12px rgba(52,24,120,.25)}
.ic-notes{position:absolute;left:8%;right:8%;bottom:7%;display:flex;flex-direction:column;gap:8px}
.ic-n{display:flex;align-items:center;gap:clamp(10px,1vw,14px);padding:clamp(10px,.9vw,13px) clamp(12px,1.1vw,16px);border-radius:clamp(16px,1.4vw,22px);background:rgba(255,255,255,.66);-webkit-backdrop-filter:blur(20px) saturate(1.6);backdrop-filter:blur(20px) saturate(1.6);box-shadow:0 18px 36px -22px rgba(52,24,120,.55),inset 0 0 0 1px rgba(255,255,255,.5);color:#16161d;opacity:0;transform:translate3d(0,-12px,0) scale(.97)}
.ic-ico{flex-shrink:0;width:clamp(30px,2.7vw,40px);aspect-ratio:1;border-radius:24%;background:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 10px -4px rgba(0,0,0,.22);color:#1ED23B}
.ic-ico svg{display:block;width:78%;height:78%}
.ic-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;font-size:clamp(11px,.92vw,13.5px);line-height:1.3}
.ic-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:.82em;letter-spacing:.06em;text-transform:uppercase;color:rgba(22,22,29,.55)}
.ic-top time{letter-spacing:0;text-transform:none}
.ic-h{font-weight:600}
.ic-b{color:rgba(22,22,29,.75);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cx-tile.is-icon.in .ic-n{animation:ic-drop .8s var(--ease) forwards;animation-delay:calc(.7s + var(--i) * 1.3s)}
@keyframes ic-drop{to{opacity:1;transform:none}}
.cx-tile.is-pad.is-cut>img{box-shadow:none;border-radius:0;filter:drop-shadow(0 30px 40px rgba(2,48,25,.22))}
.cx-tile.is-scatter{overflow:hidden}
.cx-tile.is-scatter>img{position:absolute;height:auto;object-fit:fill;filter:drop-shadow(0 26px 34px rgba(2,48,25,.32));opacity:0;transform:translate3d(0,30px,0) scale(.82) rotate(var(--r));transition:transform .6s var(--ease)}
.cx-tile.is-scatter.in>img{animation:bn-pop .9s cubic-bezier(.34,1.56,.64,1) forwards;animation-delay:calc(.15s + var(--i) * 110ms)}
.cx-tile.is-scatter>img:hover{z-index:5}
@keyframes bn-pop{to{opacity:1;transform:rotate(var(--r))}}
.cx-tile.is-posts{display:flex;align-items:center;justify-content:center}
.po{position:absolute;width:32%;aspect-ratio:4/5;border-radius:clamp(10px,1.1vw,18px);padding:7% 6%;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 40px 60px -30px rgba(40,20,90,.55);transform:translateX(calc((var(--i) - 1) * 74%)) rotate(calc((var(--i) - 1) * 6deg));transition:transform .9s var(--ease)}
.po:nth-child(2){z-index:2;transform:translateY(-4%) scale(1.06)}
.cx-tile.is-posts:hover .po:nth-child(1){transform:translateX(-84%) rotate(-9deg)}
.cx-tile.is-posts:hover .po:nth-child(3){transform:translateX(84%) rotate(9deg)}
.po>svg:first-child{width:58%;height:auto;aspect-ratio:1;margin:auto auto 0;color:#fff}
.po-l{margin:12% auto auto;color:#fff;font-weight:500;font-size:clamp(11px,1.05vw,17px)}
.po-t{font-weight:700;font-size:clamp(13px,1.45vw,24px);line-height:1.04;letter-spacing:-.01em}
.po-t em{font-style:normal;color:#1ED23B}
.po-s{margin-top:8%;font-size:clamp(9px,.85vw,13px);line-height:1.35;opacity:.75}
.po-p{align-self:flex-start;white-space:nowrap;margin-top:10%;padding:5px 10px;border-radius:6px;background:#023019;color:#fff;font-size:clamp(9px,.8vw,12px);transform:rotate(-3deg)}
.po-m{width:15%;aspect-ratio:1;margin-top:auto;margin-left:auto;color:#1ED23B}
.cx-tile.is-pattern{display:grid;grid-template-columns:repeat(6,1fr);gap:4%;padding:6%;align-content:center;color:#fff}
.cx-tile.is-pattern svg{width:100%;height:auto;opacity:.95}
.cx-tile.is-pattern svg:nth-child(5n+3){color:#023019}
.pt-s{transform-origin:60px 60px;transform:rotate(var(--r));animation:pt-turn var(--t) linear infinite}
@keyframes pt-turn{from{transform:rotate(var(--r))}to{transform:rotate(calc(var(--r) + 360deg))}}
.cx-gal .cx-tile.is-wide{grid-column:1/-1}
.cx-track li.is-fixed{flex:0 0 auto;width:auto;height:clamp(220px,28vw,440px)}
.cx-quote__img.is-own{background:#fff;min-height:0}
.cx-quote__img.is-own img{object-fit:contain}

/* testimonial visual */
.cx-quote__img.is-art{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(18px,2.4vw,32px);padding:clamp(28px,4vw,56px);min-height:clamp(320px,30vw,460px);overflow:hidden}
.cx-quote__img.is-art svg{width:min(46%,220px);overflow:visible}
.qa-spin{transform-origin:60px 60px;animation:qa-spin 24s linear infinite}
@keyframes qa-spin{to{transform:rotate(360deg)}}
.cx-quote__img.is-art p{max-width:16ch;text-align:center;color:#fff;font-weight:600;font-size:clamp(20px,1.9vw,30px);line-height:1.12;letter-spacing:-.01em}

/* hero scene: the live product floating on the brand colour */
.cx-scene{position:absolute;inset:0;overflow:hidden}
.sc-mark{position:absolute;width:58%;aspect-ratio:1;right:-10%;top:-16%;color:#fff;opacity:.16}
.sc-win{position:absolute;left:7%;top:11%;width:60%;border-radius:clamp(8px,.9vw,14px);background:#fff;padding-top:clamp(14px,1.6vw,26px);overflow:hidden;box-shadow:0 60px 100px -50px rgba(2,48,25,.75)}
.sc-win>span{position:absolute;top:clamp(5px,.6vw,10px);width:clamp(5px,.5vw,8px);aspect-ratio:1;border-radius:50%;background:#E3E6E4}
.sc-win>span:nth-child(1){left:1.6%}.sc-win>span:nth-child(2){left:3.2%}.sc-win>span:nth-child(3){left:4.8%}
.cx-scene img{height:auto;object-fit:fill}
.cx-scene .sc-win img{display:block;width:100%}
.cx-scene .sc-f{position:absolute;height:auto;filter:drop-shadow(0 30px 40px rgba(2,48,25,.35));animation:sc-float 7s ease-in-out infinite;animation-delay:calc(var(--i) * -2.4s)}
.cx-scene .sc-a{width:21%;right:10%;top:14%}
.cx-scene .sc-b{width:25%;left:49%;top:71%}
@keyframes sc-float{50%{transform:translate3d(0,-10px,0)}}

/* own images keep their own proportions */
.cx-del__media .is-own{aspect-ratio:auto}

/* palette swatches start as wireframe placeholders and flood with colour one after another */
.cx-pal .cx-sw::after{content:"";position:absolute;inset:0;pointer-events:none;border:1px dashed rgba(15,9,32,.22);background:linear-gradient(to top right,transparent calc(50% - .6px),rgba(15,9,32,.16) 50%,transparent calc(50% + .6px)),#EAE3D6;clip-path:circle(150% at 100% 0);transition:clip-path 1.1s var(--ease) calc(var(--k,0) * 120ms + .25s)}
.cx-pal.in .cx-sw::after{clip-path:circle(0% at 100% 0)}
.cx-tones{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);grid-auto-rows:auto;min-height:0;margin-top:10px}
.cx-tones li,.cx-tones li:first-child{grid-column:auto;min-height:clamp(130px,11vw,170px)}

/* type card in the client's own face */
.cx-type .cx-type__aa,.cx-type .cx-glyphs li{font-family:var(--tf,Frama)}
.cx-type .cx-type__aa{font-weight:600}

/* logo construction: dark stage, five states, then the lockup on the brand colour */
.cx-mk{display:block;margin-top:clamp(28px,5vh,56px);border-radius:var(--r);overflow:hidden;background:var(--mk-d);color:#F6F9F8}
.cx-mk__stage{position:relative;aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;overflow:hidden;container-type:inline-size}
.cx-mk__stage::before{content:"";position:absolute;inset:0;background:var(--mk-a);clip-path:circle(0% at 50% 50%);transition:clip-path 1.2s var(--ease)}
.cx-mk[data-s="6"] .cx-mk__stage::before{clip-path:circle(80% at 50% 50%)}
.cx-mk__svg{position:relative;width:48%;overflow:visible;transition:transform 1.2s var(--ease)}
.mk-grid line{stroke:rgba(246,249,248,.16);stroke-width:.22;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.3s var(--ease) calc(var(--i) * 45ms),opacity .6s}
.mk-guide line,.mk-guide circle,.mk-arc{fill:none;stroke:#BC88FF;stroke-width:.32;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.2s var(--ease),opacity .6s}
.mk-guide circle{transition-delay:.25s}
.mk-guide text{font-family:Frama;font-size:3.6px;fill:#BC88FF;opacity:0;transition:opacity .5s .7s}
.mk-spokes path{fill:var(--mk-a);transform-origin:60px 60px;transform:rotate(var(--a)) scale(0);transition:transform .9s var(--ease) calc(var(--i) * 75ms),fill .8s}
.mk-hub{fill:var(--mk-a);transform-origin:60px 60px;transform:scale(0);transition:transform .7s var(--ease),fill .8s}
.mk-frame{fill:none;stroke:var(--mk-a);stroke-width:6;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.3s var(--ease),stroke .8s}
.cx-mk:is([data-s="1"],[data-s="2"],[data-s="3"],[data-s="4"],[data-s="5"],[data-s="6"]) .mk-grid line{stroke-dashoffset:0}
.cx-mk:is([data-s="2"],[data-s="3"],[data-s="4"],[data-s="5"],[data-s="6"]) :is(.mk-guide line,.mk-guide circle,.mk-arc){stroke-dashoffset:0}
.cx-mk:is([data-s="2"],[data-s="3"],[data-s="4"]) .mk-guide text{opacity:1}
.cx-mk:is([data-s="3"],[data-s="4"],[data-s="5"],[data-s="6"]) .mk-spokes path{transform:rotate(var(--a)) scale(1)}
.cx-mk:is([data-s="3"],[data-s="4"],[data-s="5"],[data-s="6"]) .mk-hub{transform:scale(1)}
.cx-mk:is([data-s="4"],[data-s="5"],[data-s="6"]) .mk-frame{stroke-dashoffset:0}
.cx-mk:is([data-s="5"],[data-s="6"]) :is(.mk-grid,.mk-guide){opacity:0;transition:opacity .6s}
.cx-mk:is([data-s="5"],[data-s="6"]) .cx-mk__svg{transform:translateX(-55%) scale(.29)}
.cx-mk[data-s="6"] :is(.mk-spokes path,.mk-hub){fill:#fff}
.cx-mk[data-s="6"] .mk-frame{stroke:#fff}
.cx-mk__word{position:absolute;left:31.5cqw;top:50%;transform:translateY(-52%);display:flex;font-family:var(--tf,'Cabinet Grotesk'),Frama;font-weight:500;font-size:11.6cqw;line-height:1;letter-spacing:-.02em;color:#fff;overflow:hidden;padding:.08em 0;pointer-events:none}
.cx-mk__word span{display:inline-block;transform:translate3d(0,110%,0);transition:transform .8s var(--ease) calc(var(--i) * 40ms + .35s)}
.cx-mk:is([data-s="5"],[data-s="6"]) .cx-mk__word span{transform:none}
.cx-mk__k{position:absolute;left:clamp(16px,2vw,30px);top:clamp(14px,1.8vw,26px);font-size:11px;letter-spacing:.16em;text-transform:uppercase;opacity:.6}
.cx-mk__cap{position:absolute;right:clamp(16px,2vw,30px);bottom:clamp(14px,1.8vw,26px);max-width:30ch;text-align:right;font-size:13px;line-height:1.45;opacity:0;transition:opacity .8s .4s}
.cx-mk[data-s="6"] .cx-mk__cap{opacity:.9}
.cx-mk__again{position:absolute;left:clamp(16px,2vw,30px);bottom:clamp(14px,1.8vw,26px);padding:9px 14px;border-radius:99px;background:rgba(2,48,25,.5);color:#fff;font-size:12px;letter-spacing:.06em;opacity:0;pointer-events:none;transition:opacity .5s,background .3s;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.cx-mk[data-s="6"] .cx-mk__again{opacity:1;pointer-events:auto}
.cx-mk__again:hover{background:rgba(2,48,25,.8)}

/* lockup variants, drawn live (no raster logo) */
.cx-locks{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cx-locks figure{position:relative;margin:0;border-radius:var(--r);min-height:170px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.cx-locks figure:first-child{box-shadow:inset 0 0 0 1px rgba(15,9,32,.08)}
.cx-lock{display:flex;align-items:center;gap:.22em;font-size:clamp(22px,2.2vw,38px);font-weight:500;letter-spacing:-.02em;transition:transform .8s var(--ease)}
.cx-lock svg{width:1.2em;height:1.2em;flex-shrink:0}
.cx-locks figure:hover .cx-lock{transform:scale(1.06)}
.cx-locks figcaption{position:absolute;left:16px;bottom:12px;font-family:Frama;font-size:10px;letter-spacing:.14em;text-transform:uppercase;opacity:.6}

/* wireframe → design: pinned browser frame, the design wipes over the wireframe as the page scrolls inside */
.cx-morph{position:relative;height:420vh;margin-top:clamp(80px,15vh,170px)}
.cx-morph__pin{position:sticky;top:0;height:100vh;height:100svh;display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:4vw;align-items:center;padding:96px var(--g) 36px;max-width:1680px;margin:0 auto}
.cx-morph .cx-lbl{margin-bottom:18px}
.cx-morph__frame{position:relative;height:min(78vh,calc(100svh - 150px));border-radius:18px;background:#1A1622;padding:30px 10px 10px;box-shadow:0 40px 70px -40px rgba(13,13,18,.6)}
.cx-morph__frame>span{position:absolute;top:12px;width:8px;height:8px;border-radius:50%;background:rgba(241,236,225,.25)}
.cx-morph__frame>span:nth-child(1){left:14px}.cx-morph__frame>span:nth-child(2){left:28px}.cx-morph__frame>span:nth-child(3){left:42px}
.cx-morph__view{--q:0%;position:relative;height:100%;border-radius:8px;overflow:hidden;background:#fff}
.cx-morph__view img{position:absolute;left:0;top:0;width:100%;height:auto;display:block;will-change:transform}
.cx-morph__final{clip-path:inset(0 0 100% 0)}

.cx-morph__line{position:absolute;left:0;right:0;top:0;height:0;pointer-events:none;will-change:transform}
.cx-morph__line::before{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;background:var(--coral);box-shadow:0 0 0 5px rgba(255,79,46,.12)}
.cx-morph__line b{position:absolute;right:12px;top:0;transform:translateY(-50%);padding:6px 11px;border-radius:99px;background:var(--coral);color:var(--paper);font-size:10px;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}

/* short morph: the frame takes the first screen's own ratio */
.cx-morph.is-short{height:200vh}
.cx-morph.is-short .cx-morph__frame{height:auto}
.cx-morph.is-short .cx-morph__view{height:auto;aspect-ratio:var(--mr,16/10)}
.cx-morph.is-short .cx-morph__view img{height:100%}
.cx-morph__line{transition:opacity .3s}

/* bento of landing-page pieces */
.cx-bento__grid{display:flex;flex-direction:column;gap:12px;margin-top:clamp(28px,5vh,56px)}
.cx-bento__row{display:flex;gap:12px}
.cx-bento__row>.cx-tile{flex:var(--f,1) 1 0;min-width:0;height:100%}
.cx-bento__row>.cx-tile[data-f="2"]{--f:2}.cx-bento__row>.cx-tile[data-f="3"]{--f:3}.cx-bento__row>.cx-tile[data-f="4"]{--f:4}.cx-bento__row>.cx-tile[data-f="5"]{--f:5}.cx-bento__row>.cx-tile[data-f="6"]{--f:6}.cx-bento__row>.cx-tile[data-f="7"]{--f:7}
.cx-tile.is-flat>img{box-shadow:none;border-radius:0}
.cx-bento .cx-tile.is-pad:hover>img{transform:translateY(-4px)}

/* booking steps in motion */
.cx-steps{display:flex;flex-direction:column;padding:clamp(20px,3vw,48px) clamp(18px,4vw,64px);color:#fff}
.cx-steps h3{text-align:center;font-weight:600;font-size:clamp(22px,2.4vw,40px);letter-spacing:-.01em;line-height:1.1;margin-bottom:clamp(18px,2.6vw,40px)}
.st-stage{flex:1;min-height:0;display:flex;justify-content:center;gap:clamp(20px,5vw,90px)}
.st-forms{position:relative;height:100%;aspect-ratio:952/1604;flex-shrink:0}
.st-forms img{position:absolute;inset:0;width:100%;height:auto;opacity:0;transform:translate3d(0,14px,0);transition:opacity .5s ease,transform .7s var(--ease);filter:drop-shadow(0 30px 40px rgba(2,48,25,.28))}
.st-forms img.on{opacity:1;transform:none}
.st-cards{list-style:none;position:relative;flex:0 1 46%;height:100%}
.st-cards li{position:absolute;display:flex;align-items:center;gap:clamp(10px,1.2vw,18px);width:min(100%,430px);padding:clamp(10px,1vw,16px);border-radius:clamp(12px,1.2vw,20px);background:#fff;color:#023019;box-shadow:0 24px 40px -24px rgba(2,48,25,.45);opacity:0;transform:translate3d(0,24px,0) scale(.86) rotate(var(--r));transition:opacity .35s ease,transform .7s cubic-bezier(.34,1.56,.64,1),box-shadow .5s}
.st-cards li:nth-child(1){left:2%;top:4%;--r:-3deg}
.st-cards li:nth-child(2){left:16%;top:28%;--r:2deg}
.st-cards li:nth-child(3){left:0;top:53%;--r:-1.5deg}
.st-cards li:nth-child(4){left:12%;top:77%;--r:2.5deg}
.st-cards li.on{opacity:1;transform:rotate(var(--r))}
.st-cards li.now{transform:rotate(0deg) scale(1.04);box-shadow:0 34px 60px -24px rgba(2,48,25,.6)}
.st-cards img{width:clamp(40px,3.6vw,64px);height:auto;flex-shrink:0}
.st-cards span{font-size:clamp(14px,1.25vw,20px);line-height:1.2;font-weight:500}

/* deliverables as a bento */
.cx-delb__head{display:flex;justify-content:space-between;align-items:flex-end;gap:18px;flex-wrap:wrap}
.cx-delb__head .cx-lbl{margin:0}
.cx-delb .cx-h{order:-1}
.cx-list--2{display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(18px,3vw,48px);margin-top:clamp(22px,4vh,40px)}

/* app flow player: one large screen on a calm panel */
.cx-flow__panel{margin-top:clamp(28px,5vh,56px);border-radius:calc(var(--r) + 6px);padding:clamp(18px,5vw,84px) clamp(14px,7vw,120px) clamp(16px,2.6vw,38px);background:linear-gradient(160deg,#E2F6E5,#F6F9F8 70%)}
.cx-flow__dev{position:relative;border-radius:16px;background:#fff;padding:28px 0 0;overflow:hidden;box-shadow:0 50px 90px -50px rgba(2,48,25,.45),0 0 0 1px rgba(2,48,25,.06)}
.cx-flow__dev>span{position:absolute;top:11px;width:8px;height:8px;border-radius:50%;background:#E3E6E4}
.cx-flow__dev>span:nth-child(1){left:14px}.cx-flow__dev>span:nth-child(2){left:28px}.cx-flow__dev>span:nth-child(3){left:42px}
.cx-flow__scr{position:relative;aspect-ratio:16/9;overflow:hidden;background:#fff;border-top:1px solid #EEF0EF}
.cx-flow__scr video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .5s ease}
.cx-flow__scr video.on{opacity:1}
.cx-flow__scr img{position:absolute;left:0;top:0;width:100%;height:auto;display:block;opacity:0;transform:translate3d(0,0,0);transition:opacity .3s ease,transform 0s .3s}
.cx-flow__scr img.on{opacity:1;transition:opacity .5s ease .3s,transform 2.6s cubic-bezier(.45,0,.25,1) 1s}
.cx-flow__bar{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:clamp(16px,2vw,26px)}
.cx-flow__now{display:flex;align-items:baseline;gap:12px;font-family:Frama;font-weight:700;font-size:clamp(15px,1.3vw,20px);color:var(--fl-ink,var(--ink))}
.cx-flow__now i{font-style:normal;font-weight:100;color:var(--coral)}
.cx-flow__tabs{list-style:none;display:flex;gap:6px}
.cx-flow__tabs button{display:flex;align-items:center;width:clamp(26px,3.6vw,54px);height:20px}
.cx-flow__tabs em{position:relative;display:block;width:100%;height:3px;border-radius:3px;background:rgba(2,48,25,.14);overflow:hidden}
.cx-flow__tabs em::after{content:"";position:absolute;inset:0;background:var(--coral);transform:scaleX(0);transform-origin:0 50%}
.cx-flow__tabs .on em::after{animation:cx-bar var(--dur,3.6s) linear forwards}
@keyframes cx-bar{to{transform:none}}

/* live UI components in the client's colours */
.cx-kit__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:clamp(28px,5vh,56px)}
.cx-kit__c{display:flex;flex-direction:column;gap:18px;min-height:240px;padding:clamp(18px,1.8vw,26px);border-radius:var(--r);background:var(--k-bg);color:var(--k-d);box-shadow:inset 0 0 0 1px rgba(2,48,25,.07)}
.kc-k{font-family:Frama;font-size:11px;letter-spacing:.16em;text-transform:uppercase;opacity:.6}
.kc-btn{grid-column:span 2}
.kc-btn div{display:flex;flex-wrap:wrap;gap:10px;margin-top:auto}
.kb{font:inherit;font-weight:600;font-size:15px;padding:13px 20px;border-radius:10px;transition:transform .35s var(--ease),filter .3s,background .3s}
.kb:hover{transform:translateY(-2px)}
.kb:active{transform:translateY(0) scale(.97)}
.kb--a{background:var(--k-a);color:#fff}.kb--a:hover{filter:brightness(.94)}
.kb--o{background:#fff;color:var(--k-a);box-shadow:inset 0 0 0 1.5px var(--k-a)}
.kb--d{background:var(--k-d);color:#fff}
.kb--t{color:#E5484D;padding-inline:10px}
.kc-slot{grid-column:span 2;grid-row:span 2}
.kc-days,.kc-times{list-style:none;display:grid;gap:8px}
.kc-days{grid-template-columns:repeat(5,minmax(0,1fr))}
.kc-times{grid-template-columns:repeat(4,minmax(0,1fr));margin-top:auto}
.kc-days li,.kc-times li{background:#fff;border-radius:10px;text-align:center;font-weight:700;transition:background .4s var(--ease),color .4s,transform .4s var(--ease)}
.kc-days li{padding:12px 0 10px;font-size:clamp(18px,1.6vw,24px)}
.kc-days small{display:block;font-size:11px;font-weight:500;opacity:.6;margin-bottom:2px}
.kc-times li{padding:12px 0;font-size:14px}
.kc-days .on,.kc-times .on{background:var(--k-a);color:#fff;transform:scale(1.04)}
.kc-days .on small{opacity:.85}
.kc-days .off,.kc-times .off{opacity:.32}
.kc-card{margin-top:auto;display:flex;flex-direction:column;align-items:center;gap:6px;padding:20px 16px;border-radius:16px;background:#fff;text-align:center}
.kc-card svg{width:42px;height:42px;margin-bottom:6px}
.kc-card circle{fill:var(--k-a);transform-origin:20px 20px;transform:scale(0);transition:transform .6s var(--ease) .3s}
.kc-card path{fill:none;stroke:#fff;stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .6s var(--ease) .8s}
.kc-ok.in circle{transform:none}.kc-ok.in path{stroke-dashoffset:0}
.kc-card b{font-size:17px}
.kc-card span{font-size:13px;opacity:.6}
.kc-cal{display:flex;align-items:center;gap:10px;margin-top:10px;padding:7px 14px 7px 7px;border-radius:10px;background:var(--k-a);color:#fff;font-size:13px;font-weight:600}
.kc-cal i{font-style:normal;font-weight:800;font-size:14px;color:var(--k-d);background:#fff;border-radius:6px;border-top:4px solid #E5484D;padding:2px 6px}
.kc-phone{margin-top:auto;border-radius:18px;padding:14px 12px 12px;background:linear-gradient(160deg,#BC88FF,#75BBFF);display:flex;flex-direction:column;gap:10px}
.kc-bub{background:rgba(255,255,255,.94);border-radius:14px;padding:12px 14px;font-size:13px;line-height:1.45;color:#141414;transform:translate3d(0,-16px,0);opacity:0;transition:transform .8s var(--ease) .5s,opacity .6s .5s}
.kc-bub b{display:block;font-size:12px;margin-bottom:2px}
.kc-sms.in .kc-bub{transform:none;opacity:1}
.kc-time{font-size:11px;color:#fff;opacity:.85;text-align:right}
.kc-tone{min-height:190px}
.kc-tone b{margin-top:auto;font-size:clamp(20px,1.7vw,28px);line-height:1.1;letter-spacing:-.01em}

@media (max-width:1100px){
  .cx-over__main{grid-column:1/-1}.cx-side{grid-column:1/-1;position:static;margin-top:40px}
  .cx-side dl{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
}
@media (max-width:900px){.cx-rail{display:none}}
@media (max-width:820px){
  .cx-top{padding:14px var(--g)}
  .cx-top nav a.cx-back{display:inline}
  .cx-hero{padding-top:110px}
  .cx-cover{aspect-ratio:4/3}
  .cx-head .cx-lbl,.cx-head .cx-mini,.cx-head .cx-body{grid-column:1/-1}
  .cx-gal .is-sq{aspect-ratio:4/5}
  .cx-gal .is-wide{aspect-ratio:4/3}
  .cx-cards{grid-template-columns:1fr}
  .cx-cards li{min-height:230px}
  .cx-strat .cx-h,.cx-strat .cx-body{grid-column:1/-1}
  .cx-band .is-band{aspect-ratio:4/3}
  .cx-pal{grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:auto;min-height:0}
  .cx-pal li{grid-column:auto;min-height:130px}
  .cx-pal li:first-child{grid-column:1/-1;grid-row:auto!important;min-height:190px}
  .cx-pal small{display:none}
  .cx-id__pair{grid-template-columns:1fr}
  .cx-id__pair.is-solo .cx-glyphs{grid-template-columns:repeat(7,minmax(0,1fr))}
  .cx-glyphs{grid-template-columns:repeat(7,minmax(0,1fr))}
  .cx-logo .cx-media{min-height:260px}
  .cx-del__stick,.cx-del__media{grid-column:1/-1}
  .cx-del__stick{position:static}
  .cx-del__media{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:36px}
  .cx-del__media .cx-media:last-child{grid-column:1/-1;aspect-ratio:16/11}
  .cx-del__media .cx-tile{grid-column:1/-1}
  .cx-del__media .is-sq{aspect-ratio:4/5}
  .cx-web{grid-template-columns:1fr}
  .cx-strip .cx-h{text-align:left}
  .cx-res__grid,.cx-quote{grid-template-columns:1fr}
  .cx-quote__img{min-height:0;aspect-ratio:16/10}
  .cx-team ul{grid-template-columns:1fr}
  .cx-cta{grid-template-columns:1fr}
  .cx-cta__main{min-height:0}
  .cx-cta__side{flex-direction:row;justify-content:flex-start;min-height:0;padding:22px 26px}
  .cx-cta__side svg{width:44px}
  .cx-toc{bottom:12px}
  .cx-toc a{padding:9px 13px}
}
@media (max-width:560px){
  .cx-top .btn{display:none}
  .cx-side dl{grid-template-columns:1fr}
  .cx-facts{gap:18px 28px}
}
@media (prefers-reduced-motion:reduce){
  .cx-c,.cx-in,.cx .rv{opacity:1;transform:none;transition:none}
  .cx-down .seal{animation:none}
  .cx-par{transition:none}
  .cx-strip__win{overflow-x:auto}
  .cx-next{height:auto}
  .cx-next__pin{position:relative}
  .cx-next__name{transform:none}
  .cx-next__thumb{transform:none}
  .cx-ring .cx-ring__v{stroke-dashoffset:0}
  .cx-wipe{display:none}
  .cx-toc,.cx-toc__pill,.cx-cards li{transition:none}
}

/* real-project extras on smaller screens */
@media (max-width:1100px){
  .cx-mk{grid-template-columns:1fr}
  .cx-kit__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kc-slot{grid-row:auto}
  .kc-btn{min-height:0}
}
@media (max-width:820px){
  .cx-mk__stage{aspect-ratio:1}
  .cx-head .cx-mini{margin-bottom:14px}
  .cx-tones{grid-auto-flow:row;grid-template-columns:repeat(3,minmax(0,1fr))}
  .cx-tones li,.cx-tones li:first-child{min-height:110px}
  .cx-tones li:first-child{grid-column:auto}
  .cx-locks figure{min-height:120px}
  .cx-lock{font-size:clamp(17px,5vw,26px)}
  .cx-morph__pin{display:flex;flex-direction:column;align-items:stretch;gap:16px;padding:76px var(--g) 18px}
  .cx-morph .cx-lbl{margin-bottom:10px}
  .cx-morph .cx-h3{margin:0 0 6px;font-size:22px}
  .cx-morph .cx-body{display:none}
  .cx-morph__frame{flex:1;min-height:0;height:auto;padding:24px 7px 7px;border-radius:14px}
  .cx-morph__frame>span{top:9px;width:6px;height:6px}
  .cx-morph__frame>span:nth-child(2){left:24px}.cx-morph__frame>span:nth-child(3){left:34px}
  .cx-flow__dev{padding-top:20px;border-radius:12px}
  .cx-flow__dev>span{top:7px;width:6px;height:6px}
  .cx-flow__dev>span:nth-child(2){left:24px}.cx-flow__dev>span:nth-child(3){left:34px}
  .cx-flow__bar{flex-direction:column;align-items:flex-start}
  .cx-morph.is-short{height:170vh}
  .cx-morph.is-short .cx-morph__frame{flex:none}
  .cx-bento__row{flex-direction:column;aspect-ratio:auto!important}
  .cx-bento__row>.cx-tile{flex:none;height:auto;aspect-ratio:4/3}
  .cx-bento__row>.cx-tile:not(.is-pad){aspect-ratio:auto}
  .cx-bento__row>.cx-tile.is-scatter{aspect-ratio:1/1.05}
  .cx-bento__row>.cx-steps{aspect-ratio:auto;padding-bottom:22px}
  .st-stage{flex-direction:column;align-items:center;gap:18px}
  .st-forms{height:auto;width:68%}
  .st-forms img:first-child{position:relative}
  .st-cards{flex:none;width:100%;height:auto;display:grid;gap:8px}
  .st-cards li{position:relative;left:auto!important;top:auto!important;width:100%}
  .cx-list--2{grid-template-columns:1fr}
  .cx-tile.is-pattern{grid-template-columns:repeat(5,1fr)}
  .cx-tile.is-pattern svg:nth-child(n+21){display:none}
  .cx-bento__row>.cx-tile:not(.is-pad)>img{height:auto}
  .cx-morph.is-short .cx-morph__pin{justify-content:center}
  .cx-morph{height:360vh}
  .cx-mk__cap{display:none}
  .sc-win{left:6%;top:9%;width:80%}
  .cx-scene .sc-a{width:29%;right:4%;top:33%}
  .cx-scene .sc-b{width:46%;left:6%;top:72%}
  .sc-mark{width:84%;right:-24%;top:-12%}
  .cx-tile.is-pad{padding:7%}
}
@media (max-width:560px){
  .cx-tones{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cx-gal:has(.cx-tile){grid-template-columns:1fr}
  .cx-locks{grid-template-columns:1fr}
  .cx-kit__grid{grid-template-columns:1fr}
  .kc-btn,.kc-slot{grid-column:auto}
  .kc-tone{min-height:140px}
  .kc-times{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
  .kc-days{gap:6px}
}
@media (prefers-reduced-motion:reduce){
  .cx-pal .cx-sw::after{display:none}
  .cx-morph{height:auto}
  .cx-morph__pin{position:relative;height:auto;min-height:100vh}
  .cx-morph__final{clip-path:none!important}
  .cx-scene .sc-f,.cx-appicon,.qa-spin{animation:none}
  .ic-n{opacity:1;transform:none;animation:none!important}
  .pt-s{animation:none}
  .cx-tile.is-scatter>img{opacity:1;transform:rotate(var(--r));animation:none!important}
  .cx-morph__line{display:none}
  .cx-flow__scr img,.cx-kit *,.cx-mk *{transition:none!important;animation:none!important}
}
/* band and logo show the whole clip at its own ratio (set from the file in project.js) */
.cx-media.is-whole .cx-par{inset:0}
.cx-media.is-whole video,.cx-media.is-whole img{object-fit:contain}
.cx-logo .cx-media.is-whole{flex:none;min-height:0}
/* next project: the thumb takes the cover's own ratio, so nothing is cut */
.cx-next__thumb{aspect-ratio:1600/1240}
/* app flow: arrows either side of the step bars, big enough to hit with a thumb */
.cx-flow__nav{display:flex;align-items:center;gap:10px}
.cx-flow__arr{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;border:1px solid color-mix(in srgb,var(--fl-ink,var(--ink)) 22%,transparent);color:var(--fl-ink,var(--ink));font-size:16px;transition:background .3s,color .3s}
.cx-flow__arr:hover{background:var(--fl-ink,var(--ink));color:var(--paper)}
@media (max-width:820px){
  .cx-flow__bar{flex-direction:column;align-items:stretch;gap:12px}
  .cx-flow__nav{justify-content:space-between}
  .cx-flow__tabs{flex:1;justify-content:center}
  .cx-flow__tabs button{flex:1;width:auto;height:30px}
  .cx-flow__tabs li{flex:1}
  .cx-flow__arr{width:42px;height:42px;flex:0 0 auto}
  .cx-flow__scr{touch-action:pan-y}
  /* chapters: a frosted strip under the header instead of a pill on the browser bar */
  .cx-toc{top:60px;bottom:auto!important;width:calc(100vw - 2 * var(--g));transform:translate(-50%,-14px)}
  .cx-toc.is-on{transform:translate(-50%,0)}
  .cx-toc__in{padding:4px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 14px,#000 calc(100% - 14px),transparent);mask-image:linear-gradient(90deg,transparent,#000 14px,#000 calc(100% - 14px),transparent)}
  .cx-toc a{padding:8px 12px!important;font-size:12px}
  .cx-toc__pill{top:4px;bottom:4px}
}
@media (max-width:820px){.cx-flow__tabs{min-width:0;gap:5px;padding:0 6px}.cx-flow__tabs li{display:flex;min-width:0}.cx-flow__tabs button{width:100%}}
/* opened directly (a link, a search result): the name is there at once; the letter rise plays only when arriving from another study */
html:not(.cx-arrive) .cx-c{transform:none;transition:none}
html:not(.cx-arrive) .cx-in{transition-delay:.05s}
/* plain-HTML study for crawlers and no-JS visitors; with JavaScript the template replaces it straight away */
.cx-static{max-width:760px;padding:140px var(--g) 80px;margin:0 auto}
.cx-static h1{font-size:clamp(48px,8vw,110px);margin:12px 0 20px}
.cx-static p{font-size:18px;line-height:1.55;margin:0 0 14px}
html.js .cx-static{visibility:hidden}
/* phone: a padded cut-out (e.g. the LimeClock steps) takes the full width at its own height, so its small text stays readable */
@media (max-width:820px){
  .cx-bento__row>.cx-tile.is-pad.is-cut{aspect-ratio:auto;padding:5% 3%}
  .cx-bento__row>.cx-tile.is-pad.is-cut>img{width:100%;max-height:none}
}
/* palette: the primary colour leads on the left, the rest stack on the right */
@media (min-width:821px){
  .cx-pal:not(.cx-tones){grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}
  .cx-pal:not(.cx-tones) li{grid-column:2}
  .cx-pal:not(.cx-tones) li:first-child{grid-column:1}
}
/* bento: a row of plain pictures sizes itself from their ratios (widths ∝ ratios, so every picture is shown whole) */
@media (min-width:821px){
  .cx-bento__row.is-natural{aspect-ratio:auto!important}
  .cx-bento__row.is-natural>.cx-tile{flex:var(--ar) 1 0!important;aspect-ratio:var(--ar);height:auto}
}
/* a clip inside a padded tile is shown whole, like a picture */
.cx-tile.is-pad>video{width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;border-radius:6px}
/* strip: a real horizontal scroller — it glides with the page, and the visitor can drag, swipe or use the arrows */
.cx-strip__win{overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;cursor:grab;-webkit-overflow-scrolling:touch}
.cx-strip__win::-webkit-scrollbar{display:none}
.cx-strip__win.is-drag{cursor:grabbing}
.cx-strip__win img,.cx-strip__win video{-webkit-user-drag:none;user-select:none;pointer-events:none}
.cx-track{transform:none!important}
.cx-strip .cx-h{max-width:none}
.cx-strip__nav{display:flex;gap:10px}
.cx-strip__nav button{width:48px;height:48px;border-radius:50%;border:1px solid color-mix(in srgb,var(--ink) 22%,transparent);background:transparent;color:inherit;font-size:18px;cursor:pointer;transition:background .3s,color .3s}
.cx-strip__nav button:hover{background:var(--ink);color:var(--paper)}
/* case-study header: on a phone the call to action stays, shortened to "Kontakt" */
.cx-top__s{display:none}
@media (max-width:820px){.cx-top .btn{display:inline-flex!important;height:40px;padding:0 16px;font-size:13px}.cx-top__l{display:none}.cx-top__s{display:inline}}
/* phone: the product section is not pinned — the design and its wireframe sit one under the other, nothing empty above them */
@media (max-width:820px){
  .cx-morph,.cx-morph.is-short{height:auto!important}
  .cx-morph__pin{position:relative!important;height:auto!important;padding:0 var(--g)!important}
  .cx-morph__frame,.cx-morph.is-short .cx-morph__frame{flex:none!important;height:auto!important}
  .cx-morph__view,.cx-morph.is-short .cx-morph__view{height:auto!important;aspect-ratio:auto!important;display:flex;flex-direction:column;gap:7px;background:none;overflow:visible}
  .cx-morph__view img{position:relative!important;transform:none!important;height:auto!important;clip-path:none!important;border-radius:8px}
  .cx-morph__final{order:-1}
  .cx-morph__line,.cx-morph__state{display:none!important}
}