:root { --ink:#12233d; --cream:#f8f1e7; --coral:#ff795f; --yellow:#ffc928; --blue:#82c8ed; --mono:"DM Mono",monospace; --sans:"Manrope",sans-serif; --serif:"Playfair Display",serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--cream); font-family:var(--sans); }
.noise { position:fixed; inset:0; pointer-events:none; z-index:5; opacity:.14; 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='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E"); }
.site-header { height:88px; max-width:1440px; margin:auto; display:flex; align-items:center; justify-content:space-between; padding:0 5.7vw; position:relative; z-index:2; }
.brand { color:var(--ink); text-decoration:none; display:flex; gap:9px; align-items:center; font:800 15px/1 var(--sans); letter-spacing:.04em; }
.brand-mark { width:25px; height:22px; position:relative; display:block; }
.brand-mark i { position:absolute; display:block; background:var(--ink); border-radius:50%; transform:rotate(-25deg); }
.brand-mark i:nth-child(1) { width:8px;height:20px;left:8px;top:1px; }.brand-mark i:nth-child(2) { width:8px;height:13px;left:1px;top:7px; }.brand-mark i:nth-child(3) { width:8px;height:13px;right:1px;top:7px; }
nav { display:flex; gap:34px; margin-left:105px; } nav a, footer a { color:var(--ink); text-decoration:none; font:500 12px var(--mono); text-transform:uppercase; letter-spacing:.04em; }
.header-cta { color:var(--ink); text-decoration:none; font:700 12px var(--sans); }.header-cta span { font-size:18px; margin-left:5px; }
.hero { min-height:650px; max-width:1440px; margin:auto; padding:84px 5.7vw 53px; display:grid; grid-template-columns:1fr 1.05fr; position:relative; overflow:hidden; }
.eyebrow { font:500 10px var(--mono); text-transform:uppercase; letter-spacing:.1em; margin:0 0 24px; }
h1,h2,h3,p { margin-top:0; } h1,h2 { font-weight:800; letter-spacing:-.065em; line-height:.95; }
h1 { font-size:clamp(56px,6.1vw,92px); margin:0 0 28px; } h1 em,h2 em,.statement em { font-family:var(--serif); font-weight:700; letter-spacing:-.05em; }
.lede { max-width:340px; color:#526176; font-size:15px; line-height:1.65; margin-bottom:30px; }
.button { display:inline-flex; align-items:center; gap:28px; color:white; text-decoration:none; padding:15px 17px 15px 20px; font-weight:700; font-size:12px; border-radius:100px; }.button span { font-size:20px; }.button-dark { background:var(--ink); }
.hero-art { height:500px; margin:-52px -45px 0 0; position:relative; background:#8fcbed; overflow:hidden; border-radius:49% 51% 46% 54% / 47% 39% 61% 53%; transform:rotate(-4deg); }
.hero-art:after { content:""; position:absolute; inset:0; background:radial-gradient(circle at 50% 42%,transparent 30%,rgba(18,35,61,.09)); }
.moon { position:absolute; width:172px;height:172px;border-radius:50%; background:#ffe7ad; top:62px;left:47%; box-shadow:inset -20px -10px #f6cf79; }.moon:before { content:""; position:absolute;border-radius:50%; background:#efc56d; width:20px;height:20px;left:42px;top:40px;box-shadow:55px 17px #efc56d,21px 76px #efc56d;opacity:.65; }
.orbit { position:absolute; border:1px solid rgba(18,35,61,.25); border-radius:50%; transform:rotate(-22deg); }.orbit-one { width:410px;height:190px;top:46px;left:60px; }.orbit-two { width:510px;height:240px;top:14px;left:12px; }
.cloud { position:absolute; height:28px;width:110px;background:#f5f1e7;border-radius:30px; }.cloud:before,.cloud:after { content:"";position:absolute;border-radius:50%;background:inherit; }.cloud:before { width:46px;height:46px;bottom:0;left:17px; }.cloud:after {width:35px;height:35px;bottom:0;right:13px;}.cloud-one {top:95px;left:30px;}.cloud-two {top:220px;right:25px;transform:scale(.65);opacity:.8;}
.island { position:absolute; height:160px;width:500px; bottom:-28px;left:36px; background:#344c67; border-radius:52% 48% 5% 5%; transform:rotate(3deg); }.island:after {content:"";position:absolute;bottom:-85px;left:115px;border-top:90px solid #263d59;border-left:90px solid transparent;border-right:75px solid transparent;transform:rotate(7deg);}
.tree {position:absolute;bottom:115px;width:75px;height:135px;z-index:1;}.tree b {position:absolute;bottom:0;left:36px;background:#233852;width:13px;height:87px;transform:rotate(-9deg);border-radius:20px;}.tree i{position:absolute;background:#ff775d;border-radius:50%;}.tree i:nth-child(2){height:75px;width:76px;top:0;left:5px;}.tree i:nth-child(3){height:53px;width:63px;top:38px;left:16px;background:#f1a254;}.tree-left{left:52px;transform:scale(.7)}.tree-right{right:61px;transform:scale(.82)}
.traveler {position:absolute;bottom:108px;left:240px;width:20px;height:60px;background:#172944;border-radius:12px 12px 3px 3px;z-index:2;}.traveler:before{content:"";position:absolute;width:25px;height:25px;background:#ffc928;border-radius:50%;top:-19px;left:-3px;}.traveler i{position:absolute;height:38px;width:4px;background:#172944;right:-9px;top:13px;transform:rotate(9deg);}.traveler.second{left:314px;transform:scale(.75);bottom:111px;background:#f5f1e7;}
.star { position:absolute;color:#fff7cf; font-size:24px; }.star-a{top:57px;left:105px}.star-b{top:142px;right:100px;font-size:15px}.star-c{top:47px;right:50px;font-size:13px}
.art-label {position:absolute;bottom:49px;right:48px;color:#f8f1e7;font:italic 700 17px/1.1 var(--serif);z-index:3;transform:rotate(4deg);}
.scroll-note { position:absolute; bottom:26px; left:5.7vw; display:flex; align-items:center; gap:9px; font:10px var(--mono); text-transform:uppercase; letter-spacing:.07em; }.scroll-note span {width:32px;height:1px;background:var(--ink);}
.intro { padding:132px 12vw 128px; background:var(--yellow); display:grid; grid-template-columns:1fr 1.35fr; }.intro h2,.games h2,.contact h2 { font-size:clamp(42px,4.5vw,66px); margin:0 0 27px; }.intro > div p { max-width:405px;color:#534528;line-height:1.7;font-size:15px; }
.games { padding:125px 7vw 135px; background:var(--cream); display:grid; grid-template-columns:.85fr 1fr 1fr; gap:20px; }.section-heading {padding:4px 32px 0 10px; display:flex; flex-direction:column;align-items:flex-start;}.section-heading .text-link {margin-top:auto;}.text-link,.email {color:var(--ink);font-weight:700;font-size:13px;text-decoration:none;border-bottom:1px solid var(--ink);padding-bottom:5px;}.text-link span,.email span{font-size:18px;margin-left:12px;}
.game-card { min-height:420px; padding:17px; border-radius:5px; position:relative; display:flex; flex-direction:column; overflow:hidden; }.peach {background:#fa9a78;}.blue{background:#94cbe9;}.card-top{display:flex;justify-content:space-between;font:10px var(--mono);letter-spacing:.05em;z-index:1;}.card-illustration {flex:1;position:relative;overflow:hidden;}.sun{width:110px;height:110px;border-radius:50%;background:#ffc928;position:absolute;top:58px;left:calc(50% - 55px)}.hill{position:absolute;border-radius:50% 50% 0 0;bottom:0}.h1{width:310px;height:130px;background:#4d9559;left:-22px}.h2{width:300px;height:95px;background:#256a50;right:-50px}.house{position:absolute;bottom:72px;left:42%;width:72px;height:64px;background:#ffe9c2;border-radius:4px}.house:before{content:"";position:absolute;border-left:50px solid transparent;border-right:50px solid transparent;border-bottom:45px solid #d74f43;top:-35px;left:-14px}.house i{position:absolute;width:16px;height:29px;background:#263d59;bottom:0;left:28px}.flower{position:absolute;color:#f8e0a1;font-size:33px;bottom:37px;z-index:2}.f1{left:28px}.f2{right:58px}.sea-moon{position:absolute;width:105px;height:105px;background:#ffdb85;border-radius:50%;top:57px;left:36%;}.wave{position:absolute;width:150%;height:100px;left:-20%;border-radius:50% 50% 0 0;background:#4387b9;bottom:-19px}.w2{background:#1c6296;bottom:-42px;transform:rotate(4deg)}.boat{position:absolute;width:85px;height:34px;background:#b8444a;bottom:72px;left:43%;clip-path:polygon(0 0,100% 0,75% 100%,20% 100%);z-index:2}.boat i{position:absolute;height:110px;width:3px;background:#263d59;bottom:23px;left:39px}.boat b{position:absolute;border-bottom:56px solid #fff2ce;border-right:42px solid transparent;bottom:29px;left:42px}.fish{position:absolute;right:37px;bottom:85px;color:#e9f5ed;font-size:35px;z-index:1}
.card-info{display:flex;justify-content:space-between;align-items:flex-end;z-index:2}.card-info h3{font-size:21px;letter-spacing:-.05em;margin:0 0 3px}.card-info p{font-size:12px;margin:0}.card-info>a{background:var(--ink);color:white;border-radius:50%;width:35px;height:35px;text-decoration:none;display:grid;place-items:center;font-size:19px;}
.statement {background:var(--coral);min-height:440px;padding:92px 12vw;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--ink);text-align:center}.sparkles{font-size:23px;margin-bottom:28px}.statement p{font-size:clamp(39px,4.5vw,65px);line-height:1.02;font-weight:800;letter-spacing:-.07em;margin:0;}
.contact {padding:128px 12vw 110px;background:#284563;color:var(--cream)}.contact h2{margin-bottom:38px}.contact .eyebrow{color:#bcd7e9}.email{color:var(--cream);border-color:var(--cream);font-size:clamp(16px,1.8vw,25px);}.contact-note{margin:90px 0 0;color:#bcd7e9;font:11px var(--mono);text-transform:uppercase;letter-spacing:.04em}.contact-note strong{color:var(--cream);font-weight:500}
footer{min-height:92px;display:flex;align-items:center;justify-content:space-between;padding:0 5.7vw;background:var(--cream)}footer p{margin:0;font:10px var(--mono);color:#687284}
@media (max-width:800px){.site-header{height:72px;padding:0 6vw}nav{display:none}.header-cta{font-size:11px}.hero{padding:64px 6vw 65px;display:block;min-height:750px}.hero-art{height:390px;margin:42px -12vw 0 5vw}.scroll-note{left:6vw}.intro{padding:90px 8vw;display:block}.intro .eyebrow{margin-bottom:58px}.games{padding:85px 6vw;display:block}.section-heading{padding:0 0 45px}.section-heading .text-link{margin-top:10px}.game-card{margin-bottom:18px;min-height:390px}.statement{min-height:360px;padding:70px 7vw}.contact{padding:85px 8vw}.contact-note{margin-top:65px}footer{padding:25px 6vw;flex-wrap:wrap;gap:19px}footer p{order:3;width:100%}.hero-copy{position:relative;z-index:1}}