@charset "UTF-8";
/* commissioner-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Commissioner";
  font-style: normal;
  font-weight: 400;
  src: url("../assets/fonts/commissioner-v24-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* commissioner-800 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Commissioner";
  font-style: normal;
  font-weight: 800;
  src: url("../assets/fonts/commissioner-v24-latin-800.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default padding */
ul[class],
ol[class] {
  padding: 0;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
ul[class],
ol[class],
figure,
blockquote,
dl,
dd {
  margin: 0;
}

/* Set core root defaults */
html {
  scroll-behavior: smooth;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
  overflow-x: hidden;
}

/* Remove list styles on ul, ol elements with a class attribute */
ul[class],
ol[class] {
  list-style: none;
}

/* A elements that don’t have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

/* Remove all animations and transitions for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01s !important;
    scroll-behavior: auto !important;
  }
}
:root {
  --red: #f94f4f;
  --red-hover: #ff9393;
  --bg-black: #191921;
  --bg-black-hover: #434356;
  --white: #ffffff;
  --text-black: #000000;
  --section-margin: clamp(6rem, 4.5915rem + 6.0094vw, 10rem);
  --container-max-width: 69.375rem;
  --container-width: 90%;
}

body {
  font-size: clamp(0.9375rem, 0.7232rem + 0.4464vw, 1.125rem);
  font-family: "Commissioner", sans-serif;
  line-height: 1.7em;
  color: var(--text-black);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: 1em;
  font-weight: 800;
}

h2 {
  font-size: clamp(2rem, 0.2857rem + 3.5714vw, 3.5rem);
  line-height: 1.1em;
}

h3 {
  font-size: clamp(0.9375rem, 0.8275rem + 0.4695vw, 1.25rem);
  line-height: 1.6em;
}

.btn--solid {
  display: inline-block;
  padding: 1em 1.5em;
  text-decoration: none;
  color: var(--white);
  font-size: 1.125rem;
  font-weight: 800;
  line-height: 1em;
  cursor: pointer;
}

.btn--red {
  background-color: var(--red);
}
.btn--red:hover {
  background-color: var(--red-hover);
}

.btn--black {
  background-color: var(--bg-black);
}
.btn--black:hover {
  background-color: var(--bg-black-hover);
}

.btn--text {
  color: var(--red);
  background-color: transparent;
  padding: 0.5rem 0;
  border-bottom: solid 2px var(--red);
}
.btn--text:hover {
  color: var(--red-hover);
  border-color: var(--red-hover);
}

.container {
  max-width: var(--container-max-width);
  width: var(--container-width);
  margin: 0 auto;
}

.accent-text {
  color: var(--red);
}

section {
  max-width: 1440px;
  margin: 0 auto;
}

header {
  position: relative;
}
header .nav-toggle {
  position: absolute;
  right: 0;
  background: none;
  border: none;
}
header .nav-toggle svg.close {
  visibility: hidden;
  height: 0;
  position: absolute;
}
header:has(.main-nav.visible) svg.close {
  visibility: visible;
  height: auto;
  position: relative;
}
header:has(.main-nav.visible) svg.hamburger {
  visibility: hidden;
  height: 0;
  position: absolute;
}
header .navbar {
  position: relative;
  padding: clamp(2.5rem, 1.4862rem + 4.3257vw, 3.5625rem) 0;
}
header .main-nav {
  visibility: hidden;
  height: 0;
  position: absolute;
}
header .main-nav.visible {
  background-color: var(--bg-black);
  visibility: visible;
  height: auto;
  top: 100%;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  padding: 2rem 1.5rem 1.5rem;
  z-index: 1000;
}
header .main-nav.visible .nav__list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  text-align: center;
}
header .main-nav.visible .btn--black {
  background-color: var(--red);
}
header .main-nav.visible .btn--black:hover {
  background-color: var(--red-hover);
}
header .nav__item a {
  text-decoration: none;
  color: var(--white);
}
header .nav__item a:hover {
  font-weight: 700;
}
header .red-bg {
  position: absolute;
}

.hero {
  margin-bottom: var(--section-margin);
}
.hero h1 {
  font-size: clamp(2.5rem, 1.6197rem + 3.7559vw, 5rem);
  margin: 3.5rem 0 clamp(1rem, 0.4938rem + 2.1596vw, 2.4375rem);
}
.hero p {
  margin-bottom: clamp(2.5rem, 2.3239rem + 0.7512vw, 3rem);
}
.hero a {
  padding: 1.5em 2.25em;
}
.hero .bg-image img {
  width: 100%;
}

.strategic {
  background-color: var(--bg-black);
  margin: var(--section-margin) 0;
}
.strategic .content {
  width: var(--container-width);
  margin: 0 auto;
  color: var(--white);
  padding: 4.5rem 0;
  position: relative;
}
.strategic h2 {
  margin-bottom: 1.5rem;
}
.strategic p {
  margin-bottom: 2.5rem;
}
.strategic .pattern {
  width: 4rem;
  height: 2.5rem;
  position: absolute;
  left: 0; /* calc(calc(100% - var(--container-width)) / 2) */
  top: -7%;
}
.strategic .image img {
  width: 100%;
}

.approach {
  margin: var(--section-margin) 0;
  margin-top: calc(-1 * var(--section-margin));
  position: relative;
  color: var(--white);
  padding: 6rem 0;
}
.approach .red-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--red);
  z-index: -1;
}
.approach h2 {
  margin-bottom: 3rem;
}
.approach .approach__container {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}
.approach .approach__item {
  position: relative;
  z-index: 1;
}
.approach .approach__item > * {
  z-index: 1;
  padding-left: clamp(1rem, -2.1429rem + 6.5476vw, 3.75rem);
}
.approach .approach__item .number {
  padding-left: 0;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  font-size: 5rem;
  font-weight: 800;
  line-height: 1.1em;
  opacity: 0.25;
}
.approach .approach__item h3 {
  margin: 2.75rem 0 1rem;
}
.approach .approach__item p {
  max-width: 30ch;
}

.slides {
  margin-top: calc(-1 * var(--section-margin));
}
.slides .slide-title,
.slides .slide {
  visibility: hidden;
  height: 0;
  position: absolute;
}
.slides .slide-title.visible,
.slides .slide.visible {
  visibility: visible;
  height: auto;
  position: relative;
}
.slides .slide {
  z-index: 1;
}
.slides .slide img {
  width: 100%;
}
.slides .slide-caption {
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 2;
  padding: clamp(2rem, 1.2077rem + 3.3803vw, 4.25rem) clamp(2rem, -0.7289rem + 11.6432vw, 9.75rem);
  color: var(--white);
  text-align: end;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, var(--text-black) 100%);
}
.slides .slider {
  background-color: var(--bg-black);
  color: var(--white);
  padding: clamp(4rem, 2.0634rem + 8.2629vw, 9.5rem) 0;
}
.slides h2 {
  margin-bottom: clamp(1.5rem, 0.9058rem + 2.5352vw, 3.1875rem);
  line-height: clamp(2.5rem, 0.5rem + 100vw, 4rem);
}
.slides .btn--slider {
  background: transparent;
  border: none;
  cursor: pointer;
}
.slides .btn--slider:hover svg g {
  stroke: var(--red-hover);
}

footer {
  margin: var(--section-margin) 0;
}
footer h2 {
  margin-bottom: 3rem;
}
footer .pattern {
  visibility: hidden;
  height: 0;
  position: absolute;
}

@media (min-width: 48rem) {
  header .nav-toggle {
    height: 0;
    visibility: hidden;
  }
  header .navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 1rem;
  }
  header .main-nav {
    visibility: visible;
    height: auto;
    position: relative;
    display: flex;
    align-items: center;
    gap: clamp(1.875rem, -0.3393rem + 4.6131vw, 3.8125rem);
  }
  header .nav__list {
    display: flex;
    gap: clamp(1.25rem, 0.3929rem + 1.7857vw, 2rem);
  }
  header .red-bg {
    top: 0;
    bottom: 0;
    right: 0;
    left: 40%;
    background-color: var(--red);
    z-index: -1;
  }
  .hero {
    margin-bottom: 0;
    position: relative;
  }
  .hero .bg-image {
    position: absolute;
    right: 0;
    z-index: -1;
  }
  .hero .container > * {
    max-width: clamp(24.875rem, 14.0179rem + 22.619vw, 34.375rem);
  }
  .hero .container {
    min-height: clamp(37.875rem, 24.0179rem + 28.869vw, 50rem);
    place-content: center;
  }
  .hero h1 {
    margin-top: 0;
  }
  .strategic {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    margin-top: 0;
  }
  .strategic .content {
    width: 72%;
    place-content: start;
    padding-top: var(--section-margin);
  }
  .strategic .pattern {
    top: var(--section-margin);
    left: calc(-1 * var(--container-width) / 2);
  }
  .approach .container {
    display: flex;
  }
  .approach h2 {
    width: clamp(17.5625rem, -0.9375rem + 38.5417vw, 33.75rem);
    color: var(--text-black);
    z-index: 3;
  }
  .approach .approach__container {
    margin-top: calc(-1 * var(--section-margin));
    flex-grow: 1;
    position: relative;
    padding: 0 2.5rem;
    z-index: 2;
    max-width: 57vw;
  }
  .approach .red-bg {
    top: calc(-1 * var(--section-margin));
    bottom: calc(-1 * var(--section-margin));
    right: calc(-1 * (100% - var(--container-width)));
  }
  .approach .approach__item p {
    max-width: 40ch;
  }
  .approach,
  .approach__container {
    z-index: 1;
  }
  .slides,
  .slider {
    z-index: 900;
  }
  .slides {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: start;
  }
  .slides .slider {
    width: min(51vw, 46rem);
    margin-right: -8vw;
  }
  .slides .slider .container {
    margin-left: 5vw;
  }
  .slides .slide-frame {
    width: min(57vw, 57%);
  }
  footer .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  footer h2 {
    margin-bottom: 0;
    max-width: 50%;
  }
}
@media (min-width: 64rem) {
  header .red-bg {
    left: 50%;
  }
  .hero h1 {
    line-height: 1.1em;
  }
  .strategic {
    grid-template-columns: 51% 49%;
    margin-inline: auto;
  }
  .strategic .content {
    width: 63%;
    padding-top: var(--section-margin);
  }
  .strategic .pattern {
    top: clamp(9rem, 0.3846rem + 13.4615vw, 12.5rem);
  }
  .approach {
    margin-inline: auto;
  }
  .approach .red-bg {
    left: -10rem;
    right: calc(-5.8 * (100% - var(--container-width)) / 2);
  }
  .approach .approach__item p {
    max-width: 43ch;
  }
  .slides {
    margin-inline: auto;
  }
  .slides .slider {
    z-index: 950;
  }
  .slides .slider .container {
    margin-left: min(10.3125rem, 11vw);
    max-width: 60%;
  }
  footer {
    position: relative;
  }
  footer .pattern {
    visibility: visible;
    height: auto;
    left: -67.5px;
    top: 50%;
  }
}