/* ==========================================================================
   sections.css — services, process, about, contact, footer
   ========================================================================== */

.section__head { display: flex; flex-direction: column; gap: var(--s3); margin-bottom: var(--s7); }
.section__head .body-l { max-width: 36rem; }

/* Services ----------------------------------------------------------------- */
.services__grid { row-gap: var(--s7); }
.services__head { grid-column: 1 / -1; display: flex; flex-direction: column; gap: var(--s3); }
.services__tracks { grid-column: 1 / -1; display: flex; flex-direction: column; gap: var(--s6); }
@media (min-width: 1024px) {
  .services__head { grid-column: 1 / span 4; position: sticky; top: 30vh; align-self: start; }
  .services__tracks { grid-column: 5 / -1; gap: var(--s7); }
}
.track__word { padding: 4px 0; color: var(--text); }
.track__promise { margin-top: var(--s2); }
.track__lines { display: flex; flex-direction: column; gap: 8px; margin-top: var(--s3); padding-bottom: var(--s2); font-size: var(--fs-body); color: var(--text-2); }
.track__lines li { position: relative; padding-left: 18px; }
.track__lines li::before { content: ""; position: absolute; left: 0; top: 0.75em; width: 8px; height: 1px; background: var(--text-3); }

/* Process ------------------------------------------------------------------ */
.steps { display: flex; flex-direction: column; }
.step {
  display: grid; grid-template-columns: 56px minmax(0, 1fr); grid-template-areas: "num title" "num body";
  column-gap: var(--s4); row-gap: 4px; padding: var(--s5) 0; border-top: 1px solid var(--line);
  transition: border-color 160ms ease-out;
}
.step:last-child { border-bottom: 1px solid var(--line); }
@media (hover: hover) { .step:hover { border-color: var(--line-strong); } }
.step__num { grid-area: num; color: var(--text-3); font-variant-numeric: tabular-nums; }
.step__title { grid-area: title; }
.step__body { grid-area: body; max-width: 40rem; }
@media (min-width: 1024px) {
  .steps { max-width: calc(var(--max) * 10 / 12); margin-inline: auto; }
  .step { grid-template-columns: 2fr 2fr 6fr; grid-template-areas: "num title body"; min-height: 72px; align-items: baseline; column-gap: var(--s5); }
}

/* About -------------------------------------------------------------------- */
.about__inner { display: flex; flex-direction: column; gap: var(--s6); }
.about__inner .section__head { margin-bottom: 0; }
.about__chips { display: flex; flex-wrap: wrap; gap: var(--s3); }
@media (max-width: 599.98px) { .about__chips .chip { width: 100%; justify-content: center; } }
.about__copy { display: flex; flex-direction: column; gap: var(--s5); }

/* Contact ------------------------------------------------------------------ */
.contact { min-height: 100svh; padding: var(--s10) 0 120px; display: grid; place-items: center; }
@media (min-width: 1024px) { .contact { padding: var(--s11) 0 var(--s9); } }
.contact__inner { text-align: center; max-width: 56rem; display: flex; flex-direction: column; align-items: center; gap: var(--s5); }
.contact__lead { max-width: 32rem; }
.contact__actions { display: flex; flex-direction: column; align-items: center; gap: var(--s4); width: 100%; }
.email-pill {
  position: relative; display: inline-flex; align-items: center; gap: 6px;
  max-width: 100%; min-height: 64px; padding: 0 8px 0 22px; border-radius: var(--r-round);
  background: var(--mat-thin-bg); border: 1px solid var(--line-strong);
  -webkit-backdrop-filter: var(--mat-thin-blur); backdrop-filter: var(--mat-thin-blur);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: transform 160ms var(--ease-out), border-color 120ms ease-out;
}
.email-pill.pressed { transform: scale(0.98); border-color: var(--text-3); }
.email-pill__link { display: inline-flex; align-items: center; gap: 12px; min-height: 48px; color: var(--text); font-family: var(--font-mono); font-weight: 600; font-size: clamp(0.95rem, 3.6vw, 1.25rem); letter-spacing: -0.01em; min-width: 0; }
.email-pill__link .icon { width: 20px; height: 20px; color: var(--text-2); }
.email-pill__addr { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.email-pill__copy { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: var(--text-2); background: var(--mat-thin-bg); transition: transform 160ms var(--ease-out), background-color 120ms ease-out; }
.email-pill__copy .icon { width: 18px; height: 18px; }
.email-pill__copy.pressed { transform: scale(0.9); }
@media (hover: hover) { .email-pill__copy:hover { background: var(--mat-thin-hover); color: var(--text); } }
@media (max-width: 1023.98px) { .email-pill { width: 100%; justify-content: space-between; } }
.copied {
  position: absolute; left: var(--cx, 50%); top: var(--cy, 0%); z-index: 2;
  padding: 6px 12px; border-radius: var(--r-round);
  border: 1px solid var(--success); color: var(--success); background: var(--surface);
  font-size: var(--fs-caption); font-weight: 600; white-space: nowrap; pointer-events: none;
  opacity: 0; transform: translate(-50%, -140%);
}
.copied.is-on { animation: copied-pop 1700ms var(--ease-out) forwards; }
@keyframes copied-pop {
  0% { opacity: 0; transform: translate(-50%, -110%) scale(0.7); }
  12% { opacity: 1; transform: translate(-50%, -150%) scale(1.04); }
  22% { transform: translate(-50%, -140%) scale(1); }
  85% { opacity: 1; transform: translate(-50%, -140%); }
  100% { opacity: 0; transform: translate(-50%, -140%); }
}
html[data-motion="reduced"] .copied.is-on { animation: copied-fade 1700ms linear forwards; }
@keyframes copied-fade { 0%, 90% { opacity: 1; } 100% { opacity: 0; } }
.contact__secondary { display: flex; gap: var(--s4); flex-wrap: wrap; justify-content: center; width: 100%; }
@media (max-width: 599.98px) { .contact__secondary { flex-direction: column; } .contact__secondary .btn { width: 100%; } }
.contact__support { max-width: 34rem; }
.contact__support strong { color: var(--text-2); font-weight: 600; }

/* Footer ------------------------------------------------------------------- */
.footer { border-top: 1px solid var(--line); padding: var(--s6) 0 calc(96px + env(safe-area-inset-bottom)); color: var(--text-2); }
@media (min-width: 1200px) { .footer { padding-bottom: calc(var(--s6) + env(safe-area-inset-bottom)); } }
.footer__inner { display: flex; justify-content: center; text-align: center; }