/* JI / MATTER & DIRECTION — art, device compositions and native touch exploration */
:root{--page-gutter:7%;--atelier-ease:cubic-bezier(.2,.75,.2,1);--card-radius:18px}
.experience-section{padding:100px 0 80px;overflow:hidden;background:radial-gradient(ellipse at 0 50%,#26262666,transparent 50%),#050505}
.experience-heading,.experience-controls{margin-inline:var(--page-gutter)}
.experience-heading{display:flex;align-items:end;justify-content:space-between;gap:45px;margin-bottom:40px}
.experience-heading .eyebrow{margin-bottom:20px}.experience-heading h2{font-size:clamp(42px,5.2vw,80px)}
.experience-heading>p{max-width:270px;font-size:13px;line-height:1.8;padding-bottom:5px}
.experience-rail{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--page-gutter);padding:0 var(--page-gutter) 24px;scrollbar-width:none;overscroll-behavior-x:contain;touch-action:pan-x pan-y pinch-zoom}
.experience-rail::-webkit-scrollbar{display:none}
.experience-card{position:relative;isolation:isolate;overflow:hidden;flex:0 0 min(43vw,650px);height:650px;border-radius:var(--card-radius);border:1px solid #ffffff20;scroll-snap-align:start;background:#111;transform:translateZ(0)}
.experience-card:after{content:'';position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 50px #0003;pointer-events:none;z-index:4}
.experience-card .scene-text{position:relative;z-index:5;padding:34px 34px 0;pointer-events:none}
.scene-text .eyebrow{font-size:8px;color:#c3c3c3;display:flex;align-items:center;gap:10px;margin-bottom:22px}
.scene-text .eyebrow:before{content:'';width:5px;height:5px;background:#d2d2d2;border-radius:50%}
.scene-text h3{font-size:clamp(32px,3vw,48px);line-height:1.08;max-width:440px;font-weight:400;letter-spacing:-.045em;color:white}
.scene-text h3 em{display:block;font-size:1.15em;line-height:1.13}
.scene-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform 1.2s var(--atelier-ease);pointer-events:none}
.scene-strategy .scene-bg{object-position:50% 56%}
.scene-tech .scene-bg{object-position:50% 55%}
.scene-strategy:before,.scene-tech:before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(#0005,transparent 45%,#0005)}
.scene-bottom{position:absolute;bottom:28px;left:34px;right:28px;z-index:5;display:flex;align-items:end;justify-content:space-between;gap:18px}
.scene-bottom>p{max-width:255px;font-size:11px;color:#ddd;line-height:1.65;padding-bottom:2px}
.scene-link{width:56px;height:56px;flex-shrink:0;display:grid;place-items:center;border-radius:50%;background:#ffffff18;border:1px solid #ffffff60;transition:background .3s,transform .3s;position:relative}
.scene-link:before{content:'';position:absolute;inset:-8px}.scene-link svg{width:23px;height:23px;transition:transform .3s}.scene-link:hover,.scene-link:focus-visible{background:#fff;color:#050505}.scene-link:hover svg{transform:rotate(45deg)}
.scene-devices{background:radial-gradient(ellipse at 65% 80%,#aaa 0,#555 32%,#252525 64%,#141414);color:#fff}
.device-stage{position:absolute;top:235px;left:0;right:0;height:400px;perspective:1000px;pointer-events:none}
.editorial-device{position:absolute;width:205px;height:365px;top:0;left:calc(50% - 95px);padding:7px;border:1px solid #acacac;border-radius:30px;background:linear-gradient(140deg,#999,#191919 15%,#333 70%,#999);box-shadow:15px 25px 35px #0009;transform:rotate(-11deg) rotateY(-12deg);will-change:auto;overflow:hidden;transition:transform .8s var(--atelier-ease)}
.editorial-device:after{content:'';position:absolute;inset:0;border-radius:inherit;background:linear-gradient(125deg,#fff2,transparent 30%,transparent 70%,#fff1);pointer-events:none}
.device-island{position:absolute;z-index:2;width:54px;height:13px;border-radius:20px;background:#070707;top:13px;left:calc(50% - 27px)}
.editorial-device img{width:100%;height:100%;object-fit:cover;object-position:top;border-radius:23px;background:#090909;filter:none}
.device-main{left:calc(50% - 25px);z-index:2;top:7px;transform:rotate(9deg) rotateY(-12deg)}
.device-back{left:calc(50% - 180px);top:35px;transform:rotate(-14deg) rotateY(12deg);height:330px;width:185px}
.device-back img{object-fit:cover;object-position:center}
.scene-devices .scene-bottom>p{max-width:215px;text-shadow:0 1px 10px #000}
.experience-controls{display:flex;gap:20px;align-items:center;padding-top:9px}
.experience-meter{height:2px;background:#ffffff25;flex:1;position:relative;overflow:hidden}
.experience-meter span{position:absolute;height:100%;width:33.333%;background:#e4e4e4;left:0;transition:transform .3s var(--atelier-ease)}
.experience-position{font-size:9px;font-variant-numeric:tabular-nums;letter-spacing:.12em;color:#bbb;min-width:44px}
.experience-arrows{display:flex;gap:8px}.experience-arrows button{border:1px solid #555;border-radius:50%;width:44px;height:44px;display:grid;place-items:center;transition:background .2s}.experience-arrows button:disabled{opacity:.3;cursor:default}.experience-arrows button:not(:disabled):hover{background:#333}.experience-arrows svg{height:17px;width:17px}
.experience-hint{font-size:8px;color:#aaa;letter-spacing:.1em;margin-right:auto}
.experience-section .editorial-reveal{animation:none}
/* A dark editorial photograph gives the opening depth without replacing Juan */
.hero .hero-texture{position:absolute;width:60%;height:100%;left:0;top:0;z-index:-1;opacity:.15;pointer-events:none;object-fit:cover;mask-image:linear-gradient(90deg,#000,transparent)}
.hero{isolation:isolate}.hero-coordinate{letter-spacing:.16em}.hero-coordinate:before{content:'';display:block;width:35px;height:1px;background:#aaa;margin-bottom:14px}
.brand-strip{border-bottom:1px solid #ffffff1c;border-top:1px solid #ffffff1c;background:linear-gradient(100deg,#1b1b1b,#080808 55%,#202020)}
.approach{background:radial-gradient(ellipse at 90% 70%,#45454520,transparent 55%),#080808}
.approach .strategy-map{display:none}.approach .split-heading{padding-top:25px}
.service-card{position:relative;overflow:hidden;padding:0 26px 30px!important;min-height:510px;border:1px solid #ffffff20!important;background:linear-gradient(145deg,#222,#0e0e0e 70%)!important;border-radius:14px;isolation:isolate}
.service-grid{gap:20px}.service-card h3{position:relative;z-index:1;font-size:clamp(27px,3vw,42px);margin-top:25px}
.service-card>p,.service-card>details,.service-card>button{position:relative;z-index:1}
.service-number{position:absolute;right:20px;top:20px;z-index:3;background:#080808a0}
.service-art{position:relative;height:220px;overflow:hidden;margin:0 -26px;background:radial-gradient(ellipse at 65% 60%,#555,#121212 70%);border-bottom:1px solid #ffffff15}
.service-art img{width:100%;height:100%;object-fit:cover;object-position:center 65%;transition:transform 1s var(--atelier-ease)}
.service-art img[data-art=branding]{object-position:50% 80%;filter:grayscale(1)}
.service-art:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#151515 0,transparent 50%)}
.service-art .art-label{position:absolute;bottom:15px;left:26px;z-index:1;font-size:8px;letter-spacing:.17em;color:#bbb}
.service-art.devices-art{background:linear-gradient(135deg,#3d3d3d,#101010)}
.mini-device{position:absolute;width:96px;height:180px;border:3px solid #444;border-radius:16px;overflow:hidden;background:#090909;box-shadow:12px 10px 25px #0006;top:24px;left:calc(50% - 95px);transform:rotate(-12deg)}
.mini-device img{object-position:top;object-fit:cover}.mini-device+ .mini-device{top:6px;left:50%;transform:rotate(12deg)}
.service-card.selected{border-color:#d0d0d0!important;box-shadow:inset 0 0 0 1px #d0d0d0}
.service-card .add-service{margin-top:18px;min-width:0}.service-card:has(.service-details[open]){min-height:initial}
.results{background:radial-gradient(ellipse at 90% 50%,#5b5b5b44,transparent 55%),linear-gradient(115deg,#111,#070707 60%)}
.phone-proof{border-radius:33px;padding:9px;border:1px solid #b3b3b3;background:linear-gradient(120deg,#7f7f7f,#111 16%,#444 90%,#aaa);box-shadow:20px 35px 70px #0008;position:relative;overflow:visible}
.phone-proof>button{display:block;width:100%;padding:0;overflow:hidden;border-radius:26px;background:#090909}.phone-proof>button img{width:100%;border-radius:0}.phone-proof figcaption{background:#080808b0;border:1px solid #ffffff30;position:absolute;bottom:-20px;left:-30px;right:-30px;padding:14px;font-size:7px;letter-spacing:.17em;border-radius:4px;transform:rotate(-5deg);color:#ddd}
.proof-grid{padding-bottom:25px}.proof-stats{border-top:1px solid #ffffff30;border-bottom:1px solid #ffffff20}.proof-stats strong{color:#fff}
/* A full-bleed interlude, with real text and original conceptual imagery */
.direction-interlude{position:relative;isolation:isolate;min-height:680px;display:flex;align-items:center;overflow:hidden;padding:80px var(--page-gutter);border-block:1px solid #ffffff20;background:#080808}
.direction-art{position:absolute;inset:0 0 0 32%;z-index:-2;overflow:hidden}.direction-art img{width:100%;height:100%;object-fit:cover;object-position:center 65%;opacity:.85;transform:scale(1.08);transition:transform .2s linear}
.direction-interlude:before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#050505 15%,#050505bb 40%,transparent 78%)}
.direction-copy{max-width:750px}.direction-copy .eyebrow{color:#bbb}.direction-copy h2{font-size:clamp(55px,7.2vw,110px);line-height:1;letter-spacing:-.065em}.direction-copy h2 em{display:block;margin:10px 0 0 9%}.direction-copy>p:not(.eyebrow){max-width:340px;margin-top:30px;color:#ccc;font-size:14px}.direction-copy .action{margin-top:25px;min-width:235px}.interlude-index{position:absolute;bottom:28px;right:var(--page-gutter);color:#aaa;font-size:8px;letter-spacing:.2em}
.process-section{background:radial-gradient(ellipse at 20% 100%,#aaa6,transparent 65%),linear-gradient(140deg,#e9e8e4,#cecdc8);color:#111}.process-grid article{transition:background .6s,border-color .6s}.process-grid article.is-current{border-color:#1118}.process-grid h3{color:#151515}
.about-portrait{border-radius:150px 150px 8px 8px;overflow:hidden;padding:0}.about-portrait img{border-radius:inherit}.about-portrait:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#000a,transparent 30%);pointer-events:none}
.about-portrait>span{z-index:1}.formation-story{background:linear-gradient(125deg,#ffffff08,transparent);padding:20px;border:1px solid #ffffff20;border-radius:8px}.formation-story>img{border-radius:5px}
.plan-card,.plan-card.featured{border-radius:14px;background:linear-gradient(150deg,#2c2c2c,#111 60%)}.plan-card.featured{background:radial-gradient(ellipse at 100% 10%,#64646477,transparent 60%),#191919}.plan-price{border-block:1px solid #ffffff20;padding-block:20px}
.faq-section{background:linear-gradient(150deg,#151515,#080808)}.faq-list details{transition:background .3s}.faq-list details[open]{background:#ffffff05;padding-inline:16px}.faq-list summary>span{transition:transform .3s}.faq-list details[open] summary>span{transform:rotate(45deg)}
.booking-section{background:radial-gradient(ellipse at 85% 35%,#48484855,transparent 60%),repeating-linear-gradient(100deg,#ffffff04 0 1px,transparent 1px 140px),#0b0b0b}
.contact-section{overflow:hidden;background:radial-gradient(ellipse at 10% 100%,#5d5d5d55,transparent 60%),#090909}.contact-section:after{content:'';position:absolute;right:-10%;top:10%;height:680px;width:680px;border:1px solid #ffffff12;border-radius:50%;transform:rotateX(45deg);pointer-events:none;z-index:0}.contact-section>h2,.contact-section>.section-top{position:relative;z-index:1}.contact-grid{z-index:1}.contact-section h2{font-size:clamp(45px,5.3vw,83px)}
html.motion-enabled .scene-active .scene-bg{transform:scale(1.04)}
html.motion-enabled .scene-active .device-main{animation:device-drift-front 7s ease-in-out infinite alternate}
html.motion-enabled .scene-active .device-back{animation:device-drift-back 8s ease-in-out infinite alternate}
@keyframes device-drift-front{from{transform:translateY(0) rotate(9deg) rotateY(-12deg)}to{transform:translateY(-12px) rotate(5deg) rotateY(-8deg)}}
@keyframes device-drift-back{from{transform:translateY(0) rotate(-14deg) rotateY(12deg)}to{transform:translateY(10px) rotate(-10deg) rotateY(8deg)}}
.atelier-enter{animation:atelier-enter .8s var(--atelier-ease) both}@keyframes atelier-enter{from{opacity:.4;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
@media(hover:hover)and(pointer:fine){.experience-card:hover .scene-bg{transform:scale(1.055)}.service-card:hover .service-art>img{transform:scale(1.06)}}
@media(min-width:1500px){.experience-card{flex-basis:540px}.experience-card:last-child{margin-right:var(--page-gutter)}}
@media(max-width:1100px){.experience-card{height:590px;flex-basis:54vw}.device-stage{top:205px;transform:scale(.9)}.scene-text h3{font-size:34px}.direction-interlude{min-height:600px}.service-art{height:190px}}
@media(max-width:760px){
 .experience-section{padding:62px 0 55px}.experience-heading,.experience-controls{margin-inline:6%}.experience-heading{display:block;margin-bottom:28px}.experience-heading h2{font-size:clamp(39px,10.7vw,57px)}.experience-heading>p{font-size:12px;max-width:275px;margin-top:20px}.experience-heading .eyebrow{font-size:7px;margin-bottom:17px}
 .experience-rail{padding-inline:6%;scroll-padding-inline:6%;gap:14px;padding-bottom:22px}.experience-card{height:520px;flex-basis:85%;border-radius:14px}.scene-text{padding:25px 23px 0!important}.scene-text h3{font-size:clamp(28px,7.9vw,36px);max-width:275px}.scene-text .eyebrow{font-size:7px;margin-bottom:17px}.scene-bottom{bottom:21px;left:23px;right:21px;gap:12px}.scene-bottom>p{font-size:10px;max-width:195px}.scene-link{height:45px;width:45px}.scene-link svg{width:20px;height:20px}
 .device-stage{top:176px;height:330px;transform:scale(.82);transform-origin:50% 15%}.experience-controls{gap:13px;flex-wrap:wrap}.experience-meter{flex-basis:100%;order:-1;margin-bottom:7px}.experience-hint{font-size:7px}.experience-position{font-size:8px}.experience-arrows button{width:44px;height:44px}
 .hero .hero-texture{width:90%;opacity:.18;height:100%;object-position:60% 50%}.hero-coordinate:before{width:22px;margin-bottom:10px}.hero{padding-bottom:45px}.brand-strip{font-size:6px}
 .service-grid{gap:18px}.service-card{padding:0 22px 25px!important;min-height:0!important}.service-art{height:185px;margin-inline:-22px}.service-art .art-label{left:22px;bottom:12px;font-size:7px}.service-card h3{font-size:31px;margin:22px 0 15px}.service-number{top:15px;right:15px}.service-card>p{font-size:13px}.service-card .service-details{margin-block:15px}.service-card .add-service{margin-top:13px;min-height:44px}
 .proof-grid{gap:45px}.phone-proof{max-width:238px;margin:0 auto 12px}.phone-proof figcaption{left:-15px;right:-15px;font-size:6px;padding:12px}
 .direction-interlude{min-height:630px;padding:55px 6% 210px;align-items:start}.direction-art{inset:130px -60px -30px 15%}.direction-art img{object-position:45% 65%;opacity:.85}.direction-interlude:before{background:linear-gradient(#050505 4%,#05050555 35%,transparent 65%),linear-gradient(90deg,#050505bb,transparent 70%)}.direction-copy h2{font-size:clamp(48px,13vw,69px);line-height:.98}.direction-copy h2 em{margin-left:5%}.direction-copy .eyebrow{font-size:7px;margin-bottom:25px}.direction-copy>p:not(.eyebrow){font-size:12px;max-width:240px;margin-top:25px}.direction-copy .action{font-size:11px;min-width:210px;margin-top:20px}.interlude-index{font-size:6px;right:6%;bottom:20px}
 .about-portrait{max-width:100%;border-radius:120px 120px 6px 6px}.about-portrait img{height:490px}.formation-story{padding:16px;gap:16px}.formation-story>img{width:80px;height:110px}.formation-story .eyebrow{font-size:6px}.formation-story p{font-size:12px}
 .plan-card{border-radius:12px}.contact-section h2{font-size:clamp(36px,9.4vw,52px)}.contact-section:after{width:400px;height:400px;right:-160px}.contact-section:before{display:none}
}
@media(max-width:360px){.experience-card{height:485px;flex-basis:88%}.scene-text h3{font-size:28px}.scene-bottom>p{max-width:160px;font-size:9px}.device-stage{top:170px;transform:scale(.72)}.scene-text .eyebrow{font-size:6px}.experience-hint{max-width:110px;line-height:1.8}.direction-interlude{min-height:590px}.direction-copy h2{font-size:45px}.about-portrait img{height:430px}}
@media(prefers-reduced-motion:reduce){.experience-rail{scroll-behavior:auto!important}.scene-bg,.editorial-device,.direction-art img{transform:none!important;animation:none!important;transition:none!important}.editorial-device.device-main{transform:rotate(7deg)!important}.editorial-device.device-back{transform:rotate(-12deg)!important}.atelier-enter{animation:none!important}}
html.motion-off .scene-bg{transform:none!important}html.motion-off .direction-art img{transform:scale(1.08)!important}
/* The existing three ideas, now in a seamless lateral banner */
.brand-strip.brand-ticker{position:relative;display:block;padding:0!important;min-height:70px;overflow:hidden}
.brand-ticker-window{overflow:hidden;margin-right:54px;mask-image:linear-gradient(90deg,transparent,#000 25px,#000 calc(100% - 20px),transparent)}
.brand-ticker-track{display:flex;width:max-content;animation:brand-ticker-slide 26s linear infinite;animation-play-state:paused}
.brand-ticker-group{display:flex;align-items:center;flex-shrink:0;gap:45px;padding:0 45px 0 0;min-height:70px;min-width:100vw;justify-content:space-around;white-space:nowrap}
.brand-ticker-group>span{font-size:9px!important;max-width:none!important;flex-shrink:0;letter-spacing:.12em;line-height:1.4}
.brand-ticker-group>.ticker-star{font-size:18px!important;letter-spacing:0}
.brand-ticker.ticker-running .brand-ticker-track{animation-play-state:running}
#brand-ticker-toggle{position:absolute;right:7px;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:44px;height:44px;min-height:44px;border:1px solid #ffffff30;border-radius:50%;background:#111;color:#ddd;padding:12px}
#brand-ticker-toggle svg{width:17px;height:17px}
.service-art.content-studio-art>img{object-fit:cover;object-position:50% 57%}
@keyframes brand-ticker-slide{to{transform:translateX(-50%)}}
@media(hover:hover){.brand-ticker:hover .brand-ticker-track{animation-play-state:paused}}
@media(max-width:760px){.brand-strip.brand-ticker,.brand-ticker-group{min-height:57px}.brand-ticker-group{gap:30px;padding-right:30px}.brand-ticker-group>span{font-size:8px!important}.brand-ticker-group>.ticker-star{font-size:16px!important}.brand-ticker-track{animation-duration:23s}.service-art.content-studio-art{height:205px}.service-art.content-studio-art>img{object-position:50% 57%}}
@media(prefers-reduced-motion:reduce){.brand-ticker-track{animation:none!important;width:100%}.brand-ticker-group{min-width:0;flex-wrap:wrap;justify-content:center;gap:12px 18px;padding:15px 5%;white-space:normal;width:100%}.brand-ticker-group[aria-hidden=true],#brand-ticker-toggle{display:none}.brand-ticker-window{margin-right:0;mask-image:none}.brand-ticker-group>.ticker-star:last-child{display:none}}
html.motion-off .brand-ticker-track{animation:none!important;width:100%}html.motion-off .brand-ticker-group{min-width:0;flex-wrap:wrap;justify-content:center;gap:12px 18px;padding:15px 5%;white-space:normal;width:100%}html.motion-off .brand-ticker-group[aria-hidden=true],html.motion-off #brand-ticker-toggle{display:none}html.motion-off .brand-ticker-window{margin-right:0;mask-image:none}html.motion-off .brand-ticker-group>.ticker-star:last-child{display:none}