/*
 * Static replacement for the WP Customizer inline CSS (#quad-customizer-colors)
 * with the live site's saved values baked in — see _reference/site-config.txt.
 * Loads last, after footer.css, exactly like the inline style did on WP.
 */

/* ─── Branding layout (static baseline) ─── */
.quad-branding{display:inline-flex;align-items:center;gap:12px;text-decoration:none;color:inherit;}
.quad-brand-text{display:flex;flex-direction:column;line-height:1.15;}
.quad-site-title{font-size:20px;font-weight:700;letter-spacing:-0.01em;}
.quad-site-tagline{font-size:12px;opacity:0.85;margin-top:2px;}
.mobile-logo .quad-site-title{font-size:16px;}
.mobile-logo .quad-site-tagline{font-size:11px;}

/* ─── Logo widths (desktop 45px / mobile 35px) ─── */
@media (max-width:767px){.site-logo .quad-logo,.mobile-logo .quad-logo{max-width:35px;}}
@media (min-width:992px){.site-logo .quad-logo,.mobile-logo .quad-logo{max-width:45px;}}

/* ─── Branding text colors (normal + sticky) ─── */
@media (max-width:767px){.quad-site-title{color:#ffffff;}}
@media (max-width:767px){body.quad-scrolled .quad-site-title{color:#ffffff;}}
@media (min-width:992px){body.quad-scrolled .quad-site-title{color:#ffffff;}}
@media (max-width:767px){.quad-site-tagline{color:#ffffff;}}
@media (max-width:767px){body.quad-scrolled .quad-site-tagline{color:#ffffff;}}
@media (min-width:992px){body.quad-scrolled .quad-site-tagline{color:#ffffff;}}

/* ─── Fix: hero floating labels ───
   master.css sets z-index:-1 on the labels, so text longer than the template's
   original copy disappears behind the hero image. Lift them above the image and
   wrap the long third label so it stays on the purple background. */
.welcome5-section-area .welcome5-images-area .content-elements,
.welcome5-section-area .welcome5-images-area .content1-elements,
.welcome5-section-area .welcome5-images-area .content2-elements{z-index:1;}
.welcome5-section-area .welcome5-images-area .content2-elements p{max-width:240px;margin-inline:auto;}

/* ─── Brands marquee: linear glide like the original slick autoplay ─── */
.brand2-logos .swiper-wrapper{transition-timing-function:linear !important;}

/* Company name under each logo. Stack the logo + caption in a centred column
   (the template had the logo as a bare inline-block img). */
.brand2-section-area .brand2-logos .brand2-logo{
  display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;
}
.brand2-logo-name{
  font-family:"Figtree",sans-serif;
  font-size:13px;font-weight:600;line-height:1.3;
  color:var(--Text-Color,#0D0E10);opacity:.75;
  max-width:200px;
}
/* Linked logos: no underline, inherit the caption colour, gentle hover. */
a.brand2-logo{text-decoration:none;transition:opacity .2s ease;}
a.brand2-logo:hover{opacity:.7;}
a.brand2-logo .brand2-logo-name{color:var(--Text-Color,#0D0E10);}

/* ─── Inner pages (blog): solid white header ───
   Adapted from the WP customizer's body.quad-inner-page rules — the hero-less
   pages need a legible header at all times. Applied via Header's `inner` prop. */
.header-area.quad-inner,
.header-area.quad-inner.homepage5,
.header-area.quad-inner.header-sticky,
.mobile-header.quad-inner,
.mobile-header.quad-inner.mobile-haeder5{background:#fff !important;background-image:none !important;box-shadow:0 1px 12px rgba(0,0,0,0.08) !important;}
.header-area.quad-inner .quad-site-title,
.mobile-header.quad-inner .quad-site-title{color:#111 !important;}
.header-area.quad-inner .quad-site-tagline,
.mobile-header.quad-inner .quad-site-tagline{color:#555 !important;}
.header-area.quad-inner .nav-link,
.header-area.quad-inner .nav-link span{color:#222 !important;}
.header-area.quad-inner .nav-link:hover,
.header-area.quad-inner .nav-link:hover span,
.header-area.quad-inner .nav-link.active,
.header-area.quad-inner .nav-link.active span{color:#000 !important;}
.mobile-header.quad-inner .mobile-nav-icon i,
.mobile-header.quad-inner .dots-menu i{color:#222 !important;}

.cmk-footer .cmk-footer-post-item{margin-bottom:14px;}
.cmk-footer .cmk-footer-post-item:last-child{margin-bottom:0;}

/* ─── Testimonials: continuous vertical marquee ───
   Replaces the old slick vertical autoplay (speed 4000/slide, linear,
   pause on hover). Cards are tripled in the DOM; shifting one third loops
   seamlessly. ~3 cards visible, like slick's slidesToShow:3. */
.testimonial2-section-area .testimonials2-boxarea,
.testimonial2-section-area .testimonials2-boxarea2{height:1000px;overflow:hidden;position:relative;}
.cmk-vscroll{animation:cmk-scroll-up 12s linear infinite;will-change:transform;}
.testimonials2-boxarea:hover .cmk-vscroll,
.testimonials2-boxarea2:hover .cmk-vscroll{animation-play-state:paused;}
@keyframes cmk-scroll-up{from{transform:translateY(0);}to{transform:translateY(-33.333%);}}
/* keep spacing uniform inside the loop (master.css zeroes the last card's margin) */
.cmk-vscroll .testimonial2-section-box:last-child{margin-bottom:30px;}

/* ─── Hero on mobile: hide the small floating second image ───
   Both hero screenshots stack on phones (master.css makes header5-img2
   full-width there), which reads as the same image twice. */
@media (max-width:767px){
  .welcome5-section-area .welcome5-images-area .img1 .header5-img2{display:none;}
}

/* ─── Services: pinned card stack on mobile/tablet too ───
   Desktop offsets (100/150/200/250px) assume a tall viewport; on small
   screens use tighter steps under the mobile header so the deck effect
   still reads. */
@media (max-width:991px){
  .service-sticky-area .all-sticky-area .sticky-area .section-area{position:sticky;top:80px !important;margin-bottom:40px;}
  .service-sticky-area .all-sticky-area .sticky-area .section-area.bg2{top:92px !important;}
  .service-sticky-area .all-sticky-area .sticky-area .section-area.bg3{top:104px !important;}
  .service-sticky-area .all-sticky-area .sticky-area .section-area.bg4{top:116px !important;}
}

/* ─── Booking section heading (above the Cal.com embed) ─── */
.cmk-booking-header{padding:80px 0 10px;}
.cmk-booking-header p{color:#676879;font-family:"Figtree",sans-serif;font-size:17px;line-height:1.6;margin:0;}
@media (max-width:767px){.cmk-booking-header{padding-top:56px;}}

/* ─── Accessibility ─── */
.cmk-hamburger{background:none;border:0;padding:0;cursor:pointer;color:inherit;}
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible{outline:2px solid #433CE7;outline-offset:2px;border-radius:4px;}

/* ─── Anchor targets: clear the fixed header ─── */
#services,#testimonials,#getstarted{scroll-margin-top:110px;}
@media (max-width:991px){#services,#testimonials,#getstarted{scroll-margin-top:90px;}}

/* ─── 404 page ─── */
.cmk-404{
  padding:170px 0 110px;
  text-align:center;
  font-family:"Figtree",sans-serif;
  background:linear-gradient(180deg,#F0E9FF 0%,#fff 70%);
}
.cmk-404-crown{width:64px;height:auto;opacity:.9;}
.cmk-404-code{
  margin:18px 0 0;
  color:#433CE7;
  font-size:15px;
  font-weight:800;
  letter-spacing:.3em;
}
.cmk-404 h1{
  margin:8px 0 12px;
  color:#0D0E10;
  font-size:clamp(28px,4vw,42px);
  font-weight:700;
  letter-spacing:-.02em;
}
.cmk-404-text{color:#676879;font-size:17px;margin:0 0 30px;}
.cmk-404-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}
.cmk-404-primary{
  display:inline-flex;align-items:center;gap:8px;
  padding:13px 26px;border-radius:8px;
  background:#433CE7;color:#fff;font-size:15px;font-weight:700;text-decoration:none;
  transition:background .3s ease;
}
.cmk-404-primary:hover{background:#332dbb;color:#fff;}
.cmk-404-secondary{
  display:inline-flex;align-items:center;
  padding:13px 26px;border-radius:8px;
  background:#fff;color:#433CE7;font-size:15px;font-weight:700;text-decoration:none;
  border:1px solid rgba(67,60,231,.3);
  transition:all .3s ease;
}
.cmk-404-secondary:hover{border-color:#433CE7;background:#F7F4FF;}

/* ─── Cookie consent popup (bottom right) ─── */
.cmk-cookiebar{
  position:fixed;
  right:24px;
  bottom:24px;
  z-index:990;
  width:min(340px,calc(100vw - 32px));
  background:#fff;
  border:1px solid rgba(86,95,118,.12);
  border-radius:14px;
  box-shadow:0 18px 44px rgba(13,14,16,.16);
  padding:22px;
  font-family:"Figtree",sans-serif;
  animation:cmk-cookiebar-in .45s cubic-bezier(.4,0,.2,1);
}
@keyframes cmk-cookiebar-in{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:none;}}
.cmk-cookiebar-icon{
  display:flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:50%;
  background:#F0E9FF;color:#433CE7;font-size:17px;margin-bottom:12px;
}
.cmk-cookiebar h4{color:#0D0E10;font-size:16px;font-weight:700;margin:0 0 6px;}
.cmk-cookiebar p{color:#676879;font-size:13.5px;line-height:1.6;margin:0 0 16px;}
.cmk-cookiebar p a{color:#433CE7;text-decoration:underline;text-underline-offset:2px;}
.cmk-cookiebar-actions{display:flex;gap:10px;}
.cmk-cookiebar-actions button{
  flex:1;padding:10px 14px;border-radius:8px;font-size:14px;font-weight:700;
  cursor:pointer;transition:all .3s ease;font-family:inherit;
}
.cmk-cookiebar-accept{background:#433CE7;color:#fff;border:1px solid #433CE7;}
.cmk-cookiebar-accept:hover{background:#332dbb;border-color:#332dbb;}
.cmk-cookiebar-decline{background:#fff;color:#676879;border:1px solid rgba(86,95,118,.25);}
.cmk-cookiebar-decline:hover{color:#0D0E10;border-color:#676879;}
@media (max-width:600px){.cmk-cookiebar{right:16px;bottom:16px;}}

/* ─── Preloader fade-out (replaces jQuery fadeToggle) ─── */
#preloader{transition:opacity 0.4s ease;}
#preloader.is-hidden{opacity:0;pointer-events:none;}
/* first visit only — html.cmk-revisit is set pre-paint by an inline script */
html.cmk-revisit #preloader{display:none;}