/* Edits layer · round 1 (2026-10-20)
   1. Clear section separation: chapter cards between the six parts of the page,
      a large header on every section, and a numbered service header with progress.
   2. Less visible text: secondary copy folds behind a per-section "More details"
      toggle. The text stays in the HTML (SEO), it is only collapsed. */

/* ---------- chapter cards ---------- */
.chap { position: relative; background: var(--ink); color: var(--paper); overflow: hidden;
  min-height: clamp(380px, 64vh, 680px); display: flex; align-items: stretch; }
.chap .wrap { display: flex; flex-direction: column; justify-content: space-between; gap: 48px; padding-block: clamp(36px, 5vw, 64px); }
.chap-top { display: flex; justify-content: space-between; gap: 16px; color: var(--mute-d); }
.chap-top b { color: var(--red-d); font-weight: 500; }
.chap-num { font-size: clamp(5rem, 14vw, 13rem); font-weight: 900; letter-spacing: -.06em; line-height: .8;
  color: transparent; -webkit-text-stroke: 1px rgba(244, 241, 236, .28); }
.chap-t { font-size: clamp(3rem, 9vw, 9rem); font-weight: 900; letter-spacing: -.055em; line-height: .88; text-wrap: balance; }
.chap-t .pt { color: var(--red); }
.chap-bar { display: block; height: 3px; width: 100%; background: var(--red); margin: clamp(20px, 3vw, 36px) 0 18px; transform-origin: left; }
.chap-list { display: flex; flex-wrap: wrap; gap: 6px 26px; color: var(--mute-d); }
.chap-list li { display: flex; gap: 8px; }
.chap-list li span { color: var(--paper); opacity: .5; }

html.js.fm .chap .chap-num, html.js.fm .chap .chap-t { transform: translateY(40px); opacity: 0; transition: transform 1.1s var(--ease), opacity .9s var(--ease); }
html.js.fm .chap .chap-bar { transform: scaleX(0); transition: transform 1.3s var(--ease) .15s; }
html.js.fm .chap .chap-list { opacity: 0; transition: opacity .8s var(--ease) .35s; }
html.js.fm .chap.in .chap-num, html.js.fm .chap.in .chap-t { transform: none; opacity: 1; }
html.js.fm .chap.in .chap-t { transition-delay: .08s; }
html.js.fm .chap.in .chap-bar { transform: none; }
html.js.fm .chap.in .chap-list { opacity: 1; }

/* the old in-page chapter label is replaced by the cards */
.mk-chapter { display: none; }

/* ---------- section headers ---------- */
.sh { display: none; }
.sx { border-top: 2px solid currentColor; padding-top: 18px; margin-bottom: clamp(40px, 5vw, 72px); }
.sx-top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; color: var(--mute); }
.sx-kick { color: var(--red); }
.t-ink .sx-kick, .t-graphite .sx-kick { color: var(--red-d); }
.sx-count { margin-left: auto; }
.sx-ticks { display: flex; gap: 4px; }
.sx-ticks i { width: 16px; height: 3px; background: var(--line-2); }
.sx-ticks i.past { background: currentColor; opacity: .55; }
.sx-ticks i.now { background: var(--red); }
.t-ink .sx-ticks i.now, .t-graphite .sx-ticks i.now { background: var(--red-d); }
.sx-row { display: flex; align-items: flex-end; gap: clamp(14px, 2.4vw, 36px); margin-top: clamp(14px, 2vw, 26px); }
.sx-n { font-size: clamp(4.2rem, 10vw, 9.5rem); font-weight: 900; letter-spacing: -.06em; line-height: .78; flex: none; }
.sx-t { font-size: clamp(1.5rem, 3.2vw, 3.1rem); font-weight: 900; letter-spacing: -.035em; line-height: 1; padding-bottom: .08em; text-wrap: balance; }
.sx-svc .sx-n { color: var(--red); }
.t-ink .sx-svc .sx-n, .t-graphite .sx-svc .sx-n { color: var(--red-d); }
/* the section's own headline becomes the supporting line under the header */
.sx + .svc-head .h2, .sx + .grid .h2 { font-size: clamp(1.8rem, 3.2vw, 3.4rem); }

/* ---------- less visible text ---------- */
.dz { display: none !important; }

/* "What we provide": titles only, as a compact grid */
.sec .provide { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 0; border-top: 0; gap: 10px; }
.sec .provide li { display: flex; flex-direction: column; gap: 10px; padding: 16px 16px 18px; border: 1px solid var(--line); border-radius: 2px; }
.sec .provide li > span { padding-top: 0; }
.sec .provide b { font-size: .98rem; }
.sec .outcome { grid-template-columns: 1fr; }
.sec .svc-sub { margin-top: clamp(44px, 5vw, 72px); }
@media (max-width: 960px) { .sec .provide { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .sec .provide { gap: 8px; }
  .sec .provide li { padding: 12px 12px 14px; gap: 6px; }
  .sec .provide b { font-size: .88rem; }
}

/* tab lists: only the selected item shows its description */
.ph-tabs [role="tab"] .d { max-height: 0; overflow: hidden; transition: max-height .5s var(--ease), margin .5s; }
.ph-tabs [role="tab"][aria-selected="true"] .d { max-height: 6em; margin-top: 2px; }

@media (max-width: 720px) {
  .sx-ticks i { width: 9px; }
  .sx-row { align-items: flex-start; flex-direction: column; gap: 10px; }
  .chap-top span:last-child { display: none; }
}