/* Play: ideas, visual systems and products of our own. */
@font-face{font-family:'Instrument Serif';src:url('assets/instrument-serif.ttf') format('truetype');font-style:italic;font-weight:400;font-display:swap}
.nav nav{gap:26px}
.nav-brand>span:last-child{font-size:13px;letter-spacing:0}
.nav-brand>span.brand-divider{font-size:16px}
.nav.is-compact .nav-brand>span{display:none}
.hero-v4 .hero-v2-copy h1{font-size:clamp(46px,4.65vw,88px);letter-spacing:-.055em;line-height:1.08}
.hero-v4 .hero-v2-copy h1 .hero-accent{color:var(--lime);font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-weight:400;font-size:1.19em;letter-spacing:-.025em;line-height:.95;display:inline-flex;align-items:center;flex-wrap:nowrap;white-space:nowrap;vertical-align:top;height:1em;min-width:9ch}
.hero-typed-text{display:inline-block;flex:0 0 auto;white-space:pre;transition:background-color .16s,color .16s}
/* Keep a real line box when the text is empty between words. */
.hero-typed-text::before{content:'\200b'}
.hero-type-caret{display:inline-block;flex:0 0 1px;width:1px;height:.78em;margin-left:.07em;background:var(--lime);animation:hero-type-blink .9s steps(1,end) infinite}
.hero-accent.is-selecting .hero-typed-text{background:var(--lime);color:#101214}
.hero-accent.is-selecting .hero-type-caret{opacity:0}
.hero-accent.typewriter-paused .hero-type-caret{animation-play-state:paused}
@keyframes hero-type-blink{0%,48%{opacity:1}49%,100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.hero-type-caret{animation:none;opacity:.65}.hero-typed-text{transition:none}}
.hero-v4 .hero-v2-copy>p{font-size:clamp(15px,1.25vw,20px);max-width:360px}
.hero-v4 .hero-v2-cta{min-width:205px}
.hero-v4 .hero-secondary-link{margin-top:21px;font-size:13px;color:#ffffffa6;display:inline-flex;gap:22px;align-items:center;transition:color .2s}
.hero-secondary-link:hover{color:var(--lime)}
.hero-secondary-link span{font-size:18px}
.hero-solutions-visual:after{content:'';position:absolute;inset:0;background:#00143610;pointer-events:none;z-index:0}
.hero-system{position:absolute;inset:0;display:grid;place-items:center;z-index:2;pointer-events:none}
/* The original Play P gives simple particles their final form. */
.hero-form-loop{display:block;width:90%;max-width:480px;max-height:92%;height:auto;overflow:visible;filter:drop-shadow(0 2px 9px #00102e28)}
.play-form-p path{fill:none;stroke:#fffffff0;stroke-width:1.25;vector-effect:non-scaling-stroke;stroke-linejoin:round;transform-box:fill-box;transform-origin:center}
.form-p-cutout{transform-box:fill-box;transform-origin:center}
.form-entry-paths path{fill:none;stroke:#f5f6f2;stroke-opacity:.46;stroke-width:1.15;stroke-dasharray:2 8;stroke-linecap:round;vector-effect:non-scaling-stroke}
.form-particle{transform-origin:0 0}
.form-in{opacity:0;fill:none;stroke:#fffffff0;stroke-width:1.35}
.form-out-flight{opacity:0;transform-origin:0 0}
.form-out{transform-origin:0 0}
.native-product-window{position:relative;aspect-ratio:1.55;overflow:hidden;border-radius:15px;background:#0b0c0e;box-shadow:0 25px 65px #00000036;border:1px solid #ffffff24}
.native-product-window img{position:absolute;width:185%;max-width:none;height:auto;left:-43%;top:0;display:block}
.play-paths{padding:90px var(--gutter) 50px;scroll-margin-top:100px}
.play-offering{border-radius:22px;overflow:hidden;margin-bottom:16px;scroll-margin-top:104px;background:#e9eae5;color:#171a1a}
.play-offering summary{position:relative;display:grid;grid-template-columns:1fr 1fr;min-height:335px;list-style:none;cursor:pointer;isolation:isolate}
.play-offering summary::-webkit-details-marker{display:none}
.play-offering summary::marker{display:none;content:''}
.offering-copy{position:relative;z-index:2;padding:40px 44px;display:flex;flex-direction:column;align-items:flex-start}
.offering-kicker{font-size:11px;letter-spacing:.04em;margin-bottom:25px;opacity:.65;display:block}
.offering-copy h3{font-size:clamp(32px,3.4vw,56px);font-weight:400;line-height:1.05;letter-spacing:-.05em;margin:0 0 20px}
.offering-copy p{font-size:13px;line-height:1.6;margin:0 0 25px;display:flex;align-items:center;gap:8px}
.offering-action{margin-top:auto;font-size:12px;display:flex;align-items:center;gap:20px}
.offering-action i{font-style:normal;width:27px;height:27px;border:1px solid #171a1a38;border-radius:50%;display:grid;place-items:center;font-size:22px;font-weight:400;line-height:1;transition:transform .4s,background .3s}
.play-offering[open] .offering-action i{transform:rotate(45deg)}
.play-offering summary:hover .offering-action i{background:#171a1a0d}
.play-offering summary:focus-visible{outline:2px solid var(--blue);outline-offset:-5px;border-radius:22px}
.offering-visual{position:relative;min-width:0;overflow:hidden;isolation:isolate}
.offering-case-stack img{position:absolute;top:50%;left:50%;width:49%;aspect-ratio:1.16;height:auto;object-fit:cover;border:7px solid #f9faf6;border-bottom-width:25px;box-shadow:0 13px 35px #10121426;transform:translate(-50%,-50%);transition:transform .9s cubic-bezier(.22,1,.36,1)}
.offering-case-stack img:nth-child(1){transform:translate(-82%,-48%) rotate(-12deg)}
.offering-case-stack img:nth-child(2){transform:translate(-26%,-55%) rotate(10deg)}
.offering-case-stack img:nth-child(3){transform:translate(-49%,-38%) rotate(-3deg)}
.offering-design summary:hover .offering-case-stack img:nth-child(1){transform:translate(-89%,-48%) rotate(-15deg)}
.offering-design summary:hover .offering-case-stack img:nth-child(2){transform:translate(-20%,-57%) rotate(14deg)}
.offering-products{background:#171b20;color:#f4f5ef}
.offering-products .offering-copy h3{color:#dcf5ac}
.offering-products .offering-action i{border-color:#ffffff40}
.offering-products summary:hover .offering-action i{background:#ffffff15}
.offering-products summary:focus-visible{outline-color:#ccff49}
.product-platform{font-size:10px;color:#ffffff70;margin-left:10px}
.noxi-inline-mark{display:block;object-fit:contain}
.product-teaser{display:grid;place-items:center;padding:30px 44px 30px 0}
.product-teaser .native-product-window{width:100%;max-width:480px;transform:perspective(1000px) rotateY(-9deg) rotateX(5deg);transition:transform 1s cubic-bezier(.22,1,.36,1)}
.offering-products summary:hover .native-product-window{transform:perspective(1000px) rotateY(-3deg) rotateX(1deg)}
.offering-content{overflow:hidden}
.offering-inner{border-top:1px solid #10121418;padding:36px 44px 40px}
.design-capabilities{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.offering-inner h4{font-size:22px;font-weight:400;letter-spacing:-.04em;margin:0 0 15px;line-height:1.15}
.offering-inner p{font-size:13px;line-height:1.7;max-width:350px;margin:0;color:#171a1aa6}
.play-text-link{grid-column:1/-1;display:inline-flex;align-items:center;gap:25px;justify-self:start;border-bottom:1px solid #171a1a45;font-size:13px;padding-bottom:8px}
.noxi-detail{border-top-color:#ffffff1c;display:grid;grid-template-columns:.8fr 1.2fr;align-items:center;gap:44px}
.noxi-detail h4{font-size:clamp(28px,2.8vw,45px);line-height:1.08}
.noxi-detail p{color:#ffffff91;font-size:14px}
.noxi-visit{display:inline-flex;align-items:center;gap:30px;background:#d4f8a6;color:#141912;border-radius:6px;font-size:13px;padding:14px 18px;margin-top:28px}
.noxi-demo-image{border:1px solid #ffffff24;border-radius:14px;overflow:hidden;background:#111129}
.noxi-demo-image img{width:100%;height:auto;display:block}
.noxi-demo-switch{display:flex;gap:8px;justify-content:center;margin-top:14px}
.noxi-demo-switch button{padding:9px 14px;border:1px solid #ffffff26;border-radius:30px;background:transparent;color:#ffffff9c;font-size:11px;transition:background .2s,color .2s}
.noxi-demo-switch button[aria-pressed="true"]{background:#dcf5ac;color:#141912;border-color:#dcf5ac}
.noxi-demo-switch button:focus-visible,.noxi-visit:focus-visible{outline:2px solid #fff;outline-offset:4px}
.play-paths+.work-scroll{margin-top:0}
@media(min-width:1600px){.play-paths{padding-top:120px}.play-offering summary{min-height:400px}.offering-copy{padding:50px 55px}.offering-inner{padding:45px 55px}}
@media(max-width:1000px){.nav nav{gap:20px}.nav-brand>span:last-child{font-size:11px}.hero-v4 .hero-v2-copy h1{font-size:clamp(38px,4.6vw,48px)}.offering-copy{padding:32px}.product-teaser{padding:24px 28px 24px 0}.offering-inner{padding:30px 32px}.noxi-detail{gap:28px}.design-capabilities{gap:24px}.offering-inner h4{font-size:20px}}
@media(max-width:760px){
 .hero-v4 .hero-v2-copy h1{font-size:clamp(39px,9.2vw,60px);line-height:1.08}
 .hero-v4 .hero-v2-copy>p{font-size:13px;max-width:290px}
 .hero-v4 .hero-secondary-link{margin-top:18px;font-size:12px}
 .hero-v4 .hero-v2-main{gap:36px}
 .hero-system{padding-bottom:15px}
 .native-product-window{border-radius:10px}
 .play-paths{padding:44px 24px 24px}
 .play-offering{border-radius:17px;margin-bottom:14px}
 .play-offering summary{grid-template-columns:1fr;min-height:0}
 .offering-copy{padding:28px 26px 10px}
 .offering-copy h3{font-size:38px;line-height:1.06;margin-bottom:16px}
 .offering-kicker{margin-bottom:19px;font-size:10px}
 .offering-copy p{font-size:12px;margin-bottom:18px;flex-wrap:wrap}
 .offering-action{font-size:11px}
 .offering-visual{height:235px}
 .offering-case-stack img{width:47%;max-width:225px;border-width:5px;border-bottom-width:20px}
 .offering-case-stack img:nth-child(3){transform:translate(-49%,-48%) rotate(-3deg)}
 .product-teaser{height:auto;padding:28px 26px 32px}
 .product-teaser .native-product-window{transform:none}
 .product-platform{margin-left:4px}
 .offering-inner{padding:26px}
 .design-capabilities{grid-template-columns:1fr;gap:25px}
 .offering-inner h4{font-size:22px;margin-bottom:9px}
 .offering-inner p{font-size:12px}
 .play-text-link{font-size:12px;gap:15px}
 .noxi-detail{grid-template-columns:1fr;gap:30px}
 .noxi-detail h4{font-size:34px}
 .noxi-detail p{font-size:13px}
 .noxi-demo-switch{gap:6px}
 .noxi-demo-switch button{font-size:10px;padding:9px 12px}
 .noxi-visit{font-size:12px;margin-top:23px}
 .nav nav{gap:18px}
}
@media(max-width:600px){
 .nav nav>a:nth-child(2){display:flex}
 .nav nav .contact-link{display:none}
 .nav nav>a[href="#trabalhos"]{display:none}
 .nav:not(.is-compact) nav{gap:20px}
 .nav-brand>.brand-divider,.nav-brand>span:last-child{display:none}
 .nav.is-compact{width:calc(100% - 24px);justify-content:space-between}
 .nav.is-compact nav{gap:20px}
}
@media(max-width:360px){.hero-v4 .hero-v2-copy h1{font-size:36px}.play-paths{padding-inline:20px}.offering-copy h3{font-size:34px}.offering-copy{padding-inline:23px}.offering-inner{padding-inline:23px}.nav nav{gap:16px}}
@media(prefers-reduced-motion:reduce){.offering-case-stack img,.product-teaser .native-product-window{transition:none}}
.motion-paused .offering-case-stack img,.motion-paused .product-teaser .native-product-window{transition:none}

/* A separate, quiet surface when the product opens. */
.offering-products>.offering-content{background:linear-gradient(135deg,#302a46 0%,#232a38 100%)}
.offering-products .noxi-detail{border-top-color:#d4c6ff29}
.offering-products .noxi-detail p{color:#ede7ffc2}
.own-product-badge{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;line-height:1.1;padding:6px 10px;border:1px solid #85bc4847;border-radius:999px;color:#18311c;background:linear-gradient(110deg,#c7ff5e,#a2edbc,#d8ff93,#c7ff5e);background-size:240% 100%;font-size:9px;font-weight:600;letter-spacing:.015em;text-transform:none;animation:own-product-shift 5s ease-in-out infinite}
.archive-meta>span:has(.own-product-badge){display:inline-flex}
.project-meta .own-product-badge{font-size:8px;padding:5px 8px}
@keyframes own-product-shift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.motion-paused .own-product-badge{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.own-product-badge{animation:none}}

/* The catalogue starts with six projects and expands on request. */
@property --archive-border-angle{syntax:'<angle>';initial-value:0deg;inherits:false}
.archive:has(.archive-more:not([hidden])){padding-bottom:140px}
.archive-more{position:relative;isolation:isolate;display:flex;align-items:center;justify-content:space-between;gap:32px;width:min(100%,560px);min-height:76px;margin:104px auto 0;padding:22px 32px;border:0;border-radius:999px;background:transparent;color:var(--ink);font:inherit;cursor:pointer;transition:background .3s,color .3s}
.archive-more-label{min-width:0;font-size:20px;line-height:1.2;letter-spacing:-.025em;text-align:left}
.archive-more::before{content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;background:conic-gradient(from var(--archive-border-angle),#b5b9ab 0deg,#b5b9ab 220deg,#a3cb4c 265deg,#ccff49 305deg,#b5b9ab 360deg);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;pointer-events:none;animation:archive-border-turn 5s linear infinite}
.archive-more:hover{background:#101214;color:#f8f8f5}
.archive-more:focus-visible{outline:2px solid #668b24;outline-offset:4px}
.archive-more-icon{flex:0 0 auto;font-size:34px;font-weight:400;line-height:.8;transition:transform .35s}
.archive-more[aria-expanded='true'] .archive-more-icon{transform:rotate(45deg)}
@keyframes archive-border-turn{to{--archive-border-angle:360deg}}
body.motion-paused .archive-more::before{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.archive-more::before{animation:none}.archive-more-icon{transition:none}}
@media(max-width:600px){.archive:has(.archive-more:not([hidden])){padding-bottom:92px}.archive-more{min-height:70px;margin-top:72px;padding:20px 26px;gap:20px}.archive-more-label{font-size:18px}.archive-more-icon{font-size:30px}}