/* ==================================================================
   Contact film (.cf-*). Engine: js/contact-film.js
   The site's own palette: near-black, teal to blue, warm white.
   Player chrome (.syf-*) lives in css/system-films.css.
   ================================================================== */
.cf-stage { --bg:#111110; --fg:#F5F5F0; --mut:#8C8C88; --card:#1A1A18; --card2:#22221F; --line:rgba(245,245,240,.12); --teal:#00A89D; --blue:#0099D6; --warm:#E9C79A;
  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); }
.cf-stage.cf-v { width:1080px; height:1920px; }
.cf-stage * { box-sizing:border-box; }
.cf-stage :is(h2,h3,h4) { font-family:'Geist','Inter',system-ui,sans-serif; color:var(--fg); margin:0; font-style:normal; }
.cf-stage p { margin:0; }
.cf-bg { position:absolute; inset:0; background:radial-gradient(1100px 700px at 80% 10%, rgba(0,168,157,.14), transparent 60%), radial-gradient(900px 700px at 0% 100%, rgba(0,153,214,.12), transparent 60%), var(--bg); }
.cf-grid { position:absolute; inset:0; opacity:.5; background:linear-gradient(rgba(245,245,240,.035) 1px, transparent 1px) 0 0/64px 64px, linear-gradient(90deg, rgba(245,245,240,.035) 1px, transparent 1px) 0 0/64px 64px; -webkit-mask-image:radial-gradient(closest-side, #000, transparent); mask-image:radial-gradient(closest-side, #000, transparent); }
.cf-stage .w { display:inline-block; will-change:transform, filter, opacity; }
.cf-k { white-space:nowrap; }
.cf-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); }
.cf-ser { font-family:'Instrument Serif','Libre Baskerville',Georgia,serif; font-style:italic; font-weight:400; letter-spacing:-.01em; }
.cf-open, .cf-sc, .cf-prom, .cf-end { position:absolute; inset:0; display:none; }
.cf-tick { width:22px; height:22px; } .cf-tick path { fill:none; stroke:currentColor; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:1; stroke-dashoffset:1; }

/* open */
.cf-q { position:absolute; left:50%; top:200px; width:240px; height:240px; margin-left:-120px; display:grid; place-items:center; border-radius:50%; font-family:'Instrument Serif',serif; font-style:italic; font-size:200px; line-height:1; color:#fff; background:linear-gradient(135deg,var(--teal),var(--blue)); box-shadow:0 40px 120px -30px rgba(0,168,157,.6); }
.cf-l1 { position:absolute; left:0; right:0; top:560px; text-align:center; font-weight:600 !important; font-size:110px; line-height:1; letter-spacing:-.05em; }
.cf-l2 { position:absolute; left:0; right:0; top:680px; text-align:center; font-size:120px; line-height:1; color:var(--teal) !important; }

/* text + visual */
.cf-txt { position:absolute; left:140px; top:270px; width:700px; }
.cf-kick { color:var(--teal); }
.cf-h { margin-top:24px !important; font-weight:600 !important; font-size:76px; line-height:1.04; letter-spacing:-.045em; }
.cf-s { margin-top:28px !important; font-size:44px; line-height:1.15; color:var(--mut); }
.cf-s .w { color:var(--fg); opacity:.8; }
.cf-vis { position:absolute; left:920px; top:160px; width:860px; height:760px; }

/* before */
.cf-form { padding:28px 30px; border-radius:22px; background:var(--card); box-shadow:0 0 0 1px var(--line), 0 50px 100px -50px rgba(0,0,0,.9); }
.cf-fh { display:flex; justify-content:space-between; align-items:center; } .cf-fh .cf-m { color:var(--teal); }
.cf-fh em { font-style:normal; font-family:'Geist Mono',monospace; font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--mut); }
.cf-field { margin-top:18px; }
.cf-field span { display:block; font-size:18px; color:var(--mut); }
.cf-field b { display:block; margin-top:8px; padding:14px 18px; border-radius:12px; background:var(--card2); font-weight:500; font-size:26px; box-shadow:inset 0 0 0 1px var(--line); }
.cf-field p { margin-top:8px !important; min-height:3.6em; padding:14px 18px; border-radius:12px; background:var(--card2); font-size:26px; line-height:1.4; box-shadow:inset 0 0 0 1px var(--line); }
.cf-send { position:relative; overflow:hidden; display:inline-flex; margin-top:20px; padding:18px 30px; border-radius:999px; background:var(--fg); color:var(--bg); font-weight:600; font-size:24px; }
.cf-rip, .cf-rip2 { position:absolute; left:62%; top:50%; width:70px; height:70px; margin:-35px 0 0 -35px; border-radius:50%; background:#fff; opacity:0; }
.cf-conf { position:absolute; left:40px; right:40px; top:560px; display:flex; align-items:center; gap:18px; padding:18px 22px; border-radius:16px; background:rgba(0,168,157,.12); box-shadow:inset 0 0 0 2px rgba(0,168,157,.6); }
.cf-conf i { display:grid; place-items:center; width:46px; height:46px; border-radius:50%; background:var(--teal); color:#fff; flex:none; }
.cf-conf strong { display:block; font-size:26px; } .cf-conf span { display:block; margin-top:2px; font-size:20px; color:var(--mut); }
.cf-alt { position:absolute; left:40px; right:40px; top:680px; display:flex; align-items:baseline; gap:16px; } .cf-alt p { font-size:24px; color:var(--fg); }

/* call */
.cf-callbar { display:flex; align-items:center; gap:16px; padding:16px 22px; border-radius:16px; background:var(--card); box-shadow:0 0 0 1px var(--line); }
.cf-dot { width:14px; height:14px; border-radius:50%; background:#FF5A5F; box-shadow:0 0 14px #FF5A5F; }
.cf-callbar .cf-m { color:var(--fg); } .cf-timer { margin-left:auto; font-family:'Geist Mono',monospace; font-weight:500; font-size:40px; font-variant-numeric:tabular-nums; } .cf-of { font-family:'Geist Mono',monospace; font-size:20px; color:var(--mut); }
.cf-board { position:relative; margin-top:22px; height:320px; border-radius:20px; background:var(--card); box-shadow:0 0 0 1px var(--line); }
.cf-wires { position:absolute; inset:10px; width:calc(100% - 20px); height:300px; overflow:visible; }
.cf-w { fill:none; stroke:var(--teal); stroke-width:3; stroke-dasharray:1; stroke-dashoffset:1; }
.cf-node { position:absolute; padding:14px 18px; border-radius:14px; background:var(--card2); box-shadow:0 0 0 1px var(--line); max-width:300px; }
.cf-node .cf-m { font-size:13px; color:var(--teal); } .cf-node b { display:block; margin-top:6px; font-weight:500; font-size:22px; line-height:1.25; }
.cf-node.a { left:20px; top:110px; } .cf-node.b { left:470px; top:40px; box-shadow:0 0 0 2px rgba(0,168,157,.6); } .cf-node.c { left:470px; top:190px; }
.cf-stack { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:24px; }
.cf-stack .cf-m { color:var(--teal); margin-right:6px; }
.cf-stack b { padding:12px 20px; border-radius:999px; background:var(--card); box-shadow:0 0 0 1px var(--line); font-weight:500; font-size:24px; }
.cf-stack b[data-i="3"] { font-family:'Instrument Serif',serif; font-style:italic; font-weight:400; font-size:28px; color:var(--warm); }

/* after */
.cf-sum { padding:26px 30px; border-radius:22px; background:var(--card); box-shadow:0 0 0 1px var(--line), 0 50px 100px -50px rgba(0,0,0,.9); }
.cf-sh .cf-m { color:var(--teal); }
.cf-row { display:flex; align-items:center; gap:18px; margin-top:18px; padding:16px 18px; border-radius:14px; background:var(--card2); }
.cf-row i { display:grid; place-items:center; width:44px; height:44px; border-radius:50%; background:rgba(0,168,157,.16); color:var(--teal); flex:none; }
.cf-row strong { display:block; font-size:28px; letter-spacing:-.02em; } .cf-row span { display:block; margin-top:2px; font-size:20px; color:var(--mut); }
.cf-stamp { position:absolute; right:10px; top:600px; padding:16px 26px; border:4px solid var(--warm); border-radius:12px; color:var(--warm); background:rgba(17,17,16,.85); font-family:'Geist Mono',monospace; font-weight:500; font-size:24px; letter-spacing:.1em; text-transform:uppercase; line-height:1.35; opacity:0; }
.cf-stamp span { display:block; } .cf-stamp span + span { font-size:17px; }

/* promise */
.cf-p1 { position:absolute; left:0; right:0; top:380px; text-align:center; font-weight:600 !important; font-size:140px; line-height:1; letter-spacing:-.055em; }
.cf-p2 { position:absolute; left:0; right:0; top:540px; text-align:center; font-size:160px; line-height:1; color:var(--teal) !important; }

/* end */
.cf-eh { position:absolute; left:0; right:0; top:300px; text-align:center; font-weight:600 !important; font-size:110px; line-height:1.04; letter-spacing:-.05em; }
.cf-eh .cf-ser { color:var(--teal); font-weight:400; }
.cf-btn { position:absolute; left:0; right:0; top:620px; 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; }
.cf-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)); }
.cf-logo { position:absolute; left:830px; top:320px; width:260px; height:auto; overflow:visible; opacity:0; }
.cf-word { position:absolute; left:0; right:0; top:510px; text-align:center; font-weight:600; font-size:66px; }
.cf-stage .ch { display:inline-block; width:.8em; text-align:center; } .cf-stage .sp { display:inline-block; width:.3em; }
.cf-url { position:absolute; left:0; right:0; top:620px; text-align:center; color:var(--teal); text-transform:none; letter-spacing:.05em; font-size:26px; opacity:0; }

/* pen + chrome */
.cf-pen { position:absolute; left:0; top:0; z-index:11; pointer-events:none; overflow:visible; }
.cf-ink { fill:none; stroke:var(--teal); stroke-width:5; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:1; stroke-dashoffset:1; }
.cf-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); }
.cf-c-tl { position:absolute; left:60px; top:50px; font-weight:500; } .cf-c-tr { position:absolute; right:60px; top:50px; color:var(--teal); }
.cf-prog { position:absolute; left:60px; right:60px; bottom:40px; height:2px; background:var(--line); border-radius:2px; overflow:hidden; }
.cf-prog i { display:block; height:100%; background:linear-gradient(90deg,#00A89D,#0099D6); transform-origin:0 50%; transform:scaleX(0); }

/* 9:16 */
.cf-v .cf-q { top:420px; } .cf-v .cf-l1 { top:820px; font-size:92px; padding:0 40px; } .cf-v .cf-l2 { top:1040px; font-size:104px; }
.cf-v .cf-txt { left:80px; top:330px; width:920px; }
.cf-v .cf-h { font-size:80px; } .cf-v .cf-s { font-size:46px; }
.cf-v .cf-vis { left:100px; top:900px; width:880px; }
.cf-v .cf-p1 { top:740px; font-size:120px; } .cf-v .cf-p2 { top:890px; font-size:130px; }
.cf-v .cf-eh { top:560px; font-size:96px; } .cf-v .cf-btn { top:900px; font-size:36px; }
.cf-v .cf-logo { left:410px; top:700px; } .cf-v .cf-word { top:890px; } .cf-v .cf-url { top:1000px; font-size:22px; }
.cf-v .cf-c-tl, .cf-v .cf-c-tr { top:110px; } .cf-v .cf-c-tl { left:50px; font-size:12px; } .cf-v .cf-c-tr { right:50px; } .cf-v .cf-prog { left:50px; right:50px; }

/* contact page: hero link down to the film */
.cf-hero-link { margin-top:1.1rem; font-size:.95rem; }
.cf-hero-link a { color:var(--teal); text-decoration:none; border-bottom:1px solid rgba(0,168,157,.4); padding-bottom:2px; }
.cf-hero-link a:hover, .cf-hero-link a:focus-visible { border-bottom-color:currentColor; }