/* ============================ SERVICE DETAIL SHEETS (AI LAB) ============================
   The same measured Stripe mechanics as World 1, in this world's material: an
   elevated midnight-glass sheet with the electric-blue signal, over the page it
   temporarily replaces. One system, two worlds, two skins.
   ======================================================================================== */

.svc-card{position:relative}
/* ---- the expand control: a dark glass tile with four corner brackets. It
   wakes once when it first enters view (JS adds .is-woken, staggered), then
   stays quiet. The warm spark is the cross-world signature; the ring is this
   world's electric blue. Open is brackets; close is the X. ---- */
.svcd-open{position:absolute;top:20px;right:20px;z-index:2;display:flex;align-items:center;justify-content:center;
  width:46px;height:46px;padding:0;cursor:pointer;
  border:1px solid rgba(120,170,255,.30);border-radius:14px;
  background:linear-gradient(180deg,rgba(30,48,86,.55),rgba(16,28,54,.65));
  color:#DCE8FA;box-shadow:inset 0 1px 0 rgba(190,215,255,.14);
  transition:background .22s ease,border-color .22s ease,box-shadow .22s ease,transform .15s ease}
.svcd-open .so-glyph{width:19px;height:19px}
.svcd-open .so-c{transition:transform .22s cubic-bezier(.2,.7,.2,1)}
.svcd-open:hover,.svcd-open:focus-visible{background:linear-gradient(180deg,rgba(48,78,138,.6),rgba(24,42,82,.7));
  border-color:rgba(95,168,255,.6);color:#fff;box-shadow:inset 0 1px 0 rgba(190,215,255,.2),0 6px 16px rgba(0,6,20,.4)}
.svcd-open:hover .so-c1,.svcd-open:focus-visible .so-c1{transform:translate(-1px,-1px)}
.svcd-open:hover .so-c2,.svcd-open:focus-visible .so-c2{transform:translate(1px,-1px)}
.svcd-open:hover .so-c3,.svcd-open:focus-visible .so-c3{transform:translate(1px,1px)}
.svcd-open:hover .so-c4,.svcd-open:focus-visible .so-c4{transform:translate(-1px,1px)}
.svcd-open:active{transform:scale(.97)}
.svcd-open:focus-visible{outline:2px solid #5FA8FF;outline-offset:3px}
.so-spark{position:absolute;left:50%;top:50%;width:5px;height:5px;margin:-2.5px 0 0 -2.5px;border-radius:50%;
  background:#FF7A3D;box-shadow:0 0 8px rgba(255,122,61,.75);opacity:0;pointer-events:none}
.svcd-open.is-woken{animation:soWake 1s cubic-bezier(.22,.75,.22,1) both}
.svcd-open.is-woken::after{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;
  animation:soRing 1s cubic-bezier(.22,.75,.22,1) both}
.svcd-open.is-woken .so-spark{animation:soSpark 1s ease both}
.svcd-open.is-woken .so-c1{animation:soC1 1s cubic-bezier(.22,.75,.22,1) both}
.svcd-open.is-woken .so-c2{animation:soC2 1s cubic-bezier(.22,.75,.22,1) both}
.svcd-open.is-woken .so-c3{animation:soC3 1s cubic-bezier(.22,.75,.22,1) both}
.svcd-open.is-woken .so-c4{animation:soC4 1s cubic-bezier(.22,.75,.22,1) both}
@keyframes soWake{0%{opacity:.65;transform:scale(.94)}45%,100%{opacity:1;transform:scale(1)}}
@keyframes soRing{0%,18%{box-shadow:0 0 0 0 rgba(95,168,255,0)}45%{box-shadow:0 0 0 5px rgba(95,168,255,.35)}100%{box-shadow:0 0 0 8px rgba(95,168,255,0)}}
@keyframes soSpark{0%,12%{opacity:0}30%{opacity:1}68%,100%{opacity:0}}
@keyframes soC1{0%,25%{transform:none}55%{transform:translate(-1.5px,-1.5px)}100%{transform:none}}
@keyframes soC2{0%,25%{transform:none}55%{transform:translate(1.5px,-1.5px)}100%{transform:none}}
@keyframes soC3{0%,25%{transform:none}55%{transform:translate(1.5px,1.5px)}100%{transform:none}}
@keyframes soC4{0%,25%{transform:none}55%{transform:translate(-1.5px,1.5px)}100%{transform:none}}

[data-svcd-card]{cursor:pointer}

.svcd-scrim{position:absolute;inset:0;z-index:0;background:rgba(3,7,16,.55);
  -webkit-backdrop-filter:blur(8px) saturate(1.05);backdrop-filter:blur(8px) saturate(1.05);
  opacity:0;transition:opacity .42s cubic-bezier(.2,.7,.2,1)}
.svcd-root.is-open .svcd-scrim{opacity:1}
.svcd-root{position:fixed;inset:0;z-index:9600;display:none}
.svcd-root.is-open,.svcd-root.is-closing{display:block}
.svcd-wrap{position:absolute;inset:0;z-index:1;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  padding:clamp(20px,6vh,64px) clamp(12px,8.5vw,124px) clamp(20px,6vh,64px)}
.svcd-sheet{position:relative;max-width:1100px;margin:0 auto;border-radius:var(--r-card,22px);
  background:linear-gradient(180deg,#101B33 0%,#0C1526 55%,#0A1220 100%);
  box-shadow:0 0 0 1px rgba(120,170,255,.16),inset 0 1px 0 rgba(190,215,255,.14),0 50px 130px rgba(0,4,14,.7);
  padding:clamp(28px,4.5vw,64px) clamp(22px,5vw,76px) clamp(36px,5vw,76px);color:#DCE8FA}
.svcd-root.is-open .svcd-sheet{animation:svcdIn .56s cubic-bezier(.22,.75,.22,1) both}
.svcd-root.is-closing .svcd-sheet{animation:svcdOut .34s cubic-bezier(.5,0,.75,.4) both}
@keyframes svcdIn{from{opacity:0;transform:translateY(26px) scale(.965)}to{opacity:1;transform:none}}
@keyframes svcdOut{from{opacity:1;transform:none}to{opacity:0;transform:translateY(18px) scale(.975)}}

.svcd-close{position:sticky;top:0;float:right;z-index:5;width:44px;height:44px;margin:-6px -14px 0 0;
  display:flex;align-items:center;justify-content:center;border:1px solid rgba(120,170,255,.30);border-radius:14px;
  background:rgba(13,23,44,.82);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  color:#DCE8FA;cursor:pointer;box-shadow:inset 0 1px 0 rgba(190,215,255,.16);transition:background .2s ease,transform .15s ease}
.svcd-close svg{width:16px;height:16px}
.svcd-close:hover{background:rgba(30,50,90,.92)}
.svcd-close:active{transform:scale(.95)}

.svcd-hero{max-width:640px}
.svcd-eyebrow{display:flex;align-items:center;gap:10px;font-size:12px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(160,190,235,.75)}
.svcd-h{margin:18px 0 0;font-size:clamp(28px,4.2vw,46px);line-height:1.1;letter-spacing:-.025em;font-weight:600;color:#F2F7FF}
.svcd-h em{font-style:normal;color:#5FA8FF}
.svcd-lead{margin:16px 0 0;font-size:16.5px;line-height:1.62;color:rgba(205,222,248,.82);max-width:560px}
.svcd-cta{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:26px}
.svcd-btn{display:inline-flex;align-items:center;gap:9px;height:48px;padding:0 24px;border-radius:999px;border:0;
  background:linear-gradient(135deg,#3B86FF,#246BFF);color:#fff;font-weight:550;font-size:15px;text-decoration:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 10px 24px rgba(36,107,255,.35);transition:transform .2s ease,box-shadow .2s ease}
.svcd-btn:hover{transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 14px 30px rgba(36,107,255,.45)}
.svcd-more{display:inline-flex;align-items:center;gap:8px;color:#9CC1F5;font-weight:500;font-size:15px;text-decoration:none;
  border-bottom:1px solid rgba(120,170,255,.35);padding-bottom:2px;transition:color .2s ease,border-color .2s ease}
.svcd-more:hover{color:#fff;border-color:rgba(190,215,255,.7)}
.svcd-ghost{display:inline-flex;align-items:center;gap:8px;height:48px;padding:0 22px;border-radius:999px;cursor:pointer;
  border:1px solid rgba(120,170,255,.36);background:rgba(255,255,255,.05);color:#DCE8FA;font:inherit;font-size:15px;font-weight:500;
  transition:background .2s ease,border-color .2s ease}
.svcd-ghost:hover{background:rgba(59,134,255,.14);border-color:rgba(95,168,255,.6)}
.svcd-art{margin:clamp(26px,4vw,48px) 0 0;border-radius:16px;overflow:hidden;
  box-shadow:0 0 0 1px rgba(120,170,255,.14)}
.svcd-art img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.svcd-block{margin-top:clamp(32px,4.5vw,52px)}
.svcd-label{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:rgba(160,190,235,.75);
  padding-bottom:13px;border-bottom:1px solid rgba(120,170,255,.16)}
.svcd-list ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:0 40px}
.svcd-list li{position:relative;padding:14px 0 14px 26px;font-size:15px;color:rgba(215,230,250,.9);
  border-bottom:1px solid rgba(120,170,255,.10)}
.svcd-list li::before{content:"";position:absolute;left:2px;top:21px;width:7px;height:7px;border-radius:50%;
  background:#5FA8FF;box-shadow:0 0 10px rgba(95,168,255,.8)}
.svcd-end{margin-top:clamp(38px,5vw,58px);padding-top:clamp(26px,3.5vw,40px);border-top:1px solid rgba(120,170,255,.16)}
.svcd-end h3{margin:0;font-size:clamp(21px,2.5vw,28px);font-weight:600;letter-spacing:-.02em;color:#F2F7FF}
.svcd-end p{margin:10px 0 0;font-size:15px;line-height:1.6;color:rgba(205,222,248,.78);max-width:560px}

@media (max-width:700px){
  .svcd-wrap{padding:0}
  .svcd-sheet{min-height:100dvh;border-radius:0;max-width:none;
    padding:calc(18px + env(safe-area-inset-top)) 20px calc(30px + env(safe-area-inset-bottom))}
  .svcd-close{margin:0 -4px 0 0;top:calc(6px + env(safe-area-inset-top))}
  .svcd-list ul{grid-template-columns:1fr}
  .svcd-cta .svcd-btn{width:100%;justify-content:center}
  .svcd-h{font-size:clamp(26px,7.6vw,34px)}
  .svcd-open{top:14px;right:14px}
}
@media (prefers-reduced-motion:reduce){
  .svcd-scrim{transition:none}
  .svcd-open.is-woken,.svcd-open.is-woken::after,.svcd-open.is-woken .so-spark,.svcd-open.is-woken .so-c{animation:none}
  .svcd-root.is-open .svcd-sheet,.svcd-root.is-closing .svcd-sheet{animation:none}
  .svcd-open svg{transition:none}
}

/* ---- the standalone service pages: the sheet's own markup on a page frame, as in world 1 --------- */
.svcd-page{padding:clamp(96px,12vh,140px) 0 clamp(48px,6vw,88px)}
.svcd-page-inner{max-width:1184px;margin:0 auto;padding:0 clamp(20px,5vw,84px)}
.svcd-page .svcd-hero{margin-top:0}
.svcd-page .svcd-h{font-size:clamp(34px,3.4vw,48px)}
.svcd-page .svcd-sheet-body{display:block}
@media (max-width:767px){.svcd-page{padding-top:88px}}