/* Svc-link row — the service link strip under hero CTAs.
   Promoted from page-tier (front-page.css) to component.
   Notes: docs/mock-component-map.md (proposed section) */

/* No-JS fallback. */
.no-js .persist-svc-link,
.no-js .persist-svc-sep{
  opacity:1!important;
  transform:none!important;
}

.persist-svc-grid{
  display:flex;flex-wrap:wrap;
  justify-content:center;align-items:center;
  column-gap:0;row-gap:.4rem;
  margin-top:2.5rem;
  /* The parent layer is pointer-events:none; this opts back in. */
  pointer-events:auto;
}
/* Sizing is bounded by .hero-content, which is max-width:1000px, NOT by the
   viewport. The old clamp grew to 1.55rem at a 1550px viewport, so between
   1000px and 1550px the type kept growing inside a box that had already
   stopped, and the row wrapped to two lines on wide screens while staying on
   one line on narrow ones. 2vw reaches the 1.25rem ceiling at exactly 1000px,
   which is where the container caps, so the two stop together. */
.persist-svc-link{
  font-family:var(--display);
  font-size:clamp(1rem,2vw,1.25rem);
  font-weight:500;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:rgba(255,255,255,.9);
  text-shadow:0 2px 20px rgba(0,0,0,.9),0 0 40px rgba(0,0,0,.6);
  white-space:nowrap;
  opacity:0;

  transition:opacity .8s ease,transform .8s cubic-bezier(.22,1,.36,1),color .3s ease;
}
.persist-svc-link.fly-left{transform:translateX(-110px)}
.persist-svc-link.fly-right{transform:translateX(110px)}
.persist-svc-link.landed{opacity:1;transform:translateX(0)}
.persist-svc-link:hover{color:var(--gold)}
/* No underline; gold hover carries the affordance. */
.persist-svc-sep{
  color:var(--gold);
  font-family:var(--display);
  font-size:clamp(1rem,2vw,1.25rem);
  font-weight:700;
  margin:0 .5em;
  text-shadow:0 0 15px rgba(254,192,39,.4);
  opacity:0;
  transition:opacity .8s ease;
}
.persist-svc-sep.landed{opacity:1}

@media (prefers-reduced-motion:reduce){
  .persist-svc-link{opacity:1;transform:none!important;transition:none}
  .persist-svc-sep{opacity:1;transition:none}
}

@media(max-width:768px){
  /* Phone: the row wraps, so separators come out and column-gap spaces it. */
  .persist-svc-link{font-size:clamp(.75rem,3vw,1rem);letter-spacing:.1em}
  .persist-svc-sep{display:none}
  .persist-svc-grid{column-gap:1.4rem;row-gap:.5rem}
}