:root {
  --sp-paper:#efefe9;
  --sp-ink:#171717;
  --sp-muted:#777872;
  --sp-line:#d4d4cc;
  --sp-dark:#151515;
  --sp-acid:#d9f21a;
  --sp-red:#ef1b1b;
  --sp-white:#fff;
  --sp-ease:cubic-bezier(.2, .8, .2, 1)
}
.service-page {
  background:var(--sp-paper);
  color:var(--sp-ink);
  overflow-x:hidden
}
.service-page .site-header {
  z-index:100
}
.service-page .service-nav {
  position:fixed;
  top:18px;
  left:5%;
  right:5%;
  z-index:1000;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 14px 10px 20px;
  border:1px solid #fff9;
  border-radius:60px;
  background:#ffffffb8;
  backdrop-filter:blur(20px);
  box-shadow:0 18px 60px #00000012
}
.service-brand {
  color:#111;
  text-decoration:none;
  line-height:.8;
  letter-spacing:-.05em
}
.service-brand b {
  font-size:19px
}
.service-brand strong {
  font-size:19px
}
.service-brand small {
  display:block;
  font-size:7px;
  letter-spacing:.22em;
  margin-top:7px;
  color:#777
}
.service-nav-links {
  display:flex;
  align-items:center;
  gap:25px
}
.service-nav-links a {
  font-size:10px;
  font-weight:800;
  text-decoration:none;
  color:#171717
}
.service-nav-cta {
  padding:13px 18px;
  border-radius:30px;
  background:#111;
  color:#fff!important
}
.service-hero {
  min-height:92vh;
  padding:170px 6% 95px;
  display:flex;
  align-items:end;
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:linear-gradient(125deg, #f0f0e9, #e8e9dc)
}
.service-hero:before, .service-hero:after {
  content:"";
  position:absolute;
  border-radius:50%;
  filter:blur(15px);
  z-index:-1;
  animation:spFloat 9s ease-in-out infinite
}
.service-hero:before {
  width:480px;
  height:480px;
  right:-150px;
  top:70px;
  background:#d9f21a55
}
.service-hero:after {
  width:360px;
  height:360px;
  left:-130px;
  bottom:-140px;
  background:#ef1b1b38;
  animation-delay:-3s
}
.service-hero-inner {
  max-width:1100px
}
.service-tag, .sp-kicker {
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:9px;
  letter-spacing:.22em;
  font-weight:900;
  color:#777
}
.service-tag:before {
  content:"";
  width:24px;
  height:1px;
  background:var(--sp-red)
}
.service-hero h1 {
  font-size:clamp(62px, 10vw, 150px);
  line-height:.78;
  letter-spacing:-.09em;
  margin:25px 0 35px;
  max-width:1050px
}
.service-hero h1 span, .service-section h2 strong, .service-cta h2 strong {
  font-style:normal;
  background:linear-gradient(100deg, var(--sp-red), #e7df14, var(--sp-acid));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent
}
.service-hero p {
  max-width:690px;
  font-size:17px;
  line-height:1.65;
  color:#666;
  margin:0
}
.service-points {
  display:flex;
  gap:18px;
  flex-wrap:wrap;
  margin:28px 0
}
.service-points span {
  padding:10px 14px;
  border:1px solid #d0d0c8;
  border-radius:30px;
  background:#fff8;
  font-size:10px;
  font-weight:800
}
.service-points i {
  margin-right:7px;
  color:#ef1b1b
}
.sp-button {
  display:inline-flex;
  align-items:center;
  gap:15px;
  background:#111;
  color:#fff;
  text-decoration:none;
  border-radius:40px;
  padding:17px 22px;
  font-size:11px;
  font-weight:900;
  transition:transform .4s var(--sp-ease), box-shadow .4s
}
.sp-button:hover {
  transform:translateY(-4px);
  box-shadow:0 18px 35px #0002
}
.service-section {
  padding:125px 6%;
  position:relative
}
.service-section.dark-section {
  background:#151515;
  color:#fff
}
.sp-container {
  max-width:1350px;
  margin:auto
}
.service-intro-grid {
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:90px;
  align-items:center
}
.service-section h2 {
  font-size:clamp(50px, 6.5vw, 100px);
  line-height:.84;
  letter-spacing:-.08em;
  margin:18px 0 30px
}
.service-section p {
  line-height:1.7;
  color:#777;
  font-size:14px
}
.dark-section p {
  color:#aaa
}
.sp-checks {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-top:30px
}
.sp-checks div {
  font-size:11px;
  font-weight:800
}
.sp-checks i {
  display:inline-grid;
  place-items:center;
  width:22px;
  height:22px;
  border-radius:50%;
  background:#111;
  color:#d9f21a;
  margin-right:8px;
  font-size:9px
}
.sp-glass-stack {
  display:grid;
  gap:16px;
  transform:rotate(2deg)
}
.sp-glass-card {
  padding:35px;
  border:1px solid #fff9;
  background:#ffffff9c;
  backdrop-filter:blur(18px);
  border-radius:25px;
  box-shadow:0 25px 70px #00000010;
  transition:transform .6s var(--sp-ease)
}
.sp-glass-card:nth-child(2) {
  margin-left:60px;
  background:#111;
  color:#fff
}
.sp-glass-card:hover {
  transform:translateY(-8px) rotate(-1deg)
}
.sp-glass-card i {
  font-size:28px;
  margin-bottom:30px
}
.sp-glass-card strong {
  display:block;
  font-size:24px;
  letter-spacing:-.05em
}
.sp-glass-card span {
  font-size:10px;
  color:#777
}
.sp-glass-card:nth-child(2) span {
  color:#aaa
}
.sp-gallery-head {
  text-align:center;
  max-width:850px;
  margin:0 auto 55px
}
.sp-gallery-head h2 {
  margin-bottom:18px
}
.sp-gallery {
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:18px
}
.sp-work-card {
  height:510px;
  position:relative;
  overflow:hidden;
  border-radius:22px;
  background:linear-gradient(135deg, #ddd, #888, #222);
  box-shadow:0 18px 55px #00000012
}
.sp-work-card .sp-photo {
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  transition:transform 1s var(--sp-ease), filter .6s
}
.sp-work-card:after {
  content:"";
  position:absolute;
  inset:45% 0 0;
  background:linear-gradient(transparent, #000b)
}
.sp-work-card:hover .sp-photo {
  transform:scale(1.08);
  filter:saturate(1.12)
}
.sp-overlay {
  position:absolute;
  z-index:2;
  left:25px;
  right:25px;
  bottom:25px;
  color:#fff
}
.sp-overlay span {
  font-size:9px;
  letter-spacing:.18em;
  color:#d9f21a
}
.sp-overlay h3 {
  font-size:32px;
  line-height:.95;
  letter-spacing:-.05em;
  margin:8px 0
}
.sp-info-grid {
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:15px
}
.sp-info-card {
  padding:32px;
  background:#fff;
  border:1px solid var(--sp-line);
  border-radius:24px;
  min-height:250px;
  transition:transform .5s var(--sp-ease), box-shadow .5s
}
.sp-info-card:hover {
  transform:translateY(-9px);
  box-shadow:0 25px 60px #00000010
}
.sp-info-icon {
  width:48px;
  height:48px;
  border-radius:15px;
  display:grid;
  place-items:center;
  background:#111;
  color:#d9f21a;
  margin-bottom:35px
}
.sp-info-card h3 {
  font-size:22px;
  letter-spacing:-.04em;
  margin:0 0 10px
}
.sp-info-card p {
  font-size:12px;
  margin:0
}
.sp-app-grid {
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:15px
}
.sp-app-card {
  min-height:230px;
  border:1px solid #333;
  border-radius:24px;
  padding:30px;
  transition:transform .5s var(--sp-ease), background .5s
}
.sp-app-card:hover {
  transform:translateY(-8px);
  background:#1f1f1f
}
.sp-app-card i {
  font-size:28px;
  color:#d9f21a
}
.sp-app-card h3 {
  font-size:22px;
  margin:35px 0 8px
}
.sp-app-card p {
  font-size:12px;
  margin:0
}
.sp-process-grid {
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:15px
}
.sp-process-card {
  position:relative;
  padding:35px 25px;
  border-radius:24px;
  background:#111;
  color:#fff;
  min-height:310px;
  overflow:hidden
}
.sp-process-card:before {
  content:"";
  position:absolute;
  width:160px;
  height:160px;
  border-radius:50%;
  right:-70px;
  top:-70px;
  background:#d9f21a22
}
.sp-process-card>span {
  font-size:10px;
  color:#888
}
.sp-process-card i {
  display:block;
  font-size:28px;
  color:#d9f21a;
  margin:40px 0 25px
}
.sp-process-card h3 {
  font-size:24px;
  margin:0 0 10px
}
.sp-process-card p {
  font-size:12px;
  color:#aaa;
  margin:0
}
.service-cta {
  padding:130px 6%;
  text-align:center;
  background:linear-gradient(120deg, #101010, #252525);
  color:#fff;
  position:relative;
  overflow:hidden
}
.service-cta:before {
  content:"";
  position:absolute;
  width:500px;
  height:500px;
  border-radius:50%;
  background:#d9f21a18;
  filter:blur(10px);
  left:50%;
  top:-380px;
  transform:translateX(-50%)
}
.service-cta-inner {
  position:relative;
  z-index:1;
  max-width:850px;
  margin:auto
}
.service-cta h2 {
  font-size:clamp(55px, 8vw, 110px);
  line-height:.82;
  letter-spacing:-.08em;
  margin:20px 0 35px
}
.service-cta p {
  max-width:650px;
  margin:0 auto 35px;
  color:#aaa;
  line-height:1.7;
  font-size:14px
}
.sp-buttons {
  display:flex;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap
}
.sp-call {
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:16px 22px;
  border:1px solid #555;
  border-radius:40px;
  color:#fff;
  text-decoration:none;
  font-size:11px;
  font-weight:900
}
.service-footer {
  padding:55px 6%;
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:30px;
  background:#efefe9;
  border-top:1px solid #d2d2cb
}
.service-footer h3 {
  margin:0;
  font-size:20px
}
.service-footer small {
  display:block;
  color:#777;
  letter-spacing:.18em;
  margin-top:7px
}
.service-footer h4 {
  margin:0 0 14px;
  font-size:10px;
  letter-spacing:.12em
}
.service-footer a {
  display:block;
  text-decoration:none;
  color:#555;
  font-size:11px;
  margin:9px 0
}
.service-footer a:hover {
  color:#111
}
.service-footer-bottom {
  grid-column:1/-1;
  border-top:1px solid #d2d2cb;
  padding-top:18px;
  font-size:9px;
  color:#888
}
.service-page .aos-init {
  will-change:transform, opacity
}
@keyframes spFloat {
  0%, 100% {
    transform:translate3d(0, 0, 0)
  }
  50% {
    transform:translate3d(0, -25px, 0)
  }
}
@media(max-width:1000px) {
  .service-nav-links {
    display:none
  }
  .service-intro-grid {
    grid-template-columns:1fr;
    gap:50px
  }
  .sp-gallery, .sp-info-grid, .sp-app-grid {
    grid-template-columns:1fr 1fr
  }
  .sp-process-grid {
    grid-template-columns:1fr 1fr
  }
  .service-footer {
    grid-template-columns:1fr 1fr
  }
}
@media(max-width:650px) {
  .service-nav {
    left:3%;
    right:3%;
    top:10px
  }
  .service-brand b, .service-brand strong {
    font-size:16px
  }
  .service-hero {
    min-height:760px;
    padding:140px 6% 70px
  }
  .service-hero h1 {
    font-size:clamp(54px, 16vw, 86px)
  }
  .service-hero p {
    font-size:14px
  }
  .service-points {
    gap:8px
  }
  .service-points span {
    font-size:9px
  }
  .service-section {
    padding:90px 6%
  }
  .sp-checks {
    grid-template-columns:1fr
  }
  .sp-glass-card:nth-child(2) {
    margin-left:20px
  }
  .sp-gallery, .sp-info-grid, .sp-app-grid, .sp-process-grid {
    grid-template-columns:1fr
  }
  .sp-work-card {
    height:420px
  }
  .service-footer {
    grid-template-columns:1fr;
    gap:28px
  }
  .service-cta {
    padding:100px 6%
  }
}
.sp-work-card .sp-photo:not(.loaded) {
  background:linear-gradient(135deg, #252525, #5b5b5b 50%, #111)
}
.sp-work-card .sp-photo:not(.loaded)::before {
  content:"YOUR PHOTO";
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  color:#ffffff66;
  font-size:12px;
  font-weight:900;
  letter-spacing:.28em
}
.sp-work-card .sp-photo {
  display:grid;
  place-items:center
}
/* AI-GENERATED SIGNAGE GALLERY MOTION: Subtle entrance and hover movement for project images. */
.sp-work-card .sp-photo {
  animation: bkPhotoReveal 900ms ease both;
  will-change: transform, filter;
}
.sp-work-card:nth-child(2) .sp-photo {
  animation-delay: 90ms;
}
.sp-work-card:nth-child(3) .sp-photo {
  animation-delay: 180ms;
}
.sp-work-card:nth-child(4) .sp-photo {
  animation-delay: 270ms;
}
.sp-work-card:hover .sp-photo {
  transform: scale(1.07);
  filter: saturate(1.12) brightness(1.06);
}
@keyframes bkPhotoReveal {
  from {
    opacity: .55;
    transform: scale(1.035);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .sp-work-card .sp-photo {
    animation: none;
    transition: none;
  }
}