/* =========================================================
   Visual layer: horizontal scrollers, imagery, stats band
   ========================================================= */

/* ---------- horizontal scroller ---------- */
.hs{--pad:max(16px,calc((100vw - 1200px) / 2));overflow:hidden;padding:6px var(--pad) 14px}
.hs-track{display:flex!important;gap:20px;width:max-content;will-change:transform;grid-template-columns:none!important}
.hs-track > *{flex:none;width:380px}
.hs-track.services > .svc{width:390px}
.hs-track.services > .svc.wide{width:820px}
.hs-track.services > .svc.hidden{display:none}
.hs-track.problems > .prob{width:360px}
.hs-track.why > *{width:420px}
.hs-track.cases > .case{width:540px}
.hs-track.approach > *{width:340px}
.hs-progress{height:3px;border-radius:3px;background:var(--bg-2);margin-top:22px;overflow:hidden}
.hs-progress span{display:block;height:100%;background:var(--grad);transform-origin:left;transform:scaleX(0)}
.dark .hs-progress{background:rgba(255,255,255,.1)}
.hs-hint{display:none}

/* ---------- problem cards with photos ---------- */
.prob{padding:0 0 26px}
.prob > *:not(.prob-img){margin-left:26px;margin-right:26px}
.prob-img{position:relative;height:170px;overflow:hidden;margin-bottom:-22px}
.prob-img img{width:100%;height:100%;object-fit:cover;transform:scale(1.04);transition:transform .9s var(--ease)}
.prob:hover .prob-img img{transform:scale(1.12)}
.prob-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,14,44,0) 40%,rgba(10,14,44,.35))}
.prob .ic{position:relative;z-index:1;background:#fff;box-shadow:0 10px 24px -10px rgba(229,72,77,.5)}

/* ---------- why cards with photos ---------- */
.why-card.has-img{padding:0 0 26px}
.why-card.has-img > *:not(.why-img){margin-left:26px;margin-right:26px}
.why-img{position:relative;height:180px;overflow:hidden;margin-bottom:-25px}
.why-img img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.why-card:hover .why-img img{transform:scale(1.08)}
.why-img .num{position:absolute;right:14px;top:10px;color:rgba(255,255,255,.9);font-size:42px;text-shadow:0 4px 20px rgba(0,0,0,.35)}
.why-card.has-img .ic{position:relative;z-index:1}

/* ---------- hero product card ---------- */
.hv-hero-product{width:250px;left:-2%;bottom:-24px}
.hv-hero-product .img{height:250px;background:#F6D9CC}
.hv-hero-product .img img{object-fit:cover;object-position:center 40%}
.hv-hero-product .row small{display:block;font-size:10.5px;color:var(--muted);font-weight:600}

/* ---------- brand logos ---------- */
.mk-img{width:40px;height:40px;border-radius:12px;object-fit:cover;flex:none;background:#fff;box-shadow:0 0 0 1px var(--line)}
.tcard .who .mk-img,.tcard .who .mk{width:34px;height:34px;margin-left:auto;border-radius:10px}
.tcard .who{align-items:center}

/* ---------- stats band ---------- */
.stats-band{list-style:none;display:grid;grid-template-columns:1.15fr 1fr 1fr 1.15fr;gap:16px;margin-top:64px;position:relative;z-index:1}
.sb{position:relative;overflow:hidden;border-radius:24px;padding:22px 22px 20px;min-height:200px;display:flex;flex-direction:column;justify-content:flex-end;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.sb:hover{transform:translateY(-6px);box-shadow:0 30px 60px -24px rgba(35,45,140,.4)}
.sb-num{font-size:clamp(46px,4.6vw,64px);font-weight:800;letter-spacing:-.05em;line-height:1;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.sb-word{font-size:clamp(20px,1.65vw,25px);position:relative;z-index:1;font-weight:800;letter-spacing:-.04em;line-height:1.1}
.sb-k{font-size:13px;color:var(--muted);font-weight:600;margin-top:6px;position:relative;z-index:1}
.sb.dark{background:var(--ink);color:#fff;border:0}
.sb.dark .sb-k{color:#A3A8C9}
.sb.grad{background:var(--grad);color:#fff;border:0}
.sb.grad .sb-k{color:rgba(255,255,255,.8)}
.sb-logos{position:absolute;top:22px;left:22px;display:flex}
.sb-logos > *{width:40px;height:40px;margin-left:-10px;border:3px solid #fff;border-radius:50%!important;box-shadow:0 6px 16px -6px rgba(30,40,130,.4)}
.sb-logos > *:first-child{margin-left:0}
.sb-logos .mk.more{display:grid;place-items:center;background:var(--ink);color:#fff;font-size:16px}
.sb-map{position:absolute;inset:0 0 40% 0;background-image:radial-gradient(rgba(143,166,255,.28) 1.2px,transparent 1.4px);background-size:10px 10px;-webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 50%,#000 40%,transparent 80%);mask-image:radial-gradient(ellipse 80% 70% at 50% 50%,#000 40%,transparent 80%)}
.sb-map i{position:absolute;width:8px;height:8px;border-radius:50%;background:#8FA6FF;box-shadow:0 0 12px #8FA6FF;animation:ping 2.4s var(--d) infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(143,166,255,.7)}70%{box-shadow:0 0 0 14px rgba(143,166,255,0)}100%{box-shadow:0 0 0 0 rgba(143,166,255,0)}}
.sb-orbit{position:absolute;right:-30px;top:-30px;width:170px;height:170px;border-radius:50%;border:1px dashed rgba(255,255,255,.35)}
.sb-core{position:absolute;left:50%;top:50%;width:48px;height:48px;margin:-24px 0 0 -24px;border-radius:14px;background:#fff;display:grid;place-items:center;box-shadow:0 10px 24px -8px rgba(10,14,44,.5)}
.sb-core img{width:30px;height:30px;object-fit:contain}
.sb-pl{position:absolute;left:50%;top:50%;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:10px;background:#fff;display:grid;place-items:center;transform:rotate(var(--a)) translateX(85px) rotate(calc(-1 * var(--a)));box-shadow:0 8px 18px -8px rgba(10,14,44,.5)}
.sb-pl svg{width:18px;height:18px}
.sb-spark{position:absolute;left:22px;right:22px;top:22px;height:80px}
.sb-spark svg{width:100%;height:70px}
.sb-tag{position:absolute;right:0;top:-6px;font-size:11px;font-weight:700;color:var(--green);background:#E8F8F0;padding:4px 9px;border-radius:99px}

/* ---------- gallery ---------- */
.gal-track{align-items:flex-end}
.gal-track > .gal{width:300px}
.gal-track > .gal.gal-lg{width:420px}
.gal{position:relative;margin:0;border-radius:24px;overflow:hidden;height:400px;background:#1a1f4a;box-shadow:0 30px 60px -28px rgba(35,45,140,.5)}
.gal.gal-lg{height:480px;background:#F6D9CC}
.gal img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.gal:hover img{transform:scale(1.06)}
.gal::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(10,14,44,.75))}
.gal figcaption{position:absolute;left:18px;right:18px;bottom:16px;z-index:1;color:#fff;display:flex;justify-content:space-between;align-items:flex-end;gap:10px}
.gal figcaption b{font-size:18px;letter-spacing:-.02em}
.gal figcaption span{font-size:11px;font-weight:700;background:rgba(255,255,255,.18);backdrop-filter:blur(8px);padding:5px 10px;border-radius:99px;white-space:nowrap}

/* ---------- full-width image band ---------- */
.img-band{position:relative;height:clamp(340px,52vw,560px);overflow:hidden;margin:0 0 clamp(70px,9vw,120px);display:flex;align-items:flex-end}
.ib-media{position:absolute;inset:0}
.ib-media img{width:100%;height:120%;object-fit:cover}
.img-band::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,14,44,.82) 0%,rgba(10,14,44,.35) 55%,rgba(10,14,44,.1)),linear-gradient(0deg,rgba(10,14,44,.6),transparent 50%)}
.ib-text{position:relative;z-index:1;padding-bottom:clamp(36px,5vw,64px);color:#fff}
.ib-line{font-size:clamp(30px,4.6vw,62px);font-weight:800;letter-spacing:-.04em;line-height:1.05;max-width:760px}
.ib-sub{font-size:clamp(15px,1.3vw,18px);color:#C9CDEA;max-width:560px;margin-top:14px}

/* ---------- mobile: native swipe instead of scroll-driven ---------- */
@media (max-width:1100px){
  .stats-band{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .hs{padding-left:16px;padding-right:16px}
  .hs-track{gap:14px}
  .hs-track > *{width:80vw!important;max-width:340px}
  .hs-track.services > .svc.wide{width:86vw!important;max-width:none}
  .hs-progress{margin-top:16px}
  .gal,.gal.gal-lg{height:380px}
  .hv-hero-product{width:170px;bottom:-10px}
  .hv-hero-product .img{height:170px}
  .stats-band{gap:10px;margin-top:40px}
  .sb{min-height:170px;padding:16px}
  .sb-word{font-size:17px}
  .sb-k{font-size:12px}
  .sb-num{font-size:44px}
  .sb-orbit{width:130px;height:130px;right:-30px;top:-30px}
  .sb-pl{transform:rotate(var(--a)) translateX(65px) rotate(calc(-1 * var(--a)));width:28px;height:28px;margin:-14px 0 0 -14px}
  .sb-logos > *{width:32px;height:32px}
}

/* "How we work" slides sideways on phones too */
@media (max-width:680px){
  .process .steps{flex-direction:row!important;width:max-content!important}
  .process .step{width:80vw!important;max-width:340px;min-height:0}
  .process .progress{display:block!important}
}

/* WordPress: keep the floating header below the admin bar when logged in */
.admin-bar .nav{top:46px}
@media (max-width:782px){.admin-bar .nav{top:60px}}
/* WordPress post content inside the prose card */
.wp-content img{max-width:100%;height:auto;border-radius:16px}
.wp-content h2{font-size:24px;margin:28px 0 8px}
.wp-content ul,.wp-content ol{margin:12px 0 12px 22px;color:var(--muted)}
.wp-content .nav-links{display:flex;gap:10px;margin-top:24px}

/* ---------- mobile polish: readable labels, comfortable tap targets, no sideways scroll ---------- */
html{overflow-x:clip}
@media (max-width:760px){
  .eyebrow{font-size:11.5px}
  .foot li a,.foot address a{display:inline-flex;align-items:center;min-height:40px}
  .foot ul{gap:2px}
  .social a{width:44px;height:44px}
}
@media (max-width:1100px){
  .foot li a,.foot address a{display:inline-flex;align-items:center;min-height:40px}
  .social a{width:44px;height:44px}
}
.gal figcaption span{font-size:12px}