/* Opt-in comparison only. The approved default remains diagonal bands. */
body[data-pattern] .brand-world{position:relative;isolation:isolate;background-image:none}
body[data-pattern] .brand-world:before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none}
body[data-pattern] .brand-world .brand-band{position:relative}
body[data-pattern="grain"] .brand-world:before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22180%22%20height%3D%22180%22%3E%3Cfilter%20id%3D%22n%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%22.8%22%20numOctaves%3D%223%22%20stitchTiles%3D%22stitch%22/%3E%3CfeColorMatrix%20type%3D%22saturate%22%20values%3D%220%22/%3E%3C/filter%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20opacity%3D%22.65%22%20filter%3D%22url%28%23n%29%22/%3E%3C/svg%3E");opacity:.30;mix-blend-mode:multiply}
body[data-pattern="grain"][data-mode="dark"] .brand-world:before{mix-blend-mode:screen;opacity:.14}
body[data-pattern="dots"] .brand-world:before{background-image:radial-gradient(circle,var(--on-field) 1.5px,transparent 1.7px);background-size:28px 28px;background-position:14px 14px;opacity:.16}
body[data-pattern="pinstripe"] .brand-world:before{background-image:repeating-linear-gradient(90deg,transparent 0 35px,var(--on-field) 35px 36px);opacity:.12}
body[data-pattern="arches"] .brand-world:before{background:var(--on-field);mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22560%22%20height%3D%22560%22%20viewBox%3D%220%200%20560%20560%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%3E%3Cpath%20d%3D%22M0%20560V280a280%20280%200%200%201%20560%200v280M56%20560V280a224%20224%200%200%201%20448%200v280M112%20560V280a168%20168%200%200%201%20336%200v280M168%20560V280a112%20112%200%200%201%20224%200v280%22/%3E%3C/g%3E%3C/svg%3E");mask-size:560px 560px;mask-position:center 40px;opacity:.14}
body[data-pattern="dashes"] .brand-world:before{background:var(--on-field);mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22100%22%20height%3D%2280%22%3E%3Cg%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M20%2016h12M70%2056h12%22/%3E%3C/g%3E%3C/svg%3E");mask-size:100px 80px;opacity:.23}
@media(max-width:600px){body[data-pattern="arches"] .brand-world:before{mask-size:360px 360px}body[data-pattern="pinstripe"] .brand-world:before{background-size:26px 100%;background-image:linear-gradient(90deg,transparent 25px,var(--on-field) 25px 26px)}}

/* Hero composition study: a clear field and one localised product backdrop. */
body[data-pattern="backdrop"] .hero-art:before{content:"";position:absolute;width:148%;aspect-ratio:1;left:58%;top:53%;transform:translate(-50%,-50%);border-radius:50%;background:color-mix(in srgb,var(--on-field) 9%,var(--field));z-index:-1;pointer-events:none}
body[data-pattern="backdrop"][data-mode="dark"] .hero-art:before{background:color-mix(in srgb,var(--on-field) 7.5%,var(--field))}
@media(max-width:720px){body[data-pattern="backdrop"] .hero-art:before{width:155%;left:61%;top:67%}}

/* Two further shapes in the same palette and product-led composition. */
body[data-pattern="panel"] .hero-art:before,body[data-pattern="angle"] .hero-art:before{content:"";position:absolute;background:color-mix(in srgb,var(--on-field) 9%,var(--field));z-index:-1;pointer-events:none}
body[data-pattern="panel"][data-mode="dark"] .hero-art:before,body[data-pattern="angle"][data-mode="dark"] .hero-art:before{background:color-mix(in srgb,var(--on-field) 7.5%,var(--field))}
body[data-pattern="panel"] .hero-art:before{width:108%;height:153%;left:3%;top:-22%;border-radius:290px 290px 30px 30px;transform:rotate(-9deg)}
body[data-pattern="angle"] .hero-art:before{width:160%;height:170%;left:-11%;top:-34%;clip-path:polygon(25% 0,100% 0,100% 100%,0 100%)}
@media(max-width:720px){body[data-pattern="panel"] .hero-art:before{width:108%;height:132%;left:0;top:1%;border-radius:210px 210px 25px 25px;transform:rotate(-7deg)}body[data-pattern="angle"] .hero-art:before{width:160%;height:135%;left:-12%;top:0;clip-path:polygon(25% 0,100% 0,100% 100%,0 100%)}}