/* Shared header proof/social strip for all pages. */
body::before {
  content: "";
  display: block;
  height: clamp(30px, 3.7vw, 42px);
}

.skip-to-content {
  position: fixed;
  top: 10px;
  left: 50%;
  z-index: 120;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 10px 16px;
  border: 2px solid #ffc36b;
  border-radius: 999px;
  color: #142a27;
  background: #ffc36b;
  font-family: "Barlow Condensed", "Barlow", "Trebuchet MS", sans-serif;
  font-size: 0.92rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
  transform: translate(-50%, -140%);
  transition: transform 0.16s ease;
}

body > a.skip-to-content {
  position: fixed !important;
}

.skip-to-content:focus,
.skip-to-content:focus-visible {
  transform: translate(-50%, 0);
}

main:focus {
  outline: none;
}

.site-header {
  --header-edge-offset: clamp(18px, 4vw, 52px);
  grid-template-columns: minmax(250px, 1fr) minmax(360px, auto) minmax(170px, 1fr) !important;
  grid-template-areas:
    "proof brand call"
    "nav nav nav";
  gap: 8px clamp(14px, 2vw, 26px);
  min-height: auto !important;
  padding-top: 8px !important;
  padding-bottom: 9px !important;
}

.brand {
  grid-area: brand;
  justify-self: center;
  align-self: center;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 1.45vw, 18px);
  width: fit-content;
  max-width: max-content;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  overflow: visible;
  line-height: 1;
  text-decoration: none;
}

.brand img {
  width: clamp(198px, 19.5vw, 295px);
  max-height: 74px;
  border-radius: 0;
  object-fit: contain;
  object-position: center;
}

.brand-license {
  color: rgba(255, 255, 255, 0.84);
  font-family: "Barlow Condensed", "Barlow", "Trebuchet MS", sans-serif;
  font-size: clamp(0.76rem, 0.96vw, 0.98rem);
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.brand-text {
  display: none;
  min-width: 0;
  padding-left: 0;
  border-left: 0;
  text-align: center;
}

.header-center {
  display: contents;
}

.header-proof {
  grid-area: proof;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  justify-self: start;
  align-self: center;
  gap: 10px;
  width: 100%;
  min-width: 0;
  color: #fff;
}

.google-rating,
.social-link {
  text-decoration: none;
}

.google-rating {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 42px;
  padding: 7px 12px 7px 9px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.09);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  white-space: nowrap;
}

.google-mark {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #fff;
  font-family: Arial, sans-serif;
  font-size: 1.05rem;
  font-weight: 800;
  color: #4285f4;
  box-shadow: 0 5px 16px rgba(0, 0, 0, 0.16);
}

.rating-copy {
  display: flex;
  flex-direction: column;
  gap: 1px;
  line-height: 1;
}

.rating-copy strong {
  font-family: "Barlow Condensed", "Barlow", "Trebuchet MS", sans-serif;
  font-size: 0.86rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.rating-stars {
  color: #ffc36b;
  font-size: 0.76rem;
  letter-spacing: 0.08em;
}

.header-socials {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.social-link {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.92);
  background: rgba(20, 42, 39, 0.4);
  font-family: "Barlow Condensed", "Barlow", "Trebuchet MS", sans-serif;
  font-size: 0;
  font-weight: 900;
  line-height: 0;
}

.social-link::before {
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  background: currentColor;
  transform-origin: center;
  -webkit-mask: var(--social-icon) center / contain no-repeat;
  mask: var(--social-icon) center / contain no-repeat;
}

.social-link--facebook {
  --social-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15.2 8.1h-2V6.7c0-.5.4-.7.8-.7h1.2V3.2L13 3.1c-2.5 0-3.9 1.5-3.9 4.1v.9H6.7v3.2h2.4V21h4.1v-9.7h2.7l.4-3.2Z'/%3E%3C/svg%3E");
}

.social-link--instagram {
  --social-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.5 2h9A5.5 5.5 0 0 1 22 7.5v9a5.5 5.5 0 0 1-5.5 5.5h-9A5.5 5.5 0 0 1 2 16.5v-9A5.5 5.5 0 0 1 7.5 2Zm0 2.2a3.3 3.3 0 0 0-3.3 3.3v9a3.3 3.3 0 0 0 3.3 3.3h9a3.3 3.3 0 0 0 3.3-3.3v-9a3.3 3.3 0 0 0-3.3-3.3h-9Zm4.5 3.2a4.6 4.6 0 1 1 0 9.2 4.6 4.6 0 0 1 0-9.2Zm0 2.1a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5Zm5-2.4a1.1 1.1 0 1 1 0 2.2 1.1 1.1 0 0 1 0-2.2Z'/%3E%3C/svg%3E");
}

.social-link--instagram::before {
  width: 19px;
  height: 19px;
}

.social-link--tiktok {
  --social-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16.6 3c.3 2.3 1.7 3.8 4 4.2v3.2c-1.5-.1-2.9-.6-4-1.4v6.1c0 3.3-2.2 5.9-5.6 5.9-3 0-5.2-1.9-5.2-4.7 0-3 2.3-4.9 5.3-4.9.4 0 .8 0 1.1.1v3.2a3 3 0 0 0-1.1-.2c-1.2 0-2 .7-2 1.7s.8 1.7 1.9 1.7c1.4 0 2.2-.8 2.2-2.6V3h3.4Z'/%3E%3C/svg%3E");
}

.social-link:focus-visible {
  outline: 2px solid #ffc36b;
  outline-offset: 3px;
}

.social-link:hover,
.google-rating:hover {
  border-color: rgba(255, 195, 107, 0.6);
  color: #ffc36b;
}

.social-link[data-link-needed="true"] {
  opacity: 0.78;
}

.header-center .main-nav {
  grid-area: nav;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 1.7vw, 24px);
  width: 100%;
  min-height: 34px;
  padding-top: 6px;
  border-top: 0;
}

.header-center .main-nav .header-socials {
  position: absolute;
  left: calc(-1 * var(--header-edge-offset) + 18px);
  top: calc(50% + 3px);
  margin-right: 0;
  transform: translateY(-50%);
}

.header-center .main-nav .nav-dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.header-center .main-nav .nav-dropdown__trigger {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 0;
  border: 0;
  color: rgba(255, 255, 255, 0.9);
  background: transparent;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
}

.header-center .main-nav .nav-dropdown__trigger::-webkit-details-marker {
  display: none;
}

.header-center .main-nav .nav-dropdown__trigger::after {
  width: 0;
  height: 0;
  border-top: 5px solid currentColor;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
  content: "";
}

.header-center .main-nav .nav-dropdown__menu {
  position: absolute;
  top: calc(100% + 2px);
  left: 50%;
  z-index: 80;
  display: grid;
  min-width: 250px;
  max-height: min(76vh, 560px);
  overflow-y: auto;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: 18px;
  background: rgba(8, 38, 29, 0.96);
  box-shadow: 0 18px 48px rgba(8, 38, 29, 0.28);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -6px);
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s ease;
  visibility: hidden;
}

.header-center .main-nav .nav-dropdown:hover .nav-dropdown__menu,
.header-center .main-nav .nav-dropdown[open] .nav-dropdown__menu,
.header-center .main-nav .nav-dropdown:focus-within .nav-dropdown__menu {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
  visibility: visible;
}

.header-center .main-nav .nav-dropdown__trigger:hover,
.header-center .main-nav .nav-dropdown__trigger:focus-visible {
  color: #ffc36b;
}

.header-center .main-nav > a[aria-current="page"],
.header-center .main-nav .nav-dropdown[data-current-section] > .nav-dropdown__trigger {
  color: #ffc36b;
  text-shadow: 0 0 20px rgba(255, 195, 107, 0.24);
}

.header-center .main-nav .nav-dropdown__menu a {
  display: block;
  padding: 9px 10px;
  border-radius: 12px;
  color: rgba(255, 255, 255, 0.92);
  white-space: nowrap;
}

.header-center .main-nav .nav-dropdown__menu a.nav-roof-iq {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 40px;
  padding: 5px 10px;
}

.header-center .main-nav .nav-dropdown__menu a.nav-roof-iq > img {
  display: block;
  width: auto !important;
  max-width: 150px !important;
  min-width: 0;
  height: 30px !important;
  object-fit: contain;
  object-position: left center;
  border-radius: 0;
  background: transparent;
  flex: 0 0 auto;
}

.header-center .main-nav .nav-dropdown__menu a.nav-roof-iq > span {
  display: none;
}

.header-center .main-nav .nav-dropdown__menu a:hover,
.header-center .main-nav .nav-dropdown__menu a:focus-visible {
  color: #ffc36b;
  background: rgba(255, 195, 107, 0.16);
}

.header-center .main-nav .nav-dropdown__menu a[aria-current="page"] {
  color: #142a27;
  background: #ffc36b;
}

.header-center .main-nav .social-link {
  width: 31px;
  height: 31px;
  min-width: 31px;
  min-height: 31px;
}

.header-center .main-nav .social-link::before {
  width: 15px;
  height: 15px;
}

.mobile-nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 44px;
  padding: 9px 14px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  color: #ffffff;
  background: rgba(8, 38, 29, 0.42);
  font-family: "Barlow Condensed", "Barlow", "Trebuchet MS", sans-serif;
  font-size: 0.9rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  line-height: 1;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 12px 28px rgba(8, 38, 29, 0.2);
}

.mobile-nav-toggle__icon {
  display: grid;
  gap: 4px;
  width: 18px;
}

.mobile-nav-toggle__icon span {
  display: block;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
}

.mobile-nav-toggle:hover,
.mobile-nav-toggle:focus-visible {
  border-color: rgba(255, 195, 107, 0.62);
  color: #ffc36b;
}

.header-call {
  grid-area: call;
  justify-self: end;
  align-self: center;
  min-height: 50px;
}

@media (max-width: 1100px) {
  .site-header {
    grid-template-columns: minmax(230px, 1fr) minmax(310px, auto) minmax(145px, 1fr) !important;
  }

  .brand img {
    width: clamp(178px, 19vw, 240px);
    max-height: 66px;
  }

  .brand-license {
    font-size: 0.76rem;
  }

  .google-rating {
    min-height: 38px;
    padding: 6px 10px 6px 8px;
  }

  .google-mark {
    width: 24px;
    height: 24px;
    font-size: 0.95rem;
  }

  .rating-copy strong {
    font-size: 0.78rem;
  }

  .social-link {
    width: 34px;
    height: 34px;
    min-width: 34px;
    min-height: 34px;
  }
}

@media (max-width: 980px) {
  .site-header {
    grid-template-columns: minmax(180px, 1fr) minmax(270px, auto) minmax(128px, 1fr) !important;
    grid-template-areas:
      "proof brand call"
      "mobile-menu mobile-menu mobile-menu"
      "nav nav nav";
    gap: 8px 12px;
  }

  .header-center {
    display: contents;
  }

  .mobile-nav-toggle {
    grid-area: mobile-menu;
    display: inline-flex;
    justify-self: center;
    width: min(240px, 100%);
  }

  .has-mobile-nav .site-header:not(.is-mobile-nav-open) .header-center .main-nav {
    display: none !important;
  }

  .header-center .main-nav {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 9px;
    align-items: stretch;
    justify-content: stretch;
    max-height: min(70vh, 520px);
    overflow-y: auto;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 20px;
    background: rgba(8, 38, 29, 0.82);
    box-shadow: 0 18px 44px rgba(8, 38, 29, 0.22);
  }

  .header-center .main-nav > a,
  .header-center .main-nav .nav-dropdown__trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    width: 100%;
    padding: 10px 12px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.08);
    text-align: center;
  }

  .header-center .main-nav .nav-dropdown {
    display: block;
    width: 100%;
  }

  .header-center .main-nav .nav-dropdown__trigger {
    justify-content: space-between;
  }

  .header-center .main-nav .nav-dropdown__menu {
    position: static;
    left: auto;
    width: 100%;
    min-width: 0;
    max-height: none;
    margin-top: 7px;
    opacity: 1;
    pointer-events: auto;
    transform: none;
    visibility: visible;
  }

  .header-center .main-nav .nav-dropdown__menu a {
    display: flex;
    align-items: center;
    min-height: 42px;
  }

  .header-center .main-nav .nav-dropdown:hover .nav-dropdown__menu,
  .header-center .main-nav .nav-dropdown[open] .nav-dropdown__menu,
  .header-center .main-nav .nav-dropdown:focus-within .nav-dropdown__menu {
    transform: none;
  }

  .header-center .main-nav .nav-dropdown:not([open]) .nav-dropdown__menu {
    display: none !important;
  }

  .header-proof {
    flex-wrap: nowrap;
  }
}

@media (max-width: 760px) {
  .header-center .main-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .header-center .main-nav .nav-dropdown__menu {
    max-height: 360px;
  }

  .header-center .main-nav .nav-dropdown__menu a {
    white-space: normal;
  }
}

@media (max-width: 640px) {
  .site-header {
    --header-edge-offset: 10px;
    grid-template-columns: minmax(104px, 1fr) minmax(170px, auto) minmax(102px, 1fr) !important;
    gap: 7px 6px;
    padding-inline: 10px !important;
  }

  .brand img {
    width: clamp(110px, 26vw, 140px);
    max-height: 44px;
  }

  .brand {
    gap: 5px;
  }

  .brand-license {
    font-size: 0.5rem;
  }

  .header-proof {
    gap: 6px;
  }

  .google-rating {
    min-height: 32px;
    padding: 5px 8px 5px 6px;
    gap: 6px;
  }

  .google-mark {
    width: 24px;
    height: 24px;
    font-size: 0.95rem;
  }

  .rating-copy strong {
    font-size: 0.66rem;
  }

  .rating-stars {
    display: none;
  }

  .social-link {
    width: 30px;
    height: 30px;
    min-width: 30px;
    min-height: 30px;
  }

  .social-link::before {
    width: 16px;
    height: 16px;
  }

  .header-center .main-nav .social-link {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
  }

  .header-center .main-nav .social-link::before {
    width: 14px;
    height: 14px;
  }

  .header-center .main-nav .header-socials {
    display: none;
  }
}

@media (max-width: 520px) {
  .header-center .main-nav {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 430px) {
  .site-header {
    grid-template-columns: 1fr auto 1fr !important;
  }

  .rating-copy strong {
    display: none;
  }

  .google-rating {
    gap: 6px;
    padding-right: 6px;
  }

  .header-call {
    min-width: 0;
    padding-inline: 8px;
  }
}

/* Operation Clean Ridge: calmer global header/navigation polish. */
.site-header {
  gap: 6px clamp(12px, 1.8vw, 22px);
  padding-top: 7px !important;
  padding-bottom: 8px !important;
  background:
    linear-gradient(90deg, rgba(20, 37, 35, 0.97), rgba(54, 82, 82, 0.97)),
    #446868;
  box-shadow: 0 12px 34px rgba(8, 38, 29, 0.2);
}

.brand img {
  width: clamp(188px, 18.5vw, 270px);
}

.brand-license {
  letter-spacing: 0.06em;
}

.google-rating {
  min-height: 38px;
  padding: 6px 11px 6px 7px;
  background: rgba(255, 255, 255, 0.07);
}

.header-call {
  min-height: 46px;
  padding: 9px 16px;
  box-shadow: none;
}

.header-center .main-nav {
  gap: clamp(10px, 1.35vw, 18px);
  min-height: 32px;
  padding-top: 4px;
  font-size: 0.84rem;
  letter-spacing: 0.07em;
}

.header-center .main-nav > a,
.header-center .main-nav .nav-dropdown__trigger {
  padding-top: 7px;
  padding-bottom: 7px;
}

.header-center .main-nav .nav-dropdown__menu {
  top: calc(100% + 4px);
  min-width: 230px;
  padding: 6px;
  border-radius: 8px;
  background: rgba(8, 38, 29, 0.98);
  box-shadow: 0 16px 36px rgba(8, 38, 29, 0.3);
}

.header-center .main-nav .nav-dropdown__menu a {
  min-height: 36px;
  padding: 8px 10px;
  border-radius: 6px;
}

.mobile-nav-toggle {
  min-height: 40px;
  padding: 8px 14px;
  box-shadow: none;
}

@media (max-width: 980px) {
  .header-center .main-nav {
    gap: 7px;
    max-height: min(62vh, 480px);
    padding: 8px;
    border-radius: 10px;
  }

  .header-center .main-nav > a,
  .header-center .main-nav .nav-dropdown__trigger {
    min-height: 38px;
    padding: 8px 10px;
    border-radius: 8px;
  }

  .header-center .main-nav .nav-dropdown__menu {
    margin-top: 6px;
    border-radius: 8px;
  }

  .header-center .main-nav .nav-dropdown__menu a {
    min-height: 36px;
  }
}

@media (max-width: 640px) {
  .site-header {
    gap: 6px;
  }

  .brand-license {
    display: none;
  }

  .brand img {
    width: clamp(112px, 25vw, 132px);
  }

  .header-call {
    min-height: 42px;
    padding-inline: 9px;
  }

  .mobile-nav-toggle {
    width: min(220px, 100%);
  }
}

/* Liquid Glass header touch: visual polish only. */
.site-header {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.04) 38%, rgba(255, 195, 107, 0.08)),
    linear-gradient(90deg, rgba(18, 37, 34, 0.88), rgba(47, 83, 78, 0.74)) !important;
  border-bottom-color: rgba(255, 255, 255, 0.2);
  box-shadow:
    0 22px 68px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.32);
  backdrop-filter: blur(20px) saturate(1.22);
  -webkit-backdrop-filter: blur(20px) saturate(1.22);
}

.header-call,
.google-rating,
.social-link {
  border-color: rgba(255, 255, 255, 0.3);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.05)),
    rgba(18, 46, 42, 0.62);
  box-shadow:
    0 22px 68px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(20px) saturate(1.22);
  -webkit-backdrop-filter: blur(20px) saturate(1.22);
}

@media (min-width: 861px) {
  .site-header .header-call {
    transform: translateY(8px);
  }
}

.header-center .main-nav a,
.nav-dropdown__trigger {
  border-radius: 999px;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.28);
}

.header-center .main-nav a:hover,
.nav-dropdown__trigger:hover {
  background: rgba(255, 255, 255, 0.08);
}