:root{--shape-scallop-below:url("data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 546.4 114.0%22 preserveAspectRatio%3D%22none%22 xmlns%3Ac2pa%3D%22http%3A%2F%2Fc2pa.org%2Fmanifest%22%3E%3Cmetadata%3E%3Cc2pa%3Amanifest%3EAAAWgmp1bWIAAAAeanVtZGMycGEAEQAQgAAAqgA4m3EDYzJwYQAAABZcanVtYgAAAEdqdW1kYzJtYQARABCAAACqADibcQN1cm46YzJwYTplYjcyMzA1MS0zYjI4LTRmOTktYTQwNS1lNjk0MzdmMTk5MmEAAAADl2p1bWIAAAApanVtZGMyYXMAEQAQgAAAqgA4m3EDYzJwYS5hc3NlcnRpb25zAAAAALxqdW1iAAAARGp1bWRjYm9yABEAEIAAAKoAOJtxE2MycGEuaW5ncmVkaWVudC52MwAAAAAYYzJzaFA3ZuPRp2HvzmEKCYJOCk4AAABwY2JvcqNpZGM6Zm9ybWF0bWltYWdlL3N2Zyt4bWxqaW5zdGFuY2VJRHgseG1wOmlpZDpjM2JlNjE1Mi04ZjMxLTQ4NGEtYjk4Yy02OGU1YzhiN2FjM2FscmVsYXRpb25zaGlwaHBhcmVudE9mAAAB4mp1bWIAAABBanVtZGNib3IAEQAQgAAAqgA4m3ETYzJwYS5hY3Rpb25zLnYyAAAAABhjMnNoLPLoIL2AzM3BqqBGstC7MAAAAZljYm9yomdhY3Rpb25zgqJmYWN0aW9ua2MycGEub3BlbmVkanBhcmFtZXRlcnOha2luZ3JlZGllbnRzgaJjdXJseC1zZWxmI2p1bWJmPWMycGEuYXNzZXJ0aW9ucy9jMnBhLmluZ3JlZGllbnQudjNkaGFzaFggRQOaZCXs9yaVllVToUzMr%2FUuQAe7OOIM4NljhDXFH%2B%2BkZmFjdGlvbngdY29tLmFudGhyb3BpYy5jbGF1ZGUucHJvdmlkZWRqcGFyYW1ldGVyc6F4H2NvbS5hbnRocm9waWMub3JpZ2luLWNvbmZpZGVuY2VndW5rbm93bmtkZXNjcmlwdGlvbnhmQ2xhdWRlIHByb3ZpZGVkIHRoaXMgZmlsZSBhdCB0aGUgcmVxdWVzdCBvZiBhIHVzZXIgYW5kIG1heSBoYXZlIGNyZWF0ZWQgb3IgbW9kaWZpZWQgdGhlIGZpbGUgY29udGVudHMubXNvZnR3YXJlQWdlbnShZG5hbWVmQ2xhdWRlcmFsbEFjdGlvbnNJbmNsdWRlZPUAAADIanVtYgAAAEBqdW1kY2JvcgARABCAAACqADibcRNjMnBhLmhhc2guZGF0YQAAAAAYYzJzaETs8xHckgSfpja3PEDfTNcAAACAY2JvcqVjYWxnZnNoYTI1NmNwYWRNAAAAAAAAAAAAAAAAAGRoYXNoWCDxBKqiLtH7XtNi5n4aGYHFJFhv3k%2BceYGCA02m1UK6i2RuYW1lbmp1bWJmIG1hbmlmZXN0amV4Y2x1c2lvbnOBomVzdGFydBicZmxlbmd0aBkeBAAAAj5qdW1iAAAAJ2p1bWRjMmNsABEAEIAAAKoAOJtxA2MycGEuY2xhaW0udjIAAAACD2Nib3KlY2FsZ2ZzaGEyNTZpc2lnbmF0dXJleE1zZWxmI2p1bWJmPS9jMnBhL3VybjpjMnBhOmViNzIzMDUxLTNiMjgtNGY5OS1hNDA1LWU2OTQzN2YxOTkyYS9jMnBhLnNpZ25hdHVyZWppbnN0YW5jZUlEeCx4bXA6aWlkOjRjYTVjZTUzLTY1NTItNGE5Mi05NzUyLTY5ODExNGUxN2RhMHJjcmVhdGVkX2Fzc2VydGlvbnODomN1cmx4LXNlbGYjanVtYmY9YzJwYS5hc3NlcnRpb25zL2MycGEuaW5ncmVkaWVudC52M2RoYXNoWCBFA5pkJez3JpWWVVOhTMyv9S5AB7s44gzg2WOENcUf76JjdXJseCpzZWxmI2p1bWJmPWMycGEuYXNzZXJ0aW9ucy9jMnBhLmFjdGlvbnMudjJkaGFzaFggCT3fnzNWx6LqnsIAaol8pEkPIbajbo4jYQ25zJwdT1miY3VybHgpc2VsZiNqdW1iZj1jMnBhLmFzc2VydGlvbnMvYzJwYS5oYXNoLmRhdGFkaGFzaFggFrDea6ib0a539FPjKoKp99RhpF7uDOERL4T321LMWs90Y2xhaW1fZ2VuZXJhdG9yX2luZm%2BjZG5hbWVvQW50aHJvcGljIEZpbGVzZ3ZlcnNpb25lMS4wLjBrc3BlY1ZlcnNpb25lMi40LjAAABA4anVtYgAAAChqdW1kYzJjcwARABCAAACqADibcQNjMnBhLnNpZ25hdHVyZQAAABAIY2JvctKEWQISogEmGCFZAgowggIGMIIBjaADAgECAhRA5aAK7sI50L64g%2FoGQgU9Z1UTADAKBggqhkjOPQQDAzBJMRcwFQYDVQQKEw5BbnRocm9waWMsIFBCQzEuMCwGA1UEAxMlQW50aHJvcGljIENvbnRlbnQgQ3JlZGVudGlhbHMgUm9vdCBDQTAeFw0yNjA4MDcxODQzNTZaFw0yODA4MDYxOTQzNTZaMEQxFzAVBgNVBAoTDkFudGhyb3BpYywgUEJDMSkwJwYDVQQDEyBBbnRocm9waWMgQ2xhdWRlIENvbnRlbnQgU2lnbmluZzBZMBMGByqGSM49AgEGCCqGSM49AwEHA0IABJh6CmvLUBgFFNU0vUKlOVtE6djd17L5SuwX0LemFisBM3dkd%2F3cyjxFA3Qo5S46fX0%2FihY0VZ7mfb9KF703t5OjWDBWMA4GA1UdDwEB%2FwQEAwIHgDAVBgNVHSUEDjAMBgorBgEEAYPoXgIBMAwGA1UdEwEB%2FwQCMAAwHwYDVR0jBBgwFoAUzlHiBIFOZFsj%2BOPEz5o%2BnMHXXMIwCgYIKoZIzj0EAwMDZwAwZAIwMXMdFJ4BetLLVY7ORuE9noqbbAZOZn%2FaArXyTwFAZfKrPzxF2vPoJNf1%2BUCdg1XGAjBwX1zd9WGqYkqmL5SFqw1QySjr1zJfpJM9%2B1rdDwSPLMOPOjKuiXjoU%2FpUUeG9RwmhY3BhZFkNngAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAPZYQNg2dsoeTY%2B6I2WGzUvRFdyLVZGPR5bPY3kuzqSrk%2F4pDAeal4UbKeMB%2Bldc7HNVi0QfgI%2BGYI5Xht340j9nR8k%3D%3C%2Fc2pa%3Amanifest%3E%3C%2Fmetadata%3E%3Cpath fill%3D%22%23000%22 d%3D%22M0%2C114.0 L0%2C114.0 L0%2C114.0 L1.2%2C114.0 L3.2%2C114.0 L5.2%2C114.0 L7.2%2C113.9 L9.2%2C113.8 L11.2%2C113.6 L13.2%2C113.3 L15.2%2C113.0 L17.2%2C112.8 L19.2%2C112.4 L21.2%2C112.1 L23.2%2C111.8 L25.2%2C111.4 L27.2%2C110.8 L29.2%2C110.4 L31.2%2C109.8 L33.2%2C109.2 L35.2%2C108.6 L37.2%2C108.0 L39.2%2C107.3 L41.2%2C106.6 L43.2%2C105.8 L45.2%2C105.0 L47.2%2C104.2 L49.2%2C103.4 L51.2%2C102.6 L53.2%2C101.7 L55.2%2C100.7 L57.2%2C99.6 L59.2%2C98.4 L61.2%2C97.2 L63.2%2C96.0 L65.2%2C94.8 L67.2%2C93.5 L69.2%2C92.2 L71.2%2C90.8 L73.2%2C89.4 L75.2%2C87.8 L77.2%2C86.3 L79.2%2C84.6 L81.2%2C82.8 L83.2%2C81.0 L85.2%2C79.2 L87.2%2C77.4 L89.2%2C75.6 L91.2%2C73.8 L93.2%2C71.9 L95.2%2C70.0 L97.2%2C68.1 L99.2%2C66.3 L101.2%2C64.5 L103.2%2C62.8 L105.2%2C61.1 L107.2%2C59.5 L109.2%2C57.8 L111.2%2C56.3 L113.2%2C54.7 L115.2%2C53.3 L117.2%2C51.7 L119.2%2C50.3 L121.2%2C48.9 L123.2%2C47.5 L125.2%2C46.1 L127.2%2C44.8 L129.2%2C43.4 L131.2%2C42.0 L133.2%2C40.8 L135.2%2C39.5 L137.2%2C38.3 L139.2%2C37.2 L141.2%2C36.0 L143.2%2C34.8 L145.2%2C33.7 L147.2%2C32.6 L149.2%2C31.4 L151.2%2C30.3 L153.2%2C29.2 L155.2%2C28.1 L157.2%2C27.0 L159.2%2C26.1 L161.2%2C25.2 L163.2%2C24.4 L165.2%2C23.6 L167.2%2C22.8 L169.2%2C21.9 L171.2%2C21.1 L173.2%2C20.2 L175.2%2C19.4 L177.2%2C18.6 L179.2%2C17.9 L181.2%2C17.1 L183.2%2C16.4 L185.2%2C15.7 L187.2%2C15.0 L189.2%2C14.3 L191.2%2C13.7 L193.2%2C13.0 L195.2%2C12.3 L197.2%2C11.7 L199.2%2C11.0 L201.2%2C10.4 L203.2%2C9.8 L205.2%2C9.3 L207.2%2C8.7 L209.2%2C8.3 L211.2%2C7.7 L213.2%2C7.3 L215.2%2C6.8 L217.2%2C6.4 L219.2%2C6.0 L221.2%2C5.6 L223.2%2C5.2 L225.2%2C4.8 L227.2%2C4.5 L229.2%2C4.1 L231.2%2C3.8 L233.2%2C3.5 L235.2%2C3.2 L237.2%2C2.8 L239.2%2C2.5 L241.2%2C2.3 L243.2%2C2.1 L245.2%2C1.9 L247.2%2C1.7 L249.2%2C1.5 L251.2%2C1.3 L253.2%2C1.1 L255.2%2C1.0 L257.2%2C1.0 L259.2%2C1.0 L261.2%2C1.0 L263.2%2C0.9 L265.2%2C0.7 L267.2%2C0.5 L269.2%2C0.3 L271.2%2C0.1 L273.2%2C0.0 L275.2%2C0.1 L277.2%2C0.3 L279.2%2C0.5 L281.2%2C0.7 L283.2%2C0.9 L285.2%2C1.0 L287.2%2C1.0 L289.2%2C1.0 L291.2%2C1.0 L293.2%2C1.1 L295.2%2C1.3 L297.2%2C1.5 L299.2%2C1.7 L301.2%2C1.9 L303.2%2C2.1 L305.2%2C2.3 L307.2%2C2.5 L309.2%2C2.8 L311.2%2C3.2 L313.2%2C3.5 L315.2%2C3.8 L317.2%2C4.1 L319.2%2C4.5 L321.2%2C4.8 L323.2%2C5.2 L325.2%2C5.6 L327.2%2C6.0 L329.2%2C6.4 L331.2%2C6.8 L333.2%2C7.3 L335.2%2C7.7 L337.2%2C8.3 L339.2%2C8.7 L341.2%2C9.3 L343.2%2C9.8 L345.2%2C10.4 L347.2%2C11.0 L349.2%2C11.7 L351.2%2C12.3 L353.2%2C13.0 L355.2%2C13.7 L357.2%2C14.3 L359.2%2C15.0 L361.2%2C15.7 L363.2%2C16.4 L365.2%2C17.1 L367.2%2C17.9 L369.2%2C18.6 L371.2%2C19.4 L373.2%2C20.2 L375.2%2C21.1 L377.2%2C21.9 L379.2%2C22.8 L381.2%2C23.6 L383.2%2C24.4 L385.2%2C25.2 L387.2%2C26.1 L389.2%2C27.0 L391.2%2C28.1 L393.2%2C29.2 L395.2%2C30.3 L397.2%2C31.4 L399.2%2C32.6 L401.2%2C33.7 L403.2%2C34.8 L405.2%2C36.0 L407.2%2C37.2 L409.2%2C38.3 L411.2%2C39.5 L413.2%2C40.8 L415.2%2C42.0 L417.2%2C43.4 L419.2%2C44.8 L421.2%2C46.1 L423.2%2C47.5 L425.2%2C48.9 L427.2%2C50.3 L429.2%2C51.7 L431.2%2C53.3 L433.2%2C54.7 L435.2%2C56.3 L437.2%2C57.8 L439.2%2C59.5 L441.2%2C61.1 L443.2%2C62.8 L445.2%2C64.5 L447.2%2C66.3 L449.2%2C68.1 L451.2%2C70.0 L453.2%2C71.9 L455.2%2C73.8 L457.2%2C75.6 L459.2%2C77.4 L461.2%2C79.2 L463.2%2C81.0 L465.2%2C82.8 L467.2%2C84.6 L469.2%2C86.3 L471.2%2C87.8 L473.2%2C89.4 L475.2%2C90.8 L477.2%2C92.2 L479.2%2C93.5 L481.2%2C94.8 L483.2%2C96.0 L485.2%2C97.2 L487.2%2C98.4 L489.2%2C99.6 L491.2%2C100.7 L493.2%2C101.7 L495.2%2C102.6 L497.2%2C103.4 L499.2%2C104.2 L501.2%2C105.0 L503.2%2C105.8 L505.2%2C106.6 L507.2%2C107.3 L509.2%2C108.0 L511.2%2C108.6 L513.2%2C109.2 L515.2%2C109.8 L517.2%2C110.4 L519.2%2C110.8 L521.2%2C111.4 L523.2%2C111.8 L525.2%2C112.1 L527.2%2C112.4 L529.2%2C112.8 L531.2%2C113.0 L533.2%2C113.3 L535.2%2C113.6 L537.2%2C113.8 L539.2%2C113.9 L541.2%2C114.0 L543.2%2C114.0 L545.2%2C114.0 L546.4%2C114.0 L546.4%2C114.0 Z%22%2F%3E%3C%2Fsvg%3E");--shape-scallop-above:url("data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 546.4 114.0%22 preserveAspectRatio%3D%22none%22 xmlns%3Ac2pa%3D%22http%3A%2F%2Fc2pa.org%2Fmanifest%22%3E%3Cmetadata%3E%3Cc2pa%3Amanifest%3EAAAWgmp1bWIAAAAeanVtZGMycGEAEQAQgAAAqgA4m3EDYzJwYQAAABZcanVtYgAAAEdqdW1kYzJtYQARABCAAACqADibcQN1cm46YzJwYTo2NTA1ZWZhOS1mMGQ3LTQ4MWYtYmMwMi1iNzA0YWQ5NmZkNzUAAAADl2p1bWIAAAApanVtZGMyYXMAEQAQgAAAqgA4m3EDYzJwYS5hc3NlcnRpb25zAAAAALxqdW1iAAAARGp1bWRjYm9yABEAEIAAAKoAOJtxE2MycGEuaW5ncmVkaWVudC52MwAAAAAYYzJzaDN3bYSEU1xJAZ7gOw1SQGEAAABwY2JvcqNpZGM6Zm9ybWF0bWltYWdlL3N2Zyt4bWxqaW5zdGFuY2VJRHgseG1wOmlpZDo4Y2M5OTM0Yi1jOGVhLTQ4NzktODY4OS04NjJmMDJiNTVlZGJscmVsYXRpb25zaGlwaHBhcmVudE9mAAAB4mp1bWIAAABBanVtZGNib3IAEQAQgAAAqgA4m3ETYzJwYS5hY3Rpb25zLnYyAAAAABhjMnNoVTt4v7j4K9NyZ7XeRLbQnwAAAZljYm9yomdhY3Rpb25zgqJmYWN0aW9ua2MycGEub3BlbmVkanBhcmFtZXRlcnOha2luZ3JlZGllbnRzgaJjdXJseC1zZWxmI2p1bWJmPWMycGEuYXNzZXJ0aW9ucy9jMnBhLmluZ3JlZGllbnQudjNkaGFzaFggKhx2%2F71gs%2BMVO1V5X3QVrUUHsrxQxrP0v7iYqiM%2BAnKkZmFjdGlvbngdY29tLmFudGhyb3BpYy5jbGF1ZGUucHJvdmlkZWRqcGFyYW1ldGVyc6F4H2NvbS5hbnRocm9waWMub3JpZ2luLWNvbmZpZGVuY2VndW5rbm93bmtkZXNjcmlwdGlvbnhmQ2xhdWRlIHByb3ZpZGVkIHRoaXMgZmlsZSBhdCB0aGUgcmVxdWVzdCBvZiBhIHVzZXIgYW5kIG1heSBoYXZlIGNyZWF0ZWQgb3IgbW9kaWZpZWQgdGhlIGZpbGUgY29udGVudHMubXNvZnR3YXJlQWdlbnShZG5hbWVmQ2xhdWRlcmFsbEFjdGlvbnNJbmNsdWRlZPUAAADIanVtYgAAAEBqdW1kY2JvcgARABCAAACqADibcRNjMnBhLmhhc2guZGF0YQAAAAAYYzJzaCqDp5OfaQbLPBEgzTqhthMAAACAY2JvcqVjYWxnZnNoYTI1NmNwYWRNAAAAAAAAAAAAAAAAAGRoYXNoWCAIXDC2cGXTr3V8ENBQr3LphyEI4Q7fuyTnC35qfJDYd2RuYW1lbmp1bWJmIG1hbmlmZXN0amV4Y2x1c2lvbnOBomVzdGFydBicZmxlbmd0aBkeBAAAAj5qdW1iAAAAJ2p1bWRjMmNsABEAEIAAAKoAOJtxA2MycGEuY2xhaW0udjIAAAACD2Nib3KlY2FsZ2ZzaGEyNTZpc2lnbmF0dXJleE1zZWxmI2p1bWJmPS9jMnBhL3VybjpjMnBhOjY1MDVlZmE5LWYwZDctNDgxZi1iYzAyLWI3MDRhZDk2ZmQ3NS9jMnBhLnNpZ25hdHVyZWppbnN0YW5jZUlEeCx4bXA6aWlkOjgzODYwY2QyLWU2ZmItNGFjZC05MDMwLWMyOGU0Yjg5OWNjY3JjcmVhdGVkX2Fzc2VydGlvbnODomN1cmx4LXNlbGYjanVtYmY9YzJwYS5hc3NlcnRpb25zL2MycGEuaW5ncmVkaWVudC52M2RoYXNoWCAqHHb%2FvWCz4xU7VXlfdBWtRQeyvFDGs%2FS%2FuJiqIz4CcqJjdXJseCpzZWxmI2p1bWJmPWMycGEuYXNzZXJ0aW9ucy9jMnBhLmFjdGlvbnMudjJkaGFzaFggt8PEG9sFOlTbsCgfsNGWPosc%2BdvtJ%2Fw7h8F61NmDtC6iY3VybHgpc2VsZiNqdW1iZj1jMnBhLmFzc2VydGlvbnMvYzJwYS5oYXNoLmRhdGFkaGFzaFggrmz9cXy1HLqfq%2BM1FsngIqNrXYV%2BQxuPXYEhRAPTkTV0Y2xhaW1fZ2VuZXJhdG9yX2luZm%2BjZG5hbWVvQW50aHJvcGljIEZpbGVzZ3ZlcnNpb25lMS4wLjBrc3BlY1ZlcnNpb25lMi40LjAAABA4anVtYgAAAChqdW1kYzJjcwARABCAAACqADibcQNjMnBhLnNpZ25hdHVyZQAAABAIY2JvctKEWQISogEmGCFZAgowggIGMIIBjaADAgECAhRA5aAK7sI50L64g%2FoGQgU9Z1UTADAKBggqhkjOPQQDAzBJMRcwFQYDVQQKEw5BbnRocm9waWMsIFBCQzEuMCwGA1UEAxMlQW50aHJvcGljIENvbnRlbnQgQ3JlZGVudGlhbHMgUm9vdCBDQTAeFw0yNjA4MDcxODQzNTZaFw0yODA4MDYxOTQzNTZaMEQxFzAVBgNVBAoTDkFudGhyb3BpYywgUEJDMSkwJwYDVQQDEyBBbnRocm9waWMgQ2xhdWRlIENvbnRlbnQgU2lnbmluZzBZMBMGByqGSM49AgEGCCqGSM49AwEHA0IABJh6CmvLUBgFFNU0vUKlOVtE6djd17L5SuwX0LemFisBM3dkd%2F3cyjxFA3Qo5S46fX0%2FihY0VZ7mfb9KF703t5OjWDBWMA4GA1UdDwEB%2FwQEAwIHgDAVBgNVHSUEDjAMBgorBgEEAYPoXgIBMAwGA1UdEwEB%2FwQCMAAwHwYDVR0jBBgwFoAUzlHiBIFOZFsj%2BOPEz5o%2BnMHXXMIwCgYIKoZIzj0EAwMDZwAwZAIwMXMdFJ4BetLLVY7ORuE9noqbbAZOZn%2FaArXyTwFAZfKrPzxF2vPoJNf1%2BUCdg1XGAjBwX1zd9WGqYkqmL5SFqw1QySjr1zJfpJM9%2B1rdDwSPLMOPOjKuiXjoU%2FpUUeG9RwmhY3BhZFkNngAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAPZYQAIkavW8OhP9fT47ZCumFT0okkY6zimxUc2AISTkhEXkWwwzBaIWKa4PEzaCopLg4jQSvfCOrBievN1mOxEQfvw%3D%3C%2Fc2pa%3Amanifest%3E%3C%2Fmetadata%3E%3Cpath fill%3D%22%23000%22 d%3D%22M0%2C0 L0%2C114.0 L0%2C114.0 L1.2%2C114.0 L3.2%2C114.0 L5.2%2C114.0 L7.2%2C113.9 L9.2%2C113.8 L11.2%2C113.6 L13.2%2C113.3 L15.2%2C113.0 L17.2%2C112.8 L19.2%2C112.4 L21.2%2C112.1 L23.2%2C111.8 L25.2%2C111.4 L27.2%2C110.8 L29.2%2C110.4 L31.2%2C109.8 L33.2%2C109.2 L35.2%2C108.6 L37.2%2C108.0 L39.2%2C107.3 L41.2%2C106.6 L43.2%2C105.8 L45.2%2C105.0 L47.2%2C104.2 L49.2%2C103.4 L51.2%2C102.6 L53.2%2C101.7 L55.2%2C100.7 L57.2%2C99.6 L59.2%2C98.4 L61.2%2C97.2 L63.2%2C96.0 L65.2%2C94.8 L67.2%2C93.5 L69.2%2C92.2 L71.2%2C90.8 L73.2%2C89.4 L75.2%2C87.8 L77.2%2C86.3 L79.2%2C84.6 L81.2%2C82.8 L83.2%2C81.0 L85.2%2C79.2 L87.2%2C77.4 L89.2%2C75.6 L91.2%2C73.8 L93.2%2C71.9 L95.2%2C70.0 L97.2%2C68.1 L99.2%2C66.3 L101.2%2C64.5 L103.2%2C62.8 L105.2%2C61.1 L107.2%2C59.5 L109.2%2C57.8 L111.2%2C56.3 L113.2%2C54.7 L115.2%2C53.3 L117.2%2C51.7 L119.2%2C50.3 L121.2%2C48.9 L123.2%2C47.5 L125.2%2C46.1 L127.2%2C44.8 L129.2%2C43.4 L131.2%2C42.0 L133.2%2C40.8 L135.2%2C39.5 L137.2%2C38.3 L139.2%2C37.2 L141.2%2C36.0 L143.2%2C34.8 L145.2%2C33.7 L147.2%2C32.6 L149.2%2C31.4 L151.2%2C30.3 L153.2%2C29.2 L155.2%2C28.1 L157.2%2C27.0 L159.2%2C26.1 L161.2%2C25.2 L163.2%2C24.4 L165.2%2C23.6 L167.2%2C22.8 L169.2%2C21.9 L171.2%2C21.1 L173.2%2C20.2 L175.2%2C19.4 L177.2%2C18.6 L179.2%2C17.9 L181.2%2C17.1 L183.2%2C16.4 L185.2%2C15.7 L187.2%2C15.0 L189.2%2C14.3 L191.2%2C13.7 L193.2%2C13.0 L195.2%2C12.3 L197.2%2C11.7 L199.2%2C11.0 L201.2%2C10.4 L203.2%2C9.8 L205.2%2C9.3 L207.2%2C8.7 L209.2%2C8.3 L211.2%2C7.7 L213.2%2C7.3 L215.2%2C6.8 L217.2%2C6.4 L219.2%2C6.0 L221.2%2C5.6 L223.2%2C5.2 L225.2%2C4.8 L227.2%2C4.5 L229.2%2C4.1 L231.2%2C3.8 L233.2%2C3.5 L235.2%2C3.2 L237.2%2C2.8 L239.2%2C2.5 L241.2%2C2.3 L243.2%2C2.1 L245.2%2C1.9 L247.2%2C1.7 L249.2%2C1.5 L251.2%2C1.3 L253.2%2C1.1 L255.2%2C1.0 L257.2%2C1.0 L259.2%2C1.0 L261.2%2C1.0 L263.2%2C0.9 L265.2%2C0.7 L267.2%2C0.5 L269.2%2C0.3 L271.2%2C0.1 L273.2%2C0.0 L275.2%2C0.1 L277.2%2C0.3 L279.2%2C0.5 L281.2%2C0.7 L283.2%2C0.9 L285.2%2C1.0 L287.2%2C1.0 L289.2%2C1.0 L291.2%2C1.0 L293.2%2C1.1 L295.2%2C1.3 L297.2%2C1.5 L299.2%2C1.7 L301.2%2C1.9 L303.2%2C2.1 L305.2%2C2.3 L307.2%2C2.5 L309.2%2C2.8 L311.2%2C3.2 L313.2%2C3.5 L315.2%2C3.8 L317.2%2C4.1 L319.2%2C4.5 L321.2%2C4.8 L323.2%2C5.2 L325.2%2C5.6 L327.2%2C6.0 L329.2%2C6.4 L331.2%2C6.8 L333.2%2C7.3 L335.2%2C7.7 L337.2%2C8.3 L339.2%2C8.7 L341.2%2C9.3 L343.2%2C9.8 L345.2%2C10.4 L347.2%2C11.0 L349.2%2C11.7 L351.2%2C12.3 L353.2%2C13.0 L355.2%2C13.7 L357.2%2C14.3 L359.2%2C15.0 L361.2%2C15.7 L363.2%2C16.4 L365.2%2C17.1 L367.2%2C17.9 L369.2%2C18.6 L371.2%2C19.4 L373.2%2C20.2 L375.2%2C21.1 L377.2%2C21.9 L379.2%2C22.8 L381.2%2C23.6 L383.2%2C24.4 L385.2%2C25.2 L387.2%2C26.1 L389.2%2C27.0 L391.2%2C28.1 L393.2%2C29.2 L395.2%2C30.3 L397.2%2C31.4 L399.2%2C32.6 L401.2%2C33.7 L403.2%2C34.8 L405.2%2C36.0 L407.2%2C37.2 L409.2%2C38.3 L411.2%2C39.5 L413.2%2C40.8 L415.2%2C42.0 L417.2%2C43.4 L419.2%2C44.8 L421.2%2C46.1 L423.2%2C47.5 L425.2%2C48.9 L427.2%2C50.3 L429.2%2C51.7 L431.2%2C53.3 L433.2%2C54.7 L435.2%2C56.3 L437.2%2C57.8 L439.2%2C59.5 L441.2%2C61.1 L443.2%2C62.8 L445.2%2C64.5 L447.2%2C66.3 L449.2%2C68.1 L451.2%2C70.0 L453.2%2C71.9 L455.2%2C73.8 L457.2%2C75.6 L459.2%2C77.4 L461.2%2C79.2 L463.2%2C81.0 L465.2%2C82.8 L467.2%2C84.6 L469.2%2C86.3 L471.2%2C87.8 L473.2%2C89.4 L475.2%2C90.8 L477.2%2C92.2 L479.2%2C93.5 L481.2%2C94.8 L483.2%2C96.0 L485.2%2C97.2 L487.2%2C98.4 L489.2%2C99.6 L491.2%2C100.7 L493.2%2C101.7 L495.2%2C102.6 L497.2%2C103.4 L499.2%2C104.2 L501.2%2C105.0 L503.2%2C105.8 L505.2%2C106.6 L507.2%2C107.3 L509.2%2C108.0 L511.2%2C108.6 L513.2%2C109.2 L515.2%2C109.8 L517.2%2C110.4 L519.2%2C110.8 L521.2%2C111.4 L523.2%2C111.8 L525.2%2C112.1 L527.2%2C112.4 L529.2%2C112.8 L531.2%2C113.0 L533.2%2C113.3 L535.2%2C113.6 L537.2%2C113.8 L539.2%2C113.9 L541.2%2C114.0 L543.2%2C114.0 L545.2%2C114.0 L546.4%2C114.0 L546.4%2C0 Z%22%2F%3E%3C%2Fsvg%3E");}

/* ── fonts.css ── */
/*
  BRAND FONTS — files live in public/fonts/ (served as /fonts/…). Every page gets them from here, so a font
  change is made in this file + the three variables in tokens.css (--font-heading / --font-body / --font-accent).

    Themysion.woff        heading / big signature script  — commercial webfont licence purchased
    Gaegu-*.woff          body                             — Google Fonts, SIL Open Font License (OFL-Gaegu.txt)
    Zeyada-Regular.woff   handwritten accent               — Google Fonts, SIL Open Font License (OFL-Zeyada.txt)

  Gaegu and Zeyada are trimmed to Latin (Gaegu ships with a huge Korean set) so they stay a few dozen KB.
  Alternate accents kept out of the site for now: Give You Glory, Over the Rainbow (see public/fonts/README.md).
*/
@font-face {
  font-family: 'Themysion';
  src: url('fonts/Themysion.woff') format('woff');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Gaegu';
  src: url('fonts/Gaegu-Regular.woff') format('woff');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Gaegu';
  src: url('fonts/Gaegu-Bold.woff') format('woff');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'Zeyada';
  src: url('fonts/Zeyada-Regular.woff') format('woff');
  font-weight: 400;
  font-display: swap;
  /* Zeyada is drawn much larger than the accent script it replaces; this keeps the design's label sizes
     without touching any element's font-size. Tune here if you change the accent font. */
  size-adjust: 72%;
}

/* ── tokens.css ── */
/* ─────────────────────────────────────────────────────────────
   GLOBAL DESIGN TOKENS  (source: DESIGN-SPEC.md + measured from the Canva PNGs)
   ───────────────────────────────────────────────────────────── */
:root {
  /* Palette */
  --burgundy: #5A1E35;
  --blue: #A9D8F5;
  --cream: #F7F3EF;      /* text on burgundy, per DESIGN-SPEC */
  --butter: #FFF9D2;     /* pale yellow used for cards, the tools strip & sparkle doodles in the Canva frames */
  --ink: #1C1C24;        /* "Black" */
  --nav-muted: #3F5C74;  /* inactive nav links (Canva used ≈#607D94; darkened slightly to pass AA contrast) */

  /* Typography */
  --font-heading: 'Themysion', 'Segoe Script', 'Snell Roundhand', 'Brush Script MT', cursive;
  --font-body: 'Gaegu', 'Chalkboard SE', 'Comic Sans MS', 'Trebuchet MS', system-ui, sans-serif;
  --font-accent: 'Zeyada', 'Themysion', 'Segoe Script', 'Snell Roundhand', cursive;

  /* Motion */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);

  /* Effects */
  --shadow-card: 0 10px 28px rgba(22, 4, 12, .38);

  /*
    LAYOUT UNIT
    The Canva frames are 1366px wide. On desktop (≥1000px) the page is laid out on that
    canvas and scaled with the viewport: --u is "one Canva pixel".  e.g. width: calc(var(--u) * 734)
    Capped so ultra-wide monitors don't blow the art up forever.
    On phones/tablets (<1000px) --u is redefined below to a 430px-wide mobile canvas.
  */
  --u: min(calc(100vw / 1366), 1.5px);
}

/* Reel unit (Creator page): on desktop the reels use the same canvas unit as everything else; on phones/tablets they
   use a gentler scale so a phone frame / photo is a comfortable size rather than blown up with the 430px canvas. */
:root { --ru: var(--u); }

@media (max-width: 999px) {
  :root { --u: min(calc(100vw / 430), 1.7px); --ru: clamp(.8px, calc(100vw / 560), 1.2px); }
}

/* ── base.css ── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
body {
  margin: 0;
  background: var(--blue);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5;
  overflow-x: hidden;           /* decorative art bleeds off the edges on purpose */
  -webkit-font-smoothing: antialiased;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
/* art that is positioned/sized explicitly must never be squeezed by its container */
.doodle, .swash, .hero__shadow, .hero__photo, .contact__shadow, .contact__photo, .card__img, .card__decor { max-width: none; }
h1, h2, h3, p, ul, ol, figure, address { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }

.visually-hidden {
  font-weight: 400;   /* screen-reader-only headings: no need to download the bold face */
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

.skip-link {
  position: fixed; left: 12px; top: 12px; z-index: 100;
  padding: 10px 16px; border-radius: 999px;
  background: var(--ink); color: var(--cream);
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

:focus-visible { outline: 3px dashed var(--ink); outline-offset: 4px; border-radius: 4px; }

/* Reveal-on-scroll (only when JS is running, so the page is fully visible without it) */
.js .reveal { opacity: 0; transform: translateY(28px); }
.js .reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity .7s var(--ease-out), transform .8s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 110ms);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal { opacity: 1; transform: none; }
}

/* ── components.css ── */
/* ─────────────────────────────────────────────────────────────
   REUSABLE COMPONENTS  (layout/position lives in the page CSS)
   ───────────────────────────────────────────────────────────── */

/* ── Logo + primary nav ─────────────────────────────────────── */
.site-logo { display: block; transition: transform .4s var(--ease-spring); }
.site-logo:hover { transform: rotate(-4deg) scale(1.06); }
.site-logo img { width: 100%; height: auto; }

.site-nav__list { display: flex; align-items: center; }
.site-nav__link {
  position: relative; display: block;
  color: var(--nav-muted); letter-spacing: .025em;
  transition: color .25s;
}
.site-nav__link::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -.2em; height: 2px; border-radius: 2px;
  background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease-out);
}
.site-nav__link:hover, .site-nav__link:focus-visible { color: var(--ink); }
.site-nav__link:hover::after, .site-nav__link:focus-visible::after { transform: scaleX(1); }
.site-nav__link.is-active { color: var(--ink); }

/* ── Wavy section edge (mask shapes are inlined by the build) ─ */
.scallop {
  --tile: clamp(96px, calc(100vw / 3), 200px);   /* phones/tablets: ~3 domes across */
  display: block; width: 100%;
  height: calc(var(--tile) * 114 / 546.4);
  background: var(--fill, var(--burgundy));
  -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x;
  -webkit-mask-size: var(--tile) 100%; mask-size: var(--tile) 100%;
  -webkit-mask-position: calc(var(--tile) * -0.015) 0; mask-position: calc(var(--tile) * -0.015) 0;
}
.scallop--below { -webkit-mask-image: var(--shape-scallop-below); mask-image: var(--shape-scallop-below); }
.scallop--above { -webkit-mask-image: var(--shape-scallop-above); mask-image: var(--shape-scallop-above); }
@media (min-width: 1000px) { .scallop { --tile: calc(var(--u) * 273.2); } }

/* ── Doodles (hand-drawn stickers) ───────────────────────────── */
.doodle { position: absolute; height: auto; pointer-events: none; user-select: none; }
.doodle--twinkle { animation: twinkle 5.5s ease-in-out infinite; transform-origin: 50% 50%; }
.doodle--float { animation: float 6s ease-in-out infinite; }
@keyframes twinkle {
  0%, 100% { transform: rotate(0) scale(1); }
  45% { transform: rotate(-4deg) scale(1.05); }
  70% { transform: rotate(3deg) scale(.97); }
}
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* ── Swash underlines ─────────────────────────────────────────── */
.swash { position: absolute; height: auto; pointer-events: none; }
.swash--ribbon { transform: scaleY(-1); }
.swash--ribbon.is-flipped { transform: scale(-1, -1); }
.swash.is-flipped { transform: scaleX(-1); }
.swash--flourish { color: var(--ink); overflow: visible; }

/* ── Phone video (a single video in the same hand-drawn phone mockup as the Creator page's
   short-form videos — see src/components/PhoneVideo.mjs and src/components/VideoCard.mjs) ──
   Sized entirely in cqw (1% of this element's own width, via container-type: inline-size — the
   same technique src/components/InteractiveMockup.mjs uses for its device mockups), so the whole
   thing scales with whatever box the page puts it in. Built around a 9:16 (portrait phone-shot)
   video: the screen's own aspect ratio below is exactly 9:16, so a 9:16 video shows with no crop. */
.phone-video {
  position: relative; margin: 0; width: 100%;
  aspect-ratio: 285.9 / 488; container-type: inline-size;
}
/* the bezel is a CHILD of the container, not the container itself — a container's own box can't be
   sized in its own cqw (that would be circular), so every cqw value below lives one level down. */
.phone-video__bezel {
  position: absolute; inset: 0; box-sizing: border-box;
  padding: 4.55cqw; border-radius: 14.7cqw;
  background: #17171d; box-shadow: inset 0 0 0 .85cqw #5d5d66, 0 8px 24px rgba(20, 4, 12, .28);
}
.phone-video__screen { position: relative; overflow: hidden; width: 100%; height: 100%; border-radius: 10.15cqw; background: #000; }
.phone-video__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.phone-video__notch {
  position: absolute; z-index: 3; left: 50%; top: 4.55cqw; translate: -50% 0; pointer-events: none;
  width: 37.1cqw; height: 9.45cqw; border-radius: 0 0 6.65cqw 6.65cqw;
  background:
    radial-gradient(circle at 80% 50%, #34343e 0 1.2cqw, transparent 1.35cqw),
    linear-gradient(#34343e, #34343e) 44% 50% / 11.2cqw 1.55cqw no-repeat,
    #17171d;
}
.phone-video__btn { position: absolute; z-index: 0; width: 1.6cqw; background: #2a2a32; }
.phone-video__btn--mute  { left: -1.25cqw; top: 27.3cqw; height: 8.4cqw;  border-radius: 3px 0 0 3px; }
.phone-video__btn--up    { left: -1.25cqw; top: 44.1cqw; height: 15.4cqw; border-radius: 3px 0 0 3px; }
.phone-video__btn--down  { left: -1.25cqw; top: 63.7cqw; height: 15.4cqw; border-radius: 3px 0 0 3px; }
.phone-video__btn--power { right: -1.25cqw; top: 52.5cqw; height: 26.6cqw; border-radius: 0 3px 3px 0; }
.phone-video__play {
  position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; padding: 0;
  border: 0; border-radius: inherit; background: transparent; cursor: pointer; color: var(--burgundy);
}
.phone-video__play:focus-visible { outline: 3px dashed var(--cream); outline-offset: -8px; }
.phone-video__play-icon {
  display: grid; place-items: center; width: 23cqw; min-width: 46px; aspect-ratio: 1; border-radius: 50%;
  background: var(--butter); box-shadow: 0 6px 18px rgba(20, 4, 12, .4);
  transition: transform .4s var(--ease-spring);
}
.phone-video__play-icon svg { width: 46%; height: auto; margin-left: 6%; fill: currentColor; display: block; }
.phone-video__play:hover .phone-video__play-icon, .phone-video__play:focus-visible .phone-video__play-icon { transform: scale(1.1) rotate(-5deg); }
.phone-video.is-started .phone-video__play { display: none; }
.phone-video.is-placeholder .phone-video__screen { background: #10261c; }
.phone-video__label {
  position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; padding: 1rem;
  text-align: center; text-transform: uppercase; letter-spacing: .02em;
  font-family: Arial, 'Helvetica Neue', sans-serif; font-weight: 300; font-size: max(11px, 6.2cqw); line-height: 1.25;
  color: #fff; text-shadow: 0 1px 8px rgba(0, 0, 0, .55);
  pointer-events: none;
}

/* ── Tool logos ────────────────────────────────────────────────── */
.tool { flex: 0 0 auto; width: calc(var(--w) * var(--u)); transition: transform .35s var(--ease-spring); }
.tool:hover { transform: translateY(-6px) rotate(-3deg) scale(1.06); }
.tool__img { width: 100%; height: auto; }

/* ── Contact row + hand-drawn icons ───────────────────────────── */
.contact-link a, .contact-link > span { display: flex; align-items: center; color: var(--burgundy); }
.contact-link__text { position: relative; }
.contact-link a .contact-link__text::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -.12em; height: 2px; border-radius: 2px;
  background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease-out);
}
.contact-link a:hover .contact-link__text::after, .contact-link a:focus-visible .contact-link__text::after { transform: scaleX(1); }
.icon { color: var(--ink); flex: none; height: auto; transition: transform .4s var(--ease-spring); }
.contact-link a:hover .icon, .contact-link a:focus-visible .icon { transform: rotate(-8deg) scale(1.1); }

/* ── Portrait effect: pop-in + burgundy shadow that drifts against the photo + pointer parallax ──
   Shared by the Home hero, the Home contact portrait and the Creator hero, so they always match.
   Markup: put class fx-photo on the portrait and fx-shadow on the shadow behind it, and data-parallax
   on the container that should react to the mouse (site.js feeds it --mx / --my, -1…1).
   Add data-fx-in to the portrait's wrapper to hold the intro until it scrolls into view. */
.fx-photo { translate: calc(var(--mx, 0) * 7px) calc(var(--my, 0) * 5px); transition: translate .5s var(--ease-out); }
.fx-shadow { translate: calc(var(--mx, 0) * -12px) calc(var(--my, 0) * -8px); transition: translate .6s var(--ease-out); }
.js .fx-photo { animation: pop-in .9s var(--ease-out) calc(.1s + var(--pt-delay, 0s)) both; }
.js .fx-shadow { animation: shadow-in 1.1s var(--ease-out) calc(.25s + var(--pt-delay, 0s)) both; }
.js [data-fx-in]:not(.is-in) .fx-photo, .js [data-fx-in]:not(.is-in) .fx-shadow { animation: none; opacity: 0; }
@keyframes pop-in { from { opacity: 0; transform: translateY(28px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes shadow-in { from { opacity: 0; transform: translate(40px, 8px); } to { opacity: 1; transform: none; } }

/* five nav items on very narrow phones: tighten the type and gaps so the list never runs into the logo */
@media (max-width: 379px) {
  nav.site-nav { font-size: 11px; }
  nav.site-nav .site-nav__list { gap: 8px; }
}

/* ── home.css ── */
/* ═════════════════════════════════════════════════════════════
   HOME PAGE
   Desktop (≥1000px): the Canva frame is rebuilt 1:1 on a 1366-unit canvas.
     • every number below is in Canva px → calc(var(--u) * N)
     • coordinates were measured from 01-home.png (see comments per block)
   Phones/tablets (<1000px): flowing layout, hero re-composed on a 430-unit canvas.
   ═════════════════════════════════════════════════════════════ */

/* ── Shared type roles ─────────────────────────────────────────── */
.hero__name-part, .about__title, .contact__title { font-family: var(--font-heading); font-weight: 400; line-height: 1; }
.card__label { font-family: var(--font-accent); font-weight: 400; line-height: 1; }
.hero__roles, .hero__portfolio, .hero__email, .tools__title, .characters__title,
.about__heading, .about__lines, .about__certs, .about__text, .card__list, .characters__note, .contact-link {
  font-family: var(--font-body);
}

/* ═══════════════ HERO ═══════════════ */
.hero { position: relative; z-index: 0; isolation: isolate; background: var(--blue); overflow: hidden; }   /* own stacking context so the About wave always overlaps the portrait */
.hero__stage { position: relative; }
.hero__logo, .hero__nav, .hero__portfolio, .hero__email { position: absolute; z-index: 5; }
/* the roles line is a full-width ticker: it sits directly in the hero (not the 1366 stage) so it runs edge to edge */
.hero__roles {
  position: absolute; z-index: 5; left: 0; right: 0; overflow: hidden; text-transform: uppercase; line-height: 1; transform: translateY(-50%);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.hero__track { display: flex; width: max-content; will-change: transform; animation: band-scroll var(--roles-dur, 60s) linear infinite; }
.hero__roles:hover .hero__track { animation-play-state: paused; }
.hero__half { display: flex; flex: none; align-items: center; white-space: nowrap; }
.hero__unit { display: flex; flex: none; align-items: center; }
.hero__star { width: 1em; height: auto; flex: none; }
@media (prefers-reduced-motion: reduce) {   /* no motion: back to the single centred line */
  .hero__roles { -webkit-mask-image: none; mask-image: none; }
  .hero__track, .hero__half { width: 100%; justify-content: center; }
  .hero__half:nth-child(2), .hero__unit:not(:first-child) { display: none; }
  .hero__unit .hero__star:last-child { display: none; }
}
.hero__portfolio, .hero__email { text-transform: uppercase; }
.hero__portfolio .swash, .hero__email .swash { width: 126px; }

.hero__name-part { position: absolute; z-index: 2; color: var(--ink); white-space: nowrap; pointer-events: none; -webkit-text-stroke: calc(var(--u) * .6) var(--ink); }
.hero__tails { display: none; position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hero__tail { fill: none; stroke: var(--ink); stroke-width: 11; stroke-linecap: round; }
.hero__tail-shape { fill: var(--ink); stroke: none; }
.hero__tail-reveal { fill: none; stroke: #fff; stroke-width: 40; stroke-linecap: butt; }
.js .hero__tail, .js .hero__tail-reveal { stroke-dasharray: 1; animation: tail-draw 1.1s var(--ease-out) calc(.9s + var(--pt-delay, 0s)) both; }
@keyframes tail-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.hero__portrait { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.hero__shadow, .hero__photo { position: absolute; height: auto; }
.doodle--hero-trio, .doodle--hero-single { z-index: 4; }

/* intro animation for the name; the portrait's pop-in / shadow / pointer parallax are the shared
   .fx-photo / .fx-shadow rules in components.css (motion is stripped for reduced-motion users in base.css) */
.js .hero__name-part { animation: name-wipe 1.3s var(--ease-out) calc(.15s + var(--pt-delay, 0s)) both; }
.js .hero__name-part--last { animation-delay: calc(.45s + var(--pt-delay, 0s)); }
@keyframes name-wipe { from { clip-path: inset(-25% 100% -35% -10%); } to { clip-path: inset(-25% -25% -35% -10%); } }

/* ═══════════════ ABOUT ═══════════════ */
.about { position: relative; z-index: 2; }
.about__body { background: var(--burgundy); color: var(--cream); }
.about__title { color: var(--cream); position: relative; z-index: 3; }
.about__heading { text-transform: uppercase; letter-spacing: 0; font-weight: 400; }
.about__lines li, .about__certs li { letter-spacing: 0; }
.about__text { letter-spacing: .01em; text-wrap: pretty; }
.dash {
  border: 0; margin: 0; height: 2px; width: 100%;
  background: repeating-linear-gradient(90deg, var(--cream) 0 5px, transparent 5px 8.5px);
}

/* ═══════════════ TOOLS ═══════════════ */
.tools { background: var(--butter); position: relative; z-index: 1; }
.tools__title { text-transform: uppercase; letter-spacing: .07em; font-weight: 400; text-align: center; color: var(--ink); }
.tools__list { display: flex; align-items: center; }

/* ═══════════════ CHARACTERS ═══════════════ */
.characters { background: var(--burgundy); color: var(--cream); position: relative; }
.characters__title { text-transform: uppercase; font-weight: 400; text-align: center; color: var(--cream); letter-spacing: 0; }
.characters__note { text-align: center; letter-spacing: .02em; color: var(--cream); }

.card {
  position: relative; background: var(--butter); color: var(--ink);
  border-radius: 38px; box-shadow: var(--shadow-card);
  transition: transform .5s var(--ease-spring), box-shadow .5s var(--ease-out);
}
.card__art { position: relative; }
.card__figure { position: relative; height: 100%; aspect-ratio: var(--ar, 1); transition: transform .6s var(--ease-spring); }
.card__img { position: relative; z-index: 1; display: block; width: 100%; height: 100%; }
/* hand-drawn frame behind the character (placement is a % of the character image so it scales with it) */
.card__squiggle { position: absolute; z-index: 0; left: var(--sq-l); top: var(--sq-t); width: var(--sq-w); height: auto; max-width: none; pointer-events: none; }
.card--creator { --sq-l: 17.25%; --sq-t: 2.13%; --sq-w: 73.15%; }
.card--strategist { --sq-l: 3.09%; --sq-t: 5.01%; --sq-w: 81.23%; }
.card--designer { --sq-l: -2.71%; --sq-t: 6.02%; --sq-w: 92.94%; }
.card__label { text-align: center; }
.card { display: flex; }
.card__link { display: block; flex: 1 1 auto; min-width: 0; color: inherit; text-decoration: none; border-radius: inherit; cursor: pointer; }   /* the WHOLE card is the link */
.card__link:focus-visible { outline: none; }
.card:has(.card__link:focus-visible) { outline: 3px dashed var(--cream); outline-offset: 7px; }
.card__list { overflow-wrap: anywhere; }
.card__list li { position: relative; padding-left: .95em; letter-spacing: .01em; }
.card__list li::before { content: ''; position: absolute; left: .05em; top: .6em; width: .27em; height: .27em; border-radius: 50%; background: var(--ink); }
.card__decor { position: absolute; height: auto; pointer-events: none; transition: transform .5s var(--ease-spring); transform: rotate(-20deg); transform-origin: 30% 30%; }
.card:hover, .card:focus-within { transform: translateY(-10px) rotate(-.8deg); box-shadow: 0 22px 40px rgba(22, 4, 12, .45); }
.card--strategist:hover, .card--strategist:focus-within { transform: translateY(-10px) rotate(.8deg); }
.card:hover .card__figure, .card:focus-within .card__figure { transform: scale(1.035) rotate(-1deg); }
.card:hover .card__decor, .card:focus-within .card__decor { transform: rotate(-20deg) translate(8px, 8px) scale(1.08); }

/* ═══════════════ CONTACT ═══════════════ */
.contact { position: relative; background: var(--blue); color: var(--ink); }
.contact__stage { position: relative; overflow: hidden; }
.contact__edge { position: absolute; top: 0; left: 0; z-index: 3; }
.contact__portrait { position: absolute; z-index: 1; pointer-events: none; }
.contact__shadow, .contact__photo { position: absolute; height: auto; }
.contact__title { position: relative; z-index: 2; color: var(--ink); }
.contact__list { position: relative; z-index: 2; }
.contact-link { text-transform: none; }
.contact-link:first-child .contact-link__text { text-transform: uppercase; }
.doodle--contact-a, .doodle--contact-b { z-index: 2; }

/* standalone Contact page: logo + nav float over the top of the blue page, and the block is sits on the bottom edge */
.contact-bar { position: absolute; z-index: 6; top: 0; left: 0; right: 0; height: 0; }
.contact-bar__stage { position: relative; margin-inline: auto; }
.contact--page { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; }   /* portrait stands on the bottom edge of the window */

/* ═════════════════════════ DESKTOP CANVAS (≥1000px) ═════════════════════════ */
@media (min-width: 1000px) {
  /* ── Hero: 1366 × 817 */
  .hero { height: calc(var(--u) * 817); }
  .hero__stage { width: calc(var(--u) * 1366); height: 100%; margin-inline: auto; }

  .hero__logo { left: calc(var(--u) * 17); top: calc(var(--u) * 14); width: calc(var(--u) * 48); }
  .hero__nav { right: calc(var(--u) * 17); top: calc(var(--u) * 27); transform: translateY(-50%); font-size: max(14px, calc(var(--u) * 23.5)); }
  .hero__nav .site-nav__list { gap: calc(var(--u) * 25); }

  .hero__roles { top: calc(var(--u) * 83); font-size: max(13px, calc(var(--u) * 22)); letter-spacing: .065em; }
  .hero__star { width: calc(var(--u) * 15); margin-inline: calc(var(--u) * 20); }

  /* Name: calibrated against the real Themysion file. "sky" ink spans x≈35–410 / y≈75–590 and
     "allen" x≈945–1366+ / y≈264–669 (Canva px), so the "a" clears the portrait and the "y" tail
     and "a" lead-in (see .hero__tails) tuck behind it, exactly like the design. */
  .hero__name-part--first { font-size: calc(var(--u) * 417); letter-spacing: calc(var(--u) * -12); left: calc(var(--u) * 49); top: calc(var(--u) * 143); }
  .hero__name-part--last { font-size: calc(var(--u) * 457); left: calc(var(--u) * 952); top: calc(var(--u) * 354); }
  .hero__tails { display: block; }

  .hero__shadow { left: calc(var(--u) * 258); top: calc(var(--u) * 135.4); width: calc(var(--u) * 724.4); }
  .hero__photo { left: calc(var(--u) * 289); top: calc(var(--u) * 130); width: calc(var(--u) * 734); }
  .doodle--hero-trio { left: calc(var(--u) * 1137); top: calc(var(--u) * 56); width: calc(var(--u) * 246.5); }
  .doodle--hero-single { left: calc(var(--u) * -11.5); top: calc(var(--u) * 488.5); width: calc(var(--u) * 113); animation-delay: -2s; }

  .hero__portfolio { left: calc(var(--u) * 1109); top: calc(var(--u) * 664); transform: translateY(-50%); font-size: max(15px, calc(var(--u) * 35)); letter-spacing: 0; line-height: 1; }
  .hero__portfolio .swash { left: calc(var(--u) * 22); top: calc(var(--u) * 36); width: calc(var(--u) * 126); }
  .hero__email { left: calc(var(--u) * 35); top: calc(var(--u) * 689); transform: translateY(-50%); font-size: max(13px, calc(var(--u) * 25)); letter-spacing: 0; line-height: 1; }
  .hero__email .swash { left: calc(var(--u) * 95); top: calc(var(--u) * 24); width: calc(var(--u) * 126); }

  /* ── About: body is 651.5 tall (817 → 1468.5); pulled up under the hero by the 57-tall wave */
  .about { margin-top: calc(var(--u) * -57); }
  .about__body { height: calc(var(--u) * 651.5); }
  .about__stage { position: relative; width: calc(var(--u) * 1366); height: 100%; margin-inline: auto; }
  .about__title { position: absolute; left: calc(var(--u) * 43); top: calc(var(--u) * 49); font-size: calc(var(--u) * 146); white-space: nowrap; }
  .about__video { position: absolute; left: calc(var(--u) * 166); top: calc(var(--u) * 136); width: calc(var(--u) * 245); }
  .about__col { position: absolute; left: calc(var(--u) * 478); top: 0; width: calc(var(--u) * 830); padding-top: calc(var(--u) * 66); }
  .about__heading { font-size: calc(var(--u) * 38.5); line-height: calc(var(--u) * 36); }
  .about__heading--certs { letter-spacing: calc(var(--u) * -.6); }
  .about__lines { margin-top: calc(var(--u) * 7.3); font-size: max(14px, calc(var(--u) * 27.8)); }
  .about__lines li { line-height: calc(var(--u) * 40.8); }
  .about__col > .dash { width: calc(var(--u) * 742); }
  .about__col > .dash:nth-of-type(1) { margin-top: calc(var(--u) * 17); }
  .about__col > .dash:nth-of-type(2) { margin-top: calc(var(--u) * 33); }
  .about__col > .dash:nth-of-type(1) + .about__block .about__heading { margin-top: calc(var(--u) * 30.5); }
  .about__col > .dash:nth-of-type(2) + .about__block .about__heading { margin-top: calc(var(--u) * 15); }
  .about__certs { margin-top: calc(var(--u) * 15.3); display: grid; grid-auto-flow: column; grid-template-rows: repeat(3, auto); grid-template-columns: calc(var(--u) * 388) auto; justify-content: start; font-size: max(14px, calc(var(--u) * 24.5)); }
  .about__certs li { line-height: calc(var(--u) * 35.7); white-space: nowrap; }
  .about__text { margin-top: calc(var(--u) * 4); font-size: max(14px, calc(var(--u) * 24.3)); line-height: calc(var(--u) * 34.8); max-width: calc(var(--u) * 800); }

  /* ── Tools: 123.5 tall */
  .tools { height: calc(var(--u) * 123.5); }
  .tools__stage { position: relative; width: calc(var(--u) * 1366); height: 100%; margin-inline: auto; }
  .tools__title { position: absolute; left: 0; right: 0; top: calc(var(--u) * 25); transform: translateY(-50%); font-size: max(13px, calc(var(--u) * 37.5)); padding-left: .07em; line-height: 1; }
  .tools__list { position: absolute; inset: calc(var(--u) * 71) 0 auto 0; height: 0; }
  .tool { position: absolute; left: calc(var(--u) * var(--x)); top: 0; translate: 0 -50%; }

  /* ── Characters: 767.5 tall (1592 → 2359.5) */
  .characters { height: calc(var(--u) * 767.5); }
  .characters__stage { position: relative; width: calc(var(--u) * 1366); height: 100%; margin-inline: auto; }
  .characters__title { position: absolute; left: 0; right: 0; top: calc(var(--u) * 70.6); transform: translateY(-50%); font-size: calc(var(--u) * 98); line-height: 1; }
  .cards { position: absolute; left: calc(var(--u) * 117.5); top: calc(var(--u) * 141); display: grid; grid-template-columns: repeat(3, calc(var(--u) * 353)); column-gap: calc(var(--u) * 35.5); }
  .card { display: block; height: calc(var(--u) * 565); border-radius: calc(var(--u) * 38); }
  .card__link { display: block; height: 100%; }
  .card--designer { margin-top: calc(var(--u) * 4.5); }
  .card__art { position: static; }
  .card__figure { position: absolute; left: calc(var(--u) * var(--art-x)); top: calc(var(--u) * var(--art-y)); width: calc(var(--u) * var(--art-w)); height: auto; }
  .card__img { height: auto; }
  .card--creator { --art-x: 14.5; --art-y: 6; --art-w: 309.5; --list-top: 440.5; --pl: 28.5; --bl: 1.5; --list-r: 6; }
  .card--strategist { --art-x: 49; --art-y: -5; --art-w: 278.7; --list-top: 440.5; --pl: 29; --bl: 4; --list-r: 6; }
  .card--designer { --art-x: 64.5; --art-y: -9.5; --art-w: 243.6; --list-top: 436; --pl: 28.5; --bl: 1.5; --list-r: 6; }   /* two short lines now: same column + first-line height as the other two cards (this card sits 4.5 lower, hence 436) */
  .card__label { position: absolute; left: 0; right: 0; top: calc(var(--u) * 344); font-size: calc(var(--u) * 84); z-index: 2; }
  .card__list { position: absolute; left: calc(var(--u) * 29); right: calc(var(--u) * var(--list-r)); top: calc(var(--u) * var(--list-top)); font-size: max(13px, calc(var(--u) * 30)); }
  .card__list li { line-height: calc(var(--u) * 33); padding-left: calc(var(--u) * var(--pl)); }
  /* every card's lines are meant to stay on one line */
  .card__list li { white-space: nowrap; }
  .card__list li::before { left: calc(var(--u) * var(--bl)); top: calc(var(--u) * 13); width: calc(var(--u) * 8); height: calc(var(--u) * 8); }
  .card__decor { left: calc(var(--u) * 321.5); top: calc(var(--u) * 432); width: calc(var(--u) * 56); }
  .characters__note { position: absolute; left: 0; right: 0; top: calc(var(--u) * 738); transform: translateY(-50%); font-size: max(12px, calc(var(--u) * 24)); }

  /* ── Contact: 768.5 tall (2359.5 → 3128) */
  .contact-bar__stage { width: calc(var(--u) * 1366); }
  .contact__stage { width: calc(var(--u) * 1366); height: calc(var(--u) * 768.5); margin-inline: auto; }
  .contact__edge { height: calc(var(--u) * 57); }
  .contact__portrait { inset: 0; }
  .contact__shadow { left: calc(var(--u) * -38); top: calc(var(--u) * 50.5); width: calc(var(--u) * 669.5); }
  .contact__photo { left: calc(var(--u) * -53); top: calc(var(--u) * 65.5); width: calc(var(--u) * 666); }
  /* calibrated to the real Themysion file: ink spans x≈613–1241 / y≈2497–2679 in Canva px */
  .contact__title { position: absolute; left: calc(var(--u) * 612); top: calc(var(--u) * 167); font-size: calc(var(--u) * 140.5); white-space: nowrap; }
  .contact__title .swash { left: calc(var(--u) * 138); top: calc(var(--u) * 96); width: calc(var(--u) * 370); height: auto; }
  .contact__list { position: absolute; left: calc(var(--u) * 697); top: calc(var(--u) * 393); }
  .contact-link a, .contact-link > span { height: calc(var(--u) * 69); gap: calc(var(--u) * 39); font-size: max(16px, calc(var(--u) * 39.1)); letter-spacing: 0; line-height: 1; }
  .contact-link .icon { width: calc(var(--u) * 54); }
  .contact-link .icon--phone { width: calc(var(--u) * 46); margin-inline: calc(var(--u) * 4); }
  .doodle--contact-a { left: calc(var(--u) * 1090); top: calc(var(--u) * 604); width: calc(var(--u) * 87); animation-delay: -1s; }
  .doodle--contact-b { left: calc(var(--u) * 1214); top: calc(var(--u) * 540.5); width: calc(var(--u) * 113.5); }
}

/* ═════════════════════════ PHONES & TABLETS (<1000px) ═════════════════════════ */
@media (max-width: 999px) {
  /* ── Hero on a 430-unit canvas */
  .hero { height: calc(var(--u) * 744); }
  .hero__stage { width: calc(var(--u) * 430); height: 100%; margin-inline: auto; }
  .hero__logo { left: calc(var(--u) * 16); top: calc(var(--u) * 14); width: calc(var(--u) * 46); }
  .hero__nav { right: calc(var(--u) * 14); top: calc(var(--u) * 26); transform: translateY(-50%); font-size: max(12.5px, calc(var(--u) * 14)); }
  .hero__nav .site-nav__list { gap: max(12px, calc(var(--u) * 14)); }
  .hero__roles { --roles-dur: 44s; top: calc(var(--u) * 84); font-size: max(12px, calc(var(--u) * 13.5)); letter-spacing: .05em; }
  .hero__star { width: max(10px, calc(var(--u) * 11)); margin-inline: max(10px, calc(var(--u) * 12)); }

  /* Name sits on a band above the portrait: "sky" left (its "y" tail drops behind the portrait),
     "allen" right. Calibrated to the real Themysion file. */
  .hero__name-part--first { font-size: calc(var(--u) * 215); letter-spacing: calc(var(--u) * -6.2); left: calc(var(--u) * 18); top: calc(var(--u) * 192); }
  .hero__name-part--last { font-size: calc(var(--u) * 200); left: calc(var(--u) * 228); top: calc(var(--u) * 202); }
  .hero__shadow { left: calc(var(--u) * 16); top: calc(var(--u) * 346); width: calc(var(--u) * 424); }
  .hero__photo { left: calc(var(--u) * 28); top: calc(var(--u) * 340); width: calc(var(--u) * 430); }
  .doodle--hero-trio { left: calc(var(--u) * 352); top: calc(var(--u) * 96); width: calc(var(--u) * 74); }
  .doodle--hero-single { left: calc(var(--u) * -14); top: calc(var(--u) * 596); width: calc(var(--u) * 58); }
  .hero__portfolio { right: calc(var(--u) * 20); top: calc(var(--u) * 120); font-size: max(14px, calc(var(--u) * 17)); letter-spacing: .05em; line-height: 1; }
  .hero__portfolio .swash { left: 50%; margin-left: calc(var(--u) * -34); top: calc(var(--u) * 20); width: calc(var(--u) * 68); }
  .hero__email { left: calc(var(--u) * 20); top: calc(var(--u) * 120); font-size: max(12.5px, calc(var(--u) * 14)); letter-spacing: .05em; line-height: 1; }
  .hero__email .swash { left: calc(var(--u) * 50); top: calc(var(--u) * 18); width: calc(var(--u) * 70); }

  /* ── About */
  .about { margin-top: calc(var(--u) * -34); }
  .about__body { padding: 10px 24px 64px; }
  .about__stage { max-width: 640px; margin-inline: auto; display: grid; justify-items: center; }
  .about__title { font-size: clamp(72px, 21vw, 128px); text-align: center; white-space: nowrap; }
  .about__video { width: min(64vw, 260px); margin-top: -.34em; margin-bottom: 36px; position: relative; z-index: 1; }
  .about__col { width: 100%; }
  .about__heading { font-size: clamp(22px, 5.6vw, 30px); line-height: 1.2; margin-bottom: 10px; }
  .about__lines { font-size: clamp(16px, 4.5vw, 22px); line-height: 1.75; }
  .about__lines li + li { margin-top: 4px; }
  .about__certs { display: grid; grid-auto-flow: row; grid-template-columns: 1fr; gap: 6px; font-size: clamp(16px, 4.3vw, 21px); line-height: 1.5; }
  .about__text { font-size: clamp(16px, 4.3vw, 21px); line-height: 1.75; }
  .dash { margin: 28px 0; }
  .about__block .about__heading { margin-top: 0; }

  /* ── Tools */
  .tools { padding: 26px 20px 30px; }
  .tools__title { font-size: 17px; letter-spacing: .25em; margin-bottom: 18px; padding-left: .25em; }
  .tools__list { flex-wrap: wrap; justify-content: center; gap: 18px 26px; max-width: 640px; margin-inline: auto; }
  .tool { width: calc(var(--w) * 0.62px); }

  /* ── Characters */
  .characters { padding: 44px 20px 76px; }
  .characters__title { font-size: clamp(34px, 9.4vw, 64px); line-height: 1.08; margin-bottom: 30px; }
  .cards { display: grid; gap: 26px; max-width: 420px; margin-inline: auto; }
  .card { border-radius: 30px; }
  .card__link { display: flex; flex-direction: column; padding: 22px 18px 26px; }
  .card__art { width: 88%; margin-inline: auto; aspect-ratio: 1 / 1.08; display: flex; align-items: flex-end; justify-content: center; }
  .card__figure { max-width: 100%; }
  .card__label { font-size: clamp(50px, 14vw, 68px); margin-top: -14px; }
  .card__list { margin: 14px auto 0; width: fit-content; max-width: 100%; font-size: clamp(17px, 5vw, 23px); }
  .card__list li { line-height: 1.6; }
  .card__decor { right: -8px; bottom: -14px; width: 46px; }
  .characters__note { margin-top: 30px; font-size: 14px; }
  @media (min-width: 700px) {
    .cards { grid-template-columns: repeat(3, 1fr); max-width: 940px; gap: 18px; align-items: stretch; }
    .card__link { padding: 18px 12px 22px; }
    .card__list { font-size: clamp(14px, 1.9vw, 19px); }
    .card__label { font-size: clamp(38px, 5.4vw, 54px); }
    .card__decor { top: -16px; right: -10px; bottom: auto; }   /* sticker on the card corner so it never sits on the text */
  }

  /* ── Contact */
  .contact-bar__stage { width: calc(var(--u) * 430); }
  .contact__stage { display: flex; flex-direction: column; padding: 0 24px; }
  .contact--page .contact__stage { padding-top: max(70px, calc(var(--u) * 84)); padding-bottom: 8px; }
  .contact__edge { position: relative; width: auto; margin-inline: -24px; }
  .contact__title { font-size: clamp(56px, 16vw, 104px); text-align: center; padding-top: 30px; }
  .contact__title .swash { position: relative; display: block; width: min(66vw, 300px); margin: 0 auto; }
  .contact__list { display: grid; gap: 4px; justify-content: center; margin-top: 18px; }
  .contact-link a, .contact-link > span { min-height: 56px; gap: 16px; font-size: clamp(17px, 5vw, 30px); letter-spacing: 0; line-height: 1.15; overflow-wrap: anywhere; }
  .contact-link .icon { width: 40px; }
  .contact-link .icon--phone { width: 34px; margin-inline: 3px; }
  /* portrait sits at the bottom of the section and is cropped by its edge, like the desktop design */
  .contact__portrait { order: 5; position: relative; margin: 26px -24px 0; height: min(84vw, 480px); overflow: hidden; }
  .contact__shadow { left: -3%; top: 6%; width: 90%; }
  .contact__photo { left: -1%; top: 9%; width: 88%; }
  .doodle--contact-a { right: 10%; left: auto; bottom: 30%; top: auto; width: 44px; }
  .doodle--contact-b { right: 3%; left: auto; bottom: 40%; top: auto; width: 60px; }
}

/* ── reels.css ── */
/* ═════════════════════════════════════════════════════════════
   REUSABLE COMPONENTS FOR THE CREATOR PAGE
   section band · back link · reel · phone/video card · photo/post card
   Sizes are in --ru ("reel unit") = the Canva px on desktop, a gentler scale on phones/tablets.
   ═════════════════════════════════════════════════════════════ */

/* ── Back link ─────────────────────────────────────────────────── */
.back-link {
  display: inline-flex; align-items: center; gap: calc(var(--ru) * 16);
  font-family: var(--font-body); text-transform: uppercase; letter-spacing: .02em; line-height: 1;
  font-size: max(14px, calc(var(--ru) * 33)); color: var(--ink);
}
.back-link__arrow {
  width: calc(var(--ru) * 22); min-width: 18px; height: auto; flex: none; overflow: visible;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  transition: translate .4s var(--ease-spring);
}
.back-link:hover .back-link__arrow, .back-link:focus-visible .back-link__arrow { translate: -6px 0; }
.back-link__text { position: relative; }
.back-link__text::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -.18em; height: 2px; border-radius: 2px;
  background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease-out);
}
.back-link:hover .back-link__text::after, .back-link:focus-visible .back-link__text::after { transform: scaleX(1); }

/* ── Section band: wavy ribbon with a scrolling ticker ─────────── */
.band { position: relative; color: var(--band-text, var(--cream)); }
.band__strip {
  position: relative; display: grid; align-items: center; overflow: hidden;
  height: calc(var(--ru) * 89); margin-block: -1px;   /* -1px hides hairline seams against the wavy edges */
  background: var(--band, var(--burgundy));
}
.band--tall .band__strip { height: calc(var(--ru) * 111); }
.band__ticker { width: 100%; overflow: hidden; }
.band__track {
  display: flex; width: max-content; will-change: transform;
  animation: band-scroll 75s linear infinite; animation-direction: var(--anim-dir, normal);
  font-family: var(--font-body); text-transform: uppercase; line-height: 1; letter-spacing: .01em;
  font-size: max(15px, calc(var(--ru) * 35.4)); padding-top: calc(var(--ru) * 3);
}
.band__half { display: flex; flex: none; align-items: center; white-space: nowrap; }
.band__sep { padding-inline: .46em; font-family: Arial, 'Helvetica Neue', sans-serif; }   /* Gaegu has no middle-dot glyph */
/* the design's lower wave is phase-shifted against the upper one */
.band__edge--bottom { -webkit-mask-position: calc(var(--tile) * .142) 0; mask-position: calc(var(--tile) * .142) 0; }
@keyframes band-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (max-width: 999px) { .band__track { font-size: max(15px, calc(var(--ru) * 30)); } }

/* ── Reel: ONE endless strip shared by video, social and photography ──
   Without JS it is a plain native scroller. With JS (reel.js) the viewport stops scrolling and every <li> is
   re-positioned each frame so the strip wraps forever. Positioning lives on the <li> (a transform written by JS);
   tilt / stagger / scale live on the inner .reel__slide so they never disturb the positions. */
.reel { position: relative; }
.reel__viewport {
  overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
  scrollbar-width: none; -webkit-overflow-scrolling: touch; user-select: none; -webkit-user-select: none;
  cursor: grab;
}
.reel__viewport::-webkit-scrollbar { display: none; }
.js .reel__viewport { overflow: hidden; overflow: clip; touch-action: pan-y; }
.reel__viewport.is-dragging { cursor: grabbing; }
.reel__viewport:focus-visible { outline-offset: -6px; }
.reel__track { position: relative; display: flex; align-items: flex-start; width: max-content; }
.js .reel__track { padding-inline: 0; transition: opacity .5s var(--ease-out); }
.js .reel:not(.is-ready) .reel__track { opacity: 0; }        /* hidden for the instant before reel.js has placed the slides */
.reel__item { flex: none; will-change: transform; }
.reel__slide { transform-origin: 50% 0; will-change: translate, scale; }
.reel img { -webkit-user-drag: none; }

/* arrows: only shown when JS is running (without it the reel is still a native scroller) */
.reel__nav { display: none; }
.js .reel__nav { display: flex; justify-content: center; gap: calc(var(--ru) * 18); }
.reel__btn {
  display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0 12px; border-radius: 999px;
  border: 2px solid var(--ink); background: var(--butter); color: var(--ink); cursor: pointer;
  font-family: var(--font-body); font-size: 22px; line-height: 1;
  transition: transform .35s var(--ease-spring), background-color .25s, color .25s;
}
.reel__btn:hover, .reel__btn:focus-visible { background: var(--burgundy); color: var(--butter); transform: translateY(-2px) rotate(-3deg); }
.reel__btn:active { transform: scale(.94); }
.reel__btn[disabled] { opacity: .35; pointer-events: none; }

/* ── Video card: phone frame ───────────────────────────────────── */
.vcard {
  --bezel: calc(var(--ru) * 13);
  display: flex; flex-direction: column; align-items: center;
  width: calc(var(--ru) * (462 * var(--arn) + 26));
}
.phone {
  position: relative; padding: var(--bezel); border-radius: calc(var(--ru) * 42); background: #17171d;
  box-shadow: inset 0 0 0 calc(var(--ru) * 2.5) #5d5d66, 0 calc(var(--ru) * 12) calc(var(--ru) * 26) rgba(25, 8, 18, .22);
}
.phone__screen {
  position: relative; overflow: hidden; background: #000;
  width: calc(var(--ru) * 462 * var(--arn)); height: calc(var(--ru) * 462); border-radius: calc(var(--ru) * 29);
}
.phone__notch {
  position: absolute; z-index: 3; top: var(--bezel); left: 50%; translate: -50% 0; pointer-events: none;
  width: calc(var(--ru) * 106); height: calc(var(--ru) * 27); border-radius: 0 0 calc(var(--ru) * 19) calc(var(--ru) * 19);
  background:
    radial-gradient(circle at 80% 50%, #34343e 0 calc(var(--ru) * 3.4), transparent calc(var(--ru) * 3.9)),
    linear-gradient(#34343e, #34343e) 44% 50% / calc(var(--ru) * 32) calc(var(--ru) * 4.5) no-repeat,
    #17171d;
}
.phone__btn { position: absolute; width: calc(var(--ru) * 4.5); background: #2a2a32; }
.phone__btn--mute  { left: calc(var(--ru) * -3.5); top: calc(var(--ru) * 78);  height: calc(var(--ru) * 24); border-radius: 3px 0 0 3px; }
.phone__btn--up    { left: calc(var(--ru) * -3.5); top: calc(var(--ru) * 126); height: calc(var(--ru) * 44); border-radius: 3px 0 0 3px; }
.phone__btn--down  { left: calc(var(--ru) * -3.5); top: calc(var(--ru) * 182); height: calc(var(--ru) * 44); border-radius: 3px 0 0 3px; }
.phone__btn--power { right: calc(var(--ru) * -3.5); top: calc(var(--ru) * 150); height: calc(var(--ru) * 76); border-radius: 0 3px 3px 0; }

.vcard__video { width: 100%; height: 100%; object-fit: cover; background: #000; }
.vcard__play {
  position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; padding: 0;
  border: 0; border-radius: inherit; background: transparent; cursor: pointer; color: var(--burgundy);
}
.vcard__play:focus-visible { outline: 3px dashed var(--cream); outline-offset: -8px; }
.vcard__play-icon {
  display: grid; place-items: center; width: calc(var(--ru) * 66); min-width: 46px; aspect-ratio: 1; border-radius: 50%;
  background: var(--butter); box-shadow: 0 6px 18px rgba(20, 4, 12, .4);
  transition: transform .4s var(--ease-spring);
}
.vcard__play-icon svg { width: 46%; height: auto; margin-left: 6%; fill: currentColor; }
.vcard__play:hover .vcard__play-icon, .vcard__play:focus-visible .vcard__play-icon { transform: scale(1.1) rotate(-5deg); }
.vcard.is-started .vcard__play { display: none; }

.vcard__caption, .pcard__caption {
  display: grid; justify-items: center; margin-top: calc(var(--ru) * 15);
  font-family: var(--font-body); text-transform: uppercase; letter-spacing: .01em;
  font-size: max(11.5px, calc(var(--ru) * 17.5)); line-height: 15 / 17.5; color: var(--ink); text-align: center;
}
.vcard__caption { line-height: calc(var(--ru) * 15); min-height: calc(var(--ru) * 30); }
.vcard__caption > *, .pcard__caption > * { max-width: 100%; }
/* placeholder titles are dashed so they are unmistakably "fill me in" */
.is-placeholder { opacity: .62; border-bottom: 1.5px dashed currentColor; padding-bottom: 1px; }

/* motion for the video reel: the slide nearest the centre grows, the far ones lift (values fed by reel.js) */
.reel--video .reel__slide {
  translate: calc(var(--lean, 0) * var(--ru) * -14) calc(var(--lift, 0) * var(--ru) * -38);
  scale: calc(1 + var(--boost, 0) * .057);
  transition: translate .6s var(--ease-out), scale .6s var(--ease-out);
}

/* ── Photo card ────────────────────────────────────────────────── */
.pcard { width: calc(var(--ph) * var(--arn)); }
.pcard__frame {
  height: var(--ph); overflow: hidden; background: var(--ink);
  border: calc(var(--ru) * 2.4) solid var(--ink); border-radius: calc(var(--ru) * 15);
  box-shadow: 0 calc(var(--ru) * 12) calc(var(--ru) * 26) rgba(25, 8, 18, .2);
}
.pcard__img { width: 100%; height: 100%; object-fit: cover; max-width: none; }
.pcard__caption { margin-top: calc(var(--ru) * 16); }

.reel--photo .reel__slide {
  translate: calc(var(--lean, 0) * var(--ru) * -22) 0;
  scale: calc(1 + var(--boost, 0) * .045);
  rotate: -1.1deg;
  transition: translate .6s var(--ease-out), scale .6s var(--ease-out), rotate .5s var(--ease-out);
}
.reel--photo .reel__item:nth-child(even) .reel__slide { rotate: 1deg; margin-top: calc(var(--ru) * 64); }
.reel--photo .reel__item:nth-child(3n) .reel__slide { margin-top: calc(var(--ru) * 26); }
.reel--photo .reel__item:hover .reel__slide, .reel--photo .reel__item:focus-within .reel__slide { rotate: 0deg; }
.reel--photo .reel__item:hover, .reel--photo .reel__item:focus-within { z-index: 2; }

/* ── Social post: the same framed card as a photo, in a lighter, tighter scrapbook stagger ── */
.pcard--post .pcard__frame { background: #fff; border-radius: calc(var(--ru) * 16); box-shadow: 0 calc(var(--ru) * 10) calc(var(--ru) * 24) rgba(25, 8, 18, .16); }
.reel--social .reel__slide {
  translate: calc(var(--lean, 0) * var(--ru) * -18) 0;
  scale: calc(1 + var(--boost, 0) * .04);
  rotate: -.8deg;
  transition: translate .6s var(--ease-out), scale .6s var(--ease-out), rotate .5s var(--ease-out);
}
.reel--social .reel__item:nth-child(even) .reel__slide { rotate: .7deg; margin-top: calc(var(--ru) * 40); }
.reel--social .reel__item:nth-child(3n) .reel__slide { margin-top: calc(var(--ru) * 16); }
.reel--social .reel__item:hover .reel__slide, .reel--social .reel__item:focus-within .reel__slide { rotate: 0deg; }
.reel--social .reel__item:hover, .reel--social .reel__item:focus-within { z-index: 2; }

@media (prefers-reduced-motion: reduce) {
  .reel__slide { transition: none !important; }
}

/* ── creator.css ── */
/* ═════════════════════════════════════════════════════════════
   CREATOR PAGE
   Desktop (≥1000px): the hero is rebuilt 1:1 on the 1366-unit Canva canvas (numbers below are Canva px
   measured from 02-creator.png → calc(var(--u) * N)). The sections below it use --ru (= --u on desktop).
   Phones/tablets (<1000px): hero re-composed on a 430-unit canvas, reels sized with the gentler --ru.
   ═════════════════════════════════════════════════════════════ */

/* ═══════════════ HERO ═══════════════ */
.cr-hero { position: relative; z-index: 3; background: var(--butter); overflow-x: clip; }   /* sits above the ribbon so the doodle can overlap it */
.cr-hero__bar { position: absolute; inset: 0 0 auto; z-index: 1; background: var(--blue); }
.cr-hero__stage { position: relative; height: 100%; margin-inline: auto; }
.cr-hero__logo, .cr-hero__nav, .cr-hero__back { position: absolute; z-index: 5; }
.cr-hero__nav .site-nav__list { display: flex; align-items: center; }

.cr-hero__frame { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.cr-hero__paper { position: absolute; display: block; }
.cr-hero__paper--blue { background: var(--blue); }
.cr-hero__paper--burgundy { background: var(--burgundy); }
.cr-hero__character { position: absolute; z-index: 2; height: auto; max-width: none; }
.cr-hero__title {
  position: absolute; z-index: 3; margin: 0; white-space: nowrap; pointer-events: none;
  font-family: var(--font-heading); font-weight: 400; line-height: 1; color: var(--ink);
  -webkit-text-stroke: calc(var(--u) * .6) var(--ink);
}
.doodle--cr-flowers { z-index: 1; }
.doodle--cr-lines { z-index: 4; }

/* intro: papers slide out from behind the portrait, the title writes itself, stickers pop.
   (--pt-delay is added when arriving from another page so this waits for the paper transition) */
.js .cr-hero__bar { animation: bar-drop .6s var(--ease-out) calc(0s + var(--pt-delay, 0s)) both; }
.js .cr-hero__logo, .js .cr-hero__nav { animation: bar-drop .7s var(--ease-out) calc(.1s + var(--pt-delay, 0s)) both; }
.js .cr-hero__back { animation: slide-right .7s var(--ease-out) calc(.25s + var(--pt-delay, 0s)) both; }
.js .cr-hero__paper--blue { animation: paper-blue 1s var(--ease-spring) calc(.05s + var(--pt-delay, 0s)) both; }
.js .cr-hero__paper--burgundy { animation: paper-burgundy 1s var(--ease-spring) calc(.15s + var(--pt-delay, 0s)) both; }
.js .cr-hero__title { animation: name-wipe 1.3s var(--ease-out) calc(.5s + var(--pt-delay, 0s)) both; }
.js .doodle--cr-flowers { animation: sticker-pop .9s var(--ease-spring) calc(.7s + var(--pt-delay, 0s)) both, float 6s ease-in-out calc(1.7s + var(--pt-delay, 0s)) infinite; }
.js .doodle--cr-lines { animation: sticker-pop .8s var(--ease-spring) calc(.85s + var(--pt-delay, 0s)) both; }
/* (translate, not transform, so they never fight the transform that centres the nav) */
@keyframes bar-drop { from { opacity: 0; translate: 0 -100%; } to { opacity: 1; translate: 0 0; } }
@keyframes slide-right { from { opacity: 0; translate: -40px 0; } to { opacity: 1; translate: 0 0; } }
@keyframes paper-blue { from { opacity: 0; transform: translate(-46px, 34px) rotate(-9deg) scale(.86); } to { opacity: 1; transform: none; } }
@keyframes paper-burgundy { from { opacity: 0; transform: translate(38px, 26px) rotate(7deg) scale(.88); } to { opacity: 1; transform: none; } }
@keyframes sticker-pop { from { opacity: 0; transform: scale(.35) rotate(-28deg); } to { opacity: 1; transform: none; } }

/* arriving with the character transition: the same pieces, but they just fade in (tiny tilt on the two papers) around the
   portrait as it lands — no big slides or spins. Other pages' heroes should get the same block. */
@keyframes soft-in { from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: 0 0; } }
@keyframes soft-in-l { from { opacity: 0; translate: 0 14px; rotate: -2deg; } to { opacity: 1; translate: 0 0; rotate: 0deg; } }
@keyframes soft-in-r { from { opacity: 0; translate: 0 14px; rotate: 1.6deg; } to { opacity: 1; translate: 0 0; rotate: 0deg; } }
@keyframes soft-pop { from { opacity: 0; scale: .86; } to { opacity: 1; scale: 1; } }
html.pt-mode-character .cr-hero__bar { animation: soft-in .45s var(--ease-out) var(--pt-delay, 0s) both; }
html.pt-mode-character .cr-hero__logo, html.pt-mode-character .cr-hero__nav, html.pt-mode-character .cr-hero__back { animation: soft-in .5s var(--ease-out) calc(.1s + var(--pt-delay, 0s)) both; }
html.pt-mode-character .cr-hero__paper--blue { animation: soft-in-l .55s var(--ease-out) calc(.02s + var(--pt-delay, 0s)) both; }
html.pt-mode-character .cr-hero__paper--burgundy { animation: soft-in-r .55s var(--ease-out) calc(.08s + var(--pt-delay, 0s)) both; }
html.pt-mode-character .cr-hero__title { animation: name-wipe .9s var(--ease-out) calc(.42s + var(--pt-delay, 0s)) both; }
html.pt-mode-character .doodle--cr-flowers { animation: soft-pop .55s var(--ease-out) calc(.5s + var(--pt-delay, 0s)) both, float 6s ease-in-out calc(1.4s + var(--pt-delay, 0s)) infinite; }
html.pt-mode-character .doodle--cr-lines { animation: soft-pop .5s var(--ease-out) calc(.6s + var(--pt-delay, 0s)) both; }
/* the landing spot for the flying portrait: the real one waits (hidden, no intro) until the flight is over */
html.pt-mode-character .cr-hero__character { animation: none; }

/* while the flying portrait is still in the air, the real one waits invisibly at its landing spot */
html.pt-mode-character.pt-arriving .cr-hero__character { visibility: hidden; }

/* ═══════════════ SECTIONS ═══════════════ */
.cr-video, .cr-social, .cr-photo { position: relative; z-index: 1; }
.cr-video__intro {
  max-width: calc(var(--ru) * 900); margin-inline: auto; text-align: center;
  font-family: var(--font-body); text-transform: uppercase; letter-spacing: .01em; color: var(--ink);
  font-size: max(13.5px, calc(var(--ru) * 24.3)); line-height: calc(var(--ru) * 21);
  padding-top: calc(var(--ru) * 45); box-sizing: content-box; min-height: calc(var(--ru) * 42);
}
.cr-video .reel__track { gap: calc(var(--ru) * 40); }
.cr-video .reel__viewport { padding-block: calc(var(--ru) * 58) calc(var(--ru) * 34); }
.cr-video .reel__nav, .cr-photo .reel__nav { margin-top: calc(var(--ru) * 2); }
.cr-video__body { padding-bottom: calc(var(--ru) * 63); }

.cr-social .reel--social { --ph: calc(var(--ru) * 460); }
.cr-social .reel__track { gap: calc(var(--ru) * 52); }
.cr-social .reel__viewport { padding-block: calc(var(--ru) * 56) calc(var(--ru) * 70); }
.cr-social .reel__nav { margin-top: calc(var(--ru) * 2); }
.cr-social__body { padding-bottom: calc(var(--ru) * 44); }

.cr-photo .reel--photo { --ph: calc(var(--ru) * 430); }
.cr-photo .reel__track { gap: calc(var(--ru) * 46); }
.cr-photo .reel__viewport { padding-block: calc(var(--ru) * 62) calc(var(--ru) * 96); }
.cr-photo__body { padding-bottom: calc(var(--ru) * 30); }

.cr-foot { display: flex; justify-content: center; padding: calc(var(--ru) * 46) 24px calc(var(--ru) * 74); }
.cr-foot .back-link { font-size: max(15px, calc(var(--ru) * 33)); }

/* ═════════════════════════ DESKTOP CANVAS (≥1000px) ═════════════════════════ */
@media (min-width: 1000px) {
  .cr-hero { height: calc(var(--u) * 761); }
  .cr-hero__stage { width: calc(var(--u) * 1366); }
  .cr-hero__bar { height: calc(var(--u) * 55); }
  .cr-hero__logo { left: calc(var(--u) * 17); top: calc(var(--u) * 14); width: calc(var(--u) * 48); }
  .cr-hero__nav { right: calc(var(--u) * 17); top: calc(var(--u) * 27); transform: translateY(-50%); font-size: max(14px, calc(var(--u) * 23.5)); }
  .cr-hero__nav .site-nav__list { gap: calc(var(--u) * 25); }
  .cr-hero__back { left: calc(var(--u) * 31); top: calc(var(--u) * 82.7); }
  .cr-hero .back-link { font-size: calc(var(--u) * 32.4); }

  /* frame: a burgundy card with a blue card peeking out up-left (401 × 558, radius ≈ 30) */
  .cr-hero__paper { width: calc(var(--u) * 401); height: calc(var(--u) * 558); border-radius: calc(var(--u) * 30); }
  .cr-hero__paper--burgundy { left: calc(var(--u) * 180); top: calc(var(--u) * 168); }
  .cr-hero__paper--blue { left: calc(var(--u) * 166); top: calc(var(--u) * 153); }
  .cr-hero__character { left: calc(var(--u) * 130); top: calc(var(--u) * 128); width: calc(var(--u) * 495); }

  /* title: Themysion, ink spans x≈706–1251 / y≈211–612 */
  .cr-hero__title { font-size: calc(var(--u) * 416); left: calc(var(--u) * 706); top: calc(var(--u) * 296.5); }

  .doodle--cr-flowers { left: calc(var(--u) * 1173); top: calc(var(--u) * 75); width: calc(var(--u) * 205); }
  .doodle--cr-lines { left: calc(var(--u) * 99); top: calc(var(--u) * 620); width: calc(var(--u) * 112); }
}

/* ═════════════════════════ PHONES & TABLETS (<1000px) ═════════════════════════ */
@media (max-width: 999px) {
  .cr-hero { height: calc(var(--u) * 790); }
  .cr-hero__stage { width: calc(var(--u) * 430); }
  .cr-hero__bar { height: calc(var(--u) * 52); }
  .cr-hero__logo { left: calc(var(--u) * 16); top: calc(var(--u) * 12); width: calc(var(--u) * 46); }
  .cr-hero__nav { right: calc(var(--u) * 14); top: calc(var(--u) * 26); transform: translateY(-50%); font-size: max(12.5px, calc(var(--u) * 14)); }
  .cr-hero__nav .site-nav__list { gap: max(12px, calc(var(--u) * 14)); }
  .cr-hero__back { left: calc(var(--u) * 20); top: calc(var(--u) * 70); font-size: max(13px, calc(var(--u) * 15)); }
  .cr-hero .back-link { font-size: max(13px, calc(var(--u) * 15)); gap: 8px; }
  .cr-hero .back-link__arrow { width: max(16px, calc(var(--u) * 16)); }

  .cr-hero__title { font-size: calc(var(--u) * 250); left: calc(var(--u) * 54); top: calc(var(--u) * 158); }
  .cr-hero__paper { width: calc(var(--u) * 281); height: calc(var(--u) * 390); border-radius: calc(var(--u) * 24); }
  .cr-hero__paper--burgundy { left: calc(var(--u) * 84); top: calc(var(--u) * 380); }
  .cr-hero__paper--blue { left: calc(var(--u) * 74); top: calc(var(--u) * 369.5); }
  .cr-hero__character { left: calc(var(--u) * 49); top: calc(var(--u) * 352); width: calc(var(--u) * 346.5); }
  .doodle--cr-flowers { left: calc(var(--u) * 338); top: calc(var(--u) * 62); width: calc(var(--u) * 96); }
  .doodle--cr-lines { left: calc(var(--u) * 26); top: calc(var(--u) * 696); width: calc(var(--u) * 78); }

  .cr-video__intro { padding-inline: 24px; }
  .cr-video .cr-video__intro { padding-top: 34px; box-sizing: content-box; }
  .cr-social .reel--social { --ph: clamp(260px, 64vw, 420px); }
  .cr-social .reel__track { gap: 20px; }
  .cr-social .reel__viewport { padding-block: 30px 40px; }
  .cr-photo .reel--photo { --ph: clamp(300px, 78vw, 560px); }
  .cr-photo .reel__track { gap: 22px; }
  .reel--photo .reel__item:nth-child(even) .reel__slide { margin-top: 34px; }
  .reel--photo .reel__item:nth-child(3n) .reel__slide { margin-top: 14px; }
  .reel--social .reel__item:nth-child(even) .reel__slide { margin-top: 22px; }
  .reel--social .reel__item:nth-child(3n) .reel__slide { margin-top: 8px; }
  .cr-photo .reel__viewport { padding-block: 34px 60px; }
}


/* ── strategist.css ── */
/* ═════════════════════════════════════════════════════════════
   STRATEGIST PAGE
   Desktop (≥1000px): rebuilt 1:1 on the 1366-unit Canva canvas. Every number below is a Canva px measured from
   03-strategist.png, written as calc(var(--u) * N). Each section sets --y0 (its top edge on the canvas) so the
   numbers stay the Canva ones: top = calc(var(--u) * (Y - var(--y0))).
   Phones/tablets (<1000px): every section is re-composed as a centred column on a 430-unit canvas.

   Building blocks (all reusable, none page-specific): .chip (status label) · .deck-btn · .pill · .points (opportunity/insight
   rows) · .pvideo · .pshot (phone screenshot) · .stats · .st-wave (section join).
   ═════════════════════════════════════════════════════════════ */

/* ═══════════════ HERO ═══════════════ */
.st-hero { position: relative; background: var(--burgundy); overflow: clip; }
.st-hero__bar { position: absolute; inset: 0 0 auto; z-index: 6; background: var(--blue); }
.st-hero__stage { position: relative; height: 100%; margin-inline: auto; }
.st-hero__logo, .st-hero__nav, .st-hero__back { position: absolute; z-index: 7; }
.st-hero__nav .site-nav__list { display: flex; align-items: center; }
.st-hero .back-link { color: var(--cream); }

.st-hero__title {
  position: absolute; z-index: 1; margin: 0; white-space: nowrap; pointer-events: none;
  font-family: var(--font-heading); font-weight: 400; line-height: 1; color: var(--cream);
  letter-spacing: .037em; -webkit-text-stroke: calc(var(--u) * 2) var(--cream);
  left: var(--tx); top: var(--ty); transform: translate(-50%, -50%);
}
.st-hero__frame { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.st-hero__paper { position: absolute; display: block; }
.st-hero__paper--blue { background: var(--blue); }
.st-hero__paper--butter { background: var(--butter); }
.st-hero__character { position: absolute; z-index: 3; height: auto; max-width: none; }
.doodle--st-stars { z-index: 3; }
.doodle--st-heart { z-index: 4; rotate: 22deg; }

/* intro: the two cards slide out from behind the portrait, the title writes itself, stickers pop.
   (--pt-delay is added when arriving from another page so this waits for the paper transition) */
.js .st-hero__bar { animation: bar-drop .6s var(--ease-out) calc(0s + var(--pt-delay, 0s)) both; }
.js .st-hero__logo, .js .st-hero__nav { animation: bar-drop .7s var(--ease-out) calc(.1s + var(--pt-delay, 0s)) both; }
.js .st-hero__back { animation: slide-right .7s var(--ease-out) calc(.25s + var(--pt-delay, 0s)) both; }
.js .st-hero__paper--blue { animation: paper-blue 1s var(--ease-spring) calc(.05s + var(--pt-delay, 0s)) both; }
.js .st-hero__paper--butter { animation: paper-burgundy 1s var(--ease-spring) calc(.15s + var(--pt-delay, 0s)) both; }
.js .st-hero__title { animation: name-wipe 1.4s var(--ease-out) calc(.45s + var(--pt-delay, 0s)) both; }
.js .doodle--st-stars { animation: sticker-pop .9s var(--ease-spring) calc(.7s + var(--pt-delay, 0s)) both; }
.js .doodle--st-heart { animation: sticker-pop .9s var(--ease-spring) calc(.85s + var(--pt-delay, 0s)) both, float 6s ease-in-out calc(1.85s + var(--pt-delay, 0s)) infinite; }

/* arriving with the character transition: the same pieces just fade in around the portrait as it lands (see creator.css) */
html.pt-mode-character .st-hero__bar { animation: soft-in .45s var(--ease-out) var(--pt-delay, 0s) both; }
html.pt-mode-character .st-hero__logo, html.pt-mode-character .st-hero__nav, html.pt-mode-character .st-hero__back { animation: soft-in .5s var(--ease-out) calc(.1s + var(--pt-delay, 0s)) both; }
html.pt-mode-character .st-hero__paper--blue { animation: soft-in-l .55s var(--ease-out) calc(.02s + var(--pt-delay, 0s)) both; }
html.pt-mode-character .st-hero__paper--butter { animation: soft-in-r .55s var(--ease-out) calc(.08s + var(--pt-delay, 0s)) both; }
html.pt-mode-character .st-hero__title { animation: name-wipe .9s var(--ease-out) calc(.42s + var(--pt-delay, 0s)) both; }
html.pt-mode-character .doodle--st-stars { animation: soft-pop .5s var(--ease-out) calc(.55s + var(--pt-delay, 0s)) both; }
html.pt-mode-character .doodle--st-heart { animation: soft-pop .55s var(--ease-out) calc(.6s + var(--pt-delay, 0s)) both, float 6s ease-in-out calc(1.4s + var(--pt-delay, 0s)) infinite; }
/* the landing spot for the flying portrait: the real one waits (hidden, no intro) until the flight is over */
html.pt-mode-character .st-hero__character { animation: none; }
html.pt-mode-character.pt-arriving .st-hero__character { visibility: hidden; }

/* ═══════════════ SECTIONS (shared) ═══════════════ */
.st-sec { position: relative; color: var(--ink); font-weight: 700; }   /* the design's handwriting is heavier than Gaegu Regular */
.st-sec--blue { background: var(--blue); --chip-ink: var(--ink); --chip-inv: var(--blue); }
.st-sec--butter { background: var(--butter); --chip-ink: var(--burgundy); --chip-inv: var(--butter); }
.st-sec--burgundy { background: var(--burgundy); color: var(--butter); --chip-ink: var(--butter); --chip-inv: var(--burgundy); }
.st-sec--ink { background: var(--ink); color: var(--butter); --chip-ink: var(--butter); --chip-inv: var(--ink); }
.st-sec__stage { position: relative; margin-inline: auto; height: 100%; }
.st-sec__stage > *, .pitch > * { position: absolute; }
.tr__videos, .jp__phones { display: contents; }

/* the join: the section above shows through as a backdrop; domes of THIS section's colour rise into it */
.st-wave { position: absolute; z-index: 2; left: 0; right: 0; top: 0; background: var(--from); line-height: 0; }
.st-wave .scallop { -webkit-mask-position: var(--wave-x, 0px) 0; mask-position: var(--wave-x, 0px) 0; }
.nb { white-space: nowrap; }

/* titles: the big brush script, tilted a little, sitting in the section's own colour */
.pitch__title, .tr__title, .jp__title {
  margin: 0; white-space: nowrap; font-family: var(--font-heading); font-weight: 400; line-height: 1;
  letter-spacing: .04em; -webkit-text-stroke: calc(var(--u) * 1) currentColor;
}
.pitch__title { transform: translate(-50%, -50%) rotate(var(--r)); left: var(--tx); top: var(--ty); font-size: var(--fs); }
.st-sec--blue .pitch__title, .st-sec--burgundy .tr__title { color: var(--cream); }
.st-sec--butter .pitch__title { color: var(--burgundy); }
.jp__title { color: var(--blue); }
.tr__title, .jp__title { transform: translate(-50%, -50%) rotate(var(--r)); left: var(--tx); top: var(--ty); font-size: var(--fs); }

/* status label — says plainly what kind of work this is */
.chip { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 8); margin: 0; color: var(--chip-ink); font-family: var(--font-body); line-height: 1; white-space: nowrap; font-size: max(12px, calc(var(--u) * 21)); }
.chip__kind { text-transform: uppercase; letter-spacing: .06em; padding: .28em .8em .2em; border-radius: 999px; border: 1.5px dashed currentColor; }
.chip--live .chip__kind { border-style: solid; background: var(--chip-ink); color: var(--chip-inv); }
.chip__note { opacity: .92; }

/* description text */
.pitch__desc, .tr__desc, .jp__desc, .tr__caption, .jp__caption, .tr__intro { margin: 0; font-family: var(--font-body); }
.tr__caption, .tr__intro, .seq { color: var(--cream); }

/* "View full deck" button */
.deck-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: calc(var(--u) * 7);
  height: calc(var(--u) * 47); width: calc(var(--u) * 197); padding-inline: 0; border-radius: 999px;
  border: 2px solid var(--ink); font-family: var(--font-body); text-transform: uppercase; letter-spacing: .02em; line-height: 1;
  font-size: max(12px, calc(var(--u) * 18.5)); white-space: nowrap;
  transition: transform .4s var(--ease-spring), box-shadow .3s;
}
.deck-btn--burgundy { background: var(--burgundy); color: var(--cream); }
.deck-btn--blue { background: var(--blue); color: var(--ink); }
.deck-btn__text { position: relative; top: .06em; }
.deck-btn__arrow { width: calc(var(--u) * 17); min-width: 12px; height: auto; flex: none; overflow: visible; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: translate .4s var(--ease-spring); }
.deck-btn:hover, .deck-btn:focus-visible { transform: translateY(-3px) rotate(-1.2deg); box-shadow: 0 calc(var(--u) * 9) calc(var(--u) * 18) rgba(25, 8, 18, .22); }
.deck-btn:hover .deck-btn__arrow, .deck-btn:focus-visible .deck-btn__arrow { translate: 5px 0; }
.deck-btn:active { transform: scale(.97); }
.deck-btn:focus-visible { outline: 3px dashed var(--ink); outline-offset: 5px; }

/* laptop mock-ups */
.pitch__laptop img, .tr__laptop img, .tr__report img { display: block; width: 100%; height: auto; }
.tr__report { box-sizing: border-box; border: calc(var(--u) * 3) solid #0c0c0f; border-radius: calc(var(--u) * 32); overflow: hidden; background: #fafafa; }

/* opportunity / insight rows */
.points { display: grid; margin: 0; row-gap: calc(var(--u) * 9.5); left: calc(var(--u) * 164.5); width: calc(var(--u) * 1097.5); }
.points__row { display: grid; grid-template-columns: calc(var(--u) * 397) calc(var(--u) * 579); column-gap: calc(var(--u) * 121.5); align-items: center; margin: 0; }
.points__label, .points__text {
  margin: 0; display: grid; place-items: center; text-align: center; font-family: var(--font-body);
  border: 2px solid var(--ink); border-radius: calc(var(--u) * 32);
}
.points__label { height: calc(var(--u) * 111.5); text-transform: uppercase; font-size: max(13px, calc(var(--u) * 38.6)); line-height: 1; letter-spacing: 0; padding-top: .12em; }
.points__text { min-height: calc(var(--u) * 162.5); padding: calc(var(--u) * 11) calc(var(--u) * 38); font-size: max(13px, calc(var(--u) * 38)); line-height: calc(var(--u) * 27); box-sizing: border-box; }
.points--butter .points__label, .points--butter .points__text { background: var(--butter); color: var(--ink); }
.points--burgundy .points__label, .points--burgundy .points__text { background: var(--burgundy); color: var(--cream); }

/* the little pill headings */
.pill {
  margin: 0; display: grid; place-items: center; box-sizing: border-box; text-align: center;
  width: calc(var(--u) * 302.5); height: calc(var(--u) * 79); border: 2px solid var(--ink); border-radius: 999px;
  background: var(--blue); color: var(--ink); font-family: var(--font-body); font-weight: 700; text-transform: uppercase;
  font-size: max(13px, calc(var(--u) * 37.5)); line-height: 1; padding-top: .12em; letter-spacing: 0;
}

/* portrait videos */
.pvideo { position: absolute; width: calc(var(--u) * 286.5); }
.pvideo__frame {
  position: relative; overflow: hidden; background: #000; aspect-ratio: var(--arn);
  border: 2.5px solid var(--ink); border-radius: calc(var(--u) * 27); box-sizing: border-box;
  box-shadow: 0 calc(var(--u) * 12) calc(var(--u) * 26) rgba(15, 3, 9, .3);
  transition: transform .5s var(--ease-spring);
}
.pvideo:hover .pvideo__frame { transform: translateY(-5px) rotate(-.6deg); }
.pvideo:nth-child(2):hover .pvideo__frame { transform: translateY(-5px) rotate(.6deg); }
.pvideo .vcard__video { display: block; width: 100%; height: 100%; object-fit: cover; }
.pvideo.is-started .vcard__play { display: none; }

/* result tiles */
.stats { display: grid; grid-template-columns: repeat(4, calc(var(--u) * 264)); column-gap: calc(var(--u) * 36.7); margin: 0; }
.stat {
  position: relative; margin: 0; height: calc(var(--u) * 198); box-sizing: border-box; text-align: center;
  background: var(--butter); color: var(--ink); border: 2px solid var(--ink); border-radius: calc(var(--u) * 36);
  transition: transform .45s var(--ease-spring);
}
.stat:hover { transform: translateY(-6px) rotate(-.8deg); }
.stat:nth-child(even):hover { transform: translateY(-6px) rotate(.8deg); }
.stat__label { position: absolute; inset: calc(var(--u) * 2) calc(var(--u) * 14) auto; margin: 0; font-family: var(--font-body); text-transform: uppercase; font-size: max(13px, calc(var(--u) * 30.3)); line-height: calc(var(--u) * 24); }
.stat__value { position: absolute; inset: calc(var(--u) * 73) 0 auto; margin: 0; font-family: var(--font-body); font-size: max(20px, calc(var(--u) * 50)); line-height: calc(var(--u) * 50); }

/* email sequence */
.seq { display: flex; align-items: center; justify-content: center; margin: 0; white-space: nowrap; font-family: var(--font-body); }
.seq__step { display: flex; align-items: center; }
.seq__arrow { width: calc(var(--u) * 27); height: auto; margin-inline: calc(var(--u) * 14); flex: none; overflow: visible; fill: none; stroke: currentColor; stroke-width: 3.6; stroke-linecap: round; stroke-linejoin: round; }

/* phone with a screenshot in it */
.pshot { position: absolute; margin: 0; width: calc(var(--u) * 370); }
.pshot__phone {
  position: relative; padding: calc(var(--u) * 20) calc(var(--u) * 21.2); border-radius: calc(var(--u) * 58); background: #050506;
  box-shadow: 0 0 0 calc(var(--u) * 3.2) #5f5f63, 0 calc(var(--u) * 14) calc(var(--u) * 30) rgba(0, 0, 0, .35);
}
.pshot__screen { position: relative; overflow: hidden; border-radius: calc(var(--u) * 40); background: #000; aspect-ratio: var(--arn); }
.pshot__screen img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pshot__notch {
  position: absolute; z-index: 3; top: calc(var(--u) * 20); left: 50%; translate: -50% 0; pointer-events: none;
  width: calc(var(--u) * 187); height: calc(var(--u) * 27); border-radius: 0 0 calc(var(--u) * 20) calc(var(--u) * 20);
  background:
    radial-gradient(circle at 80% 52%, #34343c 0 calc(var(--u) * 3.6), transparent calc(var(--u) * 4.2)),
    linear-gradient(#34343c, #34343c) 40% 52% / calc(var(--u) * 38) calc(var(--u) * 5) no-repeat, #050506;
}
.pshot__btn { position: absolute; width: calc(var(--u) * 4); background: #4a4a4f; }
.pshot__btn--l1 { left: calc(var(--u) * -6.5); top: calc(var(--u) * 150); height: calc(var(--u) * 34); border-radius: 3px 0 0 3px; }
.pshot__btn--l2 { left: calc(var(--u) * -6.5); top: calc(var(--u) * 232); height: calc(var(--u) * 62); border-radius: 3px 0 0 3px; }
.pshot__btn--r { right: calc(var(--u) * -6.5); top: calc(var(--u) * 200); height: calc(var(--u) * 92); border-radius: 0 3px 3px 0; }
.pshot__label { position: absolute; z-index: 4; margin: 0; white-space: nowrap; font-family: var(--font-heading); font-weight: 400; color: var(--cream); line-height: 1; -webkit-text-stroke: calc(var(--u) * .6) var(--cream); }

.jp__foot { display: flex; justify-content: center; }
.jp__foot .back-link { color: var(--cream); }

/* ═════════════════════════ DESKTOP CANVAS (≥1000px) ═════════════════════════ */
@media (min-width: 1000px) {
  .st-hero { height: calc(var(--u) * 825.5); }
  .st-hero__stage { width: calc(var(--u) * 1366); }
  .st-hero__bar { height: calc(var(--u) * 56); }
  .st-hero__logo { left: calc(var(--u) * 17); top: calc(var(--u) * 14); width: calc(var(--u) * 48); }
  .st-hero__nav { right: calc(var(--u) * 17); top: calc(var(--u) * 27); transform: translateY(-50%); font-size: max(14px, calc(var(--u) * 23.5)); }
  .st-hero__nav .site-nav__list { gap: calc(var(--u) * 25); }
  .st-hero__back { left: calc(var(--u) * 31); top: calc(var(--u) * 82.7); }
  .st-hero .back-link { font-size: calc(var(--u) * 32.4); }

  /* title: Themysion 416, ink spans x≈217–1283 / y≈93–525 */
  .st-hero__title { font-size: calc(var(--u) * 416); --tx: calc(var(--u) * 700); --ty: calc(var(--u) * 372); }
  /* cards: a butter card with a blue card peeking out up-left (409 wide, radius ≈ 30); the portrait stands in front */
  .st-hero__paper { width: calc(var(--u) * 409); height: calc(var(--u) * 304); border-radius: calc(var(--u) * 30); }
  .st-hero__paper--butter { left: calc(var(--u) * 485); top: calc(var(--u) * 424); }
  .st-hero__paper--blue { left: calc(var(--u) * 471.5); top: calc(var(--u) * 415.5); }
  .st-hero__character { left: calc(var(--u) * 497.5); top: calc(var(--u) * 294.5); width: calc(var(--u) * 419); }
  .doodle--st-stars { left: calc(var(--u) * -35); top: calc(var(--u) * 473); width: calc(var(--u) * 348); }
  .doodle--st-heart { left: calc(var(--u) * 1258); top: calc(var(--u) * 89.7); width: calc(var(--u) * 90); }

  .st-sec__stage { width: calc(var(--u) * 1366); }
  .st-wave .scallop { --tile: calc(var(--u) * 275.7); }
  .st-sec--instacart .st-wave { --wave-x: calc(var(--u) * -6); }
  .st-sec--olipop .st-wave { --wave-x: calc(var(--u) * 33); }
  .st-sec--training .st-wave { --wave-x: calc(var(--u) * 8); }
  .st-sec--jupiter .st-wave { --wave-x: calc(var(--u) * 14.5); }
  .st-sec--instacart { --y0: 825.5; height: calc(var(--u) * 1107.5); }
  .st-sec--olipop { --y0: 1933; height: calc(var(--u) * 1127); }
  .st-sec--training { --y0: 3060; height: calc(var(--u) * 1993); }
  .st-sec--jupiter { --y0: 5053; height: calc(var(--u) * 1660); }
  .pitch { position: static; }

  /* ── INSTACART ── */
  .pitch--instacart .pitch__title { --tx: calc(var(--u) * 343.8); --ty: calc(var(--u) * (988.9 - var(--y0))); --r: -8.875deg; --fs: calc(var(--u) * 125); letter-spacing: .039em; }
  .pitch--instacart .pitch__chip { left: calc(var(--u) * 354.5); translate: -50% 0; top: calc(var(--u) * (1412 - var(--y0))); }
  .pitch--instacart .pitch__desc { left: calc(var(--u) * 53.5); top: calc(var(--u) * (1104.5 - var(--y0))); width: calc(var(--u) * 594.5); text-align: right; font-size: calc(var(--u) * 50.7); line-height: calc(var(--u) * 36.7); }
  .pitch--instacart .pitch__btn { left: calc(var(--u) * 256); top: calc(var(--u) * (1343 - var(--y0))); }
  .pitch--instacart .pitch__laptop { left: calc(var(--u) * 669); top: calc(var(--u) * (1029 - var(--y0))); width: calc(var(--u) * 596); }
  .pitch--instacart .pitch__points { top: calc(var(--u) * (1493 - var(--y0))); }

  /* ── OLIPOP ── */
  .pitch--olipop .pitch__title { --tx: calc(var(--u) * 1018.75); --ty: calc(var(--u) * (2105 - var(--y0))); --r: 3.375deg; --fs: calc(var(--u) * 134); letter-spacing: .042em; }
  .pitch--olipop .pitch__chip { left: calc(var(--u) * 984.5); translate: -50% 0; top: calc(var(--u) * (2563 - var(--y0))); }
  .pitch--olipop .pitch__desc { left: calc(var(--u) * 723); top: calc(var(--u) * (2246.5 - var(--y0))); width: calc(var(--u) * 572); text-align: left; font-size: calc(var(--u) * 51); line-height: calc(var(--u) * 36.2); }
  .pitch--olipop .pitch__btn { left: calc(var(--u) * 886); top: calc(var(--u) * (2494.5 - var(--y0))); }
  .pitch--olipop .pitch__laptop { left: calc(var(--u) * 70); top: calc(var(--u) * (2192 - var(--y0))); width: calc(var(--u) * 626); }
  .pitch--olipop .pitch__points { top: calc(var(--u) * (2669 - var(--y0))); }

  /* ── TRAINING ARC ── */
  .tr__title { --tx: calc(var(--u) * 406); --ty: calc(var(--u) * (3204 - var(--y0))); --r: -9.375deg; --fs: calc(var(--u) * 120.5); letter-spacing: .039em; }
  .tr__chip { left: calc(var(--u) * 812); top: calc(var(--u) * (3186 - var(--y0))); }
  .tr__desc { left: calc(var(--u) * 324); top: calc(var(--u) * (3269 - var(--y0))); width: calc(var(--u) * 1000); font-size: calc(var(--u) * 40); line-height: calc(var(--u) * 29.5); }
  .tr__pill--content { left: calc(var(--u) * 531.5); top: calc(var(--u) * (3384.5 - var(--y0))); }
  .tr__videos > .pvideo:nth-child(1) { left: calc(var(--u) * 136.5); top: calc(var(--u) * (3498.5 - var(--y0))); }
  .tr__videos > .pvideo:nth-child(2) { left: calc(var(--u) * 539.5); top: calc(var(--u) * (3498.5 - var(--y0))); }
  .tr__videos > .pvideo:nth-child(3) { left: calc(var(--u) * 942.5); top: calc(var(--u) * (3498.5 - var(--y0))); }
  .tr__caption { left: calc(var(--u) * 83); width: calc(var(--u) * 1200); top: calc(var(--u) * (4046 - var(--y0))); text-align: center; white-space: pre-wrap; font-size: calc(var(--u) * 40.5); line-height: calc(var(--u) * 29.5); }
  .tr__pill--emails { left: calc(var(--u) * 531.5); top: calc(var(--u) * (4167 - var(--y0))); }
  .tr__laptop { left: calc(var(--u) * 122); top: calc(var(--u) * (4281 - var(--y0))); width: calc(var(--u) * 473); }
  .tr__report { left: calc(var(--u) * 685.5); top: calc(var(--u) * (4281 - var(--y0))); width: calc(var(--u) * 513.5); }
  .tr__intro { left: calc(var(--u) * 715); top: calc(var(--u) * (4525 - var(--y0))); width: calc(var(--u) * 440); text-align: center; font-size: calc(var(--u) * 40); line-height: calc(var(--u) * 29); }
  .seq { left: 0; width: calc(var(--u) * 1366); top: calc(var(--u) * (4613 - var(--y0))); font-size: calc(var(--u) * 29.7); }
  .tr__pill--results { left: calc(var(--u) * 531.5); top: calc(var(--u) * (4679.5 - var(--y0))); }
  .tr__stats { left: calc(var(--u) * 102); top: calc(var(--u) * (4807 - var(--y0))); }

  /* ── JUPITER HOUSE ── */
  .jp__title { --tx: calc(var(--u) * 1017.5); --ty: calc(var(--u) * (5211 - var(--y0))); --r: 4.156deg; --fs: calc(var(--u) * 114.5); }
  .jp__chip { left: calc(var(--u) * 100); top: calc(var(--u) * (5180 - var(--y0))); }
  .jp__desc { left: calc(var(--u) * 76); width: calc(var(--u) * 971); top: calc(var(--u) * (5262 - var(--y0))); text-align: center; font-size: calc(var(--u) * 40.5); line-height: calc(var(--u) * 29); }
  .jp__phone--before { left: calc(var(--u) * 240); top: calc(var(--u) * (5408 - var(--y0))); }
  .jp__phone--after { left: calc(var(--u) * 757); top: calc(var(--u) * (5408 - var(--y0))); }
  .jp__phone--before .pshot__label { left: calc(var(--u) * -32); top: calc(var(--u) * -24); font-size: calc(var(--u) * 86); rotate: -3.5deg; }
  .jp__phone--after .pshot__label { left: calc(var(--u) * -26); top: calc(var(--u) * -30); font-size: calc(var(--u) * 86); rotate: -3.5deg; }
  .jp__caption { left: calc(var(--u) * 230); width: calc(var(--u) * 905); top: calc(var(--u) * (6181 - var(--y0))); text-align: center; font-size: calc(var(--u) * 33.7); line-height: calc(var(--u) * 25); }
  .jp__points { top: calc(var(--u) * (6267 - var(--y0))); }
  .jp__foot { left: 0; width: calc(var(--u) * 1366); top: calc(var(--u) * (6666 - var(--y0))); }
  .jp__foot .back-link { font-size: calc(var(--u) * 32); }
}

/* ═════════════════════════ PHONES & TABLETS (<1000px) ═════════════════════════ */
@media (max-width: 999px) {
  /* ── hero ── */
  .st-hero { height: calc(var(--u) * 660); }
  .st-hero__stage { width: calc(var(--u) * 430); }
  .st-hero__bar { height: calc(var(--u) * 52); }
  .st-hero__logo { left: calc(var(--u) * 16); top: calc(var(--u) * 12); width: calc(var(--u) * 46); }
  .st-hero__nav { right: calc(var(--u) * 14); top: calc(var(--u) * 26); transform: translateY(-50%); font-size: max(12.5px, calc(var(--u) * 14)); }
  .st-hero__nav .site-nav__list { gap: max(12px, calc(var(--u) * 14)); }
  .st-hero__back { left: calc(var(--u) * 20); top: calc(var(--u) * 70); }
  .st-hero .back-link { font-size: max(13px, calc(var(--u) * 15)); gap: 8px; }
  .st-hero .back-link__arrow { width: max(16px, calc(var(--u) * 16)); }
  .st-hero__title { font-size: calc(var(--u) * 148); --tx: calc(var(--u) * 213); --ty: calc(var(--u) * 216); -webkit-text-stroke-width: calc(var(--u) * 1.2); }
  .st-hero__paper { width: calc(var(--u) * 302.6); height: calc(var(--u) * 225); border-radius: calc(var(--u) * 22); }
  .st-hero__paper--butter { left: calc(var(--u) * 50.7); top: calc(var(--u) * 325.8); }
  .st-hero__paper--blue { left: calc(var(--u) * 40.8); top: calc(var(--u) * 319.5); }
  .st-hero__character { left: calc(var(--u) * 60); top: calc(var(--u) * 230); width: calc(var(--u) * 310); }
  .doodle--st-stars { left: calc(var(--u) * -24); top: calc(var(--u) * 500); width: calc(var(--u) * 200); }
  .doodle--st-heart { left: calc(var(--u) * 354); top: calc(var(--u) * 64); width: calc(var(--u) * 62); }

  /* ── sections: one centred column each ── */
  .st-sec { --u: min(calc(100vw / 430), 1.35px); }   /* tablets: a slightly smaller column than the hero's canvas */
  .st-sec__stage {
    display: flex; flex-direction: column; align-items: center; height: auto; width: 100%;
    max-width: calc(var(--u) * 430); box-sizing: border-box; padding: calc(var(--u) * 96) 20px calc(var(--u) * 64);
  }
  .st-sec__stage > *, .pitch > * { position: static; }
  .pitch { display: flex; flex-direction: column; align-items: center; width: 100%; }
  .st-sec--jupiter .st-sec__stage { padding-bottom: calc(var(--u) * 56); }

  .pitch__title, .tr__title, .jp__title {
    --r: -3.5deg; transform: rotate(var(--r)); left: auto; top: auto; white-space: normal; text-align: center; text-wrap: balance;
    font-size: calc(var(--u) * 66); line-height: 1.02; letter-spacing: .04em; max-width: 100%; margin-bottom: calc(var(--u) * 14);
    -webkit-text-stroke-width: calc(var(--u) * .7);
  }
  .pitch--olipop .pitch__title, .jp__title { --r: 3deg; }
  .tr__title { --r: -4deg; font-size: calc(var(--u) * 56); }

  .chip { white-space: normal; text-align: center; gap: 8px; font-size: max(13px, calc(var(--u) * 18)); margin-bottom: calc(var(--u) * 18); }
  .pitch__desc, .tr__desc, .jp__desc { text-align: center; max-width: calc(var(--u) * 372); font-size: max(16px, calc(var(--u) * 24)); line-height: 1.22; }
  .pitch__desc { margin-bottom: calc(var(--u) * 24); }
  .tr__desc, .jp__desc { margin-bottom: calc(var(--u) * 34); }
  .tr__caption, .jp__caption, .tr__intro { text-align: center; max-width: calc(var(--u) * 372); font-size: max(15px, calc(var(--u) * 22)); line-height: 1.22; white-space: normal; }
  .tr__caption { margin-top: calc(var(--u) * 26); }

  .deck-btn { width: max(190px, calc(var(--u) * 220)); height: max(44px, calc(var(--u) * 50)); font-size: max(14px, calc(var(--u) * 19)); gap: 9px; margin-bottom: calc(var(--u) * 34); }
  .deck-btn__arrow { width: max(14px, calc(var(--u) * 18)); }
  .pitch__laptop { width: min(100%, calc(var(--u) * 400)); margin-bottom: calc(var(--u) * 34); }

  .points { position: static; width: 100%; max-width: calc(var(--u) * 380); left: auto; row-gap: calc(var(--u) * 20); }
  .points__row { grid-template-columns: minmax(0, 1fr); row-gap: 8px; }
  .points__label { height: max(48px, calc(var(--u) * 56)); font-size: max(15px, calc(var(--u) * 22)); border-radius: calc(var(--u) * 20); }
  .points__text { min-height: 0; padding: calc(var(--u) * 15) calc(var(--u) * 20); font-size: max(15px, calc(var(--u) * 21)); line-height: 1.24; border-radius: calc(var(--u) * 22); }

  .pill { width: min(100%, calc(var(--u) * 260)); height: max(46px, calc(var(--u) * 54)); font-size: max(15px, calc(var(--u) * 24)); }
  .tr__pill { margin: calc(var(--u) * 40) 0 calc(var(--u) * 22); }
  .tr__pill--content { margin-top: 0; }

  /* the three training videos: a swipeable row */
  .tr__videos {
    display: flex; gap: 16px; align-self: stretch; margin: -22px -20px -8px; padding: 32px 20px 40px; box-sizing: border-box;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 20px; justify-content: safe center; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .tr__videos::-webkit-scrollbar { display: none; }
  .pvideo { position: relative; flex: none; width: min(70vw, 270px); scroll-snap-align: center; }
  .pvideo__frame { border-radius: calc(var(--u) * 24); box-shadow: 0 8px 18px rgba(15, 3, 9, .28); }
  @media (min-width: 600px) { .pvideo { width: 166px; } }

  .tr__laptop { width: min(100%, calc(var(--u) * 380)); margin-bottom: calc(var(--u) * 22); }
  .tr__report { width: min(100%, calc(var(--u) * 380)); border-radius: calc(var(--u) * 24); margin-bottom: calc(var(--u) * 26); }
  .seq { flex-direction: column; white-space: normal; margin-top: calc(var(--u) * 14); font-size: max(17px, calc(var(--u) * 25)); text-align: center; }
  .seq__step { flex-direction: column; }
  .seq__arrow { width: max(18px, calc(var(--u) * 22)); margin: 9px 0; rotate: 90deg; }

  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(var(--u) * 14); width: 100%; max-width: calc(var(--u) * 380); }
  .stat { height: max(108px, calc(var(--u) * 122)); border-radius: calc(var(--u) * 26); }
  .stat__label { inset: calc(var(--u) * 12) calc(var(--u) * 8) auto; font-size: max(13px, calc(var(--u) * 19)); line-height: 1.15; }
  .stat__value { inset: calc(var(--u) * 58) 0 auto; font-size: max(26px, calc(var(--u) * 40)); line-height: 1.1; }

  /* Jupiter: the two phones side by side; everything inside a phone scales from its own width */
  .jp__phones { display: flex; justify-content: center; gap: calc(var(--pw) * .06); width: 100%; padding-top: calc(var(--u) * 30); margin-bottom: calc(var(--u) * 30); --pw: min(calc((100vw - 56px) / 2), calc(var(--u) * 300), 340px); }
  .pshot { --u: calc(var(--pw) / 370); position: relative; flex: none; width: var(--pw); }
  .jp__phone--before .pshot__label { left: calc(var(--u) * -32); top: calc(var(--u) * -30); font-size: calc(var(--u) * 86); rotate: -3.5deg; }
  .jp__phone--after .pshot__label { left: calc(var(--u) * -20); top: calc(var(--u) * -34); font-size: calc(var(--u) * 86); rotate: -3.5deg; }
  .jp__caption { margin-bottom: calc(var(--u) * 34); }
  .jp__foot { margin-top: calc(var(--u) * 50); }
  .jp__foot .back-link { font-size: max(15px, calc(var(--u) * 18)); }
}

@media (prefers-reduced-motion: reduce) {
  .pvideo__frame, .stat, .deck-btn { transition: none !important; }
  .pvideo:hover .pvideo__frame, .stat:hover { transform: none !important; }
}

/* ── mockup.css ── */
/* ═════════════════════════════════════════════════════════════
   INTERACTIVE MOCKUP  (components/InteractiveMockup.mjs · client/mockup.js)
   A laptop / phone drawn in CSS around a screen that can hold a long design.
   Every size inside a device is in `cqw` (1% of the device's own width), so the same markup scales from the small
   version on the page to the big one in the overlay. The page decides how wide a .mm is (see designer.css).
   ═════════════════════════════════════════════════════════════ */

/* ── the device (shared by the on-page version and the overlay) ── */
.dev { position: relative; display: block; width: 100%; container-type: inline-size; }
.dev__img { display: block; width: 100%; height: auto; max-width: none; -webkit-user-drag: none; user-select: none; }
.dev__screen { position: relative; display: block; overflow: hidden; }

/* laptop: lid + screen are CSS, the keyboard deck is the supplied mock-up's own base (assets/projects/laptop-base.webp) */
.dev--laptop { aspect-ratio: 3692 / 2435; }
.dev--laptop .dev__lid {
  position: absolute; left: 5.39cqw; top: 0; width: 89.14cqw; height: 57.53cqw; box-sizing: border-box;
  padding: .56cqw .56cqw .12cqw .6cqw; background: #46474c; border-radius: 1.9cqw 1.9cqw .4cqw .4cqw;
  box-shadow: inset 0 0 0 .1cqw rgba(255, 255, 255, .07);
}
.dev--laptop .dev__screen { width: 100%; height: 100%; border-radius: 1.15cqw; background: #f4e6d9; }
.dev--laptop .dev__base { position: absolute; left: 0; top: 57.5cqw; width: 100%; height: auto; }

/* phone: dark rim, black bezel, screen, a notch with speaker + camera, side buttons */
.dev--phone { aspect-ratio: 1969 / 3972; }
.dev--phone .dev__body { position: absolute; inset: 0; border-radius: 11.2cqw; background: #555; }
.dev--phone .dev__body::before { content: ''; position: absolute; inset: 1.07cqw; border-radius: 10.2cqw; background: #000; }
.dev--phone .dev__screen {
  position: absolute; left: 6.3cqw; right: 6.2cqw; top: 6.04cqw; bottom: 5.74cqw; border-radius: 6.3cqw; background: #d8c5ff;
  box-sizing: border-box; padding-top: 8.6cqw;       /* the notch sits over this strip, so the design's own logo starts clear of it */
}
.dev--phone .dev__notch {
  position: absolute; z-index: 3; left: 25cqw; top: 6.04cqw; width: 50cqw; height: 6.6cqw; pointer-events: none;
  background: #000; border-radius: 0 0 3.3cqw 3.3cqw;
}
.dev--phone .dev__notch::before { content: ''; position: absolute; left: 17.4cqw; top: 2.9cqw; width: 13.4cqw; height: 1.8cqw; border-radius: 99px; background: #555; }
.dev--phone .dev__notch::after { content: ''; position: absolute; left: 35.2cqw; top: 2.5cqw; width: 2.6cqw; height: 2.6cqw; border-radius: 50%; background: #4a4a52; }
.dev--phone .dev__btn { position: absolute; z-index: 0; width: 1.3cqw; background: #2e2e33; }
.dev--phone .dev__btn--l1 { left: -1.05cqw; top: 26.7cqw; height: 8.1cqw; border-radius: .5cqw 0 0 .5cqw; }
.dev--phone .dev__btn--l2 { left: -1.05cqw; top: 41.3cqw; height: 14.6cqw; border-radius: .5cqw 0 0 .5cqw; }
.dev--phone .dev__btn--l3 { left: -1.05cqw; top: 59.2cqw; height: 15cqw; border-radius: .5cqw 0 0 .5cqw; }
.dev--phone .dev__btn--r { right: -1.05cqw; top: 46.4cqw; height: 23.4cqw; border-radius: 0 .5cqw .5cqw 0; }
.dev--phone .dev__body, .dev--phone .dev__screen { z-index: 1; }
.dev--phone .dev__screen { z-index: 2; }

/* ── on the page: the trigger ── */
.mm { position: relative; }
.mm__open {
  position: relative; display: block; width: 100%; margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit;
  cursor: pointer; text-align: left; -webkit-tap-highlight-color: transparent;
}
.mm__open:focus-visible { outline: 3px dashed var(--cream); outline-offset: 10px; border-radius: 3%; }
.mm__lift {
  display: block; transform-origin: 50% 60%;
  transform: perspective(1400px) translateY(var(--lift, 0px)) rotateX(var(--tiltY, 0deg)) rotateY(var(--tiltX, 0deg)) scale(var(--grow, 1));
  transition: transform .5s var(--ease-spring), filter .4s;
  filter: drop-shadow(0 calc(var(--u) * 12) calc(var(--u) * 20) rgba(15, 3, 9, .38));
}
.mm.is-open .mm__lift { visibility: hidden; }

/* the scrapbook "click me!" note: a hand-drawn cursor + handwriting, riding on the corner of the device */
.mm__note {
  position: absolute; z-index: 4; display: none; align-items: flex-end; gap: calc(var(--u) * 4); pointer-events: none;
  left: var(--note-x, 100%); top: var(--note-y, 100%); rotate: var(--note-rot, -7deg); transform-origin: 0 0;
  transition: translate .45s var(--ease-spring), scale .45s var(--ease-spring), opacity .3s;
}
.js .mm__note { display: flex; }
.mm.is-open .mm__note { opacity: 0; }
.mm__cursor { width: calc(var(--u) * 50); height: auto; flex: none; transform-origin: 20% 15%; animation: mm-click 3.6s ease-in-out 1.2s infinite; }
.mm__note-text {
  font-family: var(--font-accent); font-weight: 400; font-synthesis: none;   /* plain Zeyada: the page's heavier weight must not be faked onto it */
  font-size: calc(var(--u) * 54); line-height: 1; white-space: nowrap; color: var(--cream); padding-bottom: calc(var(--u) * 2);
}
.mm--flip .mm__cursor { scale: -1 1; transform-origin: 80% 15%; }
@keyframes mm-click {
  0%, 62%, 100% { transform: translate(0, 0) scale(1); }
  68% { transform: translate(calc(var(--u) * -3), calc(var(--u) * -3)) scale(.9); }
  74% { transform: translate(0, 0) scale(1); }
  80% { transform: translate(calc(var(--u) * -3), calc(var(--u) * -3)) scale(.9); }
  86% { transform: translate(0, 0) scale(1); }
}
@media (hover: hover) and (pointer: fine) {
  .mm__open:hover .mm__lift, .mm__open:focus-visible .mm__lift { --lift: -8px; --grow: 1.018; }
  .mm__open:hover .mm__note, .mm__open:focus-visible .mm__note { translate: calc(var(--u) * -6) calc(var(--u) * -6); scale: 1.07; }
}
.mm__open:active .mm__lift { --grow: .992; --lift: -2px; }

/* ── the overlay: the SAME device, enlarged, its screen is the scroller ── */
html.mm-lock { scroll-behavior: auto; }
html.mm-lock body { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; }

.mm-modal {
  --vh: 100vh; position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0;
  border: 0; background: transparent; color: var(--cream); overflow: hidden;
}
@supports (height: 100dvh) { .mm-modal { --vh: 100dvh; } }
.mm-modal::backdrop { background: transparent; }
.mm-modal__scrim { position: absolute; inset: 0; background: rgba(34, 8, 21, .9); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.mm-modal__stage {
  position: relative; box-sizing: border-box; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; padding: calc(env(safe-area-inset-top, 0px) + 70px) 3vw calc(env(safe-area-inset-bottom, 0px) + 14px);
}
.mm-modal__holder { display: block; flex: none; width: var(--mm-w); }
.mm-modal--laptop { --mm-w: min(94vw, calc((var(--vh) - 232px) * 1.516), 1560px); }   /* 232 = title above + three caption lines below + padding */
.mm-modal--phone { --mm-w: min(84vw, calc((var(--vh) - 232px) * .4957), 540px); }
.mm-modal .dev { filter: drop-shadow(0 22px 40px rgba(8, 0, 4, .55)); transform-origin: 0 0; }

/* the screen scrolls; the hardware around it never moves */
.mm-modal .dev__screen {
  overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; -webkit-overflow-scrolling: touch;
  scrollbar-width: thin; scrollbar-color: rgba(28, 28, 36, .55) transparent; cursor: default;
}
.mm-modal .dev--phone .dev__screen { scrollbar-width: none; }
.mm-modal .dev--phone .dev__screen::-webkit-scrollbar { display: none; }
.mm-modal .dev__screen::-webkit-scrollbar { width: 8px; }
.mm-modal .dev__screen::-webkit-scrollbar-thumb { background: rgba(28, 28, 36, .5); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
.mm-modal .dev__screen:focus { outline: none; }
.mm-modal .dev__screen:focus-visible { outline: 3px dashed var(--butter); outline-offset: -3px; }

.mm-modal__title {
  margin: 0; max-width: 100%; text-align: center; text-transform: uppercase; font-family: var(--font-body); font-weight: 700;
  font-size: 26px; line-height: 1.1; letter-spacing: .07em; padding-left: .07em; color: var(--cream);
}
.mm-modal__caption { margin: 0; max-width: 46rem; display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; font-family: var(--font-body); font-size: 18px; line-height: 1.25; color: rgba(247, 243, 239, .92); }
.mm-modal__type { font-weight: 700; letter-spacing: .03em; color: var(--cream); }
.mm-modal__desc { opacity: .85; text-wrap: balance; }
.mm-modal__hint { margin-top: 2px; font-family: var(--font-accent); font-size: 1.35em; line-height: 1.1; color: var(--blue); white-space: nowrap; }

.mm-modal__close {
  position: absolute; z-index: 6; top: calc(env(safe-area-inset-top, 0px) + 14px); right: max(14px, 2vw); display: inline-flex; align-items: center; gap: 10px;
  min-height: 48px; padding: 0 20px 0 15px; border-radius: 999px; border: 2px solid var(--ink); background: var(--butter); color: var(--ink); cursor: pointer;
  font-family: var(--font-body); font-weight: 700; font-size: 19px; letter-spacing: .05em; text-transform: uppercase; line-height: 1;
  box-shadow: 0 6px 18px rgba(8, 0, 4, .35); transition: transform .35s var(--ease-spring), background-color .25s;
}
.mm-modal__close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; }
.mm-modal__close span { position: relative; top: .06em; }
.mm-modal__close:hover, .mm-modal__close:focus-visible { background: var(--blue); transform: rotate(-2deg) scale(1.05); }
.mm-modal__close:active { transform: scale(.96); }
.mm-modal__close:focus-visible { outline: 3px dashed var(--cream); outline-offset: 4px; }

@media (max-width: 999px) {
  .mm-modal__stage { padding-top: calc(env(safe-area-inset-top, 0px) + 68px); gap: 10px; }
  .mm-modal--laptop { --mm-w: min(96vw, calc((var(--vh) - 222px) * 1.516)); }
  .mm-modal--phone { --mm-w: min(80vw, calc((var(--vh) - 226px) * .4957), 440px); }
  .mm-modal__title { font-size: 21px; }
  .mm-modal__caption { font-size: 16px; }
  .mm-modal__close { right: 12px; }
}
@media (max-height: 520px) and (orientation: landscape) {
  .mm-modal__stage { padding-top: 12px; padding-bottom: 8px; gap: 6px; }
  .mm-modal--laptop { --mm-w: min(84vw, calc((var(--vh) - 66px) * 1.516)); }
  .mm-modal--phone { --mm-w: min(60vw, calc((var(--vh) - 66px) * .4957)); }
  .mm-modal__close { top: 8px; right: 8px; min-height: 44px; }
  .mm-modal__caption, .mm-modal__title { display: none; }   /* no room in a short landscape screen: the device gets it all */
}

@media (prefers-reduced-motion: reduce) {
  .mm__cursor { animation: none; }
  .mm__lift, .mm__note, .mm-modal__close { transition: none !important; }
  .mm__open:hover .mm__lift, .mm__open:hover .mm__note { transform: none; translate: none; scale: none; --lift: 0px; --grow: 1; }
}

/* ── lightbox.css ── */
/* ═════════════════════════════════════════════════════════════
   VIDEO LIGHTBOX  (client/video-lightbox.js)
   Every video on the site — the Creator page's short-form reel, the Strategist "30-day training arc" clips,
   and the Home page's About video — shares this. The browser's own video fullscreen stretches a portrait
   clip to fill the whole screen and crops it (object-fit: cover applied at full-viewport size), so instead
   of letting that happen this intercepts the fullscreen request and opens the SAME phone mockup used
   elsewhere on the site (see .phone-video in components.css), enlarged, at the video's own aspect ratio —
   the same enlarge-in-place idea as the Designer page's device mockups (mockup.css / mockup.js), just for
   video instead of a scrolling image. The real <video> element is MOVED in and back out (never cloned, never
   re-sourced), so playback is never interrupted or restarted.
   ═════════════════════════════════════════════════════════════ */
html.vlb-lock { scroll-behavior: auto; }
html.vlb-lock body { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; }

.vlb-modal {
  --vh: 100vh; position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0;
  border: 0; background: transparent; color: var(--cream); overflow: hidden;
}
@supports (height: 100dvh) { .vlb-modal { --vh: 100dvh; } }
.vlb-modal::backdrop { background: transparent; }
.vlb-modal__scrim { position: absolute; inset: 0; background: rgba(34, 8, 21, .9); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.vlb-modal__stage {
  position: relative; box-sizing: border-box; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  padding: calc(env(safe-area-inset-top, 0px) + 66px) 3vw calc(env(safe-area-inset-bottom, 0px) + 14px);
}
/* width comes from a height budget × the video's own aspect ratio (set per-video as --vlb-ar), same technique
   as .mm-modal--phone's --mm-w in mockup.css — capped so it never overwhelms very tall/narrow viewports. */
.vlb-modal__holder { display: block; flex: none; width: min(84vw, calc((var(--vh) - 84px) * var(--vlb-ar, .5857)), 540px); }
.vlb-modal .phone-video { width: 100%; }
.vlb-modal .phone-video__play { display: none; }   /* already playing by the time this can open */
.vlb-modal .phone-video__bezel { filter: drop-shadow(0 22px 40px rgba(8, 0, 4, .55)); }

.vlb-modal__close {
  position: absolute; z-index: 6; top: calc(env(safe-area-inset-top, 0px) + 14px); right: max(14px, 2vw); display: inline-flex; align-items: center; gap: 10px;
  min-height: 48px; padding: 0 20px 0 15px; border-radius: 999px; border: 2px solid var(--ink); background: var(--butter); color: var(--ink); cursor: pointer;
  font-family: var(--font-body); font-weight: 700; font-size: 19px; letter-spacing: .05em; text-transform: uppercase; line-height: 1;
  box-shadow: 0 6px 18px rgba(8, 0, 4, .35); transition: transform .35s var(--ease-spring), background-color .25s;
}
.vlb-modal__close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; }
.vlb-modal__close span { position: relative; top: .06em; }
.vlb-modal__close:hover, .vlb-modal__close:focus-visible { background: var(--blue); transform: rotate(-2deg) scale(1.05); }
.vlb-modal__close:active { transform: scale(.96); }
.vlb-modal__close:focus-visible { outline: 3px dashed var(--cream); outline-offset: 4px; }

@media (max-width: 999px) {
  .vlb-modal__stage { padding-top: calc(env(safe-area-inset-top, 0px) + 64px); }
  .vlb-modal__holder { width: min(80vw, calc((var(--vh) - 80px) * var(--vlb-ar, .5857)), 440px); }
  .vlb-modal__close { right: 12px; }
}
@media (max-height: 520px) and (orientation: landscape) {
  .vlb-modal__stage { padding: 10px 3vw; }
  .vlb-modal__holder { width: min(58vw, calc((var(--vh) - 20px) * var(--vlb-ar, .5857))); }
  .vlb-modal__close { top: 8px; right: 8px; min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .vlb-modal__close { transition: none !important; }
}

/* ── designer.css ── */
/* ═════════════════════════════════════════════════════════════
   DESIGNER PAGE
   Desktop (≥1000px): rebuilt 1:1 on the 1366-unit Canva canvas. Every number is a Canva px measured from
   04-designer.png, written as calc(var(--u) * N). Sections set --y0 (their top edge on the canvas) so the numbers
   stay the Canva ones: top = calc(var(--u) * (Y - var(--y0))).
   The Email / Web section is the one deliberate difference: the Canva page shows the full-length email and website;
   here each sits in a device (InteractiveMockup, see mockup.css) that opens to a scrollable preview, so the section is shorter.
   Phones/tablets (<1000px): the hero is re-composed on a 430-unit canvas and each section becomes a centred column.
   ═════════════════════════════════════════════════════════════ */

/* ═══════════════ HERO ═══════════════ */
.dz-hero { position: relative; z-index: 3; background: var(--blue); overflow-x: clip; }
.dz-hero__stage { position: relative; height: 100%; margin-inline: auto; }
.dz-hero__logo, .dz-hero__nav, .dz-hero__back { position: absolute; z-index: 7; }
.dz-hero__nav .site-nav__list { display: flex; align-items: center; }

.dz-hero__title { position: absolute; z-index: 1; margin: 0; pointer-events: none; line-height: 0; }
.dz-hero__title-art { display: block; width: 100%; height: 100%; overflow: visible; }
.dz-hero__title-art text {
  font-family: var(--font-heading); font-weight: 400; font-size: 424px; letter-spacing: 0; fill: var(--ink);
  stroke: var(--ink); stroke-width: .8px; text-rendering: geometricPrecision;
}
.dz-hero__frame { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.dz-hero__paper { position: absolute; display: block; }
.dz-hero__paper--burgundy { background: var(--burgundy); }
.dz-hero__paper--cream { background: var(--cream); }
.dz-hero__character { position: absolute; z-index: 3; height: auto; max-width: none; }
.doodle--dz-sparkles { z-index: 2; }
.doodle--dz-lines { z-index: 4; }

/* intro: the two cards slide out from behind the portrait, the title writes itself, stickers pop.
   (--pt-delay is added when arriving from another page so this waits for the paper transition) */
.js .dz-hero__logo, .js .dz-hero__nav { animation: bar-drop .7s var(--ease-out) calc(.1s + var(--pt-delay, 0s)) both; }
.js .dz-hero__back { animation: slide-right .7s var(--ease-out) calc(.25s + var(--pt-delay, 0s)) both; }
.js .dz-hero__paper--burgundy { animation: paper-blue 1s var(--ease-spring) calc(.05s + var(--pt-delay, 0s)) both; }
.js .dz-hero__paper--cream { animation: paper-burgundy 1s var(--ease-spring) calc(.15s + var(--pt-delay, 0s)) both; }
.js .dz-hero__title { animation: name-wipe 1.4s var(--ease-out) calc(.45s + var(--pt-delay, 0s)) both; }
.js .doodle--dz-sparkles { animation: sticker-pop .9s var(--ease-spring) calc(.7s + var(--pt-delay, 0s)) both, twinkle 5.5s ease-in-out calc(1.8s + var(--pt-delay, 0s)) infinite; }
.js .doodle--dz-lines { animation: sticker-pop .8s var(--ease-spring) calc(.85s + var(--pt-delay, 0s)) both; }

/* arriving with the character transition: the same pieces just fade in around the portrait as it lands (see creator.css) */
html.pt-mode-character .dz-hero__logo, html.pt-mode-character .dz-hero__nav, html.pt-mode-character .dz-hero__back { animation: soft-in .5s var(--ease-out) calc(.1s + var(--pt-delay, 0s)) both; }
html.pt-mode-character .dz-hero__paper--burgundy { animation: soft-in-l .55s var(--ease-out) calc(.02s + var(--pt-delay, 0s)) both; }
html.pt-mode-character .dz-hero__paper--cream { animation: soft-in-r .55s var(--ease-out) calc(.08s + var(--pt-delay, 0s)) both; }
html.pt-mode-character .dz-hero__title { animation: name-wipe .9s var(--ease-out) calc(.42s + var(--pt-delay, 0s)) both; }
html.pt-mode-character .doodle--dz-sparkles { animation: soft-pop .55s var(--ease-out) calc(.5s + var(--pt-delay, 0s)) both, twinkle 5.5s ease-in-out calc(1.4s + var(--pt-delay, 0s)) infinite; }
html.pt-mode-character .doodle--dz-lines { animation: soft-pop .5s var(--ease-out) calc(.6s + var(--pt-delay, 0s)) both; }
/* the landing spot for the flying portrait: the real one waits (hidden, no intro) until the flight is over */
html.pt-mode-character .dz-hero__character { animation: none; }
html.pt-mode-character.pt-arriving .dz-hero__character { visibility: hidden; }

/* ═══════════════ SECTIONS (shared) ═══════════════ */
.dz-sec { position: relative; color: var(--ink); font-weight: 700; }   /* the design's handwriting is heavier than Gaegu Regular */
.dz-sec--butter { background: var(--butter); --chip-ink: var(--burgundy); --chip-inv: var(--butter); }
.dz-sec--burgundy { background: var(--burgundy); color: var(--cream); --chip-ink: var(--cream); --chip-inv: var(--burgundy); }
.dz-stage { position: relative; margin-inline: auto; height: 100%; }
.dz-stage > * { position: absolute; }

.dz-title {
  margin: 0; white-space: nowrap; text-align: center; text-transform: uppercase; font-family: var(--font-body); font-weight: 700;
  line-height: 1; letter-spacing: .104em; color: inherit;
}

/* brand kit card, speech bubble, paragraph */
.dz-kit { margin: 0; }
.dz-kit__img { display: block; width: 100%; height: auto; }
.dz-bubble {
  z-index: 2; margin: 0; box-sizing: border-box; display: flex; align-items: center; background: var(--blue); color: var(--ink);
  border: 2px solid var(--ink); font-family: var(--font-body); font-weight: 700;
  rotate: var(--rot0, 0deg); transition: translate .5s var(--ease-spring), rotate .5s var(--ease-spring), box-shadow .4s;
}
@media (hover: hover) and (pointer: fine) {   /* the same little lift-and-tilt as the strategist buttons and stat cards */
  .dz-bubble:hover { translate: 0 calc(var(--u) * -7); rotate: calc(var(--rot0, 0deg) - .9deg); box-shadow: 0 calc(var(--u) * 10) calc(var(--u) * 18) rgba(25, 8, 18, .2); }
}
.dz-about { margin: 0; font-family: var(--font-body); font-weight: 700; color: var(--ink); }

/* package / product cards: everything inside is placed in --cu (= card width / 589) so the card scales as one piece */
.dz-card {
  --cu: calc(100cqw / 589); container-type: inline-size; margin: 0; box-sizing: border-box; overflow: hidden;
  background: var(--cream); border: 2px solid var(--ink); color: var(--ink); aspect-ratio: 593 / 496;
}
.dz-card__art { position: absolute; inset: 0; }
.dz-card__img { position: absolute; display: block; height: auto; max-width: none; transition: transform .5s var(--ease-spring); }
.dz-card__label {
  position: absolute; left: 0; right: 0; text-align: center; text-transform: uppercase; font-family: var(--font-body); font-weight: 400;
  line-height: 1; letter-spacing: .072em; padding-left: .072em; box-sizing: border-box; white-space: nowrap; font-size: calc(var(--cu) * 36); top: calc(var(--cu) * 441);
}
.dz-card--package .dz-card__img--1 { left: calc(var(--cu) * 74); top: calc(var(--cu) * 22); width: calc(var(--cu) * 456); }
.dz-card--product .dz-card__img--1 { left: calc(var(--cu) * 179); top: calc(var(--cu) * 23); width: calc(var(--cu) * 246); }
.dz-card--product .dz-card__img--2 { left: calc(var(--cu) * 30); top: calc(var(--cu) * 176); width: calc(var(--cu) * 197); }
.dz-card--product .dz-card__img--3 { left: calc(var(--cu) * 395.5); top: calc(var(--cu) * 85.5); width: calc(var(--cu) * 110); }
@media (hover: hover) and (pointer: fine) {
  .dz-card--product:hover .dz-card__img--2 { transform: translate(-3px, -6px) rotate(-2deg); }
  .dz-card--product:hover .dz-card__img--3 { transform: translate(3px, -6px) rotate(2deg); }
  .dz-card--product:hover .dz-card__img--1 { transform: translateY(-4px); }
  .dz-card--package:hover .dz-card__img--1 { transform: translateY(-4px) rotate(-.6deg); }
}

/* "spec project" labels (StatusChip, styled in strategist.css): a touch smaller here, one per section */
.dz-chip { font-size: max(12px, calc(var(--u) * 20)); gap: calc(var(--u) * 6); z-index: 2; }

/* the laptop's "click me!" sits over its left side with the cursor turned round, so the click points down into the screen */
.dz-mm--laptop .mm__note { flex-direction: row-reverse; align-items: flex-start; }
.dz-mm--laptop .mm__cursor { rotate: 180deg; transform-origin: 50% 50%; }
.dz-mm--laptop .mm__note-text { padding: calc(var(--u) * 4) 0 0; }
@media (hover: hover) and (pointer: fine) {
  .dz-mm--laptop .mm__open:hover .mm__note, .dz-mm--laptop .mm__open:focus-visible .mm__note { translate: calc(var(--u) * 6) calc(var(--u) * 6); }
}

/* email / web: the squiggle divider and the little stickers */
.dz-squig { display: block; }
.doodle--dz-squig { position: absolute; inset: 0; width: 100%; height: 100%; }
.dz-foot { display: flex; justify-content: center; }
.dz-foot .back-link { color: var(--cream); }
.doodle--dz-sp1, .doodle--dz-sp2, .doodle--dz-sp3 { z-index: 1; }
.doodle--dz-lines2 { z-index: 1; }

/* ═════════════════════════ DESKTOP CANVAS (≥1000px) ═════════════════════════ */
@media (min-width: 1000px) {
  .dz-hero { height: calc(var(--u) * 760); }
  .dz-hero__stage { width: calc(var(--u) * 1366); }
  .dz-hero__logo { left: calc(var(--u) * 17); top: calc(var(--u) * 14); width: calc(var(--u) * 48); }
  .dz-hero__nav { right: calc(var(--u) * 17); top: calc(var(--u) * 27); transform: translateY(-50%); font-size: max(14px, calc(var(--u) * 23.5)); }
  .dz-hero__nav .site-nav__list { gap: calc(var(--u) * 25); }
  .dz-hero__back { left: calc(var(--u) * 31); top: calc(var(--u) * 82.7); }
  .dz-hero .back-link { font-size: calc(var(--u) * 32.4); }

  /* title: the arc's box on the Canva canvas is x 30–870, y 190–760 */
  .dz-hero__title { left: calc(var(--u) * 30); top: calc(var(--u) * 190); width: calc(var(--u) * 840); height: calc(var(--u) * 570); }
  /* cards: a cream card with a burgundy card peeking out up-left (401 × 452, radius ≈ 30); the portrait stands in front */
  .dz-hero__paper { width: calc(var(--u) * 401); height: calc(var(--u) * 452); border-radius: calc(var(--u) * 30); }
  .dz-hero__paper--burgundy { left: calc(var(--u) * 865); top: calc(var(--u) * 177); }
  .dz-hero__paper--cream { left: calc(var(--u) * 891); top: calc(var(--u) * 192); }
  .dz-hero__character { left: calc(var(--u) * 898); top: calc(var(--u) * 70); width: calc(var(--u) * 419); }
  .doodle--dz-sparkles { left: calc(var(--u) * 591); top: calc(var(--u) * 442.5); width: calc(var(--u) * 217.5); }
  .doodle--dz-lines { left: calc(var(--u) * 781); top: calc(var(--u) * 101); width: calc(var(--u) * 123); }

  .dz-stage { width: calc(var(--u) * 1366); }
  .dz-sec .st-wave .scallop { --tile: calc(var(--u) * 275.7); }
  .dz-sec--brand .st-wave { --wave-x: calc(var(--u) * -6.8); }
  .dz-sec--email .st-wave .scallop { --tile: calc(var(--u) * 259.2); }
  .dz-sec--email .st-wave { --wave-x: calc(var(--u) * 50.9); }
  .dz-sec--brand { --y0: 760; height: calc(var(--u) * 1696.5); }
  .dz-sec--email { --y0: 2456.5; height: calc(var(--u) * 1067.5); }

  .dz-title { font-size: calc(var(--u) * 73.5); left: 0; width: 100%; padding-left: .104em; box-sizing: border-box; }

  /* ── BRAND / PRODUCT DESIGN ── */
  .dz-sec--brand .dz-title { top: calc(var(--u) * (876 - var(--y0))); }
  .dz-sec--brand .dz-chip { left: calc(var(--u) * 699); width: calc(var(--u) * 637.5); top: calc(var(--u) * (994 - var(--y0))); }   /* centred over the bubble */
  .dz-kit { left: calc(var(--u) * 46); top: calc(var(--u) * (1002 - var(--y0))); width: calc(var(--u) * 772); }
  .dz-bubble {
    left: calc(var(--u) * 699); top: calc(var(--u) * (1062 - var(--y0))); width: calc(var(--u) * 637.5); height: calc(var(--u) * 242);
    padding: 0 calc(var(--u) * 12) calc(var(--u) * 6.5) calc(var(--u) * 35); border-radius: calc(var(--u) * 78); font-size: calc(var(--u) * 50); line-height: calc(var(--u) * 36);
  }
  .dz-about { left: calc(var(--u) * 868); top: calc(var(--u) * (1366.5 - var(--y0))); width: calc(var(--u) * 430); font-size: calc(var(--u) * 50); line-height: calc(var(--u) * 40); }
  .dz-card { border-radius: calc(var(--u) * 68); width: calc(var(--u) * 593); }
  .dz-card--package { left: calc(var(--u) * 68); top: calc(var(--u) * (1866 - var(--y0))); }
  .dz-card--product { left: calc(var(--u) * 706); top: calc(var(--u) * (1866 - var(--y0))); }

  /* ── EMAIL / WEB DESIGN ── */
  .dz-sec--email .dz-title { top: calc(var(--u) * (2559 - var(--y0))); }
  .dz-sec--email .dz-chip { left: 0; width: 100%; top: calc(var(--u) * (2628 - var(--y0))); }   /* centred under the title, clear of the squiggle below */
  .dz-mm--phone { left: calc(var(--u) * 181); top: calc(var(--u) * (2690 - var(--y0))); width: calc(var(--u) * 340); --note-x: 66%; --note-y: 101%; --note-rot: -6deg; }
  .dz-mm--laptop { left: calc(var(--u) * 630); top: calc(var(--u) * (2845 - var(--y0))); width: calc(var(--u) * 570); --note-x: 3%; --note-y: -17%; --note-rot: 3deg; }
  .dz-squig { left: calc(var(--u) * 564); top: calc(var(--u) * (2690 - var(--y0))); width: calc(var(--u) * 36); height: calc(var(--u) * 640); }
  .doodle--dz-sp1 { left: calc(var(--u) * 1124); top: calc(var(--u) * (2597 - var(--y0))); width: calc(var(--u) * 36); }
  .doodle--dz-sp2 { left: calc(var(--u) * 1248); top: calc(var(--u) * (2607 - var(--y0))); width: calc(var(--u) * 75); }
  .doodle--dz-sp3 { left: calc(var(--u) * 1206); top: calc(var(--u) * (2774 - var(--y0))); width: calc(var(--u) * 64); }
  .doodle--dz-lines2 { left: calc(var(--u) * 153); top: calc(var(--u) * (3338 - var(--y0))); width: calc(var(--u) * 47); }
  .dz-foot { left: 0; width: calc(var(--u) * 1366); top: calc(var(--u) * (3491 - var(--y0))); }
  .dz-foot .back-link { font-size: calc(var(--u) * 32.4); }
}

/* ═════════════════════════ PHONES & TABLETS (<1000px) ═════════════════════════ */
@media (max-width: 999px) {
  /* ── hero ── */
  .dz-hero { height: calc(var(--u) * 800); }
  .dz-hero__stage { width: calc(var(--u) * 430); }
  .dz-hero__logo { left: calc(var(--u) * 16); top: calc(var(--u) * 12); width: calc(var(--u) * 46); }
  .dz-hero__nav { right: calc(var(--u) * 14); top: calc(var(--u) * 26); transform: translateY(-50%); font-size: max(12.5px, calc(var(--u) * 14)); }
  .dz-hero__nav .site-nav__list { gap: max(12px, calc(var(--u) * 14)); }
  .dz-hero__back { left: calc(var(--u) * 20); top: calc(var(--u) * 70); }
  .dz-hero .back-link { font-size: max(13px, calc(var(--u) * 15)); gap: 8px; }
  .dz-hero .back-link__arrow { width: max(16px, calc(var(--u) * 16)); }
  .dz-hero__title { left: calc(var(--u) * 14); top: calc(var(--u) * 100); width: calc(var(--u) * 402); height: calc(var(--u) * 272.9); }
  .dz-hero__paper { width: calc(var(--u) * 260); height: calc(var(--u) * 293); border-radius: calc(var(--u) * 20); }
  .dz-hero__paper--burgundy { left: calc(var(--u) * 133); top: calc(var(--u) * 394); }
  .dz-hero__paper--cream { left: calc(var(--u) * 150); top: calc(var(--u) * 405); }
  .dz-hero__character { left: calc(var(--u) * 154.5); top: calc(var(--u) * 326); width: calc(var(--u) * 271.7); }
  .doodle--dz-sparkles { left: calc(var(--u) * 30); top: calc(var(--u) * 520); width: calc(var(--u) * 92); }
  .doodle--dz-lines { left: calc(var(--u) * 76); top: calc(var(--u) * 343); width: calc(var(--u) * 80); }

  /* ── sections: one centred column each ── */
  .dz-sec { --u: min(calc(100vw / 430), 1.35px); }
  .dz-stage {
    display: flex; flex-direction: column; align-items: center; height: auto; width: 100%; max-width: calc(var(--u) * 430);
    box-sizing: border-box; padding: calc(var(--u) * 92) 20px calc(var(--u) * 64);
  }
  .dz-stage > * { position: static; }
  .dz-stage > .mm, .dz-stage > .dz-card { position: relative; }
  .dz-title { white-space: normal; text-wrap: balance; font-size: max(24px, calc(var(--u) * 37)); line-height: 1.12; letter-spacing: .07em; max-width: calc(var(--u) * 380); margin-bottom: calc(var(--u) * 30); }

  .dz-chip { margin: calc(var(--u) * -12) 0 calc(var(--u) * 26); font-size: max(13px, calc(var(--u) * 19)); }
  .dz-sec--brand .dz-chip { margin-bottom: calc(var(--u) * 22); }
  .dz-kit { width: min(100%, calc(var(--u) * 380)); }
  .dz-bubble {
    width: min(100%, calc(var(--u) * 352)); margin: calc(var(--u) * -30) 0 0 calc(var(--u) * 20); align-self: flex-start; --rot0: -1.2deg;
    padding: calc(var(--u) * 22) calc(var(--u) * 26); border-radius: calc(var(--u) * 42); font-size: max(17px, calc(var(--u) * 26)); line-height: 1.16;
  }
  .dz-about { width: min(100%, calc(var(--u) * 340)); margin: calc(var(--u) * 34) 0 calc(var(--u) * 40); font-size: max(17px, calc(var(--u) * 27)); line-height: 1.17; }
  .dz-card { width: min(100%, calc(var(--u) * 380)); border-radius: calc(var(--u) * 44); }
  .dz-card + .dz-card { margin-top: calc(var(--u) * 26); }
  .dz-sec--brand .dz-stage { padding-bottom: calc(var(--u) * 84); }

  /* email / web */
  .dz-sec--email .dz-stage { padding-top: calc(var(--u) * 90); padding-bottom: calc(var(--u) * 54); }
  .dz-sec--email .dz-title { margin-bottom: calc(var(--u) * 34); }
  .dz-mm--phone { width: min(64vw, calc(var(--u) * 270)); --note-x: 52%; --note-y: 101%; --note-rot: -6deg; }
  .dz-mm--laptop { width: min(100%, calc(var(--u) * 380)); --note-x: 2%; --note-y: -27%; --note-rot: 3deg; }
  .dz-squig { position: relative; width: 100%; height: calc(var(--u) * 46); margin: calc(var(--u) * 84) 0 calc(var(--u) * 50); }
  .doodle--dz-squig { inset: auto; left: 50%; top: 50%; width: calc(var(--u) * 30); height: calc(var(--u) * 260); translate: -50% -50%; rotate: 90deg; }
  .doodle--dz-sp1, .doodle--dz-lines2 { display: none; }
  .dz-stage > .doodle--dz-sp2 { position: absolute; right: calc(var(--u) * 16); top: calc(var(--u) * 132); width: calc(var(--u) * 46); }
  .dz-stage > .doodle--dz-sp3 { position: absolute; left: calc(var(--u) * 20); top: calc(var(--u) * 176); width: calc(var(--u) * 34); }
  .dz-foot { margin-top: calc(var(--u) * 78); }
  .dz-foot .back-link { font-size: max(15px, calc(var(--u) * 18)); }
}

@media (prefers-reduced-motion: reduce) {
  .dz-card__img, .dz-bubble { transition: none !important; }
  .dz-bubble:hover { translate: none; rotate: var(--rot0, 0deg); box-shadow: none; }
  .dz-card--product:hover .dz-card__img, .dz-card--package:hover .dz-card__img { transform: none !important; }
}

/* ── transition.css ── */
/* ═════════════════════════════════════════════════════════════
   PAGE TRANSITIONS  (markup: src/components/PageTransition.mjs · motion: src/client/transition.js
   · paper colours: src/content/transitions.mjs)

   Two types, both built from the same "sheets of paper":
     character  (html.pt-mode-character)  two sheets sweep up behind the picked portrait, which then glides into the next hero
     page       (html.pt-mode-page)       one quick sheet of paper, nothing else moves

   The sheets' resting position (below) IS the "covering" state; the script only animates them on/off screen.
   ═════════════════════════════════════════════════════════════ */

.pt {
  --tile: clamp(96px, calc(100vw / 3), 200px);          /* same wave size as .scallop (components.css) */
  --edge: calc(var(--tile) * 114 / 546.4);
  position: fixed; inset: 0; z-index: 500; display: none; overflow: hidden; pointer-events: none;
}
@media (min-width: 1000px) { .pt { --tile: calc(var(--u) * 273.2); } }
html.pt-out .pt, html.pt-arriving .pt { display: block; pointer-events: auto; }

.pt__set { display: none; }
html.pt-mode-page .pt__set--page, html.pt-mode-character .pt__set--character { display: block; }

/* one sheet = wavy top edge + flat paper + wavy bottom edge; the edges sit just outside the screen while it covers it */
.pt__strip {
  position: absolute; left: -3vw; width: 106vw; top: calc(var(--edge) * -1); height: calc(100% + var(--edge) * 2);
  display: flex; flex-direction: column; z-index: calc(1 + var(--i));
  rotate: var(--rot); will-change: transform;
  filter: drop-shadow(0 4px 8px rgba(20, 4, 12, .22));
}
.pt__paper { position: relative; flex: 1; background: var(--c); margin-block: -1px; }
.pt__edge { flex: none; }
.pt__sticker { position: absolute; height: auto; max-width: none; pointer-events: none; }

.pt__flyer {
  display: none; position: absolute; z-index: 100; transform-origin: 0 0;
  background: center / 100% 100% no-repeat; will-change: transform;
}
html.pt-mode-character .pt__flyer { display: block; }
html:not(.pt-mode-character) .pt__flyer { display: none !important; }

/* Home while leaving with a character: the other cards just fade and settle down a little; the picked one stays */
@keyframes card-away { to { opacity: 0; translate: 0 14px; } }
html.pt-out.pt-mode-character .card:not(.is-picked) { animation: card-away .3s ease-out both; }
html.pt-out.pt-mode-character .card.is-picked .card__img { visibility: hidden; }   /* the flying picture stands in for it */

/* pieces of the arriving page wait a moment so the sheets are already moving (--pt-delay is read by the page CSS) */
html.pt-mode-character.pt-arriving, html.pt-mode-character.pt-arrived { --pt-delay: .32s; }
html.pt-mode-page.pt-arriving, html.pt-mode-page.pt-arrived { --pt-delay: .1s; }
html.pt-arriving:not(.pt-go) *, html.pt-arriving:not(.pt-go) *::before, html.pt-arriving:not(.pt-go) *::after { animation-play-state: paused !important; }

/* a plain page transition never animates character artwork: the portraits are simply there when the sheet lifts */
html.pt-mode-page .fx-photo, html.pt-mode-page .fx-shadow { animation: none; }

/* reduced motion: no sheets, no flight — a plain, quick cross-fade where the browser supports it */
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: auto; }
  ::view-transition-group(root) { animation-duration: .2s; }
  .pt { display: none !important; }
}

/* landing on a #section (e.g. "Back to the menu" -> Home #characters) must jump there, never scroll past the whole page */
html.pt-arriving { scroll-behavior: auto !important; }

/* ── cursor.css ── */
/* ═════════════════════════════════════════════════════════════
   CUSTOM CURSOR  (client/cursor.js)
   A small hand-drawn four-point sparkle instead of the arrow: quiet by default, a touch bigger over anything clickable,
   and a tiny sparkle burst when you click. Nothing here exists until cursor.js sees a real mouse move, so touch screens,
   keyboards, and no-JS visits keep the normal cursor. All of it is pointer-events: none.
   ═════════════════════════════════════════════════════════════ */

/* the star is dual-tone so it reads on every background in the site: ink body, thin cream edge (outside the shape only) */
.cursor-root { --cur-fill: var(--ink); --cur-edge: var(--cream); }

html.cursor-on, html.cursor-on * { cursor: none !important; }

.cursor-root { position: fixed; inset: 0; z-index: 2147483647; pointer-events: none; overflow: visible; }
.cursor { position: absolute; left: 0; top: 0; width: 0; height: 0; will-change: transform; transition: opacity .18s; }
.cursor.is-hidden { opacity: 0; }

/* the star: ~16px, its centre is the pointer's hotspot */
.cursor__star {
  position: absolute; left: -8px; top: -8px; width: 16px; height: 16px; display: block;
  rotate: -8deg; scale: 1; transition: rotate .2s var(--ease-spring), scale .2s var(--ease-spring);
}
.cursor__star svg, .cursor__tag svg, .spark svg { display: block; width: 100%; height: 100%; overflow: visible; }
.cursor__star path { fill: var(--cur-fill); stroke: var(--cur-edge); stroke-width: 3; paint-order: stroke; stroke-linejoin: round; }

/* over anything clickable: a little bigger, a little turned */
.cursor.is-hover .cursor__star { rotate: 9deg; scale: 1.4; }
.cursor.is-down .cursor__star { scale: .86; }
.cursor.is-hover.is-down .cursor__star { scale: 1.15; }
/* character portraits: the same, plus one tiny wiggle on arrival */
.cursor.is-char .cursor__star { scale: 1.5; }
.cursor.is-char .cursor__star.is-wiggle { animation: cursor-wiggle .5s ease-out; }
@keyframes cursor-wiggle {
  0% { rotate: -8deg; } 25% { rotate: -22deg; } 55% { rotate: 20deg; } 80% { rotate: 2deg; } 100% { rotate: 9deg; }
}

/* the small pointer badge (↗ for links that leave the site, ↔ over draggable reels): drawn with a cream halo under the ink line */
.cursor__tag {
  position: absolute; left: 10px; top: 5px; width: 15px; height: 15px; opacity: 0; translate: -4px 3px;
  transition: opacity .16s, translate .2s var(--ease-spring);
}
.cursor__tag path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.cursor__tag .halo { stroke: var(--cur-edge); stroke-width: 4.6; }
.cursor__tag .ink { stroke: var(--cur-fill); stroke-width: 2; }
.cursor.is-ext .cursor__tag--ext, .cursor.is-drag .cursor__tag--drag { opacity: 1; translate: 0 0; }
.cursor.is-drag .cursor__star { scale: 1.1; }

/* click burst: two tiny sparkles and a dot around the click point (created and removed by cursor.js) */
.spark { position: absolute; left: 0; top: 0; display: block; opacity: 0; will-change: transform, opacity; }
.spark path, .spark ellipse { fill: var(--f); stroke: var(--e); stroke-width: 3; paint-order: stroke; stroke-linejoin: round; }
.spark--blue { --f: var(--blue); --e: var(--burgundy); }
.spark--burgundy { --f: var(--burgundy); --e: var(--blue); }
.spark--butter { --f: var(--butter); --e: var(--burgundy); }
.spark ellipse { stroke-width: 3.4; }

@media (prefers-reduced-motion: reduce) {
  .cursor__star, .cursor__tag { transition: none; }
  .cursor.is-hover .cursor__star, .cursor.is-char .cursor__star, .cursor.is-drag .cursor__star { rotate: -8deg; scale: 1.2; }
  .cursor.is-hover.is-down .cursor__star, .cursor.is-char.is-down .cursor__star { scale: 1.1; }
  .cursor.is-down .cursor__star { scale: .9; }
  .cursor.is-char .cursor__star.is-wiggle { animation: none; }
  .cursor__tag { translate: 0 0; }
}
@media (forced-colors: active) { .cursor-root { display: none; } }