/* ===== EDIT ME: colors and fonts live in :root ===== */
:root{--bg:#f4efe6;--ink:#17140f;--accent:#d9531e;--mute:#6f685c;--f1:'Anton',Impact,sans-serif;--f2:'Space Mono',monospace;--f3:'DM Sans',system-ui,sans-serif}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font:400 1.05rem/1.6 var(--f3);overflow-x:hidden}
a{color:inherit}p{margin:0 0 1em;max-width:62ch}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.w{max-width:1100px;margin:auto;padding:40px 20px}
.big{font:400 clamp(3rem,14vw,8.5rem)/.95 var(--f1);text-transform:uppercase;color:var(--accent);margin-bottom:.3em}
.big.r{text-align:right}.big small{display:block;font:.9rem/1.4 var(--f2);color:var(--ink);text-transform:none;margin:10px 0 10px auto;max-width:34ch}
.mono{font-family:var(--f2);font-size:.85rem}
.btn{font:.9rem var(--f2);text-transform:uppercase;color:var(--accent);text-decoration:none;padding:6px 4px;display:inline-block;transition:letter-spacing .2s}
.btn:hover{color:var(--ink);letter-spacing:2px}
.ctas.lg .btn{font-size:1.4rem}
.tick{background:var(--ink);color:var(--bg);font:.8rem var(--f2);overflow:hidden;white-space:nowrap;padding:10px 0}
.tick div{display:inline-block;animation:mq 40s linear infinite}
@keyframes mq{to{transform:translateX(-50%)}}
header{display:flex;justify-content:space-between;align-items:center;padding:14px 20px;position:sticky;top:0;background:var(--bg);z-index:9;border-bottom:3px solid var(--ink)}
.logo{font:1.9rem var(--f1);text-transform:uppercase;text-decoration:none}.logo i{color:var(--accent);font-style:normal}
nav{display:flex;gap:18px;align-items:center;font:.8rem var(--f2);text-transform:uppercase}
nav a{text-decoration:none}nav a.on{color:var(--accent)}#chip{color:var(--accent)}
.menu{display:none;background:none;border:0;font-size:1.6rem;cursor:pointer;color:var(--ink)}
@media(max-width:820px){.menu{display:block}nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:flex-start;background:var(--bg);padding:20px;border-bottom:3px solid var(--ink)}nav.open{display:flex}}
.name{display:flex;justify-content:flex-end;gap:10px;font:clamp(1.4rem,6vw,3rem) var(--f2);color:var(--accent)}
.name input{background:none;border:0;border-bottom:3px solid var(--ink);font:inherit;color:inherit;width:9ch;field-sizing:content;min-width:6ch;max-width:60vw;outline:0}
.name input:focus{border-color:var(--accent)}
.photo{position:relative;width:min(78%,340px);margin:60px auto}
.photo::before{content:"";position:absolute;inset:18px -18px -18px 18px;background:var(--accent)}
.photo img{position:relative;display:block;width:100%;aspect-ratio:4/5;object-fit:cover;object-position:top;border:3px solid var(--ink);background:#ddd}
.photo i{position:absolute;width:28px;height:28px;border:4px solid var(--ink);z-index:2}
.c1{top:-12px;left:-12px;border-right:0!important;border-bottom:0!important}.c2{bottom:-12px;right:-12px;border-left:0!important;border-top:0!important}
.tg{position:absolute;z-index:3;background:var(--ink);color:var(--bg);font:.7rem var(--f2);padding:4px 8px;text-transform:uppercase;animation:fl 3s ease-in-out infinite alternate}
@keyframes fl{to{transform:translateY(-8px)}}
.two{display:grid;gap:30px}@media(min-width:860px){.two{grid-template-columns:1.3fr 1fr;align-items:start}}
.grp{margin:30px 0}
.grid{display:grid;gap:24px;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));margin:20px 0 50px}
.card{display:block;text-decoration:none;border:3px solid var(--ink);background:#fffaf0;transition:transform .2s,box-shadow .2s}
.card:hover{transform:translate(-4px,-4px);box-shadow:8px 8px 0 var(--accent)}
.shot{aspect-ratio:16/10;display:grid;place-items:center;background:repeating-linear-gradient(45deg,#e8e0d0 0 12px,#f0e9db 12px 24px);font:.8rem var(--f2);color:var(--mute);border-bottom:3px solid var(--ink)}
.shot img{width:100%;height:100%;object-fit:cover}
.card .in{padding:16px}.card h3,.toy h3{font:1.7rem var(--f1);text-transform:uppercase;margin:4px 0}
.hire{position:relative;height:520px;overflow:hidden;margin:60px 0;background:#fffaf0;border-block:3px solid var(--ink)}
.rows{font:1rem/2.3 var(--f2);color:var(--mute);opacity:.55;white-space:nowrap}
.rows p{width:max-content;max-width:none;margin:0;animation:mq 60s linear infinite}.rows p:nth-child(even){animation-direction:reverse}
.hire h2{position:absolute;inset:0;display:grid;place-content:center;text-align:center;margin:0;text-shadow:0 0 0 var(--bg),3px 3px 0 var(--ink)}
.idx{margin:30px 0}.idx a{display:flex;gap:12px;align-items:baseline;text-decoration:none;padding:6px 0;text-transform:uppercase;font-size:1.15rem}
.idx a:hover{color:var(--accent)}.idx span{font:.9rem var(--f2);color:var(--accent)}.idx b{flex:1;border-bottom:1px dotted var(--mute)}
footer .mono{color:var(--mute)}
.toy{border:3px solid var(--ink);padding:20px;background:#fffaf0}
.sw{width:42px;height:42px;border:3px solid var(--ink);cursor:pointer;margin:0 6px 6px 0}
.toy input{width:100%;font:inherit;padding:8px;border:3px solid var(--ink);background:var(--bg);margin:8px 0}
#tt{font:clamp(2.4rem,9vw,3.6rem)/1.1 var(--f1);text-transform:uppercase;color:var(--accent);word-break:break-word}#tt.o{color:transparent;-webkit-text-stroke:2px var(--ink)}
#rg{height:130px;display:grid;place-items:center;text-align:center;background:var(--ink);color:var(--bg);cursor:pointer;font:.95rem var(--f2);padding:10px;margin-top:10px}
.rv{opacity:0;transform:translateY(20px);transition:opacity .6s,transform .6s}.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rv{opacity:1;transform:none}}
[hidden]{display:none!important}
.stack .t{display:block;font:clamp(2rem,9vw,5.2rem)/1.08 var(--f1);text-transform:uppercase;opacity:.35;transition:opacity .35s}
.stack .it.on .t,.stack .it:hover .t{opacity:1}
.it{margin-bottom:.5em}.it p{margin:.3em 0}.it .mono{color:var(--mute)}
.filters{display:flex;flex-wrap:wrap;gap:10px;margin:20px 0}
.fbtn{font:.85rem var(--f2);text-transform:uppercase;background:none;border:3px solid var(--ink);padding:6px 12px;cursor:pointer;color:var(--ink)}
.fbtn.on,.fbtn:hover{background:var(--ink);color:var(--bg)}
a.card{cursor:pointer}.card p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.shot img{object-position:top}
.quote{border:3px solid var(--ink);padding:20px;background:#fffaf0}.quote p{font-size:1.1rem}.quote cite{color:var(--mute);font-style:normal}
.steps{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.step{border-top:4px solid var(--accent);padding-top:10px}.step h3{font:1.8rem var(--f1);text-transform:uppercase}.step .mono{color:var(--accent)}
details{border-bottom:3px solid var(--ink);padding:14px 0}
summary{font:1.5rem var(--f1);text-transform:uppercase;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:12px}
summary::-webkit-details-marker{display:none}summary::after{content:"+";color:var(--accent);transition:transform .25s}
details[open] summary::after{transform:rotate(45deg)}details[open] p{animation:fd .3s}@keyframes fd{from{opacity:0;transform:translateY(-6px)}}
.pf{display:grid;gap:14px;max-width:640px}.pf label{display:grid;gap:4px;font:.85rem var(--f2);text-transform:uppercase}
.pf input,.pf select,.pf textarea{font:1rem var(--f3);padding:10px;border:3px solid var(--ink);background:#fffaf0;color:var(--ink);text-transform:none}
dialog{border:3px solid var(--ink);background:var(--bg);color:var(--ink);padding:0;width:min(940px,94vw);max-height:92vh;overflow:auto}
dialog::backdrop{background:#17140fd9}.pad{padding:24px}
#lbi{max-height:60vh;overflow:auto;border-bottom:3px solid var(--ink)}#lbi img{display:block;width:100%}
#lbt{padding:20px}.lbn{display:flex;justify-content:space-between;padding:0 20px 20px}
.x{position:sticky;top:0;float:right;z-index:2;font-size:1.6rem;background:var(--ink);color:var(--bg);border:0;width:44px;height:44px;cursor:pointer}
.hirebtn{position:absolute;inset:0;width:100%;background:none;border:0;cursor:pointer;margin:0;text-shadow:3px 3px 0 var(--ink);transition:transform .25s}
.hirebtn:hover{transform:scale(1.04)}.hirebtn small{margin:12px auto 0;text-shadow:none;text-align:center}
#ch{width:min(420px,92vw)}#ch .btn{font-size:1.3rem}.r{text-align:right}
.card p{display:block;-webkit-line-clamp:unset;overflow:visible}.card .in .mono{color:var(--mute)}
.shot img.contain{object-fit:contain;object-position:center}
#lb{width:min(1000px,94vw);background:var(--ink);border:0;overflow:hidden}
#lb[open]{position:fixed;inset:0;margin:auto;height:fit-content;max-height:90vh;display:flex;flex-direction:column}
#lb .x{position:absolute;top:8px;right:8px;float:none;background:var(--accent);z-index:3}
#lbi{flex:1;min-height:0;max-height:none;overflow:auto;border:0;display:grid;place-items:center}
#lbi img,#lbi video{display:block;width:100%;height:auto;max-height:none}#lbi iframe{width:100%;aspect-ratio:16/9;border:0}
#lb .lbn{padding:10px 16px;flex:none}#lb .btn{color:var(--bg)}#lb .btn:hover{color:var(--accent)}
/* ---- brown shades ---- */
:root{--tan:#ecdcc4;--caramel:#e2c9a6;--mocha:#6b4a35;--esp:#2b1d14;--sand:#e9c9a4}
.tick{background:var(--esp)}
.tan{background:var(--tan);border-block:3px solid var(--ink)}.caramel{background:var(--caramel);border-block:3px solid var(--ink)}
.mocha{background:var(--mocha);color:var(--bg);border-block:3px solid var(--ink)}
.mocha .big,footer .big{color:var(--sand)}.mocha .step{border-top-color:var(--sand)}.mocha .step .mono{color:var(--sand)}
.hire{background:var(--esp)}.hire .rows{color:var(--sand);opacity:.3}.hirebtn{text-shadow:3px 3px 0 #000}.hirebtn small{color:var(--sand)}
footer{background:var(--esp);color:var(--bg);margin-top:60px}footer .btn{color:var(--sand)}footer .btn:hover{color:#fff}
footer .mono{color:#c9b8a6}.idx a:hover{color:var(--sand)}.idx span{color:var(--sand)}.idx b{border-color:#7a6552}
/* ---- marquee ---- */
.mq{overflow:hidden;white-space:nowrap;background:var(--accent);color:var(--bg);border-block:3px solid var(--ink);font:clamp(1.6rem,6vw,3.2rem)/1.3 var(--f1);text-transform:uppercase;padding:6px 0}
.mq div{display:inline-block;animation:mq 30s linear infinite}.mq.rev div{animation-direction:reverse}.mq:hover div{animation-play-state:paused}
.mq+.mq{background:var(--ink);border-top:0}
/* ---- scroll progress ---- */
#sp{position:fixed;top:0;left:0;width:100%;height:5px;background:var(--accent);transform-origin:0 50%;transform:scaleX(0);z-index:120}
/* ---- loading screen ---- */
#ld{position:fixed;inset:0;background:var(--esp);z-index:200;display:grid;place-content:center;gap:18px;text-align:center;transition:opacity .45s,visibility .45s}
#ld.out{opacity:0;visibility:hidden}
.lg{font:clamp(3rem,16vw,7rem) var(--f1);text-transform:uppercase;color:var(--bg)}.lg i{color:var(--accent);font-style:normal}
.lb2{width:min(260px,60vw);height:6px;background:#ffffff26;margin:auto;overflow:hidden}
.lb2 b{display:block;height:100%;background:var(--accent);transform-origin:0 50%;animation:ldf 1s ease-out forwards}
@keyframes ldf{from{transform:scaleX(0)}to{transform:scaleX(1)}}
/* ---- floating contact ---- */
#fc{position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:50;display:flex;flex-direction:column;align-items:flex-end;gap:10px}
#fb{width:60px;height:60px;border-radius:50%;border:3px solid var(--ink);background:var(--accent);color:#fff;cursor:pointer;display:grid;place-items:center;box-shadow:4px 4px 0 var(--ink);position:relative;animation:bn 3s ease-in-out infinite}
#fb::after{content:"";position:absolute;inset:-3px;border-radius:50%;border:3px solid var(--accent);animation:pr 3s ease-out infinite;pointer-events:none}
#fb:hover{animation-play-state:paused}.open #fb{animation:none}.open #fb::after{display:none}
.open #fb svg{display:none}.open #fb::before{content:"×";font-size:2.2rem;line-height:1}
@keyframes bn{0%,55%,100%{transform:none}65%{transform:translateY(-16px)}75%{transform:none}85%{transform:translateY(-7px)}92%{transform:none}}
@keyframes pr{0%,55%{transform:scale(1);opacity:.8}100%{transform:scale(1.7);opacity:0}}
.fo{display:flex;flex-direction:column;gap:8px;align-items:flex-end}
.fa{font:.9rem var(--f2);text-transform:uppercase;text-decoration:none;background:var(--bg);color:var(--ink);border:3px solid var(--ink);padding:10px 16px;box-shadow:4px 4px 0 var(--ink);animation:pop .25s ease-out}
.fa:hover{background:var(--accent);color:#fff}@keyframes pop{from{opacity:0;transform:translateY(10px) scale(.9)}}
.smp{background:var(--accent);color:#fff;padding:1px 6px;font-weight:400;font-size:.7rem;text-transform:uppercase}
.shot.vid{position:relative}.shot.vid::after{content:"▶";position:absolute;inset:0;margin:auto;width:64px;height:64px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;border:3px solid var(--ink);box-shadow:3px 3px 0 var(--ink);font-size:1.3rem;padding-left:4px}
#lbi video{width:auto;max-width:100%;max-height:80vh;margin:auto;background:#000}
.quote.rec p{font-size:1.15rem}