/* New Brand Order — v5 */
@font-face{font-family:Frama;src:url(assets/fonts/PPFrama-Thin.woff2) format('woff2');font-weight:100;font-display:swap}
@font-face{font-family:Frama;src:url(assets/fonts/PPFrama-Light.woff2) format('woff2');font-weight:300;font-display:swap}
@font-face{font-family:Frama;src:url(assets/fonts/PPFrama-Regular.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Frama;src:url(assets/fonts/PPFrama-Bold.woff2) format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:Frama;src:url(assets/fonts/PPFrama-Black.woff2) format('woff2');font-weight:900;font-display:swap}
@font-face{font-family:Frama;src:url(assets/fonts/PPFrama-LightItalic.woff2) format('woff2');font-weight:300;font-style:italic;font-display:swap}
@font-face{font-family:FramaText;src:url(assets/fonts/PPFramaText-Regular.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:FramaText;src:url(assets/fonts/PPFramaText-Bold.woff2) format('woff2');font-weight:700;font-display:swap}

:root{
  --paper:#F1ECE1; --ink:#0D0D12; --night:#0F0920; --coral:#FF4F2E; --lilac:#A79BFF;
  --fg:var(--paper); --line:rgba(241,236,225,.2);
  --ease:cubic-bezier(.16,1,.3,1); --g:clamp(18px,2.6vw,42px); --side:calc(var(--g) + 118px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scrollbar-width:none;overflow-x:clip}
html::-webkit-scrollbar{display:none}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
body{background:var(--night);color:var(--fg);font-family:FramaText,system-ui,sans-serif;font-size:17px;line-height:1.5;-webkit-font-smoothing:antialiased;transition:color .9s var(--ease)}
body[data-theme="paper"]{--fg:var(--ink);--line:rgba(13,13,18,.16)}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
h1,h2,h3{font-family:Frama;font-weight:700;letter-spacing:-.045em;line-height:.9}
em{font-family:Frama;font-weight:300;font-style:italic;letter-spacing:-.035em}
.th{font-family:Frama;font-weight:100;letter-spacing:-.02em}
.eyebrow{font-size:11px;letter-spacing:.18em;text-transform:uppercase;opacity:.55}
.seal{width:.42em;height:.42em;display:inline-block;vertical-align:-.03em;margin-left:.1em}
:focus-visible{outline:2px solid var(--coral);outline-offset:3px;border-radius:6px}
::selection{background:var(--coral);color:var(--ink)}
.only-touch{display:none}
@media (hover:none){.only-fine{display:none}.only-touch{display:inline}}

.link{display:inline-flex;gap:10px;align-items:center;font-family:Frama;font-weight:700;letter-spacing:-.02em;font-size:17px;border-bottom:1px solid currentColor;padding-bottom:4px}
.link span{transition:transform .6s var(--ease)}
.link:hover span{transform:translateX(6px)}
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:12px;height:58px;padding:0 30px;border-radius:99px;background:var(--paper);color:var(--ink);font-family:Frama;font-weight:700;font-size:17px;letter-spacing:-.02em;overflow:hidden;isolation:isolate;white-space:nowrap;transition:color .5s var(--ease),transform .5s var(--ease)}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--coral);border-radius:inherit;transform:translateY(102%);transition:transform .6s var(--ease)}
.btn::after{content:"→";transition:transform .6s var(--ease)}
.btn:hover{color:var(--paper)}
.btn:hover::before{transform:none}
.btn:hover::after{transform:translateX(4px)}
.btn:active{transform:scale(.97)}
.btn:disabled{opacity:.6;cursor:progress}
.btn--ink{background:var(--ink);color:var(--paper)}

/* LOADER */
.loader{position:fixed;inset:0;z-index:300;background:var(--paper);color:var(--ink);display:flex;align-items:center;justify-content:center;
  -webkit-mask:radial-gradient(circle at 50% 50%,transparent var(--r,0px),#000 calc(var(--r,0px) + 1px));mask:radial-gradient(circle at 50% 50%,transparent var(--r,0px),#000 calc(var(--r,0px) + 1px))}
.loader.is-gone{display:none}

.gl{position:fixed;inset:0;width:100vw;height:100vh;z-index:0;display:block;touch-action:pan-y}
.grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.06;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");animation:grain 1s steps(6) infinite;background-size:160px 160px}
@keyframes grain{0%{background-position:0 0}20%{background-position:-37px 21px}40%{background-position:23px -48px}60%{background-position:-51px -9px}80%{background-position:34px 39px}100%{background-position:0 0}}

/* CHROME */
.logo,.chat,.index,.mbtn,.clock{position:fixed;z-index:60;color:#fff;mix-blend-mode:difference;transition:opacity .6s var(--ease)}
.logo{top:24px;left:var(--g);font-family:Frama;font-weight:700;font-size:20px;letter-spacing:-.03em;white-space:nowrap}
.chat{top:26px;right:var(--g);font-size:13px;letter-spacing:.06em;text-transform:uppercase;display:flex;gap:8px}
.chat span{transition:transform .5s var(--ease)}
.chat:hover span{transform:translate(3px,-3px)}
.clock{right:var(--g);bottom:26px;font-size:12px;letter-spacing:.04em}
.clock span{opacity:.55}
.clock b{font-variant-numeric:tabular-nums;font-weight:400}
.index{left:var(--g);top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:4px;padding:6px;border-radius:20px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12)}
.ix{position:relative;display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:14px;transition:background .5s,color .5s}
.ix__ico{width:18px;height:18px;fill:currentColor;transition:transform .6s var(--ease)}
.ix:hover .ix__ico{transform:scale(1.15)}
.ix__name{position:absolute;left:52px;top:50%;transform:translate(-6px,-50%);white-space:nowrap;font-size:12px;letter-spacing:.08em;text-transform:uppercase;opacity:0;pointer-events:none;transition:opacity .4s,transform .5s var(--ease)}
.ix:hover .ix__name{opacity:1;transform:translate(0,-50%)}
.ix.on{background:#fff;color:#000}
.ix__bar{position:absolute;right:-10px;top:8px;bottom:8px;width:2px;background:rgba(255,255,255,.18);opacity:0;transition:opacity .4s}
.ix.on .ix__bar{opacity:1}
.ix__bar i{display:block;width:100%;height:var(--p,0%);background:#fff}
.mbtn{left:var(--g);bottom:20px;display:flex;align-items:center;gap:12px;z-index:160}
.mbtn svg{width:46px;height:46px;overflow:visible}
.mbtn__track{fill:none;stroke:rgba(255,255,255,.25);stroke-width:5}
.mbtn__prog{fill:none;stroke:#fff;stroke-width:5;stroke-dasharray:125.66;stroke-dashoffset:125.66;stroke-linecap:round}
.mbtn__o{fill:none;stroke:#fff;stroke-width:3.6;transition:r .6s var(--ease),stroke-width .6s var(--ease)}
.mbtn:hover .mbtn__o{r:4;stroke-width:8}
.mbtn__txt{display:flex;flex-direction:column;line-height:1.15;text-align:left}
.mbtn__txt b{font-family:Frama;font-size:15px;letter-spacing:.02em;text-transform:uppercase}
.mbtn__txt small{font-size:11px;letter-spacing:.08em;text-transform:uppercase;opacity:.55}
@media (max-width:820px){
  .index,.clock{display:none}
  .logo{font-size:17px;top:20px}
  .chat{top:22px;font-size:11px}
  .mbtn{left:auto;right:var(--g);bottom:18px;flex-direction:row-reverse}
  .mbtn__txt{text-align:right}
}
.cursor{position:fixed;z-index:90;left:0;top:0;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:#fff;mix-blend-mode:difference;pointer-events:none;display:flex;align-items:center;justify-content:center;transition:width .6s var(--ease),height .6s var(--ease),margin .6s var(--ease),opacity .3s}
.cursor span{font-family:Frama;font-weight:700;font-size:13px;color:#000;opacity:0;transition:opacity .3s;white-space:nowrap}
.cursor.big{width:84px;height:84px;margin:-42px 0 0 -42px}
.cursor.big span{opacity:1}
.cursor.ring{width:120px;height:120px;margin:-60px 0 0 -60px;background:transparent;box-shadow:inset 0 0 0 1px #fff}
@media (hover:none){.cursor{display:none}}
.toast{position:fixed;z-index:96;left:50%;bottom:28px;transform:translate(-50%,160%);max-width:min(520px,calc(100vw - 36px));padding:14px 18px;border-radius:18px;background:var(--ink);color:var(--paper);font-size:14px;box-shadow:0 20px 40px -16px rgba(0,0,0,.6);transition:transform .7s var(--ease)}
.toast.on{transform:translate(-50%,0)}

main{position:relative;z-index:2;transition:opacity .7s var(--ease),filter .7s var(--ease)}
section,footer{position:relative}
.fade{opacity:0;filter:blur(10px);transition:opacity 1.6s var(--ease) 1.4s,filter 1.6s var(--ease) 1.4s}
.is-ready .fade{opacity:1;filter:none}

/* ============ HERO — particle typography ============ */
.hero{height:190vh}
.hero__stick{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.hero__eyebrow{position:absolute;left:var(--side);right:var(--g);top:15vh;display:flex;justify-content:space-between;font-size:11px;letter-spacing:.2em;text-transform:uppercase}
.is-ready .hero__eyebrow.fade{opacity:.55}
.hero__h{position:absolute;left:var(--side);right:var(--g);top:50%;transform:translateY(-58%);font-size:clamp(48px,min(8.4vw,15vh),170px);letter-spacing:-.055em;line-height:.92;pointer-events:none;
  opacity:0;transition:opacity 1.4s var(--ease);
  -webkit-mask-image:radial-gradient(circle var(--mr,0px) at var(--mx,-999px) var(--my,-999px),transparent 30%,#000 100%);mask-image:radial-gradient(circle var(--mr,0px) at var(--mx,-999px) var(--my,-999px),transparent 30%,#000 100%)}
.hero__h.crisp{opacity:var(--fo,1)}
.hl{display:block;width:max-content;max-width:100%}
.hero__foot{position:absolute;left:var(--side);right:var(--g);bottom:8vh;display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.hero__foot p{max-width:400px;font-size:16px;opacity:.82}
.hero__cta{display:flex;align-items:center;gap:28px}
.hero__hint{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);font-size:11px;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap}
.is-ready .hero__hint.fade{opacity:.5}
@media (max-width:820px){
  .hero__eyebrow{left:var(--g);top:11vh;flex-direction:column;gap:4px}
  .hero__h{left:var(--g);top:40%;font-size:clamp(40px,11.6vw,64px)}
  .hl{width:auto}
  .hero__foot{left:var(--g);bottom:11vh;flex-direction:column;align-items:flex-start}
  .hero__foot p{font-size:15px}
  .hero__cta{gap:20px}
  .btn{height:52px;padding:0 24px;font-size:16px}
  .hero__hint{display:none}
}

/* ============ WORK ============ */
.work{height:560vh}
.work__stick{position:sticky;top:0;height:100vh;height:100svh;display:grid;grid-template-columns:1fr minmax(0,40vw) 1fr;grid-template-rows:auto 1fr auto;padding:92px var(--g) 86px var(--side);gap:0 34px}
.work__head{grid-column:1/-1;display:flex;justify-content:space-between;align-items:baseline}
.work__count{font-family:Frama;font-weight:700;font-size:15px;font-variant-numeric:tabular-nums}
.work__count span{opacity:.4}
.work__name{grid-column:1;grid-row:2;align-self:center;position:relative;height:3.6em;font-size:clamp(40px,5.2vw,92px)}
.work__name span{position:absolute;left:0;top:50%;transform:translateY(-50%);font-family:Frama;font-weight:700;letter-spacing:-.055em;line-height:.88;opacity:0;filter:blur(16px);transition:opacity 1s var(--ease),filter 1s var(--ease),transform 1s var(--ease)}
.work__name span.on{opacity:1;filter:none}
.work__name span.up{transform:translateY(-90%)}
.work__name span.down{transform:translateY(-10%)}
.work__media{grid-column:2;grid-row:2;align-self:stretch;margin:2vh 0;cursor:none}
.work__list{grid-column:3;grid-row:2;align-self:center;justify-self:end;list-style:none;text-align:right;padding-right:6px;min-width:0}
.work__list li{font-family:Frama;font-weight:700;font-size:clamp(15px,1.2vw,19px);letter-spacing:-.02em;line-height:1.6;opacity:.2;filter:blur(1.6px);transition:opacity .6s,filter .6s,transform .7s var(--ease);cursor:pointer}
.work__list li:hover{opacity:.6;filter:none}
.work__list li.on{opacity:1;filter:none;transform:translateX(-12px)}
.work__meta{grid-column:1/-1;grid-row:3;display:flex;justify-content:space-between;align-items:center;font-size:13px}
.work__meta .tags{display:flex;gap:18px;text-transform:uppercase;letter-spacing:.12em;font-size:11px;opacity:.7}
@media (max-width:900px){
  .work{height:380vh}
  .work__stick{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto 1fr auto auto;padding:84px var(--g) 84px;gap:12px}
  .work__name{grid-column:1;grid-row:2;height:1.9em;font-size:clamp(38px,11vw,64px)}
  .work__media{grid-column:1;grid-row:3;margin:0}
  .work__list{grid-column:1;grid-row:4;display:flex;gap:14px;overflow:hidden;justify-self:start;text-align:left;padding:0;max-width:100%}
  .work__list li{white-space:nowrap;font-size:14px}
  .work__meta{grid-row:5}.work__meta .tags{display:none}
}

/* ============ ARCHIVE — spiral into a ring ============ */
.orbit{height:280vh}
.orbit__stick{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;cursor:grab;touch-action:pan-y}
.orbit__stick.is-drag{cursor:grabbing}
.orbit__ring{position:absolute;inset:0}
.ocard{position:absolute;left:50%;top:50%;width:var(--ow);aspect-ratio:4/3;margin:calc(var(--ow) * -.375) 0 0 calc(var(--ow) / -2);border-radius:16px;overflow:hidden;box-shadow:0 30px 50px -28px rgba(13,13,18,.45);will-change:transform,filter,opacity;transition:box-shadow .5s}
.ocard img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;user-select:none;transition:transform .8s var(--ease)}
.ocard:hover img{transform:scale(1.08)}
.ocard span{position:absolute;left:10px;bottom:10px;padding:5px 10px;border-radius:99px;background:rgba(241,236,225,.92);font-family:Frama;font-weight:700;font-size:12px;letter-spacing:-.01em;color:var(--ink)}
.orbit__center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;z-index:30;pointer-events:none;width:min(80vw,640px)}
.orbit__center h2{font-size:clamp(38px,4.8vw,88px);margin:14px 0 30px}
.orbit__center .btn{pointer-events:auto}

/* ============ PRINCIPLES ============ */
.rules{padding:22vh var(--g) 18vh var(--side)}
.rule{position:relative;padding:4vh 2vw 0 0;min-height:46vh;display:flex;flex-direction:column;gap:18px;border-right:1px solid var(--line);padding-left:2vw;opacity:0;transform:translateY(40px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.rule:first-child{padding-left:0}
.rule:last-child{border-right:0}
.rule.in{opacity:1;transform:none}
.rule h3{font-size:clamp(28px,2.4vw,44px);letter-spacing:-.045em;line-height:.95}
.rule p{font-size:16px;opacity:.82;max-width:30ch;margin-top:auto;padding-bottom:3vh}
@media (max-width:900px){.rules{padding:14vh var(--g)}.rule{min-height:auto;padding:4vh 4vw 4vh 0;border-bottom:1px solid var(--line)}.rule:nth-child(2n){border-right:0;padding-left:4vw}.rule:nth-child(odd){padding-left:0}}
@media (max-width:560px){.rule{border-right:0!important;padding-left:0!important}}

/* ============ PROCESS ============ */
.ritual{height:340vh}
.ritual__stick{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;padding:0 var(--g) 0 var(--side);gap:5vw}
.ritual__eyebrow{position:absolute;top:96px;left:var(--side)}
.ritual__mark{position:relative;display:flex;flex-direction:column;align-items:center;gap:3vh}
.ritual__mark svg{width:min(40vw,56vh);height:min(40vw,56vh);overflow:visible;color:var(--paper)}
.r-dot{fill:var(--paper)}
.ritual__state{font-family:Frama;font-weight:300;font-style:italic;font-size:clamp(24px,2.4vw,40px);letter-spacing:-.03em}
.ritual__steps{display:flex;flex-direction:column;gap:3.4vh}
.rs{display:grid;grid-template-columns:80px 1fr;gap:6px 18px;opacity:.28;filter:blur(1.5px);transition:opacity .7s var(--ease),filter .7s var(--ease),transform .7s var(--ease)}
.rs.on{opacity:1;filter:none;transform:translateX(10px)}
.rs__n{font-family:Frama;font-weight:100;font-size:clamp(40px,3.6vw,64px);line-height:.85;letter-spacing:-.04em;grid-row:span 2}
.rs h3{font-size:clamp(30px,2.8vw,50px);letter-spacing:-.045em;display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.rs h3 small{font-family:FramaText;font-weight:400;font-size:11px;letter-spacing:.16em;text-transform:uppercase;padding:5px 10px;border:1px solid currentColor;border-radius:99px;opacity:.8}
.rs p{font-size:16px;opacity:.88;max-width:420px}
.ritual__bar{position:absolute;left:var(--side);right:var(--g);bottom:8vh;height:1px;background:rgba(241,236,225,.25)}
.ritual__bar i{display:block;height:100%;width:0;background:var(--paper)}
@media (max-width:820px){
  .ritual__stick{grid-template-columns:1fr;grid-template-rows:auto 1fr;padding:130px var(--g) 90px;gap:4vh;align-items:start}
  .ritual__eyebrow{left:var(--g);top:80px}
  .ritual__mark{flex-direction:row;justify-content:flex-start;gap:20px}
  .ritual__mark svg{width:28vw;height:28vw}
  .rs{grid-template-columns:52px 1fr}
  .rs:not(.on){display:none}
  .rs.on{transform:none}
  .ritual__bar{left:var(--g)}
}

/* ============ OFFER ============ */
.offer{padding:20vh var(--g) 16vh var(--side)}
.offer__head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;flex-wrap:wrap;margin-bottom:7vh}
.offer__head h2{font-size:clamp(48px,6.6vw,124px);letter-spacing:-.055em;margin-top:14px}
.offer__lead{font-size:16px;opacity:.75;min-height:3em}
.pkg{position:relative;display:flex;flex-direction:column;gap:18px;padding:30px;border-radius:28px;background:#FBF8F1;border:1px solid rgba(13,13,18,.08);transition:transform .7s var(--ease),box-shadow .7s var(--ease)}
.pkg:hover{transform:translateY(-6px);box-shadow:0 40px 60px -40px rgba(13,13,18,.35)}
.pkg h3{font-size:clamp(32px,2.8vw,48px);letter-spacing:-.05em}
.pkg ul{list-style:none;display:flex;flex-direction:column;gap:9px;font-size:15px;border-top:1px solid currentColor;border-color:rgba(127,127,127,.25);padding-top:18px;flex:1}
.pkg li{display:flex;gap:10px}
.pkg li::before{content:"";flex-shrink:0;width:12px;height:12px;margin-top:5px;border-radius:50%;box-shadow:inset 0 0 0 3px currentColor;opacity:.7}
.pkg .btn{width:100%}
.pkg:not(.pkg--hi) .btn{background:var(--ink);color:var(--paper)}
.swap{animation:swap .6s var(--ease)}
@keyframes swap{from{opacity:0;transform:translateY(10px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
@media (max-width:1000px){.offer{padding:14vh var(--g)}}
.qa{height:64px;border-radius:18px;border:1px solid var(--line);font-family:Frama;font-weight:700;font-size:18px;transition:background .4s,color .4s,border-color .4s,transform .4s var(--ease)}
.qa:hover{background:var(--paper);color:var(--ink);border-color:var(--paper);transform:translateY(-3px)}

/* ============ CONTACT ============ */
.contact{padding:22vh var(--g) 16vh var(--side);min-height:100vh}
.form{display:grid;grid-template-columns:1fr 1fr;gap:28px 40px}
.form__carry{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:10px}
.form__carry[hidden]{display:none}
.carry{display:flex;align-items:center;gap:12px;padding:10px 16px 10px 10px;border-radius:16px;background:rgba(241,236,225,.08);border:1px solid var(--line);font-size:13px;line-height:1.3;animation:swap .6s var(--ease) both}
.carry b{display:block;font-family:Frama;font-size:15px;letter-spacing:-.01em}
.carry small{opacity:.6;font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.carry__ico{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:var(--paper);color:var(--ink);flex-shrink:0;font-family:Frama;font-weight:700}
.carry__ico svg{width:22px;height:22px}
.f{display:flex;flex-direction:column;gap:6px;border:0}
.f > span{font-size:11px;letter-spacing:.18em;text-transform:uppercase;opacity:.55;margin-bottom:6px}
.f input,.f textarea{background:transparent;border:0;border-bottom:1px solid var(--line);padding:8px 0 12px;font-family:Frama;font-weight:700;letter-spacing:-.02em;font-size:clamp(20px,2vw,30px);outline:0;resize:none;transition:border-color .4s}
.f input:focus,.f textarea:focus{border-color:var(--coral)}
.f input::placeholder,.f textarea::placeholder{color:rgba(241,236,225,.22)}
.f input[aria-invalid="true"]{border-color:var(--coral)}
.f__err{font-size:13px;color:#FF8A70;min-height:1.2em;margin-top:6px}
.send{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.send__note{font-size:14px;opacity:.7;max-width:360px}
.form.is-sent .btn{background:var(--coral);color:var(--paper)}
.next{border:1px solid var(--line);border-radius:28px;padding:30px;background:rgba(241,236,225,.04);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.next ol{list-style:none;counter-reset:n;margin:18px 0 30px;display:flex;flex-direction:column;gap:16px}
.next li{counter-increment:n;display:grid;grid-template-columns:34px 1fr;font-size:15px;opacity:.88}
.next li::before{content:counter(n,decimal-leading-zero);font-family:Frama;font-weight:100;font-size:20px;line-height:1.1}
.next li b{font-family:Frama;letter-spacing:-.01em}
@keyframes live{0%{box-shadow:0 0 0 0 rgba(91,227,139,.6)}70%{box-shadow:0 0 0 10px rgba(91,227,139,0)}100%{box-shadow:0 0 0 0 rgba(91,227,139,0)}}
@media (max-width:900px){.contact{padding:16vh var(--g) 12vh}.form{grid-template-columns:1fr}}

/* ============ FOOTER ============ */
.foot{padding:16vh 0 26px}
.foot__row{display:flex;gap:9vw;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:5vh;margin:0 var(--g) 0 var(--side)}
.foot__row div{display:flex;flex-direction:column;gap:6px;font-size:15px}
.foot__row .eyebrow{margin-bottom:8px}
.foot__row a{opacity:.85;transition:opacity .3s}.foot__row a:hover{opacity:1}
.foot__legal{display:flex;justify-content:space-between;margin-top:3vh;font-size:12px;opacity:.5;padding:0 var(--g) 0 var(--side)}
@media (max-width:820px){.foot{padding-bottom:90px}.foot__cta,.foot__markwrap,.foot__legal{padding-left:var(--g)}.foot__row{margin:0 var(--g)}}

/* ============ MENU — the specks take the stage ============ */
.menu{position:fixed;inset:0;z-index:150;color:var(--paper);display:grid;grid-template-columns:1.2fr 1fr;grid-template-rows:auto 1fr;padding:22px var(--g) 30px var(--side);gap:0 6vw;visibility:hidden;pointer-events:none;
  background:radial-gradient(120% 90% at 70% 50%,rgba(15,9,32,0) 0%,rgba(15,9,32,.35) 60%,rgba(8,5,18,.75) 100%);opacity:0;transition:opacity .8s var(--ease),visibility 0s .8s}
.menu.is-open{visibility:visible;pointer-events:auto;opacity:1;transition:opacity .8s var(--ease)}
body.menu-open main{opacity:0;filter:blur(20px);pointer-events:none}
body.menu-open .index,body.menu-open .chat,body.menu-open .clock,body.menu-open .logo{opacity:0;pointer-events:none}
.menu__top{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;height:42px}
.menu__brand{font-family:Frama;font-weight:700;font-size:20px;letter-spacing:-.03em}
.menu__close{font-size:12px;letter-spacing:.12em;text-transform:uppercase;display:flex;gap:10px;align-items:center}
.menu__close span{font-size:22px;line-height:1;transition:transform .6s var(--ease)}
.menu__close:hover span{transform:rotate(90deg)}
.menu__links{align-self:center;display:flex;flex-direction:column}
.menu__links a{display:flex;align-items:flex-start;gap:14px;width:max-content;font-family:Frama;font-weight:700;letter-spacing:-.055em;line-height:.98;font-size:clamp(44px,6.4vw,112px);opacity:0;filter:blur(20px);transform:translateX(-30px);transition:opacity 1s var(--ease),filter 1s var(--ease),transform 1s var(--ease),color .4s}
.menu__links small{font-family:FramaText;font-weight:400;font-size:12px;letter-spacing:.08em;margin-top:.9em;opacity:.45;min-width:22px}
.menu.is-open .menu__links a{opacity:1;filter:none;transform:none;transition-delay:calc(.2s + var(--i)*.06s)}
.menu.is-open .menu__links:hover a{opacity:.22;filter:blur(4px);transition-delay:0s}
.menu.is-open .menu__links a:hover{opacity:1;filter:none;transform:translateX(18px)}
.menu{grid-template-rows:auto 1fr auto}
.menu__info{grid-column:1/-1;align-self:end;justify-self:start;display:flex;gap:6vw;opacity:0;transition:opacity 1s var(--ease);padding-left:0}
.menu.is-open .menu__info{opacity:1;transition-delay:.6s}
.menu__info p{display:flex;flex-direction:column;gap:2px}
.menu__info b{font-family:Frama;font-weight:700;font-size:30px;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.menu__info a{font-family:Frama;font-weight:700;font-size:20px;letter-spacing:-.02em;text-decoration:underline;text-underline-offset:4px}
@media (max-width:820px){.menu{grid-template-columns:1fr;grid-template-rows:auto 1fr auto;padding:20px var(--g) 90px}.menu__links a{font-size:clamp(40px,12vw,72px)}.menu__info{justify-self:start}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
  .fade{opacity:1;filter:none}
  .hero__h{opacity:1}
}

/* ===================== v5.1 ===================== */
/* ---- HERO desk ---- */
.hero{height:170vh}
.hero__h{opacity:1;-webkit-mask-image:none;mask-image:none;z-index:1;transition:opacity .4s linear}
.hero__eyebrow,.hero__foot,.hero__tools{z-index:4}
.desk{position:absolute;inset:0;z-index:3;pointer-events:none}
.obj{position:absolute;left:0;top:0;pointer-events:auto;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none;will-change:transform;perspective:900px;transition:filter .8s var(--ease),opacity .8s var(--ease)}
.obj.is-drag{cursor:grabbing}
.hero__tools{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);display:flex;align-items:center;gap:18px;white-space:nowrap}
.tidy{display:inline-flex;gap:10px;align-items:center;height:46px;padding:0 20px 0 13px;border-radius:99px;background:rgba(241,236,225,.1);border:1px solid rgba(241,236,225,.28);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);font-family:Frama;font-weight:700;font-size:14px;transition:background .4s,color .4s}
.tidy:hover,.tidy[aria-pressed="true"]{background:var(--paper);color:var(--ink)}
.tidy svg{width:20px;height:20px;transition:transform .9s var(--ease)}
.tidy[aria-pressed="true"] svg{transform:rotate(180deg)}
.hero__hint{font-size:11px;letter-spacing:.16em;text-transform:uppercase;opacity:.5}
.is-ready .hero__tools.fade{opacity:1}
@media (max-width:820px){.hero__tools{bottom:auto;top:calc(11vh + 46px);left:var(--g);transform:none}.hero__hint{display:none}}

/* ---- WORK: next projects peek from below ---- */
.work__media{display:flex;flex-direction:column}
@keyframes peek{from{transform:translateY(22px);opacity:0}}

/* ---- SERVICES ---- */
.svc{padding:20vh var(--g) 18vh var(--side)}
.svc__head{display:grid;grid-template-columns:1fr minmax(0,380px);gap:30px 40px;align-items:end;margin-bottom:8vh}
.svc__head .eyebrow{grid-column:1/-1;letter-spacing:.14em}
.svc__head h2{font-size:clamp(46px,6.2vw,118px);letter-spacing:-.055em}
.svc__lead{font-size:17px;opacity:.78}
.svc__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;perspective:1400px}
.scard{position:relative;min-height:clamp(440px,64vh,640px);border-radius:24px;overflow:hidden;background:#0C0817;border:1px solid rgba(241,236,225,.1);display:flex;flex-direction:column;justify-content:flex-end;padding:26px;transform:rotateX(var(--rx,0)) rotateY(var(--ry,0));transform-style:preserve-3d;transition:transform .6s var(--ease),border-color .5s,opacity 1s var(--ease),translate 1s var(--ease);opacity:0;translate:0 60px;outline:0}
.scard.in{opacity:1;translate:0 0}
.scard::after{content:"";position:absolute;inset:0;background:radial-gradient(500px circle at var(--gx,50%) var(--gy,50%),rgba(167,155,255,.16),transparent 45%);pointer-events:none;opacity:0;transition:opacity .5s}
.scard:hover,.scard:focus-visible{border-color:rgba(241,236,225,.28)}
.scard:hover::after{opacity:1}
.scard__n{position:absolute;top:30px;left:32px;font-family:Frama;font-weight:100;font-size:20px;color:var(--paper);mix-blend-mode:difference;z-index:2}
.scard__body{position:relative;z-index:1}
.scard h3{font-size:clamp(28px,2.4vw,42px);letter-spacing:-.045em;margin-bottom:12px}
.scard p{font-size:15px;opacity:.75;max-width:34ch}
.scard ul{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin-top:0;max-height:0;overflow:hidden;opacity:0;transition:max-height .7s var(--ease),opacity .5s,margin .6s var(--ease)}
.scard:hover ul,.scard:focus-visible ul{max-height:120px;opacity:1;margin-top:16px}
.scard li{font-size:12px;padding:6px 11px;border-radius:99px;border:1px solid rgba(241,236,225,.25)}
.scard__plus{position:absolute;top:22px;right:22px;width:40px;height:40px;border-radius:50%;background:rgba(241,236,225,.1);display:flex;align-items:center;justify-content:center;font-size:22px;transition:transform .6s var(--ease),background .4s;z-index:2}
.scard:hover .scard__plus{transform:rotate(45deg);background:var(--coral)}
@media (max-width:1000px){.svc{padding:14vh var(--g)}.svc__head{grid-template-columns:1fr}.svc__grid{grid-template-columns:1fr}.scard{min-height:480px}.scard ul{max-height:120px;opacity:1;margin-top:16px}}

/* ---- PRINCIPLES: stacked cards over a giant headline ---- */
.rules{height:440vh;padding:0}
.rules__stick{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:flex;align-items:center;justify-content:center}
.rules__eyebrow{position:absolute;top:96px;left:var(--side)}
.rules__big{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);text-align:center;font-size:clamp(56px,10.5vw,210px);letter-spacing:-.06em;line-height:.86;pointer-events:none}
.rules__deck{position:relative;width:min(370px,80vw);height:min(500px,64vh)}
.rcard{position:absolute;inset:0;border-radius:24px;background:#F7F4EE;color:var(--ink);padding:14px;display:flex;flex-direction:column;box-shadow:0 50px 90px -40px rgba(0,0,0,.7),0 2px 0 rgba(255,255,255,.4) inset;will-change:transform;transform:translateY(110vh)}
.rcard__art{position:relative;flex:1;min-height:0;border-radius:14px;background:#EFEAE1;overflow:hidden}
.rcard__art svg{width:100%;height:100%;display:block}
.px-grid line{stroke:rgba(13,13,18,.07);stroke-width:.4}
.px rect{transform-box:fill-box;transform-origin:center;transform:scale(.3);opacity:0;transition:transform .7s cubic-bezier(.3,1.5,.5,1),opacity .4s;transition-delay:var(--d)}
.rcard.on .px rect{transform:none;opacity:1}
.rcard__n{position:absolute;top:12px;left:14px;font-family:Frama;font-weight:700;font-size:12px;letter-spacing:.1em;opacity:.5}
.rcard__t{padding:18px 8px 8px}
.rcard h3{font-size:clamp(26px,2.1vw,34px);letter-spacing:-.045em;line-height:.95;margin-bottom:10px}
.rcard p{font-size:14px;opacity:.72;line-height:1.45}
.rules__dots{position:absolute;bottom:7vh;left:50%;transform:translateX(-50%);display:flex;gap:8px}
.rules__dots i{width:26px;height:3px;border-radius:2px;background:rgba(241,236,225,.22);transition:background .5s}
.rules__dots i.on{background:var(--paper)}
@media (max-width:820px){.rules__eyebrow{left:var(--g);top:80px}.rules__big{top:24%}}

/* ---- REFERENCES ---- */
.refs{height:220vh}
.refs__stick{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;padding:13vh var(--g) 0 var(--side)}
.refs__head h2{font-size:clamp(46px,6.2vw,118px);letter-spacing:-.055em;margin:14px 0 18px}
.refs__note{font-size:13px;opacity:.6;display:flex;align-items:center;gap:10px}
.ph{display:inline-block;font-family:FramaText;font-size:10px;letter-spacing:.14em;text-transform:uppercase;padding:4px 8px;border-radius:99px;background:var(--coral);color:var(--paper);opacity:1}
.qfan{position:absolute;left:50%;bottom:4vh;width:0;height:0}
.qcardf{position:absolute;left:calc(var(--cw) / -2);bottom:0;width:var(--cw);min-height:calc(var(--cw) * .95);padding:22px;border-radius:22px;background:#FBF8F1;color:var(--ink);box-shadow:0 30px 60px -30px rgba(13,13,18,.45);display:flex;flex-direction:column;gap:16px;will-change:transform;transform:translateY(140px)}
.qcardf:nth-child(even){background:#E9E2D6}
.qcardf:nth-child(3){background:var(--ink);color:var(--paper)}
.qcardf__top{display:flex;justify-content:space-between;align-items:center}
.stars{color:var(--coral);letter-spacing:2px;font-size:14px}
.qcardf blockquote{font-family:Frama;font-weight:700;font-size:clamp(18px,1.45vw,24px);letter-spacing:-.025em;line-height:1.15;flex:1}
.qcardf figcaption{display:flex;align-items:center;gap:10px;font-size:13px;line-height:1.3}
.qcardf figcaption i{width:38px;height:38px;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;font-size:13px}
.qcardf figcaption b{display:block;font-family:Frama}
@media (max-width:820px){.refs__stick{padding:12vh var(--g) 0}}

/* ---- FOOTER: hand of cards ---- */
.foot{padding:14vh 0 22px}
.foot__meta{display:flex;align-items:center;gap:22px;margin:0 var(--g) 0 var(--side);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.foot__meta p{text-transform:none;letter-spacing:0;font-size:14px;line-height:1.35;opacity:.85;white-space:nowrap}
.foot__meta p b{font-family:Frama;font-size:16px;letter-spacing:-.02em}
.foot__meta i{flex:1;height:1px;background:var(--line)}
.foot__meta span{opacity:.7;white-space:nowrap}
.fan{position:relative;height:min(74vh,700px);margin-top:3vh;overflow:hidden}
.fcard{position:absolute;left:50%;bottom:-60px;width:var(--cw,280px);height:calc(var(--cw,280px) * 1.36);margin-left:calc(var(--cw,280px) / -2);border-radius:18px;overflow:hidden;transform-origin:50% 300%;box-shadow:0 40px 70px -30px rgba(0,0,0,.7);will-change:transform;display:flex;flex-direction:column;justify-content:space-between;padding:22px;outline-offset:6px}
.fcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.fcard:hover img{transform:scale(1.06)}
.fcard b{font-family:Frama;font-weight:700;font-size:clamp(30px,2.6vw,44px);letter-spacing:-.05em;line-height:.92}
.fcard small{font-size:11px;letter-spacing:.14em;text-transform:uppercase;opacity:.7}
.fcard span{font-family:Frama;font-weight:700;font-size:15px;margin-bottom:60px}
.f-coral{background:var(--coral);color:var(--paper)}
.f-ink{background:#1A1230;color:var(--paper);border:1px solid rgba(241,236,225,.12)}
.foot__row{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;margin:22px var(--g) 0 var(--side);padding-top:18px;border-top:1px solid var(--line);font-size:13px}
.foot__row span{opacity:.55}
.foot__row nav{display:flex;gap:22px;flex-wrap:wrap}
.foot__row nav a{opacity:.8;transition:opacity .3s}.foot__row nav a:hover{opacity:1}
@media (max-width:820px){.foot__meta{margin:0 var(--g);flex-wrap:wrap}.foot__meta i,.foot__meta span{display:none}.foot__row{margin:22px var(--g) 70px}.fan{height:62vh}}

/* ---- OFFER configurator ---- */
.offer__head{align-items:flex-end}
.offer__lead{max-width:420px;font-size:17px;opacity:.75}
.cfg{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(320px,.75fr);gap:clamp(24px,4vw,70px);align-items:start}
.cfg__opts{border-top:1px solid var(--line)}
.cfg__row{display:flex;flex-direction:column;gap:16px;padding:3.2vh 0;border-bottom:1px solid var(--line)}
.cfg__row[hidden]{display:none}
.cfg__k{display:flex;justify-content:space-between;font-size:11px;letter-spacing:.18em;text-transform:uppercase;opacity:.6}
.cfg__k b{font-family:Frama;font-size:22px;letter-spacing:-.02em;text-transform:none;opacity:1;color:var(--ink)}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.tile{text-align:left;padding:18px;border-radius:18px;border:1px solid var(--line);display:flex;flex-direction:column;gap:4px;transition:background .45s var(--ease),color .45s,border-color .45s,transform .45s var(--ease)}
.tile:hover{transform:translateY(-3px);border-color:rgba(13,13,18,.4)}
.tile b{font-family:Frama;font-size:clamp(20px,1.7vw,28px);letter-spacing:-.04em}
.tile span{font-size:13px;opacity:.65}
.tile em{font-size:14px;margin-top:10px}
.tile[aria-checked="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.range{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:99px;background:linear-gradient(90deg,var(--ink) var(--v,21%),rgba(13,13,18,.14) var(--v,21%));outline:0;cursor:pointer}
.range::-webkit-slider-thumb{-webkit-appearance:none;width:30px;height:30px;border-radius:50%;background:var(--coral);border:5px solid #FBF8F1;box-shadow:0 4px 12px rgba(13,13,18,.3);transition:transform .3s var(--ease)}
.range::-webkit-slider-thumb:hover{transform:scale(1.15)}
.range::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--coral);border:5px solid #FBF8F1}
.switch{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:16px;border:1px solid var(--line);cursor:pointer;transition:border-color .4s,background .4s}
.switch:hover{border-color:rgba(13,13,18,.4)}
.switch input{position:absolute;opacity:0;pointer-events:none}
.switch > i{flex-shrink:0;width:42px;height:24px;border-radius:99px;background:rgba(13,13,18,.14);position:relative;transition:background .4s}
.switch > i::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 2px 4px rgba(0,0,0,.2);transition:transform .45s var(--ease)}
.switch input:checked + i{background:var(--coral)}
.switch input:checked + i::after{transform:translateX(18px)}
.switch input:focus-visible + i{outline:2px solid var(--coral);outline-offset:3px}
.switch span{font-size:13px;opacity:.8;line-height:1.3}
.switch span b{display:block;font-family:Frama;font-size:15px;opacity:1}
.cfg .chips .chip{border-color:var(--line)}
.cfg .chips .chip:hover{border-color:rgba(13,13,18,.45)}
.cfg .chips .chip[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.cfg__out{position:sticky;top:12vh;padding:30px;border-radius:28px;background:var(--ink);color:var(--paper);display:flex;flex-direction:column;gap:14px;box-shadow:0 50px 80px -50px rgba(13,13,18,.6)}
.cfg__price{font-family:Frama;font-weight:700;font-size:clamp(56px,5.6vw,96px);letter-spacing:-.06em;line-height:.9;font-variant-numeric:tabular-nums;white-space:nowrap}
.cfg__time{font-size:15px;opacity:.75}
.cfg__bar{display:flex;gap:4px;height:12px;margin-top:6px}
.cfg__bar i{border-radius:99px;transition:flex .8s var(--ease),background .5s;min-width:6px}
.cfg__legend{list-style:none;display:flex;flex-direction:column;gap:8px;font-size:14px}
.cfg__legend li{display:flex;align-items:center;gap:10px;animation:swap .5s var(--ease) both}
.cfg__legend li i{width:10px;height:10px;border-radius:50%}
.cfg__legend li b{margin-left:auto;font-family:Frama;font-variant-numeric:tabular-nums}
.cfg__care{border-color:rgba(241,236,225,.18);margin-top:4px}
.cfg__care > i{background:rgba(241,236,225,.2)}
.cfg__out .btn{width:100%;margin-top:4px}
.cfg__note{font-size:12px;opacity:.55}
@media (max-width:1000px){.cfg{grid-template-columns:1fr}.cfg__out{position:relative;top:0}.tiles{grid-template-columns:1fr}}

/* ---- PROJECTS PAGE ---- */
body.pj-page{background:var(--paper);color:var(--ink);--fg:var(--ink);--line:rgba(13,13,18,.14)}
.pj-top{position:sticky;top:0;z-index:20;display:flex;justify-content:space-between;align-items:center;padding:18px var(--g);background:rgba(241,236,225,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.pj-logo{font-family:Frama;font-weight:700;font-size:20px;letter-spacing:-.03em}
.pj-top nav{display:flex;align-items:center;gap:24px;font-size:14px}
.pj-top .btn{height:46px;padding:0 20px;font-size:15px}
@media (max-width:820px){.pj-top nav a:first-child{display:none}}

/* ---- LOADER v5: the name assembles, the mark draws, its eye opens ---- */
.loader{background:#0F0920;color:var(--paper);-webkit-mask:radial-gradient(circle at var(--cx,50%) var(--cy,50%),transparent var(--r,0px),#000 calc(var(--r,0px) + 1px));mask:radial-gradient(circle at var(--cx,50%) var(--cy,50%),transparent var(--r,0px),#000 calc(var(--r,0px) + 1px))}
.loader::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 50% at 50% 55%,rgba(167,155,255,.22),transparent 70%),radial-gradient(40% 40% at 70% 70%,rgba(255,79,46,.12),transparent 70%);animation:ldGlow 3s ease-in-out infinite alternate}
@keyframes ldGlow{to{opacity:.6;transform:scale(1.08)}}
.ld{position:relative;display:flex;align-items:center;gap:.08em;font-size:clamp(44px,8vw,140px)}
@media (max-width:820px){.ld{font-size:clamp(34px,11vw,60px)}}

.hero__eyebrow{transition:opacity .6s}
.fan{height:min(80vh,760px)}
.fcard{bottom:calc((100% - var(--cw,280px) * 1.36) / 2 - 30px)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{height:40px;padding:0 16px;border-radius:99px;border:1px solid var(--line);font-family:Frama;font-weight:700;font-size:15px;letter-spacing:-.01em;display:inline-flex;align-items:center;gap:8px;transition:background .4s,color .4s,border-color .4s}
.chip:hover{border-color:currentColor}
@media (max-width:820px){.hero__eyebrow{display:none}.hero__tools{top:calc(10vh + 20px)}}

/* ---- LOADER v6: a rolling mark of living specks ---- */
.loader{background:#F5F0DC;color:var(--ink)}
.loader::before{display:none}

/* incredibles-style deck */
.rules__deck{perspective:400px;transform-style:preserve-3d}
.rcard{transform-origin:50% 50%;backface-visibility:hidden}
.rcard::after{content:"";position:absolute;inset:0;border-radius:inherit;background:#0D0D12;opacity:var(--fade,0);pointer-events:none}

/* services: 3D objects */
.scard{background:#000;border-color:rgba(241,236,225,.12)}
.scard__obj{position:absolute;left:50%;top:44%;width:min(88%,420px);aspect-ratio:1;transform:translate(-50%,-50%) translateZ(40px);transition:transform 1s var(--ease)}
.scard__obj img,.scard__obj video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transition:opacity .6s var(--ease)}
.scard__obj video{opacity:0}
.scard.playing .scard__obj video{opacity:1}
.scard.playing .scard__obj img{opacity:0}
.scard__obj img{animation:objFloat 6s ease-in-out infinite}
.scard:nth-child(2) .scard__obj img{animation-delay:-2s}.scard:nth-child(3) .scard__obj img{animation-delay:-4s}
@keyframes objFloat{50%{transform:translateY(-14px) rotate(-2deg)}}
.scard:hover .scard__obj{transform:translate(-50%,-54%) translateZ(40px) scale(1.08)}
.scard::before{content:"";position:absolute;left:10%;right:10%;bottom:30%;height:30%;background:radial-gradient(closest-side,rgba(167,155,255,.18),transparent);pointer-events:none;transition:opacity .6s;opacity:.6}
.scard:hover::before{opacity:1}
.scard__body{background:linear-gradient(transparent,#000 30%);padding-top:40px;margin:0 -26px -26px;padding:40px 26px 26px}

.qcardf{cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none}
.qcardf.is-drag{cursor:grabbing;box-shadow:0 50px 80px -30px rgba(13,13,18,.55)}
.refs__note::after{content:"Potiahnite kartu a odhoďte ju dozadu.";margin-left:auto;opacity:.6}

/* ---- CONTACT v2: two cards ---- */
.contact{padding:16vh var(--g) 12vh var(--side)}
.ct{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:14px;align-items:stretch}
.ct__side{position:relative;overflow:hidden;border-radius:32px;background:#000;border:1px solid rgba(241,236,225,.1);padding:34px;display:flex;flex-direction:column;justify-content:space-between;min-height:min(82vh,760px);gap:24px}
.ct__obj{position:absolute;right:-12%;top:12%;width:78%;aspect-ratio:1;pointer-events:none;animation:objFloat 7s ease-in-out infinite}
.ct__obj img{width:100%;height:100%;object-fit:contain}
.ct__sideTop{position:relative}
.ct__big{font-family:Frama;font-weight:700;letter-spacing:-.055em;line-height:.88;font-size:clamp(48px,5vw,92px);margin-top:14px}
.ct__steps{position:relative;list-style:none;counter-reset:n;display:flex;flex-direction:column;gap:12px;font-size:15px;max-width:340px;margin-top:auto}
.ct__steps li{counter-increment:n;display:grid;grid-template-columns:32px 1fr;opacity:.88}
.ct__steps li::before{content:counter(n,decimal-leading-zero);font-family:Frama;font-weight:100;font-size:19px;line-height:1.1}
.ct__steps b{font-family:Frama}
.ct__meta{position:relative;display:flex;flex-direction:column;gap:12px;border-top:1px solid rgba(241,236,225,.14);padding-top:20px}
.ct__meta a{font-family:Frama;font-weight:700;font-size:clamp(22px,2vw,32px);letter-spacing:-.03em}
.ct__meta span{display:flex;align-items:center;gap:10px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;opacity:.7}
.ct__form{background:#F7F3EA;color:var(--ink);border-radius:32px;padding:clamp(28px,3.4vw,52px);display:flex!important;flex-direction:column;gap:22px;--line:rgba(13,13,18,.14)}
.ct__h{font-size:clamp(40px,4.2vw,78px);letter-spacing:-.055em;line-height:.9;margin:4px 0 6px}
.ct__k{display:block;font-size:11px;letter-spacing:.18em;text-transform:uppercase;opacity:.55;margin-bottom:10px}
.ct__need .chip{border-color:rgba(13,13,18,.18);font-size:14px;height:38px}
.ct__need .chip[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.ct__row{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.ct__form .f input,.ct__form .f textarea{font-size:clamp(18px,1.4vw,22px);border-color:rgba(13,13,18,.16);color:var(--ink)}
.ct__form .f input::placeholder,.ct__form .f textarea::placeholder{color:rgba(13,13,18,.28)}
.ct__form .f input:focus,.ct__form .f textarea:focus{border-color:var(--coral)}
.ct__form .send{margin-top:auto}
.ct__form .send__note{color:var(--ink)}
.ct__form .carry{background:rgba(13,13,18,.05);border-color:rgba(13,13,18,.12)}
.ct__form .carry__ico{background:var(--ink);color:var(--paper)}
@media (max-width:900px){.contact{padding:12vh var(--g)}.ct{grid-template-columns:1fr}.ct__side{min-height:auto}.ct__obj{position:relative;right:auto;top:auto;width:70%;margin:-10px auto 0}.ct__row{grid-template-columns:1fr}}
.scard__obj{width:min(104%,480px);top:40%}
.ct__obj{top:20%;right:-18%;width:70%}

/* ===== audit pass ===== */
/* shorter pinned scenes */
.rules{height:280vh}.ritual{height:230vh}.orbit{height:200vh}.refs{height:150vh}.work{height:380vh}
/* calmer type: a touch more air in bold headlines */
h1,h2,h3{letter-spacing:-.04em}
.hero__h{letter-spacing:-.05em}
.rules__big{font-size:clamp(56px,9.5vw,190px)}
/* navigation keeps its colour on coral instead of turning cyan */
body[data-theme="coral"] .logo,body[data-theme="coral"] .chat,body[data-theme="coral"] .index,body[data-theme="coral"] .mbtn,body[data-theme="coral"] .clock{mix-blend-mode:normal;color:var(--paper)}
body[data-theme="coral"] .ix.on{background:var(--paper);color:var(--coral)}
/* configurator scope + mobile price bar */
.cfg__scope{font-size:13px;opacity:.75;line-height:1.5}
.cfg__scope b{font-family:Frama}
.cfg__mini{display:none}
@media (max-width:1000px){
  .cfg__mini{display:flex;position:sticky;bottom:12px;z-index:5;align-items:center;gap:12px;padding:12px 16px 12px 20px;border-radius:99px;background:var(--ink);color:var(--paper);margin:10px 64px 0 0;box-shadow:0 20px 40px -20px rgba(0,0,0,.5)}
  .cfg__mini span{font-size:11px;letter-spacing:.14em;text-transform:uppercase;opacity:.6}
  .cfg__mini b{font-family:Frama;font-size:20px;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
  .cfg__miniGo{margin-left:auto;font-size:13px;opacity:.8}
  .cfg{grid-template-columns:1fr}
  .offer{padding-bottom:16vh}
}
/* team */
.team{padding:16vh var(--g) 10vh var(--side)}
@media (max-width:900px){.team{padding:12vh var(--g)}}
/* mobile: archive as a simple horizontal strip, references one at a time */
@media (max-width:820px){
  /* menu fits 390 px */
  .menu{padding:20px var(--g) 96px}
  .menu__info{flex-direction:column;gap:14px}
  .menu__info a{font-size:17px;word-break:break-all}
  .menu__close{padding-right:2px}
}

/* services: brand-coloured renders fill the card */
.scard{background:#140B2A}
.scard__obj{inset:0;left:0;top:0;width:100%;height:auto;aspect-ratio:auto;transform:none!important}
.scard__obj img,.scard__obj video{object-fit:cover;object-position:50% 38%;animation:none;transition:opacity .6s var(--ease),transform 1.2s var(--ease)}
.scard:hover .scard__obj img,.scard:hover .scard__obj video{transform:scale(1.06)}
.scard::before{display:none}
.scard__body{background:linear-gradient(rgba(20,11,42,0),#140B2A 42%)}
.ct__side{background:#140B2A}
.ct__obj{right:-6%;top:10%;width:76%;border-radius:24px;overflow:hidden;-webkit-mask:radial-gradient(closest-side,#000 62%,transparent);mask:radial-gradient(closest-side,#000 62%,transparent)}

/* hover: the render leans toward the cursor and a light sweep passes over it */
.scard__obj img{transform-origin:var(--gx,50%) var(--gy,40%)}
.scard:hover .scard__obj img{transform:scale(1.1) translate(calc((50% - var(--gx,50%)) * .06),calc((40% - var(--gy,40%)) * .06))}
.scard__glare{position:absolute;inset:-20%;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.22) 50%,transparent 60%);transform:translateX(-70%);pointer-events:none;mix-blend-mode:screen}
.scard:hover .scard__glare{transform:translateX(70%);transition:transform 1.4s var(--ease)}

/* ---- WORK: deck ---- */
.work__media{position:relative;cursor:auto;margin:0;overflow:visible}
.deck{position:absolute;inset:0;transform-origin:50% 45%}
.dcard{position:absolute;left:50%;top:46%;width:min(100%,62vh);aspect-ratio:4/3.1;border-radius:18px;overflow:hidden;background:#ddd5c8;box-shadow:0 30px 60px -30px rgba(13,13,18,.45);will-change:transform;transform-origin:50% 50%;transition:box-shadow .4s}
.dcard img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;transition:transform 1s var(--ease)}
.dcard.front:hover img{transform:scale(1.04)}
.dcard__lbl{position:absolute;left:14px;bottom:14px;padding:6px 12px;border-radius:99px;background:rgba(241,236,225,.92);color:var(--ink);font-family:Frama;font-weight:700;font-size:13px;opacity:0;transition:opacity .4s}
.dcard.front .dcard__lbl{opacity:1}
@media (max-width:900px){.dcard{width:min(92%,52vh);top:44%}}
.rules{height:360vh}
.rules__big{will-change:transform}

/* team: photos only */
.team{padding:16vh var(--g) 12vh var(--side);text-align:center}
.team__h{font-size:clamp(46px,6.4vw,120px);letter-spacing:-.045em}
.tp{position:relative;width:min(22vw,300px);aspect-ratio:3/4;border-radius:20px;overflow:hidden;transform:rotate(var(--r));box-shadow:0 30px 50px -30px rgba(13,13,18,.45);transition:transform .7s var(--ease)}
.tp:hover{transform:rotate(0) translateY(-14px) scale(1.04);z-index:2}
.tp img,.tp__img{width:100%;height:100%;object-fit:cover;display:block}
.tp figcaption{position:absolute;left:12px;bottom:12px;padding:6px 12px;border-radius:99px;background:rgba(241,236,225,.92);font-family:Frama;font-weight:700;font-size:13px;opacity:0;transform:translateY(8px);transition:opacity .4s,transform .5s var(--ease)}
.tp:hover figcaption{opacity:1;transform:none}
@media (max-width:820px){.team{padding:12vh var(--g)}.tp{width:calc(50% - 8px)}}

/* v5.2 references row — never pinned, never cropped */
@media (min-width:821px){
  .refs{height:auto;padding:16vh 0 14vh}
  .refs__stick{position:relative;height:auto;overflow:visible;padding:0 var(--g) 0 var(--side)}
  .qfan{position:relative;left:auto;bottom:auto;width:auto;height:520px;margin-top:6vh}
  .qcardf{left:calc(50% - var(--cw) / 2);top:60px;bottom:auto;min-height:calc(var(--cw) * 1.36);padding:24px;border-radius:14px;transform-origin:50% 60%;transition:box-shadow .5s var(--ease)}
  .qcardf blockquote{font-size:clamp(19px,1.5vw,25px);display:flex;align-items:flex-end}
  .qcardf::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(70% 50% at var(--gx,50%) 0%,rgba(255,255,255,.35),transparent 70%);opacity:0;transition:opacity .5s}
  .qcardf.is-on{box-shadow:0 60px 90px -40px rgba(13,13,18,.55)}
  .qcardf.is-on::after{opacity:1}
  .refs__note::after{content:"Prejdite myšou po kartách alebo ich prehoďte.";}
}

/* v5.2 hero: order restores itself, so the pill only invites play */
.hero__hint{position:static;transform:none;opacity:.6;transition:opacity .4s}
.is-ready .hero__hint.fade{opacity:.6}
.hero__tools{gap:16px}
.hero .hero__eyebrow{display:none}
@media (min-width:821px){.hero__foot{bottom:max(8vh,88px)}}

/* v5.3 work deck: bigger cards, water ripple canvas on the front card */
@media (min-width:901px){.work__stick{grid-template-columns:1fr minmax(0,46vw) 1fr}.work__name{font-size:clamp(40px,4.6vw,84px)}.dcard{width:min(100%,72vh)}}
.dcard__fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
.dcard__lbl{z-index:2}
.dcard:not(.front) .dcard__fx{display:none}

/* v5.3 services: objects sit above the copy, never under it */
.scard__obj{inset:0 0 auto 0;height:60%;-webkit-mask-image:radial-gradient(75% 70% at 50% 45%,#000 55%,transparent 100%);mask-image:radial-gradient(75% 70% at 50% 45%,#000 55%,transparent 100%)}
.scard__obj img,.scard__obj video{object-fit:contain;object-position:50% 55%}

/* v5.3 principles: scale from the top edge, so on exit the earlier cards peek out above the front one (incredibles) */
.rcard{transform-origin:50% 0}

/* v5.3 contact: the object lives in the empty middle of the card, clear of the headline and the steps */
@media (min-width:901px){
  .ct__side{display:grid;grid-template-rows:auto 1fr auto auto;gap:22px}
  .ct__obj{position:relative;right:auto;top:auto;justify-self:end;align-self:center;width:auto;height:100%;max-height:min(34vh,320px);aspect-ratio:1;margin:-2vh -4% -2vh 0}
  .ct__steps{margin-top:0}
}

/* v5.3 hero: a project photo under dark glass, rippling like water */
.hero__tools{left:50%;bottom:22px;transform:translateX(-50%);display:flex;align-items:center;gap:18px;white-space:nowrap}
.hero .hero__hint{font-size:10px;letter-spacing:.14em;opacity:.5}
.hero__h{text-shadow:0 2px 40px rgba(10,6,20,.35)}
.hero__stick{cursor:none}
@media (max-width:820px){.hero__tools{top:auto;bottom:4vh;left:var(--g);transform:none}}
@media (min-width:901px){
  .ct__obj{order:1;-webkit-mask-image:radial-gradient(closest-side,#000 70%,transparent);mask-image:radial-gradient(closest-side,#000 70%,transparent)}
  .ct__steps{order:2}.ct__meta{order:3}
}

/* v5.3 team: photos circle the headline */
.team{padding:8vh 0 10vh;overflow:hidden}
.team__stage{position:relative;height:min(100vh,940px);display:flex;align-items:center;justify-content:center;touch-action:pan-y;cursor:none;user-select:none;-webkit-user-select:none}
.team__stage .team__h{position:relative;z-index:1000;pointer-events:none;margin:0}
.tc{position:absolute;left:0;top:0;width:var(--tw,180px);aspect-ratio:3/4;margin:0;border-radius:16px;overflow:hidden;transform-origin:50% 50%;will-change:transform;box-shadow:0 30px 50px -30px rgba(13,13,18,.45);background:#DDD3C3}
.tc img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.tc__ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:linear-gradient(160deg,#E2DACB,#CFC3AF);color:rgba(13,13,18,.35);font-size:11px;letter-spacing:.16em;text-transform:uppercase}
.tc figcaption{position:absolute;left:10px;bottom:10px;padding:5px 10px;border-radius:99px;background:rgba(241,236,225,.92);font-family:Frama;font-weight:700;font-size:12px}
@media (max-width:820px){.team__stage{height:86vh}.team__stage .team__h{font-size:clamp(38px,11vw,60px)}}
@media (max-width:1240px){.hero .hero__hint{display:none}}
.team__stage .team__h{font-size:clamp(46px,7vw,132px)}
@media (max-width:1280px) and (min-width:901px){.work__stick{grid-template-columns:1fr minmax(0,40vw) 1fr}.work__name{font-size:clamp(34px,3.9vw,60px)}}
/* v5.4 work deck: bigger still */
@media (min-width:901px){
  .work__stick{grid-template-columns:1fr minmax(0,52vw) 1fr}
  .dcard{width:min(100%,80vh);top:42%}
  .work__name{font-size:clamp(34px,4.2vw,76px)}
}
@media (max-width:1280px) and (min-width:901px){.work__stick{grid-template-columns:1fr minmax(0,48vw) 1fr}.work__name{font-size:clamp(30px,3.6vw,54px)}}
/* v5.4 services/contact: transparent renders, no box behind them */
.scard__obj,.ct__obj{-webkit-mask-image:none!important;mask-image:none!important}
.scard__obj{height:62%}
.scard__obj img{object-fit:contain;object-position:50% 60%;filter:drop-shadow(0 30px 40px rgba(0,0,0,.45))}

/* v5.4 hero: clean headline, cursor trail of our work */
.hero__stick{cursor:inherit}
.hero__h{z-index:5;text-shadow:none}
.trail{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.hero__tools{gap:0}
.hero .hero__hint{display:inline-flex;align-items:center;gap:10px;font-size:10px;letter-spacing:.18em;opacity:.55}
.hero .hero__hint::before{content:"";width:18px;height:18px;border-radius:50%;border:1.5px solid currentColor;box-shadow:inset 0 0 0 4px transparent;animation:hintPulse 1.8s ease-in-out infinite}
@keyframes hintPulse{50%{transform:scale(.7);opacity:.5}}
@media (max-width:1240px){.hero .hero__hint{display:inline-flex}}

/* v5.4 team carousel */
.team__stage{height:min(100vh,960px);display:block}
.team__stage .team__h{position:absolute;left:0;right:0;top:9%;z-index:20;font-size:clamp(40px,5.4vw,104px)}
.tring{position:absolute;left:0;right:0;top:56%;height:0;transform-style:preserve-3d;transform:rotate(5deg)}
.tring .tc{position:absolute;left:50%;top:0;width:var(--tw,180px);aspect-ratio:1/1.15;border-radius:14px;overflow:hidden;backface-visibility:visible;box-shadow:none;background:#DDD3C3;filter:none!important}
.tc__in{position:absolute;inset:0 -10%;will-change:transform}
.tc__in img{width:100%;height:100%;object-fit:cover}
.tc__in .tc__ph{width:100%;height:100%}
.tc figcaption{left:calc(10% + 10px)}

/* v5.5 configurator: three clicks */
.cfg__k{display:flex;align-items:center;gap:12px}
.cfg__k i{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:var(--ink);color:var(--paper);font-style:normal;font-family:Frama;font-weight:700;font-size:12px;letter-spacing:0}
.tiles{grid-template-columns:repeat(4,1fr)}
.tile{padding:16px}
.tile b{font-size:clamp(18px,1.45vw,24px)}
.tile span{font-size:12.5px;line-height:1.35}
.cfg__size,.cfg__extra{display:flex;flex-wrap:wrap;gap:10px}
.cfg__size .chip,.cfg__extra .chip{height:auto;min-height:52px;padding:10px 18px;display:inline-flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:2px;border-radius:16px;text-align:left}
.cfg__size .chip{flex:1 1 0;min-width:140px}
.cfg__size .chip b,.cfg__extra .chip b{font-family:Frama;font-weight:700;font-size:15px;letter-spacing:-.02em}
.cfg__size .chip small,.cfg__extra .chip small{font-size:12px;opacity:.6}
.cfg__extra .chip[aria-pressed="true"] b::before{content:"✓ ";}
.cfg__size .chip[aria-pressed="true"],.cfg__extra .chip[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.cfg__size .chip[aria-pressed="true"] small,.cfg__extra .chip[aria-pressed="true"] small{opacity:.7}
@media (max-width:1000px){.tiles{grid-template-columns:1fr 1fr}}
@media (max-width:1280px){.tiles{grid-template-columns:1fr 1fr}}

/* v5.5 loader: shapes fall into the mark, the page opens through the eye */
.loader{background:var(--paper);color:var(--ink)}
.trail{z-index:6}

/* v5.6 hero: more air in the type, no italic, words tip in, client marquee, filled consult button */
.hero__h{letter-spacing:-.032em;line-height:1.02;font-size:clamp(46px,min(7.6vw,14vh),150px)}
.hl--soft{font-family:Frama;font-weight:700;font-style:normal;letter-spacing:-.032em;padding-left:0;color:color-mix(in srgb,var(--fg) 38%,transparent)}
.hero__h .w{display:inline-block;overflow:hidden;vertical-align:top;padding:.12em .12em .12em .04em;margin:-.12em -.12em -.12em -.04em;perspective:600px}
.hero__h .w>span{display:inline-block;transform:translateY(70%) rotateX(-40deg);opacity:0;transform-origin:50% 100%;transition:transform 1.1s cubic-bezier(.2,.9,.25,1),opacity .8s ease}
.is-ready .hero__h .w>span{transform:none;opacity:1}
@keyframes heroMarq{to{transform:translateX(-50%)}}
.chat{top:16px;padding:12px 20px;border-radius:99px;background:#fff;color:#000;font-family:Frama;font-weight:700;font-size:14px;letter-spacing:-.01em;text-transform:none;align-items:center}
body[data-theme="coral"] .chat{background:var(--paper);color:var(--coral)}
@media (max-width:820px){.chat{top:14px;padding:9px 14px;font-size:12px}.hero__h{font-size:clamp(38px,10.5vw,60px)}}
@media (prefers-reduced-motion:reduce){.hero__h .w>span{transform:none;opacity:1}}
body[data-theme="paper"] .hero .btn{background:var(--ink);color:var(--paper)}
#gl{width:100% !important;height:100% !important}

/* v5.7 mobile pass */
@media (max-width:900px){
  .work__list{display:none}
  .dcard{width:min(100%,56vh)}
}
@media (max-width:900px){
  .scard{min-height:0;justify-content:flex-start}
  .scard__obj{position:relative;inset:auto;height:230px;margin:-26px -26px 4px;width:auto}
  .scard__obj img{object-position:50% 50%}
}
@media (max-width:900px){.rules__dots{bottom:15vh}}
@media (max-width:900px){
  .ritual__stick{padding:120px var(--g) 90px;grid-template-rows:auto auto;align-content:center}
  .ritual__mark{flex-direction:column;align-items:center;gap:14px}
  .ritual__mark svg{width:min(56vw,34vh);height:min(56vw,34vh)}
  .ritual__bar{bottom:15vh}
}
html,body{overflow-x:clip}
.work__stick{overflow:clip}
@media (max-width:820px){.team__stage{height:78vh}.team__stage .team__h{top:6%}.tring{top:58%}}
@media (max-width:820px){.team__stage{height:68vh}.tring{top:56%}}
@media (max-width:820px){.refs__note{flex-wrap:wrap;padding-right:var(--g)}.refs__note::after{width:100%;margin-left:0}}
.cfg__k{justify-content:flex-start}
@media (max-width:1000px){
  .cfg__mini{margin:10px 128px 0 0;bottom:16px;padding:10px 16px}
  .cfg__mini span{display:none}
  .cfg__mini b{white-space:nowrap}
}
@media (max-width:820px){.fan{height:min(64vh,560px)}.fcard{bottom:-40px;padding:18px}}
@media (max-width:820px){
  .hero__h{top:33%;font-size:clamp(40px,11.4vw,58px)}
  .hero__tools{display:none}
  .hero__cta .link{display:none}
  .hero__foot{bottom:13vh}
}
.pj-logo{white-space:nowrap}
@media (max-width:600px){.pj-top .btn{height:42px;padding:0 16px;font-size:13px}.pj-logo{font-size:16px}}

/* v5.8 phone */
/* team: "Malý tým." on top, "Veľké výsledky." huge and grey behind the turning photos */
.team__stage .team__h{font-size:clamp(36px,4.6vw,88px)}
.team__big{position:absolute;left:0;right:0;top:57%;transform:translateY(-50%);margin:0;z-index:1;text-align:center;font-family:Frama;font-weight:700;font-size:clamp(84px,12.5vw,250px);line-height:.84;letter-spacing:-.035em;color:color-mix(in srgb,var(--fg) 30%,transparent);pointer-events:none}
.tring{z-index:2}
@media (max-width:820px){
  .team__stage .team__h{font-size:clamp(34px,10vw,52px);top:7%}
  .team__big{font-size:19vw;top:56%}
}
/* archive: an oval of work around the headline that turns as you scroll */
@media (max-width:820px){
  .orbit{height:190vh}
  .orbit__stick{position:sticky;top:0;height:100svh;overflow:hidden;display:block;padding:0}
  .orbit__center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:62vw;text-align:center;padding:0}
  .orbit__center h2{font-size:clamp(30px,8.6vw,44px)}
  .orbit__center .btn{height:46px;padding:0 18px;font-size:14px}
  .orbit__ring{position:absolute;inset:0;display:block;padding:0;overflow:visible}
  .ocard span{font-size:10px;padding:4px 8px;left:6px;bottom:6px}
  .orbit__hint{display:none}
}
/* references: a pile you flick through */
@media (max-width:820px){
  .refs{height:auto;padding:12vh 0 10vh}
  .refs__stick{position:relative;height:auto;overflow:visible;padding:0 var(--g)}
  .refs__note::after{content:"Odhoďte kartu prstom do strany."}
  .qfan{position:relative;left:auto;bottom:auto;width:auto;height:420px;margin-top:5vh}
  .qcardf{left:calc(50% - var(--cw) / 2);top:20px;bottom:auto;min-height:calc(var(--cw) * .82);touch-action:pan-y;transform-origin:50% 80%}
  .qcardf blockquote{font-size:22px}
}
/* footer on the phone: clean — one big call to action, two link columns, the name as a wordmark */
.fm,.fm__big{display:none}
@media (max-width:820px){
  .foot{padding:12vh 0 0;overflow:hidden}
  .foot__meta,.fan{display:none}
  .fm{display:block;padding:0 var(--g)}
  .fm__cta{display:flex;flex-direction:column;gap:14px;padding:26px;border-radius:24px;background:var(--coral);color:var(--paper)}
  .fm__cta small{font-size:11px;letter-spacing:.16em;text-transform:uppercase;opacity:.85}
  .fm__cta b{font-family:Frama;font-weight:700;font-size:44px;line-height:.92;letter-spacing:-.035em}
  .fm__cta span{font-family:Frama;font-weight:700;font-size:17px;margin-top:10px}
  .fm__cols{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:7vh}
  .fm__cols div{display:flex;flex-direction:column;gap:10px}
  .fm__cols p{font-size:13px;opacity:.5;margin-bottom:4px}
  .fm__cols a,.fm__cols span{font-family:Frama;font-weight:700;font-size:15px;letter-spacing:-.01em;text-transform:uppercase}
  .foot__row{margin:7vh var(--g) 0;flex-direction:column;align-items:flex-start;gap:10px}
  .foot__row nav{display:none}
  .fm__big{display:block;margin:4vh 0 0;padding:0 0 92px;text-align:center;font-family:Frama;font-weight:700;font-size:12.4vw;line-height:.82;letter-spacing:-.045em;white-space:nowrap;opacity:.14}
}
.team__big{font-size:clamp(84px,12vw,240px);line-height:1.5}
@media (max-width:820px){.team__big{font-size:22vw;line-height:1.75;top:55.5%}}
@media (max-width:820px){.team__stage .team__h{top:15%}}

/* v5.9 audit pass */
/* services: "when you need it" first; the + is a real toggle, nothing hides behind hover */
.scard{cursor:pointer}
.scard__more{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .6s var(--ease),opacity .4s,margin .5s var(--ease);margin-top:0}
.scard__more>*{min-height:0;overflow:hidden}
.scard__more{gap:0}
.scard__more p{margin-bottom:12px}
.scard ul,.scard:hover ul,.scard:focus-visible ul{max-height:none;opacity:1;margin-top:0}
.scard.open .scard__more{grid-template-rows:1fr;opacity:1;margin-top:14px}
.scard__more{grid-template-rows:0fr}
.scard__more>div,.scard__more>p,.scard__more>ul{overflow:hidden}
.scard:hover .scard__plus{transform:none;background:rgba(241,236,225,.16)}
.scard.open .scard__plus{transform:rotate(45deg);background:var(--coral)}
.scard__plus{border:0;color:inherit;cursor:pointer}
@media (max-width:1000px){.scard ul{max-height:none}}
/* principles & process shorter; process steps readable at once */
.rules{height:250vh}.ritual{height:190vh}
.rs{filter:none!important;opacity:.5}
.rs.on,.rs.is-on{opacity:1}
@media (min-width:821px){.orbit{height:150vh}}
@media (max-width:820px){.orbit{height:150vh}}
/* calmer headings: some fully bold, the second line in grey instead of italic */
.h-plain em{font-style:normal;font-weight:700;letter-spacing:inherit;color:color-mix(in srgb,var(--fg) 38%,transparent)}
/* who we're for */
.fit{padding:16vh var(--g) 10vh var(--side)}
.fit__list{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,3vw,48px);margin-top:4vh;counter-reset:f}
.fit__list li{counter-increment:f;display:flex;flex-direction:column;gap:12px;padding-top:22px;border-top:1px solid var(--line)}
.fit__list li::before{content:counter(f,decimal-leading-zero);font-family:Frama;font-weight:100;font-size:22px}
.fit__list b{font-family:Frama;font-weight:700;font-size:clamp(22px,2vw,32px);letter-spacing:-.03em;line-height:1.05}
.fit__list span{font-size:15px;opacity:.72;max-width:34ch}
@media (max-width:820px){.fit{padding:10vh var(--g) 4vh}.fit__list{grid-template-columns:1fr;gap:22px}.fit__list li{gap:8px;padding-top:16px}}
/* configurator: range price, "in the price" chip, help path */
.cfg__price{font-size:clamp(40px,4.4vw,78px)!important;white-space:nowrap}
.chip.is-incl{opacity:.75;cursor:default;border-style:dashed}
.chip.is-incl small{opacity:1!important;color:var(--coral)}
.cfg__out.is-help .cfg__bar,.cfg__out.is-help .cfg__legend,.cfg__out.is-help .cfg__care{display:none}
/* contact: the message reads lighter and has room */
.ct__form textarea{font-family:FramaText,Frama!important;font-weight:400!important;font-size:17px!important;line-height:1.5;min-height:150px;letter-spacing:0!important}
@media (max-width:820px){.ct__form textarea{min-height:190px;font-size:16px!important}}
/* references: counter and arrows */
.qnav{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:2vh;position:relative;z-index:70}
.qnav__b{width:48px;height:48px;border-radius:50%;border:1px solid var(--line);font-size:18px;transition:background .3s,color .3s}
.qnav__b:hover{background:var(--ink);color:var(--paper)}
.qnav__n{font-family:Frama;font-weight:700;font-size:15px;font-variant-numeric:tabular-nums;min-width:52px;text-align:center}
/* fixed header steps aside while reading down, comes back on the way up */
.logo,.chat{transition:opacity .4s var(--ease),transform .5s var(--ease)}
body.hide-top .logo,body.hide-top .chat{transform:translateY(-140%);opacity:0}
.ocard{aspect-ratio:16/10;margin:calc(var(--ow) * -.3125) 0 0 calc(var(--ow) / -2)}
/* air between words in display type (so "zatiaľ vyzerá" never reads as one word) */
h1,h2,.hero__h,.team__big,.rules__big{word-spacing:.07em}
/* footer: nothing under the fixed menu button */
@media (min-width:821px){.foot{padding-bottom:100px}.foot__row{padding-right:150px}}
/* v5.10 hero: the trail runs everywhere, behind the headline; a paper outline keeps every letter readable on top of a photo */
.trail{z-index:2}
.hero__h{z-index:5;-webkit-text-stroke:.07em var(--paper);paint-order:stroke fill}
/* v5.10 recognition section, redone: three big lines, the one in the middle of the screen lights up */
.fit{padding:22vh var(--g) 16vh var(--side)}
.fit__list{display:flex!important;flex-direction:column;gap:14vh;margin:0;grid-template-columns:none}
.fit__list li{--lit:.2;display:grid!important;grid-template-columns:clamp(60px,7vw,120px) minmax(0,1fr);column-gap:clamp(16px,3vw,48px);row-gap:18px;padding:0!important;border:0!important;opacity:calc(.16 + var(--lit) * .84);transform:translateX(calc((1 - var(--lit)) * -18px));transition:opacity .25s linear}
.fit__list li::before{grid-row:1/3;font-family:Frama;font-weight:100;font-size:clamp(40px,4.6vw,86px)!important;line-height:.9;color:var(--coral)}
.fit__list b{font-family:Frama;font-weight:700;font-size:clamp(38px,5.4vw,104px)!important;line-height:.98!important;letter-spacing:-.035em!important;word-spacing:.07em;max-width:15ch}
.fit__list span{font-size:clamp(16px,1.25vw,20px)!important;opacity:.7;max-width:44ch!important}
@media (max-width:820px){.fit{padding:16vh var(--g) 12vh}.fit__list{gap:10vh}.fit__list li{grid-template-columns:1fr;row-gap:12px}.fit__list li::before{grid-row:auto;font-size:40px!important}.fit__list b{font-size:clamp(32px,9.4vw,46px)!important}}
/* archive back to the long, cinematic flight */
@media (min-width:821px){.orbit{height:200vh}}
@media (max-width:820px){.orbit{height:180vh}}
/* services: collapsed list takes no room, so the copy sits at the bottom; the object is centred in the space above */
.scard__more{grid-template-rows:0fr!important}
.scard.open .scard__more{grid-template-rows:1fr!important}
.scard__moreIn{min-height:0;overflow:hidden}
.scard__moreIn p{margin-bottom:12px}
@media (min-width:901px){
  .scard__obj{height:auto;bottom:calc(var(--bodyH,190px) + 10px)}
  .scard__obj img,.scard__obj video{object-position:50% 55%}
}
/* looser tracking on every display heading, like the hero (the old -.055em packed letters together) */
main h2,.rules__big,.ct__big,.team__h,.team__big,.fit__list b,.work__name span,.scard h3,.rcard h3,.rs h3,.tile b,.pj h1,.pj h2{letter-spacing:-.03em!important}
main h2 em,.rules__big em,.ct__big em{letter-spacing:-.02em!important}
@media (min-width:821px){.refs{padding-top:10vh}}
/* footer fan: whole cards, resting on a baseline instead of sinking off the bottom edge */
@media (min-width:821px){
  .fan{overflow:hidden;height:min(80vh,740px)}
  .fcard{bottom:120px}
  .foot__row{position:relative;z-index:2}
}

/* ===== hero variants (?hero=ihrisko / ?hero=mix): headline on the left, the toy on the right ===== */
.hero-alt .trail,.hero-alt .hero__tools{display:none}
.hero-alt .hero__h{right:50%;font-size:clamp(40px,4.7vw,92px);-webkit-text-stroke:0}
.hp{position:absolute;left:0;top:0;cursor:grab;user-select:none;-webkit-user-select:none;will-change:transform;border-radius:14px;box-shadow:0 18px 40px -18px rgba(13,13,18,.35);touch-action:none}
.hp.is-drag{cursor:grabbing;box-shadow:0 34px 60px -20px rgba(13,13,18,.45);z-index:5}
@keyframes hpPulse{from{transform:scale(.85);opacity:.8}to{transform:scale(1.25);opacity:0}}
@media (max-width:820px){
  .hero-alt .hero__h{right:var(--g);top:21%;font-size:clamp(34px,9.6vw,52px)}
  .hero-alt .hero__foot p{display:none}
}
@keyframes hpSpin{to{rotate:360deg}}

/* v5.12 footer fan: the lowest corner of the outer cards always stays inside */
@media (min-width:821px){.fcard{bottom:calc(var(--cw,280px) * .42 + 14px)!important}.fan{height:min(80vh,740px)}}

/* v5.12 hero: a heap of our work. Headline and copy sit high, the heap builds up below them */
.hero__h{-webkit-text-stroke:0!important}
.hero:not(.x) .hero__h{top:15vh;transform:none;z-index:5}
.hero__foot{top:calc(15vh + 2.2 * clamp(46px,min(7.6vw,14vh),150px) + 26px);bottom:auto!important;justify-content:flex-start;align-items:center;gap:48px;z-index:7}
.hero__foot p{text-shadow:0 0 18px var(--paper),0 0 4px var(--paper)}
.pile{position:absolute;inset:0;z-index:6;pointer-events:none;overflow:hidden}
.pile__i{position:absolute;left:0;top:0;will-change:transform;transform:scale(0)}
.pile__i img{display:block;width:100%;height:100%;object-fit:cover;border-radius:14px;box-shadow:0 22px 40px -22px rgba(13,13,18,.55);pointer-events:none}
.pile__i.is-obj img{object-fit:contain;border-radius:0;box-shadow:none;filter:drop-shadow(0 16px 22px rgba(42,21,80,.3));transform:scale(1.18)}
.pile__btn{position:absolute;left:50%;bottom:24px;z-index:8;display:inline-flex;align-items:center;gap:12px;height:56px;padding:0 24px 0 14px;border-radius:99px;background:var(--ink);color:var(--paper);font-family:Frama;font-weight:700;font-size:16px;letter-spacing:-.01em;box-shadow:0 20px 40px -18px rgba(13,13,18,.6);transform:translate(-50%,140%) scale(.9);opacity:0;pointer-events:none;transition:transform .6s cubic-bezier(.2,1.4,.3,1),opacity .4s,background .3s}
.pile__btn svg{width:30px;height:30px;color:var(--coral);transition:transform .8s var(--ease)}
.pile__btn.is-on{transform:translate(-50%,0) scale(1);opacity:1;pointer-events:auto}
.pile__btn:hover svg{transform:rotate(180deg) scale(1.1)}
.pile__btn.is-busy svg{animation:pileSpin .6s linear infinite}
.pile__btn.is-done span{font-size:0}.pile__btn.is-done span::after{content:"V poriadku";font-size:16px}
@keyframes pileSpin{to{transform:rotate(360deg)}}
.hero__tools{transition:opacity .4s}
.has-pile .hero__tools{opacity:0!important}
@media (max-width:820px){
  .hero:not(.x) .hero__h{top:13vh;transform:none}
  .hero__foot{top:calc(13vh + 3.25 * clamp(40px,11.4vw,58px) + 18px);flex-direction:column;align-items:flex-start;gap:18px}
  .hero__foot p{display:block}
  .pile__btn{bottom:92px;height:50px;font-size:15px}
}
@media (max-width:820px){.pile__btn{left:var(--g);bottom:28px;transform:translate(0,140%) scale(.9)}.pile__btn.is-on{transform:translate(0,0) scale(1)}}
/* smaller "Spraviť poriadok" */
.pile__btn{height:42px;padding:0 16px 0 10px;gap:8px;font-size:13px;bottom:22px}
.pile__btn svg{width:22px;height:22px}
.pile__btn.is-done span::after{font-size:13px}
@media (max-width:820px){.pile__btn{height:40px;font-size:13px;bottom:30px}}
/* quieter: a light outline chip, so it never competes with the real buttons */
.pile__btn{background:rgba(241,236,225,.72);color:var(--ink);border:1px solid rgba(13,13,18,.18);box-shadow:none;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);font-family:FramaText,Frama;font-weight:400;font-size:12px;letter-spacing:.06em;text-transform:uppercase;height:36px;padding:0 14px 0 9px}
.pile__btn svg{width:18px;height:18px;color:var(--ink);opacity:.8}
.pile__btn:hover{background:var(--paper);border-color:rgba(13,13,18,.4)}
.pile__btn.is-done span::after{font-size:12px}
@media (max-width:820px){.pile__btn{height:36px;font-size:11px}}
/* archive headline: two calm lines, small enough to leave the ring room */
@media (min-width:821px){
  .orbit__center{width:min(56vw,760px)}
  .orbit__center h2{font-size:clamp(36px,min(4.4vw,8.4vh),88px)!important}
}
/* footer fan: nothing clips it any more (no cut card, no cut shadow); it rests high enough to clear the link row */
@media (min-width:821px){
  .fan{overflow:visible!important;height:min(82vh,760px)}
  .fcard{bottom:calc(var(--cw,280px) * .62 + 20px)!important}
  .foot{overflow:clip}
  .foot__row{position:relative;z-index:3}
}
@media (min-width:821px){.fcard{bottom:0!important}.fan{height:min(76vh,700px)}}
@media (min-width:821px){.orbit__center h2{font-size:clamp(32px,min(4.2vw,7.2vh),84px)!important;margin:10px 0 22px}}

/* ===================== v6 · ALL WORK (projekty.html) — big clickable cards ===================== */
.wk{padding:6vh var(--g) 12vh}

/* ===================== v6 · CASE STUDY (projekt.html) ===================== */
.cs{padding:3vh var(--g) 10vh}
.rv{opacity:0;transform:translateY(34px);transition:opacity .9s var(--ease) var(--d,0s),transform 1s var(--ease) var(--d,0s)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv,.wk-card{opacity:1;transform:none;transition:none}}

/* v7 — service objects act out the service: the cursor clicks a web, the pen draws the mark, the megaphone shouts */
.scard .fx{position:absolute;top:4%;bottom:0;left:50%;aspect-ratio:1;translate:-50% 0;container-type:size}
.fx>*{position:absolute}
.scard .fx .fx__o{inset:0;width:100%;height:100%;z-index:2;transition:none!important;transform-origin:50% 50%!important;will-change:transform}
/* web: a capsule machine — turn the knob, out comes an enquiry */
.fx__m img{position:absolute;inset:0;width:100%;height:100%;transform:none!important;transition:none!important}
.fx__crop{position:absolute;inset:0;background:url(assets/3d/automat.webp) 0 0/100% 100% no-repeat}
.fx__knob{clip-path:circle(7.8% at 50.1% 61.1%);transform-origin:50.1% 61.1%}
.fx__globe{clip-path:circle(21.5% at 49.5% 29%);transform-origin:49.5% 29%}
.scard .fx .fx__cap{left:0;top:0;width:24%;height:24%;z-index:3;opacity:0;transform:translate(38cqw,65cqh) scale(.42);transition:opacity .35s,transform .6s var(--ease)}
.fx.is-out .fx__cap{opacity:1;transition:opacity .15s}
.fx__note{left:88%;top:60%;z-index:4;display:flex;align-items:center;gap:.5em;padding:.6em 1.05em;border-radius:99px;background:var(--paper);color:var(--ink);font:600 clamp(11px,4.2cqw,15px)/1 Frama,sans-serif;letter-spacing:.01em;white-space:nowrap;box-shadow:0 10px 30px rgba(0,0,0,.35);opacity:0;transform:translate(-50%,-30%) scale(.6);transition:opacity .25s,transform .7s cubic-bezier(.34,1.56,.64,1)}
.fx__note::before{content:"";width:.55em;height:.55em;border-radius:50%;background:var(--coral)}
.fx.is-done .fx__note{opacity:1;transform:translate(-50%,-50%) scale(1)}
/* identity + campaigns: live 3D objects (svc3d.js) */
/* the clips are encoded onto the card colour (#140B2A) with room around the object, and their edges fade out,
   so no browser's colour handling can draw a frame around them */
.scard .fx .fx__v{inset:0;width:100%;height:100%;object-fit:contain;z-index:2;opacity:1;transform:none!important;scale:1.1;transition:none;pointer-events:none;
  -webkit-mask-image:radial-gradient(closest-side,#000 80%,transparent 100%);mask-image:radial-gradient(closest-side,#000 80%,transparent 100%)}

/* v10 loader: hello → our walker rolling the ◎ over a hairline → the paper lifts like a curtain */
.loader.ld5{background:var(--paper);color:var(--ink);display:block;-webkit-mask:none;mask:none;clip-path:inset(0 0 var(--lift,0%) 0)}
.loader.ld5.is-gone{display:none}
.ld5__hello{position:absolute;left:50%;top:50%;translate:-50% -50%;margin:0;white-space:nowrap;font-family:FramaText,Frama;font-weight:400;font-size:clamp(20px,2.2vw,34px);letter-spacing:-.01em;color:color-mix(in srgb,var(--ink) 55%,transparent);opacity:0;filter:blur(6px);transition:opacity .5s var(--ease),filter .6s var(--ease)}
.loader.is-hello .ld5__hello{opacity:1;filter:none}
.ld5__content{position:absolute;inset:0;opacity:0;transition:opacity .45s var(--ease)}
.loader.is-run .ld5__content{opacity:1}
.loader.is-out .ld5__content{opacity:0;transition:opacity .4s .12s var(--ease)}
.ld5__fig{position:absolute;left:50%;top:50%;width:clamp(200px,19vw,280px);aspect-ratio:1;translate:-50% -58%}
.ld5__fig video{width:100%;height:100%;object-fit:contain;display:block}
.ld5__pct{position:absolute;left:50%;top:calc(94% + 16px);translate:-50% 0;margin:0;font-family:FramaText,Frama;font-size:14px;letter-spacing:0;font-variant-numeric:tabular-nums;color:var(--ink);white-space:nowrap}
.ld5__bar{position:absolute;left:50%;top:calc(50% + clamp(200px,19vw,280px) * .36);width:clamp(200px,18vw,260px);height:1px;translate:-50% 0;background:rgba(13,13,18,.12)}
.ld5__bar i{position:absolute;inset:0;background:var(--ink);transform:scaleX(0);transform-origin:left center}
.loader.is-out .ld5__bar i{transform-origin:right center;transition:transform .45s var(--ease)}
.loader.is-out .ld5__bar i{transform:scaleX(0)!important}

/* v9 — all projects: editorial cards with the project's own clip, a list view with a floating preview */
.wx{padding-top:5vh}
.wx-head{display:grid;grid-template-columns:1fr auto;column-gap:4vw;align-items:end;margin-bottom:7vh}
.wx-head .eyebrow{grid-column:1/-1}
.wx-head .eyebrow b{font-weight:700}
.wx-title{font-size:clamp(64px,11vw,210px);letter-spacing:-.035em;line-height:.88;margin:18px 0 0}
.wx-w{display:inline-block;animation:wxRise 1.1s var(--ease) both}
.wx-w--soft{color:color-mix(in srgb,var(--ink) 34%,transparent);animation-delay:.08s}
@keyframes wxRise{from{opacity:0;transform:translateY(.25em);filter:blur(8px)}}
.wx-sub{max-width:30ch;font-size:clamp(16px,1.2vw,19px);line-height:1.45;opacity:.7;padding-bottom:1.2em}
.wx-bar{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-top:5vh;padding-top:22px;border-top:1px solid var(--line)}
.wx-filter{display:flex;flex-wrap:wrap;gap:8px}
.wx-chip{height:44px;padding:0 20px;border-radius:99px;border:1px solid var(--line);font-family:Frama;font-weight:700;font-size:15px;letter-spacing:0;display:inline-flex;align-items:center;gap:6px;transition:background .35s,color .35s,border-color .35s}
.wx-chip sup{font-family:FramaText,Frama;font-weight:400;font-size:10px;opacity:.55;align-self:flex-start;margin-top:12px}
.wx-chip:hover{border-color:var(--ink)}
.wx-chip[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.wx-view{display:flex;padding:4px;border-radius:99px;background:rgba(13,13,18,.06)}
.wx-view button{height:36px;padding:0 16px;border-radius:99px;font-family:Frama;font-weight:700;font-size:14px;opacity:.55;transition:background .35s,opacity .35s,box-shadow .35s}
.wx-view button[aria-pressed="true"]{background:var(--paper);opacity:1;box-shadow:0 6px 18px -8px rgba(13,13,18,.35)}

/* grid: one calm, even rhythm — three across, every card the same size */
.wx-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(18px,2vw,32px);row-gap:clamp(40px,4.5vw,72px)}
.wx-card{display:block;color:inherit;opacity:0;transform:translateY(40px);transition:opacity .9s var(--ease) calc(var(--i,0) % 3 * .08s),transform 1.1s var(--ease) calc(var(--i,0) % 3 * .08s)}
.wx-card.in{opacity:1;transform:none}
.wx-card[hidden]{display:none}
.wx-media{position:relative;aspect-ratio:4/3;border-radius:24px;overflow:hidden;background:var(--c);isolation:isolate;cursor:none;
  clip-path:inset(6% 4% 6% 4% round 24px);transition:clip-path 1.2s var(--ease) calc(var(--i,0) % 3 * .08s),box-shadow .8s var(--ease)}
.wx-card.in .wx-media{clip-path:inset(0 0 0 0 round 24px)}
.wx-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.1);transition:transform 1.5s var(--ease),opacity .6s}
.wx-card.in .wx-media img{transform:scale(1)}
.wx-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity .6s var(--ease)}
.wx-card.is-play .wx-media video{opacity:1}
.wx-card.is-play .wx-media img{opacity:0}
.wx-media .wx-n{position:absolute;left:14px;top:14px;z-index:2;height:28px;min-width:40px;padding:0 10px;border-radius:99px;display:inline-flex;align-items:center;justify-content:center;
  background:rgba(241,236,225,.82);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--ink);font-family:Frama;font-weight:700;font-size:12px;letter-spacing:.04em;opacity:1;font-variant-numeric:tabular-nums}
.wx-cur{position:absolute;left:0;top:0;width:96px;height:96px;margin:-48px 0 0 -48px;border-radius:50%;background:var(--coral);color:var(--ink);display:flex;align-items:center;justify-content:center;gap:2px;
  font-family:Frama;font-weight:700;font-size:14px;pointer-events:none;z-index:3;scale:0;transition:scale .5s var(--ease)}
.wx-cur i{font-style:normal}
/* two tidy lines: name + arrow, services + year */
.wx-meta{display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:16px;row-gap:6px;margin-top:18px}
.wx-meta h2{font-size:clamp(22px,1.7vw,30px);letter-spacing:-.02em;line-height:1.05}
.wx-go{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:15px;transition:background .4s,color .4s,border-color .4s,transform .5s var(--ease)}
.wx-tags{font-size:12px;letter-spacing:.1em;text-transform:uppercase;opacity:.55;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wx-year{font-family:Frama;font-weight:400;font-size:14px;opacity:.55;font-variant-numeric:tabular-nums;justify-self:end}
@media (hover:hover) and (pointer:fine){
  .wx-card:hover .wx-media img{transform:scale(1.05)}
  .wx-card:hover .wx-media{box-shadow:0 40px 70px -40px var(--c)}
  .wx-media:hover .wx-cur{scale:1}
  .wx-card:hover .wx-go{background:var(--ink);color:var(--paper);border-color:var(--ink);transform:rotate(45deg)}
  .wx-grid:has(.wx-card:hover) .wx-card:not(:hover),.wx-more__grid:has(.wx-card:hover) .wx-card:not(:hover){opacity:.6;transition:opacity .5s}
}
.wx-card--sm .wx-media{border-radius:20px;clip-path:inset(6% round 20px)}
.wx-card--sm.in .wx-media{clip-path:inset(0 round 20px)}
.wx-card--sm .wx-cur{width:80px;height:80px;margin:-40px 0 0 -40px;font-size:13px}
.wx-card--sm .wx-meta h2{font-size:clamp(18px,1.3vw,22px)}
.wx-card--sm .wx-go{width:32px;height:32px;font-size:13px}

/* list */
.wx-list{border-top:1px solid var(--line)}
.wx-list[hidden],.wx-grid[hidden]{display:none}
.wx-row{display:grid;grid-template-columns:60px minmax(0,1.6fr) minmax(0,1fr) minmax(0,1fr) 110px;align-items:center;gap:20px;padding:clamp(18px,2.2vw,30px) 0;border-bottom:1px solid var(--line);color:inherit;position:relative;transition:color .4s}
.wx-row[hidden]{display:none}
.wx-row__name{font-family:Frama;font-weight:700;font-size:clamp(30px,4.4vw,80px);letter-spacing:-.03em;line-height:1;transition:transform .6s var(--ease)}
.wx-row__ind,.wx-row__svc{font-size:14px;opacity:.6}
.wx-row .wx-year{text-align:right}
.wx-row__thumb{display:none}
.wx-row::before{content:"";position:absolute;inset:0 -2vw;background:var(--c);opacity:0;z-index:-1;border-radius:18px;transition:opacity .4s}
@media (hover:hover) and (pointer:fine){
  .wx-list:has(.wx-row:hover) .wx-row:not(:hover){color:color-mix(in srgb,var(--ink) 30%,transparent)}
  .wx-row:hover .wx-row__name{transform:translateX(18px)}
}
.wx-float{position:fixed;left:0;top:0;z-index:40;width:clamp(260px,26vw,420px);aspect-ratio:16/10;border-radius:22px;overflow:hidden;background:var(--c,#A79BFF);pointer-events:none;opacity:0;box-shadow:0 40px 80px -30px rgba(13,13,18,.45)}
.wx-float img,.wx-float video{position:absolute;inset:0;width:100%;height:100%}
.wx-float img{object-fit:cover}.wx-float video{object-fit:contain;opacity:0;transition:opacity .4s}
.wx-float.has-vid video{opacity:1}
body:not(.wx-is-list) .wx-float{display:none}

@media (max-width:900px){
  .wx-head{grid-template-columns:1fr}
  .wx-sub{padding-bottom:0;margin-top:20px}
  .wx-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wx-media{border-radius:20px;cursor:auto}
  .wx-cur{display:none}
  .wx-row{grid-template-columns:72px 1fr auto;gap:14px}
  .wx-row__thumb{display:block;grid-row:1;grid-column:1;width:72px;aspect-ratio:1;object-fit:cover;border-radius:12px}
  .wx-row .wx-n,.wx-row__ind,.wx-row__svc{display:none}
  .wx-row__name{font-size:clamp(24px,7vw,40px)}
}
@media (max-width:620px){.wx-grid{grid-template-columns:1fr;row-gap:44px}}
@media (max-width:520px){.wx-bar{align-items:flex-start}}
@media (prefers-reduced-motion:reduce){.wx-card,.wx-media,.wx-media img,.wx-w{transition:none;animation:none;transform:none;clip-path:none;opacity:1}}
@media (max-width:640px){
  .wx-filter{flex-wrap:nowrap;overflow-x:auto;margin:0 calc(var(--g) * -1);padding:0 var(--g);scrollbar-width:none;width:calc(100% + var(--g) * 2)}
  .wx-filter::-webkit-scrollbar{display:none}
  .wx-chip{flex:none;height:40px;padding:0 16px;font-size:14px}
}
.dcard video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
/* the picture overhangs the card by a pixel so scaled cards never show a hairline of the card colour */
.dcard img,.dcard__fx{position:absolute;inset:-1px;width:calc(100% + 2px);height:calc(100% + 2px)}
.dcard{background:#16121a}

/* v11 deck: stacked cards sit darker (set per card from main.js) */
.dcard::after{content:'';position:absolute;inset:0;background:#0d0d12;opacity:var(--dim,0);pointer-events:none;z-index:2;border-radius:inherit}

/* v11 archive:: cards on a circle, turned with it, one big muted headline in the middle */
.orbit .orbit__stick{cursor:auto}
.orbit .orbit__ring{position:absolute;inset:auto;left:50%;top:50%;width:0;height:0;transition:transform .64s cubic-bezier(.36,.33,0,1)}
.orbit .orbit__stick.is-cta .orbit__ring{transform:scale(.8)}
.orbit .ocard{position:absolute;left:0;top:0;margin:0;aspect-ratio:auto;width:120px;height:113px;border-radius:clamp(8px,.62vw,14px);overflow:hidden;box-shadow:none;transform-origin:50% 50%;will-change:transform,opacity;background:#d9d2c5}
.ocard__c{position:absolute;inset:0;display:block}
.orbit .ocard img,.ocard video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transform:none}
.ocard video{opacity:0;transition:opacity .45s}
.ocard.is-play video{opacity:1}
.orbit .orbit__center{width:auto;pointer-events:none;z-index:30}
.orbit__cta{pointer-events:auto;display:inline-block;text-align:center;color:#8E827C;text-decoration:none;font-family:Frama;font-weight:800;font-size:clamp(52px,8.2vw,168px);line-height:.86;letter-spacing:0;perspective:400px;transform-style:preserve-3d;transition:color .64s cubic-bezier(.36,.33,0,1)}
.orbit__stick.is-cta .orbit__cta,.orbit__cta:focus-visible{color:var(--ink)}
.oc-w{display:inline-block;position:relative;will-change:transform,opacity}
.orbit__cta:focus-visible{outline:2px solid var(--coral);outline-offset:10px;border-radius:12px}
@media (max-width:820px){.orbit__cta{font-size:clamp(46px,14vw,80px)}}

/* v11 loader in the site's own language: the hero's type, an ink pictogram rolling the mark, a big counter, one hairline */
.ld5__hello{font-family:Frama;font-weight:800;font-size:clamp(34px,4.6vw,78px);letter-spacing:0;line-height:1;color:var(--ink);white-space:normal;text-align:center;width:min(90vw,1100px)}
.ld5__hello em{font-style:normal;color:#9A938A}
.loader.ld5 .ld5__fig{width:clamp(150px,13vw,210px);translate:-50% -62%}
.ld5__brand{position:absolute;left:var(--g);top:calc(var(--g) * .9);margin:0;font-family:Frama;font-weight:800;font-size:20px;letter-spacing:0;color:var(--ink)}
.ld5__brand em{font-style:normal;font-weight:300}
.loader.ld5 .ld5__pct{position:absolute;left:var(--g);top:auto;bottom:calc(var(--g) * .6);translate:none;margin:0;font-family:Frama;font-weight:800;font-size:clamp(84px,13vw,220px);line-height:.8;letter-spacing:0;font-variant-numeric:tabular-nums}
.loader.ld5 .ld5__bar{left:var(--g);right:var(--g);width:auto;top:auto;bottom:calc(var(--g) * .6 + clamp(84px,13vw,220px) * .8 + 22px);translate:none;background:rgba(13,13,18,.14)}
.refs[hidden]{display:none!important}
/* v12 loader: minimal — a quiet greeting, the walker, a hairline and a small counter */
.ld5__hello{font-family:Frama;font-weight:500;font-size:clamp(16px,1.25vw,20px);line-height:1.3;letter-spacing:.01em;color:var(--ink);width:auto;white-space:nowrap}
.ld5__hello em{font-style:normal;color:#9A938A}
.loader.ld5 .ld5__fig{width:clamp(120px,10vw,160px);translate:-50% -60%}
.ld5__brand{font-size:15px;font-weight:700;letter-spacing:.01em}
.loader.ld5 .ld5__bar{left:50%;right:auto;width:clamp(120px,10vw,160px);top:calc(50% + clamp(120px,10vw,160px) * .5);bottom:auto;translate:-50% 0;background:rgba(13,13,18,.12)}
.loader.ld5 .ld5__pct{left:50%;top:calc(50% + clamp(120px,10vw,160px) * .5 + 14px);bottom:auto;translate:-50% 0;font-family:Frama;font-weight:500;font-size:12px;line-height:1;letter-spacing:.04em;color:#8E827C}
/* v12: the hero hands over to the work sooner */
.hero{height:118vh}
@media (max-width:820px){.hero{height:112vh}}
/* v12: ring headline scale */
.orbit__cta{font-size:clamp(40px,4.9vw,98px);line-height:.9}
@media (max-width:820px){.orbit__cta{font-size:clamp(36px,10vw,60px)}}
/* footer fan: a floating UI card sits whole on its brand colour */
.fcard.is-fit img{object-fit:contain;padding:14%}
/* projects grid: no number over the cover, hover = a gentle zoom */
.wx-media .wx-n{display:none}
@media (hover:hover){.wx-card:hover .wx-media img{transform:scale(1.06)}}
/* v12 projects grid, Rise at Seven: 12 columns, two per row, the split alternates (set as --span in projects.js) */
.wx-grid{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(14px,1.4vw,24px);row-gap:clamp(34px,3.4vw,56px)}
.wx-grid .wx-card{grid-column:span var(--span,6)}
.wx-grid .wx-media{aspect-ratio:auto;height:30vw;border-radius:clamp(16px,1.6vw,24px)}
.wx-grid .wx-media img{object-position:50% 0%}
@media (max-width:820px){.wx-grid .wx-card{grid-column:span 12}.wx-grid .wx-media{height:70vw}}
/* projects page ends with the contact form and a plain footer */
.pj-contact{margin-top:18vh}
.pj-contact .ct__side{color:var(--paper)}
.pj-contact .ct__form{border:1px solid rgba(13,13,18,.1)}
.pj-foot{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;margin-top:8vh;padding:28px 0 36px;border-top:1px solid var(--line);font-size:14px;color:color-mix(in srgb,var(--ink) 70%,transparent)}
.pj-foot nav{display:flex;gap:24px;flex-wrap:wrap}
.pj-foot a{color:inherit;text-decoration:none}
.pj-foot a:hover{color:var(--ink)}
/* v12 menu: four links and a card of our work instead of the particle field */
.menu__eye{grid-column:2;grid-row:2;align-self:center;justify-self:center;width:min(29vw,50vh,480px);aspect-ratio:1;color:var(--paper)}
.menu__eye svg{width:100%;height:100%;overflow:visible}
.me-ring__c{fill:none;stroke:url(#meG);stroke-width:58;stroke-dasharray:1.02 1.02;stroke-dashoffset:1.02;transform:rotate(-90deg);transform-origin:200px 200px;transition:stroke-dashoffset 1.3s var(--ease)}
.menu.is-open .me-ring__c{stroke-dashoffset:0;transition-delay:.25s}
.me-pupil,.me-ring{will-change:transform}
.me-lid{transform-origin:200px 200px;transform:scale(0);transition:transform .9s cubic-bezier(.2,1.5,.3,1)}
.menu.is-open .me-lid{transform:none;transition-delay:.75s}
.me-o,.me-dots circle,.me-dot{transform-box:fill-box;transform-origin:center;transition:transform .7s cubic-bezier(.2,1.4,.3,1),opacity .4s var(--ease)}
.me-o{fill:none;stroke:url(#meG);stroke-width:44}
.me-dots circle,.me-dot{fill:url(#meG)}
.me-glow{opacity:0;transition:opacity 1.4s var(--ease)}
.menu.is-open .me-glow{opacity:1;transition-delay:.4s}
.me-dots circle{opacity:0;transform:scale(0)}
.me-dot{opacity:0;transform:scale(.4)}
.menu__eye[data-state="grid"] .me-o{opacity:0;transform:scale(.5) rotate(45deg)}
.menu__eye[data-state="grid"] .me-dots circle{opacity:1;transform:none}
.menu__eye[data-state="grid"] .me-dots circle:nth-child(2){transition-delay:.05s}
.menu__eye[data-state="grid"] .me-dots circle:nth-child(3){transition-delay:.1s}
.menu__eye[data-state="grid"] .me-dots circle:nth-child(4){transition-delay:.15s}
.menu__eye[data-state="dot"] .me-o{opacity:0;transform:scale(1.4)}
.menu__eye[data-state="dot"] .me-dot{opacity:1;transform:none}
.menu__eye[data-state="wink"] .me-o{transform:scale(1.18)}
.menu__eye.is-blink .me-lid{animation:meBlink .5s cubic-bezier(.5,0,.3,1)}
@keyframes meBlink{0%,100%{transform:none}45%{transform:scaleY(.06)}}
@media (prefers-reduced-motion:reduce){.me-ring__c,.me-lid,.me-o,.me-dots circle,.me-dot{transition:none}.menu__eye.is-blink .me-lid{animation:none}}
@media (max-width:820px){.menu__eye{display:none}}
/* v12 archive ring: a normal one-screen section (no pinned scroll) */
.orbit{height:100vh;height:100svh}
.orbit .orbit__stick{position:relative}
/* v13 loader: the walker carries the screen, text stays quiet but readable */
.ld5__hello{font-size:clamp(20px,1.75vw,28px)}
.loader.ld5 .ld5__fig{width:clamp(220px,21vw,340px);translate:-50% -58%}
.ld5__brand{font-size:17px}
.loader.ld5 .ld5__bar{width:clamp(180px,15vw,240px);top:calc(50% + clamp(220px,21vw,340px) * .44)}
.loader.ld5 .ld5__pct{top:calc(50% + clamp(220px,21vw,340px) * .44 + 18px);font-size:14px}
/* v13 logo: "Order" in Light so it holds at small sizes; the logo takes the section's colour instead of inverting */
.th{font-weight:300}
.logo{mix-blend-mode:normal;color:var(--fg);transition:color .9s var(--ease),opacity .6s var(--ease)}
/* v13 ring headline scale */
.orbit__cta{font-size:clamp(48px,7vw,150px);line-height:.88}
@media (max-width:820px){.orbit__cta{font-size:clamp(40px,12vw,72px)}}
/* v13 ring:, the section does not clip the ring; the cards spill over the sections above and below while scrolling */
.orbit{position:relative;z-index:5}
.orbit .orbit__stick{overflow:visible}
/* air around the ring: the cards that run past its edges land in empty space, not on the work above or the services below */
.orbit{margin:32vh 0 22vh}
@media (max-width:820px){.orbit{margin:18vh 0 14vh}}
/* rounder ring cards */
.orbit .ocard{border-radius:clamp(16px,1.5vw,30px)}
/* rail icons: solid, chunky, drawn for us; they tilt on hover and pop in when their section arrives */
.ix__ico{width:20px;height:20px}
.ix:hover .ix__ico{transform:scale(1.14) rotate(-10deg)}
.ix.on{box-shadow:0 6px 18px -6px rgba(0,0,0,.35)}
.ix.on .ix__ico{animation:ixPop .7s cubic-bezier(.2,1.4,.3,1)}
@keyframes ixPop{0%{transform:scale(.6) rotate(-20deg)}100%{transform:none}}
@media (prefers-reduced-motion:reduce){.ix.on .ix__ico{animation:none}}
/* menu: more air between the links */
.menu__links{gap:clamp(10px,2.2vh,30px)}
/* side rail: no invert any more, a soft frosted box that follows the section's colours */
.index{mix-blend-mode:normal;color:var(--fg);background:rgba(28,18,40,.28);border-color:var(--line);-webkit-backdrop-filter:blur(16px) saturate(160%);backdrop-filter:blur(16px) saturate(160%);box-shadow:0 10px 30px -14px rgba(0,0,0,.35)}
body[data-theme="paper"] .index{background:rgba(241,236,225,.55)}
.ix.on{background:var(--fg);color:var(--bg-on,var(--ink))}
body[data-theme="paper"] .ix.on{--bg-on:var(--paper)}
.ix__bar{background:var(--line)}
.ix__bar i{background:var(--fg)}
body[data-theme="coral"] .index{background:rgba(255,255,255,.14)}
/* menu footer: e-mail on the left, the clock out of the way on the right */
.menu__info{justify-self:stretch;justify-content:space-between;flex-direction:row-reverse}
.menu__info p:first-child{align-items:flex-end;text-align:right}
@media (max-width:820px){.menu__info{flex-direction:column-reverse}.menu__info p:first-child{align-items:flex-start;text-align:left}}
/* "od" sits small beside the starting price */
.cfg__price small{font-size:.34em;letter-spacing:-.01em;font-weight:500;opacity:.6;margin-right:.15em;vertical-align:.9em}
.cfg__bar[hidden],.cfg__legend[hidden]{display:none}
/* glass mark: the WebGL canvas paints the menu background and the mark; the SVG is only the fallback */
.menu__gl{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.menu>*:not(.menu__gl){position:relative;z-index:1}
.menu.is-gl .menu__eye svg{visibility:hidden}
/* phone: the menu button sits bottom-left (the host's badge takes the right corner), the hero's tidy pill moves up out of its way,
   and the hero is one screen tall so the work follows straight after it */
.chat span{display:inline-flex}
@media (max-width:820px){
  .mbtn{left:var(--g);right:auto;bottom:max(16px,env(safe-area-inset-bottom));flex-direction:row}
  .mbtn__txt{text-align:left}
  .pile__btn{bottom:86px}
  .hero{height:100vh;height:100svh}
}
/* footer wordmark: the two-line logo, big and dominant, on every screen */
.fm__big{display:block;margin:10vh 0 0;padding:0 var(--g) 4vh var(--side);font-family:Frama;font-weight:700;font-size:clamp(90px,17.5vw,380px);line-height:.84;letter-spacing:-.055em;white-space:nowrap;opacity:1;color:var(--paper);text-align:left}
.fm__big span{display:block}
.fm__big .th{font-weight:100;letter-spacing:-.03em}
/* ---------- phone pass ---------- */
.mtop{display:none}
@media (max-width:820px){
  /* a soft bar behind the logo and the call to action, so they never sit on top of the content */
  .mtop{display:block;position:fixed;left:0;right:0;top:0;height:64px;z-index:59;pointer-events:none;background:rgba(241,236,225,.72);-webkit-backdrop-filter:blur(14px) saturate(150%);backdrop-filter:blur(14px) saturate(150%);border-bottom:1px solid rgba(13,13,18,.06);transition:background .6s var(--ease),opacity .6s var(--ease)}
  body:not([data-theme="paper"]) .mtop{background:rgba(18,10,28,.55);border-bottom-color:rgba(241,236,225,.06)}
  body.menu-open .mtop{opacity:0}
  /* footer: the contact card sits right above, so no second "20 minút" card here */
  .fm__cta{display:none}
  .fm__cols{margin-top:0}
  .fm__big{font-size:23vw;margin:6vh 0 0;padding:0 var(--g) 100px;opacity:1}
  /* contact: the 3D cursor centred over its card */
  .ct__obj{position:relative;left:auto;right:auto;top:auto;margin:0 auto -4%;width:62%;justify-self:center;align-self:center}
  /* archive ring: less air around it, smaller cards */
  .orbit{margin:2vh 0 0}
  /* team: the stage is tighter, the heading closer to the photos */
  .team{padding:2vh 0 0}
  .team__stage{height:62vh}
  .team__stage .team__h{top:9%}
  /* offer: the running price pill moves right, clear of the menu button */
  .cfg__mini{margin:10px 0 0 118px}
}
@media (max-width:820px){
  /* offer: compact and thumb-friendly — 2×2 tiles, the three sizes in one row, extras as a swipeable strip */
  .cfg__row{padding:2.2vh 0;gap:12px}
  .tiles{gap:8px}
  .tile{padding:14px;border-radius:16px}
  .tile b{font-size:18px}
  .tile span{font-size:12px;line-height:1.35}
  .tile em{font-size:13px;margin-top:6px}
  .cfg__scope{font-size:13px;line-height:1.45}
  .cfg__size{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .cfg__size .chip{min-width:0;min-height:58px;padding:10px 12px;border-radius:14px}
  .cfg__size .chip b{font-size:14px}
  .cfg__size .chip small{font-size:11px;line-height:1.25}
  .cfg__extra{flex-wrap:nowrap!important;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(-1 * var(--g));padding:0 var(--g) 4px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .cfg__extra::-webkit-scrollbar{display:none}
  .cfg__extra .chip{flex:0 0 auto;scroll-snap-align:start;min-height:50px;padding:9px 14px}
  /* contact form: tighter, one column, nothing stretched */
  .ct{gap:10px}
  .ct__side{padding:24px;border-radius:24px;gap:16px}
  .ct__big{font-size:44px}
  .ct__form{padding:24px 20px;gap:16px;border-radius:24px}
  .ct__h{font-size:40px}
  .ct__row{grid-template-columns:1fr;gap:16px}
  .ct__need .chip{height:34px;font-size:13px;padding:0 14px}
  .ct__k{margin-bottom:6px}
  .ct__form .f input,.ct__form .f textarea{font-size:17px!important}
  .ct__form textarea{min-height:110px!important}
}
/* keep the offer inside the screen: flex/grid children may shrink below their content (the swipe strip scrolls instead) */
.cfg,.cfg__opts,.cfg__row,.tiles{min-width:0}
@media (max-width:820px){.cfg{grid-template-columns:minmax(0,1fr)!important}.tiles{grid-template-columns:repeat(2,minmax(0,1fr))!important}.fm__big{font-size:16.4vw}}

/* legal: company details in the footer, a privacy line under the form */
.foot__legal{position:relative;z-index:2;margin:0;padding:0 var(--g) 18px;font-size:12px;line-height:1.5;opacity:.55;max-width:1100px}
.pj-foot .foot__legal{flex-basis:100%;padding:0;max-width:none}
.send__legal{margin:12px 0 0;font-size:13px;line-height:1.45;opacity:.6}
.send__legal a{color:inherit;text-decoration:underline;text-underline-offset:2px}
/* the toast sits bottom right on wide screens, clear of the contact steps on the left */
@media (min-width:821px){.toast{left:auto;right:28px;transform:translateY(160%)}.toast.on{transform:none}}
/* phone: the menu button goes back to the bottom-right corner; the tidy pill, the price pill and the top bar make room for it */
@media (max-width:820px){
  .mbtn{left:auto;right:var(--g);flex-direction:row-reverse}
  .mbtn__txt{text-align:right}
  .pile__btn{bottom:max(22px,calc(env(safe-area-inset-bottom) + 6px))}
  .cfg__mini{margin:10px 128px 0 0;transition:opacity .4s var(--ease),transform .4s var(--ease)}
  .cfg__mini.is-away{opacity:0;transform:translateY(12px);pointer-events:none}
  .mtop{transition:background .6s var(--ease),opacity .6s var(--ease),transform .5s var(--ease)}
  body.hide-top .mtop{transform:translateY(-100%)}
  /* the offer's last button and the contact form end clear of the menu button */
  .cfg__out,.ct__form{scroll-margin-bottom:90px}
  .cfg{padding-bottom:84px}
}
/* phone: everything you tap is at least 44 px tall */
@media (max-width:820px){
  .foot__row nav a,.fm__cols a,.pj-foot nav a{display:inline-flex;align-items:center;min-height:44px}
  .foot__row nav{column-gap:20px;row-gap:0}
  .fm__cols div{gap:0}
  .cfg__miniGo{display:inline-flex;align-items:center;min-height:44px;padding:0 4px}
  .ct__need .chip{height:44px}
  .chat{min-height:44px}
  .work .link{min-height:44px}
  .scard__plus{min-width:44px;min-height:44px}
  .send__legal a{display:inline-block;padding:10px 0}
}
/* services: an open card lifts and shrinks its object so the title and the list stay clear of it */
.scard__obj{transform-origin:50% 0;transition:transform .8s var(--ease)!important}
.scard.open .scard__obj{transform:translateY(-4%) scale(.62)!important}
.scard.open .scard__body{background:linear-gradient(rgba(20,11,42,0),#140B2A 16%)}
/* form: placeholders read as hints, not as filled-in answers; errors in a red that holds on paper */
.f input::placeholder,.f textarea::placeholder{font-family:FramaText,Frama,sans-serif;font-weight:400;letter-spacing:0}
.ct__form .f input::placeholder,.ct__form .f textarea::placeholder{color:rgba(13,13,18,.34)}
.ct__form .f__err{color:#B3261E;font-size:14px}
/* keyboard: the first Tab offers a jump straight to the content */
.skip{position:fixed;left:16px;top:16px;z-index:300;padding:12px 18px;border-radius:99px;background:var(--ink);color:var(--paper);font-size:14px;transform:translateY(-200%);transition:transform .3s var(--ease)}
.skip:focus{transform:none}
main[tabindex="-1"]:focus,section[tabindex="-1"]:focus{outline:0}
/* offer: the door for bigger or long-term work */
.cfg__custom{margin-top:10px;opacity:.75}
.cfg__custom b{font-weight:700}
.cfg__custom a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.foot .foot__legal{margin:14px var(--g) 0 var(--side);padding:0}
@media (max-width:820px){.foot .foot__legal{margin:14px var(--g) 0}}
/* hero, centred: a bigger headline in the middle of the screen, the line and the buttons right under it */
.hero__stick{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(22px,4vh,44px);text-align:center}
.hero:not(.x) .hero__h{position:relative;left:auto;right:auto;top:auto;transform:none;width:100%;padding:0 var(--g);font-size:clamp(52px,min(9.4vw,17vh),200px)}
.hero__foot{position:relative;left:auto;right:auto;top:auto!important;bottom:auto!important;flex-direction:column;align-items:center;justify-content:center;gap:26px;padding:0 var(--g)}
.hero__foot p{max-width:560px;font-size:clamp(16px,1.25vw,19px)}
.hero__cta{justify-content:center}
@media (max-width:820px){
  .hero__stick{justify-content:center;gap:26px;padding-bottom:6vh}
  .hero:not(.x) .hero__h{font-size:clamp(42px,12.2vw,66px)}
  .hero__foot{gap:20px}
  .hero__foot p{display:block;font-size:15px;max-width:34ch}
  .hero__cta{flex-direction:row}
}
/* phone: both calls to action in the hero, the consultation link under the button */
@media (max-width:820px){.hero__cta{flex-direction:column;gap:14px}.hero__cta .link{display:inline-flex;min-height:44px}}
/* services, open card: a taller, deeper fade under the title and the chips */
.scard.open .scard__body{background:linear-gradient(rgba(20,11,42,0) 0%,rgba(20,11,42,.82) 22%,#140B2A 46%);margin-top:-60px;padding-top:100px}
/* ring: every card answers the pointer at once (a gentle zoom), its clip fades in as soon as it plays */
.orbit .ocard img,.orbit .ocard video{transition:transform .9s var(--ease),opacity .45s}
.orbit .ocard:hover img,.orbit .ocard:hover video{transform:scale(1.07)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* form: optional fields say so, quietly */
.f>span small{font-size:.82em;font-weight:400;opacity:.55;margin-left:4px;letter-spacing:0;text-transform:none}
@media (prefers-reduced-motion:reduce){.hero .hero__hint{display:none}}
/* no WebGL: the sections carry their colours themselves */
body.no-gl .gl{display:none}
body.no-gl{background:#F1ECE1}
body.no-gl [data-theme="night"]{background:#0F0920}
body.no-gl [data-theme="violet"]{background:#261657}
body.no-gl [data-theme="plum"]{background:#160B1C}
body.no-gl [data-theme="paper"]{background:#F1ECE1}
body.no-gl [data-theme="coral"]{background:#D6452A}
/* hero headline: each line centred, sized so the longest line fits between the side rail and the right edge */
.hero:not(.x) .hero__h .hl{margin-left:auto;margin-right:auto}
@media (min-width:821px){.hero:not(.x) .hero__h{padding:0 var(--side);font-size:max(48px,min(calc((100vw - 2 * var(--side)) / 10.1),17vh,200px))}}
/* services, open card (final): the object only moves up a little, it never shrinks (a shrunken render shows its own edges) */
.scard.open .scard__obj{transform:translateY(-11%)!important}
.scard.open .scard__body{margin-top:0;padding-top:40px;background:linear-gradient(rgba(20,11,42,0),#140B2A 28%)}
/* the "Nový dopyt" chip stays inside the card on every width */
.fx__note{left:74%}
/* team ring: no separate layer for the inner photo — in the 3D ring Chrome would cull it and leave an empty card */
.tc__in{will-change:auto}
/* footer: company details as a quiet spec row, labels above values */
.foot__legal{display:grid;grid-template-columns:repeat(5,minmax(0,auto));justify-content:space-between;gap:18px 40px;margin:28px var(--g) 0 var(--side);padding:22px 0 0;border-top:1px solid color-mix(in srgb,currentColor 14%,transparent);font-size:13px;line-height:1.5;opacity:1;max-width:none}
.foot__legal div{min-width:0}
.foot__legal dt{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;opacity:.45;margin-bottom:6px}
.foot__legal dd{margin:0;opacity:.82}
.foot__legal dd span{opacity:.6}
.pj-foot .foot__legal{flex-basis:100%;margin:8px 0 0}
@media (max-width:820px){.foot__legal,.foot .foot__legal{grid-template-columns:1fr 1fr;margin:24px var(--g) 0;gap:16px 20px}.foot__legal div:first-child{grid-column:1/-1}}
/* footer wordmark: one weight, slightly softer than paper, sitting on the bottom edge like a signature */
.fm__big{margin:7vh 0 0;padding:0 var(--g) 0 var(--side);line-height:.8;color:color-mix(in srgb,var(--paper) 86%,transparent);margin-bottom:-.075em}
.fm__big .th{font-weight:700;letter-spacing:-.055em}
.foot{padding-bottom:0!important}
@media (max-width:820px){.fm__big{padding:0 var(--g);margin-top:5vh}}
.foot .foot__legal{margin:28px var(--g) 0 var(--side);padding:22px 0 0}
@media (max-width:820px){.foot .foot__legal{margin:24px var(--g) 0;padding:20px 0 0}}
/* skip link: fully hidden (not just moved up) until a keyboard focuses it — iOS Safari showed it under the status bar */
.skip:not(:focus){position:absolute;top:0;left:0;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;transform:none}
/* phones never see the loader, not even before the script runs */
@media (max-width:820px){.loader{display:none!important}}
/* phones: the line and buttons under the headline come in quickly, no long blur-in */
@media (max-width:820px){.hero .fade{transition:opacity .5s var(--ease) .1s,filter .5s var(--ease) .1s}}
@media (max-width:820px){.hero__foot.fade{opacity:1;filter:none;transition:none}}