:root{color-scheme:dark;--gold:#d9a956;--bg:#030407;--border:#494949}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:#f8f8f8;font-family:Arial,Helvetica,sans-serif}a{color:inherit;text-decoration:none}button,input{font:inherit}a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--gold);outline-offset:3px}.skip{position:absolute;left:-999px;top:0;z-index:200;background:#111;padding:12px}.skip:focus{left:8px}.top{height:52px;background:#020304;display:flex;align-items:center;justify-content:center;border-bottom:1px solid #383838;position:relative;z-index:5;padding:0 2.1%}.top nav{height:100%;display:flex;gap:clamp(18px,4vw,65px);align-items:center}.top nav a{font-size:12px;letter-spacing:.015em;height:100%;display:flex;align-items:center;position:relative}.top nav a:hover,.top nav a.active{color:white}.top nav a.active:after{content:"";position:absolute;bottom:0;left:0;right:0;height:2px;background:#39a1ff;box-shadow:0 0 10px #2e92ff}.outline-pill{display:inline-flex;align-items:center;justify-content:center;gap:16px;border:1px solid var(--gold);border-radius:30px;padding:13px 25px;letter-spacing:.07em;font-size:12px;background:#050507;color:white;white-space:nowrap}.outline-pill:hover{background:#d9a9561e}.enter{position:absolute;right:2%;top:8px;padding:10px 19px;font-size:10px}.home-wordmark{display:none}.menu-button{display:none}.hero{height:clamp(345px,27vw,510px);position:relative;overflow:hidden;background:#010206}.hero-image{position:absolute;inset:0;background-image:linear-gradient(90deg,rgba(0,0,0,.25),transparent 35%,transparent 70%,rgba(0,0,0,.3)),url('assets/hero-atmosphere.webp');background-size:cover;background-position:center center}.hero-overlay{position:relative;z-index:1;display:flex;justify-content:space-between;height:100%;pointer-events:none}.hero-overlay a{pointer-events:auto}.left-side{width:29%;display:flex;flex-direction:column;justify-content:space-between;padding:24px 0 20px 3%;background:linear-gradient(90deg,#000b,transparent)}.disciplines-label{border-left:1px solid #c7c7c7;padding-left:19px;margin:0;font-size:12px;letter-spacing:.12em;line-height:1.85}.hero-copy h1{font-family:Georgia,'Times New Roman',serif;font-weight:400;font-size:clamp(25px,2.75vw,47px);line-height:1.05;white-space:nowrap;margin:0 0 18px}.hero-copy p{font-size:clamp(10px,1vw,15px);letter-spacing:.23em;line-height:1.3;white-space:nowrap;margin:0 0 18px}.showreel{display:inline-flex;align-items:center;gap:16px;font-size:12px;letter-spacing:.17em}.play{width:45px;height:45px;border:1px solid var(--gold);border-radius:50%;display:grid;place-items:center;font-size:12px}.right-side{display:flex;align-items:flex-end;justify-content:flex-end;gap:14px;padding:0 2.5% 45px 0;width:28%;background:linear-gradient(270deg,#0007,transparent)}.right-side p{font-size:12px;line-height:1.9;letter-spacing:.09em;border-left:1px solid #aaa;padding-left:13px;white-space:nowrap}.studio-chip{font-size:12px;color:#e6bd80;white-space:nowrap;margin-bottom:78px}.disciplines{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));border-top:1px solid #bbb;border-bottom:1px solid #666}.tile{height:clamp(155px,12.3vw,220px);position:relative;display:flex;flex-direction:column;justify-content:flex-end;padding:0 13px 17px;overflow:hidden;border-right:1px solid #777;background:#030408}.tile:before{content:"";position:absolute;inset:0;background-image:linear-gradient(0deg,#000 0%,#000b 21%,transparent 64%),var(--image);background-size:cover;background-position:center;transition:transform .3s}.tile:hover:before{transform:scale(1.06)}.tile>*{position:relative;z-index:1}.tile strong{font-size:clamp(12px,1.2vw,17px);font-weight:500;margin-bottom:8px}.tile small{font-size:clamp(9px,.85vw,12px);line-height:1.15;letter-spacing:.01em}.circle{position:absolute;right:12px;bottom:21px;border:1px solid var(--gold);border-radius:50%;height:35px;width:35px;display:grid;place-items:center;font-size:23px}.feature-grid{display:grid;grid-template-columns:29% 37% 34%;min-height:360px;border-bottom:1px solid #555}.vision{padding:30px 6% 24px 13%;background:linear-gradient(130deg,#010101 40%,#081324);display:flex;flex-direction:column;align-items:flex-start}.eyebrow{font-size:11px;letter-spacing:.15em}.vision h2{font-family:Georgia,'Times New Roman',serif;font-size:clamp(29px,2.6vw,46px);line-height:1.03;font-weight:400;margin:10px 0 15px}.vision h2 em,.below h2 em{color:var(--gold);font-style:normal}.vision p{font-size:clamp(12px,.95vw,15px);line-height:1.5;max-width:390px;margin:0 0 22px}.vision .outline-pill{margin-top:auto}.studio-image{background:linear-gradient(0deg,#0008,transparent),url('assets/studio-scene.webp') center/cover;display:flex;align-items:center;justify-content:center;overflow:hidden}.studio-image img{width:74%;mix-blend-mode:screen;filter:drop-shadow(0 0 18px #0875b2);opacity:.92}.sidebar{border-left:1px solid #5a5a5a;display:flex;flex-direction:column}.featured{padding:16px 20px 20px;flex:1}.section-bar{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;gap:8px}.section-bar h2{font-size:13px;font-weight:500;letter-spacing:.04em;margin:0}.section-bar a{font-size:11px;white-space:nowrap}.project-thumbs,.project-captions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.project-thumbs a{min-width:0;position:relative;border:1px solid #555;background:#000;overflow:hidden}.project-thumbs img{width:100%;height:clamp(85px,8vw,135px);object-fit:cover;display:block}.project-thumbs strong{position:absolute;bottom:0;left:0;right:0;background:#000b;padding:4px;font-size:11px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.project-captions{margin-top:9px}.project-captions span{font-size:clamp(8px,.7vw,11px);letter-spacing:.03em;line-height:1.3}.newsletter{border-top:1px solid #555;padding:17px 20px}.newsletter h2{font:normal 20px Georgia,serif;margin:0 0 8px}.newsletter p{font-size:12px;margin:0 0 9px}.newsletter form{display:flex;gap:9px}.newsletter input{background:#171719;border:1px solid #444;border-radius:30px;color:white;padding:12px 16px;min-width:0;flex:1;font-size:12px}.newsletter button{padding:11px 17px;cursor:pointer}.newsletter .form-note{margin-top:8px;color:var(--gold);min-height:1em}.below{padding:80px 5%;border-bottom:1px solid #30343a;scroll-margin-top:65px}.below h2{font:normal clamp(38px,5vw,70px)/1.05 Georgia,serif;margin:12px 0 25px}.below>p,.split p{max-width:700px;color:#d2d2d5;line-height:1.7}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:35px}.cards article{border:1px solid #35383c;background:#080b11;padding-bottom:25px}.cards img{width:100%;height:210px;object-fit:cover}.cards h3,.cards p{margin:15px 20px}.cards p{font-size:14px;color:#ccc}.services-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.services-grid p{border-top:1px solid var(--gold);padding-top:15px}.services-grid small{color:#bbb;line-height:1.8}.split{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:40px}.split img{width:100%;max-height:330px;object-fit:cover}.email-link{font-size:clamp(18px,3vw,32px);border-bottom:1px solid var(--gold);overflow-wrap:anywhere}footer{display:flex;justify-content:space-between;gap:20px;padding:25px 5%;font-size:10px;letter-spacing:.1em;color:#bbb}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(max-width:1100px){.top nav{gap:20px}.top nav a{font-size:11px}.enter{right:1%;font-size:9px}.right-side{display:none}.left-side{width:45%}.feature-grid{grid-template-columns:1fr 1fr}.sidebar{grid-column:1/-1;display:grid;grid-template-columns:1.2fr 1fr}.newsletter{border-top:0;border-left:1px solid #555}.vision{padding-left:7%}}@media(max-width:700px){.top{height:59px;justify-content:space-between;padding:0 16px}.home-wordmark{display:block;font-size:13px;letter-spacing:.08em}.home-wordmark b{color:var(--gold)}.menu-button{display:block;border:1px solid #555;background:#080a0e;color:white;padding:10px;border-radius:4px;font-size:12px}.top nav{display:none;position:absolute;top:59px;left:0;right:0;height:auto;background:#05070b;border-bottom:1px solid var(--gold);padding:15px;flex-direction:column;align-items:stretch;gap:0}.top nav.open{display:flex}.top nav a{height:auto;padding:13px}.top nav a.active:after{display:none}.enter{display:none}.hero{height:500px}.hero-image{background-size:auto 100%;background-position:center}.hero-overlay{background:linear-gradient(0deg,#000e,transparent 65%)}.left-side{width:100%;padding:25px 22px 30px;background:none}.disciplines-label{font-size:10px;line-height:1.5}.hero-copy h1{font-size:34px}.hero-copy p{font-size:10px}.disciplines{grid-template-columns:repeat(2,1fr)}.tile{height:185px}.tile strong{font-size:16px}.tile small{font-size:10px}.feature-grid{display:block}.vision{min-height:340px;padding:35px 24px}.vision h2{font-size:41px}.studio-image{height:280px}.sidebar{display:block}.featured{padding:20px 12px}.project-thumbs img{height:100px}.newsletter{border-left:0;border-top:1px solid #555;padding:24px 12px}.newsletter form{flex-wrap:wrap}.newsletter input{flex-basis:100%}.newsletter button{width:100%}.below{padding:65px 22px}.cards,.services-grid,.split{grid-template-columns:1fr}.cards img{height:220px}footer{flex-direction:column}.studio-chip{display:none}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.tile:before{transition:none}} /* Approved cinematic mockup refinement: desktop and tablet */ :root{--gold:#c5a66d;--silver:#dbe2ea;--electric:#4c9bd8} .top{background:#03060b;border-bottom-color:#253140} .top nav a{transition:color .2s ease} .top nav a:hover{color:#b7dbff} .outline-pill{border-color:var(--gold);transition:background .2s ease,border-color .2s ease,transform .2s ease} .outline-pill:hover{border-color:#f0d49c;transform:translateY(-1px)} .hero{min-height:410px;height:clamp(410px,37vw,620px)} .hero-image{background-position:center 47%;background-color:#02070e} .hero-overlay{background:linear-gradient(90deg,rgba(1,4,10,.42),transparent 46%,rgba(1,4,10,.16))} .hero-copy h1{text-shadow:0 3px 24px rgba(0,0,0,.85)} .studio-image img{object-fit:contain;filter:drop-shadow(0 0 24px rgba(45,143,221,.42))} .tile{isolation:isolate} .tile:focus-visible{outline:3px solid #86c8ff;outline-offset:-3px} @media(max-width:1100px){.top{justify-content:space-between}.top nav{gap:clamp(9px,1.7vw,22px)}.top nav a{font-size:10px}.enter{position:static;margin-left:14px}.hero{min-height:420px}} @media(max-width:700px){.hero{height:520px;min-height:520px}.hero-image{background-size:cover;background-position:55% center}.hero-overlay{background:linear-gradient(0deg,rgba(0,0,0,.92),rgba(0,0,0,.1) 76%)}.top{position:relative}.top nav{max-height:calc(100vh - 59px);overflow-y:auto}.tile{min-height:190px}.hero-copy h1{font-size:clamp(31px,8vw,44px)}} /* 2026-10-15 mockup fidelity and readability pass */ .hero-overlay{isolation:isolate} .hero-copy{max-width:min(410px,90vw);padding:12px 14px 12px 0;background:linear-gradient(90deg,rgba(0,0,0,.58),rgba(0,0,0,0));text-shadow:0 2px 10px #000} .hero-copy h1{white-space:normal;font-size:clamp(26px,3.1vw,48px);line-height:1.06;overflow-wrap:normal} .hero-copy p{white-space:normal;letter-spacing:.14em;line-height:1.5} .left-side{position:relative;z-index:2;min-width:0} .disciplines-label{background:linear-gradient(90deg,#0008,transparent);width:max-content;max-width:100%} .tile{padding:0 12px 18px;min-width:0} .tile:after{content:"";position:absolute;inset:45% 0 0;background:linear-gradient(0deg,rgba(0,0,0,.86),transparent);pointer-events:none} .tile strong,.tile small,.tile .circle{z-index:2} .tile strong{font-size:clamp(12px,1.2vw,16px);line-height:1.15;margin-bottom:7px;padding-right:25px;overflow-wrap:anywhere} .tile small{display:block;max-width:calc(100% - 30px);font-size:clamp(9px,.83vw,12px);line-height:1.3;overflow-wrap:anywhere} .circle{right:8px;bottom:15px;width:31px;height:31px;font-size:19px} .feature-grid{min-width:0} .feature-grid>*{min-width:0} .vision h2{overflow-wrap:normal;line-height:1.08} .studio-image{min-width:0;min-height:330px} .studio-image .asset-pending{max-width:100%} .sidebar{min-width:0} .project-thumbs a{display:block} .project-thumbs strong{font-size:10px} @media(min-width:1101px){.feature-grid{grid-template-columns:minmax(0,32%) minmax(0,34%) minmax(0,34%)}.vision{padding:30px 6% 28px 8%}.hero-copy{max-width:480px}} @media(min-width:701px) and (max-width:1100px){.left-side{width:48%}.hero-copy h1{font-size:clamp(27px,3.6vw,43px)}.disciplines{grid-template-columns:repeat(3,minmax(0,1fr))}.tile{min-height:190px}.tile strong{font-size:15px}.tile small{font-size:11px}.feature-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}} @media(max-width:700px){.hero-copy{max-width:100%;padding-right:5px}.hero-copy h1{font-size:clamp(30px,8.5vw,42px)}.hero-copy p{font-size:10px;letter-spacing:.09em}.disciplines-label{line-height:1.7}.tile{padding:0 13px 17px}.tile strong{font-size:15px}.tile small{font-size:10px}.vision h2{font-size:clamp(34px,9vw,43px)}.studio-image{min-height:280px}} /* Regional Gems staging: retain production site styling */ #regional-gems{padding:clamp(36px,6vw,88px) 5%;background:#090d16;color:#f4f4f7;overflow:hidden}#regional-gems h2{font-size:clamp(44px,8vw,110px);line-height:1.05;margin:12px 0}#regional-gems .eyebrow{letter-spacing:.17em;font-size:11px;text-transform:uppercase}#regional-gems p{max-width:950px;line-height:1.7}#regional-gems .pill{display:inline-block;padding:12px 18px;border:1px solid #c6a574;border-radius:40px;margin:8px 8px 8px 0}#regional-gems .rg-vick-art img{max-width:100%}#regional-gems button:focus-visible,#regional-gems a:focus-visible{outline:3px solid #9bd5ff;outline-offset:3px} /* Regional Gems: make the active map destination visible after a click or keyboard selection. */ #regional-gems .pin.selected circle{fill:#f4d28d;stroke:#fff;stroke-width:3;filter:drop-shadow(0 0 12px #5dbbff)} #regional-gems .pin.selected text{fill:#fff;font-weight:700} #regional-gems .pin:focus-visible circle{stroke:#fff;stroke-width:4} @media (prefers-reduced-motion:reduce){#regional-gems .pin.selected circle{filter:none}} /* Regional Gems editorial entrance / map destination */ #fashion .rg-fashion-entry{display:inline-flex;align-items:center;gap:18px;margin-top:22px;padding:13px 20px;border:1px solid #d8b77b;border-radius:999px;color:#f4d59c;background:#121924;font-size:12px;font-weight:700;letter-spacing:.11em;transition:background .2s,border-color .2s} #fashion .rg-fashion-entry:hover{background:#283b53;border-color:#fff} #regional-gems .rg-portal{position:relative;isolation:isolate;margin:36px 0 50px;border:1px solid #9d8254;border-radius:20px;overflow:hidden;background:radial-gradient(circle at 79% 48%,#214d70 0%,#0b1b2f 29%,#070b14 66%);box-shadow:0 28px 90px #0008} #regional-gems .rg-portal:before{content:"";position:absolute;inset:0;z-index:-1;opacity:.26;background-image:linear-gradient(#9ec9e412 1px,transparent 1px),linear-gradient(90deg,#9ec9e412 1px,transparent 1px);background-size:36px 36px} #regional-gems .rg-portal-top,#regional-gems .rg-portal-bottom{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:18px clamp(20px,4vw,44px);font-size:10px;letter-spacing:.19em;color:#d7bf94} #regional-gems .rg-portal-top{border-bottom:1px solid #c5ad7740} #regional-gems .rg-portal-bottom{border-top:1px solid #c5ad7740} #regional-gems .rg-portal-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(240px,.7fr);gap:16px;align-items:center;min-height:390px;padding:clamp(28px,5vw,70px)} #regional-gems .rg-portal-kicker{color:#80c7fa;font-size:12px;letter-spacing:.2em} #regional-gems .rg-portal h3{font:normal clamp(35px,5vw,74px)/1.05 Georgia,serif;letter-spacing:-.035em;margin:20px 0;color:#fff} #regional-gems .rg-portal h3 em{color:#eac78c} #regional-gems .rg-portal-grid p{max-width:550px} #regional-gems .rg-portal-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px} #regional-gems .rg-portal-actions a{display:inline-flex;align-items:center;justify-content:center;gap:14px;min-height:46px;padding:12px 19px;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.1em} #regional-gems .rg-portal-primary{background:#e8c48b;color:#111} #regional-gems .rg-portal-secondary{border:1px solid #9cbbd5;color:#e7f4ff} #regional-gems .rg-portal-actions a:hover{filter:brightness(1.12)} #regional-gems .rg-portal-emblem{display:grid;place-items:center;position:relative;min-height:290px} #regional-gems .rg-portal-orbit{width:min(25vw,245px);height:min(25vw,245px);min-width:180px;min-height:180px;border:1px solid #e6c58b;border-radius:50%;box-shadow:0 0 0 20px #d1a85e0c,0 0 0 50px #7fc5fc0a,inset 0 0 50px #2d8dd733;transform:rotate(-22deg)} #regional-gems .rg-portal-orbit:before,#regional-gems .rg-portal-orbit:after{content:"";position:absolute;inset:24px;border:1px dashed #87c6ef88;border-radius:50%} #regional-gems .rg-portal-orbit:after{inset:66px;border-style:solid;border-color:#e7ca86aa} #regional-gems .rg-portal-jewel{position:absolute;font-size:clamp(95px,13vw,170px);line-height:1;color:#e9cb8e;text-shadow:0 0 38px #77caff,0 0 65px #c79e53} #regional-gems .rg-portal-coordinate{position:absolute;bottom:-10px;right:0;text-align:right;color:#a8d4f3;font-size:10px;letter-spacing:.15em;line-height:1.8} #regional-gems .rg-map-stage{scroll-margin-top:20px;padding:clamp(16px,3vw,32px);border:1px solid #a68b59;border-radius:22px;background:linear-gradient(140deg,#101b2c,#080d17);margin:40px 0} #regional-gems .rg-map-heading{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap} #regional-gems .rg-map-heading h3{font:normal clamp(27px,3.6vw,46px) Georgia,serif;margin:10px 0;color:#f8f2e7} #regional-gems .rg-map-heading h3 em{color:#e7c68e} #regional-gems .rg-map-heading>p{max-width:350px;color:#c5d2de;font-size:14px} #regional-gems .rg-map-stage .rg-night-map{margin:24px 0 0} @media(max-width:780px){#regional-gems .rg-portal-grid{grid-template-columns:1fr;padding:28px 24px}#regional-gems .rg-portal-emblem{min-height:220px}#regional-gems .rg-portal-orbit{width:180px;height:180px}#regional-gems .rg-portal-jewel{font-size:115px}#regional-gems .rg-portal-coordinate{right:8px;bottom:0}#regional-gems .rg-portal-top,#regional-gems .rg-portal-bottom{font-size:9px}#regional-gems .rg-map-heading{align-items:start}} @media(prefers-reduced-motion:reduce){#fashion .rg-fashion-entry{transition:none}} /* Regional Gems city atlas detail panel */ #regional-gems .rg-night-map .rg-city-panel{display:flex;flex-direction:column;justify-content:center;gap:10px;padding:clamp(22px,3vw,38px);background:linear-gradient(160deg,#142c42,#0a101c)} #regional-gems .rg-city-panel h3{font:normal clamp(28px,3vw,43px)/1.12 Georgia,serif;margin:0;color:#f3d79e} #regional-gems .rg-city-index{font-size:10px;letter-spacing:.18em;color:#86c8ee} #regional-gems .rg-city-panel #rg-city-story{font-size:14px;line-height:1.7;margin:6px 0} #regional-gems .rg-city-tags{display:flex;flex-wrap:wrap;gap:7px} #regional-gems .rg-city-tags span{padding:7px 10px;border:1px solid #9bbbd766;border-radius:999px;font-size:9px;letter-spacing:.09em;color:#cbe6f9} #regional-gems .rg-city-panel .rg-city-disclaimer{font-size:11px;line-height:1.5;color:#d7c5a6;margin:6px 0} #regional-gems .rg-city-controls{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px} #regional-gems .rg-city-controls button{flex:1;min-width:100px;padding:12px 10px;border:1px solid #c6a979;border-radius:999px;background:#0a1829;color:#f2d8a7;font-size:10px;font-weight:700;letter-spacing:.07em;cursor:pointer} #regional-gems .rg-city-controls button:hover{background:#28415a;color:#fff} #regional-gems .rg-city-controls button:last-child{background:#d5b57e;color:#0a1220} /* Regional Gems: clearly explained visitor discovery journey */ #regional-gems .rg-discovery-path{margin:26px 0 34px;padding:clamp(22px,4vw,40px);border:1px solid #9d8155;border-radius:20px;background:linear-gradient(120deg,#101a29,#080b12)} #regional-gems .rg-path-heading{display:flex;justify-content:space-between;align-items:end;gap:18px;flex-wrap:wrap;margin-bottom:22px} #regional-gems .rg-path-heading h3{font:normal clamp(28px,3.5vw,45px)/1.12 Georgia,serif;margin:0;color:#f8f0df} #regional-gems .rg-path-heading h3 em{color:#e4c38a} #regional-gems .rg-path-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px} #regional-gems .rg-path-steps article{padding:24px 20px;border:1px solid #c8ad764d;border-radius:14px;background:#152336} #regional-gems .rg-path-number{color:#a7d7f9;font-size:11px;letter-spacing:.18em} #regional-gems .rg-path-steps h4{font:normal clamp(22px,2.4vw,30px) Georgia,serif;color:#f4d69b;margin:18px 0 8px} #regional-gems .rg-path-steps p{font-size:14px;color:#d4dce5;margin:0} #regional-gems .rg-path-note{font-size:12px;color:#c7b99f;margin:18px 0 0} @media(max-width:720px){#regional-gems .rg-path-steps{grid-template-columns:1fr}} /* Regional Gems atlas viewport controls */ #regional-gems .rg-atlas-controls{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;margin:20px 0 10px;padding:16px 20px;border:1px solid #b5a07466;border-radius:15px;background:#0c1a29} #regional-gems .rg-atlas-controls p{margin:6px 0 0;font-size:12px;color:#d0dce7} #regional-gems .rg-zoom-buttons{display:flex;align-items:center;gap:7px;flex-wrap:wrap} #regional-gems .rg-zoom-buttons button{min-width:40px;min-height:40px;padding:8px 12px;border:1px solid #c6a979;border-radius:10px;background:#182d41;color:#f2d49e;font-weight:700;cursor:pointer} #regional-gems .rg-zoom-buttons button:hover{background:#29465e} #regional-gems .rg-zoom-buttons output{display:inline-block;min-width:52px;text-align:center;color:#fff;font-size:12px} #regional-gems .rg-night-map svg{touch-action:none;cursor:grab} #regional-gems .rg-night-map svg:active{cursor:grabbing} #regional-gems .rg-night-map .pin{cursor:pointer} /* Regional Gems destination postcards — original CSS artwork, not designer photography */ #regional-gems .rg-city-identity{height:100px;display:flex;align-items:center;gap:20px;position:relative;overflow:hidden;border-top:1px solid #d5c18a45;border-bottom:1px solid #d5c18a45;background:radial-gradient(circle at 15% 50%,#e7bf5a24,transparent 60%)} #regional-gems .rg-city-identity>span:first-child{font:italic 72px/.9 Georgia,serif;letter-spacing:-.09em;color:#e9d19b;text-shadow:0 0 20px #c9a96680;position:relative;z-index:1} #regional-gems .rg-city-identity-lines{position:absolute;inset:0;background:repeating-linear-gradient(130deg,transparent 0 20px,#d3b78122 21px 22px,transparent 23px 42px);mask-image:linear-gradient(90deg,transparent,#000)} #regional-gems .rg-city-postcard{display:flex;flex-direction:column;gap:8px;margin:8px 0;padding:22px 18px;border:1px solid #d5b7827d;border-radius:12px;background:linear-gradient(140deg,#1d3e5a,#0a1929);box-shadow:inset 0 0 36px #80c3ee0c} #regional-gems .rg-postcard-label{font-size:9px;letter-spacing:.19em;color:#d9c39b} #regional-gems .rg-city-postcard strong{font:italic clamp(24px,2.6vw,35px)/1.15 Georgia,serif;color:#fff} #regional-gems .rg-city-postcard #rg-city-subline{font-size:12px;color:#c4d9e7} #regional-gems .rg-city-panel[data-city-theme="no"] .rg-city-postcard{background:linear-gradient(140deg,#51362b,#17172b)} #regional-gems .rg-city-panel[data-city-theme="ny"] .rg-city-postcard{background:linear-gradient(140deg,#27394c,#111825)} #regional-gems .rg-city-panel[data-city-theme="mia"] .rg-city-postcard{background:linear-gradient(140deg,#17565b,#18253b)} #regional-gems .rg-city-panel[data-city-theme="atl"] .rg-city-postcard{background:linear-gradient(140deg,#483049,#171b2c)} #regional-gems .rg-city-panel[data-city-theme="la"] .rg-city-postcard{background:linear-gradient(140deg,#59462d,#1c2030)} /* Original Regional Gems luxury flagship: CSS-built boutique, no third-party image */ #regional-gems .rg-flagship{margin:60px 0;padding:clamp(16px,3vw,34px);border:1px solid #c4a368;border-radius:22px;background:linear-gradient(145deg,#131419,#08090d);scroll-margin-top:24px} #regional-gems .rg-flagship-header{display:flex;justify-content:space-between;align-items:center;gap:25px;flex-wrap:wrap;margin-bottom:28px} #regional-gems .rg-flagship-header>div{max-width:680px} #regional-gems .rg-flagship-header h3{font:normal clamp(34px,4.8vw,66px)/1.08 Georgia,serif;color:#f5f0e8;margin:12px 0} #regional-gems .rg-flagship-header h3 em{color:#e5c58b} #regional-gems .rg-flagship-header p{color:#c8c6c3} #regional-gems .rg-flagship-stamp{padding:12px 16px;border:1px solid #bca173;border-radius:2px;color:#dfc08b;font-size:10px;line-height:1.8;letter-spacing:.15em;text-align:center} #regional-gems .rg-boutique{position:relative;overflow:hidden;isolation:isolate;min-height:480px;border:1px solid #806741;background:linear-gradient(90deg,#08090a,#24201e 48%,#08090a);box-shadow:inset 0 0 100px #000,0 18px 40px #0008} #regional-gems .rg-boutique:before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(120deg,transparent 8%,#b7833c38 9%,transparent 10%,transparent 90%,#b7833c38 91%,transparent 92%),radial-gradient(ellipse at 50% 48%,#f5b54e18,transparent 65%)} #regional-gems .rg-boutique-ceiling{height:56px;border-bottom:2px solid #bf813b;box-shadow:0 4px 17px #ecae55a0,inset 0 -12px 28px #d6933d1f;background:repeating-linear-gradient(90deg,#0c0c0e 0 55px,#1a1817 56px 58px,#0c0c0e 60px 110px)} #regional-gems .rg-boutique-interior{display:grid;grid-template-columns:1fr 1.18fr 1fr;gap:clamp(8px,2vw,24px);align-items:stretch;padding:30px clamp(12px,3vw,42px) 70px;min-height:360px} #regional-gems .rg-boutique-wall{display:grid;grid-template-rows:1fr 1fr;gap:16px} #regional-gems .rg-boutique-center{display:flex;flex-direction:column;align-items:stretch;gap:28px} #regional-gems .rg-boutique-sign{text-align:center;padding:20px 8px;color:#f1e1c1;font:normal clamp(17px,2.6vw,34px) Georgia,serif;letter-spacing:.11em;text-shadow:0 0 18px #e8af56} #regional-gems .rg-boutique-sign em{color:#dcb574} #regional-gems .rg-boutique-sign small{display:block;margin-top:9px;font:normal 9px sans-serif;letter-spacing:.22em} #regional-gems .rg-display{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;min-height:110px;width:100%;padding:20px 10px;border:2px solid #9b7546;border-bottom:5px solid #bd8a4a;border-radius:2px;background:linear-gradient(180deg,#e4aa5c36,#261d16 24%,#171211 80%,#d79b4d20);box-shadow:inset 0 15px 23px #f3b66144,inset 0 -12px 18px #0008,0 0 0 7px #0a0a0b;cursor:pointer;color:#f2d7a9;transition:transform .2s,border-color .2s,box-shadow .2s} #regional-gems .rg-display:hover,#regional-gems .rg-display[aria-pressed="true"]{transform:translateY(-3px);border-color:#ffe5ae;box-shadow:inset 0 15px 26px #f4bd6770,0 0 20px #e4a94a88,0 0 0 7px #0a0a0b} #regional-gems .rg-display:focus-visible{outline:3px solid #a6dbff;outline-offset:5px} #regional-gems .rg-display-light{position:absolute;top:0;left:10%;right:10%;height:2px;background:#ffd08c;box-shadow:0 0 16px 5px #efb665} #regional-gems .rg-display-symbol{font:normal clamp(30px,4vw,54px)/1 Georgia,serif;color:#f4d69e;text-shadow:0 0 22px #e8a84a} #regional-gems .rg-display>span:last-child{font-size:clamp(9px,1vw,12px);font-weight:700;letter-spacing:.13em;text-align:center} #regional-gems .rg-display-feature{flex:1;min-height:195px} #regional-gems .rg-boutique-floor{position:absolute;bottom:0;left:0;right:0;height:68px;background:linear-gradient(180deg,#c6b8a8,#eee0cd 24%,#938678 100%);transform-origin:bottom;box-shadow:0 -8px 22px #edcb9e4d} #regional-gems .rg-boutique-floor span{display:block;height:100%;background:repeating-linear-gradient(100deg,transparent 0 145px,#77685b66 146px 148px,transparent 149px 240px);opacity:.65} #regional-gems .rg-showroom-info{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;margin-top:22px;padding:24px;border:1px solid #a98853;background:#111b25} #regional-gems .rg-showroom-info>div{max-width:720px} #regional-gems .rg-showroom-info h4{font:normal clamp(24px,3vw,36px) Georgia,serif;color:#f2d7a3;margin:10px 0} #regional-gems .rg-showroom-info p{color:#d4dce3} #regional-gems #rg-showroom-reset{padding:13px 17px;border:1px solid #d1ad70;border-radius:999px;background:transparent;color:#f0d2a1;font-size:11px;font-weight:700;letter-spacing:.09em;cursor:pointer} #regional-gems .rg-showroom-legal{font-size:11px;color:#c9bdab;margin:18px 0 0} @media(max-width:690px){#regional-gems .rg-boutique{min-height:360px}#regional-gems .rg-boutique-interior{grid-template-columns:1fr 1.1fr 1fr;gap:7px;padding:18px 10px 60px;min-height:300px}#regional-gems .rg-boutique-wall{gap:9px}#regional-gems .rg-display{padding:10px 4px;min-height:95px;gap:8px}#regional-gems .rg-display-feature{min-height:150px}#regional-gems .rg-display>span:last-child{font-size:8px;letter-spacing:.03em}#regional-gems .rg-boutique-sign{padding:8px 0}#regional-gems .rg-boutique-sign small{font-size:7px}} @media(prefers-reduced-motion:reduce){#regional-gems .rg-display{transition:none}} /* Map-to-showroom arrival: clear wayfinding and a more architectural boutique */ #regional-gems .rg-enter-showroom{display:flex;justify-content:space-between;align-items:center;gap:15px;padding:17px 19px;margin:14px 0 0;border:1px solid #efcb88;border-radius:9px;background:linear-gradient(100deg,#cba363,#f1d5a0);color:#11151c;font-size:12px;font-weight:800;letter-spacing:.1em;box-shadow:0 7px 24px #0005;transition:transform .2s,filter .2s} #regional-gems .rg-enter-showroom:hover{transform:translateY(-2px);filter:brightness(1.08)} #regional-gems .rg-entry-context{font-size:11px;color:#c7c0b5;margin:5px 0 8px} #regional-gems .rg-arrival{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:14px 18px;margin-bottom:14px;border:1px solid #8e7044;background:linear-gradient(90deg,#0c0e14,#21222a,#0c0e14);color:#e5c58c} #regional-gems .rg-arrival-label{font-size:10px;letter-spacing:.18em} #regional-gems .rg-arrival strong{font:normal clamp(19px,2.7vw,31px) Georgia,serif;letter-spacing:.07em;color:#fff1d1} #regional-gems #rg-arrival-note{font-size:10px;color:#c4b5a1} #regional-gems .rg-boutique{background:radial-gradient(ellipse at 50% 0%,#c69c5433,transparent 53%),linear-gradient(90deg,#090a0b 0%,#252322 16%,#0e0e11 49%,#252322 84%,#090a0b 100%)} #regional-gems .rg-boutique:after{content:"";pointer-events:none;position:absolute;inset:0;border:14px solid transparent;border-image:linear-gradient(135deg,#a37a41,#141313 30%,#b88b4c 65%,#131313) 1;opacity:.52} #regional-gems .rg-boutique-ceiling{background:repeating-linear-gradient(90deg,#0a0a0d 0 65px,#977245 66px 68px,#0a0a0d 70px 130px);box-shadow:inset 0 -13px 20px #bd8e4d44,0 4px 28px #e5af5b5e} #regional-gems .rg-boutique-floor{background:linear-gradient(180deg,#d6c3a8 0%,#f3e8d7 30%,#b8a994 100%)} #regional-gems .rg-boutique-floor:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 43%,#77634d5c 43.2%,transparent 43.4%,transparent 57%,#77634d5c 57.2%,transparent 57.4%)} @media(prefers-reduced-motion:reduce){#regional-gems .rg-enter-showroom{transition:none}} /* Gallery-grade showroom visual pass: original CSS sculptural fashion objects */ #regional-gems .rg-boutique-interior{perspective:850px} #regional-gems .rg-boutique-wall-left{transform:rotateY(8deg);transform-origin:right center} #regional-gems .rg-boutique-wall-right{transform:rotateY(-8deg);transform-origin:left center} #regional-gems .rg-boutique-center{transform:translateZ(16px)} #regional-gems .rg-display{overflow:hidden;isolation:isolate;background:radial-gradient(ellipse at 50% 4%,#f2c77e55,transparent 58%),linear-gradient(90deg,#0b0a0b,#322720 52%,#0b0a0b);border-width:3px;box-shadow:inset 0 19px 28px #f4bd6960,inset 0 -19px 18px #050404,0 0 0 7px #08090b} #regional-gems .rg-display:before{content:"";position:absolute;inset:9px 8px 19px;border-left:1px solid #bda17a66;border-right:1px solid #bda17a66;background:linear-gradient(90deg,#fff1cc0b,transparent 28%,#fff2d110 70%,#fff1cc08);pointer-events:none} #regional-gems .rg-display:after{content:"";position:absolute;bottom:26px;left:16%;right:16%;height:8px;border-radius:50%;background:#0009;filter:blur(6px);pointer-events:none} #regional-gems .rg-display-light{z-index:2} #regional-gems .rg-art-object{position:relative;display:block;flex:1;min-height:58px;width:min(75%,150px);max-height:120px;margin:4px auto 0;filter:drop-shadow(9px 10px 6px #0008);transform:translateZ(8px)} #regional-gems .rg-art-object:before{content:"";position:absolute;left:50%;top:4px;transform:translateX(-50%);width:24%;height:15%;border-radius:50% 50% 44% 44%;background:linear-gradient(110deg,#e7d8b8,#aa9676 65%,#66563f);box-shadow:0 0 0 2px #e8c99b55} #regional-gems .rg-art-object>span{position:absolute;left:14%;right:14%;top:18%;bottom:0;background:linear-gradient(110deg,#17191f,#46444c 35%,#14161c 68%,#08090e);clip-path:polygon(30% 0,42% 5%,58% 5%,70% 0,100% 24%,83% 43%,76% 31%,90% 100%,10% 100%,24% 31%,17% 43%,0 24%);border-radius:8px} #regional-gems .rg-art-story>span{background:linear-gradient(110deg,#3d2228,#9a5552 35%,#3e252c 68%,#22161e)} #regional-gems .rg-art-lookbook>span{background:linear-gradient(110deg,#ded4c2,#f5e9d8 38%,#b0a38d 70%,#776d5c);clip-path:polygon(30% 0,45% 7%,55% 7%,70% 0,92% 18%,78% 40%,70% 32%,96% 100%,4% 100%,30% 32%,22% 40%,8% 18%)} #regional-gems .rg-art-collection{max-height:180px} #regional-gems .rg-art-collection>span{background:linear-gradient(105deg,#151b2c,#5b6987 38%,#111725 70%,#090b14);clip-path:polygon(25% 0,43% 7%,57% 7%,75% 0,100% 24%,83% 40%,76% 29%,87% 100%,13% 100%,24% 29%,17% 40%,0 24%)} #regional-gems .rg-art-craft>span{background:linear-gradient(110deg,#725736,#d6af72 35%,#86663e 70%,#43301e);clip-path:polygon(26% 0,43% 7%,57% 7%,74% 0,93% 20%,80% 40%,72% 30%,80% 100%,20% 100%,28% 30%,20% 40%,7% 20%)} #regional-gems .rg-art-connect>span{background:linear-gradient(110deg,#1a3c41,#477d80 38%,#1c3f45 70%,#10252b)} #regional-gems .rg-display>span:last-child{position:relative;z-index:3;padding:5px 8px;background:#08090cc9;border-top:1px solid #a6855280;color:#f4ddad;text-shadow:0 1px 2px #000} #regional-gems .rg-display-feature .rg-art-object{min-height:120px} #regional-gems .rg-boutique-floor{height:75px;background:linear-gradient(180deg,#a99478,#eee1cf 25%,#c0ae99 100%)} #regional-gems .rg-boutique-floor span{background:repeating-linear-gradient(103deg,transparent 0 110px,#7a69584d 111px 112px,transparent 113px 190px)} @media(max-width:690px){#regional-gems .rg-boutique-wall-left,#regional-gems .rg-boutique-wall-right,#regional-gems .rg-boutique-center{transform:none}#regional-gems .rg-art-object{min-height:55px;max-height:90px;width:85%}#regional-gems .rg-display-feature .rg-art-object{min-height:90px}#regional-gems .rg-display>span:last-child{padding:4px 2px;font-size:8px}} /* Studio ForEver original logo takes the fashion-house flagship position */ #regional-gems .rg-boutique-sign{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-height:110px;padding:9px 5px 13px;background:radial-gradient(ellipse at center,#c99b5028,transparent 70%);border-bottom:1px solid #bb93565e} #regional-gems .rg-boutique-sign img{display:block;width:min(100%,135px);max-height:88px;object-fit:contain;filter:drop-shadow(0 0 10px #d6b17b6b)} #regional-gems .rg-boutique-brand{font:normal clamp(13px,1.9vw,23px) Georgia,serif;letter-spacing:.14em;color:#f3e1be;text-shadow:0 0 10px #e4b46a6b} #regional-gems .rg-boutique-brand em{color:#dcb574} #regional-gems .rg-boutique-sign small{font:normal clamp(7px,.8vw,9px) sans-serif;letter-spacing:.11em;color:#e4cda8} @media(max-width:690px){#regional-gems .rg-boutique-sign{min-height:100px;padding:5px 2px}#regional-gems .rg-boutique-sign img{width:85%;max-height:55px}#regional-gems .rg-boutique-brand{font-size:10px;letter-spacing:.04em}#regional-gems .rg-boutique-sign small{font-size:6px;letter-spacing:0}} /* Boutique wayfinding and guided tour: touch-first, keyboard-friendly */ #regional-gems .rg-flagship-wayfinding{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 0 16px;color:#d6c19c;font-size:10px;letter-spacing:.11em} #regional-gems .rg-flagship-wayfinding a{display:inline-block;padding:11px 14px;border:1px solid #c2a16e;border-radius:999px;color:#f1d6a8;text-decoration:none} #regional-gems .rg-flagship-wayfinding a:hover{background:#a7864830} #regional-gems .rg-showroom-actions{display:flex;flex-wrap:wrap;gap:9px;align-items:center} #regional-gems .rg-showroom-actions button{min-height:44px;padding:12px 15px;border:1px solid #d1ad70;border-radius:999px;background:#1c2835;color:#f0d2a1;font-size:10px;font-weight:700;letter-spacing:.07em;cursor:pointer} #regional-gems .rg-showroom-actions button:hover{background:#32465b} #regional-gems .rg-showroom-actions button:focus-visible,#regional-gems .rg-flagship-wayfinding a:focus-visible{outline:3px solid #a6dbff;outline-offset:3px} @media(max-width:690px){#regional-gems .rg-showroom-actions{width:100%}#regional-gems .rg-showroom-actions button{flex:1 1 130px}#regional-gems .rg-flagship-wayfinding{font-size:9px}} /* Regional Gems is a website-within-the-website, not another service. */ body.rg-world-active{background:#07090e} body.rg-world-active main > :not(#regional-gems){display:none} body.rg-world-active > footer{display:none} body.rg-world-active #regional-gems{min-height:calc(100vh - 52px);padding-top:clamp(25px,4vw,54px);border-top:0} body.rg-world-active .top{border-bottom-color:#ad8955;box-shadow:0 2px 25px #c99b3b23} #regional-gems .rg-world-bar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin:0 0 28px;padding:12px 0 18px;border-bottom:1px solid #bda07455;color:#e3cfac;font-size:10px;letter-spacing:.11em} #regional-gems .rg-world-bar>span{color:#c7b28e} #regional-gems .rg-world-bar>span span{padding:0 5px;color:#bda074} #regional-gems .rg-world-home{display:inline-flex;align-items:center;min-height:44px;padding:12px 16px;border:1px solid #c1a16d;border-radius:99px;color:#f3dcb5;text-decoration:none} #regional-gems .rg-world-home:hover{background:#c1a16d24} #regional-gems .rg-world-home:focus-visible{outline:3px solid #a6dbff;outline-offset:3px} @media(max-width:690px){#regional-gems .rg-world-bar{align-items:flex-start;flex-direction:column;letter-spacing:.04em}body.rg-world-active #regional-gems{padding-top:20px}} /* Two independent destinations inside one Regional Gems world */ #regional-gems .rg-two-worlds{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:stretch;margin:22px 0 12px} #regional-gems .rg-two-worlds .rg-portal-primary{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:110px;padding:17px 16px;border:1px solid #e3bd80;border-radius:12px;background:linear-gradient(135deg,#d6ae70,#f0d7a9);color:#0a101a;box-shadow:0 10px 25px #0007;text-decoration:none} #regional-gems .rg-two-worlds .rg-flagship-choice{background:linear-gradient(135deg,#121924,#26384d);color:#f4ddb5;border-color:#d8b478} #regional-gems .rg-two-worlds .rg-portal-primary>span:nth-child(2){flex:1;font-size:11px;font-weight:800;letter-spacing:.08em;line-height:1.4} #regional-gems .rg-two-worlds .rg-portal-primary small{display:block;margin-top:8px;font-size:9px;font-weight:400;letter-spacing:.05em;line-height:1.5} #regional-gems .rg-two-worlds .rg-choice-icon{font:normal 30px Georgia,serif} #regional-gems .rg-two-worlds .rg-portal-primary:hover{filter:brightness(1.12);transform:translateY(-2px)} #regional-gems .rg-two-worlds .rg-portal-primary:focus-visible{outline:3px solid #a6dbff;outline-offset:4px} #regional-gems .rg-designer-side-link{display:inline-block;margin:3px 0 10px;padding:10px 0;color:#e6c58d;font-size:10px;letter-spacing:.09em;text-decoration:underline;text-underline-offset:5px} @media(max-width:850px){#regional-gems .rg-two-worlds{grid-template-columns:1fr}#regional-gems .rg-two-worlds .rg-portal-primary{min-height:86px}} @media(prefers-reduced-motion:reduce){#regional-gems .rg-two-worlds .rg-portal-primary{transition:none}} /* Regional Gems fashion-world editorial entrance: original collage using existing Studio ForEver assets */ #regional-gems .rg-world-editorial{position:relative;overflow:hidden;isolation:isolate;margin:25px 0 36px;padding:28px 20px 17px;border:1px solid #b9925d;border-radius:20px;background:linear-gradient(120deg,#090b11,#151e2e 53%,#090b11);box-shadow:0 22px 70px #0009} #regional-gems .rg-world-editorial:before{content:"";position:absolute;inset:0 0 34%;z-index:-2;background:linear-gradient(90deg,#05070dd9 0%,#08090b45 25%,#14131b30 75%,#05070dd9 100%),url("assets/fashion.webp") center 37%/cover no-repeat;opacity:.85} #regional-gems .rg-world-editorial:after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 50% 35%,#d4a35d3b,transparent 50%),linear-gradient(0deg,#080a10 0%,transparent 52%)} #regional-gems .rg-world-editorial-copy{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:380px;text-align:center;color:#f4e5cb;text-shadow:0 2px 16px #000} #regional-gems .rg-world-editorial-copy>span:first-child{font-size:10px;letter-spacing:.34em;color:#f4d3a0} #regional-gems .rg-world-diamond{font:normal 68px/1 Georgia,serif;color:#e8c58a;filter:drop-shadow(0 0 12px #ffcf7b)} #regional-gems .rg-world-editorial-copy strong{font:normal clamp(40px,7.2vw,112px)/1.04 Georgia,serif;letter-spacing:-.055em;color:#fff3df} #regional-gems .rg-world-editorial-copy strong em{color:#eacb95} #regional-gems .rg-world-edition{margin-top:12px;font-size:12px;letter-spacing:.38em} #regional-gems .rg-world-editorial-copy p{margin:17px 0;font:italic clamp(20px,3vw,36px) Georgia,serif;color:#f6dcae} #regional-gems .rg-world-caption{font-size:10px;letter-spacing:.19em;color:#e6d6c2} #regional-gems .rg-world-city-strip{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin-top:15px} #regional-gems .rg-world-city-card{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:150px;gap:5px;padding:12px 9px;border:1px solid #a58a66;border-radius:10px;overflow:hidden;background:#0b1521;color:#fff2da;box-shadow:inset 0 -60px 35px #000b} #regional-gems .rg-world-city-card:before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,#04060de8,transparent 85%),var(--rg-city-image) center/cover;opacity:.95;transition:transform .3s} #regional-gems .rg-world-city-card strong{font:normal clamp(13px,1.4vw,20px) Georgia,serif;line-height:1.1} #regional-gems .rg-world-city-card span{font-size:9px;letter-spacing:.08em} #regional-gems .rg-world-city-nola{--rg-city-image:linear-gradient(145deg,#be6c2a,#341d24 65%,#090e1b)} #regional-gems .rg-world-city-ny{--rg-city-image:linear-gradient(145deg,#547ca2,#162d46 60%,#101018)} #regional-gems .rg-world-city-miami{--rg-city-image:linear-gradient(145deg,#a4448c,#1c4b73 55%,#100c22)} #regional-gems .rg-world-city-atl{--rg-city-image:linear-gradient(145deg,#805738,#192a4d 55%,#0b101c)} #regional-gems .rg-world-city-la{--rg-city-image:linear-gradient(145deg,#bb7d4d,#38415d 60%,#14111e)} #regional-gems .rg-world-city-dc{--rg-city-image:linear-gradient(145deg,#785b8d,#24304c 60%,#0c0d19)} #regional-gems .rg-world-editorial-disclaimer{margin:12px 0 0;color:#d1c0a6;font-size:10px;text-align:center} @media(max-width:900px){#regional-gems .rg-world-city-strip{grid-template-columns:repeat(3,minmax(0,1fr))}#regional-gems .rg-world-city-card{min-height:130px}} @media(max-width:530px){#regional-gems .rg-world-editorial{padding:20px 11px}#regional-gems .rg-world-editorial-copy{min-height:300px}#regional-gems .rg-world-city-strip{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}#regional-gems .rg-world-city-card{min-height:112px}#regional-gems .rg-world-editorial-copy strong{font-size:40px}} @media(prefers-reduced-motion:reduce){#regional-gems .rg-world-city-card:before{transition:none}} /* Photographic editorial city panels: existing Studio ForEver archive assets only. Images are atmospheric, NOT asserted to depict named cities or enrolled designers. */ #regional-gems .rg-world-city-card{isolation:isolate;background:#080c14} #regional-gems .rg-world-city-card:before{z-index:0;background:linear-gradient(0deg,#04060ef5 0%,#06071045 65%,#05070a33 100%),var(--rg-city-photo) var(--rg-city-position,center)/cover no-repeat;opacity:.92;filter:saturate(.88) contrast(1.09)} #regional-gems .rg-world-city-card:after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;border:1px solid #e3b96c3d;box-shadow:inset 0 0 25px #0007} #regional-gems .rg-world-city-card strong,#regional-gems .rg-world-city-card span{position:relative;z-index:1} #regional-gems .rg-world-city-nola{--rg-city-photo:url("assets/community.webp");--rg-city-position:38% center} #regional-gems .rg-world-city-ny{--rg-city-photo:url("assets/fashion.webp");--rg-city-position:48% center} #regional-gems .rg-world-city-miami{--rg-city-photo:url("assets/innovation.webp");--rg-city-position:65% center} #regional-gems .rg-world-city-atl{--rg-city-photo:url("assets/music.webp");--rg-city-position:40% center} #regional-gems .rg-world-city-la{--rg-city-photo:url("assets/film.webp");--rg-city-position:55% center} #regional-gems .rg-world-city-dc{--rg-city-photo:url("assets/studio-scene.webp");--rg-city-position:50% center} #regional-gems .rg-world-editorial-copy{position:relative;z-index:1} #regional-gems .rg-world-editorial:before{z-index:0} #regional-gems .rg-world-editorial:after{z-index:0} #regional-gems .rg-world-city-strip,#regional-gems .rg-world-editorial-disclaimer{position:relative;z-index:1} /* Editorial postcards open the map, without making the boutique a required next step */ #regional-gems a.rg-world-city-card{text-decoration:none;cursor:pointer;transition:transform .2s,border-color .2s,box-shadow .2s} #regional-gems a.rg-world-city-card:hover{transform:translateY(-5px);border-color:#f7d9a2;box-shadow:0 10px 24px #000b,inset 0 -60px 35px #000b} #regional-gems a.rg-world-city-card:focus-visible{outline:3px solid #b9e4ff;outline-offset:4px} #regional-gems .rg-city-enter{margin-top:7px;color:#f6d8a4;font-size:9px;font-weight:700;letter-spacing:.1em} @media(prefers-reduced-motion:reduce){#regional-gems a.rg-world-city-card{transition:none}} /* Regional Gems polish: richer editorial atmosphere and touch-first city discovery */ #regional-gems .rg-world-editorial{background-image:radial-gradient(circle at 50% 18%,#bd955b20,transparent 54%),linear-gradient(120deg,#090b11,#151e2e 53%,#090b11)} #regional-gems .rg-world-city-card{min-height:174px;box-shadow:0 12px 25px #0008,inset 0 -60px 35px #000b} #regional-gems .rg-world-city-card:before{transition:transform .45s ease,filter .45s ease} #regional-gems .rg-world-city-card:is(:hover,:focus-visible):before{transform:scale(1.08);filter:saturate(1.12) contrast(1.1)} #regional-gems .rg-city-enter{display:inline-flex;align-self:flex-start;border-bottom:1px solid #e4c18a90;padding-bottom:4px} #regional-gems .rg-world-city-card:is(:hover,:focus-visible) .rg-city-enter{color:#fff;border-bottom-color:#fff} @media(max-width:900px){#regional-gems .rg-world-city-card{min-height:164px}} @media(max-width:530px){#regional-gems .rg-world-city-card{min-height:144px}#regional-gems .rg-world-city-card strong{font-size:17px}#regional-gems .rg-world-city-card span{font-size:10px}} @media(prefers-reduced-motion:reduce){#regional-gems .rg-world-city-card:before{transition:none}#regional-gems .rg-world-city-card:is(:hover,:focus-visible):before{transform:none}} /* Luxury flagship spatial refinement: architectural lighting and accessible exhibits */ #regional-gems .rg-boutique{position:relative;isolation:isolate;overflow:hidden;box-shadow:inset 0 22px 45px #0009,0 24px 64px #0008;border:1px solid #bba0788c} #regional-gems .rg-boutique:before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse at 50% 20%,#ffe3a929,transparent 42%),linear-gradient(90deg,#03050870,transparent 20%,transparent 80%,#03050870)} #regional-gems .rg-boutique-interior{position:relative;z-index:1} #regional-gems .rg-boutique-sign{filter:drop-shadow(0 0 14px #d5ac5b48)} #regional-gems .rg-display{position:relative;transition:transform .25s ease,box-shadow .25s ease,filter .25s ease} #regional-gems .rg-display:is(:hover,:focus-visible){transform:translateY(-4px);filter:brightness(1.12);box-shadow:0 0 0 1px #e8ca8c,0 0 25px #e6b85a4a} #regional-gems .rg-display:focus-visible{outline:3px solid #b5e8ff;outline-offset:4px} #regional-gems .rg-display-light{filter:drop-shadow(0 0 10px #e9c67c)} #regional-gems .rg-boutique-floor{background-image:linear-gradient(90deg,#fff1cc0c 1px,transparent 1px),linear-gradient(#fff1cc0c 1px,transparent 1px),linear-gradient(180deg,#b5a28a18,#eee2d42c 62%,#080a10);background-size:22% 100%,100% 32%,100% 100%} @media(prefers-reduced-motion:reduce){#regional-gems .rg-display{transition:none}#regional-gems .rg-display:is(:hover,:focus-visible){transform:none}} /* Flagship arrival: layered architectural depth, without heavy 3D motion */ #regional-gems .rg-flagship{position:relative} #regional-gems .rg-flagship-header{position:relative;z-index:1} #regional-gems .rg-boutique{perspective:1100px;background:radial-gradient(ellipse at 50% 12%,#f5dca71c,transparent 53%),linear-gradient(130deg,#0a0b0f,#211c1b 48%,#0b0b11)} #regional-gems .rg-boutique-interior{transform:translateZ(0);transform-style:preserve-3d} #regional-gems .rg-boutique-wall{background-image:linear-gradient(90deg,#f7dfac0d 1px,transparent 1px),linear-gradient(180deg,#b68b4d14,transparent 32%);background-size:28% 100%,100% 100%;box-shadow:inset 0 0 32px #0009} #regional-gems .rg-boutique-center{position:relative} #regional-gems .rg-boutique-center:before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 3%,#f9d79635,transparent 58%)} #regional-gems .rg-boutique-sign{position:relative;z-index:1} #regional-gems .rg-boutique-floor{position:relative;box-shadow:inset 0 22px 24px #0004} #regional-gems .rg-boutique-floor:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,transparent 20%,#fff8e80c 50%,transparent 80%)} #regional-gems .rg-flagship-stamp{letter-spacing:.09em} @media(max-width:680px){#regional-gems .rg-boutique{perspective:none}#regional-gems .rg-boutique-interior{transform:none}} @media(prefers-reduced-motion:reduce){#regional-gems .rg-boutique-interior{transform:none}} /* 2026-10-16 iPad Safari visual checkpoint: keep existing imagery, clarify city-card labels. */ #regional-gems .rg-world-city-card{ justify-content:flex-end; gap:6px; padding:16px 13px 14px; text-shadow:0 2px 8px #000,0 1px 3px #000; } #regional-gems .rg-world-city-card:after{ background:linear-gradient(to top,rgba(2,4,10,.94) 0%,rgba(2,4,10,.86) 42%,rgba(2,4,10,.2) 77%,transparent 100%); } #regional-gems .rg-world-city-card strong{ font-size:clamp(15px,1.55vw,20px); line-height:1.2; letter-spacing:.015em; } #regional-gems .rg-world-city-card span{ font-size:clamp(10px,1vw,12px); line-height:1.35; letter-spacing:.045em; } #regional-gems .rg-world-city-card .rg-city-enter{ margin-top:5px; font-size:clamp(10px,1vw,12px); line-height:1.3; } @media(max-width:900px){ #regional-gems .rg-world-city-card{min-height:182px} } @media(max-width:530px){ #regional-gems .rg-world-city-card{min-height:166px;padding:13px 11px} #regional-gems .rg-world-city-card strong{font-size:16px} #regional-gems .rg-world-city-card span, #regional-gems .rg-world-city-card .rg-city-enter{font-size:10px} } /* 2026-10-16 Regional Gems navigation polish: visible map arrival and touch feedback. */ #regional-gems #rg-map-experience, #regional-gems #rg-flagship, #regional-gems #rg-invite-title{scroll-margin-top:88px} #regional-gems .rg-world-city-card, #regional-gems .rg-portal-primary{-webkit-tap-highlight-color:rgba(231,195,135,.22);touch-action:manipulation} #regional-gems a.rg-world-city-card:active{transform:scale(.985);border-color:#ffe0a5} #regional-gems .rg-world-city-card:focus-visible{outline:3px solid #aee5ff;outline-offset:3px} @media(prefers-reduced-motion:reduce){#regional-gems a.rg-world-city-card:active{transform:none}} /* Regional Gems | living night atlas, original CSS-only atmospheric enhancement. Keep all city pins, atlas controls, boutique art and original Studio ForEver assets. */ #regional-gems .rg-night-map{position:relative;isolation:isolate;background:radial-gradient(ellipse at 65% 35%,#193b59 0%,#09192b 42%,#03060e 88%);box-shadow:inset 0 0 90px #02030c,0 20px 54px #0008} #regional-gems .rg-night-map:before{content:"";position:absolute;inset:0 33.333% 0 0;pointer-events:none;z-index:0;opacity:.48;background-image:radial-gradient(circle,#d9efff 0 1px,transparent 1.8px),radial-gradient(circle,#f2c989 0 1px,transparent 2px),radial-gradient(circle,#79bfff 0 1px,transparent 2px);background-size:83px 79px,127px 109px,57px 113px;background-position:12px 24px,42px 62px,18px 39px;animation:rgNightShimmer 8s ease-in-out infinite alternate} #regional-gems .rg-night-map svg{position:relative;z-index:1;filter:drop-shadow(0 0 12px #2576a333)} #regional-gems .rg-night-map .land{fill:#0d2437;stroke:#bc9a63;stroke-width:1.8;filter:drop-shadow(0 0 9px #236a9e55)} #regional-gems .rg-night-map .route{stroke:#86d5ff;stroke-width:1.9;stroke-dasharray:2 10;filter:drop-shadow(0 0 5px #4dafff);animation:rgmove 16s linear infinite,rgRouteBreathe 4.5s ease-in-out infinite alternate} #regional-gems .rg-night-map .pin circle{fill:#ffe0a0;stroke:#fff9dc;filter:drop-shadow(0 0 5px #ffda7e) drop-shadow(0 0 13px #5cbfff)} #regional-gems .rg-night-map .pin:is(:hover,:focus-visible) circle,#regional-gems .rg-night-map .pin.selected circle{filter:drop-shadow(0 0 8px #ffe0a0) drop-shadow(0 0 20px #65cfff);stroke:#fff;stroke-width:4} #regional-gems .rg-night-map .pin text{font-weight:700;letter-spacing:.05em;paint-order:stroke;stroke:#06101e;stroke-width:4} #regional-gems .rg-night-map .rg-city-panel{position:relative;z-index:2} @keyframes rgNightShimmer{from{opacity:.24;transform:translateY(0)}to{opacity:.56;transform:translateY(-5px)}} @keyframes rgRouteBreathe{from{opacity:.42}to{opacity:.95}} @media(max-width:800px){#regional-gems .rg-night-map:before{inset:0 0 45%}} @media(prefers-reduced-motion:reduce){#regional-gems .rg-night-map:before,#regional-gems .rg-night-map .route{animation:none}#regional-gems .rg-night-map:before{opacity:.35}} /* Regional Gems | city-to-flagship arrival lighting, driven by selected atlas city. */ #regional-gems .rg-flagship{--rg-arrival-glow:#5fbaff;transition:border-color .3s ease} #regional-gems .rg-arrival{position:relative;isolation:isolate;overflow:hidden;border-color:color-mix(in srgb,var(--rg-arrival-glow) 52%,#a78c64);box-shadow:inset 0 0 36px color-mix(in srgb,var(--rg-arrival-glow) 12%,transparent)} #regional-gems .rg-arrival:before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 50% 30%,color-mix(in srgb,var(--rg-arrival-glow) 23%,transparent),transparent 68%)} #regional-gems .rg-arrival strong,#regional-gems #rg-arrival-city{text-shadow:0 0 24px color-mix(in srgb,var(--rg-arrival-glow) 70%,transparent)} #regional-gems .rg-flagship .rg-boutique-ceiling{box-shadow:0 4px 20px color-mix(in srgb,var(--rg-arrival-glow) 35%,#ecae55),inset 0 -12px 28px #d6933d1f;transition:box-shadow .35s ease} @media(prefers-reduced-motion:reduce){#regional-gems .rg-flagship,#regional-gems .rg-flagship .rg-boutique-ceiling{transition:none}} /* Regional Gems | focused city spotlight: visual selection without changing city data. */ #regional-gems .rg-night-map{--rg-map-spotlight:#5fbaff} #regional-gems .rg-night-map[data-selected-city="no"]{--rg-map-spotlight:#ffbd83} #regional-gems .rg-night-map[data-selected-city="ny"]{--rg-map-spotlight:#b4d8ff} #regional-gems .rg-night-map[data-selected-city="mia"]{--rg-map-spotlight:#6be4d7} #regional-gems .rg-night-map[data-selected-city="atl"]{--rg-map-spotlight:#e5a1de} #regional-gems .rg-night-map[data-selected-city="la"]{--rg-map-spotlight:#f1cc88} #regional-gems .rg-night-map .pin.selected circle{fill:var(--rg-map-spotlight);stroke:#fff;stroke-width:4;filter:drop-shadow(0 0 8px var(--rg-map-spotlight)) drop-shadow(0 0 19px var(--rg-map-spotlight))} #regional-gems .rg-night-map .pin.selected text{fill:#fff8e7;font-weight:800;filter:drop-shadow(0 0 7px var(--rg-map-spotlight))} #regional-gems .rg-night-map .pin:not(.selected){opacity:.76;transition:opacity .25s ease} #regional-gems .rg-night-map .pin:not(.selected):is(:hover,:focus-visible){opacity:1} #regional-gems .rg-night-map .rg-city-panel{border-left:2px solid var(--rg-map-spotlight);box-shadow:inset 12px 0 28px -22px var(--rg-map-spotlight)} #regional-gems .rg-night-map .rg-city-index{color:var(--rg-map-spotlight)} @media(max-width:800px){#regional-gems .rg-night-map .rg-city-panel{border-left:0;border-top:2px solid var(--rg-map-spotlight)}} @media(prefers-reduced-motion:reduce){#regional-gems .rg-night-map .pin:not(.selected){transition:none}} /* Restored production-approved website services and billing styles */ /* Restore original approved photographic treatment */ .hero-image{background-image:linear-gradient(90deg,rgba(0,0,0,.36),transparent 42%,rgba(0,0,0,.12)),url('assets/hero-atmosphere.webp');background-position:center center;background-size:cover} .hero-image:after{content:none} .tile:before{background-image:linear-gradient(0deg,#000 0%,#000a 30%,transparent 78%),var(--image)} .studio-image{background:linear-gradient(0deg,#0008,transparent),url('assets/studio-scene.webp') center/cover} .studio-image img{display:block;width:min(84%,520px);max-height:85%;object-fit:contain;mix-blend-mode:screen;filter:drop-shadow(0 0 22px #0875b2)} .project-thumbs img{display:block;width:100%;height:clamp(85px,8vw,135px);object-fit:cover} .cards img{display:block;width:100%;height:210px;object-fit:cover} @media(min-width:701px) and (max-width:1100px){.top{gap:12px}.top nav{gap:clamp(8px,1.5vw,18px)}.top nav a{font-size:10px}.enter{padding:10px 13px;font-size:9px}.hero{height:clamp(430px,48vw,570px)}.hero-copy{max-width:400px}} @media(max-width:700px){.hero-image{background-position:54% center}.hero-overlay{background:linear-gradient(0deg,#000d,transparent 76%)}.hero-copy h1{font-size:clamp(30px,8vw,42px)}.studio-image img{max-height:240px}} /* Tablet, mobile, and accessibility finishing pass */ html{scroll-padding-top:65px}section[id],article[id],.featured[id]{scroll-margin-top:65px} :focus-visible{outline:2px solid var(--gold);outline-offset:4px} @media(hover:hover){.project-thumbs a:hover img,.cards article:hover img{transform:scale(1.035)}.project-thumbs img,.cards img{transition:transform .25s ease}.outline-pill:hover,.showreel:hover{color:#ffe0a1}} @media(min-width:701px) and (max-width:1100px){.top{justify-content:space-between;padding:0 2%}.home-wordmark{display:block;font-size:11px;letter-spacing:.12em;white-space:nowrap}.top nav{gap:clamp(7px,1.2vw,15px)}.top nav a{font-size:10px}.enter{position:static;padding:9px 12px;font-size:9px}.hero{height:clamp(400px,46vw,520px)}.left-side{width:45%}.right-side{width:25%;padding-right:2%}.studio-chip{display:none}.right-side p{font-size:10px}.vision{padding:28px 7%}.studio-image{min-height:330px}.sidebar{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);border-left:0;border-top:1px solid #555}.newsletter{border-top:0;border-left:1px solid #555}.project-thumbs img{height:130px}} @media(max-width:700px){.hero{min-height:490px}.hero-overlay{align-items:stretch}.left-side{width:70%;padding:18px 0 24px 5%}.right-side{width:27%;padding:0 3% 24px 0}.right-side p{font-size:9px;line-height:1.6}.studio-chip{display:none}.hero-copy h1{font-size:clamp(30px,8vw,43px)}.hero-copy p{font-size:10px}.disciplines{grid-template-columns:repeat(2,minmax(0,1fr))}.tile{min-height:180px}.feature-grid{grid-template-columns:1fr}.vision{padding:36px 7%}.studio-image{min-height:310px}.sidebar{border-left:0;border-top:1px solid #555}.newsletter form{flex-wrap:wrap}.newsletter input{flex-basis:180px}.below{padding:58px 6%}} @media(max-width:390px){.right-side{display:none}.left-side{width:95%}.hero-copy h1{font-size:33px}.project-thumbs strong{font-size:9px}} @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}} /* Single featured fashion film: responsive YouTube player */ .fashion-video{width:100%;min-width:0;display:flex;flex-direction:column;gap:12px;align-self:center}.fashion-video iframe{display:block;width:100%;aspect-ratio:16/9;height:auto;border:1px solid #655338;border-radius:10px;background:#050507;box-shadow:0 12px 38px #0008}.fashion-video>a{align-self:flex-start;border:1px solid var(--gold);border-radius:24px;padding:10px 18px;font-size:12px;letter-spacing:.07em}.fashion-video>a:hover{background:#d9a95622} /* Cinematic motion: respectful of touch and reduced-motion settings */ @keyframes sf-arrive{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}} @keyframes sf-light{0%,100%{transform:translateX(-40%);opacity:0}50%{transform:translateX(55%);opacity:.35}75%{opacity:0}} @media(prefers-reduced-motion:no-preference){.hero-copy h1{animation:sf-arrive .9s ease-out both}.hero-copy>p{animation:sf-arrive .9s .18s ease-out both}.hero-copy .showreel{animation:sf-arrive .9s .3s ease-out both}.hero-image:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(100deg,transparent 35%,rgba(105,170,240,.1) 50%,transparent 65%);animation:sf-light 14s ease-in-out infinite}.tile:before{transition:transform .7s ease,filter .5s ease}.tile:hover:before,.tile:focus-visible:before{transform:scale(1.06);filter:brightness(1.15)}.outline-pill,.play,.fashion-video>a{transition:box-shadow .3s ease,transform .3s ease}.outline-pill:hover,.showreel:hover .play,.fashion-video>a:hover{box-shadow:0 0 22px #d9a95644;transform:translateY(-2px)}.js-motion .reveal-on-scroll{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}.js-motion .reveal-on-scroll.is-visible{opacity:1;transform:translateY(0)}} @media(prefers-reduced-motion:reduce){.reveal-on-scroll{opacity:1!important;transform:none!important}} /* Optional audio control: subtle gold, accessible on iPad and desktop */ .sound-toggle{position:absolute;left:2%;top:10px;display:inline-flex;align-items:center;gap:8px;border:1px solid #8d744a;border-radius:22px;background:#090b0e;color:#e7c68e;padding:8px 12px;font-size:10px;letter-spacing:.07em;cursor:pointer;z-index:8;white-space:nowrap}.sound-toggle[aria-pressed="true"]{border-color:var(--gold);box-shadow:0 0 12px #d9a95633}.sound-toggle:hover{background:#1a1710}.sound-toggle:focus-visible{outline:2px solid var(--gold);outline-offset:3px} @media(max-width:1100px){.sound-toggle{left:auto;right:165px;top:10px}} @media(max-width:700px){.sound-toggle{right:85px;top:10px;padding:8px;font-size:9px}} /* Media section: featured film and official channel as distinct actions */ .media-channel-link{display:inline-flex;align-items:center;margin:16px 0 0 16px;padding:10px 0;color:#e6c68e;font-size:11px;letter-spacing:.09em;border-bottom:1px solid #a48248;transition:color .2s ease,border-color .2s ease}.media-channel-link:hover{color:#fff;border-color:#fff}.media-channel-link:focus-visible{outline:2px solid var(--gold);outline-offset:4px} /* Keep in-page links visible after navigation on narrow screens */ section[id],div[id]{scroll-margin-top:64px} @media(max-width:700px){.media-channel-link{display:flex;width:max-content;margin:16px 0 0}.sound-toggle{max-width:110px}} /* iPad/tablet header collision fix: compact menu rather than squeezing eight links, sound and CTA */ @media (min-width:701px) and (max-width:1200px){ .top{height:60px;justify-content:space-between;padding:0 20px;gap:12px} .home-wordmark{display:block;flex:0 1 auto;min-width:0;font-size:12px;letter-spacing:.1em} .menu-button{display:inline-flex;align-items:center;justify-content:center;order:3;margin-left:0;border:1px solid #8d744a;border-radius:20px;padding:9px 14px;background:#080a0d;color:#f8f8f8;font-size:11px;letter-spacing:.08em;cursor:pointer} .sound-toggle{position:static;order:2;flex-shrink:0;margin-left:auto} .top nav{display:none;position:absolute;top:100%;left:0;right:0;height:auto;max-height:calc(100dvh - 60px);overflow-y:auto;background:#04070d;border-bottom:1px solid #80643a;padding:10px 20px 18px;z-index:20;flex-direction:column;align-items:stretch;gap:0} .top nav.open{display:flex} .top nav a{height:auto;min-height:42px;font-size:12px;border-bottom:1px solid #1d2b3b;padding:11px 7px} .top nav a.active:after{bottom:0} .enter{display:none} } @media (max-width:700px){.top{min-height:60px}.sound-toggle{right:90px}.menu-button{position:relative;z-index:9}} /* Narrow-phone header: avoid brand, audio and menu overlapping at 320–390px */ @media(max-width:700px){ .top{gap:8px} .home-wordmark{font-size:clamp(10px,2.8vw,13px);letter-spacing:.03em;min-width:0;white-space:nowrap} .sound-toggle{position:static;order:2;margin-left:auto;padding:8px 7px;font-size:9px;max-width:none} .menu-button{order:3;flex-shrink:0;padding:9px 8px;font-size:11px;white-space:nowrap} .top nav{top:100%;max-height:calc(100dvh - 60px);overflow-y:auto} } @media(max-width:360px){.sound-toggle{font-size:8px;gap:3px;padding:7px 5px}.menu-button{font-size:10px;padding:8px 6px}} /* Business contact links: readable and tap-friendly on all devices */ #contact .email-link,#contact .phone-link{display:table;width:max-content;max-width:100%;overflow-wrap:anywhere;margin-top:15px;line-height:1.5}#contact .phone-link{color:#e6c68e;font-size:clamp(17px,2.2vw,24px);letter-spacing:.04em;border-bottom:1px solid #a48248;padding-bottom:5px}#contact .phone-link:hover{color:#fff;border-color:#fff}@media(max-width:700px){#contact .email-link{font-size:clamp(13px,3.5vw,18px)}} /* iPad visual QA: supplied artwork already contains baked-in labels; suppress redundant HTML captions */ .tile strong,.tile small{position:relative;z-index:2;text-shadow:0 1px 8px #000;} /* Use a separate dark caption band to keep HTML navigation labels from sitting over artwork text. */ .tile{padding-bottom:0;justify-content:flex-end} .tile:after{inset:auto 0 0;height:72px;background:linear-gradient(0deg,#010307 70%,#010307dd);z-index:1} .tile strong{width:calc(100% - 45px);padding:8px 0 0;margin:0 0 3px;font-size:clamp(12px,1.15vw,16px)} .tile small{width:calc(100% - 45px);max-width:none;min-height:33px;margin-bottom:8px;font-size:clamp(9px,.8vw,11px)} .tile .circle{bottom:14px;right:8px} /* Project thumbnails: image includes project name; use the accessible HTML name without overlaying it twice. */ .project-thumbs strong{position:static;display:block;padding:7px 5px 8px;min-height:29px;background:#03060a;font-size:10px;line-height:1.2} .project-thumbs a{display:flex;flex-direction:column} .project-thumbs img{flex:1;min-height:0} @media(min-width:701px) and (max-width:1100px){.tile{min-height:215px}.tile:after{height:80px}.tile small{min-height:37px}} @media(max-width:700px){.tile{min-height:205px}.tile strong{font-size:13px}.tile small{font-size:9px}.tile:after{height:80px}} /* Cinematic motion pass 2: understated light, tactile cards, and accessible navigation */ @media (prefers-reduced-motion:no-preference){ .hero-image{animation:studio-hero-drift 24s ease-in-out infinite alternate;transform-origin:center center} @keyframes studio-hero-drift{from{transform:scale(1)}to{transform:scale(1.055)}} .tile,.project-thumbs a{transition:border-color .25s ease,box-shadow .3s ease,transform .3s ease} .tile:focus-visible,.project-thumbs a:focus-visible{outline:2px solid var(--gold);outline-offset:-3px} .tile:hover,.tile:focus-visible,.project-thumbs a:hover,.project-thumbs a:focus-visible{box-shadow:inset 0 0 0 1px #d5ad68aa,0 0 24px #2d82c422} .tile .circle{transition:transform .25s ease,border-color .25s ease,background .25s ease} .tile:hover .circle,.tile:focus-visible .circle{transform:translateX(3px);border-color:#e7c68e;background:#b28c3822} .project-thumbs a:hover img{filter:brightness(1.09)} .outline-pill:active,.menu-button:active,.sound-toggle:active{transform:scale(.98)} } @media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){ .tile:before{background-image:radial-gradient(circle at var(--glow-x,50%) var(--glow-y,50%),#b4d9ff25,transparent 55%)} } @media(prefers-reduced-motion:reduce){.hero-image,.tile,.tile:before,.project-thumbs a,.project-thumbs img,.tile .circle{animation:none!important;transition:none!important;transform:none!important}} /* Studio ForEver chrome-logo cinematic reveal. Effects sit over the ORIGINAL hero artwork. */ .logo-light-sweep,.logo-camera-flash{position:absolute;inset:0;pointer-events:none;z-index:1;opacity:0} @media(prefers-reduced-motion:no-preference){ .logo-light-sweep{background:linear-gradient(105deg,transparent 37%,rgba(67,153,255,.02) 44%,rgba(156,212,255,.3) 49%,rgba(255,222,167,.22) 51%,rgba(65,137,255,.03) 56%,transparent 63%);background-size:270% 100%;background-position:120% 0;mix-blend-mode:screen;animation:logo-chrome-sweep 13s ease-in-out 1.4s infinite} .logo-camera-flash{background:radial-gradient(ellipse 22% 37% at 51% 53%,rgba(255,255,255,.7),rgba(124,183,255,.3) 30%,transparent 100%);mix-blend-mode:screen;animation:logo-lens-flash 13s ease-out 1.4s infinite} @keyframes logo-chrome-sweep{0%,6%{opacity:0;background-position:120% 0}9%{opacity:.78}15%{opacity:.45;background-position:-20% 0}18%,100%{opacity:0;background-position:-20% 0}} @keyframes logo-lens-flash{0%,12%,15%,100%{opacity:0}13%{opacity:.5}13.6%{opacity:.12}14%{opacity:.24}} } @media(prefers-reduced-motion:reduce){.logo-light-sweep,.logo-camera-flash{display:none!important;animation:none!important}} /* Research-informed refinement: focus the animated shine on the lens/logo region, not across the entire page. CSS radial masking is supported in modern Safari. */ @supports ((mask-image:radial-gradient(white,transparent)) or (-webkit-mask-image:radial-gradient(white,transparent))){ .logo-light-sweep,.logo-camera-flash{ -webkit-mask-image:radial-gradient(ellipse 38% 59% at 51% 51%,#000 43%,transparent 100%); mask-image:radial-gradient(ellipse 38% 59% at 51% 51%,#000 43%,transparent 100%); } } /* Don't run decorative animation when tab is hidden, and avoid light leaking onto copy. */ @media(prefers-reduced-motion:no-preference){ .logo-light-sweep{background-image:linear-gradient(105deg,transparent 37%,rgba(52,130,255,.02) 44%,rgba(180,222,255,.21) 49%,rgba(245,209,141,.13) 51%,rgba(52,130,255,.02) 56%,transparent 63%)} .logo-camera-flash{background-image:radial-gradient(ellipse 14% 26% at 51% 53%,rgba(255,255,255,.55),rgba(124,183,255,.19) 36%,transparent 100%)} } /* Battery-friendly cinematic effects: pause when Safari tab is not visible. */ .hero.effects-paused .logo-light-sweep,.hero.effects-paused .logo-camera-flash,.hero.effects-paused .hero-image{animation-play-state:paused!important} /* Cinematic visitor journey: discreet gold reading progress at the very top. */ .reading-progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:100;pointer-events:none;transform:scaleX(0);transform-origin:left center;background:linear-gradient(90deg,#2769ac,#e2b86c 65%,#fff2c5);box-shadow:0 0 9px #d9a95677} @media(prefers-reduced-motion:reduce){.reading-progress{transition:none!important}} /* Fashion collection: polished original artwork placeholder after temporary video removal. */ .fashion-video{position:relative;isolation:isolate;overflow:hidden;border:1px solid #655338;border-radius:10px;background:#04070c;box-shadow:0 12px 38px #0008} .fashion-video>img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;object-position:center;filter:saturate(1.04);transition:transform .8s ease,filter .8s ease} .fashion-video:after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:linear-gradient(145deg,#3b86d011,transparent 50%,#d9a95610)} @media(hover:hover) and (prefers-reduced-motion:no-preference){.fashion-video:hover>img{transform:scale(1.025);filter:saturate(1.12)}} @media(prefers-reduced-motion:reduce){.fashion-video>img{transition:none!important}} /* Consistent launch-status signage without blocking existing links or artwork. */ .development-notice{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;padding:10px 18px;background:linear-gradient(90deg,#0d1520,#080b11);border-bottom:1px solid #a98a504d;color:#c5c8d0;font-size:12px;letter-spacing:.035em;line-height:1.5} .development-notice strong{color:#dfbd7e;font-size:11px;letter-spacing:.14em;white-space:nowrap} .development-dot{width:6px;height:6px;border-radius:50%;background:#d5ae6a;box-shadow:0 0 9px #d5ae6a66;flex:none} .project-development{display:inline-block;margin:12px 0 2px;color:#dfbd7e;font-size:10px;letter-spacing:.12em;font-weight:700} @media(max-width:700px){.development-notice{padding:9px 14px;font-size:11px}} /* Keep launch labels integrated into the existing multi-column studio grid. */ .feature-grid>.development-notice{grid-column:1/-1;grid-row:auto;position:relative;z-index:2} .featured>.development-notice{margin-bottom:12px;border:1px solid #a98a5038;border-radius:5px} .below>.development-notice{margin:-8px 0 26px;border:1px solid #a98a5038;border-radius:5px} .below.split>.development-notice{grid-column:1/-1;width:100%;margin:0 0 18px} #store>.development-notice{margin-bottom:28px} /* Future payment methods: display only, never a live checkout. */ .payments-preview{background:linear-gradient(135deg,#080e17,#0b1018 60%,#12100d);border-top:1px solid #b9955444;border-bottom:1px solid #b9955444} .payments-preview>p{max-width:760px} .payment-methods{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:24px 0} .payment-method{display:flex;align-items:center;gap:12px;padding:18px 14px;border:1px solid #bd9a574b;border-radius:9px;background:linear-gradient(145deg,#161c27,#090c12);color:#f0e8db;min-height:75px} .payment-method strong{font-size:12px;letter-spacing:.025em;font-weight:650} .payment-symbol{display:grid;place-items:center;flex:none;width:36px;height:36px;border:1px solid #cda96d88;border-radius:8px;color:#e2bb7a;font-size:20px;font-weight:700} .payments-status{color:#e2bb7a!important;font-size:12px;font-weight:700;letter-spacing:.1em} .payments-fineprint{font-size:12px;line-height:1.65;color:#a6aab4} @media(max-width:900px){.payment-methods{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:480px){.payment-methods{grid-template-columns:1fr 1fr;gap:8px}.payment-method{padding:12px 8px;gap:7px;min-height:66px}.payment-symbol{width:29px;height:29px;font-size:17px}.payment-method strong{font-size:10px}} /* Brand logos stay informational until the merchant account is activated. */ .payment-brand-icon,.payment-line-icon{display:block;flex:none;width:38px;height:38px;padding:7px;border:1px solid #cda96d88;border-radius:8px;box-sizing:border-box} .payment-brand-icon{background:#fff;object-fit:contain} .payment-line-icon{color:#e2bb7a} .store-payment-preview{margin-top:18px!important;color:#aeb4c0;font-size:12px;letter-spacing:.02em} .store-payment-preview span{color:#e0bd80;font-weight:650} @media(max-width:480px){.payment-brand-icon,.payment-line-icon{width:29px;height:29px;padding:5px}} /* Future card acceptance badges in the site footer. */ .footer-payment-preview{flex:1 0 100%;width:100%;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;padding:20px 12px 24px;margin-bottom:12px;border-bottom:1px solid #bd9a5738;box-sizing:border-box} .footer-payment-label{font-size:10px;letter-spacing:.18em;color:#e1bd80;font-weight:750} .footer-card-logos{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px} .footer-card-brand{display:flex;align-items:center;gap:7px;padding:9px 13px;background:#fff;border-radius:7px;color:#1a2230;min-height:37px;box-sizing:border-box} .footer-card-brand img{display:block;width:42px;height:24px;object-fit:contain} .footer-card-brand span{font-size:11px;font-weight:750} .footer-payment-preview small{font-size:11px;line-height:1.5;color:#aab0bb} @media(max-width:480px){.footer-card-logos{gap:7px}.footer-card-brand{padding:7px 9px}.footer-card-brand img{width:32px;height:20px}.footer-card-brand span{font-size:10px}} /* Dedicated web design service: follows the established navy / gold studio palette. */ .web-design-section{position:relative;overflow:hidden;background:radial-gradient(ellipse at 85% 0%,rgba(217,169,86,.12),transparent 52%),linear-gradient(150deg,#0a101c,#04060b 68%);border-top:1px solid rgba(217,169,86,.25);border-bottom:1px solid rgba(217,169,86,.25)} .web-design-section h2{max-width:950px} .web-design-lead{max-width:790px;line-height:1.8;color:#d4d8df;font-size:clamp(16px,1.6vw,20px);margin:22px 0 38px} .web-design-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:24px 0 42px} .web-design-grid article{padding:clamp(20px,3vw,34px);border:1px solid rgba(217,169,86,.25);background:rgba(255,255,255,.035);min-width:0} .web-design-number{color:var(--gold);letter-spacing:.15em;font-size:12px} .web-design-grid h3,.web-design-bottom h3{font-size:clamp(18px,2vw,25px);letter-spacing:.045em;margin:14px 0} .web-design-grid p,.web-design-bottom p{color:#c6cbd3;line-height:1.7;margin:0} .web-design-bottom{display:flex;justify-content:space-between;align-items:center;gap:30px;border-top:1px solid rgba(217,169,86,.3);padding-top:30px} .web-design-bottom>div{max-width:610px} .web-design-bottom .outline-pill{flex-shrink:0} @media(max-width:720px){.web-design-grid{grid-template-columns:1fr}.web-design-bottom{align-items:flex-start;flex-direction:column}.web-design-bottom .outline-pill{max-width:100%;white-space:normal;text-align:center}} /* Web-design showcase: decorative HTML/CSS artwork, no video or external dependency. */ .web-design-showcase{position:relative;isolation:isolate;min-height:380px;display:flex;align-items:center;justify-content:center;margin:10px 0 48px;padding:40px 60px 55px;background:radial-gradient(ellipse at 50% 45%,rgba(216,164,75,.19),transparent 60%),repeating-linear-gradient(90deg,transparent 0 54px,rgba(217,169,86,.035) 55px 56px);border:1px solid rgba(217,169,86,.22);overflow:hidden} .web-design-orbit{position:absolute;width:520px;height:520px;border:1px solid rgba(217,169,86,.15);border-radius:50%;box-shadow:0 0 0 70px rgba(217,169,86,.025),0 0 0 140px rgba(217,169,86,.018);animation:web-orbit 18s linear infinite} .web-design-browser{position:relative;z-index:1;width:min(690px,85%);min-height:275px;background:#090e19;border:1px solid rgba(235,195,118,.62);border-radius:12px;box-shadow:0 32px 75px #000b,0 0 45px #d9a95624;overflow:hidden;transform:perspective(1000px) rotateY(-7deg) rotateX(3deg);animation:web-browser-float 7s ease-in-out infinite} .web-design-browser-top{height:38px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 15px;background:#171c29;border-bottom:1px solid #3d3840} .web-design-dots{display:flex;gap:5px}.web-design-dots i{width:7px;height:7px;background:#d9a956;border-radius:50%;opacity:.7} .web-design-address,.web-design-live{font-size:9px;letter-spacing:.16em;color:#aeb7c7}.web-design-live{color:#eac381} .web-design-screen{min-height:240px;padding:20px 26px;background:radial-gradient(ellipse at 70% 40%,#51412c 0%,transparent 40%),linear-gradient(135deg,#0b1221,#05070b)} .web-design-screen-nav{display:flex;justify-content:space-between;align-items:center;color:#fff;font-size:10px;letter-spacing:.12em}.web-design-screen-nav b{font-size:18px}.web-design-screen-nav b span{color:var(--gold)} .web-design-screen-body{padding:32px 0 24px}.web-design-screen-body>span{display:block;color:#d9a956;font-size:9px;letter-spacing:.18em;margin-bottom:10px} .web-design-screen-body strong{display:block;color:#fff;font-size:clamp(20px,3vw,38px);line-height:1.06;letter-spacing:.03em}.web-design-screen-body em{color:var(--gold);font-style:normal} .web-design-screen-button{display:inline-block;margin-top:18px;border:1px solid #d9a956;color:#f4d9a6;padding:10px 14px;font-size:9px;letter-spacing:.1em} .web-design-screen-cards{display:flex;gap:8px}.web-design-screen-cards span{height:22px;flex:1;background:linear-gradient(110deg,#202c3d,#57452b,#202c3d);border:1px solid #78603b66} .web-design-phone{position:absolute;z-index:2;right:clamp(8px,8%,110px);bottom:50px;width:132px;height:245px;border:5px solid #bba06e;border-radius:23px;background:#090e18;box-shadow:0 18px 40px #000b,0 0 22px #d9a95640;transform:rotate(8deg);animation:web-phone-float 6s ease-in-out infinite} .web-design-phone-notch{width:45px;height:9px;margin:0 auto;background:#bba06e;border-radius:0 0 8px 8px}.web-design-phone-logo{font-size:13px;font-weight:800;padding:15px 12px 10px;color:#f0cf92} .web-design-phone-art{height:90px;margin:0 9px;background:radial-gradient(circle at 70% 35%,#bb9455,transparent 42%),linear-gradient(145deg,#192f49,#080a12)} .web-design-phone-copy{padding:12px 10px 8px;display:grid;gap:6px}.web-design-phone-copy span{height:5px;background:#78819166;border-radius:3px}.web-design-phone-copy span:nth-child(2){width:75%}.web-design-phone-copy span:nth-child(3){width:55%} .web-design-phone-cta{height:17px;margin:8px 10px;background:#d9a956} .web-design-showcase-caption{position:absolute;left:24px;right:24px;bottom:16px;display:flex;justify-content:space-between;gap:12px;align-items:center;font-size:10px;letter-spacing:.16em;color:#e2b66e}.web-design-showcase-caption strong{color:#f4f4f4}.web-design-showcase-caption strong span{color:#d9a956} @keyframes web-browser-float{0%,100%{transform:perspective(1000px) rotateY(-7deg) rotateX(3deg) translateY(0)}50%{transform:perspective(1000px) rotateY(-4deg) rotateX(2deg) translateY(-10px)}} @keyframes web-phone-float{0%,100%{transform:rotate(8deg) translateY(0)}50%{transform:rotate(5deg) translateY(-13px)}} @keyframes web-orbit{to{transform:rotate(360deg)}} @media(max-width:650px){.web-design-showcase{min-height:290px;padding:32px 12px 55px}.web-design-browser{width:92%;min-height:220px}.web-design-screen{min-height:190px;padding:14px}.web-design-screen-body{padding:20px 0}.web-design-screen-body strong{font-size:clamp(17px,5vw,26px)}.web-design-screen-nav span{font-size:7px}.web-design-phone{right:7px;bottom:47px;width:85px;height:164px;border-width:3px;border-radius:15px}.web-design-phone-art{height:53px}.web-design-phone-copy{padding:8px 6px;gap:4px}.web-design-phone-copy span{height:3px}.web-design-phone-cta{height:11px;margin:4px 6px}.web-design-phone-logo{font-size:10px;padding:8px}.web-design-browser-top{padding:0 8px}.web-design-address{font-size:7px}.web-design-live{display:none}.web-design-showcase-caption{font-size:8px;left:12px;right:12px}} @media(prefers-reduced-motion:reduce){.web-design-orbit,.web-design-browser,.web-design-phone{animation:none!important}} /* Web design lead-generation content: retain the existing cinematic showcase. */ .web-design-quick-cta{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:22px 26px;margin:-18px 0 46px;background:linear-gradient(105deg,rgba(217,169,86,.18),rgba(217,169,86,.045));border:1px solid rgba(217,169,86,.5)} .web-design-quick-cta>div{display:grid;gap:7px}.web-design-quick-cta strong{font-size:15px;letter-spacing:.13em;color:#f1c87e}.web-design-quick-cta span{color:#d5d9e0;line-height:1.5} .web-design-cta-button{display:inline-flex;align-items:center;justify-content:center;gap:16px;padding:17px 22px;min-height:52px;background:#d9a956;color:#0a0c12;font-size:12px;font-weight:800;letter-spacing:.08em;white-space:nowrap;transition:background .2s ease,transform .2s ease} .web-design-cta-button span{color:#0a0c12}.web-design-cta-button:hover{background:#f2ca85;transform:translateY(-2px)} .web-design-process{margin:0 0 34px}.web-design-process h3{font-size:clamp(19px,2.4vw,28px);margin:12px 0 23px;letter-spacing:.035em} .web-design-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px} .web-design-steps>div{border-top:2px solid #b99453;padding:20px;background:rgba(255,255,255,.035)} .web-design-steps>div>span{display:block;color:#d9a956;font-size:12px;letter-spacing:.15em;margin-bottom:14px} .web-design-steps strong{font-size:13px;letter-spacing:.08em}.web-design-steps p{font-size:14px;line-height:1.7;color:#c7ccd5} .web-design-proof{display:flex;justify-content:space-between;align-items:center;gap:22px;padding:26px;margin:0 0 24px;border:1px solid rgba(217,169,86,.22);background:linear-gradient(125deg,#121b2b,#080b11)} .web-design-proof>div{max-width:720px}.web-design-proof h3{font-size:clamp(19px,2.3vw,28px);margin:12px 0}.web-design-proof p{line-height:1.7;color:#c7ccd5;margin:0} .web-design-proof>a{color:#f0c77f;font-size:12px;letter-spacing:.09em;font-weight:700;flex-shrink:0} .web-design-startup{color:#e7d1ab;line-height:1.65;font-size:15px;margin:0 0 38px;padding-left:16px;border-left:2px solid #d9a956} @media(max-width:760px){.web-design-quick-cta,.web-design-proof{flex-direction:column;align-items:flex-start}.web-design-steps{grid-template-columns:1fr}.web-design-cta-button{width:100%;white-space:normal;text-align:center}.web-design-proof>a{flex-shrink:1}} @media(prefers-reduced-motion:reduce){.web-design-cta-button{transition:none}.web-design-cta-button:hover{transform:none}} /* iPad footer polish — no hero/logo rules changed */ footer{flex-wrap:wrap;align-items:center;row-gap:18px}footer>span{min-width:0;max-width:100%;overflow-wrap:normal}footer>span:first-of-type{flex:1 1 190px;line-height:1.65}footer>span:nth-of-type(2){flex:1 1 260px;line-height:1.65}footer>a{flex:0 0 auto;white-space:nowrap}@media(max-width:900px){footer{justify-content:flex-start;gap:16px 26px;padding:28px 4%}footer>span:first-of-type{flex-basis:220px}footer>span:nth-of-type(2){flex-basis:260px}}@media(max-width:560px){footer{flex-direction:column;align-items:flex-start}footer>span{flex-basis:auto!important}} /* Screenshot-driven iPad spacing polish. Intentionally does not touch hero/logo. */ @media (min-width:701px) and (max-width:1180px){section.below:not(.web-design-section){padding-top:52px;padding-bottom:52px}section.below.split{gap:28px;align-items:start}section.below.split img{display:block;height:auto;max-height:330px;object-fit:cover}section.below .cards{margin-top:24px}section.below h2{margin-bottom:18px}section.below.split p{margin-top:14px}} @media(max-width:700px){section.below:not(.web-design-section){padding-top:46px;padding-bottom:46px}section.below .cards{margin-top:22px}section.below h2{margin-bottom:16px}} /* Website intake polish for iPad and phones — preserve hero and logo */ #website-request{scroll-margin-top:84px}#website-request input,#website-request select,#website-request textarea{max-width:100%;min-width:0}#website-request input:focus-visible,#website-request select:focus-visible,#website-request textarea:focus-visible{outline:2px solid #68a9ff;outline-offset:2px;box-shadow:0 0 0 4px rgba(65,142,255,.13)}#website-request textarea{resize:vertical}#website-request-note{line-height:1.6;overflow-wrap:anywhere}@media(max-width:760px){#website-request{scroll-margin-top:74px}#website-request .web-request-fields{grid-template-columns:minmax(0,1fr)}#website-request .web-request-actions{flex-wrap:wrap;gap:12px}#website-request .web-request-actions>*{max-width:100%}} /* Consolidated production safeguards: keep legacy service styles scoped while preserving primary site design. */ html{scroll-padding-top:90px}#web-design,#website-request,#client-feedback,#payments,#contact{scroll-margin-top:90px}a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid #e8be7a;outline-offset:3px}#payments .outline-pill{max-width:100%;overflow-wrap:anywhere}#contact .email-link{overflow-wrap:anywhere}@media(max-width:760px){#payments{padding:40px 5%!important}#web-design .web-request-fields{grid-template-columns:1fr}#nav{max-height:calc(100dvh - 70px);overflow-y:auto}} /* Studio ForEver visual refinement — preserve original artwork and page structure. Matches the clean navigation and measured spacing of Regional Gems. */ :root{--studio-line:rgba(215,180,126,.32);--studio-text:#f5eee4;--studio-muted:#c9c4bd} body{background:#050609;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility} .top{height:clamp(62px,6vw,80px);padding-inline:clamp(18px,3.2vw,52px);background:#050609;border-bottom:1px solid var(--studio-line);box-shadow:0 3px 18px rgba(0,0,0,.22)} .top .home-wordmark{font-size:clamp(12px,1.1vw,16px);letter-spacing:.12em} .top .menu-button{border:1px solid #a98657;border-radius:30px;padding:10px 18px;background:rgba(9,9,11,.9);color:var(--studio-text);letter-spacing:.09em;min-height:43px} .top nav a{letter-spacing:.095em;font-size:11px} .top nav a.active:after{background:#d9ad70;box-shadow:0 0 12px #d9ad7055} .top .enter{top:50%;transform:translateY(-50%);padding:12px 18px} .hero{border-bottom:1px solid var(--studio-line)} .hero-copy h1{font-size:clamp(29px,3.1vw,53px);line-height:1.06;letter-spacing:-.025em;text-shadow:0 2px 15px #000b} .hero-copy p{line-height:1.65;letter-spacing:.16em} .disciplines{border-color:var(--studio-line)} .tile{border-color:rgba(215,180,126,.24)} .tile strong{letter-spacing:.09em;text-shadow:0 2px 12px #000} .tile small{line-height:1.4;letter-spacing:.045em;color:#e7e2db} .feature-grid,.sidebar,.newsletter,.featured{border-color:var(--studio-line)} .eyebrow{color:#e5bc7d;letter-spacing:.2em;line-height:1.5} .vision h2,.below h2{letter-spacing:-.025em;line-height:1.1} .vision p,.below p{line-height:1.75} .section-bar h2{letter-spacing:.12em} .outline-pill{min-height:43px;border-color:#c99e68;transition:background .2s,border-color .2s,color .2s} .outline-pill:hover,.outline-pill:focus-visible{background:rgba(217,169,86,.16);border-color:#f0c995} section.below{border-color:var(--studio-line)} section.below:not(.web-design-section):not(#website-request){scroll-margin-top:95px} #studio-quickstart{border-top-color:var(--studio-line)!important} #studio-quickstart .outline-pill{white-space:normal;text-align:center} footer{border-top:1px solid var(--studio-line)} @media(min-width:701px) and (max-width:1180px){ .top{height:72px;padding-inline:26px} .top .menu-button{min-height:44px} .hero{height:clamp(430px,46vw,600px)} .left-side{padding-left:3%} .hero-copy h1{font-size:clamp(34px,4vw,50px)} .hero-copy p{font-size:12px} .disciplines .tile{height:clamp(170px,17vw,225px)} } @media(max-width:700px){ .top{height:68px;padding-inline:18px} .hero{min-height:430px} .hero-copy h1{font-size:clamp(30px,7vw,44px)} .hero-copy p{font-size:11px;letter-spacing:.12em;white-space:normal} .disciplines .tile strong{letter-spacing:.05em} #studio-quickstart .outline-pill{width:100%} } @media(prefers-reduced-motion:reduce){.outline-pill{transition:none}} /* Navigation QA after the visual polish: retain the existing iPad menu layout. */ @media(min-width:701px) and (max-width:1200px){ .top{justify-content:space-between;gap:14px} .top .home-wordmark{display:block;flex:0 1 auto;min-width:0;white-space:nowrap} .top .menu-button{display:inline-flex;position:relative;order:3;flex:0 0 auto;margin-left:auto;transform:none;top:auto} .top .enter{display:none;transform:none} .top nav{max-height:calc(100dvh - 72px);overflow-y:auto} } @media(max-width:700px){ .top{justify-content:space-between} .top .home-wordmark{display:block;font-size:clamp(10px,2.8vw,13px);letter-spacing:.04em} .top .menu-button{flex-shrink:0;padding:10px 12px} .top nav{max-height:calc(100dvh - 68px);overflow-y:auto} } /* Homepage cinematic-to-editorial transition: original six images stay separate. */ .hero{isolation:isolate} .hero:after{content:"";position:absolute;z-index:1;bottom:0;left:0;right:0;height:3px;background:linear-gradient(90deg,transparent 0%,#d5a56d 20%,#f4d4a0 50%,#d5a56d 80%,transparent 100%);opacity:.78;pointer-events:none} .disciplines{position:relative;isolation:isolate;gap:0;background:#08090b;border-top:0;border-bottom:1px solid rgba(221,176,107,.4)} .disciplines .tile{border-right:1px solid rgba(222,181,120,.3);isolation:isolate;transition:filter .25s ease} .disciplines .tile:last-child{border-right:0} .disciplines .tile:before{background-image:linear-gradient(0deg,rgba(0,0,0,.91) 0%,rgba(0,0,0,.55) 30%,rgba(0,0,0,.04) 80%),var(--image)} .disciplines .tile:after{content:"";position:absolute;inset:0;border-top:1px solid rgba(255,225,174,.18);pointer-events:none;z-index:1} .disciplines .tile:hover,.disciplines .tile:focus-visible{filter:brightness(1.13)} .disciplines .tile strong{font-weight:600;line-height:1.2} .disciplines .tile small{max-width:170px} .disciplines .circle{background:rgba(0,0,0,.38);border-color:#d7aa6f;backdrop-filter:blur(4px)} .feature-grid{border-top:0} @media(min-width:701px) and (max-width:1180px){ .disciplines{grid-template-columns:repeat(3,minmax(0,1fr))} .disciplines .tile{height:clamp(180px,19vw,235px);border-bottom:1px solid rgba(222,181,120,.25)} .disciplines .tile:nth-child(3n){border-right:0} .disciplines .tile strong{font-size:clamp(15px,1.7vw,20px)} .disciplines .tile small{font-size:11px} } @media(max-width:700px){ .disciplines{grid-template-columns:repeat(2,minmax(0,1fr))} .disciplines .tile{height:clamp(185px,47vw,265px);border-bottom:1px solid rgba(222,181,120,.25)} .disciplines .tile:nth-child(2n){border-right:0} .disciplines .tile strong{font-size:clamp(15px,4vw,19px)} .disciplines .tile small{font-size:11px} .disciplines .circle{width:32px;height:32px;right:11px;bottom:15px} } @media(prefers-reduced-motion:reduce){.disciplines .tile{transition:none}} /* Editorial polish for the original Studio, Projects and Services experience. Preserve content, images, service links, forms and all existing functionality. */ #studio{border-bottom:1px solid rgba(217,169,86,.34)} #studio .vision{padding-top:clamp(34px,4vw,70px);padding-bottom:clamp(34px,4vw,70px);background:linear-gradient(140deg,#0b0c11,#071322)} #studio .vision h2{font-size:clamp(30px,3vw,53px);line-height:1.12;letter-spacing:-.025em;margin-block:18px 22px} #studio .vision p{font-size:clamp(13px,1.1vw,16px);line-height:1.8;color:#e0ddd8} #studio .studio-image{border-inline:1px solid rgba(215,180,126,.24)} #studio .sidebar{background:linear-gradient(160deg,#090b10,#10121a)} #studio .featured{padding:clamp(20px,2.3vw,35px)} #studio .section-bar{margin-bottom:18px} #studio .section-bar h2{color:#f4e6d1;letter-spacing:.11em} #studio .project-thumbs a{border-color:rgba(213,171,109,.4);border-radius:5px} #studio .project-thumbs img{transition:transform .25s ease} #studio .project-thumbs a:hover img{transform:scale(1.035)} #studio .newsletter{padding:clamp(20px,2.3vw,35px);border-color:rgba(215,180,126,.28)} #project-details,#services{background:linear-gradient(145deg,#090b10,#0b101a 62%,#090a0d)} #project-details,#services{border-bottom:1px solid rgba(215,180,126,.26)} #project-details h2,#services h2{letter-spacing:-.025em;line-height:1.12} #project-details p,#services p{line-height:1.75} #project-details .cards,#services .cards{gap:clamp(12px,2vw,26px)} #project-details .cards>*,#services .cards>*{border-color:rgba(215,180,126,.32)} @media(min-width:701px) and (max-width:1180px){ #studio .vision{padding:32px 6%} #studio .vision h2{font-size:clamp(29px,3.4vw,40px)} #studio .featured,#studio .newsletter{padding:22px} #project-details,#services{padding-top:clamp(48px,6vw,75px);padding-bottom:clamp(48px,6vw,75px)} } @media(max-width:700px){ #studio .vision{padding:35px 6%} #studio .vision h2{font-size:clamp(32px,8vw,46px)} #studio .studio-image{border-inline:0;border-block:1px solid rgba(215,180,126,.25)} #studio .featured,#studio .newsletter{padding:24px 6%} #project-details,#services{padding-top:48px;padding-bottom:48px} } @media(prefers-reduced-motion:reduce){#studio .project-thumbs img{transition:none}} /* Flagship finishing pass: business pathways, contact, and footer. */ #web-design,#website-request,#client-feedback,#payments,#contact,#studio-quickstart{scroll-margin-top:92px} #web-design,#website-request,#client-feedback{border-top:1px solid rgba(215,180,126,.28)} #web-design h2,#website-request h2,#client-feedback h2,#contact h2,#studio-quickstart h2{letter-spacing:-.025em;line-height:1.12} #web-design p,#website-request p,#client-feedback p,#payments p,#contact p,#studio-quickstart p{line-height:1.75} #website-request input,#website-request select,#website-request textarea{border-radius:10px;transition:border-color .2s,box-shadow .2s} #website-request input:focus,#website-request select:focus,#website-request textarea:focus{border-color:#dcb67e;box-shadow:0 0 0 3px rgba(220,182,126,.12)} #payments{border-top:1px solid rgba(215,180,126,.4)!important} #contact{background:radial-gradient(ellipse at 85% 20%,#152034,#07080c 75%)} #contact .email-link{display:inline-block;max-width:100%;overflow-wrap:anywhere;text-decoration-thickness:1px;text-underline-offset:5px} #studio-quickstart{background:linear-gradient(125deg,#0d1625,#0a0b10)!important} #studio-quickstart .outline-pill{border-color:#cda36d} footer{background:#050609;border-top:1px solid rgba(215,180,126,.35);color:#d6cec2;letter-spacing:.055em} @media(max-width:760px){ #website-request input,#website-request select,#website-request textarea{font-size:16px} #studio-quickstart>div{gap:12px!important} #studio-quickstart .outline-pill{min-height:48px} } @media(prefers-reduced-motion:reduce){#website-request input,#website-request select,#website-request textarea{transition:none}} /* Screenshot correction 2026-10-16: remove duplicate card image/text layers and give the original chrome logo clear space. */ .disciplines .tile{display:flex;flex-direction:column;justify-content:flex-end;position:relative;overflow:hidden;background:#080a0d;min-height:0;padding:0 17px 20px} .disciplines .tile:before{content:"";position:absolute;inset:0;background-image:linear-gradient(to top,rgba(0,0,0,.88) 0%,rgba(0,0,0,.22) 43%,transparent 75%),var(--image);background-size:cover;background-position:center center;opacity:1} .disciplines .tile:after{content:none!important;display:none!important} .disciplines .tile strong,.disciplines .tile small,.disciplines .tile .circle{position:relative;z-index:3} /* The approved category artwork already carries its labels and arrows. Keep each entire anchor interactive, but do not paint a second set over the artwork. */ .disciplines .tile strong,.disciplines .tile small,.disciplines .tile .circle{display:none!important} .disciplines .tile{padding:0!important} .disciplines .tile:before{background-image:var(--image)!important;background-size:cover!important;background-position:center!important} .disciplines .tile:focus-visible{outline:3px solid #f0c483;outline-offset:-3px} .disciplines .tile strong{width:calc(100% - 44px);padding:0;margin:0 0 7px;line-height:1.15;font-size:clamp(13px,1.4vw,19px);color:#fff;text-shadow:0 2px 7px #000} .disciplines .tile small{display:block;width:calc(100% - 44px);max-width:210px;min-height:0;margin:0;line-height:1.45;color:#f1ece6;font-size:clamp(10px,.95vw,12px);text-shadow:0 2px 6px #000} .disciplines .tile .circle{position:absolute;right:12px;bottom:18px;display:grid;place-items:center} .hero .left-side{position:relative;z-index:2} .hero .hero-copy{position:relative;max-width:330px;padding:15px 18px 15px 0;background:linear-gradient(90deg,rgba(0,0,0,.82),rgba(0,0,0,.42) 75%,transparent);border-radius:0 14px 14px 0} .hero .hero-copy h1{font-size:clamp(26px,2.8vw,43px);line-height:1.07;white-space:normal} .hero .hero-copy p{white-space:normal;font-size:clamp(10px,.95vw,13px)} @media(min-width:701px) and (max-width:1180px){ .disciplines .tile{height:clamp(230px,25vw,330px);padding:0 17px 21px} .disciplines .tile:before{background-position:center center} .disciplines .tile strong{font-size:17px} .disciplines .tile small{font-size:11px} .hero .left-side{width:38%;padding-left:3%} .hero .hero-copy{max-width:260px} .hero .hero-copy h1{font-size:clamp(27px,3.2vw,36px)} } @media(max-width:700px){ .disciplines .tile{height:clamp(205px,55vw,285px);padding:0 12px 18px} .disciplines .tile strong{font-size:15px} .disciplines .tile small{font-size:10px} .hero .left-side{width:64%;padding-left:4%} .hero .hero-copy{max-width:220px;padding:12px 10px 12px 0} .hero .hero-copy h1{font-size:clamp(24px,6vw,32px)} .hero .hero-copy p{font-size:10px} } /* Approved 2026-10-16 Studio ForEver artwork: use the uploaded complete screenshot as the hero VISUAL only. Crop out its baked navigation and gallery; retain real clickable website navigation and category cards. */ @media(min-width:701px){ .hero{height:37.65vw!important;min-height:0!important;max-height:none!important;background:#020407} .hero .hero-image{background-image:url('assets/92F87F0B-2C1E-4BBC-8538-415BB00BE49B.png')!important;background-size:100% auto!important;background-position:center calc(-4.97vw)!important;background-repeat:no-repeat!important} .hero .hero-overlay{background:none!important} .hero .disciplines-label,.hero .hero-copy h1,.hero .hero-copy p,.hero .right-side{display:none!important} .hero .left-side{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;padding:0!important;background:none!important;display:block!important} .hero .hero-copy{position:absolute!important;left:3.4%!important;bottom:5.5%!important;width:20%!important;max-width:none!important;height:13%!important;padding:0!important;background:none!important;border:0!important} .hero .showreel{display:block!important;width:100%!important;height:100%!important;position:absolute!important;inset:0!important;opacity:0!important;z-index:3!important} .hero .showreel:focus-visible{opacity:1!important;background:#0a0d13!important;border:2px solid #f0c483!important;border-radius:40px} } @media(max-width:700px){ /* Use the existing dedicated hero asset on narrow screens to avoid showing a miniature full-page screenshot or duplicating navigation. */ .hero .hero-copy h1,.hero .hero-copy p{display:none!important} .hero .hero-copy{background:none!important;padding:0!important} .hero .disciplines-label{display:block} } /* 2026-10-16 iPad card artwork: preserve baked labels and arrows by fitting the full image. */ .disciplines .tile:before{background-size:100% 100%!important;background-position:center!important;background-repeat:no-repeat!important;transform:none!important} .disciplines .tile:hover:before,.disciplines .tile:focus-visible:before{transform:none!important} /* Restore the approved Studio scene and its original chrome logo overlay. */ #studio .studio-image{background:linear-gradient(0deg,rgba(0,0,0,.28),rgba(0,0,0,.04)),url('assets/studio-scene.webp') center/cover!important;isolation:isolate} #studio .studio-image img{display:block;position:relative;width:min(84%,520px);max-width:84%;max-height:85%;height:auto;object-fit:contain;mix-blend-mode:screen!important;opacity:.92!important;filter:drop-shadow(0 0 22px #0875b2)} /* Studio ForEver cinematic motion prototype v1: additive, artwork-safe */ @media (prefers-reduced-motion: no-preference) { /* Light moves over the container; the original artwork never transforms. */ .disciplines .tile { transition: box-shadow .35s ease, outline-color .35s ease; } .disciplines .tile:hover, .disciplines .tile:focus-visible { box-shadow: inset 0 0 0 1px rgba(216,177,110,.58), 0 0 24px rgba(27,111,200,.19); } #studio .studio-image { position:relative; } #studio .studio-image::after { content:""; position:absolute; inset:0; pointer-events:none; z-index:1; background:linear-gradient(115deg, transparent 20%, rgba(55,143,230,.075) 46%, transparent 70%); background-size:230% 100%; animation:sf-studio-light-sweep 14s ease-in-out infinite alternate; } @keyframes sf-studio-light-sweep { from {background-position:100% 0} to {background-position:0 0} } } @media (prefers-reduced-motion: reduce) { #studio .studio-image::after { animation:none!important; } } /* Studio ForEver shared Orbit Glow interaction v1 — derived from existing 5-7-8 halo */ @media (prefers-reduced-motion: no-preference) { /* Reusable interactive halo: decorates controls, never modifies approved images. */ .feature-grid .outline-pill, .hero .showreel, #regional-gems .pill { position:relative; transition:box-shadow .32s ease, border-color .32s ease; } .feature-grid .outline-pill:hover, .feature-grid .outline-pill:focus-visible, .hero .showreel:hover, .hero .showreel:focus-visible, #regional-gems .pill:hover, #regional-gems .pill:focus-visible { box-shadow:0 0 0 1px rgba(125,213,255,.38), 0 0 19px rgba(0,170,255,.34), inset 0 0 12px rgba(255,141,40,.10); } .disciplines .tile { transition:box-shadow .35s ease; } .disciplines .tile:focus-visible { box-shadow:0 0 0 2px rgba(125,213,255,.65),0 0 25px rgba(0,170,255,.27); } } @media (hover:none) and (pointer:coarse) { .feature-grid .outline-pill:active, .hero .showreel:active, #regional-gems .pill:active { box-shadow:0 0 0 1px rgba(125,213,255,.48),0 0 20px rgba(0,170,255,.35); } } /* Studio ForEver Orbit Glow v2 — motion on interactive chrome, never on artwork */ @media (prefers-reduced-motion: no-preference) { /* Animate the existing circular arrows, not the category artwork or text. */ .disciplines .tile .circle {transition:box-shadow .3s ease, border-color .3s ease, transform .3s ease} .disciplines .tile:hover .circle, .disciplines .tile:focus-visible .circle { box-shadow:0 0 0 2px rgba(125,213,255,.28),0 0 18px rgba(0,170,255,.6),inset 0 0 10px rgba(255,141,40,.18); transform:translateY(-3px); } .hero .showreel .play {transition:box-shadow .3s ease, transform .3s ease} .hero .showreel:hover .play,.hero .showreel:focus-visible .play { box-shadow:0 0 0 2px rgba(125,213,255,.32),0 0 20px rgba(0,170,255,.5); transform:scale(1.05); } } @media (hover:none) and (pointer:coarse) { .disciplines .tile:active .circle {box-shadow:0 0 18px rgba(0,170,255,.5)} } /* Six homepage gateways: one consistent cinematic preview system; subpage headers remain unchanged. */ .disciplines{grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;background:#9d8055;border-block:1px solid #a78a61} .disciplines .tile{height:auto;aspect-ratio:16/9;min-height:0;padding:clamp(10px,1.7vw,22px);border:0;isolation:isolate;justify-content:flex-end;background:#080b11} .disciplines .tile::before{background-image:linear-gradient(0deg,rgba(0,0,0,.92),rgba(0,0,0,.08) 65%),var(--image);background-size:cover!important;background-position:center!important;background-repeat:no-repeat!important;transform:none!important} .disciplines .tile::after{content:"";position:absolute;inset:0;border:1px solid rgba(234,195,132,.35);pointer-events:none;z-index:1} .disciplines .tile strong{font-size:clamp(15px,1.5vw,22px);font-weight:700;letter-spacing:.09em;text-shadow:0 2px 8px #000;margin:0 42px 5px 0} .disciplines .tile small{font-size:clamp(10px,.95vw,13px);line-height:1.35;letter-spacing:.07em;text-shadow:0 2px 6px #000;max-width:80%;color:#f4eadb} .disciplines .tile .circle{right:clamp(10px,1.7vw,22px);bottom:clamp(10px,1.7vw,22px)} @media(max-width:650px){.disciplines{grid-template-columns:repeat(2,minmax(0,1fr))}.disciplines .tile{aspect-ratio:4/3;padding:12px}.disciplines .tile strong{font-size:14px}.disciplines .tile small{font-size:10px}.disciplines .tile .circle{height:30px;width:30px;font-size:19px;right:9px;bottom:11px}} /* Final alignment pass: six homepage cinematic gateways only. */ .disciplines .tile{align-items:flex-start;text-align:left} .disciplines .tile strong,.disciplines .tile small{display:block;align-self:flex-start;text-align:left;position:relative;z-index:2} .disciplines .tile strong{max-width:calc(100% - 46px);line-height:1.2} .disciplines .tile small{max-width:calc(100% - 50px);min-height:2.7em} .disciplines .tile .circle{z-index:3} @media(max-width:650px){.disciplines .tile strong,.disciplines .tile small{max-width:calc(100% - 35px)}.disciplines .tile small{min-height:2.7em}} /* Preserve full approved lettering inside the Film, Music and Fashion gateway banners. */ .disciplines .tile:nth-child(-n+3)::before{background-image:linear-gradient(0deg,rgba(0,0,0,.58),rgba(0,0,0,0) 45%),var(--image);background-size:100% 100%,contain!important;background-position:center,center!important;background-repeat:no-repeat!important;background-color:#07090e} .disciplines .tile:nth-child(-n+3){background:#07090e} /* Approved six-tile artwork uploaded separately from the ORIGINAL homepage logo. One shared image, six independent clickable link regions. */ .disciplines{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:0!important;background:#08090d!important;border:0!important} .disciplines .tile{display:block!important;position:relative!important;aspect-ratio:2.2/1!important;min-height:0!important;height:auto!important;padding:0!important;overflow:hidden!important;background:#090a0f!important;border:0!important} .disciplines .tile::before{content:""!important;position:absolute!important;inset:0!important;display:block!important;background-image:url('/studio-forever-six-tiles-only.png')!important;background-size:300% 200%!important;background-repeat:no-repeat!important;transform:none!important;transition:filter .2s ease!important} .disciplines .tile:nth-child(1)::before{background-position:0% 0%!important} .disciplines .tile:nth-child(2)::before{background-position:50% 0%!important} .disciplines .tile:nth-child(3)::before{background-position:100% 0%!important} .disciplines .tile:nth-child(4)::before{background-position:0% 100%!important} .disciplines .tile:nth-child(5)::before{background-position:50% 100%!important} .disciplines .tile:nth-child(6)::before{background-position:100% 100%!important} .disciplines .tile::after{display:none!important} .disciplines .tile:hover::before,.disciplines .tile:focus-visible::before{filter:brightness(1.12)!important} .disciplines .tile:focus-visible{outline:3px solid #e7bd76!important;outline-offset:-3px!important;z-index:4} @media(max-width:650px){.disciplines{grid-template-columns:repeat(3,minmax(0,1fr))!important}.disciplines .tile{aspect-ratio:2.2/1!important;min-height:0!important;padding:0!important}} @media(prefers-reduced-motion:reduce){.disciplines .tile::before{transition:none!important}} /* 2026-10-16: Fix repeated six-tile sheet. A background-size of 300% 200% on EACH tile repeats the full sheet; instead use a single full-width sheet under six transparent interactive hotspots. The original hero stays intact. */ .disciplines{position:relative!important;display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;grid-template-rows:repeat(2,minmax(0,1fr))!important;gap:0!important;aspect-ratio:1648/540!important;width:100%!important;max-width:none!important;min-height:0!important;height:auto!important;overflow:hidden!important;background:#07080d url('/studio-forever-six-tiles-only.png') center center / 100% 100% no-repeat!important} .disciplines .tile{aspect-ratio:auto!important;min-height:0!important;height:auto!important;position:relative!important;z-index:1!important;padding:0!important;background:transparent!important;border:0!important} .disciplines .tile::before,.disciplines .tile::after{content:none!important;display:none!important} .disciplines .tile>strong,.disciplines .tile>small,.disciplines .tile>.circle{display:none!important} .disciplines .tile:hover,.disciplines .tile:focus-visible{background:rgba(255,208,121,.08)!important} .disciplines .tile:focus-visible{outline:3px solid #f3c77a!important;outline-offset:-3px!important} @media(max-width:650px){.disciplines{grid-template-columns:repeat(3,minmax(0,1fr))!important;grid-template-rows:repeat(2,minmax(0,1fr))!important;aspect-ratio:1648/540!important}.disciplines .tile{min-height:0!important;aspect-ratio:auto!important}} /* Visitor-ready contact actions: clear next steps without an extra repeated section. */ .sf-contact-actions{display:flex;flex-wrap:wrap;gap:12px;margin:24px 0 30px}.sf-contact-actions .outline-pill{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;padding:12px 18px;border:1px solid #b99661;border-radius:30px;min-height:44px}.sf-contact-actions .outline-pill:focus-visible{outline:2px solid #f4c77c;outline-offset:3px} /* Make the live website-design service discoverable from the main services grid. */ .sf-service-link{display:inline-block;margin-top:10px;color:#f0c989;font-size:.78rem;font-weight:700;letter-spacing:.06em;text-decoration:underline;text-underline-offset:4px}.sf-service-link:hover{color:#fff}.sf-service-link:focus-visible{outline:2px solid #f0c989;outline-offset:4px} /* 2026-10-16 homepage artwork-first layout pass. Scoped below the hero/six approved tiles; no subpage changes. */ #creative-worlds,#studio,#project-details,#services,#web-design,#media,#fashion,#contact{box-sizing:border-box} #creative-worlds .sf-world-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.8vw,28px);align-items:stretch} #creative-worlds .sf-world-card{display:flex;flex-direction:column;min-width:0;height:100%;overflow:hidden} #creative-worlds .sf-world-card img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:center} #creative-worlds .sf-world-card>div{display:flex;flex:1;flex-direction:column;min-width:0} #creative-worlds .sf-world-card>div strong{margin-top:auto} #project-details .cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.8vw,28px);align-items:stretch} #project-details .cards article{min-width:0;height:100%;overflow:hidden} #project-details .cards article img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:contain;background:#080b12} #media img,#fashion img{display:block;width:100%;height:auto;max-height:none;object-fit:contain;background:#090c12} #media>a,#fashion>a{display:block;min-width:0;overflow:hidden} #creative-worlds .sf-world-card img,#project-details .cards article img,#media img,#fashion img{transition:transform .35s ease,filter .35s ease} @media(hover:hover){#creative-worlds .sf-world-card:hover img,#media>a:hover img,#fashion>a:hover img{transform:scale(1.025);filter:brightness(1.08)}} @media(max-width:760px){#creative-worlds .sf-world-grid,#project-details .cards{grid-template-columns:1fr}#creative-worlds .sf-world-card img,#project-details .cards article img{aspect-ratio:16/9}} @media(prefers-reduced-motion:reduce){#creative-worlds .sf-world-card img,#project-details .cards article img,#media img,#fashion img{transition:none}} /* Artwork-first phase two: enlarge lower homepage panels without affecting hero or tiles. */ @media(min-width:900px){ #media,#fashion{grid-template-columns:minmax(0,.85fr) minmax(0,1.35fr);gap:clamp(20px,3vw,56px);align-items:center} #media>a,#fashion>a{width:100%} #media img,#fashion img{max-height:650px;min-height:360px;object-fit:contain} #project-details .cards article img{aspect-ratio:3/2} #creative-worlds .sf-world-card img{aspect-ratio:3/2} } #studio .feature-grid,#studio .sidebar{min-width:0} #studio .project-thumbs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px} #studio .project-thumbs a{min-width:0} #studio .project-thumbs img{width:100%;height:auto;aspect-ratio:4/3;object-fit:contain;background:#080c14} #services .services-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,2vw,32px)} #services .services-grid p{min-width:0;margin:0;padding:20px 12px;border-top:2px solid #b99a68;line-height:1.5} @media(max-width:800px){#services .services-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:480px){#services .services-grid{grid-template-columns:1fr}} /* Artwork-first phase three: coherent full-width visual rhythm below approved six tiles. */ #creative-worlds{padding-left:clamp(16px,3vw,48px);padding-right:clamp(16px,3vw,48px)} #creative-worlds .sf-world-grid{max-width:1800px;gap:clamp(14px,2vw,32px)} #creative-worlds .sf-world-card{border-radius:12px;box-shadow:0 10px 35px rgba(0,0,0,.22)} #creative-worlds .sf-world-card>div{padding:clamp(17px,2vw,30px)} #creative-worlds .sf-world-card h3{line-height:1.18;overflow-wrap:break-word} #project-details,#services,#media,#fashion{padding-left:clamp(18px,3.5vw,64px);padding-right:clamp(18px,3.5vw,64px)} #project-details .cards{max-width:1800px;margin-left:auto;margin-right:auto} #project-details .cards article{display:flex;flex-direction:column;border-radius:12px} #project-details .cards article p{margin-top:auto;padding-bottom:16px} #media,#fashion{min-width:0} #media>div,#fashion>div{min-width:0} #media>a,#fashion>a{border-radius:12px;border:1px solid rgba(207,167,103,.38);background:#080c14} #media>a img,#fashion>a img{width:100%;max-width:100%;max-height:none;object-fit:contain} @media(min-width:1100px){#media,#fashion{grid-template-columns:minmax(320px,2fr) minmax(0,3fr)}} @media(max-width:850px){#media,#fashion{grid-template-columns:1fr}#media>a img,#fashion>a img{min-height:0;max-height:none}} @media(hover:hover){#media>a,#fashion>a{transition:border-color .2s,box-shadow .2s}#media>a:hover,#fashion>a:hover{border-color:#eac58c;box-shadow:0 0 25px rgba(218,166,84,.2)}} /* Regional Gems homepage readability: compact explanatory card, expandable detail. */ #regional-gems .rg-unlock-intro{max-width:1200px;margin:24px auto;padding:clamp(18px,2.5vw,30px);border:1px solid rgba(190,156,99,.65);border-radius:14px;background:linear-gradient(120deg,#122536,#12141c)} #regional-gems .rg-unlock-intro h3{font:normal clamp(24px,3vw,38px)/1.2 Georgia,serif;color:#f0d6a4;margin:10px 0 14px} #regional-gems .rg-unlock-intro>p:not(.eyebrow){max-width:900px;margin:0 0 14px;line-height:1.6} #regional-gems .rg-unlock-details{border-top:1px solid rgba(200,164,100,.3);padding-top:12px} #regional-gems .rg-unlock-details summary{cursor:pointer;color:#e4c18b;font-weight:700;letter-spacing:.06em;list-style-position:inside;padding:8px 0} #regional-gems .rg-unlock-details p{max-width:900px;line-height:1.6} #regional-gems .rg-unlock-details summary:focus-visible{outline:2px solid #e4c18b;outline-offset:3px} /* 2026-10-16: Studio / featured-project presentation aligned to approved Film and Fashion visual rhythm. Their sections and artwork remain untouched. */ @media(min-width:1000px){ #studio.feature-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);grid-template-rows:auto auto;min-height:0;gap:0} #studio .vision{grid-column:1;grid-row:1;padding:clamp(30px,4vw,64px);justify-content:center} #studio .studio-image{grid-column:2;grid-row:1;min-height:clamp(360px,36vw,650px);background-size:cover;background-position:center} #studio .sidebar{grid-column:1/-1;grid-row:2;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(300px,1fr);border-left:0;border-top:1px solid #68543c} #studio .featured{padding:clamp(22px,3vw,46px)} #studio .newsletter{padding:clamp(22px,3vw,46px)} } #studio .project-thumbs{gap:clamp(10px,1.5vw,22px)} #studio .project-thumbs img{height:auto;aspect-ratio:4/3;object-fit:contain;background:#070b13} #studio .project-thumbs a{border:1px solid rgba(211,169,105,.5);border-radius:10px} #studio .project-thumbs a:hover,#studio .project-thumbs a:focus-visible{border-color:#f0c988;box-shadow:0 0 22px rgba(221,165,74,.2)} #studio .project-thumbs strong{padding:10px 8px;font-size:clamp(10px,1vw,14px);white-space:normal} #studio .vision h2{font-size:clamp(34px,4vw,62px)} @media(min-width:600px) and (max-width:999px){#studio .studio-image{min-height:380px}} @media(max-width:599px){#studio .studio-image{min-height:260px}#studio .project-thumbs{gap:8px}#studio .project-thumbs strong{font-size:10px;padding:7px 4px}} /* Homepage top-to-bottom audit: phase 1. Only the transition below the approved hero and six tiles is adjusted; no artwork or copy is replaced. */ #web-design.web-design-section{box-sizing:border-box;max-width:none;overflow:hidden;padding-inline:clamp(20px,4vw,70px);padding-block:clamp(44px,6vw,92px)} #web-design.web-design-section>*{box-sizing:border-box;max-width:100%} #web-design .web-design-lead{max-width:920px;line-height:1.65} #web-design .web-design-showcase{width:100%;max-width:1500px;margin-inline:auto;min-width:0} #web-design .web-design-browser,#web-design .web-design-phone{box-sizing:border-box} #web-design .web-design-browser{max-width:100%} #web-design .web-design-browser-top{min-width:0} #web-design .web-design-address{overflow-wrap:anywhere} @media(max-width:650px){ #web-design.web-design-section{padding-inline:clamp(16px,4vw,26px);padding-block:42px} #web-design .web-design-showcase{overflow:hidden} #web-design .web-design-browser{max-width:100%} } /* Homepage audit phase 2: Studio and project artwork. Preserve all three approved project images and avoid uneven card heights on iPad/desktop. */ #studio.feature-grid{overflow:hidden} #studio .vision,#studio .studio-image,#studio .sidebar,#studio .featured,#studio .newsletter{box-sizing:border-box;min-width:0} #studio .studio-image{background-repeat:no-repeat;background-size:cover;background-position:center} #studio .featured .section-bar{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:12px} #studio .project-thumbs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch} #studio .project-thumbs a{height:100%;display:flex;flex-direction:column;min-width:0;text-decoration:none} #studio .project-thumbs img{display:block;width:100%;aspect-ratio:4/3;object-fit:contain;flex:1;min-height:0} #studio .project-thumbs strong{position:static;display:block;margin-top:auto;line-height:1.35;text-overflow:clip;overflow-wrap:anywhere} #studio .project-captions{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1.5vw,22px)} #studio .project-captions span{min-width:0;overflow-wrap:break-word} #project-details .cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch;gap:clamp(14px,2vw,28px)} #project-details .cards article{display:flex;flex-direction:column;min-width:0;box-sizing:border-box} #project-details .cards article img{width:100%;height:auto;aspect-ratio:3/2;object-fit:contain;background:#080c14} #project-details .cards article h3{overflow-wrap:break-word} @media(max-width:760px){#project-details .cards{grid-template-columns:1fr}#studio .project-captions{gap:8px}} @media(max-width:440px){#studio .project-thumbs strong{font-size:10px}#studio .project-captions span{font-size:10px}} /* Homepage audit phase 3: Creative Services, four balanced readable panels. The approved Film and Fashion showcase sections are not changed. */ #services{box-sizing:border-box;padding:clamp(42px,5vw,80px) clamp(18px,4vw,64px)} #services .services-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.6vw,24px);align-items:stretch;margin-top:clamp(24px,3vw,42px)} #services .services-grid p{box-sizing:border-box;min-width:0;height:100%;margin:0;padding:clamp(20px,2.3vw,34px);border:1px solid rgba(205,162,97,.5);border-top:3px solid #d6ab70;border-radius:12px;background:linear-gradient(145deg,#15202d,#090c13);font-weight:700;letter-spacing:.045em;line-height:1.45;overflow-wrap:break-word} #services .services-grid small{display:block;margin-top:13px;font-size:clamp(12px,1.1vw,15px);font-weight:400;letter-spacing:normal;line-height:1.55;color:#d0c6ba} #services .sf-service-link{font-size:12px;line-height:1.5} @media(max-width:980px){#services .services-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:560px){#services .services-grid{grid-template-columns:1fr}} /* Regional Gems: optional demo should not interrupt the artwork-first journey. */ #regional-gems .rg-demo-disclosure{margin:14px 0 24px;border:1px solid rgba(201,162,100,.55);border-radius:12px;background:#0c1420;overflow:hidden} #regional-gems .rg-demo-disclosure>summary{cursor:pointer;padding:17px 20px;color:#e8c78e;font-size:clamp(12px,1.1vw,15px);font-weight:700;letter-spacing:.07em} #regional-gems .rg-demo-disclosure>summary:focus-visible{outline:2px solid #e8c78e;outline-offset:-4px} #regional-gems .rg-demo-disclosure .rg-unlock-demo{margin:0!important;border:0!important;border-top:1px solid rgba(201,162,100,.4)!important;border-radius:0!important} /* Homepage audit phase 4: a consistent finish for Store, Payments and Contact. Preserve all billing details and working contact destinations. */ #store,#payments,#contact{box-sizing:border-box;width:100%;max-width:none;padding:clamp(48px,6vw,92px) clamp(20px,5vw,84px);min-width:0} #store{background:linear-gradient(135deg,#111925,#080a10);border-top:1px solid rgba(202,164,105,.5)} #payments{padding:clamp(48px,6vw,92px) clamp(20px,5vw,84px)!important} #contact{background:linear-gradient(125deg,#111927,#090a0e);border-top:1px solid rgba(202,164,105,.5)} #store h2,#payments h2,#contact h2{font-size:clamp(35px,5vw,72px);line-height:1.08;overflow-wrap:break-word} #store>p,#payments>p,#contact>p{max-width:840px;line-height:1.65} #store .outline-pill,#payments .outline-pill,#contact .outline-pill{min-height:44px;box-sizing:border-box} #contact .sf-contact-actions{display:flex;flex-wrap:wrap;align-items:stretch;gap:12px;max-width:1100px} #contact .sf-contact-actions a{display:inline-flex;align-items:center;justify-content:center;text-align:center;line-height:1.4;white-space:normal} #contact .email-link{display:inline-block;max-width:100%;overflow-wrap:anywhere} @media(max-width:600px){#contact .sf-contact-actions{flex-direction:column;align-items:stretch}#contact .sf-contact-actions a{width:100%}} /* Keep the complete production-studio infinity artwork visible rather than center-cropping it. */ .studio-image{background-image:linear-gradient(0deg,#0008,transparent),url("assets/studio-scene.webp")!important;background-position:center center!important;background-size:contain!important;background-repeat:no-repeat!important;background-color:#030407!important} /* Studio feature artwork: show the complete approved scene and logo without cropping. */ #studio .studio-image{background-image:linear-gradient(0deg,rgba(0,0,0,.22),transparent),url("assets/studio-scene.webp")!important;background-size:contain!important;background-position:center center!important;background-repeat:no-repeat!important;background-color:#030407!important;min-width:0} /* Search visitor welcome: animated development announcement without blocking the site */ .sf-build-banner{display:flex;align-items:center;gap:14px;overflow:hidden;background:#101925;color:#f3d8a7;border-block:1px solid rgba(226,183,113,.55);min-height:43px;font:700 11px/1.3 Arial,sans-serif;letter-spacing:.11em}.sf-build-banner-track{display:flex;gap:36px;align-items:center;white-space:nowrap;width:max-content;min-width:max-content;animation:sf-build-scroll 38s linear infinite}.sf-build-banner-track span{padding-left:12px}.sf-build-banner-cta{flex:none;position:relative;z-index:1;background:#192b3a;color:#fff0cf;text-decoration:none;padding:14px 18px;border-left:1px solid #c69a62;white-space:nowrap}.sf-build-banner-cta:hover,.sf-build-banner-cta:focus-visible{background:#2b4559;text-decoration:underline}@keyframes sf-build-scroll{to{transform:translateX(-50%)}}@media(prefers-reduced-motion:reduce){.sf-build-banner-track{animation:none;white-space:normal;flex-wrap:wrap;min-width:0;gap:8px}.sf-build-banner-track span:nth-child(n+5){display:none}.sf-build-banner{flex-wrap:wrap}}@media(max-width:600px){.sf-build-banner{font-size:10px}.sf-build-banner-cta{padding:14px 10px;font-size:9px}} /* Approved bright-yellow construction banner: style only; existing site imagery untouched. */ #main>.sf-build-banner{position:relative;isolation:isolate;min-height:74px;gap:0;background:repeating-linear-gradient(135deg,#111 0 12px,#ffd900 12px 24px);border-block:3px solid #ffc400;box-shadow:0 0 16px rgba(255,203,0,.8),inset 0 0 8px #fff2a0;color:#070707;overflow:hidden} #main>.sf-build-banner::before{content:"";position:absolute;inset:6px 0;background:linear-gradient(180deg,#fff568 0%,#ffdb00 35%,#ffbd00 100%);z-index:-1;box-shadow:inset 0 0 14px #ff9500} #main>.sf-build-banner .sf-build-banner-track{gap:40px;animation-duration:33s;font:900 clamp(14px,2vw,23px)/1.1 Impact,'Arial Narrow',Arial,sans-serif;letter-spacing:.015em;color:#080808;text-shadow:0 1px 0 #fff3a3} #main>.sf-build-banner .sf-build-banner-track span{padding:15px 0} #main>.sf-build-banner .sf-build-banner-track span::after{content:" ❯❯";margin-left:30px;font-size:1.2em} #main>.sf-build-banner .sf-build-banner-cta{background:#0b0b0b;color:#ffe600;border-left:3px solid #fff58b;border-radius:0;padding:24px 20px;font-weight:900;letter-spacing:.05em;box-shadow:-5px 0 18px rgba(0,0,0,.2)} #main>.sf-build-banner .sf-build-banner-cta:hover,#main>.sf-build-banner .sf-build-banner-cta:focus-visible{background:#292100;color:#fff} @media(max-width:600px){#main>.sf-build-banner{min-height:62px}#main>.sf-build-banner .sf-build-banner-track{font-size:16px}#main>.sf-build-banner .sf-build-banner-cta{padding:19px 10px;font-size:10px}} @media(prefers-reduced-motion:reduce){#main>.sf-build-banner .sf-build-banner-track{animation:none}} /* Motion accents for approved construction-banner illustrations. */ #main>.sf-build-banner .sf-banner-icon{display:inline-block;font-style:normal;font-size:1.3em;vertical-align:-.08em;transform-origin:center;filter:drop-shadow(0 1px 1px rgba(0,0,0,.35))} #main>.sf-build-banner .sf-gears{animation:sf-banner-spin 6s linear infinite} #main>.sf-build-banner .sf-rocket{animation:sf-banner-launch 2.8s ease-in-out infinite} #main>.sf-build-banner .sf-tools{animation:sf-banner-hammer 2.4s ease-in-out infinite} #main>.sf-build-banner::before{animation:sf-banner-glimmer 7s ease-in-out infinite} @keyframes sf-banner-spin{to{transform:rotate(360deg)}} @keyframes sf-banner-launch{0%,100%{transform:translate(0,0) rotate(-12deg)}45%{transform:translate(5px,-7px) rotate(0deg)}65%{transform:translate(7px,-9px) rotate(5deg)}} @keyframes sf-banner-hammer{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(12deg)}} @keyframes sf-banner-glimmer{0%,100%{filter:brightness(1)}50%{filter:brightness(1.12)}} @media(prefers-reduced-motion:reduce){#main>.sf-build-banner .sf-banner-icon,#main>.sf-build-banner::before{animation:none!important}} /* Studio ForEver interaction polish: restrained premium motion on primary actions. */ :root{--sf-action-glow:rgba(243,194,95,.34)} #main .web-design-cta-button, #main .web-request-actions>.outline-pill, #main .sf-contact-actions>.outline-pill, #main #services>.outline-pill, #main .sf-build-banner-cta{ position:relative;isolation:isolate;transition:transform .28s cubic-bezier(.2,.75,.25,1),box-shadow .28s ease,border-color .28s ease,background-color .28s ease,color .28s ease; -webkit-tap-highlight-color:transparent; } #main .web-design-cta-button:hover, #main .web-request-actions>.outline-pill:hover, #main .sf-contact-actions>.outline-pill:hover, #main #services>.outline-pill:hover{ transform:translateY(-3px);box-shadow:0 9px 26px var(--sf-action-glow),0 3px 12px rgba(0,0,0,.3);border-color:#f5c66e; } #main .web-design-cta-button:active, #main .web-request-actions>.outline-pill:active, #main .sf-contact-actions>.outline-pill:active, #main #services>.outline-pill:active{transform:translateY(0) scale(.98)} #main .web-design-cta-button:focus-visible, #main .web-request-actions>.outline-pill:focus-visible, #main .sf-contact-actions>.outline-pill:focus-visible, #main #services>.outline-pill:focus-visible, #main .sf-build-banner-cta:focus-visible{ outline:3px solid #ffe083;outline-offset:4px; } #main .web-design-cta-button{box-shadow:0 0 0 1px rgba(255,216,139,.35),0 0 20px rgba(228,174,79,.12);animation:sf-action-breathe 4.8s ease-in-out infinite} #main .web-design-cta-button:hover{animation-play-state:paused} #main .sf-build-banner-cta:hover{transform:none;box-shadow:-5px 0 24px rgba(0,0,0,.42)} @keyframes sf-action-breathe{ 0%,100%{box-shadow:0 0 0 1px rgba(255,216,139,.32),0 0 14px rgba(228,174,79,.12)} 50%{box-shadow:0 0 0 1px rgba(255,216,139,.65),0 0 26px rgba(228,174,79,.38)} } @media(prefers-reduced-motion:reduce){ #main .web-design-cta-button{animation:none} #main .web-design-cta-button, #main .web-request-actions>.outline-pill, #main .sf-contact-actions>.outline-pill, #main #services>.outline-pill, #main .sf-build-banner-cta{transition:none} #main .web-design-cta-button:hover, #main .web-request-actions>.outline-pill:hover, #main .sf-contact-actions>.outline-pill:hover, #main #services>.outline-pill:hover{transform:none} } /* Technical polish II: smooth anchor arrival, consistent touch feedback and accessible motion. */ html{scroll-padding-top:clamp(72px,9vw,120px)} #main :is(section[id],div[id].web-request){scroll-margin-top:clamp(72px,9vw,120px)} #main :is(.outline-pill,.web-design-cta-button,.sf-build-banner-cta){touch-action:manipulation} #main :is(.outline-pill,.web-design-cta-button,.sf-build-banner-cta):focus-visible{ outline:3px solid #ffe083;outline-offset:4px; } @media(hover:none){ #main :is(.outline-pill,.web-design-cta-button):hover{transform:none} #main :is(.outline-pill,.web-design-cta-button):active{transform:scale(.985)} } @media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto!important} #main :is(.outline-pill,.web-design-cta-button,.sf-build-banner-cta){animation:none!important;transition:none!important} } /* Creative-world tiles: elegant responsive lighting without modifying approved artwork. */ #main .disciplines .tile{ isolation:isolate; transition:border-color .35s ease,box-shadow .35s ease,filter .35s ease; } #main .disciplines .tile::before{ transition:filter .55s ease,background-position .55s ease!important; } #main .disciplines .tile::after{ transition:border-color .35s ease,box-shadow .35s ease; } #main .disciplines .tile .circle{ transition:transform .35s cubic-bezier(.2,.75,.25,1),background-color .35s ease,box-shadow .35s ease,color .35s ease; } @media(hover:hover){ #main .disciplines .tile:hover{box-shadow:inset 0 0 28px rgba(239,189,100,.18)} #main .disciplines .tile:hover::before{filter:brightness(1.2) saturate(1.1)} #main .disciplines .tile:hover::after{border-color:rgba(255,214,143,.9);box-shadow:inset 0 0 28px rgba(239,189,100,.18)} #main .disciplines .tile:hover .circle{transform:translateX(4px);background-color:#d7ac67;color:#101014;box-shadow:0 0 22px rgba(248,199,114,.65)} } #main .disciplines .tile:focus-visible{outline:3px solid #ffe29a;outline-offset:-4px} #main .disciplines .tile:focus-visible .circle{background-color:#d7ac67;color:#101014;box-shadow:0 0 22px rgba(248,199,114,.65)} #main .disciplines .tile:active .circle{transform:scale(.94)} @media(prefers-reduced-motion:reduce){ #main .disciplines .tile,#main .disciplines .tile::before,#main .disciplines .tile::after,#main .disciplines .tile .circle{transition:none!important} #main .disciplines .tile:active .circle{transform:none} } /* Mobile menu polish: smooth link response, scrollable compact panel, restrained gold detail. */ @media(max-width:700px){ .top nav.open{ max-height:calc(100dvh - 59px);overflow-y:auto;overscroll-behavior:contain; padding:10px 14px 18px; background:linear-gradient(160deg,#0d1420 0%,#05070b 72%); box-shadow:0 18px 35px rgba(0,0,0,.58); animation:sf-menu-enter .24s ease-out both; } .top nav.open a{ border-bottom:1px solid rgba(213,175,119,.16); border-radius:5px; transition:background-color .2s ease,color .2s ease,padding-left .2s ease; } .top nav.open a:focus-visible{outline:2px solid #ffe29a;outline-offset:-2px} .top nav.open a:active{background:rgba(219,174,92,.19)} .top .menu-button{ min-height:40px;min-width:64px; transition:border-color .2s ease,background-color .2s ease,box-shadow .2s ease; } .top .menu-button[aria-expanded="true"]{ border-color:#d9a956;background:#18140c;box-shadow:0 0 14px rgba(217,169,86,.25) } } @media(max-width:700px) and (hover:hover){ .top nav.open a:hover{background:rgba(219,174,92,.13);padding-left:18px;color:#ffe4b1} } @keyframes sf-menu-enter{from{opacity:0;transform:translateY(-7px)}to{opacity:1;transform:translateY(0)}} @media(prefers-reduced-motion:reduce){ .top nav.open{animation:none} .top nav.open a,.top .menu-button{transition:none} } /* Studio ForEver cinematic continuity: reduce visible section framing. Preserve artwork, layout, CTA outlines, and keyboard focus indicators. */ .top{border-bottom-color:transparent} #main .disciplines{border-top-color:transparent;border-bottom-color:transparent} #main #studio.feature-grid{border-top-color:transparent;border-bottom-color:transparent} #main section.below{border-top-color:transparent;border-bottom-color:transparent} #main #store,#main #payments,#main #contact{border-top:0!important} #main .sf-worlds{border-top-color:transparent;border-bottom-color:transparent} #main .disciplines .tile{border-color:transparent!important} #main .disciplines .tile:focus-visible{outline:3px solid #ffe29a;outline-offset:-4px} /* Cinematic flow, phase 2: soften structural dividers without touching art or controls. */ #main #studio .vision,#main #studio .studio-image,#main #studio .sidebar, #main #studio .featured,#main #studio .newsletter{ border-color:transparent; } #main #studio .section-bar,#main #studio .project-thumbs, #main #studio .project-captions{border-color:transparent} #main #web-design .web-design-showcase{border-color:transparent} #main #store>*,#main #payments>*,#main #contact>*{max-width:100%} /* Cinematic flow, phase 3: remove decorative card outlines while keeping interactive cues. */ #main #studio .project-thumbs a{border-color:transparent} #main #web-design .web-design-grid article{ border-color:transparent; background:linear-gradient(145deg,rgba(255,255,255,.025),rgba(255,255,255,.008)); } #main #web-design .web-design-grid{gap:clamp(18px,3vw,36px)} #main #studio .newsletter{border-top-color:transparent;border-left-color:transparent} /* Cinematic flow, phase 4: no ornamental line between the original hero and six-tile artwork. */ #main .hero::after{content:none!important;display:none!important} #main #web-design .web-design-showcase{max-width:none;width:100%} /* Cinematic flow, phase 5: blend adjacent homepage sections without replacing artwork. */ #main #web-design.web-design-section{ background:radial-gradient(ellipse at 85% 0%,rgba(217,169,86,.09),transparent 52%), linear-gradient(180deg,#030407 0%,#080e18 48%,#05080f 100%); } #main #studio.feature-grid{background:#05080f} #main #studio .vision{background:linear-gradient(115deg,#05080f,#09121d)} #main .web-design-intake{ border-top:0!important; background:linear-gradient(180deg,#080e18,#0b1425)!important; } #main #store{background:linear-gradient(180deg,#0b1425,#0b111b)!important} #main #payments{background:linear-gradient(180deg,#0b111b,#0b111b)!important} #main #contact{background:linear-gradient(180deg,#0b111b,#05070c)!important} /* Full homepage continuity: artwork stays intact, decorative section seams disappear. */ #main section:not(.sf-build-banner),#main .below,#main .feature-grid, #main .section-bar,#main .project-thumbs,#main .newsletter{ border-top-color:transparent!important; border-bottom-color:transparent!important; } #main .feature-grid .featured,#main .feature-grid .sidebar, #main .feature-grid .vision,#main .feature-grid .studio-image, #main .feature-grid .project-thumbs a{ border-color:transparent!important; } #main .project-thumbs img,#main .featured img{ display:block;max-width:100%;height:auto;object-fit:cover; } #main .web-design-grid>*,#main .feature-grid>*{min-width:0} #main .web-design-grid article{border:0!important;box-shadow:none!important} #main .web-design-intake{border:0!important} #main .sf-build-banner{border-color:transparent!important} /* Studio ForEver shared motion vocabulary — gentle, purposeful, reduced-motion safe. */ @media(prefers-reduced-motion:no-preference){ html{scroll-behavior:smooth} #main a,#main button{transition:color .25s ease,background-color .25s ease,transform .32s cubic-bezier(.2,.75,.25,1),box-shadow .32s ease} #main .outline-pill:hover,#main .sf-contact-actions a:hover{ transform:translateY(-2px);box-shadow:0 8px 30px rgba(225,177,104,.14)} #main .web-design-grid article,#main .feature-grid .featured{ transition:filter .4s ease} #main .web-design-grid article:hover,#main .feature-grid .featured:hover{ filter:brightness(1.045)} } @media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto!important} #main a,#main button,#main .web-design-grid article,#main .feature-grid .featured{ transition:none!important} }