/* Shared site header. Desktop: logo left, links and button right.
   Phones and small tablets (900px and below): the links move into a hamburger menu on the right.
   The menu only collapses when nav.js has added the "js" class to <html>, so without JavaScript the links stay visible. */

.site-header {
  position: relative;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px clamp(20px, 5vw, 64px);
  border-bottom: 1px solid #e8e6e0;
  background: #ffffff;
}
.site-logo { display: block; text-decoration: none; flex: 0 1 auto; min-width: 0; }
.site-logo img { display: block; height: 60px; width: auto; max-width: 100%; }

.site-nav { display: flex; align-items: center; gap: 28px; }
.site-nav a { text-decoration: none; color: #0d0d0d; font-weight: 600; font-size: 15px; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: #f12323; }
.site-nav a.nav-cta {
  background: #f12323; color: #ffffff; border: 2px solid #f12323;
  padding: 11px 20px; font-weight: 700; font-size: 14px; border-radius: 3px;
}
.site-nav a.nav-cta:hover { background: #0d0d0d; border-color: #0d0d0d; color: #ffffff; }
.site-nav a:focus-visible, .nav-toggle:focus-visible { outline: 2px solid #f12323; outline-offset: 3px; }

.nav-toggle { display: none; }

@media (max-width: 900px) {
  .site-logo img { height: 44px; }

  html:not(.js) .site-header { flex-wrap: wrap; }
  html:not(.js) .site-nav { flex-wrap: wrap; gap: 12px 20px; }

  html.js .nav-toggle {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 46px; height: 46px; padding: 0 11px; margin-left: auto; flex: none;
    background: transparent; border: 2px solid #0d0d0d; border-radius: 3px; cursor: pointer;
  }
  html.js .nav-toggle span { display: block; height: 2px; background: #0d0d0d; transition: transform .2s, opacity .2s; }
  html.js .nav-toggle[aria-expanded="true"] { border-color: #f12323; }
  html.js .nav-toggle[aria-expanded="true"] span { background: #f12323; }
  html.js .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  html.js .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  html.js .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  html.js .site-nav {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 4px clamp(20px, 5vw, 64px) 24px;
    background: #ffffff; border-bottom: 1px solid #e8e6e0;
    box-shadow: 0 16px 28px rgba(13, 13, 13, 0.1);
  }
  html.js .site-nav.is-open { display: flex; animation: nav-in .18s ease; }
  html.js .site-nav a { padding: 17px 0; font-size: 17px; border-bottom: 1px solid #e8e6e0; }
  html.js .site-nav a.nav-cta { margin-top: 20px; padding: 15px 20px; text-align: center; font-size: 16px; border: 2px solid #f12323; }
  html.js .site-nav a.nav-cta:hover { border-color: #0d0d0d; }

  /* bigger touch targets for footer links */
  footer a { display: inline-block; padding: 8px 0; }
}

/* very small phones: shrink the logo so it fits beside the menu button */
@media (max-width: 380px) { .site-logo img { height: 36px; } }

@keyframes nav-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  html.js .site-nav.is-open { animation: none; }
  html.js .nav-toggle span { transition: none; }
}

/* Equal-height hero sections: every page's hero shares one minimum height on desktop,
   with its content centered. Add class "page-hero" to the hero <section> and "page-hero__inner" to its content wrapper. */
.page-hero { box-sizing: border-box; display: flex; align-items: center; }
.page-hero > .page-hero__inner { width: 100%; box-sizing: border-box; }
@media (min-width: 901px) { .page-hero { min-height: 560px; } }

/* Social icons (footer). Dark footers use the default; add .social--light inside light footers. */
.social { display: flex; align-items: center; gap: 10px; }
.social a {
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0;
  border: 1px solid #3a3a3a; border-radius: 3px; color: #d9d9d9; background: transparent;
  text-decoration: none; transition: background-color .15s, border-color .15s, color .15s;
}
.social a svg { width: 20px; height: 20px; display: block; }
.social a:hover, .social a:focus-visible { background: #f12323; border-color: #f12323; color: #ffffff; }
.social a:focus-visible { outline: 2px solid #f12323; outline-offset: 3px; }
.social--light a { border-color: #e8e6e0; color: #0d0d0d; }