/* =====================================================================
   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}}