.journey{height:330svh;position:relative;background:#281537;color:#fff}.journey-stage{position:sticky;top:0;height:100svh;min-height:650px;overflow:hidden;isolation:isolate;background:#281537 url('/assets/bg-aubergine-quiet.webp') center/cover}.journey-stage:after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#190d29b0,transparent)}.journey-heading{position:absolute;left:6%;top:10%;z-index:3;pointer-events:none}.journey-kicker{font-size:11px;letter-spacing:.18em;font-weight:700;margin:0 0 25px}.journey h2,.journey-outro h2{font:800 italic clamp(60px,7.2vw,118px)/.93 'Barlow Condensed',sans-serif;letter-spacing:-.02em;margin:0}.journey h2 em,.journey-outro h2 em{color:#d9f653;font-style:inherit}.journey-intro{font-size:17px;line-height:1.6;max-width:320px}.journey-orbit{position:absolute;width:75vw;height:75vw;border:1px solid #d9f65330;border-radius:50%;left:40%;top:-25%;transform:rotateX(55deg) rotate(-30deg);box-shadow:0 0 0 60px #6335e809,0 0 0 120px #6335e809}.object-space{position:absolute;inset:0;perspective:1400px}.brand-object{position:absolute;left:58%;top:47%;width:450px;height:340px;background:#f6f6fb;color:#352e40;border-radius:9px;box-shadow:10px 18px 0 #aaa7ba,25px 45px 80px #10051b80;transform:translate(-50%,-50%) scale(.38) rotate(-16deg);transform-origin:center;will-change:transform}.object-top{display:flex;justify-content:space-between;padding:21px 25px;font-size:9px;font-weight:700;letter-spacing:.12em;border-bottom:1px solid #dcd9e4}.object-seed{position:absolute;inset:0;display:grid;place-items:center;font-size:100px;color:#716b7b}.identity-layout{padding:23px;display:grid;grid-template-columns:1.5fr 1fr;gap:13px;opacity:0}.identity-sign{display:flex;flex-direction:column;align-items:flex-start;gap:8px}.identity-sign strong{font-size:26px;letter-spacing:-1px}.identity-sign small{font-size:9px}.neutral-mark{width:30px;height:30px;border:7px solid #8c8894;border-radius:50% 50% 4px 50%;transform:rotate(-15deg)}.identity-type{font-size:58px;line-height:1;font-weight:500}.identity-type span{display:block;font-size:10px;line-height:1.5;margin-top:8px}.identity-colors{display:flex;gap:5px}.identity-colors i{width:38px;height:35px;background:#595464;border-radius:3px}.identity-colors i:nth-child(2){background:#9b96a3}.identity-colors i:nth-child(3){background:#c5c1cc}.identity-colors i:nth-child(4){background:#e2dfe7}.identity-lines{display:grid;gap:6px;align-content:center}.identity-lines b{height:4px;background:#bcb8c5;border-radius:2px}.identity-lines b:last-child{width:70%}.identity-foot{grid-column:1/-1;border-top:1px solid #dedbe5;padding-top:13px;font-size:8px;letter-spacing:.14em;display:flex;justify-content:space-between}.intention{position:absolute;padding:12px 20px;border:1px solid #ffffff35;border-radius:40px;background:#28153780;backdrop-filter:blur(8px);font-size:13px;white-space:nowrap}.intention-a{left:49%;top:25%}.intention-b{left:77%;top:40%}.intention-c{left:44%;top:65%}.journey-hocus{position:absolute;right:3%;bottom:7%;width:clamp(170px,24vw,355px);height:48%;object-fit:contain;filter:drop-shadow(0 25px 25px #12051b70);transform:translateY(15px) rotate(5deg)}.magic-thread{position:absolute;width:52%;height:70%;right:3%;top:17%;overflow:visible;pointer-events:none}.magic-thread path{fill:none;stroke:#d9f653;stroke-width:2;stroke-linecap:round;stroke-dasharray:1200;stroke-dashoffset:1200;filter:drop-shadow(0 0 7px #d9f653)}.journey-glint{position:absolute;color:#d9f653;font-size:40px;opacity:0}.glint-one{left:43%;top:34%}.glint-two{left:76%;top:66%;font-size:25px}.journey-caption{position:absolute;left:6%;bottom:13%;display:flex;gap:17px;max-width:380px}.journey-counter{font-size:12px;border:1px solid #d9f65388;color:#d9f653;width:34px;height:34px;display:grid;place-items:center;border-radius:50%;flex-shrink:0}.journey-caption h3{font-size:18px;margin:3px 0 8px}.journey-caption p{font-size:13px;color:#d6cce3;margin:0;line-height:1.5}.journey-progress{position:absolute;bottom:0;left:0;width:100%;height:3px;background:#ffffff15}.journey-progress i{display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:left;background:#d9f653}.journey-scroll{position:absolute;bottom:4%;left:6%;font-size:9px;letter-spacing:.18em;margin:0}.journey-scroll span{margin-left:15px;font-size:18px}.journey-outro{text-align:center;padding:110px 24px;background:#fff url('/assets/bg-white-embossed.webp') center/cover}.journey-outro h2 em{color:#6335e8}.journey-outro>p:not(.journey-kicker){font-size:18px;line-height:1.7}.journey-outro>a{display:block;font-size:12px;margin-top:25px;text-decoration:underline;text-underline-offset:4px}@media(max-width:750px){.journey{height:300svh}.journey-stage{min-height:620px}.journey-heading{top:7%;left:7%}.journey-kicker{font-size:9px;margin-bottom:16px}.journey h2{font-size:58px}.journey-intro{font-size:13px;margin-top:15px}.brand-object{left:48%;top:57%;width:330px;height:270px}.object-top{padding:16px;font-size:7px}.identity-layout{padding:16px;gap:10px}.identity-sign strong{font-size:20px}.identity-sign small{font-size:7px}.identity-type{font-size:43px}.identity-type span{font-size:8px}.neutral-mark{width:23px;height:23px;border-width:5px}.identity-colors i{width:28px;height:25px}.identity-foot{font-size:6px;padding-top:9px}.journey-hocus{height:28%;width:40%;right:-3%;bottom:19%}.intention-a{left:15%;top:43%}.intention-b{left:62%;top:46%}.intention-c{left:15%;top:68%}.intention{font-size:10px;padding:9px 13px}.journey-caption{left:7%;bottom:8%;max-width:85%;gap:12px}.journey-caption h3{font-size:16px}.journey-caption p{font-size:12px}.journey-scroll{bottom:2%;left:7%;font-size:8px}.magic-thread{width:90%;right:-10%;top:32%;height:45%}.glint-one{left:10%;top:48%}.glint-two{left:80%;top:65%}.journey-outro{padding:75px 24px}.journey-outro h2{font-size:58px}.journey-outro>p:not(.journey-kicker){font-size:15px}}
@media(prefers-reduced-motion:reduce){.journey{height:auto}.journey-stage{position:relative;height:900px}.brand-object{transform:translate(-50%,-50%) scale(.85)!important}.identity-layout{opacity:1!important}.object-seed,.intention,.magic-thread,.journey-glint{display:none}.journey-hocus{transform:none!important}.journey-progress,.journey-scroll{display:none}}

/* A sculpted passage bridges the hero and the atelier. */
.hero:after{content:"";position:absolute;inset:auto 0 0;height:clamp(80px,14vw,230px);background:linear-gradient(transparent,#281537);pointer-events:none;z-index:0}.hero .motion{z-index:4}.scene-passage{position:relative;height:28vw;max-height:390px;min-height:170px;overflow:hidden;background:#281537;margin-bottom:-1px;isolation:isolate}.passage-volume{position:absolute;width:140%;height:220%;left:-18%;top:-160%;border-radius:50%;border:clamp(40px,8vw,130px) solid #6335e8;background:transparent;box-shadow:inset 0 -2px 0 #d9f65399,0 15px 45px #140822;transform:translateY(var(--passage-shift,0px)) rotate(-15deg);border-bottom-color:#7948f1;border-right-color:#422180;opacity:.85}.passage-star{position:absolute;left:52%;top:45%;color:#d9f653;font-size:24px;transform:translateY(var(--star-shift,0px));opacity:var(--star-opacity,.8)}.journey-stage{background-blend-mode:normal}.journey-stage:before{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(#281537,transparent 28%);z-index:-1}.identity-layout{opacity:1}.identity-layout>div{will-change:transform,opacity}.thread-tip{filter:drop-shadow(0 0 5px #d9f653);pointer-events:none}.journey .magic-thread{z-index:2}.journey-hocus{z-index:3}.thread-particle{position:fixed;z-index:20;pointer-events:none;width:9px;height:9px;background:#d9f653;clip-path:polygon(50% 0,62% 37%,100% 50%,62% 63%,50% 100%,38% 63%,0 50%,38% 37%);animation:thread-fade .65s ease-out forwards}@keyframes thread-fade{from{opacity:1;transform:translate(-50%,-50%) scale(1)}to{opacity:0;transform:translate(calc(-50% + var(--drift-x)),calc(-50% + var(--drift-y))) scale(0) rotate(90deg)}}@media(min-width:751px){.brand-object{left:61%;width:480px;height:355px}.journey-hocus{right:0;width:22vw}.journey-heading{max-width:43%}.journey h2{font-size:clamp(60px,6.5vw,110px)}}@media(prefers-reduced-motion:reduce){.scene-passage{height:150px;min-height:0}.passage-volume,.passage-star{transform:none!important}.thread-particle,.thread-tip{display:none}.identity-layout>div{opacity:1!important;transform:none!important}}
/* The same painted canvas continues below the hero: no synthetic ribbon. */
.hero:after{display:none}.hero .art{background-image:url('/assets/hero-art-continuation.webp');background-size:100% 200%;background-position:center top;transform:none;transition:none}.scene-passage{height:66.6667vw;min-height:0;max-height:none;background:#281537 url('/assets/hero-art-continuation.webp') center bottom/100% 200% no-repeat;margin-top:-1px}.passage-volume,.passage-star{display:none}.scene-passage:after{content:'';position:absolute;inset:auto 0 0;height:12%;background:linear-gradient(transparent,#281537)}.journey-stage{background-image:url('/assets/hero-art-continuation.webp');background-position:center bottom;background-size:100% auto}.journey-stage:before{background:linear-gradient(#281537,transparent 40%)}
@media(max-width:700px){.hero .art{background-size:150% auto;background-position:right 0}.scene-passage{height:85vw;background-size:150% auto;background-position:right bottom}.journey-stage{background-size:auto 160%;background-position:right bottom}}
@media(prefers-reduced-motion:reduce){.scene-passage{height:66.6667vw;min-height:0}}

/* The atelier inhabits the continuation itself, without a spacer scene. */
.scene-passage{display:none}.journey-stage{background-size:100% 200%;background-position:center bottom}.journey-stage:before{display:none}.journey-stage:after{background:linear-gradient(90deg,#190d2945,transparent 65%)}
@media(max-width:700px){.journey-stage{background-size:150% auto;background-position:right bottom}}
/* No tonal step at the shared illustration edge. Shade builds below it. */
.journey-stage:after{background:linear-gradient(to bottom,transparent 0%,rgba(25,13,41,.08) 22%,rgba(25,13,41,.22) 65%,rgba(25,13,41,.22) 100%)}

/* Chapter two uses the very same object and stage. */
.journey{height:590svh}.brand-object{overflow:visible}.doc-cover{position:absolute;inset:0;background:#f6f6fb;border-radius:9px;padding:27px;opacity:0;z-index:4;pointer-events:none}.doc-cover small,.doc-page small{font-size:9px;letter-spacing:.12em;font-weight:700}.doc-cover h4{font-size:36px;letter-spacing:-1.5px;line-height:1.06;margin:33px 0 24px}.cover-sign{width:60px;height:60px;border:14px solid #8c8894;border-radius:50% 50% 8px 50%;transform:rotate(-15deg)}.doc-cover p{font-size:12px;margin:25px 0}.doc-cover>span{position:absolute;bottom:22px;font-size:8px;letter-spacing:.15em}.doc-page{position:absolute;inset:3px;border-radius:7px;background:#fff;color:#352e40;box-shadow:3px 7px 15px #140b2433;padding:25px;opacity:0;transform-origin:center bottom;z-index:-1}.doc-page h4{font-size:27px;line-height:1.1;margin:32px 0 22px;letter-spacing:-1px}.doc-page>span{position:absolute;bottom:20px;font-size:9px}.doc-rule{height:30px;background:repeating-linear-gradient(to bottom,#bab6c2 0 3px,transparent 3px 9px);margin:15px 0}.doc-rule.short{width:65%;height:20px}.doc-columns{display:flex;gap:15px;height:100px;margin-top:20px}.doc-columns i{width:50%;background:repeating-linear-gradient(to bottom,#cfccd5 0 3px,transparent 3px 9px)}.doc-picture{height:85px;background:linear-gradient(135deg,#e4e1e9 50%,#b6b1c1 50%);border-radius:40px 4px 4px}.page-front{z-index:-2}.journey-heading{transition:opacity .15s}.journey-stage{--doc-shift:0px;background-position:calc(50% + var(--doc-shift)) bottom}.doc-page>*{opacity:var(--ink-progress,0);transform:translateY(calc((1 - var(--ink-progress,0))*12px))}
@media(max-width:750px){.journey{height:540svh}.doc-cover{padding:20px}.doc-cover h4{font-size:28px;margin:25px 0 20px}.cover-sign{width:45px;height:45px;border-width:10px}.doc-cover p{font-size:10px;margin-top:15px}.doc-page{padding:16px}.doc-page h4{font-size:21px;margin:24px 0 16px}.doc-page small{font-size:6px}.doc-picture{height:65px}.doc-columns{height:65px}.journey-stage{background-position:right bottom}}
@media(prefers-reduced-motion:reduce){.journey{height:auto}.doc-page>*{transform:none!important}.journey-heading{transition:none}}

/* Keep the painted canvas anchored; its edges must never enter the viewport. */
.journey-stage{background-position:center bottom;background-repeat:no-repeat}@media(max-width:700px){.journey-stage{background-position:right bottom}}

/* Web: the same surface becomes a working responsive interface. */
.journey{height:830svh}.web-preview{position:absolute;inset:0;background:#f6f6fb;border-radius:9px;overflow:hidden;opacity:0;pointer-events:none;z-index:6;color:#352e40;container-type:inline-size}.browser-chrome{height:28px;border-bottom:1px solid #dedbe5;display:flex;align-items:center;gap:4px;padding:0 12px}.browser-chrome i{width:5px;height:5px;border-radius:50%;background:#bbb6c5}.browser-chrome span{font-size:7px;text-align:center;flex:1}.web-nav{padding:20px 24px;display:flex;align-items:center;justify-content:space-between;font-size:10px}.web-nav strong{font-size:16px}.web-content{display:grid;grid-template-columns:1.2fr 1fr;gap:18px;padding:18px 24px}.web-content small{font-size:7px;letter-spacing:.12em}.web-content h4{font-size:32px;line-height:1.05;letter-spacing:-1px;margin:18px 0 12px}.web-content p{font-size:9px;line-height:1.6;margin:0 0 18px}.web-demo-button{border:0;border-radius:5px;background:#595464;color:#fff;font-size:9px;padding:12px;display:flex;gap:16px}.web-demo-button:focus-visible,.web-demo-close:focus-visible{outline:2px solid #6335e8;outline-offset:2px}.web-image{background:#dfdbe5;border-radius:70px 8px 8px;display:grid;place-items:center;min-height:155px}.web-image .cover-sign{margin:15px}.web-bottom{font-size:7px;letter-spacing:.1em;padding:20px 24px;border-top:1px solid #dedbe5;margin-top:10px}.web-panel{position:absolute;left:8%;right:8%;bottom:35px;padding:24px;background:#fff;border:1px solid #dedbe5;box-shadow:0 8px 30px #352e4020;border-radius:8px;opacity:0;transform:translateY(15px);transition:opacity .25s,transform .25s;visibility:hidden}.web-panel.is-open{opacity:1;transform:none;visibility:visible}.web-panel strong{font-size:17px}.web-panel p{font-size:10px;margin:10px 0}.web-demo-close{border:0;background:none;font-size:9px;padding:8px 0;color:#352e40}.web-demo-button.is-active{box-shadow:0 0 0 7px #d9f65377;background:#352e40}
@container(max-width:320px){.web-nav{padding:15px}.web-nav>span{font-size:0}.web-nav>span:after{content:'☰';font-size:16px}.web-content{grid-template-columns:1fr;padding:12px 15px;gap:18px}.web-content h4{font-size:27px;margin-top:14px}.web-image{min-height:75px;border-radius:40px 6px 6px}.web-image .cover-sign{width:35px;height:35px;border-width:8px;margin:10px}.web-bottom{padding:15px;font-size:6px}.web-panel{padding:18px;bottom:35px}}
@media(max-width:750px){.journey{height:770svh}}@media(prefers-reduced-motion:reduce){.journey{height:auto}.web-panel{transition:none}}

.handover{position:relative;isolation:isolate;background:#281537 url('/assets/bg-aubergine-quiet.webp') center/cover;color:#fff;padding:110px 7% 80px;overflow:hidden}.handover:before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(#281537 0%,#28153744 35%,#281537bb 100%)}.handover h2{font:800 italic clamp(65px,7vw,110px)/.95 'Barlow Condensed',sans-serif;margin:0}.handover h2 em{color:#d9f653}.handover-copy>p:not(.journey-kicker){font-size:18px;line-height:1.6}.delivery-display{position:relative;height:370px;display:flex;align-items:center;justify-content:center;margin:35px 0 60px}.delivery-display>img{position:absolute;width:210px;height:300px;object-fit:contain;right:9%;bottom:-10px;z-index:2;pointer-events:none}.delivery-folder{position:relative;width:390px;height:245px;border:1px solid #aa83ff;background:linear-gradient(135deg,#774bea,#482296);border-radius:10px 28px 16px 16px;color:white;padding:30px;text-align:left;transform:rotate(-4deg);box-shadow:0 14px 0 #1c0d32,0 35px 70px #11062088;transition:transform .4s,box-shadow .4s}.delivery-folder:hover{transform:rotate(-1deg) translateY(-8px);box-shadow:0 20px 0 #1c0d32,0 45px 70px #11062088}.folder-tab{position:absolute;top:-27px;left:0;padding:10px 20px;background:#6335e8;border-radius:10px 10px 0 0;font-size:9px;letter-spacing:.15em}.folder-name{display:block;font-size:38px;line-height:1.05;font-weight:700;letter-spacing:-1.4px}.folder-open{display:block;font-size:13px;margin-top:35px;color:#d9f653}.delivery-preview{max-width:1050px;margin:auto;border-top:1px solid #ffffff33;padding-top:45px}.delivery-preview h3{font-size:28px;letter-spacing:-.7px}.delivery-choices{display:flex;flex-wrap:wrap;gap:10px;margin:25px 0}.delivery-choices button{border:1px solid #af90ca;background:transparent;border-radius:30px;color:white;padding:12px 18px;font-size:13px}.delivery-choices button[aria-pressed=true]{background:#d9f653;color:#281537;border-color:#d9f653}.delivery-items{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.delivery-items article{padding:25px;border:1px solid #ffffff30;border-radius:12px;background:#ffffff08}.delivery-items article>span{font-size:30px;color:#d9f653}.delivery-items h4{font-size:18px;margin:20px 0 10px}.delivery-items p,.delivery-note{font-size:13px;line-height:1.6;color:#e0d5ec}.delivery-next{display:flex;align-items:center;justify-content:space-between;gap:25px;margin-top:55px}.delivery-next h3{font:800 italic 55px/.95 'Barlow Condensed',sans-serif}.delivery-preview[hidden]{display:none}.handover :focus-visible{outline-color:#d9f653}@media(max-width:700px){.handover{padding:75px 6% 55px}.handover h2{font-size:62px}.handover-copy>p:not(.journey-kicker){font-size:16px}.delivery-display{height:300px;justify-content:flex-start;margin-bottom:35px}.delivery-folder{width:78%;height:205px;padding:23px}.folder-name{font-size:29px}.delivery-display>img{width:130px;height:210px;right:-6%;bottom:-15px}.delivery-items{grid-template-columns:1fr}.delivery-items article{padding:20px}.delivery-next{align-items:flex-start;flex-direction:column}.delivery-next h3{font-size:48px}.delivery-preview h3{font-size:25px}.delivery-choices{gap:8px}.delivery-choices button{font-size:12px;padding:11px 14px}}

.packing-folder{position:absolute;inset:0;z-index:10;border-radius:10px 25px 12px 12px;background:linear-gradient(135deg,#774bea,#482296);color:#fff;padding:25px;opacity:var(--packing,0);transform:translateY(calc((1 - var(--packing,0))*25px));pointer-events:none}.packing-folder small{font-size:9px;letter-spacing:.12em}.packing-folder strong{display:block;font-size:29px;line-height:1.05;margin-top:40px}.packing-folder>span{position:absolute;bottom:25px;left:25px;font-size:7px;letter-spacing:.08em}

.site-header{position:absolute;top:0;left:0;width:100%;z-index:50}.site-header .brand{width:16%}@media(min-width:701px){.site-header{position:fixed;transition:background .25s,padding .25s}.site-header.is-scrolled{padding:13px 3.7%;background:#281537f0;backdrop-filter:blur(14px);box-shadow:0 1px 0 #ffffff22}.site-header.is-scrolled .brand{max-width:155px}.site-header.is-scrolled .brand img{content:url('/assets/hocus-club-dark.svg')}.journey-heading{top:14%}.delivery-preview{scroll-margin-top:100px}}@media(max-width:700px){.hero .copy{padding-top:120px}.site-header{padding:22px 6%}.site-header .brand{width:165px}}
.delivery-display{height:420px;margin-top:70px}.delivery-folder{width:460px;height:280px;isolation:isolate;overflow:visible}.folder-peek{position:absolute;left:7%;top:-35px;width:84%;height:80px;background:#f4f2fa;color:#281537;padding:18px;border-radius:7px;transform:rotate(3deg);z-index:-1;font-size:10px;letter-spacing:.1em;transition:transform .35s,top .35s}.delivery-folder:hover .folder-peek,.delivery-folder:focus-visible .folder-peek{top:-60px;transform:rotate(-2deg)}.folder-name{font-size:44px}.folder-open{display:inline-block;color:#281537;background:#d9f653;padding:14px 18px;border-radius:30px;font-weight:700;margin-top:28px}.delivery-display>img{height:340px;width:245px;right:5%}.delivery-next p{font-size:17px}.closing-white{padding:95px 7%;text-align:center;background:#fff url('/assets/bg-white-embossed.webp') center/cover;color:#281537}.closing-white>img{width:190px;height:auto;margin-bottom:35px}.closing-white h2{font:800 italic clamp(60px,7vw,100px)/.95 'Barlow Condensed',sans-serif;margin:0}.closing-white h2 em{color:#6335e8}.closing-white p{font-size:17px;line-height:1.7;margin:28px 0}.closing-white>a{display:block;margin-top:25px;font-size:13px;text-decoration:underline;text-underline-offset:4px}@media(max-width:700px){.delivery-display{height:330px}.delivery-folder{width:82%;height:235px}.folder-name{font-size:31px}.folder-open{font-size:11px;padding:12px}.delivery-display>img{width:140px;height:215px;right:-8%}.closing-white{padding:65px 6%}.closing-white p{font-size:15px}}

/* A layered folder opens before revealing the lime discovery surface. */
.delivery-display{perspective:1200px;height:460px}.delivery-folder{background:#42207d;isolation:auto;transform:rotate(-4deg);border:0;box-shadow:0 20px 50px #10051980}.folder-face{position:absolute;inset:0;background:linear-gradient(125deg,#8655fa,#5427ba);border:1px solid #b698ff;border-radius:10px 28px 16px 16px;z-index:2;transform-origin:center bottom;transition:transform .6s cubic-bezier(.2,.7,.2,1)}.folder-peek{z-index:1;height:85%;top:-20px;left:7%;box-shadow:0 -9px 0 -3px #d8d0ed;transform:rotate(2deg);transition:transform .65s,top .65s}.folder-tab{z-index:3}.folder-name,.folder-open{position:relative;z-index:3;transition:opacity .3s,transform .6s}.delivery-folder:hover .folder-peek{top:-35px}.delivery-folder.is-open .folder-face{transform:rotateX(-65deg)}.delivery-folder.is-open .folder-peek{top:-90px;transform:rotate(-4deg) translateY(-25px)}.delivery-folder.is-open .folder-name{opacity:0}.delivery-folder.is-open .folder-open{transform:translateY(30px)}.delivery-folder.is-open{transform:rotate(0deg)}.delivery-preview{position:relative;background:#d9f653 url('/assets/bg-lime-quiet.webp') center/cover;color:#281537;max-width:none;margin:70px -8.14% -80px;padding:80px 8%;border:0;border-radius:40px 40px 0 0;scroll-margin-top:80px}.delivery-preview>h3{font:800 italic clamp(55px,6vw,90px)/.95 'Barlow Condensed',sans-serif;margin:15px 0 35px}.delivery-choices button{border-color:#28153777;color:#281537;background:#ffffff25}.delivery-choices button[aria-pressed=true]{background:#281537;color:#fff;border-color:#281537}.delivery-items{gap:25px;margin-top:45px}.delivery-items article{background:transparent;border:0;padding:0;transition:transform .25s}.delivery-items article:hover{transform:translateY(-5px)}.delivery-items h4{font-size:25px;margin:25px 0 10px}.delivery-items p,.delivery-note{color:#352342}.deliverable-art{height:235px;position:relative;border-radius:12px;background:#bce92b;overflow:hidden;display:grid;place-items:center;perspective:700px}.sample-sheet{background:#fafaff;color:#281537;width:65%;height:78%;padding:22px;box-shadow:8px 10px 0 #6335e8;transform:rotate(-8deg);border-radius:3px}.sample-sheet small{font-size:8px;letter-spacing:.12em}.sample-sheet strong{display:block;font-size:21px;line-height:1.1;margin:22px 0}.sample-sheet i{display:block;height:4px;background:#cbc6d6;margin:7px 0}.sample-sheet i:last-child{width:60%}.sample-accent{position:absolute;right:12%;bottom:10%;font-size:75px;color:#6335e8;transform:rotate(12deg)}.art-web .sample-sheet{width:83%;height:65%;border-top:14px solid #281537;transform:rotate(5deg);border-radius:8px}.art-pages .sample-sheet{width:48%;height:83%;box-shadow:10px -5px 0 #e1dbea,19px -10px 0 #6335e8}.art-idea .sample-sheet{transform:rotate(-5deg);border-radius:40px 4px 4px}.delivery-next{border-top:1px solid #28153744;padding-top:35px}.delivery-next .idea-button{background:#281537;color:#d9f653}.delivery-next p{color:#352342}.closing-white>img{width:min(550px,75%);margin-bottom:50px}.closing-white{padding-top:110px}.handover-copy h2{max-width:1000px}.delivery-preview :focus-visible{outline-color:#6335e8}@media(max-width:700px){.delivery-display{height:360px}.delivery-preview{margin:50px -6.82% -55px;padding:55px 6%;border-radius:25px 25px 0 0}.delivery-preview>h3{font-size:51px}.delivery-items{gap:35px}.deliverable-art{height:240px}.delivery-folder.is-open .folder-peek{top:-60px}.closing-white{padding-top:70px}}@media(prefers-reduced-motion:reduce){.folder-face,.folder-peek,.folder-name,.folder-open{transition:none}}

.portfolio-preview{position:relative;padding:110px 7% 0;color:#fff;background:#281537 url('/assets/bg-violet-corners.webp') center top/100% auto no-repeat;isolation:isolate}.portfolio-preview:before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(#281537,transparent 400px,#281537 90%)}.projects-heading{max-width:850px;margin-bottom:65px}.projects-heading h2{font:800 italic clamp(65px,8vw,125px)/.93 'Barlow Condensed',sans-serif;margin:0}.projects-heading h2 em{color:#d9f653}.projects-heading>p:not(.journey-kicker){font-size:19px;line-height:1.6}.project-status{display:inline-block;font-size:9px;letter-spacing:.13em;border:1px solid #ffffff44;padding:9px 13px;border-radius:20px}.project-layout{display:grid;grid-template-columns:1.18fr 1fr;gap:70px 35px}.project-lead{grid-column:1/-1}.project-stage{position:relative;min-height:400px;overflow:hidden;border:1px solid #ffffff2b;border-radius:12px;background:#eeedf4;color:#514b5e;display:grid;place-items:center}.project-lead .project-stage{height:520px;background:#e4e1ed}.project-index{position:absolute;top:25px;left:25px;font-size:9px;letter-spacing:.12em;z-index:2}.project-watermark{position:absolute;bottom:24px;left:25px;font-size:16px;line-height:1.2;color:#665d76}.wire-browser{width:65%;height:70%;background:#fbfaff;border:1px solid #aaa3b7;box-shadow:14px 20px 0 #c1bbcf;transform:rotate(-3deg);border-radius:9px;overflow:hidden}.wire-toolbar{height:25px;border-bottom:1px solid #c4becf;display:flex;align-items:center;gap:4px;padding:0 12px}.wire-toolbar i{width:5px;height:5px;background:#aaa3b7;border-radius:50%}.wire-body{position:relative;padding:35px;width:100%;height:90%}.wire-body>b{display:block;width:40%;height:20px;background:#c7c1d1;margin:15px 0;border-radius:3px}.wire-body>b:nth-child(2){width:30%}.wire-body>span{display:block;width:20%;height:20px;background:#92889f;margin-top:30px;border-radius:15px}.wire-picture{position:absolute;right:5%;top:10%;width:40%;height:75%;background:linear-gradient(140deg,#dfdbe7 50%,#beb6ce 50%);border-radius:55px 5px 5px}.project-caption{display:flex;justify-content:space-between;gap:25px;margin-top:20px;align-items:baseline}.project-caption h3{font-size:22px;margin:0}.project-caption p{font-size:12px;line-height:1.6;color:#d2c5e1;max-width:300px;margin:0}.project-docs{padding-top:0}.project-brand{padding-top:90px}.project-docs .project-stage{height:470px}.wire-book{display:flex;width:70%;height:62%;transform:rotate(-10deg);box-shadow:8px 12px 0 #beb6cb;background:#fbfaff}.wire-book>div{width:50%;padding:22px;border-right:1px solid #d4cedf}.wire-book b,.wire-brand b{display:block;width:75%;height:22px;background:#bbb3c9;margin:15px 0 25px}.wire-book i{display:block;height:5px;background:#d8d3e1;margin:8px 0}.wire-book span{display:block;height:75px;background:#d8d3e1;margin-bottom:25px}.wire-brand{width:65%;padding:30px;background:#faf9fe;box-shadow:12px 16px 0 #bdb5cf;transform:rotate(8deg)}.wire-brand>span{font-size:70px;color:#8e839e}.wire-brand>div{display:flex;gap:8px}.wire-brand i{height:25px;width:25px;background:#b5acbf}.wire-brand i:nth-child(2){background:#d0c8d9}.wire-brand i:nth-child(3){background:#e6e1ed}.projects-note{font-size:12px;line-height:1.6;color:#d2c5e1;margin-top:45px;max-width:600px}.projects-bridge{text-align:center;padding:95px 0 0}.projects-bridge>span{font-size:10px;letter-spacing:.18em;color:#d9f653}.projects-bridge p{font:800 italic 65px/1 'Barlow Condensed',sans-serif;margin:22px 0}.projects-bridge a{display:inline-block;color:#d9f653;font-size:35px;padding:12px 25px}.portfolio-preview{scroll-margin-top:70px}@media(max-width:700px){.portfolio-preview{padding:70px 6% 0}.projects-heading h2{font-size:65px}.projects-heading>p:not(.journey-kicker){font-size:16px}.project-layout{grid-template-columns:1fr;gap:40px}.project-brand{padding-top:0}.project-lead .project-stage,.project-docs .project-stage,.project-stage{height:340px;min-height:340px}.wire-browser{width:85%;height:60%}.wire-body{padding:15px}.wire-body>b{height:12px}.project-caption{display:block}.project-caption h3{font-size:20px}.project-caption p{margin-top:10px}.project-watermark{font-size:13px}.projects-bridge{padding-top:65px}.projects-bridge p{font-size:50px}}

/* Mobile composition: compact welcome, lower painted canvas, contained stage. */
@media(max-width:750px){
 body{overflow-x:clip}
 .site-header{position:absolute;padding:18px 5%;gap:16px;align-items:center}
 .site-header .brand{width:140px;min-width:0;flex-shrink:0}
 .site-header nav>a{display:none}
 .site-header nav{gap:0}
 .site-header .contact-button{font-size:12px;padding:12px 14px;max-width:165px;line-height:1.25;min-height:44px}
 .hero{display:flex;flex-direction:column;min-height:0;aspect-ratio:auto;padding:0;background:#fff}
 .hero .copy{position:relative;inset:auto;width:auto;padding:105px 6% 24px;order:1;background:#fff}
 .hero h1{font-size:clamp(70px,18vw,120px);line-height:.98;transform:scaleX(.86);width:116%;letter-spacing:0}
 .hero h1 span:first-child{font-size:.84em;display:block}
 .hero h1 span:nth-child(2),.hero h1 span:nth-child(3){display:inline-block}
 .hero h1 span:nth-child(3){margin-left:.14em}
 .hero .copy p{font-size:16px;line-height:1.5;margin:22px 0 18px;max-width:340px}
 .hero .idea-button{font-size:16px;padding:14px 20px;min-height:48px;gap:20px}
 .hero .art{position:relative;inset:auto;order:2;z-index:0;flex:none;width:100%;height:90vw;margin:0;background-size:140% 200%;background-position:right top;transform:none}
 .hero .art>.decor-stars{width:140%;left:-40%}
 .journey-stage{height:100svh;min-height:600px;background-size:140% 200%;background-position:right bottom}
 .journey-stage:after{background:linear-gradient(transparent,#190d2970 12%,#190d2999 35%,#190d2940 65%,#190d29bb)}
 .journey-heading{left:6%;right:6%;top:5%;max-width:none}
 .journey-kicker{font-size:10px;line-height:1.5;letter-spacing:.12em;margin-bottom:14px}
 .journey h2{font-size:clamp(39px,6svh,56px);line-height:.96}
 .journey-intro{font-size:14px;line-height:1.5;margin:14px 0 0;max-width:310px}
 .brand-object{left:46%;top:56%}
 .journey-hocus{width:31%;height:26%;right:0;bottom:22%}
 .intention{font-size:11px;padding:8px 11px}
 .intention-a{left:6%;top:39%}.intention-b{left:auto;right:6%;top:42%}.intention-c{left:7%;top:70%}
 .journey-caption{left:6%;right:6%;bottom:7%;max-width:none;gap:12px}
 .journey-caption h3{font-size:16px;line-height:1.25;margin:0 0 7px}
 .journey-caption p{font-size:13px;line-height:1.45}
 .journey-scroll{left:6%;bottom:2%;font-size:9px}
 .journey-orbit{width:150vw;height:150vw;left:0;top:25%;opacity:.4}
 .project-status{font-size:10px;line-height:1.5}
 .project-caption p,.projects-note{font-size:14px}
 .projects-heading h2{font-size:clamp(52px,14vw,74px)}
 .handover h2{font-size:clamp(52px,14vw,74px)}
 .delivery-display{margin-top:75px;height:330px;justify-content:flex-start}
 .delivery-folder{width:85%;max-width:380px;height:235px;padding:22px}
 .folder-name{font-size:clamp(25px,7vw,35px)}
 .folder-open{font-size:12px;padding:12px;max-width:100%;line-height:1.3}
 .delivery-display>img{right:-2%;bottom:-20px;width:110px;height:175px;pointer-events:none}
 .delivery-choices button{font-size:14px;min-height:44px}
 .delivery-items p,.delivery-note{font-size:15px}
 .delivery-next .idea-button,.closing-white .idea-button{font-size:15px;padding:15px 18px;gap:12px;max-width:100%}
 .closing-white h2{font-size:clamp(48px,13vw,75px)}
 .closing-white p{font-size:16px}
}
@media(max-width:360px){.site-header .brand{width:120px}.site-header .contact-button{max-width:145px;font-size:11px}.journey-intro{font-size:13px}.journey-caption h3{font-size:14px}}
@media(max-width:750px) and (prefers-reduced-motion:reduce){.journey-stage{height:800px}}

@media(max-width:750px){.portfolio-preview{background-size:auto 650px}.portfolio-preview:before{background:linear-gradient(#281537,transparent 140px,#281537 630px)}.wire-browser{transform:translateY(-15px) rotate(-3deg)}}

/* Clear folder affordance, with a restrained Hocus sparkle invitation. */
.folder-open{display:inline-flex;align-items:center;justify-content:center;text-align:center;line-height:1.3;min-height:48px;padding:14px 22px;white-space:nowrap;isolation:isolate}
.folder-open:before,.folder-open:after{content:'✦';position:absolute;pointer-events:none;color:#d9f653;text-shadow:0 0 12px #d9f65366;animation:folder-twinkle 3.2s ease-in-out infinite}
.folder-open:before{font-size:24px;left:-17px;top:-18px}
.folder-open:after{font-size:16px;right:-13px;bottom:-15px;animation-delay:-1.5s}
@keyframes folder-twinkle{0%,100%{opacity:.3;transform:scale(.7) rotate(-12deg)}50%{opacity:1;transform:scale(1.12) rotate(12deg)}}
.delivery-folder:hover .folder-open,.delivery-folder:focus-visible .folder-open{box-shadow:0 0 0 5px #d9f65324,0 0 28px #d9f65333}
.delivery-folder.is-open .folder-open:before,.delivery-folder.is-open .folder-open:after{display:none}
body:has(.hero.paused) .folder-open:before,body:has(.hero.paused) .folder-open:after{animation-play-state:paused}
.menu-toggle{display:none}.mobile-menu{width:min(520px,calc(100% - 24px));max-height:calc(100svh - 24px);padding:24px;border-radius:18px;background:#281537 url('/assets/bg-aubergine-quiet.webp') center/cover;color:#fff;overflow-y:auto}
.menu-top{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:36px}.menu-top img{width:140px;height:auto}.menu-close{background:transparent;border:1px solid #ffffff60;border-radius:30px;color:#fff;min-height:44px;padding:10px 14px;font-size:14px}
.mobile-menu .eyebrow{font-size:11px;letter-spacing:.14em;color:#d9f653;margin:0 0 18px}.mobile-menu nav{display:flex;flex-direction:column;align-items:stretch;gap:0}.mobile-menu nav>a{display:flex;align-items:center;justify-content:space-between;gap:16px;font:800 italic clamp(27px,7vw,36px)/1.15 'Barlow Condensed',sans-serif;padding:14px 0;border-bottom:1px solid #ffffff25;color:#fff}.mobile-menu nav>a span{font:12px 'DM Sans',sans-serif;color:#d9f653}.mobile-menu .menu-contact{margin-top:28px;font-size:15px;width:100%;justify-content:center}.mobile-menu :focus-visible{outline-color:#d9f653}
@media(max-width:750px){
 .site-header{position:fixed;background:#ffffffed;backdrop-filter:blur(12px);padding:14px 5%}
 .site-header>nav{display:none}.menu-toggle{display:flex;align-items:center;gap:12px;border:1px solid #28153735;border-radius:30px;padding:12px 16px;background:#fff;color:#281537;font-size:14px;min-height:46px}
 .menu-toggle i{display:block;width:18px;height:12px;border-top:2px solid currentColor;border-bottom:2px solid currentColor;position:relative}.menu-toggle i:after{content:'';position:absolute;left:0;right:0;top:3px;border-top:2px solid currentColor}
 .site-header.is-scrolled{background:#281537f2}.site-header.is-scrolled .brand img{content:url('/assets/hocus-club-dark.svg')}.site-header.is-scrolled .menu-toggle{background:#d9f653;border-color:#d9f653}
 #main,#creation,#projets,#votre-dossier{scroll-margin-top:85px}.journey-heading{top:12%}.journey h2{font-size:clamp(37px,5.7svh,53px)}
 .folder-open{font-size:14px;width:100%;padding:13px 12px;margin-top:24px}.delivery-display>img{right:-2%;bottom:-45px;width:100px;height:155px}.folder-name{font-size:clamp(25px,7vw,35px)}
}
@media(max-width:360px){.mobile-menu{padding:20px}.menu-top img{width:115px}.menu-top{margin-bottom:22px}.mobile-menu nav>a{font-size:27px;padding:12px 0}.folder-open{font-size:12px}}
@media(prefers-reduced-motion:reduce){.folder-open:before,.folder-open:after{animation:none;opacity:.8}}

/* A real, manually controlled document comparison. */
.compare-launch{position:absolute;left:6%;bottom:5%;z-index:8;border:0;border-radius:40px;padding:12px 20px;background:#d9f653;color:#281537;font-size:14px;font-weight:700}.compare-launch[hidden]{display:none}.compare-launch span{margin-left:12px}.compare-project{border:0;background:none;color:#d9f653;padding:12px 0;text-align:left;font-size:13px}.project-docs .project-caption{flex-wrap:wrap}
#document-compare{width:min(760px,calc(100% - 24px));max-height:calc(100svh - 24px);padding:24px 32px;border-radius:18px;overflow:auto;background:#281537;color:#fff}
.compare-top{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:9px;letter-spacing:.12em}.compare-close{background:transparent;border:1px solid #ffffff55;border-radius:30px;color:#fff;padding:10px 14px;white-space:nowrap;font-size:12px}
#document-compare h2{font:800 italic 46px/.98 'Barlow Condensed',sans-serif;margin:20px 0 12px}#document-compare h2 em{color:#d9f653}.compare-explainer{font-size:14px;line-height:1.5;margin:0 0 16px}.compare-labels{display:flex;justify-content:space-between;font-size:9px;letter-spacing:.07em;margin-bottom:10px}
.compare-canvas{position:relative;aspect-ratio:1.4;background:#fff;isolation:isolate;container-type:inline-size;overflow:hidden;border-radius:4px}.sample-page{position:absolute;inset:0;background:#f8f8fb;color:#302d38;padding:5%;font-family:'DM Sans',sans-serif}.sample-page h3,.sample-page h4,.sample-page p{margin:0}.sample-meta{font-size:1.4cqw;letter-spacing:.12em}.sample-page h3{font-size:6cqw;line-height:1.03;letter-spacing:-.045em;margin:4% 0}.sample-page .sample-intro{font-size:2cqw;line-height:1.5;max-width:70%;margin-bottom:5%}.sample-sections{display:grid;grid-template-columns:repeat(3,1fr);gap:5%}.sample-sections section{border-top:1px solid #96919f;padding-top:9%}.sample-sections section>span{font-size:2cqw;color:#696374}.sample-sections h4{font-size:2.5cqw;line-height:1.2;margin:10% 0}.sample-sections p{font-size:1.8cqw;line-height:1.65}.sample-footer{position:absolute;bottom:5%;left:5%;right:5%;display:flex;justify-content:space-between;font-size:1.2cqw;letter-spacing:.08em;border-top:1px solid #cbc8d1;padding-top:2%}
.sample-before{clip-path:inset(0 calc(100% - var(--split)) 0 0);background:#fff;padding:5%}.sample-before h3{font-size:3cqw;line-height:1.25;letter-spacing:0;margin:3% 0}.sample-before h3 br{display:none}.sample-before .sample-meta{font-size:1.8cqw;letter-spacing:0}.sample-before .sample-intro{font-size:2.2cqw;max-width:none;margin:0 0 3%}.sample-before .sample-sections{display:block}.sample-before .sample-sections section{border:0;padding:0;margin-bottom:3%}.sample-before .sample-sections section>span{display:inline;font-size:2.2cqw}.sample-before .sample-sections h4{display:inline;font-size:2.2cqw;margin-left:1%}.sample-before .sample-sections p{font-size:2.2cqw;line-height:1.25}.sample-before .sample-footer{border:0;letter-spacing:0}
.compare-divider{position:absolute;top:0;bottom:0;left:clamp(2px,var(--split),calc(100% - 2px));width:2px;background:#6335e8;pointer-events:none}.compare-divider span{position:absolute;top:48%;left:50%;transform:translate(-50%,-50%);background:#d9f653;color:#281537;width:42px;height:42px;border:2px solid #281537;border-radius:50%;display:grid;place-items:center;font-size:24px}.compare-canvas input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;touch-action:pan-y}.compare-canvas:focus-within{outline:3px solid #d9f653;outline-offset:3px}.compare-controls{display:flex;justify-content:center;gap:10px;margin-top:16px}.compare-controls button{min-height:44px;border:1px solid #ffffff66;border-radius:30px;background:transparent;color:#fff;padding:10px 20px;font-size:13px}.compare-controls button[aria-pressed=true]{background:#d9f653;color:#281537;border-color:#d9f653}.compare-note{font-size:11px;color:#d6cce3;line-height:1.6;margin:16px 0 0}
@media(max-width:750px){.compare-launch{bottom:1%;font-size:12px;padding:10px 16px}.journey-stage:has(.compare-launch:not([hidden])) .journey-scroll{visibility:hidden}#document-compare{padding:18px 14px}.compare-top{font-size:8px}#document-compare h2{font-size:38px}.compare-explainer{font-size:12px}.compare-labels{font-size:8px}.compare-controls button{padding:10px 16px}.compare-canvas{aspect-ratio:.85}.sample-page h3{font-size:7cqw}.sample-page .sample-intro{font-size:3cqw;max-width:95%}.sample-sections{grid-template-columns:1fr;gap:0}.sample-sections section{padding-top:3%;margin-top:3%}.sample-sections section>span{font-size:2.7cqw;float:left;margin-right:4%}.sample-sections h4{font-size:3.5cqw;margin:0 0 2%}.sample-sections p{font-size:2.8cqw;line-height:1.4}.sample-before h3{font-size:4cqw}.sample-before .sample-intro,.sample-before .sample-sections h4,.sample-before .sample-sections p,.sample-before .sample-sections section>span{font-size:3cqw}.sample-footer{font-size:1.7cqw}.sample-meta{font-size:2cqw}.sample-before .sample-meta{font-size:2.5cqw}}