/* ============================================================
   Apex Logic — Hand-drawn theme override (global chrome)
   Loaded AFTER style.css/components.css/pages.css so it wins.
   Reversible: remove the handdrawn.css + handdrawn.js includes
   in header.ejs to restore the previous dark/lime design.
   ============================================================ */

/* 1. Repaint the design tokens -> paper + ink (cascades everywhere) */
:root{
  --bg:#f6f2e7 !important; --bg-2:#efeadb !important;
  --bg-card:#fbf8f0 !important; --bg-card-solid:#fbf8f0 !important; --bg-card-hover:#f1ecdc !important;
  --bg-elevated:#fbf8f0 !important; --bg-ink:#efeadb !important;
  --accent:#1c1b18 !important; --accent-strong:#000 !important; --accent-dark:#000 !important;
  --accent2:#1c1b18 !important; --accent2-dark:#000 !important; --violet:#1c1b18 !important; --sky:#1c1b18 !important;
  --gradient:#1c1b18 !important; --gradient-cool:#1c1b18 !important; --gradient-text:#1c1b18 !important;
  --accent-cyan:#1c1b18 !important; --accent-purple:#1c1b18 !important; --accent-gold:#1c1b18 !important;
  --text:#2a2822 !important; --text-strong:#111 !important; --text-muted:#5f5c52 !important; --text-soft:#8a8678 !important;
  --border:rgba(28,27,24,.18) !important; --border-strong:rgba(28,27,24,.34) !important;
  --border-hover:rgba(28,27,24,.55) !important; --hairline:rgba(28,27,24,.1) !important;
  --glass-bg:rgba(28,27,24,.02) !important; --glass-border:rgba(28,27,24,.14) !important;
  --shadow-card:0 16px 34px -26px rgba(60,54,42,.42) !important; --shadow-pop:0 30px 70px -34px rgba(60,54,42,.45) !important;
  --glow-gold:none !important; --glow-soft:none !important; --shadow-glow:none !important; --shadow-ink:0 30px 70px -40px rgba(60,54,42,.5) !important;
  --success:#3a7d4f !important; --error:#b0432f !important; --warning:#8a6d2f !important;
  --font-display:'Caveat', ui-rounded, cursive !important;
  --hd-ink:#1c1b18; --hd-paper:#f6f2e7; --hd-pencil:#6d6a5f;
  --hd-hand:'Caveat', ui-rounded, cursive; --hd-note:'Kalam', 'Comic Sans MS', cursive;
  --hd-round:255px 14px 225px 15px/15px 225px 14px 255px;
  --hd-round-2:15px 225px 15px 255px/225px 15px 255px 14px;
}

/* 2. Paper body + texture layers (injected by handdrawn.js) */
html{background:#f0ebdd}
body{background:#f6f2e7 !important; color:#2a2822 !important; font-family:var(--hd-note) !important; font-weight:400 !important; -webkit-font-smoothing:antialiased}
.hd-grid{position:fixed;inset:0;z-index:0;pointer-events:none;background-image:radial-gradient(rgba(28,27,24,.12) 1.1px,transparent 1.3px);background-size:26px 26px;-webkit-mask:radial-gradient(135% 100% at 50% -8%,#000 0,rgba(0,0,0,.5) 46%,transparent 82%);mask:radial-gradient(135% 100% at 50% -8%,#000 0,rgba(0,0,0,.5) 46%,transparent 82%)}
.hd-grain{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
body > *{position:relative;z-index:1}
.hd-grid,.hd-grain{z-index:0}

/* 3. Typography — handwriting for display, readable Kalam for UI body */
h1,h2,h3,.hero-x-title,.section-title,.sec-title,.display,[class*="-title"]{font-family:var(--hd-hand) !important;font-weight:700 !important;letter-spacing:0 !important;color:var(--hd-ink) !important;text-transform:none !important}
h4,h5,h6{font-family:var(--hd-note) !important;font-weight:700 !important;color:var(--hd-ink) !important}
.eyebrow,.kicker,.overline,.tag,[class*="eyebrow"],[class*="kicker"]{font-family:var(--hd-note) !important;letter-spacing:.16em !important}
p,li,span,label,input,textarea,select,button,a,td,th,dd,dt,blockquote,figcaption{font-family:var(--hd-note)}
/* gradient/clip text -> solid ink */
[class*="gradient"],.lime,.hero-x-title .lime,[style*="background-clip"]{background:none !important;-webkit-text-fill-color:var(--hd-ink) !important;color:var(--hd-ink) !important}

/* 4. Readable prose inside articles / long-form (guardrail for SEO + AdSense) */
.news-detail-content,.article-content,.article-body,.post-content,.prose,.cms-content,.entry-content,.rich-text,
.news-detail-content p,.article-content p,.prose p,.cms-content p,.news-detail-content li,.prose li,
.article-content li,.article-content span,.article-content strong,.article-content em,.article-content td,
.article-content th,.article-content blockquote,.article-content div,.article-content a{
  font-family:'Inter', system-ui, -apple-system, sans-serif !important; letter-spacing:0 !important}
.article-content,.article-content p,.article-content li,.article-content span,.article-content strong,
.article-content em,.article-content td,.article-content blockquote,.article-content div,
.news-detail-content,.news-detail-content p,.prose,.prose p{color:#2b2822 !important; font-weight:400}
.article-content a,.prose a{color:#0f4c81 !important; text-decoration:underline}
.news-detail-content h1,.news-detail-content h2,.news-detail-content h3,.news-detail-content h4,
.article-content h1,.article-content h2,.article-content h3,.prose h1,.prose h2,.prose h3,.cms-content h2,.cms-content h3{
  font-family:'Fraunces', Georgia, serif !important; color:#171512 !important; letter-spacing:-.01em !important}

/* 5. Links */
a{color:var(--hd-ink)}
a:hover{color:#000}

/* 6. Header / nav */
header{background:transparent !important;backdrop-filter:none !important;border:0 !important;box-shadow:none !important}
header nav,.navbar,.nav-inner{background:rgba(246,242,231,.72) !important;backdrop-filter:blur(10px) !important;border:2px solid rgba(28,27,24,.16) !important;border-radius:18px 16px 20px 15px/15px 20px 16px 18px !important;box-shadow:0 12px 30px -22px rgba(60,54,42,.4) !important}
header .logo span,.logo span{font-family:var(--hd-hand) !important;font-weight:700 !important;color:var(--hd-ink) !important}
.nav-menu a,.nav-links a{font-family:var(--hd-note) !important;font-weight:700 !important;color:#3a382f !important;font-size:1.06rem !important}
.nav-menu a:hover{color:#000 !important}
.hamburger span{background:var(--hd-ink) !important}

/* 7. Buttons — hand-drawn ink (primary solid, secondary outline) */
.btn-primary,.nav-cta,.nav-menu .nav-cta,.nav-links .nav-cta,button.btn-primary,a.btn-primary,input[type=submit],
.btn-lime,a.btn-lime,.btn-lime *,.cta-btn,a.cta-btn{
  background:#1c1b18 !important;background-image:none !important;color:#f6f2e7 !important;border:2px solid #1c1b18 !important;
  border-radius:var(--hd-round) !important;font-family:var(--hd-hand) !important;font-weight:700 !important;font-size:1.18rem !important;
  letter-spacing:.2px !important;box-shadow:none !important;text-transform:none !important;transition:transform .14s ease !important}
.btn-lime,.btn-lime span,.btn-lime *{color:#f6f2e7 !important}
.btn-primary:hover,.nav-cta:hover,button.btn-primary:hover,a.btn-primary:hover{transform:translateY(-2px) rotate(-.5deg) !important;color:#f6f2e7 !important;box-shadow:none !important}
.btn-primary::after,.nav-cta::after{display:none !important}
.btn-secondary,.btn-ghost,.btn-outline,.btn-tertiary,a.btn-secondary{
  background:transparent !important;background-image:none !important;color:#1c1b18 !important;border:2px solid #1c1b18 !important;
  border-radius:var(--hd-round-2) !important;font-family:var(--hd-hand) !important;font-weight:700 !important;font-size:1.15rem !important;box-shadow:none !important}
.btn-secondary:hover,.btn-ghost:hover{transform:translateY(-2px) rotate(.4deg) !important;background:rgba(28,27,24,.05) !important}

/* 8. Cards / panels / surfaces -> paper with hand-drawn edges */
.card,.service-card,.feature-card,.glass,.panel,.tile,.stat-card,.pricing-card,.testimonial-card,.news-card,
.project-card,.post-card,[class*="-card"],.box,.surface{
  background:#fbf8f0 !important;border:2px solid rgba(28,27,24,.2) !important;border-radius:20px 15px 22px 14px/14px 22px 15px 20px !important;
  backdrop-filter:none !important;box-shadow:0 14px 30px -26px rgba(60,54,42,.4) !important}
.card:hover,.service-card:hover,[class*="-card"]:hover{box-shadow:0 20px 40px -28px rgba(60,54,42,.5) !important;transform:translateY(-3px) !important}

/* inputs */
input,textarea,select{background:#fbf8f0 !important;border:2px solid rgba(28,27,24,.22) !important;border-radius:14px 11px 15px 10px/10px 15px 11px 14px !important;color:#2a2822 !important}
input:focus,textarea:focus,select:focus{border-color:var(--hd-ink) !important;outline:none !important}

/* pills / badges / chips */
.badge,.pill,.chip,.tag-pill,[class*="badge"]{border-radius:999px !important;border:1.5px solid rgba(28,27,24,.3) !important;background:transparent !important;color:#3a382f !important;font-family:var(--hd-note) !important}

/* dividers */
hr,.divider,.section--border{border-color:rgba(28,27,24,.16) !important}

/* 9. Footer */
footer{background:transparent !important;border-top:2px solid rgba(28,27,24,.18) !important;color:#5f5c52 !important}
footer a{color:#3a382f !important}footer a:hover{color:#000 !important}
footer h3,footer h4,footer .logo span{font-family:var(--hd-hand) !important;color:var(--hd-ink) !important}

/* 10. Custom hand-drawn cursor (desktop, fine pointer) */
@media (hover:hover) and (pointer:fine){
  html.hd-cur,html.hd-cur *{cursor:none !important}
  .hd-cursor,.hd-cursor-dot{position:fixed;top:0;left:0;border-radius:50%;pointer-events:none;z-index:99999;will-change:transform}
  .hd-cursor{width:34px;height:34px;border:2px solid var(--hd-ink);transform:translate(-50%,-50%);transition:width .22s,height .22s,background .22s,opacity .2s;mix-blend-mode:multiply}
  .hd-cursor-dot{width:7px;height:7px;background:var(--hd-ink);transform:translate(-50%,-50%)}
  .hd-cursor.hover{width:60px;height:60px;background:rgba(28,27,24,.07)}
  .hd-cursor.down{width:24px;height:24px}
}

/* 11. Floating 3D ink objects */
.hd-float{position:absolute;z-index:0;pointer-events:none;opacity:.4;overflow:visible}
.hd-float svg{width:100%;height:auto;overflow:visible}

/* 12. Reduced motion */
@media (prefers-reduced-motion:reduce){
  .hd-cursor,.hd-float,.hd-boil{animation:none !important}
}

/* keep real product screenshots (homepage work section) crisp + colourful */
.shot,.shot *{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif !important}

/* ===== homepage hand-drawn 3D hero scene ===== */
.hero-x-3d{display:none !important}
.hero-x-visual{position:relative}
.hd-scene{position:relative;width:100%;aspect-ratio:1/.96;perspective:1600px;perspective-origin:56% 42%}
.hd-stage{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(9deg) rotateY(-17deg);transition:transform .3s ease-out;will-change:transform}
.hd-layer{position:absolute;transform-style:preserve-3d}
.hd-layer svg{width:100%;height:auto;display:block;overflow:visible;filter:drop-shadow(6px 12px 10px rgba(40,36,28,.14))}
.hd-l-dash{left:3%;top:10%;width:80%;animation:hdfl1 8s ease-in-out infinite}
.hd-l-phone{right:-1%;bottom:2%;width:25%;animation:hdfl2 7s ease-in-out infinite}
.hd-l-card{left:-4%;top:-1%;width:40%;animation:hdfl3 9.5s ease-in-out infinite}
.hd-l-shadow{left:9%;bottom:-7%;width:76%;opacity:.5;transform:translateZ(-60px)}
.hd-l-shadow svg{filter:none}
@keyframes hdfl1{0%,100%{transform:translateZ(0) translateY(0)}50%{transform:translateZ(0) translateY(-10px)}}
@keyframes hdfl2{0%,100%{transform:translateZ(95px) translateY(0)}50%{transform:translateZ(95px) translateY(-14px)}}
@keyframes hdfl3{0%,100%{transform:translateZ(150px) translateY(0)}50%{transform:translateZ(150px) translateY(-11px)}}
.hd-note{position:absolute;font-family:var(--hd-hand) !important;font-weight:600;font-size:1.5rem;color:#3a382f;line-height:.95;z-index:3}
.hd-note.hd-n1{top:-6px;right:5%;transform:rotate(-8deg)}
.hd-note.hd-n2{bottom:0;left:-2%;transform:rotate(5deg)}

/* brand mark: new mountain+braces svg is already themed, no filter */
header .logo img,footer .logo img{filter:none !important}

/* kill remaining lime accents so nothing is off-theme */
.btn-lime,.btn-lime:hover,.btn-primary,.nav-cta{box-shadow:none !important}
.roi-results{background:#fbf8f0 !important;border:2px solid rgba(28,27,24,.2) !important;background-image:none !important}
.roi-slider::-webkit-slider-thumb{background:#1c1b18 !important;box-shadow:0 0 0 4px rgba(28,27,24,.14) !important}
.roi-slider::-moz-range-thumb{background:#1c1b18 !important}
.term-status{background:rgba(28,27,24,.05) !important;border-color:rgba(28,27,24,.18) !important;color:#2a2822 !important}
/* chatbot launcher + any lime FAB -> ink, no glow */
.cw-launcher,.cw-toggle,.cw-fab,.cw-open,.cw-bubble-launcher,[class*="cw-launch"],[class*="chat-toggle"],[class*="chat-launch"],[class*="chatbot-toggle"]{
  background:#1c1b18 !important;color:#f6f2e7 !important;box-shadow:0 10px 24px -12px rgba(40,36,28,.6) !important;border:0 !important}

/* ===== JS-injected / inline-styled overlays & widgets -> paper + ink =====
   These use hardcoded dark/cyan/lime inline styles (no !important), so author
   !important below wins over them. */

/* lead-magnet slide-up bar */
#leadMagnetCard{background:#f6f2e7 !important;border:2px solid rgba(28,27,24,.2) !important;box-shadow:0 -6px 40px -8px rgba(40,36,28,.28) !important;backdrop-filter:none !important}
#leadMagnetCard *{color:#2a2822 !important}
#leadMagnetCard input{background:#fbf8f0 !important;border:2px solid rgba(28,27,24,.22) !important}
#leadMagnetCard svg{stroke:#1c1b18 !important}
#leadMagnetCard [style*="background:rgba(0,225,255"]{background:rgba(28,27,24,.07) !important;border-color:rgba(28,27,24,.2) !important}

/* lead popup modal */
#leadPopup{background:rgba(28,27,24,.5) !important;backdrop-filter:blur(4px) !important}
#leadPopup > div{background:#f6f2e7 !important;border:2px solid rgba(28,27,24,.2) !important}
#leadPopup *{color:#2a2822 !important}
#leadPopup input{background:#fbf8f0 !important;border:2px solid rgba(28,27,24,.22) !important}
#leadPopup svg{stroke:#1c1b18 !important}
#leadPopup [style*="background:rgba(163,230,53"]{background:rgba(28,27,24,.08) !important;border-color:rgba(28,27,24,.2) !important}

/* push-notification banner */
.pn-banner{background:#fbf8f0 !important;border-top:2px solid rgba(28,27,24,.2) !important;color:#2a2822 !important;box-shadow:0 -6px 30px -14px rgba(40,36,28,.35) !important}
.pn-banner *,.pn-text{color:#2a2822 !important}
.pn-btn-enable{background:#1c1b18 !important;color:#f6f2e7 !important;border:0 !important}
.pn-btn-later{background:transparent !important;border:2px solid rgba(28,27,24,.3) !important;color:#5f5c52 !important}
.pn-banner svg{color:#1c1b18 !important;stroke:#1c1b18 !important}

/* chatbot widget + FAB */
#chatWidget{background:#f6f2e7 !important;border:2px solid rgba(28,27,24,.2) !important;box-shadow:0 15px 50px -20px rgba(40,36,28,.5) !important}
#chatWidget *{color:#2a2822 !important}
#chatWidget > div:first-child{background:#efe9db !important;background-image:none !important;border-bottom:1px solid rgba(28,27,24,.12) !important}
#chatWidget input,#chatWidget textarea{background:#fbf8f0 !important;border:2px solid rgba(28,27,24,.22) !important;color:#2a2822 !important}
#chatWidget [style*="var(--accent)"]{background:#1c1b18 !important;color:#f6f2e7 !important}
#chatWidget [style*="color:#A3E635"]{color:#5f5c52 !important}
#chatWidget span[style*="background:#A3E635"]{background:#8a8678 !important}
#chatEmailForm{background:rgba(28,27,24,.04) !important;background-image:none !important}
#chatFab{background:#1c1b18 !important;color:#f6f2e7 !important;box-shadow:0 10px 24px -12px rgba(40,36,28,.6) !important}
#chatFab:hover{box-shadow:0 12px 28px -12px rgba(40,36,28,.7) !important}

/* language popup (defensive) */
#langPopup,.lang-popup,#langPopup > div,.lang-popup > div{background:#f6f2e7 !important}
#langPopup *,.lang-popup *{color:#2a2822 !important}

/* ===== mobile polish — kill horizontal overflow + fit the 3D hero on phones =====
   overflow-x:clip (not hidden) prevents sideways scroll WITHOUT breaking the sticky nav. */
html,body{overflow-x:clip}
@media (max-width:860px){
  .hero-x-title{font-size:clamp(2.1rem,8vw,3.1rem) !important;line-height:1.06 !important;word-break:normal}
  .hero-x-visual{overflow:hidden;max-width:100%}
  .hd-scene{max-width:100%;aspect-ratio:1/.82}
  .hd-stage{transform:rotateX(7deg) rotateY(-10deg) scale(.9)}
  .hd-note{font-size:1.05rem}
  .hd-note.hd-n1{right:2%;top:-2px}
  .hero-x-cta{flex-wrap:wrap}
  .nav-cta,.btn-primary,.btn-secondary{font-size:1.05rem !important}
}
@media (max-width:560px){
  .hd-note{display:none}
  .hd-float{display:none}
  .hd-scene{aspect-ratio:1/.72}
  .hd-stage{transform:rotateX(6deg) rotateY(-6deg) scale(.82)}
  .hero-x-title{font-size:clamp(1.85rem,8.5vw,2.6rem) !important}
  .hero-x-sub{font-size:1.12rem !important}
}

/* cookie-consent banner -> paper + ink */
#cookieConsent,.cookie-banner{background:#fbf8f0 !important;border-top:2px solid rgba(28,27,24,.2) !important;color:#2a2822 !important;box-shadow:0 -8px 30px -14px rgba(40,36,28,.35) !important;backdrop-filter:none !important}
#cookieConsent p,.cookie-banner p,.cookie-inner p,.cookie-banner span{color:#2a2822 !important}
.cookie-banner a,#cookieConsent a{color:#1c1b18 !important;text-decoration:underline !important}

/* dark icon tiles -> paper + ink (invert flips baked-in dark SVGs) */
.service-item-icon,.service-icon img,.feature-icon img,.svc-icon img{
  filter:grayscale(1) invert(1) contrast(1.02) !important;background:transparent !important;box-shadow:none !important;
  border:2px solid rgba(28,27,24,.2) !important;border-radius:15px 11px 16px 10px/10px 16px 11px 15px !important}
/* floating action button -> solid ink */
.back-to-top,.scroll-top,.fab{background:#1c1b18 !important;color:#f6f2e7 !important;border:0 !important;box-shadow:0 10px 24px -12px rgba(40,36,28,.6) !important}
.back-to-top svg,.back-to-top i{color:#f6f2e7 !important}
/* lingering lime button glow */
.btn-lime,.btn-primary{filter:none !important}