/* ══════════════════════════════════════════════════════════════════════════
   Shared site header.

   This lives in one file on purpose. The nav used to be copy-pasted into all
   nine pages, which let it drift: the homepage ended up on gap 2rem with a
   class-driven mobile menu, while the other eight kept gap 2.5rem, a boxed
   phone and a toggle that wrote inline styles. The result was a header that
   collided with the logo on every page except the homepage between roughly
   1040px and 1400px. Edit the header HERE and every page follows.

   Loaded AFTER each page's inline <style>, so these rules win on equal
   specificity and supersede whatever that page still has inline.
   ══════════════════════════════════════════════════════════════════════════ */

nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: rgba(31, 42, 48, 0.97);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(244, 237, 228, 0.08);
}

.nav-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Fluid, not stepped. Every size below interpolates smoothly between the value
   the bar used at 1400px and the value it used at 769px, so the row tightens
   gradually instead of holding its width and then colliding with the logo. */
.nav-logo img { height: clamp(54px, 4.12vw + 22.3px, 72px); width: auto; max-width: 360px; }

.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(0.8rem, 3.04vw - 10.6px, 2rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-links li { white-space: nowrap; }
.nav-links a {
  color: rgba(244, 237, 228, 0.78);
  text-decoration: none;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: clamp(0.72rem, 0.254vw + 9.57px, 0.82rem);
  letter-spacing: clamp(0.04em, 0.05vw + 0.008em, 0.06em);
  text-transform: uppercase;
  transition: color 0.2s ease;
}
.nav-links a:hover { color: var(--sand); }
.nav-links a:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 4px; }

/* Phone: a quiet text link, not a second button competing with the CTA. */
.nav-call {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.38rem 0.5rem 0.42rem;
  border: none;
  border-radius: 8px;
  background: none;
  color: rgba(244, 237, 228, 0.8) !important;
  white-space: nowrap;
  transition: color 0.2s ease, transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.nav-call:hover { color: var(--sand) !important; transform: translateY(-1px); background: none; }
.nav-call:active { transform: translateY(0); }
.nav-call:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 6px; }
.nav-call svg { flex: none; opacity: 0.72; transition: opacity 0.2s ease; }
.nav-call:hover svg { opacity: 1; }
.nav-call-text { display: flex; flex-direction: column; line-height: 1.12; }
.nav-call-label { font-size: 0.58rem; letter-spacing: 0.14em; color: rgba(244, 237, 228, 0.6); }
.nav-call-number { font-size: 0.95rem; font-weight: 700; letter-spacing: -0.01em; text-transform: none; }

.nav-cta {
  background: var(--red) !important;
  color: white !important;
  padding: 0.55rem clamp(0.95rem, 1.141vw + 6.42px, 1.4rem) !important;
  border-radius: 6px;
  box-shadow: 0 2px 12px rgba(182,61,43,0.35), 0 1px 3px rgba(0,0,0,0.2);
  transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease !important;
}
.nav-cta:hover { background: var(--red-lt) !important; transform: translateY(-1px); box-shadow: 0 4px 18px rgba(182,61,43,0.45), 0 2px 6px rgba(0,0,0,0.2) !important; }
.nav-cta:active { transform: translateY(0); }
.nav-cta:focus-visible { outline: 2px solid var(--sand); outline-offset: 3px; }

/* Services dropdown */
.nav-item-services { position: relative; }
.nav-dropdown {
  display: none; position: absolute; top: 100%; left: 0;
  background: rgba(18,25,31,0.98); backdrop-filter: blur(16px);
  border: 1px solid rgba(244,237,228,0.1); border-radius: 12px;
  padding: 0.4rem; list-style: none; margin: 0; min-width: 190px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.3), 0 2px 8px rgba(0,0,0,0.2); z-index: 200;
}
.nav-item-services:hover .nav-dropdown,
.nav-item-services:focus-within .nav-dropdown { display: block; }
.nav-dropdown::before { content: ""; position: absolute; top: -8px; left: 0; right: 0; height: 8px; }
.nav-dropdown li a {
  display: block; padding: 0.48rem 0.85rem; border-radius: 6px;
  color: rgba(244,237,228,0.72); font-family: 'Montserrat', sans-serif;
  font-weight: 600; font-size: 0.78rem; letter-spacing: 0.06em;
  text-transform: uppercase; text-decoration: none; white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}
.nav-dropdown li a:hover { background: rgba(182,61,43,0.18); color: rgba(244,237,228,0.95); }
.nav-services-toggle { display: flex !important; align-items: center; gap: 0.35rem; }
.nav-caret { transition: transform 0.2s ease; flex-shrink: 0; }
.nav-item-services:hover .nav-caret { transform: rotate(180deg); }

.nav-toggle { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 4px; background: none; border: none; }
.nav-toggle span { display: block; width: 24px; height: 2px; background: rgba(244,237,228,0.8); border-radius: 2px; transition: transform 0.2s ease, opacity 0.2s ease; }
.nav-toggle:focus-visible { outline: 2px solid var(--sand); outline-offset: 3px; border-radius: 4px; }

/* The number's label stacks tall; drop to the icon alone once the bar tightens. */
@media (max-width: 1100px) and (min-width: 769px) {
  .nav-call { gap: 0; padding: 0.5rem; }
  .nav-call-text { display: none; }
}

@media (max-width: 768px) {
  .nav-toggle { display: flex; }
  .nav-links {
    display: flex; flex-direction: column; align-items: flex-start;
    gap: 1.25rem; position: absolute; top: 100%; left: 0; right: 0;
    padding: 1.5rem 2rem;
    /* Solid, not translucent, or the hero bleeds through and the panel reads
       as a different colour than the header above it. */
    background: var(--canyon);
    border-bottom: 1px solid rgba(244, 237, 228, 0.08);
    opacity: 0; visibility: hidden; transform: translateY(-10px);
    transition: opacity 0.2s ease, transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .nav-links.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
  nav.menu-open { background: var(--canyon); backdrop-filter: none; border-bottom-color: transparent; }
  .nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle.is-open span:nth-child(2) { opacity: 0; }
  .nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .nav-dropdown { display: block; position: static; background: none; backdrop-filter: none; border: none; box-shadow: none; padding: 0.5rem 0 0 0.75rem; min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .nav-links, .nav-toggle span, .nav-call, .nav-cta { transition: none; }
}