
/* CENTERSPREAD v41 exact header behavior.
   Font family intentionally inherits the site's SF Pro setting. */

.cs-global-header{
  --v41-purple:#8d1d92;
  --v41-purple-2:#53116f;
  --v41-orange:#ff7817;
  --v41-orange-2:#f25722;
  --v41-line:#e9e7ec;
  --v41-lilac:#f6edf8;
  --v41-ease:cubic-bezier(.18,.72,.18,1);
  --v41-spring:cubic-bezier(.16,1,.3,1);

  position:fixed !important;
  left:0 !important;
  right:0 !important;
  top:0 !important;
  z-index:1000 !important;
  padding:18px 0 !important;
  pointer-events:none;
  background:transparent !important;
  border:0 !important;
  backdrop-filter:none !important;
  box-shadow:none !important;
  transition:.35s var(--v41-ease);
}
.admin-bar .cs-global-header{top:32px !important}

.cs-global-header .wrap{
  width:min(1220px,calc(100% - 44px)) !important;
  margin-inline:auto !important;
}

.cs-global-header .nav-shell{
  pointer-events:auto;
  min-height:76px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:20px !important;
  padding:10px 14px 10px 20px !important;
  border:1px solid rgba(31,22,38,.075) !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.82) !important;
  backdrop-filter:blur(18px) !important;
  box-shadow:0 12px 35px rgba(23,15,29,.06) !important;
  transition:.35s var(--v41-ease) !important;
}

.cs-global-header.scrolled .nav-shell{
  min-height:68px !important;
  background:rgba(255,255,255,.94) !important;
  box-shadow:0 16px 42px rgba(23,15,29,.09) !important;
}

/* Header brand cluster */
.cs-global-header .header-brand-cluster{
  flex:none !important;
  display:flex !important;
  align-items:center !important;
  gap:15px !important;
  min-width:365px !important;
}
.cs-global-header .logo-link{
  flex:none !important;
  min-width:0 !important;
  display:flex !important;
  align-items:center !important;
}
.cs-global-header .logo-link img{
  width:238px !important;
  height:50px !important;
  max-width:238px !important;
  max-height:50px !important;
  object-fit:contain !important;
  object-position:left center !important;
  animation:none !important;
  transition:
    width .35s var(--v41-spring),
    max-width .35s var(--v41-spring),
    transform .35s var(--v41-spring) !important;
}
.cs-global-header .logo-link:hover img{
  transform:translateY(-1px) scale(1.012) !important;
}
.cs-global-header.scrolled .logo-link img{
  width:220px !important;
  max-width:220px !important;
}
.cs-global-header .brand-divider{
  flex:none !important;
  display:block !important;
  width:1px !important;
  height:35px !important;
  background:linear-gradient(
    180deg,
    transparent,
    rgba(141,29,146,.28) 20%,
    rgba(255,120,23,.28) 80%,
    transparent
  ) !important;
}
.cs-global-header .header-tagline{
  flex:none !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  gap:2px !important;
  min-width:108px !important;
  line-height:1.05 !important;
  white-space:nowrap !important;
}
.cs-global-header .header-tagline span{
  color:var(--v41-orange-2) !important;
  font-size:7.5px !important;
  font-weight:900 !important;
  letter-spacing:.18em !important;
  text-transform:uppercase !important;
}
.cs-global-header .header-tagline strong{
  color:var(--v41-purple-2) !important;
  font-size:8.6px !important;
  font-weight:900 !important;
  letter-spacing:.08em !important;
  text-transform:uppercase !important;
}

/* WordPress menu reset + exact v41 desktop menu */
.cs-global-header .desktop-nav{
  display:block !important;
  margin-left:auto !important;
  flex:0 1 auto !important;
}
.cs-global-header .desktop-nav-list{
  display:flex !important;
  align-items:center !important;
  gap:22px !important;
  margin:0 !important;
  padding:0 !important;
  list-style:none !important;
  font-size:12.5px !important;
  font-weight:700 !important;
}
.cs-global-header .desktop-nav-list > li{
  display:block !important;
  margin:0 !important;
  padding:0 !important;
  list-style:none !important;
}
.cs-global-header .desktop-nav-list > li::marker{content:""}
.cs-global-header .desktop-nav a{
  position:relative !important;
  display:block !important;
  padding:0 !important;
  color:#343742 !important;
  line-height:1.35 !important;
  text-decoration:none !important;
  transition:color .25s var(--v41-ease) !important;
}
.cs-global-header .desktop-nav a::after{
  content:"" !important;
  position:absolute !important;
  left:0 !important;
  right:100% !important;
  bottom:-6px !important;
  height:1.5px !important;
  background:linear-gradient(90deg,var(--v41-purple),var(--v41-orange)) !important;
  transition:right .25s var(--v41-ease) !important;
}
.cs-global-header .desktop-nav a:hover::after,
.cs-global-header .desktop-nav .current-menu-item > a::after,
.cs-global-header .desktop-nav .current_page_item > a::after,
.cs-global-header .desktop-nav a.active::after{
  right:0 !important;
}
.cs-global-header .desktop-nav a:hover,
.cs-global-header .desktop-nav .current-menu-item > a,
.cs-global-header .desktop-nav .current_page_item > a,
.cs-global-header .desktop-nav a.active{
  color:var(--v41-purple) !important;
}

/* Exact v41 button */
.cs-global-header .btn{
  position:relative !important;
  overflow:hidden !important;
  isolation:isolate !important;
  min-height:46px !important;
  padding:0 20px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:10px !important;
  border:1px solid transparent !important;
  border-radius:999px !important;
  font-weight:850 !important;
  font-size:13px !important;
  cursor:pointer !important;
  transition:
    transform .28s var(--v41-spring),
    box-shadow .28s var(--v41-ease),
    border-color .28s ease !important;
}
.cs-global-header .nav-shell > .btn{
  flex:none !important;
  padding-inline:18px !important;
}
.cs-global-header .btn::after{
  content:"" !important;
  position:absolute !important;
  z-index:-1 !important;
  top:-100% !important;
  left:-40% !important;
  width:25% !important;
  height:300% !important;
  transform:rotate(20deg) translateX(-360%) !important;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.58),transparent) !important;
  transition:transform .75s var(--v41-ease) !important;
}
.cs-global-header .btn:hover::after{
  transform:rotate(20deg) translateX(680%) !important;
}
.cs-global-header .btn:hover{
  transform:translateY(-3px);
  box-shadow:0 18px 40px rgba(74,17,93,.18) !important;
}
.cs-global-header .btn-primary{
  color:#fff !important;
  background:linear-gradient(
    110deg,
    var(--v41-purple-2),
    var(--v41-purple),
    var(--v41-orange-2)
  ) !important;
  background-size:220% 220% !important;
  animation:v41GradientMove 8s ease infinite !important;
}
.cs-global-header .arrow{
  display:inline-block !important;
  transition:transform .25s var(--v41-spring) !important;
}
.cs-global-header .btn:hover .arrow{
  transform:translateX(4px) !important;
}
@keyframes v41GradientMove{
  0%,100%{background-position:0 50%}
  50%{background-position:100% 50%}
}

/* Mobile menu */
.cs-global-header .mobile-menu{
  display:none;
  position:relative;
  margin-left:auto;
}
.cs-global-header .mobile-menu summary{
  list-style:none;
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border:0;
  border-radius:50%;
  background:var(--v41-lilac);
  cursor:pointer;
}
.cs-global-header .mobile-menu summary::-webkit-details-marker{display:none}
.cs-global-header .mobile-panel{
  position:absolute;
  right:0;
  top:52px;
  width:230px;
  padding:12px;
  border:1px solid var(--v41-line);
  border-radius:18px;
  background:#fff;
  box-shadow:0 24px 70px rgba(34,18,45,.11);
}
.cs-global-header .mobile-menu-list{
  display:grid;
  gap:2px;
  margin:0 !important;
  padding:0 !important;
  list-style:none !important;
}
.cs-global-header .mobile-menu-list li{
  margin:0 !important;
  padding:0 !important;
  list-style:none !important;
}
.cs-global-header .mobile-panel a{
  display:block;
  padding:11px;
  border-radius:10px;
  color:#343742;
  text-decoration:none;
}
.cs-global-header .mobile-panel a:hover,
.cs-global-header .mobile-panel .current-menu-item > a{
  background:var(--v41-lilac);
  color:var(--v41-purple);
}

@media(max-width:1240px){
  .cs-global-header .header-brand-cluster{
    min-width:320px !important;
    gap:12px !important;
  }
  .cs-global-header .logo-link img{
    width:215px !important;
    max-width:215px !important;
  }
  .cs-global-header.scrolled .logo-link img{
    width:205px !important;
    max-width:205px !important;
  }
  .cs-global-header .header-tagline strong{font-size:7.8px !important}
  .cs-global-header .header-tagline span{font-size:7px !important}
  .cs-global-header .desktop-nav-list{
    gap:18px !important;
    font-size:12px !important;
  }
}

@media(max-width:1100px){
  .cs-global-header .desktop-nav,
  .cs-global-header .header-cta{
    display:none !important;
  }
  .cs-global-header .mobile-menu{
    display:block !important;
  }
  .cs-global-header .header-brand-cluster{
    min-width:0 !important;
  }
  .cs-global-header .brand-divider,
  .cs-global-header .header-tagline{
    display:none !important;
  }
  .cs-global-header .logo-link img,
  .cs-global-header.scrolled .logo-link img{
    width:196px !important;
    max-width:196px !important;
    height:46px !important;
    max-height:46px !important;
  }
}

@media(max-width:782px){
  .admin-bar .cs-global-header{top:46px !important}
}

@media(max-width:720px){
  .cs-global-header{
    padding:9px 0 0 !important;
  }
  .cs-global-header .wrap{
    width:min(1220px,calc(100% - 26px)) !important;
  }
  .cs-global-header .nav-shell{
    min-height:56px !important;
    padding:6px 7px 6px 11px !important;
    border-radius:18px !important;
    background:rgba(255,255,255,.91) !important;
    box-shadow:0 10px 30px rgba(26,17,32,.07) !important;
  }
  .cs-global-header.scrolled .nav-shell{
    min-height:54px !important;
    border-radius:16px !important;
  }
  .cs-global-header .logo-link img,
  .cs-global-header.scrolled .logo-link img{
    width:132px !important;
    max-width:132px !important;
    height:38px !important;
    max-height:38px !important;
  }
  .cs-global-header .mobile-menu summary{
    width:40px !important;
    height:40px !important;
    font-size:18px !important;
  }
  .cs-global-header .mobile-panel{
    right:0 !important;
    top:46px !important;
    width:min(235px,calc(100vw - 28px)) !important;
  }
}

@media(max-width:355px){
  .cs-global-header .logo-link img,
  .cs-global-header.scrolled .logo-link img{
    width:118px !important;
    max-width:118px !important;
  }
}

@media(prefers-reduced-motion:reduce){
  .cs-global-header .btn-primary{animation:none !important}
  .cs-global-header .logo-link img,
  .cs-global-header .btn,
  .cs-global-header .btn::after,
  .cs-global-header .arrow{
    transition:none !important;
  }
}


/* ============================================================
   V3.7 — HEADER TYPE + PAGE CONTENT OFFSET
============================================================ */

/* User-requested larger header navigation and tagline. */
.site-header .desktop-nav,
.site-header .desktop-nav a{
  font-size:15px !important;
}

.site-header .header-tagline span,
.site-header .header-tagline strong{
  font-size:15px !important;
  line-height:1.06 !important;
}

/* Give the tagline enough room at the larger size. */
.site-header .header-tagline{
  min-width:210px !important;
}

/*
 * Reserve vertical space for the global sticky/floating header.
 * Applies to normal page templates but keeps the header itself unchanged.
 */
body:not(.wp-admin){
  --cs-global-header-clearance:112px;
}

/* Main page shells */
body:not(.wp-admin) main,
body:not(.wp-admin) .cs-home-v11,
body:not(.wp-admin) .cs-services-v2{
  scroll-margin-top:var(--cs-global-header-clearance);
}

/* About page */
body.page-template-default main > .hero:first-child,
body.page main > .hero:first-child{
  padding-top:calc(64px + 34px) !important;
}

/* Services page */
.cs-services-v2 > .hero:first-of-type{
  padding-top:98px !important;
}

/* Homepage top hero */
.cs-home-v11 .framer-1jcgmjm{
  padding-top:154px !important;
}

/* Generic page top section safety */
body:not(.home) main > section:first-child{
  scroll-margin-top:var(--cs-global-header-clearance);
}

@media(max-width:1240px){
  .site-header .desktop-nav,
  .site-header .desktop-nav a{
    font-size:14px !important;
  }

  .site-header .header-tagline span,
  .site-header .header-tagline strong{
    font-size:13px !important;
  }

  .site-header .header-tagline{
    min-width:175px !important;
  }
}

@media(max-width:1100px){
  body:not(.wp-admin){
    --cs-global-header-clearance:90px;
  }

  .cs-home-v11 .framer-1jcgmjm{
    padding-top:126px !important;
  }

  .cs-services-v2 > .hero:first-of-type{
    padding-top:82px !important;
  }
}

@media(max-width:720px){
  body:not(.wp-admin){
    --cs-global-header-clearance:78px;
  }

  .cs-home-v11 .framer-1jcgmjm{
    padding-top:102px !important;
  }

  .cs-services-v2 > .hero:first-of-type{
    padding-top:66px !important;
  }

  body.page main > .hero:first-child{
    padding-top:76px !important;
  }
}


/* ============================================================
   V3.8 — MORE SPACE BETWEEN GLOBAL HEADER AND PAGE CONTENT
============================================================ */

/*
 * Create real whitespace below the floating header.
 * This is separate from hero internal padding, so every page starts
 * more comfortably below the navigation shell.
 */
body:not(.wp-admin) main{
  margin-top:38px !important;
}

/* Homepage wrapper */
body:not(.wp-admin) .cs-home-v11{
  margin-top:38px !important;
}

/* Services wrapper */
body:not(.wp-admin) .cs-services-v2{
  margin-top:38px !important;
}

/*
 * Because we now have a true outer gap, reduce the previous extra
 * internal compensation slightly so the hero content itself doesn't
 * get pushed too far down.
 */
.cs-services-v2 > .hero:first-of-type{
  padding-top:82px !important;
}

body.page main > .hero:first-child,
body.page-template-default main > .hero:first-child{
  padding-top:82px !important;
}

.cs-home-v11 .framer-1jcgmjm{
  padding-top:142px !important;
}

@media(max-width:1100px){
  body:not(.wp-admin) main,
  body:not(.wp-admin) .cs-home-v11,
  body:not(.wp-admin) .cs-services-v2{
    margin-top:28px !important;
  }

  .cs-services-v2 > .hero:first-of-type{
    padding-top:72px !important;
  }

  body.page main > .hero:first-child{
    padding-top:72px !important;
  }

  .cs-home-v11 .framer-1jcgmjm{
    padding-top:118px !important;
  }
}

@media(max-width:720px){
  body:not(.wp-admin) main,
  body:not(.wp-admin) .cs-home-v11,
  body:not(.wp-admin) .cs-services-v2{
    margin-top:20px !important;
  }

  .cs-services-v2 > .hero:first-of-type{
    padding-top:58px !important;
  }

  body.page main > .hero:first-child{
    padding-top:64px !important;
  }

  .cs-home-v11 .framer-1jcgmjm{
    padding-top:96px !important;
  }
}


/* ============================================================
   V4.8 — REMOVE EXTREME TOP WHITE GAP
============================================================ */

/*
 * Remove any global/browser/theme spacing above the site.
 * Keep the actual header-to-content spacing rules below unchanged.
 */
html,
body{
  margin-top:0 !important;
  padding-top:0 !important;
}

/*
 * WordPress admin bar is fixed at the top when logged in.
 * WordPress normally handles this, so don't create extra white space.
 */
body.admin-bar{
  margin-top:0 !important;
  padding-top:0 !important;
}

/*
 * Make sure the global header starts flush with the top edge
 * instead of inheriting legacy top margin/padding.
 */
.site-header,
.site-header .nav-wrap,
.site-header .nav-shell{
  margin-top:0 !important;
}

/*
 * Remove legacy top spacer pseudo-elements / empty blocks that can
 * produce a white band above page backgrounds.
 */
body::before,
.site-header::before{
  margin-top:0 !important;
}

/*
 * The page background should begin immediately at the top.
 * Individual page hero/header gaps remain controlled by the existing
 * v3.8/v4.x rules.
 */
body:not(.wp-admin) > #page,
body:not(.wp-admin) > .site,
body:not(.wp-admin) .site-content{
  margin-top:0 !important;
  padding-top:0 !important;
}

/* Preserve proper WordPress admin-bar positioning. */
@media screen and (min-width:783px){
  body.admin-bar .site-header{
    top:32px !important;
  }
}

@media screen and (max-width:782px){
  body.admin-bar .site-header{
    top:46px !important;
  }
}


/* ============================================================
   V5.7 — SATOSHI HEADER REBALANCE
   Final typography values are also enforced by satoshi-v57.css.
============================================================ */
.cs-global-header .header-tagline{
  min-width:150px !important;
}
.cs-global-header .header-tagline span{
  font-size:10px !important;
  font-weight:800 !important;
  letter-spacing:.15em !important;
}
.cs-global-header .header-tagline strong{
  font-size:11px !important;
  font-weight:800 !important;
  letter-spacing:.065em !important;
}
.cs-global-header .desktop-nav-list{
  gap:28px !important;
}

@media(max-width:1280px) and (min-width:1101px){
  .cs-global-header .desktop-nav-list{gap:22px !important}
  .cs-global-header .header-tagline{min-width:138px !important}
  .cs-global-header .header-tagline span{font-size:9px !important}
  .cs-global-header .header-tagline strong{font-size:10px !important}
}
