/* ===== Top Bar ===== */
.topbar {
  background: var(--dark-teal-deep);
  height: var(--topbar-height);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  position: relative;
  z-index: 1001;
}
.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  font-family: var(--font-ui);
  font-size: 12px;
  color: rgba(255,255,255,0.5);
}
.topbar__left {
  display: flex;
  gap: var(--space-lg);
}
.topbar__left span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: color 0.2s var(--ease);
}
.topbar__left span:hover { color: rgba(255,255,255,0.8); }
.topbar__left i { color: var(--orange); font-size: 11px; }
.topbar__phone {
  font-weight: 700;
  color: var(--orange);
  letter-spacing: 0.5px;
  transition: all var(--transition);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.topbar__phone i { font-size: 12px; }
.topbar__phone:hover { color: var(--peach); text-shadow: 0 0 20px rgba(246,156,82,0.3); }

/* ===== Header ===== */
.header {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: var(--dark-teal);
  /* Was `all`, which also animated backdrop-filter. Because backdrop-filter
     makes this element a containing block for its fixed-position children,
     animating it meant the containing block lingered for the whole 0.4s —
     the mobile menu opened as a stub and only snapped to full size when the
     transition finished. Only ever transition paint properties here. */
  transition: background-color 0.4s var(--ease), box-shadow 0.4s var(--ease),
              border-color 0.4s var(--ease);
  border-bottom: 1px solid transparent;
}
.header.is-scrolled {
  background: rgba(13,33,35,0.88);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  box-shadow: 0 4px 30px rgba(0,0,0,0.25), 0 1px 0 rgba(246,156,82,0.06);
  border-bottom-color: rgba(255,255,255,0.04);
}
.header__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-lg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-height);
}

/* Logo */
.header__logo {
  display: flex;
  align-items: center;
  gap: 12px;
  transition: transform 0.3s var(--ease);
}
.header__logo:hover { transform: scale(1.02); }

.header__logo-icon {
  width: 38px;
  height: 38px;
  background: linear-gradient(135deg, var(--orange), #e8873a);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: 16px;
  box-shadow: 0 4px 16px rgba(246,156,82,0.35);
  transition: all 0.3s var(--ease);
  position: relative;
}
/* Subtle ring around logo icon */
.header__logo-icon::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 13px;
  border: 1px solid rgba(246,156,82,0.2);
  transition: border-color 0.3s var(--ease);
}
.header__logo:hover .header__logo-icon { box-shadow: 0 6px 24px rgba(246,156,82,0.45); transform: rotate(-5deg); }
.header__logo:hover .header__logo-icon::after { border-color: rgba(246,156,82,0.4); }

.header__logo-text {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--white);
  letter-spacing: 3px;
  text-transform: uppercase;
}

/* Nav */
.header__nav { display: flex; align-items: center; gap: 2px; }
.header__link {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,0.65);
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  transition: all var(--transition);
  letter-spacing: 0.3px;
  text-transform: uppercase;
  position: relative;
}
/* Animated underline */
.header__link::after {
  content: "";
  position: absolute;
  bottom: 2px;
  left: 50%;
  width: 0;
  height: 2px;
  background: var(--orange);
  border-radius: 2px;
  transition: all 0.3s var(--ease-out);
  transform: translateX(-50%);
}
.header__link:hover { color: var(--white); background: rgba(255,255,255,0.05); }
.header__link:hover::after { width: 20px; }
.header__link.is-active { color: var(--orange); }
.header__link.is-active::after { width: 20px; opacity: 0.6; }

.header__cta {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 700;
  background: linear-gradient(135deg, var(--orange), var(--orange-hover));
  color: var(--white);
  padding: 10px 24px;
  border-radius: var(--radius-sm);
  transition: all var(--transition);
  letter-spacing: 0.3px;
  text-transform: uppercase;
  margin-left: var(--space-md);
  position: relative;
  overflow: hidden;
}
.header__cta i { margin-right: 2px; font-size: 11px; }
/* Shimmer sweep */
.header__cta::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
  transition: left 0.5s var(--ease);
}
.header__cta:hover::before { left: 100%; }
.header__cta:hover {
  background: linear-gradient(135deg, var(--orange-hover), var(--orange-deep));
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(246,156,82,0.45);
}

/* Mobile Toggle */
.header__toggle {
  display: none;
  flex-direction: column;
  gap: 6px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  z-index: 10;
}
.header__toggle span {
  width: 26px;
  height: 2px;
  background: var(--white);
  border-radius: 2px;
  transition: all 0.4s var(--ease-out);
  transform-origin: center;
}
.header__toggle.is-active span:nth-child(1) { transform: rotate(45deg) translate(5px, 6px); }
.header__toggle.is-active span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.header__toggle.is-active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -6px); }

/* ===== Mobile Nav — Full-Screen Overlay ===== */
@media (max-width: 900px) {
  .topbar__left { display: none; }
  .header__toggle { display: flex; }
  /* The nav panel is a sibling of the logo and toggle inside .header, so once
     it gained a real z-index it started covering them — the close button
     stopped responding. Both are flex items, so z-index applies without
     needing position. They must outrank the panel below. */
  .header__logo,
  .header__toggle {
    z-index: 1002;
  }
  /* At 320-360px the wordmark ran past the space between the icon and the
     toggle and wrapped onto a second line, which pushed the header taller. */
  .header__logo-text {
    font-size: 17px;
    letter-spacing: 1.6px;
    white-space: nowrap;
  }
  .header__logo { min-width: 0; }
  .header__nav {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* Final stop was rgba(...,0.98) — enough for page text to read through the
       bottom of the panel. A menu overlay should be fully opaque. */
    background: linear-gradient(180deg, var(--dark-teal-deep) 0%, var(--dark-teal) 50%, var(--dark-teal-deep) 100%);
    flex-direction: column;
    padding: calc(var(--header-height) + var(--topbar-height) + var(--space-xl)) var(--space-lg) var(--space-xl);
    gap: var(--space-xs);
    overflow-y: auto;
    /* Was -1, which painted this full-screen panel BEHIND the page — the
       footer and back-to-top button showed straight through it. It has to
       sit above all page content but below the sticky header (1000) and
       topbar (1001) so the logo and close button stay on top of it. */
    z-index: 999;
  }
  /* Stop the page behind the overlay from scrolling while it's open. */
  body:has(.header__nav.is-open) {
    overflow: hidden;
  }

  /* `backdrop-filter` makes an element a containing block for its
     `position: fixed` descendants. The header gains one via .is-scrolled, so
     once the page was scrolled the fixed nav stopped resolving against the
     viewport and collapsed inside the 73px header — its links rendered past
     the panel's own `overflow-y: auto` box and were clipped away.

     Removing it only while the menu is open is not enough: the class flips
     on scroll, the menu opens on tap, and any transition or repaint in
     between reintroduces the containing block mid-animation. The nav lives
     inside .header, so the only reliable guarantee is that no ancestor ever
     has this property at mobile widths. The blur is a subtle touch on a 73px
     bar and costs GPU on phones — dropping it here loses nothing. */
  .header,
  .header.is-scrolled {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  .header__nav.is-open {
    display: flex;
    /* 0.4s left the panel around 15% opaque a frame or two in, so the page
       read straight through it and the open looked like a glitch. The panel
       now becomes solid quickly; the staggered links below still carry the
       motion. */
    animation: mobileNavIn 0.16s var(--ease-out) forwards;
  }
  .header__nav.is-open .header__link,
  .header__nav.is-open .header__cta {
    animation: mobileNavLinkIn 0.4s var(--ease-out) forwards;
    opacity: 0;
  }
  .header__nav.is-open .header__link:nth-child(1) { animation-delay: 0.08s; }
  .header__nav.is-open .header__link:nth-child(2) { animation-delay: 0.13s; }
  .header__nav.is-open .header__link:nth-child(3) { animation-delay: 0.18s; }
  .header__nav.is-open .header__link:nth-child(4) { animation-delay: 0.23s; }
  .header__nav.is-open .header__link:nth-child(5) { animation-delay: 0.28s; }
  .header__nav.is-open .header__link:nth-child(6) { animation-delay: 0.33s; }
  .header__nav.is-open .header__cta { animation-delay: 0.4s; }

  .header__link, .header__cta {
    width: 100%;
    text-align: center;
    padding: 18px;
    font-size: 17px;
    border-radius: var(--radius-sm);
  }
  .header__link::after { display: none; }
  .header__link:hover { background: rgba(246,156,82,0.06); }
  .header__cta {
    margin-left: 0;
    margin-top: var(--space-lg);
    padding: 20px;
    font-size: 16px;
    border-radius: var(--radius-md);
  }

  /* Decorative element in mobile nav */
  .header__nav::before {
    content: "";
    position: fixed;
    top: 30%;
    left: 50%;
    transform: translateX(-50%);
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(246,156,82,0.06) 0%, transparent 70%);
    pointer-events: none;
  }
}

@keyframes mobileNavIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes mobileNavLinkIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}