:root{
  --bg:#fff; --ink:#111; --muted:#8a8a8a; --line:#ececec;
  --orange:#ff5a1f; --orange-2:#ff8a3d; --peach:#fff1e8;
  --display:'Unbounded',sans-serif; --serif:'Instrument Serif',serif; --body:'Space Grotesk',sans-serif;
  --pad:clamp(1.25rem,4vw,4rem);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:1.05rem;line-height:1.55;overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
ul{list-style:none}
em{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--orange)}
mark{background:none;color:var(--orange);font-family:var(--serif);font-style:italic;font-size:1.2em}
::selection{background:var(--orange);color:#fff}

/* cursor */
.cursor{position:fixed;inset:0;pointer-events:none;z-index:999;display:none}
@media (pointer:fine){.cursor{display:block} body,a{cursor:none}}
.cursor__dot,.cursor__ring{position:absolute;top:0;left:0;border-radius:50%;will-change:transform}
.cursor__dot{width:8px;height:8px;margin:-4px;background:var(--orange)}
.cursor__ring{width:40px;height:40px;margin:-20px;border:1.5px solid var(--orange);transition:width .25s,height .25s,margin .25s,background .25s}
.cursor.is-hover .cursor__ring{width:76px;height:76px;margin:-38px;background:rgba(255,90,31,.14)}

.progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:100}
.progress span{display:block;height:100%;width:100%;background:var(--orange);transform-origin:left;transform:scaleX(0)}

/* nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:1rem var(--pad);background:rgba(255,255,255,.72);backdrop-filter:blur(14px);transition:transform .4s}
.nav.hide{transform:translateY(-100%)}
.logo{display:block;line-height:0;transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.logo:hover{transform:rotate(-4deg) scale(1.06)}
.logo img{height:46px;width:auto;display:block}
.nav nav{display:flex;gap:2rem}
.nav nav a{font-size:.9rem;font-weight:500;position:relative}
.nav nav a::after{content:"";position:absolute;left:0;bottom:-4px;height:2px;width:100%;background:var(--orange);transform:scaleX(0);transform-origin:right;transition:transform .35s}
.nav nav a:hover::after{transform:scaleX(1);transform-origin:left}
.pill{background:var(--ink);color:#fff;padding:.7rem 1.2rem;border-radius:99px;font-size:.9rem;font-weight:500;display:inline-flex;gap:.4rem;transition:background .3s}
.pill:hover{background:var(--orange)}

/* hero */
.hero{position:relative;min-height:100svh;padding:9rem var(--pad) 3rem;display:flex;flex-direction:column;justify-content:center;overflow:hidden}
.eyebrow{font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:500;margin-bottom:1.5rem}
.hero__title{font-family:var(--display);font-weight:600;font-size:clamp(2.8rem,9.5vw,9.5rem);line-height:1;letter-spacing:-.045em;position:relative;z-index:2}
.line{display:block}
.line--accent em{font-size:1.18em;letter-spacing:-.02em;line-height:.9}
.line--accent{color:var(--orange)}
.ch{display:inline-block;transform:translateY(110%) rotate(8deg);opacity:0;animation:rise .9s cubic-bezier(.2,.9,.2,1) forwards;animation-delay:calc(var(--i)*40ms + 200ms)}
.word-mask{display:inline-block;overflow:hidden;vertical-align:top;padding:.08em .16em .2em;margin:-.08em -.16em -.2em}
@keyframes rise{to{transform:none;opacity:1}}
.hero__foot{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;margin-top:3rem;position:relative;z-index:2}
.hero__foot p{max-width:30rem;font-size:1.2rem}
.badge{position:relative;width:150px;height:150px;flex:none;display:grid;place-items:center;border-radius:50%;background:var(--orange);color:#fff}
.badge svg{position:absolute;inset:0;animation:spin 14s linear infinite}
.badge text{font-size:15.5px;letter-spacing:.14em;text-transform:uppercase;fill:#fff;font-family:var(--body);font-weight:600}
.badge span{font-size:2rem;transition:transform .3s}
.badge:hover span{transform:translateY(6px)}
@keyframes spin{to{transform:rotate(360deg)}}

.blob{position:absolute;border-radius:50%;filter:blur(2px);z-index:0}
.blob--a{width:44vw;height:44vw;right:-10vw;top:8vh;background:radial-gradient(circle at 30% 30%,var(--orange-2),var(--orange));animation:morph 12s ease-in-out infinite}
.blob--b{width:18vw;height:18vw;left:42vw;bottom:6vh;background:var(--peach);animation:morph 9s ease-in-out infinite reverse}
@keyframes morph{0%,100%{border-radius:50% 50% 50% 50%/50% 50% 50% 50%}33%{border-radius:62% 38% 55% 45%/45% 60% 40% 55%}66%{border-radius:40% 60% 38% 62%/58% 42% 58% 42%}}
.shape{position:absolute;z-index:1;pointer-events:none}
.shape--ring{width:90px;height:90px;border:2px solid var(--ink);border-radius:50%;left:6vw;top:22vh}
.shape--cross{right:12vw;bottom:18vh;font-family:var(--display);font-size:4rem;color:var(--ink);animation:spin 20s linear infinite}

/* marquee */
.marquee{background:var(--ink);color:#fff;overflow:hidden;padding:1.1rem 0;transform:rotate(-1.2deg) scale(1.03);margin:2rem 0}
.marquee__track{display:flex;gap:2rem;width:max-content;animation:marq 28s linear infinite;font-family:var(--display);font-weight:600;font-size:clamp(1.2rem,2.6vw,2.2rem);text-transform:uppercase;white-space:nowrap}
.marquee i{color:var(--orange);font-style:normal}
@keyframes marq{to{transform:translateX(-50%)}}

/* sections */
section{padding:7rem var(--pad)}
h2{font-family:var(--display);font-weight:600;font-size:clamp(2rem,5vw,4.6rem);line-height:1.05;letter-spacing:-.04em}
h2 em{font-size:1.15em}
.section-head{margin-bottom:4rem}
.reveal{opacity:0;transform:translateY(40px);transition:opacity .9s cubic-bezier(.2,.8,.2,1),transform .9s cubic-bezier(.2,.8,.2,1);transition-delay:var(--d,0s)}
.reveal.in{opacity:1;transform:none}

/* services */
.svc{display:grid;grid-template-columns:5rem 1.2fr 1.5fr 3rem;gap:1.5rem;align-items:center;padding:2rem 1rem;border-top:1px solid var(--line);position:relative;isolation:isolate;transition:color .4s,padding .4s}
.svc:last-child{border-bottom:1px solid var(--line)}
.svc::before{content:"";position:absolute;inset:0;background:var(--orange);transform:scaleY(0);transform-origin:bottom;transition:transform .45s cubic-bezier(.7,0,.2,1);z-index:-1}
.svc:hover{color:#fff;padding-left:2rem}
.svc:hover::before{transform:scaleY(1)}
.svc__n{font-family:var(--display);font-size:.9rem;color:var(--orange);transition:color .3s}
.svc:hover .svc__n{color:#fff}
.svc h3{font-family:var(--display);font-weight:600;font-size:clamp(1.3rem,2.6vw,2.2rem);letter-spacing:-.03em;line-height:1.1}
.svc p{color:var(--muted);transition:color .3s}
.svc:hover p{color:#fff}
.svc__arrow{font-size:2rem;transition:transform .4s}
.svc:hover .svc__arrow{transform:translateX(10px) rotate(-45deg)}

/* statement */
.statement{background:var(--peach)}
.statement__text{font-family:var(--display);font-weight:600;font-size:clamp(1.5rem,3.6vw,3.2rem);line-height:1.2;letter-spacing:-.03em;max-width:62rem}
.statement__text .w{color:rgba(17,17,17,.14);transition:color .3s}
.statement__text .w.on{color:var(--ink)}

/* process */
.process{padding:0;height:420vh;position:relative}
.process__sticky{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;flex-direction:column;justify-content:center;gap:3rem;padding:6rem 0 3rem}
.process__head{padding:0 var(--pad)}
.process__track{display:flex;gap:2rem;padding:0 var(--pad);will-change:transform}
.step{flex:none;width:min(78vw,520px);border:1.5px solid var(--ink);border-radius:28px;padding:2rem;display:flex;flex-direction:column;gap:1rem;background:#fff;transition:background .4s,color .4s,transform .4s}
.step:hover{background:var(--orange);color:#fff;border-color:var(--orange);transform:translateY(-8px) rotate(-1deg)}
.step__n{font-family:var(--display);color:var(--orange);font-size:.9rem;transition:color .3s}
.step:hover .step__n{color:#fff}
.step h3{font-family:var(--display);font-weight:600;font-size:2.4rem;letter-spacing:-.04em}
.step p{min-height:4.6em}
.step__art{height:150px;border-radius:18px;background:var(--peach);position:relative;overflow:hidden}
.step__art::before,.step__art::after{content:"";position:absolute}
.art-listen::before{width:80px;height:80px;border-radius:50%;border:3px solid var(--orange);left:20%;top:30%;box-shadow:0 0 0 14px rgba(255,90,31,.2),0 0 0 32px rgba(255,90,31,.1);animation:pulse 2.4s infinite}
.art-sketch::before{inset:30% 10%;border-top:3px dashed var(--ink);transform:rotate(-6deg)}
.art-sketch::after{width:60px;height:60px;border:3px solid var(--orange);right:15%;top:25%;transform:rotate(20deg);animation:wob 3s ease-in-out infinite}
.art-build::before{width:70px;height:70px;background:var(--orange);left:20%;top:30%;border-radius:12px;animation:wob 3s ease-in-out infinite}
.art-build::after{width:70px;height:70px;background:var(--ink);left:40%;top:45%;border-radius:50%}
.art-deliver::before{width:0;height:0;border-left:50px solid var(--orange);border-top:30px solid transparent;border-bottom:30px solid transparent;left:42%;top:30%;animation:nudge 1.6s ease-in-out infinite}
@keyframes pulse{50%{transform:scale(1.15)}}
@keyframes wob{50%{transform:rotate(25deg) translateY(-8px)}}
@keyframes nudge{50%{transform:translateX(18px)}}
.process__bar{margin:0 var(--pad);height:3px;background:var(--line)}
.process__bar span{display:block;height:100%;background:var(--orange);transform-origin:left;transform:scaleX(0)}

/* portfolio */
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:1.5rem}
.card{display:block;position:relative;transform-style:preserve-3d;transition:transform .2s ease-out,opacity .9s,transform .9s}
.card--1{grid-column:span 7}.card--2{grid-column:span 5}.card--3{grid-column:span 4}.card--4{grid-column:span 4}.card--5{grid-column:span 4}.card--6{grid-column:span 12}
.card__art{height:clamp(240px,32vw,440px);border-radius:24px;overflow:hidden;position:relative;background:var(--peach);transition:border-radius .5s}
.card--3 .card__art,.card--4 .card__art,.card--5 .card__art{height:clamp(240px,26vw,360px)}
.card--6 .card__art{height:clamp(200px,22vw,320px)}
.card:hover .card__art{border-radius:90px 24px 90px 24px}
.card__art::before,.card__art::after{content:"";position:absolute;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.card--1 .card__art{background:linear-gradient(135deg,var(--orange),var(--orange-2))}
.card--1 .card__art::before{width:55%;height:70%;left:10%;bottom:-10%;background:#fff;border-radius:200px 200px 0 0}
.card--1 .card__art::after{width:22%;aspect-ratio:1;right:12%;top:14%;border-radius:50%;background:var(--ink)}
.card--2 .card__art{background:var(--ink)}
.card--2 .card__art::before{width:46%;aspect-ratio:1;left:27%;top:18%;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffd2b8,var(--orange))}
.card--3 .card__art{background:var(--peach)}
.card--3 .card__art::before{inset:20%;border:3px solid var(--orange);border-radius:50%}
.card--3 .card__art::after{inset:34%;border:3px dashed var(--ink);border-radius:50%;animation:spin 10s linear infinite}
.card--4 .card__art{background:var(--orange)}
.card--4 .card__art::before{width:30%;height:30%;left:15%;top:35%;background:#fff;border-radius:50%;box-shadow:70px 0 0 #111,140px 0 0 #fff}
.card--5 .card__art{background:#f4efe9}
.card--5 .card__art::before{width:60%;height:45%;left:20%;bottom:12%;background:var(--orange-2);border-radius:14px}
.card--5 .card__art::after{width:20%;height:35%;left:30%;top:10%;background:var(--ink);border-radius:99px 99px 0 0}
.card--6 .card__art{background:#fff;border:1.5px solid var(--ink)}
.card--6 .card__art::before{content:"Aa";inset:0;display:grid;place-items:center;font-family:var(--serif);font-style:italic;font-size:clamp(5rem,16vw,14rem);color:var(--orange);line-height:1}
.card:hover .card__art::before{transform:scale(1.08) rotate(-3deg)}
.card:hover .card__art::after{transform:scale(1.15)}
.card__meta{display:flex;justify-content:space-between;align-items:baseline;padding:1rem .25rem}
.card__meta span{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.card__meta h3{font-family:var(--display);font-weight:600;font-size:1.2rem;letter-spacing:-.03em}

/* stats */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;background:var(--orange);color:#fff;border-radius:40px;margin:0 var(--pad);padding:4rem}
.stat b{display:block;font-family:var(--display);font-weight:600;font-size:clamp(2rem,4.6vw,4.4rem);letter-spacing:-.05em;line-height:1}
.stat span{font-size:.85rem;letter-spacing:.1em;text-transform:uppercase;opacity:.85}

/* contact */
.contact{text-align:center;padding-top:10rem;padding-bottom:8rem}
.contact__title{font-size:clamp(2.4rem,7vw,7rem);max-width:16ch;margin:0 auto 3rem}
.big-cta{display:inline-flex;gap:.8rem;align-items:center;font-family:var(--display);font-weight:600;font-size:clamp(1rem,2.4vw,1.8rem);padding:1.3rem 2.4rem;border-radius:99px;background:var(--ink);color:#fff;transition:background .3s}
.big-cta:hover{background:var(--orange)}
.footer{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding:2rem var(--pad);border-top:1px solid var(--line);font-size:.85rem;color:var(--muted)}

/* responsive */
@media (max-width:860px){
  .nav nav{display:none}
  .hero__foot{flex-direction:column;align-items:flex-start}
  .svc{grid-template-columns:3rem 1fr;row-gap:.5rem}
  .svc p{grid-column:2}.svc__arrow{display:none}
  .card--1,.card--2,.card--3,.card--4,.card--5,.card--6{grid-column:span 12}
  .stats{grid-template-columns:1fr 1fr;padding:2.5rem 1.5rem;border-radius:28px}
  .process{height:360vh}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .ch,.reveal{opacity:1;transform:none}
  .marquee{transform:none}
  html{scroll-behavior:auto}
}

/* event tech */
.eventtech{display:grid;grid-template-columns:1.1fr .9fr;gap:4rem;align-items:center}
.eventtech__copy>p:not(.eyebrow){max-width:34rem;margin:1.5rem 0}
.ticks{margin-bottom:2rem;display:grid;gap:.6rem}
.ticks li{padding-left:2rem;position:relative;font-weight:500}
.ticks li::before{content:"";position:absolute;left:0;top:.5em;width:1rem;height:1rem;border-radius:50%;background:var(--orange)}
.qr{position:relative;aspect-ratio:1;max-width:460px;width:100%;justify-self:center;background:var(--ink);border-radius:36px;padding:12%;overflow:hidden}
.qr__grid{display:grid;grid-template-columns:repeat(15,1fr);gap:3px;height:100%}
.qr__grid i{background:#fff;border-radius:2px;opacity:.95;transition:opacity .4s,background .4s}
.qr__grid i.off{opacity:0}
.qr__grid i.hot{background:var(--orange)}
.qr__scan{position:absolute;left:0;right:0;height:3px;background:var(--orange);box-shadow:0 0 24px 6px rgba(255,90,31,.7);animation:scan 3s ease-in-out infinite}
@keyframes scan{0%,100%{top:8%}50%{top:92%}}
.qr__tag{position:absolute;right:1rem;bottom:1rem;background:var(--orange);color:#fff;font-weight:600;font-size:.85rem;padding:.5rem .9rem;border-radius:99px;animation:tag 3s ease-in-out infinite}
@keyframes tag{0%,55%{opacity:0;transform:translateY(10px)}70%,95%{opacity:1;transform:none}100%{opacity:0}}

/* markets */
.markets{margin-top:5rem}
.markets ul{display:flex;flex-wrap:wrap;gap:.8rem}
.markets li{font-family:var(--display);font-weight:600;font-size:clamp(1rem,2vw,1.5rem);letter-spacing:-.03em;padding:.7rem 1.4rem;border:1.5px solid var(--ink);border-radius:99px;transition:background .3s,color .3s,border-color .3s,transform .3s}
.markets li:hover{background:var(--orange);color:#fff;border-color:var(--orange);transform:translateY(-4px) rotate(-2deg)}

/* why */
.why__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem}
.why__item{border-top:2px solid var(--ink);padding-top:1.5rem}
.why__item b{display:block;font-family:var(--display);font-weight:600;font-size:clamp(1.6rem,3vw,2.6rem);letter-spacing:-.05em;color:var(--orange);margin-bottom:1.2rem}
.why__item h3{font-family:var(--display);font-weight:600;font-size:1.1rem;letter-spacing:-.03em;margin-bottom:.5rem}
.why__item p{color:var(--muted);font-size:.95rem}
.contact__note{margin-top:2rem;color:var(--muted);font-size:.9rem}

@media (max-width:860px){
  .eventtech{grid-template-columns:1fr;gap:2.5rem}
  .why__grid{grid-template-columns:1fr 1fr}
}

/* language switcher */
.nav__right{display:flex;align-items:center;gap:1rem}
.lang{position:relative;display:flex;padding:4px;border-radius:99px;background:var(--ink);isolation:isolate}
.lang__thumb{position:absolute;z-index:-1;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);border-radius:99px;background:var(--orange);box-shadow:0 0 0 0 rgba(255,90,31,.5);transition:transform .5s cubic-bezier(.7,0,.2,1);animation:langpulse 2.2s ease-out infinite}
.lang[data-active="es"] .lang__thumb{transform:translateX(100%)}
.lang.touched .lang__thumb{animation:none}
@keyframes langpulse{0%{box-shadow:0 0 0 0 rgba(255,90,31,.55)}70%,100%{box-shadow:0 0 0 12px rgba(255,90,31,0)}}
.lang__btn{all:unset;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:4.6rem;padding:.35rem .9rem;color:#fff;text-align:center;line-height:1.1;cursor:pointer;transition:opacity .3s}
@media (pointer:fine){.lang__btn{cursor:none}}
.lang__btn b{font-family:var(--display);font-weight:600;font-size:.85rem;letter-spacing:.02em}
.lang__btn small{font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;opacity:.75}
.lang__btn:not(.is-active){opacity:.6}
.lang__btn:not(.is-active):hover{opacity:1}
.lang__btn:focus-visible{outline:2px solid var(--orange);outline-offset:3px;border-radius:99px}
/* hint bubble, only while English is showing and the visitor hasn't touched it */
.lang__hint{position:absolute;top:calc(100% + 14px);right:0;white-space:nowrap;background:var(--orange);color:#fff;font-weight:600;font-size:.85rem;padding:.55rem .9rem;border-radius:14px;pointer-events:none;animation:hint 3.2s ease-in-out infinite}
.lang__hint::before{content:"";position:absolute;top:-6px;right:2.2rem;width:12px;height:12px;background:var(--orange);transform:rotate(45deg)}
.lang.touched .lang__hint,.lang[data-active="es"] .lang__hint{display:none}
@keyframes hint{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@media (max-width:560px){
  .nav__right .pill{display:none}
  .lang__btn{min-width:3.8rem;padding:.35rem .6rem}
}

.footer__link{color:var(--ink);font-weight:600;background:linear-gradient(var(--orange),var(--orange)) 0 100%/0 2px no-repeat;transition:background-size .35s,color .3s;padding-bottom:2px}
.footer__link:hover{color:var(--orange);background-size:100% 2px}

/* seo/a11y helpers */
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.lang__btn[aria-current="page"]{pointer-events:none}

/* faq */
.faq__list{max-width:56rem}
.faq__item{border-top:1px solid var(--line);padding:1.4rem 0}
.faq__item:last-child{border-bottom:1px solid var(--line)}
.faq__item summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:1.5rem;align-items:center;font-family:var(--display);font-weight:600;font-size:clamp(1rem,1.9vw,1.35rem);letter-spacing:-.03em;line-height:1.25}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{content:"+";flex:none;display:grid;place-items:center;width:2.2rem;height:2.2rem;border-radius:50%;border:1.5px solid var(--ink);font-size:1.3rem;font-family:var(--body);font-weight:500;transition:transform .35s,background .3s,color .3s,border-color .3s}
.faq__item[open] summary::after{transform:rotate(45deg);background:var(--orange);border-color:var(--orange);color:#fff}
.faq__item summary:hover{color:var(--orange)}
.faq__item p{margin-top:1rem;max-width:44rem;color:#444}
.faq__item summary:focus-visible{outline:2px solid var(--orange);outline-offset:6px;border-radius:8px}
@media (pointer:fine){.faq__item summary{cursor:none}}