/* Shared navigation: one consistent four-page route map. */
.topbar{height:96px}
.topbar .nav{width:min(1600px,calc(100% - 64px));height:96px;gap:18px;flex-wrap:nowrap}
.topbar .brand{flex:0 0 240px;min-width:0;margin:0;gap:0}
.topbar .brand img.brand-mark{display:block;width:240px;height:88px;max-width:none;object-fit:cover;object-position:50% 48%;filter:none}
.topbar .brand-lockup{display:none}
.topbar .navlinks{gap:20px;padding:13px 18px}
.topbar .navlinks a{font-size:11px;font-weight:700;gap:7px}
.topbar .navlinks a svg{width:15px;height:15px}
.topbar .navlinks a:before{display:none;content:none}
.topbar .service-menu{top:calc(100% + 10px);width:min(390px,calc(100vw - 28px));padding:13px}
.service-menu .menu-page-copy{display:flex;flex-direction:column;gap:5px;min-width:0}
.service-menu .menu-page-copy strong{font-size:14px;font-weight:700;color:#f7f4f3}
.service-menu .menu-page-copy small{font-size:10px;font-weight:400;line-height:1.5;color:#a7a7ad}
.service-menu .menu-email{margin-top:9px;padding:13px 10px 4px;border-top:1px solid #ffffff14}
.service-menu .menu-email a{font-size:10px;color:#ff8b96;overflow-wrap:anywhere}
.service-menu>a{padding:14px 10px}
.navlinks a:focus-visible,.service-menu a:focus-visible{outline:2px solid #ff697a;outline-offset:5px;border-radius:5px}

/* Keep the founder inside the frame, with a soft, lit presence. */
.hero>.founder-layer{inset:0 0 auto!important;height:min(930px,100%)!important;opacity:1;mask-image:linear-gradient(180deg,#000 0%,#000 76%,transparent 100%)}
.hero>.founder-layer:before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 78% 33%,#e8ccc51a 0%,#ab17221c 25%,transparent 59%)}
.hero>.founder-layer:after{background:linear-gradient(90deg,#08090aaa 0%,transparent 55%),linear-gradient(180deg,#07080944,transparent 28%,#070809a6 100%);mix-blend-mode:normal}
.hero>.founder-layer img:first-child{display:block!important;top:0!important;bottom:auto!important;left:auto!important;right:3%!important;width:min(48vw,650px)!important;height:100%!important;max-width:none!important;object-fit:cover;object-position:50% 19%;transform:none!important;animation:none!important;opacity:.63!important;filter:saturate(.62) contrast(1.06) brightness(1.2) blur(.7px)!important;mix-blend-mode:normal!important;mask-image:linear-gradient(90deg,transparent,#000 24%,#000 84%,transparent)}
.hero .hero-intro-row{position:relative;z-index:2}

/* The supplied logo motion is the interactive entry to video packages. */
.hero .scene{height:500px;isolation:auto}
.hero .scene-core{position:absolute;left:50%;top:48%;width:min(36vw,410px);height:auto;min-height:0;aspect-ratio:1;transform:translate(-50%,-50%);cursor:pointer;pointer-events:auto;isolation:auto;mix-blend-mode:screen;filter:none}
.hero .core-logo-animation{position:absolute;inset:0;width:100%;height:100%;min-height:0;object-fit:cover;object-position:50% 43%;mask-image:radial-gradient(circle,#000 55%,#000e 66%,transparent 73%);transition:transform .65s cubic-bezier(.2,.8,.2,1),filter .65s;transform:scale(1);filter:drop-shadow(0 0 20px #f3293e55)}
.hero .scene-core:hover .core-logo-animation,.hero .scene-core:focus-visible .core-logo-animation{transform:scale(1.14);filter:brightness(1.2) saturate(1.15) drop-shadow(0 0 36px #ff254aab)}
.hero .scene-core .core-backlight{transition:opacity .5s,scale .5s;opacity:.6}
.hero .scene-core:hover .core-backlight,.hero .scene-core:focus-visible .core-backlight{opacity:1;scale:1.3}
.hero .scene-core:focus-visible{outline:1px solid #ff5b7080;outline-offset:8px;border-radius:40%}
.hero .core-status{top:auto;bottom:7%;font-size:8px;letter-spacing:.12em;transition:color .3s}
.hero .scene-core:hover .core-status{color:#fff}
.hero .service-node{width:min(27%,300px)}
.hero .node-film{left:1%;top:23%}
.hero .node-web{right:1%;top:23%}
.hero .node-trigger:hover{transform:rotateY(0) translateY(-7px) scale(1.025);border-color:#ff697a}
.hero .branch-auto,.hero .ray-auto{display:none}
.coming-direction{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;gap:15px;width:fit-content;max-width:calc(100% - 36px);margin:12px auto 0;padding:14px 20px;border:1px solid #ffffff16;border-radius:14px;color:#a6a4ab;font-size:11px;line-height:1.5;transition:border-color .3s,color .3s}
.coming-direction>span{font-size:8px;letter-spacing:.13em;color:#d38b93;font-weight:700}
.coming-direction b{color:#e2d3d6}
.coming-direction:hover{border-color:#ff4b6555;color:#fff}
.coming-launch{display:flex;flex-direction:column;gap:9px;width:min(490px,calc(100% - 36px));margin:26px auto 8px;padding:24px 26px 23px;border-color:#ff53654d;border-radius:25px;background:radial-gradient(ellipse at 50% 0,#f3293e24,transparent 75%),linear-gradient(145deg,#171217cc,#09090ce6);box-shadow:inset 0 1px #ffffff17,0 0 35px #ed1e3417;text-align:center;transition:transform .4s,border-color .4s,box-shadow .4s}
.coming-launch>.automation-beacon{display:grid;place-items:center;width:76px;height:76px;margin:-4px 0 5px;border:1px solid #ff667c99;border-radius:24px;background:radial-gradient(circle at 32% 20%,#ffadc03b,transparent 60%),linear-gradient(145deg,#431323,#100d14);box-shadow:inset 0 1px #ffffff38,inset 0 0 24px #ff385128,0 0 24px #ff244b45,0 0 55px #f3293e25;transition:transform .4s,box-shadow .4s}
.automation-beacon svg{width:43px;height:43px;overflow:visible;stroke:#ffb1bc;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 6px #ff335d)}
.automation-beacon .beacon-spark{stroke:#fff7ee;stroke-width:1.5}
.coming-launch>.coming-phase{width:auto;font-size:9px;letter-spacing:.19em;color:#ff92a5}
.coming-launch>.coming-title{font-size:21px;line-height:1.25;letter-spacing:-.025em;font-weight:700;color:#f6f0f2}
.coming-launch>.coming-summary{width:auto;font-size:10px;line-height:1.6;letter-spacing:.02em;color:#bcaab2;font-weight:400}
.coming-launch>.coming-arrow{position:absolute;top:24px;right:24px;display:grid;place-items:center;width:27px;height:27px;border:1px solid #ff68804a;border-radius:50%;font-size:14px;font-weight:400;color:#ffb5c1}
.coming-launch:hover{transform:translateY(-4px);border-color:#ff687ca8;box-shadow:inset 0 1px #ffffff22,0 0 45px #f3293e28}
.coming-launch:hover .automation-beacon{transform:scale(1.08);box-shadow:inset 0 1px #ffffff48,0 0 33px #ff244b78,0 0 60px #f3293e38}
.coming-launch:focus-visible{outline:2px solid #ff8ca0;outline-offset:5px}

/* Monthly output is a clear, luminous comparison point inside each video offer. */
.video-package-grid .package-count{display:flex;align-items:center;gap:15px;min-height:90px;width:100%;margin:19px 0 14px;padding:14px 18px;border:1px solid #ff52675c;border-radius:17px;background:radial-gradient(ellipse at 8% 50%,#fa244732,transparent 75%),linear-gradient(110deg,#2a1019b3,#100d13cc);box-shadow:inset 0 1px #ffacb526,0 0 24px #f3293e12;color:#f9edf0}
.video-package-grid .video-quantity{font-size:49px;line-height:1;font-weight:800;letter-spacing:-.06em;background:linear-gradient(180deg,#fff9f5 7%,#ffb6c1 50%,#ff476a 100%);background-clip:text;-webkit-background-clip:text;color:transparent;filter:drop-shadow(0 0 10px #ff2a535c)}
.video-package-grid .package-count>span{display:flex;flex-direction:column;gap:5px;font-size:16px;line-height:1.15;font-weight:700}
.video-package-grid .package-count small{font-size:10px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:#e1a7b2}
.video-package-grid .featured-price .package-count{border-color:#ff6f83a8;box-shadow:inset 0 1px #ffc3ce32,0 0 29px #f3293e27}
.selected-package{margin:0 0 24px;padding:14px 18px;border:1px solid #ff667b6b;border-radius:12px;background:#f3293e16;color:#ffb9c4;font-size:14px;font-weight:700;line-height:1.6}

.proof.proof-has-media{min-height:410px;padding:24px;border-color:#ffffff28;isolation:isolate;background:#111114;justify-content:flex-start}
.proof-has-media>.proof-media{position:absolute;inset:0;z-index:0;display:block;overflow:hidden;pointer-events:none}
.proof-media img{width:100%;height:100%;object-fit:cover;transform:scale(1.03);opacity:.92;transition:transform .7s,opacity .5s}
.proof-media iframe{position:absolute;left:0;top:50%;width:100%;height:140%;border:0;transform:translateY(-50%);opacity:0;pointer-events:none;transition:opacity .8s}
.proof-has-media.is-preview-playing .proof-media iframe{opacity:1}
.proof.proof-has-media:before{display:none}
.proof.proof-has-media:after{content:"";position:absolute;inset:0;z-index:1;width:auto;height:auto;transform:none;border:0;border-radius:inherit;box-shadow:none;backdrop-filter:none;background:linear-gradient(180deg,#06070b3d 0%,#07070a00 37%,#07070a7d 63%,#07070aef 100%);pointer-events:none}
.proof-has-media>small,.proof-has-media>strong,.proof-has-media>span:not(.proof-media),.proof-has-media>b{position:relative;z-index:2}
.proof-has-media>small{align-self:flex-start;max-width:100%;padding:7px 9px;border:1px solid #ffffff33;border-radius:7px;background:#09090b75;color:#f2dfe5;font-size:8px;line-height:1.5;backdrop-filter:blur(7px)}
.proof-has-media>strong{margin-top:auto;padding-top:150px;margin-bottom:15px;font-size:30px;line-height:1.02;text-shadow:0 2px 20px #000b}
.proof-has-media>span:not(.proof-media){font-size:10px;color:#f0dce1}
.proof-has-media>b{position:absolute;right:24px;bottom:22px;font-size:21px;color:#ff8194}
.proof-has-media:hover .proof-media img{transform:scale(1.08)}
.proof-has-media.is-preview-playing>small:before{content:"";display:inline-block;width:5px;height:5px;margin-right:6px;border-radius:50%;background:#ff506d;box-shadow:0 0 9px #ff506d}
.hero .scroll-cue{display:none}

/* A Gmail draft is prepared by the client and sent by the visitor. */
.project-brief{margin:44px 0;padding:36px;border:1px solid #ffffff1e;border-radius:25px;background:radial-gradient(ellipse at 100% 0,#c32a3c17,transparent 60%),#101114}
.brief-heading h2{margin:12px 0;font-size:clamp(25px,3vw,38px);letter-spacing:-.04em}
.brief-heading p{max-width:600px;margin:0 0 28px;color:#aeb0b6;font-size:13px;line-height:1.7}
.brief-fields{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.brief-fields label{display:flex;flex-direction:column;gap:9px;color:#e2dfe2;font-size:12px;font-weight:700}
.brief-wide{grid-column:1/-1}
.brief-fields input,.brief-fields select,.brief-fields textarea{width:100%;padding:14px 16px;border:1px solid #ffffff24;border-radius:12px;background:#08090b;color:#f7f3f3;font:inherit;font-weight:400;line-height:1.5;outline:none}
.brief-fields textarea{resize:vertical;min-height:140px}
.brief-fields input:focus,.brief-fields select:focus,.brief-fields textarea:focus{border-color:#ff4c65;box-shadow:0 0 0 3px #ff304111}
.brief-submit{display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin-top:24px}
.brief-submit>a{font-size:12px;color:#c4b9bd}
.brief-submit button{cursor:pointer;color:#fff}
.channel-links{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.channel-links a{display:flex;align-items:center;gap:15px;padding:24px;border:1px solid #ffffff20;border-radius:17px;background:#ffffff03;transition:.3s}
.channel-links svg{width:25px;height:25px;fill:currentColor;stroke:currentColor;stroke-width:1.4}
.channel-links svg rect,.channel-links svg circle{fill:none}
.channel-links svg .solid-dot{fill:currentColor}
.channel-links svg .play-cutout{fill:#0c0d0e;stroke:none}
.channel-links a:hover{border-color:#ff546a;background:#f3293e0d;transform:translateY(-4px)}
.channel-email{display:flex;flex-wrap:wrap;justify-content:space-between;gap:15px;margin-top:20px;padding:22px 0;border-top:1px solid #ffffff1e;font-size:13px;color:#bdb9bf}
.channel-email span{color:#ff8797;overflow-wrap:anywhere}

@media(max-width:1380px) and (min-width:701px){.topbar{height:142px}.topbar .nav{height:89px;width:calc(100% - 42px)}.topbar .navlinks{top:91px;left:50%;transform:translateX(-50%);gap:28px;width:max-content}.topbar .brand{flex-basis:230px}.topbar .brand img.brand-mark{width:230px;height:83px}}
@media(max-width:1000px) and (min-width:701px){.hero .scene{height:490px}.hero .service-node{width:28%}.hero .node-trigger{padding:16px}.hero .node-title{font-size:23px}.hero .scene-core{width:36vw}.channel-links{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){
  .topbar{height:128px}
  .topbar .nav{height:76px;width:calc(100% - 24px);gap:7px;padding:0;align-content:center}
  .topbar .service-menu-toggle{flex:0 0 28px;width:28px;height:28px}
  .topbar .brand{flex:0 1 166px;min-width:0}
  .topbar .brand img.brand-mark{width:166px;height:72px;max-width:100%;object-fit:cover}
  .topbar .nav-extras{margin-left:auto;gap:0}
  .topbar .nav-extras .social-icons{display:none}
  .topbar .nav-cta{flex:0 0 28px;margin:0}
  .topbar .language-toggle{font-size:9px;padding:7px}
  .topbar .navlinks{display:grid;grid-template-columns:repeat(4,1fr);top:76px;left:0;right:0;transform:none;width:100%;height:47px;gap:4px;padding:0 2px;border:0;border-top:1px solid #ffffff13;border-radius:0;background:transparent}
  .topbar .navlinks a{font-size:8px;line-height:1.3;white-space:normal;justify-content:center;gap:4px}
  .topbar .navlinks a svg{flex:none;width:11px;height:11px}
  .topbar .service-menu{top:78px;max-height:calc(100svh - 105px);overflow:auto}
  .hero>.founder-layer{height:660px!important;mask-image:linear-gradient(180deg,#000,#000 67%,transparent)}
  .hero>.founder-layer img:first-child{right:-3%!important;width:100%!important;height:100%!important;object-position:64% 15%;opacity:.52!important;filter:saturate(.55) brightness(1.3) blur(.8px)!important;mask-image:linear-gradient(90deg,transparent,#000 50%,#000 100%)}
  .hero>.founder-layer:after{background:linear-gradient(90deg,#08090aa1,transparent),linear-gradient(180deg,transparent 15%,#08090a77 95%)}
  .hero .scene{height:auto;gap:17px;padding:0 17px 20px}
  .hero .scene-core{position:relative;inset:auto;left:auto;top:auto;width:min(82vw,360px);min-height:0;aspect-ratio:1;margin:0 auto 28px;transform:none!important;flex:none}
  .hero .core-status{bottom:0;font-size:7px}
  .hero .service-node,.hero .node-film,.hero .node-web{position:relative;inset:auto;width:100%;max-width:470px}
  .hero .scene-caption{font-size:6px;padding-top:10px;white-space:normal}
  .hero .scene:after{top:145px}
  .coming-launch{gap:8px;margin:21px auto 0;padding:24px 18px 21px}
  .coming-launch>.coming-title{font-size:18px}
  .coming-launch>.coming-summary{font-size:9px}
  .coming-launch>.coming-arrow{top:19px;right:17px}
  .video-package-grid .package-count{min-height:84px;padding:14px 17px}
  .video-package-grid .video-quantity{font-size:44px}
  .proof.proof-has-media{min-height:390px}
  .project-brief{padding:22px 18px;border-radius:20px}
  .brief-fields{grid-template-columns:1fr;gap:17px}
  .channel-links{grid-template-columns:1fr 1fr;gap:10px}
  .channel-links a{padding:17px 13px;gap:10px;font-size:12px}
}
@media(prefers-reduced-motion:reduce){.hero .core-logo-animation,.hero .node-trigger,.channel-links a{transition:none}.hero .scene-core:hover .core-logo-animation{transform:none}}

.agency-story{background:radial-gradient(ellipse at 85% 30%,#d52a3910,transparent 65%)}
.agency-story h2{font-size:clamp(34px,4.6vw,64px);line-height:1.08;letter-spacing:-.04em;margin:22px 0 30px}.agency-story h2 em{color:#ff344f;font-style:normal}.agency-story-copy{display:grid;grid-template-columns:1fr 1fr;gap:44px;max-width:1100px;margin-bottom:30px}.agency-story-copy p{font-size:17px;line-height:1.85;color:#bdc0c7}.founder-bio p{font-size:17px;line-height:1.85}@media(max-width:700px){.agency-story-copy{grid-template-columns:1fr;gap:8px}.founder-bio p{font-size:16px}}

/* Decorative scene layers must never intercept service controls. */
.scene-grid,.signal-map,.signal-particles,.core-backlight,.founder-layer,.grain{pointer-events:none!important}


body[data-service=digital] .service-hero:before{content:'SCORPIONAI / WEBSITE DEVELOPMENT'}body[data-service=automation] .service-hero:before{content:'SCORPIONAI / AUTOMATION + SOFTWARE'}


/* Real vector arrows keep iOS from substituting blue emoji. */
.ui-arrow{display:inline-flex;vertical-align:-.16em;align-items:center;justify-content:center;width:1em;height:1em;flex:none;line-height:1;color:inherit;font-style:normal}
.ui-arrow>svg{display:block;width:100%;height:100%;fill:none!important;stroke:currentColor!important;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.topbar .nav-cta .nav-cta-icon{display:inline-flex;width:15px;height:15px}
.topbar .nav-cta:before{display:none!important;content:none!important}
@media(max-width:700px){
 .topbar .nav-cta .nav-cta-label{display:none}
 .topbar .nav-cta .nav-cta-icon{display:inline-flex;width:15px;height:15px;color:#fff}
 .service-actions .button .ui-arrow{width:12px;height:12px}
}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
 a .ui-arrow,button .ui-arrow{transition:transform .18s ease,color .18s ease}
 a:hover>.ui-arrow,a:hover>span>.ui-arrow,button:hover>.ui-arrow{transform:translate(1px,-1px)}
}
a:focus-visible,button:focus-visible{outline:2px solid #d7dbe2;outline-offset:4px}
@media(hover:none){a:active>.ui-arrow,a:active>span>.ui-arrow,button:active>.ui-arrow{transform:scale(.94);opacity:.85}}
@media(prefers-reduced-motion:reduce){.ui-arrow{transition:none!important;transform:none!important}}