/* Evidencia y forma de colaboración: mismos estilos en portada y experiencia. */
.client-work { margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--line-strong); }
.work-eyebrow { margin: 0; color: var(--copper); font-size: 13px; line-height: 1.7; font-weight: 600; }
.client-work h3, .work-sample h3 { margin: 12px 0 0; max-width: 30ch; font: 400 28px/1.3 var(--site-font-serif); }
.client-work-heading { display: grid; gap: 20px; }
.client-work-heading > p, .client-work-secondary > div > p { margin: 0; color: var(--ink-soft); font-size: 16px; line-height: 1.75; }
.work-figure { margin: 28px 0 0; }
.work-figure figcaption { margin-bottom: 16px; color: var(--ink); font-size: 16px; font-weight: 600; }
.work-flow { display: grid; gap: 1px; margin: 0; padding: 0; list-style: none; border: 1px solid var(--line); border-radius: var(--site-radius-card); overflow: clip; background: var(--line); }
.work-flow > li { min-width: 0; padding: 22px; background: var(--ivory); }
.work-step { display: block; margin-bottom: 16px; color: var(--teal); font-size: 14px; font-weight: 600; }
.work-flow h4 { margin: 0; color: var(--ink); font: 600 16px/1.5 var(--site-font-sans); }
.work-flow p { margin: 12px 0 0; color: var(--ink-soft); font-size: 15px; line-height: 1.75; }
.work-note { margin: 14px 0 0; color: var(--stone); font-size: 14px; line-height: 1.7; }
.work-links { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 20px; }
.work-links a, .work-sample-link { display: inline-block; padding-block: 10px; color: var(--copper); font-size: 15px; line-height: 1.7; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
.client-work-secondary { display: grid; gap: 20px; margin-top: 28px; }
.work-sample { display: grid; gap: 20px; margin-top: 32px; padding: 24px; background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--teal); border-radius: var(--site-radius-card); }
.work-sample h3 { max-width: 36ch; font-size: 24px; }
.work-sample p:not(.work-eyebrow):not(.work-note) { margin: 14px 0 0; max-width: 70ch; font-size: 15px; line-height: 1.75; color: var(--ink-soft); }
.work-sample-link { align-self: center; }
.contact-layout { grid-template-areas: "intro" "form" "method"; align-items: start; }
.contact-intro { grid-area: intro; }
.contact-method { grid-area: method; }
.contact-layout .contact-form-panel { grid-area: form; }
.contact-next-steps { display: grid; gap: 18px; counter-reset: contact-step; margin: 28px 0 0; padding: 0; list-style: none; }
.contact-next-steps li { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 12px; counter-increment: contact-step; font-size: 15px; line-height: 1.7; }
.contact-next-steps li::before { content: counter(contact-step, decimal-leading-zero); grid-row: span 2; color: var(--teal-on-dark); font-size: 14px; font-weight: 600; }
.contact-next-steps strong { color: var(--ivory); font-weight: 600; }
.contact-next-steps span { grid-column: 2; color: var(--ivory); }
.contact-agreement { margin-top: 24px; border-top: 1px solid var(--navy-line); border-bottom: 1px solid var(--navy-line); font-size: 15px; line-height: 1.75; }
.contact-agreement summary { padding-block: 14px; color: var(--ivory); cursor: pointer; }
.contact-agreement summary:focus-visible { outline: 2px solid var(--copper-on-dark); outline-offset: 3px; }
.contact-agreement p { margin: 0; padding-bottom: 18px; color: var(--ivory); }
@media (min-width: 640px) {
  .work-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
  .client-work-heading, .client-work-secondary { grid-template-columns: 1fr 1fr; gap: 40px; }
  .work-sample { grid-template-columns: minmax(0, 1fr) minmax(160px, .4fr); gap: 32px; padding: 28px; }
}
@media (min-width: 1024px) {
  .work-flow { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .contact-layout { grid-template-areas: "intro form" "method form"; grid-template-rows: auto 1fr; }
}