/* ==========================================================================
   ZODIAC TECH SOFT — SERVICE LANDING PAGES
   Extends animatic.css using the same tokens, type scale, rhythm and
   animation language. No rule here overrides an existing selector, so the
   approved pages keep rendering byte-for-byte as before. Loaded only on
   /<service>/ pages.
   ========================================================================== */

/* ---------- Hero breadcrumb ---------- */
.svc-crumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: clamp(22px, 4vh, 34px);
  font-size: 9.5px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.svc-crumbs a { color: var(--muted-2); transition: color .3s ease; }
.svc-crumbs a:hover { color: var(--gold); }
.svc-crumbs span[aria-hidden] { opacity: .45; }
.svc-crumbs [aria-current] { color: var(--paper); }

/* ---------- Cinematic hero backdrop ----------
   A blurred 640x400 derivative of the service plate (~1.6 KB) sits behind the
   hero type and drifts slowly. The full-size plate stays below the fold as the
   overview figure, so nothing extra is fetched at full resolution. */
.page-hero__plate { position: absolute; inset: 0; }
.page-hero__plate img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .58;
  transform: scale(1.1);
  transform-origin: 62% 40%;
  animation: svc-plate-drift 38s ease-in-out infinite alternate;
  will-change: transform;
}
.page-hero__plate::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(4, 6, 11, .55) 0%, rgba(4, 6, 11, .35) 38%, rgba(4, 6, 11, .78) 80%, rgba(4, 6, 11, .96) 100%),
    radial-gradient(70% 55% at 68% 30%, rgba(4, 6, 11, 0) 0%, rgba(4, 6, 11, .62) 100%);
}
@keyframes svc-plate-drift {
  from { transform: scale(1.1) translate3d(-1.1%, 0, 0); }
  to   { transform: scale(1.15) translate3d(1.1%, -.8%, 0); }
}

/* ---------- Shared section furniture ---------- */
.svc-sec { position: relative; padding: var(--sec) 0; }
.svc-sec--dark { background: var(--bg); color: var(--white); }
.svc-sec--soft { background: var(--bg-soft); color: var(--white); border-top: 1px solid var(--line-soft); }
.svc-sec--paper { background: var(--paper); color: var(--ink); }
.svc-sec--paper2 { background: var(--paper-2); color: var(--ink); }
.svc-sec--paper .micro,
.svc-sec--paper2 .micro { color: var(--ink-mute); }
.svc-sec--paper h2 em,
.svc-sec--paper2 h2 em { color: var(--gold-deep); }

.svc-sec--tight { padding-bottom: 0; }

.svc-subhead {
  margin-top: 16px;
  font-size: clamp(22px, 2.6vw, 32px);
  line-height: 1.08;
  letter-spacing: -.03em;
  font-weight: 700;
}
.svc-subhead__note {
  margin-top: 16px;
  max-width: 520px;
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--ink-soft);
}

.svc-head { max-width: 780px; margin-bottom: clamp(36px, 5vw, 62px); }
.svc-head h2 {
  margin-top: 16px;
  font-size: clamp(30px, 4.2vw, 56px);
  line-height: 1.02;
  letter-spacing: -.04em;
  font-weight: 700;
}
.svc-sec--paper h2 em,
.svc-sec--paper2 h2 em { color: var(--gold-deep); }
.svc-sec--dark h2 em,
.svc-sec--soft h2 em { color: var(--gold); }
.svc-head p { margin-top: 16px; max-width: 620px; font-size: 13.5px; line-height: 1.75; color: var(--muted); }
.svc-sec--paper .svc-head p { color: var(--ink-soft); }
.svc-sec--paper2 .svc-head p { color: var(--ink-soft); }

/* ---------- Overview: copy + plate ---------- */
.svc-overview__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(32px, 6vw, 88px);
  align-items: start;
}
.svc-copy p { font-size: 14px; line-height: 1.8; color: var(--muted); }
.svc-copy p + p { margin-top: 18px; }
.svc-copy .svc-copy__lead {
  font-size: clamp(15px, 1.45vw, 18px);
  line-height: 1.7;
  color: var(--paper);
}
.svc-copy h2 {
  margin: 18px 0 22px;
  font-size: clamp(28px, 3.6vw, 46px);
  line-height: 1.04;
  letter-spacing: -.04em;
  font-weight: 700;
}
.svc-copy h2 em { color: var(--gold); }

.svc-figure {
  position: relative;
  display: flex;
  flex-direction: column;
  margin: 0;
  border: 1px solid var(--line);
  background: var(--bg-card);
  overflow: hidden;
}
.svc-figure::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 62%, rgba(4, 6, 11, .55));
}
.svc-figure__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.svc-figure__media img {
  position: absolute;
  inset: -6% 0;
  width: 100%;
  height: 112%;
  object-fit: cover;
  transform: translate3d(0, var(--parallax-y, 0px), 0);
  transition: transform .55s var(--ease);
}
.svc-figure figcaption {
  position: relative;
  z-index: 1;
  padding: 13px 16px 14px;
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted-2);
  border-top: 1px solid var(--line-soft);
}

/* ---------- Scope cards ---------- */
.svc-scope__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line-soft);
  border-left: 1px solid var(--line-soft);
}
.svc-card {
  padding: clamp(22px, 2.6vw, 34px);
  border-right: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  background: linear-gradient(180deg, rgba(255, 255, 255, .022), transparent 60%);
  transition: background .4s ease;
}
.svc-card:hover { background: rgba(255, 255, 255, .035); }
.svc-card__num { display: block; font-size: 9px; letter-spacing: .14em; color: var(--gold); }
.svc-card h3 { margin-top: 14px; font-size: 16px; font-weight: 600; letter-spacing: -.015em; color: var(--paper); }
.svc-card p { margin-top: 10px; font-size: 12.5px; line-height: 1.7; color: var(--muted); }

/* ---------- Included + deliverables ---------- */
.svc-included__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
.svc-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.svc-pill {
  padding: 8px 14px;
  font-size: 10.5px;
  letter-spacing: .04em;
  color: var(--ink-soft);
  border: 1px solid var(--line-ink);
  border-radius: 999px;
  background: rgba(255, 255, 255, .5);
}
.svc-check { margin-top: 22px; }
.svc-check li {
  position: relative;
  padding: 12px 0 12px 26px;
  border-bottom: 1px solid var(--line-ink);
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink);
}
.svc-check li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 18px;
  width: 7px;
  height: 7px;
  border: 1px solid var(--gold-deep);
  transform: rotate(45deg);
}
.svc-sec--paper2 .svc-pill { background: rgba(255, 255, 255, .55); }

/* ---------- Fit / problems ---------- */
.svc-fit__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 44px) clamp(32px, 5vw, 80px);
}
.svc-fit__item { padding-top: 18px; border-top: 1px solid var(--line-soft); }
.svc-fit__item h3 { font-size: 15px; font-weight: 600; letter-spacing: -.01em; color: var(--paper); }
.svc-fit__item p { margin-top: 9px; font-size: 12.5px; line-height: 1.7; color: var(--muted); }

.svc-problems { margin-top: clamp(44px, 6vw, 78px); border-top: 1px solid var(--line-soft); }
.svc-problem {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(18px, 3vw, 54px);
  padding: clamp(20px, 2.4vw, 30px) 0;
  border-bottom: 1px solid var(--line-soft);
}
.svc-problem dt { font-size: 14px; font-weight: 600; letter-spacing: -.01em; color: var(--paper); }
.svc-problem dt span { display: block; margin-bottom: 8px; font-size: 9px; letter-spacing: .14em; color: var(--gold); }
.svc-problem dd { font-size: 12.5px; line-height: 1.75; color: var(--muted); }

/* ---------- Process steps ---------- */
.svc-steps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 28px);
  counter-reset: svcstep;
}
.svc-step {
  position: relative;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.svc-step::before {
  content: '';
  position: absolute;
  top: -3.5px;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 14px rgba(230, 189, 122, .55);
}
.svc-step__num { font-size: 9px; letter-spacing: .14em; color: var(--gold); }
.svc-step h3 { margin-top: 12px; font-size: 14.5px; font-weight: 600; letter-spacing: -.01em; color: var(--paper); }
.svc-step p { margin-top: 8px; font-size: 12px; line-height: 1.7; color: var(--muted); }

/* ---------- Stack ---------- */
.svc-stack { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(22px, 3vw, 44px); }
.svc-stack__group h3 {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line-soft);
}
.svc-stack__group ul { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 7px; }
.svc-chip {
  padding: 6px 11px;
  font-size: 10.5px;
  letter-spacing: .03em;
  color: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, .018);
}

/* ---------- Outcomes ---------- */
.svc-outcomes__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line-ink); }
.svc-outcome { padding: 22px 18px 0 0; border-right: 1px solid var(--line-ink); }
.svc-outcome:last-child { border-right: 0; }
.svc-outcome__num { font-family: var(--serif); font-style: italic; font-size: 30px; line-height: 1; color: var(--gold-deep); }
.svc-outcome h3 { margin-top: 12px; font-size: 13.5px; font-weight: 600; color: var(--ink); }
.svc-outcome p { margin-top: 8px; font-size: 12px; line-height: 1.7; color: var(--ink-soft); }

/* ---------- Related services ---------- */
.svc-related__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--line-soft);
  border-left: 1px solid var(--line-soft);
}
.svc-related__card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: clamp(20px, 2.4vw, 30px);
  border-right: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  transition: background .35s ease, color .35s ease;
}
.svc-related__card:hover { background: rgba(255, 255, 255, .035); }
.svc-related__card span { font-size: 9px; letter-spacing: .14em; color: var(--gold); }
.svc-related__card strong { font-size: 15px; font-weight: 600; letter-spacing: -.015em; color: var(--paper); }
.svc-related__card i { font-style: normal; font-size: 11px; color: var(--muted-2); transition: transform .35s var(--ease); }
.svc-related__card:hover i { transform: translate(2px, -2px); color: var(--gold); }
.svc-related__foot { margin-top: 26px; }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .svc-overview__grid,
  .svc-included__grid { grid-template-columns: minmax(0, 1fr); }
  .svc-scope__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .svc-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .svc-stack { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .svc-outcomes__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .svc-outcome { padding-bottom: 20px; border-bottom: 1px solid var(--line-ink); }
  .svc-outcome:nth-child(2n) { border-right: 0; }
  .svc-related__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .svc-figure { margin-top: 6px; }
}

@media (max-width: 640px) {
  .svc-scope__grid,
  .svc-steps,
  .svc-stack,
  .svc-fit__grid,
  .svc-related__grid { grid-template-columns: minmax(0, 1fr); }
  .svc-problem { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .svc-outcomes__grid { grid-template-columns: minmax(0, 1fr); }
  .svc-outcome { border-right: 0; }
  .svc-card { padding: 22px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .svc-card,
  .svc-related__card,
  .svc-related__card i { transition: none; }
  .page-hero__plate img { animation: none; }
  .svc-figure__media img { transition: none; }
}

/* ---------- Compact service register (services.php) ---------- */
.svc-register {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--line-soft);
  border-left: 1px solid var(--line-soft);
}
.svc-register a {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 14px 16px;
  border-right: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--muted);
  transition: color .3s ease, background .3s ease;
}
.svc-register a span { flex: none; font-size: 9px; letter-spacing: .1em; color: var(--gold); }
.svc-register a:hover { color: var(--paper); background: rgba(255, 255, 255, .03); }
@media (max-width: 980px) { .svc-register { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .svc-register { grid-template-columns: minmax(0, 1fr); } }

/* Hero eyebrow row: keep each label intact when the row wraps on small screens */
@media (max-width: 640px) {
  .page-hero--service .page-hero__top { flex-wrap: wrap; gap: 6px 16px; }
  .page-hero--service .page-hero__top .micro { flex: 0 0 auto; }
}