/* ════════════════════════════════════════════════════
   SERVICE SUBPAGE — extends home-page.css design system.
   Relies on home-page.css for: .container, .eyebrow,
   .section-title, .section-header-center, .reveal,
   .page-hero*, .hero-shape-*, .hero-cut, .btn-hero-primary,
   .ar-marquee*, .portfolio-* (Featured Projects reuse the
   homepage portfolio cards), nav, footer, .cta-section.
   ════════════════════════════════════════════════════ */

/* ─── HERO (photo + stronger overlay for legibility) ── */
.svc-hero {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Darker, brand-tinted scrim than the default .page-hero so white
   type stays legible over a full-bleed photo. */
.svc-hero::before {
  background: linear-gradient(120deg, rgba(10,25,41,0.92) 0%, rgba(13,36,48,0.78) 55%, rgba(24,64,80,0.62) 100%);
}

.svc-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

.svc-hero-eyebrow-icon {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  border: 1.5px solid rgba(196,176,148,0.5);
  background: rgba(196,176,148,0.12);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.svc-hero-eyebrow-icon svg { width: 15px; height: 15px; color: var(--tan); }

/* ─── WHAT WE HELP (3 tan-outline boxes) ───────────── */
.svc-boxes {
  background: var(--white);
  padding: 104px 0 100px;
}

.svc-box-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 56px;
}

/* Tan-outline, NON-clickable, static (no hover lift) — matches the
   About page's informational boxes, distinct from clickable cards. */
.svc-box {
  background: transparent;
  border: 1.5px solid var(--tan);
  border-radius: 16px;
  padding: 34px 30px 32px;
}

.svc-box-icon {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  border: 1.5px solid var(--tan);
  background: rgba(196,176,148,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
}

.svc-box-icon svg { width: 26px; height: 26px; color: var(--tan-dk); }

.svc-box-title {
  font-family: var(--display);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--navy-dk);
  line-height: 1.25;
  margin-bottom: 11px;
}

.svc-box-desc {
  font-family: var(--body);
  font-size: 14.5px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--muted);
}

/* ─── CORE TECHNOLOGIES (text marquee) ─────────────── */
.svc-tech {
  background: var(--navy-dk);
  padding: 120px 0 132px;
  position: relative;
  overflow: hidden;
}

/* angle cut from the white boxes section above */
.svc-tech::before {
  content: '';
  position: absolute;
  top: -2px;
  left: 0;
  right: 0;
  height: 70px;
  background: var(--white);
  clip-path: polygon(0 0, 100% 0, 100% 28%, 0 100%);
}

.svc-tech-head {
  text-align: center;
  margin-bottom: 60px;
  position: relative;
  z-index: 1;
}

.svc-tech-head .section-title { color: white; margin-bottom: 0; }

.svc-tech-marquee { -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }

/* gap: 0 + margin-right on each pill ensures the loop point is seamless.
   CSS flex gap omits spacing after the last item, causing a jump at -50%;
   margin-right applies to every item including the last, fixing the seam. */
.svc-tech-track { gap: 0; }

.svc-tech-pill {
  flex: 0 0 auto;
  font-family: var(--display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: rgba(255,255,255,0.82);
  border: 1px solid rgba(196,176,148,0.32);
  background: rgba(255,255,255,0.04);
  border-radius: 9999px;
  padding: 11px 24px;
  white-space: nowrap;
  margin-right: 16px;
}

/* ─── FEATURED PROJECTS ────────────────────────────── */
.svc-projects {
  background: var(--off-white);
  padding: 104px 0 112px;
}

/* ════════════════════════════════════════════════════
   MOTION LAYER (rides the shared .reveal → .visible
   IntersectionObserver; no extra JS). The boxes stay
   static on hover — the only accent is the icon settling
   in as its box reveals.
   ════════════════════════════════════════════════════ */
.svc-box-icon {
  transform: scale(0.9);
  opacity: 0;
  transition: transform 0.5s var(--ease) 0.15s, opacity 0.4s var(--ease) 0.15s;
}
.svc-box.visible .svc-box-icon {
  transform: scale(1);
  opacity: 1;
}

/* Let visitors stop the marquee to read a pill (pointer devices only). */
@media (hover: hover) and (pointer: fine) {
  .svc-tech-marquee:hover .svc-tech-track { animation-play-state: paused; }
}

@media (prefers-reduced-motion: reduce) {
  .svc-box-icon { transition: none; transform: none; opacity: 1; }
  .svc-tech-track { animation: none; }
}

/* ─── RESPONSIVE ───────────────────────────────────── */
@media (max-width: 900px) {
  .svc-box-grid { grid-template-columns: 1fr; max-width: 480px; margin-left: auto; margin-right: auto; }
}