@font-face { font-display: swap; font-family: 'Montserrat'; font-style: normal; font-weight: 400; src: url('fonts/montserrat-v29-latin-regular.woff2') format('woff2'); }
@font-face { font-display: swap; font-family: 'Montserrat'; font-style: normal; font-weight: 700; src: url('fonts/montserrat-v29-latin-700.woff2') format('woff2'); }
@font-face { font-display: swap; font-family: 'Cardo'; font-style: normal; font-weight: 400; src: url('fonts/cardo-v20-latin-regular.woff2') format('woff2'); }
@font-face { font-display: swap; font-family: 'Cardo'; font-style: normal; font-weight: 700; src: url('fonts/cardo-v20-latin-700.woff2') format('woff2'); }

:root {
    --font: 'Montserrat', sans-serif;
    --heading: 'Cardo', serif;
    --bg: hsl(44deg, 20%, 21%);
}
main, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
input, button, textarea, select, input::placeholder { font: inherit; }
html, body { height: 100%; padding: 0; margin: 0; font-family: var(--font); font-weight: 400; letter-spacing: 0.02em; font-size: 100%; -webkit-font-smoothing: antialiased; color: #000; }
html { background-color: #FFF; scroll-behavior: smooth; }
@media (prefers-reduced-motion) {
    html { scroll-behavior: auto; }
}
body { display: flex; flex-direction: column; justify-content: space-between; }
a.skip { background-color: var(--c); color: var(--bg); position: absolute; height: 3rem; line-height: 3rem; font-size: 1rem; top: -3rem; left: 0; padding: 0 0.5rem; border-radius: 0 0 1rem 0; transition: .3s; z-index: 950; }
a.skip:focus { top: 0; }
.visually-hidden { clip: rect(0 0 0 0); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; }
a#to_top { position: fixed; right: 1.75rem; bottom: -3rem; width: 3rem; height: 3rem; padding: 0.25rem; margin: 0; color: #FFF; background-color: #000; border-radius: 50%; transition: bottom 0.5s ease-in-out; }
a#to_top svg { width: 2.5rem; height: 2.5rem; }

h1, h2, h3 { font-family: var(--heading); font-weight: 400; margin-block: 0 1em; font-size: 2rem; line-height: 1.2; text-wrap-style: balance; }
h3 { font-size: 1.5rem; }
p, ul { line-height: 1.5; }
address { font-style: normal; line-height: 1.5; }
/* Header */
header { position: relative; z-index: 100; overflow-x: clip; }
header > div { height: 7rem; width: 100%; max-width: 70rem; margin-inline: auto; padding: 0.5rem 2rem; display: flex; align-items: stretch; justify-content: space-between; }
header nav { height: 6rem; line-height: 6rem; font-size: 1rem; text-align: center; }
nav a { padding: 0 0.5em; display: inline-block; color: inherit; margin: 0; text-decoration: none; }
nav a.active, nav a:focus, nav a:hover { text-decoration: underline; }
#menu_toggle { appearance: none; position: relative; display: none; width: auto; height: 100%; line-height: 2rem; padding: 1rem 0; margin: 0 0 0 1.25rem; cursor: pointer; font-weight: 600; letter-spacing: 0.06rem; border: 0; background: transparent; color: var(--c); z-index: 900; }
#menu_toggle svg { display: inline-block; width: 2rem; height: 2rem; margin: 0 0 0 0.5rem; vertical-align: middle; }
#menu_toggle .line { transform-origin: center; transition: 0.2s; }
#menu_toggle[aria-expanded="true"] .line:not(.middle) { y: 45; opacity: 0; }
#menu_toggle[aria-expanded="true"] .line.middle { transform: rotate(45deg); }
#menu_toggle[aria-expanded="true"] .line.middle:nth-child(even) { transform: rotate(-45deg); }
header svg.logo { height: 6rem; width: 6rem; }
/* Content */
section.hero { --ratio: 16/9; --pos: center; position: relative; aspect-ratio: var(--ratio); display: flex; align-items: center; justify-content: center; padding: 2rem 0; max-height: 80vh; width: 100%; }
section.hero > figure { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; }
section.hero > figure > img { display: block; width: 100%; height: 100%; border: 0; padding: 0; object-fit: cover; object-position: var(--pos); }

section.columns { display: flex; align-items: stretch; flex-wrap: wrap; color: var(--bg); }
section.columns > div { position: relative; flex: 1 1 50%; min-width: min(100%, 30rem); }
section.columns > div > div { width: 100%; max-width: 35rem; padding: 4rem 2rem; margin: 0 0 0 auto; }
section.columns > div:last-child > div { margin: 0 auto 0 0; }
section.columns.alternate { flex-direction: row-reverse; }
section.columns.alternate > div > div { margin: 0 auto 0 0; }

section.columns > div > figure { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; }
section.columns > div > figure > img { display: block; width: 100%; height: 100%; border: 0; padding: 0; object-fit: cover; object-position: center; }
section.columns > div:only-child > div { max-width: 70rem; margin-inline: auto; text-align: center; }

section.columns.text.alternate { flex-direction: row; }
section.columns.text.alternate > div:first-child > div { margin: 0 0 0 auto; }
section.columns.text.alternate > div:first-child, section.columns.text > div:last-child { background-color: var(--bg); color: #FFF; }
section.columns.text.alternate > div:last-child { background-color: #FFF; color: var(--bg); }

th, td { text-align: left; line-height: 1.5; }
th { font-weight: 700; padding: 0 1em 0 0; }
iframe { display: block; margin: 0; padding: 0; border: 0; width: 100%; height: 100%; max-width: 100%; }
/* Footer */
footer { background-color: #000; color: #FFF; margin: 0; padding: 4rem 0 0; }
footer > div { width: 100%; max-width: 70rem; margin-inline: auto; display: flex; flex-wrap: wrap; align-items: stretch; padding: 0 0 2rem; }
footer > div > div { flex: 1 1 50%; min-width: 20rem; padding: 2rem; }
footer p { padding: 0; }
footer a { color: inherit; }
footer svg { width: 10rem; }
footer div.copyright { display: block; font-size: 0.6em; text-align: left; padding: 2rem; }
@media only screen and (orientation: portrait) {
    section.hero { --ratio: 2/1; --pos: right; }
}
@media screen and (max-width: 60rem) {
	#menu_toggle { display: block; }
    header nav { position: absolute; top: 0; right: -100vw; height: auto; padding: 6rem 0 0 0; background-color: #FFF; border-radius: 0 0 0 2rem; opacity: 0; transition: right 0.15s ease-in-out, opacity 0.25s ease-in-out; }
	header nav.open, header nav:focus-within { right: 0; opacity: 1; }
    nav a { display: block; height: 1.5em; line-height: 1.5em; text-align: right; padding: 0 2rem 2.5rem; }

    section.columns > div > div { width: 100%; max-width: 100%; padding: 2rem; margin: 0; }
    section.columns > div > figure { position: revert; height: revert; aspect-ratio: 16/9; }
    iframe { height: 50vh; }
}