/* SERVICES: the offer. Three productized tiers, a care-plan note, and the
   process. Hairline grammar, no boxed pricing cards, no slop. */

.s-services {
  background: var(--paper);
  padding-top: var(--section-gap);
}

/* ---------- head ---------- */

.services-label {
  margin-bottom: clamp(1.5rem, 4vh, 2.5rem);
}

.services-headline {
  max-width: 16ch;
}

.services-sub {
  margin-top: clamp(1.25rem, 3vh, 2rem);
  max-width: 56ch;
  font-size: clamp(1.05rem, 1.5vw, 1.35rem);
  line-height: 1.5;
  color: var(--ink-soft);
}

/* ---------- the three tiers ---------- */

.services-tiers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 3.5rem);
  margin-top: clamp(3.5rem, 9vh, 6rem);
}

/* Editorial columns, not SaaS cards: a hairline ledger, generous air. */
.svc-tier {
  position: relative;
  display: flex;
  flex-direction: column;
  padding-top: 1.6rem;
  border-top: 2px solid var(--ink);
}

/* Hover choreography in the house grammar (echoes the cap rows): a signal rule
   wipes across the top edge, the index lights, the name leans, the ticks reach. */
.svc-tier::before {
  content: '';
  position: absolute;
  top: -2px;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--signal);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.55s var(--ease-out);
}

.svc-tier:hover::before,
.svc-tier:focus-within::before {
  transform: scaleX(1);
}

.svc-index {
  color: var(--ink-soft);
  transition: color 0.3s var(--ease-out);
}

.svc-tier:hover .svc-index {
  color: var(--signal);
}

.svc-name {
  margin-top: 1.1rem;
  transition: transform 0.45s var(--ease-out);
}

.svc-tier:hover .svc-name {
  transform: translateX(8px);
}

.svc-line {
  margin-top: 1rem;
  font-size: clamp(1rem, 1.2vw, 1.1rem);
  line-height: 1.5;
  color: var(--ink-soft);
}

.svc-list {
  list-style: none;
  margin: 1.75rem 0 0;
  padding: 0;
}

.svc-list li {
  padding: 0.85rem 0 0.85rem 1.5rem;
  border-top: 1px solid var(--hairline);
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--ink);
  position: relative;
}

/* A small signal tick instead of a bullet. Reaches out as the tier lights up. */
.svc-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 1.35rem;
  width: 9px;
  height: 2px;
  background: var(--signal);
  transition: width 0.45s var(--ease-out);
}

.svc-tier:hover .svc-list li::before {
  width: 17px;
}

.svc-tier:hover .svc-list li:nth-child(2)::before {
  transition-delay: 0.05s;
}

.svc-tier:hover .svc-list li:nth-child(3)::before {
  transition-delay: 0.1s;
}

/* The stage caveat that closes tiers 01 and 02: the honest line about what
   happens when the stage does not go your way. Set quieter than the list, in
   the body voice rather than the mono chrome, hung off a hairline. */
.svc-note {
  margin-top: 1.25rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--hairline);
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

/* CTA: the cap-row lean, not a heavy button (three of them on screen). */
.svc-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin-top: auto;
  padding: 1.5rem 0 0;
  background: none;
  border: 0;
  color: var(--ink);
  font-family: var(--font-sans);
  font-variation-settings: 'wdth' 105, 'wght' 720;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: color 0.3s var(--ease-out);
}

.svc-cta-label {
  position: relative;
}

/* Signal underline wipes in from the left on hover. */
.svc-cta-label::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 100%;
  height: 2px;
  background: var(--signal);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.4s var(--ease-out);
}

.svc-cta:hover,
.svc-cta:focus-visible {
  color: var(--signal);
}

.svc-cta:hover .svc-cta-label::after,
.svc-cta:focus-visible .svc-cta-label::after {
  transform: scaleX(1);
}

.svc-cta-arrow {
  width: 1.9rem;
  height: auto;
  transition: transform 0.4s var(--ease-out);
}

.svc-cta:hover .svc-cta-arrow,
.svc-cta:focus-visible .svc-cta-arrow {
  transform: translateX(5px);
}

/* ---------- care plan note ---------- */

.services-care {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.75rem 1.75rem;
  margin-top: clamp(3rem, 7vh, 5rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--hairline);
}

.care-tag {
  color: var(--signal);
  flex: none;
}

.care-text {
  max-width: 58ch;
  font-size: clamp(0.98rem, 1.2vw, 1.1rem);
  line-height: 1.5;
  color: var(--ink-soft);
}

/* ---------- how it works ---------- */

.services-process {
  margin-top: clamp(4rem, 10vh, 7rem);
}

.process-label {
  margin-bottom: clamp(1.75rem, 4vh, 2.5rem);
}

.process-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

/* Same hover choreography as the tiers and the cap rows: a signal rule wipes
   across the top edge and the index lights. Without it this block was the only
   one on the page with no craft in it, which read as unfinished rather than
   restrained. */
.process-step {
  position: relative;
  padding-top: 1.25rem;
  border-top: 1px solid var(--hairline);
}

.process-step::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--signal);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.55s var(--ease-out);
}

.process-step:hover::before {
  transform: scaleX(1);
}

.step-num {
  color: var(--ink-soft);
  transition: color 0.3s var(--ease-out);
}

.process-step:hover .step-num {
  color: var(--signal);
}

/* The "what you own" clauses ARE the content of each step now (there is no step
   name above them), so they carry ink weight rather than the old caption grey. */
.step-text {
  margin-top: 0.9rem;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ink);
}

/* ---------- tablet / mobile ---------- */

@media (max-width: 900px) {
  .services-tiers {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  .svc-tier {
    padding-bottom: 2.5rem;
  }
  .svc-tier + .svc-tier {
    border-top-width: 1px;
    padding-top: 2.5rem;
  }
  .svc-cta {
    margin-top: 1.75rem;
  }
  .process-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem 1.5rem;
  }
}

@media (max-width: 540px) {
  .process-steps {
    grid-template-columns: minmax(0, 1fr);
  }
}