/* Accessibility and progressive enhancement layered onto the original Ceevee design. */
.skip-link {
  position: fixed;
  z-index: 1000;
  top: 8px;
  left: 8px;
  padding: 10px 14px;
  background: #fff;
  color: #313131;
  transform: translateY(-160%);
}

.skip-link:focus { transform: translateY(0); }

:focus-visible {
  outline: 3px solid #f06000;
  outline-offset: 4px;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 52px;
}

header::after {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: rgba(15, 15, 15, .34);
  content: "";
  pointer-events: none;
}

header .banner,
#nav-wrap,
header .scrolldown {
  z-index: 2;
}

header .banner { position: relative; }

.location-kicker {
  margin-bottom: 12px;
  color: #f06000;
  font: 12px/1.5 "opensans-bold", sans-serif;
  letter-spacing: 3px;
  text-transform: uppercase;
}

.hero-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 24px;
}

.hero-actions .button {
  margin: 0;
  padding: 13px 20px;
  font-size: 12px;
  letter-spacing: 1px;
}

.hero-primary {
  background: #f06000;
  color: #fff;
}

.hero-primary:hover,
.hero-primary:focus {
  background: #cc5200;
  color: #fff;
}

.hero-secondary {
  background: rgba(0, 0, 0, .3);
  border: 1px solid rgba(255, 255, 255, .65);
  color: #fff;
}

.hero-secondary:hover,
.hero-secondary:focus {
  background: #fff;
  color: #2b2b2b;
}

header .scrolldown a {
  display: grid;
  place-items: center;
  background: #fff;
  color: #2b2b2b;
  font: 24px/1 Arial, sans-serif;
}

.menu-button { display: none; }

.impact-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 32px 0 26px;
  padding: 0;
  border: 1px solid #3c3c3c;
  list-style: none;
}

.impact-grid li {
  min-height: 118px;
  padding: 18px 14px;
  border-right: 1px solid #3c3c3c;
}

.impact-grid li:last-child { border-right: 0; }
.impact-grid strong,
.impact-grid span { display: block; }
.impact-grid strong { margin-bottom: 7px; color: #f06000; font: 32px/1 "opensans-bold", sans-serif; }
.impact-grid span { color: #929292; font-size: 12px; line-height: 1.45; }
.about-actions { display: flex; align-items: flex-end; justify-content: space-between; }
#about .about-actions .contact-details { width: 100%; }

#resume .side-title {
  margin: 0;
  color: #313131;
  font: 18px/24px "opensans-bold", sans-serif;
  letter-spacing: 1px;
  text-transform: uppercase;
}

#resume .side-title span {
  padding-bottom: 6px;
  border-bottom: 3px solid #11abb0;
}

#resume .proof {
  padding-bottom: 66px;
  margin-bottom: 66px;
  border-bottom: 1px solid #e8e8e8;
}

.case-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.case-card {
  min-height: 260px;
  display: flex;
  flex-direction: column;
  padding: 24px;
  background: #f4f4f4;
  border-top: 4px solid #11abb0;
}

.case-card.featured {
  grid-column: 1 / -1;
  min-height: 230px;
  background: #2b2b2b;
  border-color: #f06000;
}

.case-card h3 { margin-top: auto; }
.case-card.featured h3 { color: #fff; }
.case-card p { margin-bottom: 12px; }
.case-card strong { color: #11abb0; font-size: 12px; text-transform: uppercase; }
.case-card.featured strong { color: #f06000; }
.case-label { color: #6e7881; font: 10px/1.5 "opensans-bold", sans-serif; letter-spacing: 1.2px; text-transform: uppercase; }

#resume .item + .item {
  margin-top: 28px;
  padding-top: 28px;
  border-top: 1px solid #e8e8e8;
}

.capability-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.capability-grid article {
  min-height: 180px;
  padding: 22px;
  background: #f4f4f4;
  border-top: 3px solid #11abb0;
}

.capability-grid article p { margin-bottom: 0; }

#contact .contact-mark {
  margin: 0;
  color: #fff;
  font: 72px/1 "opensans-light", sans-serif;
}

#contact .section-head h2:not(.contact-mark) {
  color: #ebeeee;
  font: 24px/30px "opensans-bold", sans-serif;
}

.contact-options { padding-left: 17%; }
.contact-options h4 { color: #ebeeee; }
.contact-options a { overflow-wrap: anywhere; }

footer #go-top a {
  display: grid;
  place-items: center;
  font-size: 24px;
  line-height: 1;
}

@media only screen and (max-width: 900px) {
  .impact-grid { grid-template-columns: repeat(2, 1fr); }
  .impact-grid li:nth-child(2) { border-right: 0; }
  .impact-grid li:nth-child(-n + 2) { border-bottom: 1px solid #3c3c3c; }
}

@media only screen and (max-width: 767px) {
  html:not(.js-enabled) #nav-wrap ul#nav {
    position: fixed;
    top: 0;
    right: 0;
    display: block;
    padding: 12px 18px;
    background: #1f2024;
  }

  .js-enabled #nav-wrap { width: 100%; }
  .js-enabled .menu-button {
    position: fixed;
    top: 0;
    right: 30px;
    width: 48px;
    height: 48px;
    display: block;
    padding: 0;
    background: #cc5200;
    border: 0;
    color: #fff;
    font: 10px/48px "opensans-bold", sans-serif;
    letter-spacing: 0;
    text-align: center;
    text-transform: uppercase;
  }

  .js-enabled #nav-wrap ul#nav {
    position: fixed;
    top: 58px;
    right: 30px;
    width: min(280px, calc(100% - 60px));
    display: none;
    padding: 22px 20px 28px;
    margin: 0;
    background: #1f2024;
  }

  .js-enabled #nav-wrap ul#nav[data-open="true"] { display: block; }
  header .banner-text h1 { font-size: 58px; }
  header .banner-text h3 { width: 90%; }
  .hero-actions { flex-direction: column; align-items: center; }
  .hero-actions .button { width: min(280px, 100%); text-align: center; }
  #about .profile-pic { display: block; margin-bottom: 34px; }
  .about-actions { display: block; }
  #resume .header-col { margin-bottom: 40px; }
  #resume .side-title { letter-spacing: 3px; text-align: center; }
  .case-grid, .capability-grid { grid-template-columns: 1fr; }
  .case-card.featured { grid-column: auto; }
  .contact-options { padding-left: 30px; padding-right: 30px; }
  #contact .contact-mark { display: none; }
}

@media only screen and (max-width: 480px) {
  header .banner-text h1 { font-size: 46px; }
  .impact-grid { grid-template-columns: 1fr; }
  .impact-grid li { min-height: 0; border-right: 0; border-bottom: 1px solid #3c3c3c; }
  .impact-grid li:last-child { border-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}