/* ==================================================================
   Service films · three personalities, one stage system.
   .sv-assess (case file, paper + amber) · .sv-leads (night radar)
   .sv-pins (paper board, Four Sparrows palette)
   ================================================================== */
.svfilm { position:relative; width:100%; aspect-ratio:16/9; overflow:hidden; background:#111110; cursor:pointer; isolation:isolate; contain:layout paint; }
.svfilm.v { aspect-ratio:9/16; }
.sv-stage { position:absolute; left:0; top:0; width:1920px; height:1080px; transform-origin:0 0; overflow:hidden; font-family:'Geist','Inter',system-ui,sans-serif; color:var(--fg); -webkit-font-smoothing:antialiased; text-rendering:geometricPrecision; background:var(--bg); }
.sv-stage.sv-v { width:1080px; height:1920px; }
.sv-stage * { box-sizing:border-box; }
.sv-stage :is(h2,h3,h4) { font-family:'Geist','Inter',system-ui,sans-serif; color:var(--fg); margin:0; font-style:normal; }
.sv-stage p { margin:0; }
.sv-assess { --bg:#EFE9DD; --fg:#17140F; --mut:#857B6E; --card:#FBF8F1; --line:rgba(23,20,15,.12); --acc:#D68A1F; --acc2:#00A89D; --ink:#17140F; }
.sv-leads { --bg:#07101B; --fg:#EAF4FF; --mut:#6E8095; --card:#0E1A28; --line:rgba(234,244,255,.1); --acc:#2BD4FF; --acc2:#00A89D; --ink:#07101B; }
.sv-pins { --bg:#F4EDE4; --fg:#1F2A27; --mut:#7F857F; --card:#FFFFFF; --line:rgba(31,42,39,.1); --acc:#E07A5F; --acc2:#3E9C87; --ink:#1F2A27; }
.sv-bg { position:absolute; inset:0; }
.sv-assess .sv-bg { background:radial-gradient(1200px 700px at 20% 10%, rgba(255,255,255,.7), transparent 60%), radial-gradient(900px 700px at 90% 100%, rgba(214,138,31,.10), transparent 60%), var(--bg); }
.sv-leads .sv-bg { background:radial-gradient(1000px 700px at 70% 40%, rgba(43,212,255,.12), transparent 60%), radial-gradient(800px 600px at 10% 100%, rgba(0,168,157,.10), transparent 60%), var(--bg); }
.sv-pins .sv-bg { background:radial-gradient(1100px 700px at 80% 15%, rgba(127,196,174,.25), transparent 60%), radial-gradient(900px 700px at 10% 100%, rgba(231,185,166,.35), transparent 60%), var(--bg); }
.sv-bg::after { content:''; position:absolute; inset:0; opacity:.06; mix-blend-mode:multiply; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.sv-leads .sv-bg::after { mix-blend-mode:screen; opacity:.04; }
.sv-stage .w { display:inline-block; will-change:transform, filter, opacity; }
.sv-k { white-space:nowrap; }
.sv-m { font-family:'Geist Mono','JetBrains Mono',ui-monospace,monospace; font-size:17px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--mut); }
.sv-ser { font-family:'Instrument Serif','Libre Baskerville',Georgia,serif; font-style:italic; font-weight:400; letter-spacing:-.01em; }

/* title */
.sv-title, .sv-sc, .sv-state, .sv-proof, .sv-end { position:absolute; inset:0; display:none; }
.sv-tl0 { position:absolute; left:0; right:0; top:330px; text-align:center; color:var(--acc); }
.sv-th { position:absolute; left:0; right:0; top:380px; text-align:center; font-weight:500 !important; font-size:132px; line-height:1.02; letter-spacing:-.055em; }
.sv-th .sv-ser { color:var(--acc); letter-spacing:-.02em; }
.sv-motif { position:absolute; left:50%; top:50%; width:1500px; height:900px; margin:-450px 0 0 -750px; pointer-events:none; z-index:-1; }
.sv-assess .sv-motif { background:linear-gradient(transparent 49.6%, rgba(23,20,15,.07) 50%, transparent 50.4%) 0 0/100% 60px; -webkit-mask-image:radial-gradient(closest-side, #000, transparent); mask-image:radial-gradient(closest-side, #000, transparent); }
.sv-leads .sv-motif { border-radius:50%; background:repeating-radial-gradient(circle, transparent 0 88px, rgba(43,212,255,.12) 88px 90px); -webkit-mask-image:radial-gradient(closest-side, #000, transparent); mask-image:radial-gradient(closest-side, #000, transparent); }
.sv-pins .sv-motif { background:radial-gradient(circle at 20% 30%, rgba(224,122,95,.18) 0 60px, transparent 61px), radial-gradient(circle at 80% 70%, rgba(127,196,174,.3) 0 90px, transparent 91px), radial-gradient(circle at 65% 20%, rgba(231,185,166,.4) 0 40px, transparent 41px); }

/* scene layout */
.sv-txt { position:absolute; left:140px; top:300px; width:660px; }
.sv-kick { color:var(--acc); }
.sv-h { margin-top:26px !important; font-weight:500 !important; font-size:72px; line-height:1.05; letter-spacing:-.05em; }
.sv-s { margin-top:28px !important; font-size:44px; line-height:1.15; color:var(--mut); }
.sv-s .w { color:var(--fg); opacity:.75; }
.sv-vis { position:absolute; left:880px; top:180px; width:900px; height:720px; }
.sv-tl { display:block; height:10px; border-radius:10px; background:var(--line); margin-top:14px; }
.sv-ck { width:22px; height:22px; } .sv-ck path { fill:none; stroke:currentColor; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:1; stroke-dashoffset:1; }

/* statement / proof */
.sv-sh { position:absolute; left:0; right:0; top:400px; text-align:center; font-weight:500 !important; font-size:96px; line-height:1.08; letter-spacing:-.05em; }
.sv-sh .sv-ser { color:var(--acc); }
.sv-proof .sv-m { position:absolute; left:0; right:0; top:300px; text-align:center; color:var(--acc); }
.sv-nums { position:absolute; left:0; right:0; top:380px; display:flex; justify-content:center; gap:140px; }
.sv-nums > div { text-align:center; }
.sv-nums strong { display:block; font-weight:600; font-size:180px; line-height:1; letter-spacing:-.06em; background:linear-gradient(135deg,var(--acc),var(--acc2)); -webkit-background-clip:text; background-clip:text; color:transparent; font-variant-numeric:tabular-nums; }
.sv-nums span { display:block; margin-top:16px; font-size:34px; color:var(--mut); letter-spacing:-.02em; }

/* end */
.sv-eh { position:absolute; left:0; right:0; top:320px; text-align:center; font-weight:500 !important; font-size:104px; letter-spacing:-.055em; }
.sv-btn { position:absolute; left:0; right:0; top:540px; margin:0 auto; width:max-content; display:flex; align-items:center; gap:18px; padding:28px 48px; border-radius:999px; background:var(--fg); color:var(--bg); font-weight:600; font-size:40px; letter-spacing:-.025em; overflow:hidden; opacity:0; }
.sv-rip { position:absolute; left:62%; top:50%; width:70px; height:70px; margin:-35px 0 0 -35px; border-radius:50%; background:#fff; opacity:0; }
.sv-cursor { position:absolute; left:0; top:0; width:40px; height:40px; transform-origin:5px 3px; opacity:0; z-index:12; filter:drop-shadow(0 6px 10px rgba(0,0,0,.4)); }
.sv-logo { position:absolute; left:830px; top:320px; width:260px; height:auto; overflow:visible; opacity:0; }
.sv-word { position:absolute; left:0; right:0; top:510px; text-align:center; font-weight:600; font-size:66px; }
.sv-stage .ch { display:inline-block; width:.8em; text-align:center; } .sv-stage .sp { display:inline-block; width:.3em; }
.sv-url { position:absolute; left:0; right:0; top:620px; text-align:center; color:var(--acc2); text-transform:none; letter-spacing:.05em; font-size:24px; opacity:0; }

/* pen + chrome */
.sv-pen { position:absolute; left:0; top:0; z-index:11; pointer-events:none; overflow:visible; }
.sv-ink { fill:none; stroke:var(--acc); stroke-width:5; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:1; stroke-dashoffset:1; }
.sv-chrome { position:absolute; inset:0; z-index:10; pointer-events:none; font-family:'Geist Mono',ui-monospace,monospace; font-size:15px; letter-spacing:.14em; text-transform:uppercase; color:var(--mut); }
.sv-c-tl { position:absolute; left:60px; top:50px; font-weight:500; } .sv-c-tr { position:absolute; right:60px; top:50px; }
.sv-prog { position:absolute; left:60px; right:60px; bottom:40px; height:2px; background:var(--line); border-radius:2px; overflow:hidden; }
.sv-prog i { display:block; height:100%; background:var(--acc); transform-origin:0 50%; transform:scaleX(0); }

/* ---------- ASSESSMENT · case file ---------- */
.sv-sheet { position:absolute; left:120px; top:20px; width:640px; height:660px; background:var(--card); border-radius:10px; padding:44px 48px; box-shadow:0 1px 0 rgba(255,255,255,.7) inset, 0 40px 80px -40px rgba(23,20,15,.45), 0 0 0 1px var(--line); transform:rotate(-1.5deg); }
.sv-sheet > .sv-m { color:var(--acc); }
.sv-step { position:relative; display:flex; align-items:center; gap:22px; height:96px; border-bottom:1px dashed var(--line); font-size:30px; letter-spacing:-.02em; }
.sv-step b { font-family:'Geist Mono',monospace; font-weight:500; font-size:18px; color:var(--mut); }
.sv-step span { position:relative; z-index:1; }
.sv-hl { position:absolute; left:52px; right:20px; top:30px; height:38px; background:rgba(214,138,31,.32); border-radius:4px; transform-origin:0 50%; transform:scaleX(0); }
.sv-flag { position:absolute; right:-26px; padding:8px 14px; border-radius:6px; background:var(--acc); color:#fff; font-family:'Geist Mono',monospace; font-size:15px; letter-spacing:.1em; text-transform:uppercase; transform:rotate(4deg); opacity:0; }
.sv-flag-1 { top:262px; } .sv-flag-2 { top:358px; }
.sv-lens { position:absolute; left:360px; top:60px; width:190px; height:190px; border-radius:50%; border:6px solid var(--ink); background:radial-gradient(circle at 35% 30%, rgba(255,255,255,.55), rgba(255,255,255,.08) 60%); box-shadow:0 20px 40px -12px rgba(23,20,15,.45); opacity:0; }
.sv-lens i { position:absolute; right:-70px; bottom:-60px; width:110px; height:22px; border-radius:12px; background:var(--ink); transform:rotate(45deg); }
.sv-scale { position:absolute; left:150px; top:0; width:600px; height:200px; overflow:visible; }
.sv-scale line { stroke:var(--ink); stroke-width:6; stroke-linecap:round; } .sv-scale circle { fill:var(--acc); }
.sv-beam { transform-box:fill-box; transform-origin:50% 50%; }
.sv-opts { position:absolute; left:0; right:0; top:250px; display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.sv-opts-2 { top:140px; }
.sv-opt { position:relative; background:var(--card); border-radius:16px; padding:30px 28px; min-height:300px; box-shadow:0 0 0 1px var(--line), 0 30px 60px -36px rgba(23,20,15,.5); overflow:visible; }
.sv-opt > .sv-m { color:var(--acc); }
.sv-opt strong { display:block; margin-top:20px; font-weight:600; font-size:36px; line-height:1.1; letter-spacing:-.035em; }
.sv-opt p { margin-top:14px; font-size:24px; color:var(--mut); line-height:1.3; }
.sv-opt.win { box-shadow:0 0 0 2px var(--acc2), 0 40px 80px -36px rgba(0,168,157,.45); }
.sv-strike { position:absolute; left:22px; right:22px; top:50%; height:4px; border-radius:4px; background:var(--mut); transform-origin:0 50%; transform:scaleX(0); }
.sv-stamp { position:absolute; left:28px; bottom:30px; padding:10px 16px; border:4px solid var(--acc2); border-radius:8px; color:var(--acc2); font-family:'Geist Mono',monospace; font-weight:500; font-size:20px; letter-spacing:.14em; text-transform:uppercase; opacity:0; }
.sv-days { position:absolute; left:0; right:0; top:30px; }
.sv-days > div { display:flex; gap:16px; margin-top:22px; }
.sv-days b { position:relative; width:120px; height:120px; display:grid; place-items:center; border-radius:18px; background:var(--card); box-shadow:0 0 0 1px var(--line); font-family:'Geist Mono',monospace; font-weight:500; font-size:30px; color:var(--fg); }
.sv-days b .sv-ck { position:absolute; right:10px; bottom:10px; color:var(--bg); }
.sv-month { position:absolute; left:0; right:0; top:330px; background:var(--card); border-radius:18px; padding:34px 36px 40px; box-shadow:0 0 0 1px var(--line), 0 30px 60px -36px rgba(23,20,15,.45); }
.sv-weeks { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:24px; }
.sv-weeks i { display:block; height:14px; border-radius:14px; background:linear-gradient(90deg,var(--acc),#E9B45E); transform-origin:0 50%; transform:scaleX(0); }
.sv-weeks em { display:block; margin-top:12px; font-style:normal; font-family:'Geist Mono',monospace; font-size:16px; letter-spacing:.1em; color:var(--mut); }
.sv-decide { margin-top:28px; font-family:'Instrument Serif',serif; font-style:italic; font-size:40px; color:var(--acc2); opacity:0; }

/* ---------- LEAD GEN · night radar ---------- */
.sv-map { position:absolute; left:0; top:20px; width:900px; height:640px; border-radius:24px; overflow:hidden; background:radial-gradient(circle at 50% 50%, #0E2232, #08131F 70%); box-shadow:0 0 0 1px rgba(43,212,255,.18), 0 50px 100px -50px rgba(0,0,0,.9); }
.sv-streets { position:absolute; inset:0; width:100%; height:100%; } .sv-streets path { fill:none; stroke:rgba(120,180,220,.6); stroke-width:1.4; opacity:.1; }
.sv-sweep { position:absolute; left:50%; top:50%; width:1100px; height:1100px; margin:-550px 0 0 -550px; border-radius:50%; background:conic-gradient(from 0deg, rgba(43,212,255,.38), rgba(43,212,255,0) 22%, transparent 100%); opacity:0; }
.sv-ring { position:absolute; left:50%; top:50%; width:600px; height:600px; margin:-300px 0 0 -300px; border-radius:50%; border:2px solid rgba(43,212,255,.5); opacity:0; }
.sv-pin { position:absolute; width:22px; height:22px; margin:-11px 0 0 -11px; border-radius:50%; opacity:0; }
.sv-pin::after { content:''; position:absolute; inset:-10px; border-radius:50%; border:2px solid currentColor; opacity:.35; }
.sv-pin.s0, .sv-legend .s0 { background:#2BD4FF; color:#2BD4FF; } .sv-pin.s1, .sv-legend .s1 { background:#FF8A5B; color:#FF8A5B; } .sv-pin.s2, .sv-legend .s2 { background:#8FA8FF; color:#8FA8FF; }
.sv-legend { position:absolute; left:24px; bottom:22px; display:flex; gap:20px; font-family:'Geist Mono',monospace; font-size:16px; letter-spacing:.08em; color:var(--fg); background:rgba(7,16,27,.7); padding:12px 18px; border-radius:12px; }
.sv-legend span { display:inline-flex; align-items:center; gap:8px; } .sv-legend i { width:10px; height:10px; border-radius:50%; }
.sv-list { position:absolute; left:0; right:0; top:60px; display:flex; flex-direction:column; gap:16px; }
.sv-lead { display:grid; grid-template-columns:14px 1fr 280px 100px; align-items:center; gap:22px; padding:24px 28px; border-radius:18px; background:var(--card); box-shadow:0 0 0 1px var(--line); }
.sv-lead > b { width:12px; height:12px; border-radius:50%; background:var(--acc); box-shadow:0 0 12px var(--acc); }
.sv-lead strong { display:block; font-weight:600; font-size:30px; letter-spacing:-.03em; } .sv-lead div > span { display:block; margin-top:4px; font-size:20px; color:var(--mut); }
.sv-enr { display:flex; gap:8px; } .sv-enr i { font-style:normal; font-family:'Geist Mono',monospace; font-size:14px; letter-spacing:.06em; color:var(--fg); padding:6px 10px; border-radius:8px; background:rgba(43,212,255,.1); border:1px solid rgba(43,212,255,.3); }
.sv-score { justify-self:end; font-family:'Geist Mono',monospace; font-weight:500; font-size:30px; color:var(--acc); padding:8px 14px; border-radius:10px; min-width:80px; text-align:center; font-variant-numeric:tabular-nums; }
.sv-mail { position:absolute; left:0; right:0; top:60px; background:var(--card); border-radius:22px; padding:34px 40px 40px; box-shadow:0 0 0 1px var(--line), 0 50px 100px -50px rgba(0,0,0,.9); min-height:520px; }
.sv-mhead { display:flex; flex-direction:column; gap:12px; padding-bottom:22px; border-bottom:1px solid var(--line); font-size:22px; color:var(--mut); }
.sv-mhead b { display:inline-block; width:100px; font-weight:500; color:var(--fg); }
.sv-type { margin-top:26px; font-size:32px; line-height:1.45; letter-spacing:-.015em; color:var(--fg); min-height:190px; }
.sv-chip-ai { position:absolute; left:40px; bottom:34px; font-family:'Geist Mono',monospace; font-size:16px; letter-spacing:.08em; color:var(--acc); padding:10px 16px; border-radius:10px; border:1px solid rgba(43,212,255,.35); opacity:0; }
.sv-gate { position:absolute; left:0; right:0; top:40px; background:var(--card); border-radius:22px; padding:34px 40px 40px; box-shadow:0 0 0 1px var(--line); }
.sv-gate > .sv-m { color:var(--acc); } .sv-gate strong { display:block; margin:16px 0 8px; font-weight:600; font-size:36px; letter-spacing:-.03em; }
.sv-btns { display:flex; gap:16px; margin-top:30px; } .sv-btns span { padding:18px 28px; border-radius:14px; font-weight:600; font-size:24px; }
.sv-b2 { box-shadow:inset 0 0 0 1.5px var(--line); color:var(--mut); } .sv-b1 { background:var(--acc); color:var(--ink); }
.sv-sent { position:absolute; left:0; right:0; top:520px; display:flex; gap:14px; }
.sv-sent span { display:inline-flex; align-items:center; gap:10px; padding:16px 22px; border-radius:14px; background:var(--card); box-shadow:0 0 0 1px var(--line); font-size:24px; font-weight:500; opacity:0; }
.sv-ok { color:var(--acc2); box-shadow:0 0 0 1.5px var(--acc2) !important; }

/* ---------- PINTEREST · paper board ---------- */
.sv-hero-pin { position:absolute; left:290px; top:20px; width:320px; background:var(--card); border-radius:22px; padding:18px 18px 26px; box-shadow:0 40px 80px -40px rgba(31,42,39,.45), 0 0 0 1px var(--line); }
.sv-pimg { height:330px; border-radius:14px; background:linear-gradient(160deg,#E7B9A6,#E07A5F 60%,#2E4A42); position:relative; overflow:hidden; }
.sv-pimg i { position:absolute; left:30%; top:22%; width:40%; aspect-ratio:1; border-radius:50%; background:rgba(255,255,255,.35); }
.sv-hero-pin strong { display:block; margin-top:18px; font-weight:600; font-size:26px; letter-spacing:-.03em; }
.sv-sw { display:flex; gap:8px; margin-top:16px; } .sv-sw i { width:30px; height:30px; border-radius:8px; }
.sv-pgrid { position:absolute; left:0; right:0; top:20px; height:600px; display:grid; grid-template-columns:repeat(6,1fr); gap:14px; align-content:start; }
.sv-pgrid i { display:block; border-radius:14px; opacity:0; box-shadow:0 12px 24px -16px rgba(31,42,39,.5); }
.sv-count { position:absolute; left:0; right:0; top:650px; text-align:center; color:var(--acc); }
.sv-cal { position:absolute; left:40px; right:40px; top:30px; background:var(--card); border-radius:22px; padding:30px 32px 34px; box-shadow:0 0 0 1px var(--line), 0 40px 80px -40px rgba(31,42,39,.4); }
.sv-calh { display:flex; justify-content:space-between; } .sv-calh .sv-m:last-child { color:var(--acc); }
.sv-calg { display:grid; grid-template-columns:repeat(7,1fr); gap:10px; margin-top:22px; }
.sv-calg em { font-style:normal; text-align:center; font-family:'Geist Mono',monospace; font-size:15px; color:var(--mut); }
.sv-calg span { position:relative; height:88px; border-radius:12px; border:1.5px solid var(--line); }
.sv-calg small { position:absolute; left:8px; top:6px; font-family:'Geist Mono',monospace; font-size:13px; color:var(--mut); }
.sv-calg span i { position:absolute; left:50%; top:50%; width:34px; height:46px; margin:-18px 0 0 -17px; border-radius:7px; opacity:0; }
.sv-stack { position:relative; display:flex; align-items:center; margin-top:160px; }
.sv-node { flex:none; width:250px; background:var(--card); border-radius:20px; padding:28px 26px 30px; box-shadow:0 0 0 1px var(--line), 0 30px 60px -36px rgba(31,42,39,.45); }
.sv-node .sv-m { color:var(--acc); } .sv-node strong { display:block; margin:14px 0 8px; font-weight:600; font-size:30px; letter-spacing:-.03em; } .sv-node p { font-size:22px; color:var(--mut); }
.sv-wire { flex:1; height:3px; background:var(--acc2); transform-origin:0 50%; transform:scaleX(0); }
.sv-token { position:absolute; left:0; right:0; top:50%; height:0; pointer-events:none; }
.sv-token::before { content:''; position:absolute; left:0; top:-24px; width:34px; height:48px; border-radius:8px; background:var(--acc); box-shadow:0 10px 20px -8px rgba(224,122,95,.7); }
.sv-zero { position:absolute; left:0; right:0; top:540px; text-align:center; }
.sv-zero strong { font-weight:600; font-size:110px; letter-spacing:-.06em; color:var(--acc2); } .sv-zero span { display:block; font-size:28px; color:var(--mut); }
.sv-chart { position:absolute; left:0; right:0; top:20px; background:var(--card); border-radius:22px; padding:34px 40px 30px; box-shadow:0 0 0 1px var(--line), 0 40px 80px -40px rgba(31,42,39,.4); }
.sv-k7 { display:block; margin-top:6px; font-weight:600; font-size:150px; line-height:1; letter-spacing:-.06em; color:var(--acc); font-variant-numeric:tabular-nums; }
.sv-chart p { margin-top:8px; font-size:28px; color:var(--mut); }
.sv-line { display:block; width:100%; height:240px; margin-top:20px; overflow:visible; }
.sv-curve { fill:none; stroke:var(--acc); stroke-width:6; stroke-linecap:round; stroke-dasharray:1; stroke-dashoffset:1; }
.sv-area { fill:rgba(224,122,95,.14); opacity:0; }
.sv-rec { margin-top:16px; font-size:15px; }

/* ---------- 9:16 ---------- */
.sv-v .sv-tl0 { top:700px; padding:0 60px; line-height:1.6; } .sv-v .sv-th { top:760px; font-size:118px; }
.sv-v .sv-txt { left:80px; top:240px; width:920px; }
.sv-v .sv-h { font-size:80px; } .sv-v .sv-s { font-size:46px; }
.sv-v .sv-vis { left:90px; top:820px; }
.sv-v .sv-sh { top:760px; font-size:88px; padding:0 60px; }
.sv-v .sv-proof .sv-m { top:600px; } .sv-v .sv-nums { top:680px; flex-direction:column; gap:80px; }
.sv-v .sv-eh { top:700px; font-size:96px; } .sv-v .sv-btn { top:920px; }
.sv-v .sv-logo { left:410px; top:700px; } .sv-v .sv-word { top:890px; } .sv-v .sv-url { top:1000px; font-size:22px; }
.sv-v .sv-c-tl, .sv-v .sv-c-tr { top:110px; } .sv-v .sv-c-tl { left:50px; } .sv-v .sv-c-tr { right:50px; } .sv-v .sv-prog { left:50px; right:50px; }

/* render mode */
.sv-render, .sv-render body { margin:0; background:#000; overflow:hidden; }
.sv-render .svfilm { width:1920px; height:1080px; aspect-ratio:auto; }
.sv-render .svfilm.v { width:1080px; height:1920px; }

/* ============ embed on the service page ============ */
.svf-frame { position:relative; border-radius:18px; overflow:hidden; background:#000; border:1px solid var(--border); box-shadow:0 50px 120px -60px rgba(0,153,214,.45); }
.svf-frame:fullscreen { border-radius:0; display:flex; flex-direction:column; justify-content:center; }
.svf-frame:fullscreen .svfilm { width:min(100vw, calc((100vh - 60px) * 16 / 9)); margin:0 auto; }
.svf-poster { position:absolute; left:0; top:0; width:100%; height:calc(100% - 60px); object-fit:cover; z-index:1; }
.svfilm.is-ready ~ .svf-poster { display:none; }
.svf-start { position:absolute; inset:0 0 60px 0; z-index:5; display:grid; place-items:center; border:0; cursor:pointer; background:radial-gradient(ellipse at center, rgba(17,17,16,.2), rgba(17,17,16,.55)); font:inherit; color:var(--text); }
.svf-start[hidden] { display:none; }
.svf-start-in { display:flex; align-items:center; gap:1rem; padding:.7rem 1.4rem .7rem .7rem; border-radius:999px; background:rgba(245,245,240,.95); color:#111110; box-shadow:0 24px 50px -20px rgba(0,0,0,.7); }
.svf-start-btn { width:52px; height:52px; border-radius:50%; background:var(--grad); display:grid; place-items:center; } .svf-start-btn svg { width:18px; height:18px; margin-left:3px; fill:#fff; }
.svf-start-in b { display:block; font-weight:600; font-size:1rem; text-align:left; } .svf-start-in span span { display:block; font-family:var(--f-mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:#6B6B68; text-align:left; }
.svf-bar { display:flex; align-items:center; gap:.9rem; height:60px; padding:0 1rem; background:#141413; border-top:1px solid var(--border); font-family:var(--f-mono); font-size:.76rem; color:var(--text-muted); position:relative; z-index:6; }
.svf-ib { flex:none; display:inline-grid; place-items:center; width:38px; height:38px; border-radius:9px; border:0; background:transparent; color:var(--text); cursor:pointer; } .svf-ib:hover { background:rgba(255,255,255,.06); } .svf-ib svg { width:18px; height:18px; fill:currentColor; }
.svf-ib:focus-visible, .svf-scrub:focus-visible { outline:2px solid var(--teal); outline-offset:2px; }
#svPlay .i-pause, #svPlay[data-state="playing"] .i-play { display:none; } #svPlay[data-state="playing"] .i-pause { display:block; }
#svSound .i-off, #svSound[data-on="0"] .i-on { display:none; } #svSound[data-on="0"] .i-off { display:block; }
.svf-time { flex:none; min-width:9ch; color:var(--text); font-variant-numeric:tabular-nums; }
.svf-scrub { --p:0%; flex:1; min-width:60px; -webkit-appearance:none; appearance:none; height:4px; border-radius:4px; margin:0; cursor:pointer; background:linear-gradient(90deg,var(--teal),var(--blue)) 0/var(--p) 100% no-repeat, rgba(255,255,255,.12); }
.svf-scrub::-webkit-slider-thumb { -webkit-appearance:none; width:14px; height:14px; border-radius:50%; background:#fff; } .svf-scrub::-moz-range-thumb { width:14px; height:14px; border:0; border-radius:50%; background:#fff; }
.svf-dl { flex:none; display:inline-flex; align-items:center; gap:.45rem; height:36px; padding:0 .9rem; border-radius:999px; background:var(--grad); color:#fff; text-decoration:none; font-weight:600; font-size:.78rem; font-family:var(--f-sans); } .svf-dl:hover { color:#fff; } .svf-dl svg { width:15px; height:15px; fill:currentColor; }
.svf-dl--ghost { background:transparent; border:1px solid var(--border); color:var(--text); }
@media (max-width: 560px) { .svf-dl span, .svf-start-in span span { display:none; } .svf-bar { gap:.4rem; padding:0 .5rem; } }