:root{color-scheme:light;--ink:#251d0b;--glass:rgba(255,250,221,.57);--line:rgba(255,255,247,.83)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#ffca18;color:var(--ink);font-family:Arial,Helvetica,sans-serif;line-height:1.65}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}a{color:#005d79;text-underline-offset:4px;text-decoration-thickness:1px}a:hover{color:#003d50}a:focus-visible,button:focus-visible{outline:3px solid #005d79;outline-offset:5px}
.ocean{position:fixed;inset:0;overflow:hidden;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 65% -14%,#fff989 0%,#ffe831 34%,transparent 67%),linear-gradient(155deg,#ffc21b 8%,#ffdc17 47%,#f6a515 100%)}.ocean-light{position:absolute;inset:-15%;background:radial-gradient(ellipse at 70% 20%,#fff77180,transparent 48%),radial-gradient(ellipse at 10% 75%,#f18d1b70,transparent 45%);animation:water-light 19s ease-in-out infinite alternate}.sunbeams{position:absolute;inset:-55% -30%;transform-origin:65% 0;background:repeating-conic-gradient(from 163deg at 65% 0%,transparent 0deg 8deg,#fffad92e 9deg 12deg,transparent 14deg 22deg);filter:blur(12px);animation:light-sway 24s ease-in-out infinite alternate}.caustics{position:absolute;inset:-15%;opacity:.3;background:repeating-radial-gradient(ellipse at 85% -30%,transparent 0 13%,#fff9a955 13.3% 13.6%,transparent 14% 24%);transform:rotate(-16deg) scale(1.2);animation:water-light 27s ease-in-out infinite alternate-reverse}.sea-shapes{position:absolute}.swimmer{position:absolute;left:0;color:#a85c12;fill:currentColor;will-change:transform;animation:swim var(--duration,70s) linear infinite;animation-delay:var(--delay,-20s);width:var(--size,40vw);top:var(--top,40%)}.swimmer > svg{display:block;width:100%;overflow:visible;animation:body-sway 8s ease-in-out infinite alternate}.whale-near{--size:760px;--top:42%;--duration:85s;--delay:-30s;opacity:.23}.whale-far{--size:300px;--top:21%;--duration:110s;--delay:-80s;opacity:.11;animation-direction:reverse}.whale-far > svg{transform:scaleX(-1)}.whale-detail{fill:none;stroke:#ffdd43;stroke-width:2;stroke-linecap:round}.whale-eye{fill:#ffc528}.ray-near{--size:220px;--top:66%;--duration:65s;--delay:-43s;opacity:.16}.ray-near > svg{animation:ray-glide 7s ease-in-out infinite alternate}.school{--size:390px;--top:33%;--duration:53s;--delay:-10s;opacity:.17}.plankton{position:absolute;inset:-30%;opacity:.4;background-image:radial-gradient(circle,#fffbd4 1px,transparent 2px),radial-gradient(circle,#fff6bd 1px,transparent 2px),radial-gradient(circle,#fff3bd 1px,transparent 2px);background-size:137px 173px,231px 211px,313px 297px;background-position:0 0,80px 110px,25px 170px;animation:plankton 38s linear infinite}.seabed{position:absolute;bottom:-15px;width:100%;height:19%;color:#bd6e15;fill:currentColor;opacity:.12}
.masthead{max-width:1440px;margin:auto;padding:23px 36px 0;position:relative}.controls{display:flex;align-items:center;justify-content:flex-end;gap:22px;font-size:12px;letter-spacing:.03em}.languages{display:flex;align-items:center;gap:8px}.languages button,.motion-toggle{border:0;background:none;color:var(--ink);padding:5px 0}.languages button[aria-pressed=true]{font-weight:700;text-decoration:underline;text-underline-offset:5px}.languages span{opacity:.4}.motion-toggle{border-bottom:1px solid #6d4f1a55}.brand{display:block;width:min(440px,63vw);margin:8px auto 26px;filter:drop-shadow(6px 8px 2px #8e620c55)}.brand img{display:block;width:100%;height:auto}.content{max-width:1200px;padding:0 24px;margin:0 auto;perspective:1200px}.float-box{background:var(--glass);border:1px solid var(--line);border-radius:5px;box-shadow:4px 5px 23px 2px #fff8cfaa;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);animation:arrive 1.6s cubic-bezier(.18,.7,.22,1) both;animation-delay:var(--wait,0s);--from-x:0px;--from-y:50px;--from-z:-450px;--from-rotate:0deg}.title-box{width:fit-content;max-width:100%;margin-left:auto;padding:17px 21px;--from-x:160px;--from-z:-600px;--from-rotate:5deg;--wait:.08s}h1,h2,h3,p{margin:0}h1{font-size:clamp(28px,3.1vw,43px);font-weight:400;line-height:1.25;letter-spacing:-.025em}.services{position:relative;height:268px;margin-top:-4px}.service{position:absolute;width:fit-content;max-width:100%;padding:17px 21px}.service h2{font-weight:400;line-height:1.35;letter-spacing:-.02em}.service-shop{left:0;top:0;--from-x:-260px;--from-rotate:-8deg;--wait:.25s}.service-shop h2{font-size:32px}.service-web{left:6%;top:84px;--from-x:-180px;--from-z:-700px;--wait:.45s}.service-web h2{font-size:27px}.service-portal{right:0;top:110px;--from-x:240px;--from-rotate:8deg;--wait:.6s}.service-portal h2{font-size:24px}.service-app{left:17%;top:190px;--from-x:-140px;--from-z:-1000px;--wait:.8s}.service-app h2{font-size:21px}.about{padding:23px 25px;margin:0 0 0 4%;--wait:.95s;--from-z:-350px}.about p+p{margin-top:17px}.about p{font-size:16px}.contact a{font-weight:700;white-space:nowrap}.partner{width:fit-content;max-width:100%;margin:-2px -2% 0 auto;padding:16px 21px;font-size:14px;--wait:1.1s;--from-x:180px}.partner a{font-weight:700;white-space:nowrap}.projects{border-top:1px solid #fff8ca99;margin:66px 0 0 4%;padding-top:22px}.section-label{font-size:12px;text-transform:uppercase;letter-spacing:.18em;font-weight:400;margin:0 0 21px 8px}.project{display:flex;gap:24px;padding:24px 27px;margin-bottom:22px;max-width:92%;--wait:1.2s}.project:nth-of-type(2){margin-left:auto;--wait:1.3s}.project-number{font-size:12px;padding-top:7px;white-space:nowrap;color:#695324}.project h3{font-size:23px;font-weight:400;line-height:1.35}.project h3 a{color:var(--ink);text-decoration:none}.project h3 a:hover{text-decoration:underline}.project p{font-size:15px;margin:12px 0}.project-link{font-size:14px;font-weight:700}footer{max-width:1152px;display:flex;justify-content:space-between;margin:34px auto 0;padding:18px 24px 30px;font-size:12px;letter-spacing:.04em;border-top:1px solid #fff8ca88}footer a{color:var(--ink)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@keyframes swim{from{transform:translateX(calc(100vw + 100%))}to{transform:translateX(-110%)}}@keyframes body-sway{from{rotate:-5deg;translate:0 -9px}to{rotate:3deg;translate:0 12px}}@keyframes ray-glide{from{rotate:-9deg;scale:1 .88}to{rotate:6deg;scale:1 1.05}}@keyframes water-light{from{translate:-1% -1%;scale:1}to{translate:2% 2%;scale:1.1}}@keyframes light-sway{from{rotate:-7deg;opacity:.6}to{rotate:5deg;opacity:1}}@keyframes plankton{from{transform:translate(0,0)}to{transform:translate(-137px,-173px)}}@keyframes arrive{from{opacity:0;transform:perspective(1200px) translate3d(var(--from-x),var(--from-y),var(--from-z)) rotateY(var(--from-rotate))}to{opacity:1;transform:perspective(1200px) translate3d(0,0,0) rotateY(0)}}
body.motion-paused .ocean *,body.tab-hidden .ocean *{animation-play-state:paused!important}.float-box.settled{animation:none!important}
@media(min-width:1600px){.content{max-width:1390px}.services{height:290px}.service-shop{left:-7%}.service-web{left:-11%}.service-portal{right:-6%}.service-app{left:3%;top:205px}.about{margin-left:7%;margin-right:3%}.brand{margin-top:15px;margin-bottom:25px}.masthead{padding-top:26px}}
@media(max-width:760px){.masthead{padding:14px 20px 0}.controls{font-size:11px;gap:16px}.brand{margin-top:24px;margin-bottom:28px}.content{padding:0 18px}.title-box{padding:17px 19px;margin:0 auto;width:100%}h1{font-size:30px}.services{height:auto;display:flex;flex-direction:column;align-items:flex-start;gap:14px;margin:20px 0 27px}.service{position:relative;inset:auto!important;padding:13px 16px;max-width:95%}.service:nth-child(even){align-self:flex-end}.service h2{font-size:clamp(17px,4.2vw,25px)}.about{margin:0;padding:21px}.about p{font-size:15px}.partner{margin:17px 0 0 auto;font-size:13px;padding:14px 17px}.projects{margin:42px 0 0;padding-top:19px}.project{max-width:100%;padding:20px 18px;gap:13px}.project h3{font-size:21px}.project p{font-size:14px}.project-number{font-size:10px}.section-label{font-size:11px}.whale-near{--size:560px;--top:37%}.whale-far{--size:190px}.ray-near{--size:150px}.school{--size:220px}.sunbeams{filter:none}.float-box{backdrop-filter:none;-webkit-backdrop-filter:none}footer{margin-top:25px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.whale-near{transform:translateX(17vw)}.whale-far{transform:translateX(68vw)}.ray-near{transform:translateX(77vw)}.school{transform:translateX(4vw)}}
/* Each species has its own depth, scale, direction and swimming pace. */
.shark-near{--size:440px;--top:56%;--duration:69s;--delay:-45s;opacity:.16}
.hammerhead-far{--size:340px;--top:17%;--duration:95s;--delay:-42s;opacity:.14;animation-direction:reverse}
.hammerhead-far > svg{transform:scaleX(-1)}
.dolphin-near{--size:330px;--top:73%;--duration:48s;--delay:-25s;opacity:.18}
.seal-far{--size:210px;--top:42%;--duration:80s;--delay:-64s;opacity:.14}
.ray-near{--size:400px;--top:55%}
.ray-near > svg{transform:none;animation:body-sway 10s ease-in-out infinite alternate}
@media(max-width:760px){.shark-near{--size:310px}.hammerhead-far{--size:230px}.dolphin-near{--size:250px}.seal-far{--size:165px}.ray-near{--size:280px}}
@media(prefers-reduced-motion:reduce){.shark-near{transform:translateX(15vw)}.hammerhead-far{transform:translateX(45vw)}.dolphin-near{transform:translateX(65vw)}.seal-far{transform:translateX(6vw)}}
body{overflow-x:clip}
/* Travel and body pose share the same stroke clock in sea-life.js. */
.swimmer,.swimmer > svg{animation:none!important}
.swimmer > svg{rotate:none;translate:none;scale:none;transform-origin:50% 50%}
.languages a{color:var(--ink);text-decoration:none;padding:5px 0}
.languages a[aria-current=page]{font-weight:700;text-decoration:underline;text-underline-offset:5px}