:root { 
    --colour-neutral-dark: #333;
    --colour-neutral-dark-translucent: #333333f2;
    --colour-neutral-light: #fff; 
    --colour-brand: #4ba6c5; 
    --colour-brand-translucent: #4ba6c5e5; 
}

html { font-size: 18px; font-family: "Jost", sans-serif; font-optical-sizing: auto; font-weight: 300; font-style: normal; text-wrap: balance; }
body { margin: 0; }
h1, h2, h3 { font-weight: 200; }
.center-text { text-align: center; }

.container { padding-left: 100px; padding-right: 100px; }
.narrow { max-width: 800px; }
.container.center { margin-left: auto; margin-right: auto; }
.columns { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 50px; }
.columns.vertical-center { align-items: center; }
.columns > .image-column img { display: block; max-width: 100%; } /* Images seem to have no respect for column sizes */

header { padding: 20px; background: var(--colour-neutral-dark-translucent); position: fixed; top: 0; width: 100%; z-index: 1; }
header #logo { display: block; }
header #logo svg .reversible { fill: var(--colour-neutral-light) !important; }

main { margin-bottom: 50px; }

footer .container { background: var(--colour-brand); color: var(--colour-neutral-light); padding-top: 20px; padding-bottom: 100px; display: flex; justify-content: space-between; }
footer a { color: var(--colour-neutral-light); text-decoration: none; }
footer .copyright { white-space: nowrap; }
footer .contact { text-align: right; }
footer .contact .contact-item { display: inline-block;  white-space: nowrap; margin-left: 1.5em; }
footer img { display: inline-block; margin: 0 .5em -.2em 0; }

.hero-image { margin: 0 0 50px 0; position: relative; }
.hero-image > img { display: block; width: 100%; max-height: 65vh; object-fit: cover; }
.hero-image > img.flip-x { transform: scaleX(-1); }
.mountain-overlay { position: absolute; bottom: 0; right: 0; margin: 0; width: 400px; overflow: hidden; }
.mountain-overlay img { display: block; width: 100%; position: relative; left: 1px; }
.mountain-overlay figcaption { position: absolute; bottom: 1em; right: 2em; width: 70%; text-align: right; color: var(--colour-neutral-light); }
.product-overflow { width: 30vw; position: absolute; bottom: -7vw; }
.product-overflow img { width: 100%; }

@media (max-width: 768px) { 
    .container { padding-left: 50px; padding-right: 50px; }
    .mountain-overlay { width: 350px; font-size: 0.9em; }
    .product-overflow { width: 35vw; bottom: -9vw; left: -4vw; }
    footer .container { flex-direction: column; }
    footer .contact { text-align: left; margin-top: 1em; }
    footer .contact .contact-item { margin-left: 0; margin-right: 1.5em; line-height: 2em; }
}

@media (max-width: 540px) {
    body { position: relative; }
    header { position: sticky; box-sizing: border-box; }
    .columns { grid-auto-flow: row; }
    .mountain-overlay { width: 250px; font-size: 0.7em; }
    .mountain-overlay figcaption { width: 60%; }
    .product-overflow { width: 40vw; bottom: -14vw; left: -10vw; }
    footer .contact { text-align: left; }
    footer img:before { display: block; content: ''; }
}