:root { --ink:#0b0b0d; --cream:#f4f1e9; --pink:#cb2468; --red:#ff352e; --yellow:#d8bb2c; --muted:#a8a5a0; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--cream); background:var(--ink); font-family:Arial, Helvetica, sans-serif; overflow-x:hidden; } .noise { position:fixed; inset:0; pointer-events:none; opacity:.08; z-index:10; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E"); } a { color:inherit; text-decoration:none; } .site-header { position:absolute; width:100%; z-index:3; padding:28px 5vw; display:flex; align-items:flex-start; justify-content:space-between; } .wordmark { font-size:22px; line-height:.78; font-weight:900; letter-spacing:-1.8px; } .wordmark span { color:var(--cream); } .wordmark b { color:var(--red); font-size:28px; vertical-align:top; } nav { display:flex; align-items:center; gap:26px; font-weight:800; font-size:12px; letter-spacing:.8px; } nav a { transition:color .2s; } nav a:hover { color:var(--yellow); } .nav-cta { padding:10px 14px; color:var(--ink); background:var(--yellow); } .menu-toggle { display:none; } .hero { min-height:850px; padding:180px 9vw 76px; position:relative; isolation:isolate; background:radial-gradient(circle at 78% 38%, #3a2436 0, #18151d 24%, transparent 53%), linear-gradient(120deg,#111217,#050506); overflow:hidden; } .hero:before,.hero:after { content:""; position:absolute; border-radius:50%; z-index:-1; background-image:radial-gradient(circle, var(--pink) 2px, transparent 3px); background-size:17px 17px; opacity:.85; } .hero:before { width:520px; height:520px; right:-160px; top:-120px; } .hero:after { width:370px; height:370px; left:-110px; bottom:-135px; transform:rotate(25deg); } .hero-copy { width:min(590px,100%); } .eyebrow,.section-kicker { margin:0 0 22px; color:var(--yellow); font-size:12px; font-weight:900; letter-spacing:1.8px; } .eyebrow span { color:var(--pink); margin:0 7px; } h1,h2,h3 { margin:0; font-weight:900; letter-spacing:-.065em; } h1 { font-size:clamp(65px,9.3vw,145px); line-height:.78; } h1 em,h2 span { font-style:normal; color:var(--pink); } .hero-text { max-width:410px; margin:35px 0 30px; color:#d0ccc7; font-size:17px; line-height:1.45; } .hero-actions { display:flex; align-items:center; gap:26px; flex-wrap:wrap; } .button { display:inline-block; padding:16px 20px; color:var(--ink); font-size:12px; font-weight:900; letter-spacing:.7px; transition:transform .2s; } .button:hover { transform:rotate(-2deg) translateY(-3px); } .button-yellow { background:var(--yellow); } .button-pink { background:var(--pink); color:white; } .text-link { font-size:12px; font-weight:900; letter-spacing:.8px; border-bottom:2px solid var(--pink); padding-bottom:5px; } .text-link span { color:var(--pink); font-size:20px; } .hero-art { position:absolute; right:8vw; bottom:66px; width:min(41vw,570px); text-align:center; transform:rotate(-3deg); } .hero-art img { width:100%; display:block; mix-blend-mode:screen; filter:contrast(1.1); } .tape-label { display:inline-block; margin-top:-45px; padding:10px 16px; position:relative; color:var(--ink); font-size:11px; font-weight:900; letter-spacing:1px; background:var(--yellow); transform:rotate(2deg); } .equalizer { display:flex; height:50px; gap:4px; justify-content:center; align-items:end; margin-top:25px; } .equalizer i { width:5px; background:var(--yellow); } .equalizer i:nth-child(1),.equalizer i:nth-child(12) { height:15%; } .equalizer i:nth-child(2),.equalizer i:nth-child(9) { height:65%; } .equalizer i:nth-child(3),.equalizer i:nth-child(10) { height:35%; } .equalizer i:nth-child(4),.equalizer i:nth-child(11) { height:85%; } .equalizer i:nth-child(5),.equalizer i:nth-child(8) { height:45%; } .equalizer i:nth-child(6),.equalizer i:nth-child(7) { height:25%; } .equalizer i:nth-child(13) { height:20%; } .equalizer i:nth-child(14) { height:9%; } .hero-count,.hero-stamp { position:absolute; top:180px; color:var(--yellow); font-size:12px; font-weight:900; letter-spacing:3px; } .hero-count { left:5vw; writing-mode:vertical-rl; } .hero-count span { margin-top:12px; } .hero-stamp { right:5vw; line-height:1.3; } .manifesto,.services,.season,footer { padding:130px 9vw; } .manifesto { background:var(--cream); color:var(--ink); } .manifesto-grid { display:grid; grid-template-columns:1.3fr .7fr; gap:8vw; align-items:end; } h2 { font-size:clamp(45px,6.5vw,105px); line-height:.83; } .manifesto .section-kicker { color:var(--pink); } .manifesto p { font-size:16px; line-height:1.55; } .manifesto .lead { margin-top:0; font-size:22px; font-weight:800; line-height:1.1; } .statement-image { display:block; width:100%; margin-top:80px; filter:contrast(1.08) saturate(.9); } .services { position:relative; overflow:hidden; background:#111114; } .services:after { content:""; position:absolute; width:520px; height:520px; right:-140px; bottom:-130px; border-radius:50%; background-image:radial-gradient(circle, var(--pink) 2px, transparent 3px); background-size:17px 17px; opacity:.85; } .service-intro { width:min(520px,100%); } .service-intro p:not(.section-kicker) { color:var(--muted); max-width:340px; line-height:1.5; } .service-list { margin-top:70px; border-top:1px solid #555; position:relative; z-index:1; } .service-list article { padding:22px 0; display:grid; grid-template-columns:60px 1fr 270px; gap:20px; align-items:center; border-bottom:1px solid #555; } .service-list span { color:var(--yellow); font-weight:900; font-size:12px; } .service-list h3 { font-size:clamp(33px,5vw,75px); } .service-list p { margin:0; color:var(--muted); font-size:14px; line-height:1.45; } .services-image { display:none; } .season { display:grid; grid-template-columns:1fr 1fr; gap:8vw; align-items:center; background:linear-gradient(135deg,#202f3e,#10161e); } .season-poster { transform:rotate(-4deg); box-shadow:20px 20px 0 var(--pink); } .season-poster img { display:block; width:100%; } .season-copy p:not(.section-kicker) { max-width:400px; color:#cdc9c1; font-size:17px; line-height:1.5; margin:30px 0; } footer { color:var(--ink); background:var(--yellow); } footer .section-kicker { color:var(--pink); } footer h2 span { color:var(--pink); } .contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin:60px 0 100px; } .contact-grid a { border-top:3px solid var(--ink); padding-top:12px; display:flex; justify-content:space-between; font-size:12px; font-weight:900; letter-spacing:.8px; } .contact-grid strong { font-size:15px; letter-spacing:0; } .footer-end { border-top:1px solid rgba(0,0,0,.3); margin:0; padding-top:18px; font-size:11px; font-weight:900; letter-spacing:1.5px; } .footer-end span { color:var(--red); font-size:18px; }
@media (max-width:760px) { .site-header { padding:20px 6vw; } nav { display:none; position:absolute; right:6vw; top:65px; padding:18px; gap:16px; flex-direction:column; align-items:flex-start; background:var(--cream); color:var(--ink); } nav.open { display:flex; } .menu-toggle { display:flex; gap:8px; align-items:center; border:0; padding:8px 0; color:var(--cream); background:none; font-weight:900; font-size:11px; } .menu-toggle i,.menu-toggle i:before { display:block; content:""; width:19px; height:2px; background:var(--yellow); } .menu-toggle i:before { transform:translateY(-6px); } .hero { min-height:790px; padding:145px 9vw 50px; } .hero-art { width:82vw; right:9vw; bottom:48px; } .hero-text { font-size:15px; max-width:280px; } .hero-count { display:none; } .hero-stamp { top:auto; bottom:255px; right:6vw; font-size:9px; } .manifesto,.services,.season,footer { padding:80px 7vw; } .manifesto-grid,.season { grid-template-columns:1fr; gap:35px; } .statement-image { margin-top:45px; } .service-list { margin-top:48px; } .service-list article { grid-template-columns:32px 1fr; gap:8px; } .service-list p { grid-column:2; } .season { gap:55px; } .season-poster { width:85%; } .contact-grid { grid-template-columns:1fr; margin:45px 0 70px; gap:30px; } .contact-grid a { flex-direction:column; gap:8px; } }
.hero-art{cursor:ns-resize;user-select:none}.hero-logo{position:relative;z-index:1;transition:clip-path .18s ease,opacity .18s ease}.cassette-piece{position:absolute;z-index:2;inset:0;opacity:0;pointer-events:none;background-image:url('assets/logo.png');background-repeat:no-repeat;background-position:center top;background-size:100% auto;transition:opacity .12s ease,transform .75s cubic-bezier(.22,.84,.3,1),filter .5s ease}.piece-left{clip-path:polygon(16% 20%,50% 14%,50% 46%,19% 48%)}.piece-middle{clip-path:polygon(50% 14%,84% 19%,82% 47%,50% 46%)}.piece-right{clip-path:polygon(82% 19%,91% 24%,91% 48%,82% 47%)}.shatter-prompt{position:absolute;z-index:4;left:50%;top:9%;padding:8px 10px;transform:translateX(-50%);color:var(--ink);background:var(--yellow);font-size:10px;font-weight:900;letter-spacing:1px;white-space:nowrap;transition:opacity .2s ease}.shatter-prompt b{color:var(--pink);font-size:16px}.hero-art.is-shattered{cursor:default}.hero-art.is-shattered .hero-logo{clip-path:inset(48% 0 0 0)}.hero-art.is-shattered .cassette-piece{opacity:1;filter:drop-shadow(0 9px 8px rgba(0,0,0,.6))}.hero-art.is-shattered .piece-left{transform:translate(-33%,-22%) rotate(-19deg)}.hero-art.is-shattered .piece-middle{transform:translate(5%,-40%) rotate(9deg)}.hero-art.is-shattered .piece-right{transform:translate(65%,-17%) rotate(28deg)}.hero-art.is-shattered .shatter-prompt{opacity:0}@media(max-width:760px){.shatter-prompt{font-size:8px;padding:6px 8px}.hero-art.is-shattered .piece-left{transform:translate(-21%,-20%) rotate(-19deg)}.hero-art.is-shattered .piece-middle{transform:translate(2%,-34%) rotate(9deg)}.hero-art.is-shattered .piece-right{transform:translate(48%,-16%) rotate(28deg)}}
.hero{background-size:120% 120%;animation:heroGlow 15s ease-in-out infinite alternate}.hero:before{animation:dotsDriftOne 18s ease-in-out infinite alternate}.hero:after{animation:dotsDriftTwo 14s ease-in-out infinite alternate}.equalizer i{transform-origin:bottom;animation:equalizerPulse 1.6s ease-in-out infinite alternate}.equalizer i:nth-child(2n){animation-delay:-.4s}.equalizer i:nth-child(3n){animation-delay:-.9s}@keyframes heroGlow{0%{background-position:0% 30%}100%{background-position:100% 75%}}@keyframes dotsDriftOne{0%{transform:translate(0,0) rotate(0deg)}100%{transform:translate(-38px,50px) rotate(14deg)}}@keyframes dotsDriftTwo{0%{transform:translate(0,0) rotate(25deg)}100%{transform:translate(42px,-34px) rotate(9deg)}}@keyframes equalizerPulse{0%{transform:scaleY(.42);opacity:.45}100%{transform:scaleY(1.12);opacity:1}}@media(prefers-reduced-motion:reduce){.hero,.hero:before,.hero:after,.equalizer i{animation:none}}
.hero-art{cursor:auto;user-select:auto}
.hero{background:#0b0b0d}.hero-video,.hero-photo,.hero-wash{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.hero-video{z-index:-4;object-fit:cover;filter:grayscale(1) contrast(1.12) brightness(.42)}.hero-photo{z-index:-3;background:url('assets/background/halftone-portrait.jpg') center 38%/cover no-repeat;mix-blend-mode:screen;opacity:.22;animation:photoDrift 22s ease-in-out infinite alternate}.hero-wash{z-index:-2;background:radial-gradient(circle at 18% 26%,rgba(203,36,104,.74),transparent 36%),radial-gradient(circle at 84% 72%,rgba(216,187,44,.57),transparent 38%),linear-gradient(120deg,rgba(9,12,18,.68),rgba(203,36,104,.24),rgba(7,7,10,.6));mix-blend-mode:color;animation:colorWash 18s ease-in-out infinite alternate}.hero-copy,.hero-art,.hero-count,.hero-stamp{z-index:1}.cassette-grid{grid-template-columns:repeat(4,1fr)}@keyframes photoDrift{0%{transform:scale(1.08) translate3d(-1.5%,-1%,0)}100%{transform:scale(1.18) translate3d(2.5%,2%,0)}}@keyframes colorWash{0%{filter:hue-rotate(0deg);opacity:.62;transform:scale(1)}100%{filter:hue-rotate(18deg);opacity:.84;transform:scale(1.08)}}@media(max-width:1000px){.cassette-grid{grid-template-columns:repeat(3,1fr)}}@media(max-width:760px){.cassette-grid{grid-template-columns:repeat(2,1fr)}}@media(prefers-reduced-motion:reduce){.hero-video,.hero-photo,.hero-wash{animation:none}}
.demos { position:relative; overflow:hidden; padding:130px 9vw; color:var(--cream); background:var(--pink); }.demos:after { content:""; position:absolute; inset:0; opacity:.17; pointer-events:none; background-image:radial-gradient(circle at 10% 15%, #000 2px, transparent 3px),radial-gradient(circle at 90% 85%, #000 2px, transparent 3px); background-size:16px 16px,21px 21px; }.demos-heading { position:relative; z-index:1; display:grid; grid-template-columns:1.3fr .7fr; gap:8vw; align-items:end; }.demos-heading .section-kicker { color:var(--yellow); grid-column:1/-1; margin-bottom:0; }.demos-heading h2 span { color:var(--yellow); }.demos-heading p:last-child { font-size:16px; line-height:1.5; max-width:360px; }.cassette-grid { position:relative; z-index:1; margin-top:75px; display:grid; grid-template-columns:repeat(5,1fr); gap:16px; align-items:end; }.cassette-card { min-width:0; display:block; position:relative; padding:18px 12px 14px; color:var(--ink); background:#d4c24e; box-shadow:7px 7px 0 rgba(8,8,8,.45); transition:transform .3s ease,box-shadow .3s ease; }.cassette-card:nth-child(even) { transform:translateY(35px); }.cassette-card:hover { z-index:2; transform:translateY(-26px) rotate(-2deg) scale(1.09); box-shadow:15px 20px 0 rgba(8,8,8,.38); }.cassette-card.acrobatik { background:#f1ece1; }.cassette-card.artistik { background:#fe4b45; }.cassette-card.ritmik { background:#ab6ee7; }.cassette-card.trambolin { background:#f4f126; }.card-number { font-size:10px; font-weight:900; letter-spacing:1px; }.cassette { margin:16px 0; aspect-ratio:1.55; padding:9px; display:flex; align-items:center; justify-content:space-between; background:#171619; border:4px solid #050506; color:var(--cream); box-shadow:inset 0 0 0 2px var(--pink); }.cassette i { height:26px; width:26px; border:5px dotted var(--yellow); border-radius:50%; background:var(--ink); }.cassette b,.cassette em { font-style:normal; font-weight:900; letter-spacing:-1px; font-size:14px; }.cassette em { color:var(--pink); }.card-meta { border-top:2px solid var(--ink); padding-top:9px; display:flex; flex-direction:column; gap:5px; font-size:10px; letter-spacing:.5px; }.card-meta strong { font-size:14px; letter-spacing:-.5px; }.card-meta span { font-weight:800; }@media(max-width:1000px){.cassette-grid{grid-template-columns:repeat(3,1fr)}.cassette-card:nth-child(even){transform:none}}@media(max-width:760px){.manifesto,.services,.demos,.season,footer{padding:80px 7vw}.demos-heading{grid-template-columns:1fr;gap:35px}.demos-heading .section-kicker{grid-column:auto}.cassette-grid{grid-template-columns:repeat(2,1fr);margin-top:45px;gap:13px}.cassette-card{padding:13px 10px}.cassette-card:hover{transform:translateY(-13px) rotate(-1deg) scale(1.03)}.cassette b,.cassette em{font-size:11px}.cassette i{width:18px;height:18px;border-width:4px}}