/* =========================================================================
   CompCode Solutions — RELAY (spec 133)
   The /relay page and the Relay strip on every inner page. Uses beat.css
   tokens and inner.css motion tokens; the run figure's styles come from
   home-motion.css (one source of motion for the run, home and /relay).
   ========================================================================= */

/* ── /relay hero: copy + the run, side by side ────────────────── */
.page-hero--relay{padding-bottom:clamp(40px,5vw,72px)}
.relay-hero{display:grid;gap:clamp(28px,4vw,56px);align-items:center}
@media (min-width:960px){.relay-hero{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}}
.relay-hero .page-hero__title{max-width:9.44em}
.relay-hero .relay-feature__note{margin-top:12px}
.relay-how{counter-reset:none}
.relay-how .why-card{position:relative;padding-top:18px}
.relay-how__no{display:block;margin-bottom:10px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--bronze)}
.relay-tpls{display:grid;gap:16px;margin:8px 0 0;padding:0;list-style:none}
@media (min-width:640px){.relay-tpls{grid-template-columns:1fr 1fr}}
.relay-tpl{display:flex;flex-direction:column;gap:8px;padding:12px 12px 14px;border:1px solid var(--rule);background:var(--ground);
  transition:border-color var(--t-ui),transform var(--t-ui) var(--ease-out)}
.relay-tpl:hover,.relay-tpl:focus-within{border-color:var(--thread);transform:translateY(-2px)}
.relay-tpl__shot{display:block;width:100%;height:auto;aspect-ratio:1280/800;object-fit:cover;object-position:top left;border:1px solid var(--rule);background:var(--paper)}
.relay-tpl__name{margin:4px 0 0;font-size:16px;line-height:1.3;color:var(--ink)}
.relay-tpl__what{margin:0;font-size:14px;line-height:1.5;color:var(--ink-2);flex:1}
.relay-tpl__cta{align-self:flex-start;font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--thread);text-decoration:underline;text-underline-offset:3px}
.relay-tpl__cta:focus-visible{outline:2px solid var(--thread);outline-offset:3px}
.relay-media{margin:28px 0 0}
.relay-media__row{display:grid;gap:16px;margin:0;padding:0;list-style:none}
@media (min-width:900px){.relay-media__row{grid-template-columns:repeat(3,1fr)}}
.relay-media__clip{display:block;width:100%;height:auto;aspect-ratio:1280/800;border:1px solid var(--rule);background:var(--paper)}
.relay-media__cap{margin:10px 0 0;font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--muted)}
.relay-feature__more{margin:12px 0 0;font-size:14.5px}
.relay-feature__more a{color:var(--thread-deep);text-decoration:underline;text-underline-offset:3px}
.relay-feature__more a:focus-visible{outline:2px solid var(--thread);outline-offset:3px}

/* ── the strip: a 4-step mini run above the footer on every inner page ── */
.relay-strip{border-top:1px solid var(--rule);background:var(--paper)}
.relay-strip__in{display:grid;gap:22px;max-width:var(--max);margin-inline:auto;padding:clamp(28px,4vw,48px) var(--gut)}
@media (min-width:900px){.relay-strip__in{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:clamp(24px,5vw,72px)}}
.relay-strip__eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--thread)}
.relay-strip__eyebrow i{width:7px;height:7px;border-radius:50%;background:#2f8f5b;box-shadow:0 0 0 0 rgba(47,143,91,.5)}
html[data-motion="full"] .relay-strip__eyebrow i{animation:rsPulse 2.4s ease-out infinite}
@keyframes rsPulse{0%{box-shadow:0 0 0 0 rgba(47,143,91,.5)}70%{box-shadow:0 0 0 8px rgba(47,143,91,0)}100%{box-shadow:0 0 0 0 rgba(47,143,91,0)}}
.relay-strip h2{font-size:clamp(24px,2.6vw,36px);margin:10px 0 10px;max-width:22ch}
.relay-strip p{color:var(--ink-2);line-height:1.55;max-width:52ch;font-size:15.5px}
.relay-strip__cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.rs{list-style:none;margin:0;padding:clamp(14px,2vw,20px);border:1px solid var(--rule);background:var(--ground);display:grid;gap:10px}
.rs li{display:grid;grid-template-columns:18px 1fr auto;gap:10px;align-items:center;font-size:14px;color:var(--ink-2);opacity:.45;transform:translateX(-4px);
  transition:opacity .4s var(--ease-out),transform .4s var(--ease-out)}
.rs li i{width:18px;height:18px;border-radius:50%;border:2px solid var(--thread);position:relative;background:transparent;transition:background .3s ease}
.rs li i::after{content:"";position:absolute;left:5px;top:2px;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);opacity:0;transition:opacity .2s ease}
.rs li b{font-weight:600;color:var(--ink)}
.rs li small{font-family:var(--mono);font-size:11px;color:var(--muted);letter-spacing:.04em}
/* each step lights after the strip reveals (.rv.in from beat.js); reduced motion / no JS: all done */
.relay-strip.rv.in .rs li,html[data-motion="reduced"] .rs li,html:not(.js) .rs li{opacity:1;transform:none}
.relay-strip.rv.in .rs li i,html[data-motion="reduced"] .rs li i,html:not(.js) .rs li i{background:var(--thread)}
.relay-strip.rv.in .rs li i::after,html[data-motion="reduced"] .rs li i::after,html:not(.js) .rs li i::after{opacity:1}
html[data-motion="full"] .relay-strip.rv.in .rs li:nth-child(1){transition-delay:.15s}
html[data-motion="full"] .relay-strip.rv.in .rs li:nth-child(2){transition-delay:.75s}
html[data-motion="full"] .relay-strip.rv.in .rs li:nth-child(3){transition-delay:1.35s}
html[data-motion="full"] .relay-strip.rv.in .rs li:nth-child(4){transition-delay:1.95s}
html[data-motion="full"] .relay-strip.rv.in .rs li:nth-child(1) i,html[data-motion="full"] .relay-strip.rv.in .rs li:nth-child(1) i::after{transition-delay:.35s}
html[data-motion="full"] .relay-strip.rv.in .rs li:nth-child(2) i,html[data-motion="full"] .relay-strip.rv.in .rs li:nth-child(2) i::after{transition-delay:.95s}
html[data-motion="full"] .relay-strip.rv.in .rs li:nth-child(3) i,html[data-motion="full"] .relay-strip.rv.in .rs li:nth-child(3) i::after{transition-delay:1.55s}
html[data-motion="full"] .relay-strip.rv.in .rs li:nth-child(4) i,html[data-motion="full"] .relay-strip.rv.in .rs li:nth-child(4) i::after{transition-delay:2.15s}
.relay-strip .rs__foot{margin:6px 0 0;font-family:var(--mono);font-size:11px;color:var(--muted)}

/* ── nav: the Relay entry's live dot ─────────────────────────── */
.nav a.nav--relay,.menu a.nav--relay{position:relative;padding-right:12px}
.nav a.nav--relay::before,.menu a.nav--relay::before{content:"";position:absolute;right:0;top:9px;width:6px;height:6px;border-radius:50%;background:#2f8f5b}
.menu a.nav--relay::before{top:50%;right:auto;left:-14px;margin-top:-3px}
html[data-motion="full"] .nav a.nav--relay::before{animation:rsPulse 2.4s ease-out infinite}

/* ── /services: the engagement timeline draws as you scroll (spec 133 R5a) ── */
.run-list{position:relative}
.run-list::before{content:"";position:absolute;left:calc(1.5rem - 1px);top:18px;bottom:18px;width:2px;background:var(--rule)}
.run-list::after{content:"";position:absolute;left:calc(1.5rem - 1px);top:18px;bottom:18px;width:2px;background:var(--thread);transform-origin:top;transform:scaleY(var(--rl,0))}
html[data-motion="reduced"] .run-list::after,html:not(.js) .run-list::after{transform:scaleY(1)}
html[data-motion="reduced"] .run-list__mark,html:not(.js) .run-list__mark{color:var(--ink);font-weight:600}
.run-list__mark{position:relative;z-index:1;align-self:start;justify-self:start;background:var(--ground);padding:4px 6px 4px 0;transition:color var(--t-ui)}
.run-list__row.is-lit .run-list__mark{color:var(--ink);font-weight:600}
.section--alt .run-list__mark{background:var(--paper)}
@media (max-width:599px){.run-list__row{grid-template-columns:2.4rem minmax(0,1fr)}.run-list::before,.run-list::after{left:calc(1.2rem - 1px)}}

/* ── home hero: the quiet third link ─────────────────────────── */
.hero .hero__also{display:inline-block;margin-top:14px;opacity:0;transition:opacity .8s var(--ease-out) 1.1s}
.hero.in .hero__also,.hero .hero__cta.in ~ .hero__also,html[data-motion="reduced"] .hero__also,html:not(.js) .hero__also{opacity:1}
.hero__also{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--thread-deep)}

@media (prefers-reduced-motion:reduce){.rs li,.rs li i,.rs li i::after,.relay-tpl,.relay-media__clip{transition:none;transform:none}}

/* ── footer on phones: one column (was a cramped 4-column grid) ── */
@media (max-width:699px){.ftr__grid{grid-template-columns:1fr!important;gap:22px}}