/* ==========================================================================
   Fonts — FS Emeric
   ========================================================================== */
@font-face {
  font-family: "FS Emeric";
  src:
    url("../fonts/FSEmericWeb-Light.woff2") format("woff2"),
    url("../fonts/FSEmericWeb-Light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "FS Emeric";
  src: url("../fonts/FSEmericWeb-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "FS Emeric";
  src: url("../fonts/FSEmericWeb-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "FS Emeric";
  src: url("../fonts/FSEmericWeb-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "FS Emeric";
  src:
    url("../fonts/FSEmericWeb-Bold.woff2") format("woff2"),
    url("../fonts/FSEmericWeb-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   Tokens (from Figma)
   ========================================================================== */
:root {
  --gib-dark-gray: #4d555b;
  --gib-medium-gray: #acb2b6;
  --gib-yellow: #ffcb05;
  --gib-cream: #fff3d3;
  --white: #ffffff;

  --font: "FS Emeric", "Helvetica Neue", Arial, sans-serif;

  /* Mobile-first type scale (Phone/*) */
  --fs-subheader: 24px;
  --lh-subheader: 1.2;
  --fs-sub3: 20px;
  --lh-sub3: 1.2;
  --fs-body: 16px;
  --lh-body: 1.2;

  --page-gutter: 32px;
  --content-max: 1200px;

  /* Angled top-left cut on the image: 296.41 / 838.5 of the height */
  --image-cut: 35.349%;
}

@media (min-width: 768px) {
  :root {
    /* Desktop/* */
    --fs-subheader: 28px;
    --lh-subheader: 36px;
    --fs-sub3: 24px;
    --lh-sub3: 28px;
    --fs-body: 20px;
    --lh-body: 24px;

    --page-gutter: clamp(40px, 8.333vw, 120px);
  }
}

/* ==========================================================================
   Base
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font);
  font-weight: 300;
  color: var(--gib-dark-gray);
  background: var(--gib-cream);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
p,
ul {
  margin: 0;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

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

a:hover {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
  border-radius: 2px;
}

/* ==========================================================================
   Overview (cream section)
   ========================================================================== */
.overview {
  background: var(--gib-cream);
}

.overview__inner {
  max-width: calc(var(--content-max) + var(--page-gutter) * 2);
  margin: 0 auto;
  padding: 40px var(--page-gutter) 0;
}

.overview__content {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding-bottom: 51px;
}

.overview__logo {
  width: 142px;
}

.overview__logo img {
  width: 100%;
}

.overview__divider {
  width: 100%;
  height: 0;
  margin: 0;
  border: 0;
  border-top: 1px solid var(--gib-dark-gray);
}

.overview__intro {
  font-size: var(--fs-subheader);
  line-height: var(--lh-subheader);
  font-weight: 300;
}

/* One empty line between paragraphs, as in the design */
.overview__intro p + p {
  margin-top: calc(var(--fs-subheader) * 1.2);
}

/* Contact */
.contact__heading {
  margin-bottom: 20px;
  font-size: var(--fs-sub3);
  line-height: var(--lh-sub3);
  font-weight: 500;
}

.contact__line {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 300;
}

.contact__line + .contact__line {
  margin-top: 12px;
}

.contact__line strong {
  font-weight: 500;
}

.contact__line a {
  overflow-wrap: anywhere;
}

.contact__line.line_media {
  margin-top: 24px;
}

/* Image — hidden on mobile (not in the mobile design) */
.overview__media {
  display: none;
}

.overview__image {
  width: 100%;
  aspect-ratio: 520 / 838.5;
  object-fit: cover;
  background: var(--gib-medium-gray); /* visible until the image loads */
  -webkit-clip-path: polygon(0 var(--image-cut), 100% 0, 100% 100%, 0 100%);
  clip-path: polygon(0 var(--image-cut), 100% 0, 100% 100%, 0 100%);
}

@media (min-width: 768px) {
  .overview__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 60px;
  }

  .overview__content {
    gap: 49px;
  }

  .overview__logo {
    width: min(282px, 100%);
  }

  .overview__media {
    display: block;
    display: flex;
    align-self: start;
    justify-self: end;
    width: min(520px, 100%);
  }
}

@media (min-width: 1280px) {
  .overview__media {
    align-self: end;
  }
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  background: var(--gib-dark-gray);
  color: var(--white);
}

.site-footer__inner {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: calc(var(--content-max) + var(--page-gutter) * 2);
  margin: 0 auto;
  padding: 34px var(--page-gutter);
}

.site-footer__divider {
  width: 100%;
  height: 0;
  margin: 0;
  border: 0;
  border-top: 1px solid var(--gib-yellow);
}

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 24px;
  padding: 0;
  list-style: none;
  font-size: 12px;
  line-height: 20.25px;
  font-weight: 400;
}

.site-footer__copyright {
  font-size: 14px;
  line-height: 18px;
  font-weight: 300;
  color: var(--gib-medium-gray);
  max-width: 900px;
}

.site-footer__copyright2 {
  font-size: 14px;
  line-height: 15.75px;
  font-weight: 300;
  color: var(--gib-medium-gray);
}

/* ==========================================================================
   Print
   ========================================================================== */
@media print {
  .overview__media {
    display: none;
  }
}