/* Preview-only visual directions for /services1, /services2 and /services3.
   Content remains in the individual HTML files so each direction can be
   promoted independently once a route is chosen. */
body.services-variant { overflow-x: clip; }
body.services-variant::before,
body.services-variant::after { content:""; position:fixed; pointer-events:none; z-index:0; }
body.services-variant .wrap, body.services-variant footer { isolation:isolate; }
body.services-variant .svc-title { text-wrap:balance; }
body.services-variant .site-topnav { position:relative; z-index:2; }

/* 01 — ORBIT ATLAS: circular orbital field and crystalline stations */
body.services-variant-1 { background:#05050c; }
body.services-variant-1::before { inset:-35vmax; opacity:.62; background:repeating-radial-gradient(circle at 50% 50%, transparent 0 8.4vmax, rgba(143,111,255,.2) 8.45vmax 8.55vmax, transparent 8.6vmax 16.8vmax); animation:orbit-drift 32s linear infinite; }
body.services-variant-1::after { width:48vmax; aspect-ratio:1; right:-20vmax; top:5vh; border-radius:50%; background:radial-gradient(circle, rgba(0,255,178,.18), transparent 66%); filter:blur(22px); }
@keyframes orbit-drift { to { transform:rotate(360deg); } }
.services-variant-1 .wrap { max-width:1640px; padding-top:48px; }
.services-variant-1 .breadcrumbs { display:inline-flex; padding:7px 12px; border:1px solid rgba(0,255,178,.28); background:rgba(6,6,10,.68); backdrop-filter:blur(10px); }
.services-variant-1 .svc-hero { max-width:1180px; min-height:310px; margin:22px auto 12px; border:1px solid rgba(185,167,255,.28); border-radius:50% 50% 12px 12px / 40% 40% 8px 8px; background:radial-gradient(ellipse at 50% 108%, rgba(124,77,255,.4), transparent 52%), rgba(15,15,26,.48); overflow:hidden; }
.services-variant-1 .svc-hero::before, .services-variant-1 .svc-hero::after { content:""; position:absolute; border:1px solid rgba(0,255,178,.32); border-radius:50%; width:80%; aspect-ratio:1; left:10%; top:25%; pointer-events:none; }
.services-variant-1 .svc-hero::after { width:54%; left:23%; top:42%; border-color:rgba(185,167,255,.5); }
.services-variant-1 .svc-hero-text { position:relative; z-index:1; }
.services-variant-1 .svc-title { font-size:clamp(46px, 9vw, 108px); letter-spacing:-.065em; text-transform:uppercase; }
.services-variant-1 .svc-intro { max-width:840px; padding:22px 28px; border-left:1px solid var(--mint); border-right:1px solid var(--mint); background:rgba(7,7,16,.58); backdrop-filter:blur(9px); }
.services-variant-1 .section-head { max-width:900px; margin-top:94px; }
.services-variant-1 .section-head h2 { font-size:clamp(30px, 4vw, 50px); }
.services-variant-1 .segment-panel { border-radius:50px 50px 10px 10px; overflow:hidden; background:rgba(13,13,30,.7); box-shadow:0 28px 80px rgba(0,0,0,.28); }
.services-variant-1 .segment { padding:44px 34px 38px; border-top:1px solid rgba(185,167,255,.24); }
.services-variant-1 .segment:nth-child(2) { background:rgba(124,77,255,.09); }
.services-variant-1 .segment:hover { background:rgba(0,255,178,.08); transform:translateY(-6px); }
.services-variant-1 .segment-cta-row { margin-top:-21px; }
.services-variant-1 .cta-btn { border-radius:999px; padding:15px 36px; box-shadow:0 0 0 7px rgba(0,255,178,.08), 0 12px 32px rgba(0,255,178,.15); background:var(--mint); color:#06110e; border-color:var(--mint); }
.services-variant-1 .svc-grid { grid-template-columns:repeat(3, 1fr); gap:18px; }
.services-variant-1 a.svc-item { min-height:286px; padding:26px; border:1px solid rgba(185,167,255,.24); border-radius:18px 18px 4px 4px; background:linear-gradient(145deg, rgba(32,25,76,.7), rgba(9,9,19,.78)); box-shadow:inset 0 1px rgba(255,255,255,.08); }
.services-variant-1 a.svc-item:nth-child(3n+2) { transform:translateY(28px); }
.services-variant-1 a.svc-item:hover { border-color:var(--mint); box-shadow:0 20px 48px rgba(0,0,0,.35), inset 0 1px rgba(255,255,255,.12); }
.services-variant-1 .svc-item-num { color:var(--mint); }
.services-variant-1 .svc-item-tag { border-radius:999px; }
.services-variant-1 .chips { margin-top:22px !important; }
.services-variant-1 .process-grid { gap:0; border:1px solid rgba(185,167,255,.28); border-radius:8px; background:rgba(15,15,26,.72); }
.services-variant-1 .process-step { padding:28px; border-top:0; border-left:1px solid rgba(185,167,255,.22); }
.services-variant-1 .process-step:first-child { border-left:0; }
.services-variant-1 .svc-cta { border-radius:50px 6px 50px 6px; }

/* 02 — SIGNAL ARRAY: technical grid, scanlines and an asymmetric command deck */
body.services-variant-2 { background:#06080c; }
body.services-variant-2::before { inset:0; opacity:.34; background:linear-gradient(rgba(97,255,226,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(97,255,226,.12) 1px, transparent 1px); background-size:42px 42px; mask-image:linear-gradient(to bottom, #000, transparent 76%); }
body.services-variant-2::after { inset:0; opacity:.12; background:repeating-linear-gradient(0deg, transparent 0 3px, #fff 4px 5px); mix-blend-mode:overlay; }
.services-variant-2 .wrap { max-width:1780px; padding-top:28px; }
.services-variant-2 .site-topnav { display:grid; grid-template-columns:minmax(190px, .75fr) 1fr; align-items:start; border-bottom:1px solid rgba(0,255,178,.34); padding-bottom:20px; }
.services-variant-2 .site-logo { letter-spacing:.07em; font-size:clamp(28px, 3vw, 47px); }
.services-variant-2 .site-menu { justify-content:flex-end; }
.services-variant-2 .site-menu a { border:0; border-left:1px solid rgba(0,255,178,.25); border-radius:0; padding:7px 10px; font-size:10px; }
.services-variant-2 .breadcrumbs { margin-top:24px; color:var(--mint); }
.services-variant-2 .svc-hero { max-width:none; margin:20px 0 0; min-height:360px; justify-content:flex-start; padding:55px clamp(22px, 8vw, 150px); border-left:1px solid var(--mint); background:linear-gradient(90deg, rgba(8,35,39,.78), rgba(8,10,18,.25) 72%), radial-gradient(circle at 76% 50%, rgba(124,77,255,.45), transparent 18%); }
.services-variant-2 .svc-hero::after { content:"SERVICES // 09"; position:absolute; right:4vw; bottom:28px; font-family:var(--mono); letter-spacing:.25em; font-size:11px; color:rgba(0,255,178,.8); writing-mode:vertical-rl; }
.services-variant-2 .svc-hero .svc-hero-text { text-align:left; }
.services-variant-2 .svc-title { font-size:clamp(54px, 10vw, 132px); letter-spacing:-.085em; line-height:.86; }
.services-variant-2 .svc-intro { max-width:840px; margin:0 0 90px clamp(22px, 8vw, 150px); padding:27px 0 0 28px; border-left:4px solid var(--accent); text-align:left; }
.services-variant-2 .section-head { max-width:100%; margin:0 0 30px; text-align:left; display:grid; grid-template-columns:1.15fr .85fr; align-items:end; gap:30px; border-bottom:1px solid rgba(0,255,178,.3); padding-bottom:18px; }
.services-variant-2 .section-head h2 { font-size:clamp(28px, 3.5vw, 52px); }
.services-variant-2 .segment-panel { grid-template-columns:1.1fr 1fr 1fr; border-radius:0; border-color:rgba(0,255,178,.25); background:rgba(3,18,23,.72); }
.services-variant-2 .segment { min-height:292px; padding:28px; border-top:0; }
.services-variant-2 .segment:nth-child(1) { background:linear-gradient(135deg, rgba(0,255,178,.12), transparent); }
.services-variant-2 .segment:hover { border-top-color:var(--mint); background:rgba(124,77,255,.14); }
.services-variant-2 .segment-cta-row { text-align:right; margin-top:-57px; margin-right:30px; position:relative; z-index:1; }
.services-variant-2 .cta-btn { border-radius:0; clip-path:polygon(0 0, 94% 0, 100% 28%, 100% 100%, 6% 100%, 0 72%); }
.services-variant-2 .svc-grid { grid-template-columns:repeat(12, 1fr); gap:13px; }
.services-variant-2 a.svc-item { grid-column:span 4; min-height:258px; padding:22px; border:1px solid rgba(121,241,225,.23); background:rgba(7,18,26,.79); position:relative; overflow:hidden; }
.services-variant-2 a.svc-item::before { content:""; position:absolute; width:100%; height:2px; background:var(--mint); left:0; top:0; transform:scaleX(0); transform-origin:left; transition:transform .25s; }
.services-variant-2 a.svc-item:hover::before { transform:scaleX(1); }
.services-variant-2 a.svc-item:nth-child(4n+1) { grid-column:span 5; }
.services-variant-2 a.svc-item:nth-child(4n+2) { grid-column:span 3; }
.services-variant-2 a.svc-item:nth-child(4n+3) { grid-column:span 4; }
.services-variant-2 .chip { border-radius:0 !important; background:rgba(0,255,178,.04); }
.services-variant-2 .process-grid { grid-template-columns:repeat(3, 1fr); gap:0; border-top:1px solid var(--mint); }
.services-variant-2 .process-step { padding:20px 30px 18px; border-top:0; border-right:1px solid rgba(0,255,178,.22); }
.services-variant-2 .process-step:last-child { border-right:0; }
.services-variant-2 .svc-cta { border-radius:0; border-left:5px solid var(--mint); background:linear-gradient(90deg, rgba(0,255,178,.11), rgba(124,77,255,.12)); }

/* 03 — NEBULA GALLERY: editorial constellations, soft aurora and floating cards */
body.services-variant-3 { background:#0a0712; }
body.services-variant-3::before { inset:-25%; background:radial-gradient(circle at 18% 30%, rgba(255,90,193,.18), transparent 17%), radial-gradient(circle at 72% 18%, rgba(91,151,255,.22), transparent 20%), radial-gradient(circle at 58% 70%, rgba(0,255,178,.13), transparent 21%); filter:blur(28px); animation:nebula-float 18s ease-in-out infinite alternate; }
body.services-variant-3::after { display:none; }
@keyframes nebula-float { to { transform:translate(3%, -2%) scale(1.1); } }
.nebula-lines { position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.nebula-lines span { position:absolute; width:110vw; height:1px; left:-5vw; transform:rotate(-9deg); background:linear-gradient(90deg, transparent, currentColor 50%, transparent); }
.nebula-lines span:nth-child(1) { top:calc(34% + 68.75px); color:rgba(255,255,255,.6); opacity:.24; }
.nebula-lines span:nth-child(2) { top:calc(34% + 151.25px); color:rgba(180,148,255,.6); opacity:.24; }
.nebula-lines span:nth-child(3) { top:calc(34% + 233.75px); color:rgba(0,255,178,.6); opacity:.24; }
.services-variant-3 .wrap { max-width:1800px; padding-top:40px; }
.services-variant-3 .site-topnav { display:flex; flex-direction:column; gap:18px; margin-bottom:32px; padding:0; }
.services-variant-3 .site-logo { font-size:clamp(38px, 5.2vw, 60px); align-self:flex-start; }
.services-variant-3 .site-menu { width:100%; max-width:none; justify-content:space-between; }
.services-variant-3 .site-menu a { color:#e8dfff; border-color:rgba(232,223,255,.25); border-radius:999px; padding:8px 22px; background:rgba(30,18,47,.35); backdrop-filter:blur(12px); }
.services-variant-3 .site-menu a:hover { background:rgba(255,255,255,.12); }
.services-variant-3 .breadcrumbs { text-align:left; margin:0 0 20px; }
.services-variant-3 .svc-hero { max-width:1080px; min-height:390px; margin:0 auto 8px; border-radius:42% 58% 45% 55% / 38% 42% 58% 62%; background:radial-gradient(circle at 28% 75%, rgba(255,90,193,.34), transparent 24%), radial-gradient(circle at 72% 33%, rgba(91,151,255,.4), transparent 27%), rgba(20,13,37,.58); box-shadow:inset 0 1px rgba(255,255,255,.24), 0 32px 70px rgba(0,0,0,.24); overflow:hidden; }
.services-variant-3 .svc-hero::before { content:""; position:absolute; inset:12% 7%; border:1px solid rgba(255,255,255,.22); border-radius:inherit; transform:rotate(-7deg); }
.services-variant-3 .svc-hero-text { position:relative; z-index:1; }
.services-variant-3 .svc-title { font-size:clamp(48px, 9vw, 116px); letter-spacing:-.075em; }
.services-variant-3 .svc-intro { max-width:760px; font-size:clamp(17px, 1.6vw, 21px); }
.services-variant-3 .section-head { margin-top:100px; }
.services-variant-3 .section-head h2 { font-size:clamp(29px, 4vw, 50px); }
.services-variant-3 .segment-panel { gap:14px; border:0; background:transparent; }
.services-variant-3 .segment { border:1px solid rgba(255,255,255,.18); border-radius:24px; padding:32px; background:linear-gradient(145deg, rgba(52,33,79,.7), rgba(13,15,32,.65)); backdrop-filter:blur(15px); box-shadow:0 22px 42px rgba(0,0,0,.18); }
.services-variant-3 .segment:nth-child(2) { background:linear-gradient(145deg, rgba(24,66,80,.68), rgba(16,15,40,.7)); }
.services-variant-3 .segment:hover { transform:none; border-top-color:#ff8fd4; }
.services-variant-3 .segment:nth-child(2):hover { transform:none; }
.services-variant-3 .segment-cta-row { margin-top:68px; }
.services-variant-3 .cta-btn { border-radius:999px; background:linear-gradient(110deg, #ff7fc5, #9f75ff 55%, #78e8da) padding-box, linear-gradient(110deg, #ff7fc5, #9f75ff 55%, #78e8da) border-box; border:1px solid transparent; color:#15091d; }
.services-variant-3 .cta-btn:hover { border:1px solid rgba(255,127,197,.70) !important; }
.services-variant-3 .svc-grid { grid-template-columns:repeat(3, minmax(0, 1fr)); grid-auto-rows:320px; gap:22px; align-items:stretch; }
.services-variant-3 a.svc-item { grid-column:auto; height:320px; min-height:0; padding:26px; border:1px solid rgba(255,255,255,.18); border-radius:24px; background:rgba(21,16,39,.6); backdrop-filter:blur(15px); box-shadow:0 18px 36px rgba(0,0,0,.18); }
.services-variant-3 a.svc-item:nth-child(3n+2) { grid-column:auto; background:linear-gradient(135deg, rgba(62,39,98,.7), rgba(13,39,54,.58)); }
.services-variant-3 a.svc-item:nth-child(3n+3) { margin-top:0; }
.services-variant-3 a.svc-item:hover { transform:none; border-color:#f3b3dc; box-shadow:0 18px 36px rgba(0,0,0,.18); }
.services-variant-3 .svc-item-num { color:#ff9bd2; }
.services-variant-3 .svc-item-tag { color:#f0d9ff; border-color:rgba(240,217,255,.35); border-radius:999px; }
.services-variant-3 .chip { border-radius:999px !important; border-color:rgba(255,255,255,.19) !important; }
.services-variant-3 .process-grid { gap:18px; }
.services-variant-3 .process-step { padding:28px; border:1px solid rgba(255,255,255,.17); border-radius:20px; background:rgba(28,20,48,.56); backdrop-filter:blur(12px); }
.services-variant-3 .process-step:nth-child(2) { transform:translateY(22px); }
.services-variant-3 .svc-cta { border-radius:30px; border-color:rgba(255,255,255,.22); background:linear-gradient(120deg, rgba(255,107,195,.18), rgba(116,111,255,.22), rgba(0,255,178,.13)); backdrop-filter:blur(14px); }

@media (max-width:900px) {
  .services-variant-1 .svc-grid, .services-variant-3 .svc-grid { grid-template-columns:repeat(2, minmax(0,1fr)); }
  .services-variant-1 a.svc-item:nth-child(3n+2), .services-variant-3 a.svc-item:nth-child(3n+3), .services-variant-3 .segment:nth-child(2), .services-variant-3 .process-step:nth-child(2) { transform:none; }
  .services-variant-2 .site-topnav, .services-variant-2 .section-head { grid-template-columns:1fr; }
  .services-variant-2 .site-menu { justify-content:flex-start; }
  .services-variant-2 a.svc-item, .services-variant-2 a.svc-item:nth-child(n) { grid-column:span 6; }
}
@media (min-width:901px) {
  .services-variant-3 .site-menu { display:grid; grid-template-columns:repeat(9,minmax(0,1fr)); gap:clamp(2px,.25vw,5px); }
  .services-variant-3 .site-menu a { min-width:0; padding:8px 5px; font-size:11px; letter-spacing:.04em; text-align:center; white-space:nowrap; }
}
@media (max-width:680px) {
  .services-variant-1 .wrap, .services-variant-2 .wrap, .services-variant-3 .wrap { padding-left:20px; padding-right:20px; }
  .services-variant-1 .svc-hero { min-height:260px; }
  .services-variant-1 .segment-panel, .services-variant-1 .process-grid { border-radius:18px; }
  .services-variant-1 .process-step { border-left:0; border-top:1px solid rgba(185,167,255,.22); }
  .services-variant-2 .site-topnav { display:flex; flex-direction:column; align-items:flex-start; }
  .services-variant-3 .site-topnav { display:flex; flex-direction:column; align-items:flex-start; gap:18px; }
  .services-variant-2 .svc-hero { min-height:300px; padding:42px 26px; }
  .services-variant-2 .svc-intro { margin-left:25px; }
  .services-variant-2 .section-head { display:block; }
  .services-variant-2 .segment-cta-row { margin:22px 0 65px; text-align:center; }
  .services-variant-2 a.svc-item, .services-variant-2 a.svc-item:nth-child(n) { grid-column:1 / -1; }
  .services-variant-2 .process-step { border-right:0; border-bottom:1px solid rgba(0,255,178,.22); }
  .services-variant-3 .svc-hero { min-height:300px; border-radius:32% 68% 38% 62% / 34% 38% 62% 66%; }
  .services-variant-3 .svc-grid { grid-template-columns:1fr; grid-auto-rows:auto; }
  .services-variant-3 a.svc-item, .services-variant-3 a.svc-item:nth-child(n) { grid-column:auto; height:auto; min-height:254px; }
}
@media (prefers-reduced-motion:reduce) {
  body.services-variant::before, .nebula-lines span { animation:none; }
  .services-variant-1 .segment:hover, .services-variant-1 a.svc-item:hover, .services-variant-3 .segment:hover, .services-variant-3 a.svc-item:hover { transform:none; }
}