/* California Pattern Maker: ocean / Venice Beach inspired navigation.
   Navigation styling only; page content, SEO, and service text remain unchanged. */

body .top{
  position: sticky;
  top: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 16px clamp(18px,3.4vw,62px);
  color: #ffffff;
  border: 0;
  border-bottom: 3px solid rgba(240, 210, 154, 0.9);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.00)),
    linear-gradient(135deg, #37b7d4 0%, #1688b9 22%, #0e5f96 52%, #0a3f77 100%);
  box-shadow: 0 12px 28px rgba(6, 44, 77, 0.20);
  overflow: hidden;
}

body .top::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 18%, rgba(255,255,255,0.24) 0, rgba(255,255,255,0.08) 18%, transparent 34%),
    radial-gradient(circle at 78% 14%, rgba(255,255,255,0.16) 0, transparent 28%),
    linear-gradient(90deg, rgba(255,255,255,0.08) 0%, transparent 30%, rgba(255,255,255,0.06) 55%, transparent 75%, rgba(255,255,255,0.04) 100%);
}

body .top::after{
  content: "";
  position: absolute;
  left: -6%;
  right: -6%;
  bottom: -15px;
  height: 34px;
  pointer-events: none;
  background:
    radial-gradient(50px 16px at 5% 60%, rgba(255,255,255,0.36) 0 55%, transparent 57%),
    radial-gradient(58px 18px at 18% 60%, rgba(255,255,255,0.34) 0 55%, transparent 57%),
    radial-gradient(62px 19px at 34% 60%, rgba(255,255,255,0.32) 0 55%, transparent 57%),
    radial-gradient(60px 17px at 50% 60%, rgba(255,255,255,0.34) 0 55%, transparent 57%),
    radial-gradient(58px 18px at 66% 60%, rgba(255,255,255,0.30) 0 55%, transparent 57%),
    radial-gradient(56px 17px at 81% 60%, rgba(255,255,255,0.33) 0 55%, transparent 57%),
    radial-gradient(54px 16px at 95% 60%, rgba(255,255,255,0.30) 0 55%, transparent 57%);
  opacity: 0.8;
}

body .top > *{
  position: relative;
  z-index: 1;
}

body .top .brand{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  max-width: 280px;
  color: #ffffff;
  font-size: clamp(1rem,1.2vw,1.14rem);
  font-weight: 800;
  letter-spacing: 0.025em;
  line-height: 1.15;
  text-transform: uppercase;
  text-decoration: none;
  text-shadow: 0 1px 1px rgba(0,0,0,0.14);
}

body .top .brand::before{
  content: "";
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 32%, #fff7d1 0 20%, #ffd98c 21% 58%, #ffb24e 59% 100%);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.16), 0 0 22px rgba(255, 199, 108, 0.34);
}

body .top .site-nav{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: nowrap;
  gap: 6px;
  margin: 0;
}

body .top .site-nav a{
  position: relative;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  color: #f8fdff;
  font-size: clamp(0.71rem,0.8vw,0.86rem);
  font-weight: 650;
  letter-spacing: 0.01em;
  line-height: 1.2;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(2px);
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

body .top .site-nav a:not(.nav-contact)::after{
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 7px;
  height: 2px;
  border-radius: 999px;
  background: rgba(255, 240, 205, 0.95);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .18s ease;
}

body .top .site-nav a:not(.nav-contact):hover,
body .top .site-nav a:not(.nav-contact):focus-visible,
body .top .site-nav a[aria-current="page"]{
  background: rgba(255,255,255,0.17);
  color: #ffffff;
  border-color: rgba(255,255,255,0.26);
  box-shadow: 0 8px 20px rgba(8, 67, 110, 0.17);
  transform: translateY(-1px);
}

body .top .site-nav a:not(.nav-contact):hover::after,
body .top .site-nav a[aria-current="page"]:not(.nav-contact)::after{
  transform: scaleX(1);
}

body .top .site-nav .nav-contact{
  margin-left: 12px;
  padding: 11px 20px;
  border: 1px solid rgba(255, 213, 141, 0.92);
  background: linear-gradient(180deg, #ffd57e 0%, #f3b85f 100%);
  color: #0c4d74;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.055em;
  box-shadow: 0 10px 20px rgba(9, 55, 89, 0.18);
}

body .top .site-nav .nav-contact:hover,
body .top .site-nav .nav-contact:focus-visible{
  background: linear-gradient(180deg, #ffe4ac 0%, #ffd186 100%);
  color: #083e60;
  border-color: rgba(255, 237, 200, 0.96);
  transform: translateY(-1px);
}

body .top .nav-toggle{
  display: none;
  align-items: center;
  gap: 9px;
  border: 1px solid rgba(255,255,255,0.24);
  background: rgba(255,255,255,0.10);
  color: #ffffff;
  border-radius: 999px;
  padding: 10px 14px;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  backdrop-filter: blur(3px);
}

body .top .nav-toggle:focus-visible,
body .top a:focus-visible{
  outline: 3px solid rgba(255, 234, 186, 0.95);
  outline-offset: 3px;
}

@media (max-width: 1190px){
  body .top{
    flex-wrap: wrap;
  }

  body .top .nav-toggle{
    display: inline-flex;
    margin-left: auto;
  }

  body .top .site-nav{
    display: none;
    order: 3;
    flex-basis: 100%;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 16px 0 4px;
    border-top: 1px solid rgba(255,255,255,0.18);
  }

  body .top .site-nav.is-open{
    display: flex;
  }

  body .top .site-nav a{
    font-size: 0.97rem;
    padding: 13px 14px;
    white-space: normal;
    justify-content: center;
  }

  body .top .site-nav a:not(.nav-contact)::after{
    left: 50%;
    right: auto;
    width: 78px;
    transform: translateX(-50%) scaleX(0);
    transform-origin: center;
  }

  body .top .site-nav a:not(.nav-contact):hover::after,
  body .top .site-nav a[aria-current="page"]:not(.nav-contact)::after{
    transform: translateX(-50%) scaleX(1);
  }

  body .top .site-nav .nav-contact{
    margin: 4px 0 0;
    justify-content: center;
  }

  body .top .brand{
    max-width: calc(100% - 120px);
  }
}

@media (max-width: 420px){
  body .top .brand{
    font-size: 0.9rem;
    max-width: calc(100% - 108px);
    gap: 8px;
  }

  body .top .nav-toggle{
    padding: 9px 12px;
  }
}

@media (prefers-reduced-motion: reduce){
  body .top .site-nav a,
  body .top .site-nav a::after,
  body .top .nav-contact{
    transition: none;
  }
}