/* film: the hero's film (1280 by 720), drawn in code on motion/ and clips/, redone 2026-10-05 on the new positioning: the three
   engines as the three cards of a row (a company we run with AI, the software we sell, the apps people use), the camera close
   on each in turn with its line as a subtitle, then back on the three, each bursting into the software we built for it, then the name. The night of the hero, the
   site's own pictures and product windows, the page's type with its accent word. Builder A's. Needs ../base, ../motion, ../clips. */
.cl-film .cl-frame[data-clip="sbfilm"]{background:oklch(0% 0 0);box-shadow:inset 0 0 0 1px oklch(100% 0 0/.1)}
.sf-w{position:absolute;left:0;top:0;width:1280px;height:720px;transform-origin:0 0;will-change:transform}
.sf-row{position:absolute;inset:0}

/* a card, as the home's rows draw them: square, rounded, its kind in the corner */
.sf-card{position:absolute;top:184px;width:352px;height:352px;border-radius:16px;overflow:hidden;isolation:isolate;background:oklch(13% 0 0);box-shadow:inset 0 0 0 1px oklch(100% 0 0/.08)}
.sf-a{left:68px}.sf-b{left:464px}.sf-c{left:860px}
.sf-card::before{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(180deg,oklch(0% 0 0/.45),oklch(0% 0 0/0) 34%)}
.sf-kind{position:absolute;z-index:4;left:20px;top:16px;font-size:13px;font-weight:500;letter-spacing:.01em;color:oklch(100% 0 0/.88)}

/* 1. a company we run: the train-window picture, a little wider than the card so the train can go on past it */
.sf-photo{position:absolute;left:0;top:0;width:112%;max-width:none;height:100%;object-fit:cover}
.sf-done{position:absolute;z-index:4;left:18px;bottom:18px;display:flex;flex-direction:column;align-items:flex-start;gap:7px}
.sf-pill{display:inline-flex;align-items:center;gap:7px;padding:6px 11px 6px 7px;border-radius:99px;background:oklch(100% 0 0/.9);color:oklch(18% 0 0);font-size:13px;font-weight:500;box-shadow:0 6px 18px -8px oklch(0% 0 0/.5)}
.sf-pill i{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:oklch(62% .15 150);color:#fff}
.sf-pill svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}

/* 2. the software we sell: Milan's tender index, a light product window */
.sf-win{position:absolute;z-index:2;left:22px;right:22px;top:58px;padding:14px 16px 14px;border-radius:12px;background:oklch(99% 0 0);color:oklch(20% 0 0);box-shadow:0 24px 50px -24px oklch(0% 0 0/.8);font-size:11px;line-height:1.3}
.sf-wh{display:flex;align-items:center;justify-content:space-between}
.sf-wh b{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600}
.sf-wh svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.sf-wh i{display:flex}
.sf-wh small{font-size:10px;color:oklch(55% 0 0)}
.sf-num{display:flex;align-items:flex-end;gap:10px;margin:12px 0 12px}
.sf-num b{font-family:var(--serif);font-weight:300;font-size:40px;line-height:.9;letter-spacing:-.03em;font-variant-numeric:tabular-nums;min-width:4.1ch}
.sf-num span{display:flex;flex-direction:column;font-size:11px;font-weight:500;color:oklch(35% 0 0)}
.sf-num small{font-size:9.5px;font-weight:400;color:oklch(60% 0 0)}
.sf-dots{display:grid;grid-template-columns:repeat(16,1fr);gap:6px 0;justify-items:center;padding:10px 4px;border-radius:8px;background:oklch(97% 0 0)}
.sf-dots i{width:7px;height:7px;border-radius:50%;background:oklch(88% 0 0);transition:background-color .35s var(--e-ui),transform .45s cubic-bezier(.34,1.56,.64,1)}
.sf-dots i.ok{background:oklch(64% .16 150);transform:scale(1.25)}
.sf-dots i.chk{background:oklch(60% .17 260)}
.sf-dots i.no{background:oklch(64% .18 25 / .55)}
.sf-keys{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin-top:11px}
.sf-br{flex-basis:100%;height:0}
.sf-k{padding:4px 8px;border-radius:6px;background:oklch(20% 0 0);color:#fff;font-size:10px;font-weight:500}
.sf-lg{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:500;color:oklch(40% 0 0)}
.sf-lg::before{content:"";width:7px;height:7px;border-radius:50%}
.sf-lg.ok::before{background:oklch(64% .16 150)}.sf-lg.chk::before{background:oklch(60% .17 260)}.sf-lg.no::before{background:oklch(64% .18 25 / .55)}

/* 3. the apps people use: three phones out of the bottom of the card, the one in front a little bigger */
.sf-c{background:oklch(9% 0 0)}
.sf-ph{position:absolute;max-width:none;height:auto}
.sf-ph.m{z-index:2;width:176px;left:88px;bottom:-46px;filter:drop-shadow(0 0 22px oklch(0% 0 0/.9))}
.sf-ph.l{z-index:1;width:140px;left:8px;bottom:-92px;rotate:-8deg}
.sf-ph.r{z-index:1;width:140px;left:204px;bottom:-92px;rotate:8deg}

/* 4. what the cards burst into: the software we built for each, its name under it, each row's engine over it */
.sf-sw{position:absolute;inset:0;transform-origin:640px 360px}
.sf-swl{position:absolute;margin:0;font-family:var(--serif);font-weight:300;font-size:21px;line-height:1;letter-spacing:-.03em;color:#fff}
.sf-t{position:absolute;border-radius:10px;overflow:hidden;background:oklch(13% 0 0);box-shadow:inset 0 0 0 1px oklch(100% 0 0/.1),0 18px 40px -20px oklch(0% 0 0/.9)}
.sf-t video,.sf-t img{display:block;width:100%;height:100%;object-fit:cover}
.sf-t span{position:absolute;left:8px;bottom:7px;padding:3px 7px;border-radius:99px;background:oklch(0% 0 0/.62);color:#fff;font-size:11px;font-weight:500;line-height:1.2}
.sf-t video::-webkit-media-controls-start-playback-button{display:none!important;-webkit-appearance:none}

/* the line of each card, as a subtitle under it; the accent word is the lockup's script */
.sf-sub{position:absolute;left:0;right:0;bottom:30px;text-align:center;font-family:var(--serif);font-weight:300;font-size:56px;line-height:1.1;letter-spacing:-.04em;color:#fff;white-space:nowrap}
.sf-sub span{display:inline-block}
.sf-sub em{font-family:var(--accent);font-style:normal;text-transform:uppercase;letter-spacing:.01em;font-size:1.04em}
/* the name */
.sf-end{position:absolute;inset:0;display:grid;place-items:center}
.sf-lock{width:620px;height:88px;fill:#fff;stroke:none;overflow:visible;color:#fff}