/* ============================================
   POKE DIGITAL — SERVICES & INSIGHTS PAGES
   Shares tokens from styles.css. Editorial layout
   language consistent with the case-study (.cs-*)
   pages in work.css, namespaced .svc- to avoid
   coupling these pages to work.css.
   ============================================ */

.svc-breadcrumb {
  max-width: 1000px;
  margin: 0 auto;
  padding: calc(var(--nav-height) + 28px) 48px 0;
  font-size: 13px;
  color: var(--text-dimmer);
}
.svc-breadcrumb a { color: var(--text-dim); }
.svc-breadcrumb a:hover { color: var(--white); }
.svc-breadcrumb span[aria-current] { color: var(--text-dim); }

.svc-hero {
  max-width: 1000px;
  margin: 0 auto;
  padding: 40px 48px 56px;
  border-bottom: 1px solid var(--border-dark);
}
.svc-hero .eyebrow { margin-bottom: 20px; }
.svc-hero h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(34px, 5.4vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--white);
  margin-bottom: 24px;
  max-width: 18ch;
}
.svc-hero-intro { font-size: 18px; line-height: 1.7; color: var(--text-dim); max-width: 66ch; }
.svc-hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 32px; }

/* ---------- HERO INTERFACE VISUAL ----------
   A restrained browser-frame artefact next to the hero copy — the page
   demonstrating interface design rather than just describing it. Pure
   CSS/markup, no image asset, no random gradients. */
.svc-hero-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.hero-frame {
  position: relative;
  background: var(--surface-elevated);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-elevated);
  overflow: hidden;
  transform: rotate(0.6deg);
}
.hero-frame-chrome { display: flex; align-items: center; gap: 6px; padding: 14px 16px; border-bottom: 1px solid var(--border-soft); }
.hero-frame-chrome span:not(.hero-frame-url) { width: 8px; height: 8px; border-radius: 50%; background: var(--border-strong); }
.hero-frame-chrome span:nth-child(1) { background: var(--orange); }
.hero-frame-url { flex: 1; height: 16px; margin-left: 10px; border-radius: 999px; background: var(--surface-secondary); }
.hero-frame-body { padding: 22px 22px 26px; }
.hero-frame-nav { display: flex; align-items: center; gap: 12px; padding-bottom: 18px; margin-bottom: 20px; border-bottom: 1px solid var(--border-soft); }
.hero-frame-logo { width: 22px; height: 22px; border-radius: 6px; background: var(--orange); }
.hero-frame-link { width: 34px; height: 8px; border-radius: 999px; background: var(--border-strong); }
.hero-frame-pill { margin-left: auto; width: 52px; height: 18px; border-radius: 999px; background: var(--white); }
.hero-frame-hero { margin-bottom: 22px; }
.hero-frame-line { display: block; height: 12px; border-radius: 4px; background: var(--border-strong); margin-bottom: 10px; }
.hero-frame-line--lg { width: 78%; height: 18px; }
.hero-frame-line--md { width: 52%; }
.hero-frame-cta { display: inline-block; width: 96px; height: 26px; border-radius: 999px; background: var(--orange); margin-top: 6px; }
.hero-frame-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.hero-frame-card { display: block; aspect-ratio: 1 / 0.8; border-radius: var(--radius-sm); background: var(--surface-secondary); border: 1px solid var(--border-soft); }
.hero-frame-pointer { position: absolute; right: 14%; bottom: 20%; display: flex; align-items: center; justify-content: center; animation: heroPointer 4.5s var(--motion-ease) infinite; }
.hero-frame-pointer-ring { position: absolute; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--orange); opacity: 0.5; }
.hero-frame-pointer-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 5px rgba(232, 98, 61, 0.16); }
@keyframes heroPointer {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-10px, -8px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-frame-pointer { animation: none; }
}

.svc-body { max-width: 1000px; margin: 0 auto; padding: 56px 48px 0; }
.svc-section { margin-bottom: 52px; }
.svc-section h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(22px, 3vw, 30px);
  letter-spacing: -0.01em;
  color: var(--white);
  margin-bottom: 16px;
}
.svc-section h3 { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--orange); margin-bottom: 14px; }
.svc-section p { font-size: 16px; line-height: 1.75; color: var(--text-dim); max-width: 68ch; margin-bottom: 14px; }
.svc-section p:last-child { margin-bottom: 0; }

.svc-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 32px; margin-top: 20px; }
.svc-list li { font-size: 15px; line-height: 1.6; color: var(--text-dim); padding-left: 22px; position: relative; }
.svc-list li::before { content: ''; position: absolute; left: 0; top: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--orange); }

/* FAQ — native <details>, no JS required */
.svc-faq { border-top: 1px solid var(--border-dark); }
.svc-faq-item { border-bottom: 1px solid var(--border-dark); padding: 22px 0; }
.svc-faq-item summary {
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  font-size: 16px;
  color: var(--white);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.svc-faq-item summary::-webkit-details-marker { display: none; }
.svc-faq-item summary::after { content: '+'; font-size: 20px; color: var(--text-dim); flex-shrink: 0; transition: transform .25s var(--ease); }
.svc-faq-item[open] summary::after { transform: rotate(45deg); }
.svc-faq-item p { margin-top: 14px; font-size: 15px; line-height: 1.7; color: var(--text-dim); max-width: 68ch; }

/* Related services / related work chip rows */
.svc-related { border-top: 1px solid var(--border-dark); padding: 40px 0; }
.svc-related h2 { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--text-dimmer); margin-bottom: 20px; }
.svc-related-list { display: flex; flex-wrap: wrap; gap: 12px 28px; }
.svc-related-list a {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--white);
  border-bottom: 1px solid var(--border-dark);
  padding-bottom: 2px;
}
.svc-related-list a:hover { color: var(--orange); border-color: var(--orange); }

/* Related work — image cards */
.svc-work-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 20px; }
.svc-work-card { display: block; }
.svc-work-card img { border-radius: var(--radius); aspect-ratio: 16/10; object-fit: cover; width: 100%; height: auto; transition: transform .5s var(--ease); }
.svc-work-card:hover img { transform: scale(1.04); }
.svc-work-card span { display: block; margin-top: 10px; font-size: 14px; font-weight: 600; color: var(--white); }

.svc-cta { border-top: 1px solid var(--border-dark); padding: 48px 0 100px; }
.svc-cta a {
  display: inline-block;
  background: var(--white);
  color: var(--black);
  font-weight: 700;
  font-size: 15px;
  padding: 16px 32px;
  border-radius: 999px;
  text-decoration: none;
}
.svc-cta a:hover { opacity: .85; }

/* ---------- CAPABILITY EXPLORER ----------
   Used on the UI/UX Design service page. Left column: sticky numbered
   index of capabilities. Right column: real, always-in-DOM content
   blocks in normal flow — each with its own copy (unchanged) and a
   capability-specific visual artefact. The "active" feel comes from a
   sticky index whose current item is tracked against scroll position
   (work.js), not from swapping DOM content in and out — every capability's
   full copy is present, crawlable and readable with JS disabled. Mobile
   collapses each block into an accordion via a real <button> with
   aria-expanded/aria-controls; desktop ignores that state and always
   shows every block open. */
.cap-explorer {
  max-width: var(--container);
  margin: 0 auto;
  padding: 64px 48px;
  display: grid;
  grid-template-columns: minmax(200px, 260px) 1fr;
  gap: clamp(32px, 5vw, 72px);
  border-top: 1px solid var(--border-dark);
}
.cap-index { position: sticky; top: calc(var(--nav-height) + 32px); align-self: start; display: flex; flex-direction: column; height: max-content; }
.cap-index-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--text-dimmer); margin-bottom: 18px; }
.cap-index-item {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--border-soft);
  color: var(--text-dimmer);
  transition: color var(--motion-fast) var(--motion-ease), padding-left var(--motion-fast) var(--motion-ease);
}
.cap-index-item:last-of-type { border-bottom: 1px solid var(--border-soft); }
.cap-index-item:hover { color: var(--text-dim); padding-left: 4px; }
.cap-index-num { font-size: 12px; font-variant-numeric: tabular-nums; font-weight: 600; color: inherit; }
.cap-index-label { font-family: var(--font-display); font-weight: 700; font-size: 14.5px; letter-spacing: -0.005em; color: inherit; }
.cap-index-item.is-active {
  color: var(--white);
  padding-left: 8px;
  border-top-color: var(--orange);
}
.cap-index-item.is-active .cap-index-num { color: var(--orange); }

.cap-list { display: flex; flex-direction: column; gap: 6px; }
.cap-block { padding: 30px 0; border-bottom: 1px solid var(--border-soft); scroll-margin-top: calc(var(--nav-height) + 24px); }
.cap-block:first-child { padding-top: 0; }
.cap-block:last-child { border-bottom: none; padding-bottom: 4px; }
.cap-heading { margin: 0; }
.cap-toggle {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  margin: 0 0 16px;
  font: inherit;
  text-align: left;
  cursor: default;
  color: var(--white);
}
.cap-toggle-num { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--orange); }
.cap-toggle-text { font-family: var(--font-display); font-weight: 700; font-size: clamp(22px, 3vw, 30px); letter-spacing: -0.01em; }
.cap-toggle-icon { display: none; }

.cap-panel { max-height: 900px; overflow: hidden; opacity: 1; transition: max-height var(--motion-slow) var(--motion-ease), opacity var(--motion-normal) var(--motion-ease); }
.cap-panel p { font-size: 16px; line-height: 1.75; color: var(--text-dim); max-width: 62ch; margin-bottom: 26px; }
.cap-panel .svc-list { margin-top: 0; margin-bottom: 26px; }

/* Text-entrance: a restrained translate-only reveal as each block scrolls
   into view, applied once via .is-in (work.js), not a scroll-tied repeat.
   Deliberately never touches opacity/clip-path/visibility on real copy —
   text stays fully present and readable at every point (no-JS, JS-disabled
   crawl, or a stalled script all render full text immediately), only its
   position animates a few pixels into place. */
.cap-block .cap-toggle-text, .cap-block > .cap-panel > p, .cap-block > .cap-panel > ul { transform: translateY(0); }
@media (prefers-reduced-motion: no-preference) {
  .cap-block:not(.is-in) .cap-toggle-text { transform: translateY(14px); }
  .cap-block:not(.is-in) > .cap-panel > p, .cap-block:not(.is-in) > .cap-panel > ul { transform: translateY(10px); }
  .cap-block .cap-toggle-text { transition: transform var(--motion-slow) var(--motion-ease); }
  .cap-block > .cap-panel > p, .cap-block > .cap-panel > ul { transition: transform var(--motion-normal) var(--motion-ease) 80ms; }

  /* The visual artefacts are decorative (aria-hidden) so, unlike the
     copy above, they're free to also use opacity — and each capability
     gets a distinct micro-transition rather than one repeated fade. */
  .cap-visual { transition: opacity var(--motion-slow) var(--motion-ease) 120ms, transform var(--motion-slow) var(--motion-ease) 120ms; }
  .cap-block:not(.is-in) .cap-visual { opacity: 0; }
  .cap-block:not(.is-in) .cap-visual--journey { transform: translateX(-16px); }
  .cap-block:not(.is-in) .cap-visual--ia { transform: translateY(-14px); }
  .cap-block:not(.is-in) .cap-visual--interaction { transform: scale(0.94); }
  .cap-block:not(.is-in) .cap-visual--responsive { transform: translateX(16px); }
  .cap-block:not(.is-in) .cap-visual--funnel { transform: translateY(14px); }
  .cap-block:not(.is-in) .cap-visual--prototyping { transform: translateX(-16px); }
  .cap-block:not(.is-in) .cap-visual--usability { transform: scale(0.94); }
  .cap-block:not(.is-in) .cap-visual--content-card { transform: translateY(-14px); }
  .cap-block:not(.is-in) .cap-visual--content-types { transform: translateX(16px); }
  .cap-block:not(.is-in) .cap-visual--template { transform: translateY(-14px); }
  .cap-block:not(.is-in) .cap-visual--dashboard { transform: translateX(-16px); }
  .cap-block:not(.is-in) .cap-visual--foundation { transform: translateY(14px); }
  .cap-block:not(.is-in) .cap-visual--issues { transform: translateY(-14px); }
  .cap-block:not(.is-in) .cap-visual--audit { transform: translateX(16px); }
  .cap-block:not(.is-in) .cap-visual--rebuild { transform: scale(0.94); }
  .cap-block:not(.is-in) .cap-visual--redirect { transform: translateX(-16px); }
  .cap-block:not(.is-in) .cap-visual--code { transform: translateX(-16px); }
  .cap-block:not(.is-in) .cap-visual--vitals { transform: translateY(-14px); }
  .cap-block:not(.is-in) .cap-visual--seo { transform: translateY(14px); }
  .cap-block:not(.is-in) .cap-visual--headings { transform: translateX(-16px); }
}

/* Capability-specific visual artefacts — restrained, CSS-only, no
   gradients or generic illustration. */
.cap-visual { display: flex; align-items: center; gap: 10px; padding: 22px 20px; background: var(--surface-elevated); border: 1px solid var(--border-soft); border-radius: var(--radius); max-width: 62ch; }

.cap-visual--journey { flex-wrap: wrap; }
.cap-journey-node { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: var(--surface-secondary); border: 1px solid var(--border-soft); font-size: 13px; font-weight: 600; color: var(--text-dim); }
.cap-journey-node em { font-style: normal; width: 18px; height: 18px; border-radius: 50%; background: var(--border-strong); color: var(--black); font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.cap-journey-node--end { background: var(--orange); color: var(--white); border-color: var(--orange); }
.cap-journey-node--end em { background: var(--white); color: var(--orange); }
.cap-journey-line { flex: 1 1 20px; min-width: 20px; height: 1px; background: var(--border-strong); }

.cap-visual--ia { flex-direction: column; align-items: center; gap: 0; padding-top: 26px; }
.cap-ia-root { padding: 8px 18px; border-radius: var(--radius-sm); background: var(--orange); color: var(--white); font-size: 13px; font-weight: 700; }
.cap-ia-branch { position: relative; display: flex; gap: 10px; margin-top: 22px; padding-top: 16px; }
.cap-ia-branch::before { content: ''; position: absolute; top: 0; left: 8%; right: 8%; height: 1px; background: var(--border-strong); }
.cap-ia-leaf { position: relative; padding: 7px 12px; border-radius: var(--radius-sm); background: var(--surface-secondary); border: 1px solid var(--border-soft); font-size: 12px; font-weight: 600; color: var(--text-dim); }
.cap-ia-leaf::before { content: ''; position: absolute; top: -16px; left: 50%; width: 1px; height: 16px; background: var(--border-strong); }

.cap-visual--interaction { gap: 14px; }
.cap-state-btn { padding: 10px 16px; border-radius: 999px; font-size: 12.5px; font-weight: 700; border: 1px solid var(--border-soft); color: var(--text-dim); background: var(--surface-secondary); }
.cap-state-btn--hover { color: var(--white); border-color: var(--border-strong); box-shadow: 0 0 0 3px rgba(255,255,255,0.06); transform: translateY(-2px); }
.cap-state-btn--active { color: var(--white); background: var(--orange); border-color: var(--orange); transform: translateY(1px) scale(0.97); }

.cap-visual--responsive { align-items: flex-end; gap: 16px; }
.cap-device { display: flex; flex-direction: column; gap: 6px; padding: 8px; border-radius: var(--radius-sm); background: var(--surface-secondary); border: 1px solid var(--border-soft); }
.cap-device span { display: block; height: 5px; border-radius: 2px; background: var(--border-strong); }
.cap-device--desktop { width: 120px; }
.cap-device--desktop span:first-child { width: 90%; }
.cap-device--desktop span:last-child { width: 60%; }
.cap-device--tablet { width: 74px; }
.cap-device--mobile { width: 44px; }
.cap-device--tablet span, .cap-device--mobile span { width: 100%; }

.cap-visual--funnel { flex-direction: column; align-items: stretch; gap: 8px; }
.cap-funnel-bar { width: var(--w); min-width: 90px; padding: 8px 14px; border-radius: var(--radius-sm); background: var(--surface-secondary); border: 1px solid var(--border-soft); font-size: 12.5px; font-weight: 600; color: var(--text-dim); }
.cap-funnel-bar--end { background: var(--orange); border-color: var(--orange); color: var(--white); }

.cap-visual--prototyping { gap: 10px; }
.cap-proto-frame { padding: 14px 16px; border-radius: var(--radius-sm); font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; text-align: center; }
.cap-proto-frame--wire { border: 1px dashed var(--border-strong); color: var(--text-dimmer); }
.cap-proto-frame--ui { border: 1px solid var(--orange); color: var(--orange); }
.cap-proto-frame--final { background: var(--orange); color: var(--white); }
.cap-proto-arrow { color: var(--text-dimmer); font-size: 14px; }

.cap-visual--usability { flex-wrap: wrap; }
.cap-usability-chip { padding: 9px 14px; border-radius: var(--radius-sm); font-size: 12px; font-weight: 600; border: 1px solid var(--border-soft); color: var(--text-dim); background: var(--surface-secondary); }
.cap-usability-chip--contrast { color: var(--white); }
.cap-usability-chip--focus { outline: 2px solid var(--orange); outline-offset: 2px; }
.cap-usability-chip--error { border-color: var(--orange); color: var(--orange); }

.cap-visual--content-card { flex-direction: column; align-items: stretch; gap: 8px; }
.cap-cc-field { display: flex; align-items: center; gap: 10px; }
.cap-cc-field em { font-style: normal; width: 44px; flex-shrink: 0; font-size: 11px; font-weight: 600; color: var(--text-dimmer); }
.cap-cc-field i { flex: 1; height: 26px; border-radius: var(--radius-sm); background: var(--surface-secondary); border: 1px solid var(--border-soft); }
.cap-cc-field--photo i { background: repeating-linear-gradient(135deg, var(--surface-secondary), var(--surface-secondary) 6px, var(--border-dark) 6px, var(--border-dark) 7px); }

.cap-visual--content-types { flex-wrap: wrap; }
.cap-type-chip { padding: 8px 14px; border-radius: 999px; background: var(--surface-secondary); border: 1px solid var(--border-soft); font-size: 12.5px; font-weight: 600; color: var(--text-dim); }
.cap-type-chip:nth-child(3n+1) { border-color: var(--orange); color: var(--orange); }

.cap-visual--template { flex-direction: column; align-items: center; gap: 0; padding-top: 26px; }
.cap-template-root { padding: 8px 18px; border-radius: var(--radius-sm); background: var(--orange); color: var(--white); font-size: 13px; font-weight: 700; }
.cap-template-branch { position: relative; display: flex; gap: 10px; margin-top: 22px; padding-top: 16px; }
.cap-template-branch::before { content: ''; position: absolute; top: 0; left: 8%; right: 8%; height: 1px; background: var(--border-strong); }
.cap-template-leaf { position: relative; width: 44px; height: 32px; border-radius: var(--radius-sm); background: var(--surface-secondary); border: 1px dashed var(--border-strong); }
.cap-template-leaf::before { content: ''; position: absolute; top: -16px; left: 50%; width: 1px; height: 16px; background: var(--border-strong); }

.cap-visual--dashboard { flex-direction: column; align-items: stretch; gap: 14px; }
.cap-dash-nav { display: flex; gap: 8px; }
.cap-dash-nav i { width: 40px; height: 10px; border-radius: 4px; background: var(--surface-secondary); border: 1px solid var(--border-soft); }
.cap-dash-nav i:first-child { background: var(--orange); border-color: var(--orange); }
.cap-dash-rows { display: flex; flex-direction: column; gap: 6px; }
.cap-dash-rows i { display: block; height: 14px; border-radius: 4px; background: var(--surface-secondary); border: 1px solid var(--border-soft); }
.cap-dash-rows i:nth-child(1) { width: 100%; }
.cap-dash-rows i:nth-child(2) { width: 82%; }
.cap-dash-rows i:nth-child(3) { width: 60%; }

.cap-visual--foundation { flex-direction: column; align-items: stretch; gap: 4px; }
.cap-foundation-layer { padding: 10px 14px; border-radius: var(--radius-sm); background: var(--surface-secondary); border: 1px solid var(--border-soft); font-size: 12px; font-weight: 600; color: var(--text-dim); text-align: center; }
.cap-foundation-layer:first-child { background: var(--orange); border-color: var(--orange); color: var(--white); }

.cap-visual--issues { flex-wrap: wrap; }
.cap-issue-chip { padding: 8px 14px; border-radius: 999px; background: var(--surface-secondary); border: 1px solid var(--orange); color: var(--orange); font-size: 12.5px; font-weight: 600; }

.cap-visual--audit { flex-direction: column; align-items: stretch; gap: 10px; }
.cap-audit-row { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; color: var(--text-dim); }
.cap-audit-row i { width: 16px; height: 16px; border-radius: 4px; background: var(--orange); flex-shrink: 0; position: relative; }
.cap-audit-row i::before { content: ''; position: absolute; left: 4px; top: 7px; width: 7px; height: 3px; border-left: 2px solid var(--white); border-bottom: 2px solid var(--white); transform: rotate(-45deg); }

.cap-visual--rebuild { gap: 14px; }
.cap-rebuild-frame { padding: 16px 20px; border-radius: var(--radius-sm); font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.cap-rebuild-frame--before { border: 1px dashed var(--border-strong); color: var(--text-dimmer); }
.cap-rebuild-frame--after { background: var(--orange); color: var(--white); }

.cap-visual--redirect { gap: 12px; }
.cap-redirect-url { padding: 9px 14px; border-radius: var(--radius-sm); background: var(--surface-secondary); border: 1px solid var(--border-soft); font-size: 12.5px; font-weight: 600; color: var(--text-dimmer); font-family: monospace; }
.cap-redirect-url--new { color: var(--white); border-color: var(--border-strong); }
.cap-redirect-code { font-size: 11px; font-weight: 700; color: var(--orange); padding: 4px 8px; border: 1px solid var(--orange); border-radius: 999px; }

.cap-visual--code { flex-direction: column; align-items: stretch; gap: 9px; }
.cap-code-line { display: block; width: var(--w); height: 10px; border-radius: 3px; background: var(--surface-secondary); border: 1px solid var(--border-soft); }
.cap-code-line--kw { background: rgba(232, 98, 61, 0.18); border-color: var(--orange); }

.cap-visual--vitals { flex-wrap: wrap; }
.cap-vital-chip { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: var(--surface-secondary); border: 1px solid var(--border-soft); font-size: 12.5px; font-weight: 600; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.cap-vital-chip i { width: 7px; height: 7px; border-radius: 50%; background: #4CAF6D; flex-shrink: 0; }

.cap-visual--seo { flex-wrap: wrap; }
.cap-seo-tag { padding: 8px 14px; border-radius: var(--radius-sm); background: var(--surface-secondary); border: 1px solid var(--border-soft); font-size: 12px; font-weight: 600; color: var(--orange); font-family: monospace; }

.cap-visual--headings { flex-direction: column; align-items: flex-start; gap: 8px; }
.cap-heading-row { display: flex; align-items: center; padding: 6px 12px; border-radius: var(--radius-sm); background: var(--surface-secondary); border: 1px solid var(--border-soft); font-size: 11px; font-weight: 700; color: var(--text-dimmer); }
.cap-heading-row--h1 { background: var(--orange); border-color: var(--orange); color: var(--white); font-size: 12px; width: 70%; }
.cap-heading-row--h2 { margin-left: 20px; width: 55%; }
.cap-heading-row--h3 { margin-left: 40px; width: 38%; }

/* ---------- SELECTED WORK FEATURE ---------- */
.svc-work-feature { max-width: var(--container); margin: 0 auto; padding: 24px 48px 64px; }
.svc-work-feature-head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.svc-work-feature-head h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(22px, 3vw, 30px); letter-spacing: -0.01em; color: var(--white); }
.svc-work-feature-intro { font-size: 14px; color: var(--text-dim); margin: -12px 0 20px; }
.svc-work-feature-all { font-size: 13px; font-weight: 600; color: var(--text-dim); white-space: nowrap; }
.svc-work-feature-all:hover { color: var(--white); }
.svc-work-feature-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 20px; }
.svc-work-feature-grid--single { grid-template-columns: 1fr; max-width: 720px; }
.svc-work-primary { position: relative; display: block; border-radius: var(--radius-lg); overflow: hidden; }
.svc-work-primary img { display: block; width: 100%; height: 100%; aspect-ratio: 16/11; object-fit: cover; transition: transform .6s var(--motion-ease); }
.svc-work-primary:hover img { transform: scale(1.03); }
.svc-work-primary-meta {
  position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: space-between;
  padding: 18px 22px; gap: 16px;
  background: linear-gradient(to top, rgba(0,0,0,0.78), rgba(0,0,0,0));
}
.svc-work-primary-meta span:first-child { font-family: var(--font-display); font-weight: 700; font-size: 20px; color: var(--white); }
.svc-work-primary-meta .arrow-link { font-size: 13px; font-weight: 600; color: var(--text-dim); }
.svc-work-primary:hover .arrow-link { color: var(--white); }
.svc-work-secondary { display: flex; flex-direction: column; gap: 20px; }
.svc-work-secondary .svc-work-card img { aspect-ratio: 16/10; }

/* ---------- SERVICES STACK ----------
   Poke's own take on overlapping/stacked service panels: a "digital
   file system" of sticky cards that shingle over each other on scroll,
   with a continuous scroll-scrubbed scale/dim (work.js) so a panel
   visibly recedes in lockstep with scroll rather than snapping through
   a canned transition once a threshold crosses. Pure CSS position:sticky
   for the core mechanic — no ScrollTrigger needed. Desktop only; the
   720px breakpoint below turns this back into a plain flow list. */
.svc-stack { max-width: var(--container); margin: 0 auto; padding: 0 48px 120px; display: flex; flex-direction: column; gap: 18px; }
/* Desktop only (see the 720px breakpoint below, which turns this back
   into a plain flow list on narrow viewports). Three independent
   custom properties compose into one `transform` instead of fighting
   over it directly: --lift/--interact-scale are event-driven (hover,
   press) with a short CSS transition; --scroll-scale is scrubbed
   continuously by work.js in lockstep with scroll position, set with
   no transition so it tracks 1:1 rather than easing/catching up after
   the fact — a "canned" transition here would work against the "tied
   to scroll progress" feel. Same reasoning for --scroll-brightness. */
.svc-panel {
  --lift: 0px;
  --interact-scale: 1;
  --scroll-scale: 1;
  --scroll-brightness: 1;
  display: block;
  position: sticky;
  top: calc(var(--nav-height) + 20px + (var(--i, 0) * 54px));
  background: var(--surface-elevated);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: 36px 40px 40px;
  box-shadow: var(--shadow-elevated);
  transform: translateY(var(--lift)) scale(calc(var(--scroll-scale) * var(--interact-scale)));
  filter: brightness(var(--scroll-brightness));
  transition: transform var(--motion-fast) var(--motion-press),
              border-color var(--motion-fast) var(--motion-ease),
              box-shadow var(--motion-fast) var(--motion-ease);
}
.svc-panel:hover { --lift: -4px; border-color: var(--border-strong); }
.svc-panel:active { --lift: -2px; --interact-scale: 0.995; }
/* The panel currently dominant at the top of the stack — deepened
   very subtly, not a different treatment, just enough to read as the
   "front" layer. Toggled in work.js alongside the scroll-scrub. */
.svc-panel.is-active { border-color: var(--border-strong); box-shadow: var(--shadow-elevated), 0 0 0 1px rgba(255, 255, 255, 0.05); }
.svc-panel-top {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 16px; margin-bottom: 20px;
  border-bottom: 1px solid var(--border-soft);
  font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--brand-orange);
}
.svc-panel-top > span:first-child { display: inline-block; opacity: 0.82; transition: opacity var(--motion-fast) var(--motion-ease); }
.svc-panel:hover .svc-panel-top > span:first-child { opacity: 1; }
.svc-panel-open { display: inline-block; color: var(--text-muted); transition: color var(--motion-fast) var(--motion-ease), transform var(--motion-fast) var(--motion-ease); }
.svc-panel:hover .svc-panel-open { color: var(--text-primary); transform: translateX(3px); }
.svc-panel h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(24px, 3.2vw, 32px); margin-bottom: 12px; color: var(--white); transition: transform var(--motion-fast) var(--motion-ease); }
.svc-panel:hover h2 { transform: translateX(2px); }
.svc-panel p { font-size: 15.5px; line-height: 1.65; color: var(--text-dim); max-width: 62ch; }
.svc-panel .arrow-link { display: inline-block; margin-top: 20px; font-size: 13px; font-weight: 600; color: var(--white); }

/* ---------- INSIGHTS HUB ---------- */
.insights-hero { max-width: 1000px; margin: 0 auto; padding: calc(var(--nav-height) + 60px) 48px 40px; }
.insights-hero h1 { font-family: var(--font-display); font-weight: 800; font-size: clamp(34px, 5.4vw, 64px); line-height: 1.05; letter-spacing: -0.02em; margin-bottom: 22px; }
.insights-hero p { font-size: 18px; line-height: 1.7; color: var(--text-dim); max-width: 62ch; }
.insights-empty { max-width: 1000px; margin: 0 auto; padding: 40px 48px 100px; border-top: 1px solid var(--border-dark); }
.insights-empty p { font-size: 15px; line-height: 1.7; color: var(--text-dim); max-width: 60ch; margin-bottom: 24px; }

@media (max-width: 900px) {
  .svc-list { grid-template-columns: 1fr; }
  .svc-work-grid { grid-template-columns: repeat(2, 1fr); }
  .svc-hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .hero-frame { max-width: 480px; }
  .cap-explorer { grid-template-columns: 1fr; }
  .cap-index { position: static; flex-direction: row; flex-wrap: wrap; gap: 8px 20px; padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid var(--border-dark); }
  .cap-index-eyebrow { width: 100%; margin-bottom: 4px; }
  .cap-index-item { border-top: none; padding: 6px 0; }
  .cap-index-item:last-of-type { border-bottom: none; }
  .svc-work-feature-grid { grid-template-columns: 1fr; }
  .svc-work-secondary { flex-direction: row; }
}
@media (max-width: 720px) {
  .svc-breadcrumb, .svc-hero, .svc-body, .svc-cta, .insights-hero, .insights-empty { padding-left: 20px; padding-right: 20px; }
  .svc-hero { padding-top: calc(var(--nav-height) + 20px); padding-bottom: 36px; }
  .svc-hero h1 { font-size: clamp(28px, 9vw, 40px); }
  .svc-body { padding-top: 40px; }
  .svc-section { margin-bottom: 40px; }
  .svc-work-grid { grid-template-columns: 1fr; }
  .insights-hero { padding-top: calc(var(--nav-height) + 32px); }
  .hero-frame { display: none; }

  /* Services stack: the sticky/scroll-scrubbed layering is desktop
     only — on a narrow viewport, back to a plain readable stacked
     list. Explicit product decision, not a technical limitation. */
  .svc-stack { padding-left: 20px; padding-right: 20px; gap: 16px; }
  .svc-panel { position: static; padding: 28px 24px 30px; }
  .svc-panel:hover { --lift: 0px; }

  /* Capability explorer: sticky index becomes a plain accordion. Each
     block is a real <button> (aria-expanded/aria-controls, toggled in
     work.js) collapsing/expanding its panel — content stays in the DOM
     either way, just visually collapsed via max-height. */
  .cap-explorer { padding: 40px 20px; grid-template-columns: 1fr; gap: 4px; }
  .cap-index { display: none; }
  .cap-block { padding: 4px 0; }
  .cap-block:first-child { padding-top: 4px; }
  .cap-toggle { cursor: pointer; padding: 20px 0; margin: 0; }
  .cap-toggle-text { font-size: clamp(19px, 5.5vw, 23px); }
  .cap-toggle-icon {
    display: block; margin-left: auto; flex-shrink: 0; width: 20px; height: 20px; position: relative;
  }
  .cap-toggle-icon::before, .cap-toggle-icon::after {
    content: ''; position: absolute; top: 50%; left: 50%; background: var(--text-dim);
    transition: transform var(--motion-fast) var(--motion-ease);
  }
  .cap-toggle-icon::before { width: 12px; height: 1.5px; transform: translate(-50%, -50%); }
  .cap-toggle-icon::after { width: 1.5px; height: 12px; transform: translate(-50%, -50%); }
  .cap-toggle[aria-expanded="true"] .cap-toggle-icon::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }
  .cap-panel { max-height: 0; opacity: 0; }
  .cap-block.is-open .cap-panel { max-height: 900px; opacity: 1; padding-bottom: 24px; }
  .cap-block:not(.is-in) .cap-toggle-text, .cap-block:not(.is-in) > .cap-panel > p, .cap-block:not(.is-in) > .cap-panel > ul { transform: none; }

  .svc-work-feature { padding: 24px 20px 48px; }
  .svc-work-feature-grid { grid-template-columns: 1fr; gap: 16px; }
  .svc-work-secondary { flex-direction: column; gap: 16px; }
}