:root{
  --blue:#2f3fa3;
  --teal:#3fc2c9;
  --ink:#0d1330;
  --muted:#5a6178;
  --bg:#ffffff;
  --soft:#f4f7fc;
  --line:#e6ebf4;
  --grad:linear-gradient(120deg,#2f3fa3 0%,#2f7fc4 55%,#3fc2c9 100%);
  --shadow:0 24px 60px -18px rgba(31,52,130,.18);
  --radius:22px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
/* ---- back to top ---- */
#toTop{
  position:fixed;right:26px;bottom:26px;z-index:60;
  width:48px;height:48px;border-radius:50%;border:none;cursor:pointer;
  background:var(--grad);color:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 26px -8px rgba(31,52,130,.45);
  opacity:0;visibility:hidden;transform:translateY(14px);
  transition:opacity .3s ease,transform .3s ease,visibility .3s;
}
#toTop.show{opacity:1;visibility:visible;transform:translateY(0)}
#toTop:hover{transform:translateY(-3px);box-shadow:0 14px 30px -8px rgba(31,52,130,.55)}
#toTop svg{width:20px;height:20px}
@media(max-width:760px){#toTop{right:16px;bottom:16px;width:42px;height:42px}}
body{position:relative;
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  background:var(--bg);
  color:var(--ink);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.logo-name{font-family:'Be Vietnam Pro','Inter',sans-serif}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}

/* ---------- CIRCUIT BACKGROUND (white, static, brand colour) ---------- */
#bgCircuit{
  position:fixed;inset:0;z-index:0;pointer-events:none;background:#fff;overflow:hidden;
}
#bgCircuit .pattern{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;                 /* fills the whole screen, no tiling gaps */
  opacity:.34;
}
/* soft brand-colour wash so the traces read blue-teal like the logo */
#bgCircuit .tint{
  position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(47,63,163,.05),rgba(63,194,201,.05) 55%,rgba(47,63,163,.04));
  mix-blend-mode:multiply;
}
/* glow breathes in place — traces light up, nothing slides */
/* live signals travelling along the traces — same idea as inside the logo */
#bgCircuit .signals{
  position:absolute;inset:-2%;width:104%;height:104%;
  opacity:.55;
  filter:saturate(1.3) drop-shadow(0 0 5px rgba(63,194,201,.45));
}
#bgCircuit .glow{
  position:absolute;inset:0;
  background:
    radial-gradient(circle at 22% 28%,rgba(63,194,201,.16),transparent 42%),
    radial-gradient(circle at 78% 68%,rgba(47,63,163,.14),transparent 45%);
  animation:bgBreathe 9s ease-in-out infinite;
}
@keyframes bgBreathe{0%,100%{opacity:.55}50%{opacity:1}}
#bgCircuit::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% 45%,rgba(255,255,255,.30) 0%,rgba(255,255,255,.60) 58%,rgba(255,255,255,.86) 100%);
}

/* ---------- FLYING LOGO ---------- */
#flyLogo{
  position:absolute;top:0;left:0;width:440px;aspect-ratio:1141/791;
  z-index:1;pointer-events:none;will-change:transform,opacity;
  display:flex;align-items:center;justify-content:center;
}
#flyLogo.behind{z-index:0}
.logo-anchor{pointer-events:none}
.la-hero{position:relative;width:112%;max-width:700px;margin:0 auto;aspect-ratio:1141/791}
.la-about{position:relative;width:118%;margin-left:-9%;aspect-ratio:1141/791}
.sec-head{position:relative}
.la-mini{
  position:relative;width:86px;aspect-ratio:1141/791;
  margin:0 0 34px;z-index:3;
}
.la-mini.left{margin-right:auto}
.la-footer{position:absolute;top:34px;left:50%;transform:translateX(-50%);width:130px;aspect-ratio:1141/791;z-index:0}
.la-split{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:46%;aspect-ratio:1141/791;z-index:0}

.logo-scene{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.logo-scene .aura{
  position:absolute;width:125%;height:125%;border-radius:50%;
  background:radial-gradient(circle,rgba(70,150,220,.20) 0%,rgba(70,150,220,.08) 35%,rgba(70,150,220,0) 70%);
  animation:auraPulse 3.2s ease-in-out infinite;
}
@keyframes auraPulse{0%,100%{opacity:.6;transform:scale(1)}50%{opacity:1;transform:scale(1.08)}}
.logo-scene .logo-img{
  position:relative;width:92%;z-index:2;
  animation:idleGlow 3.2s ease-in-out 2.2s infinite;
  transition:opacity .45s ease;
}
/* while parked on the banner the astronaut takes the logo's place */
body.astro-on .logo-scene .logo-img{opacity:0}
.logo-scene .astro{
  position:absolute;inset:0;z-index:3;display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity .45s ease;pointer-events:none;
}
body.astro-on .logo-scene .astro{opacity:1}
.logo-scene .astro svg{
  height:114%;width:auto;overflow:visible;
  filter:drop-shadow(0 22px 38px rgba(40,90,140,.25));
  animation:astroIn 1.6s cubic-bezier(.2,.8,.25,1) .15s both, astroFloat 5.2s ease-in-out 1.8s infinite;
}
@keyframes astroIn{
  0%{opacity:0;filter:blur(16px) brightness(1.35);transform:scale(1.45)}
  55%{opacity:1;filter:blur(2px) brightness(1.08);transform:scale(.97)}
  100%{opacity:1;filter:blur(0) brightness(1) drop-shadow(0 22px 38px rgba(40,90,140,.25));transform:scale(1)}
}
@keyframes astroFloat{
  0%,100%{transform:translateY(0) rotate(-1.2deg)}
  50%{transform:translateY(-14px) rotate(1.6deg)}
}
.astro #astroHead,.astro #astroEyes{transform-box:fill-box;transform-origin:center;will-change:transform}
.astro .eye{transform-box:fill-box;transform-origin:center;animation:astroBlink 5.4s ease-in-out infinite}
@keyframes astroBlink{0%,91%,100%{transform:scaleY(1)}94%,96%{transform:scaleY(.08)}}
.astro .ant-tip{
  animation:antPulse 6s steps(1,end) infinite;
  will-change:fill,filter,opacity;
}
@keyframes antPulse{
  0%,100%{fill:#168cff;opacity:1;filter:drop-shadow(0 0 10px #168cff)}
  50%{fill:#ff304f;opacity:1;filter:drop-shadow(0 0 10px #ff304f)}
}
.astro .tw{animation:twinkle 3.4s ease-in-out infinite}
.astro .tw2{animation-delay:.9s}
.astro .tw3{animation-delay:1.7s}
.astro .tw4{animation-delay:2.4s}
@keyframes twinkle{0%,100%{opacity:.25;transform:scale(.7)}50%{opacity:1;transform:scale(1.15)}}
.astro .tw,.astro .tw2,.astro .tw3,.astro .tw4{transform-box:fill-box;transform-origin:center}
/* left arm waves a small ta-ta, pivoting gently at the shoulder — hand stays low, never behind the helmet */
.astro .wave{transform-origin:118px 262px;animation:taTa 4s ease-in-out 2.4s infinite}
/* ---- footer plunge : the robot falls into the footer "sea", limbs flailing ---- */
#flyLogo.infoot{z-index:30}
.astro .legL,.astro .legR{transform-box:fill-box;transform-origin:50% 6%}
.astro .armR{transform-box:fill-box;transform-origin:14% 28%}
body.sinking .astro .legL{animation:flailLeg .8s ease-in-out infinite alternate}
body.sinking .astro .legR{animation:flailLeg .8s ease-in-out .4s infinite alternate-reverse}
body.sinking .astro .armR{animation:flailArm .85s ease-in-out infinite alternate}
body.sinking .astro .wave{animation:flailWave .85s ease-in-out .42s infinite alternate}
body.sinking .logo-scene{animation:swimBob 3s ease-in-out infinite}
/* lightning strike on the robot's head, then the antenna round becomes a WhatsApp chat button */
.wa-bolt{position:absolute;left:50%;bottom:97%;transform:translateX(-50%);width:20%;opacity:0;pointer-events:none;z-index:6}
.wa-bolt.hit{animation:boltHit .55s ease-out both}
@keyframes boltHit{
  0%{opacity:0;transform:translateX(-50%) translateY(-55%) scaleY(.3)}
  12%{opacity:1;transform:translateX(-50%) translateY(0) scaleY(1)}
  28%{opacity:.25}
  42%{opacity:1}
  100%{opacity:0;transform:translateX(-50%) translateY(0) scaleY(1)}
}
#flyLogo.zapped .logo-scene{animation:swimBob 3s ease-in-out infinite, zapFlash .55s ease-out}
@keyframes zapFlash{0%,60%,100%{filter:brightness(1)}14%{filter:brightness(2.4) saturate(.5)}30%{filter:brightness(1.1)}44%{filter:brightness(1.9) saturate(.6)}}
body.wa-on .astro .ant-tip{opacity:0;animation:none}
.wa-chat{
  position:absolute;left:50%;top:-21%;width:calc(40px / var(--k,1));aspect-ratio:1;
  transform:translate(-50%,-50%) scale(0);border-radius:50%;background:#25D366;
  transition:transform .35s ease;
  display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:7;
  box-shadow:0 0 0 calc(2.5px/var(--k,1)) #fff,0 calc(5px/var(--k,1)) calc(16px/var(--k,1)) rgba(0,20,10,.4);
}
.wa-chat svg{width:60%;height:60%}
body.wa-on .wa-chat{pointer-events:auto;cursor:pointer;animation:waPop .6s cubic-bezier(.2,.9,.3,1.5) both,waPulse 2.2s ease-in-out .8s infinite}
/* while aiming at the chat round the robot holds still, so the tap always lands */
#flyLogo:has(.wa-chat:hover) .logo-scene{animation-play-state:paused}
@keyframes waPop{0%{transform:translate(-50%,-50%) scale(0)}100%{transform:translate(-50%,-50%) scale(1)}}
@keyframes waPulse{0%,100%{box-shadow:0 0 0 calc(2.5px/var(--k,1)) #fff,0 0 0 0 rgba(37,211,102,.55)}50%{box-shadow:0 0 0 calc(2.5px/var(--k,1)) #fff,0 0 0 calc(12px/var(--k,1)) rgba(37,211,102,0)}}
@keyframes flailLeg{from{transform:rotate(-20deg)}to{transform:rotate(20deg)}}
@keyframes flailArm{from{transform:rotate(-30deg)}to{transform:rotate(16deg)}}
@keyframes flailWave{from{transform:rotate(-16deg)}to{transform:rotate(26deg)}}
@keyframes swimBob{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-16px) rotate(6deg)}}
@keyframes taTa{
  0%,40%,84%,100%{transform:rotate(0deg)}
  50%{transform:rotate(-11deg)}
  60%{transform:rotate(7deg)}
  70%{transform:rotate(-10deg)}
  78%{transform:rotate(4deg)}
}
@keyframes sceneReveal{
  0%{opacity:0;filter:blur(18px) brightness(1.4);transform:scale(1.5)}
  55%{opacity:1;filter:blur(2px) brightness(1.1);transform:scale(.97)}
  100%{opacity:1;filter:blur(0) brightness(1) drop-shadow(0 0 18px rgba(90,170,230,.35));transform:scale(1)}
}
@keyframes idleGlow{
  0%,100%{filter:brightness(1) drop-shadow(0 0 12px rgba(90,170,230,.3));transform:scale(1)}
  50%{filter:brightness(1.06) drop-shadow(0 0 26px rgba(90,170,230,.55));transform:scale(1.015)}
}
.logo-scene .circuit-layer{
  position:absolute;top:50%;left:50%;width:116%;z-index:5;
  transform:translate(-50%,-50%);
  filter:brightness(.82) saturate(1.7) drop-shadow(0 0 10px rgba(70,170,230,.35));
  pointer-events:none;opacity:0;animation:circuitsIn 1s ease-out 1s forwards;
}
@keyframes circuitsIn{to{opacity:1}}

/* ---------- NAV ---------- */
nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  padding:18px clamp(20px,6vw,80px);transition:.35s;
}
/* inner rail matches the 1440px content container (1440 - 2x80 padding),
   so the brand logo lines up with every section's left edge */
.nav-inner{max-width:1280px;margin:0 auto;width:100%;display:flex;align-items:center;justify-content:space-between}
nav.scrolled{background:rgba(255,255,255,.88);backdrop-filter:blur(16px);box-shadow:0 8px 30px -14px rgba(31,52,130,.25);padding:12px clamp(20px,6vw,80px)}
.brand{display:flex;align-items:center;gap:12px}
.brand img{height:40px;width:auto;display:block}
.logo-name{font-weight:800;font-size:1.35rem;letter-spacing:1px;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.nav-links{display:flex;align-items:center;gap:34px}
.nav-links a{font-family:'Be Vietnam Pro','Inter',sans-serif;font-size:.9rem;font-weight:600;color:var(--muted);transition:color .25s}
.nav-links a:hover{color:var(--blue)}
.btn{
  display:inline-block;padding:14px 30px;border-radius:100px;font-weight:600;font-size:.94rem;
  background:var(--grad);color:#fff;box-shadow:0 12px 30px -8px rgba(47,110,180,.55);
  transition:transform .25s,box-shadow .25s;
}
.btn:hover{transform:translateY(-3px);box-shadow:0 18px 40px -10px rgba(47,110,180,.65)}
.btn.ghost{background:#fff;color:var(--ink);border:1.5px solid var(--line);box-shadow:none}
.btn.ghost:hover{border-color:var(--teal)}
.nav-cta{padding:11px 24px}
.menu-btn{display:none;background:none;border:none;font-size:1.6rem;cursor:pointer;color:var(--ink)}

/* ---------- HERO (side banner) ---------- */
.hero{
  min-height:auto;
  display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(24px,4vw,56px);align-items:center;
  padding:78px clamp(20px,6vw,80px) 56px;max-width:1440px;margin:0 auto;
  position:relative;z-index:2;
}
.hero-copy{text-align:left}
.chip{
  display:inline-flex;align-items:center;gap:8px;padding:8px 18px;border-radius:100px;
  font-size:.82rem;font-weight:600;color:var(--blue);
  background:rgba(47,63,163,.07);border:1px solid rgba(47,63,163,.15);margin-bottom:22px;
}
.chip .dot{width:8px;height:8px;border-radius:50%;background:var(--teal);animation:pulse 1.8s infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(63,194,201,.5)}50%{box-shadow:0 0 0 7px rgba(63,194,201,0)}}
.hero h1{font-size:clamp(2.3rem,4.4vw,3.9rem);line-height:1.08;font-weight:800;letter-spacing:-1.5px;margin-bottom:22px}
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{font-size:1.07rem;color:var(--muted);line-height:1.75;max-width:520px;margin:0 0 34px}
.hero-actions{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:44px}
.stats{display:flex;gap:clamp(22px,3vw,52px);flex-wrap:wrap}
.stat b{font-family:'Be Vietnam Pro';font-size:1.9rem;font-weight:800;display:block;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat span{font-size:.85rem;color:var(--muted)}
.hero-stage{position:relative;width:100%}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
.float-card{
  position:absolute;z-index:6;background:rgba(255,255,255,.92);backdrop-filter:blur(12px);
  border:1px solid var(--line);border-radius:16px;padding:12px 18px;
  box-shadow:0 16px 40px -14px rgba(20,35,90,.22);
  font-size:.82rem;font-weight:600;display:flex;align-items:center;gap:10px;white-space:nowrap;
}
.float-card .ic{width:32px;height:32px;border-radius:10px;background:var(--grad);display:grid;place-items:center;color:#fff;font-size:.95rem}
.fc1{top:2%;left:-6%;animation:floaty 5s ease-in-out .6s infinite}
.fc2{top:46%;right:-7%;animation:floaty 5.6s ease-in-out 1.1s infinite}
.fc3{bottom:2%;left:0;animation:floaty 6.2s ease-in-out 1.7s infinite}

/* ---------- SECTIONS ---------- */
section{position:relative;z-index:2;padding:130px clamp(20px,6vw,80px) 110px;max-width:1440px;margin:0 auto}
.sec-head{max-width:680px;margin-bottom:64px;padding-top:10px}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.kicker{font-size:.8rem;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--teal);display:block;margin-bottom:14px}
.sec-head h2{font-size:clamp(1.9rem,3.4vw,2.9rem);font-weight:800;letter-spacing:-1px;line-height:1.16;margin-bottom:18px}
.sec-head p{color:var(--muted);line-height:1.75}

/* services */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:26px;position:relative}
/* robot parks in the empty LEFT PAGE MARGIN beside the service boxes —
   absolutely positioned, so the layout itself never moves */
.la-svc-margin{
  position:absolute;
  top:64px;
  left:calc((100% - 100vw)/2 + 8px);
  width:clamp(100px,calc((100vw - 100%)/2 - 12px),300px);
  aspect-ratio:1141/791;
  pointer-events:none;
}
@media(max-width:1280px){.la-svc-margin{display:none}}
.card{
  background:#fff;
  border:1px solid var(--line);border-radius:var(--radius);padding:38px 32px;
  transition:transform .35s,box-shadow .35s,border-color .35s;
}
.card:hover{transform:translateY(-8px);box-shadow:var(--shadow);border-color:rgba(63,194,201,.45)}
.card .ico{width:56px;height:56px;border-radius:16px;background:var(--grad);display:grid;place-items:center;font-size:1.5rem;margin-bottom:22px}
.card h3{font-size:1.2rem;font-weight:700;margin-bottom:12px}
.card p{color:var(--muted);font-size:.94rem;line-height:1.7}
/* logo splits into 6 icons — flies into each service card, lands at the right edge,
   full card height, exactly half visible */
.card{overflow:visible}
.card .card-logo{
  position:absolute;top:0;bottom:0;right:0;height:100%;
  aspect-ratio:946/722;   /* tight-cropped mark : legs land exactly on the box bottom */
  display:grid;place-items:center;
  pointer-events:none;z-index:4;
  opacity:0;
  transform:translate(var(--dx,0px),var(--dy,0px)) scale(var(--sc,3)) translateZ(0);
  clip-path:inset(-30% -30% -30% -30%);
  will-change:transform,clip-path,opacity;
  backface-visibility:hidden;
  transition:opacity .01s linear, transform .9s cubic-bezier(.22,.78,.2,1), clip-path .4s ease;
}
.card .card-logo img{
  display:block;width:100%;height:100%;object-fit:contain;opacity:1;
}
body.split-services .card-logo{
  opacity:1;
  transform:translate(50%,0) scale(1) translateZ(0);
  clip-path:inset(0 50% 0 0);   /* clean cut exactly at the card's right edge — half visible */
  transition:opacity .01s linear, transform .9s cubic-bezier(.22,.78,.2,1), clip-path .35s ease .75s;
}
body.split-services .card:nth-child(2) .card-logo{transition-delay:.04s,.04s,.79s}
body.split-services .card:nth-child(3) .card-logo{transition-delay:.08s,.08s,.83s}
body.split-services .card:nth-child(4) .card-logo{transition-delay:.12s,.12s,.87s}
body.split-services .card:nth-child(5) .card-logo{transition-delay:.16s,.16s,.91s}
body.split-services .card:nth-child(6) .card-logo{transition-delay:.2s,.2s,.95s}
/* card content always sits above the landed logo watermark */
.card .ico,.card h3,.card p{position:relative;z-index:5}
/* breathing room on the right so text never runs under the logo half */
#services .card{padding-right:clamp(72px,24%,120px)}
@media(max-width:760px){#services .card{padding-right:64px}}
/* after landing the mark settles into a soft watermark, not a loud sticker */
body.split-services .card-logo img{opacity:.38;transition:opacity .45s ease .8s}
body.split-services .card:hover .card-logo img{opacity:.75;transition-delay:0s}

/* work */
.work-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:30px}
.work-card{border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);background:#fff;transition:transform .35s,box-shadow .35s}
.work-card:hover{transform:translateY(-8px);box-shadow:var(--shadow)}
.work-card .thumb{overflow:hidden;aspect-ratio:16/11}
.work-card .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.work-card:hover .thumb img{transform:scale(1.06)}
.work-card .meta{padding:24px 26px;display:flex;justify-content:space-between;align-items:center;gap:12px}
.work-card .meta span{font-size:.78rem;color:var(--teal);font-weight:700;letter-spacing:1.5px;text-transform:uppercase}
.work-card .meta h3{font-size:1.1rem;font-weight:700;margin-top:6px}
.work-card .arrow{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;color:var(--blue);flex-shrink:0}

/* process */
.process{position:relative;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:26px}
.step{position:relative;overflow:visible;padding:34px 28px;border-radius:var(--radius);background:var(--soft);border:1px solid var(--line);transition:transform .3s,box-shadow .3s}
.step:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.step .num{font-family:'Be Vietnam Pro';font-size:2.2rem;font-weight:800;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:14px}
.step h3{font-size:1.08rem;font-weight:700;margin-bottom:10px}
.step p{font-size:.9rem;color:var(--muted);line-height:1.65}

/* logo splits into 4 icons */
.step-logo{
  position:absolute;top:16px;right:16px;width:56px;height:56px;
  display:grid;place-items:center;border-radius:15px;
  opacity:0;z-index:4;
  transform:translate(var(--dx,0px),var(--dy,0px)) scale(var(--sc,3));
  transition:opacity .01s linear, transform 1.6s cubic-bezier(.16,.84,.26,1);
}
.step-logo::before{
  content:"";position:absolute;inset:0;border-radius:15px;
  background:linear-gradient(140deg,rgba(47,63,163,.10),rgba(63,194,201,.16));
  border:1px solid rgba(47,63,163,.16);
  opacity:0;transition:opacity .55s ease;
}
body.split-mode .step-logo::before{opacity:1;transition-delay:1.25s}
.step-logo img{position:relative;width:40px;filter:drop-shadow(0 0 10px rgba(70,170,230,.5))}
.step-logo::after{content:"";position:absolute;inset:-6px;border-radius:19px;border:1px solid rgba(63,194,201,.45);opacity:0}
body.split-mode .step-logo{opacity:1;transform:translate(0,0) scale(1)}
body.split-mode .step-logo::after{animation:ringPop 2s ease-out forwards}
@keyframes ringPop{0%,55%{opacity:0;transform:scale(.6)}75%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(1.3)}}
body.split-mode .step:nth-child(2) .step-logo{transition-delay:.05s,.05s}
body.split-mode .step:nth-child(3) .step-logo{transition-delay:.18s,.18s}
body.split-mode .step:nth-child(4) .step-logo{transition-delay:.31s,.31s}
body.split-mode .step:nth-child(5) .step-logo{transition-delay:.44s,.44s}
body.split-mode .step-logo img{animation:idleGlow 3.4s ease-in-out 1.8s infinite}


/* ---------- PORTFOLIO FILTERS ---------- */
.filters{display:flex;flex-wrap:wrap;gap:10px;margin:-34px 0 40px}
.filter{
  padding:10px 20px;border-radius:100px;font-size:.86rem;font-weight:600;cursor:pointer;
  border:1px solid var(--line);background:rgba(255,255,255,.75);color:var(--muted);
  transition:.28s;
}
.filter:hover{border-color:var(--teal);color:var(--ink)}
.filter.active{background:var(--grad);color:#fff;border-color:transparent;box-shadow:0 10px 26px -10px rgba(47,110,180,.6)}
.work-card{opacity:1;transition:transform .4s,box-shadow .4s,opacity .35s}
.work-card.hide{display:none}
.tagrow{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.tag{font-size:.7rem;font-weight:700;letter-spacing:.6px;text-transform:uppercase;
  padding:5px 11px;border-radius:100px;background:rgba(47,63,163,.07);color:var(--blue)}

/* ---------- TESTIMONIALS (marquee) ---------- */
#testimonials{overflow:hidden}
.marquee{position:relative;width:100%;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee+.marquee{margin-top:24px}
.track{display:flex;gap:24px;width:max-content;animation:slide 46s linear infinite}
.track.rev{animation-direction:reverse;animation-duration:56s}
.marquee:hover .track{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}
.tcard{
  width:min(400px,80vw);flex-shrink:0;padding:30px 30px 26px;border-radius:var(--radius);
  background:rgba(255,255,255,.82);backdrop-filter:blur(10px);
  border:1px solid var(--line);box-shadow:0 14px 40px -24px rgba(31,52,130,.4);
}
.stars{color:#f4b942;font-size:.9rem;letter-spacing:2px;margin-bottom:14px}
.tcard p{color:var(--muted);line-height:1.75;font-size:.95rem;margin-bottom:22px}
.who{display:flex;align-items:center;gap:13px}
.av{width:44px;height:44px;border-radius:50%;background:var(--grad);color:#fff;display:grid;place-items:center;font-weight:700;font-size:.95rem;flex-shrink:0}
.who b{display:block;font-size:.93rem}
.who span{font-size:.8rem;color:var(--muted)}

/* ---------- BLOG ---------- */
.blog-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:28px}
.post{
  position:relative;border-radius:var(--radius);overflow:hidden;background:#fff;
  border:1px solid var(--line);display:flex;flex-direction:column;
  transition:transform .38s,box-shadow .38s;
}
.post:hover{transform:translateY(-8px);box-shadow:var(--shadow)}
.post .pic{overflow:hidden;aspect-ratio:16/9;background:var(--soft)}
.post .pic img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.post:hover .pic img{transform:scale(1.06)}
.post .body{padding:26px 28px 30px;display:flex;flex-direction:column;gap:12px;flex:1}
.pmeta{display:flex;gap:12px;align-items:center;font-size:.76rem;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:var(--teal)}
.pmeta i{font-style:normal;color:var(--muted);font-weight:500;letter-spacing:0;text-transform:none}
.post h3{font-size:1.18rem;font-weight:700;line-height:1.35}
.post p{font-size:.92rem;color:var(--muted);line-height:1.7}
.readmore{margin-top:auto;font-weight:700;font-size:.86rem;color:var(--blue);display:inline-flex;gap:8px;align-items:center}
.post:hover .readmore{gap:14px}
.readmore span{transition:.3s}
.side-posts{display:grid;gap:28px}
.post.row{flex-direction:row}
.post.row .pic{width:42%;aspect-ratio:auto;flex-shrink:0}
.post.row .body{padding:22px 24px}
.post.row h3{font-size:1.02rem}

@media(max-width:900px){
  .blog-grid{grid-template-columns:1fr}
  .post.row{flex-direction:column}
  .post.row .pic{width:100%;aspect-ratio:16/9}
  .filters{margin-top:-20px}
}

/* about */
.about-wrap{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.about-txt h2{font-size:clamp(1.8rem,3vw,2.6rem);font-weight:800;letter-spacing:-.8px;line-height:1.18;margin-bottom:20px}
.about-txt p{color:var(--muted);line-height:1.8;margin-bottom:18px}
.ticks{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:26px}
.tick{display:flex;align-items:center;gap:10px;font-weight:600;font-size:.92rem}
.tick .t{width:24px;height:24px;border-radius:50%;background:var(--grad);color:#fff;display:grid;place-items:center;font-size:.7rem;flex-shrink:0}

/* cta */
.cta-band{border-radius:32px;padding:clamp(48px,6vw,84px);text-align:center;background:var(--grad);color:#fff;position:relative;overflow:hidden}
.cta-band::before{content:"";position:absolute;width:600px;height:600px;border-radius:50%;background:rgba(255,255,255,.12);top:-320px;right:-180px;filter:blur(10px)}
.cta-band h2{font-size:clamp(1.9rem,3.6vw,3rem);font-weight:800;letter-spacing:-1px;margin-bottom:16px;position:relative}
.cta-band p{opacity:.92;max-width:560px;margin:0 auto 36px;line-height:1.7;position:relative}
.cta-band .btn{background:#fff;color:var(--blue);box-shadow:0 16px 40px -10px rgba(0,20,60,.4);position:relative}

/* footer */
footer{position:relative;z-index:2;border-top:1px solid var(--line);padding:64px clamp(20px,6vw,80px) 36px;background:rgba(250,251,254,.85)}
.foot-grid{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:44px;margin-bottom:48px}
.foot-grid h4{font-size:.95rem;font-weight:700;margin-bottom:18px}
.foot-grid a,.foot-grid p{display:block;color:var(--muted);font-size:.9rem;margin-bottom:12px;line-height:1.6;transition:color .25s}
.foot-grid a:hover{color:var(--blue)}
.copy{max-width:1440px;margin:0 auto;padding-top:26px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;color:var(--muted);font-size:.85rem}

/* reveal */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s cubic-bezier(.2,.8,.25,1),transform .8s cubic-bezier(.2,.8,.25,1)}
.reveal.in{opacity:1;transform:none}
.d1{transition-delay:.1s}.d2{transition-delay:.2s}.d3{transition-delay:.3s}.d4{transition-delay:.4s}

@media(max-width:1000px){
  .hero{grid-template-columns:1fr;padding-top:80px;gap:34px}
  .hero p{max-width:none}
  .about-wrap{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
  .nav-links{
    position:fixed;top:70px;right:16px;left:16px;
    background:rgba(255,255,255,.97);border:1px solid var(--line);border-radius:20px;
    flex-direction:column;padding:26px;gap:20px;box-shadow:var(--shadow);
    transform:translateY(-16px);opacity:0;pointer-events:none;transition:.3s;
  }
  .nav-links.open{transform:none;opacity:1;pointer-events:auto}
  .menu-btn{display:block}
  .float-card{display:none}
  #bgCircuit .pattern{opacity:.26}#bgCircuit .signals{opacity:.45}
  .ticks{grid-template-columns:1fr}
}

/* ================= ALIGNMENT + RESPONSIVE FIXES ================= */
.nav-links{gap:26px}
.nav-links a{white-space:nowrap}

/* portfolio */
.filters{margin:0 0 40px}
#work .sec-head{margin-bottom:34px}
.work-grid{grid-template-columns:repeat(auto-fill,minmax(330px,1fr));align-items:stretch}
.work-card{display:flex;flex-direction:column}
.work-card .meta{align-items:flex-start;flex:1}
.work-card .meta h3{margin:6px 0 0}
.work-card .arrow{margin-top:2px}
.tagrow{margin-top:14px}
.tag{font-style:normal}

/* testimonials : full-bleed rows, tidy heading */
#testimonials{padding-left:0;padding-right:0;max-width:100%}
#testimonials .sec-head{padding:0 clamp(20px,6vw,80px);max-width:720px;margin:0 auto 46px}
.tcard{display:flex;flex-direction:column}
.tcard p{flex:1}

/* blog */
.blog-grid{align-items:start}
.side-posts{align-content:start}
.post.row .body{justify-content:center;gap:10px}
.post .body{min-width:0}
.post h3{overflow-wrap:anywhere}

/* hero balance */
.hero-stage{display:flex;align-items:center;justify-content:center}

@media(max-width:1180px){
  .nav-links{gap:18px}
  .nav-links a{font-size:.88rem}
  .hero h1{font-size:clamp(2.1rem,4vw,3.2rem)}
}
@media(max-width:1000px){
  .hero-stage{order:-1}
  .la-hero{width:78%;max-width:460px}
  .blog-grid{grid-template-columns:1fr}
  .about-wrap{gap:36px}
  .la-about{width:70%;margin:0 auto}
}
@media(max-width:760px){
  section{padding:84px clamp(18px,5vw,40px) 72px}
  .sec-head{margin-bottom:34px}
  .work-grid{grid-template-columns:1fr;gap:22px}
  .cards{grid-template-columns:1fr;gap:18px}
  .process{grid-template-columns:1fr 1fr;gap:16px}
  .step{padding:26px 20px}
  .step-logo{width:44px;height:44px;top:12px;right:12px}
  .step-logo img{width:30px}
  .tcard{width:min(320px,86vw);padding:24px}
  .filters{gap:8px}
  .filter{padding:9px 16px;font-size:.8rem}
  .stats{gap:22px}
  .stat b{font-size:1.6rem}
  .foot-grid{grid-template-columns:1fr 1fr;gap:28px}
  .la-mini{width:66px;margin-bottom:24px}
  .la-hero{width:88%}
  .la-about{width:80%}
}
@media(max-width:520px){
  .process{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .copy{flex-direction:column;gap:8px}
  .hero{padding-top:72px}
  .hero h1{font-size:2rem;letter-spacing:-.8px}
  .cta-band{padding:40px 24px;border-radius:24px}
  .ticks{grid-template-columns:1fr}
  .post.row .body{padding:18px 20px}
}


/* ---------- HERO BALANCE FIX ---------- */
.hero{padding:78px clamp(20px,6vw,80px) 56px}
.hero-copy{padding-top:6px}
.hero-actions{margin-bottom:34px}
.la-hero{width:100%;max-width:470px;margin:0 auto}
.hero-stage{align-self:center}
.nav-cta{padding:11px 22px;line-height:1}
@media(min-width:1001px){
  .hero{grid-template-columns:1.08fr .92fr}
}
@media(max-width:1000px){
  .hero{padding-top:74px;gap:34px;text-align:left}
  .la-hero{max-width:380px}
}
@media(max-width:760px){
  .hero{padding-top:70px;padding-bottom:48px}
  .la-hero{max-width:300px}
}


/* ---------- TIGHTEN NAV -> BANNER GAP ---------- */
nav{padding:14px clamp(20px,6vw,80px)}
.hero{padding-top:104px;padding-bottom:64px}
.hero-copy{padding-top:0}
.chip{margin-bottom:18px}
.hero h1{margin-bottom:18px}
.hero p{margin-bottom:28px}
@media(max-width:1000px){.hero{padding-top:82px}}
@media(max-width:760px){.hero{padding-top:74px}}


/* no sideways scroll on any device */
html{overflow-x:hidden;max-width:100%}
body{overflow-x:clip}
#bgCircuit,#bgCircuit img{max-width:100vw}
.marquee{overflow:hidden}
@media(max-width:1000px){.la-hero{max-width:340px}}
@media(max-width:760px){.la-hero{max-width:270px}}

/* nav CTA pill fit */
.btn{white-space:nowrap}
.nav-cta{padding:12px 26px;font-size:.9rem;display:inline-flex;align-items:center;justify-content:center;height:auto}
.nav-links{align-items:center}

/* mobile hero : keep the logo clear of the badge */
@media(max-width:1000px){
  .hero{gap:20px}
  .hero-stage{margin:0 0 6px}
  .la-hero{max-width:300px}
}
@media(max-width:760px){
  .la-hero{max-width:230px}
  .hero{gap:14px;padding-top:78px}
}

/* keep the mark inside its box on every size */
.logo-scene .logo-img{width:auto;height:auto;max-width:92%;max-height:96%;object-fit:contain}
.logo-scene .circuit-layer{width:auto;height:auto;max-width:116%;max-height:116%}

/* nav CTA text colour (was inheriting the muted link colour) */
.nav-links a.btn,.nav-links a.nav-cta{color:#fff}
.nav-links a.btn:hover{color:#fff}

/* ================= 3D CARD SYSTEM ================= */
.cards,.work-grid,.process,.blog-grid,.side-posts,.track{perspective:1400px}

.card,.work-card,.step,.tcard,.post{
  position:relative;
  transform-style:preserve-3d;
  will-change:transform;
  transition:transform .5s cubic-bezier(.2,.8,.25,1), box-shadow .5s cubic-bezier(.2,.8,.25,1);
  background:linear-gradient(160deg,rgba(255,255,255,.96),rgba(246,249,254,.92));
  border:1px solid rgba(255,255,255,.9);
  box-shadow:
     0 1px 0 rgba(255,255,255,.9) inset,
     0 -1px 0 rgba(47,63,163,.05) inset,
     0 10px 20px -12px rgba(31,52,130,.22),
     0 28px 50px -30px rgba(31,52,130,.32);
}
/* gradient rim that lights up with the tilt */
.card::after,.work-card::after,.step::after,.tcard::after,.post::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  padding:1px;
  background:linear-gradient(140deg,rgba(47,63,163,.45),rgba(63,194,201,.35) 45%,rgba(255,255,255,0) 70%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;transition:opacity .45s;
}
/* moving specular highlight */
.card::before,.work-card::before,.step::before,.tcard::before,.post::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(255,255,255,.85),rgba(255,255,255,0) 45%);
  opacity:0;transition:opacity .45s;z-index:1;
}
.card:hover::after,.work-card:hover::after,.step:hover::after,.tcard:hover::after,.post:hover::after{opacity:1}
.card:hover::before,.work-card:hover::before,.step:hover::before,.tcard:hover::before,.post:hover::before{opacity:.9}

.card:hover,.work-card:hover,.step:hover,.tcard:hover,.post:hover{
  box-shadow:
     0 1px 0 rgba(255,255,255,.95) inset,
     0 18px 30px -18px rgba(31,52,130,.3),
     0 48px 80px -40px rgba(31,52,130,.45),
     0 0 0 1px rgba(63,194,201,.16);
}

/* inner layers float above the surface */
.card>*,.step>*:not(.step-logo),.tcard>*,.post .body>*{position:relative;transform:translateZ(26px)}
.card .ico{transform:translateZ(60px);box-shadow:0 14px 26px -12px rgba(47,110,180,.75)}
.step .num{transform:translateZ(52px)}
.step-logo{transform-style:preserve-3d}
.work-card .thumb{transform:translateZ(0);border-radius:inherit;border-bottom-left-radius:0;border-bottom-right-radius:0}
.work-card .meta{transform:translateZ(30px)}
.post .pic{transform:translateZ(0)}
.tcard .who{transform:translateZ(44px)}
.tcard .stars{transform:translateZ(40px)}

/* keep the old flat hovers from fighting the 3D one */
.card:hover,.work-card:hover,.step:hover,.post:hover{transform:none}

/* 3D "floor" reflection under the grids */
.cards,.work-grid,.process{position:relative}


/* SVG service icons + tidy 3-up grid */
.card .ico svg{width:26px;height:26px}
@media(min-width:1101px){.cards{grid-template-columns:repeat(3,1fr)}}
@media(min-width:761px) and (max-width:1100px){.cards{grid-template-columns:repeat(2,1fr)}}
.card{padding:36px 30px}
.card h3{margin-bottom:10px}

/* ---------- HERO COPY BLOCK ---------- */
.hero-points{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:10px 22px;margin:0 0 30px;max-width:520px}
.hero-points li{display:flex;align-items:center;gap:9px;font-size:.93rem;font-weight:500;color:var(--ink)}
.hero-points .tk{
  width:20px;height:20px;border-radius:50%;flex-shrink:0;
  background:var(--grad);color:#fff;display:grid;place-items:center;font-size:.62rem;font-weight:700;
}
.stack{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:34px}
.stack-label{font-size:.74rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--muted)}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chips i{
  font-style:normal;font-size:.78rem;font-weight:600;color:var(--blue);
  padding:6px 13px;border-radius:100px;background:rgba(47,63,163,.06);
  border:1px solid rgba(47,63,163,.12);
}
@media(max-width:760px){
  .hero-points{grid-template-columns:1fr;gap:8px;margin-bottom:24px}
  .stack{margin-bottom:26px;gap:10px}
  .stack-label{display:none}
  .chips i{font-size:.72rem;padding:5px 11px}
}

.hero h1{font-size:clamp(2.1rem,3.6vw,3.35rem);max-width:15ch}
.hero-points{grid-template-columns:repeat(2,minmax(0,auto));gap:11px 26px}
@media(max-width:760px){
  .hero-points{grid-template-columns:1fr;gap:8px;margin-bottom:24px}
  .stack{margin-bottom:26px;gap:10px}
  .stack-label{display:none}
  .chips i{font-size:.72rem;padding:5px 11px}
}

.hero h1{font-size:clamp(2.1rem,3.6vw,3.35rem);max-width:15ch}
.hero-points{grid-template-columns:repeat(2,minmax(0,auto));gap:11px 26px}
.hero-points li{white-space:nowrap}
@media(max-width:1200px){.hero-points li{white-space:normal}}

@media(max-width:620px){
  .hero-points{grid-template-columns:1fr;gap:9px}
  .hero-points li{white-space:normal}
}

/* process icon sits in the card corner, floating above the surface */
.step-logo{position:absolute!important;top:16px;right:16px;left:auto}
body.split-mode .step-logo{transform:translate(0,0) scale(1) translateZ(58px)}
.step .num{margin-top:4px}
@media(max-width:760px){.step-logo{top:12px;right:12px;width:44px;height:44px}.step-logo img{width:30px}}

/* headings breathe a little wider */
.sec-head{max-width:760px}
#process .sec-head h2{max-width:22ch}

/* banner : a little more breathing room + bigger mark */
.hero{padding-top:122px;padding-bottom:80px}
.la-hero{max-width:560px;width:106%}
@media(max-width:1200px){.la-hero{max-width:490px;width:100%}}
@media(max-width:1000px){.hero{padding-top:104px}.la-hero{max-width:400px}}
@media(max-width:760px){.hero{padding-top:92px;padding-bottom:56px}.la-hero{max-width:280px}}

/* ================= FOOTER ================= */
#site-footer{
  position:relative;z-index:2;overflow:hidden;color:#dfe6f5;
  padding:clamp(56px,7vw,92px) clamp(20px,6vw,80px) 30px;
  background:linear-gradient(160deg,#111a44 0%,#16235c 45%,#0d1330 100%);
  border-top:none;margin-top:40px;
}
#site-footer .f-bg{
  position:absolute;inset:0;pointer-events:none;opacity:.20;
  background:url('../circuit-board.svg') center/cover no-repeat;
  filter:brightness(2.4) saturate(1.4);
  -webkit-mask-image:linear-gradient(180deg,#000,rgba(0,0,0,.25));
  mask-image:linear-gradient(180deg,#000,rgba(0,0,0,.25));
}
#site-footer .f-glow{position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none}
#site-footer .g1{width:520px;height:520px;background:rgba(63,194,201,.24);top:-220px;right:-120px}
#site-footer .g2{width:460px;height:460px;background:rgba(47,63,163,.42);bottom:-260px;left:-140px}
.f-inner{position:relative;max-width:1280px;margin:0 auto}

.f-top{display:grid;grid-template-columns:1.6fr .9fr .9fr 1.1fr;gap:clamp(28px,4vw,64px)}
#site-footer .brand img{height:44px;width:auto}
#site-footer .logo-name{background:linear-gradient(120deg,#8fb6ff,#7ef0f4);-webkit-background-clip:text;background-clip:text;color:transparent}
.f-brand p{color:rgba(223,230,245,.66);line-height:1.8;font-size:.93rem;margin:18px 0 26px;max-width:380px}

.subscribe label{display:block;font-size:.76rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:rgba(223,230,245,.55);margin-bottom:12px}
.sub-row{display:flex;gap:8px;max-width:390px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);
  border-radius:100px;padding:6px 6px 6px 20px;backdrop-filter:blur(8px);transition:.3s}
.sub-row:focus-within{border-color:rgba(126,240,244,.55);box-shadow:0 0 0 4px rgba(63,194,201,.12)}
.sub-row input{flex:1;background:none;border:none;outline:none;color:#fff;font:inherit;font-size:.92rem;min-width:0}
.sub-row input::placeholder{color:rgba(223,230,245,.4)}
.sub-row button{
  width:42px;height:42px;border:none;border-radius:50%;cursor:pointer;flex-shrink:0;
  background:linear-gradient(120deg,#2f7fc4,#3fc2c9);color:#fff;display:grid;place-items:center;
  transition:transform .25s,box-shadow .25s}
.sub-row button svg{width:19px;height:19px}
.sub-row button:hover{transform:translateX(2px) scale(1.06);box-shadow:0 10px 24px -8px rgba(63,194,201,.8)}

.socials{display:flex;gap:10px;margin-top:28px}
.socials a{
  width:42px;height:42px;border-radius:14px;display:grid;place-items:center;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
  color:rgba(223,230,245,.8);transition:.3s}
.socials a svg{width:19px;height:19px}
.socials a:hover{color:#fff;transform:translateY(-4px);
  background:linear-gradient(140deg,rgba(47,127,196,.9),rgba(63,194,201,.85));
  border-color:transparent;box-shadow:0 14px 26px -12px rgba(63,194,201,.85)}

.f-col h4{font-size:.8rem;font-weight:700;letter-spacing:2.4px;text-transform:uppercase;color:#fff;margin-bottom:22px}
.f-col a{display:block;color:rgba(223,230,245,.6);font-size:.92rem;margin-bottom:13px;width:fit-content;
  transition:color .25s,transform .25s}
.f-col a:hover{color:#7ef0f4;transform:translateX(5px)}

.f-contact .ct{display:flex;align-items:flex-start;gap:11px;margin-bottom:16px;line-height:1.6}
.f-contact .ct.static{color:rgba(223,230,245,.6);font-size:.92rem}
.f-contact .ci{
  width:32px;height:32px;border-radius:10px;flex-shrink:0;display:grid;place-items:center;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);color:#7ef0f4}
.f-contact .ci svg{width:16px;height:16px}
.f-contact .ct:hover .ci{background:linear-gradient(140deg,#2f7fc4,#3fc2c9);color:#fff;border-color:transparent}
.f-badge{display:inline-flex;align-items:center;gap:9px;margin-top:8px;
  padding:9px 16px;border-radius:100px;font-size:.82rem;font-weight:600;color:#c9f7f9;
  background:rgba(63,194,201,.12);border:1px solid rgba(63,194,201,.3)}
.f-badge .pulse{width:8px;height:8px;border-radius:50%;background:#3fc2c9;animation:pulse 1.8s infinite}

.f-word{
  font-family:'Be Vietnam Pro';font-weight:800;text-align:center;line-height:1;
  font-size:clamp(3rem,13vw,11rem);letter-spacing:.02em;margin:clamp(28px,4vw,52px) 0 -.12em;
  background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,0) 78%);
  -webkit-background-clip:text;background-clip:text;color:transparent;user-select:none;pointer-events:none;
}

.f-bottom{
  display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  padding-top:24px;margin-top:20px;border-top:1px solid rgba(255,255,255,.1);
  font-size:.85rem;color:rgba(223,230,245,.5)}
.f-legal{display:flex;gap:22px;flex-wrap:wrap}
.f-legal a{color:rgba(223,230,245,.55);transition:color .25s}
.f-legal a:hover{color:#7ef0f4}
.f-bottom .made{color:rgba(223,230,245,.4)}

@media(max-width:1100px){
  .f-top{grid-template-columns:1fr 1fr;gap:40px}
  .f-brand{grid-column:1 / -1}
}
@media(max-width:620px){
  .f-top{grid-template-columns:1fr}
  .f-bottom{flex-direction:column;align-items:flex-start;gap:12px}
  .f-word{font-size:3.4rem}
  .socials{margin-top:22px}
}


/* ---- footer : live circuit signals, same engine as the page background ---- */
#site-footer .f-bg{opacity:.26;filter:brightness(2.9) saturate(1.5)}
#site-footer .f-live{
  position:absolute;inset:-3%;width:106%;height:106%;
  pointer-events:none;object-fit:cover;
  opacity:.85;
  filter:brightness(2.2) saturate(1.7) drop-shadow(0 0 7px rgba(63,194,201,.85));
  -webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.55) 62%,rgba(0,0,0,.18) 100%);
  mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.55) 62%,rgba(0,0,0,.18) 100%);
}
/* second copy, flipped + offset : twice the traffic, never a visible loop */
#site-footer .f-live2{
  transform:scaleX(-1) scaleY(-1);
  opacity:.45;
  filter:brightness(1.9) saturate(1.4) drop-shadow(0 0 9px rgba(143,182,255,.7));
}
/* the whole trace field gently pulses, like current load rising and falling */
#site-footer .f-breathe{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(circle at 20% 25%,rgba(63,194,201,.20),transparent 45%),
    radial-gradient(circle at 82% 60%,rgba(120,160,255,.18),transparent 48%);
  animation:bgBreathe 9s ease-in-out infinite;
}
/* content must sit above the live layers */
#site-footer .f-inner{position:relative;z-index:3}
@media(prefers-reduced-motion:reduce){#site-footer .f-live2{display:none}}

/* keep the live circuits vivid but let the text breathe */
#site-footer .f-bg{opacity:.16}
#site-footer .f-live{opacity:.52;filter:brightness(2.1) saturate(1.7) drop-shadow(0 0 8px rgba(63,194,201,.8))}
#site-footer .f-live2{opacity:.26}
#site-footer::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  background:
    radial-gradient(ellipse 60% 55% at 22% 45%,rgba(11,18,48,.80),transparent 70%),
    radial-gradient(ellipse 55% 45% at 78% 45%,rgba(11,18,48,.62),transparent 72%),
    linear-gradient(180deg,rgba(11,18,48,.35),rgba(11,18,48,.10) 45%,rgba(11,18,48,.55));
}
#site-footer .f-word{opacity:.55}

/* banner spacing : desktop & laptop */
@media(min-width:1001px){
  .hero{padding-top:140px;padding-bottom:80px}
}

/* ============ SCROLL REVEAL v2 : 3D spring rise + blur focus + wipe ============ */
.rv{
  opacity:0;
  will-change:transform,opacity,filter,clip-path;
}
.rv-in{
  animation:rvPop 1.05s cubic-bezier(.16,1,.3,1) both;
  animation-delay:calc(var(--i,0) * 95ms);
}
@keyframes rvPop{
  0%{
    opacity:0;
    transform:perspective(1100px) translate3d(0,78px,-140px) rotateX(24deg) scale(.9);
    filter:blur(16px) saturate(.5);
    clip-path:inset(0 0 100% 0 round 22px);
  }
  45%{
    opacity:1;
    filter:blur(3px) saturate(.9);
    clip-path:inset(0 0 0% 0 round 22px);
  }
  72%{
    transform:perspective(1100px) translate3d(0,-9px,0) rotateX(-2.5deg) scale(1.012);
  }
  100%{
    opacity:1;
    transform:perspective(1100px) translate3d(0,0,0) rotateX(0) scale(1);
    filter:blur(0) saturate(1);
    clip-path:inset(0 0 0% 0 round 22px);
  }
}
.rv-done{opacity:1;clip-path:none}

/* light sweeps across the card as it lands */
.rv-in::after{animation:rvSweep 1.05s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--i,0) * 95ms + 120ms)}
@keyframes rvSweep{
  0%{opacity:0;background:linear-gradient(115deg,rgba(255,255,255,0) 30%,rgba(126,240,244,.85) 46%,rgba(47,63,163,.5) 52%,rgba(255,255,255,0) 68%);background-position:-160% 0;background-size:250% 100%}
  35%{opacity:1}
  100%{opacity:0;background-position:160% 0;background-size:250% 100%}
}

@media(prefers-reduced-motion:reduce){
  .rv,.rv-in{animation:none!important;opacity:1!important;clip-path:none!important;filter:none!important;transform:none!important}
}


/* clean logo : no circuit overlay */
.logo-scene .circuit-layer{display:none!important}

/* bigger brand mark : hero + about */
.la-hero{max-width:660px;width:114%}
.la-about{width:118%;margin-left:-9%}
@media(max-width:1200px){.la-hero{max-width:540px;width:104%}.la-about{width:106%;margin-left:-4%}}
@media(max-width:1000px){.la-hero{max-width:420px;width:100%}.la-about{width:96%;margin-left:0}}
@media(max-width:760px){.la-hero{max-width:290px}.la-about{width:100%;margin-left:0}}

/* give the hero mark more room, keep the about mark fully in frame */
@media(min-width:1001px){
  .hero{grid-template-columns:1fr 1.08fr}
  .la-hero{width:112%;max-width:720px}
  .la-about{width:114%;margin-left:-6%}
}

/* ---------- BACKGROUND : neutral grey circuits, stronger but never noisy ---------- */
#bgCircuit .pattern{
  opacity:.62;
  filter:grayscale(1) brightness(.72) contrast(1.15);
}
#bgCircuit .signals{
  opacity:.58;
  filter:grayscale(1) brightness(.55) contrast(1.2) drop-shadow(0 0 4px rgba(120,125,140,.35));
}
/* no blue wash */
#bgCircuit .tint{
  background:linear-gradient(135deg,rgba(120,125,140,.05),rgba(140,145,158,.04));
}
#bgCircuit .glow{
  background:
    radial-gradient(circle at 22% 28%,rgba(150,155,168,.13),transparent 42%),
    radial-gradient(circle at 78% 68%,rgba(130,135,150,.11),transparent 45%);
}
/* white veil sits UNDER the content so text stays crisp over the traces */
#bgCircuit::after{
  background:radial-gradient(ellipse at 50% 45%,rgba(255,255,255,.42) 0%,rgba(255,255,255,.66) 55%,rgba(255,255,255,.88) 100%);
}
/* (white halo behind text removed — the circuits are soft enough on their own) */

/* banner spacing (final) */
@media(min-width:1001px){.hero{padding-top:170px;padding-bottom:80px}}

/* background circuits : softer, just a hint behind the content */
#bgCircuit{display:none!important}
#bgCircuit .pattern{opacity:.30;filter:grayscale(1) brightness(.85) contrast(1.02)}
#bgCircuit .signals{opacity:.26;filter:grayscale(1) brightness(.75) contrast(1.05) drop-shadow(0 0 3px rgba(140,145,158,.25))}
#bgCircuit .glow{
  background:
    radial-gradient(circle at 22% 28%,rgba(160,165,178,.07),transparent 42%),
    radial-gradient(circle at 78% 68%,rgba(150,155,168,.06),transparent 45%);
}
#bgCircuit::after{
  background:radial-gradient(ellipse at 50% 45%,rgba(255,255,255,.50) 0%,rgba(255,255,255,.72) 55%,rgba(255,255,255,.92) 100%);
}

/* ---- ROBOT EVERYWHERE : the travelling mark is always the robot mascot.
       The logo itself now appears ONLY inside the split boxes
       (.step-logo copies in "How We Work" and .card-logo copies in "What We Do") ---- */
.logo-scene .logo-img{opacity:0!important}
.logo-scene .astro{opacity:1!important}


/* ===== Robot-free premium visual revision ===== */
.hero-premium-art{width:112%;max-width:720px;margin:0 auto;display:flex;align-items:center;justify-content:center}
.hero-premium-art img,.about-premium-art img{display:block;width:100%;height:auto;object-fit:contain}
.about-premium-art{width:106%;max-width:590px;margin-left:-3%;display:flex;align-items:center;justify-content:center}
/* Service logos are now complete, subtle static marks — never split or half clipped. */
.card .card-logo,body.split-services .card-logo{
  top:20px!important;right:20px!important;bottom:auto!important;width:46px!important;height:46px!important;aspect-ratio:1!important;
  opacity:.16!important;transform:none!important;clip-path:none!important;transition:none!important;display:grid!important;
}
.card .card-logo img,body.split-services .card-logo img{width:100%!important;height:100%!important;object-fit:contain!important;opacity:1!important}
#services .card{padding-right:82px}
/* Process logos stay complete and static; card and page animations remain active. */
.step-logo,body.split-mode .step-logo{opacity:1!important;transform:none!important;transition:none!important}
.step-logo::before{opacity:1!important}
.step-logo::after{display:none!important}
.step-logo img,body.split-mode .step-logo img{animation:none!important}
@media(max-width:1000px){.hero-premium-art{width:100%;max-width:560px}.about-premium-art{width:100%;max-width:520px;margin:0 auto}}
@media(max-width:760px){.hero-premium-art{max-width:340px}.about-premium-art{max-width:360px}.card .card-logo,body.split-services .card-logo{width:40px!important;height:40px!important;top:16px!important;right:16px!important}#services .card{padding-right:68px}}


/* ===== Editorial studio hero & about visuals ===== */
.hero-stage{min-height:620px}
.hero-premium-art{position:relative!important;width:min(100%,610px)!important;max-width:610px!important;height:610px;margin:0 auto!important;display:grid!important;place-items:center;isolation:isolate}
.hero-image-ring{position:relative;width:82%;aspect-ratio:1;border-radius:50%;overflow:hidden;z-index:3;box-shadow:0 32px 80px rgba(22,38,105,.24),0 0 0 14px #fff,0 0 0 16px rgba(47,63,163,.12)}
.hero-image-ring img{width:100%;height:100%;display:block;object-fit:cover}
.hero-image-ring::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.42);pointer-events:none}
.hero-orbit{position:absolute;border-radius:50%;z-index:1;pointer-events:none}
.orbit-one{width:94%;height:94%;border:1px solid rgba(47,63,163,.18);border-left-color:#3fc2c9;transform:rotate(-18deg)}
.orbit-two{width:72%;height:72%;border:1px dashed rgba(63,194,201,.35);transform:rotate(24deg)}
.hero-dot{position:absolute;border-radius:50%;z-index:4;box-shadow:0 12px 30px rgba(36,53,139,.22)}
.dot-one{width:72px;height:72px;right:1%;top:13%;background:linear-gradient(135deg,#3fc2c9,#398bd0)}
.dot-two{width:42px;height:42px;left:3%;bottom:18%;background:linear-gradient(135deg,#ff7d91,#f3a1af)}
.dot-three{width:24px;height:24px;right:11%;bottom:8%;background:#2f3fa3}
.hero-label{position:absolute;z-index:5;padding:12px 18px;border:1px solid rgba(47,63,163,.12);border-radius:14px;background:rgba(255,255,255,.92);box-shadow:0 16px 38px rgba(24,42,112,.14);backdrop-filter:blur(10px);font-size:.73rem;font-weight:800;letter-spacing:1.4px;color:var(--ink)}
.label-ui{left:-1%;top:24%}.label-code{right:-1%;bottom:24%;color:var(--teal)}
.about-wrap{align-items:center;min-height:650px}
.about-premium-art{position:relative!important;width:min(100%,560px)!important;max-width:560px!important;height:570px;margin:0 auto!important;padding:28px 28px 58px;isolation:isolate}
.about-image-frame{position:relative;width:100%;height:100%;border-radius:30px 120px 30px 30px;overflow:hidden;z-index:2;box-shadow:0 34px 75px rgba(22,38,105,.24)}
.about-image-frame img{width:100%;height:100%;display:block;object-fit:cover}
.about-grid{position:absolute;left:-12px;top:3px;width:145px;height:145px;z-index:0;background-image:radial-gradient(rgba(47,63,163,.32) 1.7px,transparent 1.7px);background-size:14px 14px}
.about-accent{position:absolute;right:-15px;bottom:28px;width:170px;height:170px;border-radius:50%;z-index:0;background:linear-gradient(135deg,rgba(63,194,201,.24),rgba(47,63,163,.18))}
.about-note{position:absolute;left:0;bottom:16px;z-index:4;min-width:235px;padding:16px 20px;border-radius:16px;background:#fff;box-shadow:0 18px 45px rgba(20,37,102,.18);border-left:4px solid var(--teal);display:flex;flex-direction:column;gap:3px}
.about-note b{font-family:'Be Vietnam Pro';font-size:.95rem}.about-note span{font-size:.75rem;color:var(--muted);letter-spacing:.6px}
@media(max-width:1200px){.hero-stage{min-height:540px}.hero-premium-art{width:520px!important;height:520px}.about-wrap{min-height:580px}.about-premium-art{height:520px}}
@media(max-width:1000px){.hero-stage{min-height:470px}.hero-premium-art{width:440px!important;height:440px}.about-premium-art{width:min(92%,520px)!important;height:520px}.about-wrap{min-height:auto}.label-ui{left:0}.label-code{right:0}}
@media(max-width:760px){.hero-stage{min-height:350px}.hero-premium-art{width:330px!important;height:330px}.hero-image-ring{width:78%;box-shadow:0 20px 48px rgba(22,38,105,.22),0 0 0 8px #fff,0 0 0 10px rgba(47,63,163,.12)}.dot-one{width:46px;height:46px}.dot-two{width:28px;height:28px}.dot-three{width:17px;height:17px}.hero-label{font-size:.59rem;padding:8px 10px}.about-premium-art{width:min(94%,420px)!important;height:430px;padding:20px 20px 50px}.about-image-frame{border-radius:24px 80px 24px 24px}.about-note{min-width:205px;padding:13px 16px}}
@media(max-width:390px){.hero-premium-art{width:290px!important;height:290px}.hero-stage{min-height:310px}.about-premium-art{height:390px}}


/* ===== Reference-led hero collage refinement ===== */
.hero-premium-art::before{
  content:"";position:absolute;inset:1%;z-index:0;border-radius:34% 66% 58% 42% / 46% 38% 62% 54%;
  background:linear-gradient(140deg,rgba(47,63,163,.96),rgba(70,170,230,.88) 54%,rgba(63,194,201,.92));
  transform:rotate(-7deg) scale(.92);box-shadow:0 34px 70px rgba(35,52,137,.18)
}
.hero-premium-art::after{
  content:"";position:absolute;inset:-3%;z-index:-1;opacity:.42;
  background-image:radial-gradient(rgba(47,63,163,.42) 1.4px,transparent 1.4px);background-size:12px 12px;
  -webkit-mask-image:radial-gradient(circle at center,#000 0 65%,transparent 82%);mask-image:radial-gradient(circle at center,#000 0 65%,transparent 82%)
}
.hero-image-ring{width:78%;border-radius:50% 50% 46% 54% / 50% 46% 54% 50%;box-shadow:0 32px 80px rgba(22,38,105,.28),0 0 0 11px #fff;transform:rotate(-1.5deg)}
.hero-image-ring img{transform:rotate(1.5deg) scale(1.035)}
.orbit-one{width:98%;height:88%;border:0;background:transparent;transform:rotate(-18deg)}
.orbit-one::before,.orbit-one::after{content:"";position:absolute;border-radius:999px;background:linear-gradient(135deg,#3fc2c9,#46aae6)}
.orbit-one::before{width:125px;height:36px;right:-2%;top:14%;transform:rotate(-45deg)}
.orbit-one::after{width:105px;height:28px;left:2%;bottom:8%;transform:rotate(-48deg);background:linear-gradient(135deg,#5164c7,#2f3fa3)}
.orbit-two{width:90%;height:90%;border:0;transform:none}
.orbit-two::before{content:"";position:absolute;width:135px;height:135px;right:-2%;top:5%;border-radius:50%;background:linear-gradient(145deg,rgba(255,125,145,.92),rgba(255,173,92,.88));z-index:-1}
.orbit-two::after{content:"";position:absolute;width:110px;height:155px;left:-1%;bottom:7%;border-radius:60% 40% 56% 44%;background:linear-gradient(145deg,rgba(63,194,201,.9),rgba(70,170,230,.86));z-index:-1;transform:rotate(18deg)}
.dot-one{width:62px;height:62px;right:0;top:29%;background:linear-gradient(135deg,#3fc2c9,#46aae6)}
.dot-two{width:40px;height:40px;left:3%;bottom:24%;background:linear-gradient(135deg,#ff8097,#ffad5c)}
.dot-three{right:16%;bottom:3%}
/* Restore the original full-height, half-cut service-card brand treatment. */
#services .card{padding-right:clamp(72px,24%,120px);overflow:visible}
.card .card-logo,.card:hover .card-logo,body.split-services .card-logo{
  position:absolute!important;top:0!important;right:0!important;bottom:0!important;width:auto!important;height:100%!important;
  aspect-ratio:946/722!important;display:grid!important;place-items:center!important;opacity:1!important;
  transform:translate(50%,0) scale(1)!important;clip-path:inset(0 50% 0 0)!important;transition:none!important;pointer-events:none!important
}
.card .card-logo img,.card:hover .card-logo img,body.split-services .card-logo img{
  display:block!important;width:100%!important;height:100%!important;object-fit:contain!important;opacity:.38!important;transition:opacity .35s ease!important
}
.card:hover .card-logo img{opacity:.68!important}
@media(max-width:760px){#services .card{padding-right:64px}.card .card-logo,body.split-services .card-logo{top:0!important;right:0!important;width:auto!important;height:100%!important}}


/* Dubai hero service tags */
.label-code{display:none!important}
.label-ui{left:-1%;top:24%}
.label-crm{right:1%;top:17%;color:#2f3fa3}
.label-web{right:-3%;bottom:31%;color:#3fc2c9}
.label-seo{left:2%;bottom:19%;color:#2f3fa3}
.label-graphics{right:13%;bottom:5%;color:#3fc2c9}
@media(max-width:760px){.label-crm{right:2%;top:14%}.label-web{right:-1%;bottom:28%}.label-seo{left:1%;bottom:17%}.label-graphics{right:12%;bottom:2%}}


/* ===== Fixed connected-X background ===== */
.x-network-bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;opacity:.24;background:radial-gradient(circle at 50% 50%,rgba(70,170,230,.09),transparent 28%)}
.x-network-lines{position:absolute;inset:0;width:100%;height:100%}
.net-traces path{stroke-dasharray:9 12;animation:xSignal 14s linear infinite}
.net-traces path:nth-child(2n){animation-direction:reverse;animation-duration:18s}
.net-traces path:nth-child(3n){animation-duration:22s}
.net-nodes circle{animation:xNode 3.2s ease-in-out infinite}
.net-nodes circle:nth-child(2n){animation-delay:-1.4s}.net-nodes circle:nth-child(3n){animation-delay:-2.3s}
.x-network-core{position:absolute;left:50%;top:50%;width:108px;height:108px;transform:translate(-50%,-50%);display:grid;place-items:center}
.x-network-core img{position:relative;z-index:2;width:76px;height:76px;object-fit:contain;filter:drop-shadow(0 8px 18px rgba(47,63,163,.22))}
.x-core-ring{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(47,63,163,.3);box-shadow:0 0 0 14px rgba(63,194,201,.04);animation:xRing 4s ease-in-out infinite}
@keyframes xSignal{to{stroke-dashoffset:-210}}
@keyframes xNode{0%,100%{opacity:.35;transform:scale(.75)}50%{opacity:1;transform:scale(1.35)}}
@keyframes xRing{0%,100%{transform:scale(.92);opacity:.45}50%{transform:scale(1.08);opacity:.9}}
body>nav,body>main,body>footer{position:relative;z-index:1}
@media(prefers-reduced-motion:reduce){.net-traces path,.net-nodes circle,.x-core-ring{animation:none!important}}
@media(max-width:760px){.x-network-bg{opacity:.18}.x-network-core{width:78px;height:78px}.x-network-core img{width:54px;height:54px}}


/* ===== Flowing convergence background — video-reference model ===== */
.x-flow-bg{opacity:.18;background:radial-gradient(circle at 50% 50%,rgba(63,194,201,.13),transparent 14%),radial-gradient(circle at 50% 50%,rgba(47,63,163,.06),transparent 52%)}
.x-flow-svg{position:absolute;inset:0;width:100%;height:100%}
.flow-ribbons use{opacity:.28;animation:flowBreathe 7s ease-in-out infinite;transform-origin:center}
.flow-ribbons use:nth-child(2n){animation-delay:-2.2s}.flow-ribbons use:nth-child(3n){animation-delay:-4.5s}
.flow-hairlines use{stroke-dasharray:2 13;animation:flowDash 13s linear infinite}
.flow-hairlines use:nth-child(2n){animation-direction:reverse;animation-duration:17s}
.x-flow-core{width:116px;height:116px;background:rgba(255,255,255,.72);border-radius:50%;box-shadow:0 0 55px rgba(70,170,230,.24);backdrop-filter:blur(4px)}
.x-flow-core img{width:80px;height:80px}.x-flow-core .x-core-ring{inset:-9px;border-color:rgba(63,194,201,.42)}
@keyframes flowDash{to{stroke-dashoffset:-240}}
@keyframes flowBreathe{0%,100%{opacity:.16}50%{opacity:.42}}
@media(max-width:760px){.x-flow-bg{opacity:.13}.x-flow-core{width:80px;height:80px}.x-flow-core img{width:55px;height:55px}}


/* ===== Stronger visible flow motion + larger unframed X ===== */
.x-flow-bg{opacity:.31!important}
.x-flow-core{width:180px!important;height:180px!important;background:transparent!important;border-radius:0!important;box-shadow:none!important;backdrop-filter:none!important}
.x-flow-core img{width:148px!important;height:148px!important;filter:drop-shadow(0 14px 24px rgba(35,52,137,.24))!important}
.x-flow-core .x-core-ring{display:none!important}
.flow-ribbons use{stroke-dasharray:220 46 90 34;animation:flowStreams 8s linear infinite!important;opacity:.30!important}
.flow-ribbons use:nth-child(2n){animation-duration:11s!important;animation-direction:reverse!important}
.flow-ribbons use:nth-child(3n){animation-duration:14s!important}
.flow-hairlines use{stroke-dasharray:4 18!important;animation:flowDashFast 4.8s linear infinite!important;opacity:.95}
.flow-hairlines use:nth-child(2n){animation-duration:6.5s!important;animation-direction:reverse!important}
.flow-particles circle{animation:particlePulse 1.8s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.flow-particles circle:nth-child(2n){animation-delay:-.9s}
@keyframes flowStreams{to{stroke-dashoffset:-390}}
@keyframes flowDashFast{to{stroke-dashoffset:-176}}
@keyframes particlePulse{0%,100%{opacity:.35;transform:scale(.65)}50%{opacity:1;transform:scale(1.55)}}
@media(max-width:760px){.x-flow-bg{opacity:.22!important}.x-flow-core{width:118px!important;height:118px!important}.x-flow-core img{width:98px!important;height:98px!important}}


/* ===== Electrical power-feed animation ===== */
.flow-ribbons use{stroke-dasharray:none!important;animation:powerBed 4.5s ease-in-out infinite!important;opacity:.2!important}
.flow-hairlines use{stroke-dasharray:2 16!important;animation:powerCurrent 2.4s linear infinite!important}
.energy-charges use{path-length:1;stroke-dasharray:.045 .955;stroke-dashoffset:1;animation:energyCharge 3.2s cubic-bezier(.35,.05,.7,.95) infinite;opacity:0}
.energy-charges use:nth-child(2){animation-delay:-.55s}.energy-charges use:nth-child(3){animation-delay:-1.1s}.energy-charges use:nth-child(4){animation-delay:-1.65s}.energy-charges use:nth-child(5){animation-delay:-2.2s}.energy-charges use:nth-child(6){animation-delay:-2.75s}
.energy-charges use:nth-child(7){animation-delay:-.3s}.energy-charges use:nth-child(8){animation-delay:-.85s}.energy-charges use:nth-child(9){animation-delay:-1.4s}.energy-charges use:nth-child(10){animation-delay:-1.95s}.energy-charges use:nth-child(11){animation-delay:-2.5s}.energy-charges use:nth-child(12){animation-delay:-3.05s}
.core-energy-flash{transform-box:fill-box;transform-origin:center;animation:coreFlash 3.2s ease-out infinite}
.x-flow-core img{animation:logoEnergise 3.2s ease-in-out infinite!important}
@keyframes energyCharge{0%{stroke-dashoffset:1;opacity:0}8%{opacity:1}78%{opacity:1}100%{stroke-dashoffset:0;opacity:0}}
@keyframes powerCurrent{to{stroke-dashoffset:-72}}
@keyframes powerBed{0%,100%{opacity:.13}50%{opacity:.29}}
@keyframes coreFlash{0%,72%{opacity:0;transform:scale(.35)}84%{opacity:.95;transform:scale(1)}100%{opacity:0;transform:scale(3.5)}}
@keyframes logoEnergise{0%,68%,100%{transform:scale(1);filter:drop-shadow(0 12px 22px rgba(35,52,137,.2)) brightness(1)}82%{transform:scale(1.08);filter:drop-shadow(0 0 28px rgba(63,194,201,.85)) brightness(1.2)}}


/* Remove white travelling bubbles; retain only the fast moving line current. */
.energy-charges,.flow-particles,.core-energy-flash{display:none!important}
.x-flow-core img{animation:none!important}


/* ===== Hero spacing + readable content fog over fixed X ===== */
.hero{padding-top:100px!important;padding-bottom:80px!important}
@media(min-width:1001px){
  .hero{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;padding-left:3.2vw!important;padding-right:3.2vw!important;column-gap:96px!important}
  .hero-copy{transform:translateX(-8px)}
  .hero-stage{transform:translateX(28px)}
  .hero-premium-art{margin-left:auto!important;margin-right:0!important}
}
/* Soft white mist only behind readable content; the fixed network remains visible elsewhere. */
.hero-copy,.sec-head,.about-txt,.cta-band,.blog-grid .body,.work-card .meta,.step,.tcard{position:relative;isolation:isolate}
.hero-copy::before,.sec-head::before,.about-txt::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  inset:-34px -48px;border-radius:46px;
  background:radial-gradient(ellipse at center,rgba(255,255,255,.98) 0%,rgba(255,255,255,.92) 56%,rgba(255,255,255,.58) 76%,rgba(255,255,255,0) 100%);
  filter:blur(8px)
}
.hero-copy::before{inset:-46px -72px -40px -48px}
.about-txt::before{inset:-48px -55px}
.cta-band{box-shadow:0 0 65px 28px rgba(255,255,255,.78)}
@media(max-width:1000px){.hero{padding-top:100px!important;padding-bottom:64px!important}.hero-copy,.hero-stage{transform:none!important}.hero-copy::before{inset:-28px -20px}}
@media(max-width:760px){.hero{padding-top:88px!important;padding-bottom:54px!important}.hero-copy::before,.sec-head::before,.about-txt::before{inset:-22px -12px;filter:blur(6px)}}


/* Footer edge + back-to-top stacking fix */
#site-footer{margin-bottom:0!important}
body{margin-bottom:0!important;padding-bottom:0!important}
#toTop{position:fixed!important;right:26px!important;bottom:26px!important;z-index:9999!important}
@media(max-width:760px){#toTop{right:16px!important;bottom:16px!important}}


/* Lighter content fog */
.hero-copy::before,.sec-head::before,.about-txt::before{
  background:radial-gradient(ellipse at center,rgba(255,255,255,.80) 0%,rgba(255,255,255,.62) 52%,rgba(255,255,255,.25) 75%,rgba(255,255,255,0) 100%)!important;
  filter:blur(11px)!important
}
.cta-band{box-shadow:0 0 48px 18px rgba(255,255,255,.48)!important}


/* Make the power direction toward the centre X unmistakable — streaks, not bubbles. */
.energy-charges{display:block!important;stroke:#35c9dc!important;stroke-width:3!important;filter:url(#flowGlow);opacity:.95}
.energy-charges use{display:block!important;stroke-dasharray:.14 .86!important;stroke-dashoffset:1;stroke-linecap:butt!important;animation:energyCharge 2.65s linear infinite!important;opacity:0}
.flow-particles,.core-energy-flash{display:none!important}
.flow-hairlines{stroke:#46bddd!important;stroke-width:1.7!important;opacity:.95!important}
.flow-ribbons use{opacity:.27!important}
.x-flow-core img{animation:centrePowerGlow 2.65s ease-in-out infinite!important}
@keyframes centrePowerGlow{0%,68%,100%{filter:drop-shadow(0 10px 20px rgba(35,52,137,.2)) brightness(1);transform:scale(1)}86%{filter:drop-shadow(0 0 24px rgba(53,201,220,.82)) brightness(1.13);transform:scale(1.035)}}


/* Fast asynchronous power feeds — every route fires at a different time. */
.energy-charges use{animation-name:energyCharge!important;animation-timing-function:cubic-bezier(.2,.72,.35,1)!important;animation-iteration-count:infinite!important}
.energy-charges use:nth-child(1){animation-duration:.82s!important;animation-delay:-.17s!important}
.energy-charges use:nth-child(2){animation-duration:1.18s!important;animation-delay:-.73s!important}
.energy-charges use:nth-child(3){animation-duration:.94s!important;animation-delay:-.41s!important}
.energy-charges use:nth-child(4){animation-duration:1.43s!important;animation-delay:-1.09s!important}
.energy-charges use:nth-child(5){animation-duration:1.06s!important;animation-delay:-.28s!important}
.energy-charges use:nth-child(6){animation-duration:1.31s!important;animation-delay:-.91s!important}
.energy-charges use:nth-child(7){animation-duration:.88s!important;animation-delay:-.62s!important}
.energy-charges use:nth-child(8){animation-duration:1.52s!important;animation-delay:-.36s!important}
.energy-charges use:nth-child(9){animation-duration:1.12s!important;animation-delay:-.84s!important}
.energy-charges use:nth-child(10){animation-duration:.76s!important;animation-delay:-.31s!important}
.energy-charges use:nth-child(11){animation-duration:1.37s!important;animation-delay:-1.18s!important}
.energy-charges use:nth-child(12){animation-duration:.98s!important;animation-delay:-.55s!important}
.x-flow-core img{animation:rapidCoreEnergy 1.1s ease-in-out infinite!important}
@keyframes rapidCoreEnergy{0%,55%,100%{filter:drop-shadow(0 10px 20px rgba(35,52,137,.2)) brightness(1);transform:scale(1)}72%{filter:drop-shadow(0 0 22px rgba(53,201,220,.78)) brightness(1.12);transform:scale(1.025)}}


/* ===== Banner-only digital power hub ===== */
.x-network-bg{display:none!important}
.hero-stage{position:relative;min-height:590px!important;overflow:visible}
.hero-digital-hub{position:relative;width:min(100%,760px);height:580px;margin-left:auto;isolation:isolate}
.hub-flow{position:absolute;inset:0;width:100%;height:100%;z-index:0;overflow:visible}
.hub-base path{opacity:.5;stroke-dasharray:3 12;animation:hubBaseFlow 2.3s linear infinite}
.hub-energy path{stroke-dasharray:.105 .895;stroke-dashoffset:1;animation:hubPower 1.25s linear infinite;opacity:0}
.hub-energy path:nth-child(2){animation-duration:.92s;animation-delay:-.44s}.hub-energy path:nth-child(3){animation-duration:1.48s;animation-delay:-.81s}.hub-energy path:nth-child(4){animation-duration:1.06s;animation-delay:-.22s}.hub-energy path:nth-child(5){animation-duration:1.34s;animation-delay:-.69s}.hub-energy path:nth-child(6){animation-duration:.84s;animation-delay:-.37s}
.hub-nodes circle{animation:hubNode 2s ease-in-out infinite}.hub-nodes circle:nth-child(2n){animation-delay:-1s}
.hub-x-logo{position:absolute;left:50%;top:50%;z-index:4;width:230px;height:230px;object-fit:contain;transform:translate(-50%,-50%);filter:drop-shadow(0 20px 34px rgba(35,52,137,.24))}
.hub-orbit{position:absolute;left:50%;top:50%;z-index:3;border-radius:50%;pointer-events:none}
.hub-orbit::before{content:"";position:absolute;inset:0;border-radius:50%;border:1px solid rgba(47,63,163,.24);border-top-color:#3fc2c9;border-right-color:#46aae6}
.hub-orbit span{position:absolute;padding:8px 13px;border-radius:12px;background:#fff;border:1px solid rgba(47,63,163,.13);box-shadow:0 9px 24px rgba(31,52,130,.13);font-size:.66rem;font-weight:800;letter-spacing:1.1px;color:#2f3fa3;white-space:nowrap}
.orbit-a{width:330px;height:330px;margin:-165px 0 0 -165px;animation:orbitClock 13s linear infinite}.orbit-a span{left:8px;top:54px;animation:counterClock 13s linear infinite}
.orbit-b{width:400px;height:255px;margin:-127px 0 0 -200px;animation:orbitAnti 17s linear infinite}.orbit-b span{right:2px;bottom:42px;animation:counterAnti 17s linear infinite;color:#269eaa}
.orbit-c{width:470px;height:380px;margin:-190px 0 0 -235px;animation:orbitClock 22s linear infinite}.orbit-c span{right:35px;top:36px;animation:counterClock 22s linear infinite}
@keyframes hubPower{0%{stroke-dashoffset:1;opacity:0}8%{opacity:1}88%{opacity:1}100%{stroke-dashoffset:0;opacity:0}}
@keyframes hubBaseFlow{to{stroke-dashoffset:-75}}
@keyframes hubNode{0%,100%{opacity:.3}50%{opacity:1}}
@keyframes orbitClock{to{transform:rotate(360deg)}}@keyframes counterClock{to{transform:rotate(-360deg)}}
@keyframes orbitAnti{to{transform:rotate(-360deg)}}@keyframes counterAnti{to{transform:rotate(360deg)}}
@media(min-width:1001px){.hero-stage{transform:translateX(34px)!important}.hero-digital-hub{margin-right:-35px}}
@media(max-width:1000px){.hero-stage{min-height:510px!important}.hero-digital-hub{height:500px;margin:auto}.hub-x-logo{width:195px;height:195px}.orbit-a{width:285px;height:285px;margin:-142px 0 0 -142px}.orbit-b{width:345px;height:220px;margin:-110px 0 0 -172px}.orbit-c{width:405px;height:330px;margin:-165px 0 0 -202px}}
@media(max-width:760px){.hero-stage{min-height:390px!important}.hero-digital-hub{width:100%;height:380px}.hub-x-logo{width:145px;height:145px}.orbit-a{width:210px;height:210px;margin:-105px 0 0 -105px}.orbit-b{width:260px;height:165px;margin:-82px 0 0 -130px}.orbit-c{width:305px;height:245px;margin:-122px 0 0 -152px}.hub-orbit span{padding:6px 9px;font-size:.55rem}.orbit-a span{left:-2px;top:35px}.orbit-c span{right:18px;top:24px}}


/* Full-banner power field; hub remains on the right. */
.hero{position:relative;overflow:hidden;isolation:isolate}
.banner-power-bg{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:.52}
.banner-base path{stroke-dasharray:3 13;animation:bannerCurrent 2.1s linear infinite}
.banner-energy path{stroke-dasharray:.09 .91;stroke-dashoffset:1;animation:bannerPower 1.12s linear infinite;opacity:0}
.banner-energy path:nth-child(2){animation-duration:.78s;animation-delay:-.32s}.banner-energy path:nth-child(3){animation-duration:1.36s;animation-delay:-.71s}.banner-energy path:nth-child(4){animation-duration:.92s;animation-delay:-.19s}.banner-energy path:nth-child(5){animation-duration:1.24s;animation-delay:-.58s}.banner-energy path:nth-child(6){animation-duration:.84s;animation-delay:-.43s}
.hero-copy,.hero-stage{position:relative;z-index:2}
.hero-digital-hub{height:600px!important}
.hub-x-logo{width:310px!important;height:310px!important}
.orbit-a{width:410px!important;height:410px!important;margin:-205px 0 0 -205px!important}.orbit-b{width:485px!important;height:315px!important;margin:-157px 0 0 -242px!important}.orbit-c{width:555px!important;height:445px!important;margin:-222px 0 0 -277px!important}
@keyframes bannerCurrent{to{stroke-dashoffset:-80}}@keyframes bannerPower{0%{stroke-dashoffset:1;opacity:0}7%{opacity:1}90%{opacity:1}100%{stroke-dashoffset:0;opacity:0}}
@media(max-width:1000px){.hub-x-logo{width:240px!important;height:240px!important}.hero-digital-hub{height:520px!important}.orbit-a{width:330px!important;height:330px!important;margin:-165px 0 0 -165px!important}.orbit-b{width:400px!important;height:255px!important;margin:-127px 0 0 -200px!important}.orbit-c{width:460px!important;height:370px!important;margin:-185px 0 0 -230px!important}}
@media(max-width:760px){.banner-power-bg{opacity:.34}.hub-x-logo{width:175px!important;height:175px!important}.hero-digital-hub{height:390px!important}.orbit-a{width:235px!important;height:235px!important;margin:-117px 0 0 -117px!important}.orbit-b{width:285px!important;height:185px!important;margin:-92px 0 0 -142px!important}.orbit-c{width:330px!important;height:265px!important;margin:-132px 0 0 -165px!important}}


/* Circuit-diagram power paths with small travelling bubbles. */
.banner-base,.banner-energy{display:none!important}
.banner-circuit use{stroke-dasharray:4 11;animation:circuitTrace 2.2s linear infinite;opacity:.62}
.banner-circuit use:nth-child(2n){animation-direction:reverse;animation-duration:2.8s}
.circuit-power use{stroke-dasharray:.075 .925;stroke-dashoffset:1;animation:circuitCharge 1.35s linear infinite;opacity:0}
.circuit-power use:nth-child(2){animation-duration:.92s;animation-delay:-.31s}.circuit-power use:nth-child(3){animation-duration:1.62s;animation-delay:-.87s}.circuit-power use:nth-child(4){animation-duration:1.08s;animation-delay:-.46s}.circuit-power use:nth-child(5){animation-duration:1.44s;animation-delay:-1.02s}.circuit-power use:nth-child(6){animation-duration:.82s;animation-delay:-.22s}
.circuit-bubbles circle{opacity:.88}
@keyframes circuitTrace{to{stroke-dashoffset:-75}}@keyframes circuitCharge{0%{stroke-dashoffset:1;opacity:0}8%{opacity:1}90%{opacity:1}100%{stroke-dashoffset:0;opacity:0}}


/* Static circuit tracks; only the small round power nodes travel. */
.banner-circuit use{animation:none!important;stroke-dasharray:none!important;opacity:.48!important}
.circuit-power{display:none!important}
.circuit-bubbles{display:block!important}
.circuit-bubbles circle{opacity:1!important;transform-box:fill-box;transform-origin:center;animation:ballGlow 1s ease-in-out infinite}
.circuit-bubbles circle:nth-child(2n){animation-delay:-.45s}
@keyframes ballGlow{0%,100%{transform:scale(.8);opacity:.7}50%{transform:scale(1.3);opacity:1}}


/* ===== Branching power build + two circular service orbits ===== */
.banner-circuit{display:none!important}
.circuit-power{display:block!important}
.circuit-power use{stroke:#42c6d4!important;stroke-width:2.8!important;stroke-dasharray:1!important;stroke-dashoffset:1;opacity:0;animation:circuitBuild 2.2s cubic-bezier(.25,.7,.3,1) infinite!important}
.circuit-power use:nth-child(2){animation-duration:1.65s!important;animation-delay:-.7s!important}.circuit-power use:nth-child(3){animation-duration:2.65s!important;animation-delay:-1.45s!important}.circuit-power use:nth-child(4){animation-duration:1.9s!important;animation-delay:-.35s!important}.circuit-power use:nth-child(5){animation-duration:2.4s!important;animation-delay:-1.8s!important}.circuit-power use:nth-child(6){animation-duration:1.5s!important;animation-delay:-.95s!important}
@keyframes circuitBuild{0%{stroke-dashoffset:1;opacity:0}8%{opacity:.9}68%{stroke-dashoffset:0;opacity:1}88%{stroke-dashoffset:0;opacity:.75}100%{stroke-dashoffset:-1;opacity:0}}
.hub-x-logo{width:370px!important;height:370px!important;z-index:5!important}
.hub-orbit{border-radius:50%!important}
.hub-orbit::before{border-width:1.5px!important;border-color:rgba(47,63,163,.22)!important;border-top-color:#3fc2c9!important;border-bottom-color:#46aae6!important}
.orbit-a{width:465px!important;height:465px!important;margin:-232px 0 0 -232px!important;animation:orbitClock 18s linear infinite!important}
.orbit-b{width:570px!important;height:570px!important;margin:-285px 0 0 -285px!important;animation:orbitAnti 25s linear infinite!important}
.orbit-c{display:none!important}
.hub-orbit span{position:absolute!important;padding:9px 13px!important;border-radius:10px!important;font-size:.61rem!important;letter-spacing:.75px!important;box-shadow:0 9px 25px rgba(31,52,130,.14)!important}
.orbit-a span{animation:counterClock 18s linear infinite!important}.orbit-b span{animation:counterAnti 25s linear infinite!important}
.orbit-a span:nth-child(1){left:8%;top:12%;background:#fff;color:#2f3fa3}.orbit-a span:nth-child(2){right:-4%;top:42%;background:#2f69b7;color:#fff;border-color:#2f69b7}.orbit-a span:nth-child(3){left:18%;bottom:-2%;background:#edf1f6;color:#273354}.orbit-a span:nth-child(4){left:-7%;top:53%;background:#3fc2c9;color:#fff;border-color:#3fc2c9}
.orbit-b span:nth-child(1){left:14%;top:4%;background:#2f3fa3;color:#fff;border-color:#2f3fa3}.orbit-b span:nth-child(2){right:5%;top:14%;background:#fff;color:#2f69b7}.orbit-b span:nth-child(3){right:-3%;bottom:22%;background:#e5e9f0;color:#273354}.orbit-b span:nth-child(4){left:3%;bottom:13%;background:#438fca;color:#fff;border-color:#438fca}
@media(max-width:1000px){.hub-x-logo{width:285px!important;height:285px!important}.orbit-a{width:365px!important;height:365px!important;margin:-182px 0 0 -182px!important}.orbit-b{width:445px!important;height:445px!important;margin:-222px 0 0 -222px!important}}
@media(max-width:760px){.hub-x-logo{width:205px!important;height:205px!important}.orbit-a{width:265px!important;height:265px!important;margin:-132px 0 0 -132px!important}.orbit-b{width:325px!important;height:325px!important;margin:-162px 0 0 -162px!important}.hub-orbit span{padding:6px 8px!important;font-size:.48rem!important}}


/* Orbit service-card reset: prevent old single-label positioning from stretching boxes. */
.hub-orbit span{
  left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;
  width:max-content!important;min-width:0!important;height:auto!important;
  background:#fff!important;color:#2f3fa3!important;border:1px solid #d9e0eb!important;
  opacity:1!important;white-space:nowrap!important
}
.orbit-a span:nth-child(1){left:8%!important;top:12%!important;background:#fff!important;color:#2f3fa3!important}
.orbit-a span:nth-child(2){right:-4%!important;top:42%!important;background:#2f69b7!important;color:#fff!important;border-color:#2f69b7!important}
.orbit-a span:nth-child(3){left:18%!important;bottom:-2%!important;background:#edf1f6!important;color:#273354!important;border-color:#d9e0eb!important}
.orbit-a span:nth-child(4){left:-7%!important;top:53%!important;background:#3b82c4!important;color:#fff!important;border-color:#3b82c4!important}
.orbit-b span:nth-child(1){left:14%!important;top:4%!important;background:#2f3fa3!important;color:#fff!important;border-color:#2f3fa3!important}
.orbit-b span:nth-child(2){right:5%!important;top:14%!important;background:#fff!important;color:#2f69b7!important;border-color:#d9e0eb!important}
.orbit-b span:nth-child(3){right:-3%!important;bottom:22%!important;background:#e5e9f0!important;color:#273354!important;border-color:#d2d8e3!important}
.orbit-b span:nth-child(4){left:3%!important;bottom:13%!important;background:#438fca!important;color:#fff!important;border-color:#438fca!important}


/* ===== Refined circuit routing: thin grey bed + five slow branch builds ===== */
.banner-power-bg{opacity:.46!important}
.banner-circuit{display:block!important;stroke:#aab3c2!important;stroke-width:1.05!important;filter:none!important}
.banner-circuit use{display:block!important;animation:none!important;stroke-dasharray:none!important;opacity:.42!important}
.circuit-power{display:block!important;stroke:#7f8da3!important;stroke-width:1.65!important;filter:none!important}
.circuit-power use{stroke:#7f8da3!important;stroke-width:1.65!important;stroke-dasharray:1!important;stroke-dashoffset:1;opacity:0;animation:circuitBuildSlow 4.8s cubic-bezier(.28,.68,.34,1) infinite!important}
.circuit-power use:nth-child(1){animation-duration:4.2s!important;animation-delay:-.6s!important}
.circuit-power use:nth-child(2){animation-duration:5.4s!important;animation-delay:-3.1s!important}
.circuit-power use:nth-child(3){animation-duration:4.7s!important;animation-delay:-1.8s!important}
.circuit-power use:nth-child(4){animation-duration:5.9s!important;animation-delay:-4.4s!important}
.circuit-power use:nth-child(5){animation-duration:5.1s!important;animation-delay:-2.5s!important}
.circuit-power use:nth-child(6){display:none!important}
.circuit-bubbles{display:none!important}
@keyframes circuitBuildSlow{0%{stroke-dashoffset:1;opacity:0}10%{opacity:.15}58%{stroke-dashoffset:0;opacity:.9}76%{stroke-dashoffset:0;opacity:.72}100%{stroke-dashoffset:-1;opacity:0}}


/* Centre-locked circuit: SVG is anchored to the logo hub, so every path crosses its exact centre. */
.banner-power-bg{display:none!important}
.hub-circuit-svg{position:absolute;left:50%;top:50%;width:2000px;height:580px;transform:translate(-50%,-50%);z-index:0;overflow:visible;pointer-events:none;opacity:.6}
.hub-static-circuit use{opacity:.44}
.hub-building-circuit use{stroke-dasharray:1;stroke-dashoffset:1;opacity:0;animation:hubCircuitBuild 5s cubic-bezier(.28,.68,.34,1) infinite}
.hub-building-circuit use:nth-child(2){animation-duration:5.8s;animation-delay:-2.2s}.hub-building-circuit use:nth-child(3){animation-duration:4.5s;animation-delay:-1.1s}.hub-building-circuit use:nth-child(4){animation-duration:6.2s;animation-delay:-4s}.hub-building-circuit use:nth-child(5){animation-duration:5.3s;animation-delay:-3.1s}
.hub-travel-balls circle{opacity:.92}
.hub-x-logo{z-index:5!important}
@keyframes hubCircuitBuild{0%{stroke-dashoffset:1;opacity:0}10%{opacity:.2}62%{stroke-dashoffset:0;opacity:.9}82%{opacity:.65}100%{stroke-dashoffset:-1;opacity:0}}
@media(max-width:760px){.hub-circuit-svg{width:1250px;height:390px;opacity:.48}}


/* Full-height, edge-to-edge banner circuit field. */
.hero{overflow:hidden!important}
.hub-circuit-svg{left:50%!important;top:50%!important;width:max(2400px,165vw)!important;height:900px!important;transform:translate(-50%,-50%)!important;opacity:.58!important}
.hub-static-circuit use{stroke:#aab3c2!important;stroke-width:1!important;opacity:.38!important}
/* Readability fog is limited to the copy, while circuit routes remain visible around it. */
.hero-copy::before{inset:-52px -80px -48px -55px!important;background:radial-gradient(ellipse at 42% 50%,rgba(255,255,255,.94) 0%,rgba(255,255,255,.86) 48%,rgba(255,255,255,.58) 68%,rgba(255,255,255,.16) 84%,rgba(255,255,255,0) 100%)!important;filter:blur(9px)!important}
@media(max-width:1000px){.hub-circuit-svg{width:max(1700px,210vw)!important;height:760px!important}.hero-copy::before{inset:-34px -35px!important}}
@media(max-width:760px){.hub-circuit-svg{width:1500px!important;height:680px!important;opacity:.42!important}.hero-copy::before{inset:-25px -18px!important;background:radial-gradient(ellipse at center,rgba(255,255,255,.95),rgba(255,255,255,.78) 58%,rgba(255,255,255,0) 100%)!important}}


/* ===== Balanced banner composition: no clipped orbit cards ===== */
@media(min-width:1001px){
  .hero{grid-template-columns:1.08fr .92fr!important;column-gap:44px!important;padding-left:4.5vw!important;padding-right:4.5vw!important}
  .hero-stage{transform:translateX(-18px)!important;min-width:0!important;overflow:visible!important}
  .hero-digital-hub{width:620px!important;max-width:100%!important;height:590px!important;margin:0 auto!important}
}
.hub-x-logo{width:330px!important;height:330px!important}
.orbit-a{width:420px!important;height:420px!important;margin:-210px 0 0 -210px!important}
.orbit-b{width:510px!important;height:510px!important;margin:-255px 0 0 -255px!important}
/* Keep every service card safely inside the circular artwork boundary. */
.orbit-a span:nth-child(1){left:12%!important;top:14%!important}
.orbit-a span:nth-child(2){right:0!important;top:40%!important}
.orbit-a span:nth-child(3){left:23%!important;bottom:0!important}
.orbit-a span:nth-child(4){left:0!important;top:51%!important}
.orbit-b span:nth-child(1){left:17%!important;top:5%!important}
.orbit-b span:nth-child(2){right:9%!important;top:15%!important}
.orbit-b span:nth-child(3){right:1%!important;bottom:23%!important}
.orbit-b span:nth-child(4){left:8%!important;bottom:14%!important}
.hub-static-circuit use{opacity:.29!important}
.hero-copy::before{background:radial-gradient(ellipse at 42% 50%,rgba(255,255,255,.97) 0%,rgba(255,255,255,.9) 52%,rgba(255,255,255,.62) 70%,rgba(255,255,255,.12) 88%,rgba(255,255,255,0) 100%)!important}
@media(max-width:1200px) and (min-width:1001px){.hero-digital-hub{width:560px!important}.hub-x-logo{width:290px!important;height:290px!important}.orbit-a{width:370px!important;height:370px!important;margin:-185px 0 0 -185px!important}.orbit-b{width:455px!important;height:455px!important;margin:-227px 0 0 -227px!important}}
@media(max-width:1000px){.hero-stage{overflow:visible!important}.hero-digital-hub{max-width:94%!important}.hub-x-logo{width:270px!important;height:270px!important}.orbit-a{width:350px!important;height:350px!important;margin:-175px 0 0 -175px!important}.orbit-b{width:430px!important;height:430px!important;margin:-215px 0 0 -215px!important}}
@media(max-width:760px){.hero-digital-hub{width:100%!important;max-width:100%!important}.hub-x-logo{width:190px!important;height:190px!important}.orbit-a{width:245px!important;height:245px!important;margin:-122px 0 0 -122px!important}.orbit-b{width:305px!important;height:305px!important;margin:-152px 0 0 -152px!important}.hub-orbit span{font-size:.44rem!important;padding:5px 7px!important}}


/* Route circuits only through the left column's empty top, bottom and outer-margin space. */
.hub-circuit-svg{height:960px!important;opacity:.64!important}
.hub-static-circuit use{opacity:.46!important}
.hero-copy::before{background:radial-gradient(ellipse at 42% 50%,rgba(255,255,255,.93) 0%,rgba(255,255,255,.83) 48%,rgba(255,255,255,.42) 68%,rgba(255,255,255,0) 88%)!important}
@media(max-width:1000px){.hub-circuit-svg{height:820px!important}}
@media(max-width:760px){.hub-circuit-svg{height:700px!important;opacity:.42!important}}


/* Softer diagram with clearly separated tree branches on the logo's right. */
.hub-circuit-svg{opacity:.42!important}
.hub-static-circuit use{opacity:.28!important;stroke:#aeb6c3!important}
.hub-building-circuit use{stroke:#8f9bad!important;stroke-width:1.35!important}
.hub-travel-balls{opacity:.58!important}
@media(max-width:760px){.hub-circuit-svg{opacity:.31!important}}


/* Increase only the lower-left circuit visibility. */
.hub-static-circuit use:nth-child(n+6){opacity:.52!important;stroke:#929dad!important;stroke-width:1.15!important}


/* Visible travelling power balls on every circuit route. */
.hub-travel-balls{display:block!important;opacity:.88!important}
.hub-travel-balls circle{display:block!important;opacity:1!important}


/* Hide the circuit junction completely behind the X without drawing a visible circle. */
.hero-digital-hub::before{
  content:"";position:absolute;left:50%;top:50%;z-index:2;pointer-events:none;
  width:390px;height:350px;transform:translate(-50%,-50%);
  background:radial-gradient(ellipse at center,#fff 0%,#fff 64%,rgba(255,255,255,.96) 72%,rgba(255,255,255,0) 88%)
}
@media(max-width:1000px){.hero-digital-hub::before{width:330px;height:300px}}
@media(max-width:760px){.hero-digital-hub::before{width:225px;height:205px}}


/* Circuit remains connected behind the logo; only the solid X naturally covers its centre. */
.hero-digital-hub::before{display:none!important}
.hub-circuit-svg{z-index:0!important}
.hub-x-logo{position:absolute!important;z-index:6!important}
.hub-orbit{z-index:7!important}


/* Compact centre junction cover: paths meet behind X, but no line is visible through its middle. */
.hero-digital-hub::before{display:block!important;content:"";position:absolute;left:50%;top:50%;z-index:2!important;width:138px!important;height:138px!important;transform:translate(-50%,-50%);background:#fff!important;border-radius:18px!important;filter:none!important;box-shadow:none!important}
.hub-x-logo{z-index:6!important}
/* Clarify the outgoing branch tree without making the full diagram heavy. */
.right-branch-nodes{display:block!important;opacity:.72!important}
.hub-static-circuit use{stroke-linecap:square}
@media(max-width:760px){.hero-digital-hub::before{width:88px!important;height:88px!important;border-radius:12px!important}.right-branch-nodes{opacity:.55!important}}


/* Full-viewport banner canvas; copy/hub stay within the original 1440px content rhythm. */
.hero{max-width:none!important;width:100%!important;margin-left:0!important;margin-right:0!important}
@media(min-width:1001px){
  .hero{padding-left:max(4.5vw,calc((100vw - 1440px)/2 + 64px))!important;padding-right:max(4.5vw,calc((100vw - 1440px)/2 + 64px))!important}
  .hub-circuit-svg{width:max(2600px,190vw)!important}
}


/* Precise, restrained logo response to each incoming node. */
.hub-x-logo{opacity:1;transition:opacity .34s ease,filter .34s ease!important}
.hub-x-logo.power-hit{animation:logoPowerImpact .42s ease-out 1!important}
@keyframes logoPowerImpact{0%{opacity:1;filter:drop-shadow(0 20px 34px rgba(35,52,137,.24))}18%{opacity:.42;filter:drop-shadow(0 0 18px rgba(63,194,201,.45))}100%{opacity:1;filter:drop-shadow(0 20px 34px rgba(35,52,137,.24))}}
.hub-travel-balls circle{opacity:.82!important}


/* Faster logo impact fade. */
.hub-x-logo{transition:opacity .16s ease,filter .16s ease!important}
.hub-x-logo.power-hit{animation:logoPowerImpactFast .24s ease-out 1!important}
@keyframes logoPowerImpactFast{0%{opacity:1}16%{opacity:.4;filter:drop-shadow(0 0 16px rgba(63,194,201,.48))}100%{opacity:1;filter:drop-shadow(0 20px 34px rgba(35,52,137,.24))}}


/* Full-path power nodes and pronounced stair-step outgoing branches. */
.hub-travel-balls circle{opacity:.86!important}
.hub-static-circuit,.hub-building-circuit{stroke-linejoin:miter!important}


/* ===== How We Work: full-bleed brand gradient section ===== */
#process{isolation:isolate;color:#fff;margin-top:28px;margin-bottom:28px}
#process::before{content:"";position:absolute;z-index:-2;top:0;bottom:0;left:50%;width:100vw;transform:translateX(-50%);background:linear-gradient(130deg,#202f83 0%,#2f57ac 46%,#2f91c3 74%,#3fc2c9 100%)}
#process::after{content:"";position:absolute;z-index:-1;inset:0;background:radial-gradient(circle at 12% 18%,rgba(255,255,255,.15),transparent 31%),radial-gradient(circle at 88% 78%,rgba(14,27,85,.22),transparent 34%);pointer-events:none}
#process .sec-head .kicker{color:#9df7f4}
#process .sec-head h2,#process .sec-head p{color:#fff}
#process .sec-head p{opacity:.76}
#process .grad-text{background:none;-webkit-text-fill-color:#9df7f4;color:#9df7f4}
#process .sec-head::before{display:none!important}
#process .process{gap:22px}
#process .step{background:rgba(255,255,255,.11);border:1px solid rgba(255,255,255,.2);box-shadow:0 18px 45px rgba(10,25,82,.16);backdrop-filter:blur(10px);color:#fff}
#process .step:hover{background:rgba(255,255,255,.17);border-color:rgba(255,255,255,.35);box-shadow:0 22px 50px rgba(10,25,82,.25)}
#process .step .num{background:none;-webkit-text-fill-color:#9df7f4;color:#9df7f4}
#process .step h3{color:#fff}
#process .step p{color:rgba(255,255,255,.72)}
#process .step-logo::before{background:rgba(255,255,255,.13)!important;border-color:rgba(255,255,255,.22)!important}

/* ===== Mobile order and sizing: copy first, animated hub second ===== */
@media(max-width:760px){
  .hero{display:grid!important;grid-template-columns:1fr!important;gap:22px!important;padding-top:86px!important}
  .hero-copy{order:1!important;text-align:left!important}
  .hero-stage{order:2!important;min-height:370px!important;margin-top:4px!important}
  .hero-copy h1{font-size:clamp(2rem,10vw,2.65rem)!important;line-height:1.08!important}
  .hero-copy p{font-size:.94rem!important;line-height:1.65!important}
  .hero-points li{font-size:.86rem!important}
  .hero-actions{gap:10px!important}.hero-actions .btn{padding:12px 17px!important;font-size:.83rem!important}
  #process{padding-top:72px!important;padding-bottom:72px!important;margin-top:12px;margin-bottom:12px}
  #process .step{padding:27px 22px!important}
}

/* ===== Compact responsive footer ===== */
@media(max-width:620px){
  #site-footer{padding:40px 20px 18px!important;margin-top:24px!important}
  .f-top{grid-template-columns:1fr 1fr!important;gap:26px 18px!important}
  .f-brand{grid-column:1 / -1!important}
  .f-contact{grid-column:1 / -1!important}
  #site-footer .brand img{height:34px!important}
  .f-brand p{font-size:.82rem!important;line-height:1.6!important;margin:13px 0 17px!important}
  .subscribe label{font-size:.66rem!important;margin-bottom:8px!important}
  .sub-row{padding:4px 4px 4px 14px!important}.sub-row input{font-size:.82rem!important}.sub-row button{width:36px!important;height:36px!important}
  .socials{margin-top:16px!important;gap:8px!important}.socials a{width:36px!important;height:36px!important;border-radius:10px!important}.socials a svg{width:16px!important;height:16px!important}
  .f-col h4{font-size:.68rem!important;letter-spacing:1.6px!important;margin-bottom:14px!important}
  .f-col a{font-size:.8rem!important;margin-bottom:9px!important}
  .f-contact .ct{margin-bottom:10px!important;gap:9px!important}.f-contact .ct.static{font-size:.8rem!important}.f-contact .ci{width:28px!important;height:28px!important}
  .f-badge{font-size:.72rem!important;padding:7px 12px!important;margin-top:4px!important}
  .f-word{font-size:clamp(2.25rem,15vw,3.2rem)!important;margin:24px 0 -4px!important}
  .f-bottom{font-size:.72rem!important;gap:8px!important;padding-top:15px!important;margin-top:10px!important}
  .f-legal{gap:12px!important}
  #site-footer .f-glow{transform:scale(.6)}
}
@media(max-width:380px){.f-top{grid-template-columns:1fr!important}.f-brand,.f-contact{grid-column:auto!important}}


/* ===== Refined How We Work section ===== */
#process{overflow:visible}
#process::before{
  background:
    radial-gradient(circle at 1px 1px,rgba(255,255,255,.13) 1.2px,transparent 1.3px) 0 0/18px 18px,
    linear-gradient(125deg,#26398d 0%,#315cad 48%,#318fc1 76%,#3bb8c2 100%)!important
}
#process::after{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  width:460px;height:460px;right:-90px;top:50%;transform:translateY(-50%);
  border-radius:50%;border:1px solid rgba(255,255,255,.22);
  box-shadow:0 0 0 54px rgba(255,255,255,.055),0 0 0 110px rgba(255,255,255,.035);
  background:radial-gradient(circle at center,rgba(255,255,255,.08),transparent 68%)
}
#process .sec-head{max-width:none!important;position:relative;z-index:2}
#process .sec-head h2{color:#fff!important;max-width:none!important;white-space:nowrap;font-size:clamp(2rem,3.25vw,3.25rem)}
#process .sec-head .grad-text{color:#fff!important;-webkit-text-fill-color:#fff!important}
#process .sec-head .kicker{color:#fff!important;border-color:rgba(255,255,255,.3);background:rgba(255,255,255,.1)}
#process .sec-head p{max-width:680px;color:rgba(255,255,255,.82)!important;font-size:.96rem;line-height:1.75;margin-top:15px}
#process .step-logo,#process body.split-mode .step-logo{background:#fff!important;border:1px solid rgba(255,255,255,.75)!important;box-shadow:0 9px 25px rgba(10,25,82,.2)!important;border-radius:15px!important;opacity:1!important}
#process .step-logo::before,#process .step-logo::after{display:none!important}
#process .step-logo img{width:39px!important;height:39px!important;object-fit:contain!important;filter:none!important}
@media(max-width:900px){#process .sec-head h2{white-space:normal!important;font-size:clamp(2rem,5.5vw,2.8rem)}#process::after{width:340px;height:340px;right:-130px}}
@media(max-width:760px){#process .sec-head p{font-size:.88rem;line-height:1.65;margin-top:12px}#process::after{width:270px;height:270px;right:-150px;top:28%}#process .step-logo img{width:30px!important;height:30px!important}}


/* Cleaner process label, brand-colour heading and expanding background rings. */
#process .sec-head .kicker{display:inline-block!important;width:auto!important;background:transparent!important;border:0!important;padding:0!important;box-shadow:none!important;color:#d8f7ff!important}
#process .sec-head h2{
  color:transparent!important;-webkit-text-fill-color:transparent!important;
  background:linear-gradient(100deg,#ffffff 0%,#b8caff 38%,#83dff0 72%,#b8fff9 100%)!important;
  -webkit-background-clip:text!important;background-clip:text!important
}
#process .sec-head h2 .grad-text{color:transparent!important;-webkit-text-fill-color:transparent!important;background:linear-gradient(100deg,#90b4ff,#7ef0f4)!important;-webkit-background-clip:text!important;background-clip:text!important}
#process::after{animation:processRingExpand 5.2s cubic-bezier(.2,.65,.28,1) infinite!important;transform-origin:center!important}
@keyframes processRingExpand{
  0%{transform:translateY(-50%) scale(.62);opacity:0}
  16%{opacity:.8}
  72%{opacity:.38}
  100%{transform:translateY(-50%) scale(1.28);opacity:0}
}
@media(prefers-reduced-motion:reduce){#process::after{animation:none!important;opacity:.45!important}}


/* =====================================================================
   MOBILE-FIRST FINAL RESPONSIVE PASS — phones and tablets
   ===================================================================== */
@media(max-width:1024px){
  html,body{width:100%;max-width:100%;overflow-x:hidden}
  nav{padding:12px 22px!important}
  .nav-inner{width:100%;max-width:none}
  .brand img{height:38px!important;max-width:180px}
  section{padding:88px 28px 76px!important}
  .sec-head{margin-bottom:38px!important}
  .sec-head h2{font-size:clamp(2rem,5vw,2.7rem)!important;line-height:1.13!important}
  .sec-head p{font-size:.95rem!important;line-height:1.7!important}
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:20px!important}
  .work-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:22px!important}
  .process{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:18px!important}
  .about-wrap{gap:44px!important}
  .blog-grid{gap:24px!important}
  .card,.step{min-width:0}
  #process .sec-head h2{white-space:normal!important}
}

@media(max-width:760px){
  :root{--radius:17px}
  nav{padding:10px 16px!important;background:rgba(255,255,255,.94)!important;backdrop-filter:blur(14px)}
  .brand img{height:34px!important;max-width:155px!important}
  .menu-btn{width:42px;height:42px;display:grid;place-items:center;font-size:1.35rem}
  .nav-links{top:64px!important;left:12px!important;right:12px!important;width:auto!important;border-radius:18px!important;padding:12px!important;box-shadow:0 20px 55px rgba(24,40,105,.18)!important}
  .nav-links a{padding:12px 13px!important;font-size:.9rem!important;border-radius:10px}

  .hero{display:grid!important;grid-template-columns:1fr!important;padding:82px 18px 46px!important;gap:18px!important;min-height:auto!important}
  .hero-copy{order:1!important;width:100%!important;transform:none!important}
  .hero-stage{order:2!important;width:100%!important;min-height:350px!important;height:350px!important;transform:none!important;margin:2px 0 0!important}
  .chip{font-size:.72rem!important;padding:7px 11px!important;margin-bottom:15px!important}
  .hero h1{max-width:none!important;font-size:clamp(2.15rem,10.5vw,3rem)!important;line-height:1.06!important;letter-spacing:-1.1px!important;margin-bottom:16px!important}
  .hero p{font-size:.93rem!important;line-height:1.64!important;margin-bottom:20px!important}
  .hero-points{grid-template-columns:1fr!important;gap:8px!important;margin-bottom:23px!important}
  .hero-points li{font-size:.84rem!important;white-space:normal!important}
  .hero-actions{display:grid!important;grid-template-columns:1fr 1fr!important;gap:9px!important;margin-bottom:0!important}
  .hero-actions .btn{width:100%;min-width:0;padding:12px 10px!important;font-size:.78rem!important;text-align:center;justify-content:center}
  .hero-copy::before{inset:-18px -10px!important;filter:blur(8px)!important}

  .hero-digital-hub{width:330px!important;max-width:100%!important;height:340px!important;margin:0 auto!important}
  .hub-x-logo{width:180px!important;height:180px!important}
  .orbit-a{width:232px!important;height:232px!important;margin:-116px 0 0 -116px!important}
  .orbit-b{width:292px!important;height:292px!important;margin:-146px 0 0 -146px!important}
  .hub-orbit span{font-size:.42rem!important;padding:5px 7px!important;letter-spacing:.35px!important;border-radius:7px!important}
  .hub-circuit-svg{width:1300px!important;height:650px!important;opacity:.34!important}
  .hub-static-circuit use:nth-child(n+7){display:none}
  .hub-building-circuit use:nth-child(n+4){display:none}
  .hub-travel-balls circle:nth-child(n+7){display:none}

  section{padding:68px 18px 60px!important;width:100%!important;max-width:none!important}
  .sec-head{margin-bottom:30px!important}
  .sec-head h2{font-size:clamp(1.8rem,8.5vw,2.35rem)!important;line-height:1.12!important;letter-spacing:-.6px!important}
  .sec-head p{font-size:.9rem!important;line-height:1.65!important;margin-top:11px!important}
  .kicker{font-size:.69rem!important;letter-spacing:2px!important;margin-bottom:10px!important}

  .cards,.work-grid,.process,.blog-grid{grid-template-columns:1fr!important;gap:15px!important}
  #services .card{padding:25px 70px 25px 21px!important}
  .card .ico{width:48px!important;height:48px!important;border-radius:13px!important;margin-bottom:17px!important}
  .card h3{font-size:1.08rem!important;margin-bottom:8px!important}.card p{font-size:.87rem!important;line-height:1.62!important}
  .card .card-logo,body.split-services .card-logo{height:100%!important}

  .filters{display:flex!important;flex-wrap:nowrap!important;overflow-x:auto!important;gap:8px!important;margin:-12px -18px 25px!important;padding:0 18px 6px!important;scrollbar-width:none}
  .filters::-webkit-scrollbar{display:none}.filter{flex:0 0 auto;padding:9px 15px!important;font-size:.78rem!important}
  .work-grid{grid-template-columns:1fr!important}.work-card .thumb{aspect-ratio:16/10!important}.work-card .meta{padding:18px!important}.work-card .meta h3{font-size:1rem!important}

  #process{padding-top:65px!important;padding-bottom:65px!important}
  #process .sec-head h2{font-size:clamp(1.85rem,8vw,2.25rem)!important;white-space:normal!important}
  #process .sec-head p{max-width:34rem!important}
  #process .process{grid-template-columns:1fr!important;gap:13px!important}
  #process .step{padding:25px 68px 24px 21px!important;min-height:0!important}
  #process .step .num{font-size:1.8rem!important;margin-bottom:8px!important}
  #process .step h3{font-size:1rem!important;margin-bottom:7px!important}
  #process .step p{font-size:.84rem!important;line-height:1.58!important}
  #process .step-logo{right:15px!important;top:15px!important;width:44px!important;height:44px!important}
  #process .step-logo img{width:29px!important;height:29px!important}
  #process::after{right:-170px!important;opacity:.6}

  #testimonials{padding-left:0!important;padding-right:0!important}
  #testimonials .sec-head{padding:0 18px!important}
  .marquee{padding:0 0 8px!important;overflow-x:auto!important;scroll-snap-type:x proximity}
  .track,.track.rev{gap:12px!important;padding:0 18px!important}
  .track .tcard{width:min(84vw,330px)!important;min-width:min(84vw,330px)!important;padding:22px!important;scroll-snap-align:center}
  .tcard p{font-size:.87rem!important;line-height:1.62!important}

  .about-wrap{grid-template-columns:1fr!important;gap:28px!important}
  .about-premium-art{order:1;width:min(100%,390px)!important;height:390px!important;margin:0 auto!important;padding:16px 16px 46px!important}
  .about-txt{order:2!important}.about-txt h2{font-size:clamp(1.9rem,8.5vw,2.35rem)!important}.about-txt p{font-size:.9rem!important;line-height:1.67!important}
  .ticks{grid-template-columns:1fr!important;gap:9px!important}.tick{font-size:.85rem!important}

  .blog-grid{display:grid!important}.main-post,.side-posts{min-width:0!important}.post.row{display:grid!important;grid-template-columns:110px 1fr!important}.post.row .pic{height:100%!important;min-height:128px}.post .body,.post.row .body{padding:17px!important}.post h3{font-size:1.05rem!important}.post p{font-size:.84rem!important}

  .cta-band{padding:30px 20px!important;border-radius:18px!important;display:grid!important;gap:18px!important;text-align:left!important}.cta-band h2{font-size:1.65rem!important;line-height:1.15!important}.cta-band p{font-size:.88rem!important}.cta-band .btn{width:100%!important;text-align:center!important;justify-content:center!important}

  #site-footer{padding:36px 18px 16px!important}
  .f-top{grid-template-columns:1fr 1fr!important;gap:24px 16px!important}.f-brand,.f-contact{grid-column:1/-1!important}
  .f-word{font-size:clamp(2.15rem,14vw,3.1rem)!important;margin:20px 0 0!important}
  .f-bottom{align-items:flex-start!important;font-size:.7rem!important}.f-legal{gap:10px!important}
}

@media(max-width:390px){
  .hero{padding-left:15px!important;padding-right:15px!important}
  .hero-actions{grid-template-columns:1fr!important}
  .hero-stage{height:320px!important;min-height:320px!important}
  .hero-digital-hub{width:290px!important;height:315px!important}
  .hub-x-logo{width:158px!important;height:158px!important}
  .orbit-a{width:205px!important;height:205px!important;margin:-102px 0 0 -102px!important}.orbit-b{width:260px!important;height:260px!important;margin:-130px 0 0 -130px!important}
  section{padding-left:15px!important;padding-right:15px!important}
  .post.row{grid-template-columns:92px 1fr!important}
  .f-top{grid-template-columns:1fr!important}.f-brand,.f-contact{grid-column:auto!important}
}


/* Match the featured blog card height to the three compact cards. */
@media(min-width:1001px){
  .blog-grid{align-items:stretch!important}
  .blog-grid>.post{height:100%!important}
  .blog-grid>.post>.pic{aspect-ratio:auto!important;height:clamp(285px,22vw,330px)!important}
  .blog-grid>.post>.body{padding:22px 28px 24px!important;gap:10px!important}
  .side-posts{height:100%!important;grid-template-rows:repeat(3,minmax(0,1fr))!important;gap:20px!important}
  .side-posts .post.row{height:100%!important;min-height:0!important}
}


/* Persistent navigation while scrolling. */
body>nav#nav{position:fixed!important;top:0!important;left:0!important;right:0!important;width:100%!important;z-index:9990!important}


/* Tighter spacing above and below the About Frequenx section. */
#about{padding-top:82px!important;padding-bottom:76px!important}
@media(max-width:1024px){#about{padding-top:68px!important;padding-bottom:62px!important}}
@media(max-width:760px){#about{padding-top:52px!important;padding-bottom:48px!important}}


/* ===== Requested temporary state: testimonials retained in code, hidden in UI ===== */
#testimonials{display:none!important}

/* ===== Banner circuits meet the outer rings, not the central X ===== */
.hub-static-circuit use:nth-child(4),.hub-static-circuit use:nth-child(5),
.hub-building-circuit use:nth-child(4),.hub-building-circuit use:nth-child(5),
.hub-travel-balls circle:nth-child(4),.hub-travel-balls circle:nth-child(5){display:none!important}
.right-branch-nodes{opacity:.5!important}

/* ===== Complete, low-opacity service marks ===== */
.card .card-logo,.card:hover .card-logo,body.split-services .card-logo{
  top:50%!important;right:12px!important;bottom:auto!important;width:108px!important;height:82%!important;
  transform:translateY(-50%)!important;clip-path:none!important;opacity:1!important;overflow:visible!important
}
.card .card-logo img,.card:hover .card-logo img,body.split-services .card-logo img{width:100%!important;height:100%!important;object-fit:contain!important;opacity:.10!important}
.card:hover .card-logo img{opacity:.16!important}

/* ===== Tablet sliders: two cards with a next-card cue ===== */
@media(max-width:1024px){
  .cards,.work-grid,.blog-grid{
    display:flex!important;grid-template-columns:none!important;gap:16px!important;overflow-x:auto!important;
    scroll-snap-type:x mandatory!important;scroll-padding:28px;padding:4px 28px 20px!important;
    margin-left:-28px!important;margin-right:-28px!important;scrollbar-width:none;-webkit-overflow-scrolling:touch
  }
  .cards::-webkit-scrollbar,.work-grid::-webkit-scrollbar,.blog-grid::-webkit-scrollbar{display:none}
  .cards>.card,.work-grid>.work-card,.blog-grid>.post,.blog-grid>.side-posts>.post{
    flex:0 0 calc(48% - 8px)!important;width:calc(48% - 8px)!important;scroll-snap-align:start!important
  }
  .blog-grid>.side-posts{display:contents!important}
  .blog-grid .post,.blog-grid .post.row{display:flex!important;flex-direction:column!important;min-height:420px!important}
  .blog-grid .post .pic,.blog-grid .post.row .pic{width:100%!important;height:auto!important;min-height:0!important;aspect-ratio:16/10!important}
  .blog-grid .post .body{flex:1!important}
}

/* ===== Phone sliders: 82% current card + a clear next-card peek ===== */
@media(max-width:760px){
  .cards,.work-grid,.blog-grid{gap:12px!important;padding:4px 18px 18px!important;margin-left:-18px!important;margin-right:-18px!important;scroll-padding:18px}
  .cards>.card,.work-grid>.work-card,.blog-grid>.post,.blog-grid>.side-posts>.post{
    flex:0 0 82%!important;width:82%!important;max-width:330px!important;scroll-snap-align:start!important
  }
  .cards>.card{padding:24px 66px 24px 20px!important}
  .card .card-logo,body.split-services .card-logo{right:8px!important;width:92px!important;height:78%!important}
  .blog-grid .post,.blog-grid .post.row{min-height:390px!important}
  .blog-grid .post.row .pic{aspect-ratio:16/10!important}
}


/* Shared orbit entry/exit points are highlighted subtly. */
.hub-orbit.orbit-a::after{content:"";position:absolute;left:-4px;top:50%;width:8px;height:8px;border-radius:50%;background:#8190a6;box-shadow:420px 0 0 #8190a6;transform:translateY(-50%)}

/* Process joins the touch-slider system on tablets and phones. */
.slider-controls{display:none}
@media(max-width:1024px){
  #process .process{display:flex!important;grid-template-columns:none!important;gap:16px!important;overflow-x:auto!important;scroll-snap-type:x mandatory!important;scroll-padding:28px;padding:4px 28px 20px!important;margin-left:-28px!important;margin-right:-28px!important;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  #process .process::-webkit-scrollbar{display:none}
  #process .process>.step{flex:0 0 calc(48% - 8px)!important;width:calc(48% - 8px)!important;scroll-snap-align:start!important}
  .slider-controls{display:flex;align-items:center;justify-content:center;gap:12px;margin:4px 0 8px}
  .slider-controls button{width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--blue);font-size:1.1rem;cursor:pointer;box-shadow:0 8px 22px rgba(31,52,130,.11);display:grid;place-items:center}
  .slider-controls button:active{transform:scale(.94)}
  .slider-status{min-width:46px;text-align:center;font-size:.74rem;font-weight:700;color:var(--muted)}
  #process .slider-controls button{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.28);color:#fff;box-shadow:none}
  #process .slider-status{color:rgba(255,255,255,.78)}
}
@media(max-width:760px){
  #process .process{gap:12px!important;padding:4px 18px 18px!important;margin-left:-18px!important;margin-right:-18px!important;scroll-padding:18px}
  #process .process>.step{flex:0 0 82%!important;width:82%!important;max-width:330px!important}
  .slider-controls{margin-top:2px;gap:10px}.slider-controls button{width:40px;height:40px}
}


/* Lock circuit coordinates to the hub itself so ring contact stays exact at every screen width. */
.hub-circuit-svg{
  left:0!important;top:0!important;width:100%!important;height:100%!important;
  transform:none!important;overflow:visible!important;opacity:.42!important
}
/* Distinguish each outgoing route as its own staircase branch. */
.hub-static-circuit,.hub-building-circuit{stroke-linejoin:miter!important;stroke-linecap:square!important}
@media(max-width:1024px){.hub-circuit-svg{width:100%!important;height:100%!important}}
@media(max-width:760px){.hub-circuit-svg{width:100%!important;height:100%!important;opacity:.34!important}}


/* Ring-safe circuit terminals: remain outside the first orbit at all zoom levels. */
.hub-orbit.orbit-a::after{left:-4px!important;box-shadow:420px 0 0 #8190a6!important}


/* Outer-orbit circuit terminals — hub and orbit scale from one coordinate ratio. */
.hub-orbit.orbit-a::after{display:none!important}
.hub-orbit.orbit-b::after{display:none!important}
@media(min-width:1201px){.hero-digital-hub{width:620px!important}.orbit-b{width:510px!important;height:510px!important;margin:-255px 0 0 -255px!important}}
@media(min-width:1001px) and (max-width:1200px){.hero-digital-hub{width:560px!important}.orbit-b{width:455px!important;height:455px!important;margin:-227.5px 0 0 -227.5px!important}}
@media(min-width:761px) and (max-width:1000px){.hero-digital-hub{width:520px!important}.orbit-b{width:430px!important;height:430px!important;margin:-215px 0 0 -215px!important}}
@media(min-width:391px) and (max-width:760px){.hero-digital-hub{width:330px!important}.orbit-b{width:272px!important;height:272px!important;margin:-136px 0 0 -136px!important}}
@media(max-width:390px){.hero-digital-hub{width:290px!important}.orbit-b{width:238px!important;height:238px!important;margin:-119px 0 0 -119px!important}}


/* Hard outer-orbit mask: no circuit stroke or power node can ever render inside the outer circle. */
.hero-digital-hub::before{
  display:block!important;content:""!important;position:absolute!important;left:50%!important;top:50%!important;
  z-index:2!important;transform:translate(-50%,-50%)!important;border-radius:50%!important;
  background:#fff!important;filter:none!important;box-shadow:none!important;pointer-events:none!important
}
@media(min-width:1201px){.hero-digital-hub::before{width:506px!important;height:506px!important}}
@media(min-width:1001px) and (max-width:1200px){.hero-digital-hub::before{width:451px!important;height:451px!important}}
@media(min-width:761px) and (max-width:1000px){.hero-digital-hub::before{width:426px!important;height:426px!important}}
@media(min-width:391px) and (max-width:760px){.hero-digital-hub::before{width:268px!important;height:268px!important}}
@media(max-width:390px){.hero-digital-hub::before{width:234px!important;height:234px!important}}
.hub-circuit-svg{z-index:0!important}.hub-orbit{z-index:7!important}.hub-x-logo{z-index:6!important}


/* Keep the single shared trunk visually above the converging branch entries. */
.main-power-trunks{pointer-events:none}
.main-power-trunks .trunk-clear{stroke:#fff;stroke-width:6;opacity:1}
.main-power-trunks .trunk-line{stroke:#8f9bad;stroke-width:1.35;opacity:.72}


/* One clean entry main line; upper/lower diagram routes remain behind its start point. */
.single-entry-main{opacity:.58;stroke-linecap:square;pointer-events:none}


/* Intentional terminal nodes for shortened decorative circuit routes. */
.left-terminal-nodes{opacity:.68;filter:drop-shadow(0 0 3px rgba(111,130,160,.18))}


/* Remove the shortened decorative routes completely. */
.hub-static-circuit use:nth-child(2),.hub-static-circuit use:nth-child(3),
.hub-static-circuit use:nth-child(7),.hub-static-circuit use:nth-child(8),
.hub-static-circuit use:nth-child(9),.hub-static-circuit use:nth-child(10),
.hub-building-circuit use:nth-child(2),.hub-building-circuit use:nth-child(3),
.hub-travel-balls circle:nth-child(2),.hub-travel-balls circle:nth-child(3),
.hub-travel-balls circle:nth-child(7),.hub-travel-balls circle:nth-child(8),
.hub-travel-balls circle:nth-child(9),.hub-travel-balls circle:nth-child(10){display:none!important}


/* Professional symmetric entry/exit network replaces the accumulated experimental routes. */
.hub-static-circuit,.hub-building-circuit,.hub-travel-balls,.right-branch-nodes{display:none!important}
.professional-network{opacity:.42}
.professional-network .network-bus{stroke:#909caf;stroke-width:1.25;opacity:.72}
.professional-nodes{opacity:.68}
.professional-balls{opacity:.86}
@media(max-width:760px){.professional-network{opacity:.3}.professional-nodes{opacity:.5}.professional-balls{opacity:.72}}


/* Keep the circuit artwork in the banner margins, never underneath readable copy. */
.hero-copy{position:relative;z-index:4!important}
.hero-copy::before{
  display:block!important;content:""!important;position:absolute!important;z-index:-1!important;
  inset:-34px -44px -34px -34px!important;border-radius:34px!important;
  background:radial-gradient(ellipse at 43% 50%,#fff 0%,#fff 66%,rgba(255,255,255,.97) 76%,rgba(255,255,255,.74) 86%,rgba(255,255,255,0) 100%)!important;
  filter:blur(5px)!important;pointer-events:none!important
}
@media(max-width:760px){.hero-copy::before{inset:-18px -12px!important;border-radius:22px!important;background:radial-gradient(ellipse at center,#fff 0%,#fff 72%,rgba(255,255,255,.85) 88%,rgba(255,255,255,0) 100%)!important}}


/* Rollback: restore the banner state from before the last five edits. */
.professional-network,.professional-nodes,.professional-balls{display:none!important}
.hub-static-circuit,.hub-building-circuit,.hub-travel-balls,.right-branch-nodes{display:block!important}
.hub-static-circuit use,.hub-building-circuit use,.hub-travel-balls circle{display:block!important}
.hub-static-circuit use:nth-child(4),.hub-static-circuit use:nth-child(5),
.hub-building-circuit use:nth-child(4),.hub-building-circuit use:nth-child(5),
.hub-travel-balls circle:nth-child(4),.hub-travel-balls circle:nth-child(5){display:none!important}
.hero-copy::before{
  inset:-52px -80px -48px -55px!important;border-radius:46px!important;
  background:radial-gradient(ellipse at 42% 50%,rgba(255,255,255,.94) 0%,rgba(255,255,255,.86) 48%,rgba(255,255,255,.58) 68%,rgba(255,255,255,.16) 84%,rgba(255,255,255,0) 100%)!important;
  filter:blur(9px)!important
}
@media(max-width:760px){.hero-copy::before{inset:-25px -18px!important;background:radial-gradient(ellipse at center,rgba(255,255,255,.95),rgba(255,255,255,.78) 58%,rgba(255,255,255,0) 100%)!important}}


/* Complete rollback visibility: restore every non-removed diagram route. */
.hub-static-circuit use:nth-child(1),.hub-static-circuit use:nth-child(2),.hub-static-circuit use:nth-child(3),
.hub-static-circuit use:nth-child(6),.hub-static-circuit use:nth-child(7),.hub-static-circuit use:nth-child(8),
.hub-static-circuit use:nth-child(9),.hub-static-circuit use:nth-child(10),
.hub-building-circuit use:nth-child(1),.hub-building-circuit use:nth-child(2),.hub-building-circuit use:nth-child(3),
.hub-travel-balls circle:nth-child(1),.hub-travel-balls circle:nth-child(2),.hub-travel-balls circle:nth-child(3),
.hub-travel-balls circle:nth-child(6),.hub-travel-balls circle:nth-child(7),.hub-travel-balls circle:nth-child(8),
.hub-travel-balls circle:nth-child(9),.hub-travel-balls circle:nth-child(10){display:block!important}


/* Stronger circuit visibility outside the copy; content area keeps its soft fade. */
.hub-circuit-svg{opacity:.58!important}
.hub-static-circuit use{opacity:.5!important;stroke:#98a4b5!important}
.hub-building-circuit use{opacity:.78!important;stroke:#78869b!important}
.hub-travel-balls{opacity:.94!important}
@media(max-width:760px){.hub-circuit-svg{opacity:.44!important}.hub-static-circuit use{opacity:.42!important}}


/* Diagram remains visible beneath copy at low intensity; outside routes stay stronger. */
.hub-circuit-svg{opacity:.68!important}
.hub-static-circuit use{opacity:.58!important;stroke:#929eaf!important}
.hub-building-circuit use{opacity:.86!important;stroke:#718097!important}
.hub-travel-balls{opacity:.96!important}
.hero-copy::before{
  background:radial-gradient(ellipse at 42% 50%,rgba(255,255,255,.76) 0%,rgba(255,255,255,.66) 48%,rgba(255,255,255,.38) 69%,rgba(255,255,255,.10) 86%,rgba(255,255,255,0) 100%)!important;
  filter:blur(8px)!important
}
@media(max-width:760px){
  .hub-circuit-svg{opacity:.5!important}.hub-static-circuit use{opacity:.46!important}
  .hero-copy::before{background:radial-gradient(ellipse at center,rgba(255,255,255,.82),rgba(255,255,255,.6) 58%,rgba(255,255,255,0) 100%)!important}
}


/* Keep banner circuits out of the navigation/header area. */
body>nav#nav{background:rgba(255,255,255,.97)!important;backdrop-filter:blur(14px)!important;-webkit-backdrop-filter:blur(14px)!important}


/* Full-height service watermark, flush with the card's right edge. */
#services .card{overflow:hidden!important;padding-right:clamp(82px,25%,122px)!important}
.card .card-logo,.card:hover .card-logo,body.split-services .card-logo{
  top:0!important;right:0!important;bottom:0!important;left:auto!important;
  width:auto!important;height:100%!important;aspect-ratio:946/722!important;
  transform:none!important;clip-path:none!important;opacity:1!important
}
.card .card-logo img,.card:hover .card-logo img,body.split-services .card-logo img{
  width:100%!important;height:100%!important;object-fit:contain!important;object-position:right center!important;opacity:.09!important
}
.card:hover .card-logo img{opacity:.14!important}
@media(max-width:760px){#services .card{padding-right:72px!important}.card .card-logo,body.split-services .card-logo{top:0!important;right:0!important;height:100%!important;width:auto!important}}


/* Preserve the service mark's natural ratio and pin it to the right edge. */
.card .card-logo,.card:hover .card-logo,body.split-services .card-logo{display:block!important;place-items:unset!important}
.card .card-logo img,.card:hover .card-logo img,body.split-services .card-logo img{
  position:absolute!important;top:0!important;right:0!important;bottom:0!important;left:auto!important;
  width:auto!important;height:100%!important;max-width:none!important;object-fit:unset!important;
  object-position:unset!important;display:block!important
}


/* Softer service-card watermark. */
.card .card-logo img,body.split-services .card-logo img{opacity:.055!important}
.card:hover .card-logo img{opacity:.09!important}


/* Extra-subtle service-card watermark. */
.card .card-logo img,body.split-services .card-logo img{opacity:.035!important}
.card:hover .card-logo img{opacity:.06!important}


/* =====================================================================
   MOBILE UX CORRECTION — full cards, side arrows, tighter typography/space
   ===================================================================== */
@media(max-width:1024px){
  .slider-shell{position:relative;width:100%;min-width:0}
  .slider-shell>.cards,.slider-shell>.work-grid,.slider-shell>.process,.slider-shell>.blog-grid{margin-left:0!important;margin-right:0!important;padding-left:0!important;padding-right:0!important}
  .slider-controls{position:absolute!important;z-index:20!important;left:-14px!important;right:-14px!important;top:50%!important;transform:translateY(-50%)!important;height:0!important;margin:0!important;display:flex!important;justify-content:space-between!important;pointer-events:none!important}
  .slider-controls button{pointer-events:auto!important;width:40px!important;height:40px!important;background:rgba(255,255,255,.96)!important;color:var(--blue)!important;border:1px solid rgba(47,63,163,.14)!important;box-shadow:0 8px 24px rgba(25,44,115,.18)!important}
  .slider-status{display:none!important}
  .cards>.card,.work-grid>.work-card,.blog-grid>.post,.blog-grid>.side-posts>.post,#process .process>.step{flex:0 0 100%!important;width:100%!important;max-width:none!important}
  .cards,.work-grid,.blog-grid,#process .process{scroll-padding:0!important;gap:14px!important}
}
@media(max-width:760px){
  /* type scale */
  .hero h1{font-size:clamp(1.95rem,9.3vw,2.5rem)!important;line-height:1.08!important}
  .hero p{font-size:.88rem!important;line-height:1.58!important}
  section{padding-top:48px!important;padding-bottom:44px!important}
  .sec-head{margin-bottom:24px!important}
  .sec-head h2{font-size:clamp(1.55rem,7.2vw,1.95rem)!important;line-height:1.15!important;letter-spacing:-.4px!important}
  .sec-head p{font-size:.84rem!important;line-height:1.58!important}
  .kicker{font-size:.64rem!important;letter-spacing:1.7px!important}

  /* full-width sliders with arrows at left/right */
  .slider-shell{overflow:visible!important}
  .slider-shell>.cards,.slider-shell>.work-grid,.slider-shell>.process,.slider-shell>.blog-grid{padding:2px 0 12px!important;margin:0!important;gap:10px!important;background:transparent!important}
  .cards>.card,.work-grid>.work-card,.blog-grid>.post,.blog-grid>.side-posts>.post,#process .process>.step{flex-basis:100%!important;width:100%!important;max-width:none!important;scroll-snap-align:center!important}
  .slider-controls{left:-10px!important;right:-10px!important}
  .slider-controls button{width:38px!important;height:38px!important;font-size:1rem!important}

  /* remove excessive section heights and blank gaps */
  #services,#work,#process,#about,#blog,#contact{min-height:0!important;margin-top:0!important;margin-bottom:0!important}
  #process{padding-top:52px!important;padding-bottom:52px!important}
  .about-wrap{min-height:0!important;height:auto!important;gap:22px!important}
  .about-premium-art{height:300px!important;min-height:0!important;margin-bottom:0!important}
  .about-txt{min-height:0!important;padding-bottom:0!important}
  .about-txt p{margin-bottom:12px!important}
  .ticks{grid-template-columns:1fr 1fr!important;gap:8px 10px!important;margin-top:17px!important}
  .tick{font-size:.76rem!important;gap:7px!important;min-width:0}.tick .t{width:22px!important;height:22px!important;flex:0 0 22px!important}
  #about{padding-top:46px!important;padding-bottom:42px!important}

  /* card typography and clean surrounding background */
  .card,.work-card,.step,.post{background:#fff!important}
  .card h3,.step h3{font-size:1rem!important}.card p,.step p{font-size:.82rem!important}
  .work-card .meta{padding:16px!important}.work-card .meta h3{font-size:.95rem!important}
  .blog-grid .post,.blog-grid .post.row{min-height:0!important;height:auto!important}
  .blog-grid .post .body{min-height:180px!important}
  .blog-grid .post .pic{aspect-ratio:16/9!important}

  /* prevent back-to-top button covering About checklist */
  #toTop{width:38px!important;height:38px!important;right:12px!important;bottom:12px!important}
}
@media(max-width:390px){
  .ticks{grid-template-columns:1fr!important}.about-premium-art{height:270px!important}
  .slider-controls{left:-7px!important;right:-7px!important}
}


/* =====================================================================
   PHONE LAYOUT REPAIR — compact type, visible process content, safe arrows
   ===================================================================== */
@media(max-width:760px){
  body{font-size:14px}
  .hero{padding:76px 16px 36px!important}
  .hero h1{font-size:clamp(1.72rem,7.8vw,2.05rem)!important;line-height:1.08!important;letter-spacing:-.65px!important;margin-bottom:14px!important}
  .hero p{font-size:.84rem!important;line-height:1.55!important}
  .chip{font-size:.66rem!important}
  .hero-points{gap:7px!important}.hero-points li{font-size:.79rem!important}

  section{padding:38px 16px 36px!important}
  .sec-head{margin-bottom:21px!important;text-align:left!important}
  .sec-head h2,#process .sec-head h2{font-size:clamp(1.42rem,6.4vw,1.7rem)!important;line-height:1.13!important;letter-spacing:-.3px!important;max-width:18ch!important}
  .sec-head p,#process .sec-head p{font-size:.8rem!important;line-height:1.55!important}
  .kicker{font-size:.61rem!important;letter-spacing:1.5px!important}

  /* Arrow buttons remain at the edges and never sit over card copy. */
  .slider-controls{left:-5px!important;right:-5px!important}
  .slider-controls button{width:32px!important;height:32px!important;font-size:.88rem!important;border-width:1px!important}
  .slider-shell .card{padding-left:48px!important;padding-right:74px!important}
  .slider-shell .work-card .meta{padding-left:44px!important;padding-right:44px!important}
  .slider-shell .post .body{padding-left:44px!important;padding-right:44px!important}

  /* Services card alignment. */
  #services .card{min-height:235px!important;padding-top:22px!important;padding-bottom:22px!important}
  #services .card .ico{width:44px!important;height:44px!important;margin-bottom:14px!important}
  #services .card h3{font-size:.98rem!important;line-height:1.25!important;margin-bottom:7px!important}
  #services .card p{font-size:.79rem!important;line-height:1.5!important}

  /* Process cards: retain glass colour and make all text visible. */
  #process{padding-top:44px!important;padding-bottom:44px!important}
  #process .process>.step{min-height:245px!important;height:auto!important;padding:26px 58px 24px 22px!important;background:rgba(255,255,255,.14)!important;border-color:rgba(255,255,255,.26)!important;color:#fff!important}
  #process .step .num{font-size:1.75rem!important;color:#9df7f4!important;-webkit-text-fill-color:#9df7f4!important;margin-bottom:15px!important}
  #process .step h3{display:block!important;opacity:1!important;color:#fff!important;font-size:1rem!important;line-height:1.25!important;margin-bottom:9px!important}
  #process .step p{display:block!important;opacity:1!important;color:rgba(255,255,255,.8)!important;font-size:.8rem!important;line-height:1.55!important}
  #process .step-logo{width:43px!important;height:43px!important}

  /* About/checklist: no large empty tail. */
  #about{padding-top:36px!important;padding-bottom:32px!important}
  .about-wrap{gap:18px!important;min-height:0!important}
  .about-premium-art{height:260px!important;padding-bottom:38px!important}
  .about-txt p{font-size:.82rem!important;line-height:1.58!important}
  .ticks{margin:14px 0 0!important;gap:7px 8px!important}
  .tick{font-size:.72rem!important;line-height:1.25!important}

  /* Blog: compact heading/cards and no oversized blank gaps. */
  #blog{padding-top:36px!important;padding-bottom:38px!important}
  #blog .sec-head{margin-bottom:20px!important}
  .blog-grid .post,.blog-grid .post.row{min-height:0!important}
  .blog-grid .post .body{min-height:160px!important;padding-top:17px!important;padding-bottom:18px!important}
  .post h3{font-size:.94rem!important;line-height:1.35!important}.post p{font-size:.78rem!important;line-height:1.55!important}
  .readmore{font-size:.78rem!important}
}
@media(max-width:390px){
  .hero h1{font-size:1.68rem!important}
  .sec-head h2,#process .sec-head h2{font-size:1.38rem!important}
  .slider-shell .card{padding-left:43px!important;padding-right:68px!important}
  .slider-shell .work-card .meta,.slider-shell .post .body{padding-left:39px!important;padding-right:39px!important}
}


/* Services slider controls return below the cards with the slide number centred. */
@media(max-width:1024px){
  #services .slider-controls{position:static!important;left:auto!important;right:auto!important;top:auto!important;transform:none!important;height:auto!important;margin:8px 0 2px!important;display:flex!important;justify-content:center!important;align-items:center!important;gap:12px!important;pointer-events:auto!important}
  #services .slider-controls button{width:40px!important;height:40px!important}
  #services .slider-status{display:block!important;min-width:48px!important;text-align:center!important;font-size:.74rem!important;font-weight:700!important;color:var(--muted)!important}
}


/* Process arrows sit outside the 01–04 cards, never over their copy. */
@media(max-width:1024px){
  #process .slider-shell>.process{width:calc(100% - 48px)!important;margin-left:auto!important;margin-right:auto!important}
  #process .slider-controls{left:0!important;right:0!important}
  #process .process>.step{padding-left:24px!important;padding-right:60px!important}
}
/* Consistent blog slider cards: unique images, equal media and complete copy. */
@media(max-width:1024px){
  #blog .blog-grid>.post,#blog .blog-grid>.side-posts>.post{min-height:440px!important;height:auto!important}
  #blog .blog-grid .post .pic,#blog .blog-grid .post.row .pic{width:100%!important;height:auto!important;aspect-ratio:16/9!important;flex:0 0 auto!important}
  #blog .blog-grid .post .pic img{width:100%!important;height:100%!important;object-fit:cover!important}
  #blog .blog-grid .post .body,#blog .blog-grid .post.row .body{min-height:215px!important;padding:20px 44px!important;display:flex!important;flex-direction:column!important;gap:9px!important}
  #blog .blog-grid .post h3{font-size:1rem!important;line-height:1.35!important}
  #blog .blog-grid .post p{display:block!important;font-size:.8rem!important;line-height:1.55!important;color:var(--muted)!important}
  #blog .blog-grid .readmore{margin-top:auto!important}
}
@media(max-width:760px){
  #process .slider-shell>.process{width:calc(100% - 42px)!important}
  #process .slider-controls{left:-1px!important;right:-1px!important}
  #blog .blog-grid>.post,#blog .blog-grid>.side-posts>.post{min-height:400px!important}
  #blog .blog-grid .post .body,#blog .blog-grid .post.row .body{min-height:205px!important;padding:17px 40px 18px!important}
}


/* How We Work slider controls below the 01–04 cards. */
@media(max-width:1024px){
  #process .slider-shell>.process{width:100%!important;margin-left:0!important;margin-right:0!important}
  #process .slider-controls{position:static!important;left:auto!important;right:auto!important;top:auto!important;transform:none!important;height:auto!important;margin:9px 0 2px!important;display:flex!important;justify-content:center!important;align-items:center!important;gap:12px!important;pointer-events:auto!important}
  #process .slider-controls button{width:40px!important;height:40px!important;background:rgba(255,255,255,.14)!important;border-color:rgba(255,255,255,.3)!important;color:#fff!important;box-shadow:none!important}
  #process .slider-status{display:block!important;min-width:48px!important;text-align:center!important;font-size:.74rem!important;font-weight:700!important;color:rgba(255,255,255,.82)!important}
}


/* Restore full-width How We Work cards. */
@media(max-width:1024px){#process .process>.step{flex:0 0 100%!important;width:100%!important;max-width:none!important;margin:0!important}}


/* Mobile hero benefits in two compact columns. */
@media(max-width:760px){
  .hero-points{grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:10px!important;row-gap:8px!important}
  .hero-points li{font-size:.7rem!important;line-height:1.3!important;gap:6px!important;align-items:flex-start!important}
  .hero-points .tk{width:19px!important;height:19px!important;min-width:19px!important;font-size:.68rem!important}
}


/* Remove the coloured/shadow panel beneath slider cards on phones. */
@media(max-width:760px){
  .slider-shell,.slider-shell>.cards,.slider-shell>.work-grid,.slider-shell>.process,.slider-shell>.blog-grid{background:transparent!important;box-shadow:none!important}
  .slider-shell .card,.slider-shell .work-card,.slider-shell .step,.slider-shell .post{box-shadow:none!important;filter:none!important}
  .slider-shell .card::before,.slider-shell .card::after,
  .slider-shell .work-card::before,.slider-shell .work-card::after,
  .slider-shell .step::before,.slider-shell .step::after,
  .slider-shell .post::before,.slider-shell .post::after{display:none!important}
}


/* Restore a clean card boundary without the old coloured under-panel. */
@media(max-width:760px){
  .slider-shell .card,.slider-shell .work-card,.slider-shell .post{
    border:1px solid #e3e8f1!important;
    box-shadow:0 8px 22px rgba(31,52,130,.10)!important;
    border-radius:17px!important
  }
  #process .slider-shell .step{
    border:1px solid rgba(255,255,255,.3)!important;
    box-shadow:0 9px 24px rgba(12,27,87,.16)!important;
  }
}


/* Align the How We Work heading block with the mobile card edge. */
@media(max-width:760px){
  #process .sec-head{margin-left:18px!important;margin-right:18px!important;width:auto!important}
}
@media(max-width:390px){#process .sec-head{margin-left:16px!important;margin-right:16px!important}}


/* Use the free mobile footer width: email/phone left, address right. */
@media(max-width:620px){
  #site-footer .f-contact{display:grid!important;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)!important;column-gap:14px!important;row-gap:8px!important;align-items:start!important}
  #site-footer .f-contact h4{grid-column:1/-1!important;margin-bottom:5px!important}
  #site-footer .f-contact>a:nth-of-type(1){grid-column:1!important;grid-row:2!important;margin:0!important}
  #site-footer .f-contact>a:nth-of-type(2){grid-column:1!important;grid-row:3!important;margin:0!important}
  #site-footer .f-contact .ct.static{grid-column:2!important;grid-row:2/4!important;margin:0!important}
  #site-footer .f-contact .f-badge{grid-column:1/-1!important;width:max-content!important;margin-top:5px!important}
  #site-footer .f-contact .ct{font-size:.75rem!important;min-width:0!important;overflow-wrap:anywhere}
}
@media(max-width:350px){
  #site-footer .f-contact{grid-template-columns:1fr!important}
  #site-footer .f-contact h4,#site-footer .f-contact>a:nth-of-type(1),#site-footer .f-contact>a:nth-of-type(2),#site-footer .f-contact .ct.static,#site-footer .f-contact .f-badge{grid-column:1!important;grid-row:auto!important}
}


/* =====================================================================
   FINAL MOBILE QA — spacing, alignment, overflow and touch polish
   ===================================================================== */
@media(max-width:760px){
  html{font-size:16px;scroll-padding-top:68px}
  body{width:100%;min-width:0;overflow-x:hidden!important}
  main,header,section,footer,.nav-inner,.hero-copy,.hero-stage,.sec-head,.slider-shell{min-width:0;max-width:100%}
  img,svg{max-width:100%}
  section[id]{scroll-margin-top:68px}

  /* consistent page gutters */
  .hero{padding-left:16px!important;padding-right:16px!important}
  section{padding-left:16px!important;padding-right:16px!important}
  .sec-head{width:100%;max-width:100%!important}
  .sec-head h2{margin-left:0!important;margin-right:0!important;overflow-wrap:normal!important;word-break:normal!important}
  .sec-head p{max-width:100%!important}

  /* navigation and menu */
  body>nav#nav{padding:9px 16px!important;min-height:62px}
  #nav .brand img{height:32px!important;width:auto!important}
  .menu-btn{min-width:42px;min-height:42px;border-radius:11px}
  .nav-links{max-height:calc(100vh - 78px);overflow-y:auto}
  .nav-links .btn{width:100%;justify-content:center;text-align:center}

  /* banner alignment */
  .hero-copy{width:100%;padding:0!important;margin:0!important}
  .hero h1{max-width:13ch!important}
  .hero-actions{width:100%;align-items:stretch}
  .hero-actions .btn{min-height:44px;display:flex!important;align-items:center;justify-content:center}
  .hero-stage{overflow:visible!important;margin-left:auto!important;margin-right:auto!important}
  .hero-digital-hub{max-width:100%!important;margin-left:auto!important;margin-right:auto!important}

  /* all cards */
  .card,.work-card,.step,.post,.tcard,.cta-band{box-sizing:border-box;max-width:100%;transform:none}
  .cards,.work-grid,.process,.blog-grid{min-width:0}
  .slider-shell{width:100%!important;margin-left:0!important;margin-right:0!important;isolation:isolate}
  .slider-shell>.cards,.slider-shell>.work-grid,.slider-shell>.process,.slider-shell>.blog-grid{
    width:100%!important;overscroll-behavior-x:contain;scroll-snap-type:x mandatory!important
  }
  .slider-shell .card,.slider-shell .work-card,.slider-shell .step,.slider-shell .post{scroll-snap-stop:always}
  .slider-controls button{min-width:32px;min-height:32px;touch-action:manipulation}

  /* portfolio filters */
  .filters{scroll-snap-type:x proximity;overscroll-behavior-x:contain}
  .filters .filter{scroll-snap-align:start;min-height:38px}

  /* service cards */
  #services .cards{align-items:stretch}
  #services .card{width:100%!important;margin:0!important}
  #services .slider-controls{padding:0!important}

  /* process heading and cards share one visual gutter */
  #process .sec-head{width:auto!important;max-width:none!important}
  #process .process>.step{width:100%!important;margin:0!important}
  #process .slider-controls{padding:0!important}

  /* about */
  .about-image-frame{width:100%;height:100%}
  .about-note{max-width:82%;min-width:0!important}
  .ticks{width:100%}
  .tick{min-width:0;overflow-wrap:anywhere}

  /* blog consistency */
  #blog .blog-grid .post{overflow:hidden}
  #blog .blog-grid .post .pic{margin:0!important}
  #blog .blog-grid .post .body{width:100%;box-sizing:border-box}
  .pmeta{font-size:.67rem!important;line-height:1.35}

  /* CTA */
  #contact{padding-top:36px!important;padding-bottom:42px!important}
  .cta-band{width:100%;margin:0!important}
  .cta-band h2{font-size:1.45rem!important;overflow-wrap:normal}

  /* footer */
  #site-footer{width:100%;padding-left:16px!important;padding-right:16px!important}
  #site-footer .f-inner,#site-footer .f-top,#site-footer .f-col{min-width:0;max-width:100%}
  #site-footer .sub-row{width:100%;max-width:100%}
  #site-footer .sub-row input{min-width:0;width:100%}
  #site-footer .f-contact .ct{min-width:0;word-break:normal;overflow-wrap:anywhere}
  #site-footer .f-legal{row-gap:7px}
}
@media(max-width:360px){
  .hero,section,#site-footer{padding-left:14px!important;padding-right:14px!important}
  .hero-actions{grid-template-columns:1fr!important}
  .hero-points{grid-template-columns:1fr!important}
  #site-footer .f-contact{grid-template-columns:1fr!important}
  #site-footer .f-contact>*{grid-column:1!important;grid-row:auto!important}
}


/* Desktop blog balance: keep two compact stories and remove the extra third card. */
#blog .side-posts .post:nth-child(3){display:none!important}
@media(min-width:1001px){
  #blog .blog-grid{align-items:stretch!important}
  #blog .blog-grid>.post{height:auto!important;min-height:0!important}
  #blog .blog-grid>.post>.pic{height:280px!important;aspect-ratio:auto!important}
  #blog .blog-grid>.post>.body{min-height:180px!important;padding:22px 28px 24px!important}
  #blog .side-posts{height:auto!important;grid-template-rows:repeat(2,minmax(0,1fr))!important;gap:20px!important}
  #blog .side-posts .post.row{min-height:220px!important;height:auto!important}
}


/* Force the requested two-column mobile layout on every phone width. */
@media(max-width:760px){
  .hero-points{grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:8px!important}
  .hero-points li{min-width:0!important;font-size:.68rem!important}
  #site-footer .f-top{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  #site-footer .f-brand,#site-footer .f-contact{grid-column:1/-1!important}
  #site-footer .f-contact{display:grid!important;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr)!important}
  #site-footer .f-contact h4,#site-footer .f-contact .f-badge{grid-column:1/-1!important}
  #site-footer .f-contact>a:nth-of-type(1){grid-column:1!important;grid-row:2!important}
  #site-footer .f-contact>a:nth-of-type(2){grid-column:1!important;grid-row:3!important}
  #site-footer .f-contact .ct.static{grid-column:2!important;grid-row:2/4!important}
}


/* Final narrow-phone corrections: banner title/buttons and About benefits. */
@media(max-width:760px){
  .hero h1{max-width:none!important;width:100%!important;font-size:clamp(1.55rem,7vw,1.82rem)!important;line-height:1.08!important;letter-spacing:-.45px!important}
  .hero-actions{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
  .hero-actions .btn{width:100%!important;min-width:0!important;min-height:42px!important;padding:10px 6px!important;font-size:.7rem!important;white-space:nowrap!important}
  .ticks{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px 10px!important;width:100%!important}
  .tick{min-width:0!important;font-size:.68rem!important;line-height:1.25!important;gap:6px!important;white-space:normal!important}
  .tick .t{width:20px!important;height:20px!important;flex:0 0 20px!important;font-size:.65rem!important}
  #about{padding-bottom:30px!important}
}
@media(max-width:360px){
  .hero h1{font-size:1.48rem!important}
  .hero-actions .btn{font-size:.65rem!important;padding-left:4px!important;padding-right:4px!important}
  .tick{font-size:.63rem!important}.ticks{column-gap:7px!important}
}


/* Mobile swipe decks: 85% cards, neighbour peeks, dots only, no arrows. */
@media(max-width:760px){
  .slider-shell>.cards,.slider-shell>.work-grid,.slider-shell>.process,.slider-shell>.blog-grid{
    width:100%!important;padding:3px 7.5% 10px!important;margin:0!important;gap:10px!important;
    overflow-x:auto!important;scroll-snap-type:x mandatory!important;scroll-padding-inline:7.5%!important;
    scrollbar-width:none!important;-webkit-overflow-scrolling:touch!important
  }
  .slider-shell>.cards::-webkit-scrollbar,.slider-shell>.work-grid::-webkit-scrollbar,.slider-shell>.process::-webkit-scrollbar,.slider-shell>.blog-grid::-webkit-scrollbar{display:none!important}
  .cards>.card,.work-grid>.work-card,.blog-grid>.post,.blog-grid>.side-posts>.post,#process .process>.step{
    flex:0 0 85%!important;width:85%!important;max-width:85%!important;margin:0!important;scroll-snap-align:center!important
  }
  .slider-controls.slider-dots,#services .slider-controls.slider-dots,#process .slider-controls.slider-dots{
    position:static!important;display:flex!important;height:auto!important;transform:none!important;
    justify-content:center!important;align-items:center!important;gap:7px!important;margin:8px 0 2px!important;
    padding:0!important;pointer-events:auto!important
  }
  .slider-controls.slider-dots .slider-dot{
    display:block!important;width:7px!important;height:7px!important;min-width:7px!important;min-height:7px!important;
    padding:0!important;border:0!important;border-radius:50%!important;background:#c9d1df!important;
    box-shadow:none!important;opacity:1!important;transition:width .25s,background .25s!important
  }
  .slider-controls.slider-dots .slider-dot.active{width:20px!important;background:linear-gradient(90deg,#2f3fa3,#3fc2c9)!important;border-radius:20px!important}
  #process .slider-controls.slider-dots .slider-dot{background:rgba(255,255,255,.38)!important}
  #process .slider-controls.slider-dots .slider-dot.active{background:#fff!important}
  /* No cropped shadows beneath any mobile slider card. */
  .slider-shell .card,.slider-shell .work-card,.slider-shell .step,.slider-shell .post{box-shadow:none!important;filter:none!important}
}


/* Align the first Services card directly below the section copy; keep next-card peek on the right. */
@media(max-width:760px){
  #services .slider-shell>.cards{padding-left:0!important;padding-right:15%!important;scroll-padding-left:0!important;scroll-padding-right:15%!important}
  #services .cards>.card{scroll-snap-align:start!important}
  /* True small pagination dots — neutralise old button sizing rules. */
  .slider-shell>.slider-controls.slider-dots{gap:7px!important}
  .slider-shell>.slider-controls.slider-dots>button.slider-dot{
    flex:0 0 7px!important;width:7px!important;height:7px!important;min-width:0!important;min-height:0!important;
    max-width:7px!important;max-height:7px!important;margin:0!important;padding:0!important;line-height:0!important
  }
  .slider-shell>.slider-controls.slider-dots>button.slider-dot.active{flex-basis:20px!important;width:20px!important;max-width:20px!important}
}


/* Unified mobile section alignment: headings, filters and slider cards share one gutter. */
@media(max-width:760px){
  #services .slider-shell>.cards,
  #work .slider-shell>.work-grid,
  #blog .slider-shell>.blog-grid{
    padding-left:0!important;padding-right:15%!important;
    scroll-padding-left:0!important;scroll-padding-right:15%!important
  }
  #services .cards>.card,
  #work .work-grid>.work-card,
  #blog .blog-grid>.post,
  #blog .blog-grid>.side-posts>.post{scroll-snap-align:start!important}

  /* How We Work heading has an 18px inset, so its deck uses the same inset. */
  #process .slider-shell>.process{
    width:100%!important;padding-left:18px!important;padding-right:calc(15% + 18px)!important;
    scroll-padding-left:18px!important;scroll-padding-right:calc(15% + 18px)!important
  }
  #process .process>.step{scroll-snap-align:start!important}

  /* Portfolio filters align with heading instead of touching screen edges. */
  #work .filters{margin:0 0 24px!important;padding:0 0 6px!important;width:100%!important;gap:8px!important}
  #work .filter{padding:9px 14px!important;font-size:.72rem!important}

  /* Consistent professional card geometry. */
  .slider-shell .card,.slider-shell .work-card,.slider-shell .step,.slider-shell .post{
    border-radius:16px!important;overflow:hidden!important
  }
  #work .work-card .thumb{width:100%!important;aspect-ratio:16/10!important}
  #work .work-card .meta{padding:16px 18px!important;min-height:145px!important}
  #work .work-card .meta h3{font-size:.98rem!important;line-height:1.25!important}
  .slider-shell>.slider-dots{width:100%!important;justify-content:center!important;margin-top:9px!important}
}
@media(max-width:390px){
  #process .slider-shell>.process{padding-left:16px!important;padding-right:calc(15% + 16px)!important;scroll-padding-left:16px!important}
}


/* Mobile slider cards: 92% width with an 8% next-card preview. */
@media(max-width:760px){
  .cards>.card,.work-grid>.work-card,.blog-grid>.post,.blog-grid>.side-posts>.post,#process .process>.step{
    flex:0 0 92%!important;width:92%!important;max-width:92%!important
  }
  #services .slider-shell>.cards,#work .slider-shell>.work-grid,#blog .slider-shell>.blog-grid{
    padding-right:8%!important;scroll-padding-right:8%!important
  }
  #process .slider-shell>.process{padding-right:calc(8% + 18px)!important;scroll-padding-right:calc(8% + 18px)!important}
}
@media(max-width:390px){#process .slider-shell>.process{padding-right:calc(8% + 16px)!important}}


/* Reliable finger/mouse horizontal swiping and a first-card preview after the last card. */
@media(max-width:1024px){
  .slider-shell>.cards,.slider-shell>.work-grid,.slider-shell>.process,.slider-shell>.blog-grid{overflow-x:scroll!important;touch-action:pan-x!important;overscroll-behavior-x:contain!important;cursor:grab!important}
  .slider-shell>.cards:active,.slider-shell>.work-grid:active,.slider-shell>.process:active,.slider-shell>.blog-grid:active{cursor:grabbing!important}
  [data-slider-clone="1"]{pointer-events:none!important}
  .slider-shell .thumb img,.slider-shell .pic img{-webkit-user-drag:none;user-select:none}
}


/* Touch devices: static 3D card treatment, no desktop mouse-hover animation. */
@media(max-width:1024px){
  .card,.work-card,.step,.tcard,.post,
  .card:hover,.work-card:hover,.step:hover,.tcard:hover,.post:hover{
    transform:none!important;transition:none!important;animation:none!important
  }
  .card::before,.card::after,.work-card::before,.work-card::after,
  .step::before,.step::after,.tcard::before,.tcard::after,.post::before,.post::after{display:none!important}
  .card,.work-card,.post{
    background:linear-gradient(145deg,#ffffff 0%,#fbfcff 68%,#f3f6fb 100%)!important;
    border:1px solid #dfe5ef!important;
    box-shadow:inset 0 1px 0 #fff,inset -1px -1px 0 rgba(47,63,163,.035)!important
  }
  #process .step{
    background:linear-gradient(145deg,rgba(255,255,255,.18),rgba(255,255,255,.09))!important;
    border:1px solid rgba(255,255,255,.3)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.2)!important
  }
  .work-card:hover .thumb img,.post:hover .pic img{transform:none!important;transition:none!important}
}


/* Final mobile carousel geometry: true infinite loop with equal peeks on both sides. */
@media(max-width:760px){
  .slider-shell>.cards,.slider-shell>.work-grid,.slider-shell>.process,.slider-shell>.blog-grid,
  #services .slider-shell>.cards,#work .slider-shell>.work-grid,#process .slider-shell>.process,#blog .slider-shell>.blog-grid{
    width:100%!important;margin:0!important;padding:3px 4% 10px!important;gap:10px!important;
    scroll-padding-left:4%!important;scroll-padding-right:4%!important;scroll-snap-type:x mandatory!important;
    overflow-x:auto!important;touch-action:pan-x!important;-webkit-overflow-scrolling:touch!important
  }
  .cards>.card,.work-grid>.work-card,.blog-grid>.post,.blog-grid>.side-posts>.post,#process .process>.step,
  [data-slider-clone="1"]{flex:0 0 92%!important;width:92%!important;max-width:92%!important;margin:0!important;scroll-snap-align:center!important;box-sizing:border-box!important}
  [data-slider-clone="1"]{pointer-events:none!important}
  .slider-shell>.slider-dots{position:static!important;height:auto!important;transform:none!important;display:flex!important;justify-content:center!important;gap:7px!important;margin:8px 0 2px!important}
  .slider-shell>.slider-dots>button.slider-dot{flex:0 0 7px!important;width:7px!important;height:7px!important;min-width:0!important;min-height:0!important;max-width:7px!important;max-height:7px!important;padding:0!important;border:0!important;border-radius:50%!important;background:#c9d1df!important;box-shadow:none!important}
  .slider-shell>.slider-dots>button.slider-dot.active{flex-basis:20px!important;width:20px!important;max-width:20px!important;border-radius:20px!important;background:linear-gradient(90deg,#2f3fa3,#3fc2c9)!important}
  #process .slider-shell>.slider-dots>button.slider-dot{background:rgba(255,255,255,.38)!important}
  #process .slider-shell>.slider-dots>button.slider-dot.active{background:#fff!important}
}


/* Slider cards must remain visible inside horizontal mobile viewports. */
@media(max-width:1024px){
  .slider-shell .card,.slider-shell .work-card,.slider-shell .step,.slider-shell .post,
  .slider-shell .rv,.slider-shell .rv-in,.slider-shell .rv-done,.slider-shell .reveal,
  .slider-shell [data-slider-clone="1"]{
    opacity:1!important;visibility:visible!important;transform:none!important;filter:none!important;
    clip-path:none!important;animation:none!important
  }
  .slider-shell .card>*:not(.card-logo),.slider-shell .step>*:not(.step-logo),.slider-shell .post .body>*{opacity:1!important;visibility:visible!important}
}
/* Desktop keeps the original grids and never shows mobile controls/clones. */
@media(min-width:1025px){
  .slider-shell{display:contents!important}
  .slider-controls,[data-slider-clone="1"]{display:none!important}
  .cards,.work-grid,.process,.blog-grid{overflow:visible!important}
}


/* Mobile sliders: card flush left, only the next card peeks on the right. */
@media(max-width:760px){
  .slider-shell>.cards,.slider-shell>.work-grid,.slider-shell>.process,.slider-shell>.blog-grid,
  #services .slider-shell>.cards,#work .slider-shell>.work-grid,#process .slider-shell>.process,#blog .slider-shell>.blog-grid{
    padding-left:0!important;padding-right:8%!important;
    scroll-padding-left:0!important;scroll-padding-right:8%!important
  }
  .cards>.card,.work-grid>.work-card,.blog-grid>.post,.blog-grid>.side-posts>.post,#process .process>.step,[data-slider-clone="1"]{scroll-snap-align:start!important}
}


/* Ensure the horizontal decks receive finger gestures while vertical page scroll remains available. */
@media(max-width:1024px){
  .slider-shell>.cards,.slider-shell>.work-grid,.slider-shell>.process,.slider-shell>.blog-grid{touch-action:pan-y!important;pointer-events:auto!important}
  .slider-shell .card,.slider-shell .work-card,.slider-shell .step,.slider-shell .post{pointer-events:auto!important}
}


/* Mobile card supporting copy: slightly larger, headings unchanged. */
@media(max-width:760px){
  #services .card p{font-size:.86rem!important;line-height:1.58!important}
  #process .step p{font-size:.86rem!important;line-height:1.58!important}
  #work .work-card .meta span{font-size:.72rem!important;line-height:1.4!important}
  #work .work-card .tag,#work .work-card .pill{font-size:.68rem!important}
  #blog .post p{font-size:.84rem!important;line-height:1.58!important}
  #blog .post .pmeta{font-size:.71rem!important;line-height:1.4!important}
  #blog .post .readmore{font-size:.82rem!important}
  .tcard p{font-size:.86rem!important;line-height:1.58!important}
  .tcard .who span{font-size:.74rem!important}
}


/* Unified mobile paragraph scale and stronger card titles. */
@media(max-width:760px){
  main p,.hero p,.sec-head p,.card p,.step p,.post p,.about-txt p,.cta-band p,.tcard p{
    font-size:.86rem!important;line-height:1.6!important
  }
  .slider-shell .card h3,.slider-shell .step h3,.slider-shell .post h3,
  .slider-shell .work-card .meta h3{
    font-size:1.08rem!important;line-height:1.28!important;font-weight:700!important
  }
}


/* Align How We Work heading/subheading with its mobile cards. */
@media(max-width:760px){
  #process .sec-head{margin-left:0!important;margin-right:0!important;padding-left:0!important;padding-right:0!important;width:100%!important}
}


/* ================= PREMIUM QUOTE MODAL ================= */
.quote-modal{position:fixed;inset:0;z-index:10050;display:grid;place-items:center;padding:22px;opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s}
.quote-modal.open{opacity:1;visibility:visible}.quote-backdrop{position:absolute;inset:0;background:rgba(9,16,48,.68);backdrop-filter:blur(9px)}
.quote-dialog{position:relative;z-index:1;width:min(980px,100%);max-height:min(90vh,760px);overflow:auto;border-radius:28px;background:#fff;box-shadow:0 35px 100px rgba(5,15,58,.34);display:grid;grid-template-columns:.82fr 1.35fr}
.quote-close{position:absolute;right:16px;top:14px;z-index:4;width:38px;height:38px;border:1px solid rgba(47,63,163,.12);border-radius:50%;background:#fff;color:#172044;font-size:1.45rem;cursor:pointer;box-shadow:0 7px 20px rgba(24,39,105,.12)}
.quote-intro{padding:52px 38px;background:linear-gradient(145deg,#202f83,#2f62b6 56%,#3fc2c9);color:#fff;position:relative;overflow:hidden}
.quote-intro::after{content:"";position:absolute;width:340px;height:340px;border:1px solid rgba(255,255,255,.16);border-radius:50%;left:-170px;bottom:-180px;box-shadow:0 0 0 55px rgba(255,255,255,.045),0 0 0 110px rgba(255,255,255,.025)}
.quote-kicker{display:block;font-size:.7rem;font-weight:800;letter-spacing:2.2px;text-transform:uppercase;color:#9df7f4;margin-bottom:15px}.quote-intro h2{font-size:clamp(2rem,3.2vw,3rem);line-height:1.08;letter-spacing:-1.2px;margin-bottom:18px}.quote-intro h2 span{color:#9df7f4}.quote-intro p{font-size:.92rem;line-height:1.7;color:rgba(255,255,255,.76)}
.quote-trust{position:relative;z-index:1;display:grid;gap:10px;margin-top:30px;font-size:.78rem;font-weight:600;color:rgba(255,255,255,.88)}
.quote-form{padding:46px 42px 34px;display:grid;grid-template-columns:1fr 1fr;gap:18px 16px}.quote-form label{display:grid;gap:7px;min-width:0}.quote-form label>span{font-size:.75rem;font-weight:700;color:#273354}.quote-form label b{color:#3fc2c9}.quote-form input,.quote-form select,.quote-form textarea{width:100%;border:1px solid #e1e6f0;background:#f7f9fc;border-radius:12px;padding:13px 14px;color:#111936;font:inherit;font-size:.86rem;outline:none;transition:border-color .2s,box-shadow .2s,background .2s}.quote-form textarea{resize:vertical}.quote-form input:focus,.quote-form select:focus,.quote-form textarea:focus{background:#fff;border-color:#46aae6;box-shadow:0 0 0 4px rgba(70,170,230,.11)}
.quote-phone{display:flex;border:1px solid #e1e6f0;background:#f7f9fc;border-radius:12px;overflow:hidden}.quote-phone>span{display:flex;align-items:center;padding:0 11px;border-right:1px solid #e1e6f0;font-size:.78rem;font-weight:700;white-space:nowrap;color:#273354}.quote-phone input{border:0;border-radius:0;background:transparent}.quote-message,.quote-consent,.quote-submit,.quote-privacy{grid-column:1/-1}.quote-consent{display:flex!important;grid-template-columns:auto 1fr!important;align-items:center;gap:9px!important}.quote-consent input{width:17px;height:17px;accent-color:#2f7fc4}.quote-consent span{font-size:.76rem!important;font-weight:500!important;color:#68738c!important}.quote-submit{border:0;border-radius:13px;padding:14px 18px;background:linear-gradient(110deg,#2f3fa3,#2f7fc4 58%,#3fc2c9);color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center;gap:12px;cursor:pointer;box-shadow:0 13px 28px -12px rgba(47,63,163,.55)}.quote-submit b{font-size:1.15rem}.quote-privacy{text-align:center;font-size:.68rem;color:#8a94a9;margin-top:-5px}.quote-honey{position:absolute!important;left:-9999px!important}
body.quote-open{overflow:hidden}
@media(max-width:760px){.quote-modal{padding:10px;align-items:end}.quote-dialog{grid-template-columns:1fr;max-height:94vh;border-radius:23px 23px 0 0}.quote-intro{padding:30px 22px 23px}.quote-intro h2{font-size:1.65rem;margin-bottom:9px;max-width:15ch}.quote-intro p{font-size:.8rem;line-height:1.55}.quote-trust{display:flex;flex-wrap:wrap;gap:7px 14px;margin-top:16px;font-size:.66rem}.quote-form{padding:22px 18px 24px;grid-template-columns:1fr;gap:14px}.quote-message,.quote-consent,.quote-submit,.quote-privacy{grid-column:1}.quote-form input,.quote-form select,.quote-form textarea{font-size:.82rem;padding:12px}.quote-close{right:12px;top:11px;width:35px;height:35px}.quote-phone input{padding:12px}.quote-privacy{font-size:.64rem}}


/* Quote modal revision: clean form-only design, no left panel or inner scrollbar. */
.quote-modal{overflow-y:auto}
.quote-dialog{width:min(880px,100%)!important;max-height:none!important;overflow:visible!important;display:grid!important;grid-template-columns:1fr!important;background:#fff!important}
.quote-intro{padding:34px 42px 8px!important;background:#fff!important;color:var(--ink)!important;overflow:visible!important}
.quote-intro::after{display:none!important}
.quote-kicker{color:var(--teal)!important;margin-bottom:9px!important}
.quote-intro h2{font-size:clamp(2rem,3.4vw,2.8rem)!important;color:var(--ink)!important;margin-bottom:10px!important;max-width:none!important}
.quote-intro h2 span{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent!important}
.quote-intro p{color:var(--muted)!important;font-size:.88rem!important;line-height:1.6!important;max-width:700px}
.quote-trust{display:flex!important;flex-wrap:wrap;gap:8px 20px!important;margin-top:14px!important;color:#40506d!important;font-size:.72rem!important}
.quote-form{padding:20px 42px 34px!important;gap:15px 16px!important}
.quote-message,.quote-consent{display:none!important}
.quote-submit{margin-top:2px!important}
@media(max-width:760px){
  .quote-modal{padding:10px!important;align-items:center!important}
  .quote-dialog{border-radius:20px!important;max-height:none!important;overflow:visible!important}
  .quote-intro{padding:27px 18px 5px!important}
  .quote-intro h2{font-size:1.55rem!important;line-height:1.1!important}
  .quote-intro p{font-size:.77rem!important;line-height:1.5!important}
  .quote-trust{font-size:.62rem!important;gap:6px 11px!important;margin-top:11px!important}
  .quote-form{padding:16px 18px 22px!important;grid-template-columns:1fr 1fr!important;gap:11px!important}
  .quote-form label>span{font-size:.67rem!important}
  .quote-form input,.quote-form select{padding:10px!important;font-size:.75rem!important;border-radius:10px!important}
  .quote-phone>span{padding:0 7px!important;font-size:.67rem!important}.quote-phone input{padding:10px 7px!important}
  .quote-submit,.quote-privacy{grid-column:1/-1!important}.quote-submit{padding:12px!important;font-size:.78rem!important}
  .quote-privacy{font-size:.59rem!important}
}
@media(max-width:430px){.quote-form{grid-template-columns:1fr!important}.quote-submit,.quote-privacy{grid-column:1!important}}


/* Quote dialog is not a page section: remove inherited section spacing and keep it ~60% viewport. */
.quote-dialog{
  width:min(920px,60vw)!important;max-width:none!important;min-height:0!important;height:auto!important;
  padding:0!important;margin:0!important;box-sizing:border-box!important;align-self:center!important
}
.quote-intro,.quote-form{min-height:0!important;height:auto!important}
@media(max-width:1100px){.quote-dialog{width:min(820px,82vw)!important}}
@media(max-width:760px){.quote-dialog{width:calc(100vw - 20px)!important;max-width:520px!important;margin:0 auto!important;padding:0!important}}


/* Allow normal vertical page scrolling when a touch starts on any slider card. */
@media(max-width:1024px){
  .slider-shell,.slider-shell>.cards,.slider-shell>.work-grid,.slider-shell>.process,.slider-shell>.blog-grid,
  .slider-shell .card,.slider-shell .work-card,.slider-shell .step,.slider-shell .post,
  .slider-shell .card *,.slider-shell .work-card *,.slider-shell .step *,.slider-shell .post *{
    touch-action:pan-y pinch-zoom!important;overscroll-behavior-y:auto!important
  }
  .slider-shell>.cards,.slider-shell>.work-grid,.slider-shell>.process,.slider-shell>.blog-grid{scroll-snap-stop:normal!important}
}


/* Keep all four quote-modal corners consistently rounded without adding scrolling. */
.quote-dialog{overflow:hidden!important;border-radius:28px!important}
@media(max-width:760px){.quote-dialog{overflow:hidden!important;border-radius:20px!important}}


/* Mobile quote modal: use the available container width, never 100vw, to avoid right overflow. */
@media(max-width:760px){
  .quote-modal{width:100%!important;max-width:100%!important;padding:10px!important;box-sizing:border-box!important;overflow-x:hidden!important}
  .quote-dialog{width:100%!important;max-width:520px!important;margin:0 auto!important;box-sizing:border-box!important}
  .quote-form{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;width:100%!important;box-sizing:border-box!important}
  .quote-form label,.quote-form input,.quote-form select,.quote-phone{min-width:0!important;max-width:100%!important;box-sizing:border-box!important}
}
@media(max-width:430px){.quote-form{grid-template-columns:minmax(0,1fr)!important}}

.work-card{text-decoration:none;color:inherit}

/* Portfolio screenshots are 16:9; show every screenshot in full without cropping. */
.work-card .thumb{aspect-ratio:16/9!important;background:#f4f6fa}
.work-card .thumb img{width:100%!important;height:100%!important;object-fit:contain!important;object-position:center!important}


/* Portfolio project preview modal */
.portfolio-modal{position:fixed;inset:0;z-index:10020;display:grid;place-items:center;padding:20px;opacity:0;visibility:hidden;transition:.25s}
.portfolio-modal.open{opacity:1;visibility:visible}
.portfolio-backdrop{position:absolute;inset:0;background:rgba(8,16,40,.76);backdrop-filter:blur(10px)}
.portfolio-dialog{position:relative;width:min(1000px,60vw);max-height:90vh;overflow:hidden;background:#fff;border-radius:24px;box-shadow:0 30px 90px rgba(4,12,35,.38);transform:translateY(18px) scale(.98);transition:.3s}
.portfolio-modal.open .portfolio-dialog{transform:none}
.portfolio-close{position:absolute;right:14px;top:14px;z-index:3;width:42px;height:42px;border:1px solid #dce3ef;border-radius:50%;background:#fff;color:#071437;font-size:24px;cursor:pointer;box-shadow:0 8px 22px rgba(5,17,50,.14)}
.portfolio-preview{aspect-ratio:16/9;background:#eef2f8;overflow:hidden}
.portfolio-preview img{width:100%;height:100%;display:block;object-fit:contain}
.portfolio-info{display:flex;align-items:center;justify-content:space-between;gap:22px;padding:22px 26px}
.portfolio-info small{display:block;color:#35aebd;font-size:.72rem;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:5px}
.portfolio-info h3{font-size:1.35rem;color:#071437;margin:0}
.portfolio-view{flex:none;text-decoration:none;color:#fff;background:linear-gradient(120deg,#3447b8,#39bdc7);padding:13px 22px;border-radius:999px;font-size:.86rem;font-weight:800;box-shadow:0 12px 28px rgba(47,90,185,.25)}
body.portfolio-open{overflow:hidden}
@media(max-width:1024px){.portfolio-dialog{width:min(820px,84vw)}}
@media(max-width:600px){.portfolio-modal{padding:10px}.portfolio-dialog{width:100%;border-radius:18px}.portfolio-close{width:36px;height:36px;right:10px;top:10px}.portfolio-info{padding:16px;gap:12px}.portfolio-info h3{font-size:1.05rem}.portfolio-view{padding:11px 15px;font-size:.76rem}}


/* Prevent mobile slider tracks from capturing vertical page gestures.
   Horizontal movement remains controlled by the explicit swipe script. */
@media(max-width:1024px){
  .slider-shell>.cards,.slider-shell>.work-grid,.slider-shell>.process,.slider-shell>.blog-grid{
    overflow-x:hidden!important;overflow-y:visible!important;touch-action:pan-y pinch-zoom!important;overscroll-behavior:auto!important
  }
}


/* More compact quote form on phones. */
@media(max-width:600px){
  .quote-modal{padding:16px!important}
  .quote-dialog{width:100%!important;max-width:460px!important;border-radius:18px!important}
  .quote-intro{padding:22px 16px 3px!important}
  .quote-kicker{font-size:.61rem!important;margin-bottom:6px!important}
  .quote-intro h2{font-size:1.3rem!important;line-height:1.08!important;margin-bottom:7px!important;padding-right:28px!important}
  .quote-intro p{font-size:.7rem!important;line-height:1.4!important}
  .quote-trust{font-size:.56rem!important;gap:5px 9px!important;margin-top:8px!important}
  .quote-form{padding:12px 16px 17px!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;gap:8px 9px!important}
  .quote-form label>span{font-size:.6rem!important;margin-bottom:4px!important}
  .quote-form input,.quote-form select{padding:8px!important;font-size:.68rem!important;border-radius:9px!important}
  .quote-phone>span{padding:0 6px!important;font-size:.59rem!important}.quote-phone input{padding:8px 6px!important}
  .quote-submit{padding:10px!important;font-size:.7rem!important;margin-top:1px!important}
  .quote-privacy{font-size:.52rem!important;margin-top:0!important}
  .quote-close{width:34px!important;height:34px!important;right:9px!important;top:9px!important}
}


/* Blog is temporarily hidden. */
#blog{display:none!important}
.portfolio-all-wrap{text-align:center;margin-top:42px}
.portfolio-all-btn{display:inline-flex;align-items:center;gap:12px;padding:15px 25px;border-radius:999px;text-decoration:none;color:#fff;font-size:.88rem;font-weight:800;background:linear-gradient(120deg,#3447b8,#39bdc7);box-shadow:0 14px 34px rgba(45,80,180,.24);transition:.25s}
.portfolio-all-btn:hover{transform:translateY(-3px);box-shadow:0 18px 38px rgba(45,80,180,.32)}
@media(max-width:600px){.portfolio-all-wrap{margin-top:28px}.portfolio-all-btn{padding:13px 20px;font-size:.8rem}}


/* Slider gestures are resolved in JavaScript: vertical drags scroll the page,
   horizontal drags change cards. This avoids browser gesture-lock on cards. */
@media(max-width:1024px){
  .slider-shell>.cards,.slider-shell>.work-grid,.slider-shell>.process,.slider-shell>.blog-grid,
  .slider-shell .card,.slider-shell .work-card,.slider-shell .step,.slider-shell .post,
  .slider-shell .card *,.slider-shell .work-card *,.slider-shell .step *,.slider-shell .post *{touch-action:none!important}
}

html.slider-touching{scroll-behavior:auto!important}

/* Inline quote-form feedback: keep users on the website after submission. */
.quote-status{display:none;grid-column:1/-1;margin-top:1px;padding:10px 13px;border-radius:10px;font-size:.72rem;font-weight:700;line-height:1.4;text-align:center}
.quote-status.success{display:block;color:#146c43;background:#e7f8ef;border:1px solid #b7e8cd}
.quote-status.error{display:block;color:#a62935;background:#fff0f1;border:1px solid #f1c2c7}
.quote-submit:disabled{opacity:.72;cursor:wait;transform:none!important}
@media(max-width:600px){.quote-status{font-size:.62rem;padding:8px 10px}}

/* Tighter section rhythm across desktop, tablet and mobile. */
@media(min-width:1025px){main>section{padding-top:88px!important;padding-bottom:76px!important}}
@media(min-width:601px) and (max-width:1024px){main>section{padding-top:58px!important;padding-bottom:52px!important}}
@media(max-width:600px){main>section{padding-top:44px!important;padding-bottom:40px!important}}

/* Floating WhatsApp contact */
.whatsapp-chat{position:fixed;left:22px;bottom:22px;z-index:10050;display:flex;align-items:center;gap:10px;text-decoration:none;color:#fff;filter:drop-shadow(0 12px 22px rgba(13,35,29,.24))}
.whatsapp-icon{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:#25d366;border:3px solid #fff;transition:.25s}
.whatsapp-icon svg{width:29px;height:29px}.whatsapp-tip{padding:9px 13px;border-radius:999px;background:#102238;font-size:.72rem;font-weight:750;white-space:nowrap;opacity:0;transform:translateX(-8px);transition:.25s;order:2}
.whatsapp-chat:hover .whatsapp-icon{transform:translateY(-3px) scale(1.04)}.whatsapp-chat:hover .whatsapp-tip,.whatsapp-chat:focus .whatsapp-tip{opacity:1;transform:none}
@media(max-width:600px){.whatsapp-chat{left:14px;bottom:14px}.whatsapp-icon{width:50px;height:50px}.whatsapp-icon svg{width:26px;height:26px}.whatsapp-tip{display:none}}

/* Exact 50px content-to-content rhythm between adjacent homepage sections:
   25px below one section + 25px above the next. */
body:not(.projects-page) main>section{padding-top:25px!important;padding-bottom:25px!important}

/* Give the process cards comfortable breathing room above the section edge. */
body:not(.projects-page) #process{padding-bottom:55px!important}
@media(max-width:600px){body:not(.projects-page) #process{padding-bottom:45px!important}}
body:not(.projects-page) #process{padding-bottom:100px!important}