/*
 * Two Coding Technologies — theme-wide soft UI consistency layer
 * Keeps the official purple/teal palette while standardising surfaces,
 * navigation, buttons, cards, forms and footers across every template.
 */
:root{
  --tc-soft-surface:#FFFFFF;
  --tc-soft-surface-alt:#F8FAFD;
  --tc-soft-border:#E3E8F1;
  --tc-soft-shadow:0 2px 0 rgba(41,60,87,.035),0 12px 28px rgba(41,60,87,.065),inset 0 1px 0 rgba(255,255,255,.92);
  --tc-soft-shadow-hover:0 3px 0 rgba(41,60,87,.045),0 18px 38px rgba(41,60,87,.095),inset 0 1px 0 rgba(255,255,255,.96);
  --tc-soft-shadow-strong:0 4px 0 rgba(41,60,87,.035),0 20px 48px rgba(41,60,87,.09),inset 0 1px 0 rgba(255,255,255,.94);
  --tc-purple:#5540C0;
  --tc-teal:#3EA5B1;
  --tc-navy:#293C57;
  --tc-gradient:linear-gradient(135deg,#5540C0 0%,#3EA5B1 100%);
}

/* Page canvas */
body{background:#F4F6FA!important}
.page,.tc-page{
  background:#fff!important;
  border-color:rgba(85,64,192,.075)!important;
  box-shadow:0 18px 58px rgba(41,60,87,.065)!important;
}

/* Shared navigation */
.nav,.tc-nav{
  background:rgba(255,255,255,.94)!important;
  border-color:rgba(85,64,192,.09)!important;
  box-shadow:var(--tc-soft-shadow)!important;
}
.nav:hover,.tc-nav:hover{box-shadow:var(--tc-soft-shadow-hover)!important}
.nav-links a,.tc-nav-links a{color:var(--tc-navy)!important}
.menu-toggle,.tc-menu{box-shadow:0 10px 22px rgba(85,64,192,.17)!important}
.nav.open .nav-links,.tc-nav.open .tc-nav-links{
  background:rgba(255,255,255,.985)!important;
  border-color:var(--tc-soft-border)!important;
  box-shadow:var(--tc-soft-shadow-strong)!important;
}

/* Buttons */
.btn,.tc-btn{
  background:var(--tc-gradient)!important;
  color:#fff!important;
  box-shadow:0 10px 24px rgba(85,64,192,.17)!important;
  filter:none!important;
}
.btn:hover,.tc-btn:hover{
  transform:translateY(-2px)!important;
  box-shadow:0 15px 30px rgba(85,64,192,.22)!important;
  filter:none!important;
}
.btn.ghost,.btn.light,.tc-btn.ghost{
  background:#fff!important;
  color:var(--tc-navy)!important;
  border:1px solid var(--tc-soft-border)!important;
  box-shadow:var(--tc-soft-shadow)!important;
}
.btn.ghost:hover,.btn.light:hover,.tc-btn.ghost:hover{
  color:var(--tc-purple)!important;
  border-color:rgba(85,64,192,.17)!important;
  box-shadow:var(--tc-soft-shadow-hover)!important;
}
.gradient-section .btn:not(.ghost),
.stats .btn:not(.ghost),
.contact-card .btn:not(.ghost),
.svc-cta-banner .btn:not(.ghost),
.tc-cta .tc-btn{
  background:#fff!important;
  color:var(--tc-purple)!important;
  border:1px solid rgba(255,255,255,.72)!important;
  box-shadow:0 12px 28px rgba(41,60,87,.14)!important;
}

/* Eyebrows and chips */
.eyebrow,.tc-eyebrow,.brand-kicker,.tag,.mini-chip,.chip,.tech-chip,.filter-chip{
  box-shadow:0 7px 18px rgba(41,60,87,.045)!important;
}

/* Theme-wide light cards */
.card,.browser-card,.metric-card,.partner-card,.service-card,.about-panel,.enquiry-card,
.case-card,.portfolio-embed,.why-card,.review-card,.faq-item,.social-btn,.form-card,
.photo-card,.contact-link-card,.timeline-step,.counter-card,.compare-wrap,.compare-card,
.tilt-card,.svc-faq,.faq-body,.newsletter-card,.featured-post,.blog-card,.sidebar-card,
.author-card,.share-bar,.tc-share-card,.tc-contact-panel,.tc-contact-intro,.tc-simple-form-card,
.tc-cf7-card,.hero-card,.toc,.section-card,.tc-service-card,.tc-why-card,.tc-faq,
.tc-ai-path-card,.tc-network-card,.tc-blueprint-item,.tc-stat,.tc-visual,.tc-why-shell{
  background:linear-gradient(145deg,#FFFFFF 0%,#FBFCFE 100%)!important;
  border-color:var(--tc-soft-border)!important;
  box-shadow:var(--tc-soft-shadow)!important;
}

.card:hover,.partner-card:hover,.service-card:hover,.about-panel:hover,.case-card:hover,
.why-card:hover,.review-card:hover,.faq-item:hover,.social-btn:hover,.photo-card:hover,
.contact-link-card:hover,.counter-card:hover,.compare-card:hover,.tilt-card:hover,.blog-card:hover,
.featured-post:hover,.tc-share-card:hover,.tc-service-card:hover,.tc-why-card:hover,
.tc-ai-path-card:hover,.tc-network-card:hover{
  box-shadow:var(--tc-soft-shadow-hover)!important;
}

/* Keep hover motion restrained and professional */
.service-card:hover,.tilt-card:hover,.why-card:hover,.tc-service-card:hover,.tc-network-card:hover,
.blog-card:hover,.review-card:hover,.social-btn:hover{transform:translateY(-4px)!important}

/* Large section shells */
.services-shell,.why-shell,.tc-why-shell,.tc-ai-path-shell,.tc-contact-main,
.tc-simple-contact-section,.tc-portfolio-shell{
  background:linear-gradient(145deg,#F8FAFD 0%,#F4F8FB 100%)!important;
  border-color:rgba(85,64,192,.075)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 12px 32px rgba(41,60,87,.045)!important;
}

/* Inputs and form controls */
input,select,textarea,.combo-trigger,.tc-sidebar-search input{
  background:#fff!important;
  border-color:var(--tc-soft-border)!important;
  box-shadow:inset 0 1px 2px rgba(41,60,87,.025)!important;
}
input:focus,select:focus,textarea:focus,.combo-trigger:focus-within,.tc-sidebar-search input:focus{
  border-color:rgba(85,64,192,.35)!important;
  box-shadow:0 0 0 4px rgba(85,64,192,.075)!important;
  outline:none!important;
}

/* Icon tiles */
.icon-box,.partner-icon,.contact-icon,.social-icon,.tc-icon,.process-dot,.compare-icon{
  box-shadow:0 10px 24px rgba(85,64,192,.14)!important;
}

/* Blog media and portfolio frames */
.blog-thumb,.featured-visual,.cover-visual,.case-art,.tc-blog-media,.tc-portfolio-frame{
  box-shadow:none!important;
}

/* FAQ */
.faq-item,.tc-faq{overflow:hidden!important}
.faq-q i,.tc-faq summary span{box-shadow:0 8px 18px rgba(85,64,192,.12)!important}

/* Legal pages */
.two-coding-legal-page .nav{
  box-shadow:var(--tc-soft-shadow)!important;
}
.two-coding-legal-page .hero-card,
.two-coding-legal-page .toc,
.two-coding-legal-page .section-card{
  background:linear-gradient(145deg,#FFFFFF,#F9FBFD)!important;
  box-shadow:var(--tc-soft-shadow)!important;
}
.two-coding-legal-page footer{background:#fff!important}

/* Service-page refinements */
.tc-service-page .tc-hero-art{
  box-shadow:none!important;
}
.tc-service-page .tc-service-card,
.tc-service-page .tc-why-card,
.tc-service-page .tc-faq,
.tc-service-page .tc-stat{
  border-color:var(--tc-soft-border)!important;
}
.tc-service-page .tc-cta{
  box-shadow:0 16px 38px rgba(85,64,192,.13)!important;
}

/* Preserve intentional brand-gradient panels without heavy shadows */
.gradient-section,.stats,.contact-card,.visual-card,.tc-cta,.svc-cta-banner,.tc-network-core:before{
  box-shadow:0 16px 38px rgba(85,64,192,.13)!important;
}

/* Footer consistency */
footer,.tc-footer{
  background:#fff!important;
  border-top:1px solid var(--tc-soft-border)!important;
  box-shadow:none!important;
}
.footer-inner,.tc-footer-inner{color:#6E788A!important}
.footer-links a,.tc-footer-links a{color:var(--tc-navy)!important}
.footer-links a:hover,.tc-footer-links a:hover{color:var(--tc-purple)!important}

/* Remove decorative card blobs that made pages feel inconsistent/heavy */
.service-card:after,.partner-card:before,.counter-card:after,.why-card:after,.blog-card:after{
  opacity:.20!important;
}

@media(max-width:900px){
  .nav,.tc-nav{box-shadow:var(--tc-soft-shadow)!important}
  .section,.tc-section{padding-top:68px!important;padding-bottom:68px!important}
}

@media(max-width:767px){
  .section,.tc-section{padding-top:54px!important;padding-bottom:54px!important}
  .btn:hover,.tc-btn:hover,.service-card:hover,.tilt-card:hover,.why-card:hover,
  .tc-service-card:hover,.tc-network-card:hover,.blog-card:hover,.review-card:hover,
  .social-btn:hover{transform:none!important}
  .card,.service-card,.about-panel,.case-card,.why-card,.review-card,.faq-item,
  .tc-service-card,.tc-why-card,.tc-faq,.tc-ai-path-card,.tc-network-card{
    box-shadow:0 2px 0 rgba(41,60,87,.03),0 9px 22px rgba(41,60,87,.055),inset 0 1px 0 rgba(255,255,255,.94)!important;
  }
}

@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* =========================================================
   v7.1 — Unified navbar offset and vertical rhythm
   Keeps the first section at the same distance below the fixed
   navigation and removes inconsistent/duplicated section gaps.
   ========================================================= */
:root{
  --tc-nav-offset-desktop:104px;
  --tc-nav-offset-tablet:84px;
  --tc-nav-offset-mobile:76px;
  --tc-section-space-desktop:72px;
  --tc-section-space-tablet:58px;
  --tc-section-space-mobile:48px;
}

/* Use the same fixed navigation geometry on every template family. */
.nav-wrap,
.tc-nav-wrap{
  position:fixed!important;
  top:16px!important;
  left:50%!important;
  right:auto!important;
  transform:translateX(-50%)!important;
  z-index:99999!important;
  width:min(1260px,calc(100% - 44px))!important;
  max-width:1260px!important;
  margin:0!important;
  pointer-events:none!important;
}
.nav-wrap .nav,
.tc-nav-wrap .tc-nav{pointer-events:auto!important}

/* Every page begins from one predictable line below the navbar. */
.page > main,
.tc-page > main,
.legal-main{
  padding-top:var(--tc-nav-offset-desktop)!important;
  margin-top:0!important;
}

/* Consistent first-section position and compact hero-to-content rhythm. */
.page > main > .hero:first-child,
.tc-page > main > .tc-hero:first-child,
.legal-main > .hero:first-child{
  padding-top:18px!important;
  margin-top:0!important;
}
.hero,
.tc-hero{
  padding-bottom:48px!important;
}
.hero + .section,
.tc-hero + .tc-section{
  padding-top:30px!important;
}

/* One shared vertical rhythm for normal content sections. */
.section,
.tc-section{
  padding-top:var(--tc-section-space-desktop)!important;
  padding-bottom:var(--tc-section-space-desktop)!important;
  margin-top:0!important;
  margin-bottom:0!important;
}
.section:empty,
.tc-section:empty{display:none!important}

/* Preserve intentional compact sections instead of reintroducing space. */
.section[style*="padding-top:0"],
.tc-section[style*="padding-top:0"]{padding-top:0!important}
.section[style*="padding-bottom:0"],
.tc-section[style*="padding-bottom:0"]{padding-bottom:0!important}

/* Avoid double spacing before the footer and on legal layouts. */
.page > main > .section:last-child,
.tc-page > main > .tc-section:last-child{
  padding-bottom:64px!important;
}
.two-coding-legal-page .hero{padding-bottom:34px!important}
.two-coding-legal-page .legal-layout{
  padding-top:30px!important;
  padding-bottom:72px!important;
}
footer,.tc-footer{margin-top:0!important}

/* WordPress admin-bar offsets. */
body.admin-bar .nav-wrap,
body.admin-bar .tc-nav-wrap{top:48px!important}

@media(max-width:900px){
  .nav-wrap,
  .tc-nav-wrap{
    top:8px!important;
    width:calc(100% - 22px)!important;
    max-width:none!important;
  }
  .page > main,
  .tc-page > main,
  .legal-main{padding-top:var(--tc-nav-offset-tablet)!important}
  .page > main > .hero:first-child,
  .tc-page > main > .tc-hero:first-child,
  .legal-main > .hero:first-child{padding-top:12px!important}
  .hero,.tc-hero{padding-bottom:40px!important}
  .hero + .section,.tc-hero + .tc-section{padding-top:24px!important}
  .section,.tc-section{
    padding-top:var(--tc-section-space-tablet)!important;
    padding-bottom:var(--tc-section-space-tablet)!important;
  }
  .page > main > .section:last-child,
  .tc-page > main > .tc-section:last-child{padding-bottom:54px!important}
  .two-coding-legal-page .legal-layout{padding-top:24px!important;padding-bottom:58px!important}
  body.admin-bar .nav-wrap,
  body.admin-bar .tc-nav-wrap{top:54px!important}
}

@media(max-width:620px){
  .nav-wrap,
  .tc-nav-wrap{
    top:6px!important;
    width:calc(100% - 16px)!important;
  }
  .page > main,
  .tc-page > main,
  .legal-main{padding-top:var(--tc-nav-offset-mobile)!important}
  .page > main > .hero:first-child,
  .tc-page > main > .tc-hero:first-child,
  .legal-main > .hero:first-child{padding-top:10px!important}
  .hero,.tc-hero{padding-bottom:32px!important}
  .hero + .section,.tc-hero + .tc-section{padding-top:18px!important}
  .section,.tc-section{
    padding-top:var(--tc-section-space-mobile)!important;
    padding-bottom:var(--tc-section-space-mobile)!important;
  }
  .page > main > .section:last-child,
  .tc-page > main > .tc-section:last-child{padding-bottom:46px!important}
  .two-coding-legal-page .hero{padding-bottom:26px!important}
  .two-coding-legal-page .legal-layout{padding-top:20px!important;padding-bottom:48px!important}
}

/* =========================================================
   v7.5 — User-approved final fixes
   Monochrome social logos, repaired gradient panels, one
   Portfolio navbar CTA, and shared ultra-wide page geometry.
   ========================================================= */

/* Social logos: remove individual platform colours for one consistent visual system. */
.social-icon img{
  filter:grayscale(1) saturate(0) contrast(1.2) brightness(.72)!important;
  opacity:.94!important;
  transition:filter .22s ease,opacity .22s ease,transform .22s ease!important;
}
.social-btn:hover .social-icon img{
  filter:grayscale(1) saturate(0) contrast(1.28) brightness(.58)!important;
  opacity:1!important;
  transform:scale(1.04)!important;
}

/* Contact page: keep the left information panel on the intended brand gradient. */
.tc-contact-panel{
  background:linear-gradient(135deg,#5540C0 0%,#3EA5B1 100%)!important;
  border-color:rgba(255,255,255,.22)!important;
  box-shadow:0 28px 70px rgba(41,60,87,.15)!important;
}
.tc-contact-intro{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}
.tc-contact-intro .eyebrow{
  color:#fff!important;
  background:rgba(255,255,255,.14)!important;
  border-color:rgba(255,255,255,.26)!important;
}
.tc-contact-intro h2,
.tc-contact-intro p,
.tc-contact-intro strong{color:#fff!important;}
.tc-contact-intro p{color:rgba(255,255,255,.90)!important;}
.tc-simple-form-card{
  background:linear-gradient(145deg,rgba(248,250,255,.96),rgba(232,244,248,.88))!important;
  border-color:rgba(255,255,255,.58)!important;
  box-shadow:0 24px 58px rgba(25,42,70,.18),inset 1px 1px 0 rgba(255,255,255,.72)!important;
}

/* Why Us comparison: prevent the global light-card layer from washing out the branded card. */
.compare-card-primary{
  background:linear-gradient(135deg,#5540C0 0%,#3EA5B1 100%)!important;
  border-color:rgba(255,255,255,.24)!important;
  box-shadow:18px 22px 54px rgba(41,60,87,.18),inset 1px 1px 0 rgba(255,255,255,.26),inset -12px -12px 30px rgba(41,60,87,.10)!important;
}
.compare-card-primary .compare-badge{
  color:#fff!important;
  background:rgba(255,255,255,.16)!important;
  border-color:rgba(255,255,255,.28)!important;
}
.compare-card-primary .compare-list li{color:#fff!important;}
.compare-card-primary .compare-list li.check .compare-icon{
  color:#fff!important;
  background:rgba(255,255,255,.20)!important;
  border-color:rgba(255,255,255,.30)!important;
}

/* Blog bottom CTA: restore the gradient so white copy is readable. */
.newsletter-card{
  background:linear-gradient(135deg,#5540C0 0%,#3EA5B1 100%)!important;
  border-color:rgba(255,255,255,.24)!important;
  box-shadow:18px 24px 58px rgba(41,60,87,.18),inset 1px 1px 0 rgba(255,255,255,.30),inset -10px -10px 32px rgba(41,60,87,.12)!important;
}
.newsletter-card h2,
.newsletter-card p,
.newsletter-card .eyebrow{color:#fff!important;}
.newsletter-card .btn.light{
  background:#fff!important;
  color:#5540C0!important;
  border-color:rgba(255,255,255,.74)!important;
  box-shadow:0 12px 28px rgba(41,60,87,.15)!important;
}

/* One desktop Portfolio CTA; Portfolio remains accessible inside the mobile menu. */
.mobile-portfolio-link{display:none!important;}
.nav-portfolio-btn,.tc-nav-portfolio-btn{white-space:nowrap!important;}
@media(max-width:900px){
  .nav-links .mobile-portfolio-link,
  .tc-nav-links .mobile-portfolio-link{display:block!important;}
}

/* Shared large-screen geometry, matching the approved Home page on 24/27/32-inch displays. */
@media(min-width:1280px){
  html,body{max-width:100%!important;overflow-x:hidden!important;}
  body .page,
  body .tc-page{
    width:calc(100% - 24px)!important;
    max-width:none!important;
    margin:12px auto!important;
  }
  body .container,
  body .tc-container,
  body header.nav-wrap.container,
  body header.tc-nav-wrap.tc-container,
  body .nav-wrap,
  body .tc-nav-wrap{
    width:calc(100% - 72px)!important;
    max-width:none!important;
  }
  body .nav,
  body .tc-nav{width:100%!important;}
  body footer .container,
  body .footer-inner,
  body .tc-footer-inner{
    width:calc(100% - 72px)!important;
    max-width:none!important;
  }
}
@media(min-width:1850px){
  body .page,
  body .tc-page{width:calc(100% - 34px)!important;margin:16px auto!important;}
  body .container,
  body .tc-container,
  body header.nav-wrap.container,
  body header.tc-nav-wrap.tc-container,
  body .nav-wrap,
  body .tc-nav-wrap,
  body footer .container,
  body .footer-inner,
  body .tc-footer-inner{
    width:calc(100% - 110px)!important;
  }
}
@media(min-width:2400px){
  body .container,
  body .tc-container,
  body header.nav-wrap.container,
  body header.tc-nav-wrap.tc-container,
  body .nav-wrap,
  body .tc-nav-wrap,
  body footer .container,
  body .footer-inner,
  body .tc-footer-inner{
    width:calc(100% - 150px)!important;
  }
}