/* SignSyncer — shared site styles (announcement bar + header + footer + build additions) */
/* ===== ANNOUNCEMENT BAR ===== */
.ssync-topbar{
  --blue:#0097EA;
  font-family:'Poppins',system-ui,sans-serif;
  background:#181E1E; color:#fff; text-align:center; font-size:13px;
  padding:9px 40px 9px 16px; font-weight:500; position:relative;
}
.ssync-topbar a{color:var(--blue); font-weight:700; margin-left:6px; text-decoration:none;}
.ssync-topbar a:hover{text-decoration:underline;}
.ssync-topbar .ssync-topbar-close{
  position:absolute; right:12px; top:50%; transform:translateY(-50%);
  background:none; border:0; color:rgba(255,255,255,.6); cursor:pointer;
  font-size:16px; line-height:1; padding:4px; font-family:inherit;
}
.ssync-topbar .ssync-topbar-close:hover{color:#fff;}
.ssync-topbar.ssync-topbar-hidden{display:none;}

/* ===== HEADER ===== */
.ssync-header{
  --blue:#0097EA; --blue-deep:#0077BE; --blue-pale:#E7F5FE;
  --ink:#181E1E; --ink-70: rgba(24,30,30,.7); --ink-55: rgba(24,30,30,.55);
  --line:#E7EBEA; --line-soft:#F1F3F2; --shadow: 0 20px 50px -20px rgba(24,30,30,.22);
  --maxw: 1180px;
  font-family:'Poppins',system-ui,sans-serif;
  position:sticky; top:0; z-index:9999;
  background:rgba(255,255,255,.9); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-soft);
}
.ssync-header *{box-sizing:border-box;}
.ssync-header img{max-width:100%; display:block;}
.ssync-header a{color:var(--ink); text-decoration:none;}
.ssync-header ul{margin:0; padding:0; list-style:none;}
.ssync-header button{font-family:inherit; cursor:pointer;}

.ssync-header .wrap{max-width:var(--maxw); margin:0 auto; padding:14px 24px; display:flex; flex-wrap:nowrap; align-items:center; justify-content:space-between; gap:clamp(12px,1.6vw,24px);}
.ssync-header .brand{flex:0 0 auto;}
.ssync-header .brand img{height:40px; width:auto;}

.ssync-header .nav-links{display:flex; flex-wrap:nowrap; align-items:center; gap:clamp(14px,1.9vw,30px); flex:1 1 auto; justify-content:center;}
.ssync-header .nav-links > li{position:relative; flex:0 0 auto;}
.ssync-header .nav-links > li > a{font-size:clamp(13px,1.05vw,14.5px); font-weight:600; color:var(--ink); padding:10px 0; display:flex; align-items:center; gap:5px; white-space:nowrap;}
.ssync-header .nav-links > li > a{transition:color .18s ease;}
.ssync-header .nav-links > li > a:hover,
.ssync-header .nav-links > li:hover > a,
.ssync-header .nav-links > li > a:focus-visible{color:var(--blue);}
.ssync-header .nav-links > li > a svg{transition:transform .2s ease;}
.ssync-header .nav-links > li:hover > a svg{transform:rotate(180deg);}
.ssync-header .dropdown{
  position:absolute; top:100%; left:50%; transform:translateX(-50%) translateY(6px);
  background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow);
  min-width:250px; padding:10px; opacity:0; visibility:hidden; transition:all .18s ease;
}
.ssync-header .nav-links > li:hover .dropdown{opacity:1; visibility:visible; transform:translateX(-50%) translateY(0);}
.ssync-header .dropdown a{display:block; padding:10px 12px; border-radius:9px; font-size:14px; font-weight:500; color:var(--ink);}
.ssync-header .dropdown a:hover{background:var(--blue-pale); color:var(--blue-deep);}
.ssync-header .dropdown a small{display:block; font-weight:400; color:var(--ink-55); font-size:12px; line-height:1.45; margin-top:3px;}
.ssync-header .dropdown a:hover small{color:var(--ink-70);}
.ssync-header .dropdown.wide{min-width:600px; max-width:min(600px,92vw); display:flex; gap:10px; padding:14px;}
.ssync-header .dropdown.wide a small{font-size:11.5px;}
.ssync-header .dropdown.wide .dcol{flex:1; display:flex; flex-direction:column; gap:2px; min-width:0;}
.ssync-header .dropdown.wide .dcol-label{font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-55); padding:6px 12px 6px;}
.ssync-header .dropdown.wide .dcol + .dcol{border-left:1px solid var(--line-soft); padding-left:6px;}

.ssync-header .nav-cta{display:flex; flex-wrap:nowrap; align-items:center; gap:clamp(10px,1.1vw,16px); flex:0 0 auto;}
.ssync-header .nav-cta .login{font-size:clamp(13px,1.05vw,14.5px); font-weight:600; white-space:nowrap; transition:color .18s ease;}
.ssync-header .nav-cta .login:hover,
.ssync-header .nav-cta .login:focus-visible{color:var(--blue);}
.ssync-header .btn{display:inline-flex; flex:0 0 auto; align-items:center; justify-content:center; gap:8px; padding:9px clamp(12px,1.2vw,16px); border-radius:999px; font-weight:600; font-size:clamp(13px,1.05vw,14px); line-height:1.2; white-space:nowrap; border:1.5px solid transparent; transition:all .18s ease;}
.ssync-header .btn-primary{background:var(--ink); color:#fff;}
.ssync-header .btn-primary:hover{background:var(--blue-deep); color:#fff;}

.ssync-header .burger{display:none; background:none; border:0; padding:6px; flex:0 0 auto;}

/* tighten before anything is forced to wrap */
@media(max-width:1150px){
  .ssync-header .wrap{padding:12px 18px;}
  .ssync-header .brand img{height:34px;}
  .ssync-header .nav-cta .login{display:none;}
}
/* not enough room for a full one-line nav — switch to the burger */
@media(max-width:1060px){
  .ssync-header .nav-links{display:none;}
  .ssync-header .burger{display:block;}
}
@media(max-width:560px){
  .ssync-header .nav-cta a[href="contact.html"]{display:none;}
}

/* =========================================================
   MENU HOVER COLOUR — black -> sky blue (#0097EA)
   Placed last and given extra weight so a WordPress theme
   cannot override it. Change the hex in the 3 places below
   if you ever want a different hover colour.
   ========================================================= */
header.ssync-header .nav-links > li > a,
header.ssync-header .nav-cta .login{transition:color .18s ease;}

header.ssync-header .nav-links > li > a:hover,
header.ssync-header .nav-links > li > a:focus-visible,
header.ssync-header .nav-links > li:hover > a,
header.ssync-header .nav-cta .login:hover,
header.ssync-header .nav-cta .login:focus-visible{
  color:#0097EA !important;
}

/* the little chevron arrows follow the text colour */
header.ssync-header .nav-links > li > a:hover svg path,
header.ssync-header .nav-links > li:hover > a svg path{
  stroke:#0097EA !important;
}

/* ===== FOOTER ===== */
.ssync-footer{
  --blue:#0097EA; --blue-deep:#0077BE; --blue-pale:#E7F5FE;
  --ink:#181E1E; --line-soft:#F1F3F2;
  --maxw: 1180px;
  font-family:'Poppins',system-ui,sans-serif;
  background:var(--ink); color:#fff; padding-top:70px;
}
.ssync-footer *{box-sizing:border-box;}
.ssync-footer img{max-width:100%; display:block;}
.ssync-footer a{color:inherit; text-decoration:none;}
.ssync-footer ul{margin:0; padding:0; list-style:none;}

.ssync-footer .wrap{max-width:var(--maxw); margin:0 auto; padding:0 28px;}
.ssync-footer .foot-top{display:grid; grid-template-columns:1.4fr repeat(4,1fr); gap:32px; padding-bottom:50px; border-bottom:1px solid rgba(255,255,255,.1);}
.ssync-footer .foot-brand img{height:64px; margin-bottom:20px;}
.ssync-footer .foot-brand p{font-size:13.5px; color:rgba(255,255,255,.55); max-width:280px; line-height:1.6;}
.ssync-footer .foot-social{display:flex; gap:10px; margin-top:20px;}
.ssync-footer .foot-social a{width:34px; height:34px; border-radius:50%; border:1px solid rgba(255,255,255,.18); display:flex; align-items:center; justify-content:center; transition:all .18s ease;}
.ssync-footer .foot-social a:hover{background:var(--blue); border-color:var(--blue);}
.ssync-footer .foot-col h5{font-size:12.5px; text-transform:uppercase; letter-spacing:.1em; color:rgba(255,255,255,.5); margin-bottom:16px;}
.ssync-footer .foot-col ul{display:flex; flex-direction:column; gap:11px;}
.ssync-footer .foot-col a{font-size:14px; color:rgba(255,255,255,.78);}
.ssync-footer .foot-col a:hover{color:#fff;}
.ssync-footer .foot-bottom{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px; padding:26px 0; font-size:12.5px; color:rgba(255,255,255,.5);}
.ssync-footer .foot-legal{display:flex; gap:16px; flex-wrap:wrap;}
@media(max-width:900px){.ssync-footer .foot-top{grid-template-columns:1fr 1fr;}}
@media(max-width:820px){.ssync-footer .foot-bottom{justify-content:flex-start;} .ssync-footer .foot-legal{gap:10px 14px; row-gap:8px;}}
@media(max-width:560px){.ssync-footer .foot-top{grid-template-columns:1fr;}}

/* =====================================================================
   MOBILE NAVIGATION DRAWER  (added in the production build)
   The original header had a burger button with no menu behind it, so
   navigation was impossible below 1060px. This supplies that menu.
   ===================================================================== */
.ssync-mnav-overlay{
  position:fixed; inset:0; background:rgba(24,30,30,.45);
  opacity:0; visibility:hidden; transition:opacity .25s ease, visibility .25s ease;
  z-index:10000; backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px);
}
.ssync-mnav-overlay.open{opacity:1; visibility:visible;}

.ssync-mnav{
  position:fixed; top:0; right:0; height:100%; width:min(360px,86vw);
  background:#fff; z-index:10001; transform:translateX(102%);
  transition:transform .28s cubic-bezier(.4,0,.2,1);
  display:flex; flex-direction:column;
  font-family:'Poppins',system-ui,sans-serif;
  box-shadow:-24px 0 60px -24px rgba(24,30,30,.35);
}
.ssync-mnav.open{transform:translateX(0);}
.ssync-mnav *{box-sizing:border-box;}
.ssync-mnav a{color:#181E1E; text-decoration:none;}

.ssync-mnav-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 18px; border-bottom:1px solid #F1F3F2; flex:0 0 auto;
}
.ssync-mnav-head img{height:34px; width:auto; display:block;}
.ssync-mnav-close{
  background:none; border:0; padding:8px; cursor:pointer; line-height:0;
  border-radius:50%; color:#181E1E; transition:background .18s ease;
}
.ssync-mnav-close:hover{background:#F1F3F2;}

.ssync-mnav-body{flex:1 1 auto; overflow-y:auto; padding:10px 12px 18px; -webkit-overflow-scrolling:touch;}
.ssync-mnav-body ul{list-style:none; margin:0; padding:0;}

.ssync-mnav-link{
  display:block; padding:13px 12px; font-size:15px; font-weight:600;
  border-radius:10px; transition:background .16s ease, color .16s ease;
}
.ssync-mnav-link:hover{background:#E7F5FE; color:#0077BE;}

.ssync-macc-btn{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  gap:10px; padding:13px 12px; font-size:15px; font-weight:600; color:#181E1E;
  background:none; border:0; cursor:pointer; border-radius:10px; text-align:left;
  font-family:inherit; transition:background .16s ease, color .16s ease;
}
.ssync-macc-btn:hover{background:#E7F5FE; color:#0077BE;}
.ssync-macc-btn svg{flex:0 0 auto; transition:transform .22s ease;}
.ssync-macc-btn[aria-expanded="true"] svg{transform:rotate(180deg);}
.ssync-macc-btn[aria-expanded="true"]{color:#0097EA;}

.ssync-macc-panel{
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows .26s ease;
}
.ssync-macc-panel.open{grid-template-rows:1fr;}
.ssync-macc-panel > div{overflow:hidden;}
.ssync-macc-panel a{
  display:block; padding:10px 12px 10px 24px; font-size:13.5px; font-weight:500;
  color:rgba(24,30,30,.75); border-radius:9px; border-left:2px solid #F1F3F2;
  margin-left:10px; transition:background .16s ease, color .16s ease, border-color .16s ease;
}
.ssync-macc-panel a:hover{background:#E7F5FE; color:#0077BE; border-color:#0097EA;}
.ssync-macc-panel .ssync-macc-label{
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.08em;
  color:rgba(24,30,30,.5); padding:12px 12px 4px 24px;
}

.ssync-mnav-foot{
  flex:0 0 auto; padding:16px 18px 22px; border-top:1px solid #F1F3F2;
  display:flex; flex-direction:column; gap:10px; background:#FBFCFC;
}
.ssync-mnav-foot a{
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 18px; border-radius:999px; font-weight:600; font-size:14.5px;
  border:1.5px solid transparent; transition:all .18s ease;
}
.ssync-mnav-foot .m-primary{background:#181E1E; color:#fff;}
.ssync-mnav-foot .m-primary:hover{background:#0077BE;}
.ssync-mnav-foot .m-ghost{border-color:#E7EBEA; color:#181E1E; background:#fff;}
.ssync-mnav-foot .m-ghost:hover{border-color:#0097EA; color:#0097EA;}

body.ssync-noscroll{overflow:hidden;}

/* Dropdown parents behave as toggles, not as page-jumping links */
.ssync-header .nav-links > li > a.has-drop{cursor:pointer;}

/* Keyboard accessibility: reveal desktop dropdowns on focus */
.ssync-header .nav-links > li:focus-within .dropdown{
  opacity:1; visibility:visible; transform:translateX(-50%) translateY(0);
}

/* Current-page highlight in the main nav */
.ssync-header .nav-links > li > a.is-active{color:#0097EA;}

/* Anchor offset so sticky header never covers a scrolled-to section */
:target{scroll-margin-top:110px;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .ssync-mnav{transition:none;}
}

/* =====================================================================
   CONTACT FORM — submit states & inline validation feedback
   ===================================================================== */
.ss-form-alert{
  display:none; margin:0 0 16px; padding:12px 14px; border-radius:10px;
  font-size:13.5px; font-weight:500; line-height:1.5;
  font-family:'Poppins',system-ui,sans-serif;
}
.ss-form-alert.show{display:block;}
.ss-form-alert.error{background:#FDECEC; color:#B3261E; border:1px solid #F6C7C4;}
.ss-form-alert.info{background:#E7F5FE; color:#0077BE; border:1px solid #BFE4FA;}

.ss-hp-field{
  position:absolute !important; left:-9999px !important;
  width:1px !important; height:1px !important; overflow:hidden !important;
}

button.is-sending{opacity:.72; cursor:progress; pointer-events:none;}
.ss-spinner{
  display:inline-block; width:15px; height:15px; vertical-align:-2px;
  border:2px solid rgba(255,255,255,.35); border-top-color:#fff;
  border-radius:50%; animation:ss-spin .7s linear infinite; margin-right:8px;
}
@keyframes ss-spin{to{transform:rotate(360deg);}}

.ss-invalid{border-color:#E0655C !important; box-shadow:0 0 0 3px rgba(224,101,92,.12) !important;}