*{box-sizing:border-box}html,body{margin:0;padding:0}body{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale;color:#023e4d;font-family:DM Sans,sans-serif;font-size:clamp(18px,1.8vw,28px);line-height:1.2;font-optical-sizing:auto}body.home{background-color:#000;height:100vh;height:100dvh;overflow:hidden;overscroll-behavior:none}header{position:fixed;top:0;left:0;width:100%;display:flex;justify-content:space-between;padding:10px 20px;z-index:20;transition:color .3s}header h1{font-weight:700;text-align:center;font-family:Playfair Display,serif;text-transform:uppercase;font-size:15px;line-height:1;transform-origin:left top}header h1 em{font-size:32px;font-weight:400;font-style:normal;display:block}header ul{list-style:none;display:flex;font-family:DM Sans,sans-serif}header li{margin:0 20px}header a{color:inherit;text-decoration:none;font-size:15px;font-weight:600;line-height:18px;text-transform:uppercase}header.dark{color:#fff}@media (max-width: 679px){header{padding:0 10px}header h1{transform:scale(.6)}nav{display:none}}main{display:block;position:relative;width:100vw;height:100vh;height:100dvh;overflow-x:hidden;overflow-y:scroll;scroll-snap-type:mandatory;scroll-snap-points-y:repeat(100vh);scroll-snap-type:y mandatory;z-index:1}section{display:block;scroll-snap-align:start;position:relative;height:100vh;height:100dvh;overflow:hidden}.card{width:100%;height:100%;overflow:hidden;padding:clamp(20px,10vw,100vw);display:flex;justify-content:center;align-items:center;flex-direction:column;text-align:center;position:relative;z-index:5}@media (max-width: 679px){.card{padding:25px}}h2{display:block;position:relative;font-family:Playfair Display,serif;font-weight:400;font-size:clamp(40px,4vw,72px);line-height:1;margin:0;padding:0;max-width:100%}h2+h2{transform:translateY(-10px)}.liquid{opacity:0;transition:opacity .5s}h3{font-family:Playfair Display,serif;font-weight:500;font-size:clamp(32px,3vw,60px);line-height:1.2;margin:0}p{font-weight:500;margin:0 0 20px;width:800px;max-width:100%}h2+p{margin-top:30px}@media (max-width: 679px){h2+p{margin-top:10px}}.aquarium{padding-bottom:10vh}.aquarium .card{pointer-events:none}@keyframes floatup{0%{transform:translateY(100px);opacity:0}to{transform:translateY(0);opacity:.8}}.wateruba{position:absolute;opacity:0;width:15vmax;background-color:transparent;border:none;box-shadow:none;padding:0}.wateruba img{width:100%;height:100%;object-fit:contain}.aquarium.in .wateruba{animation:floatup 2s ease-out forwards;animation-delay:.5s}#krakey{left:16vw;top:20vh}#flooso{right:20vw;top:18vh}#splurdge{left:44vw;bottom:20vh}@media (max-width: 679px){#krakey{top:10vh}#splurdge{bottom:40vh}}#aquarium-6 .card{justify-content:flex-start;padding-top:120px}#aquarium-7 .card{padding-bottom:16vh}.space .card{color:#fff}.space.first .card{padding-top:20vh}@media (min-width: 679px){.space.first .card{padding-top:40vh}}.bathroom.first .card{background-image:linear-gradient(180deg,#0000004d,#0000 40%);padding-top:20vh}.bathroom.first .card:after{content:"";display:block;position:absolute;top:0;left:0;width:100vw;height:30vw;background-image:url(/img/bubbles-top.webp);background-repeat:no-repeat;background-size:100%;background-position:center bottom;z-index:-1}.bathroom.last .card:after{content:"";display:block;position:absolute;bottom:0;left:0;width:100%;height:22.6vw;background-image:url(/img/bubbles-bottom.webp);background-repeat:no-repeat;background-size:100%;z-index:-1}@media (max-width: 679px){.bathroom.first .card:after{height:70vw;background-size:200%}.bathroom.last .card:after{height:45vw;background-size:200%}}.ripples{background-image:url(/img/sand.webp);background-size:cover;background-position:center top;background-repeat:no-repeat}#model{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;transition:opacity 5s}#model.loaded{opacity:.7}#questions .card{justify-content:flex-start;padding-top:100px}.credits .card{background:#000;color:#fff;text-align:left;font-size:clamp(16px,2.5vmin,24px);line-height:1.3}#book figure{text-align:center;width:100%;margin:40px 0 0}#book img{width:100%;height:40vh;object-fit:contain;margin-bottom:10px}#book figcaption{width:100%}@media (min-width: 679px){#book figure{margin:0;height:70vh;max-width:50vw;display:flex;flex-direction:row-reverse;align-items:center;gap:30px}#book img{width:40%;height:100%}#book figcaption{min-width:50%}}.button{display:inline-block;background:#023e4d;color:#fff;padding:20px;border-radius:32px;font-family:DM Sans,sans-serif;font-size:15px;font-weight:600;line-height:18px;text-transform:uppercase;text-decoration:none;transition:transform .2s;transform-origin:center center}.button:hover{transform:scale(1.2)}.chat{background-color:#023e4d}.chat .card{padding:10vh 10vw}.chat .card>div{width:100%;display:flex;flex-direction:column;align-items:center}.chat .button{background-color:#0003}.message{width:900px;max-width:100%;display:flex;margin-top:20px;column-gap:30px;text-align:left;align-items:flex-end;opacity:0}@keyframes showmessage{0%{transform:translateY(100%) scale(.3);opacity:1}to{transform:translateY(0) scale(1);opacity:1}}.in .message{animation:showmessage 1s forwards}.in .message:nth-child(2){animation-delay:2s}.in .message:nth-child(3){animation-delay:4s}.brad,.samir{flex-direction:row-reverse}.avatar{width:120px;min-width:120px;height:120px;border-radius:50%;border:2px solid transparent;background-size:cover}.text{width:100%;border-radius:40px;padding:30px 40px 15px}.text strong{font-family:DM Sans,sans-serif;font-size:clamp(13px,1.5vw,18px);line-height:1;font-weight:500;display:block;margin-bottom:20px;text-transform:uppercase}.text p{font-family:Comic Neue,cursive;font-weight:700;font-size:clamp(14px,2.2vw,24px);line-height:1.1;width:auto}@media (max-width: 679px){.chat .card{justify-content:flex-start}.message{column-gap:10px}.avatar{width:60px;min-width:60px;height:60px}.text{border-radius:20px;padding:15px 20px 8px 10px}.text strong{margin-bottom:10px}}.miriam .text,.miriam .avatar{background-color:#f1f1fb}.miriam strong{color:#7074d5}.miriam .avatar{border-color:#7074d5;background-image:url(/img/miriam.webp)}.brad .text,.brad .avatar{background-color:#e8f9f3}.brad strong{color:#1bc688}.brad .avatar{border-color:#1bc688;background-image:url(/img/brad.webp)}.samir .text,.samir .avatar{background-color:#fef8e7}.samir strong{color:#f5b813}.samir .avatar{border-color:#f5b813;background-image:url(/img/samir.webp)}@keyframes pop{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}.checklist{list-style:none;width:800px;max-width:100%;padding:0;font-size:clamp(18px,2vw,36px);line-height:1.2;font-weight:500;text-align:left}.checklist li{padding:20px 100px 20px 0;margin-bottom:20px;position:relative}.checklist li:before,.checklist li:after{content:"";width:64px;height:64px;position:absolute;right:0;top:0}.checklist li:before{background:url(/img/tick.svg) no-repeat;background-size:70% 70%;background-position:5px 12px;opacity:0;transition:opacity .3s}.checklist li:after{border:4px solid #023E4D}.in .checklist li:before{animation:pop .3s forwards;animation-delay:2s}.in .checklist li:nth-child(2):before{animation-delay:3s}.in .checklist li:nth-child(3):before{animation-delay:4s}@media (max-width: 679px){.checklist li:before,.checklist li:after{width:32px;height:32px;top:20px;background-position:2px 8px}}footer{scroll-snap-align:start;padding:30px 10vw;background:#000;color:#fff;display:flex;justify-content:space-between;font-size:11px}footer p{padding:5px 0}footer ul{list-style:none;margin:0;padding:0}footer li{white-space:nowrap;margin:0;padding:5px 0;line-height:1}footer a{color:#fff;text-decoration:none}.layer{position:absolute;top:0;left:0;width:100vw;height:100vh;height:100dvh;pointer-events:none;opacity:0;z-index:0;will-change:opacity}.layer section{width:100%;min-height:100%;position:absolute;top:0;left:0;opacity:0}.layer section.in{opacity:1}.layer section>*{position:absolute}#foreground{z-index:2}section.curved{border-bottom-left-radius:8vmin;border-bottom-right-radius:8vmin;overflow:hidden}#aquarium{height:140vh;height:140dvh;background-image:linear-gradient(180deg,#81effe,#59cee6);z-index:10}#surface{position:absolute;top:0;left:0;width:100%}#aquarium #bottom{bottom:-60px;left:0;width:100%}#coral-left{left:0;bottom:40px;width:500px;max-width:40vw}#coral-right{right:0;bottom:40px;width:500px;max-width:40vw}@media (max-width: 900px){#coral-left,#coral-right{max-width:60vw}#aquarium #bottom{bottom:0;width:120%}}@keyframes scrollBackground{0%{background-position:0 0}to{background-position:0 -480px}}#space{height:300vh;height:300dvh;overflow:hidden}.space{background-color:#000;background-image:url(/img/stars.webp);background-repeat:repeat;background-size:1200px}#space-2.in{animation:scrollBackground 6s linear infinite}#space-3 .card{justify-content:flex-start;padding-top:28vh}#rock{position:absolute;top:0;width:100%;z-index:4}#asteroid{width:30vw;left:38vw}@keyframes bobbing{0%{transform:rotate(-10deg)}50%{transform:rotate(0)}to{transform:rotate(10deg)}}@keyframes wobble{0%{transform:rotate(0) scale(1);opacity:1}25%{transform:rotate(-5deg) scale(1.2);opacity:.5}50%{transform:rotate(0) scale(.9);opacity:1}75%{transform:rotate(5deg) scale(1.2);opacity:.5}to{transform:rotate(0) scale(1);opacity:1}}.tuba{color:#fff}.tuba .card{justify-content:flex-start}#tuba:after{content:"";display:block;position:absolute;top:0;left:0;width:100%;height:40vh;background-image:linear-gradient(180deg,#0000004d,#0000)}#tuba #tiles{width:100%}#slosh{width:100%;top:20vh;height:80vh;object-fit:cover}#tuba #bucket{height:50vh;top:10vh;left:0}#tuba #splash{width:60vw;top:29vh;left:2.5vh}#tuba #rubber-duck{top:36vh;left:22vw;width:16vw;animation:bobbing 2s linear alternate infinite}.tuba .card{position:absolute;top:0;left:0;transition:transform 1s,opacity .1s}.tuba .card.hidden{transform:translateY(100%);opacity:0;pointer-events:none}.tuba h2:first-child{height:45vh}.tuba .last h2:first-child{height:50vh}.tuba button{background:transparent;border:none;width:15vw;position:absolute;top:70vh;transition:transform .2s,opacity .4s;cursor:pointer}.tuba button:active{transform:scale(1.1)}.tuba button img{width:100%}.tuba .card.playing button{pointer-events:none}.tuba .card.playing button img{animation:wobble 5s linear alternate infinite}.tuba .card.playing h2+h2{opacity:0!important}#tuba .rubas{width:100%;height:100%;opacity:0}#tuba .wateruba{width:12vmax;animation:bobbing 3s linear alternate infinite;transition:opacity 1s 3s,transform 1s 3s;opacity:0}#tuba.showrubas .rubas{opacity:1}#tuba.showrubas .wateruba{opacity:.6;transform:translateY(-100px)}#press{width:240px;position:absolute;bottom:4vh;left:50vw;transition:opacity .2s}.playing #press{opacity:0!important}#emoto-2{bottom:20vh;right:10vw}#tuba #flooso-2{left:10vw;bottom:10vh;transition:opacity 1s 6s,transform 1s 6s;animation-delay:.4s;animation-duration:4.5s}#tuba #krakey-2{left:30vw;bottom:2vh;transition:opacity 1s 9s,transform 1s 9s;animation-delay:2s;animation-duration:4s}@media (max-width: 679px){#slosh{top:32vh;height:68vh;object-fit:cover}#tuba #bucket{height:auto;width:50vw;top:25vh}#tuba #rubber-duck{top:40vh;left:5vw;width:40vw}.tuba h2:first-child{margin-top:5vh;height:55vh}.tuba button{width:40vw;top:73vh}#press{width:50%}}@keyframes showlabel{0%{opacity:0}50%{opacity:1}to{opacity:0}}#asteroid-label{width:200px;position:absolute;right:22vw;top:60vh;opacity:0}.in #asteroid-label{animation:showlabel 4s ease-out;animation-delay:1s}#earth{position:absolute;z-index:3;left:0;bottom:0;width:100vw;height:72vw;background-image:url(/img/fiery-earth2.webp);background-size:cover;background-position:center bottom;background-repeat:no-repeat}#earth-label{width:150px;position:absolute;right:10vw;bottom:30vh;opacity:0;z-index:5}.in #earth-label{animation:showlabel 4s ease-out;animation-delay:1s}@keyframes explode{0%{transform:scale(0);opacity:1}30%{transform:scale(1);opacity:1}to{transform:scale(1.3);opacity:0}}#explosion{position:absolute;width:40vw;bottom:20vw;left:29vw;z-index:4;transform-origin:center bottom;opacity:0}.in #explosion{animation:explode 4s linear;animation-delay:.3s}.in #explosion{transform:scale(1)}@media (max-width: 679px){#asteroid{width:70vw;left:17vw}#asteroid-label{width:140px;right:10vw;top:auto;bottom:15vh}#earth{width:200vw;height:144vw;left:-50vw}#earth-label{width:130px;bottom:30vh}#explosion{width:80vw;bottom:37vw;left:8vw}}#bathroom{height:300vh;height:300dvh;background-color:#023e4d;background-image:url(/img/bathroom-tile.png);background-repeat:repeat;background-size:300px 450px;background-position:center center;z-index:4;display:flex;justify-content:center;align-items:center}#tap{position:absolute;height:80vh;width:54vh;top:15vh;left:calc(50vw - 27vh)}@keyframes dripping{0%{transform:scale(.1);opacity:0}5%{transform:scale(.1);opacity:1}30%{transform:scale(1);opacity:1}80%{transform:translateY(0) scale(1);opacity:1}to{transform:translateY(80vh);opacity:1}}@keyframes appear{0%{opacity:0}50%{opacity:1}to{opacity:1}}.drip{position:absolute;width:18vw;height:32vw;top:30vh;left:41vw;opacity:0;transform-origin:center top}.in .drip{animation:dripping 4s forwards;animation-delay:1s}.label{position:absolute;width:18vw;opacity:0}.in .label{animation:appear 2.2s;animation-delay:2s}#awa-label{right:18vw;top:50vh}#dribble-label{left:15vw;top:52vh}.in #dribble-drip{animation-delay:5s}.in #dribble-label{animation-delay:6s}#fleck-label{right:16vw;top:50vh}.in #fleck-drip{animation-delay:9s}.in #fleck-label{animation-delay:10s}@media (max-width: 679px){.drip{width:50vw;height:89vw;left:25vw}.label{width:25vw}#awa-label,#fleck-label{right:8vw}#dribble-label{left:8vw}}#sink{left:0;bottom:0;height:112vh;height:112dvh;width:100%;background-image:url(/img/basin.webp);background-repeat:repeat;background-size:1px;background-position:center top}.bubble{position:absolute;width:100px;height:100px;background-image:url(/img/bubble.webp);background-size:contain}#example3d{background-color:#041637}@keyframes driftUp{0%{transform:translateY(50px)}to{transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0;transform:translateY(50px)}to{opacity:1;transform:translateY(0)}}.stagger>*:nth-child(1){transform:translateY(50px)}.in .stagger>*:nth-child(1){animation:driftUp 1s forwards;animation-delay:.8s}.stagger>*:nth-child(2){opacity:0}.in .stagger>*:nth-child(2){animation:fadeIn 1s forwards;animation-delay:1.2s}.stagger>*:nth-child(3){opacity:0}.in .stagger>*:nth-child(3){animation:fadeIn 1s forwards;animation-delay:2s}.stagger>*:nth-child(4){opacity:0}.in .stagger>*:nth-child(4){animation:fadeIn 1s forwards;animation-delay:3s}.delay h2,.delay p{opacity:0}.in .delay h2,.in .delay p{animation:fadeIn 1s forwards;animation-delay:1.5s}.in .delay h2+h2,.in .delay p{animation-delay:2.5s}#fish-1{position:absolute;opacity:0;width:120px}#fish-2{position:absolute;opacity:0;width:80px}article{padding:40px 10vw}article h2{margin:60px 0 8px;font-size:clamp(24px,2.5vw,36px);font-weight:600}article h3{font-size:clamp(18px,2vw,24px);font-weight:600;margin-bottom:8px}article h4{font-size:clamp(16px,1.8vw,22px);font-weight:600;margin-bottom:8px;font-family:Playfair Display,serif}article h2+h3{margin-top:20px}article p,article li{font-family:Playfair Display,serif;width:800px;max-width:100%;font-size:clamp(16px,1.8vw,24px);line-height:1.2}article ul{margin:0 0 20px}article li{margin-bottom:12px}address{margin:0 0 20px;font-style:normal}address p{margin:0}
