/* ==================================================================
   Services film "Twelve ways in." · stage + embed on /services.
   Ink #111110 · surface #1A1A18 · teal to blue accent · paper type.
   ================================================================== */
:root { --sf-ink:#111110; --sf-surf:#1A1A18; --sf-card:#1E1E1C; --sf-paper:#F5F5F0; --sf-body:#A3A39F; --sf-muted:#6B6B68; --sf-line:rgba(245,245,240,.08);
  --sf-teal:#00A89D; --sf-blue:#0099D6; --sf-sans:'Geist','Inter',system-ui,sans-serif; --sf-mono:'Geist Mono','JetBrains Mono',ui-monospace,monospace; --sf-serif:'Instrument Serif','Libre Baskerville',Georgia,serif; }

.sfilm { position:relative; width:100%; aspect-ratio:16/9; overflow:hidden; background:var(--sf-ink); cursor:pointer; isolation:isolate; contain:layout paint; }
.sf-stage { position:absolute; left:0; top:0; width:1920px; height:1080px; transform-origin:0 0; overflow:hidden; font-family:var(--sf-sans); color:var(--sf-paper); -webkit-font-smoothing:antialiased; text-rendering:geometricPrecision; }
.sf-stage * { box-sizing:border-box; }
.sf-stage :is(h1,h2,h3,h4,h5) { font-family:var(--sf-sans); color:var(--sf-paper); margin:0; font-style:normal; }
.sf-stage p { margin:0; }
.sf-bg { position:absolute; inset:0; background:radial-gradient(1100px 700px at 78% 30%, rgba(0,153,214,.10), transparent 60%), radial-gradient(900px 700px at 10% 100%, rgba(0,168,157,.08), transparent 60%), var(--sf-ink); }
.sf-bg::after { content:''; position:absolute; inset:0; opacity:.05; mix-blend-mode:screen; 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"); }
.sf-stage .w { display:inline-block; will-change:transform, filter, opacity; }
.sf-mono, .sf-m { font-family:var(--sf-mono); font-size:17px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--sf-muted); }
.sf-top { position:absolute; left:0; right:0; top:120px; text-align:center; }

/* grid */
.sf-grid { position:absolute; inset:0; transform-origin:0 0; will-change:transform; }
.sf-tile { position:absolute; left:0; top:0; width:400px; height:225px; overflow:hidden; background:var(--sf-surf); border:1px solid rgba(245,245,240,.08); transform-origin:center; }
.sf-frag { position:absolute; width:1600px; height:675px; pointer-events:none; }
.sf-fx { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; padding-left:120px; font-weight:500; font-size:128px; line-height:1.04; letter-spacing:-.05em; color:var(--sf-paper); }
.sf-fx { display:block; padding:205px 0 0 150px; }
.sf-ser { font-family:var(--sf-serif); font-style:italic; font-weight:400; letter-spacing:-.02em; color:var(--sf-teal); }
.sf-frag-b .sf-fx { font-size:110px; padding-top:215px; }
.sf-frag-b { opacity:0; }
.sf-tc { position:absolute; inset:0; padding:26px 28px; display:flex; flex-direction:column; justify-content:space-between; opacity:0; }
.sf-tn { font-family:var(--sf-mono); font-size:18px; letter-spacing:.14em; color:var(--sf-teal); }
.sf-tc strong { font-weight:600; font-size:27px; line-height:1.15; letter-spacing:-.03em; max-width:300px; }
.sf-tc .sf-ck { position:absolute; right:24px; top:22px; width:30px; height:30px; }

/* scenes */
.sf-sc { position:absolute; inset:0; display:none; background:radial-gradient(1000px 700px at 75% 45%, rgba(0,153,214,.08), transparent 65%), var(--sf-ink); transform-origin:center; }
.sf-col { position:absolute; left:140px; top:250px; width:640px; }
.sf-kick em { font-style:normal; color:#0B1211; background:var(--sf-teal); padding:3px 8px; border-radius:5px; margin-left:10px; letter-spacing:.12em; }
.sf-name { margin:30px 0 26px !important; font-weight:600 !important; font-size:76px; line-height:1.02; letter-spacing:-.05em; }
.sf-line { font-family:var(--sf-serif); font-style:italic; font-size:50px; line-height:1.12; letter-spacing:-.01em; color:rgba(245,245,240,.82); }
.sf-chips { display:flex; flex-wrap:wrap; gap:10px; margin-top:36px; }
.sf-chip { display:inline-block; font-family:var(--sf-mono); font-size:17px; letter-spacing:.06em; color:var(--sf-body); border:1px solid rgba(245,245,240,.14); border-radius:999px; padding:9px 16px; }
.sf-url { position:absolute; left:0; top:640px; letter-spacing:.06em; text-transform:none; color:var(--sf-teal); }
.sf-dg { position:absolute; left:900px; top:170px; width:900px; height:740px; }

/* diagram primitives */
.sf-b { position:absolute; }
.sf-card { background:var(--sf-card); border:1px solid var(--sf-line); border-radius:18px; padding:22px 24px; box-shadow:0 30px 60px -36px rgba(0,0,0,.8); }
.sf-card strong, .sf-b strong { display:block; font-weight:600; font-size:28px; letter-spacing:-.03em; line-height:1.15; margin-top:8px; color:var(--sf-paper); }
.sf-m { font-size:14px; letter-spacing:.14em; }
.sf-svg { position:absolute; overflow:visible; }
.sf-ln { fill:none; stroke:var(--sf-teal); stroke-width:2.2; stroke-dasharray:1; stroke-dashoffset:1; opacity:.8; }
.sf-ck { width:26px; height:26px; }
.sf-ck path { fill:none; stroke:var(--sf-teal); stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:1; stroke-dashoffset:1; }
.sf-pill { display:inline-flex; align-items:center; gap:10px; font-weight:500; font-size:20px; letter-spacing:-.01em; color:var(--sf-paper); background:rgba(245,245,240,.06); border:1px solid rgba(245,245,240,.12); border-radius:999px; padding:10px 18px; }
.sf-tl { display:block; height:9px; border-radius:9px; background:rgba(245,245,240,.12); margin-top:14px; }

/* 01 */
.sf-days { display:flex; align-items:center; gap:24px; }
.sf-dayrow { display:flex; gap:10px; }
.sf-dayrow b { width:46px; height:46px; display:grid; place-items:center; border-radius:12px; border:1px solid rgba(245,245,240,.14); font-family:var(--sf-mono); font-size:17px; font-weight:500; color:var(--sf-body); }
.sf-a1-o .sf-rec { position:absolute; right:20px; top:20px; font-size:15px; padding:6px 12px; background:rgba(0,168,157,.16); border-color:rgba(0,168,157,.5); color:#6FE0D6; }
.sf-a1-o .sf-ck { position:absolute; right:26px; bottom:22px; }
.sf-plan { display:flex; flex-direction:column; gap:14px; }
.sf-weeks { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.sf-weeks span { display:block; }
.sf-weeks i { display:block; height:10px; border-radius:10px; background:linear-gradient(90deg,var(--sf-teal),var(--sf-blue)); transform-origin:0 50%; transform:scaleX(0); }
.sf-weeks em { display:block; margin-top:10px; font-style:normal; font-family:var(--sf-mono); font-size:14px; color:var(--sf-muted); letter-spacing:.1em; }
/* 02 */
.sf-matrix { border:1px solid var(--sf-line); border-radius:18px; background:var(--sf-surf); overflow:hidden; }
.sf-matrix::before, .sf-matrix::after { content:''; position:absolute; background:var(--sf-line); }
.sf-matrix::before { left:50%; top:0; bottom:0; width:1px; } .sf-matrix::after { top:50%; left:0; right:0; height:1px; }
.sf-q { position:absolute; left:0; top:0; width:50%; height:50%; background:rgba(0,168,157,.12); opacity:0; }
.sf-ax { position:absolute; font-family:var(--sf-mono); font-size:13px; letter-spacing:.16em; color:var(--sf-muted); }
.sf-ax-y { left:14px; top:14px; } .sf-ax-x { right:14px; bottom:12px; }
.sf-dot { position:absolute; left:0; top:0; width:22px; height:22px; margin:-11px 0 0 -11px; border-radius:50%; background:rgba(245,245,240,.35); }
.sf-dot.hot { background:var(--sf-teal); box-shadow:0 0 0 8px rgba(0,168,157,.15); }
.sf-phase { border:1px solid var(--sf-line); border-radius:16px; padding:18px 14px; display:flex; flex-direction:column; gap:12px; background:var(--sf-surf); }
.sf-phase .sf-m { font-size:12px; color:var(--sf-teal); }
.sf-phase .sf-chip { font-size:14px; padding:8px 10px; text-align:center; }
.sf-road-l { position:absolute; left:0; right:0; top:22px; height:2px; background:linear-gradient(90deg,var(--sf-teal),var(--sf-blue)); transform-origin:0 50%; transform:scaleX(0); }
.sf-road span { position:absolute; top:0; font-family:var(--sf-mono); font-size:16px; letter-spacing:.1em; color:var(--sf-body); padding-top:52px; }
.sf-road span b { position:absolute; left:0; top:14px; width:18px; height:18px; border-radius:50%; background:var(--sf-ink); border:2px solid var(--sf-teal); }
/* 03 */
.sf-srcs { display:flex; gap:12px; }
.sf-list { padding:10px 24px; }
.sf-lead { display:grid; grid-template-columns:14px 1fr 200px 90px; align-items:center; gap:18px; height:90px; border-bottom:1px solid var(--sf-line); }
.sf-lead:last-child { border-bottom:0; }
.sf-lead > b { width:12px; height:12px; border-radius:50%; background:var(--sf-teal); }
.sf-lead strong { margin:0; font-size:26px; }
.sf-score { justify-self:end; font-family:var(--sf-mono); font-size:22px; font-weight:500; color:#6FE0D6; border-radius:10px; padding:6px 12px; min-width:64px; text-align:center; }
.sf-type { margin-top:14px; font-size:27px; line-height:1.4; color:var(--sf-paper); letter-spacing:-.01em; min-height:76px; }
.sf-rev { position:absolute; right:22px; bottom:20px; font-size:16px; }
/* 04 */
.sf-app { display:flex; flex-direction:column; justify-content:center; padding-left:96px; }
.sf-ring { position:absolute; left:22px; top:50%; width:56px; height:56px; margin-top:-28px; transform:rotate(-90deg); }
.sf-ring circle { fill:none; stroke-width:4; } .sf-ring .bg { stroke:rgba(245,245,240,.1); } .sf-ring .fg { stroke:var(--sf-teal); stroke-dasharray:1; stroke-dashoffset:1; stroke-linecap:round; }
.sf-app strong { margin:0 0 6px; } .sf-app .sf-m { opacity:0; color:var(--sf-teal); }
.sf-app .sf-ck { position:absolute; left:37px; top:50%; margin-top:-13px; }
.sf-skills > div, .sf-team > div { display:flex; flex-wrap:wrap; gap:12px; margin-top:16px; }
.sf-team b { position:relative; width:72px; height:72px; border-radius:50%; display:grid; place-items:center; background:linear-gradient(135deg,#243231,#1A2A33); border:1px solid var(--sf-line); font-family:var(--sf-mono); font-size:18px; font-weight:500; color:var(--sf-paper); }
.sf-team b i { position:absolute; right:2px; bottom:2px; width:16px; height:16px; border-radius:50%; background:#22D390; border:3px solid var(--sf-ink); opacity:0; }
/* 05 */
.sf-node { text-align:center; padding:22px 10px; } .sf-node .sf-m { color:var(--sf-teal); }
.sf-packets { position:absolute; left:0; top:204px; width:900px; height:12px; }
.sf-packets i { position:absolute; left:0; top:0; width:12px; height:12px; border-radius:50%; background:#6FE0D6; box-shadow:0 0 16px 4px rgba(0,168,157,.6); }
.sf-log { padding:18px 26px; }
.sf-logr { display:flex; align-items:center; gap:16px; height:48px; font-size:24px; letter-spacing:-.01em; color:var(--sf-paper); }
.sf-prod { font-size:22px; background:rgba(0,168,157,.14); border-color:rgba(0,168,157,.45); }
/* 06 */
.sf-loop { fill:none; stroke:rgba(0,168,157,.55); stroke-width:2; stroke-dasharray:1; stroke-dashoffset:1; transform-box:fill-box; transform-origin:center; }
.sf-spoke { opacity:.5; }
.sf-orch { border-radius:50%; background:radial-gradient(circle,#173A38,#122624); border:1px solid rgba(0,168,157,.5); display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; box-shadow:0 0 0 14px rgba(0,168,157,.08); }
.sf-orch strong { font-size:24px; }
.sf-agent { padding:16px 20px; } .sf-agent strong { font-size:24px; margin-top:4px; }
.sf-mem { display:flex; gap:5px; margin-top:10px; } .sf-mem i { display:block; height:5px; flex:1; border-radius:5px; background:var(--sf-teal); transform-origin:0 50%; transform:scaleX(0); }
.sf-clock { border:1px solid var(--sf-line); border-radius:14px; padding:14px 18px; background:var(--sf-surf); } .sf-clock strong { font-size:22px; }
/* 07 */
.sf-tool { text-align:center; padding:18px 10px; } .sf-tool strong { margin:0 0 6px; font-size:24px; }
.sf-ailayer { border-radius:16px; padding:14px 24px; display:flex; align-items:center; justify-content:space-between; background:linear-gradient(90deg,rgba(0,168,157,.22),rgba(0,153,214,.22)); border:1px solid rgba(0,168,157,.55); }
.sf-ailayer strong { margin:0; font-size:24px; } .sf-ailayer .sf-m { color:#6FE0D6; }
.sf-flow strong { font-size:25px; }
.sf-dia i { position:absolute; left:50%; top:50%; width:110px; height:110px; margin:-55px 0 0 -55px; transform:rotate(45deg); border:1.5px solid var(--sf-teal); border-radius:14px; background:rgba(0,168,157,.1); }
.sf-dia strong { position:absolute; left:0; right:0; top:50%; margin-top:-16px; text-align:center; font-size:22px; }
.sf-note { display:flex; align-items:center; justify-content:center; }
/* 08 */
.sf-voice { display:flex; flex-direction:column; justify-content:space-between; }
.sf-wave { display:flex; align-items:center; gap:6px; height:300px; }
.sf-wave i { flex:1; height:100%; border-radius:6px; background:linear-gradient(180deg,var(--sf-teal),var(--sf-blue)); transform:scaleY(.2); }
.sf-post { padding-top:20px; } .sf-post strong { margin:0; font-size:25px; }
.sf-lang { position:absolute; right:22px; top:20px; font-family:var(--sf-mono); font-size:15px; letter-spacing:.12em; color:#0B1211; background:var(--sf-teal); border-radius:6px; padding:4px 9px; }
.sf-ob { position:absolute; right:22px; bottom:16px; display:flex; align-items:center; gap:6px; font-family:var(--sf-mono); font-size:14px; letter-spacing:.1em; color:var(--sf-teal); text-transform:uppercase; opacity:0; }
.sf-post .sf-tl { width:70% !important; }
/* 09 */
.sf-pins { position:absolute; left:0; top:0; width:520px; height:740px; overflow:hidden; display:flex; gap:13px; -webkit-mask-image:linear-gradient(180deg,transparent,#000 14%,#000 86%,transparent); mask-image:linear-gradient(180deg,transparent,#000 14%,#000 86%,transparent); }
.sf-pcol { flex:1; display:flex; flex-direction:column; gap:13px; }
.sf-pcol i { display:block; border-radius:14px; }
.sf-big .sf-k { font-size:150px; line-height:1; letter-spacing:-.06em; margin:14px 0 10px; background:linear-gradient(135deg,#6FE0D6,var(--sf-blue)); -webkit-background-clip:text; background-clip:text; color:transparent; font-variant-numeric:tabular-nums; }
.sf-big p { font-size:24px; line-height:1.35; color:var(--sf-body); margin-bottom:16px; }
.sf-zero .sf-pill { background:rgba(0,168,157,.14); border-color:rgba(0,168,157,.45); }
.sf-toast { display:flex; align-items:center; gap:14px; padding:0 22px; border-radius:16px; background:var(--sf-paper); color:var(--sf-ink); font-weight:600; font-size:22px; }
.sf-toast i { width:12px; height:12px; border-radius:50%; background:var(--sf-teal); box-shadow:0 0 0 5px rgba(0,168,157,.2); }
/* 10 */
.sf-funnel { fill:rgba(0,168,157,.08); stroke:rgba(0,168,157,.5); stroke-width:1.5; }
.sf-thin { opacity:.9; }
.sf-doc h5 { font-weight:600; font-size:24px; letter-spacing:-.02em; margin-top:30px !important; color:var(--sf-paper); }
.sf-stamp { position:absolute; left:24px; right:24px; bottom:22px; text-align:center; font-family:var(--sf-mono); font-size:14px; letter-spacing:.1em; text-transform:uppercase; color:var(--sf-teal); border:1.5px dashed rgba(0,168,157,.6); border-radius:10px; padding:12px; }
/* 11 */
.sf-browser, .sf-phone { background:#F3F1EC; border-radius:18px; overflow:hidden; box-shadow:0 40px 80px -40px rgba(0,0,0,.9); }
.sf-phone { border-radius:32px; border:8px solid #2A2A27; }
.sf-bbar { display:flex; gap:7px; padding:12px 16px; background:#E7E3DB; } .sf-bbar i { width:11px; height:11px; border-radius:50%; background:#C9C2B2; }
.sf-site { padding:20px; display:flex; flex-direction:column; gap:16px; height:100%; }
.sf-hero { position:relative; border-radius:12px; height:200px; padding:22px; background:rgba(0,168,157,.08); }
.sf-phone .sf-hero { height:170px; padding:14px; }
.sf-hero strong { margin:0; font-size:34px; color:#0E0F0F; letter-spacing:-.04em; opacity:0; }
.sf-phone .sf-hero strong { font-size:22px; }
.sf-hero span { position:absolute; left:22px; bottom:22px; width:140px; height:34px; border-radius:999px; background:#0E0F0F; opacity:.85; }
.sf-cols { display:flex; gap:14px; flex:1; } .sf-cols i { flex:1; border-radius:10px; background:#DDD8CF; max-height:120px; }
.sf-phone .sf-cols { flex-direction:column; }
.sf-swatch { display:flex; gap:12px; } .sf-swatch i { width:56px; height:56px; border-radius:14px; border:1px solid var(--sf-line); }
.sf-b.sf-chips { margin:0; }
/* 12 */
.sf-step .sf-m { color:var(--sf-teal); }
.sf-dial { display:flex; flex-direction:column; align-items:center; justify-content:space-between; text-align:center; }
.sf-dialsvg { width:220px; margin-top:30px; overflow:visible; } .sf-dialsvg path { fill:none; stroke-width:10; stroke-linecap:round; } .sf-dialsvg .bg { stroke:rgba(245,245,240,.1); } .sf-dialsvg .fg { stroke:var(--sf-teal); stroke-dasharray:1; stroke-dashoffset:1; }
.sf-needle { position:absolute; left:50%; top:200px; width:4px; height:84px; margin-left:-2px; border-radius:4px; background:var(--sf-paper); transform-origin:50% 100%; transform:rotate(-80deg); }
.sf-out { display:flex; flex-direction:column; }

/* close */
.sf-end { position:absolute; inset:0; display:none; }
.sf-btn { position:absolute; left:0; right:0; top:500px; margin:0 auto; width:max-content; display:flex; align-items:center; gap:18px; padding:28px 48px; border-radius:999px; background:var(--sf-paper); color:var(--sf-ink); font-weight:600; font-size:40px; letter-spacing:-.025em; overflow:hidden; opacity:0; }
.sf-rip { position:absolute; left:62%; top:50%; width:70px; height:70px; margin:-35px 0 0 -35px; border-radius:50%; background:#fff; opacity:0; }
.sf-cursor { position:absolute; left:0; top:0; width:40px; height:40px; transform-origin:5px 3px; opacity:0; filter:drop-shadow(0 6px 10px rgba(0,0,0,.5)); }
.sf-logo, .sf-logo2 { position:absolute; left:820px; top:330px; width:280px; height:auto; overflow:visible; opacity:0; }
.sf-logo path, .sf-logo2 path { stroke:none; fill-opacity:1; }
.sf-word { position:absolute; left:0; right:0; top:530px; text-align:center; font-weight:600; font-size:66px; }
.sf-stage .ch { display:inline-block; width:.8em; text-align:center; } .sf-stage .sp { display:inline-block; width:.3em; }
.sf-endurl { position:absolute; left:0; right:0; top:650px; text-align:center; color:var(--sf-teal); text-transform:none; letter-spacing:.06em; font-size:24px; opacity:0; }
.sf-cliptag { position:absolute; inset:0; z-index:20; background:var(--sf-ink); opacity:0; }
.sfilm:not(.is-clip) .sf-cliptag { display:none; }
.sf-logo2 { top:300px; }
.sf-ct-n { position:absolute; left:0; right:0; top:520px; text-align:center; font-weight:600; font-size:64px; letter-spacing:-.045em; }
.sf-ct-u { position:absolute; left:0; right:0; top:620px; text-align:center; color:var(--sf-teal); text-transform:none; letter-spacing:.06em; font-size:24px; }

/* chrome */
.sf-chrome { position:absolute; inset:0; z-index:15; pointer-events:none; font-family:var(--sf-mono); font-size:15px; letter-spacing:.14em; text-transform:uppercase; color:rgba(245,245,240,.5); }
.sf-chrome > span { position:absolute; }
.sf-c-tl { left:56px; top:44px; font-weight:500; } .sf-c-tr { right:56px; top:44px; }
.sf-c-prog { left:56px; right:56px; bottom:38px; display:flex; gap:8px; }
.sf-c-prog i { flex:1; height:2px; background:rgba(245,245,240,.14); border-radius:2px; overflow:hidden; }
.sf-c-prog b { display:block; height:100%; background:linear-gradient(90deg,var(--sf-teal),var(--sf-blue)); transform-origin:0 50%; transform:scaleX(0); }

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

/* ============================ the /services embed ============================ */
.sf-sec { padding:clamp(3rem,6vw,5rem) 0 clamp(2rem,4vw,3rem); }
.sf-head { display:flex; justify-content:space-between; align-items:flex-end; gap:2rem; flex-wrap:wrap; margin-bottom:1.8rem; }
.sf-head h2 { margin:0; font-size:clamp(1.9rem,3.6vw,2.9rem); line-height:1.12; }
.sf-head p { margin:0; max-width:46ch; color:var(--text-body); }
.sf-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); }
.sf-frame:fullscreen { border-radius:0; display:flex; flex-direction:column; justify-content:center; }
.sf-frame:fullscreen .sfilm { width:min(100vw, calc((100vh - 60px) * 16 / 9)); margin:0 auto; }
.sf-poster { position:absolute; inset:0 0 60px 0; width:100%; height:calc(100% - 60px); object-fit:cover; z-index:1; }
.sfilm.is-ready ~ .sf-poster { display:none; }
.sf-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,.35), rgba(17,17,16,.7)); font:inherit; color:var(--text); }
.sf-start[hidden] { display:none; }
.sf-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); transition:transform .5s cubic-bezier(.22,1,.36,1); }
.sf-start:hover .sf-start-in { transform:scale(1.04); }
.sf-start-btn { width:52px; height:52px; border-radius:50%; background:var(--grad); display:grid; place-items:center; }
.sf-start-btn svg { width:18px; height:18px; margin-left:3px; fill:#fff; }
.sf-start-in b { display:block; font-weight:600; font-size:1rem; text-align:left; }
.sf-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; }
.sf-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; }
.sf-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; }
.sf-ib:hover { background:rgba(255,255,255,.06); } .sf-ib svg { width:18px; height:18px; fill:currentColor; }
.sf-ib:focus-visible, .sf-scrub:focus-visible, .sf-chap:focus-visible { outline:2px solid var(--teal); outline-offset:2px; }
#sfPlay .i-pause, #sfPlay[data-state="playing"] .i-play { display:none; } #sfPlay[data-state="playing"] .i-pause { display:block; }
#sfSound .i-off, #sfSound[data-on="0"] .i-on { display:none; } #sfSound[data-on="0"] .i-off { display:block; }
.sf-time { flex:none; min-width:9ch; color:var(--text); font-variant-numeric:tabular-nums; }
.sf-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); }
.sf-scrub::-webkit-slider-thumb { -webkit-appearance:none; width:14px; height:14px; border-radius:50%; background:#fff; }
.sf-scrub::-moz-range-thumb { width:14px; height:14px; border:0; border-radius:50%; background:#fff; }
.sf-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); }
.sf-dl:hover { color:#fff; } .sf-dl svg { width:15px; height:15px; fill:currentColor; }
.sf-chaps { display:grid; grid-template-columns:repeat(6,1fr); gap:.5rem 1rem; margin-top:1.1rem; }
.sf-chap { position:relative; text-align:left; background:none; border:0; padding:.6rem 0 0; cursor:pointer; color:var(--text-muted); font:inherit; }
.sf-chap::before { content:''; position:absolute; left:0; right:0; top:0; height:2px; border-radius:2px; background:rgba(255,255,255,.1); }
.sf-chap i { position:absolute; left:0; top:0; height:2px; width:var(--f,0%); border-radius:2px; background:var(--grad); }
.sf-chap b { display:block; font-family:var(--f-mono); font-weight:500; font-size:.66rem; letter-spacing:.12em; color:var(--teal); }
.sf-chap span { display:block; font-size:.84rem; line-height:1.35; margin-top:.2rem; transition:color .3s; }
.sf-chap.is-on span, .sf-chap:hover span { color:var(--text); }
@media (max-width: 900px) { .sf-chaps { grid-template-columns:repeat(3,1fr); } }
@media (max-width: 560px) { .sf-chaps { grid-template-columns:1fr 1fr; } .sf-dl span, .sf-start-in span span { display:none; } .sf-bar { gap:.4rem; padding:0 .5rem; } }

/* service detail pages: "This service in 8 seconds" */
.svc-clip { margin:0 auto; }
.svc-clip-frame { position:relative; border-radius:16px; overflow:hidden; border:1px solid var(--border); background:#111110; aspect-ratio:16/9; }
.svc-clip-frame video { display:block; width:100%; height:100%; object-fit:cover; }
.svc-clip-cap { display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-top:.8rem; font-family:var(--f-mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--text-muted); }
.svc-clip-cap a { color:var(--teal); text-decoration:none; }