/* Approved service overview: shared by production and the historical approved preview. */
.services-overview { --page-accent: var(--cyan); --service-body: #bac1d1; }
.services-overview .site-brand { min-height: 44px; }
.services-overview :is(h1,h2,h3,p,ul,ol) { margin: 0; }
.services-overview .service-eyebrow { font: 500 11px/1.5 var(--mono-font); letter-spacing: .12em; color: var(--muted); }
.services-overview .service-intro { display: grid; grid-template-columns: minmax(0,1.6fr) minmax(280px,1fr); gap: clamp(40px,7vw,104px); align-items: center; padding-block: 68px 64px; }
.services-overview .service-intro h1 { font: 400 clamp(48px,5.5vw,80px)/1.18 var(--headline-font); letter-spacing: -.035em; margin-block: 16px 22px; overflow: visible; }
.services-overview .service-intro__lead { max-width: 35em; font-size: 18px; line-height: 1.85; color: var(--service-body); text-wrap: pretty; }
.services-overview .service-intro__copy > a { margin-top: 28px; }
.service-jump { padding-top: 6px; }
.service-jump > p { font-size: 12px; color: var(--muted); margin-bottom: 14px; }
.service-jump a { display: grid; grid-template-columns: 32px 1fr 20px; gap: 16px; align-items: center; min-height: 58px; padding: 8px 16px 8px 0; border-bottom: 1px solid var(--line); position: relative; transition: background .2s, padding .2s; }
.service-jump a::before { content: ""; position: absolute; width: 3px; height: 16px; background: var(--channel); left: -15px; opacity: .8; }
.service-jump a > span { color: var(--muted); font: 12px var(--mono-font); }
.service-jump a > b { font: 400 22px/1.4 var(--headline-font); }
.service-jump .ui-icon { color: color-mix(in srgb,var(--channel) 70%,var(--paper)); opacity: .65; width: 18px; }
.service-jump a:is(:hover,:focus-visible) { background: color-mix(in srgb,var(--channel) 7%,transparent); padding-left: 10px; }
.service-jump a:is(:hover,:focus-visible)::before { box-shadow: 0 0 12px var(--channel); }
.service-directory__heading { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; padding-bottom: 24px; }
.services-overview .service-directory__heading h2 { font: 400 36px/1.25 var(--headline-font); }
.service-directory__heading > p { color: var(--muted); font-size: 14px; line-height: 1.7; flex-shrink: 0; }
.overview-band { --channel: var(--blue); --card-accent: var(--channel); position: relative; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.06fr) minmax(210px,.9fr); align-items: center; gap: 28px; padding: 30px 24px 30px 28px; min-height: 244px; border-top: 1px solid color-mix(in srgb,var(--channel) 34%,var(--line)); isolation: isolate; }
.overview-band:last-child { border-bottom: 1px solid var(--line); }
.overview-band::before { content: ""; position: absolute; left: 0; top: 30px; width: 3px; height: 36px; background: var(--channel); box-shadow: 0 0 12px color-mix(in srgb,var(--channel) 35%,transparent); }
.overview-band::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg,color-mix(in srgb,var(--channel) 6%,transparent),transparent 62%); opacity: .6; transition: opacity .25s; }
.overview-band--ai { --channel: var(--cyan); }
.overview-band--game { --channel: var(--pink); }
.overview-band--motion { --channel: var(--purple); }
.services-overview .overview-band .service-eyebrow { color: color-mix(in srgb,var(--channel) 65%,var(--paper)); letter-spacing: .065em; font-size: 10px; }
.overview-band .service-eyebrow > span { margin-right: 12px; font: 500 13px var(--display-font); }
.services-overview .overview-band h3 { font: 400 clamp(28px,2.8vw,42px)/1.25 var(--headline-font); margin: 14px 0 10px; color: var(--paper); text-wrap: balance; }
.services-overview .overview-band__summary { color: var(--muted); font-size: 14px; line-height: 1.8; }
.overview-band__scope ul { list-style: none; padding: 0; color: var(--service-body); font-size: 15px; line-height: 1.9; }
.overview-band__scope li { padding-block: 1px; }
.service-detail-link { display: inline-flex; align-items: center; gap: 16px; min-height: 44px; padding: 6px 0; margin-top: 12px; font-size: 14px; font-weight: 600; }
.service-detail-link .ui-icon { color: color-mix(in srgb,var(--channel) 72%,var(--paper)); transition: transform .2s; }
.service-detail-link:is(:hover,:focus-visible) .ui-icon { transform: translate(2px,-2px); }
.overview-band:is(:hover,:focus-within)::after { opacity: 1; }
.overview-band:is(:hover,:focus-within) h3 { text-shadow: 0 0 16px color-mix(in srgb,var(--channel) 30%,transparent); }
.service-scene { width: 100%; max-width: 320px; justify-self: end; color: color-mix(in srgb,var(--channel) 68%,var(--paper)); position: relative; }
.service-scene::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(transparent 0 3px,rgba(11,14,29,.2) 3px 4px); pointer-events: none; mask-image: linear-gradient(transparent,black 30%,black 70%,transparent); }
.service-scene svg { display: block; width: 100%; height: auto; overflow: visible; stroke-width: 1.2; }
.service-scene svg text { font: 10px var(--mono-font); letter-spacing: 1px; }
.scene-surface { fill: var(--ink-soft); }
.scene-tint { fill: color-mix(in srgb,var(--channel) 9%,var(--ink-soft)); }
.scene-back { opacity: .35; }
.scene-front { transform-origin: center; transition: transform .45s ease; }
.scene-active { stroke-width: 2; filter: drop-shadow(0 0 4px color-mix(in srgb,var(--channel) 50%,transparent)); }
.overview-band:is(:hover,:focus-within) .scene-front { transform: translateY(-5px); }
.overview-band:is(:hover,:focus-within) .scene-active { animation: service-trace 1.8s ease-in-out infinite; }
.service-scene--game .scene-character { filter: drop-shadow(3px 4px 0 color-mix(in srgb,var(--pink) 25%,transparent)); }
.service-working { padding-block: 68px 60px; }
.service-working__heading { display: flex; justify-content: space-between; align-items: end; gap: 40px; }
.services-overview .service-working h2 { font: 400 clamp(32px,3.2vw,48px)/1.25 var(--headline-font); margin-top: 14px; }
.service-working__heading > p { color: var(--service-body); font-size: 16px; line-height: 1.8; }
.service-working__steps { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); list-style: none; gap: 24px; padding: 36px 0 28px; }
.service-working__steps li { border-top: 1px solid var(--line); padding-top: 18px; }
.service-working__steps li > span { font: 12px var(--mono-font); color: var(--cyan); }
.services-overview .service-working__steps h3 { font: 400 25px/1.4 var(--headline-font); margin: 12px 0 8px; }
.service-working__steps p { font-size: 14px; line-height: 1.8; color: var(--muted); }
.services-overview [id] { scroll-margin-top: 100px; }
.services-overview a:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; }
@keyframes service-trace { 0%,100% { opacity: 1; } 50% { opacity: .45; } }
@media (max-width:1100px) {
  .services-overview .service-intro { grid-template-columns: minmax(0,1.3fr) minmax(260px,1fr); gap: 48px; }
  .services-overview .service-intro h1 { font-size: 54px; }
  .overview-band { grid-template-columns: minmax(0,1fr) minmax(0,1.25fr) 200px; gap: 20px; padding-left: 22px; padding-right: 0; }
  .overview-band__scope ul { font-size: 14px; }
  .services-overview .overview-band h3 { font-size: 31px; }
  .service-working__heading > p { max-width: 25em; }
}
@media (max-width:800px) {
  .services-overview .service-intro { padding-block: 44px; grid-template-columns: 1fr; gap: 32px; }
  .services-overview .service-intro h1 { font-size: clamp(44px,7vw,58px); }
  .service-jump { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 28px; }
  .service-jump > p { grid-column: 1/-1; }
  .service-jump a { margin-left: 12px; grid-template-columns: 22px 1fr 16px; gap: 8px; padding-right: 0; }
  .service-jump a > b { font-size: 22px; }
  .overview-band { grid-template-columns: minmax(0,1fr) 220px; padding-block: 28px; gap: 20px 28px; }
  .overview-band__identity { grid-column: 1; }
  .overview-band__scope { grid-column: 1; }
  .service-scene { grid-column: 2; grid-row: 1/3; }
  .overview-band__scope ul { font-size: 16px; }
  .service-working__heading { display: block; }
  .service-working__heading > p { margin-top: 20px; max-width: 36em; }
  .service-working__steps { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 28px; }
}
@media (max-width:520px) {
  .services-overview .service-intro h1 { font-size: clamp(38px,10.2vw,50px); margin-block: 14px 18px; white-space: nowrap; }
  .services-overview .service-intro__lead { font-size: 16px; }
  .service-jump { column-gap: 18px; }
  .service-jump a { grid-template-columns: 1fr 16px; gap: 4px; min-height: 56px; }
  .service-jump a > span { display: none; }
  .service-jump a > b { font-size: 21px; }
  .service-directory__heading { display: block; padding-bottom: 20px; }
  .service-directory__heading > p { margin-top: 10px; font-size: 14px; }
  .overview-band { grid-template-columns: minmax(0,1fr) 100px; gap: 18px 12px; padding: 26px 0 24px 18px; }
  .overview-band::before { top: 28px; height: 28px; }
  .overview-band__identity { grid-column: 1/-1; grid-row: 1; }
  .overview-band__scope { grid-column: 1/-1; grid-row: 2; }
  .service-scene { position: absolute; top: 0; right: 0; width: 88px; opacity: .75; }
  .services-overview .overview-band h3 { font-size: 31px; white-space: nowrap; }
  .services-overview .overview-band__summary { font-size: 16px; }
  .services-overview .overview-band .service-eyebrow { font-size: 9px; }
  .overview-band__scope ul { font-size: 16px; }
  .service-detail-link { margin-top: 10px; }
  .service-working { padding-block: 44px 28px; }
  .service-working__steps { gap: 24px 20px; }
  .services-overview .service-working__steps h3 { font-size: 24px; }
  .service-working__steps p { font-size: 16px; }
}
@media (prefers-reduced-motion:reduce) {
  .services-overview *, .services-overview *::before, .services-overview *::after { animation: none !important; transition: none !important; }
  .services-overview .scene-front { transform: none !important; }
}