/*──────────────────────────────────────────────────────────
  SINGLE SERVICE PAGE
  --svc-accent-start / --svc-accent-end are set inline on <main> (see
  single-service.php) from the Service's own ACF accent colors, so every
  section below can tint itself per-service with var(--svc-accent-start,
  var(--blue)) as a fallback when a service hasn't set its own colors.
──────────────────────────────────────────────────────────*/

/*──────────────────────────────────────────────────────────
  HERO
──────────────────────────────────────────────────────────*/
.service-hero {
  position: relative;
  min-height: 60vh;
  display: flex;
  align-items: flex-end;
  padding: clamp(1.5rem, 5vw, 4rem);
  padding-top: 5.5rem;
  overflow: hidden;
}
.service-hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.service-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.service-hero-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(0deg, var(--black) 0%, rgba(5, 5, 5, .55) 55%, rgba(5, 5, 5, .35) 100%),
    linear-gradient(90deg, rgba(5, 5, 5, .5), transparent 60%);
}
.service-hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .03) 1px, transparent 1px);
  background-size: 64px 64px;
  mix-blend-mode: overlay;
}
.service-hero-content {
  position: relative;
  z-index: 1;
  max-width: 900px;
  padding-bottom: 3rem;
}
.service-hero-eyebrow {
  color: var(--svc-accent-start, var(--blue));
}
.service-hero-eyebrow::before {
  background: var(--svc-accent-start, var(--blue));
}
.service-hero-title {
  font-family: var(--font-display);
  font-size:clamp(2.29rem,5.46vw,4.43rem);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1.02;
  color: var(--white);
}
.service-hero-intro {
  margin-top: 1.4rem;
  max-width: 620px;
  font-size:clamp(0.88rem,1.25vw,0.98rem);
  line-height: 1.7;
  color: var(--gray-600);
}
.service-hero-actions {
  margin-top: 2.2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

/*──────────────────────────────────────────────────────────
  STICKY SUB-NAV
──────────────────────────────────────────────────────────*/
.service-subnav {
  position: sticky;
  /* Sits just under the main fixed nav once scrolled (~64px tall in its
     .scrolled state) — the fixed nav's higher z-index keeps it on top if
     this offset is ever a few px short on a given viewport/font load. */
  top: 3.4rem;
  z-index: 900;
  background: rgba(5, 5, 5, .7);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.service-subnav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1rem clamp(1.5rem, 5vw, 4rem);
}
.service-subnav-list {
  display: flex;
  gap: clamp(1rem, 2.5vw, 2.2rem);
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
}
.service-subnav-list::-webkit-scrollbar {
  display: none;
}
.service-subnav-list a {
  display: inline-block;
  white-space: nowrap;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--gray-500);
  text-decoration: none;
  padding: .3rem 0;
  border-bottom: 2px solid transparent;
  transition: color .3s, border-color .3s;
}
.service-subnav-list a:hover {
  color: var(--white);
}
.service-subnav-list a.active {
  color: var(--white);
  border-color: var(--svc-accent-start, var(--blue));
}
.service-subnav-cta {
  flex-shrink: 0;
  display: none;
  align-items: center;
  gap: .5rem;
  font-size: .8rem;
  font-weight: 700;
  color: var(--white);
  text-decoration: none;
  padding: .55rem 1.2rem;
  border-radius: 100px;
  background: var(--svc-accent-start, var(--blue));
  transition: transform .3s var(--ease-expo);
}
.service-subnav-cta:hover {
  transform: translateY(-2px);
}
@media (min-width: 900px) {
  .service-subnav-cta {
    display: inline-flex;
  }
}

/* Anchor targets for the sub-nav links — offset so the heading clears
   both the fixed main nav and the sticky sub-nav bar above it. */
.service-section[id] {
  scroll-margin-top: 7rem;
}

/*──────────────────────────────────────────────────────────
  OVERVIEW (raw the_content() output)
──────────────────────────────────────────────────────────*/
.service-overview-body {
  max-width: 780px;
  color: var(--gray-600);
  font-size: 1.05rem;
  line-height: 1.85;
}
.service-overview-body p {
  margin-bottom: 1.4rem;
}
.service-overview-body h2,
.service-overview-body h3,
.service-overview-body h4 {
  font-family: var(--font-display);
  color: var(--white);
  letter-spacing: -.02em;
  margin: 2rem 0 1rem;
}
.service-overview-body ul,
.service-overview-body ol {
  margin: 0 0 1.4rem 1.3rem;
}
.service-overview-body li {
  margin-bottom: .5rem;
}
.service-overview-body a {
  color: var(--blue-light);
  text-decoration-color: rgba(103,232,237, .4);
}
.service-overview-body strong {
  color: var(--white);
}
.service-overview-body blockquote {
  border-left: 2px solid var(--svc-accent-start, var(--blue));
  padding-left: 1.4rem;
  margin: 1.6rem 0;
  color: var(--gray-500);
  font-style: italic;
}

/*──────────────────────────────────────────────────────────
  BENEFITS
──────────────────────────────────────────────────────────*/
.service-benefits {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-top: 3rem;
}
.service-benefit {
  display: flex;
  gap: 1.1rem;
  align-items: flex-start;
}
.service-benefit-icon {
  flex-shrink: 0;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .08);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.svc-icon-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.svc-icon-fallback {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .9rem;
  color: var(--svc-accent-start, var(--blue));
}
.service-benefit-copy h3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--white);
  letter-spacing: -.01em;
  margin-bottom: .35rem;
}
.service-benefit-copy p {
  font-size: .9rem;
  color: var(--gray-500);
  line-height: 1.7;
}

/*──────────────────────────────────────────────────────────
  FEATURES
──────────────────────────────────────────────────────────*/
.service-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
  margin-top: 2.5rem;
}
.service-feature {
  padding: 1.5rem;
  border-radius: 16px;
  background: rgba(255, 255, 255, .02);
  border: 1px solid rgba(255, 255, 255, .06);
  transition: border-color .4s var(--ease-expo), transform .4s var(--ease-expo);
}
.service-feature:hover {
  border-color: rgba(255, 255, 255, .18);
  transform: translateY(-4px);
}
.service-feature-icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 10px;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .04);
  overflow: hidden;
}
.service-feature h4 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: .4rem;
}
.service-feature p {
  font-size: .88rem;
  color: var(--gray-500);
  line-height: 1.65;
}

/*──────────────────────────────────────────────────────────
  PROCESS (numbered vertical timeline)
──────────────────────────────────────────────────────────*/
.service-process {
  position: relative;
  margin-top: 3rem;
  max-width: 760px;
}
.service-process-step {
  position: relative;
  display: flex;
  gap: 1.6rem;
  padding-bottom: 2.6rem;
}
.service-process-step:last-child {
  padding-bottom: 0;
}
.service-process-step::before {
  content: '';
  position: absolute;
  left: 1.35rem;
  top: 2.9rem;
  bottom: 0;
  width: 1px;
  background: rgba(255, 255, 255, .08);
}
.service-process-step:last-child::before {
  display: none;
}
.service-process-marker {
  flex-shrink: 0;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .15);
  background: var(--gray-50);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .85rem;
  color: var(--svc-accent-start, var(--blue));
  position: relative;
  z-index: 1;
}
.service-process-copy h4 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: .4rem;
}
.service-process-copy p {
  font-size: .92rem;
  color: var(--gray-500);
  line-height: 1.75;
  max-width: 560px;
}

/*──────────────────────────────────────────────────────────
  RESULTS (statistics) — reuses .stats/.stat/.stat-val/.stat-lbl from
  style.css, minus the homepage-specific top border/spacing.
──────────────────────────────────────────────────────────*/
.service-stats {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

/*──────────────────────────────────────────────────────────
  GALLERY
──────────────────────────────────────────────────────────*/
.service-gallery {
  margin-top: 2.5rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}
.service-gallery-item {
  border-radius: 18px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
}
.service-gallery-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s var(--ease-expo);
}
.service-gallery-item:hover .service-gallery-img {
  transform: scale(1.04);
}


/*──────────────────────────────────────────────────────────
  RELATED SERVICES GRID
──────────────────────────────────────────────────────────*/
.service-related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
  margin-top: 3rem;
}
.service-related-card {
  display: block;
  text-decoration: none;
  border-radius: 18px;
  overflow: hidden;
  background: rgba(255, 255, 255, .02);
  border: 1px solid rgba(255, 255, 255, .06);
  transition: border-color .4s var(--ease-expo), transform .4s var(--ease-expo);
}
.service-related-card:hover {
  border-color: rgba(255, 255, 255, .2);
  transform: translateY(-4px);
}
.service-related-card-media {
  aspect-ratio: 5 / 4;
  background: var(--gray-100);
  overflow: hidden;
}
.service-related-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s var(--ease-expo);
}
.service-related-card:hover .service-related-card-media img {
  transform: scale(1.05);
}
.service-related-card-body {
  padding: 1.1rem 1.4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
}
.service-related-card-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--white);
}
.service-related-card-arrow {
  color: var(--gray-400);
  transition: transform .3s var(--ease-expo), color .3s;
}
.service-related-card:hover .service-related-card-arrow {
  transform: translateX(4px) rotate(-45deg);
  color: var(--svc-accent-start, var(--blue));
}

/*──────────────────────────────────────────────────────────
  NEXT / PREVIOUS SERVICE NAV
──────────────────────────────────────────────────────────*/
.service-adjacent-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  padding: 3rem 0 5rem;
  border-top: 1px solid rgba(255, 255, 255, .06);
  margin-top: 1rem;
}
.service-adjacent-link {
  display: flex;
  align-items: center;
  gap: 1rem;
  text-decoration: none;
  padding: 1.3rem 1.5rem;
  border-radius: 16px;
  transition: background .3s, transform .3s var(--ease-expo);
}
.service-adjacent-link:hover {
  background: rgba(255, 255, 255, .03);
  transform: translateY(-2px);
}
.service-adjacent-link.is-next {
  justify-content: flex-end;
  text-align: right;
  grid-column: 2;
}
.service-adjacent-copy {
  display: flex;
  flex-direction: column;
  gap: .3rem;
}
.service-adjacent-arrow {
  font-size: 1.3rem;
  color: var(--gray-400);
}
.service-adjacent-label {
  display: block;
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gray-400);
  margin-bottom: .3rem;
}
.service-adjacent-title {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--white);
}

@media (max-width: 700px) {
  .service-adjacent-nav {
    grid-template-columns: 1fr;
  }
  .service-adjacent-link.is-next {
    grid-column: 1;
  }
  .service-hero {
    min-height: 60vh;
  }
}

/*──────────────────────────────────────────────────────────
  SERVICE HERO — CINEMATIC BACKDROP + FRAMED PROJECT SHOT
  Appended last so these win over the base rules above.

  NB: the layout class here is .service-hero-split, NOT
  .service-hero-grid — that name is already taken by the absolutely
  positioned 64px texture overlay defined earlier in this file.
──────────────────────────────────────────────────────────*/

/* The backdrop is now purpose-built discipline artwork rather than a
   cropped client screenshot, so it no longer has to be dimmed into
   irrelevance to keep the headline readable. The scrim is weighted to
   the copy column and eased off the right, where the project shot sits. */
.service-hero-overlay {
  background:
    linear-gradient(0deg, var(--black) 0%, rgba(5, 5, 5, .58) 46%, rgba(5, 5, 5, .18) 100%),
    linear-gradient(90deg, rgba(5, 5, 5, .82) 0%, rgba(5, 5, 5, .52) 42%, rgba(5, 5, 5, .16) 100%);
}

.service-hero-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, .82fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  max-width: min(1220px, 100%);
}
.service-hero-copy { min-width: 0; }

/* Client work at natural aspect — height:auto, never cover-cropped, so
   the interface in the screenshot stays legible. */
.service-hero-shot {
  margin: 0;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .12);
  background: #0a0b10;
  box-shadow:
    0 44px 96px -42px rgba(0, 0, 0, .92),
    0 0 0 1px rgba(255, 255, 255, .03) inset;
  transition-delay: .12s;
}
.service-hero-shot img { display: block; width: 100%; height: auto; }

@media (max-width: 980px) {
  .service-hero-split { grid-template-columns: 1fr; }
  /* Visual leads on mobile: it explains the service faster than the
     headline and stops the hero opening on a block of text. */
  .service-hero-shot { order: -1; max-width: 34rem; margin-bottom: 1.5rem; }
}
@media (max-width: 640px) {
  .service-hero-shot { border-radius: 12px; }
  .service-hero-actions .btn { flex: 1 1 auto; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .service-hero-shot { transition: none; }
}

/*──────────────────────────────────────────────────────────
  INDIVIDUAL SERVICE HEROES — TEN DISTINCT CINEMATIC SYSTEMS
  The shared structure preserves brand consistency. Every service slug
  changes the crop, lighting, accent balance, spatial treatment and motion.
──────────────────────────────────────────────────────────*/
.service-landing .service-hero{
  --hero-x:0px;--hero-y:0px;--hero-scale:1.035;
  position:relative;isolation:isolate;display:flex;align-items:flex-end;
  min-height:clamp(760px,96vh,1080px);padding:0;overflow:hidden;background:#050509;
}
.service-landing .service-hero>.atmos{display:none}
.service-landing .service-hero-media{position:absolute;inset:-3%;z-index:-4;overflow:hidden}
.service-landing .service-hero-img{
  width:100%;height:100%;object-fit:cover;object-position:center;
  transform:translate3d(var(--hero-x),var(--hero-y),0) scale(var(--hero-scale));
  filter:saturate(.92) contrast(1.04);will-change:transform;
  transition:transform 1.1s var(--ease-expo),filter 1s ease;
}
.service-landing .service-hero-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(3,4,9,.96) 0%,rgba(3,4,9,.82) 32%,rgba(3,4,9,.26) 64%,rgba(3,4,9,.08) 100%),linear-gradient(0deg,rgba(3,3,7,.94) 0%,transparent 42%),linear-gradient(180deg,rgba(3,3,7,.42),transparent 28%)}
.service-hero-grain{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.12;mix-blend-mode:soft-light;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.72'/%3E%3C/svg%3E")}
.service-landing .service-hero-content{position:relative;z-index:3;width:min(1400px,calc(100% - clamp(3rem,10vw,8rem)));max-width:none;margin:0 auto;padding:clamp(9rem,18vh,13rem) 0 clamp(4.5rem,8vh,6.5rem)}
.service-hero-copy{width:min(760px,62vw)}
.service-hero-meta{display:flex;align-items:center;gap:1.1rem;margin-bottom:clamp(1.4rem,3vh,2.4rem);color:rgba(255,255,255,.5);font-size:.6rem;font-weight:650;letter-spacing:.17em;text-transform:uppercase}
.service-hero-meta span:first-child{color:var(--svc-accent-start);padding-right:1.1rem;border-right:1px solid rgba(255,255,255,.2)}
.service-landing .service-hero-eyebrow{margin-bottom:1.25rem;color:rgba(255,255,255,.78);font-size:.66rem;letter-spacing:.17em}
.service-landing .service-hero-title{max-width:12.5ch;margin:0;font-family:var(--font-display);font-size:clamp(3.6rem,7.3vw,7.6rem);font-weight:570;line-height:.88;letter-spacing:-.069em;text-wrap:balance;text-shadow:0 8px 42px rgba(0,0,0,.35)}
.service-landing .service-hero-intro{max-width:570px;margin-top:1.6rem;color:rgba(234,235,242,.72);font-size:clamp(.92rem,1.22vw,1.08rem);line-height:1.7}
.service-landing .service-hero-actions{display:flex;gap:.7rem;margin-top:2rem}.service-landing .service-hero-actions .btn{min-height:50px;backdrop-filter:blur(12px)}
.service-landing .service-hero-actions .btn-outline{background:rgba(6,7,12,.24);border-color:rgba(255,255,255,.24)}
.service-landing .service-hero-trust{display:flex;flex-wrap:wrap;gap:.7rem 1.8rem;margin:2.2rem 0 0;padding:1.25rem 0 0;border-top:1px solid rgba(255,255,255,.13);list-style:none;color:rgba(255,255,255,.56);font-size:.68rem;letter-spacing:.035em}
.service-landing .service-hero-trust li{position:relative;padding-left:.9rem}.service-landing .service-hero-trust li::before{content:"";position:absolute;left:0;top:.52em;width:4px;height:4px;border-radius:50%;background:var(--svc-accent-start);box-shadow:0 0 10px var(--svc-accent-start)}
.service-hero-scroll{position:absolute;z-index:4;right:clamp(1.5rem,4vw,3.5rem);bottom:clamp(2.4rem,5vh,4rem);display:flex;flex-direction:column;align-items:center;gap:.65rem;color:rgba(255,255,255,.5);text-decoration:none}.service-hero-scroll span{position:relative;width:1px;height:54px;overflow:hidden;background:rgba(255,255,255,.18)}.service-hero-scroll span::after{content:"";position:absolute;inset:0;background:var(--svc-accent-start);transform:translateY(-100%);animation:svcHeroScroll 2.4s ease-in-out infinite}.service-hero-scroll small{font-size:.53rem;letter-spacing:.18em;text-transform:uppercase;writing-mode:vertical-rl}@keyframes svcHeroScroll{50%,100%{transform:translateY(100%)}}
.service-hero-fx{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}.service-hero-fx span{position:absolute;display:block;opacity:0}
.service-hero.is-ready .service-hero-meta{animation:svcCopyIn .8s .05s both}.service-hero.is-ready .service-hero-eyebrow{animation:svcCopyIn .85s .12s both}.service-hero.is-ready .service-hero-title{animation:svcTitleIn 1.05s .16s both}.service-hero.is-ready .service-hero-intro{animation:svcCopyIn .9s .28s both}.service-hero.is-ready .service-hero-actions{animation:svcCopyIn .9s .36s both}.service-hero.is-ready .service-hero-trust{animation:svcCopyIn .9s .44s both}@keyframes svcCopyIn{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}@keyframes svcTitleIn{from{opacity:0;transform:translateY(42px);filter:blur(8px)}to{opacity:1;transform:none;filter:none}}

/* 01 — Web: measured construction lines and horizontal scan. */
.service-hero--web-development{--svc-accent-start:#29d3df;--svc-accent-end:#29d3df}
.service-hero--web-development .service-hero-fx__one{opacity:.24;inset:14% 6% 10% 47%;border:1px solid rgba(79,140,255,.38);background-image:linear-gradient(rgba(255,255,255,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.1) 1px,transparent 1px);background-size:72px 72px;animation:webGrid 10s ease-in-out infinite alternate}
.service-hero--web-development .service-hero-fx__two{opacity:.55;top:18%;right:8%;width:1px;height:64%;background:linear-gradient(transparent,#67e8ed,transparent);animation:webScan 4.8s ease-in-out infinite}
@keyframes webGrid{to{transform:perspective(800px) rotateY(-3deg) translateX(-18px)}}@keyframes webScan{0%,100%{transform:translateX(-220px);opacity:0}45%,55%{opacity:.7}100%{transform:translateX(80px)}}

/* 02 — Commerce: warm purchase path and rotating halo. */
.service-hero--ecommerce-solutions{--svc-accent-start:#22c7d6;--svc-accent-end:#0b8fa3}
.service-hero--ecommerce-solutions .service-hero-overlay{background:linear-gradient(90deg,rgba(8,3,11,.97) 0%,rgba(8,3,11,.82) 34%,rgba(8,3,11,.2) 68%),linear-gradient(0deg,#08030b 0%,transparent 45%)}
.service-hero--ecommerce-solutions .service-hero-fx__one,.service-hero--ecommerce-solutions .service-hero-fx__two{opacity:.5;right:11%;top:20%;width:300px;height:300px;border:1px solid rgba(34,199,214,.38);border-radius:50%;animation:commerceOrbit 13s linear infinite}.service-hero--ecommerce-solutions .service-hero-fx__two{inset:auto 5% 5% auto;width:520px;height:180px;border-color:rgba(11,143,163,.26);transform:rotate(-12deg);animation-direction:reverse;animation-duration:18s}@keyframes commerceOrbit{to{rotate:360deg}}

/* 03 — Mobile: device-like vertical rhythm and slow spatial tilt. */
.service-hero--mobile-app-development{--svc-accent-start:#29d3df;--svc-accent-end:#22c7d6}
.service-hero--mobile-app-development .service-hero-img{transform-origin:72% 52%}.service-hero--mobile-app-development.is-ready .service-hero-img{animation:mobileFloat 7s ease-in-out infinite alternate}
.service-hero--mobile-app-development .service-hero-fx__one{opacity:.65;right:7%;top:14%;width:2px;height:70%;background:linear-gradient(transparent,#29d3df,#22c7d6,transparent);animation:mobileRail 3.8s ease-in-out infinite}.service-hero--mobile-app-development .service-hero-fx__two{opacity:.25;right:28%;top:20%;width:180px;height:180px;border:1px solid #29d3df;border-radius:50%;animation:commerceOrbit 14s linear infinite}@keyframes mobileFloat{to{transform:translate3d(var(--hero-x),calc(var(--hero-y) - 9px),0) scale(1.055) rotate(.25deg)}}@keyframes mobileRail{50%{transform:translateY(12%);filter:blur(2px)}}

/* 04 — Marketing: outward signal pulses and drawn growth ray. */
.service-hero--digital-marketing{--svc-accent-start:#00a8a1;--svc-accent-end:#22c7d6}
.service-hero--digital-marketing .service-hero-fx__one,.service-hero--digital-marketing .service-hero-fx__two{opacity:0;right:8%;bottom:12%;width:120px;height:120px;border:1px solid rgba(45,212,191,.65);border-radius:50%;animation:marketingPulse 4.2s ease-out infinite}.service-hero--digital-marketing .service-hero-fx__two{animation-delay:2.1s}.service-hero--digital-marketing .service-hero-fx__three{opacity:.6;right:12%;top:12%;width:2px;height:58%;background:linear-gradient(transparent,#00a8a1,transparent);transform:rotate(41deg);transform-origin:bottom;animation:signalRay 3.5s ease-in-out infinite alternate}@keyframes marketingPulse{0%{opacity:.55;transform:scale(.35)}100%{opacity:0;transform:scale(4)}}@keyframes signalRay{from{clip-path:inset(100% 0 0)}to{clip-path:inset(0)}}

/* 05 — UI/UX & Branding: refined crop, alignment guides, swatch sweep. */
.service-hero--ui-ux-branding{--svc-accent-start:#44dbe3;--svc-accent-end:#22c7d6}
.service-hero--ui-ux-branding .service-hero-overlay{background:linear-gradient(90deg,rgba(9,5,18,.96) 0%,rgba(9,5,18,.78) 36%,rgba(9,5,18,.14) 70%),linear-gradient(0deg,#090512 0%,transparent 44%)}
.service-hero--ui-ux-branding .service-hero-fx__one{opacity:.42;right:9%;top:13%;width:42%;height:62%;border:1px solid rgba(255,255,255,.22);animation:brandGuide 6s ease-in-out infinite alternate}.service-hero--ui-ux-branding .service-hero-fx__two{opacity:.36;right:14%;top:19%;width:34%;height:1px;background:linear-gradient(90deg,#44dbe3,#22c7d6);box-shadow:0 110px 0 rgba(192,132,252,.55),0 220px 0 rgba(34,199,214,.42);animation:brandSweep 5s ease-in-out infinite}@keyframes brandGuide{to{transform:translate(-10px,8px);border-color:rgba(192,132,252,.5)}}@keyframes brandSweep{50%{transform:translateY(36px)}}

/* 06 — AI: breathing orchestration core and sequenced nodes. */
.service-hero--ai-automation{--svc-accent-start:#007f93;--svc-accent-end:#29d3df}
.service-hero--ai-automation .service-hero-fx__one{opacity:.45;right:8%;top:16%;width:390px;height:390px;border:1px solid rgba(139,92,246,.38);border-radius:50%;box-shadow:0 0 80px rgba(139,92,246,.12) inset;animation:aiBreathe 4.8s ease-in-out infinite}.service-hero--ai-automation .service-hero-fx__two,.service-hero--ai-automation .service-hero-fx__three,.service-hero--ai-automation .service-hero-fx__four{opacity:.8;width:6px;height:6px;border-radius:50%;background:#29d3df;box-shadow:0 0 18px #29d3df;animation:aiNode 3s ease-in-out infinite}.service-hero--ai-automation .service-hero-fx__two{right:18%;top:25%}.service-hero--ai-automation .service-hero-fx__three{right:35%;top:44%;animation-delay:1s}.service-hero--ai-automation .service-hero-fx__four{right:14%;bottom:25%;animation-delay:2s}@keyframes aiBreathe{50%{transform:scale(1.08);opacity:.7}}@keyframes aiNode{50%{transform:scale(2.2);opacity:.2}}

/* 07 — Cloud: vertical deployment scan and descending particles. */
.service-hero--cloud-devops{--svc-accent-start:#29d3df;--svc-accent-end:#fbbf24}
.service-hero--cloud-devops .service-hero-fx__one{opacity:.52;right:9%;top:8%;width:44%;height:2px;background:linear-gradient(90deg,transparent,#29d3df,transparent);box-shadow:0 0 24px #29d3df;animation:cloudDeploy 5s ease-in-out infinite}.service-hero--cloud-devops .service-hero-fx__two{opacity:.25;right:25%;top:8%;width:1px;height:72%;background:repeating-linear-gradient(0deg,#29d3df 0 5px,transparent 5px 13px);animation:cloudRain 5s linear infinite}@keyframes cloudDeploy{0%,100%{transform:translateY(0);opacity:0}20%{opacity:.65}80%{opacity:.65}100%{transform:translateY(60vh);opacity:0}}@keyframes cloudRain{to{background-position:0 72px}}

/* 08 — Software: modular masks lock into an architectural core. */
.service-hero--software-development{--svc-accent-start:#006f82;--svc-accent-end:#0b8fa3}
.service-hero--software-development .service-hero-fx__one,.service-hero--software-development .service-hero-fx__two{opacity:.28;right:9%;top:17%;width:18%;height:26%;border:1px solid rgba(0,111,130,.7);animation:softwareLock 5.5s var(--ease-expo) infinite}.service-hero--software-development .service-hero-fx__two{right:28%;top:48%;width:13%;height:20%;border-color:rgba(11,143,163,.55);animation-delay:1.4s}@keyframes softwareLock{0%,100%{transform:translate(34px,-24px);opacity:0}35%,75%{transform:none;opacity:.35}}

/* 09 — Creative: aperture rotation and cinematic light sweep. */
.service-hero--creative-media{--svc-accent-start:#22c7d6;--svc-accent-end:#007f93}
.service-hero--creative-media .service-hero-overlay{background:linear-gradient(90deg,rgba(10,3,12,.96) 0%,rgba(10,3,12,.8) 34%,rgba(10,3,12,.15) 68%),linear-gradient(0deg,#0a030c 0%,transparent 43%)}
.service-hero--creative-media .service-hero-fx__one{opacity:.28;right:8%;top:12%;width:390px;height:390px;border:2px dashed rgba(34,199,214,.6);border-radius:50%;animation:commerceOrbit 22s linear infinite}.service-hero--creative-media .service-hero-fx__two{opacity:.38;top:20%;right:-8%;width:60%;height:3px;background:linear-gradient(90deg,transparent,#fff,transparent);box-shadow:0 0 38px #22c7d6;transform:rotate(-18deg);animation:creativeSweep 5s ease-in-out infinite}@keyframes creativeSweep{0%,100%{translate:30% 0;opacity:0}45%,60%{translate:-25% 0;opacity:.5}}

/* 10 — Support: calm concentric shield rotation and diagnostic sweep. */
.service-hero--maintenance-support{--svc-accent-start:#0096a6;--svc-accent-end:#00a8a1}
.service-hero--maintenance-support .service-hero-fx__one,.service-hero--maintenance-support .service-hero-fx__two{opacity:.38;right:8%;top:15%;width:390px;height:390px;border:1px solid rgba(0,168,161,.38);border-radius:50%;animation:guardRotate 18s linear infinite}.service-hero--maintenance-support .service-hero-fx__two{inset:22% 13% auto auto;width:290px;height:290px;animation-direction:reverse;animation-duration:13s}.service-hero--maintenance-support .service-hero-fx__three{opacity:.5;right:7%;top:50%;width:42%;height:1px;background:linear-gradient(90deg,transparent,#00a8a1,transparent);animation:guardScan 4s ease-in-out infinite}@keyframes guardRotate{to{rotate:360deg}}@keyframes guardScan{0%,100%{transform:translateY(-110px);opacity:0}50%{transform:translateY(110px);opacity:.6}}

@media(max-width:980px){.service-landing .service-hero{min-height:880px}.service-landing .service-hero-media{inset:0}.service-landing .service-hero-img{object-position:62% center}.service-landing .service-hero-overlay{background:linear-gradient(0deg,rgba(3,4,9,.98) 0%,rgba(3,4,9,.86) 40%,rgba(3,4,9,.2) 78%),linear-gradient(90deg,rgba(3,4,9,.65),transparent)}.service-landing .service-hero-content{width:min(100% - 2.4rem,1400px);padding-bottom:4rem}.service-hero-copy{width:min(720px,100%)}.service-landing .service-hero-title{font-size:clamp(3.2rem,11vw,6rem)}.service-hero-scroll{display:none}.service-hero-fx{opacity:.7}}
@media(max-width:640px){.service-landing .service-hero{min-height:max(760px,100svh)}.service-landing .service-hero-content{width:calc(100% - 2rem);padding-top:8rem;padding-bottom:2.5rem}.service-landing .service-hero-img{object-position:68% center}.service-landing .service-hero-title{font-size:clamp(2.85rem,14vw,4.8rem);line-height:.91}.service-landing .service-hero-intro{font-size:.86rem;line-height:1.55}.service-landing .service-hero-actions{flex-direction:column}.service-landing .service-hero-actions .btn{width:100%}.service-landing .service-hero-trust{gap:.55rem 1rem;margin-top:1.35rem;padding-top:1rem}.service-landing .service-hero-trust li{font-size:.59rem}.service-hero-meta{margin-bottom:1.1rem}.service-hero-fx{opacity:.48}}
@media(prefers-reduced-motion:reduce){.service-landing .service-hero-img,.service-hero-fx span,.service-hero-scroll span::after{animation:none!important;transition:none!important}.service-hero.is-ready .service-hero-meta,.service-hero.is-ready .service-hero-eyebrow,.service-hero.is-ready .service-hero-title,.service-hero.is-ready .service-hero-intro,.service-hero.is-ready .service-hero-actions,.service-hero.is-ready .service-hero-trust{animation:none!important}}