:root{--paper:#f6f2ea;--ink:#272727;--muted:#6b665e;--accent:#a54132;--line:#dcd6cc;--curve:cubic-bezier(.22,1,.36,1)}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:96px}body{margin:0;background:var(--paper);color:var(--ink);font-family:Manrope,sans-serif;font-size:16px;line-height:24px}body.menu-open{overflow:hidden}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}img{max-width:100%;display:block}h1,h2,h3,p,figure{margin:0}h1,h2,h3{text-wrap:balance}p{text-wrap:pretty}a,button{touch-action:manipulation}a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--accent);outline-offset:4px}[hidden]{display:none!important}.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}.wrap{width:min(1320px,calc(100% - 96px));margin-inline:auto}.section-space{padding-block:96px}.eyebrow{font-size:12px;line-height:16px;letter-spacing:.12em;text-transform:uppercase;font-weight:600}.skip-link{position:fixed;top:8px;left:16px;z-index:100;padding:12px 16px;background:var(--ink);color:#fff;transform:translateY(-160%)}.skip-link:focus{transform:translateY(0)}.site-header{position:sticky;top:16px;z-index:30;display:flex;align-items:center;gap:24px;width:fit-content;max-width:calc(100% - 32px);margin:16px auto 0;padding:8px;background:#ffffffa6;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border:1px solid #ffffffc2;border-radius:9999px;box-shadow:0 4px 24px #27272706}.brand{display:flex;align-items:center;flex:0 0 auto;padding:0 8px;border-radius:9999px;transition:opacity 300ms var(--curve),transform 500ms var(--curve)}.brand img{height:36px;width:auto}.brand:hover{opacity:.75}.brand:active{transform:scale(.98)}.desktop-nav{display:flex;gap:4px}.desktop-nav a{padding:8px 12px;border-radius:9999px;font-size:14px;line-height:20px;font-weight:600;transition:background-color 300ms var(--curve),color 300ms var(--curve),transform 500ms var(--curve)}.desktop-nav a:hover{background:#e9e3d9}.desktop-nav a:active{transform:scale(.98)}.desktop-nav a[aria-current]{background:var(--ink);color:var(--paper)}.site-header .button{min-height:0;padding:8px 12px;gap:8px;font-size:14px;line-height:20px;border-radius:9999px}.menu-toggle{display:none}.button{display:inline-flex;align-items:center;gap:32px;padding:8px 12px;min-height:48px;font-weight:600;border-radius:8px;transition:transform 500ms var(--curve),background-color 300ms var(--curve);font-size:16px;line-height:24px}.primary{background:var(--accent);color:#fff}.button:hover{background:#873426;transform:translateY(-2px)}.button:active{transform:scale(.98)}.button span{font-size:24px;line-height:32px}.section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;margin-bottom:40px}h2{font-size:48px;line-height:1;font-weight:500;letter-spacing:-.045em}.section-heading .eyebrow,.faq-intro .eyebrow{margin-bottom:16px;color:var(--muted)}.reveal{opacity:1;transform:none}.js-reveal .reveal{opacity:0;transform:translateY(32px);transition:opacity 700ms var(--curve),transform 700ms var(--curve)}.js-reveal .reveal.is-visible{opacity:1;transform:translateY(0)}
@media(max-width:1180px){.wrap{width:calc(100% - 64px)}.section-heading h2{font-size:36px;line-height:40px}}
@media(max-width:800px){html{scroll-padding-top:96px}.wrap{width:calc(100% - 40px)}.site-header{width:auto;max-width:none;margin-inline:16px;justify-content:space-between;gap:16px}.desktop-nav,.site-header .button{display:none}.menu-toggle{display:flex;flex-direction:column;justify-content:center;gap:8px;width:40px;height:40px;padding:8px;border:0;border-radius:50%;background:transparent;transition:background-color 300ms var(--curve),transform 500ms var(--curve)}.menu-toggle:hover{background:#e9e3d9}.menu-toggle:active{transform:scale(.98)}.menu-toggle span{width:100%;height:2px;background:var(--ink);transition:transform 500ms var(--curve)}.menu-toggle[aria-expanded=true] span:first-child{transform:translateY(5px) rotate(45deg)}.menu-toggle[aria-expanded=true] span:last-child{transform:translateY(-5px) rotate(-45deg)}.mobile-menu{position:fixed;inset:0;background:#f6f2eaf5;-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);z-index:20;padding:96px 32px 40px;display:flex;flex-direction:column;justify-content:center;gap:24px}.mobile-menu>a,.mobile-cta{opacity:0;transform:translateY(24px);transition:transform 500ms var(--curve),opacity 500ms var(--curve)}.mobile-menu>a{font-size:36px;line-height:40px;letter-spacing:-.04em;font-weight:500}.mobile-menu.is-open>a,.mobile-menu.is-open .mobile-cta{opacity:1;transform:translateY(0)}.mobile-menu>:nth-child(2){transition-delay:60ms}.mobile-menu>:nth-child(3){transition-delay:120ms}.mobile-menu>:nth-child(4){transition-delay:180ms}.mobile-cta{margin-top:16px}.mobile-menu>span{font-size:12px;line-height:16px;color:var(--muted);margin-top:40px}.section-space{padding-block:64px}.section-heading{display:block;margin-bottom:32px}.section-heading h2{font-size:36px;line-height:40px}}
@media(max-width:480px){.section-heading h2{font-size:30px;line-height:36px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition-duration:200ms!important}.js-reveal .reveal{transform:none}.tagline .word{opacity:1}.mobile-menu>a,.mobile-cta{transform:none}.button:hover,.button:active,.round-arrow,.game-visual:active,.store-link:active,.text-link:active{transform:none!important}}
/* Products: one screenshot per card peeks from the top of the tile and settles on hover. */
.game-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px}.game-card{min-width:0}.game-visual{display:block;position:relative;height:440px;padding:32px;border-radius:16px;overflow:hidden;isolation:isolate;transition:transform 500ms var(--curve)}.game-visual:active{transform:scale(.98)}.trio{background:#dbe8e9}.xox{background:#dfded9}.game-meta{position:relative;z-index:2;font-size:12px;line-height:16px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}.screenshots{position:absolute;top:80px;left:0;width:100%;display:flex;justify-content:center}.shot{width:50%;max-width:260px;height:auto;border-radius:16px;box-shadow:0 24px 48px #27272720;transform:rotate(-8deg);transition:transform 500ms var(--curve)}.xox .shot{transform:rotate(8deg)}.game-visual:hover .shot{transform:rotate(-4deg) translateY(-8px)}.xox:hover .shot{transform:rotate(4deg) translateY(-8px)}.round-arrow{position:absolute;right:24px;bottom:24px;z-index:3;display:grid;place-items:center;width:48px;height:48px;background:var(--paper);border-radius:50%;transition:transform 500ms var(--curve)}.round-arrow svg{width:20px;height:20px}.game-visual:hover .round-arrow{transform:translate(2px,-2px)}.game-detail{padding:24px 8px 0}.game-title{display:flex;align-items:center;gap:16px}.game-title img{width:56px;height:56px;border-radius:12px;object-fit:cover}.game-title .eyebrow{color:var(--muted);letter-spacing:.08em;margin-bottom:4px}.game-title h3{font-size:24px;line-height:32px;font-weight:600;letter-spacing:-.035em}.game-hook{font-size:24px;line-height:32px;margin-top:24px;letter-spacing:-.025em}.game-description{max-width:430px;min-height:40px;margin-top:12px;font-size:14px;line-height:20px;color:var(--muted)}.store-link,.text-link{display:inline-flex;align-items:center;gap:8px;min-height:24px;margin-top:24px;font-size:14px;line-height:20px;font-weight:600;color:var(--accent);transition:transform 500ms var(--curve)}.store-link svg,.text-link svg{flex:none;width:16px;height:16px}.store-link:hover,.text-link:hover{text-decoration:underline;text-underline-offset:4px}.store-link:active,.text-link:active{transform:translateY(1px)}
@media(max-width:1180px){.game-visual{height:380px}}
@media(max-width:800px){.game-grid{grid-template-columns:1fr;gap:40px}.game-visual{height:440px}.shot{max-width:250px}.game-detail{padding:24px 0 0}.game-description{min-height:0}}
@media(max-width:480px){.game-visual{height:360px;padding:24px}.shot{width:54%;max-width:220px}.round-arrow{right:16px;bottom:16px}}
@media(prefers-reduced-motion:reduce){.game-visual:hover .shot{transform:rotate(-8deg)}.xox:hover .shot{transform:rotate(8deg)}}

/* Hero: the copy sits in the negative space on the left and the scene fills the card. The still stays underneath the loop as its poster, paused and error fallback. The headline keeps a little bottom padding so descenders stay inside the gradient's painted area. */
.hero{position:relative;margin-top:24px}.hero-copy{position:relative;z-index:2;width:51%;min-height:680px;padding:80px 40px 96px}.hero .eyebrow{display:flex;align-items:center;gap:8px;color:var(--accent);margin-bottom:32px}.status-dot{flex:none;width:6px;height:6px;background:var(--accent);border-radius:50%}h1{font-size:60px;line-height:1;letter-spacing:-.055em;font-weight:500;max-width:680px;padding-bottom:.16em;background:linear-gradient(90deg,#000,#666);background-clip:text;-webkit-background-clip:text;color:transparent}h1>span{display:inline-block;margin-top:16px}.hero-description{font-size:18px;line-height:28px;max-width:360px;margin-top:32px;color:#5a554e}.hero .button{margin-top:32px}.proof{display:flex;align-items:center;gap:8px;max-width:360px;margin-top:24px;font-size:12px;line-height:16px;color:#5a554e}.button svg{flex:none;width:20px;height:20px}.hero-art{position:absolute;inset:0;z-index:0;background:#e8e1d6;border-radius:24px;overflow:hidden}.hero-art picture{display:block;width:100%;height:100%}.hero-art picture img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--hero-video-position,center);pointer-events:none}.hero-art figcaption{position:absolute;right:32px;bottom:24px;font-size:12px;line-height:16px;color:#35332b}
@media(max-width:1180px){.hero-copy{width:55%;min-height:620px;padding:64px 32px 80px}h1{font-size:48px;line-height:1}.hero-description{max-width:320px}}
@media(max-width:1000px){.hero-art picture img{object-position:25% center}.hero-video{object-position:var(--hero-video-position,25% center)}}
@media(max-width:800px){.hero-copy{width:100%;min-height:0;padding:0}.hero .eyebrow{margin-bottom:24px}h1{max-width:600px}h1>span{margin-top:12px}.hero-description{max-width:440px;margin-top:24px}.hero .button{margin-top:24px}.proof{margin-top:16px}.hero-art{position:relative;inset:auto;aspect-ratio:1.2;margin-top:32px;border-radius:16px}.hero-art picture img{object-position:right center}.hero-video{object-position:var(--hero-video-mobile-position,right center)}.hero-art figcaption{right:auto;left:16px;bottom:16px}}
@media(max-width:480px){h1{font-size:36px;line-height:40px;letter-spacing:-.045em}.hero-description{font-size:16px;line-height:24px}.hero-art{aspect-ratio:1.15}}

/* Studio: the tagline reveals one word at a time, the brand story sits beside it, and the logo emblem rests in the aside. A .keep group inside the tagline never breaks across lines. */
.studio{background:#eae4da}.studio-grid{display:grid;grid-template-columns:1fr 2fr;grid-template-rows:auto 1fr;gap:32px 48px}.studio-grid>.eyebrow{grid-column:1;grid-row:1;padding-top:8px;color:var(--muted)}.studio-copy{grid-column:2;grid-row:1/3}.studio-emblem{grid-column:1;grid-row:2;align-self:end;width:200px}.studio-emblem img{width:100%;height:auto}.tagline{max-width:680px;font-size:48px;line-height:1;letter-spacing:-.04em}.tagline .keep{white-space:nowrap}.tagline .word{display:inline-block;opacity:.3;transition:opacity 600ms var(--curve)}.tagline .word.is-visible{opacity:1}.studio-narrative{max-width:510px;margin-top:32px}.studio-narrative p{font-size:18px;line-height:28px;color:#5a554e}.studio-narrative h3{margin-top:32px;font-size:24px;line-height:32px;font-weight:500;letter-spacing:-.03em}.studio-narrative h3+p{margin-top:12px;font-size:16px;line-height:24px}
@media(max-width:1180px){.studio-grid{gap:32px}.tagline{font-size:36px;line-height:40px}}
@media(max-width:800px){.studio-grid{grid-template-columns:1fr;grid-template-rows:none}.studio-grid>.eyebrow,.studio-copy,.studio-emblem{grid-column:auto;grid-row:auto}.studio-emblem{align-self:auto;width:160px}.studio-narrative p{font-size:16px;line-height:24px}}

/* How it works: three numbered steps that each end in a link, entering one after another. On phones the number sits in a narrow left column. */
.steps{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:48px;margin:0;padding:0}.steps li>span{display:block;margin-bottom:24px;font-size:14px;line-height:20px;color:var(--accent)}.steps h3{margin-bottom:12px;font-size:24px;line-height:32px;font-weight:500;letter-spacing:-.03em}.steps li{display:flex;flex-direction:column}.steps p{max-width:320px;font-size:14px;line-height:20px;color:var(--muted)}.step-links{display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:auto;padding-top:16px}.steps .text-link{margin-top:0}.js-reveal .steps li:nth-child(2){transition-delay:60ms}.js-reveal .steps li:nth-child(3){transition-delay:120ms}
@media(max-width:800px){.steps{grid-template-columns:1fr;gap:32px}.steps li{display:grid;grid-template-columns:32px 1fr;column-gap:24px}.steps li>span{grid-row:1/4;margin:4px 0 0}.steps li>:not(span){grid-column:2}.steps h3{margin-bottom:8px}.steps p{max-width:100%}}

/* Support: one card per game with its help and privacy documents, then the FAQ grid with a contact box in the intro column. */
.support-games{display:grid;grid-template-columns:1fr 1fr;gap:32px}.support-card{display:flex;flex-direction:column;min-width:0;padding:32px;border:1px solid var(--line);border-radius:16px;background:#fcfaf6}.support-card>p:not(.step-links){max-width:440px;margin-top:24px;font-size:16px;line-height:24px;color:var(--muted)}.support-card .step-links{margin-top:auto;padding-top:24px}.support-contact{max-width:320px;margin-top:40px}.support-contact h4{margin:0 0 12px;font-size:18px;line-height:28px;font-weight:600}.support-contact p{font-size:14px;line-height:20px;color:var(--muted)}.support-contact .button{margin-top:24px}.button.secondary{background:#eae4da;color:var(--accent);border:1px solid var(--line)}.button.secondary:hover{background:#e0d7c9}.faq-title{font-size:30px;line-height:36px;font-weight:500;letter-spacing:-.035em}
@media(max-width:800px){.support-games{grid-template-columns:1fr;gap:24px}.support-card{padding:24px}.support-contact{max-width:440px;margin-top:24px}.faq-title{font-size:24px;line-height:32px}}

/* FAQ: native details rows with a plus that turns into a cross. Answers are plain text, readable without JS and by crawlers; the JSON-LD block in the head mirrors them. */
.faq{display:grid;grid-template-columns:1fr 1.4fr;gap:64px;margin-top:64px}.faq details{border-bottom:1px solid var(--line)}.faq details:first-child{border-top:1px solid var(--line)}.faq summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:24px 0;font-size:16px;line-height:24px;cursor:pointer;transition:color 300ms var(--curve)}.faq summary::-webkit-details-marker{display:none}.faq summary:hover{color:var(--accent)}.faq summary svg{flex:none;width:20px;height:20px;transition:transform 500ms var(--curve)}.faq details[open] summary svg{transform:rotate(45deg)}.faq details p{padding:0 32px 24px 0;font-size:14px;line-height:20px;color:var(--muted)}.faq details p a{text-decoration:underline;text-underline-offset:4px}
@media(max-width:800px){.faq{grid-template-columns:1fr;gap:32px;margin-top:48px}.faq summary{padding-block:16px}}

/* Contact: the section the nav's "Contact" lands on, with the email as the single action and a pointer to support. */
.contact-grid{display:grid;grid-template-columns:1fr 1.4fr;gap:64px;align-items:start}.contact-section .eyebrow{margin-bottom:16px;color:var(--muted)}.contact-description{max-width:480px;font-size:18px;line-height:28px;color:#5a554e}.contact-section .contact-email{margin-top:24px;font-size:20px;line-height:28px}.contact-help{margin-top:24px;font-size:14px;line-height:20px;color:var(--muted)}.contact-help a{color:var(--accent);font-weight:600}.contact-help a:hover{text-decoration:underline;text-underline-offset:4px}
@media(max-width:1180px){.contact-section h2{font-size:36px;line-height:40px}}
@media(max-width:800px){.contact-grid{grid-template-columns:1fr;gap:32px}.contact-section .contact-email{font-size:18px;line-height:28px}}

/* Closing: the final call to action repeats the hero's button and proof line on a dark card; the focus ring switches to paper so it stays visible there. */
.closing{padding:64px;background:#272727;color:var(--paper);text-align:center;border-radius:24px}.closing .eyebrow{margin-bottom:24px;color:#bdb7ad}.closing h2{font-size:60px;line-height:1}.closing .button{margin-top:32px}.closing .proof{justify-content:center;max-width:none;margin-top:24px;color:#bdb7ad}.closing :focus-visible{outline-color:var(--paper)}
@media(max-width:1180px){.closing h2{font-size:48px;line-height:1}}
@media(max-width:800px){.closing{padding:48px 24px;border-radius:16px}.closing h2{font-size:36px;line-height:40px}}

/* Footer: the scene (the still always, the loop only on desktop once the footer scrolls near) fills the whole footer; the brand, three link groups and the meta row sit on a translucent panel at the left, sized so the ship in the right half of the scene stays clear of it. The panel widths follow the free space left of the ship (about 56% of the width). */
.site-footer{position:relative;isolation:isolate;display:flex;align-items:center;min-height:600px;padding-block:96px;overflow:hidden;background:#d3c7b6}.footer-scene{position:absolute;inset:0;z-index:-1}.footer-scene img,.footer-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 55%;pointer-events:none}.footer-video{opacity:0;transition:opacity 500ms var(--curve)}.footer-video.is-playing{opacity:1}.footer-content{position:relative}.footer-panel{max-width:720px;padding:32px;background:#ffffffc7;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border:1px solid #ffffffc2;border-radius:24px;box-shadow:0 24px 48px -24px #1312094d}.footer-main{display:grid;grid-template-columns:1fr 1.6fr;gap:32px;padding-bottom:24px}.wordmark{font-size:24px;line-height:32px;font-weight:700;letter-spacing:-.06em;transition:opacity 300ms var(--curve)}.wordmark:hover{opacity:.75}.footer-brand p{max-width:240px;margin-top:16px;font-size:14px;line-height:20px;color:var(--muted)}.footer-links{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.footer-group{display:flex;flex-direction:column;align-items:flex-start;min-width:0}.footer-group h3{margin:0 0 8px;font-size:14px;line-height:20px;font-weight:600}.footer-group a{display:inline-flex;align-items:center;min-height:32px;max-width:100%;font-size:14px;line-height:20px;color:var(--muted);transition:color 300ms var(--curve)}.footer-group a:hover{color:var(--accent);text-decoration:underline;text-underline-offset:4px}.footer-meta{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;padding-top:24px;border-top:1px solid var(--line);font-size:12px;line-height:16px;color:var(--muted)}.footer-meta .text-link{margin-top:0}
@media(prefers-reduced-motion:reduce){.footer-video{transition:none}}
@media(max-width:1400px){.site-footer{min-height:560px}.footer-panel{max-width:600px}.footer-main{grid-template-columns:1fr;gap:24px}}
@media(max-width:1180px){.site-footer{min-height:520px}.footer-panel{max-width:520px}}
@media(max-width:1000px){.site-footer{padding-block:64px}.footer-panel{max-width:400px;padding:24px;border-radius:16px}.footer-links{gap:16px}}
/* Phones: no loop. The still is anchored to the bottom at a fixed 900px width so the ship shows under the panel, and the flat colour above it matches the sky of the frame. */
@media(max-width:800px){.site-footer{display:block;min-height:0;padding:64px 0 320px}.footer-scene{inset:auto 0 0 0;height:auto}.footer-scene img{position:static;display:block;width:900px;max-width:none;height:auto;margin-left:calc(62% - 590px)}.footer-video{display:none}.footer-panel{max-width:none}.footer-main{gap:32px}.wordmark{font-size:20px;line-height:28px}.footer-meta{padding-top:16px}}
@media(max-width:480px){.footer-links{grid-template-columns:1fr 1fr;gap:24px 16px}.footer-group:first-child{grid-column:1/-1}}

/* Subpages (404 and the product stubs): the same header and footer as the home page around one short block of copy with a primary and a secondary action. */
.page{padding-block:64px 96px}.page .eyebrow{display:flex;align-items:center;gap:8px;margin-bottom:32px;color:var(--accent)}.page-description{max-width:480px;margin-top:32px;font-size:18px;line-height:28px;color:#5a554e}.page-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 32px;margin-top:32px}.page-actions .text-link{margin-top:0}
@media(max-width:800px){.page{padding-block:32px 96px}.page .eyebrow{margin-bottom:24px}.page-description{font-size:16px;line-height:24px}}