.service-art{--sv-gold:#d9b777;--sv-ivory:#f3f0e8;--sv-navy:#080e18;position:relative;isolation:isolate;width:100%;height:270px;overflow:hidden;border-radius:4px;background:radial-gradient(ellipse at 50% 40%,#222b34 0%,#101923 43%,#0b121d 78%);font-family:Manrope,sans-serif;color:var(--sv-ivory);contain:layout paint}
.service-art *{box-sizing:border-box}.service-art .sv-icon{width:48px;height:48px;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.sv-floor{position:absolute;inset:55% -30% -80%;background-image:linear-gradient(#d9b7770c 1px,transparent 1px),linear-gradient(90deg,#d9b7770c 1px,transparent 1px);background-size:30px 30px;transform:perspective(220px) rotateX(55deg);z-index:-1;mask-image:linear-gradient(transparent,#000,transparent)}
.sv-wire{stroke:#d9b7773d;stroke-width:1.5}.sv-flow{stroke:var(--sv-gold);stroke-width:2;stroke-dasharray:16 260;animation:sv-flow 5s linear infinite;filter:drop-shadow(0 0 4px #d9b777)}.sv-art-label{position:absolute;bottom:13px;left:10px;right:10px;text-align:center;color:#c9c7c0;font-size:14px;line-height:1.3;letter-spacing:.015em}
/* Search, answer, appointment: three tangible moments in one journey. */
.sv-journey-trace{position:absolute;inset:0;width:100%;height:100%}.sv-found-stage{position:absolute;top:72px;width:26%;height:112px;border:1px solid #d9b77755;background:linear-gradient(135deg,#27313d,#0e1723);box-shadow:0 18px 24px #0005,inset 0 1px #ffffff12;border-radius:13px}.sv-found-search{left:7%;transform:perspective(500px) rotateY(14deg);animation:sv-search-breathe 6s ease-in-out infinite}.sv-search-line{display:flex;align-items:center;gap:5px;margin:12px 10px 0;border:1px solid #d9b77730;border-radius:18px;padding:4px 7px;font-size:14px}.service-art .sv-search-line .sv-icon{width:22px;height:22px;stroke-width:2.6}.sv-result-lines{padding:10px 14px}.sv-result-lines>*{display:block;height:3px;margin-bottom:7px;background:#d9b777aa;border-radius:5px}.sv-result-lines b{width:65%;height:5px}.sv-result-lines i:last-child{width:70%;background:#f3f0e830}.sv-found-phone{position:absolute;left:50%;top:127px;width:75px;height:75px;transform:translate(-50%,-50%)}.sv-phone-orb{position:absolute;inset:0;display:grid;place-items:center;border:1px solid #f8db9a;background:radial-gradient(circle at 30% 20%,#ffe3a9,#a98244 65%,#5d4625);color:#111722;border-radius:50%;box-shadow:0 10px 35px #0008,inset 0 1px 2px #fff9;animation:sv-phone 6s ease-in-out infinite}.sv-ring{position:absolute;inset:-15px;border-radius:50%;border:1px solid #d9b77755;animation:sv-ring 3s ease-out infinite}.sv-ring:nth-child(2){inset:-30px;animation-delay:.5s}.sv-found-booked{right:7%;display:grid;place-items:center;transform:perspective(500px) rotateY(-14deg);animation:sv-booked 6s ease-in-out infinite}.sv-found-booked>.sv-icon{width:68px;height:68px;color:var(--sv-gold)}.sv-booked-check{position:absolute;right:-9px;top:-10px;width:29px;height:29px;border-radius:50%;background:var(--sv-gold);color:var(--sv-navy);display:grid;place-items:center;box-shadow:0 2px 12px #0005;animation:sv-booked-check 6s ease-in-out infinite}.service-art .sv-booked-check .sv-icon{width:24px;height:24px;stroke-width:3}.sv-found-caption{position:absolute;top:calc(100% + 24px);left:50%;transform:translateX(-50%);font-size:14px;font-weight:500;white-space:nowrap}.sv-found-phone .sv-found-caption{top:calc(100% + 42px)}
/* A real ABARA site assembles across floating browser planes. */
.sv-browser{position:absolute;width:66%;height:165px;left:17%;top:44px;border:1px solid #d9b77777;border-radius:8px;overflow:hidden;background:#1b2431;box-shadow:0 26px 36px #0008;transform:perspective(600px) rotateY(-9deg) rotateX(5deg);animation:sv-browser 7s ease-in-out infinite}.sv-browser-bar{height:21px;display:flex;align-items:center;gap:4px;padding:0 8px;background:linear-gradient(#303b48,#1a2633);border-bottom:1px solid #d9b77730}.sv-browser-bar i{width:4px;height:4px;border-radius:50%;background:#d9b77780}.sv-browser-bar span{height:5px;width:38%;background:#f3f0e81c;border-radius:4px;margin:auto}.sv-browser-image{height:113px;position:relative;overflow:hidden}.sv-browser-image img{width:100%;height:100%;object-fit:cover;object-position:center 35%;animation:sv-site-reveal 7s ease-in-out infinite}.sv-browser-sweep{position:absolute;inset:0;background:linear-gradient(105deg,transparent 40%,#fff2 50%,transparent 60%);transform:translateX(-100%);animation:sv-sweep 7s ease-in-out infinite}.sv-browser-base{height:28px;display:flex;gap:7px;padding:8px 12px}.sv-browser-base i{height:12px;flex:1;background:linear-gradient(90deg,#d9b77730,#d9b7770a);border-radius:2px}.sv-browser-shadow{position:absolute;width:66%;height:165px;left:14%;top:53px;border:1px solid #d9b77725;border-radius:8px;background:#182331;transform:perspective(600px) rotateY(-9deg) rotateX(5deg);animation:sv-layer 7s ease-in-out infinite}.sv-browser-shadow-two{left:11%;top:63px;opacity:.55}.sv-cursor{position:absolute;right:11%;bottom:30px;width:42px;height:42px;border-radius:50%;border:1px solid #d9b77788;background:#172332;display:grid;place-items:center;color:var(--sv-gold);transform:rotate(-35deg);animation:sv-cursor 7s ease-in-out infinite}.service-art .sv-cursor .sv-icon{width:25px;height:25px}.sv-corner{position:absolute;width:17px;height:17px;border-color:#d9b77766;border-style:solid}.sv-corner-tl{top:24px;left:12%;border-width:1px 0 0 1px}.sv-corner-br{right:12%;bottom:29px;border-width:0 1px 1px 0}
/* A lit path moves through booking, follow-up and a simple dashboard. */
.sv-automation-lines{position:absolute;inset:0;width:100%;height:100%}.sv-node{position:absolute;width:51px;height:51px;border:1px solid #d9b7774a;border-radius:12px;background:linear-gradient(140deg,#35404b,#111a27 75%);display:grid;place-items:center;box-shadow:0 8px 20px #0005,inset 0 1px #fff1;color:#c8b894;transform:translate(-50%,-50%);animation:sv-node 5s ease-in-out infinite}.service-art .sv-node .sv-icon{width:31px;height:31px}.sv-node-start{left:12%;top:50%;width:65px;height:65px;color:var(--sv-gold);border-color:#d9b77790}.sv-node-one{left:61%;top:20%;animation-delay:.8s}.sv-node-two{left:61%;top:50%;animation-delay:1.3s}.sv-node-three{left:61%;top:80%;animation-delay:1.8s}.sv-node-end{left:88%;top:50%;width:52px;height:52px;border-radius:50%;background:linear-gradient(140deg,#f5d698,#98753d);color:var(--sv-navy);animation-delay:2.5s}.sv-auto-label{bottom:9px}
/* Three real site recordings represented as an editing reel. */
.sv-reel{position:absolute;top:40px;width:26%;height:174px;border-radius:10px;border:1px solid #d9b7776b;overflow:hidden;background:#111925;box-shadow:0 16px 35px #0009}.sv-reel img{width:100%;height:100%;object-fit:cover;animation:sv-clip-pan 12s ease-in-out infinite}.sv-reel-left{left:14%;transform:translateY(4px) rotate(-12deg);opacity:.74;animation:sv-left-reel 8s ease-in-out infinite}.sv-reel-right{right:14%;transform:translateY(4px) rotate(12deg);opacity:.74;animation:sv-right-reel 8s ease-in-out infinite}.sv-reel-right img{animation-delay:-4s}.sv-reel-main{left:37%;top:30px;height:187px;z-index:2;animation:sv-main-reel 8s ease-in-out infinite}.sv-reel-main img{filter:brightness(.66);animation-delay:-8s}.sv-film-holes{position:absolute;inset:0 auto 0 3px;width:4px;background:repeating-linear-gradient(transparent 0 7px,#d9b77780 7px 12px,transparent 12px 15px)}.sv-reel-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border:1px solid #f3f0e8b8;border-radius:50%;background:#080e1860;width:45px;height:45px;display:grid;place-items:center;color:var(--sv-ivory)}.service-art .sv-reel-play .sv-icon{width:30px;height:30px;fill:var(--sv-ivory);stroke:none}.sv-film-progress{position:absolute;bottom:10px;left:10px;right:10px;height:2px;background:#fff3}.sv-film-progress i{display:block;width:35%;height:100%;background:var(--sv-gold);animation:sv-progress 8s linear infinite}.sv-reel-timeline{position:absolute;bottom:22px;left:19%;right:19%;height:10px;display:flex;gap:4px}.sv-reel-timeline i{flex:1;border:1px solid #d9b77740;background:repeating-linear-gradient(90deg,#d9b77716 0 4px,#d9b77733 4px 6px)}.sv-reel-timeline b{position:absolute;left:0;top:-3px;width:1px;height:16px;background:var(--sv-gold);animation:sv-playhead 8s linear infinite}
/* The actual ABARA mark and approved palette; no fictional client brand. */
.sv-brand-orbit{position:absolute;left:14%;top:29px;width:175px;height:175px;border:1px solid #d9b7771f;border-radius:50%;transform:rotateX(55deg) rotateZ(-25deg);box-shadow:0 0 0 15px #d9b77704,0 0 0 30px #d9b77704}.sv-brand-mark{position:absolute;left:17%;top:49px;width:135px;height:135px;display:grid;place-items:center;border-radius:50%;background:radial-gradient(circle at 30% 25%,#36414c,#17202e 60%,#111925);box-shadow:0 18px 30px #0007,inset 0 1px 1px #f3f0e820;animation:sv-brand-float 8s ease-in-out infinite}.sv-brand-mark img{width:70px;height:70px;object-fit:contain;filter:sepia(.7) saturate(.8) brightness(1.3)}.sv-logo-draw{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:var(--sv-gold);stroke-width:1;stroke-dasharray:440;animation:sv-logo-draw 8s ease-in-out infinite}.sv-swatch{position:absolute;left:62%;top:53px;width:62px;height:141px;border-radius:7px;border:1px solid #d9b77745;transform-origin:center 90%;box-shadow:0 10px 16px #0006;animation:sv-swatch-fan 8s ease-in-out infinite}.sv-swatch span{position:absolute;width:7px;height:7px;border-radius:50%;bottom:10px;left:calc(50% - 3px);background:#080e1880;border:1px solid #f3f0e850}.sv-swatch-ivory{--fan:-30deg;background:linear-gradient(110deg,#fffaf0,#c8c4ba);transform:rotate(-30deg)}.sv-swatch-gold{--fan:0deg;background:linear-gradient(110deg,#f2d69f,#b89555);transform:rotate(0);animation-delay:.12s}.sv-swatch-navy{--fan:30deg;background:linear-gradient(110deg,#263548,#080e18);transform:rotate(30deg);animation-delay:.24s}.sv-brand-word{position:absolute;left:15%;width:170px;text-align:center;bottom:26px;font-size:22px;letter-spacing:.18em;font-weight:600}.sv-brand-word span{display:block;font-size:14px;letter-spacing:.2em;color:#d9b777b0;margin-top:3px}
/* Animated lessons stack into a single course, with the creator's voice. */
.sv-lesson{position:absolute;width:54%;height:112px;left:23%;top:46px;border:1px solid #d9b77755;border-radius:10px;background:linear-gradient(145deg,#263440,#111a27);box-shadow:0 15px 25px #0005;transform:perspective(500px) rotateY(-13deg) rotateX(8deg);animation:sv-lesson-stack 7s ease-in-out infinite}.sv-lesson-back{top:28px;left:29%;opacity:.5;--stack:8px;animation-delay:.3s}.sv-lesson-middle{top:41px;left:26%;opacity:.8;--stack:4px;animation-delay:.15s}.sv-lesson-front{top:55px;left:23%;--stack:0px;display:flex;align-items:center;gap:14px;padding:20px}.sv-lesson-play{width:48px;height:48px;flex-shrink:0;border-radius:50%;background:linear-gradient(145deg,#f1d297,#997840);color:var(--sv-navy);display:grid;place-items:center;box-shadow:inset 0 1px #fff9}.service-art .sv-lesson-play .sv-icon{width:30px;height:30px;stroke-width:2}.sv-lesson-lines{width:55%;margin:22px}.sv-lesson-front .sv-lesson-lines{margin:0;flex:1}.sv-lesson-lines i{display:block;height:5px;background:#f3f0e848;margin:10px 0;border-radius:2px}.sv-lesson-lines i:last-child{width:62%;background:#d9b77745}.sv-voice{position:absolute;top:172px;left:23%;right:23%;height:52px;display:flex;align-items:center;justify-content:center;gap:4px}.sv-voice i{display:block;width:3px;max-height:45px;height:var(--h);border-radius:3px;background:linear-gradient(#f1d49d,#9f7a43);transform:scaleY(.65);animation:sv-wave 2s ease-in-out infinite;animation-delay:calc(var(--i) * -.13s)}.sv-course-label{bottom:13px}
/* A plan maps out from an informed first conversation. */
.sv-plan-lines{position:absolute;inset:0;width:100%;height:100%}.sv-plan-draw{stroke:var(--sv-gold);stroke-width:1.7;stroke-dasharray:600;animation:sv-plan-draw 7s ease-in-out infinite}.sv-plan-origin{position:absolute;left:13%;top:calc(50% - 39px);width:78px;height:78px;border:1px solid #d9b7777a;border-radius:50%;background:radial-gradient(circle at 30% 20%,#35404b,#152030);box-shadow:0 15px 25px #0006;display:grid;place-items:center}.sv-plan-compass{width:58px;height:58px;border:1px solid #d9b77740;border-radius:50%;position:relative;transform:rotate(30deg);animation:sv-compass 7s ease-in-out infinite}.sv-plan-compass:before{content:'';position:absolute;width:1px;height:40px;background:#d9b77730;left:28px;top:8px}.sv-plan-compass:after{content:'';position:absolute;width:40px;height:1px;background:#d9b77730;left:8px;top:28px}.sv-plan-compass i{position:absolute;left:22px;top:8px;width:12px;height:40px;background:linear-gradient(var(--sv-gold) 50%,#6b5635 50%);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}.sv-plan-card{position:absolute;left:57%;width:37%;height:42px;display:flex;align-items:center;gap:9px;border:1px solid #d9b7774a;border-radius:8px;background:linear-gradient(130deg,#273440,#111a27);padding:0 13px;box-shadow:0 6px 18px #0004;font-size:14px;white-space:nowrap;animation:sv-plan-card 7s ease-in-out infinite}.sv-plan-card i{flex-shrink:0;width:6px;height:6px;border-radius:50%;background:var(--sv-gold);box-shadow:0 0 9px #d9b77755}.sv-plan-one{top:31px;animation-delay:.3s}.sv-plan-two{top:114px;animation-delay:.7s}.sv-plan-three{top:194px;animation-delay:1.1s}
@keyframes sv-flow{to{stroke-dashoffset:-552}}@keyframes sv-search-breathe{0%,15%,100%{border-color:#d9b77755}25%,40%{border-color:#efd49e;box-shadow:0 0 24px #d9b77710,0 18px 24px #0005}}@keyframes sv-phone{0%,35%,65%,100%{transform:rotate(0)}43%,51%,59%{transform:rotate(-9deg)}47%,55%{transform:rotate(9deg)}}@keyframes sv-ring{0%{transform:scale(.8);opacity:0}20%{opacity:.7}100%{transform:scale(1.25);opacity:0}}@keyframes sv-booked{0%,55%,100%{border-color:#d9b77755}68%,85%{border-color:#f4d49d;box-shadow:0 0 24px #d9b77715,0 18px 24px #0005}}@keyframes sv-booked-check{0%,55%{transform:scale(.7);opacity:.25}68%,90%{transform:scale(1);opacity:1}100%{transform:scale(.7);opacity:.25}}@keyframes sv-browser{0%,100%{transform:perspective(600px) rotateY(-9deg) rotateX(5deg) translateY(0)}50%{transform:perspective(600px) rotateY(-5deg) rotateX(3deg) translateY(-7px)}}@keyframes sv-site-reveal{0%,100%{clip-path:inset(0 0 0 0)}8%{clip-path:inset(0 100% 0 0)}30%,90%{clip-path:inset(0 0 0 0)}}@keyframes sv-sweep{0%,35%,100%{transform:translateX(-100%)}65%,85%{transform:translateX(100%)}}@keyframes sv-layer{0%,100%{translate:0 0}50%{translate:-7px 5px}}@keyframes sv-cursor{0%,100%{translate:0 0}45%{translate:-20px -20px}60%{translate:-20px -20px;scale:.9}80%{translate:0 0;scale:1}}@keyframes sv-node{0%,20%,65%,100%{filter:brightness(1)}35%,45%{filter:brightness(1.45);border-color:#eacb8b}}@keyframes sv-clip-pan{0%,100%{object-position:25% center;scale:1}50%{object-position:75% center;scale:1.1}}@keyframes sv-left-reel{0%,100%{transform:translateY(4px) rotate(-12deg)}50%{transform:translate(-5px,-3px) rotate(-16deg)}}@keyframes sv-right-reel{0%,100%{transform:translateY(4px) rotate(12deg)}50%{transform:translate(5px,-3px) rotate(16deg)}}@keyframes sv-main-reel{0%,100%{translate:0 0}50%{translate:0 -7px}}@keyframes sv-progress{from{width:0}to{width:100%}}@keyframes sv-playhead{from{left:0}to{left:100%}}@keyframes sv-brand-float{0%,100%{translate:0 0;rotate:-4deg}50%{translate:0 -7px;rotate:3deg}}@keyframes sv-logo-draw{0%{stroke-dashoffset:440}40%,85%{stroke-dashoffset:0}100%{stroke-dashoffset:-440}}@keyframes sv-swatch-fan{0%,100%{transform:rotate(var(--fan))}35%{transform:rotate(0deg)}65%,90%{transform:rotate(var(--fan))}}@keyframes sv-lesson-stack{0%,100%{translate:0 0}50%{translate:calc(var(--stack) * .4) calc(-6px - var(--stack))}}@keyframes sv-wave{0%,100%{transform:scaleY(.4);opacity:.55}50%{transform:scaleY(1);opacity:1}}@keyframes sv-plan-draw{0%{stroke-dashoffset:600;opacity:.3}55%,85%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:.3}}@keyframes sv-plan-card{0%,100%{translate:0 0;border-color:#d9b7774a}45%,65%{translate:3px 0;border-color:#e8c98a}}@keyframes sv-compass{0%,100%{transform:rotate(30deg)}45%,65%{transform:rotate(-25deg)}}
body.motion-paused .service-art *,body.motion-paused .service-art *::before,body.motion-paused .service-art *::after,.service-art.art-offscreen *,.art-offscreen .service-art *{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){.service-art *,.service-art *::before,.service-art *::after{animation:none!important;transition:none!important}.sv-logo-draw,.sv-plan-draw{stroke-dashoffset:0}.sv-flow{stroke-dasharray:none;opacity:.8}.sv-film-progress i{width:65%}.sv-reel-timeline b{left:65%}.sv-booked-check{opacity:1;transform:none}}
@media(max-width:600px){.service-art{height:250px}.sv-found-stage{top:65px;width:26%;height:105px}.sv-found-phone{top:117px;width:62px;height:62px}.service-art .sv-phone-orb .sv-icon{width:38px;height:38px}.sv-found-caption{font-size:14px}.sv-search-line{margin:9px 6px 0;padding:4px;font-size:14px;gap:2px}.service-art .sv-search-line .sv-icon{width:19px;height:19px}.sv-result-lines{padding:9px}.sv-found-booked>.sv-icon{width:58px;height:58px}.sv-plan-card{padding:0 8px;gap:6px;left:54%;width:43%;font-size:14px}.sv-plan-one{top:27px}.sv-plan-two{top:104px}.sv-plan-three{top:178px}.sv-plan-origin{left:8%;width:68px;height:68px;top:calc(50% - 34px)}.sv-brand-mark{left:12%;width:112px;height:112px}.sv-brand-mark img{width:60px;height:60px}.sv-brand-word{left:6%;width:150px;bottom:34px}.sv-brand-orbit{left:7%;width:145px;height:145px}.sv-swatch{left:63%;width:50px;height:127px}.sv-browser{height:155px;top:40px}.sv-browser-image{height:103px}.sv-browser-shadow{height:155px;top:49px}.sv-browser-shadow-two{top:59px}.sv-reel{height:158px;top:38px}.sv-reel-main{height:174px;top:25px}.sv-reel-timeline{bottom:20px}.sv-lesson-front{padding:15px;gap:10px}.sv-lesson-play{width:40px;height:40px}.sv-voice{top:167px;height:40px}.sv-course-label{bottom:10px}}
/* Container-relative geometry: connectors and their nodes share one coordinate
   system, including when a card is narrow inside a wide browser window. */
.service-art{container-type:inline-size;container-name:service-visual}
.sv-journey-trace,.sv-automation-lines,.sv-plan-lines{display:block;overflow:visible}
.sv-found-stage{top:46%;width:clamp(55px,24%,155px);height:112px}
.sv-found-search{left:20%;transform:translate(-50%,-50%) perspective(500px) rotateY(14deg)}
.sv-found-booked{left:80%;right:auto;transform:translate(-50%,-50%) perspective(500px) rotateY(-14deg)}
.sv-found-phone{top:46%;width:clamp(48px,15cqw,75px);height:clamp(48px,15cqw,75px)}
.sv-found-labels{position:absolute;top:calc(46% + 75px);left:5%;right:5%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));font-size:14px;line-height:1.3;text-align:center;font-weight:500}
.sv-found-labels span{min-width:0;padding:0 4px;overflow-wrap:normal;text-wrap:balance}
.sv-search-line{min-width:0;justify-content:center;margin-inline:6px;padding-inline:4px;gap:3px}
.sv-search-line span{min-width:0}.service-art .sv-search-line .sv-icon{flex:none;width:20px;height:20px}
.sv-result-lines{padding-inline:10px}.sv-found-booked>.sv-icon{width:min(68px,80%);height:68px}
.sv-ring{inset:-10px}.sv-ring:nth-child(2){inset:-20px}
.sv-node{width:clamp(38px,10cqw,51px);height:clamp(38px,10cqw,51px)}
.sv-node-start{left:12%;top:47%;width:clamp(44px,12cqw,65px);height:clamp(44px,12cqw,65px)}
.sv-node-one{left:61%;top:20%}.sv-node-two{left:61%;top:47%}.sv-node-three{left:61%;top:74%}
.sv-node-end{left:88%;top:47%;width:clamp(40px,10cqw,52px);height:clamp(40px,10cqw,52px)}
.sv-auto-label{left:5%;right:5%;bottom:9px;line-height:1.3}
.sv-plan-origin{left:20%;top:50%;width:clamp(56px,16cqw,78px);height:clamp(56px,16cqw,78px);transform:translate(-50%,-50%)}
.sv-plan-compass{width:44px;height:44px}.sv-plan-compass:before{height:32px;left:21px;top:5px}.sv-plan-compass:after{width:32px;left:5px;top:21px}.sv-plan-compass i{height:30px;width:10px;left:16px;top:6px}
.sv-plan-card{left:52%;width:43%;height:auto;min-height:52px;padding:9px 10px;gap:0;transform:translateY(-50%);white-space:normal;line-height:1.25;font-size:14px;overflow-wrap:normal;animation-name:sv-plan-card-fixed}
.sv-plan-card span{display:block;min-width:0;max-width:100%;text-wrap:balance}.sv-plan-card i{display:none}
.sv-plan-one{top:20%}.sv-plan-two{top:50%}.sv-plan-three{top:80%}
@keyframes sv-plan-card-fixed{0%,100%{filter:brightness(1);border-color:#d9b7774a}45%,65%{filter:brightness(1.18);border-color:#e8c98a}}
.sv-browser{top:calc(50% - 90px)}.sv-browser-shadow{top:calc(50% - 81px)}.sv-browser-shadow-two{top:calc(50% - 71px)}
.sv-reel{top:calc(50% - 95px);height:174px}.sv-reel-main{top:calc(50% - 105px);height:187px}.sv-reel-timeline{bottom:14px}
.sv-brand-mark{left:12%;top:calc(50% - 85px);width:clamp(85px,28cqw,135px);height:clamp(85px,28cqw,135px)}
.sv-brand-mark img{width:55%;height:55%}.sv-brand-orbit{left:8%;top:calc(50% - 104px);width:clamp(115px,36cqw,175px);height:clamp(115px,36cqw,175px)}
.sv-swatch{left:62%;top:calc(50% - 82px);width:clamp(35px,12cqw,62px);height:clamp(100px,31cqw,141px)}
.sv-brand-word{left:7%;width:40%;max-width:170px;top:calc(50% + 65px);bottom:auto;font-size:22px;letter-spacing:.12em}.sv-brand-word span{font-size:14px;letter-spacing:.12em}
.sv-lesson-back{top:calc(50% - 107px)}.sv-lesson-middle{top:calc(50% - 94px)}.sv-lesson-front{top:calc(50% - 80px);padding:15px;gap:10px}
.sv-lesson-play{width:clamp(32px,10cqw,48px);height:clamp(32px,10cqw,48px)}.sv-lesson-front .sv-lesson-lines{min-width:0}.sv-voice{top:calc(50% + 40px);height:45px}.sv-course-label{bottom:10px}
@container service-visual (max-width:320px){
 .sv-found-stage{height:96px}.sv-search-line span{display:none}.sv-search-line{margin:12px 8px 0;padding:5px 0}.sv-result-lines{padding:12px 10px}.sv-result-lines i{margin-bottom:6px}
 .sv-found-labels{top:calc(46% + 64px)}.sv-found-booked>.sv-icon{height:51px}.sv-booked-check{width:25px;height:25px;right:-4px;top:-7px}
 .sv-ring{inset:-7px}.sv-ring:nth-child(2){inset:-13px}.service-art .sv-phone-orb .sv-icon{width:30px;height:30px}
 .service-art .sv-node .sv-icon{width:27px;height:27px}.sv-plan-card{padding:8px;min-height:52px}
 .sv-brand-word{font-size:20px;letter-spacing:.07em}.sv-brand-word span{letter-spacing:.06em}
 .sv-lesson-front{padding:12px;gap:8px}.sv-lesson-lines i{height:4px}.sv-voice{left:16%;right:16%;gap:3px}
 .sv-reel-play{width:36px;height:36px}.service-art .sv-reel-play .sv-icon{width:25px;height:25px}
}
/* At compact widths the search icon carries the meaning; keep labels readable. */
@container service-visual (max-width:420px){.sv-search-line span{display:none}.sv-search-line{padding-inline:0}}
@container service-visual (max-width:280px){.sv-found-labels{left:0;right:0}.sv-found-labels span{padding-inline:0}}
/* A genuine avatar clip replaces recycled website imagery. */
.sv-avatar-frame{position:absolute;left:17%;top:50%;height:83%;aspect-ratio:9/16;transform:translateY(-50%) rotate(-5deg);border:2px solid #d9b77788;border-radius:12px;overflow:hidden;background:#101a27;box-shadow:0 18px 40px #0008;z-index:2}.sv-avatar-frame video{width:100%;height:100%;object-fit:cover;display:block}.sv-avatar-caption{position:absolute;bottom:8px;left:7px;right:7px;background:#080e18df;border:1px solid #d9b77755;border-radius:20px;color:#f3f0e8;text-align:center;font-size:14px;padding:4px;line-height:1.4}.sv-video-edit{position:absolute;left:52%;right:6%;top:32%;transform:rotate(5deg);padding:20px 10px;border:1px solid #d9b77755;border-radius:8px;background:linear-gradient(135deg,#1f2c3f,#0a1420);box-shadow:0 10px 30px #0006}.sv-video-wave{display:flex;align-items:center;justify-content:center;height:75px;gap:4px}.sv-video-wave i{display:block;width:4px;height:var(--h);max-height:65px;background:#d9b777;border-radius:3px;animation:sv-wave 1.6s calc(var(--i)*-.12s) ease-in-out infinite}.sv-video-edit>span{display:block;font-size:14px;letter-spacing:.03em;text-align:center;line-height:1.6;color:#d9b777}
.sv-avatar-frame{left:11%;height:82%;transform:translateY(-50%) rotate(-7deg)}.sv-lesson-example{position:absolute;left:51%;top:50%;height:78%;aspect-ratio:1080/1670;transform:translateY(-50%) rotate(7deg);border:2px solid #d9b77777;border-radius:10px;overflow:hidden;background:#080e18;box-shadow:0 16px 35px #0008}.sv-lesson-example>img{width:100%;height:100%;object-fit:contain;display:block}.sv-avatar-caption{white-space:normal;text-wrap:balance}
@container service-visual (max-width:300px){.sv-avatar-frame{left:5%;height:75%}.sv-lesson-example{left:51%;height:71%}.sv-avatar-caption{left:3px;right:3px;padding:3px;font-size:14px}}
/* Keep real-media frames and their labels inside compact service cards. */
.sv-avatar-frame{height:min(82%,65cqw)}.sv-lesson-example{left:50%;height:min(78%,57cqw)}
@container service-visual (max-width:300px){.sv-avatar-frame{left:7%;height:min(75%,65cqw)}.sv-lesson-example{left:51%;height:min(71%,57cqw)}}
.sv-selected-frame{position:absolute;top:47%;width:28%;aspect-ratio:9/16;max-height:84%;border:1px solid #d9b77788;border-radius:9px;overflow:hidden;background:#101a27;box-shadow:0 15px 28px #0008;transform:translateY(-50%) rotate(var(--angle,0deg))}.sv-selected-frame>img,.sv-selected-frame>video{display:block;width:100%;height:100%;object-fit:cover}.sv-selected-ugc{left:5%;--angle:-7deg;z-index:2}.sv-selected-drama{left:36%;--angle:0deg;z-index:3}.sv-selected-lesson{left:67%;--angle:7deg;z-index:1}.sv-selected-caption{position:absolute;left:3px;right:3px;bottom:5px;background:#080e18f0;color:#f3f0e8;border:1px solid #d9b77766;border-radius:5px;padding:5px 2px;font-size:14px;line-height:1.35;text-align:center;text-wrap:balance}
.sv-selected-frame{height:min(84%,49.8cqw);width:auto;max-height:none;aspect-ratio:9/16}.sv-selected-frame>img,.sv-selected-frame>video{object-fit:contain}