/* National Lumber navigation: the supplied capsule reference, in our identity. */
.nl-identity .site-head.nl-capsule-header {
  --header-height: 108px;
  background: #f6f4ee;
  border: 0;
  box-shadow: none;
  isolation: isolate;
}
.nl-identity .nl-capsule-header::before { background: #f6f4ee; backdrop-filter: none; -webkit-backdrop-filter: none; }
.nl-identity .nl-capsule-header .bar {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
  align-items: center;
  gap: 24px;
  min-height: var(--header-height);
  width: 100%;
  max-width: 1664px;
  margin: 0 auto;
  padding: 18px clamp(24px,3.4vw,58px);
}
.nl-identity .nl-capsule-header .brand { margin: 0; justify-self: start; gap: 10px; }
.nl-identity .nl-capsule-header .brand img { width: 54px; height: 36px; flex: none; }
.nl-identity .nl-capsule-header .brand-name { font-size: 21px; white-space: nowrap; }
.nl-identity .nl-capsule-header .brand-sub { font-size: 9px; letter-spacing: .22em; margin-top: 6px; }
.nl-identity .nl-capsule-header .site-nav {
  display: flex;
  position: static;
  flex-direction: row;
  gap: 1px;
  align-items: center;
  padding: 6px;
  margin: 0;
  border: 0;
  border-radius: 999px;
  background: #fff;
  transform: none;
  visibility: visible;
  overflow: visible;
}
.nl-identity .nl-capsule-header .site-nav>a {
  display: flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 10px 14px;
  border: 0; border-radius: 999px;
  font: 500 15px/1.2 var(--font-body,Barlow,sans-serif);
  letter-spacing: 0; text-transform: none; text-decoration: none;
  background: transparent; color: #102441; box-shadow: none;
  transition: background-color .16s ease, color .16s ease;
}
.nl-identity .nl-capsule-header .site-nav>a:hover { color: #102441; background: #f0eee7; }
.nl-identity .nl-capsule-header .site-nav>a[aria-current=page]:not(.btn) {
  color: #fff; background: #102441; text-decoration: none; box-shadow: none;
}
.nl-identity .nl-capsule-header .nl-header-actions { display: flex; align-items: center; justify-self: end; gap: 12px; }
.nl-identity .nl-capsule-header .nl-header-actions .head-cta {
  display: inline-flex; gap: 8px; margin: 0; padding: 12px 18px;
  min-height: 48px; white-space: nowrap;
  font: 600 15px/1.2 var(--font-body,Barlow,sans-serif);
  background: #c8a15b; color: #102441; border: 1px solid #c8a15b;
}
.nl-identity .nl-capsule-header .nl-header-actions .head-cta:hover { background: #d9b36a; border-color: #d9b36a; }
.nl-identity .nl-capsule-header .nl-account-link {
  position: relative; display: grid; place-items: center; flex: none;
  width: 48px; height: 48px; min-height: 48px;
  border: 1px solid transparent; border-radius: 50%;
  color: #102441; background: #fff; text-decoration: none;
}
.nl-identity .nl-capsule-header .nl-account-link .nl-icon { width: 23px; height: 23px; }
.nl-identity .nl-capsule-header .nl-account-link:hover { border-color: #c8a15b; }
.nl-identity .nl-capsule-header .nl-account-link[aria-current=page] { background: #102441; color: #fff; }
.nl-identity .nl-capsule-header .nl-account-link[data-signed-in=true]::after {
  content: ''; position: absolute; right: 1px; top: 1px;
  width: 9px; height: 9px; background: #c8a15b; border: 2px solid #f6f4ee; border-radius: 50%;
}
.nl-identity .nl-capsule-header .nav-toggle { display: none; }
.nl-identity .nl-capsule-header .site-nav>.nl-mobile-takeoff { display: none; }
.nl-identity .nl-capsule-header :is(a,button):focus-visible { outline: 3px solid #94702e; outline-offset: 4px; }
@media (min-width:1141px) and (max-width:1280px) {
  .nl-identity .nl-capsule-header .bar { gap: 14px; padding-inline: 24px; }
  .nl-identity .nl-capsule-header .brand-name { font-size: 19px; }
  .nl-identity .nl-capsule-header .brand img { width: 45px; height: 30px; }
  .nl-identity .nl-capsule-header .site-nav>a { padding-inline: 11px; font-size: 14px; }
  .nl-identity .nl-capsule-header .nl-header-actions { gap: 8px; }
  .nl-identity .nl-capsule-header .nl-header-actions .head-cta { padding-inline: 14px; font-size: 14px; }
}
@media (max-width:1140px) {
  .nl-identity .site-head.nl-capsule-header { --header-height: 84px; }
  .nl-identity .nl-capsule-header .bar { grid-template-columns: minmax(0,1fr) auto; gap: 16px; padding: 16px 24px; }
  .nl-identity .nl-capsule-header .nl-header-actions { grid-column: 2; grid-row: 1; gap: 10px; }
  .nl-identity .nl-capsule-header .nav-toggle {
    display: flex; width: 48px; height: 48px; border-radius: 50%;
    background: #fff; border: 1px solid transparent; padding: 13px; gap: 5px;
  }
  .nl-identity .nl-capsule-header .nav-toggle:hover { border-color: #c8a15b; }
  .nl-identity .nl-capsule-header .site-nav {
    position: fixed; inset: var(--header-height) 0 0; z-index: 99;
    flex-direction: column; align-items: stretch; justify-content: flex-start;
    gap: 6px; padding: 24px max(24px,calc((100vw - 700px)/2)) calc(32px + env(safe-area-inset-bottom,0px));
    border-radius: 0; background: #f6f4ee;
    overflow: auto; overscroll-behavior: contain;
    visibility: hidden; transform: translateX(102%);
    transition: none;
  }
  .nl-identity .nl-capsule-header .site-nav.open { transform: none; visibility: visible; }
  .nl-identity .nl-capsule-header .site-nav>a { justify-content: flex-start; background: #fff; font-size: 19px; min-height: 52px; padding: 14px 22px; }
  .nl-identity .nl-capsule-header .site-nav>.nl-mobile-takeoff { display: flex; margin: 12px 0 0; background: #c8a15b; color: #102441; gap: 10px; }
  .nl-identity .nl-capsule-header .nl-header-actions .head-cta { display: none; }
  /* All navigation links stay usable when scripting is unavailable. */
  html:not(.js) .nl-identity .nl-capsule-header .site-nav { position: static; grid-column: 1/-1; visibility: visible; transform: none; padding: 10px 0; }
  html:not(.js) .nl-identity .nl-capsule-header .nav-toggle { display: none; }
}
@media (max-width:600px) {
  .nl-identity .site-head.nl-capsule-header { --header-height: 76px; }
  .nl-identity .nl-capsule-header .bar { padding: 14px 18px; gap: 10px; }
  .nl-identity .nl-capsule-header .brand img { width: 42px; height: 28px; }
  .nl-identity .nl-capsule-header .brand { gap: 7px; }
  .nl-identity .nl-capsule-header .brand-name { font-size: 17px; }
  /* At 7 px the subtitle could not be read on a phone; the footer carries "Turnkey builders". */
  .nl-identity .nl-capsule-header .brand-sub { display: none; }
  .nl-identity .nl-capsule-header .nl-account-link,
  .nl-identity .nl-capsule-header .nav-toggle { width: 44px; height: 44px; min-height: 44px; }
  .nl-identity .nl-capsule-header .nl-header-actions { gap: 7px; }
}
@media (max-width:360px) {
  .nl-identity .nl-capsule-header .bar { padding-inline: 12px; gap: 6px; }
  .nl-identity .nl-capsule-header .brand img { width: 33px; height: 22px; }
  .nl-identity .nl-capsule-header .brand-name { font-size: 15px; }
}
@media (prefers-reduced-motion:reduce) {
  .nl-identity .nl-capsule-header .site-nav,
  .nl-identity .nl-capsule-header .site-nav>a { transition: none; }
}
