/* Service discovery follows the local Cinemata VF grid, type and controls.
   Only these pages own the display scale below; shared VF tokens stay intact. */
.id-directory, .id-service-detail { padding-top: var(--id-page-pad-t); padding-bottom: var(--vf-sec-bottom); }
.id-directory-label, .id-service-slate { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--vf-sp-xl); padding-bottom: var(--vf-sp-3xl); border-bottom: 1px solid var(--id-rule); }
.id-directory-label > :first-child, .id-service-slate > :first-child { color: var(--vf-accent); }
.id-directory-intro-grid { display: grid; grid-template-columns: minmax(0,1.65fr) minmax(0,1fr); align-items: end; gap: var(--vf-sp-6xl); padding: var(--vf-sp-5xl) 0 var(--vf-sec-bottom); }
.id-directory-heading h1 { max-width: 10ch; margin: 0; font: 900 clamp(44px,8.6vw,128px)/.94 var(--vf-font-display); letter-spacing: var(--vf-track-mega); text-transform: uppercase; }
.id-directory-intro > p:first-child { margin-bottom: var(--vf-sp-3xl); color: var(--vf-fg); font: 600 var(--vf-fs-lead)/var(--vf-lh-lead) var(--vf-font-body); letter-spacing: var(--vf-track-tight); }
.id-directory-intro > p:nth-child(2) { max-width: 39ch; color: var(--vf-fg-2); font-size: var(--vf-fs-body); line-height: var(--vf-lh-body-loose); }
.id-directory-intro .id-text-link { margin-top: var(--vf-sp-3xl); }
.id-directory-service { position: relative; display: grid; grid-template-columns: 48px minmax(0,1fr) minmax(240px,.58fr); gap: var(--vf-sp-5xl); padding: var(--vf-sp-6xl) 0; border-top: 1px solid var(--id-rule); scroll-margin-top: 120px; }
.id-directory-service:last-child { border-bottom: 1px solid var(--id-rule); }
.id-directory-service::before { content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--vf-accent); transform: scaleX(0); transform-origin: left; transition: transform var(--vf-dur-slow) var(--vf-ease-lens); }
.id-directory-service:focus-within::before, .id-directory-service:hover::before { transform: scaleX(1); }
.id-directory-marker { display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; }
.id-directory-number, .id-directory-cross { color: var(--vf-accent); font: 500 var(--vf-fs-sm)/var(--vf-lh-sm-snug) var(--vf-font-mono); }
.id-directory-cross { color: var(--vf-fg-3); }
.id-directory-copy, .id-directory-access { min-width: 0; }
.id-directory-copy h2 { margin: var(--vf-sp-xl) 0 0; font: 900 clamp(32px,4.2vw,64px)/1 var(--vf-font-display); letter-spacing: var(--vf-track-display); text-transform: uppercase; }
.id-directory-copy h2 a { text-decoration: none; transition: color var(--vf-dur-fast); }
.id-directory-copy h2 a:hover { color: var(--vf-accent); }
.id-directory-headline { max-width: 30ch; margin-top: var(--vf-sp-4xl); font: 600 var(--vf-fs-xl)/var(--vf-lh-xl-snug) var(--vf-font-body); letter-spacing: var(--vf-track-tight); }
.id-directory-summary { max-width: 45ch; margin-top: var(--vf-sp-xl); color: var(--vf-fg-2); font-size: var(--vf-fs-body); line-height: var(--vf-lh-body-loose); }
.id-directory-copy .id-text-link { margin-top: var(--vf-sp-xl); }
.id-directory-access { align-self: end; padding-bottom: var(--vf-sp-sm); }
.id-service-status { display: flex; align-items: baseline; gap: var(--vf-sp-sm); color: var(--vf-fg-2); font: 500 var(--vf-fs-xs)/var(--vf-lh-xs-body) var(--vf-font-mono); }
.id-service-status > span { flex: none; width: var(--vf-sp-xs); height: var(--vf-sp-xs); background: var(--vf-accent); }
.id-directory-access > .vf-btn { margin-top: var(--vf-sp-3xl); }
.id-directory-access .id-access-note { margin-top: var(--vf-sp-3xl); max-width: 37ch; }
:is(.id-directory, .id-service-detail) .vf-btn { max-width: 100%; min-height: var(--vf-ctl-md); height: auto; white-space: normal; padding-block: var(--vf-sp-xs); }
:is(.id-directory, .id-service-detail) .vf-btn-pip { flex: none; }

/* A detail starts with a full-width title, then description and a working example. */
.id-service-heading .id-back { margin-bottom: var(--vf-sp-4xl); }
.id-service-heading h1 { margin-top: var(--vf-sp-4xl); font: 900 clamp(44px,8vw,112px)/.96 var(--vf-font-display); letter-spacing: var(--vf-track-mega); text-transform: uppercase; }
.id-service-intro { display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); align-items: start; gap: var(--vf-sec-head-gap); margin-top: var(--vf-sp-5xl); margin-bottom: var(--vf-sec-bottom); perspective: 1500px; }
.id-service-description, .id-service-example { min-width: 0; }
.id-service-description h2 { max-width: 24ch; font: 900 var(--vf-fs-h3)/var(--vf-lh-h3) var(--vf-font-display); letter-spacing: var(--vf-track-title); text-transform: uppercase; }
.id-service-description > p { max-width: 46ch; margin-top: var(--vf-sp-3xl); color: var(--vf-fg-2); font-size: var(--vf-fs-body); line-height: var(--vf-lh-body-loose); }
.id-service-description > .vf-btn { margin-top: var(--vf-sp-4xl); }
.id-service-access { max-width: 46ch; margin-top: var(--vf-sp-5xl); padding-top: var(--vf-sp-3xl); border-top: 1px solid var(--id-rule); }
.id-service-access .id-access-note { margin-top: var(--vf-sp-lg); }
.id-example-caption { display: flex; align-items: baseline; gap: var(--vf-sp-lg); margin-top: var(--vf-sp-xl); color: var(--vf-fg-2); font: 400 var(--vf-fs-xs)/var(--vf-lh-xs-body) var(--vf-font-mono); }
.id-example-caption > span { color: var(--vf-accent); }
.id-service-audience { display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); gap: var(--vf-sec-head-gap); border-top: 1px solid var(--id-rule); padding: var(--vf-sp-4xl) 0 var(--vf-sp-6xl); }
.id-service-audience h2 { padding-top: var(--vf-sp-xs); }
.id-service-audience > p { max-width: 40ch; font: 500 var(--vf-fs-lead)/var(--vf-lh-lead) var(--vf-font-body); letter-spacing: var(--vf-track-tight); }
.id-service-section { border-top: 1px solid var(--id-rule); padding: var(--vf-sp-5xl) 0 var(--vf-sec-bottom); }
.id-service-section-head h2 { margin-top: var(--vf-sp-3xl); font: 900 var(--vf-fs-h2)/var(--vf-lh-h2) var(--vf-font-display); letter-spacing: var(--vf-track-display); text-transform: uppercase; }
.id-service-features { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--vf-sp-5xl) var(--vf-sec-head-gap); margin-top: var(--vf-sp-5xl); }
.id-service-feature { display: grid; grid-template-columns: 28px minmax(0,1fr); gap: var(--vf-sp-3xl); padding-top: var(--vf-sp-3xl); border-top: 1px solid var(--id-rule); }
.id-feature-number, .id-service-steps li > span { padding-top: var(--vf-sp-xs); color: var(--vf-accent); font: 500 var(--vf-fs-xs)/var(--vf-lh-xs-body) var(--vf-font-mono); }
.id-service-feature h3, .id-service-steps h3 { font: 900 var(--vf-fs-h3)/var(--vf-lh-h3) var(--vf-font-display); letter-spacing: var(--vf-track-title); text-transform: uppercase; }
.id-service-feature p, .id-service-steps p { max-width: 48ch; margin-top: var(--vf-sp-xl); color: var(--vf-fg-2); font-size: var(--vf-fs-body); line-height: var(--vf-lh-body-loose); }
.id-service-process { display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); gap: var(--vf-sec-head-gap); }
.id-service-steps { list-style: none; padding: 0; margin: 0; }
.id-service-steps li { display: grid; grid-template-columns: 28px minmax(0,1fr); gap: var(--vf-sp-3xl); padding: var(--vf-sp-4xl) 0; border-bottom: 1px solid var(--id-rule); }
.id-service-steps li:first-child { padding-top: 0; }
.id-service-end { display: flex; align-items: center; justify-content: space-between; gap: var(--vf-sp-4xl); border-block: 1px solid var(--id-rule); padding: var(--vf-sp-5xl) 0; }
.id-service-end h2 { margin-top: var(--vf-sp-xl); font: 900 var(--vf-fs-h2-col)/var(--vf-lh-h2-col) var(--vf-font-display); letter-spacing: var(--vf-track-display); text-transform: uppercase; }
.id-service-end > .vf-btn { flex: none; }
.id-service-related { padding-bottom: var(--vf-sec-bottom); }
.id-service-related > .id-eyebrow { margin-bottom: var(--vf-sp-3xl); }
.id-service-related a { display: grid; grid-template-columns: 48px minmax(0,1fr) minmax(0,.6fr) 24px; gap: var(--vf-sp-3xl); align-items: center; padding: var(--vf-sp-4xl) 0; border-top: 1px solid var(--id-rule); text-decoration: none; }
.id-related-number { color: var(--vf-accent); font: 500 var(--vf-fs-xs)/var(--vf-lh-xs-body) var(--vf-font-mono); }
.id-related-title { font: 900 var(--vf-fs-h3)/var(--vf-lh-h3) var(--vf-font-display); text-transform: uppercase; letter-spacing: var(--vf-track-title); }
.id-related-kicker { color: var(--vf-fg-2); font: 400 var(--vf-fs-sm)/var(--vf-lh-sm-body) var(--vf-font-mono); }
.id-service-related svg { width: 24px; height: 24px; fill: none; stroke: var(--vf-accent); stroke-width: 1.2; transition: transform var(--vf-dur-fast); }
.id-service-related a:hover .id-related-title { color: var(--vf-accent); }
.id-service-related a:hover svg { transform: translate(2px,-2px); }

/* The examples are actual product concepts, drawn with the VF instrument grammar. */
.id-service-art .id-demo-top { background: var(--vf-screen); }
.id-service-art .id-demo-top > :first-child::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-right: var(--vf-sp-sm); background: var(--vf-accent); vertical-align: 1px; }
.id-service-art .id-art-ruler { height: 10px; margin-inline: var(--vf-sp-3xl); border-bottom: 1px solid var(--vf-line); background: repeating-linear-gradient(90deg,var(--vf-line-2) 0 1px,transparent 1px 24px) left bottom/100% 4px no-repeat; }
.id-service-art .id-wiki-phases { border-bottom: 1px solid var(--vf-line); }
.id-service-art .id-map-title strong { font-size: clamp(28px,3vw,40px); line-height: 1; }
.id-service-art .id-identity-source svg { width: 48px; height: 48px; }
.id-service-art .id-identity-source strong { font-size: clamp(28px,3vw,40px); line-height: 1; }
.id-service-art .id-identity-destinations > div { background: var(--vf-screen); }

@media (max-width: 1100px) { /* VF laptop */
  .id-directory-intro-grid { gap: var(--vf-sp-4xl); grid-template-columns: minmax(0,1.4fr) minmax(0,1fr); }
  .id-directory-service { grid-template-columns: 28px minmax(0,1fr) minmax(220px,.65fr); gap: var(--vf-sp-3xl); }
  .id-service-related a { grid-template-columns: 28px minmax(0,1fr) minmax(0,.6fr) 24px; }
}
@media (max-width: 900px) { /* VF tablet */
  .id-directory-intro-grid { grid-template-columns: minmax(0,1fr); gap: var(--vf-sp-4xl); }
  .id-directory-heading h1 { font-size: clamp(44px,10.4vw,88px); }
  .id-directory-intro { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--vf-sp-xl) var(--vf-sp-4xl); }
  .id-directory-intro > p:first-child { margin-bottom: 0; }
  .id-directory-intro .id-text-link { margin-top: 0; grid-column: 2; }
  .id-directory-service { grid-template-columns: 28px minmax(0,1fr); gap: var(--vf-sp-3xl); }
  .id-directory-marker { grid-row: span 2; }
  .id-directory-access { grid-column: 2; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: var(--vf-sp-xl) var(--vf-sp-4xl); align-items: start; padding-top: var(--vf-sp-xl); }
  .id-directory-access .id-service-status { grid-column: 1/-1; }
  .id-directory-access > .vf-btn, .id-directory-access .id-access-note { margin-top: 0; }
  .id-directory-access > .vf-btn { justify-self: start; }
  .id-service-intro { grid-template-columns: minmax(0,1fr); gap: var(--vf-sp-5xl); }
  .id-service-description > p, .id-service-access { max-width: 62ch; }
  .id-service-description h2 { max-width: 28ch; }
  .id-service-process { grid-template-columns: minmax(0,1fr); gap: var(--vf-sp-5xl); }
  .id-service-related a { grid-template-columns: 28px minmax(0,1fr) 24px; }
  .id-related-kicker { display: none; }
}
@media (max-width: 760px) { /* VF phone */
  .id-directory-label, .id-service-slate { align-items: flex-start; gap: var(--vf-sp-lg); padding-bottom: var(--vf-sp-xl); }
  .id-directory-label > :first-child { max-width: 22ch; }
  .id-directory-intro-grid { padding-top: var(--vf-sp-4xl); }
  .id-directory-intro { display: block; }
  .id-directory-intro > p:first-child { margin-bottom: var(--vf-sp-xl); }
  .id-directory-intro .id-text-link { margin-top: var(--vf-sp-xl); }
  .id-directory-service { grid-template-columns: minmax(0,1fr); padding: var(--vf-sp-5xl) 0; gap: var(--vf-sp-xl); scroll-margin-top: 96px; }
  .id-directory-marker { grid-row: auto; flex-direction: row; }
  .id-directory-copy h2 { margin-top: var(--vf-sp-lg); }
  .id-directory-headline { margin-top: var(--vf-sp-3xl); }
  .id-directory-access { grid-column: 1; display: block; padding-top: var(--vf-sp-3xl); border-top: 1px solid var(--id-rule); margin-top: var(--vf-sp-lg); }
  .id-directory-access > .vf-btn, .id-directory-access .id-access-note { margin-top: var(--vf-sp-xl); }
  .id-directory-access .id-access-note { max-width: 52ch; }
  .id-service-heading .id-back { margin-bottom: var(--vf-sp-3xl); }
  .id-service-heading h1 { margin-top: var(--vf-sp-3xl); }
  .id-service-slate { flex-direction: column; }
  .id-service-intro { margin-top: var(--vf-sp-4xl); gap: var(--vf-sp-4xl); }
  .id-service-access { margin-top: var(--vf-sp-4xl); }
  .id-service-audience { grid-template-columns: minmax(0,1fr); gap: var(--vf-sp-xl); padding-block: var(--vf-sp-4xl); }
  .id-service-section { padding-top: var(--vf-sp-4xl); }
  .id-service-section-head h2 { margin-top: var(--vf-sp-xl); }
  .id-service-features { grid-template-columns: minmax(0,1fr); gap: var(--vf-sp-4xl); margin-top: var(--vf-sp-4xl); }
  .id-service-feature, .id-service-steps li { grid-template-columns: 24px minmax(0,1fr); gap: var(--vf-sp-xl); }
  .id-service-process { gap: var(--vf-sp-4xl); }
  .id-service-end { flex-direction: column; align-items: flex-start; gap: var(--vf-sp-3xl); padding-block: var(--vf-sp-4xl); }
  .id-service-end h2 { font-size: 32px; line-height: 32px; }
  .id-service-related a { grid-template-columns: 24px minmax(0,1fr) 20px; gap: var(--vf-sp-xl); padding-block: var(--vf-sp-3xl); }
  .id-service-related svg { width: 20px; height: 20px; }
  .id-service-art .id-art-ruler { margin-inline: var(--vf-sp-xl); }
}
@media (prefers-reduced-motion: reduce) {
  .id-directory-service::before, .id-directory-copy h2 a, .id-service-related svg { transition: none; }
  .id-service-related a:hover svg { transform: none; }
}