/* ======================
   Global Elements
   ====================== */

h1 {
  text-transform: capitalize !important;
}

/* =========================================================
   Home/key logo
   ========================================================= */

.home-key-logo {
  display: inline-block;
  width: 44px;
  aspect-ratio: 220 / 504;

  background-color: currentColor;

  -webkit-mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 504'%3E%3Cpath fill='black' d='M157 0h38v27l23-8v245H129v105h46v67h-46v26h34v42H111c-12 0-20-8-20-20V264H1V90L157 43V0ZM91 188v76h38v-76H91Z' fill-rule='evenodd'/%3E%3C/svg%3E")
    center / contain no-repeat;

  mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 504'%3E%3Cpath fill='black' d='M157 0h38v27l23-8v245H129v105h46v67h-46v26h34v42H111c-12 0-20-8-20-20V264H1V90L157 43V0ZM91 188v76h38v-76H91Z' fill-rule='evenodd'/%3E%3C/svg%3E")
    center / contain no-repeat;
}


/* =========================================================
   Navigation structure
   ========================================================= */

#home #nav {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1000;

  width: 100%;

  transition:
    background-color 250ms ease,
    color 250ms ease,
    box-shadow 250ms ease,
    backdrop-filter 250ms ease;
}


/* =========================================================
   Default state: transparent over the hero
   ========================================================= */

#home #nav:not(.nav--scrolled) {
  /* background-color: transparent !important; */
  background-color: rgba(0,0,0,0.005);
  /* background-color: rgba(255,255,255,0.75); */
  color: #fff !important;
  box-shadow: none !important;

  /* -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important; */

  -webkit-backdrop-filter: blur(1px) !important;
  backdrop-filter: blur(1px) !important;  
}

#home #nav:not(.nav--scrolled) .logo-wordmark {
  color: #fff;
}


/* =========================================================
   Scrolled state: white background and dark content
   ========================================================= */

#home #nav.nav--scrolled {
  background-color: rgba(255, 255, 255, 0.85) !important;
  color: #111 !important;

  box-shadow:
    0 1px 12px rgba(24, 12, 23, 0.1) !important;

  -webkit-backdrop-filter: blur(12px) !important;
  backdrop-filter: blur(12px) !important;
}

#home #nav.nav--scrolled .logo-wordmark {
  color: #3F6FA9;
}

@media(max-width: 900px) {
  #home #nav.nav--scrolled .hamburger span {
    color: #000 !important;
    background: #000 !important;
  }
}


/* =========================================================
   Navigation content follows the current nav color
   ========================================================= */

#home #nav a,
#home #nav button,
#home #nav .logo-text,
#home #nav .nav-link,
#home #nav .menu-toggle,
#home #nav .home-key-logo {
  color: inherit !important;
}

#home #nav a.nav-cta {
  color: #fff !important;
}

.nav-link {
  font-weight: 600 !important;
}

a.nav-cta {
  font-family: 'Brie Light',sans-serif;
  font-size: 0.95em;
}

.nav-cta, .masthead-cta {
  background: #c39240 !important;
  border-color: #c39240 !important;
}

@media(min-width: 961px) and (max-width: 1034px) {
  .nav-cta { 
    max-width: 171px !important;
    font-size: 75% !important;
    padding: 2% !important;
    text-align: center !important;
  }
}    
@media(max-width: 960px) {
  .nav-cta { 
    max-width: 171px !important;
    font-size: 75% !important;
    text-align: center !important;
  }
}

/* ==================================
    Sub-page Masthead Font Color
   ==================================== */
#page-process, #page-about, #page-services, #page-contact {
  padding-top: 0 !important;
}

.process-hero, .about-hero, .page-hero, .contact-hero {
  height: 420px !important;
}

.eyebrow,
#page-about .about-hero .eyebrow,
.process-hero-content:last-child p,
.eyebrow + h1,
.about-hero-text p,
.page-hero p,
.contact-hero p  {
  color: #fff !important;
}

#page-about .eyebrow {
  color: #434343 !important;
}

/* ================
   Page Grid
   ================ */
  .home-grid-section, .about-values-section {
    padding:96px 6%;
    background-color:#d5dfea;
    /* background-image: url(/images/maze-black.png); */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='24' viewBox='0 0 88 24'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='autumn' fill='%23ffffff' fill-opacity='0.23'%3E%3Cpath d='M10 0l30 15 2 1V2.18A10 10 0 0 0 41.76 0H39.7a8 8 0 0 1 .3 2.18v10.58L14.47 0H10zm31.76 24a10 10 0 0 0-5.29-6.76L4 1 2 0v13.82a10 10 0 0 0 5.53 8.94L10 24h4.47l-6.05-3.02A8 8 0 0 1 4 13.82V3.24l31.58 15.78A8 8 0 0 1 39.7 24h2.06zM78 24l2.47-1.24A10 10 0 0 0 86 13.82V0l-2 1-32.47 16.24A10 10 0 0 0 46.24 24h2.06a8 8 0 0 1 4.12-4.98L84 3.24v10.58a8 8 0 0 1-4.42 7.16L73.53 24H78zm0-24L48 15l-2 1V2.18A10 10 0 0 1 46.24 0h2.06a8 8 0 0 0-.3 2.18v10.58L73.53 0H78z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  }

/* =========================================================
   Reduced-motion support
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  #home #nav {
    transition: none;
  }
}


/* =========================================================
   Footer Rules
   ========================================================= */

footer .footer-bottom * {
  color: rgb(17 17 17) !important;
}
.footer-col a:hover {
  cursor: pointer;
}

.footer-col h5, .nav-link:hover, .nav-link.active {
  color: #975011 !important;
}