:root{--paper:#e8dc9a;--ink:#382514;--mud:#583519;--orange:#ef6d24;--mint:#aec4ae;--n:0}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}a{color:inherit}button:focus-visible,a:focus-visible{outline:4px solid #ed6a26;outline-offset:5px}button:disabled,[aria-disabled=true]{opacity:.48;cursor:default}header{height:76px;border-bottom:2px solid var(--ink);display:flex;align-items:center;justify-content:space-between;padding:0 3%;gap:16px}.brand{text-decoration:none;font-size:34px;font-weight:900;white-space:nowrap}.brand small{font:10px monospace;display:inline-block;max-width:130px;white-space:normal;margin-left:18px}nav{display:flex;gap:25px;align-items:center;font:bold 12px monospace}nav a:first-child{background:var(--ink);color:var(--paper);padding:15px 20px}#field{height:850px;position:relative;isolation:isolate;overflow:clip;background:linear-gradient(163deg,transparent 59%,#aa9e69 59.2%,#887b4f 76%,#62421f 76.2%)}#field:after{content:'';position:absolute;inset:0;pointer-events:none;background:url('assets/grain-v1.png?v=1');mix-blend-mode:multiply;z-index:25}.dispatch{position:absolute;left:3%;top:16px;font:bold 12px monospace;letter-spacing:2px;z-index:5}.dispatch span{display:block;font-size:10px;margin-top:8px}.field-lines{position:absolute;inset:0;background:repeating-linear-gradient(175deg,transparent 0 98px,#68532b22 100px 101px);transform:skewY(-4deg)}.hero-rig{position:absolute;width:800px;height:800px;left:-35px;bottom:0;z-index:6;transform-origin:45% 90%;transition:transform .3s}.hero,.shadow{width:100%;position:absolute;inset:0}.shadow{transform:translate(20px,9px);opacity:.3}.headline{position:absolute;right:5%;top:40px;width:44%;z-index:3}.headline>p:first-child{font:bold 11px monospace;letter-spacing:2px}.headline h1{font-size:clamp(160px,20vw,290px);line-height:.78;letter-spacing:-.08em;margin:15px 0 22px -10px;font-weight:950}.love{font-size:clamp(62px,7.7vw,112px);font-weight:900;line-height:.85;letter-spacing:-.06em;transform:rotate(-5deg);position:relative}.love span{font-size:70px;color:var(--orange);position:absolute;right:0;top:35px;transform:rotate(14deg)}.quote{font:italic 20px Georgia;margin-top:28px;margin-left:8px}.call-tag{position:absolute;z-index:8;left:22px;top:116px;transform:rotate(-8deg);width:164px;padding:20px 15px;background:var(--mint);box-shadow:5px 6px 0 #38251444;clip-path:polygon(6% 0,100% 3%,97% 100%,0 97%)}.call-tag:before{content:'';display:block;width:45px;height:15px;background:#806b3c80;position:absolute;top:0;left:60px}.call-tag span{font:10px monospace}.call-tag strong{display:block;font-size:31px;line-height:.94;margin:16px 0}.depth{height:9px;background:#38251433;margin-bottom:10px}.depth i{display:block;height:100%;width:calc(5% + var(--n)*11.8%);background:var(--ink);transition:width .3s}.certificate{position:absolute;right:3%;top:454px;background:var(--mint);width:150px;padding:12px;text-align:center;transform:rotate(8deg);z-index:9;border:2px dashed var(--ink)}.certificate img{width:48px;float:left;margin-right:6px;filter:contrast(1.5)}.certificate span{font:9px monospace;display:block}.certificate b{font-size:32px;display:block}.invoice{position:absolute;right:22%;top:510px;width:202px;background:#fff9d9;padding:15px 14px;transform:rotate(5deg);z-index:8;box-shadow:3px 4px 0 #38251455;clip-path:polygon(0 0,100% 0,100% 98%,94% 100%,87% 98%,80% 100%,73% 98%,66% 100%,59% 98%,52% 100%,45% 98%,38% 100%,31% 98%,24% 100%,17% 98%,10% 100%,0 98%)}.invoice>span{font:10px monospace;letter-spacing:1px}.invoice p{font:10px monospace;border-top:1px dashed;margin-bottom:8px;padding-top:10px}.invoice b{font-size:25px;display:block}.invoice .line{display:flex;justify-content:space-between;font:9px monospace;padding:4px 0;border-bottom:1px dotted}.paid{position:absolute;left:18px;bottom:28px;font:bold 20px monospace;border:3px solid var(--orange);color:var(--orange);transform:rotate(-18deg);opacity:0}.action{position:absolute;right:3%;bottom:30px;width:39%;z-index:18}.action p{display:flex;justify-content:space-between;font:10px monospace;font-weight:bold;margin:10px 0}.action p span:first-child{font-weight:900}.action button{border:3px solid var(--ink);background:var(--orange);width:100%;font-size:clamp(25px,3.8vw,53px);font-weight:900;text-align:left;letter-spacing:-2px;padding:15px 20px;box-shadow:7px 7px 0 var(--ink);transform:rotate(-2deg)}.action button span{float:right}.muck-bed{position:absolute;z-index:7;bottom:-90px;left:-5%;width:115%;height:180px;background:var(--mud);border-radius:50% 30% 0 0;transform:translateY(calc(var(--n)*-9px));transition:transform .4s}.muck-bed:before{content:'';position:absolute;inset:-90px 0 0;background:url('assets/muck-v1.webp?v=1') repeat-x center/400px 230px}.fence{position:absolute;inset:370px -20px auto 0;height:170px;transform:rotate(-8deg);z-index:1;transition:transform .6s}.fence:before,.fence:after{content:'';position:absolute;top:30px;width:110%;height:10px;background:#71582a;box-shadow:0 4px 0 #dac484}.fence:after{top:95px}.fence i{position:absolute;left:30%;height:180px;width:17px;background:#71582a}.fence i:nth-child(2){left:70%}.fence i:nth-child(3){left:95%}.beam{position:absolute;left:0;top:170px;width:850px;height:420px;background:linear-gradient(90deg,#fff7c0bb,transparent);clip-path:polygon(0 40%,100% 0,100% 100%,0 60%);opacity:.5;transform:rotate(-15deg);transition:transform .5s}.rain{position:absolute;inset:0;z-index:4;pointer-events:none;opacity:.13;background:repeating-linear-gradient(102deg,transparent 0 70px,#fff 72px,transparent 74px);transform:translateX(calc(var(--n)*4px))}.breath{position:absolute;left:47%;top:15%;width:11%;height:7%;background:#fff6;border-radius:50%;filter:blur(12px);opacity:0}.sleeve{position:absolute;left:39%;top:39%;width:7%;height:9%;border:3px dashed #e8dc9a;border-radius:50%;opacity:0}.halo{position:absolute;left:55%;top:5%;font:9px monospace;transform:rotate(12deg);border:1px solid;border-radius:50%;padding:12px;opacity:0}.cow-note{position:absolute;left:13%;top:25%;background:var(--paper);padding:12px;font-weight:900;transform:rotate(-10deg);opacity:0}.coat-stain{position:absolute;left:55%;top:57%;width:30%;height:26%;background:url('assets/muck-v1.webp?v=1') center/contain no-repeat;opacity:calc(var(--n)*.11)}.hand-burst{position:absolute;left:38%;top:43%;width:1px;height:1px}.droplet{position:absolute;background:#573313;width:18px;height:12px;border-radius:45%;animation:spit .65s ease-out forwards}.splat{position:absolute;z-index:12;background:url('assets/muck-v1.webp?v=1') center/contain no-repeat;width:250px;height:200px;pointer-events:none;transform:rotate(var(--r));}.splat:after{content:'';position:absolute;left:48%;top:55%;height:calc(20px + var(--n)*9px);width:10px;background:#593619;border-radius:0 0 80% 50%}.fly{position:absolute;z-index:15;font-size:22px;animation:buzz .35s infinite alternate;pointer-events:none}.footprint{position:absolute;bottom:40px;width:29px;height:75px;background:#382514;border-radius:40%;z-index:8;transform:rotate(35deg);opacity:.65}.warning{position:absolute;top:55%;left:0;z-index:5;background:var(--orange);width:110%;font-size:35px;font-weight:900;transform:translateX(-110%) rotate(-11deg);transition:transform .6s}.bucket{position:absolute;left:54%;bottom:85px;width:72px;height:88px;border:5px solid #382514;background:#b7c3b1;z-index:8;transform:rotate(7deg);overflow:hidden}.bucket span{position:absolute;bottom:0;left:0;right:0;height:calc(var(--n)*13%);background:#573313}.bucket b{position:absolute;top:20px;font:12px monospace;left:10px}.boot{position:absolute;left:46%;bottom:25px;font-size:110px;color:#241b11;z-index:8;transform:rotate(-20deg) translateY(calc(var(--n)*4px))}.takeover{position:absolute;z-index:20;right:3%;top:43%;width:48%;background:var(--orange);padding:35px;transform:rotate(3deg);border:4px solid var(--ink);box-shadow:12px 14px 0 var(--ink)}[hidden]{display:none!important}.takeover>span{font:bold 11px monospace}.takeover h2{font-size:75px;line-height:.85;letter-spacing:-4px;margin:20px 0}.takeover button{border:2px solid;background:var(--paper);padding:17px;font-weight:bold}.utility{padding:15px 3%;display:flex;justify-content:space-between;align-items:center;background:var(--ink);color:var(--paper);gap:12px}.utility p{font:italic 17px Georgia}.utility button{border:1px solid #e8dc9a66;background:none;color:inherit;padding:12px;font:10px monospace}footer{padding:28px 3%;font:11px monospace;display:flex;justify-content:space-between;gap:25px;align-items:center}footer>div{display:flex;align-items:center;gap:18px;flex-wrap:wrap}footer code{font-size:10px;overflow-wrap:anywhere}footer button{background:none;border:1px solid;padding:10px}footer>a{max-width:240px}dialog{border:3px solid var(--ink);padding:12px;background:var(--paper);max-width:90vw}dialog img{display:block;max-height:80vh;max-width:80vw}dialog button{padding:10px;background:var(--paper);border:1px solid;margin-bottom:10px}dialog::backdrop{background:#241b11dd}
body[data-phase=armed] #dig{transform:rotate(-2deg) translate(5px,5px);box-shadow:2px 2px 0}body[data-phase=armed] .sleeve{opacity:1}body[data-phase=impact] .hero-rig{transform:rotate(-2deg) translateX(-8px)}body[data-phase=impact] .breath{opacity:1;transform:translate(-30px,-12px) scale(1.5)}body[data-phase=impact] .headline{filter:drop-shadow(6px 2px #ef6d24)}body[data-phase=impact] .paid{opacity:1}body[data-phase=impact] .beam{transform:rotate(-4deg);opacity:1}body[data-phase=impact] .call-tag{transform:rotate(-13deg)}body[data-phase=impact] .invoice{transform:rotate(9deg) translateY(7px)}body[data-level="2"] .cow-note,body[data-level="4"] .cow-note,body[data-level="6"] .cow-note{opacity:1}body[data-level="3"] .certificate,body[data-level="4"] .certificate,body[data-level="5"] .certificate,body[data-level="6"] .certificate,body[data-level="7"] .certificate,body[data-level="8"] .certificate{transform:rotate(19deg) translateY(20px)}body[data-level="4"] .warning,body[data-level="5"] .warning,body[data-level="6"] .warning,body[data-level="7"] .warning,body[data-level="8"] .warning{transform:translateX(0) rotate(-11deg)}body[data-level="5"] .halo,body[data-level="6"] .halo,body[data-level="7"] .halo,body[data-level="8"] .halo{opacity:1}body[data-level="6"] .fence,body[data-level="7"] .fence,body[data-level="8"] .fence{transform:rotate(9deg) translateY(120px)}body[data-level="7"] .bucket,body[data-level="8"] .bucket{transform:rotate(70deg) translateX(50px)}body[data-level="8"] .love{color:#a44919}body[data-level="8"] .rain{opacity:.32}body[data-level="8"] .muck-bed{height:260px}.low *{animation:none!important;transition:none!important}@keyframes spit{to{transform:translate(var(--x),var(--y));opacity:0}}@keyframes buzz{to{transform:translate(8px,-4px) rotate(15deg)}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}
@media(min-width:1600px){#field{max-width:1800px;margin:auto}.hero-rig{width:920px;height:920px;bottom:-65px}}
@media(max-width:1000px){header{height:68px}.brand small{display:none}#field{height:1080px}.headline{right:5%;top:45px;width:55%}.headline h1{font-size:200px}.love{font-size:85px}.hero-rig{width:750px;height:750px;left:-120px;bottom:130px}.call-tag{top:105px;width:130px}.call-tag strong{font-size:25px}.certificate{top:470px}.invoice{top:650px;right:6%}.action{width:60%;bottom:35px;right:5%}.bucket{left:50%;bottom:140px}.utility,footer{flex-wrap:wrap}.takeover{top:55%;width:58%}.takeover h2{font-size:58px}}
@media(max-width:600px){header{padding:0 16px;height:62px}.brand{font-size:28px}nav{gap:12px;font-size:9px}nav a:first-child{padding:12px}.dispatch{top:4px;font-size:9px;letter-spacing:1px}.dispatch span{display:inline;margin-left:8px;font-size:8px}#field{height:1010px}.headline{top:57px;left:44%;width:54%;right:auto}.headline>p:first-child{font-size:7px;letter-spacing:1px;max-width:145px}.headline h1{font-size:124px;margin:12px 0 14px -5px}.love{font-size:52px;letter-spacing:-3px}.love span{font-size:33px;top:20px;right:6px}.quote{font-size:12px;margin:16px 0}.call-tag{top:72px;left:15px;width:120px;padding:16px 12px}.call-tag strong{font-size:27px}.call-tag span{font-size:8px}.hero-rig{width:590px;height:590px;left:-148px;bottom:227px}.certificate{top:417px;right:12px;width:104px;padding:7px}.certificate b{font-size:25px}.certificate img{width:28px}.certificate span{font-size:7px}.invoice{top:605px;right:12px;width:155px;padding:12px 10px}.invoice>span{font-size:8px}.invoice .line{font-size:8px;padding:3px 0}.invoice b{font-size:21px}.action{bottom:27px;left:20px;width:calc(100% - 40px)}.action button{font-size:37px}.action p{font-size:9px}.fence{top:350px}.bucket{left:20px;bottom:147px;width:56px;height:70px}.bucket b{font-size:9px;left:5px}.boot{left:26%;bottom:110px}.warning{font-size:22px;top:49%}.takeover{left:18px;right:auto;top:650px;width:calc(100% - 36px);padding:22px}.takeover h2{font-size:55px}.takeover>span{font-size:9px}.takeover button{font-size:12px}.utility{padding:14px 18px}.utility div{display:flex;flex-wrap:wrap;gap:6px}.utility button{font-size:9px;padding:10px}footer{padding:24px 18px}footer>div{gap:12px}.splat{width:180px;height:145px}.halo{font-size:7px}.muck-bed{bottom:-60px;height:240px}.paid{font-size:15px}.headline h1{letter-spacing:-10px}}
@media(max-width:350px){.headline h1{font-size:102px}.love{font-size:44px}.love span{right:0}.hero-rig{left:-163px}.call-tag{width:107px}.headline{left:43%;width:56%}nav{gap:8px}nav a:first-child{padding:10px 7px}.takeover h2{font-size:48px}}
/* Optical QA: keep mobile headline and the entire smile clear. */
@media(min-width:1001px){.quote{position:relative;top:25px;max-width:230px;font-size:17px}.invoice{right:17%;top:545px}}
.action p{color:var(--paper);text-shadow:1px 1px var(--ink)}.action p:first-child{background:var(--ink);padding:5px 8px;width:100%}
@media(max-width:600px){.headline h1{font-size:105px;letter-spacing:-9px}.hero-rig{bottom:185px}.love{font-size:47px}.quote{font-size:11px;margin-top:12px}.invoice{top:640px}.certificate{top:457px}}
@media(max-width:350px){.headline h1{font-size:87px;letter-spacing:-7px}.love{font-size:40px}.hero-rig{width:550px;height:550px;left:-158px;bottom:210px}}
.fly{width:5px;height:12px;border-radius:50%;background:#23190e;font-size:0;transform:rotate(20deg)}.fly:before,.fly:after{content:'';position:absolute;width:9px;height:6px;background:#fff7;border:1px solid #382514;top:0;border-radius:80%}.fly:before{left:-7px;transform:rotate(25deg)}.fly:after{left:3px;transform:rotate(-25deg)}