/* Every selector is restricted to this section. Existing header/background stay intact. */
#services.services-section { overflow:clip; }
#services.services-section .services-layout { width:min(1280px,calc(100% - 64px)); margin:72px auto 0; }
#services.services-section .services-rows { display:grid; gap:120px; }
#services.services-section .services-row { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:24px; align-items:center; min-height:500px; }
#services.services-section .services-copy { grid-column:span 5; min-width:0; }
#services.services-section .services-visual { grid-column:span 7; position:relative; min-width:0; width:100%; margin:0; aspect-ratio:7/5; isolation:isolate; }
#services.services-section .services-row--reverse .services-copy { grid-column:8/13; grid-row:1; }
#services.services-section .services-row--reverse .services-visual { grid-column:1/8; grid-row:1; }
#services.services-section .services-copy-top { display:flex; align-items:center; gap:16px; margin-bottom:24px; }
#services.services-section .services-icon { display:block; width:44px; height:44px; padding:10px; fill:none; stroke:#22d3ee; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; border:1px solid #216cae55; border-radius:12px; background:#0a427155; }
#services.services-section .services-number { color:#8fa3c0; font-size:14px; font-variant-numeric:tabular-nums; letter-spacing:.08em; }
#services.services-section .services-title { margin:0; color:#fff; font-size:clamp(28px,2.35vw,32px); font-weight:600; line-height:1.18; letter-spacing:-.025em; }
#services.services-section .services-description { max-width:44ch; margin:24px 0 0; color:#c9d3e3; font-size:18px; line-height:1.65; }
#services.services-section .services-tags { display:flex; flex-wrap:wrap; gap:6px; margin:24px 0 0; padding:0; list-style:none; }
#services.services-section .services-tags li { padding:4px 8px; border:1px solid #345e8166; border-radius:999px; background:transparent; color:#bdd9ef; font-size:12px; line-height:1.6; }
#services.services-section .services-glow { position:absolute; inset:15% 5%; z-index:-1; border-radius:50%; background:radial-gradient(ellipse,#3b82f626,#2f6be819 45%,transparent 72%); filter:blur(30px); pointer-events:none; }

/* Frames reserve their dimensions even when no evidence assets exist yet. */
#services.services-section .services-browser { position:absolute; left:0; top:7%; width:89%; border:1px solid #ffffff1a; border-radius:18px; background:#09172b; box-shadow:0 20px 50px #0005; overflow:hidden; }
#services.services-section .services-browser-bar { display:flex; align-items:center; gap:6px; height:34px; padding:0 12px; border-bottom:1px solid #ffffff1a; }
#services.services-section .services-browser-bar i { width:5px; height:5px; border-radius:50%; background:#59708c; }
#services.services-section .services-address { width:54%; height:10px; margin-left:12px; border:1px solid #ffffff12; border-radius:4px; background:#ffffff05; }
#services.services-section .services-shot { position:relative; display:block; width:100%; margin:0; padding:0; border:0; background:#0b182a; color:#8193aa; overflow:hidden; cursor:zoom-in; font:inherit; }
#services.services-section .services-shot:disabled { cursor:default; opacity:1; }
#services.services-section .services-screen--desktop { aspect-ratio:8/5; }
#services.services-section .services-placeholder { position:absolute; inset:0; display:grid; place-content:center; gap:8px; padding:12px; text-align:center; background:linear-gradient(145deg,#102138,#091728); color:#8fa3c0; font-size:clamp(11px,1.15vw,14px); line-height:1.5; }
#services.services-section .services-placeholder span { display:block; color:#62758f; font-size:.85em; letter-spacing:.12em; }
#services.services-section .services-image { display:block; width:100%; height:100%; position:absolute; inset:0; object-fit:contain; opacity:0; }
#services.services-section .services-shot.services-loaded .services-image { opacity:1; }
#services.services-section .services-shot.services-loaded .services-placeholder { visibility:hidden; }
#services.services-section .services-phone-float { position:absolute; right:0; bottom:0; width:27%; }
#services.services-section .services-phone { position:relative; padding:5px; border:1px solid #ffffff24; border-radius:23px; background:#070f1e; box-shadow:0 18px 38px #0006; overflow:hidden; }
#services.services-section .services-phone::after { content:""; position:absolute; top:9px; left:38%; width:24%; height:5px; border-radius:8px; background:#050a14; pointer-events:none; }
#services.services-section .services-screen--phone { aspect-ratio:9/16; border-radius:17px; }
#services.services-section .services-annotations { position:absolute; inset:0; z-index:3; pointer-events:none; }
#services.services-section .services-lines { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
#services.services-section .services-lines line { stroke:#3b82f6; stroke-width:1; vector-effect:non-scaling-stroke; }
#services.services-section .services-lines circle { fill:#22d3ee; }
#services.services-section .services-callout { position:absolute; left:var(--services-x); top:var(--services-y); transform:translate(-50%,-50%); max-width:45%; }
#services.services-section .services-chip { display:flex; align-items:center; gap:6px; width:max-content; max-width:100%; padding:7px 10px; border-radius:999px; background:#fff; color:#0a1a33; box-shadow:0 6px 18px #0002; font-size:clamp(10px,1vw,13px); font-weight:600; line-height:1.35; }
#services.services-section .services-chip-dot { width:6px; height:6px; flex:0 0 6px; border-radius:50%; background:#3b82f6; }

/* Four supplied creatives; the inner phones are 10% larger and raised. */
#services.services-section .services-video-gallery { display:flex; align-items:center; justify-content:center; gap:3%; position:absolute; inset:7% 0; }
#services.services-section .services-video-phone { flex:0 0 21%; min-width:0; transform:translateY(16px); }
#services.services-section .services-video-phone--center { flex-basis:23.1%; transform:translateY(-12px); z-index:2; }
#services.services-section .services-video-stage { position:relative; aspect-ratio:9/16; border-radius:17px; background:#0b182a; overflow:hidden; }
#services.services-section .services-video { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:contain; background:#0b182a; }
#services.services-section .services-video-stage.services-loaded .services-placeholder { visibility:hidden; }
#services.services-section .services-video-language { position:absolute; z-index:2; top:13%; left:6%; max-width:88%; }
#services.services-section .services-video-language .services-chip { padding:5px 7px; font-size:12px; }
#services.services-section .services-video-language svg { width:17px; height:12px; flex:0 0 17px; border-radius:2px; }
#services.services-section .services-video-result { position:absolute; bottom:18%; left:6%; max-width:88%; z-index:2; }
#services.services-section .services-video-play { position:absolute; right:8%; bottom:6%; z-index:3; display:grid; place-content:center; width:44px; height:44px; padding:10px; border:1px solid #ffffff44; border-radius:50%; background:#0a1a33e8; color:#fff; cursor:pointer; }
#services.services-section .services-video-play svg { width:20px; height:20px; fill:currentColor; }
#services.services-section .services-pause-icon { display:none; }
#services.services-section .services-video-play[data-services-playing="true"] .services-play-icon { display:none; }
#services.services-section .services-video-play[data-services-playing="true"] .services-pause-icon { display:block; }

/* Fanned screenshot deck. Rotation and idle movement use separate elements. */
#services.services-section .services-campaign-card { position:absolute; border:1px solid #ffffff1a; border-radius:18px; padding:7px; background:#0b1d34; box-shadow:0 20px 45px #0005; }
#services.services-section .services-campaign-back { width:84%; left:0; top:2%; transform:rotate(-4deg); }
#services.services-section .services-campaign-front { position:absolute; width:93%; left:6%; top:22%; z-index:2; }
#services.services-section .services-campaign-front .services-campaign-card { position:relative; width:100%; transform:rotate(4deg); }
/* Supplied dashboards keep their full native proportions, with no cropped metrics. */
#services.services-section .services-campaign-card .services-shot { aspect-ratio:var(--services-screenshot-ratio,8/5); border-radius:11px; }
#services.services-section .services-metrics { position:absolute; inset:0 0 -26%; z-index:3; pointer-events:none; }
#services.services-section .services-caption { position:absolute; left:0; right:0; bottom:-20px; margin:0; color:#8fa3c0; font-size:13px; line-height:1.5; text-align:center; visibility:hidden; }
#services.services-section .services-caption.services-proof-ready { visibility:visible; }

/* Native dialog supplies modal focus trapping and Escape handling. */
#services.services-section .services-lightbox { position:fixed; inset:0; width:100vw; max-width:none; height:100dvh; max-height:none; margin:0; padding:24px; border:0; background:#030814f2; color:#fff; overflow:auto; overscroll-behavior:contain; }
#services.services-section .services-lightbox::backdrop { background:#030814d9; }
#services.services-section .services-lightbox:not([open]) { display:none; }
#services.services-section .services-lightbox[open] { display:grid; grid-template-rows:auto minmax(0,1fr); gap:20px; }
#services.services-section .services-lightbox-top { display:flex; align-items:center; justify-content:space-between; gap:24px; }
#services.services-section .services-lightbox-title { margin:0; max-width:70ch; color:#c9d3e3; font-size:16px; line-height:1.5; }
#services.services-section .services-lightbox-close { flex:none; width:44px; height:44px; border:1px solid #ffffff33; border-radius:50%; background:#0a1a33; color:#fff; font-size:26px; cursor:pointer; }
#services.services-section .services-lightbox-stage { display:grid; place-items:center; min-height:0; }
#services.services-section .services-lightbox-image { display:block; width:auto; height:auto; max-width:100%; max-height:calc(100dvh - 140px); object-fit:contain; border-radius:12px; }
#services.services-section .services-shot:focus-visible, #services.services-section .services-video-play:focus-visible, #services.services-section .services-lightbox-close:focus-visible { outline:3px solid #22d3ee; outline-offset:4px; }
#services.services-section [hidden] { display:none!important; }

/* Animate once on entry; idle loops pause off-screen and in hidden tabs. */
@media (prefers-reduced-motion:no-preference) {
  #services.services-section[data-services-motion="true"] .services-copy { transition:opacity 500ms ease-out,transform 500ms ease-out; }
  #services.services-section[data-services-motion="true"] .services-visual { transition:opacity 600ms ease-out,transform 600ms ease-out; }
  #services.services-section[data-services-motion="true"] .services-row:not(.services-entered) .services-copy { opacity:0; transform:translateY(12px); }
  #services.services-section[data-services-motion="true"] .services-row:not(.services-entered) .services-visual { opacity:0; transform:translateX(24px); }
  #services.services-section[data-services-motion="true"] .services-row--reverse:not(.services-entered) .services-visual { transform:translateX(-24px); }
  #services.services-section .services-entered .services-chip { animation:services-chip-in 400ms ease-out both; animation-delay:calc(var(--services-stagger,0)*120ms); }
  #services.services-section .services-entered .services-float { animation:services-float 6s ease-in-out infinite; animation-play-state:paused; }
  #services.services-section[data-services-active="true"] .services-row[data-services-in-view="true"] .services-float { animation-play-state:running; }
}
@keyframes services-chip-in { from {opacity:0;transform:scale(.9)} to {opacity:1;transform:scale(1)} }
@keyframes services-float { 0%,100% {transform:translateY(-4px)} 50% {transform:translateY(4px)} }
@media (max-width:1023px) and (min-width:768px) {
  #services.services-section .services-row { min-height:400px; gap:20px; }
  #services.services-section .services-rows { gap:100px; }
  #services.services-section .services-description { font-size:17px; }
}
@media (max-width:767px) {
  #services.services-section .services-layout { width:calc(100% - 40px); margin-top:48px; }
  #services.services-section .services-rows { gap:80px; }
  #services.services-section .services-row { grid-template-columns:minmax(0,1fr); gap:36px; min-height:0; }
  #services.services-section .services-copy, #services.services-section .services-visual, #services.services-section .services-row--reverse .services-copy, #services.services-section .services-row--reverse .services-visual { grid-column:1; grid-row:auto; }
  #services.services-section .services-visual { aspect-ratio:7/5; }
  #services.services-section .services-video-visual { aspect-ratio:auto; }
  #services.services-section .services-video-gallery { position:relative; inset:auto; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px 14px; width:min(100%,440px); margin:auto; }
  #services.services-section .services-video-phone, #services.services-section .services-video-phone--center { transform:none; }
  #services.services-section .services-phone { padding:3px; border-radius:16px; }
  #services.services-section .services-screen--phone, #services.services-section .services-video-stage { border-radius:12px; }
  #services.services-section .services-browser-bar { height:24px; }
  #services.services-section .services-caption { bottom:-30px; font-size:12px; }
  #services.services-section .services-lightbox { padding:16px; }
}
@media (prefers-reduced-motion:reduce) {
  #services.services-section .services-copy, #services.services-section .services-visual, #services.services-section .services-chip, #services.services-section .services-float { animation:none!important; transition:none!important; opacity:1!important; transform:none!important; }
}