/* Aurora BIM shared site header: one markup and one stylesheet for the homepage,
   Team, Services, and Contact pages, so the top menu is identical everywhere.
   Sticky on every page; transparent at the top of the page and tinted once the
   page scrolls (site-header.js sets data-scrolled). Values are literal rather
   than tokens because the homepage and the interior pages define separate tokens. */

/* Scale unit for every page: 1px up to a 1440px wide window (the design width), then
   growing in proportion with the window up to 2560px wide, so a wide laptop or desktop
   screen shows the same layout larger instead of a small column in a sea of black
   (Megan's and Liz's screens, 2026-09-17 call). Desktop sizes are written as
   calc(N * var(--u)); rules inside max-width media queries stay in plain px because
   --u is exactly 1px there. rem sizes follow through the root font size. */
:root { --u: clamp(1px, 100vw / 1440, 1.7778px); }
html { font-size: calc(16 * var(--u)); scroll-padding-top: calc(76 * var(--u)); }

/* One content column for the whole site: the header, the homepage sections, and the
   interior .container all use it, so the menu never runs wider than the copy below. */
:root { --site-content: calc(1180 * var(--u)); --site-gutter: clamp(20px, 7vw, calc(112 * var(--u))); }

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  border-bottom: 1px solid transparent;
  /* A soft dark fade behind the menu, so the links stay readable where the aurora is
     bright behind them at the top of a page (Aaron, 2026-10-05). It ends at the header's
     lower edge, so there is no visible bar. no-repeat matters: a repeating gradient starts
     again under the 1px bottom border and draws a dark line there. */
  background-image: linear-gradient(to bottom, rgba(4, 6, 15, .8) 0%, rgba(4, 6, 15, .55) 55%, rgba(4, 6, 15, 0) 100%);
  background-repeat: no-repeat;
  transition: background-color .3s ease, border-color .3s ease;
}
.site-header[data-scrolled="true"],
body.menu-open .site-header {
  background-color: rgba(10, 10, 20, .86);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom-color: rgba(255, 255, 255, .08);
}
/* The menu sits beside the Contact Us button, with the same space between each
   menu item and between the last item and the button. */
.site-header__inner {
  --site-nav-gap: clamp(24px, 2.6vw, calc(40 * var(--u)));
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  column-gap: var(--site-nav-gap);
  width: min(var(--site-content), 100% - 2 * var(--site-gutter));
  height: calc(76 * var(--u));
  margin-inline: auto;
}
.site-header__logo { justify-self: start; display: inline-flex; }
.site-header__logo img { display: block; width: auto; height: calc(34 * var(--u)); }

.site-nav {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: var(--site-nav-gap);
}
.site-nav a {
  padding-block: calc(8 * var(--u));
  border-bottom: 2px solid transparent;
  color: rgba(255, 255, 255, .86);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: calc(16 * var(--u));
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: color .2s ease;
}
.site-nav a:hover,
.site-nav a:focus-visible { color: #fff; }
.site-nav a[aria-current="page"] { color: #fff; border-bottom-color: #46e0d4; }

/* Only shown when the header Contact Us button is dropped on very narrow screens. */
.site-nav__contact { display: none; }

.site-header__actions { justify-self: end; display: flex; align-items: center; gap: calc(10 * var(--u)); }
/* The same solid turquoise as the page buttons, a little smaller: 46 tall with 24 side
   padding against their 52 and 28 (Aaron, pin 63, 2026-10-05). */
.site-header__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: calc(46 * var(--u));
  padding: 0 calc(24 * var(--u));
  border-radius: calc(7 * var(--u));
  background: #46e0d4;
  color: #0a0a14;
  font-family: "Space Grotesk", sans-serif;
  font-size: calc(15 * var(--u));
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: transform .25s ease, box-shadow .35s ease, background .25s ease;
}
.site-header__cta:hover { transform: translateY(-1px); box-shadow: 0 0 24px rgba(70, 224, 212, .24); background: #6eeae0; }

.site-header__menu {
  display: none;
  place-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 6px;
  background: rgba(8, 8, 16, .55);
  cursor: pointer;
}
.site-header__menu span { display: block; width: 18px; height: 2px; background: #fff; transition: transform .25s ease, opacity .2s ease; }

@media (max-width: 899px) {
  html { scroll-padding-top: 68px; }
  .site-header__inner { grid-template-columns: 1fr auto; column-gap: 24px; height: 68px; }
  .site-header__logo img { height: 28px; }
  .site-header__menu { display: grid; }
  .site-nav {
    position: fixed;
    top: 68px;
    left: 0;
    right: 0;
    /* The tinted header's backdrop-filter makes it the containing block, and a
       centered grid child would shrink to fit; stretch keeps the panel full width. */
    justify-self: stretch;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px var(--site-gutter) 28px;
    background: rgba(10, 10, 20, .97);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
  }
  .site-nav a { padding-block: 18px; border-bottom: 1px solid rgba(255, 255, 255, .08); font-size: 18px; }
  .site-nav a[aria-current="page"] { color: #46e0d4; border-bottom-color: rgba(255, 255, 255, .08); }
  body.menu-open { overflow: hidden; }
  body.menu-open .site-nav { opacity: 1; visibility: visible; transform: none; }
  body.menu-open .site-header__menu span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  body.menu-open .site-header__menu span:nth-child(2) { opacity: 0; }
  body.menu-open .site-header__menu span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}
@media (max-width: 480px) {
  .site-header__logo img { height: 24px; }
}
/* Below 405px the logo, a full-size Contact Us, and the menu button cannot all fit:
   measured, the row needs 346px and the column is only 344px at 400px wide. Rather than
   shrink the button out of step with every other button on the site, drop it here and
   surface Contact Us inside the menu panel instead. */
@media (max-width: 404px) {
  .site-header__cta { display: none; }
  .site-nav .site-nav__contact { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  .site-header, .site-nav, .site-header__cta, .site-header__menu span { transition: none; }
}

/* Contact form result line, added under each form by contact-send.js. */
.form-status { margin: 14px 0 0; font-size: 0.95rem; line-height: 1.5; color: inherit; }
.form-status a { color: inherit; text-decoration: underline; }
.form-status--error { font-weight: 600; }