:root {
  --navy: #150734;
  --bright-blue: #0f88f2;
  --light-grey-blue: #e0e5eb;
  --footer-grey: #333333;
  --white: #ffffff;
  --black: #111111;
}

* { box-sizing: border-box; }
html { scroll-behaviour: smooth; font-size: 16px; }
body {
  margin: 0;
  min-width: 320px;
  color: var(--black);
  font-family: "Open Sans", sans-serif;
  font-size: 1rem;
  line-height: 1.6;
}
img { display: block; max-width: 100%; }

.logo-band {
  display: grid;
  min-height: 138px;
  place-items: center;
  background: var(--navy);
}
.logo-band img { width: 115px; height: 115px; }

.intro, .safety { display: grid; grid-template-columns: 1fr 2fr; }
.intro-title {
  min-height: 294px;
  padding-left: 95px;
  background: var(--bright-blue);
  color: var(--white);
}
.blue-rule {
  display: block;
  width: 182px;
  height: 20px;
  margin-top: 96px;
  background: var(--navy);
}
.intro-title h1 {
  margin: 0 20px 0 0;
  font-family: "PT Sans", sans-serif;
  font-size: 3rem;
  font-weight: 700;
  line-height: 1.2;
}
.intro-copy {
  display: flex;
  min-height: 294px;
  align-items: center;
  padding: 0 86px 0 41px;
  background: var(--light-grey-blue);
}
.intro-copy p {
  margin: 0;
  font-family: Ubuntu, sans-serif;
  font-weight: 400;
  line-height: 1.8;
  transition: transform .5s ease;
}
.intro-copy p:hover { transform: translateX(10px); }

.safety { grid-template-columns: 2fr 1fr; margin-top: -7px; }
.safety-image {
  min-height: 643px;
  background: url("images/2111257_medium2000.jpg") center / cover no-repeat;
}
.safety-copy {
  min-height: 643px;
  padding: 54px 53px 0 27px;
  background: var(--navy);
  color: var(--white);
}
.safety-copy h2 {
  margin: 0 26px 0 0;
  font-family: "PT Sans", sans-serif;
  font-size: 3rem;
  font-weight: 700;
  line-height: 1.2;
}
.safety-copy p {
  margin: 53px 0 0;
  transition: transform .5s ease;
}
.safety-copy p:hover { transform: translateX(10px); }
.white-rule {
  display: block;
  width: 143px;
  height: 20px;
  margin-top: 79px;
  background: var(--white);
}

.contact {
  min-height: 238px;
  padding: 21px 20px;
  background: var(--light-grey-blue);
  text-align: center;
}
.contact h2 {
  margin: 0 23px;
  font-family: "PT Sans", sans-serif;
  font-size: 3rem;
  font-weight: 700;
  line-height: 1.2;
}
.contact p { margin: 16px 7px 0; line-height: 1.8; }
.email-button {
  display: inline-block;
  margin-top: 26px;
  border-radius: 50px;
  padding: 10px 30px;
  background: var(--navy);
  color: var(--white);
  font-size: .875rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-decoration: none;
  transition: border-radius .5s ease, box-shadow .5s ease, background-color .2s ease;
}
.email-button:hover { border-radius: 10px; background: #db545a; box-shadow: 2px 2px 8px #808080; }

footer {
  padding: 1em;
  background: var(--footer-grey);
  color: var(--white);
  text-align: center;
  font-size: .875rem;
}
.back-to-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  display: grid;
  width: 64px;
  height: 64px;
  place-items: center;
  border-radius: 50%;
  background: var(--navy);
  opacity: .85;
}
.back-to-top svg { width: 34px; height: 34px; fill: var(--white); }
:focus-visible { outline: 3px solid #ffd54a; outline-offset: 3px; }

@media (max-width: 1199px) {
  .intro-title { min-height: 360px; padding-left: 78px; }
  .intro-copy { min-height: 360px; padding-left: 79px; padding-right: 41px; }
  .intro-title h1, .contact h2 { font-size: 2.25rem; }
  .safety-image { min-height: 530px; }
  .safety-copy { min-height: 530px; }
}
@media (max-width: 991px) {
  .intro-title { padding-left: 49px; }
  .intro-copy { padding-left: 50px; padding-right: 30px; }
  .safety-copy { padding-right: 33px; }
}
@media (max-width: 767px) {
  .intro, .safety { grid-template-columns: 1fr; }
  .intro-title { min-height: 222px; padding-left: 23px; }
  .blue-rule { margin-top: 70px; }
  .intro-copy { min-height: 243px; padding: 38px 24px; }
  .safety { margin-top: 0; }
  .safety-image { min-height: 457px; }
  .safety-copy { min-height: auto; padding: 54px 37px 70px 24px; }
  .white-rule { margin-top: 60px; }
}
@media (max-width: 575px) {
  .intro-title { min-height: auto; padding: 58px 28px 54px; }
  .blue-rule { margin-top: 0; }
  .intro-title h1, .safety-copy h2, .contact h2 { font-size: 3rem; }
  .intro-copy { min-height: auto; padding: 45px 29px; }
  .intro-copy p { font-weight: 500; }
  .safety-image { min-height: 288px; }
  .safety-copy { min-height: 535px; padding: 71px 24px 50px 10px; }
  .safety-copy h2 { margin-right: 14px; }
  .contact { padding-inline: 6px; }
  .back-to-top { width: 56px; height: 56px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behaviour: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}