/* Static product illustrations; deliberately independent of the menu demo. */
/* Keep the skip destination focusable without outlining the whole section. */
#how-it-works:focus { outline: none; }
.service-intro {
  padding-block: 64px 42px;
  border-block: 1px solid var(--line);
}
.service-intro-title {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 32px;
  margin-bottom: 32px;
}
.service-intro .section-kicker { margin: 9px 0 0; }
.service-intro h2 {
  font-size: clamp(2.25rem, 3.6vw, 3.25rem);
  line-height: 1.1;
  letter-spacing: -.025em;
  margin: 0;
  width: 66.2%;
}
.service-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 44px;
  padding: 0;
  margin: 0;
  list-style: none;
}
.service-steps li { min-width: 0; }
.service-art {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 380 / 290;
  margin-bottom: 24px;
  overflow: visible;
  font-family: var(--body);
  fill: var(--ink);
}
.service-art .art-title { font-family: var(--display); font-weight: 600; }
.service-art .art-muted { fill: #68686f; }
.service-art .art-red { fill: var(--red); }
.service-art .art-bold { font-weight: 700; }
.service-step-copy {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 14px;
  border-top: 1px solid var(--line);
  padding-top: 21px;
}
.service-step-number { color: #a21720; font-size: .8125rem; padding-top: 5px; font-weight: 600; }
.service-steps h3 { font-size: 1.5rem; line-height: 1.25; margin: 0 0 10px; letter-spacing: -.02em; }
.service-steps p { font-size: 1rem; color: var(--muted); line-height: 1.65; margin: 0; }
.service-context {
  display: flex;
  justify-content: space-between;
  gap: 32px;
  align-items: baseline;
  margin-top: 38px;
}
.service-context p { margin: 0; max-width: 700px; font-size: 1rem; line-height: 1.7; color: var(--muted); }
.service-context small { flex-shrink: 0; font-size: .75rem; color: var(--muted); }
@media (max-width: 1100px) {
  .service-steps { gap: 24px; }
  .service-step-copy { gap: 8px; grid-template-columns: 24px minmax(0, 1fr); }
  .service-steps h3 { font-size: 1.35rem; }
  .service-context { display: block; }
  .service-context small { display: block; margin-top: 14px; }
}
@media (max-width: 700px) {
  .service-intro { padding-block: 40px 32px; }
  .service-intro-title { display: block; margin-bottom: 22px; }
  .service-intro .section-kicker { margin: 0 0 20px; }
  .service-intro h2 { width: auto; max-width: 350px; }
  .service-steps { grid-template-columns: 1fr; gap: 38px; }
  .service-art { max-width: 380px; margin: 0 auto 16px; }
  .service-step-copy { grid-template-columns: 28px minmax(0, 1fr); gap: 12px; padding-top: 18px; }
  .service-steps h3 { font-size: 1.5rem; }
  .service-context { margin-top: 32px; border-top: 1px solid var(--line); padding-top: 24px; }
}