@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root{--ink:#20231a;--lime:#e0f529;--paper:#f7f6ef;--blue:#254ee9}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:30px}body{margin:0;background:var(--paper);color:var(--ink);font-family:'DM Sans',Arial,sans-serif}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}button,a{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible{outline:3px solid var(--blue);outline-offset:6px}header{height:104px;display:flex;align-items:center;justify-content:space-between;padding:0 5%;background:var(--lime)}.wordmark{font-family:'Space Grotesk',Arial,sans-serif;font-size:33px;letter-spacing:-2px;font-weight:700;white-space:nowrap}.brand-dot{font-size:11px;vertical-align:top;letter-spacing:0;margin-left:4px;position:relative;top:6px}nav{display:flex;align-items:center;gap:38px;font-size:14px;font-weight:600}.nav-button{border:1.5px solid var(--ink);padding:13px 22px;border-radius:30px}.nav-button span{margin-left:20px}.hero{position:relative;min-height:620px;background:var(--lime);overflow:hidden}.hero-art{position:absolute;right:-4%;top:-65px;width:79%;height:700px;object-fit:cover;mix-blend-mode:multiply}.hero-copy{position:relative;z-index:1;padding:75px 5% 110px}.eyebrow{font-size:11px;font-weight:700;letter-spacing:1.6px;margin:0 0 27px}.dot{display:inline-block;width:7px;height:7px;background:currentColor;border-radius:50%;margin-right:7px}h1,h2,h3,p{margin-top:0}h1,h2,h3{font-family:'Space Grotesk',Arial,sans-serif;font-weight:600}h1{font-size:clamp(56px,6.6vw,100px);line-height:1.02;letter-spacing:-6px;margin-bottom:25px}em{font-style:normal}h1 em{color:var(--blue)}.intro{font-size:18px;line-height:1.5;margin-bottom:30px}.button{display:inline-flex;align-items:center;gap:42px;border:0;border-radius:30px;padding:18px 25px;font-size:14px;font-weight:600;transition:transform .2s}.button:hover{transform:translateY(-3px)}.dark{background:var(--ink);color:white}.hero-foot{position:absolute;bottom:0;left:5%;right:5%;display:flex;justify-content:space-between;padding:24px 0;border-top:1px solid #20231a30;font-size:10px;font-weight:700;letter-spacing:1.4px}.section{padding:95px 5%}.section-heading{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:42px}.section-heading h2{margin:0}.section-heading>p{font-size:15px;line-height:1.6;margin:0 0 3px}h2{font-size:clamp(38px,4.4vw,64px);line-height:1.06;letter-spacing:-3px}.game-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px}.game-art{position:relative;width:100%;height:440px;border:0;border-radius:14px;overflow:hidden;padding:0;display:block;text-align:left}.herd .game-art img{width:100%;height:100%;object-fit:cover;object-position:center 43%;transition:transform .6s}.game-art:hover img{transform:scale(1.04)}.tag{position:absolute;top:20px;left:20px;border-radius:20px;padding:9px 13px;background:var(--paper);font-size:9px;font-weight:700;letter-spacing:1px}.art-arrow{position:absolute;right:20px;bottom:20px;width:45px;height:45px;border-radius:50%;display:grid;place-items:center;background:var(--paper);font-size:25px}.rico .game-art{background:#edb6de}.rico .game-art img{position:absolute;height:410px;width:280px;object-fit:cover;right:-4%;bottom:-20px;border:7px solid #f8dfaf;border-radius:25px;transform:rotate(12deg);box-shadow:0 10px 30px #662b4b30;transition:transform .6s}.rico .game-art:hover img{transform:rotate(8deg) translateY(-8px)}.ricochet-title{position:absolute;top:110px;left:32px;font-family:'Space Grotesk',Arial,sans-serif;font-size:clamp(40px,5vw,70px);font-weight:700;line-height:.95;letter-spacing:-4px;color:#74305c;z-index:1}.ricochet-title em{color:#fdf2db}.game-info{display:flex;justify-content:space-between;gap:12px;padding:26px 0}.game-info .eyebrow{font-size:9px;margin-bottom:10px}.game-info h3{font-size:32px;letter-spacing:-1px;margin-bottom:8px}.game-info p:last-child{font-size:14px;margin:0}.text-link{align-self:center;border:0;background:none;white-space:nowrap;font-size:12px;font-weight:700;padding:10px 0;border-bottom:1px solid #20231a60}.text-link span{margin-left:15px}.studio{background:var(--blue);color:var(--paper);padding-top:75px;padding-bottom:80px}.studio-content{display:grid;grid-template-columns:1.2fr 1fr;gap:10%;align-items:start}.studio h2{margin:0}.studio h2 em{color:var(--lime)}.studio-content p{font-size:18px;line-height:1.6;max-width:460px}.studio-signature{display:block;font-size:12px;margin-top:30px;color:var(--lime)}.play{display:grid;grid-template-columns:1.4fr 1fr;align-items:center;gap:12%;padding-top:100px;padding-bottom:100px}.play h2{margin-bottom:24px}.play p{font-size:16px;line-height:1.6}.beta-note{border:1px solid #20231a30;border-radius:12px;padding:32px;transform:rotate(2deg);background:#eeeee4}.status{font-size:10px;font-weight:700;letter-spacing:1px}.beta-note h3{font-size:40px;line-height:1.1;letter-spacing:-1.5px;margin:25px 0 18px}.beta-note p{font-size:14px;max-width:260px}.beta-note a{display:flex;justify-content:space-between;font-size:12px;font-weight:700;border-top:1px solid #20231a30;padding-top:20px;margin-top:28px}footer{margin:0 5%;padding:30px 0;display:flex;align-items:center;justify-content:space-between;border-top:1px solid #20231a30}footer>span,footer>a:last-child{font-size:11px}dialog{border:0;border-radius:18px;padding:0;max-width:850px;width:90%;color:var(--ink);background:var(--paper)}dialog[open]{display:grid;grid-template-columns:1fr 1fr}dialog::backdrop{background:#111b24b3;backdrop-filter:blur(6px)}.dialog-image{min-height:460px;overflow:hidden}.dialog-image img{width:100%;height:100%;object-fit:cover}.dialog-copy{padding:50px 35px 35px}.dialog-copy h2{font-size:43px;letter-spacing:-2px}.dialog-copy>p{line-height:1.6}.dialog-status{padding:20px 0;font-size:13px;line-height:1.5}.dialog-status p{margin-top:8px}.close{position:absolute;right:12px;top:12px;border:0;background:var(--paper);border-radius:50%;height:32px;width:32px;font-size:24px;z-index:2}.close-secondary{font-size:12px;padding:15px 20px}
@media(min-width:1600px){body{max-width:1800px;margin:auto}.hero-art{width:75%}}
@media(max-width:900px){header{height:85px}.hero{min-height:600px}.hero-art{right:-20%;width:100%;top:10px}.hero-copy{padding-top:60px}h1{letter-spacing:-4px}.game-art{height:350px}.rico .game-art img{right:-28%;height:330px;width:235px}.ricochet-title{font-size:52px;left:22px}.game-info{display:block}.text-link{margin-top:16px}.studio-content{gap:6%}.studio-content p{font-size:16px}}
@media(max-width:600px){header{padding:0 6%;height:80px}.wordmark{font-size:28px}nav{gap:18px}nav>a{font-size:12px}nav>a:nth-child(2){display:none}.nav-button{padding:10px 14px}.nav-button span{margin-left:6px}.hero{min-height:730px}.hero-copy{padding:35px 6% 0}.hero .eyebrow{font-size:9px;margin-bottom:22px}h1{font-size:60px;letter-spacing:-4px}.intro{font-size:16px}.hero-art{width:116%;height:400px;top:auto;bottom:40px;right:-4%;object-fit:cover;object-position:65% 55%}.hero-foot{left:6%;right:6%;font-size:8px;padding:20px 0}.hero-foot span:first-child{display:none}.hero-foot span:last-child{margin-left:auto}.section{padding:62px 6%}.section-heading{display:block}.section-heading>p{margin-top:22px}h2{font-size:42px;letter-spacing:-2px}.eyebrow{font-size:9px;margin-bottom:20px}.game-grid{grid-template-columns:1fr;gap:26px}.game-art{height:370px}.rico .game-art img{right:-8%;height:355px;width:245px}.ricochet-title{font-size:60px}.game-info{display:flex;padding:22px 0}.game-info h3{font-size:29px}.game-info p:last-child{font-size:12px}.text-link{margin:0;font-size:11px}.studio-content,.play{grid-template-columns:1fr;gap:30px}.studio-content p{font-size:17px}.studio-content h2{margin-bottom:4px}.beta-note{transform:rotate(1deg);margin:10px 4px 0}.play>div>p br{display:none}footer{flex-wrap:wrap;gap:25px;margin:0 6%;padding:30px 0}footer .wordmark{width:100%}dialog[open]{display:block;max-height:90vh}.dialog-image{height:190px;min-height:0}.dialog-copy{padding:28px}.dialog-copy h2{font-size:36px;margin-bottom:15px}.dialog-copy .eyebrow{margin-bottom:15px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important}}