/* =====================================================================
   River Tech — service.css (/service/ only)
   Layout for the service page on top of base.css (docs/components.md).
   Rhythm (reference subpages): three chapters, each built like the reference service card
   (number / EN 40 / JP h2 / catch / text / chips) plus ONE supporting part, the 4- or 3-step
   process. Everything else folds into hairline <details> rows, so the page reads as large-type
   moments, not a document. 240/160px between chapters, 56-80px inside one.
   Local additions (not in the foundation):
   - .svc-index   indexed hairline jump list "( 01 ) Websites ↓" (replaces the outline pills)
   - .svc-acc     <details> rows on 1px rules, 11px plus (reference accordion C13: transparent rows, no
                  third surface colour); used for the folded parts and the merged FAQ
   - .svc-rel     related-work rows: hairlines, centre-opening band (reference row hover), bare arrow
   - .svc-chip    chip at 13/12px (15/13 for --l) so Japanese chip text stays >= 12px (plan A15)
   1 tokens · 2 line breaking · 3 head + index · 4 banner · 5 blocks · 6 steps · 7 folded contents
   8 accordion · 9 related works · 10 FAQ, foot, closing button · 11 SP · 12 forced colours
   js/service.js: the banner's font gate + its reveal on load (4) and the related-work stacking (9).
   ===================================================================== */

/* 1. Page tokens ------------------------------------------------------ */
.svc {
  --svc-num: 64px;                                        /* number column of the reference service card */
  --svc-col-gap: clamp(3rem, 7.43vw - .4375rem, 6.25rem); /* number -> body: 100 at 1440, 48 at 769 */
  --svc-gutter: var(--space-40);                          /* every column grid inside the body */
  --svc-quarter: calc((100% - 3 * var(--svc-gutter)) / 4);/* one of the 4 step columns (resolved where used) */
  --svc-text: 45rem;                                      /* 720px reading measure for Japanese body copy */
  --svc-chapter: calc(var(--space-80) * 2);               /* 160/128: last line of a chapter -> its closing rule */
  --svc-bleed: 24px;                                      /* related-work band reaches past the column */
  --svc-plus: 11px;                                       /* accordion plus (odd size keeps both 1px bars crisp) */
}

/* 2. Japanese line breaking (as home.css / works.css): Chromium 119+ breaks at phrase boundaries;
   Safari and Firefox keep keep-all and break at spaces, after 、。 and at the <wbr> marks. */
.svc :is(p, h1, h2, h3, h4, li, dt, dd, summary) {
  word-break: keep-all;
  word-break: auto-phrase;
  overflow-wrap: anywhere;
  line-break: strict;
  text-wrap-style: pretty;
}
.svc-ph { display: inline-block; } /* keeps a short phrase on one line where the phrase model splits it */

/* 3. Head: centred 128/48 "OUR SERVICES." + count, JP sub, intro, index ----------------------- */
.svc-head { padding: 168px 5vw 0; text-align: center; } /* = .works-head: cap tops land on the same line */
.svc-title { display: flex; flex-direction: column; align-items: center; }
/* the fixed 1em height keeps the line box from following the fonts (two faces on one line moved it: CLS) */
.svc-title__line { position: relative; display: inline-block; height: 1em; font-size: min(var(--fs-title-xl), 12.5vw); }
.svc-title__line .rv-mask { padding-inline: .06em .12em; margin-inline: -.06em -.12em; }
.svc-title .accent-word { margin-left: -.06em; font-variation-settings: "opsz" 18; }
/* same count as .works-title__count: Inter Tight has no italic cut loaded, so no faux oblique */
.svc-title__count {
  position: absolute;
  top: .6vw;
  left: calc(100% + 1.4vw);
  font-family: var(--ff-latin);
  font-size: var(--fs-small);
  font-style: italic;
  font-weight: 400;
  font-synthesis-style: none;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
}
.svc-title__ja {
  display: block;
  margin-top: 32px;
  font-size: var(--fs-kicker);
  font-weight: 400;
  line-height: 1;
  letter-spacing: var(--ls-jp);
}
/* each sentence starts a line at every width; the phone's LCP element */
.svc-head__intro {
  max-width: 46em;
  margin: var(--space-24) auto 0;
  font-size: var(--fs-kicker);
  line-height: 1.8;
  color: var(--fg-2);
}
/* Index: three hairline cells "( 01 ) WEBSITES ↓" (reference numbered label + rule). Hover / focus: an
   ink rule draws in from the left over the bottom hairline, the digits take the accent, the arrow dips. */
.svc-index { max-width: 60rem; margin: var(--space-40) auto 0; }
.svc-index__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 24px; }
.svc-index__link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 56px;
  padding-block: 12px;
  border-block: 1px solid var(--line);
  text-align: left;
}
.svc-index__link::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: -1px;
  height: 1px;
  background-color: var(--fg);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--d-menu) var(--ease-expo);
}
.svc-index__no { flex: none; color: var(--fg-mute); transition: color var(--d-fast); }
.svc-index__name {
  flex: 1;
  min-width: 0;
  font-family: var(--ff-latin);
  font-size: var(--fs-kicker);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: var(--ls-ui);
  text-transform: uppercase;
}
.svc-index__arrow {
  flex: none;
  width: 14px;
  height: 14px;
  background-color: currentColor;
  -webkit-mask: var(--icon-arrow) center / contain no-repeat;
  mask: var(--icon-arrow) center / contain no-repeat;
  transform: rotate(90deg);
  transition: transform var(--d-fast) var(--ease-cubic);
}
.svc-index__link:focus-visible::after { transform: scaleX(1); }
.svc-index__link:focus-visible .svc-index__no { color: var(--accent); }
.svc-index__link:focus-visible .svc-index__arrow { transform: translateY(3px) rotate(90deg); }
@media (hover: hover) and (pointer: fine) {
  .svc-index__link:hover::after { transform: scaleX(1); }
  .svc-index__link:hover .svc-index__no { color: var(--accent); }
  .svc-index__link:hover .svc-index__arrow { transform: translateY(3px) rotate(90deg); }
}

/* 4. Banner marquee (tucked under the hairline like the reference list) ------------------------
   Seam gap = one Inter Tight word space (.224em); the mask end padding keeps "Support."'s overhang. */
.svc-banner { --mq-gap: .224em; margin-top: var(--space-80); }
.svc-banner .rv-mask { padding-inline-end: .12em; margin-inline-end: -.12em; }
.svc-banner__ph { display: inline-block; } /* one inline box per phrase: a phone's LCP never picks the banner */
/* Font gate (js/service.js): hidden until Inter Tight + Bodoni Moda are in (CLS), then service.js plays the
   rise on load, not at the 80% scroll line, so a 1280x720 first view never ends on an empty strip; the
   2.5 s keyframes show it without JS help */
html.js .svc-banner:not(.is-ready) { visibility: hidden; animation: svc-gate 0s 2.5s forwards; }
.rv-on .svc-banner:not(.is-ready) .rv-mask > * {
  transform: translate3d(0, calc(100% + .2em), 0);
  animation: svc-gate-rise 0s 2.5s forwards;
}
@keyframes svc-gate { to { visibility: visible; } }
@keyframes svc-gate-rise { to { transform: none; } }

/* 5. Service blocks ------------------------------------------------------------------------------ */
.svc-blocks { padding-bottom: var(--svc-chapter); }
.svc-block { padding-top: var(--space-80); }
.svc-blocks .svc-block:first-child { padding-top: var(--space-56); } /* reference: label 24-56px under the tuck */
.svc-blocks .svc-block + .svc-block { margin-top: var(--svc-chapter); border-top: 1px solid var(--line); }
/* #ai lands with the band's top edge at the viewport top, so the (white) header sits on the band itself
   and not on the paper strip above it; the top padding clears the header at every width */
.svc-block--dark {
  padding-block: max(var(--space-120), var(--header-h) + var(--space-24)) var(--svc-chapter);
  scroll-margin-top: calc(var(--header-h) * -1);
}
.svc-grid {
  display: grid;
  grid-template-columns: var(--svc-num) minmax(0, 1fr);
  align-items: start;
  column-gap: var(--svc-col-gap);
}
/* the number is a mask: it takes its own width, so "( 01 )" runs into the gap instead of being cut */
.svc-block__num { justify-self: start; width: max-content; white-space: nowrap; }
@media (min-width: 769px) {
  .svc-block__num { position: sticky; top: calc(var(--header-h) + var(--space-24)); }
}
.svc-block__body { min-width: 0; }
.svc-block__ja { margin-top: 14px; font-size: var(--fs-kicker); font-weight: 500; line-height: 1.4; }
.svc-block__catch { margin-top: var(--space-40); font-size: min(var(--fs-catch-jp), 7.2vw); } /* 12 glyphs fit 320 */
.svc-block__lead { max-width: var(--svc-text); margin-top: var(--space-24); }
.svc-block__tags { max-width: var(--svc-text); margin-top: 32px; } /* reference card: chips 32px under the text */
.svc-sub { margin-top: var(--space-80); }
.svc-sub__title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 16px;
  font-size: var(--fs-ui-l);
  font-weight: 500;
  line-height: 1.4;
}
.svc-sub__title .label { color: var(--fg-mute); }
.svc-sub__title + * { margin-top: 28px; }
.svc-more,
.svc-sub--works,
.svc-foot { margin-top: var(--space-56); }
.svc-foot { display: flex; }

/* 6. Steps (4 or 3 columns on PC) ---------------------------------------------------------------
   The column count switches without a breakpoint: below 4 (or 3) minimum steps the track jumps to a
   half (or full width), so 4 steps never fall into 3 + 1 and narrow columns never split a phrase. */
.svc-steps {
  --svc-gap: var(--svc-gutter);
  --svc-step-min: 13rem;
  --svc-col: clamp((100% - 3 * var(--svc-gap)) / 4 - .1px,
                   (4 * var(--svc-step-min) + 3 * var(--svc-gap) - 100%) * 999,
                   (100% - var(--svc-gap)) / 2 - .1px);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--svc-col), 1fr));
  gap: var(--space-40) var(--svc-gap);
}
.svc-steps--3 {
  --svc-step-min: 15.5rem; /* 3-4 lines + a chip row: below 248px columns they stack as full rows */
  --svc-col: clamp((100% - 2 * var(--svc-gap)) / 3 - .1px,
                   (3 * var(--svc-step-min) + 2 * var(--svc-gap) - 100%) * 999,
                   100%);
}
/* number and EN word share the first line ("01 ........ LISTEN"), so a step is one line shorter; the
   rows a step does not use (tag, "行うこと", chips) collapse to nothing */
.svc-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "no en" "ja ja" "tag tag" "text text" "do do" "chips chips";
  align-content: start;
  align-items: baseline;
  column-gap: 12px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.svc-step__no { grid-area: no; }
.svc-step__en { grid-area: en; justify-self: end; }
.svc-step__ja { grid-area: ja; }
.svc-step__tag { grid-area: tag; }
.svc-step__text { grid-area: text; }
.svc-step__do { grid-area: do; }
.svc-step > .chips { grid-area: chips; }
.svc-step__en,
.svc-values__en {
  font-family: var(--ff-latin);
  font-size: var(--fs-small);
  font-weight: 300;
  line-height: 1;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--fg-mute);
}
.svc-step__ja { margin-top: 20px; font-size: var(--fs-ui-l); font-weight: 500; line-height: 1.5; }
.svc-step__tag { margin-top: 2px; font-size: var(--fs-small); line-height: 1.5; color: var(--fg-mute); }
.svc-step__text { max-width: var(--svc-text); margin-top: 8px; color: var(--fg-2); }
.svc-step__do { margin-top: var(--space-24); font-size: var(--fs-small); line-height: 1.4; color: var(--fg-mute); }
.svc-step__do + .chips { margin-top: 10px; }
.svc-steps__note { margin-top: var(--space-24); }

/* 7. Folded contents: values, chips, dl, rules ---------------------------------------------------- */
.svc-values { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-24) var(--svc-gutter); }
.svc-values__ja { margin-top: 14px; font-size: var(--fs-ui-l); font-weight: 500; line-height: 1.5; color: var(--fg); }
.svc-values__text { max-width: 26em; margin-top: 8px; }
.svc-chip { padding: 10px 12px; font-size: var(--fs-small); line-height: 1.3; letter-spacing: var(--ls-jp); }
.svc-chips--l { gap: 12px; }
.svc-chips--l .svc-chip { padding: 14px 16px; font-size: var(--fs-kicker); }
.svc-note { max-width: var(--svc-text); margin-top: var(--space-24); font-size: var(--fs-small); line-height: 1.7; color: var(--fg-mute); }
.svc-dl__row {
  display: grid;
  grid-template-columns: minmax(11em, calc((100% - 2 * var(--svc-gutter)) / 3)) minmax(0, 1fr);
  column-gap: var(--svc-gutter);
  padding-block: 16px;
}
.svc-dl__row:first-child { padding-top: 0; }
.svc-dl__row + .svc-dl__row { border-top: 1px solid var(--line); }
.svc-dl dt { font-weight: 500; line-height: 1.6; color: var(--fg); }
.svc-acc__lead { max-width: var(--svc-text); }
.svc-rules {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--svc-gutter);
  margin-top: var(--space-24);
  counter-reset: svc-rule;
}
.svc-rules__item { position: relative; padding: 18px 0 24px 48px; border-top: 1px solid var(--line); counter-increment: svc-rule; }
.svc-rules__item::before {
  content: counter(svc-rule, decimal-leading-zero);
  content: counter(svc-rule, decimal-leading-zero) / "";
  position: absolute;
  top: 20px;
  left: 0;
  font-family: var(--ff-accent);
  font-size: var(--fs-ui-l);
  font-style: italic;
  line-height: 1;
  letter-spacing: var(--ls-accent);
  color: var(--fg-mute);
}
.svc-rules__title { font-size: var(--fs-body); font-weight: 500; line-height: 1.6; color: var(--fg); }
.svc-rules__item p { margin-top: 6px; }

/* 8. Accordion (<details>) on hairlines: transparent rows, 22px tall padding, 11px plus whose vertical
   bar folds away when open. Hover / focus: an ink rule draws over the row's top hairline from the left,
   key and plus take the accent; an open row keeps the drawn rule. ------------------------------------ */
.svc-acc { --svc-acc-key: var(--svc-quarter); border-bottom: 1px solid var(--line); }
.svc-acc__item { border-top: 1px solid var(--line); }
.svc-acc__sum {
  position: relative;
  display: grid;
  grid-template-columns: var(--svc-acc-key) minmax(0, 1fr) var(--svc-plus);
  align-items: baseline;
  column-gap: var(--svc-gutter);
  padding-block: 22px;
  font-size: var(--fs-ui-l);
  font-weight: 500;
  line-height: 1.5;
  list-style: none;
  cursor: pointer;
}
.svc-acc__sum::-webkit-details-marker { display: none; }
.svc-acc__sum::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: -1px;
  height: 1px;
  background-color: var(--fg);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--d-menu) var(--ease-expo);
}
.svc-acc__key { color: var(--fg-mute); white-space: nowrap; transition: color var(--d-fast); }
.svc-acc__icon {
  position: relative;
  align-self: start;
  width: var(--svc-plus);
  height: var(--svc-plus);
  margin-top: calc((1lh - var(--svc-plus)) / 2); /* centred on the first line of the title */
  color: var(--fg);
  transition: color var(--d-fast), transform var(--d-fast) var(--ease-cubic);
}
.svc-acc__icon::before,
.svc-acc__icon::after {
  content: "";
  position: absolute;
  top: calc(50% - .5px);
  left: 0;
  width: 100%;
  height: 1px;
  background-color: currentColor;
  transition: transform var(--d-fast) var(--ease-cubic);
}
.svc-acc__icon::after { transform: rotate(90deg); }
.svc-acc__item[open] > .svc-acc__sum .svc-acc__icon::after { transform: rotate(0deg); }
.svc-acc__item[open] > .svc-acc__sum::before,
.svc-acc__sum:focus-visible::before { transform: scaleX(1); }
.svc-acc__sum:focus-visible .svc-acc__key,
.svc-acc__sum:focus-visible .svc-acc__icon { color: var(--accent); }
@media (hover: hover) and (pointer: fine) {
  .svc-acc__sum:hover::before { transform: scaleX(1); }
  .svc-acc__sum:hover .svc-acc__key,
  .svc-acc__sum:hover .svc-acc__icon { color: var(--accent); }
}
.svc-acc__sum:active .svc-acc__icon { transform: scale(.82); }
.svc-acc__panel {
  padding: 0 calc(var(--svc-plus) + var(--svc-gutter)) 32px calc(var(--svc-acc-key) + var(--svc-gutter));
  color: var(--fg-2);
}
.svc-acc__panel > p { max-width: var(--svc-text); }
.svc-acc__item[open] > .svc-acc__panel { animation: svc-acc-in var(--d-base) var(--ease-cubic); }
html[data-motion="paused"] .svc-acc__item[open] > .svc-acc__panel { animation: none; }
@keyframes svc-acc-in {
  from { opacity: 0; transform: translate3d(0, -6px, 0); }
  to { opacity: 1; transform: none; }
}

/* 9. Related works: hairline rows (index on the first step column, name 28/20 from the 2nd, role, bare
   arrow). The band (two halves in --c-band) opens from the centre line on hover / keyboard focus, as the
   reference project row; the row bleeds --svc-bleed past the column. When one row cannot hold name + role
   on a line, js/service.js stacks the whole list (.is-stacked) so the rows keep one rhythm. */
.svc-rel { margin-inline: calc(var(--svc-bleed) * -1); }
.svc-rel__item { position: relative; }
.svc-rel__item::before,
.svc-rel__item:last-child::after {
  content: "";
  position: absolute;
  inset-inline: var(--svc-bleed);
  z-index: 1;
  height: 1px;
  background-color: var(--line);
  pointer-events: none;
}
.svc-rel__item::before { top: 0; }
.svc-rel__item:last-child::after { bottom: 0; }
.svc-rel__link {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(7.5rem, var(--svc-quarter)) minmax(0, 1fr) 18px;
  grid-template-areas: "no main arrow";
  align-items: center;
  column-gap: var(--svc-gutter);
  padding: 14px var(--svc-bleed);
  color: var(--fg);
  transition: color var(--d-instant);
}
.svc-rel__link::before,
.svc-rel__link::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  z-index: -1;
  background-color: var(--c-band);
  transform: scaleY(0);
  transition: transform var(--d-fast) var(--ease-band);
}
.svc-rel__link::before { top: 1px; bottom: calc(50% - 1px); transform-origin: center bottom; }
.svc-rel__link::after { top: calc(50% - 1px); bottom: 0; transform-origin: center top; }
.svc-rel__item:last-child .svc-rel__link::after { bottom: 1px; }
.svc-rel__no {
  grid-area: no;
  font-family: var(--ff-latin);
  font-size: var(--fs-kicker);
  line-height: 1;
  letter-spacing: var(--ls-ui);
  white-space: nowrap;
}
.svc-rel__main {
  grid-area: main;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px var(--svc-gutter);
  min-width: 0;
}
.svc-rel.is-stacked .svc-rel__main { flex-direction: column; align-items: flex-start; }
.svc-rel__name { min-width: 0; font-size: var(--fs-row); line-height: 1.4; letter-spacing: var(--ls-display); }
.svc-rel__role {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--ff-latin);
  font-size: var(--fs-small);
  line-height: 1;
  letter-spacing: var(--ls-ui);
  white-space: nowrap;
  color: var(--fg-mute);
  transition: color var(--d-instant);
}
.svc-rel__role .glyph { transition: background-color var(--d-instant); }
.svc-rel__arrow {
  grid-area: arrow;
  width: 18px;
  height: 18px;
  background-color: var(--fg-mute);
  -webkit-mask: var(--icon-arrow) center / contain no-repeat;
  mask: var(--icon-arrow) center / contain no-repeat;
  transition: background-color var(--d-fast), transform var(--d-fast) var(--ease-cubic);
}
.svc-rel__link:focus-visible { outline: 2px solid var(--c-accent-on-dark); outline-offset: -4px; color: var(--c-white); }
.svc-rel__link:focus-visible::before,
.svc-rel__link:focus-visible::after { transform: scaleY(1); }
.svc-rel__link:focus-visible .svc-rel__role { color: var(--c-line); }
.svc-rel__link:focus-visible .glyph,
.svc-rel__link:focus-visible .svc-rel__arrow { background-color: var(--c-accent-on-dark); }
.svc-rel__link:focus-visible .svc-rel__arrow { transform: translateX(3px); }
@media (hover: hover) and (pointer: fine) {
  .svc-rel__link:hover { color: var(--c-white); }
  .svc-rel__link:hover::before,
  .svc-rel__link:hover::after { transform: scaleY(1); }
  .svc-rel__link:hover .svc-rel__role { color: var(--c-line); }
  .svc-rel__link:hover .glyph,
  .svc-rel__link:hover .svc-rel__arrow { background-color: var(--c-accent-on-dark); }
  .svc-rel__link:hover .svc-rel__arrow { transform: translateX(3px); }
}

/* 10. FAQ (one list for the whole page), closing button ------------------------------------------
   Title on the first step column (sticky on PC), the two groups on the other three, so the list starts
   level with its heading; Q numbers run 1-9 across both groups. */
.svc-end { padding-bottom: var(--space-200); }
.svc-faq { padding-top: var(--space-120); }
.svc-faq__layout {
  grid-column: 2;
  display: grid;
  grid-template-columns: var(--svc-quarter) minmax(0, 1fr);
  align-items: start;
  column-gap: var(--svc-gutter);
}
@media (min-width: 769px) {
  .svc-faq__head { position: sticky; top: calc(var(--header-h) + var(--space-24)); }
}
.svc-faq__caption {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 16px;
  font-size: var(--fs-small);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: var(--ls-jp);
  color: var(--fg-2);
}
.svc-faq__caption .glyph { --glyph: 10px; }
.svc-faq__group + .svc-faq__group { margin-top: var(--space-56); }
.svc-faq .svc-acc { --svc-acc-key: 2rem; }
.svc-faq .svc-acc__sum { font-size: var(--fs-body); line-height: 1.6; }
.svc-faq .svc-acc__key { font-size: var(--fs-ui-l); line-height: 1; }
/* closing button: centred under the FAQ, 120/80 below it, like the reference's list-end button */
.svc-cta { margin-top: var(--space-120); }

/* 11. SP (<=768px) -------------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .svc { --svc-gutter: 24px; --svc-bleed: 5vw; }
  .svc-title__ja { margin-top: 24px; }
  .svc-index { margin-top: 32px; }
  .svc-index__list { grid-template-columns: minmax(0, 1fr); }
  .svc-index__link { border-bottom: 0; }
  .svc-index__list > li:last-child .svc-index__link { border-bottom: 1px solid var(--line); }
  .svc-grid { grid-template-columns: minmax(0, 1fr); }
  .svc-block__num { margin-bottom: var(--space-24); }
  /* one column; the number takes its own narrow column so the text keeps an 18-character measure
     (2 x 2 steps left 10 characters a line and split phrases such as うかが|います) */
  .svc-steps { grid-template-columns: minmax(0, 1fr); row-gap: 32px; }
  .svc-step {
    grid-template-columns: 3.25rem minmax(0, 1fr);
    grid-template-areas: "no en" "no ja" "no tag" "no text" "no do" "no chips";
    column-gap: 0;
  }
  .svc-step__no { align-self: start; }
  .svc-step__en { justify-self: start; }
  .svc-step__ja { margin-top: 10px; }
  .svc-values,
  .svc-rules { grid-template-columns: minmax(0, 1fr); }
  .svc-dl__row { grid-template-columns: minmax(0, 1fr); row-gap: 4px; }
  .svc-chips--l { gap: 10px; }
  .svc-chips--l .svc-chip { padding: 10px 12px; font-size: var(--fs-small); }
  /* folded rows: the ( Key ) label sits over the title, the plus centred on both lines */
  .svc-more .svc-acc__sum {
    grid-template-columns: minmax(0, 1fr) var(--svc-plus);
    grid-template-areas: "key icon" "title icon";
    row-gap: 10px;
    padding-block: 18px;
  }
  .svc-more .svc-acc__key { grid-area: key; }
  .svc-more .svc-acc__title { grid-area: title; }
  .svc-more .svc-acc__icon { grid-area: icon; align-self: center; margin-top: 0; }
  .svc-more .svc-acc__panel { padding-inline: 0; }
  .svc-faq .svc-acc__sum { padding-block: 18px; }
  .svc-faq .svc-acc__panel { padding-right: 0; }
  .svc-faq__layout { grid-column: 1; grid-template-columns: minmax(0, 1fr); row-gap: var(--space-40); }
  /* reference SP row order (index / name / role) beside the arrow; the 5vw bleed = the container gutter */
  .svc-rel__link {
    grid-template-columns: minmax(0, 1fr) 18px;
    grid-template-areas: "no arrow" "main arrow";
    gap: 8px 16px;
    padding-block: 16px;
  }
  .svc-rel__main { flex-direction: column; align-items: flex-start; }
}

/* 12. Forced colours: keep the background-drawn glyphs visible ------------------------------------- */
@media (forced-colors: active) {
  .svc-acc__icon::before,
  .svc-acc__icon::after,
  .svc-index__arrow,
  .svc-rel__arrow { forced-color-adjust: none; background-color: CanvasText; }
}