@font-face {
    font-family: "ClanOT-NarrowBlack";
    src: url("../fonts/ClanOT-NarrowBlack.otf") format("truetype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "ClanOT-NarrowBold";
    src: url("../fonts/ClanOT-NarrowBold.otf") format("truetype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "ClanOT-NarrowBook";
    src: url("../fonts/ClanOT-NarrowBook.otf") format("truetype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "ClanOT-NarrowMedium";
    src: url("../fonts/ClanOT-NarrowMedium.otf") format("truetype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "ClanOT-NarrowNews";
    src: url("../fonts/ClanOT-NarrowNews.otf") format("truetype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "ClanOT-NarrowThin";
    src: url("../fonts/ClanOT-NarrowThin.otf") format("truetype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "ClanOT-NarrowUltra";
    src: url("../fonts/ClanOT-NarrowUltra.otf") format("truetype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
.ClanOT-NarrowBlack {font-family: 'ClanOT-NarrowBlack', sans-serif;}
.ClanOT-NarrowBold {font-family: 'ClanOT-NarrowBold', sans-serif;}
.ClanOT-NarrowBook {font-family: 'ClanOT-NarrowBook', sans-serif;}
.ClanOT-NarrowMedium {font-family: 'ClanOT-NarrowMedium', sans-serif;}
.ClanOT-NarrowNews {font-family: 'ClanOT-NarrowNews', sans-serif;}
.ClanOT-NarrowThin {font-family: 'ClanOT-NarrowThin', sans-serif;}
.ClanOT-NarrowUltra {font-family: 'ClanOT-NarrowUltra', sans-serif;}

:root {
    --primary: #ffbd59;
}

*,
*:before,
*:after {
    box-sizing: border-box;
    outline: 0;
}

[v-cloak] {
    display: none;
}

html {
    min-width: 320px;
    overflow-x: hidden;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-text-size-adjust: 100%;
    text-align: left;
    direction: ltr;
}

html,
body {
    float: left;
    width: 100%;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    min-width: 320px;
}

body {
    background: #fff;
    color: #000;
    font-family: 'ClanOT-NarrowBook', sans-serif;
    font-weight: normal;
    font-size: 16px;
    line-height: 1.7em;
}

a {text-decoration: none; color: var(--color); cursor: pointer;}
a:hover,
a:active,
a:focus {outline: none;}
[data-scroll-to] {cursor: pointer;}
.grecaptcha-badge {display: none !important;}
picture, img {display: block;vertical-align: bottom; width: 100%; max-width: 100%; margin: 0; padding: 0; border: 0;}
.b {display: block; margin: 0 auto; width: 100%; max-width: 1300px;}
.b-gap {padding: 0 14px;}

@media (min-width: 1024px) {
    .b-gap {padding: 0 80px;}
}

/* TYPO */
.h1, .h2, p {display: inline-block; vertical-align: top; width: 100%; margin: 0; padding: 0; font-weight: normal;}
.h1 {font-size: 29px; line-height: 1.5em;}
.h2 {font-size: 14px; line-height: 1.5em; color: #b06a00;}
p {font-size: 16px; line-height: 1.7em;}
strong {font-family: 'ClanOT-NarrowBold', sans-serif; font-weight: normal;}
.btn {display: inline-block; vertical-align: top; width: 100%; text-align: center; cursor: pointer;
    font-family: 'ClanOT-NarrowNews', sans-serif; font-weight: normal;
    background: transparent; border: 1px solid transparent; border-radius: 0; font-size: 14px; line-height: 14px; margin: 0; padding: 18px 9px;}
.btn-yellow {background: #ffbd59; color: #000; border-color: #fff;}
.btn-yellow:hover {background: #fdc56f;}
.btn-white {background: #ffffff; color: #000;}
.btn-white:hover {background: #f2f2f2;}


@media (min-width: 1024px) {
    body {font-size: 22px;}
    .h1 {font-size: 48px;}
    .h2 {font-size: 16px;}
    p {font-size: 22px;}
}

/* HEADER */
.header {position: fixed; z-index: 100; top: 0; left: 0; right: 0; background-color: transparent; transition: background-color .2s linear 0s;}
.header.fixed {background-color: #fff;}
.header .logo {display: block; width: 120px;}
.header .logo picture,
.header .logo picture img {aspect-ratio: 600 / 155;}

.header .grid {display: grid; grid-template: 72px / 1fr 48px; align-items: center;}

@media (max-width: 1023px) {

}
@media (min-width: 1024px) {
    .header .logo {width: 100%;}
    .header .grid {grid-template: 92px / 150px 1fr;}
    .cta-nav-in {display: block;}
}
@media (min-width: 1200px) {
    .header .grid {grid-template: 92px / 190px 1fr;}
}

/* NAV */
.cta-nav-in {width: 48px; height: 100%; display: block; background: transparent; text-align: center; margin: 0; padding: 0; border: none;}
.cta-nav-in svg {display: inline-block; vertical-align: top; width: 36px; height: inherit; color: #000;}
.cta-nav-out {position: fixed; z-index: 999; left: 0; top: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, .5); cursor: pointer; border: none; margin: 0; padding: 0;}
.nav {display: none}
.nav-inner a svg {display: inline-block; vertical-align: top; width: 20px; color: #ffbd59;}
@media (max-width: 1023px) {
    .cta-nav-in {display: block;}
    .cta-nav-out {display: none;}
    .nav {display: grid; align-items: center; background: #fff; position: fixed; z-index: 1000; top: 0; bottom: 0; right: -80%; width: 80%; transition: right .2s linear 0s;}
    .nav.in {right: 0;}
    .nav-inner {display: grid;}
    .nav-inner a {font-size: 20px; padding: 14px;}
    .nav-inner a svg {height: 26px;}
}
@media (min-width: 1024px) {
    .cta-nav-in,
    .cta-nav-out {display: none !important;}
    .nav {display: grid; justify-self: end;}
    .nav-inner {display: grid; grid-auto-flow: column; gap: 10px;}
    .nav-inner a {font-size: 14px; line-height: 37px;}
    .nav-inner a:hover {color: #ffbd59;}
    .nav-inner a svg {height: 37px;}
}
@media (min-width: 1200px) {
    .nav-inner {gap: 20px;}
    .nav-inner a {font-size: 16px;}
}

/* FOOTER */
.footer {background: #000000; color: #fff; text-align: center; padding: 40px 0;}
.footer .accent {color: #ffbd59;}
.footer .grid {display: grid; gap: 40px;}
.footer .grid .info {display: grid; gap: 40px; margin: 0 auto; max-width: 1024px;}
@media (min-width: 1024px) {
    .footer {padding: 50px 0;}
    .footer .grid {gap: 50px;}
    .footer .grid .info {grid-template: auto / repeat(2, 1fr);}
}

/* MODULES */
.module-hero {position: relative; background: #d3d5dd url('../images/hero.jpg') no-repeat center bottom / cover;}
.module-hero .inner {}
.module-hero .grid {display: grid; gap: 10px;}
.module-hero .grid .buttons {display: grid; gap: 20px;}
.module-hero .heading-desktop {display: none;}
@media (max-width: 767px) {
    .module-hero .inner {padding: 100px 0 70px;}
    .module-hero .desc br {display: none;}
    .module-hero .grid .buttons {padding-top: 100px;}
}
@media (min-width: 768px) {
    .module-hero {background-image: url('../images/hero-desktop.jpg');}
    .module-hero .inner {padding: 170px 0 200px;}
    .module-hero .grid .buttons {padding-top: 50px;}
    .module-hero .heading {display: none;}
    .module-hero .heading-desktop {display: block;}
    .module-hero .buttons {justify-self: start; grid-template: auto / repeat(2, 1fr); gap: 30px;}
    .module-hero .buttons .btn {min-width: 270px;}
}

.module-meet-the-team {padding: 30px 12px;}
.module-meet-the-team .inner {display: grid; gap: 20px; align-items: start;}
.module-meet-the-team .grid {display: grid; gap: 20px; align-items: start; background: #ffbd59;}
.module-meet-the-team .item {display: grid; gap: 10px; width: 100%; align-items: start; padding: 12px;}
.module-meet-the-team .item picture {max-width: 130px}
.module-meet-the-team .item picture,
.module-meet-the-team .item img {aspect-ratio: 640 / 849;}
.module-meet-the-team .item .btn {max-width: 80%}
.module-meet-the-team .card {display: grid; gap: 10px; align-self: center;}
@media (min-width: 768px) {
    .module-meet-the-team .inner {gap: 50px;}
    .module-meet-the-team .grid {grid-auto-flow: column; gap: 40px; padding: 12px 12px 12px 24px;}
    .module-meet-the-team .item {grid-template: auto / 1fr; gap: 20px; padding: 0;}
    .module-meet-the-team .item picture {max-width: 100%;}
    .module-meet-the-team .card {gap: 20px;}
}

.module-about-us {padding: 30px 12px;}
.module-about-us .grid {display: grid; align-items: center; gap: 35px;}
.module-about-us .grid .inner {display: grid; gap: 10px;}
.module-about-us .grid picture {max-width: 80%}
.module-about-us .grid picture,
.module-about-us .grid img {aspect-ratio: 1440 / 1360;}
@media (min-width: 768px) {
    .module-about-us {padding: 0 80px 30px 0;}
    .module-about-us .grid {grid-template: auto / repeat(2, 1fr); gap: 0;}
    .module-about-us .grid .inner {grid-column: 2 / span 1; grid-row: 1 / span 1; gap: 50px; padding-left: 70px;}
    .module-about-us .grid .picture {grid-column: 1 / span 1; grid-row: 1 / span 1;}
    .module-about-us .grid picture {max-width: 100%}
}

.module-global-structure {padding: 30px 12px;}
.module-global-structure .grid {display: grid; align-items: center; gap: 35px;}
.module-global-structure .grid .inner {display: grid; gap: 10px;}
.module-global-structure .grid picture {max-width: 80%}
.module-global-structure .grid picture,
.module-global-structure .grid img {aspect-ratio: 1440 / 1360;}
@media (min-width: 768px) {
    .module-global-structure {padding: 30px 0 30px 80px;}
    .module-global-structure .grid {grid-template: auto / repeat(2, 1fr); gap: 0;}
    .module-global-structure .grid .inner {gap: 50px; padding-right: 70px;}
    .module-global-structure .grid picture {max-width: 100%}
}


.module-future-outlook {padding: 30px 12px;}
.module-future-outlook .grid {display: grid; align-items: center; gap: 35px;}
.module-future-outlook .grid .inner {display: grid; gap: 10px;}
.module-future-outlook .grid picture {max-width: 80%}
.module-future-outlook .grid picture,
.module-future-outlook .grid img {aspect-ratio: 1440 / 1360;}
@media (min-width: 768px) {
    .module-future-outlook {padding: 30px 80px 0 0;}
    .module-future-outlook .grid {grid-template: auto / repeat(2, 1fr); gap: 0;}
    .module-future-outlook .grid .inner {grid-column: 2 / span 1; grid-row: 1 / span 1; gap: 50px; padding-left: 70px;}
    .module-future-outlook .grid .picture {grid-column: 1 / span 1; grid-row: 1 / span 1;}
    .module-future-outlook .grid picture {max-width: 100%}
}

.module-what-we-do {padding: 30px 0;}
.module-what-we-do .inner {display: grid; gap: 20px; align-items: start;}
.module-what-we-do .grid {display: grid; justify-items: center; gap: 20px; align-items: start;}
.module-what-we-do .item {display: grid; gap: 10px; width: 100%; align-items: start;}
.module-what-we-do .item .picture {border: 2px solid #b06a00; border-radius: 50%; width: 90px; height: 90px;
    background: transparent no-repeat center center; background-size: 45% auto;}
@media (min-width: 768px) {
    .module-what-we-do .inner {gap: 50px;}
    .module-what-we-do .grid {grid-auto-flow: column; gap: 40px;}
    .module-what-we-do .grid-under {padding: 0 10%;}
    .module-what-we-do .item {gap: 20px;}
    .module-what-we-do .item .picture {width: 120px; height: 120px;}
}