body.studio-unified{--button-fill:#B7BE57;--button-ink:#3B1C3C;--button-shadow:3px 3px 0 #3B1C3C}
body.studio-unified .brand-button{display:inline-flex!important;align-items:center;justify-content:space-between;gap:18px;min-height:44px;padding:12px 16px!important;text-decoration:none!important;letter-spacing:0!important;transition:translate .18s ease;cursor:pointer;box-sizing:border-box}
body.studio-unified .brand-button:hover{translate:-1px -1px}body.studio-unified .brand-button:active{translate:2px 2px}body.studio-unified .brand-button:focus-visible{outline:2px solid #3B1C3C;outline-offset:6px}
#ai .ai-author-copy{border-top:1px solid #B7BE57;padding-top:24px;margin-top:24px;color:#343C51}#ai .ai-author-copy p{font:400 16px/1.6 Inter,Arial,sans-serif;letter-spacing:.02em;margin:0 0 20px!important;color:#343C51!important;translate:none!important;transform:none!important}#ai .ai-author-copy .ai-author-lead{font-weight:700;margin-bottom:24px!important}
body.studio-unified #contact.contact-without-form{background:#343C51!important;color:#ECEBEE!important;padding:64px 40px 24px!important;height:auto!important;min-height:0!important;overflow:hidden}
#contact.contact-without-form .block-content{max-width:1440px;width:100%;margin:auto;padding:0!important;translate:none!important;transform:none!important}
#contact .portfolio-footer{color:#ECEBEE;font:400 16px/1.5 Inter,Arial,sans-serif;letter-spacing:.02em}
#contact .footer-layout{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;align-items:start}
#contact .footer-contact{grid-column:1/span 5;min-width:0}#contact .footer-eyebrow{display:block;font-size:11px;line-height:1.5;letter-spacing:.08em;color:#B7BE57;margin-bottom:24px}
body.studio-unified #contact .portfolio-footer h2{font-size:clamp(28px,3.2vw,46px)!important;line-height:1.08!important;letter-spacing:-.04em!important;font-weight:700!important;color:#ECEBEE!important;margin:0 0 28px!important;translate:none!important;transform:none!important;position:static!important}
#contact .footer-email{display:block;font-size:clamp(14px,1.4vw,20px);line-height:1.6;color:#ECEBEE!important;text-decoration:none;overflow-wrap:anywhere}
#contact .footer-socials{display:flex;flex-wrap:wrap;gap:24px;margin-top:24px}#contact .footer-socials a{display:inline-flex;align-items:center;gap:12px;color:#B7BE57;text-decoration:none;border-bottom:1px solid #B7BE57;padding-bottom:5px;font-size:13px}
#contact .footer-navigation{grid-column:6/span 3;display:flex;flex-direction:column;align-items:start;gap:14px}#contact .footer-navigation .footer-eyebrow{margin-bottom:10px}#contact .footer-navigation a{font-size:13px;text-decoration:none;color:#ECEBEE;line-height:1.5}#contact .footer-navigation a:hover{color:#B7BE57}
#contact .footer-invitation{grid-column:9/span 4;background:#BCCDE0;color:#343C51;padding:28px;position:relative;min-width:0}#contact .footer-invitation h3{font:700 clamp(23px,2.2vw,32px)/1.1 Inter,Arial,sans-serif;letter-spacing:-.03em;color:#343C51;margin:16px 0 22px}#contact .footer-invitation p{font-size:14px;line-height:1.6;margin:0 0 26px;color:#343C51}#contact .footer-card-index{display:block;text-align:right;color:#343C51;font:400 30px/1 Inter,Arial,sans-serif}#contact .footer-channel-note{display:block;font-size:10px;margin-top:16px;line-height:1.5}
#contact .footer-signature{padding:64px 0 32px;display:flex;flex-direction:column;font:900 clamp(42px,12.6vw,184px)/.87 Inter,Arial,sans-serif;letter-spacing:-.07em;color:#BCCDE0;opacity:.16;user-select:none;pointer-events:none}#contact .footer-signature span{display:block;white-space:nowrap}#contact .footer-signature span:last-child{align-self:end}
#contact .footer-bottom{display:grid;grid-template-columns:1fr auto;gap:20px;border-top:1px solid #BCCDE055;padding-top:20px;font-size:11px;color:#ECEBEE}#contact .footer-bottom a{color:#B7BE57;text-decoration:none}#contact .footer-bottom p{grid-column:1/-1;max-width:850px;font-size:10px;line-height:1.6;margin:0;color:#ECEBEE}
#contact .portfolio-footer a:focus-visible{outline:2px solid #B7BE57;outline-offset:5px}
@media(max-width:1000px){body.studio-unified #contact.contact-without-form{padding:48px 24px 24px!important}#contact .footer-contact{grid-column:1/span 7}#contact .footer-navigation{grid-column:9/span 4}#contact .footer-invitation{grid-column:1/-1;margin-top:12px;max-width:600px}#contact .footer-signature{padding-top:48px}}
@media(max-width:600px){body.studio-unified #contact.contact-without-form{padding:40px 18px 24px!important}#contact .footer-layout{grid-template-columns:1fr;gap:32px}#contact .footer-contact,#contact .footer-navigation,#contact .footer-invitation{grid-column:1;margin:0}#contact .footer-navigation{display:grid;grid-template-columns:1fr 1fr;gap:16px}#contact .footer-navigation .footer-eyebrow{grid-column:1/-1;margin-bottom:0}#contact .footer-invitation{padding:24px}#contact .footer-signature{font-size:12.1vw;padding:40px 0 28px}#contact .footer-email{font-size:14px}#ai .ai-author-copy p{font-size:14px;line-height:1.6}#contact .footer-invitation p{font-size:14px}}
@media(prefers-reduced-motion:reduce){body.studio-unified .brand-button{transition:none}}

/* SVG arrows inherit the control's text color on iOS as well as desktop. */
a .ui-arrow,button .ui-arrow{display:inline-block;vertical-align:middle;flex-shrink:0;color:inherit!important;fill:none!important;width:16px;height:16px;pointer-events:none}a .ui-arrow path,button .ui-arrow path{stroke:currentColor!important}
body.studio-unified dialog :is(.close,.certificate-close,button[aria-label^="Закрыть"]){border:0!important;box-shadow:none!important;outline:none!important;appearance:none;-webkit-appearance:none;background:transparent!important;color:#3B1C3C!important;border-radius:0!important;min-height:44px;padding:10px 12px;cursor:pointer}
body.studio-unified dialog :is(.close,.certificate-close,button[aria-label^="Закрыть"]):focus-visible{outline:1px solid #3B1C3C!important;outline-offset:3px}

/* One spacing scale for every content section. Hero navigation keeps its own inset. */
body.studio-unified{--section-space:80px;--section-heading-gap:32px}
body.studio-unified :is(#work,#trust,#services,#process,#about,#ai,#contact){padding-top:var(--section-space)!important;padding-bottom:var(--section-space)!important;margin-top:0!important;margin-bottom:0!important;min-height:0!important;height:auto!important;box-sizing:border-box}
body.studio-unified :is(#work,#trust,#services,#process,#about,#ai,#contact)>.block-content{padding-top:0!important;padding-bottom:0!important;margin-top:0!important;margin-bottom:0!important;translate:none!important;transform:none!important}
body.studio-unified :is(#work,#trust,#services,#process,#about,#ai)>.block-content>h2{margin-top:0!important;margin-bottom:var(--section-heading-gap)!important}
body.studio-unified #about .columns{align-items:start!important;padding-top:0!important;padding-bottom:0!important;margin-top:0!important;margin-bottom:0!important;min-height:0!important;translate:none!important;transform:none!important}
body.studio-unified #about .columns>.about-left-content{align-self:start!important;margin-top:0!important;padding-top:0!important;translate:none!important;transform:none!important}
body.studio-unified #about .about-left-heading{margin-top:0!important}
body.studio-unified #ai .ai-scroll-track,body.studio-unified #ai .ai-scroll-pin{padding-top:0!important;padding-bottom:0!important;margin-top:0!important;margin-bottom:0!important;height:auto!important;min-height:0!important;position:relative!important;top:auto!important;align-items:start!important}
@media(max-width:1100px){body.studio-unified{--section-space:64px;--section-heading-gap:28px}}
@media(max-width:750px){body.studio-unified{--section-space:48px;--section-heading-gap:24px}}

/* About: adjacent six-column groups, with a single gutter between copy and photo. */
body.studio-unified #about .columns>.desk-scene{grid-column:7/span 6!important;grid-row:1;max-width:none!important;width:100%!important;margin-left:0!important;margin-right:0!important;justify-self:stretch}
body.studio-unified #about .columns>.about-left-content{grid-column:1/span 6!important;max-width:none!important;width:100%!important}
@media(max-width:750px){body.studio-unified #about .columns>.about-left-content,body.studio-unified #about .columns>.desk-scene{grid-column:1!important;grid-row:auto!important}body.studio-unified #about .columns{row-gap:24px!important}body.studio-unified #about .columns>.desk-scene{max-width:420px!important;justify-self:center}}

/* Clear 90px separation between the CTA and credentials. */
body.studio-unified #about .about-copy>a[href="#contact"]{margin-bottom:90px!important}
body.studio-unified #about .education-fan{margin-top:0!important}

/* About's old editor reset must not disable the shared CTA interaction. */
body.studio-unified #about .about-copy>a.brand-button[href="#contact"]{translate:none!important;transition:translate .18s ease!important}
body.studio-unified #about .about-copy>a.brand-button[href="#contact"]:hover{translate:-1px -1px!important}
body.studio-unified #about .about-copy>a.brand-button[href="#contact"]:active{translate:2px 2px!important}
@media(prefers-reduced-motion:reduce){body.studio-unified #about .about-copy>a.brand-button[href="#contact"]{transition:none!important}}

/* Persistent return control; safe-area inset keeps it clear of the phone home indicator. */
body.studio-unified .back-to-top{position:fixed;right:max(24px,env(safe-area-inset-right));bottom:calc(24px + env(safe-area-inset-bottom));z-index:9990;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-width:100px;min-height:44px;padding:12px 16px;border:1px solid #3B1C3C;border-radius:0;background:#B7BE57;color:#3B1C3C;box-shadow:3px 3px 0 #3B1C3C;font:500 12px/1.2 Inter,Arial,sans-serif;cursor:pointer;transition:translate .18s ease}
body.studio-unified .back-to-top[hidden]{display:none!important}
body.studio-unified .back-to-top:hover{translate:-1px -1px}body.studio-unified .back-to-top:active{translate:2px 2px}body.studio-unified .back-to-top:focus-visible{outline:2px solid #3B1C3C;outline-offset:5px}
@media(max-width:750px){body.studio-unified .back-to-top{right:max(18px,env(safe-area-inset-right));bottom:calc(18px + env(safe-area-inset-bottom));min-width:92px}}
@media(prefers-reduced-motion:reduce){body.studio-unified .back-to-top{transition:none}}

/* Icon-only circular return button; accessible name stays in aria-label. */
body.studio-unified .back-to-top{width:48px!important;height:48px!important;min-width:48px!important;min-height:48px!important;padding:0!important;border-radius:50%!important;gap:0!important;background:#B7BE57!important;color:#3B1C3C!important}
body.studio-unified .back-to-top svg{width:20px;height:20px;display:block}

#approved-hero .hero-video-play{display:block;margin:12px auto 0;padding:10px 16px;min-height:44px;background:#B7BE57;color:#3B1C3C;border:1px solid #3B1C3C;border-radius:0;box-shadow:3px 3px 0 #3B1C3C;font:500 12px/1.2 Inter,Arial,sans-serif}#approved-hero .hero-video-play[hidden]{display:none!important}

/* Mobile navigation: one-line identity and an accessible modal drawer. */
#approved-hero .mobile-menu-toggle{display:none}
body.studio-unified dialog.mobile-site-menu{position:fixed;inset:0 0 0 auto;margin:0;width:min(360px,90vw);max-width:100vw;height:100dvh;max-height:100dvh;min-height:0;padding:24px 24px calc(24px + env(safe-area-inset-bottom));border:0;border-radius:0;background:#ECEBEE;color:#3B1C3C;overflow-y:auto;overscroll-behavior:contain;box-sizing:border-box;animation:menu-enter .24s ease both}
body.studio-unified dialog.mobile-site-menu:not([open]){display:none}
body.studio-unified dialog.mobile-site-menu::backdrop{background:#343C5180;backdrop-filter:blur(3px)}
body.studio-unified dialog.mobile-site-menu.is-closing{animation:menu-exit .24s ease both}
.mobile-menu-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:36px;font:500 11px/1.5 Inter,Arial,sans-serif;letter-spacing:.08em}
.mobile-menu-close{display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;background:transparent;color:#3B1C3C;cursor:pointer}
.mobile-menu-links{display:flex;flex-direction:column;gap:4px}.mobile-menu-links a{display:flex;align-items:center;min-height:48px;padding:10px 0;color:#3B1C3C;text-decoration:none;font:600 20px/1.25 Inter,Arial,sans-serif;letter-spacing:-.03em;border-bottom:1px solid #343C5125}
.mobile-menu-contact{display:flex;flex-direction:column;align-items:start;gap:16px;border-top:1px solid #343C5140;margin-top:32px;padding-top:24px}.mobile-menu-contact>span{font:500 10px/1.5 Inter,Arial,sans-serif;letter-spacing:.08em}.mobile-menu-contact a{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:44px;min-width:150px;color:#3B1C3C;text-decoration:none;font:500 14px/1.4 Inter,Arial,sans-serif}.mobile-menu-legal{font:400 10px/1.6 Inter,Arial,sans-serif;margin:28px 0 0;color:#343C51}
@keyframes menu-enter{from{transform:translateX(100%)}to{transform:translateX(0)}}@keyframes menu-exit{from{transform:translateX(0)}to{transform:translateX(100%)}}
@media(max-width:750px){
 body.studio-unified #approved-hero nav{display:flex!important;justify-content:space-between!important;align-items:center!important;gap:16px;min-height:64px}
 body.studio-unified #approved-hero nav>div{display:none!important}
 body.studio-unified #approved-hero nav .logo{display:block!important;white-space:nowrap!important;max-width:none!important;width:auto!important;flex:0 1 auto;font:500 12px/1.2 Inter,Arial,sans-serif!important;letter-spacing:0!important;translate:none!important;transform:none!important}
 body.studio-unified #approved-hero .mobile-menu-toggle{display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:5px;flex:0 0 44px;width:44px;height:44px;padding:10px;border:1px solid #3B1C3C;border-radius:0;background:#B7BE57;color:#3B1C3C}
 #approved-hero .mobile-menu-toggle>span{display:block;width:20px;height:1.5px;background:currentColor}
 body.studio-unified #approved-hero .promise{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;align-items:end!important;column-gap:12px;row-gap:16px}
 body.studio-unified #approved-hero .promise .specialty{grid-column:1/-1;margin:0!important}
 body.studio-unified #approved-hero .promise h1{grid-column:1;grid-row:2;align-self:end;margin:0!important;translate:none!important;transform:none!important}
 body.studio-unified #approved-hero .promise .cta{grid-column:2;grid-row:2;align-self:end!important;margin:0!important;translate:none;transform:none!important;padding:10px!important;gap:8px;font-size:11px!important;min-height:44px}
 body.studio-unified #approved-hero .promise .cta>span{padding-left:8px}
}
#contact .footer-card-index svg{display:inline-block;vertical-align:middle;width:30px;height:30px;color:#343C51}
body.studio-unified :is(#work,#trust,#services,#process)>.block-content>h2,body.studio-unified #about .about-left-heading,body.studio-unified #ai .columns>div:first-child>h2{margin-top:0!important;translate:none!important;transform:none!important}
@media(prefers-reduced-motion:reduce){body.studio-unified dialog.mobile-site-menu,body.studio-unified dialog.mobile-site-menu.is-closing{animation:none}}

/* Fixed site header, with an equal spacer to avoid a layout jump. */
:root{--site-header-height:66px}
.site-header-spacer{height:var(--site-header-height);width:100%}
body.studio-unified #approved-hero>nav{position:fixed!important;inset:0 0 auto!important;width:100%!important;max-width:none!important;z-index:10020;margin:0!important;padding:10px max(40px,calc((100vw - 1440px)/2))!important;min-height:66px;box-sizing:border-box;background:#ECEBEE;box-shadow:0 1px 0 #343C5125;translate:none!important;transform:none!important}
html{scroll-padding-top:calc(var(--site-header-height) + 24px)}
body.studio-unified :is(#work,#trust,#services,#process,#about,#ai,#contact){scroll-margin-top:0}
/* Full-screen desk-inspired navigation: paper, metal, a pin and a soft lime form. */
body.studio-unified dialog.mobile-site-menu{inset:0!important;width:100vw!important;max-width:100vw!important;height:100dvh!important;max-height:100dvh!important;padding:24px 24px calc(28px + env(safe-area-inset-bottom))!important;background:#343C51!important;color:#ECEBEE!important;isolation:isolate;overflow-x:hidden}
.mobile-site-menu .mobile-menu-heading{position:relative;z-index:3;margin-bottom:32px;color:#B7BE57;font-size:12px}
.mobile-site-menu .mobile-menu-close{background:transparent;color:#B7BE57;border:0;box-shadow:none}
.mobile-menu-paper{position:relative;z-index:2;padding:28px 22px 22px;margin:0 5px;background:#ECEBEE;color:#3B1C3C;box-shadow:7px 8px 0 #BCCDE0;transform:rotate(-1deg)}
.mobile-site-menu .mobile-menu-links{counter-reset:menu-items}.mobile-site-menu .mobile-menu-links a{counter-increment:menu-items;gap:18px;font-size:clamp(20px,5.7vw,28px);min-height:54px;border-bottom:1px solid #343C5125;color:#3B1C3C}.mobile-site-menu .mobile-menu-links a:before{content:'0' counter(menu-items);font:500 10px/1.2 Inter,Arial,sans-serif;color:#343C51;letter-spacing:0}
.menu-paperclip{position:absolute;top:-30px;left:16px;width:30px;height:68px;transform:rotate(-12deg);pointer-events:none}.menu-paperclip svg{width:100%;height:100%}.menu-paperclip:after{content:'';position:absolute;left:2px;top:28px;width:5px;height:22px;background:#ECEBEE;transform:rotate(1deg)}
.menu-pushpin{position:absolute;right:20px;top:-9px;width:20px;height:20px;border-radius:50%;background:radial-gradient(circle at 32% 25%,#ECEBEE 0 5%,#B7BE57 25% 57%,#343C51 96%);box-shadow:2px 4px 4px #343C5155;pointer-events:none}.menu-pushpin:after{content:'';position:absolute;left:8px;top:18px;width:3px;height:12px;background:#343C51;transform:rotate(-15deg);transform-origin:top;z-index:-1}
.mobile-site-menu .mobile-menu-contact{position:relative;z-index:2;margin:32px 5px 0;padding-top:24px;border-color:#BCCDE050}.mobile-site-menu .mobile-menu-contact>span{color:#BCCDE0}.mobile-site-menu .mobile-menu-contact a{color:#B7BE57;min-width:180px;font-size:16px}.mobile-site-menu .mobile-menu-legal{position:relative;z-index:2;color:#ECEBEE;margin:22px 5px 0;max-width:550px}
.menu-furry{position:absolute;z-index:0;pointer-events:none;width:230px;height:230px;right:-90px;top:390px;opacity:.9;animation:menu-fur-drift 8s ease-in-out infinite}
@keyframes menu-fur-drift{0%,100%{transform:translateY(0) rotate(-12deg)}50%{transform:translateY(16px) rotate(12deg)}}
@media(max-width:1100px){body.studio-unified #approved-hero>nav{padding-inline:24px!important}}
@media(max-width:750px){
 body.studio-unified #approved-hero>nav{padding:10px 18px!important;background:#343C51!important;color:#ECEBEE!important;min-height:64px!important}
 body.studio-unified #approved-hero nav .logo{color:#ECEBEE!important}
 body.studio-unified #approved-hero .mobile-menu-toggle{background:transparent!important;border:0!important;box-shadow:none!important;color:#B7BE57!important;gap:7px!important;padding:8px!important}
 body.studio-unified #approved-hero .mobile-menu-toggle>span{width:28px;height:4px;background:#B7BE57;border-radius:0}
}
@media(prefers-reduced-motion:reduce){.menu-furry{animation:none}}

/* Light, borderless close icon in the full-screen menu. */
body.studio-unified dialog.mobile-site-menu .mobile-menu-close{color:#ECEBEE!important;background:transparent!important;border:0!important;outline:0!important;box-shadow:none!important;appearance:none;-webkit-appearance:none;border-radius:0!important}
body.studio-unified dialog.mobile-site-menu .mobile-menu-close svg{color:inherit!important}
body.studio-unified dialog.mobile-site-menu .mobile-menu-close:focus-visible{outline:0!important;background:#ECEBEE18!important}

/* The header uses the same light surface at every viewport width. */
body.studio-unified #approved-hero>nav{background:#ECEBEE!important;color:#3B1C3C!important}
body.studio-unified #approved-hero nav .logo{color:#3B1C3C!important}

/* A soft lime accent in the signature area, clear of links and contact text. */
#contact .footer-signature{position:relative;isolation:isolate;opacity:1}
#contact .footer-signature>span{opacity:.16}
#contact .footer-furry{position:absolute;right:4%;top:50%;width:clamp(120px,19vw,240px);height:auto;aspect-ratio:1;transform:translateY(-50%) rotate(12deg);pointer-events:none;z-index:1;filter:drop-shadow(4px 10px 10px #00000020)}
@media(max-width:750px){#contact .footer-furry{right:1%;width:clamp(92px,25vw,160px)}}

/* One slow, seamless turn while the individual hairs keep moving. */
#contact .footer-furry{animation:footer-furry-turn 72s linear infinite}
@keyframes footer-furry-turn{from{transform:translateY(-50%) rotate(12deg)}to{transform:translateY(-50%) rotate(372deg)}}
@media(prefers-reduced-motion:reduce){#contact .footer-furry{animation:none}}

/* Coffee steam: staggered trails make a continuous, quiet rise. */
.desk-coffee-steam{position:absolute;left:78%;top:0;width:20%;height:22%;z-index:5;pointer-events:none;filter:blur(1.1px);overflow:visible}
.desk-coffee-steam svg{width:100%;height:100%;overflow:visible}.desk-coffee-steam path{stroke:#ECEBEE;stroke-width:3.5;stroke-linecap:round;opacity:0;transform-origin:center bottom;animation:coffee-steam-rise 5.5s ease-in-out infinite}
.desk-coffee-steam path:nth-child(2){animation-delay:-1.8s;stroke:#BCCDE0;stroke-width:2.5}.desk-coffee-steam path:nth-child(3){animation-delay:-3.7s;stroke-width:4;filter:blur(1px)}
@keyframes coffee-steam-rise{0%{opacity:0;transform:translate(0,14px) scale(.75,.65)}25%{opacity:.65}70%{opacity:.3}100%{opacity:0;transform:translate(-6px,-28px) scale(1.15,1.2)}}
/* Loose metal clips land once; the clip holding the photograph stays attached. */
.desk-tossed-clips{position:absolute;inset:0;z-index:4;pointer-events:none;overflow:hidden}
.desk-tossed-clip{position:absolute;left:30%;bottom:9%;width:5%;aspect-ratio:36/80;opacity:0;--clip-rest:36deg;--clip-flight:-80deg;--clip-shift:90px;filter:drop-shadow(1px 2px 1px #343C5140)}
.desk-tossed-clip svg{width:100%;height:100%}.desk-tossed-clip.clip-1{left:40%;bottom:5%;--clip-rest:-22deg;--clip-flight:100deg;--clip-shift:130px}
.desk-motion-visible .desk-tossed-clip{animation:desk-clip-land 1.15s .15s both cubic-bezier(.22,.65,.32,1)}.desk-motion-visible .desk-tossed-clip.clip-1{animation-delay:.4s}
@keyframes desk-clip-land{0%{opacity:0;transform:translate(var(--clip-shift),-130px) rotate(var(--clip-flight)) scale(1.2);filter:drop-shadow(10px 18px 7px #343C5120)}12%{opacity:1}60%{transform:translate(-6px,1px) rotate(calc(var(--clip-rest) - 10deg)) scale(1);filter:drop-shadow(1px 2px 1px #343C5140)}76%{transform:translate(3px,-6px) rotate(calc(var(--clip-rest) + 5deg)) scale(1.02)}90%{transform:translate(-1px,1px) rotate(calc(var(--clip-rest) - 2deg)) scale(1)}100%{opacity:1;transform:translate(0,0) rotate(var(--clip-rest)) scale(1)}}
@media(prefers-reduced-motion:reduce){.desk-coffee-steam{display:none}.desk-motion-visible .desk-tossed-clip{animation:none;opacity:1;transform:rotate(var(--clip-rest))}}

/* Original photo clips, isolated as image layers over a cleaned tabletop patch. */
.desk-original-clips-clean{position:absolute;left:0;bottom:0;width:24%;height:25%;background:url('../assets/designer-desk-no-clips.png') left bottom/416.6667% 400% no-repeat;pointer-events:none;z-index:1}
.desk-original-clip{position:absolute;z-index:2;pointer-events:none;opacity:0}.desk-original-clip svg{display:block;width:100%;height:100%}
.original-clip-0{left:2.7911%;top:77.1132%;width:10.7656%;aspect-ratio:135/164;--landing-x:-55px;--landing-angle:-38deg}
.original-clip-1{left:11.8022%;top:84.37%;width:8.7719%;aspect-ratio:110/148;--landing-x:75px;--landing-angle:44deg}
.desk-motion-visible .desk-original-clip{animation:original-metal-landing 1.15s .1s both cubic-bezier(.22,.65,.32,1)}.desk-motion-visible .original-clip-1{animation-delay:.35s}
@keyframes original-metal-landing{0%{opacity:0;transform:translate(var(--landing-x),-110px) rotate(var(--landing-angle)) scale(1.12)}10%{opacity:1}60%{transform:translate(-3px,1px) rotate(-5deg) scale(1)}76%{transform:translate(2px,-4px) rotate(3deg)}90%{transform:translate(-1px,0) rotate(-1deg)}100%{opacity:1;transform:translate(0,0) rotate(0) scale(1)}}
.desk-natural-steam{position:absolute;right:0;top:-9%;width:32%;height:35%;pointer-events:none;z-index:5;opacity:.7}
@media(prefers-reduced-motion:reduce){.desk-natural-steam{display:none}.desk-motion-visible .desk-original-clip{animation:none;opacity:1;transform:none}}

/* Repeat the original-clip landing only while the desk is on screen. */
.desk-original-clip{opacity:1;animation:original-metal-loop 8s cubic-bezier(.22,.65,.32,1) infinite!important;animation-play-state:paused!important}
.desk-original-clip.original-clip-1{animation-delay:-3.5s!important}
.desk-motion-visible .desk-original-clip{animation-play-state:running!important}
@keyframes original-metal-loop{0%,65%,100%{opacity:1;transform:translate(0,0) rotate(0) scale(1)}70%{opacity:0;transform:translate(0,0) rotate(0) scale(1)}71%{opacity:0;transform:translate(var(--landing-x),-110px) rotate(var(--landing-angle)) scale(1.12)}74%{opacity:1}86%{opacity:1;transform:translate(-3px,1px) rotate(-5deg) scale(1)}91%{transform:translate(2px,-4px) rotate(3deg)}96%{transform:translate(-1px,0) rotate(-1deg)}}
.desk-natural-steam{opacity:1!important;filter:blur(.7px)}
@media(prefers-reduced-motion:reduce){.desk-original-clip,.desk-motion-visible .desk-original-clip{animation:none!important;opacity:1;transform:none}}

/* Lift the vapor above the coffee rim and give it separation from the pale foam. */
.studio-unified #about .desk-natural-steam{right:0!important;top:-12%!important;width:32%!important;height:38%!important;z-index:8!important;opacity:1!important;filter:none!important;mix-blend-mode:normal}

/* Coffee below, with clear space above the rim for rising steam. */
body.studio-unified #about .desk-scene{background-image:url('../assets/designer-desk-coffee-below.png')!important}
body.studio-unified #about .desk-scene .desk-photo{left:18%!important;top:10%!important}
body.studio-unified #about .desk-working-note{top:12%!important;right:3%!important;bottom:auto!important;width:29%!important}
body.studio-unified #about .desk-natural-steam{right:16.5%!important;top:51.5%!important;width:32%!important;height:38%!important}

/* Reference-matched steam: fine pale wisps, no dark smoke halo. */
body.studio-unified #about .desk-natural-steam{filter:blur(.35px)!important;opacity:.85!important}

/* Shared UI kit: arrow compartment for every primary button, including footer. */
body.studio-unified .brand-button>span:has(svg){display:inline-flex!important;align-items:center!important;justify-content:center!important;border-left:1px solid #3B1C3C!important;padding-left:12px!important;min-height:20px!important;background:transparent!important}
body.studio-unified .brand-button>span svg{width:16px!important;height:16px!important;flex-shrink:0}
