/* One page per service (service-*.html): the centred hero (.ip-rooted--center in v2/v2.css), problem,
   what we do, process, tagged case studies (the home page's carousel, in spotlight.css), the other six services
   and a closing CTA. The split hero below (.svc-hero) is Token Ledger's. */

.svc-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.svc-hero-copy, .svc-hero-art { min-width: 0; }
.svc-hero .p-hero-title { max-width: 16ch; color: var(--ink); }
.svc-hero .lede { color: var(--text-muted); }
.svc-hero .btn-line { color: var(--ink); box-shadow: inset 0 0 0 1px rgba(14, 37, 27, .2); }
.svc-hero .btn-line:hover { box-shadow: inset 0 0 0 1px var(--ink); }
.svc-hero-art { position: relative; }
.svc-hero-art .stage { color: var(--paper); }

.svc-detail .feats { margin-top: clamp(1.5rem, 3vw, 2.25rem); }
.svc-detail .feats--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.svc-link {
  display: inline-flex; align-items: center; gap: .45rem; margin-top: 1.4rem; color: var(--mint); font-weight: 500; text-decoration: none;
}
.svc-link svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform 250ms var(--ease-out, ease-out); }
.svc-link:hover svg { transform: translateX(4px); }
.svc-note { margin: 1.25rem 0 0; max-width: 58rem; font-size: .9rem; line-height: 1.55; color: var(--text-muted); }
#agents .pat-sub { margin: 0 0 1rem; }
#agents .pat-cards + .pat-sub { margin-top: 2.75rem; }
#problem .section-head h2 { max-width: none; }
@media (min-width: 961px) {
  #problem .security-places--text { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  #problem .security-places--text li,
  #problem .security-places--text li:nth-child(3n) { border-right: 1px solid var(--security-rule); border-bottom: 0; }
  #problem .security-places--text li:nth-child(4n) { border-right: 0; }
}
.dark .svc-note { color: var(--on-dark-muted); }
.svc-note a { color: inherit; font-weight: 500; text-underline-offset: 3px; }
.security-places--tabs [role="tabpanel"] a { color: #C2410C; font-weight: 600; text-decoration: none; text-underline-offset: 3px; } /* a deeper Tangerine: Tangerine itself is too light to read as text on Fashion White */
@media (hover: hover) and (pointer: fine) { .security-places--tabs [role="tabpanel"] a:hover { text-decoration: underline; } }
.security-places--tabs [role="tabpanel"] a:focus-visible { text-decoration: underline; }

.svc-points, .svc-fit, .svc-steps {
  display: grid; gap: 12px; list-style: none; margin: clamp(1.5rem, 3vw, 2.25rem) 0 0; padding: 0;
}
.svc-points { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.svc-points li, .svc-fit > article, .svc-steps li {
  display: grid; align-content: start; gap: .55rem; padding: 1.25rem; border: 1px solid rgba(14, 37, 27, .12);
  border-radius: var(--radius); background: var(--white);
}
.svc-points li { border-top: 3px solid var(--forest); }
.svc-points b, .svc-fit h3, .svc-steps b { font-weight: 500; letter-spacing: -0.02em; line-height: 1.25; }
.svc-points p, .svc-fit li, .svc-steps p { margin: 0; font-size: .93rem; line-height: 1.5; color: var(--text-muted); }
.svc-fit { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.svc-fit h3 { margin: 0; font-size: 1.15rem; }
.svc-fit ul { display: grid; gap: .45rem; margin: 0; padding-left: 1.1rem; }
.svc-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.svc-steps--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.svc-step-n { font-size: .85rem; letter-spacing: .06em; color: var(--forest); font-variant-numeric: tabular-nums; }
.svc-steps b { font-size: 1.15rem; }

/* The problem told one screen per step (Custom Agent and App Development, ML and Enterprise Forecasting): the copy scrolls on the left and the
   sticky image on the right changes to the screen for the step in view (service-story.js). The images are
   drawn at 2x for a 620 × 460 slot; below 960px each step shows its own image instead. */
.svc-story-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 620px); gap: clamp(2.5rem, 6vw, 6rem); align-items: start; }
.svc-story-steps { display: grid; padding-bottom: 14vh; }
.svc-story-open { min-height: 70vh; padding-bottom: 2.5rem; }
.svc-story-open .section-intro { margin-top: 1.75rem; max-width: 44ch; }
.svc-story-step { display: grid; align-content: center; gap: .75rem; min-height: 64vh; opacity: .3; transition: opacity 400ms var(--ease-out, ease-out); }
.svc-story-step.is-on { opacity: 1; }
.svc-story-n {
  display: grid; place-items: center; width: 34px; height: 34px; border: 1.5px solid var(--ink); border-radius: 50%;
  font-size: .9rem; font-weight: 500; font-variant-numeric: tabular-nums;
  transition: background-color 300ms ease, border-color 300ms ease, color 300ms ease;
}
.svc-story-step.is-on .svc-story-n { background: var(--tangerine); border-color: var(--tangerine); color: var(--white); }
.svc-story-step h3 { max-width: 18ch; font-size: clamp(1.5rem, 2.4vw, 2rem); letter-spacing: -0.04em; line-height: 1.08; }
.svc-story-step p { max-width: 36ch; font-size: 1.1rem; line-height: 1.5; color: var(--text-muted); }
.svc-story-stage { position: sticky; top: max(calc(var(--nav-h, 68px) + 24px), calc(50vh - 196px)); aspect-ratio: 620 / 460; }
.svc-story-shot {
  position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 16px;
  opacity: 0; transform: translateY(10px); transition: opacity 450ms var(--ease-out, ease-out), transform 600ms var(--ease-out, ease-out);
}
.svc-story-shot.is-on { opacity: 1; transform: none; }
.svc-story-inline { display: none; margin: 1.5rem 0 0; }
.svc-story-inline img { display: block; width: 100%; height: auto; border-radius: 12px; }

/* The same story with a line (Custom Agent and App Development): the opening gets its own row beside the first
   screen, then a Tangerine line fills through the numbers as you scroll. Each step rises in as it arrives and stays
   lit once the line reaches it, as How we work does on the home page (service-story-line.js). */
.svc-story--line .svc-story-steps { padding-bottom: 0; }
.svc-story--line .svc-story-open { min-height: 0; padding-bottom: 0; }
.svc-line-list { position: relative; display: grid; gap: clamp(5.5rem, 16vh, 9rem); margin: 0; padding: 0 0 16vh; list-style: none; }
.svc-line-rail { position: absolute; left: 16px; width: 2px; background: rgba(14, 37, 27, .14); }
.svc-line-fill { position: absolute; inset: 0 0 auto; height: calc(var(--p, 0) * 100%); background: var(--tangerine); }
.svc-line-step { position: relative; padding-left: 3.5rem; }
.svc-line-step .svc-story-n { position: absolute; top: 0; left: 0; z-index: 1; background: var(--paper); }
.svc-line-step.is-on .svc-story-n { background: var(--tangerine); border-color: var(--tangerine); color: var(--white); }
.svc-line-txt { opacity: .18; transform: translateY(24px); transition: opacity 600ms var(--ease-out, ease-out), transform 600ms var(--ease-out, ease-out); }
.svc-line-step.is-in .svc-line-txt { opacity: 1; transform: none; }
.svc-line-txt h3 { max-width: 24ch; font-size: clamp(1.5rem, 2.4vw, 2rem); letter-spacing: -0.04em; line-height: 1.08; }
.svc-line-txt p { max-width: 42ch; margin-top: .6rem; font-size: 1.1rem; line-height: 1.5; color: var(--text-muted); }
@media (min-width: 961px) {
  /* The opening is as tall as the screen beside it, so step 1 starts below both */
  .svc-story--line .svc-story-open { min-height: min(460px, calc((100vw - 8rem) * .34)); }
  .svc-line-list { margin-top: clamp(4rem, 11vh, 6.5rem); }
}
@media (max-width: 960px) {
  .svc-line-list { gap: 4.75rem; margin-top: 1rem; padding-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .svc-line-txt { transition: none; }
}

.svc-others-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; list-style: none; margin: 0; padding: 0; }
/* Seven cards: four across, then three, so none is left alone on a row */
@media (min-width: 1100px) { .svc-others-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.svc-others-grid a { display: grid; gap: .5rem; align-content: start; height: 100%; padding: 1.25rem; border: 1px solid rgba(14, 37, 27, .12); border-radius: var(--radius); background: var(--white); color: var(--ink); text-decoration: none; transition: border-color 200ms, transform 250ms var(--ease-out, ease-out); }
.svc-others-grid a:hover, .svc-others-grid a:focus-visible { border-color: var(--forest); transform: translateY(-3px); }
.svc-others-grid b { font-weight: 500; font-size: 1.1rem; letter-spacing: -0.02em; }
.svc-others-grid span { font-size: .92rem; line-height: 1.5; color: var(--text-muted); }
.svc-mark { width: 36px; height: 36px; padding: 7px; border-radius: 9px; background: var(--forest); fill: none; stroke: var(--mint); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

@media (prefers-reduced-motion: reduce) {
  .svc-others-grid a, .svc-story-step, .svc-story-n, .svc-story-shot { transition: none; }
  .svc-story-shot { transform: none; }
}
@media (max-width: 960px) {
  .svc-hero-grid { grid-template-columns: minmax(0, 1fr); }
  .svc-story-grid { grid-template-columns: minmax(0, 1fr); }
  .svc-story-stage { display: none; }
  .svc-story-steps { gap: 3rem; padding-bottom: 0; }
  .svc-story-open, .svc-story-step { min-height: 0; padding-bottom: 0; }
  .svc-story-step { opacity: 1; }
  .svc-story-inline { display: block; }
  .svc-detail .feats--3, .svc-points, .svc-steps, .svc-others-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .svc-detail .feats--3, .svc-points, .svc-fit, .svc-steps, .svc-others-grid { grid-template-columns: minmax(0, 1fr); }
}