@import url('https://fonts.googleapis.com/css2?family=Anton&family=Orbitron:wght@400;500;600;700;800&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800;900&family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&family=Orbitron:wght@600;700;800;900&display=swap'); :root{--bg:#090707;--panel:#120c0e;--line:#3b2025;--red:#ff293d;--white:#f8f1ef;--muted:#a89496;--display:'Barlow Condensed',sans-serif;--mono:'DM Mono',monospace;--body:'Manrope',sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:90px}body{margin:0;background:var(--bg);color:var(--white);font-family:var(--body);font-size:14px;overflow-x:hidden}body:before{content:'';position:fixed;inset:0;pointer-events:none;z-index:15;opacity:.035;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E")}a{color:inherit;text-decoration:none}img{display:block;max-width:100%}.wrap{width:min(1380px,90%);margin:auto}.cursor-glow{position:fixed;left:0;top:0;width:220px;height:220px;pointer-events:none;z-index:0;background:radial-gradient(circle,#ff293d0d,transparent 68%);transform:translate(-50%,-50%)}.nav{height:80px;padding:0 5%;display:flex;align-items:center;justify-content:space-between;gap:20px;position:sticky;top:0;z-index:30;background:#090707ed;backdrop-filter:blur(16px);border-bottom:1px solid #321b20;transition:height .25s,border-color .25s}.nav.scrolled{height:67px;border-color:#8b2935}.brand{display:flex;align-items:center;gap:10px;font-weight:900;font-size:13px;letter-spacing:-.02em}.brand-mark{width:39px;height:39px;border:1px solid var(--red);border-radius:50%;display:grid;place-items:center;font:800 17px var(--display);box-shadow:0 0 15px #ff293d20}.brand-mark span{color:var(--red)}.brand-name small{display:block;font:8px var(--mono);letter-spacing:.1em;color:#9b8588;margin-top:4px}.nav-links{display:flex;gap:26px;font:10px var(--mono);letter-spacing:.07em;color:#c5b9b9}.nav-links a{transition:color .2s}.nav-links a:hover,.nav-links a.active{color:var(--red)}.nav-cta,.btn{display:inline-flex;align-items:center;justify-content:space-between;gap:18px;padding:14px 18px;border:1px solid var(--red);border-radius:3px;font:10px var(--mono);letter-spacing:.06em;transition:transform .25s,box-shadow .25s,background .25s}.nav-cta{box-shadow:0 0 13px #ff293d20}.nav-cta:hover,.btn-red:hover{background:var(--red);box-shadow:0 0 13px #ff293d,0 0 32px #ff293d40;transform:translateY(-2px)}.nav-cta span,.btn span{color:var(--red)}.nav-cta:hover span{color:white}.menu-toggle{display:none;background:none;color:white;border:1px solid #49252a;padding:8px 11px}.hero{position:relative;overflow:hidden;background-image:none !important;background-color:transparent !important;border-bottom:1px solid #401e24}.hero-grid{display:grid;grid-template-columns:1.03fr .97fr;min-height:650px;align-items:center;position:relative;z-index:2}.hero-copy{padding:55px 0 35px}.eyebrow,.kicker{font:10px var(--mono);letter-spacing:.15em;color:#e3cccc;text-transform:uppercase}.eyebrow i,.hero-foot i{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--red);box-shadow:0 0 12px var(--red);margin-right:8px}.hero h1,.page-hero h1{font:900 clamp(77px,9.6vw,137px)/.76 var(--display);letter-spacing:-.04em;margin:30px 0 24px;text-transform:uppercase}.red{color:var(--red);text-shadow:0 0 24px #ff293d2b}.outline{color:transparent;-webkit-text-stroke:1px #f8f1ef}.hero-punch{font:italic 700 clamp(21px,2.6vw,32px)/1.08 var(--display);text-transform:uppercase;margin:0 0 13px}.hero-desc{max-width:510px;font-size:12px;color:#b8a5a6;line-height:1.9;margin:0}.hero-actions{display:flex;gap:20px;align-items:center;flex-wrap:wrap;margin-top:25px}.btn-red{background:linear-gradient(115deg,#a5091b,#ff293d 75%,#ff616b);color:white;box-shadow:0 0 16px #ff293d25}.btn-ghost,.btn-outline{border-color:#795158;color:#f3e4e5}.btn-ghost:hover,.btn-outline:hover{border-color:#ff6570;color:#ff737d;box-shadow:0 0 16px #ff293d25}.text-link{font:9px var(--mono);color:#e7d8d9;letter-spacing:.08em;white-space:nowrap}.text-link:hover{color:var(--red)}.hero-proof{display:flex;gap:14px;align-items:center;margin-top:33px;padding-top:16px;border-top:1px solid #48242a;max-width:475px}.proof-number{font:800 50.4px var(--display);letter-spacing:-.03em}.proof-number span{color:var(--red)}.hero-proof b,.hero-proof small{display:block}.hero-proof b{font:10.8px var(--mono);letter-spacing:.08em}.hero-proof small{color:#a18e90;font-size:10.8px;margin-top:5px}.hero-stage{height:620px;position:relative;display:flex;align-items:center;justify-content:center;isolation:isolate;perspective:900px}.stage-grid{position:absolute;inset:0;background-image:linear-gradient(#ff35400a 1px,transparent 1px),linear-gradient(90deg,#ff35400a 1px,transparent 1px);background-size:32px 32px;mask-image:linear-gradient(transparent,#000 18%,#000 80%,transparent)}.stage-halo{position:absolute;width:88%;height:66%;border:1px solid #ff334526;border-radius:50%;transform:rotate(-25deg);animation:halo 16s linear infinite}.stage-halo.halo-two{width:76%;height:80%;transform:rotate(29deg);border-color:#ff334518;animation-direction:reverse;animation-duration:21s}.stage-scan{position:absolute;left:4%;right:4%;height:1px;top:18%;background:linear-gradient(90deg,transparent,#ff33464d,transparent);box-shadow:0 0 16px #ff293d;animation:scan 7s ease-in-out infinite}.stage-topline,.stage-foot{position:absolute;left:0;right:0;display:flex;justify-content:space-between;gap:12px;font:8px var(--mono);letter-spacing:.1em;color:#b18d91}.stage-topline{top:6%}.stage-foot{bottom:4%;align-items:center}.mascot{position:absolute;width:100%;height:100%;object-fit:contain;object-position:center bottom;z-index:2;filter:drop-shadow(0 12px 26px #000);transition:transform .7s,filter .7s;animation:mascotEnter 1.2s cubic-bezier(.2,.8,.2,1) both}.hero-stage:hover .mascot{transform:translateY(-6px) scale(1.025);filter:drop-shadow(0 12px 26px #000)}.mascot-shadow{display:none}.floating-note{position:absolute;z-index:4;display:flex;align-items:center;gap:10px;padding:12px 14px;background:#10090bed;border:1px solid #6b292f;box-shadow:0 0 22px #ff273817;backdrop-filter:blur(10px);animation:float 5s ease-in-out infinite}.floating-note i{font-style:normal;font-size:24px;color:var(--red)}.floating-note b,.floating-note small{display:block}.floating-note b{font:9px var(--mono);color:#fff}.floating-note small{font:7px var(--mono);color:#b4a0a0;margin-top:5px}.note-a{top:17%;right:-2%;transform:rotate(3deg)}.note-b{bottom:18%;left:-2%;animation-delay:-2.5s;transform:rotate(-3deg)}.note-num{font:800 31px var(--display);color:var(--red)}.stage-stamp{position:absolute;z-index:3;bottom:11%;right:0;font:italic 800 24px/.82 var(--display);transform:rotate(-7deg);text-align:center}.stage-stamp em{font-size:45px;color:var(--red);font-style:normal}.stage-index{position:absolute;top:12%;left:0;font:9px var(--mono);color:#b08b90;letter-spacing:.1em}.pulse-dot{color:#ff6570}.hero-foot{position:relative;z-index:3;display:flex;justify-content:space-between;gap:18px;padding:16px 0;border-top:1px solid #472025;font:8px var(--mono);letter-spacing:.1em;color:#a18b8d}.hero-foot a{color:#ff6872}.marquee{overflow:hidden;border-bottom:1px solid #371b20;background:#10090a;padding:20px 0}.marquee-track{display:flex;width:max-content;align-items:center;gap:0;animation:marquee 36s linear infinite;will-change:transform}.marquee-group{display:flex;flex:none;align-items:center;gap:20px;padding-left:20px;padding-right:0;margin-right:0;white-space:nowrap;font:800 19px 'Orbitron',sans-serif;letter-spacing:.075em;text-transform:uppercase}.marquee-group b{display:inline-flex;align-items:center;justify-content:center;flex:none;color:var(--red);font-size:18px;line-height:1;margin-inline:-3px}.marquee:hover .marquee-track{animation-play-state:paused}.section{padding:100px 0}.intro{display:grid;grid-template-columns:.36fr 1fr;gap:7%;align-items:start}.intro-aside{height:100%;display:flex;flex-direction:column;justify-content:space-between;gap:40px}.kicker{color:var(--red)}.smile-mark{font:900 115px/.6 var(--display);color:var(--red);position:relative;width:100px;transform:rotate(-12deg);text-shadow:0 0 30px #ff293d2e}.smile-mark i{font:20px var(--mono);font-style:normal;position:absolute;right:0;top:-22px}.side-note{font:8px/1.8 var(--mono);color:#8e7b7d;letter-spacing:.08em}.intro h2,.section-head h2,.principles-intro h2,.process-intro h2,.studio-copy h2,.faq-grid h2,.trans-copy h2{font:800 clamp(43px,5.5vw,76px)/.9 var(--display);letter-spacing:-.02em;margin:15px 0 23px;text-transform:uppercase}.intro-copy>p{max-width:690px;color:#b29c9e;font-size:13px;line-height:2}.intro-stats{display:flex;gap:40px;flex-wrap:wrap;margin-top:35px;padding-top:22px;border-top:1px solid #442127}.intro-stats strong{font:800 39px var(--display);display:block}.intro-stats strong span{color:var(--red)}.intro-stats small{font:8px var(--mono);color:#8e7b7d;letter-spacing:.07em}.section-head{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:36px}.section-head>p{max-width:350px;color:#a99496;font-size:12px;line-height:1.85;margin:0 0 4px}.muted{color:#76686a}.work-section{background:#0d0809;border-block:1px solid #321a1e}.work-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:18px}.work-card{position:relative;display:block;overflow:hidden;min-height:255px;background:#15090c;border:1px solid #3c2025;isolation:isolate}.work-main{grid-row:span 2;min-height:560px}.work-card>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.64) saturate(.78);transition:transform .8s,filter .5s;z-index:-2}.work-card:hover>img{transform:scale(1.055);filter:brightness(.86) saturate(1.05)}.work-shade{position:absolute;inset:0;background:linear-gradient(0deg,#080506f2,transparent 72%);z-index:-1}.work-index{position:absolute;top:16px;left:17px;font:8px var(--mono);letter-spacing:.1em;color:#f4d9db}.work-arrow{position:absolute;right:16px;top:13px;width:32px;height:32px;display:grid;place-items:center;border:1px solid #e1a4aa88;border-radius:50%;transition:.3s}.work-card:hover .work-arrow{background:var(--red);border-color:var(--red);box-shadow:0 0 15px #ff293d;transform:rotate(45deg)}.work-title{position:absolute;bottom:25px;left:23px}.work-title small{font:8px var(--mono);color:#ff7079;letter-spacing:.1em}.work-title h3{font:900 68px/.76 var(--display);letter-spacing:-.025em;margin:12px 0 0}.work-title h3 em{font-style:normal;color:var(--red)}.work-title.small-title h3{font-size:35px}.work-side{display:grid;gap:18px}.work-bottom{display:flex;justify-content:space-between;gap:20px;margin-top:22px;font:8px var(--mono);color:#806f71;letter-spacing:.04em}.services-section{background:#10090b;border-block:1px solid #321a1e}.services-layout{display:grid;grid-template-columns:.78fr 1.22fr;gap:34px;align-items:stretch}.service-visual{position:sticky;top:105px;align-self:start;height:430px;overflow:hidden;border:1px solid #59252d;background:radial-gradient(ellipse at 50% 46%,#51101b,#180a0e 62%,#0d0809);display:flex;align-items:center;justify-content:center}.service-visual:before,.service-visual:after{content:'';position:absolute;border:1px solid #ff344022;border-radius:50%;width:340px;height:340px;transform:rotate(-25deg)}.service-visual:after{width:260px;height:380px;transform:rotate(35deg)}.visual-cross{position:absolute;top:18px;right:22px;color:var(--red);font-size:30px;animation:spin 20s linear infinite}.visual-code{position:absolute;top:20px;left:18px;font:8px/1.8 var(--mono);letter-spacing:.09em;color:#a8868a}.visual-big{position:relative;z-index:2;font:900 clamp(100px,15vw,210px)/.8 var(--display);letter-spacing:-.08em;text-shadow:0 0 35px #ff293d40;transition:transform .4s,opacity .25s}.visual-big span{color:var(--red)}.visual-bottom{position:absolute;bottom:18px;left:18px;right:18px;display:flex;justify-content:space-between;font:9px var(--mono);letter-spacing:.08em;color:#ffc0c4}.service-list{border-top:1px solid #48242a}.service-row{display:grid;grid-template-columns:30px 1fr 30px;gap:12px;align-items:center;padding:22px 10px;border-bottom:1px solid #48242a;transition:background .25s,padding .25s}.service-row:hover,.service-row.active{background:linear-gradient(90deg,#ff293d10,transparent);padding-left:17px}.service-no{font:10px var(--mono);color:var(--red)}.service-row h3{font:700 25px var(--display);margin:0}.service-row p{font-size:10px;color:#aa9698;line-height:1.7;margin:6px 0 0;max-width:460px}.service-tag{display:none}.service-arrow{width:30px;height:30px;border:1px solid #683039;border-radius:50%;display:grid;place-items:center;color:#ff6872;transition:.25s}.service-row:hover .service-arrow,.service-row.active .service-arrow{background:var(--red);color:white;box-shadow:0 0 15px #ff293d;border-color:var(--red)}.services-bottom{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:25px;font:8px var(--mono);letter-spacing:.07em;color:#a38b8e}.lab-section{background:#0a0708}.lab-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.lab-card{background:linear-gradient(145deg,#181013,#0d0a0b);border:1px solid #422329;padding:15px;min-width:0;transition:transform .35s,border-color .35s}.lab-card:hover{transform:translateY(-5px);border-color:#a33441}.lab-top{display:flex;justify-content:space-between;gap:10px;font:7px var(--mono);color:#d5b7ba;letter-spacing:.05em}.lab-top span:first-child{color:var(--red)}.hud-demo,.race-demo,.event-demo{height:245px;margin:20px 0 15px;border:1px solid #54262e;position:relative;overflow:hidden;background:radial-gradient(ellipse at center,#351018,#10090b 70%);padding:18px}.hud-top{display:flex;justify-content:space-between;font:7px var(--mono);color:#e4c9cc}.hud-health{height:7px;border:1px solid #ff5c6a;padding:1px;width:65%;margin:10px auto}.hud-health i{display:block;background:var(--red);width:83%;height:100%;box-shadow:0 0 10px var(--red)}.hud-reticle{position:absolute;top:38%;left:50%;transform:translate(-50%,-50%);font-size:65px;color:#ff33465c;text-shadow:0 0 20px #ff293d44}.hud-bottom{position:absolute;bottom:58px;left:15px;right:15px;display:flex;justify-content:space-between;font:8px var(--mono);color:#9c8386}.hud-bottom b{color:#fff}.hud-abilities{position:absolute;bottom:15px;left:0;right:0;display:flex;justify-content:center;gap:10px}.hud-abilities b{display:grid;place-items:center;width:30px;height:30px;border:1px solid #8e303b;color:#ff5262;background:#1d0b0f}.race-demo{background:linear-gradient(150deg,#2c0b12,#10090b);display:flex;flex-direction:column;justify-content:space-between}.race-top,.race-bottom{font:7px var(--mono);letter-spacing:.06em;color:#b9a0a3;display:flex;justify-content:space-between}.race-top span{color:var(--red)}.speed-value{font:900 83px/.8 var(--display);letter-spacing:-.03em;text-align:center}.speed-value small{font:8px var(--mono);display:block;letter-spacing:.15em;color:var(--red);margin-top:8px}.speed-meter{height:3px;background:#49232a}.speed-meter i{display:block;width:76%;height:100%;background:var(--red);box-shadow:0 0 12px var(--red)}.race-bottom b{display:block;color:#fff;font-size:10px;margin-top:5px}.event-demo{background:radial-gradient(ellipse at 75% 15%,#75111f,#16090d 60%);display:flex;flex-direction:column;justify-content:space-between}.event-demo>small{font:7px var(--mono);color:#ff9ba3;letter-spacing:.12em}.event-demo h4{font:900 47px/.8 var(--display);margin:0;text-shadow:0 0 20px #ff293d44}.rewards{display:flex;gap:7px}.rewards span{width:31px;height:31px;display:grid;place-items:center;border:1px solid #b64a55;background:#2a0d12;color:#ff9ba3;font:10px var(--mono)}.claim-demo{padding:10px;text-align:center;background:var(--red);box-shadow:0 0 16px #ff293d55;font:8px var(--mono)}.lab-copy h3{font:700 22px var(--display);margin:0}.lab-copy p{font-size:10px;color:#a79294;line-height:1.7;margin:7px 0 0}.lab-disclaimer{font-size:9px;color:#806f71;margin-top:18px}.transformation-section{padding:90px 0;background:#f0e9e3;color:#170d0f;overflow:hidden}.transformation-grid{display:grid;grid-template-columns:.78fr 1.22fr;gap:6%;align-items:center}.trans-copy .kicker{color:#a10e20}.trans-copy h2{font-size:clamp(48px,6vw,80px)}.trans-copy>p{color:#5f4b4d;line-height:1.9;font-size:12px;margin:20px 0 28px;max-width:420px}.compare-widget{height:360px;position:relative;overflow:hidden;background:#190b0e;border:1px solid #4a2027;--split:52%}.compare-widget.is-auto-preview .compare-before,.compare-widget.is-auto-preview .compare-after{transition:clip-path .8s cubic-bezier(.22,.68,.32,1)}.compare-widget.is-auto-preview .compare-handle{transition:left .8s cubic-bezier(.22,.68,.32,1)}.compare-before,.compare-after{position:absolute;inset:0;padding:28px}.compare-before{background:repeating-linear-gradient(135deg,#201a1b,#201a1b 12px,#261e20 12px,#261e20 24px);clip-path:inset(0 calc(100% - var(--split)) 0 0)}.compare-after{background:radial-gradient(ellipse at 75% 30%,#6a0f1d,#16090c 60%);clip-path:inset(0 0 0 var(--split))}.compare-label{position:absolute;z-index:5;top:14px;font:8px var(--mono);letter-spacing:.1em}.before-label{left:15px;color:#b7a9a9}.after-label{right:15px;color:#ff8189}.tiny-title{font:9px var(--mono);color:#9c8e8e}.tiny-boxes{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:26px}.tiny-boxes i{height:49px;background:#453638;border:1px solid #5a4b4d;transform:rotate(var(--r,0deg))}.tiny-boxes i:nth-child(2n){--r:3deg}.tiny-boxes i:nth-child(3n){--r:-4deg}.tiny-note{display:block;font:800 32px var(--display);margin-top:30px;color:#d0babb}.after-title{display:block;font:800 49px/.83 var(--display);margin-top:30px}.after-title b{color:var(--red)}.after-sub{display:block;font:8px var(--mono);color:#c9aeb1;margin-top:13px}.after-bar{height:4px;background:#4d242b;margin-top:20px}.after-bar i{display:block;width:72%;height:100%;background:var(--red);box-shadow:0 0 10px var(--red)}.after-stats{display:flex;gap:25px;margin-top:23px}.after-stats b{font:800 22px var(--display)}.after-tag{display:block;margin-top:22px;font:8px var(--mono);color:#ff8189}.compare-range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;z-index:8}.compare-handle{position:absolute;z-index:6;top:0;bottom:0;left:var(--split);width:1px;background:#fff;box-shadow:0 0 14px #ff293d;pointer-events:none;transform:translateX(-50%)}.compare-handle span{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--red);color:#fff;font-size:19px;box-shadow:0 0 20px #ff293d88}.principles-section{background:#10090b;border-block:1px solid #321a1e}.principles-grid{display:grid;grid-template-columns:.7fr 1.3fr;gap:8%;align-items:center}.principles-intro>p{color:#ac999b;line-height:1.9;font-size:12px;max-width:330px}.principle-stage{position:relative;min-height:380px;border:1px solid #52232b;background:radial-gradient(ellipse at 72% 45%,#3e0c15,#10090b 68%);padding:25px;overflow:hidden}.principle-progress{display:flex;align-items:center;gap:15px;font:8px var(--mono);color:#ff8c94}.principle-progress>div{height:2px;background:#51252c;flex:1}.principle-progress i{display:block;width:25%;height:100%;background:var(--red);transition:width .4s}.principle-word{font:900 clamp(67px,10vw,130px)/.8 var(--display);letter-spacing:-.04em;margin-top:65px;color:transparent;-webkit-text-stroke:1px #f8e8e9;transition:opacity .2s,transform .2s}.principle-text{position:relative;z-index:2;max-width:340px;margin-top:25px}.principle-text h3{font:700 23px var(--display);margin:0}.principle-text p{font-size:10px;color:#b09b9d;line-height:1.8}.principle-controls{position:absolute;right:22px;bottom:22px;display:flex;gap:8px}.principle-controls button{width:37px;height:37px;border:1px solid #72313b;background:#180b0e;color:#ff727b;cursor:pointer;transition:.2s}.principle-controls button:hover{background:var(--red);color:white;box-shadow:0 0 15px #ff293d}.principle-orbit{position:absolute;right:8%;top:27%;font-size:130px;color:#ff293d12;animation:spin 30s linear infinite}.process-section{background:#10090b}.process-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:9%}.process-intro>p{max-width:390px;color:#b29c9e;font-size:12px;line-height:1.9;margin:22px 0}.process-list{border-top:1px solid #48242a}.process-list article{display:grid;grid-template-columns:36px 1fr 20px;gap:15px;padding:23px 0;border-bottom:1px solid #48242a}.process-list article>span{font:10px var(--mono);color:var(--red)}.process-list h3{font:700 22px var(--display);margin:0}.process-list p{font-size:10px;color:#a99496;line-height:1.8;margin:7px 0 0}.process-list article>b{color:var(--red);font-weight:400}.studio-section{background:radial-gradient(ellipse at 22% 50%,#3a0c13,#0a0708 65%);border-block:1px solid #321a1e}.studio-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:8%;align-items:center}.studio-mascot{height:450px;position:relative;border:1px solid #51242b;background:radial-gradient(ellipse,#41121a,#11090b 70%);overflow:hidden}.studio-mascot img{position:absolute;width:100%;height:100%;object-fit:contain;object-position:center bottom;transition:transform .7s}.studio-mascot:hover img{transform:scale(1.04)}.studio-mascot span{position:absolute;bottom:15px;left:15px;font:8px var(--mono);letter-spacing:.1em;color:#ff9aa1}.studio-copy>p{color:#b09d9e;font-size:12px;line-height:1.95}.studio-facts{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0}.studio-facts span{border:1px solid #55242c;padding:8px 10px;font:7px var(--mono);color:#d9bfc1;letter-spacing:.05em}.faq-section{background:#0a0708}.faq-grid{display:grid;grid-template-columns:.7fr 1.3fr;gap:9%}.faq-grid>div:first-child>p{font-size:11px;color:#aa9698;line-height:1.8;margin:22px 0}.faq-list{border-top:1px solid #48242a}.faq-list details{border-bottom:1px solid #48242a}.faq-list summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:35px 1fr 20px;align-items:center;gap:10px;padding:19px 0;font:700 21px var(--display)}.faq-list summary::-webkit-details-marker{display:none}.faq-list summary>span{font:9px var(--mono);color:var(--red)}.faq-list summary>b{font:18px var(--body);color:var(--red);transition:transform .25s}.faq-list details[open] summary>b{transform:rotate(45deg)}.faq-list details p{padding:0 28px 20px 45px;margin:0;color:#ac999b;font-size:11px;line-height:1.9;animation:fadeUp .3s ease both}.final-cta{position:relative;text-align:center;overflow:hidden;padding:105px 0;background:radial-gradient(ellipse at center,#3c0b13,transparent 66%);border-top:1px solid #3a1d22}.cta-inner{position:relative;z-index:2}.final-cta .kicker{color:#f4c8cb}.final-cta h2{font:900 clamp(64px,9vw,120px)/.82 var(--display);letter-spacing:-.035em;margin:22px 0}.final-cta h2 em{font-style:normal;color:var(--red);text-shadow:0 0 25px #ff293d30}.final-cta p{color:#b29c9e;font-size:12px;margin:0 auto 27px;line-height:1.8}.cta-actions{display:flex;justify-content:center;align-items:center;gap:24px;flex-wrap:wrap}.cta-email{font:8px var(--mono);color:#d2babc;letter-spacing:.07em}.cta-email:hover{color:var(--red)}.cta-foot{margin-top:45px;padding-top:15px;border-top:1px solid #442127;font:8px var(--mono);color:#8d777a;letter-spacing:.12em}.cta-orb{position:absolute;width:340px;height:340px;border:1px solid #ff293d16;border-radius:50%;top:15%;animation:halo 25s linear infinite}.orb-left{left:-150px}.orb-right{right:-150px;animation-direction:reverse}.footer{border-top:1px solid #3b1b20;padding:30px 0 22px}.footer-top,.footer-bottom{display:flex;justify-content:space-between;gap:22px;align-items:center}.footer-links{display:flex;gap:18px;flex-wrap:wrap;font:8px var(--mono);color:#bba8a8}.footer-links a:hover{color:var(--red)}.footer-bottom{border-top:1px solid #2e191c;margin-top:24px;padding-top:17px;font:8px var(--mono);letter-spacing:.06em;color:#887577}.footer-bottom a{color:#ff6570}.mobile-cta{display:none} @keyframes float{0%,100%{translate:0 0}50%{translate:0 -10px}}@keyframes halo{to{rotate:360deg}}@keyframes scan{0%,100%{top:15%;opacity:0}20%,80%{opacity:1}50%{top:83%}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-25%)}}@keyframes mascotEnter{from{opacity:0;transform:translateY(25px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes fadeUp{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1)}.reveal.visible{opacity:1;transform:none} /* Full-bleed philosophy / intro section */ .intro.wrap{width:100%;max-width:none;padding-left:3.5%;padding-right:3.5%;} @media(max-width:650px){.intro.wrap{width:100%;padding-left:5.5%;padding-right:5.5%;}} @media(max-width:900px){.nav-links{gap:14px}.hero-grid{grid-template-columns:1fr .85fr}.hero-stage{height:550px}.service-row{grid-template-columns:27px 1fr 28px}.work-main{min-height:460px}.services-layout{gap:20px}.service-visual{height:400px}.principles-grid,.faq-grid{gap:5%}} @media(max-width:650px){.nav{height:69px;padding:0 5%;gap:9px}.nav.scrolled{height:63px}.brand{font-size:11px}.brand-mark{width:34px;height:34px}.brand-name small{font-size:7px}.menu-toggle{display:flex;align-items:center;gap:6px;margin-left:auto;font:8px var(--mono)}.menu-toggle span{font-size:15px;color:var(--red)}.nav-links{display:none;position:absolute;top:68px;left:0;right:0;padding:24px 6%;background:#10090b;flex-direction:column;gap:22px;border-bottom:1px solid #472127;font-size:12px}.nav-links.open{display:flex}.nav-cta{font-size:8px;padding:10px;gap:8px}.wrap{width:89%}.hero-grid{display:flex;flex-direction:column;align-items:stretch;min-height:0}.hero-copy{padding:38px 0 0}.hero h1{font-size:clamp(76px,17vw,112px);margin:26px 0 22px}.hero-punch{font-size:25px}.hero-desc{font-size:11px}.hero-actions{gap:15px}.btn{font-size:8px;padding:13px}.hero-proof{margin-top:25px}.hero-stage{height:420px;margin-top:0}.mascot{height:100%}.stage-topline{top:5%;font-size:6px}.stage-foot{font-size:6px;bottom:3%}.note-a{top:12%;right:-2%}.note-b{bottom:13%;left:-2%}.floating-note{padding:9px 10px}.floating-note b{font-size:7px}.floating-note small{font-size:6px}.stage-sigil{bottom:6%;font-size:21px}.stage-sigil em{font-size:34px}.stage-index{top:6%}.hero-foot{font-size:6px;flex-wrap:wrap;line-height:1.7}.marquee-group{gap:22px;padding-right:22px;font-size:14px;letter-spacing:.055em}.section{padding:72px 0}.intro{grid-template-columns:1fr;gap:20px}.intro-aside{flex-direction:row;align-items:center;gap:10px}.smile-mark{font-size:70px;width:65px}.side-note{font-size:6px}.intro h2,.section-head h2,.principles-intro h2,.process-intro h2,.studio-copy h2,.faq-grid h2,.trans-copy h2{font-size:clamp(42px,11vw,60px)}.intro-copy>p{font-size:11px}.intro-stats{gap:22px}.intro-stats strong{font-size:32px}.intro-stats small{font-size:6px}.section-head{align-items:start;flex-direction:column;gap:16px;margin-bottom:28px}.section-head>p{font-size:11px}.work-grid{grid-template-columns:1fr}.work-main{grid-row:auto;min-height:380px}.work-card{min-height:260px}.work-title h3{font-size:57px}.work-title.small-title h3{font-size:34px}.work-bottom{align-items:start;flex-direction:column;line-height:1.7}.services-layout{grid-template-columns:1fr}.service-visual{position:relative;top:auto;height:300px}.visual-big{font-size:150px}.service-row{padding:20px 2px;grid-template-columns:24px 1fr 27px;gap:9px}.service-row h3{font-size:22px}.service-row p{font-size:9px}.service-arrow{width:27px;height:27px}.services-bottom{align-items:start;flex-direction:column;line-height:1.7}.lab-grid{grid-template-columns:1fr}.lab-card{padding:14px}.hud-demo,.race-demo,.event-demo{height:230px}.transformation-section{padding:70px 0}.transformation-grid{grid-template-columns:1fr;gap:30px}.compare-widget{height:320px}.principles-grid,.process-grid,.studio-grid,.faq-grid{grid-template-columns:1fr;gap:32px}.principle-stage{min-height:330px;padding:18px}.principle-word{font-size:76px;margin-top:60px}.principle-controls{right:15px;bottom:15px}.process-list article{grid-template-columns:27px 1fr 15px;gap:10px}.process-list h3{font-size:20px}.studio-mascot{height:350px}.faq-list summary{font-size:19px;grid-template-columns:28px 1fr 18px}.faq-list details p{padding-left:38px}.final-cta{padding:78px 0 95px}.final-cta h2{font-size:clamp(60px,14vw,88px)}.cta-actions{gap:18px}.cta-foot{font-size:6px;line-height:1.8}.footer-top,.footer-bottom{align-items:start;flex-direction:column;line-height:1.8}.footer-links{gap:14px}.mobile-cta{display:block;position:fixed;bottom:12px;left:12px;right:12px;z-index:29}.mobile-cta a{display:flex;justify-content:space-between;align-items:center;background:var(--red);color:white;padding:15px 18px;font:10px var(--mono);box-shadow:0 0 20px #ff293d55}.page-hero{padding:60px 0 45px}.page-hero h1{font-size:clamp(60px,14vw,88px)}.page-content{padding:40px 0 70px}.detail{grid-template-columns:25px 1fr;gap:10px;padding:23px 0}.detail h2{font-size:27px}.detail p{grid-column:2}.portfolio-grid{grid-template-columns:1fr}.about-art{height:370px}.contact-form{grid-template-columns:1fr}.field.full,.form-note,.form-success{grid-column:auto}.case-art{height:300px}} @media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}.marquee-track{animation:none}} /* Fix: use the seated-chair character artwork as a dedicated right-side visual layer. */ .hero-stage{background-image:linear-gradient(90deg,rgba(9,7,8,.12),rgba(9,7,8,0)),url('https://static.wixstatic.com/media/fb116b_a4076a9611f44dd298e0c214bcfc661a~mv2.png');background-size:cover;background-position:center;background-repeat:no-repeat;} .hero-stage .mascot{display:none!important;} .hero-stage .stage-grid,.hero-stage .stage-halo,.hero-stage .stage-scan{opacity:.18;} /* Latest requested hero background: clean artwork, no embedded lettering or cape */ .hero{background-color:#090707;background-image:linear-gradient(90deg,rgba(5,4,5,.30) 0%,rgba(5,4,5,.06) 52%,rgba(5,4,5,.02) 100%),url('https://static.wixstatic.com/media/fb116b_a4076a9611f44dd298e0c214bcfc661a~mv2.png') !important;background-size:cover !important;background-position:center center !important;background-repeat:no-repeat !important;min-height:100vh;} .hero-grid{min-height:calc(100vh - 80px);grid-template-columns:1.02fr .98fr;} .hero-copy{position:relative;z-index:5;} .hero-stage{background:none !important;} .hero-stage .mascot,.hero-stage .mascot-shadow,.hero-stage .stage-grid,.hero-stage .stage-halo,.hero-stage .stage-scan,.hero-stage .stage-topline,.hero-stage .stage-foot,.hero-stage .floating-note,.hero-stage .stage-stamp,.hero-stage .stage-index{display:none !important;} @media(max-width:650px){.hero{background-position:62% center !important;}.hero-grid{min-height:0;}.hero-stage{height:220px;}} /* Custom cursor motion: subtle neon-red ring and bright core; native cursor stays available. */ .cursor-ring,.cursor-dot{position:fixed;left:0;top:0;pointer-events:none;z-index:1000;border-radius:50%;opacity:0;will-change:transform,opacity;transition:opacity .2s ease;} .cursor-ring{width:34px;height:34px;border:1px solid rgba(255,41,61,.8);box-shadow:0 0 16px rgba(255,41,61,.18),inset 0 0 10px rgba(255,41,61,.06);transform:translate3d(-50%,-50%,0);transition:width .22s ease,height .22s ease,border-color .22s ease,background .22s ease,opacity .2s ease;} .cursor-dot{width:5px;height:5px;background:#ff293d;box-shadow:0 0 9px #ff293d,0 0 18px rgba(255,41,61,.6);transform:translate3d(-50%,-50%,0);} body.cursor-active .cursor-ring,body.cursor-active .cursor-dot{opacity:1;} body.cursor-hover .cursor-ring{width:52px;height:52px;border-color:#ff5263;background:rgba(255,41,61,.07);} body.cursor-click .cursor-ring{width:24px;height:24px;background:rgba(255,41,61,.18);} @media(pointer:coarse),(prefers-reduced-motion:reduce){.cursor-ring,.cursor-dot{display:none!important}} /* Requested: no character rollover glow, movement, scale, or filter animation. */ .hero-stage:hover .mascot,.hero-stage .mascot:hover{transform:none!important;filter:none!important;box-shadow:none!important;text-shadow:none!important;} /* Hero description now uses the exact ticker typography: Orbitron 800, uppercase, matching letter spacing. */ .hero-desc{font-family:'Orbitron',sans-serif!important;font-weight:800!important;letter-spacing:.075em!important;text-transform:uppercase!important;font-size:clamp(12px,1.05vw,19px)!important;line-height:1.85!important;color:#d0c5c6;max-width:680px} @media(max-width:650px){.hero-desc{font-size:11px;line-height:1.8;letter-spacing:-.03em}} /* Brand mascot added to full-width philosophy section */ .intro{grid-template-columns:minmax(320px,.78fr) minmax(0,1.22fr);gap:5%;align-items:center;min-height:660px;overflow:hidden;} .intro-aside{position:relative;min-height:520px;justify-content:space-between;gap:16px;} .intro-mascot-wrap{position:absolute;inset:25px -18% 0 -18%;display:flex;align-items:center;justify-content:center;pointer-events:none;} .intro-mascot{display:block;width:100%;height:100%;max-height:590px;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 22px 34px rgba(0,0,0,.45));} .intro-aside .kicker,.intro-aside .side-note{position:relative;z-index:1;} .intro-aside .side-note{margin-top:auto;} @media(max-width:900px){.intro{grid-template-columns:minmax(250px,.75fr) minmax(0,1.25fr);gap:4%;min-height:570px}.intro-aside{min-height:460px}.intro-mascot{max-height:500px}.intro h2{font-size:clamp(38px,4.6vw,60px)}} @media(max-width:650px){.intro{display:flex;flex-direction:column;align-items:stretch;gap:25px;min-height:0}.intro-aside{min-height:340px;height:340px;order:0}.intro-mascot-wrap{inset:8px -8% 0 -8%;}.intro-mascot{max-height:390px;object-position:center bottom}.intro-aside .side-note{display:none}.intro-copy{order:1}.intro h2{font-size:clamp(38px,10vw,54px)}} /* Increase the philosophy section label by 30% from 10px to 13px. */ .intro-aside .kicker{font-size:13px} /* Philosophy section: move the three proof points into a vertical stack on the far right. */ .intro-copy{display:grid;grid-template-columns:minmax(0,1fr) clamp(190px,17vw,270px);column-gap:clamp(28px,4vw,72px);align-items:center;} .intro-copy h2,.intro-copy>p{grid-column:1;} .intro-copy h2{grid-row:1;margin-top:0;} .intro-copy>p{grid-row:2;max-width:100%;margin-top:0;} .intro-stats{grid-column:2;grid-row:1 / span 2;display:flex;flex-direction:column;gap:0;margin-top:0;padding-top:0;border-top:0;align-self:stretch;justify-content:center;} .intro-stats>div{padding:22px 0 22px 22px;border-left:1px solid #442127;border-bottom:1px solid #442127;} .intro-stats>div:last-child{border-bottom:0;} .intro-stats strong{font-size:clamp(36px,3.2vw,48px);line-height:1;} .intro-stats small{display:block;margin-top:7px;line-height:1.6;} @media(max-width:900px){.intro-copy{grid-template-columns:minmax(0,1fr) 170px;column-gap:22px}.intro-stats>div{padding:18px 0 18px 15px}.intro-stats small{font-size:7px}} @media(max-width:650px){.intro-copy{display:block}.intro-stats{display:flex;flex-direction:column;margin-top:28px;padding-top:0;border-top:1px solid #442127;gap:0}.intro-stats>div{padding:15px 0 15px 14px;border-left:1px solid #442127;border-bottom:1px solid #442127}.intro-stats>div:last-child{border-bottom:0}.intro-stats strong{font-size:32px}.intro-stats small{font-size:7px}} /* Philosophy proof points: icons and 25% larger typography */ .intro-stats .stat-icon{display:block;color:var(--red);font-size:1.25em;line-height:1;margin-bottom:10px;font-family:var(--mono);font-weight:700;} .intro-stats strong{font-size:clamp(45px,4vw,60px);line-height:1;} .intro-stats small{font-size:clamp(8px,.7vw,10px);letter-spacing:.12em;} @media(max-width:900px){.intro-stats strong{font-size:clamp(40px,4vw,54px)}.intro-stats small{font-size:8px}} @media(max-width:650px){.intro-stats strong{font-size:40px}.intro-stats small{font-size:8px}.intro-stats .stat-icon{font-size:16px;margin-bottom:7px}} /* Selected Worlds: full-width, four equal rounded cards */ .work-section{width:100%;overflow:hidden;padding-left:0;padding-right:0} .work-wrap{width:calc(100% - 8vw);max-width:none;margin:0 auto} .work-grid-four{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;align-items:stretch} .work-grid-four .work-card,.work-grid-four .work-main{grid-row:auto;min-height:0;height:auto;aspect-ratio:0.92/1;border-radius:22px;overflow:hidden} .work-grid-four .work-card>img{z-index:-2} .work-grid-four .work-title h3{font-size:clamp(22px,2.1vw,38px);line-height:.98} .work-grid-four .work-title small{font-size:8px;letter-spacing:.08em} .work-grid-four .work-index{font-size:8px} .work-grid-four .work-arrow{border-radius:50%} @media(max-width:1000px){.work-grid-four{grid-template-columns:repeat(2,minmax(0,1fr))}.work-grid-four .work-card{aspect-ratio:1.15/1}} @media(max-width:650px){.work-wrap{width:89%}.work-grid-four{grid-template-columns:1fr;gap:14px}.work-grid-four .work-card{aspect-ratio:1.1/1;min-height:280px}.work-grid-four .work-title h3{font-size:42px}.work-grid-four .work-title small{font-size:8px}} /* Premium Selected Worlds interaction pass */ .work-grid-four{gap:clamp(14px,1.35vw,22px)} .work-grid-four .work-card{border:1px solid rgba(255,255,255,.13);border-radius:20px;background:#10090b;box-shadow:0 12px 28px rgba(0,0,0,.22);transform:translateY(0) scale(1);transition:transform .42s cubic-bezier(.2,.8,.2,1),border-color .35s ease,box-shadow .4s ease;will-change:transform} .work-grid-four .work-card>img{filter:brightness(1.02) saturate(1.06) contrast(1.02);transform:scale(1.001);transition:transform .85s cubic-bezier(.16,1,.3,1),filter .5s ease;z-index:-2} .work-grid-four .work-card .work-shade{background:linear-gradient(180deg,rgba(5,4,6,.14) 0%,transparent 28%,rgba(5,4,6,.08) 48%,rgba(5,4,6,.76) 100%);transition:background .4s ease} .work-grid-four .work-card::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(112deg,transparent 15%,rgba(255,255,255,.13) 32%,rgba(255,41,61,.13) 37%,transparent 52%);transform:translateX(-130%);transition:transform .9s cubic-bezier(.2,.7,.2,1)} .work-grid-four .work-card::after{content:"EXPLORE CASE STUDY ↗";position:absolute;left:17px;bottom:17px;z-index:2;padding:9px 11px;border:1px solid rgba(255,255,255,.24);border-radius:3px;background:rgba(10,7,8,.74);backdrop-filter:blur(8px);font:8px var(--mono);letter-spacing:.11em;color:#fff;opacity:0;transform:translateY(8px);transition:opacity .3s ease,transform .35s ease,border-color .3s ease} .work-grid-four .work-card:hover,.work-grid-four .work-card:focus-visible{transform:translateY(-9px) scale(1.012);border-color:rgba(255,41,61,.95);box-shadow:0 22px 46px rgba(0,0,0,.46),0 0 0 1px rgba(255,41,61,.25),0 0 32px rgba(255,41,61,.11);outline:none} .work-grid-four .work-card:hover>img,.work-grid-four .work-card:focus-visible>img{transform:scale(1.085);filter:brightness(1.1) saturate(1.18) contrast(1.04)} .work-grid-four .work-card:hover::before,.work-grid-four .work-card:focus-visible::before{transform:translateX(130%)} .work-grid-four .work-card:hover::after,.work-grid-four .work-card:focus-visible::after{opacity:1;transform:translateY(0);border-color:rgba(255,41,61,.72)} .work-grid-four .work-index{top:15px;left:15px;padding:8px 10px;border:1px solid rgba(255,255,255,.22);border-radius:3px;background:rgba(8,6,7,.62);backdrop-filter:blur(8px);font-size:8px;letter-spacing:.13em;color:#fff} .work-grid-four .work-arrow{top:14px;right:14px;width:38px;height:38px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.55);background:rgba(8,6,7,.48);backdrop-filter:blur(8px);font-size:18px;transition:transform .35s ease,background .3s ease,border-color .3s ease,box-shadow .3s ease} .work-grid-four .work-card:hover .work-arrow,.work-grid-four .work-card:focus-visible .work-arrow{transform:rotate(45deg);background:var(--red);border-color:var(--red);box-shadow:0 0 22px rgba(255,41,61,.4)} .work-grid-four .work-title{left:18px;right:18px;bottom:20px;transition:transform .35s ease} .work-grid-four .work-title small{display:inline-block;margin-bottom:10px;color:#ffd7da;font-size:8px;letter-spacing:.13em} .work-grid-four .work-title h3{text-shadow:0 4px 20px rgba(0,0,0,.4)} .work-grid-four .work-card:hover .work-title,.work-grid-four .work-card:focus-visible .work-title{transform:translateY(-13px)} .work-grid-four .work-bottom{margin-top:22px} @media(max-width:650px){.work-grid-four .work-card::after{opacity:1;transform:none;font-size:7px;bottom:12px;left:12px;padding:7px 8px}.work-grid-four .work-title{bottom:18px}.work-grid-four .work-card:hover,.work-grid-four .work-card:focus-visible{transform:translateY(-3px) scale(1.005)}} @media(prefers-reduced-motion:reduce){.work-grid-four .work-card,.work-grid-four .work-card>img,.work-grid-four .work-card::before,.work-grid-four .work-card::after,.work-grid-four .work-arrow,.work-grid-four .work-title{transition:none;animation:none}} /* High-visibility portfolio card labels: deliberate override of earlier rules */ #work .work-grid-four .work-title.small-title > small, .work-grid-four .work-title.small-title > small, .work-grid-four .work-index { font-family: var(--mono) !important; font-size: clamp(11px, 0.82vw, 14px) !important; line-height: 1.35 !important; font-weight: 700 !important; letter-spacing: .075em !important; color: #fff2f2 !important; text-shadow: 0 2px 8px rgba(0,0,0,.95), 0 0 3px rgba(0,0,0,.95) !important; } #work .work-grid-four .work-title.small-title > small { display: inline-block !important; max-width: 100% !important; padding: 5px 7px !important; border-left: 2px solid #ff293d !important; border-radius: 0 3px 3px 0 !important; background: rgba(7,5,6,.78) !important; backdrop-filter: blur(4px) !important; } #work .work-grid-four .work-index { padding: 5px 7px !important; background: rgba(7,5,6,.78) !important; border-radius: 3px !important; display: inline-block !important; } @media (max-width: 700px) { #work .work-grid-four .work-title.small-title > small, .work-grid-four .work-title.small-title > small, .work-grid-four .work-index { font-size: 10px !important; } } /* Case-study CTA: larger, bottom-right placement with red hover glow */ .work-grid-four .work-card::after{ left:auto!important;right:20px!important;bottom:20px!important; padding:14px 18px!important;min-height:44px;display:flex;align-items:center;justify-content:center; font-size:11px!important;font-weight:700;letter-spacing:.09em; border:1px solid rgba(255,41,61,.62)!important;border-radius:5px!important; background:rgba(8,5,7,.9)!important;color:#fff!important; box-shadow:0 5px 18px rgba(0,0,0,.4); opacity:0;transform:translateY(10px);transition:opacity .3s ease,transform .35s ease,box-shadow .3s ease,border-color .3s ease,background .3s ease; } .work-grid-four .work-card:hover::after,.work-grid-four .work-card:focus-visible::after{ opacity:1;transform:translateY(0);border-color:#ff293d!important; background:rgba(18,5,8,.96)!important; box-shadow:0 0 12px rgba(255,41,61,.5),0 0 28px rgba(255,41,61,.34),inset 0 0 12px rgba(255,41,61,.1); } @media(max-width:650px){.work-grid-four .work-card::after{right:12px!important;bottom:12px!important;left:auto!important;padding:11px 13px!important;font-size:9px!important;min-height:38px;opacity:1;transform:none}} /* Creative case-study CTA — angular red game-interface treatment */ .work-grid-four .work-card::after{ left:auto!important;right:18px!important;bottom:18px!important; min-height:52px!important;padding:0 22px!important; display:flex!important;align-items:center!important;justify-content:center!important; font-family:var(--mono)!important;font-size:12px!important;font-weight:800!important; letter-spacing:.08em!important;text-transform:uppercase!important; color:#fff!important;background:linear-gradient(110deg,#ff263d 0%,#d90d27 72%,#a8061b 100%)!important; border:1px solid rgba(255,100,115,.95)!important;border-radius:3px!important; clip-path:polygon(0 0, calc(100% - 13px) 0,100% 13px,100% 100%,13px 100%,0 calc(100% - 13px)); box-shadow:0 5px 16px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.2)!important; opacity:0;transform:translateY(9px) skewX(-1deg); transition:opacity .25s ease,transform .3s ease,filter .3s ease,box-shadow .3s ease!important; } .work-grid-four .work-card:hover::after,.work-grid-four .work-card:focus-visible::after{ opacity:1;transform:translateY(0) skewX(-1deg)!important;filter:brightness(1.13)!important; box-shadow:0 0 0 1px rgba(255,41,61,.3),0 0 18px rgba(255,41,61,.55),0 0 38px rgba(255,41,61,.3),inset 0 1px 0 rgba(255,255,255,.3)!important; } @media(max-width:650px){.work-grid-four .work-card::after{right:12px!important;bottom:12px!important;left:auto!important;padding:0 14px!important;min-height:44px!important;font-size:10px!important;opacity:1;transform:none!important}} /* Reliable portfolio CTA: real element inside each full-card link */ .work-grid-four .work-card::after{content:none!important;display:none!important} .work-grid-four .work-card-cta{position:absolute;right:18px;bottom:18px;z-index:5;display:flex;align-items:center;gap:16px;min-height:52px;padding:0 8px 0 18px;clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px));background:linear-gradient(110deg,#ff263d 0%,#e4142e 70%,#b50920 100%);border:1px solid #ff7b87;color:#fff;font:800 12px/1 var(--mono);letter-spacing:.075em;text-transform:uppercase;box-shadow:0 6px 20px rgba(0,0,0,.4),inset 0 1px rgba(255,255,255,.25);opacity:0;visibility:hidden;transform:translate3d(0,10px,0);transition:opacity .22s ease,transform .28s ease,filter .22s ease,box-shadow .22s ease;pointer-events:none} .work-grid-four .work-card-cta b{display:grid;place-items:center;width:36px;height:36px;background:#16090c;color:#ff4657;font:800 20px/1 var(--body);transition:transform .25s ease,background .25s ease,color .25s ease} .work-grid-four .work-card:hover .work-card-cta,.work-grid-four .work-card:focus-visible .work-card-cta{opacity:1;visibility:visible;transform:translate3d(0,0,0);filter:brightness(1.06);box-shadow:0 0 0 1px rgba(255,41,61,.35),0 0 18px rgba(255,41,61,.55),0 0 38px rgba(255,41,61,.28),inset 0 1px rgba(255,255,255,.3)} .work-grid-four .work-card:hover .work-card-cta b,.work-grid-four .work-card:focus-visible .work-card-cta b{transform:translate(2px,-2px);background:#fff;color:#ff293d} .work-grid-four .work-card:focus-visible{outline:2px solid #ff293d;outline-offset:4px} @media(max-width:650px){.work-grid-four .work-card-cta{opacity:1;visibility:visible;transform:none;right:12px;bottom:12px;min-height:44px;padding-left:12px;gap:10px;font-size:10px}.work-grid-four .work-card-cta b{width:30px;height:30px;font-size:17px}} @media(prefers-reduced-motion:reduce){.work-grid-four .work-card-cta,.work-grid-four .work-card-cta b{transition:none}} /* Reference-inspired card reveal: image first, project details slide up on hover */ .work-grid-four .work-card{border-radius:22px;overflow:hidden;isolation:isolate} .work-grid-four .work-card>img{transition:transform .75s cubic-bezier(.2,.8,.2,1),filter .45s ease} .work-grid-four .work-card .work-shade{background:linear-gradient(0deg,rgba(5,4,6,.18),transparent 45%);transition:background .35s ease} .work-grid-four .work-card .work-title{left:0;right:0;bottom:0;z-index:3;min-height:94px;padding:15px 16px 14px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;background:#f4f1ef;color:#100b0c;border-top:3px solid var(--red);transform:translateY(105%);opacity:0;transition:transform .42s cubic-bezier(.2,.8,.2,1),opacity .25s ease} .work-grid-four .work-card .work-title small{color:#6b5558;font-size:9px;line-height:1.3;letter-spacing:.08em;margin:0 0 7px;text-shadow:none} .work-grid-four .work-card .work-title h3{margin:0;color:#130d0e;font-size:clamp(23px,2.2vw,34px);line-height:.95;text-shadow:none;letter-spacing:-.02em} .work-grid-four .work-card .work-title h3 em{color:var(--red)} .work-grid-four .work-card:hover .work-title,.work-grid-four .work-card:focus-visible .work-title{transform:translateY(0);opacity:1} .work-grid-four .work-card:hover>img,.work-grid-four .work-card:focus-visible>img{transform:scale(1.07) translateY(-5px);filter:brightness(1.04) saturate(1.12) contrast(1.03)} .work-grid-four .work-card:hover .work-shade,.work-grid-four .work-card:focus-visible .work-shade{background:linear-gradient(0deg,rgba(5,4,6,.04),transparent 55%)} .work-grid-four .work-card-cta{right:12px;bottom:12px;min-height:48px;gap:10px;padding-left:13px;font-size:10px} .work-grid-four .work-card-cta b{background:#16090c;color:#fff;width:32px;height:32px} .work-grid-four .work-card:hover .work-card-cta,.work-grid-four .work-card:focus-visible .work-card-cta{opacity:1;visibility:visible;transform:translate3d(0,0,0);box-shadow:0 0 14px rgba(255,41,61,.4),0 0 26px rgba(255,41,61,.2)} @media(max-width:650px){.work-grid-four .work-card .work-title{transform:none;opacity:1;min-height:78px;padding:12px 13px;background:#f4f1ef}.work-grid-four .work-card .work-title small{font-size:8px}.work-grid-four .work-card .work-title h3{font-size:26px}.work-grid-four .work-card-cta{right:10px;bottom:10px;min-height:42px;font-size:9px}.work-grid-four .work-card-cta b{width:28px;height:28px}} @media(prefers-reduced-motion:reduce){.work-grid-four .work-card .work-title,.work-grid-four .work-card>img{transition:none}} /* Final requested black/red hover reveal panel theme */ #work .work-grid-four .work-card .work-title, #work .work-grid-four .work-card .work-info, #work .work-grid-four .work-card .work-content, #work .work-grid-four .work-card .work-details { color:#f7f2f3 !important; } #work .work-grid-four .work-card .work-title small, #work .work-grid-four .work-card .work-index { background:rgba(7,5,6,.88) !important; color:#fff2f2 !important; border-color:#ff293d !important; } #work .work-grid-four .work-card .work-shade { background:linear-gradient(180deg,rgba(5,4,6,.08) 0%,transparent 35%,rgba(5,4,6,.22) 55%,rgba(5,4,6,.9) 100%) !important; } #work .work-grid-four .work-card .work-card-cta { background:linear-gradient(110deg,#ff263d 0%,#df102b 72%,#a8061b 100%) !important; color:#fff !important; border-color:#ff4658 !important; } #work .work-grid-four .work-card .work-card-cta b { background:#080809 !important; color:#fff !important; border:1px solid rgba(255,41,61,.65) !important; } #work .work-grid-four .work-card:hover .work-card-cta b, #work .work-grid-four .work-card:focus-visible .work-card-cta b { background:#080809 !important; color:#ff4658 !important; box-shadow:0 0 16px rgba(255,41,61,.45) !important; } #work .work-grid-four .work-card:hover, #work .work-grid-four .work-card:focus-visible { border-color:#ff293d !important; box-shadow:0 22px 46px rgba(0,0,0,.46),0 0 0 1px rgba(255,41,61,.25),0 0 32px rgba(255,41,61,.15) !important; } @media(prefers-reduced-motion:reduce){#work .work-grid-four .work-card, #work .work-grid-four .work-card * { transition:none !important; }} /* FINAL OVERRIDE: Selected Worlds reveal panel must match UI BUDDY black/red brand */ #work .work-grid-four .work-card .work-title, #work .work-grid-four .work-card .work-info, #work .work-grid-four .work-card .work-content, #work .work-grid-four .work-card .work-details { background: #090707 !important; color: #f8f1ef !important; border-top: 3px solid #ff293d !important; box-shadow: inset 0 1px 0 rgba(255,41,61,.12) !important; } #work .work-grid-four .work-card .work-title small, #work .work-grid-four .work-card .work-info small, #work .work-grid-four .work-card .work-content small, #work .work-grid-four .work-card .work-details small { background: transparent !important; color: #d7c5c7 !important; text-shadow: none !important; } #work .work-grid-four .work-card .work-title h3, #work .work-grid-four .work-card .work-info h3, #work .work-grid-four .work-card .work-content h3, #work .work-grid-four .work-card .work-details h3 { color: #f8f1ef !important; } #work .work-grid-four .work-card .work-title h3 em, #work .work-grid-four .work-card .work-info h3 em, #work .work-grid-four .work-card .work-content h3 em, #work .work-grid-four .work-card .work-details h3 em { color: #ff293d !important; } #work .work-grid-four .work-card-cta b, #work .work-grid-four .work-card:hover .work-card-cta b, #work .work-grid-four .work-card:focus-visible .work-card-cta b { background: #050505 !important; color: #fff !important; border: 1px solid #ff293d !important; } /* SERVICES SECTION: full viewport width while retaining the two-column composition */ #services, .services-section, [data-section="services"] { width:100% !important; max-width:none !important; } #services .container, #services .section-inner, #services .services-inner, .services-section .container, .services-section .section-inner, [data-section="services"] .container { width:min(100% - 48px, 1680px) !important; max-width:1680px !important; margin-left:auto !important; margin-right:auto !important; } @media (min-width: 1600px) { #services .container, #services .section-inner, #services .services-inner, .services-section .container, .services-section .section-inner, [data-section="services"] .container { width:calc(100% - 96px) !important; max-width:none !important; } } @media (max-width: 700px) { #services .container, #services .section-inner, #services .services-inner, .services-section .container, .services-section .section-inner, [data-section="services"] .container { width:calc(100% - 32px) !important; } } /* TRUE FULL-WIDTH SERVICES SECTION FIX */ #services.services-section { width:100vw !important; max-width:none !important; margin-left:calc(50% - 50vw) !important; margin-right:calc(50% - 50vw) !important; padding-left:0 !important; padding-right:0 !important; box-sizing:border-box !important; } #services.services-section > .wrap { width:calc(100% - 48px) !important; max-width:none !important; margin-left:24px !important; margin-right:24px !important; padding-left:0 !important; padding-right:0 !important; box-sizing:border-box !important; } #services .section-head, #services .services-layout, #services .services-bottom { width:100% !important; max-width:none !important; } @media (max-width:700px) { #services.services-section > .wrap { width:calc(100% - 32px) !important; margin-left:16px !important; margin-right:16px !important; } } /* SERVICES: replace the boxed UI preview with the brand mascot pointing to the service list */ #services .services-layout { align-items: stretch; } #services .service-character-stage { position: sticky; top: 92px; align-self: start; min-height: clamp(500px, 43vw, 680px); display: flex; align-items: flex-end; justify-content: flex-end; isolation: isolate; border: 0 !important; outline: 0 !important; background: transparent !important; overflow: visible !important; box-shadow: none !important; } #services .service-character-aura { position: absolute; z-index: -1; width: 88%; height: 40%; right: 0; bottom: 4%; background: radial-gradient(ellipse at 58% 60%, rgba(255,41,61,.17) 0%, rgba(90,9,22,.10) 43%, transparent 75%); filter: blur(24px); pointer-events: none; } #services .service-mascot { position: relative; display: block; height: clamp(500px, 48vw, 710px); width: auto; max-width: none; max-height: none; object-fit: contain; object-position: center bottom; margin: 0 -12px 0 0; filter: drop-shadow(0 18px 24px rgba(0,0,0,.48)); transform: translateZ(0); transform-origin: 70% 100%; transition: transform .45s cubic-bezier(.2,.8,.2,1), filter .45s ease; } #services .service-character-stage:hover .service-mascot { transform: translate3d(5px,-5px,0) scale(1.015); filter: drop-shadow(0 18px 26px rgba(0,0,0,.5)) drop-shadow(0 0 12px rgba(255,41,61,.12)); } @media (max-width: 900px) { #services .service-character-stage { min-height: 520px; } #services .service-mascot { height: 560px; margin-right: -4px; } } @media (max-width: 650px) { #services .services-layout { grid-template-columns: 1fr; gap: 8px; } #services .service-character-stage { position: relative; top: auto; min-height: 0; height: 440px; justify-content: center; margin: -4px -10px 0; } #services .service-mascot { height: 470px; max-height: 100%; margin: 0 -24px 0 0; } #services .service-character-aura { width: 80%; height: 34%; right: 8%; bottom: 5%; } } @media (prefers-reduced-motion: reduce) { #services .service-mascot { transition: none; } } /* ALIGN SERVICES CONTENT TO THE SAME LEFT / RIGHT GUTTERS AS SELECTED WORLDS */ #services.services-section > .wrap { width: calc(100% - 8vw) !important; max-width: none !important; margin-left: auto !important; margin-right: auto !important; padding-left: 0 !important; padding-right: 0 !important; } @media (max-width: 650px) { #services.services-section > .wrap { width: 89% !important; margin-left: auto !important; margin-right: auto !important; } } /* SERVICES REFINEMENT — shift the mascot left and scale service rows + typography by 25% */ @media (min-width: 651px) { #services .service-mascot { margin-right: 20px !important; /* shifts the pointing mascot left from its previous -12px offset */ } } #services .service-row { grid-template-columns: 37.5px minmax(0, 1fr) 37.5px !important; gap: 15px !important; padding: 27.5px 12.5px !important; min-height: 100px !important; } #services .service-no { font-size: 12.5px !important; } #services .service-row h3 { font-size: 31.25px !important; line-height: 1.05 !important; } #services .service-row p { font-size: 12.5px !important; line-height: 1.7 !important; margin-top: 7.5px !important; max-width: 580px !important; } #services .service-arrow { width: 37.5px !important; height: 37.5px !important; font-size: 15px !important; } #services .service-row:hover, #services .service-row.active { padding-left: 21px !important; } @media (max-width: 900px) { #services .service-row { grid-template-columns: 33.75px minmax(0, 1fr) 35px !important; gap: 11.25px !important; padding: 25px 10px !important; min-height: 92px !important; } #services .service-row h3 { font-size: 27.5px !important; } #services .service-row p { font-size: 11.25px !important; } #services .service-no { font-size: 11.25px !important; } #services .service-arrow { width: 35px !important; height: 35px !important; } #services .service-row:hover, #services .service-row.active { padding-left: 16px !important; } #services .service-mascot { margin-right: 28px !important; } } @media (max-width: 650px) { #services .service-row { grid-template-columns: 30px minmax(0, 1fr) 34px !important; gap: 10px !important; padding: 25px 4px !important; min-height: 90px !important; } #services .service-row h3 { font-size: 27.5px !important; } #services .service-row p { font-size: 11.25px !important; } #services .service-no { font-size: 11.25px !important; } #services .service-arrow { width: 34px !important; height: 34px !important; } #services .service-mascot { margin: 0 -24px 0 0 !important; } } /* All numbered section kickers: +30% for readability */ .kicker, .section-head .kicker, .intro-aside > .kicker, .final-cta .kicker { font-size: 13px !important; } @media (max-width: 650px) { .kicker, .section-head .kicker, .intro-aside > .kicker, .final-cta .kicker { font-size: 13px !important; } } /* SERVICES REDESIGN — reference-inspired editorial list, adapted to UI BUDDY black/red art direction */ #services.services-editorial { position: relative; width:100vw !important; max-width:none !important; margin-left:calc(50% - 50vw) !important; margin-right:calc(50% - 50vw) !important; padding: clamp(72px,8vw,124px) 0 clamp(66px,7vw,102px) !important; overflow:hidden; background: radial-gradient(ellipse at 40% 45%, rgba(77,8,18,.16), transparent 43%), #090707; border-block:1px solid #3b2025; } #services.services-editorial > .services-wrap { width:calc(100% - 8vw) !important; max-width:none !important; margin-inline:auto !important; } #services .services-head { display:grid !important; grid-template-columns:minmax(0,1fr) minmax(240px, 28%); align-items:end; gap:3vw; margin-bottom:clamp(30px,4vw,58px) !important; } #services .services-head h2 { margin:20px 0 0; font:900 clamp(54px,7.1vw,104px)/.82 var(--display); letter-spacing:-.045em; text-transform:uppercase; max-width:850px; } #services .services-head h2 .muted { color:var(--red) !important; font-size:inherit !important; font-weight:inherit !important; line-height:inherit !important; letter-spacing:inherit !important; font-family:inherit !important; display:inline-block; } #services .services-head h2 { font-size:clamp(54px,7.1vw,104px) !important; line-height:.82 !important; font-weight:900 !important; } #services .services-head > p { justify-self:end; max-width:290px; margin:0 0 8px; color:#b7a3a5; font-size:clamp(12px,.9vw,15px); line-height:1.8; } #services .services-showcase { position:relative; } #services .service-row-list { position:relative; isolation:isolate; border-top:1px solid #422027; } #services .service-row { position:relative; z-index:1; display:grid !important; grid-template-columns:clamp(42px,4vw,76px) minmax(0,43%) minmax(0,1fr) clamp(50px,5.3vw,86px) !important; align-items:center; gap:clamp(12px,1.5vw,25px) !important; min-height:clamp(112px,9.4vw,158px) !important; padding:24px 0 !important; border-bottom:1px solid #422027; background:transparent; overflow:visible; transition:background .35s ease, border-color .35s ease, padding .35s ease, min-height .35s ease; } #services .service-row::before { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,rgba(255,41,61,.095),rgba(255,41,61,.045) 45%,transparent 100%); opacity:0; transition:opacity .35s ease; } #services .service-row:hover::before, #services .service-row:focus-visible::before, #services .service-row.active::before { opacity:1; } #services .service-row:hover, #services .service-row:focus-visible, #services .service-row.active { border-color:#7f2c37; padding-left:12px !important; padding-right:8px !important; min-height:clamp(150px,12vw,202px) !important; } #services .service-row-no, #services .service-no { align-self:start; padding-top:clamp(8px,1.05vw,18px); color:var(--red); font:700 clamp(11px,.92vw,15px) var(--mono) !important; letter-spacing:.08em; } #services .service-row-main { min-width:0; align-self:center; } #services .service-row h3 { margin:0; color:#f8f1ef; font:900 clamp(39px,4.05vw,74px)/.93 var(--display) !important; letter-spacing:-.025em; text-transform:uppercase; text-wrap:balance; transition:color .28s ease, transform .35s ease; max-width:100%; } #services .service-row h3 em { color:var(--red); font-style:normal; } #services .service-row:hover h3, #services .service-row:focus-visible h3, #services .service-row.active h3 { color:#ff4354; transform:translateX(3px); } #services .service-row p { max-height:0; opacity:0; overflow:hidden; margin:0 !important; max-width:580px !important; color:#c4b2b4; font-size:clamp(12px,.94vw,16px) !important; line-height:1.65 !important; transform:translateY(8px); transition:max-height .35s ease, opacity .25s ease, transform .35s ease, margin .35s ease; } #services .service-row:hover p, #services .service-row:focus-visible p, #services .service-row.active p { max-height:90px; opacity:1; margin-top:12px !important; transform:translateY(0); } #services .service-meta { justify-self:end; align-self:center; max-width:180px; text-align:right; color:#a99598; font:500 clamp(10px,.78vw,13px) var(--body); line-height:1.5; transition:color .28s ease; } #services .service-row:hover .service-meta, #services .service-row:focus-visible .service-meta, #services .service-row.active .service-meta { color:#f8e9ea; } #services .service-arrow { justify-self:end; display:grid; place-items:center; width:clamp(46px,4.6vw,72px) !important; height:clamp(46px,4.6vw,72px) !important; border:1px solid #674047; border-radius:50%; color:var(--red); font-size:clamp(20px,2vw,32px) !important; background:#10090b; transition:transform .35s ease, background .3s ease, color .3s ease, border-color .3s ease, box-shadow .3s ease; } #services .service-row:hover .service-arrow, #services .service-row:focus-visible .service-arrow, #services .service-row.active .service-arrow { transform:rotate(45deg); background:var(--red); color:#080607; border-color:var(--red); box-shadow:0 0 24px rgba(255,41,61,.25); } /* Floating art follows the selected row, just like the supplied reference. */ #services .service-hover-preview { position:absolute; z-index:4; left:42.5%; top:50%; width:clamp(250px,22.4vw,405px); height:clamp(310px,35vw,500px); transform:translateY(0) rotate(-1.5deg); border:1px solid rgba(255,41,61,.65); border-radius:12px; overflow:visible; pointer-events:none; background:linear-gradient(150deg,#18090d,#090707 76%); box-shadow:0 22px 60px rgba(0,0,0,.48),0 0 35px rgba(255,41,61,.11); transition:top .55s cubic-bezier(.2,.85,.25,1), transform .45s ease, border-color .3s ease, box-shadow .3s ease, background .3s ease; } #services .service-hover-preview::before { content:""; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(135deg,rgba(255,41,61,.16),transparent 48%); z-index:1; pointer-events:none; } #services .service-hover-preview img { position:relative; display:block; width:100%; height:100%; object-fit:cover; object-position:center; border-radius:inherit; opacity:1; transition:opacity .18s ease, transform .6s cubic-bezier(.2,.8,.2,1); } #services .service-hover-preview.is-mascot { background:radial-gradient(ellipse at 52% 48%,rgba(92,8,21,.25),transparent 66%); border-color:transparent; box-shadow:none; overflow:visible; transform:translateY(0) rotate(-1.5deg) scale(1.02); } #services .service-hover-preview.is-mascot::before { background:radial-gradient(ellipse at 55% 58%,rgba(255,41,61,.09),transparent 65%); } #services .service-hover-preview.is-mascot img { object-fit:contain; border-radius:0; filter:drop-shadow(0 14px 22px rgba(0,0,0,.4)); } #services .service-hover-preview.is-project { transform:translateY(0) rotate(1.2deg); border-color:#ff293d; box-shadow:0 28px 70px rgba(0,0,0,.58),0 0 34px rgba(255,41,61,.18); } #services .service-hover-preview.is-project img { transform:scale(1.015); } #services .service-preview-chip { position:absolute; z-index:2; top:43%; left:50%; transform:translate(-50%,-50%) rotate(2deg); display:flex; align-items:center; justify-content:center; gap:7px; width:clamp(70px,6vw,100px); height:clamp(70px,6vw,100px); border-radius:50%; background:var(--red); color:#080607; font:800 clamp(9px,.78vw,13px) var(--mono); letter-spacing:.04em; box-shadow:0 0 30px rgba(255,41,61,.28); opacity:0; transition:opacity .25s ease, transform .3s ease; } #services .service-hover-preview.is-project .service-preview-chip { opacity:1; transform:translate(-50%,-50%) rotate(0deg); } #services .service-preview-chip b { font-size:1.25em; font-weight:900; } #services .service-preview-caption { position:absolute; z-index:2; bottom:-16px; left:14px; display:inline-block; padding:8px 11px; background:#090707; border:1px solid #5a252e; color:#f8f1ef; font:700 9px var(--mono); letter-spacing:.09em; white-space:nowrap; } #services .service-hover-preview.is-mascot .service-preview-caption { left:50%; bottom:9px; transform:translateX(-50%); background:#090707d9; border-color:#7b2733; } #services .services-bottom { display:flex; justify-content:space-between; align-items:center; gap:25px; padding-top:28px; } #services .services-bottom > span { color:#9d8588; font:10px var(--mono); letter-spacing:.1em; } #services .services-bottom .btn { min-width:190px; } #services .services-bottom .btn span { color:var(--red); } #services .services-bottom .btn:hover span { color:#fff; } @media (min-width:1600px) { #services .services-head { margin-bottom:60px !important; } #services .service-row { min-height:160px !important; } #services .service-row:hover, #services .service-row.active, #services .service-row:focus-visible { min-height:205px !important; } } @media (max-width:1050px) { #services.services-editorial > .services-wrap { width:calc(100% - 48px) !important; } #services .services-head h2 { font-size:clamp(56px,7.5vw,80px); } #services .service-row { grid-template-columns:44px minmax(0,43%) minmax(0,1fr) 54px !important; gap:12px !important; } #services .service-row h3 { font-size:clamp(36px,4.1vw,52px) !important; } #services .service-hover-preview { left:42%; width:clamp(235px,25vw,305px); height:clamp(300px,37vw,410px); } #services .service-meta { max-width:125px; font-size:10px; } } @media (max-width:760px) { #services.services-editorial { padding:72px 0 66px !important; } #services.services-editorial > .services-wrap { width:calc(100% - 34px) !important; } #services .services-head { grid-template-columns:1fr !important; gap:18px; margin-bottom:32px !important; } #services .services-head h2 { font-size:clamp(52px,12.5vw,76px); } #services .services-head > p { justify-self:start; max-width:360px; margin:0; font-size:12px; } #services .service-hover-preview { display:none !important; } #services .service-row-list { border-top:1px solid #422027; } #services .service-row { grid-template-columns:34px minmax(0,1fr) 42px !important; align-items:start; gap:9px !important; min-height:0 !important; padding:22px 0 !important; border-bottom:1px solid #422027; } #services .service-row:hover, #services .service-row.active, #services .service-row:focus-visible { min-height:0 !important; padding:22px 7px !important; } #services .service-no { padding-top:7px; font-size:11px !important; } #services .service-row h3 { font-size:clamp(34px,8vw,48px) !important; line-height:.96 !important; } #services .service-row p { max-height:none; opacity:1; overflow:visible; margin-top:8px !important; transform:none; font-size:12px !important; } #services .service-meta { display:block; grid-column:2; grid-row:2; justify-self:start; text-align:left; max-width:none; margin-top:10px; color:#a99598; font:9px var(--mono); letter-spacing:.08em; } #services .service-arrow { grid-column:3; grid-row:1; width:38px !important; height:38px !important; font-size:22px !important; } #services .services-bottom { align-items:flex-start; flex-direction:column; padding-top:23px; } #services .services-bottom .btn { width:auto; } } @media (prefers-reduced-motion: reduce) { #services .service-row, #services .service-row *, #services .service-hover-preview, #services .service-hover-preview img { transition:none !important; } } /* Final services heading correction: equal line typography, white first line + red second line */ #services.services-editorial .services-head h2 { font-size:clamp(54px,7.1vw,104px) !important; font-weight:900 !important; line-height:.82 !important; letter-spacing:-.045em !important; } #services.services-editorial .services-head h2 .muted { color:#ff293d !important; font-size:1em !important; font-weight:inherit !important; line-height:inherit !important; letter-spacing:inherit !important; font-family:inherit !important; display:inline-block; } @media (max-width:1050px) { #services.services-editorial .services-head h2 { font-size:clamp(56px,7.5vw,80px) !important; } } @media (max-width:760px) { #services.services-editorial .services-head h2 { font-size:clamp(52px,12.5vw,76px) !important; } } /* FINAL TICKER RESTORE — high-contrast black/red editorial loop */ #marquee.marquee { position: relative !important; isolation: isolate !important; overflow: hidden !important; box-sizing: border-box !important; padding: 27px 0 25px !important; border: 0 !important; border-top: 1px solid #61202a !important; border-bottom: 1px solid #61202a !important; background: #ff293d !important; } #marquee.marquee::before { content: "" !important; position: absolute !important; z-index: -1 !important; inset: 9px -1% 13px !important; background: #090707 !important; border-top: 1px solid #ff293d !important; border-bottom: 1px solid #ff293d !important; transform: rotate(-.7deg) scale(1.02) !important; box-shadow: 0 0 0 1px #090707 !important; pointer-events: none !important; } #marquee.marquee::after { content: "" !important; position: absolute !important; z-index: -2 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; height: 10px !important; background: #ff293d !important; pointer-events: none !important; } #marquee .marquee-track { position: relative !important; z-index: 1 !important; display: flex !important; width: max-content !important; align-items: center !important; gap: 0 !important; animation: marquee 32s linear infinite !important; will-change: transform !important; } #marquee .marquee-group { display: flex !important; flex: none !important; align-items: center !important; gap: 26px !important; padding: 0 0 0 28px !important; margin: 0 !important; white-space: nowrap !important; font-family: var(--display, 'Barlow Condensed', sans-serif) !important; font-size: clamp(25px, 3.1vw, 46px) !important; font-weight: 900 !important; line-height: 1 !important; letter-spacing: .015em !important; text-transform: uppercase !important; color: #f8f1ef !important; text-shadow: 0 1px 0 #5d151d !important; } #marquee .marquee-group b { display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: none !important; color: #ff293d !important; font-family: var(--display, 'Barlow Condensed', sans-serif) !important; font-size: clamp(27px, 3vw, 42px) !important; font-weight: 900 !important; line-height: .8 !important; text-shadow: 0 0 14px #ff293d55 !important; margin: 0 !important; transition: color .25s ease !important; } #marquee:hover .marquee-group b { color: #fff !important; } @media (max-width: 650px) { #marquee.marquee { padding: 20px 0 19px !important; } #marquee.marquee::before { inset: 7px -2% 10px !important; transform: rotate(-.8deg) scale(1.04) !important; } #marquee .marquee-group { font-size: 25px !important; gap: 18px !important; padding-left: 20px !important; } #marquee .marquee-group b { font-size: 24px !important; } } /* GLOBAL HEADING SYSTEM: equal typography, white first line and brand-red following line(s). */ :is(.intro h2, .section-head h2, .principles-intro h2, .process-intro h2, .studio-copy h2, .faq-grid h2, .trans-copy h2, .final-cta h2, .page-hero h1, .page-content h2) { color: #f8f1ef !important; } :is(.intro h2, .section-head h2, .principles-intro h2, .process-intro h2, .studio-copy h2, .faq-grid h2, .trans-copy h2, .final-cta h2, .page-hero h1, .page-content h2) :is(.muted, .red, em) { color: #ff293d !important; font-size: 1em !important; font-family: inherit !important; font-weight: inherit !important; line-height: inherit !important; letter-spacing: inherit !important; text-shadow: none !important; } /* MATCH SERVICES HEADING TO SELECTED WORLDS HEADING SCALE */ #services.services-editorial .services-head h2 { font-size: clamp(43px, 5.5vw, 76px) !important; font-weight: 800 !important; line-height: .9 !important; letter-spacing: -.02em !important; } #services.services-editorial .services-head h2 .red, #services.services-editorial .services-head h2 .muted { color: #ff293d !important; font-size: 1em !important; font-family: inherit !important; font-weight: inherit !important; line-height: inherit !important; letter-spacing: inherit !important; text-shadow: none !important; } @media (max-width: 650px) { #services.services-editorial .services-head h2 { font-size: clamp(42px, 11vw, 60px) !important; line-height: .9 !important; } } /* INTERFACE EXPERIMENTS — real concept screens and clearer service briefs */ #lab .section-head > p { max-width: 390px; font-size: 13px; line-height: 1.75; color: #c0aeb0; } #lab .lab-card { display: flex; flex-direction: column; min-width: 0; } #lab .lab-image { position: relative; width: 100%; height: clamp(210px, 19vw, 285px); margin: 20px 0 17px; border: 1px solid #54262e; background: #10090b; overflow: hidden; isolation: isolate; } #lab .lab-image img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; filter: saturate(.93) brightness(.92); transform: scale(1.001); transition: transform .65s cubic-bezier(.2,.75,.2,1), filter .45s ease; } #lab .lab-image::after { content: ""; position: absolute; inset: 35% 0 0; z-index: 1; background: linear-gradient(180deg, transparent, rgba(8,5,6,.56)); pointer-events: none; } #lab .lab-image-label { position: absolute; z-index: 2; bottom: 10px; left: 10px; padding: 7px 9px; border-left: 2px solid #ff293d; background: rgba(8,5,6,.88); color: #f8f1ef; font: 9px var(--mono); letter-spacing: .08em; text-transform: uppercase; } #lab .lab-card:hover .lab-image img, #lab .lab-card:focus-within .lab-image img { filter: saturate(1.08) brightness(1.04); transform: scale(1.045); } #lab .lab-copy { margin-top: auto; } #lab .lab-copy h3 { font-size: clamp(18px, 1.35vw, 23px); line-height: 1.12; } #lab .lab-copy p { font-size: 12px; line-height: 1.65; color: #b8a4a7; max-width: 52ch; } #lab .lab-card:hover { border-color: #ff293d; box-shadow: 0 12px 34px rgba(255,41,61,.08); } @media (max-width: 900px) { #lab .lab-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } #lab .lab-image { height: clamp(210px, 34vw, 290px); } #lab .lab-copy p { font-size: 12px; } } @media (max-width: 650px) { #lab .lab-grid { grid-template-columns: 1fr; gap: 18px; } #lab .lab-card { padding: 14px; } #lab .lab-image { height: auto; aspect-ratio: 1.7 / 1; margin: 14px 0 15px; } #lab .lab-copy h3 { font-size: 21px; } #lab .lab-copy p { font-size: 13px; } #lab .lab-image-label { font-size: 8px; } } @media (prefers-reduced-motion: reduce) { #lab .lab-image img { transition: none; } } /* INTERFACE EXPERIMENTS — FULL WIDTH + LARGER VISUALS AND COPY */ #lab.lab-section > .wrap { width: calc(100% - clamp(32px, 5vw, 112px)) !important; max-width: none !important; margin-left: auto !important; margin-right: auto !important; } #lab.lab-section { padding-top: clamp(82px, 7vw, 124px); padding-bottom: clamp(82px, 7vw, 124px); } #lab .section-head { gap: clamp(28px, 5vw, 96px); margin-bottom: clamp(34px, 3vw, 52px); } #lab .section-head .kicker { font-size: 13px !important; letter-spacing: .16em; } #lab .section-head h2 { font-size: clamp(48px, 6vw, 86px) !important; line-height: .9 !important; } #lab .section-head > p { max-width: 460px; font-size: clamp(14px, 1vw, 16px) !important; line-height: 1.75; } #lab .lab-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 1.6vw, 30px); } #lab .lab-card { padding: clamp(18px, 1.45vw, 28px); } #lab .lab-top { font-size: clamp(9px, .68vw, 11px); line-height: 1.4; gap: 12px; } #lab .lab-image { height: clamp(285px, 23vw, 410px); margin: clamp(18px, 1.5vw, 28px) 0 clamp(20px, 1.6vw, 30px); } #lab .lab-image-label { font-size: clamp(10px, .72vw, 12px); padding: 9px 12px; bottom: 14px; left: 14px; } #lab .lab-copy h3 { font-size: clamp(24px, 1.8vw, 32px) !important; line-height: 1.08; margin: 0 0 8px; } #lab .lab-copy p { font-size: clamp(14px, .95vw, 16px) !important; line-height: 1.7; max-width: 58ch; } #lab .lab-disclaimer { font-size: 11px; line-height: 1.6; margin-top: 22px; } @media (max-width: 1100px) { #lab.lab-section > .wrap { width: calc(100% - 48px) !important; } #lab .lab-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } #lab .lab-image { height: clamp(270px, 34vw, 360px); } #lab .lab-copy h3 { font-size: clamp(24px, 2.5vw, 30px) !important; } #lab .lab-copy p { font-size: 14px !important; } } @media (max-width: 650px) { #lab.lab-section { padding-top: 66px; padding-bottom: 66px; } #lab.lab-section > .wrap { width: calc(100% - 32px) !important; } #lab .section-head { gap: 16px; margin-bottom: 24px; } #lab .section-head h2 { font-size: clamp(42px, 10.5vw, 60px) !important; } #lab .section-head .kicker { font-size: 11px !important; } #lab .section-head > p { font-size: 13px !important; } #lab .lab-grid { grid-template-columns: 1fr; gap: 18px; } #lab .lab-card { padding: 16px; } #lab .lab-top { font-size: 9px; } #lab .lab-image { height: auto; aspect-ratio: 1.58 / 1; margin: 15px 0 18px; } #lab .lab-image-label { font-size: 9px; bottom: 10px; left: 10px; } #lab .lab-copy h3 { font-size: 25px !important; } #lab .lab-copy p { font-size: 14px !important; } #lab .lab-disclaimer { font-size: 10px; } } /* SERVICES MASCOT DIRECTION FIX — default mascot now faces the service copy from the right */ @media (min-width: 761px) { #services .service-hover-preview.is-mascot { left: auto !important; right: 25% !important; transform: translateY(0) rotate(1.4deg) scale(1.02) !important; transform-origin: 50% 50%; } #services .service-hover-preview.is-mascot img { transform: scaleX(-1) !important; transform-origin: center center; } } @media (min-width: 761px) and (max-width: 1050px) { #services .service-hover-preview.is-mascot { right: 16% !important; } } /* TRANSFORMATION SECTION — FULL-WIDTH BLACK THEME + EXPANDED COMPARISON PANEL */ .transformation-section { width: 100% !important; max-width: none !important; padding: clamp(58px, 5vw, 104px) 0 !important; background: #090707 !important; color: var(--white) !important; overflow: hidden; } .transformation-section > .transformation-grid { width: 100% !important; max-width: none !important; margin: 0 !important; padding-left: clamp(22px, 4vw, 76px) !important; padding-right: clamp(22px, 4vw, 76px) !important; grid-template-columns: minmax(300px, .72fr) minmax(0, 1.28fr) !important; gap: clamp(24px, 3vw, 64px) !important; align-items: stretch !important; } .transformation-section .trans-copy { align-self: center; min-width: 0; } .transformation-section .trans-copy .kicker { color: var(--red) !important; } .transformation-section .trans-copy h2 { color: var(--white) !important; font-size: clamp(48px, 5.4vw, 86px) !important; line-height: .9 !important; letter-spacing: -.035em; margin: 18px 0 0 !important; } .transformation-section .trans-copy h2 .red { color: var(--red) !important; } .transformation-section .trans-copy > p { color: #bcaeb0 !important; font-size: clamp(14px, 1.02vw, 17px) !important; line-height: 1.8 !important; max-width: 48ch !important; margin: 22px 0 28px !important; } .transformation-section .trans-copy .text-link { color: var(--red) !important; } .transformation-section .compare-widget { width: 100% !important; height: clamp(440px, 36vw, 690px) !important; min-height: 440px; background: #090707 !important; border-color: #482027 !important; } .transformation-section .compare-before, .transformation-section .compare-after { padding: clamp(22px, 2.1vw, 40px) !important; } .transformation-section .compare-label { top: clamp(14px, 1.15vw, 22px) !important; font-size: clamp(10px, .68vw, 12px) !important; } .transformation-section .tiny-title { font-size: clamp(10px, .72vw, 13px) !important; } .transformation-section .tiny-boxes { gap: clamp(7px, .7vw, 12px) !important; margin-top: clamp(25px, 2.2vw, 42px) !important; } .transformation-section .tiny-boxes i { height: clamp(54px, 4.7vw, 84px) !important; } .transformation-section .tiny-note { font-size: clamp(30px, 2.7vw, 46px) !important; margin-top: clamp(26px, 2.4vw, 44px) !important; color: #e0d1d3 !important; } .transformation-section .after-title { font-size: clamp(46px, 4.05vw, 74px) !important; line-height: .87 !important; margin-top: clamp(28px, 2.5vw, 46px) !important; } .transformation-section .after-sub { font-size: clamp(10px, .66vw, 12px) !important; } .transformation-section .after-bar { height: 5px !important; margin-top: clamp(18px, 1.7vw, 30px) !important; } .transformation-section .after-stats { gap: clamp(18px, 2vw, 32px) !important; margin-top: clamp(22px, 2vw, 36px) !important; } .transformation-section .after-stats b { font-size: clamp(24px, 1.8vw, 34px) !important; } .transformation-section .after-tag { font-size: clamp(10px, .7vw, 12px) !important; margin-top: clamp(22px, 2vw, 36px) !important; } .transformation-section .compare-handle span { width: clamp(42px, 3.1vw, 58px) !important; height: clamp(42px, 3.1vw, 58px) !important; font-size: clamp(20px, 1.5vw, 28px) !important; } @media (max-width: 1000px) { .transformation-section { padding: 70px 0 !important; } .transformation-section > .transformation-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 32px !important; padding-left: 28px !important; padding-right: 28px !important; } .transformation-section .trans-copy > p { max-width: 68ch !important; } .transformation-section .compare-widget { height: clamp(420px, 56vw, 600px) !important; } } @media (max-width: 650px) { .transformation-section { padding: 54px 0 !important; } .transformation-section > .transformation-grid { padding-left: 16px !important; padding-right: 16px !important; gap: 24px !important; } .transformation-section .trans-copy h2 { font-size: clamp(45px, 11.5vw, 64px) !important; line-height: .9 !important; } .transformation-section .trans-copy > p { font-size: 14px !important; margin: 16px 0 22px !important; } .transformation-section .compare-widget { height: 360px !important; min-height: 360px !important; } .transformation-section .compare-before, .transformation-section .compare-after { padding: 18px !important; } .transformation-section .compare-label { font-size: 9px !important; } .transformation-section .tiny-title { font-size: 9px !important; } .transformation-section .tiny-boxes { gap: 5px !important; margin-top: 22px !important; } .transformation-section .tiny-boxes i { height: 38px !important; } .transformation-section .tiny-note { font-size: 26px !important; margin-top: 24px !important; } .transformation-section .after-title { font-size: clamp(35px, 9vw, 48px) !important; margin-top: 28px !important; } .transformation-section .after-sub { font-size: 9px !important; } .transformation-section .after-stats { gap: 12px !important; margin-top: 16px !important; } .transformation-section .after-stats b { font-size: 21px !important; } .transformation-section .after-tag { font-size: 8px !important; margin-top: 17px !important; } } @media (max-width: 380px) { .transformation-section .compare-widget { height: 320px !important; min-height: 320px !important; } .transformation-section .tiny-boxes i { height: 31px !important; } .transformation-section .tiny-note { font-size: 22px !important; } } /* 2026-10-15 transformation comparison: prototype vs Kids Edu UI */ .transformation-section{width:100%;padding:clamp(52px,6vw,96px) 0!important;background:#090707!important;color:var(--white)!important;overflow:hidden} .transformation-grid{width:96%!important;max-width:none!important;margin:0 auto!important;padding:0!important;display:grid;grid-template-columns:minmax(280px,.52fr) minmax(0,1.48fr)!important;gap:clamp(20px,2.4vw,42px)!important;align-items:stretch!important} .trans-copy{align-self:center;min-width:0} .trans-copy .kicker{color:var(--red)!important} .trans-copy h2{font-size:clamp(46px,5.1vw,86px)!important;line-height:.88!important;color:var(--white)!important} .trans-copy>p{color:#b6a5a8!important;max-width:650px!important;font-size:clamp(14px,1vw,18px)!important;line-height:1.75!important} .compare-widget{height:clamp(500px,70vh,850px)!important;width:100%!important;min-width:0;background:#090707!important;border-color:#4a2027!important;--split:52%} .compare-before,.compare-after{padding:0!important} .compare-before{background:repeating-linear-gradient(135deg,#201a1b,#201a1b 12px,#261e20 12px,#261e20 24px)!important} .compare-after{background:radial-gradient(ellipse at 75% 30%,#6a0f1d,#16090c 70%)!important} .compare-image{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:contain!important;display:block!important;max-width:none!important;z-index:1!important;background:transparent!important} .compare-label{top:14px!important;z-index:7!important;padding:7px 9px!important;background:#090707d9!important;border:1px solid #52212a!important;font-size:clamp(10px,.66vw,13px)!important;letter-spacing:.08em!important} .before-label{left:14px!important;color:#f0e7e7!important}.after-label{right:14px!important;color:#ff8189!important} .compare-handle{z-index:8!important}.compare-handle span{width:52px!important;height:52px!important;font-size:21px!important} .compare-range{z-index:9!important} @media(max-width:900px){.transformation-section{padding:56px 0!important}.transformation-grid{width:92%!important;grid-template-columns:1fr!important;gap:28px!important}.trans-copy h2{font-size:clamp(42px,9vw,68px)!important}.compare-widget{height:clamp(420px,62vh,640px)!important}} @media(max-width:520px){.compare-widget{height:420px!important}.compare-label{font-size:9px!important;padding:6px!important}.compare-handle span{width:42px!important;height:42px!important}} /* GAME ICON ARSENAL — editorial floating card showcase */ .icon-arsenal-section{position:relative;isolation:isolate;width:100%;overflow:hidden;padding:clamp(76px,8vw,132px) 0 34px;background:radial-gradient(ellipse at 51% 48%,rgba(95,8,24,.28),transparent 42%),radial-gradient(ellipse at 92% 24%,rgba(255,41,61,.09),transparent 28%),#080708;border-block:1px solid #35181f;color:var(--white)} .icon-arsenal-wrap{position:relative;z-index:2;width:min(1800px,94%);margin:0 auto} .icon-arsenal-head{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;margin:0 0 12px;position:relative;z-index:3} .icon-arsenal-head h2{font:900 clamp(48px,6.2vw,88px)/.86 var(--display);letter-spacing:-.035em;text-transform:uppercase;margin:18px 0 0} .icon-arsenal-head>p{max-width:430px;color:#b8a3a6;font-size:clamp(12px,.95vw,15px);line-height:1.9;margin:0 1% 5px 0} .icon-arsenal-stage{position:relative;padding:36px 0 30px;isolation:isolate} .icon-arsenal-ghost{position:absolute;z-index:-1;inset:50% 0 auto;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;gap:0;pointer-events:none;text-align:center;white-space:nowrap;line-height:.68;font:900 clamp(100px,17.5vw,280px)/.62 var(--display);letter-spacing:-.07em;text-transform:uppercase;opacity:.26} .icon-arsenal-ghost span{-webkit-text-stroke:1px rgba(255,41,61,.3);color:transparent;text-shadow:0 0 80px rgba(255,41,61,.07)} .icon-arsenal-ghost b{font:inherit;color:rgba(255,41,61,.09);-webkit-text-stroke:1px rgba(255,41,61,.13)} .icon-arsenal-orbit{position:absolute;z-index:-1;border:1px solid rgba(255,41,61,.15);border-radius:50%;pointer-events:none} .icon-arsenal-orbit.orbit-one{width:560px;height:290px;left:27%;top:6%;transform:rotate(-24deg);animation:iconOrbit 28s linear infinite} .icon-arsenal-orbit.orbit-two{width:380px;height:520px;right:10%;top:-7%;transform:rotate(31deg);border-color:rgba(255,41,61,.08);animation:iconOrbit 34s linear infinite reverse} .icon-arsenal-bubble{position:absolute;z-index:1;width:66px;aspect-ratio:1;border-radius:50%;border:1px solid rgba(255,255,255,.27);background:radial-gradient(circle at 32% 24%,rgba(255,255,255,.5),rgba(255,255,255,.06) 18%,rgba(255,41,61,.13) 58%,rgba(8,7,8,.65) 75%);box-shadow:inset -8px -8px 22px rgba(0,0,0,.42),0 0 36px rgba(255,41,61,.12);opacity:.42;pointer-events:none;animation:iconBubbleFloat 7s ease-in-out infinite} .icon-arsenal-bubble.bubble-a{right:11%;top:6%;width:72px}.icon-arsenal-bubble.bubble-b{left:8%;bottom:13%;width:42px;animation-delay:-2.2s}.icon-arsenal-bubble.bubble-c{left:45%;top:4%;width:28px;animation-delay:-4.2s} .icon-arsenal-track{position:relative;z-index:2;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));align-items:center;gap:clamp(10px,1.35vw,23px);padding:26px clamp(0px,1vw,14px) 34px} .icon-arsenal-card{--tilt:0deg;position:relative;display:flex;flex-direction:column;min-width:0;padding:clamp(9px,.85vw,14px);border:1px solid rgba(255,65,82,.47);border-radius:7px;background:linear-gradient(155deg,rgba(28,16,19,.98),rgba(8,7,8,.98) 75%);box-shadow:0 22px 46px rgba(0,0,0,.44),inset 0 1px rgba(255,255,255,.06);overflow:hidden;transform:translateY(0) rotate(var(--tilt));transform-origin:50% 12%;transition:transform .45s cubic-bezier(.2,.8,.2,1),border-color .3s,box-shadow .35s,background .35s;will-change:transform;backdrop-filter:blur(5px)} .icon-arsenal-card:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 0,rgba(255,41,61,.2),transparent 48%);opacity:.65;pointer-events:none;transition:opacity .3s} .icon-arsenal-card:after{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,transparent,var(--red),transparent);transform:scaleX(.2);opacity:0;transition:transform .35s,opacity .25s} .icon-arsenal-card.card-skull{--tilt:-2deg;transform:translateY(24px) rotate(-2deg)}.icon-arsenal-card.card-nitro{--tilt:1.5deg;transform:translateY(-4px) rotate(1.5deg)}.icon-arsenal-card.card-mech{--tilt:-.8deg;transform:translateY(-27px) rotate(-.8deg)}.icon-arsenal-card.card-arcane{--tilt:1.8deg;transform:translateY(-13px) rotate(1.8deg)}.icon-arsenal-card.card-panda{--tilt:-1.4deg;transform:translateY(-1px) rotate(-1.4deg)}.icon-arsenal-card.card-royal{--tilt:2deg;transform:translateY(22px) rotate(2deg)} .icon-card-top{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:6px;margin:0 0 10px;color:#cdbabd;font:clamp(7px,.57vw,10px)/1.2 var(--mono);letter-spacing:.055em;text-transform:uppercase;white-space:nowrap} .icon-card-top b{display:grid;place-items:center;flex:none;width:25px;height:25px;border:1px solid #5a2b33;border-radius:50%;color:var(--red);font:13px var(--body);transition:background .25s,color .25s,transform .25s} .icon-card-art{position:relative;z-index:1;aspect-ratio:1;overflow:hidden;border:1px solid rgba(255,75,91,.36);border-radius:4px;background:#10090b;box-shadow:0 0 26px rgba(255,41,61,.07)} .icon-card-art:after{content:"";position:absolute;inset:0;background:linear-gradient(160deg,rgba(255,255,255,.1),transparent 25%,transparent 70%,rgba(0,0,0,.2));pointer-events:none;mix-blend-mode:screen;opacity:.6} .icon-card-art img{width:100%;height:100%;object-fit:cover;transition:transform .65s cubic-bezier(.2,.8,.2,1),filter .4s;transform-origin:50% 16%} .icon-card-copy{position:relative;z-index:1;padding:clamp(10px,.9vw,15px) 1px 8px} .icon-card-copy h3{font:900 clamp(18px,1.55vw,27px)/.95 var(--display);letter-spacing:-.025em;margin:0 0 7px;color:#fff7f5;white-space:normal} .icon-card-copy p{font:clamp(7px,.56vw,9px)/1.5 var(--mono);letter-spacing:.075em;color:#b39da1;margin:0;text-transform:uppercase} .icon-card-bottom{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:6px;border-top:1px solid #422027;padding-top:10px;margin-top:auto;color:#927c80;font:clamp(6px,.5vw,8px)/1.25 var(--mono);letter-spacing:.04em} .icon-card-bottom i{font-style:normal;font-size:16px;color:var(--red);text-shadow:0 0 14px #ff293d4a} .icon-arsenal-card:hover,.icon-arsenal-card:focus-visible{z-index:5;transform:translateY(-21px) rotate(0deg) scale(1.045)!important;border-color:#ff5362;box-shadow:0 28px 58px rgba(0,0,0,.55),0 0 0 1px rgba(255,41,61,.26),0 0 30px rgba(255,41,61,.2)} .icon-arsenal-card:hover:before,.icon-arsenal-card:focus-visible:before{opacity:1}.icon-arsenal-card:hover:after,.icon-arsenal-card:focus-visible:after{opacity:1;transform:scaleX(1)}.icon-arsenal-card:hover .icon-card-art img,.icon-arsenal-card:focus-visible .icon-card-art img{animation:iconArtSwing .8s ease-in-out;transform:scale(1.06);filter:saturate(1.12) contrast(1.04)}.icon-arsenal-card:hover .icon-card-top b,.icon-arsenal-card:focus-visible .icon-card-top b{background:var(--red);color:#fff;transform:translate(2px,-2px)} .icon-arsenal-foot{display:flex;align-items:center;justify-content:center;gap:clamp(8px,1.3vw,22px);flex-wrap:wrap;border-top:1px solid #3a1d23;padding:20px 0 0;color:#a38c90;font:clamp(7px,.56vw,9px)/1.6 var(--mono);letter-spacing:.1em;text-transform:uppercase} .icon-arsenal-foot b{font-size:12px;color:var(--red)}.icon-arsenal-foot a{margin-left:auto;color:#ff6875;border-bottom:1px solid #87303a;padding-bottom:3px;white-space:nowrap} .icon-arsenal-disclaimer{font:8px/1.6 var(--mono);letter-spacing:.055em;color:#665356;margin:18px 0 0;text-align:right} @keyframes iconOrbit{to{rotate:360deg}}@keyframes iconBubbleFloat{0%,100%{translate:0 0}50%{translate:7px -15px}}@keyframes iconArtSwing{0%,100%{rotate:0deg}25%{rotate:1.8deg}60%{rotate:-1.4deg}} @media(max-width:1250px){.icon-arsenal-track{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.icon-arsenal-card.card-skull,.icon-arsenal-card.card-nitro,.icon-arsenal-card.card-mech,.icon-arsenal-card.card-arcane,.icon-arsenal-card.card-panda,.icon-arsenal-card.card-royal{transform:none}.icon-arsenal-card{max-width:320px;width:100%;justify-self:center}.icon-card-copy h3{font-size:clamp(22px,2.3vw,30px)}.icon-card-top{font-size:9px}.icon-card-copy p{font-size:8px}.icon-card-bottom{font-size:8px}} @media(max-width:700px){.icon-arsenal-section{padding:70px 0 25px}.icon-arsenal-wrap{width:90%}.icon-arsenal-head{align-items:start;flex-direction:column;gap:17px;margin-bottom:8px}.icon-arsenal-head h2{font-size:clamp(44px,11vw,68px)}.icon-arsenal-head>p{font-size:12px;max-width:520px}.icon-arsenal-stage{padding:24px 0 20px}.icon-arsenal-ghost{font-size:26vw}.icon-arsenal-track{display:flex;justify-content:flex-start;gap:14px;overflow-x:auto;overflow-y:visible;padding:24px 4px 28px;scroll-snap-type:x mandatory;scrollbar-color:#67222d #140b0d;scrollbar-width:thin}.icon-arsenal-card,.icon-arsenal-card.card-skull,.icon-arsenal-card.card-nitro,.icon-arsenal-card.card-mech,.icon-arsenal-card.card-arcane,.icon-arsenal-card.card-panda,.icon-arsenal-card.card-royal{flex:0 0 68vw;max-width:290px;transform:none;scroll-snap-align:center}.icon-arsenal-card:hover,.icon-arsenal-card:focus-visible{transform:translateY(-8px) scale(1.015)!important}.icon-card-top{font-size:9px}.icon-card-copy h3{font-size:clamp(24px,7vw,32px)}.icon-card-copy p,.icon-card-bottom{font-size:8px}.icon-arsenal-foot{justify-content:flex-start;gap:9px 13px;font-size:7px}.icon-arsenal-foot a{margin-left:0;width:100%;margin-top:5px}.icon-arsenal-disclaimer{text-align:left;font-size:7px}.icon-arsenal-orbit.orbit-one{width:280px;height:180px;left:14%}.icon-arsenal-orbit.orbit-two{width:200px;height:320px;right:0}.icon-arsenal-bubble.bubble-a{right:4%;top:2%;width:42px}.icon-arsenal-bubble.bubble-b{left:3%;bottom:5%;width:28px}.icon-arsenal-bubble.bubble-c{left:53%;top:1%;width:18px}} @media(prefers-reduced-motion:reduce){.icon-arsenal-orbit,.icon-arsenal-bubble{animation:none!important}.icon-arsenal-card,.icon-card-art img{transition:none!important;animation:none!important}} /* ROLLOVER BORDER STROKE — TRACES THE CARD PERIMETER */ .icon-arsenal-card { position: relative; isolation: isolate; } .icon-arsenal-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; background: conic-gradient(from 0deg at 50% 50%, transparent 0deg 335deg, #ff293d 348deg, #ff8c97 354deg, #ff293d 360deg); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; pointer-events: none; z-index: 9; transition: opacity .2s ease; } .icon-arsenal-card:hover::after, .icon-arsenal-card:focus-visible::after { opacity: 1; animation: iconArsenalPerimeterTrace 2.4s linear infinite; } @keyframes iconArsenalPerimeterTrace { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .icon-arsenal-card:hover::after, .icon-arsenal-card:focus-visible::after { animation: none; } } /* PERIMETER TRACE OVERRIDE: dash follows the rectangular outline */ .icon-arsenal-card::after { padding: 0; background: none; border: 1.5px solid transparent; border-radius: inherit; background-image: linear-gradient(transparent, transparent), linear-gradient(90deg, #ff293d 0%, #ff8c97 45%, #ff293d 100%); background-origin: border-box; background-clip: padding-box, border-box; -webkit-mask: none; mask: none; opacity: 0; box-shadow: inset 0 0 0 1.5px rgba(255,41,61,.06); } .icon-arsenal-card:hover::after, .icon-arsenal-card:focus-visible::after { opacity: 1; animation: iconArsenalBorderPulse 1.6s ease-in-out infinite; } @keyframes iconArsenalBorderPulse { 0%, 100% { box-shadow: inset 0 0 0 1.5px rgba(255,41,61,.2), 0 0 0 rgba(255,41,61,0); } 50% { box-shadow: inset 0 0 0 1.5px rgba(255,41,61,1), 0 0 10px rgba(255,41,61,.22); } } /* ABOUT — FULL-BLEED PERSONAL INTRO */ .about-fullbleed{width:100%;max-width:none;margin:0;padding:clamp(70px,8vw,132px) 0;background:radial-gradient(ellipse at 14% 48%,rgba(74,13,23,.28),transparent 36%),#080708;border-top:1px solid #35151b;border-bottom:1px solid #35151b;overflow:hidden} .about-fullbleed-inner{width:min(100% - clamp(32px,7vw,140px),1720px);margin:0 auto;display:grid;grid-template-columns:minmax(300px,.82fr) minmax(0,1.18fr);align-items:center;gap:clamp(38px,6.5vw,120px)} .about-photo-column{min-width:0} .about-photo-frame{position:relative;aspect-ratio:4/5;max-height:780px;overflow:hidden;border:1px solid rgba(255,41,61,.48);background:#100b0c;box-shadow:0 24px 90px rgba(0,0,0,.38)} .about-photo-frame:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.02) 50%,rgba(0,0,0,.7) 100%),linear-gradient(90deg,rgba(255,41,61,.08),transparent 42%);pointer-events:none} .about-photo-frame img{width:100%;height:100%;object-fit:cover;object-position:center 34%;display:block;filter:grayscale(1) contrast(1.06);transition:filter .5s,transform .8s cubic-bezier(.2,.7,.2,1)} .about-photo-frame:hover img{filter:grayscale(.65) contrast(1.05);transform:scale(1.025)} .about-photo-index{position:absolute;z-index:2;top:20px;left:22px;color:#fff;font:10px/1.4 var(--mono);letter-spacing:.16em} .about-photo-mark{position:absolute;z-index:2;right:20px;bottom:12px;color:rgba(255,255,255,.88);font:900 clamp(36px,5vw,76px)/1 var(--display);letter-spacing:-.07em} .about-photo-mark span{font:10px var(--mono);vertical-align:top;letter-spacing:0;margin-left:4px} .about-photo-caption{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-top:13px;color:#a58b90;font:9px/1.6 var(--mono);letter-spacing:.08em} .about-photo-caption span:first-child{color:#ff4354} .about-copy-column{min-width:0;max-width:900px} .about-copy-column .kicker{display:block;margin-bottom:25px;color:#ff293d;font:700 11px/1.5 var(--mono);letter-spacing:.18em} .about-copy-column h2{font:900 clamp(44px,5.5vw,88px)/.91 var(--display);letter-spacing:-.045em;margin:0 0 30px;color:#fff8f6;text-transform:uppercase} .about-copy-column h2 .red{display:inline-block;color:#ff293d;margin-top:8px} .about-copy-column p{max-width:790px;color:#b9a7aa;font:clamp(13px,.9vw,16px)/1.85 var(--body);margin:0 0 16px} .about-copy-column p.about-lead{font-size:clamp(16px,1.18vw,21px);line-height:1.65;color:#f0e7e7;margin-bottom:20px} .about-copy-column p strong{color:#fff;font-weight:700} .about-proof-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:32px 0 22px;padding:20px 0;border-top:1px solid #3b2025;border-bottom:1px solid #3b2025} .about-proof-grid div{display:flex;flex-direction:column;gap:8px;min-width:0} .about-proof-grid strong{color:#fff;font:900 clamp(22px,2vw,32px)/1 var(--display);letter-spacing:-.02em} .about-proof-grid span{color:#a58b90;font:8px/1.5 var(--mono);letter-spacing:.09em} .about-specialties{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px} .about-specialties span{border:1px solid #51222b;padding:9px 11px;color:#d7c3c6;font:9px/1.2 var(--mono);letter-spacing:.06em} .about-copy-column .btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;background:#ff293d;color:#fff;border:1px solid #ff293d;text-decoration:none;font:800 11px/1 var(--mono);letter-spacing:.04em;transition:background .2s,color .2s,transform .2s} .about-copy-column .btn:hover{background:#fff;color:#080708;transform:translateY(-2px)} @media(max-width:900px){.about-fullbleed{padding:76px 0}.about-fullbleed-inner{width:calc(100% - 40px);grid-template-columns:minmax(220px,.75fr) minmax(0,1.25fr);gap:28px}.about-copy-column h2{font-size:clamp(40px,6vw,64px)}.about-copy-column .kicker{margin-bottom:18px}.about-proof-grid{gap:8px}.about-proof-grid span{font-size:7px}} @media(max-width:640px){.about-fullbleed{padding:58px 0}.about-fullbleed-inner{width:calc(100% - 32px);grid-template-columns:1fr;gap:34px}.about-photo-frame{aspect-ratio:4/3;max-height:520px}.about-photo-frame img{object-position:center 29%}.about-photo-caption{font-size:8px}.about-copy-column h2{font-size:clamp(42px,11vw,68px);margin-bottom:22px}.about-copy-column p{font-size:13px}.about-copy-column p.about-lead{font-size:16px}.about-proof-grid{margin-top:25px;padding:17px 0}.about-proof-grid strong{font-size:25px}.about-proof-grid span{font-size:7px;letter-spacing:.04em}.about-specialties span{font-size:8px;padding:8px 9px}} @media(prefers-reduced-motion:reduce){.about-photo-frame img,.about-copy-column .btn{transition:none}} /* ABOUT FEATURE — CREATIVE EDITORIAL / GAME-CULTURE ART DIRECTION */ .about-feature{position:relative;width:100%;max-width:none;margin:0;padding:clamp(28px,4vw,62px) 0 0;background:#090809;overflow:hidden;border-top:1px solid #30151a;border-bottom:1px solid #30151a;isolation:isolate} .about-feature:before{content:"";position:absolute;z-index:-1;inset:0;background:radial-gradient(ellipse at 22% 48%,rgba(255,41,61,.1),transparent 37%),linear-gradient(115deg,transparent 0 62%,rgba(255,255,255,.018) 62% 62.2%,transparent 62.2%);pointer-events:none} .about-feature-top{position:relative;z-index:3;display:flex;justify-content:space-between;gap:16px;width:calc(100% - clamp(32px,7vw,140px));max-width:1720px;margin:0 auto;padding-bottom:18px;border-bottom:1px solid #392026;color:#ff4657;font:9px/1.5 var(--mono);letter-spacing:.16em} .about-feature-top span:last-child{color:#8c777b;text-align:right} .about-feature-stage{position:relative;display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);align-items:center;gap:clamp(18px,4vw,70px);width:calc(100% - clamp(32px,7vw,140px));max-width:1720px;min-height:650px;margin:0 auto;padding:clamp(36px,5vw,82px) 0 clamp(42px,5vw,78px)} .about-feature-ghost{position:absolute;z-index:0;left:-2.5%;top:42%;transform:translateY(-50%);font:900 clamp(150px,27vw,440px)/.72 var(--display);letter-spacing:-.09em;color:rgba(255,255,255,.035);pointer-events:none;white-space:nowrap;user-select:none} .about-feature-portrait{position:relative;z-index:1;width:100%;max-width:700px;min-height:520px;aspect-ratio: .92;justify-self:center} .about-feature-redblock{position:absolute;inset:7% 4% 4% 12%;background:#ff293d;transform:rotate(-5deg);transition:transform .5s cubic-bezier(.2,.7,.2,1)} .about-feature-imagewrap{position:absolute;inset:0 12% 7% 0;overflow:hidden;background:#171314;border:1px solid rgba(255,255,255,.16);box-shadow:0 24px 70px rgba(0,0,0,.48)} .about-feature-imagewrap:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 54%,rgba(0,0,0,.45)),linear-gradient(90deg,rgba(0,0,0,.1),transparent 55%);pointer-events:none} .about-feature-imagewrap img{display:block;width:100%;height:100%;object-fit:cover;object-position:49% 34%;filter:grayscale(1) contrast(1.1);transition:filter .5s,transform .8s cubic-bezier(.2,.7,.2,1)} .about-feature-portrait:hover .about-feature-redblock{transform:rotate(-2deg) translate(5px,-3px)} .about-feature-portrait:hover .about-feature-imagewrap img{filter:grayscale(.55) contrast(1.06);transform:scale(1.035)} .about-feature-stamp{position:absolute;z-index:3;right:0;bottom:13%;display:flex;flex-direction:column;align-items:flex-start;padding:15px 19px;background:#f5eee9;color:#111;font-family:var(--mono);transform:rotate(3deg);box-shadow:0 12px 35px #0007} .about-feature-stamp span{font-size:9px;letter-spacing:.18em}.about-feature-stamp strong{font:900 clamp(30px,4vw,55px)/.9 var(--display);letter-spacing:-.06em}.about-feature-stamp i{font-style:normal;font-size:8px;letter-spacing:.1em;margin-top:8px;color:#a52231} .about-feature-vertical{position:absolute;z-index:2;left:-18px;top:12%;writing-mode:vertical-rl;transform:rotate(180deg);color:#f5eee9;font:8px/1.4 var(--mono);letter-spacing:.19em} .about-feature-copy{position:relative;z-index:2;max-width:740px;padding:10px 0 0} .about-feature-eyebrow{display:flex;align-items:center;gap:10px;color:#ff5261;font:9px/1.5 var(--mono);letter-spacing:.11em;margin-bottom:23px} .about-feature-eyebrow i{display:block;width:25px;height:2px;background:#ff293d} .about-feature-copy h2{margin:0 0 29px;color:#f8f2ef;font:900 clamp(50px,6.1vw,100px)/.82 var(--display);letter-spacing:-.055em;text-transform:uppercase} .about-feature-copy h2 em{font-style:normal;color:transparent;-webkit-text-stroke:1px #f5eee9} .about-feature-copy h2>span{color:#ff293d} .about-feature-intro{display:grid;grid-template-columns:40px minmax(0,1fr);gap:13px;align-items:start;margin:0 0 17px;padding-top:18px;border-top:1px solid #3b2025} .about-feature-asterisk{font-size:30px;line-height:1;color:#ff293d} .about-feature-intro p,.about-feature-body{font:clamp(12px,.86vw,15px)/1.8 var(--body);color:#bba9ac;margin:0} .about-feature-intro p.about-feature-name{font:900 22px/1.2 var(--display);color:#fff;margin:0 0 6px} .about-feature-intro strong{color:#fff} .about-feature-body{padding-left:53px;margin-bottom:25px;max-width:590px} .about-feature-link{display:flex;flex-direction:column;gap:9px;text-decoration:none;border-top:1px solid #48232b;padding:17px 0 0 53px;color:#fff;transition:color .2s} .about-feature-link span{font:8px/1.5 var(--mono);letter-spacing:.14em;color:#ff5362} .about-feature-link strong{font:900 clamp(15px,1.5vw,22px)/1.2 var(--display);letter-spacing:-.015em} .about-feature-link strong b{display:inline-grid;place-items:center;margin-left:8px;width:28px;height:28px;border-radius:50%;background:#ff293d;color:#fff;transition:transform .2s} .about-feature-link:hover{color:#ff6471}.about-feature-link:hover strong b{transform:translate(3px,-3px)} .about-feature-ribbon{display:flex;align-items:center;justify-content:space-around;gap:14px;flex-wrap:wrap;padding:19px clamp(16px,4vw,60px);background:#ff293d;color:#12090a;font:800 9px/1.5 var(--mono);letter-spacing:.1em} .about-feature-ribbon b{font-size:13px} @media(max-width:900px){.about-feature-stage{min-height:0;gap:26px;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}.about-feature-portrait{min-height:420px}.about-feature-copy h2{font-size:clamp(45px,6.5vw,68px)}.about-feature-body{padding-left:0}.about-feature-link{padding-left:0}.about-feature-stamp{padding:11px 13px}.about-feature-ribbon{justify-content:center}} @media(max-width:620px){.about-feature{padding-top:24px}.about-feature-top{width:calc(100% - 32px);font-size:7px;letter-spacing:.1em}.about-feature-stage{width:calc(100% - 32px);grid-template-columns:1fr;gap:35px;padding:32px 0 38px}.about-feature-ghost{top:22%;left:-5%;font-size:39vw}.about-feature-portrait{width:88%;min-height:0;aspect-ratio:.94;max-width:440px;margin-left:2%;justify-self:start}.about-feature-imagewrap{inset:0 10% 7% 0}.about-feature-redblock{inset:6% 2% 4% 10%}.about-feature-stamp{bottom:12%;right:-1%;padding:12px 15px}.about-feature-stamp strong{font-size:38px}.about-feature-vertical{left:-15px}.about-feature-copy{padding:0 2px}.about-feature-copy h2{font-size:clamp(49px,13vw,76px);margin-bottom:24px}.about-feature-eyebrow{font-size:8px;margin-bottom:18px}.about-feature-intro p,.about-feature-body{font-size:13px}.about-feature-intro{grid-template-columns:30px minmax(0,1fr);gap:10px}.about-feature-asterisk{font-size:25px}.about-feature-intro p.about-feature-name{font-size:21px}.about-feature-body{margin-top:15px}.about-feature-link strong{font-size:18px}.about-feature-ribbon{gap:8px 12px;padding:15px 12px;font-size:7px;letter-spacing:.05em}.about-feature-ribbon b{font-size:10px}} @media(prefers-reduced-motion:reduce){.about-feature-redblock,.about-feature-imagewrap img,.about-feature-link strong b{transition:none}} /* ABOUT SECTION — ART-DIRECTED EDITORIAL FEATURE */ .about-artdirected{position:relative;width:100%;max-width:none;margin:0;padding:clamp(26px,3.5vw,54px) 0 0;overflow:hidden;background:#080708;border-top:1px solid #35151b;color:#fff8f6;isolation:isolate} .about-art-topline{position:relative;z-index:2;width:min(100% - clamp(32px,7vw,140px),1720px);margin:0 auto 30px;display:flex;justify-content:space-between;gap:16px;color:#9e878b;font:9px/1.5 var(--mono);letter-spacing:.13em;text-transform:uppercase}.about-art-topline span:first-child{color:#ff4354}.about-art-topline i{font-style:normal;color:#ff293d;margin:0 6px} .about-art-bgword{position:absolute;z-index:-1;top:10%;left:27%;font:900 clamp(160px,29vw,480px)/.8 var(--display);letter-spacing:-.095em;color:rgba(255,255,255,.027);white-space:nowrap;pointer-events:none;user-select:none} .about-art-grid{position:relative;z-index:1;width:min(100% - clamp(32px,7vw,140px),1720px);margin:0 auto;display:grid;grid-template-columns:minmax(320px,.9fr) minmax(0,1.1fr);align-items:center;gap:clamp(42px,8vw,140px);padding-bottom:clamp(58px,7vw,105px)} .about-art-visual{position:relative;min-width:0;max-width:650px;width:100%;margin:0 auto;padding:0 7% 5% 0}.about-art-redblock{position:absolute;top:9%;left:10%;right:0;bottom:0;background:#ff293d;transform:rotate(-4.5deg);transform-origin:center;transition:transform .45s ease} .about-art-portrait{position:relative;z-index:1;aspect-ratio:4/5;max-height:740px;overflow:hidden;background:#171012;border:1px solid rgba(255,255,255,.24);box-shadow:0 30px 80px rgba(0,0,0,.45);transform:rotate(-1.8deg);transition:transform .45s cubic-bezier(.2,.8,.2,1)}.about-art-portrait img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 30%;filter:grayscale(1) contrast(1.08);transition:filter .45s,transform .7s}.about-art-portrait:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 48%,rgba(0,0,0,.78) 100%),linear-gradient(135deg,rgba(255,41,61,.12),transparent 42%);pointer-events:none}.about-art-portrait-label{position:absolute;z-index:2;left:22px;bottom:20px;font:900 clamp(19px,2vw,29px)/.95 var(--display);letter-spacing:-.025em;color:white} .about-art-visual:hover .about-art-portrait{transform:rotate(0deg) translateY(-4px)}.about-art-visual:hover .about-art-redblock{transform:rotate(-1.5deg) translate(5px,-2px)}.about-art-visual:hover .about-art-portrait img{filter:grayscale(.72) contrast(1.08);transform:scale(1.025)} .about-art-number{position:absolute;z-index:3;top:-22px;left:-22px;display:flex;align-items:baseline;gap:5px;color:#fff;font:900 44px/.9 var(--display);letter-spacing:-.06em;text-shadow:0 3px 22px #000}.about-art-number span{color:#ff4354;font:10px var(--mono);letter-spacing:.06em} .about-art-sticker{position:absolute;z-index:3;right:-2%;top:12%;width:clamp(88px,9vw,128px);aspect-ratio:1;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#f5eee9;color:#100b0c;transform:rotate(10deg);box-shadow:0 10px 28px #0006}.about-art-sticker span{font:900 clamp(28px,3vw,42px)/.85 var(--display);letter-spacing:-.06em}.about-art-sticker small{margin-top:7px;text-align:center;font:700 8px/1.25 var(--mono);letter-spacing:.08em}.about-art-side-note{position:absolute;z-index:3;right:-4%;bottom:10%;writing-mode:vertical-rl;transform:rotate(180deg);color:#ff5362;font:8px/1.4 var(--mono);letter-spacing:.16em} .about-art-copy{min-width:0;max-width:850px;padding-top:12px}.about-art-eyebrow{display:flex;align-items:center;gap:10px;color:#ff5362;font:9px/1.5 var(--mono);letter-spacing:.12em;text-transform:uppercase;margin-bottom:25px}.about-art-eyebrow i{width:8px;height:8px;flex:none;border-radius:50%;background:#ff293d;box-shadow:0 0 16px #ff293d} .about-art-copy h2{margin:0 0 20px;color:#fff9f7;font:900 clamp(58px,8vw,128px)/.77 var(--display);letter-spacing:-.075em;text-transform:uppercase}.about-art-name{color:#ff293d}.about-art-period{color:#fff}.about-art-manifesto{max-width:640px;margin:28px 0 22px;padding-left:16px;border-left:3px solid #ff293d;color:#f5eceb;font:900 clamp(19px,2.2vw,31px)/1.12 var(--display);letter-spacing:-.025em}.about-art-manifesto span{color:#ff4354} .about-art-copy p{max-width:740px;color:#b9a7aa;font:clamp(13px,.92vw,16px)/1.85 var(--body);margin:0 0 15px}.about-art-copy p.about-art-intro{font-size:clamp(15px,1.12vw,19px);color:#f2e8e8;line-height:1.7}.about-art-copy p strong{color:white;font-weight:700}.about-art-copy p em{color:#ff6875;font-style:normal} .about-art-signoff{display:flex;align-items:center;gap:18px;margin:27px 0 25px}.about-art-signature{font:italic 900 clamp(30px,3.5vw,48px)/1 Georgia,serif;letter-spacing:-.07em;color:#ff4354;transform:rotate(-7deg)}.about-art-signoff>span:last-child{border-left:1px solid #51232b;padding-left:15px;color:#a58b90;font:8px/1.7 var(--mono);letter-spacing:.1em} .about-art-cta{display:flex;flex-direction:column;gap:9px;max-width:440px;padding:16px 18px;background:#ff293d;color:white;text-decoration:none;border:1px solid #ff293d;transition:background .2s,color .2s,transform .2s}.about-art-cta>span{font:8px/1.2 var(--mono);letter-spacing:.14em;opacity:.8}.about-art-cta b{display:flex;align-items:center;justify-content:space-between;gap:12px;font:900 15px/1.2 var(--display);letter-spacing:.01em}.about-art-cta i{font:normal 20px/1 var(--body)}.about-art-cta:hover{background:#fff8f6;color:#100b0c;transform:translateY(-3px)} .about-art-marquee{width:100%;overflow:hidden;border-top:1px solid #452027;background:#ff293d;color:#fff;padding:15px 0}.about-art-marquee-track{display:flex;align-items:center;justify-content:space-around;gap:clamp(18px,3vw,45px);width:max-content;min-width:200%;animation:aboutArtMarquee 30s linear infinite}.about-art-marquee-track span{font:900 clamp(13px,1.35vw,18px)/1 var(--display);letter-spacing:.035em;white-space:nowrap}.about-art-marquee-track b{font-size:15px;font-weight:400;opacity:.75}.about-art-marquee:hover .about-art-marquee-track{animation-play-state:paused}@keyframes aboutArtMarquee{to{transform:translateX(-50%)}} @media(max-width:900px){.about-art-topline,.about-art-grid{width:calc(100% - 44px)}.about-art-grid{grid-template-columns:minmax(240px,.8fr) minmax(0,1.2fr);gap:30px}.about-art-copy h2{font-size:clamp(55px,8vw,82px)}.about-art-manifesto{font-size:22px}.about-art-topline{font-size:8px}.about-art-topline span:last-child{text-align:right}.about-art-side-note{right:-3%}} @media(max-width:640px){.about-artdirected{padding-top:23px}.about-art-topline{width:calc(100% - 32px);margin-bottom:28px;align-items:flex-start}.about-art-topline span{max-width:48%;font-size:7px}.about-art-grid{width:calc(100% - 32px);grid-template-columns:1fr;gap:37px;padding-bottom:48px}.about-art-visual{width:86%;max-width:420px;padding-right:6%;padding-bottom:5%;margin-left:5%}.about-art-portrait{aspect-ratio:4/4.4;max-height:500px}.about-art-number{top:-16px;left:-16px;font-size:36px}.about-art-sticker{right:-4%;top:10%;width:88px}.about-art-sticker span{font-size:30px}.about-art-sticker small{font-size:7px}.about-art-side-note{right:-7%;bottom:8%;font-size:7px}.about-art-copy{padding-top:0}.about-art-eyebrow{font-size:8px;margin-bottom:20px}.about-art-copy h2{font-size:clamp(66px,15vw,96px);margin-bottom:22px}.about-art-manifesto{font-size:25px;margin:22px 0 18px}.about-art-copy p{font-size:13px}.about-art-copy p.about-art-intro{font-size:16px}.about-art-signoff{margin:24px 0}.about-art-cta{max-width:none}.about-art-marquee{padding:13px 0}.about-art-marquee-track{gap:22px;animation-duration:22s}.about-art-marquee-track span{font-size:14px}} @media(prefers-reduced-motion:reduce){.about-art-marquee-track{animation:none}.about-art-portrait,.about-art-portrait img,.about-art-redblock,.about-art-cta{transition:none}} /* ABOUT V2 — CINEMATIC INDEPENDENT CREATIVE PROFILE */ .about-art-v2{background:#070607!important;padding-top:clamp(25px,3vw,45px)!important;position:relative;isolation:isolate}.about-v2-bgword{position:absolute;z-index:-1;top:18%;left:21%;font:900 clamp(100px,19vw,310px)/.8 var(--display);letter-spacing:-.09em;white-space:nowrap;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.075);transform:rotate(-7deg);pointer-events:none}.about-v2-top{width:min(100% - clamp(32px,7vw,140px),1720px);margin:0 auto 36px;display:flex;justify-content:space-between;gap:16px;font:8px/1.4 var(--mono);letter-spacing:.14em;color:#a18c90}.about-v2-top span:first-child{color:#ff4354}.about-v2-top i{display:inline-block;width:7px;height:7px;border-radius:50%;background:#ff293d;margin-right:9px;box-shadow:0 0 12px #ff293d}.about-v2-layout{width:min(100% - clamp(32px,7vw,140px),1720px);margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(36px,5vw,88px);align-items:center;padding-bottom:clamp(55px,7vw,95px)} .about-v2-art{position:relative;width:100%;max-width:none;margin:0;padding:35px 7% 42px 0}.about-v2-imageframe{position:relative;aspect-ratio:4/5;overflow:visible;isolation:isolate;background:#141012;border:1px solid #4d282e;transform:rotate(-2deg);transition:transform .45s cubic-bezier(.2,.8,.2,1)}.about-v2-imageframe img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 29%;filter:grayscale(1) contrast(1.12);z-index:1;transition:filter .5s,transform .7s}.about-v2-imageframe:after{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,transparent 52%,rgba(0,0,0,.86)),linear-gradient(135deg,rgba(255,41,61,.16),transparent 46%);pointer-events:none}.about-v2-redshape{position:absolute;z-index:-1;inset:8% -7% -5% 9%;background:#ff293d;transform:rotate(5deg);transition:transform .5s}.about-v2-art:hover .about-v2-imageframe{transform:rotate(0) translateY(-5px)}.about-v2-art:hover .about-v2-redshape{transform:rotate(1deg) translate(4px,-3px)}.about-v2-art:hover .about-v2-imageframe img{filter:grayscale(.65) contrast(1.12);transform:scale(1.018)} .about-v2-index{position:absolute;z-index:4;top:0;left:-18px;display:flex;align-items:center;gap:10px}.about-v2-index b{font:900 40px/.8 var(--display);letter-spacing:-.06em;color:#ff293d}.about-v2-index span{font:7px/1.5 var(--mono);letter-spacing:.1em;color:#f4e8e8}.about-v2-image-caption{position:absolute;z-index:4;left:20px;bottom:20px;display:flex;flex-direction:column;font:900 clamp(25px,3.1vw,43px)/.88 var(--display);letter-spacing:-.035em}.about-v2-image-caption span{color:#fff}.about-v2-image-caption strong{color:#ff4354}.about-v2-orbit{position:absolute;z-index:5;right:-1%;top:14%;width:clamp(105px,11vw,145px);aspect-ratio:1;border:1px solid #ff6470;border-radius:50%;background:#0b0809;display:flex;flex-direction:column;justify-content:center;align-items:center;transform:rotate(9deg);box-shadow:0 0 0 7px rgba(255,41,61,.08),0 12px 40px #0009}.about-v2-orbit span{font:900 clamp(35px,4vw,53px)/.8 var(--display);letter-spacing:-.07em;color:#ff293d}.about-v2-orbit small{text-align:center;font:7px/1.45 var(--mono);letter-spacing:.09em;color:#f6eeee;margin-top:9px}.about-v2-orbit b{position:absolute;right:12px;top:10px;color:#ff293d;font-size:13px;font-weight:400}.about-v2-sidecode{position:absolute;right:-3%;top:42%;writing-mode:vertical-rl;color:#8e777c;font:7px/1.4 var(--mono);letter-spacing:.13em}.about-v2-cross{position:absolute;color:#ff293d;font:18px/1 var(--mono)}.about-v2-cross-a{top:18%;left:-5%}.about-v2-cross-b{bottom:18%;right:2%}.about-v2-bottomline{position:absolute;bottom:7px;left:0;right:7%;display:flex;justify-content:space-between;color:#8f7a7e;font:7px/1.4 var(--mono);letter-spacing:.12em} .about-v2-copy{min-width:0;max-width:850px}.about-v2-kicker{display:flex;align-items:center;gap:10px;color:#ff5262;font:8px/1.5 var(--mono);letter-spacing:.15em;text-transform:uppercase;margin-bottom:25px}.about-v2-live{width:7px;height:7px;background:#ff293d;border-radius:50%;box-shadow:0 0 14px #ff293d;animation:aboutV2Pulse 1.8s ease-in-out infinite}@keyframes aboutV2Pulse{50%{opacity:.35;box-shadow:0 0 3px #ff293d}}.about-v2-copy h2{margin:0;color:#fff8f7;font:900 clamp(56px,7.3vw,116px)/.79 var(--display);letter-spacing:-.075em;text-transform:uppercase}.about-v2-copy h2>span{color:transparent;-webkit-text-stroke:1.3px #ff4354}.about-v2-copy h2 em{font-style:normal;color:#ff293d}.about-v2-lede{font:900 clamp(18px,1.8vw,25px)/1.25 var(--display);letter-spacing:-.015em;color:#f8eeee;margin:28px 0 15px;max-width:700px}.about-v2-lede strong{color:#ff4354}.about-v2-body{font:clamp(13px,.95vw,16px)/1.8 var(--body);color:#b9a6aa;max-width:720px;margin:0}.about-v2-divider{display:flex;align-items:center;gap:12px;margin:26px 0 7px;color:#ff5262;font:7px/1.4 var(--mono);letter-spacing:.13em}.about-v2-divider i{height:1px;background:#4a2027;flex:1}.about-v2-divider span:last-child{color:#917b80}.about-v2-values{border-top:1px solid #32171c}.about-v2-values>div{display:grid;grid-template-columns:35px 1fr;gap:10px;padding:13px 0;border-bottom:1px solid #32171c}.about-v2-values>div>b{font:10px/1.5 var(--mono);color:#ff4354}.about-v2-values>div>span{display:flex;align-items:baseline;justify-content:space-between;gap:14px}.about-v2-values strong{font:900 12px/1.4 var(--display);letter-spacing:.015em;color:#fff}.about-v2-values small{font:10px/1.5 var(--body);color:#9e8b8f;text-align:right}.about-v2-signature-row{display:flex;align-items:center;gap:18px;margin:22px 0}.about-v2-signature{font:italic 900 clamp(31px,3.6vw,48px)/1 Georgia,serif;letter-spacing:-.08em;color:#f7eeee;transform:rotate(-6deg)}.about-v2-signature span{color:#ff293d}.about-v2-signature-row>span:last-child{padding-left:15px;border-left:1px solid #52232b;color:#a28c91;font:7px/1.7 var(--mono);letter-spacing:.11em}.about-v2-cta{display:flex;flex-direction:column;gap:9px;padding:15px 18px;max-width:470px;border:1px solid #ff293d;color:#fff;text-decoration:none;background:#ff293d;transition:background .2s,color .2s,transform .2s}.about-v2-cta>span{font:7px/1.3 var(--mono);letter-spacing:.15em;opacity:.85}.about-v2-cta strong{display:flex;justify-content:space-between;align-items:center;gap:10px;font:900 15px/1.2 var(--display)}.about-v2-cta i{font:normal 20px/1 var(--body)}.about-v2-cta:hover{background:#fff;color:#080708;transform:translateY(-3px)} .about-v2-ticker{overflow:hidden;background:#ff293d;color:#fff;padding:14px 0;border-top:1px solid #ff6672}.about-v2-ticker-track{display:flex;align-items:center;gap:clamp(20px,3vw,45px);width:max-content;min-width:200%;animation:aboutV2Ticker 27s linear infinite}.about-v2-ticker-track span{white-space:nowrap;font:900 clamp(13px,1.35vw,18px)/1 var(--display);letter-spacing:.03em}.about-v2-ticker-track b{font-size:14px;font-weight:400}@keyframes aboutV2Ticker{to{transform:translateX(-50%)}}.about-v2-ticker:hover .about-v2-ticker-track{animation-play-state:paused} @media(max-width:900px){.about-v2-top,.about-v2-layout{width:calc(100% - 44px)}.about-v2-layout{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:30px}.about-v2-copy h2{font-size:clamp(53px,7.4vw,82px)}.about-v2-values>div>span{display:block}.about-v2-values small{display:block;text-align:left;margin-top:3px}.about-v2-top{font-size:7px}} @media(max-width:640px){.about-v2-top{width:calc(100% - 32px);margin-bottom:24px}.about-v2-top span{max-width:48%;font-size:6px}.about-v2-layout{width:calc(100% - 32px);grid-template-columns:1fr;gap:37px;padding-bottom:44px}.about-v2-art{width:100%;max-width:none;margin-left:0;padding-top:28px;padding-right:6%;padding-bottom:37px}.about-v2-imageframe{aspect-ratio:4/4.7}.about-v2-index{left:-12px}.about-v2-index b{font-size:34px}.about-v2-orbit{width:94px;right:-3%;top:12%}.about-v2-orbit span{font-size:32px}.about-v2-orbit small{font-size:6px}.about-v2-sidecode{right:-5%;font-size:6px}.about-v2-copy h2{font-size:clamp(65px,14vw,92px)}.about-v2-kicker{font-size:7px;margin-bottom:20px}.about-v2-lede{font-size:21px;margin-top:22px}.about-v2-body{font-size:13px}.about-v2-values>div{padding:12px 0}.about-v2-cta{max-width:none}.about-v2-ticker-track{gap:22px;animation-duration:22s}.about-v2-ticker-track span{font-size:14px}.about-v2-bgword{top:30%;left:0;font-size:32vw}} @media(prefers-reduced-motion:reduce){.about-v2-live{animation:none}.about-v2-ticker-track{animation:none}.about-v2-imageframe,.about-v2-imageframe img,.about-v2-redshape,.about-v2-cta{transition:none}} /* ABOUT V2 — LEGIBILITY PASS FOR MARKED MICRO-TYPOGRAPHY */ .about-v2-index span{font-size:10px;line-height:1.65;letter-spacing:.09em;color:#fff4f4} .about-v2-index b{font-size:46px} .about-v2-kicker{font-size:11px;letter-spacing:.13em;margin-bottom:25px} .about-v2-orbit small{font-size:9px;line-height:1.55;letter-spacing:.07em;color:#fff} .about-v2-orbit span{font-size:clamp(42px,4.2vw,57px)} .about-v2-sidecode{font-size:9px;line-height:1.65;letter-spacing:.12em;color:#c0a9ae} .about-v2-divider{font-size:10px;letter-spacing:.1em} .about-v2-values>div{grid-template-columns:42px 1fr;gap:12px;padding:16px 0} .about-v2-values>div>b{font-size:12px;line-height:1.5} .about-v2-values strong{font-size:15px;line-height:1.45} .about-v2-values small{font-size:13px;line-height:1.6;color:#c3b1b5} .about-v2-signature-row>span:last-child{font-size:10px;line-height:1.75;letter-spacing:.09em;color:#c0a9ae} .about-v2-bottomline{font-size:9px;letter-spacing:.1em;color:#b19ba0} .about-v2-top{font-size:10px;color:#bba7ab} .about-v2-image-caption{font-size:clamp(29px,3.2vw,46px)} .about-v2-cta>span{font-size:9px;line-height:1.5} .about-v2-cta strong{font-size:17px} @media(max-width:900px){.about-v2-index span{font-size:9px}.about-v2-orbit small{font-size:8px}.about-v2-sidecode{font-size:8px}.about-v2-values strong{font-size:14px}.about-v2-values small{font-size:12px}.about-v2-signature-row>span:last-child{font-size:9px}} @media(max-width:640px){.about-v2-index span{font-size:9px}.about-v2-kicker{font-size:10px}.about-v2-orbit small{font-size:7px}.about-v2-sidecode{font-size:7px}.about-v2-values>div{padding:14px 0}.about-v2-values strong{font-size:14px}.about-v2-values small{font-size:12px;line-height:1.6}.about-v2-signature-row>span:last-child{font-size:9px}.about-v2-divider{font-size:9px}.about-v2-bottomline{font-size:7px}} /* Sandy signature: refined editorial display lettering */ .about-v2-signature { font-family: 'Playfair Display', Georgia, serif !important; font-style: italic !important; font-weight: 800 !important; letter-spacing: -0.075em !important; line-height: 0.9 !important; } .about-v2-signature > span { font-family: inherit !important; font-style: inherit !important; font-weight: inherit !important; } /* Cache-busted font override for Sandy signature */ .about-v2-signature-row .about-v2-signature{font-family:'Playfair Display',Georgia,serif!important;font-style:italic!important;font-weight:800!important;letter-spacing:-.075em!important;line-height:.9!important} /* Red supporting statements in About section */ .about-v2-values small,.about-v2-values strong{color:#ff293d!important} /* Keep value titles white; supporting descriptions remain red */ .about-v2-values strong{color:#fff!important}.about-v2-values small{color:#ff293d!important} .icon-orbit-redesign{padding:90px 0;background:radial-gradient(ellipse at 50% 55%,rgba(255,41,61,.2),transparent 38%),#080708}.icon-orbit-scene{position:relative;min-height:730px;overflow:hidden;margin:28px 0;border:1px solid #ff293d44;background:radial-gradient(ellipse at center,rgba(255,41,61,.12),transparent 55%)}.icon-orbit-halo{position:absolute;left:50%;top:50%;width:490px;max-width:65vw;aspect-ratio:1;border:1px solid #ff293d88;border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 35px #ff293d09,0 0 75px #ff293d29}.icon-orbit-label{position:absolute;top:22px;left:25px;color:#eee;font:700 10px var(--mono);letter-spacing:.2em}.icon-orbit-mascot-wrap{position:absolute;z-index:2;left:50%;top:49%;transform:translate(-50%,-45%);width:min(36%,390px);text-align:center}.icon-orbit-mascot{width:100%;max-height:520px;object-fit:contain;filter:drop-shadow(0 0 25px #ff293d38)}.icon-orbit-mascot-tag{display:inline-block;padding:8px 12px;background:#0b080a;border:1px solid #ff293d;color:#ff4051;font:700 9px var(--mono);letter-spacing:.12em}.icon-orbit-card{position:absolute;z-index:3;display:flex;width:clamp(200px,24%,300px);min-height:100px;color:#fff;text-decoration:none;border:1px solid #ff293d88;background:linear-gradient(140deg,#211216,#080709);box-shadow:0 12px 35px #0008;transition:transform .25s,border-color .25s}.icon-orbit-card:hover{transform:translateY(-7px);border-color:#ff293d}.icon-orbit-card img{width:42%;min-height:100px;object-fit:cover}.icon-orbit-card span{display:flex;flex:1;min-width:0;flex-direction:column;justify-content:center;gap:8px;padding:12px}.icon-orbit-card b{font:900 12px/1.15 var(--display)}.icon-orbit-card small{font:700 9px/1.3 var(--mono);color:#ff4051;letter-spacing:.06em}.orbit-card-1{left:4%;top:12%;transform:rotate(-4deg)}.orbit-card-2{right:4%;top:12%;transform:rotate(4deg)}.orbit-card-3{left:1.5%;top:41%;transform:rotate(3deg)}.orbit-card-4{right:1.5%;top:41%;transform:rotate(-3deg)}.orbit-card-5{left:7%;bottom:9%;transform:rotate(3deg)}.orbit-card-6{right:7%;bottom:9%;transform:rotate(-3deg)}.icon-orbit-foot{position:absolute;left:24px;right:24px;bottom:18px;display:flex;justify-content:space-between;color:#d7c4c8;font:700 9px var(--mono);letter-spacing:.1em}@media(max-width:900px){.icon-orbit-scene{min-height:780px}.icon-orbit-card{width:29%}.orbit-card-1{left:1%;top:10%}.orbit-card-2{right:1%;top:10%}.orbit-card-3{left:0;top:39%}.orbit-card-4{right:0;top:39%}.orbit-card-5{left:2%;bottom:10%}.orbit-card-6{right:2%;bottom:10%}}@media(max-width:600px){.icon-orbit-scene{min-height:0;padding:20px 12px;display:flex;flex-direction:column;gap:12px}.icon-orbit-label{position:relative;top:auto;left:auto}.icon-orbit-mascot-wrap{position:relative;left:auto;top:auto;transform:none;width:70%;margin:0 auto}.icon-orbit-mascot{max-height:320px}.icon-orbit-card{position:relative;inset:auto!important;width:100%;min-height:82px;transform:none!important}.icon-orbit-card img{min-height:82px;max-height:100px}.icon-orbit-foot{position:relative;inset:auto;display:flex;flex-direction:column;gap:8px;margin-top:8px}.icon-orbit-redesign .icon-arsenal-head{display:block}.icon-orbit-redesign .icon-arsenal-head>p{margin-top:18px}} /* Game icon intro: wide two-line layout */ .icon-arsenal-head>p{max-width:none;width:100%;font-size:clamp(17px,1.55vw,21px);line-height:1.75;text-wrap:balance;} @media(min-width:900px){.icon-arsenal-head{grid-template-columns:1fr 1.2fr;column-gap:64px;align-items:end}.icon-arsenal-head>p{max-width:none}} @media(max-width:899px){.icon-arsenal-head{grid-template-columns:1fr;gap:18px}.icon-arsenal-head>p{max-width:100%}} /* Game icon card sizing and image fallback */ .icon-arsenal-card .icon-card-art{height:clamp(170px,19vw,250px);overflow:hidden;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.025)} .icon-arsenal-card .icon-card-art img{display:block;width:100%;height:100%;object-fit:contain;font-size:0;color:transparent;text-indent:-9999px} .icon-arsenal-card .icon-card-copy h3{font-size:clamp(19px,1.65vw,25px);line-height:1.05;letter-spacing:-.035em} .icon-arsenal-card .icon-card-copy p{font-size:10px;line-height:1.35;letter-spacing:.08em} .icon-arsenal-card .icon-card-top span,.icon-arsenal-card .icon-card-bottom span{font-size:9px;letter-spacing:.1em} @media(max-width:700px){.icon-arsenal-card .icon-card-art{height:210px}.icon-arsenal-card .icon-card-copy h3{font-size:21px}} /* Force final Game Icon card sizing */ #icon-arsenal .icon-arsenal-card .icon-card-copy h3{font-size:16px!important;line-height:1.1!important;letter-spacing:-.02em!important} #icon-arsenal .icon-arsenal-card .icon-card-copy p{font-size:9px!important;line-height:1.3!important;letter-spacing:.07em!important} #icon-arsenal .icon-arsenal-card .icon-card-top span,#icon-arsenal .icon-arsenal-card .icon-card-bottom span{font-size:8px!important;letter-spacing:.09em!important} #icon-arsenal .icon-arsenal-card .icon-card-art{height:clamp(160px,17vw,220px)!important;overflow:hidden;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.025)} #icon-arsenal .icon-arsenal-card .icon-card-art img{display:block;width:100%;height:100%;object-fit:contain;font-size:0!important;color:transparent!important} @media(max-width:700px){#icon-arsenal .icon-arsenal-card .icon-card-art{height:190px!important}#icon-arsenal .icon-arsenal-card .icon-card-copy h3{font-size:16px!important}} /* FINAL ICON ARSENAL FIX — high-specificity overrides */ #icon-arsenal .icon-arsenal-card .icon-card-copy h3{font-size:16px!important;line-height:1.1!important;letter-spacing:-.02em!important} #icon-arsenal .icon-arsenal-card .icon-card-copy p{font-size:9px!important;line-height:1.35!important} #icon-arsenal .icon-arsenal-card .icon-card-top span,#icon-arsenal .icon-arsenal-card .icon-card-bottom span{font-size:8px!important} #icon-arsenal .icon-arsenal-card .icon-card-art{height:clamp(150px,17vw,220px)!important;min-height:150px!important;overflow:hidden!important} #icon-arsenal .icon-arsenal-card .icon-card-art img{width:100%!important;height:100%!important;display:block!important;object-fit:contain!important;font-size:0!important;color:transparent!important} #icon-arsenal .icon-arsenal-card .icon-card-copy h3{font-size:16px!important;line-height:1.1!important}#icon-arsenal .icon-arsenal-card .icon-card-copy p{font-size:9px!important}#icon-arsenal .icon-arsenal-card .icon-card-top span,#icon-arsenal .icon-arsenal-card .icon-card-bottom span{font-size:8px!important} #icon-arsenal .icon-arsenal-card .icon-card-copy h3{font-size:16px!important;line-height:1.1!important}#icon-arsenal .icon-arsenal-card .icon-card-copy p{font-size:9px!important} /* Hero artwork override: keep existing layout and text */ .hero{background-image:linear-gradient(90deg,rgba(5,5,5,.18) 0%,rgba(5,5,5,.04) 52%,rgba(5,5,5,.08) 100%),url('https://static.wixstatic.com/media/fb116b_d37ae2fd67fe46b7a3cefb1880357e32~mv2.png')!important;background-size:cover!important;background-position:center center!important;background-repeat:no-repeat!important} /* Icon headline: keep each phrase on one line */ .icon-arsenal-head h2{font-size:clamp(24px,7.4vw,88px);white-space:nowrap;max-width:100%;} /* Icon card metadata visibility */ .icon-arsenal-card .icon-card-copy p{color:#e6dcde!important;font-size:clamp(11px,.72vw,13px)!important;font-weight:600;letter-spacing:.08em;opacity:1!important;} .icon-arsenal-card .icon-card-bottom{color:#d9c9cd!important;font-size:clamp(10px,.68vw,12px)!important;font-weight:600;letter-spacing:.12em;opacity:1!important;} /* Mascot sizing and centering correction for the visual loadout */ @media (min-width: 1051px) { #services .service-hover-preview.is-mascot { top: 50% !important; right: 25% !important; left: auto !important; width: clamp(290px, 25vw, 465px) !important; height: clamp(360px, 40vw, 575px) !important; transform: translateY(-50%) rotate(1.4deg) scale(1.02) !important; } } @media (min-width: 761px) and (max-width: 1050px) { #services .service-hover-preview.is-mascot { top: 50% !important; right: 16% !important; left: auto !important; width: clamp(260px, 34vw, 350px) !important; height: clamp(330px, 44vw, 460px) !important; transform: translateY(-50%) rotate(1.4deg) scale(1.02) !important; } } /* Final desktop mascot anchor: centered vertically on the service list */ @media (min-width: 1051px) { #services .service-hover-preview.is-mascot { top: 50% !important; right: 25% !important; left: auto !important; width: clamp(340px, 34vw, 430px) !important; height: clamp(440px, 52vw, 650px) !important; transform: translateY(-50%) rotate(1.4deg) scale(1.02) !important; } } @media (min-width: 761px) and (max-width: 1050px) { #services .service-hover-preview.is-mascot { top: 50% !important; right: 16% !important; left: auto !important; width: clamp(290px, 38vw, 390px) !important; height: clamp(400px, 54vw, 540px) !important; transform: translateY(-50%) rotate(1.4deg) scale(1.02) !important; } } /* Keep the mascot pointing toward the service list */ @media (min-width: 761px) { #services .service-hover-preview.is-mascot img { transform: none !important; } } /* Match service hover artwork proportions to the image content */ @media (min-width: 761px) { #services .service-hover-preview.is-project.is-wide { width: clamp(380px, 32vw, 560px) !important; height: auto !important; aspect-ratio: 16 / 9; } #services .service-hover-preview.is-project.is-square { width: clamp(310px, 28vw, 440px) !important; height: auto !important; aspect-ratio: 1 / 1; } } @media (min-width: 761px) and (max-width: 1050px) { #services .service-hover-preview.is-project.is-wide { width: clamp(330px, 42vw, 460px) !important; } #services .service-hover-preview.is-project.is-square { width: clamp(260px, 35vw, 360px) !important; } } /* GAME TITLE ARTWORK — asymmetrical title treatment wall */ .title-art-section{position:relative;overflow:hidden;padding:clamp(82px,10vw,150px) 0;background:radial-gradient(ellipse at 76% 48%,rgba(115,13,28,.22),transparent 47%),linear-gradient(180deg,#0b090a 0%,#10090b 52%,#090808 100%);border-top:1px solid rgba(255,41,61,.22);border-bottom:1px solid rgba(255,41,61,.2)} .title-art-section:before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.18;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:72px 72px;mask-image:linear-gradient(90deg,transparent,#000 38%,#000)} .title-art-wrap{position:relative;width:min(1440px,calc(100% - 9vw));margin:auto} .title-art-head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(260px,.55fr);align-items:end;gap:40px;margin-bottom:clamp(36px,5vw,70px)} .title-art-head h2{margin:18px 0 0;font:900 clamp(54px,8.3vw,122px)/.82 var(--display);letter-spacing:-.045em;text-transform:uppercase;color:#f7f3f2} .title-art-head h2 .red{color:#ff293d} .title-art-head p{max-width:410px;margin:0 0 5px;color:#b4a5a7;font-size:clamp(14px,1.15vw,17px);line-height:1.75} .title-art-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(12px,1.4vw,20px);align-items:stretch} .title-art-card{--art-accent:rgba(255,41,61,.2);position:relative;isolation:isolate;min-width:0;min-height:clamp(240px,23vw,340px);grid-column:span 4;overflow:hidden;border:1px solid rgba(255,255,255,.12);border-radius:10px;background:radial-gradient(ellipse at 50% 48%,var(--art-accent),transparent 67%),linear-gradient(145deg,#191416,#080809 72%);box-shadow:inset 0 1px rgba(255,255,255,.06),0 20px 55px rgba(0,0,0,.23);transition:transform .45s cubic-bezier(.2,.8,.2,1),border-color .35s,box-shadow .35s} .title-art-card:before{content:"";position:absolute;inset:10px;z-index:-1;border:1px solid rgba(255,255,255,.045);border-radius:5px;pointer-events:none} .title-art-card:after{content:"";position:absolute;top:0;left:-70%;width:45%;height:1px;background:linear-gradient(90deg,transparent,#ff293d,transparent);box-shadow:0 0 18px #ff293d;transition:left .6s ease} .title-art-card:hover,.title-art-card:focus-within{transform:translateY(-7px);border-color:rgba(255,41,61,.65);box-shadow:inset 0 1px rgba(255,255,255,.08),0 28px 70px rgba(0,0,0,.45),0 0 28px rgba(255,41,61,.08)} .title-art-card:hover:after{left:130%} .title-art-mini{--art-accent:rgba(0,135,255,.2)}.title-art-ghost{--art-accent:rgba(177,153,123,.2)}.title-art-zombie{--art-accent:rgba(255,20,25,.28)}.title-art-impossible{grid-column:span 6;--art-accent:rgba(255,188,0,.2)}.title-art-gang{grid-column:span 3;--art-accent:rgba(242,28,186,.2)}.title-art-robots{grid-column:span 3;--art-accent:rgba(84,120,255,.2)}.title-art-carracing{grid-column:span 3;--art-accent:rgba(255,36,51,.22)}.title-art-dungeon{grid-column:span 5;--art-accent:rgba(255,179,22,.22)}.title-art-speed{grid-column:span 4;--art-accent:rgba(255,95,24,.24)} .title-art-index{position:absolute;z-index:2;top:17px;left:18px;display:flex;align-items:center;gap:12px;color:#ff5362;font:700 10px var(--mono);letter-spacing:.12em}.title-art-index i{color:#aa999c;font-style:normal;font-size:9px;letter-spacing:.08em} .title-art-image{position:absolute;inset:45px 16px 43px;display:grid;place-items:center;overflow:hidden}.title-art-image:before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse,rgba(0,0,0,.04),transparent 72%);pointer-events:none} .title-art-image img{display:block;width:100%;height:100%;object-fit:contain;object-position:center;filter:drop-shadow(0 12px 16px rgba(0,0,0,.38));transition:transform .55s cubic-bezier(.2,.8,.2,1),filter .4s} .title-art-card:hover .title-art-image img{transform:scale(1.055);filter:drop-shadow(0 16px 22px rgba(0,0,0,.55))} .title-art-name{position:absolute;left:18px;bottom:15px;color:#e8dfe0;font:700 9px var(--mono);letter-spacing:.1em;text-transform:uppercase}.title-art-mark{position:absolute;right:17px;bottom:13px;color:#ff293d;font-size:15px;transition:transform .3s}.title-art-card:hover .title-art-mark{transform:translate(3px,-3px)} .title-art-foot{display:flex;justify-content:space-between;gap:20px;margin-top:24px;padding-top:15px;border-top:1px solid rgba(255,41,61,.22);color:#8f7e81;font:9px var(--mono);letter-spacing:.12em}.title-art-foot b{color:#ff293d;margin-left:8px} @media(max-width:900px){.title-art-wrap{width:calc(100% - 40px)}.title-art-head{grid-template-columns:1fr .7fr;gap:22px}.title-art-card{min-height:245px}.title-art-impossible{grid-column:span 7}.title-art-gang{grid-column:span 5}.title-art-robots,.title-art-carracing,.title-art-speed{grid-column:span 4}.title-art-dungeon{grid-column:span 4}} @media(max-width:620px){.title-art-section{padding:76px 0}.title-art-wrap{width:calc(100% - 32px)}.title-art-head{grid-template-columns:1fr;gap:18px;margin-bottom:28px}.title-art-head h2{font-size:clamp(48px,13vw,76px)}.title-art-head p{max-width:460px;font-size:13px}.title-art-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.title-art-card,.title-art-impossible,.title-art-gang,.title-art-robots,.title-art-carracing,.title-art-dungeon,.title-art-speed{grid-column:span 1;min-height:clamp(190px,55vw,270px)}.title-art-zombie,.title-art-impossible,.title-art-speed{grid-column:span 2}.title-art-image{inset:43px 10px 40px}.title-art-index{top:13px;left:12px;gap:7px;font-size:9px}.title-art-index i{font-size:8px}.title-art-name{left:12px;bottom:13px;font-size:8px}.title-art-mark{right:12px;bottom:10px}.title-art-foot{flex-direction:column;gap:8px;font-size:8px}} @media(prefers-reduced-motion:reduce){.title-art-card,.title-art-card:after,.title-art-image img,.title-art-mark{transition:none!important}} /* TITLE ART SPOTLIGHT — interactive gallery, responsive and keyboard-accessible */ .title-art-gallery{position:relative;overflow:hidden;padding:clamp(80px,9vw,132px) 0;background:radial-gradient(ellipse at 72% 48%,rgba(120,14,30,.2),transparent 48%),#090809;border-top:1px solid rgba(255,41,61,.22);border-bottom:1px solid rgba(255,41,61,.22)} .title-art-gallery:before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.18;background:linear-gradient(90deg,transparent 49.95%,rgba(255,255,255,.08) 50%,transparent 50.05%),linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px);background-size:100% 100%,100% 68px;mask-image:linear-gradient(90deg,transparent,#000 35%,#000)} .ta-wrap{position:relative;width:min(1450px,calc(100% - 8vw));margin:auto}.ta-heading{display:grid;grid-template-columns:minmax(0,1fr) minmax(250px,.48fr);gap:40px;align-items:end;margin-bottom:clamp(30px,4vw,52px)} .ta-heading h2{margin:16px 0 0;color:#f7f2f2;font:900 clamp(52px,7.5vw,108px)/.84 var(--display);letter-spacing:-.045em;text-transform:uppercase}.ta-heading h2 .red{color:#ff293d}.ta-heading p{max-width:390px;margin:0 0 4px;color:#b5a6a8;font-size:clamp(13px,1.05vw,16px);line-height:1.8} .ta-layout{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(320px,.72fr);gap:clamp(16px,2vw,28px);align-items:stretch}.ta-feature{--ta-glow:#ff293d;position:relative;display:flex;min-width:0;min-height:clamp(510px,45vw,660px);flex-direction:column;overflow:hidden;border:1px solid rgba(255,255,255,.15);border-radius:12px;background:linear-gradient(145deg,#151113,#080809 70%);box-shadow:0 30px 90px rgba(0,0,0,.38),inset 0 0 80px color-mix(in srgb,var(--ta-glow) 12%,transparent);transition:box-shadow .4s} .ta-feature:before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 50%,color-mix(in srgb,var(--ta-glow) 22%,transparent),transparent 61%);transition:background .45s}.ta-feature-top,.ta-feature-bottom{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:20px 24px}.ta-feature-top{border-bottom:1px solid rgba(255,255,255,.09);color:#dacfd0;font:700 9px var(--mono);letter-spacing:.13em}.ta-feature-top>span:first-child{display:flex;align-items:center;gap:9px}.ta-feature-top i{width:7px;height:7px;border-radius:50%;background:var(--ta-glow);box-shadow:0 0 14px var(--ta-glow)}.ta-counter{color:#f6f1f1;font:800 18px var(--display)}.ta-counter em{color:#8b7c7e;font:10px var(--mono);font-style:normal} .ta-art-stage{position:relative;display:grid;flex:1;min-height:350px;place-items:center;overflow:hidden;isolation:isolate}.ta-art-stage:before{content:"";position:absolute;inset:0;z-index:-1;background:repeating-linear-gradient(0deg,transparent 0 4px,rgba(255,255,255,.012) 5px),radial-gradient(ellipse at 50% 52%,rgba(255,255,255,.055),transparent 64%)}.ta-stage-ghost{position:absolute;left:50%;top:50%;z-index:-1;transform:translate(-50%,-53%);color:rgba(255,255,255,.035);font:900 clamp(220px,30vw,440px)/.7 var(--display);letter-spacing:-.08em}.ta-stage-ring{position:absolute;width:min(68%,520px);aspect-ratio:1;border:1px solid rgba(255,255,255,.07);border-radius:50%;box-shadow:0 0 0 34px rgba(255,255,255,.018),0 0 0 68px rgba(255,255,255,.012);animation:taOrbit 28s linear infinite}.ta-art-frame{position:relative;display:grid;width:78%;height:78%;place-items:center}.ta-art-frame:after{content:"";position:absolute;bottom:8%;left:16%;right:16%;height:10%;border-radius:50%;background:var(--ta-glow);filter:blur(38px);opacity:.25;z-index:-1}.ta-art-frame img{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 20px 28px rgba(0,0,0,.46));transition:opacity .18s,transform .45s cubic-bezier(.2,.8,.2,1)}.ta-art-frame img.is-changing{opacity:.12;transform:scale(.96)}.ta-stage-corner{position:absolute;width:40px;height:40px;border-color:var(--ta-glow);opacity:.8}.ta-corner-a{left:22px;top:22px;border-left:1px solid;border-top:1px solid}.ta-corner-b{right:22px;bottom:22px;border-right:1px solid;border-bottom:1px solid} .ta-feature-bottom{border-top:1px solid rgba(255,255,255,.09);padding-top:19px;padding-bottom:21px}.ta-genre{color:var(--ta-glow);font:700 9px var(--mono);letter-spacing:.14em}.ta-feature-bottom h3{margin:8px 0 0;color:#f5f0f0;font:800 clamp(19px,2.2vw,30px)/1 var(--display);letter-spacing:.01em}.ta-controls{display:flex;gap:8px}.ta-controls button{width:42px;height:42px;border:1px solid rgba(255,255,255,.18);border-radius:50%;background:#100d0e;color:#fff;font-size:18px;cursor:pointer;transition:background .2s,border .2s,transform .2s}.ta-controls button:hover,.ta-controls button:focus-visible{border-color:var(--ta-glow);background:var(--ta-glow);transform:translateY(-2px);outline:none} .ta-index{display:flex;min-height:0;flex-direction:column;border:1px solid rgba(255,255,255,.12);border-radius:12px;background:linear-gradient(160deg,rgba(255,255,255,.035),rgba(255,255,255,.012));overflow:hidden}.ta-index-head,.ta-index-foot{display:flex;justify-content:space-between;padding:19px 18px;color:#a49396;font:700 9px var(--mono);letter-spacing:.14em}.ta-index-head{border-bottom:1px solid rgba(255,255,255,.1);color:#e8dfe0}.ta-index-foot{margin-top:auto;border-top:1px solid rgba(255,255,255,.1)}.ta-index-foot span:last-child{color:#ff293d}.ta-picks{display:flex;flex:1;flex-direction:column;padding:5px 10px}.ta-pick{display:grid;grid-template-columns:28px 62px minmax(0,1fr) 16px;align-items:center;gap:11px;min-height:54px;padding:6px 8px;border:0;border-bottom:1px solid rgba(255,255,255,.07);border-radius:4px;background:transparent;color:#fff;text-align:left;cursor:pointer;transition:background .22s,border-color .22s}.ta-pick:last-child{border-bottom:0}.ta-pick:hover,.ta-pick:focus-visible{background:rgba(255,255,255,.045);outline:none}.ta-pick.is-selected{background:linear-gradient(90deg,color-mix(in srgb,var(--ta-glow,#ff293d) 15%,transparent),rgba(255,255,255,.025));box-shadow:inset 2px 0 #ff293d}.ta-pick-num{color:#ff5362;font:700 10px var(--mono)}.ta-pick-thumb{display:grid;width:62px;height:40px;place-items:center;overflow:hidden;border:1px solid rgba(255,255,255,.12);border-radius:3px;background:radial-gradient(ellipse,rgba(255,41,61,.13),#0b090a 70%)}.ta-pick-thumb img{width:90%;height:90%;object-fit:contain}.ta-pick-copy{min-width:0}.ta-pick-copy b,.ta-pick-copy small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ta-pick-copy b{color:#eee8e8;font:700 10px var(--mono);letter-spacing:.015em}.ta-pick-copy small{margin-top:4px;color:#8f7e81;font:8px var(--mono);letter-spacing:.08em}.ta-pick-arrow{color:#6c5b5e;font-size:13px;transition:color .2s,transform .2s}.ta-pick.is-selected .ta-pick-arrow,.ta-pick:hover .ta-pick-arrow{color:#ff293d;transform:translate(2px,-2px)}.ta-footer{display:flex;justify-content:space-between;gap:20px;margin-top:21px;padding-top:14px;border-top:1px solid rgba(255,41,61,.22);color:#8e7d80;font:9px var(--mono);letter-spacing:.12em} @keyframes taOrbit{to{transform:rotate(360deg)}} @media(max-width:900px){.ta-wrap{width:calc(100% - 40px)}.ta-layout{grid-template-columns:minmax(0,1.2fr) minmax(300px,.8fr)}.ta-feature{min-height:570px}.ta-pick{grid-template-columns:24px 50px minmax(0,1fr) 14px;gap:8px;min-height:54px}.ta-pick-thumb{width:50px;height:36px}.ta-pick-copy b{font-size:9px}} @media(max-width:700px){.title-art-gallery{padding:74px 0}.ta-wrap{width:calc(100% - 32px)}.ta-heading{grid-template-columns:1fr;gap:16px;margin-bottom:24px}.ta-heading h2{font-size:clamp(48px,12.5vw,76px)}.ta-heading p{font-size:13px}.ta-layout{grid-template-columns:1fr;gap:12px}.ta-feature{min-height:460px}.ta-art-stage{min-height:280px}.ta-art-frame{width:82%;height:76%}.ta-feature-top,.ta-feature-bottom{padding:15px}.ta-feature-bottom h3{font-size:22px}.ta-index-head,.ta-index-foot{padding:14px}.ta-picks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;padding:8px}.ta-pick{grid-template-columns:22px 42px minmax(0,1fr);min-height:58px;gap:6px;padding:5px}.ta-pick-thumb{width:42px;height:34px}.ta-pick-arrow{display:none}.ta-pick-copy b{font-size:8px}.ta-pick-copy small{font-size:7px}.ta-footer{flex-direction:column;gap:7px;font-size:8px}} @media(max-width:390px){.ta-feature{min-height:410px}.ta-art-stage{min-height:235px}.ta-picks{grid-template-columns:1fr}.ta-pick{grid-template-columns:28px 54px minmax(0,1fr)}.ta-pick-thumb{width:54px;height:36px}} @media(prefers-reduced-motion:reduce){.ta-stage-ring{animation:none}.ta-art-frame img,.ta-pick,.ta-controls button{transition:none!important}} /* Larger, easier-to-read title index */ @media(min-width:701px){.ta-layout{grid-template-columns:minmax(0,1.35fr) minmax(370px,.9fr)}.ta-pick{grid-template-columns:30px 70px minmax(0,1fr) 18px;gap:12px;min-height:62px;padding:8px 10px}.ta-pick-thumb{width:70px;height:44px}.ta-pick-copy b{font-size:clamp(11px,.95vw,13px);letter-spacing:0}.ta-pick-copy small{font-size:9px;letter-spacing:.09em}.ta-pick-num{font-size:11px}} @media(min-width:701px) and (max-width:900px){.ta-layout{grid-template-columns:minmax(0,1.1fr) minmax(340px,.9fr)}} @media(max-width:700px){.ta-pick-copy b{font-size:10px}.ta-pick-copy small{font-size:8px}} /* Slightly larger title-art previews in the selector rail */ @media(min-width:701px){.ta-pick{grid-template-columns:30px 88px minmax(0,1fr) 18px;min-height:68px}.ta-pick-thumb{width:88px;height:54px}} @media(min-width:701px) and (max-width:900px){.ta-pick{grid-template-columns:26px 78px minmax(0,1fr) 16px;min-height:64px}.ta-pick-thumb{width:78px;height:50px}} /* Larger selector artwork previews, with room for titles */ @media(min-width:901px){.ta-layout{grid-template-columns:minmax(0,1.2fr) minmax(430px,.95fr)}.ta-pick{grid-template-columns:30px 108px minmax(0,1fr) 18px;min-height:74px}.ta-pick-thumb{width:108px;height:66px}} @media(min-width:701px) and (max-width:900px){.ta-pick{grid-template-columns:26px 90px minmax(0,1fr) 16px;min-height:68px}.ta-pick-thumb{width:90px;height:58px}} /* Subtle crossfade when a title artwork is selected */ .ta-art-frame img{transition:opacity .34s ease} .ta-art-frame img.is-fading{opacity:0} @media(prefers-reduced-motion:reduce){.ta-art-frame img{transition:none}} /* FAQ answers: larger, clearer type matched to the mono reference */ .faq-list details p{font-family:var(--mono);font-size:14px;line-height:1.75;color:#c4b5b6} /* About Me paragraphs: match the FAQ's monospaced type style */ .about-v2-copy p{font-family:var(--mono)} /* Ensure the About Me body uses the same mono typeface as FAQ answers */ #studio .about-v2-copy p{font-family:var(--mono)!important} /* Different Rules card descriptions: match the About Me mono typeface */ #lab .lab-copy p{font-family:var(--mono)!important} /* Different Genres / Different Rules card subheadings: use Milker Regular */ #lab .lab-copy h3{font-family:"Milker Regular",sans-serif!important;font-weight:400!important;letter-spacing:normal!important} /* Supporting copy in the sections matched from the user's screenshots */ #intro .intro-live-copy>p, #icon-arsenal .icon-arsenal-head>p, #services .services-head>p, #title-artwork .ta-heading>p, #lab .section-head>p{font-family:var(--mono)!important} /* Slight label readability increase */ .work-bottom .text-link { font-size: 12px !important; } #icon-arsenal .icon-arsenal-foot { font-size: clamp(9px, .68vw, 11px) !important; } #icon-arsenal .icon-arsenal-foot b { font-size: 13px !important; } #icon-arsenal .icon-arsenal-disclaimer { font-size: 10px !important; } #title-artwork .ta-footer { font-size: clamp(10px, .72vw, 12px) !important; } #lab .lab-disclaimer { font-size: 13px !important; } /* CREATIVE CONTACT FOOTER */ .contact-footer{isolation:isolate;text-align:left;padding:clamp(70px,8vw,112px) 0 48px;background:radial-gradient(ellipse at 18% 55%,#351017 0,transparent 47%),linear-gradient(135deg,#10090b,#080708 68%);border-top:1px solid #51222a;overflow:hidden} .contact-footer-gridline{position:absolute;inset:0;z-index:-1;opacity:.16;background-image:linear-gradient(#ff293d14 1px,transparent 1px),linear-gradient(90deg,#ff293d14 1px,transparent 1px);background-size:56px 56px;mask-image:linear-gradient(90deg,#000,transparent 70%)} .contact-footer-wrap{position:relative;z-index:1} .contact-footer-head{display:flex;justify-content:space-between;align-items:center;padding-bottom:17px;border-bottom:1px solid #482027} .contact-footer-head .kicker{display:flex;align-items:center;gap:9px;font-size:9px} .contact-footer-head .kicker i,.contact-footer-status i{width:7px;height:7px;border-radius:50%;background:#ff293d;box-shadow:0 0 12px #ff293d} .contact-footer-index{font:9px var(--mono);letter-spacing:.12em;color:#8f797d} .contact-footer-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(38px,8vw,120px);align-items:center;padding:clamp(44px,7vw,92px) 0 65px} .contact-footer-copy{max-width:710px} .contact-footer-overline{font:10px var(--mono);letter-spacing:.14em;color:#c6a9ad;margin:0 0 19px} .contact-footer h2{font:900 clamp(62px,8.1vw,116px)/.78 var(--display);letter-spacing:-.045em;margin:0;text-align:left} .contact-footer h2>span{color:#fff} .contact-footer h2 em{color:var(--red);font-style:normal;text-shadow:0 0 25px #ff293d30} .contact-footer-intro{max-width:430px;margin:28px 0 33px;color:#b29c9e;font-size:13px;line-height:1.85} .contact-footer-direct{display:flex;flex-direction:column;align-items:flex-start;gap:11px;padding-top:17px;border-top:1px solid #462027;max-width:460px} .contact-footer-status{display:flex;align-items:center;gap:9px;font:8px var(--mono);letter-spacing:.08em;color:#9b8689} .contact-footer-status i{width:5px;height:5px} .contact-footer-direct>a{font:700 13px var(--mono);letter-spacing:.06em;color:#f5e7e8} .contact-footer-direct>a:hover{color:var(--red)} .contact-footer-direct>a b{margin-left:8px;color:var(--red)} .contact-footer-form{padding:25px;background:linear-gradient(145deg,#171012eF,#0c090a);border:1px solid #563039;box-shadow:0 18px 55px #0007;position:relative} .contact-footer-form:before{content:"";position:absolute;top:-1px;left:24px;width:70px;height:2px;background:var(--red);box-shadow:0 0 15px #ff293d88} .contact-footer-form-head{display:flex;justify-content:space-between;align-items:center;padding-bottom:17px;border-bottom:1px solid #392126;font:10px var(--mono);letter-spacing:.12em;color:#fff} .contact-footer-form-head b{color:#ff5362;font-size:9px} .contact-footer-fields{display:grid;grid-template-columns:1fr 1fr;gap:16px 12px;padding:20px 0} .footer-field{display:flex;flex-direction:column;gap:8px;min-width:0} .footer-field-wide{grid-column:1/-1} .footer-field label{font:8px var(--mono);letter-spacing:.1em;color:#c5aeb1} .footer-field input,.footer-field select,.footer-field textarea{width:100%;border:1px solid #41272c;border-radius:2px;background:#090708;color:#f8f1ef;padding:12px 13px;font:11px var(--body);outline:none;transition:border-color .2s,box-shadow .2s} .footer-field input,.footer-field select{height:42px} .footer-field textarea{min-height:76px;resize:vertical} .footer-field input::placeholder,.footer-field textarea::placeholder{color:#756568} .footer-field select:invalid{color:#756568} .footer-field input:focus,.footer-field select:focus,.footer-field textarea:focus{border-color:#ff5362;box-shadow:0 0 0 2px #ff293d1c} .contact-footer-submit{display:flex;align-items:center;justify-content:space-between;gap:14px;padding-top:16px;border-top:1px solid #392126} .contact-footer-submit p{max-width:190px;margin:0;color:#927e81;font:8px/1.65 var(--mono)} .contact-footer-send{display:flex;align-items:center;gap:18px;min-height:46px;border:1px solid #ff4b5d;background:var(--red);color:white;padding:0 10px 0 15px;cursor:pointer;font:9px var(--mono);letter-spacing:.07em;transition:transform .2s,box-shadow .2s} .contact-footer-send b{display:grid;place-items:center;width:27px;height:27px;background:#10090b;font:17px var(--body);color:#ff5362} .contact-footer-send:hover{transform:translateY(-2px);box-shadow:0 0 20px #ff293d66} .contact-footer-foot{display:flex;justify-content:space-between;gap:20px;padding-top:16px;border-top:1px solid #482027;color:#937d81;font:8px var(--mono);letter-spacing:.1em} .footer-creative{padding:23px 0 20px;background:#070607;border-top:0} .footer-creative .footer-top{padding-bottom:18px} .footer-signoff{color:#867376;font:8px var(--mono);letter-spacing:.1em} .footer-signoff i{color:var(--red);font-style:normal;padding:0 6px} .footer-creative .footer-links{font-size:9px} .footer-creative .footer-bottom{margin-top:0} @media(max-width:850px){.contact-footer-grid{grid-template-columns:1fr;gap:38px}.contact-footer-copy{max-width:750px}.contact-footer h2{font-size:clamp(70px,12vw,110px)}.contact-footer-form{max-width:700px}} @media(max-width:650px){.contact-footer{padding:65px 0 35px}.contact-footer-head .kicker,.contact-footer-index{font-size:7px}.contact-footer-grid{padding:45px 0 40px;gap:30px}.contact-footer-overline{font-size:8px}.contact-footer h2{font-size:clamp(59px,14.5vw,88px)}.contact-footer-intro{font-size:12px;margin:23px 0 25px}.contact-footer-form{padding:19px 15px}.contact-footer-fields{grid-template-columns:1fr;gap:14px}.footer-field-wide{grid-column:auto}.contact-footer-submit{align-items:flex-start;flex-direction:column}.contact-footer-submit p{max-width:none}.contact-footer-send{width:100%;justify-content:space-between}.contact-footer-foot{flex-direction:column;gap:8px;font-size:7px}.footer-signoff{font-size:7px}.footer-creative .footer-top{gap:17px}} /* EDGE-TO-EDGE MAGNETIC FOOTER WORDMARK */ .contact-footer{isolation:isolate;text-align:left;padding:0 0 0;background:radial-gradient(ellipse at 16% 43%,#351017 0,transparent 42%),linear-gradient(135deg,#10090b,#080708 72%);border-top:1px solid #51222a;overflow:hidden} .contact-footer-gridline{position:absolute;inset:0;z-index:-1;opacity:.15;background-image:linear-gradient(#ff293d14 1px,transparent 1px),linear-gradient(90deg,#ff293d14 1px,transparent 1px);background-size:56px 56px;mask-image:linear-gradient(90deg,#000,transparent 75%)} .contact-footer-meta{height:56px;padding:0 4.5vw;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #482027;color:#b19b9e;font:9px var(--mono);letter-spacing:.12em} .contact-footer-meta>span:first-child{display:flex;align-items:center;gap:10px;color:#ff6470} .contact-footer-meta i{width:6px;height:6px;border-radius:50%;background:var(--red);box-shadow:0 0 12px var(--red)} .contact-footer-word-stage{position:relative;display:flex;align-items:center;justify-content:center;width:100%;min-height:clamp(250px,32vw,510px);padding:28px 3.2vw 38px;overflow:hidden;border-bottom:1px solid #482027;background:radial-gradient(ellipse at var(--glow-x,50%) var(--glow-y,50%),rgba(255,41,61,.13),transparent 38%)} .contact-footer-word-stage:before,.contact-footer-word-stage:after{content:"";position:absolute;left:4.5vw;right:4.5vw;height:1px;background:#ff293d33} .contact-footer-word-stage:before{top:18%}.contact-footer-word-stage:after{bottom:17%} .contact-footer-word{position:relative;z-index:1;display:flex;align-items:baseline;justify-content:center;gap:.12em;width:100%;white-space:nowrap;margin:0;color:#fbf5f3;font:900 clamp(92px,19.5vw,365px)/.78 var(--display);letter-spacing:-.065em;transform:translate3d(var(--mag-x,0px),var(--mag-y,0px),0) rotate(var(--mag-r,0deg));transform-origin:center;transition:transform .24s cubic-bezier(.2,.8,.2,1),filter .25s;text-shadow:0 12px 0 #120a0c,0 25px 55px #0009} .contact-footer-word em{font-style:normal;color:var(--red);text-shadow:0 12px 0 #260810,0 0 42px #ff293d3b} .contact-footer-word sup{align-self:flex-start;margin:1.2em 0 0 .1em;font:700 clamp(14px,2vw,28px) var(--mono);letter-spacing:0;color:#ff7580} .contact-footer-word-stage.is-hovering .contact-footer-word{filter:drop-shadow(0 0 22px #ff293d4c)} .contact-footer-sidecode,.contact-footer-hint,.contact-footer-coordinate{position:absolute;z-index:2;color:#9c868a;font:8px/1.7 var(--mono);letter-spacing:.12em} .contact-footer-sidecode{left:4.5vw;top:25%} .contact-footer-hint{right:4.5vw;top:24%;display:flex;align-items:center;gap:8px;color:#d8c3c5} .contact-footer-hint i{font-style:normal;color:var(--red)} .contact-footer-coordinate{right:4.5vw;bottom:23%;text-align:right;color:#755f63} .contact-footer-main{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(42px,8vw,132px);align-items:center;padding:clamp(50px,7vw,96px) 7vw} .contact-footer-copy{max-width:520px} .contact-footer-overline{font:10px var(--mono);letter-spacing:.14em;color:#c6a9ad;margin:0 0 18px} .contact-footer-copy h3{font:900 clamp(52px,6.2vw,86px)/.82 var(--display);letter-spacing:-.035em;margin:0} .contact-footer-copy h3 span{color:var(--red);text-shadow:0 0 25px #ff293d30} .contact-footer-intro{max-width:410px;margin:25px 0 31px;color:#b29c9e;font-size:13px;line-height:1.85} .contact-footer-direct{display:flex;flex-direction:column;align-items:flex-start;gap:11px;padding-top:17px;border-top:1px solid #462027} .contact-footer-status{display:flex;align-items:center;gap:9px;font:8px var(--mono);letter-spacing:.08em;color:#9b8689} .contact-footer-status i{width:5px;height:5px;border-radius:50%;background:#ff293d;box-shadow:0 0 10px #ff293d} .contact-footer-direct>a{font:700 13px var(--mono);letter-spacing:.06em;color:#f5e7e8} .contact-footer-direct>a:hover{color:var(--red)}.contact-footer-direct>a b{margin-left:8px;color:var(--red)} .contact-footer-form{padding:25px;background:linear-gradient(145deg,#171012ef,#0c090a);border:1px solid #563039;box-shadow:0 18px 55px #0007;position:relative} .contact-footer-form:before{content:"";position:absolute;top:-1px;left:24px;width:70px;height:2px;background:var(--red);box-shadow:0 0 15px #ff293d88} .contact-footer-form-head{display:flex;justify-content:space-between;align-items:center;padding-bottom:17px;border-bottom:1px solid #392126;font:10px var(--mono);letter-spacing:.12em;color:#fff} .contact-footer-form-head b{color:#ff5362;font-size:9px} .contact-footer-fields{display:grid;grid-template-columns:1fr 1fr;gap:16px 12px;padding:20px 0} .footer-field{display:flex;flex-direction:column;gap:8px;min-width:0}.footer-field-wide{grid-column:1/-1} .footer-field label{font:8px var(--mono);letter-spacing:.1em;color:#c5aeb1} .footer-field input,.footer-field select,.footer-field textarea{width:100%;border:1px solid #41272c;border-radius:2px;background:#090708;color:#f8f1ef;padding:12px 13px;font:11px var(--body);outline:none;transition:border-color .2s,box-shadow .2s} .footer-field input,.footer-field select{height:42px}.footer-field textarea{min-height:76px;resize:vertical} .footer-field input::placeholder,.footer-field textarea::placeholder{color:#756568}.footer-field select:invalid{color:#756568} .footer-field input:focus,.footer-field select:focus,.footer-field textarea:focus{border-color:#ff5362;box-shadow:0 0 0 2px #ff293d1c} .contact-footer-submit{display:flex;align-items:center;justify-content:space-between;gap:14px;padding-top:16px;border-top:1px solid #392126} .contact-footer-submit p{max-width:190px;margin:0;color:#927e81;font:8px/1.65 var(--mono)} .contact-footer-send{display:flex;align-items:center;gap:18px;min-height:46px;border:1px solid #ff4b5d;background:var(--red);color:white;padding:0 10px 0 15px;cursor:pointer;font:9px var(--mono);letter-spacing:.07em;transition:transform .2s,box-shadow .2s} .contact-footer-send b{display:grid;place-items:center;width:27px;height:27px;background:#10090b;font:17px var(--body);color:#ff5362} .contact-footer-send:hover{transform:translateY(-2px);box-shadow:0 0 20px #ff293d66} .contact-footer-foot{display:flex;justify-content:space-between;gap:20px;padding:15px 4.5vw;border-top:1px solid #482027;color:#937d81;font:8px var(--mono);letter-spacing:.1em} .footer-creative{padding:21px 4.5vw 18px;background:#070607;border-top:0} .footer-creative .footer-top{padding-bottom:16px} .footer-signoff{color:#867376;font:8px var(--mono);letter-spacing:.1em} .footer-signoff i{color:var(--red);font-style:normal;padding:0 6px} .footer-creative .footer-links{font-size:9px}.footer-creative .footer-bottom{margin-top:0} @media(max-width:900px){.contact-footer-main{grid-template-columns:1fr;gap:38px;padding:55px 6vw}.contact-footer-copy{max-width:700px}.contact-footer-word{font-size:20vw}.contact-footer-sidecode,.contact-footer-coordinate{font-size:7px}} @media(max-width:650px){.contact-footer-meta{height:46px;padding:0 5.5vw;font-size:7px}.contact-footer-word-stage{min-height:215px;padding:25px 2vw}.contact-footer-word{font-size:19vw;letter-spacing:-.07em}.contact-footer-word-stage:before{top:13%}.contact-footer-word-stage:after{bottom:13%}.contact-footer-sidecode{left:5.5vw;top:16%;font-size:6px}.contact-footer-hint{top:auto;right:5.5vw;bottom:15%;font-size:6px}.contact-footer-coordinate{display:none}.contact-footer-main{padding:43px 5.5vw;gap:28px}.contact-footer-copy h3{font-size:clamp(52px,13vw,76px)}.contact-footer-intro{font-size:12px;margin:20px 0 24px}.contact-footer-form{padding:19px 15px}.contact-footer-fields{grid-template-columns:1fr;gap:14px}.footer-field-wide{grid-column:auto}.contact-footer-submit{align-items:flex-start;flex-direction:column}.contact-footer-submit p{max-width:none}.contact-footer-send{width:100%;justify-content:space-between}.contact-footer-foot{flex-direction:column;gap:8px;padding:14px 5.5vw;font-size:6px}.footer-creative{padding:19px 5.5vw 16px}.footer-signoff{font-size:7px}.footer-creative .footer-top{gap:17px}} @media(prefers-reduced-motion:reduce){.contact-footer-word{transition:none}} /* FULL-WIDTH FOOTER WORDMARK SCALE */ .contact-footer-word-stage{min-height:clamp(290px,37vw,690px)} .contact-footer-word{font-size:clamp(130px,35vw,740px)} @media(max-width:900px){.contact-footer-word{font-size:clamp(120px,36vw,420px)}} @media(max-width:650px){.contact-footer-word-stage{min-height:220px}.contact-footer-word{font-size:clamp(65px,17vw,125px)}} /* FOOTER WORDMARK CASCADE FIX */ .final-cta.contact-footer .contact-footer-word{font-size:clamp(130px,35vw,740px)!important} @media(max-width:900px){.final-cta.contact-footer .contact-footer-word{font-size:clamp(120px,36vw,420px)!important}} @media(max-width:650px){.final-cta.contact-footer .contact-footer-word{font-size:clamp(65px,17vw,125px)!important}} /* FITTED FOOTER WORDMARK */ .final-cta.contact-footer .contact-footer-word{font-size:clamp(110px,19vw,380px)!important} @media(max-width:900px){.final-cta.contact-footer .contact-footer-word{font-size:clamp(80px,20vw,180px)!important}} @media(max-width:650px){.final-cta.contact-footer .contact-footer-word{font-size:clamp(65px,17vw,125px)!important}} /* GENRE MASCOT FOOTER LOOP */ .final-cta.contact-footer .contact-footer-word{gap:0;font-size:clamp(110px,25vw,460px)!important} .final-cta.contact-footer .contact-footer-word>em{display:flex;gap:0} .final-cta.contact-footer .footer-glyph{display:inline-block;position:relative} .final-cta.contact-footer .footer-word-space{display:inline-block;width:.22em} .footer-mascot{position:absolute;z-index:4;left:0;top:0;width:clamp(42px,5vw,76px);aspect-ratio:4/5;pointer-events:none;background-image:url('https://static.wixstatic.com/media/fb116b_2ea5a89fddec4b0fb52a2f8be7923410~mv2.png');background-size:200% 200%;background-repeat:no-repeat;background-position:0 0;filter:drop-shadow(0 5px 8px rgba(0,0,0,.55));transform-origin:50% 85%;opacity:0;transition:opacity .18s} .footer-mascot[data-skin="runner"]{background-position:0 0} .footer-mascot[data-skin="racing"]{background-position:100% 0} .footer-mascot[data-skin="fantasy"]{background-position:0 100%} .footer-mascot[data-skin="scifi"]{background-position:100% 100%} .footer-mascot.is-running,.footer-mascot.is-posing{opacity:1} .footer-mascot.is-running{animation:footerMascotRun 2.5s cubic-bezier(.2,.75,.25,1) forwards} @keyframes footerMascotRun{0%{transform:translateX(0) translateY(0) rotate(-5deg) scaleX(1)}12%{transform:translateX(calc(var(--run-distance)*.12)) translateY(-10px) rotate(4deg) scaleX(1)}28%{transform:translateX(calc(var(--run-distance)*.28)) translateY(0) rotate(-4deg) scaleX(1)}45%{transform:translateX(calc(var(--run-distance)*.45)) translateY(-11px) rotate(5deg) scaleX(1)}62%{transform:translateX(calc(var(--run-distance)*.62)) translateY(0) rotate(-4deg) scaleX(1)}80%{transform:translateX(calc(var(--run-distance)*.8)) translateY(-8px) rotate(4deg) scaleX(1)}100%{transform:translateX(var(--run-distance)) translateY(0) rotate(0) scaleX(1)}} .footer-mascot.is-posing{animation:footerMascotPop .48s cubic-bezier(.2,.9,.25,1.2) both} @keyframes footerMascotPop{0%{transform:translateY(12px) scale(.45);opacity:0}65%{transform:translateY(-8px) scale(1.12);opacity:1}100%{transform:translateY(0) scale(1);opacity:1}} .footer-mascot.is-posing[data-action="celebrate"]{animation:footerMascotCelebrate .65s ease-in-out infinite alternate} @keyframes footerMascotCelebrate{to{transform:translateY(-7px) rotate(5deg)}} .footer-mascot.is-posing[data-action="hero"]{transform:rotate(-5deg)} .footer-mascot.is-posing[data-action="point"]{transform:rotate(7deg) translateY(-3px)} @media(max-width:900px){.final-cta.contact-footer .contact-footer-word{font-size:clamp(80px,22vw,205px)!important}.footer-mascot{width:clamp(34px,7vw,58px)}} @media(max-width:650px){.final-cta.contact-footer .contact-footer-word{font-size:clamp(75px,22vw,132px)!important}.footer-mascot{width:36px}} @media(prefers-reduced-motion:reduce){.footer-mascot.is-running,.footer-mascot.is-posing{animation:none;opacity:1}} /* FULL FRAME RUN + POP ACTIONS */ .footer-mascot{background:none!important;overflow:visible} .footer-mascot-art{display:block;width:100%;height:100%;background-image:url('https://static.wixstatic.com/media/fb116b_2ea5a89fddec4b0fb52a2f8be7923410~mv2.png');background-size:200% 200%;background-repeat:no-repeat;background-position:0 0;transform-origin:50% 85%;filter:drop-shadow(0 5px 8px rgba(0,0,0,.58))} .footer-mascot[data-skin="runner"] .footer-mascot-art{background-position:0 0} .footer-mascot[data-skin="racing"] .footer-mascot-art{background-position:100% 0} .footer-mascot[data-skin="fantasy"] .footer-mascot-art{background-position:0 100%} .footer-mascot[data-skin="scifi"] .footer-mascot-art{background-position:100% 100%} .footer-mascot.is-running{aspect-ratio:3/4;animation:footerMascotRun 2.5s cubic-bezier(.2,.75,.25,1) forwards} .footer-mascot.is-running .footer-mascot-art{background-image:url('https://static.wixstatic.com/media/fb116b_6953362b7a754a0c88597182592755f8~mv2.png');background-size:400% 200%;animation:footerMascotFrames .88s steps(1,end) infinite,footerMascotRunBody .44s ease-in-out infinite alternate} @keyframes footerMascotFrames{0%{background-position:0 0}12.5%{background-position:33.333% 0}25%{background-position:66.667% 0}37.5%{background-position:100% 0}50%{background-position:0 100%}62.5%{background-position:33.333% 100%}75%{background-position:66.667% 100%}87.5%,100%{background-position:100% 100%}} @keyframes footerMascotRunBody{from{transform:translateY(2px) rotate(-2deg) scaleY(.97)}to{transform:translateY(-3px) rotate(2deg) scaleY(1.03)}} .footer-mascot.is-posing{aspect-ratio:4/5;animation:footerMascotPop .48s cubic-bezier(.18,.9,.28,1.3) both,footerMascotHover 1.05s ease-in-out .48s infinite alternate} @keyframes footerMascotPop{0%{transform:translateY(18px) scale(.25);opacity:0}55%{transform:translateY(-10px) scale(1.18);opacity:1}78%{transform:translateY(3px) scale(.94)}100%{transform:translateY(0) scale(1);opacity:1}} @keyframes footerMascotHover{to{transform:translateY(-6px) rotate(2deg)}} .footer-mascot.is-posing[data-action="celebrate"] .footer-mascot-art{animation:footerArtCelebrate .55s ease-in-out infinite alternate} .footer-mascot.is-posing[data-action="hero"] .footer-mascot-art{animation:footerArtHero .85s ease-in-out infinite alternate} .footer-mascot.is-posing[data-action="point"] .footer-mascot-art{animation:footerArtPoint .7s ease-in-out infinite alternate} @keyframes footerArtCelebrate{to{transform:rotate(6deg) translateY(-2px)}} @keyframes footerArtHero{to{transform:rotate(-4deg) translateY(-2px) scale(1.025)}} @keyframes footerArtPoint{to{transform:rotate(5deg) translate(2px,-2px)}} @media(max-width:900px){.footer-mascot.is-running{width:clamp(34px,7vw,58px)}} @media(max-width:650px){.footer-mascot.is-running{width:36px}} @media(prefers-reduced-motion:reduce){.footer-mascot.is-running,.footer-mascot.is-posing,.footer-mascot-art{animation:none!important;transition:none!important}.footer-mascot.is-posing{opacity:1}} /* FOOTER PROJECT FORM TYPE SCALE */ #footer-project-form .contact-footer-form-head { font-size: 13px; font-weight: 700; } #footer-project-form .contact-footer-form-head b { font-size: 11px; font-weight: 700; } #footer-project-form .footer-field label { font-size: 12px; font-weight: 700; letter-spacing: .13em; } #footer-project-form .footer-field input, #footer-project-form .footer-field select, #footer-project-form .footer-field textarea { font-size: 16px; font-weight: 600; line-height: 1.45; } #footer-project-form .footer-field input::placeholder, #footer-project-form .footer-field textarea::placeholder { font-size: 15px; font-weight: 500; } #footer-project-form #footer-form-status { font-size: 12px; font-weight: 600; line-height: 1.6; } #footer-project-form .contact-footer-send { min-height: 54px; font-size: 12px; font-weight: 700; } @media (max-width: 650px) { #footer-project-form .footer-field label { font-size: 11px; } #footer-project-form .footer-field input, #footer-project-form .footer-field select, #footer-project-form .footer-field textarea { font-size: 16px; } #footer-project-form .contact-footer-send { font-size: 11px; } } /* FULL-WIDTH FOOTER SCALE */ footer.footer-creative { width: 100%; max-width: none; margin: 0; padding: 0 clamp(22px, 5vw, 96px); box-sizing: border-box; } footer.footer-creative .footer-top { width: 100%; min-height: 118px; padding: 26px 0; gap: clamp(24px, 3vw, 54px); } footer.footer-creative .brand-mark { width: 58px; height: 58px; font-size: 18px; } footer.footer-creative .brand-name { font-size: 16px; font-weight: 700; } footer.footer-creative .brand-name small { margin-top: 6px; font-size: 10px; letter-spacing: .16em; } footer.footer-creative .footer-signoff { font-size: 10px; font-weight: 600; letter-spacing: .14em; } footer.footer-creative .footer-links { gap: clamp(16px, 2vw, 34px); } footer.footer-creative .footer-links a { font-size: 11px; font-weight: 700; letter-spacing: .1em; } footer.footer-creative .footer-bottom { width: 100%; min-height: 64px; padding: 19px 0; font-size: 10px; font-weight: 600; letter-spacing: .12em; } .contact-footer-foot { width: 100%; min-height: 58px; padding: 18px clamp(22px, 5vw, 96px); box-sizing: border-box; font-size: 10px; font-weight: 600; letter-spacing: .14em; } @media (max-width: 760px) { footer.footer-creative { padding: 0 20px; } footer.footer-creative .footer-top { min-height: 0; padding: 24px 0; gap: 22px; } footer.footer-creative .brand-mark { width: 48px; height: 48px; } footer.footer-creative .brand-name { font-size: 14px; } footer.footer-creative .footer-signoff { font-size: 9px; } footer.footer-creative .footer-links { gap: 14px 20px; flex-wrap: wrap; } footer.footer-creative .footer-links a { font-size: 10px; } footer.footer-creative .footer-bottom { min-height: 0; padding: 16px 0; font-size: 9px; flex-wrap: wrap; gap: 10px 18px; } .contact-footer-foot { min-height: 0; padding: 16px 20px; font-size: 9px; line-height: 1.8; } } /* NAV HEADER SCALE AND ORIGINAL LOGO */ .nav { height: 104px !important; padding: 0 clamp(24px, 4.5vw, 86px); gap: clamp(20px, 2.6vw, 48px); } .nav.scrolled { height: 92px !important; } .nav .brand { gap: 14px; font-size: 15px; } .nav .brand-mark.brand-mark-image { width: 56px; height: 70px; flex: 0 0 56px; overflow: hidden; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 0; background: transparent; box-shadow: none; } .nav .brand-mark.brand-mark-image img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; } .nav .brand-name { font-size: 15px; font-weight: 800; line-height: 1.15; } .nav .brand-name small { margin-top: 6px; font-size: 9px; letter-spacing: .16em; } .nav .nav-links { gap: clamp(18px, 2.1vw, 34px); font-size: 11px; } .nav .nav-cta { padding: 16px 22px; font-size: 10px; } @media (max-width: 650px) { .nav { height: 80px !important; padding: 0 5%; gap: 9px; } .nav.scrolled { height: 74px !important; } .nav .brand { gap: 9px; font-size: 12px; } .nav .brand-mark.brand-mark-image { width: 44px; height: 56px; flex-basis: 44px; } .nav .brand-name { font-size: 12px; } .nav .brand-name small { margin-top: 4px; font-size: 7px; } .nav .nav-cta { padding: 12px 13px; font-size: 9px; } } /* NAV LOGO CROP */ .nav .brand-mark.brand-mark-image { position: relative; } .nav .brand-mark.brand-mark-image img { position: absolute; left: -69%; top: -30%; width: 250%; height: auto; max-width: none; object-fit: unset; } /* FULL LOGO AND UI BUDDY HEADER WORDMARK */ .nav .brand-mark.brand-mark-image { width: 98px; height: 80px; flex: 0 0 98px; overflow: visible; } .nav .brand-mark.brand-mark-image img { position: static; left: auto; top: auto; display: block; width: 100%; height: 100%; max-width: 100%; object-fit: contain; object-position: center; } @media (max-width: 650px) { .nav .brand-mark.brand-mark-image { width: 68px; height: 56px; flex-basis: 68px; } } /* HEADER LOGO +30 PERCENT */ .nav .brand-mark.brand-mark-image { width: 165.6px; height: 135.2px; flex-basis: 165.6px; } @media (max-width: 650px) { .nav .brand-mark.brand-mark-image { width: 114.9px; height: 94.6px; flex-basis: 114.9px; } } /* HEADER WORDMARK SIZE */ .nav .brand-name { font-size: 18px; line-height: 1.05; letter-spacing: -0.025em; font-weight: 800; } @media (max-width: 650px) { .nav .brand-name { font-size: 15px; } } /* FULL-WIDTH CONTACT FOOTER — GRID REDESIGN */ .contact-footer-redesign { width: 100%; max-width: none; margin: 0; padding: 0; overflow: hidden; background: radial-gradient(ellipse at 76% 18%, rgba(255, 31, 55, .08), transparent 36%), #090909; border-top: 1px solid rgba(255, 45, 64, .34); } .contact-footer-redesign .contact-footer-gridline { opacity: .32; background-image: linear-gradient(to right, transparent calc(33.333% - .5px), rgba(255,255,255,.12) 33.333%, transparent calc(33.333% + .5px), transparent calc(66.666% - .5px), rgba(255,255,255,.12) 66.666%, transparent calc(66.666% + .5px)); } .contact-footer-redesign .contact-footer-meta { position: relative; z-index: 1; width: 100%; min-height: 62px; padding: 0 clamp(24px, 4.8vw, 92px); box-sizing: border-box; border-bottom: 1px solid rgba(255,255,255,.12); display: flex; justify-content: space-between; align-items: center; color: #ff3348; font: 700 10px/1.4 var(--font-mono, monospace); letter-spacing: .16em; } .contact-footer-redesign .contact-footer-meta span { display: flex; align-items: center; gap: 10px; } .contact-footer-redesign .contact-footer-meta i, .contact-redesign-note i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #ff3348; box-shadow: 0 0 12px rgba(255,51,72,.72); } .contact-redesign-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(250px, .82fr) minmax(0, 2fr); min-height: 650px; border-bottom: 1px solid rgba(255,255,255,.13); } .contact-redesign-aside { padding: clamp(38px, 5vw, 88px) clamp(24px, 4.8vw, 92px); border-right: 1px solid rgba(255,255,255,.12); display: flex; flex-direction: column; align-items: flex-start; } .contact-redesign-kicker, .contact-redesign-label, .contact-redesign-note { font: 700 10px/1.6 var(--font-mono, monospace); letter-spacing: .13em; text-transform: uppercase; } .contact-redesign-kicker { margin: 0 0 26px; color: #eee9e8; } .contact-redesign-kicker b { color: #ff3348; font-size: 15px; letter-spacing: -.08em; margin-right: 8px; } .contact-redesign-intro { max-width: 340px; margin: 0; color: #aaa1a1; font-size: clamp(16px, 1.1vw, 20px); line-height: 1.65; } .contact-redesign-details { width: 100%; margin-top: auto; padding-top: 50px; } .contact-redesign-label { display: block; margin-bottom: 16px; color: #7d7474; } .contact-redesign-email { color: #f4f1f0; text-decoration: none; font-size: clamp(20px, 1.65vw, 30px); font-weight: 700; letter-spacing: -.04em; } .contact-redesign-email b { color: #ff3348; font-size: 14px; vertical-align: top; } .contact-redesign-socials { display: flex; flex-wrap: wrap; gap: 12px 22px; } .contact-redesign-socials a { color: #ddd6d5; font: 700 11px/1.5 var(--font-mono, monospace); letter-spacing: .1em; text-decoration: none; } .contact-redesign-socials a:hover, .contact-redesign-email:hover { color: #ff3348; } .contact-redesign-note { margin: 42px 0 0; color: #8a8080; font-size: 9px; } .contact-redesign-note i { width: 6px; height: 6px; margin-right: 8px; vertical-align: middle; } .contact-redesign-main { min-width: 0; padding: clamp(36px, 4.1vw, 76px) clamp(24px, 4.8vw, 92px) 48px; } .contact-redesign-title { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: clamp(34px, 4vw, 66px); } .contact-redesign-title h3 { margin: 0; color: #f8f6f5; font-family: var(--font-display, inherit); font-size: clamp(68px, 10vw, 174px); line-height: .78; letter-spacing: -.075em; font-weight: 900; } .contact-redesign-title h3 span { color: #ff3348; } .contact-redesign-title p { flex: 0 0 auto; margin: 0 0 4px; color: #aaa0a0; font: 700 10px/1.8 var(--font-mono, monospace); letter-spacing: .12em; text-align: right; text-transform: uppercase; } .contact-footer-redesign .contact-footer-form { width: 100%; max-width: none; margin: 0; padding: 0; background: transparent; border: 0; box-shadow: none; } .contact-footer-redesign .contact-footer-form-head { min-height: 44px; padding: 0 0 16px; border-bottom: 1px solid rgba(255,255,255,.15); color: #f1eeee; font-size: 11px; } .contact-footer-redesign .contact-footer-form-head b { color: #ff3348; } .contact-footer-redesign .contact-footer-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; } .contact-footer-redesign .footer-field { margin: 0; padding: 18px 0 0; } .contact-footer-redesign .footer-field label { color: #aaa0a0; font-size: 9px; letter-spacing: .13em; font-weight: 700; } .contact-footer-redesign .footer-field input, .contact-footer-redesign .footer-field select, .contact-footer-redesign .footer-field textarea { width: 100%; min-height: 56px; padding: 14px 16px; color: #f2eeee; background: rgba(255,255,255,.018); border: 1px solid rgba(255,255,255,.12); border-radius: 0; box-sizing: border-box; font: 500 14px/1.5 inherit; outline: none; } .contact-footer-redesign .footer-field input:focus, .contact-footer-redesign .footer-field select:focus, .contact-footer-redesign .footer-field textarea:focus { border-color: #ff3348; box-shadow: inset 3px 0 #ff3348; } .contact-footer-redesign .footer-field input::placeholder, .contact-footer-redesign .footer-field textarea::placeholder { color: #777070; opacity: 1; } .contact-footer-redesign .footer-field select { color-scheme: dark; } .contact-footer-redesign .footer-field textarea { min-height: 112px; resize: vertical; } .contact-footer-redesign .footer-field-wide { grid-column: 1 / -1; } .contact-footer-redesign .contact-footer-submit { display: flex; justify-content: space-between; align-items: center; gap: 22px; margin-top: 22px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.12); } .contact-footer-redesign .contact-footer-submit p { max-width: 260px; margin: 0; color: #928989; font: 10px/1.6 var(--font-mono, monospace); } .contact-footer-redesign .contact-footer-send { min-width: min(100%, 330px); min-height: 62px; padding: 0 20px; display: flex; justify-content: space-between; align-items: center; gap: 20px; color: #fff; background: #ff273f; border: 1px solid #ff273f; border-radius: 0; font: 800 11px/1 var(--font-mono, monospace); letter-spacing: .08em; cursor: pointer; transition: background .2s ease, color .2s ease, transform .2s ease; } .contact-footer-redesign .contact-footer-send:hover { color: #ff3348; background: transparent; transform: translateY(-2px); } .contact-footer-redesign .contact-footer-send b { font-size: 22px; font-weight: 400; } .contact-footer-redesign .contact-footer-word-stage { position: relative; z-index: 1; width: 100%; min-height: clamp(250px, 34vw, 540px); padding: clamp(40px, 6vw, 100px) clamp(24px, 4.8vw, 92px) 0; box-sizing: border-box; display: flex; align-items: flex-end; overflow: hidden; border-bottom: 1px solid rgba(255,255,255,.12); } .contact-footer-redesign .contact-footer-word { width: 100%; margin: 0; color: #f3f0ef; font-size: clamp(130px, 28vw, 520px); line-height: .68; letter-spacing: -.105em; white-space: nowrap; } .contact-footer-redesign .contact-footer-word em { color: #f3f0ef; } .contact-footer-redesign .contact-footer-word sup { color: #ff3348; } .contact-footer-redesign .contact-footer-sidecode, .contact-footer-redesign .contact-footer-coordinate, .contact-footer-redesign .contact-footer-hint { z-index: 3; color: #908686; font: 700 9px/1.7 var(--font-mono, monospace); letter-spacing: .12em; } .contact-footer-redesign .contact-footer-sidecode { top: 28px; left: clamp(24px, 4.8vw, 92px); } .contact-footer-redesign .contact-footer-hint { top: 28px; left: 50%; transform: translateX(-50%); } .contact-footer-redesign .contact-footer-hint i { color: #ff3348; } .contact-footer-redesign .contact-footer-coordinate { top: 28px; right: clamp(24px, 4.8vw, 92px); text-align: right; } .contact-footer-redesign .footer-mascot { z-index: 4; } .contact-footer-redesign .contact-footer-foot { min-height: 58px; display: flex; justify-content: space-between; align-items: center; gap: 20px; border-bottom: 1px solid rgba(255,255,255,.13); color: #887f7f; font: 700 9px/1.6 var(--font-mono, monospace); } .contact-footer-redesign + .footer.footer-creative { padding: 0 clamp(24px, 4.8vw, 92px); background: #080808; } .contact-footer-redesign + .footer.footer-creative .footer-top { min-height: 68px; padding: 14px 0; display: flex; justify-content: space-between; border-bottom: 1px solid rgba(255,255,255,.12); } .contact-footer-redesign + .footer.footer-creative .brand { display: none; } .contact-footer-redesign + .footer.footer-creative .footer-signoff { display: none; } .contact-footer-redesign + .footer.footer-creative .footer-links { margin-left: 0; } .contact-footer-redesign + .footer.footer-creative .footer-bottom { min-height: 48px; } @media (max-width: 900px) { .contact-redesign-grid { grid-template-columns: minmax(210px, .72fr) minmax(0, 1.7fr); } .contact-redesign-aside { padding-left: 26px; padding-right: 26px; } .contact-redesign-main { padding-left: 30px; padding-right: 30px; } .contact-redesign-title { align-items: flex-start; flex-direction: column; } .contact-redesign-title p { text-align: left; } .contact-redesign-title h3 { font-size: clamp(68px, 9vw, 110px); } } @media (max-width: 680px) { .contact-footer-redesign .contact-footer-meta { min-height: 54px; padding: 0 20px; font-size: 8px; letter-spacing: .08em; } .contact-redesign-grid { display: flex; flex-direction: column; } .contact-redesign-aside { min-height: 360px; padding: 34px 22px; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.12); } .contact-redesign-intro { max-width: 440px; font-size: 17px; } .contact-redesign-details { margin-top: 34px; padding-top: 0; } .contact-redesign-main { padding: 38px 22px 32px; } .contact-redesign-title { margin-bottom: 32px; } .contact-redesign-title h3 { font-size: clamp(62px, 16vw, 100px); } .contact-redesign-title p { font-size: 9px; } .contact-footer-redesign .contact-footer-fields { grid-template-columns: 1fr; } .contact-footer-redesign .footer-field-wide { grid-column: auto; } .contact-footer-redesign .contact-footer-submit { align-items: stretch; flex-direction: column; } .contact-footer-redesign .contact-footer-send { width: 100%; min-width: 0; } .contact-footer-redesign .contact-footer-word-stage { min-height: 220px; padding: 90px 20px 0; } .contact-footer-redesign .contact-footer-word { font-size: 26vw; } .contact-footer-redesign .contact-footer-sidecode { left: 20px; top: 24px; font-size: 7px; } .contact-footer-redesign .contact-footer-coordinate { right: 20px; top: 24px; font-size: 7px; } .contact-footer-redesign .contact-footer-hint { top: 62px; font-size: 7px; } .contact-footer-redesign .contact-footer-foot { padding: 16px 20px; flex-direction: column; align-items: flex-start; } .contact-footer-redesign + .footer.footer-creative { padding: 0 20px; } .contact-footer-redesign + .footer.footer-creative .footer-top { justify-content: flex-start; } .contact-footer-redesign + .footer.footer-creative .footer-links { gap: 14px 20px; flex-wrap: wrap; } } /* CONTACT FOOTER TITLE FIT */ .contact-redesign-title h3 { flex: 1 1 auto; min-width: 0; font-size: clamp(54px, 7vw, 128px); white-space: nowrap; } @media (max-width: 900px) { .contact-redesign-title h3 { font-size: clamp(54px, 7vw, 96px); } } @media (max-width: 680px) { .contact-redesign-title h3 { font-size: clamp(54px, 13vw, 84px); } } .contact-redesign-title h3 { font-size: clamp(52px, 6.6vw, 116px); letter-spacing: -.065em; word-spacing: .14em; } @media (max-width: 900px) { .contact-redesign-title h3 { font-size: clamp(52px, 6.6vw, 90px); } } @media (max-width: 680px) { .contact-redesign-title h3 { font-size: clamp(50px, 12.5vw, 78px); } } /* CONTACT FOOTER — MATCH REFERENCE THREE-COLUMN PLACEMENT */ .contact-footer-redesign { width: 100%; max-width: none; margin: 0; padding: 0; overflow: hidden; position: relative; background: linear-gradient(to right, transparent calc(33.3333% - .5px), rgba(255,255,255,.13) 33.3333%, transparent calc(33.3333% + .5px), transparent calc(66.6666% - .5px), rgba(255,255,255,.13) 66.6666%, transparent calc(66.6666% + .5px)), radial-gradient(ellipse at 57% 20%, rgba(255,33,55,.075), transparent 43%), #101010; border-top: 1px solid rgba(255,255,255,.12); } .contact-footer-redesign .contact-redesign-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); min-height: clamp(780px, 76vw, 1040px); border: 0; } .contact-footer-redesign .contact-redesign-aside { grid-column: 1; grid-row: 1; min-height: 100%; padding: clamp(100px, 14vh, 210px) clamp(22px, 3.2vw, 58px) 42px; border: 0; border-right: 1px solid rgba(255,255,255,.12); box-sizing: border-box; display: flex; flex-direction: column; justify-content: space-between; } .contact-redesign-aside-top { max-width: 420px; } .contact-footer-redesign .contact-redesign-kicker { margin: 0 0 34px; color: #eee9e8; font-size: 10px; } .contact-footer-redesign .contact-redesign-kicker b { color: #ff3348; } .contact-footer-redesign .contact-redesign-intro { max-width: 440px; margin: 0 0 clamp(68px, 8vw, 135px); color: #a9a2a2; font-size: clamp(15px, 1.08vw, 19px); line-height: 1.55; } .contact-footer-redesign .contact-redesign-details { margin: 0 0 38px; padding: 0; } .contact-footer-redesign .contact-redesign-label { margin: 0 0 18px; color: #777171; font-size: 10px; } .contact-footer-redesign .contact-redesign-email { display: inline-block; color: #f1eeee; font-size: clamp(18px, 1.6vw, 29px); line-height: 1.35; letter-spacing: -.045em; overflow-wrap: anywhere; } .contact-footer-redesign .contact-redesign-socials { gap: 14px 18px; } .contact-footer-redesign .contact-redesign-socials a { color: #e8e4e3; font-size: 11px; } .contact-footer-redesign .contact-redesign-nav { display: flex; flex-direction: column; align-items: flex-start; gap: 15px; margin-top: 56px; } .contact-footer-redesign .contact-redesign-nav .contact-redesign-label { margin-bottom: 8px; } .contact-footer-redesign .contact-redesign-nav a { color: #f1eeee; text-decoration: none; font-size: 12px; line-height: 1.4; font-weight: 800; text-transform: uppercase; transition: color .2s ease; } .contact-footer-redesign .contact-redesign-nav a:hover { color: #ff3348; } .contact-footer-redesign .contact-redesign-main { grid-column: 2 / 4; grid-row: 1; min-width: 0; padding: clamp(88px, 12vh, 190px) clamp(26px, 3vw, 56px) 52px; box-sizing: border-box; } .contact-footer-redesign .contact-redesign-title { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 24px; margin: 0 0 clamp(80px, 10vw, 155px); } .contact-footer-redesign .contact-redesign-title h3 { margin: 0; color: #f7f5f4; font-family: var(--font-display, inherit); font-size: clamp(64px, 7vw, 130px); font-weight: 800; line-height: .9; letter-spacing: -.075em; white-space: nowrap; } .contact-footer-redesign .contact-redesign-title p { justify-self: end; margin: 0; color: #f1eeee; font: 700 11px/1.5 var(--font-mono, monospace); letter-spacing: .05em; white-space: nowrap; } .contact-footer-redesign .contact-redesign-title p b { color: #ff3348; margin: 0 8px; letter-spacing: .08em; } .contact-footer-redesign .contact-footer-form { width: 100%; max-width: none; margin: 0; padding: 0; background: none; border: 0; box-shadow: none; } .contact-footer-redesign .contact-footer-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(16px, 2vw, 34px); } .contact-footer-redesign .footer-field { min-width: 0; margin: 0; padding: 0 0 24px; } .contact-footer-redesign .footer-field label { display: block; margin: 0 0 11px; color: #e6e1e0; font-size: 10px; font-weight: 700; } .contact-footer-redesign .footer-field input, .contact-footer-redesign .footer-field textarea { display: block; width: 100%; min-height: 64px; padding: 18px 20px; box-sizing: border-box; border: 1px solid rgba(255,255,255,.13); border-radius: 0; outline: 0; color: #f2eeee; background: rgba(255,255,255,.018); font: 500 15px/1.45 inherit; } .contact-footer-redesign .footer-field input:focus, .contact-footer-redesign .footer-field textarea:focus { border-color: #ff3348; box-shadow: inset 3px 0 #ff3348; } .contact-footer-redesign .footer-field input::placeholder, .contact-footer-redesign .footer-field textarea::placeholder { color: #746e6e; opacity: 1; } .contact-footer-redesign .contact-redesign-email-field { grid-column: 1; } .contact-footer-redesign .contact-redesign-hidden { display: none; } .contact-footer-redesign .footer-field-wide { grid-column: 1 / -1; } .contact-footer-redesign .footer-field textarea { min-height: clamp(100px, 7vw, 150px); resize: vertical; } .contact-footer-redesign .contact-footer-submit { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(16px, 2vw, 34px); margin: 0; padding: 0; border: 0; } .contact-footer-redesign .contact-footer-send { grid-column: 1; width: 100%; min-width: 0; min-height: 64px; padding: 0 22px; display: flex; align-items: center; justify-content: space-between; color: #fff; background: #ff273f; border: 1px solid #ff273f; border-radius: 0; font: 800 12px/1 var(--font-mono, monospace); letter-spacing: .04em; cursor: pointer; } .contact-footer-redesign .contact-footer-send:hover { color: #ff3348; background: transparent; } .contact-footer-redesign .contact-footer-send b { font-size: 24px; font-weight: 400; } .contact-footer-redesign .contact-footer-submit p { grid-column: 2; margin: 0; padding: 0 0 0 clamp(16px, 2vw, 34px); color: #8d8585; font: 700 10px/1.8 var(--font-mono, monospace); border-left: 1px solid rgba(255,255,255,.12); } .contact-redesign-word-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid rgba(255,255,255,.12); background-image: linear-gradient(to right, transparent calc(33.3333% - .5px), rgba(255,255,255,.13) 33.3333%, transparent calc(33.3333% + .5px), transparent calc(66.6666% - .5px), rgba(255,255,255,.13) 66.6666%, transparent calc(66.6666% + .5px)); } .contact-redesign-word-spacer { grid-column: 1; border-right: 1px solid rgba(255,255,255,.12); } .contact-footer-redesign .contact-footer-word-stage { grid-column: 2 / 4; width: 100%; min-height: clamp(260px, 28vw, 480px); margin: 0; padding: 120px clamp(18px, 2.5vw, 46px) 0; box-sizing: border-box; display: flex; align-items: flex-end; overflow: hidden; border: 0; } .contact-footer-redesign .contact-footer-word { width: 100%; margin: 0; color: #f5f2f1; font-size: clamp(140px, 14vw, 238px); line-height: .7; letter-spacing: -.105em; white-space: nowrap; } .contact-footer-redesign .contact-footer-word em { color: #f5f2f1; } .contact-footer-redesign .contact-footer-word sup { color: #ff3348; } .contact-footer-redesign .contact-footer-sidecode, .contact-footer-redesign .contact-footer-coordinate, .contact-footer-redesign .contact-footer-hint { z-index: 3; top: 26px; color: #817878; font: 700 9px/1.7 var(--font-mono, monospace); letter-spacing: .1em; } .contact-footer-redesign .contact-footer-sidecode { left: clamp(18px, 2.5vw, 46px); } .contact-footer-redesign .contact-footer-hint { left: 50%; transform: translateX(-50%); } .contact-footer-redesign .contact-footer-hint i { color: #ff3348; } .contact-footer-redesign .contact-footer-coordinate { right: clamp(18px, 2.5vw, 46px); text-align: right; } .contact-footer-redesign .footer-mascot { z-index: 4; } .contact-footer-redesign .contact-footer-foot { min-height: 58px; padding: 0 clamp(22px, 3vw, 56px); display: flex; justify-content: space-between; align-items: center; gap: 20px; border-bottom: 1px solid rgba(255,255,255,.12); color: #877f7f; font: 700 9px/1.6 var(--font-mono, monospace); } .contact-footer-redesign + .footer.footer-creative { padding: 0 clamp(22px, 3vw, 56px); background: #080808; } .contact-footer-redesign + .footer.footer-creative .footer-top { min-height: 54px; padding: 10px 0; display: flex; justify-content: flex-end; border-bottom: 1px solid rgba(255,255,255,.12); } .contact-footer-redesign + .footer.footer-creative .brand, .contact-footer-redesign + .footer.footer-creative .footer-signoff { display: none; } .contact-footer-redesign + .footer.footer-creative .footer-links { margin-left: 0; } .contact-footer-redesign + .footer.footer-creative .footer-bottom { min-height: 42px; padding: 12px 0; } @media (max-width: 760px) { .contact-footer-redesign .contact-redesign-grid { display: flex; flex-direction: column; } .contact-footer-redesign .contact-redesign-aside { min-height: 0; padding: 62px 22px 34px; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.12); } .contact-footer-redesign .contact-redesign-intro { margin-bottom: 42px; font-size: 16px; } .contact-footer-redesign .contact-redesign-details { margin-bottom: 30px; } .contact-footer-redesign .contact-redesign-nav { margin-top: 28px; } .contact-footer-redesign .contact-redesign-main { padding: 66px 22px 42px; } .contact-footer-redesign .contact-redesign-title { grid-template-columns: 1fr; gap: 18px; margin-bottom: 58px; } .contact-footer-redesign .contact-redesign-title h3 { font-size: clamp(58px, 13vw, 94px); } .contact-footer-redesign .contact-redesign-title p { justify-self: start; font-size: 9px; } .contact-footer-redesign .contact-footer-fields { grid-template-columns: 1fr; gap: 0; } .contact-footer-redesign .contact-redesign-email-field, .contact-footer-redesign .footer-field-wide { grid-column: 1; } .contact-footer-redesign .contact-footer-submit { grid-template-columns: 1fr; } .contact-footer-redesign .contact-footer-send, .contact-footer-redesign .contact-footer-submit p { grid-column: 1; } .contact-footer-redesign .contact-footer-submit p { padding: 14px 0 0; border: 0; } .contact-redesign-word-row { grid-template-columns: 1fr; } .contact-redesign-word-spacer { display: none; } .contact-footer-redesign .contact-footer-word-stage { grid-column: 1; min-height: 235px; padding: 100px 16px 0; } .contact-footer-redesign .contact-footer-word { font-size: clamp(95px, 20vw, 160px); } .contact-footer-redesign .contact-footer-sidecode { left: 16px; top: 22px; font-size: 7px; } .contact-footer-redesign .contact-footer-coordinate { right: 16px; top: 22px; font-size: 7px; } .contact-footer-redesign .contact-footer-hint { top: 54px; font-size: 7px; } .contact-footer-redesign .contact-footer-foot { padding: 15px 20px; align-items: flex-start; flex-direction: column; gap: 6px; } .contact-footer-redesign + .footer.footer-creative { padding: 0 20px; } .contact-footer-redesign + .footer.footer-creative .footer-top { justify-content: flex-start; } .contact-footer-redesign + .footer.footer-creative .footer-links { gap: 12px 16px; flex-wrap: wrap; } } /* LOOPING RED GLOW BEHIND THE FOOTER WORDMARK */ @keyframes uiBuddyFooterGlowDrift { 0% { transform: translate3d(-10%, 8%, 0) scale(.88); } 45% { transform: translate3d(4%, -4%, 0) scale(1.04); } 100% { transform: translate3d(14%, 3%, 0) scale(.94); } } @keyframes uiBuddyFooterLightSweep { from { background-position: 180% 0; } to { background-position: -80% 0; } } .contact-footer-redesign .contact-footer-word-stage { isolation: isolate; background: #0a0909; } .contact-footer-redesign .contact-footer-word-stage::before { content: ""; position: absolute; z-index: 0; left: -18%; right: -18%; bottom: -42%; height: 112%; pointer-events: none; background: radial-gradient(ellipse at 20% 58%, rgba(255, 28, 49, .53), transparent 31%), radial-gradient(ellipse at 53% 54%, rgba(255, 43, 38, .30), transparent 28%), radial-gradient(ellipse at 82% 58%, rgba(255, 12, 75, .48), transparent 30%); filter: blur(42px); opacity: .82; transform: translateZ(0); animation: uiBuddyFooterGlowDrift 9s ease-in-out infinite alternate; } .contact-footer-redesign .contact-footer-word-stage::after { content: ""; position: absolute; z-index: 1; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 23%, rgba(255, 35, 54, .20) 45%, rgba(255, 84, 50, .12) 52%, transparent 73%); background-size: 220% 100%; mix-blend-mode: screen; opacity: .56; animation: uiBuddyFooterLightSweep 8s linear infinite; } .contact-footer-redesign .contact-footer-word { position: relative; z-index: 2; color: rgba(245, 242, 241, .12); text-shadow: 0 0 26px rgba(255, 38, 58, .08); } .contact-footer-redesign .contact-footer-word em { color: rgba(255, 45, 64, .16); } .contact-footer-redesign .contact-footer-word sup { color: rgba(255, 45, 64, .22); } .contact-footer-redesign .contact-footer-sidecode, .contact-footer-redesign .contact-footer-coordinate, .contact-footer-redesign .contact-footer-hint { z-index: 3; } @media (prefers-reduced-motion: reduce) { .contact-footer-redesign .contact-footer-word-stage::before, .contact-footer-redesign .contact-footer-word-stage::after { animation: none; } } .contact-footer-redesign .contact-footer-word .footer-glyph, .contact-footer-redesign .contact-footer-word em .footer-glyph { color: rgba(242, 238, 237, .12) !important; -webkit-text-fill-color: rgba(242, 238, 237, .12) !important; background: none !important; text-shadow: none !important; } .contact-footer-redesign .contact-footer-word sup { color: rgba(255, 45, 64, .22) !important; -webkit-text-fill-color: rgba(255, 45, 64, .22) !important; } /* RED-RECOLORED TRAVELING FOOTER SPOTLIGHT */ @keyframes uiBuddyFooterSpotlightPass { 0% { transform: translate3d(0, 24%, 0) scale(.82); opacity: 0; } 12% { opacity: .74; } 78% { opacity: .74; } 100% { transform: translate3d(265%, 18%, 0) scale(1.08); opacity: 0; } } .contact-footer-redesign .contact-footer-word-stage { background: #050505; } .contact-footer-redesign .contact-footer-word-stage::before { left: -14%; right: -14%; bottom: -42%; height: 112%; background: radial-gradient(ellipse at 24% 100%, rgba(255, 27, 49, .24), transparent 52%), radial-gradient(ellipse at 76% 100%, rgba(255, 28, 62, .16), transparent 48%); filter: blur(72px); opacity: .7; animation: none; } .contact-footer-redesign .contact-footer-word-stage::after { inset: -8% auto -14% -42%; width: 58%; background: radial-gradient(ellipse at 50% 72%, rgba(255, 25, 58, .78) 0%, rgba(255, 25, 58, .48) 22%, rgba(255, 36, 48, .18) 45%, transparent 72%); background-size: auto; filter: blur(34px); mix-blend-mode: screen; opacity: 0; animation: uiBuddyFooterSpotlightPass 8.5s cubic-bezier(.42, 0, .58, 1) infinite; } .contact-footer-redesign .contact-footer-word .footer-glyph, .contact-footer-redesign .contact-footer-word em .footer-glyph { color: rgba(242, 238, 237, .12) !important; -webkit-text-fill-color: rgba(242, 238, 237, .12) !important; background: none !important; text-shadow: none !important; } .contact-footer-redesign .contact-footer-word sup { color: rgba(255, 45, 64, .22) !important; -webkit-text-fill-color: rgba(255, 45, 64, .22) !important; } @media (prefers-reduced-motion: reduce) { .contact-footer-redesign .contact-footer-word-stage::after { animation: none; } } /* Reference-style red spotlight pass behind the footer wordmark */ @keyframes uiBuddyFooterLightPass { 0% { transform: translate3d(-34%, 4%, 0) scale(.86); opacity: .58; } 50% { transform: translate3d(72%, -2%, 0) scale(1.08); opacity: .82; } 100% { transform: translate3d(178%, 3%, 0) scale(.9); opacity: .58; } } .contact-footer-redesign .contact-footer-word-stage { position: relative; overflow: hidden; isolation: isolate; background: #050505; } .contact-footer-redesign .contact-footer-word-stage::before { content: ""; position: absolute; z-index: 0; left: -8%; right: -8%; bottom: -42%; height: 112%; pointer-events: none; background: radial-gradient(ellipse at 26% 100%, rgba(255,27,49,.13), transparent 54%), radial-gradient(ellipse at 72% 100%, rgba(255,27,49,.09), transparent 52%); filter: blur(76px); opacity: .9; animation: none !important; } .contact-footer-redesign .contact-footer-word-stage::after { content: ""; position: absolute; z-index: 1; top: -18%; bottom: -26%; left: -46%; width: 62%; height: auto; pointer-events: none; background: radial-gradient(ellipse at 50% 72%, rgba(255,27,49,.82) 0%, rgba(255,27,49,.54) 23%, rgba(255,37,54,.26) 44%, rgba(255,37,54,.08) 61%, transparent 74%); filter: blur(42px); mix-blend-mode: screen; opacity: .62; animation: uiBuddyFooterLightPass 11s ease-in-out infinite alternate !important; } .contact-footer-redesign .contact-footer-word-stage > * { position: relative; z-index: 2; } .contact-footer-redesign .contact-footer-word-stage .contact-footer-wordmark, .contact-footer-redesign .contact-footer-word-stage .footer-wordmark { color: #29292b !important; } @media (prefers-reduced-motion: reduce) { .contact-footer-redesign .contact-footer-word-stage::after { animation: none !important; transform: translateX(75%); opacity: .58; } } /* Footer layout refinement: remove duplicate navigation/dividers and center full-bleed wordmark */ .contact-footer-redesign .contact-redesign-nav { display: none !important; } .contact-footer-redesign .contact-redesign-grid { border: 0 !important; } .contact-footer-redesign .contact-redesign-aside { border-right: 0 !important; } .contact-footer-redesign .contact-redesign-main { border-left: 0 !important; } .contact-footer-redesign .contact-redesign-word-row { display: block !important; border-top: 0 !important; } .contact-footer-redesign .contact-redesign-word-spacer { display: none !important; } .contact-footer-redesign .contact-footer-word-stage { width: 100vw !important; max-width: none !important; margin-left: calc(50% - 50vw) !important; min-height: clamp(300px, 36vw, 560px) !important; padding-left: 0 !important; padding-right: 0 !important; border: 0 !important; display: flex; align-items: center; justify-content: center; } .contact-footer-redesign .contact-footer-word { width: 100%; text-align: center !important; justify-content: center !important; font-size: clamp(150px, 29vw, 620px) !important; line-height: .78 !important; white-space: nowrap; letter-spacing: -.075em !important; } .contact-footer-redesign .contact-footer-sidecode { left: clamp(20px, 4vw, 72px) !important; } .contact-footer-redesign .contact-footer-coordinate { right: clamp(20px, 4vw, 72px) !important; } @media (max-width: 700px) { .contact-footer-redesign .contact-footer-word-stage { min-height: 220px !important; } .contact-footer-redesign .contact-footer-word { font-size: 27vw !important; } } /* Give each footer wordmark letter more breathing room */ .contact-footer-redesign .contact-footer-word { gap: .035em !important; letter-spacing: -.045em !important; } .contact-footer-redesign .contact-footer-word em { gap: .035em !important; letter-spacing: -.045em !important; } .contact-footer-redesign .contact-footer-word .footer-glyph { margin-inline: .012em; } .contact-footer-redesign .contact-footer-word .footer-word-space { width: .16em !important; flex: 0 0 .16em !important; } /* Broad, layered footer light waves inspired by the reference */ @keyframes uiBuddyFooterWaveDrift { 0% { transform: translate3d(-2%, 1%, 0) scaleX(.98); } 50% { transform: translate3d(1%, -2%, 0) scaleX(1.025); } 100% { transform: translate3d(2%, 0, 0) scaleX(1); } } .contact-footer-redesign .contact-footer-word-stage::after { top: auto !important; bottom: -62% !important; left: -10% !important; right: auto !important; width: 120% !important; height: 150% !important; background: radial-gradient(ellipse 24% 60% at 8% 100%, rgba(255, 25, 48, .72) 0%, rgba(255, 25, 48, .34) 42%, transparent 76%), radial-gradient(ellipse 28% 72% at 31% 100%, rgba(255, 31, 56, .58) 0%, rgba(255, 31, 56, .28) 44%, transparent 77%), radial-gradient(ellipse 24% 62% at 54% 100%, rgba(255, 20, 45, .66) 0%, rgba(255, 20, 45, .3) 43%, transparent 76%), radial-gradient(ellipse 30% 72% at 78% 100%, rgba(255, 31, 56, .56) 0%, rgba(255, 31, 56, .25) 44%, transparent 77%), radial-gradient(ellipse 24% 60% at 100% 100%, rgba(255, 25, 48, .7) 0%, rgba(255, 25, 48, .31) 43%, transparent 76%) !important; filter: blur(38px) !important; opacity: .88 !important; mix-blend-mode: screen !important; animation: uiBuddyFooterWaveDrift 9s ease-in-out infinite alternate !important; } @media (prefers-reduced-motion: reduce) { .contact-footer-redesign .contact-footer-word-stage::after { animation: none !important; } } /* Make the reference's broad bottom-up wave visible across the whole word stage */ .contact-footer-redesign .contact-footer-word-stage::after { inset: 0 !important; width: 100% !important; height: 100% !important; background: radial-gradient(ellipse 20% 84% at 7% 118%, rgba(255, 27, 50, .88), rgba(255, 27, 50, .42) 44%, transparent 78%), radial-gradient(ellipse 26% 100% at 29% 120%, rgba(255, 34, 58, .74), rgba(255, 34, 58, .35) 43%, transparent 78%), radial-gradient(ellipse 23% 88% at 52% 120%, rgba(255, 20, 46, .84), rgba(255, 20, 46, .4) 44%, transparent 78%), radial-gradient(ellipse 27% 100% at 76% 120%, rgba(255, 34, 58, .72), rgba(255, 34, 58, .34) 43%, transparent 78%), radial-gradient(ellipse 20% 84% at 99% 118%, rgba(255, 27, 50, .86), rgba(255, 27, 50, .4) 44%, transparent 78%) !important; filter: blur(28px) !important; opacity: .92 !important; mix-blend-mode: screen !important; animation: uiBuddyFooterWaveDrift 10s ease-in-out infinite alternate !important; } /* Stronger continuous wave travel; keep motion independent of cursor hover */ @keyframes uiBuddyFooterWaveTravel { 0% { transform: translate3d(-12%, 2%, 0) scaleX(1.02); } 50% { transform: translate3d(0, -2%, 0) scaleX(1.08); } 100% { transform: translate3d(12%, 1%, 0) scaleX(1.02); } } .contact-footer-redesign .contact-footer-word-stage::after { inset: 0 auto 0 -20% !important; width: 140% !important; height: 100% !important; animation: uiBuddyFooterWaveTravel 12s ease-in-out infinite alternate !important; } .contact-footer-redesign .contact-footer-word, .contact-footer-redesign .contact-footer-word .footer-glyph, .contact-footer-redesign .contact-footer-word em { transition: none !important; } .contact-footer-redesign .contact-footer-word { gap: 0 !important; letter-spacing: -.075em !important; } .contact-footer-redesign .contact-footer-word em { gap: 0 !important; letter-spacing: -.075em !important; } .contact-footer-redesign .contact-footer-word .footer-glyph { margin-inline: 0 !important; } @media (prefers-reduced-motion: reduce) { .contact-footer-redesign .contact-footer-word-stage::after { animation: uiBuddyFooterWaveTravel 12s ease-in-out infinite alternate !important; } } /* Increase wave travel so the footer animation reads clearly at a glance */ @keyframes uiBuddyFooterWaveTravel { 0% { transform: translate3d(-22%, 3%, 0) scaleX(.96); } 50% { transform: translate3d(0, -3%, 0) scaleX(1.08); } 100% { transform: translate3d(22%, 2%, 0) scaleX(.96); } } .contact-footer-redesign .contact-footer-word-stage::after { animation: uiBuddyFooterWaveTravel 7s ease-in-out infinite alternate !important; } @media (prefers-reduced-motion: reduce) { .contact-footer-redesign .contact-footer-word-stage::after { animation: uiBuddyFooterWaveTravel 7s ease-in-out infinite alternate !important; } } /* Correct wordmark kerning and match the reference's separated rising light waves */ @keyframes uiBuddyFooterReferenceWave { 0% { transform: translate3d(-18%, 3%, 0) scaleX(.96); } 50% { transform: translate3d(0, -4%, 0) scaleX(1.04); } 100% { transform: translate3d(18%, 2%, 0) scaleX(.96); } } .contact-footer-redesign .contact-footer-word { gap: .025em !important; letter-spacing: 0 !important; } .contact-footer-redesign .contact-footer-word em { gap: .025em !important; letter-spacing: 0 !important; } .contact-footer-redesign .contact-footer-word .footer-glyph { margin-inline: 0 !important; } .contact-footer-redesign .contact-footer-word .footer-word-space { width: .22em !important; flex: 0 0 .22em !important; } .contact-footer-redesign .contact-footer-word-stage::after { inset: 0 auto 0 -18% !important; width: 136% !important; height: 100% !important; background: radial-gradient(ellipse 17% 92% at 12% 122%, rgba(255, 31, 56, .88) 0%, rgba(255, 31, 56, .5) 40%, transparent 76%), radial-gradient(ellipse 19% 104% at 35% 124%, rgba(255, 37, 62, .76) 0%, rgba(255, 37, 62, .38) 42%, transparent 78%), radial-gradient(ellipse 17% 94% at 58% 122%, rgba(255, 27, 53, .86) 0%, rgba(255, 27, 53, .46) 40%, transparent 76%), radial-gradient(ellipse 20% 108% at 82% 124%, rgba(255, 37, 62, .76) 0%, rgba(255, 37, 62, .38) 42%, transparent 78%), radial-gradient(ellipse 16% 90% at 103% 122%, rgba(255, 27, 53, .84) 0%, rgba(255, 27, 53, .43) 40%, transparent 76%) !important; filter: blur(32px) !important; opacity: .94 !important; mix-blend-mode: screen !important; animation: uiBuddyFooterReferenceWave 6s ease-in-out infinite alternate !important; } @media (max-width: 700px) { .contact-footer-redesign .contact-footer-word { gap: .015em !important; font-size: 25vw !important; } .contact-footer-redesign .contact-footer-word em { gap: .015em !important; } } @media (prefers-reduced-motion: reduce) { .contact-footer-redesign .contact-footer-word-stage::after { animation: uiBuddyFooterReferenceWave 6s ease-in-out infinite alternate !important; } } /* Tighter wordmark tracking plus a continuous, more visible wave pass */ @keyframes uiBuddyFooterWavePass { from { transform: translate3d(-24%, 2%, 0) scaleX(.96); } to { transform: translate3d(24%, -2%, 0) scaleX(1.04); } } .contact-footer-redesign .contact-footer-word { gap: 0 !important; letter-spacing: -.02em !important; } .contact-footer-redesign .contact-footer-word em { gap: 0 !important; letter-spacing: -.02em !important; } .contact-footer-redesign .contact-footer-word .footer-glyph { margin-inline: 0 !important; } .contact-footer-redesign .contact-footer-word .footer-word-space { width: .14em !important; flex: 0 0 .14em !important; } .contact-footer-redesign .contact-footer-word-stage::after { inset: 0 auto 0 -24% !important; width: 148% !important; height: 100% !important; background: radial-gradient(ellipse 13% 92% at 10% 124%, rgba(255, 30, 54, .94) 0%, rgba(255, 30, 54, .48) 43%, transparent 76%), radial-gradient(ellipse 15% 100% at 34% 126%, rgba(255, 39, 64, .78) 0%, rgba(255, 39, 64, .38) 42%, transparent 76%), radial-gradient(ellipse 13% 92% at 58% 124%, rgba(255, 25, 50, .92) 0%, rgba(255, 25, 50, .46) 42%, transparent 76%), radial-gradient(ellipse 15% 102% at 82% 126%, rgba(255, 39, 64, .8) 0%, rgba(255, 39, 64, .38) 42%, transparent 76%), radial-gradient(ellipse 13% 92% at 106% 124%, rgba(255, 25, 50, .9) 0%, rgba(255, 25, 50, .44) 42%, transparent 76%) !important; filter: blur(30px) !important; opacity: .96 !important; mix-blend-mode: screen !important; animation: uiBuddyFooterWavePass 4.5s linear infinite alternate !important; } @media (max-width: 700px) { .contact-footer-redesign .contact-footer-word { letter-spacing: -.015em !important; } .contact-footer-redesign .contact-footer-word em { letter-spacing: -.015em !important; } .contact-footer-redesign .contact-footer-word .footer-word-space { width: .12em !important; flex-basis: .12em !important; } } @media (prefers-reduced-motion: reduce) { .contact-footer-redesign .contact-footer-word-stage::after { animation: uiBuddyFooterWavePass 4.5s linear infinite alternate !important; } } /* Center the full wordmark and restore the earlier traveling red beam */ @keyframes uiBuddyFooterBeamPass { 0% { transform: translate3d(-5%, 5%, 0) scale(.82); opacity: 0; } 12% { opacity: .82; } 78% { opacity: .82; } 100% { transform: translate3d(265%, 0, 0) scale(1.08); opacity: 0; } } .contact-footer-redesign .contact-footer-word { position: absolute !important; left: 50% !important; top: 50% !important; width: max-content !important; max-width: 100% !important; transform: translate(-50%, -50%) !important; text-align: center !important; justify-content: center !important; } .contact-footer-redesign .contact-footer-word-stage::after { inset: -10% auto -18% -42% !important; width: 58% !important; height: auto !important; background: radial-gradient(ellipse at 50% 72%, rgba(255, 27, 49, .82) 0%, rgba(255, 27, 49, .5) 22%, rgba(255, 36, 54, .2) 46%, transparent 73%) !important; filter: blur(38px) !important; opacity: 0 !important; mix-blend-mode: screen !important; animation: uiBuddyFooterBeamPass 8.5s cubic-bezier(.42, 0, .58, 1) infinite !important; } @media (max-width: 700px) { .contact-footer-redesign .contact-footer-word { width: 100% !important; } } @media (prefers-reduced-motion: reduce) { .contact-footer-redesign .contact-footer-word-stage::after { animation: uiBuddyFooterBeamPass 8.5s cubic-bezier(.42, 0, .58, 1) infinite !important; } } /* Keep footer metadata at the outer edges and ensure the moving beam stays visible */ .contact-footer-redesign .contact-footer-sidecode, .contact-footer-redesign .contact-footer-coordinate, .contact-footer-redesign .contact-footer-hint, .contact-footer-redesign .footer-mascot { position: absolute !important; } .contact-footer-redesign .contact-footer-sidecode { left: clamp(20px, 4vw, 72px) !important; top: auto !important; bottom: 24px !important; } .contact-footer-redesign .contact-footer-coordinate { right: clamp(20px, 4vw, 72px) !important; top: auto !important; bottom: 24px !important; } .contact-footer-redesign .contact-footer-hint { left: 50% !important; top: 24px !important; bottom: auto !important; transform: translateX(-50%) !important; } .contact-footer-redesign .footer-mascot { z-index: 4 !important; } @keyframes uiBuddyFooterBeamPassVisible { 0% { transform: translate3d(0, 0, 0) scale(.84); opacity: .72; } 78% { opacity: .82; } 100% { transform: translate3d(250%, 0, 0) scale(1.06); opacity: 0; } } .contact-footer-redesign .contact-footer-word-stage::after { inset: -10% auto -18% -42% !important; width: 58% !important; height: auto !important; background: radial-gradient(ellipse at 50% 72%, rgba(255, 27, 49, .82) 0%, rgba(255, 27, 49, .5) 22%, rgba(255, 36, 54, .2) 46%, transparent 73%) !important; filter: blur(38px) !important; opacity: .72 !important; animation: uiBuddyFooterBeamPassVisible 8.5s cubic-bezier(.42, 0, .58, 1) infinite !important; } /* Beam travels to the far end, then retraces the same path back */ @keyframes uiBuddyFooterBeamRoundTrip { 0% { transform: translate3d(0, 0, 0) scale(.84); opacity: 0; } 10% { opacity: .82; } 90% { opacity: .82; } 100% { transform: translate3d(250%, 0, 0) scale(1.06); opacity: 0; } } .contact-footer-redesign .contact-footer-word-stage::after { animation: uiBuddyFooterBeamRoundTrip 8.5s cubic-bezier(.42, 0, .58, 1) infinite alternate !important; } @media (prefers-reduced-motion: reduce) { .contact-footer-redesign .contact-footer-word-stage::after { animation: uiBuddyFooterBeamRoundTrip 8.5s cubic-bezier(.42, 0, .58, 1) infinite alternate !important; } } /* Character mascot removed from the footer */ .contact-footer-redesign .footer-mascot { display: none !important; } /* Footer contact form uses the site's DM Mono typeface. */ .contact-footer-redesign input, .contact-footer-redesign textarea, .contact-footer-redesign select, .contact-footer-redesign input::placeholder, .contact-footer-redesign textarea::placeholder { font-family: var(--mono, 'DM Mono', monospace) !important; } /* Match the footer callout to the bold condensed section heading style. */ .contact-footer-redesign .contact-title, .contact-footer-redesign .contact-heading, .contact-footer-redesign h1, .contact-footer-redesign h2 { font-family: var(--display, 'Barlow Condensed', sans-serif) !important; font-weight: 800 !important; } /* Apply the bold condensed title style to the footer's LET'S TALK heading. */ .contact-footer-redesign h3 { font-family: var(--display, 'Barlow Condensed', sans-serif) !important; font-weight: 800 !important; } /* Scroll-driven testimonial cards in the site's dark red visual system */ .testimonials-section{position:relative;height:280vh;min-height:1900px;overflow:clip;color:var(--white);background:radial-gradient(ellipse at 50% 56%,rgba(109,15,28,.2),transparent 52%),#090707;border-top:1px solid rgba(255,41,61,.2)} .testimonials-sticky{position:sticky;top:0;height:100vh;min-height:680px;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:clamp(60px,8vh,110px) 0 38px} .testimonials-heading{text-align:center;z-index:2;position:relative} .testimonials-kicker{color:var(--red);font:500 11px/1 var(--mono);letter-spacing:.16em;display:flex;align-items:center;justify-content:center;gap:10px} .testimonials-kicker span{width:6px;height:6px;border-radius:50%;background:var(--red);box-shadow:0 0 14px rgba(255,41,61,.75)} .testimonials-heading h2{margin:18px 0 8px;font:800 clamp(48px,6.2vw,86px)/.82 var(--display);letter-spacing:-.035em;text-transform:uppercase} .testimonials-heading h2 em{color:var(--red);font-style:normal} .testimonials-heading p{margin:16px 20px 0;color:var(--muted);font:400 clamp(13px,1.1vw,16px)/1.6 var(--body)} .testimonial-stage{width:100%;height:clamp(350px,51vh,510px);position:relative;margin-top:clamp(26px,5vh,56px);perspective:1500px;perspective-origin:50% 48%;transform-style:preserve-3d} .testimonial-card{position:absolute;left:50%;top:50%;width:min(42vw,560px);height:100%;padding:clamp(24px,3.1vw,46px);display:flex;flex-direction:column;justify-content:space-between;border:1px solid rgba(255,255,255,.1);border-radius:22px;background:radial-gradient(ellipse at 50% 0%,rgba(255,41,61,.1),transparent 56%),linear-gradient(145deg,#21191b,#120e0f 74%);box-shadow:0 26px 80px rgba(0,0,0,.42),inset 0 1px rgba(255,255,255,.035);transform-style:preserve-3d;will-change:transform,opacity;transition:transform .62s cubic-bezier(.2,.7,.2,1),opacity .5s ease,filter .5s ease;backface-visibility:hidden} .testimonial-card:before{content:"";position:absolute;inset:0 auto 0 0;width:2px;border-radius:22px 0 0 22px;background:linear-gradient(180deg,transparent,var(--red),transparent);opacity:.9} .testimonial-card-top,.testimonial-person{display:flex;align-items:center} .testimonial-card-top{justify-content:space-between;gap:12px;color:#cdbec0;font:500 10px/1.3 var(--mono);letter-spacing:.1em} .testimonial-card-top b{color:var(--red);font-weight:500} .testimonial-quote-mark{color:var(--red);font:800 90px/.75 var(--display);opacity:.9} .testimonial-card blockquote{margin:0;max-width:15ch;color:var(--white);font:400 clamp(16px,1.55vw,21px)/1.4 var(--body);letter-spacing:-.025em} .testimonial-person{gap:14px} .testimonial-avatar{width:44px;height:44px;display:grid;place-items:center;border-radius:50%;color:var(--red);border:1px solid rgba(255,41,61,.5);background:rgba(255,41,61,.08);font:500 12px var(--mono)} .testimonial-person strong,.testimonial-person small{display:block} .testimonial-person strong{font:600 14px var(--body);color:var(--white)} .testimonial-person small{margin-top:4px;color:var(--muted);font:11px var(--mono)} .testimonial-card-foot{padding-top:13px;border-top:1px solid rgba(255,255,255,.1);color:#907f82;font:9px var(--mono);letter-spacing:.09em} .testimonials-progress{width:min(560px,70vw);margin-top:30px;display:flex;align-items:center;gap:14px;color:var(--muted);font:9px var(--mono);letter-spacing:.1em} .testimonials-progress div{flex:1;height:1px;background:rgba(255,255,255,.14);position:relative;overflow:hidden} .testimonials-progress i{display:block;width:20%;height:100%;background:var(--red);transition:width .2s linear} .testimonials-count{color:var(--red);white-space:nowrap} @media(max-width:760px){.testimonials-section{height:250vh;min-height:0}.testimonials-sticky{min-height:620px;padding:70px 0 26px}.testimonials-heading h2{font-size:clamp(44px,11vw,68px)}.testimonials-heading p{max-width:30ch;margin-inline:auto}.testimonial-stage{height:390px;margin-top:28px}.testimonial-card{width:78vw;padding:23px;border-radius:18px}.testimonial-card blockquote{font-size:clamp(15px,4vw,18px)}.testimonials-progress{width:78vw;margin-top:20px}} @media(prefers-reduced-motion:reduce){.testimonial-card,.testimonials-progress i{transition:none}} .testimonials-section.is-rolling .testimonial-card{transition:none!important} /* Selected work panels styled after the angular process cards reference */ .work-grid-four { position: relative !important; } .work-grid-four::before, .work-grid-four::after { content: "" !important; display: block !important; position: absolute !important; pointer-events: none !important; } .work-grid-four::before { left: 0 !important; right: 0 !important; top: -25px !important; height: 1px !important; background: linear-gradient(90deg, transparent, rgba(255,41,61,.72) 5%, rgba(255,41,61,.72) 95%, transparent) !important; } .work-grid-four::after { left: 0 !important; right: 0 !important; top: -29px !important; height: 9px !important; background: radial-gradient(circle at 12.4% 50%, #ff293d 0 4px, rgba(255,41,61,.3) 4.5px, transparent 10px), radial-gradient(circle at 37.5% 50%, #ff293d 0 4px, rgba(255,41,61,.3) 4.5px, transparent 10px), radial-gradient(circle at 62.5% 50%, #ff293d 0 4px, rgba(255,41,61,.3) 4.5px, transparent 10px), radial-gradient(circle at 87.6% 50%, #ff293d 0 4px, rgba(255,41,61,.3) 4.5px, transparent 10px) !important; } .work-grid-four .work-card { clip-path: polygon( 14px 0, calc(100% - 14px) 0, 100% 14px, 100% 43%, calc(100% - 9px) 46%, calc(100% - 9px) 54%, 100% 57%, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px), 0 57%, 9px 54%, 9px 46%, 0 43%, 0 14px ) !important; border: 1px solid rgba(255,41,61,.3) !important; background: #0d090a !important; transition: transform .45s cubic-bezier(.2,.7,.2,1), border-color .35s ease, filter .35s ease !important; filter: drop-shadow(0 0 0 rgba(255,41,61,0)) !important; } .work-grid-four .work-card .work-shade { background-image: radial-gradient(rgba(255,255,255,.105) .55px, transparent .8px), linear-gradient(180deg, rgba(8,5,6,.14) 0%, rgba(8,5,6,.08) 34%, rgba(8,5,6,.88) 100%) !important; background-size: 5px 5px, auto !important; background-blend-mode: screen, normal !important; } .work-grid-four .work-card .work-index { display: flex !important; align-items: center !important; gap: 8px !important; color: rgba(248,241,239,.86) !important; } .work-grid-four .work-card .work-index::before { content: "" !important; flex: 0 0 6px !important; width: 6px !important; height: 6px !important; border-radius: 50% !important; background: var(--red) !important; box-shadow: 0 0 10px rgba(255,41,61,.8) !important; } .work-grid-four .work-card:hover, .work-grid-four .work-card:focus-visible { border-color: rgba(255,41,61,.98) !important; filter: drop-shadow(0 0 9px rgba(255,41,61,.4)) drop-shadow(0 0 26px rgba(255,41,61,.18)) !important; transform: translateY(-6px) !important; } .work-grid-four .work-card:hover .work-index, .work-grid-four .work-card:focus-visible .work-index { color: var(--red) !important; } @media (max-width: 900px) { .work-grid-four::before, .work-grid-four::after { display: none !important; } } /* Keep selected-work art visible inside the clipped hover panels */ #work .work-grid-four .work-card { background: transparent !important; } #work .work-grid-four .work-card > img { z-index: 0 !important; } #work .work-grid-four .work-card > .work-shade { z-index: 1 !important; } #work .work-grid-four .work-card > .work-index, #work .work-grid-four .work-card > .work-arrow, #work .work-grid-four .work-card > .work-title { z-index: 3 !important; } #work .work-grid-four .work-card-cta { z-index: 5 !important; } /* Match testimonial copy to the existing DM Mono style shown in the studio copy */ .testimonials-section .testimonial-card blockquote, .testimonials-section .testimonial-person strong, .testimonials-section .testimonial-person small { font-family: var(--mono, 'DM Mono', monospace) !important; } /* Site-wide rounded studio panels: soften formerly sharp boxes across all pages */ :root { --studio-radius: 28px; --studio-radius-sm: 18px; --studio-radius-pill: 999px; } header, .site-header, .nav, .nav-inner, .hero-proof, .hero-stats, .services-strip, .service-card, .service-item, .work-card, .work-grid-four .work-card, .testimonial-card, .testimonial, .testimonial-panel, .contact-card, .contact-panel, .case-hero-media, .case-study-hero img, .case-study-section, .project-overview, .project-details, .challenge-card, .process-card, .process-step, .visual-system, .asset-card, .asset-tile, .ui-showcase, .screen-card, .screen-gallery img, .about-card, .about-image, .about-photo, .profile-frame, .portfolio-card, .portfolio-item, .service-panel, .work-panel, .case-panel, .stats-card, .form-panel, input, textarea, select, .input-wrap, .footer-panel { border-radius: var(--studio-radius) !important; } button, .button, .btn, .work-card-cta, .work-arrow, .service-icon, .icon-button, .nav-cta, .hero-actions a, .contact-cta, .pill, .tag, .chip, .badge { border-radius: var(--studio-radius-pill) !important; } .service-card img, .service-item img, .work-card img, .portfolio-card img, .portfolio-item img, .asset-card img, .asset-tile img, .screen-card img, .screen-gallery img, .about-image img, .about-photo img, .profile-frame img, .case-hero-media img, .case-study-hero img { border-radius: 20px !important; } /* Round clipping containers too, so imagery and hover layers follow the same silhouette */ .work-card, .portfolio-card, .portfolio-item, .service-card, .service-item, .testimonial-card, .case-hero-media, .screen-card, .asset-card, .asset-tile, .about-image, .about-photo, .profile-frame, .visual-system, .ui-showcase { overflow: hidden; } @media (max-width: 700px) { :root { --studio-radius: 22px; --studio-radius-sm: 15px; } .work-card, .portfolio-card, .portfolio-item, .service-card, .testimonial-card, .case-hero-media, .screen-card, .asset-card, .asset-tile, .about-image, .about-photo, .profile-frame { border-radius: var(--studio-radius) !important; } } /* Work Loadout: consistent rounded hover-pill interaction on every service row */ #services.services-editorial .service-row-list{border-top:0!important;display:flex!important;flex-direction:column!important;gap:6px!important;} #services.services-editorial .service-row{ border:1px solid transparent!important;border-bottom:1px solid rgba(255,41,61,.18)!important; border-radius:999px!important;padding:20px 12px!important;overflow:hidden!important; background:transparent!important;min-height:clamp(90px,7.3vw,124px)!important; transition:background .32s ease,border-color .32s ease,box-shadow .32s ease,transform .32s ease,padding .32s ease,min-height .32s ease!important; } #services.services-editorial .service-row::before{ inset:0!important;border-radius:inherit!important; background:linear-gradient(100deg,rgba(255,30,54,.24),rgba(255,30,54,.11) 54%,rgba(255,30,54,.025))!important; opacity:0!important;transition:opacity .32s ease!important; } #services.services-editorial .service-row:hover, #services.services-editorial .service-row:focus-visible, #services.services-editorial .service-row.active{ border-color:rgba(255,41,61,.9)!important; background:linear-gradient(100deg,rgba(107,7,20,.48),rgba(48,7,13,.3))!important; box-shadow:inset 0 0 0 1px rgba(255,41,61,.12),0 0 24px rgba(255,41,61,.10)!important; padding:20px 16px!important;min-height:clamp(104px,8.1vw,138px)!important; transform:translateX(2px)!important; } #services.services-editorial .service-row:hover::before, #services.services-editorial .service-row:focus-visible::before, #services.services-editorial .service-row.active::before{opacity:1!important;} #services.services-editorial .service-row h3{transition:color .28s ease,transform .32s ease!important;} #services.services-editorial .service-row:hover h3, #services.services-editorial .service-row:focus-visible h3, #services.services-editorial .service-row.active h3{color:#fff!important;transform:translateX(2px)!important;} #services.services-editorial .service-row:hover .service-arrow, #services.services-editorial .service-row:focus-visible .service-arrow, #services.services-editorial .service-row.active .service-arrow{transform:rotate(45deg)!important;background:#ff293d!important;color:#080607!important;border-color:#ff293d!important;box-shadow:0 0 22px rgba(255,41,61,.45)!important;} #services.services-editorial .service-hover-preview{border-radius:24px!important;overflow:hidden!important;} #services.services-editorial .service-hover-preview img{border-radius:22px!important;} @media(max-width:760px){ #services.services-editorial .service-row-list{gap:5px!important;} #services.services-editorial .service-row{grid-template-columns:32px minmax(0,1fr) 38px!important;gap:10px!important;border-radius:26px!important;padding:17px 12px!important;min-height:0!important;} #services.services-editorial .service-row:hover,#services.services-editorial .service-row:focus-visible,#services.services-editorial .service-row.active{padding:18px 13px!important;min-height:0!important;transform:none!important;} #services.services-editorial .service-row .service-meta{display:none!important;} #services.services-editorial .service-row .service-arrow{width:36px!important;height:36px!important;} #services.services-editorial .service-row p{max-height:none!important;opacity:1!important;overflow:visible!important;transform:none!important;margin-top:7px!important;font-size:12px!important;} #services.services-editorial .service-hover-preview{display:none!important;} } /* About portrait: compact editorial card inspired by the approved reference */ #studio .about-v2-layout{grid-template-columns:minmax(0,1.03fr) minmax(0,.97fr);gap:clamp(36px,5vw,82px);align-items:center} #studio .about-v2-art{max-width:760px;padding:18px 5% 28px 0} #studio .about-v2-imageframe{aspect-ratio:1.46/1;border-radius:34px;overflow:hidden;transform:rotate(-.6deg);border:1px solid rgba(255,55,75,.82);box-shadow:0 0 32px rgba(255,30,55,.09),inset 0 0 24px rgba(255,30,55,.08)} #studio .about-v2-imageframe img{object-position:center 31%;} #studio .about-v2-imageframe:after{border-radius:inherit;background:linear-gradient(180deg,rgba(0,0,0,.03) 32%,rgba(0,0,0,.76) 100%),linear-gradient(135deg,rgba(255,41,61,.19),transparent 52%)} #studio .about-v2-redshape{inset:6% -4% -3% 8%;border-radius:32px;transform:rotate(2.2deg)} #studio .about-v2-index{left:18px;top:18px;text-shadow:0 2px 8px #000} #studio .about-v2-index b{font-size:clamp(28px,3vw,42px)} #studio .about-v2-index span{font-size:clamp(8px,.72vw,10px);line-height:1.45} #studio .about-v2-image-caption{left:clamp(18px,2vw,30px);bottom:clamp(18px,2vw,30px);font-size:clamp(24px,2.7vw,40px);line-height:.92;text-shadow:0 2px 10px #000} #studio .about-v2-orbit{right:0;top:18%;width:clamp(96px,10vw,132px)} #studio .about-v2-sidecode{right:-1%;top:47%;font-size:7px} #studio .about-v2-bottomline{left:18px;right:8%;bottom:12px;font-size:7px} @media(max-width:900px){#studio .about-v2-layout{grid-template-columns:minmax(0,1fr);gap:36px}#studio .about-v2-art{width:94%;max-width:760px;margin:0 auto;padding:24px 5% 32px 0}#studio .about-v2-imageframe{aspect-ratio:1.4/1}#studio .about-v2-index{left:16px;top:15px}#studio .about-v2-orbit{right:0;top:14%}} @media(max-width:640px){#studio .about-v2-art{width:96%;padding:23px 5% 31px 0}#studio .about-v2-imageframe{aspect-ratio:1.12/1;border-radius:24px}#studio .about-v2-redshape{border-radius:23px;inset:5% -3% -3% 6%}#studio .about-v2-image-caption{font-size:clamp(22px,6vw,31px);left:16px;bottom:24px}#studio .about-v2-index{left:13px;top:12px}#studio .about-v2-index b{font-size:31px}#studio .about-v2-index span{font-size:7px}#studio .about-v2-orbit{width:88px;right:-1%;top:13%}#studio .about-v2-orbit span{font-size:30px}#studio .about-v2-orbit small{font-size:6px}#studio .about-v2-bottomline{left:14px;right:7%;font-size:6px;bottom:9px}} /* ABOUT PORTRAIT FIX — retain the original tall portrait composition and reference styling */ #studio .about-v2-layout{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;gap:clamp(36px,5vw,82px)!important;align-items:center!important} #studio .about-v2-art{width:100%!important;max-width:760px!important;margin:0!important;padding:30px 7% 38px 0!important;} #studio .about-v2-imageframe{aspect-ratio:4/5!important;border-radius:34px!important;overflow:hidden!important;transform:rotate(-.6deg)!important;border:1px solid rgba(255,55,75,.82)!important;box-shadow:0 0 32px rgba(255,30,55,.09),inset 0 0 24px rgba(255,30,55,.08)!important;} #studio .about-v2-imageframe img{object-position:center 29%!important;} #studio .about-v2-imageframe:after{border-radius:inherit!important;background:linear-gradient(180deg,rgba(0,0,0,.03) 32%,rgba(0,0,0,.76) 100%),linear-gradient(135deg,rgba(255,41,61,.19),transparent 52%)!important;} #studio .about-v2-redshape{inset:6% -4% -3% 8%!important;border-radius:32px!important;transform:rotate(2.2deg)!important;} #studio .about-v2-image-caption{left:clamp(18px,2vw,30px)!important;bottom:clamp(18px,2vw,30px)!important;font-size:clamp(28px,3vw,44px)!important;line-height:.92!important;text-shadow:0 2px 10px #000!important;} #studio .about-v2-orbit{right:0!important;top:14%!important;width:clamp(105px,11vw,145px)!important;} #studio .about-v2-sidecode{right:-1%!important;top:47%!important;font-size:8px!important;} #studio .about-v2-bottomline{left:18px!important;right:8%!important;bottom:12px!important;font-size:8px!important;} @media(max-width:900px){#studio .about-v2-layout{grid-template-columns:minmax(0,1fr)!important;gap:36px!important}#studio .about-v2-art{width:94%!important;max-width:760px!important;margin:0 auto!important;padding:30px 6% 38px 0!important}#studio .about-v2-imageframe{aspect-ratio:4/5!important}#studio .about-v2-index{left:12px!important;top:12px!important}#studio .about-v2-orbit{right:0!important;top:14%!important}} @media(max-width:640px){#studio .about-v2-art{width:96%!important;padding:26px 6% 34px 0!important}#studio .about-v2-imageframe{aspect-ratio:4/5!important;border-radius:24px!important}#studio .about-v2-redshape{border-radius:23px!important;inset:5% -3% -3% 6%!important}#studio .about-v2-image-caption{font-size:clamp(24px,7vw,34px)!important;left:16px!important;bottom:24px!important}#studio .about-v2-index{left:13px!important;top:12px!important}#studio .about-v2-index b{font-size:31px!important}#studio .about-v2-index span{font-size:8px!important}#studio .about-v2-orbit{width:94px!important;right:-1%!important;top:13%!important}#studio .about-v2-orbit span{font-size:30px!important}#studio .about-v2-orbit small{font-size:6px!important}#studio .about-v2-bottomline{left:14px!important;right:7%!important;font-size:6px!important;bottom:9px!important}} /* FINAL ABOUT PORTRAIT — faithfully apply the reference effects to the full-height portrait */ #studio .about-v2-art{filter:none!important;} #studio .about-v2-imageframe{aspect-ratio:4/5!important;border-radius:46px!important;overflow:hidden!important;border:2px solid rgba(255,41,61,.78)!important;box-shadow:0 0 0 1px rgba(255,41,61,.12),0 0 34px rgba(255,20,48,.17),inset 0 0 36px rgba(255,20,48,.16)!important;transform:rotate(-.5deg)!important;background:#10080a!important;} #studio .about-v2-imageframe:before{content:""!important;position:absolute!important;z-index:2!important;inset:0!important;border-radius:inherit!important;pointer-events:none!important;background:linear-gradient(90deg,transparent 0 14%,rgba(255,30,55,.20) 14.2%,transparent 14.6%),linear-gradient(0deg,transparent 0 25%,rgba(255,30,55,.18) 25.2%,transparent 25.6%),repeating-linear-gradient(0deg,transparent 0 48px,rgba(255,41,61,.08) 49px,transparent 50px),repeating-linear-gradient(90deg,transparent 0 68px,rgba(255,41,61,.07) 69px,transparent 70px)!important;mix-blend-mode:screen!important;} #studio .about-v2-imageframe:after{border-radius:inherit!important;background:radial-gradient(ellipse at 50% 38%,transparent 20%,rgba(12,0,3,.12) 68%,rgba(0,0,0,.42) 100%),linear-gradient(180deg,rgba(255,30,55,.12),transparent 30%,transparent 55%,rgba(0,0,0,.78))!important;box-shadow:inset 0 0 50px rgba(255,30,55,.12)!important;} #studio .about-v2-imageframe img{object-fit:cover!important;object-position:center 27%!important;filter:grayscale(1) contrast(1.2) brightness(.92)!important;} #studio .about-v2-redshape{inset:5% -5% -4% 9%!important;border-radius:44px!important;background:linear-gradient(145deg,#ff4354 0%,#ff1837 65%,#b90725 100%)!important;transform:rotate(3.5deg)!important;box-shadow:0 0 38px rgba(255,25,55,.25)!important;} #studio .about-v2-orbit{right:-1%!important;top:17%!important;width:clamp(112px,11vw,152px)!important;border:2px solid #ff4354!important;border-radius:50%!important;background:radial-gradient(circle at 35% 25%,#1a1012,#080708 72%)!important;box-shadow:0 0 0 7px rgba(255,41,61,.12),0 0 30px rgba(255,41,61,.24),0 15px 38px #000b!important;transform:rotate(0deg)!important;} #studio .about-v2-orbit span{color:#ff293d!important;text-shadow:0 0 20px rgba(255,41,61,.22)!important;font-size:clamp(42px,4.4vw,59px)!important;} #studio .about-v2-orbit small{font-size:8px!important;letter-spacing:.08em!important;line-height:1.5!important;} #studio .about-v2-image-caption{left:clamp(22px,3vw,42px)!important;bottom:clamp(26px,3vw,42px)!important;font-size:clamp(30px,3.4vw,50px)!important;line-height:.92!important;text-shadow:0 2px 16px #000,0 0 22px rgba(255,41,61,.18)!important;} #studio .about-v2-index{left:clamp(20px,3vw,42px)!important;top:clamp(22px,3vw,42px)!important;} #studio .about-v2-cross{z-index:6!important;text-shadow:0 0 15px rgba(255,41,61,.65)!important;} #studio .about-v2-bottomline{left:clamp(20px,3vw,42px)!important;right:clamp(18px,3vw,40px)!important;bottom:14px!important;color:#d5a0a7!important;} #studio .about-v2-sidecode{color:#ff5362!important;text-shadow:0 0 10px rgba(255,41,61,.22)!important;} #studio .about-v2-art:hover .about-v2-imageframe{transform:rotate(0deg) translateY(-4px)!important;box-shadow:0 0 0 1px rgba(255,41,61,.2),0 0 45px rgba(255,20,48,.24),inset 0 0 36px rgba(255,20,48,.18)!important;} #studio .about-v2-art:hover .about-v2-imageframe img{filter:grayscale(.72) contrast(1.15) brightness(.98)!important;transform:scale(1.025)!important;} #studio .about-v2-art:hover .about-v2-redshape{transform:rotate(1.8deg) translate(5px,-3px)!important;} @media(max-width:900px){#studio .about-v2-layout{grid-template-columns:minmax(0,1fr)!important}#studio .about-v2-art{width:min(100%,760px)!important;margin:0 auto!important;padding:32px 7% 40px 0!important}#studio .about-v2-imageframe{aspect-ratio:4/5!important;border-radius:38px!important}#studio .about-v2-redshape{border-radius:36px!important}#studio .about-v2-orbit{width:clamp(108px,18vw,140px)!important;top:16%!important}} @media(max-width:640px){#studio .about-v2-art{width:96%!important;padding:28px 7% 38px 0!important}#studio .about-v2-imageframe{aspect-ratio:4/5!important;border-radius:30px!important}#studio .about-v2-redshape{border-radius:28px!important;inset:5% -4% -3% 7%!important}#studio .about-v2-orbit{width:100px!important;right:-2%!important;top:15%!important}#studio .about-v2-orbit span{font-size:33px!important}#studio .about-v2-orbit small{font-size:6px!important}#studio .about-v2-image-caption{font-size:clamp(27px,7vw,36px)!important;left:18px!important;bottom:25px!important}#studio .about-v2-index{left:18px!important;top:18px!important}#studio .about-v2-bottomline{left:18px!important;right:18px!important;font-size:6px!important}} /* DISPLAY TYPOGRAPHY UPDATE — heavy condensed game-studio headline style */ /* TESTIMONIAL QUOTE ALIGNMENT — centered copy with a full usable line width */ .testimonials-section .testimonial-card blockquote{ width:100%!important; max-width:none!important; align-self:stretch!important; text-align:center!important; margin-inline:auto!important; text-wrap:pretty; } @media(max-width:760px){ .testimonials-section .testimonial-card blockquote{ width:100%!important; max-width:none!important; text-align:center!important; font-size:clamp(10px,2.4vw,14px)!important; line-height:1.45!important; } } /* GLOBAL BUTTON ROLLOVER — luminous red/pink glow inspired by the supplied reference. */ :root{--ui-button-glow:#ff293d;--ui-button-light:#ffe7e9;} :is(a.btn,a.button,a.nav-cta,a.contact-cta,.mobile-cta a,.about-v2-cta,.work-card-cta,.contact-footer-send,button:not(.menu-toggle),.filter-btn,.submit-button,.form-submit,.contact-submit,[role="button"]){position:relative;isolation:isolate;transition:background-color .35s ease,color .35s ease,border-color .35s ease,box-shadow .35s ease,transform .35s cubic-bezier(.2,.8,.2,1),filter .35s ease!important;} :is(a.btn,a.button,a.nav-cta,a.contact-cta,.mobile-cta a,.about-v2-cta,.work-card-cta,.contact-footer-send,button:not(.menu-toggle),.filter-btn,.submit-button,.form-submit,.contact-submit,[role="button"]):hover,:is(a.btn,a.button,a.nav-cta,a.contact-cta,.mobile-cta a,.about-v2-cta,.work-card-cta,.contact-footer-send,button:not(.menu-toggle),.filter-btn,.submit-button,.form-submit,.contact-submit,[role="button"]):focus-visible{background:var(--ui-button-light)!important;color:#8f0718!important;border-color:#ff6572!important;box-shadow:0 0 0 2px #ff536a55,0 0 12px 4px #ff293d9c,0 0 34px 12px #ff293d70,0 0 70px 22px #ff293d30!important;filter:brightness(1.08) saturate(1.08);transform:translateY(-2px);outline:none;} :is(a.btn,a.button,a.nav-cta,a.contact-cta,.mobile-cta a,.about-v2-cta,.work-card-cta,.contact-footer-send,button:not(.menu-toggle),.filter-btn,.submit-button,.form-submit,.contact-submit,[role="button"]):hover span,:is(a.btn,a.button,a.nav-cta,a.contact-cta,.mobile-cta a,.about-v2-cta,.work-card-cta,.contact-footer-send,button:not(.menu-toggle),.filter-btn,.submit-button,.form-submit,.contact-submit,[role="button"]):hover b,:is(a.btn,a.button,a.nav-cta,a.contact-cta,.mobile-cta a,.about-v2-cta,.work-card-cta,.contact-footer-send,button:not(.menu-toggle),.filter-btn,.submit-button,.form-submit,.contact-submit,[role="button"]):hover i{color:#8f0718!important;} :is(a.btn,a.button,a.nav-cta,a.contact-cta,.mobile-cta a,.about-v2-cta,.work-card-cta,.contact-footer-send,button:not(.menu-toggle),.filter-btn,.submit-button,.form-submit,.contact-submit,[role="button"]):active{transform:translateY(0) scale(.985);box-shadow:0 0 10px 3px #ff293d90,0 0 28px 8px #ff293d55!important;} @media(prefers-reduced-motion:reduce){:is(a.btn,a.button,a.nav-cta,a.contact-cta,.mobile-cta a,.about-v2-cta,.work-card-cta,.contact-footer-send,button:not(.menu-toggle),.filter-btn,.submit-button,.form-submit,.contact-submit,[role="button"]){transition:none!important;}} /* Specific CTA corner treatment requested: rounded rectangle, not a sharp-edged block. */ a.about-v2-cta{border-radius:24px!important;overflow:hidden!important;} a.about-v2-cta::before,a.about-v2-cta::after{border-radius:inherit!important;} /* UI BUDDY pricing + hover-reveal value section */ .pricing-why-section{position:relative;overflow:hidden;padding:clamp(70px,8vw,125px) 0;background:radial-gradient(ellipse at 78% 20%,rgba(255,41,61,.14),transparent 34%),radial-gradient(ellipse at 15% 65%,rgba(115,10,25,.18),transparent 35%),#090707;border-block:1px solid #3b1b21} .pricing-why-section:before{content:"$799";position:absolute;right:-.04em;top:7%;font:900 clamp(160px,27vw,440px)/.8 var(--display);letter-spacing:-.07em;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.035);pointer-events:none} .pricing-why-wrap{width:min(1380px,90%);margin:auto;position:relative;z-index:1} .pricing-why-top{display:flex;justify-content:space-between;gap:20px;padding-bottom:16px;border-bottom:1px solid #452027;color:#9d898c;font:8px var(--mono);letter-spacing:.13em} .pricing-why-top span:first-child{color:#ff5360}.pricing-why-top i{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--red);box-shadow:0 0 12px var(--red);margin-right:8px} .pricing-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(350px,.78fr);gap:clamp(35px,7vw,110px);align-items:center;padding:clamp(45px,7vw,95px) 0 clamp(75px,9vw,130px)} .pricing-eyebrow{font:10px var(--mono);letter-spacing:.14em;color:#ff7b84;text-transform:uppercase}.pricing-intro h2{font:900 clamp(62px,8.5vw,124px)/.79 var(--display);letter-spacing:-.045em;margin:24px 0 27px;text-transform:uppercase}.pricing-intro h2 span{color:var(--red);text-shadow:0 0 28px #ff293d3a}.pricing-intro h2 em{font-style:normal;color:transparent;-webkit-text-stroke:1px #f8f1ef}.pricing-intro>p{max-width:510px;color:#b29c9e;font-size:13px;line-height:1.95;margin:0}.pricing-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}.pricing-tags span{padding:9px 11px;border:1px solid #4a242a;background:#10090b;font:8px var(--mono);letter-spacing:.06em;color:#e4cbcd} .pricing-card{position:relative;isolation:isolate;overflow:hidden;padding:clamp(25px,3vw,42px);border:1px solid #77303a;border-radius:25px;background:linear-gradient(145deg,rgba(38,17,20,.96),rgba(10,7,8,.97) 65%);box-shadow:0 20px 70px #0008,0 0 50px #ff293d0d;transform:rotate(1deg);transition:transform .45s,border-color .45s,box-shadow .45s}.pricing-card:hover{transform:rotate(0) translateY(-5px);border-color:#ff5360;box-shadow:0 25px 80px #000a,0 0 45px #ff293d20}.pricing-card:after{content:"";position:absolute;z-index:-1;width:280px;height:280px;right:-100px;top:-120px;border-radius:50%;background:#ff293d1b;filter:blur(35px)}.pricing-card-orbit{position:absolute;z-index:-1;right:-70px;top:80px;width:230px;height:230px;border:1px solid #ff293d26;border-radius:50%;box-shadow:0 0 0 20px #ff293d08,0 0 0 40px #ff293d06}.pricing-card-head{display:flex;justify-content:space-between;gap:12px;align-items:center;font:8px var(--mono);letter-spacing:.08em;color:#bba3a5}.pricing-status{color:#ff6874;white-space:nowrap}.pricing-status i{display:inline-block;width:6px;height:6px;background:var(--red);border-radius:50%;box-shadow:0 0 10px var(--red);margin-right:5px}.pricing-card-label{margin-top:47px;font:700 clamp(16px,2vw,23px)/1.1 var(--display);letter-spacing:.055em;text-transform:uppercase;max-width:330px}.pricing-price{display:flex;align-items:flex-start;gap:4px;margin:14px 0 0;color:#fff}.pricing-currency{font:800 42px/.95 var(--display);color:var(--red);margin-top:13px}.pricing-price strong{font:900 clamp(90px,10vw,145px)/.8 var(--display);letter-spacing:-.065em;color:#ff3447;text-shadow:0 0 32px #ff293d2a}.pricing-per{align-self:flex-end;margin:0 0 7px 8px;font:9px var(--mono);letter-spacing:.1em;color:#d0b9bb}.pricing-old{display:flex;align-items:center;gap:12px;margin-top:12px}.pricing-old span{font:700 24px var(--display);color:#9d8d8f;text-decoration:line-through;text-decoration-color:#ff5360;text-decoration-thickness:2px}.pricing-old b{font:8px var(--mono);letter-spacing:.08em;color:#ff8d95}.pricing-rule{height:1px;background:linear-gradient(90deg,#ff293d88,#563037,transparent);margin:26px 0 19px}.pricing-includes{list-style:none;padding:0;margin:0;display:grid;gap:13px}.pricing-includes li{display:flex;gap:11px;align-items:flex-start;color:#c7b5b7;font-size:11px;line-height:1.5}.pricing-includes li span{font:17px var(--display);line-height:1;color:var(--red)}.pricing-cta{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:29px;padding:17px 19px;border:1px solid var(--red);border-radius:13px;background:linear-gradient(110deg,#a80c20,#ff293d 78%,#ff5968);color:#fff;font:10px var(--mono);letter-spacing:.07em;box-shadow:0 0 24px #ff293d20;transition:transform .25s,box-shadow .25s,filter .25s}.pricing-cta b{font:23px var(--body);font-weight:400}.pricing-cta:hover{transform:translateY(-3px);filter:brightness(1.16);box-shadow:0 0 24px #ff293d70,0 0 50px #ff293d2a}.pricing-note{display:block;color:#8f7b7e;font:8px/1.7 var(--mono);margin-top:14px} .why-rollover-heading{display:flex;justify-content:space-between;align-items:end;gap:25px;margin-bottom:27px}.why-rollover-heading h3{font:900 clamp(43px,6vw,76px)/.82 var(--display);letter-spacing:-.03em;margin:15px 0 0}.why-rollover-heading h3 em{font-style:normal;color:var(--red)}.why-rollover-heading>p{max-width:330px;color:#a99496;font-size:11px;line-height:1.8;margin:0 0 5px}.why-rollover-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.why-roll-card{position:relative;isolation:isolate;overflow:hidden;min-height:285px;padding:21px 19px 18px;border:1px solid #3e2227;border-radius:18px;background:linear-gradient(155deg,#171012,#0b0809 75%);display:flex;flex-direction:column;outline:none;transition:transform .35s,border-color .35s,background .35s,box-shadow .35s}.why-roll-card:before{content:"";position:absolute;z-index:-1;inset:0;background:radial-gradient(ellipse at 60% 100%,#ff293d32,transparent 60%);opacity:0;transition:opacity .35s}.why-roll-card:hover,.why-roll-card:focus-visible,.why-roll-card.is-featured{border-color:#6b2c35;box-shadow:0 10px 40px #0005}.why-roll-card:hover,.why-roll-card:focus-visible{transform:translateY(-7px);border-color:#ff5360;box-shadow:0 15px 45px #0008,0 0 30px #ff293d15}.why-roll-card:hover:before,.why-roll-card:focus-visible:before,.why-roll-card.is-featured:before{opacity:1}.why-roll-top{display:flex;justify-content:space-between;align-items:center;font:7px var(--mono);letter-spacing:.08em;color:#9d888b}.why-roll-top b{color:var(--red);font:16px var(--body);font-weight:400;transition:transform .3s}.why-roll-card:hover .why-roll-top b,.why-roll-card:focus-visible .why-roll-top b{transform:translate(3px,-3px)}.why-roll-symbol{display:grid;place-items:center;width:47px;height:47px;margin:31px 0 23px;border:1px solid #6d2b35;border-radius:14px;color:#ff5261;font-size:26px;background:#ff293d0c;box-shadow:inset 0 0 18px #ff293d08;transition:background .3s,box-shadow .3s,transform .3s}.why-roll-card:hover .why-roll-symbol,.why-roll-card:focus-visible .why-roll-symbol{background:#ff293d1d;box-shadow:0 0 24px #ff293d20;transform:scale(1.05)}.why-roll-card h4{font:800 clamp(21px,2.2vw,29px)/.92 var(--display);letter-spacing:-.015em;margin:0;text-transform:uppercase}.why-roll-card p{font-size:10px;line-height:1.85;color:#b6a1a3;margin:12px 0 14px;max-height:0;opacity:0;transform:translateY(8px);overflow:hidden;transition:max-height .45s,opacity .35s,transform .35s}.why-roll-card:hover p,.why-roll-card:focus-visible p,.why-roll-card.is-featured p{max-height:150px;opacity:1;transform:translateY(0)}.why-roll-foot{margin-top:auto;padding-top:14px;border-top:1px solid #3e2429;color:#ff6874;font:7px var(--mono);letter-spacing:.06em}.pricing-why-foot{display:flex;justify-content:space-between;gap:20px;align-items:center;margin-top:35px;padding-top:16px;border-top:1px solid #402027;font:8px var(--mono);letter-spacing:.1em;color:#8e7b7d}.pricing-why-foot a{color:#ff6671}.pricing-why-foot a:hover{color:white} @media(max-width:900px){.pricing-hero-grid{grid-template-columns:1fr;gap:36px}.pricing-intro h2{font-size:clamp(64px,12vw,110px)}.pricing-card{max-width:650px;width:100%;transform:none}.why-rollover-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.why-roll-card{min-height:260px}.why-roll-card p{max-height:150px;opacity:1;transform:none}} @media(max-width:600px){.pricing-why-section{padding:65px 0}.pricing-why-wrap{width:calc(100% - 32px)}.pricing-why-top{font-size:7px;flex-direction:column;gap:7px}.pricing-hero-grid{padding:48px 0 75px}.pricing-intro h2{font-size:clamp(57px,16vw,88px);line-height:.82}.pricing-intro>p{font-size:12px}.pricing-card{padding:22px 18px;border-radius:20px}.pricing-card-head{font-size:7px;align-items:flex-start}.pricing-card-label{margin-top:36px}.pricing-price strong{font-size:clamp(86px,25vw,120px)}.pricing-currency{font-size:34px}.pricing-old{margin-top:16px}.why-rollover-heading{display:block}.why-rollover-heading h3{font-size:clamp(45px,13vw,66px)}.why-rollover-heading>p{margin-top:18px}.why-rollover-grid{grid-template-columns:1fr;gap:10px}.why-roll-card{min-height:230px;padding:20px}.why-roll-symbol{margin:22px 0 18px}.why-roll-card p{max-height:160px}.pricing-why-foot{flex-direction:column;align-items:flex-start;gap:10px;font-size:7px}} /* Premium emphasis pass — pricing section only */ .pricing-why-section{ padding-top:clamp(92px,10vw,150px)!important; padding-bottom:clamp(90px,10vw,145px)!important; background: radial-gradient(ellipse at 74% 26%,rgba(255,35,58,.23),transparent 29%), radial-gradient(ellipse at 17% 18%,rgba(255,35,58,.12),transparent 28%), radial-gradient(ellipse at 50% 100%,rgba(95,9,21,.25),transparent 48%), #070607!important; border-top:1px solid rgba(255,70,88,.45)!important; border-bottom:1px solid rgba(255,70,88,.35)!important; } .pricing-why-section:after{content:"";position:absolute;inset:18px 14px;pointer-events:none;border:1px solid rgba(255,255,255,.045);border-radius:26px;z-index:0} .pricing-why-section:before{color:transparent;-webkit-text-stroke:1px rgba(255,51,70,.105);top:4%;right:-.02em} .pricing-why-top{padding-bottom:20px;border-bottom-color:rgba(255,65,82,.3);color:#c0a9ac} .pricing-why-top span:first-child{font-size:9px;color:#ff6470} .pricing-hero-grid{gap:clamp(35px,5vw,78px);padding-top:clamp(55px,7vw,92px);padding-bottom:clamp(85px,9vw,125px)} .pricing-eyebrow{display:inline-flex;align-items:center;gap:10px;color:#ff7e88;font-size:11px;letter-spacing:.18em} .pricing-eyebrow:before{content:"";width:30px;height:2px;background:#ff293d;box-shadow:0 0 15px #ff293d} .pricing-intro h2{font-size:clamp(68px,9vw,138px);line-height:.78;text-shadow:0 8px 45px rgba(0,0,0,.55);margin-top:28px;margin-bottom:32px} .pricing-intro h2 span{color:#ff293d;text-shadow:0 0 34px rgba(255,41,61,.38)} .pricing-intro h2 em{-webkit-text-stroke:1.4px rgba(255,255,255,.82);text-shadow:0 0 25px rgba(255,255,255,.08)} .pricing-intro>p{font-size:14px;max-width:480px;color:#d0bfc1;line-height:1.9} .pricing-tags{gap:9px;margin-top:31px} .pricing-tags span{border-color:rgba(255,63,81,.35);background:linear-gradient(135deg,rgba(255,41,61,.12),rgba(14,8,10,.9));border-radius:999px;padding:10px 13px;color:#f5e9ea;box-shadow:inset 0 1px rgba(255,255,255,.035)} .pricing-card{padding:clamp(30px,3.4vw,48px);border:1px solid rgba(255,73,90,.75);border-radius:30px;background:linear-gradient(145deg,rgba(39,14,19,.98),rgba(13,8,10,.99) 60%,rgba(24,7,11,.98));box-shadow:0 30px 90px rgba(0,0,0,.65),0 0 0 1px rgba(255,41,61,.1),0 0 75px rgba(255,41,61,.15);transform:rotate(.5deg)} .pricing-card:before{content:"PREMIUM DESIGN PARTNER";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#ff293d,#ff8d96,#ff293d);box-shadow:0 0 25px rgba(255,41,61,.6)} .pricing-card:hover{transform:translateY(-8px) rotate(0);border-color:#ff8b95;box-shadow:0 36px 100px rgba(0,0,0,.7),0 0 0 1px rgba(255,41,61,.2),0 0 95px rgba(255,41,61,.25)} .pricing-card-head{font-size:9px;color:#d8c2c5} .pricing-status{padding:7px 9px;border:1px solid rgba(255,72,89,.28);border-radius:999px;background:rgba(255,41,61,.07)} .pricing-card-label{font-size:clamp(18px,2.1vw,25px);max-width:360px;margin-top:42px;letter-spacing:.07em} .pricing-price{margin-top:24px;align-items:center;gap:6px} .pricing-currency{font-size:48px;margin-top:-2px;text-shadow:0 0 22px rgba(255,41,61,.3)} .pricing-price strong{font-size:clamp(108px,11.8vw,164px);line-height:.78;color:#ff3447;text-shadow:0 0 42px rgba(255,41,61,.28)} .pricing-per{margin-bottom:3px;font-size:10px;color:#f1dfe1} .pricing-old{margin-top:20px} .pricing-old span{font-size:27px} .pricing-old b{padding:6px 9px;border-radius:5px;background:rgba(255,41,61,.1);font-size:8px} .pricing-rule{margin:29px 0 23px;background:linear-gradient(90deg,#ff293d,#9b3b46 55%,transparent)} .pricing-includes{gap:15px} .pricing-includes li{font-size:12px;color:#e1d1d3;gap:13px} .pricing-includes li span{display:grid;place-items:center;flex:0 0 19px;width:19px;height:19px;border:1px solid rgba(255,41,61,.45);border-radius:50%;font-size:14px;box-shadow:0 0 15px rgba(255,41,61,.12)} .pricing-cta{margin-top:32px;padding:19px 20px;border-radius:16px;border-color:#ff7783;background:linear-gradient(105deg,#bd1027,#ff293d 60%,#ff6573);font-size:11px;font-weight:700;box-shadow:0 8px 30px rgba(255,41,61,.22),inset 0 1px rgba(255,255,255,.18)} .pricing-cta:hover{transform:translateY(-4px) scale(1.01);box-shadow:0 10px 35px rgba(255,41,61,.42),0 0 55px rgba(255,41,61,.25)} .pricing-note{font-size:9px;color:#b49b9f} .why-rollover-heading{margin-bottom:34px} .why-rollover-heading h3{font-size:clamp(50px,6.5vw,88px);line-height:.82;text-shadow:0 8px 30px rgba(0,0,0,.5)} .why-rollover-heading h3 em{color:#ff3447;text-shadow:0 0 28px rgba(255,41,61,.28)} .why-rollover-heading>p{font-size:12px;color:#c2aeb1} .why-rollover-grid{gap:14px} .why-roll-card{min-height:300px;padding:24px 22px 20px;border-color:rgba(255,255,255,.1);border-radius:22px;background:linear-gradient(150deg,rgba(28,16,19,.97),rgba(9,7,8,.98) 72%);box-shadow:inset 0 1px rgba(255,255,255,.04),0 15px 45px rgba(0,0,0,.2)} .why-roll-card:before{background:radial-gradient(ellipse at 50% 100%,rgba(255,41,61,.4),transparent 65%),linear-gradient(135deg,rgba(255,41,61,.08),transparent 55%)} .why-roll-card:hover,.why-roll-card:focus-visible{transform:translateY(-9px);border-color:#ff5261;box-shadow:0 20px 55px rgba(0,0,0,.55),0 0 35px rgba(255,41,61,.17)} .why-roll-top{font-size:8px;color:#bba7aa} .why-roll-symbol{width:54px;height:54px;border-radius:17px;border-color:rgba(255,74,91,.55);background:linear-gradient(135deg,rgba(255,41,61,.16),rgba(255,41,61,.025));box-shadow:inset 0 1px rgba(255,255,255,.08),0 0 28px rgba(255,41,61,.08)} .why-roll-card h4{font-size:clamp(23px,2.4vw,32px);line-height:.95} .why-roll-card p{font-size:11px;line-height:1.8;color:#d0bfc1} .why-roll-foot{font-size:8px;color:#ff7d87;border-top-color:rgba(255,70,88,.24)} .pricing-why-foot{margin-top:44px;padding-top:21px;border-top-color:rgba(255,65,82,.3);font-size:9px;color:#b6a0a4} .pricing-why-foot a{padding:11px 16px;border:1px solid rgba(255,65,82,.5);border-radius:999px;background:rgba(255,41,61,.08);color:#ff7c87;transition:background .25s,color .25s,box-shadow .25s} .pricing-why-foot a:hover{background:#ff293d;color:white;box-shadow:0 0 28px rgba(255,41,61,.35)} @media(max-width:900px){.pricing-card{max-width:720px}.why-roll-card{min-height:270px}} @media(max-width:600px){.pricing-why-section:after{inset:8px;border-radius:18px}.pricing-hero-grid{gap:40px}.pricing-intro h2{font-size:clamp(62px,16vw,94px)}.pricing-card{padding:27px 20px;border-radius:23px}.pricing-card-label{margin-top:34px}.pricing-price strong{font-size:clamp(100px,27vw,130px)}.pricing-currency{font-size:37px}.pricing-includes li{font-size:11px}.why-roll-card{min-height:245px}.pricing-why-foot{gap:13px}} /* Mascot-led USD pricing hero: premium black/red campaign art direction */ .pricing-hero-mascot-layout{grid-template-columns:minmax(300px,.9fr) minmax(0,1.1fr)!important;gap:clamp(26px,4vw,64px)!important;align-items:center!important} .pricing-mascot-stage{position:relative;isolation:isolate;min-height:clamp(520px,55vw,760px);display:flex;align-items:flex-end;justify-content:center;overflow:hidden;border:1px solid rgba(255,54,72,.22);border-radius:30px;background:radial-gradient(ellipse at 50% 60%,rgba(255,27,48,.23),transparent 44%),linear-gradient(145deg,rgba(30,8,12,.72),rgba(7,6,7,.96) 64%);box-shadow:inset 0 1px rgba(255,255,255,.06),0 24px 85px rgba(0,0,0,.45)} .pricing-mascot-stage:before{content:"";position:absolute;z-index:-1;inset:12px;border:1px solid rgba(255,73,88,.12);border-radius:22px;background:repeating-linear-gradient(0deg,transparent 0 48px,rgba(255,255,255,.025) 49px 50px),repeating-linear-gradient(90deg,transparent 0 48px,rgba(255,255,255,.025) 49px 50px);mask-image:linear-gradient(to bottom,black,transparent 90%)} .pricing-mascot-aura{position:absolute;z-index:-1;width:78%;aspect-ratio:1;left:11%;bottom:10%;border-radius:50%;background:rgba(255,23,48,.22);filter:blur(65px);animation:pricingAuraPulse 4s ease-in-out infinite alternate} .pricing-mascot-orbit{position:absolute;z-index:-1;left:50%;top:48%;border:1px solid rgba(255,48,67,.25);border-radius:50%;transform:translate(-50%,-50%) rotate(-22deg)} .pricing-mascot-orbit-one{width:90%;height:58%;box-shadow:0 0 35px rgba(255,41,61,.06)} .pricing-mascot-orbit-two{width:110%;height:75%;border-style:dashed;opacity:.65} .pricing-mascot-stage img{position:relative;z-index:1;width:112%;max-width:none;height:auto;max-height:82%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 22px 38px rgba(0,0,0,.55)) drop-shadow(0 0 24px rgba(255,41,61,.16));transform:translateY(3%);transition:transform .6s cubic-bezier(.2,.7,.2,1),filter .6s} .pricing-mascot-stage:hover img{transform:translateY(0) scale(1.025);filter:drop-shadow(0 28px 45px rgba(0,0,0,.6)) drop-shadow(0 0 36px rgba(255,41,61,.27))} .pricing-mascot-label{position:absolute;z-index:2;font:8px var(--mono);letter-spacing:.13em;color:#d6bfc2} .pricing-mascot-label-top{top:23px;left:24px} .pricing-mascot-label-bottom{bottom:22px;left:24px;display:flex;align-items:center;gap:9px;color:#ff8b95} .pricing-mascot-label-bottom i{display:inline-block;width:6px;height:6px;border-radius:50%;background:#ff293d;box-shadow:0 0 12px #ff293d} .pricing-right-stack{min-width:0;display:flex;flex-direction:column;gap:28px} .pricing-right-stack .pricing-hero-grid{display:block} .pricing-right-stack .pricing-intro h2{font-size:clamp(56px,6.3vw,94px);line-height:.82;letter-spacing:-.045em;margin:22px 0 22px} .pricing-right-stack .pricing-intro h2 span{display:inline-block} .pricing-right-stack .pricing-intro h2 em{display:inline-block;font-size:.78em;letter-spacing:-.025em} .pricing-right-stack .pricing-intro>p{max-width:590px;font-size:13px} .pricing-right-stack .pricing-tags{margin-top:21px} .pricing-right-stack .pricing-card{transform:none;padding:clamp(24px,2.7vw,38px);border-radius:24px} .pricing-right-stack .pricing-card:hover{transform:translateY(-5px)} .pricing-right-stack .pricing-card-label{margin-top:32px} .pricing-right-stack .pricing-price strong{font-size:clamp(94px,9vw,132px)} @keyframes pricingAuraPulse{from{opacity:.55;transform:scale(.94)}to{opacity:1;transform:scale(1.06)}} @media(max-width:900px){.pricing-hero-mascot-layout{grid-template-columns:minmax(0,1fr)!important}.pricing-mascot-stage{min-height:clamp(390px,75vw,620px);max-width:650px;width:100%;margin:0 auto}.pricing-mascot-stage img{width:100%;max-height:92%}.pricing-right-stack{gap:30px}.pricing-right-stack .pricing-intro h2{font-size:clamp(62px,11vw,100px)}} @media(max-width:600px){.pricing-mascot-stage{min-height:410px;border-radius:22px}.pricing-mascot-stage img{width:120%;max-width:none;max-height:88%}.pricing-mascot-label-top{top:17px;left:17px;font-size:7px}.pricing-mascot-label-bottom{left:17px;bottom:17px;font-size:7px}.pricing-right-stack .pricing-intro h2{font-size:clamp(54px,14vw,82px);line-height:.84}.pricing-right-stack .pricing-intro h2 em{font-size:.72em}.pricing-right-stack .pricing-card{padding:24px 19px}.pricing-right-stack .pricing-price strong{font-size:clamp(92px,25vw,126px)}} /* Reference-matched premium pricing artwork */ .pricing-reference-artwork-wrap{position:relative;width:100%;margin:clamp(26px,4vw,56px) 0 clamp(70px,8vw,110px);isolation:isolate} .pricing-reference-artwork-wrap:before{content:"";position:absolute;inset:7% 4%;z-index:-1;background:radial-gradient(ellipse at 30% 55%,rgba(255,25,55,.2),transparent 52%),radial-gradient(ellipse at 78% 45%,rgba(255,0,35,.17),transparent 45%);filter:blur(35px);pointer-events:none} .pricing-reference-artwork-link{display:block;position:relative;overflow:hidden;border-radius:clamp(12px,1.5vw,24px);line-height:0;border:1px solid rgba(255,55,75,.24);background:#050505;box-shadow:0 0 0 1px rgba(255,30,55,.07),0 24px 90px rgba(255,0,35,.12);transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s ease,border-color .45s ease} .pricing-reference-artwork-link:hover,.pricing-reference-artwork-link:focus-visible{transform:translateY(-4px);border-color:rgba(255,60,80,.8);box-shadow:0 0 32px rgba(255,0,35,.2),0 30px 100px rgba(255,0,35,.18);outline:none} .pricing-reference-artwork{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover} .pricing-artwork-caption{display:block;margin:12px 4px 0;color:#85858d;font:600 9px/1.4 'DM Mono',monospace;letter-spacing:.16em;text-transform:uppercase} @media(max-width:700px){.pricing-reference-artwork-wrap{margin:22px 0 58px}.pricing-reference-artwork-link{border-radius:12px}.pricing-reference-artwork{aspect-ratio:3/2;object-fit:contain}.pricing-artwork-caption{font-size:7px;letter-spacing:.1em}} /* Interactive USD pricing experience — layered HTML, live service selector, motion */ .pricing-why-section .usd-experience{position:relative;display:grid;grid-template-columns:minmax(280px,.78fr) minmax(0,1.22fr);gap:clamp(16px,2vw,28px);margin:clamp(28px,4vw,52px) 0 clamp(62px,7vw,94px);isolation:isolate;perspective:1400px} .usd-experience:before{content:"";position:absolute;inset:-5% -3%;z-index:-2;background:radial-gradient(ellipse at 20% 45%,rgba(255,23,48,.22),transparent 38%),radial-gradient(ellipse at 78% 52%,rgba(255,25,48,.15),transparent 40%);filter:blur(35px);pointer-events:none} .usd-scanline{position:absolute;z-index:4;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,#ff465a,transparent);box-shadow:0 0 18px #ff293d;opacity:.65;animation:usdScan 7s linear infinite;pointer-events:none} .usd-mascot-panel,.usd-offer-panel{position:relative;min-width:0;overflow:hidden;border:1px solid rgba(255,64,81,.28);border-radius:24px;background:linear-gradient(145deg,rgba(20,10,12,.98),rgba(5,5,6,.98) 70%);box-shadow:inset 0 1px rgba(255,255,255,.06),0 28px 75px rgba(0,0,0,.4);transform-style:preserve-3d;transition:transform .22s ease,border-color .35s,box-shadow .35s} .usd-mascot-panel{min-height:650px;isolation:isolate;background:radial-gradient(ellipse at 46% 52%,rgba(255,27,48,.19),transparent 45%),linear-gradient(145deg,#17090c,#060506 74%)} .usd-mascot-panel:before,.usd-offer-panel:before{content:"";position:absolute;inset:10px;border:1px solid rgba(255,255,255,.055);border-radius:17px;pointer-events:none;z-index:3} .usd-mascot-panel:after{content:"UI / FX / HUD";position:absolute;top:46%;left:-25px;transform:rotate(-90deg);font:8px var(--mono);letter-spacing:.25em;color:rgba(255,90,103,.7)} .usd-panel-meta{position:absolute;z-index:5;top:25px;left:25px;right:25px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;font:7px var(--mono);letter-spacing:.11em;color:#b8a3a6} .usd-live{color:#ff6876}.usd-live i,.usd-price-status i{display:inline-block;width:6px;height:6px;margin-right:6px;border-radius:50%;background:#ff3447;box-shadow:0 0 12px #ff3447;animation:usdBlink 1.7s ease-in-out infinite} .usd-mascot-crop{position:absolute;inset:42px 0 0;overflow:hidden;isolation:isolate;mask-image:linear-gradient(to bottom,#000 0%,#000 78%,transparent 100%)} .usd-mascot-crop:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 50%,rgba(5,5,6,.2)),linear-gradient(0deg,#080607 0%,transparent 28%);pointer-events:none} .usd-mascot-crop img{position:absolute;inset:0;width:250%;height:100%;max-width:none;object-fit:cover;object-position:left center;transform:translateX(-1%);filter:saturate(1.12) contrast(1.06);transition:transform .7s cubic-bezier(.2,.8,.2,1),filter .7s} .usd-mascot-panel:hover .usd-mascot-crop img{transform:translateX(-2%) scale(1.035);filter:saturate(1.25) contrast(1.08)} .usd-radar{position:absolute;z-index:0;left:43%;top:35%;width:170px;aspect-ratio:1;border:1px solid rgba(255,42,62,.5);border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 14px rgba(255,42,62,.055),0 0 0 28px rgba(255,42,62,.035),inset 0 0 25px rgba(255,42,62,.08);pointer-events:none} .usd-radar-a{animation:usdRadar 5s ease-in-out infinite}.usd-radar-b{width:245px;opacity:.45;animation:usdRadar 5s ease-in-out -2.5s infinite} .usd-mascot-callout{position:absolute;z-index:5;left:22px;bottom:70px;right:22px;display:flex;align-items:center;gap:11px;padding:13px 15px;border:1px solid rgba(255,64,81,.32);border-radius:12px;background:rgba(8,6,7,.74);backdrop-filter:blur(12px);font:8px var(--mono);letter-spacing:.08em;color:#f5e9ea;box-shadow:0 0 28px rgba(255,20,45,.08)} .usd-mascot-callout span{display:grid;place-items:center;width:27px;height:27px;border-radius:8px;background:#ff293d;color:white;font-weight:bold}.usd-mascot-callout b{flex:1}.usd-mascot-callout i{font-style:normal;color:#ff5969;font-size:17px} .usd-side-chip{position:absolute;z-index:5;right:17px;padding:9px 11px;border:1px solid rgba(255,64,81,.3);border-radius:8px;background:rgba(8,6,7,.78);color:#e6d6d8;font:7px var(--mono);letter-spacing:.08em;backdrop-filter:blur(8px);animation:usdFloat 4s ease-in-out infinite}.usd-side-chip span{color:#ff3a4e;margin-right:7px}.usd-chip-one{top:37%}.usd-chip-two{top:47%;animation-delay:-2s} .usd-mascot-bottom{position:absolute;z-index:5;bottom:23px;left:25px;right:25px;display:flex;justify-content:space-between;gap:12px;color:#9f8b8e;font:7px var(--mono);letter-spacing:.12em} .usd-offer-panel{padding:clamp(22px,3vw,39px);background:radial-gradient(ellipse at 86% 6%,rgba(255,31,50,.15),transparent 32%),linear-gradient(145deg,rgba(18,10,12,.98),rgba(5,5,6,.98) 70%)} .usd-offer-kicker{display:flex;justify-content:space-between;gap:12px;align-items:center;color:#c7b1b4;font:7px var(--mono);letter-spacing:.12em}.usd-offer-kicker span:first-child{color:#ff7b87}.usd-offer-kicker i{display:inline-block;width:6px;height:6px;border-radius:50%;background:#ff293d;box-shadow:0 0 12px #ff293d;margin-right:7px} .usd-title{display:flex;flex-direction:column;margin:25px 0 17px;font:900 clamp(43px,5.4vw,82px)/.78 var(--display);letter-spacing:-.045em;text-transform:uppercase}.usd-title span:first-child{font-size:1.27em;color:#fff;text-shadow:0 3px 0 #8b8b8b,0 0 28px rgba(255,255,255,.12)}.usd-title span:nth-child(2){color:#f6eff0;text-shadow:0 0 25px rgba(255,41,61,.15)}.usd-title em{margin-top:7px;font-style:normal;font-size:.66em;color:#ff3c50;text-shadow:0 0 25px rgba(255,41,61,.3);letter-spacing:-.025em} .usd-subtitle{margin:0 0 22px;color:#cdbdc0;font-size:clamp(11px,1.15vw,14px);line-height:1.7}.usd-subtitle strong{color:white} .usd-price-panel{position:relative;isolation:isolate;overflow:hidden;padding:19px clamp(15px,2vw,25px) 16px;border:1px solid #ff4356;border-radius:19px;background:radial-gradient(ellipse at 50% 0%,rgba(255,31,50,.2),transparent 65%),linear-gradient(120deg,#17080b,#080607 68%);box-shadow:0 0 0 1px rgba(255,36,56,.08),0 0 28px rgba(255,26,48,.13),inset 0 1px rgba(255,255,255,.1);transition:box-shadow .35s,border-color .35s,transform .35s} .usd-price-panel:hover{border-color:#ff7d88;box-shadow:0 0 35px rgba(255,26,48,.25),inset 0 1px rgba(255,255,255,.15);transform:translateY(-2px)}.usd-price-top{position:relative;z-index:2;display:flex;justify-content:space-between;gap:12px;color:#b8a4a7;font:7px var(--mono);letter-spacing:.1em}.usd-price-status{color:#ff7380}.usd-price-main{position:relative;z-index:2;display:flex;align-items:center;gap:2px;margin:12px 0 4px;white-space:nowrap}.usd-dollar{align-self:flex-start;margin-top:13px;font:700 clamp(28px,3vw,44px)/1 var(--display);color:#ff3447}.usd-price-main strong{font:900 clamp(76px,9vw,125px)/.78 var(--display);letter-spacing:-.065em;color:#ff3b4e;text-shadow:0 0 28px rgba(255,41,61,.25)}.usd-month{align-self:flex-end;margin:0 0 5px 8px;color:white;font:800 clamp(14px,1.8vw,23px)/1 var(--display);letter-spacing:-.02em}.usd-price-foot{position:relative;z-index:2;display:flex;align-items:center;gap:11px;flex-wrap:wrap}.usd-price-foot del{color:#b4a6a8;font:700 20px var(--display);text-decoration-color:#ff5262;text-decoration-thickness:2px}.usd-price-foot span{color:#c5b1b4;font:7px var(--mono);letter-spacing:.12em}.usd-price-foot b{margin-left:auto;padding:5px 7px;border-radius:4px;background:#ff293d1b;color:#ff8490;font:7px var(--mono);letter-spacing:.05em}.usd-price-sweep{position:absolute;z-index:1;top:-80%;bottom:-80%;left:-35%;width:25%;transform:rotate(20deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.09),transparent);animation:usdSweep 6s ease-in-out infinite;pointer-events:none} .usd-service-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin:15px 0 0}.usd-service{position:relative;min-width:0;min-height:110px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;padding:11px 5px;border:1px solid rgba(255,255,255,.12);border-radius:13px;background:linear-gradient(150deg,rgba(26,19,21,.9),rgba(8,7,8,.97));color:#f8eff0;text-align:center;cursor:pointer;overflow:hidden;transition:transform .28s,border-color .28s,background .28s,box-shadow .28s} .usd-service:before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 0%,rgba(255,41,61,.28),transparent 70%);opacity:0;transition:opacity .28s}.usd-service:hover,.usd-service:focus-visible,.usd-service.is-active{transform:translateY(-4px);border-color:rgba(255,71,88,.8);box-shadow:0 8px 25px rgba(255,20,45,.13);outline:none}.usd-service:hover:before,.usd-service:focus-visible:before,.usd-service.is-active:before{opacity:1}.usd-service-icon{position:relative;z-index:1;color:#ff4355;font-size:23px;line-height:1;text-shadow:0 0 15px rgba(255,41,61,.4)}.usd-service b{position:relative;z-index:1;font:800 clamp(10px,.95vw,13px)/1.08 var(--display);text-transform:uppercase}.usd-service small{position:relative;z-index:1;max-height:0;overflow:hidden;opacity:0;color:#bfa9ad;font-size:8px;line-height:1.3;transition:max-height .3s,opacity .3s}.usd-service:hover small,.usd-service:focus-visible small,.usd-service.is-active small{max-height:30px;opacity:1} .usd-service-detail{display:grid;grid-template-columns:auto 1fr;column-gap:10px;align-items:center;margin-top:12px;padding:12px 14px;border-left:2px solid #ff3447;background:linear-gradient(90deg,rgba(255,41,61,.09),transparent 80%);min-height:67px}.usd-detail-pulse{grid-row:1/4;width:7px;height:7px;border-radius:50%;background:#ff3447;box-shadow:0 0 12px #ff3447}.usd-detail-label{color:#ff7984;font:7px var(--mono);letter-spacing:.13em}.usd-service-detail strong{margin-top:3px;color:#f8edef;font:700 14px var(--display);letter-spacing:.03em}.usd-service-detail p{margin:3px 0 0;color:#b8a4a7;font-size:10px;line-height:1.5} .usd-primary-cta{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:15px;margin-top:14px;padding:14px 17px;border:1px solid #ff8b95;border-radius:999px;background:linear-gradient(100deg,#b40e26,#ff293d 55%,#ff5c6c);color:#fff;box-shadow:0 0 25px rgba(255,41,61,.25),inset 0 1px rgba(255,255,255,.22);transition:transform .28s,box-shadow .28s,filter .28s}.usd-primary-cta:before{content:"";position:absolute;z-index:-1;inset:0;transform:translateX(-110%);background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent);transition:transform .55s}.usd-primary-cta:hover,.usd-primary-cta:focus-visible{transform:translateY(-3px) scale(1.005);box-shadow:0 0 38px rgba(255,41,61,.5),0 0 70px rgba(255,41,61,.2);filter:brightness(1.08);outline:none}.usd-primary-cta:hover:before{transform:translateX(110%)}.usd-primary-cta span{display:flex;flex-direction:column;gap:4px}.usd-primary-cta small{font:7px var(--mono);letter-spacing:.14em;color:#ffe1e4}.usd-primary-cta strong{font:800 16px var(--display);letter-spacing:.045em}.usd-primary-cta>b{font:27px var(--body);font-weight:400} .usd-guarantees{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px 14px;margin-top:16px;color:#d6c6c8;font:7px var(--mono);letter-spacing:.035em}.usd-guarantees span{display:flex;align-items:center;gap:6px}.usd-guarantees b{display:grid;place-items:center;width:15px;height:15px;border:1px solid #ff475a;border-radius:50%;color:#ff6876;font-size:9px} .usd-section-signoff{display:flex;justify-content:space-between;gap:14px;align-items:center;margin:-55px 0 85px;padding-top:14px;border-top:1px solid rgba(255,67,84,.25);color:#958185;font:7px var(--mono);letter-spacing:.13em}.usd-section-signoff b{color:#ff6b79;font-weight:400} @keyframes usdScan{0%{transform:translateY(0);opacity:0}10%{opacity:.7}90%{opacity:.7}100%{transform:translateY(620px);opacity:0}}@keyframes usdBlink{0%,100%{opacity:1}50%{opacity:.35}}@keyframes usdRadar{0%,100%{transform:translate(-50%,-50%) scale(.96);opacity:.45}50%{transform:translate(-50%,-50%) scale(1.06);opacity:.9}}@keyframes usdFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}@keyframes usdSweep{0%,45%{left:-35%}75%,100%{left:130%}} @media(max-width:1050px){.pricing-why-section .usd-experience{grid-template-columns:minmax(250px,.72fr) minmax(0,1.28fr);gap:13px}.usd-mascot-panel{min-height:600px}.usd-offer-panel{padding:24px 20px}.usd-title{font-size:clamp(42px,5.3vw,65px)}.usd-price-main strong{font-size:clamp(70px,8vw,100px)}.usd-service-grid{gap:5px}.usd-service{min-height:98px;padding:9px 3px}.usd-guarantees{gap:8px}} @media(max-width:760px){.pricing-why-section .usd-experience{grid-template-columns:1fr;gap:14px}.usd-mascot-panel{min-height:clamp(390px,110vw,570px);max-width:none}.usd-mascot-crop img{width:210%;object-position:left center}.usd-offer-panel{padding:clamp(20px,5vw,30px)}.usd-title{font-size:clamp(49px,11vw,82px)}.usd-price-main strong{font-size:clamp(90px,22vw,135px)}.usd-service{min-height:105px}.usd-service b{font-size:clamp(10px,2.5vw,14px)}.usd-service small{max-height:30px;opacity:1}.usd-section-signoff{margin:-40px 0 58px;flex-wrap:wrap}.usd-scanline{animation-duration:9s}} @media(max-width:460px){.usd-panel-meta{left:17px;right:17px;top:18px;font-size:6px}.usd-mascot-panel{min-height:390px;border-radius:18px}.usd-mascot-crop{inset:35px 0 0}.usd-mascot-crop img{width:220%}.usd-mascot-callout{left:15px;right:15px;bottom:56px;padding:10px}.usd-mascot-bottom{left:17px;right:17px;bottom:17px;font-size:6px}.usd-side-chip{right:11px;font-size:6px}.usd-offer-kicker{font-size:6px}.usd-title{font-size:clamp(43px,12vw,57px)}.usd-subtitle{font-size:11px}.usd-price-panel{padding:16px 12px 13px}.usd-price-main strong{font-size:clamp(78px,22vw,100px)}.usd-dollar{font-size:28px}.usd-month{font-size:13px;margin-left:4px}.usd-price-foot span{font-size:6px}.usd-price-foot b{font-size:6px}.usd-service-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.usd-service{min-height:97px}.usd-service:nth-child(4),.usd-service:nth-child(5){grid-column:span 1}.usd-service-detail p{font-size:9px}.usd-guarantees{font-size:6px}.usd-primary-cta strong{font-size:14px}} @media(prefers-reduced-motion:reduce){.usd-scanline,.usd-live i,.usd-price-status i,.usd-radar,.usd-side-chip,.usd-price-sweep{animation:none!important}.usd-mascot-panel,.usd-offer-panel,.usd-service,.usd-primary-cta{transition:none!important}} /* Premium mascot integration: isolated transparent character, parallax depth, holographic stage */ .usd-mascot-panel{overflow:hidden;background:radial-gradient(ellipse at 50% 54%,rgba(255,25,46,.22),transparent 43%),radial-gradient(ellipse at 50% 100%,rgba(255,25,46,.16),transparent 42%),linear-gradient(145deg,#12080b 0%,#070607 65%,#100609 100%);} .usd-mascot-panel:after{z-index:4;top:46%;} .usd-mascot-crop{inset:58px 0 42px;overflow:visible;mask-image:linear-gradient(to bottom,transparent 0%,#000 7%,#000 88%,transparent 100%);} .usd-mascot-crop:before{content:"";position:absolute;z-index:0;inset:0;background:repeating-linear-gradient(90deg,transparent 0 36px,rgba(255,35,55,.045) 37px,transparent 38px),linear-gradient(180deg,transparent 35%,rgba(255,26,47,.12) 73%,transparent 100%);opacity:.85;} .usd-mascot-crop:after{z-index:3;background:linear-gradient(90deg,rgba(5,5,6,.15),transparent 20%,transparent 72%,rgba(5,5,6,.2)),linear-gradient(0deg,#080607 0%,rgba(8,6,7,.12) 16%,transparent 35%);} .usd-mascot-crop img{z-index:2;inset:auto auto 0 50%;width:auto;height:108%;max-width:112%;object-fit:contain;object-position:center bottom;transform:translateX(-50%) translateY(7px) scale(1.035);transform-origin:center bottom;filter:drop-shadow(0 22px 22px rgba(0,0,0,.65)) drop-shadow(0 0 13px rgba(255,28,48,.19)) saturate(1.05) contrast(1.04);animation:usdMascotFloat 6s ease-in-out infinite;transition:filter .45s,transform .45s;} .usd-mascot-panel:hover .usd-mascot-crop img{transform:translateX(-50%) translateY(-2px) scale(1.07);filter:drop-shadow(0 28px 30px rgba(0,0,0,.65)) drop-shadow(0 0 25px rgba(255,28,48,.35)) saturate(1.12) contrast(1.06);} .usd-stage-beams{position:absolute;z-index:0;inset:0;overflow:hidden;pointer-events:none;perspective:500px;} .usd-stage-beams i{position:absolute;top:-12%;bottom:12%;width:1px;background:linear-gradient(180deg,transparent,rgba(255,37,57,.04),rgba(255,41,61,.58),transparent);box-shadow:0 0 13px rgba(255,35,55,.23);transform:rotate(18deg);animation:usdBeamPulse 4.8s ease-in-out infinite;} .usd-stage-beams i:nth-child(1){left:24%;height:80%;}.usd-stage-beams i:nth-child(2){left:54%;height:95%;animation-delay:-1.6s}.usd-stage-beams i:nth-child(3){left:79%;height:74%;animation-delay:-3.2s} .usd-stage-platform{position:absolute;z-index:1;left:13%;right:9%;bottom:33px;height:95px;border:1px solid rgba(255,48,66,.52);border-radius:50%;transform:rotate(-8deg) perspective(500px) rotateX(62deg);background:radial-gradient(ellipse,rgba(255,28,48,.2),rgba(255,25,44,.04) 48%,transparent 70%);box-shadow:0 0 30px rgba(255,24,45,.18),inset 0 0 25px rgba(255,28,48,.12);animation:usdPlatformPulse 4s ease-in-out infinite;pointer-events:none;} .usd-hud-float{position:absolute;z-index:4;display:flex;flex-direction:column;gap:5px;min-width:105px;padding:10px 12px;border:1px solid rgba(255,64,81,.38);border-radius:9px;background:linear-gradient(140deg,rgba(20,12,14,.84),rgba(6,6,7,.72));backdrop-filter:blur(12px);box-shadow:0 8px 28px rgba(0,0,0,.25),0 0 22px rgba(255,30,48,.08);font-family:var(--mono);transform:translateZ(40px);animation:usdHudDrift 5.5s ease-in-out infinite;pointer-events:none;} .usd-hud-float span{font-size:6px;letter-spacing:.13em;color:#c8aeb2}.usd-hud-float b{font-size:13px;letter-spacing:.04em;color:#fff}.usd-hud-float i{position:absolute;right:10px;top:11px;width:5px;height:5px;border-radius:50%;background:#ff354b;box-shadow:0 0 10px #ff354b}.usd-hud-a{top:28%;left:18px}.usd-hud-b{top:54%;right:15px;animation-delay:-2.7s}.usd-hud-b b{color:#ff6574;font-size:10px} @keyframes usdMascotFloat{0%,100%{translate:0 0}50%{translate:0 -8px}} @keyframes usdBeamPulse{0%,100%{opacity:.22}50%{opacity:.8}} @keyframes usdPlatformPulse{0%,100%{opacity:.55;scale:.98}50%{opacity:1;scale:1.03}} @keyframes usdHudDrift{0%,100%{translate:0 0}50%{translate:0 -9px}} @media(max-width:760px){.usd-mascot-crop{inset:48px 0 38px}.usd-mascot-crop img{height:104%;max-width:120%;transform:translateX(-50%) translateY(5px) scale(1.02)}.usd-mascot-panel:hover .usd-mascot-crop img{transform:translateX(-50%) translateY(0) scale(1.04)}.usd-hud-a{left:12px;top:26%}.usd-hud-b{right:10px;top:52%}.usd-hud-float{min-width:88px;padding:8px}.usd-stage-platform{bottom:25px;height:70px}} @media(max-width:460px){.usd-mascot-crop img{height:98%;max-width:132%}.usd-hud-float{min-width:76px;padding:7px 8px}.usd-hud-float span{font-size:5px}.usd-hud-float b{font-size:10px}.usd-hud-a{top:27%;left:8px}.usd-hud-b{top:50%;right:8px}.usd-stage-platform{left:8%;right:5%;bottom:22px}} @media(prefers-reduced-motion:reduce){.usd-mascot-crop img,.usd-stage-beams i,.usd-stage-platform,.usd-hud-float{animation:none!important}} /* USD interactive campaign: preserve the exact mascot artwork from the supplied reference, but build the pricing, services and conversion journey as real webpage elements. */ .usd-mascot-crop img.usd-mascot-reference-art{width:100%;height:100%;max-width:none;object-fit:cover;object-position:center center;transform:scale(1.015);filter:saturate(1.06) contrast(1.04);transition:transform .75s cubic-bezier(.2,.8,.2,1),filter .75s;} .usd-mascot-panel:hover .usd-mascot-crop img.usd-mascot-reference-art{transform:scale(1.055) translateY(-.3%);filter:saturate(1.14) contrast(1.06);} .usd-mascot-panel .usd-radar{left:39%;top:24%;width:clamp(110px,13vw,178px);border-color:rgba(255,40,61,.62);box-shadow:0 0 0 12px rgba(255,42,62,.065),0 0 0 25px rgba(255,42,62,.035),0 0 32px rgba(255,35,58,.13),inset 0 0 25px rgba(255,42,62,.08)} .usd-mascot-panel .usd-radar-b{width:clamp(170px,19vw,245px);} .usd-service-detail{grid-template-columns:auto 1fr;} .usd-service-detail #usd-detail-link{grid-column:2;justify-self:start;margin-top:7px;color:#ff7884;font:700 8px var(--mono);letter-spacing:.09em;text-decoration:none;transition:color .2s,text-shadow .2s,transform .2s;} .usd-service-detail #usd-detail-link:hover{color:#fff;text-shadow:0 0 14px rgba(255,55,76,.65);transform:translateX(3px)} .usd-plan-details{margin-top:11px;border:1px solid rgba(255,64,81,.2);border-radius:12px;background:rgba(255,255,255,.018);overflow:hidden;} .usd-plan-details summary{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 15px;cursor:pointer;list-style:none;color:#e9dfe0;font:700 8px var(--mono);letter-spacing:.1em;} .usd-plan-details summary::-webkit-details-marker{display:none}.usd-plan-details summary span{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;border:1px solid rgba(255,64,81,.42);color:#ff5b6c;font:16px var(--body);transition:transform .25s,background .25s,color .25s}.usd-plan-details[open] summary span{transform:rotate(45deg);background:#ff293d;color:#fff} .usd-plan-details>div{padding:0 15px 15px;color:#bca9ac;font-size:11px;line-height:1.65;max-width:680px;animation:usdDetailsIn .28s ease both} @keyframes usdDetailsIn{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}} @media(max-width:760px){.usd-mascot-crop img.usd-mascot-reference-art{width:100%;height:100%;object-fit:cover;object-position:center center;transform:scale(1.01)}.usd-mascot-panel:hover .usd-mascot-crop img.usd-mascot-reference-art{transform:scale(1.035)}.usd-mascot-panel .usd-radar{left:39%;top:23%;}} /* UDS pricing polish: use the original transparent mascot asset, never a flattened campaign composite. */ #usd-experience .usd-scanline{display:none!important} #usd-experience .usd-mascot-crop{inset:55px 8px 52px;overflow:hidden;mask-image:linear-gradient(to bottom,transparent 0%,#000 5%,#000 88%,transparent 100%);} #usd-experience .usd-mascot-crop:after{background:linear-gradient(90deg,rgba(5,5,6,.06),transparent 18%,transparent 82%,rgba(5,5,6,.08)),linear-gradient(0deg,#080607 0%,rgba(8,6,7,.08) 14%,transparent 30%);} #usd-experience .usd-mascot-crop img.usd-mascot-character{position:absolute;z-index:2;left:50%;right:auto;top:auto;bottom:0;width:auto;height:108%;max-width:100%;max-height:none;object-fit:contain;object-position:center bottom;transform:translateX(-50%) translateY(4px);transform-origin:center bottom;filter:drop-shadow(0 24px 28px rgba(0,0,0,.62)) drop-shadow(0 0 18px rgba(255,28,48,.16));animation:usdMascotFloat 6s ease-in-out infinite;transition:transform .5s cubic-bezier(.2,.8,.2,1),filter .5s;} #usd-experience .usd-mascot-panel:hover .usd-mascot-crop img.usd-mascot-character{transform:translateX(-50%) translateY(-3px) scale(1.025);filter:drop-shadow(0 28px 32px rgba(0,0,0,.68)) drop-shadow(0 0 28px rgba(255,28,48,.3));} #usd-experience .usd-mascot-panel{isolation:isolate;background:radial-gradient(ellipse at 50% 62%,rgba(255,25,46,.22),transparent 48%),linear-gradient(145deg,#12080b 0%,#070607 65%,#100609 100%);} #usd-experience .usd-mascot-crop{z-index:2;} #usd-experience .usd-radar,#usd-experience .usd-stage-beams,#usd-experience .usd-stage-platform{z-index:1;} #usd-experience .usd-title span:first-child{letter-spacing:-.06em;} @media(max-width:760px){#usd-experience .usd-mascot-crop{inset:48px 4px 45px;}#usd-experience .usd-mascot-crop img.usd-mascot-character{height:106%;max-width:100%;}} @media(max-width:460px){#usd-experience .usd-mascot-crop{inset:42px 2px 48px;}#usd-experience .usd-mascot-crop img.usd-mascot-character{height:101%;max-width:100%;}} /* UDS campaign — match the supplied wide composition, while all offer copy and controls remain live HTML. */ #pricing .pricing-why-wrap{max-width:1540px!important;width:calc(100% - 32px)!important;padding-top:22px!important} #pricing .pricing-why-top{display:none!important} #pricing .usd-experience{position:relative!important;display:grid!important;grid-template-columns:minmax(0, .91fr) minmax(0, 1.09fr)!important;gap:0!important;min-height:820px!important;border:1px solid rgba(255,42,62,.45)!important;border-radius:18px!important;overflow:hidden!important;background:radial-gradient(ellipse at 92% 48%,rgba(255,25,43,.12),transparent 36%),radial-gradient(ellipse at 32% 54%,rgba(255,23,43,.11),transparent 38%),#050506!important;box-shadow:0 24px 90px rgba(0,0,0,.5),0 0 45px rgba(255,23,43,.08)!important} #pricing .usd-experience:before{content:"";position:absolute;z-index:0;inset:0;pointer-events:none;background:radial-gradient(ellipse at 52% 100%,rgba(255,26,46,.14),transparent 45%),linear-gradient(110deg,transparent 0 43%,rgba(255,30,48,.06) 50%,transparent 62%)} #pricing .usd-mascot-panel{position:relative!important;z-index:1!important;min-height:820px!important;height:100%!important;border:0!important;border-radius:0!important;overflow:hidden!important;background:#050506!important;box-shadow:none!important;isolation:isolate!important} #pricing .usd-mascot-panel:before{content:"";position:absolute;z-index:2;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(4,4,5,.08) 0%,transparent 45%,rgba(5,5,6,.2) 100%),linear-gradient(0deg,rgba(5,5,6,.28),transparent 28%)} #pricing .usd-mascot-panel:after{display:none!important} #pricing .usd-panel-meta,#pricing .usd-mascot-callout,#pricing .usd-hud-float,#pricing .usd-side-chip,#pricing .usd-mascot-bottom{display:none!important} #pricing .usd-radar,#pricing .usd-stage-beams,#pricing .usd-stage-platform{display:none!important} #pricing .usd-mascot-crop{position:absolute!important;inset:0!important;z-index:1!important;overflow:hidden!important;mask-image:none!important;-webkit-mask-image:none!important} #pricing .usd-mascot-crop:before,#pricing .usd-mascot-crop:after{display:none!important} #pricing .usd-mascot-crop img{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;object-fit:cover!important;object-position:left center!important;transform:scale(1.015)!important;transform-origin:center center!important;filter:saturate(1.05) contrast(1.03)!important;animation:none!important;transition:transform .7s cubic-bezier(.2,.8,.2,1),filter .7s!important} #pricing .usd-mascot-panel:hover .usd-mascot-crop img{transform:scale(1.045)!important;filter:saturate(1.12) contrast(1.05)!important} #pricing .usd-offer-panel{position:relative!important;z-index:1!important;align-self:stretch!important;min-width:0!important;padding:42px clamp(24px,3vw,48px) 30px!important;border:0!important;border-left:1px solid rgba(255,42,62,.16)!important;border-radius:0!important;background:linear-gradient(110deg,rgba(5,5,6,.2),rgba(8,5,7,.42))!important;box-shadow:none!important;backdrop-filter:none!important} #pricing .usd-offer-kicker{margin-bottom:28px!important} #pricing .usd-title{display:flex!important;flex-direction:column!important;gap:0!important;margin:0 0 14px!important;font-family:var(--display,'Anton',Impact,sans-serif)!important;font-size:clamp(58px,6.1vw,100px)!important;line-height:.79!important;letter-spacing:-.055em!important;text-transform:uppercase!important;text-shadow:0 2px 0 rgba(255,255,255,.08),0 0 28px rgba(255,34,54,.13)!important} #pricing .usd-title span:first-child{font-size:1.14em!important;letter-spacing:-.07em!important;color:#fff!important} #pricing .usd-title span:nth-child(2){font-size:.78em!important;letter-spacing:-.065em!important;color:#fff!important} #pricing .usd-title em{font-size:.47em!important;font-style:normal!important;letter-spacing:-.025em!important;color:#ff3448!important;line-height:1.02!important} #pricing .usd-subtitle{font-size:clamp(13px,1.15vw,17px)!important;line-height:1.5!important;margin:20px 0 24px!important;color:#eee!important} #pricing .usd-price-panel{position:relative!important;margin:0 0 20px!important;padding:22px 24px 18px!important;min-height:178px!important;border:1px solid #ff354a!important;border-radius:18px!important;background:radial-gradient(ellipse at 52% 100%,rgba(255,26,44,.23),transparent 65%),linear-gradient(130deg,rgba(18,5,8,.98),rgba(3,3,4,.95))!important;box-shadow:0 0 0 1px rgba(255,52,72,.08),0 0 28px rgba(255,27,46,.18),inset 0 0 35px rgba(255,20,40,.07)!important} #pricing .usd-price-main strong{font-size:clamp(72px,7.2vw,118px)!important;line-height:.84!important;letter-spacing:-.075em!important;text-shadow:0 0 24px rgba(255,38,56,.16)!important} #pricing .usd-service-grid{grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:9px!important;margin:18px 0 16px!important} #pricing .usd-service{min-height:126px!important;padding:13px 7px 11px!important;border-radius:14px!important;background:linear-gradient(145deg,rgba(25,20,22,.9),rgba(5,5,6,.95))!important;border:1px solid rgba(255,255,255,.13)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.025)!important;transition:transform .25s,border-color .25s,box-shadow .25s,background .25s!important} #pricing .usd-service:hover,#pricing .usd-service.is-active{transform:translateY(-4px)!important;border-color:rgba(255,48,67,.85)!important;background:linear-gradient(145deg,rgba(47,12,18,.96),rgba(7,5,6,.98))!important;box-shadow:0 0 22px rgba(255,29,48,.14),inset 0 0 20px rgba(255,29,48,.06)!important} #pricing .usd-service-icon{color:#ff3448!important;text-shadow:0 0 12px rgba(255,32,50,.55)!important} #pricing .usd-service b{font-size:clamp(8px,.72vw,11px)!important;line-height:1.2!important} #pricing .usd-service small{font-size:8px!important} #pricing .usd-service-detail{margin:0 0 12px!important;padding:12px 14px!important;border-left:2px solid #ff3046!important;background:linear-gradient(90deg,rgba(255,32,50,.08),transparent 80%)!important} #pricing .usd-plan-details{margin:10px 0 14px!important} #pricing .usd-primary-cta{min-height:76px!important;border-radius:999px!important;background:linear-gradient(100deg,#d90927 0%,#ff293e 52%,#ff5a68 100%)!important;box-shadow:0 0 0 1px rgba(255,255,255,.15) inset,0 0 25px rgba(255,28,48,.35),0 10px 30px rgba(0,0,0,.35)!important;transition:transform .25s,box-shadow .25s,filter .25s!important} #pricing .usd-primary-cta:hover{transform:translateY(-3px)!important;filter:brightness(1.08)!important;box-shadow:0 0 0 1px rgba(255,255,255,.24) inset,0 0 38px rgba(255,28,48,.58),0 15px 34px rgba(0,0,0,.4)!important} #pricing .usd-guarantees{margin-top:17px!important;font-size:clamp(6px,.55vw,9px)!important} #pricing .usd-section-signoff{display:none!important} @media(max-width:1000px){#pricing .usd-experience{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)!important;min-height:720px!important}#pricing .usd-mascot-panel{min-height:720px!important}#pricing .usd-offer-panel{padding:30px 20px 24px!important}#pricing .usd-title{font-size:clamp(54px,7vw,76px)!important}#pricing .usd-price-main strong{font-size:clamp(64px,8vw,92px)!important}#pricing .usd-service-grid{gap:5px!important}#pricing .usd-service{min-height:105px!important}} @media(max-width:700px){#pricing .pricing-why-wrap{width:calc(100% - 20px)!important}#pricing .usd-experience{grid-template-columns:1fr!important;min-height:0!important}#pricing .usd-mascot-panel{min-height:520px!important;height:520px!important;border-bottom:1px solid rgba(255,42,62,.22)!important}#pricing .usd-mascot-crop img{object-position:left center!important;object-fit:cover!important}#pricing .usd-offer-panel{padding:28px 18px 22px!important;border-left:0!important}#pricing .usd-title{font-size:clamp(60px,13vw,90px)!important}#pricing .usd-price-main strong{font-size:clamp(74px,18vw,110px)!important}#pricing .usd-service-grid{grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:5px!important}#pricing .usd-service{min-height:94px!important;padding:10px 3px!important}#pricing .usd-service b{font-size:7px!important}#pricing .usd-service small{display:none!important}#pricing .usd-guarantees{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;font-size:8px!important}} @media(max-width:430px){#pricing .usd-mascot-panel{height:430px!important;min-height:430px!important}#pricing .usd-service-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}#pricing .usd-service:nth-child(4),#pricing .usd-service:nth-child(5){grid-column:span 1!important}#pricing .usd-service{min-height:88px!important}#pricing .usd-title{font-size:58px!important}#pricing .usd-price-panel{padding:17px 13px!important}#pricing .usd-price-main strong{font-size:76px!important}} /* UDS art direction correction: open artwork blended into the section canvas, never a framed character card. */ #pricing{position:relative!important;isolation:isolate!important;overflow:hidden!important;background:radial-gradient(ellipse at 18% 48%,rgba(255,16,42,.16),transparent 38%),radial-gradient(ellipse at 78% 28%,rgba(255,16,42,.09),transparent 42%),#050506!important} #pricing:before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,rgba(4,4,5,.04),transparent 35%,rgba(4,4,5,.2) 100%),radial-gradient(ellipse at 35% 90%,rgba(255,20,40,.1),transparent 45%)} #pricing .pricing-why-wrap{max-width:1600px!important;width:calc(100% - 48px)!important} #pricing .usd-experience{border:0!important;border-radius:0!important;overflow:visible!important;background:transparent!important;box-shadow:none!important;grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr)!important;gap:clamp(8px,1.5vw,24px)!important;min-height:780px!important;isolation:isolate!important} #pricing .usd-experience:before{display:none!important} #pricing .usd-mascot-panel{position:relative!important;min-height:780px!important;height:100%!important;overflow:visible!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;isolation:isolate!important} #pricing .usd-mascot-panel:before,#pricing .usd-mascot-panel:after{display:none!important} #pricing .usd-mascot-crop{position:absolute!important;inset:-4% -5% -2% -8%!important;overflow:visible!important;z-index:0!important;background:transparent!important;mask-image:linear-gradient(to right,#000 0%,#000 54%,rgba(0,0,0,.82) 69%,rgba(0,0,0,.28) 86%,transparent 100%),linear-gradient(to bottom,transparent 0%,#000 7%,#000 88%,transparent 100%)!important;mask-composite:intersect!important;-webkit-mask-image:linear-gradient(to right,#000 0%,#000 54%,rgba(0,0,0,.82) 69%,rgba(0,0,0,.28) 86%,transparent 100%)!important} #pricing .usd-mascot-crop img{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:contain!important;object-position:center bottom!important;transform:scale(1.08)!important;transform-origin:center bottom!important;filter:saturate(1.08) contrast(1.04)!important;mix-blend-mode:screen!important;animation:uds-open-art-float 7s ease-in-out infinite!important;transition:transform .65s cubic-bezier(.2,.8,.2,1),filter .65s!important} #pricing .usd-mascot-panel:hover .usd-mascot-crop img{transform:scale(1.12) translateY(-5px)!important;filter:saturate(1.16) contrast(1.06)!important} #pricing .usd-offer-panel{position:relative!important;z-index:2!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;backdrop-filter:none!important;padding:38px clamp(12px,2vw,28px) 30px!important} #pricing .usd-offer-panel:before{content:"";position:absolute;z-index:-1;inset:0 -2% 0 -5%;pointer-events:none;background:radial-gradient(ellipse at 78% 20%,rgba(255,18,40,.09),transparent 44%),linear-gradient(90deg,transparent,rgba(5,5,6,.16) 18%,transparent 100%)} #pricing .usd-mascot-callout,#pricing .usd-panel-meta,#pricing .usd-mascot-bottom,#pricing .usd-hud-float,#pricing .usd-side-chip{z-index:3!important} @keyframes uds-open-art-float{0%,100%{translate:0 0}50%{translate:0 -8px}} @media(max-width:760px){#pricing .pricing-why-wrap{width:calc(100% - 22px)!important}#pricing .usd-experience{grid-template-columns:1fr!important;gap:0!important;min-height:0!important}#pricing .usd-mascot-panel{min-height:clamp(430px,112vw,620px)!important;height:clamp(430px,112vw,620px)!important}#pricing .usd-mascot-crop{inset:-3% -4% -4% -4%!important;mask-image:linear-gradient(to bottom,#000 0%,#000 78%,transparent 100%)!important;-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 78%,transparent 100%)!important}#pricing .usd-mascot-crop img{object-fit:contain!important;object-position:center bottom!important;transform:scale(1.02)!important;mix-blend-mode:screen!important}#pricing .usd-offer-panel{padding:18px 8px 24px!important}#pricing .usd-offer-panel:before{inset:0!important}} @media(prefers-reduced-motion:reduce){#pricing .usd-mascot-crop img{animation:none!important;transition:none!important}} /* Final open-artwork treatment: the campaign artwork bleeds beyond its former panel and fades into the page canvas. */ #pricing .usd-mascot-panel{position:relative!important;overflow:visible!important;background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;outline:0!important;min-height:820px!important;transform:translateX(-3%)!important} #pricing .usd-mascot-crop{position:absolute!important;inset:-8% -14% -7% -18%!important;overflow:visible!important;background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;mask:none!important;-webkit-mask:none!important;z-index:1!important;pointer-events:none!important} #pricing .usd-mascot-crop img{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;object-fit:cover!important;object-position:center center!important;border:0!important;border-radius:0!important;box-shadow:none!important;mix-blend-mode:screen!important;mask-image:radial-gradient(ellipse at 48% 48%,#000 35%,rgba(0,0,0,.92) 54%,rgba(0,0,0,.62) 68%,rgba(0,0,0,.22) 83%,transparent 100%)!important;-webkit-mask-image:radial-gradient(ellipse at 48% 48%,#000 35%,rgba(0,0,0,.92) 54%,rgba(0,0,0,.62) 68%,rgba(0,0,0,.22) 83%,transparent 100%)!important;transform:scale(1.14)!important;transform-origin:center center!important;filter:saturate(1.12) contrast(1.08) drop-shadow(0 0 26px rgba(255,18,40,.15))!important;animation:uds-open-art-float 7s ease-in-out infinite!important} #pricing .usd-mascot-panel:hover .usd-mascot-crop img{transform:scale(1.18) translateY(-5px)!important;filter:saturate(1.18) contrast(1.1) drop-shadow(0 0 36px rgba(255,18,40,.24))!important} #pricing .usd-experience{overflow:visible!important} #pricing .usd-offer-panel{z-index:3!important} @media(max-width:760px){#pricing .usd-mascot-panel{transform:none!important;min-height:clamp(440px,112vw,620px)!important;height:clamp(440px,112vw,620px)!important}#pricing .usd-mascot-crop{inset:-5% -9% -5% -9%!important}#pricing .usd-mascot-crop img{object-fit:cover!important;object-position:center center!important;transform:scale(1.05)!important;mask-image:radial-gradient(ellipse at 50% 45%,#000 38%,rgba(0,0,0,.85) 62%,transparent 100%)!important;-webkit-mask-image:radial-gradient(ellipse at 50% 45%,#000 38%,rgba(0,0,0,.85) 62%,transparent 100%)!important}} /* FIX: contain the pricing artwork to its own left column so it blends into the canvas without covering copy. */ #pricing{overflow:clip!important;} #pricing .pricing-why-wrap{width:min(1500px,calc(100% - 64px))!important;max-width:1500px!important;margin-inline:auto!important;} #pricing .usd-experience{display:grid!important;grid-template-columns:minmax(0,0.92fr) minmax(0,1.08fr)!important;gap:clamp(12px,2vw,30px)!important;min-height:clamp(660px,58vw,820px)!important;overflow:visible!important;align-items:stretch!important;} #pricing .usd-mascot-panel{grid-column:1!important;grid-row:1!important;position:relative!important;min-width:0!important;width:100%!important;min-height:0!important;height:100%!important;transform:none!important;overflow:visible!important;z-index:0!important;} #pricing .usd-mascot-crop{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;overflow:hidden!important;z-index:0!important;pointer-events:none!important;background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;mask:none!important;-webkit-mask:none!important;} #pricing .usd-mascot-crop img{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;max-width:100%!important;max-height:100%!important;object-fit:contain!important;object-position:center bottom!important;transform:none!important;transform-origin:center bottom!important;border:0!important;border-radius:0!important;box-shadow:none!important;mix-blend-mode:screen!important;mask-image:linear-gradient(90deg,#000 0%,#000 55%,rgba(0,0,0,.8) 70%,rgba(0,0,0,.28) 88%,transparent 100%),linear-gradient(0deg,transparent 0%,#000 12%,#000 88%,rgba(0,0,0,.75) 100%)!important;mask-composite:intersect!important;-webkit-mask-image:linear-gradient(90deg,#000 0%,#000 55%,rgba(0,0,0,.8) 70%,rgba(0,0,0,.28) 88%,transparent 100%)!important;filter:saturate(1.08) contrast(1.04)!important;animation:uds-open-art-float 7s ease-in-out infinite!important;} #pricing .usd-mascot-panel:hover .usd-mascot-crop img{transform:translateY(-4px) scale(1.015)!important;filter:saturate(1.12) contrast(1.05)!important;} #pricing .usd-offer-panel{grid-column:2!important;grid-row:1!important;position:relative!important;z-index:2!important;min-width:0!important;width:100%!important;padding:38px clamp(12px,2vw,28px) 30px!important;} #pricing .usd-mascot-callout,#pricing .usd-panel-meta,#pricing .usd-mascot-bottom,#pricing .usd-hud-float,#pricing .usd-side-chip{max-width:100%!important;} @media(max-width:760px){#pricing .pricing-why-wrap{width:calc(100% - 24px)!important}#pricing .usd-experience{grid-template-columns:minmax(0,1fr)!important;gap:0!important;min-height:0!important}#pricing .usd-mascot-panel{grid-column:1!important;grid-row:1!important;height:clamp(400px,108vw,580px)!important;min-height:clamp(400px,108vw,580px)!important;transform:none!important}#pricing .usd-mascot-crop{inset:0!important}#pricing .usd-mascot-crop img{object-fit:contain!important;object-position:center bottom!important;transform:none!important;mask-image:linear-gradient(0deg,transparent 0%,#000 12%,#000 82%,transparent 100%)!important;-webkit-mask-image:linear-gradient(0deg,transparent 0%,#000 12%,#000 82%,transparent 100%)!important}#pricing .usd-offer-panel{grid-column:1!important;grid-row:2!important;padding:20px 8px 24px!important}} /* UDS immersive 3D scene: live page content with a parallax character stage, never a banner/card. */ #pricing{overflow:hidden!important;background:#050506!important;isolation:isolate!important;} #pricing .pricing-why-wrap{width:min(1560px,calc(100% - 56px))!important;max-width:1560px!important;} #pricing .usd-experience{display:grid!important;grid-template-columns:minmax(0,0.88fr) minmax(0,1.12fr)!important;gap:clamp(18px,2.4vw,42px)!important;align-items:stretch!important;min-height:clamp(700px,62vw,900px)!important;overflow:visible!important;background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;perspective:1600px!important;} #pricing .usd-mascot-panel{grid-column:1!important;grid-row:1!important;position:relative!important;isolation:isolate!important;min-width:0!important;width:100%!important;height:100%!important;min-height:clamp(700px,62vw,900px)!important;overflow:visible!important;transform-style:preserve-3d!important;transform:perspective(1500px) rotateX(var(--scene-rx,0deg)) rotateY(var(--scene-ry,0deg))!important;transition:transform .16s ease-out!important;background:transparent!important;border:0!important;border-radius:0!important;outline:0!important;box-shadow:none!important;} #pricing .usd-mascot-panel:before{content:""!important;display:block!important;position:absolute!important;inset:8% -6% 4% -12%!important;z-index:-1!important;pointer-events:none!important;background:radial-gradient(ellipse at 46% 46%,rgba(255,18,42,.25),transparent 50%),radial-gradient(ellipse at 40% 70%,rgba(255,25,42,.14),transparent 60%)!important;filter:blur(22px)!important;} #pricing .usd-mascot-panel:after{content:""!important;display:block!important;position:absolute!important;inset:0 -10% 0 -8%!important;z-index:4!important;pointer-events:none!important;background:linear-gradient(90deg,transparent 48%,rgba(5,5,6,.2) 70%,#050506 100%),linear-gradient(0deg,#050506 0%,transparent 10%,transparent 85%,rgba(5,5,6,.4) 100%)!important;} #pricing .usd-mascot-crop{position:absolute!important;inset:-2% -8% -3% -8%!important;width:auto!important;height:auto!important;overflow:hidden!important;z-index:0!important;pointer-events:none!important;background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;transform:translateZ(-28px)!important;transform-style:preserve-3d!important;mask:none!important;-webkit-mask:none!important;} #pricing .usd-mascot-crop img{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;object-fit:cover!important;object-position:center center!important;transform:translate3d(calc(var(--scene-x,0px)*-.35),calc(var(--scene-y,0px)*-.25),0) scale(1.04)!important;transform-origin:center center!important;border:0!important;border-radius:0!important;box-shadow:none!important;mix-blend-mode:screen!important;mask:none!important;-webkit-mask:none!important;filter:saturate(1.12) contrast(1.07) drop-shadow(0 0 32px rgba(255,20,42,.16))!important;animation:uds-scene-breathe 7s ease-in-out infinite!important;transition:filter .4s ease!important;} #pricing .usd-mascot-panel:hover .usd-mascot-crop img{filter:saturate(1.2) contrast(1.1) drop-shadow(0 0 48px rgba(255,20,42,.28))!important;} #pricing .usd-panel-meta{position:absolute!important;top:16px!important;left:6px!important;right:10px!important;z-index:8!important;display:flex!important;justify-content:space-between!important;gap:12px!important;font-size:9px!important;letter-spacing:.12em!important;color:rgba(255,255,255,.6)!important;text-shadow:0 2px 10px #000!important;transform:translateZ(55px)!important;} #pricing .usd-radar{z-index:2!important;transform:translateZ(35px)!important;pointer-events:none!important;} #pricing .usd-radar-a{left:40%!important;top:20%!important;width:clamp(110px,15vw,210px)!important;height:clamp(110px,15vw,210px)!important;border:1px solid rgba(255,45,65,.65)!important;border-radius:50%!important;box-shadow:0 0 28px rgba(255,24,45,.18),inset 0 0 28px rgba(255,24,45,.1)!important;animation:uds-radar-pulse 3.8s ease-out infinite!important;} #pricing .usd-radar-b{left:40%!important;top:20%!important;width:clamp(70px,9vw,132px)!important;height:clamp(70px,9vw,132px)!important;border:1px solid rgba(255,45,65,.5)!important;border-radius:50%!important;animation:uds-radar-pulse 3.8s ease-out 1.1s infinite!important;} #pricing .usd-stage-beams{z-index:1!important;transform:translateZ(18px)!important;opacity:.8!important;} #pricing .usd-stage-platform{z-index:2!important;transform:translateZ(60px) rotateX(66deg)!important;bottom:4%!important;left:10%!important;width:78%!important;height:15%!important;border-radius:50%!important;border:1px solid rgba(255,43,62,.7)!important;background:radial-gradient(ellipse,rgba(255,28,45,.2),rgba(4,4,5,.05) 60%,transparent 72%)!important;box-shadow:0 0 35px rgba(255,18,42,.2),inset 0 0 25px rgba(255,18,42,.15)!important;} #pricing .usd-hud-float,#pricing .usd-side-chip,#pricing .usd-mascot-callout,#pricing .usd-mascot-bottom{z-index:9!important;transform:translateZ(75px)!important;} #pricing .usd-hud-float{background:rgba(8,7,9,.72)!important;border:1px solid rgba(255,49,69,.35)!important;backdrop-filter:blur(10px)!important;box-shadow:0 0 24px rgba(255,20,42,.1)!important;animation:uds-hud-drift 5s ease-in-out infinite!important;} #pricing .usd-hud-b{animation-delay:-2.2s!important;} #pricing .usd-mascot-callout{background:rgba(8,7,9,.82)!important;border:1px solid rgba(255,49,69,.4)!important;backdrop-filter:blur(10px)!important;} #pricing .usd-mascot-bottom{bottom:5px!important;left:8px!important;right:10px!important;} #pricing .usd-offer-panel{grid-column:2!important;grid-row:1!important;min-width:0!important;width:100%!important;position:relative!important;z-index:5!important;align-self:center!important;padding:clamp(22px,3vw,46px) clamp(4px,1vw,18px) 28px!important;background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;backdrop-filter:none!important;transform-style:preserve-3d!important;} #pricing .usd-offer-panel:before{inset:-2% -3% -2% -3%!important;background:radial-gradient(ellipse at 78% 14%,rgba(255,18,40,.12),transparent 42%),linear-gradient(90deg,rgba(5,5,6,.1),transparent 45%)!important;} #pricing .usd-title{font-size:clamp(56px,6.1vw,104px)!important;line-height:.84!important;letter-spacing:-.06em!important;text-wrap:balance!important;} #pricing .usd-title span,#pricing .usd-title em{display:block!important;} #pricing .usd-price-panel{margin-top:24px!important;} #pricing .usd-service-grid{position:relative!important;z-index:6!important;} #pricing .usd-service{transform-style:preserve-3d!important;} #pricing .usd-service:hover,#pricing .usd-service:focus-visible{transform:translateY(-6px) rotateX(4deg)!important;} #pricing .usd-service-detail{transition:opacity .25s,transform .25s!important;} #pricing .usd-service-detail.is-changing{animation:uds-detail-pop .32s ease both!important;} #pricing .usd-primary-cta{position:relative!important;overflow:hidden!important;} #pricing .usd-primary-cta:before{content:""!important;position:absolute!important;top:-60%!important;left:-40%!important;width:28%!important;height:220%!important;transform:rotate(22deg)!important;background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent)!important;transition:left .6s ease!important;pointer-events:none!important;} #pricing .usd-primary-cta:hover:before{left:120%!important;} @keyframes uds-scene-breathe{0%,100%{translate:0 0;scale:1}50%{translate:0 -7px;scale:1.008}} @keyframes uds-radar-pulse{0%{opacity:.75;scale:.8}80%,100%{opacity:0;scale:1.28}} @keyframes uds-hud-drift{0%,100%{translate:0 0}50%{translate:0 -9px}} @keyframes uds-detail-pop{from{opacity:.35;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}} @media(max-width:1000px){#pricing .usd-experience{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr)!important;min-height:740px!important}#pricing .usd-mascot-panel{min-height:740px!important}#pricing .usd-title{font-size:clamp(52px,7vw,78px)!important}} @media(max-width:760px){#pricing .pricing-why-wrap{width:calc(100% - 28px)!important}#pricing .usd-experience{grid-template-columns:minmax(0,1fr)!important;gap:0!important;min-height:0!important}#pricing .usd-mascot-panel{grid-column:1!important;grid-row:1!important;height:clamp(440px,110vw,600px)!important;min-height:clamp(440px,110vw,600px)!important;transform:none!important}#pricing .usd-mascot-crop{inset:-2% -4% 0 -4%!important}#pricing .usd-mascot-panel:after{background:linear-gradient(0deg,#050506 0%,transparent 15%,transparent 84%,rgba(5,5,6,.25) 100%)!important}#pricing .usd-mascot-crop img{object-fit:cover!important;object-position:center 42%!important;transform:translate3d(0,var(--scene-y,0px),0) scale(1.02)!important}#pricing .usd-offer-panel{grid-column:1!important;grid-row:2!important;padding:18px 4px 28px!important}#pricing .usd-title{font-size:clamp(58px,12vw,88px)!important}#pricing .usd-service-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px!important}#pricing .usd-service{min-height:96px!important}#pricing .usd-service:nth-child(4),#pricing .usd-service:nth-child(5){grid-column:span 1!important}#pricing .usd-mascot-bottom{bottom:8px!important}} @media(prefers-reduced-motion:reduce){#pricing .usd-mascot-crop img,#pricing .usd-radar,#pricing .usd-hud-float{animation:none!important}#pricing .usd-mascot-panel{transition:none!important}} /* UDS immersive full-width composition: artwork bleeds into the page, never a card */ #pricing{background:#050506!important;overflow:clip!important;position:relative!important;} #pricing:before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;background:radial-gradient(ellipse at 22% 44%,rgba(255,10,32,.16),transparent 43%),radial-gradient(ellipse at 76% 24%,rgba(120,0,15,.12),transparent 38%);} #pricing .pricing-why-wrap{position:relative;z-index:1;width:min(1760px,calc(100% - 64px))!important;max-width:1760px!important;} #pricing .pricing-why-top{position:relative;z-index:10;} #pricing .usd-experience{width:100%!important;grid-template-columns:minmax(0,1.02fr) minmax(0,1fr)!important;gap:clamp(12px,2vw,34px)!important;min-height:clamp(760px,68vw,1040px)!important;align-items:center!important;position:relative!important;isolation:isolate!important;} #pricing .usd-mascot-panel{height:100%!important;min-height:clamp(760px,68vw,1040px)!important;align-self:stretch!important;overflow:visible!important;clip-path:none!important;} #pricing .usd-mascot-panel:before{inset:-8% -14% -8% -14%!important;background:radial-gradient(ellipse at 48% 44%,rgba(255,15,38,.26),transparent 48%),radial-gradient(ellipse at 45% 72%,rgba(255,0,28,.18),transparent 55%)!important;filter:blur(34px)!important;} #pricing .usd-mascot-panel:after{inset:-2% -16% -2% -14%!important;background:linear-gradient(90deg,rgba(5,5,6,.03) 0%,transparent 55%,rgba(5,5,6,.35) 78%,#050506 100%),linear-gradient(0deg,#050506 0%,transparent 13%,transparent 88%,#050506 100%)!important;} #pricing .usd-mascot-crop{inset:-4% -12% -5% -12%!important;overflow:visible!important;background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;mask-image:linear-gradient(to right,transparent 0%,#000 8%,#000 68%,transparent 100%),linear-gradient(to bottom,transparent 0%,#000 8%,#000 82%,transparent 100%)!important;mask-composite:intersect!important;-webkit-mask-image:linear-gradient(to right,transparent 0%,#000 8%,#000 68%,transparent 100%),linear-gradient(to bottom,transparent 0%,#000 8%,#000 82%,transparent 100%)!important;-webkit-mask-composite:source-in!important;} #pricing .usd-mascot-crop img{object-fit:contain!important;object-position:center bottom!important;transform:translate3d(calc(var(--scene-x,0px)*-.22),calc(var(--scene-y,0px)*-.18),0) scale(1.12)!important;mix-blend-mode:screen!important;mask-image:radial-gradient(ellipse at 48% 48%,#000 52%,rgba(0,0,0,.92) 68%,transparent 100%)!important;-webkit-mask-image:radial-gradient(ellipse at 48% 48%,#000 52%,rgba(0,0,0,.92) 68%,transparent 100%)!important;filter:saturate(1.13) contrast(1.08) drop-shadow(0 0 35px rgba(255,15,40,.2))!important;} #pricing .usd-offer-panel{padding:clamp(26px,3.2vw,54px) clamp(4px,1vw,18px) 32px!important;} #pricing .usd-title{font-size:clamp(60px,6.5vw,112px)!important;} #pricing .usd-price-panel{backdrop-filter:blur(12px)!important;background:linear-gradient(120deg,rgba(20,5,8,.76),rgba(5,5,6,.66))!important;} @media(max-width:900px){#pricing .pricing-why-wrap{width:calc(100% - 32px)!important}#pricing .usd-experience{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)!important;min-height:760px!important}#pricing .usd-mascot-panel{min-height:760px!important}#pricing .usd-title{font-size:clamp(50px,7vw,76px)!important}} @media(max-width:680px){#pricing .usd-experience{grid-template-columns:minmax(0,1fr)!important;gap:0!important;min-height:0!important}#pricing .usd-mascot-panel{grid-column:1!important;grid-row:1!important;height:clamp(400px,112vw,580px)!important;min-height:clamp(400px,112vw,580px)!important;margin:0 -8px!important}#pricing .usd-mascot-crop{inset:-3% -4% -2% -4%!important}#pricing .usd-mascot-panel:after{background:linear-gradient(0deg,#050506 0%,transparent 20%,transparent 84%,#050506 100%)!important}#pricing .usd-mascot-crop img{object-fit:contain!important;object-position:center center!important;transform:translate3d(0,var(--scene-y,0px),0) scale(1.03)!important}#pricing .usd-offer-panel{grid-column:1!important;grid-row:2!important;padding:10px 2px 28px!important}#pricing .usd-title{font-size:clamp(56px,12vw,86px)!important}} /* Final artwork edge integration: no frame, no panel, fade the composite on every edge */ #pricing .usd-mascot-panel, #pricing .usd-mascot-panel:hover{ border:0!important;border-radius:0!important;outline:0!important; background:transparent!important;box-shadow:none!important; overflow:visible!important;clip-path:none!important; } #pricing .usd-mascot-panel:before{display:none!important;content:none!important;} #pricing .usd-mascot-panel:after{display:none!important;content:none!important;} #pricing .usd-mascot-crop{ inset:-5% -10% -6% -10%!important;overflow:visible!important; background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important; -webkit-mask-image:radial-gradient(ellipse 78% 78% at 50% 47%,#000 48%,rgba(0,0,0,.96) 59%,rgba(0,0,0,.68) 72%,rgba(0,0,0,.25) 86%,transparent 100%)!important; mask-image:radial-gradient(ellipse 78% 78% at 50% 47%,#000 48%,rgba(0,0,0,.96) 59%,rgba(0,0,0,.68) 72%,rgba(0,0,0,.25) 86%,transparent 100%)!important; } #pricing .usd-mascot-crop:before{display:none!important;content:none!important;} #pricing .usd-mascot-crop:after{display:none!important;content:none!important;} #pricing .usd-mascot-crop img.usd-mascot-character{ width:112%!important;height:112%!important;max-width:none!important;max-height:none!important; object-fit:contain!important;object-position:center bottom!important; -webkit-mask-image:radial-gradient(ellipse 78% 78% at 50% 47%,#000 48%,rgba(0,0,0,.96) 59%,rgba(0,0,0,.68) 72%,rgba(0,0,0,.25) 86%,transparent 100%)!important; mask-image:radial-gradient(ellipse 78% 78% at 50% 47%,#000 48%,rgba(0,0,0,.96) 59%,rgba(0,0,0,.68) 72%,rgba(0,0,0,.25) 86%,transparent 100%)!important; mix-blend-mode:screen!important;filter:saturate(1.12) contrast(1.08) drop-shadow(0 0 28px rgba(255,15,40,.16))!important; } #pricing .usd-mascot-panel .usd-panel-meta, #pricing .usd-mascot-panel .usd-hud-float, #pricing .usd-mascot-panel .usd-mascot-callout, #pricing .usd-mascot-panel .usd-side-chip, #pricing .usd-mascot-panel .usd-mascot-bottom{z-index:6!important;} @media(max-width:680px){ #pricing .usd-mascot-panel{min-height:clamp(400px,112vw,580px)!important;height:clamp(400px,112vw,580px)!important;margin:0!important;} #pricing .usd-mascot-crop{inset:-4% -8% -4% -8%!important;} #pricing .usd-mascot-crop img.usd-mascot-character{width:110%!important;height:108%!important;object-fit:contain!important;object-position:center bottom!important;} } /* FINAL RESET — immersive full-width UDS scene, not a framed image card */ #pricing{position:relative!important;isolation:isolate!important;background:#050506!important;overflow:hidden!important;padding-top:clamp(24px,3vw,52px)!important;} #pricing:before{content:""!important;position:absolute!important;inset:0!important;z-index:-1!important;pointer-events:none!important;background:radial-gradient(ellipse at 24% 38%,rgba(255,0,28,.16),transparent 43%),radial-gradient(ellipse at 82% 22%,rgba(110,0,18,.13),transparent 38%),linear-gradient(180deg,#050506 0%,#080607 55%,#050506 100%)!important;} #pricing .pricing-why-wrap{width:min(1800px,calc(100% - 56px))!important;max-width:1800px!important;position:relative!important;z-index:1!important;} #pricing .pricing-why-top{position:relative!important;z-index:8!important;} #pricing .usd-experience{display:block!important;position:relative!important;width:100%!important;min-height:clamp(760px,66vw,980px)!important;isolation:isolate!important;perspective:1400px!important;overflow:visible!important;} /* Art stage is an open, absolute layer; it is deliberately removed from the grid/card flow. */ #pricing .usd-mascot-panel{position:absolute!important;left:-3.2vw!important;top:-2%!important;bottom:-2%!important;width:59%!important;height:auto!important;min-height:0!important;margin:0!important;padding:0!important;z-index:0!important;overflow:visible!important;display:block!important;transform:perspective(1400px) rotateY(var(--scene-ry,0deg)) rotateX(var(--scene-rx,0deg)) translate3d(calc(var(--scene-x,0px)*.22),calc(var(--scene-y,0px)*.18),0)!important;transform-origin:48% 50%!important;transition:transform .18s ease-out!important;border:0!important;border-radius:0!important;outline:0!important;background:transparent!important;box-shadow:none!important;clip-path:none!important;} #pricing .usd-mascot-panel:before,#pricing .usd-mascot-panel:after{display:none!important;content:none!important;background:none!important;} #pricing .usd-mascot-crop{position:absolute!important;inset:-3% -2% -3% -2%!important;overflow:visible!important;border:0!important;border-radius:0!important;outline:0!important;background:transparent!important;box-shadow:none!important;mask:none!important;-webkit-mask:none!important;} #pricing .usd-mascot-crop:before,#pricing .usd-mascot-crop:after{display:none!important;content:none!important;} #pricing .usd-mascot-crop img.usd-mascot-character{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;object-fit:contain!important;object-position:left center!important;transform:translate3d(calc(var(--scene-x,0px)*-.12),calc(var(--scene-y,0px)*-.12),0) scale(1.08)!important;transform-origin:left center!important;mix-blend-mode:screen!important;opacity:1!important;filter:saturate(1.12) contrast(1.08) drop-shadow(0 0 30px rgba(255,12,35,.2))!important;-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 7%,#000 63%,rgba(0,0,0,.9) 72%,transparent 100%),linear-gradient(180deg,transparent 0%,#000 7%,#000 82%,transparent 100%)!important;mask-image:linear-gradient(90deg,transparent 0%,#000 7%,#000 63%,rgba(0,0,0,.9) 72%,transparent 100%),linear-gradient(180deg,transparent 0%,#000 7%,#000 82%,transparent 100%)!important;-webkit-mask-composite:source-in!important;mask-composite:intersect!important;} #pricing .usd-mascot-panel .usd-panel-meta{position:absolute!important;left:clamp(22px,3vw,52px)!important;right:clamp(10px,2vw,30px)!important;top:clamp(28px,3vw,50px)!important;z-index:5!important;} #pricing .usd-mascot-panel .usd-mascot-callout{z-index:5!important;left:clamp(22px,3vw,52px)!important;bottom:clamp(28px,3vw,50px)!important;} #pricing .usd-mascot-panel .usd-hud-float,#pricing .usd-mascot-panel .usd-side-chip,#pricing .usd-mascot-panel .usd-mascot-bottom{z-index:5!important;} #pricing .usd-offer-panel{position:relative!important;z-index:3!important;width:52%!important;margin-left:auto!important;padding:clamp(28px,3.2vw,56px) clamp(8px,1vw,18px) 30px!important;background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;backdrop-filter:none!important;} #pricing .usd-title{font-size:clamp(62px,6.3vw,112px)!important;line-height:.84!important;letter-spacing:-.055em!important;text-shadow:0 4px 0 rgba(255,255,255,.03),0 0 34px rgba(255,0,30,.15)!important;} #pricing .usd-price-panel{background:linear-gradient(115deg,rgba(22,4,8,.82),rgba(7,5,7,.74))!important;backdrop-filter:blur(14px)!important;box-shadow:0 0 0 1px rgba(255,255,255,.05) inset,0 0 32px rgba(255,0,30,.12)!important;} #pricing .usd-service-grid{position:relative!important;z-index:4!important;} #pricing .usd-service{transform:translateZ(0)!important;transition:transform .24s ease,border-color .24s ease,background .24s ease,box-shadow .24s ease!important;} #pricing .usd-service:hover,#pricing .usd-service:focus-visible{transform:translateY(-7px) rotateX(4deg)!important;box-shadow:0 14px 30px rgba(255,0,30,.18),0 0 0 1px rgba(255,45,65,.32) inset!important;} #pricing .usd-primary-cta{position:relative!important;z-index:4!important;} #pricing .usd-primary-cta:hover{transform:translateY(-4px) scale(1.008)!important;} #pricing .usd-radar{pointer-events:none!important;z-index:1!important;} #pricing .usd-stage-beams,#pricing .usd-stage-platform{pointer-events:none!important;} @media(max-width:900px){#pricing .pricing-why-wrap{width:calc(100% - 32px)!important}#pricing .usd-experience{min-height:760px!important}#pricing .usd-mascot-panel{left:-4vw!important;width:56%!important}#pricing .usd-offer-panel{width:55%!important;padding:28px 4px!important}#pricing .usd-title{font-size:clamp(50px,7vw,78px)!important}} @media(max-width:680px){#pricing .pricing-why-wrap{width:calc(100% - 28px)!important}#pricing .usd-experience{display:flex!important;flex-direction:column!important;min-height:0!important;gap:0!important}#pricing .usd-mascot-panel{position:relative!important;inset:auto!important;left:auto!important;top:auto!important;bottom:auto!important;width:calc(100% + 28px)!important;height:clamp(390px,108vw,560px)!important;min-height:0!important;margin:0 -14px -18px!important;transform:none!important;order:0!important;}#pricing .usd-mascot-crop{inset:-2% -2% -3% -2%!important}#pricing .usd-mascot-crop img.usd-mascot-character{object-position:center center!important;transform:scale(1.02)!important;-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 4%,#000 96%,transparent 100%),linear-gradient(180deg,transparent 0%,#000 5%,#000 83%,transparent 100%)!important;mask-image:linear-gradient(90deg,transparent 0%,#000 4%,#000 96%,transparent 100%),linear-gradient(180deg,transparent 0%,#000 5%,#000 83%,transparent 100%)!important}#pricing .usd-mascot-panel .usd-panel-meta{left:24px!important;top:24px!important}#pricing .usd-offer-panel{width:100%!important;margin:0!important;padding:14px 0 30px!important;order:1!important}#pricing .usd-title{font-size:clamp(58px,12vw,86px)!important}#pricing .usd-service-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px!important}#pricing .usd-service{min-height:94px!important}#pricing .usd-guarantees{grid-template-columns:repeat(2,minmax(0,1fr))!important}} @media(prefers-reduced-motion:reduce){#pricing .usd-mascot-panel,#pricing .usd-mascot-crop img.usd-mascot-character,#pricing .usd-service{transition:none!important;animation:none!important}} /* Reference-inspired edge-to-edge blend: artwork fades into the page on every side. */ #pricing .usd-mascot-panel, #pricing .usd-mascot-crop, #pricing .usd-mascot-crop img.usd-mascot-character{ border:0!important;outline:0!important;border-radius:0!important;box-shadow:none!important;background:transparent!important; } #pricing .usd-mascot-panel{overflow:visible!important;isolation:isolate!important;} #pricing .usd-mascot-crop{inset:-5% -7% -6% -7%!important;overflow:visible!important;} #pricing .usd-mascot-crop img.usd-mascot-character{ -webkit-mask-image:radial-gradient(ellipse 78% 76% at 48% 47%,#000 43%,rgba(0,0,0,.96) 57%,rgba(0,0,0,.7) 70%,rgba(0,0,0,.22) 84%,transparent 100%)!important; mask-image:radial-gradient(ellipse 78% 76% at 48% 47%,#000 43%,rgba(0,0,0,.96) 57%,rgba(0,0,0,.7) 70%,rgba(0,0,0,.22) 84%,transparent 100%)!important; -webkit-mask-repeat:no-repeat!important;mask-repeat:no-repeat!important; -webkit-mask-size:100% 100%!important;mask-size:100% 100%!important; -webkit-mask-composite:source-over!important;mask-composite:add!important; mix-blend-mode:screen!important;opacity:.98!important; filter:saturate(1.16) contrast(1.08) drop-shadow(0 0 36px rgba(255,10,36,.18))!important; } #pricing .usd-experience{overflow:visible!important;} #pricing .usd-offer-panel{z-index:5!important;} @media(max-width:680px){ #pricing .usd-mascot-crop{inset:-4% -5% -5% -5%!important;} #pricing .usd-mascot-crop img.usd-mascot-character{ -webkit-mask-image:radial-gradient(ellipse 88% 78% at 50% 46%,#000 48%,rgba(0,0,0,.92) 65%,rgba(0,0,0,.5) 82%,transparent 100%)!important; mask-image:radial-gradient(ellipse 88% 78% at 50% 46%,#000 48%,rgba(0,0,0,.92) 65%,rgba(0,0,0,.5) 82%,transparent 100%)!important; } } /* v9: use the supplied character/game-world artwork on the left only; the offer side remains real HTML and interactive. */ #pricing .usd-mascot-panel{width:61%!important;left:-2.5vw!important;top:-1%!important;bottom:-2%!important;} #pricing .usd-mascot-crop{inset:-3% -3% -4% -3%!important;} #pricing .usd-mascot-crop img.usd-mascot-character{ width:100%!important;height:100%!important;object-fit:cover!important;object-position:left center!important; -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 53%,rgba(0,0,0,.9) 66%,rgba(0,0,0,.48) 82%,transparent 100%),linear-gradient(180deg,transparent 0%,#000 11%,#000 80%,transparent 100%)!important; mask-image:linear-gradient(90deg,#000 0%,#000 53%,rgba(0,0,0,.9) 66%,rgba(0,0,0,.48) 82%,transparent 100%),linear-gradient(180deg,transparent 0%,#000 11%,#000 80%,transparent 100%)!important; -webkit-mask-composite:source-in!important;mask-composite:intersect!important; } #pricing .usd-offer-panel{width:54%!important;right:1.5%!important;} @media(max-width:900px){ #pricing .usd-mascot-panel{width:100%!important;left:0!important;top:-3%!important;bottom:auto!important;height:60vw!important;min-height:340px!important;} #pricing .usd-mascot-crop img.usd-mascot-character{object-position:left center!important;} #pricing .usd-offer-panel{width:100%!important;right:auto!important;} } /* FINAL OVERRIDE — open, oversized UDS artwork with live HTML offer on the right */ #pricing{position:relative!important;overflow:hidden!important;background:#050506!important;isolation:isolate!important;} #pricing .pricing-why-wrap{width:min(1600px,calc(100% - 56px))!important;max-width:1600px!important;} #pricing .usd-experience{position:relative!important;display:block!important;min-height:clamp(720px,64vw,940px)!important;overflow:visible!important;perspective:1400px!important;background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;} #pricing .usd-mascot-panel{position:absolute!important;left:-7.5vw!important;top:-3%!important;bottom:-4%!important;width:67%!important;height:auto!important;min-height:0!important;overflow:visible!important;isolation:isolate!important;z-index:1!important;transform-style:preserve-3d!important;transform:perspective(1500px) rotateX(var(--scene-rx,0deg)) rotateY(var(--scene-ry,0deg))!important;transition:transform .18s ease-out!important;background:transparent!important;border:0!important;border-radius:0!important;outline:0!important;box-shadow:none!important;} #pricing .usd-mascot-panel:before{content:""!important;position:absolute!important;inset:8% -4% 3% 0!important;z-index:-1!important;pointer-events:none!important;background:radial-gradient(ellipse at 48% 45%,rgba(255,18,42,.24),transparent 51%),radial-gradient(ellipse at 42% 72%,rgba(255,24,42,.14),transparent 64%)!important;filter:blur(32px)!important;} #pricing .usd-mascot-panel:after{content:""!important;position:absolute!important;inset:-2% -2% -3% -2%!important;z-index:3!important;pointer-events:none!important;background:linear-gradient(90deg,transparent 0%,transparent 49%,rgba(5,5,6,.22) 64%,rgba(5,5,6,.72) 81%,#050506 100%),linear-gradient(0deg,#050506 0%,rgba(5,5,6,.1) 15%,transparent 35%,transparent 83%,rgba(5,5,6,.45) 100%)!important;} #pricing .usd-mascot-crop{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;overflow:hidden!important;z-index:0!important;pointer-events:none!important;background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;mask:none!important;-webkit-mask:none!important;} #pricing .usd-mascot-crop:before{content:""!important;position:absolute!important;inset:0!important;z-index:2!important;pointer-events:none!important;background:radial-gradient(ellipse 70% 72% at 40% 44%,transparent 40%,rgba(5,5,6,.14) 72%,#050506 100%)!important;} #pricing .usd-mascot-crop:after{content:""!important;position:absolute!important;inset:0!important;z-index:3!important;pointer-events:none!important;background:linear-gradient(90deg,transparent 0%,transparent 52%,rgba(5,5,6,.3) 70%,#050506 100%),linear-gradient(0deg,#050506 0%,transparent 18%,transparent 82%,rgba(5,5,6,.32) 100%)!important;} #pricing .usd-mascot-crop img.usd-mascot-character{position:absolute!important;left:0!important;top:0!important;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;object-fit:cover!important;object-position:left center!important;transform:translate3d(var(--scene-x,0px),var(--scene-y,0px),0) scale(1.035)!important;transform-origin:42% 48%!important;border:0!important;border-radius:0!important;box-shadow:none!important;mix-blend-mode:screen!important;-webkit-mask-image:linear-gradient(90deg,#000 0%,#000 57%,rgba(0,0,0,.82) 69%,rgba(0,0,0,.38) 84%,transparent 100%),linear-gradient(0deg,transparent 0%,#000 10%,#000 87%,rgba(0,0,0,.72) 100%)!important;mask-image:linear-gradient(90deg,#000 0%,#000 57%,rgba(0,0,0,.82) 69%,rgba(0,0,0,.38) 84%,transparent 100%),linear-gradient(0deg,transparent 0%,#000 10%,#000 87%,rgba(0,0,0,.72) 100%)!important;-webkit-mask-composite:source-in!important;mask-composite:intersect!important;filter:saturate(1.13) contrast(1.08) drop-shadow(0 0 24px rgba(255,18,40,.16))!important;animation:udsOpenArtworkDrift 8s ease-in-out infinite!important;} #pricing .usd-offer-panel{position:relative!important;z-index:2!important;width:min(58%,780px)!important;margin-left:auto!important;min-height:0!important;padding:42px clamp(10px,1.8vw,28px) 28px!important;background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;transform-style:preserve-3d!important;} #pricing .usd-offer-panel:before{display:none!important;} #pricing .usd-title,#pricing .usd-subtitle,#pricing .usd-price-panel,#pricing .usd-service-grid,#pricing .usd-service-detail,#pricing .usd-plan-details,#pricing .usd-primary-cta,#pricing .usd-guarantees{position:relative!important;z-index:3!important;} #pricing .usd-title{font-size:clamp(46px,5.4vw,90px)!important;line-height:.86!important;text-shadow:0 5px 28px rgba(0,0,0,.5)!important;} #pricing .usd-price-panel{backdrop-filter:blur(12px)!important;background:linear-gradient(120deg,rgba(10,5,6,.88),rgba(16,4,6,.74))!important;} #pricing .usd-service{backdrop-filter:blur(10px)!important;background:linear-gradient(145deg,rgba(17,12,13,.9),rgba(5,5,6,.82))!important;} #pricing .usd-mascot-callout,#pricing .usd-panel-meta,#pricing .usd-mascot-bottom,#pricing .usd-hud-float,#pricing .usd-side-chip{z-index:5!important;pointer-events:none!important;} @keyframes udsOpenArtworkDrift{0%,100%{transform:translate3d(var(--scene-x,0px),var(--scene-y,0px),0) scale(1.035)}50%{transform:translate3d(var(--scene-x,0px),calc(var(--scene-y,0px) - 5px),0) scale(1.045)}} @media(max-width:1100px){#pricing .usd-experience{min-height:clamp(700px,80vw,880px)!important}#pricing .usd-mascot-panel{left:-10vw!important;width:68%!important}#pricing .usd-offer-panel{width:60%!important;padding-top:34px!important}#pricing .usd-title{font-size:clamp(44px,6.1vw,72px)!important}} @media(max-width:760px){#pricing .pricing-why-wrap{width:calc(100% - 24px)!important}#pricing .usd-experience{display:flex!important;flex-direction:column!important;min-height:0!important;gap:0!important}#pricing .usd-mascot-panel{position:relative!important;left:-6vw!important;top:auto!important;bottom:auto!important;width:112%!important;height:clamp(420px,112vw,600px)!important;min-height:0!important;margin-bottom:-46px!important;transform:none!important;z-index:1!important}#pricing .usd-mascot-crop img.usd-mascot-character{object-position:left center!important;transform:scale(1.01)!important;animation:none!important;-webkit-mask-image:linear-gradient(90deg,#000 0%,#000 72%,rgba(0,0,0,.6) 89%,transparent 100%),linear-gradient(0deg,transparent 0%,#000 9%,#000 88%,rgba(0,0,0,.7) 100%)!important;mask-image:linear-gradient(90deg,#000 0%,#000 72%,rgba(0,0,0,.6) 89%,transparent 100%),linear-gradient(0deg,transparent 0%,#000 9%,#000 88%,rgba(0,0,0,.7) 100%)!important}#pricing .usd-mascot-panel:after{background:linear-gradient(90deg,transparent 0%,transparent 66%,rgba(5,5,6,.55) 86%,#050506 100%),linear-gradient(0deg,#050506 0%,transparent 20%,transparent 82%,rgba(5,5,6,.35) 100%)!important}#pricing .usd-offer-panel{width:100%!important;margin:0!important;padding:16px 8px 24px!important;z-index:2!important}#pricing .usd-title{font-size:clamp(48px,12vw,76px)!important}#pricing .usd-mascot-callout,#pricing .usd-panel-meta,#pricing .usd-mascot-bottom,#pricing .usd-hud-float,#pricing .usd-side-chip{display:none!important}} @media(max-width:460px){#pricing .usd-mascot-panel{height:clamp(370px,108vw,470px)!important;margin-bottom:-28px!important}#pricing .usd-offer-panel{padding-inline:2px!important}#pricing .usd-service-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}} @media(prefers-reduced-motion:reduce){#pricing .usd-mascot-crop img.usd-mascot-character{animation:none!important;transition:none!important}#pricing .usd-mascot-panel{transition:none!important}} /* UDS dashboard pricing concept — centered offer + live creative console */ #pricing{background:#050506!important;overflow:hidden!important;position:relative!important;isolation:isolate!important;padding-top:clamp(56px,7vw,108px)!important;} #pricing:before{content:"";position:absolute;z-index:-1;inset:0 0 auto;height:760px;pointer-events:none;background:radial-gradient(ellipse 70% 58% at 50% 8%,rgba(255,20,43,.22),transparent 72%),radial-gradient(ellipse 50% 42% at 50% 26%,rgba(112,0,15,.18),transparent 76%);} #pricing .pricing-why-wrap{width:min(1440px,calc(100% - 56px))!important;} #pricing .pricing-why-top{margin-bottom:clamp(24px,4vw,52px)!important;position:relative;z-index:2;} #pricing .uds-dashboard-experience{position:relative!important;display:block!important;min-height:0!important;perspective:none!important;background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;overflow:visible!important;} #pricing .uds-pricing-intro{position:relative;z-index:3;text-align:center;max-width:940px;margin:0 auto clamp(34px,4.5vw,66px);padding:0 12px;} #pricing .uds-live-pill{display:inline-flex;align-items:center;gap:9px;padding:8px 13px;border:1px solid rgba(255,66,83,.28);border-radius:999px;background:rgba(22,7,10,.78);color:#ff9aa4;font-size:10px;letter-spacing:.13em;font-weight:800;} #pricing .uds-live-pill i,#pricing .uds-console-status i,#pricing .uds-console-date b i,#pricing .uds-panel-live i{width:7px;height:7px;border-radius:50%;background:#ff3048;box-shadow:0 0 13px #ff3048;display:inline-block;} #pricing .uds-pricing-intro h2{margin:20px 0 15px!important;font-size:clamp(40px,5.5vw,76px)!important;line-height:.98!important;letter-spacing:-.055em!important;font-weight:850!important;color:#f8f5f5!important;text-align:center!important;text-shadow:0 8px 50px rgba(255,10,35,.15);} #pricing .uds-pricing-intro h2 em{font-style:normal;color:transparent;background:linear-gradient(100deg,#fff 0%,#ffb5bb 32%,#ff3147 68%,#a90a1d 100%);-webkit-background-clip:text;background-clip:text;} #pricing .uds-pricing-intro>p{margin:0 auto 22px!important;max-width:680px;color:#b6aeb1!important;font-size:clamp(14px,1.3vw,18px)!important;line-height:1.6!important;} #pricing .uds-intro-price{display:flex;align-items:center;justify-content:center;gap:13px;flex-wrap:wrap;margin:0 auto 20px;color:#8c8185;font-size:10px;font-weight:800;letter-spacing:.13em;} #pricing .uds-intro-price strong{display:inline-flex;align-items:baseline;gap:5px;color:#fff;letter-spacing:-.06em;} #pricing .uds-intro-price strong b{font-size:clamp(30px,3.3vw,44px);color:#ff344a;text-shadow:0 0 28px rgba(255,28,51,.3);} #pricing .uds-intro-price strong small{font-size:13px;letter-spacing:0;color:#cfc6c9;} #pricing .uds-intro-price del{font-size:13px;letter-spacing:0;color:#75686b;} #pricing .uds-intro-price>i{font-style:normal;padding:5px 8px;border:1px solid rgba(255,48,69,.24);border-radius:4px;color:#ff6979;font-size:9px;} #pricing .uds-pricing-intro .usd-primary-cta{display:inline-flex!important;position:relative!important;left:auto!important;right:auto!important;bottom:auto!important;width:auto!important;min-width:250px!important;max-width:100%!important;margin:0 auto!important;padding:15px 22px!important;border:1px solid #ff6574!important;border-radius:9px!important;background:linear-gradient(105deg,#ff354c,#b90b22)!important;box-shadow:0 0 32px rgba(255,20,43,.24),inset 0 1px rgba(255,255,255,.32)!important;transform:none!important;} #pricing .uds-pricing-intro .usd-primary-cta>span{display:flex!important;align-items:flex-start!important;flex-direction:column!important;gap:4px!important;text-align:left!important;} #pricing .uds-pricing-intro .usd-primary-cta small{font-size:8px!important;letter-spacing:.1em!important;color:#ffd5d9!important;} #pricing .uds-pricing-intro .usd-primary-cta strong{font-size:15px!important;letter-spacing:.06em!important;color:#fff!important;} #pricing .uds-pricing-intro .usd-primary-cta>b{font-size:24px!important;color:white!important;} #pricing .uds-console-frame{position:relative;z-index:2;width:100%;overflow:hidden;border:1px solid rgba(255,73,91,.34);border-radius:17px;background:#080708;box-shadow:0 0 0 1px rgba(255,255,255,.025),0 35px 100px rgba(0,0,0,.6),0 0 90px rgba(176,0,24,.14);} #pricing .uds-console-frame:before{content:"";position:absolute;z-index:0;pointer-events:none;inset:0;background:radial-gradient(ellipse at 60% 0%,rgba(255,22,43,.1),transparent 54%),linear-gradient(135deg,rgba(255,255,255,.025),transparent 25%);} #pricing .uds-console-topbar{height:58px;position:relative;z-index:1;display:flex;align-items:center;gap:22px;padding:0 22px;border-bottom:1px solid rgba(255,255,255,.09);background:rgba(14,12,13,.92);} #pricing .uds-window-dots{display:flex;gap:6px;} #pricing .uds-window-dots i{display:block;width:10px;height:10px;border-radius:50%;background:#ff5a61;}.uds-window-dots i:nth-child(2){background:#eeb54c}.uds-window-dots i:nth-child(3){background:#52c77b} #pricing .uds-console-brand{display:flex;align-items:center;gap:9px;color:#f5eff0;font-size:11px;letter-spacing:.08em;} #pricing .uds-brand-mark{display:grid;place-items:center;width:25px;height:25px;border-radius:7px;background:#ff3048;color:#fff;font-size:17px;box-shadow:0 0 20px rgba(255,48,72,.2);} #pricing .uds-console-brand b i{font-style:normal;color:#ff465b;font-size:9px;margin-left:5px;letter-spacing:.13em;} #pricing .uds-console-status{margin-left:auto;display:flex;align-items:center;gap:8px;color:#b7aeb1;font-size:9px;letter-spacing:.1em;font-weight:700;} #pricing .uds-console-status i{width:6px;height:6px;background:#65d99b;box-shadow:0 0 10px rgba(101,217,155,.6);} #pricing .uds-console-code{padding:7px 9px;border:1px solid rgba(255,255,255,.1);border-radius:5px;color:#9c8f93;font-size:9px;letter-spacing:.1em;} #pricing .uds-console-body{position:relative;z-index:1;display:grid;grid-template-columns:220px minmax(0,1fr);min-height:500px;} #pricing .uds-console-sidebar{display:flex;flex-direction:column;gap:7px;padding:24px 13px 16px;border-right:1px solid rgba(255,255,255,.09);background:rgba(10,9,10,.72);} #pricing .uds-sidebar-label{padding:0 11px 10px;color:#786c70;font-size:9px;letter-spacing:.15em;font-weight:800;} #pricing .uds-nav-item{width:100%;display:flex;align-items:center;gap:11px;padding:13px 11px;border:1px solid transparent;border-radius:8px;background:transparent;color:#9c9295;text-align:left;font:inherit;font-size:12px;cursor:pointer;transition:background .2s,border-color .2s,color .2s;} #pricing .uds-nav-item>span{width:19px;text-align:center;color:#ff586b;font-size:16px;} #pricing .uds-nav-item b{margin-left:auto;opacity:0;font-size:15px;} #pricing .uds-nav-item:hover,#pricing .uds-nav-item.is-selected{border-color:rgba(255,61,82,.25);background:linear-gradient(100deg,rgba(255,39,61,.14),rgba(255,39,61,.025));color:#fff;} #pricing .uds-nav-item.is-selected b{opacity:1;color:#ff586b;} #pricing .uds-sidebar-bottom{display:flex;align-items:center;gap:9px;margin-top:auto;padding:17px 6px 0;border-top:1px solid rgba(255,255,255,.08);} #pricing .uds-avatar{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#ff5365,#6f0718);color:white;font-weight:900;} #pricing .uds-sidebar-bottom>span:nth-child(2){display:flex;flex-direction:column;gap:4px;min-width:0;}.uds-sidebar-bottom b{font-size:9px;color:#e9dfe2;letter-spacing:.04em}.uds-sidebar-bottom small{font-size:9px;color:#8c8084}.uds-sidebar-bottom>i{margin-left:auto;color:#63d899;font-size:8px} #pricing .uds-console-main{min-width:0;padding:25px 25px 18px;} #pricing .uds-console-heading{display:flex;justify-content:space-between;align-items:center;gap:18px;padding-bottom:20px;border-bottom:1px solid rgba(255,255,255,.09);} #pricing .uds-overline,#pricing .uds-panel-heading>div>span{color:#817579;font-size:9px;letter-spacing:.13em;font-weight:800;} #pricing .uds-console-heading h3{margin:7px 0 5px;font-size:23px;letter-spacing:-.035em;color:#fff;} #pricing .uds-console-heading h3 i{font-style:normal;color:#ff485c;font-size:16px;} #pricing .uds-console-heading p{margin:0;color:#968a8e;font-size:11px;line-height:1.5;} #pricing .uds-console-date{display:flex;flex-direction:column;gap:8px;align-items:flex-end;white-space:nowrap;} #pricing .uds-console-date>span{font-size:8px;color:#786c70;letter-spacing:.13em;font-weight:800;} #pricing .uds-console-date b{display:flex;align-items:center;gap:7px;padding:8px 10px;border:1px solid rgba(255,255,255,.1);border-radius:5px;color:#e7dfe1;font-size:9px;letter-spacing:.04em;} #pricing .uds-console-date b i{width:6px;height:6px;background:#66d89b;box-shadow:0 0 8px rgba(102,216,155,.5);} #pricing .uds-metric-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:18px 0;} #pricing .uds-metric-card{position:relative;min-height:116px;overflow:hidden;padding:17px;border:1px solid rgba(255,255,255,.1);border-radius:9px;background:linear-gradient(135deg,rgba(27,23,25,.92),rgba(11,10,11,.92));} #pricing .uds-metric-card.uds-metric-red{border-color:rgba(255,54,74,.32);background:linear-gradient(125deg,rgba(74,10,19,.62),rgba(14,9,10,.92));} #pricing .uds-metric-card>span{display:block;color:#a99da1;font-size:9px;letter-spacing:.1em;font-weight:800;} #pricing .uds-metric-card>strong{position:relative;z-index:1;display:block;margin:10px 0 7px;color:#fff;font-size:clamp(23px,2.2vw,31px);letter-spacing:-.05em;} #pricing .uds-metric-card>strong small{font-size:10px;letter-spacing:.03em;color:#9f9296;margin-left:3px;} #pricing .uds-metric-card>div{position:relative;z-index:1;color:#a69a9e;font-size:10px;} #pricing .uds-metric-card>div i{font-style:normal;color:#ff586b;margin-right:4px;} #pricing .uds-metric-watermark{position:absolute;right:12px;bottom:-20px;font-size:82px;color:rgba(255,60,80,.055);line-height:1;} #pricing .uds-console-panels{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(260px,.8fr);gap:13px;} #pricing .uds-work-panel,#pricing .uds-queue-panel{min-width:0;padding:17px;border:1px solid rgba(255,255,255,.1);border-radius:10px;background:rgba(11,10,11,.78);} #pricing .uds-panel-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:16px;} #pricing .uds-panel-heading h4{margin:7px 0 0;color:#f5eff0;font-size:15px;letter-spacing:-.02em;} #pricing .uds-panel-live{display:flex;align-items:center;gap:6px;white-space:nowrap;color:#9d9295;font-size:8px;letter-spacing:.08em;} #pricing .uds-panel-live i{width:5px;height:5px;} #pricing .uds-work-visuals{display:grid;grid-template-columns:1.2fr .8fr;grid-template-rows:100px 82px;gap:9px;} #pricing .uds-work-visual{position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.1);border-radius:7px;background:#171012;} #pricing .uds-work-visual:first-child{grid-row:span 2;} #pricing .uds-work-visual img{width:100%;height:100%;display:block;object-fit:cover;opacity:.85;transition:transform .45s,opacity .3s;} #pricing .uds-work-visual:hover img{transform:scale(1.06);opacity:1;} #pricing .uds-work-visual:after{content:"";position:absolute;inset:35% 0 0;background:linear-gradient(transparent,rgba(4,3,4,.9));pointer-events:none;} #pricing .uds-work-visual>span{position:absolute;z-index:1;left:10px;bottom:9px;color:#fff;font-size:8px;font-weight:800;letter-spacing:.1em;} #pricing .uds-visual-icons img{object-position:center 36%;} #pricing .uds-visual-liveops img{object-position:center 30%;} #pricing .uds-work-foot{display:flex;justify-content:space-between;gap:10px;margin-top:13px;padding-top:12px;border-top:1px solid rgba(255,255,255,.08);color:#8e8286;font-size:8px;letter-spacing:.05em;} #pricing .uds-work-foot span{display:flex;align-items:center;gap:6px;}#pricing .uds-work-foot span i{width:5px;height:5px;background:#ff4a60;border-radius:50%;box-shadow:0 0 8px #ff3048;} #pricing .uds-work-foot>b{color:#ff6878;white-space:nowrap;font-size:8px;} #pricing .uds-queue-symbol{display:grid;place-items:center;width:25px;height:25px;border:1px solid rgba(255,54,74,.35);border-radius:6px;color:#ff4c60;font-size:18px;} #pricing .uds-queue-list{display:flex;flex-direction:column;gap:0;} #pricing .uds-queue-list>div{display:flex;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid rgba(255,255,255,.065);} #pricing .uds-queue-icon{display:grid;place-items:center;flex:0 0 30px;height:30px;border:1px solid rgba(255,52,73,.22);border-radius:6px;background:rgba(255,39,61,.06);color:#ff5a6d;font-size:15px;} #pricing .uds-queue-list>div>span:nth-child(2){display:flex;flex-direction:column;gap:4px;min-width:0;} #pricing .uds-queue-list b{color:#e8dfe1;font-size:10px;font-weight:700;} #pricing .uds-queue-list small{color:#8c8084;font-size:9px;line-height:1.4;} #pricing .uds-queue-list>div>i{margin-left:auto;color:#6f6367;font-size:9px;font-style:normal;} #pricing .uds-queue-cta{display:flex;justify-content:space-between;align-items:center;margin-top:13px;padding:12px;border:1px solid rgba(255,55,76,.32);border-radius:6px;background:rgba(255,38,61,.08);color:#ff7c89;font-size:9px;font-weight:800;letter-spacing:.08em;transition:background .2s,color .2s;} #pricing .uds-queue-cta:hover{background:#f22b43;color:white;} #pricing .uds-console-bottom{display:flex;align-items:center;gap:clamp(10px,2vw,24px);flex-wrap:wrap;padding:17px 0 0;margin-top:17px;border-top:1px solid rgba(255,255,255,.08);} #pricing .uds-console-bottom>span{display:flex;align-items:center;gap:6px;color:#a79b9f;font-size:8px;font-weight:800;letter-spacing:.05em;} #pricing .uds-console-bottom>span>i{display:grid;place-items:center;width:15px;height:15px;border:1px solid rgba(255,62,82,.55);border-radius:50%;color:#ff5266;font-size:9px;font-style:normal;} #pricing .uds-console-bottom .uds-console-bottom-right{margin-left:auto;color:#6e6266;letter-spacing:.12em;} #pricing .uds-console-bottom-right b{color:#ff4359;font-size:15px;} #pricing .uds-dashboard-experience .usd-service-detail{display:grid!important;grid-template-columns:auto auto 1fr auto;align-items:center;gap:10px;margin:14px 0 0!important;padding:12px 15px!important;border:1px solid rgba(255,58,78,.22)!important;border-radius:8px!important;background:rgba(15,10,11,.85)!important;} #pricing .uds-dashboard-experience .usd-detail-pulse{display:block!important;} #pricing .uds-dashboard-experience .usd-detail-label{font-size:8px!important;letter-spacing:.1em!important;white-space:nowrap;color:#918387!important;} #pricing .uds-dashboard-experience #usd-detail-title{font-size:10px!important;letter-spacing:.06em;color:#ff7b88!important;white-space:nowrap;} #pricing .uds-dashboard-experience #usd-detail-copy{margin:0!important;font-size:10px!important;line-height:1.5!important;color:#a99da1!important;} #pricing .uds-dashboard-experience #usd-detail-link{font-size:8px!important;letter-spacing:.06em!important;white-space:nowrap;color:#f6dfe2!important;} #pricing .uds-service-controls{display:flex;gap:7px;flex-wrap:wrap;margin-top:11px;} #pricing .uds-dashboard-experience .usd-service{flex:1 1 auto;min-height:33px;padding:8px 10px!important;border:1px solid rgba(255,255,255,.09)!important;border-radius:5px!important;background:rgba(255,255,255,.025)!important;color:#8e8286!important;font-size:8px!important;letter-spacing:.07em!important;font-weight:800!important;cursor:pointer;transition:all .2s;} #pricing .uds-dashboard-experience .usd-service.is-active,#pricing .uds-dashboard-experience .usd-service:hover{border-color:rgba(255,59,79,.5)!important;background:rgba(255,39,60,.12)!important;color:#ff9ca6!important;} #pricing .usd-section-signoff{margin-top:27px!important;} #pricing .uds-dashboard-experience .usd-primary-cta i{display:none!important;} #pricing .uds-nav-item:focus-visible,#pricing .uds-queue-cta:focus-visible,#pricing .uds-service:focus-visible{outline:2px solid #ff586b;outline-offset:3px;} @media(max-width:1050px){#pricing .uds-console-body{grid-template-columns:178px minmax(0,1fr);}#pricing .uds-console-main{padding:20px 17px 16px;}#pricing .uds-console-panels{grid-template-columns:minmax(0,1fr);}#pricing .uds-work-visuals{grid-template-columns:1fr 1fr;grid-template-rows:130px 110px;}#pricing .uds-work-visual:first-child{grid-row:span 2;}#pricing .uds-console-bottom .uds-console-bottom-right{margin-left:0;}} @media(max-width:720px){#pricing .pricing-why-wrap{width:calc(100% - 24px)!important;}#pricing .uds-pricing-intro{margin-bottom:28px;}#pricing .uds-pricing-intro h2{font-size:clamp(37px,9vw,58px)!important;}#pricing .uds-console-topbar{height:49px;padding:0 12px;gap:10px;}#pricing .uds-console-status,#pricing .uds-console-code{display:none;}#pricing .uds-console-brand{margin-left:auto;font-size:9px;}#pricing .uds-console-body{display:block;min-height:0;}#pricing .uds-console-sidebar{display:flex;flex-direction:row;gap:5px;overflow-x:auto;padding:10px;border-right:0;border-bottom:1px solid rgba(255,255,255,.09);}#pricing .uds-sidebar-label,#pricing .uds-sidebar-bottom{display:none;}#pricing .uds-nav-item{flex:0 0 auto;width:auto;padding:10px 11px;white-space:nowrap;font-size:10px;}#pricing .uds-nav-item>span{font-size:13px;}#pricing .uds-nav-item b{display:none;}#pricing .uds-console-main{padding:17px 12px 13px;}#pricing .uds-console-heading{align-items:flex-start;}#pricing .uds-console-heading h3{font-size:19px;}#pricing .uds-console-date{display:none;}#pricing .uds-metric-row{gap:7px;margin:13px 0;}#pricing .uds-metric-card{padding:11px 9px;min-height:100px;}#pricing .uds-metric-card>span{font-size:7px;letter-spacing:.04em;}#pricing .uds-metric-card>strong{font-size:23px;margin:9px 0 5px;}#pricing .uds-metric-card>strong small{display:block;margin:3px 0 0;font-size:8px;}#pricing .uds-metric-card>div{font-size:8px;line-height:1.4;}#pricing .uds-console-panels{display:block;}#pricing .uds-queue-panel{margin-top:10px;}#pricing .uds-work-panel,#pricing .uds-queue-panel{padding:13px;}#pricing .uds-work-visuals{grid-template-rows:100px 75px;gap:6px;}#pricing .uds-work-foot{flex-direction:column;}#pricing .uds-console-bottom{gap:10px 14px;}#pricing .uds-console-bottom>span{font-size:7px;}#pricing .uds-dashboard-experience .usd-service-detail{grid-template-columns:auto 1fr;gap:7px;}#pricing .uds-dashboard-experience .usd-detail-label{display:none;}#pricing .uds-dashboard-experience #usd-detail-copy{grid-column:1/-1;grid-row:2;}#pricing .uds-dashboard-experience #usd-detail-link{grid-column:1/-1;grid-row:3;}#pricing .uds-dashboard-experience .usd-service{flex:1 1 30%;}#pricing .uds-intro-price{gap:8px;}#pricing .uds-intro-price>span{font-size:8px;}} @media(max-width:390px){#pricing .uds-metric-card>strong{font-size:20px;}#pricing .uds-work-visuals{grid-template-rows:90px 65px;}#pricing .uds-live-pill{font-size:8px;letter-spacing:.07em;}#pricing .uds-pricing-intro .usd-primary-cta{min-width:220px!important;}} @media(prefers-reduced-motion:reduce){#pricing .uds-work-visual img,#pricing .uds-nav-item,#pricing .uds-queue-cta{transition:none!important;}} /* UDS FULL-BLEED CINEMATIC PRICING SCENE — replaces the dashboard card */ #pricing.uds-fullbleed-section{position:relative;isolation:isolate;overflow:hidden;width:100%;max-width:none;margin:0;padding:0;background:#030304;color:#fff;border:0;border-radius:0;} #pricing .uds-fullbleed-scene{--px:0;--py:0;position:relative;width:100%;aspect-ratio:3/2;min-height:0;overflow:hidden;isolation:isolate;background:#030304;perspective:1200px;transform-style:preserve-3d;} #pricing .uds-art-layer{position:absolute;inset:-1.8%;z-index:-3;overflow:hidden;transform:translate3d(calc(var(--px)*-11px),calc(var(--py)*-8px),0) scale(1.035);transform-style:preserve-3d;will-change:transform;transition:transform .24s ease-out;} #pricing .uds-art-layer img{display:block;width:100%;height:100%;object-fit:cover;object-position:center center;filter:saturate(1.08) contrast(1.035);} #pricing .uds-scene-vignette{position:absolute;inset:0;z-index:-2;pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,.04),transparent 28%,transparent 75%,rgba(0,0,0,.13)),linear-gradient(0deg,rgba(0,0,0,.3),transparent 13%,transparent 85%,rgba(0,0,0,.13));} #pricing .uds-scene-grain{position:absolute;inset:0;z-index:-1;opacity:.13;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");mix-blend-mode:screen;} #pricing .uds-orbit{position:absolute;z-index:0;pointer-events:none;border:1px solid rgba(255,43,63,.17);border-radius:50%;filter:drop-shadow(0 0 7px rgba(255,30,50,.18));} #pricing .uds-orbit-one{width:24vw;height:24vw;left:4%;top:13%;transform:rotateX(68deg) rotateZ(-28deg);animation:uds-orbit-drift 13s linear infinite;} #pricing .uds-orbit-two{width:18vw;height:18vw;right:7%;top:8%;transform:rotateX(72deg) rotateZ(18deg);animation:uds-orbit-drift 17s linear infinite reverse;} @keyframes uds-orbit-drift{to{rotate:360deg;}} #pricing .uds-depth-glow{position:absolute;z-index:0;pointer-events:none;width:26%;aspect-ratio:1;border-radius:50%;filter:blur(65px);opacity:.11;mix-blend-mode:screen;} #pricing .uds-depth-glow-left{left:9%;top:24%;background:#ff102e;animation:uds-glow-pulse 5s ease-in-out infinite;} #pricing .uds-depth-glow-right{right:13%;top:25%;background:#ff3048;animation:uds-glow-pulse 6.5s ease-in-out infinite reverse;} @keyframes uds-glow-pulse{0%,100%{opacity:.08;transform:scale(.86)}50%{opacity:.2;transform:scale(1.12)}} #pricing .uds-interaction-hint{position:absolute;z-index:3;left:2.5%;top:3.5%;display:flex;align-items:center;gap:8px;color:rgba(255,255,255,.66);font-size:clamp(7px,.65vw,10px);letter-spacing:.17em;font-weight:800;opacity:.82;pointer-events:none;text-shadow:0 2px 12px #000;} #pricing .uds-interaction-hint span{width:6px;height:6px;background:#ff263f;border-radius:50%;box-shadow:0 0 12px #ff1b38;animation:uds-hint-pulse 1.7s ease-in-out infinite;} @keyframes uds-hint-pulse{50%{opacity:.3;box-shadow:0 0 3px #ff1b38}} #pricing .uds-live-hotspots{position:absolute;inset:0;z-index:4;pointer-events:none;} #pricing .uds-hotspot{position:absolute;display:block;padding:0;border:0;background:transparent;cursor:pointer;pointer-events:auto;outline:none;} #pricing .uds-hotspot:before{content:"";position:absolute;inset:-3px;border-radius:13px;background:radial-gradient(ellipse at center,rgba(255,24,48,.2),transparent 72%);opacity:0;transform:scale(.84);transition:opacity .25s,transform .3s;} #pricing .uds-hotspot:hover:before,#pricing .uds-hotspot:focus-visible:before{opacity:1;transform:scale(1.04);} #pricing .uds-hotspot:after{content:"";position:absolute;inset:0;border:1px solid rgba(255,65,83,0);border-radius:12px;box-shadow:0 0 0 rgba(255,30,50,0);transition:border-color .25s,box-shadow .25s;} #pricing .uds-hotspot:hover:after,#pricing .uds-hotspot:focus-visible:after{border-color:rgba(255,65,83,.8);box-shadow:0 0 22px rgba(255,25,49,.3),inset 0 0 18px rgba(255,25,49,.11);} #pricing .uds-hotspot-ui{left:43.2%;top:67.5%;width:8.2%;height:12.8%;} #pricing .uds-hotspot-icons{left:52.5%;top:67.5%;width:8.2%;height:12.8%;} #pricing .uds-hotspot-marketing{left:61.5%;top:67.5%;width:8.2%;height:12.8%;} #pricing .uds-hotspot-titles{left:70.7%;top:67.5%;width:8.2%;height:12.8%;} #pricing .uds-hotspot-liveops{left:79.7%;top:67.5%;width:8.2%;height:12.8%;} #pricing .uds-hotspot-cta{left:56.1%;top:82.2%;width:29.2%;height:9.4%;border-radius:60px;} #pricing .uds-hotspot-cta:hover:after,#pricing .uds-hotspot-cta:focus-visible:after{border-radius:60px;box-shadow:0 0 38px rgba(255,10,38,.68),inset 0 0 22px rgba(255,255,255,.12);} #pricing .uds-floating-caption{position:absolute;z-index:5;left:3%;bottom:9%;width:min(300px,23%);padding:15px 17px 16px;border-left:2px solid #ff344c;background:linear-gradient(100deg,rgba(5,4,5,.86),rgba(5,4,5,.32),transparent);backdrop-filter:blur(6px);display:flex;flex-direction:column;gap:6px;opacity:0;transform:translate3d(-12px,8px,0);transition:opacity .28s,transform .28s;pointer-events:none;text-shadow:0 2px 12px #000;} #pricing .uds-floating-caption.is-visible{opacity:1;transform:translate3d(0,0,0);} #pricing .uds-caption-kicker{font-size:8px;letter-spacing:.17em;color:#ff6879;font-weight:900;} #pricing .uds-floating-caption strong{font-size:clamp(11px,1vw,15px);letter-spacing:.03em;} #pricing .uds-floating-caption>span:nth-of-type(2){font-size:clamp(9px,.8vw,12px);line-height:1.5;color:#ded6d8;} #pricing .uds-floating-caption>i{width:35px;height:2px;margin-top:3px;background:linear-gradient(90deg,#ff273f,transparent);} #pricing .uds-scene-footer{position:absolute;z-index:3;left:2.5%;right:2.5%;bottom:1.8%;display:flex;align-items:center;gap:18px;color:rgba(255,255,255,.72);font-size:clamp(7px,.62vw,9px);letter-spacing:.13em;font-weight:800;text-shadow:0 2px 10px #000;pointer-events:none;} #pricing .uds-scene-footer>span:first-child{display:flex;align-items:center;gap:7px;} #pricing .uds-scene-footer>span:first-child i{width:6px;height:6px;background:#ff334b;border-radius:50%;box-shadow:0 0 9px #ff1c39;} #pricing .uds-scene-footer>span:nth-child(2){margin-left:auto;} #pricing .uds-scene-footer a{color:#fff;text-decoration:none;pointer-events:auto;transition:color .2s;text-shadow:0 0 12px rgba(255,28,50,.45);} #pricing .uds-scene-footer a:hover{color:#ff7180;} #pricing .uds-scene-footer a b{font-size:14px;color:#ff4c61;margin-left:5px;} #pricing .uds-service-live-detail{position:relative;overflow:hidden;padding:clamp(40px,6vw,90px) max(6.5vw,24px) clamp(38px,5vw,68px);background:radial-gradient(ellipse at 75% 10%,rgba(112,9,22,.23),transparent 44%),linear-gradient(180deg,#090708,#050506 70%);border-top:1px solid rgba(255,45,64,.25);} #pricing .uds-service-live-detail:before{content:"UDS";position:absolute;right:-.04em;top:-.45em;color:rgba(255,255,255,.018);font-size:clamp(180px,31vw,470px);font-weight:1000;letter-spacing:-.09em;line-height:1;pointer-events:none;} #pricing .uds-detail-eyebrow{display:flex;align-items:center;gap:9px;color:#ff6879;font-size:10px;letter-spacing:.16em;font-weight:900;} #pricing .uds-detail-eyebrow i{width:7px;height:7px;border-radius:50%;background:#ff344d;box-shadow:0 0 13px #ff344d;} #pricing .uds-service-live-detail h2{position:relative;margin:17px 0 12px;font-size:clamp(35px,5.3vw,76px);line-height:.98;letter-spacing:-.055em;font-weight:950;} #pricing .uds-service-live-detail h2 em{font-style:normal;color:#ff3c52;text-shadow:0 0 36px rgba(255,29,54,.18);} #pricing #uds-detail-live-copy{position:relative;max-width:620px;margin:0;color:#aaa0a3;font-size:clamp(13px,1.15vw,16px);line-height:1.75;} #pricing .uds-live-detail-bottom{position:relative;display:flex;align-items:center;justify-content:space-between;gap:25px;max-width:920px;margin-top:30px;padding:22px 0;border-top:1px solid rgba(255,255,255,.1);border-bottom:1px solid rgba(255,255,255,.1);} #pricing .uds-live-detail-price{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;} #pricing .uds-live-detail-price del{color:#817579;font-size:15px;} #pricing .uds-live-detail-price strong{font-size:clamp(30px,4vw,50px);letter-spacing:-.05em;color:#fff;} #pricing .uds-live-detail-price strong small{font-size:13px;letter-spacing:0;color:#aaa0a3;font-weight:600;} #pricing .uds-live-detail-price>span{color:#ff7180;font-size:9px;letter-spacing:.14em;font-weight:900;} #pricing .uds-live-detail-cta{display:inline-flex;align-items:center;justify-content:center;gap:24px;min-width:215px;padding:16px 22px;border:1px solid #ff465b;border-radius:5px;background:linear-gradient(110deg,#f02b43,#b60b20);box-shadow:0 0 25px rgba(255,30,53,.18),inset 0 1px rgba(255,255,255,.2);color:#fff;text-decoration:none;font-size:11px;font-weight:900;letter-spacing:.1em;transition:transform .25s,box-shadow .25s;} #pricing .uds-live-detail-cta:hover{transform:translateY(-3px);box-shadow:0 10px 38px rgba(255,30,53,.32),inset 0 1px rgba(255,255,255,.2);} #pricing .uds-live-detail-cta b{font-size:18px;} #pricing .uds-live-service-chips{position:relative;display:flex;gap:8px;flex-wrap:wrap;margin-top:24px;} #pricing .uds-live-service-chips button{padding:11px 13px;border:1px solid rgba(255,255,255,.12);border-radius:3px;background:rgba(255,255,255,.025);color:#c2b6b9;font-size:9px;font-weight:900;letter-spacing:.08em;cursor:pointer;transition:all .2s;} #pricing .uds-live-service-chips button:hover,#pricing .uds-live-service-chips button.is-active{border-color:#ff4a60;background:rgba(255,42,63,.12);color:#ff8c99;box-shadow:0 0 20px rgba(255,30,50,.08);} #pricing .uds-why-wrap{width:min(1200px,calc(100% - 48px))!important;padding:0 0 54px!important;} #pricing .uds-why-wrap .pricing-why-top{border-top:1px solid rgba(255,255,255,.1);padding-top:25px;} #pricing .uds-why-wrap .pricing-why-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:22px;} #pricing .uds-why-wrap .pricing-why-grid article{padding:23px;border:1px solid rgba(255,255,255,.09);background:linear-gradient(140deg,rgba(255,255,255,.035),rgba(255,255,255,.008));} #pricing .uds-why-wrap .pricing-why-grid article>span{color:#ff5367;font-size:10px;letter-spacing:.1em;font-weight:900;} #pricing .uds-why-wrap .pricing-why-grid h3{margin:15px 0 9px;font-size:13px;letter-spacing:.035em;} #pricing .uds-why-wrap .pricing-why-grid p{margin:0;color:#968a8e;font-size:12px;line-height:1.7;} @media(min-width:1600px){#pricing .uds-art-layer{inset:-1.8%;}} @media(max-width:900px){#pricing .uds-fullbleed-scene{aspect-ratio:3/2;}#pricing .uds-floating-caption{width:28%;left:2%;bottom:10%;padding:10px 12px;}#pricing .uds-scene-footer{gap:8px;}#pricing .uds-orbit-one{width:30vw;height:30vw;}#pricing .uds-orbit-two{width:23vw;height:23vw;}} @media(max-width:620px){#pricing .uds-fullbleed-scene{aspect-ratio:auto;height:calc(100svh - 60px);min-height:620px;max-height:780px;}#pricing .uds-art-layer{inset:0;transform:translate3d(calc(var(--px)*-3px),calc(var(--py)*-2px),0) scale(1.02);}#pricing .uds-art-layer img{object-fit:cover;object-position:49% center;}#pricing .uds-interaction-hint{left:15px;top:14px;font-size:7px;letter-spacing:.1em;}#pricing .uds-hotspot-ui{left:43%;top:65%;width:9%;height:12%;}#pricing .uds-hotspot-icons{left:52%;top:65%;width:9%;height:12%;}#pricing .uds-hotspot-marketing{left:61%;top:65%;width:9%;height:12%;}#pricing .uds-hotspot-titles{left:70%;top:65%;width:9%;height:12%;}#pricing .uds-hotspot-liveops{left:79%;top:65%;width:9%;height:12%;}#pricing .uds-hotspot-cta{left:55%;top:79%;width:31%;height:9%;}#pricing .uds-floating-caption{left:13px;bottom:12%;width:37%;padding:9px 10px;backdrop-filter:blur(3px);}#pricing .uds-caption-kicker{font-size:6px;}#pricing .uds-floating-caption strong{font-size:9px;}#pricing .uds-floating-caption>span:nth-of-type(2){font-size:8px;}#pricing .uds-scene-footer{left:13px;right:13px;bottom:12px;flex-wrap:wrap;font-size:6px;letter-spacing:.07em;}#pricing .uds-scene-footer>span:nth-child(2){margin-left:auto;}#pricing .uds-scene-footer a{display:none;}#pricing .uds-service-live-detail{padding:42px 20px 38px;}#pricing .uds-live-detail-bottom{align-items:flex-start;flex-direction:column;gap:17px;}#pricing .uds-live-detail-cta{width:100%;}#pricing .uds-live-service-chips button{flex:1 1 42%;font-size:8px;}#pricing .uds-why-wrap{width:calc(100% - 40px)!important;}#pricing .uds-why-wrap .pricing-why-grid{grid-template-columns:1fr;}#pricing .uds-why-wrap .pricing-why-grid article{padding:17px;}#pricing .uds-orbit{display:none;}} @media(prefers-reduced-motion:reduce){#pricing .uds-orbit,#pricing .uds-depth-glow-left,#pricing .uds-depth-glow-right,#pricing .uds-interaction-hint span{animation:none!important;}#pricing .uds-art-layer{transition:none!important;}} /* UDS polish v13 — shorter hero footprint, tighter proportions, richer pointer interaction */ @media (min-width: 621px){ #pricing .uds-fullbleed-scene{aspect-ratio:16/10;max-height:920px;} #pricing .uds-art-layer{inset:-1.2%;transform:translate3d(calc(var(--px)*-17px),calc(var(--py)*-12px),0) scale(1.07);} #pricing .uds-art-layer img{object-position:center bottom;} #pricing .uds-scene-vignette{background:radial-gradient(ellipse at calc(50% + var(--px)*18%) calc(48% + var(--py)*18%),rgba(255,25,49,.11),transparent 42%),linear-gradient(90deg,rgba(0,0,0,.025),transparent 28%,transparent 75%,rgba(0,0,0,.13)),linear-gradient(0deg,rgba(0,0,0,.25),transparent 13%,transparent 90%,rgba(0,0,0,.1));} #pricing .uds-hotspot-ui{left:43.2%;top:70.2%;height:11.8%;} #pricing .uds-hotspot-icons{left:52.5%;top:70.2%;height:11.8%;} #pricing .uds-hotspot-marketing{left:61.5%;top:70.2%;height:11.8%;} #pricing .uds-hotspot-titles{left:70.7%;top:70.2%;height:11.8%;} #pricing .uds-hotspot-liveops{left:79.7%;top:70.2%;height:11.8%;} #pricing .uds-hotspot-cta{left:56.1%;top:85%;height:8.7%;} #pricing .uds-scene-footer{bottom:1.3%;} } #pricing .uds-fullbleed-scene{--tilt-x:0deg;--tilt-y:0deg;} #pricing .uds-art-layer{transition:transform .16s ease-out;} #pricing .uds-hotspot{touch-action:manipulation;} #pricing .uds-hotspot:before{background:radial-gradient(ellipse at center,rgba(255,24,48,.34),transparent 72%);} #pricing .uds-hotspot:hover,#pricing .uds-hotspot:focus-visible{filter:drop-shadow(0 0 10px rgba(255,30,50,.55));} #pricing .uds-hotspot-cta:before{opacity:.16;transform:scale(.97);animation:uds-cta-breathe 2.6s ease-in-out infinite;} #pricing .uds-hotspot-cta:hover:before,#pricing .uds-hotspot-cta:focus-visible:before{opacity:.8;transform:scale(1.04);} @keyframes uds-cta-breathe{0%,100%{opacity:.08}50%{opacity:.32}} #pricing .uds-floating-caption{box-shadow:0 12px 36px rgba(0,0,0,.18);} @media(max-width:900px) and (min-width:621px){#pricing .uds-fullbleed-scene{aspect-ratio:16/10;}#pricing .uds-hotspot-ui,#pricing .uds-hotspot-icons,#pricing .uds-hotspot-marketing,#pricing .uds-hotspot-titles,#pricing .uds-hotspot-liveops{top:70%;height:11.8%;}} @media(prefers-reduced-motion:reduce){#pricing .uds-hotspot-cta:before{animation:none!important;}} /* UDS reimagined: bespoke full-bleed character + pricing hero */ #pricing.uds-reimagined{width:100%;max-width:none;margin:0;padding:0;overflow:hidden;background:#050506;color:#fff;isolation:isolate;border:0;border-radius:0;} #pricing .uds-reim-scene{--rx:0deg;--ry:0deg;--mx:0px;--my:0px;position:relative;isolation:isolate;overflow:hidden;min-height:760px;height:min(920px,calc(100svh - 72px));background:radial-gradient(ellipse at 28% 55%,#401016 0%,#13080a 34%,#050506 70%);display:grid;grid-template-columns:minmax(0,1.03fr) minmax(0,.97fr);align-items:center;padding:clamp(34px,4.6vw,78px) clamp(26px,5.4vw,94px) 68px;gap:clamp(14px,2.5vw,44px);perspective:1400px;} #pricing .uds-reim-art{position:absolute;z-index:-3;left:-2%;top:0;bottom:0;width:61%;overflow:hidden;transform:translate3d(calc(var(--mx)*.34),calc(var(--my)*.25),0) rotateY(var(--ry)) rotateX(var(--rx)) scale(1.025);transform-origin:50% 50%;transition:transform .22s ease-out;will-change:transform;} #pricing .uds-reim-art:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 50%,#050506 98%),linear-gradient(0deg,#050506 0%,transparent 18%,transparent 78%,rgba(5,5,6,.38) 100%);pointer-events:none;} #pricing .uds-reim-art img{width:100%;height:100%;object-fit:cover;object-position:20% center;filter:saturate(1.08) contrast(1.06);} #pricing .uds-reim-light{position:absolute;z-index:-2;pointer-events:none;border-radius:50%;filter:blur(70px);opacity:.48;transition:transform .25s ease-out;} #pricing .uds-reim-light-a{width:32vw;height:32vw;left:5%;top:17%;background:rgba(255,24,53,.25);transform:translate3d(calc(var(--mx)*-.22),calc(var(--my)*-.2),0);} #pricing .uds-reim-light-b{width:27vw;height:27vw;right:5%;top:20%;background:rgba(255,24,53,.15);transform:translate3d(calc(var(--mx)*-.12),calc(var(--my)*-.18),0);} #pricing .uds-reim-grid{position:absolute;z-index:-1;inset:0;opacity:.12;background-image:linear-gradient(rgba(255,65,85,.18) 1px,transparent 1px),linear-gradient(90deg,rgba(255,65,85,.18) 1px,transparent 1px);background-size:54px 54px;mask-image:linear-gradient(90deg,transparent 0%,#000 80%);pointer-events:none;} #pricing .uds-reim-ring{position:absolute;z-index:-1;border:1px solid rgba(255,54,75,.23);border-radius:50%;pointer-events:none;box-shadow:0 0 40px rgba(255,25,50,.08),inset 0 0 40px rgba(255,25,50,.04);} #pricing .uds-reim-ring-a{width:440px;height:440px;left:19%;top:14%;animation:udsReimOrbit 24s linear infinite;} #pricing .uds-reim-ring-b{width:570px;height:570px;left:13%;top:6%;border-style:dashed;opacity:.5;animation:udsReimOrbit 42s linear infinite reverse;} @keyframes udsReimOrbit{to{transform:rotate(360deg)}} #pricing .uds-reim-copy{position:relative;z-index:2;grid-column:2;grid-row:1;max-width:660px;width:100%;justify-self:end;transform:translate3d(calc(var(--mx)*-.07),calc(var(--my)*-.07),0);transition:transform .22s ease-out;} #pricing .uds-reim-eyebrow{display:flex;align-items:center;gap:10px;color:#ff596b;font-size:10px;font-weight:850;letter-spacing:.17em;margin-bottom:24px;} #pricing .uds-reim-eyebrow>i{width:7px;height:7px;border-radius:50%;background:#ff304b;box-shadow:0 0 14px #ff304b;animation:udsReimPulse 1.8s ease-in-out infinite;} #pricing .uds-reim-eyebrow b{margin-left:auto;color:#76666a;font-size:9px;letter-spacing:.14em;} @keyframes udsReimPulse{50%{opacity:.4;box-shadow:0 0 3px #ff304b}} #pricing .uds-reim-copy h2{margin:0;color:#fff;font-size:clamp(46px,5.1vw,84px);line-height:.86;letter-spacing:-.065em;font-weight:950;text-transform:uppercase;text-shadow:0 5px 30px rgba(0,0,0,.4);} #pricing .uds-reim-copy h2 span{color:#f1e9e9;text-shadow:0 0 1px #fff,0 8px 35px rgba(255,30,55,.16);} #pricing .uds-reim-copy h2 em{font-style:normal;color:#ff314b;text-shadow:0 0 30px rgba(255,30,55,.35);} #pricing .uds-reim-sub{margin:21px 0 23px;color:#b9afb1;font-size:14px;line-height:1.7;} #pricing .uds-reim-sub strong{color:#f5eff0;font-weight:650;} #pricing .uds-reim-price-wrap{position:relative;overflow:hidden;padding:18px 22px 16px;border:1px solid rgba(255,64,84,.56);border-radius:13px;background:linear-gradient(120deg,rgba(36,11,15,.86),rgba(13,9,10,.88) 72%);box-shadow:0 15px 55px rgba(0,0,0,.32),inset 0 0 34px rgba(255,34,57,.06);} #pricing .uds-reim-price-wrap:before{content:"";position:absolute;top:0;left:-45%;width:35%;height:1px;background:linear-gradient(90deg,transparent,#ffb0b8,transparent);animation:udsReimSweep 5s ease-in-out infinite;} @keyframes udsReimSweep{0%,25%{left:-45%}75%,100%{left:115%}} #pricing .uds-reim-price-top{display:flex;align-items:center;justify-content:space-between;gap:12px;color:#ff6978;font-size:9px;letter-spacing:.15em;font-weight:850;} #pricing .uds-reim-live{display:flex;align-items:center;gap:7px;color:#a89b9e;font-size:8px;letter-spacing:.09em;} #pricing .uds-reim-live i{width:6px;height:6px;border-radius:50%;background:#64dca2;box-shadow:0 0 8px #64dca2;} #pricing .uds-reim-price{display:flex;align-items:baseline;gap:5px;margin:4px 0 0;white-space:nowrap;} #pricing .uds-reim-currency{font-size:clamp(24px,2.8vw,42px);font-weight:850;color:#ff4a5e;align-self:flex-start;margin-top:13px;} #pricing .uds-reim-price strong{font-size:clamp(66px,7vw,108px);line-height:.95;letter-spacing:-.075em;font-weight:950;color:#fff;background:linear-gradient(180deg,#fff 8%,#ffdadd 38%,#ff344d 100%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 5px 22px rgba(255,30,55,.16));} #pricing .uds-reim-per{font-size:13px;font-weight:900;letter-spacing:.06em;color:#fff;margin-left:6px;} #pricing .uds-reim-price-foot{display:flex;align-items:center;gap:12px;margin-top:6px;color:#938589;font-size:8px;letter-spacing:.14em;font-weight:750;} #pricing .uds-reim-price-foot del{font-size:15px;color:#c1b5b8;letter-spacing:0;} #pricing .uds-reim-price-foot b{margin-left:auto;padding:5px 7px;border-radius:4px;background:#ff344b;color:white;font-size:9px;letter-spacing:.06em;} #pricing .uds-reim-services-label{display:flex;justify-content:space-between;align-items:center;margin:23px 0 10px;color:#8d7f83;font-size:9px;letter-spacing:.16em;font-weight:850;} #pricing .uds-reim-services-label span{color:#ff4b61;font-size:17px;} #pricing .uds-reim-services{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px;} #pricing .uds-reim-services button{position:relative;min-width:0;min-height:83px;padding:10px 4px 9px;border:1px solid rgba(255,255,255,.11);border-radius:8px;background:linear-gradient(145deg,rgba(28,25,27,.82),rgba(9,8,9,.92));color:#a9a0a2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;cursor:pointer;transition:transform .2s ease,border-color .2s ease,background .2s ease,box-shadow .2s ease;} #pricing .uds-reim-services button:hover,#pricing .uds-reim-services button:focus-visible{transform:translateY(-5px);border-color:rgba(255,69,89,.8);box-shadow:0 8px 24px rgba(255,34,58,.14);outline:none;} #pricing .uds-reim-services button.is-active{border-color:#ff4258;background:linear-gradient(145deg,rgba(79,14,24,.78),rgba(15,9,11,.95));color:#fff;box-shadow:inset 0 0 20px rgba(255,35,58,.12),0 0 18px rgba(255,35,58,.07);} #pricing .uds-reim-services button>span{font-size:22px;line-height:1;color:#ff455b;text-shadow:0 0 14px rgba(255,40,62,.4);margin-bottom:3px;} #pricing .uds-reim-services button b,#pricing .uds-reim-services button small{font-size:8px;line-height:1.15;font-weight:850;letter-spacing:.02em;text-align:center;} #pricing .uds-reim-services button small{color:#9f9296;} #pricing .uds-reim-service-detail{display:grid;grid-template-columns:100px minmax(0,1fr);gap:4px 13px;align-items:center;min-height:61px;padding:12px 0 8px;border-bottom:1px solid rgba(255,255,255,.1);} #pricing .uds-reim-detail-index{grid-row:span 2;color:#ff5368;font-size:8px;font-weight:850;letter-spacing:.12em;} #pricing .uds-reim-service-detail strong{font-size:11px;color:#fff;letter-spacing:.07em;} #pricing .uds-reim-service-detail p{margin:0;color:#9c9093;font-size:10px;line-height:1.4;} #pricing .uds-reim-actions{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:17px;} #pricing .uds-reim-cta{display:inline-flex;align-items:center;justify-content:space-between;gap:23px;padding:15px 18px;min-width:215px;border-radius:7px;background:linear-gradient(110deg,#ff5266,#e91431);color:white;text-decoration:none;font-size:10px;font-weight:950;letter-spacing:.08em;box-shadow:0 7px 25px rgba(255,20,49,.24);transition:transform .2s ease,box-shadow .2s ease;} #pricing .uds-reim-cta span{font-size:19px;transition:transform .2s ease;} #pricing .uds-reim-cta:hover{transform:translateY(-3px);box-shadow:0 12px 35px rgba(255,20,49,.38);} #pricing .uds-reim-cta:hover span{transform:translate(3px,-3px);} #pricing .uds-reim-micro{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:5px 8px;color:#a3989b;font-size:7px;font-weight:850;letter-spacing:.05em;line-height:1.7;} #pricing .uds-reim-micro i{font-style:normal;color:#ff4a60;} #pricing .uds-reim-character-tag{position:absolute;left:clamp(22px,4vw,68px);bottom:78px;display:grid;grid-template-columns:27px auto;gap:3px 10px;align-items:center;text-shadow:0 2px 14px #000;pointer-events:none;} #pricing .uds-reim-character-tag>span{grid-row:span 2;width:27px;height:27px;display:grid;place-items:center;border:1px solid #ff4058;border-radius:50%;font-size:9px;color:#ff5368;} #pricing .uds-reim-character-tag b{font-size:10px;letter-spacing:.13em;color:white;} #pricing .uds-reim-character-tag small{font-size:7px;letter-spacing:.11em;color:#c1b3b7;} #pricing .uds-reim-bottom-line{position:absolute;left:clamp(22px,4vw,68px);right:clamp(22px,4vw,68px);bottom:22px;display:flex;justify-content:space-between;gap:15px;padding-top:13px;border-top:1px solid rgba(255,255,255,.13);color:#7f7377;font-size:8px;font-weight:800;letter-spacing:.12em;} #pricing .uds-reim-bottom-line span:first-child{color:#c8b9bd;} #pricing .uds-why-wrap{position:relative;z-index:2;} @media(max-width:1050px){#pricing .uds-reim-scene{min-height:740px;padding:36px 28px 65px;grid-template-columns:.8fr 1.2fr;}#pricing .uds-reim-art{width:66%;left:-10%;}#pricing .uds-reim-copy h2{font-size:clamp(46px,6vw,68px);}#pricing .uds-reim-price strong{font-size:clamp(64px,8vw,90px);}#pricing .uds-reim-micro{display:none;}#pricing .uds-reim-character-tag{left:26px;bottom:78px;}} @media(max-width:700px){#pricing .uds-reim-scene{height:auto;min-height:0;display:flex;flex-direction:column;align-items:stretch;padding:clamp(340px,95vw,470px) 20px 66px;gap:0;}#pricing .uds-reim-art{left:0;top:0;bottom:auto;width:100%;height:490px;transform:translate3d(calc(var(--mx)*.15),calc(var(--my)*.12),0) scale(1.03);}#pricing .uds-reim-art img{object-position:22% center;}#pricing .uds-reim-art:after{background:linear-gradient(180deg,transparent 34%,rgba(5,5,6,.2) 52%,#050506 96%),linear-gradient(90deg,transparent 30%,rgba(5,5,6,.3) 100%);}#pricing .uds-reim-ring-a{width:280px;height:280px;left:7%;top:10%;}#pricing .uds-reim-ring-b{width:350px;height:350px;left:-3%;top:4%;}#pricing .uds-reim-copy{width:100%;max-width:none;justify-self:stretch;}#pricing .uds-reim-eyebrow{font-size:8px;margin-bottom:17px;}#pricing .uds-reim-copy h2{font-size:clamp(45px,12vw,68px);}#pricing .uds-reim-sub{font-size:12px;margin:16px 0 18px;}#pricing .uds-reim-price-wrap{padding:15px 16px 13px;}#pricing .uds-reim-price strong{font-size:clamp(66px,19vw,92px);}#pricing .uds-reim-currency{font-size:30px;margin-top:11px;}#pricing .uds-reim-per{font-size:10px;}#pricing .uds-reim-services{gap:5px;}#pricing .uds-reim-services button{min-height:73px;border-radius:6px;padding:8px 2px;}#pricing .uds-reim-services button>span{font-size:18px;}#pricing .uds-reim-services button b,#pricing .uds-reim-services button small{font-size:7px;}#pricing .uds-reim-service-detail{grid-template-columns:78px minmax(0,1fr);}#pricing .uds-reim-detail-index{font-size:7px;}#pricing .uds-reim-service-detail p{font-size:9px;}#pricing .uds-reim-actions{align-items:stretch;flex-direction:column;}#pricing .uds-reim-cta{width:100%;min-width:0;}#pricing .uds-reim-character-tag{top:285px;bottom:auto;left:20px;}#pricing .uds-reim-bottom-line{left:20px;right:20px;bottom:18px;font-size:6px;letter-spacing:.06em;flex-wrap:wrap;}#pricing .uds-reim-bottom-line span:nth-child(2){display:none;}#pricing .uds-why-wrap{width:calc(100% - 30px)!important;}} @media(prefers-reduced-motion:reduce){#pricing .uds-reim-ring,#pricing .uds-reim-eyebrow>i,#pricing .uds-reim-price-wrap:before{animation:none!important;}#pricing .uds-reim-art,#pricing .uds-reim-copy{transition:none!important;}} /* Transparent mascot layer for the bespoke UDS composition */ #pricing .uds-reim-art{left:1%;top:3%;bottom:4%;width:55%;overflow:visible;transform:translate3d(calc(var(--mx)*.34),calc(var(--my)*.25),0) rotateY(var(--ry)) rotateX(var(--rx)) scale(1.025);} #pricing .uds-reim-art:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 60%,rgba(5,5,6,.15) 82%,#050506 100%);pointer-events:none;} #pricing .uds-reim-art img{width:100%;height:100%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 0 32px rgba(255,24,50,.15)) saturate(1.08) contrast(1.04);} @media(max-width:700px){#pricing .uds-reim-art{left:-2%;top:0;bottom:auto;width:100%;height:450px;overflow:visible;}#pricing .uds-reim-art img{object-fit:contain;object-position:left bottom;width:90%;margin-left:-2%;}#pricing .uds-reim-art:after{background:linear-gradient(180deg,transparent 40%,rgba(5,5,6,.25) 65%,#050506 100%);}} /* UDS cinematic background pass — background artwork is a separate layer behind the mascot */ #pricing .uds-reim-scene{ background-color:#050506; background-image:linear-gradient(90deg,rgba(4,4,5,.02) 0%,rgba(4,4,5,.02) 43%,rgba(4,4,5,.48) 62%,rgba(4,4,5,.7) 100%),url('uds-cinematic-background.webp'); background-size:cover; background-position:center center; background-repeat:no-repeat; } #pricing .uds-reim-light,#pricing .uds-reim-grid,#pricing .uds-reim-ring{display:none!important;} #pricing .uds-reim-art{z-index:1;} #pricing .uds-reim-copy{position:relative;z-index:2;text-shadow:0 2px 18px rgba(0,0,0,.35);} #pricing .uds-reim-character-tag,#pricing .uds-reim-bottom-line{z-index:3;} @media(max-width:1050px){ #pricing .uds-reim-scene{background-position:42% center;background-image:linear-gradient(90deg,rgba(4,4,5,.04) 0%,rgba(4,4,5,.18) 40%,rgba(4,4,5,.74) 100%),url('uds-cinematic-background.webp');} } @media(max-width:700px){ #pricing .uds-reim-scene{background-size:auto 530px;background-position:30% top;background-repeat:no-repeat;background-color:#050506;background-image:linear-gradient(180deg,rgba(4,4,5,0) 0%,rgba(4,4,5,.08) 38%,#050506 82%),url('uds-cinematic-background.webp');} #pricing .uds-reim-art{z-index:1;} } /* UDS v17 — make the neon circular energy strips originate at the mascot's pointing fingertip */ #pricing .uds-reim-scene{overflow:hidden;} #pricing .uds-reim-scene:before{content:"";position:absolute;z-index:0;pointer-events:none;left:39.8%;top:12.5%;width:clamp(170px,26vw,430px);aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);background:repeating-radial-gradient(circle at center,transparent 0 21px,rgba(255,36,58,.92) 22px 24px,rgba(255,36,58,.13) 25px 28px,transparent 29px 47px);filter:drop-shadow(0 0 8px rgba(255,25,50,.8)) drop-shadow(0 0 24px rgba(255,20,45,.36));opacity:.86;mix-blend-mode:screen;animation:uds-fingertip-rings 7s ease-in-out infinite;} #pricing .uds-reim-scene:after{content:"";position:absolute;z-index:0;pointer-events:none;left:39.8%;top:12.5%;width:clamp(260px,48vw,760px);height:clamp(100px,18vw,260px);border:1px solid rgba(255,39,61,.72);border-radius:50%;transform:translate(-50%,-50%) rotate(-14deg);box-shadow:0 0 12px rgba(255,30,52,.5),inset 0 0 12px rgba(255,30,52,.18);background:radial-gradient(ellipse at 50% 50%,rgba(255,25,45,.08),transparent 64%);mix-blend-mode:screen;animation:uds-fingertip-orbit 10s linear infinite;} #pricing .uds-reim-art{z-index:1;} #pricing .uds-reim-copy{z-index:2;} #pricing .uds-reim-character-tag,#pricing .uds-reim-bottom-line{z-index:3;} @keyframes uds-fingertip-rings{0%,100%{scale:.96;opacity:.7;}50%{scale:1.06;opacity:1;}} @keyframes uds-fingertip-orbit{0%{transform:translate(-50%,-50%) rotate(-14deg) rotate(0deg) scaleX(.96);}50%{transform:translate(-50%,-50%) rotate(-14deg) rotate(180deg) scaleX(1.04);}100%{transform:translate(-50%,-50%) rotate(-14deg) rotate(360deg) scaleX(.96);}} @media(max-width:1050px){#pricing .uds-reim-scene:before{left:39%;top:11%;width:clamp(160px,31vw,320px);}#pricing .uds-reim-scene:after{left:39%;top:11%;width:clamp(240px,55vw,520px);}} @media(max-width:700px){#pricing .uds-reim-scene:before{left:31%;top:11%;width:clamp(150px,48vw,240px);}#pricing .uds-reim-scene:after{left:31%;top:11%;width:clamp(230px,82vw,390px);height:clamp(90px,28vw,150px);}} @media(prefers-reduced-motion:reduce){#pricing .uds-reim-scene:before,#pricing .uds-reim-scene:after{animation:none!important;}} /* UDS v18 — use the supplied wide composition as one seamless cinematic scene. The artwork itself contains the mascot and fingertip rings, so disable duplicate layers. */ #pricing .uds-reim-scene{ background-color:#050506!important; background-image:linear-gradient(90deg,rgba(4,4,5,0) 0%,rgba(4,4,5,0) 48%,rgba(4,4,5,.12) 64%,rgba(4,4,5,.24) 100%),url('uds-cinematic-background.webp')!important; background-size:cover!important; background-position:center center!important; background-repeat:no-repeat!important; } #pricing .uds-reim-art{display:none!important;} #pricing .uds-reim-scene:before,#pricing .uds-reim-scene:after{display:none!important;} #pricing .uds-reim-ring-a,#pricing .uds-reim-ring-b{display:none!important;} @media(max-width:700px){ #pricing .uds-reim-scene{background-size:auto 100%!important;background-position:26% top!important;background-repeat:no-repeat!important;} } /* V19: full-body UDS composition — keep the complete mascot visible */ #pricing .uds-reim-scene{background-size:100% 100%!important;background-position:center center!important;background-repeat:no-repeat!important;} @media(max-width:1100px){#pricing .uds-reim-scene{background-size:auto 100%!important;background-position:34% center!important;}} @media(max-width:620px){#pricing .uds-reim-scene{background-size:auto 100%!important;background-position:35% center!important;}} /* V20 — preserve the cinematic artwork's native proportions; never stretch the image to the viewport. */ @media (min-width: 1051px) { #pricing .uds-reim-scene { height: auto !important; min-height: 0 !important; aspect-ratio: 16 / 9 !important; background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important; } } @media (min-width: 701px) and (max-width: 1050px) { #pricing .uds-reim-scene { height: auto !important; min-height: 740px !important; aspect-ratio: 4 / 3 !important; background-size: cover !important; background-position: 42% center !important; background-repeat: no-repeat !important; } } @media (max-width: 700px) { #pricing .uds-reim-scene { aspect-ratio: auto !important; background-size: auto 530px !important; background-position: 25% top !important; background-repeat: no-repeat !important; } } /* V21 — glassmorphism pricing panel inspired by the supplied portfolio reference */ #pricing .uds-reim-scene{ display:flex!important; align-items:center!important; justify-content:flex-end!important; position:relative!important; isolation:isolate!important; overflow:hidden!important; min-height:clamp(760px,58vw,1000px)!important; height:auto!important; aspect-ratio:16/9!important; padding:clamp(26px,3.6vw,64px) clamp(22px,4.2vw,76px) 68px!important; background-color:#050506!important; background-size:cover!important; background-position:center!important; } #pricing .uds-reim-copy{ box-sizing:border-box!important; flex:0 1 48%!important; width:min(48%,700px)!important; max-width:700px!important; margin:0 0 0 auto!important; padding:clamp(22px,2.5vw,42px)!important; border:1px solid rgba(255,255,255,.24)!important; border-radius:26px!important; background:linear-gradient(135deg,rgba(18,16,21,.74),rgba(7,7,10,.60) 58%,rgba(48,8,17,.44))!important; -webkit-backdrop-filter:blur(22px) saturate(135%)!important; backdrop-filter:blur(22px) saturate(135%)!important; box-shadow:0 24px 90px rgba(0,0,0,.46),inset 0 1px 0 rgba(255,255,255,.13),0 0 50px rgba(255,30,65,.08)!important; transform:translate3d(calc(var(--mx)*-.035),calc(var(--my)*-.035),0)!important; transition:transform .25s ease-out,border-color .25s ease,background .25s ease!important; } #pricing .uds-reim-copy:before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;background:radial-gradient(ellipse at 100% 0%,rgba(255,40,75,.12),transparent 48%);} #pricing .uds-reim-copy:hover{border-color:rgba(255,66,96,.48)!important;box-shadow:0 28px 100px rgba(0,0,0,.52),inset 0 1px 0 rgba(255,255,255,.17),0 0 55px rgba(255,30,65,.12)!important;} #pricing .uds-reim-price-wrap{background:linear-gradient(125deg,rgba(255,255,255,.075),rgba(10,8,12,.36) 60%,rgba(255,40,75,.09))!important;border-color:rgba(255,85,110,.46)!important;border-radius:17px!important;backdrop-filter:blur(12px)!important;} #pricing .uds-reim-services button{border-radius:15px!important;background:linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.025))!important;border:1px solid rgba(255,255,255,.13)!important;backdrop-filter:blur(10px)!important;transition:transform .25s ease,border-color .25s ease,background .25s ease,box-shadow .25s ease!important;} #pricing .uds-reim-services button:hover{transform:translateY(-4px)!important;border-color:rgba(255,59,90,.65)!important;box-shadow:0 10px 28px rgba(255,30,65,.13)!important;} #pricing .uds-reim-services button.is-active{border-color:rgba(255,54,87,.9)!important;background:linear-gradient(145deg,rgba(255,36,70,.23),rgba(255,255,255,.045))!important;box-shadow:inset 0 0 25px rgba(255,36,70,.09),0 0 20px rgba(255,36,70,.10)!important;} #pricing .uds-reim-cta{border-radius:14px!important;box-shadow:0 10px 34px rgba(255,32,66,.25)!important;transition:transform .22s ease,box-shadow .22s ease!important;} #pricing .uds-reim-cta:hover{transform:translateY(-3px)!important;box-shadow:0 15px 42px rgba(255,32,66,.38)!important;} #pricing .uds-reim-service-detail{border-top-color:rgba(255,255,255,.18)!important;} @media(min-width:701px) and (max-width:1050px){ #pricing .uds-reim-scene{aspect-ratio:4/5!important;min-height:900px!important;align-items:flex-end!important;padding:36px 26px 72px!important;background-position:34% center!important;} #pricing .uds-reim-copy{width:min(74%,650px)!important;flex-basis:74%!important;margin-left:auto!important;padding:26px!important;} } @media(max-width:700px){ #pricing .uds-reim-scene{display:flex!important;flex-direction:column!important;justify-content:flex-end!important;align-items:stretch!important;aspect-ratio:auto!important;min-height:0!important;padding:clamp(330px,92vw,450px) 14px 62px!important;gap:0!important;background-size:auto 520px!important;background-position:24% top!important;background-repeat:no-repeat!important;} #pricing .uds-reim-copy{width:100%!important;max-width:none!important;flex:0 0 auto!important;margin:0!important;padding:22px 17px!important;border-radius:22px!important;background:linear-gradient(145deg,rgba(16,14,18,.82),rgba(7,7,9,.76))!important;-webkit-backdrop-filter:blur(18px)!important;backdrop-filter:blur(18px)!important;} #pricing .uds-reim-copy h2{font-size:clamp(39px,10.5vw,60px)!important;line-height:.91!important;} #pricing .uds-reim-price-wrap{border-radius:14px!important;} #pricing .uds-reim-services button{border-radius:12px!important;min-height:70px!important;} #pricing .uds-reim-character-tag{display:none!important;} } @media(prefers-reduced-motion:reduce){#pricing .uds-reim-copy,#pricing .uds-reim-services button,#pricing .uds-reim-cta{transition:none!important;}} /* V22 — enlarge the glass pricing panel by roughly 40% on desktop */ @media (min-width:1051px){ #pricing .uds-reim-copy{ flex:0 1 62%!important; width:min(62%,920px)!important; max-width:920px!important; padding:clamp(30px,3vw,50px)!important; border-radius:30px!important; } #pricing .uds-reim-copy h2{font-size:clamp(48px,4.2vw,78px)!important;line-height:.92!important;} #pricing .uds-reim-price-wrap{padding:clamp(22px,2vw,34px)!important;} } @media (min-width:701px) and (max-width:1050px){ #pricing .uds-reim-copy{width:min(86%,760px)!important;flex-basis:86%!important;} } /* V23 — red-neon glass interaction inspired by the reference UI/UX tile */ #pricing .uds-reim-copy{ position:relative!important; overflow:visible!important; border:1px solid rgba(255,78,105,.58)!important; background:linear-gradient(145deg,rgba(22,12,18,.78),rgba(7,7,10,.64) 58%,rgba(42,5,15,.70))!important; -webkit-backdrop-filter:blur(26px) saturate(145%)!important; backdrop-filter:blur(26px) saturate(145%)!important; box-shadow:0 28px 100px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.18),inset 0 0 50px rgba(255,34,69,.07),0 0 38px rgba(255,24,62,.13)!important; } #pricing .uds-reim-copy:before{ content:""!important; position:absolute!important; inset:-1px!important; border-radius:inherit!important; pointer-events:none!important; z-index:-1!important; background:radial-gradient(ellipse at 12% 42%,rgba(255,34,68,.19),transparent 42%),radial-gradient(ellipse at 100% 8%,rgba(255,62,94,.16),transparent 44%),linear-gradient(125deg,rgba(255,255,255,.055),transparent 38%,rgba(255,25,65,.055))!important; animation:uds-red-glass-breathe 5s ease-in-out infinite alternate!important; } #pricing .uds-reim-copy:after{ content:"✦"!important; position:absolute!important; z-index:3!important; top:clamp(24px,2.5vw,40px)!important; right:clamp(22px,2.5vw,40px)!important; width:38px!important; height:38px!important; display:grid!important; place-items:center!important; border-radius:12px!important; color:#fff!important; font-size:18px!important; line-height:1!important; border:1px solid rgba(255,98,122,.55)!important; background:linear-gradient(145deg,rgba(255,56,86,.24),rgba(20,7,12,.58))!important; box-shadow:0 0 22px rgba(255,28,67,.22),inset 0 1px 0 rgba(255,255,255,.18)!important; backdrop-filter:blur(12px)!important; animation:uds-red-float 4s ease-in-out infinite!important; pointer-events:none!important; } #pricing .uds-reim-price-wrap{ position:relative!important; overflow:hidden!important; border:1px solid rgba(255,79,108,.72)!important; background:linear-gradient(130deg,rgba(255,255,255,.09),rgba(12,8,12,.47) 48%,rgba(94,7,27,.24))!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.15),inset 0 0 32px rgba(255,35,70,.07),0 0 26px rgba(255,28,67,.09)!important; -webkit-backdrop-filter:blur(18px) saturate(145%)!important; backdrop-filter:blur(18px) saturate(145%)!important; } #pricing .uds-reim-price-wrap:before{ content:""!important; position:absolute!important; top:-70%!important; left:-35%!important; width:52%!important; height:240%!important; pointer-events:none!important; background:linear-gradient(90deg,transparent,rgba(255,255,255,.055),rgba(255,53,86,.075),transparent)!important; transform:rotate(22deg)!important; animation:uds-red-glass-sweep 8s ease-in-out infinite!important; } #pricing .uds-reim-services button{ box-shadow:inset 0 1px 0 rgba(255,255,255,.11),inset 0 0 22px rgba(255,35,72,.025)!important; } #pricing .uds-reim-services button:hover,#pricing .uds-reim-services button.is-active{ box-shadow:inset 0 1px 0 rgba(255,255,255,.2),inset 0 0 28px rgba(255,35,72,.13),0 0 24px rgba(255,32,69,.16)!important; } @keyframes uds-red-glass-breathe{from{opacity:.62;filter:blur(0)}to{opacity:1;filter:blur(2px)}} @keyframes uds-red-float{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-5px) rotate(4deg)}} @keyframes uds-red-glass-sweep{0%,20%{left:-50%;opacity:0}38%{opacity:.9}65%,100%{left:125%;opacity:0}} @media(max-width:700px){#pricing .uds-reim-copy:after{top:17px!important;right:17px!important;width:30px!important;height:30px!important;border-radius:9px!important;font-size:15px!important}} @media(prefers-reduced-motion:reduce){#pricing .uds-reim-copy:before,#pricing .uds-reim-copy:after,#pricing .uds-reim-price-wrap:before{animation:none!important}} /* V24 — make the red glass treatment unmistakable and layer-safe */ #pricing .uds-reim-copy{ position:relative!important; isolation:isolate!important; overflow:visible!important; border:1px solid rgba(255,66,96,.92)!important; background:linear-gradient(145deg,rgba(32,11,20,.76),rgba(5,6,9,.72) 52%,rgba(64,7,23,.66))!important; -webkit-backdrop-filter:blur(30px) saturate(160%)!important; backdrop-filter:blur(30px) saturate(160%)!important; box-shadow:0 26px 90px rgba(0,0,0,.58),inset 0 1px 0 rgba(255,255,255,.24),inset 0 0 70px rgba(255,22,60,.12),0 0 24px rgba(255,28,67,.30),0 0 70px rgba(255,20,58,.18)!important; } #pricing .uds-reim-copy:before{ content:""!important; position:absolute!important; inset:0!important; z-index:0!important; border-radius:inherit!important; pointer-events:none!important; background:radial-gradient(ellipse at 0% 42%,rgba(255,28,64,.30),transparent 42%),radial-gradient(ellipse at 100% 0%,rgba(255,50,86,.22),transparent 45%),linear-gradient(125deg,rgba(255,255,255,.10),transparent 35%,rgba(255,20,62,.10))!important; animation:uds-red-glass-breathe-v24 3.8s ease-in-out infinite alternate!important; } #pricing .uds-reim-copy > *{position:relative!important;z-index:1!important;} #pricing .uds-reim-copy:after{ content:"▦"!important; position:absolute!important; z-index:5!important; top:-19px!important; right:28px!important; width:58px!important; height:58px!important; display:grid!important; place-items:center!important; border:1px solid rgba(255,104,128,.95)!important; border-radius:16px!important; color:#fff!important; font-size:26px!important; line-height:1!important; background:linear-gradient(145deg,rgba(255,43,78,.45),rgba(28,8,16,.72))!important; box-shadow:0 0 18px rgba(255,25,65,.55),0 0 42px rgba(255,25,65,.25),inset 0 1px 0 rgba(255,255,255,.35)!important; -webkit-backdrop-filter:blur(18px) saturate(160%)!important; backdrop-filter:blur(18px) saturate(160%)!important; animation:uds-red-float-v24 3.2s ease-in-out infinite!important; pointer-events:none!important; } #pricing .uds-reim-price-wrap{ border:1px solid rgba(255,65,96,.95)!important; border-radius:20px!important; background:linear-gradient(135deg,rgba(255,255,255,.13),rgba(12,7,12,.43) 50%,rgba(100,5,28,.34))!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.24),inset 0 0 44px rgba(255,26,66,.13),0 0 18px rgba(255,25,64,.25),0 0 42px rgba(255,25,64,.12)!important; -webkit-backdrop-filter:blur(22px) saturate(160%)!important; backdrop-filter:blur(22px) saturate(160%)!important; } #pricing .uds-reim-price-wrap:after{ content:""!important; position:absolute!important; inset:0!important; pointer-events:none!important; border-radius:inherit!important; background:linear-gradient(110deg,transparent 15%,rgba(255,255,255,.10) 33%,rgba(255,54,89,.12) 40%,transparent 57%)!important; transform:translateX(-110%) skewX(-12deg)!important; animation:uds-red-glass-sweep-v24 5.8s ease-in-out infinite!important; } #pricing .uds-reim-services button{border-color:rgba(255,255,255,.18)!important;background:linear-gradient(145deg,rgba(255,255,255,.09),rgba(15,8,13,.46))!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 4px 18px rgba(0,0,0,.20)!important;} #pricing .uds-reim-services button:hover,#pricing .uds-reim-services button.is-active{border-color:rgba(255,67,98,.98)!important;background:linear-gradient(145deg,rgba(255,38,74,.34),rgba(35,7,16,.58))!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.24),inset 0 0 32px rgba(255,35,72,.18),0 0 28px rgba(255,32,69,.28)!important;} #pricing .uds-reim-cta{background:linear-gradient(105deg,#ff244d,#e90c37 52%,#ff4265)!important;box-shadow:0 0 18px rgba(255,30,68,.45),0 12px 38px rgba(255,25,64,.28),inset 0 1px 0 rgba(255,255,255,.35)!important;} #pricing .uds-reim-cta:hover{box-shadow:0 0 28px rgba(255,30,68,.65),0 16px 46px rgba(255,25,64,.38),inset 0 1px 0 rgba(255,255,255,.42)!important;} @keyframes uds-red-glass-breathe-v24{from{opacity:.65}to{opacity:1}} @keyframes uds-red-float-v24{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-7px) rotate(4deg)}} @keyframes uds-red-glass-sweep-v24{0%,22%{transform:translateX(-110%) skewX(-12deg);opacity:0}35%{opacity:1}68%,100%{transform:translateX(110%) skewX(-12deg);opacity:0}} @media(max-width:700px){#pricing .uds-reim-copy:after{top:-12px!important;right:18px!important;width:42px!important;height:42px!important;border-radius:12px!important;font-size:19px!important;}} @media(prefers-reduced-motion:reduce){#pricing .uds-reim-copy:before,#pricing .uds-reim-copy:after,#pricing .uds-reim-price-wrap:after{animation:none!important}} /* V25 — scale the cinematic character scene down for better balance with the glass panel */ @media (min-width: 1051px){ #pricing .uds-reim-scene{ min-height:0!important; height:auto!important; aspect-ratio:16/9!important; background-color:#050506!important; background-size:84% auto!important; background-position:left center!important; background-repeat:no-repeat!important; } #pricing .uds-reim-copy{ flex:0 1 56%!important; width:min(56%,840px)!important; max-width:840px!important; padding:clamp(26px,2.5vw,42px)!important; } } @media (min-width:701px) and (max-width:1050px){ #pricing .uds-reim-scene{ background-size:92% auto!important; background-position:left center!important; } } @media (max-width:700px){ #pricing .uds-reim-scene{ background-size:auto 450px!important; background-position:18% top!important; } } /* V26: real-time layered 3D interaction — no stretched bitmap */ #pricing .uds-reim-scene{--depth-x:0px;--depth-y:0px;--glass-rx:0deg;--glass-ry:0deg;background-image:none!important;background:#050506!important;perspective:1600px!important;transform-style:preserve-3d;} #pricing .uds-reim-scene::before{content:"";position:absolute;inset:-2% 0;z-index:0;pointer-events:none;background:linear-gradient(90deg,transparent 0%,rgba(5,5,6,.04) 36%,rgba(5,5,6,.65) 73%,#050506 100%),url('uds-cinematic-background.webp') left center / 84% auto no-repeat;transform:translate3d(calc(var(--depth-x)*-.35),calc(var(--depth-y)*-.25),-20px) scale(1.025);transition:transform .25s ease-out;will-change:transform;} #pricing .uds-reim-scene::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse 36% 40% at calc(30% + var(--depth-x)) calc(38% + var(--depth-y)),rgba(255,36,67,.16),transparent 75%);mix-blend-mode:screen;} #pricing .uds-reim-copy{position:relative!important;z-index:2!important;transform:perspective(1400px) rotateX(var(--glass-rx)) rotateY(var(--glass-ry)) translate3d(calc(var(--depth-x)*.08),calc(var(--depth-y)*.08),0)!important;transition:transform .22s ease-out,box-shadow .3s ease!important;transform-style:preserve-3d;} #pricing .uds-reim-copy:hover{box-shadow:0 24px 95px rgba(0,0,0,.58),0 0 42px rgba(255,31,66,.22),inset 0 1px rgba(255,255,255,.15)!important;} #pricing .uds-reim-price-wrap{transform:translateZ(16px);transition:transform .3s ease,box-shadow .3s ease!important;} #pricing .uds-reim-price-wrap:hover{transform:translateZ(26px) scale(1.012);} #pricing .uds-reim-services button{transform:translateZ(9px);transition:transform .24s ease,box-shadow .24s ease,background .24s ease!important;} #pricing .uds-reim-services button:hover{transform:translate3d(0,-7px,26px) rotateX(4deg)!important;} #pricing .uds-reim-cta{transition:transform .25s ease,box-shadow .25s ease!important;} #pricing .uds-reim-cta:hover{transform:translate3d(0,-4px,24px) scale(1.025)!important;} @media(min-width:1051px){#pricing .uds-reim-scene::before{background-size:84% auto;}} @media(min-width:701px) and (max-width:1050px){#pricing .uds-reim-scene::before{background-size:92% auto;}} @media(max-width:700px){#pricing .uds-reim-scene::before{inset:0;background:linear-gradient(180deg,transparent 0%,rgba(5,5,6,.1) 24%,#050506 51%),url('uds-cinematic-background.webp') 18% top / auto 450px no-repeat;transform:none!important;}#pricing .uds-reim-copy{transform:none!important;}#pricing .uds-reim-price-wrap{transform:none!important;}} @media(prefers-reduced-motion:reduce){#pricing .uds-reim-scene::before,#pricing .uds-reim-copy,#pricing .uds-reim-services button{transform:none!important;transition:none!important;}} /* V26: multi-plane perspective scene, no image distortion */ #pricing .uds-reim-scene{perspective:1400px!important;transform-style:preserve-3d!important;background-image:none!important;--depth-x:0px;--depth-y:0px;--depth-rx:0deg;--depth-ry:0deg;--glint-x:50%;--glint-y:40%;} #pricing .uds-depth-world{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;transform-style:preserve-3d;} #pricing .uds-depth-backdrop{position:absolute;inset:0;background-image:url('uds-cinematic-background.webp');background-repeat:no-repeat;background-position:left center;background-size:84% auto;transform:translate3d(calc(var(--depth-x)*.48),calc(var(--depth-y)*.48),-45px) rotateX(calc(var(--depth-rx)*.35)) rotateY(calc(var(--depth-ry)*.35)) scale(1.045);transition:transform .12s ease-out;will-change:transform;} #pricing .uds-depth-world:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 25%,rgba(5,4,7,.2) 55%,rgba(5,4,7,.75) 100%);pointer-events:none;} #pricing .uds-depth-halo{position:absolute;left:21%;top:15%;width:30vw;height:30vw;max-width:490px;max-height:490px;border:1px solid rgba(255,35,70,.16);border-radius:50%;box-shadow:0 0 70px rgba(255,20,55,.15),inset 0 0 80px rgba(255,25,55,.09);transform:translate3d(calc(var(--depth-x)*1.1),calc(var(--depth-y)*1.1),80px);transition:transform .14s ease-out;animation:uds-halo-breathe 5s ease-in-out infinite alternate;} #pricing .uds-depth-orbit{position:absolute;left:13%;top:23%;width:45vw;height:18vw;max-height:280px;border:1px solid rgba(255,65,100,.35);border-radius:50%;transform:translate3d(calc(var(--depth-x)*.85),calc(var(--depth-y)*.85),45px) rotate(-15deg);box-shadow:0 0 22px rgba(255,20,60,.18);transition:transform .14s ease-out;} #pricing .uds-depth-spark{position:absolute;width:8px;height:8px;border-radius:50%;background:#ff5473;box-shadow:0 0 16px 5px rgba(255,24,65,.55);animation:uds-spark-drift 6s ease-in-out infinite alternate;} #pricing .uds-depth-spark-a{left:16%;top:31%}#pricing .uds-depth-spark-b{left:53%;top:69%;animation-delay:-2.7s} #pricing .uds-reim-copy{position:relative!important;z-index:2!important;transform:translate3d(calc(var(--depth-x)*-.22),calc(var(--depth-y)*-.22),65px) rotateY(calc(var(--depth-ry)*-.65)) rotateX(calc(var(--depth-rx)*-.65))!important;transform-style:preserve-3d!important;transition:transform .16s ease-out,box-shadow .3s ease!important;will-change:transform;} #pricing .uds-reim-copy:after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:inherit;background:radial-gradient(circle at var(--glint-x) var(--glint-y),rgba(255,255,255,.085),transparent 33%);mix-blend-mode:screen;} #pricing .uds-reim-price-wrap{transform:translateZ(18px);transition:transform .3s ease,box-shadow .3s ease!important;} #pricing .uds-reim-price-wrap:hover{transform:translateZ(32px) translateY(-4px);box-shadow:0 18px 55px rgba(255,20,65,.22)!important;} #pricing .uds-reim-services button{transform-style:preserve-3d;} #pricing .uds-reim-services button:hover{transform:translateY(-7px) scale(1.035)!important;} #pricing .uds-reim-character-tag,#pricing .uds-reim-bottom-line{z-index:2!important;} @keyframes uds-halo-breathe{from{opacity:.28;filter:blur(0)}to{opacity:.7;filter:blur(2px)}} @keyframes uds-spark-drift{from{transform:translate(-12px,12px);opacity:.25}to{transform:translate(22px,-26px);opacity:.9}} @media(max-width:1050px){#pricing .uds-depth-backdrop{background-size:92% auto;background-position:left center}#pricing .uds-reim-copy{transform:none!important}} @media(max-width:700px){#pricing .uds-depth-backdrop{background-size:auto 450px;background-position:18% top;transform:none!important}#pricing .uds-depth-halo,#pricing .uds-depth-orbit{display:none}} @media(prefers-reduced-motion:reduce){#pricing .uds-depth-backdrop,#pricing .uds-reim-copy{transform:none!important;transition:none!important}#pricing .uds-depth-halo,#pricing .uds-depth-spark{animation:none!important}} /* V27: shift the glass pricing panel left by 20% on desktop */ @media (min-width:1051px){ #pricing .uds-reim-copy{left:-20%!important;} } @media (max-width:1050px){ #pricing .uds-reim-copy{left:0!important;} } /* V28: move pricing panel 10% right from its previous position */ @media (min-width:1051px){ #pricing .uds-reim-copy{left:-10%!important;} } @media (max-width:1050px){ #pricing .uds-reim-copy{left:0!important;} } /* V29: quieter cinematic mascot scene + right-weighted glass pricing panel */ @media (min-width:1051px){ #pricing .uds-depth-backdrop{ background-image:url('uds-minimal-red-character-scene.webp')!important; background-size:auto 100%!important; background-position:left center!important; background-repeat:no-repeat!important; opacity:.98; transform:translate3d(calc(var(--depth-x)*.35),calc(var(--depth-y)*.35),-30px) rotateX(calc(var(--depth-rx)*.22)) rotateY(calc(var(--depth-ry)*.22))!important; } #pricing .uds-reim-art,#pricing .uds-reim-light,#pricing .uds-reim-grid, #pricing .uds-reim-ring{display:none!important;} #pricing .uds-depth-world:after{background:linear-gradient(90deg,transparent 25%,rgba(5,4,7,.12) 48%,rgba(5,4,7,.65) 100%)!important;} #pricing .uds-reim-copy{left:7%!important;max-width:760px!important;width:100%!important;} } @media (min-width:701px) and (max-width:1050px){ #pricing .uds-depth-backdrop{background-image:url('uds-minimal-red-character-scene.webp')!important;background-size:auto 78%!important;background-position:left center!important;background-repeat:no-repeat!important;} #pricing .uds-reim-art,#pricing .uds-reim-light,#pricing .uds-reim-grid,#pricing .uds-reim-ring{display:none!important;} #pricing .uds-reim-copy{left:0!important;} } @media(max-width:700px){ #pricing .uds-depth-backdrop{background-image:url('uds-minimal-red-character-scene.webp')!important;background-size:auto 440px!important;background-position:18% top!important;background-repeat:no-repeat!important;} #pricing .uds-reim-art,#pricing .uds-reim-light,#pricing .uds-reim-grid,#pricing .uds-reim-ring{display:none!important;} #pricing .uds-reim-copy{left:0!important;} } /* V30: restore a clean two-column hero alignment; prevent pricing card clipping */ @media (min-width:1051px){ #pricing .uds-reim-scene{ display:grid!important; grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr)!important; column-gap:clamp(24px,3vw,54px)!important; padding-left:clamp(28px,3.5vw,64px)!important; padding-right:clamp(28px,3.5vw,64px)!important; } #pricing .uds-depth-world{width:100%!important;} #pricing .uds-depth-backdrop{background-size:58% auto!important;background-position:left center!important;} #pricing .uds-reim-copy{ grid-column:2!important;grid-row:1!important; position:relative!important;left:auto!important;right:auto!important; justify-self:stretch!important;align-self:center!important; width:100%!important;max-width:760px!important;min-width:0!important; margin:0!important; } } @media (min-width:701px) and (max-width:1050px){ #pricing .uds-reim-copy{left:auto!important;right:auto!important;width:100%!important;max-width:100%!important;margin:0!important;} } @media (max-width:700px){ #pricing .uds-reim-copy{left:auto!important;right:auto!important;width:100%!important;max-width:100%!important;margin:0!important;} } /* V31: remove baked-in duplicate panel from the scene; use character-only background and align one live glass panel */ #pricing .uds-reim-scene::before{display:none!important;background:none!important;} @media (min-width:1051px){ #pricing .uds-reim-scene{ display:grid!important;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr)!important; column-gap:clamp(22px,2.2vw,38px)!important;align-items:center!important; min-height:min(920px,100svh)!important;height:auto!important;aspect-ratio:16/9!important; padding:clamp(28px,3vw,52px)!important;overflow:hidden!important;background:#050506!important; } #pricing .uds-depth-world{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;overflow:hidden!important;} #pricing .uds-depth-backdrop{background-image:url('uds-minimal-character-only.webp')!important;background-size:auto 92%!important;background-position:left center!important;background-repeat:no-repeat!important;opacity:1!important;transform:translate3d(calc(var(--depth-x)*.28),calc(var(--depth-y)*.2),-25px)!important;} #pricing .uds-depth-world:after{background:linear-gradient(90deg,rgba(5,5,6,0) 0%,rgba(5,5,6,.03) 34%,rgba(5,5,6,.45) 49%,#050506 64%,#050506 100%)!important;} #pricing .uds-reim-copy{grid-column:2!important;grid-row:1!important;justify-self:stretch!important;align-self:center!important;position:relative!important;left:auto!important;right:auto!important;width:100%!important;max-width:none!important;min-width:0!important;margin:0!important;transform:translate3d(calc(var(--depth-x)*-.06),calc(var(--depth-y)*-.06),35px)!important;} } @media (min-width:701px) and (max-width:1050px){ #pricing .uds-depth-backdrop{background-image:url('uds-minimal-character-only.webp')!important;background-size:auto 70%!important;background-position:left center!important;background-repeat:no-repeat!important;} #pricing .uds-depth-world:after{background:linear-gradient(90deg,transparent 15%,rgba(5,5,6,.45) 53%,#050506 100%)!important;} #pricing .uds-reim-copy{left:auto!important;right:auto!important;width:100%!important;max-width:100%!important;margin:0 auto!important;} } @media(max-width:700px){ #pricing .uds-depth-backdrop{background-image:url('uds-minimal-character-only.webp')!important;background-size:auto 390px!important;background-position:20% top!important;background-repeat:no-repeat!important;} #pricing .uds-depth-world:after{background:linear-gradient(180deg,rgba(5,5,6,0) 0%,rgba(5,5,6,.12) 260px,#050506 420px)!important;} } /* V32: restore compact pricing-panel dimensions; never stretch the glass card across the hero */ @media (min-width:1051px){ #pricing .uds-reim-copy{ width:min(100%,760px)!important; max-width:760px!important; justify-self:end!important; align-self:center!important; box-sizing:border-box!important; } #pricing .uds-reim-scene{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr)!important;} } /* V33: subtle composition refinement — slightly larger panel, nudged left, smaller character */ @media (min-width:1051px){ #pricing .uds-reim-scene{grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr)!important;column-gap:clamp(22px,2.2vw,38px)!important;} #pricing .uds-depth-backdrop{background-size:auto 84%!important;background-position:left center!important;} #pricing .uds-reim-copy{width:min(100%,820px)!important;max-width:820px!important;justify-self:center!important;transform:translate3d(calc(var(--depth-x)*-.06 - 2.5%),calc(var(--depth-y)*-.06),35px)!important;} } @media (min-width:701px) and (max-width:1050px){ #pricing .uds-depth-backdrop{background-size:auto 65%!important;background-position:left center!important;} } @media(max-width:700px){ #pricing .uds-depth-backdrop{background-size:auto 365px!important;background-position:20% top!important;} } /* V34: unify character and live glass panel into one cinematic scene; background asset excludes baked-in card */ @media (min-width:1051px){ #pricing .uds-depth-backdrop{background-image:url('uds-minimal-character-only.webp')!important;background-size:cover!important;background-position:center left!important;background-repeat:no-repeat!important;opacity:1!important;transform:translate3d(calc(var(--depth-x)*.18),calc(var(--depth-y)*.14),-25px)!important;} #pricing .uds-depth-world:after{background:linear-gradient(90deg,rgba(4,4,6,0) 0%,rgba(4,4,6,.02) 38%,rgba(4,4,6,.20) 54%,rgba(4,4,6,.50) 68%,rgba(4,4,6,.12) 100%)!important;} #pricing .uds-reim-scene{background:#050507!important;} } @media (min-width:701px) and (max-width:1050px){ #pricing .uds-depth-backdrop{background-image:url('uds-minimal-character-only.webp')!important;background-size:cover!important;background-position:center left!important;background-repeat:no-repeat!important;} } @media (max-width:700px){ #pricing .uds-depth-backdrop{background-image:url('uds-minimal-character-only.webp')!important;background-size:auto 365px!important;background-position:18% top!important;background-repeat:no-repeat!important;} } /* V35: single unified composition — one background character + one live panel */ #pricing.uds-reimagined, #pricing .uds-reim-scene{ background:#050507!important; } #pricing .uds-reim-scene{ min-height: min(920px, 100svh)!important; height: min(920px, 100svh)!important; grid-template-columns:minmax(0, 1.04fr) minmax(520px, .96fr)!important; gap:clamp(18px,2vw,34px)!important; padding:clamp(30px,4vw,64px) clamp(28px,4.8vw,82px) 58px!important; overflow:hidden!important; } #pricing .uds-depth-world{ position:absolute!important;inset:0!important;width:100%!important;height:100%!important; overflow:hidden!important;z-index:-2!important;pointer-events:none!important; } #pricing .uds-depth-backdrop{ background-image:url('uds-minimal-character-only.webp')!important; background-size:100% 100%!important;background-position:center center!important;background-repeat:no-repeat!important; opacity:1!important; transform:translate3d(calc(var(--depth-x)*.12),calc(var(--depth-y)*.10),-20px)!important; } #pricing .uds-depth-world:after{ content:""!important;position:absolute!important;inset:0!important; background:linear-gradient(90deg,rgba(4,4,6,0) 0%,rgba(4,4,6,0) 40%,rgba(4,4,6,.16) 51%,rgba(4,4,6,.28) 64%,rgba(4,4,6,.08) 100%)!important; } #pricing .uds-reim-art, #pricing .uds-reim-light, #pricing .uds-reim-grid, #pricing .uds-reim-ring, #pricing .uds-depth-halo, #pricing .uds-depth-orbit, #pricing .uds-depth-spark{display:none!important;} #pricing .uds-reim-copy{ grid-column:2!important;grid-row:1!important; width:100%!important;max-width:740px!important;min-width:0!important; justify-self:end!important;align-self:center!important; position:relative!important;left:auto!important;right:auto!important; margin:0!important;transform:translate3d(calc(var(--depth-x)*-.025),calc(var(--depth-y)*-.025),20px)!important; z-index:3!important; padding:clamp(22px,2.2vw,36px)!important; border:1px solid rgba(255,70,92,.58)!important; border-radius:28px!important; background:linear-gradient(135deg,rgba(70,14,25,.74),rgba(12,7,11,.82) 54%,rgba(42,5,14,.76))!important; box-shadow:0 0 0 1px rgba(255,60,85,.07) inset,0 18px 80px rgba(0,0,0,.42),0 0 36px rgba(255,35,65,.14)!important; backdrop-filter:blur(14px)!important;-webkit-backdrop-filter:blur(14px)!important; } #pricing .uds-reim-copy:before{ content:""!important;position:absolute!important;inset:0!important;border-radius:inherit!important; background:linear-gradient(110deg,rgba(255,255,255,.055),transparent 35%,rgba(255,35,65,.045) 78%,transparent)!important; pointer-events:none!important;z-index:-1!important; } @media(min-width:1051px){ #pricing .uds-reim-copy h2{font-size:clamp(54px,4.6vw,82px)!important;line-height:.84!important} #pricing .uds-reim-price-wrap{margin-top:22px!important} } @media(min-width:701px) and (max-width:1050px){ #pricing .uds-reim-scene{height:auto!important;min-height:0!important;grid-template-columns:1fr!important;padding:34px 24px 50px!important;gap:24px!important} #pricing .uds-depth-backdrop{background-size:auto 78%!important;background-position:left center!important} #pricing .uds-reim-copy{grid-column:1!important;max-width:760px!important;justify-self:end!important;margin-top:180px!important} } @media(max-width:700px){ #pricing .uds-reim-scene{height:auto!important;min-height:0!important;grid-template-columns:1fr!important;padding:300px 16px 38px!important;gap:0!important} #pricing .uds-depth-backdrop{background-size:auto 330px!important;background-position:18% top!important} #pricing .uds-reim-copy{grid-column:1!important;width:100%!important;max-width:none!important;padding:22px 17px!important;border-radius:22px!important;transform:none!important} #pricing .uds-reim-copy h2{font-size:clamp(42px,12vw,66px)!important} } /* V36: true full-viewport hero; use character-only background across the whole section */ #pricing.uds-reimagined{ width:100vw!important;max-width:none!important; margin-left:calc(50% - 50vw)!important;margin-right:calc(50% - 50vw)!important; padding:0!important;overflow:hidden!important;box-sizing:border-box!important; } #pricing .uds-reim-scene{ width:100%!important;max-width:none!important;min-width:0!important; height:auto!important;min-height:min(920px,100svh)!important;aspect-ratio:16/9!important; display:grid!important;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr)!important; gap:clamp(20px,3vw,54px)!important; padding:clamp(28px,4vw,66px) clamp(24px,5vw,88px) 58px!important; box-sizing:border-box!important;position:relative!important;overflow:hidden!important; background:#050507!important; } #pricing .uds-depth-world{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;z-index:0!important;overflow:hidden!important;pointer-events:none!important;} #pricing .uds-depth-backdrop{ position:absolute!important;inset:0!important;width:100%!important;height:100%!important; background-image:url('uds-minimal-character-only.webp')!important; background-size:cover!important;background-position:center center!important;background-repeat:no-repeat!important; opacity:1!important;transform:translate3d(calc(var(--depth-x)*.10),calc(var(--depth-y)*.08),-20px)!important; } #pricing .uds-depth-world:after{ content:""!important;position:absolute!important;inset:0!important; background:linear-gradient(90deg,rgba(4,4,6,0) 0%,rgba(4,4,6,.02) 35%,rgba(4,4,6,.20) 49%,rgba(4,4,6,.48) 63%,rgba(4,4,6,.78) 100%)!important; } #pricing .uds-reim-copy{ grid-column:2!important;grid-row:1!important;align-self:center!important;justify-self:center!important; width:min(100%,820px)!important;max-width:820px!important;min-width:0!important; margin:0!important;position:relative!important;left:auto!important;right:auto!important; z-index:3!important;box-sizing:border-box!important; transform:translate3d(calc(var(--depth-x)*-.025),calc(var(--depth-y)*-.025),20px)!important; } #pricing .uds-reim-character-tag{z-index:2!important;} #pricing .uds-reim-bottom-line{z-index:3!important;} @media(min-width:701px) and (max-width:1050px){ #pricing .uds-reim-scene{width:100%!important;aspect-ratio:auto!important;min-height:900px!important;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)!important;padding:36px 28px 68px!important;} #pricing .uds-depth-backdrop{background-size:auto 88%!important;background-position:left center!important;} #pricing .uds-reim-copy{grid-column:2!important;width:100%!important;max-width:100%!important;} } @media(max-width:700px){ #pricing .uds-reim-scene{width:100%!important;aspect-ratio:auto!important;min-height:0!important;height:auto!important;display:flex!important;flex-direction:column!important;padding:320px 16px 62px!important;gap:0!important;} #pricing .uds-depth-backdrop{background-size:auto 390px!important;background-position:18% top!important;} #pricing .uds-depth-world:after{background:linear-gradient(180deg,rgba(4,4,6,0) 0%,rgba(4,4,6,.1) 230px,#050507 390px)!important;} #pricing .uds-reim-copy{width:100%!important;max-width:none!important;margin:0!important;transform:none!important;} } /* V37: render the user's supplied pricing composition exactly, full-bleed */ #pricing.uds-exact-reference-section{ display:block!important;width:100vw!important;max-width:none!important; margin-left:calc(50% - 50vw)!important;margin-right:calc(50% - 50vw)!important; padding:0!important;overflow:hidden!important;background:#050507!important; box-sizing:border-box!important; } #pricing .uds-exact-reference-wrap{ position:relative!important;display:block!important;width:100%!important;max-width:none!important; margin:0!important;padding:0!important;line-height:0!important;overflow:hidden!important; background:#050507!important;aspect-ratio:1808 / 870!important; } #pricing .uds-exact-reference-image{ display:block!important;width:100%!important;height:100%!important;max-width:none!important; object-fit:cover!important;object-position:center center!important;margin:0!important; } #pricing .uds-reference-hotspot{position:absolute!important;display:block!important;z-index:5!important;background:transparent!important;border:0!important;line-height:normal!important;} #pricing .uds-reference-hotspot-ui{left:54.7%;top:66.1%;width:7%;height:8.8%;} #pricing .uds-reference-hotspot-icons{left:62.2%;top:66.1%;width:7%;height:8.8%;} #pricing .uds-reference-hotspot-marketing{left:69.7%;top:66.1%;width:7%;height:8.8%;} #pricing .uds-reference-hotspot-titles{left:77.2%;top:66.1%;width:7%;height:8.8%;} #pricing .uds-reference-hotspot-liveops{left:84.7%;top:66.1%;width:7%;height:8.8%;} #pricing .uds-reference-hotspot-cta{left:54.8%;top:81.5%;width:12.3%;height:6.3%;border-radius:12px!important;} #pricing .uds-reference-hotspot:focus-visible{outline:2px solid #fff!important;outline-offset:-3px!important;border-radius:12px!important;} #pricing .uds-why-wrap{width:min(1240px,calc(100% - 48px))!important;margin:0 auto!important;} @media(max-width:700px){ #pricing .uds-exact-reference-wrap{aspect-ratio:1808 / 870!important;} #pricing .uds-reference-hotspot{display:none!important;} #pricing .uds-why-wrap{width:calc(100% - 32px)!important;} } /* V38 — separate red-glass icon tiles with real depth, layered over a clean character scene */ #pricing.uds-interactive-tiles{ display:block!important;width:100vw!important;max-width:none!important; margin-left:calc(50% - 50vw)!important;margin-right:calc(50% - 50vw)!important; padding:0!important;overflow:hidden!important;background:#040406!important; } #pricing.uds-interactive-tiles .uds-reim-scene{ position:relative!important;isolation:isolate!important;display:grid!important; grid-template-columns:minmax(0,1.03fr) minmax(0,.97fr)!important; align-items:center!important;gap:0!important; width:100%!important;max-width:none!important;height:auto!important; aspect-ratio:1808 / 870!important;min-height:760px!important;max-height:1040px!important; margin:0!important;padding:30px clamp(28px,3.4vw,64px)!important; overflow:hidden!important;box-sizing:border-box!important; perspective:1400px!important;background:#050507!important; } #pricing.uds-interactive-tiles .uds-depth-world{position:absolute!important;inset:0!important;z-index:0!important;overflow:hidden!important;pointer-events:none!important;} #pricing.uds-interactive-tiles .uds-depth-backdrop{ position:absolute!important;inset:0!important; background-image:url('uds-3d-interactive-background.webp')!important; background-repeat:no-repeat!important;background-position:center center!important;background-size:cover!important; opacity:1!important;transform:translate3d(calc(var(--depth-x)*.12),calc(var(--depth-y)*.12),-35px) scale(1.035)!important; transition:transform .15s ease-out!important;will-change:transform!important; } #pricing.uds-interactive-tiles .uds-depth-world:after{ content:""!important;position:absolute!important;inset:0!important;pointer-events:none!important; background:linear-gradient(90deg,rgba(3,3,5,0) 0%,rgba(3,3,5,.02) 37%,rgba(3,3,5,.24) 49%,rgba(3,3,5,.62) 64%,rgba(3,3,5,.42) 100%)!important; } #pricing.uds-interactive-tiles .uds-reim-halo, #pricing.uds-interactive-tiles .uds-reim-art, #pricing.uds-interactive-tiles .uds-reim-ring, #pricing.uds-interactive-tiles .uds-reim-grid, #pricing.uds-interactive-tiles .uds-reim-light{display:none!important;} #pricing.uds-interactive-tiles .uds-reim-copy{ position:relative!important;grid-column:2!important;z-index:5!important; width:min(100%,800px)!important;max-width:800px!important;justify-self:end!important;align-self:center!important; margin:0!important;padding:clamp(25px,2.1vw,40px)!important;box-sizing:border-box!important; border:1px solid rgba(255,67,94,.7)!important;border-radius:28px!important; background:linear-gradient(135deg,rgba(39,12,19,.76),rgba(12,7,12,.84) 55%,rgba(42,5,15,.72))!important; box-shadow:0 0 0 1px rgba(255,255,255,.035) inset,0 18px 60px rgba(0,0,0,.48),0 0 34px rgba(255,28,61,.17)!important; backdrop-filter:blur(18px) saturate(125%)!important;-webkit-backdrop-filter:blur(18px) saturate(125%)!important; transform:translate3d(calc(var(--depth-x)*-.035),calc(var(--depth-y)*-.025),24px)!important; transition:transform .15s ease-out!important; } #pricing.uds-interactive-tiles .uds-float-tile-layer{ position:absolute!important;inset:0!important;z-index:3!important;pointer-events:none!important; transform-style:preserve-3d!important;perspective:1200px!important; } #pricing.uds-interactive-tiles .uds-float-tile{ position:absolute!important;display:block!important;pointer-events:auto!important; width:clamp(92px,10.8vw,190px)!important;height:auto!important;aspect-ratio:auto!important; padding:0!important;border:0!important;background:transparent!important; line-height:0!important;overflow:visible!important;cursor:pointer!important; transform-style:preserve-3d!important;will-change:transform,filter!important; filter:drop-shadow(0 12px 16px rgba(0,0,0,.42)) drop-shadow(0 0 10px rgba(255,25,60,.22))!important; transition:transform .22s cubic-bezier(.2,.8,.2,1),filter .22s ease!important; animation:udsTileFloat 5.8s ease-in-out infinite!important; } #pricing.uds-interactive-tiles .uds-float-tile img{display:block!important;width:100%!important;height:auto!important;object-fit:contain!important;pointer-events:none!important;} #pricing.uds-interactive-tiles .uds-float-gamepad{left:5.2%!important;top:20%!important;width:clamp(115px,13.2vw,225px)!important;--tile-r:-8deg!important;animation-delay:-1.1s!important;} #pricing.uds-interactive-tiles .uds-float-image{left:7.4%!important;top:43%!important;width:clamp(92px,10.2vw,175px)!important;--tile-r:7deg!important;animation-delay:-3.4s!important;} #pricing.uds-interactive-tiles .uds-float-cube{left:17.8%!important;top:64%!important;width:clamp(95px,10.7vw,185px)!important;--tile-r:8deg!important;animation-delay:-2.2s!important;} #pricing.uds-interactive-tiles .uds-float-title{left:39.2%!important;top:35%!important;width:clamp(78px,8.4vw,145px)!important;--tile-r:-8deg!important;animation-delay:-4.1s!important;} #pricing.uds-interactive-tiles .uds-float-spark{left:39.4%!important;top:56%!important;width:clamp(72px,7.5vw,130px)!important;--tile-r:5deg!important;animation-delay:-.7s!important;} #pricing.uds-interactive-tiles .uds-float-tile:hover, #pricing.uds-interactive-tiles .uds-float-tile:focus-visible{ z-index:8!important;filter:drop-shadow(0 22px 22px rgba(0,0,0,.5)) drop-shadow(0 0 24px rgba(255,35,75,.65))!important; transform:translate3d(var(--tile-x,0px),var(--tile-y,0px),58px) rotateX(var(--tile-rx,0deg)) rotateY(var(--tile-ry,0deg)) rotateZ(var(--tile-r,0deg)) scale(1.12)!important; animation-play-state:paused!important;outline:none!important; } #pricing.uds-interactive-tiles .uds-float-tile:focus-visible img{filter:brightness(1.18)!important;} @keyframes udsTileFloat{0%,100%{transform:translate3d(0,0,12px) rotateZ(var(--tile-r,0deg)) rotateX(0deg)}50%{transform:translate3d(0,-12px,28px) rotateZ(calc(var(--tile-r,0deg) * .6)) rotateX(2deg)}} #pricing.uds-interactive-tiles .uds-why-wrap{position:relative!important;z-index:2!important;} @media(min-width:701px) and (max-width:1200px){ #pricing.uds-interactive-tiles .uds-reim-scene{min-height:720px!important;grid-template-columns:minmax(0,.98fr) minmax(0,1.02fr)!important;padding:28px 22px!important;} #pricing.uds-interactive-tiles .uds-reim-copy{padding:24px!important;border-radius:24px!important;} #pricing.uds-interactive-tiles .uds-float-title{left:38%!important;} #pricing.uds-interactive-tiles .uds-float-spark{left:38%!important;} } @media(max-width:700px){ #pricing.uds-interactive-tiles .uds-reim-scene{display:flex!important;flex-direction:column!important;aspect-ratio:auto!important;min-height:0!important;max-height:none!important;padding:250px 14px 38px!important;gap:0!important;} #pricing.uds-interactive-tiles .uds-depth-backdrop{background-size:auto 410px!important;background-position:18% top!important;transform:none!important;} #pricing.uds-interactive-tiles .uds-depth-world:after{background:linear-gradient(180deg,rgba(3,3,5,0) 0%,rgba(3,3,5,.06) 210px,#050507 410px)!important;} #pricing.uds-interactive-tiles .uds-reim-copy{width:100%!important;max-width:none!important;padding:22px 16px!important;border-radius:22px!important;transform:none!important;} #pricing.uds-interactive-tiles .uds-reim-copy h2{font-size:clamp(40px,11vw,60px)!important;} #pricing.uds-interactive-tiles .uds-float-tile{width:84px!important;} #pricing.uds-interactive-tiles .uds-float-gamepad{left:5%!important;top:35px!important;width:116px!important;} #pricing.uds-interactive-tiles .uds-float-image{left:5%!important;top:128px!important;width:80px!important;} #pricing.uds-interactive-tiles .uds-float-cube{left:25%!important;top:164px!important;width:84px!important;} #pricing.uds-interactive-tiles .uds-float-title{left:auto!important;right:8%!important;top:48px!important;width:66px!important;} #pricing.uds-interactive-tiles .uds-float-spark{left:auto!important;right:8%!important;top:138px!important;width:62px!important;} } @media(prefers-reduced-motion:reduce){ #pricing.uds-interactive-tiles .uds-float-tile{animation:none!important;transition:none!important;} #pricing.uds-interactive-tiles .uds-depth-backdrop,#pricing.uds-interactive-tiles .uds-reim-copy{transform:none!important;transition:none!important;} } /* UIBUDDY / BENEFIT CARDS — larger, full-width and matched to the crimson glass theme */ #pricing .uds-why-wrap{ width:min(1760px,calc(100% - 80px))!important;max-width:1760px!important; margin:clamp(26px,3vw,54px) auto 0!important;padding:0 0 clamp(46px,5vw,78px)!important; } #pricing .uds-why-wrap .pricing-why-top{ display:flex!important;align-items:center!important;justify-content:space-between!important;gap:22px!important; margin:0 0 22px!important;padding:0 0 18px!important;border-top:0!important;border-bottom:1px solid rgba(255,48,79,.28)!important; color:#ff5367!important;font-size:11px!important;letter-spacing:.16em!important;font-weight:850!important; } #pricing .uds-why-wrap .pricing-why-top>span:last-child{color:#a99a9f!important;text-align:right!important;font-size:10px!important;letter-spacing:.12em!important;} #pricing .uds-why-wrap .pricing-why-grid{ display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:18px!important;margin:0!important; } #pricing .uds-why-wrap .pricing-why-grid article{ position:relative!important;isolation:isolate!important;overflow:hidden!important;min-height:205px!important; padding:clamp(26px,2.4vw,42px)!important;border:1px solid rgba(255,55,82,.32)!important;border-radius:20px!important; background:linear-gradient(135deg,rgba(255,43,75,.16) 0%,rgba(30,10,16,.82) 42%,rgba(8,8,10,.94) 100%)!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 16px 42px rgba(0,0,0,.24)!important; backdrop-filter:blur(16px)!important;transition:transform .35s ease,border-color .35s ease,box-shadow .35s ease!important; } #pricing .uds-why-wrap .pricing-why-grid article:before{ content:"";position:absolute;z-index:-1;right:-48px;top:-70px;width:210px;height:210px;border-radius:50%; background:radial-gradient(circle,rgba(255,35,70,.19),rgba(255,35,70,0) 70%);pointer-events:none; } #pricing .uds-why-wrap .pricing-why-grid article:after{ content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,#ff2549,rgba(255,37,73,0));opacity:.9; } #pricing .uds-why-wrap .pricing-why-grid article:hover{transform:translateY(-7px);border-color:rgba(255,64,91,.68)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 24px 55px rgba(255,20,55,.12)!important;} #pricing .uds-why-wrap .pricing-why-grid article>span{display:inline-flex!important;align-items:center!important;justify-content:center!important;width:38px!important;height:30px!important;border:1px solid rgba(255,64,91,.38)!important;border-radius:9px!important;background:rgba(255,42,75,.12)!important;color:#ff5367!important;font-size:11px!important;letter-spacing:.12em!important;font-weight:900!important;} #pricing .uds-why-wrap .pricing-why-grid h3{margin:24px 0 12px!important;font-size:clamp(15px,1.05vw,19px)!important;line-height:1.25!important;letter-spacing:.045em!important;color:#fff!important;} #pricing .uds-why-wrap .pricing-why-grid p{max-width:42ch!important;margin:0!important;color:#b9aeb2!important;font-size:clamp(13px,.82vw,15px)!important;line-height:1.75!important;} @media(max-width:900px){#pricing .uds-why-wrap{width:calc(100% - 40px)!important;}#pricing .uds-why-wrap .pricing-why-grid{gap:12px!important;}#pricing .uds-why-wrap .pricing-why-grid article{min-height:190px!important;padding:22px!important;}} @media(max-width:650px){#pricing .uds-why-wrap{width:calc(100% - 28px)!important;margin-top:24px!important;}#pricing .uds-why-wrap .pricing-why-top{align-items:flex-start!important;flex-direction:column!important;gap:8px!important;}#pricing .uds-why-wrap .pricing-why-top>span:last-child{text-align:left!important;}#pricing .uds-why-wrap .pricing-why-grid{grid-template-columns:1fr!important;gap:12px!important;}#pricing .uds-why-wrap .pricing-why-grid article{min-height:0!important;padding:24px!important;border-radius:16px!important;}#pricing .uds-why-wrap .pricing-why-grid h3{margin-top:17px!important;font-size:15px!important;}#pricing .uds-why-wrap .pricing-why-grid p{font-size:13px!important;}} /* FINAL HERO BLEND FIX: preserve the full character scene and visually merge the benefit cards */ #pricing.uds-interactive-tiles{position:relative!important;overflow:hidden!important;background:#050507!important;isolation:isolate!important;} #pricing.uds-interactive-tiles .uds-reim-scene{ width:100%!important;max-width:none!important;aspect-ratio:1808/870!important; height:auto!important;min-height:min(870px,48.12vw)!important;max-height:none!important; padding:clamp(26px,2.8vw,52px) clamp(28px,5.3vw,96px)!important; overflow:hidden!important;background:#050507!important;box-sizing:border-box!important; } #pricing.uds-interactive-tiles .uds-depth-backdrop{ background-image:url('uds-3d-interactive-background.webp')!important; background-size:100% 100%!important;background-position:center center!important;background-repeat:no-repeat!important; opacity:1!important;transform:translate3d(calc(var(--depth-x)*.06),calc(var(--depth-y)*.06),-20px)!important; } #pricing.uds-interactive-tiles .uds-depth-world:after{ background:linear-gradient(90deg,rgba(3,3,5,0) 0%,rgba(3,3,5,.02) 38%,rgba(3,3,5,.18) 49%,rgba(3,3,5,.43) 67%,rgba(3,3,5,.22) 100%),linear-gradient(0deg,rgba(5,5,7,.76) 0%,rgba(5,5,7,0) 18%)!important; } #pricing.uds-interactive-tiles .uds-reim-copy{max-width:800px!important;width:100%!important;justify-self:end!important;} #pricing.uds-interactive-tiles .uds-why-wrap{ position:relative!important;z-index:2!important;width:min(1760px,calc(100% - 80px))!important; margin:0 auto!important;padding:clamp(28px,3vw,48px) 0 clamp(48px,5vw,78px)!important; } #pricing.uds-interactive-tiles .uds-why-wrap:before{ content:""!important;position:absolute!important;z-index:-1!important;inset:0 -10vw!important;pointer-events:none!important; background:radial-gradient(ellipse at 20% 0%,rgba(255,24,61,.16),transparent 48%),linear-gradient(180deg,rgba(10,5,8,.88),#050507 82%)!important; } @media(min-width:701px) and (max-width:1200px){ #pricing.uds-interactive-tiles .uds-reim-scene{min-height:720px!important;aspect-ratio:auto!important;padding:30px 28px!important;} #pricing.uds-interactive-tiles .uds-depth-backdrop{background-size:auto 100%!important;background-position:left center!important;} } @media(max-width:700px){ #pricing.uds-interactive-tiles .uds-reim-scene{aspect-ratio:auto!important;min-height:0!important;height:auto!important;padding:250px 14px 38px!important;} #pricing.uds-interactive-tiles .uds-depth-backdrop{background-size:auto 410px!important;background-position:18% top!important;} #pricing.uds-interactive-tiles .uds-why-wrap{width:calc(100% - 28px)!important;} } /* V41: enlarge only the pricing glass panel to occupy more of the open space */ #pricing.uds-interactive-tiles .uds-reim-copy{ width:100%!important; max-width:1000px!important; justify-self:end!important; } /* V42: increase the pricing glass panel vertically only; preserve its width and all surrounding artwork. */ @media (min-width: 1201px){ #pricing.uds-interactive-tiles .uds-reim-copy{ min-height:clamp(960px,76vh,1100px)!important; box-sizing:border-box!important; padding-top:clamp(34px,3vw,48px)!important; padding-bottom:clamp(34px,3vw,48px)!important; } } @media (min-width:701px) and (max-width:1200px){ #pricing.uds-interactive-tiles .uds-reim-copy{min-height:0!important;} } @media (max-width:700px){ #pricing.uds-interactive-tiles .uds-reim-copy{min-height:0!important;} } /* V43: improve pricing service selector readability using the same DM Mono family used in testimonial metadata. */ #pricing .uds-reim-services-label, #pricing .uds-reim-services button b, #pricing .uds-reim-services button small, #pricing .uds-reim-detail-index, #pricing .uds-reim-service-detail strong, #pricing .uds-reim-service-detail p, #pricing .uds-reim-actions, #pricing .uds-reim-cta, #pricing .uds-reim-bottom-line{ font-family:var(--mono,'DM Mono',monospace)!important; } #pricing .uds-reim-services-label{ color:#e2d5d8!important;font-size:11px!important;letter-spacing:.12em!important;font-weight:600!important; } #pricing .uds-reim-services button b, #pricing .uds-reim-services button small{ color:#f4e9ec!important;font-size:11px!important;line-height:1.35!important;font-weight:600!important;letter-spacing:.025em!important; } #pricing .uds-reim-services button small{color:#d7c5ca!important;} #pricing .uds-reim-services button>span{font-size:25px!important;} #pricing .uds-reim-detail-index{font-size:10px!important;color:#ff5368!important;letter-spacing:.09em!important;} #pricing .uds-reim-service-detail strong{font-size:13px!important;color:#fff!important;letter-spacing:.045em!important;} #pricing .uds-reim-service-detail p{font-size:12px!important;line-height:1.6!important;color:#d0c0c4!important;} #pricing .uds-reim-cta{font-family:var(--mono,'DM Mono',monospace)!important;font-size:12px!important;letter-spacing:.035em!important;} #pricing .uds-reim-bottom-line{font-size:9px!important;color:#bca9ae!important;} @media(max-width:700px){ #pricing .uds-reim-services button b,#pricing .uds-reim-services button small{font-size:9px!important;} #pricing .uds-reim-services-label{font-size:10px!important;} #pricing .uds-reim-service-detail p{font-size:11px!important;} } /* Pricing availability indicator: larger and easier to scan */ #pricing .uds-reim-price-top .uds-reim-live{font-size:12px;line-height:1.25;letter-spacing:.08em;gap:9px;color:#e4dadd;font-weight:800;white-space:nowrap;} #pricing .uds-reim-price-top .uds-reim-live i{width:9px;height:9px;flex:0 0 9px;box-shadow:0 0 11px #64dca2,0 0 20px rgba(100,220,162,.35);} @media(max-width:600px){#pricing .uds-reim-price-top .uds-reim-live{font-size:10px;letter-spacing:.04em;gap:7px}#pricing .uds-reim-price-top .uds-reim-live i{width:8px;height:8px;flex-basis:8px}} /* V45: reference-matched glass pricing card, recolored to UI BUDDY red. */ #pricing.uds-interactive-tiles .uds-reim-copy{ width:min(100%,900px)!important;max-width:900px!important;min-height:0!important; align-self:center!important;justify-self:end!important;box-sizing:border-box!important; padding:clamp(24px,2.7vw,44px)!important;border:1px solid rgba(255,67,88,.72)!important; border-radius:clamp(20px,2.2vw,32px)!important; background:linear-gradient(145deg,rgba(28,10,14,.78),rgba(8,6,8,.82) 48%,rgba(35,4,11,.78))!important; -webkit-backdrop-filter:blur(22px) saturate(125%)!important;backdrop-filter:blur(22px) saturate(125%)!important; box-shadow:0 0 0 1px rgba(255,255,255,.035) inset,0 0 34px rgba(255,25,54,.17),0 28px 90px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.12)!important; transform:translate3d(calc(var(--depth-x)*-.025),calc(var(--depth-y)*-.025),20px) rotateX(var(--glass-rx,0deg)) rotateY(var(--glass-ry,0deg))!important; } #pricing.uds-interactive-tiles .uds-reim-copy:before{content:""!important;position:absolute!important;inset:0!important;border-radius:inherit!important;pointer-events:none!important;background:radial-gradient(ellipse at 8% 0%,rgba(255,54,79,.14),transparent 38%),linear-gradient(120deg,rgba(255,255,255,.045),transparent 38%,rgba(255,23,51,.055))!important;} #pricing.uds-interactive-tiles .uds-reim-copy>*{position:relative!important;z-index:1!important;} #pricing .uds-reim-eyebrow{font-size:11px!important;letter-spacing:.13em!important;color:#ff687a!important;margin-bottom:22px!important;} #pricing .uds-reim-eyebrow i{background:#ff304b!important;box-shadow:0 0 12px #ff304b!important;} #pricing .uds-reim-copy h2{font-size:clamp(42px,4.15vw,66px)!important;line-height:.9!important;letter-spacing:-.065em!important;margin:0 0 18px!important;} #pricing .uds-reim-copy h2 em{color:#ff304b!important;background:none!important;-webkit-text-fill-color:#ff304b!important;} #pricing .uds-reim-sub{font-size:clamp(13px,1vw,16px)!important;line-height:1.55!important;margin:0 0 22px!important;color:#cfc2c6!important;} #pricing .uds-reim-price-wrap{padding:clamp(18px,1.8vw,28px)!important;border:1px solid rgba(255,55,78,.8)!important;border-radius:20px!important;background:linear-gradient(125deg,rgba(255,38,62,.13),rgba(12,7,9,.72) 45%,rgba(70,3,16,.32))!important;box-shadow:0 0 28px rgba(255,24,51,.12),inset 0 1px 0 rgba(255,255,255,.08)!important;margin-bottom:22px!important;} #pricing .uds-reim-price-top{align-items:center!important;gap:12px!important;} #pricing .uds-reim-price-top>span:first-child{font-size:10px!important;letter-spacing:.13em!important;color:#ff8794!important;font-weight:800!important;} #pricing .uds-reim-price-top .uds-reim-live{font-size:clamp(9px,.8vw,12px)!important;color:#f2e7e9!important;} #pricing .uds-reim-price{align-items:baseline!important;gap:8px!important;margin:12px 0 4px!important;} #pricing .uds-reim-price strong{font-size:clamp(58px,6.2vw,94px)!important;line-height:.9!important;letter-spacing:-.075em!important;color:transparent!important;background:linear-gradient(180deg,#fff 8%,#f6dfe3 56%,#ff4059 100%)!important;-webkit-background-clip:text!important;background-clip:text!important;} #pricing .uds-reim-currency{font-size:clamp(27px,2.8vw,42px)!important;color:#ff4059!important;font-weight:800!important;} #pricing .uds-reim-per{font-size:13px!important;color:#fff!important;font-weight:800!important;} #pricing .uds-reim-price-foot{align-items:center!important;margin-top:8px!important;} #pricing .uds-reim-price-foot del{font-size:14px!important;color:#e4d3d7!important;} #pricing .uds-reim-price-foot>span{font-size:9px!important;letter-spacing:.11em!important;color:#a9979d!important;} #pricing .uds-reim-price-foot b{font-size:11px!important;padding:7px 10px!important;border-radius:6px!important;background:#ff304b!important;color:#fff!important;box-shadow:0 0 20px rgba(255,30,58,.25)!important;} #pricing .uds-reim-services-label{display:flex!important;align-items:center!important;justify-content:space-between!important;margin:0 0 13px!important;font-size:11px!important;} #pricing .uds-reim-services{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:10px!important;margin-bottom:17px!important;} #pricing .uds-reim-services button{min-width:0!important;min-height:clamp(84px,6.4vw,112px)!important;padding:13px 7px!important;border:1px solid rgba(255,255,255,.13)!important;border-radius:17px!important;background:linear-gradient(145deg,rgba(255,255,255,.07),rgba(9,7,9,.62))!important;box-shadow:inset 0 1px rgba(255,255,255,.06)!important;transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease,background .25s ease!important;} #pricing .uds-reim-services button:hover{transform:translateY(-4px)!important;border-color:rgba(255,68,89,.7)!important;box-shadow:0 12px 26px rgba(0,0,0,.25),0 0 22px rgba(255,31,56,.1)!important;} #pricing .uds-reim-services button.is-active{border-color:#ff4059!important;background:linear-gradient(145deg,rgba(255,37,62,.25),rgba(34,7,13,.7))!important;box-shadow:0 0 0 1px rgba(255,57,78,.25) inset,0 0 24px rgba(255,32,55,.18)!important;} #pricing .uds-reim-services button>span{font-size:26px!important;color:#ff4059!important;margin-bottom:7px!important;} #pricing .uds-reim-services button b{font-size:10px!important;line-height:1.25!important;color:#fff!important;} #pricing .uds-reim-services button small{font-size:9px!important;color:#d8c7cc!important;} #pricing .uds-reim-service-detail{display:grid!important;grid-template-columns:110px minmax(0,1fr)!important;grid-template-rows:auto auto!important;align-items:center!important;gap:8px 18px!important;margin:0 0 18px!important;padding:0 0 18px!important;border-bottom:1px solid rgba(255,255,255,.12)!important;} #pricing .uds-reim-detail-index{grid-column:1/-1!important;grid-row:1!important;font-size:10px!important;letter-spacing:.12em!important;color:#ff5368!important;} #pricing .uds-reim-detail-thumb{grid-column:1!important;grid-row:2!important;display:block!important;width:110px!important;height:76px!important;object-fit:cover!important;border-radius:12px!important;border:1px solid rgba(255,61,83,.4)!important;box-shadow:0 0 18px rgba(255,22,48,.12)!important;} #pricing .uds-reim-detail-text{grid-column:2!important;grid-row:2!important;min-width:0!important;} #pricing .uds-reim-service-detail strong{display:block!important;font-size:16px!important;line-height:1.3!important;color:#fff!important;margin:0 0 6px!important;} #pricing .uds-reim-service-detail p{font-size:13px!important;line-height:1.55!important;margin:0!important;color:#d0c0c4!important;} #pricing .uds-reim-actions{display:block!important;margin:0!important;} #pricing .uds-reim-cta{display:flex!important;align-items:center!important;justify-content:center!important;gap:16px!important;width:100%!important;min-height:64px!important;box-sizing:border-box!important;padding:17px 24px!important;border:1px solid #ff7a88!important;border-radius:17px!important;background:linear-gradient(110deg,#ff4b61 0%,#ff1738 48%,#c20b27 100%)!important;color:#fff!important;font-size:15px!important;font-weight:900!important;letter-spacing:.04em!important;box-shadow:0 0 28px rgba(255,25,52,.35),inset 0 1px rgba(255,255,255,.34),inset 0 -4px 10px rgba(82,0,12,.2)!important;transition:transform .25s ease,box-shadow .25s ease!important;} #pricing .uds-reim-cta:hover{transform:translateY(-3px)!important;box-shadow:0 10px 35px rgba(255,25,52,.4),inset 0 1px rgba(255,255,255,.34)!important;} #pricing .uds-reim-cta span{font-size:25px!important;margin-left:auto!important;} #pricing .uds-reim-benefits{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:0!important;margin:24px 0 0!important;padding-top:0!important;} #pricing .uds-reim-benefits>div{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:7px!important;padding:0 9px!important;text-align:center!important;} #pricing .uds-reim-benefits>div+div{border-left:1px solid rgba(255,255,255,.1)!important;} #pricing .uds-reim-benefits b{font-size:27px!important;line-height:1!important;color:#ff4059!important;text-shadow:0 0 20px rgba(255,35,62,.32)!important;} #pricing .uds-reim-benefits span{font-size:9px!important;line-height:1.35!important;letter-spacing:.08em!important;font-weight:800!important;color:#e9dfe2!important;} @media(min-width:1201px){#pricing.uds-interactive-tiles .uds-reim-scene{min-height:min(1020px,100svh)!important;aspect-ratio:auto!important;padding:clamp(32px,3vw,52px) clamp(34px,5.3vw,96px)!important;}#pricing.uds-interactive-tiles .uds-reim-copy{margin-right:0!important;}} @media(max-width:1200px){#pricing.uds-interactive-tiles .uds-reim-copy{max-width:100%!important;padding:30px!important;}} @media(max-width:700px){#pricing.uds-interactive-tiles .uds-reim-copy{padding:23px 16px!important;border-radius:22px!important;}#pricing .uds-reim-copy h2{font-size:clamp(42px,11vw,60px)!important;}#pricing .uds-reim-price strong{font-size:clamp(55px,16vw,76px)!important;}#pricing .uds-reim-price-wrap{padding:17px!important;border-radius:16px!important;}#pricing .uds-reim-services{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:7px!important;}#pricing .uds-reim-services button{min-height:88px!important;border-radius:13px!important;}#pricing .uds-reim-services button b{font-size:9px!important;}#pricing .uds-reim-services button small{font-size:8px!important;}#pricing .uds-reim-service-detail{grid-template-columns:86px minmax(0,1fr)!important;gap:8px 12px!important;}#pricing .uds-reim-detail-thumb{width:86px!important;height:68px!important;}#pricing .uds-reim-service-detail strong{font-size:13px!important;}#pricing .uds-reim-service-detail p{font-size:11px!important;}#pricing .uds-reim-cta{min-height:58px!important;font-size:12px!important;padding:15px!important;}#pricing .uds-reim-benefits{margin-top:20px!important;}#pricing .uds-reim-benefits b{font-size:23px!important;}#pricing .uds-reim-benefits span{font-size:8px!important;letter-spacing:.02em!important;}} @media(prefers-reduced-motion:reduce){#pricing .uds-reim-services button,#pricing .uds-reim-cta{transition:none!important;}} /* v46: enlarge the pricing details shown in the latest reference crops */ #pricing .uds-reim-price-wrap{padding:clamp(24px,2.4vw,36px)!important;} #pricing .uds-reim-price strong{font-size:clamp(76px,7.6vw,116px)!important;} #pricing .uds-reim-currency{font-size:clamp(34px,3.3vw,50px)!important;} #pricing .uds-reim-per{font-size:clamp(15px,1.2vw,19px)!important;} #pricing .uds-reim-price-top>span:first-child{font-size:clamp(11px,.9vw,14px)!important;} #pricing .uds-reim-price-top .uds-reim-live{font-size:clamp(11px,.9vw,14px)!important;} #pricing .uds-reim-price-foot del{font-size:clamp(16px,1.25vw,20px)!important;} #pricing .uds-reim-price-foot>span{font-size:clamp(10px,.8vw,13px)!important;} #pricing .uds-reim-services{gap:12px!important;margin-bottom:22px!important;} #pricing .uds-reim-services button{min-height:clamp(112px,8.2vw,142px)!important;padding:17px 10px!important;border-radius:19px!important;} #pricing .uds-reim-services button>span{font-size:clamp(30px,2.1vw,38px)!important;margin-bottom:9px!important;} #pricing .uds-reim-services button b{font-size:clamp(12px,.95vw,15px)!important;} #pricing .uds-reim-services button small{font-size:clamp(10px,.78vw,12px)!important;} #pricing .uds-reim-benefits{margin-top:30px!important;} #pricing .uds-reim-benefits>div{gap:10px!important;padding:5px 14px!important;min-height:74px!important;} #pricing .uds-reim-benefits b{font-size:clamp(34px,2.5vw,44px)!important;} #pricing .uds-reim-benefits span{font-size:clamp(11px,.85vw,14px)!important;letter-spacing:.06em!important;} @media(max-width:700px){ #pricing .uds-reim-price-wrap{padding:21px 17px!important;} #pricing .uds-reim-price strong{font-size:clamp(66px,18vw,88px)!important;} #pricing .uds-reim-currency{font-size:clamp(30px,8vw,40px)!important;} #pricing .uds-reim-services{gap:8px!important;} #pricing .uds-reim-services button{min-height:104px!important;padding:12px 5px!important;} #pricing .uds-reim-services button>span{font-size:27px!important;} #pricing .uds-reim-services button b{font-size:10px!important;} #pricing .uds-reim-services button small{font-size:9px!important;} #pricing .uds-reim-benefits{margin-top:23px!important;} #pricing .uds-reim-benefits>div{padding:5px 6px!important;min-height:68px!important;} #pricing .uds-reim-benefits b{font-size:27px!important;} #pricing .uds-reim-benefits span{font-size:9px!important;letter-spacing:.02em!important;} } /* v47: preserve the character artwork's natural proportions (never stretch it to the section box) */ #pricing.uds-interactive-tiles .uds-depth-backdrop{ background-size:cover!important; background-position:center center!important; background-repeat:no-repeat!important; } @media(min-width:1201px){ #pricing.uds-interactive-tiles .uds-depth-backdrop{ background-size:cover!important; background-position:42% center!important; } } @media(max-width:700px){ #pricing.uds-interactive-tiles .uds-depth-backdrop{ background-size:auto 100%!important; background-position:28% center!important; } } /* Remove the broken service preview thumbnail; let service copy use the full row. */ #pricing .uds-reim-service-detail{grid-template-columns:minmax(0,1fr)!important;grid-template-rows:auto!important;} #pricing .uds-reim-detail-text{grid-column:1!important;grid-row:1!important;} #pricing .uds-reim-detail-thumb{display:none!important;} /* Contact page — pricing-inspired red glass panel */ .contact-glass-page{background:#080607;overflow:hidden;position:relative;isolation:isolate} .contact-glass-section{position:relative;min-height:calc(100vh - 80px);padding:clamp(36px,5vw,76px) 0;display:grid;place-items:center;background:radial-gradient(ellipse at 8% 38%,rgba(255,35,58,.16),transparent 35%),radial-gradient(ellipse at 90% 75%,rgba(126,10,27,.18),transparent 40%),linear-gradient(145deg,#0b0708,#080607 58%,#100709)} .contact-glass-orbit{position:absolute;pointer-events:none;border:1px solid rgba(255,47,70,.14);border-radius:50%;transform:rotate(-24deg);filter:drop-shadow(0 0 15px rgba(255,41,61,.08))} .contact-glass-orbit-a{width:68vw;height:22vw;left:-22vw;top:10%;}.contact-glass-orbit-b{width:56vw;height:24vw;right:-18vw;bottom:5%;transform:rotate(28deg)} .contact-glass-shell{width:min(1380px,90%);margin:auto;position:relative;z-index:1;padding:clamp(25px,4vw,58px);border:1px solid rgba(255,69,91,.48);border-radius:clamp(18px,2vw,30px);background:linear-gradient(125deg,rgba(255,255,255,.055),rgba(255,255,255,.018) 35%,rgba(83,8,20,.16)),radial-gradient(ellipse at 92% 0%,rgba(255,35,58,.14),transparent 42%),rgba(12,8,10,.78);box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 0 0 1px rgba(255,38,59,.05),0 22px 90px rgba(0,0,0,.45),0 0 48px rgba(255,32,55,.09);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px)} .contact-glass-head{position:relative;padding:0 0 clamp(25px,3vw,42px);border-bottom:1px solid rgba(255,75,95,.2)} .contact-glass-kicker,.contact-glass-code,.contact-glass-mini,.contact-form-top,.contact-glass-links,.contact-glass-foot{font-family:var(--mono);text-transform:uppercase;letter-spacing:.13em} .contact-glass-kicker{display:flex;align-items:center;gap:10px;font-size:10px;color:#ff6878}.contact-glass-kicker>span{width:7px;height:7px;border-radius:50%;background:#ff293d;box-shadow:0 0 12px #ff293d} .contact-glass-code{position:absolute;right:0;top:0;font-size:9px;color:#816b70} .contact-glass-head h1{font:900 clamp(64px,8.2vw,112px)/.78 var(--display);letter-spacing:-.045em;margin:28px 0 19px;text-transform:uppercase;max-width:850px} .contact-glass-head>p{max-width:720px;color:#c5b5b7;font-size:13px;line-height:1.8;margin:0} .contact-glass-grid{display:grid;grid-template-columns:minmax(260px,.72fr) minmax(0,1.28fr);gap:clamp(28px,5vw,78px);padding:clamp(28px,4vw,48px) 0} .contact-glass-copy{align-self:start;padding:10px 0}.contact-glass-mini{font-size:9px;color:#ff6878;margin-bottom:22px} .contact-glass-copy h2{font:850 clamp(38px,4.4vw,62px)/.86 var(--display);letter-spacing:-.025em;text-transform:uppercase;margin:0 0 24px} .contact-glass-copy>p{font-size:12px;line-height:1.95;color:#b7a4a7;max-width:430px;margin:0 0 16px} .contact-glass-links{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px}.contact-glass-links a{padding:11px 13px;border:1px solid rgba(255,77,97,.25);border-radius:8px;background:rgba(255,255,255,.025);font-size:9px;color:#f4dfe2;transition:.25s}.contact-glass-links a:hover{border-color:#ff5369;background:rgba(255,41,61,.12);box-shadow:0 0 22px rgba(255,41,61,.12)} .contact-glass-note{display:flex;align-items:center;gap:12px;margin-top:clamp(30px,5vw,70px);padding:17px 16px;border:1px solid rgba(255,68,89,.2);border-radius:12px;background:linear-gradient(110deg,rgba(255,40,62,.09),rgba(255,255,255,.015))}.contact-glass-pulse{width:8px;height:8px;flex:none;border-radius:50%;background:#ff3b52;box-shadow:0 0 13px #ff293d}.contact-glass-note b,.contact-glass-note small{display:block}.contact-glass-note b{font:9px var(--mono);letter-spacing:.08em}.contact-glass-note small{font-size:10px;color:#9f8c90;margin-top:6px} .contact-glass-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 16px;align-content:start;padding:clamp(18px,2.4vw,32px);border:1px solid rgba(255,74,94,.34);border-radius:18px;background:linear-gradient(140deg,rgba(255,255,255,.045),rgba(255,255,255,.012) 50%,rgba(255,30,55,.045));box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 12px 42px rgba(0,0,0,.2)} .contact-form-top{grid-column:1/-1;display:flex;justify-content:space-between;gap:15px;padding-bottom:15px;border-bottom:1px solid rgba(255,75,95,.19);font-size:9px;color:#ff7582;margin-bottom:2px}.contact-form-top span+span{color:#806b70} .contact-glass-form .field{display:flex;flex-direction:column;gap:9px;min-width:0}.contact-glass-form .field.full,.contact-glass-form .form-note,.contact-glass-form .form-success{grid-column:1/-1} .contact-glass-form label{font:9px var(--mono);letter-spacing:.1em;color:#d7c3c6}.contact-glass-form label i{color:#ff5368;font-style:normal} .contact-glass-form input,.contact-glass-form select,.contact-glass-form textarea{display:block;width:100%;min-width:0;border:1px solid rgba(255,255,255,.12);border-radius:9px;padding:14px 14px;background:rgba(5,4,5,.48);color:#f8eff0;font:12px var(--body);outline:none;transition:border-color .2s,box-shadow .2s,background .2s;appearance:auto} .contact-glass-form input,.contact-glass-form select{height:47px}.contact-glass-form select{color-scheme:dark}.contact-glass-form input::placeholder,.contact-glass-form textarea::placeholder{color:#796a6d}.contact-glass-form input:focus,.contact-glass-form select:focus,.contact-glass-form textarea:focus{border-color:#ff5369;background:rgba(20,7,10,.8);box-shadow:0 0 0 3px rgba(255,41,61,.1),0 0 22px rgba(255,41,61,.08)}.contact-glass-form textarea{min-height:118px;resize:vertical;line-height:1.65} .contact-glass-form .form-note{font-size:10px;line-height:1.7;color:#927e82}.contact-glass-form .contact-submit-row{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-top:2px}.contact-glass-form .btn{border-radius:9px;padding:16px 19px;box-shadow:0 0 22px rgba(255,41,61,.22)}.contact-glass-form .contact-submit-row>small{font:8px var(--mono);letter-spacing:.08em;color:#8f7c80} .contact-glass-foot{display:flex;justify-content:space-between;gap:16px;padding-top:19px;border-top:1px solid rgba(255,75,95,.19);font-size:8px;color:#887479} @media(max-width:800px){.contact-glass-section{padding:28px 0 45px}.contact-glass-shell{width:92%;padding:25px 20px;border-radius:19px}.contact-glass-code{position:static;margin-top:14px}.contact-glass-head h1{font-size:clamp(58px,12vw,88px);margin:24px 0 17px}.contact-glass-head>p{font-size:12px}.contact-glass-grid{grid-template-columns:1fr;gap:22px;padding:24px 0}.contact-glass-copy{padding:4px 0}.contact-glass-copy h2{font-size:48px}.contact-glass-note{margin-top:22px}.contact-glass-foot{font-size:7px;flex-wrap:wrap}} @media(max-width:520px){.contact-glass-form{grid-template-columns:1fr;padding:16px;gap:15px}.contact-glass-form .field.full,.contact-glass-form .form-note,.contact-glass-form .form-success{grid-column:auto}.contact-glass-form .contact-submit-row{align-items:stretch;flex-direction:column}.contact-glass-form .btn{width:100%}.contact-glass-foot{line-height:1.8}.contact-glass-kicker{font-size:8px}.contact-glass-head h1{font-size:clamp(54px,13vw,72px)}} /* GAME ART WALL — seamless dual-row portfolio marquee */ .art-marquee-section{position:relative;overflow:hidden;padding:clamp(64px,8vw,112px) 0 clamp(38px,5vw,66px);background:radial-gradient(ellipse at 50% 48%,rgba(113,10,24,.18),transparent 58%),#070609;border-top:1px solid rgba(255,65,84,.13);border-bottom:1px solid rgba(255,65,84,.13);isolation:isolate} .art-marquee-section:before,.art-marquee-section:after{content:"";position:absolute;z-index:3;top:0;bottom:0;width:clamp(24px,6vw,100px);pointer-events:none} .art-marquee-section:before{left:0;background:linear-gradient(90deg,#070609 0%,rgba(7,6,9,.82) 28%,transparent 100%)} .art-marquee-section:after{right:0;background:linear-gradient(270deg,#070609 0%,rgba(7,6,9,.82) 28%,transparent 100%)} .art-marquee-head{display:flex;align-items:end;justify-content:space-between;gap:32px;margin-bottom:clamp(28px,4vw,48px);position:relative;z-index:4} .art-marquee-head .kicker{display:block;margin-bottom:18px}.art-marquee-head h2{font:900 clamp(38px,5.2vw,72px)/.88 var(--display);letter-spacing:-.045em;margin:0;text-transform:uppercase}.art-marquee-head>p{max-width:390px;margin:0 0 4px;color:#a99a9e;font-size:12px;line-height:1.9} .art-marquee-stage{display:flex;flex-direction:column;gap:clamp(12px,1.2vw,18px);transform:rotate(-1.15deg) scale(1.015);transform-origin:center center;margin:0 0 18px} .art-marquee-row{width:100%;overflow:hidden;position:relative}.art-marquee-track{display:flex;width:max-content;will-change:transform;animation:artWallLoop 68s linear infinite}.art-marquee-row-two .art-marquee-track{animation-duration:76s;animation-direction:reverse}.art-marquee-group{display:flex;align-items:stretch;gap:clamp(12px,1.1vw,18px);padding-right:clamp(12px,1.1vw,18px);flex:none} .art-marquee-card{position:relative;flex:0 0 clamp(220px,20vw,360px);height:clamp(128px,12.4vw,218px);margin:0;overflow:hidden;border-radius:clamp(12px,1.2vw,20px);background:#171014;border:1px solid rgba(255,74,95,.22);box-shadow:0 10px 28px rgba(0,0,0,.28);transform:translateZ(0);transition:border-color .3s,box-shadow .3s,transform .3s} .art-marquee-card img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .55s cubic-bezier(.2,.75,.2,1),filter .35s;filter:saturate(.9) contrast(1.02)}.art-marquee-card:after{content:"";position:absolute;inset:35% 0 0;background:linear-gradient(180deg,transparent,rgba(7,4,7,.88));opacity:.08;transition:opacity .3s}.art-marquee-card figcaption{position:absolute;left:15px;right:14px;bottom:13px;display:flex;align-items:center;justify-content:space-between;gap:12px;opacity:0;transform:translateY(7px);transition:opacity .25s,transform .25s;z-index:1}.art-marquee-card figcaption b{font:800 10px var(--display);letter-spacing:.045em;color:#fff}.art-marquee-card figcaption span{font:8px var(--mono);letter-spacing:.08em;color:#ff6678;white-space:nowrap}.art-marquee-card:hover{border-color:rgba(255,56,79,.85);box-shadow:0 12px 38px rgba(255,25,54,.18);transform:translateY(-4px)}.art-marquee-card:hover img{transform:scale(1.055);filter:saturate(1.12) contrast(1.04)}.art-marquee-card:hover:after{opacity:1}.art-marquee-card:hover figcaption{opacity:1;transform:translateY(0)} .art-marquee-stage:hover .art-marquee-track{animation-play-state:paused}.art-marquee-foot{position:relative;z-index:4;display:flex;justify-content:space-between;align-items:center;gap:18px;margin-top:clamp(28px,4vw,48px);font:8px var(--mono);letter-spacing:.11em;color:#8f7b80}.art-marquee-foot span{display:flex;align-items:center;gap:10px}.art-marquee-foot span i{width:6px;height:6px;border-radius:50%;background:#ff334d;box-shadow:0 0 12px #ff334d}.art-marquee-foot a{color:#ff6577;transition:color .2s}.art-marquee-foot a:hover{color:#fff} @keyframes artWallLoop{from{transform:translateX(0)}to{transform:translateX(-50%)}} @media(prefers-reduced-motion:reduce){.art-marquee-track{animation:none;transform:none}.art-marquee-stage{transform:none}} @media(max-width:760px){.art-marquee-section{padding:58px 0 34px}.art-marquee-head{display:block;margin-bottom:28px}.art-marquee-head h2{font-size:clamp(38px,9vw,58px)}.art-marquee-head>p{margin-top:18px;max-width:500px}.art-marquee-stage{transform:rotate(-.7deg) scale(1.02);gap:10px}.art-marquee-card{flex-basis:clamp(210px,62vw,300px);height:clamp(126px,36vw,175px);border-radius:13px}.art-marquee-track{animation-duration:54s}.art-marquee-row-two .art-marquee-track{animation-duration:61s}.art-marquee-foot{font-size:7px;flex-wrap:wrap}.art-marquee-card figcaption{opacity:1;transform:none}.art-marquee-card:after{opacity:.75}} @media(max-width:420px){.art-marquee-head h2{font-size:36px}.art-marquee-foot{align-items:flex-start;flex-direction:column}.art-marquee-card figcaption{left:10px;right:10px;bottom:9px}.art-marquee-card figcaption b{font-size:9px}.art-marquee-card figcaption span{font-size:7px}} /* Pricing-inspired glass treatment for the user-supplied art wall cards */ .art-marquee-card{background:linear-gradient(145deg,rgba(40,24,28,.58),rgba(12,9,12,.74) 70%);border:1px solid rgba(255,235,238,.36);box-shadow:inset 0 1px 0 rgba(255,255,255,.24),inset 0 -1px 0 rgba(255,255,255,.06),0 18px 48px rgba(0,0,0,.42),0 0 0 1px rgba(255,41,61,.10);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)} .art-marquee-card:before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit;background:linear-gradient(135deg,rgba(255,255,255,.15),transparent 23%,transparent 70%,rgba(255,41,61,.09));opacity:.85} .art-marquee-card img{position:relative;z-index:0;object-fit:cover;object-position:center;filter:saturate(.96) contrast(1.03)} .art-marquee-card:after{z-index:1;opacity:.24;background:linear-gradient(180deg,rgba(8,5,8,.04) 0%,transparent 35%,rgba(8,5,8,.84) 100%)} .art-marquee-card figcaption{z-index:2;text-shadow:0 1px 8px #000} .art-marquee-card:hover{border-color:rgba(255,125,139,.9);box-shadow:inset 0 1px 0 rgba(255,255,255,.32),0 22px 60px rgba(0,0,0,.5),0 0 42px rgba(255,41,61,.24)} @media(max-width:760px){.art-marquee-card:after{opacity:.82}} /* GAME ART WALL V55 — compositor-friendly, uninterrupted marquee */ .art-marquee-track{animation-name:artWallLoopSmooth!important;animation-timing-function:linear!important;animation-play-state:running!important;will-change:transform;transform:translate3d(0,0,0);backface-visibility:hidden;} .art-marquee-row-one .art-marquee-track{animation-duration:54s!important;animation-direction:normal!important;} .art-marquee-row-two .art-marquee-track{animation-duration:60s!important;animation-direction:reverse!important;} .art-marquee-stage:hover .art-marquee-track,.art-marquee-track:hover{animation-play-state:running!important;} .art-marquee-card{backface-visibility:hidden;} .art-marquee-card{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;} @keyframes artWallLoopSmooth{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}} @media(max-width:760px){.art-marquee-row-one .art-marquee-track{animation-duration:46s!important}.art-marquee-row-two .art-marquee-track{animation-duration:52s!important}} @media(prefers-reduced-motion:reduce){.art-marquee-track{animation:none!important;transform:none!important}} /* GAME ART WALL V56 — slightly stronger diagonal tilt */ .art-marquee-stage{transform:rotate(-2deg) scale(1.025)!important;} @media(max-width:760px){.art-marquee-stage{transform:rotate(-1.25deg) scale(1.025)!important;}} @media(prefers-reduced-motion:reduce){.art-marquee-stage{transform:none!important;}} /* GAME ART WALL FOOTER LABEL — larger and shifted right */ .art-marquee-foot span{font-size:12px!important;letter-spacing:.12em!important;margin-left:clamp(28px,6vw,96px)!important;} .art-marquee-foot a{font-size:10px!important;} @media(max-width:760px){.art-marquee-foot span{font-size:10px!important;margin-left:clamp(18px,4vw,36px)!important;letter-spacing:.08em!important}.art-marquee-foot a{font-size:9px!important}} /* GAME ART WALL — remove pop-out enlargement; retain subtle glass hover */ .art-marquee-card{transform:none!important;transition:border-color .3s,box-shadow .3s!important;} .art-marquee-card:hover{transform:none!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 12px 32px rgba(0,0,0,.38)!important;} .art-marquee-card img{transform:none!important;filter:none!important;transition:none!important;} .art-marquee-card:hover img{transform:none!important;filter:none!important;box-shadow:none!important;} .art-marquee-card:hover:before{opacity:1;} @media(prefers-reduced-motion:reduce){.art-marquee-card,.art-marquee-card img{transition:none!important}} /* ART WALL — true 3D rotating carousel loop, inspired by the supplied Velorn reference */ .art-marquee-section{overflow:hidden;perspective:none!important} .art-marquee-section:before,.art-marquee-section:after{z-index:5;top:0;bottom:0;width:clamp(40px,10vw,180px);} .art-3d-viewport{position:relative;z-index:2;width:100%;height:clamp(360px,42vw,560px);margin:0 auto 8px;overflow:hidden;perspective:1450px;perspective-origin:50% 46%;transform-style:preserve-3d;mask-image:linear-gradient(90deg,transparent 0%,#000 13%,#000 87%,transparent 100%);-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 13%,#000 87%,transparent 100%)} .art-3d-ring{position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d;animation:artWall3DRotate 42s linear infinite;will-change:transform} .art-3d-card{position:absolute;left:calc(clamp(260px,34vw,450px) / -2);top:calc(clamp(160px,22vw,265px) / -2);width:clamp(260px,34vw,450px);height:clamp(160px,22vw,265px);margin:0;overflow:hidden;border-radius:clamp(10px,1vw,18px);border:1px solid rgba(255,255,255,.26);background:#100b0e;box-shadow:0 20px 60px rgba(0,0,0,.58),0 0 26px rgba(255,36,59,.12),inset 0 1px 0 rgba(255,255,255,.2);backface-visibility:hidden;-webkit-backface-visibility:hidden;transform-style:preserve-3d;transform:rotateY(calc(var(--card-index) * 40deg)) translateZ(clamp(410px,48vw,690px));transition:border-color .3s,box-shadow .3s} .art-3d-card img{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(.96) contrast(1.04);} .art-3d-card:after{content:"";position:absolute;inset:45% 0 0;background:linear-gradient(180deg,transparent,rgba(5,3,5,.9));pointer-events:none} .art-3d-card figcaption{position:absolute;z-index:2;left:15px;right:15px;bottom:13px;display:flex;align-items:center;justify-content:space-between;gap:10px;text-shadow:0 2px 12px #000} .art-3d-card figcaption b{font:800 10px var(--display);letter-spacing:.045em;color:#fff} .art-3d-card figcaption span{font:8px var(--mono);letter-spacing:.08em;color:#ff6678;white-space:nowrap} .art-3d-viewport:hover .art-3d-ring{animation-play-state:paused} .art-3d-card:hover{border-color:rgba(255,85,105,.9);box-shadow:0 26px 75px rgba(0,0,0,.65),0 0 38px rgba(255,36,59,.22)} @keyframes artWall3DRotate{from{transform:translateZ(0) rotateY(0deg)}to{transform:translateZ(0) rotateY(360deg)}} @media(max-width:760px){.art-3d-viewport{height:clamp(300px,78vw,420px);perspective:950px;perspective-origin:50% 48%;mask-image:linear-gradient(90deg,transparent 0%,#000 9%,#000 91%,transparent 100%);-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 9%,#000 91%,transparent 100%)}.art-3d-ring{animation-duration:50s}.art-3d-card{width:clamp(220px,62vw,310px);height:clamp(138px,39vw,195px);left:calc(clamp(220px,62vw,310px) / -2);top:calc(clamp(138px,39vw,195px) / -2);transform:rotateY(calc(var(--card-index) * 40deg)) translateZ(clamp(290px,76vw,430px));border-radius:12px}.art-3d-card figcaption{left:10px;right:10px;bottom:9px}.art-3d-card figcaption b{font-size:9px}.art-3d-card figcaption span{font-size:7px}.art-marquee-stage{display:none!important}} @media(prefers-reduced-motion:reduce){.art-3d-ring{animation:none;transform:rotateY(-18deg)}.art-3d-viewport{mask-image:none;-webkit-mask-image:none}} /* FOOTER CTA — oversized glossy gel button, inspired by the supplied reference */ .contact-footer-redesign .contact-redesign-grid{min-height:560px;} .contact-footer-redesign .contact-redesign-main{display:flex;flex-direction:column;justify-content:flex-start;} .contact-footer-redesign .contact-redesign-title{margin-bottom:clamp(28px,4vw,58px);} .footer-project-cta-wrap{flex:1;min-height:300px;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;isolation:isolate;padding:10px 0 28px;} .footer-project-cta-wrap:before{content:"";position:absolute;z-index:-1;width:min(70%,560px);height:210px;border-radius:50%;background:radial-gradient(ellipse,rgba(255,38,60,.2),rgba(255,38,60,.06) 44%,transparent 72%);filter:blur(24px);pointer-events:none;} .footer-project-gel-button{position:relative;isolation:isolate;display:flex;align-items:center;justify-content:center;gap:clamp(16px,2vw,30px);width:min(100%,650px);min-height:clamp(112px,12vw,184px);padding:18px clamp(20px,3vw,42px);box-sizing:border-box;border-radius:999px;overflow:hidden;text-decoration:none;color:#fff;background:linear-gradient(155deg,#ff6673 0%,#ff3349 28%,#e10e2c 67%,#a80620 100%);border:1px solid rgba(255,255,255,.44);box-shadow:inset 0 3px 2px rgba(255,255,255,.65),inset 0 -10px 18px rgba(80,0,15,.34),0 22px 42px rgba(255,30,55,.22),0 6px 0 #8f071b,0 30px 70px rgba(0,0,0,.42);transform:translateY(0);transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s ease,filter .35s ease;} .footer-project-gel-button:before{content:"";position:absolute;z-index:-1;left:5%;right:5%;top:5%;height:44%;border-radius:999px;background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,.14) 38%,transparent 100%);filter:blur(1px);pointer-events:none;} .footer-project-gel-button:after{content:"";position:absolute;top:-70%;left:-35%;width:34%;height:240%;transform:rotate(24deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.24),transparent);transition:left .65s ease;pointer-events:none;} .footer-project-gel-label{font-size:clamp(25px,3.7vw,58px);font-weight:900;letter-spacing:-.065em;line-height:1;text-align:center;text-shadow:0 2px 1px rgba(100,0,20,.18);} .footer-project-gel-arrow{flex:0 0 auto;width:clamp(52px,5.5vw,82px);height:clamp(52px,5.5vw,82px);display:grid;place-items:center;border-radius:50%;background:linear-gradient(145deg,#fff 0%,#f6f3f4 58%,#d8d2d6 100%);color:#e21b37;font-size:clamp(27px,3vw,42px);font-weight:800;box-shadow:inset 0 2px 3px #fff,0 5px 12px rgba(75,0,12,.25);transition:transform .35s cubic-bezier(.2,.8,.2,1);} .footer-project-gel-button:hover{transform:translateY(-5px);filter:saturate(1.08) brightness(1.06);box-shadow:inset 0 3px 2px rgba(255,255,255,.72),inset 0 -10px 18px rgba(80,0,15,.28),0 29px 52px rgba(255,30,55,.3),0 7px 0 #8f071b,0 38px 82px rgba(0,0,0,.48);} .footer-project-gel-button:hover:after{left:115%;} .footer-project-gel-button:hover .footer-project-gel-arrow{transform:rotate(45deg) scale(1.06);} .footer-project-gel-button:active{transform:translateY(1px);box-shadow:inset 0 5px 10px rgba(80,0,15,.24),0 2px 0 #8f071b,0 14px 28px rgba(255,30,55,.2);} .footer-project-gel-button:focus-visible{outline:3px solid #fff;outline-offset:7px;} .footer-project-cta-note{display:flex;align-items:center;justify-content:center;gap:10px;margin:28px 0 0;color:#8f8586;font:700 9px/1.7 var(--font-mono,monospace);letter-spacing:.14em;text-align:center;} .footer-project-cta-note span{width:6px;height:6px;border-radius:50%;background:#ff3348;box-shadow:0 0 12px rgba(255,51,72,.8);} @media(max-width:850px){.contact-footer-redesign .contact-redesign-grid{grid-template-columns:1fr;min-height:0}.contact-footer-redesign .contact-redesign-aside{border-right:0;border-bottom:1px solid rgba(255,255,255,.12);padding-bottom:35px}.contact-footer-redesign .contact-redesign-main{padding-top:45px}.footer-project-cta-wrap{min-height:250px}} @media(max-width:600px){.contact-footer-redesign .contact-redesign-title{align-items:flex-start;flex-direction:column;gap:14px;margin-bottom:22px}.contact-footer-redesign .contact-redesign-title h3{font-size:clamp(58px,14vw,86px)}.contact-footer-redesign .contact-redesign-title p{text-align:left}.footer-project-cta-wrap{min-height:210px;padding:12px 0 22px}.footer-project-gel-button{min-height:94px;gap:12px;padding:15px 16px}.footer-project-gel-label{font-size:clamp(22px,6.3vw,34px)}.footer-project-gel-arrow{width:48px;height:48px;font-size:27px}.footer-project-cta-note{font-size:7px;letter-spacing:.08em;margin-top:22px}} @media(prefers-reduced-motion:reduce){.footer-project-gel-button,.footer-project-gel-arrow,.footer-project-gel-button:after{transition:none}} /* FOOTER CTA CENTER + FLOATING SERVICE ICONS */ .contact-footer-redesign .contact-redesign-grid{grid-template-columns:1fr;min-height:0;gap:0;} .contact-footer-redesign .contact-redesign-aside{display:grid;grid-template-columns:1.3fr 1fr;align-items:start;gap:40px;border-right:0;border-bottom:1px solid rgba(255,255,255,.12);padding:0 0 34px;margin-bottom:0;} .contact-footer-redesign .contact-redesign-aside-top{display:grid;grid-template-columns:1fr 1fr;column-gap:34px;row-gap:20px;} .contact-footer-redesign .contact-redesign-kicker,.contact-footer-redesign .contact-redesign-intro{grid-column:1/-1;} .contact-footer-redesign .contact-redesign-nav{align-self:end;display:flex;flex-direction:row;flex-wrap:wrap;gap:12px 24px;justify-content:flex-end;} .contact-footer-redesign .contact-redesign-main{align-items:center;padding-top:clamp(38px,5vw,70px);} .contact-footer-redesign .contact-redesign-title{width:100%;align-items:center;justify-content:center;text-align:center;margin-bottom:12px;} .contact-footer-redesign .contact-redesign-title p{text-align:center;} .footer-project-cta-wrap{width:100%;max-width:1160px;min-height:390px;margin-inline:auto;overflow:visible;padding:24px 0 34px;} .footer-project-cta-wrap:before{width:min(68%,650px);height:260px;background:radial-gradient(ellipse,rgba(255,35,59,.23),rgba(255,35,59,.075) 42%,transparent 74%);} .footer-service-orbit{position:absolute;inset:0;pointer-events:none;z-index:0;} .footer-service-float{position:absolute;width:112px;height:108px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;border-radius:24px;border:1px solid rgba(255,255,255,.18);background:linear-gradient(145deg,rgba(255,255,255,.14),rgba(255,255,255,.035) 54%,rgba(255,35,59,.09));box-shadow:inset 0 1px 1px rgba(255,255,255,.22),inset 0 -12px 24px rgba(0,0,0,.18),0 14px 34px rgba(0,0,0,.25);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);color:#fff;animation:footerIconFloat 5.5s ease-in-out infinite;transform:rotate(var(--tilt,0deg));} .footer-service-float:before{content:"";position:absolute;inset:1px;border-radius:inherit;background:linear-gradient(135deg,rgba(255,255,255,.14),transparent 45%);pointer-events:none;} .footer-service-icon{font-size:38px;line-height:1;color:#ff5265;text-shadow:0 0 20px rgba(255,51,72,.35);font-weight:800;} .footer-service-float small{font:700 8px/1.2 var(--font-mono,monospace);letter-spacing:.12em;color:rgba(255,255,255,.76);white-space:nowrap;} .service-game-ui{left:5%;top:14%;--tilt:-9deg;animation-delay:-.7s;} .service-icons{left:19%;bottom:8%;--tilt:8deg;animation-delay:-2.2s;} .service-liveops{left:3%;bottom:12%;--tilt:7deg;animation-delay:-3.4s;} .service-graphics{right:5%;top:12%;--tilt:9deg;animation-delay:-1.4s;} .service-marketing{right:19%;bottom:8%;--tilt:-8deg;animation-delay:-2.8s;} .service-hud{right:3%;bottom:14%;--tilt:-7deg;animation-delay:-4.1s;} .footer-project-gel-button{z-index:2;width:min(100%,650px);} .footer-project-cta-note{position:relative;z-index:2;} @keyframes footerIconFloat{0%,100%{translate:0 0;rotate:0deg;}50%{translate:0 -9px;rotate:1.5deg;}} @media(max-width:850px){.contact-footer-redesign .contact-redesign-aside{grid-template-columns:1fr;gap:26px}.contact-footer-redesign .contact-redesign-nav{justify-content:flex-start}.footer-project-cta-wrap{min-height:380px}.footer-service-float{width:88px;height:86px;border-radius:19px}.footer-service-icon{font-size:30px}.service-game-ui{left:3%;top:5%}.service-icons{left:12%;bottom:5%}.service-liveops{left:1%;bottom:31%}.service-graphics{right:3%;top:5%}.service-marketing{right:12%;bottom:5%}.service-hud{right:1%;bottom:31%}} @media(max-width:600px){.contact-footer-redesign .contact-redesign-aside-top{grid-template-columns:1fr}.contact-footer-redesign .contact-redesign-kicker,.contact-footer-redesign .contact-redesign-intro{grid-column:auto}.contact-footer-redesign .contact-redesign-title{align-items:center;flex-direction:column;text-align:center}.contact-footer-redesign .contact-redesign-title h3{font-size:clamp(48px,12vw,70px)}.footer-project-cta-wrap{min-height:370px;padding:12px 0 24px}.footer-project-gel-button{width:88%;min-height:88px;gap:10px;padding:13px 12px}.footer-project-gel-label{font-size:clamp(20px,5.6vw,31px)}.footer-project-gel-arrow{width:44px;height:44px;font-size:25px}.footer-service-float{width:70px;height:70px;gap:5px;border-radius:16px}.footer-service-icon{font-size:24px}.footer-service-float small{font-size:6px;letter-spacing:.06em}.service-game-ui{left:2%;top:3%}.service-icons{left:7%;bottom:4%}.service-liveops{left:0;bottom:32%}.service-graphics{right:2%;top:3%}.service-marketing{right:7%;bottom:4%}.service-hud{right:0;bottom:32%}.footer-project-cta-note{max-width:80%;font-size:7px;letter-spacing:.06em;margin-top:24px}} @media(prefers-reduced-motion:reduce){.footer-service-float{animation:none;}} /* V68: remove the LET'S TALK heading and center the project CTA */ .contact-footer-redesign .contact-redesign-main{align-items:center;justify-content:center;padding-top:clamp(14px,2vw,28px);} .contact-footer-redesign .footer-project-cta-wrap{margin-inline:auto;align-self:center;width:100%;} .contact-footer-redesign .footer-project-gel-button{margin-inline:auto;} /* V69: match supplied footer reference — CTA centered across the full viewport, floating service tiles around it, contact email directly underneath, footer links below */ .contact-footer-redesign .contact-redesign-grid{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:0!important;min-height:0!important;} .contact-footer-redesign .contact-redesign-main{order:0!important;display:flex!important;width:100%!important;max-width:none!important;align-items:center!important;justify-content:center!important;padding:0!important;margin:0!important;} .contact-footer-redesign .footer-project-cta-wrap{width:min(100%,1160px)!important;max-width:1160px!important;min-height:370px!important;margin:0 auto!important;padding:22px 0 24px!important;display:flex!important;align-items:center!important;justify-content:center!important;} .contact-footer-redesign .footer-project-gel-button{position:relative!important;left:auto!important;right:auto!important;margin:0 auto!important;width:min(100%,650px)!important;align-self:center!important;} .contact-footer-redesign .footer-service-orbit{inset:0!important;} .contact-footer-redesign .footer-project-email{position:relative;z-index:3;display:block;margin:20px 0 0;text-align:center;font-size:clamp(16px,1.45vw,22px);font-weight:850;letter-spacing:-.045em;color:var(--white);} .contact-footer-redesign .footer-project-email:hover{color:var(--red);} .contact-footer-redesign .footer-project-cta-note{margin:10px 0 0!important;font-size:8px!important;letter-spacing:.1em!important;} .contact-footer-redesign .contact-redesign-aside{order:1!important;display:grid!important;grid-template-columns:1fr auto!important;align-items:center!important;gap:28px!important;width:100%!important;padding:24px 5%!important;margin:0!important;border-top:1px solid rgba(255,255,255,.12)!important;border-bottom:1px solid rgba(255,255,255,.12)!important;} .contact-footer-redesign .contact-redesign-kicker,.contact-footer-redesign .contact-redesign-intro{display:none!important;} .contact-footer-redesign .contact-redesign-aside-top{display:flex!important;align-items:center!important;gap:28px!important;} .contact-footer-redesign .contact-redesign-details{margin:0!important;} .contact-footer-redesign .contact-redesign-nav{display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:12px 22px!important;} .contact-footer-redesign .contact-redesign-word-row{margin-top:0!important;} @media(max-width:850px){.contact-footer-redesign .footer-project-cta-wrap{min-height:370px!important;width:100%!important;padding:18px 18px 22px!important}.contact-footer-redesign .contact-redesign-aside{grid-template-columns:1fr!important;gap:20px!important}.contact-footer-redesign .contact-redesign-aside-top{justify-content:center!important;flex-wrap:wrap!important}.contact-footer-redesign .contact-redesign-nav{justify-content:center!important}} @media(max-width:600px){.contact-footer-redesign .footer-project-cta-wrap{min-height:350px!important;padding:14px 12px 20px!important}.contact-footer-redesign .footer-project-gel-button{width:min(88%,430px)!important;min-height:88px!important}.contact-footer-redesign .footer-project-email{font-size:16px!important;margin-top:17px!important}.contact-footer-redesign .footer-project-cta-note{font-size:6px!important;letter-spacing:.06em!important}.contact-footer-redesign .footer-service-float{width:66px!important;height:66px!important}.contact-footer-redesign .service-game-ui{left:3%!important;top:5%!important}.contact-footer-redesign .service-graphics{right:3%!important;top:5%!important}.contact-footer-redesign .service-liveops{left:1%!important;bottom:30%!important}.contact-footer-redesign .service-hud{right:1%!important;bottom:30%!important}.contact-footer-redesign .service-icons{left:13%!important;bottom:2%!important}.contact-footer-redesign .service-marketing{right:13%!important;bottom:2%!important}} /* V70: unify site CTAs with the approved glossy gel button treatment; retain each control's existing dimensions and layout. */ :where(.nav-cta,.btn-red,.cs-cta-button,.about-v2-cta,.uds-reim-cta){ position:relative;isolation:isolate;overflow:hidden; border:1px solid rgba(255,255,255,.42)!important; border-radius:999px!important; color:#fff!important; background:linear-gradient(155deg,#ff6673 0%,#ff3349 28%,#e10e2c 67%,#a80620 100%)!important; box-shadow:inset 0 2px 1px rgba(255,255,255,.56),inset 0 -5px 10px rgba(80,0,15,.25),0 5px 0 #8f071b,0 10px 24px rgba(255,30,55,.18)!important; text-decoration:none; transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s ease,filter .3s ease!important; } :where(.nav-cta,.btn-red,.cs-cta-button,.about-v2-cta,.uds-reim-cta)::before{ content:"";position:absolute;z-index:-1;left:5%;right:5%;top:4%;height:47%;border-radius:999px; background:linear-gradient(180deg,rgba(255,255,255,.48),rgba(255,255,255,.12) 42%,transparent 100%); pointer-events:none; } :where(.nav-cta,.btn-red,.cs-cta-button,.about-v2-cta,.uds-reim-cta)::after{ content:"";position:absolute;z-index:0;top:-65%;left:-42%;width:27%;height:230%;transform:rotate(24deg); background:linear-gradient(90deg,transparent,rgba(255,255,255,.25),transparent); transition:left .58s ease;pointer-events:none; } :where(.nav-cta,.btn-red,.cs-cta-button,.about-v2-cta,.uds-reim-cta):hover{ transform:translateY(-3px);filter:saturate(1.08) brightness(1.05); box-shadow:inset 0 2px 1px rgba(255,255,255,.68),inset 0 -5px 10px rgba(80,0,15,.22),0 6px 0 #8f071b,0 15px 30px rgba(255,30,55,.25)!important; } :where(.nav-cta,.btn-red,.cs-cta-button,.about-v2-cta,.uds-reim-cta):hover::after{left:120%;} :where(.nav-cta,.btn-red,.cs-cta-button,.about-v2-cta,.uds-reim-cta):active{transform:translateY(1px);} :where(.nav-cta,.btn-red,.cs-cta-button,.about-v2-cta,.uds-reim-cta):focus-visible{outline:2px solid #fff;outline-offset:4px;} @media(prefers-reduced-motion:reduce){:where(.nav-cta,.btn-red,.cs-cta-button,.about-v2-cta,.uds-reim-cta),:where(.nav-cta,.btn-red,.cs-cta-button,.about-v2-cta,.uds-reim-cta)::after{transition:none!important;}} /* V71: no rectangular buttons anywhere — preserve each button's existing size and visual treatment, but use fully rounded pill corners. */ :where(button,input[type="button"],input[type="submit"],input[type="reset"],[role="button"],.button,.btn,.btn-primary,.btn-secondary,.cta,.cta-button,.nav-cta,.btn-red,.cs-cta-button,.about-v2-cta,.uds-reim-cta,.footer-project-gel-button,a[class*="btn"],a[class*="button"],a[class*="cta"]){ border-radius:999px!important; } /* V72: enforce the exact fully rounded pill silhouette on every CTA/button family, including legacy and magnetic variants. Keep each control's existing width, height, padding and placement. */ :where(button,input[type="button"],input[type="submit"],input[type="reset"],[role="button"],.button,.btn,.btn-primary,.btn-secondary,.btn-outline,.btn-red,.cta,.cta-button,.nav-cta,.mobile-cta,.cs-cta-button,.cs-art-cta,.cs-race-button,.about-v2-cta,.uds-reim-cta,.work-card-cta,.filter-btn,.footer-project-gel-button,a[class*="btn"],a[class*="button"],a[class*="cta"]){ border-radius:999px!important; overflow:hidden; } :where(.btn-red,.cs-cta-button,.cs-art-cta,.cs-race-button,.mobile-cta,.work-card-cta,.filter-btn,.btn-outline){ border:1px solid rgba(255,255,255,.42)!important; background:linear-gradient(155deg,#ff6673 0%,#ff3349 28%,#e10e2c 67%,#a80620 100%)!important; color:#fff!important; box-shadow:inset 0 2px 1px rgba(255,255,255,.56),inset 0 -5px 10px rgba(80,0,15,.25),0 4px 0 #8f071b,0 9px 20px rgba(255,30,55,.18)!important; } /* V73: hard override for legacy CTA styles that kept square corners. Force true oval/pill silhouettes at each control's existing dimensions. */ html body a.btn, html body a.btn-outline, html body a.btn-red, html body a.nav-cta, html body a.about-v2-cta, html body a.cs-cta-button, html body a.cs-art-cta, html body a.cs-race-button, html body a.uds-reim-cta, html body a.work-card-cta, html body .mobile-cta a, html body a[class*="btn"], html body a[class*="button"], html body a[class*="cta"], html body button, html body input[type="button"], html body input[type="submit"], html body input[type="reset"], html body [role="button"] { border-radius: 9999px !important; overflow: hidden !important; clip-path: inset(0 round 9999px) !important; } html body a.btn::before, html body a.btn::after, html body a.btn-outline::before, html body a.btn-outline::after, html body a.btn-red::before, html body a.btn-red::after, html body a.nav-cta::before, html body a.nav-cta::after, html body a.about-v2-cta::before, html body a.about-v2-cta::after, html body a.cs-cta-button::before, html body a.cs-cta-button::after, html body a.cs-art-cta::before, html body a.cs-art-cta::after, html body a.cs-race-button::before, html body a.cs-race-button::after, html body a.uds-reim-cta::before, html body a.uds-reim-cta::after, html body a.work-card-cta::before, html body a.work-card-cta::after, html body a[class*="btn"]::before, html body a[class*="btn"]::after, html body a[class*="button"]::before, html body a[class*="button"]::after, html body a[class*="cta"]::before, html body a[class*="cta"]::after { border-radius: inherit !important; } /* V74: replace the oversized About CTA banner with the same compact oval gel button used by Start a Project. */ html body a.about-v2-gel-compact{ display:inline-flex!important; align-items:center!important; justify-content:center!important; width:fit-content!important; max-width:100%!important; min-width:0!important; min-height:68px!important; height:auto!important; padding:10px 14px 10px 25px!important; gap:18px!important; border-radius:999px!important; overflow:hidden!important; box-sizing:border-box!important; text-decoration:none!important; } html body a.about-v2-gel-compact .footer-project-gel-label{ display:block!important; font-size:clamp(15px,1.25vw,19px)!important; line-height:1.05!important; font-weight:900!important; letter-spacing:-.045em!important; white-space:nowrap!important; } html body a.about-v2-gel-compact .footer-project-gel-arrow{ width:40px!important; height:40px!important; flex:0 0 40px!important; font-size:23px!important; } html body a.about-v2-gel-compact::before{left:5%!important;right:5%!important;top:4%!important;height:45%!important;border-radius:999px!important;} html body a.about-v2-gel-compact::after{border-radius:999px!important;} @media(max-width:600px){ html body a.about-v2-gel-compact{min-height:58px!important;padding:8px 10px 8px 19px!important;gap:12px!important;} html body a.about-v2-gel-compact .footer-project-gel-label{font-size:14px!important;} html body a.about-v2-gel-compact .footer-project-gel-arrow{width:34px!important;height:34px!important;flex-basis:34px!important;font-size:20px!important;} } /* V75: reuse the approved Start a Project gel treatment on every remaining primary CTA, scaling naturally to each control's existing dimensions. Do not alter width/height/padding. */ html body a.nav-cta, html body a.btn-red, html body a.cs-cta-button, html body a.cs-art-cta, html body a.cs-race-button, html body a.about-v2-cta:not(.about-v2-gel-compact), html body a.uds-reim-cta, html body a.work-card-cta, html body a.mobile-cta, html body a[class*="cta"], html body a[class*="btn"], html body button.btn, html body button.btn-primary, html body button.btn-red, html body [role="button"].cta, html body .contact-footer-redesign .footer-project-gel-button { position:relative!important; isolation:isolate!important; border-radius:9999px!important; overflow:hidden!important; clip-path:inset(0 round 9999px)!important; border:1px solid rgba(255,255,255,.42)!important; background:linear-gradient(155deg,#ff6673 0%,#ff3349 28%,#e10e2c 67%,#a80620 100%)!important; color:#fff!important; box-shadow:inset 0 2px 1px rgba(255,255,255,.58),inset 0 -5px 10px rgba(80,0,15,.27),0 4px 0 #8f071b,0 9px 20px rgba(255,30,55,.18)!important; } html body a.nav-cta::before, html body a.btn-red::before, html body a.cs-cta-button::before, html body a.cs-art-cta::before, html body a.cs-race-button::before, html body a.about-v2-cta:not(.about-v2-gel-compact)::before, html body a.uds-reim-cta::before, html body a.work-card-cta::before, html body a.mobile-cta::before, html body a[class*="cta"]::before, html body a[class*="btn"]::before, html body button.btn::before, html body button.btn-primary::before, html body button.btn-red::before, html body [role="button"].cta::before { content:""!important;position:absolute!important;z-index:0!important;left:4%!important;right:4%!important;top:4%!important;height:48%!important;border-radius:9999px!important; background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,.14) 42%,transparent)!important;pointer-events:none!important; } html body a.nav-cta::after, html body a.btn-red::after, html body a.cs-cta-button::after, html body a.cs-art-cta::after, html body a.cs-race-button::after, html body a.about-v2-cta:not(.about-v2-gel-compact)::after, html body a.uds-reim-cta::after, html body a.work-card-cta::after, html body a.mobile-cta::after, html body a[class*="cta"]::after, html body a[class*="btn"]::after, html body button.btn::after, html body button.btn-primary::after, html body button.btn-red::after, html body [role="button"].cta::after { border-radius:9999px!important; } html body a.nav-cta:hover, html body a.btn-red:hover, html body a.cs-cta-button:hover, html body a.cs-art-cta:hover, html body a.cs-race-button:hover, html body a.about-v2-cta:hover, html body a.uds-reim-cta:hover, html body a.work-card-cta:hover, html body a.mobile-cta:hover, html body a[class*="cta"]:hover, html body a[class*="btn"]:hover, html body button.btn:hover, html body button.btn-primary:hover, html body button.btn-red:hover { filter:saturate(1.08) brightness(1.05)!important; box-shadow:inset 0 2px 1px rgba(255,255,255,.66),inset 0 -5px 10px rgba(80,0,15,.23),0 5px 0 #8f071b,0 12px 24px rgba(255,30,55,.24)!important; } /* V76: tighten section rhythm and remove the oversized empty lead-in before testimonials. */ .testimonials-section{height:220vh!important;min-height:1500px!important;} .testimonials-sticky{justify-content:flex-start!important;padding:clamp(72px,10vh,108px) 0 30px!important;} .testimonial-stage{margin-top:clamp(22px,3vh,34px)!important;} @media(max-width:760px){ .testimonials-section{height:210vh!important;min-height:0!important;} .testimonials-sticky{padding:76px 0 24px!important;} .testimonial-stage{margin-top:24px!important;} } /* V77: shorten testimonial scroll runway so the FAQ follows immediately, without the oversized dead zone. */ .testimonials-section{height:138vh!important;min-height:0!important;} .testimonials-sticky{height:100vh!important;min-height:0!important;padding:clamp(54px,7vh,78px) 0 22px!important;} .testimonial-stage{margin-top:clamp(18px,2.4vh,26px)!important;} @media(max-width:760px){ .testimonials-section{height:132vh!important;min-height:0!important;} .testimonials-sticky{height:100vh!important;min-height:0!important;padding:64px 0 20px!important;} .testimonial-stage{margin-top:18px!important;} } /* V78: eliminate the dead scroll runway between the testimonial deck and FAQ. */ .testimonials-section{height:106vh!important;min-height:0!important;} .testimonials-sticky{height:100vh!important;min-height:0!important;padding:clamp(42px,5vh,58px) 0 16px!important;} .testimonials-heading{margin-bottom:0!important;} .testimonial-stage{margin-top:clamp(12px,1.6vh,18px)!important;} .testimonials-progress{margin-top:12px!important;} @media(max-width:760px){ .testimonials-section{height:104vh!important;min-height:0!important;} .testimonials-sticky{height:100vh!important;min-height:0!important;padding:54px 0 14px!important;} .testimonial-stage{margin-top:12px!important;} .testimonials-progress{margin-top:10px!important;} } /* V79: physically lift FAQ into the excessive dead space after the testimonial deck. */ .testimonials-section{height:100vh!important;min-height:0!important;} .testimonials-sticky{height:100vh!important;min-height:0!important;} .faq-section{position:relative!important;z-index:2!important;margin-top:-46vh!important;padding-top:54px!important;} @media(max-width:760px){ .testimonials-section{height:100vh!important;min-height:0!important;} .testimonials-sticky{height:100vh!important;min-height:0!important;padding:42px 0 12px!important;} .faq-section{margin-top:-30vh!important;padding-top:42px!important;} } /* v82 — full-width LET’S CONNECT footer headline */ .contact-footer-redesign .footer-connect-heading{ display:block; position:relative; width:100vw; max-width:none; box-sizing:border-box; margin:0 0 clamp(36px,5vw,78px) calc(50% - 50vw); padding:clamp(12px,2vw,28px) 1.5vw 0; color:#f2f0eb; font-family:inherit; font-size:clamp(64px,15.2vw,270px); font-weight:950; line-height:.78; letter-spacing:-.085em; text-align:center; text-transform:uppercase; white-space:nowrap; overflow:hidden; } @media(max-width:600px){.contact-footer-redesign .footer-connect-heading{font-size:15vw;letter-spacing:-.075em;margin-bottom:30px;padding-inline:2vw;}} /* v83 — stronger, condensed display type for the footer headline */ .contact-footer-redesign .footer-connect-heading{ font-family:'Anton','Barlow Condensed',sans-serif!important; font-weight:400!important; letter-spacing:-.025em!important; line-height:.88!important; transform:scaleX(.98); transform-origin:center; } @media(max-width:600px){ .contact-footer-redesign .footer-connect-heading{letter-spacing:-.02em!important;line-height:.92!important;} } /* v84 — updated footer CTA headline; slightly smaller to fit the longer phrase. */ .contact-footer-redesign .footer-connect-heading{ font-size:clamp(42px,10.6vw,190px)!important; letter-spacing:-.035em!important; line-height:.9!important; padding-inline:1.2vw!important; } @media(max-width:600px){ .contact-footer-redesign .footer-connect-heading{font-size:8.4vw!important;letter-spacing:-.04em!important;line-height:1!important;white-space:normal!important;padding-inline:4vw!important;margin-bottom:26px!important;} } /* v85 — premium glass-gradient finish for the footer headline */ .contact-footer-redesign .footer-connect-heading{ background:linear-gradient(180deg,#ffffff 0%,#f6f5f4 20%,#bfc3cb 42%,#ffffff 54%,#8f939d 69%,#f9f8f7 82%,#ff4558 100%)!important; -webkit-background-clip:text!important;background-clip:text!important; -webkit-text-fill-color:transparent!important;color:transparent!important; text-shadow:0 1px 0 rgba(255,255,255,.12),0 8px 26px rgba(255,40,62,.09); filter:drop-shadow(0 0 1px rgba(255,255,255,.12)); } /* v86 — ARENA-inspired luminous wave typography for the footer CTA */ .contact-footer-redesign .footer-connect-heading{ font-family:'Manrope',Arial,sans-serif!important; font-weight:800!important; letter-spacing:-.075em!important; line-height:.88!important; color:#f9f6ff!important; -webkit-text-fill-color:#f9f6ff!important; background:none!important; text-shadow: 0 0 1px rgba(255,255,255,.98), 0 0 5px rgba(255,255,255,.95), 0 0 14px rgba(174,145,255,.9), 0 0 28px rgba(150,88,255,.72), 0 0 48px rgba(231,65,255,.42), 0 0 78px rgba(43,108,255,.32)!important; filter:none!important; position:relative; isolation:isolate; animation:arenaGlowPulse 4.5s ease-in-out infinite alternate; } .contact-footer-redesign .footer-connect-heading::before, .contact-footer-redesign .footer-connect-heading::after{ content:attr(aria-label); position:absolute;inset:clamp(12px,2vw,28px) 1.2vw 0; display:block;pointer-events:none;white-space:inherit;overflow:hidden; color:transparent;-webkit-text-fill-color:transparent; background:repeating-linear-gradient(180deg,rgba(255,255,255,.52) 0 1px,transparent 1px 4px); -webkit-background-clip:text;background-clip:text; opacity:.38;mix-blend-mode:screen;transform:translateX(-2px); } .contact-footer-redesign .footer-connect-heading::after{ background:linear-gradient(90deg,transparent 0%,rgba(77,151,255,.75) 18%,transparent 34%,rgba(255,91,232,.78) 68%,transparent 100%); -webkit-background-clip:text;background-clip:text; opacity:.6;transform:translateX(3px);filter:blur(.45px); } @keyframes arenaGlowPulse{ 0%{text-shadow:0 0 1px #fff,0 0 5px rgba(255,255,255,.9),0 0 14px rgba(174,145,255,.78),0 0 28px rgba(150,88,255,.58),0 0 48px rgba(231,65,255,.3),0 0 78px rgba(43,108,255,.24);} 100%{text-shadow:0 0 2px #fff,0 0 7px #fff,0 0 19px rgba(174,145,255,1),0 0 38px rgba(150,88,255,.85),0 0 62px rgba(231,65,255,.5),0 0 94px rgba(43,108,255,.4);} } @media(prefers-reduced-motion:reduce){.contact-footer-redesign .footer-connect-heading{animation:none!important;}} @media(max-width:600px){.contact-footer-redesign .footer-connect-heading{letter-spacing:-.055em!important;}} /* v87 — red arena wave lettering; transparent text-only treatment, no image panel */ .contact-footer-redesign .footer-connect-heading{ position:relative!important; display:block!important; width:100%!important; max-width:100%!important; box-sizing:border-box!important; background:transparent!important; border:0!important; border-radius:0!important; box-shadow:none!important; overflow:visible!important; isolation:isolate!important; color:#fff8f8!important; -webkit-text-fill-color:#fff8f8!important; font-family:'Manrope','Arial Rounded MT Bold',Arial,sans-serif!important; font-weight:800!important; letter-spacing:-.075em!important; line-height:.9!important; text-shadow:0 0 1px #fff,0 0 5px rgba(255,255,255,.95),0 0 13px rgba(255,55,73,.95),0 0 27px rgba(255,25,48,.78),0 0 48px rgba(255,0,34,.42)!important; filter:none!important; animation:arenaRedGlow 3.8s ease-in-out infinite alternate!important; } .contact-footer-redesign .footer-connect-heading::before, .contact-footer-redesign .footer-connect-heading::after{ content:attr(aria-label)!important; position:absolute!important; inset:0!important; width:100%!important; height:100%!important; padding:inherit!important; display:block!important; pointer-events:none!important; white-space:inherit!important; overflow:visible!important; border:0!important; background:repeating-linear-gradient(180deg,rgba(255,75,90,.58) 0 1px,transparent 1px 4px)!important; -webkit-background-clip:text!important; background-clip:text!important; color:transparent!important; -webkit-text-fill-color:transparent!important; opacity:.5!important; mix-blend-mode:screen!important; transform:translate(-2px,0)!important; filter:none!important; } .contact-footer-redesign .footer-connect-heading::after{ background:repeating-linear-gradient(180deg,transparent 0 2px,rgba(255,28,52,.68) 2px 3px,transparent 3px 6px)!important; -webkit-background-clip:text!important; background-clip:text!important; opacity:.62!important; transform:translate(2px,1px)!important; } @keyframes arenaRedGlow{ from{text-shadow:0 0 1px #fff,0 0 5px rgba(255,255,255,.92),0 0 13px rgba(255,55,73,.86),0 0 27px rgba(255,25,48,.64),0 0 48px rgba(255,0,34,.32)!important;} to{text-shadow:0 0 2px #fff,0 0 7px #fff,0 0 18px rgba(255,55,73,1),0 0 36px rgba(255,25,48,.88),0 0 60px rgba(255,0,34,.5)!important;} } @media(prefers-reduced-motion:reduce){.contact-footer-redesign .footer-connect-heading{animation:none!important;}} /* v88 — fix headline collision: deliberate two-line layout with text-only red wave glow */ .contact-footer-redesign .footer-connect-heading{ display:flex!important; flex-direction:column!important; align-items:center!important; justify-content:center!important; width:100%!important; max-width:100%!important; margin:0 auto clamp(32px,4vw,64px)!important; padding:clamp(12px,2vw,24px) 2vw 0!important; box-sizing:border-box!important; white-space:normal!important; overflow:visible!important; transform:none!important; font-family:'Manrope',Arial,sans-serif!important; font-size:clamp(42px,8.2vw,132px)!important; font-weight:900!important; letter-spacing:-.065em!important; line-height:.98!important; text-align:center!important; color:#fff8f8!important; -webkit-text-fill-color:#fff8f8!important; background:transparent!important; text-shadow:none!important; filter:none!important; animation:none!important; } .contact-footer-redesign .footer-connect-heading::before, .contact-footer-redesign .footer-connect-heading::after{content:none!important;display:none!important;} .contact-footer-redesign .footer-connect-line{ display:block!important; position:relative!important; width:max-content!important; max-width:100%!important; white-space:nowrap!important; padding:0 .08em!important; isolation:isolate!important; color:#fff8f8!important; -webkit-text-fill-color:#fff8f8!important; text-shadow:0 0 2px #fff,0 0 8px rgba(255,245,245,.92),0 0 18px rgba(255,42,62,.92),0 0 38px rgba(255,0,34,.52)!important; } .contact-footer-redesign .footer-connect-line::before, .contact-footer-redesign .footer-connect-line::after{ content:attr(data-text)!important; position:absolute!important; inset:0!important; display:block!important; pointer-events:none!important; white-space:inherit!important; color:transparent!important; -webkit-text-fill-color:transparent!important; -webkit-background-clip:text!important; background-clip:text!important; overflow:visible!important; } .contact-footer-redesign .footer-connect-line::before{ background:repeating-linear-gradient(180deg,rgba(255,105,120,.7) 0 1px,transparent 1px 4px)!important; opacity:.65!important; transform:translateX(-1px)!important; } .contact-footer-redesign .footer-connect-line::after{ background:linear-gradient(180deg,rgba(255,255,255,.3),rgba(255,0,35,.82))!important; opacity:.34!important; transform:translateX(1px)!important; } @media(max-width:700px){ .contact-footer-redesign .footer-connect-heading{font-size:clamp(35px,9.4vw,68px)!important;letter-spacing:-.06em!important;line-height:1!important;padding-inline:3vw!important;margin-bottom:30px!important;} .contact-footer-redesign .footer-connect-line{white-space:normal!important;text-wrap:balance!important;} } /* v89 — fade each headline line smoothly at both ends; keep the center crisp */ .contact-footer-redesign .footer-connect-line{ -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.08) 3%,#000 17%,#000 83%,rgba(0,0,0,.08) 97%,transparent 100%)!important; mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.08) 3%,#000 17%,#000 83%,rgba(0,0,0,.08) 97%,transparent 100%)!important; -webkit-mask-size:100% 100%!important; mask-size:100% 100%!important; -webkit-mask-repeat:no-repeat!important; mask-repeat:no-repeat!important; } .contact-footer-redesign .footer-connect-line::before, .contact-footer-redesign .footer-connect-line::after{ -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 18%,#000 82%,transparent 100%)!important; mask-image:linear-gradient(90deg,transparent 0%,#000 18%,#000 82%,transparent 100%)!important; } /* v91 — bold rounded premium footer headline font; preserve red scanlines and edge fade */ .contact-footer-redesign .footer-connect-heading, .contact-footer-redesign .footer-connect-line{ font-family:'Nunito', 'Arial Rounded MT Bold', 'Manrope', Arial, sans-serif!important; font-weight:1000!important; letter-spacing:-.045em!important; font-synthesis:weight!important; -webkit-font-smoothing:antialiased!important; text-rendering:geometricPrecision!important; } .contact-footer-redesign .footer-connect-line{ text-shadow:0 0 1px #fff,0 0 6px rgba(255,250,250,.9),0 0 17px rgba(255,42,62,.9),0 0 34px rgba(255,0,34,.48)!important; } /* v92 — arena-reference rounded wave typography; transparent two-line footer */ .contact-footer-redesign .footer-connect-heading, .contact-footer-redesign .footer-connect-line{ font-family:'Arial Rounded MT Bold','Nunito','Trebuchet MS',system-ui,sans-serif!important; font-weight:1000!important; letter-spacing:-.055em!important; } .contact-footer-redesign .footer-connect-line{ color:#fff!important; -webkit-text-fill-color:#fff!important; text-shadow:0 0 1px rgba(255,255,255,.95),0 0 5px rgba(255,240,245,.72),0 0 13px rgba(255,35,65,.76)!important; } .contact-footer-redesign .footer-connect-line::before{ background:repeating-linear-gradient(180deg,rgba(255,245,248,.95) 0 1px,rgba(255,40,70,.85) 1px 2px,transparent 2px 4px)!important; opacity:.48!important; transform:translateX(-1px)!important; animation:footerWaveDrift 7s ease-in-out infinite alternate!important; } .contact-footer-redesign .footer-connect-line::after{ background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,30,65,.86) 52%,rgba(255,255,255,.16))!important; opacity:.28!important; transform:translateX(1px)!important; } @keyframes footerWaveDrift{from{background-position:0 0;opacity:.34}to{background-position:0 14px;opacity:.62}} @media(prefers-reduced-motion:reduce){.contact-footer-redesign .footer-connect-line::before{animation:none!important}} /* v93 — use the approved transparent arena-style artwork directly; bypass font fallback differences */ .contact-footer-redesign .footer-connect-image-wrap{ display:block!important; width:100%!important; max-width:100%!important; margin:0 auto clamp(32px,4vw,64px)!important; padding:clamp(10px,1.5vw,20px) 2vw 0!important; box-sizing:border-box!important; background:transparent!important; border:0!important; box-shadow:none!important; overflow:visible!important; } .contact-footer-redesign .footer-connect-image{ display:block!important; width:min(100%,1500px)!important; height:auto!important; max-height:none!important; margin:0 auto!important; object-fit:contain!important; background:transparent!important; filter:none!important; border:0!important; box-shadow:none!important; } @media(max-width:700px){ .contact-footer-redesign .footer-connect-image-wrap{padding:8px 1vw 0!important;margin-bottom:28px!important} .contact-footer-redesign .footer-connect-image{width:100%!important} } /* V96 — match the heavy Anton display font used in the supplied headline reference */ html body .contact-footer-redesign .footer-project-gel-button .footer-project-gel-label, html body .footer-project-gel-button .footer-project-gel-label{ font-family:'Anton','Barlow Condensed',Impact,sans-serif!important; font-weight:400!important; font-size:clamp(32px,4.15vw,64px)!important; letter-spacing:-.035em!important; line-height:.98!important; text-transform:uppercase!important; text-wrap:balance!important; -webkit-font-smoothing:antialiased!important; text-rendering:geometricPrecision!important; text-shadow:0 2px 1px rgba(100,0,20,.16)!important; } @media(max-width:600px){ html body .contact-footer-redesign .footer-project-gel-button .footer-project-gel-label, html body .footer-project-gel-button .footer-project-gel-label{font-size:clamp(25px,7vw,38px)!important;letter-spacing:-.015em!important;line-height:1!important} } /* V97 — hard override for footer Start a Project typography, cache-busted */ html body .contact-footer-redesign .footer-project-cta-wrap a.footer-project-gel-button > span.footer-project-gel-label { font-family: "Anton", Impact, sans-serif !important; font-style: normal !important; font-weight: 400 !important; font-size: clamp(32px,4.15vw,64px) !important; letter-spacing: -.035em !important; line-height: .98 !important; text-transform: uppercase !important; -webkit-text-stroke: 0 !important; } @media(max-width:600px){html body .contact-footer-redesign .footer-project-cta-wrap a.footer-project-gel-button > span.footer-project-gel-label {font-size:clamp(25px,7vw,38px)!important;letter-spacing:-.015em!important}} /* UDS pricing headline: make the service name the hero message */ #pricing .uds-reim-copy h2{font-size:clamp(38px,4.35vw,70px)!important;line-height:.92!important;letter-spacing:-.055em!important;} #pricing .uds-reim-eyebrow{justify-content:flex-start!important;} #pricing .uds-reim-eyebrow b{margin-left:0!important;color:#ff687a!important;font-size:10px!important;letter-spacing:.16em!important;} @media(max-width:700px){#pricing .uds-reim-copy h2{font-size:clamp(31px,8.8vw,52px)!important;line-height:.96!important;letter-spacing:-.05em!important;}} /* UDS pricing headline matches the main hero display font */ #pricing #pricing-title, #pricing .uds-pricing-intro h2 { font-family: var(--display, 'Barlow Condensed', sans-serif) !important; font-weight: 900 !important; text-transform: uppercase !important; letter-spacing: -.04em !important; } #pricing #pricing-title span, #pricing #pricing-title em { font-family: inherit !important; font-weight: 900 !important; } /* V71: improve footer contact readability on desktop and mobile */ .contact-footer-redesign .footer-project-email{font-size:clamp(22px,2vw,30px)!important;letter-spacing:-.04em!important;} .contact-footer-redesign .footer-project-cta-note{font-size:10px!important;letter-spacing:.12em!important;} @media(max-width:600px){.contact-footer-redesign .footer-project-email{font-size:clamp(19px,5.2vw,24px)!important;margin-top:17px!important;}.contact-footer-redesign .footer-project-cta-note{font-size:clamp(8px,2.2vw,10px)!important;letter-spacing:.055em!important;line-height:1.6!important;max-width:100%;}} /* Footer project enquiry drawer — THE UI BUDDY red/black theme */ .project-drawer-backdrop{position:fixed;inset:0;z-index:9998;background:rgba(0,0,0,.76);backdrop-filter:blur(5px);opacity:0;transition:opacity .32s ease} .project-drawer-backdrop.is-open{opacity:1} .project-drawer{position:fixed;z-index:9999;top:0;right:0;width:min(450px,100vw);height:100dvh;overflow-y:auto;overscroll-behavior:contain;background:radial-gradient(ellipse at 100% 0%,#31090e 0%,#0a0809 43%,#050505 78%);color:#f5f5f5;border-left:1px solid #5b1821;box-shadow:-28px 0 80px #000b;transform:translateX(105%);visibility:hidden;transition:transform .42s cubic-bezier(.2,.8,.2,1),visibility .42s;} .project-drawer:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#ff293d,#ff6675 55%,transparent)} .project-drawer.is-open{transform:translateX(0);visibility:visible} .project-drawer-head{height:70px;padding:0 22px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #291317;font:700 10px var(--mono);letter-spacing:.16em;color:#ff5265} .project-drawer-close{width:30px;height:30px;border:1px solid #54202a;border-radius:6px;background:#160b0d;color:#f4dfe2;font:22px/1 var(--body);cursor:pointer;display:grid;place-items:center;transition:background .2s,color .2s,border-color .2s} .project-drawer-close:hover{background:#ff293d;border-color:#ff293d;color:white} .project-drawer-content{padding:32px 22px 40px} .project-drawer-content h2{margin:0 0 9px;font:850 26px/1.08 var(--display,'Barlow Condensed',sans-serif);letter-spacing:-.025em;text-transform:uppercase;color:#fff} .project-drawer-subtitle{margin:0 0 27px;color:#a69a9d;font:500 13px/1.6 var(--body)} .project-drawer-form{display:flex;flex-direction:column;gap:9px} .project-drawer-form>label,.project-drawer-form legend{font:700 9px var(--mono);letter-spacing:.12em;color:#ff6878;margin-top:7px} .project-drawer-form>input,.project-drawer-form>textarea{width:100%;box-sizing:border-box;padding:12px 13px;border:1px solid #302024;border-radius:7px;background:#0c090a;color:#f5f5f5;font:14px/1.5 var(--body);outline:none;transition:border-color .2s,box-shadow .2s,background .2s} .project-drawer-form>input{height:46px} .project-drawer-form>textarea{min-height:112px;resize:vertical;max-height:260px} .project-drawer-form>input::placeholder,.project-drawer-form>textarea::placeholder{color:#62575a} .project-drawer-form>input:focus,.project-drawer-form>textarea:focus{border-color:#ff293d;background:#10090b;box-shadow:0 0 0 2px #ff293d24} .project-drawer-form fieldset{margin:6px 0 0;padding:10px 13px 12px;border:1px solid #302024;border-radius:8px;min-width:0;background:#090708} .project-drawer-form legend{padding:0 4px;margin-left:-4px} .project-drawer-check{display:flex;align-items:center;gap:10px;min-height:29px;color:#e4dcde;font:500 13px var(--body);cursor:pointer} .project-drawer-check input{appearance:none;width:15px;height:15px;flex:0 0 15px;margin:0;border:1px solid #63303a;border-radius:3px;background:#100b0c;display:grid;place-items:center;cursor:pointer} .project-drawer-check input:checked{background:#ff293d;border-color:#ff293d} .project-drawer-check input:checked:after{content:'✓';color:white;font:700 11px var(--body)} .project-drawer-rule{height:1px;background:#2b171b;margin:12px 0 10px} .project-drawer-send{height:48px;width:100%;border:1px solid #ff3348;border-radius:7px;background:#ff293d;color:white;font:800 11px var(--mono);letter-spacing:.15em;cursor:pointer;transition:background .2s,color .2s,transform .2s,box-shadow .2s;box-shadow:0 7px 24px #ff293d20} .project-drawer-send:hover{background:#fff;border-color:#fff;color:#111;transform:translateY(-1px);box-shadow:0 9px 26px #ff293d25} .project-drawer-status{margin:0;color:#c6b8bb;font:11px/1.5 var(--body)} body.project-drawer-open{overflow:hidden} @media(max-width:480px){.project-drawer{width:100vw;border-left:0}.project-drawer-content{padding:29px 20px 36px}.project-drawer-content h2{font-size:25px}} @media(prefers-reduced-motion:reduce){.project-drawer,.project-drawer-backdrop{transition:none}} /* V98 — glossy glass treatment and softer rounded geometry for project enquiry drawer */ .project-drawer-backdrop{background:rgba(2,0,1,.68);backdrop-filter:blur(10px) saturate(1.12);-webkit-backdrop-filter:blur(10px) saturate(1.12)} .project-drawer{top:10px;right:10px;height:calc(100dvh - 20px);width:min(450px,calc(100vw - 20px));border:1px solid rgba(255,91,111,.34);border-radius:28px;background:radial-gradient(ellipse at 82% -8%,rgba(255,42,65,.28),transparent 42%),linear-gradient(145deg,rgba(35,17,21,.97),rgba(10,8,10,.985) 48%,rgba(5,5,6,.99));box-shadow:-22px 0 70px rgba(0,0,0,.58),inset 0 1px 0 rgba(255,255,255,.12),inset 1px 0 0 rgba(255,75,94,.08);overflow-y:auto} .project-drawer:before{height:4px;left:24px;right:24px;top:0;border-radius:0 0 99px 99px;background:linear-gradient(90deg,transparent,#ff3048 18%,#ff9ba6 48%,#ff3048 82%,transparent);box-shadow:0 0 18px rgba(255,41,61,.6)} .project-drawer-head{height:68px;padding:0 24px;border-bottom:1px solid rgba(255,100,119,.13);color:#ff6a7b} .project-drawer-close{width:36px;height:36px;border-radius:12px;border:1px solid rgba(255,100,119,.25);background:linear-gradient(145deg,rgba(255,255,255,.12),rgba(255,255,255,.025));box-shadow:inset 0 1px 0 rgba(255,255,255,.13),0 4px 14px rgba(0,0,0,.22)} .project-drawer-close:hover{background:linear-gradient(145deg,#ff596b,#d80928);border-color:#ff8b98;color:#fff;box-shadow:0 0 22px rgba(255,41,61,.3)} .project-drawer-content{padding:30px 24px 34px} .project-drawer-content h2{font-size:29px;letter-spacing:-.02em} .project-drawer-subtitle{margin-bottom:24px} .project-drawer-form{gap:10px} .project-drawer-form>input,.project-drawer-form>textarea{padding:14px 15px;border-radius:15px;border:1px solid rgba(255,103,122,.2);background:linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.018) 65%),rgba(7,6,7,.82);box-shadow:inset 0 1px 0 rgba(255,255,255,.055),0 7px 18px rgba(0,0,0,.12)} .project-drawer-form>input{height:50px} .project-drawer-form>textarea{min-height:124px;border-radius:16px;line-height:1.6} .project-drawer-form>input:focus,.project-drawer-form>textarea:focus{border-color:rgba(255,63,84,.9);background:linear-gradient(145deg,rgba(255,52,73,.09),rgba(255,255,255,.02)),#0c080a;box-shadow:0 0 0 3px rgba(255,41,61,.12),inset 0 1px 0 rgba(255,255,255,.08)} .project-drawer-form fieldset{padding:13px 15px 14px;border-radius:16px;border-color:rgba(255,103,122,.2);background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.012)),rgba(7,6,7,.7);box-shadow:inset 0 1px 0 rgba(255,255,255,.04)} .project-drawer-check{min-height:33px} .project-drawer-check input{width:17px;height:17px;flex-basis:17px;border-radius:5px;border-color:rgba(255,103,122,.36);box-shadow:inset 0 1px 2px rgba(0,0,0,.4)} .project-drawer-send{height:52px;border-radius:999px;border:1px solid rgba(255,172,181,.7);background:linear-gradient(180deg,#ff7786 0%,#ff354d 28%,#e5092b 75%,#a90420 100%);box-shadow:inset 0 2px 0 rgba(255,255,255,.52),inset 0 -3px 0 rgba(91,0,15,.32),0 9px 24px rgba(255,24,53,.23),0 0 0 1px rgba(255,41,61,.15);text-shadow:0 1px 1px rgba(80,0,10,.3);transition:transform .2s,filter .2s,box-shadow .2s} .project-drawer-send:hover{background:linear-gradient(180deg,#fff 0%,#ffe7ea 100%);border-color:#fff;color:#c6092a;transform:translateY(-2px);box-shadow:inset 0 2px 0 #fff,0 12px 30px rgba(255,24,53,.24)} .project-drawer-rule{background:linear-gradient(90deg,transparent,rgba(255,87,107,.28),transparent)} @media(max-width:480px){.project-drawer{top:6px;right:6px;width:calc(100vw - 12px);height:calc(100dvh - 12px);border-radius:24px}.project-drawer-content{padding:26px 20px 30px}} /* V99 — compact, vertically centered left-side project enquiry panel */ .project-drawer{top:50%!important;right:auto!important;left:14px!important;height:auto!important;max-height:calc(100dvh - 48px)!important;width:min(430px,calc(100vw - 28px))!important;transform:translate(-110%,-50%)!important;border-radius:28px!important;overflow-y:auto!important;} .project-drawer.is-open{transform:translate(0,-50%)!important;} .project-drawer-content{padding:22px 24px 24px!important;} .project-drawer-content h2{font-size:27px!important;margin-bottom:6px!important;} .project-drawer-subtitle{margin-bottom:14px!important;} .project-drawer-form{gap:7px!important;} .project-drawer-form>label,.project-drawer-form legend{margin-top:4px!important;} .project-drawer-form>input{height:43px!important;} .project-drawer-form>textarea{min-height:82px!important;max-height:150px!important;} .project-drawer-form fieldset{padding:8px 13px 9px!important;margin-top:3px!important;} .project-drawer-check{min-height:27px!important;} .project-drawer-rule{margin:7px 0 7px!important;} .project-drawer-send{height:46px!important;} @media(max-width:480px){.project-drawer{left:10px!important;width:calc(100vw - 20px)!important;max-height:calc(100dvh - 28px)!important;border-radius:24px!important;}.project-drawer-content{padding:19px 18px 20px!important}.project-drawer-content h2{font-size:24px!important}} /* V100 — wider horizontal project drawer, keeping its vertical position and height */ .project-drawer{width:min(620px,calc(100vw - 24px))!important;right:12px!important;left:auto!important;} @media(max-width:600px){.project-drawer{width:calc(100vw - 16px)!important;right:8px!important;}} /* V101 — Moon-style typography for the project enquiry drawer, matching the site's expressive display headings */ .project-drawer, .project-drawer * { font-family: 'Moon', 'Barlow Condensed', sans-serif !important; } .project-drawer-head { font-size: 13px !important; letter-spacing: .13em !important; } .project-drawer-content h2 { font-family: 'Moon', 'Barlow Condensed', sans-serif !important; font-weight: 900 !important; letter-spacing: -.025em !important; } .project-drawer-subtitle { font-size: 16px !important; line-height: 1.5 !important; } .project-drawer-form>label, .project-drawer-form legend { font-size: 12px !important; letter-spacing: .1em !important; } .project-drawer-form>input, .project-drawer-form>textarea { font-size: 17px !important; } .project-drawer-check { font-size: 16px !important; } .project-drawer-send { font-size: 14px !important; letter-spacing: .13em !important; } .project-drawer-status { font-size: 13px !important; } @media(max-width:600px){.project-drawer-content h2{font-size:27px!important}.project-drawer-subtitle{font-size:15px!important}.project-drawer-form>input,.project-drawer-form>textarea{font-size:16px!important}} /* V102 — taller, more spacious project enquiry experience */ .project-drawer{top:10px!important;bottom:10px!important;height:calc(100dvh - 20px)!important;max-height:none!important;overflow-y:auto!important;border-radius:30px!important;width:min(680px,calc(100vw - 24px))!important;right:12px!important;left:auto!important;} .project-drawer-content{padding:34px 34px 36px!important;} .project-drawer-content h2{font-size:clamp(32px,3vw,42px)!important;line-height:1.05!important;margin-bottom:10px!important;} .project-drawer-subtitle{font-size:18px!important;line-height:1.6!important;margin-bottom:24px!important;} .project-drawer-form{gap:14px!important;} .project-drawer-form>label,.project-drawer-form legend{font-size:16px!important;line-height:1.3!important;letter-spacing:.045em!important;margin-top:8px!important;font-weight:800!important;} .project-drawer-form>input{height:66px!important;padding:0 22px!important;font-size:20px!important;border-radius:22px!important;} .project-drawer-form>textarea{min-height:190px!important;max-height:300px!important;padding:20px 22px!important;font-size:20px!important;line-height:1.5!important;border-radius:22px!important;} .project-drawer-form fieldset{padding:18px 22px 20px!important;margin-top:8px!important;border-radius:24px!important;} .project-drawer-check{min-height:46px!important;font-size:19px!important;line-height:1.4!important;gap:14px!important;} .project-drawer-check input,.project-drawer-check .check-box{width:25px!important;height:25px!important;} .project-drawer-rule{margin:18px 0!important;} .project-drawer-send{height:64px!important;font-size:17px!important;letter-spacing:.1em!important;border-radius:999px!important;} .project-drawer-status{font-size:15px!important;line-height:1.5!important;} .project-drawer-head{font-size:15px!important;letter-spacing:.12em!important;} @media(max-width:600px){.project-drawer{top:6px!important;bottom:6px!important;right:6px!important;left:auto!important;width:calc(100vw - 12px)!important;height:calc(100dvh - 12px)!important;border-radius:24px!important}.project-drawer-content{padding:25px 20px 28px!important}.project-drawer-content h2{font-size:30px!important}.project-drawer-subtitle{font-size:16px!important;margin-bottom:18px!important}.project-drawer-form>label,.project-drawer-form legend{font-size:14px!important}.project-drawer-form>input{height:58px!important;font-size:17px!important;padding:0 17px!important}.project-drawer-form>textarea{min-height:155px!important;font-size:17px!important;padding:16px 17px!important}.project-drawer-form fieldset{padding:14px 15px 16px!important}.project-drawer-check{font-size:16px!important;min-height:40px!important}.project-drawer-send{height:58px!important;font-size:15px!important}} /* V103 — alignment repair: keep the drawer anchored at the top and remove excess dead space */ .project-drawer{top:10px!important;bottom:10px!important;height:calc(100dvh - 20px)!important;max-height:calc(100dvh - 20px)!important;left:auto!important;right:12px!important;transform:translateX(105%)!important;overflow-y:auto!important;overscroll-behavior:contain!important;display:flex!important;flex-direction:column!important;} .project-drawer.is-open{transform:translateX(0)!important;} .project-drawer-head{flex:0 0 68px!important;} .project-drawer-content{flex:0 0 auto!important;padding:26px 30px 28px!important;} .project-drawer-form{display:flex!important;flex-direction:column!important;gap:10px!important;} .project-drawer-form>label{margin-top:4px!important;} .project-drawer-form>input{height:58px!important;} .project-drawer-form>textarea{min-height:130px!important;max-height:180px!important;resize:vertical!important;} .project-drawer-form fieldset{margin-top:5px!important;padding:12px 18px 14px!important;} .project-drawer-check{min-height:38px!important;} .project-drawer-rule{margin:8px 0!important;} .project-drawer-send{flex:0 0 58px!important;height:58px!important;margin-top:4px!important;} .project-drawer-status{margin-top:2px!important;} @media(max-width:600px){.project-drawer{top:6px!important;bottom:6px!important;right:6px!important;left:auto!important;width:calc(100vw - 12px)!important;height:calc(100dvh - 12px)!important;max-height:calc(100dvh - 12px)!important;border-radius:24px!important}.project-drawer-content{padding:22px 18px 24px!important}.project-drawer-content h2{font-size:28px!important}.project-drawer-subtitle{font-size:15px!important;margin-bottom:14px!important}.project-drawer-form>label,.project-drawer-form legend{font-size:13px!important}.project-drawer-form>input{height:52px!important;font-size:16px!important}.project-drawer-form>textarea{min-height:110px!important;max-height:145px!important;font-size:16px!important}.project-drawer-form fieldset{padding:10px 12px!important}.project-drawer-check{min-height:34px!important;font-size:15px!important}.project-drawer-send{height:54px!important;flex-basis:54px!important}} /* V104 — close control at full visibility and easier to tap */ .project-drawer-close{opacity:1!important;visibility:visible!important;width:48px!important;height:48px!important;min-width:48px!important;min-height:48px!important;flex:0 0 48px!important;font-size:32px!important;line-height:1!important;color:#fff!important;border:1px solid rgba(255,92,112,.9)!important;border-radius:14px!important;background:linear-gradient(145deg,#ff4058,#b90020)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 4px 18px rgba(255,25,55,.28)!important;display:grid!important;place-items:center!important;} .project-drawer-close:hover,.project-drawer-close:focus-visible{opacity:1!important;background:linear-gradient(145deg,#ff6678,#df0028)!important;outline:2px solid rgba(255,255,255,.75)!important;outline-offset:2px!important;} @media(max-width:600px){.project-drawer-close{width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important;flex-basis:44px!important;font-size:30px!important;}} /* V105 — stronger project drawer title */ .project-drawer-content h2{font-size:clamp(42px,4vw,56px)!important;line-height:1.02!important;letter-spacing:-.025em!important;margin-bottom:14px!important;} @media(max-width:600px){.project-drawer-content h2{font-size:clamp(34px,9vw,44px)!important;line-height:1.04!important;margin-bottom:12px!important;}} /* V106 — align PROJECT TYPE legend with the fieldset and checkbox column */ .project-drawer-form fieldset{margin-top:14px!important;padding:14px 18px 16px!important;position:relative!important;} .project-drawer-form fieldset legend{display:table!important;width:auto!important;max-width:calc(100% - 20px)!important;padding:0 9px!important;margin:0 0 0 -9px!important;line-height:1.25!important;white-space:nowrap!important;position:relative!important;top:0!important;background:#11090b!important;} .project-drawer-form fieldset .project-drawer-check:first-of-type{margin-top:3px!important;} @media(max-width:600px){.project-drawer-form fieldset{margin-top:12px!important;padding:12px 15px 14px!important}.project-drawer-form fieldset legend{padding:0 8px!important;margin-left:-8px!important;}} /* V107 — consistent form alignment and no horizontal clipping on narrow screens */ .project-drawer, .project-drawer *, .project-drawer *::before, .project-drawer *::after { box-sizing: border-box !important; } .project-drawer { width: min(680px, calc(100vw - 24px)) !important; max-width: calc(100vw - 24px) !important; } .project-drawer-content { width: 100% !important; min-width: 0 !important; } .project-drawer-form { width: 100% !important; min-width: 0 !important; align-items: stretch !important; } .project-drawer-form > label { display: block !important; width: 100% !important; margin-left: 0 !important; padding-left: 0 !important; } .project-drawer-form > input, .project-drawer-form > textarea { display: block !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin-left: 0 !important; margin-right: 0 !important; } .project-drawer-form fieldset { display: block !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin-left: 0 !important; margin-right: 0 !important; padding: 14px 18px 16px !important; } .project-drawer-form fieldset legend { display: table !important; float: none !important; width: auto !important; max-width: calc(100% - 16px) !important; margin: 0 0 8px 0 !important; padding: 0 8px !important; line-height: 1.2 !important; white-space: nowrap !important; position: relative !important; top: auto !important; transform: none !important; background: #11090b !important; } .project-drawer-check { width: 100% !important; min-width: 0 !important; margin: 0 !important; } .project-drawer-check span { min-width: 0 !important; overflow-wrap: anywhere !important; } .project-drawer-rule { width: 100% !important; } .project-drawer-send { width: 100% !important; max-width: 100% !important; } @media (max-width: 600px) { .project-drawer { left: 6px !important; right: 6px !important; width: calc(100vw - 12px) !important; max-width: calc(100vw - 12px) !important; } .project-drawer-content { padding-left: 18px !important; padding-right: 18px !important; } .project-drawer-form > input, .project-drawer-form > textarea { width: 100% !important; max-width: 100% !important; } .project-drawer-form fieldset { padding: 12px 12px 14px !important; } .project-drawer-form fieldset legend { margin-left: 0 !important; padding: 0 7px !important; } } /* SECTION 09 — title-world hover: crimson ambient glow only; remove white hover wash */ #title-artwork .ta-pick, #title-artwork .ta-pick:hover, #title-artwork .ta-pick:focus-visible{ background:transparent!important; outline:none!important; box-shadow:none!important; border-color:rgba(255,255,255,.07)!important; transition:background .28s ease,border-color .28s ease,box-shadow .28s ease,color .2s ease!important; } #title-artwork .ta-pick:hover, #title-artwork .ta-pick:focus-visible{ background:linear-gradient(90deg,rgba(255,35,57,.13) 0%,rgba(255,35,57,.07) 34%,rgba(255,35,57,.025) 72%,transparent 100%)!important; border-radius:999px!important; border-color:rgba(255,41,61,.18)!important; box-shadow:inset 3px 0 0 rgba(255,41,61,.82),inset 18px 0 32px rgba(255,35,57,.055),0 0 30px rgba(255,30,55,.075)!important; } #title-artwork .ta-pick.is-selected, #title-artwork .ta-pick.is-selected:hover, #title-artwork .ta-pick.is-selected:focus-visible{ background:linear-gradient(90deg,rgba(255,35,57,.2) 0%,rgba(255,35,57,.105) 28%,rgba(255,35,57,.045) 62%,rgba(255,35,57,.012) 100%)!important; border-radius:999px!important; border-color:rgba(255,41,61,.22)!important; box-shadow:inset 3px 0 0 #ff293d,inset 22px 0 40px rgba(255,35,57,.075),0 0 34px rgba(255,30,55,.09)!important; } #title-artwork .ta-pick:hover .ta-pick-thumb, #title-artwork .ta-pick.is-selected .ta-pick-thumb{border-color:rgba(255,65,82,.38)!important;box-shadow:0 0 20px rgba(255,35,57,.12)!important;} #title-artwork .ta-pick:hover .ta-pick-num, #title-artwork .ta-pick.is-selected .ta-pick-num, #title-artwork .ta-pick:hover .ta-pick-copy b, #title-artwork .ta-pick.is-selected .ta-pick-copy b, #title-artwork .ta-pick:hover .ta-pick-arrow, #title-artwork .ta-pick.is-selected .ta-pick-arrow{color:#ff4055!important;} @media(max-width:700px){#title-artwork .ta-pick:hover,#title-artwork .ta-pick:focus-visible,#title-artwork .ta-pick.is-selected{border-radius:14px!important;}} /* V109 — Project Type heading sits above its box, like the other form labels */ .project-drawer-form > .project-type-heading{display:block!important;width:100%!important;margin:8px 0 -2px!important;padding:0!important;font:800 16px/1.3 var(--display,'Barlow Condensed',sans-serif)!important;letter-spacing:.045em!important;color:#ff6878!important;text-transform:uppercase!important;} .project-drawer-form fieldset .project-type-legend-sr{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important;} .project-drawer-form fieldset{margin-top:0!important;padding-top:14px!important;} @media(max-width:600px){.project-drawer-form > .project-type-heading{font-size:14px!important;margin-top:6px!important;margin-bottom:0!important;}.project-drawer-form fieldset{padding-top:12px!important;}} /* V110 — make the project enquiry SEND label more prominent */ .project-drawer-send{font-size:22px!important;letter-spacing:.12em!important;font-weight:900!important;} @media(max-width:600px){.project-drawer-send{font-size:20px!important;}} /* V111 — compact-monitor testimonial layout: keep heading clear of fixed nav and prevent FAQ overlap */ @media (min-width:761px) and (max-height:900px){ .testimonials-section{height:112vh!important;min-height:0!important;overflow:clip!important;} .testimonials-sticky{height:100vh!important;min-height:0!important;padding:96px 0 14px!important;justify-content:flex-start!important;} .testimonials-heading h2{font-size:clamp(44px,5.2vw,68px)!important;line-height:.88!important;margin:12px 0 6px!important;} .testimonials-heading p{margin-top:10px!important;font-size:clamp(12px,1vw,14px)!important;} .testimonial-stage{height:clamp(290px,40vh,360px)!important;margin-top:clamp(12px,2vh,20px)!important;flex:0 0 auto!important;} .testimonial-card{width:min(42vw,500px)!important;padding:clamp(20px,2.2vw,30px)!important;} .testimonials-progress{margin-top:10px!important;width:min(500px,60vw)!important;} .faq-section{margin-top:-8vh!important;padding-top:44px!important;} } @media (min-width:761px) and (max-height:760px){ .testimonials-sticky{padding-top:84px!important;} .testimonials-heading h2{font-size:clamp(40px,4.6vw,60px)!important;} .testimonial-stage{height:270px!important;margin-top:10px!important;} .testimonials-progress{margin-top:7px!important;} .faq-section{margin-top:-4vh!important;} } /* V112 — add clear vertical separation before FAQ on compact desktop monitors */ @media (min-width:761px) and (max-height:900px){ .faq-section{margin-top:0!important;padding-top:clamp(64px,8vh,96px)!important;} } @media (min-width:761px) and (max-height:760px){ .faq-section{margin-top:0!important;padding-top:64px!important;} } /* V113 — compact desktop: give the testimonial deck real vertical room so FAQ cannot cover the cards */ @media (min-width:761px) and (max-height:900px){ .testimonials-section{height:130vh!important;min-height:960px!important;overflow:visible!important;} .testimonials-sticky{height:100vh!important;min-height:0!important;overflow:visible!important;padding:88px 0 24px!important;} .testimonials-heading h2{font-size:clamp(44px,5.2vw,68px)!important;line-height:.88!important;margin:12px 0 6px!important;} .testimonials-heading p{margin-top:10px!important;font-size:clamp(12px,1vw,14px)!important;} .testimonial-stage{height:clamp(260px,34vh,310px)!important;margin-top:14px!important;flex:0 0 auto!important;} .testimonial-card{height:100%!important;width:min(42vw,500px)!important;padding:clamp(20px,2.2vw,30px)!important;} .testimonials-progress{margin-top:8px!important;width:min(500px,60vw)!important;} .faq-section{position:relative!important;z-index:2!important;margin-top:0!important;padding-top:64px!important;} } @media (min-width:761px) and (max-height:760px){ .testimonials-section{height:140vh!important;min-height:900px!important;} .testimonials-sticky{padding-top:76px!important;} .testimonial-stage{height:250px!important;margin-top:8px!important;} .faq-section{padding-top:56px!important;} } /* V114 — cache-busted, stronger compact-monitor section flow fix */ @media (min-width:761px) and (max-height:1000px){ html body .testimonials-section{height:130vh!important;min-height:1040px!important;overflow:visible!important;} html body .testimonials-section .testimonials-sticky{height:100vh!important;min-height:0!important;overflow:visible!important;} html body .testimonials-section .testimonial-stage{height:clamp(270px,34vh,320px)!important;flex:0 0 auto!important;} html body .faq-section.section{position:relative!important;z-index:2!important;margin-top:0!important;padding-top:64px!important;} } @media (min-width:761px) and (max-height:760px){ html body .testimonials-section{height:140vh!important;min-height:980px!important;} html body .testimonials-section .testimonials-sticky{padding-top:76px!important;} html body .testimonials-section .testimonial-stage{height:250px!important;margin-top:8px!important;} html body .faq-section.section{margin-top:0!important;padding-top:56px!important;} } /* V115 — tighten the now-visible testimonial-to-FAQ spacing on compact desktops */ @media (min-width:761px) and (max-height:1000px){ html body .testimonials-section{height:102vh!important;min-height:760px!important;overflow:visible!important;} html body .testimonials-section .testimonials-sticky{height:100vh!important;min-height:0!important;overflow:visible!important;padding-top:72px!important;padding-bottom:12px!important;} html body .testimonials-section .testimonial-stage{height:clamp(250px,32vh,290px)!important;margin-top:10px!important;flex:0 0 auto!important;} html body .faq-section.section{position:relative!important;z-index:2!important;margin-top:0!important;padding-top:34px!important;} } @media (min-width:761px) and (max-height:760px){ html body .testimonials-section{height:108vh!important;min-height:760px!important;} html body .testimonials-section .testimonials-sticky{padding-top:64px!important;} html body .testimonials-section .testimonial-stage{height:230px!important;margin-top:8px!important;} html body .faq-section.section{padding-top:30px!important;} } /* V116 — compact testimonial deck, readable studio names, and close FAQ handoff */ @media (min-width:761px) and (max-height:1000px){ html body .testimonials-section{height:108vh!important;min-height:0!important;overflow:visible!important;} html body .testimonials-section .testimonials-sticky{height:100vh!important;min-height:0!important;overflow:visible!important;padding:44px 0 8px!important;justify-content:flex-start!important;} html body .testimonials-section .testimonials-heading h2{font-size:clamp(42px,4.6vw,64px)!important;line-height:.88!important;margin:8px 0 4px!important;} html body .testimonials-section .testimonials-heading p{margin-top:8px!important;font-size:clamp(12px,.95vw,14px)!important;} html body .testimonials-section .testimonial-stage{height:clamp(310px,50vh,350px)!important;margin-top:10px!important;flex:0 0 auto!important;} html body .testimonials-section .testimonial-card{width:min(34vw,460px)!important;height:100%!important;padding:22px 24px 18px!important;gap:8px!important;} html body .testimonials-section .testimonial-card-top{font-size:9px!important;letter-spacing:.07em!important;} html body .testimonials-section .testimonial-quote-mark{font-size:60px!important;line-height:.55!important;} html body .testimonials-section .testimonial-card blockquote{max-width:24ch!important;font-size:clamp(15px,1.15vw,17px)!important;line-height:1.32!important;letter-spacing:-.015em!important;} html body .testimonials-section .testimonial-person{gap:10px!important;flex:0 0 auto!important;} html body .testimonials-section .testimonial-avatar{width:36px!important;height:36px!important;flex:0 0 36px!important;} html body .testimonials-section .testimonial-person strong{font-size:12px!important;line-height:1.25!important;} html body .testimonials-section .testimonial-person small{font-size:10px!important;line-height:1.25!important;} html body .testimonials-section .testimonial-card-foot{font-size:8px!important;padding-top:8px!important;line-height:1.2!important;} html body .testimonials-section .testimonials-progress{margin-top:8px!important;width:min(460px,52vw)!important;} html body .faq-section.section{position:relative!important;z-index:2!important;margin-top:-12vh!important;padding-top:12px!important;} } @media (min-width:761px) and (max-height:760px){ html body .testimonials-section{height:112vh!important;} html body .testimonials-section .testimonials-sticky{padding-top:32px!important;} html body .testimonials-section .testimonial-stage{height:300px!important;margin-top:8px!important;} html body .testimonials-section .testimonial-card{width:min(33vw,430px)!important;padding:18px 20px 14px!important;} html body .testimonials-section .testimonial-card blockquote{font-size:15px!important;line-height:1.28!important;} html body .faq-section.section{margin-top:-16vh!important;padding-top:10px!important;} } /* V119: slightly larger navigation contact CTA label */ .nav .nav-cta{font-size:12px!important;} @media(max-width:650px){.nav .nav-cta{font-size:11px!important;}} /* ICON ARSENAL RESTORE — hard constraints to prevent global gallery/image rules from expanding artwork */ #icon-arsenal.icon-arsenal-section{width:100%;overflow:hidden;} #icon-arsenal .icon-arsenal-wrap{width:min(1800px,94%);max-width:1800px;margin-inline:auto;} #icon-arsenal .icon-arsenal-head{display:flex!important;flex-direction:row!important;align-items:flex-end!important;justify-content:space-between!important;gap:40px!important;} #icon-arsenal .icon-arsenal-head>div{flex:0 1 38%;min-width:0;} #icon-arsenal .icon-arsenal-head>p{flex:1 1 55%;max-width:850px;margin:0 1% 5px 0;} #icon-arsenal .icon-arsenal-stage{position:relative;width:100%;min-width:0;} #icon-arsenal .icon-arsenal-track{display:grid!important;grid-template-columns:repeat(6,minmax(0,1fr))!important;align-items:center!important;gap:clamp(10px,1.2vw,22px)!important;width:100%;min-width:0;overflow:visible!important;padding:26px clamp(0px,1vw,14px) 34px!important;box-sizing:border-box;} #icon-arsenal .icon-arsenal-card{display:flex!important;flex-direction:column!important;width:auto!important;min-width:0!important;max-width:none!important;box-sizing:border-box!important;overflow:hidden!important;} #icon-arsenal .icon-card-art{position:relative!important;display:block!important;width:100%!important;max-width:100%!important;aspect-ratio:1/1!important;height:auto!important;min-height:0!important;overflow:hidden!important;box-sizing:border-box!important;flex:none!important;} #icon-arsenal .icon-card-art img{position:absolute!important;inset:0!important;display:block!important;width:100%!important;height:100%!important;max-width:100%!important;max-height:100%!important;object-fit:cover!important;object-position:center!important;} #icon-arsenal .icon-card-copy{min-width:0!important;} #icon-arsenal .icon-card-copy h3{font-size:clamp(13px,1.05vw,20px)!important;} @media(max-width:1250px){#icon-arsenal .icon-arsenal-track{grid-template-columns:repeat(3,minmax(0,1fr))!important;}#icon-arsenal .icon-arsenal-card{width:100%!important;max-width:320px!important;justify-self:center!important;}#icon-arsenal .icon-arsenal-head h2{font-size:clamp(42px,5.5vw,72px)!important;}} @media(max-width:700px){#icon-arsenal .icon-arsenal-head{align-items:flex-start!important;flex-direction:column!important;gap:17px!important;}#icon-arsenal .icon-arsenal-head>div,#icon-arsenal .icon-arsenal-head>p{width:100%;max-width:none;}#icon-arsenal .icon-arsenal-track{display:flex!important;gap:14px!important;overflow-x:auto!important;overflow-y:visible!important;}#icon-arsenal .icon-arsenal-card{flex:0 0 68vw!important;width:68vw!important;max-width:290px!important;}} /* V144 FIX: HARD ISOLATION BETWEEN THE ART WALL AND ICON ARSENAL. The 3D carousel must paint only inside its own viewport; the icon section must use only its six explicit icon-card images. */ #game-art-wall.art-marquee-section{position:relative!important;isolation:isolate!important;overflow:hidden!important;contain:layout paint!important;clip-path:inset(0)!important;z-index:0!important;} #game-art-wall .art-3d-viewport{position:relative!important;isolation:isolate!important;overflow:hidden!important;contain:layout paint!important;clip-path:inset(0)!important;max-width:100%!important;} #game-art-wall .art-3d-ring{pointer-events:none!important;} #game-art-wall .art-3d-card{position:absolute!important;max-width:none!important;flex:none!important;} #icon-arsenal.icon-arsenal-section{position:relative!important;isolation:isolate!important;contain:layout style!important;clear:both!important;z-index:1!important;overflow:hidden!important;} #icon-arsenal .icon-arsenal-track{position:relative!important;z-index:2!important;} #icon-arsenal .icon-arsenal-card{position:relative!important;display:flex!important;min-width:0!important;overflow:hidden!important;} #icon-arsenal .icon-arsenal-card>.icon-card-art{position:relative!important;display:block!important;flex:0 0 auto!important;width:100%!important;aspect-ratio:1/1!important;height:auto!important;min-height:0!important;overflow:hidden!important;} #icon-arsenal .icon-arsenal-card>.icon-card-art>img{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;max-width:100%!important;max-height:100%!important;object-fit:cover!important;} @media(max-width:1250px){#icon-arsenal .icon-arsenal-track{grid-template-columns:repeat(3,minmax(0,1fr))!important;}} @media(max-width:700px){#icon-arsenal .icon-arsenal-track{display:flex!important;overflow-x:auto!important;}#icon-arsenal .icon-arsenal-card{flex:0 0 68vw!important;width:68vw!important;}} /* V145 — rebuilt Icon Arsenal section: independent layout, no Art Wall bleed */ #game-art-wall { position:relative; z-index:0; } #game-art-wall .art-3d-viewport { overflow:hidden!important; } #icon-arsenal { position:relative!important; z-index:2!important; isolation:isolate!important; display:block!important; clear:both!important; width:100%!important; min-height:0!important; overflow:hidden!important; contain:layout paint!important; padding:64px 0 48px!important; background:radial-gradient(ellipse at 78% 38%,rgba(74,10,20,.22),transparent 42%),linear-gradient(120deg,#090809,#10090b 62%,#080708)!important; } #icon-arsenal * { box-sizing:border-box; } #icon-arsenal .icon-arsenal-wrap { width:min(1800px,96%)!important; max-width:1800px!important; margin:0 auto!important; } #icon-arsenal .icon-arsenal-head { display:grid!important; grid-template-columns:minmax(320px,.95fr) minmax(400px,1.05fr)!important; align-items:center!important; gap:clamp(30px,5vw,90px)!important; margin:0 0 26px!important; } #icon-arsenal .icon-arsenal-head h2 { margin:18px 0 0!important; font-size:clamp(46px,4.5vw,82px)!important; line-height:.92!important; letter-spacing:-.055em!important; } #icon-arsenal .icon-arsenal-head>p { margin:0!important; max-width:800px!important; font-size:clamp(14px,1.2vw,21px)!important; line-height:1.8!important; color:#b9a8ab!important; } #icon-arsenal .icon-arsenal-stage { position:relative!important; display:block!important; width:100%!important; min-height:0!important; padding:0!important; margin:0!important; overflow:visible!important; } #icon-arsenal .icon-arsenal-ghost { display:none!important; } #icon-arsenal .icon-arsenal-track { position:relative!important; display:grid!important; grid-template-columns:repeat(6,minmax(0,1fr))!important; align-items:center!important; gap:clamp(10px,1.2vw,22px)!important; width:100%!important; margin:0!important; padding:22px 4px 28px!important; overflow:visible!important; } #icon-arsenal .icon-arsenal-card { position:relative!important; inset:auto!important; display:flex!important; flex-direction:column!important; width:100%!important; min-width:0!important; max-width:none!important; height:auto!important; min-height:0!important; padding:clamp(8px,.8vw,14px)!important; margin:0!important; overflow:hidden!important; border:1px solid rgba(255,65,82,.55)!important; border-radius:7px!important; background:linear-gradient(155deg,rgba(39,18,23,.98),rgba(8,7,8,.99) 78%)!important; box-shadow:0 18px 36px rgba(0,0,0,.36),inset 0 1px rgba(255,255,255,.06)!important; transform:rotate(var(--tilt,0deg)) translateY(var(--lift,0px))!important; } #icon-arsenal .card-arcane { --tilt:1.5deg; --lift:0px; } #icon-arsenal .card-skull { --tilt:-2deg; --lift:28px; } #icon-arsenal .card-royal { --tilt:1.5deg; --lift:20px; } #icon-arsenal .card-mech { --tilt:-1.5deg; --lift:-24px; } #icon-arsenal .card-nitro { --tilt:1.5deg; --lift:10px; } #icon-arsenal .card-panda { --tilt:-1.5deg; --lift:12px; } #icon-arsenal .icon-card-art { position:relative!important; display:block!important; width:100%!important; height:auto!important; aspect-ratio:1/1!important; flex:none!important; min-height:0!important; overflow:hidden!important; border:1px solid rgba(255,41,61,.45)!important; border-radius:18px!important; } #icon-arsenal .icon-card-art img { position:absolute!important; inset:0!important; display:block!important; width:100%!important; height:100%!important; max-width:100%!important; max-height:100%!important; object-fit:cover!important; object-position:center!important; transform:none; } #icon-arsenal .icon-card-top { display:flex!important; align-items:center!important; justify-content:space-between!important; gap:5px!important; min-height:24px!important; margin:0 0 8px!important; font-size:clamp(6px,.48vw,9px)!important; } #icon-arsenal .icon-card-copy { padding:10px 0 12px!important; } #icon-arsenal .icon-card-copy h3 { margin:0 0 5px!important; font-size:clamp(10px,.75vw,16px)!important; line-height:1.1!important; } #icon-arsenal .icon-card-copy p { font-size:clamp(6px,.45vw,9px)!important; line-height:1.4!important; } #icon-arsenal .icon-card-bottom { padding-top:9px!important; margin-top:auto!important; font-size:clamp(6px,.42vw,8px)!important; } #icon-arsenal .icon-arsenal-orbit { pointer-events:none!important; } @media(max-width:1100px){#icon-arsenal .icon-arsenal-head{grid-template-columns:1fr!important;gap:18px!important}#icon-arsenal .icon-arsenal-track{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:18px!important}#icon-arsenal .icon-arsenal-card{max-width:320px!important;justify-self:center!important}#icon-arsenal .icon-card-copy h3{font-size:clamp(14px,1.5vw,20px)!important}} @media(max-width:700px){#icon-arsenal{padding:56px 0 32px!important}#icon-arsenal .icon-arsenal-wrap{width:90%!important}#icon-arsenal .icon-arsenal-head{grid-template-columns:1fr!important;gap:18px!important}#icon-arsenal .icon-arsenal-head h2{font-size:clamp(42px,11vw,68px)!important}#icon-arsenal .icon-arsenal-track{display:flex!important;gap:14px!important;overflow-x:auto!important;overflow-y:hidden!important;padding:20px 4px 26px!important;scroll-snap-type:x mandatory!important}#icon-arsenal .icon-arsenal-card{flex:0 0 72vw!important;width:72vw!important;max-width:290px!important;transform:none!important;scroll-snap-align:center!important}#icon-arsenal .icon-card-top{font-size:9px!important}#icon-arsenal .icon-card-copy h3{font-size:22px!important}#icon-arsenal .icon-card-copy p,#icon-arsenal .icon-card-bottom{font-size:8px!important}} /* Icon Arsenal rebuilt from the supplied reference — v149 */ #icon-arsenal{display:block!important;visibility:visible!important;height:auto!important;max-height:none!important;overflow:hidden!important;position:relative!important;isolation:isolate!important;contain:layout paint!important;z-index:1!important;} #icon-arsenal .icon-arsenal-track{display:grid!important;grid-template-columns:repeat(7,minmax(0,1fr))!important;gap:clamp(7px,.8vw,15px)!important;align-items:center!important;} #icon-arsenal .icon-arsenal-card{min-width:0!important;max-width:none!important;transform:rotate(var(--tilt,0deg)) translateY(var(--lift,0px))!important;} #icon-arsenal .icon-card-art{aspect-ratio:1/1!important;overflow:hidden!important;background:#090809!important;border-radius:18px!important;} #icon-arsenal .icon-card-art img{width:100%!important;height:100%!important;object-fit:contain!important;object-position:center!important;border-radius:17px!important;} #icon-arsenal .card-arcane{--tilt:1.5deg;--lift:0px}#icon-arsenal .card-skull{--tilt:-2deg;--lift:24px}#icon-arsenal .card-royal{--tilt:1.5deg;--lift:17px}#icon-arsenal .card-mech{--tilt:-1.5deg;--lift:-22px}#icon-arsenal .card-nitro{--tilt:1.5deg;--lift:9px}#icon-arsenal .card-panda{--tilt:-1.5deg;--lift:13px}#icon-arsenal .card-roulette{--tilt:1deg;--lift:1px} @media(max-width:1200px){#icon-arsenal .icon-arsenal-track{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:16px!important}} @media(max-width:700px){#icon-arsenal .icon-arsenal-track{display:flex!important;overflow-x:auto!important;gap:14px!important;padding:20px 4px 26px!important}#icon-arsenal .icon-arsenal-card{flex:0 0 72vw!important;width:72vw!important;max-width:290px!important;transform:none!important}} /* v151: uniform black backing behind all game icon art */ #icon-arsenal .icon-card-art{background:#080809!important;overflow:hidden!important;border-radius:18px!important;isolation:isolate!important;} #icon-arsenal .icon-card-art img{background:#080809!important;border-radius:18px!important;object-fit:contain!important;} /* Icon Arsenal title typography refinement */ #icon-arsenal .icon-card-copy h3{font-family:'Barlow Condensed',sans-serif!important;font-weight:900!important;font-size:clamp(15px,1.05vw,21px)!important;line-height:1!important;letter-spacing:.015em!important;text-transform:uppercase!important;color:#fff!important;} @media(max-width:700px){#icon-arsenal .icon-card-copy h3{font-size:23px!important;letter-spacing:.01em!important;}} /* v153: Milker Regular for major section titles */ @font-face{font-family:'Milker Regular';src:url("/assets/Milker.otf?milkerfix=178") format('opentype');font-style:normal;font-weight:400;font-display:swap;} .intro h2,.section-head h2,.principles-intro h2,.process-intro h2,.studio-copy h2,.faq-grid h2,.trans-copy h2,.about-feature-copy h2,.about-art-copy h2,.about-v2-copy h2,.icon-arsenal-head h2,.title-art-head h2,.about-copy-column h2{font-family:'Milker Regular',sans-serif!important;font-weight:400!important;letter-spacing:normal!important;} /* v154: Extend Milker Regular to the five requested statement headings */ .hero-copy h1, #art-marquee-title, #title-art-title, #pricing-title, #testimonials-title, #pricing-title span, #pricing-title em, #testimonials-title em { font-family: 'Milker Regular', sans-serif !important; font-weight: 400 !important; letter-spacing: normal !important; } /* v155: Force Milker on the two headings that remained unchanged */ @font-face{font-family:"Milker Regular";src:url("/assets/Milker.otf?milkerfix=178") format("opentype");font-style:normal;font-weight:400;font-display:swap;} html body #top .hero-grid .hero-copy h1, html body #top .hero-grid .hero-copy h1 span, html body #top .hero-grid .hero-copy h1 .outline, html body #top .hero-grid .hero-copy h1 .red, html body section#pricing h2#pricing-title, html body section#pricing h2#pricing-title span, html body section#pricing h2#pricing-title em { font-family:"Milker Regular",sans-serif !important; font-weight:400 !important; letter-spacing:normal !important; } /* v157: Correct hero headline — 10% smaller than original, not 10% of original */ html body section#top .hero-grid .hero-copy h1, html body section#top .hero-grid .hero-copy h1 span, html body section#top .hero-grid .hero-copy h1 .outline, html body section#top .hero-grid .hero-copy h1 .red { font-size: clamp(69px, 8.64vw, 123px) !important; line-height: .76 !important; } @media (max-width: 650px) { html body section#top .hero-grid .hero-copy h1, html body section#top .hero-grid .hero-copy h1 span, html body section#top .hero-grid .hero-copy h1 .outline, html body section#top .hero-grid .hero-copy h1 .red { font-size: clamp(68px, 15.3vw, 101px) !important; line-height: .76 !important; } } /* v159: Apply Milker Regular to the service-list titles shown in the reference */ #services.services-editorial .service-row h3, .page-content .detail h2 { font-family: 'Milker Regular', sans-serif !important; font-weight: 400 !important; letter-spacing: normal !important; } /* v160: Service-list titles reduced by 30% from the previous size */ html body #services.services-editorial .service-row h3 { font-size: clamp(25.2px, 2.87vw, 36.4px) !important; } @media (max-width: 700px) { html body #services.services-editorial .service-row h3 { font-size: clamp(23.8px, 5.6vw, 33.6px) !important; } } /* v161: Hero headline reduced by 30% (retains 70% of current size) */ html body section#top .hero-grid .hero-copy h1, html body section#top .hero-grid .hero-copy h1 span, html body section#top .hero-grid .hero-copy h1 .outline, html body section#top .hero-grid .hero-copy h1 .red { font-size: clamp(48.3px, 6.048vw, 86.1px) !important; line-height: .76 !important; } @media (max-width: 650px) { html body section#top .hero-grid .hero-copy h1, html body section#top .hero-grid .hero-copy h1 span, html body section#top .hero-grid .hero-copy h1 .outline, html body section#top .hero-grid .hero-copy h1 .red { font-size: clamp(47.6px, 10.71vw, 70.7px) !important; line-height: .76 !important; } } /* V165 — Use the site's Moon typography for supporting copy beneath service headings */ html body #services.services-editorial .service-row-main p { font-family: 'Moon', 'Barlow Condensed', sans-serif !important; } /* v166: Milker Regular for the featured game title at the lower-left of the title-art spotlight */ #title-artwork .ta-feature-bottom h3[data-ta-name]{font-family:'Milker Regular',sans-serif!important;font-weight:400!important;letter-spacing:normal!important;} /* V169: Use Milker Regular for visible CTA and button labels site-wide. */ :is(a.btn,a.button,a.nav-cta,a.contact-cta,.mobile-cta a,.about-v2-cta,.work-card-cta,.contact-footer-send,.contact-submit,.submit-button,.form-submit,.filter-btn,.btn-outline,.btn-primary,button:not(.menu-toggle),[role="button"]){font-family:'Milker Regular',sans-serif!important;font-weight:400!important;letter-spacing:normal!important;} /* v170 — enforce Milker on the compact footer CTA and keep its label concise */ html body a.footer-project-gel-button.about-v2-gel-compact > span.footer-project-gel-label { font-family: "Milker Regular", sans-serif !important; font-weight: 400 !important; letter-spacing: 0 !important; text-transform: uppercase !important; } /* V171 — definitive cache-busted Milker font override for the LET'S CONNECT gel CTA. */ @font-face{font-family:"Milker Regular";src:url("/assets/Milker.otf?milkerfix=178") format("opentype");font-style:normal;font-weight:400;font-display:swap;} html body a.footer-project-gel-button.about-v2-gel-compact > span.footer-project-gel-label, html body .footer-project-gel-button .footer-project-gel-label, html body .contact-footer-redesign .footer-project-gel-button .footer-project-gel-label{ font-family:"Milker Regular" !important; font-style:normal !important; font-weight:400 !important; letter-spacing:0 !important; text-transform:uppercase !important; -webkit-text-stroke:0 !important; } /* V172 — explicitly force the loaded Milker font on the two requested CTAs. */ @font-face{font-family:"Milker Regular";src:url("/assets/Milker.otf?milkerfix=178") format("opentype");font-style:normal;font-weight:400;font-display:swap;} html body a.footer-project-gel-button .footer-project-gel-label, html body a.uds-reim-cta, html body a.uds-reim-cta span{font-family:"Milker Regular",sans-serif!important;font-style:normal!important;font-weight:400!important;letter-spacing:0!important;} /* V173: Specific Milker override for the UDS pricing CTA; earlier #pricing rules forced DM Mono. */ @font-face{font-family:"Milker Regular";src:url("/assets/Milker.otf?milkerfix=178") format("opentype");font-style:normal;font-weight:400;font-display:swap;} html body #pricing .uds-reim-actions a.uds-reim-cta, html body #pricing .uds-reim-actions a.uds-reim-cta .uds-reim-cta-label{ font-family:"Milker Regular",sans-serif!important; font-style:normal!important; font-weight:400!important; letter-spacing:0!important; text-transform:uppercase!important; } html body #pricing .uds-reim-actions a.uds-reim-cta .uds-reim-cta-label{font-size:inherit!important; line-height:1.15!important; display:inline-block!important;} html body #pricing .uds-reim-actions a.uds-reim-cta .uds-reim-cta-arrow{font-family:"Milker Regular",sans-serif!important; font-weight:400!important;} /* V174 — enlarge the Milker label on the LET'S BUILD YOUR GAME pricing CTA. */ @font-face{font-family:"Milker Regular";src:url("/assets/Milker.otf?milkerfix=178") format("opentype");font-style:normal;font-weight:400;font-display:swap;} html body #pricing .uds-reim-actions a.uds-reim-cta .uds-reim-cta-label{font-family:"Milker Regular",sans-serif!important;font-size:clamp(17px,1.45vw,23px)!important;line-height:1.1!important;font-weight:400!important;letter-spacing:0!important;} @media(max-width:700px){html body #pricing .uds-reim-actions a.uds-reim-cta .uds-reim-cta-label{font-size:clamp(15px,4vw,19px)!important;}} /* v175: Milker Regular on FAQ question titles */ #faq .faq-list details > summary, #faq .faq-list details > summary > span, #faq .faq-list details > summary > b { font-family: "Milker Regular", sans-serif !important; font-weight: 400 !important; } /* v176: Force Milker Regular on WHY UI BUDDY feature-card headings */ @font-face{font-family:"Milker Regular";src:url("/assets/Milker.otf?milkerfix=178") format("opentype");font-style:normal;font-weight:400;font-display:swap;} html body #pricing .uds-why-wrap .pricing-why-grid article h3{font-family:"Milker Regular",sans-serif!important;font-weight:400!important;letter-spacing:normal!important;text-transform:uppercase!important;} /* V177 — Milker ticker typography + continuous full-width loop with four seamless repeated groups. */ @font-face{font-family:"Milker Regular";src:url("/assets/Milker.otf?milkerfix=178") format("opentype");font-style:normal;font-weight:400;font-display:swap;} .about-v2-ticker{width:100%;overflow:hidden!important;} .about-v2-ticker-track{display:flex!important;align-items:center;gap:clamp(20px,3vw,45px)!important;width:max-content!important;min-width:0!important;animation:aboutV2Ticker177 27s linear infinite!important;will-change:transform;} .about-v2-ticker-track span{font-family:"Milker Regular",sans-serif!important;font-size:clamp(14px,1.35vw,19px)!important;font-weight:400!important;letter-spacing:0!important;line-height:1!important;white-space:nowrap!important;} .about-v2-ticker-track b{font-family:"Milker Regular",sans-serif!important;font-size:14px!important;font-weight:400!important;flex:none;} @keyframes aboutV2Ticker177{to{transform:translateX(-25%);}} @media(max-width:640px){.about-v2-ticker-track{gap:22px!important;animation-duration:22s!important}.about-v2-ticker-track span{font-size:14px!important;}} /* SMALL ART. BIG IDENTITY. section removed at user's request */ #icon-arsenal,.icon-arsenal-section,[id*="icon-arsenal"],.icon-arsenal-wrap,[class*="icon-arsenal"]{display:none!important;visibility:hidden!important;height:0!important;min-height:0!important;margin:0!important;padding:0!important;overflow:hidden!important} /* Fresh artwork-free SMALL ART. BIG IDENTITY. section */ .sabi-section{display:block!important;position:relative!important;isolation:isolate;width:100%;overflow:hidden;padding:clamp(48px,4vw,76px) 0 42px;background:radial-gradient(ellipse at 75% 15%,rgba(80,12,22,.22),transparent 46%),#090809;color:#f7f4f4;border-top:1px solid rgba(255,48,65,.35);border-bottom:1px solid rgba(255,48,65,.3)} .sabi-inner{width:calc(100% - 40px);max-width:1840px;margin:0 auto;position:relative;z-index:1} .sabi-heading{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,80px);align-items:start;margin:0 0 clamp(26px,3vw,48px)} .sabi-kicker{margin:0 0 18px;color:#ff3041;font:500 11px/1.4 monospace;letter-spacing:.24em} .sabi-heading h2{margin:0;color:#f7f4f4;font-family:inherit;font-weight:950;font-size:clamp(42px,5.4vw,100px);line-height:.88;letter-spacing:-.065em;text-transform:uppercase} .sabi-heading h2 span{color:#ff2639} .sabi-intro{max-width:850px;margin:24px 0 0;color:#c8b9bb;font:400 clamp(15px,1.3vw,24px)/1.7 monospace;letter-spacing:-.025em} .sabi-cards{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:clamp(8px,.8vw,15px);align-items:center} .sabi-card{position:relative;display:flex;flex-direction:column;min-width:0;padding:10px 10px 0;border:1px solid rgba(255,65,82,.65);border-radius:8px;background:linear-gradient(150deg,rgba(63,23,29,.75),rgba(10,9,10,.98) 68%);box-shadow:0 10px 26px rgba(0,0,0,.22);overflow:hidden;transition:transform .28s ease,border-color .28s ease} .sabi-card:before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:#ff3041} .sabi-card-1{transform:translateY(0) rotate(-.3deg)}.sabi-card-2{transform:translateY(13px) rotate(-1deg)}.sabi-card-3{transform:translateY(5px) rotate(.6deg)}.sabi-card-4{transform:translateY(-12px) rotate(-1deg)}.sabi-card-5{transform:translateY(5px) rotate(.5deg)}.sabi-card-6{transform:translateY(10px) rotate(-.6deg)}.sabi-card-7{transform:translateY(0) rotate(.4deg)} .sabi-card:hover{transform:translateY(-5px) rotate(0)!important;border-color:#ff3041} .sabi-card-top{display:flex;align-items:center;justify-content:space-between;gap:4px;margin-bottom:10px;color:#d5c1c4;font:500 clamp(6px,.48vw,9px)/1.4 monospace;letter-spacing:.04em;white-space:nowrap} .sabi-arrow{display:grid;place-items:center;flex:0 0 25px;width:25px;height:25px;border:1px solid rgba(255,65,78,.6);border-radius:50%;color:#ff5360;font-size:13px} .sabi-art-placeholder{position:relative;display:grid;place-items:center;width:100%;aspect-ratio:1/1;overflow:hidden;border:1px solid rgba(255,65,78,.45);border-radius:15px;background:radial-gradient(ellipse at 50% 48%,rgba(70,16,24,.2),transparent 58%),linear-gradient(145deg,#100b0d,#080809 70%);box-shadow:inset 0 0 28px rgba(255,35,55,.035)} .sabi-art-placeholder:before{content:"";position:absolute;inset:10px;border:1px solid rgba(255,55,70,.14);border-radius:8px} .sabi-art-placeholder:after{content:"";position:absolute;inset:12px;background:linear-gradient(#ff3041,#ff3041) left top/10px 1px no-repeat,linear-gradient(#ff3041,#ff3041) left top/1px 10px no-repeat,linear-gradient(#ff3041,#ff3041) right top/10px 1px no-repeat,linear-gradient(#ff3041,#ff3041) right top/1px 10px no-repeat,linear-gradient(#ff3041,#ff3041) left bottom/10px 1px no-repeat,linear-gradient(#ff3041,#ff3041) left bottom/1px 10px no-repeat,linear-gradient(#ff3041,#ff3041) right bottom/10px 1px no-repeat,linear-gradient(#ff3041,#ff3041) right bottom/1px 10px no-repeat;opacity:.65} .sabi-crosshair{color:rgba(255,48,65,.72);font:300 30px/1 monospace} .sabi-card h3{margin:12px 0 5px;color:#fff;font-size:clamp(10px,.8vw,15px);font-weight:850;letter-spacing:-.03em;line-height:1.15} .sabi-genre{min-height:26px;margin:0;color:#d4c7c9;font:600 clamp(6px,.43vw,9px)/1.5 monospace} .sabi-card-foot{display:flex;justify-content:space-between;align-items:center;gap:4px;margin-top:7px;padding:11px 0;border-top:1px solid rgba(255,255,255,.14);color:#c5b5b8;font:500 clamp(6px,.4vw,8px)/1.4 monospace;letter-spacing:.05em} .sabi-spark{color:#ff3041;font-size:16px} .sabi-bottom{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:32px;padding-top:20px;border-top:1px solid rgba(255,255,255,.16)} .sabi-tags{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(8px,1.2vw,22px);color:#b7a6a9;font:500 10px/1.6 monospace;letter-spacing:.08em} .sabi-tags b{color:#ff3041;font-size:14px;font-weight:400} .sabi-link{flex:none;color:#ff4a58;text-decoration:none;font:500 10px/1.5 monospace;letter-spacing:.1em;border-bottom:1px solid rgba(255,48,65,.65);padding-bottom:5px} @media(max-width:1100px){.sabi-cards{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.sabi-card-1,.sabi-card-2,.sabi-card-3,.sabi-card-4,.sabi-card-5,.sabi-card-6,.sabi-card-7{transform:none}.sabi-card-top{font-size:8px}.sabi-card h3{font-size:13px}.sabi-genre{font-size:9px}} @media(max-width:680px){.sabi-inner{width:calc(100% - 32px)}.sabi-heading{grid-template-columns:1fr;gap:8px;margin-bottom:25px}.sabi-kicker{margin-bottom:14px}.sabi-heading h2{font-size:clamp(46px,12vw,74px)}.sabi-intro{margin:6px 0 0;font-size:13px;line-height:1.65}.sabi-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.sabi-card{padding:9px 9px 0;transform:none}.sabi-card-top{font-size:8px}.sabi-card h3{font-size:12px}.sabi-genre{font-size:8px;min-height:25px}.sabi-bottom{align-items:flex-start;flex-direction:column;margin-top:24px}.sabi-tags{font-size:8px;gap:8px}.sabi-link{font-size:9px}} /* SMALL ART. BIG IDENTITY. — Milker display font */ html body main #small-art-big-identity .sabi-heading h2, html body main #small-art-big-identity #sabi-title{ font-family:'Milker Regular','Milker',sans-serif!important; font-weight:400!important; letter-spacing:0!important; text-transform:uppercase!important; } html body main #small-art-big-identity .sabi-heading h2 span{ font-family:'Milker Regular','Milker',sans-serif!important; font-weight:400!important; letter-spacing:0!important; } /* Restore visibility and Milker typography for existing artwork-free section */ html body main #small-art-big-identity.sabi-section{display:block!important;visibility:visible!important;opacity:1!important;height:auto!important;min-height:560px!important;max-height:none!important;overflow:visible!important;position:relative!important;clear:both!important;isolation:isolate!important;padding:64px 0 44px!important;background:#090809!important;color:#f7f4f4!important} html body main #small-art-big-identity .sabi-inner{display:block!important;visibility:visible!important;opacity:1!important} html body main #small-art-big-identity .sabi-heading{display:grid!important;grid-template-columns:1fr 1fr!important} html body main #small-art-big-identity .sabi-cards{display:grid!important;grid-template-columns:repeat(7,minmax(0,1fr))!important} html body main #small-art-big-identity .sabi-card{display:flex!important;visibility:visible!important;opacity:1!important} html body main #small-art-big-identity #sabi-title,html body main #small-art-big-identity .sabi-heading h2,html body main #small-art-big-identity .sabi-heading h2 span{font-family:'Milker Regular','Milker',sans-serif!important;font-weight:400!important;letter-spacing:0!important;text-transform:uppercase!important} @media(max-width:1100px){html body main #small-art-big-identity .sabi-cards{grid-template-columns:repeat(4,minmax(0,1fr))!important}} @media(max-width:680px){html body main #small-art-big-identity .sabi-heading{grid-template-columns:1fr!important}html body main #small-art-big-identity .sabi-cards{grid-template-columns:repeat(2,minmax(0,1fr))!important}} @media(max-width:1100px){#small-art-big-identity .sabi-cards{grid-template-columns:repeat(4,minmax(0,1fr))!important}#small-art-big-identity .sabi-heading{grid-template-columns:1fr 1fr!important}}@media(max-width:680px){#small-art-big-identity{padding:42px 0 32px!important}#small-art-big-identity .sabi-heading{grid-template-columns:1fr!important;gap:10px!important}#small-art-big-identity .sabi-cards{grid-template-columns:repeat(2,minmax(0,1fr))!important}#small-art-big-identity .sabi-bottom{align-items:flex-start!important;flex-direction:column!important}} /* SABI LIVE VISIBILITY FIX 2026-10-19 */ #small-art-big-identity.sabi-section{display:block!important;visibility:visible!important;opacity:1!important;position:relative!important;clear:both!important;width:100%!important;height:auto!important;min-height:560px!important;max-height:none!important;overflow:visible!important;box-sizing:border-box!important;margin:0!important;padding:64px 0 44px!important;background:#090809!important;color:#f7f4f4!important;isolation:isolate!important;clip:auto!important;clip-path:none!important;transform:none!important} #small-art-big-identity.sabi-section .sabi-inner{display:block!important;visibility:visible!important;opacity:1!important;width:calc(100% - 40px)!important;max-width:1840px!important;margin:0 auto!important} #small-art-big-identity.sabi-section .sabi-heading{display:grid!important;visibility:visible!important;opacity:1!important;grid-template-columns:1fr 1fr!important;gap:40px!important;align-items:start!important;margin:0 0 36px!important} #small-art-big-identity.sabi-section .sabi-cards{display:grid!important;visibility:visible!important;opacity:1!important;grid-template-columns:repeat(7,minmax(0,1fr))!important;gap:12px!important;align-items:start!important} #small-art-big-identity.sabi-section .sabi-card{display:flex!important;visibility:visible!important;opacity:1!important;position:relative!important;min-width:0!important} #small-art-big-identity.sabi-section #sabi-title{display:block!important;visibility:visible!important;opacity:1!important;color:#f7f4f4!important;font-family:'Milker Regular','Milker',sans-serif!important;font-size:clamp(42px,5.4vw,100px)!important;font-weight:400!important;line-height:.9!important;letter-spacing:0!important;text-transform:uppercase!important} @media(max-width:1100px){#small-art-big-identity.sabi-section .sabi-cards{grid-template-columns:repeat(4,minmax(0,1fr))!important}} @media(max-width:680px){#small-art-big-identity.sabi-section{padding:48px 0 36px!important}#small-art-big-identity.sabi-section .sabi-inner{width:calc(100% - 32px)!important}#small-art-big-identity.sabi-section .sabi-heading{grid-template-columns:1fr!important;gap:8px!important;margin-bottom:25px!important}#small-art-big-identity.sabi-section .sabi-cards{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important}} #small-art-big-identity.sabi-section{display:block!important;visibility:visible!important;opacity:1!important;position:relative!important;clear:both!important;width:100%!important;height:auto!important;min-height:560px!important;max-height:none!important;overflow:visible!important;clip:auto!important;clip-path:none!important;transform:none!important;margin:0!important;padding:64px 0 44px!important;background:#090809!important;color:#f7f4f4!important;isolation:isolate!important} /* FINAL SABI RESTORE — keep section visible and in the intended position */ html body main #small-art-big-identity.sabi-section, html body #small-art-big-identity.sabi-section, #small-art-big-identity.sabi-section { display:block!important; visibility:visible!important; opacity:1!important; position:relative!important; inset:auto!important; clear:both!important; float:none!important; width:100%!important; height:auto!important; min-height:560px!important; max-height:none!important; overflow:visible!important; clip:auto!important; clip-path:none!important; transform:none!important; content-visibility:visible!important; contain:none!important; margin:0!important; padding:64px 0 44px!important; background:#090809!important; color:#f7f4f4!important; isolation:isolate!important; z-index:1!important; } html body main #small-art-big-identity.sabi-section * { visibility:visible!important; } @media (max-width:700px) { html body main #small-art-big-identity.sabi-section { padding:44px 0 32px!important; min-height:480px!important; } html body main #small-art-big-identity.sabi-section .sabi-heading { grid-template-columns:1fr!important; gap:12px!important; } html body main #small-art-big-identity.sabi-section .sabi-cards { grid-template-columns:repeat(2,minmax(0,1fr))!important; } } /* Milker cache refresh */ @font-face{font-family:'Milker Regular';src:url('/assets/Milker.otf?milkerfix=178') format('opentype');font-style:normal;font-weight:400;font-display:swap;}