/* =====================================================================
   WhiteCoder — site enhancement layer
   Additive polish ONLY. Loaded after style.css. Deliberately avoids
   touching opacity / transform on GSAP-controlled reveal elements
   (.scroll-soft, .project-card, .review-card, .text-reveal, etc.) so it
   never fights the existing animation orchestration.
   ===================================================================== */

/* ---- text selection ---- */
::selection{background:#0b0b0d;color:#fff}
::-moz-selection{background:#0b0b0d;color:#fff}

/* ---- premium thin scrollbar (desktop) ---- */
@media (pointer:fine){
  html{scrollbar-width:thin;scrollbar-color:rgba(11,11,13,.32) transparent}
  ::-webkit-scrollbar{width:10px;height:10px}
  ::-webkit-scrollbar-track{background:transparent}
  ::-webkit-scrollbar-thumb{
    background:rgba(11,11,13,.26);border-radius:999px;
    border:3px solid transparent;background-clip:content-box;
  }
  ::-webkit-scrollbar-thumb:hover{background:rgba(11,11,13,.42);background-clip:content-box}
}

/* ---- accessible focus rings (quality floor) ---- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible{
  outline:2px solid currentColor;
  outline-offset:3px;
  border-radius:6px;
}
.site-header a:focus-visible,
.idea-strip a:focus-visible{outline-color:#fff}

/* ---- smoother inline links / nav colour easing (no transform) ---- */
a{transition:color .35s cubic-bezier(.22,1,.36,1)}
.footer-grid nav a,
.footer-bottom a{position:relative;transition:opacity .35s cubic-bezier(.22,1,.36,1),color .35s cubic-bezier(.22,1,.36,1)}
.footer-grid nav a:hover,
.footer-bottom a:hover{opacity:.62}

/* ---- thicker, animated nav underline refinement ---- */
.main-nav a:after{height:1.5px;bottom:-7px}

/* ---- contact chips: gentle lift on hover (chips are not GSAP-reveal transformed at rest) ---- */
@media (pointer:fine){
  .chip{will-change:transform}
}

/* ---- media smoothing: avoid jagged scaling during parallax/zoom ---- */
.project-card__media img,
.service-card img,
.blog-card img,
.hero-image img,
.image-rounded img{
  image-rendering:auto;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}

/* ---- card media hover micro-zoom (only where GSAP isn't already scaling at rest) ---- */
@media (pointer:fine){
  .service-card{overflow:hidden}
  .service-card img{transition:transform 1.1s cubic-bezier(.22,1,.36,1)}
  .service-card:hover img{transform:scale(1.05)}
}

/* ---- pill / button hover sheen (background + shadow only, transform stays with GSAP) ---- */
.pill,.btn{position:relative;overflow:hidden;isolation:isolate}
.pill::after,.btn::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.18) 50%,transparent 70%);
  transform:translateX(-120%);transition:transform .9s cubic-bezier(.22,1,.36,1);
}
.pill:hover::after,.btn:hover::after{transform:translateX(120%)}

/* ---- loader: silkier fade-out hand-off ---- */
.site-loader{transition:opacity .3s cubic-bezier(.22,1,.36,1),visibility .3s}

/* ---- whatsapp + client-hub: already animated; add focus polish ---- */
.whatsapp-float:focus-visible{outline:2px solid #fff;outline-offset:4px}

/* ---- respect reduced motion for the additions above ---- */
@media (prefers-reduced-motion:reduce){
  a,.service-card img,.pill::after,.btn::after,.site-loader{transition:none!important}
  .service-card:hover img{transform:none}
  .pill:hover::after,.btn:hover::after{transform:translateX(-120%)}
}

/* =====================================================================
   2026-08 responsive content + case-study update
   ===================================================================== */
html,body{max-width:100%;overflow-x:hidden;overflow-x:clip}
img,video,iframe,object{max-width:100%}
.hero-video{pointer-events:none;-webkit-user-select:none;user-select:none}

/* Trusted client logo rail — one clean row on every viewport, no clipped logos. */
.trusted-clients{padding:clamp(70px,9vw,118px) 0;background:#fff;overflow:hidden}
.trusted-clients__head{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(28px,7vw,100px);align-items:end;margin-bottom:clamp(34px,5vw,58px)}
.trusted-clients__head h2{margin:0}.trusted-clients__head>p{margin:0;max-width:620px;color:#68686d;line-height:1.65;font-size:14px}
.trusted-clients__viewport{width:100%;max-width:100%;overflow:hidden;position:relative}
.trusted-clients__track{--trusted-gap:clamp(34px,5vw,72px);display:flex;align-items:center;flex-wrap:nowrap;width:max-content;min-width:max-content;animation:trustedClientRail 30s linear infinite;will-change:transform;transform:translate3d(0,0,0)}
.trusted-clients__group{display:flex;align-items:center;flex:0 0 auto;flex-wrap:nowrap;gap:var(--trusted-gap);padding-right:var(--trusted-gap)}
.trusted-clients--compact .trusted-clients__group{box-sizing:border-box;min-width:100vw;padding-right:0;justify-content:space-evenly}
.trusted-clients__viewport:hover .trusted-clients__track,.trusted-clients__viewport:focus-within .trusted-clients__track{animation-play-state:paused}
.trusted-client-logo{box-sizing:border-box;display:flex;align-items:center;justify-content:center;flex:0 0 clamp(150px,14vw,196px);width:clamp(150px,14vw,196px);height:clamp(72px,7vw,88px);padding:10px 12px;overflow:visible;text-decoration:none}
.trusted-client-logo img{display:block;width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain;object-position:center;filter:grayscale(1) saturate(0) contrast(.92);opacity:.72;transition:filter .35s ease,opacity .35s ease,transform .35s ease}
.trusted-client-logo:hover img,.trusted-client-logo:focus-visible img,.trusted-client-logo:active img{filter:grayscale(0) saturate(1);opacity:1;transform:scale(1.035)}
@keyframes trustedClientRail{to{transform:translate3d(-50%,0,0)}}

/* Review platform buttons */
.review-platform-links{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:20px}
.review-platform-links .google-review-link{margin-top:0}
.facebook-review-link{background:#fff;color:#111}
.facebook-mark{width:24px;height:24px;border-radius:50%;display:inline-grid;place-items:center;background:#1877f2;color:#fff;font:800 17px/1 Arial,sans-serif;text-transform:lowercase}

/* Premium project case study — additive and backwards-compatible. */
.project-case-hero{padding-bottom:clamp(55px,7vw,90px)}
.project-cover{overflow:hidden}.project-cover img{width:100%;height:auto;max-height:820px;object-fit:cover}
.project-case__overview,.project-story__grid,.project-client-story__grid{display:grid;grid-template-columns:minmax(180px,.68fr) minmax(0,1.32fr);gap:clamp(36px,8vw,126px);align-items:start}
.project-case__rich{font-size:clamp(18px,1.7vw,24px);line-height:1.58;letter-spacing:-.025em;color:#2c2c30}
.project-case__facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:#e2e2df;margin-top:clamp(34px,5vw,58px);border:1px solid #e2e2df}
.project-case__facts>div{background:#fff;padding:20px;min-height:102px}.project-case__facts span{display:block;font-size:9px;text-transform:uppercase;letter-spacing:.12em;color:#888;margin-bottom:10px}.project-case__facts strong{font-size:14px;line-height:1.4}
.project-story{border-top:1px solid #e5e5e2}.project-story--before{background:#f5f5f2}.project-story--solution{background:#111113;color:#fff}.project-story--solution .eyebrow{color:#8c8c94}.project-story--solution .section-title{color:#fff}
.project-story__copy{display:grid;gap:clamp(28px,5vw,54px)}.project-story__copy>div{padding-top:18px;border-top:1px solid currentColor;border-color:rgba(90,90,90,.22)}.project-story--solution .project-story__copy>div{border-color:rgba(255,255,255,.18)}
.project-story__copy h3{font-size:12px;text-transform:uppercase;letter-spacing:.1em;margin:0 0 14px}.project-story__copy p{margin:0;font-size:clamp(16px,1.45vw,20px);line-height:1.68;color:#5a5a60}.project-story--solution .project-story__copy p{color:#b7b7be}
.project-case__media{margin-top:clamp(46px,7vw,88px)}.project-media-label{font-size:10px;text-transform:uppercase;letter-spacing:.14em;font-weight:700;margin:0 0 18px;color:#777}.project-story--solution .project-media-label{color:#8c8c94}
.project-case__media .project-media-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.project-case__media .project-media{border-radius:22px;aspect-ratio:16/10}.project-case__media .project-media img{width:100%;height:100%;object-fit:cover}
.project-case__feature-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(22px,5vw,70px);margin-top:clamp(48px,8vw,98px)}
.project-case__list{padding-top:22px;border-top:1px solid rgba(255,255,255,.18)}.project-case__list ul{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:0}.project-case__list li{position:relative;padding:15px 0 15px 24px;border-bottom:1px solid rgba(255,255,255,.12);font-size:15px;line-height:1.45;color:#d0d0d5}.project-case__list li:before{content:"";position:absolute;left:2px;top:22px;width:6px;height:6px;border-radius:50%;background:#fff}.project-tech-list{display:flex!important;flex-wrap:wrap;gap:8px!important}.project-tech-list li{padding:9px 13px!important;border:1px solid rgba(255,255,255,.16)!important;border-radius:999px;font-size:12px!important}.project-tech-list li:before{display:none}
.project-gallery{background:#fff}.project-gallery .section-title{margin-bottom:0}
.project-client-story{background:#f3f3f0}.project-client-story__brand img{display:block;max-width:min(260px,70%);max-height:110px;object-fit:contain;margin-bottom:34px;filter:none}.project-client-story__quote blockquote{margin:0;font-size:clamp(31px,4vw,60px);line-height:1.05;letter-spacing:-.055em;font-weight:500}.project-owner{display:flex;align-items:center;gap:15px;margin-top:clamp(34px,5vw,60px);padding-top:22px;border-top:1px solid #d4d4d0}.project-owner img{width:62px;height:62px;border-radius:50%;object-fit:cover}.project-owner strong,.project-owner span{display:block}.project-owner strong{font-size:14px}.project-owner span{font-size:11px;color:#777;margin-top:4px}.project-case__links{max-width:900px}.project-case__links .project-links-list{margin-top:18px}

/* About journey scroll follower. */
main[data-barba-namespace="about"] .about-timeline-progress{position:absolute;z-index:3;left:clamp(178px,18vw,245px);top:0;width:1px;height:var(--journey-progress,0%);background:linear-gradient(180deg,#b42eaf,#7b0d73);pointer-events:none;transition:height .08s linear}
main[data-barba-namespace="about"] .about-timeline-progress i{position:absolute;left:50%;bottom:0;width:15px;height:15px;border-radius:50%;transform:translate(-50%,50%);background:#b42eaf;border:3px solid #f4dcf5;box-shadow:0 0 0 9px #121214,0 0 0 15px rgba(180,46,175,.18)}

/* Lock world-map pins to the same intrinsic coordinate system as the image. */
main[data-barba-namespace="about"] .about-world-map{position:relative!important;aspect-ratio:1428/716!important;width:100%!important;height:auto!important;overflow:visible!important}
main[data-barba-namespace="about"] .about-world-map>img{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:contain!important;margin:0!important;max-width:none!important}
main[data-barba-namespace="about"] .about-map-pin{margin:-16px 0 0 -16px!important}

@media(max-width:900px){
  .trusted-clients__head,.project-case__overview,.project-story__grid,.project-client-story__grid{grid-template-columns:1fr;gap:24px}
  .trusted-clients__track{--trusted-gap:32px;animation-duration:27s}
  .project-case__media .project-media-grid{grid-template-columns:1fr}
  .project-case__feature-grid{grid-template-columns:1fr}
  main[data-barba-namespace="about"] .about-timeline-progress{left:17px!important}
}
@media(max-width:640px){
  .trusted-clients{padding:56px 0}
  .trusted-clients__head{margin-bottom:28px;gap:14px}
  .trusted-clients__head>p{font-size:13px;line-height:1.55}
  .trusted-clients__track{--trusted-gap:22px;animation-duration:24s}
  .trusted-clients--compact .trusted-clients__group{justify-content:center;gap:clamp(30px,10vw,52px)}
  .trusted-client-logo{flex-basis:112px;width:112px;height:58px;padding:6px 4px}
  .review-platform-links{align-items:stretch}.review-platform-links .google-review-link{flex:1 1 100%;justify-content:center}
  .project-case__facts{grid-template-columns:1fr}.project-case__feature-grid{gap:40px}.project-client-story__quote blockquote{font-size:clamp(29px,9vw,44px)}
  main[data-barba-namespace="about"] .about-map-pin{transform:scale(.72)!important;transform-origin:center!important}
  main[data-barba-namespace="about"] .about-map-pin__label{font-size:9px!important;padding:7px 9px!important;bottom:calc(100% + 12px)!important}
}
@media(prefers-reduced-motion:reduce){.trusted-clients__track{animation:none!important}.trusted-clients__viewport{overflow-x:auto}.about-timeline-progress{transition:none!important}}

/* Preserved Client Hub header control from the PHP production build */
.header-actions{display:flex;align-items:center;gap:14px;margin-left:22px}
.client-hub-login{width:42px;height:42px;border-radius:50%;display:inline-grid;place-items:center;color:#fff;border:1px solid rgba(255,255,255,.45);background:rgba(255,255,255,.08);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);transition:transform .35s ease,background .35s ease,border-color .35s ease,color .35s ease;position:relative;z-index:1004;pointer-events:auto}
.client-hub-login svg{width:20px;height:20px;display:block;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.client-hub-login:hover{transform:translateY(-2px);background:#fff;color:#0b0b0d;border-color:#fff}
.client-hub-login:focus-visible{outline:2px solid #fff;outline-offset:4px}
@media (max-width:900px){.header-actions{position:fixed;top:max(14px,env(safe-area-inset-top));right:max(76px,calc(env(safe-area-inset-right) + 76px));z-index:1004;margin-left:0;pointer-events:auto}.client-hub-login{width:48px;height:48px;background:rgba(255,255,255,.86);color:#0b0d;border-color:rgba(0,0,0,.12);box-shadow:0 14px 34px rgba(0,0,0,.08)}.client-hub-login:hover{background:#fff;color:#0b0b0d}body.nav-open .client-hub-login{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.18);box-shadow:none}}

/* v2.0.3 performance: preserve the design while reducing scroll-time layer/paint pressure. */
.project-card,.project-card__media img,.blog-card img,.service-card img,.image-rounded img{will-change:auto!important}
.idea-strip,.site-footer{contain:paint}
.idea-bg{will-change:auto!important;pointer-events:none}
.project-card__media,.service-card,.blog-card{contain:paint}
img[loading="lazy"]{content-visibility:auto}
@media (pointer:coarse),(max-width:767px){.idea-bg{display:none!important}.project-card,.project-card__media img,.blog-card img,.service-card img{will-change:auto!important}}

/* =====================================================================
   v2.0.6 — interaction stability, mobile layout lock and review polish
   ===================================================================== */
html,body{width:100%;max-width:100%;overflow-x:clip}
.site-main,.career-page,.legacy-router-scope,.container,.split,.project-grid,.service-cards,.blog-grid,.review-wall{min-width:0;max-width:100%}
.site-main>*{max-width:100%}
a,button,[role="button"]{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.btn,.pill,.chip,.review-platform-btn,.main-nav a,.footer-grid a,.career-track-card__link{user-select:none;-webkit-user-select:none}
.btn:active,.pill:active,.chip:active,.review-platform-btn:active,.career-track-card__link:active{box-shadow:none}

/* React controls stay physically locked in place; only visual surface effects animate. */
.btn,.pill,.chip,.review-platform-btn{transform:none}
@media(pointer:fine){
  .btn:hover,.pill:hover,.chip:hover,.review-platform-btn:hover{transform:none}
}

/* Review buttons get the same premium sheen without magnetic movement. */
.review-platform-btn{overflow:hidden;isolation:isolate}
.review-platform-btn .review-platform-icon{transition:box-shadow .35s ease,filter .35s ease}
.review-platform-btn:hover .review-platform-icon,.review-platform-btn:focus-visible .review-platform-icon{box-shadow:0 8px 24px rgba(0,0,0,.10);filter:saturate(1.08)}

/* Mobile layout lock: no horizontal cards, no flex growth surprises, fixed touch sizes. */
@media(max-width:767px){
  :root{--mobile-page-pad:18px}
  body{min-width:320px}
  .container{width:calc(100% - (var(--mobile-page-pad) * 2));margin-left:auto;margin-right:auto}
  .site-main,.career-page,.reviews-section,.section,.section--tight{width:100%;overflow-x:clip}
  .split,.project-grid,.service-cards,.blog-grid,.review-wall,.career-track-grid,.career-experience-grid,.career-process__grid,.career-records__panel,.career-apply__grid{width:100%;max-width:100%;min-width:0}
  .project-card,.service-card,.blog-card,.review-card,.career-track-card,.career-experience-card,.career-process-step,.career-form{width:100%;max-width:100%;min-width:0}
  .btn,.pill,.review-platform-btn,button{min-height:48px}
  .review-platform-links{width:100%}
  .review-platform-btn{width:100%;max-width:100%;justify-content:flex-start}
  .review-platform-btn>i{margin-left:auto}
  .review-platform-icon{margin-left:0}
  .career-hero__panel,.career-form,.career-records__panel,.career-final{width:100%;max-width:100%}
  input,select,textarea{max-width:100%;min-width:0}
}

/* v2.0.9 interaction stability: never translate/scale primary interactive controls on press. */
a,button,[role="button"]{touch-action:manipulation}
.btn,.pill,.chip,.review-platform-btn,.main-nav a,.footer-grid a,.service-card,.project-card,.blog-card{transform:none!important}
.btn:active,.pill:active,.chip:active,.review-platform-btn:active,.main-nav a:active,.footer-grid a:active,.service-card:active,.project-card:active,.blog-card:active{transform:none!important}