/* Shared neutral surfaces keep the service color on actions, headings and labels. */
.service-microsoft365 { --accent: #075b73; --signal: #25bdd6; }
.service-automation { --accent: #943c21; --signal: #ff855d; }
.service-development { --accent: #56379c; --signal: #9a81f5; }
.service-website { --accent: #115945; --signal: #38c6a2; }
.service-scs { --accent: #8d3052; --signal: #f283ab; }
.service-story .side-lockup { flex-direction: column; align-items: flex-end; gap: 7px; }
.service-story .side-lockup small { writing-mode: horizontal-tb; font: 700 11px/1.3 var(--mono); letter-spacing: .14em; }
.service-story .side-lockup strong { font-size: clamp(22px,2.65vw,36px); letter-spacing: -.035em; }
.service-story .service-condition { font-size: 12px; line-height: 1.7; }
.service-story .service-back { display: block; width: fit-content; margin: 13px auto 0; padding: 6px 8px; font-size: 14px; text-decoration: underline; text-underline-offset: 4px; }
/* Inside the illustrated service column. */
.service-story .svc-section {
  padding: 36px clamp(17px, 5.2vw, 31px);
  border-top: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.8;
  overflow-wrap: anywhere;
}
.service-story .svc-label {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .09em;
}
.service-story .svc-label span {
  display: inline-grid;
  place-items: center;
  min-width: 32px;
  min-height: 22px;
  padding: 0 5px;
  border-radius: 999px;
  border: 1px solid currentColor;
  font: 750 13px/1 var(--mono);
  letter-spacing: .02em;
}
.service-story .svc-head h2,
.service-story .svc-subhead h2 {
  margin-top: 12px;
  font: 700 clamp(25px, 7vw, 34px)/1.42 var(--display-font);
  letter-spacing: -.025em;
  text-wrap: balance;
}
.service-story .svc-subhead h2,
.service-story .svc-related-section h2 { font: 700 23px/1.45 var(--display-font); }
.service-story .svc-intro,
.service-story .svc-note,
.service-story .svc-pricing { margin-top: 14px; }
.service-story .svc-section ul { margin-block: 10px 0; padding-inline-start: 1.4em; list-style: disc; }
.service-story .svc-section ul li + li { margin-top: 4px; }
.service-story .svc-section ul li::marker { color: var(--accent); }
.service-story .svc-sample {
  margin: 20px 0 4px;
  padding: 0 clamp(12px, 4vw, 20px) 5px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}
.service-story .svc-sample figcaption {
  margin-inline: calc(-1 * clamp(12px, 4vw, 20px));
  padding: 12px clamp(12px, 4vw, 20px);
  background: var(--accent);
  color: white;
}
.service-story .svc-sample figcaption small,
.service-story .svc-folds summary small {
  display: block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .07em;
  color: var(--accent);
}
.service-story .svc-sample figcaption small { color: inherit; }
.service-story .svc-sample figcaption strong { display: block; font: 700 19px/1.55 var(--display-font); }
.service-story .svc-sample small { display: block; font-size: 12px; line-height: 1.55; }
.service-story .svc-file-rules > div {
  display: grid;
  grid-template-columns: 4.7em 1fr;
  align-items: baseline;
  gap: 8px;
  padding-block: 9px;
}
.service-story .svc-file-rules > div + div,
.service-story .svc-process li + li { border-top: 1px solid var(--line); }
.service-story .svc-file-rules dt { font-size: 12px; font-weight: 800; color: var(--accent); }
.service-story .svc-process,
.service-story .svc-sitemap,
.service-story .svc-flow { list-style: none; margin: 0; padding: 0; }
.service-story .svc-process li,
.service-story .svc-sitemap li { display: flex; gap: 11px; align-items: baseline; padding-block: 9px; }
.service-story .svc-process li > span {
  flex: none;
  border-radius: 4px;
  border: 1px solid var(--line);
  padding-inline: 5px;
  color: var(--accent);
  font-size: 11px;
  font-weight: 800;
}
.service-story .svc-sitemap { padding-block: 6px; }
.service-story .svc-sitemap li { position: relative; align-items: flex-start; padding-block: 5px; }
.service-story .svc-sitemap li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 29px;
  bottom: -5px;
  left: 12px;
  border-left: 1px solid var(--line);
}
.service-story .svc-sitemap li > span {
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  border: 1px solid var(--accent);
  border-radius: 50%;
  color: var(--accent);
  font: 700 11px/1 var(--mono);
}
.service-story .svc-stock { width: 100%; margin-block: 8px; border-collapse: collapse; font-size: 13px; }
.service-story .svc-stock :is(th, td) { padding: 9px 2px; text-align: start; border-bottom: 1px solid var(--line); }
.service-story .svc-stock thead th { color: var(--accent); font-size: 11px; border-bottom: 1px solid var(--line); }
.service-story .svc-stock tbody tr:last-child > * { border: 0; }
.service-story .svc-stock td span { display: inline-block; padding: 1px 5px; white-space: nowrap; border-radius: 4px; font-size: 12px; }
.service-story .svc-stock-out { background: var(--ink); color: white; }
.service-story .svc-stock-in { border: 1px solid var(--line); }
.service-story .svc-folds { display: block; margin-top: 20px; }
.service-story .svc-folds details { margin: 0; border: 0; border-top: 1px solid var(--line); background: transparent; }
.service-story .svc-folds details:last-child { border-bottom: 1px solid var(--line); }
.service-story .svc-folds summary {
  display: flex;
  position: relative;
  align-items: baseline;
  gap: 8px;
  padding: 12px 31px 12px 3px;
  min-height: 46px;
  cursor: pointer;
  list-style: none;
  font-size: 15px;
  font-weight: 750;
  line-height: 1.6;
}
.service-story .svc-folds summary::-webkit-details-marker { display: none; }
.service-story .svc-folds summary::after {
  content: "";
  width: 8px;
  height: 8px;
  position: absolute;
  top: calc(50% - 5px);
  right: 7px;
  border: solid var(--accent);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.service-story .svc-folds details[open] > summary::after { transform: translateY(3px) rotate(225deg); }
.service-story .svc-folds summary:hover { text-decoration: underline; text-underline-offset: 3px; }
.service-story .svc-folds .svc-fold-num { flex: none; font: 700 11px/1 var(--mono); color: var(--accent); }
.service-story .svc-folds details > div { padding: 1px 4px 16px; }
.service-story .svc-folds details > div > :first-child { margin-top: 0; }
.service-story .svc-folds details > div > * + * { margin-top: 9px; }
.service-story .svc-folds a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.service-story .svc-aside { padding-block: 16px; background: var(--accent); color: white; }
.service-story .svc-aside :is(.svc-label, summary, a),
.service-story .svc-aside details > div { color: inherit; }
.service-story .svc-aside summary::after { color: inherit; border-color: currentColor; }
.service-story .svc-aside :focus-visible { outline-color: white; outline-offset: -2px; }
.service-story .svc-aside .svc-folds { margin: 0; }
.service-story .svc-aside .svc-folds details { border: 0; }
.service-story .svc-deliverables {
  margin-top: 19px;
  padding: 9px 13px;
  border-radius: 8px;
  border: 1px solid var(--line);
}
.service-story .svc-deliverables h3 { font-size: 15px; }
.service-story .svc-deliverables p { margin-top: 4px; }
.service-story .svc-price-tag {
  display: inline-block;
  margin-top: 8px;
  padding: 2px 8px;
  border: 1px solid var(--ink);
  background: var(--paper);
  font-size: 13px;
  font-weight: 800;
}
.service-story .svc-flow { margin-top: 19px; counter-reset: svc-step; }
.service-story .svc-flow li { position: relative; min-height: 53px; padding: 0 0 15px 37px; counter-increment: svc-step; }
.service-story .svc-flow li:not(:last-child)::after { content: ""; position: absolute; left: 12px; top: 27px; bottom: 0; border-left: 1px solid var(--line); }
.service-story .svc-flow li::before {
  content: counter(svc-step, decimal-leading-zero);
  position: absolute;
  display: grid;
  place-items: center;
  left: 0;
  top: 1px;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: var(--accent);
  color: white;
  font: 750 11px/1 var(--mono);
}
.service-story .svc-flow li:last-child { min-height: 0; padding-bottom: 0; }
.service-story .svc-flow h3 { font-size: 16px; }
.service-story .svc-related { margin-top: 14px; }
.service-story .svc-related a { position: relative; display: block; padding: 12px 23px 12px 0; border-top: 1px solid var(--line); text-decoration: none; }
.service-story .svc-related a:last-child { border-bottom: 1px solid var(--line); }
.service-story .svc-related a strong { display: block; color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.service-story .svc-related a span { display: block; font-size: 13px; }
.service-story .svc-related a::after { content: ""; position: absolute; right: 4px; top: 19px; width: 7px; height: 7px; border: solid var(--accent); border-width: 2px 2px 0 0; transform: rotate(45deg); }
.service-story .svc-scope-link { margin-top: 8px; }
.service-story .svc-scope-link a { display: inline-block; padding-block: 8px; color: var(--accent); font-weight: 750; text-underline-offset: 4px; }
.service-story .svc-resource { margin: 18px 0 0; width: 100%; padding: 0; }
.service-story .svc-resource a {
  display: grid;
  gap: 3px;
  padding: 14px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  text-decoration: none;
}
.service-story .svc-resource small { font-size: 11px; font-weight: 800; color: var(--accent); }
.service-story .svc-resource strong { font: 700 18px/1.55 var(--display-font); }
.service-story .svc-resource a > span { font-size: 13px; }
.service-story .svc-resource b { margin-top: 5px; color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

@media screen and (min-width: 700px) {
  .service-story .svc-section { padding-inline: var(--story-inset); font-size: 15px; }
  .service-story :is(.svc-intro, .svc-note, .svc-pricing) { max-width: 42em; }
}
/* Put the brief and the concrete work sample alongside each other when both fit. */
@media screen and (min-width: 760px) {
  .service-story #problems {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    grid-template-areas: "title title" "intro sample" "note sample" "more more";
    grid-template-rows: auto auto 1fr auto;
    gap: 12px 26px;
    align-content: start;
  }
  .service-story #problems .svc-head { grid-area: title; }
  .service-story #problems .svc-head h2 { font-size: clamp(25px, 2.2vw, 31px); }
  .service-story #problems .svc-intro { grid-area: intro; margin-top: 0; }
  .service-story #problems .svc-note { grid-area: note; margin-top: 0; }
  .service-story #problems .svc-sample { grid-area: sample; align-self: center; margin: 0; }
  .service-story #problems .svc-folds { grid-area: more; margin-top: 8px; }
}