/* Version 0.2 — original studio art direction and interactive concept scenes */
.hero-kicker{font-size:.84rem!important;color:var(--acid)!important;letter-spacing:.012em;max-width:370px!important;margin:-10px 0 17px!important}
.showcase-art{min-height:550px;display:flex;flex-direction:column;justify-content:center;gap:11px;isolation:isolate}
.showcase-art::before{content:"";position:absolute;width:420px;height:420px;border:1px dashed rgba(216,249,115,.18);border-radius:50%;top:3%;right:-15%;z-index:-1}
.live-art-label,.showcase-controls{display:flex;align-items:center;justify-content:space-between;gap:13px;font:700 .62rem/1.4 ui-monospace,monospace;letter-spacing:.09em;color:#afc4c3}
.live-art-label .lab-counter{color:var(--acid)}.status-dot{width:8px;height:8px;border-radius:50%;background:var(--acid);box-shadow:0 0 0 4px #d8f97319;margin-right:4px;display:inline-block}
.showcase-canvas{padding:20px;background:linear-gradient(140deg,#222c31,#10181b);border:1px solid #41534e;border-radius:23px;box-shadow:0 30px 80px #0008;transform:perspective(1000px) rotateY(-3deg) rotateX(2deg);transition:transform .4s}
.showcase-canvas:hover{transform:perspective(1000px) rotateY(0) rotateX(0)}.showcase-window{height:365px;position:relative;border-radius:12px;overflow:hidden;background:#e7e9d8}
.window-chrome{position:absolute;z-index:5;left:0;right:0;top:0;height:30px;background:#e8ebe2;color:#56615a;display:flex;justify-content:space-between;align-items:center;gap:8px;padding:0 15px;font:600 .54rem ui-monospace,monospace}.window-dots{display:flex;gap:4px}.window-dots i{width:6px;height:6px;background:#b7c0b5;border-radius:50%}
.scene{position:absolute;inset:30px 0 0;display:none;overflow:hidden}.showcase-art[data-scene=clinic] .scene-clinic,.showcase-art[data-scene=retail] .scene-retail,.showcase-art[data-scene=dining] .scene-dining{display:block;animation:scene-enter .35s ease both}
.scene-top,.scene-bottom{position:absolute;left:7%;right:7%;z-index:2;display:flex;justify-content:space-between;align-items:center;gap:8px;font:700 .56rem ui-monospace,monospace;letter-spacing:.11em}.scene-top{top:20px}.scene-bottom{bottom:16px}.scene-main{position:absolute;z-index:2;top:23%;left:10%;width:72%}.scene-main small{display:block;font:700 .54rem ui-monospace,monospace;letter-spacing:.13em;margin-bottom:13px}.scene-main strong{display:block;font-size:clamp(2.2rem,4vw,3.55rem);font-weight:700;line-height:.97;letter-spacing:-.075em}.scene-main em{font-family:Georgia,serif;font-style:italic;font-weight:400}.scene-pill{display:inline-block;font-size:.52rem;font-weight:700;border:1px solid currentColor;padding:9px 12px;border-radius:50px;margin-top:20px}.scene-clinic{background:#e8e4d5;color:#343d31}.scene-clinic .scene-main{top:26%}.clinic-disc{position:absolute;border-radius:46% 50% 30% 55%;background:#9daa8b}.clinic-disc.one{width:45%;height:95%;right:-5%;top:8%;transform:rotate(-25deg);box-shadow:0 0 0 29px #cdd4ba}.clinic-disc.two{width:25%;height:45%;right:8%;top:36%;background:#e1d4bd;transform:rotate(27deg);opacity:.8}.scene-retail{background:#211b1b;color:#e7d5b8}.scene-retail .scene-main{top:31%}.scene-retail .scene-main strong{font-family:Georgia,serif;line-height:1.08;font-weight:400}.retail-jewel{position:absolute;width:210px;height:270px;right:0;top:12%;transform:rotate(-17deg)}.retail-chain{position:absolute;width:130px;height:220px;border:3px solid #c9a16a;border-radius:50%;left:30px;top:-55px;box-shadow:0 0 10px #d9b98460}.retail-pendant{position:absolute;width:70px;height:94px;bottom:14px;left:60px;background:linear-gradient(135deg,#f3d38e,#8b6236 65%,#dabb76);border-radius:43% 43% 55% 55%;box-shadow:inset -8px -10px 10px #64452477,0 14px 30px #0006}.scene-dining{background:#612d2c;color:#f3dfc4}.scene-dining .scene-main{top:29%}.scene-dining .scene-main strong{font-family:Georgia,serif;font-weight:400}.dining-plate{position:absolute;right:-85px;top:42px;width:280px;height:280px;border-radius:50%;background:radial-gradient(circle,#dac69e 0 36%,#f6e0b6 37% 39%,#a78564 40% 42%,#ecdfc6 43% 58%,#c5b392 59% 62%,#e4cfac 63%);box-shadow:0 20px 35px #0005}.dining-plate-inner{position:absolute;width:100px;height:55px;background:#9c493d;border-radius:50%;top:95px;left:95px;transform:rotate(-30deg);box-shadow:10px 6px #cc8e61}
.scene-tabs{display:flex;gap:6px;flex-wrap:wrap}.scene-tabs button{color:#b3c1bc;border:1px solid #42514e;background:#111c1c;border-radius:100px;font:700 .65rem ui-monospace,monospace;padding:9px 11px}.scene-tabs button[aria-pressed=true]{background:var(--acid);color:#152020;border-color:var(--acid)}.hero-art-caption{text-align:right;font-size:.61rem;color:#7e9593}
.project-shot{padding:28px}.project-shot .mini-site{width:min(100%,430px);height:255px;position:relative;border-radius:8px;overflow:hidden;box-shadow:0 20px 35px #0004;transform:rotate(-3deg);transition:transform .3s}.project:hover .mini-site{transform:rotate(0) scale(1.02)}.mini-navbar{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:17px 20px;font-size:.65rem;letter-spacing:.18em;font-weight:800;position:relative;z-index:1}.mini-navbar span{font-size:.53rem;letter-spacing:.07em}.mini-editorial{padding:18px 20px;position:relative;height:187px;overflow:hidden}.mini-editorial small{font:600 .57rem ui-monospace,monospace;letter-spacing:.12em;display:block;position:relative;z-index:1}.mini-editorial strong{display:block;font-size:2.2rem;line-height:.98;letter-spacing:-.065em;position:relative;z-index:1;margin:18px 0 21px}.mini-editorial i{position:absolute;display:block;pointer-events:none}.reviage-concept .mini-site{background:#e9e9df;color:#2e3a37}.reviage-concept .mini-editorial strong{font-family:Georgia,serif;font-weight:400}.mini-wave{width:180px;height:260px;background:linear-gradient(25deg,#50695f,#b3c1a2);border-radius:50%;transform:rotate(28deg);right:-30px;top:-44px;box-shadow:0 0 0 26px #c8cfbc}.sbm-concept .mini-site{background:#211c1d;color:#e4d1af}.sbm-concept .mini-editorial strong{font-family:Georgia,serif;font-weight:400}.mini-pendant{width:90px;height:110px;right:40px;top:16px;border-radius:48% 48% 42% 42%;background:linear-gradient(135deg,#eddaa1,#9d713d);box-shadow:0 0 0 9px #a9865040}.beauty-concept .mini-site{background:#f3e3e3;color:#764f58}.beauty-concept .mini-editorial strong{font-family:Georgia,serif;font-style:italic;font-weight:400}.mini-bloom{width:210px;height:210px;right:-40px;top:0;background:radial-gradient(circle at center,#d6a6a7 0 17%,transparent 18%),repeating-conic-gradient(#e2bcba 0 29deg,#f5dbd6 30deg 60deg);border-radius:50%;filter:blur(.4px)}.sally-concept .mini-site{background:linear-gradient(125deg,#f5ead8,#e4cfad);color:#4e3523}.sally-concept .mini-navbar{border-bottom:1px solid #b99b7133}.sally-concept .mini-navbar span{color:#725438}.sally-concept .mini-editorial strong{font-family:Georgia,serif;font-weight:400;max-width:65%;font-size:2.05rem}.sally-concept .mini-editorial small{max-width:75%;color:#6d563d}.mini-gold-orbit{width:175px;height:220px;right:-11px;top:3px;border-radius:95px 95px 18px 18px;background:radial-gradient(circle at 34% 23%,#fdf3db,#d7b88a 50%,#a77e48 95%);box-shadow:inset 0 0 0 13px #edd7b2,0 0 0 1px #ac855560;transform:rotate(-8deg)}.mini-gold-orbit::before{content:"";position:absolute;inset:26px 22px;border:1px solid #f7e8cd;border-radius:78px 78px 12px 12px}
@keyframes scene-enter{from{opacity:.3;transform:translateY(9px)}to{opacity:1;transform:none}}
@media(max-width:1050px){.showcase-canvas{padding:12px}.showcase-window{height:345px}.scene-main strong{font-size:2.7rem}.scene-main{left:8%}}
@media(max-width:800px){.showcase-art{min-height:480px;width:min(100%,590px)}.showcase-canvas{transform:none}.showcase-canvas:hover{transform:none}}
@media(max-width:580px){.showcase-art{min-height:400px;margin-top:22px}.showcase-window{height:310px}.showcase-controls{align-items:flex-start;flex-direction:column}.showcase-canvas{padding:8px}.scene-main strong{font-size:2.3rem}.retail-jewel{right:-35px;opacity:.72}.dining-plate{right:-140px}.project-shot .mini-site{height:230px}.mini-editorial strong{font-size:1.8rem}.live-art-label{font-size:.55rem}}
/* Website Machine: four distinct art directions + three layouts */
.layout-options button{flex:1}.mock-site{--industry-bg:#eee9da;--industry-ink:#334333;--industry-accent:#7d946f;--industry-paper:#d7d9c6;background:var(--industry-bg);color:var(--industry-ink);transition:background .25s,color .25s;min-height:470px;position:relative}
.mock-site[data-industry=clinic]{--industry-bg:#eee9da;--industry-ink:#334333;--industry-accent:#849b73;--industry-paper:#ccd2b8}
.mock-site[data-industry=jewellery]{--industry-bg:#262021;--industry-ink:#e7d0af;--industry-accent:#bc9866;--industry-paper:#463730}
.mock-site[data-industry=hospitality]{--industry-bg:#622d2c;--industry-ink:#f6dfbd;--industry-accent:#d9aa79;--industry-paper:#8d4c3f}
.mock-site[data-industry=professional]{--industry-bg:#ecf0f3;--industry-ink:#192d45;--industry-accent:#3c6a91;--industry-paper:#d3e0eb}
.mock-site[data-theme=dark]{filter:saturate(.9) brightness(.84)}.mock-site[data-theme=rose]{filter:sepia(.2) hue-rotate(310deg) saturate(.95)}.mock-site[data-theme=blue]{filter:hue-rotate(38deg) saturate(1.1)}
.mock-site .mock-nav{color:var(--industry-ink);border-color:color-mix(in srgb,var(--industry-ink) 15%,transparent);background:transparent}.mock-site .mock-nav strong{font-family:Georgia,serif;font-size:1.08rem;letter-spacing:-.035em}.mock-site .mock-nav span{font-size:.52rem;letter-spacing:.1em;text-transform:uppercase}.mock-site .mock-nav small{opacity:.8}
.mock-site .mock-hero{display:grid;grid-template-columns:1fr .82fr;gap:0;align-items:center;padding:5% 8% 3%;min-height:275px;color:var(--industry-ink)}.mock-site .mock-copy{position:relative;z-index:2}.mock-site .mock-copy small{font:700 .5rem ui-monospace,monospace;letter-spacing:.14em}.mock-site .mock-hero h3{font-size:clamp(1.6rem,2.7vw,2.8rem);line-height:1;letter-spacing:-.062em;font-family:Georgia,serif;font-weight:400;margin:16px 0}.mock-site .mock-hero p{font-size:.72rem;color:inherit;opacity:.8;margin:0 0 17px}.mock-site .mock-btn{background:var(--industry-ink);color:var(--industry-bg);border:1px solid var(--industry-ink);border-radius:3px;padding:9px 13px;font:700 .57rem ui-monospace,monospace;cursor:pointer}.mock-site .mock-image{height:230px;min-height:0;aspect-ratio:auto;position:relative;overflow:hidden;border-radius:2px;background:linear-gradient(140deg,var(--industry-paper),var(--industry-accent))}.mock-site .mock-image::after,.mock-site .mock-image::before{content:"";display:block;position:absolute}.mock-site .mock-image::before{width:70%;height:80%;top:-20%;right:-13%;border:24px solid var(--industry-bg);border-radius:48%;transform:rotate(-20deg);opacity:.45}.mock-site .mock-image::after{width:70%;height:55%;bottom:-27%;left:-18%;border-radius:44%;background:var(--industry-bg);opacity:.5}.mock-site .mock-image-inner{position:absolute;width:80px;height:80px;top:35%;left:33%;border:3px solid color-mix(in srgb,var(--industry-ink) 20%,transparent);border-radius:50%}
.mock-site[data-industry=jewellery] .mock-image{background:radial-gradient(circle at 55% 32%,#7c603f,#221a19 75%)}.mock-site[data-industry=jewellery] .mock-image::before{border:3px solid #e4bb73;width:48%;height:100%;top:-35%;right:26%;transform:rotate(5deg);opacity:1;box-shadow:0 0 10px #d0ac6d66}.mock-site[data-industry=jewellery] .mock-image::after{width:62px;height:94px;left:43%;top:47%;background:linear-gradient(135deg,#f7deac,#936439 65%,#e5b45d);border-radius:45% 45% 55% 55%;opacity:1;box-shadow:0 10px 25px #0007}.mock-site[data-industry=jewellery] .mock-image-inner{display:none}
.mock-site[data-industry=hospitality] .mock-image{background:#9a5143}.mock-site[data-industry=hospitality] .mock-image::before{width:200px;height:200px;top:7%;right:-25px;border-radius:50%;background:radial-gradient(circle,#d3b588 0 32%,#a37555 33% 34%,#f4dec0 35% 54%,#ba9b74 55% 60%,#e9d5b5 61%);border:0;transform:none;opacity:1}.mock-site[data-industry=hospitality] .mock-image::after{height:70px;width:70px;background:#823b34;border-radius:50%;top:36%;left:54%;opacity:1}.mock-site[data-industry=hospitality] .mock-image-inner{display:none}
.mock-site[data-industry=professional] .mock-image{background:linear-gradient(135deg,#213c58,#5b84a1);border-radius:2px}.mock-site[data-industry=professional] .mock-image::before{width:200px;height:200px;right:-55px;top:-30px;border-radius:10px;transform:rotate(30deg);border:40px solid #a4c9dd;opacity:.55}.mock-site[data-industry=professional] .mock-image::after{width:125px;height:125px;left:20px;bottom:-35px;border:1px solid #d8ecfa;border-radius:2px;transform:rotate(30deg);background:transparent;opacity:1}
.mock-signature{display:flex;justify-content:space-between;gap:12px;padding:11px 8%;border-block:1px solid color-mix(in srgb,var(--industry-ink) 15%,transparent);font:700 .52rem ui-monospace,monospace;letter-spacing:.12em}.mock-site .mock-blocks{padding:22px 8% 25px;gap:9px}.mock-site .mock-blocks article{min-height:94px;background:var(--industry-paper);border-radius:3px;color:var(--industry-ink);padding:14px}.mock-site .mock-blocks b{font-size:.69rem}.mock-site .mock-blocks p{font-size:.53rem}.mock-features{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:0 8% 25px}.mock-features:empty{display:none}.mock-feature{border:1px solid color-mix(in srgb,var(--industry-ink) 28%,transparent);padding:12px;background:color-mix(in srgb,var(--industry-paper) 70%,transparent);display:flex;flex-direction:column;gap:6px}.mock-feature strong{font:.7rem ui-monospace,monospace}.mock-feature span{font-size:.55rem;opacity:.8}
.mock-site[data-layout=split] .mock-hero{grid-template-columns:1fr 1fr;min-height:310px;padding:0}.mock-site[data-layout=split] .mock-copy{padding:20px 12%}.mock-site[data-layout=split] .mock-image{height:310px}.mock-site[data-layout=minimal] .mock-hero{grid-template-columns:1fr;padding:9% 13%;text-align:center;min-height:340px}.mock-site[data-layout=minimal] .mock-hero h3{font-size:clamp(2rem,3.8vw,3.5rem)}.mock-site[data-layout=minimal] .mock-image{display:none}.mock-site[data-layout=minimal] .mock-blocks{grid-template-columns:1fr 1fr 1fr}
.mock-site[data-device=mobile]{width:min(320px,100%);margin-inline:auto;min-height:600px;box-shadow:0 18px 45px #0005}.mock-site[data-device=mobile] .mock-nav{padding:16px}.mock-site[data-device=mobile] .mock-nav span{display:none}.mock-site[data-device=mobile] .mock-nav small{display:block}.mock-site[data-device=mobile] .mock-hero,.mock-site[data-device=mobile][data-layout=split] .mock-hero{display:flex;flex-direction:column;text-align:left;padding:20px 20px 12px;min-height:0}.mock-site[data-device=mobile] .mock-hero h3{font-size:2.1rem}.mock-site[data-device=mobile] .mock-image,.mock-site[data-device=mobile][data-layout=split] .mock-image{width:100%;height:210px;margin-top:23px;display:block}.mock-site[data-device=mobile][data-layout=minimal] .mock-image{display:none}.mock-site[data-device=mobile] .mock-blocks,.mock-site[data-device=mobile][data-layout=minimal] .mock-blocks{grid-template-columns:1fr}.mock-site[data-device=mobile] .mock-blocks article{min-height:60px}.mock-site[data-device=mobile] .mock-features{grid-template-columns:1fr}.mock-site[data-device=mobile] .mock-signature{font-size:.42rem}
.preview-feedback,.share-status{font-size:.73rem;color:#b2c9c2;margin-top:12px}.share-fallback{width:100%;margin-top:8px;min-width:0;font-size:.65rem;padding:8px;background:#182427;color:white;border:1px solid #52615e;border-radius:5px}
@media(max-width:580px){.mock-site[data-device=desktop] .mock-hero{grid-template-columns:1fr 1fr;padding:5%}.mock-site[data-device=desktop] .mock-hero h3{font-size:1.3rem}.mock-site[data-device=desktop] .mock-image{height:170px}.mock-site[data-device=desktop] .mock-blocks{grid-template-columns:repeat(3,1fr);padding:10px 5%}.mock-site[data-device=desktop] .mock-blocks article{min-height:110px;padding:8px}.mock-site[data-device=desktop] .mock-features{padding:0 5% 20px}.mock-site[data-device=desktop][data-layout=split] .mock-hero{grid-template-columns:1fr 1fr;padding:0}.mock-site[data-device=desktop][data-layout=minimal] .mock-hero{grid-template-columns:1fr;padding:25px 12%}.mock-site[data-device=desktop][data-layout=minimal] .mock-blocks{grid-template-columns:repeat(3,1fr)}}
/* QA refinements */
.showcase-art{align-items:stretch;width:100%}.showcase-canvas{width:100%;flex:none}.showcase-window{width:100%}.navlinks a.btn,.navlinks a.btn:hover{color:#111718}