/* Single header stylesheet for Home and Solar EPC.
   Extracted from the approved homepage; no Solar-only header approximation. */
:root { --cf-site-font: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif; }
.site-header {
  --ink: #082b86; --ink-2: #445671; --ink-3: #68778f;
  --cyan: #2dc8f4; --cyan-deep: #2b75ff; --violet: #8149ff; --orange: #ff9e3d;
  color: var(--ink); line-height: 1.6;
}
.site-header, .site-header * , .site-header *::before, .site-header *::after { box-sizing: border-box; }
.site-header :where(a) { color: inherit; text-decoration: none; }
.site-header img { display: block; max-width: 100%; }
.site-header button { font: inherit; }
.site-header a:focus-visible, .site-header button:focus-visible {
  outline: 3px solid rgba(129,73,255,.26); outline-offset: 3px;
}
:root {--container: 1220px;--header-height: 72px;--ease: cubic-bezier(.2, .8, .2, 1);--transition: 260ms var(--ease);}
.site-header {font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;font-size: 16px;line-height: 1.6;-webkit-font-smoothing: antialiased;text-rendering: optimizeLegibility;}
.site-header .container {
  width: min(calc(100% - 48px), var(--container));
  margin-inline: auto;
}
.site-header {
  position: fixed;
  z-index: 100;
  inset: 0 0 auto;
  height: var(--header-height);
  border-bottom: 1px solid transparent;
  background: rgba(255,255,255,.76);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  transition: background var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.site-header.is-scrolled { border-color: rgba(203,216,230,.8); background: rgba(255,255,255,.94); box-shadow: 0 8px 24px rgba(15,35,67,.045); }
.header-inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.wordmark { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; min-width: 0; }
.wordmark-logo { width: 214px; height: auto; max-height: 45px; object-fit: contain; object-position: left center; }
.wordmark-company { margin-top: -3px; color: var(--ink-3); font-size: .57rem; font-weight: 740; letter-spacing: .12em; line-height: 1; text-transform: uppercase; }
@media (max-width: 900px) {
.site-header .container { width: min(calc(100% - 36px), var(--container)); }
}
@media (max-width: 700px) {
:root {--header-height: 66px;}
.site-header {font-size: 15px;}
.site-header .container { width: min(calc(100% - 28px), var(--container)); }
.header-inner { gap: 12px; }
.wordmark-logo { width: 168px; max-height: 42px; }
.wordmark-company { display: none; }
}
@media (max-width: 380px) {
.wordmark-logo { width: 152px; }
}
.header-inner { display: grid; grid-template-columns: auto 1fr auto; align-items: center; }
.header-nav { display: flex; align-items: center; justify-content: center; gap: 10px; min-width: 0; }
.header-tab {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 40px; padding: 0 16px; border-radius: 999px;
  border: 1px solid rgba(168, 190, 214, .55);
  background: rgba(255,255,255,.72);
  color: var(--ink-2); font-size: .9rem; font-weight: 700; letter-spacing: -.01em;
  transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition), box-shadow var(--transition);
  white-space: nowrap;
}
.header-tab:hover { transform: translateY(-1px); border-color: rgba(51, 122, 230, .34); background: rgba(255,255,255,.96); color: var(--ink); box-shadow: 0 10px 24px rgba(15,35,67,.05); }
.header-tab.is-active { background: rgba(13, 98, 235, .08); border-color: rgba(34, 132, 235, .24); color: #0e4aac; }
@media (max-width: 1120px) {
.header-inner { grid-template-columns: auto 1fr; row-gap: 10px; height: auto; padding-top: 10px; padding-bottom: 10px; align-items: center; }
.header-nav { grid-column: 1 / -1; justify-content: flex-start; overflow-x: auto; padding-bottom: 2px; }
.site-header { height: auto; }
:root {--header-height: 108px;}
}
@media (max-width: 900px) {
:root {--header-height: 118px;}
.header-inner { grid-template-columns: 1fr auto; align-items: center; }
.header-nav { gap: 8px; }
.header-tab { min-height: 36px; padding-inline: 14px; font-size: .84rem; }
}
@media (max-width: 640px) {
:root {--header-height: 124px;}
.header-inner { grid-template-columns: 1fr auto; column-gap: 10px; }
.header-nav { margin-top: 2px; }
.header-tab { min-height: 34px; padding-inline: 12px; font-size: .8rem; }
}
.header-inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 22px;
  height: 100%;
  padding-block: 0;
}
.header-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  overflow: visible;
}
.header-tab {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  padding: 0 15px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-2);
  font-size: .88rem;
  font-weight: 720;
  white-space: nowrap;
  transition: color var(--transition), background var(--transition), border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.header-tab:hover {
  transform: translateY(-1px);
  border-color: rgba(129,73,255,.16);
  background: linear-gradient(115deg, rgba(45,200,244,.08), rgba(129,73,255,.08), rgba(255,158,61,.06));
  color: var(--ink);
  box-shadow: 0 9px 22px rgba(30,55,110,.05);
}
.header-tab.is-active {
  border-color: rgba(43,117,255,.17);
  background: linear-gradient(115deg, rgba(45,200,244,.10), rgba(129,73,255,.09), rgba(255,158,61,.06));
  color: #173fa4;
}
.header-demo-button { flex: 0 0 auto; }
.mobile-demo-link, .mobile-nav-toggle { display: none; }
@media (max-width: 1040px) {
:root {--header-height: 72px;}
.site-header { height: var(--header-height); }
.header-inner {
    grid-template-columns: auto 1fr auto;
    height: 100%;
    padding-block: 0;
    row-gap: 0;
  }
.mobile-nav-toggle {
    position: relative;
    z-index: 3;
    display: inline-flex;
    grid-column: 2;
    justify-self: end;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(43,117,255,.16);
    border-radius: 14px;
    background: rgba(255,255,255,.88);
    box-shadow: 0 10px 24px rgba(16,35,84,.06);
    cursor: pointer;
  }
.mobile-nav-toggle span {
    position: absolute;
    width: 20px;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--cyan-deep), var(--violet));
    transition: transform var(--transition), opacity var(--transition), top var(--transition);
  }
.mobile-nav-toggle span:nth-child(1) { top: 14px; }
.mobile-nav-toggle span:nth-child(2) { top: 21px; }
.mobile-nav-toggle span:nth-child(3) { top: 28px; }
.site-header.is-menu-open .mobile-nav-toggle span:nth-child(1) { top: 21px; transform: rotate(45deg); }
.site-header.is-menu-open .mobile-nav-toggle span:nth-child(2) { opacity: 0; }
.site-header.is-menu-open .mobile-nav-toggle span:nth-child(3) { top: 21px; transform: rotate(-45deg); }
.header-nav {
    position: absolute;
    top: calc(100% + 10px);
    right: max(18px, calc((100vw - var(--container)) / 2));
    left: max(18px, calc((100vw - var(--container)) / 2));
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 14px;
    border: 1px solid rgba(199,213,233,.92);
    border-radius: 22px;
    background: rgba(255,255,255,.97);
    box-shadow: 0 24px 70px rgba(16,35,84,.16);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px) scale(.985);
    transform-origin: top center;
    pointer-events: none;
    transition: opacity var(--transition), visibility var(--transition), transform var(--transition);
  }
.site-header.is-menu-open .header-nav {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: auto;
  }
.header-tab {
    min-height: 48px;
    justify-content: flex-start;
    padding-inline: 16px;
    border-color: rgba(214,225,239,.75);
    background: #fff;
  }
.mobile-demo-link {
    display: inline-flex;
    grid-column: 1 / -1;
    width: 100%;
    margin-top: 4px;
  }
}
@media (max-width: 620px) {
:root {--header-height: 68px;}
.wordmark-logo { width: 158px; max-height: 45px; }
.header-demo-button { display: none; }
.header-inner { grid-template-columns: minmax(0, 1fr) auto; gap: 12px; }
.mobile-nav-toggle { grid-column: 2; }
.header-nav {
    grid-template-columns: 1fr;
    right: 14px;
    left: 14px;
  }
.mobile-demo-link { grid-column: 1; }
}
@media print { .site-header { display:none!important; } }