/* ============================================================
   /services (23 Oct 2026, docs/rulings-2026-10-23.md section 3)
   Type and colour come from the Alchemi design system (Inter for content, JetBrains Mono for structure,
   aero blue as the one accent); the brand system overrides human-made-design's font list.
   The approved B hero tests a quiet index against a slim interactive racetrack.
   Requires tokens.css and site.css.
   ============================================================ */

/* ---------- Hero ---------- */
.sv-hero { padding: var(--space-7) 0 var(--space-6); background-image: none; }
.sv-hero::after { content: none; }
.sv-hero > .container { display: block; }
.sv-hero__text { min-width: 0; max-width: 720px; }
.sv-hero .hero__title { font-size: clamp(40px, 4vw, 56px); max-width: none; line-height: 1.08; margin: var(--space-3) 0; }
.sv-hero .hero__lead { font-size: 18px; max-width: none; margin-bottom: var(--space-4); }
.sv-promise { margin: 0 0 var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--ink-700); }
.sv-promise__line { font-size: 20px; font-weight: var(--weight-semibold); line-height: 1.35; letter-spacing: var(--tracking-tight); color: var(--text-inverse); }
.sv-promise__part { margin-top: var(--space-2); font-size: var(--text-sm); line-height: 1.5; color: var(--ink-300); }
.sv-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-6); }
.sv-hero__cta { display: flex; align-items: center; }
/* The Triangle as the second way in (ruling 2026-10-23 s11): the home page's pointer link, quieter than the button */
.sv-hero__alt { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); margin-top: 0; }
.sv-hero__alt .pointer__link { color: var(--text-inverse); border-bottom-color: var(--ink-500); transition: border-color var(--duration-base) var(--ease-standard); }
.sv-hero__alt .pointer__link:hover, .sv-hero__alt .pointer__link:focus-visible { border-bottom-color: var(--text-inverse); }
.sv-hero__alt .pointer__link:focus-visible { outline: 2px solid var(--text-inverse); outline-offset: 4px; }
.sv-hero__alt-sub { margin: 0; max-width: 44ch; font-size: var(--text-sm); line-height: 1.45; color: var(--ink-300); }

.sv-quiet { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); margin-top: var(--space-6); padding-bottom: var(--space-3); }
.sv-quiet::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--ink-600); }
.sv-quiet a { position: relative; color: var(--ink-300); font: 13px/1.5 var(--font-mono); text-decoration: none; }
.sv-quiet a::after { content: ""; position: absolute; left: 0; bottom: -19px; width: 6px; height: 6px; background: var(--ink-300); }
.sv-quiet a:hover, .sv-quiet a:focus-visible { color: var(--text-inverse); }
.sv-quiet__dot { position: absolute; left: 0; bottom: -3px; width: 6px; height: 6px; background: var(--aero-blue); animation: sv-quiet-travel 8s ease-in-out infinite alternate; }
@keyframes sv-quiet-travel { from { left: 0; } to { left: calc(75% + 12px); } }


/* ---------- The four parts ---------- */
.sv-parts__lead { margin-top: var(--space-4); font-size: var(--text-lead); line-height: 1.5; color: var(--text-secondary); max-width: 640px; }
.sv-parts__grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: var(--grid-gutter); align-items: start; }

/* The index: the Method page's section index, with the current part marked in aero */
.sv-index { position: sticky; top: calc(var(--header-height) + 40px); display: flex; flex-direction: column; border-top: 2px solid var(--ink-900); }
.sv-index a {
  display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: baseline; padding: 10px 0;
  border-bottom: 1px solid var(--ink-150); font-family: var(--font-mono); font-size: 13px; letter-spacing: .02em;
  color: var(--ink-500); text-decoration: none; transition: color var(--duration-base) var(--ease-standard), padding var(--duration-base) var(--ease-standard);
}
.sv-index a .mono { font-size: 11px; color: inherit; }
.sv-index a:hover, .sv-index a.is-current { color: var(--ink-900); }
.sv-index a.is-current { border-left: 2px solid var(--aero-blue); padding-left: 10px; }

.sv-list { border-top: 2px solid var(--ink-900); }
.sv-svc {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-4) var(--space-7);
  padding: var(--space-6) 0 var(--space-7); border-bottom: 1px solid var(--border-default);
  scroll-margin-top: calc(var(--header-height) + 24px);
}
.sv-svc__idx { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-3); }
.sv-svc__flag { color: var(--text-primary); }
.sv-svc__title { margin: var(--space-3) 0 var(--space-4); font-size: var(--text-h2, 32px); letter-spacing: -0.02em; }
.sv-signal { margin: 0 0 var(--space-4); padding: var(--space-3) 0; border-top: 1px solid var(--border-strong); border-bottom: 1px solid var(--border-default); max-width: 620px; }
.sv-signal .label { margin-bottom: var(--space-2); }
.sv-signal__text { font-size: var(--text-lead); line-height: 1.5; font-weight: var(--weight-semibold); letter-spacing: var(--tracking-tight); color: var(--text-primary); }
.sv-svc__body { font-size: var(--text-lead); line-height: 1.6; color: var(--ink-700); max-width: 620px; }
.sv-svc__get { padding-top: 6px; }
.sv-svc__get > .label { padding-bottom: var(--space-2); }
.sv-svc--lead .sv-svc__title { font-size: var(--text-section); }

/* Checkmark bullets (design system rule 6) */
.sv-checks { display: flex; flex-direction: column; }
.sv-checks li {
  position: relative; padding: 12px 0 12px 30px; border-top: 1px solid var(--border-subtle);
  font-size: var(--text-body); line-height: 1.45; color: var(--text-primary);
}
.sv-checks li::before {
  content: ""; position: absolute; left: 0; top: 14px; width: 18px; height: 18px;
  background: no-repeat center / 18px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111111' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12L9 17L20 6'/%3E%3C/svg%3E");
}

/* The outbound sequence: a dated rail (design system rule 8) */
.sv-seq { grid-column: 1 / -1; margin-top: var(--space-4); padding: var(--space-5) var(--space-5) var(--space-4); background: var(--bg-subtle); border: 1px solid var(--border-default); }
.sv-seq__head { margin-bottom: var(--space-5); }
.sv-seq__rail { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-3); padding-top: 28px; }
.sv-seq__rail::before, .sv-seq__rail::after { content: ""; position: absolute; left: 7px; right: 7px; top: 6px; height: 2px; background: var(--ink-150); }
.sv-seq__rail::after { background: var(--ink-900); transform-origin: left; transform: scaleX(1); }
.js .sv-seq__rail::after { transform: scaleX(0); transition: transform 1.8s var(--ease-standard); }
.js .sv-seq.is-in .sv-seq__rail::after { transform: scaleX(1); }
.sv-seq__rail li { position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sv-seq__rail li::before { content: ""; position: absolute; top: -28px; left: 0; width: 14px; height: 14px; background: var(--ink-900); z-index: 1; }
.sv-seq__end::before { background: var(--aero-blue) !important; }
.sv-seq__when { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-secondary); }
.sv-seq__what { font-size: var(--text-sm); line-height: 1.45; color: var(--text-primary); }
.sv-seq__note { margin-top: var(--space-5); padding-top: var(--space-3); border-top: 1px solid var(--border-default); font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-secondary); }

/* ---------- How we start ---------- */
.sv-start__body { display: flex; flex-direction: column; gap: var(--space-4); max-width: 720px; }
.sv-start__body .section__title { margin-bottom: var(--space-2); }
.sv-start__body p { font-size: var(--text-lead); line-height: 1.6; color: var(--ink-700); }
.sv-start__body p.sv-start__agency { margin-top: var(--space-3); padding-top: var(--space-4); border-top: 1px solid var(--border-default); font-size: var(--text-body); color: var(--text-secondary); }

/* ---------- Close ---------- */
.sv-close { padding: var(--section-space) 0; background: var(--bg-inverse); color: var(--text-inverse); }
.sv-close .eyebrow { color: var(--ink-300); }
.sv-close .eyebrow::before { background: var(--aero-blue); }
.sv-close__title { margin: var(--space-4) 0 var(--space-6); font-size: var(--text-section); letter-spacing: -0.02em; max-width: 780px; color: var(--text-inverse); }
.sv-close__cta { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3) var(--space-5); }
.sv-close__note { font-size: var(--text-sm); color: var(--ink-300); }
.sv-close__note a { color: var(--text-inverse); }
.sv-close :focus-visible { outline-color: var(--text-inverse); }

/* ---------- Tablet ---------- */
@media (max-width: 960px) {
  .sv-parts__grid { grid-template-columns: 1fr; }
  .sv-index { display: none; }
  .sv-svc { grid-template-columns: 1fr; gap: var(--space-5); }
}

/* ---------- Phone ---------- */
@media (max-width: 720px) {
  .sv-hero__cta .btn { width: 100%; }
  .sv-seq { padding: var(--space-4); }
  .sv-seq__rail { grid-template-columns: 1fr; gap: var(--space-3); padding-top: 0; padding-left: 30px; }
  .sv-seq__rail::before, .sv-seq__rail::after { left: 6px; right: auto; top: 7px; bottom: 7px; width: 2px; height: auto; }
  .sv-seq__rail::after { transform-origin: top; }
  .js .sv-seq__rail::after { transform: scaleY(0); }
  .js .sv-seq.is-in .sv-seq__rail::after { transform: scaleY(1); }
  .sv-seq__rail li::before { top: 2px; left: -30px; }
  .sv-svc__title, .sv-svc--lead .sv-svc__title { font-size: 28px; }
  .sv-svc__body, .sv-start__body p { font-size: var(--text-body); }
  .sv-close__cta { align-items: stretch; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .js .sv-seq__rail::after { transition: none; transform: none; }
  .sv-index a { transition: none; }
}

/* Both arms occupy the same text column. The head script selects before paint. */
[data-sv-loop] { display: none; }
[data-sv-arm="loop"] [data-sv-line] { display: none; }
[data-sv-arm="loop"] [data-sv-loop] { display: block; }
.sv-hero .btn { border-radius: 0; box-shadow: none; }
.sv-race { margin-top: var(--space-6); }
.sv-race__track { position: relative; height: var(--space-6); margin-top: var(--space-5); }
.sv-race__svg { position: absolute; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.sv-race__path { fill: none; stroke: var(--ink-600); stroke-width: 1; }
.sv-race__dot { fill: var(--aero-blue); }
.sv-race__names { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); padding-inline: var(--space-4); top: calc(-1 * var(--space-5)); }
.sv-race__names a { position: relative; padding-bottom: var(--space-3); font: var(--text-label)/1.5 var(--font-mono); color: var(--ink-300); text-decoration: none; }
.sv-race__node { position: absolute; left: -3px; top: 30px; width: 6px; height: 6px; background: var(--ink-300); }
.sv-race__names a.is-active, .sv-race__names a:hover, .sv-race__names a:focus-visible { color: var(--text-inverse); }
.sv-race__names a.is-active .sv-race__node { background: var(--aero-blue); }
.sv-race__names a:focus-visible { outline-color: var(--text-inverse); outline-offset: var(--space-1); }
.sv-race__sentence { position: absolute; left: var(--space-6); right: var(--space-6); top: 0; height: var(--space-6); display: grid; align-items: center; margin: 0; }
.sv-race__caption { grid-area: 1 / 1; opacity: 0; color: var(--ink-300); font-size: var(--text-sm); transition: opacity calc(var(--duration-base) + var(--duration-fast)) var(--ease-standard); }
.sv-race__caption.is-active { opacity: 1; }
.sv-race__return { font: 13px/var(--leading-mono) var(--font-mono); color: var(--ink-400); }
.sv-race__sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (max-width: 720px) {
  .sv-hero { padding: var(--space-7) 0; }
  .sv-quiet { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-4); padding-bottom: 0; }
  .sv-quiet::before, .sv-quiet a::after, .sv-quiet__dot { display: none; }
  .sv-race__track { height: auto; margin-top: 0; }
  .sv-race__svg { display: none; }
  .sv-race__names { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0; top: auto; gap: var(--space-4) var(--space-3); }
  .sv-race__names a { padding: 0 0 0 var(--space-3); min-height: var(--space-5); }
  .sv-race__node { top: 7px; left: 0; }
  .sv-race__caption { transition: none; }
  .sv-race__sentence { position: static; height: auto; margin-top: var(--space-4); }
  .sv-actions { flex-direction: column; align-items: stretch; }
}
@media (prefers-reduced-motion: reduce) {
  .sv-quiet__dot { animation: none; }
  .sv-race__caption { transition: none; }
}