/*
PROPRIETARY AND CONFIDENTIAL - Motherboard, Inc.
Protected under the Defend Trade Secrets Act (18 U.S.C. § 1836)
Contact: legal@bymotherboard.com
*/

:root{--navy:#00234B;--blue:#2B7BB9;--green:#81d742;--orange:#FB8E28;--surface:#F8FAFC;--bg:#fff;--text:#1B2A3D;--text-muted:#5A6B7F;--border:#E1E7EF;--max:1140px;--shadow:0 18px 50px rgba(0,35,75,.16)}
*{box-sizing:border-box}body{margin:0;font-family:"DM Sans",system-ui,-apple-system,Segoe UI,sans-serif;color:var(--text);background:var(--bg)}a{color:inherit}#cif-header-slot{position:sticky;top:0;z-index:1000}.cif-header{background:var(--navy);color:#fff;transition:box-shadow .35s ease}.cif-header.is-scrolled{box-shadow:0 4px 20px rgba(0,35,75,.15)}.cif-header-inner{max-width:var(--max);margin:0 auto;height:110px;padding:0 2rem;display:flex;align-items:center;justify-content:space-between;gap:1.25rem;transition:height .35s ease}.cif-header.is-scrolled .cif-header-inner{height:64px}.cif-logo-link{display:flex;align-items:center;text-decoration:none;min-width:0}.cif-logo-img{display:block;width:auto;height:80px;max-width:260px;object-fit:contain;transition:height .35s ease}.cif-header.is-scrolled .cif-logo-img{height:38px}.cif-nav{display:flex;align-items:center;gap:.1rem}.cif-nav-link,.cif-dropdown-toggle{font:700 .88rem/1 "DM Sans",sans-serif;color:rgba(255,255,255,.86);text-decoration:none;padding:.85rem .72rem;border-radius:999px;background:transparent;border:0;cursor:pointer;white-space:nowrap}.cif-nav-link:hover,.cif-dropdown-toggle:hover,.cif-nav-link.is-active{color:#fff;background:rgba(255,255,255,.1)}.cif-dropdown{position:relative}.cif-dropdown-menu{position:absolute;top:calc(100% + .7rem);left:0;min-width:230px;padding:.65rem;background:#fff;color:var(--text);border-radius:16px;box-shadow:var(--shadow);border:1px solid var(--border);display:none}.cif-dropdown.open .cif-dropdown-menu{display:grid}.cif-dropdown-menu a{padding:.8rem .9rem;text-decoration:none;border-radius:10px;color:var(--text);font-weight:700}.cif-dropdown-menu a:hover{background:var(--surface);color:var(--blue)}.cif-header-actions{display:flex;align-items:center;gap:.6rem}.cif-btn{display:inline-flex;align-items:center;justify-content:center;gap:.35rem;border-radius:999px;padding:.78rem 1rem;font-weight:800;text-decoration:none;border:1px solid transparent;font-size:.84rem}.cif-btn-primary{background:var(--green);color:var(--navy)}.cif-btn-primary:hover{filter:brightness(.96)}.cif-btn-ghost{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.22)}.cif-mobile-toggle{display:none;width:44px;height:44px;border:1px solid rgba(255,255,255,.2);border-radius:12px;background:rgba(255,255,255,.08);color:#fff;align-items:center;justify-content:center;cursor:pointer}.cif-mobile-toggle span,.cif-mobile-toggle span:before,.cif-mobile-toggle span:after{display:block;width:20px;height:2px;background:#fff;border-radius:2px;content:"";position:relative}.cif-mobile-toggle span:before{position:absolute;top:-7px}.cif-mobile-toggle span:after{position:absolute;top:7px}.cif-mobile-nav{display:none;background:var(--navy);border-top:1px solid rgba(255,255,255,.12);max-height:80vh;overflow-y:auto;padding:.75rem 2rem 1.25rem}.cif-mobile-nav a,.cif-mobile-dropdown-toggle{display:flex;width:100%;justify-content:space-between;color:#fff;text-decoration:none;padding:.85rem .25rem;font-weight:800;background:transparent;border:0}.cif-mobile-sub{display:none;padding-left:1rem}.cif-mobile-sub a{color:rgba(255,255,255,.75);font-weight:700;padding:.65rem .25rem}.cif-mobile-dropdown.open .cif-mobile-sub{display:block}.cif-mobile-ctas{display:none;border-top:1px solid rgba(255,255,255,.12);margin-top:.5rem;padding-top:1rem;gap:.75rem}.cif-mobile-ctas .cif-btn{width:100%}.cif-mobile-ctas .cif-btn-primary{color:#fff;background:var(--green)}.cif-footer{background:var(--navy);color:#fff;padding:5rem 2rem 2rem}.cif-footer-inner{max-width:var(--max);margin:0 auto}.cif-footer-grid{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:2.5rem}.cif-footer-logo{height:72px;width:auto;max-width:260px;display:block;margin-bottom:1rem}.cif-footer p{color:rgba(255,255,255,.72);line-height:1.7;margin:.3rem 0 1.1rem}.cif-footer h3{font:500 .76rem/1 "IBM Plex Mono",monospace;color:var(--green);letter-spacing:.08em;text-transform:uppercase;margin:0 0 1rem}.cif-footer a{display:block;color:rgba(255,255,255,.78);text-decoration:none;margin:.6rem 0;font-weight:700}.cif-footer a:hover{color:#fff}.cif-footer-bottom{border-top:1px solid rgba(255,255,255,.12);margin-top:3rem;padding-top:1.25rem;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;color:rgba(255,255,255,.58);font-size:.84rem}.cif-footer .cif-btn{display:inline-flex;color:var(--navy);margin-top:.4rem}
@media(max-width:920px){.cif-nav,.cif-header-actions{display:none}.cif-mobile-toggle{display:flex}.cif-header-inner{height:72px}.cif-header.is-scrolled .cif-header-inner{height:56px}.cif-logo-img{height:50px;max-width:210px}.cif-header.is-scrolled .cif-logo-img{height:30px}.cif-mobile-nav.open{display:block}.cif-mobile-ctas{display:grid}.cif-footer-grid{grid-template-columns:1fr 1fr}.cif-footer-logo{height:56px}}
@media(max-width:620px){.cif-header-inner{padding:0 1rem}.cif-mobile-nav{padding-left:1rem;padding-right:1rem}.cif-footer{padding:4rem 1.25rem 1.5rem}.cif-footer-grid{grid-template-columns:1fr}.cif-footer-bottom{display:block}.cif-logo-img{max-width:180px}}

/* =========================================================
   CLICK IT WEB BUILD STANDARD v2.1 HEADER PHONE + CTA
   Site: Click IT Franchise
   ========================================================= */
.cif-header-actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.cif-header-phone {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 46px;
  padding: 0.75rem 1rem;
  border-radius: 999px;
  color: #fff;
  font-weight: 900;
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.08);
  transition: background 0.2s ease, transform 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.cif-header-phone:hover,
.cif-header-phone:focus {
  color: var(--green);
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(129, 215, 66, 0.65);
  transform: translateY(-1px);
}

.cif-header-phone-label {
  color: var(--green);
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cif-header-phone-number {
  color: inherit;
  font-size: 0.95rem;
}

.cif-header-actions .cif-btn-primary {
  background: var(--green);
  color: var(--navy);
  border-color: var(--green);
  box-shadow: 0 10px 24px rgba(129, 215, 66, 0.18);
}

.cif-header-actions .cif-btn-primary:hover,
.cif-header-actions .cif-btn-primary:focus {
  background: #fff;
  color: var(--navy);
  border-color: #fff;
  transform: translateY(-1px);
}

.cif-footer-phone {
  display: inline !important;
  color: #fff !important;
  font-weight: 900;
  margin: 0 !important;
}

.cif-footer-phone:hover {
  color: var(--green) !important;
}

.cif-mobile-phone {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 50px;
  border-radius: 999px;
  color: var(--green) !important;
  font-size: 1.1rem;
  font-weight: 900;
  text-decoration: none;
  border: 1px solid var(--green);
  background: transparent;
}

.cif-mobile-ctas .cif-mobile-launch {
  background: var(--green);
  color: #fff !important;
  border-color: var(--green);
}

.cif-mobile-ctas .cif-mobile-demo {
  background: rgba(255, 255, 255, 0.08);
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.42);
}

.cif-mobile-fit {
  display: flex;
  justify-content: center;
  width: 100%;
  color: rgba(255, 255, 255, 0.75) !important;
  font-weight: 800;
  text-decoration: none;
  padding: 0.75rem 0.25rem;
}

@media (max-width: 1080px) {
  .cif-header-phone-label {
    display: none;
  }

  .cif-header-actions .cif-btn {
    padding-left: 0.82rem;
    padding-right: 0.82rem;
  }
}

@media (max-width: 920px) {
  .cif-nav,
  .cif-header-actions {
    display: none;
  }

  .cif-mobile-ctas {
    display: grid;
  }
}

/* =========================================================
   DESKTOP WIDTH POLISH — 1920 CANVAS
   Site: Click IT Franchise
   Purpose: Make desktop layouts feel full-width while keeping
   readable content inside a strong container.
   ========================================================= */
:root {
  --max: 1440px;
}

.cif-header-inner,
.cif-footer-inner {
  max-width: var(--max);
}

.cif-header-inner {
  padding-left: clamp(2rem, 4vw, 4rem);
  padding-right: clamp(2rem, 4vw, 4rem);
}

.cif-logo-img {
  max-width: 310px;
}

.cif-footer-grid {
  gap: clamp(2.5rem, 5vw, 5rem);
}

@media (min-width: 1500px) {
  :root {
    --max: 1520px;
  }

  .cif-nav-link,
  .cif-dropdown-toggle {
    font-size: 0.95rem;
    padding-left: 0.9rem;
    padding-right: 0.9rem;
  }

  .cif-header-actions .cif-btn,
  .cif-header-phone {
    font-size: 0.92rem;
  }
}

@media (max-width: 1180px) {
  .cif-logo-img {
    max-width: 250px;
  }

  .cif-nav-link,
  .cif-dropdown-toggle {
    font-size: 0.82rem;
    padding-left: 0.55rem;
    padding-right: 0.55rem;
  }
}

/* =========================================================
   HEADER WRAP FIX — DESKTOP / TABLET
   Site: Click IT Franchise
   ========================================================= */
#cif-header-slot {
  position: sticky;
  top: 0;
  z-index: 1000;
}

.cif-header-inner {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-width: 0;
  gap: clamp(0.75rem, 1.4vw, 1.4rem);
}

.cif-logo-link {
  flex: 0 0 auto;
}

.cif-logo-img {
  height: 72px;
  width: auto;
  max-width: 260px;
  object-fit: contain;
}

.cif-header.is-scrolled .cif-logo-img {
  height: 38px;
}

.cif-nav {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.05rem, 0.45vw, 0.35rem);
  white-space: nowrap;
}

.cif-nav-link,
.cif-dropdown-toggle {
  flex: 0 0 auto;
  font-size: clamp(0.78rem, 0.72vw, 0.93rem);
  padding-left: clamp(0.45rem, 0.5vw, 0.85rem);
  padding-right: clamp(0.45rem, 0.5vw, 0.85rem);
}

.cif-header-actions {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: clamp(0.45rem, 0.6vw, 0.7rem);
  white-space: nowrap;
}

.cif-header-actions .cif-btn,
.cif-header-phone {
  flex: 0 0 auto;
}

.cif-header-phone {
  min-height: 42px;
  padding: 0.62rem 0.85rem;
}

.cif-header-actions .cif-btn {
  min-height: 42px;
  padding: 0.72rem 0.92rem;
}

@media (min-width: 1281px) {
  .cif-mobile-toggle,
  .cif-mobile-nav {
    display: none !important;
  }
}

@media (max-width: 1280px) {
  .cif-nav,
  .cif-header-actions {
    display: none !important;
  }

  .cif-mobile-toggle {
    display: flex;
  }

  .cif-mobile-nav.open {
    display: block;
  }
}

@media (min-width: 1500px) {
  .cif-logo-img {
    max-width: 300px;
  }

  .cif-header-actions .cif-btn,
  .cif-header-phone {
    font-size: 0.92rem;
  }
}

/* =========================================================
   FINAL HEADER WIDTH OVERRIDE — USER VERIFIED
   Site: Click IT Franchise
   ========================================================= */
:root {
  --max: 1920px;
}

.cif-header-inner {
  max-width: 1920px !important;
  width: 100%;
  margin: 0 auto;
  padding-left: clamp(2rem, 4vw, 5rem);
  padding-right: clamp(2rem, 4vw, 5rem);
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1rem, 1.5vw, 1.75rem);
}

.cif-footer-inner {
  max-width: 1600px;
}

.cif-logo-link {
  flex: 0 0 auto;
}

.cif-logo-img {
  max-width: 310px;
}

.cif-nav {
  flex: 1 1 auto;
  min-width: 0;
  justify-content: center;
  white-space: nowrap;
}

.cif-header-actions {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  white-space: nowrap;
}

@media (min-width: 1281px) {
  .cif-nav,
  .cif-header-actions {
    display: flex !important;
  }

  .cif-mobile-toggle,
  .cif-mobile-nav {
    display: none !important;
  }
}

@media (max-width: 1280px) {
  .cif-nav,
  .cif-header-actions {
    display: none !important;
  }

  .cif-mobile-toggle {
    display: flex !important;
  }

  .cif-mobile-nav.open {
    display: block !important;
  }
}

/* =========================================================
   WHITE HEADER LOGO
   Site: Click IT Franchise
   ========================================================= */
.cif-logo-img {
  object-fit: contain;
}

.cif-footer-logo {
  object-fit: contain;
}