*,:after,:before{--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:rgba(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:rgba(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: }/*! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:Familjen Grotesk,sans-serif;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,pre,samp{font-family:Familjen Grotesk,sans-serif;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:max(0.875rem,80%)}sub,sup{font-size:max(0.875rem,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,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{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}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.pointer-events-none{pointer-events:none}.pointer-events-auto{pointer-events:auto}.visible{visibility:visible}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.inset-0{inset:0}.-bottom-4{bottom:-1rem}.-left-10{left:-2.5rem}.-right-10{right:-2.5rem}.-top-4{top:-1rem}.left-1\/2{left:50%}.top-1\/2{top:50%}.isolate{isolation:isolate}.z-10{z-index:10}.z-20{z-index:20}.z-30{z-index:30}.mx-1\.5{margin-left:.375rem;margin-right:.375rem}.mx-auto{margin-left:auto;margin-right:auto}.my-auto{margin-top:auto;margin-bottom:auto}.mb-1{margin-bottom:.25rem}.mb-16{margin-bottom:4rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-7{margin-bottom:1.75rem}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-4{margin-top:1rem}.mt-5{margin-top:1.25rem}.mt-8{margin-top:2rem}.block{display:block}.flex{display:flex}.inline-flex{display:inline-flex}.grid{display:grid}.hidden{display:none}.\!h-7{height:1.75rem!important}.h-10{height:2.5rem}.h-11{height:2.75rem}.h-12{height:3rem}.h-14{height:3.5rem}.h-3{height:.75rem}.h-3\.5{height:.875rem}.h-4{height:1rem}.h-6{height:1.5rem}.h-\[520px\]{height:520px}.h-auto{height:auto}.h-full{height:100%}.min-h-\[120px\]{min-height:120px}.min-h-screen{min-height:100vh}.\!w-7{width:1.75rem!important}.w-10{width:2.5rem}.w-11{width:2.75rem}.w-12{width:3rem}.w-14{width:3.5rem}.w-3\.5{width:.875rem}.w-4{width:1rem}.w-6{width:1.5rem}.w-\[900px\]{width:900px}.w-full{width:100%}.min-w-0{min-width:0}.max-w-2xl{max-width:42rem}.max-w-3xl{max-width:48rem}.max-w-4xl{max-width:56rem}.max-w-\[96vw\]{max-width:96vw}.max-w-lg{max-width:32rem}.max-w-xl{max-width:36rem}.flex-shrink{flex-shrink:1}.shrink-0{flex-shrink:0}.-translate-x-1\/2{--tw-translate-x:-50%}.-translate-x-1\/2,.-translate-y-1\/2{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(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{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-pointer{cursor:pointer}.select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none}.resize{resize:both}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-start{align-items:flex-start}.items-center{align-items:center}.justify-start{justify-content:flex-start}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:.25rem}.gap-1\.5{gap:.375rem}.gap-10{gap:2.5rem}.gap-12{gap:3rem}.gap-2{gap:.5rem}.gap-2\.5{gap:.625rem}.gap-3{gap:.75rem}.gap-3\.5{gap:.875rem}.gap-4{gap:1rem}.gap-5{gap:1.25rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.space-y-12>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(3rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(3rem*var(--tw-space-y-reverse))}.space-y-14>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(3.5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(3.5rem*var(--tw-space-y-reverse))}.space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem*var(--tw-space-y-reverse))}.space-y-2\.5>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.625rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.625rem*var(--tw-space-y-reverse))}.space-y-3>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.75rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.75rem*var(--tw-space-y-reverse))}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem*var(--tw-space-y-reverse))}.space-y-5>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1.25rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.25rem*var(--tw-space-y-reverse))}.space-y-6>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1.5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.5rem*var(--tw-space-y-reverse))}.space-y-8>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(2rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(2rem*var(--tw-space-y-reverse))}.self-start{align-self:flex-start}.self-end{align-self:flex-end}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.scroll-smooth{scroll-behavior:smooth}.whitespace-nowrap{white-space:nowrap}.rounded-2xl{border-radius:1rem}.rounded-\[2px\]{border-radius:2px}.rounded-\[36px\]{border-radius:36px}.rounded-full{border-radius:9999px}.rounded-xl{border-radius:.75rem}.border{border-width:1px}.border-b{border-bottom-width:1px}.border-r{border-right-width:1px}.border-t{border-top-width:1px}.border-obsidian\/10{border-color:rgba(20,20,22,.1)}.border-obsidian\/\[0\.07\]{border-color:rgba(20,20,22,.07)}.border-stoneSwatch\/15{border-color:hsla(41,15%,79%,.15)}.border-white\/15{border-color:hsla(43,23%,94%,.15)}.border-white\/20{border-color:hsla(43,23%,94%,.2)}.bg-\[\#EAE6DF\]{--tw-bg-opacity:1;background-color:rgb(234 230 223/var(--tw-bg-opacity,1))}.bg-\[\#EAE6DF\]\/90{background-color:hsla(38,21%,90%,.9)}.bg-\[\#F3F1EC\]{--tw-bg-opacity:1;background-color:rgb(243 241 236/var(--tw-bg-opacity,1))}.bg-obsidian{--tw-bg-opacity:1;background-color:rgb(20 20 22/var(--tw-bg-opacity,1))}.bg-orangeBtn{--tw-bg-opacity:1;background-color:rgb(255 77 28/var(--tw-bg-opacity,1))}.bg-white\/\[0\.05\]{background-color:hsla(43,23%,94%,.05)}.bg-white\/\[0\.06\]{background-color:hsla(43,23%,94%,.06)}.bg-\[radial-gradient\(circle\2c rgba\(255\2c 77\2c 28\2c 0\.14\)_0\%\2c rgba\(20\2c 20\2c 22\2c 0\)_70\%\)\]{background-image:radial-gradient(circle,rgba(255,77,28,.14) 0,rgba(20,20,22,0) 70%)}.bg-\[radial-gradient\(circle_at_center\2c rgba\(20\2c 20\2c 22\2c 0\.25\)_0\%\2c rgba\(20\2c 20\2c 22\2c 0\.82\)_90\%\)\]{background-image:radial-gradient(circle at center,rgba(20,20,22,.25) 0,rgba(20,20,22,.82) 90%)}.object-cover{-o-object-fit:cover;object-fit:cover}.object-center{-o-object-position:center;object-position:center}.\!p-1\.5{padding:.375rem!important}.p-6{padding:1.5rem}.p-7{padding:1.75rem}.p-8{padding:2rem}.\!py-1\.5{padding-top:.375rem!important;padding-bottom:.375rem!important}.\!py-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.px-3\.5{padding-left:.875rem;padding-right:.875rem}.px-4{padding-left:1rem;padding-right:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}.py-10{padding-top:2.5rem;padding-bottom:2.5rem}.py-12{padding-top:3rem;padding-bottom:3rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-2\.5{padding-top:.625rem;padding-bottom:.625rem}.py-24{padding-top:6rem;padding-bottom:6rem}.py-28{padding-top:7rem;padding-bottom:7rem}.py-4{padding-top:1rem;padding-bottom:1rem}.py-8{padding-top:2rem;padding-bottom:2rem}.\!pl-4{padding-left:1rem!important}.\!pl-5{padding-left:1.25rem!important}.\!pr-1\.5{padding-right:.375rem!important}.\!pr-2{padding-right:.5rem!important}.pb-12{padding-bottom:3rem}.pb-3{padding-bottom:.75rem}.pb-44{padding-bottom:11rem}.pr-3{padding-right:.75rem}.pt-1{padding-top:.25rem}.pt-10{padding-top:2.5rem}.pt-16{padding-top:4rem}.pt-2{padding-top:.5rem}.pt-28{padding-top:7rem}.pt-3{padding-top:.75rem}.pt-32{padding-top:8rem}.pt-4{padding-top:1rem}.pt-5{padding-top:1.25rem}.pt-6{padding-top:1.5rem}.pt-8{padding-top:2rem}.text-center{text-align:center}.font-display{font-family:Familjen Grotesk,sans-serif}.text-2xl{font-size:1.5rem;line-height:2rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.text-5xl{font-size:3rem;line-height:1}.text-6xl{font-size:3.75rem;line-height:1}.text-\[16px\]{font-size:16px}.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-xs{font-size:14px;line-height:20px}.font-bold{font-weight:700}.font-medium{font-weight:500}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.leading-\[0\.95\]{line-height:.95}.leading-\[1\.02\]{line-height:1.02}.leading-\[1\.03\]{line-height:1.03}.leading-\[1\.06\]{line-height:1.06}.leading-none{line-height:1}.leading-relaxed{line-height:1.625}.leading-tight{line-height:1.25}.tracking-tight{letter-spacing:-.025em}.tracking-wider{letter-spacing:.05em}.tracking-widest{letter-spacing:.1em}.text-alabaster{--tw-text-opacity:1;color:rgb(243 241 236/var(--tw-text-opacity,1))}.text-obsidian{--tw-text-opacity:1;color:rgb(20 20 22/var(--tw-text-opacity,1))}.text-obsidian\/60{color:rgba(20,20,22,.6)}.text-obsidian\/70{color:rgba(20,20,22,.7)}.text-obsidian\/75{color:rgba(20,20,22,.75)}.text-obsidian\/80{color:rgba(20,20,22,.8)}.text-orangeBtn{--tw-text-opacity:1;color:rgb(255 77 28/var(--tw-text-opacity,1))}.text-stoneSwatch{--tw-text-opacity:1;color:rgb(209 204 193/var(--tw-text-opacity,1))}.text-stoneSwatch\/75{color:hsla(41,15%,79%,.75)}.text-stoneSwatch\/80{color:hsla(41,15%,79%,.8)}.text-stoneSwatch\/85{color:hsla(41,15%,79%,.85)}.text-stoneSwatch\/90{color:hsla(41,15%,79%,.9)}.text-white{--tw-text-opacity:1;color:rgb(243 241 236/var(--tw-text-opacity,1))}.text-white\/20{color:hsla(43,23%,94%,.2)}.shadow{--tw-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color)}.shadow,.shadow-2xl{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-2xl{--tw-shadow:0 25px 50px -12px rgba(0,0,0,.25);--tw-shadow-colored:0 25px 50px -12px var(--tw-shadow-color)}.shadow-inner{--tw-shadow:inset 0 2px 4px 0 rgba(0,0,0,.05);--tw-shadow-colored:inset 0 2px 4px 0 var(--tw-shadow-color)}.shadow-inner,.shadow-lg{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 rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color)}.shadow-md{--tw-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color)}.shadow-md,.shadow-sm{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 rgba(0,0,0,.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color)}.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);--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)}.blur{--tw-blur:blur(8px)}.blur,.blur-3xl{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)}.blur-3xl{--tw-blur:blur(64px)}.drop-shadow{--tw-drop-shadow:drop-shadow(0 1px 2px rgba(0,0,0,.1)) drop-shadow(0 1px 1px rgba(0,0,0,.06))}.drop-shadow,.grayscale{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)}.grayscale{--tw-grayscale:grayscale(100%)}.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)}.backdrop-blur-md{--tw-backdrop-blur:blur(12px)}.backdrop-blur-md,.backdrop-blur-xl{-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.backdrop-blur-xl{--tw-backdrop-blur:blur(24px)}.backdrop-filter{-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;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}.selection\:bg-orangeBtn ::-moz-selection{--tw-bg-opacity:1;background-color:rgb(255 77 28/var(--tw-bg-opacity,1))}.selection\:bg-orangeBtn ::selection{--tw-bg-opacity:1;background-color:rgb(255 77 28/var(--tw-bg-opacity,1))}.selection\:text-white ::-moz-selection{--tw-text-opacity:1;color:rgb(243 241 236/var(--tw-text-opacity,1))}.selection\:text-white ::selection{--tw-text-opacity:1;color:rgb(243 241 236/var(--tw-text-opacity,1))}.selection\:bg-orangeBtn::-moz-selection{--tw-bg-opacity:1;background-color:rgb(255 77 28/var(--tw-bg-opacity,1))}.selection\:bg-orangeBtn::selection{--tw-bg-opacity:1;background-color:rgb(255 77 28/var(--tw-bg-opacity,1))}.selection\:text-white::-moz-selection{--tw-text-opacity:1;color:rgb(243 241 236/var(--tw-text-opacity,1))}.selection\:text-white::selection{--tw-text-opacity:1;color:rgb(243 241 236/var(--tw-text-opacity,1))}.hover\:scale-105:hover{--tw-scale-x:1.05;--tw-scale-y:1.05;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\:border-orangeBtn:hover{--tw-border-opacity:1;border-color:rgb(255 77 28/var(--tw-border-opacity,1))}.hover\:bg-orangeBtn:hover{--tw-bg-opacity:1;background-color:rgb(255 77 28/var(--tw-bg-opacity,1))}.hover\:text-orangeBtn:hover{--tw-text-opacity:1;color:rgb(255 77 28/var(--tw-text-opacity,1))}.hover\:text-white:hover{--tw-text-opacity:1;color:rgb(243 241 236/var(--tw-text-opacity,1))}.group:hover .group-hover\:translate-x-1{--tw-translate-x:0.25rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.group:hover .group-hover\:text-orangeBtn{--tw-text-opacity:1;color:rgb(255 77 28/var(--tw-text-opacity,1))}@media (min-width:640px){.sm\:col-span-3{grid-column:span 3/span 3}.sm\:col-span-9{grid-column:span 9/span 9}.sm\:block{display:block}.sm\:inline-block{display:inline-block}.sm\:inline{display:inline}.sm\:grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.sm\:gap-6{gap:1.5rem}.sm\:p-14{padding:3.5rem}.sm\:px-12{padding-left:3rem;padding-right:3rem}.sm\:px-16{padding-left:4rem;padding-right:4rem}.sm\:px-6{padding-left:1.5rem;padding-right:1.5rem}.sm\:px-8{padding-left:2rem;padding-right:2rem}.sm\:py-14{padding-top:3.5rem;padding-bottom:3.5rem}.sm\:py-16{padding-top:4rem;padding-bottom:4rem}.sm\:py-36{padding-top:9rem;padding-bottom:9rem}.sm\:\!pl-4{padding-left:1rem!important}.sm\:pt-40{padding-top:10rem}.sm\:text-3xl{font-size:1.875rem;line-height:2.25rem}.sm\:text-4xl{font-size:2.25rem;line-height:2.5rem}.sm\:text-5xl{font-size:3rem;line-height:1}.sm\:text-6xl{font-size:3.75rem;line-height:1}.sm\:text-7xl{font-size:4.5rem;line-height:1}.sm\:text-8xl{font-size:6rem;line-height:1}.sm\:text-base{font-size:1rem;line-height:1.5rem}.sm\:text-lg{font-size:1.125rem;line-height:1.75rem}.sm\:text-sm{font-size:.875rem;line-height:1.25rem}.sm\:text-xl{font-size:1.25rem;line-height:1.75rem}}@media (min-width:768px){.md\:block{display:block}.md\:flex{display:flex}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:flex-row{flex-direction:row}.md\:items-end{align-items:flex-end}.md\:self-auto{align-self:auto}}@media (min-width:1024px){.lg\:col-span-4{grid-column:span 4/span 4}.lg\:col-span-5{grid-column:span 5/span 5}.lg\:col-span-6{grid-column:span 6/span 6}.lg\:col-span-7{grid-column:span 7/span 7}.lg\:col-span-8{grid-column:span 8/span 8}.lg\:grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.lg\:grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.lg\:gap-10{gap:2.5rem}.lg\:gap-12{gap:3rem}.lg\:border-r{border-right-width:1px}.lg\:pb-16{padding-bottom:4rem}.lg\:pr-8{padding-right:2rem}.lg\:text-left{text-align:left}.lg\:text-\[104px\]{font-size:104px}.lg\:text-\[72px\]{font-size:72px}}@media (min-width:1280px){.xl\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}}

    @property --border-angle {
      syntax: '<angle>';
      inherits: false;
      initial-value: 0deg;
    }

    :root {
      --grid-unit: 72px;
      --nav-margin: clamp(1.5rem, 5vw, 5.5rem);
      --cursor-x: 50vw;
      --cursor-y: 50vh;
      --beyond-x: 50vw;
      --beyond-y: 50vh;
    }

    *, body, button, input, select, textarea, em, i {
      font-family: 'Familjen Grotesk', sans-serif !important;
      font-style: normal !important;
    }

    body {
      background-color: #141416;
      color: #F3F1EC;
      overflow-x: hidden;
      background-image:
        linear-gradient(to right, rgba(243, 241, 236, 0.04) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(243, 241, 236, 0.04) 1px, transparent 1px);
      background-size: var(--grid-unit) var(--grid-unit);
      background-position: center top;
    }

    h1, h2, h3, .font-display {
      font-weight: 700;
      letter-spacing: -0.035em;
      line-height: 1.04;
    }

    .nb-container {
      padding-left: var(--nav-margin);
      padding-right: var(--nav-margin);
      max-width: 1640px;
      margin-left: auto;
      margin-right: auto;
    }

    /* =====================================================================
       LOAD ANIMATION ON "Clear Interfaces."
    ====================================================================== */
    @keyframes clearInterfacesLoad {
      0% {
        opacity: 0;
        transform: translate3d(0, 34px, 0) scale(0.96);
        filter: blur(10px);
      }
      60% {
        opacity: 1;
        transform: translate3d(0, -3px, 0) scale(1.01);
        filter: blur(0px);
      }
      100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
        filter: blur(0px);
      }
    }
    @keyframes clearInterfacesSheen {
      0% { background-position: 200% 50%; }
      100% { background-position: 0% 50%; }
    }
    .clear-interfaces-anim {
      display: inline-block;
      background: linear-gradient(90deg, #F3F1EC 0%, #F3F1EC 38%, #FF4D1C 50%, #F3F1EC 62%, #F3F1EC 100%);
      background-size: 220% auto;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      animation:
        clearInterfacesLoad 1.05s cubic-bezier(0.22, 1, 0.36, 1) forwards,
        clearInterfacesSheen 2.4s cubic-bezier(0.22, 1, 0.36, 1) 0.2s forwards;
    }

    /* =====================================================================
       CUSTOM MOUSE CURSOR + CURSOR-FOLLOWING "Read Case" BUTTON
    ====================================================================== */
    @media (pointer: fine) {
      .custom-cursor-dot {
        position: fixed;
        top: 0;
        left: 0;
        width: 8px;
        height: 8px;
        border-radius: 9999px;
        background-color: #FF4D1C;
        pointer-events: none;
        z-index: 9999;
        transform: translate3d(-50%, -50%, 0);
      }
      .custom-cursor-ring {
        position: fixed;
        top: 0;
        left: 0;
        width: 36px;
        height: 36px;
        border-radius: 9999px;
        border: 1.5px solid rgba(255, 77, 28, 0.55);
        background: rgba(255, 77, 28, 0.06);
        pointer-events: none;
        z-index: 9998;
        transform: translate3d(-50%, -50%, 0);
        transition: border-color 0.25s ease;
      }
    }

    body:has(.read-case-trigger:hover) :is(.custom-cursor-dot, .custom-cursor-ring),
    body:has(#case-lightbox.open) :is(.custom-cursor-dot, .custom-cursor-ring) {
      visibility: hidden;
    }
    .read-case-cursor-pill {
      position: fixed;
      top: 0;
      left: 0;
      z-index: 9995;
      pointer-events: none;
      opacity: 0;
      transform: translate3d(-50%, -50%, 0) scale(0.75);
      transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
      white-space: nowrap;
    }
    .read-case-cursor-pill.active {
      opacity: 1;
      transform: translate3d(-50%, -50%, 0) scale(1);
    }

    /* =====================================================================
       CURSOR-FOLLOWING GLOWING GRID EDGES (Hero + Beyond Section)
    ====================================================================== */
    .hero-grid-glow-layer {
      position: absolute;
      inset: 0;
      z-index: 1;
      pointer-events: none;
      background-image:
        radial-gradient(circle at 0px 0px, rgba(243, 241, 236, 0.9) 2px, transparent 2.5px),
        linear-gradient(to right, rgba(255, 77, 28, 0.75) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 77, 28, 0.75) 1px, transparent 1px);
      background-size: var(--grid-unit) var(--grid-unit);
      background-position: center top;
      filter: drop-shadow(0 0 8px rgba(255, 77, 28, 0.65));
      -webkit-mask-image: radial-gradient(
        circle 240px at var(--cursor-x) var(--cursor-y),
        rgba(0, 0, 0, 1) 0%,
        rgba(0, 0, 0, 0.55) 45%,
        rgba(0, 0, 0, 0.12) 75%,
        rgba(0, 0, 0, 0) 100%
      );
      mask-image: radial-gradient(
        circle 240px at var(--cursor-x) var(--cursor-y),
        rgba(0, 0, 0, 1) 0%,
        rgba(0, 0, 0, 0.55) 45%,
        rgba(0, 0, 0, 0.12) 75%,
        rgba(0, 0, 0, 0) 100%
      );
    }

    .beyond-parallax {
      position: relative;
      isolation: isolate;
      background-color: #141416;
      background-image:
        linear-gradient(to bottom, #141416, transparent 12rem, transparent calc(100% - 12rem), #141416),
        radial-gradient(ellipse at 50% 50%, rgba(255, 77, 28, 0.13), transparent 65%),
        linear-gradient(to right, rgba(243, 241, 236, 0.06) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(243, 241, 236, 0.06) 1px, transparent 1px);
      background-size: auto, auto, var(--grid-unit) var(--grid-unit), var(--grid-unit) var(--grid-unit);
      background-position: left top;
      background-attachment: scroll, fixed, fixed, fixed;
    }
    .beyond-parallax > section { position: relative; z-index: 2; }
    @media (hover: none) {
      #read-case-cursor-btn { display: none; }
      .beyond-parallax, .beyond-grid-glow-layer { background-attachment: scroll; }
    }
    @media (prefers-reduced-motion: reduce) {
      .beyond-parallax { background-attachment: scroll; }
      .beyond-parallax .reveal-up { transition: none; transform: none; }
      .beyond-parallax .beyond-grid-glow-layer { display: none; }
    }
    .beyond-grid-glow-layer {
      position: absolute;
      inset: 0;
      z-index: 1;
      pointer-events: none;
      background-image:
        radial-gradient(circle at 1px 1px, rgba(243, 241, 236, 0.9) 2px, transparent 2.5px),
        linear-gradient(to right, rgba(255, 77, 28, 0.75) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 77, 28, 0.75) 1px, transparent 1px);
      background-size: var(--grid-unit) var(--grid-unit);
      background-position: left top;
      background-attachment: fixed;
      filter: drop-shadow(0 0 8px rgba(255, 77, 28, 0.65));
      -webkit-mask-image: radial-gradient(
        circle 260px at var(--beyond-x) var(--beyond-y),
        rgba(0, 0, 0, 1) 0%,
        rgba(0, 0, 0, 0.55) 45%,
        rgba(0, 0, 0, 0.12) 75%,
        rgba(0, 0, 0, 0) 100%
      );
      mask-image: radial-gradient(
        circle 260px at var(--beyond-x) var(--beyond-y),
        rgba(0, 0, 0, 1) 0%,
        rgba(0, 0, 0, 0.55) 45%,
        rgba(0, 0, 0, 0.12) 75%,
        rgba(0, 0, 0, 0) 100%
      );
    }

    /* =====================================================================
       ON-BRAND GLASSMORPHIC BUTTONS
    ====================================================================== */
    .btn-pill-orange {
      background:
        radial-gradient(120% 140% at 15% 100%, rgba(243, 241, 236, 0.42) 0%, rgba(255, 120, 60, 0.68) 32%, rgba(255, 77, 28, 0.88) 70%),
        rgba(255, 77, 28, 0.78);
      backdrop-filter: blur(22px) saturate(160%);
      -webkit-backdrop-filter: blur(22px) saturate(160%);
      border: 1px solid rgba(243, 241, 236, 0.34);
      box-shadow:
        0 14px 34px -6px rgba(255, 77, 28, 0.55),
        inset 0 1px 1px rgba(243, 241, 236, 0.48),
        inset 0 -2px 12px rgba(243, 241, 236, 0.18);
      display: inline-flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 7px 7px 7px 22px;
      border-radius: 9999px;
      color: #F3F1EC;
      font-size: 14px;
      font-weight: 600;
      letter-spacing: -0.01em;
      white-space: nowrap;
      flex-shrink: 0;
      transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease, border-color 0.25s ease;
    }
    .btn-pill-orange:hover {
      transform: translateY(-2px) scale(1.02);
      border-color: rgba(243, 241, 236, 0.65);
      box-shadow:
        0 20px 42px -6px rgba(255, 77, 28, 0.72),
        inset 0 1px 2px rgba(243, 241, 236, 0.65);
    }
    .btn-pill-orange .circle-icon {
      width: 32px;
      height: 32px;
      border-radius: 9999px;
      background: rgba(243, 241, 236, 0.92);
      color: #FF4D1C;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    }

    .btn-pill-outline {
      background:
        radial-gradient(110% 120% at 15% 100%, rgba(255, 77, 28, 0.26) 0%, rgba(243, 241, 236, 0.04) 65%),
        rgba(24, 24, 30, 0.72);
      backdrop-filter: blur(22px) saturate(140%);
      -webkit-backdrop-filter: blur(22px) saturate(140%);
      border: 1px solid rgba(243, 241, 236, 0.22);
      box-shadow:
        0 14px 32px rgba(0, 0, 0, 0.5),
        inset 0 1px 1px rgba(243, 241, 236, 0.22);
      display: inline-flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 7px 7px 7px 22px;
      border-radius: 9999px;
      color: #F3F1EC;
      font-size: 14px;
      font-weight: 600;
      white-space: nowrap;
      flex-shrink: 0;
      transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .btn-pill-outline:hover {
      border-color: rgba(255, 120, 70, 0.65);
      transform: translateY(-2px);
      box-shadow:
        0 18px 38px rgba(255, 77, 28, 0.25),
        inset 0 1px 1px rgba(243, 241, 236, 0.35);
    }
    .btn-pill-outline .circle-icon {
      width: 32px;
      height: 32px;
      border-radius: 9999px;
      background: rgba(255, 77, 28, 0.22);
      border: 1px solid rgba(255, 77, 28, 0.45);
      color: #FF8A65;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    /* =====================================================================
       HERO RIGHT-SIDE ON-BRAND GLASSMORPHISM CARDS
    ====================================================================== */
    .hero-rotator-viewport {
      position: relative;
      height: 500px;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      perspective: 1200px;
      overflow: visible;
    }
    .hrot-card {
      position: absolute;
      width: 100%;
      max-width: 470px;
      border-radius: 30px;
      background:
        radial-gradient(120% 95% at 14% 102%, rgba(243, 241, 236, 0.9) 0%, rgba(255, 115, 55, 0.78) 22%, rgba(255, 77, 28, 0.42) 46%, rgba(20, 20, 22, 0) 74%),
        linear-gradient(165deg, rgba(24, 24, 28, 0.94) 0%, rgba(14, 14, 17, 0.96) 65%);
      backdrop-filter: blur(28px);
      -webkit-backdrop-filter: blur(28px);
      color: #F3F1EC;
      padding: 34px 36px 38px;
      border: 1px solid rgba(243, 241, 236, 0.16);
      box-shadow:
        0 28px 70px rgba(0, 0, 0, 0.8),
        inset 0 1px 0 rgba(243, 241, 236, 0.2),
        inset 0 -2px 18px rgba(255, 120, 60, 0.35);
      transition: transform 0.85s cubic-bezier(0.22, 1, 0.36, 1),
                  opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1),
                  filter 0.85s cubic-bezier(0.22, 1, 0.36, 1),
                  border-color 0.4s ease;
      will-change: transform, opacity, filter;
      cursor: pointer;
      overflow: hidden;
    }
    .hrot-card.pos-center {
      z-index: 30;
      opacity: 1;
      border-color: rgba(255, 140, 95, 0.5);
      transform: translate3d(0, 0, 0) scale(1) rotateX(0deg);
      filter: blur(0px);
    }
    .hrot-card.pos-top {
      z-index: 15;
      opacity: 0.42;
      transform: translate3d(0, -142px, -95px) scale(0.88) rotateX(12deg);
      filter: blur(0.6px);
    }
    .hrot-card.pos-bottom {
      z-index: 15;
      opacity: 0.42;
      transform: translate3d(0, 142px, -95px) scale(0.88) rotateX(-12deg);
      filter: blur(0.6px);
    }
    .hrot-card:focus-visible { outline: 2px solid #F3F1EC; outline-offset: 4px; }
    @media (prefers-reduced-motion: reduce) {
      .hrot-card { transition: none; }
    }
    .hrot-icon-orb {
      width: 56px;
      height: 56px;
      border-radius: 9999px;
      background: radial-gradient(circle at 30% 25%, rgba(243, 241, 236, 0.2), rgba(20, 20, 24, 0.9) 70%);
      border: 1px solid rgba(243, 241, 236, 0.22);
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.55), inset 0 1px 1px rgba(243, 241, 236, 0.28);
      display: flex;
      align-items: center;
      justify-content: center;
      color: #FF8A65;
      margin-bottom: 24px;
    }

    /* =====================================================================
       SECTION 02: "Design in Practice." — OPTION A: FULL IMAGE + DARK GRADIENT
    ====================================================================== */
    .case-option-a-card {
      position: relative;
      border-radius: 26px;
      overflow: hidden;
      aspect-ratio: 3 / 4.15;
      background: #0B0B0D;
      border: 1px solid rgba(243, 241, 236, 0.14);
      box-shadow: 0 28px 65px rgba(0, 0, 0, 0.72);
      cursor: none;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      padding: 30px 28px 32px;
      transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
                  border-color 0.4s ease,
                  box-shadow 0.45s ease;
    }
    .case-option-a-card:hover {
      transform: translateY(-8px);
      border-color: rgba(255, 77, 28, 0.6);
      box-shadow: 0 36px 80px rgba(0, 0, 0, 0.85), 0 0 38px rgba(255, 77, 28, 0.18);
    }
    .case-option-a-card img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: top center;
      z-index: 1;
      transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .case-option-a-card:hover img {
      transform: scale(1.06);
    }
    .case-option-a-gradient {
      position: absolute;
      inset: 0;
      z-index: 2;
      background: linear-gradient(
        to top,
        #09090B 0%,
        #09090B 14%,
        rgba(9, 9, 11, 0.82) 31%,
        rgba(9, 9, 11, 0.25) 57%,
        transparent 82%
      );
      pointer-events: none;
    }
    .case-option-a-card .case-tag-solid {
      background: rgba(14, 14, 18, 0.72);
      box-shadow: none;
    }
    .case-tag-solid {
      display: inline-flex;
      align-items: center;
      padding: 6px 16px;
      border-radius: 9999px;
      background: #FF4D1C;
      border: 1px solid #FF4D1C;
      color: #F3F1EC;
      font-size: 14px;
      font-weight: 600;
      letter-spacing: 0.01em;
      box-shadow: 0 6px 18px rgba(255, 77, 28, 0.4);
    }

    /* =====================================================================
       ON-BRAND GLASSMORPHISM CARDS FOR TESTIMONIALS, APPROACH & LIGHTBOX
    ====================================================================== */
    @media (min-width: 1280px) {
      .testi-heading { flex-direction: row; align-items: flex-end; }
      .testi-heading #toggle-12-btn { align-self: auto; }
    }
    @media (min-width: 1024px) {
      #testi-metrics { padding-left: 36px; }
    }
    .testi-glass-85 {
      background:
        radial-gradient(110% 90% at 10% 105%, rgba(243, 241, 236, 0.28) 0%, rgba(255, 110, 50, 0.34) 22%, rgba(255, 77, 28, 0.15) 48%, rgba(20, 20, 24, 0) 75%),
        linear-gradient(155deg, rgba(243, 241, 236, 0.07) 0%, rgba(20, 20, 24, 0.9) 55%, rgba(14, 14, 18, 0.96) 100%);
      backdrop-filter: blur(30px) saturate(140%);
      -webkit-backdrop-filter: blur(30px) saturate(140%);
      border: 1px solid rgba(243, 241, 236, 0.18);
      border-radius: 36px;
      box-shadow:
        0 35px 80px rgba(0, 0, 0, 0.75),
        inset 0 1px 1px rgba(243, 241, 236, 0.24),
        inset 0 -1px 18px rgba(255, 77, 28, 0.16);
    }

    .brand-glass-panel {
      position: relative;
      border-radius: 26px;
      background:
        radial-gradient(120% 95% at 14% 105%, rgba(243, 241, 236, 0.22) 0%, rgba(255, 110, 50, 0.26) 24%, rgba(255, 77, 28, 0.1) 50%, rgba(20, 20, 24, 0) 75%),
        linear-gradient(160deg, rgba(243, 241, 236, 0.06) 0%, rgba(20, 20, 25, 0.88) 65%);
      backdrop-filter: blur(24px);
      -webkit-backdrop-filter: blur(24px);
      border: 1px solid rgba(243, 241, 236, 0.15);
      box-shadow:
        0 24px 55px rgba(0, 0, 0, 0.6),
        inset 0 1px 1px rgba(243, 241, 236, 0.2);
      transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s ease, box-shadow 0.35s ease;
    }
    .brand-glass-panel:hover {
      transform: translateY(-5px);
      border-color: rgba(255, 120, 70, 0.5);
      box-shadow:
        0 30px 65px rgba(0, 0, 0, 0.75),
        0 0 32px rgba(255, 77, 28, 0.16),
        inset 0 1px 1px rgba(243, 241, 236, 0.3);
    }

    /* =====================================================================
       CASE STUDY & WEBSITE GALLERY LIGHTBOX MODALS
    ====================================================================== */
    .case-lightbox-backdrop {
      position: fixed;
      inset: 0;
      z-index: 120;
      background: rgba(10, 10, 14, 0.88);
      backdrop-filter: blur(22px);
      -webkit-backdrop-filter: blur(22px);
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1);
      overflow-y: auto;
      padding: 24px 16px 60px;
    }
    .case-lightbox-backdrop.open {
      opacity: 1;
      pointer-events: auto;
    }
    .case-lightbox-sheet {
      max-width: 1080px;
      margin: 0 auto;
      background: #F3F1EC;
      color: #141416;
      border-radius: 30px;
      border: 1px solid rgba(243, 241, 236, 0.28);
      overflow: hidden;
      box-shadow: 0 40px 100px rgba(0, 0, 0, 0.85);
      transform: translate3d(0, 32px, 0) scale(0.97);
      transition: transform 0.42s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .case-lightbox-backdrop.open .case-lightbox-sheet {
      transform: translate3d(0, 0, 0) scale(1);
    }
    .lb-laptop-screen {
      position: relative;
      background: #141416;
      border: 10px solid #141416;
      border-radius: 20px 20px 0 0;
      overflow: hidden;
      box-shadow: 0 25px 60px rgba(20, 20, 22, 0.22);
    }
    #case-lightbox { overflow: hidden; }
    #case-lightbox .case-lightbox-sheet {
      max-height: calc(100dvh - 84px);
      overflow-y: auto;
      overscroll-behavior: contain;
    }
    .case-breadcrumb-bar {
      position: sticky;
      top: 0;
      background: #EAE6DF;
    }
    .lb-laptop-content {
      max-height: min(400px, 58dvh);
      overflow-y: auto;
    }
    #lb-laptop-img[hidden] { display: none; }
    .lb-comparison:not([hidden]) {
      --handle-half: 28px;
      --before-ratio: 0.5;
      --split: calc(var(--handle-half) + (100% - 2 * var(--handle-half)) * var(--before-ratio));
      width: 100%;
      height: 100%;
      position: relative;
      background: #F3F1EC;
      isolation: isolate;
    }
    .lb-compare-pane {
      position: absolute;
      inset: 0;
      overflow: auto;
      overscroll-behavior: contain;
      scrollbar-width: none;
      background: #F3F1EC;
    }
    .lb-compare-pane img { display: block; width: 100%; height: auto; }
    #lb-live-pane { overflow: hidden; }
    #lb-live-pane[data-loading] { visibility: hidden; }
    #lb-live-pane iframe {
      display: block;
      width: 1440px;
      max-width: none;
      border: 0;
      transform-origin: top left;
    }
    .case-preview-toggle {
      min-height: 44px;
      padding: 6px 16px;
      border: 1px solid rgba(20, 20, 22, 0.3);
      border-radius: 999px;
      font-size: 14px;
      font-weight: 700;
    }
    #lb-before-pane { clip-path: inset(0 calc(100% - var(--split)) 0 0); z-index: 1; }
    .lb-comparison-divider {
      position: absolute;
      inset: 0 auto 0 var(--split);
      width: 2px;
      background: #FF4D1C;
      pointer-events: none;
      z-index: 2;
    }
    .lb-drag-label {
      position: absolute;
      top: 50%;
      left: var(--split);
      transform: translate(-50%, -50%);
      display: grid;
      place-items: center;
      width: calc(2 * var(--handle-half));
      height: 44px;
      border: 2px solid #F3F1EC;
      border-radius: 999px;
      background: #FF4D1C;
      color: #141416;
      font-size: 14px;
      font-weight: 700;
      box-shadow: 0 2px 12px #14141688;
      pointer-events: none;
      z-index: 3;
    }
    #lb-comparison-range {
      appearance: none;
      position: absolute;
      inset: calc(50% - 22px) 0 auto;
      width: 100%;
      height: 44px;
      margin: 0;
      padding: 0;
      border: 0;
      background: transparent;
      pointer-events: none;
      z-index: 4;
    }
    #lb-comparison-range::-webkit-slider-thumb {
      appearance: none;
      width: 56px;
      height: 44px;
      background: transparent;
      border: 0;
      pointer-events: auto;
      cursor: ew-resize;
      touch-action: none;
    }
    #lb-comparison-range::-moz-range-thumb {
      width: 56px;
      height: 44px;
      background: transparent;
      border: 0;
      pointer-events: auto;
      cursor: ew-resize;
      touch-action: none;
    }
    #lb-comparison-range:focus { outline: none; }
    #lb-comparison-range:focus-visible + .lb-drag-label {
      outline: 3px solid #F3F1EC;
      outline-offset: 3px;
    }
    .comparison-device .lb-laptop-screen {
      max-width: 680px;
      box-sizing: border-box;
      margin-inline: auto;
    }
    #case-lightbox .comparison-device .lb-laptop-base {
      width: calc(100% + 16px);
      max-width: 714px;
      margin-inline: auto;
      left: 50%;
      transform: translateX(-50%);
      margin-left: 0;
    }
    .comparison-device .lb-laptop-content {
      overflow: hidden;
      aspect-ratio: 16 / 10;
      max-height: min(400px, 58dvh);
    }
    .comparison-device .lb-comparison img { image-rendering: auto; }
    .case-highlights {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
      gap: 1.25rem 1.75rem;
      padding-block: 1.25rem;
      border-block: 1px solid rgba(20, 20, 22, 0.14);
    }
    .case-highlight { padding-inline-start: 0.9rem; border-inline-start: 2px solid #FF4D1C; }
    .case-highlight dt {
      font-size: clamp(1.45rem, 3vw, 2.2rem);
      overflow-wrap: anywhere;
    }
    .case-highlight dd {
      margin: 0.45rem 0 0;
      color: rgba(20, 20, 22, 0.76);
      font-size: 0.875rem;
    }
    .app-device .lb-laptop-content { max-height: none; }
    .lb-laptop-content:focus-visible {
      outline: 2px solid #FF4D1C;
      outline-offset: -2px;
    }
    .lb-laptop-base {
      height: 16px;
      background: linear-gradient(90deg, #B8B4AC 0%, #E5E2DC 20%, #D1CCC1 50%, #E5E2DC 80%, #B8B4AC 100%);
      border-radius: 0 0 16px 16px;
      margin: 0 -24px;
      position: relative;
      box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
    }

    /* =====================================================================
       UNDERTOW CAROUSEL (10 Website Designs + Top-Aligned Cropping for Full-Page Captures)
    ====================================================================== */
    .ut-scene {
      position: relative;
      overflow: hidden;
      background: radial-gradient(110% 60% at 50% 0%, #241917 0%, #191516 38%, #141416 72%);
    }
    .ut-header-center {
      position: relative;
      z-index: 5;
      max-width: 980px;
      margin: 0 auto;
      padding-block: clamp(44px, 6vw, 76px) 0;
      text-align: center;
    }
    .ut-eyebrow {
      font-size: 14px;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: #FF4D1C;
      font-weight: 700;
      margin: 0 0 12px;
    }
    .ut-h2 {
      font-weight: 700;
      font-style: normal;
      font-size: clamp(42px, 6.5vw, 84px);
      line-height: 0.96;
      margin: 0;
      letter-spacing: -0.035em;
      color: #F3F1EC;
    }
    .ut-stage {
      position: relative;
      height: clamp(390px, 60vh, 620px);
      touch-action: pan-y;
      cursor: grab;
      user-select: none;
      -webkit-user-select: none;
      outline: none;
    }
    .ut-stage.dragging {
      cursor: grabbing;
    }
    #ut-stars {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      display: block;
      pointer-events: none;
    }
    .ut-pool {
      position: absolute;
      left: 0;
      right: 0;
      top: var(--horizon, 64%);
      bottom: 0;
      pointer-events: none;
      background: linear-gradient(to bottom, rgba(20, 20, 22, 0.35), rgba(16, 16, 18, 0.78) 40%, #141416);
    }
    .ut-pool::before {
      content: "";
      position: absolute;
      left: 6%;
      right: 6%;
      top: 0;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(255, 77, 28, 0.22), rgba(255, 77, 28, 0.55), rgba(255, 77, 28, 0.22), transparent);
    }
    .ut-card {
      position: absolute;
      left: 50%;
      top: 0;
      width: var(--w);
      margin-left: calc(var(--w) / -2);
      will-change: transform, opacity;
      visibility: hidden;
      cursor: pointer;
    }
    .ut-label {
      position: absolute;
      bottom: calc(100% + var(--w) * .06);
      inset-inline: 0;
      text-align: center;
      overflow-wrap: anywhere;
      line-height: 1.05;
      font-size: max(1.75rem, calc(var(--w) * .065));
      font-weight: 700;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: #D1CCC1;
      opacity: 0.88;
    }
    .ut-face {
      position: relative;
      height: var(--h);
      border-radius: calc(var(--w) * .038);
      overflow: hidden;
      background: var(--g);
      box-shadow: 0 0 calc(var(--w) * .28) calc(var(--w) * -.02) var(--glow), inset 0 0 0 1px rgba(243, 241, 236, 0.16);
      transition: transform 0.35s cubic-bezier(.2, .7, .2, 1), filter 0.35s;
    }
    /* Crisp top-of-page hero cropping for tall full-page screenshots */
    .ut-face img, .ut-refl img {
      box-sizing: border-box;
      position: relative;
      z-index: 2;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: top center;
      display: block;
    }
    .ut-face::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 3;
      background: linear-gradient(160deg, rgba(243, 241, 236, 0.14), transparent 38%);
      pointer-events: none;
    }
    .ut-card:hover .ut-face {
      transform: translateY(calc(var(--w) * -.03));
      filter: brightness(1.12);
    }
    .ut-puddle {
      position: absolute;
      left: -30%;
      right: -30%;
      top: calc(var(--h) - var(--w) * .1);
      height: calc(var(--h) * .45);
      background: radial-gradient(closest-side, var(--glow), transparent);
      opacity: 0.45;
      pointer-events: none;
      mix-blend-mode: screen;
    }
    .ut-refl {
      height: var(--h);
      margin-top: calc(var(--w) * .025);
      border-radius: calc(var(--w) * .038);
      overflow: hidden;
      background: var(--g);
      transform: scaleY(-1);
      opacity: 0.34;
      filter: url(#ut-ripple);
      -webkit-mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, .5) 30%, transparent 72%);
      mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, .5) 30%, transparent 72%);
    }
    .ut-controls {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 8px;
      margin-top: calc(clamp(390px, 60vh, 620px) * -0.16);
      padding-bottom: clamp(36px, 5vw, 56px);
      position: relative;
      z-index: 1;
    }
    .ut-controls .btn-pill-orange {
      flex-shrink: 1;
      min-width: 0;
      min-height: 44px;
      white-space: normal;
      text-align: center;
    }
    #ut-selection {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
    }
    .ut-arrow {
      display: grid;
      place-items: center;
      flex: 0 0 44px;
      height: 44px;
      border: 1px solid rgba(243, 241, 236, 0.25);
      border-radius: 50%;
      color: #F3F1EC;
      background: radial-gradient(125% 120% at 15% 100%, rgba(255, 77, 28, 0.2), transparent 65%),
        linear-gradient(150deg, rgba(243, 241, 236, 0.15), rgba(243, 241, 236, 0.04));
      backdrop-filter: blur(16px);
      box-shadow: inset 0 1px 0 rgba(243, 241, 236, 0.2), 0 8px 20px rgba(0, 0, 0, 0.32);
      transition: border-color 0.2s ease, background-color 0.2s ease;
    }
    .ut-arrow:hover { border-color: #FF4D1C; background-color: rgba(255, 77, 28, 0.15); }
    .gallery-cta-mobile { display: none; }
    @media (min-width: 768px) {
      .ut-header-center { padding-bottom: 32px; }
      .ut-controls { margin-top: 32px; padding-bottom: 0; }
      #testimonials { padding-top: 100px; }
    }
    .ut-controls :focus-visible, .ut-stage:focus-visible {
      outline: 2px solid #F3F1EC;
      outline-offset: -2px;
    }

    /* =====================================================================
       SLEEK HAMBURGER, DOCK, RIBBON & OTHER SECTIONS
    ====================================================================== */
    .sleek-burger-btn {
      width: 40px;
      height: 40px;
      border-radius: 9999px;
      background: rgba(243, 241, 236, 0.06);
      backdrop-filter: blur(16px);
      border: 1px solid rgba(243, 241, 236, 0.18);
      box-shadow: inset 0 1px 0 rgba(243, 241, 236, 0.25);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 5px;
      cursor: pointer;
      transition: all 0.25s ease;
    }
    .sleek-burger-btn:hover {
      border-color: #FF4D1C;
      background: rgba(255, 77, 28, 0.18);
    }
    .burger-line {
      width: 16px;
      height: 1.8px;
      background-color: #F3F1EC;
      border-radius: 2px;
      transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    }
    .sleek-burger-btn.active .burger-line:first-child {
      transform: translateY(3.4px) rotate(45deg);
    }
    .sleek-burger-btn.active .burger-line:last-child {
      transform: translateY(-3.4px) rotate(-45deg);
    }

    .bottom-glass-dock {
      position: fixed;
      bottom: 28px;
      left: 50%;
      transform: translate3d(-50%, 130px, 0);
      opacity: 0;
      pointer-events: none;
      z-index: 85;
      background:
        radial-gradient(120% 120% at 15% 110%, rgba(255, 77, 28, 0.25) 0%, rgba(14, 14, 18, 0) 60%),
        rgba(14, 14, 18, 0.88);
      backdrop-filter: blur(28px) saturate(150%);
      -webkit-backdrop-filter: blur(28px) saturate(150%);
      border: 1px solid rgba(243, 241, 236, 0.2);
      box-shadow:
        0 28px 65px rgba(0, 0, 0, 0.8),
        inset 0 1px 1px rgba(243, 241, 236, 0.24);
      transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s ease;
    }
    .bottom-glass-dock.dock-visible {
      transform: translate3d(-50%, 0, 0);
      opacity: 1;
      pointer-events: auto;
    }

    @keyframes marqueeRibbon {
      0% { transform: translate3d(0, 0, 0); }
      100% { transform: translate3d(-50%, 0, 0); }
    }
    .orange-ribbon-wrap {
      width: 100vw;
      margin-left: calc(50% - 50vw);
      background:
        linear-gradient(90deg, rgba(255, 77, 28, 0.92), rgba(255, 106, 50, 0.92), rgba(255, 77, 28, 0.92));
      backdrop-filter: blur(16px);
      color: #F3F1EC;
      overflow: hidden;
      padding: 16px 0;
      border-top: 1px solid rgba(243, 241, 236, 0.28);
      border-bottom: 1px solid rgba(243, 241, 236, 0.28);
      box-shadow: 0 14px 40px rgba(255, 77, 28, 0.32);
    }
    .orange-ribbon-track {
      display: flex;
      width: max-content;
      animation: marqueeRibbon 24s linear infinite;
    }
    .orange-ribbon-item {
      display: flex;
      align-items: center;
      gap: 28px;
      padding-right: 28px;
      font-size: clamp(1.25rem, 2.2vw, 1.85rem);
      font-weight: 700;
      letter-spacing: -0.02em;
      white-space: nowrap;
    }

    /* RIGHT RULER */
    .exact-ruler-wrap {
      position: fixed;
      right: 14px;
      top: 50%;
      transform: translateY(-50%);
      z-index: 90;
      display: flex;
      align-items: center;
      user-select: none;
    }
    .exact-ruler-ticks {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 6px;
      padding: 8px 18px 8px 12px;
    }
    .r-tick-row {
      position: relative;
      height: 2px;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      cursor: pointer;
    }
    .r-tick-line {
      height: 1.5px;
      width: 6px;
      transition: width 0.22s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.22s ease, height 0.22s ease;
    }
    .r-orange-marker {
      position: absolute;
      right: 2px;
      top: 0;
      width: 18px;
      height: 3px;
      background-color: #FF4D1C;
      box-shadow: 0 0 12px rgba(255, 77, 28, 0.85);
      transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
      pointer-events: none;
    }
    .r-tooltip {
      position: absolute;
      right: 54px;
      top: 0;
      transform: translateY(-50%);
      background: rgba(20, 20, 22, 0.94);
      backdrop-filter: blur(12px);
      color: #F3F1EC;
      border: 1px solid rgba(255, 77, 28, 0.45);
      padding: 4px 10px;
      border-radius: 8px;
      font-size: 0.875rem;
      font-weight: 700;
      white-space: nowrap;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.2s ease, top 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .exact-ruler-wrap:hover .r-tooltip {
      opacity: 1;
    }

    .step-col.brand-glass-panel {
      perspective: 900px;
      background:
        radial-gradient(ellipse at 15% 105%, rgba(255, 77, 28, 0.14), transparent 68%),
        linear-gradient(155deg, rgba(243, 241, 236, 0.07), rgba(20, 20, 25, 0.34));
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }
    .step-col .outline-num { margin-bottom: 1.25rem; }
    .step-title {
      font-size: clamp(1.5rem, 2.15vw, 2rem);
      font-weight: 700;
      -webkit-text-stroke: 0.3px currentColor;
      line-height: 1.08;
      margin-bottom: 0.85rem;
    }
    .step-lead {
      font-size: clamp(1.0625rem, 1.4vw, 1.25rem);
      line-height: 1.2;
      letter-spacing: -0.025em;
      margin-bottom: 0.85rem;
    }
    .outline-num {
      display: inline-block;
      font-weight: 700;
      font-size: clamp(3rem, 4.5vw, 4.2rem);
      line-height: 0.95;
      color: transparent;
      -webkit-text-stroke: 1.5px rgba(209, 204, 193, 0.4);
      user-select: none;
      transform-style: preserve-3d;
      transition: transform 0.75s cubic-bezier(0.16, 1, 0.3, 1),
                  color 0.35s ease,
                  -webkit-text-stroke-color 0.35s ease,
                  text-shadow 0.35s ease;
    }
    .step-col:hover .outline-num {
      transform: rotateY(360deg);
      color: #FF4D1C;
      -webkit-text-stroke-color: #FF4D1C;
      text-shadow: 0 10px 28px rgba(255, 77, 28, 0.35);
    }

    .reveal-up {
      opacity: 0;
      transform: translate3d(0, 36px, 0);
      transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
                  transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    }
    .reveal-up.visible {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }

    .about-cutout-wrap {
      position: relative;
      width: 112%;
      max-width: 960px;
    }
    @media (min-width: 1024px) {
      .about-cutout-wrap {
        width: 130%;
      }
    }
    .about-cutout-img {
      width: 100%;
      height: auto;
      display: block;
      object-fit: contain;
    }

    /* =====================================================================
       FOOTER DRAGGABLE COLLAGE + ORBITING GLOWING BORDER AROUND CTA CORNERS
    ====================================================================== */
    .footer-canvas-viewport {
      position: relative;
      overflow: hidden;
      min-height: 820px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      user-select: none;
    }
    .footer-bento-canvas {
      position: absolute;
      inset: -600px;
      display: grid;
      grid-template-columns: repeat(8, 250px);
      grid-auto-rows: 230px;
      grid-auto-flow: dense;
      gap: 24px;
      justify-content: center;
      align-content: center;
      padding: 60px;
      cursor: grab;
      transform: translate3d(0px, 0px, 0) rotate(-3deg);
      transition: transform 0.12s cubic-bezier(0.16, 1, 0.3, 1);
      z-index: 1;
    }
    .footer-bento-canvas.dragging {
      cursor: grabbing;
      transition: none;
    }
    .footer-bento-tile {
      position: relative;
      border-radius: 24px;
      overflow: hidden;
      background: #141416;
      border: 1.5px solid rgba(243, 241, 236, 0.14);
      box-shadow: 0 22px 50px rgba(0, 0, 0, 0.65);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 18px;
    }
    .tile-square { grid-column: span 1; grid-row: span 1; }
    .tile-rect-h { grid-column: span 2; grid-row: span 1; }
    .tile-rect-v { grid-column: span 1; grid-row: span 2; }
    .footer-bento-tile img {
      box-sizing: border-box;
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      filter: grayscale(100%);
      opacity: 0.85;
      pointer-events: none;
    }
    .footer-bento-tile::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(14,14,16,0.35) 0%, transparent 40%, rgba(14,14,16,0.82) 100%);
      pointer-events: none;
      z-index: 2;
    }

    @keyframes spinBorderGlow {
      to {
        --border-angle: 360deg;
      }
    }
    .cta-glow-orbit-card {
      position: relative;
      border-radius: 40px;
      background:
        radial-gradient(120% 95% at 15% 105%, rgba(243, 241, 236, 0.34) 0%, rgba(255, 115, 55, 0.42) 24%, rgba(255, 77, 28, 0.18) 50%, rgba(14, 14, 18, 0) 75%),
        linear-gradient(160deg, rgba(26, 26, 32, 0.92) 0%, rgba(12, 12, 16, 0.96) 70%);
      backdrop-filter: blur(30px) saturate(150%);
      -webkit-backdrop-filter: blur(30px) saturate(150%);
      box-shadow:
        0 35px 80px rgba(0, 0, 0, 0.88),
        inset 0 1px 1px rgba(243, 241, 236, 0.22);
      isolation: isolate;
    }
    .cta-glow-orbit-card::before {
      content: '';
      position: absolute;
      inset: -2px;
      border-radius: 42px;
      padding: 2px;
      background: conic-gradient(
        from var(--border-angle),
        rgba(243, 241, 236, 0.08) 0%,
        rgba(255, 77, 28, 0.15) 55%,
        #FF4D1C 78%,
        #FFB088 90%,
        #F3F1EC 96%,
        rgba(243, 241, 236, 0.08) 100%
      );
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      animation: spinBorderGlow 5.5s linear infinite;
      pointer-events: none;
      z-index: 2;
    }
    .cta-glow-orbit-card::after {
      content: '';
      position: absolute;
      inset: -6px;
      border-radius: 46px;
      padding: 6px;
      background: conic-gradient(
        from var(--border-angle),
        transparent 0%,
        transparent 60%,
        rgba(255, 77, 28, 0.55) 82%,
        rgba(255, 180, 130, 0.85) 95%,
        transparent 100%
      );
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      filter: blur(12px);
      animation: spinBorderGlow 5.5s linear infinite;
      pointer-events: none;
      z-index: 1;
    }
    @media (max-width: 767px) {
      html { overflow-x: clip; scroll-padding-top: 6rem; }
      body { overflow-x: clip; }
      .theme-section { padding-block: 40px; }
      #hero { margin-top: calc(5rem + env(safe-area-inset-top)); min-height: auto; }
      .hero-main-content { padding-top: 0; }
      .ut-header-center, .ut-controls { padding-block: 0; }
      .gallery-cta-desktop { display: none; }
      .gallery-cta-mobile { display: inline; }
      #contact-footer { min-height: auto; }
      #hero-top-bar {
        position: fixed;
        inset: 0 0 auto;
        z-index: 90;
        gap: 0.5rem;
        padding: calc(0.65rem + env(safe-area-inset-top)) 0.85rem 0.65rem;
        background: rgba(20, 20, 22, 0.96);
        border-bottom: 1px solid rgba(243, 241, 236, 0.12);
      }
      #hero-identity { min-width: 0; gap: 0.6rem; flex-wrap: nowrap; }
      #hero-identity label { width: 2.75rem; height: 2.75rem; }
      #hero-identity-copy { display: grid; gap: 0.15rem; line-height: 1.15; }
      #hero-role { font-size: 0.875rem; }
      #hero-identity-divider, #hero-location, .exact-ruler-wrap { display: none; }
      #case-lightbox { padding: 0; }
      #case-lightbox .case-lightbox-sheet { border: 0; border-radius: 0; min-height: 100%; max-height: 100dvh; }
      .case-breadcrumb-bar {
        padding: calc(0.65rem + env(safe-area-inset-top)) 1rem 0.65rem;
        background: #EAE6DF;
      }
      #case-lightbox .lb-laptop-base { margin-inline: -0.35rem; }
      .ut-h2 { font-size: clamp(1.875rem, 9vw, 3.25rem); }
      .ut-face img, .ut-refl img { box-sizing: border-box; padding: 20px; }
      #craft-lb-scrollbox { padding: 20px; }
      .about-cutout-wrap { width: calc(100% + 64px); max-width: none; }
      #bottom-dock {
        opacity: 1;
        transform: translate3d(-50%, 0, 0);
        pointer-events: auto;
        bottom: max(12px, env(safe-area-inset-bottom));
      }
      .case-option-a-gradient {
        background: linear-gradient(
          to top,
          #09090B 0%,
          rgba(9, 9, 11, 0.98) 28%,
          rgba(9, 9, 11, 0.91) 47%,
          rgba(9, 9, 11, 0.48) 68%,
          transparent 90%
        );
      }
      .ut-controls .btn-pill-orange { padding-inline: 12px 7px; gap: 8px; }
      .ut-label { letter-spacing: 0.02em; }
      .case-option-a-card p, #case-lightbox .case-lightbox-sheet p.text-xs {
        font-size: 0.875rem;
      }
      #testimonials h2 { font-size: clamp(2rem, 11vw, 3.5rem); }
      #testi-stats-box { padding: 1.1rem; gap: 1.25rem; border-radius: 1.5rem; }
      #testi-metrics { padding: 0; gap: 0.5rem; }
      #testi-metrics .font-display { font-size: clamp(1.5rem, 7vw, 2.5rem); }
      #testi-metrics .font-semibold { font-size: 0.875rem; overflow-wrap: anywhere; }
      #testi-slide-content { padding: 0; }
      #testi-slide-content > * + * { margin-top: 0.8rem; }
      #slide-quote { min-height: 0; font-size: 0.875rem; line-height: 1.45; }
    }
    .about-copy { container-type: inline-size; }
    .about-heading { font-size: clamp(0.875rem, 7cqi, 4.25rem); }
    @media (max-width: 1023px) {
      .about-heading {
        margin-inline-end: -1rem;
        font-size: clamp(0.875rem, calc(7cqi + 1.1px), 4.25rem);
      }
    }
    @media (min-width: 1024px) {
      .about-copy + div .about-cutout-wrap { width: 155%; }
    }
    .about-heading > span { display: block; white-space: nowrap; }
    .footer-meta {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: nowrap;
      white-space: nowrap;
      gap: 0.5rem;
    }
    .footer-meta a { text-align: right; pointer-events: auto; }
    @media (max-width: 420px) {
      .footer-meta > :first-child { white-space: normal; }
    }
    #craft-lightbox { padding: 12px; }
    #craft-lightbox .craft-preview-sheet {
      width: 100%;
      max-width: 1120px;
      max-height: calc(100dvh - 24px);
      padding: clamp(12px, 2.5vw, 32px);
      display: grid;
      grid-template-rows: auto minmax(0, 1fr) auto;
      gap: clamp(10px, 2vh, 18px);
      transform: none;
    }
    #craft-lb-scrollbox { min-height: 0; }
    #mobile-menu { display: none; }
    @media (max-width: 767px) {
      #mobile-menu:not([hidden]) {
        position: absolute;
        top: 100%;
        inset-inline: 0;
        display: grid;
        background: #1B1B1E;
        border-bottom: 1px solid rgba(243, 241, 236, 0.15);
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.32);
      }
      #mobile-menu a { padding: 0.7rem 1rem; font-weight: 600; }
      #mobile-menu a:hover, #mobile-menu a:focus-visible { color: #FF4D1C; }
      #craft-lb-scrollbox { padding: 12px; }
      .craft-preview-actions .btn-pill-orange { white-space: normal; }
    }