@font-face{font-family:Bangers;font-style:normal;font-display:swap;font-weight:400;src:url(./assets/bangers-vietnamese-400-normal-BbvBhFjQ.woff2) format("woff2"),url(./assets/bangers-vietnamese-400-normal-Ll9rymNv.woff) format("woff");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Bangers;font-style:normal;font-display:swap;font-weight:400;src:url(./assets/bangers-latin-ext-400-normal-7BLmjjiv.woff2) format("woff2"),url(./assets/bangers-latin-ext-400-normal-CzVt_Cgx.woff) format("woff");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Bangers;font-style:normal;font-display:swap;font-weight:400;src:url(./assets/bangers-latin-400-normal-DeHY8Ncq.woff2) format("woff2"),url(./assets/bangers-latin-400-normal-BAEm-Pv0.woff) format("woff");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Figtree;font-style:normal;font-display:swap;font-weight:400;src:url(./assets/figtree-latin-ext-400-normal-CXAzuTZb.woff2) format("woff2"),url(./assets/figtree-latin-ext-400-normal-Gbh-3PTk.woff) format("woff");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Figtree;font-style:normal;font-display:swap;font-weight:400;src:url(./assets/figtree-latin-400-normal-g7Dtegnw.woff2) format("woff2"),url(./assets/figtree-latin-400-normal-BD4aNku5.woff) format("woff");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Figtree;font-style:normal;font-display:swap;font-weight:500;src:url(./assets/figtree-latin-ext-500-normal-Du0rIuHj.woff2) format("woff2"),url(./assets/figtree-latin-ext-500-normal-BOEJvrb_.woff) format("woff");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Figtree;font-style:normal;font-display:swap;font-weight:500;src:url(./assets/figtree-latin-500-normal-BWnGEVsr.woff2) format("woff2"),url(./assets/figtree-latin-500-normal-B_yy1phn.woff) format("woff");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Figtree;font-style:normal;font-display:swap;font-weight:600;src:url(./assets/figtree-latin-ext-600-normal-DJlfifZj.woff2) format("woff2"),url(./assets/figtree-latin-ext-600-normal-CQqsimlV.woff) format("woff");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Figtree;font-style:normal;font-display:swap;font-weight:600;src:url(./assets/figtree-latin-600-normal-Cv_xCTDl.woff2) format("woff2"),url(./assets/figtree-latin-600-normal-BM_oTo4n.woff) format("woff");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Figtree;font-style:normal;font-display:swap;font-weight:700;src:url(./assets/figtree-latin-ext-700-normal-CS4sQkGV.woff2) format("woff2"),url(./assets/figtree-latin-ext-700-normal-BoDi4KL2.woff) format("woff");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Figtree;font-style:normal;font-display:swap;font-weight:700;src:url(./assets/figtree-latin-700-normal-th6qEP7c.woff2) format("woff2"),url(./assets/figtree-latin-700-normal-BCCt2T1q.woff) format("woff");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content: ""}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.pointer-events-none{pointer-events:none}.\!visible{visibility:visible!important}.visible{visibility:visible}.invisible{visibility:hidden}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.inset-0{inset:0}.inset-x-0{left:0;right:0}.inset-y-0{top:0;bottom:0}.-bottom-12{bottom:-3rem}.-left-12{left:-3rem}.-right-12{right:-3rem}.-top-12{top:-3rem}.bottom-0{bottom:0}.left-0{left:0}.left-1\/2{left:50%}.left-2{left:.5rem}.left-\[50\%\]{left:50%}.right-0{right:0}.right-1{right:.25rem}.right-2{right:.5rem}.right-3{right:.75rem}.right-4{right:1rem}.top-0{top:0}.top-1\.5{top:.375rem}.top-1\/2{top:50%}.top-3\.5{top:.875rem}.top-4{top:1rem}.top-\[1px\]{top:1px}.top-\[50\%\]{top:50%}.top-\[60\%\]{top:60%}.top-full{top:100%}.isolate{isolation:isolate}.z-10{z-index:10}.z-20{z-index:20}.z-50{z-index:50}.z-\[1\]{z-index:1}.order-first{order:-9999}.order-last{order:9999}.col-start-2{grid-column-start:2}.row-span-2{grid-row:span 2 / span 2}.row-start-1{grid-row-start:1}.\!m-0{margin:0!important}.-mx-1{margin-left:-.25rem;margin-right:-.25rem}.-my-2{margin-top:-.5rem;margin-bottom:-.5rem}.mx-2{margin-left:.5rem;margin-right:.5rem}.mx-3\.5{margin-left:.875rem;margin-right:.875rem}.mx-auto{margin-left:auto;margin-right:auto}.my-0{margin-top:0;margin-bottom:0}.my-0\.5{margin-top:.125rem;margin-bottom:.125rem}.my-1{margin-top:.25rem;margin-bottom:.25rem}.-ml-4{margin-left:-1rem}.-mt-4{margin-top:-1rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.ml-1{margin-left:.25rem}.ml-4{margin-left:1rem}.ml-auto{margin-left:auto}.mt-1\.5{margin-top:.375rem}.mt-2{margin-top:.5rem}.mt-4{margin-top:1rem}.mt-auto{margin-top:auto}.line-clamp-1{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1}.line-clamp-2{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}.block{display:block}.flex{display:flex}.inline-flex{display:inline-flex}.table{display:table}.table-caption{display:table-caption}.table-cell{display:table-cell}.table-row{display:table-row}.grid{display:grid}.hidden{display:none}.aspect-square{aspect-ratio:1 / 1}.aspect-video{aspect-ratio:16 / 9}.size-10{width:2.5rem;height:2.5rem}.size-2{width:.5rem;height:.5rem}.size-2\.5{width:.625rem;height:.625rem}.size-3{width:.75rem;height:.75rem}.size-3\.5{width:.875rem;height:.875rem}.size-4{width:1rem;height:1rem}.size-6{width:1.5rem;height:1.5rem}.size-7{width:1.75rem;height:1.75rem}.size-8{width:2rem;height:2rem}.size-9{width:2.25rem;height:2.25rem}.size-auto{width:auto;height:auto}.size-full{width:100%;height:100%}.h-1\.5{height:.375rem}.h-10{height:2.5rem}.h-12{height:3rem}.h-2{height:.5rem}.h-2\.5{height:.625rem}.h-4{height:1rem}.h-5{height:1.25rem}.h-6{height:1.5rem}.h-7{height:1.75rem}.h-8{height:2rem}.h-9{height:2.25rem}.h-\[1\.15rem\]{height:1.15rem}.h-\[calc\(100\%-1px\)\]{height:calc(100% - 1px)}.h-\[var\(--radix-navigation-menu-viewport-height\)\]{height:var(--radix-navigation-menu-viewport-height)}.h-\[var\(--radix-select-trigger-height\)\]{height:var(--radix-select-trigger-height)}.h-auto{height:auto}.h-full{height:100%}.h-px{height:1px}.h-svh{height:100svh}.max-h-\[300px\]{max-height:300px}.min-h-0{min-height:0px}.min-h-16{min-height:4rem}.min-h-4{min-height:1rem}.min-h-svh{min-height:100svh}.w-0{width:0px}.w-1{width:.25rem}.w-2{width:.5rem}.w-2\.5{width:.625rem}.w-3{width:.75rem}.w-3\/4{width:75%}.w-4{width:1rem}.w-5{width:1.25rem}.w-64{width:16rem}.w-72{width:18rem}.w-8{width:2rem}.w-9{width:2.25rem}.w-\[100px\]{width:100px}.w-auto{width:auto}.w-fit{width:-moz-fit-content;width:fit-content}.w-full{width:100%}.w-max{width:-moz-max-content;width:max-content}.w-px{width:1px}.min-w-0{min-width:0px}.min-w-10{min-width:2.5rem}.min-w-5{min-width:1.25rem}.min-w-8{min-width:2rem}.min-w-9{min-width:2.25rem}.min-w-\[12rem\]{min-width:12rem}.min-w-\[8rem\]{min-width:8rem}.min-w-\[var\(--radix-select-trigger-width\)\]{min-width:var(--radix-select-trigger-width)}.max-w-\[calc\(100\%-2rem\)\]{max-width:calc(100% - 2rem)}.max-w-max{max-width:-moz-max-content;max-width:max-content}.max-w-sm{max-width:24rem}.flex-1{flex:1 1 0%}.shrink-0{flex-shrink:0}.grow{flex-grow:1}.grow-0{flex-grow:0}.basis-full{flex-basis:100%}.caption-bottom{caption-side:bottom}.border-collapse{border-collapse:collapse}.-translate-x-1\/2{--tw-translate-x: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-x-px{--tw-translate-x: -1px;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-y-1\/2{--tw-translate-y: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-x-\[-50\%\]{--tw-translate-x: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-x-px{--tw-translate-x: 1px;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-y-0\.5{--tw-translate-y: .125rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-y-\[-50\%\]{--tw-translate-y: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-y-\[calc\(-50\%_-_2px\)\]{--tw-translate-y: calc(-50% - 2px) ;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.rotate-45{--tw-rotate: 45deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.rotate-90{--tw-rotate: 90deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes caret-blink{0%,70%,to{opacity:1}20%,50%{opacity:0}}.animate-caret-blink{animation:caret-blink 1.25s ease-out infinite}@keyframes pulse{50%{opacity:.5}}.animate-pulse{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}@keyframes spin{to{transform:rotate(360deg)}}.animate-spin{animation:spin 1s linear infinite}.cursor-default{cursor:default}.cursor-text{cursor:text}.touch-none{touch-action:none}.select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none}.resize-none{resize:none}.resize{resize:both}.scroll-my-1{scroll-margin-top:.25rem;scroll-margin-bottom:.25rem}.scroll-py-1{scroll-padding-top:.25rem;scroll-padding-bottom:.25rem}.list-disc{list-style-type:disc}.list-none{list-style-type:none}.auto-rows-min{grid-auto-rows:min-content}.grid-cols-\[0_1fr\]{grid-template-columns:0 1fr}.grid-rows-\[auto_auto\]{grid-template-rows:auto auto}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.flex-col-reverse{flex-direction:column-reverse}.flex-wrap{flex-wrap:wrap}.place-content-center{place-content:center}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.items-stretch{align-items:stretch}.justify-start{justify-content:flex-start}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.justify-items-start{justify-items:start}.gap-0\.5{gap:.125rem}.gap-1{gap:.25rem}.gap-1\.5{gap:.375rem}.gap-2{gap:.5rem}.gap-2\.5{gap:.625rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.gap-7{gap:1.75rem}.gap-\[--spacing\(var\(--gap\)\)\]{gap:var(--spacing(var(--gap)))}.gap-y-0\.5{row-gap:.125rem}.self-start{align-self:flex-start}.self-stretch{align-self:stretch}.justify-self-end{justify-self:end}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.overflow-x-hidden{overflow-x:hidden}.whitespace-nowrap{white-space:nowrap}.text-balance{text-wrap:balance}.break-words{overflow-wrap:break-word}.rounded-\[2px\]{border-radius:2px}.rounded-\[4px\]{border-radius:4px}.rounded-\[calc\(var\(--radius\)-5px\)\]{border-radius:calc(var(--radius) - 5px)}.rounded-\[inherit\]{border-radius:inherit}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:var(--radius)}.rounded-md{border-radius:calc(var(--radius) - 2px)}.rounded-none{border-radius:0}.rounded-sm{border-radius:calc(var(--radius) - 4px)}.rounded-xl{border-radius:calc(var(--radius) + 4px)}.rounded-xs{border-radius:calc(var(--radius) - 6px)}.rounded-l-md{border-top-left-radius:calc(var(--radius) - 2px);border-bottom-left-radius:calc(var(--radius) - 2px)}.rounded-r-md{border-top-right-radius:calc(var(--radius) - 2px);border-bottom-right-radius:calc(var(--radius) - 2px)}.rounded-tl-sm{border-top-left-radius:calc(var(--radius) - 4px)}.border{border-width:1px}.border-0{border-width:0px}.border-\[1\.5px\]{border-width:1.5px}.border-y{border-top-width:1px;border-bottom-width:1px}.border-b{border-bottom-width:1px}.border-l{border-left-width:1px}.border-r{border-right-width:1px}.border-t{border-top-width:1px}.border-dashed{border-style:dashed}.border-border{border-color:hsl(var(--border))}.border-border\/50{border-color:hsl(var(--border) / .5)}.border-input{border-color:hsl(var(--input))}.border-primary{border-color:hsl(var(--primary))}.border-sidebar-border{border-color:hsl(var(--sidebar-border))}.border-transparent{border-color:transparent}.border-l-transparent{border-left-color:transparent}.border-t-transparent{border-top-color:transparent}.bg-accent{background-color:hsl(var(--accent))}.bg-background{background-color:hsl(var(--background))}.bg-black\/50{background-color:#00000080}.bg-border{background-color:hsl(var(--border))}.bg-card{background-color:hsl(var(--card))}.bg-destructive{--tw-bg-opacity: 1;background-color:hsl(var(--destructive) / var(--tw-bg-opacity, 1))}.bg-foreground{background-color:hsl(var(--foreground))}.bg-input{background-color:hsl(var(--input))}.bg-muted{background-color:hsl(var(--muted))}.bg-muted\/50{background-color:hsl(var(--muted) / .5)}.bg-popover{background-color:hsl(var(--popover))}.bg-primary{background-color:hsl(var(--primary))}.bg-primary\/20{background-color:hsl(var(--primary) / .2)}.bg-secondary{background-color:hsl(var(--secondary))}.bg-sidebar{background-color:hsl(var(--sidebar-background))}.bg-sidebar-border{background-color:hsl(var(--sidebar-border))}.bg-transparent{background-color:transparent}.bg-white{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}.fill-current{fill:currentColor}.fill-foreground{fill:hsl(var(--foreground))}.fill-primary{fill:hsl(var(--primary))}.p-0{padding:0}.p-1{padding:.25rem}.p-2{padding:.5rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-6{padding:1.5rem}.p-\[3px\]{padding:3px}.p-px{padding:1px}.px-1{padding-left:.25rem;padding-right:.25rem}.px-1\.5{padding-left:.375rem;padding-right:.375rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-2\.5{padding-left:.625rem;padding-right:.625rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-0\.5{padding-top:.125rem;padding-bottom:.125rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-4{padding-top:1rem;padding-bottom:1rem}.py-6{padding-top:1.5rem;padding-bottom:1.5rem}.pb-3{padding-bottom:.75rem}.pb-4{padding-bottom:1rem}.pl-2{padding-left:.5rem}.pl-3{padding-left:.75rem}.pl-4{padding-left:1rem}.pl-8{padding-left:2rem}.pr-1{padding-right:.25rem}.pr-2{padding-right:.5rem}.pr-2\.5{padding-right:.625rem}.pr-3{padding-right:.75rem}.pr-8{padding-right:2rem}.pt-0{padding-top:0}.pt-3{padding-top:.75rem}.pt-4{padding-top:1rem}.text-left{text-align:left}.text-center{text-align:center}.align-middle{vertical-align:middle}.font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.font-sans{font-family:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji"}.text-\[0\.8rem\]{font-size:.8rem}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-sm\/relaxed{font-size:.875rem;line-height:1.625}.text-xs{font-size:.75rem;line-height:1rem}.font-medium{font-weight:500}.font-normal{font-weight:400}.font-semibold{font-weight:600}.tabular-nums{--tw-numeric-spacing: tabular-nums;font-variant-numeric:var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)}.leading-none{line-height:1}.leading-normal{line-height:1.5}.leading-snug{line-height:1.375}.tracking-tight{letter-spacing:-.025em}.tracking-widest{letter-spacing:.1em}.text-accent-foreground{color:hsl(var(--accent-foreground))}.text-background{color:hsl(var(--background))}.text-card-foreground{color:hsl(var(--card-foreground))}.text-current{color:currentColor}.text-destructive{--tw-text-opacity: 1;color:hsl(var(--destructive) / var(--tw-text-opacity, 1))}.text-foreground{color:hsl(var(--foreground))}.text-muted-foreground{color:hsl(var(--muted-foreground))}.text-popover-foreground{color:hsl(var(--popover-foreground))}.text-primary{color:hsl(var(--primary))}.text-primary-foreground{color:hsl(var(--primary-foreground))}.text-secondary-foreground{color:hsl(var(--secondary-foreground))}.text-sidebar-foreground{color:hsl(var(--sidebar-foreground))}.text-sidebar-foreground\/70{color:hsl(var(--sidebar-foreground) / .7)}.text-white{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.underline-offset-4{text-underline-offset:4px}.opacity-0{opacity:0}.opacity-50{opacity:.5}.opacity-70{opacity:.7}.shadow{--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-\[0_0_0_1px_hsl\(var\(--sidebar-border\)\)\]{--tw-shadow: 0 0 0 1px hsl(var(--sidebar-border));--tw-shadow-colored: 0 0 0 1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-lg{--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-md{--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-none{--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-sm{--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-xl{--tw-shadow: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);--tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-xs{--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.outline-none{outline:2px solid transparent;outline-offset:2px}.outline{outline-style:solid}.\!ring{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color) !important;--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color) !important;box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)!important}.ring{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.ring-0{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.ring-ring\/50{--tw-ring-color: hsl(var(--ring) / .5)}.ring-sidebar-ring{--tw-ring-color: hsl(var(--sidebar-ring))}.ring-offset-background{--tw-ring-offset-color: hsl(var(--background))}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-\[color\,box-shadow\]{transition-property:color,box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-\[left\,right\,width\]{transition-property:left,right,width;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-\[margin\,opacity\]{transition-property:margin,opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-\[width\,height\,padding\]{transition-property:width,height,padding;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-\[width\]{transition-property:width;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-none{transition-property:none}.transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-shadow{transition-property:box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-100{transition-duration:.1s}.duration-1000{transition-duration:1s}.duration-200{transition-duration:.2s}.duration-300{transition-duration:.3s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.ease-linear{transition-timing-function:linear}@keyframes enter{0%{opacity:var(--tw-enter-opacity, 1);transform:translate3d(var(--tw-enter-translate-x, 0),var(--tw-enter-translate-y, 0),0) scale3d(var(--tw-enter-scale, 1),var(--tw-enter-scale, 1),var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0))}}@keyframes exit{to{opacity:var(--tw-exit-opacity, 1);transform:translate3d(var(--tw-exit-translate-x, 0),var(--tw-exit-translate-y, 0),0) scale3d(var(--tw-exit-scale, 1),var(--tw-exit-scale, 1),var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0))}}.animate-in{animation-name:enter;animation-duration:.15s;--tw-enter-opacity: initial;--tw-enter-scale: initial;--tw-enter-rotate: initial;--tw-enter-translate-x: initial;--tw-enter-translate-y: initial}.fade-in-0{--tw-enter-opacity: 0}.zoom-in-95{--tw-enter-scale: .95}.duration-100{animation-duration:.1s}.duration-1000{animation-duration:1s}.duration-200{animation-duration:.2s}.duration-300{animation-duration:.3s}.ease-in-out{animation-timing-function:cubic-bezier(.4,0,.2,1)}.ease-linear{animation-timing-function:linear}.paused{animation-play-state:paused}.\[--cell-size\:--spacing\(8\)\]{--cell-size: var(--spacing(8))}

/* Styles du site MATT& STORES */
:root {
  --black: #171515;
  --black-deep: #0c0b0b;
  --red: #d71936;
  --red-dark: #a90e25;
  --white: #fffdf8;
  --paper: #f5f0e8;
  --gray: #d8d1c8;
  --color-text: var(--black);
  --color-on-dark: var(--white);
  --font-display: 'Bangers', 'Arial Black', sans-serif;
  --font-body: 'Figtree', 'Helvetica Neue', sans-serif;
  --page-gutter: 20px;
  --section-space: 92px;
  color-scheme: light;
  font-synthesis: none;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 92px;
  background: var(--black);
}

body {
  margin: 0;
  min-width: 320px;
  padding-bottom: 64px;
  background: var(--paper);
  color: var(--black);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body,
button,
input,
select,
textarea {
  font-family: var(--font-body);
}

button,
a,
input,
select,
textarea,
summary {
  -webkit-tap-highlight-color: transparent;
}

button,
a,
summary,
select {
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  color: inherit;
}

img,
video {
  display: block;
  max-width: 100%;
}

h1,
h2,
h3,
p {
  margin: 0;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

ul,
ol {
  margin: 0;
  padding: 0;
}

::selection {
  background: var(--red);
  color: var(--white);
}

:focus-visible {
  outline: 4px solid var(--red);
  outline-offset: 4px;
}

.site-shell {
  min-height: 100dvh;
  overflow: clip;
}

.page-width {
  width: 100%;
  max-width: 1380px;
  margin-inline: auto;
  padding-inline: var(--page-gutter);
}

.section {
  padding-block: var(--section-space);
}

.comic-paper {
  background-color: var(--paper);
  background-image: radial-gradient(rgba(23, 21, 21, 0.075) 1.1px, transparent 1.1px);
  background-size: 17px 17px;
}

.skip-link {
  position: fixed;
  z-index: 100;
  top: 12px;
  left: 12px;
  border: 3px solid var(--black);
  padding: 12px 18px;
  background: var(--white);
  box-shadow: 5px 5px 0 var(--red);
  color: var(--black);
  font-weight: 800;
  transform: translateY(-180%);
  transition: transform 180ms ease-out;
}

.skip-link:focus {
  transform: translateY(0);
}

.scroll-progress {
  position: fixed;
  z-index: 80;
  top: 0;
  right: 0;
  left: 0;
  height: 5px;
  border-bottom: 1px solid var(--black);
  background: var(--red);
  pointer-events: none;
  transform: scaleX(0);
  transform-origin: left;
  will-change: transform;
}

.cursor-dot,
.cursor-ring {
  position: fixed;
  z-index: 90;
  top: 0;
  left: 0;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  will-change: transform;
}

.cursor-dot {
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  border: 1px solid var(--white);
  background: var(--red);
}

.cursor-ring {
  width: 38px;
  height: 38px;
  margin: -19px 0 0 -19px;
  border: 2px solid var(--red);
  transition: width 180ms ease-out, height 180ms ease-out, margin 180ms ease-out, background-color 180ms ease-out;
}

.cursor-ring.is-active {
  width: 58px;
  height: 58px;
  margin: -29px 0 0 -29px;
  background: rgba(215, 25, 54, 0.16);
}

/* Full-screen video introduction */
.site-intro {
  position: fixed;
  z-index: 200;
  inset: 0;
  overflow: hidden;
  background: var(--black-deep);
  color: var(--white);
  opacity: 1;
  transform: scale(1);
  transition: opacity 550ms ease-in, transform 550ms ease-in;
}

.site-intro--leaving {
  opacity: 0;
  pointer-events: none;
  transform: scale(1.025);
}

.intro-rays {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 150vmax;
  height: 150vmax;
  background: repeating-conic-gradient(from 0deg at 50% 50%, rgba(215, 25, 54, 0.34) 0deg 5deg, transparent 5deg 15deg);
  transform: translate(-50%, -50%);
  animation: intro-rays-turn 90s linear infinite;
  pointer-events: none;
}

.intro-video {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  background: transparent;
}

.intro-brand {
  position: absolute;
  z-index: 4;
  top: max(20px, env(safe-area-inset-top));
  left: 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  pointer-events: none;
  transform: rotate(-2deg);
}

.intro-brand > span {
  border: 2px solid var(--black);
  padding: 4px 8px;
  background: var(--white);
  box-shadow: 3px 3px 0 var(--red);
  color: var(--black);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.13em;
}

.intro-brand strong {
  margin-top: 8px;
  font-family: var(--font-display);
  font-size: clamp(2rem, 8vw, 3.5rem);
  font-weight: 400;
  letter-spacing: 0.05em;
  line-height: 1;
  text-shadow: 3px 3px 0 var(--red);
}

.intro-brand em {
  color: var(--red);
  font-style: normal;
  text-shadow: 2px 2px 0 var(--white);
}

.intro-bottom-shade {
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: 0;
  left: 0;
  height: 180px;
  background: linear-gradient(to bottom, transparent, rgba(12, 11, 11, 0.94));
  pointer-events: none;
}

.intro-controls {
  position: absolute;
  z-index: 5;
  right: 16px;
  bottom: max(22px, calc(env(safe-area-inset-bottom) + 12px));
  left: 16px;
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 13px;
}

.intro-enter,
.intro-playback {
  display: inline-flex;
  min-height: 54px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 3px solid var(--white);
  border-radius: 0;
  padding: 12px 17px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.025em;
  line-height: 1.15;
  text-transform: uppercase;
  transition: transform 180ms ease-out, box-shadow 180ms ease-out, background-color 180ms ease-out;
}

.intro-enter {
  flex: 1 1 auto;
  max-width: 310px;
  background: var(--red);
  box-shadow: 6px 6px 0 var(--white);
  color: var(--white);
}

.intro-playback {
  flex: 0 0 84px;
  padding-inline: 11px;
  background: var(--black);
  box-shadow: 5px 5px 0 var(--red);
  color: var(--white);
}

.intro-enter:hover,
.intro-playback:hover {
  transform: translate(-3px, -3px);
}

.intro-enter:hover {
  background: var(--red-dark);
  box-shadow: 9px 9px 0 var(--white);
}

.intro-playback:hover {
  box-shadow: 8px 8px 0 var(--red);
}

.intro-enter svg,
.intro-playback svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  stroke-width: 3;
}

.intro-controls > p {
  position: absolute;
  bottom: 75px;
  left: 50%;
  width: min(100%, 440px);
  border: 2px solid var(--white);
  padding: 10px 13px;
  background: var(--black);
  color: var(--white);
  font-size: 12px;
  text-align: center;
  transform: translateX(-50%);
}

.intro-progress {
  position: absolute;
  z-index: 6;
  right: 0;
  bottom: 0;
  left: 0;
  height: 5px;
  background: rgba(255, 253, 248, 0.2);
}

.intro-progress > span {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 120ms linear;
}

@keyframes intro-rays-turn {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

.eyebrow {
  display: inline-block;
  margin-bottom: 20px;
  border: 2px solid var(--black);
  padding: 6px 11px 5px;
  background: var(--red);
  box-shadow: 4px 4px 0 var(--black);
  color: var(--white);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.13em;
  line-height: 1.35;
  text-transform: uppercase;
  transform: rotate(-1deg);
}

.eyebrow--light {
  border-color: var(--white);
  background: var(--black);
  box-shadow: 4px 4px 0 var(--white);
}

.section-heading {
  margin-bottom: 50px;
}

.section-heading h2,
.about-copy h2,
.process-intro h2,
.faq-heading h2,
.contact-copy h2,
.materials-heading h2 {
  font-size: clamp(3.35rem, 14vw, 5.6rem);
  letter-spacing: 0.015em;
  line-height: 0.94;
}

.section-heading h2 span,
.process-intro h2 span,
.faq-heading h2 span {
  color: var(--red);
  text-shadow: 2px 2px 0 var(--black);
}

.section-heading > p,
.section-heading > div > p:not(.eyebrow) {
  max-width: 46ch;
  margin-top: 24px;
  font-size: 17px;
  font-weight: 500;
}

.button {
  display: inline-flex;
  min-height: 54px;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border: 3px solid var(--black);
  padding: 13px 20px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1.2;
  text-align: center;
  text-transform: uppercase;
  transition: transform 180ms ease-out, box-shadow 180ms ease-out, background-color 180ms ease-out, color 180ms ease-out;
}

.button svg {
  width: 19px;
  height: 19px;
  flex: 0 0 auto;
  stroke-width: 3;
  transition: transform 180ms ease-out;
}

.button:hover {
  transform: translate(-3px, -3px) rotate(-0.5deg);
}

.button:hover svg {
  transform: translateX(4px) rotate(-4deg);
}

.button:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--black);
}

.button--red {
  background: var(--red);
  box-shadow: 6px 6px 0 var(--black);
  color: var(--white);
}

.button--red:hover {
  background: var(--red-dark);
  box-shadow: 9px 9px 0 var(--black);
}

.button--ghost {
  border-color: var(--white);
  background: var(--black);
  box-shadow: 6px 6px 0 var(--red);
  color: var(--white);
}

.button--ghost:hover {
  background: var(--white);
  box-shadow: 9px 9px 0 var(--red);
  color: var(--black);
}

.button--outline {
  background: var(--white);
  box-shadow: 5px 5px 0 var(--black);
  color: var(--black);
}

.button--outline:hover {
  background: var(--paper);
  box-shadow: 8px 8px 0 var(--red);
}

.text-link {
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  gap: 10px;
  border-bottom: 3px solid var(--red);
  color: var(--black);
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
  transition: color 180ms ease-out, gap 180ms ease-out;
}

.text-link:hover {
  gap: 16px;
  color: var(--red);
}

.text-link svg {
  width: 18px;
  height: 18px;
  stroke-width: 3;
}

.text-link--light {
  border-color: var(--white);
  color: var(--white);
}

.text-link--light:hover {
  color: var(--black);
}

/* Header */
.site-header {
  position: fixed;
  z-index: 60;
  top: 0;
  left: 0;
  display: flex;
  width: 100%;
  height: 82px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 3px solid var(--red);
  padding-inline: var(--page-gutter);
  background: var(--black);
  color: var(--white);
  transition: box-shadow 200ms ease-out, background-color 200ms ease-out;
}

.site-header--solid {
  background: var(--black-deep);
  box-shadow: 0 6px 0 rgba(215, 25, 54, 0.2);
}

.brand {
  position: relative;
  display: grid;
  grid-template-columns: 40px auto;
  grid-template-rows: auto auto;
  column-gap: 10px;
  align-items: center;
  color: var(--black);
  line-height: 1;
}

.brand--light {
  color: var(--white);
}

.brand-mark {
  display: flex;
  width: 40px;
  height: 40px;
  grid-row: 1 / 3;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--white);
  background: var(--red);
  box-shadow: 3px 3px 0 var(--white);
  color: var(--white);
  transform: rotate(-4deg);
}

.brand-mark svg {
  animation: slow-spin 16s linear infinite;
}

.brand-name {
  font-family: var(--font-display);
  font-size: 23px;
  letter-spacing: 0.055em;
  white-space: nowrap;
}

.brand-name span {
  color: var(--red);
  font-size: 25px;
  text-shadow: 1px 1px 0 var(--white);
}

.brand-sub {
  margin-top: 4px;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.19em;
}

.desktop-nav,
.header-phone {
  display: none;
}

.menu-toggle {
  display: flex;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--white);
  border-radius: 0;
  background: var(--red);
  box-shadow: 3px 3px 0 var(--white);
  transition: transform 180ms ease-out, box-shadow 180ms ease-out;
}

.menu-toggle:hover {
  box-shadow: 5px 5px 0 var(--white);
  transform: translate(-2px, -2px) rotate(3deg);
}

.menu-toggle svg {
  width: 22px;
  stroke-width: 3;
}

.mobile-menu {
  position: fixed;
  z-index: 55;
  inset: 0;
  display: flex;
  min-height: 100dvh;
  flex-direction: column;
  justify-content: space-between;
  padding: 116px var(--page-gutter) max(34px, env(safe-area-inset-bottom));
  background-color: var(--red);
  background-image: radial-gradient(rgba(23, 21, 21, 0.2) 1.5px, transparent 1.5px);
  background-size: 18px 18px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-18px) scale(0.985);
  transition: opacity 220ms ease-out, transform 220ms ease-out;
}

.mobile-menu--open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.mobile-menu nav {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mobile-menu nav a {
  display: grid;
  min-height: 66px;
  grid-template-columns: 34px 1fr auto;
  align-items: center;
  gap: 8px;
  border: 3px solid var(--black);
  padding: 10px 14px;
  background: var(--white);
  box-shadow: 5px 5px 0 var(--black);
  color: var(--black);
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 7vw, 2.25rem);
  letter-spacing: 0.03em;
  line-height: 1;
  text-transform: uppercase;
}

.mobile-menu nav a:nth-child(even) {
  transform: rotate(0.6deg);
}

.mobile-menu nav a span {
  color: var(--red);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 800;
}

.mobile-menu nav a svg {
  width: 21px;
  color: var(--red);
  stroke-width: 3;
}

.mobile-menu-contact {
  border: 3px solid var(--white);
  padding: 16px;
  background: var(--black);
  box-shadow: 5px 5px 0 var(--white);
  color: var(--white);
}

.mobile-menu-contact p {
  margin-bottom: 8px;
  font-size: 13px;
}

.mobile-menu-contact a {
  display: flex;
  min-height: 44px;
  align-items: center;
  gap: 12px;
  color: var(--white);
  font-family: var(--font-display);
  font-size: 28px;
  letter-spacing: 0.04em;
}

/* Hero */
.hero {
  position: relative;
  display: flex;
  min-height: 100svh;
  align-items: center;
  overflow: hidden;
  border-bottom: 5px solid var(--black);
  padding: 118px 0 106px;
  background-color: var(--black);
  background-image: radial-gradient(rgba(255, 253, 248, 0.09) 1.2px, transparent 1.2px);
  background-size: 19px 19px;
  color: var(--white);
}

.hero-rays {
  position: absolute;
  top: -240px;
  right: -420px;
  width: 940px;
  height: 940px;
  background: repeating-conic-gradient(from 0deg at 50% 50%, var(--red) 0deg 7deg, transparent 7deg 17deg);
  opacity: 0.25;
  animation: slow-spin 70s linear infinite;
  pointer-events: none;
}

.hero-grid {
  position: static;
  z-index: 2;
  display: block;
}

.hero-content {
  position: relative;
  z-index: 3;
}

.comic-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 25px;
  border: 3px solid var(--black);
  padding: 8px 12px;
  background: var(--white);
  box-shadow: 5px 5px 0 var(--red);
  color: var(--black);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.12em;
  transform: rotate(-1.5deg);
}

.comic-tag svg {
  color: var(--red);
}

.hero h1 {
  max-width: 12ch;
  font-size: clamp(4.2rem, 18vw, 7.2rem);
  letter-spacing: 0.015em;
  line-height: 0.87;
}

.hero-title-mask {
  display: block;
  overflow: hidden;
  padding: 0.06em 0.06em 0.12em 0;
}

.hero-title-line {
  display: block;
  color: var(--white);
  text-shadow: 4px 4px 0 var(--red);
  transform-origin: left bottom;
}

.hero-title-line--accent {
  color: var(--red);
  text-shadow: 3px 3px 0 var(--white);
}

.hero-description {
  max-width: 52ch;
  margin-top: 25px;
  border-left: 5px solid var(--red);
  padding-left: 16px;
  color: var(--white);
  font-size: 17px;
  line-height: 1.55;
}

.hero-description strong {
  color: var(--white);
  font-weight: 800;
  text-decoration: underline;
  text-decoration-color: var(--red);
  text-decoration-thickness: 3px;
  text-underline-offset: 4px;
}

.hero-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 18px;
  margin-top: 31px;
}

.hero-actions .button--red {
  border-color: var(--white);
  box-shadow: 6px 6px 0 var(--white);
}

.hero-actions .button--red:hover {
  box-shadow: 9px 9px 0 var(--white);
}

.hero-proof {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-top: 34px;
}

.hero-rating {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 3px solid var(--black);
  padding: 8px 12px;
  background: var(--white);
  box-shadow: 4px 4px 0 var(--red);
  color: var(--black);
  font-size: 12px;
  font-weight: 700;
  transform: rotate(-1deg);
}

.hero-rating strong {
  font-family: var(--font-display);
  font-size: 27px;
  font-weight: 400;
  letter-spacing: 0.04em;
  line-height: 1;
}

.rating-star {
  display: flex;
  color: var(--red);
}

.rating-star svg {
  width: 18px;
  height: 18px;
  stroke-width: 3;
}

.hero-proof-note {
  display: none;
  max-width: 17ch;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
  text-transform: uppercase;
}

.hero-media {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  pointer-events: none;
}

.hero-media::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  background: rgba(12, 11, 11, 0.66);
  content: '';
  pointer-events: none;
}

.hero-character-frame {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: 0;
  background: var(--black-deep);
  box-shadow: none;
  transform: none;
}

.hero-character-frame::before {
  display: none;
}

.hero-shutter-lines {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg, #312e2e 0 12px, #181616 12px 16px);
  opacity: 0.8;
}

.hero-scroll-video {
  position: absolute;
  z-index: 1;
  right: -28px;
  bottom: -12px;
  width: auto;
  max-width: none;
  height: 76%;
  object-fit: contain;
  background: var(--black-deep) url('./video/hero-poster.webp') center / contain no-repeat;
  opacity: 0.66;
  filter: drop-shadow(7px 7px 0 var(--black));
  pointer-events: none;
}

.character-label {
  display: none;
  position: absolute;
  z-index: 2;
  top: 12px;
  left: 12px;
  border: 2px solid var(--white);
  padding: 6px 8px;
  background: var(--black);
  color: var(--white);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.09em;
}

.comic-pop {
  display: none;
  position: absolute;
  z-index: 3;
  top: -35px;
  right: -30px;
  width: 124px;
  height: 124px;
  place-items: center;
  clip-path: polygon(50% 0%, 60% 15%, 76% 5%, 80% 24%, 100% 25%, 89% 42%, 100% 55%, 82% 62%, 91% 81%, 70% 79%, 66% 100%, 50% 85%, 36% 100%, 31% 80%, 9% 85%, 17% 64%, 0% 55%, 13% 42%, 2% 25%, 22% 25%, 25% 5%, 41% 16%);
  background: var(--white);
  color: var(--black);
  font-family: var(--font-display);
  font-size: 23px;
  letter-spacing: 0.04em;
  line-height: 0.95;
  text-align: center;
  text-shadow: 1px 1px 0 var(--red);
  transform: rotate(8deg);
  animation: pop-wiggle 4s ease-in-out infinite;
}

.video-doodle {
  display: none;
  position: absolute;
  bottom: -50px;
  left: -34px;
  color: var(--red);
  font-family: var(--font-display);
  font-size: 70px;
  line-height: 1;
  text-shadow: 2px 2px 0 var(--white);
  transform: rotate(18deg);
}

.scroll-cue {
  display: none;
}

.expertise-strip {
  border-top: 4px solid var(--black);
  border-bottom: 4px solid var(--black);
  background: var(--red);
  color: var(--white);
  overflow: hidden;
}

.expertise-track {
  display: flex;
  width: max-content;
  animation: expertise-marquee 25s linear infinite;
  will-change: transform;
}

.expertise-strip:hover .expertise-track {
  animation-play-state: paused;
}

.expertise-group {
  display: flex;
  min-height: 70px;
  flex: 0 0 auto;
  align-items: center;
  gap: 25px;
  padding-right: 25px;
}

.expertise-strip span {
  flex: 0 0 auto;
  font-family: var(--font-display);
  font-size: 25px;
  letter-spacing: 0.04em;
  text-shadow: 2px 2px 0 var(--black);
  text-transform: uppercase;
  white-space: nowrap;
}

.expertise-strip i,
.materials-caption i {
  display: block;
  flex: 0 0 auto;
  color: var(--black);
  font-size: 19px;
  font-style: normal;
}

/* Services */
.services-layout {
  display: grid;
  gap: 42px;
}

.service-visual {
  position: relative;
  height: 410px;
  overflow: hidden;
  border: 4px solid var(--black);
  background: var(--black);
  box-shadow: 10px 10px 0 var(--red);
  transform: rotate(-0.7deg);
}

.service-visual > img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.06) rotate(0.5deg);
  transition: opacity 400ms ease-out, transform 650ms ease-out;
}

.service-visual > img.is-active {
  opacity: 1;
  transform: scale(1) rotate(0);
}

.service-visual-caption {
  position: absolute;
  right: 16px;
  bottom: 16px;
  left: 16px;
  border: 3px solid var(--black);
  padding: 13px 16px;
  background: var(--white);
  box-shadow: 5px 5px 0 var(--red);
  color: var(--black);
}

.service-visual-caption span {
  color: var(--red);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.service-visual-caption p {
  margin-top: 3px;
  font-family: var(--font-display);
  font-size: 28px;
  letter-spacing: 0.035em;
  line-height: 1.05;
  text-transform: uppercase;
}

.service-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.service-item {
  border: 3px solid var(--black);
  background: var(--white);
  box-shadow: 5px 5px 0 var(--black);
  transition: transform 180ms ease-out, box-shadow 180ms ease-out;
}

.service-item.is-active {
  box-shadow: 8px 8px 0 var(--red);
  transform: translate(-3px, -3px);
}

.service-item > button {
  display: grid;
  width: 100%;
  min-height: 76px;
  grid-template-columns: 38px 1fr auto;
  align-items: center;
  gap: 12px;
  border: 0;
  padding: 13px 15px;
  background: var(--white);
  text-align: left;
  transition: background-color 180ms ease-out, color 180ms ease-out;
}

.service-item.is-active > button {
  background: var(--red);
  color: var(--white);
}

.service-index {
  display: flex;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--black);
  background: var(--white);
  color: var(--red);
  font-size: 11px;
  font-weight: 900;
  transform: rotate(-4deg);
}

.service-title {
  font-family: var(--font-display);
  font-size: 26px;
  letter-spacing: 0.035em;
  line-height: 1;
  text-transform: uppercase;
}

.service-item > button > svg {
  width: 21px;
  stroke-width: 3;
  transition: transform 180ms ease-out;
}

.service-item.is-active > button > svg {
  transform: rotate(45deg);
}

.service-panel,
.faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 320ms ease-out;
}

.service-panel > div,
.faq-answer > div {
  overflow: hidden;
}

.service-item.is-active .service-panel,
.faq-item.is-open .faq-answer {
  grid-template-rows: 1fr;
}

.service-panel > div {
  padding-inline: 18px;
}

.service-item.is-active .service-panel > div {
  padding-bottom: 21px;
}

.service-panel p {
  padding-top: 19px;
  border-top: 3px solid var(--black);
  font-size: 14px;
}

.service-panel ul {
  display: grid;
  gap: 7px;
  margin-top: 14px;
  list-style: none;
}

.service-panel li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
}

.service-panel li svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  margin-top: 3px;
  color: var(--red);
  stroke-width: 4;
}

.service-panel a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 9px;
  margin-top: 14px;
  color: var(--red);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.service-panel a svg {
  width: 17px;
  stroke-width: 3;
  transition: transform 180ms ease-out;
}

.service-panel a:hover svg {
  transform: translate(3px, -3px);
}

/* About */
.about-section {
  position: relative;
  border-top: 5px solid var(--black);
  border-bottom: 5px solid var(--black);
  background-color: var(--red);
  background-image: radial-gradient(rgba(23, 21, 21, 0.18) 1.4px, transparent 1.4px);
  background-size: 18px 18px;
  color: var(--white);
}

.about-grid {
  display: grid;
  gap: 66px;
  align-items: center;
}

.about-character {
  position: relative;
  min-height: 610px;
}

.character-burst {
  position: absolute;
  inset: 10% 1% 2%;
  clip-path: polygon(50% 0%, 59% 13%, 73% 3%, 77% 19%, 94% 14%, 89% 32%, 100% 41%, 87% 51%, 99% 63%, 82% 68%, 88% 86%, 70% 82%, 63% 100%, 50% 87%, 37% 100%, 30% 82%, 11% 88%, 17% 69%, 0% 62%, 13% 51%, 0% 39%, 13% 31%, 6% 13%, 24% 19%, 28% 2%, 42% 14%);
  background: var(--black);
  transform: rotate(-4deg);
}

.about-character > img {
  position: absolute;
  z-index: 1;
  right: -12px;
  bottom: 0;
  width: auto;
  height: 600px;
  filter: drop-shadow(8px 8px 0 rgba(23, 21, 21, 0.65));
}

.speech-bubble {
  position: absolute;
  z-index: 3;
  top: 34px;
  left: 0;
  width: 156px;
  border: 4px solid var(--black);
  padding: 14px 12px;
  background: var(--white);
  box-shadow: 7px 7px 0 var(--black);
  color: var(--black);
  font-family: var(--font-display);
  font-size: 25px;
  letter-spacing: 0.04em;
  line-height: 0.95;
  text-align: center;
  transform: rotate(-6deg);
  animation: bubble-float 4.5s ease-in-out infinite;
}

.speech-bubble::after {
  position: absolute;
  right: 24px;
  bottom: -22px;
  width: 28px;
  height: 28px;
  border-right: 4px solid var(--black);
  border-bottom: 4px solid var(--black);
  background: var(--white);
  content: '';
  transform: rotate(55deg) skew(12deg);
}

.character-sticker {
  position: absolute;
  z-index: 3;
  right: 0;
  bottom: 18px;
  border: 3px solid var(--white);
  padding: 9px 13px;
  background: var(--black);
  box-shadow: 5px 5px 0 var(--white);
  color: var(--white);
  font-family: var(--font-display);
  font-size: 23px;
  letter-spacing: 0.05em;
  transform: rotate(5deg);
}

.about-copy h2 {
  color: var(--white);
  text-shadow: 4px 4px 0 var(--black);
}

.about-copy h2 span {
  color: var(--black);
  text-shadow: 3px 3px 0 var(--white);
}

.about-copy > p:not(.eyebrow) {
  margin-top: 22px;
  font-size: 16px;
}

.about-copy .about-lead {
  border-left: 5px solid var(--black);
  padding-left: 16px;
  font-size: 19px;
  font-weight: 800;
}

.about-facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-block: 30px 24px;
}

.about-facts div {
  border: 3px solid var(--black);
  padding: 13px 9px;
  background: var(--white);
  box-shadow: 5px 5px 0 var(--black);
  color: var(--black);
  text-align: center;
}

.about-facts div:nth-child(2) {
  transform: translateY(-7px) rotate(1deg);
}

.about-facts strong {
  display: block;
  color: var(--red);
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 8vw, 3rem);
  font-weight: 400;
  letter-spacing: 0.03em;
  line-height: 1;
}

.about-facts strong span {
  font-size: 0.5em;
}

.about-facts div > span {
  display: block;
  margin-top: 7px;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.3;
  text-transform: uppercase;
}

/* Projects */
.projects-section {
  background-color: var(--black);
  background-image: radial-gradient(rgba(255, 253, 248, 0.07) 1.1px, transparent 1.1px);
  background-size: 18px 18px;
  color: var(--white);
}

.projects-section .section-heading h2 {
  text-shadow: 4px 4px 0 var(--red);
}

.projects-section .section-heading h2 span {
  color: var(--red);
  text-shadow: 3px 3px 0 var(--white);
}

.projects-section .section-heading .text-link {
  margin-top: 20px;
}

.gallery {
  margin-top: 44px;
}

.gallery-toolbar {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 26px;
}

.gallery-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.gallery-filters button {
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  gap: 8px;
  border: 2px solid var(--white);
  padding: 9px 12px;
  background: var(--black);
  box-shadow: 3px 3px 0 var(--red);
  color: var(--white);
  cursor: pointer;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  transition: transform 180ms ease-out, background-color 180ms ease-out, box-shadow 180ms ease-out;
}

.gallery-filters button:hover,
.gallery-filters button.is-active {
  background: var(--red);
  box-shadow: 4px 4px 0 var(--white);
  transform: translate(-1px, -1px);
}

.gallery-filters button > svg {
  width: 17px;
  height: 17px;
  stroke-width: 2.5;
}

.gallery-filters button > span {
  border-left: 1px solid currentColor;
  padding-left: 8px;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 0.04em;
}

.gallery-toolbar > p {
  color: var(--white);
  font-size: 12px;
  font-weight: 700;
}

.gallery-grid {
  columns: 2;
  column-gap: 12px;
}

.gallery-item {
  display: inline-block;
  width: 100%;
  margin: 0 0 14px;
  break-inside: avoid;
}

.gallery-card {
  display: block;
  width: 100%;
  overflow: hidden;
  border: 3px solid var(--white);
  padding: 0;
  background: var(--white);
  box-shadow: 5px 5px 0 var(--red);
  color: var(--black);
  cursor: pointer;
  text-align: left;
  transform: rotate(-0.35deg);
  transition: transform 200ms ease-out, box-shadow 200ms ease-out;
}

.gallery-item:nth-child(3n + 2) .gallery-card {
  transform: rotate(0.45deg);
}

.gallery-item:nth-child(4n + 3) .gallery-card {
  transform: rotate(-0.65deg);
}

.gallery-card:hover,
.gallery-card:focus-visible {
  box-shadow: 8px 8px 0 var(--red);
  transform: translateY(-5px) rotate(0deg);
}

.gallery-frame {
  position: relative;
  display: block;
  overflow: hidden;
  border-bottom: 3px solid var(--black);
  background: var(--black-deep);
}

.gallery-frame > img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 450ms ease-out, filter 250ms ease-out;
}

.gallery-card:hover .gallery-frame > img,
.gallery-card:focus-visible .gallery-frame > img {
  filter: saturate(1.12) contrast(1.04);
  transform: scale(1.035);
}

.gallery-media-type {
  position: absolute;
  top: 9px;
  left: 9px;
  border: 2px solid var(--black);
  padding: 5px 7px;
  background: var(--white);
  box-shadow: 3px 3px 0 var(--red);
  color: var(--black);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.1em;
}

.gallery-play {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  border: 3px solid var(--white);
  border-radius: 50%;
  background: var(--red);
  box-shadow: 4px 4px 0 var(--black);
  color: var(--white);
  transform: translate(-50%, -50%);
  transition: transform 180ms ease-out;
}

.gallery-play > svg {
  width: 23px;
  height: 23px;
  margin-left: 3px;
}

.gallery-card:hover .gallery-play {
  transform: translate(-50%, -50%) scale(1.09);
}

.gallery-open-hint {
  position: absolute;
  right: 0;
  bottom: 0;
  padding: 7px 9px;
  background: var(--black);
  color: var(--white);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.08em;
  opacity: 0;
  transform: translateY(100%);
  transition: opacity 180ms ease-out, transform 180ms ease-out;
}

.gallery-card:hover .gallery-open-hint,
.gallery-card:focus-visible .gallery-open-hint {
  opacity: 1;
  transform: translateY(0);
}

.gallery-caption {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  padding: 11px 10px 13px;
}

.gallery-caption small {
  display: block;
  color: var(--red);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.06em;
  line-height: 1.25;
  text-transform: uppercase;
}

.gallery-caption strong {
  display: block;
  margin-top: 5px;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 0.025em;
  line-height: 1.05;
}

.gallery-index {
  display: none;
  color: var(--red);
  font-family: var(--font-display);
  font-size: 26px;
  line-height: 1;
}

.gallery-lightbox {
  position: fixed;
  z-index: 160;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 12px;
  background: rgba(12, 11, 11, 0.96);
  backdrop-filter: blur(8px);
  animation: gallery-fade-in 180ms ease-out both;
}

.gallery-lightbox-dialog {
  position: relative;
  display: flex;
  width: min(1100px, 100%);
  max-height: calc(100dvh - 24px);
  flex-direction: column;
  border: 3px solid var(--white);
  background: var(--black-deep);
  box-shadow: 8px 8px 0 var(--red);
  animation: gallery-dialog-in 240ms ease-out both;
}

.gallery-lightbox-close {
  position: absolute;
  z-index: 3;
  top: 9px;
  right: 9px;
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border: 2px solid var(--white);
  background: var(--red);
  box-shadow: 3px 3px 0 var(--black);
  color: var(--white);
  cursor: pointer;
  transition: transform 180ms ease-out;
}

.gallery-lightbox-close:hover {
  transform: rotate(5deg) scale(1.06);
}

.gallery-lightbox-media {
  display: grid;
  min-height: 0;
  flex: 1;
  place-items: center;
  overflow: hidden;
  background: var(--black-deep);
}

.gallery-lightbox-media > img,
.gallery-lightbox-media > video {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 70vh;
  object-fit: contain;
}

.gallery-lightbox-footer {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 46px;
  align-items: center;
  gap: 9px;
  border-top: 3px solid var(--white);
  padding: 10px;
  color: var(--white);
}

.gallery-lightbox-footer > button {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border: 2px solid var(--white);
  background: var(--red);
  color: var(--white);
  cursor: pointer;
  transition: transform 180ms ease-out, background-color 180ms ease-out;
}

.gallery-lightbox-footer > button:hover {
  background: var(--black);
  transform: translateY(-2px);
}

.gallery-lightbox-caption {
  min-width: 0;
  text-align: center;
}

.gallery-lightbox-caption > span {
  display: block;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.gallery-lightbox-caption > strong {
  display: block;
  margin-top: 4px;
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 400;
  letter-spacing: 0.03em;
  line-height: 1.05;
}

@keyframes gallery-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes gallery-dialog-in {
  from { opacity: 0; transform: scale(0.96) translateY(12px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

/* Process */
.process-section {
  padding-block: var(--section-space);
  border-bottom: 5px solid var(--black);
}

.process-intro {
  max-width: 740px;
  margin-bottom: 46px;
}

.process-intro > p:not(.eyebrow) {
  max-width: 48ch;
  margin-top: 22px;
  font-size: 17px;
}

.process-steps {
  display: grid;
  gap: 25px;
  list-style: none;
}

.process-steps li {
  position: relative;
  min-height: 270px;
  border: 4px solid var(--black);
  padding: 24px;
  background: var(--white);
  box-shadow: 8px 8px 0 var(--red);
}

.process-steps li:nth-child(1) {
  transform: rotate(-0.7deg);
}

.process-steps li:nth-child(2) {
  transform: rotate(0.8deg);
}

.process-steps li:nth-child(3) {
  background: var(--red);
  box-shadow: 8px 8px 0 var(--black);
  color: var(--white);
  transform: rotate(-0.5deg);
}

.step-number {
  display: block;
  color: var(--red);
  font-family: var(--font-display);
  font-size: 76px;
  letter-spacing: 0.03em;
  line-height: 0.9;
  text-shadow: 3px 3px 0 var(--black);
}

.process-steps li:nth-child(3) .step-number {
  color: var(--white);
}

.process-steps h3 {
  max-width: 15ch;
  margin-top: 20px;
  font-size: 31px;
  letter-spacing: 0.025em;
  line-height: 1;
}

.process-steps p {
  margin-top: 13px;
  font-size: 14px;
}

.step-arrow {
  position: absolute;
  top: 25px;
  right: 22px;
  width: 30px;
  height: 30px;
  color: var(--red);
  stroke-width: 3;
}

.process-steps li:nth-child(3) .step-arrow {
  color: var(--white);
}

/* Photo strip */
.materials-section {
  padding-block: var(--section-space);
  background: var(--black);
  color: var(--white);
}

.materials-heading {
  margin-bottom: 42px;
}

.materials-heading h2 {
  text-shadow: 4px 4px 0 var(--red);
}

.materials-heading h2 span {
  color: var(--red);
  text-shadow: 3px 3px 0 var(--white);
}

.materials-track {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  padding-inline: var(--page-gutter);
}

.material-image {
  height: 230px;
  overflow: hidden;
  border: 3px solid var(--white);
  background: var(--red);
  box-shadow: 6px 6px 0 var(--red);
}

.material-image:nth-child(odd) {
  transform: rotate(-1deg);
}

.material-image:nth-child(even) {
  transform: rotate(1deg);
}

.material-image:nth-child(5) {
  grid-column: 1 / -1;
}

.material-image img {
  width: 100%;
  height: 115%;
  object-fit: cover;
}

.materials-caption {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 38px;
  font-family: var(--font-display);
  font-size: 26px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.materials-caption i {
  color: var(--red);
}

/* FAQ */
.faq-grid {
  display: grid;
  gap: 45px;
}

.faq-heading > p:not(.eyebrow) {
  margin-top: 24px;
}

.faq-heading .text-link {
  margin-top: 12px;
}

.faq-list {
  display: grid;
  align-content: start;
  gap: 16px;
}

.faq-item {
  border: 3px solid var(--black);
  background: var(--white);
  box-shadow: 5px 5px 0 var(--black);
  transition: transform 180ms ease-out, box-shadow 180ms ease-out;
}

.faq-item.is-open {
  box-shadow: 7px 7px 0 var(--red);
  transform: translate(-2px, -2px);
}

.faq-item > button {
  display: flex;
  width: 100%;
  min-height: 70px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border: 0;
  padding: 17px 18px;
  background: transparent;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.35;
  text-align: left;
}

.faq-item.is-open > button {
  color: var(--red);
}

.faq-item > button svg {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  color: var(--red);
  stroke-width: 3;
  transition: transform 220ms ease-out;
}

.faq-item.is-open > button svg {
  transform: rotate(180deg);
}

.faq-answer p {
  margin-inline: 18px;
  border-top: 3px solid var(--black);
  padding: 18px 0 20px;
  font-size: 14px;
}

/* Contact */
.contact-section {
  position: relative;
  border-top: 5px solid var(--black);
  border-bottom: 5px solid var(--black);
  padding-block: var(--section-space);
  background-color: var(--red);
  background-image: radial-gradient(rgba(23, 21, 21, 0.18) 1.4px, transparent 1.4px);
  background-size: 18px 18px;
  color: var(--white);
}

.contact-grid {
  display: grid;
  gap: 48px;
  align-items: start;
}

.contact-copy h2 {
  color: var(--white);
  text-shadow: 4px 4px 0 var(--black);
}

.contact-copy h2 span {
  color: var(--black);
  text-shadow: 3px 3px 0 var(--white);
}

.contact-copy > p:not(.eyebrow) {
  max-width: 52ch;
  margin-top: 23px;
  font-size: 16px;
}

.contact-direct {
  display: grid;
  gap: 14px;
  margin-top: 29px;
}

.contact-direct > a {
  display: grid;
  min-height: 76px;
  grid-template-columns: 26px 1fr auto;
  align-items: center;
  gap: 12px;
  border: 3px solid var(--black);
  padding: 12px 14px;
  background: var(--white);
  box-shadow: 5px 5px 0 var(--black);
  color: var(--black);
  transition: transform 180ms ease-out, box-shadow 180ms ease-out;
}

.contact-direct > a:hover {
  box-shadow: 8px 8px 0 var(--black);
  transform: translate(-3px, -3px) rotate(-0.4deg);
}

.contact-direct > a > svg {
  width: 22px;
  color: var(--red);
  stroke-width: 3;
}

.contact-direct > a > svg:last-child {
  width: 18px;
  color: var(--black);
}

.contact-direct span {
  font-size: 14px;
  font-weight: 800;
  line-height: 1.3;
}

.contact-direct small {
  display: block;
  margin-bottom: 4px;
  color: var(--red);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.1em;
}

.contact-character {
  position: relative;
  height: 270px;
  margin-top: 32px;
}

.contact-character img {
  position: absolute;
  right: -4px;
  bottom: 0;
  width: auto;
  height: 290px;
  filter: drop-shadow(6px 6px 0 var(--black));
  animation: character-float 4s ease-in-out infinite;
}

.contact-character > span {
  position: absolute;
  z-index: 2;
  top: 54px;
  left: 6px;
  border: 3px solid var(--white);
  padding: 12px 15px;
  background: var(--black);
  box-shadow: 5px 5px 0 var(--white);
  font-family: var(--font-display);
  font-size: 26px;
  letter-spacing: 0.04em;
  line-height: 0.95;
  text-align: center;
  transform: rotate(-6deg);
}

.quote-panel {
  position: relative;
  border: 4px solid var(--black);
  padding: 24px 20px;
  background-color: var(--paper);
  background-image: radial-gradient(rgba(23, 21, 21, 0.06) 1px, transparent 1px);
  background-size: 16px 16px;
  box-shadow: 10px 10px 0 var(--black);
  color: var(--black);
  transform: rotate(0.45deg);
}

.quote-panel form {
  display: grid;
  gap: 18px;
}

.form-heading {
  display: flex;
  align-items: center;
  gap: 13px;
  border-bottom: 4px solid var(--black);
  padding-bottom: 18px;
}

.form-heading > svg {
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  color: var(--red);
  stroke-width: 2.7;
}

.form-heading h3,
.request-ready h3 {
  font-size: 32px;
  letter-spacing: 0.025em;
  line-height: 1;
}

.form-heading p {
  margin-top: 4px;
  font-size: 12px;
}

.form-row {
  display: grid;
  gap: 18px;
}

.quote-panel label {
  display: grid;
  gap: 7px;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.quote-panel label > span {
  color: #665e59;
  font-size: 10px;
  font-weight: 600;
  text-transform: none;
}

.quote-panel input,
.quote-panel select,
.quote-panel textarea {
  width: 100%;
  min-height: 50px;
  border: 3px solid var(--black);
  border-radius: 0;
  padding: 11px 12px;
  background: var(--white);
  color: var(--black);
  font-size: 15px;
  font-weight: 500;
  text-transform: none;
  transition: box-shadow 160ms ease-out, transform 160ms ease-out;
}

.quote-panel textarea {
  min-height: 110px;
  resize: vertical;
}

.quote-panel input:focus,
.quote-panel select:focus,
.quote-panel textarea:focus {
  outline: 0;
  box-shadow: 4px 4px 0 var(--red);
  transform: translate(-2px, -2px);
}

.quote-panel input::placeholder,
.quote-panel textarea::placeholder {
  color: #756d67;
  opacity: 1;
}

.quote-panel .button {
  width: 100%;
}

.form-privacy {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 11px;
  line-height: 1.45;
}

.form-privacy svg {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  color: var(--red);
  stroke-width: 3;
}

.request-ready {
  display: grid;
  gap: 17px;
}

.ready-icon {
  display: flex;
  width: 58px;
  height: 58px;
  align-items: center;
  justify-content: center;
  border: 3px solid var(--black);
  background: var(--red);
  box-shadow: 5px 5px 0 var(--black);
  color: var(--white);
  transform: rotate(-4deg);
}

.ready-icon svg {
  width: 30px;
  height: 30px;
  stroke-width: 4;
}

.request-preview {
  border: 3px solid var(--black);
  padding: 15px;
  background: var(--white);
  font-size: 13px;
}

.edit-request {
  min-height: 44px;
  border: 0;
  border-bottom: 3px solid var(--red);
  padding: 6px 0;
  background: transparent;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

/* Footer */
.site-footer {
  padding: 62px 0 42px;
  background-color: var(--black);
  background-image: radial-gradient(rgba(255, 253, 248, 0.055) 1px, transparent 1px);
  background-size: 18px 18px;
  color: var(--white);
}

.footer-top {
  display: grid;
  gap: 25px;
  align-items: center;
  padding-bottom: 34px;
}

.footer-top > p {
  color: var(--gray);
  font-size: 13px;
}

.footer-call {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--red);
  font-family: var(--font-display);
  font-size: 30px;
  letter-spacing: 0.05em;
  text-shadow: 2px 2px 0 var(--white);
}

.footer-call svg {
  width: 24px;
  stroke-width: 3;
}

.footer-middle {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px 20px;
  border-top: 3px solid var(--red);
  border-bottom: 3px solid var(--red);
  padding-block: 32px;
}

.footer-middle > div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
}

.footer-middle > div > span {
  margin-bottom: 5px;
  color: var(--red);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.13em;
}

.footer-middle a:hover {
  color: var(--red);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.footer-middle p {
  color: var(--gray);
}

.footer-logo {
  width: 132px;
  border: 3px solid var(--white);
  background: var(--white);
  box-shadow: 5px 5px 0 var(--red);
  transform: rotate(2deg);
}

.footer-bottom {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  padding-top: 28px;
  font-size: 11px;
}

.footer-bottom details {
  width: 100%;
}

.footer-bottom summary {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 7px;
  font-weight: 800;
  list-style: none;
}

.footer-bottom summary::-webkit-details-marker {
  display: none;
}

.footer-bottom summary svg {
  width: 15px;
  color: var(--red);
}

.footer-bottom details[open] summary svg {
  transform: rotate(180deg);
}

.footer-bottom details > div {
  display: grid;
  gap: 12px;
  border-left: 3px solid var(--red);
  padding: 10px 0 10px 14px;
  color: var(--gray);
}

.footer-bottom details a {
  color: var(--white);
  text-decoration: underline;
}

.back-top {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 8px;
  color: var(--red);
  font-weight: 900;
  text-transform: uppercase;
}

.back-top svg {
  width: 17px;
  stroke-width: 3;
}

.mobile-action-bar {
  position: fixed;
  z-index: 70;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  height: 64px;
  grid-template-columns: 0.85fr 1.4fr;
  border-top: 3px solid var(--black);
  background: var(--black);
}

.mobile-action-bar a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--white);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.mobile-action-bar a:last-child {
  border-left: 3px solid var(--white);
  background: var(--red);
}

.mobile-action-bar svg {
  width: 18px;
  stroke-width: 3;
}

@keyframes slow-spin {
  to { transform: rotate(360deg); }
}

@keyframes expertise-marquee {
  to { transform: translateX(-50%); }
}

@keyframes pop-wiggle {
  0%, 100% { transform: rotate(8deg) scale(1); }
  50% { transform: rotate(3deg) scale(1.045); }
}

@keyframes bubble-float {
  0%, 100% { transform: rotate(-6deg) translateY(0); }
  50% { transform: rotate(-3deg) translateY(-9px); }
}

@keyframes character-float {
  0%, 100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(-8px) rotate(1deg); }
}

@media (min-width: 560px) {
  :root {
    --page-gutter: 28px;
  }

  .hero-actions {
    flex-direction: row;
    align-items: center;
  }

  .hero-actions .button {
    flex: 0 1 auto;
  }

  .form-row {
    grid-template-columns: repeat(2, 1fr);
  }

  .materials-track {
    grid-template-columns: repeat(3, 1fr);
  }

  .material-image:nth-child(5) {
    grid-column: auto;
  }

  .footer-top {
    grid-template-columns: 1fr auto;
  }

  .footer-call {
    grid-column: 1 / -1;
  }
}

@media (min-width: 900px) {
  :root {
    --page-gutter: 42px;
    --section-space: 124px;
  }

  body {
    padding-bottom: 0;
  }

  .desktop-nav {
    display: flex;
    align-items: center;
    gap: 30px;
  }

  .desktop-nav a {
    position: relative;
    display: flex;
    min-height: 44px;
    align-items: center;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .desktop-nav a::after {
    position: absolute;
    right: 0;
    bottom: 4px;
    left: 0;
    height: 3px;
    background: var(--red);
    content: '';
    transform: scaleX(0) rotate(-2deg);
    transform-origin: left;
    transition: transform 180ms ease-out;
  }

  .desktop-nav a:hover::after {
    transform: scaleX(1) rotate(-2deg);
  }

  .header-phone {
    display: inline-flex;
    min-height: 43px;
    align-items: center;
    gap: 9px;
    border: 2px solid var(--white);
    padding: 8px 13px;
    background: var(--red);
    box-shadow: 3px 3px 0 var(--white);
    font-size: 13px;
    font-weight: 900;
    transition: transform 180ms ease-out, box-shadow 180ms ease-out;
  }

  .header-phone:hover {
    box-shadow: 5px 5px 0 var(--white);
    transform: translate(-2px, -2px);
  }

  .menu-toggle,
  .mobile-menu,
  .mobile-action-bar {
    display: none;
  }

  .hero {
    padding: 124px 0 88px;
  }

  .hero-grid {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
    gap: 48px;
    align-items: center;
  }

  .hero h1 {
    max-width: 11ch;
    font-size: clamp(5.7rem, 7.5vw, 8.6rem);
  }

  .hero-description {
    max-width: 48ch;
  }

  .hero-proof-note {
    display: block;
  }

  .hero-media {
    position: relative;
    z-index: 2;
    inset: auto;
    width: min(34vw, 425px);
    height: auto;
    margin-right: 12px;
    pointer-events: auto;
  }

  .hero-media::after {
    display: none;
  }

  .hero-character-frame {
    width: 100%;
    height: auto;
    aspect-ratio: 9 / 16;
    border: 4px solid var(--white);
    box-shadow: 11px 11px 0 var(--red);
    transform: rotate(1.4deg);
  }

  .hero-character-frame::before {
    position: absolute;
    z-index: -1;
    inset: -15px;
    display: block;
    border: 3px solid var(--red);
    content: '';
    transform: rotate(-2.5deg);
  }

  .hero-scroll-video {
    right: -8px;
    bottom: -4px;
    height: 92%;
    opacity: 1;
  }

  .character-label {
    display: block;
  }

  .comic-pop {
    display: grid;
  }

  .video-doodle {
    display: block;
  }

  .scroll-cue {
    position: absolute;
    z-index: 4;
    bottom: 20px;
    left: 50%;
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    gap: 10px;
    color: var(--white);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    transform: translateX(-50%);
  }

  .scroll-cue svg {
    width: 17px;
    color: var(--red);
    stroke-width: 3;
    animation: cue-bounce 1.8s ease-in-out infinite;
  }

  .section-heading--split {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 60px;
    align-items: end;
  }

  .section-heading--split > p,
  .section-heading--split > div > p:not(.eyebrow) {
    margin-top: 0;
    margin-bottom: 8px;
  }

  .services-layout {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: 58px;
    align-items: start;
  }

  .service-visual {
    position: sticky;
    top: 112px;
    height: 610px;
  }

  .about-grid {
    grid-template-columns: minmax(350px, 0.9fr) minmax(0, 1.1fr);
    gap: 80px;
  }

  .about-character {
    min-height: 690px;
  }

  .about-character > img {
    height: 690px;
  }

  .speech-bubble {
    top: 42px;
    left: -6px;
    width: 188px;
    padding: 17px 15px;
    font-size: 32px;
  }

  .gallery {
    margin-top: 58px;
  }

  .gallery-toolbar {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 34px;
  }

  .gallery-toolbar > p {
    flex: 0 0 auto;
    text-align: right;
  }

  .gallery-grid {
    columns: 3;
    column-gap: 18px;
  }

  .gallery-item {
    margin-bottom: 20px;
  }

  .gallery-caption {
    gap: 12px;
    padding: 14px 14px 16px;
  }

  .gallery-caption small {
    font-size: 9px;
  }

  .gallery-caption strong {
    font-size: 22px;
  }

  .gallery-index {
    display: block;
  }

  .gallery-media-type {
    font-size: 9px;
  }

  .gallery-play {
    width: 64px;
    height: 64px;
  }

  .gallery-open-hint {
    font-size: 9px;
  }

  .gallery-lightbox {
    padding: 24px;
  }

  .gallery-lightbox-dialog {
    max-height: calc(100dvh - 48px);
  }

  .gallery-lightbox-footer {
    padding: 14px 18px;
  }

  .gallery-lightbox-caption > strong {
    font-size: 27px;
  }

  .process-steps {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }

  .process-steps li:nth-child(2) {
    transform: translateY(24px) rotate(0.8deg);
  }

  .process-steps li:nth-child(3) {
    transform: translateY(-8px) rotate(-0.5deg);
  }

  .materials-track {
    grid-template-columns: 0.9fr 1.12fr 0.86fr 1.08fr 0.94fr;
    gap: 20px;
    align-items: center;
  }

  .material-image {
    height: 330px;
  }

  .material-image--2,
  .material-image--4 {
    height: 410px;
  }

  .material-image--3 {
    height: 280px;
  }

  .faq-grid {
    grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
    gap: 75px;
    align-items: start;
  }

  .faq-heading {
    position: sticky;
    top: 118px;
  }

  .contact-grid {
    grid-template-columns: minmax(0, 0.92fr) minmax(390px, 1.08fr);
    gap: 65px;
  }

  .contact-character {
    height: 340px;
  }

  .contact-character img {
    height: 380px;
  }

  .contact-character > span {
    top: 85px;
    left: 20px;
    font-size: 31px;
  }

  .quote-panel {
    padding: 32px;
  }

  .footer-top {
    grid-template-columns: auto 1fr auto;
    gap: 50px;
  }

  .footer-top > p {
    justify-self: center;
  }

  .footer-call {
    grid-column: auto;
  }

  .footer-middle {
    grid-template-columns: 1.1fr 0.8fr 1.1fr auto;
    gap: 35px;
  }

  .footer-bottom {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .footer-bottom details {
    width: auto;
    max-width: 520px;
  }
}

@media (min-width: 1220px) {
  :root {
    --section-space: 142px;
  }

  .site-header {
    height: 88px;
  }

  .hero-grid {
    gap: 76px;
  }

  .hero-media {
    width: 430px;
  }

  .services-layout {
    gap: 78px;
  }

  .service-visual {
    height: 650px;
  }

  .service-item > button {
    min-height: 82px;
    padding-inline: 20px;
  }

  .service-title {
    font-size: 30px;
  }

  .about-grid {
    gap: 110px;
  }

  .gallery-grid {
    column-gap: 22px;
  }

  .gallery-item {
    margin-bottom: 24px;
  }
}

@media (max-width: 380px) {
  .brand {
    grid-template-columns: 35px auto;
    column-gap: 8px;
  }

  .brand-mark {
    width: 35px;
    height: 35px;
  }

  .brand-name {
    font-size: 20px;
  }

  .hero h1 {
    font-size: 3.8rem;
  }

  .comic-pop {
    right: -18px;
    width: 108px;
    height: 108px;
    font-size: 20px;
  }

  .about-character {
    min-height: 540px;
  }

  .about-character > img {
    right: -8px;
    height: 535px;
  }

  .speech-bubble {
    top: 42px;
    width: 136px;
    padding: 12px 9px;
    font-size: 22px;
  }

  .about-facts {
    gap: 7px;
  }

  .about-facts div {
    padding-inline: 5px;
  }

  .gallery-filters {
    gap: 8px;
  }

  .gallery-filters button {
    padding-inline: 10px;
    font-size: 11px;
  }

  .gallery-grid {
    column-gap: 9px;
  }

  .gallery-item {
    margin-bottom: 11px;
  }

  .gallery-caption {
    padding: 9px 8px 11px;
  }

  .gallery-caption strong {
    font-size: 16px;
  }

  .gallery-media-type {
    top: 7px;
    left: 7px;
    font-size: 7px;
  }

  .gallery-play {
    width: 46px;
    height: 46px;
  }

  .gallery-lightbox-footer {
    grid-template-columns: 42px minmax(0, 1fr) 42px;
    gap: 6px;
    padding: 8px;
  }

  .gallery-lightbox-footer > button {
    width: 42px;
    height: 42px;
  }

  .gallery-lightbox-caption > strong {
    font-size: 18px;
  }

  .materials-caption {
    gap: 12px;
    font-size: 22px;
  }
}

@keyframes cue-bounce {
  0%, 100% { transform: translateY(-2px); }
  50% { transform: translateY(5px); }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .cursor-dot,
  .cursor-ring,
  .hero-rays {
    display: none;
  }

  .hero-character-frame,
  .service-visual,
  .gallery-card,
  .quote-panel {
    transform: none;
  }
}

/* Fonctionnement de la version HTML statique */
[hidden] { display: none !important; }
.hero-static-poster { background: transparent; }

/* Accessibilité et stabilité des médias */
.hero-rating a { color: inherit; text-underline-offset: 4px; }
img { height: auto; }
:focus-visible { outline: 3px solid #e6a900; outline-offset: 4px; }