/***
=Root variables
***/

:root {
  --clr-dark: 330 2% 19.6%;
  --clr-dark: 0 0% 13%;
  --clr-dark-40: 330 2% 60.6%;
  --clr-dark-20: 330 2% 80.6%;
  --clr-dark-80: 0 0% 20.6%;

  --clr-light: 0 0% 100%;
  --clr-secondary: 192 68.8% 40.2%;
  --clr-accent: 48 91.3% 59.2%;

  --clr-bg: var(--clr-light);
  --clr-fg: var(--clr-dark);
  --clr-bg-inverted: var(--clr-dark);
  --clr-fg-inverted: var(--clr-light);
  --alpha: .95;

  --clr-link: var(--clr-secondary);
  --clr-link-state: var(--clr-accent);
  --clr-link-inverted: var(--clr-dark-40);
  --clr-link-inverted-light: var(--clr-dark-20);

  --clr-hero-bg: transparent;
  --clr-hero-bg1: hsl(5 67% 80% / 0%);
  --clr-hero-bg2: hsl(20 40% 30% / 0%);
  --gradient-deg: 35deg;
  --gradient-break: clamp(60%, 6vw + .1rem, 50%);

  accent-color: hsl(var(--clr-secondary));

  --ff-body: 'Lato', Helvetica, Arial, Lucida, sans-serif;
  --ff-title: 'Montserrat', Helvetica, Arial, Lucida, sans-serif;

  --ts: 1.25; /* Type scale */
  --fs-base: clamp(16px, 1.5vw + .1rem, 18px);
  --fs-body: var(--fs-base);
  --fs-small: calc(var(--fs-body) / var(--ts));
  --fs-h5: calc(var(--ts) * var(--fs-body));
  --fs-h4: calc(var(--ts) * var(--fs-h5));
  --fs-h3: calc(var(--ts) * var(--fs-h4));
  --fs-h2: calc(var(--ts) * var(--fs-h3));
  --fs-h1: calc(var(--ts) * var(--fs-h2));

  --fw-normal: 400;
  --fw-medium: 500;
  --fw-bold: 600;
  --fw-black: 800;

  --logo-size: 10.9375rem;
  --footer-logo-size: 16rem;
  --logo-margin: calc(1rem / 2);

  --gap: 1rem;

  /*
  =Break Point Sizes
  */
  --min-width: 20rem; /* 320px */
  --max-width-content: 38rem;
  --max-width-mobile: 48rem;
  --max-width-site: 60rem;
}

/* Page specific styles */
.job-integration,
.recruitment,
.contact,
.about {
  --clr-accent: var(--clr-secondary);
}

.business-development {
  /* --clr-page-accent: var(--clr-accent); */
}

/***
=Reset Rules
***/

/* Use border box as default box sizing to simplify calculations */
*, *:before, *:after { box-sizing: border-box; }

/* Enable responsive images */
img,
picture {
  display: block;
  width: 100%;
  max-width: 100%;
}

/* Prevent italic icons */
i { font-style: normal; }

/* Reset margins */
body,
figure,
picture,
h1, h2, h3, h4, h5, h6 {
  margin: 0;
}

/* Remove bullets and padding from lists */
ul[class] {
  list-style: none;
}
ul[class*='nav'],
ul[class*='links'] {
  display: flex;
}

/* Enable smooth scroll */
html:focus-within,
html { scroll-behavior: smooth; }

/* Basic body reset */
body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.7;
}
/* Default link styles */
a {
  transition: color .15s ease-out;
}

a:not([class]) {
  color: hsl(var(--clr-link));
  text-decoration-skip-ink: auto;
}

a:active,
a:hover,
a:focus,
a:focus-visible,
a:visited {
  text-decoration: inherit;
}

/* Inherit font for form elements */
input,
button,
textarea,
select {
  font: inherit;
}

/* Enable users to opt out of animations and transitions */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/***
=Utility classes
**/

/* Generic wrapper */
.wrapper {
  margin-inline: auto;
  padding-inline: 2em;
  width: 100%;
  max-width: var(--max-width, 80rem);
  min-width: var(--min-width);
  ;
}

/* Hide element visually but keep in DOM */
.skip,
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: 0;
  clip: rect(0, 0, 0, 0);
  clip-path: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip:focus-visible,
.skip:focus {
  top: 0;
  left: 50%;
  transform: translate(-50%, 0%);
  width: auto;
  height: auto;
  padding-block: .25em;
  padding-inline: 1em;
  clip: initial;
  clip-path: initial;
  white-space: initial;
  border: 0;
  background-color: hsl(var(--clr-bg));
  color: hsl(var(--clr-link));
  font-family: var(--ff-title);
  text-transform: uppercase ;
  z-index: 9999;
}

html,
body {
  background-color: hsl(var(--clr-bg));
  color: hsl(var(--clr-fg));
  font-family: var(--ff-body);
  font-size: var(--fs-base);
  min-width: var(--min-width);
  overflow-x: hidden;
}

/*
 * Stretch content vertically, anchoring the footer to the bottom of the
 * viewport even if main content is too short to push it down (sticky
 * footer).
 */
.layout {
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  overflow-x: hidden;
  position: relative;
}

h1:not([class]) {
  text-align: center;
}

h1,
h2,
h3,
h4,
h5 {
  font-family: var(--ff-title);
  font-weight: var(--fw-black);
  text-transform: uppercase;
  line-height: 1.3;
  margin-block-start: 1em;
  word-break: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
}

h4,
h5 {
  font-weight: var(--fw-medium);
}

h1 { font-size: var(--fs-h2); }
h2 { font-size: var(--fs-h3); }
h3 { font-size: var(--fs-h4); }
h4 { font-size: var(--fs-h5); }
h5 { font-size: var(--fs-body); }
small { font-size: var(--fs-small); }

.inverted {
  color: hsl(var(--clr-fg-inverted));
  background-color: hsl(var(--clr-bg-inverted));
}

.inverted a,
.inverted a:visited {
  color: hsl(var(--clr-link-inverted));
  text-decoration: none;
}

.inverted a:active,
.inverted a:hover,
.inverted a:focus,
.inverted a:focus-visible {
  color: hsl(var(--clr-link-inverted-light));
}

.inverted a.current {
  font-weight: var(--fw-bold);
  color: hsl(var(--clr-link-inverted-light));
}

.intro-img {
  max-width: var(--max-width-content);
  margin-inline: auto;
  margin-block-start: 2rem;
}

.content {
  max-width: var(--max-width-content);
  margin-inline: auto;
  padding-inline: var(--gap);
}

.footer,
.header {
  padding: 0.01px 0;  /* Remove gap between body and html element */
  padding-block: 0.01px;  /* Remove gap between body and html element */
}

.header {
  width: 100%;
}

.footer {
  margin-block-start: 2rem;
}

.header__inner,
.footer__inner {
  background-color: transparent;
  max-width: var(--max-width-site);
  margin-inline: auto;
  padding-block: 0;
  padding-inline: var(--gap);
}

.footer__title {
  font-size: var(--fs-h5);
}

.header-logo {
  max-width: clamp(calc(var(--logo-size) - 2rem), 5vw + .1rem, var(--logo-size));
}
.footer-logo {
  margin-block: 1rem;
}
.footer-logo__link {
  margin-inline: auto;
  max-width: var(--footer-logo-size);
}

[class$=-logo__link] {
  display: block;
  border: 0;
  padding-block: var(--logo-margin, 1rem);
  padding-inline: var(--logo-margin, 1rem);
}

.header__contact {
  width: 100%;
  display: block;
}

.header-contact__items {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  justify-items: center;
  align-items: baseline;
  gap: 0.25em 2em;
  margin-block: calc(var(--gap) / 2) calc(var(--gap) / 3);
  margin-inline: auto;
}

.header-contact__item {
  font-size: var(--fs-small);
  line-height: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.header-contact__item:before {
  display: inline-block;
  content: '';
  aspect-ratio: 1;
  margin-inline-end: .5em;
}

.header-contact__item--email:before {
  padding-right: 1.5em;
  padding-top: 1em;
  background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="hsl(330 2% 40.6%)" d="M19.5 6.75h-15l7.49 7.5 7.51-7.5z"/><path fill="hsl(330 2% 40.6%)" d="M12 15.21L3.75 7.5V18h16.5V7.5L12 15.21z"/></svg>') 50% 0% no-repeat;
}

.header-contact__item--phone:before {
  padding-right: 1.5em;
  padding-top: 1em;
  background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="hsl(330 2% 40.6%)" d="M16.14 14.05a1.2 1.2 0 00-1.63.32c-.6.73-1.32 1.93-4.05-.8-2.73-2.73-1.55-3.48-.83-4.08a1.2 1.2 0 00.33-1.62l-1.7-2.6c-.23-.33-.53-.86-1.23-.76-.7.1-2.53 1.13-2.53 3.38s1.78 5 4.2 7.43c2.43 2.43 5.19 4.18 7.41 4.18 2.23 0 3.3-2 3.38-2.5.08-.5-.42-1-.75-1.23l-2.6-1.72z"/></svg>') top left no-repeat;
}

.header__inner {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  width: 100%;
}
.header__inner > * {
  /* outline: solid 2px cadetblue; */
}

.primary-nav {
  /* outline: solid 2px goldenrod; */
  margin-inline: auto 0;
  /* display: flex; */
  /* position: relative; */
  /* margin-inline: auto; */
  padding-inline-end: var(--gap);
  overflow-x: hidden;
}

.primary-nav__toggle {
  display: none;
}

.primary-nav__links {
  gap: .5em 1.25em;
  padding-block: calc(var(--gap) / 2);
}

/* Mobile navigation */
@media (max-width: 768px) {  /* Use pixels to enable interval using both min and max width. */
  .primary-nav {
    padding-inline-end: 0;
  }

  .primary-nav__toggle {
    background-color: transparent;
    color: hsl(var(--clr-fg-inverted));
    cursor: pointer;
    display: block;
    margin-inline: auto;
    margin-block-end: calc(var(--gap) * 0);
    aspect-ratio: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 0;
    width: calc(var(--gap) * 3);
    font-size: 3ch;
  }

  .primary-nav__toggle:focus,
  .primary-nav__toggle:focus-visible {
    border-width: .1em;
  }

  .primary-nav__links {
    background-color: hsl(var(--clr-bg-inverted) / 96%);
    position: absolute;
    flex-direction: column;
    margin-block-start: .3rem;
    padding-inline-start: 0;
    padding: calc(var(--gap) * 3) calc(var(--gap) * 2);
    width: 100%;
    min-width: 12rem;
    max-width: 25rem;
    right: 0;
    transform: translateX(0%);
    z-index: 1;
    font-size: var(--fs-h5);
    letter-spacing: .025em;
    gap: var(--gap);
    /* gap: .5em 1.25em;
    padding-block: calc(var(--gap) / 2); */
  }

  .primary-nav__link {
    display: block;
    padding-inline: calc(var(--gap) * 1);
    padding-block: calc(var(--gap) / 2);
  }

  /* Hide navigation when closed */
  .primary-nav__toggle[aria-expanded=false] + .primary-nav__links {
    transform: translateX(100%);
  }

  /* Prevent transition effect when resizing the viewport.
    * Class with transition is added when nav toggle is clicked and removed on
    * transition end.
    */
  .nav-transition {
    transition: transform .3s ease-in-out;
  }

  .hero-buttons {
    display: flex;
  }

  .hero-video__poster {
    background-size: cover;
    background-repeat: no-repeat;
    height: 100vh;
    object-fit: cover;
    max-height: clamp(60rem, 1.5vw + 1rem, 67.5rem);
    max-width: clamp(106.6666666666667rem, 1.5vw + 1rem, 120rem);  /* 1920 px */
  }

  .hero__video {
    display: none;
  }
}


/***
=Hero
***/

.header--home {
  background-color: hsl(var(--clr-bg-inverted) / 90%);
  position: absolute;
  z-index: 999;
}

.hero-video__wrapper {
  background-color: black;
  width: 100%;
  display: flex;
  min-height: 20rem;
  position: relative;
}

.hero__video {
  height: 100vh;
  margin-inline: auto;
  object-fit: cover;
  width: 100%;
  position: relative;
  top: 100vh;
  transform: translateY(-100vh);
  z-index: 1;
  max-height: clamp(60rem, 1.5vw + 1rem, 67.5rem);
  max-width: clamp(106.6666666666667rem, 1.5vw + 1rem, 120rem);  /* 1920 px */
}

.hero-video__title {
  padding: .5em;
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 800;
  color: hsl(var(--clr-light));
  font-size: var(--fs-h1);
  text-shadow: .025em .025em .1em hsl(var(--clr-dark) / 60%);
  background-color: hsl(var(--clr-dark) / 80%);
  min-width: 30%;
  word-wrap: normal;
}

.hero-buttons {
  position: absolute;
  z-index: 99;
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: center;
  gap: calc(var(--gap) * 1) var(--gap);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -30%);
  max-width: 20rem;
  min-width: 16rem;
  
}

.hero-button {
  background: hsl(var(--clr-dark-80)) linear-gradient(0deg, hsl(var(--clr-dark-80)), hsl(var(--clr-dark)) 50%);
  border: 0;
  font-size: var(--fs-h4);
  text-align: center;
  text-transform: uppercase;
  padding: .65rem 1.2rem .55rem;
  text-decoration: none;
  box-shadow: 0 .1em .3em hsl(var(--clr-dark) / 98%);
  transition: background .2s ease-out, color .4s ease-out;
  accent-color: hsl(var(--clr-accent));
  color: hsl(var(--clr-accent));
}

.hero-button--job-integration {
  --clr-accent: var(--clr-secondary);
}
.hero-button--recruiting {
  --clr-accent: var(--clr-light);
}

.hero-button:active,
.hero-button:hover {
  color: hsl(var(--clr-dark));
  background: hsl(var(--clr-accent));
}

.hero {
  --clr-hero-bg: hsl(var(--clr-accent));
  --gradient-break: clamp(60%, 6vw + .1rem, 50%);
  position: relative;
  background: linear-gradient(var(--gradient-deg), var(--clr-hero-bg1) var(--gradient-break), var(--clr-hero-bg2) calc(var(--gradient-break) + 2px));
  background-repeat: no-repeat;
}

.hero__inner {
  padding-block: calc(var(--gap) * 2);
  padding-inline: calc(var(--gap) * 2);
  max-width: var(--max-width-site);
  margin-inline: auto;
}

.hero__title {
  margin-block-start: 0;
  line-height: 1;
  letter-spacing: .01em;
  font-size: clamp(3rem, 6vw + 1rem, 4rem);

  font-family: var(--ff-title);
  font-weight: var(--fw-black);
  text-transform: uppercase;

  /* Position words in title */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  filter: drop-shadow(.04em .04em var(--clr-hero-bg1));
  color: var(--clr-hero-bg2);
}

/* Recruitment */
.hero--recruitment {
  --clr-hero-bg1: hsl(var(--clr-light));
  --clr-hero-bg2: hsl(var(--clr-dark));
  --gradient-deg: 45deg;
  --gradient-break: 60%;
}
.hero__title--recruitment {
  color: hsl(var(--clr-dark));
}

/* Business Development */
.hero--business-development {
  --clr-hero-bg1: hsl(var(--clr-accent));
  --clr-hero-bg2: hsl(var(--clr-light));
  background: var(--clr-hero-bg1);  /* Solid background color */
}
.hero__title--business-development {
  color: hsl(var(--clr-fg-inverted));
}

/* Job & Integration */
.hero--job-integration {
  --clr-hero-bg1: hsl(var(--clr-accent));
  --clr-hero-bg2: hsl(var(--clr-dark));
  --gradient-deg: 50deg;
}
.hero__title--job-integration {
  color: hsl(var(--clr-fg));
}

ul:not([class]) {
  list-style-type: none;
}

ul:not([class]) li::before {
  content: "\2022";  /* Add content: \2022 is the CSS Code/unicode for a bullet */
  color: hsl(var(--clr-accent)); /* Change the color */
  font-weight: bold; /* If you want it to be bold */
  display: inline-block; /* Needed to add space between the bullet and the text */
  width: 1.5em; /* Also needed for space (tweak if needed) */
  margin-left: -1em; /* Also needed for space (tweak if needed) */
}

h1:not([class]),
h2:not([class]),
h3:not([class]),
h4:not([class]),
h5:not([class]) {
  margin-block-end: .3em;
}

/* p:not([class]) {
  max-width: var(--max-width-content);
} */

.content h2 {
  color: hsl(var(--clr-accent));
}


/***
=Service Cards
**/
.services {
  max-width: var(--max-width-site);
  margin-inline: auto;
  margin-block-start: var(--gap);
  display: flex;
  flex-flow: column nowrap;
  gap: clamp(1rem, 6vw + .1rem, 4rem);
  padding-block-start: calc(var(--gap) * 2);
  padding-block-end: var(--gap);
  padding-inline: var(--gap);
}

.service {
  display: flex;
  flex-flow: column nowrap;
  /* gap: var(--gap); */
  /* outline: 2px solid hsl(var(--clr-accent)); */
  max-width: calc(var(--max-width-content) / 2);
  margin-inline: auto;
}

.service--about {
  /* max-width: calc(calc(var(--max-width-section) / 1.5) / 2.75); */
  max-width: calc(var(--max-width-content) / 1.5);
}
.service--business-development {
  text-align: center;
}

.service__title {
  margin-inline: auto;
  font-size: var(--fs-h5);
  font-weight: var(--fw-medium);
}

.service__icon {
  margin-block-end: var(--gap);
  margin-inline: auto;
  font-size: clamp(var(--fs-h1), 6vw + 1rem, calc(var(--fs-h1) * var(--ts) ));
  color: hsl(var(--clr-accent));
  order: -1;
}

/***
=Staff Cards
REMOVED FROM SOURCE CODE
**/
.staff__wrapper {
  padding-block: clamp(var(--gap), 4vw + .1rem, calc(var(--gap) * 3));
  padding-inline: clamp(calc(var(--gap) / 2), 2vw + .1rem, calc(var(--gap) * 2));
}

.staff__title {
  margin-inline: auto;
  font-size: var(--fs-h3);
  text-align: center;
}

.staff {
  width: 100%;
  margin-inline: auto;
  margin-block: 1.5rem;
  max-width: var(--max-width-site);
  display: grid;
  gap: calc(var(--gap) * 3) clamp(1rem, 6vw + .1rem, 2rem);
}

.staff__card {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  }

.staff__role {
  font-size: clamp(var(--fs-h4), 1vw + 1rem, var(--fs-h3));
  font-weight: var(--fw-medium);
  text-transform: none;
  /* line-height: 1; */
}

.staff__name {
  font-size: var(--fs-h3);
  margin-block-start: auto;
}

:is(.staff__phone, .alert__link, .staff__email):active,
:is(.staff__phone, .alert__link, .staff__email):hover,
:is(.staff__phone, .alert__link, .staff__email):focus,
:is(.staff__phone, .alert__link, .staff__email):focus-visible {
  color: hsl(var(--clr-link-state));
}

.staff__picture {
  max-width: max(16rem, 32%);
}

.staff__caption {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  /* gap: var(--gap); */
}

.staff__info {
  margin-block: 0;
  font-size: var(--fs-h5);
  font-style: italic;

}

.staff__img {
  /* border-radius: 50%; */
  /* max-width: 40rem; */
  border-radius: 50%;
  aspect-ratio: 1;
  object-fit: cover;
}


/***
=Alert (info box)
**/

.alert {
  max-width: calc(var(--max-width-site) / 1.5);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--gap);
  gap: var(--gap);
}

.alert__title {
  font-size: var(--fs-h3);
  font-weight: var(--fw-black);
}

.alert__subtitle {
  order: -1;
}

.alert__icon {
  font-size: clamp(var(--fs-h1), 13vw + 1rem, var(--fs-h2) * 2);
}

.alert--office {
  margin-block-start: 1rem;
  padding: var(--gap);
}

.alert--sickleave {
  --clr-accent: 1 75% 50%;
  position: relative;
  margin-block: 2rem 1rem;
}

.alert__message {
  font-size: var(--fs-h5);
  text-align: center;
  line-height: 1.4;
}

/* Opening hours */
.alert__message--opening-hours {
  font-size: clamp(var(--fs-h2), 20vw + 1rem, var(--fs-h1));
}

/* Address */
.alert__link--address {
  font-size: clamp(var(--fs-h5), 20vw + 1rem, var(--fs-h4));
}

/* Map */
.alert__map {
  aspect-ratio: 5 / 4;
  margin-block-start: 1rem;
  width: 100%;
  max-width: 34rem;
  margin-inline: auto;
}

@supports not (aspect-ratio: 1 / 1) {
  .alert__map {
    min-height: 20rem;
  }
}


.alert__message--opening-hours,
.alert__link--address {
  display: block;
  font-weight: var(--fw-bold);
}

.alert__title,
.alert__message {
  margin-block: 0;  /* Spaced vertically via gap */
}

.alert__icon--office {
  margin-block-start: .25em;
}
.alert__icon--sickleave {
  order: -2;
}

.alert__link {
  display: block;
  line-height: 1.25;
  text-decoration: none;
  font-weight: var(--fw-bold);
}

.alert__link--office.alert__link--phone {
  font-size: clamp(var(--fs-h4), 6vw + 1rem,var(--fs-h2));
}
.alert__link--office.alert__link--email {
  font-size: clamp(var(--fs-h5), 1vw + 1rem,var(--fs-h4));
}


.alert__icon,
.alert__link {
  color: hsl(var(--clr-accent));
}

.alert__link--sickleave,
.staff__phone,
.staff__email {
  font-size: clamp(var(--fs-h4), 6vw + 1rem,var(--fs-h2));
  font-weight: var(--fw-bold);
  color: hsl(var(--clr-accent));
  text-decoration: none;
}

.staff__email {
  font-size: clamp(var(--fs-body), 6vw + 1rem,var(--fs-h5));
}
/***
=Page Intro
***/
.content > h1 + p {
  font-size: var(--fs-h5);
  letter-spacing: .01em;
}


/***
=Footer
***/
.footer__inner {
  display: flex;
  flex-flow: column nowrap;
  align-items: flex-start;
  justify-content: center;
  gap: var(--gap) 0;
  max-width: max-content;
  margin-inline: auto;
  padding-block-end: 1rem;
}

.footer__copy {
  width: 100%;
  margin-block: 1rem;
}

.social-media__links,
.footer-contact__items,
.footer-nav__links {
  flex-flow: column nowrap;
  padding-inline-start: 0;
}

.footer__social-media-bar {
  width: 100%;
}
.social-media__links {
  margin-block: 1rem;
  width: fit-content;
  font-size: var(--fs-h4);
  gap: 1em;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-evenly;
}

.footer-contact__items {

}

/***
Media Queries
***/

@media (min-width: 32rem) {
  .staff__card {
    flex-flow: row-reverse nowrap;
    justify-content: space-evenly;
    align-items: center;
  }

  .staff__picture {
    /* max-width: 40%; */
    width: clamp(12rem, 1vw + 1rem, 16rem);
  }

  .staff__caption {
    align-items: flex-start;
  }

  .footer__inner {
    padding-block-start: 1rem;
    flex-flow: row wrap;
    align-items: baseline;
    gap: 0 2.5rem;
  }

  .footer-logo {
    width: 100%;
    align-self: flex-start;
  }

  .footer__copy {
    text-align: center;
  }

  .social-media__links {
    margin-inline: auto;
  }

  .alert__map {
    aspect-ratio: 3 / 2;
  }

}

.contact__wrapper--office {
  display: flex;
  flex-flow: column nowrap;
  max-width: var(--max-width-site);
  margin-inline: auto;
}

@media (min-width: 769px) {
  .services {
    flex-direction: row;
    justify-content: space-evenly;
    align-items: baseline;
  }

  .service__info {
    align-self: baseline;
  }

  .service--about {
    max-width: calc(calc(var(--max-width-site) / 1.5) / 2.75);
  }

  .staff {
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));

  }

  .staff__card {
    flex-flow: column nowrap;
  }

  .staff__caption {
    align-items: center;
  }

  .footer-logo {
    max-width: fit-content;
  }

  .hero-buttons {
    display: none;
  }

  .hero-video__poster {
    display: none;
  }

  .hero-video__title {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.6;
    
  }

  .home .content > h1:first-child {
    display: none;
  }

  .contact__wrapper--office {
    flex-direction: row;
  }

  .alert--office {
    align-items: flex-start;
    margin-block-start: 0;
  }

  .alert__message--office {
    text-align: left;
  }

  .alert__map {
    padding-inline: var(--gap);
  }
}