* {
box-sizing:border-box}

html {
scroll-behavior:smooth}

body {
margin:0;
font-family:Arial,Helvetica,sans-serif;
color:#0b1c29;
background:#f8f7f4}

a {
color:inherit;
text-decoration:none}

.site-header {
height:68px;
background:#fff;
display:flex;
align-items:center;
padding:0 5.5%;
gap:38px;
position:sticky;
top:0;
z-index:10;
box-shadow:0 1px 8px #0001}

.logo {
width:174px;
display:flex;
flex-direction:column;
line-height:.85;
letter-spacing:9px}

.logo strong {
font-size:30px}

.logo span {
font-size:12px;
margin-top:8px;
letter-spacing:8px}

.site-header nav {
display:flex;
gap:31px;
margin-left:auto;
font-size:14px}

.site-header nav a {
padding:24px 0}

.site-header nav .active {
border-bottom:2px solid}

.pill {
display:inline-flex;
align-items:center;
justify-content:center;
gap:14px;
padding:13px 24px;
border-radius:28px;
font-weight:700}

.dark {
background:#071b29;
color:#fff}

.light {
background:#fff;
color:#0b1c29}

.outline {
border:1.5px solid #fff;
color:#fff}

.gold {
background:#ffd269;
color:#10212c}

.create {
white-space:nowrap}

.menu {
display:none;
background:none;
border:0;
font-size:24px}

.hero {
height:430px;
background:url("assets/hero-penguino.jpg") center 43%/cover no-repeat;
position:relative;
color:#fff;
overflow:hidden}

.hero-shade {
position:absolute;
inset:0;
background:linear-gradient(90deg,rgba(0,0,0,.72),rgba(0,0,0,.14) 60%,rgba(0,0,0,.04))}

.hero-copy {
position:relative;
padding:45px 5.7%;
max-width:530px}

.hero h1 {
font-size:62px;
line-height:.93;
margin:0 0 20px;
letter-spacing:-2px}

.hero p {
font-size:16px;
line-height:1.45;
margin:0 0 16px}

.actions {
display:flex;
gap:20px}

.scribble,.hero-note,.about-note {
font-family:"Comic Sans MS",cursive;
font-style:italic;
transform:rotate(-6deg)}

.scribble {
font-size:20px;
margin-top:16px}

.scribble span {
margin-left:55px}

.hero-note {
position:absolute;
right:13%;
top:35px;
font-size:20px;
color:#071b29}

.services {
padding:28px 5.8% 24px;
background:#fbfaf7}

.services-intro {
display:grid;
grid-template-columns:1fr 1.15fr;
gap:70px;
align-items:center}

.services small,.project small,.about small {
letter-spacing:3px;
font-weight:800;
color:#6b7279}

.services h2,.about h2 {
font-size:36px;
line-height:1.05;
margin:10px 0}

.services-intro p,.about p {
line-height:1.5;
color:#39434b}

.service-grid {
display:grid;
grid-template-columns:repeat(4,1fr);
margin-top:22px;
text-align:center}

.service-grid article {
padding:0 28px;
border-right:1px solid #ddd}

.service-grid article:last-child {
border:0}

.service-grid i {
display:grid;
place-items:center;
width:66px;
height:66px;
margin:auto;
border-radius:50%;
background:#dceaff;
font-size:27px;
font-style:normal}

.service-grid article:nth-child(1) i {
background:#ffd3c6}

.service-grid article:nth-child(3) i {
background:#ccefe2}

.service-grid article:nth-child(4) i {
background:#e4d4ff}

.service-grid h3 {
margin:10px 0 5px}

.service-grid p {
margin:0;
line-height:1.45}

.project {
background:#061b29;
color:#fff;
padding:26px 5.8%;
display:grid;
grid-template-columns:32% 68%;
gap:28px;
align-items:center}

.project small {
color:#fff}

.project-copy h2 {
font-family:"Comic Sans MS",cursive;
font-size:72px;
line-height:.9;
margin:10px 0}

.tagline {
letter-spacing:5px;
font-weight:bold;
font-size:12px;
margin:0 0 18px;
text-align:center}

.project-copy p {
line-height:1.4;
margin:0 0 14px;
max-width:330px}

.project-art {
position:relative;
height:320px;
overflow:hidden;
border-radius:4px}

.project-art img {
width:100%;
height:100%;
object-fit:cover;
object-position:center}

.play {
position:absolute;
left:39%;
top:56%;
width:58px;
height:58px;
background:#fff;
color:#061b29;
border-radius:50%;
display:grid;
place-items:center;
font-size:20px}

.teaser {
position:absolute;
left:35%;
top:77%;
text-shadow:0 2px 5px #000}

.about {
padding:22px 5.8%;
display:grid;
grid-template-columns:42% 39% 19%;
gap:55px;
align-items:center;
background:#fff}

.about>img {
width:100%;
height:230px;
object-fit:cover}

.about-note {
font-size:20px;
color:#56606a}

.about .pill {
margin-top:3px}

footer {
background:#061b29;
color:#fff;
padding:25px 5.8%;
display:grid;
grid-template-columns:260px 1fr auto;
align-items:center;
gap:20px;
font-size:12px}

footer .logo {
grid-row:1}

.inverse {
color:#fff}

footer nav {
display:flex;
justify-content:center;
gap:25px}

footer .social {
font-size:17px}

footer p {
color:#c8d0d5;
margin:8px 0}

.location {
text-align:right}

.project-art,.hero {
background-color:#18364a}

@media(max-width:800px) {
.site-header {
padding:0 20px}

.site-header nav,.create {
display:none}

.menu {
display:block;
margin-left:auto}

.site-header.open nav {
display:flex;
position:absolute;
top:68px;
left:0;
right:0;
background:#fff;
flex-direction:column;
gap:0;
padding:10px 25px}

.site-header.open nav a {
padding:12px}

.hero {
height:560px;
background-position:64% center}

.hero-copy {
padding:45px 24px}

.hero h1 {
font-size:48px}

.hero-note {
display:none}

.services-intro,.project,.about {
grid-template-columns:1fr}

.service-grid {
grid-template-columns:1fr 1fr;
gap:25px}

.service-grid article {
border:0}

.project {
padding:32px 24px}

.project-copy h2 {
font-size:60px}

.project-art {
height:290px}

.about {
padding:28px 24px;
gap:24px}

.about-note {
display:none}

footer {
grid-template-columns:1fr;
text-align:center}

footer nav {
flex-wrap:wrap}

.location {
text-align:center}

}