/* Services — page-specific styles (converted from services.html <style>) */

@keyframes tsInfinityBorder { to { stroke-dashoffset: 0; } }

/* TOC sticky nav */
.dsmt-toc-bar { position: sticky; top: 60px; z-index: 40; background: rgba(255,255,255,0.92); backdrop-filter: blur(16px); border-bottom: 1px solid var(--dsmt-line); padding: 12px var(--dsmt-gutter); }
.dsmt-toc-inner { max-width: var(--dsmt-max); margin: 0 auto; display: flex; justify-content: center; align-items: center; gap: 16px; flex-wrap: wrap; }
.dsmt-toc-list { display: flex; gap: 4px; list-style: none; flex-wrap: wrap; }
.dsmt-toc-list a { padding: 6px 13px; font-size: 0.825rem; font-weight: 500; color: var(--dsmt-ink-2); border-radius: 100px; transition: all 0.15s; }
.dsmt-toc-list a:hover { background: var(--dsmt-bg-2); color: var(--dsmt-ink); }
.dsmt-toc-list a.dsmt-on { background: var(--dsmt-ink); color: #fff; }

/* Service blocks */
.dsmt-svc-block { padding: var(--dsmt-section-y) var(--dsmt-gutter); border-bottom: 1px solid var(--dsmt-line); scroll-margin-top: 160px; }
.dsmt-svc-block:nth-child(even) { background: var(--dsmt-bg-2); }
.dsmt-svc-grid { max-width: var(--dsmt-max); margin: 0 auto; display: grid; grid-template-columns: 1fr 1.6fr; gap: clamp(32px,5vw,72px); align-items: start; }
@media(max-width:900px){ .dsmt-svc-grid { grid-template-columns: 1fr; } }
.dsmt-svc-num { font-family: var(--dsmt-font-mono); font-size: 0.67rem; color: var(--dsmt-blue); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 12px; display: block; }
.dsmt-svc-title { font-family: var(--dsmt-font-head); font-weight: 800; font-size: clamp(2.4rem,5vw,5rem); letter-spacing: -0.045em; line-height: 0.95; margin: 0 0 20px; }
.dsmt-svc-title span { color: var(--dsmt-blue); }
.dsmt-svc-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.dsmt-svc-meta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; padding-top: 20px; border-top: 1px dashed var(--dsmt-line-2); align-items: center; }
.dsmt-svc-meta .dsmt-mono-val { font-family: var(--dsmt-font-mono); font-size: 0.72rem; color: var(--dsmt-ink-3); letter-spacing: 0.05em; }

/* On mobile the block stacks to a column (see style.css .dsmt-svc-meta max-width:480px rule); 
   left-align the CTA button and "Full details" link instead of the row-layout center alignment
   that services.css sets above (services.css loads after style.css, so its unconditional
   align-items:center would otherwise win at every width). */
@media (max-width: 480px) {
  .dsmt-svc-meta { align-items: flex-start; }
}

/* Service right panel */
.dsmt-svc-panel { background: var(--dsmt-bg); border: 1px solid var(--dsmt-line); border-radius: var(--dsmt-radius-xl); overflow: hidden; }
.dsmt-svc-panel-box { padding: 24px 28px; border-bottom: 1px solid var(--dsmt-line); }
.dsmt-svc-panel-box:last-child { border-bottom: none; }
.dsmt-svc-panel-box h3 { font-family: var(--dsmt-font-mono); font-size: 0.67rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dsmt-blue); margin: 0 0 16px; font-weight: 500; }
.dsmt-svc-panel-box ul { list-style: none; display: grid; gap: 10px; }
.dsmt-svc-panel-box li { display: grid; grid-template-columns: 14px 1fr; gap: 10px; font-size: 0.875rem; color: var(--dsmt-ink-2); line-height: 1.55; }
.dsmt-svc-panel-box li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--dsmt-blue); margin-top: 8px; }
.dsmt-svc-meta-3 { display: grid; grid-template-columns: repeat(3,1fr); }
.dsmt-svc-meta-3 > div { padding: 16px 20px; border-right: 1px solid var(--dsmt-line); }
.dsmt-svc-meta-3 > div:last-child { border-right: none; }
.dsmt-svc-meta-3 .dsmt-lbl { font-family: var(--dsmt-font-mono); font-size: 0.62rem; color: var(--dsmt-ink-3); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 6px; }
.dsmt-svc-meta-3 .dsmt-val { font-family: var(--dsmt-font-head); font-weight: 700; font-size: 1.4rem; letter-spacing: -0.03em; color: var(--dsmt-ink); }
.dsmt-svc-meta-3 .dsmt-val span { color: var(--dsmt-blue); }
@media(max-width:580px){ .dsmt-svc-meta-3 { grid-template-columns: 1fr; } .dsmt-svc-meta-3 > div { border-right: none; border-bottom: 1px solid var(--dsmt-line); } }