:root{--default-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft Yahei UI", "Microsoft Yahei", "Source Han Sans CN", sans-serif}*,*:before,*:after{box-sizing:border-box}html,body{margin:0;max-width:100%;overflow-x:clip}input,select,textarea,button{outline:0}.nav-overlay{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:#00000059;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:10000}.nav-overlay.open{display:flex;animation:fadeIn .25s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.nav-overlay:before{content:"";position:absolute;left:0;right:0;top:18%;height:64%;background:linear-gradient(to bottom,#ffffffd9,#ffffffa6);pointer-events:none}.nav-close{position:absolute;top:16px;left:50%;transform:translate(-50%);background:transparent;border:0;color:#fff;font-family:Power Grotesk,var(--default-font-family);font-size:28px;font-weight:600;cursor:pointer}.nav-menu{display:flex;flex-direction:column;gap:28px;text-align:center;z-index:1}.nav-link{text-decoration:none;color:#0a2c48;font-family:Power Grotesk,var(--default-font-family);font-weight:400;font-size:90px;line-height:1;opacity:0;transform:translateY(18px);transition:opacity .35s ease,transform .35s ease}.nav-overlay.open .nav-link{opacity:1;transform:none}.nav-overlay.open .nav-link:nth-child(1){transition-delay:.05s}.nav-overlay.open .nav-link:nth-child(2){transition-delay:.1s}.nav-overlay.open .nav-link:nth-child(3){transition-delay:.15s}.nav-overlay.open .nav-link:nth-child(4){transition-delay:.2s}.menu,.menu-p{cursor:pointer}:root{--home-header-top: 30px;--home-header-h: 110px}html:not(.scrolled) body:has(.menu):before,html.scrolled body:has(.menu):before{top:0;height:var(--home-header-h)!important}@media (max-width: 640px){:root{--home-header-top: 8px;--home-header-h: 50px}}html,body{position:relative}html:not(.scrolled) body:has(.menu):before,html.scrolled body:has(.menu):before{content:"";position:fixed;top:0;left:0;width:100%;height:60px;background:#0a2c48a8;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid rgba(196,235,255,.25);z-index:219;pointer-events:none;opacity:0;transition:opacity .25s ease}html.scrolled body:has(.menu):before{opacity:1}@media (max-width: 640px){html:not(.scrolled) body:has(.menu):before,html.scrolled body:has(.menu):before{height:54px}}body:before{content:"";position:fixed;top:0;left:0;right:0;height:80px;background:#0a2c48db;-webkit-backdrop-filter:saturate(120%) blur(6px);backdrop-filter:saturate(120%) blur(6px);border-bottom:1px solid rgba(196,235,255,.28);z-index:219;pointer-events:none}.main-container .menu,.main-container .rectangle{z-index:220!important}@media (max-width: 640px){body:before{height:52px}}:root{--safe-bottom: env(safe-area-inset-bottom, 0px)}@media screen and (max-width: 1024px){.nav-menu{gap:22px;padding:0 6vw}.nav-link{font-size:clamp(42px,9.5vw,72px);line-height:1.05}.nav-close{top:14px;font-size:24px}.nav-overlay:before{top:14%;height:68%}}@media screen and (max-width: 768px){.nav-menu{gap:20px;max-height:72vh;overflow:auto;-webkit-overflow-scrolling:touch}.nav-link{font-size:clamp(28px,9vw,56px)}.nav-close{top:12px;font-size:22px}.nav-overlay{background:#00000073;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.nav-overlay:before{top:12%;height:70%;background:linear-gradient(to bottom,#ffffffe0,#fff9)}body:before{height:64px}}@media screen and (max-width: 480px){.nav-menu{gap:18px;padding:0 7vw calc(16px + var(--safe-bottom));align-items:center}.nav-link{font-size:clamp(22px,9.2vw,40px);line-height:1.08;letter-spacing:.2px}.nav-close{top:10px;font-size:20px}.nav-overlay:before{top:10%;height:72%}.menu,.menu-p{padding:6px 8px;-webkit-tap-highlight-color:transparent}}@media screen and (max-width: 360px){.nav-menu{gap:16px}.nav-link{font-size:clamp(20px,8.6vw,34px)}}@supports (-webkit-touch-callout: none){@media screen and (max-width: 768px){.nav-overlay{min-height:100svh}}}@media (prefers-reduced-motion: reduce){.nav-overlay.open .nav-link{transition:none;transform:none;opacity:1}.nav-overlay.open{animation:none}}@media (max-width: 400px){.topbar{height:54px}.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0}.brand{display:none}.menu{font-size:20px;padding:6px 8px;min-width:0;white-space:nowrap}.get-quote{padding:7px 10px;font-size:12.5px;min-width:auto;white-space:nowrap;flex:0 0 auto}}header.topbar{background:#0a2c48!important;border-bottom:1px solid rgba(255,255,255,.18)!important}header.topbar .brand,header.topbar .menu{color:#fff!important;font-weight:600!important}.get-quote,.get-quote-p,.main-container .rectangle,.rectangle-p4,.ap-get-quote{background:#14a1e8!important;color:#fff!important;border-radius:999px!important;border:1px solid rgba(255,255,255,.35)!important;box-shadow:0 10px 22px #14a1e838!important;font-weight:700!important}.get-quote:hover,.rectangle-p4:hover,.ap-get-quote:hover{transform:translateY(-1px);box-shadow:0 16px 32px #14a1e847!important;filter:brightness(1.03)}.topbar{background:#0a2c48!important;border-bottom:1px solid rgba(255,255,255,.2)}.topbar .brand,.topbar .menu{color:#fff!important}.topbar .get-quote{position:relative;display:inline-flex;align-items:center;height:44px;padding:10px 54px 10px 18px;border-radius:999px;background:#14a1e8!important;color:#fff!important;font-weight:800;text-decoration:none;border:1px solid rgba(255,255,255,.35);box-shadow:0 10px 22px #14a1e82e;box-shadow:inset 0 0 0 2px #ffffff47,0 10px 22px #14a1e82e}.topbar .get-quote:hover{transform:translateY(-1px);box-shadow:inset 0 0 0 2px #ffffff52,0 16px 32px #14a1e847}.get-quote{background:#14a1e8!important;color:#fff!important}:root{--brand-navy:#0a2c48;--brand-blue:#14a1e8}html body header.topbar{background:var(--brand-navy)!important;border-bottom:1px solid rgba(255,255,255,.2)!important}html body header.topbar .brand,html body header.topbar .menu{color:#fff!important;font-weight:600!important}html body header.topbar .get-quote{position:relative;display:inline-flex;align-items:center;justify-content:center;height:44px;padding:10px 54px 10px 18px;border-radius:999px;background:var(--brand-blue)!important;color:#fff!important;font-weight:800;text-decoration:none;border:1px solid rgba(255,255,255,.35);box-shadow:inset 0 0 0 2px #ffffff47,0 10px 22px #14a1e82e}html body header.topbar .get-quote:hover{transform:translateY(-1px);box-shadow:inset 0 0 0 2px #ffffff52,0 16px 32px #14a1e847}html body header.topbar .get-quote:after{content:"";position:absolute;right:8px;top:50%;width:28px;height:28px;transform:translateY(-50%);border-radius:999px;background:#fff;border:1px solid rgba(255,255,255,.45)}html body header.topbar .get-quote:before{display:none!important}html body header.topbar .get-quote:after{content:"";position:absolute;right:8px;top:50%;width:28px;height:28px;transform:translateY(-50%);border-radius:999px;background:#fff;border:1px solid rgba(255,255,255,.45);background-repeat:no-repeat;background-position:center;background-size:55% 55%}#about .topbar .get-quote:before,#about .topbar .get-quote:after,#services .topbar .get-quote:before,#services .topbar .get-quote:after{content:none!important}#about .topbar .get-quote,#services .topbar .get-quote{padding:10px 18px!important}body:before{content:none!important}.main-container,.main-container .pic-13,.main-container .rectangle-45{margin-top:0!important;padding-top:0!important;top:0!important}
/* ==== HOME & PROJECTS: solid header bar + unified Get Quote + mobile ==== */

/* header height knobs */
body.home, body.projects-page { --nav-h: 64px; }



/* Keep buttons above the bar */
body.home .menu,
body.home .rectangle,
body.projects-page .menu-p,
body.projects-page .rectangle-p4{ z-index: 220 !important; }

/* Nudge them down from the top edge */
body.home .menu,
body.projects-page .menu-p{ top: 12px !important; }

body.home .rectangle,
body.projects-page .rectangle-p4{
  top: 12px !important;
  height: 44px !important;
  border-radius: 999px !important;
  background: #14a1e8 !important;
  border: 1px solid rgba(255,255,255,.35) !important;
  box-shadow: 0 10px 22px rgba(20,161,232,.18) !important;
}

/* If your pages render small “ellipse/arrow” artwork, hide them (we’ll add our own) */
body.projects-page .ellipse-p,
body.projects-page .arrow-p,
body.home .ellipse{ display: none !important; }

/* Add the white puck + arrow to the pills on Home & Projects */
body.home .rectangle::after,
body.projects-page .rectangle-p4::after{
  content:"";
  position:absolute; right:8px; top:50%;
  width:28px; height:28px; transform:translateY(-50%);
  border-radius:999px; background:#fff;
  border:1px solid rgba(255,255,255,.45);
  background-repeat:no-repeat; background-position:center; background-size:55% 55%;
  /* navy arrow */
  background-image: url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\
<path d="M9 15l6-6M10 8h7v7" fill="none" stroke="%230a2c48" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>\
</svg>');
}

/* Tighten on mobile so Menu/Get Quote don’t collide */
@media (max-width: 640px){
  body.home, body.projects-page{ --nav-h: 52px; }

  body.home .menu,
  body.projects-page .menu-p{
    font-size: 22px !important;
    left: 12px !important;
  }

  body.home .rectangle,
  body.projects-page .rectangle-p4{
    right: 12px !important;    /* keep to edge */
    min-width: 148px !important;
    height: 38px !important;
    padding: 8px 44px 8px 12px !important; /* leave room for puck */
  }

  body.home .rectangle::after,
  body.projects-page .rectangle-p4::after{
    width:24px; height:24px; right:6px;
  }
}

/* Ultra-small phones: prevent overlap */
@media (max-width: 400px){
  body.home .menu, body.projects-page .menu-p{ font-size: 18px !important; }
  body.home .rectangle, body.projects-page .rectangle-p4{
    min-width: 132px !important; height: 36px !important; padding-right: 40px !important;
  }
}

body.home, body.projects-page { --nav-h: 64px; }
body.home::before,
body.projects-page::before{
  content:"";
  position:fixed; top:0; left:0; right:0;
  height:var(--nav-h);
  background:#0a2c48;
  border-bottom:1px solid rgba(255,255,255,.20);
  z-index:219; pointer-events:none;
}
@media (max-width:640px){
  body.home, body.projects-page{ --nav-h: 52px; }
}

/* Keep your header buttons above the bar */
body.home .menu, body.home .rectangle,
body.projects-page .menu-p, body.projects-page .rectangle-p4{
  z-index:220 !important;
}

/* Add white puck + arrow ONLY to Home + Projects pills */
body.home .rectangle::after,
body.projects-page .rectangle-p4::after{
  content:"";
  position:absolute; right:8px; top:50%;
  width:28px; height:28px; transform:translateY(-50%);
  border-radius:999px; background:#fff;
  border:1px solid rgba(255,255,255,.45);
  background-repeat:no-repeat; background-position:center; background-size:55% 55%;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9 15l6-6M10 8h7v7" fill="none" stroke="%230a2c48" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
}
@media (max-width:640px){
  body.home .rectangle::after,
  body.projects-page .rectangle-p4::after{ width:24px; height:24px; right:6px; }
}

/* No puck/arrow on Services + About (keep simple blue pill) */
#services .topbar .get-quote::before,
#services .topbar .get-quote::after,
#about .topbar .get-quote::before,
#about .topbar .get-quote::after{
  content:none !important;
}
/* FORCE Projects/Home solid header bar back on */
html body.projects-page::before,
html body.home::before{
  content:"" !important;
  display:block !important;
  position:fixed; top:0; left:0; right:0;
  height:var(--nav-h,64px) !important;
  background:#0a2c48 !important;
  border-bottom:1px solid rgba(255,255,255,.20) !important;
  z-index:398 !important;         /* stays below Menu/Get Quote (z:400) */
  pointer-events:none !important;
}
/* Projects: solid navbar background on the real header element(s) */
body.projects-page .navbar,
body.projects-page .site-header {
  background: #0a2c48 !important;
  border-bottom: 1px solid rgba(255,255,255,.20) !important;
}

/* Home: if it uses the shared topbar element, ensure it’s solid too */
body.home header.topbar {
  background: #0a2c48 !important;
  border-bottom: 1px solid rgba(255,255,255,.20) !important;
}
/* === HOME: keep Menu + Get Quote above the solid bar === */
body.home .main-container .menu,
body.home .main-container .rectangle{
  position: fixed !important;
  top: 12px !important;
  z-index: 1200 !important;   /* higher than the bar (398) and any headers */
}

/* Center Menu text */
body.home .main-container .menu{
  left: 50% !important;
  transform: translateX(-50%) !important;
  color: #fff !important;
}

/* Keep Get Quote pill on the right */
body.home .main-container .rectangle{
  right: 16px !important;
  left: auto !important;
}

/* Make sure any site header layer can't sit on top on Home */
body.home header.topbar,
body.home .site-header,
body.home .navbar{
  z-index: 300 !important;    /* below our buttons (1200), above bar (398) if needed */
}

/* (Optional) hide the small ellipse art on Home pill if it overlaps */
body.home .ellipse{ display:none !important; }
/* Align the top-right pill vertically with the Menu text */
header.topbar .wrap{ align-items:center; }                 /* ensure grid items center */
header.topbar .get-quote{ margin-top:0; align-self:center; }
@media (min-width:700px){
  header.topbar .wrap{ height:60px; }                      /* consistent bar height */
  header.topbar .get-quote{ transform: translateY(-2px); } /* tiny visual nudge */
}
/* ===== Mobile: prevent Menu / Get Quote overlap ===== */
@media (max-width: 480px){
  /* Let the bar become two tidy rows on very small screens */
  header.topbar .wrap{
    grid-template-columns: 1fr auto;  /* two columns */
    grid-template-rows: auto auto;
    row-gap: 6px;
    height: auto;                      /* allow 2 rows */
    padding: 8px 12px;
  }

  /* Center “Menu” on the first row */
  header.topbar .menu{
    grid-column: 1 / -1;               /* span full width */
    justify-self: center;
    font-size: 22px;                    /* smaller so it never collides */
    line-height: 1;
  }

  /* Put “Get Quote” on its own second row, right-aligned */
  header.topbar .get-quote{
    grid-column: 1 / -1;
    justify-self: end;
    height: 36px;
    padding: 8px 12px;
    font-size: 14px;
  }
}

/* Slightly shrink on small-but-not-tiny screens so we can keep one row */
@media (min-width: 481px) and (max-width: 640px){
  header.topbar .menu{ font-size: 24px; }
  header.topbar .get-quote{ height: 38px; padding: 9px 14px; }
}

/* FORCE the header wrapper to grid on small screens */
@media (max-width: 480px){
  header.topbar .wrap{
    display: grid !important;          /* override the earlier flex */
    grid-template-columns: 1fr auto;   /* brand (if present) + button */
    grid-template-rows: auto auto;     /* allow 2 tidy rows */
    row-gap: 6px;
    height: auto !important;
    padding: 8px 12px !important;
    align-items: center;
  }

  /* Put Menu on its own first row, centered */
  header.topbar .menu{
    grid-column: 1 / -1;
    justify-self: center;
    font-size: 22px;
    line-height: 1;
  }

  /* Put Get Quote on second row, right-aligned */
  header.topbar .get-quote{
    grid-column: 1 / -1;
    justify-self: end;
    height: 36px !important;
    padding: 8px 12px !important;
    font-size: 14px;
  }
}

/* Keep one-row header on small-but-not-tiny screens */
@media (min-width: 481px) and (max-width: 640px){
  header.topbar .wrap{ display: grid !important; grid-template-columns: 1fr auto; }
  header.topbar .menu{ font-size: 24px; }
  header.topbar .get-quote{ height: 38px !important; padding: 9px 14px !important; }
}
/* HOME: prevent overlap of the fixed Menu + Get Quote layers */
@media (max-width: 480px){
  /* Menu on the first row, centered a bit higher */
  body.home .main-container .menu{
    top: 8px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }

  /* Get Quote on the second row, aligned right */
  body.home .main-container .rectangle{
    /* place it just below the solid bar (var(--nav-h)) with a small gap */
    top: calc(var(--nav-h, 52px) + 8px) !important;
    right: 12px !important;
    left: auto !important;
    min-width: 140px !important;
    height: 36px !important;
    padding: 8px 40px 8px 12px !important; /* leave space for the white puck */
  }
}

/* Ultra-small phones tighten a bit more */
@media (max-width: 360px){
  body.home .main-container .rectangle{
    min-width: 128px !important;
    padding-right: 36px !important;
  }
}
/* ===== Mobile: keep single row, prevent Menu / Get Quote overlap ===== */
@media (max-width: 480px){
  /* pages that use the header topbar */
  header.topbar .wrap{
    display: grid !important;
    grid-template-columns: 1fr auto auto;  /* [filler] [Menu] [Get Quote] */
    align-items: center;
    column-gap: 10px;
    height: 52px !important;
    padding: 8px 12px !important;
  }
  header.topbar .menu{
    grid-column: 2;
    justify-self: center;
    font-size: 22px;
    line-height: 1;
  }
  header.topbar .get-quote{
    grid-column: 3;
    justify-self: end;
    height: 36px !important;
    min-width: 132px !important;
    padding: 8px 34px 8px 12px !important;  /* room for white puck */
    font-size: 14px;
  }

  /* HOME (Figma layers are independent): pin right, shift Menu a touch left */
  body.home .main-container .menu{
    position: fixed !important;
    top: 8px !important;
    left: 50% !important;
    transform: translateX(-56%) !important;  /* <— nudge left to clear the pill */
    z-index: 1200 !important;
  }
  body.home .main-container .rectangle{
    position: fixed !important;
    top: 8px !important;          /* same row as Menu */
    right: 12px !important;       /* pin to right edge */
    left: auto !important;
    min-width: 132px !important;
    height: 36px !important;
    padding: 8px 34px 8px 12px !important;
    z-index: 1200 !important;
  }
}

/* Ultra-small phones: a bit tighter + a hair more left shift */
@media (max-width: 360px){
  header.topbar .menu{ font-size: 20px; }
  header.topbar .get-quote{
    height: 34px !important;
    min-width: 124px !important;
    padding: 7px 30px 7px 10px !important;
    font-size: 13px;
  }

  body.home .main-container .menu{
    transform: translateX(-60%) !important; /* more clearance from the pill */
  }
  body.home .main-container .rectangle{
    min-width: 124px !important;
    height: 34px !important;
    padding: 7px 30px 7px 10px !important;
  }
}
/* === FINAL MOBILE COLLISION FIX (HOME only) ===================== */
/* Keep Get Quote pinned to the right; nudge Menu slightly left so
   they never collide. These win over all earlier rules. */

@media (max-width: 640px){
  html body.home .main-container .rectangle{
    position: fixed !important;
    top: 10px !important;
    right: 12px !important;
    left: auto !important;
    height: 36px !important;
    min-width: 132px !important;
    z-index: 1200 !important;
  }

  html body.home .main-container .menu{
    position: fixed !important;
    top: 10px !important;
    left: 50% !important;
    /* Shift a bit more than half so there's always room for the pill */
    transform: translateX(-60%) !important;
    z-index: 1200 !important;
    white-space: nowrap !important;
  }
}

/* Ultra-small phones: a hair more shift + a slightly smaller pill */
@media (max-width: 380px){
  html body.home .main-container .menu{
    transform: translateX(-62%) !important;
  }
  html body.home .main-container .rectangle{
    min-width: 124px !important;
    height: 34px !important;
  }
}
/* === HOME: lift the Menu above the bar (final override) ========== */
html body.home .main-container .menu{
  position: fixed !important;
  top: 4px !important;                          /* <- move up (try 0–6px) */
  left: 50% !important;
  transform: translate(-50%, 0) !important;     /* remove any translateY */
  margin-top: 0 !important;
  z-index: 1200 !important;
}

/* keep the right pill where it is */
html body.home .main-container .rectangle{
  position: fixed !important;
  top: 8px !important;                           /* adjust if needed */
  right: 16px !important;
  left: auto !important;
  z-index: 1200 !important;
}

/* mobile: same idea, tiny extra lift so it visually centers */
@media (max-width: 640px){
  html body.home .main-container .menu{
    top: 2px !important;
    transform: translate(-56%, 0) !important;   /* slight left nudge to avoid pill */
  }
  html body.home .main-container .rectangle{
    top: 6px !important;
    right: 12px !important;
  }
}